/* LINGUA/OS · styles, animations, themes */
    /* ============================================================
       LINGUA/OS · zero-dependency design system
       Apple minimalism × developer terminal
       ============================================================ */
    :root {
      --bg: #09090b;
      --bg-deep: #060709;
      --surface: rgba(17, 19, 23, 0.74);
      --surface-solid: #101216;
      --surface-soft: rgba(255, 255, 255, 0.035);
      --line: rgba(255, 255, 255, 0.08);
      --line-soft: rgba(255, 255, 255, 0.055);
      --line-cyan: rgba(var(--accent-rgb), 0.2);
      --accent-rgb: 34, 211, 238;
      --accent-deep-rgb: 6, 182, 212;
      --accent2-rgb: 16, 185, 129;
      --accent2-bright-rgb: 52, 211, 153;
      --accent-light: #67e8f9;
      --accent-pale: #a5f3fc;
      --accent-deep: #0891b2;
      --accent-2-pale: #99f6e4;
      --accent-2-light: #6ee7b7;
      --button-text: #041014;
      --cyan: #06b6d4;
      --cyan-bright: #22d3ee;
      --cyan-soft: rgba(var(--accent-rgb), 0.1);
      --emerald: #10b981;
      --emerald-bright: #34d399;
      --emerald-soft: rgba(var(--accent2-rgb), 0.1);
      --danger: #fb7185;
      --danger-soft: rgba(251, 113, 133, 0.09);
      --amber: #fbbf24;
      --text: #f4f4f5;
      --text-soft: #c9c9d0;
      --muted: #a1a1aa;
      --dim: #71717a;
      --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
      --mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
      --radius-xl: 30px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --shadow-card: 0 30px 80px -48px rgba(var(--accent-deep-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.045);
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    html[data-theme="cyber"] {
      --bg: #0b0612;
      --bg-deep: #07030c;
      --surface: rgba(27, 16, 38, 0.78);
      --surface-solid: #160d22;
      --surface-soft: rgba(244, 114, 182, 0.04);
      --line: rgba(244, 114, 182, 0.12);
      --line-soft: rgba(244, 114, 182, 0.07);
      --line-cyan: rgba(244, 114, 182, 0.25);
      --accent-rgb: 244, 114, 182;
      --accent-deep-rgb: 192, 38, 211;
      --accent2-rgb: 139, 92, 246;
      --accent2-bright-rgb: 167, 139, 250;
      --accent-light: #f9a8d4;
      --accent-pale: #fbcfe8;
      --accent-deep: #a21caf;
      --accent-2-pale: #ddd6fe;
      --accent-2-light: #c4b5fd;
      --button-text: #1a0616;
      --cyan: #c026d3;
      --cyan-bright: #f472b6;
      --cyan-soft: rgba(244, 114, 182, 0.12);
      --emerald: #7c3aed;
      --emerald-bright: #a78bfa;
      --emerald-soft: rgba(139, 92, 246, 0.12);
      --text: #faf5ff;
      --text-soft: #e9d5ff;
      --muted: #c4b5fd;
      --dim: #8b7aa8;
      --shadow-card: 0 30px 80px -48px rgba(244, 114, 182, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    html[data-theme="hacker"] {
      --bg: #020604;
      --bg-deep: #010302;
      --surface: rgba(6, 20, 11, 0.82);
      --surface-solid: #06130b;
      --surface-soft: rgba(0, 255, 102, 0.035);
      --line: rgba(0, 255, 102, 0.16);
      --line-soft: rgba(0, 255, 102, 0.09);
      --line-cyan: rgba(0, 255, 102, 0.26);
      --accent-rgb: 0, 255, 102;
      --accent-deep-rgb: 0, 190, 76;
      --accent2-rgb: 0, 255, 136;
      --accent2-bright-rgb: 130, 255, 180;
      --accent-light: #a3ffc7;
      --accent-pale: #d9ffe8;
      --accent-deep: #00a844;
      --accent-2-pale: #c9ffe0;
      --accent-2-light: #82ffb4;
      --button-text: #001b0a;
      --cyan: #00ff66;
      --cyan-bright: #82ffb4;
      --cyan-soft: rgba(0, 255, 102, 0.1);
      --emerald: #00c853;
      --emerald-bright: #00ff88;
      --emerald-soft: rgba(0, 255, 136, 0.1);
      --text: #d8ffe6;
      --text-soft: #b6ffd0;
      --muted: #79c995;
      --dim: #4f8a63;
      --font: var(--mono);
      --shadow-card: 0 30px 80px -48px rgba(0, 255, 102, 0.25), inset 0 1px 0 rgba(0, 255, 102, 0.06);
    }

    html[data-theme="nordic"] {
      --bg: #101418;
      --bg-deep: #0b0e11;
      --surface: rgba(25, 31, 36, 0.86);
      --surface-solid: #171c21;
      --surface-soft: rgba(255, 255, 255, 0.028);
      --line: rgba(190, 205, 214, 0.13);
      --line-soft: rgba(190, 205, 214, 0.08);
      --line-cyan: rgba(179, 203, 214, 0.2);
      --accent-rgb: 179, 203, 214;
      --accent-deep-rgb: 126, 155, 170;
      --accent2-rgb: 130, 155, 139;
      --accent2-bright-rgb: 179, 203, 189;
      --accent-light: #d3e3ea;
      --accent-pale: #e7f0f4;
      --accent-deep: #5f7b88;
      --accent-2-pale: #d9e7df;
      --accent-2-light: #c3d8cd;
      --button-text: #0b1115;
      --cyan: #7e9baa;
      --cyan-bright: #b3cbd6;
      --cyan-soft: rgba(179, 203, 214, 0.08);
      --emerald: #829b8b;
      --emerald-bright: #b3cbbd;
      --emerald-soft: rgba(130, 155, 139, 0.08);
      --text: #eef2f4;
      --text-soft: #d4dde2;
      --muted: #a5b2ba;
      --dim: #78868f;
      --shadow-card: 0 24px 60px -48px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    }

    html[data-theme="nordic"] body {
      background: linear-gradient(180deg, #14191e 0%, #0d1114 65%, #0b0e11 100%);
    }

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

    html {
      scroll-behavior: smooth;
      background: var(--bg);
      overflow-x: clip;
      -webkit-text-size-adjust: 100%;
    }

    body {
      margin: 0;
      min-width: 320px;
      background:
        radial-gradient(1100px 760px at 8% -8%, rgba(var(--accent-deep-rgb), 0.14), transparent 62%),
        radial-gradient(900px 680px at 100% 8%, rgba(var(--accent2-rgb), 0.075), transparent 58%),
        var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.5;
      overflow-x: clip;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
      background-size: 64px 64px;
      -webkit-mask-image: radial-gradient(ellipse 78% 58% at 50% 0%, #000 12%, transparent 78%);
      mask-image: radial-gradient(ellipse 78% 58% at 50% 0%, #000 12%, transparent 78%);
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: radial-gradient(ellipse at 50% 110%, rgba(9, 9, 11, 0) 20%, rgba(9, 9, 11, 0.74) 90%);
    }

    ::selection { background: rgba(var(--accent-rgb), 0.28); color: #fff; }

    * {
      scrollbar-width: thin;
      scrollbar-color: rgba(var(--accent-rgb), 0.34) transparent;
    }
    *::-webkit-scrollbar { width: 8px; height: 8px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
      background: rgba(var(--accent-rgb), 0.26);
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }

    a { color: inherit; }
    button, textarea, input { font: inherit; }
    button { -webkit-tap-highlight-color: transparent; }
    [hidden] { display: none !important; }

    :focus-visible {
      outline: 2px solid var(--cyan-bright);
      outline-offset: 3px;
    }

    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 200;
      transform: translateY(-150%);
      padding: 14px 20px;
      border-radius: 12px;
      background: var(--cyan-bright);
      color: var(--button-text);
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.2s ease;
    }
    .skip-link:focus-visible { transform: translateY(0); }

    .svg-sprite {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    .icon {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .page-glow {
      position: fixed;
      z-index: -1;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(90px);
      opacity: 0.65;
    }
    .glow-a {
      width: 360px;
      height: 360px;
      top: 18vh;
      left: -230px;
      background: rgba(var(--accent-deep-rgb), 0.18);
    }
    .glow-b {
      width: 320px;
      height: 320px;
      top: 58vh;
      right: -230px;
      background: rgba(var(--accent2-rgb), 0.11);
    }

    /* ---------- top bar ---------- */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 60;
      border-bottom: 1px solid rgba(255, 255, 255, 0.065);
      background: rgba(9, 9, 11, 0.72);
      -webkit-backdrop-filter: blur(24px) saturate(140%);
      backdrop-filter: blur(24px) saturate(140%);
    }

    .topbar-inner {
      width: min(1400px, 100%);
      min-height: 76px;
      margin: 0 auto;
      padding: 0 clamp(18px, 4vw, 42px);
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      flex: 0 0 auto;
      min-height: 48px;
    }

    .brand-mark {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(var(--accent-rgb), 0.34);
      border-radius: 12px;
      background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-deep-rgb), 0.04));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 0 30px -10px rgba(var(--accent-rgb), 0.62);
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: -0.08em;
      text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.55);
    }

    .brand-name {
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--text);
    }
    .brand-name span { color: var(--cyan-bright); }

    .topbar-context {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      margin: 0 auto;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.64rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .context-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--emerald-bright);
      box-shadow: 0 0 10px rgba(var(--accent2-bright-rgb), 0.8);
      flex: 0 0 auto;
    }

    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
      flex: 0 0 auto;
    }

    .level-pill, .progress-pill {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.025);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.64rem;
      letter-spacing: 0.055em;
      white-space: nowrap;
    }

    .level-pill { color: var(--cyan-bright); border-color: rgba(var(--accent-rgb), 0.18); }
    .progress-pill strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
    .progress-label { color: var(--dim); font-size: 0.58rem; letter-spacing: 0.12em; }

    .top-progress {
      height: 2px;
      background: rgba(255, 255, 255, 0.045);
      overflow: hidden;
    }
    .top-progress span {
      display: block;
      width: 0;
      height: 100%;
      background: linear-gradient(90deg, var(--cyan), var(--cyan-bright) 55%, var(--emerald-bright));
      box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.65);
      transition: width 0.14s linear;
    }

    /* ---------- loading / error ---------- */
    .loader {
      min-height: 72vh;
      width: min(720px, calc(100% - 40px));
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      animation: fade-in 0.5s ease both;
    }

    .loader-badge {
      width: 64px;
      height: 64px;
      display: grid;
      place-items: center;
      margin-bottom: 26px;
      border-radius: 20px;
      border: 1px solid rgba(var(--accent-rgb), 0.3);
      background: rgba(var(--accent-rgb), 0.07);
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 1.35rem;
      font-weight: 700;
      box-shadow: 0 0 60px -16px rgba(var(--accent-rgb), 0.65);
      animation: loader-pulse 2s ease-in-out infinite;
    }

    .loader-kicker {
      display: block;
      margin-bottom: 10px;
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.64rem;
      letter-spacing: 0.18em;
    }

    .loader-copy p {
      margin: 0 0 24px;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .loader-dots { display: inline-block; width: 20px; text-align: left; animation: blink 1.2s steps(1) infinite; }

    .loader-line {
      width: min(340px, 76vw);
      height: 3px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.075);
    }
    .loader-line span {
      display: block;
      width: 42%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, transparent, var(--cyan-bright), var(--emerald-bright), transparent);
      animation: loader-slide 1.3s var(--ease) infinite;
    }

    .loader-meta {
      width: min(340px, 76vw);
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 12px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.06em;
    }

    .error-shell { min-height: 70vh; display: grid; place-items: center; padding: 70px 20px; }
    .error-card {
      width: min(640px, 100%);
      padding: clamp(26px, 5vw, 46px);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: linear-gradient(160deg, rgba(22, 24, 29, 0.86), rgba(11, 12, 15, 0.92));
      box-shadow: var(--shadow-card);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
    }
    .error-code {
      display: inline-flex;
      padding: 7px 10px;
      border: 1px solid rgba(251, 113, 133, 0.24);
      border-radius: 9px;
      background: var(--danger-soft);
      color: var(--danger);
      font-family: var(--mono);
      font-size: 0.64rem;
      letter-spacing: 0.1em;
    }
    .error-card h1 { margin: 22px 0 10px; font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -0.04em; }
    .error-card p { color: var(--muted); line-height: 1.7; }
    .error-card pre {
      margin: 20px 0;
      padding: 16px;
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--bg-deep);
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.8rem;
    }
    .error-card details { margin-top: 20px; color: var(--dim); font-size: 0.8rem; }
    .error-card summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
    .error-card .btn { margin-top: 18px; }

    /* ---------- buttons ---------- */
    .btn {
      min-height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 24px;
      border: 1px solid transparent;
      border-radius: 16px;
      font-size: 0.92rem;
      font-weight: 650;
      line-height: 1.1;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.18s var(--ease), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
      -webkit-user-select: none;
      user-select: none;
    }
    .btn:active { transform: scale(0.985); }
    .btn .icon { width: 19px; height: 19px; }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent-light) 0%, var(--cyan-bright) 36%, var(--accent-deep) 100%);
      color: var(--button-text);
      border-color: rgba(255, 255, 255, 0.25);
      box-shadow: 0 16px 38px -16px rgba(var(--accent-rgb), 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .btn-secondary {
      background: rgba(255, 255, 255, 0.035);
      color: var(--text);
      border-color: rgba(255, 255, 255, 0.105);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .btn-save {
      min-height: 54px;
      padding: 0 20px;
      border-color: rgba(var(--accent2-rgb), 0.3);
      background: linear-gradient(135deg, rgba(var(--accent2-rgb), 0.24), rgba(var(--accent-deep-rgb), 0.14));
      color: #d1fae5;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px -20px rgba(var(--accent2-rgb), 0.8);
    }

    .btn-quiet {
      min-height: 54px;
      padding: 0 16px;
      border-color: var(--line);
      background: transparent;
      color: var(--muted);
      font-size: 0.82rem;
    }
    .btn-quiet.is-armed {
      color: var(--danger);
      border-color: rgba(251, 113, 133, 0.3);
      background: var(--danger-soft);
    }

    .icon-btn {
      width: 48px;
      height: 48px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.035);
      color: var(--muted);
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }
    .icon-btn:active { transform: scale(0.96); }

    @media (hover: hover) {
      .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 22px 48px -16px rgba(var(--accent-rgb), 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
      .btn-secondary:hover { background: rgba(255, 255, 255, 0.065); border-color: rgba(var(--accent-rgb), 0.26); }
      .btn-save:hover { background: linear-gradient(135deg, rgba(var(--accent2-rgb), 0.34), rgba(var(--accent-deep-rgb), 0.2)); }
      .btn-quiet:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.15); }
      .icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
      .toc-link:hover { background: rgba(255, 255, 255, 0.035); }
      .phrase-chip:hover { border-color: rgba(var(--accent-rgb), 0.34); color: var(--cyan-bright); }
      .vocab:hover { background: rgba(var(--accent-rgb), 0.12); }
    }

    /* ---------- hero ---------- */
    .hero {
      position: relative;
      width: min(1240px, 100%);
      margin: 0 auto;
      padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 32px) clamp(62px, 8vw, 100px);
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(350px, 0.88fr);
      gap: clamp(38px, 6vw, 74px);
      align-items: center;
    }

    .hero::before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 8%;
      right: 2%;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: rgba(var(--accent-deep-rgb), 0.08);
      filter: blur(100px);
      pointer-events: none;
    }

    .hero-copy > * { animation: rise-in 0.8s var(--ease) both; }
    .hero-copy > *:nth-child(1) { animation-delay: 0.02s; }
    .hero-copy > *:nth-child(2) { animation-delay: 0.08s; }
    .hero-copy > *:nth-child(3) { animation-delay: 0.14s; }
    .hero-copy > *:nth-child(4) { animation-delay: 0.2s; }
    .hero-copy > *:nth-child(5) { animation-delay: 0.26s; }

    .hero-eyebrow {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.66rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .hero-eyebrow .eyebrow-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--cyan-bright);
      box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.9);
      animation: soft-pulse 2.2s ease-in-out infinite;
    }
    .hero-eyebrow .eyebrow-sep { color: var(--dim); }
    .hero-eyebrow .eyebrow-level { color: var(--dim); }

    .hero h1 {
      margin: 0;
      font-size: clamp(2.55rem, 6.85vw, 6.4rem);
      line-height: 0.94;
      font-weight: 700;
      letter-spacing: -0.062em;
      text-wrap: balance;
    }

    .gradient-text {
      background: linear-gradient(112deg, var(--accent-pale) 0%, var(--cyan-bright) 30%, var(--cyan) 58%, var(--emerald-bright) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-subtitle {
      max-width: 560px;
      margin: 26px 0 0;
      color: #b8b8c0;
      font-size: clamp(1rem, 1.45vw, 1.14rem);
      line-height: 1.7;
      letter-spacing: -0.012em;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px;
    }

    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin-top: 38px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
    }

    .metric { padding-right: 16px; }
    .metric + .metric { padding-left: 22px; border-left: 1px solid var(--line); }
    .metric strong {
      display: block;
      color: var(--text);
      font-family: var(--mono);
      font-size: 0.96rem;
      font-weight: 600;
      letter-spacing: -0.04em;
      white-space: nowrap;
    }
    .metric span {
      display: block;
      margin-top: 6px;
      color: var(--dim);
      font-size: 0.61rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .hero-visual {
      position: relative;
      animation: rise-in 0.9s 0.16s var(--ease) both;
    }
    .hero-visual::before {
      content: "";
      position: absolute;
      inset: 12% 0 -4%;
      z-index: -1;
      border-radius: 40px;
      background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent2-rgb), 0.07));
      filter: blur(46px);
      opacity: 0.55;
    }

    .visual-chip {
      position: absolute;
      top: -16px;
      right: 18px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 13px;
      border: 1px solid rgba(var(--accent-rgb), 0.25);
      border-radius: 999px;
      background: rgba(10, 14, 17, 0.92);
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.55rem;
      letter-spacing: 0.12em;
      box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.8);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
    }
    .visual-chip .signal {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--emerald-bright);
      box-shadow: 0 0 9px rgba(var(--accent2-bright-rgb), 0.9);
    }

    .compiler {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line-cyan);
      border-radius: 26px;
      background: linear-gradient(155deg, rgba(15, 19, 23, 0.92), rgba(7, 9, 12, 0.94));
      box-shadow: 0 40px 100px -48px rgba(var(--accent-rgb), 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      transform: rotate(0.35deg);
    }
    .compiler::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, 0.014) 3px 4px);
    }

    .compiler-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 50px;
      padding: 0 16px;
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.018);
    }

    .traffic { display: inline-flex; gap: 6px; }
    .traffic i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #3f3f46;
      display: block;
    }
    .traffic i:nth-child(1) { background: #f87171; opacity: 0.82; }
    .traffic i:nth-child(2) { background: #fbbf24; opacity: 0.8; }
    .traffic i:nth-child(3) { background: #34d399; opacity: 0.8; }

    .compiler-file {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.61rem;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }
    .compiler-state {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
      color: var(--emerald-bright);
      font-family: var(--mono);
      font-size: 0.55rem;
      letter-spacing: 0.12em;
      white-space: nowrap;
    }
    .compiler-state i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 8px currentColor;
    }

    .compiler-body {
      position: relative;
      z-index: 1;
      padding: clamp(20px, 3.2vw, 28px);
      font-family: var(--mono);
      font-size: clamp(0.7rem, 1.1vw, 0.79rem);
      line-height: 1.7;
    }

    .code-row { display: flex; align-items: flex-start; gap: 10px; color: #d4d4d8; }
    .code-prompt { color: var(--cyan-bright); opacity: 0.9; flex: 0 0 auto; }
    .code-call { min-width: 0; overflow-wrap: anywhere; }
    .code-string { color: var(--accent-pale); }
    .code-note { margin: 9px 0 16px 20px; color: #5f636b; }

    .error-box {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px 10px;
      margin: 13px 0 4px;
      padding: 11px 12px;
      border: 1px solid rgba(251, 113, 133, 0.17);
      border-left: 2px solid rgba(251, 113, 133, 0.66);
      border-radius: 9px;
      background: rgba(251, 113, 133, 0.055);
      color: #fda4af;
      font-size: 0.64rem;
      letter-spacing: 0.04em;
    }
    .error-box strong { font-weight: 700; }
    .error-box span:last-child { color: #be5866; }

    .success-box {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 12px;
      padding: 12px;
      border: 1px solid rgba(var(--accent2-rgb), 0.16);
      border-left: 2px solid rgba(var(--accent2-bright-rgb), 0.7);
      border-radius: 9px;
      background: rgba(var(--accent2-rgb), 0.055);
      color: #a7f3d0;
      overflow-wrap: anywhere;
    }
    .success-mark { color: var(--emerald-bright); font-weight: 700; }
    .code-result { margin-top: 12px; color: #4e7d69; font-size: 0.62rem; letter-spacing: 0.03em; }

    .compiler-foot {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      min-height: 44px;
      padding: 0 16px;
      border-top: 1px solid var(--line);
      background: rgba(0, 0, 0, 0.18);
      color: #555962;
      font-family: var(--mono);
      font-size: 0.55rem;
      letter-spacing: 0.055em;
    }
    .ready-status { color: var(--emerald-bright); letter-spacing: 0.13em; }

    /* ---------- lesson grid ---------- */
    .shell {
      width: min(1240px, 100%);
      margin: 0 auto;
      padding: 0 clamp(20px, 4vw, 32px) clamp(70px, 9vw, 110px);
    }

    .lesson-layout {
      display: grid;
      grid-template-columns: 250px minmax(0, 1fr);
      gap: clamp(28px, 4vw, 48px);
      align-items: start;
    }

    .toc-column { min-width: 0; position: sticky; top: 102px; }

    .glass {
      border: 1px solid rgba(var(--accent-rgb), 0.16);
      background: linear-gradient(160deg, rgba(20, 23, 27, 0.78), rgba(11, 13, 16, 0.76));
      box-shadow: var(--shadow-card);
      -webkit-backdrop-filter: blur(20px) saturate(125%);
      backdrop-filter: blur(20px) saturate(125%);
    }

    .toc {
      border-radius: var(--radius-lg);
      padding: 18px;
      overflow: hidden;
    }

    .toc-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 2px 4px 14px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.14em;
    }
    .toc-live { display: inline-flex; align-items: center; gap: 6px; color: var(--emerald-bright); }
    .toc-live i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 8px currentColor;
      animation: soft-pulse 2s ease-in-out infinite;
    }

    .toc-progress {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 15px;
      margin-bottom: 10px;
      border: 1px solid var(--line-soft);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.024);
    }

    .toc-ring {
      --p: 0;
      position: relative;
      width: 52px;
      height: 52px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: conic-gradient(var(--cyan-bright) calc(var(--p) * 1%), rgba(255, 255, 255, 0.075) 0);
      box-shadow: 0 0 22px -8px rgba(var(--accent-rgb), 0.52);
      transition: background 0.2s linear;
    }
    .toc-ring::before {
      content: "";
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      background: #0c0e12;
    }
    .toc-ring span {
      position: relative;
      z-index: 1;
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.6rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }

    .toc-progress-copy { min-width: 0; }
    .toc-progress-copy span {
      display: block;
      margin-bottom: 4px;
      color: var(--dim);
      font-size: 0.6rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }
    .toc-progress-copy strong {
      display: block;
      color: var(--text-soft);
      font-size: 0.78rem;
      font-weight: 550;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .toc-nav { display: flex; flex-direction: column; gap: 2px; }

    .toc-link {
      position: relative;
      min-height: 56px;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 10px 10px;
      border-radius: 13px;
      color: var(--muted);
      text-decoration: none;
      transition: background 0.18s ease, color 0.18s ease;
    }
    .toc-link.is-active {
      color: var(--text);
      background: linear-gradient(90deg, rgba(var(--accent-deep-rgb), 0.125), rgba(var(--accent-deep-rgb), 0.035));
      box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.11);
    }
    .toc-link.is-active::before {
      content: "";
      position: absolute;
      top: 14px;
      bottom: 14px;
      left: 0;
      width: 2px;
      border-radius: 999px;
      background: var(--cyan-bright);
      box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.65);
    }

    .toc-num {
      width: 21px;
      flex: 0 0 auto;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.59rem;
      letter-spacing: 0.02em;
    }
    .toc-link.is-active .toc-num { color: var(--cyan-bright); }
    .toc-link.is-passed .toc-num { color: var(--emerald-bright); }

    .toc-copy { min-width: 0; flex: 1; }
    .toc-label {
      display: block;
      font-size: 0.8rem;
      font-weight: 550;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .toc-type {
      display: block;
      margin-top: 3px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.52rem;
      letter-spacing: 0.11em;
    }
    .toc-mark {
      width: 6px;
      height: 6px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
    }
    .toc-link.is-active .toc-mark {
      background: var(--cyan-bright);
      box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.78);
    }
    .toc-link.is-passed .toc-mark { background: rgba(var(--accent2-bright-rgb), 0.6); }

    .toc-words {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-top: 12px;
      padding: 14px 12px 4px;
      border-top: 1px solid var(--line-soft);
    }
    .toc-words-icon {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid rgba(var(--accent-rgb), 0.16);
      border-radius: 9px;
      background: rgba(var(--accent-rgb), 0.06);
      color: var(--cyan-bright);
    }
    .toc-words-icon .icon { width: 14px; height: 14px; }
    .toc-words-copy { min-width: 0; }
    .toc-words-copy span {
      display: block;
      color: var(--dim);
      font-size: 0.57rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }
    .toc-words-copy strong {
      display: block;
      margin-top: 2px;
      color: var(--text-soft);
      font-family: var(--mono);
      font-size: 0.7rem;
      font-weight: 500;
    }

    .local-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 16px;
      padding: 0 6px;
      color: var(--dim);
    }
    .local-note .signal {
      width: 5px;
      height: 5px;
      margin-top: 7px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--emerald-bright);
      box-shadow: 0 0 8px rgba(var(--accent2-bright-rgb), 0.65);
    }
    .local-note p { margin: 0; font-size: 0.66rem; line-height: 1.6; }
    .local-note strong { color: var(--muted); font-weight: 600; }

    /* ---------- content blocks ---------- */
    .lesson-content { min-width: 0; display: flex; flex-direction: column; gap: 30px; }

    .lesson-block {
      scroll-margin-top: 108px;
      animation: block-in 0.62s var(--ease) both;
      animation-delay: calc(var(--i, 0) * 55ms);
    }

    .card {
      position: relative;
      overflow: hidden;
      padding: clamp(22px, 3.6vw, 42px);
      border: 1px solid rgba(var(--accent-rgb), 0.155);
      border-radius: var(--radius-xl);
      background: linear-gradient(158deg, rgba(22, 25, 30, 0.79), rgba(10, 12, 15, 0.83));
      box-shadow: 0 32px 90px -56px rgba(var(--accent-deep-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.045);
      -webkit-backdrop-filter: blur(22px) saturate(125%);
      backdrop-filter: blur(22px) saturate(125%);
    }
    .card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.3) 24%, rgba(255, 255, 255, 0.06) 70%, transparent);
      pointer-events: none;
    }

    .block-head {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 26px;
    }

    .block-index {
      min-width: 43px;
      height: 43px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid rgba(var(--accent-rgb), 0.19);
      border-radius: 12px;
      background: rgba(var(--accent-rgb), 0.055);
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.68rem;
      font-weight: 600;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .block-heading { min-width: 0; flex: 1; }
    .block-eyebrow {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.59rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }
    .block-eyebrow::before {
      content: "";
      width: 18px;
      height: 1px;
      background: rgba(var(--accent-rgb), 0.45);
    }

    .block-head h2 {
      margin: 0;
      color: var(--text);
      font-size: clamp(1.55rem, 3.2vw, 2.22rem);
      font-weight: 650;
      line-height: 1.12;
      letter-spacing: -0.038em;
      text-wrap: balance;
    }

    .block-type {
      flex: 0 0 auto;
      margin-top: 3px;
      padding: 7px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.51rem;
      letter-spacing: 0.12em;
      white-space: nowrap;
    }

    /* ---------- theory ---------- */
    .terminal {
      margin: 26px 0;
      overflow: hidden;
      border: 1px solid rgba(var(--accent-rgb), 0.15);
      border-radius: 17px;
      background: rgba(4, 6, 8, 0.74);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 22px 50px -38px rgba(0, 0, 0, 0.9);
    }

    .terminal-bar {
      display: flex;
      align-items: center;
      gap: 11px;
      min-height: 42px;
      padding: 0 14px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(255, 255, 255, 0.018);
    }
    .terminal-bar .traffic i { width: 7px; height: 7px; }
    .terminal-file {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #5d626b;
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.025em;
      white-space: nowrap;
    }
    .terminal-mode {
      margin-left: auto;
      color: #4a4e56;
      font-family: var(--mono);
      font-size: 0.5rem;
      letter-spacing: 0.11em;
    }

    .terminal-body {
      display: grid;
      gap: 6px;
      padding: clamp(13px, 2.4vw, 19px);
      overflow-x: auto;
    }

    .rule-line {
      display: grid;
      grid-template-columns: minmax(104px, 0.34fr) minmax(0, 1fr);
      gap: 16px;
      align-items: start;
      padding: 10px 11px;
      border-radius: 9px;
      background: rgba(255, 255, 255, 0.018);
      font-family: var(--mono);
      font-size: clamp(0.65rem, 1.35vw, 0.75rem);
      line-height: 1.55;
    }
    .rule-line + .rule-line { border-top: 1px solid rgba(255, 255, 255, 0.025); }
    .rule-prompt {
      color: var(--cyan-bright);
      font-weight: 700;
      font-size: 0.65rem;
      letter-spacing: 0.09em;
      white-space: nowrap;
    }
    .rule-text { color: #b7b7c0; overflow-wrap: anywhere; }
    .rule-line.is-emerald .rule-prompt { color: var(--emerald-bright); }
    .rule-line.is-emerald .rule-text { color: #a7e6ce; }
    .rule-line.is-red .rule-prompt { color: #fda4af; }
    .rule-line.is-red .rule-text { color: #d3a1a9; text-decoration: line-through; text-decoration-color: rgba(251, 113, 133, 0.4); }
    .rule-line.is-muted .rule-prompt { color: var(--dim); }

    .theory-body {
      max-width: 67ch;
      margin: 0;
      color: #bfc0c7;
      font-size: 0.99rem;
      line-height: 1.75;
      letter-spacing: -0.005em;
    }

    .formula-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 13px;
      margin-top: 24px;
    }

    .formula {
      padding: 19px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.024);
    }
    .formula:first-child { border-color: rgba(var(--accent-rgb), 0.14); }
    .formula:last-child { border-color: rgba(var(--accent2-rgb), 0.16); }

    .formula-label {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--text-soft);
      font-family: var(--mono);
      font-size: 0.59rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .formula-label::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--cyan-bright);
    }
    .formula:last-child .formula-label::before { background: var(--emerald-bright); }

    .formula code {
      display: block;
      margin: 13px 0 12px;
      padding: 9px 10px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.2);
      color: var(--accent-pale);
      font-family: var(--mono);
      font-size: 0.68rem;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }
    .formula:last-child code { color: #a7f3d0; }

    .formula-example {
      margin: 0;
      color: var(--text-soft);
      font-size: 0.87rem;
      line-height: 1.55;
    }
    .formula-note {
      display: block;
      margin-top: 7px;
      color: var(--dim);
      font-size: 0.69rem;
      line-height: 1.5;
    }

    .mistake-list {
      display: grid;
      gap: 10px;
      margin-top: 24px;
    }

    .mistake {
      display: grid;
      gap: 8px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.019);
    }
    .mistake-line {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      font-family: var(--mono);
      font-size: 0.72rem;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }
    .mistake-line .mark { flex: 0 0 auto; font-weight: 700; }
    .mistake-bad { color: #d9a2aa; }
    .mistake-bad .mark { color: #fb7185; }
    .mistake-good { color: #9ee7cd; }
    .mistake-good .mark { color: var(--emerald-bright); }
    .mistake-why {
      margin: 2px 0 0 19px;
      color: var(--dim);
      font-size: 0.74rem;
      line-height: 1.6;
    }

    .rule-tip {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      margin-top: 24px;
      padding: 15px 17px;
      border: 1px solid rgba(var(--accent-rgb), 0.1);
      border-left: 2px solid var(--cyan);
      border-radius: 0 13px 13px 0;
      background: linear-gradient(90deg, rgba(var(--accent-deep-rgb), 0.08), rgba(var(--accent-deep-rgb), 0.012));
    }
    .rule-tip .icon { margin-top: 2px; color: var(--cyan-bright); }
    .rule-tip p {
      margin: 0;
      color: #b3b5bd;
      font-size: 0.81rem;
      line-height: 1.65;
    }

    /* ---------- reading ---------- */
    .reading-card { border-color: rgba(var(--accent-rgb), 0.17); }
    .reading-intro {
      max-width: 64ch;
      margin: -8px 0 22px;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.7;
    }

    .reading-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 25px;
      padding: 12px 14px;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.019);
    }
    .reading-length {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.61rem;
      letter-spacing: 0.035em;
    }
    .reading-length .icon { width: 14px; height: 14px; color: var(--muted); }

    .glossary-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--dim);
      font-size: 0.66rem;
    }
    .glossary-pill .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--cyan-bright);
      box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.7);
    }
    .glossary-pill strong {
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.63rem;
      font-weight: 500;
    }

    .reading-prose {
      max-width: 68ch;
      color: #c8c8d0;
      font-size: clamp(1rem, 1.35vw, 1.06rem);
      line-height: 1.92;
      letter-spacing: -0.004em;
    }
    .reading-prose p { margin: 0 0 1.35em; }
    .reading-prose p:last-child { margin-bottom: 0; }

    @media (min-width: 700px) {
      .reading-prose > p:first-child::first-letter {
        float: left;
        margin: 0.07em 0.09em 0 0;
        color: var(--cyan-bright);
        font-size: 3.15em;
        font-weight: 600;
        line-height: 0.8;
      }
    }

    .vocab {
      display: inline;
      padding: 0.08em 0.11em;
      border-radius: 4px;
      color: var(--accent-pale);
      font-weight: 500;
      text-decoration: none;
      border-bottom: 1px dashed rgba(var(--accent-rgb), 0.56);
      cursor: pointer;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }
    .vocab.is-found {
      color: #a7f3d0;
      background: rgba(var(--accent2-rgb), 0.08);
      border-bottom-color: rgba(var(--accent2-bright-rgb), 0.46);
    }

    .reading-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid var(--line-soft);
    }
    .glossary-tip {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      max-width: 480px;
    }
    .glossary-tip .icon { width: 15px; height: 15px; margin-top: 2px; color: var(--cyan-bright); }
    .glossary-tip p {
      margin: 0;
      color: var(--dim);
      font-size: 0.72rem;
      line-height: 1.6;
    }
    .reading-end {
      color: #4e525a;
      font-family: var(--mono);
      font-size: 0.53rem;
      letter-spacing: 0.13em;
      white-space: nowrap;
    }

    /* ---------- dialogue ---------- */
    .dialogue-intro {
      max-width: 67ch;
      margin: -8px 0 22px;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.7;
    }

    .messenger {
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 21px;
      background: #080a0d;
      box-shadow: 0 28px 60px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .messenger-head {
      display: flex;
      align-items: center;
      gap: 13px;
      min-height: 68px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(255, 255, 255, 0.023);
    }

    .avatar-stack { display: flex; flex: 0 0 auto; }
    .avatar-stack .avatar + .avatar { margin-left: -9px; }

    .avatar {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 2px solid #0a0c0f;
      border-radius: 50%;
      color: #dffbff;
      font-family: var(--mono);
      font-size: 0.67rem;
      font-weight: 700;
      background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.55), rgba(var(--accent-deep-rgb), 0.28));
      box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2);
    }
    .avatar.tone-emerald {
      background: linear-gradient(145deg, rgba(var(--accent2-bright-rgb), 0.5), rgba(5, 150, 105, 0.28));
      box-shadow: 0 0 0 1px rgba(var(--accent2-bright-rgb), 0.2);
    }

    .chat-identity { min-width: 0; flex: 1; }
    .chat-identity strong {
      display: block;
      color: var(--text-soft);
      font-size: 0.84rem;
      font-weight: 600;
    }
    .chat-identity span {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 3px;
      color: var(--dim);
      font-size: 0.63rem;
      line-height: 1.3;
    }
    .online-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--emerald-bright);
      box-shadow: 0 0 7px rgba(var(--accent2-bright-rgb), 0.72);
      flex: 0 0 auto;
    }
    .messenger-chip {
      padding: 6px 9px;
      border: 1px solid rgba(var(--accent-rgb), 0.15);
      border-radius: 999px;
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.5rem;
      letter-spacing: 0.1em;
      white-space: nowrap;
    }

    .chat-body {
      max-height: 610px;
      padding: 20px 16px 18px;
      overflow-y: auto;
      overscroll-behavior: contain;
      background:
        radial-gradient(circle at 12% 10%, rgba(var(--accent-rgb), 0.035), transparent 32%),
        radial-gradient(circle at 86% 84%, rgba(var(--accent2-rgb), 0.03), transparent 34%);
    }

    .chat-date {
      width: fit-content;
      margin: 0 auto 20px;
      padding: 6px 10px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.025);
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.55rem;
      letter-spacing: 0.03em;
    }

    .message {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      margin-bottom: 13px;
      animation: message-in 0.38s var(--ease) both;
      animation-delay: calc(var(--m, 0) * 24ms);
    }
    .message .avatar { width: 27px; height: 27px; border-width: 1px; font-size: 0.55rem; }
    .message.is-me { justify-content: flex-end; }

    .msg-stack { max-width: min(78%, 480px); min-width: 0; }
    .message.is-me .msg-stack { display: flex; flex-direction: column; align-items: flex-end; }

    .msg-bubble {
      position: relative;
      padding: 11px 13px;
      border: 1px solid rgba(255, 255, 255, 0.075);
      border-radius: 5px 16px 16px 16px;
      background: #14171b;
      color: #d3d3da;
      font-size: 0.84rem;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }
    .message.is-me .msg-bubble {
      border-color: rgba(var(--accent-rgb), 0.2);
      border-radius: 16px 5px 16px 16px;
      background: linear-gradient(135deg, rgba(var(--accent-deep-rgb), 0.27), rgba(var(--accent-deep-rgb), 0.13));
      color: #e4fbff;
    }

    .msg-reaction {
      display: inline-flex;
      align-items: center;
      margin-left: 8px;
      padding: 2px 6px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.18);
      font-size: 0.61rem;
      vertical-align: 2px;
      white-space: nowrap;
    }

    .msg-meta {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 4px;
      padding: 0 2px;
      color: #555a63;
      font-family: var(--mono);
      font-size: 0.52rem;
      letter-spacing: 0.01em;
    }
    .msg-meta .read {
      width: 12px;
      height: 12px;
      color: var(--cyan-bright);
      opacity: 0.8;
    }

    .chat-scroll-hint {
      min-height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 7px 14px;
      border-top: 1px solid var(--line-soft);
      background: rgba(0, 0, 0, 0.18);
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.52rem;
      letter-spacing: 0.055em;
    }
    .chat-scroll-hint::before {
      content: "↓";
      color: var(--cyan-bright);
      font-size: 0.68rem;
      animation: scroll-nudge 1.8s ease-in-out infinite;
    }

    .grammar-trace {
      border-top: 1px solid var(--line-soft);
      background: rgba(255, 255, 255, 0.018);
      padding: 15px 16px 17px;
    }
    .grammar-trace-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 11px;
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.54rem;
      letter-spacing: 0.13em;
    }
    .grammar-trace-head span:last-child { color: var(--dim); letter-spacing: 0.04em; }
    .grammar-note {
      display: grid;
      grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
      gap: 12px;
      padding: 8px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.035);
    }
    .grammar-note code {
      color: var(--accent-pale);
      font-family: var(--mono);
      font-size: 0.63rem;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }
    .grammar-note p {
      margin: 0;
      color: var(--dim);
      font-size: 0.69rem;
      line-height: 1.55;
    }

    /* ---------- practice ---------- */
    .practice-card {
      border-color: rgba(var(--accent2-rgb), 0.2);
      background:
        radial-gradient(700px 300px at 100% 0%, rgba(var(--accent2-rgb), 0.06), transparent 62%),
        linear-gradient(158deg, rgba(21, 26, 28, 0.82), rgba(9, 12, 14, 0.85));
    }
    .practice-card .block-eyebrow { color: var(--emerald-bright); }
    .practice-card .block-eyebrow::before { background: rgba(var(--accent2-bright-rgb), 0.45); }
    .practice-card .block-index {
      color: var(--emerald-bright);
      border-color: rgba(var(--accent2-bright-rgb), 0.2);
      background: rgba(var(--accent2-rgb), 0.055);
    }

    .practice-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 22px;
      align-items: start;
      margin-bottom: 24px;
    }
    .practice-prompt {
      max-width: 60ch;
      margin: 0;
      color: var(--text-soft);
      font-size: clamp(1.03rem, 1.5vw, 1.18rem);
      font-weight: 550;
      line-height: 1.55;
      letter-spacing: -0.015em;
    }
    .practice-brief {
      max-width: 65ch;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.72;
    }

    .constraint-list {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      justify-content: flex-end;
      max-width: 250px;
    }
    .constraint {
      padding: 7px 9px;
      border: 1px solid rgba(var(--accent2-rgb), 0.16);
      border-radius: 8px;
      background: rgba(var(--accent2-rgb), 0.05);
      color: #9de8ce;
      font-family: var(--mono);
      font-size: 0.55rem;
      letter-spacing: 0.03em;
      white-space: nowrap;
    }

    .practice-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.72fr);
      gap: 16px;
      align-items: start;
    }

    .editor {
      padding: 17px;
      border: 1px solid rgba(255, 255, 255, 0.085);
      border-radius: 19px;
      background: rgba(4, 6, 8, 0.36);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .editor:focus-within {
      border-color: rgba(var(--accent-rgb), 0.34);
      box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.05), 0 20px 50px -40px rgba(var(--accent-rgb), 0.65);
    }

    .editor-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .editor-label {
      color: var(--text-soft);
      font-family: var(--mono);
      font-size: 0.59rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .editor-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.56rem;
      letter-spacing: 0.02em;
      text-align: right;
    }
    .editor-status::before {
      content: "";
      width: 5px;
      height: 5px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--dim);
    }
    .editor-status.is-dirty { color: #e4c37f; }
    .editor-status.is-dirty::before { background: var(--amber); }
    .editor-status.is-saved { color: var(--emerald-bright); }
    .editor-status.is-saved::before { background: var(--emerald-bright); box-shadow: 0 0 7px rgba(var(--accent2-bright-rgb), 0.65); }
    .editor-status.is-error { color: var(--danger); }
    .editor-status.is-error::before { background: var(--danger); }

    .practice-textarea {
      display: block;
      width: 100%;
      min-height: 300px;
      padding: 3px 1px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--text-soft);
      font-size: 0.96rem;
      line-height: 1.78;
      resize: vertical;
      outline: none;
      caret-color: var(--cyan-bright);
    }
    .practice-textarea::placeholder { color: #525660; opacity: 1; }
    .practice-textarea:focus { outline: none; box-shadow: none; }

    .editor-foot {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 13px;
      margin-top: 13px;
      padding-top: 14px;
      border-top: 1px solid var(--line-soft);
    }

    .word-meter {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.58rem;
    }
    .meter {
      width: clamp(70px, 12vw, 118px);
      height: 5px;
      flex: 0 1 auto;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
    }
    .meter span {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--cyan), var(--emerald-bright));
      transition: width 0.22s ease, background 0.22s ease;
    }
    .word-meter.is-complete .meter span { background: linear-gradient(90deg, var(--emerald), var(--accent-2-light)); }
    .word-meter.is-over .meter span { background: linear-gradient(90deg, var(--amber), #f59e0b); }
    .word-meter strong {
      color: var(--text-soft);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }

    .editor-actions { display: flex; align-items: center; gap: 8px; }

    .saved-line {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 11px 0 0;
      color: var(--emerald-bright);
      font-size: 0.65rem;
      line-height: 1.5;
    }
    .saved-line .icon { width: 13px; height: 13px; }

    .practice-aside { display: grid; gap: 13px; }

    .side-card {
      padding: 16px;
      border: 1px solid var(--line-soft);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.022);
    }
    .side-card h3 {
      margin: 0 0 12px;
      color: var(--text-soft);
      font-size: 0.7rem;
      font-weight: 650;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .checklist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
    .checklist li {
      position: relative;
      padding-left: 22px;
      color: var(--dim);
      font-size: 0.7rem;
      line-height: 1.55;
    }
    .checklist li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 2px;
      width: 12px;
      height: 12px;
      border: 1px solid rgba(var(--accent-rgb), 0.27);
      border-radius: 4px;
      background: rgba(var(--accent-rgb), 0.04);
    }

    .chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .phrase-chip {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: rgba(255, 255, 255, 0.02);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.6rem;
      line-height: 1.3;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
    }
    .phrase-chip:active { background: rgba(var(--accent-rgb), 0.08); }

    .local-privacy {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin: 0;
      padding: 0 2px;
      color: var(--dim);
      font-size: 0.65rem;
      line-height: 1.55;
    }
    .local-privacy .icon { width: 13px; height: 13px; margin-top: 2px; color: var(--emerald-bright); }

    /* ---------- translation dock ---------- */
    .translation-panel {
      position: fixed;
      z-index: 90;
      left: 50%;
      bottom: max(20px, env(safe-area-inset-bottom));
      width: min(640px, calc(100% - 24px));
      padding: 19px 21px 20px;
      border: 1px solid rgba(var(--accent-rgb), 0.3);
      border-radius: 23px;
      background: linear-gradient(155deg, rgba(16, 21, 25, 0.97), rgba(8, 11, 14, 0.97));
      box-shadow: 0 40px 110px -24px rgba(0, 0, 0, 0.94), 0 0 0 1px rgba(var(--accent-rgb), 0.045), 0 0 60px -30px rgba(var(--accent-rgb), 0.48);
      -webkit-backdrop-filter: blur(28px) saturate(140%);
      backdrop-filter: blur(28px) saturate(140%);
      transform: translate(-50%, calc(100% + 48px));
      opacity: 0;
      visibility: hidden;
      transition: transform 0.36s var(--ease), opacity 0.24s ease, visibility 0.36s;
    }
    .translation-panel.is-open {
      transform: translate(-50%, 0);
      opacity: 1;
      visibility: visible;
    }

    .translation-panel::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      border-radius: 23px 0 0 23px;
      background: linear-gradient(180deg, var(--cyan-bright), var(--emerald-bright));
      opacity: 0.8;
    }

    .translation-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }
    .translation-kicker {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.55rem;
      letter-spacing: 0.12em;
    }
    .translation-kicker i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--emerald-bright);
      box-shadow: 0 0 8px rgba(var(--accent2-bright-rgb), 0.7);
    }
    .translation-head .icon-btn { width: 42px; height: 42px; border-radius: 12px; }

    .translation-word-wrap {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 10px;
    }
    .translation-word {
      margin: 0;
      color: var(--text);
      font-size: clamp(1.45rem, 4vw, 1.9rem);
      font-weight: 650;
      letter-spacing: -0.035em;
      line-height: 1.15;
    }
    .translation-pos {
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.05em;
    }
    .translation-meaning {
      margin: 6px 0 0;
      color: var(--accent-2-pale);
      font-size: 1.02rem;
      line-height: 1.5;
      font-weight: 500;
    }
    .translation-context {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--line-soft);
    }
    .translation-context > span {
      display: block;
      margin-bottom: 5px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.53rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .translation-context p {
      margin: 0;
      color: #8c8f98;
      font-size: 0.74rem;
      line-height: 1.6;
    }

    /* ---------- toast ---------- */
    .toast {
      position: fixed;
      z-index: 120;
      top: 92px;
      left: 50%;
      max-width: calc(100% - 28px);
      padding: 12px 17px;
      border: 1px solid rgba(var(--accent2-rgb), 0.28);
      border-radius: 999px;
      background: rgba(9, 24, 19, 0.94);
      box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.86);
      color: #b9f6df;
      font-size: 0.76rem;
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transform: translate(-50%, -18px);
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition: opacity 0.25s ease, transform 0.28s var(--ease), visibility 0.28s;
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
    }
    .toast::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 5px;
      margin-right: 7px;
      border-radius: 50%;
      background: var(--emerald-bright);
      box-shadow: 0 0 7px rgba(var(--accent2-bright-rgb), 0.75);
      vertical-align: 1px;
    }
    .toast[data-type="info"] { border-color: rgba(var(--accent-rgb), 0.28); background: var(--surface-solid); color: var(--accent-pale); }
    .toast[data-type="info"]::before { background: var(--cyan-bright); box-shadow: 0 0 7px rgba(var(--accent-rgb), 0.75); }
    .toast[data-type="error"] { border-color: rgba(251, 113, 133, 0.28); background: rgba(28, 12, 16, 0.94); color: #ffc8d0; }
    .toast[data-type="error"]::before { background: var(--danger); box-shadow: none; }
    .toast.is-visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

    /* ---------- footer ---------- */
    .site-footer {
      border-top: 1px solid var(--line-soft);
      background: rgba(7, 8, 10, 0.42);
    }
    .footer-inner {
      width: min(1240px, 100%);
      min-height: 88px;
      margin: 0 auto;
      padding: 20px clamp(20px, 4vw, 32px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }
    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.62rem;
      letter-spacing: 0.08em;
    }
    .footer-brand .brand-mark { width: 27px; height: 27px; border-radius: 8px; font-size: 0.58rem; }
    .footer-copy { margin: 0; color: var(--dim); font-size: 0.68rem; }
    .footer-meta { color: #4c5058; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.07em; }

    /* ---------- responsive ---------- */
    @media (max-width: 1080px) {
      .hero { grid-template-columns: minmax(0, 1.02fr) minmax(330px, 0.82fr); gap: 38px; }
      .lesson-layout { grid-template-columns: 218px minmax(0, 1fr); gap: 28px; }
      .toc { padding: 14px; }
      .toc-link { padding-left: 8px; padding-right: 8px; }
      .practice-grid { grid-template-columns: minmax(0, 1.4fr) minmax(205px, 0.75fr); }
    }

    @media (max-width: 930px) {
      .hero { grid-template-columns: 1fr; padding-top: 58px; }
      .hero-copy { max-width: 720px; }
      .hero h1 { font-size: clamp(3rem, 10.5vw, 5.7rem); }
      .hero-visual { width: min(560px, 100%); }
      .lesson-layout { grid-template-columns: 1fr; }
      .toc-column { display: none; }
      .lesson-content { max-width: 820px; margin: 0 auto; width: 100%; }
      .shell { padding-bottom: 80px; }
      .block-head h2 { font-size: clamp(1.55rem, 4vw, 2.25rem); }
    }

    @media (max-width: 700px) {
      .topbar-inner { min-height: 66px; gap: 12px; }
      .topbar-context { display: none; }
      .level-pill { display: none; }
      .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
      .brand-name { font-size: 0.82rem; letter-spacing: 0.1em; }
      .progress-pill { min-height: 36px; padding: 0 11px; }
      .progress-label { display: none; }

      .hero { padding-top: 46px; padding-bottom: 56px; }
      .hero-eyebrow { margin-bottom: 17px; font-size: 0.59rem; }
      .hero h1 { font-size: clamp(2.45rem, 11.7vw, 4.1rem); letter-spacing: -0.058em; }
      .hero-subtitle { margin-top: 20px; font-size: 0.98rem; line-height: 1.65; }
      .hero-actions { margin-top: 26px; gap: 10px; }
      .hero-actions .btn { flex: 1 1 100%; min-height: 58px; }
      .hero-metrics { grid-template-columns: repeat(2, 1fr); gap: 0; padding-top: 20px; margin-top: 30px; }
      .metric { padding: 12px 10px 12px 0; }
      .metric + .metric { border-left: 0; padding-left: 0; }
      .metric:nth-child(even) { padding-left: 17px; border-left: 1px solid var(--line); }
      .metric:nth-child(n+3) { border-top: 1px solid var(--line); }
      .metric strong { font-size: 0.85rem; }
      .metric span { font-size: 0.55rem; }
      .visual-chip { top: -13px; right: 12px; padding: 8px 10px; font-size: 0.49rem; }
      .compiler { border-radius: 20px; }
      .compiler-body { padding: 18px 15px; font-size: 0.66rem; }
      .compiler-head { padding: 0 12px; }
      .compiler-foot { padding: 0 12px; font-size: 0.49rem; }

      .shell { padding-left: 14px; padding-right: 14px; }
      .lesson-content { gap: 18px; }
      .card { padding: 21px 17px; border-radius: 23px; }
      .block-head { gap: 11px; margin-bottom: 21px; }
      .block-index { min-width: 37px; height: 37px; border-radius: 10px; font-size: 0.61rem; }
      .block-eyebrow { font-size: 0.53rem; letter-spacing: 0.12em; margin-bottom: 7px; }
      .block-type { display: none; }
      .block-head h2 { font-size: clamp(1.38rem, 6.4vw, 1.85rem); letter-spacing: -0.032em; }

      .rule-line { grid-template-columns: 1fr; gap: 4px; padding: 9px 10px; font-size: 0.65rem; }
      .rule-prompt { font-size: 0.57rem; }
      .theory-body { font-size: 0.93rem; line-height: 1.72; }
      .formula-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 19px; }
      .formula { padding: 15px; }
      .mistake { padding: 12px; }
      .mistake-line { font-size: 0.66rem; }
      .mistake-why { margin-left: 0; font-size: 0.7rem; }
      .rule-tip { padding: 13px 14px; margin-top: 19px; }
      .rule-tip p { font-size: 0.75rem; }

      .reading-intro { font-size: 0.85rem; margin-bottom: 17px; }
      .reading-toolbar { margin-bottom: 19px; padding: 10px 11px; }
      .reading-prose { font-size: 1rem; line-height: 1.91; }
      .reading-prose p { margin-bottom: 1.25em; }
      .vocab { padding: 0.1em 0.13em; }
      .reading-footer { margin-top: 22px; }
      .reading-end { display: none; }
      .glossary-tip p { font-size: 0.68rem; }

      .dialogue-intro { font-size: 0.85rem; margin-bottom: 17px; }
      .messenger { border-radius: 17px; }
      .messenger-head { min-height: 61px; padding: 10px 12px; gap: 9px; }
      .messenger-chip { display: none; }
      .chat-body { max-height: 58vh; min-height: 330px; padding: 16px 11px 14px; }
      .message { gap: 6px; margin-bottom: 11px; }
      .message .avatar { width: 24px; height: 24px; font-size: 0.5rem; }
      .msg-stack { max-width: 84%; }
      .msg-bubble { padding: 10px 12px; font-size: 0.8rem; line-height: 1.52; }
      .grammar-trace { padding: 13px 12px 14px; }
      .grammar-note { grid-template-columns: 1fr; gap: 3px; }
      .grammar-note code { font-size: 0.61rem; }

      .practice-top { grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
      .constraint-list { justify-content: flex-start; max-width: none; }
      .practice-prompt { font-size: 1rem; }
      .practice-brief { font-size: 0.8rem; }
      .practice-grid { grid-template-columns: 1fr; gap: 12px; }
      .editor { padding: 14px; border-radius: 16px; }
      .editor-head { align-items: flex-start; gap: 8px; }
      .editor-status { max-width: 52%; font-size: 0.52rem; }
      .practice-textarea { min-height: 280px; font-size: 0.94rem; }
      .editor-foot { align-items: stretch; }
      .word-meter { width: 100%; justify-content: flex-start; }
      .editor-actions { width: 100%; }
      .editor-actions .btn-save { flex: 1; }
      .editor-actions .btn-quiet { flex: 0 0 auto; }
      .side-card { padding: 14px; }
      .checklist li { font-size: 0.68rem; }
      .phrase-chip { font-size: 0.59rem; }

      .translation-panel {
        bottom: max(10px, env(safe-area-inset-bottom));
        padding: 16px 16px 17px;
        border-radius: 20px;
      }
      .translation-head .icon-btn { width: 44px; height: 44px; }
      .translation-word { font-size: 1.45rem; }
      .translation-meaning { font-size: 0.95rem; }
      .translation-context p { font-size: 0.7rem; }

      .toast { top: 80px; white-space: normal; border-radius: 15px; width: max-content; }
      .footer-inner { min-height: 76px; padding: 17px 18px; }
      .footer-copy { order: 3; width: 100%; }
    }

    @media (max-width: 390px) {
      .brand-name { font-size: 0.76rem; }
      .progress-pill { font-size: 0.58rem; }
      .hero h1 { font-size: clamp(2.28rem, 11.6vw, 2.8rem); }
      .card { padding-left: 14px; padding-right: 14px; }
      .msg-stack { max-width: 87%; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    @keyframes rise-in {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes block-in {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes message-in {
      from { opacity: 0; transform: translateY(8px) scale(0.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes loader-pulse {
      0%, 100% { box-shadow: 0 0 55px -18px rgba(var(--accent-rgb), 0.5); }
      50% { box-shadow: 0 0 75px -12px rgba(var(--accent-rgb), 0.8); }
    }
    @keyframes loader-slide {
      0% { transform: translateX(-110%); }
      100% { transform: translateX(340%); }
    }
    @keyframes blink {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }
    @keyframes soft-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.55; transform: scale(0.82); }
    }
    @keyframes scroll-nudge {
      0%, 100% { transform: translateY(-1px); opacity: 0.7; }
      50% { transform: translateY(2px); opacity: 1; }
    }

    /* ============================================================
       DASHBOARD / MULTI-LESSON
       ============================================================ */
    .dashboard {
      width: min(1240px, 100%);
      margin: 0 auto;
      padding: clamp(48px, 7vw, 84px) clamp(20px, 4vw, 32px) clamp(70px, 9vw, 110px);
    }

    .dashboard-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.13fr) minmax(330px, 0.87fr);
      gap: clamp(36px, 6vw, 72px);
      align-items: center;
    }

    .dashboard-copy > * { animation: rise-in 0.75s var(--ease) both; }
    .dashboard-copy > *:nth-child(1) { animation-delay: 0.02s; }
    .dashboard-copy > *:nth-child(2) { animation-delay: 0.08s; }
    .dashboard-copy > *:nth-child(3) { animation-delay: 0.14s; }

    .dashboard-title {
      margin: 0;
      font-size: clamp(2.85rem, 6.25vw, 5.9rem);
      font-weight: 700;
      line-height: 0.94;
      letter-spacing: -0.064em;
      text-wrap: balance;
    }

    .dashboard-subtitle {
      max-width: 580px;
      margin: 24px 0 0;
      color: #b8b8c0;
      font-size: clamp(0.98rem, 1.4vw, 1.12rem);
      line-height: 1.7;
      letter-spacing: -0.01em;
    }

    .dashboard-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

    .course-console {
      position: relative;
      overflow: hidden;
      border-radius: 26px;
      border: 1px solid var(--line-cyan);
      background: linear-gradient(155deg, rgba(17, 22, 26, 0.9), rgba(7, 9, 12, 0.93));
      box-shadow: 0 40px 100px -52px rgba(var(--accent-rgb), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.055);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      animation: rise-in 0.85s 0.12s var(--ease) both;
    }
    .course-console::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, 0.012) 3px 4px);
    }
    .console-head {
      position: relative;
      z-index: 1;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 16px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(255, 255, 255, 0.018);
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.57rem;
      letter-spacing: 0.13em;
    }
    .console-live { display: inline-flex; align-items: center; gap: 6px; color: var(--emerald-bright); }
    .console-live i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 8px currentColor;
      animation: soft-pulse 2s ease-in-out infinite;
    }

    .console-body {
      position: relative;
      z-index: 1;
      padding: clamp(19px, 3vw, 26px);
    }
    .course-summary { display: flex; align-items: center; gap: 20px; }
    .course-ring {
      --p: 0;
      position: relative;
      width: 112px;
      height: 112px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: conic-gradient(var(--cyan-bright) calc(var(--p) * 1%), rgba(255, 255, 255, 0.075) 0);
      box-shadow: 0 0 32px -12px rgba(var(--accent-rgb), 0.7);
      transition: background 0.3s ease;
    }
    .course-ring::before {
      content: "";
      position: absolute;
      inset: 7px;
      border-radius: 50%;
      background: #0b0e11;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
    }
    .course-ring div { position: relative; z-index: 1; text-align: center; }
    .course-ring strong {
      display: block;
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 1.35rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.06em;
    }
    .course-ring span {
      display: block;
      margin-top: 5px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.48rem;
      letter-spacing: 0.1em;
    }
    .course-summary-copy { min-width: 0; }
    .course-summary-copy > span {
      display: block;
      margin-bottom: 5px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.55rem;
      letter-spacing: 0.12em;
    }
    .course-summary-copy strong {
      display: block;
      color: var(--text-soft);
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.3;
    }
    .course-summary-copy p {
      margin: 5px 0 0;
      color: var(--dim);
      font-size: 0.69rem;
      line-height: 1.5;
    }

    .course-lines { display: grid; gap: 9px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
    .course-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
    .course-line-label {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 0.67rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .course-line-label span {
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.53rem;
    }
    .course-line > strong {
      color: var(--text-soft);
      font-family: var(--mono);
      font-size: 0.58rem;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
    }
    .course-line-track {
      grid-column: 1 / -1;
      height: 4px;
      margin-left: 20px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.065);
    }
    .course-line-track span {
      display: block;
      height: 100%;
      width: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--cyan), var(--emerald-bright));
    }
    .console-foot {
      position: relative;
      z-index: 1;
      min-height: 39px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 16px;
      border-top: 1px solid var(--line-soft);
      background: rgba(0, 0, 0, 0.18);
      color: #4f535b;
      font-family: var(--mono);
      font-size: 0.52rem;
      letter-spacing: 0.055em;
    }
    .console-foot span:last-child { color: var(--emerald-bright); }

    .dashboard-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: clamp(30px, 4.5vw, 44px);
    }
    .stat-card {
      position: relative;
      overflow: hidden;
      padding: 20px 22px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: linear-gradient(155deg, rgba(22, 25, 30, 0.66), rgba(10, 12, 15, 0.7));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      animation: rise-in 0.7s var(--ease) both;
    }
    .stat-card:nth-child(2) { animation-delay: 0.06s; }
    .stat-card:nth-child(3) { animation-delay: 0.12s; }
    .stat-card::after {
      content: "";
      position: absolute;
      right: -30px;
      bottom: -40px;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background: rgba(var(--accent-rgb), 0.055);
      filter: blur(28px);
      pointer-events: none;
    }
    .stat-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }
    .stat-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(var(--accent-rgb), 0.16);
      border-radius: 10px;
      background: rgba(var(--accent-rgb), 0.055);
      color: var(--cyan-bright);
    }
    .stat-icon .icon { width: 15px; height: 15px; }
    .stat-code {
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.5rem;
      letter-spacing: 0.12em;
    }
    .stat-value {
      display: flex;
      align-items: baseline;
      gap: 6px;
      color: var(--text);
      font-family: var(--mono);
      font-size: clamp(1.6rem, 3vw, 2.15rem);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.06em;
      font-variant-numeric: tabular-nums;
    }
    .stat-value small { color: var(--dim); font-size: 0.62rem; letter-spacing: 0; }
    .stat-label {
      display: block;
      margin-top: 9px;
      color: var(--muted);
      font-size: 0.68rem;
      letter-spacing: 0.01em;
    }

    .dashboard-modules { margin-top: clamp(46px, 7vw, 72px); }
    .modules-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 20px;
    }
    .modules-head-copy { min-width: 0; }
    .modules-kicker {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 9px;
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .modules-kicker::before {
      content: "";
      width: 18px;
      height: 1px;
      background: rgba(var(--accent-rgb), 0.45);
    }
    .modules-head h2 {
      margin: 0;
      font-size: clamp(1.6rem, 3.2vw, 2.25rem);
      font-weight: 650;
      letter-spacing: -0.04em;
      line-height: 1.1;
    }
    .modules-count {
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.6rem;
      letter-spacing: 0.08em;
      white-space: nowrap;
      padding-bottom: 4px;
    }

    .lesson-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .dash-lesson {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 100%;
      padding: clamp(22px, 3.2vw, 30px);
      border: 1px solid rgba(var(--accent-rgb), 0.14);
      border-radius: 26px;
      background: linear-gradient(155deg, rgba(21, 24, 29, 0.78), rgba(9, 11, 14, 0.82));
      box-shadow: 0 28px 80px -54px rgba(var(--accent-deep-rgb), 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
      animation: rise-in 0.65s var(--ease) both;
      animation-delay: calc(var(--i, 0) * 65ms);
    }
    .dash-lesson::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.35), transparent 75%);
      pointer-events: none;
    }
    .lesson-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 24px;
    }
    .lesson-module {
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.12em;
    }
    .lesson-badges { display: flex; align-items: center; gap: 6px; }
    .level-badge, .lesson-badge {
      display: inline-flex;
      align-items: center;
      min-height: 27px;
      padding: 0 8px;
      border: 1px solid rgba(var(--accent-rgb), 0.18);
      border-radius: 999px;
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.52rem;
      letter-spacing: 0.055em;
      white-space: nowrap;
    }
    .lesson-badge {
      color: var(--emerald-bright);
      border-color: rgba(var(--accent2-bright-rgb), 0.18);
      background: rgba(var(--accent2-rgb), 0.055);
    }

    .dash-lesson h3 {
      margin: 0;
      color: var(--text);
      font-size: clamp(1.36rem, 2.4vw, 1.72rem);
      line-height: 1.15;
      font-weight: 650;
      letter-spacing: -0.035em;
      text-wrap: balance;
    }
    .dash-lesson .lesson-description {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.65;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .lesson-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 17px; }
    .lesson-tag {
      padding: 5px 7px;
      border: 1px solid var(--line-soft);
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.018);
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.48rem;
      letter-spacing: 0.06em;
    }
    .lesson-card-progress { margin-top: auto; padding-top: 24px; }
    .lesson-progress-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
      color: var(--dim);
      font-size: 0.61rem;
      letter-spacing: 0.02em;
    }
    .lesson-progress-head strong {
      color: var(--text-soft);
      font-family: var(--mono);
      font-size: 0.62rem;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
    }
    .lesson-progress-track {
      height: 5px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.07);
    }
    .lesson-progress-track span {
      display: block;
      height: 100%;
      width: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--cyan), var(--emerald-bright));
      box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.32);
    }
    .lesson-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 21px;
      padding-top: 18px;
      border-top: 1px solid var(--line-soft);
    }
    .lesson-meta {
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.54rem;
      line-height: 1.5;
      letter-spacing: 0.035em;
    }
    .lesson-launch {
      min-height: 50px;
      flex: 0 0 auto;
      padding: 0 17px;
      border-radius: 13px;
      font-size: 0.78rem;
    }
    .lesson-launch .icon { width: 16px; height: 16px; }

    .dashboard-empty {
      padding: 42px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.02);
      color: var(--muted);
      text-align: center;
    }

    /* ============================================================
       QUIZ
       ============================================================ */
    .quiz-card {
      border-color: rgba(var(--accent-rgb), 0.18);
      background:
        radial-gradient(650px 280px at 100% 0%, rgba(var(--accent-rgb), 0.055), transparent 64%),
        linear-gradient(158deg, rgba(21, 25, 29, 0.81), rgba(9, 11, 14, 0.84));
    }
    .quiz-intro {
      max-width: 67ch;
      margin: -7px 0 20px;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.7;
    }
    .quiz-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 20px;
      padding: 12px 14px;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.019);
    }
    .quiz-meter-wrap { flex: 1; min-width: 0; }
    .quiz-meter {
      height: 5px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.075);
    }
    .quiz-meter span {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--cyan), var(--emerald-bright));
      transition: width 0.3s var(--ease);
    }
    .quiz-status-copy {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 0 0 auto;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.56rem;
      letter-spacing: 0.03em;
    }
    .quiz-status-copy strong { color: var(--text-soft); font-weight: 500; }
    .quiz-list { display: grid; gap: 12px; }
    .quiz-question {
      padding: clamp(15px, 2.5vw, 20px);
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.019);
    }
    .quiz-question-head { display: flex; align-items: flex-start; gap: 11px; }
    .quiz-number {
      min-width: 31px;
      height: 31px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid rgba(var(--accent-rgb), 0.17);
      border-radius: 8px;
      background: rgba(var(--accent-rgb), 0.045);
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.54rem;
    }
    .quiz-question h3 {
      margin: 3px 0 0;
      color: var(--text-soft);
      font-size: 0.91rem;
      font-weight: 550;
      line-height: 1.55;
      letter-spacing: -0.01em;
    }
    .quiz-options { display: grid; gap: 8px; margin-top: 14px; padding-left: 42px; }
    .quiz-option {
      width: 100%;
      min-height: 56px;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: rgba(255, 255, 255, 0.021);
      color: var(--text-soft);
      font-size: 0.82rem;
      line-height: 1.45;
      text-align: left;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
    .quiz-option:active { transform: scale(0.995); }
    .quiz-option:disabled { opacity: 1; cursor: default; transform: none; }
    .option-letter {
      width: 27px;
      height: 27px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 7px;
      background: rgba(0, 0, 0, 0.14);
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.56rem;
      font-weight: 600;
    }
    .option-text { flex: 1; min-width: 0; }
    .option-mark { width: 18px; flex: 0 0 auto; text-align: center; font-family: var(--mono); font-weight: 700; }
    .quiz-option.is-correct {
      border-color: rgba(var(--accent2-rgb), 0.4);
      background: rgba(var(--accent2-rgb), 0.1);
      color: #b9f6df;
    }
    .quiz-option.is-correct .option-letter {
      border-color: rgba(var(--accent2-bright-rgb), 0.32);
      background: rgba(var(--accent2-rgb), 0.16);
      color: var(--emerald-bright);
    }
    .quiz-option.is-correct .option-mark { color: var(--emerald-bright); }
    .quiz-option.is-correct .option-mark::before { content: "✓"; }
    .quiz-option.is-wrong {
      border-color: rgba(251, 113, 133, 0.4);
      background: rgba(251, 113, 133, 0.09);
      color: #ffc8d0;
    }
    .quiz-option.is-wrong .option-letter {
      border-color: rgba(251, 113, 133, 0.3);
      background: rgba(251, 113, 133, 0.12);
      color: var(--danger);
    }
    .quiz-option.is-wrong .option-mark { color: var(--danger); }
    .quiz-option.is-wrong .option-mark::before { content: "✕"; }

    .quiz-feedback {
      margin: 13px 0 0 42px;
      padding: 12px 13px;
      border: 1px solid rgba(var(--accent2-rgb), 0.17);
      border-left: 2px solid rgba(var(--accent2-bright-rgb), 0.65);
      border-radius: 0 10px 10px 0;
      background: rgba(var(--accent2-rgb), 0.055);
    }
    .quiz-feedback.is-wrong {
      border-color: rgba(251, 113, 133, 0.16);
      border-left-color: rgba(251, 113, 133, 0.65);
      background: rgba(251, 113, 133, 0.045);
    }
    .quiz-feedback-title {
      display: block;
      margin-bottom: 4px;
      color: var(--emerald-bright);
      font-family: var(--mono);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .quiz-feedback.is-wrong .quiz-feedback-title { color: #fda4af; }
    .quiz-feedback p { margin: 0; color: #a7b3ae; font-size: 0.73rem; line-height: 1.6; }

    .quiz-result {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 17px;
      padding: 17px 18px;
      border: 1px solid rgba(var(--accent2-rgb), 0.22);
      border-radius: 14px;
      background: linear-gradient(90deg, rgba(var(--accent2-rgb), 0.09), rgba(var(--accent-rgb), 0.035));
    }
    .quiz-result-main { display: flex; align-items: center; gap: 13px; min-width: 0; }
    .quiz-result-value {
      color: var(--emerald-bright);
      font-family: var(--mono);
      font-size: 1.2rem;
      font-weight: 600;
      white-space: nowrap;
      letter-spacing: -0.045em;
    }
    .quiz-result-copy { min-width: 0; }
    .quiz-result-copy strong { display: block; color: var(--text-soft); font-size: 0.77rem; font-weight: 550; }
    .quiz-result-copy p { margin: 3px 0 0; color: var(--dim); font-size: 0.68rem; line-height: 1.45; }
    .quiz-result .btn { min-height: 44px; padding: 0 14px; font-size: 0.7rem; }

    /* ============================================================
       SETTINGS MODAL
       ============================================================ */
    .back-button {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: rgba(255, 255, 255, 0.025);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.58rem;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }
    .back-button .icon { width: 15px; height: 15px; }
    .back-button:active { transform: scale(0.97); }
    .settings-button { width: 42px; height: 42px; border-radius: 11px; }
    .settings-button .icon { width: 18px; height: 18px; }

    .settings-modal {
      width: min(590px, calc(100% - 24px));
      max-width: none;
      max-height: calc(100vh - 24px);
      margin: auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text);
      overflow: visible;
    }
    .settings-modal::backdrop {
      background: rgba(3, 5, 7, 0.72);
      -webkit-backdrop-filter: blur(12px) saturate(120%);
      backdrop-filter: blur(12px) saturate(120%);
    }
    .settings-panel {
      max-height: calc(100vh - 24px);
      overflow-y: auto;
      border: 1px solid rgba(var(--accent-rgb), 0.22);
      border-radius: 27px;
      background: linear-gradient(155deg, rgba(20, 24, 28, 0.97), rgba(8, 10, 13, 0.98));
      box-shadow: 0 50px 140px -24px rgba(0, 0, 0, 0.9), 0 0 70px -36px rgba(var(--accent-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      -webkit-backdrop-filter: blur(30px) saturate(135%);
      backdrop-filter: blur(30px) saturate(135%);
    }
    .settings-modal[open] .settings-panel { animation: settings-in 0.34s var(--ease) both; }

    .settings-head {
      position: sticky;
      top: 0;
      z-index: 3;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 21px 22px 17px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(13, 16, 20, 0.92);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }
    .settings-kicker {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 8px;
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.53rem;
      letter-spacing: 0.13em;
    }
    .settings-kicker i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--emerald-bright);
      box-shadow: 0 0 8px rgba(var(--accent2-bright-rgb), 0.7);
    }
    .settings-head h2 {
      margin: 0;
      font-size: 1.55rem;
      font-weight: 650;
      letter-spacing: -0.04em;
      line-height: 1.1;
    }
    .settings-head .icon-btn { width: 42px; height: 42px; border-radius: 11px; }

    .settings-body { padding: 20px 22px 22px; }
    .settings-section + .settings-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
    .settings-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 11px;
      color: var(--text-soft);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    .settings-hint {
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.52rem;
      font-weight: 400;
      letter-spacing: 0.08em;
    }
    .settings-segment {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
      padding: 5px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(0, 0, 0, 0.17);
    }
    .settings-choice {
      min-height: 58px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border: 1px solid transparent;
      border-radius: 11px;
      background: transparent;
      color: var(--muted);
      text-align: left;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
    .settings-choice.is-active {
      border-color: rgba(var(--accent-rgb), 0.22);
      background: rgba(var(--accent-rgb), 0.075);
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    }
    .choice-preview {
      width: 33px;
      height: 33px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: rgba(0, 0, 0, 0.15);
      color: var(--text-soft);
      font-family: var(--mono);
      font-size: 0.67rem;
      font-weight: 600;
    }
    .settings-choice.is-active .choice-preview { color: var(--cyan-bright); border-color: rgba(var(--accent-rgb), 0.18); }
    .choice-preview.is-large { font-size: 0.88rem; }
    .choice-copy { min-width: 0; flex: 1; }
    .choice-copy strong { display: block; font-size: 0.73rem; font-weight: 550; }
    .choice-copy small { display: block; margin-top: 2px; color: var(--dim); font-size: 0.58rem; line-height: 1.3; }
    .choice-check {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: transparent;
      font-size: 0.6rem;
      line-height: 1;
    }
    .settings-choice.is-active .choice-check {
      border-color: var(--emerald-bright);
      background: rgba(var(--accent2-rgb), 0.18);
      color: var(--emerald-bright);
    }
    .settings-choice.is-active .choice-check::before { content: "✓"; }

    .locked-pill {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 7px;
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 999px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.47rem;
      letter-spacing: 0.08em;
    }
    .language-list { display: grid; gap: 7px; }
    .language-option {
      width: 100%;
      min-height: 57px;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 9px 11px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.018);
      color: var(--muted);
      text-align: left;
    }
    .language-option.is-active {
      border-color: rgba(var(--accent-rgb), 0.2);
      background: rgba(var(--accent-rgb), 0.055);
      color: var(--text-soft);
    }
    .language-option:disabled { opacity: 1; cursor: not-allowed; }
    .language-option:not(.is-active) { opacity: 0.72; }
    .lang-code {
      width: 35px;
      height: 35px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: rgba(0, 0, 0, 0.16);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.58rem;
      font-weight: 600;
    }
    .language-option.is-active .lang-code {
      border-color: rgba(var(--accent-rgb), 0.22);
      background: rgba(var(--accent-rgb), 0.1);
      color: var(--cyan-bright);
    }
    .lang-copy { min-width: 0; flex: 1; }
    .lang-copy strong { display: block; color: var(--text-soft); font-size: 0.75rem; font-weight: 550; }
    .lang-copy small { display: block; margin-top: 2px; color: var(--dim); font-size: 0.58rem; }
    .lang-check { color: var(--emerald-bright); font-size: 0.72rem; }
    .coming-soon {
      flex: 0 0 auto;
      padding: 4px 6px;
      border: 1px solid rgba(251, 191, 36, 0.14);
      border-radius: 6px;
      color: #d6b56e;
      font-family: var(--mono);
      font-size: 0.45rem;
      letter-spacing: 0.03em;
      white-space: nowrap;
    }
    .coming-soon-banner {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-top: 9px;
      padding: 8px 10px;
      border: 1px dashed rgba(251, 191, 36, 0.15);
      border-radius: 8px;
      color: #a98f5e;
      font-family: var(--mono);
      font-size: 0.52rem;
      line-height: 1.4;
    }
    .coming-soon-banner::before { content: "◇"; color: var(--amber); }

    .settings-danger {
      margin-top: 22px !important;
      padding: 15px !important;
      border: 1px solid rgba(251, 113, 133, 0.14) !important;
      border-radius: 14px;
      background: rgba(251, 113, 133, 0.025);
    }
    .settings-danger .settings-section-head { margin-bottom: 5px; color: #f0b7bf; }
    .settings-danger p { margin: 0 0 12px; color: var(--dim); font-size: 0.67rem; line-height: 1.55; }
    .settings-danger .btn-quiet {
      min-height: 44px;
      color: #f0a3ae;
      border-color: rgba(251, 113, 133, 0.2);
      background: rgba(251, 113, 133, 0.04);
    }
    .reset-actions { display: flex; }
    .reset-confirm {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 9px;
      padding-top: 2px;
    }
    .reset-confirm > span {
      color: #fda4af;
      font-family: var(--mono);
      font-size: 0.59rem;
    }
    .reset-confirm > div { display: flex; gap: 6px; }
    .btn-danger {
      min-height: 44px;
      padding: 0 13px;
      border: 1px solid rgba(251, 113, 133, 0.28);
      border-radius: 10px;
      background: rgba(251, 113, 133, 0.12);
      color: #ffd0d6;
      font-size: 0.66rem;
      font-weight: 600;
      cursor: pointer;
    }
    .btn-danger:active { transform: scale(0.985); }
    .reset-confirm .btn-quiet { min-height: 44px; }
    .settings-footnote {
      margin: 18px 0 0;
      color: #4e525b;
      font-family: var(--mono);
      font-size: 0.5rem;
      line-height: 1.5;
      letter-spacing: 0.03em;
      text-align: center;
    }

    body.font-large .reading-prose { font-size: clamp(1.13rem, 1.55vw, 1.21rem); line-height: 2.03; }
    body.font-large .theory-body { font-size: 1.09rem; line-height: 1.82; }
    body.font-large .practice-textarea { font-size: 1.06rem; line-height: 1.82; }
    body.font-large .msg-bubble { font-size: 0.93rem; }
    body.font-large .reading-intro,
    body.font-large .dialogue-intro,
    body.font-large .practice-brief { font-size: 0.98rem; }
    body.font-large .quiz-question h3 { font-size: 0.98rem; }
    body.font-large .quiz-option { font-size: 0.89rem; }
    body.font-large .translation-meaning { font-size: 1.1rem; }
    body.font-large .translation-context p { font-size: 0.82rem; }
    body.font-large .dash-lesson .lesson-description { font-size: 0.88rem; }

    @media (hover: hover) {
      .back-button:hover { color: var(--text); border-color: rgba(var(--accent-rgb), 0.25); background: rgba(var(--accent-rgb), 0.06); }
      .dash-lesson:hover { border-color: rgba(var(--accent-rgb), 0.24); }
      .quiz-option:not(:disabled):hover { border-color: rgba(var(--accent-rgb), 0.26); background: rgba(var(--accent-rgb), 0.055); }
      .settings-choice:hover { color: var(--text); }
      .settings-choice.is-active:hover { color: var(--text); }
      .btn-danger:hover { background: rgba(251, 113, 133, 0.18); }
      .settings-danger .btn-quiet:hover { color: #ffd0d6; border-color: rgba(251, 113, 133, 0.32); }
    }

    @media (max-width: 960px) {
      .dashboard-hero { grid-template-columns: 1fr; }
      .dashboard-copy { max-width: 760px; }
      .course-console { width: min(620px, 100%); }
      .lesson-grid { grid-template-columns: 1fr; }
      .dash-lesson { min-height: 0; }
    }

    @media (max-width: 700px) {
      .dashboard { padding-top: 42px; padding-bottom: 74px; }
      .dashboard-title { font-size: clamp(2.5rem, 12vw, 3.9rem); }
      .dashboard-subtitle { margin-top: 19px; font-size: 0.97rem; }
      .dashboard-actions .btn { flex: 1 1 100%; }
      .course-summary { gap: 16px; }
      .course-ring { width: 92px; height: 92px; }
      .course-ring strong { font-size: 1.14rem; }
      .course-summary-copy strong { font-size: 0.92rem; }
      .dashboard-stats { grid-template-columns: 1fr; gap: 8px; margin-top: 26px; }
      .stat-card { padding: 16px 17px; display: flex; align-items: center; gap: 14px; }
      .stat-top { margin: 0; flex: 0 0 auto; }
      .stat-top .stat-code { display: none; }
      .stat-icon { width: 38px; height: 38px; }
      .stat-value { font-size: 1.6rem; }
      .stat-label { margin: 0; font-size: 0.66rem; }
      .stat-card > div:last-child { min-width: 0; }
      .modules-head { align-items: flex-start; flex-direction: column; gap: 7px; margin-bottom: 16px; }
      .lesson-card-footer { align-items: stretch; flex-direction: column; gap: 11px; }
      .lesson-launch { width: 100%; }
      .lesson-meta { text-align: center; }
      .lesson-card-top { margin-bottom: 19px; }
      .dash-lesson h3 { font-size: 1.42rem; }

      .quiz-intro { font-size: 0.84rem; }
      .quiz-status { align-items: flex-start; flex-direction: column; gap: 9px; }
      .quiz-status-copy { width: 100%; justify-content: space-between; }
      .quiz-options { padding-left: 0; }
      .quiz-feedback { margin-left: 0; }
      .quiz-option { font-size: 0.79rem; }
      .quiz-result { align-items: flex-start; flex-direction: column; }
      .quiz-result .btn { width: 100%; }

      .back-label { display: none; }
      .back-button { width: 42px; padding: 0; justify-content: center; }
      .settings-button { width: 40px; height: 40px; }
      .settings-modal { width: calc(100% - 16px); max-height: calc(100vh - 16px); }
      .settings-panel { border-radius: 22px; }
      .settings-head { padding: 18px 17px 14px; }
      .settings-body { padding: 17px; }
      .settings-segment { grid-template-columns: 1fr; }
      .settings-choice { min-height: 56px; }
      .settings-head h2 { font-size: 1.35rem; }
      .coming-soon { font-size: 0.42rem; }
    }

    @media (max-width: 390px) {
      .dashboard-title { font-size: clamp(2.35rem, 12vw, 2.9rem); }
      .course-ring { width: 82px; height: 82px; }
      .course-summary-copy p { font-size: 0.64rem; }
      .level-badge, .lesson-badge { font-size: 0.48rem; }
    }

    /* ============================================================
       SECTION NAVIGATION / STORIES
       ============================================================ */
    .topbar-context { margin: 0; flex: 1 1 auto; }
    .topbar-actions { margin-left: 0; }

    .view-switch {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      flex: 0 0 auto;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.022);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    }
    .view-switch-btn {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 11px;
      border: 1px solid transparent;
      border-radius: 9px;
      background: transparent;
      color: var(--dim);
      font-family: var(--font);
      font-size: 0.65rem;
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;
      transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }
    .view-switch-btn .icon { width: 14px; height: 14px; }
    .view-switch-btn.is-active {
      border-color: rgba(var(--accent-rgb), 0.16);
      background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.13), rgba(var(--accent2-rgb), 0.055));
      color: var(--cyan-bright);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    }
    .view-switch-btn:active { transform: scale(0.985); }
    .view-switch-count {
      min-width: 18px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      padding: 0 4px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.47rem;
      line-height: 1;
    }
    .view-switch-btn.is-active .view-switch-count {
      color: var(--emerald-bright);
      border-color: rgba(var(--accent2-bright-rgb), 0.16);
      background: rgba(var(--accent2-rgb), 0.07);
    }

    .section-tabs {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px;
      padding: 5px;
      margin-bottom: clamp(26px, 4vw, 38px);
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.022);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }
    .section-tab {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 15px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: var(--muted);
      font-size: 0.75rem;
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;
      transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }
    .section-tab .icon { width: 15px; height: 15px; }
    .section-tab.is-active {
      border-color: rgba(var(--accent-rgb), 0.17);
      background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent2-rgb), 0.05));
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    .section-tab.is-active .icon { color: var(--cyan-bright); }
    .section-tab-count {
      min-width: 20px;
      height: 20px;
      display: inline-grid;
      place-items: center;
      padding: 0 5px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.48rem;
    }
    .section-tab.is-active .section-tab-count {
      color: var(--emerald-bright);
      border-color: rgba(var(--accent2-bright-rgb), 0.16);
      background: rgba(var(--accent2-rgb), 0.07);
    }

    .lesson-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 292px), 1fr));
    }

    .stories-hub {
      width: min(1240px, 100%);
      margin: 0 auto;
      padding: clamp(42px, 6vw, 74px) clamp(20px, 4vw, 32px) clamp(70px, 9vw, 110px);
    }
    .stories-hub .dashboard-hero { align-items: center; }
    .stories-hub .dashboard-title { font-size: clamp(2.7rem, 5.9vw, 5.6rem); }
    .stories-hub .dashboard-stats { margin-top: clamp(28px, 4vw, 40px); }
    .stories-section { margin-top: clamp(42px, 6vw, 64px); }
    .stories-section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 17px;
    }
    .stories-section-head h2 {
      margin: 0;
      font-size: clamp(1.55rem, 3vw, 2.15rem);
      font-weight: 650;
      letter-spacing: -0.04em;
    }
    .stories-section-head p { margin: 8px 0 0; color: var(--dim); font-size: 0.72rem; }
    .stories-section-count {
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.56rem;
      letter-spacing: 0.075em;
      white-space: nowrap;
      padding-bottom: 3px;
    }

    .story-list { display: grid; gap: 15px; }
    .story-card {
      position: relative;
      display: grid;
      grid-template-columns: 226px minmax(0, 1fr);
      overflow: hidden;
      border: 1px solid rgba(var(--accent-rgb), 0.14);
      border-radius: 27px;
      background: linear-gradient(155deg, rgba(21, 24, 29, 0.79), rgba(9, 11, 14, 0.83));
      box-shadow: 0 28px 80px -54px rgba(var(--accent-deep-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
      animation: rise-in 0.65s var(--ease) both;
      animation-delay: calc(var(--i, 0) * 65ms);
    }
    .story-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.32), transparent 80%);
      pointer-events: none;
    }
    .story-card.is-read { border-color: rgba(var(--accent2-rgb), 0.2); }
    .story-spine {
      position: relative;
      min-height: 255px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      padding: 21px;
      border-right: 1px solid var(--line-soft);
      background:
        radial-gradient(300px 220px at 15% 0%, rgba(var(--accent-rgb), 0.17), transparent 64%),
        linear-gradient(155deg, rgba(10, 22, 26, 0.92), rgba(8, 10, 13, 0.96));
    }
    .story-spine::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
      background-size: 32px 32px;
      -webkit-mask-image: linear-gradient(135deg, #000, transparent 74%);
      mask-image: linear-gradient(135deg, #000, transparent 74%);
    }
    .story-spine-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.52rem;
      letter-spacing: 0.12em;
    }
    .story-spine-top span:last-child { color: var(--dim); }
    .story-number {
      position: relative;
      z-index: 1;
      margin: 6px 0;
      background: linear-gradient(140deg, var(--accent-pale), var(--cyan-bright) 40%, var(--emerald-bright));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-family: var(--mono);
      font-size: 4.65rem;
      font-weight: 600;
      line-height: 0.9;
      letter-spacing: -0.11em;
    }
    .story-spine-bottom {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.52rem;
      letter-spacing: 0.04em;
    }
    .story-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 7px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      color: var(--dim);
      font-size: 0.46rem;
      letter-spacing: 0.06em;
    }
    .story-status::before {
      content: "";
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: currentColor;
    }
    .story-card.is-read .story-status {
      color: var(--emerald-bright);
      border-color: rgba(var(--accent2-bright-rgb), 0.18);
      background: rgba(var(--accent2-rgb), 0.055);
    }

    .story-content {
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: clamp(21px, 3.2vw, 29px);
    }
    .story-meta-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      margin-bottom: 12px;
    }
    .story-chip {
      display: inline-flex;
      align-items: center;
      min-height: 25px;
      padding: 0 7px;
      border: 1px solid var(--line-soft);
      border-radius: 6px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.49rem;
      letter-spacing: 0.04em;
    }
    .story-chip.is-read {
      color: var(--emerald-bright);
      border-color: rgba(var(--accent2-bright-rgb), 0.17);
      background: rgba(var(--accent2-rgb), 0.05);
    }
    .story-card h2 {
      margin: 0;
      font-size: clamp(1.45rem, 2.7vw, 1.9rem);
      font-weight: 650;
      line-height: 1.12;
      letter-spacing: -0.04em;
      text-wrap: balance;
    }
    .story-card-subtitle {
      max-width: 62ch;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.65;
    }
    .story-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: auto;
      padding-top: 21px;
    }
    .story-card-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 13px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.53rem;
      line-height: 1.5;
    }
    .story-card-stats span { display: inline-flex; align-items: center; gap: 5px; }
    .story-card-stats .icon { width: 12px; height: 12px; }
    .story-open { min-height: 50px; flex: 0 0 auto; padding: 0 17px; font-size: 0.76rem; }

    .story-reader {
      width: min(980px, 100%);
      margin: 0 auto;
      padding: clamp(38px, 5.5vw, 68px) clamp(18px, 4vw, 32px) clamp(70px, 9vw, 100px);
    }
    .story-reader-hero { animation: rise-in 0.7s var(--ease) both; }
    .story-reader-kicker {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 9px;
      margin-bottom: 18px;
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.59rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .story-reader-kicker span:last-child { color: var(--dim); }
    .story-reader h1 {
      max-width: 880px;
      margin: 0;
      font-size: clamp(2.55rem, 6vw, 5rem);
      font-weight: 700;
      line-height: 0.98;
      letter-spacing: -0.062em;
      text-wrap: balance;
    }
    .story-reader-subtitle {
      max-width: 700px;
      margin: 20px 0 0;
      color: #b8b8c0;
      font-size: clamp(0.98rem, 1.4vw, 1.1rem);
      line-height: 1.7;
    }
    .story-reader-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px;
      margin-top: 22px;
    }
    .story-meta-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 32px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.022);
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.56rem;
      letter-spacing: 0.025em;
    }
    .story-meta-chip .icon { width: 13px; height: 13px; }
    .story-meta-chip.is-read {
      color: var(--emerald-bright);
      border-color: rgba(var(--accent2-bright-rgb), 0.17);
      background: rgba(var(--accent2-rgb), 0.05);
    }
    .story-text-card {
      margin-top: clamp(24px, 4vw, 36px);
      animation: block-in 0.65s 0.08s var(--ease) both;
    }
    .story-text-card .reading-prose { max-width: 71ch; margin: 0 auto; }
    .story-reader-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 24px;
      padding: 12px 14px;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.019);
    }
    .story-reader-toolbar .reading-length { color: var(--dim); }
    .story-reader-toolbar .glossary-pill strong { color: var(--cyan-bright); }
    .story-read-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 28px;
      padding-top: 22px;
      border-top: 1px solid var(--line-soft);
    }
    .story-read-button { min-height: 56px; }
    .story-read-button.is-read {
      border-color: rgba(var(--accent2-bright-rgb), 0.35);
      background: rgba(var(--accent2-rgb), 0.12);
      color: #b9f6df;
    }
    .story-read-note {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--dim);
      font-size: 0.68rem;
      line-height: 1.5;
    }
    .story-read-note .icon { width: 13px; height: 13px; color: var(--emerald-bright); }
    .stories-empty {
      padding: 42px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.02);
      color: var(--muted);
      text-align: center;
    }

    @media (hover: hover) {
      .view-switch-btn:hover { color: var(--text); }
      .section-tab:hover { color: var(--text); }
      .story-card:hover { border-color: rgba(var(--accent-rgb), 0.24); }
      .story-open:hover { transform: translateY(-1px); }
    }

    @media (max-width: 1100px) {
      .topbar-context { display: none; }
      .view-switch { margin-left: auto; }
    }

    @media (max-width: 960px) {
      .lesson-grid { grid-template-columns: 1fr; }
      .story-card { grid-template-columns: 195px minmax(0, 1fr); }
    }

    @media (max-width: 760px) {
      .topbar-inner {
        min-height: 0;
        flex-wrap: wrap;
        gap: 8px 10px;
        padding-top: 8px;
        padding-bottom: 8px;
      }
      .view-switch {
        order: 5;
        width: 100%;
        margin-left: 0;
        padding: 5px;
        border-radius: 14px;
      }
      .view-switch-btn { flex: 1; min-height: 40px; font-size: 0.65rem; }
      .topbar-actions { margin-left: auto; }
      .lesson-block { scroll-margin-top: 152px; }

      .stories-hub { padding-top: 36px; }
      .stories-hub .dashboard-title { font-size: clamp(2.45rem, 12vw, 4rem); }
      .stories-section-head { align-items: flex-start; flex-direction: column; gap: 6px; }
      .story-card { grid-template-columns: 1fr; }
      .story-spine {
        min-height: 155px;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
      }
      .story-number { font-size: 3.8rem; }
      .story-card-footer { align-items: stretch; flex-direction: column; gap: 12px; }
      .story-open { width: 100%; }
      .story-card-stats { justify-content: center; }
      .section-tabs { display: flex; width: 100%; }
      .section-tab { flex: 1; justify-content: center; padding: 0 9px; font-size: 0.69rem; }

      .story-reader { padding-top: 34px; }
      .story-reader h1 { font-size: clamp(2.25rem, 11vw, 3.6rem); }
      .story-reader-subtitle { margin-top: 16px; font-size: 0.96rem; }
      .story-reader-toolbar { margin-bottom: 19px; padding: 10px 11px; }
      .story-read-footer { align-items: stretch; flex-direction: column; }
      .story-read-footer .btn { width: 100%; }
      .story-read-note { justify-content: center; text-align: center; }
      .story-text-card { padding: 21px 17px; }
    }

    @media (max-width: 390px) {
      .view-switch-btn { padding: 0 7px; }
      .section-tab { font-size: 0.64rem; gap: 5px; }
      .section-tab-count { display: none; }
      .story-spine { min-height: 140px; }
      .story-number { font-size: 3.3rem; }
    }

    /* ============================================================
       VOCABULARY VAULT / PROFILE / DATA TOOLS
       ============================================================ */
    .profile-button {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 4px 10px 4px 5px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.028);
      color: var(--muted);
      cursor: pointer;
      transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
    }
    .profile-button.is-signed-in {
      border-color: rgba(var(--accent2-bright-rgb), 0.18);
      background: rgba(var(--accent2-rgb), 0.045);
      color: var(--text-soft);
    }
    .profile-avatar {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid rgba(var(--accent-rgb), 0.2);
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent2-rgb), 0.1));
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.58rem;
      font-weight: 650;
      line-height: 1;
    }
    .profile-button.is-signed-in .profile-avatar {
      border-color: rgba(var(--accent2-bright-rgb), 0.28);
      color: #b9f6df;
      background: linear-gradient(145deg, rgba(var(--accent2-bright-rgb), 0.35), rgba(var(--accent-deep-rgb), 0.16));
    }
    .profile-avatar .icon { width: 14px; height: 14px; }
    .profile-label {
      max-width: 88px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: var(--mono);
      font-size: 0.57rem;
      letter-spacing: 0.035em;
    }

    .language-option:not(:disabled) { cursor: pointer; }
    .language-option:not(.is-active) .lang-check { display: none; }
    .language-option:not(.is-active):not(:disabled):hover {
      border-color: rgba(var(--accent-rgb), 0.22);
      color: var(--text-soft);
      background: rgba(var(--accent-rgb), 0.04);
    }

    .dashboard-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: clamp(26px, 4vw, 38px);
    }
    .dashboard-topline .section-tabs { margin-bottom: 0; }

    .language-switch {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 5px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: rgba(255, 255, 255, 0.022);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }
    .language-switch-label {
      padding: 0 7px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.48rem;
      letter-spacing: 0.1em;
    }
    .language-choice {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 10px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: var(--dim);
      font-size: 0.62rem;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }
    .language-choice span {
      font-family: var(--mono);
      font-size: 0.48rem;
      letter-spacing: 0.05em;
    }
    .language-choice.is-active {
      border-color: rgba(var(--accent-rgb), 0.17);
      background: rgba(var(--accent-rgb), 0.08);
      color: var(--cyan-bright);
    }

    .data-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .data-tool-btn { min-height: 46px; padding: 0 13px; font-size: 0.72rem; }
    .data-tool-btn .icon { width: 15px; height: 15px; }

    .vocab-hub {
      width: min(1240px, 100%);
      margin: 0 auto;
      padding: clamp(42px, 6vw, 74px) clamp(20px, 4vw, 32px) clamp(70px, 9vw, 110px);
    }
    .vocab-hub .dashboard-title { font-size: clamp(2.7rem, 5.9vw, 5.6rem); }
    .vocab-hub .dashboard-actions { gap: 8px; }

    .vocab-toolbar {
      display: flex;
      align-items: stretch;
      gap: 10px;
      margin-top: clamp(28px, 4vw, 38px);
    }
    .vocab-search {
      position: relative;
      flex: 1;
      min-width: 0;
    }
    .vocab-search .icon {
      position: absolute;
      top: 50%;
      left: 16px;
      width: 17px;
      height: 17px;
      color: var(--dim);
      transform: translateY(-50%);
      pointer-events: none;
    }
    .vocab-search input {
      width: 100%;
      min-height: 54px;
      padding: 0 16px 0 45px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.025);
      color: var(--text);
      font-size: 0.84rem;
      outline: none;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .vocab-search input::placeholder { color: var(--dim); opacity: 1; }
    .vocab-search input:focus {
      border-color: rgba(var(--accent-rgb), 0.3);
      box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.04);
    }
    .vocab-toolbar-actions { display: flex; gap: 7px; flex-wrap: wrap; }

    .vocab-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 15px;
    }
    .vocab-tag {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.02);
      color: var(--dim);
      font-size: 0.62rem;
      cursor: pointer;
      transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }
    .vocab-tag::before {
      content: "#";
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.55rem;
    }
    .vocab-tag.is-favorites::before {
      content: "★";
      color: var(--amber);
    }
    .vocab-tag.is-active {
      border-color: rgba(var(--accent-rgb), 0.24);
      background: rgba(var(--accent-rgb), 0.08);
      color: var(--cyan-bright);
    }
    .vocab-results-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 24px 0 12px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.56rem;
      letter-spacing: 0.05em;
    }
    .vocab-results-head strong { color: var(--text-soft); font-weight: 500; }
    .vocab-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
      gap: 11px;
    }
    .vocab-item {
      position: relative;
      min-height: 218px;
      display: flex;
      flex-direction: column;
      padding: 17px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: linear-gradient(155deg, rgba(22, 25, 30, 0.7), rgba(9, 11, 14, 0.78));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      cursor: pointer;
      transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
    }
    .vocab-item.is-favorite {
      border-color: rgba(251, 191, 36, 0.22);
      background:
        radial-gradient(250px 150px at 100% 0%, rgba(251, 191, 36, 0.065), transparent 68%),
        linear-gradient(155deg, rgba(23, 24, 24, 0.74), rgba(9, 11, 14, 0.8));
    }
    .vocab-item:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 2px; }
    .vocab-item-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    .vocab-word {
      min-width: 0;
      color: var(--text);
      font-size: clamp(1.18rem, 2.2vw, 1.42rem);
      font-weight: 650;
      line-height: 1.18;
      letter-spacing: -0.035em;
      overflow-wrap: anywhere;
    }
    .star-button {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.12);
      color: #5d626b;
      font-size: 1.05rem;
      line-height: 1;
      cursor: pointer;
      transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }
    .star-button.is-starred {
      border-color: rgba(251, 191, 36, 0.24);
      background: rgba(251, 191, 36, 0.08);
      color: var(--amber);
      text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
    }
    .vocab-translation {
      margin: 12px 0 0;
      color: var(--accent-2-pale);
      font-size: 0.93rem;
      font-weight: 550;
      line-height: 1.4;
    }
    .vocab-description {
      margin: 7px 0 0;
      color: var(--dim);
      font-size: 0.73rem;
      line-height: 1.55;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .vocab-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 12px;
    }
    .vocab-card-tag {
      padding: 4px 6px;
      border: 1px solid var(--line-soft);
      border-radius: 6px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.47rem;
      letter-spacing: 0.02em;
    }
    .vocab-item-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: auto;
      padding-top: 13px;
    }
    .vocab-card-state {
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.48rem;
      letter-spacing: 0.07em;
    }
    .vocab-item.is-favorite .vocab-card-state { color: #d5b15e; }
    .vocab-edit-hint {
      color: #535861;
      font-family: var(--mono);
      font-size: 0.47rem;
      letter-spacing: 0.05em;
    }
    .vocab-empty {
      grid-column: 1 / -1;
      padding: 38px 20px;
      border: 1px dashed rgba(var(--accent-rgb), 0.15);
      border-radius: 18px;
      color: var(--dim);
      font-size: 0.82rem;
      text-align: center;
    }
    .vocab-empty .btn { margin-top: 14px; }

    .profile-modal, .word-modal, .import-modal {
      width: min(540px, calc(100% - 24px));
      max-width: none;
      max-height: calc(100vh - 24px);
      margin: auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text);
      overflow: visible;
    }
    .word-modal { width: min(570px, calc(100% - 24px)); }
    .import-modal { width: min(700px, calc(100% - 24px)); }
    .profile-modal::backdrop, .word-modal::backdrop, .import-modal::backdrop {
      background: rgba(3, 5, 7, 0.74);
      -webkit-backdrop-filter: blur(12px) saturate(120%);
      backdrop-filter: blur(12px) saturate(120%);
    }
    .profile-panel, .word-panel, .import-panel {
      max-height: calc(100vh - 24px);
      overflow-y: auto;
      border: 1px solid rgba(var(--accent-rgb), 0.22);
      border-radius: 27px;
      background: linear-gradient(155deg, rgba(20, 24, 28, 0.97), rgba(8, 10, 13, 0.98));
      box-shadow: 0 50px 140px -24px rgba(0, 0, 0, 0.9), 0 0 70px -36px rgba(var(--accent-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      -webkit-backdrop-filter: blur(30px) saturate(135%);
      backdrop-filter: blur(30px) saturate(135%);
    }
    .profile-modal[open] .profile-panel,
    .word-modal[open] .word-panel,
    .import-modal[open] .import-panel { animation: settings-in 0.34s var(--ease) both; }

    .profile-head, .word-head, .import-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 21px 22px 17px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(13, 16, 20, 0.92);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }
    .profile-head h2, .word-head h2, .import-head h2 {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 650;
      letter-spacing: -0.04em;
      line-height: 1.1;
    }
    .profile-head .icon-btn, .word-head .icon-btn, .import-head .icon-btn { width: 42px; height: 42px; border-radius: 11px; }
    .profile-body, .word-form, .import-body { padding: 20px 22px 22px; }

    .profile-hero { display: flex; align-items: center; gap: 16px; }
    .profile-avatar-large {
      width: 74px;
      height: 74px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid rgba(var(--accent-rgb), 0.24);
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent2-rgb), 0.12));
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 1.15rem;
      font-weight: 650;
      box-shadow: 0 0 35px -12px rgba(var(--accent-rgb), 0.55);
    }
    .profile-identity { min-width: 0; }
    .profile-provider {
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.5rem;
      letter-spacing: 0.11em;
    }
    .profile-identity h3 { margin: 5px 0 0; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.025em; }
    .profile-identity p { margin: 5px 0 0; color: var(--dim); font-size: 0.7rem; line-height: 1.55; }
    .profile-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 20px;
    }
    .profile-info {
      padding: 12px 13px;
      border: 1px solid var(--line-soft);
      border-radius: 11px;
      background: rgba(255, 255, 255, 0.019);
    }
    .profile-info span {
      display: block;
      color: var(--dim);
      font-size: 0.58rem;
      letter-spacing: 0.02em;
    }
    .profile-info strong {
      display: block;
      margin-top: 4px;
      color: var(--text-soft);
      font-family: var(--mono);
      font-size: 0.68rem;
      font-weight: 500;
    }
    .profile-sync-note {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: 12px;
      padding: 11px 12px;
      border: 1px solid rgba(var(--accent-rgb), 0.09);
      border-radius: 10px;
      background: rgba(var(--accent-rgb), 0.035);
    }
    .profile-sync-note .signal {
      width: 5px;
      height: 5px;
      margin-top: 5px;
      border-radius: 50%;
      background: var(--emerald-bright);
      box-shadow: 0 0 8px rgba(var(--accent2-bright-rgb), 0.6);
      flex: 0 0 auto;
    }
    .profile-sync-note p { margin: 0; color: var(--dim); font-size: 0.66rem; line-height: 1.55; }
    .google-button {
      width: 100%;
      min-height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 16px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 13px;
      background: #f8fafc;
      color: #14181d;
      font-size: 0.8rem;
      font-weight: 650;
      cursor: pointer;
      transition: background 0.18s ease, transform 0.18s ease;
    }
    .google-button:active { transform: scale(0.99); }
    .google-button:disabled { opacity: 0.65; cursor: wait; }
    .google-g {
      font-family: Arial, sans-serif;
      font-size: 1.2rem;
      font-weight: 800;
      background: conic-gradient(from -35deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .profile-signout { width: 100%; min-height: 46px; margin-top: 9px; font-size: 0.72rem; }
    .profile-disclaimer { margin: 13px 0 0; color: #4f545d; font-family: var(--mono); font-size: 0.51rem; line-height: 1.55; text-align: center; }

    .word-form { display: grid; gap: 13px; }
    .word-field { display: grid; gap: 6px; }
    .word-field > span { color: var(--muted); font-size: 0.67rem; }
    .word-field input, .word-field textarea {
      width: 100%;
      min-height: 50px;
      padding: 12px 13px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: rgba(0, 0, 0, 0.18);
      color: var(--text-soft);
      font-size: 0.84rem;
      line-height: 1.5;
      outline: none;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .word-field textarea { resize: vertical; min-height: 88px; }
    .word-field input:focus, .word-field textarea:focus {
      border-color: rgba(var(--accent-rgb), 0.32);
      box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.04);
    }
    .word-field input::placeholder, .word-field textarea::placeholder { color: #4e535b; }
    .word-favorite-toggle {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 46px;
      padding: 9px 11px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: rgba(255, 255, 255, 0.018);
      color: var(--muted);
      font-size: 0.7rem;
      cursor: pointer;
    }
    .word-favorite-toggle input { position: absolute; opacity: 0; pointer-events: none; }
    .word-favorite-box {
      width: 25px;
      height: 25px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 7px;
      color: #5d626b;
      font-size: 0.8rem;
    }
    .word-favorite-toggle input:checked + .word-favorite-box {
      border-color: rgba(251, 191, 36, 0.25);
      background: rgba(251, 191, 36, 0.08);
      color: var(--amber);
    }
    .word-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 5px; }
    .word-form-actions .btn { min-height: 49px; }

    .import-body { display: flex; flex-direction: column; }
    .import-lead { margin: 0; color: var(--muted); font-size: 0.77rem; line-height: 1.6; }
    .import-keys { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
    .import-keys code {
      padding: 5px 7px;
      border: 1px solid rgba(var(--accent-rgb), 0.12);
      border-radius: 6px;
      background: rgba(var(--accent-rgb), 0.04);
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.58rem;
    }
    .import-textarea {
      width: 100%;
      min-height: 250px;
      margin-top: 12px;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.24);
      color: #b9c8c6;
      font-family: var(--mono);
      font-size: 0.7rem;
      line-height: 1.55;
      resize: vertical;
      outline: none;
    }
    .import-textarea:focus { border-color: rgba(var(--accent-rgb), 0.32); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.04); }
    .import-status { min-height: 18px; margin: 9px 0 0; color: var(--dim); font-size: 0.66rem; line-height: 1.45; }
    .import-status.is-error { color: #fda4af; }
    .import-status.is-success { color: var(--emerald-bright); }
    .import-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
    .import-note { margin: 11px 0 0; color: #50555e; font-family: var(--mono); font-size: 0.5rem; line-height: 1.55; }
    .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

    body.font-large .vocab-description { font-size: 0.8rem; }
    body.font-large .vocab-translation { font-size: 1rem; }

    @media (hover: hover) {
      .profile-button:hover { border-color: rgba(var(--accent-rgb), 0.24); background: rgba(var(--accent-rgb), 0.055); color: var(--text); }
      .language-choice:hover { color: var(--text); }
      .vocab-item:hover { border-color: rgba(var(--accent-rgb), 0.25); transform: translateY(-1px); }
      .vocab-tag:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.15); }
      .star-button:hover { color: var(--amber); border-color: rgba(251, 191, 36, 0.25); }
      .google-button:hover { background: #fff; }
    }

    @media (max-width: 1100px) {
      .profile-label { display: none; }
      .profile-button { padding: 4px; }
      .topbar-inner { gap: 14px; }
    }

    @media (max-width: 900px) {
      .level-pill, .progress-pill { display: none; }
      .view-switch-btn { padding: 0 9px; }
    }

    @media (max-width: 760px) {
      .dashboard-topline { align-items: stretch; flex-direction: column; }
      .dashboard-topline .section-tabs { width: 100%; }
      .language-switch { width: 100%; justify-content: stretch; }
      .language-choice { flex: 1; justify-content: center; min-height: 42px; }
      .language-switch-label { display: none; }
      .progress-pill { display: none; }
      .topbar-actions { gap: 6px; }
      .profile-button { min-height: 38px; }
      .profile-avatar { width: 28px; height: 28px; }
      .vocab-toolbar { flex-direction: column; }
      .vocab-toolbar-actions .btn { flex: 1; }
      .vocab-grid { grid-template-columns: 1fr; }
      .vocab-item { min-height: 195px; }
      .profile-head, .word-head, .import-head { padding: 17px 17px 14px; }
      .profile-body, .word-form, .import-body { padding: 17px; }
      .profile-modal, .word-modal, .import-modal { width: calc(100% - 16px); }
      .profile-head h2, .word-head h2, .import-head h2 { font-size: 1.35rem; }
      .profile-hero { align-items: flex-start; }
      .profile-avatar-large { width: 62px; height: 62px; font-size: 1rem; }
      .profile-grid { grid-template-columns: 1fr; }
      .import-textarea { min-height: 220px; }
      .word-form-actions, .import-actions { flex-direction: column-reverse; }
      .word-form-actions .btn, .import-actions .btn { width: 100%; }
    }

    @media (max-width: 360px) {
      .brand-name { display: none; }
      .view-switch-btn { font-size: 0.58rem; padding: 0 5px; gap: 4px; }
      .view-switch-count { min-width: 16px; height: 16px; }
    }

    /* ============================================================
       LANGUAGE PICKER / MULTILINGUAL UI
       ============================================================ */
    .language-pill {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 10px;
      border: 1px solid rgba(var(--accent-rgb), 0.17);
      border-radius: 999px;
      background: rgba(var(--accent-rgb), 0.045);
      color: var(--text-soft);
      font-family: var(--mono);
      font-size: 0.56rem;
      letter-spacing: 0.02em;
      white-space: nowrap;
      cursor: pointer;
      transition: border-color 0.18s ease, background 0.18s ease;
    }
    .language-pill-code { color: var(--cyan-bright); font-weight: 650; }
    .language-pill-label { color: var(--muted); }
    .language-pill .icon { width: 12px; height: 12px; color: var(--dim); }
    .language-pill:active { transform: scale(0.985); }

    .language-switch { flex-wrap: wrap; }
    .language-choice:disabled { cursor: not-allowed; }
    .language-premium {
      border-style: dashed;
      color: #5d626b;
      opacity: 0.72;
      font-size: 0.56rem;
    }
    .language-premium small {
      color: var(--amber);
      font-family: var(--mono);
      font-size: 0.44rem;
      letter-spacing: 0.04em;
    }
    .language-choice.is-premium { cursor: not-allowed; }

    .language-modal {
      width: min(560px, calc(100% - 24px));
      max-width: none;
      max-height: calc(100vh - 24px);
      margin: auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text);
      overflow: visible;
    }
    .language-modal::backdrop {
      background: rgba(3, 5, 7, 0.74);
      -webkit-backdrop-filter: blur(12px) saturate(120%);
      backdrop-filter: blur(12px) saturate(120%);
    }
    .language-panel {
      max-height: calc(100vh - 24px);
      overflow-y: auto;
      border: 1px solid rgba(var(--accent-rgb), 0.22);
      border-radius: 27px;
      background: linear-gradient(155deg, rgba(20, 24, 28, 0.97), rgba(8, 10, 13, 0.98));
      box-shadow: 0 50px 140px -24px rgba(0, 0, 0, 0.9), 0 0 70px -36px rgba(var(--accent-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      -webkit-backdrop-filter: blur(30px) saturate(135%);
      backdrop-filter: blur(30px) saturate(135%);
    }
    .language-modal[open] .language-panel { animation: settings-in 0.34s var(--ease) both; }
    .language-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 21px 22px 17px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(13, 16, 20, 0.92);
    }
    .language-head h2 {
      margin: 0;
      font-size: 1.5rem;
      font-weight: 650;
      letter-spacing: -0.04em;
      line-height: 1.1;
    }
    .language-head .icon-btn { width: 42px; height: 42px; border-radius: 11px; }
    .language-body { padding: 20px 22px 22px; }
    .language-lead { margin: 0 0 13px; color: var(--muted); font-size: 0.76rem; line-height: 1.6; }
    .language-note { margin: 14px 0 0; color: #50555e; font-family: var(--mono); font-size: 0.52rem; line-height: 1.6; }

    .google-auth-host {
      display: grid;
      place-items: center;
      min-height: 56px;
      margin-top: 16px;
    }
    .google-auth-host .google-button { margin-top: 0; }
    .google-button-disabled {
      width: 100%;
      min-height: 54px;
      border: 1px dashed rgba(255, 255, 255, 0.13);
      border-radius: 13px;
      background: rgba(255, 255, 255, 0.03);
      color: var(--dim);
      font-size: 0.74rem;
      cursor: not-allowed;
    }
    .google-auth-loading {
      width: 100%;
      min-height: 54px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: rgba(255, 255, 255, 0.025);
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.62rem;
    }
    .google-auth-note {
      min-height: 17px;
      margin: 9px 0 0;
      color: var(--dim);
      font-size: 0.62rem;
      line-height: 1.55;
      text-align: center;
    }
    .profile-avatar img, .profile-avatar-large img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      border-radius: 50%;
    }
    .profile-disclaimer code {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.48rem;
    }

    /* ============================================================
       ACCOUNT / AUTH / PROFILE METADATA
       ============================================================ */
    .auth-signed-out, .auth-signed-in { display: block; }
    .auth-signed-out[hidden], .auth-signed-in[hidden] { display: none !important; }
    .auth-tabs {
      display: flex;
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.16);
    }
    .auth-tab {
      flex: 1;
      min-height: 40px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.6rem;
      cursor: pointer;
    }
    .auth-tab.is-active {
      border-color: rgba(var(--accent-rgb), 0.22);
      background: rgba(var(--accent-rgb), 0.08);
      color: var(--text-soft);
    }
    .auth-local-note { margin: 12px 0 0; color: var(--dim); font-size: 0.66rem; line-height: 1.55; }
    .auth-form, .profile-form, .password-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
    .profile-field { display: flex; flex-direction: column; gap: 5px; color: var(--text-soft); font-size: 0.66rem; font-weight: 600; }
    .profile-field input {
      min-height: 47px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.2);
      color: var(--text);
      font: inherit;
      font-size: 0.75rem;
      outline: 0;
    }
    .profile-field input:focus { border-color: rgba(var(--accent-rgb), 0.35); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.045); }
    .auth-submit { min-height: 46px; width: 100%; margin-top: 2px; }
    .auth-status, .profile-status {
      min-height: 17px;
      margin: 0;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.58rem;
      line-height: 1.45;
    }
    .auth-status.is-error { color: var(--danger); }
    .auth-status.is-success { color: var(--emerald-bright); }
    .auth-divider {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 14px 0 3px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.52rem;
    }
    .auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line-soft); }
    .profile-form, .password-form { padding-top: 14px; border-top: 1px solid var(--line-soft); }
    .profile-field-label { color: var(--text-soft); font-size: 0.66rem; font-weight: 600; }
    .avatar-presets-wrap { display: flex; flex-direction: column; gap: 6px; }
    .avatar-presets { display: flex; flex-wrap: wrap; gap: 5px; }
    .avatar-preset {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.025);
      color: var(--text-soft);
      font-size: 1rem;
      cursor: pointer;
    }
    .avatar-preset:first-child { font-family: var(--mono); font-size: 0.58rem; }
    .avatar-preset.is-active { border-color: rgba(var(--accent-rgb), 0.42); background: rgba(var(--accent-rgb), 0.11); }
    .profile-avatar-preview {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(var(--accent-rgb), 0.24);
      border-radius: 50%;
      background: rgba(var(--accent-rgb), 0.09);
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.72rem;
    }
    .profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .avatar-visual { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
    .avatar-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .avatar-initials { font-family: var(--mono); font-weight: 700; }
    .avatar-emoji { font-size: 1.25em; line-height: 1; }
    .profile-warning {
      width: 20px;
      height: 20px;
      display: inline-grid;
      place-items: center;
      border: 1px solid rgba(251, 191, 36, 0.5);
      border-radius: 50%;
      background: rgba(251, 191, 36, 0.14);
      color: var(--amber);
      font-family: var(--mono);
      font-size: 0.68rem;
      font-weight: 700;
      cursor: help;
    }
    .profile-warning[hidden] { display: none !important; }
    .profile-sync-note p { min-height: 1em; }
    .google-auth-host[hidden] { display: none !important; }

    @media (max-width: 560px) {
      .auth-form, .profile-form, .password-form { gap: 9px; }
      .profile-field input { min-height: 46px; }
      .auth-tab { font-size: 0.56rem; }
    }

    @media (hover: hover) {
      .language-pill:hover { border-color: rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.08); }
    }

    @media (max-width: 900px) {
      .language-pill-label { display: none; }
    }

    @media (max-width: 760px) {
      .language-modal { width: calc(100% - 16px); }
      .language-head { padding: 17px 17px 14px; }
      .language-body { padding: 17px; }
      .language-head h2 { font-size: 1.35rem; }
      .language-premium { flex: 1 0 100%; justify-content: center; }
      .language-pill { min-height: 36px; padding: 0 8px; }
    }

    /* ============================================================
       SYNC STATUS + HEADER GOOGLE AUTH
       ============================================================ */
    .sync-pill {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.032);
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.54rem;
      letter-spacing: 0.01em;
      white-space: nowrap;
      cursor: default;
      transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    }
    .sync-emoji { font-size: 0.66rem; line-height: 1; }
    .sync-pill[data-state="synced"] {
      border-color: rgba(16, 185, 129, 0.24);
      background: rgba(16, 185, 129, 0.07);
      color: var(--emerald-bright);
    }
    .sync-pill[data-state="saving"] {
      border-color: rgba(251, 191, 36, 0.3);
      background: rgba(251, 191, 36, 0.075);
      color: var(--amber);
    }
    .sync-pill[data-state="local"] {
      border-color: var(--line);
      background: rgba(255, 255, 255, 0.032);
      color: var(--dim);
    }
    .sync-pill[data-state="blocked"] {
      border-color: rgba(251, 191, 36, 0.3);
      background: rgba(251, 191, 36, 0.07);
      color: var(--amber);
    }
    .google-header-btn {
      width: auto;
      height: 40px;
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      overflow: visible;
      border-radius: 999px;
    }
    .google-header-btn[hidden] { display: none !important; }

    @media (min-width: 1301px) {
      .google-header-btn:not([hidden]) ~ .profile-button { display: none; }
    }

    @media (max-width: 1300px) {
      .google-header-btn { display: none; }
    }

    @media (max-width: 1180px) {
      .sync-label { display: none; }
      .sync-pill { width: 36px; padding: 0; }
      .progress-pill { display: none; }
    }

    @media (max-width: 820px) {
      .back-button .back-label { display: none; }
      .back-button { width: 42px; padding: 0; }
      .topbar-actions { gap: 5px; }
    }

    @media (max-width: 700px) {
      .sync-pill { min-height: 36px; width: 34px; }
    }

    /* ============================================================
       IMPORT TABS + TEMPLATE TOOLBAR
       ============================================================ */
    .import-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
      padding: 4px;
      margin-bottom: 10px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(0, 0, 0, 0.2);
    }
    .import-tab {
      min-height: 44px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.64rem;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
    .import-tab.is-active {
      border-color: rgba(var(--accent-rgb), 0.2);
      background: rgba(var(--accent-rgb), 0.1);
      color: var(--cyan-bright);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    }
    .import-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .import-language {
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.51rem;
      line-height: 1.45;
    }
    .import-language strong { color: var(--muted); font-weight: 600; }
    .import-copy {
      min-height: 44px;
      padding: 0 14px;
      border-radius: 12px;
      font-family: var(--mono);
      font-size: 0.6rem;
      letter-spacing: 0.01em;
    }
    .import-textarea { min-height: 270px; }

    /* ============================================================
       THEME PRESETS
       ============================================================ */
    .theme-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .theme-choice {
      min-height: 72px;
      display: grid;
      grid-template-columns: 47px minmax(0, 1fr) 17px;
      align-items: center;
      gap: 9px;
      padding: 9px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.022);
      color: var(--muted);
      text-align: left;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
    .theme-choice.is-active {
      border-color: rgba(var(--accent-rgb), 0.3);
      background: rgba(var(--accent-rgb), 0.075);
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }
    .theme-choice.is-active .choice-check {
      border-color: var(--emerald-bright);
      background: rgba(var(--accent2-rgb), 0.18);
      color: var(--emerald-bright);
    }
    .theme-choice.is-active .choice-check::before { content: "✓"; }
    .theme-preview {
      width: 47px;
      height: 45px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 3px;
      padding: 8px 7px;
      border: 1px solid rgba(255, 255, 255, 0.11);
      border-radius: 10px;
      background: #0a0d11;
      overflow: hidden;
    }
    .theme-preview i {
      display: block;
      width: 8px;
      border-radius: 4px 4px 2px 2px;
      background: #22d3ee;
      box-shadow: 0 0 8px rgba(34, 211, 238, 0.45);
    }
    .theme-preview i:nth-child(1) { height: 13px; opacity: 0.58; }
    .theme-preview i:nth-child(2) { height: 25px; }
    .theme-preview i:nth-child(3) { height: 18px; opacity: 0.78; }
    .theme-glass { background: linear-gradient(145deg, #0d171c, #090b0e); }
    .theme-cyber { background: linear-gradient(145deg, #1b0927, #0b0612); }
    .theme-cyber i { background: #f472b6; box-shadow: 0 0 8px rgba(244, 114, 182, 0.62); }
    .theme-cyber i:nth-child(2) { background: #a78bfa; box-shadow: 0 0 8px rgba(167, 139, 250, 0.55); }
    .theme-hacker { background: #020604; border-color: rgba(0, 255, 102, 0.28); }
    .theme-hacker i { background: #00ff66; box-shadow: 0 0 8px rgba(0, 255, 102, 0.62); }
    .theme-nordic { background: linear-gradient(145deg, #20272d, #12171b); }
    .theme-nordic i { background: #b3cbd6; box-shadow: none; }
    .theme-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .theme-copy strong {
      display: block;
      color: var(--text-soft);
      font-size: 0.67rem;
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -0.005em;
    }
    .theme-copy small {
      display: block;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.43rem;
      line-height: 1.35;
    }
    .theme-choice.is-active .theme-copy small { color: var(--muted); }

    html[data-theme="nordic"] .page-glow { display: none; }
    body, .topbar, .card, .glass, .dash-lesson, .story-card, .settings-panel, .profile-panel, .import-panel, .language-panel {
      transition: background 0.28s ease, border-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
    }

    /* ============================================================
       MOBILE LESSON MAP
       ============================================================ */
    .mobile-toc { display: none; }
    .lesson-block { scroll-margin-top: 100px; }
    .mobile-toc-toggle {
      width: 100%;
      min-height: 58px;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) auto 16px;
      align-items: center;
      gap: 9px;
      padding: 7px 11px;
      border: 1px solid var(--line-cyan);
      border-radius: 16px;
      background: linear-gradient(155deg, rgba(18, 23, 27, 0.94), rgba(8, 11, 14, 0.94));
      color: var(--text);
      text-align: left;
      cursor: pointer;
      box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.045);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }
    .mobile-toc-icon {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(var(--accent-rgb), 0.2);
      border-radius: 9px;
      background: rgba(var(--accent-rgb), 0.07);
      color: var(--cyan-bright);
    }
    .mobile-toc-icon .icon { width: 15px; height: 15px; }
    .mobile-toc-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .mobile-toc-copy span {
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.47rem;
      letter-spacing: 0.12em;
    }
    .mobile-toc-copy strong {
      min-width: 0;
      overflow: hidden;
      color: var(--text);
      font-size: 0.72rem;
      font-weight: 600;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mobile-toc-percent {
      color: var(--cyan-bright);
      font-family: var(--mono);
      font-size: 0.55rem;
      font-variant-numeric: tabular-nums;
    }
    .mobile-toc-toggle > .icon {
      width: 14px;
      height: 14px;
      color: var(--dim);
      transition: transform 0.2s ease;
    }
    .mobile-toc-toggle[aria-expanded="true"] > .icon { transform: rotate(180deg); }
    .mobile-toc-panel {
      position: absolute;
      z-index: 45;
      top: calc(100% + 7px);
      left: 0;
      right: 0;
      max-height: min(58vh, 430px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 9px;
      border: 1px solid var(--line-cyan);
      border-radius: 18px;
      background: linear-gradient(155deg, rgba(18, 23, 27, 0.985), rgba(8, 11, 14, 0.985));
      box-shadow: 0 34px 80px -22px rgba(0, 0, 0, 0.92), 0 0 50px -30px rgba(var(--accent-rgb), 0.5);
      -webkit-backdrop-filter: blur(26px) saturate(140%);
      backdrop-filter: blur(26px) saturate(140%);
    }
    .mobile-toc-panel[hidden] { display: none !important; }
    .mobile-toc-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 5px 7px 9px;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.5rem;
      letter-spacing: 0.08em;
    }
    .mobile-toc-panel .toc-link { min-height: 50px; }
    .mobile-toc-panel .toc-label { font-size: 0.7rem; }
    .mobile-toc-panel .toc-type { font-size: 0.48rem; }

    /* ============================================================
       MOBILE BOTTOM SHEET TRANSLATION
       ============================================================ */
    @media (max-width: 700px) {
      .translation-panel {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: min(60vh, 520px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 24px 18px calc(18px + env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 24px 24px 0 0;
        background: linear-gradient(165deg, rgba(18, 24, 29, 0.99), rgba(7, 10, 13, 0.995));
        box-shadow: 0 -30px 90px -30px rgba(0, 0, 0, 0.95), 0 0 60px -30px rgba(var(--accent-rgb), 0.42);
        transform: translateY(100%);
      }
      .translation-panel.is-open { transform: translateY(0); }
      .translation-panel::before {
        inset: 0 0 auto 0;
        width: auto;
        height: 3px;
        border-radius: 24px 24px 0 0;
        background: linear-gradient(90deg, var(--cyan-bright), var(--emerald-bright), var(--cyan-bright));
      }
      .translation-panel::after {
        content: "";
        position: absolute;
        top: 9px;
        left: 50%;
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18);
        transform: translateX(-50%);
      }
      .translation-head { margin-top: 2px; }
      .translation-head .icon-btn { width: 44px; height: 44px; }
      .translation-meaning { font-size: 1rem; }
      .translation-context p { font-size: 0.76rem; }
    }

    /* ============================================================
       MOBILE TAP TARGETS + COMPACT CONTROLS
       ============================================================ */
    @media (max-width: 930px) {
      .mobile-toc {
        display: block;
        position: sticky;
        top: 82px;
        z-index: 35;
        margin-bottom: 3px;
      }
      .lesson-block { scroll-margin-top: 150px; }
    }

    @media (max-width: 700px) {
      .mobile-toc { top: 74px; }
      .back-button,
      .icon-btn,
      .profile-button,
      .language-pill,
      .settings-button { min-height: 44px; }
      .quiz-option { min-height: 52px; padding: 12px 13px; }
      .quiz-reset,
      .story-open,
      .vocab-item,
      .language-choice,
      .import-tab,
      .import-copy,
      .theme-choice { min-height: 44px; }
      .vocab {
        position: relative;
        padding: 0.17em 0.12em;
        margin: -0.17em -0.12em;
        touch-action: manipulation;
      }
      .vocab::after {
        content: "";
        position: absolute;
        inset: -8px -5px;
      }
      .import-toolbar { align-items: stretch; }
      .import-language { width: 100%; }
      .import-copy { width: 100%; }
      .import-textarea { min-height: 245px; }
      .import-actions {
        position: sticky;
        bottom: -1px;
        z-index: 2;
        flex-direction: row;
        padding: 10px 0 2px;
        background: linear-gradient(180deg, transparent, rgba(8, 10, 13, 0.98) 38%);
      }
      .import-actions .btn { width: auto; flex: 1; min-height: 50px; }
      .import-note { margin-top: 6px; }
      .theme-grid { grid-template-columns: 1fr; }
      .theme-choice { min-height: 66px; }
    }

    @media (max-width: 430px) {
      .mobile-toc-toggle { grid-template-columns: 27px minmax(0, 1fr) auto 14px; gap: 7px; padding: 6px 9px; }
      .mobile-toc-icon { width: 27px; height: 27px; }
      .mobile-toc-copy span { font-size: 0.44rem; }
      .mobile-toc-copy strong { font-size: 0.66rem; }
      .import-tabs { gap: 2px; padding: 3px; }
      .import-tab { font-size: 0.59rem; }
      .translation-panel { max-height: 64vh; }
    }

    /* ============================================================
       UI LOCALE / COURSE BUILDER / GEMINI
       ============================================================ */
    .ui-language-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      padding: 5px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(0, 0, 0, 0.17);
    }
    .ui-language-choice {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid transparent;
      border-radius: 11px;
      background: transparent;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.63rem;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
    .ui-language-choice.is-active {
      border-color: rgba(var(--accent-rgb), 0.24);
      background: rgba(var(--accent-rgb), 0.08);
      color: var(--text);
    }
    .ui-language-choice span { font-size: 0.9rem; }

    .language-create {
      border-style: dashed;
      border-color: rgba(var(--accent-rgb), 0.24);
      color: var(--cyan-bright);
      opacity: 1;
      cursor: pointer;
    }
    .language-create .lang-code { color: var(--cyan-bright); }
    .language-create:hover { background: rgba(var(--accent-rgb), 0.07); }

    .settings-help {
      margin: 0 0 10px;
      color: var(--dim);
      font-size: 0.68rem;
      line-height: 1.55;
    }
    .gemini-field {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .gemini-field input {
      width: 100%;
      min-width: 0;
      min-height: 48px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: rgba(0, 0, 0, 0.22);
      color: var(--text-soft);
      font-family: var(--mono);
      font-size: 0.68rem;
      outline: none;
    }
    .gemini-field input:focus { border-color: rgba(var(--accent-rgb), 0.32); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.04); }
    .gemini-toggle { flex: 0 0 auto; min-width: 46px; height: 46px; border-radius: 11px; font-size: 0.9rem; }
    .gemini-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; }
    .gemini-actions .btn { min-height: 44px; padding: 0 14px; font-size: 0.69rem; }
    .gemini-status { color: var(--dim); font-family: var(--mono); font-size: 0.59rem; }
    .gemini-status[data-state="ok"] { color: var(--emerald-bright); }
    .gemini-status[data-state="error"] { color: var(--danger); }
    .gemini-status[data-state="missing"] { color: var(--dim); }

    .import-template-actions { display: flex; flex-wrap: wrap; gap: 6px; }
    .import-template-actions .import-copy { flex: 1 1 auto; }

    .course-modal {
      width: min(530px, calc(100% - 24px));
      max-width: none;
      max-height: calc(100vh - 24px);
      margin: auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text);
      overflow: visible;
    }
    .course-modal::backdrop {
      background: rgba(3, 5, 7, 0.74);
      -webkit-backdrop-filter: blur(12px) saturate(120%);
      backdrop-filter: blur(12px) saturate(120%);
    }
    .course-panel {
      max-height: calc(100vh - 24px);
      overflow-y: auto;
      border: 1px solid rgba(var(--accent-rgb), 0.22);
      border-radius: 27px;
      background: linear-gradient(155deg, rgba(20, 24, 28, 0.97), rgba(8, 10, 13, 0.98));
      box-shadow: 0 50px 140px -24px rgba(0, 0, 0, 0.9), 0 0 70px -36px rgba(var(--accent-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      -webkit-backdrop-filter: blur(30px) saturate(135%);
      backdrop-filter: blur(30px) saturate(135%);
    }
    .course-modal[open] .course-panel { animation: settings-in 0.34s var(--ease) both; }
    .course-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 21px 22px 17px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(13, 16, 20, 0.92);
    }
    .course-head h2 { margin: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.04em; line-height: 1.1; }
    .course-head .icon-btn { width: 42px; height: 42px; border-radius: 11px; }
    .course-body { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; }
    .course-lead { margin: 0; color: var(--muted); font-size: 0.76rem; line-height: 1.6; }
    .course-field { display: flex; flex-direction: column; gap: 7px; color: var(--text-soft); font-size: 0.7rem; font-weight: 600; }
    .course-field input {
      min-height: 50px;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.22);
      color: var(--text);
      font: inherit;
      font-size: 0.82rem;
      outline: none;
    }
    .course-field input:focus { border-color: rgba(var(--accent-rgb), 0.34); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.05); }
    .course-flags { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
    .course-flag {
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.025);
      font-size: 1.15rem;
      cursor: pointer;
      opacity: 0.62;
    }
    .course-flag.is-active { border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.1); opacity: 1; }
    .course-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
    .course-actions .btn { min-height: 48px; padding: 0 18px; }
    @media (max-width: 700px) {
      .course-modal { width: calc(100% - 16px); }
      .course-head { padding: 17px 17px 14px; }
      .course-body { padding: 17px; }
      .course-flags { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .course-actions { flex-direction: column-reverse; }
      .course-actions .btn { width: 100%; }
      .import-template-actions .import-copy { width: 100%; flex: 1 1 100%; }
    }

    /* ============================================================
       FLAGS / COURSE ARCHIVE / DESTRUCTIVE ACTIONS
       ============================================================ */
    .flag-mark {
      width: 35px;
      height: 35px;
      min-width: 35px;
      display: inline-grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.18);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.58rem;
      font-weight: 700;
      line-height: 1;
    }
    .flag-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .flag-fallback { font-size: 0.5rem; letter-spacing: 0.03em; }
    .flag-mark.is-legacy { font-family: var(--mono); font-size: 0.58rem; }
    .language-choice .flag-mark { width: 17px; height: 17px; min-width: 17px; border: 0; font-size: 0.4rem; }
    .language-choice .flag-img { border-radius: 50%; }
    .language-pill-code .flag-mark { width: 20px; height: 20px; min-width: 20px; border: 0; font-size: 0.42rem; }
    .language-pill-code .flag-img { border-radius: 50%; }

    .language-row { display: flex; align-items: stretch; gap: 6px; }
    .language-row .language-option { min-width: 0; flex: 1; }
    .language-option-actions {
      width: 86px;
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: 4px;
      flex: 0 0 86px;
    }
    .lang-action {
      min-height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 2px 4px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.025);
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.47rem;
      cursor: pointer;
    }
    .lang-action .icon { width: 12px; height: 12px; }
    .lang-action:hover { color: var(--text-soft); border-color: rgba(var(--accent-rgb), 0.22); }
    .lang-action.is-danger { color: var(--danger); }
    .lang-action.is-danger:hover { border-color: rgba(251, 113, 133, 0.3); background: rgba(251, 113, 133, 0.07); }
    .lang-action:disabled { opacity: 0.28; cursor: not-allowed; }
    .language-filter-row {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.14);
    }
    .language-filter {
      flex: 1;
      min-height: 32px;
      border: 1px solid transparent;
      border-radius: 7px;
      background: transparent;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.54rem;
      cursor: pointer;
    }
    .language-filter span { opacity: 0.58; }
    .language-filter.is-active {
      border-color: rgba(var(--accent-rgb), 0.2);
      background: rgba(var(--accent-rgb), 0.08);
      color: var(--text-soft);
    }
    .language-empty-filter {
      display: grid;
      gap: 5px;
      padding: 16px;
      border: 1px dashed rgba(var(--accent-rgb), 0.18);
      border-radius: 12px;
      color: var(--dim);
      text-align: center;
      font-size: 0.7rem;
    }
    .language-empty-filter strong { color: var(--text-soft); font-size: 0.8rem; }
    .language-list .language-create { margin-top: 2px; }

    .course-flag-search {
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 44px;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: rgba(0, 0, 0, 0.2);
      color: var(--dim);
    }
    .course-flag-search-icon { font-size: 1rem; }
    .course-flag-search input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 0.75rem;
    }
    .course-flags-scroll {
      max-height: 224px;
      overflow-y: auto;
      padding: 3px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: rgba(0, 0, 0, 0.14);
      scrollbar-width: thin;
    }
    .course-flags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
    .course-flag {
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 7px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.025);
      color: var(--muted);
      text-align: left;
      cursor: pointer;
      opacity: 0.75;
    }
    .course-flag:hover { background: rgba(var(--accent-rgb), 0.06); opacity: 1; }
    .course-flag.is-active { border-color: rgba(var(--accent-rgb), 0.42); background: rgba(var(--accent-rgb), 0.1); color: var(--text-soft); opacity: 1; }
    .course-flag .flag-mark { width: 25px; height: 25px; min-width: 25px; border: 0; }
    .course-flag-label { min-width: 0; font-size: 0.52rem; line-height: 1.22; }
    .course-flag-empty { margin: 0; color: var(--dim); font-size: 0.7rem; }
    .course-custom-flag { display: flex; gap: 7px; }
    .course-custom-flag input {
      width: 100%;
      min-width: 0;
      min-height: 44px;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.2);
      color: var(--text);
      font: inherit;
      font-size: 0.75rem;
      outline: 0;
    }
    .course-custom-flag .btn { min-height: 44px; padding: 0 11px; font-size: 0.65rem; }
    .course-flag-hint { margin: 0; color: var(--dim); font-size: 0.62rem; }

    .vocab-item-actions { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
    .vocab-speak {
      position: relative;
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.12);
      color: var(--dim);
      cursor: pointer;
      transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    }
    .vocab-speak:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.32); background: rgba(var(--accent-rgb), 0.06); }
    .vocab-speak:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.6); outline-offset: 2px; }
    .vocab-speak .icon { width: 17px; height: 17px; }
    .vocab-speak-idle, .vocab-speak-playing { display: grid; place-items: center; }
    .vocab-speak-playing { display: none; }
    .vocab-speak.is-playing { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.1); animation: vocab-speak-pulse 1.05s ease-in-out infinite; }
    .vocab-speak.is-playing .vocab-speak-idle { display: none; }
    .vocab-speak.is-playing .vocab-speak-playing { display: grid; }
    .vocab-speak.is-unavailable { opacity: 0.5; color: var(--muted); }
    .vocab-speak.is-unavailable:hover { opacity: 0.75; color: var(--dim); border-color: var(--line); background: rgba(0, 0, 0, 0.12); }
    @keyframes vocab-speak-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
      50% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12); }
    }
    @media (prefers-reduced-motion: reduce) {
      .vocab-speak.is-playing { animation: none; }
    }
    @media (max-width: 700px) {
      .vocab-speak { width: 44px; height: 44px; }
    }
    .vocab-delete {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.12);
      color: #5d626b;
      cursor: pointer;
    }
    .vocab-delete .icon { width: 15px; height: 15px; }
    .vocab-delete:hover { color: var(--danger); border-color: rgba(251, 113, 133, 0.28); }
    .word-delete { margin-right: auto; color: var(--danger); }

    .confirm-modal {
      width: min(430px, calc(100% - 24px));
      max-width: none;
      margin: auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text);
    }
    .confirm-modal::backdrop { background: rgba(3, 5, 7, 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
    .confirm-panel {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 23px;
      border: 1px solid rgba(251, 113, 133, 0.24);
      border-radius: 22px;
      background: linear-gradient(155deg, rgba(28, 20, 24, 0.98), rgba(10, 10, 13, 0.99));
      box-shadow: 0 40px 100px -24px rgba(0, 0, 0, 0.9), 0 0 60px -34px rgba(251, 113, 133, 0.5);
    }
    .confirm-panel h2 { margin: 0; font-size: 1.35rem; letter-spacing: -0.035em; }
    .confirm-panel p { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.55; }
    .confirm-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 5px; }
    .confirm-actions .btn, .confirm-actions .btn-danger { min-height: 45px; }

    .no-active-course-card {
      max-width: 760px;
      margin: clamp(55px, 10vw, 120px) auto;
      padding: clamp(25px, 5vw, 48px);
      border: 1px dashed rgba(var(--accent-rgb), 0.24);
      border-radius: 24px;
      background: radial-gradient(500px 220px at 15% 0%, rgba(var(--accent-rgb), 0.09), transparent 70%);
    }
    .dashboard-kicker { display: block; margin-bottom: 13px; color: var(--cyan-bright); font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.12em; }
    .no-active-course-card .dashboard-actions { margin-top: 22px; }

    @media (max-width: 700px) {
      .language-option-actions { width: 38px; flex-basis: 38px; }
      .lang-action span { display: none; }
      .lang-action { min-height: 27px; padding: 0; }
      .course-flags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .course-flags-scroll { max-height: 210px; }
      .course-custom-flag { flex-direction: column; }
      .course-custom-flag .btn { width: 100%; }
      .confirm-actions { flex-direction: column-reverse; }
      .confirm-actions .btn, .confirm-actions .btn-danger { width: 100%; }
      .word-delete { width: 100%; margin-right: 0; }
    }

    /* ============================================================
       v2.7 · CONTENT ACTIONS / COURSE TABS
       ============================================================ */
    .content-action {
      width: 30px;
      height: 30px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.18);
      color: var(--dim);
      font-size: 0.8rem;
      line-height: 1;
      cursor: pointer;
      transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    }
    .content-action .icon { width: 14px; height: 14px; }
    .content-action:hover { border-color: rgba(var(--accent-rgb), 0.35); color: var(--text); background: rgba(var(--accent-rgb), 0.08); }
    .content-action.is-danger:hover { border-color: rgba(239, 68, 68, 0.45); color: var(--danger); background: rgba(239, 68, 68, 0.08); }
    .lesson-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
    .modules-head-tools, .stories-section-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .content-hidden-toggle { min-height: 32px; padding: 0 10px; font-size: 0.56rem; }
    .course-view-tabs {
      display: inline-flex;
      gap: 4px;
      margin: 0 0 18px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.14);
    }
    .course-view-tab {
      min-height: 34px;
      padding: 0 15px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.58rem;
      cursor: pointer;
    }
    .course-view-tab.is-active { border-color: rgba(var(--accent-rgb), 0.24); background: rgba(var(--accent-rgb), 0.09); color: var(--text); }
    .dashboard-modules.is-hidden { display: none; }

    /* ============================================================
       v2.7 · TESTS / ERROR RETRY
       ============================================================ */
    .tests-panel { margin: 26px 0 0; }
    .tests-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
    .tests-head h2 { margin: 2px 0 0; font-size: clamp(1.15rem, 2vw, 1.6rem); }
    .tests-count { color: var(--dim); font-family: var(--mono); font-size: 0.58rem; }
    .tests-list { display: grid; gap: 8px; }
    .test-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 130px auto;
      align-items: center;
      gap: 16px;
      padding: 15px 16px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.025);
    }
    .test-card-kicker { color: var(--dim); font-family: var(--mono); font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.08em; }
    .test-card h3 { margin: 3px 0; font-size: 0.9rem; }
    .test-card p { margin: 0; color: var(--dim); font-size: 0.64rem; }
    .test-score { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .test-score strong { color: var(--emerald-bright); font-family: var(--mono); font-size: 1rem; }
    .test-score > span { color: var(--dim); font-family: var(--mono); font-size: 0.5rem; text-transform: uppercase; }
    .test-score-track { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.07); }
    .test-score-track span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
    .test-actions { display: flex; justify-content: flex-end; }
    .test-actions .btn { min-height: 34px; font-size: 0.56rem; }
    .test-no-errors { color: var(--dim); font-family: var(--mono); font-size: 0.52rem; }
    .tests-empty { padding: 26px; border: 1px dashed var(--line); border-radius: 15px; color: var(--dim); text-align: center; }
    .tests-empty strong { display: block; color: var(--text-soft); margin-bottom: 5px; }
    .tests-empty p { margin: 0; font-size: 0.68rem; }

    .error-quiz-modal { width: min(720px, calc(100% - 24px)); max-width: none; max-height: calc(100vh - 24px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--text); }
    .error-quiz-modal::backdrop { background: rgba(3, 5, 7, 0.76); backdrop-filter: blur(12px); }
    .error-quiz-panel { max-height: calc(100vh - 24px); overflow-y: auto; border: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: 24px; background: linear-gradient(155deg, rgba(20, 24, 28, 0.98), rgba(8, 10, 13, 0.99)); box-shadow: 0 50px 140px -24px rgba(0, 0, 0, 0.9); }
    .error-quiz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line-soft); }
    .error-quiz-head h2 { margin: 3px 0 0; font-size: 1.1rem; }
    .error-quiz-body { display: grid; gap: 10px; padding: 16px 20px; }
    .error-question { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, 0.022); }
    .error-question-kicker { color: var(--dim); font-family: var(--mono); font-size: 0.52rem; margin-bottom: 5px; }
    .error-question h3 { margin: 0 0 10px; font-size: 0.84rem; line-height: 1.45; }
    .error-options { display: grid; gap: 5px; }
    .error-option { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, 0.16); color: var(--text-soft); font: inherit; font-size: 0.68rem; text-align: left; cursor: pointer; }
    .error-option:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), 0.3); }
    .error-option.is-correct { border-color: rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.1); color: var(--emerald-bright); }
    .error-option.is-wrong { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.09); color: var(--danger); }
    .error-option-letter { width: 19px; height: 19px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 5px; font-family: var(--mono); font-size: 0.52rem; opacity: 0.7; }
    .error-feedback { margin: 9px 0 0; font-family: var(--mono); font-size: 0.58rem; }
    .error-feedback.is-correct { color: var(--emerald-bright); }
    .error-feedback.is-wrong { color: var(--danger); }
    .error-quiz-result { padding: 18px 20px 22px; border-top: 1px solid var(--line-soft); text-align: center; }
    .error-result-mark { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 9px; border: 1px solid rgba(16, 185, 129, 0.35); border-radius: 50%; color: var(--emerald-bright); font-size: 1.2rem; }
    .error-quiz-result strong { display: block; font-size: 0.9rem; }
    .error-quiz-result p { margin: 5px 0 12px; color: var(--dim); font-size: 0.64rem; }

    /* ============================================================
       v2.7 · FLASHCARDS / LEITNER
       ============================================================ */
    .review-due-badge { display: inline-flex; width: fit-content; margin: 0 0 10px; padding: 4px 9px; border: 1px solid rgba(251, 191, 36, 0.26); border-radius: 999px; background: rgba(251, 191, 36, 0.07); color: var(--amber); font-family: var(--mono); font-size: 0.55rem; }
    .review-modal { width: min(680px, calc(100% - 20px)); max-width: none; max-height: calc(100vh - 20px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--text); }
    .review-modal::backdrop { background: rgba(3, 5, 7, 0.78); backdrop-filter: blur(13px); }
    .review-panel { max-height: calc(100vh - 20px); overflow-y: auto; border: 1px solid rgba(var(--accent-rgb), 0.24); border-radius: 24px; background: linear-gradient(155deg, rgba(20, 24, 28, 0.98), rgba(8, 10, 13, 0.99)); box-shadow: 0 50px 140px -24px rgba(0, 0, 0, 0.92); }
    .review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line-soft); }
    .review-head h2 { margin: 3px 0 0; font-size: 1.15rem; }
    .review-setup { padding: 18px 20px 22px; }
    .review-setup-title { margin: 0 0 3px; font-size: 0.88rem; font-weight: 700; }
    .review-setup-subtitle { margin: 0 0 12px; color: var(--dim); font-size: 0.66rem; }
    .review-scopes { display: flex; flex-wrap: wrap; gap: 6px; }
    .review-scope { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--dim); font-family: var(--mono); font-size: 0.56rem; cursor: pointer; }
    .review-scope.is-active { border-color: rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.09); color: var(--text); }
    .review-tag-field { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; color: var(--dim); font-size: 0.6rem; }
    .review-tag-select { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, 0.2); color: var(--text); font: inherit; font-size: 0.68rem; }
    .review-tag-select:disabled { opacity: 0.45; }
    .review-setup-status { min-height: 18px; margin: 0 0 10px; color: var(--dim); font-family: var(--mono); font-size: 0.58rem; }
    .review-session { padding: 14px 20px 20px; }
    .review-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
    .review-position, .review-level { color: var(--dim); font-family: var(--mono); font-size: 0.58rem; }
    .flashcard { width: 100%; min-height: 260px; perspective: 1200px; cursor: pointer; outline: 0; }
    .flashcard:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.45); outline-offset: 3px; border-radius: 18px; }
    .flashcard-inner { position: relative; width: 100%; min-height: 260px; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .flashcard.is-flipped .flashcard-inner { transform: rotateY(180deg); }
    .flashcard-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; overflow-y: auto; border: 1px solid rgba(var(--accent-rgb), 0.24); border-radius: 18px; background: radial-gradient(circle at 30% 10%, rgba(var(--accent-rgb), 0.1), transparent 55%), rgba(9, 12, 15, 0.96); backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; }
    .flashcard-back { transform: rotateY(180deg); justify-content: flex-start; text-align: left; align-items: flex-start; }
    .flashcard-label { color: var(--dim); font-family: var(--mono); font-size: 0.54rem; text-transform: uppercase; letter-spacing: 0.12em; }
    .flashcard-front strong { font-size: clamp(1.8rem, 7vw, 3.2rem); line-height: 1.15; }
    .flashcard-hint { color: var(--dim); font-family: var(--mono); font-size: 0.52rem; }
    .flashcard-back strong { color: var(--emerald-bright); font-size: clamp(1.35rem, 4vw, 2rem); }
    .review-context, .review-example { margin: 0; color: var(--text-soft); font-size: 0.75rem; line-height: 1.55; }
    .review-example { color: var(--dim); font-style: italic; }
    .review-tags { display: flex; flex-wrap: wrap; gap: 4px; }
    .review-tag { padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-family: var(--mono); font-size: 0.5rem; }
    .review-speak { min-height: 30px; margin-top: 4px; padding: 0 9px; font-size: 0.54rem; }
    .review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
    .review-forgot { border-color: rgba(239, 68, 68, 0.3); color: var(--danger); }
    .review-remember { min-height: 46px; }
    .review-complete { padding: 30px 22px 34px; text-align: center; }
    .review-complete-mark { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 12px; border: 1px solid rgba(16, 185, 129, 0.4); border-radius: 50%; color: var(--emerald-bright); font-size: 1.4rem; }
    .review-complete h3 { margin: 0 0 5px; }
    .review-complete p { margin: 0 0 16px; color: var(--dim); font-size: 0.7rem; }
    .review-setup[hidden], .review-session[hidden], .review-complete[hidden], .error-quiz-result[hidden], [data-error-feedback][hidden] { display: none !important; }

    /* ============================================================
       v2.7 · SETTINGS TABS
       ============================================================ */
    .settings-tabs { display: flex; gap: 4px; margin: 0 0 16px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, 0.15); }
    .settings-tab { flex: 1; min-height: 38px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--dim); font-family: var(--mono); font-size: 0.56rem; cursor: pointer; }
    .settings-tab.is-active { border-color: rgba(var(--accent-rgb), 0.25); background: rgba(var(--accent-rgb), 0.09); color: var(--text); }
    .settings-body[data-settings-tab="profile"] [data-settings-group]:not([data-settings-group="profile"]),
    .settings-body[data-settings-tab="appearance"] [data-settings-group]:not([data-settings-group="appearance"]),
    .settings-body[data-settings-tab="system"] [data-settings-group]:not([data-settings-group="system"]) { display: none !important; }
    #settingsProfileFields[hidden], #settingsProfileSignedOut[hidden] { display: none !important; }
    #settingsProfileFields .profile-form { margin-top: 12px; }
    #settingsProfileFields .password-form { margin-top: 16px; }

    @media (max-width: 700px) {
      .test-card { grid-template-columns: 1fr; gap: 10px; }
      .test-actions { justify-content: flex-start; }
      .test-score { max-width: 180px; }
      .settings-tab { font-size: 0.5rem; padding: 0 4px; }
      .flashcard, .flashcard-inner { min-height: 230px; }
      .review-actions { grid-template-columns: 1fr; }
      .modules-head-tools, .stories-section-tools { width: 100%; justify-content: flex-start; }
    }

    /* ============================================================
       v2.8 · AI EXPLAIN / AI STUDIO
       ============================================================ */
    .ai-selection-btn {
      position: fixed;
      z-index: 80;
      min-height: 38px;
      padding: 0 13px;
      border: 1px solid rgba(var(--accent-rgb), 0.4);
      border-radius: 999px;
      background: rgba(9, 12, 15, 0.96);
      color: var(--text);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(var(--accent-rgb), 0.12);
      font-family: var(--mono);
      font-size: 0.6rem;
      cursor: pointer;
    }
    .ai-selection-btn[hidden] { display: none !important; }
    .ai-analysis-body { max-width: 100%; overflow-wrap: anywhere; }
    .ai-analysis-body p, .ai-chat-bubble p { margin: 0 0 0.55em; }
    .ai-analysis-body p:last-child, .ai-chat-bubble p:last-child { margin-bottom: 0; }
    .ai-analysis-body ul, .ai-analysis-body ol,
    .ai-chat-bubble ul, .ai-chat-bubble ol {
      margin: 0.35em 0 0.65em;
      padding-inline-start: 1.25em;
    }
    .ai-analysis-body li, .ai-chat-bubble li { margin: 0.18em 0; }
    .ai-analysis-body code, .ai-chat-bubble code {
      padding: 0.08em 0.3em;
      border: 1px solid var(--line-soft);
      border-radius: 4px;
      background: rgba(var(--accent-rgb), 0.08);
      color: var(--text);
      font-family: var(--mono);
      font-size: 0.92em;
      overflow-wrap: anywhere;
    }
    .ai-analysis-body b, .ai-chat-bubble b { color: var(--text); }
    .ai-selection-bar {
      position: fixed;
      z-index: 45;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
      border-top: 1px solid rgba(var(--accent-rgb), 0.22);
      background: linear-gradient(155deg, var(--surface), var(--bg-deep));
      box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.38);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
    }
    .ai-selection-bar[hidden] { display: none !important; }
    .ai-selection-bar button {
      min-height: 48px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: var(--surface-soft);
      color: var(--text);
      font-family: var(--mono);
      font-size: 0.62rem;
      cursor: pointer;
    }
    .ai-selection-bar button:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.65); outline-offset: 2px; }
    .ai-selection-bar-analyze {
      flex: 1 1 auto;
      padding: 0 14px;
      border-color: rgba(var(--accent-rgb), 0.45);
      background: rgba(var(--accent-rgb), 0.12);
      color: var(--text);
    }
    .ai-selection-bar-copy {
      flex: 0 0 48px;
      width: 48px;
      padding: 0;
      font-size: 1rem;
      color: var(--text-soft);
    }
    body.has-ai-selection-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    @media (prefers-reduced-motion: reduce) {
      .ai-selection-bar { animation: none; }
    }
    @media (max-width: 700px) {
      .ai-selection-bar { animation: ai-selection-bar-in 0.16s ease-out; }
    }
    @keyframes ai-selection-bar-in {
      from { transform: translateY(100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    .ai-sheet {
      width: min(760px, calc(100% - 12px));
      max-width: none;
      max-height: calc(100vh - 12px);
      margin: auto auto 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text);
    }
    .ai-sheet::backdrop { background: rgba(3, 5, 7, 0.7); backdrop-filter: blur(10px); }
    .ai-sheet-panel {
      max-height: calc(100vh - 36px);
      overflow-y: auto;
      border: 1px solid rgba(var(--accent-rgb), 0.24);
      border-bottom: 0;
      border-radius: 22px 22px 0 0;
      background: linear-gradient(155deg, rgba(20, 24, 28, 0.99), rgba(8, 10, 13, 0.99));
      box-shadow: 0 -20px 70px rgba(0, 0, 0, 0.5);
    }
    .ai-sheet-head, .ai-studio-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 20px 13px;
      border-bottom: 1px solid var(--line-soft);
    }
    .ai-sheet-head h2, .ai-studio-head h2 { margin: 3px 0 0; font-size: 1.12rem; }
    .ai-analysis-body {
      min-height: 88px;
      max-height: 62vh;
      overflow-y: auto;
      padding: 18px 20px 24px;
      color: var(--text-soft);
      font-size: 0.78rem;
      line-height: 1.65;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .ai-analysis-body.is-error { color: var(--danger); }
    .ai-analysis-body:empty::before { content: "…"; color: var(--dim); }

    .ai-studio-modal {
      width: min(760px, calc(100% - 20px));
      max-width: none;
      max-height: calc(100vh - 20px);
      margin: auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text);
    }
    .ai-studio-modal::backdrop { background: rgba(3, 5, 7, 0.78); backdrop-filter: blur(12px); }
    .ai-studio-panel {
      max-height: calc(100vh - 20px);
      overflow-y: auto;
      border: 1px solid rgba(var(--accent-rgb), 0.24);
      border-radius: 24px;
      background: linear-gradient(155deg, rgba(20, 24, 28, 0.99), rgba(8, 10, 13, 0.99));
      box-shadow: 0 50px 140px -24px rgba(0, 0, 0, 0.92);
    }
    .ai-studio-body { padding: 16px 20px 22px; }
    .ai-key-missing { padding: 18px; border: 1px solid rgba(251, 191, 36, 0.28); border-radius: 13px; background: rgba(251, 191, 36, 0.06); }
    .ai-key-missing strong { display: block; color: var(--amber); font-size: 0.8rem; }
    .ai-key-missing p { margin: 5px 0 12px; color: var(--dim); font-size: 0.66rem; }
    .ai-studio-intro h3 { margin: 0 0 3px; font-size: 0.9rem; }
    .ai-studio-intro p { margin: 0 0 13px; color: var(--dim); font-size: 0.66rem; }
    .ai-diagnostics { display: grid; gap: 9px; }
    .ai-diagnostic { min-width: 0; margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, 0.018); }
    .ai-diagnostic legend { padding: 0 4px; color: var(--text-soft); font-size: 0.67rem; font-weight: 600; }
    .ai-diagnostic-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .ai-diagnostic-option { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--dim); font-size: 0.6rem; cursor: pointer; }
    .ai-diagnostic-option:has(input:checked) { border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.08); color: var(--text); }
    .ai-diagnostic-option input { accent-color: var(--accent); }
    .ai-diagnostic-option span { overflow-wrap: anywhere; }
    .ai-studio-fields { display: grid; grid-template-columns: 1fr 1.2fr 0.7fr; gap: 8px; margin-top: 12px; }
    .ai-studio-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--dim); font-size: 0.58rem; }
    .ai-studio-field select, .ai-studio-field input { min-height: 39px; width: 100%; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, 0.2); color: var(--text); font: inherit; font-size: 0.66rem; }
    .ai-studio-field select:focus, .ai-studio-field input:focus { outline: 0; border-color: rgba(var(--accent-rgb), 0.4); }
    .ai-studio-status { min-height: 18px; margin: 11px 0 7px; color: var(--dim); font-family: var(--mono); font-size: 0.58rem; }
    .ai-studio-status.is-error { color: var(--danger); }
    .ai-studio-generate { width: 100%; }
    .ai-preview-json { max-height: 46vh; overflow: auto; margin: 0 0 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.26); color: var(--emerald-bright); font-family: var(--mono); font-size: 0.58rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
    .ai-studio-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 7px; }
    .ai-studio-preview[hidden], .ai-key-missing[hidden], #aiStudioMain[hidden], #aiStudioForm[hidden] { display: none !important; }

    @media (max-width: 700px) {
      .ai-studio-fields { grid-template-columns: 1fr; }
      .ai-diagnostic-options { grid-template-columns: 1fr; }
      .ai-studio-modal { width: calc(100% - 12px); }
      .ai-sheet { width: 100%; }
    }

    /* ============================================================
       v2.10 · GEMINI MODEL PICKER / RETRY
       ============================================================ */
    .gemini-model-section { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-soft); }
    .gemini-model-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; color: var(--text-soft); font-size: 0.66rem; font-weight: 600; }
    .gemini-model-refresh { padding: 0; border: 0; background: transparent; color: var(--dim); font-family: var(--mono); font-size: 0.55rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
    .gemini-model-refresh:hover { color: var(--text); }
    .gemini-model-refresh:disabled { opacity: 0.45; cursor: wait; }
    .gemini-model-select { position: relative; }
    .gemini-model-trigger { width: 100%; min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.2); color: var(--text); font-family: var(--mono); font-size: 0.62rem; text-align: left; cursor: pointer; }
    .gemini-model-trigger:hover, .gemini-model-trigger[aria-expanded="true"] { border-color: rgba(var(--accent-rgb), 0.38); background: rgba(var(--accent-rgb), 0.055); }
    .gemini-model-trigger span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gemini-model-chevron { flex: 0 0 auto; color: var(--dim); font-size: 0.8rem; transition: transform 0.2s ease; }
    .gemini-model-trigger[aria-expanded="true"] .gemini-model-chevron { transform: rotate(180deg); }
    .gemini-model-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 285px; overflow-y: auto; padding: 5px; border: 1px solid rgba(var(--accent-rgb), 0.24); border-radius: 11px; background: linear-gradient(155deg, rgba(20, 24, 28, 0.99), rgba(8, 10, 13, 0.99)); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); }
    .gemini-model-menu[hidden] { display: none !important; }
    .gemini-model-option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-soft); text-align: left; cursor: pointer; }
    .gemini-model-option:hover { border-color: var(--line); background: rgba(255, 255, 255, 0.035); }
    .gemini-model-option.is-selected { border-color: rgba(var(--accent-rgb), 0.32); background: rgba(var(--accent-rgb), 0.08); color: var(--text); }
    .gemini-model-option-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .gemini-model-option-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 0.61rem; }
    .gemini-model-option-copy small { color: var(--dim); font-size: 0.53rem; }
    .gemini-model-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; flex: 0 0 auto; }
    .gemini-model-badge { padding: 1px 5px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-family: var(--mono); font-size: 0.45rem; line-height: 1.45; white-space: nowrap; }
    .gemini-model-badge.is-recommended { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.09); color: var(--amber); }
    .gemini-model-badge.is-stable { border-color: rgba(16, 185, 129, 0.3); color: var(--emerald-bright); }
    .gemini-model-badge.is-preview { border-color: rgba(251, 191, 36, 0.3); color: var(--amber); }
    .gemini-model-badge.is-lite { color: var(--dim); }
    .gemini-model-empty { margin: 0; padding: 12px 8px; color: var(--dim); font-size: 0.62rem; }
    .gemini-model-status { min-height: 17px; margin: 7px 0 0; color: var(--dim); font-family: var(--mono); font-size: 0.55rem; line-height: 1.45; }
    .gemini-model-status.is-error { color: var(--danger); }
    .gemini-fallback { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 8px 9px; border: 1px solid rgba(251, 191, 36, 0.28); border-radius: 8px; background: rgba(251, 191, 36, 0.06); color: var(--amber); font-size: 0.58rem; line-height: 1.4; }
    .gemini-fallback[hidden] { display: none !important; }
    .gemini-fallback .btn { flex: 0 0 auto; min-height: 30px; padding: 0 8px; font-size: 0.52rem; }
    .ai-analysis-actions { padding: 0 20px 20px; }
    .ai-analysis-actions .btn { min-height: 38px; font-size: 0.6rem; }
    @media (max-width: 560px) {
      .gemini-model-option { align-items: flex-start; flex-direction: column; }
      .gemini-model-badges { justify-content: flex-start; }
      .gemini-fallback { align-items: flex-start; flex-direction: column; }
    }

    /* ============================================================
       v2.11 · AI STUDIO CHAT
       ============================================================ */
    .ai-studio-head-actions { display: flex; align-items: center; gap: 6px; }
    .ai-chat-new { min-height: 34px; padding: 0 10px; font-size: 0.55rem; }
    .ai-chat-main { display: flex; flex-direction: column; min-height: 360px; height: min(650px, calc(100dvh - 145px)); min-width: 0; }
    .ai-chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 16px 18px; background: rgba(0, 0, 0, 0.1); scroll-behavior: smooth; }
    .ai-chat-message { display: flex; width: 100%; min-width: 0; }
    .ai-chat-message.is-user { justify-content: flex-end; }
    .ai-chat-message.is-assistant { justify-content: flex-start; }
    .ai-chat-bubble { max-width: min(88%, 620px); min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); color: var(--text-soft); font-size: 0.7rem; line-height: 1.55; overflow-wrap: anywhere; }
    .ai-chat-message.is-user .ai-chat-bubble { border-color: rgba(var(--accent-rgb), 0.24); background: rgba(var(--accent-rgb), 0.08); color: var(--text); border-bottom-right-radius: 5px; }
    .ai-chat-message.is-assistant .ai-chat-bubble { border-bottom-left-radius: 5px; }
    .ai-chat-message.is-status .ai-chat-bubble { border-color: var(--line-soft); background: transparent; color: var(--dim); font-family: var(--mono); font-size: 0.56rem; }
    .ai-chat-message.is-status.is-done .ai-chat-bubble { color: var(--emerald-bright); }
    .ai-chat-message.is-status.is-error .ai-chat-bubble { color: var(--danger); }
    .ai-chat-message.is-preview .ai-chat-bubble { width: min(92%, 640px); max-width: min(92%, 640px); }
    .ai-chat-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
    .ai-chat-actions { margin-top: 10px; }
    .ai-chat-chip { min-height: 30px; max-width: 100%; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--dim); font-family: var(--mono); font-size: 0.54rem; line-height: 1.3; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
    .ai-chat-chip:hover { border-color: rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.06); color: var(--text); }
    .ai-chat-chip:focus-visible, .ai-chat-select-trigger:focus-visible, .ai-chat-select-option:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.5); outline-offset: 2px; }
    .ai-chat-chip.is-selected, .ai-chat-chip.is-active { border-color: rgba(var(--accent-rgb), 0.42); background: rgba(var(--accent-rgb), 0.1); color: var(--text); }
    .ai-chat-chip.is-danger { border-color: rgba(239, 68, 68, 0.26); color: var(--danger); }
    .ai-chat-select { position: relative; margin-top: 9px; max-width: 240px; }
    .ai-chat-select-trigger { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, 0.2); color: var(--text); font-family: var(--mono); font-size: 0.56rem; cursor: pointer; }
    .ai-chat-select-chevron { color: var(--dim); }
    .ai-chat-select-menu { position: absolute; z-index: 4; top: calc(100% + 4px); left: 0; right: 0; padding: 4px; border: 1px solid rgba(var(--accent-rgb), 0.24); border-radius: 8px; background: linear-gradient(155deg, rgba(20, 24, 28, 0.99), rgba(8, 10, 13, 0.99)); box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55); }
    .ai-chat-select-menu[hidden] { display: none !important; }
    .ai-chat-select-option { display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--text-soft); font-family: var(--mono); font-size: 0.55rem; text-align: left; cursor: pointer; }
    .ai-chat-select-option:hover, .ai-chat-select-option:focus { background: rgba(var(--accent-rgb), 0.1); color: var(--text); }
    .ai-chat-composer { flex: 0 0 auto; padding: 9px 12px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); background: rgba(8, 10, 13, 0.92); }
    .ai-chat-hint { min-height: 14px; margin-bottom: 5px; color: var(--dim); font-family: var(--mono); font-size: 0.49rem; line-height: 1.35; }
    .ai-chat-composer-row { display: flex; align-items: flex-end; gap: 7px; }
    .ai-chat-composer textarea { flex: 1 1 auto; min-width: 0; min-height: 42px; max-height: 150px; resize: none; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(0, 0, 0, 0.2); color: var(--text); font: inherit; font-size: 0.7rem; line-height: 1.4; outline: 0; }
    .ai-chat-composer textarea:focus { border-color: rgba(var(--accent-rgb), 0.38); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.04); }
    .ai-chat-composer textarea:disabled { opacity: 0.55; }
    .ai-chat-send { min-height: 42px; flex: 0 0 auto; padding: 0 12px; font-size: 0.57rem; }
    .ai-chat-main.is-busy .ai-chat-send { opacity: 0.55; }
    .ai-preview-card { padding: 11px 12px; }
    .ai-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
    .ai-preview-kicker { display: block; margin-bottom: 2px; color: var(--dim); font-family: var(--mono); font-size: 0.48rem; text-transform: uppercase; letter-spacing: 0.08em; }
    .ai-preview-head strong { font-size: 0.82rem; color: var(--text); }
    .ai-preview-level { flex: 0 0 auto; padding: 2px 6px; border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 999px; color: var(--accent); font-family: var(--mono); font-size: 0.5rem; }
    .ai-preview-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--dim); font-size: 0.57rem; }
    .ai-preview-excerpt { margin: 7px 0; color: var(--text-soft); font-size: 0.66rem; line-height: 1.55; }
    .ai-preview-count { margin: 6px 0 0; color: var(--dim); font-family: var(--mono); font-size: 0.52rem; }
    .ai-preview-block-list { display: grid; gap: 4px; margin-top: 6px; }
    .ai-preview-block { display: flex; gap: 7px; min-width: 0; padding: 6px 7px; border: 1px solid var(--line-soft); border-radius: 7px; color: var(--text-soft); font-size: 0.58rem; }
    .ai-preview-block > span:first-child { color: var(--accent); flex: 0 0 auto; }
    .ai-preview-vocab { width: 100%; border-collapse: collapse; margin-top: 7px; font-size: 0.58rem; }
    .ai-preview-vocab td { padding: 4px 6px; border-bottom: 1px solid var(--line-soft); color: var(--text-soft); vertical-align: top; }
    .ai-preview-vocab td:first-child { color: var(--text); font-family: var(--mono); }
    .ai-preview-vocab td:last-child { color: var(--dim); }
    .ai-preview-json { max-height: none; overflow: visible; margin: 8px 0 0; padding: 6px 0 0; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: transparent; color: var(--dim); font-family: var(--mono); font-size: 0.52rem; }
    .ai-preview-json summary { color: var(--dim); font-family: var(--mono); font-size: 0.52rem; cursor: pointer; }
    .ai-preview-json pre { max-height: 200px; overflow: auto; margin: 7px 0 0; padding: 8px; border: 1px solid var(--line-soft); border-radius: 7px; background: rgba(0, 0, 0, 0.22); color: var(--text-soft); font-size: 0.5rem; white-space: pre-wrap; overflow-wrap: anywhere; }
    .ai-preview-actions { margin-top: 9px; }
    .ai-block-picker { margin-top: 9px; }
    .ai-studio-title-wrap { min-width: 0; }
    .ai-chat-panel-toggle { display: none; }
    .ai-chat-layout { display: flex; align-items: stretch; min-width: 0; min-height: 0; overflow: hidden; border-top: 1px solid var(--line-soft); }
    .ai-chat-main { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 360px; height: min(650px, calc(100dvh - 145px)); }
    .ai-chat-sidebar { display: flex; flex: 0 0 216px; flex-direction: column; min-width: 0; border-right: 1px solid var(--line-soft); background: rgba(0, 0, 0, 0.13); }
    .ai-chat-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 9px 8px; color: var(--dim); font-family: var(--mono); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; }
    .ai-chat-sidebar-new { min-height: 26px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--dim); font-family: var(--mono); font-size: 0.48rem; cursor: pointer; }
    .ai-chat-sidebar-new:hover { border-color: rgba(var(--accent-rgb), 0.35); color: var(--text); }
    .ai-chat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 6px 8px; display: grid; align-content: start; gap: 4px; }
    .ai-chat-list-empty { margin: 8px; color: var(--dim); font-size: 0.58rem; line-height: 1.5; }
    .ai-chat-list-item { display: flex; align-items: stretch; gap: 2px; min-width: 0; padding: 4px 5px; border: 1px solid transparent; border-radius: 8px; }
    .ai-chat-list-item:hover { background: rgba(var(--accent-rgb), 0.05); }
    .ai-chat-list-item.is-active { border-color: rgba(var(--accent-rgb), 0.25); background: rgba(var(--accent-rgb), 0.08); }
    .ai-chat-list-open { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 2px 3px; border: 0; background: transparent; color: var(--text-soft); text-align: left; cursor: pointer; }
    .ai-chat-list-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.57rem; line-height: 1.4; }
    .ai-chat-list-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-family: var(--mono); font-size: 0.45rem; line-height: 1.4; }
    .ai-chat-list-actions { display: flex; flex: 0 0 auto; flex-direction: column; gap: 1px; }
    .ai-chat-mini-btn { width: 21px; min-height: 18px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--dim); font-family: var(--mono); font-size: 0.56rem; line-height: 1; cursor: pointer; }
    .ai-chat-mini-btn:hover, .ai-chat-mini-btn:focus-visible { border-color: var(--line); color: var(--text); outline: 0; }
    .ai-chat-rename-input { flex: 1 1 auto; min-width: 0; min-height: 30px; padding: 3px 5px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 5px; background: rgba(0, 0, 0, 0.3); color: var(--text); font: inherit; font-size: 0.55rem; }
    .ai-chat-rename-actions { display: flex; flex-direction: column; gap: 1px; }
    .ai-chat-delete-all { flex: 0 0 auto; margin: 5px 6px 7px; min-height: 28px; padding: 0 7px; border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 6px; background: transparent; color: var(--danger); font-family: var(--mono); font-size: 0.46rem; line-height: 1.25; cursor: pointer; }
    .ai-chat-delete-all:hover { background: rgba(239, 68, 68, 0.07); }
    .ai-course-select { position: relative; margin-top: 4px; max-width: 300px; }
    .ai-course-trigger { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 24px; padding: 1px 5px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--dim); font-family: var(--mono); font-size: 0.5rem; cursor: pointer; }
    #aiCourseName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ai-course-trigger:hover, .ai-course-trigger[aria-expanded="true"] { border-color: var(--line); color: var(--text-soft); }
    .ai-course-trigger:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.5); outline-offset: 2px; }
    .ai-course-flag { display: inline-flex; flex: 0 0 auto; width: 18px; height: 12px; overflow: hidden; border-radius: 2px; }
    .ai-course-flag svg { width: 100%; height: 100%; }
    .ai-course-menu { position: absolute; z-index: 8; top: calc(100% + 4px); left: 0; min-width: 230px; max-width: min(320px, calc(100vw - 36px)); max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid rgba(var(--accent-rgb), 0.24); border-radius: 8px; background: linear-gradient(155deg, rgba(20, 24, 28, 0.99), rgba(8, 10, 13, 0.99)); box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55); }
    .ai-course-menu[hidden] { display: none !important; }
    .ai-course-option { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 30px; padding: 4px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-soft); font-family: var(--mono); font-size: 0.52rem; text-align: left; cursor: pointer; }
    .ai-course-option:hover, .ai-course-option:focus-visible { border-color: var(--line); background: rgba(var(--accent-rgb), 0.08); color: var(--text); outline: 0; }
    .ai-course-option.is-selected { border-color: rgba(var(--accent-rgb), 0.3); color: var(--text); }
    .ai-course-option-flag { display: inline-flex; flex: 0 0 auto; width: 18px; height: 12px; overflow: hidden; border-radius: 2px; }
    .ai-course-option-flag svg { width: 100%; height: 100%; }
    .ai-course-option-code { margin-left: auto; color: var(--dim); font-size: 0.46rem; }
    .ai-chat-message.is-preview-summary .ai-chat-bubble { color: var(--dim); font-family: var(--mono); font-size: 0.53rem; }

    @media (max-width: 700px) {
      .ai-studio-modal { width: calc(100% - 10px); max-height: calc(100dvh - 10px); }
      .ai-studio-panel { border-radius: 18px; }
      .ai-chat-main { height: calc(100dvh - 145px); min-height: 300px; }
      .ai-chat-panel-toggle { display: inline-flex; align-items: center; min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--dim); font-family: var(--mono); font-size: 0.5rem; cursor: pointer; }
      .ai-chat-layout { position: relative; }
      .ai-chat-sidebar { position: absolute; z-index: 7; inset: 0 auto 0 0; width: min(260px, 82%); border-right: 1px solid rgba(var(--accent-rgb), 0.22); background: linear-gradient(155deg, rgba(20, 24, 28, 0.995), rgba(8, 10, 13, 0.995)); box-shadow: 18px 0 45px rgba(0, 0, 0, 0.52); transform: translateX(-103%); transition: transform 0.18s ease; }
      .ai-chat-sidebar.is-open { transform: translateX(0); }
      .ai-chat-log { padding: 12px 11px; }
      .ai-chat-bubble { max-width: 94%; font-size: 0.68rem; }
      .ai-chat-message.is-preview .ai-chat-bubble { max-width: 96%; width: 96%; }
      .ai-chat-chip { font-size: 0.52rem; }
      .ai-chat-hint { font-size: 0.47rem; }
      .ai-chat-head-actions { gap: 3px; }
      .ai-studio-head .settings-kicker { display: none; }
      .ai-chat-new { min-height: 30px; padding: 0 7px; font-size: 0.48rem; }
      .ai-course-select { max-width: min(220px, 64vw); }
    }

    /* ============================================================
       v2.13 · MULTI-PROVIDER AI SETTINGS
       ============================================================ */
    .ai-provider-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
    .ai-provider-card { position: relative; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(0, 0, 0, 0.12); }
    .ai-provider-card-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 7px; color: var(--text-soft); font-size: 0.66rem; }
    .ai-provider-link { padding: 0; border: 0; background: transparent; color: var(--accent); font-family: var(--mono); font-size: 0.48rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
    .ai-provider-select { position: relative; }
    .ai-provider-trigger { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0, 0, 0, 0.2); color: var(--text); font-family: var(--mono); font-size: 0.54rem; text-align: left; cursor: pointer; }
    .ai-provider-trigger:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.5); outline-offset: 2px; }
    .ai-provider-menu { position: absolute; z-index: 9; top: calc(100% + 4px); left: 0; right: 0; padding: 4px; border: 1px solid rgba(var(--accent-rgb), 0.24); border-radius: 7px; background: linear-gradient(155deg, rgba(20, 24, 28, 0.99), rgba(8, 10, 13, 0.99)); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); }
    .ai-provider-menu[hidden] { display: none !important; }
    .ai-provider-option { display: block; width: 100%; min-height: 28px; padding: 5px 7px; border: 0; border-radius: 4px; background: transparent; color: var(--text-soft); font-family: var(--mono); font-size: 0.52rem; text-align: left; cursor: pointer; }
    .ai-provider-option:hover, .ai-provider-option:focus-visible { background: rgba(var(--accent-rgb), 0.1); color: var(--text); outline: 0; }
    .ai-provider-option.is-selected { color: var(--accent); }
    .ai-provider-fields { display: grid; gap: 7px; margin-top: 8px; }
    .ai-provider-field { display: grid; gap: 3px; color: var(--dim); font-family: var(--mono); font-size: 0.48rem; }
    .ai-provider-field input { min-width: 0; width: 100%; min-height: 30px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, 0.22); color: var(--text); font: inherit; font-size: 0.56rem; }
    .ai-provider-field input:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.45); outline-offset: 1px; }
    .ai-provider-key-row, .ai-provider-model-row { display: flex; gap: 4px; min-width: 0; }
    .ai-provider-key-row input, .ai-provider-model-row input { flex: 1 1 auto; }
    .ai-provider-toggle { flex: 0 0 auto; width: 31px; min-height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--dim); cursor: pointer; }
    .ai-provider-small-btn { flex: 0 0 auto; max-width: 104px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--dim); font-family: var(--mono); font-size: 0.46rem; line-height: 1.25; cursor: pointer; }
    .ai-provider-small-btn:hover { border-color: rgba(var(--accent-rgb), 0.35); color: var(--text); }
    .ai-provider-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
    .ai-provider-actions .btn { min-height: 30px; padding: 0 9px; font-size: 0.5rem; }
    .ai-provider-note { margin: 0; color: var(--dim); font-family: var(--mono); font-size: 0.46rem; line-height: 1.4; }
    .ai-provider-model-list { display: flex; flex-wrap: wrap; gap: 3px; max-height: 92px; overflow-y: auto; }
    .ai-provider-model-option { max-width: 100%; padding: 2px 6px; border: 1px solid var(--line-soft); border-radius: 999px; background: transparent; color: var(--dim); font-family: var(--mono); font-size: 0.45rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ai-provider-model-option:hover { color: var(--text); border-color: rgba(var(--accent-rgb), 0.3); }
    .ai-provider-status { min-height: 12px; margin: 0; color: var(--dim); font-family: var(--mono); font-size: 0.46rem; line-height: 1.4; overflow-wrap: anywhere; }
    .ai-provider-status.is-error { color: var(--danger); }
    .ai-provider-key-note { margin-top: 8px; }
    .ai-provider-global-status { min-height: 12px; margin: 4px 0 0; color: var(--dim); font-family: var(--mono); font-size: 0.48rem; overflow-wrap: anywhere; }
    .ai-analysis-meta { min-height: 12px; margin: 0 0 8px; color: var(--dim); font-family: var(--mono); font-size: 0.52rem; overflow-wrap: anywhere; }
    .ai-analysis-actions { flex-wrap: wrap; }
    @media (max-width: 700px) {
      .ai-provider-cards { grid-template-columns: 1fr; }
      .ai-provider-small-btn { max-width: 92px; }
    }

    @keyframes settings-in {
      from { opacity: 0; transform: translateY(12px) scale(0.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }


    /* ============================================================
       PREMIUM LAYER v2 · appended, non-destructive
       Правила ниже переопределяют базу по каскаду (в конце файла).
       Переменные и темы (cyber / hacker / nordic / glass) не тронуты.
       Для hover/float используются индивидуальные свойства
       `scale` и `translate`, потому что у карточек уже есть
       animation (rise-in, fill-mode: both), которая удерживает
       `transform` и перебила бы transform в :hover.
       ============================================================ */
    :root {
      --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
      --glass-border: rgba(var(--accent-rgb), 0.18);
      --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
      --glow-soft: 0 0 0 1px rgba(var(--accent-rgb), 0.22), 0 18px 60px -22px rgba(var(--accent-rgb), 0.5);
      --float-distance: 5px;
    }

    /* ---------- 1. Typography ---------- */
    body {
      font-feature-settings: "kern", "liga", "calt", "ss01";
      font-synthesis: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    h1, h2, h3, h4 {
      text-wrap: balance;
      font-feature-settings: "kern", "liga";
    }
    h1 { letter-spacing: -0.035em; line-height: 1.04; }
    h2 { letter-spacing: -0.025em; line-height: 1.12; }
    h3 { letter-spacing: -0.018em; line-height: 1.2; }
    p, li, .lesson-description, .reading-prose { text-wrap: pretty; }
    .reading-prose, .theory-body { line-height: 1.72; letter-spacing: 0.002em; }
    .mono, code, kbd, pre, .stat-code, .lesson-module, .block-eyebrow {
      font-variant-ligatures: none;
      font-feature-settings: "zero", "ss02";
    }
    .stat-value, .test-score, .course-ring strong, .toc-num, .block-index {
      font-variant-numeric: tabular-nums lining-nums;
    }
    ::selection { background: rgba(var(--accent-rgb), 0.34); color: #fff; text-shadow: none; }

    /* ---------- 2. Scrollbars ---------- */
    * { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.38) transparent; }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.42), rgba(var(--accent-deep-rgb), 0.28));
      border: 3px solid transparent;
      border-radius: 999px;
      background-clip: padding-box;
      transition: background 0.2s ease;
    }
    *::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.7), rgba(var(--accent-deep-rgb), 0.5));
      background-clip: padding-box;
    }
    *::-webkit-scrollbar-corner { background: transparent; }

    /* ---------- 3. Glass surfaces ---------- */
    .card,
    .dash-lesson,
    .story-card,
    .stat-card,
    .side-card,
    .test-card,
    .practice-card,
    .glass {
      border: 1px solid var(--glass-border);
      box-shadow: var(--shadow-card), var(--glass-highlight);
      -webkit-backdrop-filter: blur(26px) saturate(155%);
      backdrop-filter: blur(26px) saturate(155%);
    }
    .card::before,
    .dash-lesson::before,
    .story-card::before {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22) 30%, rgba(var(--accent-rgb), 0.5) 55%, transparent 92%);
      opacity: 0.9;
    }
    /* мягкий «глянцевый» блик по верхнему краю карточки */
    .card::after,
    .dash-lesson::after,
    .story-card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 38%);
      mix-blend-mode: screen;
    }
    .card > *, .dash-lesson > *, .story-card > * { position: relative; z-index: 1; }

    .topbar {
      -webkit-backdrop-filter: blur(28px) saturate(170%);
      backdrop-filter: blur(28px) saturate(170%);
      border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 50px -34px rgba(0, 0, 0, 0.8);
    }

    /* модалки: полупрозрачная граница + глубокий blur подложки */
    .settings-modal::backdrop,
    .profile-modal::backdrop,
    .import-modal::backdrop,
    .language-modal::backdrop,
    .course-modal::backdrop,
    .word-modal::backdrop,
    .review-modal::backdrop,
    .ai-studio-modal::backdrop {
      background: radial-gradient(ellipse at 50% 30%, rgba(var(--accent-deep-rgb), 0.16), rgba(2, 4, 6, 0.78) 70%);
      -webkit-backdrop-filter: blur(18px) saturate(130%);
      backdrop-filter: blur(18px) saturate(130%);
    }
    .settings-panel,
    .profile-panel,
    .import-panel,
    .language-panel,
    .course-panel,
    .word-panel,
    .ai-sheet,
    .confirm-panel {
      border: 1px solid rgba(var(--accent-rgb), 0.24);
      box-shadow:
        0 60px 160px -30px rgba(0, 0, 0, 0.92),
        0 0 90px -40px rgba(var(--accent-rgb), 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
      -webkit-backdrop-filter: blur(36px) saturate(165%);
      backdrop-filter: blur(36px) saturate(165%);
    }

    /* ---------- 4. Apple scroll reveal ---------- */
    .reveal {
      opacity: 0;
      transform: translate3d(0, 32px, 0) scale(0.985);
      transition:
        opacity 0.9s var(--ease-apple),
        transform 0.9s var(--ease-apple);
      transition-delay: calc(var(--reveal-i, 0) * 70ms);
      will-change: opacity, transform;
    }
    .reveal.active {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      will-change: auto;
    }
    /* элементы, у которых уже есть собственная rise-in, не должны получать двойную анимацию */
    .reveal.dash-lesson, .reveal.story-card, .reveal.stat-card, .reveal.lesson-block { animation: none; }
    /* без JS контент не прячем */
    html:not(.js) .reveal { opacity: 1; transform: none; }

    /* ---------- 5. Floating (едва заметное парение) ---------- */
    @keyframes float {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 calc(var(--float-distance) * -1); }
    }
    @keyframes float-soft {
      0%, 100% { translate: 0 0; rotate: 0deg; }
      33% { translate: 1px -3px; rotate: -0.6deg; }
      66% { translate: -1px -5px; rotate: 0.6deg; }
    }
    .brand-mark { animation: float 6s ease-in-out infinite; will-change: translate; }
    .hero-visual { animation: rise-in 0.9s 0.16s var(--ease) both, float 9s 1.2s ease-in-out infinite; --float-distance: 8px; }
    .stat-icon,
    .toc-ring,
    .course-flag,
    .flag-mark,
    .gemini-model-badge,
    .level-badge,
    .lesson-badge,
    .toc-mark.is-active,
    .icon.is-active,
    .is-active > .icon {
      animation: float-soft 7s ease-in-out infinite;
      --float-distance: 3px;
    }
    .stat-card:nth-child(2) .stat-icon { animation-delay: -2s; }
    .stat-card:nth-child(3) .stat-icon { animation-delay: -4s; }
    .lesson-badge { animation-delay: -1.5s; }
    .level-badge { animation-delay: -3.2s; }
    .brand-mark:hover { animation-play-state: paused; }

    /* ---------- 6. Micro-interactions (hover / touch) ---------- */
    .dash-lesson,
    .story-card,
    .stat-card,
    .vocab-item,
    .test-card,
    .language-choice,
    .theme-choice,
    .settings-choice,
    .quiz-option,
    .phrase-chip,
    .btn,
    .icon-btn {
      transition:
        scale 0.45s var(--ease-apple),
        translate 0.45s var(--ease-apple),
        box-shadow 0.45s var(--ease-apple),
        border-color 0.3s ease,
        background 0.4s ease,
        color 0.25s ease,
        filter 0.3s ease;
    }
    .dash-lesson, .story-card, .vocab-item, .test-card { cursor: pointer; }

    @media (hover: hover) and (pointer: fine) {
      .dash-lesson:hover,
      .story-card:hover,
      .vocab-item:hover,
      .test-card:hover {
        scale: 1.02;
        border-color: rgba(var(--accent-rgb), 0.42);
        box-shadow: var(--glow-soft), var(--glass-highlight);
        background-image: linear-gradient(155deg, rgba(var(--accent-rgb), 0.09), rgba(var(--accent2-rgb), 0.05) 55%, transparent);
        z-index: 2;
      }
      .stat-card:hover {
        scale: 1.02;
        border-color: rgba(var(--accent-rgb), 0.36);
        box-shadow: var(--glow-soft), var(--glass-highlight);
      }
      .quiz-option:hover,
      .language-choice:hover,
      .theme-choice:hover,
      .settings-choice:hover {
        scale: 1.015;
        border-color: rgba(var(--accent-rgb), 0.4);
        box-shadow: 0 12px 36px -18px rgba(var(--accent-rgb), 0.55);
      }
      .btn-primary:hover {
        scale: 1.03;
        transform: none;
        filter: saturate(1.15) brightness(1.05);
        box-shadow: 0 24px 56px -16px rgba(var(--accent-rgb), 0.85), 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
      }
      .btn-secondary:hover, .btn-save:hover, .btn-quiet:hover, .icon-btn:hover {
        scale: 1.03;
        box-shadow: 0 10px 30px -14px rgba(var(--accent-rgb), 0.55);
      }
      .phrase-chip:hover { scale: 1.04; box-shadow: 0 8px 24px -12px rgba(var(--accent-rgb), 0.6); }
      .brand-mark:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 44px -6px rgba(var(--accent-rgb), 0.85); }
    }
    /* touch: отклик при нажатии вместо hover */
    @media (hover: none) {
      .dash-lesson:active, .story-card:active, .vocab-item:active, .test-card:active,
      .stat-card:active, .quiz-option:active, .language-choice:active {
        scale: 0.985;
        box-shadow: var(--glow-soft);
        transition-duration: 0.12s;
      }
      .btn:active, .icon-btn:active { scale: 0.96; transition-duration: 0.1s; }
    }
    .btn:active { transform: none; scale: 0.975; }

    /* кнопка: «ползущий» блик при hover */
    .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
    .btn-primary::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
      translate: -120% 0;
      transition: translate 0.8s var(--ease-apple);
    }
    @media (hover: hover) { .btn-primary:hover::after { translate: 120% 0; } }

    /* ---------- 7. Flashcard & details ---------- */
    .flashcard-face {
      border-color: rgba(var(--accent-rgb), 0.3);
      box-shadow: var(--glass-highlight), 0 30px 70px -40px rgba(var(--accent-rgb), 0.5);
    }
    .flashcard-inner { transition: transform 0.7s var(--ease-apple); }
    @media (hover: hover) {
      .flashcard:hover .flashcard-face { border-color: rgba(var(--accent-rgb), 0.5); box-shadow: var(--glow-soft); }
    }
    .flashcard:focus-visible, .btn:focus-visible, .icon-btn:focus-visible,
    .dash-lesson:focus-visible, .story-card:focus-visible, .vocab-item:focus-visible {
      outline: 2px solid rgba(var(--accent-rgb), 0.7);
      outline-offset: 3px;
    }
    input, textarea, select { transition: border-color 0.25s ease, box-shadow 0.3s var(--ease-apple), background 0.25s ease; }
    input:focus-visible, textarea:focus-visible, select:focus-visible {
      outline: none;
      border-color: rgba(var(--accent-rgb), 0.6);
      box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14), 0 10px 30px -16px rgba(var(--accent-rgb), 0.6);
    }
    .toast { box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8), var(--glass-highlight); }

    /* ---------- 8. Theme tuning ---------- */
    html[data-theme="hacker"] { --glass-border: rgba(var(--accent-rgb), 0.24); --glow-soft: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 0 40px -10px rgba(var(--accent-rgb), 0.55); }
    html[data-theme="cyber"] { --glow-soft: 0 0 0 1px rgba(var(--accent-rgb), 0.3), 0 18px 70px -20px rgba(var(--accent-rgb), 0.6), 0 0 40px -18px rgba(var(--accent2-rgb), 0.5); }
    html[data-theme="nordic"] {
      --glass-border: rgba(255, 255, 255, 0.09);
      --glow-soft: 0 0 0 1px rgba(var(--accent-rgb), 0.2), 0 16px 40px -22px rgba(0, 0, 0, 0.7);
      --float-distance: 3px;
    }
    html[data-theme="nordic"] .card,
    html[data-theme="nordic"] .dash-lesson,
    html[data-theme="nordic"] .story-card { -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }

    /* ---------- 9. Performance & accessibility ---------- */
    @media (max-width: 700px) {
      .card, .dash-lesson, .story-card, .stat-card, .side-card {
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
      }
      .reveal { transform: translate3d(0, 22px, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      .brand-mark, .hero-visual, .stat-icon, .toc-ring, .course-flag, .flag-mark,
      .gemini-model-badge, .level-badge, .lesson-badge { animation: none !important; }
      .dash-lesson:hover, .story-card:hover, .stat-card:hover, .btn:hover { scale: 1; }
      .btn-primary::after { display: none; }
    }

    /* ============================================================
       E3 · VOCABULARY DUPLICATE CHECKER
       ============================================================ */
    .duplicates-modal {
      width: min(900px, calc(100% - 24px));
      max-width: none;
      max-height: calc(100vh - 24px);
      margin: auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text);
      overflow: visible;
    }
    .duplicates-modal::backdrop {
      background: radial-gradient(ellipse at 50% 30%, rgba(var(--accent-deep-rgb), 0.16), rgba(2, 4, 6, 0.78) 70%);
      -webkit-backdrop-filter: blur(18px) saturate(130%);
      backdrop-filter: blur(18px) saturate(130%);
    }
    .duplicates-panel {
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 24px);
      overflow: hidden;
      border: 1px solid rgba(var(--accent-rgb), 0.24);
      border-radius: 24px;
      background: linear-gradient(155deg, var(--surface), var(--bg-deep));
      box-shadow: 0 50px 140px -24px rgba(0, 0, 0, 0.9), 0 0 70px -36px rgba(var(--accent-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      -webkit-backdrop-filter: blur(30px) saturate(135%);
      backdrop-filter: blur(30px) saturate(135%);
    }
    .duplicates-modal[open] .duplicates-panel { animation: settings-in 0.28s var(--ease) both; }
    .duplicates-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 20px 22px 15px;
      border-bottom: 1px solid var(--line-soft);
      background: var(--surface-soft);
    }
    .duplicates-head h2 { margin: 4px 0 0; font-size: 1.45rem; letter-spacing: -0.035em; }
    .duplicates-head .icon-btn { width: 44px; height: 44px; flex: 0 0 44px; }
    .duplicates-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px 22px 20px; }
    .duplicates-summary { margin: 0 0 12px; color: var(--muted); font-size: 0.72rem; line-height: 1.5; }
    .duplicates-empty {
      padding: 28px 16px;
      border: 1px dashed var(--line);
      border-radius: 14px;
      color: var(--text-soft);
      text-align: center;
      font-size: 0.78rem;
    }
    .duplicates-groups { display: grid; gap: 12px; }
    .duplicate-group { border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); overflow: hidden; }
    .duplicate-group-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line-soft);
      color: var(--dim);
      font-family: var(--mono);
      font-size: 0.56rem;
      letter-spacing: 0.06em;
    }
    .duplicate-group-head .btn { min-height: 44px; padding: 0 12px; font-size: 0.6rem; }
    .duplicate-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 12px; }
    .duplicate-column { min-width: 0; display: grid; align-content: start; gap: 7px; }
    .duplicate-column.is-after { padding: 9px; border: 1px solid rgba(var(--accent-rgb), 0.28); border-radius: 11px; background: rgba(var(--accent-rgb), 0.055); }
    .duplicate-label { color: var(--dim); font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.08em; text-transform: uppercase; }
    .duplicate-word { min-width: 0; padding: 8px 9px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(0, 0, 0, 0.12); }
    .duplicate-word-title { color: var(--text); font-size: 0.78rem; font-weight: 650; overflow-wrap: anywhere; }
    .duplicate-word-translation { margin-top: 2px; color: var(--text-soft); font-size: 0.68rem; overflow-wrap: anywhere; }
    .duplicate-word-meta { display: flex; flex-wrap: wrap; gap: 4px 7px; margin-top: 5px; color: var(--dim); font-family: var(--mono); font-size: 0.5rem; }
    .duplicate-word p { margin: 6px 0 0; color: var(--muted); font-size: 0.62rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
    .duplicates-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 12px 22px calc(14px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line-soft);
      background: var(--surface-soft);
    }
    .duplicates-actions .btn { min-height: 46px; }
    .vocab-undo {
      position: fixed;
      z-index: 95;
      left: 50%;
      bottom: calc(18px + env(safe-area-inset-bottom));
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 12px;
      width: min(620px, calc(100% - 24px));
      padding: 10px 12px;
      border: 1px solid rgba(var(--accent-rgb), 0.3);
      border-radius: 13px;
      background: var(--surface);
      color: var(--text-soft);
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
      font-size: 0.7rem;
      line-height: 1.4;
    }
    .vocab-undo[hidden] { display: none !important; }
    .vocab-undo span { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
    .vocab-undo .btn { min-height: 44px; flex: 0 0 auto; }
    @media (max-width: 700px) {
      .duplicates-modal { width: calc(100% - 16px); max-height: calc(100vh - 16px); }
      .duplicates-panel { max-height: calc(100vh - 16px); border-radius: 18px; }
      .duplicates-head { padding: 15px 15px 12px; }
      .duplicates-head h2 { font-size: 1.2rem; }
      .duplicates-body { padding: 13px 15px 16px; }
      .duplicate-compare { grid-template-columns: 1fr; }
      .duplicates-actions { flex-direction: column-reverse; padding: 10px 15px calc(12px + env(safe-area-inset-bottom)); }
      .duplicates-actions .btn { width: 100%; }
      .vocab-undo { bottom: calc(10px + env(safe-area-inset-bottom)); }
    }
    @media (prefers-reduced-motion: reduce) {
      .duplicates-modal[open] .duplicates-panel { animation: none; }
    }

    /* ============================================================
       E4 · VISUAL LESSON BUILDER
       ============================================================ */
    body.builder-open { padding-bottom: 0; }
    body.builder-open .topbar, body.builder-open .site-footer { display: none !important; }
    body.builder-open #app { padding-top: 0; }
    .builder-view { min-height: 100vh; background: var(--bg); color: var(--text); }
    .builder-topbar {
      position: sticky;
      top: 0;
      z-index: 35;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px clamp(12px, 3vw, 28px);
      border-bottom: 1px solid var(--line);
      background: var(--surface);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      backdrop-filter: blur(18px) saturate(140%);
    }
    .builder-back { flex: 0 0 46px; width: 46px; height: 46px; font-size: 1.2rem; }
    .builder-title-wrap { min-width: 0; flex: 1 1 auto; }
    .builder-title-wrap h1 { margin: 3px 0 0; font-size: clamp(1.15rem, 3vw, 1.7rem); letter-spacing: -0.04em; }
    .builder-top-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
    .builder-draft-state { color: var(--dim); font-family: var(--mono); font-size: 0.55rem; min-width: 0; }
    .builder-top-actions .icon-btn { width: 44px; height: 44px; }
    .builder-save { min-height: 46px; }
    .builder-main { width: min(1120px, calc(100% - 24px)); margin: 0 auto; padding: 18px 0 80px; }
    .builder-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
    .builder-section-head h2 { margin: 3px 0 0; font-size: 1.1rem; letter-spacing: -0.025em; }
    .builder-meta, .builder-block-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--surface);
      box-shadow: var(--shadow-card);
    }
    .builder-meta { padding: 16px; margin-bottom: 24px; }
    .builder-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .builder-field { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 0.66rem; }
    .builder-field > span { display: flex; align-items: center; gap: 4px; }
    .builder-field > span i { color: var(--danger); font-style: normal; }
    .builder-field input, .builder-field textarea, .builder-field select, .builder-add-block select {
      width: 100%;
      min-width: 0;
      min-height: 44px;
      padding: 10px 11px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: var(--surface-soft);
      color: var(--text-soft);
      font: inherit;
      font-size: 0.78rem;
      outline: none;
    }
    .builder-field textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
    .builder-field input:focus, .builder-field textarea:focus, .builder-field select:focus, .builder-add-block select:focus {
      border-color: rgba(var(--accent-rgb), 0.65);
      box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
    }
    .builder-field.has-error input, .builder-field.has-error textarea, .builder-field.has-error select { border-color: rgba(251, 113, 133, 0.7); }
    .builder-field-wide { grid-column: 1 / -1; }
    .builder-hint { color: var(--dim); font-size: 0.57rem; line-height: 1.45; }
    .builder-field-error { color: var(--danger); font-size: 0.6rem; font-style: normal; }
    .builder-error-banner { margin-bottom: 14px; padding: 10px 12px; border: 1px solid rgba(251, 113, 133, 0.4); border-radius: 9px; background: var(--danger-soft); color: var(--danger); font-size: 0.7rem; }
    .builder-blocks { display: grid; gap: 14px; }
    .builder-block-card { overflow: hidden; }
    .builder-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); background: var(--surface-soft); }
    .builder-block-head h2 { margin: 2px 0 0; font-size: 0.95rem; overflow-wrap: anywhere; }
    .builder-block-index { color: var(--dim); font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.08em; }
    .builder-block-actions, .builder-row-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .builder-block-actions .icon-btn, .builder-row-actions .icon-btn { width: 40px; height: 40px; min-width: 40px; }
    .builder-danger { color: var(--danger); }
    .builder-block-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
    .builder-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; grid-column: 1 / -1; }
    .builder-subsection { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--line-soft); }
    .builder-subhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
    .builder-subhead h3 { margin: 0; font-size: 0.76rem; color: var(--text-soft); }
    .builder-participant-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 40px; gap: 8px; align-items: end; margin-bottom: 8px; }
    .builder-participant-row .builder-field { font-size: 0.58rem; }
    .builder-row-delete { min-height: 44px; align-self: end; }
    .builder-messages { display: grid; gap: 8px; }
    .builder-message-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-soft); }
    .builder-message-main { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(110px, 0.7fr) minmax(0, 1.6fr) 92px; gap: 8px; align-items: end; }
    .builder-message-main .builder-field { font-size: 0.58rem; }
    .builder-row-actions { align-self: center; justify-content: flex-end; }
    .builder-question { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--surface-soft); }
    .builder-question-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; color: var(--dim); font-family: var(--mono); font-size: 0.58rem; }
    .builder-question .builder-field-wide { grid-column: 1 / -1; }
    .builder-add-block { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .builder-add-block select { width: auto; min-width: 150px; font-size: 0.66rem; }
    .builder-add-block .btn { min-height: 44px; }
    .builder-empty { padding: 26px; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); text-align: center; font-size: 0.75rem; }
    .builder-start-modal, .builder-draft-modal {
      width: min(620px, calc(100% - 24px));
      max-width: none;
      max-height: calc(100vh - 24px);
      margin: auto;
      padding: 0;
      border: 0;
      border-radius: 20px;
      background: transparent;
      color: var(--text);
    }
    .builder-start-modal::backdrop, .builder-draft-modal::backdrop {
      background: rgba(3, 5, 7, 0.74);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
    }
    .builder-start-panel, .builder-draft-panel {
      max-height: calc(100vh - 24px);
      overflow-y: auto;
      border: 1px solid rgba(var(--accent-rgb), 0.24);
      border-radius: 20px;
      background: linear-gradient(155deg, var(--surface), var(--bg-deep));
      box-shadow: var(--shadow-card);
    }
    .builder-start-head, .builder-draft-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 17px 18px 12px; border-bottom: 1px solid var(--line-soft); }
    .builder-start-head h2, .builder-draft-head h2 { margin: 3px 0 0; font-size: 1.3rem; }
    .builder-start-head p { margin: 5px 0 0; color: var(--muted); font-size: 0.68rem; }
    .builder-start-options { display: grid; gap: 8px; padding: 14px 18px; }
    .builder-start-option { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 58px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); color: var(--text); text-align: left; cursor: pointer; }
    .builder-start-option:hover { border-color: rgba(var(--accent-rgb), 0.5); }
    .builder-start-icon { font-size: 1.1rem; line-height: 1.2; }
    .builder-start-option strong { display: block; font-size: 0.78rem; }
    .builder-start-option small { display: block; margin-top: 3px; color: var(--muted); font-size: 0.62rem; line-height: 1.4; }
    .builder-start-actions, .builder-draft-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); }
    .builder-start-actions .btn, .builder-draft-actions .btn { min-height: 44px; }
    .builder-draft-summary { margin: 0; padding: 16px 18px; color: var(--text-soft); font-size: 0.78rem; overflow-wrap: anywhere; }
    @media (max-width: 800px) {
      .builder-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .builder-block-body { grid-template-columns: 1fr; }
      .builder-block-body .builder-field-wide, .builder-two-columns, .builder-subsection, .builder-question { grid-column: auto; }
      .builder-message-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .builder-message-main .builder-field:nth-child(3) { grid-column: 1 / -1; }
      .builder-message-row { grid-template-columns: 1fr; }
      .builder-participant-row { grid-template-columns: minmax(0, 1fr) 120px 40px; }
    }
    @media (max-width: 560px) {
      .builder-topbar { align-items: flex-start; flex-wrap: wrap; padding: 9px 10px; }
      .builder-title-wrap { flex: 1 1 calc(100% - 60px); }
      .builder-top-actions { flex: 1 1 100%; justify-content: flex-end; }
      .builder-draft-state { width: 100%; text-align: right; }
      .builder-main { width: calc(100% - 16px); padding-top: 12px; }
      .builder-meta { padding: 12px; }
      .builder-meta-grid, .builder-two-columns, .builder-question { grid-template-columns: 1fr; }
      .builder-block-body { padding: 11px; gap: 10px; }
      .builder-participant-row { grid-template-columns: minmax(0, 1fr) 40px; }
      .builder-participant-row .builder-field:nth-child(2) { grid-column: 1 / 2; }
      .builder-add-block { width: 100%; }
      .builder-add-block select { flex: 1 1 auto; min-width: 0; }
      .builder-add-block .btn { flex: 0 0 auto; }
      .builder-message-main { grid-template-columns: 1fr; }
      .builder-message-main .builder-field:nth-child(3) { grid-column: auto; }
      .builder-start-modal, .builder-draft-modal { width: calc(100% - 16px); }
      .builder-start-actions, .builder-draft-actions { flex-direction: column-reverse; }
      .builder-start-actions .btn, .builder-draft-actions .btn { width: 100%; }
    }

    /* ============================================================
       E5 · AI CO-AUTHOR PANEL
       ============================================================ */
    .builder-ai-toggle.is-active { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.12); }
    .builder-ai-select { min-height: 44px; padding: 0 10px; font-size: 0.58rem; color: var(--cyan-bright); }
    .builder-ai-select.is-active { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.13); color: var(--text); }
    .builder-block-card.is-ai-selected { border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18), var(--shadow-card); }
    .builder-ai-panel {
      position: fixed;
      z-index: 55;
      top: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      width: min(390px, 100%);
      border-left: 1px solid rgba(var(--accent-rgb), 0.24);
      background: linear-gradient(155deg, var(--surface), var(--bg-deep));
      box-shadow: -20px 0 60px rgba(0, 0, 0, 0.42);
      -webkit-backdrop-filter: blur(22px) saturate(150%);
      backdrop-filter: blur(22px) saturate(150%);
      transform: translateX(102%);
      transition: transform 0.24s var(--ease);
      visibility: hidden;
    }
    .builder-ai-panel.is-open { transform: translateX(0); visibility: visible; }
    .builder-ai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 14px 11px; border-bottom: 1px solid var(--line-soft); }
    .builder-ai-head h2 { margin: 3px 0 0; font-size: 1rem; }
    .builder-ai-head .icon-btn { width: 42px; height: 42px; flex: 0 0 42px; }
    .builder-ai-context { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 0.63rem; line-height: 1.45; }
    .builder-ai-context strong { display: block; margin-bottom: 2px; color: var(--dim); font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; }
    .builder-ai-context span { overflow-wrap: anywhere; }
    .builder-ai-log { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
    .builder-ai-message { max-width: 94%; padding: 8px 9px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-soft); }
    .builder-ai-message.is-user { align-self: flex-end; border-color: rgba(var(--accent-rgb), 0.24); background: rgba(var(--accent-rgb), 0.08); }
    .builder-ai-message.is-error { border-color: rgba(251, 113, 133, 0.38); background: var(--danger-soft); }
    .builder-ai-message > span { display: block; margin-bottom: 3px; color: var(--dim); font-family: var(--mono); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em; }
    .builder-ai-message p { margin: 0; color: var(--text-soft); font-size: 0.68rem; line-height: 1.5; overflow-wrap: anywhere; }
    .builder-ai-empty { margin: 0; color: var(--dim); font-size: 0.64rem; line-height: 1.5; }
    .builder-ai-status-text { margin: 0; color: var(--muted); font-size: 0.64rem; line-height: 1.5; overflow-wrap: anywhere; }
    .builder-ai-error { margin: 0; color: var(--danger); font-size: 0.66rem; line-height: 1.5; overflow-wrap: anywhere; }
    .builder-ai-error-actions, .builder-ai-preview-actions { display: flex; flex-wrap: wrap; gap: 6px; }
    .builder-ai-error-actions .btn, .builder-ai-preview-actions .btn { min-height: 42px; font-size: 0.6rem; }
    .builder-ai-cancel { align-self: flex-start; min-height: 42px; }
    .builder-ai-preview { border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 11px; background: rgba(var(--accent-rgb), 0.05); overflow: hidden; }
    .builder-ai-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border-bottom: 1px solid var(--line-soft); font-size: 0.62rem; }
    .builder-ai-preview-head span { color: var(--dim); font-family: var(--mono); font-size: 0.52rem; }
    .builder-ai-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 9px; }
    .builder-ai-compare > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .builder-ai-compare-label { color: var(--dim); font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; }
    .builder-ai-compare span:not(.builder-ai-compare-label) { display: flex; justify-content: space-between; gap: 4px; color: var(--text-soft); font-size: 0.58rem; }
    .builder-ai-compare small { color: var(--muted); font-size: 0.56rem; }
    .builder-ai-compare strong { color: var(--text); font-size: 0.62rem; }
    .builder-ai-changes { margin: 0; padding: 0 9px 9px 25px; color: var(--text-soft); font-size: 0.61rem; line-height: 1.5; }
    .builder-ai-changes li { margin: 2px 0; overflow-wrap: anywhere; }
    .builder-ai-preview-actions { padding: 8px 9px; border-top: 1px solid var(--line-soft); }
    .builder-ai-compose { flex: 0 0 auto; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); background: var(--surface-soft); }
    .builder-ai-compose .builder-field textarea { min-height: 62px; }
    .builder-ai-select-hint { margin: 0 0 7px; padding: 7px 8px; border: 1px dashed rgba(var(--accent-rgb), 0.25); border-radius: 8px; color: var(--cyan-bright); font-size: 0.62rem; line-height: 1.4; }
    .builder-ai-compose-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 7px; }
    .builder-ai-compose-actions .btn { min-height: 43px; font-size: 0.6rem; }
    @media (min-width: 960px) {
      body.builder-ai-open .builder-main { width: min(1120px, calc(100% - 424px)); margin-left: auto; margin-right: 400px; }
      body.builder-ai-open .builder-topbar { padding-right: 404px; }
    }
    @media (max-width: 959px) {
      .builder-ai-panel {
        top: auto;
        left: 0;
        width: 100%;
        height: min(78vh, 680px);
        border-left: 0;
        border-top: 1px solid rgba(var(--accent-rgb), 0.3);
        border-radius: 18px 18px 0 0;
        transform: translateY(102%);
      }
      .builder-ai-panel.is-open { transform: translateY(0); }
    }
    @media (max-width: 420px) {
      .builder-ai-compose-actions { flex-direction: column-reverse; align-items: stretch; }
      .builder-ai-compose-actions .btn { width: 100%; }
      .builder-ai-compare { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      .builder-ai-panel { transition: none; }
    }

    /* ============================================================
       E6 · THEORY ORIGINALS + CLICK GLOSSARY
       ============================================================ */
    .theory-key-phrases { margin: 14px 0 16px; padding: 12px 14px; border: 1px solid rgba(var(--accent-rgb), 0.2); border-radius: 13px; background: rgba(var(--accent-rgb), 0.045); }
    .theory-section-label { margin-bottom: 8px; color: var(--dim); font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.09em; text-transform: uppercase; }
    .theory-key-phrase { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
    .theory-key-phrase:first-of-type { border-top: 0; }
    .theory-key-phrase strong { color: var(--text); font-size: 0.82rem; line-height: 1.45; overflow-wrap: anywhere; }
    .theory-key-phrase span { color: var(--text-soft); font-size: 0.7rem; }
    .theory-key-phrase p { margin: 3px 0 0; color: var(--muted); font-size: 0.64rem; line-height: 1.45; }
    .theory-fun-fact { margin-top: 12px; padding: 11px 13px; border-left: 2px solid rgba(var(--accent-rgb), 0.6); border-radius: 0 10px 10px 0; background: var(--surface-soft); }
    .theory-fun-fact strong { color: var(--cyan-bright); font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; }
    .theory-fun-fact p { margin: 4px 0 0; color: var(--text-soft); font-size: 0.7rem; line-height: 1.5; }
    .gloss { border-bottom: 1px dotted rgba(var(--accent-rgb), 0.8); color: var(--accent-pale); cursor: pointer; border-radius: 2px; }
    .gloss:hover, .gloss:focus-visible { background: rgba(var(--accent-rgb), 0.13); outline: none; }
    .gloss-popover { position: fixed; z-index: 120; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(440px, calc(100% - 20px)); }
    .gloss-popover[hidden] { display: none !important; }
    .gloss-panel { padding: 14px; border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 14px; background: var(--surface); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
    .gloss-kicker { color: var(--dim); font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.08em; }
    .gloss-panel h3 { margin: 4px 0 3px; color: var(--text); font-size: 1.15rem; overflow-wrap: anywhere; }
    .gloss-translation { margin: 0; color: var(--cyan-bright); font-size: 0.8rem; line-height: 1.45; }
    .gloss-explanation { margin: 7px 0 0; color: var(--muted); font-size: 0.68rem; line-height: 1.5; }
    .gloss-actions { display: flex; gap: 7px; justify-content: flex-end; margin-top: 12px; }
    .gloss-actions .btn { min-height: 42px; }
    @media (max-width: 420px) {
      .gloss-popover { bottom: calc(10px + env(safe-area-inset-bottom)); }
      .gloss-actions { flex-direction: column-reverse; }
      .gloss-actions .btn { width: 100%; }
    }