/* ЕГЭJust · Modern Aurora Glass · 2026 UI system */
:root {
  color-scheme: dark;
  --page: #0b1216;
  --page-glow: #162630;
  --surface: #152229;
  --surface-2: #1a2a33;
  --surface-3: #20333d;
  --glass: rgba(21, 34, 41, 0.85);
  --border: #283a45;
  --border-bright: #38505d;
  --edge: #0d161b;
  --text: #f2f8fa;
  --muted: #8ca3ad;
  --faint: #5f7781;
  --green: #58cc02;
  --green-dark: #46a302;
  --green-soft: rgba(88, 204, 2, 0.12);
  --blue: #1cb0f6;
  --blue-dark: #1185bc;
  --blue-soft: rgba(28, 176, 246, 0.12);
  --cyan: #38bdf8;
  --gold: #ffc800;
  --gold-dark: #d9a600;
  --gold-soft: rgba(255, 200, 0, 0.12);
  --red: #ff4b4b;
  --red-dark: #d93838;
  --red-soft: rgba(255, 75, 75, 0.12);
  --purple: #ce82ff;
  --purple-dark: #a552e0;
  --purple-soft: rgba(206, 130, 255, 0.12);
  --shadow: 0 20px 55px rgba(0, 0, 0, 0.34);
  --card-shadow: 0 4px 0 var(--edge);
  --radius: 20px;
  --ease: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-theme="light"] {
  color-scheme: light;
  --page: #f3f7f8;
  --page-glow: #e1f2f7;
  --surface: #ffffff;
  --surface-2: #eef4f6;
  --surface-3: #e1eaee;
  --glass: rgba(255, 255, 255, 0.88);
  --border: #d8e3e8;
  --border-bright: #bdd0d8;
  --edge: #c8d6dc;
  --text: #17272e;
  --muted: #627983;
  --faint: #90a4ac;
  --green-soft: #eaf8df;
  --blue-soft: #e3f5fe;
  --gold-soft: #fff6d9;
  --red-soft: #ffe9e9;
  --purple-soft: #f4e9ff;
  --shadow: 0 20px 50px rgba(27, 54, 66, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: radial-gradient(ellipse at top, var(--page-glow) 0%, var(--page) 70%);
  background-attachment: fixed;
  font-family: "Nunito", "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.lesson-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a, select, input, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
svg.lucide { width: 1em; height: 1em; flex: none; stroke-width: 2.2; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; z-index: 400; top: 10px; left: 10px; padding: 10px 16px; border-radius: 12px; color: var(--page); background: var(--text); transform: translateY(-160%); transition: transform var(--ease); }
.skip-link:focus { transform: translateY(0); }
::selection { color: #fff; background: rgba(28, 176, 246, 0.4); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--border-bright); background-clip: padding-box; }

/* Motion */
@keyframes float { 0%, 100% { transform: translateY(2px) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { opacity: 0.55; transform: scale(0.92); } 75%, 100% { opacity: 0; transform: scale(1.28); } }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scale-up { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes content-in { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes subject-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(0.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes drawer-in { from { opacity: 0; transform: translateX(35px); } to { opacity: 1; transform: translateX(0); } }
@keyframes blitz-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hint-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes crown-in { from { opacity: 0; transform: scale(0.25) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes confetti { from { transform: translateY(-20px) rotate(0); } to { transform: translateY(105vh) rotate(600deg); } }
@keyframes pulse-danger { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Glass header */
.topbar { position: sticky; z-index: 90; top: 0; border-bottom: 1px solid rgba(56, 80, 93, 0.48); background: var(--glass); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.topbar-inner { display: flex; align-items: center; gap: 18px; width: min(1120px, calc(100% - 32px)); min-height: 74px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; }
.brand-mark { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 14px; background: linear-gradient(145deg, #00c6ff, #0072ff); box-shadow: 0 4px 0 #0757a8, 0 10px 24px rgba(0, 114, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform var(--ease), box-shadow var(--ease); }
.brand:hover .brand-mark { transform: translateY(-2px) rotate(-3deg); box-shadow: 0 6px 0 #0757a8, 0 14px 28px rgba(0, 198, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.brand:active .brand-mark { transform: translateY(4px); box-shadow: none !important; }
.brand-mark svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 2px rgba(0, 65, 120, 0.25)); }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-name { color: var(--text); font-size: 22px; font-weight: 900; letter-spacing: -0.8px; }
.brand-name span { color: var(--blue); }
.brand-tagline { margin-top: 5px; color: var(--faint); font-size: 8px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }
.subject-picker { position: relative; }
.subject-picker-button { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; max-width: 245px; padding: 7px 12px; border: 2px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface); box-shadow: var(--card-shadow); font-size: 12px; font-weight: 900; cursor: pointer; transition: transform var(--ease), border-color var(--ease), background var(--ease); }
.subject-picker-button:hover { border-color: var(--border-bright); background: var(--surface-2); transform: translateY(-1px); }
.subject-picker-button:active { transform: translateY(4px); box-shadow: none !important; }
.subject-picker-button > span:first-child { font-size: 19px; }
#current-subject-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chevron { width: 15px; height: 15px; color: var(--muted); }
.top-stats { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.top-stat { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 52px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: rgba(26, 42, 51, 0.7); font-size: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); }
.top-stat svg { width: 16px; height: 16px; }
.top-stat strong { font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; }
.top-stat-streak { color: #ffab40; }
.top-stat-xp { color: var(--gold); }
.top-stat-combo { color: var(--cyan); }
.top-stat-review { color: #8ee45b; }
.profile-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 5px; border: 2px solid var(--border); border-radius: 13px; background: linear-gradient(145deg, #00c6ff, #0072ff); box-shadow: 0 3px 0 #0757a8; cursor: pointer; transition: transform var(--ease), box-shadow var(--ease); }
.profile-button:hover { transform: translateY(-2px); }
.profile-button:active { transform: translateY(4px); box-shadow: none !important; }
.profile-button svg { width: 100%; height: 100%; }

/* Shared screen layout */
.app-main { min-height: calc(100vh - 74px); padding: 38px 18px 142px; }
.screen { animation: screen-in 0.32s var(--ease) both; }
.screen-inner { width: min(960px, 100%); margin: 0 auto; }
.screen-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.screen-heading-copy { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: 1.45px; text-transform: uppercase; }
.eyebrow svg { width: 14px; height: 14px; }
.screen-header h1 { max-width: 720px; margin-bottom: 9px; font-size: clamp(30px, 4.5vw, 42px); font-weight: 900; letter-spacing: -1.6px; line-height: 1.06; }
.screen-subtitle { max-width: 650px; margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.6; }
.screen-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.screen-meta span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: rgba(21, 34, 41, 0.45); font-size: 9px; font-weight: 800; }
.screen-meta svg { width: 12px; height: 12px; color: var(--blue); }
.loader { display: inline-block; width: 21px; height: 21px; border: 3px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
.map-status, .map-loading { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 65px 20px; color: var(--muted); font-size: 13px; }

/* Dolphin hero */
.mascot-bubble { position: relative; display: grid; flex: 0 0 126px; place-items: center; width: 126px; height: 112px; overflow: hidden; border: 2px solid #245065; border-radius: 26px; background: radial-gradient(circle at 50% 28%, #17465b, #102731 72%); box-shadow: 0 4px 0 #091318, 0 16px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.mascot-bubble::before { content: ""; position: absolute; right: -25px; bottom: -35px; width: 110px; height: 110px; border: 18px solid rgba(56, 189, 248, 0.06); border-radius: 50%; }
.mascot-orbit { position: absolute; top: 14px; left: 17px; width: 6px; height: 6px; border-radius: 50%; background: #7dd3fc; box-shadow: 82px 15px 0 -1px rgba(125, 211, 252, 0.55), 68px 68px 0 -2px rgba(125, 211, 252, 0.45); animation: float 4s ease-in-out infinite; }
.dolphin-art { position: relative; z-index: 1; width: 82px; height: 82px; overflow: visible; animation: float 3.8s ease-in-out infinite; filter: drop-shadow(0 9px 9px rgba(0, 0, 0, 0.25)); }
.mascot-caption { position: absolute; z-index: 2; right: 9px; bottom: 8px; padding: 3px 7px; border: 1px solid rgba(125, 211, 252, 0.22); border-radius: 7px; color: #bae6fd; background: rgba(11, 18, 22, 0.5); font-size: 8px; font-weight: 900; }
.dolphin-mascot-small { flex-basis: 98px; width: 98px; height: 92px; border-radius: 22px; }
.dolphin-mascot-small .dolphin-art { width: 66px; height: 66px; }
.dialog-dolphin { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 12px; border: 2px solid #245065; border-radius: 25px; background: radial-gradient(circle at 50% 28%, #17465b, #102731 72%); box-shadow: var(--card-shadow); }
.dialog-dolphin svg { width: 67px; height: 67px; animation: float 3.8s ease-in-out infinite; }

/* Buttons and shared cards */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 19px; border: 2px solid transparent; border-radius: 15px; color: #fff; box-shadow: 0 4px 0 var(--button-edge, #0d161b); font-size: 12px; font-weight: 900; letter-spacing: 0.15px; cursor: pointer; transition: transform var(--ease), filter var(--ease), box-shadow var(--ease); }
.button svg { width: 16px; height: 16px; }
.button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-2px); }
.button:active:not(:disabled) { transform: translateY(4px); box-shadow: none !important; }
.button-green { --button-edge: #367e02; border-color: #63d91c; background: linear-gradient(180deg, #64d918, #4ebb02); }
.button-blue { --button-edge: #0b6f9f; border-color: #3cbcf7; background: linear-gradient(180deg, #2bb9f8, #139fdf); }
.button-yellow { --button-edge: #a77e00; border-color: #ffda45; color: #4b3900; background: linear-gradient(180deg, #ffd634, #f5be00); }
.button-purple { --button-edge: #7940a6; border-color: #d99aff; background: linear-gradient(180deg, #d38bff, #b768ed); }
.button-white { --button-edge: var(--edge); border-color: var(--border); color: var(--blue); background: var(--surface-2); }
.button-wide { width: 100%; }
.card-kicker, .kim-kicker { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: 1.35px; text-transform: uppercase; }

/* Learn: exam launch and KIM */
.exam-launch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; overflow: hidden; margin-bottom: 16px; padding: 17px 18px; border: 2px solid #4c4529; border-radius: var(--radius); background: linear-gradient(115deg, #1b292e, #28291f); box-shadow: var(--card-shadow); }
.exam-launch::after { content: ""; position: absolute; top: -80px; right: 18%; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 0, 0.09), transparent 70%); pointer-events: none; }
.exam-launch-copy { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; min-width: 0; }
.exam-launch-icon { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; border: 2px solid #62552b; border-radius: 15px; color: var(--gold); background: rgba(255, 200, 0, 0.09); box-shadow: 0 3px 0 #17180f; font-size: 25px; }
.exam-launch strong { display: block; margin-bottom: 3px; font-size: 15px; font-weight: 900; }
.exam-launch-copy > div > span:last-child { display: block; color: var(--muted); font-size: 10px; font-weight: 700; }
.exam-launch .button { position: relative; z-index: 1; flex: none; }
.kim-navigator { margin-bottom: 20px; padding: 17px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--card-shadow); }
.kim-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kim-nav-head .kim-kicker { color: var(--blue); }
.kim-nav-head h2 { margin: 0; font-size: 16px; font-weight: 900; letter-spacing: -0.25px; }
.kim-nav-actions { display: flex; align-items: center; gap: 8px; }
.topic-progress-pill { flex: none; padding: 6px 9px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface-2); font-size: 9px; font-weight: 900; font-variant-numeric: tabular-nums; }
.all-topics-button { display: inline-flex; align-items: center; gap: 6px; min-height: 33px; padding: 5px 9px; border: 2px solid var(--border); border-radius: 10px; color: var(--blue); background: var(--surface-2); box-shadow: 0 3px 0 var(--edge); font-size: 9px; font-weight: 900; cursor: pointer; transition: transform var(--ease), border-color var(--ease); }
.all-topics-button:hover { border-color: var(--blue); transform: translateY(-1px); }
.all-topics-button:active { transform: translateY(4px); box-shadow: none !important; }
.all-topics-button svg { width: 14px; height: 14px; }
.kim-strip { display: flex; gap: 8px; overflow-x: auto; padding: 9px 2px 11px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.kim-chip { position: relative; display: grid; flex: 0 0 51px; place-items: center; gap: 5px; min-height: 55px; padding: 6px 4px; border: 2px solid var(--border); border-radius: 13px; color: var(--muted); background: var(--surface-2); box-shadow: 0 3px 0 var(--edge); cursor: pointer; transition: transform var(--ease), border-color var(--ease), background var(--ease), box-shadow var(--ease); }
.kim-chip:hover { border-color: var(--border-bright); transform: translateY(-2px); }
.kim-chip:active { transform: translateY(4px); box-shadow: none !important; }
.kim-chip.is-active { border-color: var(--blue); color: #dff5ff; background: #153443; box-shadow: 0 3px 0 #0b5b80, 0 0 0 3px rgba(28, 176, 246, 0.12), 0 0 20px rgba(28, 176, 246, 0.16); transform: translateY(-2px); }
.kim-chip.is-started:not(.is-active) { border-color: #27637e; color: var(--blue); background: var(--blue-soft); }
.kim-chip.is-complete { border-color: #6b5b20; color: #ffdc58; background: var(--gold-soft); }
.kim-chip.is-complete.is-active { border-color: var(--gold); box-shadow: 0 3px 0 #745900, 0 0 18px rgba(255, 200, 0, 0.2); }
.kim-chip.is-due { border-color: #766128; }
.kim-chip-number { font-size: 12px; font-weight: 900; line-height: 1; }
.kim-chip-crown { position: absolute; top: -8px; right: -5px; font-size: 13px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)); }
.kim-chip-due { position: absolute; top: -8px; left: -5px; font-size: 12px; }
.kim-dots { display: flex; gap: 2px; }
.kim-dots i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--border-bright); }
.kim-dots i.is-filled { background: currentColor; }
.kim-active-name { display: flex; align-items: center; gap: 8px; padding-top: 11px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; }
.kim-active-name > span:first-child { flex: none; padding: 4px 7px; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-weight: 900; }
.kim-active-name strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.kim-active-name > span:last-child { flex: none; margin-left: auto; font-size: 9px; }

/* Learning map */
.learning-map { position: relative; }
.topic-hero { position: relative; overflow: hidden; padding: 27px 28px; border: 2px solid var(--topic-dark); border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--topic), var(--topic-dark)); box-shadow: 0 5px 0 var(--topic-dark), 0 18px 35px rgba(0, 0, 0, 0.18); }
.topic-hero::before { content: ""; position: absolute; top: -80px; right: -35px; width: 230px; height: 230px; border: 30px solid rgba(255, 255, 255, 0.09); border-radius: 50%; }
.topic-hero::after { content: ""; position: absolute; right: 105px; bottom: -90px; width: 160px; height: 160px; border: 20px solid rgba(255, 255, 255, 0.06); border-radius: 50%; }
.topic-hero-clickable { cursor: pointer; transition: transform var(--ease), filter var(--ease); }
.topic-hero-clickable:hover { filter: brightness(1.05); transform: translateY(-2px); }
.topic-hero-clickable:active { transform: translateY(4px); box-shadow: none !important; }
.topic-hero-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.topic-hero .eyebrow { color: rgba(255, 255, 255, 0.72); }
.topic-hero h2 { position: relative; z-index: 1; margin-bottom: 8px; font-size: clamp(22px, 3vw, 29px); font-weight: 900; letter-spacing: -0.6px; line-height: 1.18; }
.topic-hero p { position: relative; z-index: 1; max-width: 590px; margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 700; line-height: 1.55; }
.hero-badge { position: relative; z-index: 2; flex: none; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 10px; color: #fff; background: rgba(0, 0, 0, 0.14); font-size: 9px; font-weight: 900; white-space: nowrap; backdrop-filter: blur(6px); }
.topic-memory { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin-top: 14px; color: rgba(255, 255, 255, 0.82); font-size: 9px; }
.memory-bars { display: inline-flex; gap: 3px; }
.memory-bars i { width: 18px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.23); }
.memory-bars i.is-on { background: #d2ffa4; box-shadow: 0 0 7px rgba(210, 255, 164, 0.35); }
.hero-open-hint { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: rgba(255, 255, 255, 0.78); font-size: 9px; font-weight: 800; }
.hero-open-hint > span { font-size: 13px; }
.lesson-path { position: relative; padding: 38px 0 8px; }
.path-item { position: relative; display: flex; flex-direction: column; align-items: center; width: 240px; min-height: 120px; margin: 0 auto; }
.path-item:nth-child(1), .path-item:nth-child(5), .path-item:nth-child(9) { transform: translateX(-64px); }
.path-item:nth-child(3), .path-item:nth-child(7) { transform: translateX(64px); }
.path-item:nth-child(2), .path-item:nth-child(6), .path-item:nth-child(10) { transform: translateX(-27px); }
.path-item:nth-child(4), .path-item:nth-child(8) { transform: translateX(27px); }
.path-item:not(:last-child)::after { content: ""; position: absolute; bottom: -12px; left: 50%; height: 25px; border-left: 3px dotted var(--border-bright); opacity: 0.7; }
.lesson-node { position: relative; display: grid; place-items: center; width: 80px; height: 80px; padding: 0; border: 2px solid var(--node-dark, var(--border)); border-radius: 50%; color: #fff; background: var(--node-bg, var(--surface-2)); box-shadow: 0 6px 0 var(--node-dark, var(--edge)), 0 12px 24px rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.16); font-size: 30px; cursor: pointer; transition: transform var(--ease), filter var(--ease), box-shadow var(--ease); }
.lesson-node > span:first-child { transform: translateY(-2px); filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.16)); }
.lesson-node:hover:not(:disabled) { filter: brightness(1.09); transform: translateY(-3px) scale(1.03); }
.lesson-node:active:not(:disabled) { transform: translateY(4px); box-shadow: none !important; }
.lesson-node.is-unlocked { --node-bg: var(--topic); --node-dark: var(--topic-dark); }
.lesson-node.is-unlocked::before { content: ""; position: absolute; inset: -12px; border: 3px solid var(--topic); border-radius: 50%; opacity: 0.5; animation: pulse 2.2s ease-out infinite; }
.lesson-node.is-completed { --node-bg: var(--green); --node-dark: var(--green-dark); }
.lesson-node.is-boss.is-completed { --node-bg: var(--gold); --node-dark: var(--gold-dark); color: #6d5200; }
.lesson-node.is-locked { --node-bg: #1a282f; --node-dark: #0a1115; border-color: #263842; color: #4f6772; cursor: not-allowed; box-shadow: 0 5px 0 #0a1115, inset 0 2px 0 rgba(255, 255, 255, 0.025); }
.node-check { position: absolute; right: -5px; bottom: -1px; display: grid; place-items: center; width: 27px; height: 27px; border: 3px solid var(--page); border-radius: 50%; color: #fff; background: var(--green-dark); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); font-size: 13px; }
.is-boss .node-check { color: #775b00; background: var(--gold); }
.start-label { position: absolute; z-index: 5; top: -30px; left: 50%; padding: 5px 11px; border: 2px solid var(--topic); border-radius: 9px; color: var(--topic); background: var(--surface); box-shadow: 0 3px 0 var(--edge); font-size: 9px; font-weight: 900; letter-spacing: 1px; transform: translateX(-50%); animation: bob 1.5s ease-in-out infinite; }
.start-label::after { content: ""; position: absolute; bottom: -6px; left: calc(50% - 5px); width: 8px; height: 8px; border-right: 2px solid var(--topic); border-bottom: 2px solid var(--topic); background: var(--surface); transform: rotate(45deg); }
.path-title { max-width: 210px; margin-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.3; text-align: center; }
.path-item:has(.is-unlocked) .path-title { color: var(--text); font-weight: 900; }
.path-xp { margin-top: 4px; color: var(--faint); font-size: 9px; font-weight: 800; }

/* Subject library */
.profile-highlight { display: flex; align-items: center; gap: 17px; margin-bottom: 28px; padding: 20px 22px; border: 2px solid var(--border); border-radius: var(--radius); background: linear-gradient(120deg, var(--surface), var(--surface-2)); box-shadow: var(--card-shadow); }
.highlight-icon { display: grid; flex: 0 0 50px; place-items: center; width: 50px; height: 50px; border: 2px solid #625326; border-radius: 15px; color: var(--gold); background: var(--gold-soft); box-shadow: 0 3px 0 var(--edge); font-size: 25px; }
.highlight-icon svg { width: 25px; height: 25px; }
.highlight-copy { flex: 1; min-width: 0; }
.highlight-copy strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 900; }
.highlight-copy span { color: var(--muted); font-size: 11px; font-weight: 700; }
.highlight-number { flex: none; color: var(--gold); font-size: 20px; font-weight: 900; }
.subject-category { margin-bottom: 29px; }
.subject-category:last-child { margin-bottom: 0; }
.subject-category-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.subject-category-head h2 { margin: 0; font-size: 17px; font-weight: 900; letter-spacing: -0.3px; }
.subject-category-head > span { color: var(--muted); font-size: 9px; }
.subject-category-line { flex: 1; height: 1px; background: var(--border); }
.subject-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.subject-card { position: relative; display: flex; flex-direction: column; min-height: 218px; overflow: hidden; padding: 20px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--card-shadow); cursor: pointer; transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); }
.subject-card:hover { border-color: color-mix(in srgb, var(--card-color) 60%, var(--border)); box-shadow: 0 7px 0 var(--edge), 0 18px 32px rgba(0, 0, 0, 0.2); transform: translateY(-3px); }
.subject-card:active { transform: translateY(4px); box-shadow: none !important; }
.subject-card.is-current { border-color: var(--card-color); }
.subject-card-glow { position: absolute; top: -65px; right: -50px; width: 150px; height: 150px; border-radius: 50%; background: var(--card-color); opacity: 0.12; filter: blur(14px); }
.subject-card-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.subject-card-icon { display: grid; place-items: center; width: 50px; height: 50px; border: 2px solid var(--border); border-radius: 15px; background: var(--surface-2); box-shadow: 0 3px 0 var(--edge); font-size: 27px; }
.current-chip { padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--card-color) 35%, transparent); border-radius: 7px; color: var(--card-color); background: color-mix(in srgb, var(--card-color) 10%, transparent); font-size: 8px; font-weight: 900; letter-spacing: 0.6px; }
.subject-card h2 { position: relative; margin-bottom: 6px; font-size: 17px; font-weight: 900; line-height: 1.25; letter-spacing: -0.3px; }
.subject-card p { position: relative; margin-bottom: 16px; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.5; }
.subject-progress { position: relative; margin-top: auto; }
.subject-progress-labels { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--muted); font-size: 9px; }
.subject-progress-labels strong { color: var(--text); }
.progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--card-color); box-shadow: 0 0 10px color-mix(in srgb, var(--card-color) 40%, transparent); transition: width 0.45s ease; }
.subject-card-foot { display: flex; gap: 12px; margin-top: 13px; color: var(--muted); font-size: 9px; }
.subject-card-foot span { display: inline-flex; align-items: center; gap: 4px; }
.subject-card-foot svg { width: 12px; height: 12px; }

/* Subject picker modal */
.subject-backdrop, .drawer-backdrop { position: fixed; z-index: 70; inset: 0; background: rgba(3, 9, 12, 0.72); backdrop-filter: blur(7px); animation: fade-in 0.18s ease both; }
.subject-popover { position: fixed; z-index: 80; top: 50%; left: 50%; width: min(720px, calc(100% - 28px)); max-height: min(760px, calc(100dvh - 36px)); overflow-y: auto; padding: 22px; border: 2px solid var(--border); border-radius: 24px; background: var(--glass); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5); backdrop-filter: blur(16px); transform: translate(-50%, -50%); animation: subject-in 0.24s var(--ease) both; }
.subject-popover-head, .kim-dialog-head, .drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.subject-popover-head > div > span, .kim-dialog-head .kim-kicker { display: block; margin-bottom: 5px; color: var(--blue); font-size: 8px; font-weight: 900; letter-spacing: 1.3px; }
.subject-popover-head h2, .kim-dialog-head h2, .drawer-head h2 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.5px; }
.popover-close { display: grid; flex: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 2px solid var(--border); border-radius: 11px; color: var(--muted); background: var(--surface-2); box-shadow: 0 3px 0 var(--edge); cursor: pointer; transition: transform var(--ease), color var(--ease); }
.popover-close:hover { color: var(--text); transform: translateY(-1px); }
.popover-close:active { transform: translateY(4px); box-shadow: none !important; }
.popover-close svg { width: 17px; height: 17px; }
.subject-popover-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.subject-choice-card { position: relative; display: block; width: 100%; min-height: 128px; overflow: hidden; padding: 15px; border: 2px solid var(--border); border-radius: 16px; color: var(--text); background: var(--surface-2); box-shadow: 0 3px 0 var(--edge); text-align: left; cursor: pointer; transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); }
.subject-choice-card:hover { border-color: var(--subject-color); transform: translateY(-2px); }
.subject-choice-card:active { transform: translateY(4px); box-shadow: none !important; }
.subject-choice-card.is-active { border-color: var(--subject-color); background: color-mix(in srgb, var(--subject-color) 10%, var(--surface)); box-shadow: 0 3px 0 var(--edge), 0 0 0 2px color-mix(in srgb, var(--subject-color) 22%, transparent); }
.subject-choice-top { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.subject-choice-icon { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 23px; }
.subject-choice-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 900; line-height: 1.25; }
.subject-choice-badge { flex: none; padding: 4px 6px; border-radius: 6px; color: var(--subject-color); background: color-mix(in srgb, var(--subject-color) 12%, var(--surface)); font-size: 8px; font-weight: 900; }
.subject-choice-progress { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--muted); font-size: 8px; }
.subject-choice-progress strong { color: var(--text); }
.subject-choice-bar { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.subject-choice-bar span { display: block; height: 100%; border-radius: inherit; background: var(--subject-color); }

/* KIM dialog */
.kim-dialog { width: min(790px, calc(100% - 26px)); max-height: min(800px, calc(100dvh - 30px)); padding: 22px; border: 2px solid var(--border); border-radius: 24px; color: var(--text); background: var(--glass); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5); backdrop-filter: blur(16px); animation: scale-up 0.22s var(--ease) both; }
.kim-dialog::backdrop, .confirm-dialog::backdrop { background: rgba(3, 9, 12, 0.75); backdrop-filter: blur(6px); }
.kim-search-wrap { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; padding: 0 13px; border: 2px solid var(--border); border-radius: 13px; background: var(--surface-2); transition: border-color var(--ease); }
.kim-search-wrap:focus-within { border-color: var(--blue); }
.kim-search-wrap > svg { width: 18px; height: 18px; color: var(--muted); }
.kim-search-wrap input { flex: 1; height: 45px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.kim-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; max-height: 540px; overflow-y: auto; padding: 2px; }
.kim-modal-card { position: relative; display: flex; align-items: center; gap: 11px; min-height: 76px; padding: 11px; border: 2px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface-2); box-shadow: 0 3px 0 var(--edge); text-align: left; cursor: pointer; transition: transform var(--ease), border-color var(--ease); }
.kim-modal-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.kim-modal-card:active { transform: translateY(4px); box-shadow: none !important; }
.kim-modal-card.is-active { border-color: var(--blue); background: var(--blue-soft); }
.kim-modal-card.is-complete { border-color: #6b5b20; }
.kim-modal-card.is-due { border-color: #766128; }
.kim-modal-number { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 11px; color: var(--blue); background: var(--surface); font-size: 11px; font-weight: 900; }
.kim-modal-card.is-complete .kim-modal-number { color: var(--gold); background: var(--gold-soft); }
.kim-modal-copy { flex: 1; min-width: 0; }
.kim-modal-copy strong { display: block; margin-bottom: 6px; font-size: 10px; line-height: 1.3; }
.kim-modal-progress { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 8px; }
.kim-modal-track { flex: 1; height: 5px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.kim-modal-track span { display: block; height: 100%; background: var(--blue); }
.kim-modal-card.is-complete .kim-modal-track span { background: var(--gold); }
.kim-modal-due { margin-left: 2px; color: var(--gold); font-size: 10px; }
.kim-empty { padding: 28px 15px; color: var(--muted); font-size: 11px; text-align: center; }

/* Profile */
.theme-button { display: inline-flex; flex: none; align-items: center; gap: 7px; min-height: 40px; padding: 7px 11px; border: 2px solid var(--border); border-radius: 12px; color: var(--muted); background: var(--surface); box-shadow: 0 3px 0 var(--edge); font-size: 10px; font-weight: 900; cursor: pointer; transition: transform var(--ease), color var(--ease); }
.theme-button:hover { color: var(--text); transform: translateY(-1px); }
.theme-button:active { transform: translateY(4px); box-shadow: none !important; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dash-card { position: relative; padding: 21px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--card-shadow); }
.daily-card { overflow: hidden; }
.daily-card::before { content: ""; position: absolute; top: -65px; right: -45px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 0, 0.1), transparent 70%); }
.card-heading { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.card-heading h2 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -0.35px; line-height: 1.2; }
.card-emoji { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.card-emoji svg { width: 21px; height: 21px; }
.card-icon-gold { color: var(--gold); background: var(--gold-soft); }
.card-icon-blue { color: var(--blue); background: var(--blue-soft); }
.card-icon-green { color: var(--green); background: var(--green-soft); }
.card-note { margin: 11px 0 0; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.55; }
.big-progress { height: 15px; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2); }
.big-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); box-shadow: 0 0 13px rgba(255, 200, 0, 0.3); transition: width 0.45s ease; }
.review-quick-card { border-color: #245065; }
.review-quick-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; }
.review-quick-metrics > div { padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.review-quick-metrics strong { display: block; margin-bottom: 2px; font-size: 21px; font-weight: 900; }
.review-quick-metrics span { color: var(--muted); font-size: 8px; line-height: 1.35; }
.stats-overview { grid-column: span 2; border-color: #245065; }
.metric-grid, .metric-grid-five { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.metric-grid > div { padding: 13px 6px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); text-align: center; transition: transform var(--ease), border-color var(--ease); }
.metric-grid > div:hover { border-color: var(--border-bright); transform: translateY(-2px); }
.metric-grid strong { display: block; margin-bottom: 3px; font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; }
.metric-grid span { color: var(--muted); font-size: 8px; }
.achievements-card { grid-column: span 2; }
.crown-count { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid #6b5b20; border-radius: 12px; color: var(--gold); background: var(--gold-soft); font-size: 17px; font-weight: 900; }
.crowns-list { display: flex; flex-wrap: wrap; gap: 8px; }
.crown-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 9px; font-weight: 800; }
.crown-chip svg { width: 14px; height: 14px; color: var(--gold); }
.empty-crowns { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 10px; font-weight: 700; }
.empty-crowns > svg { width: 28px; height: 28px; color: var(--gold); opacity: 0.65; }
.progress-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.progress-card .card-heading { grid-column: 1 / -1; }
.donut { display: grid; place-items: center; width: 94px; height: 94px; border-radius: 50%; background: conic-gradient(var(--green) var(--donut, 0%), var(--surface-3) 0); box-shadow: 0 0 20px rgba(88, 204, 2, 0.1); }
.donut::before { content: ""; grid-area: 1 / 1; width: 72px; height: 72px; border-radius: 50%; background: var(--surface); }
.donut span { z-index: 1; grid-area: 1 / 1; font-size: 19px; font-weight: 900; }
.progress-card .card-note { margin: 0; }

/* Review */
.review-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }
.review-mode-card { position: relative; overflow: hidden; padding: 22px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--card-shadow); transition: transform var(--ease), border-color var(--ease); }
.review-mode-card::after { content: ""; position: absolute; top: -60px; right: -50px; width: 145px; height: 145px; border-radius: 50%; background: var(--mode-color, var(--blue)); opacity: 0.055; filter: blur(6px); pointer-events: none; }
.review-mode-card:hover { transform: translateY(-3px); }
.review-mode-spaced { --mode-color: var(--blue); border-color: #245065; }
.review-mode-mistakes { --mode-color: var(--gold); border-color: #554a29; }
.review-mode-blitz { --mode-color: var(--green); border-color: #334f2a; }
.review-mode-exam { --mode-color: var(--purple); border-color: #493758; }
.review-mode-icon { position: relative; display: grid; place-items: center; width: 49px; height: 49px; margin-bottom: 14px; border: 2px solid color-mix(in srgb, var(--mode-color) 28%, var(--border)); border-radius: 15px; color: var(--mode-color); background: color-mix(in srgb, var(--mode-color) 10%, var(--surface)); box-shadow: 0 3px 0 var(--edge); }
.review-mode-icon svg { width: 25px; height: 25px; }
.review-mode-kicker { display: block; margin-bottom: 5px; color: var(--mode-color); font-size: 8px; font-weight: 900; letter-spacing: 1.35px; }
.review-mode-card h2 { position: relative; margin-bottom: 8px; font-size: 21px; font-weight: 900; letter-spacing: -0.45px; }
.review-mode-card p { position: relative; min-height: 62px; margin-bottom: 14px; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.6; }
.review-mode-stats { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; margin-bottom: 15px; color: var(--muted); font-size: 8px; font-weight: 800; }
.review-topics-section { padding: 22px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--card-shadow); }
.section-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-row-head .kim-kicker { color: var(--blue); }
.section-row-head h2 { margin: 0; font-size: 20px; font-weight: 900; }
.review-legend { color: var(--muted); font-size: 8px; }
.review-topics-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.review-topic-item { display: flex; align-items: center; gap: 11px; padding: 13px; border: 2px solid var(--border); border-radius: 14px; background: var(--surface-2); transition: transform var(--ease), border-color var(--ease); }
.review-topic-item:hover { transform: translateY(-2px); }
.review-topic-item.is-due { border-color: #6b5b20; }
.review-topic-number { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 11px; color: var(--topic-color); background: var(--surface); font-size: 10px; font-weight: 900; }
.review-topic-copy { flex: 1; min-width: 0; }
.review-topic-copy strong { display: block; overflow: hidden; margin-bottom: 6px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.review-strength { display: flex; align-items: center; gap: 3px; }
.review-strength i { width: 14px; height: 5px; border-radius: 999px; background: var(--surface-3); }
.review-strength i.is-on { background: var(--green); }
.review-topic-item.is-due .review-strength i.is-on { background: var(--gold); }
.review-due-mark { flex: none; color: var(--gold); font-size: 8px; font-weight: 900; white-space: nowrap; }
.review-empty { padding: 22px; color: var(--muted); font-size: 10px; text-align: center; }
.review-topic-sub { display: block; margin-top: 5px; color: var(--muted); font-size: 7px; }

/* Parser */
.parser-tabs { display: flex; gap: 7px; max-width: 760px; margin-bottom: 18px; padding: 6px; border: 2px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--card-shadow); }
.parser-tab { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 7px 12px; border: 1px solid transparent; border-radius: 11px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 900; cursor: pointer; transition: color var(--ease), background var(--ease), border-color var(--ease); }
.parser-tab svg { width: 15px; height: 15px; }
.parser-tab.is-active { border-color: var(--border); color: var(--text); background: var(--surface-2); box-shadow: 0 2px 0 var(--edge); }
.parser-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr); gap: 17px; max-width: 960px; }
.parser-panel { min-width: 0; }
.form-card { padding: 23px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--card-shadow); }
.form-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.form-heading > span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 13px; color: var(--blue); background: var(--blue-soft); }
.form-heading > span svg { width: 22px; height: 22px; }
.form-heading h2 { margin: 0 0 3px; font-size: 18px; font-weight: 900; }
.form-heading p { margin: 0; color: var(--muted); font-size: 9px; }
.form-card label { display: block; margin: 14px 0 7px; color: var(--muted); font-size: 10px; font-weight: 900; }
.form-card input, .form-card select, .form-card textarea { width: 100%; padding: 10px 12px; border: 2px solid var(--border); border-radius: 12px; outline: 0; color: var(--text); background: var(--surface-2); font-size: 11px; font-weight: 700; resize: vertical; transition: border-color var(--ease), background var(--ease); }
.form-card input, .form-card select { height: 44px; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { border-color: var(--blue); background: var(--surface); }
.form-card input::placeholder, .form-card textarea::placeholder { color: var(--faint); }
.form-card .button { margin-top: 20px; }
.form-note { margin: 11px 0 0; color: var(--faint); font-size: 8px; line-height: 1.5; text-align: center; }
.parser-result { margin-top: 15px; padding: 15px 17px; border: 2px solid var(--green-dark); border-radius: 14px; color: var(--green); background: var(--green-soft); box-shadow: 0 3px 0 var(--edge); font-size: 10px; line-height: 1.5; animation: content-in 0.2s ease both; }
.parser-result.is-error { border-color: var(--red-dark); color: var(--red); background: var(--red-soft); }
.parser-result strong { display: block; margin-bottom: 4px; }
.parser-result p { margin: 5px 0 0; color: var(--muted); }
.parser-batch-results { display: grid; gap: 6px; margin-top: 12px; }
.parser-batch-row { display: grid; grid-template-columns: 70px 74px 1fr; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 9px; }
.parser-batch-row strong { color: var(--text); }
.parser-batch-status { font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; }
.parser-batch-row.is-added .parser-batch-status { color: var(--green); }
.parser-batch-row.is-duplicate .parser-batch-status { color: var(--gold); }
.parser-batch-row.is-error .parser-batch-status { color: var(--red); }
.parser-batch-message { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.parser-help { align-self: start; padding: 22px; border: 2px solid #514725; border-radius: var(--radius); background: linear-gradient(145deg, #202820, #20251d); box-shadow: var(--card-shadow); }
.help-emoji { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border: 1px solid #625326; border-radius: 13px; color: var(--gold); background: var(--gold-soft); }
.help-emoji svg { width: 23px; height: 23px; }
.parser-help h2 { font-size: 17px; font-weight: 900; }
.parser-help ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.parser-help li { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.45; }
.parser-help li > span { display: grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--gold); background: var(--surface); font-size: 9px; }
.parser-help > p { margin: 17px 0 0; padding-top: 14px; border-top: 1px solid #514725; color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1.55; }

/* Floating dock */
.bottom-nav { position: fixed; z-index: 60; right: 0; bottom: 20px; left: 0; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.bottom-nav-inner { display: flex; gap: 4px; width: min(660px, 100%); padding: 7px; border: 1px solid rgba(56, 80, 93, 0.65); border-radius: 22px; background: var(--glass); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42), 0 4px 0 rgba(6, 12, 15, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.035); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); pointer-events: auto; }
.nav-tab { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 57px; padding: 6px 5px; border: 1px solid transparent; border-radius: 15px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 900; cursor: pointer; transition: color var(--ease), background var(--ease), transform var(--ease), box-shadow var(--ease); }
.nav-tab:hover { color: var(--text); background: rgba(56, 80, 93, 0.18); transform: translateY(-2px); }
.nav-tab:active { transform: translateY(4px); box-shadow: none !important; }
.nav-tab.is-active { border-color: rgba(56, 189, 248, 0.24); color: var(--cyan); background: rgba(56, 189, 248, 0.1); box-shadow: 0 0 22px rgba(56, 189, 248, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.035); }
.nav-tab.is-active::before { content: ""; position: absolute; top: -8px; width: 24px; height: 3px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 12px rgba(56, 189, 248, 0.9); }
.nav-tab[data-screen="review"].is-active { border-color: rgba(88, 204, 2, 0.25); color: #8ee45b; background: var(--green-soft); box-shadow: 0 0 22px rgba(88, 204, 2, 0.1); }
.nav-tab[data-screen="review"].is-active::before { background: var(--green); box-shadow: 0 0 12px rgba(88, 204, 2, 0.8); }
.nav-icon { display: grid; place-items: center; height: 23px; }
.nav-icon svg { width: 21px; height: 21px; stroke-width: 2.25; }

/* Lesson player */
.lesson-overlay, .exam-overlay { position: fixed; z-index: 100; inset: 0; display: flex; flex-direction: column; background: radial-gradient(ellipse at top, var(--page-glow) 0%, var(--page) 70%); animation: overlay-in 0.2s ease both; }
.lesson-topbar { display: flex; align-items: center; gap: 14px; width: min(960px, calc(100% - 30px)); margin: 0 auto; padding: 18px 0 11px; }
.icon-button { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 2px solid transparent; border-radius: 12px; color: var(--muted); background: transparent; cursor: pointer; transition: color var(--ease), background var(--ease), transform var(--ease); }
.icon-button:hover { color: var(--text); background: var(--surface); transform: translateY(-1px); }
.icon-button:active { transform: translateY(4px); box-shadow: none !important; }
.icon-button svg { width: 22px; height: 22px; }
.lesson-progress { flex: 1; height: 15px; overflow: hidden; border: 2px solid var(--border); border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2); }
.lesson-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-dark), #6be213); box-shadow: 0 0 14px rgba(88, 204, 2, 0.35); transition: width 0.4s ease; }
.lesson-microstats { display: flex; flex: none; align-items: center; gap: 7px; }
.lesson-microstats > span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 10px; }
.lesson-microstats svg { width: 14px; height: 14px; }
.lesson-microstats strong { color: currentColor; font-size: 12px; }
.lesson-combo { color: var(--cyan); }
.lesson-review-count { color: #8ee45b; }
.reference-trigger { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 2px solid var(--border); border-radius: 11px; color: var(--blue); background: var(--surface); box-shadow: 0 3px 0 var(--edge); font-size: 9px; font-weight: 900; cursor: pointer; transition: transform var(--ease), border-color var(--ease); }
.reference-trigger:hover { border-color: var(--blue); transform: translateY(-1px); }
.reference-trigger:active { transform: translateY(4px); box-shadow: none !important; }
.reference-trigger svg { width: 15px; height: 15px; }
.lesson-heading { display: flex; justify-content: space-between; gap: 15px; width: min(780px, calc(100% - 36px)); margin: 0 auto; padding: 5px 0 11px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; }
.lesson-heading p { margin: 0; }
.lesson-body { flex: 1; overflow-y: auto; padding: 12px 16px 34px; }
.lesson-content { width: min(720px, 100%); margin: 0 auto; animation: content-in 0.24s var(--ease) both; }
.lesson-content:has(> .question-text) { padding: 27px; border: 2px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: var(--card-shadow), var(--shadow); }
.lesson-content > h1 { margin-bottom: 22px; font-size: clamp(20px, 2.8vw, 26px); font-weight: 800; letter-spacing: -0.45px; line-height: 1.4; }
.theory-card { overflow: hidden; border: 2px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: var(--card-shadow), var(--shadow); }
.theory-card-top { position: relative; padding: 26px 27px 22px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, #173747, #172a33); }
.theory-card-top::after { content: ""; position: absolute; top: -55px; right: -35px; width: 140px; height: 140px; border: 20px solid rgba(56, 189, 248, 0.06); border-radius: 50%; }
.theory-kicker { position: relative; z-index: 1; display: inline-block; margin-bottom: 11px; padding: 5px 8px; border: 1px solid #2b617c; border-radius: 8px; color: var(--blue); background: rgba(11, 18, 22, 0.35); font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.theory-card-top h1 { position: relative; z-index: 1; margin: 0; color: var(--text); font-size: clamp(24px, 3.5vw, 32px); font-weight: 900; letter-spacing: -0.7px; }
.theory-text { padding: 24px 27px 9px; color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.75; }
.theory-example { margin: 14px 27px 27px; padding: 16px 18px; border: 1px solid #5c4f25; border-left: 5px solid var(--gold); border-radius: 0 13px 13px 0; color: #ffe28a; background: var(--gold-soft); font-size: 12px; font-weight: 700; line-height: 1.6; }
[data-theme="light"] .theory-example { color: #775e00; }
.theory-example strong { display: block; margin-bottom: 5px; color: var(--gold); font-size: 8px; letter-spacing: 1px; }
.theory-dots { display: flex; justify-content: center; gap: 6px; margin-top: 19px; }
.theory-dots span { width: 7px; height: 7px; border-radius: 999px; background: var(--border-bright); transition: width var(--ease), background var(--ease); }
.theory-dots span.is-active { width: 23px; background: var(--blue); }
.question-number { margin-bottom: 9px; color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; }
.question-text, .question-heading, .blitz-question { white-space: pre-line; }
.question-heading.is-long, .question-text.is-long, .blitz-question.is-long { font-size: 16px !important; font-weight: 600 !important; line-height: 1.75 !important; letter-spacing: 0 !important; text-align: left; }
.question-inline-options { margin: 0 0 18px; color: var(--text); font-size: 17px; font-weight: 700; line-height: 1.7; white-space: pre-line; }
.question-heading:has(+ .question-inline-options), .question-text:has(+ .question-inline-options), .blitz-question:has(+ .question-inline-options) { margin-bottom: 10px; }
.question-images { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 18px; }
.question-images img { display: block; width: auto; max-width: 100%; max-height: 420px; margin: 0 auto; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: #ffffff; object-fit: contain; }
.practice-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.practice-badge { padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: var(--surface-2); font-size: 8px; font-weight: 800; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-card { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 15px; border: 2px solid var(--border); border-radius: 16px; color: var(--text); background: var(--surface-2); box-shadow: 0 4px 0 var(--edge); font-size: 13px; font-weight: 800; text-align: left; cursor: pointer; transition: transform var(--ease), border-color var(--ease), background var(--ease), box-shadow var(--ease); }
.choice-card:hover:not(:disabled) { border-color: var(--border-bright); background: var(--surface-3); transform: translateY(-2px); }
.choice-card:active:not(:disabled) { transform: translateY(4px); box-shadow: none !important; }
.choice-card.is-selected { border-color: var(--blue); color: #bce9ff; background: var(--blue-soft); box-shadow: 0 4px 0 #0b5b80, 0 0 0 2px rgba(28, 176, 246, 0.08); }
.choice-card.is-correct { border-color: var(--green); color: #bcf59c; background: var(--green-soft); box-shadow: 0 4px 0 #2e7002; }
.choice-card.is-wrong { border-color: var(--red); color: #ffb1b1; background: var(--red-soft); box-shadow: 0 4px 0 #8f2727; animation: shake 0.35s ease; }
.choice-key { display: grid; flex: 0 0 29px; place-items: center; width: 29px; height: 29px; border: 2px solid var(--border-bright); border-radius: 8px; color: var(--muted); background: rgba(11, 18, 22, 0.16); box-shadow: 0 2px 0 var(--edge); font-size: 9px; font-weight: 900; }
.answer-label { display: block; margin-bottom: 10px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 0.9px; }
.answer-input { width: 100%; height: 74px; padding: 8px 17px; border: 2px solid var(--border); border-radius: 16px; outline: 0; color: var(--text); background: var(--surface-2); box-shadow: 0 4px 0 var(--edge); font-size: 25px; font-weight: 900; text-align: center; transition: border-color var(--ease), background var(--ease); }
.answer-input:focus { border-color: var(--blue); background: var(--blue-soft); }
.answer-input:disabled { opacity: 1; }
.input-note { margin-top: 11px; color: var(--muted); font-size: 9px; text-align: center; }
.hint-panel { margin-top: 16px; padding: 15px 17px; border: 2px solid #6b5720; border-radius: 15px; color: #ffe28a; background: var(--gold-soft); box-shadow: 0 3px 0 var(--edge); font-size: 12px; font-weight: 700; line-height: 1.55; animation: hint-in 0.2s ease both; }
[data-theme="light"] .hint-panel { color: #806600; }
.hint-panel strong { display: block; margin-bottom: 5px; }
.lesson-footer { flex: none; border-top: 1px solid var(--border); background: var(--glass); backdrop-filter: blur(16px); }
.lesson-actions { display: flex; align-items: center; gap: 10px; width: min(900px, calc(100% - 30px)); min-height: 86px; margin: 0 auto; }
.lesson-primary { min-width: 155px; margin-left: auto; }
.keyboard-tip { margin-left: auto; color: var(--faint); font-size: 9px; }
.keyboard-tip + .lesson-primary { margin-left: 0; }
.hint-button { margin-right: auto; }
.feedback-content { display: flex; align-items: flex-start; gap: 14px; width: min(900px, calc(100% - 30px)); margin: 0 auto; padding: 19px 0 0; animation: content-in 0.24s var(--ease) both; }
.feedback-content h2 { margin: 0 0 5px; font-size: 20px; font-weight: 900; }
.feedback-content p { margin: 3px 0; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.55; }
.feedback-badge { display: grid; flex: 0 0 46px; place-items: center; width: 46px; height: 46px; border: 2px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 3px 0 var(--edge); }
.feedback-dolphin { display: grid; place-items: center; width: 35px; height: 35px; animation: float 3.2s ease-in-out infinite; }
.feedback-dolphin svg { width: 34px; height: 34px; }
.feedback-cross { color: var(--red); font-size: 22px; font-weight: 900; }
.lesson-footer.is-correct { border-top-color: #39751d; color: #9aeb72; background: rgba(25, 53, 24, 0.93); }
.lesson-footer.is-wrong { border-top-color: #7c3131; color: #ff9d9d; background: rgba(59, 27, 29, 0.94); animation: shake 0.35s ease; }
.lesson-footer.is-correct .lesson-actions, .lesson-footer.is-wrong .lesson-actions { min-height: 70px; }
.lesson-footer.is-wrong .lesson-primary { --button-edge: #8f2727; border-color: #ff6a6a; background: var(--red); }

/* Lesson finish */
.finish-screen { position: relative; padding: 8px 0 22px; text-align: center; }
.finish-dolphin { position: relative; display: inline-grid; place-items: center; width: 172px; height: 172px; margin-bottom: 15px; border: 2px solid #245065; border-radius: 42px; background: radial-gradient(circle at 50% 28%, #17465b, #102731 72%); box-shadow: 0 5px 0 #091318, 0 20px 45px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06); transform: rotate(-2deg); }
.finish-dolphin::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(125, 211, 252, 0.14); border-radius: 32px; }
.finish-dolphin .dolphin-art { width: 122px; height: 122px; }
.finish-crown { display: inline-block; margin-bottom: 12px; font-size: 83px; animation: crown-in 0.55s cubic-bezier(0.2, 1.6, 0.5, 1) both; }
.finish-crown-badge { position: absolute; z-index: 2; top: -9px; right: -9px; display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid #7a641e; border-radius: 17px; background: #322c18; box-shadow: 0 4px 0 #171308; font-size: 28px; transform: rotate(10deg); animation: crown-in 0.55s cubic-bezier(0.2, 1.6, 0.5, 1) both; }
.finish-screen h1 { margin-bottom: 8px; color: #7ee52f; font-size: clamp(29px, 4vw, 40px); font-weight: 900; letter-spacing: -1px; }
.finish-subtitle { color: var(--muted); font-size: 12px; font-weight: 700; }
.finish-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 25px; }
.finish-stat { padding: 15px 8px; border: 2px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--card-shadow); }
.finish-stat span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; }
.finish-stat strong { font-size: 20px; font-weight: 900; }
.finish-stat.is-xp { border-color: #6b5720; color: var(--gold); background: var(--gold-soft); }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti span { position: absolute; top: -20px; width: 9px; height: 16px; border-radius: 3px; background: var(--gold); animation: confetti 2.8s linear infinite; }
.confetti span:nth-child(2n) { background: var(--blue); animation-delay: 0.3s; }
.confetti span:nth-child(3n) { background: var(--green); animation-delay: 0.65s; }
.confetti span:nth-child(4n) { background: var(--red); animation-delay: 0.95s; }

/* Exam */
.exam-overlay { z-index: 180; }
.exam-topbar { display: flex; align-items: center; gap: 10px; width: min(1180px, calc(100% - 24px)); margin: 0 auto; padding: 13px 0; border-bottom: 1px solid var(--border); }
.exam-heading { flex: 1; min-width: 0; }
.exam-heading .kim-kicker { color: var(--blue); }
.exam-heading h2 { overflow: hidden; margin: 0; font-size: 16px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.exam-timer { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 74px; height: 41px; padding: 7px 11px; border: 2px solid var(--border); border-radius: 12px; color: var(--gold); background: var(--surface); box-shadow: 0 3px 0 var(--edge); font-size: 16px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.exam-timer.is-danger { border-color: var(--red-dark); color: var(--red); animation: pulse-danger 1s ease infinite; }
.exam-finish { min-height: 40px; font-size: 10px; }
.exam-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); flex: 1; gap: 19px; width: min(1180px, calc(100% - 24px)); min-height: 0; margin: 0 auto; padding: 19px 0; }
.exam-nav { align-self: start; padding: 15px; border: 2px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--card-shadow); }
.exam-nav-head { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 11px; }
.exam-nav-head span { color: var(--muted); }
.exam-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-height: 55vh; overflow-y: auto; }
.exam-number { display: grid; place-items: center; height: 35px; border: 2px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface-2); box-shadow: 0 2px 0 var(--edge); font-size: 9px; font-weight: 900; cursor: pointer; transition: transform var(--ease), border-color var(--ease); }
.exam-number:hover { border-color: var(--border-bright); transform: translateY(-1px); }
.exam-number:active { transform: translateY(4px); box-shadow: none !important; }
.exam-number.is-answered { border-color: var(--green-dark); color: #9aeb72; background: var(--green-soft); }
.exam-number.is-current { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.13); }
.exam-number.is-wrong { border-color: var(--red-dark); color: var(--red); }
.exam-number.is-right { border-color: var(--green-dark); color: #9aeb72; background: var(--green-soft); }
.exam-nav-legend { display: flex; gap: 5px; margin: 13px 0 0; color: var(--muted); font-size: 7px; }
.exam-nav-legend span { color: var(--blue); }
.exam-body { min-height: 0; overflow-y: auto; padding: 0 5px 30px; }
.exam-question-card { width: min(740px, 100%); margin: 0 auto; padding: 26px; border: 2px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--card-shadow), var(--shadow); animation: content-in 0.2s ease both; }
.exam-topic-label { display: inline-block; margin-bottom: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--topic-color, var(--blue)); background: var(--surface-2); font-size: 8px; font-weight: 900; }
.exam-question-card h1 { margin-bottom: 21px; font-size: clamp(18px, 2.4vw, 23px); font-weight: 800; letter-spacing: -0.35px; line-height: 1.45; }
.exam-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(1180px, calc(100% - 24px)); margin: 0 auto; padding: 12px 0 17px; border-top: 1px solid var(--border); }
.exam-footer > span { color: var(--muted); font-size: 10px; }
.exam-result { width: min(790px, 100%); margin: 0 auto; }
.exam-result-summary { padding: 25px; border: 2px solid var(--green-dark); border-radius: 22px; background: linear-gradient(145deg, #1b321e, #172a20); box-shadow: var(--card-shadow); text-align: center; }
.exam-result-summary h1 { margin-bottom: 7px; color: #8ee45b; font-size: 28px; font-weight: 900; letter-spacing: -0.6px; }
.exam-result-summary p { margin: 0; color: var(--muted); font-size: 12px; }
.exam-result-metrics { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.exam-result-metrics span { padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 10px; font-weight: 900; }
.exam-review-table { width: 100%; margin-top: 16px; border-collapse: separate; border-spacing: 0 6px; font-size: 9px; }
.exam-review-table th { padding: 8px; color: var(--muted); font-size: 8px; text-align: left; }
.exam-review-row td { padding: 11px 9px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); vertical-align: top; }
.exam-review-row td:first-child { border-left: 1px solid var(--border); border-radius: 10px 0 0 10px; }
.exam-review-row td:last-child { border-right: 1px solid var(--border); border-radius: 0 10px 10px 0; }
.exam-review-row.is-correct td:first-child { border-left: 3px solid var(--green); }
.exam-review-row.is-wrong td:first-child { border-left: 3px solid var(--red); }
.exam-review-topic { display: block; margin-top: 4px; color: var(--muted); font-size: 7px; }
.exam-review-explanation { color: var(--muted); line-height: 1.5; }
.model-answer summary { color: var(--blue); font-weight: 800; cursor: pointer; }
.model-answer > div { max-height: 320px; margin-top: 8px; padding: 10px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); line-height: 1.65; white-space: pre-line; }

/* Blitz */
.blitz-overlay { position: fixed; z-index: 190; inset: 0; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 15%, #153743, var(--page) 65%); animation: overlay-in 0.2s ease both; }
.blitz-topbar { display: flex; align-items: center; gap: 12px; width: min(880px, calc(100% - 24px)); margin: 0 auto; padding: 16px 0; }
.blitz-heading { flex: 1; min-width: 0; }
.blitz-heading .kim-kicker { color: var(--green); }
.blitz-heading h2 { margin: 0; font-size: 17px; font-weight: 900; }
.blitz-score { display: flex; gap: 8px; }
.blitz-score span { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border: 2px solid var(--border); border-radius: 11px; background: var(--surface); box-shadow: 0 3px 0 var(--edge); font-size: 10px; }
.blitz-score span:first-child { color: var(--gold); }
.blitz-score span:last-child { color: #8ee45b; }
.blitz-score svg { width: 14px; height: 14px; }
.blitz-timer { min-width: 56px; color: #8ee45b; font-size: 21px; }
.blitz-body { display: flex; flex: 1; align-items: center; justify-content: center; padding: 15px; overflow-y: auto; }
.blitz-card { width: min(700px, 100%); padding: 28px; border: 2px solid var(--border); border-radius: 25px; background: var(--surface); box-shadow: var(--card-shadow), var(--shadow); animation: blitz-in 0.2s ease both; }
.blitz-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 17px; color: var(--muted); font-size: 8px; font-weight: 800; }
.blitz-topic { color: var(--blue); }
.blitz-question { margin-bottom: 22px; font-size: clamp(18px, 2.6vw, 23px); font-weight: 800; letter-spacing: -0.3px; line-height: 1.45; }
.blitz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.blitz-option { display: flex; align-items: center; gap: 10px; min-height: 57px; padding: 11px 14px; border: 2px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface-2); box-shadow: 0 4px 0 var(--edge); font-size: 12px; font-weight: 800; text-align: left; cursor: pointer; transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); }
.blitz-option:hover { border-color: var(--blue); transform: translateY(-2px); }
.blitz-option:active { transform: translateY(4px); box-shadow: none !important; }
.blitz-option.is-correct { border-color: var(--green); color: #bcf59c; background: var(--green-soft); box-shadow: 0 4px 0 #2e7002; }
.blitz-option.is-wrong { border-color: var(--red); color: #ffb1b1; background: var(--red-soft); box-shadow: 0 4px 0 #8f2727; animation: shake 0.35s ease; }
.blitz-option span:first-child { display: grid; flex: 0 0 25px; place-items: center; width: 25px; height: 25px; border: 1px solid var(--border-bright); border-radius: 7px; color: var(--muted); font-size: 8px; }
.blitz-result { width: min(590px, 100%); padding: 30px; border: 2px solid var(--green-dark); border-radius: 25px; background: var(--surface); box-shadow: var(--card-shadow), var(--shadow); text-align: center; animation: scale-up 0.25s var(--ease) both; }
.blitz-result .dolphin-art { width: 120px; height: 120px; padding: 17px; border: 2px solid #245065; border-radius: 31px; background: radial-gradient(circle at 50% 28%, #17465b, #102731 72%); box-shadow: 0 4px 0 #091318; }
.blitz-result h1 { margin: 15px 0 7px; color: #8ee45b; font-size: 30px; font-weight: 900; }
.blitz-result p { color: var(--muted); font-size: 11px; }
.blitz-result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 20px 0; }
.blitz-result-stats > div { padding: 13px 5px; border: 2px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.blitz-result-stats strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 21px; }
.blitz-result-stats span { color: var(--muted); font-size: 7px; }
.blitz-flash { animation: blitz-in 0.18s ease both; }

/* Reference drawer */
.drawer-backdrop { z-index: 210; }
.reference-drawer { position: fixed; z-index: 220; top: 0; right: 0; display: flex; flex-direction: column; width: min(470px, 94vw); height: 100dvh; border-left: 2px solid var(--border); background: var(--glass); box-shadow: -25px 0 70px rgba(0, 0, 0, 0.4); backdrop-filter: blur(16px); animation: drawer-in 0.25s var(--ease) both; }
.drawer-head { margin: 0; padding: 21px; border-bottom: 1px solid var(--border); }
.drawer-head .kim-kicker { color: var(--blue); }
.reference-content { flex: 1; overflow-y: auto; padding: 18px 21px 30px; }
.reference-section { margin-bottom: 17px; padding: 16px; border: 2px solid var(--border); border-radius: 16px; background: var(--surface-2); box-shadow: 0 3px 0 var(--edge); }
.reference-section h3 { margin: 0 0 11px; color: var(--blue); font-size: 13px; font-weight: 900; }
.reference-table { width: 100%; border-collapse: collapse; font-size: 9px; }
.reference-table th { padding: 8px 6px; border-bottom: 2px solid var(--border); color: var(--muted); font-size: 8px; text-align: left; }
.reference-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); font-weight: 700; vertical-align: top; }
.reference-table tr:last-child td { border-bottom: 0; }
.reference-loading { padding: 40px 10px; color: var(--muted); font-size: 11px; text-align: center; }

/* Dialog and toast */
.confirm-dialog { width: min(420px, calc(100% - 30px)); padding: 28px; border: 2px solid var(--border); border-radius: 24px; color: var(--text); background: var(--glass); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48); text-align: center; backdrop-filter: blur(16px); animation: scale-up 0.22s var(--ease) both; }
.dialog-icon { display: block; margin-bottom: 8px; }
.confirm-dialog h2 { margin-bottom: 8px; font-size: 24px; font-weight: 900; letter-spacing: -0.5px; }
.confirm-dialog p { color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.55; }
.dialog-actions { display: grid; gap: 9px; margin-top: 19px; }
.toast { position: fixed; z-index: 400; left: 50%; bottom: 108px; max-width: calc(100% - 30px); padding: 12px 18px; border: 2px solid var(--border-bright); border-radius: 13px; color: var(--text); background: var(--glass); box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35), 0 3px 0 var(--edge); backdrop-filter: blur(16px); font-size: 11px; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: opacity var(--ease), transform var(--ease); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Dynamic Lucide details */
.kim-chip-crown svg, .kim-chip-due svg { width: 13px; height: 13px; }
.hero-open-hint svg { width: 13px; height: 13px; }
.kim-modal-number svg { width: 18px; height: 18px; }
.kim-modal-due { display: inline-flex; align-items: center; }
.kim-modal-due svg { width: 11px; height: 11px; }
.practice-badge { display: inline-flex; align-items: center; gap: 5px; }
.practice-badge svg { width: 12px; height: 12px; }
.hint-panel strong { display: flex; align-items: center; gap: 6px; }
.hint-panel strong svg { width: 15px; height: 15px; }
.review-due-mark { display: inline-flex; align-items: center; gap: 3px; }
.review-due-mark svg { width: 10px; height: 10px; }
.exam-result-metrics span { display: inline-flex; align-items: center; gap: 5px; }
.exam-result-metrics svg { width: 14px; height: 14px; }
.exam-status svg { width: 17px; height: 17px; }
.exam-review-row.is-correct .exam-status { color: var(--green); }
.exam-review-row.is-wrong .exam-status { color: var(--red); }
.exam-number.is-part2 { border-color: #7c5cff; color: #b9a6ff; background: rgba(124, 92, 255, 0.12); }
.exam-review-row.is-part2 td:first-child { border-left: 3px solid #7c5cff; }
.exam-detailed-input { height: auto; min-height: 190px; padding: 14px 16px; font-size: 14px; font-weight: 700; line-height: 1.55; text-align: left; resize: vertical; }
.exam-criteria { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.exam-criteria strong { display: block; margin-bottom: 7px; color: #b9a6ff; font-size: 9px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; }
.exam-criteria ul { margin: 0; padding-left: 17px; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.65; }
.exam-primary-score { display: grid; gap: 3px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.exam-primary-score span { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; }
.exam-primary-score strong { color: var(--gold); font-size: 30px; font-weight: 900; letter-spacing: -0.8px; }
.exam-primary-score small { color: var(--muted); font-size: 9px; }
.exam-selfcheck { display: flex; flex-wrap: wrap; gap: 4px; }
.exam-selfcheck-button { padding: 4px 7px; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); background: var(--surface-2); font-size: 8px; font-weight: 900; cursor: pointer; }
.exam-selfcheck-button:hover { border-color: #7c5cff; color: #b9a6ff; }
.exam-selfcheck-button.is-selected { border-color: #7c5cff; color: #fff; background: #7c5cff; }
.exam-result-note { margin-top: 12px; color: var(--muted); font-size: 9px; text-align: center; }
.reference-section h3 { display: flex; align-items: center; gap: 7px; }
.reference-section h3 svg { width: 16px; height: 16px; }
.finish-crown-badge svg { width: 28px; height: 28px; color: var(--gold); }

/* Responsive */
@media (max-width: 900px) {
  .topbar-inner { gap: 11px; }
  .brand-tagline { display: none; }
  .top-stat { min-width: 43px; padding: 0 7px; }
  .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .topbar-inner { gap: 7px; width: calc(100% - 18px); min-height: 64px; }
  .brand-copy { display: none; }
  .brand-mark { flex-basis: 36px; width: 36px; height: 36px; border-radius: 12px; }
  .brand-mark svg { width: 29px; height: 29px; }
  .subject-picker-button { max-width: 174px; min-height: 37px; padding: 5px 8px; font-size: 10px; }
  .subject-picker-button > span:first-child { font-size: 16px; }
  .top-stats { gap: 4px; }
  .top-stat { min-width: 37px; height: 32px; padding: 0 5px; gap: 3px; }
  .top-stat svg { width: 13px; height: 13px; }
  .top-stat strong { font-size: 10px; }
  .top-stat-combo, .top-stat-review { display: none; }
  .profile-button { width: 34px; height: 34px; border-radius: 11px; }
  .app-main { padding: 26px 12px 126px; }
  .screen-header { gap: 12px; margin-bottom: 22px; }
  .screen-header h1 { font-size: 29px; letter-spacing: -1px; }
  .screen-subtitle { font-size: 11px; }
  .screen-meta { display: none; }
  .mascot-bubble { flex-basis: 78px; width: 78px; height: 72px; border-radius: 19px; }
  .mascot-bubble .dolphin-art { width: 55px; height: 55px; }
  .mascot-caption { display: none; }
  .dolphin-mascot-small { flex-basis: 70px; width: 70px; height: 66px; }
  .exam-launch { flex-direction: column; align-items: stretch; gap: 14px; padding: 15px; }
  .exam-launch .button { width: 100%; }
  .kim-navigator { padding: 12px; }
  .kim-nav-head { align-items: flex-start; }
  .kim-nav-head h2 { font-size: 14px; }
  .kim-nav-actions { gap: 5px; }
  .all-topics-button { min-height: 31px; padding: 4px 7px; }
  .all-topics-button > span:last-child { display: none; }
  .kim-chip { flex-basis: 46px; min-height: 50px; }
  .kim-active-name { font-size: 8px; }
  .kim-active-name strong { max-width: 44%; }
  .topic-hero { padding: 21px; }
  .hero-badge { display: none; }
  .topic-memory { flex-wrap: wrap; }
  .path-item { width: 220px; }
  .path-item:nth-child(1), .path-item:nth-child(5), .path-item:nth-child(9) { transform: translateX(-38px); }
  .path-item:nth-child(3), .path-item:nth-child(7) { transform: translateX(38px); }
  .path-item:nth-child(2), .path-item:nth-child(6), .path-item:nth-child(10) { transform: translateX(-15px); }
  .path-item:nth-child(4), .path-item:nth-child(8) { transform: translateX(15px); }
  .lesson-node { width: 72px; height: 72px; }
  .subject-grid { gap: 11px; }
  .subject-card { min-height: 200px; padding: 15px; }
  .subject-card h2 { font-size: 15px; }
  .profile-highlight { padding: 16px; }
  .highlight-number { font-size: 15px; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 12px; }
  .achievements-card, .stats-overview { grid-column: auto; }
  .metric-grid, .metric-grid-five { grid-template-columns: repeat(3, 1fr); }
  .theme-button #theme-label { display: none; }
  .review-mode-grid { grid-template-columns: 1fr; gap: 12px; }
  .review-mode-card { padding: 19px; }
  .review-mode-card p { min-height: auto; }
  .review-topics-list { grid-template-columns: 1fr; }
  .review-topics-section { padding: 16px; }
  .parser-layout { grid-template-columns: 1fr; }
  .parser-help { order: -1; }
  .bottom-nav { bottom: 11px; padding: 0 8px; }
  .bottom-nav-inner { gap: 2px; padding: 5px; border-radius: 19px; }
  .nav-tab { min-height: 51px; padding: 5px 3px; border-radius: 13px; font-size: 8px; }
  .nav-icon svg { width: 19px; height: 19px; }
  .nav-tab.is-active::before { top: -6px; }
  .lesson-topbar { flex-wrap: wrap; gap: 8px; padding-top: 11px; }
  .lesson-progress { order: 3; flex-basis: 100%; height: 12px; }
  .lesson-microstats { margin-left: auto; }
  .lesson-microstats > span { padding: 5px 7px; }
  .reference-trigger > span:last-child { display: none; }
  .lesson-heading { padding-top: 1px; font-size: 8px; }
  .lesson-content:has(> .question-text) { padding: 19px; border-radius: 20px; }
  .lesson-actions { flex-wrap: wrap; gap: 8px; width: calc(100% - 22px); padding: 10px 0; }
  .lesson-primary { min-width: 120px; }
  .keyboard-tip { display: none; }
  .choices { grid-template-columns: 1fr; }
  .theory-card-top { padding: 21px; }
  .theory-text { padding: 20px 20px 7px; font-size: 14px; }
  .theory-example { margin: 12px 20px 22px; }
  .feedback-content { width: calc(100% - 22px); }
  .finish-stats { gap: 7px; }
  .finish-stat { padding: 12px 4px; }
  .finish-stat strong { font-size: 15px; }
  .finish-dolphin { width: 140px; height: 140px; border-radius: 34px; }
  .finish-dolphin .dolphin-art { width: 98px; height: 98px; }
  .finish-crown-badge { width: 47px; height: 47px; font-size: 23px; }
  .toast { bottom: 91px; }
  .exam-topbar { flex-wrap: wrap; gap: 7px; padding: 9px 0; }
  .exam-heading { order: 1; flex-basis: calc(100% - 50px); }
  .exam-heading .kim-kicker { display: none; }
  .exam-heading h2 { font-size: 14px; }
  .exam-topbar .icon-button { order: 0; }
  .exam-timer { order: 2; margin-left: auto; font-size: 14px; }
  .exam-finish { order: 3; width: 100%; }
  .exam-topbar .reference-trigger { order: 2; }
  .exam-layout { display: flex; flex-direction: column; gap: 10px; padding-top: 9px; overflow-y: auto; }
  .exam-nav { width: 100%; padding: 10px; }
  .exam-grid { grid-template-columns: repeat(8, 1fr); max-height: 100px; }
  .exam-number { height: 30px; font-size: 8px; }
  .exam-nav-legend { display: none; }
  .exam-body { overflow: visible; padding-bottom: 10px; }
  .exam-footer { padding: 8px 0; }
  .exam-question-card { padding: 19px; }
  .exam-review-table { display: block; overflow-x: auto; }
  .blitz-topbar { flex-wrap: wrap; gap: 7px; padding: 10px 0; }
  .blitz-heading { order: 1; flex-basis: calc(100% - 50px); }
  .blitz-heading .kim-kicker { display: none; }
  .blitz-heading h2 { font-size: 14px; }
  .blitz-topbar .icon-button { order: 0; }
  .blitz-score { order: 2; }
  .blitz-timer { order: 3; }
  .blitz-topbar .reference-trigger { order: 4; }
  .blitz-card { padding: 20px; }
  .blitz-options { grid-template-columns: 1fr; }
  .reference-drawer { width: 100%; }
  .drawer-head { padding: 16px; }
  .reference-content { padding: 14px 15px 25px; }
  .subject-popover { padding: 16px; border-radius: 20px; }
  .subject-popover-head h2 { font-size: 19px; }
  .subject-choice-card { min-height: 118px; padding: 12px; }
  .subject-choice-name { font-size: 10px; }
  .kim-dialog { padding: 16px; border-radius: 20px; }
  .kim-dialog-head h2 { font-size: 19px; }
  .kim-modal-grid { grid-template-columns: 1fr; max-height: 440px; }
}

@media (max-width: 440px) {
  .subject-picker-button { max-width: 135px; }
  .top-stat { min-width: 32px; padding: 0 4px; }
  .top-stat strong { font-size: 9px; }
  .subject-grid, .subject-popover-grid { grid-template-columns: 1fr; }
  .subject-card { min-height: 190px; }
  .kim-nav-head { flex-wrap: wrap; }
  .kim-nav-actions { width: 100%; justify-content: space-between; }
  .all-topics-button > span:last-child { display: inline; }
  .kim-active-name > span:last-child { display: none; }
  .metric-grid, .metric-grid-five { grid-template-columns: repeat(2, 1fr); }
  .exam-launch-copy > div > span:last-child { font-size: 9px; }
  .exam-launch-icon { flex-basis: 42px; width: 42px; height: 42px; }
  .blitz-score span { padding: 6px; }
}

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

/* ==========================================================================
   ЕГЭJust · Modern 2026 refresh
   Aurora glass · electric indigo + cyan · soft depth
   ========================================================================== */
:root {
  --page: #070a12;
  --page-glow: #101a2e;
  --surface: rgba(15, 22, 36, 0.8);
  --surface-2: rgba(23, 32, 51, 0.82);
  --surface-3: rgba(33, 45, 68, 0.82);
  --glass: rgba(8, 13, 24, 0.76);
  --border: rgba(148, 163, 184, 0.14);
  --border-bright: rgba(148, 163, 184, 0.28);
  --edge: rgba(0, 0, 0, 0);
  --text: #f7f9ff;
  --muted: #94a3b8;
  --faint: #64748b;
  --green: #34d399;
  --green-dark: #0f9f6e;
  --green-soft: rgba(52, 211, 153, 0.12);
  --blue: #818cf8;
  --blue-dark: #4f46e5;
  --blue-soft: rgba(129, 140, 248, 0.14);
  --cyan: #22d3ee;
  --gold: #fbbf24;
  --gold-dark: #d97706;
  --gold-soft: rgba(251, 191, 36, 0.12);
  --red: #fb7185;
  --red-dark: #e11d48;
  --red-soft: rgba(251, 113, 133, 0.12);
  --purple: #c084fc;
  --purple-dark: #9333ea;
  --purple-soft: rgba(192, 132, 252, 0.13);
  --shadow: 0 32px 90px rgba(0, 0, 0, 0.46);
  --card-shadow: 0 18px 50px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --radius: 24px;
  --ease: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-theme="light"] {
  color-scheme: light;
  --page: #f4f6fc;
  --page-glow: #e8ecff;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-2: rgba(244, 247, 255, 0.92);
  --surface-3: #e8edf8;
  --glass: rgba(255, 255, 255, 0.8);
  --border: rgba(30, 41, 59, 0.1);
  --border-bright: rgba(30, 41, 59, 0.2);
  --edge: rgba(0, 0, 0, 0);
  --text: #101729;
  --muted: #5f6f89;
  --faint: #8b9ab2;
  --green-soft: rgba(16, 185, 129, 0.1);
  --blue-soft: rgba(99, 102, 241, 0.09);
  --gold-soft: rgba(217, 119, 6, 0.1);
  --red-soft: rgba(225, 29, 72, 0.08);
  --purple-soft: rgba(147, 51, 234, 0.09);
  --shadow: 0 30px 80px rgba(30, 41, 59, 0.14);
  --card-shadow: 0 16px 44px rgba(30, 41, 59, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1100px 650px at 8% -8%, rgba(129, 140, 248, 0.22), transparent 58%),
    radial-gradient(900px 600px at 92% -4%, rgba(34, 211, 238, 0.12), transparent 54%),
    radial-gradient(800px 520px at 50% 112%, rgba(192, 132, 252, 0.1), transparent 62%),
    var(--page);
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-weight: 600;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}
[data-theme="light"] body {
  background:
    radial-gradient(1000px 600px at 8% -8%, rgba(129, 140, 248, 0.18), transparent 58%),
    radial-gradient(850px 560px at 92% -4%, rgba(34, 211, 238, 0.12), transparent 54%),
    radial-gradient(750px 520px at 50% 112%, rgba(192, 132, 252, 0.1), transparent 62%),
    var(--page);
}
[data-theme="light"] body::before { background-image: linear-gradient(rgba(30, 41, 59, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 41, 59, 0.035) 1px, transparent 1px); }
h1, h2, h3, .brand-name, .screen-header h1 { font-family: "Manrope", "Segoe UI", sans-serif; }
.brand-name { font-family: "Unbounded", "Manrope", sans-serif; }

/* Floating glass header */
.topbar {
  top: 12px;
  width: min(1200px, calc(100% - 22px));
  margin: 12px auto 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--glass);
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.topbar-inner { width: 100%; min-height: 64px; padding: 0 14px; }
.brand { gap: 12px; }
.brand-mark {
  flex-basis: 43px;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: linear-gradient(145deg, #818cf8 0%, #6366f1 50%, #22d3ee 120%);
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.brand:hover .brand-mark { transform: translateY(-2px) rotate(-3deg); box-shadow: 0 16px 36px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.brand:active .brand-mark { transform: translateY(0); }
.brand-mark svg { width: 33px; height: 33px; filter: drop-shadow(0 2px 3px rgba(2, 6, 23, 0.25)); }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: -0.9px; }
.brand-name span {
  color: transparent;
  background: linear-gradient(120deg, #a5b4fc, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
}
.brand-tagline { margin-top: 6px; color: var(--faint); font-size: 7px; letter-spacing: 1.5px; }
.subject-picker-button {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}
.subject-picker-button:hover { border-color: var(--border-bright); background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); }
.subject-picker-button:active { transform: translateY(0); }
.top-stats { gap: 6px; }
.top-stat {
  min-width: 50px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.profile-button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: linear-gradient(145deg, #818cf8, #22d3ee);
  box-shadow: 0 10px 24px rgba(34, 211, 238, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.profile-button:hover { transform: translateY(-2px) scale(1.02); }
.profile-button:active { transform: translateY(0); }

/* Canvas and headings */
.app-main { padding-top: 30px; }
.screen-inner { width: min(1080px, 100%); }
.screen-header { margin-bottom: 30px; }
.screen-header h1 {
  max-width: 780px;
  margin-bottom: 11px;
  color: transparent;
  background: linear-gradient(180deg, #ffffff 12%, #c7d2fe 62%, #a5b4fc);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 800;
  letter-spacing: -2.2px;
  line-height: 1.02;
}
[data-theme="light"] .screen-header h1 { background: linear-gradient(180deg, #111827 10%, #4f46e5 78%, #0891b2); -webkit-background-clip: text; background-clip: text; }
.eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border: 1px solid rgba(129, 140, 248, 0.26);
  border-radius: 999px;
  color: #a5b4fc;
  background: rgba(129, 140, 248, 0.09);
  font-size: 9px;
  letter-spacing: 1.25px;
}
[data-theme="light"] .eyebrow { color: #4f46e5; background: rgba(99, 102, 241, 0.08); }
[data-theme="light"] .exam-launch-icon { color: #4f46e5; background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.22); }
[data-theme="light"] .exam-launch .card-kicker { color: #4f46e5; }
[data-theme="light"] .kim-chip { border-color: rgba(30, 41, 59, 0.12); color: #475569; background: #ffffff; }
[data-theme="light"] .kim-chip:hover { border-color: rgba(99, 102, 241, 0.4); background: #f8faff; }
[data-theme="light"] .kim-chip.is-started:not(.is-active) { border-color: rgba(99, 102, 241, 0.32); color: #4f46e5; background: #eef2ff; }
[data-theme="light"] .kim-chip.is-active { border-color: rgba(99, 102, 241, 0.62); color: #3730a3; background: linear-gradient(160deg, #eef2ff, #e0f2fe); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), 0 12px 24px rgba(99, 102, 241, 0.12); }
[data-theme="light"] .kim-chip.is-complete { border-color: rgba(217, 119, 6, 0.3); color: #b45309; background: #fffbeb; }
[data-theme="light"] .kim-dots i { background: rgba(30, 41, 59, 0.16); }
[data-theme="light"] .kim-chip.is-active .kim-dots i.is-filled,
[data-theme="light"] .kim-chip.is-started .kim-dots i.is-filled { background: #4f46e5; }
[data-theme="light"] .kim-chip.is-complete .kim-dots i.is-filled { background: #b45309; }
[data-theme="light"] .all-topics-button { color: #4f46e5; background: #fff; }
[data-theme="light"] .topic-progress-pill { background: #fff; }
[data-theme="light"] .start-label { color: #4338ca; background: #fff; }
[data-theme="light"] .start-label::after { background: #fff; }
.screen-subtitle { color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.screen-meta span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(10px);
}
.screen-meta svg { color: var(--cyan); }

/* Mascot */
.mascot-bubble {
  border: 1px solid rgba(129, 140, 248, 0.24);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 24%, rgba(34, 211, 238, 0.2), transparent 55%),
    linear-gradient(150deg, rgba(99, 102, 241, 0.2), rgba(8, 13, 24, 0.9));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.mascot-caption { border-color: rgba(129, 140, 248, 0.3); color: #c7d2fe; background: rgba(8, 13, 24, 0.55); }
.dolphin-mascot-small { border-radius: 24px; }

/* Shared surfaces */
.exam-launch,
.kim-navigator,
.profile-highlight,
.subject-card,
.dash-card,
.review-mode-card,
.review-topics-section,
.parser-tabs,
.form-card,
.parser-help,
.lesson-content:has(> .question-text),
.theory-card,
.exam-nav,
.exam-question-card,
.exam-result-summary,
.blitz-card,
.blitz-result,
.reference-section,
.confirm-dialog,
.kim-dialog,
.subject-popover {
  border: 1px solid var(--border);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012) 48%, rgba(255, 255, 255, 0.028)),
    var(--surface);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
}
[data-theme="light"] .exam-launch,
[data-theme="light"] .kim-navigator,
[data-theme="light"] .profile-highlight,
[data-theme="light"] .subject-card,
[data-theme="light"] .dash-card,
[data-theme="light"] .review-mode-card,
[data-theme="light"] .review-topics-section,
[data-theme="light"] .parser-tabs,
[data-theme="light"] .form-card,
[data-theme="light"] .parser-help,
[data-theme="light"] .lesson-content:has(> .question-text),
[data-theme="light"] .theory-card,
[data-theme="light"] .exam-nav,
[data-theme="light"] .exam-question-card,
[data-theme="light"] .exam-result-summary,
[data-theme="light"] .blitz-card,
[data-theme="light"] .blitz-result,
[data-theme="light"] .reference-section {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 255, 0.95)), var(--surface);
}

/* Primary buttons */
.button {
  min-height: 44px;
  padding: 10px 19px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-size: 11px;
  letter-spacing: 0.1px;
  transition: transform var(--ease), filter var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.24); }
.button:active:not(:disabled) { transform: translateY(0); }
.button-green { border-color: rgba(110, 231, 183, 0.42); background: linear-gradient(135deg, #34d399, #10b981); box-shadow: 0 12px 28px rgba(16, 185, 129, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.button-blue { border-color: rgba(165, 180, 252, 0.45); background: linear-gradient(135deg, #818cf8, #6366f1); box-shadow: 0 12px 28px rgba(99, 102, 241, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24); }
.button-yellow { border-color: rgba(253, 230, 138, 0.5); color: #2a1a00; background: linear-gradient(135deg, #fcd34d, #f59e0b); box-shadow: 0 12px 28px rgba(245, 158, 11, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.38); }
.button-purple { border-color: rgba(216, 180, 254, 0.42); background: linear-gradient(135deg, #c084fc, #a855f7); box-shadow: 0 12px 28px rgba(168, 85, 247, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.24); }
.button-white { border-color: var(--border); color: var(--text); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.button-white:hover:not(:disabled) { border-color: var(--border-bright); background: rgba(255, 255, 255, 0.09); }
[data-theme="light"] .button-white { background: #fff; border-color: var(--border); }

/* Exam promo */
.exam-launch {
  position: relative;
  overflow: hidden;
  border-color: rgba(129, 140, 248, 0.26);
  border-radius: 24px;
  background:
    radial-gradient(600px 220px at 8% 10%, rgba(129, 140, 248, 0.24), transparent 65%),
    radial-gradient(500px 240px at 88% 120%, rgba(34, 211, 238, 0.17), transparent 62%),
    linear-gradient(120deg, rgba(31, 41, 72, 0.94), rgba(12, 19, 34, 0.94));
}
[data-theme="light"] .exam-launch { background: radial-gradient(600px 220px at 8% 10%, rgba(129, 140, 248, 0.2), transparent 65%), radial-gradient(500px 240px at 88% 120%, rgba(34, 211, 238, 0.16), transparent 62%), linear-gradient(120deg, #eef2ff, #f8fbff); }
.exam-launch::after { background: radial-gradient(circle, rgba(129, 140, 248, 0.16), transparent 70%); }
.exam-launch-icon { width: 50px; height: 50px; border: 1px solid rgba(165, 180, 252, 0.28); border-radius: 16px; color: #c7d2fe; background: rgba(129, 140, 248, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.exam-launch strong { font-size: 17px; font-weight: 800; letter-spacing: -0.35px; }
.exam-launch .card-kicker { color: #a5b4fc; }

/* KIM navigator */
.kim-navigator { border-radius: 24px; padding: 18px; }
.kim-chip {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}
.kim-chip:hover { border-color: var(--border-bright); background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); }
.kim-chip:active { transform: translateY(0); }
.kim-chip.is-active { border-color: rgba(129, 140, 248, 0.6); color: #e0e7ff; background: linear-gradient(160deg, rgba(129, 140, 248, 0.28), rgba(34, 211, 238, 0.12)); box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.12), 0 12px 26px rgba(99, 102, 241, 0.18); transform: translateY(-1px); }
.kim-chip.is-started:not(.is-active) { border-color: rgba(129, 140, 248, 0.3); color: #a5b4fc; background: rgba(129, 140, 248, 0.09); }
.kim-chip.is-complete { border-color: rgba(251, 191, 36, 0.34); color: var(--gold); background: var(--gold-soft); }
.kim-chip.is-complete.is-active { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12), 0 12px 26px rgba(251, 191, 36, 0.12); }
.kim-chip.is-due { border-color: rgba(251, 191, 36, 0.3); }
.all-topics-button { border: 1px solid var(--border); border-radius: 12px; color: #a5b4fc; background: rgba(255, 255, 255, 0.04); box-shadow: none; }
.all-topics-button:hover { border-color: rgba(129, 140, 248, 0.55); background: rgba(129, 140, 248, 0.1); transform: translateY(-1px); }
.topic-progress-pill { border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, 0.035); }
.kim-active-name { border-top-color: var(--border); }

/* Learning map */
.topic-hero {
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 26px;
  background:
    radial-gradient(500px 220px at 88% -10%, rgba(255, 255, 255, 0.27), transparent 60%),
    linear-gradient(135deg, var(--topic), color-mix(in srgb, var(--topic) 58%, #090f1d));
  box-shadow: 0 26px 60px color-mix(in srgb, var(--topic) 18%, rgba(0, 0, 0, 0.35)), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.topic-hero-clickable:hover { transform: translateY(-2px); filter: brightness(1.04); }
.topic-hero-clickable:active { transform: translateY(0); }
.lesson-node {
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.lesson-node:hover:not(:disabled) { transform: translateY(-3px) scale(1.03); }
.lesson-node:active:not(:disabled) { transform: translateY(0); }
.lesson-node.is-unlocked { background: linear-gradient(145deg, color-mix(in srgb, var(--topic) 68%, #fff 32%), var(--topic)); }
.lesson-node.is-completed { background: linear-gradient(145deg, #6ee7b7, #10b981); }
.lesson-node.is-boss.is-completed { background: linear-gradient(145deg, #fde68a, #f59e0b); }
.lesson-node.is-locked { border-color: rgba(148, 163, 184, 0.1); background: rgba(148, 163, 184, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); }
.lesson-node.is-unlocked::before { opacity: 0.35; }
.start-label { border: 1px solid rgba(129, 140, 248, 0.55); border-radius: 999px; color: #c7d2fe; background: rgba(8, 13, 24, 0.75); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); }
.start-label::after { border-color: rgba(129, 140, 248, 0.55); background: rgba(8, 13, 24, 0.75); }
.node-check { border-color: var(--page); background: linear-gradient(145deg, #6ee7b7, #10b981); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.path-item:not(:last-child)::after { border-left-color: rgba(148, 163, 184, 0.16); }

/* Subject library */
.profile-highlight { border-radius: 22px; }
.highlight-icon { border: 1px solid rgba(251, 191, 36, 0.28); border-radius: 14px; background: var(--gold-soft); box-shadow: none; }
.subject-grid { gap: 14px; }
.subject-card {
  min-height: 210px;
  border-radius: 22px;
  background:
    radial-gradient(180px 150px at 100% 0%, color-mix(in srgb, var(--card-color, #818cf8) 16%, transparent), transparent 70%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    var(--surface);
}
.subject-card:hover { border-color: color-mix(in srgb, var(--card-color, #818cf8) 50%, var(--border)); transform: translateY(-3px); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28), 0 0 0 1px color-mix(in srgb, var(--card-color, #818cf8) 18%, transparent); }
.subject-card:active { transform: translateY(0); }
.subject-card.is-current { border-color: color-mix(in srgb, var(--card-color, #818cf8) 65%, var(--border)); }
.subject-card-icon { border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, 0.05); box-shadow: none; }
.current-chip { border: 1px solid color-mix(in srgb, var(--card-color) 40%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--card-color) 12%, transparent); }
.progress-track { height: 8px; background: rgba(148, 163, 184, 0.14); }
.progress-track span { background: linear-gradient(90deg, color-mix(in srgb, var(--card-color) 70%, #fff 30%), var(--card-color)); box-shadow: 0 0 14px color-mix(in srgb, var(--card-color) 45%, transparent); }

/* Profile dashboard */
.theme-button { border: 1px solid var(--border); border-radius: 13px; background: rgba(255, 255, 255, 0.04); box-shadow: none; }
.theme-button:hover { border-color: var(--border-bright); background: rgba(255, 255, 255, 0.07); }
.dash-card { border-radius: 22px; }
.achievements-card { grid-column: span 1; }
.progress-card { grid-template-columns: auto 1fr; }
.progress-card .card-note { text-align: right; }
.dash-card::before { opacity: 0.7; }
.review-quick-card, .stats-overview, .daily-card, .progress-card { border-color: var(--border); }
.card-heading h2 { font-weight: 800; letter-spacing: -0.5px; }
.card-emoji { border: 1px solid var(--border); border-radius: 13px; background: rgba(255, 255, 255, 0.045); }
.big-progress { border: 1px solid var(--border); background: rgba(148, 163, 184, 0.13); }
.big-progress span { background: linear-gradient(90deg, #f59e0b, #fcd34d); box-shadow: 0 0 16px rgba(251, 191, 36, 0.24); }
.review-quick-metrics > div, .metric-grid > div { border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.metric-grid > div:hover { border-color: var(--border-bright); transform: translateY(-1px); }
.crown-count { border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 13px; background: var(--gold-soft); }
.crown-chip { border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, 0.04); }
.donut { box-shadow: 0 0 26px rgba(52, 211, 153, 0.12); }
.donut::before { background: var(--surface); }
[data-theme="light"] .donut::before { background: #fff; }

/* Review */
.review-mode-card { border-radius: 22px; }
.review-mode-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--mode-color) 45%, var(--border)); }
.review-mode-card::after { opacity: 0.12; filter: blur(18px); }
.review-mode-spaced, .review-mode-mistakes, .review-mode-blitz, .review-mode-exam { border-color: var(--border); }
.review-mode-icon { border: 1px solid color-mix(in srgb, var(--mode-color) 32%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--mode-color) 11%, transparent); box-shadow: none; }
.review-topic-item { border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.review-topic-item:hover { border-color: var(--border-bright); transform: translateY(-1px); }
.review-topic-item.is-due { border-color: rgba(251, 191, 36, 0.3); }
.review-topic-number { border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.045); }
.review-strength i { height: 4px; background: rgba(148, 163, 184, 0.15); }
.review-strength i.is-on { background: linear-gradient(90deg, #34d399, #6ee7b7); }
.review-topic-item.is-due .review-strength i.is-on { background: linear-gradient(90deg, #f59e0b, #fcd34d); }

/* Parser */
.parser-tabs { border-radius: 16px; }
.parser-tab { border-radius: 11px; }
.parser-tab.is-active { border: 1px solid var(--border); color: var(--text); background: rgba(255, 255, 255, 0.07); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); }
.form-card { border-radius: 22px; }
.form-heading > span { border: 1px solid rgba(129, 140, 248, 0.26); border-radius: 13px; color: #a5b4fc; background: rgba(129, 140, 248, 0.1); }
.form-card input, .form-card select, .form-card textarea {
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(6, 10, 20, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
[data-theme="light"] .form-card input, [data-theme="light"] .form-card select, [data-theme="light"] .form-card textarea { background: #fff; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { border-color: rgba(129, 140, 248, 0.65); background: rgba(129, 140, 248, 0.06); box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.1); }
.parser-result { border: 1px solid rgba(52, 211, 153, 0.28); border-radius: 14px; box-shadow: none; }
.parser-result.is-error { border-color: rgba(251, 113, 133, 0.3); }
.parser-batch-row { border: 1px solid var(--border); border-radius: 11px; background: rgba(255, 255, 255, 0.035); }
.parser-help { border-color: rgba(251, 191, 36, 0.2); border-radius: 22px; background: radial-gradient(220px 160px at 100% 0%, rgba(251, 191, 36, 0.12), transparent 65%), linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), var(--surface); }
[data-theme="light"] .parser-help { background: radial-gradient(220px 160px at 100% 0%, rgba(251, 191, 36, 0.16), transparent 65%), #fffdf5; }
.help-emoji { border: 1px solid rgba(251, 191, 36, 0.28); border-radius: 13px; background: var(--gold-soft); }
.parser-help > p { border-top-color: rgba(251, 191, 36, 0.18); }
.parser-help li > span { background: rgba(251, 191, 36, 0.1); }

/* Floating dock */
.bottom-nav { bottom: 16px; }
.bottom-nav-inner {
  width: min(560px, 100%);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 23px;
  background: var(--glass);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}
.nav-tab { min-height: 54px; border-radius: 16px; font-size: 9px; }
.nav-tab:hover { background: rgba(255, 255, 255, 0.055); transform: translateY(-1px); }
.nav-tab:active { transform: translateY(0); }
.nav-tab.is-active { border: 1px solid rgba(129, 140, 248, 0.3); color: #c7d2fe; background: linear-gradient(150deg, rgba(129, 140, 248, 0.24), rgba(34, 211, 238, 0.1)); box-shadow: 0 10px 26px rgba(99, 102, 241, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.nav-tab.is-active::before { display: none; }
.nav-tab[data-screen="review"].is-active { border-color: rgba(52, 211, 153, 0.28); color: #a7f3d0; background: linear-gradient(150deg, rgba(52, 211, 153, 0.18), rgba(34, 211, 238, 0.08)); box-shadow: 0 10px 26px rgba(16, 185, 129, 0.14); }
[data-theme="light"] .nav-tab.is-active { color: #4338ca; }

/* Lesson and exam overlays */
.lesson-overlay, .exam-overlay, .blitz-overlay {
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(129, 140, 248, 0.18), transparent 58%),
    radial-gradient(800px 520px at 95% 0%, rgba(34, 211, 238, 0.1), transparent 54%),
    var(--page);
}
.lesson-topbar, .exam-topbar, .blitz-topbar { border-bottom-color: var(--border); }
.icon-button, .reference-trigger { border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: none; }
.icon-button:hover, .reference-trigger:hover { border-color: var(--border-bright); background: rgba(255, 255, 255, 0.07); transform: translateY(-1px); }
.lesson-progress { height: 12px; border: 1px solid var(--border); background: rgba(148, 163, 184, 0.13); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16); }
.lesson-progress span { background: linear-gradient(90deg, #10b981, #6ee7b7); box-shadow: 0 0 16px rgba(52, 211, 153, 0.36); }
.lesson-microstats > span { border: 1px solid var(--border); border-radius: 11px; background: rgba(255, 255, 255, 0.04); }
.lesson-content:has(> .question-text) { border-radius: 26px; }
.theory-card { border-radius: 26px; }
.theory-card-top { border-bottom: 1px solid var(--border); background: radial-gradient(420px 200px at 92% 0%, rgba(34, 211, 238, 0.16), transparent 65%), linear-gradient(145deg, rgba(129, 140, 248, 0.14), rgba(8, 13, 24, 0.6)); }
[data-theme="light"] .theory-card-top { background: radial-gradient(420px 200px at 92% 0%, rgba(34, 211, 238, 0.18), transparent 65%), linear-gradient(145deg, #eef2ff, #f8fbff); }
.theory-kicker { border: 1px solid rgba(129, 140, 248, 0.3); border-radius: 999px; color: #a5b4fc; background: rgba(129, 140, 248, 0.1); }
.theory-example { border: 1px solid rgba(251, 191, 36, 0.22); border-left: 4px solid var(--gold); border-radius: 14px; }
.choices { gap: 10px; }
.choice-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  font-size: 12.5px;
}
.choice-card:hover:not(:disabled) { border-color: rgba(129, 140, 248, 0.55); background: rgba(129, 140, 248, 0.08); transform: translateY(-1px); }
.choice-card:active:not(:disabled) { transform: translateY(0); }
.choice-card.is-selected { border-color: rgba(129, 140, 248, 0.75); color: #e0e7ff; background: rgba(129, 140, 248, 0.13); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.16); }
.choice-card.is-correct { border-color: rgba(52, 211, 153, 0.65); color: #d1fae5; background: rgba(52, 211, 153, 0.12); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.14); }
.choice-card.is-wrong { border-color: rgba(251, 113, 133, 0.65); color: #ffe4e6; background: rgba(251, 113, 133, 0.12); box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.14); }
[data-theme="light"] .choice-card.is-selected { color: #3730a3; }
[data-theme="light"] .choice-card.is-correct { color: #065f46; }
[data-theme="light"] .choice-card.is-wrong { color: #9f1239; }
.choice-key { border: 1px solid var(--border-bright); border-radius: 9px; background: rgba(6, 10, 20, 0.18); box-shadow: none; }
.answer-input { border: 1px solid var(--border); border-radius: 16px; background: rgba(6, 10, 20, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); }
[data-theme="light"] .answer-input { background: #fff; }
.answer-input:focus { border-color: rgba(129, 140, 248, 0.7); background: rgba(129, 140, 248, 0.06); box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.1); }
.hint-panel { border: 1px solid rgba(251, 191, 36, 0.22); border-radius: 15px; box-shadow: none; }
.lesson-footer { border-top-color: var(--border); }
.feedback-badge { border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, 0.05); box-shadow: none; }
.lesson-footer.is-correct { border-top-color: rgba(52, 211, 153, 0.3); background: rgba(8, 35, 27, 0.94); }
.lesson-footer.is-wrong { border-top-color: rgba(251, 113, 133, 0.3); background: rgba(42, 14, 24, 0.94); }

/* Finish screen */
.finish-dolphin { border: 1px solid rgba(129, 140, 248, 0.24); border-radius: 42px; background: radial-gradient(circle at 50% 24%, rgba(34, 211, 238, 0.18), transparent 55%), linear-gradient(150deg, rgba(99, 102, 241, 0.2), rgba(8, 13, 24, 0.92)); box-shadow: 0 26px 65px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.finish-screen h1 { color: #6ee7b7; }
.finish-stat { border: 1px solid var(--border); border-radius: 16px; background: rgba(255, 255, 255, 0.04); box-shadow: none; }
.finish-stat.is-xp { border-color: rgba(251, 191, 36, 0.3); }

/* Exam */
.exam-timer { border: 1px solid var(--border); border-radius: 13px; background: rgba(255, 255, 255, 0.04); box-shadow: none; }
.exam-nav { border-radius: 20px; }
.exam-number { border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, 0.035); box-shadow: none; }
.exam-number:hover { border-color: var(--border-bright); transform: translateY(-1px); }
.exam-number:active { transform: translateY(0); }
.exam-number.is-answered { border-color: rgba(52, 211, 153, 0.4); color: #a7f3d0; background: var(--green-soft); }
.exam-number.is-current { border-color: rgba(129, 140, 248, 0.7); color: #c7d2fe; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.12); }
.exam-number.is-wrong { border-color: rgba(251, 113, 133, 0.45); color: #fecdd3; }
.exam-number.is-right { border-color: rgba(52, 211, 153, 0.45); color: #a7f3d0; background: var(--green-soft); }
.exam-number.is-part2 { border-color: rgba(192, 132, 252, 0.45); color: #e9d5ff; background: rgba(192, 132, 252, 0.1); }
.exam-question-card { border-radius: 24px; }
.exam-topic-label { border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, 0.04); }
.exam-criteria { border: 1px solid rgba(192, 132, 252, 0.22); border-radius: 15px; background: rgba(192, 132, 252, 0.07); }
.exam-criteria strong { color: #d8b4fe; }
.exam-primary-score { border-top-color: var(--border); }
.exam-result-summary { border: 1px solid rgba(52, 211, 153, 0.28); border-radius: 24px; background: radial-gradient(420px 220px at 50% 0%, rgba(52, 211, 153, 0.16), transparent 65%), linear-gradient(150deg, rgba(10, 40, 31, 0.9), rgba(8, 18, 22, 0.92)); }
[data-theme="light"] .exam-result-summary { background: radial-gradient(420px 220px at 50% 0%, rgba(52, 211, 153, 0.2), transparent 65%), #f3fff9; }
.exam-result-summary h1 { color: #6ee7b7; font-weight: 800; }
.exam-result-metrics span { border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, 0.04); }
.exam-review-row td { border-color: var(--border); background: rgba(255, 255, 255, 0.035); }
.exam-review-row td:first-child { border-left-color: var(--border); }
.exam-review-row td:last-child { border-right-color: var(--border); }
.exam-review-row.is-correct td:first-child { border-left-color: var(--green); }
.exam-review-row.is-wrong td:first-child { border-left-color: var(--red); }
.exam-review-row.is-part2 td:first-child { border-left-color: var(--purple); }
.exam-selfcheck-button { border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.exam-selfcheck-button:hover { border-color: rgba(192, 132, 252, 0.55); color: #e9d5ff; }
.exam-selfcheck-button.is-selected { border-color: transparent; color: #160b24; background: linear-gradient(135deg, #d8b4fe, #a855f7); }

/* Blitz, drawer, dialogs, toast */
.blitz-card, .blitz-result { border-radius: 26px; }
.blitz-option { border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: none; }
.blitz-option:hover { border-color: rgba(129, 140, 248, 0.55); background: rgba(129, 140, 248, 0.08); transform: translateY(-1px); }
.blitz-option:active { transform: translateY(0); }
.blitz-option.is-correct { border-color: rgba(52, 211, 153, 0.6); background: var(--green-soft); box-shadow: none; }
.blitz-option.is-wrong { border-color: rgba(251, 113, 133, 0.6); background: var(--red-soft); box-shadow: none; }
.blitz-score span { border: 1px solid var(--border); border-radius: 11px; background: rgba(255, 255, 255, 0.04); box-shadow: none; }
.blitz-result .dolphin-art { border: 1px solid rgba(129, 140, 248, 0.24); background: radial-gradient(circle at 50% 24%, rgba(34, 211, 238, 0.18), transparent 55%), rgba(8, 13, 24, 0.92); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28); }
.blitz-result-stats > div { border: 1px solid var(--border); border-radius: 13px; background: rgba(255, 255, 255, 0.04); }
.reference-drawer { border-left: 1px solid var(--border); background: var(--glass); backdrop-filter: blur(26px) saturate(140%); }
.reference-section { border-radius: 16px; background: rgba(255, 255, 255, 0.035); box-shadow: none; }
.reference-table th, .reference-table td { border-color: var(--border); }
.confirm-dialog, .kim-dialog, .subject-popover { border-radius: 24px; }
.kim-search-wrap { border: 1px solid var(--border); border-radius: 13px; background: rgba(255, 255, 255, 0.04); }
.kim-search-wrap:focus-within { border-color: rgba(129, 140, 248, 0.65); box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.1); }
.kim-modal-card, .subject-choice-card { border: 1px solid var(--border); border-radius: 16px; background: rgba(255, 255, 255, 0.035); box-shadow: none; }
.kim-modal-card:hover, .subject-choice-card:hover { border-color: rgba(129, 140, 248, 0.55); background: rgba(129, 140, 248, 0.07); transform: translateY(-1px); }
.kim-modal-card:active, .subject-choice-card:active { transform: translateY(0); }
.kim-modal-card.is-active, .subject-choice-card.is-active { border-color: rgba(129, 140, 248, 0.65); background: rgba(129, 140, 248, 0.1); box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.08); }
.kim-modal-number, .subject-choice-icon { border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.popover-close { border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: none; }
.popover-close:hover { border-color: var(--border-bright); background: rgba(255, 255, 255, 0.07); }
.toast { border: 1px solid var(--border); border-radius: 14px; background: var(--glass); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38); }

/* Scrollbars and selection */
::selection { color: #fff; background: rgba(129, 140, 248, 0.42); }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.24); background-clip: padding-box; }

/* Exam history */
.exam-history-section {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--surface);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
}
.exam-history-count { flex: none; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, 0.04); font-size: 9px; font-weight: 900; }
.exam-history-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 14px; }
.exam-history-metric { padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.exam-history-metric span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; }
.exam-history-metric strong { display: block; color: var(--text); font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.exam-history-metric small { display: block; margin-top: 2px; color: var(--faint); font-size: 8px; }
.exam-history-metric.is-best strong { color: var(--gold); }
.exam-history-metric.is-last strong { color: #a5b4fc; }
.exam-history-list { display: grid; gap: 8px; }
.exam-history-item { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 15px; color: var(--text); background: rgba(255, 255, 255, 0.03); text-align: left; cursor: pointer; transition: border-color var(--ease), background var(--ease), transform var(--ease); }
.exam-history-item:hover { border-color: rgba(129, 140, 248, 0.45); background: rgba(129, 140, 248, 0.07); transform: translateY(-1px); }
.exam-history-item:active { transform: translateY(0); }
.exam-history-subject { display: flex; align-items: center; gap: 10px; min-width: 0; }
.exam-history-icon { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 11px; color: #c7d2fe; background: rgba(129, 140, 248, 0.1); }
.exam-history-icon svg { width: 18px; height: 18px; }
.exam-history-copy { min-width: 0; }
.exam-history-copy strong { display: block; overflow: hidden; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.exam-history-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.exam-history-score { min-width: 106px; text-align: right; }
.exam-history-score strong { display: block; color: var(--gold); font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.exam-history-score span { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; }
.exam-history-bar { width: 74px; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, 0.14); }
.exam-history-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #818cf8, #22d3ee); }
.exam-history-empty { margin: 0; padding: 20px; border: 1px dashed var(--border-bright); border-radius: 14px; color: var(--muted); font-size: 10px; line-height: 1.55; text-align: center; }
.attempt-dialog { width: min(900px, calc(100% - 26px)); max-height: min(860px, calc(100dvh - 30px)); }
.attempt-dialog-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.attempt-dialog-meta span { padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, 0.04); font-size: 8px; font-weight: 800; }
.attempt-dialog-meta span strong { color: var(--text); }
.attempt-dialog-body { max-height: min(610px, calc(100dvh - 190px)); overflow: auto; padding-right: 2px; }
.attempt-dialog .exam-review-table { margin-top: 0; }
.attempt-dialog .exam-review-row td { font-size: 8px; }
.attempt-dialog-note { margin: 12px 0 0; color: var(--muted); font-size: 9px; text-align: center; }
.attempt-dialog-empty { padding: 30px 12px; color: var(--muted); font-size: 11px; text-align: center; }

/* Auth gate */
.subject-backdrop { z-index: 190; }
.subject-popover { z-index: 200; }
.auth-pending .topbar,
.auth-pending .app-main,
.auth-pending .bottom-nav { visibility: hidden; }
body.auth-open { overflow: hidden; }
.auth-gate {
  position: fixed;
  z-index: 500;
  inset: 0;
  overflow-y: auto;
  padding: 28px 18px;
  background:
    radial-gradient(1000px 620px at 8% -8%, rgba(129, 140, 248, 0.28), transparent 56%),
    radial-gradient(900px 600px at 95% 5%, rgba(34, 211, 238, 0.16), transparent 54%),
    radial-gradient(700px 520px at 50% 110%, rgba(192, 132, 252, 0.12), transparent 62%),
    var(--page);
}
.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.92fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  width: min(1120px, 100%);
  min-height: calc(100dvh - 56px);
  margin: 0 auto;
}
.auth-aside { max-width: 510px; }
.auth-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 38px; color: var(--text); text-decoration: none; }
.auth-brand .brand-mark { flex-basis: 46px; width: 46px; height: 46px; }
.auth-aside h1 { margin-bottom: 16px; font-size: clamp(38px, 5.2vw, 64px); font-weight: 800; letter-spacing: -2.8px; line-height: 0.98; }
.auth-aside h1 span { color: transparent; background: linear-gradient(120deg, #a5b4fc, #22d3ee); -webkit-background-clip: text; background-clip: text; }
.auth-lead { max-width: 450px; margin-bottom: 26px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.auth-benefits { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.auth-benefits li { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 15px; background: rgba(255, 255, 255, 0.035); }
.auth-benefits li > span { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(129, 140, 248, 0.24); border-radius: 11px; color: #a5b4fc; background: rgba(129, 140, 248, 0.1); }
.auth-benefits svg { width: 18px; height: 18px; }
.auth-benefits strong { display: block; font-size: 11px; font-weight: 800; }
.auth-benefits small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.auth-card {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.015)),
    var(--surface);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}
[data-theme="light"] .auth-card { background: linear-gradient(160deg, #fff, #f7f9ff); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 20px; padding: 5px; border: 1px solid var(--border); border-radius: 14px; background: rgba(4, 8, 16, 0.32); }
[data-theme="light"] .auth-tabs { background: rgba(30, 41, 59, 0.05); }
.auth-tab { min-height: 38px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 900; cursor: pointer; transition: color var(--ease), background var(--ease), border-color var(--ease); }
.auth-tab.is-active { border-color: var(--border); color: var(--text); background: rgba(255, 255, 255, 0.07); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14); }
[data-theme="light"] .auth-tab.is-active { background: #fff; }
.auth-card-head { margin-bottom: 16px; }
.auth-card-head h2 { margin-bottom: 5px; font-size: 24px; font-weight: 800; letter-spacing: -0.8px; }
.auth-card-head p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.auth-form label { display: block; margin: 12px 0 6px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 0.4px; }
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] { width: 100%; height: 45px; padding: 0 13px; border: 1px solid var(--border); border-radius: 13px; outline: 0; color: var(--text); background: rgba(6, 10, 20, 0.45); font-size: 12px; font-weight: 700; transition: border-color var(--ease), box-shadow var(--ease); }
[data-theme="light"] .auth-form input[type="text"],
[data-theme="light"] .auth-form input[type="email"],
[data-theme="light"] .auth-form input[type="password"] { background: #fff; }
.auth-form input:focus { border-color: rgba(129, 140, 248, 0.7); box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.1); }
.auth-form input::placeholder { color: var(--faint); }
.password-field { position: relative; }
.password-field input { padding-right: 46px !important; }
.password-toggle { position: absolute; top: 50%; right: 7px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; transform: translateY(-50%); transition: color var(--ease), background var(--ease), border-color var(--ease); }
.password-toggle:hover { border-color: var(--border); color: var(--text); background: rgba(255, 255, 255, 0.07); }
.password-toggle:active { transform: translateY(-50%) scale(0.96); }
.password-toggle svg { width: 17px; height: 17px; }
.auth-subjects { margin-top: 15px; }
.auth-subjects-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.auth-subjects-head > div:first-child > span { display: block; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 0.4px; }
.auth-subjects-head small { display: block; margin-top: 2px; color: var(--faint); font-size: 7px; }
.auth-subject-actions { display: flex; gap: 5px; }
.auth-subject-actions button { padding: 5px 7px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: rgba(255, 255, 255, 0.03); font-size: 7px; font-weight: 900; cursor: pointer; }
.auth-subject-actions button:hover { border-color: rgba(129, 140, 248, 0.5); color: #c7d2fe; }
.auth-subject-grid, .profile-subject-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.auth-subject-option { position: relative; display: block; cursor: pointer; }
.auth-subject-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.auth-subject-option-body { display: flex; align-items: center; gap: 8px; min-height: 43px; padding: 8px 9px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255, 255, 255, 0.03); transition: border-color var(--ease), background var(--ease), transform var(--ease); }
.auth-subject-option:hover .auth-subject-option-body { border-color: rgba(129, 140, 248, 0.42); background: rgba(129, 140, 248, 0.06); transform: translateY(-1px); }
.auth-subject-option input:focus-visible + .auth-subject-option-body { outline: 3px solid var(--blue); outline-offset: 2px; }
.auth-subject-option input:checked + .auth-subject-option-body { border-color: rgba(129, 140, 248, 0.66); background: rgba(129, 140, 248, 0.12); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.12); }
.auth-subject-icon { display: grid; flex: 0 0 27px; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); font-size: 15px; }
.auth-subject-option-body strong { flex: 1; min-width: 0; overflow: hidden; font-size: 8px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.auth-subject-option-body svg { width: 13px; height: 13px; color: var(--faint); opacity: 0; }
.auth-subject-option input:checked + .auth-subject-option-body svg { color: #a5b4fc; opacity: 1; }
.auth-selected-note { margin: 8px 0 0; color: var(--faint); font-size: 8px; }
.auth-error { margin: 11px 0 0; padding: 9px 11px; border: 1px solid rgba(251, 113, 133, 0.32); border-radius: 10px; color: #fecdd3; background: rgba(251, 113, 133, 0.1); font-size: 9px; line-height: 1.45; }
.auth-submit { margin-top: 16px; }
.auth-privacy { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 13px 0 0; color: var(--faint); font-size: 7px; line-height: 1.4; text-align: center; }
.auth-privacy svg { width: 11px; height: 11px; }
.auth-login-mode .auth-subjects { display: none; }
.auth-login-mode .auth-submit { margin-top: 20px; }

/* Profile account */
.profile-header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.profile-user-chip { display: inline-flex; align-items: center; padding: 8px 11px; border: 1px solid rgba(129, 140, 248, 0.24); border-radius: 999px; color: #c7d2fe; background: rgba(129, 140, 248, 0.1); font-size: 9px; font-weight: 900; }
[data-theme="light"] .profile-user-chip { color: #4338ca; background: rgba(99, 102, 241, 0.08); }
.profile-subjects-section { margin-top: 18px; padding: 22px; border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--surface); box-shadow: var(--card-shadow); backdrop-filter: blur(20px); }
[data-theme="light"] .profile-subjects-section { background: linear-gradient(160deg, #fff, #f8faff); }
.profile-subjects-note { margin: -4px 0 13px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.profile-subject-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profile-subjects-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; }
.profile-subjects-actions > span { color: var(--faint); font-size: 8px; }
[data-theme="light"] .auth-gate { background: radial-gradient(1000px 620px at 8% -8%, rgba(129, 140, 248, 0.22), transparent 56%), radial-gradient(900px 600px at 95% 5%, rgba(34, 211, 238, 0.14), transparent 54%), var(--page); }

/* Daily plan */
.daily-plan-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid rgba(129, 140, 248, 0.24);
  border-radius: 24px;
  background:
    radial-gradient(500px 220px at 100% 0%, rgba(34, 211, 238, 0.13), transparent 64%),
    linear-gradient(120deg, rgba(37, 48, 83, 0.94), rgba(12, 19, 34, 0.94));
  box-shadow: var(--card-shadow);
}
[data-theme="light"] .daily-plan-card { background: radial-gradient(500px 220px at 100% 0%, rgba(34, 211, 238, 0.16), transparent 64%), linear-gradient(120deg, #eef2ff, #f8fbff); }
.daily-plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.daily-plan-top h2 { margin: 0 0 5px; font-size: 19px; font-weight: 800; letter-spacing: -0.5px; }
.daily-plan-top p { max-width: 640px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.plan-badge { flex: none; padding: 6px 9px; border: 1px solid rgba(129, 140, 248, 0.32); border-radius: 999px; color: #c7d2fe; background: rgba(129, 140, 248, 0.12); font-size: 8px; font-weight: 900; letter-spacing: 0.7px; }
[data-theme="light"] .plan-badge { color: #4338ca; }
.plan-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.plan-metric { padding: 10px 11px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.plan-metric span { display: block; margin-bottom: 2px; color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; }
.plan-metric strong { display: block; font-size: 16px; font-weight: 800; }
.plan-metric.is-accent strong { color: #a5b4fc; }
.plan-weak-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.plan-weak-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid rgba(251, 191, 36, 0.22); border-radius: 999px; color: #fde68a; background: rgba(251, 191, 36, 0.08); font-size: 8px; font-weight: 800; }
[data-theme="light"] .plan-weak-chip { color: #92400e; }
.plan-weak-chip b { color: var(--gold); }
.daily-plan-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.daily-plan-bottom > span { color: var(--muted); font-size: 9px; font-weight: 700; }
.daily-plan-bottom .button { flex: none; }

/* Diagnostic */
.diagnostic-counter { flex: none; padding: 8px 11px; border: 1px solid var(--border); border-radius: 12px; color: #c7d2fe; background: rgba(129, 140, 248, 0.1); font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; }
.diagnostic-body { display: block; padding: 20px 16px 34px; }
.diagnostic-body .exam-question-card { margin: 0 auto; }
.diagnostic-footer { width: min(760px, calc(100% - 24px)); }
.diagnostic-footer > span { flex: 1; text-align: center; }
.diagnostic-result { width: min(780px, 100%); margin: 0 auto; }
.diagnostic-result-card { padding: 25px; border: 1px solid rgba(129, 140, 248, 0.28); border-radius: 24px; background: radial-gradient(450px 220px at 50% 0%, rgba(129, 140, 248, 0.18), transparent 65%), linear-gradient(150deg, rgba(24, 32, 59, 0.94), rgba(9, 15, 28, 0.94)); box-shadow: var(--card-shadow); text-align: center; }
[data-theme="light"] .diagnostic-result-card { background: radial-gradient(450px 220px at 50% 0%, rgba(129, 140, 248, 0.18), transparent 65%), #f5f7ff; }
.diagnostic-result-card h1 { margin-bottom: 6px; color: #c7d2fe; font-size: clamp(25px, 4vw, 34px); font-weight: 800; letter-spacing: -1px; }
.diagnostic-result-card > p { margin: 0; color: var(--muted); font-size: 11px; }
.diagnostic-score { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 14px 0 4px; color: var(--gold); font-size: 44px; font-weight: 800; letter-spacing: -2px; }
.diagnostic-score small { color: var(--muted); font-size: 14px; letter-spacing: 0; }
.diagnostic-subject-list { display: grid; gap: 7px; margin-top: 16px; text-align: left; }
.diagnostic-subject-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255, 255, 255, 0.04); }
.diagnostic-subject-row strong { font-size: 10px; }
.diagnostic-subject-row > span { color: var(--muted); font-size: 9px; font-weight: 900; }
.diagnostic-subject-bar { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, 0.16); }
.diagnostic-subject-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #818cf8, #22d3ee); }
.diagnostic-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.diagnostic-weak-box { margin-top: 14px; padding: 13px; border: 1px solid rgba(251, 191, 36, 0.2); border-radius: 14px; background: rgba(251, 191, 36, 0.06); text-align: left; }
.diagnostic-weak-box strong { display: block; margin-bottom: 6px; color: var(--gold); font-size: 8px; letter-spacing: 0.7px; text-transform: uppercase; }
.diagnostic-weak-box span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.diagnostic-tip { margin-top: 13px; color: var(--faint); font-size: 8px; line-height: 1.5; text-align: center; }

/* Responsive refinements */
@media (max-width: 900px) {
  .topbar { width: calc(100% - 16px); margin-top: 8px; top: 8px; border-radius: 17px; }
  .topbar-inner { min-height: 60px; }
  .screen-header h1 { letter-spacing: -1.6px; }
  .exam-history-metrics { grid-template-columns: repeat(2, 1fr); }
  .auth-shell { grid-template-columns: 1fr; width: min(620px, 100%); min-height: auto; gap: 24px; padding: 8px 0; }
  .auth-aside { max-width: none; }
  .auth-brand { margin-bottom: 24px; }
  .auth-aside h1 { font-size: clamp(34px, 6vw, 48px); }
  .auth-benefits { grid-template-columns: 1fr 1fr; }
  .profile-subject-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .app-main { padding-top: 22px; }
  .brand-name { font-size: 16px; }
  .brand-mark { flex-basis: 39px; width: 39px; height: 39px; border-radius: 13px; }
  .brand-mark svg { width: 30px; height: 30px; }
  .bottom-nav { bottom: 10px; }
  .bottom-nav-inner { width: min(100%, 520px); border-radius: 20px; }
  .screen-header h1 { font-size: clamp(29px, 8vw, 38px); letter-spacing: -1.4px; }
  .exam-launch { border-radius: 20px; }
  .exam-history-item { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .exam-history-bar { display: none; }
  .exam-history-section { padding: 16px; }
  .attempt-dialog { padding: 16px; }
  .auth-gate { padding: 16px 12px; }
  .auth-card { border-radius: 22px; }
  .auth-benefits { grid-template-columns: 1fr; }
  .profile-header { flex-direction: column; }
  .profile-header-actions { width: 100%; justify-content: flex-start; }
  .profile-subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-subjects-section { padding: 16px; }
  .daily-plan-bottom { flex-direction: column; align-items: stretch; }
  .daily-plan-bottom .button { width: 100%; }
  .diagnostic-body { padding: 14px 10px 24px; }
}
@media (max-width: 440px) {
  .topbar { width: calc(100% - 12px); margin-top: 6px; top: 6px; }
  .topbar-inner { padding: 0 10px; gap: 8px; }
  .brand-tagline { display: none; }
  .brand-name { font-size: 15px; }
  .brand-mark { flex-basis: 36px; width: 36px; height: 36px; }
  .brand-mark svg { width: 27px; height: 27px; }
  .top-stat { min-width: 34px; height: 32px; border-radius: 10px; }
  .profile-button { width: 34px; height: 34px; }
  .screen-header h1 { font-size: 29px; letter-spacing: -1.2px; }
  .screen-subtitle { font-size: 12px; }
  .eyebrow { font-size: 8px; }
  .exam-launch-icon { flex-basis: 44px; width: 44px; height: 44px; }
  .bottom-nav-inner { width: 100%; padding: 6px; border-radius: 18px; }
  .nav-tab { min-height: 50px; border-radius: 14px; }
  .exam-history-metrics { grid-template-columns: 1fr 1fr; gap: 7px; }
  .exam-history-metric { padding: 10px; }
  .exam-history-metric strong { font-size: 17px; }
  .exam-history-item { grid-template-columns: 1fr; }
  .exam-history-score { text-align: left; }
  .auth-aside h1 { font-size: 32px; letter-spacing: -1.8px; }
  .auth-lead { font-size: 12px; }
  .auth-aside { display: none; }
  .auth-shell { display: block; }
  .auth-subject-grid { grid-template-columns: 1fr; }
  .profile-subject-grid { grid-template-columns: 1fr; }
  .profile-subjects-actions { flex-direction: column; align-items: stretch; }
  .profile-subjects-actions .button { width: 100%; }
  .profile-user-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .daily-plan-card { padding: 16px; border-radius: 20px; }
  .daily-plan-top { flex-direction: column; }
  .plan-metrics { grid-template-columns: 1fr 1fr; }
  .diagnostic-counter { padding: 6px 8px; font-size: 9px; }
  .diagnostic-footer { flex-wrap: wrap; }
  .diagnostic-footer > span { order: 3; flex-basis: 100%; text-align: center; }
  .diagnostic-result-card { padding: 17px; border-radius: 20px; }
  .diagnostic-result-card h1 { font-size: 24px; }
  .diagnostic-score { font-size: 36px; }
}


/* ===== Subjects library redesign ===== */
.app-main { padding-top: 108px; }
#subjects-screen .screen-inner { width: min(1180px, 100%); }
#subjects-screen .screen-header { margin-bottom: 24px; }
#subjects-screen .screen-header h1 { font-size: clamp(32px, 4vw, 46px); letter-spacing: -1.8px; }

.subjects-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 30px;
  align-items: center;
  margin-bottom: 22px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 30px;
  background:
    radial-gradient(520px 260px at 0% 0%, rgba(56, 189, 248, 0.18), transparent 65%),
    radial-gradient(420px 240px at 100% 100%, rgba(167, 139, 250, 0.16), transparent 70%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    var(--surface);
  box-shadow: var(--card-shadow), var(--shadow);
}
.subjects-hero::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 280px;
  height: 280px;
  border: 40px solid rgba(56, 189, 248, 0.05);
  border-radius: 50%;
  pointer-events: none;
}
.subjects-hero-copy { position: relative; z-index: 1; min-width: 0; }
.subjects-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-radius: 999px;
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.08);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.8px;
}
.subjects-hero-kicker svg { width: 13px; height: 13px; }
.subjects-hero-copy h2 { margin: 12px 0 8px; font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.subjects-hero-copy p { max-width: 620px; margin: 0; color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.65; }
.subjects-hero-stats { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 20px 0 22px; }
.subjects-hero-stats span { display: flex; flex-direction: column; gap: 2px; }
.subjects-hero-stats strong { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; }
.subjects-hero-stats small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }
.subjects-hero-cta { display: inline-flex; align-items: center; gap: 7px; }
.subjects-hero-cta svg { width: 16px; height: 16px; }
.subjects-hero-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 172px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--blue) calc(var(--value) * 1%), rgba(148, 163, 184, 0.26) 0);
  box-shadow: 0 0 45px rgba(56, 189, 248, 0.16);
}
.subjects-hero-ring::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
}
.subjects-hero-ring-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.subjects-hero-ring-inner strong { font-size: 30px; font-weight: 900; letter-spacing: -1px; }
.subjects-hero-ring-inner span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }

.subject-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.filter-chip span { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(148, 163, 184, 0.12); font-size: 9px; text-align: center; }
.filter-chip:hover { color: var(--text); border-color: var(--border-bright); transform: translateY(-1px); }
.filter-chip.is-active { color: #bae6fd; border-color: rgba(56, 189, 248, 0.5); background: rgba(56, 189, 248, 0.12); }
.filter-chip.is-active span { color: #e0f2fe; background: rgba(56, 189, 248, 0.2); }

#subjects-screen .subject-grid-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
#subjects-screen .subject-card {
  display: flex;
  flex-direction: column;
  min-height: 274px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    radial-gradient(220px 180px at 100% 0%, color-mix(in srgb, var(--card-color, #818cf8) 22%, transparent), transparent 70%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012)),
    var(--surface);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#subjects-screen .subject-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--card-color, #818cf8) 55%, var(--border));
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.3), 0 0 0 1px color-mix(in srgb, var(--card-color, #818cf8) 18%, transparent);
}
#subjects-screen .subject-card.is-current { border-color: color-mix(in srgb, var(--card-color, #818cf8) 70%, var(--border)); }
.subject-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
#subjects-screen .subject-card-icon { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid color-mix(in srgb, var(--card-color, #818cf8) 30%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--card-color, #818cf8) 12%, transparent); font-size: 21px; }
.subject-category-chip { margin-left: auto; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--category-color) 35%, transparent); border-radius: 999px; color: var(--category-color); background: color-mix(in srgb, var(--category-color) 10%, transparent); font-size: 8px; font-weight: 900; letter-spacing: 0.4px; text-transform: uppercase; }
#subjects-screen .subject-card h2 { margin: 0 0 7px; font-size: 21px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.25; }
#subjects-screen .subject-card p { margin: 0 0 18px; color: var(--muted); font-size: 10px; font-weight: 700; }
.subject-card-bottom { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.subject-card-ring { position: relative; display: grid; flex: none; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(var(--card-color, #818cf8) calc(var(--value) * 1%), rgba(148, 163, 184, 0.24) 0); }
.subject-card-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.subject-card-ring span { position: relative; z-index: 1; font-size: 10px; font-weight: 900; }
.subject-card-stats { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.subject-card-stats span { display: inline-flex; align-items: center; gap: 4px; }
.subject-card-stats svg { width: 12px; height: 12px; color: var(--card-color, #818cf8); }
.subject-card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--card-color, #818cf8); font-size: 9px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; }
.subject-card-cta svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
#subjects-screen .subject-card:hover .subject-card-cta svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .subjects-hero { grid-template-columns: minmax(0, 1fr) 140px; padding: 26px; }
  .subjects-hero-ring { width: 140px; }
  .subjects-hero-ring-inner strong { font-size: 25px; }
}
@media (max-width: 700px) {
  .app-main { padding-top: 94px; }
  .subjects-hero { grid-template-columns: 1fr; padding: 22px; }
  .subjects-hero-ring { display: none; }
  .subjects-hero-copy h2 { font-size: 25px; }
  #subjects-screen .subject-grid-library { grid-template-columns: 1fr; }
  .subjects-hero-stats { gap: 12px 20px; }
}


/* Compact subjects hero */
.app-main { padding-top: 28px; }
#subjects-screen .screen-header { margin-bottom: 18px; }
#subjects-screen .screen-header h1 { font-size: clamp(30px, 3.6vw, 40px); }
.subjects-hero { padding: 24px 28px; grid-template-columns: minmax(0, 1fr) 150px; gap: 24px; margin-bottom: 18px; border-radius: 26px; }
.subjects-hero-copy h2 { margin: 8px 0 6px; font-size: clamp(24px, 2.6vw, 30px); }
.subjects-hero-copy p { max-width: 560px; font-size: 12.5px; }
.subjects-hero-stats { margin: 14px 0 16px; gap: 10px 22px; }
.subjects-hero-stats strong { font-size: 20px; }
.subjects-hero-ring { width: 148px; }
.subjects-hero-ring-inner strong { font-size: 26px; }
.subjects-hero-cta { padding: 11px 18px; font-size: 12px; }
.subject-filters { margin-bottom: 16px; }
@media (max-width: 700px) { .app-main { padding-top: 22px; } }
.filter-chip:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.filter-chip:disabled:hover { transform: none; border-color: var(--border); color: var(--muted); }


/* Email, password recovery and new mascot spacing */
.auth-email-wrap { display: flex; flex-direction: column; gap: 4px; }
.auth-field-note { margin-top: 4px; color: var(--faint); font-size: 9px; font-weight: 700; }
.auth-forgot { align-self: flex-start; margin: 6px 0 2px; padding: 0; border: 0; color: var(--blue); background: none; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.auth-forgot:hover { text-decoration: underline; }
.auth-reset-dialog { width: min(470px, calc(100% - 24px)); max-height: calc(100vh - 40px); padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: 24px; color: var(--text); background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.auth-reset-dialog::backdrop { background: rgba(3, 7, 18, 0.74); backdrop-filter: blur(8px); }
.auth-reset-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px; }
.auth-reset-card h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.7px; }
.auth-reset-card p { margin: 0 0 6px; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.auth-reset-card label { margin: 8px 0 2px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: 0.4px; }
.auth-reset-card input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid var(--border); border-radius: 13px; outline: 0; color: var(--text); background: rgba(6, 10, 20, 0.45); font-size: 12px; font-weight: 700; }
.auth-reset-card input:focus { border-color: rgba(129, 140, 248, 0.7); box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.1); }
.auth-reset-card input::placeholder { color: var(--faint); }
.auth-reset-close { position: absolute; top: 14px; right: 14px; z-index: 1; }
.auth-reset-message { margin-top: 6px !important; padding: 10px 12px; border: 1px solid rgba(56, 189, 248, 0.26); border-radius: 12px; color: #bae6fd !important; background: rgba(56, 189, 248, 0.08); }
.auth-email-wrap[hidden] { display: none; }
/* Official gold book logo */
.brand-mark { border: 0; background: none; box-shadow: none; }
.brand:hover .brand-mark { box-shadow: 0 14px 30px rgba(212, 175, 55, 0.22); transform: translateY(-2px) scale(1.03); }
.brand-mark svg { filter: drop-shadow(0 6px 14px rgba(212, 175, 55, 0.22)); }
.brand-name, .brand-name span {
  color: transparent;
  background: linear-gradient(180deg, #FFF5C8 0%, #E7C766 42%, #B98625 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.brand-tagline { color: #cdae55; }
.brand-tagline { text-transform: none; letter-spacing: 0.2px; font-size: 9px; font-weight: 700; }
/* Dolphin mascot artwork */
.profile-mascot { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mascot-art { position: relative; z-index: 1; display: block; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.35)); animation: float 3.8s ease-in-out infinite; }
.dolphin-mascot-small .mascot-art { width: 76px; height: 76px; }
.dialog-mascot { display: block; width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.32)); animation: float 3.8s ease-in-out infinite; }
.feedback-dolphin .mascot-art { width: 38px; height: 38px; animation-duration: 3.2s; }
.finish-dolphin .mascot-art { width: 142px; height: 142px; }
.blitz-result .mascot-art { width: 138px; height: 138px; }
@media (max-width: 700px) {
  .mascot-bubble .mascot-art { width: 66px; height: 66px; }
  .finish-dolphin .mascot-art { width: 112px; height: 112px; }
}
.profile-button { padding: 2px; }