/* Instant fallback fonts while Google Fonts loads */
  :root {
    --font-display: 'Bebas Neue', 'Arial Black', 'Impact', sans-serif;
    --font-body: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'DM Mono', 'Courier New', monospace;
  }

  /* ── TAGS ── */
  .q-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
  .q-tag { display:inline-flex; align-items:center; gap:4px; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; padding:3px 9px; border-radius:20px; background:color-mix(in srgb,var(--accent) 12%,var(--surface2)); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); color:var(--accent); text-transform:uppercase; white-space:nowrap; }
  .q-tag.q-tag-default { background:color-mix(in srgb,var(--muted) 10%,var(--surface2)); border-color:var(--border); color:var(--muted); }
  .q-tag.q-tag-custom { background:color-mix(in srgb,#e879f9 12%,var(--surface2)); border-color:color-mix(in srgb,#e879f9 35%,var(--border)); color:#e879f9; }
  .q-tag-remove { background:none; border:none; cursor:pointer; color:inherit; opacity:0.6; font-size:12px; padding:0; line-height:1; }
  .q-tag-remove:hover { opacity:1; }
  .tags-input-wrap { display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:8px 10px; min-height:44px; cursor:text; transition:border-color .2s; }
  .tags-input-wrap:focus-within { border-color:var(--accent); }
  .tags-input-field { background:none; border:none; outline:none; color:var(--text,#f0f0f0); font-family:'DM Sans',sans-serif; font-size:13px; flex:1; min-width:100px; padding:1px 2px; }
  .tags-input-field::placeholder { color:var(--muted); }
  .tag-search-wrap { position:relative; margin-bottom:12px; }
  .tag-search-wrap input { width:100%; box-sizing:border-box; }
  .tag-search-clear { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; padding:0; line-height:1; }
  .tag-search-clear:hover { color:var(--text,#f0f0f0); }
  .saved-item-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }

  /* ── TAG SEARCH SCREEN ── */
  .tag-search-screen-header { display:flex; align-items:center; gap:12px; padding:16px 20px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
  .tag-search-screen-body { flex:1; overflow-y:auto; padding:20px 20px 40px; max-width:720px; width:100%; margin:0 auto; box-sizing:border-box; }
  .ts-search-wrap { position:relative; display:flex; align-items:center; background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:0 14px; margin-bottom:22px; transition:border-color .2s; }
  .ts-search-wrap:focus-within { border-color:#e879f9; }
  .ts-search-icon { font-size:16px; margin-right:8px; flex-shrink:0; }
  .ts-search-input { flex:1; background:none; border:none; outline:none; color:var(--text,#f0f0f0); font-family:'DM Sans',sans-serif; font-size:16px; padding:14px 0; }
  .ts-search-input::placeholder { color:var(--muted); }
  .ts-search-clear { background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px; padding:0; line-height:1; flex-shrink:0; }
  .ts-search-clear:hover { color:var(--text,#f0f0f0); }
  .ts-section-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
  .ts-tag-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
  .ts-tag-pill { display:inline-flex; align-items:center; gap:5px; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.8px; padding:6px 13px; border-radius:22px; cursor:pointer; border:1px solid var(--border); background:var(--surface2); color:var(--muted); transition:all .18s; user-select:none; }
  .ts-tag-pill:hover { border-color:#e879f9; color:#e879f9; background:color-mix(in srgb,#e879f9 10%,var(--surface2)); }
  .ts-tag-pill.active { border-color:#e879f9; color:#e879f9; background:color-mix(in srgb,#e879f9 15%,var(--surface2)); }
  .ts-tag-pill.ts-tag-default { border-color:var(--border); color:var(--muted); }
  .ts-tag-pill.ts-tag-default:hover, .ts-tag-pill.ts-tag-default.active { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface2)); }
  .ts-tag-count { font-size:10px; opacity:.6; }
  .ts-result-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .ts-result-info { flex:1; min-width:0; }
  .ts-result-path { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--muted); margin-bottom:3px; text-transform:uppercase; }
  .ts-result-count { font-size:15px; font-weight:700; color:var(--text,#f0f0f0); }
  .ts-result-count span { font-weight:400; font-size:13px; color:var(--muted); }
  .ts-result-start { background:var(--accent); color:var(--bg); border:none; border-radius:8px; padding:9px 16px; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1px; cursor:pointer; white-space:nowrap; transition:opacity .15s; flex-shrink:0; }
  .ts-result-start:hover { opacity:.85; }
  .ts-empty { text-align:center; font-family:'DM Mono',monospace; font-size:12px; letter-spacing:1.5px; color:var(--muted); padding:48px 20px; line-height:2.2; }

  /* ── HOME TABS ── */
  .home-tabs { display:flex; gap:8px; justify-content:center; margin:12px 0 0; flex-wrap:wrap; }
  .home-tab { background:var(--surface); border:1px solid var(--border); color:var(--muted); border-radius:30px; padding:8px 22px; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1.5px; cursor:pointer; transition:all .2s; text-transform:uppercase; }
  .home-tab.active { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
  .home-tab-panel { display:none; width:100%; max-width:960px; animation:fadeUp .3s ease both; }
  .home-tab-panel.active { display:block; }
  .special-exams-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:20px; }
  .special-exam-card { background:var(--surface); border:2px solid var(--border); border-radius:14px; padding:22px 20px; cursor:pointer; transition:all .25s; position:relative; overflow:hidden; text-align:left; }
  .special-exam-card:hover:not(.se-locked) { transform:translateY(-3px); border-color:var(--se-color,var(--accent)); background:var(--surface2); }
  .special-exam-card::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; background:var(--se-color,var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
  .special-exam-card:hover:not(.se-locked)::before { transform:scaleX(1); }
  .special-exam-card.se-locked { opacity:.5; cursor:not-allowed; }
  .se-badge { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--se-color,var(--accent)); margin-bottom:8px; text-transform:uppercase; }
  .se-name { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:2px; margin-bottom:6px; }
  .se-desc { font-size:13px; color:var(--muted); line-height:1.5; }
  .se-meta-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
  .se-chip { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; background:var(--surface2); border:1px solid var(--border); border-radius:20px; padding:3px 10px; color:var(--muted); }
  .se-lock-badge { position:absolute; top:14px; right:14px; font-size:18px; }
  .special-exam-empty { text-align:center; padding:48px 20px; color:var(--muted); font-family:'DM Mono',monospace; font-size:12px; letter-spacing:1.5px; line-height:2.2; }
  .se-mgr-list { display:flex; flex-direction:column; gap:10px; }
  .se-mgr-item { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .se-mgr-info { flex:1; min-width:180px; }
  .se-mgr-name { font-weight:600; font-size:14px; margin-bottom:3px; }
  .se-mgr-meta { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--muted); }
  .se-mgr-actions { display:flex; gap:6px; flex-shrink:0; }
  .btn-se { padding:6px 12px; border-radius:8px; font-size:11px; border:1px solid; cursor:pointer; font-family:'DM Mono',monospace; letter-spacing:1px; transition:all .2s; background:transparent; }
  .btn-se-lock { border-color:var(--muted); color:var(--muted); }
  .btn-se-lock.is-locked { border-color:#f04060; color:#f04060; background:color-mix(in srgb,#f04060 10%,transparent); }
  .btn-se-edit { border-color:var(--accent); color:var(--accent); }
  .btn-se-del  { border-color:var(--danger); color:var(--danger); }
  .se-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:2000; display:none; align-items:center; justify-content:center; padding:16px; }
  .se-modal-overlay.open { display:flex; }
  .se-modal { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px 24px; width:100%; max-width:580px; max-height:90vh; overflow-y:auto; position:relative; animation:fadeUp .25s ease both; }
  .se-modal-title { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:2px; color:var(--accent); margin-bottom:18px; }
  .se-form-row { display:flex; gap:12px; flex-wrap:wrap; }
  .se-form-row .form-group { flex:1; min-width:160px; }
  .se-q-picker-wrap { border:1px solid var(--border); border-radius:8px; background:var(--bg); max-height:180px; overflow-y:auto; }
  .se-q-pick-row { display:flex; align-items:center; gap:10px; padding:9px 12px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--border); transition:background .15s; }
  .se-q-pick-row:last-child { border-bottom:none; }
  .se-q-pick-row:hover { background:var(--surface2); }
  .se-q-pick-row.picked { background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
  .se-q-pick-cb { width:15px; height:15px; flex-shrink:0; accent-color:var(--accent); cursor:pointer; }
  .se-q-pick-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; }
  .se-selected-list { display:flex; flex-direction:column; gap:5px; max-height:160px; overflow-y:auto; margin-top:6px; }
  .se-selected-row { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--surface2); border-radius:7px; font-size:12px; }
  .se-selected-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
  .se-selected-rm { background:none; border:none; color:var(--danger); cursor:pointer; font-size:14px; flex-shrink:0; padding:0; }
  #seTimerBar { display:none; background:var(--surface); border-bottom:1px solid var(--border); padding:8px 16px; font-family:'DM Mono',monospace; font-size:12px; letter-spacing:1px; }
  #seTimerBar.visible { display:flex; align-items:center; gap:10px; }
  .se-timer-val { font-size:15px; font-weight:700; min-width:65px; color:var(--accent2); }
  .se-timer-val.danger { color:#f04060; animation:pulse .7s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

  /* ══ NOTES ══════════════════════════════════════════════════ */
  /* Sidebar */
  .notes-screen { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
  .notes-layout  { display:flex; flex:1; overflow:hidden; }
  .notes-sidebar { width:260px; min-width:200px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
  .notes-sidebar-header { padding:14px 14px 10px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
  .notes-sidebar-title { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; color:#e879f9; }
  .btn-new-topic { background:none; border:1px solid #e879f9; color:#e879f9; border-radius:8px; padding:4px 10px; font-size:11px; font-family:'DM Mono',monospace; letter-spacing:1px; cursor:pointer; transition:all .2s; }
  .btn-new-topic:hover { background:color-mix(in srgb,#e879f9 12%,transparent); }
  .notes-topic-list { flex:1; overflow-y:auto; padding:8px 0; }
  .notes-topic-item { cursor:pointer; }
  .notes-topic-header { display:flex; align-items:center; gap:6px; padding:9px 14px; font-size:13px; font-weight:600; transition:background .15s; position:relative; }
  .notes-topic-header:hover { background:var(--surface2); }
  .notes-topic-header.active { background:color-mix(in srgb,#e879f9 10%,var(--surface)); color:#e879f9; }
  .notes-topic-arrow { font-size:10px; color:var(--muted); transition:transform .2s; flex-shrink:0; }
  .notes-topic-item.open > .notes-topic-header .notes-topic-arrow { transform:rotate(90deg); }
  .notes-topic-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .notes-topic-actions { display:none; gap:4px; position:absolute; right:8px; }
  .notes-topic-header:hover .notes-topic-actions { display:flex; }
  .notes-topic-act { background:none; border:none; cursor:pointer; color:var(--muted); font-size:12px; padding:2px 4px; border-radius:4px; line-height:1; }
  .notes-topic-act:hover { color:var(--text); background:var(--surface2); }
  .notes-drag-handle { color:var(--muted); font-size:13px; cursor:grab; opacity:0; transition:opacity .15s; flex-shrink:0; user-select:none; padding:0 4px; line-height:1; }
  .notes-topic-header:hover .notes-drag-handle,
  .notes-subtopic-item:hover .notes-drag-handle { opacity:1; }
  .notes-drag-over-top { border-top:2px solid #e879f9 !important; }
  .notes-drag-over-bot { border-bottom:2px solid #e879f9 !important; }
  .notes-subtopic-list { padding:0 0 4px 0; display:none; }
  .notes-topic-item.open > .notes-subtopic-list { display:block; }
  .notes-subtopic-item { display:flex; align-items:center; gap:6px; padding:7px 14px 7px 30px; font-size:13px; cursor:pointer; transition:background .15s; color:var(--muted); position:relative; }
  .notes-subtopic-item:hover { background:var(--surface2); color:var(--text); }
  .notes-subtopic-item.active { background:color-mix(in srgb,#e879f9 8%,var(--surface)); color:#e879f9; }
  .notes-subtopic-actions { display:none; gap:4px; position:absolute; right:8px; }
  .notes-subtopic-item:hover .notes-subtopic-actions { display:flex; }
  .btn-add-subtopic { width:100%; background:none; border:none; color:var(--muted); font-size:12px; padding:6px 14px 6px 30px; cursor:pointer; text-align:left; font-family:'DM Mono',monospace; letter-spacing:1px; transition:color .15s; }
  .btn-add-subtopic:hover { color:#e879f9; }

  /* Editor + Preview pane */
  .notes-main { flex:1; display:flex; overflow:hidden; }
  .notes-editor-pane { flex:1; display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--border); }
  .notes-preview-pane { width:46%; min-width:320px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; }
  .notes-editor-pane[style*="display: none"] ~ .notes-preview-pane, .notes-editor-pane[style*="display:none"] ~ .notes-preview-pane { width:100%; min-width:0; }
  .notes-pane-header { padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--border); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--muted); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
  .notes-pane-title { color:var(--text); font-size:12px; font-weight:600; letter-spacing:0; }
  .notes-empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1.5px; gap:10px; padding:40px; text-align:center; }

  /* Block editor */
  .notes-blocks { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:6px; }
  .note-block { display:flex; gap:8px; align-items:flex-start; position:relative; }
  .note-block-drag { color:var(--muted); font-size:14px; padding-top:8px; cursor:grab; opacity:0; transition:opacity .15s; flex-shrink:0; user-select:none; }
  .note-block:hover .note-block-drag { opacity:1; }
  .note-block-inner { flex:1; min-width:0; }
  .note-block-menu { opacity:0; transition:opacity .15s; flex-shrink:0; padding-top:4px; }
  .note-block:hover .note-block-menu { opacity:1; }
  .note-block-type { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1.5px; color:var(--muted); background:var(--surface2); border:1px solid var(--border); border-radius:4px; padding:2px 6px; cursor:pointer; }
  .note-block-del { background:none; border:1px solid var(--border); color:var(--muted); border-radius:4px; padding:2px 6px; font-size:12px; cursor:pointer; margin-left:4px; }
  .note-block-del:hover { border-color:var(--danger); color:var(--danger); }

  /* Block textareas */
  .nb-text { width:100%; background:transparent; border:1px dashed transparent; border-radius:8px; padding:8px 10px; font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.7; color:var(--text); resize:none; outline:none; overflow:hidden; min-height:36px; box-sizing:border-box; transition:border-color .15s; }
  .nb-text:focus { border-color:var(--border); background:var(--surface2); }
  .nb-h1 { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:2px; color:#e879f9; }
  .nb-h2 { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:1.5px; color:var(--accent); }
  .nb-h3 { font-weight:700; font-size:15px; color:var(--accent2); }
  .nb-latex { font-family:'DM Mono',monospace; font-size:13px; color:var(--accent2); background:var(--surface2); border-color:var(--border); }
  .nb-img-block { border:2px dashed var(--border); border-radius:10px; padding:14px; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; transition:border-color .2s; }
  .nb-img-block:hover { border-color:#e879f9; }
  .nb-img-block img { max-width:100%; max-height:240px; border-radius:8px; object-fit:contain; display:block; }
  .nb-img-placeholder { color:var(--muted); font-size:13px; font-family:'DM Mono',monospace; letter-spacing:1px; }
  .nb-img-input { display:none; }

  /* Preview */
  .notes-preview-body { flex:1; overflow-y:auto; padding:28px 40px; max-width:860px; margin:0 auto; width:100%; box-sizing:border-box; }
  .np-h1 { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:2px; color:#e879f9; margin:18px 0 8px; }
  .np-h2 { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:1.5px; color:var(--accent); margin:16px 0 6px; border-bottom:1px solid var(--border); padding-bottom:4px; }
  .np-h3 { font-weight:700; font-size:15px; color:var(--accent2); margin:14px 0 4px; }
  .np-text { font-size:14px; line-height:1.8; color:var(--text); margin:4px 0 8px; }
  .np-latex { text-align:center; margin:12px 0; padding:10px; background:var(--surface2); border-radius:8px; overflow-x:auto; }
  .np-img { display:block; max-width:100%; max-height:360px; border-radius:10px; border:1px solid var(--border); object-fit:contain; margin:10px auto; }
  .np-divider { border:none; border-top:1px solid var(--border); margin:16px 0; }
  .np-bullet { padding-left:16px; }
  .np-bullet::before { content:'• '; color:#e879f9; }

  /* Toolbar */
  .notes-toolbar { padding:8px 16px; border-top:1px solid var(--border); background:var(--surface); display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0; }
  .notes-toolbar button { background:var(--surface2); border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:5px 10px; font-size:12px; cursor:pointer; font-family:'DM Mono',monospace; letter-spacing:1px; transition:all .15s; }
  .notes-toolbar button:hover { border-color:#e879f9; color:#e879f9; }
  .notes-save-btn { margin-left:auto; background:color-mix(in srgb,#e879f9 15%,var(--surface2)) !important; border-color:#e879f9 !important; color:#e879f9 !important; }

  @media(max-width:900px){
    .notes-preview-pane { width:100%; min-width:0; }
    .notes-editor-pane { display:none !important; }
  }
  @media(max-width:650px){
    .notes-sidebar {
      position:fixed; left:0; top:0; bottom:0; z-index:500;
      transform:translateX(-100%); transition:transform .25s ease;
      width:80vw; max-width:280px; box-shadow:4px 0 24px rgba(0,0,0,.5);
    }
    .notes-sidebar.mobile-open { transform:translateX(0); }
    .notes-preview-pane { width:100%; min-width:0; }
    .notes-editor-pane { display:none !important; }
    .notes-pane-header { padding:10px 12px; }
  }
  .notes-mobile-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:499; }
  .notes-mobile-toggle { display:none; align-items:center; gap:8px; background:none; border:1px solid var(--border); color:var(--muted); border-radius:8px; padding:5px 12px; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1px; cursor:pointer; }
  .notes-mobile-toggle:hover { border-color:#e879f9; color:#e879f9; }
  @media(max-width:650px){ .notes-mobile-toggle { display:flex; } }
  /* ── Import error rich display ── */
  .import-errors-list { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; }
  .import-error-item { background:color-mix(in srgb,#f04060 8%,var(--surface2)); border:1px solid color-mix(in srgb,#f04060 25%,var(--border)); border-radius:8px; padding:8px 12px; font-size:12px; }
  .ierr-loc { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1.5px; color:#f04060; background:color-mix(in srgb,#f04060 15%,transparent); border-radius:4px; padding:2px 7px; flex-shrink:0; }
  .ierr-preview { color:var(--text); font-style:italic; font-size:12px; opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:340px; }
  .ierr-reasons { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
  .ierr-reason { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.5px; color:#f04060; background:color-mix(in srgb,#f04060 10%,transparent); border-radius:4px; padding:2px 7px; }


  /* ── Sample Problem Box ── */
  .nb-box-block { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface2); }
  .nb-box-label { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); padding:6px 10px 0; }
  .nb-box-ta { width:100%; background:transparent; border:none; border-top:1px dashed var(--border); padding:8px 10px; font-family:'DM Sans',sans-serif; font-size:13px; line-height:1.6; color:var(--text); resize:none; outline:none; overflow:hidden; min-height:60px; box-sizing:border-box; }
  .nb-box-ta:focus { background:color-mix(in srgb,#e879f9 4%,transparent); }

  /* Preview box */
  .np-box { border-radius:12px; overflow:hidden; margin:14px 0; border:1px solid #c4b5fd44; }
  .np-box-problem { background:#f3f0ff; padding:14px 18px; }
  .np-box-problem-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; color:#7c3aed; text-transform:uppercase; margin-bottom:6px; font-weight:700; }
  .np-box-problem-text { font-size:14px; line-height:1.8; color:#1e1b2e; white-space:pre-wrap; }
  .np-box-solution { background:#edfaf3; padding:14px 18px; border-top:1px solid #6ee7b744; }
  .np-box-solution-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; color:#059669; text-transform:uppercase; margin-bottom:6px; font-weight:700; }
  .np-box-solution-text { font-size:14px; line-height:1.8; color:#1e2e27; white-space:pre-wrap; }
  .nb-box-img-area { padding:6px 10px 8px; border-top:1px dashed var(--border); }
  .nb-box-img-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
  .nb-box-img-thumb { position:relative; display:inline-block; }
  .nb-box-img-thumb img { height:80px; width:auto; max-width:140px; border-radius:6px; border:1px solid var(--border); object-fit:cover; display:block; }
  .nb-box-img-thumb-remove { position:absolute; top:-6px; right:-6px; background:#f04060; border:none; color:#fff; border-radius:50%; width:18px; height:18px; font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; padding:0; }
  .nb-box-img-btn { background:var(--surface); border:1px dashed var(--border); color:var(--muted); border-radius:6px; padding:4px 10px; font-size:11px; font-family:'DM Mono',monospace; letter-spacing:1px; cursor:pointer; transition:all .15s; }
  .nb-box-img-btn:hover { border-color:#e879f9; color:#e879f9; }
  .np-box-imgs { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .np-box-img { max-height:260px; width:auto; max-width:100%; border-radius:8px; object-fit:contain; cursor:pointer; }


  /* ── SITUATIONAL PROBLEM ── */
  .situation-banner {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
    animation: fadeUp .35s ease both;
  }
  .situation-banner-label {
    font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 2.5px;
    color: var(--accent); text-transform: uppercase; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
  }
  .situation-banner-label::after { content:''; flex:1; height:1px; background:color-mix(in srgb,var(--accent) 25%,transparent); }
  .situation-banner-text { font-size: 14px; line-height: 1.65; color: var(--text); }
  .situation-banner-fig { margin-top:10px; border-radius:8px; overflow:hidden; border:1px solid var(--border); }
  .situation-banner-fig img { width:100%; display:block; max-height:200px; object-fit:contain; }
  .situation-sub-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--accent); margin-bottom:6px; text-transform:uppercase; }
  .review-situation-header {
    font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--accent);
    padding:10px 14px 6px; background:color-mix(in srgb,var(--accent) 6%,var(--surface));
    border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
    border-radius:10px 10px 0 0; margin-top:16px; text-transform:uppercase;
  }
  .review-situation-header + .review-item { border-radius:0 0 10px 10px; margin-top:0; }
  .sit-mode-toggle {
    display:flex; background:var(--surface2); border:1px solid var(--border);
    border-radius:10px; padding:3px; gap:3px; margin-bottom:20px;
  }
  .sit-mode-btn {
    flex:1; padding:10px; border:none; border-radius:8px; background:transparent;
    color:var(--muted); font-family:'DM Mono',monospace; font-size:11px;
    letter-spacing:1px; cursor:pointer; transition:all .2s; text-transform:uppercase;
  }
  .sit-mode-btn.active { background:var(--accent); color:var(--bg); font-weight:600; }
  .sit-panel { display:none; }
  .sit-panel.active { display:block; }
  .sit-subq-list { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
  .sit-subq-item {
    background:var(--surface2); border:1px solid var(--border); border-radius:10px;
    padding:12px 14px; display:flex; gap:10px; align-items:flex-start;
  }
  .sit-subq-num { font-family:'DM Mono',monospace; font-size:11px; color:var(--accent); min-width:22px; padding-top:2px; }
  .sit-subq-body { flex:1; min-width:0; }
  .sit-subq-q { font-size:13px; color:var(--text); margin-bottom:4px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
  .sit-subq-ans { font-size:11px; color:var(--accent2); font-family:'DM Mono',monospace; }
  .sit-subq-del { background:none; border:1px solid var(--border); border-radius:6px; color:var(--danger); padding:4px 8px; cursor:pointer; font-size:13px; transition:all .15s; }
  .sit-subq-del:hover { background:color-mix(in srgb,var(--danger) 10%,transparent); border-color:var(--danger); }
  .sit-subq-edit { background:none; border:1px solid var(--border); border-radius:6px; color:var(--accent); padding:4px 8px; cursor:pointer; font-size:13px; transition:all .15s; }
  .sit-subq-edit:hover { background:color-mix(in srgb,var(--accent) 10%,transparent); border-color:var(--accent); }
  .sit-subq-actions { display:flex; gap:6px; flex-direction:column; }
  .sit-add-subq-btn {
    width:100%; padding:12px; border:1.5px dashed var(--border); border-radius:10px;
    background:transparent; color:var(--accent); font-family:'DM Mono',monospace;
    font-size:11px; letter-spacing:1px; cursor:pointer; transition:all .2s; margin-bottom:16px;
  }
  .sit-add-subq-btn:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,transparent); }
  .sit-add-subq-btn:disabled { opacity:.35; cursor:not-allowed; }
  .sit-subq-form { background:var(--surface); border:1.5px solid var(--accent); border-radius:12px; padding:16px; margin-bottom:14px; display:none; }
  .sit-subq-form.open { display:block; animation:fadeUp .3s ease both; }
  .saved-item-situation {
    background:color-mix(in srgb,var(--accent) 5%,var(--surface2));
    border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border));
    border-radius:12px; padding:12px 14px; margin-bottom:8px; margin-left:8px;
  }
  .saved-item-situation-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; }
  .saved-item-situation-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--accent); text-transform:uppercase; }
  .saved-item-situation-text { font-size:12px; color:var(--muted); margin-bottom:8px; line-height:1.5; }
  .saved-item-situation-subqs { display:flex; flex-direction:column; gap:4px; border-left:2px solid color-mix(in srgb,var(--accent) 30%,transparent); padding-left:10px; margin-top:6px; }
  .saved-item-situation-subq { font-size:12px; color:var(--text); padding:4px 0; }

  /* RANDOM PROBLEM CARD */
  :root { --random-accent: #a855f7; }
  .random-card { --card-color: #a855f7; position:relative; overflow:hidden; }
  .random-card::before { background:linear-gradient(135deg,#e879f9,#a855f7,#6366f1) !important; }
  .random-card:hover { border-color:#a855f7 !important; }
  .random-card-glow { position:absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(168,85,247,.25),transparent 70%); pointer-events:none; }

  /* RANDOM SETUP SCREEN */
  #randomSetup { flex-direction:column; min-height:100vh; }
  .rand-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:10; }
  .rand-title { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:3px; background:linear-gradient(135deg,#e879f9,#a855f7,#6366f1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
  .rand-body { flex:1; display:flex; flex-direction:column; gap:0; padding:24px 20px 40px; max-width:640px; width:100%; margin:0 auto; }
  .rand-section { margin-bottom:28px; }
  .rand-section-label { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; color:var(--text); margin-bottom:4px; }
  .rand-section-sub { font-size:12px; color:var(--muted); margin-bottom:14px; font-family:'DM Mono',monospace; letter-spacing:.5px; }

  .rand-toggle-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .rand-toggle {
    display:flex; align-items:center; gap:10px;
    background:var(--surface2); border:1.5px solid var(--border);
    border-radius:12px; padding:14px 16px; cursor:pointer;
    font-family:'DM Mono',monospace; font-size:12px; letter-spacing:1px;
    color:var(--muted); text-align:left; transition:all .2s;
  }
  .rand-toggle:hover { border-color:var(--tc,#a855f7); color:var(--tc,#a855f7); }
  .rand-toggle.active {
    border-color:var(--tc,#a855f7);
    background:color-mix(in srgb,var(--tc,#a855f7) 12%,var(--surface2));
    color:var(--tc,#a855f7);
  }
  .rand-toggle-dot {
    width:10px; height:10px; border-radius:50%;
    border:2px solid currentColor; flex-shrink:0;
    transition:all .2s;
  }
  .rand-toggle.active .rand-toggle-dot {
    background:currentColor;
    box-shadow:0 0 8px currentColor;
  }

  .rand-count-wrap { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
  .rand-count-btn {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:8px; color:var(--text); font-family:'DM Mono',monospace;
    font-size:13px; padding:10px 14px; cursor:pointer; transition:all .15s;
  }
  .rand-count-btn:hover { border-color:#a855f7; color:#a855f7; }
  .rand-count-btn:active { transform:scale(.95); }
  .rand-count-display {
    flex:1; text-align:center; font-family:'Bebas Neue',sans-serif;
    font-size:40px; letter-spacing:2px;
    background:linear-gradient(135deg,#e879f9,#a855f7); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text;
  }
  .rand-count-presets { display:flex; gap:8px; flex-wrap:wrap; }
  .rand-preset {
    background:var(--surface2); border:1px solid var(--border);
    border-radius:8px; color:var(--muted); font-family:'DM Mono',monospace;
    font-size:11px; padding:7px 14px; cursor:pointer; transition:all .15s;
    letter-spacing:1px;
  }
  .rand-preset:hover { border-color:#a855f7; color:#a855f7; }
  .rand-preset.active { border-color:#a855f7; color:#a855f7; background:color-mix(in srgb,#a855f7 12%,var(--surface2)); }
  .rand-custom-wrap { margin-top:10px; display:flex; flex-direction:column; gap:5px; }
  .rand-custom-input { background:var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:'DM Mono',monospace; font-size:15px; padding:9px 14px; outline:none; transition:border-color .2s; width:100%; -moz-appearance:textfield; }
  .rand-custom-input::-webkit-outer-spin-button,.rand-custom-input::-webkit-inner-spin-button { -webkit-appearance:none; appearance:none; }
  .rand-custom-input:focus { border-color:#a855f7; }
  .rand-cap-msg { font-size:11px; color:#e879f9; font-family:'DM Mono',monospace; letter-spacing:.5px; min-height:15px; }
  .rand-timer-toggle { display:flex; align-items:center; justify-content:space-between; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:12px 16px; cursor:pointer; transition:all .2s; user-select:none; }
  .rand-timer-toggle:hover { border-color:#a855f7; }
  .rand-timer-toggle.active { border-color:#a855f7; background:color-mix(in srgb,#a855f7 8%,var(--surface2)); }
  .rand-timer-toggle-label { font-family:'DM Mono',monospace; font-size:12px; letter-spacing:1px; color:var(--text); }
  .rand-timer-toggle-sub { font-size:11px; color:var(--muted); margin-top:2px; }
  .rand-timer-switch { width:36px; height:20px; background:var(--border); border-radius:10px; position:relative; transition:background .2s; flex-shrink:0; }
  .rand-timer-switch::after { content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; background:#fff; border-radius:50%; transition:transform .2s; }
  .rand-timer-toggle.active .rand-timer-switch { background:#a855f7; }
  .rand-timer-toggle.active .rand-timer-switch::after { transform:translateX(16px); }
  .rand-timer-controls { margin-top:14px; }
  .rand-clock-wrap { display:flex; align-items:flex-end; justify-content:center; gap:6px; padding:12px 0 4px; }
  .rand-clock-field { display:flex; flex-direction:column; align-items:center; gap:6px; }
  .rand-clock-input { width:80px; text-align:center; font-family:'Bebas Neue',sans-serif; font-size:52px; letter-spacing:2px; background:transparent; border:none; border-bottom:2px solid #a855f7; color:#a855f7; outline:none; padding:2px 0; -moz-appearance:textfield; appearance:textfield; }
  .rand-clock-input::-webkit-outer-spin-button,.rand-clock-input::-webkit-inner-spin-button { -webkit-appearance:none; appearance:none; }
  .rand-clock-input:focus { border-bottom-color:#e879f9; }
  .rand-clock-colon { font-family:'Bebas Neue',sans-serif; font-size:52px; color:#a855f7; line-height:1; padding-bottom:18px; }
  .rand-clock-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }

  .rand-preview-wrap { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; margin-bottom:24px; }
  .rand-preview-pills { display:flex; flex-wrap:wrap; gap:8px; }
  .rand-pill {
    display:inline-flex; align-items:center; gap:6px;
    font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px;
    padding:5px 10px; border-radius:20px; border:1px solid currentColor;
    animation:fadeUp .2s ease both;
  }
  .rand-pill-count { font-family:'Bebas Neue',sans-serif; font-size:13px; }

  .rand-start-btn {
    width:100%; padding:18px; border-radius:14px;
    background:linear-gradient(135deg,#7c3aed,#6366f1);
    border:none; color:#fff;
    font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:3px;
    cursor:pointer; transition:all .2s;
    box-shadow:0 4px 24px rgba(139,92,246,.3);
    margin-top:auto;
  }
  .rand-start-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 32px rgba(139,92,246,.45); }
  .rand-start-btn:active:not(:disabled) { transform:translateY(0); }
  .rand-start-btn:disabled { opacity:.35; cursor:not-allowed; background:var(--surface2); box-shadow:none; }

  /* exam level pill for random */
  .level-pill.random-pill { color:#a855f7; border-color:#a855f7; }

  /* EXCEL IMPORT */
  .import-btn {
    display:flex; align-items:center; gap:8px;
    background: linear-gradient(135deg, #1a6640, #0d4028);
    border: 1px solid #2ecc71; border-radius:10px;
    color:#2ecc71; font-family:'DM Mono',monospace; font-size:11px;
    letter-spacing:1.5px; text-transform:uppercase;
    padding:10px 16px; cursor:pointer; transition:all .2s;
    white-space:nowrap;
  }
  .import-btn:hover { background:linear-gradient(135deg,#22834f,#155233); transform:translateY(-1px); box-shadow:0 4px 16px rgba(46,204,113,.25); }
  .import-btn:active { transform:translateY(0); }
  .import-modal-overlay {
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
    align-items:center; justify-content:center; padding:20px;
  }
  .import-modal-overlay.active { display:flex; }
  .import-modal {
    background:var(--surface); border:1px solid var(--border);
    border-radius:20px; width:100%; max-width:520px;
    padding:32px; animation:fadeUp .3s ease both;
    position:relative; max-height:90vh; overflow-y:auto;
  }
  .import-modal-title { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:2px; color:#2ecc71; margin-bottom:4px; }
  .import-modal-sub { font-size:13px; color:var(--muted); margin-bottom:24px; }
  .import-close { position:absolute; top:16px; right:16px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:16px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; }
  .import-close:hover { color:var(--text); border-color:var(--text); }
  .import-dropzone { border:2px dashed var(--border); border-radius:14px; padding:36px 20px; text-align:center; cursor:pointer; transition:all .25s; background:var(--surface2); position:relative; }
  .import-dropzone:hover, .import-dropzone.drag-over { border-color:#2ecc71; background:color-mix(in srgb,#2ecc71 8%,var(--surface2)); }
  .import-dropzone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
  .import-drop-icon { font-size:40px; margin-bottom:12px; }
  .import-drop-label { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:2px; color:var(--text); margin-bottom:6px; }
  .import-drop-sub { font-size:12px; color:var(--muted); }
  .import-format-hint { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-top:16px; font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); line-height:1.8; }
  .import-format-hint strong { color:var(--accent); }
  .import-progress { display:none; margin-top:20px; animation:fadeUp .2s ease both; }
  .import-progress-bar-wrap { background:var(--surface2); border-radius:6px; height:6px; overflow:hidden; margin:10px 0; }
  .import-progress-bar { height:100%; background:linear-gradient(90deg,#2ecc71,#4af0b0); border-radius:6px; transition:width .3s ease; }
  .import-progress-label { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:1px; }
  .import-results { display:none; margin-top:20px; animation:fadeUp .2s ease both; }
  .import-results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
  .import-stat { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:14px; text-align:center; }
  .import-stat-val { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:1px; }
  .import-stat-lbl { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:1px; margin-top:2px; }
  .import-errors-list { background:color-mix(in srgb,#f04060 8%,var(--surface2)); border:1px solid color-mix(in srgb,#f04060 30%,transparent); border-radius:10px; padding:12px 14px; margin-top:10px; max-height:150px; overflow-y:auto; }
  .import-error-item { font-size:12px; color:#f04060; font-family:'DM Mono',monospace; padding:3px 0; border-bottom:1px solid color-mix(in srgb,#f04060 15%,transparent); }
  .import-error-item:last-child { border-bottom:none; }
  .import-confirm-btn { width:100%; padding:14px; background:linear-gradient(135deg,#1a6640,#0d4028); border:1px solid #2ecc71; border-radius:10px; color:#2ecc71; font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; cursor:pointer; transition:all .2s; margin-top:4px; }
  .import-confirm-btn:hover { background:linear-gradient(135deg,#22834f,#155233); }
  .import-confirm-btn:disabled { opacity:.4; cursor:not-allowed; }
  .import-dl-btn { width:100%; padding:11px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; color:var(--accent); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:all .2s; margin-top:10px; }
  .import-dl-btn:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface2)); }
  /* HISTORY */
  .history-empty { text-align:center; padding:48px 20px; color:var(--muted); font-size:15px; }
  .history-empty .big-icon { font-size:48px; margin-bottom:12px; }
  .history-item { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:12px; display:flex; align-items:center; gap:12px; animation:fadeUp .3s ease both; cursor:pointer; transition:all .2s; width:100%; box-sizing:border-box; overflow:hidden; }
  .history-item:hover,.history-item:active { border-color:var(--accent); transform:translateY(-2px); background:var(--surface2); }
  .history-item-arrow { font-size:18px; color:var(--muted); flex-shrink:0; }
  .history-score-badge { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:1px; flex-shrink:0; border:3px solid currentColor; }
  .history-info { flex:1; min-width:0; overflow:hidden; }
  .history-level { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
  .history-detail { font-size:13px; color:var(--muted); margin-top:2px; }
  .history-date { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); text-align:right; flex-shrink:0; line-height:1.6; }
  .history-summary { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; text-align:center; }
  .history-summary-val { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:1px; }
  .history-summary-lbl { font-size:11px; color:var(--muted); font-family:'DM Mono',monospace; letter-spacing:1px; margin-top:2px; }
  .history-month-label { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin:18px 0 8px 2px; }

:root {
  --bg: #0a0d14; --surface: #111620; --surface2: #1a2030;
  --accent: #f0c040; --accent2: #4af0b0; --danger: #f04060;
  --text: #e8eaf0; --muted: #6a7490; --border: #252d40;
}
body.light {
  --bg: #f0f2f8; --surface: #ffffff; --surface2: #e4e8f4;
  --accent: #b8860b; --accent2: #0ea070; --danger: #dc2040;
  --text: #1a1e2e; --muted: #6a7490; --border: #cdd3e4;
}
body.light::before {
  background-image: linear-gradient(rgba(184,134,11,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(184,134,11,.05) 1px,transparent 1px);
}
/* LANDING */
#landing { background:var(--bg); }
.landing-nav { display:flex; align-items:center; justify-content:space-between; padding:20px 40px; border-bottom:1px solid var(--border); position:sticky; top:0; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(12px); z-index:100; }
.landing-nav-logo { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:4px; background:linear-gradient(135deg,var(--accent),#ff9a3c); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.landing-nav-btn { background:transparent; border:1px solid var(--border); color:var(--text); border-radius:8px; padding:8px 20px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; cursor:pointer; transition:all .2s; }
.landing-nav-btn:hover { border-color:var(--accent); color:var(--accent); }
.landing-hero { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:60px; padding:80px 40px 60px; max-width:1200px; margin:0 auto; width:100%; flex-wrap:wrap; }
.landing-hero-inner { flex:1; min-width:280px; max-width:560px; }
.landing-badge { display:inline-block; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); border-radius:20px; padding:5px 14px; margin-bottom:24px; background:color-mix(in srgb,var(--accent) 8%,transparent); animation:fadeUp .5s ease both; }
.landing-headline { font-family:'Bebas Neue',sans-serif; font-size:clamp(52px,8vw,88px); letter-spacing:3px; line-height:1.0; background:linear-gradient(135deg,var(--text) 0%,var(--accent) 60%,#ff9a3c 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:22px; animation:fadeUp .5s .1s ease both; }
.landing-sub { font-size:16px; color:var(--muted); line-height:1.7; margin-bottom:36px; max-width:460px; animation:fadeUp .5s .2s ease both; }
.landing-bottom-cta { display:flex; align-items:center; justify-content:center; padding:16px 40px 32px; animation:fadeUp .5s .5s ease both; }
.landing-cta-btn { background:linear-gradient(135deg,var(--accent),#ff9a3c); color:#0a0d14; border:none; border-radius:12px; padding:15px 32px; font-family:'DM Sans',sans-serif; font-size:16px; font-weight:700; cursor:pointer; transition:transform .2s,box-shadow .2s; box-shadow:0 4px 20px color-mix(in srgb,var(--accent) 30%,transparent); }
.landing-cta-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px color-mix(in srgb,var(--accent) 40%,transparent); }
.landing-cta-full { min-width:220px; }
.landing-cta-note { font-size:12px; color:var(--muted); font-family:'DM Mono',monospace; letter-spacing:1px; }
.landing-features { display:flex; flex-direction:column; gap:18px; animation:fadeUp .5s .4s ease both; }
.landing-feat { display:flex; align-items:flex-start; gap:14px; }
.landing-feat-icon { font-size:22px; flex-shrink:0; margin-top:2px; }
.landing-feat-title { font-weight:600; font-size:14px; margin-bottom:3px; }
.landing-feat-desc { font-size:13px; color:var(--muted); line-height:1.5; }
/* App preview mockup */
.landing-preview { flex:0 0 auto; width:300px; background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35); animation:fadeUp .5s .2s ease both; display:flex; flex-direction:column; max-height:480px; }
.landing-preview-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--surface2); border-bottom:1px solid var(--border); flex-shrink:0; }
.lp-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.landing-preview-body { padding:16px 14px 20px; overflow-y:auto; flex:1; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.landing-preview-body::-webkit-scrollbar { width:4px; }
.landing-preview-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.lp-logo { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:4px; background:linear-gradient(135deg,var(--accent),#ff9a3c); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:2px; }
.lp-tagline { font-family:'DM Mono',monospace; font-size:7px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.lp-cards { display:flex; flex-direction:column; gap:6px; }
.lp-card { background:var(--surface2); border:1px solid color-mix(in srgb,var(--lc) 25%,var(--border)); border-radius:10px; padding:9px 11px; border-left:2px solid var(--lc); }
.lp-card-badge { font-family:'DM Mono',monospace; font-size:8px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:3px; }
.lp-card-label { font-size:12px; font-weight:600; margin-bottom:2px; color:var(--text); }
.lp-card-meta { font-family:'DM Mono',monospace; font-size:8px; letter-spacing:.5px; color:var(--muted); }
@media(max-width:800px){
  .landing-nav { padding:16px 20px; }
  .landing-hero { padding:48px 20px 24px; gap:36px; }
  .landing-preview { width:100%; max-width:360px; }
  .landing-bottom-cta { position:fixed; bottom:0; left:0; right:0; padding:16px 20px calc(16px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(12px); border-top:1px solid var(--border); z-index:90; animation:none; }
  .landing-cta-full { width:100%; padding:16px 32px; font-size:17px; border-radius:14px; }
  #landing { padding-bottom:110px; }
}
/* LOGIN */
#login { min-height:100vh; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; text-align:center; }
.login-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:40px 32px; max-width:420px; width:100%; animation:fadeUp .5s ease both; }
.login-role-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:28px 0 0; }
.login-role-btn { background:var(--surface2); border:2px solid var(--border); border-radius:14px; padding:28px 16px; cursor:pointer; transition:all .25s; text-align:center; }
.login-role-btn:hover,.login-role-btn:active { transform:translateY(-3px); }
.login-role-btn.student { --rc:#4af0b0; }
.login-role-btn.admin   { --rc:#f0c040; }
.login-role-btn:hover { border-color:var(--rc); background:color-mix(in srgb,var(--rc) 8%,var(--surface2)); }
.login-role-icon { font-size:36px; margin-bottom:10px; }
.login-role-name { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:2px; color:var(--rc); }
.login-role-desc { font-size:12px; color:var(--muted); margin-top:4px; line-height:1.5; }
.login-pin-wrap { margin-top:20px; animation:fadeUp .3s ease both; }
.login-pin-label { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.login-pin-input { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; color:var(--text); font-family:'DM Mono',monospace; font-size:20px; letter-spacing:8px; text-align:center; outline:none; transition:border-color .2s; }
.login-pin-input:focus { border-color:var(--accent); }
.login-pin-input.error { border-color:var(--danger); animation:shake .3s ease; }
.login-pin-btn { width:100%; margin-top:12px; background:var(--accent); color:var(--bg); border:none; padding:14px; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:15px; cursor:pointer; transition:opacity .2s; min-height:50px; }
.login-pin-btn:active { opacity:.85; }
.login-back-link { margin-top:14px; font-size:13px; color:var(--muted); cursor:pointer; transition:color .2s; }
.login-back-link:hover { color:var(--accent); }
.role-badge { display:inline-flex; align-items:center; gap:6px; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; padding:4px 12px; border-radius:20px; border:1px solid currentColor; margin-left:8px; vertical-align:middle; }
.role-badge.admin   { color:var(--accent); }
.role-badge.student { color:var(--accent2); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { overflow-x:auto; }
body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; min-height:100vh; overflow-x:auto; min-width:320px; width:100%; }
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: linear-gradient(rgba(240,192,64,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(240,192,64,.03) 1px,transparent 1px);
  background-size:40px 40px;
}
.screen { display:none; position:relative; z-index:1; overflow-x:clip; max-width:100vw; box-sizing:border-box; }
.screen.active { display:flex; flex-direction:column; width:100%; min-width:0; }

/* HOME */
#home { min-height:100vh; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; text-align:center; }
.logo { font-family:'Bebas Neue',sans-serif; font-size:clamp(64px,12vw,120px); letter-spacing:6px; line-height:1; background:linear-gradient(135deg,var(--accent),#ff9a3c); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:fadeDown .8s ease both; }
.tagline { font-family:'DM Mono',monospace; font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--muted); margin-top:8px; animation:fadeDown .8s .1s ease both; }
.divider { width:60px; height:2px; background:var(--accent); margin:32px auto; animation:expand .6s .3s ease both; transform-origin:center; }
.home-title { font-size:clamp(18px,3vw,24px); font-weight:300; margin-bottom:8px; animation:fadeUp .8s .3s ease both; }
.home-sub { font-size:14px; color:var(--muted); margin-bottom:48px; animation:fadeUp .8s .4s ease both; }
.levels-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; width:100%; max-width:960px; animation:fadeUp .8s .5s ease both; }
.level-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:28px 24px; cursor:pointer; transition:all .25s; position:relative; overflow:hidden; text-align:left; }
.level-card::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; background:var(--card-color,var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.level-card:hover::before,.level-card:active::before { transform:scaleX(1); }
.level-card:hover,.level-card:active { border-color:var(--card-color,var(--accent)); transform:translateY(-4px); background:var(--surface2); }
.level-card[data-level="easy"]{--card-color:#4af0b0} .level-card[data-level="moderate"]{--card-color:#4ab4f0}
.level-card[data-level="board"]{--card-color:#f0c040} .level-card[data-level="topnotcher"]{--card-color:#f04060}
.level-badge { display:inline-block; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--card-color,var(--accent)); background:color-mix(in srgb,var(--card-color,var(--accent)) 12%,transparent); padding:4px 10px; border-radius:4px; margin-bottom:12px; }
.level-name { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:2px; margin-bottom:8px; }
.level-desc { font-size:13px; color:var(--muted); line-height:1.6; }
.level-meta { margin-top:16px; font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); }
.topic-screen { min-height:100vh; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; text-align:center; }
.topic-back { position:absolute; top:20px; left:20px; background:transparent; border:1px solid var(--border); color:var(--muted); padding:8px 16px; border-radius:8px; font-family:"DM Sans",sans-serif; font-size:13px; cursor:pointer; }
.topic-back:active { border-color:var(--accent); color:var(--accent); }
.topic-level-label { font-family:"Bebas Neue",sans-serif; font-size:clamp(32px,8vw,64px); letter-spacing:4px; margin-bottom:6px; }
.topic-subtitle { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:3px; color:var(--muted); margin-bottom:40px; }
.topics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; width:100%; max-width:860px; }
.topic-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px 20px; transition:all .25s; text-align:left; position:relative; overflow:hidden; }
.topic-card::before { content:""; position:absolute; top:0;left:0;right:0; height:3px; background:var(--tc,var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.topic-card:hover::before,.topic-card:active::before { transform:scaleX(1); }
.topic-card:hover { border-color:var(--tc,var(--accent)); background:var(--surface2); }
.topic-abbr { font-family:"Bebas Neue",sans-serif; font-size:40px; letter-spacing:3px; margin-bottom:0; }
.topic-full { font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:12px; }
.topic-meta { font-family:"DM Mono",monospace; font-size:10px; color:var(--muted); letter-spacing:1px; margin-bottom:16px; }
  .topic-btns { display:flex; gap:8px; margin-top:4px; }
  .btn-topic-exam { flex:2; background:var(--tc,var(--accent)); color:var(--bg); border:none; padding:12px 10px; border-radius:8px; font-family:"DM Sans",sans-serif; font-weight:600; font-size:14px; cursor:pointer; min-height:46px; transition:opacity .2s; }
  .btn-topic-exam:active { opacity:.8; }
  .btn-topic-sol { flex:1; background:transparent; border:1px solid var(--tc,var(--accent)); color:var(--tc,var(--accent)); padding:12px 10px; border-radius:8px; font-family:"DM Sans",sans-serif; font-size:13px; font-weight:500; cursor:pointer; min-height:46px; transition:all .2s; white-space:nowrap; }
  .btn-topic-sol:active { background:color-mix(in srgb,var(--tc,var(--accent)) 15%,transparent); }

.home-editor-btn { margin-top:0; background:transparent; border:1px solid var(--border); color:var(--muted); padding:8px 18px; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:13px; cursor:pointer; transition:all .2s; }
.home-editor-btn:hover,.home-editor-btn:active { border-color:var(--accent); color:var(--accent); }

/* ── HOME TOP BAR ── */
.home-topbar { width:100%; max-width:1200px; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; box-sizing:border-box; flex-shrink:0; gap:8px; }
.home-nav-desktop { display:flex; gap:8px; flex-wrap:wrap; align-items:center; flex:1; }
.home-nav-right { display:flex; gap:8px; align-items:center; flex-shrink:0; }
/* Hamburger — hidden on desktop */
.home-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; background:none; border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer; width:42px; height:42px; flex-shrink:0; }
.home-hamburger span { display:block; width:18px; height:2px; background:var(--text); border-radius:2px; transition:all .25s; }
/* Overlay */
.home-menu-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1100; }
.home-menu-overlay.open { display:block; }
/* Drawer */
.home-menu-drawer { position:fixed; top:0; left:0; bottom:0; width:260px; background:var(--surface); border-right:1px solid var(--border); z-index:1101; transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow-y:auto; }
.home-menu-drawer.open { transform:translateX(0); }
.home-menu-header { display:flex; align-items:center; justify-content:space-between; padding:18px 16px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.home-menu-items { display:flex; flex-direction:column; padding:10px 0; flex:1; }
.home-menu-item { background:none; border:none; text-align:left; padding:13px 20px; font-family:'DM Sans',sans-serif; font-size:14px; color:var(--text); cursor:pointer; transition:background .15s; width:100%; }
.home-menu-item:hover { background:var(--surface2); }
.home-menu-divider { height:1px; background:var(--border); margin:6px 16px; }
/* Mobile breakpoint */
@media(max-width:640px){
  .home-hamburger { display:flex; }
  .home-nav-desktop { display:none; }
}

/* EXAM */
#exam { min-height:100vh; flex-direction:column; padding:0; }
.exam-header { background:var(--surface); border-bottom:1px solid var(--border); padding:16px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; position:sticky; top:0; z-index:10; min-width:320px; }
.exam-brand { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:3px; color:var(--accent); }
.progress-wrap { flex:1; min-width:120px; max-width:400px; padding:0 16px; }
.progress-bar { height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; background:var(--accent); border-radius:2px; transition:width .4s; }
.progress-text { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); margin-top:6px; text-align:center; }
.level-pill { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; padding:4px 12px; border-radius:20px; border:1px solid currentColor; }
.btn-quit { background:transparent; border:1px solid var(--border); color:var(--muted); padding:8px 16px; border-radius:8px; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13px; transition:all .2s; min-height:40px; }
.btn-quit:hover,.btn-quit:active { border-color:var(--danger); color:var(--danger); }
.exam-body { flex:1; display:flex; flex-direction:column; align-items:center; padding:32px 16px; overflow-x:auto; }
/* Q-NAV PANEL */
.q-nav-panel { background:var(--surface); border-bottom:1px solid var(--border); overflow:hidden; max-height:0; transition:max-height .3s ease; }
.q-nav-panel.open { max-height:320px; overflow-y:auto; }
.q-nav-inner { padding:14px 20px 16px; max-width:760px; margin:0 auto; }
.q-nav-grid { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.q-nav-dot { width:34px; height:34px; border-radius:8px; border:2px solid var(--border); background:var(--surface2); font-family:'DM Mono',monospace; font-size:11px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s; color:var(--muted); flex-shrink:0; }
.q-nav-dot:hover { border-color:var(--accent); color:var(--accent); }
.q-nav-dot.answered { background:color-mix(in srgb,var(--accent2) 15%,var(--surface2)); border-color:var(--accent2); color:var(--accent2); }
.q-nav-dot.skipped { background:color-mix(in srgb,var(--accent) 15%,var(--surface2)); border-color:var(--accent); color:var(--accent); }
.q-nav-dot.current { background:color-mix(in srgb,#a855f7 20%,var(--surface2)); border-color:#a855f7; color:#a855f7; font-weight:700; outline:2px solid #a855f7; outline-offset:1px; }
.q-nav-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.q-nav-legend { display:flex; gap:10px; flex-wrap:wrap; font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.5px; align-items:center; }
.q-nav-legend-item { display:flex; align-items:center; gap:4px; }
.q-nav-legend-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.btn-submit-now { background:transparent; border:1px solid var(--accent2); color:var(--accent2); padding:7px 18px; border-radius:8px; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; transition:all .2s; white-space:nowrap; }
.btn-submit-now:hover { background:color-mix(in srgb,var(--accent2) 12%,transparent); }
/* SUBMIT CONFIRM MODAL */
.submit-confirm-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:200; align-items:center; justify-content:center; padding:20px; }
.submit-confirm-overlay.open { display:flex; }
.submit-confirm-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px 28px; max-width:400px; width:100%; text-align:center; animation:fadeUp .25s ease both; }
.submit-confirm-title { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:2px; color:var(--accent); margin-bottom:10px; }
.submit-confirm-msg { font-size:14px; color:var(--muted); line-height:1.7; margin-bottom:24px; }
.submit-confirm-actions { display:flex; gap:10px; justify-content:center; }
.question-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px 24px; max-width:720px; width:100%; min-width:280px; animation:fadeUp .4s ease both; }
.q-number { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.q-figure { margin-bottom:20px; text-align:center; }
.q-figure img { max-width:100%; max-height:300px; border-radius:10px; border:1px solid var(--border); object-fit:contain; background:var(--surface2); }
.q-figure-caption { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); margin-top:6px; letter-spacing:1px; }
.q-text { font-size:clamp(15px,2.5vw,20px); font-weight:500; line-height:1.6; margin-bottom:28px; }
.options-list { display:flex; flex-direction:column; gap:12px; }
.option-btn { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:16px 18px; cursor:pointer; text-align:left; font-family:'DM Sans',sans-serif; font-size:15px; color:var(--text); transition:all .2s; display:flex; align-items:center; gap:14px; min-height:56px; width:100%; }
.option-btn:hover,.option-btn:active { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,var(--surface2)); }
.option-btn.selected { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface2)); }
.option-letter { font-family:'DM Mono',monospace; font-size:12px; font-weight:500; width:26px; height:26px; border-radius:6px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--muted); transition:all .2s; }
.option-btn.selected .option-letter { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.exam-footer { max-width:720px; width:100%; margin-top:20px; display:flex; justify-content:flex-end; }
.btn-primary { background:var(--accent); color:var(--bg); border:none; padding:14px 32px; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:15px; cursor:pointer; transition:all .2s; letter-spacing:.5px; min-height:50px; }
.btn-primary:hover { opacity:.9; transform:translateY(-1px); }
.btn-primary:disabled { opacity:.3; cursor:not-allowed; transform:none; }

/* RESULTS */
#results { min-height:100vh; flex-direction:column; align-items:center; justify-content:center; padding:40px 16px; }
.results-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:40px 32px; max-width:640px; width:100%; text-align:center; animation:fadeUp .6s ease both; }
.score-ring { width:160px; height:160px; margin:0 auto 32px; position:relative; }
.score-ring svg { transform:rotate(-90deg); width:100%; height:100%; }
.score-ring-bg { fill:none; stroke:var(--border); stroke-width:8; }
.score-ring-fill { fill:none; stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 1.2s ease; }
.score-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.score-num { font-family:'Bebas Neue',sans-serif; font-size:52px; letter-spacing:2px; line-height:1; }
.score-label { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:2px; }
.result-title { font-family:'Bebas Neue',sans-serif; font-size:36px; letter-spacing:3px; margin-bottom:8px; }
.result-sub { font-size:14px; color:var(--muted); margin-bottom:28px; line-height:1.6; }
.result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px; }
.stat-box { background:var(--surface2); border-radius:10px; padding:16px; }
.stat-val { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:1px; }
.stat-lbl { font-size:11px; color:var(--muted); font-family:'DM Mono',monospace; letter-spacing:1px; margin-top:2px; }
.result-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn-secondary { background:transparent; border:1px solid var(--border); color:var(--text); padding:12px 20px; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:14px; cursor:pointer; transition:all .2s; min-height:46px; }
.btn-secondary:hover,.btn-secondary:active { border-color:var(--accent); color:var(--accent); }
.review-list { max-width:720px; width:100%; margin-top:28px; display:none; flex-direction:column; gap:14px; animation:fadeUp .4s ease both; }
.review-list.visible { display:flex; }
.review-item { background:var(--surface); border-radius:12px; padding:20px; border-left:4px solid transparent; text-align:left; }
.review-item.correct { border-color:var(--accent2); } .review-item.wrong { border-color:var(--danger); }
.review-q { font-size:14px; color:var(--muted); margin-bottom:8px; } .review-q strong { color:var(--text); }
.review-answers { font-size:13px; margin-top:6px; }
.your-answer { color:var(--danger); } .correct-answer { color:var(--accent2); }

/* ── FORMULA CARDS ───────────────────────────────── */
#formulaCardsScreen { min-height:100vh; flex-direction:column; padding:0; }
.fc-header { background:var(--surface); border-bottom:1px solid var(--border); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; position:sticky; top:0; z-index:10; }
.fc-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:3px; background:linear-gradient(135deg,#38bdf8,#818cf8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.fc-topic-select-wrap { display:flex; align-items:center; gap:8px; }
.fc-topic-select { background:var(--surface2); border:1px solid var(--border); border-radius:10px; color:var(--text); font-family:'DM Mono',monospace; font-size:12px; letter-spacing:1px; padding:8px 32px 8px 12px; outline:none; cursor:pointer; transition:border-color .2s; -webkit-appearance:none; appearance:none; min-width:160px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a7490' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
.fc-topic-select:focus { border-color:#38bdf8; }
.fc-topic-select option { background:var(--surface2); }
.fc-add-topic-btn { background:none; border:1px dashed var(--border); color:var(--muted); border-radius:8px; padding:7px 12px; font-size:13px; cursor:pointer; transition:all .2s; white-space:nowrap; }
.fc-add-topic-btn:hover { border-color:#38bdf8; color:#38bdf8; }
.fc-body { flex:1; display:flex; flex-direction:row; align-items:flex-start; padding:20px 24px; gap:20px; overflow-x:auto; width:100%; box-sizing:border-box; }
@media(max-width:900px){ .fc-body { flex-direction:column; overflow-x:hidden; } }

/* Editor panel — wide, two-column fields */
.fc-editor-panel { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px 20px; width:780px; min-width:340px; flex-shrink:0; max-height:calc(100vh - 80px); overflow-y:auto; box-sizing:border-box; }
@media(max-width:1100px){ .fc-editor-panel { width:100%; max-height:none; } }
.fc-editor-panel h3 { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:2px; color:#38bdf8; margin-bottom:14px; }
/* Two-column front/back fields */
.fc-fields-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:600px){ .fc-fields-row { grid-template-columns:1fr; } }
.fc-field-col { display:flex; flex-direction:column; gap:8px; }
.fc-field-col-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:5px 10px; border-radius:6px; text-align:center; font-weight:700; }
.fc-field-col-label.front { background:color-mix(in srgb,#38bdf8 12%,var(--surface2)); color:#38bdf8; border:1px solid #38bdf8; }
.fc-field-col-label.back  { background:color-mix(in srgb,#818cf8 12%,var(--surface2)); color:#818cf8; border:1px solid #818cf8; }
.fc-preview-mini { background:#fff; border-radius:10px; padding:14px 16px; min-height:80px; color:#1a1e2e; font-size:14px; line-height:1.6; box-shadow:0 2px 12px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.06); word-break:break-word; }
.fc-preview-mini img { max-width:100%; border-radius:6px; margin-top:6px; display:block; }
/* FC multi-image */
.fc-img-zone { background:var(--surface2); border:1px dashed var(--border); border-radius:8px; padding:9px 12px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition:border-color .2s; }
.fc-img-zone:hover { border-color:var(--accent); }
.fc-paste-hint { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--muted); pointer-events:none; }
.fc-img-gallery { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.fc-img-gallery:empty { display:none; }
.fc-img-thumb { position:relative; width:72px; height:72px; border-radius:8px; overflow:hidden; border:1px solid var(--border); flex-shrink:0; }
.fc-img-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.fc-img-thumb-del { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; border:none; cursor:pointer; font-size:11px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; }
.fc-latex-btns { display:flex; gap:4px; flex-shrink:0; }
.fc-latex-btn { background:none; border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:2px 8px; font-family:'DM Mono',monospace; font-size:11px; font-weight:700; cursor:pointer; transition:all .15s; letter-spacing:.5px; line-height:1.6; }
.fc-latex-btn:hover { border-color:#38bdf8; color:#38bdf8; background:color-mix(in srgb,#38bdf8 10%,transparent); }
.fc-latex-btn-block { font-size:10px; }
.fc-side-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; margin-top:10px; }
.fc-add-btn { background:linear-gradient(135deg,#38bdf8,#818cf8); color:#fff; border:none; padding:13px 20px; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:15px; cursor:pointer; width:100%; margin-top:12px; min-height:50px; transition:opacity .2s; }
.fc-add-btn:active { opacity:.85; }
.fc-cancel-btn { background:transparent; border:1px solid var(--border); color:var(--muted); padding:8px 16px; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:13px; cursor:pointer; min-height:40px; }

/* Deck list */
.fc-deck-col { flex:1; min-width:280px; max-height:calc(100vh - 80px); overflow-y:auto; }
@media(max-width:1100px){ .fc-deck-col { width:100%; max-height:none; overflow-y:visible; } }
.fc-deck-header { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.fc-deck-title { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; }
.fc-deck-count { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); flex:1; }
.fc-import-btn { background:none; border:1px solid var(--border); color:var(--muted); border-radius:7px; padding:4px 9px; font-size:12px; cursor:pointer; transition:all .15s; font-family:'DM Sans',sans-serif; }
.fc-import-btn:hover { border-color:#38bdf8; color:#38bdf8; background:color-mix(in srgb,#38bdf8 8%,transparent); }
.fc-import-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:2000; align-items:center; justify-content:center; padding:16px; }
.fc-import-overlay.open { display:flex; }
.fc-import-modal { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px 24px; width:100%; max-width:480px; animation:fadeUp .25s ease both; }
.fc-import-dropzone { border:2px dashed var(--border); border-radius:12px; padding:32px 20px; text-align:center; cursor:pointer; position:relative; transition:border-color .2s; background:var(--surface2); }
.fc-import-dropzone:hover { border-color:#38bdf8; }
.fc-import-dropzone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.fc-sel-toggle-btn { background:none; border:1px solid var(--border); color:var(--muted); border-radius:7px; padding:4px 8px; font-size:13px; cursor:pointer; transition:all .15s; }
.fc-sel-toggle-btn:hover,.fc-sel-toggle-btn.active { border-color:#f04060; color:#f04060; background:color-mix(in srgb,#f04060 8%,transparent); }
.fc-sel-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:color-mix(in srgb,#f04060 7%,var(--surface2)); border:1px solid color-mix(in srgb,#f04060 25%,var(--border)); border-radius:10px; padding:9px 12px; margin-bottom:10px; }
.fc-sel-all-label { display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; accent-color:#f04060; user-select:none; }
.fc-sel-count { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); flex:1; }
.fc-sel-del-btn { background:#f04060; color:#fff; border:none; border-radius:7px; padding:6px 12px; font-size:12px; font-family:'DM Sans',sans-serif; font-weight:600; cursor:pointer; transition:opacity .15s; }
.fc-sel-del-btn:disabled { opacity:.35; cursor:not-allowed; }
.fc-sel-del-btn:not(:disabled):hover { opacity:.85; }
.fc-sel-cancel-btn { background:none; border:1px solid var(--border); color:var(--muted); border-radius:7px; padding:6px 10px; font-size:12px; cursor:pointer; }
/* Card checkbox overlay */
.fc-card-wrap.select-mode .fc-card { cursor:default; }
.fc-card-sel-chk { display:none; position:absolute; top:10px; left:10px; z-index:10; width:18px; height:18px; accent-color:#f04060; cursor:pointer; }
.fc-card-wrap.select-mode .fc-card-sel-chk { display:block; }
.fc-card-wrap.selected .fc-card-stack { outline:2px solid #f04060; border-radius:17px; }
.fc-empty { text-align:center; padding:60px 20px; color:var(--muted); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1px; }

/* ── Flip card — deck stack look ── */
.fc-card-wrap { margin-bottom:28px; cursor:pointer; }
/* The stack pseudo-cards behind */
.fc-card-stack { position:relative; }
.fc-card-stack::before,
.fc-card-stack::after {
  content:''; position:absolute; left:50%; border-radius:16px;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.10);
}
.fc-card-stack::after  { width:88%; height:100%; top:10px; transform:translateX(-50%) rotate(2.5deg); z-index:0; }
.fc-card-stack::before { width:92%; height:100%; top:6px;  transform:translateX(-50%) rotate(-1.5deg); z-index:1; }
/* The actual flip container */
.fc-card { position:relative; z-index:2; perspective:1000px; }
.fc-card-inner { display:grid; width:100%; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,0,.2,1); border-radius:16px; }
.fc-card-inner.flipped { transform:rotateY(180deg); }
.fc-card-face {
  grid-row:1; grid-column:1;
  background:#ffffff; border-radius:16px; padding:28px 24px;
  min-height:180px; display:flex; flex-direction:column; justify-content:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.06), 0 12px 40px rgba(0,0,0,.10);
  word-break:break-word; color:#1a1e2e; box-sizing:border-box;
}
.fc-card-back-face { transform:rotateY(180deg); }
.fc-card-tag { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:#94a3b8; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.fc-card-tag-dot { width:6px; height:6px; border-radius:50%; background:#38bdf8; flex-shrink:0; }
.fc-card-tag-dot.back { background:#818cf8; }
.fc-card-content { font-size:15px; line-height:1.7; flex:1; text-align:center; }
.fc-card-content img { max-width:100%; border-radius:8px; margin:10px auto 0; display:block; }
.fc-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:10px; border-top:1px solid rgba(0,0,0,.07); }
.fc-flip-hint { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1.5px; color:#94a3b8; }
.fc-card-actions { display:flex; gap:6px; }
.fc-card-actions button { background:none; border:1px solid rgba(0,0,0,.12); color:#64748b; border-radius:6px; padding:3px 8px; font-size:11px; cursor:pointer; transition:all .15s; line-height:1.4; }
.fc-card-actions button:hover { border-color:#38bdf8; color:#38bdf8; }
.fc-card-actions .fc-del-btn:hover { border-color:#ef4444; color:#ef4444; }
.fc-subject-pill { display:inline-block; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1px; text-transform:uppercase; padding:2px 8px; border-radius:10px; margin-left:6px; }

/* Study mode overlay — 3-row layout: top bar / card / buttons */
.fc-study-overlay { display:none; position:fixed; inset:0; background:rgba(10,13,20,.93); z-index:300; flex-direction:column; align-items:center; overflow:hidden; }
.fc-study-overlay.open { display:flex; }
.fc-study-top { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:520px; padding:16px 20px 0; flex-shrink:0; box-sizing:border-box; }
.fc-study-progress { font-family:'DM Mono',monospace; font-size:12px; color:rgba(255,255,255,.5); letter-spacing:2px; }
/* Scrollable card area */
.fc-study-stack { position:relative; width:100%; max-width:520px; flex:1; overflow-y:auto; padding:16px 20px; box-sizing:border-box; display:flex; align-items:center; }
.fc-study-card-wrap { position:relative; perspective:1000px; cursor:pointer; width:100%; }
.fc-study-card { display:grid; width:100%; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,0,.2,1); border-radius:20px; }
.fc-study-card.flipped { transform:rotateY(180deg); }
.fc-study-face { grid-row:1; grid-column:1; background:#ffffff; border-radius:20px; padding:28px 28px; min-height:160px; display:flex; flex-direction:column; justify-content:center; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 4px 32px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06); word-break:break-word; color:#1a1e2e; box-sizing:border-box; }
.fc-study-face.back { transform:rotateY(180deg); }
.fc-study-content { font-size:20px; line-height:1.7; text-align:center; }
.fc-study-content img { max-width:100%; border-radius:10px; margin:12px auto 0; display:block; }
.fc-study-nav { display:flex; align-items:center; gap:14px; margin-top:32px; }
.fc-study-btn { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:#fff; border-radius:10px; padding:12px 24px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; }
.fc-study-btn:hover { background:rgba(255,255,255,.18); }
.fc-study-btn:disabled { opacity:.3; cursor:not-allowed; }
/* Fixed button bar at bottom */
.fc-study-footer { width:100%; max-width:520px; flex-shrink:0; padding:12px 20px 20px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; background:rgba(10,13,20,.95); border-top:1px solid rgba(255,255,255,.07); }
.fc-show-answer-btn { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#fff; border-radius:12px; padding:13px 36px; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:600; cursor:pointer; transition:all .2s; width:100%; }
.fc-show-answer-btn:hover { background:rgba(255,255,255,.2); }
.fc-rating-row { display:none; gap:10px; flex-wrap:nowrap; justify-content:center; width:100%; }
.fc-rating-wrap { display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; min-width:0; }
.fc-due-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; color:rgba(255,255,255,.45); }
.fc-rating-btn { border:none; border-radius:10px; padding:12px 8px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:all .18s; width:100%; }
@media(max-width:380px){
  .fc-rating-row { flex-wrap:wrap; gap:8px; }
  .fc-rating-wrap { flex:1 1 calc(50% - 4px); }
  .fc-rating-btn { padding:11px 6px; font-size:13px; }
}
.fc-rating-btn:hover { filter:brightness(1.12); transform:translateY(-1px); }
.fc-rating-btn.again { background:#ef4444; color:#fff; }
.fc-rating-btn.hard  { background:#f97316; color:#fff; }
.fc-rating-btn.good  { background:#22c55e; color:#fff; }
.fc-rating-btn.easy  { background:#3b82f6; color:#fff; }
.fc-session-done { text-align:center; color:#fff; padding:20px; }
.fc-session-done-icon { font-size:48px; margin-bottom:12px; }
.fc-session-done-msg { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:3px; color:#22c55e; margin-bottom:6px; }
.fc-session-done-sub { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:2px; color:rgba(255,255,255,.5); }

/* EDITOR */
#editor { min-height:100vh; flex-direction:column; padding:0; }
.editor-header { background:var(--surface); border-bottom:1px solid var(--border); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; position:sticky; top:0; z-index:10; width:100%; box-sizing:border-box; overflow:hidden; }
.editor-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:3px; color:var(--accent); }
.editor-tabs { display:flex; gap:4px; background:var(--surface2); border-radius:8px; padding:4px; border:1px solid var(--border); flex-wrap:wrap; }
.ed-tab { background:transparent; border:none; padding:6px 10px; border-radius:6px; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; cursor:pointer; color:var(--muted); transition:all .2s; min-height:32px; }
.ed-tab:active { background:var(--border); }
.ed-tab.active { background:var(--surface); color:var(--text); }
.editor-body { flex:1; display:flex; flex-direction:row; align-items:flex-start; padding:20px 24px; gap:20px; overflow-x:auto; overflow-y:visible; justify-content:flex-start; max-width:none; margin:0 auto; width:100%; box-sizing:border-box; }
.editor-form { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px 20px; width:560px; min-width:320px; flex-shrink:1; max-height:calc(100vh - 80px); overflow-y:auto; overflow-x:hidden; box-sizing:border-box; }
.editor-form h3 { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:2px; color:var(--accent); margin-bottom:18px; }
@media(max-width:900px){ .editor-body { flex-direction:column; overflow-x:hidden; } .editor-form { width:100%; min-width:0; max-height:none; flex-shrink:1; } }
.form-group { margin-bottom:16px; }
.form-label { display:block; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.form-input,.form-select,.form-textarea { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:12px 14px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:15px; outline:none; transition:border-color .2s; -webkit-appearance:none; }
.form-textarea { resize:vertical; min-height:80px; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--accent); }
.form-select option { background:var(--surface2); }
.options-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.option-input-wrap { display:flex; align-items:center; gap:8px; }
.option-tag { font-family:'DM Mono',monospace; font-size:13px; font-weight:600; color:var(--accent); width:18px; flex-shrink:0; }
.correct-radio-group { display:flex; gap:10px; flex-wrap:wrap; }
.correct-radio { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:14px; color:var(--muted); padding:10px 16px; border:1px solid var(--border); border-radius:8px; transition:all .2s; min-height:44px; }
.correct-radio input { accent-color:var(--accent); width:16px; height:16px; }
.correct-radio:has(input:checked) { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); }

/* FIGURE UPLOAD — mobile first */
.figure-section { border:2px dashed var(--border); border-radius:12px; padding:20px; background:var(--surface2); }
.figure-section-title { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.figure-btns { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.fig-btn { flex:1; min-width:120px; padding:14px 10px; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:14px; text-align:center; cursor:pointer; border:none; min-height:50px; display:flex; align-items:center; justify-content:center; gap:6px; transition:opacity .2s; }
.fig-btn:active { opacity:.8; }
.fig-btn-gallery { background:var(--accent); color:var(--bg); }
.fig-btn-camera  { background:var(--accent2); color:var(--bg); }
.fig-url-row { display:flex; gap:8px; }
.fig-url-row input { flex:1; }
.fig-url-row button { background:var(--surface); border:1px solid var(--border); color:var(--text); padding:12px 16px; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:14px; cursor:pointer; white-space:nowrap; min-height:48px; }
.fig-url-row button:active { border-color:var(--accent); }
.figure-preview-box { margin-top:14px; border-radius:10px; overflow:hidden; border:1px solid var(--border); position:relative; text-align:center; background:var(--bg); }
.figure-preview-box img { max-width:100%; max-height:220px; display:block; margin:0 auto; object-fit:contain; }
.btn-remove-fig { position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; background:var(--danger); color:#fff; border:none; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:700; }
/* LaTeX quick-wrap toolbar */
.latex-toolbar {
  display:none; position:fixed; z-index:8000;
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:5px 6px; gap:5px;
  align-items:center; box-shadow:0 4px 20px rgba(0,0,0,.4);
  animation:fadeUp .15s ease both;
  pointer-events:auto;
}
.latex-toolbar.visible { display:flex; }
.ltx-btn {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:7px; color:var(--accent);
  font-family:'DM Mono',monospace; font-size:11px;
  letter-spacing:.5px; padding:5px 9px;
  cursor:pointer; transition:all .15s; white-space:nowrap;
  line-height:1.4;
}
.ltx-btn:hover { background:color-mix(in srgb,var(--accent) 15%,var(--surface2)); border-color:var(--accent); }
.ltx-btn.block { color:var(--accent2); border-color:var(--border); }
.ltx-btn.block:hover { background:color-mix(in srgb,var(--accent2) 15%,var(--surface2)); border-color:var(--accent2); }
.ltx-divider { width:1px; height:18px; background:var(--border); flex-shrink:0; }
.fig-gallery { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.fig-gallery-item { position:relative; width:90px; height:90px; border-radius:8px; overflow:hidden; border:1px solid var(--border); background:var(--bg); flex-shrink:0; }
.fig-gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.fig-gallery-item .fig-del { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:var(--danger); color:#fff; border:none; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:700; line-height:1; }
.fig-gallery-item .fig-gallery-remove { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:var(--danger); color:#fff; border:none; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:700; line-height:1; z-index:2; }
.fig-add-btn { width:90px; height:90px; border-radius:8px; border:2px dashed var(--border); background:var(--surface2); color:var(--muted); font-size:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
.fig-add-btn:hover { border-color:var(--accent); color:var(--accent); }
.fig-paste-hint { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--muted); margin-top:8px; text-align:center; }

.btn-add-q { background:var(--accent); color:var(--bg); border:none; padding:14px 20px; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:15px; cursor:pointer; width:100%; margin-top:8px; min-height:52px; transition:opacity .2s; }
.btn-add-q:active { opacity:.85; }
.btn-cancel-edit { background:transparent; border:1px solid var(--border); color:var(--muted); padding:8px 16px; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:13px; cursor:pointer; min-height:40px; }
.btn-cancel-edit:active { border-color:var(--danger); color:var(--danger); }

/* QUESTION LIST */
.saved-questions { width:500px; min-width:300px; flex-shrink:0; max-height:calc(100vh - 80px); overflow-y:auto; }
.editor-right-col { display:contents; }
.editor-resize-handle {
  width: 6px; min-width: 6px; flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  border-radius: 4px;
  position: relative;
  transition: background .15s;
  align-self: stretch;
  z-index: 10;
}
.editor-resize-handle::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 4px; height: 48px;
  background: var(--border);
  border-radius: 4px;
  transition: background .15s, height .15s;
}
.editor-resize-handle:hover::after,
.editor-resize-handle.dragging::after {
  background: var(--accent2);
  height: 72px;
}
.q-preview-panel { width:0; min-width:0; flex-shrink:0; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:0; overflow:hidden; display:flex; flex-direction:column; gap:14px; transition:width .25s ease, padding .25s ease; opacity:0; pointer-events:none; }
.q-preview-panel.visible { width:500px; min-width:400px; padding:20px; opacity:1; pointer-events:auto; overflow-y:auto; border-radius:14px; }
.q-preview-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--muted); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1.5px; text-align:center; gap:10px; padding:40px 20px; }
.q-preview-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; margin-bottom:4px; }
.q-preview-qtext { font-size:15px; font-weight:500; line-height:1.7; color:var(--text); }
.q-preview-opt { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:8px; border:1px solid var(--border); background:var(--surface2); font-size:14px; line-height:1.5; }
.q-preview-opt.correct { border-color:var(--accent2); background:color-mix(in srgb,var(--accent2) 10%,var(--surface2)); color:var(--accent2); }
.q-preview-opt-letter { font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:1px; flex-shrink:0; }
.q-preview-sol { font-size:13px; color:var(--muted); line-height:1.7; padding:12px 14px; background:var(--surface2); border-radius:8px; border-left:3px solid var(--accent); }
.q-preview-close { align-self:flex-end; background:none; border:1px solid var(--border); color:var(--muted); border-radius:8px; padding:4px 10px; font-size:12px; cursor:pointer; font-family:'DM Mono',monospace; letter-spacing:1px; }
.saved-item.previewing { border-color:var(--accent2); background:color-mix(in srgb,var(--accent2) 5%,var(--surface)); }
@media(max-width:1000px){ .q-preview-panel { display:none !important; } }
.saved-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.saved-header h3 { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:2px; }
.saved-count { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); }
.level-section-label { font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:2px; margin:18px 0 8px 2px; }
.saved-item { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:10px; display:flex; flex-direction:column; gap:10px; }
.saved-item.editing { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 4%,var(--surface)); }
.saved-item-content { display:flex; flex-direction:column; gap:10px; width:100%; }
.saved-item-top { display:flex; align-items:flex-start; gap:10px; }
.saved-item-left { flex:1; min-width:0; }
.saved-item-q { font-size:14px; color:var(--text); line-height:1.5; word-break:break-word; }
.saved-item-ans { font-size:12px; color:var(--accent2); margin-top:4px; }
.saved-item-fig { font-size:11px; color:var(--muted); margin-top:3px; }
.saved-item-images { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.saved-item-images img { height:80px; max-width:150px; border-radius:8px; object-fit:cover; border:1px solid var(--border); cursor:pointer; transition:transform .2s; }
.saved-item-images img:hover { transform:scale(1.05); }
.saved-thumb { width:48px; height:48px; border-radius:6px; object-fit:cover; border:1px solid var(--border); flex-shrink:0; }
.saved-item-actions { display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
/* BIG tap-friendly action buttons */
.btn-edit-q,.btn-del-q { width:44px; height:44px; border-radius:8px; border:1px solid var(--border); cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; background:var(--surface2); color:var(--muted); transition:all .2s; }
.btn-edit-q:active { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface2)); }
.btn-del-q:active  { border-color:var(--danger); color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,var(--surface2)); }

.empty-state { text-align:center; padding:28px; color:var(--muted); font-size:14px; border:1px dashed var(--border); border-radius:10px; }

/* TOAST */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px); background:var(--accent); color:var(--bg); padding:12px 22px; border-radius:10px; font-weight:600; font-size:14px; z-index:999; transition:transform .3s ease; white-space:nowrap; pointer-events:none; }
.toast.show { transform:translateX(-50%) translateY(0); }

/* ANIMATIONS */
@keyframes fadeDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(20px)}  to{opacity:1;transform:translateY(0)} }
@keyframes expand   { from{transform:scaleX(0)} to{transform:scaleX(1)} }
  /* Custom confirm dialog */
  .confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:10001; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeUp .2s ease both; }
  .confirm-box { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px 24px; max-width:360px; width:100%; text-align:center; }
  .confirm-icon { font-size:36px; margin-bottom:12px; }
  .confirm-msg { font-size:16px; font-weight:500; margin-bottom:6px; }
  .confirm-sub { font-size:13px; color:var(--muted); margin-bottom:24px; line-height:1.5; }
  .confirm-btns { display:flex; gap:10px; }
  .confirm-cancel { flex:1; background:transparent; border:1px solid var(--border); color:var(--text); padding:13px; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:15px; cursor:pointer; min-height:50px; }
  .confirm-ok { flex:1; background:var(--danger); border:none; color:#fff; padding:13px; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:600; font-size:15px; cursor:pointer; min-height:50px; }
  .confirm-cancel:active { border-color:var(--accent); color:var(--accent); }
  .confirm-ok:active { opacity:.85; }
  /* SOLUTION */
  .solution-screen { min-height:100vh; flex-direction:column; padding:0; }
  .solution-item { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:22px; margin-bottom:14px; }
  .solution-q-num { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:2px; color:var(--muted); margin-bottom:8px; }
  .solution-q-text { font-size:15px; font-weight:500; line-height:1.6; margin-bottom:12px; }
  .solution-answer-bar { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:14px; font-weight:500; }
  .solution-answer-bar.correct { background:color-mix(in srgb,var(--accent2) 12%,transparent); color:var(--accent2); border:1px solid var(--accent2); }
  .solution-answer-bar.wrong   { background:color-mix(in srgb,var(--danger) 12%,transparent);  color:var(--danger);  border:1px solid var(--danger); }
  .solution-divider { height:1px; background:var(--border); margin:12px 0; }
  .solution-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
  .solution-text { font-size:14px; line-height:1.8; color:var(--text); white-space:pre-wrap; }
  .solution-empty { font-size:13px; color:var(--muted); font-style:italic; }
  .solution-locked { text-align:center; padding:60px 20px; }
  .attempt-matrix-table { border-collapse:collapse; width:100%; font-size:12px; }
  .attempt-matrix-table th { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--muted); text-align:center; padding:6px 8px; border-bottom:2px solid var(--border); white-space:nowrap; }
  .attempt-matrix-table th.q-col { text-align:left; }
  .attempt-matrix-table td { text-align:center; padding:5px 8px; border-bottom:1px solid var(--border); color:var(--fg); vertical-align:middle; }
  .attempt-matrix-table td.q-col { text-align:left; font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .att-check { color:var(--accent2); font-weight:700; font-size:13px; }
  .att-cross { color:var(--danger); font-weight:700; font-size:13px; }
  .att-skip { color:var(--muted); font-size:12px; }
  .solution-locked .lock-icon { font-size:52px; margin-bottom:16px; }
  .solution-locked-title { font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:2px; margin-bottom:10px; }
/* ANALYTICS */
#analytics { min-height:100vh; flex-direction:column; padding:0; }
.analytics-header { background:var(--surface); border-bottom:1px solid var(--border); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; position:sticky; top:0; z-index:10; }
.analytics-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:3px; color:#a78bfa; }
.analytics-body { flex:1; display:flex; flex-direction:column; align-items:center; padding:24px 16px; gap:20px; }
.analytics-section { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 20px; max-width:860px; width:100%; }
.analytics-section-title { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; margin-bottom:16px; color:#a78bfa; }
.leaderboard-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; margin-bottom:8px; background:var(--surface2); border:1px solid var(--border); transition:all .2s; }
.leaderboard-row:hover { border-color:#a78bfa; }
.leaderboard-rank { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:1px; width:36px; text-align:center; flex-shrink:0; }
.leaderboard-rank.gold   { color:#f0c040; }
.leaderboard-rank.silver { color:#aab4c8; }
.leaderboard-rank.bronze { color:#cd7f32; }
.leaderboard-rank.other  { color:var(--muted); }
.leaderboard-info { flex:1; min-width:0; }
.leaderboard-name { font-size:15px; font-weight:600; }
.leaderboard-sub  { font-size:12px; color:var(--muted); margin-top:2px; font-family:'DM Mono',monospace; }
.leaderboard-score { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:1px; }
.leaderboard-you { border-color:#a78bfa !important; background:color-mix(in srgb,#a78bfa 8%,var(--surface2)) !important; }
.stat-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
@media(max-width:600px){ .stat-grid-4 { grid-template-columns:repeat(2,1fr); } }
.mini-stat { background:var(--surface2); border-radius:10px; padding:14px; text-align:center; border:1px solid var(--border); }
.mini-stat-val { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:1px; }
.mini-stat-lbl { font-size:11px; color:var(--muted); font-family:'DM Mono',monospace; letter-spacing:1px; margin-top:2px; }
.chart-wrap { width:100%; overflow-x:auto; }
canvas.progress-chart { width:100%; max-height:200px; }
.student-tab-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.student-tab { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:7px 14px; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1px; cursor:pointer; color:var(--muted); transition:all .2s; }
.student-tab.active { background:color-mix(in srgb,#a78bfa 15%,var(--surface2)); border-color:#a78bfa; color:#a78bfa; }
.topic-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.topic-bar-label { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1px; width:60px; flex-shrink:0; color:var(--muted); }
.topic-bar-track { flex:1; height:10px; background:var(--border); border-radius:5px; overflow:hidden; }
.topic-bar-fill { height:100%; border-radius:5px; transition:width .8s ease; }
.topic-bar-pct { font-family:'DM Mono',monospace; font-size:12px; width:40px; text-align:right; flex-shrink:0; }
.admin-student-card { background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:10px; cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:14px; }
.admin-student-card:hover { border-color:#a78bfa; transform:translateY(-2px); }
.admin-student-avatar { width:44px; height:44px; border-radius:50%; background:color-mix(in srgb,#a78bfa 20%,var(--surface)); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; border:2px solid #a78bfa; }
.admin-student-info { flex:1; min-width:0; }
.admin-student-name { font-size:15px; font-weight:600; }
.admin-student-code { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); margin-top:2px; }

/* ── VIDEO LECTURES ─────────────────────────────────────────── */
.vl-header { background:var(--surface); border-bottom:1px solid var(--border); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; position:sticky; top:0; z-index:10; }
.vl-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:3px; background:linear-gradient(135deg,#f59e0b,#f97316); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.vl-topic-select-wrap { display:flex; align-items:center; gap:6px; }
.vl-topic-select { background:var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1px; padding:8px 12px; cursor:pointer; }
.vl-body { flex:1; display:flex; flex-direction:row; align-items:flex-start; padding:20px 24px; gap:20px; overflow-x:clip; width:100%; box-sizing:border-box; }
@media(max-width:900px){ .vl-body { flex-direction:column; overflow-x:hidden; } }

/* Form panel */
.vl-form-panel { width:300px; flex-shrink:0; background:var(--surface2); border-radius:14px; padding:18px; border:1px solid var(--border); position:sticky; top:70px; max-height:calc(100vh - 90px); overflow-y:auto; }
@media(max-width:900px){ .vl-form-panel { width:100%; box-sizing:border-box; position:static; max-height:none; overflow-y:visible; } }
.vl-add-btn { width:100%; padding:11px; background:linear-gradient(135deg,#f59e0b,#f97316); color:#000; border:none; border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:13px; cursor:pointer; letter-spacing:.5px; transition:opacity .15s; }
.vl-add-btn:hover { opacity:.88; }
.vl-cancel-btn { background:none; border:1px solid var(--border); color:var(--muted); border-radius:8px; padding:6px 12px; font-size:12px; cursor:pointer; transition:all .2s; }
.vl-cancel-btn:hover { border-color:#f04060; color:#f04060; }

/* Grid */
.vl-grid-col { flex:1; min-width:0; }
.vl-grid-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.vl-grid-title { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; color:var(--text); }
.vl-grid-count { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:1px; }
.vl-empty { color:var(--muted); font-size:13px; padding:40px 0; text-align:center; }
.vl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
@media(max-width:600px){ .vl-grid { grid-template-columns:1fr; } }
#vlGrid { display:block; }

/* Card */
.vl-card { background:var(--surface2); border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; transition:transform .18s,border-color .18s,box-shadow .18s; display:flex; flex-direction:column; }
.vl-card:hover { transform:translateY(-3px); border-color:#f59e0b; box-shadow:0 6px 24px rgba(245,158,11,.15); }
.vl-card-watched { border-color:rgba(52,211,153,.35); }
.vl-card-watched:hover { border-color:#34d399; box-shadow:0 6px 24px rgba(52,211,153,.15); }
.vl-thumb-wrap { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#111; flex-shrink:0; }
.vl-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.vl-play-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:32px; color:#fff; opacity:0; background:rgba(0,0,0,.4); transition:opacity .18s; }
.vl-card:hover .vl-play-btn { opacity:1; }
.vl-watch-row { padding:8px 14px 10px; border-top:1px solid var(--border); }
.vl-watch-btn { width:100%; padding:7px; background:none; border:1px dashed var(--border); color:var(--muted); border-radius:8px; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1px; cursor:pointer; transition:all .18s; }
.vl-watch-btn:hover { border-color:#34d399; color:#34d399; }
.vl-watch-btn-done { background:rgba(52,211,153,.12); border:1px solid #34d399; color:#34d399; border-style:solid; }
.vl-topic-badge { position:absolute; top:8px; left:8px; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; padding:3px 8px; border-radius:6px; font-weight:700; }
.vl-badge-mstec { background:rgba(0,0,0,.72); color:#4af0b0; border:1px solid rgba(74,240,176,.6); }
.vl-badge-hge   { background:rgba(0,0,0,.72); color:#60a5fa; border:1px solid rgba(96,165,250,.6); }
.vl-badge-psad  { background:rgba(0,0,0,.72); color:#f04060; border:1px solid rgba(240,64,96,.6); }
.vl-badge-general { background:rgba(0,0,0,.72); color:#f59e0b; border:1px solid rgba(245,158,11,.6); }
.vl-card-info { padding:12px 14px 8px; flex:1; }
.vl-card-title { font-size:13px; font-weight:600; line-height:1.4; }
.vl-card-desc  { font-size:11px; color:var(--muted); margin-top:4px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vl-card-duration { font-family:'DM Mono',monospace; font-size:10px; color:#60a5fa; margin-top:5px; letter-spacing:.5px; }
.vl-duration-row { display:flex; align-items:center; gap:4px; }
.vl-duration-field { display:flex; flex-direction:column; align-items:center; gap:3px; }
.vl-dur-input { width:52px; text-align:center; font-family:'DM Mono',monospace; font-size:14px; letter-spacing:1px; padding:6px 4px !important; -moz-appearance:textfield; }
.vl-dur-input::-webkit-inner-spin-button, .vl-dur-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.vl-dur-label { font-family:'DM Mono',monospace; font-size:9px; color:var(--muted); letter-spacing:1px; }
.vl-dur-sep { font-size:18px; font-weight:700; color:var(--muted); margin-bottom:14px; line-height:1; }
.vl-cat-badge  { position:absolute; top:8px; right:8px; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; padding:3px 8px; border-radius:6px; font-weight:700; background:rgba(0,0,0,.72); }
.vl-cat-lecture  { color:#a78bfa; border:1px solid rgba(167,139,250,.6); }
.vl-cat-solution { color:#34d399; border:1px solid rgba(52,211,153,.6); }
.vl-part-badge { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.72); color:#f59e0b; border:1px solid rgba(245,158,11,.5); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; padding:3px 8px; border-radius:6px; font-weight:700; }
.vl-title-part { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; color:#f59e0b; font-weight:700; vertical-align:middle; }
.vl-card-actions { display:flex; gap:6px; padding:8px 14px 10px; border-top:1px solid var(--border); flex-wrap:wrap; }
.vl-card-drag-handle { cursor:grab; user-select:none; font-size:16px; color:var(--muted); padding:5px 9px; transition:color .15s; }
.vl-card-drag-handle:hover { color:#f59e0b; }
.vl-card.dragging { opacity:0.5; }
.vl-card.drag-over-left { border-left:3px solid var(--accent); }
.vl-card.drag-over-right { border-right:3px solid var(--accent); }
.vl-edit-btn { background:none; border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:5px 10px; font-size:11px; cursor:pointer; transition:all .15s; }
.vl-edit-btn:hover { border-color:#38bdf8; color:#38bdf8; }
.vl-del-btn  { background:none; border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:5px 10px; font-size:11px; cursor:pointer; transition:all .15s; margin-left:auto; }
.vl-del-btn:hover  { border-color:#f04060; color:#f04060; }

/* Accordion sections */
.vl-accordion-section { border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:10px; }
.vl-accordion-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; cursor:pointer; background:var(--surface2); user-select:none; transition:background .15s; }
.vl-accordion-header:hover { background:var(--surface); }
.vl-accordion-label { font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:2px; color:var(--text); display:flex; align-items:center; gap:10px; }
.vl-section-total-time { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.5px; color:#60a5fa; font-weight:600; background:rgba(96,165,250,.1); border:1px solid rgba(96,165,250,.25); border-radius:5px; padding:2px 7px; }
.vl-accordion-arrow { font-size:15px; color:var(--muted); transition:color .15s; }
.vl-accordion-header:hover .vl-accordion-arrow { color:var(--text); }
.vl-accordion-body { padding:16px; background:var(--surface); }

/* Player modal */
.vl-player-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; }
.vl-player-overlay.active { display:flex; }
.vl-player-modal { background:var(--surface); border-radius:16px; width:100%; max-width:860px; border:1px solid var(--border); overflow:hidden; display:flex; flex-direction:column; }
.vl-player-top { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); gap:12px; }
.vl-player-title { font-size:14px; font-weight:700; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vl-player-close { background:none; border:1px solid var(--border); color:var(--muted); border-radius:8px; padding:6px 12px; font-size:14px; cursor:pointer; transition:all .15s; flex-shrink:0; }
.vl-player-close:hover { border-color:#f04060; color:#f04060; }
.vl-player-embed-wrap { position:relative; width:100%; padding-top:56.25%; background:#000; }
.vl-player-embed-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.vl-player-desc { padding:12px 18px; font-size:12px; color:var(--muted); min-height:0; }
.vl-player-desc:empty { display:none; }

/* ── STUDY CALENDAR ────────────────────────────────────────────── */
.cal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.cal-header-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:2px; color:var(--text); }

.cal-body { display:flex; gap:20px; padding:20px; align-items:flex-start; max-width:1100px; margin:0 auto; width:100%; box-sizing:border-box; }
.cal-main-col { flex:1; min-width:0; }

/* Month navigation */
.cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-month-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:2px; color:var(--text); }
.cal-nav-btn { background:var(--surface2); border:1px solid var(--border); color:var(--text); border-radius:8px; width:36px; height:36px; font-size:20px; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; }
.cal-nav-btn:hover { border-color:#22d3ee; color:#22d3ee; }

/* Calendar grid */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-day-header { text-align:center; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--muted); padding:6px 2px; }
.cal-cell { min-height:62px; border-radius:8px; border:1px solid var(--border); background:var(--surface2); cursor:pointer; padding:6px 6px 4px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; position:relative; transition:border-color .15s, background .15s; }
.cal-cell:hover { border-color:#22d3ee; background:var(--surface); }
.cal-cell-empty { background:transparent; border-color:transparent; cursor:default; }
.cal-cell-empty:hover { background:transparent; border-color:transparent; }
.cal-cell-today { border-color:#22d3ee !important; box-shadow:0 0 0 1px #22d3ee33; }
.cal-cell-today .cal-day-num { color:#22d3ee; font-weight:700; }
.cal-cell-selected { background:color-mix(in srgb,#22d3ee 10%,var(--surface2)) !important; border-color:#22d3ee !important; }
.cal-cell-done { background:color-mix(in srgb,#34d399 8%,var(--surface2)); }
.cal-cell-partial { background:color-mix(in srgb,#f59e0b 8%,var(--surface2)); }
.cal-cell-pending { background:color-mix(in srgb,#60a5fa 8%,var(--surface2)); }
.cal-day-num { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); line-height:1; }

/* Status badges on cells */
.cal-cell-time { font-family:'DM Mono',monospace; font-size:9px; color:#60a5fa; letter-spacing:.3px; margin-top:2px; text-align:center; }
.cal-badge { font-family:'DM Mono',monospace; font-size:10px; padding:2px 6px; border-radius:5px; font-weight:600; letter-spacing:.5px; white-space:nowrap; display:flex; align-items:center; gap:2px; }
.cal-badge-done    { background:rgba(52,211,153,.18); color:#34d399; border:1px solid rgba(52,211,153,.3); }
.cal-badge-partial { background:rgba(245,158,11,.18); color:#f59e0b; border:1px solid rgba(245,158,11,.3); }
.cal-badge-pending { background:rgba(96,165,250,.18); color:#60a5fa; border:1px solid rgba(96,165,250,.3); }

/* Legend */
.cal-legend { display:flex; gap:14px; margin-top:12px; flex-wrap:wrap; }
.cal-legend-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); font-family:'DM Mono',monospace; }

/* Day detail panel */
.cal-day-panel { width:340px; flex-shrink:0; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.cal-day-header-row { display:flex; align-items:flex-start; justify-content:space-between; padding:14px 16px 12px; border-bottom:1px solid var(--border); gap:8px; }
.cal-day-date { font-size:13px; font-weight:700; line-height:1.35; color:var(--text); }
.cal-close-btn { background:none; border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:4px 10px; font-size:13px; cursor:pointer; flex-shrink:0; transition:all .15s; }
.cal-close-btn:hover { border-color:#f04060; color:#f04060; }

.cal-day-total-time { font-family:'DM Mono',monospace; font-size:11px; color:#60a5fa; background:rgba(96,165,250,.1); border-bottom:1px solid var(--border); padding:6px 16px; letter-spacing:.5px; font-weight:600; }
.cal-day-videos { display:flex; flex-direction:column; gap:10px; padding:14px 14px 10px; max-height:420px; overflow-y:auto; }
.cal-no-videos { color:var(--muted); font-size:12px; text-align:center; padding:12px 0; }

/* Video item in day panel */
.cal-video-item { display:flex; gap:10px; align-items:flex-start; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px; position:relative; transition:border-color .15s; }
.cal-video-item:hover { border-color:#22d3ee; }
.cal-video-watched { border-color:rgba(52,211,153,.35); }
.cal-video-watched:hover { border-color:#34d399; }
.cal-video-thumb { width:88px; height:52px; object-fit:cover; border-radius:6px; flex-shrink:0; cursor:pointer; }
.cal-video-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.cal-video-title { font-size:12px; font-weight:600; line-height:1.35; cursor:pointer; }
.cal-video-title:hover { color:#22d3ee; }
.cal-video-meta { font-size:10px; color:var(--muted); font-family:'DM Mono',monospace; letter-spacing:.5px; }
.cal-video-part { color:var(--muted); font-size:10px; font-family:'DM Mono',monospace; }
.cal-remove-btn { position:absolute; top:6px; right:6px; background:none; border:none; color:var(--muted); font-size:13px; cursor:pointer; line-height:1; padding:2px 4px; border-radius:4px; transition:color .15s; }
.cal-remove-btn:hover { color:#f04060; }

/* Admin: add video section */
.cal-add-section { padding:12px 14px 14px; border-top:1px solid var(--border); }
.cal-add-title { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--muted); margin-bottom:8px; text-transform:uppercase; }
.cal-search-input { width:100%; box-sizing:border-box; padding:9px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:13px; font-family:'DM Sans',sans-serif; outline:none; transition:border-color .15s; }
.cal-search-input:focus { border-color:#22d3ee; }
.cal-search-results { margin-top:8px; display:flex; flex-direction:column; gap:6px; max-height:200px; overflow-y:auto; }
.cal-search-item { display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px; border:1px solid var(--border); background:var(--surface2); cursor:pointer; transition:border-color .15s, background .15s; }
.cal-search-item:hover { border-color:#22d3ee; background:var(--surface); }
.cal-search-thumb { width:52px; height:30px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.cal-search-text { flex:1; min-width:0; }
.cal-search-title { font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-search-meta { font-size:10px; color:var(--muted); font-family:'DM Mono',monospace; letter-spacing:.5px; }
.cal-search-add { color:#22d3ee; font-size:18px; font-weight:300; flex-shrink:0; line-height:1; }
.cal-search-empty { color:var(--muted); font-size:11px; text-align:center; padding:8px 0; }

/* Responsive: stack on mobile */
@media(max-width:700px){
  .cal-body { flex-direction:column; padding:14px; }
  .cal-day-panel { width:100%; }
  .cal-cell { min-height:48px; padding:4px; }
  .cal-badge { font-size:9px; padding:1px 4px; }
}

/* ── Payment lock styles ── */
.tab-locked {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
  user-select: none;
}
.level-card.tab-locked {
  position: relative;
}
.level-card.tab-locked::after {
  content: '🔒';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  pointer-events: none;
  z-index: 1;
}