:root {
      --bg: #f3f6fb;
      --panel: #ffffff;
      --panel-soft: #f8fbff;
      --line: #dbe4f0;
      --line-strong: #c8d5e8;
      --text: #182335;
      --text-soft: #516079;
      --text-faint: #7b8aa5;
      --primary: #2f6fed;
      --primary-soft: #eaf1ff;
      --success: #1f9d62;
      --success-soft: #eaf8f1;
      --danger: #d84d63;
      --danger-soft: #fff0f3;
      --warning: #c58a11;
      --warning-soft: #fff7e7;
      --purple: #6f5ae8;
      --purple-soft: #f1eeff;
      --radius: 18px;
      --radius-sm: 14px;
      --shadow-sm: 0 10px 24px rgba(16,24,40,.06);
      --shadow-md: 0 18px 40px rgba(16,24,40,.10);
      --sidebar-w: 300px;
      --header-h: 84px;
      --mobile-nav-h: 72px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(47,111,237,.08), transparent 26%),
        linear-gradient(180deg, #f8fafd 0%, #edf3f9 100%);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    button, input { font: inherit; }
    .app {
      display: grid;
      grid-template-columns: var(--sidebar-w) 1fr;
      min-height: 100vh;
    }
    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: auto;
      padding: 18px;
      background: rgba(255,255,255,.84);
      backdrop-filter: blur(16px);
      border-right: 1px solid rgba(201,212,229,.7);
    }
    .brand {
      padding: 18px;
      border-radius: 22px;
      background: linear-gradient(135deg, rgba(47,111,237,.10), rgba(111,90,232,.07)), #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-md);
      margin-bottom: 16px;
    }
    .brand h1 {
      margin: 0 0 8px;
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: -.02em;
    }
    .brand p {
      margin: 0;
      color: var(--text-soft);
      font-size: 13px;
      line-height: 1.55;
    }
    .progress-card {
      padding: 16px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
      box-shadow: var(--shadow-sm);
      margin-bottom: 14px;
    }
    .progress-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 10px;
    }
    .progress-top strong { font-size: 14px; }
    .progress-top span { font-size: 18px; font-weight: 800; color: var(--primary); }
    .track {
      height: 10px;
      width: 100%;
      overflow: hidden;
      border-radius: 999px;
      background: #e7eef8;
    }
    .fill {
      width: 0%;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #4f86ff, #2fb673);
      transition: width .25s ease;
    }
    .meta-list {
      margin-top: 10px;
      display: grid;
      gap: 6px;
      color: var(--text-soft);
      font-size: 12px;
      line-height: 1.45;
    }
    .menu-title {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .14em;
      color: var(--text-faint);
      margin: 18px 10px 10px;
    }
    .menu {
      display: grid;
      gap: 8px;
    }
    .menu-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      padding: 12px 13px;
      text-align: left;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 14px;
      cursor: pointer;
      color: var(--text);
      transition: .18s ease;
      box-shadow: 0 2px 8px rgba(15,23,42,.03);
    }
    .menu-btn:hover { transform: translateX(2px); border-color: #bfd0f2; background: #f8fbff; }
    .menu-btn.active { background: var(--primary-soft); border-color: rgba(47,111,237,.22); color: var(--primary); }
    .menu-btn.done { background: rgba(31,157,98,.08); border-color: rgba(31,157,98,.20); }
    .menu-btn.locked { opacity: .6; filter: grayscale(.1); }
    .menu-label { min-width: 0; }
    .menu-label b { display:block; font-size: 14px; line-height: 1.2; }
    .menu-label small { display:block; margin-top: 3px; font-size: 11px; color: var(--text-faint); }
    .menu-pill {
      flex: 0 0 auto;
      padding: 6px 9px;
      border-radius: 999px;
      background: #f3f6fb;
      color: var(--text-soft);
      border: 1px solid var(--line);
      font-size: 11px;
      font-weight: 800;
    }

    .main {
      min-width: 0;
      padding: calc(var(--header-h) + 18px) 24px 36px;
    }
    .topbar {
      position: fixed;
      top: 0;
      left: var(--sidebar-w);
      right: 0;
      z-index: 50;
      padding: 14px 20px;
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(16px);
      box-shadow: 0 12px 28px rgba(16,24,40,.06);
    }
    .topbar-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
    }
    .topbar-title {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .topbar-title h2 {
      margin: 0;
      font-size: 17px;
      line-height: 1.2;
      letter-spacing: -.02em;
    }
    .topbar-title small {
      color: var(--text-soft);
      font-size: 12px;
    }
    .mode-switch {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .mode-btn {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text-soft);
      border-radius: 999px;
      padding: 10px 14px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
      transition: .18s ease;
    }
    .mode-btn.active {
      background: var(--primary-soft);
      color: var(--primary);
      border-color: rgba(47,111,237,.20);
    }

    .hero {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 18px;
      margin-bottom: 18px;
    }
    .hero-card, .stats-card, .toolbar, .section-card, .entry-card, .quiz-shell, .mini-card, .modal-card {
      border: 1px solid rgba(219,227,239,.95);
      background: rgba(255,255,255,.94);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
    }
    .hero-card {
      padding: 24px;
      background: linear-gradient(135deg, rgba(47,111,237,.06), rgba(111,90,232,.05)), #fff;
    }
    .hero-card h3 {
      margin: 0 0 12px;
      font-size: 29px;
      line-height: 1.08;
      letter-spacing: -.03em;
    }
    .hero-card p { margin: 0; color: var(--text-soft); line-height: 1.7; }
    .stats-card {
      padding: 16px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    .stat {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    }
    .stat b {
      display: block;
      font-size: 25px;
      line-height: 1;
      margin-bottom: 6px;
      letter-spacing: -.03em;
    }
    .stat span { font-size: 12px; color: var(--text-soft); line-height: 1.4; }

    .toolbar {
      position: sticky;
      top: calc(var(--header-h) + 12px);
      z-index: 30;
      padding: 14px;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto auto auto auto;
      gap: 10px;
      align-items: center;
      margin-bottom: 18px;
    }
    .search {
      width: 100%;
      padding: 13px 15px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #fbfcfe;
      outline: none;
      color: var(--text);
      transition: .18s ease;
    }
    .search:focus {
      border-color: rgba(47,111,237,.25);
      box-shadow: 0 0 0 4px rgba(47,111,237,.08);
      background: #fff;
    }
    .chip {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text-soft);
      padding: 11px 14px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
      transition: .18s ease;
    }
    .chip.active { background: var(--primary-soft); color: var(--primary); border-color: rgba(47,111,237,.20); }

    .section-card {
      padding: 18px;
      margin-bottom: 18px;
    }
    .section-header {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      padding-bottom: 12px;
      margin-bottom: 14px;
      border-bottom: 1px solid #edf2f7;
    }
    .section-header h3 {
      margin: 0;
      font-size: 22px;
      line-height: 1.2;
      letter-spacing: -.02em;
    }
    .section-header p {
      margin: 6px 0 0;
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.6;
    }
    .count {
      white-space: nowrap;
      color: var(--text-faint);
      font-size: 12px;
      font-weight: 700;
    }
    .section-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    .section-btn {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 999px;
      padding: 10px 13px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
      color: var(--text-soft);
    }
    .section-btn.primary {
      background: var(--primary-soft);
      color: var(--primary);
      border-color: rgba(47,111,237,.20);
    }
    .section-progress {
      margin-top: 14px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, #fff 0%, #f9fbfd 100%);
    }
    .section-progress-top {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:8px;
      font-size:12px;
      color:var(--text-soft);
    }

    .entry-list {
      display: grid;
      gap: 14px;
    }
    .entry-card {
      overflow: hidden;
      transition: .18s ease;
    }
    .entry-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--line-strong);
    }
    .entry-card.is-read {
      border-color: rgba(31,157,98,.24);
      box-shadow: 0 0 0 1px rgba(31,157,98,.05);
    }
    .entry-top {
      padding: 18px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: start;
      cursor: pointer;
      background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    }
    .entry-top h4 {
      margin: 0 0 8px;
      font-size: 18px;
      line-height: 1.45;
      letter-spacing: -.01em;
    }
    .entry-top p {
      margin: 0;
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.65;
    }
    .entry-body {
      display: none;
      padding: 0 18px 18px;
      border-top: 1px solid #edf2f7;
      background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,1));
    }
    .entry-card.open .entry-body { display: block; }
    .entry-toggle {
      padding: 10px 14px;
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary);
      border: 1px solid rgba(47,111,237,.18);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .entry-top.is-read .entry-toggle {
      background: var(--success-soft);
      color: var(--success);
      border-color: rgba(31,157,98,.20);
    }
    .meta {
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:10px;
    }
    .tag {
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .03em;
    }
    .tag.green { color: var(--success); background: var(--success-soft); border-color: rgba(31,157,98,.16); }
    .tag.red { color: var(--danger); background: var(--danger-soft); border-color: rgba(216,77,99,.16); }
    .tag.yellow { color: var(--warning); background: var(--warning-soft); border-color: rgba(197,138,17,.16); }
    .tag.blue { color: var(--primary); background: var(--primary-soft); border-color: rgba(47,111,237,.16); }
    .tag.purple { color: var(--purple); background: var(--purple-soft); border-color: rgba(111,90,232,.16); }
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 16px;
    }
    .box {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 16px;
      background: linear-gradient(180deg, #fff 0%, #f9fbfd 100%);
    }
    .box h5 {
      margin: 0 0 8px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .box p {
      margin: 0;
      font-size: 14px;
      line-height: 1.7;
    }
    .box.green h5 { color: var(--success); }
    .box.red h5 { color: var(--danger); }
    .box.yellow h5 { color: var(--warning); }
    .box.blue h5 { color: var(--primary); }
    .box.purple h5 { color: var(--purple); }
    .entry-footer {
      margin-top: 14px;
      display:flex;
      justify-content: space-between;
      gap: 10px;
      align-items:center;
      flex-wrap: wrap;
    }
    .read-chip {
      font-size: 11px;
      font-weight: 800;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--text-soft);
      background: #fff;
    }
    .read-chip.done {
      color: var(--success);
      background: var(--success-soft);
      border-color: rgba(31,157,98,.18);
    }

    .quiz-shell {
      padding: 20px;
    }
    .quiz-shell h3 {
      margin: 0 0 10px;
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -.02em;
    }
    .quiz-toolbar {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 12px;
      align-items: center;
      margin-bottom: 16px;
    }
    .quiz-question {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, #fff 0%, #f9fbfd 100%);
      margin-bottom: 12px;
    }
    .quiz-question h4 {
      margin: 0 0 8px;
      font-size: 17px;
      line-height: 1.55;
    }
    .quiz-question p {
      margin: 0 0 12px;
      color: var(--text-soft);
      line-height: 1.65;
      font-size: 14px;
    }
    .quiz-option {
      display: block;
      margin: 8px 0;
      padding: 13px 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #fff;
      cursor: pointer;
      transition: .16s ease;
    }
    .quiz-option:hover { background: #f8fbff; border-color: #bfd0f2; }
    .btn {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      padding: 12px 16px;
      border-radius: 14px;
      cursor: pointer;
      font-weight: 800;
      transition: .18s ease;
    }
    .btn:hover { background: #f8fbff; border-color: #bfd0f2; }
    .btn.primary {
      background: linear-gradient(135deg, rgba(47,111,237,.12), rgba(47,182,115,.12));
      border-color: rgba(47,111,237,.22);
      color: #1a4fbe;
    }
    .btn.success {
      background: linear-gradient(135deg, rgba(31,157,98,.12), rgba(47,182,115,.12));
      border-color: rgba(31,157,98,.22);
      color: var(--success);
    }
    .quiz-result {
      display: none;
      margin-top: 16px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, #fff 0%, #f9fbfd 100%);
    }
    .quiz-result.show { display: block; }
    .quiz-review { display: none; margin-top: 18px; }
    .quiz-review.show { display: block; }
    .score {
      font-size: 34px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -.03em;
    }
    .mini-grid {
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 14px;
    }
    .mini-card {
      padding: 14px;
      background: linear-gradient(180deg, #fff 0%, #f9fbfd 100%);
    }
    .mini-card b { display:block; font-size: 20px; margin-bottom: 4px; }
    .mini-card span { color: var(--text-soft); font-size: 12px; }
    .review-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 16px 18px;
      margin-top: 12px;
    }
    .review-card.correct { border-left: 5px solid var(--success); }
    .review-card.wrong { border-left: 5px solid var(--danger); }
    .review-card.unanswered { border-left: 5px solid var(--warning); }
    .review-card h5 {
      margin: 0 0 10px;
      font-size: 15px;
      line-height: 1.55;
    }
    .review-line {
      margin: 6px 0;
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.6;
    }
    .review-line strong { color: var(--text); }
    .review-expl {
      margin-top: 10px;
      padding: 12px 14px;
      border-radius: 12px;
      background: #eef5ff;
      border: 1px solid #d8e6ff;
      line-height: 1.65;
      color: #24436f;
      font-size: 14px;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(17,24,39,.44);
      backdrop-filter: blur(6px);
      display: none;
      z-index: 80;
    }
    .modal-backdrop.show { display: block; }
    .mobile-drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(92vw, 390px);
      background: rgba(255,255,255,.98);
      backdrop-filter: blur(16px);
      box-shadow: -10px 0 32px rgba(16,24,40,.12);
      transform: translateX(100%);
      transition: transform .24s ease;
      z-index: 90;
      overflow: auto;
      padding: 18px;
    }
    .mobile-drawer.show { transform: translateX(0); }
    .mobile-drawer-head {
      display:flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 14px;
    }
    .mobile-fab {
      position: fixed;
      right: 18px;
      bottom: calc(var(--mobile-nav-h) + 16px);
      z-index: 70;
      display: none;
      border: 0;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2f6fed, #6f5ae8);
      color: #fff;
      box-shadow: 0 14px 34px rgba(47,111,237,.35);
      font-size: 22px;
      cursor: pointer;
    }
    .mobile-bottom {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: var(--mobile-nav-h);
      z-index: 60;
      display: none;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(16px);
      border-top: 1px solid var(--line);
      box-shadow: 0 -8px 24px rgba(16,24,40,.08);
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    .mobile-bottom button {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text-soft);
      border-radius: 14px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .hidden { display: none !important; }
    .footer-note {
      margin-top: 20px;
      padding: 16px;
      border: 1px dashed #cfd9e7;
      border-radius: 16px;
      color: var(--text-soft);
      background: #fbfcfe;
      line-height: 1.7;
      font-size: 14px;
    }


    .mobile-compact-head {
      display: none;
      position: sticky;
      top: 10px;
      z-index: 35;
      margin-bottom: 14px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(16px);
      box-shadow: 0 10px 28px rgba(16,24,40,.06);
    }
    .mobile-compact-top {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .mobile-compact-title { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
    .mobile-compact-meta { font-size: 12px; color: var(--text-soft); }
    .mobile-compact-actions {
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap:8px;
    }
    .mobile-compact-actions button {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text-soft);
      border-radius: 999px;
      min-height: 42px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }
    .mobile-compact-actions button.active {
      background: var(--primary-soft);
      color: var(--primary);
      border-color: rgba(47,111,237,.20);
    }
    .mobile-drawer-tools {
      display:none;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }
    .mobile-drawer-tools h4 {
      margin: 0 0 10px;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--text-faint);
    }
    .mobile-drawer-search {
      width: 100%;
      min-height: 48px;
      margin-bottom: 12px;
    }
    .mobile-chip-grid {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:8px;
    }
    .mobile-chip-grid .chip {
      text-align:center;
      padding: 12px 10px;
    }


    .insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
    .insight-card{border:1px solid #e5e7eb;border-radius:16px;padding:14px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)}
    .insight-card b{display:block;font-size:13px;margin-bottom:6px;color:#334155}
    .analytics-card{margin-top:16px;border:1px solid #dbe3ef;border-radius:18px;padding:16px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);box-shadow:0 6px 18px rgba(15,23,42,.04)}
    .analytics-card h4{margin:0 0 12px;font-size:15px;color:#0f172a}
    .analytics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
    .analytics-metric{border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:#fff}
    .analytics-metric b{display:block;font-size:20px;color:#0f172a;margin-bottom:4px}
    .analytics-metric span{font-size:12px;color:#64748b;line-height:1.4}
    .analytics-list{margin:12px 0 0;padding-left:18px;color:#334155}
    .analytics-list li{margin:6px 0;line-height:1.5}
    .analytics-muted{color:#64748b;font-size:13px;line-height:1.55}
    .signal-badge{display:inline-block;padding:7px 10px;border-radius:999px;border:1px solid #dbe3ef;background:#fff;font-size:12px;font-weight:800;color:#334155;margin:0 8px 8px 0}

    @media (max-width: 1180px) {
      .hero { grid-template-columns: 1fr; }
      .toolbar { grid-template-columns: 1fr repeat(4, auto); }
      .topbar-grid { grid-template-columns: 1fr; }
      .mode-switch { justify-content: flex-start; }
    }
    @media (max-width: 980px) {
      .app { grid-template-columns: 1fr; }
      .sidebar, .topbar, .toolbar, .hero, .footer-note, .mobile-fab { display: none !important; }
      .main { padding: 12px 12px calc(var(--mobile-nav-h) + 22px); }
      .mobile-compact-head { display: block; }
      .grid { grid-template-columns: 1fr; }
      .mini-grid { grid-template-columns: repeat(2, 1fr); }
      .mobile-bottom { display: grid; }
      .mobile-drawer-tools { display: block; }
      .mobile-drawer {
        width: min(88vw, 360px);
        padding: 16px 14px calc(20px + env(safe-area-inset-bottom, 0px));
      }
      .section-card {
        padding: 14px;
        margin-bottom: 14px;
        border-radius: 16px;
      }
      .section-header {
        display:block;
        margin-bottom: 12px;
        padding-bottom: 10px;
      }
      .section-header h3 { font-size: 20px; }
      .section-header p { font-size: 13px; line-height: 1.5; }
      .count { display:block; margin-top: 8px; }
      .entry-top {
        grid-template-columns: 1fr;
        padding: 15px;
        gap: 10px;
      }
      .entry-top h4 { font-size: 16px; line-height: 1.42; }
      .entry-top p { font-size: 13px; line-height: 1.55; }
      .entry-body { padding: 0 15px 15px; }
      .meta { gap: 6px; }
      .tag { font-size: 11px; padding: 6px 9px; }
      .section-actions { display:none; }
      .section-progress { padding: 12px; border-radius: 14px; }
      .quiz-shell { padding: 14px; border-radius: 16px; }
      .quiz-topbar { grid-template-columns: 1fr; }
      .quiz-question { padding: 14px; }
      .quiz-question h4 { font-size: 16px; line-height: 1.45; }
      .quiz-option { padding: 12px; }
    }
    @media (max-width: 640px) {
      .main { padding-left: 10px; padding-right: 10px; }
      .stats-card, .mini-grid { grid-template-columns: 1fr 1fr; }
      .box { padding: 13px; border-radius: 14px; }
      .box h5 { font-size: 12px; }
      .box p, .box small { font-size: 13px; line-height: 1.55; }
      .mobile-bottom {
        gap: 6px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
      }
      .mobile-bottom button {
        border-radius: 12px;
        font-size: 11px;
        min-height: 46px;
      }
      .mobile-compact-head {
        top: 8px;
        padding: 10px 12px;
        border-radius: 16px;
      }
      .mobile-compact-title { font-size: 15px; }
      .mobile-compact-actions button { min-height: 40px; font-size: 11px; }
      .mobile-chip-grid { grid-template-columns: 1fr; }
    }
  
    .copilot-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}
    .copilot-box{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
    .copilot-box h3{margin:0 0 12px;font-size:20px}
    .copilot-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .copilot-field label{display:block;font-size:12px;font-weight:700;color:#64748b;margin-bottom:6px}
    .copilot-field select,.copilot-field textarea{width:100%;border:1px solid #dbe3ef;border-radius:12px;padding:12px;background:#f8fafc;font:inherit}
    .copilot-field textarea{min-height:88px;resize:vertical}
    .copilot-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
    .copilot-btn{border:none;border-radius:12px;padding:12px 14px;font-weight:800;cursor:pointer}
    .copilot-btn.primary{background:#2563eb;color:#fff}
    .copilot-btn.secondary{background:#eef2ff;color:#3730a3}
    .copilot-output .pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:12px;font-weight:800;margin:0 8px 8px 0}
    .copilot-output .block{border:1px solid #e5e7eb;border-radius:14px;padding:14px;margin-top:12px;background:#fcfdff}
    .copilot-output .block h4{margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:#475569}
    .copilot-output .block p,.copilot-output .block li{font-size:14px;line-height:1.6;color:#0f172a}
    .copilot-output ul{margin:0;padding-left:18px}
    .copilot-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
    .copilot-mini .mini{border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:#fff}
    .copilot-mini .mini b{display:block;font-size:13px;margin-bottom:6px;color:#334155}
    @media (max-width: 900px){
      .copilot-shell,.copilot-grid,.copilot-mini{grid-template-columns:1fr}
    }


    .mode-switch{display:flex;gap:10px;flex-wrap:wrap}
    .mobile-compact-actions{display:flex;gap:8px;flex-wrap:wrap}
    @media (max-width: 768px){
      .mode-switch .mode-btn{font-size:11px;padding:9px 12px}
      .mobile-compact-actions .mobile-mode-btn{font-size:11px;padding:10px 12px}
      .mobile-bottom{grid-template-columns: repeat(5, 1fr);}
      .mobile-bottom button{font-size:11px}
    }


    .answers-shell{display:grid;grid-template-columns:330px 1fr;gap:16px}
    .answers-panel,.answers-output{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
    .answers-panel h3,.answers-output h3{margin:0 0 12px;font-size:20px}
    .answers-search{width:100%;border:1px solid #dbe3ef;border-radius:12px;padding:12px;background:#f8fafc;font:inherit}
    .answers-meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
    .answers-pill{display:inline-block;padding:7px 10px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:12px;font-weight:800}
    .answers-list{max-height:62vh;overflow:auto;display:flex;flex-direction:column;gap:8px}
    .answers-item{border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:#fcfdff;cursor:pointer;transition:.15s}
    .answers-item:hover,.answers-item.active{border-color:#93c5fd;background:#eff6ff}
    .answers-item b{display:block;font-size:13px;color:#1e293b;margin-bottom:4px}
    .answers-item small{display:block;color:#64748b;line-height:1.45}
    .answers-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
    .answers-select{border:1px solid #dbe3ef;border-radius:12px;padding:10px 12px;background:#f8fafc;font:inherit}
    .answers-card{border:1px solid #e5e7eb;border-radius:16px;padding:14px;background:#fcfdff;margin-top:12px}
    .answers-card h4{margin:0 0 8px;font-size:15px;color:#334155}
    .responses-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .tech-box{border:1px solid #e5e7eb;border-radius:16px;padding:14px;background:#fff}
    .tech-box h5{margin:0 0 10px;font-size:14px;color:#0f172a}
    .tech-box ol{margin:0;padding-left:18px}
    .tech-box li{margin:6px 0;color:#334155;line-height:1.55}
    .copy-btn{border:none;border-radius:10px;padding:10px 12px;font-weight:800;background:#2563eb;color:#fff;cursor:pointer}
    .copy-btn.secondary{background:#eef2ff;color:#3730a3}
    .answers-empty{color:#64748b;line-height:1.6}
    .copy-toast{position:fixed;right:18px;bottom:90px;z-index:99999;background:#0f172a;color:#fff;padding:10px 14px;border-radius:999px;font-size:12px;font-weight:800;display:none}
    .copy-toast.show{display:block}
    @media (max-width: 980px){
      .answers-shell{grid-template-columns:1fr}
      .responses-grid{grid-template-columns:1fr}
      .answers-list{max-height:none}
      .answers-panel,.answers-output{padding:14px}
    }