/* ═══════════════════════════════════════════════════
           EYE-FRIENDLY PALETTE
           Background:  warm off-white  #F5F2ED  (no pure white glare)
           Surface:     cream           #EDE9E2
           Card:        soft sand       #E8E3DA
           Editor bg:   warm ivory      #FAF7F2
           Text:        warm dark brown #2C2318  (no pure black)
           Text2:       medium brown    #6B5E4E
           Muted:       light taupe     #A8998A
           Accent:      muted teal      #3D7A6B  (calm, not neon)
           Accent2:     sage green      #5B8C5A
           Amber:       warm gold       #B8860B  (muted)
           Error:       muted rose      #B85450
           Border:      warm tan        rgba(139,120,100,0.18)
        ═══════════════════════════════════════════════════ */
 :root {
     --void: #F5F2ED;
     --deep: #EDE9E2;
     --surface: #E8E3DA;
     --panel: #EDE9E2;
     --card: #E8E3DA;
     --card2: #E2DDD4;
     --border: rgba(139, 120, 100, 0.18);
     --border2: rgba(139, 120, 100, 0.32);
     --border3: rgba(61, 122, 107, 0.45);
     --cyan: #3D7A6B;
     --cyan2: #2D6A5B;
     --plasma: #5B8C5A;
     --neon: #7A9E5E;
     --amber: #A07020;
     --amber2: #B88A10;
     --magenta: #A0506A;
     --violet: #6A4E9A;
     --success: #5B8C5A;
     --error: #B85450;
     --warn: #A07020;
     --text: #2C2318;
     --text2: #6B5E4E;
     --muted: #A8998A;
     --glow-cyan: none;
     --glow-plasma: none;
     --glow-amber: none;
 }

 *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     background: var(--void);
     color: var(--text);
     font-family: 'Inter', system-ui, sans-serif;
     min-height: 100vh;
     overflow-x: hidden;
 }

 /* subtle warm grid — much lighter than original */
 body::before {
     content: '';
     position: fixed;
     inset: 0;
     background-image:
         linear-gradient(rgba(139, 120, 100, 0.06) 1px, transparent 1px),
         linear-gradient(90deg, rgba(139, 120, 100, 0.06) 1px, transparent 1px);
     background-size: 40px 40px;
     pointer-events: none;
     z-index: 0;
 }

 /* no harsh scanlines, no neon corner HUDs */
 .scanline-overlay {
     display: none;
 }

 .hud-corner {
     display: none;
 }

 header {
     position: sticky;
     top: 0;
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 24px;
     height: 56px;
     background: rgba(237, 233, 226, 0.97);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border2);
     box-shadow: 0 1px 8px rgba(100, 80, 60, 0.08);
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 10px;
     font-family: 'Inter', sans-serif;
     font-size: 0.9rem;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--cyan);
 }

 .logo-icon {
     width: 32px;
     height: 32px;
     background: linear-gradient(135deg, #3D7A6B, #5B8C5A);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     color: #fff;
 }

 .logo-sub {
     font-size: 0.55rem;
     letter-spacing: 1px;
     color: var(--muted);
     font-weight: 400;
     margin-top: 1px;
     display: block;
     font-family: 'JetBrains Mono', monospace;
 }

 .header-center {
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .tab-btn {
     padding: 6px 16px;
     border-radius: 6px;
     font-family: 'Inter', sans-serif;
     font-size: 0.75rem;
     font-weight: 500;
     cursor: pointer;
     border: 1px solid transparent;
     color: var(--text2);
     background: transparent;
     transition: all .18s;
     letter-spacing: 0.3px;
 }

 .tab-btn:hover {
     color: var(--cyan);
     background: rgba(61, 122, 107, 0.07);
     border-color: var(--border2);
 }

 .tab-btn.active {
     background: rgba(61, 122, 107, 0.1);
     border-color: var(--border3);
     color: var(--cyan);
 }

 .header-right {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .firebase-status {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 0.62rem;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
     padding: 4px 10px;
     border: 1px solid var(--border);
     border-radius: 4px;
     background: rgba(139, 120, 100, 0.05);
 }

 .fb-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--muted);
     transition: all .3s;
 }

 .fb-dot.on {
     background: var(--plasma);
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 6px 13px;
     border-radius: 6px;
     font-family: 'Inter', sans-serif;
     font-size: 0.72rem;
     font-weight: 500;
     cursor: pointer;
     border: 1px solid transparent;
     transition: all .18s;
 }

 .btn-ghost {
     background: transparent;
     border-color: var(--border2);
     color: var(--text2);
 }

 .btn-ghost:hover {
     border-color: var(--border3);
     color: var(--cyan);
     background: rgba(61, 122, 107, 0.06);
 }

 .btn-primary {
     background: rgba(61, 122, 107, 0.12);
     color: var(--cyan);
     border-color: var(--border3);
 }

 .btn-primary:hover {
     background: rgba(61, 122, 107, 0.2);
     transform: translateY(-1px);
 }

 .btn-danger {
     background: rgba(184, 84, 80, 0.07);
     border-color: rgba(184, 84, 80, 0.3);
     color: var(--error);
 }

 .btn-danger:hover {
     background: rgba(184, 84, 80, 0.14);
 }

 .btn-success {
     background: rgba(91, 140, 90, 0.08);
     border-color: rgba(91, 140, 90, 0.3);
     color: var(--plasma);
 }

 .btn-success:hover {
     background: rgba(91, 140, 90, 0.16);
 }

 .btn-sm {
     padding: 4px 10px;
     font-size: 0.65rem;
 }

 .btn-xs {
     padding: 3px 8px;
     font-size: 0.6rem;
 }

 .app-layout {
     display: grid;
     grid-template-columns: 260px 1fr;
     min-height: calc(100vh - 56px);
     position: relative;
     z-index: 1;
 }

 .sidebar {
     border-right: 1px solid var(--border);
     background: rgba(232, 227, 218, 0.97);
     display: flex;
     flex-direction: column;
     position: sticky;
     top: 56px;
     height: calc(100vh - 56px);
     overflow: hidden;
 }

 .sidebar-tabs {
     display: flex;
     border-bottom: 1px solid var(--border);
 }

 .stab {
     flex: 1;
     padding: 10px 4px;
     text-align: center;
     font-size: 0.65rem;
     font-weight: 600;
     letter-spacing: 0.5px;
     cursor: pointer;
     color: var(--muted);
     border-bottom: 2px solid transparent;
     background: transparent;
     border-top: none;
     border-left: none;
     border-right: none;
     font-family: 'Inter', sans-serif;
     transition: all .18s;
     text-transform: uppercase;
 }

 .stab:hover {
     color: var(--text2);
 }

 .stab.active {
     color: var(--cyan);
     border-bottom-color: var(--cyan);
 }

 .spanel {
     flex: 1;
     overflow-y: auto;
     display: none;
     flex-direction: column;
 }

 .spanel.active {
     display: flex;
 }

 .panel-top {
     padding: 10px 12px;
     border-bottom: 1px solid var(--border);
 }

 .nb-list {
     flex: 1;
     overflow-y: auto;
     padding: 6px;
 }

 .nb-item {
     padding: 9px 12px;
     border-radius: 6px;
     cursor: pointer;
     border: 1px solid transparent;
     margin-bottom: 3px;
     transition: all .15s;
     position: relative;
     background: transparent;
 }

 .nb-item:hover {
     background: rgba(61, 122, 107, 0.06);
     border-color: var(--border);
 }

 .nb-item.active-nb {
     background: rgba(61, 122, 107, 0.1);
     border-color: var(--border3);
 }

 .nb-item::before {
     content: '';
     position: absolute;
     left: 0;
     top: 20%;
     bottom: 20%;
     width: 2px;
     background: var(--cyan);
     opacity: 0;
     transition: opacity .2s;
     border-radius: 1px;
 }

 .nb-item.active-nb::before {
     opacity: 1;
 }

 .nb-item-title {
     font-size: 0.78rem;
     font-weight: 500;
     margin-bottom: 3px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     padding-right: 50px;
     color: var(--text);
 }

 .nb-item-meta {
     font-size: 0.6rem;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
 }

 .nb-item-actions {
     position: absolute;
     right: 8px;
     top: 50%;
     transform: translateY(-50%);
     display: flex;
     gap: 3px;
     opacity: 0;
     transition: opacity .15s;
 }

 .nb-item:hover .nb-item-actions {
     opacity: 1;
 }

 .nb-act-btn {
     width: 22px;
     height: 22px;
     border-radius: 4px;
     border: 1px solid var(--border);
     background: rgba(255, 255, 255, 0.5);
     color: var(--text2);
     cursor: pointer;
     font-size: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all .1s;
 }

 .nb-act-btn:hover {
     background: rgba(184, 84, 80, 0.1);
     color: var(--error);
     border-color: rgba(184, 84, 80, 0.3);
 }

 .nb-act-btn.rename:hover {
     background: rgba(61, 122, 107, 0.1);
     color: var(--cyan);
 }

 .nb-act-btn.duplicate:hover {
     background: rgba(91, 140, 90, 0.1);
     color: var(--plasma);
 }

 /* DSA sidebar */
 .dsa-toolbar {
     padding: 10px 12px;
     border-bottom: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     gap: 7px;
 }

 .dsa-search {
     background: rgba(255, 255, 255, 0.5);
     border: 1px solid var(--border);
     border-radius: 6px;
     padding: 7px 10px;
     color: var(--text);
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.7rem;
     outline: none;
     width: 100%;
     transition: border-color .2s;
 }

 .dsa-search::placeholder {
     color: var(--muted);
 }

 .dsa-search:focus {
     border-color: var(--border3);
 }

 .dsa-filters {
     display: flex;
     gap: 4px;
     flex-wrap: wrap;
 }

 .fchip {
     padding: 3px 10px;
     border-radius: 20px;
     font-size: 0.58rem;
     font-weight: 600;
     cursor: pointer;
     border: 1px solid var(--border);
     background: transparent;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
     transition: all .15s;
 }

 .fchip.fa {
     border-color: var(--border3);
     color: var(--cyan);
     background: rgba(61, 122, 107, 0.08);
 }

 .fchip.fe {
     border-color: rgba(91, 140, 90, 0.4);
     color: var(--plasma);
     background: rgba(91, 140, 90, 0.07);
 }

 .fchip.fm {
     border-color: rgba(160, 112, 32, 0.4);
     color: var(--amber);
     background: rgba(160, 112, 32, 0.07);
 }

 .fchip.fh {
     border-color: rgba(184, 84, 80, 0.4);
     color: var(--error);
     background: rgba(184, 84, 80, 0.07);
 }

 .dsa-stats {
     display: flex;
     gap: 10px;
     font-size: 0.57rem;
     font-family: 'JetBrains Mono', monospace;
     color: var(--muted);
 }

 .stat-dot {
     width: 5px;
     height: 5px;
     border-radius: 50%;
     display: inline-block;
     margin-right: 3px;
 }

 .dsa-list {
     flex: 1;
     overflow-y: auto;
     padding: 6px;
 }

 .dsa-sb-item {
     padding: 10px 12px;
     border-radius: 6px;
     border: 1px solid var(--border);
     margin-bottom: 4px;
     transition: all .15s;
     background: rgba(255, 255, 255, 0.35);
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .dsa-sb-item:hover {
     border-color: var(--border2);
     background: rgba(255, 255, 255, 0.55);
 }

 .dsa-sb-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 6px;
 }

 .dsa-sb-title {
     font-size: 0.74rem;
     font-weight: 500;
     flex: 1;
     line-height: 1.3;
     color: var(--text);
 }

 .dsa-sb-btns {
     display: flex;
     gap: 3px;
     opacity: 0;
     transition: opacity .12s;
 }

 .dsa-sb-item:hover .dsa-sb-btns {
     opacity: 1;
 }

 .dsa-sb-btn {
     width: 20px;
     height: 20px;
     border-radius: 4px;
     border: 1px solid var(--border);
     background: rgba(255, 255, 255, 0.5);
     color: var(--text2);
     cursor: pointer;
     font-size: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all .1s;
 }

 .dsa-sb-btn.view-btn:hover {
     background: rgba(61, 122, 107, 0.1);
     color: var(--cyan);
 }

 .dsa-sb-btn.del-btn:hover {
     background: rgba(184, 84, 80, 0.1);
     color: var(--error);
 }

 .dsa-sb-footer {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .diff-badge {
     font-size: 0.52rem;
     padding: 2px 7px;
     border-radius: 3px;
     font-family: 'JetBrains Mono', monospace;
     font-weight: 600;
     letter-spacing: 0.5px;
     text-transform: uppercase;
 }

 .diff-easy {
     background: rgba(91, 140, 90, 0.12);
     color: #3A6A39;
     border: 1px solid rgba(91, 140, 90, 0.25);
 }

 .diff-medium {
     background: rgba(160, 112, 32, 0.12);
     color: #7A5010;
     border: 1px solid rgba(160, 112, 32, 0.25);
 }

 .diff-hard {
     background: rgba(184, 84, 80, 0.12);
     color: #8A3030;
     border: 1px solid rgba(184, 84, 80, 0.25);
 }

 .dsa-cat-tag {
     font-size: 0.58rem;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
 }

 .dsa-lc {
     font-size: 0.54rem;
     color: var(--cyan);
     font-family: 'JetBrains Mono', monospace;
     margin-left: auto;
 }

 .dsa-solved-mark {
     color: var(--plasma);
     font-size: 0.6rem;
 }

 .dsa-bottom {
     padding: 10px 12px;
     border-top: 1px solid var(--border);
 }

 /* MODALS */
 .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(44, 35, 24, 0.55);
     z-index: 1000;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity .25s;
     backdrop-filter: blur(4px);
 }

 .modal-overlay.open {
     opacity: 1;
     pointer-events: all;
 }

 #tc-modal {
     z-index: 1200;
 }

 #delete-modal {
     z-index: 1200;
 }

 .modal {
     background: var(--panel);
     border: 1px solid var(--border2);
     border-radius: 12px;
     padding: 28px;
     width: 520px;
     max-width: 95vw;
     transform: translateY(12px) scale(0.98);
     transition: transform .25s;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: 0 20px 60px rgba(44, 35, 24, 0.2);
 }

 .modal-overlay.open .modal {
     transform: translateY(0) scale(1);
 }

 /* .modal-wide {
     width: 820px;
 } */

 .modal h2 {
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: 6px;
     font-family: 'Inter', sans-serif;
     color: var(--cyan);
     letter-spacing: 0.5px;
 }

 .modal>.modal-sub {
     font-size: 0.73rem;
     color: var(--text2);
     margin-bottom: 18px;
     font-family: 'JetBrains Mono', monospace;
 }

 .form-group {
     margin-bottom: 14px;
 }

 .form-group label {
     display: block;
     font-size: 0.6rem;
     color: var(--cyan);
     margin-bottom: 5px;
     font-family: 'JetBrains Mono', monospace;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     opacity: 0.85;
 }

 .form-group input,
 .form-group select,
 .form-group textarea {
     width: 100%;
     background: rgba(255, 255, 255, 0.6);
     border: 1px solid var(--border2);
     border-radius: 6px;
     padding: 9px 12px;
     color: var(--text);
     font-family: 'Inter', sans-serif;
     font-size: 0.8rem;
     outline: none;
     transition: all .2s;
 }

 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     border-color: var(--border3);
     box-shadow: 0 0 0 2px rgba(61, 122, 107, 0.1);
 }

 .form-group input::placeholder,
 .form-group textarea::placeholder {
     color: var(--muted);
 }

 .form-group select option {
     background: var(--panel);
 }

 .form-group textarea {
     resize: vertical;
     min-height: 80px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.74rem;
 }

 .radio-group {
     display: flex;
     gap: 8px;
 }

 .radio-opt {
     flex: 1;
     padding: 8px;
     border-radius: 6px;
     border: 1px solid var(--border);
     background: rgba(255, 255, 255, 0.4);
     color: var(--text2);
     cursor: pointer;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.62rem;
     font-weight: 600;
     text-transform: uppercase;
     text-align: center;
     transition: all .15s;
 }

 .radio-opt.sel-easy {
     border-color: rgba(91, 140, 90, 0.5);
     color: #3A6A39;
     background: rgba(91, 140, 90, 0.1);
 }

 .radio-opt.sel-medium {
     border-color: rgba(160, 112, 32, 0.5);
     color: #7A5010;
     background: rgba(160, 112, 32, 0.1);
 }

 .radio-opt.sel-hard {
     border-color: rgba(184, 84, 80, 0.5);
     color: #8A3030;
     background: rgba(184, 84, 80, 0.1);
 }

 .modal-actions {
     display: flex;
     justify-content: flex-end;
     gap: 8px;
     margin-top: 18px;
 }

 .modal-divider {
     height: 1px;
     background: var(--border);
     margin: 16px 0;
 }

 .upload-area {
     border: 1px dashed var(--border2);
     border-radius: 6px;
     padding: 20px;
     text-align: center;
     cursor: pointer;
     transition: all .2s;
     position: relative;
     background: rgba(255, 255, 255, 0.3);
 }

 .upload-area:hover {
     border-color: var(--border3);
     background: rgba(61, 122, 107, 0.04);
 }

 .upload-area input[type=file] {
     position: absolute;
     inset: 0;
     opacity: 0;
     cursor: pointer;
 }

 .upload-area-text {
     font-size: 0.76rem;
     color: var(--text2);
 }

 .upload-area-text span {
     color: var(--cyan);
     font-weight: 500;
 }

 .fb-file-status {
     font-size: 0.68rem;
     font-family: 'JetBrains Mono', monospace;
     padding: 8px 12px;
     border-radius: 4px;
     background: rgba(91, 140, 90, 0.08);
     border: 1px solid rgba(91, 140, 90, 0.25);
     color: var(--plasma);
     display: none;
     margin-top: 10px;
 }

 /* QUESTION VIEW */
 .qview-header {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-bottom: 18px;
 }

 .qview-title {
     font-size: 1.15rem;
     font-weight: 600;
     flex: 1;
     line-height: 1.3;
     color: var(--cyan);
 }

 .qview-badges {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
     margin-bottom: 14px;
 }

 .qview-desc {
     font-size: 0.8rem;
     color: var(--text2);
     line-height: 1.8;
     background: rgba(255, 255, 255, 0.45);
     border-radius: 6px;
     padding: 14px 16px;
     margin-bottom: 16px;
     border: 1px solid var(--border);
     font-family: 'JetBrains Mono', monospace;
 }

 .qview-desc.md-rendered {
     font-family: 'Inter', sans-serif;

 }

 .qview-desc.md-rendered h1,
 .qview-desc.md-rendered h2,
 .qview-desc.md-rendered h3 {
     color: var(--cyan);
     margin: 3px 6px;
 }

 .qview-desc.md-rendered p {
     margin-bottom: 8px;
 }

 .qview-desc.md-rendered code {
     background: rgba(61, 122, 107, 0.1);
     padding: 2px 6px;
     border-radius: 3px;
     font-family: 'JetBrains Mono', monospace;
     color: #2A5A50;
     font-size: 0.85em;

 }

 .qview-desc.md-rendered pre {
     background: rgba(44, 35, 24, 0.05);
     border: 1px solid var(--border);
     border-radius: 4px;
     padding: 10px 14px;
     overflow-x: auto;
     margin: 8px 0;
 }

 .qview-desc.md-rendered ul,
 .qview-desc.md-rendered ol {
     padding-left: 20px;
     margin-bottom: 8px;
 }

 .qview-desc.md-rendered strong {
     color: var(--amber);
 }

 .qview-desc.md-rendered em {
     color: var(--neon);
 }

 .qview-desc.md-rendered blockquote {
     border-left: 3px solid var(--cyan);
     padding-left: 30px;
     color: var(--text2);
     margin: 8px 0;
 }

 .qview-cells {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .qview-cell {
     background: rgba(255, 255, 255, 0.4);
     border: 1px solid var(--border);
     border-radius: 6px;
     overflow: hidden;
 }

 .qview-cell-header {
     padding: 8px 14px;
     background: rgba(61, 122, 107, 0.05);
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 0.62rem;
     font-family: 'JetBrains Mono', monospace;
     color: var(--muted);
 }

 .qview-cell-desc {
     padding: 8px 14px;
     font-size: 0.76rem;
     color: var(--text2);
     border-bottom: 1px solid var(--border);
 }

 .qview-cell-code {
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.74rem;
     padding: 12px 14px;
     line-height: 1.7;
     color: var(--text);
     white-space: pre-wrap;
     overflow-x: auto;
 }

 .qview-empty {
     text-align: center;
     padding: 28px;
     color: var(--muted);
     font-size: 0.76rem;
     font-family: 'JetBrains Mono', monospace;
 }

 /* MAIN */
 .main-content {
     min-height: calc(100vh - 56px);
     display: flex;
     flex-direction: column;
 }

 .page {
     display: none;
     flex: 1;
     flex-direction: column;
 }

 .page.active {
     display: flex;
 }

 .nb-page {
     width: 100%;
     padding: 28px 32px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .nb-header {
     margin-bottom: 26px;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 16px;
 }

 .nb-title-wrap {
     flex: 1;
 }

 .nb-title-input {
     background: transparent;
     border: none;
     outline: none;
     font-family: 'Inter', sans-serif;
     font-size: 1.6rem;
     font-weight: 600;
     color: var(--text);
     width: 100%;
     padding: 4px 0;
     border-bottom: 1px solid var(--border2);
     transition: all .3s;
     letter-spacing: 0.2px;
 }

 .nb-title-input:focus {
     border-bottom-color: var(--cyan);
 }

 .nb-title-input::placeholder {
     color: var(--muted);
 }

 .nb-meta {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: 8px;
     font-size: 0.72rem;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
 }

 .nb-meta span {
     color: var(--border3);
 }

 /* CELLS */
 #cells-container {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .cell {
     background: rgba(255, 255, 255, 0.6);
     border: 1px solid var(--border);
     border-radius: 10px;
     transition: border-color .2s, box-shadow .2s, transform .12s;
     position: relative;
 }

 .cell:hover {
     border-color: var(--border2);
     box-shadow: 0 4px 16px rgba(44, 35, 24, 0.08);
     transform: translateY(-1px);
 }

 .cell.focused {
     border-color: var(--border3);
     box-shadow: 0 0 0 2px rgba(61, 122, 107, 0.1), 0 6px 24px rgba(44, 35, 24, 0.1);
 }

 @keyframes cellSlideIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .cell {
     animation: cellSlideIn .25s cubic-bezier(0.16, 1, 0.3, 1);
 }

 /* banner */
 .cell-qbanner {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 9px 16px;
     min-height: 38px;
     background: rgba(245, 242, 237, 0.7);
     border-bottom: 1px solid var(--border);
     border-radius: 10px 10px 0 0;
     position: relative;
 }

 .cell-qbanner.linked {
     background: rgba(61, 122, 107, 0.06);
     border-bottom-color: rgba(61, 122, 107, 0.18);
 }

 .qb-icon {
     font-size: 11px;
     flex-shrink: 0;
 }

 .qb-info {
     flex: 1;
     min-width: 0;
 }

 .qb-sublabel {
     font-size: 0.48rem;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
 }

 .qb-title {
     font-size: 0.76rem;
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     color: var(--cyan);
 }

 .qb-title-row {
     display: flex;
     align-items: center;
     gap: 8px;
     overflow: hidden;
 }

 .qb-title-link {
     cursor: pointer;
     transition: color .15s;
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .qb-title-link:hover {
     color: var(--cyan2);
     text-decoration: underline;
 }

 .qb-view-btn {
     flex-shrink: 0;
     padding: 2px 8px;
     border-radius: 4px;
     font-size: 0.54rem;
     font-weight: 600;
     background: rgba(61, 122, 107, 0.08);
     border: 1px solid var(--border2);
     color: var(--cyan);
     cursor: pointer;
     font-family: 'JetBrains Mono', monospace;
     transition: all .15s;
     white-space: nowrap;
 }

 .qb-view-btn:hover {
     background: rgba(61, 122, 107, 0.16);
 }

 .qb-meta {
     display: flex;
     align-items: center;
     gap: 5px;
     margin-top: 2px;
 }

 .qb-empty {
     font-size: 0.7rem;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
 }

 .qb-right {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
 }

 .qb-drop-wrap {
     position: relative;
 }

 .qb-link-btn {
     padding: 3px 10px;
     border-radius: 4px;
     font-size: 0.58rem;
     font-weight: 600;
     cursor: pointer;
     border: 1px dashed var(--border2);
     background: transparent;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
     transition: all .15s;
     white-space: nowrap;
 }

 .qb-link-btn:hover {
     border-color: var(--amber);
     color: var(--amber);
     border-style: solid;
 }

 .qb-link-btn.linked {
     border-style: solid;
     border-color: var(--border3);
     color: var(--cyan);
 }

 .qb-picker {
     position: fixed;
     background: var(--panel);
     border: 1px solid var(--border2);
     border-radius: 8px;
     z-index: 500;
     overflow: hidden;
     box-shadow: 0 12px 40px rgba(44, 35, 24, 0.18);
     width: 300px;
 }

 .qb-psearch {
     padding: 8px 10px;
     border-bottom: 1px solid var(--border);
 }

 .qb-psearch input {
     width: 100%;
     background: rgba(255, 255, 255, 0.6);
     border: 1px solid var(--border);
     border-radius: 4px;
     padding: 5px 9px;
     color: var(--text);
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.7rem;
     outline: none;
 }

 .qb-psearch input:focus {
     border-color: var(--border3);
 }

 .qb-plist {
     max-height: 200px;
     overflow-y: auto;
 }

 .qb-pitem {
     padding: 8px 12px;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: background .1s;
     font-size: 0.74rem;
 }

 .qb-pitem:hover {
     background: rgba(61, 122, 107, 0.08);
 }

 .qb-pitem.selected {
     background: rgba(61, 122, 107, 0.12);
 }

 .qb-pname {
     flex: 1;
     font-weight: 500;
     color: var(--text);
 }

 .qb-pempty {
     padding: 14px;
     text-align: center;
     color: var(--muted);
     font-size: 0.7rem;
     font-family: 'JetBrains Mono', monospace;
 }

 .qb-unlink {
     padding: 3px 8px;
     border-radius: 4px;
     font-size: 0.54rem;
     cursor: pointer;
     border: 1px solid rgba(184, 84, 80, 0.25);
     background: transparent;
     color: var(--error);
     font-family: 'JetBrains Mono', monospace;
     flex-shrink: 0;
     transition: all .1s;
 }

 .qb-unlink:hover {
     background: rgba(184, 84, 80, 0.08);
     border-color: var(--error);
 }

 /* CELL DESC */
 .cell-desc {
     background: rgba(61, 122, 107, 0.03);
     border-bottom: 1px solid var(--border);
     position: relative;
     transition: border-color .2s;
 }

 .cell-desc.collapsed {
     border-bottom-color: transparent;
 }

 .cell-desc::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 2px;
     background: linear-gradient(180deg, var(--cyan), var(--plasma));
     opacity: 0.35;
     transition: opacity .2s;
 }

 .cell-desc.collapsed::before {
     opacity: 0;
 }

 .desc-label {
     font-size: 0.65rem;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: var(--cyan);
     font-family: 'JetBrains Mono', monospace;
     display: flex;
     align-items: center;
     gap: 6px;
     opacity: 0.8;
     padding: 9px 16px;
     cursor: pointer;
     user-select: none;
 }

 .desc-label:hover {
     opacity: 1;
 }

 .desc-toggle-arrow {
     margin-left: auto;
     font-size: 0.7rem;
     color: var(--muted);
     transition: transform .22s ease;
     display: inline-block;
 }

 .cell-desc.collapsed .desc-toggle-arrow {
     transform: rotate(-90deg);
 }

 .desc-body {
     padding: 0 16px 12px;
     overflow: hidden;
     max-height: 2000px;
     transition: max-height .3s ease, padding .25s ease, opacity .2s ease;
     opacity: 1;
 }

 .cell-desc.collapsed .desc-body {
     max-height: 0;
     padding-bottom: 0;
     opacity: 0;
 }

 .desc-toolbar {
     display: flex;
     align-items: center;
     gap: 6px;
     margin-bottom: 6px;
 }

 .desc-mode-btn {
     padding: 3px 9px;
     border-radius: 4px;
     font-size: 0.54rem;
     font-weight: 600;
     cursor: pointer;
     border: 1px solid var(--border);
     background: transparent;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
     transition: all .15s;
 }

 .desc-mode-btn.active {
     border-color: var(--border3);
     color: var(--cyan);
     background: rgba(61, 122, 107, 0.08);
 }

 .desc-mode-hint {
     font-size: 0.5rem;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
     margin-left: auto;
 }

 .desc-ta {
     width: 100%;
     background: transparent;
     border: none;
     outline: none;
     resize: none;
     color: var(--text);
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.85rem;
     line-height: 1.7;
     height: auto;
     min-height: 48px;
     overflow-y: hidden;
     display: block;
     field-sizing: content;
 }

 .desc-ta::placeholder {
     color: var(--muted);
 }

 .desc-preview {
     color: var(--text);
     font-size: 0.65em;
     line-height: 1.7;
     padding: 20px;
 }

 .desc-preview h1,
 .desc-preview h2,
 .desc-preview h3 {
     color: var(--cyan);
     margin: 10px 0 5px;
 }

 .desc-preview p {
     margin-bottom: 8px;
 }

 .desc-preview code {
     background: rgba(61, 122, 107, 0.1);
     padding: 1px 5px;
     border-radius: 3px;
     font-family: 'JetBrains Mono', monospace;
     color: #2A5A50;
     font-size: 0.65em;
 }

 .desc-preview pre {
     background: rgba(44, 35, 24, 0.05);
     border: 1px solid var(--border);
     border-radius: 4px;
     padding: 10px 14px;
     overflow-x: auto;
     margin: 8px 0;
 }

 .desc-preview strong {
     color: var(--amber);
 }

 .desc-preview em {
     color: var(--neon);
 }

 .desc-preview blockquote {
     border-left: 3px solid var(--cyan);
     padding-left: 12px;
     color: var(--text2);
     margin: 8px 0;
 }

 .desc-preview table {
     width: 100%;
     border-collapse: collapse;
     margin: 8px 0;
     font-size: 0.8rem;
 }

 .desc-preview th {
     background: rgba(61, 122, 107, 0.08);
     border: 1px solid var(--border2);
     padding: 6px 10px;
     color: var(--cyan);
 }

 .desc-preview td {
     border: 1px solid var(--border);
     padding: 5px 10px;
 }

 /* CELL TOOLBAR */
 .cell-toolbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 7px 14px;
     background: rgba(245, 242, 237, 0.7);
     border-bottom: 1px solid var(--border);
     border-radius: 10px 10px 0 0;
 }

 .cell-qbanner+.cell-desc+.cell-toolbar,
 .cell-qbanner+.cell-toolbar {
     border-radius: 0;
 }

 .tl-left {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .tl-right {
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .cell-num {
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.65rem;
     color: var(--cyan);
     background: rgba(61, 122, 107, 0.08);
     padding: 2px 8px;
     border-radius: 4px;
     border: 1px solid rgba(61, 122, 107, 0.18);
     min-width: 32px;
     text-align: center;
 }

 .lang-toggle {
     display: flex;
     background: rgba(255, 255, 255, 0.4);
     border-radius: 5px;
     overflow: hidden;
     border: 1px solid var(--border);
 }

 .lang-btn {
     padding: 3px 11px;
     font-size: 0.65rem;
     font-family: 'JetBrains Mono', monospace;
     font-weight: 600;
     cursor: pointer;
     border: none;
     background: transparent;
     color: var(--muted);
     transition: all .15s;
 }

 .lang-btn.active {
     background: rgba(61, 122, 107, 0.15);
     color: var(--cyan);
 }

 .hint {
     font-size: 0.57rem;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
 }

 .run-btn {
     display: flex;
     align-items: center;
     gap: 5px;
     padding: 5px 14px;
     background: rgba(91, 140, 90, 0.1);
     color: #3A6A39;
     border: 1px solid rgba(91, 140, 90, 0.35);
     border-radius: 6px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.68rem;
     font-weight: 600;
     letter-spacing: 0.5px;
     cursor: pointer;
     transition: all .2s;
 }

 .run-btn:hover {
     background: rgba(91, 140, 90, 0.18);
     transform: translateY(-1px);
 }

 .run-btn.running {
     background: rgba(44, 35, 24, 0.06);
     cursor: not-allowed;
     animation: runPulse 1s infinite;
 }

 @keyframes runPulse {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.55;
     }
 }

 .format-btn {
     display: flex;
     align-items: center;
     gap: 4px;
     padding: 5px 10px;
     background: rgba(160, 112, 32, 0.07);
     color: var(--amber);
     border: 1px solid rgba(160, 112, 32, 0.25);
     border-radius: 5px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.65rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .2s;
 }

 .format-btn:hover {
     background: rgba(160, 112, 32, 0.14);
     border-color: var(--amber);
 }

 .copy-btn {
     display: flex;
     align-items: center;
     gap: 4px;
     padding: 5px 10px;
     background: rgba(139, 120, 100, 0.06);
     color: var(--text2);
     border: 1px solid var(--border2);
     border-radius: 5px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.65rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .2s;
 }

 .copy-btn:hover {
     background: rgba(61, 122, 107, 0.08);
     border-color: var(--border3);
     color: var(--cyan);
 }

 .copy-btn.copied {
     background: rgba(91, 140, 90, 0.1);
     border-color: var(--plasma);
     color: var(--plasma);
 }

 /* output line types */
 .timer-line {
     color: #5577AA;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.74rem;
 }

 .group-line {
     color: var(--amber);
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.74rem;
     font-weight: 600;
 }

 .cell-output {
     max-height: 420px;
     overflow-y: auto;
 }

 .stop-btn {
     display: none;
     align-items: center;
     gap: 4px;
     padding: 5px 10px;
     background: rgba(184, 84, 80, 0.07);
     color: var(--error);
     border: 1px solid rgba(184, 84, 80, 0.3);
     border-radius: 5px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.65rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .2s;
 }

 .stop-btn.visible {
     display: flex;
 }

 .stop-btn:hover {
     background: rgba(184, 84, 80, 0.14);
 }

 .move-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 22px;
     height: 22px;
     background: rgba(139, 120, 100, 0.06);
     color: var(--text2);
     border: 1px solid var(--border);
     border-radius: 4px;
     font-size: 0.7rem;
     cursor: pointer;
     transition: all .15s;
 }

 .move-btn:hover {
     background: rgba(61, 122, 107, 0.08);
     border-color: var(--border3);
     color: var(--cyan);
 }

 .move-btns {
     display: flex;
     flex-direction: column;
     gap: 2px;
 }

 .collapse-btn {
     display: flex;
     align-items: center;
     gap: 4px;
     padding: 5px 10px;
     background: rgba(139, 120, 100, 0.06);
     color: var(--text2);
     border: 1px solid var(--border);
     border-radius: 5px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.65rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .2s;
 }

 .collapse-btn:hover {
     background: rgba(61, 122, 107, 0.08);
     border-color: var(--border3);
     color: var(--cyan);
 }

 .cell.collapsed .cell-editor-wrap {
     display: none;
 }

 .cell.collapsed .cell-output {
     display: none !important;
 }

 .cell.collapsed .cell-desc {
     display: none;
 }

 .cell.collapsed .cell-toolbar {
     border-radius: 10px !important;
     border-bottom: none !important;
 }

 .line-count-badge {
     font-size: 0.56rem;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
     padding: 2px 7px;
     border: 1px solid var(--border);
     border-radius: 3px;
     white-space: nowrap;
 }

 .run-count {
     font-size: 0.54rem;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
     padding: 2px 7px;
     border: 1px solid var(--border);
     border-radius: 3px;
 }

 .clear-out-btn {
     background: none;
     border: none;
     color: var(--muted);
     font-size: 0.62rem;
     font-family: 'JetBrains Mono', monospace;
     cursor: pointer;
     padding: 0 6px;
     transition: color .2s;
 }

 .clear-out-btn:hover {
     color: var(--error);
 }

 .copy-out-btn {
     background: none;
     border: none;
     color: var(--muted);
     font-size: 0.62rem;
     font-family: 'JetBrains Mono', monospace;
     cursor: pointer;
     padding: 0 6px;
     transition: color .2s;
 }

 .copy-out-btn:hover {
     color: var(--cyan);
 }

 .font-size-ctrl {
     display: flex;
     align-items: center;
     background: rgba(255, 255, 255, 0.4);
     border: 1px solid var(--border);
     border-radius: 5px;
     overflow: hidden;
 }

 .fs-btn {
     padding: 3px 8px;
     border: none;
     background: transparent;
     color: var(--text2);
     cursor: pointer;
     font-size: 0.8rem;
     font-weight: 600;
     font-family: 'JetBrains Mono', monospace;
     transition: all .12s;
 }

 .fs-btn:hover {
     background: rgba(61, 122, 107, 0.1);
     color: var(--cyan);
 }

 .fs-display {
     padding: 3px 6px;
     font-size: 0.62rem;
     font-family: 'JetBrains Mono', monospace;
     color: var(--muted);
     min-width: 38px;
     text-align: center;
     border-left: 1px solid var(--border);
     border-right: 1px solid var(--border);
 }

 .icon-btn {
     background: transparent;
     border: 1px solid var(--border);
     color: var(--muted);
     width: 27px;
     height: 27px;
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     font-size: 11px;
     transition: all .15s;
 }

 .icon-btn:hover {
     border-color: rgba(184, 84, 80, 0.4);
     color: var(--error);
     background: rgba(184, 84, 80, 0.06);
 }

 /* CODEMIRROR — solarized light base, warm adjustments */
 .cell-editor-wrap {
     position: relative;
     overflow: hidden;
     border-radius: 0 0 10px 10px;
 }

 .cell-editor-wrap .CodeMirror {
     font-family: 'JetBrains Mono', monospace !important;
     font-size: 13px;
     line-height: 1.7 !important;
     height: auto !important;
     min-height: 90px !important;
     background: #FAF7F2 !important;
     color: #3A2C1E !important;
     border: none !important;
 }

 .cell-editor-wrap .CodeMirror-scroll {
     min-height: 90px !important;
     overflow-x: auto !important;
     overflow-y: hidden !important;
 }

 .cell-editor-wrap .CodeMirror-gutters {
     background: #F0EBE3 !important;
     border-right: 1px solid rgba(139, 120, 100, 0.18) !important;
 }

 .cell-editor-wrap .CodeMirror-linenumber {
     color: #B0A090 !important;
     font-family: 'JetBrains Mono', monospace !important;
     font-size: 10px !important;
     padding: 0 8px !important;
     min-width: 28px !important;
 }

 .cell-editor-wrap .CodeMirror-lines {
     padding: 8px 0 !important;
 }

 .cell-editor-wrap .CodeMirror-line {
     padding: 0 14px !important;
 }

 .cell-editor-wrap .CodeMirror-cursor {
     border-left: 2px solid #3D7A6B !important;
 }

 .cell-editor-wrap .CodeMirror-selected {
     background: rgba(61, 122, 107, 0.12) !important;
 }

 /* OUTPUT */
 .cell-output {
     border-top: 1px solid var(--border);
     background: rgba(250, 247, 242, 0.9);
     border-radius: 0 0 10px 10px;
 }

 .out-header {
     font-size: 0.62rem;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
     padding: 6px 14px;
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
     gap: 8px;
     background: rgba(245, 242, 237, 0.7);
 }

 .out-async-badge {
     padding: 1px 6px;
     border-radius: 3px;
     font-size: 0.5rem;
     background: rgba(61, 122, 107, 0.08);
     color: var(--cyan);
     border: 1px solid rgba(61, 122, 107, 0.2);
 }

 .out-time {
     margin-left: auto;
     color: var(--amber);
     font-size: 0.54rem;
 }

 .out-content {
     padding: 10px 14px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.86rem;
     line-height: 1.75;
     word-break: break-word;
 }

 .out-content.has-error {
     border-left: 2px solid var(--error);
 }

 .out-content.has-success {
     border-left: 2px solid var(--plasma);
 }

 .log-line {
     color: var(--text);
     display: block;
     white-space: pre-wrap;
     padding: 1px 0;
 }

 .error-line {
     color: #9A3030;
     display: block;
     white-space: pre-wrap;
     padding: 1px 0;
     border-left: 2px solid rgba(184, 84, 80, 0.4);
     padding-left: 8px;
     margin-left: -2px;
 }

 .warn-line {
     color: #8A5A10;
     display: block;
     white-space: pre-wrap;
     padding: 1px 0;
     border-left: 2px solid rgba(160, 112, 32, 0.4);
     padding-left: 8px;
     margin-left: -2px;
 }

 .info-line {
     color: #2A5A50;
     display: block;
     white-space: pre-wrap;
     padding: 1px 0;
     border-left: 2px solid rgba(61, 122, 107, 0.3);
     padding-left: 8px;
     margin-left: -2px;
 }

 .return-line {
     color: #3A6A39;
     display: block;
     white-space: pre-wrap;
     font-weight: 600;
     padding: 1px 0;
     border-left: 2px solid rgba(91, 140, 90, 0.5);
     padding-left: 8px;
     margin-left: -2px;
 }

 .timer-line {
     padding: 1px 0;
     border-left: 2px solid rgba(85, 119, 170, 0.4);
     padding-left: 8px;
     margin-left: -2px;
 }

 /* ADD CELL */
 .add-cell-row {
     display: flex;
     gap: 12px;
     margin-top: 8px;
     padding: 16px 0;
 }

 .add-cell-btn {
     flex: 1;
     background: transparent;
     border: 1px dashed var(--border2);
     border-radius: 8px;
     padding: 14px;
     color: var(--muted);
     font-family: 'Inter', sans-serif;
     font-size: 0.7rem;
     font-weight: 500;
     cursor: pointer;
     transition: all .22s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
 }

 .add-cell-btn:hover {
     border-color: var(--border3);
     color: var(--cyan);
     border-style: solid;
     background: rgba(61, 122, 107, 0.04);
     transform: translateY(-2px);
 }

 .add-cell-btn.ts:hover {
     border-color: rgba(91, 140, 90, 0.5);
     color: var(--plasma);
 }

 /* DSA PAGE */
 .dsa-page {
     width: 100%;
     padding: 28px 32px;
 }

 .dsa-ph {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     margin-bottom: 24px;
 }

 .dsa-pt {
     font-size: 1.5rem;
     font-weight: 600;
     font-family: 'Inter', sans-serif;
     color: var(--cyan);
     letter-spacing: 0.5px;
 }

 .dsa-pt span {
     color: var(--plasma);
 }

 .dsa-pm {
     font-size: 0.62rem;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
     margin-top: 4px;
 }

 .dsa-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 14px;
 }

 .dsa-card {
     background: rgba(255, 255, 255, 0.6);
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 16px;
     transition: all .22s;
     animation: cellSlideIn .22s ease;
     position: relative;
     overflow: hidden;
 }

 .dsa-card:hover {
     border-color: var(--border2);
     transform: translateY(-3px);
     box-shadow: 0 10px 30px rgba(44, 35, 24, 0.1);
 }

 .dsa-card.solved-card {
     opacity: 0.65;
 }

 .dc-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 8px;
     margin-bottom: 8px;
 }

 .dc-num {
     font-size: 0.56rem;
     font-family: 'JetBrains Mono', monospace;
     color: var(--muted);
     flex-shrink: 0;
     margin-top: 2px;
 }

 .dc-title {
     font-size: 0.86rem;
     font-weight: 500;
     flex: 1;
     line-height: 1.3;
     color: var(--text);
 }

 .dc-check {
     color: var(--plasma);
     font-size: 12px;
     flex-shrink: 0;
 }

 .dc-desc {
     font-size: 0.7rem;
     color: var(--text2);
     line-height: 1.6;
     margin-bottom: 10px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .dc-footer {
     display: flex;
     align-items: center;
     gap: 7px;
     flex-wrap: wrap;
 }

 .dc-lc {
     margin-left: auto;
     font-size: 0.56rem;
     color: var(--cyan);
     font-family: 'JetBrains Mono', monospace;
     background: rgba(61, 122, 107, 0.08);
     padding: 2px 7px;
     border-radius: 3px;
     border: 1px solid rgba(61, 122, 107, 0.15);
 }

 .dc-actions {
     display: flex;
     gap: 5px;
     margin-top: 10px;
     flex-wrap: wrap;
 }

 .empty-state {
     grid-column: 1/-1;
     text-align: center;
     padding: 64px 20px;
     color: var(--muted);
 }

 .empty-icon {
     font-size: 3rem;
     margin-bottom: 12px;
     opacity: 0.2;
 }

 .empty-state p {
     font-size: 0.8rem;
     font-family: 'JetBrains Mono', monospace;
 }

 /* TEST CASES */
 .tc-section {
     margin-top: 18px;
 }

 .tc-section-header {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 12px;
 }

 .tc-section-title {
     font-size: 0.62rem;
     font-family: 'JetBrains Mono', monospace;
     color: var(--cyan);
     text-transform: uppercase;
     letter-spacing: 2px;
 }

 .tc-summary {
     font-size: 0.6rem;
     font-family: 'JetBrains Mono', monospace;
     padding: 2px 8px;
     border-radius: 3px;
 }

 .tc-summary.all-pass {
     background: rgba(91, 140, 90, 0.12);
     color: #3A6A39;
     border: 1px solid rgba(91, 140, 90, 0.3);
 }

 .tc-summary.some-fail {
     background: rgba(184, 84, 80, 0.1);
     color: #8A3030;
     border: 1px solid rgba(184, 84, 80, 0.25);
 }

 .tc-summary.not-run {
     background: rgba(139, 120, 100, 0.07);
     color: var(--text2);
     border: 1px solid var(--border);
 }

 .tc-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .tc-item {
     background: rgba(255, 255, 255, 0.45);
     border: 1px solid var(--border);
     border-radius: 6px;
     overflow: hidden;
     transition: border-color .2s;
 }

 .tc-item.tc-pass {
     border-color: rgba(91, 140, 90, 0.3);
 }

 .tc-item.tc-fail {
     border-color: rgba(184, 84, 80, 0.3);
 }

 .tc-item-header {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
     background: rgba(245, 242, 237, 0.5);
     cursor: pointer;
 }

 .tc-status-icon {
     font-size: 13px;
     flex-shrink: 0;
 }

 .tc-name {
     flex: 1;
     font-size: 0.76rem;
     font-weight: 500;
     color: var(--text);
 }

 .tc-badge {
     font-size: 0.5rem;
     padding: 2px 7px;
     border-radius: 3px;
     font-family: 'JetBrains Mono', monospace;
     font-weight: 700;
     text-transform: uppercase;
 }

 .tc-badge.pass {
     background: rgba(91, 140, 90, 0.12);
     color: #3A6A39;
 }

 .tc-badge.fail {
     background: rgba(184, 84, 80, 0.1);
     color: #8A3030;
 }

 .tc-badge.pending {
     background: rgba(139, 120, 100, 0.07);
     color: var(--text2);
 }

 .tc-item-body {
     padding: 10px 14px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     border-top: 1px solid var(--border);
 }

 .tc-row {
     display: flex;
     gap: 8px;
 }

 .tc-field {
     flex: 1;
 }

 .tc-field-label {
     font-size: 0.5rem;
     font-family: 'JetBrains Mono', monospace;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: 1.5px;
     margin-bottom: 3px;
 }

 .tc-field-val {
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.74rem;
     background: rgba(255, 255, 255, 0.5);
     border: 1px solid var(--border);
     border-radius: 4px;
     padding: 5px 9px;
     color: var(--text);
     white-space: pre-wrap;
     word-break: break-all;
     line-height: 1.5;
 }

 .tc-field-val.actual-pass {
     border-color: rgba(91, 140, 90, 0.35);
     color: #3A6A39;
     background: rgba(91, 140, 90, 0.05);
 }

 .tc-field-val.actual-fail {
     border-color: rgba(184, 84, 80, 0.35);
     color: #8A3030;
     background: rgba(184, 84, 80, 0.04);
 }

 .tc-desc-text {
     font-size: 0.7rem;
     color: var(--text2);
     font-family: 'JetBrains Mono', monospace;
 }

 .tc-item-actions {
     display: flex;
     gap: 5px;
     margin-top: 2px;
     justify-content: flex-end;
 }

 .tc-add-row {
     margin-top: 8px;
 }

 .tc-run-all-btn {
     padding: 5px 14px;
     border-radius: 5px;
     font-family: 'Inter', sans-serif;
     font-size: 0.65rem;
     font-weight: 600;
     cursor: pointer;
     border: 1px solid rgba(91, 140, 90, 0.35);
     background: rgba(91, 140, 90, 0.07);
     color: #3A6A39;
     transition: all .2s;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .tc-run-all-btn:hover {
     background: rgba(91, 140, 90, 0.14);
     border-color: var(--plasma);
 }

 .tc-run-all-btn.running {
     animation: runPulse 1s infinite;
     cursor: not-allowed;
 }

 /* SAVE BAR */
 .save-bar {
     position: fixed;
     bottom: 20px;
     right: 20px;
     display: flex;
     align-items: center;
     gap: 8px;
     background: var(--panel);
     border: 1px solid var(--border2);
     border-radius: 8px;
     padding: 10px 16px;
     box-shadow: 0 6px 24px rgba(44, 35, 24, 0.14);
     font-size: 0.62rem;
     z-index: 50;
     transform: translateY(24px);
     opacity: 0;
     transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
     font-family: 'JetBrains Mono', monospace;
 }

 .save-bar.visible {
     transform: translateY(0);
     opacity: 1;
 }

 .save-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--amber);
     transition: all .3s;
 }

 .save-dot.saved {
     background: var(--plasma);
 }

 .toast {
     position: fixed;
     top: 70px;
     right: 20px;
     background: var(--panel);
     border: 1px solid var(--border2);
     border-radius: 8px;
     padding: 9px 16px;
     font-size: 0.7rem;
     z-index: 500;
     opacity: 0;
     transform: translateX(12px);
     transition: all .22s;
     pointer-events: none;
     font-family: 'JetBrains Mono', monospace;
     box-shadow: 0 6px 20px rgba(44, 35, 24, 0.12);
 }

 .toast.show {
     opacity: 1;
     transform: translateX(0);
 }

 .toast.success {
     border-color: rgba(91, 140, 90, 0.4);
     color: #3A6A39;
 }

 .toast.error {
     border-color: rgba(184, 84, 80, 0.4);
     color: #8A3030;
 }

 /* SHORTCUTS */
 .shortcuts-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px 20px;
     margin-top: 10px;
 }

 .sc-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 6px 0;
     border-bottom: 1px solid var(--border);
 }

 .sc-key {
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.62rem;
     color: var(--cyan);
     background: rgba(61, 122, 107, 0.08);
     padding: 2px 8px;
     border-radius: 3px;
     border: 1px solid var(--border2);
 }

 .sc-label {
     font-size: 0.64rem;
     color: var(--text2);
 }

 /* EXPORT / RUN ALL */
 .export-btn {
     padding: 5px 12px;
     background: rgba(106, 78, 154, 0.08);
     color: #5A3E8A;
     border: 1px solid rgba(106, 78, 154, 0.25);
     border-radius: 5px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.68rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .2s;
 }

 .export-btn:hover {
     background: rgba(106, 78, 154, 0.16);
 }

 .run-all-hdr-btn {
     padding: 5px 14px;
     background: rgba(91, 140, 90, 0.08);
     color: #3A6A39;
     border: 1px solid rgba(91, 140, 90, 0.3);
     border-radius: 5px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.68rem;
     font-weight: 700;
     cursor: pointer;
     transition: all .2s;
 }

 .run-all-hdr-btn:hover {
     background: rgba(91, 140, 90, 0.15);
 }

 /* SEARCH */
 .nb-search-wrap {
     position: relative;
     margin-bottom: 10px;
 }

 .nb-search-input {
     width: 100%;
     background: rgba(255, 255, 255, 0.55);
     border: 1px solid var(--border);
     border-radius: 6px;
     padding: 7px 32px 7px 12px;
     color: var(--text);
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.7rem;
     outline: none;
     transition: border-color .2s;
 }

 .nb-search-input:focus {
     border-color: var(--border2);
 }

 .nb-search-input::placeholder {
     color: var(--muted);
 }

 .nb-search-clear {
     position: absolute;
     right: 8px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: var(--muted);
     cursor: pointer;
     font-size: 0.8rem;
     display: none;
 }

 .nb-search-clear.visible {
     display: block;
 }

 .cell.search-hidden {
     display: none;
 }

 /* UNDO TOAST */
 .undo-toast {
     position: fixed;
     bottom: 70px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--card2);
     border: 1px solid var(--border2);
     border-radius: 8px;
     padding: 10px 18px;
     display: flex;
     align-items: center;
     gap: 12px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.7rem;
     color: var(--text);
     z-index: 9999;
     opacity: 0;
     pointer-events: none;
     transition: opacity .3s;
     box-shadow: 0 4px 18px rgba(44, 35, 24, 0.14);
 }

 .undo-toast.show {
     opacity: 1;
     pointer-events: all;
 }

 .undo-btn {
     background: none;
     border: 1px solid var(--cyan);
     color: var(--cyan);
     padding: 3px 10px;
     border-radius: 4px;
     cursor: pointer;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.65rem;
     transition: all .2s;
 }

 .undo-btn:hover {
     background: rgba(61, 122, 107, 0.1);
 }

 /* DELETE MODAL */
 #delete-modal .modal {
     border-color: rgba(184, 84, 80, 0.3);
     box-shadow: 0 20px 60px rgba(44, 35, 24, 0.25);
 }

 .del-modal-icon {
     width: 54px;
     height: 54px;
     border-radius: 50%;
     background: rgba(184, 84, 80, 0.08);
     border: 1px solid rgba(184, 84, 80, 0.25);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     margin: 0 auto 18px;
 }

 .del-modal-title {
     font-family: 'Inter', sans-serif;
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--error);
     text-align: center;
     letter-spacing: 0.5px;
     margin-bottom: 6px;
 }

 .del-modal-subtitle {
     font-size: 0.68rem;
     color: var(--text2);
     text-align: center;
     font-family: 'JetBrains Mono', monospace;
     margin-bottom: 20px;
 }

 .del-warning-box {
     background: rgba(184, 84, 80, 0.04);
     border: 1px solid rgba(184, 84, 80, 0.15);
     border-radius: 6px;
     padding: 14px 16px;
     margin-bottom: 16px;
     position: relative;
 }

 .del-warning-box::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 3px;
     background: linear-gradient(180deg, var(--error), var(--amber));
     border-radius: 3px 0 0 3px;
 }

 .del-warning-label {
     font-size: 0.52rem;
     font-family: 'JetBrains Mono', monospace;
     color: var(--error);
     letter-spacing: 2px;
     text-transform: uppercase;
     margin-bottom: 8px;
 }

 .del-warning-items {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .del-warning-items li {
     font-size: 0.7rem;
     color: var(--text2);
     font-family: 'JetBrains Mono', monospace;
     display: flex;
     align-items: flex-start;
     gap: 8px;
 }

 .del-warning-items li::before {
     content: '▸';
     color: var(--amber);
     flex-shrink: 0;
 }

 .del-target-name {
     background: rgba(255, 255, 255, 0.4);
     border: 1px solid rgba(184, 84, 80, 0.18);
     border-radius: 4px;
     padding: 8px 14px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.76rem;
     color: var(--cyan);
     text-align: center;
     margin-bottom: 16px;
     word-break: break-all;
 }

 .del-confirm-input-wrap {
     margin-bottom: 16px;
 }

 .del-confirm-input-wrap label {
     display: block;
     font-size: 0.57rem;
     font-family: 'JetBrains Mono', monospace;
     color: var(--text2);
     letter-spacing: 1px;
     text-transform: uppercase;
     margin-bottom: 6px;
 }

 .del-confirm-input-wrap label span {
     color: var(--error);
     font-weight: 600;
 }

 .del-confirm-input {
     width: 100%;
     background: rgba(255, 255, 255, 0.5);
     border: 1px solid rgba(184, 84, 80, 0.22);
     border-radius: 4px;
     padding: 9px 12px;
     color: var(--error);
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.8rem;
     outline: none;
     transition: all .2s;
     text-transform: uppercase;
 }

 .del-confirm-input:focus {
     border-color: rgba(184, 84, 80, 0.45);
 }

 .del-confirm-input.valid {
     border-color: var(--error);
     box-shadow: 0 0 0 2px rgba(184, 84, 80, 0.1);
 }

 .del-modal-actions {
     display: flex;
     gap: 10px;
 }

 .btn-delete-confirm {
     flex: 1;
     background: rgba(184, 84, 80, 0.08);
     color: var(--error);
     border: 1px solid rgba(184, 84, 80, 0.35);
     padding: 9px 16px;
     border-radius: 5px;
     font-family: 'Inter', sans-serif;
     font-size: 0.65rem;
     font-weight: 600;
     cursor: not-allowed;
     opacity: 0.4;
     transition: all .2s;
 }

 .btn-delete-confirm.armed {
     opacity: 1;
     cursor: pointer;
 }

 .btn-delete-confirm.armed:hover {
     background: rgba(184, 84, 80, 0.16);
 }

 .btn-cancel-delete {
     flex: 1;
     background: rgba(139, 120, 100, 0.06);
     color: var(--text2);
     border: 1px solid var(--border2);
     padding: 9px 16px;
     border-radius: 5px;
     font-family: 'Inter', sans-serif;
     font-size: 0.65rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .2s;
 }

 .btn-cancel-delete:hover {
     border-color: var(--cyan);
     color: var(--cyan);
 }

 /* QV TABS */
 .qv-tabs {
     display: flex;
     gap: 0;
     border-bottom: 1px solid var(--border);
     margin-bottom: 16px;
 }

 .qv-tab {
     padding: 8px 18px;
     font-family: 'Inter', sans-serif;
     font-size: 0.65rem;
     font-weight: 500;
     cursor: pointer;
     border: none;
     background: transparent;
     color: var(--muted);
     border-bottom: 2px solid transparent;
     transition: all .2s;
 }

 .qv-tab:hover {
     color: var(--text2);
 }

 .qv-tab.active {
     color: var(--cyan);
     border-bottom-color: var(--cyan);
 }

 .qv-panel {
     display: none;
 }

 .qv-panel.active {
     display: block;
 }

 /* FOCUS MODE */
 body.focus-mode .focus-toggle-btn {
     color: var(--cyan);
     border-color: var(--border3);
     background: rgba(61, 122, 107, 0.1);
 }

 #focus-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(245, 242, 237, 0.98);
     z-index: 800;
     backdrop-filter: blur(12px);
     flex-direction: column;
 }

 #focus-overlay.active {
     display: flex;
 }

 #focus-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px 24px;
     border-bottom: 1px solid var(--border2);
     background: rgba(237, 233, 226, 0.98);
     flex-shrink: 0;
     gap: 16px;
 }

 #focus-cell-label {
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.7rem;
     color: var(--cyan);
     letter-spacing: 1px;
 }

 #focus-nav {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .focus-nav-btn {
     padding: 5px 14px;
     background: rgba(139, 120, 100, 0.07);
     border: 1px solid var(--border2);
     border-radius: 5px;
     color: var(--text2);
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.65rem;
     cursor: pointer;
     transition: all .2s;
 }

 .focus-nav-btn:hover {
     background: rgba(61, 122, 107, 0.1);
     border-color: var(--border3);
     color: var(--cyan);
 }

 .focus-nav-btn:disabled {
     opacity: 0.25;
     cursor: not-allowed;
 }

 #focus-counter {
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.65rem;
     color: var(--muted);
     padding: 0 8px;
 }

 #focus-close-btn {
     padding: 5px 14px;
     background: rgba(184, 84, 80, 0.06);
     border: 1px solid rgba(184, 84, 80, 0.28);
     border-radius: 5px;
     color: var(--error);
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.65rem;
     cursor: pointer;
     transition: all .2s;
 }

 #focus-close-btn:hover {
     background: rgba(184, 84, 80, 0.13);
 }

 #focus-cell-wrap {
     flex: 1;
     overflow-y: auto;
     padding: 32px;
     display: flex;
     flex-direction: column;
     gap: 0;
     max-width: 1100px;
     width: 100%;
     margin: 0 auto;
 }

 #focus-footer {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 24px;
     padding: 10px 24px;
     border-top: 1px solid var(--border);
     background: rgba(237, 233, 226, 0.98);
     flex-shrink: 0;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.6rem;
     color: var(--muted);
 }

 #focus-footer span {
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .fkey {
     background: rgba(61, 122, 107, 0.08);
     border: 1px solid var(--border2);
     border-radius: 3px;
     padding: 1px 7px;
     color: var(--cyan);
     font-size: 0.58rem;
 }

 /* FOCUS sidebar */
 .app-layout {
     transition: grid-template-columns .35s cubic-bezier(0.4, 0, 0.2, 1);
 }

 body.focus-mode-sidebar .app-layout {
     grid-template-columns: 0 1fr;
 }

 body.focus-mode-sidebar .sidebar {
     width: 0;
     min-width: 0;
     overflow: hidden;
     padding: 0;
     border: none;
     opacity: 0;
 }

 /* LINK Q MODAL */
 .link-q-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 10px 14px;
     border-radius: 6px;
     border: 1px solid var(--border);
     background: rgba(255, 255, 255, 0.4);
     cursor: pointer;
     transition: all .15s;
 }

 .link-q-item:hover {
     background: rgba(61, 122, 107, 0.06);
     border-color: var(--border2);
     transform: translateX(2px);
 }

 .link-q-item-active {
     background: rgba(61, 122, 107, 0.1) !important;
     border-color: var(--border3) !important;
     box-shadow: 0 0 0 1px rgba(61, 122, 107, 0.08);
 }

 /* LINT BARS */
 .lint-error-bar {
     display: none;
     flex-wrap: wrap;
     gap: 5px;
     padding: 5px 10px 6px;
     background: rgba(255, 248, 246, 0.9);
     border-top: 1px solid rgba(184, 84, 80, 0.18);
     border-radius: 0 0 6px 6px;
 }

 .lbe {
     display: inline-flex;
     align-items: center;
     padding: 2px 8px;
     border-radius: 3px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.63rem;
     white-space: nowrap;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .lbe-error {
     color: #8A3030;
     background: rgba(184, 84, 80, 0.08);
     border: 1px solid rgba(184, 84, 80, 0.25);
 }

 .lbe-warn {
     color: #7A5010;
     background: rgba(160, 112, 32, 0.08);
     border: 1px solid rgba(160, 112, 32, 0.22);
 }

 .lbe-more {
     color: var(--muted);
     background: rgba(139, 120, 100, 0.06);
     border: 1px solid var(--border);
 }

 .CodeMirror-lint-mark-error {
     background: rgba(184, 84, 80, 0.07) !important;
     border-bottom: 2px solid rgba(184, 84, 80, 0.8) !important;
     text-decoration: none !important;
 }

 .CodeMirror-lint-mark-warning {
     border-bottom: 2px dotted rgba(160, 112, 32, 0.7) !important;
     text-decoration: none !important;
 }

 .CodeMirror-lint-marker-error {
     display: block;
     width: 14px;
     height: 14px;
     background: radial-gradient(circle, #B85450 40%, rgba(184, 84, 80, 0.3) 100%);
     border-radius: 50%;
     cursor: pointer;
     margin-top: 3px;
     background-image: none !important;
 }

 .CodeMirror-lint-marker-warning {
     display: block;
     width: 14px;
     height: 14px;
     background: radial-gradient(circle, #A07020 40%, rgba(160, 112, 32, 0.3) 100%);
     border-radius: 50%;
     cursor: pointer;
     margin-top: 3px;
     background-image: none !important;
 }

 .CodeMirror-lint-tooltip {
     background: rgba(245, 242, 237, 0.98) !important;
     border: 1px solid rgba(184, 84, 80, 0.4) !important;
     border-radius: 6px !important;
     color: #8A3030 !important;
     font-family: 'JetBrains Mono', monospace !important;
     font-size: 0.72rem !important;
     padding: 7px 14px !important;
     box-shadow: 0 4px 16px rgba(44, 35, 24, 0.15) !important;
     max-width: 460px !important;
     z-index: 9999 !important;
 }

 .CodeMirror-hints {
     background: var(--panel) !important;
     border: 1px solid var(--border2) !important;
     border-radius: 8px !important;
     box-shadow: 0 12px 40px rgba(44, 35, 24, 0.16) !important;
     padding: 4px !important;
     font-family: 'JetBrains Mono', monospace !important;
     font-size: 0.76rem !important;
     z-index: 9999 !important;
 }

 .CodeMirror-hint {
     color: var(--text) !important;
     border-radius: 4px !important;
     padding: 5px 10px !important;
 }

 .CodeMirror-hint-active {
     background: rgba(61, 122, 107, 0.12) !important;
     color: var(--cyan) !important;
 }

 ::-webkit-scrollbar {
     width: 5px;
     height: 5px;
 }

 ::-webkit-scrollbar-track {
     background: transparent;
 }

 ::-webkit-scrollbar-thumb {
     background: rgba(139, 120, 100, 0.2);
     border-radius: 3px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: rgba(139, 120, 100, 0.35);
 }

 ::selection {
     background: rgba(61, 122, 107, 0.18);
     color: var(--cyan2);
 }

 @keyframes formatFlash {
     0% {
         background: transparent;
     }

     30% {
         background: rgba(160, 112, 32, 0.05);
     }

     100% {
         background: transparent;
     }
 }

 .cell.format-flash .cell-editor-wrap {
     animation: formatFlash .7s ease;
 }

 /* IMPORTANT / REVIEW BUTTON */
 .imp-wrap {
     position: relative;
 }

 .important-btn {
     display: flex;
     align-items: center;
     gap: 4px;
     padding: 5px 10px;
     background: transparent;
     color: var(--muted);
     border: 1px solid var(--border);
     border-radius: 5px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.68rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .18s;
 }

 .important-btn:hover {
     background: rgba(184, 84, 80, 0.07);
     border-color: rgba(184, 84, 80, 0.35);
     color: #8A3030;
 }

 .important-btn.flagged-high {
     background: rgba(184, 84, 80, 0.1);
     color: #8A3030;
     border-color: rgba(184, 84, 80, 0.5);
 }

 .important-btn.flagged-medium {
     background: rgba(160, 112, 32, 0.1);
     color: #7A5010;
     border-color: rgba(160, 112, 32, 0.5);
 }

 .important-btn.flagged-low {
     background: rgba(61, 122, 107, 0.1);
     color: #2A5A50;
     border-color: rgba(61, 122, 107, 0.5);
 }

 /* cell highlight states */
 .cell.important-high {
     border-color: rgba(184, 84, 80, 0.4) !important;
     background: rgba(255, 247, 246, 0.9) !important;
 }

 .cell.important-medium {
     border-color: rgba(160, 112, 32, 0.4) !important;
     background: rgba(255, 252, 240, 0.9) !important;
 }

 .cell.important-low {
     border-color: rgba(61, 122, 107, 0.4) !important;
     background: rgba(241, 250, 247, 0.9) !important;
 }

 .cell.important-high .cell-toolbar {
     background: rgba(255, 238, 236, 0.9) !important;
 }

 .cell.important-medium .cell-toolbar {
     background: rgba(255, 249, 228, 0.9) !important;
 }

 .cell.important-low .cell-toolbar {
     background: rgba(233, 247, 242, 0.9) !important;
 }

 .cell.important-high:hover {
     box-shadow: 0 4px 20px rgba(184, 84, 80, 0.12) !important;
 }

 .cell.important-medium:hover {
     box-shadow: 0 4px 20px rgba(160, 112, 32, 0.12) !important;
 }

 .cell.important-low:hover {
     box-shadow: 0 4px 20px rgba(61, 122, 107, 0.1) !important;
 }

 /* badge inside toolbar */
 .imp-label-badge {
     font-size: 0.52rem;
     padding: 2px 7px;
     border-radius: 3px;
     font-family: 'JetBrains Mono', monospace;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     display: none;
 }

 .cell.important-high .imp-label-badge {
     display: inline;
     background: rgba(184, 84, 80, 0.12);
     color: #8A3030;
     border: 1px solid rgba(184, 84, 80, 0.28);
 }

 .cell.important-medium .imp-label-badge {
     display: inline;
     background: rgba(160, 112, 32, 0.12);
     color: #7A5010;
     border: 1px solid rgba(160, 112, 32, 0.28);
 }

 .cell.important-low .imp-label-badge {
     display: inline;
     background: rgba(61, 122, 107, 0.1);
     color: #2A5A50;
     border: 1px solid rgba(61, 122, 107, 0.25);
 }

 /* dropdown picker */
 .imp-picker {
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
     background: var(--panel);
     border: 1px solid var(--border2);
     border-radius: 8px;
     z-index: 700;
     box-shadow: 0 10px 32px rgba(44, 35, 24, 0.16);
     padding: 5px;
     min-width: 158px;
     display: none;
     flex-direction: column;
     gap: 2px;
 }

 .imp-picker.open {
     display: flex;
 }

 .imp-picker-label {
     font-size: 0.5rem;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     padding: 4px 8px 5px;
     border-bottom: 1px solid var(--border);
     margin-bottom: 2px;
 }

 .imp-option {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 7px 10px;
     border-radius: 5px;
     cursor: pointer;
     font-size: 0.72rem;
     font-weight: 500;
     transition: background .1s;
     border: none;
     background: transparent;
     width: 100%;
     text-align: left;
     font-family: 'Inter', sans-serif;
 }

 .imp-dot {
     width: 9px;
     height: 9px;
     border-radius: 50%;
     flex-shrink: 0;
 }

 .imp-option.io-high {
     color: #8A3030;
 }

 .imp-option.io-high:hover {
     background: rgba(184, 84, 80, 0.07);
 }

 .io-high .imp-dot {
     background: #B85450;
 }

 .imp-option.io-medium {
     color: #7A5010;
 }

 .imp-option.io-medium:hover {
     background: rgba(160, 112, 32, 0.07);
 }

 .io-medium .imp-dot {
     background: #A07020;
 }

 .imp-option.io-low {
     color: #2A5A50;
 }

 .imp-option.io-low:hover {
     background: rgba(61, 122, 107, 0.07);
 }

 .io-low .imp-dot {
     background: #3D7A6B;
 }

 .imp-option.io-none {
     color: var(--muted);
 }

 .imp-option.io-none:hover {
     background: rgba(139, 120, 100, 0.06);
 }

 .io-none .imp-dot {
     background: var(--muted);
 }

 .imp-option.io-active::after {
     content: '✓';
     margin-left: auto;
     font-size: 0.65rem;
     opacity: 0.7;
 }

 /* review filter pill in notebook header */
 .review-filter-btn {
     padding: 4px 11px;
     background: transparent;
     color: var(--muted);
     border: 1px dashed var(--border2);
     border-radius: 5px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.62rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .18s;
 }

 .review-filter-btn:hover {
     border-color: rgba(184, 84, 80, 0.4);
     color: #8A3030;
     border-style: solid;
 }

 .review-filter-btn.active {
     background: rgba(184, 84, 80, 0.1);
     color: #8A3030;
     border-color: rgba(184, 84, 80, 0.45);
     border-style: solid;
 }

 .modal-wide {
     width: 900px;
     max-width: 100vw;
     box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .modal-overlay.open .modal-wide.editor-expanded {
     width: 96vw;
     max-width: 1200px;
 }

 /* ── QV EDITOR PANEL ── */
 #qv-panel-editor {
     display: none;
     flex-direction: column;
     gap: 0;
     background: linear-gradient(180deg, #0f0f0f, #1a1a1a);
     border-radius: 12px;
     overflow: hidden;
 }

 #qv-panel-editor.active {
     display: flex;
     animation: fadeInUp 0.3s ease forwards;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(12px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .qv-editor-topbar {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 16px 14px;
     border-bottom: 1px solid var(--border);
     background: rgba(255, 255, 255, 0.03);
     flex-wrap: wrap;
     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
 }

 .qv-editor-cell-selector {
     display: flex;
     align-items: center;
     gap: 8px;
     flex: 1;
     min-width: 0;
 }

 .qv-editor-cell-label {
     font-size: 0.6rem;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     white-space: nowrap;
     font-weight: 500;
 }

 .qv-cell-select {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid var(--border2);
     border-radius: 8px;
     color: var(--text);
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.75rem;
     padding: 6px 14px;
     cursor: pointer;
     flex: 1;
     min-width: 0;
     max-width: 280px;
     transition: all 0.2s ease;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }

 .qv-cell-select:hover {
     background: rgba(255, 255, 255, 0.12);
     border-color: var(--cyan);
     transform: translateY(-1px);
 }

 .qv-cell-select:focus {
     outline: none;
     border-color: var(--cyan);
     box-shadow: 0 0 0 3px rgba(0, 180, 220, 0.3);
 }

 /* ── EDITOR ACTIONS ── */
 .qv-editor-actions {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-shrink: 0;
 }

 /* Run button – much more attractive */
 .qv-run-btn {
     background: linear-gradient(135deg, var(--plasma), #22c55e);
     color: #fff;
     border: none;
     border-radius: 8px;
     padding: 7px 18px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.78rem;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 4px 12px -2px rgb(34 197 94 / 0.4);
 }

 .qv-run-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px -4px rgb(34 197 94 / 0.5);
     opacity: 1;
 }

 .qv-run-btn.running {
     opacity: 0.7;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
 }

 /* Sync button */
 .qv-sync-btn {
     background: rgba(0, 180, 220, 0.15);
     color: var(--cyan);
     border: 1px solid rgba(0, 180, 220, 0.35);
     border-radius: 8px;
     padding: 6px 14px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.7rem;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
 }

 .qv-sync-btn:hover {
     background: rgba(0, 180, 220, 0.25);
     transform: translateY(-1px);
 }

 .qv-sync-btn.synced {
     color: var(--plasma);
     border-color: rgba(80, 200, 80, 0.5);
     background: rgba(80, 200, 80, 0.12);
 }

 /* Format button */
 .qv-fmt-btn {
     background: rgba(255, 255, 255, 0.07);
     color: var(--muted);
     border: 1px solid var(--border2);
     border-radius: 8px;
     padding: 6px 12px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.7rem;
     cursor: pointer;
     transition: all 0.2s ease;
 }

 .qv-fmt-btn:hover {
     color: var(--text);
     background: rgba(255, 255, 255, 0.12);
     transform: translateY(-1px);
 }

 /* No cell message – more friendly */
 .qv-no-cell-msg {
     padding: 60px 24px;
     text-align: center;
     color: var(--muted);
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.8rem;
     line-height: 1.7;
     background: rgba(255, 255, 255, 0.03);
     border-radius: 10px;
     margin: 16px;
 }

 .qv-no-cell-msg strong {
     color: var(--cyan);
 }

 /* ── CODEMIRROR EDITOR ── */
 .qv-editor-cm-wrap {
     border: 1px solid var(--border2);
     border-radius: 10px;
     overflow: hidden;
     margin: 0 16px 16px;
     flex-shrink: 0;
     box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15),
         0 4px 6px -2px rgb(0 0 0 / 0.1);
     transition: all 0.3s ease;
 }

 .qv-editor-cm-wrap:hover {
     box-shadow: 0 15px 30px -8px rgb(0 0 0 / 0.2);
 }

 .qv-editor-cm-wrap .CodeMirror {
     height: 380px !important;
     font-size: 14px !important;
     font-family: 'JetBrains Mono', monospace !important;
     background: #ffffff !important;
     /* ← WHITE BACKGROUND as requested */
     color: #1f2937 !important;
     /* dark text for perfect readability on white */
     border-radius: 8px;
 }

 .qv-editor-cm-wrap .CodeMirror-scroll {
     min-height: 380px;
     padding: 12px 0;
 }

 /* Sync status pill – more premium */
 .qv-sync-status {
     font-size: 0.56rem;
     font-family: 'JetBrains Mono', monospace;
     padding: 3px 10px;
     border-radius: 9999px;
     background: rgba(80, 200, 80, 0.12);
     color: var(--plasma);
     border: 1px solid rgba(80, 200, 80, 0.3);
     font-weight: 600;
     transition: all 0.3s ease;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }

 .qv-sync-status.dirty {
     color: var(--amber);
     background: rgba(245, 158, 11, 0.12);
     border-color: rgba(245, 158, 11, 0.3);
 }

 /* ── OUTPUT AREA ── */
 .qv-editor-output {
     margin: 0 16px 16px;
     border: 1px solid var(--border2);
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 4px 15px -3px rgb(0 0 0 / 0.1);
     display: none;
 }

 .qv-editor-output.visible {
     display: block;
 }

 .qv-editor-out-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 8px 16px;
     background: rgba(255, 255, 255, 0.06);
     border-bottom: 1px solid var(--border);
     font-size: 0.6rem;
     font-family: 'JetBrains Mono', monospace;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .qv-editor-out-clear {
     background: none;
     border: none;
     color: var(--muted);
     cursor: pointer;
     font-size: 0.7rem;
     padding: 2px 8px;
     border-radius: 4px;
     transition: all 0.2s;
 }

 .qv-editor-out-clear:hover {
     color: var(--text);
     background: rgba(255, 255, 255, 0.1);
 }

 .qv-editor-out-content {
     padding: 14px 18px;
     max-height: 220px;
     overflow-y: auto;
     background: #f8fafc;
     /* light, clean background to match white editor */
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.78rem;
     line-height: 1.5;
     color: #1f2937;
 }

 .qv-editor-out-content .log-line {
     color: #1f2937;
 }

 .qv-editor-out-content .error-line {
     color: #ef4444;
 }

 .qv-editor-out-content .warn-line {
     color: #f59e0b;
 }

 .qv-editor-out-content .info-line {
     color: #06b67f;
 }

 .qv-editor-out-content .return-line {
     color: var(--plasma);
     font-weight: 700;
 }

 /* Tab label */
 .qv-tab-new {
     display: inline-block;
     background: linear-gradient(90deg, var(--cyan), #22d3ee);
     color: #000;
     font-size: 0.44rem;
     font-family: 'JetBrains Mono', monospace;
     padding: 1px 6px;
     border-radius: 4px;
     margin-left: 6px;
     vertical-align: middle;
     font-weight: 700;
     letter-spacing: 0.5px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
 }

 /* Make modal taller & smoother when editor is open */
 .modal-wide.editor-tab-open {
     max-height: 94vh;
 }

 .modal-wide.editor-tab-open .qv-panel {
     overflow-y: auto;
 }

 #qv-panel-editor {
     overflow-y: auto;
     max-height: calc(94vh - 170px);
 }