/* ── Material Symbols (level cards, arrows, etc.) ── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.ss-choice-arrow.material-symbols-outlined { font-size: 18px; color: var(--muted); }

/* ── Shared study / game screen utilities (sidebar screens only) ── */
.ss-study-screen:has(.ss-v2-sidebar) .page,
.ss-game-screen:not(.ss-game-screen--solo) .page {
  width: calc(100% - var(--sidebar-w));
  box-sizing: border-box;
}

.ss-game-screen--solo .page,
.ss-lesson-screen .page,
.ss-quiz-screen .page,
.ss-result-screen .page,
.page.ss-flow-page {
  margin-left: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

@media (min-width: 901px) {
  .ss-study-screen:has(.ss-v2-sidebar) .page,
  .ss-game-screen:not(.ss-game-screen--solo) .page {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ss-study-screen:has(.ss-v2-sidebar) .page > *,
  .ss-game-screen:not(.ss-game-screen--solo) .page > * {
    width: 100%;
    max-width: 720px;
  }
  .ss-study-screen:has(.ss-v2-sidebar) .page.ss-page-wide > *,
  .ss-game-screen:not(.ss-game-screen--solo) .page.ss-page-wide > * {
    max-width: 960px;
  }
}

.ss-back-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 20px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--btn-ghost-bg);
  color: var(--muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: var(--ease);
  box-shadow: var(--shadow-xs);
}
.ss-back-btn:hover {
  color: var(--accent-bright); border-color: oklch(78% 0.08 283);
  transform: translateX(-2px);
}
.ss-back-btn svg { display: block; }

.ss-breadcrumb {
  font-size: 13px; font-weight: 600; color: var(--accent-bright);
  letter-spacing: 0.02em; margin-bottom: 8px;
}

.ss-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border: none; border-radius: 12px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: oklch(99% 0 0); cursor: pointer; transition: var(--ease);
  background: linear-gradient(145deg, var(--accent-bright), var(--accent));
  box-shadow: 0 2px 10px oklch(54% 0.19 283 / 25%), 0 0 0 1px oklch(48% 0.18 283 / 40%);
}
.ss-btn-primary:hover { transform: scale(1.03); box-shadow: var(--shadow-lift); }
.ss-btn-primary:active { transform: scale(0.99); }

.ss-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 12px;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--ease);
  background: var(--btn-ghost-bg); color: var(--fg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.ss-btn-outline:hover {
  border-color: oklch(78% 0.08 283); color: var(--accent-bright);
  transform: translateY(-1px);
  background: var(--accent-soft);
}
[data-theme="dark"] .ss-btn-outline:hover {
  border-color: oklch(48% 0.12 283);
}

.ss-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  background: var(--accent-soft); color: var(--accent-bright);
  border: 1px solid oklch(80% 0.06 283);
}

.ss-search-wrap { position: relative; max-width: 520px; margin-bottom: 28px; }
.ss-search-wrap svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.ss-search-inp {
  width: 100%; padding: 14px 16px 14px 44px;
  border: 1px solid var(--border); border-radius: 14px;
  font-size: 14px; background: var(--surface);
  color: var(--fg); transition: var(--ease);
  box-shadow: var(--shadow-card);
}
.ss-search-inp:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow), var(--shadow-card);
}

/* Library */
.ss-lib-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px 18px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--card-bg);
  cursor: pointer; text-align: left; transition: var(--ease);
  box-shadow: var(--shadow-card);
}
.ss-lib-item:hover {
  border-color: oklch(72% 0.12 283); transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.ss-lib-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(145deg, oklch(96% 0.06 283), oklch(92% 0.09 283));
  color: var(--accent-bright);
}
.ss-lib-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ss-lib-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Material */
.ss-material-hero {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 420px; padding: 14px 20px;
  margin-top: 4px; margin-bottom: 28px; border-radius: 14px;
  border: 1px solid oklch(78% 0.08 283);
  background: var(--material-hero-bg);
  color: var(--material-hero-color); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: var(--ease);
  box-shadow: 0 4px 20px oklch(54% 0.19 283 / 12%);
}
.ss-material-hero:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  filter: brightness(1.05);
}
[data-theme="dark"] .ss-material-hero {
  border-color: oklch(52% 0.14 283);
  box-shadow: 0 4px 24px oklch(54% 0.19 283 / 28%);
}
[data-theme="dark"] .ss-material-hero:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 32px oklch(54% 0.19 283 / 35%);
}
.ss-section-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 4px 0 12px;
}
.ss-material-list { display: flex; flex-direction: column; gap: 10px; }
.ss-material-empty-cta { margin-top: 16px; }
.ss-material-empty {
  padding: 40px 24px; text-align: center; border-radius: 14px;
  border: 1px dashed var(--border); background: var(--btn-ghost-bg);
  color: var(--muted); font-size: 14px; line-height: 1.55;
}
.ss-lib-empty {
  padding: 32px 20px; text-align: center; border-radius: 14px;
  border: 1px dashed var(--border); background: var(--btn-ghost-bg);
  color: var(--muted); font-size: 14px; line-height: 1.55;
  margin-top: 8px;
}

/* Material lab grid */
.ss-lab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 640px) { .ss-lab-grid { grid-template-columns: 1fr; } }

/* Coach */
.ss-coach-panel { max-width: 640px; }
.ss-coach-hero {
  padding: 24px; border-radius: 14px; margin-bottom: 28px;
  border: 1px solid oklch(82% 0.06 283);
  background: linear-gradient(145deg, var(--accent-soft), oklch(96% 0.06 283));
  box-shadow: var(--shadow-card);
}
.ss-coach-hero h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 36px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.ss-coach-hero p { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 48ch; }
.ss-coach-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ss-coach-inp {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border); font-size: 14px;
  background: var(--surface); transition: var(--ease);
  box-shadow: var(--shadow-xs); margin-bottom: 14px;
}
.ss-coach-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.ss-coach-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ss-coach-chip {
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; transition: var(--ease);
}
.ss-coach-chip:hover, .ss-coach-chip.is-on {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-bright);
}
.ss-coach-diff { display: flex; gap: 8px; margin-bottom: 20px; }
.ss-coach-diff-btn {
  flex: 1; padding: 10px; border-radius: 10px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: var(--ease);
}
.ss-coach-diff-btn.is-on {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-bright);
}
.ss-coach-progress-bar {
  height: 6px; border-radius: 999px; background: oklch(92% 0.01 265);
  margin: 16px 0 20px; overflow: hidden;
}
.ss-coach-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--growth-bright), var(--accent-bright));
  transition: width 0.35s ease;
}
.ss-coach-q-card {
  padding: 22px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-card); margin-bottom: 16px;
}
.ss-coach-q-text { font-size: 17px; font-weight: 600; line-height: 1.45; margin-top: 8px; }
.ss-coach-answer {
  width: 100%; padding: 14px; border-radius: 12px; resize: vertical;
  border: 1px solid var(--border); font-size: 14px; font-family: inherit;
  min-height: 88px; margin-bottom: 14px;
}
.ss-coach-score-ring {
  width: 120px; height: 120px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 20px;
  background: conic-gradient(var(--growth-bright) 0deg, var(--growth-bright) 252deg, oklch(92% 0.01 265) 252deg);
  box-shadow: var(--shadow-card);
}
.ss-coach-score-inner { width: 96px; height: 96px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
.ss-coach-score-val { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--accent-bright); }

/* Page toolbar — back + language */
.ss-page-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px; flex-wrap: wrap;
  position: relative; z-index: 50; flex-shrink: 0;
}
.ss-page-toolbar .ss-back-btn { margin-bottom: 0; }
.ss-toolbar-spacer { flex: 1; min-width: 8px; }

/* Language dropdown */
.ss-lang-wrap { position: relative; }
.ss-lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--btn-ghost-bg);
  font-size: 13px; font-weight: 600; color: var(--fg);
  cursor: pointer; transition: var(--ease);
  box-shadow: var(--shadow-xs);
}
.ss-lang-btn:hover {
  border-color: oklch(78% 0.08 283); color: var(--fg);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
[data-theme="dark"] .ss-lang-btn:hover {
  border-color: oklch(48% 0.12 283);
}
.ss-lang-flag { font-size: 16px; line-height: 1; }
.ss-lang-code { letter-spacing: 0.04em; font-size: 11px; color: var(--muted); }
.ss-lang-drop {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px; max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 6px;
  box-shadow: var(--shadow-float); z-index: 500;
}
.ss-lang-drop.is-open { display: block; }
.ss-lang-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 13px; cursor: pointer; transition: var(--ease);
}
.ss-lang-item:hover { background: var(--accent-soft); }
.ss-lang-item.is-active {
  background: var(--accent-pill); color: var(--accent-bright); font-weight: 600;
}
.ss-lang-item-flag { font-size: 18px; line-height: 1; width: 22px; text-align: center; }
.ss-lang-item-name { flex: 1; }

/* Ask AI — right slide-in drawer */
.ss-ask-backdrop {
  position: fixed; inset: 0; z-index: 280;
  background: oklch(20% 0.02 265 / 35%);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ss-ask-backdrop.is-open { opacity: 1; pointer-events: auto; }
.ss-ask-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 290;
  width: min(440px, 100vw);
  display: flex; flex-direction: column;
  background: var(--drawer-bg);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 48px oklch(54% 0.19 283 / 12%), -4px 0 16px oklch(0% 0 0 / 8%);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ss-ask-drawer.is-open { transform: translateX(0); }
.ss-ask-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 22px 20px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--drawer-header-bg);
}
.ss-ask-drawer-brand { display: flex; align-items: center; gap: 14px; }
.ss-ask-ai-avatar {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--accent-bright), var(--accent));
  color: oklch(99% 0 0);
  box-shadow: 0 2px 10px oklch(54% 0.19 283 / 22%);
  border: 1px solid oklch(72% 0.18 283 / 35%);
  overflow: hidden;
}
.ss-ask-ai-avatar svg { display: block; flex-shrink: 0; }
.ss-ask-drawer-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.2;
}
.ss-ask-drawer-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ss-ask-drawer-close {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--btn-ghost-bg);
  cursor: pointer; transition: var(--ease);
  display: grid; place-items: center; flex-shrink: 0; color: var(--muted);
}
.ss-ask-drawer-close:hover { border-color: var(--accent); color: var(--accent-bright); }
.ss-ask-drawer-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 18px 20px 22px; border-bottom: 1px solid var(--border);
  background: var(--drawer-chips-bg);
}
.ss-ask-chip {
  padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: var(--btn-ghost-bg);
  color: var(--accent-bright); cursor: pointer; transition: var(--ease);
  white-space: nowrap;
}
.ss-ask-chip:hover {
  background: var(--accent-soft); border-color: var(--accent);
  transform: translateY(-1px);
}
.ss-ask-drawer-feed {
  flex: 1; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 14px; min-height: 0;
}
.ss-ask-welcome { text-align: center; max-width: 320px; margin: auto; padding: 24px 0; }
.ss-ask-welcome-icon {
  width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--accent-bright), var(--accent));
  color: oklch(99% 0 0);
  box-shadow: 0 4px 16px oklch(54% 0.19 283 / 20%);
  border: 1px solid oklch(72% 0.18 283 / 30%);
}
.ss-ask-welcome-icon svg { display: block; }
.ss-ask-welcome h2 {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 6px;
}
.ss-ask-welcome p { color: var(--muted); font-size: 13px; line-height: 1.55; }
.ss-ask-recent-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.ss-ask-recent-item {
  padding: 10px 12px; border-radius: 10px; font-size: 13px;
  border: 1px solid var(--border); background: var(--btn-ghost-bg);
  margin-bottom: 6px; cursor: pointer; transition: var(--ease);
  text-align: left; width: 100%; color: var(--fg);
}
.ss-ask-recent-item:hover { border-color: oklch(78% 0.08 283); background: var(--accent-soft); }
.ss-ask-recent-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ss-ask-recent-empty { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.45; }
.ss-streak-label { font-weight: 600; }
[data-theme="dark"] .ss-ask-recent-item:hover {
  border-color: oklch(48% 0.12 283);
}
.ss-ask-bubble {
  max-width: 92%; padding: 12px 14px; border-radius: 14px;
  font-size: 14px; line-height: 1.55;
}
.ss-ask-bubble--user {
  align-self: flex-end; background: linear-gradient(145deg, var(--accent-bright), var(--accent));
  color: oklch(99% 0 0); border-bottom-right-radius: 4px;
  box-shadow: 0 2px 10px oklch(54% 0.19 283 / 22%);
}
.ss-ask-bubble--ai {
  align-self: flex-start; background: var(--btn-ghost-bg);
  border: 1px solid var(--border); border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-xs); color: var(--fg);
}
.ss-ask-drawer-foot {
  padding: 14px 18px 18px; border-top: 1px solid var(--border);
  background: var(--drawer-chips-bg);
}
.ss-ask-input-row {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--drawer-input-bg);
  box-shadow: inset 0 1px 2px oklch(0% 0 0 / 3%);
  transition: var(--ease);
}
.ss-ask-input-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow), inset 0 1px 2px oklch(0% 0 0 / 3%);
}
[data-theme="dark"] .ss-ask-input-row:focus-within {
  box-shadow: 0 0 0 4px var(--accent-glow), inset 0 1px 2px oklch(0% 0 0 / 20%);
}
.ss-ask-textarea {
  flex: 1; border: none; background: transparent; resize: none;
  font-size: 14px; font-family: inherit; max-height: 100px; outline: none;
  line-height: 1.45; color: var(--fg);
}
.ss-ask-send {
  width: 38px; height: 38px; border-radius: 10px; border: none;
  background: linear-gradient(145deg, var(--accent-bright), var(--accent));
  color: white; cursor: pointer; transition: var(--ease);
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 2px 8px oklch(54% 0.19 283 / 25%);
}
.ss-ask-send:hover { transform: scale(1.06); box-shadow: var(--shadow-lift); }
.ss-ask-foot-note {
  font-size: 11px; color: var(--muted); text-align: center; margin-top: 8px;
}

/* Login screen */
.ss-login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.ss-login-screen.active { display: flex; }
.ss-login-screen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 55% at 88% 8%, oklch(93% 0.09 283 / 42%), transparent 58%),
    radial-gradient(ellipse 60% 50% at 8% 92%, oklch(93% 0.1 155 / 32%), transparent 52%),
    repeating-radial-gradient(circle at 1px 1px, oklch(88% 0.01 265 / 28%) 0 1px, transparent 1px 32px);
}
.ss-login-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 100%;
  padding: 56px 24px 20px;
  position: relative;
  z-index: 1;
  flex-shrink: 1;
  min-height: 0;
}
.ss-login-corner {
  position: absolute; top: 20px; right: 20px; z-index: 3;
  display: flex; gap: 8px; align-items: center;
}
.ss-login-body {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.ss-login-brand { text-align: center; margin-bottom: 20px; }
.ss-login-logo {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--accent-bright), oklch(48% 0.2 283));
  color: oklch(99% 0 0);
  box-shadow: 0 8px 28px oklch(54% 0.19 283 / 32%), 0 0 0 1px oklch(54% 0.19 283 / 12%);
}
.ss-login-brand h1 {
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 4px;
}
.ss-login-brand p { color: var(--muted); font-size: 14px; line-height: 1.45; }
.ss-login-card {
  padding: 24px 24px 22px; border-radius: 18px;
  border: 1px solid oklch(86% 0.02 283);
  background: var(--login-card-bg);
  box-shadow: 0 4px 20px oklch(54% 0.19 283 / 6%), 0 12px 40px oklch(0% 0 0 / 6%), 0 0 0 1px oklch(100% 0 0 / 80%);
}
[data-theme="dark"] .ss-login-card {
  border-color: oklch(28% 0.04 283);
  box-shadow: 0 4px 24px oklch(0% 0 0 / 50%), 0 0 0 1px oklch(32% 0.04 283 / 60%);
}
.ss-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--drawer-input-bg);
  transition: var(--ease); box-shadow: var(--shadow-xs);
}
.ss-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.ss-input-wrap:has(.ss-login-inp[aria-invalid="true"]) {
  border-color: oklch(58% 0.16 25);
  box-shadow: 0 0 0 4px oklch(58% 0.16 25 / 18%);
}
.ss-input-wrap svg { color: var(--muted); flex-shrink: 0; }
.ss-login-inp {
  flex: 1; border: none; background: transparent;
  padding: 13px 0; font-size: 14px; font-family: inherit; outline: none;
  color: var(--fg);
}
[data-theme="dark"] .ss-login-inp::placeholder,
[data-theme="dark"] .ss-ask-textarea::placeholder,
[data-theme="dark"] .ss-feedback-textarea::placeholder {
  color: oklch(54% 0.014 265);
}
.ss-form-group { margin-bottom: 14px; }
.ss-form-label-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.ss-form-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.ss-text-link {
  font-size: inherit;
  font-weight: 500;
  color: oklch(52% 0.16 250);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline;
  line-height: inherit;
  vertical-align: baseline;
  -webkit-appearance: none;
  appearance: none;
}
.ss-text-link:hover { color: oklch(46% 0.18 250); text-decoration: underline; }
.ss-text-link:focus-visible { outline: 2px solid oklch(52% 0.16 250 / 40%); outline-offset: 2px; border-radius: 2px; }
[data-theme="dark"] .ss-text-link { color: oklch(72% 0.14 250); }
[data-theme="dark"] .ss-text-link:hover { color: oklch(78% 0.12 250); }
.ss-form-label-row .ss-text-link { font-size: 12px; }
.ss-forgot-link {
  font-size: 11px;
  font-weight: 500;
  color: oklch(52% 0.16 250);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  transition: color 0.2s ease;
  display: inline;
  -webkit-appearance: none;
  appearance: none;
}
.ss-forgot-link:hover { color: oklch(46% 0.18 250); text-decoration: underline; }
.ss-forgot-link:focus-visible { outline: 2px solid oklch(52% 0.16 250 / 40%); outline-offset: 2px; border-radius: 2px; }
[data-theme="dark"] .ss-forgot-link { color: oklch(72% 0.14 250); }
[data-theme="dark"] .ss-forgot-link:hover { color: oklch(78% 0.12 250); }
.ss-eye-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 4px; transition: var(--ease);
}
.ss-eye-btn:hover { color: var(--accent-bright); }
.ss-login-error {
  font-size: 13px; font-weight: 500; color: oklch(52% 0.16 25);
  min-height: 0; margin-bottom: 0;
  padding: 0 10px; border-radius: 8px;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: all 0.2s ease;
}
.ss-login-error.is-visible {
  opacity: 1; max-height: 40px;
  margin-bottom: 8px; padding: 8px 10px;
  background: oklch(96% 0.04 25);
  border: 1px solid oklch(88% 0.08 25);
}
.ss-login-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ss-login-actions .ss-btn-primary,
.ss-login-actions .ss-btn-outline { width: 100%; }
.ss-login-actions .ss-btn-guest {
  border-color: oklch(82% 0.08 155);
  background: linear-gradient(180deg, oklch(98% 0.03 155), oklch(96.5% 0.05 155));
  color: oklch(38% 0.1 155);
  font-weight: 600;
}
.ss-login-actions .ss-btn-guest:hover {
  border-color: var(--growth-bright);
  transform: scale(1.02);
  box-shadow: 0 4px 16px oklch(58% 0.16 155 / 18%);
}
.ss-login-divider {
  display: flex; align-items: center; gap: 12px; margin: 4px 0;
}
.ss-login-divider::before, .ss-login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.ss-login-divider span {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--muted);
}
.ss-guest-tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
  background: oklch(96% 0.04 155); color: var(--growth-bright);
  border: 1px solid oklch(84% 0.08 155);
}
.ss-login-footer {
  display: flex; justify-content: center;
  margin-top: 18px; padding-bottom: 0;
  font-size: 12px; flex-shrink: 0;
}
.ss-login-footer .ss-text-link {
  font-size: 12px;
  color: oklch(52% 0.16 250);
}
.ss-login-footer .ss-text-link:hover { color: oklch(46% 0.18 250); text-decoration: underline; }
[data-theme="dark"] .ss-login-footer .ss-text-link { color: oklch(72% 0.14 250); }
[data-theme="dark"] .ss-login-footer .ss-text-link:hover { color: oklch(78% 0.12 250); }

@media (max-width: 480px) {
  .ss-login-screen { height: 100dvh; overflow-y: auto; }
  .ss-login-shell { padding: 52px 16px 16px; }
  .ss-login-card { padding: 20px 18px 18px; border-radius: 16px; }
  .ss-login-brand { margin-bottom: 16px; }
  .ss-login-brand h1 { font-size: 24px; }
  .ss-login-footer { margin-top: 14px; }
  .ss-login-corner { top: 14px; right: 14px; }
}

/* Modals — Premium & Feedback */
.ss-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: oklch(20% 0.02 265 / 45%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 24px;
}
.ss-modal-overlay.is-open { display: flex; }
.ss-modal-box {
  width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  border-radius: 16px; border: 1px solid var(--border);
  background: var(--overlay-surface);
  box-shadow: var(--shadow-float);
  padding: 28px 26px; position: relative;
  animation: ssModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--fg);
}
.ss-modal-box--wide { max-width: 520px; }
.ss-modal-box--policy { max-width: 480px; max-height: 85vh; }
.ss-policy-date {
  font-size: 13px; color: var(--muted); margin: -4px 0 16px;
}
.ss-policy-body {
  font-size: 14px; line-height: 1.65; color: var(--fg);
  max-height: 52vh; overflow-y: auto; margin-bottom: 20px;
  padding-right: 4px;
}
.ss-policy-body h3 {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  margin: 18px 0 8px; letter-spacing: -0.01em;
}
.ss-policy-body h3:first-of-type { margin-top: 0; }
.ss-policy-body p { margin-bottom: 10px; color: var(--muted); }
.ss-policy-body p strong { color: var(--fg); font-weight: 600; }
.ss-policy-close-btn { width: 100%; }
@keyframes ssModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ss-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--btn-ghost-bg);
  cursor: pointer; transition: var(--ease);
  display: grid; place-items: center; font-size: 14px; color: var(--muted);
}
.ss-modal-close:hover { border-color: var(--accent); color: var(--accent-bright); }
.ss-modal-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-bright); margin-bottom: 4px;
}
.ss-modal-title {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 8px;
}
.ss-modal-sub { color: var(--muted); font-size: 14px; line-height: 1.55; margin-bottom: 20px; }
.ss-premium-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px;
}
.ss-premium-stat {
  text-align: center; padding: 12px 8px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--btn-ghost-bg);
}
.ss-premium-stat--hi {
  border-color: oklch(78% 0.1 283);
  background: linear-gradient(145deg, oklch(97% 0.05 283), oklch(94% 0.08 283));
}
[data-theme="dark"] .ss-premium-stat--hi {
  border-color: oklch(48% 0.12 283);
  background: linear-gradient(145deg, oklch(22% 0.08 283), oklch(16% 0.06 283));
}
.ss-premium-limits {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  margin-bottom: 16px; font-size: 13px;
  background: var(--btn-ghost-bg);
}
.ss-premium-limits-head, .ss-premium-limits-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px;
  padding: 10px 14px;
}
.ss-premium-limits-head {
  background: var(--drawer-chips-bg); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.ss-premium-limits-row { border-top: 1px solid var(--border); color: var(--fg); }
.ss-premium-perks { list-style: none; margin-bottom: 20px; }
.ss-premium-perk {
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; line-height: 1.5; color: var(--fg);
}
.ss-premium-stat-val {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--accent-bright); display: block;
}
.ss-premium-stat-lbl { font-size: 10px; color: var(--muted); margin-top: 2px; }
.ss-premium-limits-row span:last-child { color: var(--accent-bright); font-weight: 600; }
.ss-premium-perk strong { display: block; font-size: 13px; margin-bottom: 2px; }
.ss-premium-perk span { color: var(--muted); font-size: 12px; }
.ss-premium-price {
  text-align: center; margin-bottom: 14px;
}
.ss-premium-price-val {
  font-family: var(--font-display); font-size: 40px; font-weight: 700;
  color: var(--accent-bright); letter-spacing: -0.03em;
}
.ss-premium-price-val sup { font-size: 20px; vertical-align: super; }
.ss-premium-price-per { font-size: 16px; color: var(--muted); font-weight: 500; }
.ss-premium-price-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ss-btn-premium {
  width: 100%; padding: 14px; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
  color: oklch(99% 0 0); cursor: pointer; transition: var(--ease);
  background: linear-gradient(145deg, oklch(58% 0.2 283), oklch(50% 0.18 283));
  box-shadow: 0 4px 16px oklch(54% 0.19 283 / 30%);
}
.ss-btn-premium:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.ss-feedback-textarea {
  width: 100%; min-height: 120px; padding: 14px; border-radius: 12px;
  border: 1px solid var(--border); font-size: 14px; font-family: inherit;
  resize: vertical; transition: var(--ease); margin-bottom: 8px;
  background: var(--drawer-input-bg); color: var(--fg); line-height: 1.55;
}
.ss-feedback-textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.ss-feedback-msg { font-size: 13px; min-height: 18px; margin-bottom: 8px; color: oklch(48% 0.16 25); }
.ss-feedback-msg.is-success { color: var(--growth-bright); }
[data-theme="dark"] .ss-feedback-msg:not(.is-success) { color: oklch(72% 0.12 25); }
.ss-feedback-msg.is-error { color: oklch(52% 0.16 25); }
[data-theme="dark"] .ss-feedback-msg.is-error { color: oklch(72% 0.12 25); }
.ss-modal-actions { display: flex; gap: 10px; }
.ss-modal-actions .ss-btn-primary, .ss-modal-actions .ss-btn-outline { flex: 1; }

/* Lesson / quiz (no sidebar) */
.ss-lesson-screen, .ss-quiz-screen, .ss-result-screen {
  min-height: 100vh;
  background: var(--main-panel-bg);
}
.ss-lesson-screen .page, .ss-quiz-screen .page, .ss-result-screen .page {
  margin-left: 0; width: 100%; max-width: none;
}
.ss-study-topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.ss-reading-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  background: oklch(92% 0.01 265);
}
.ss-reading-fill {
  height: 100%; width: 35%;
  background: linear-gradient(90deg, var(--accent-bright), var(--growth-bright));
}
.ss-lesson-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ss-lesson-box {
  padding: 24px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-card);
  font-size: 15px; line-height: 1.75; margin-bottom: 20px;
}
.ss-lesson-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
@media (max-width: 480px) { .ss-lesson-actions { grid-template-columns: 1fr; } }

.ss-quiz-counter { margin-bottom: 20px; }
.ss-quiz-q {
  font-family: var(--font-display); font-size: clamp(18px, 4vw, 22px);
  font-weight: 700; line-height: 1.4; margin-bottom: 20px;
}
.ss-quiz-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; margin-bottom: 10px; text-align: left;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); cursor: pointer; transition: var(--ease);
  font-size: 14px; box-shadow: var(--shadow-xs);
}
.ss-quiz-opt:hover { border-color: oklch(72% 0.12 283); transform: translateY(-2px); }
.ss-quiz-opt.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.ss-quiz-opt.is-correct { border-color: var(--growth); background: var(--growth-soft); }
.ss-quiz-opt.is-wrong { border-color: oklch(65% 0.18 25); background: oklch(97% 0.03 25); }

.ss-result-center { text-align: center; padding-top: 48px; }
.ss-result-emoji { font-size: 56px; margin-bottom: 8px; }
.ss-result-score {
  font-family: var(--font-display); font-size: 56px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--accent-bright); margin-bottom: 8px;
}
.ss-result-sub { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
.ss-result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Game screens */
.ss-game-screen .page { max-width: 640px; }
.ss-game-screen .page.ss-page-wide { max-width: 800px; }
.ss-game-host {
  padding: 24px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-card); min-height: 120px;
}
.ss-game-host.ss-content-stage { min-height: 0; padding: 18px 20px; }
.ss-game-title {
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 20px;
}
.ss-tf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.ss-tf-btn {
  padding: 16px; border-radius: 12px; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: var(--ease); border: 2px solid transparent;
}
.ss-tf-btn--true {
  border-color: oklch(72% 0.14 155); background: var(--growth-soft); color: var(--growth-bright);
}
.ss-tf-btn--false {
  border-color: oklch(72% 0.14 25); background: oklch(97% 0.04 25); color: oklch(52% 0.16 25);
}
.ss-tf-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

.ss-wordle-grid { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ss-wordle-board { display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 16px auto 20px; }
.ss-wordle-row { display: flex; gap: 8px; justify-content: center; }
.ss-wordle-cell {
  width: 48px; height: 48px; border-radius: 8px;
  border: 2px solid var(--border);
  display: grid; place-items: center;
  font-size: 18px; font-weight: 700; text-transform: uppercase;
  box-sizing: border-box;
}
.ss-wordle-cell--empty { border-color: var(--border); }
.ss-wordle-cell--filled, .ss-wordle-cell.filled { border-color: oklch(70% 0.04 265); background: var(--surface); }
.ss-wordle-cell--active { border-color: var(--accent); animation: ss-wordle-pulse 1s ease infinite; }
.ss-wordle-ok, .ss-wordle-cell.correct { border-color: var(--growth); background: var(--growth-soft); color: var(--growth-bright); }
.ss-wordle-near { border-color: oklch(78% 0.16 85); background: oklch(94% 0.08 85); color: oklch(42% 0.14 85); }
.ss-wordle-bad { border-color: oklch(72% 0.02 265); background: oklch(88% 0.01 265); color: var(--muted); }
.ss-wordle-kb { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; max-width: 500px; margin: 0 auto; }
.ss-wordle-kb-row { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: center; width: 100%; }
.ss-wordle-key {
  min-width: 36px; height: 44px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--btn-ghost-bg);
  font-size: 13px; font-weight: 700; text-transform: uppercase; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ss-wordle-key--wide { min-width: 56px; font-size: 12px; padding: 0 12px; }
.ss-wordle-key--ok { background: var(--growth-soft); border-color: var(--growth); color: var(--growth-bright); }
.ss-wordle-key--near { background: oklch(94% 0.08 85); border-color: oklch(78% 0.16 85); }
.ss-wordle-key--bad { background: oklch(88% 0.01 265); color: var(--muted); }
.ss-wordle-key:hover { filter: brightness(1.05); }
.ss-wordle-explain { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 12px; max-width: 520px; }
.ss-game-head { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.ss-game-msg { text-align: center; font-weight: 600; margin: 10px 0; }
.ss-game-end-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
@keyframes ss-wordle-pulse { 0%, 100% { border-color: var(--accent); } 50% { border-color: oklch(72% 0.12 283); } }

.ss-quiz-size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ss-lesson-game-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 48px; padding: 12px 14px !important; margin: 0 !important;
}
.ss-lesson-game-btn .ss-pro-badge,
.ss-lesson-game-btn .ss-game-status-badge {
  position: absolute; top: 7px; right: 8px;
  font-size: 9px; padding: 2px 6px; letter-spacing: 0.06em;
}
.ss-lesson-game-btn .ss-game-status-badge--owned,
.ss-lesson-game-btn .ss-pro-badge--active {
  background: linear-gradient(135deg, oklch(62% 0.18 145) 0%, oklch(52% 0.16 145) 100%);
}
.ss-nav-icon--signin { background: oklch(96% 0.04 283); color: var(--accent-bright); }
.ss-v2-signin-btn:hover .ss-nav-icon--signin { background: var(--accent-soft); }
.ss-v2-sidebar-footer .streak-nav-badge { padding: 5px 8px; gap: 8px; }
.ss-v2-sidebar-footer .ss-v2-nav-item { padding: 5px 8px; }
.ss-lesson-main-btns, .ss-lesson-game2-row, .ss-lesson-premium-row {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 8px;
}
.ss-lesson-game2-row, .ss-lesson-premium-row { grid-template-columns: 1fr 1fr; }
.lesson-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ss-quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.progress-dots { display: flex; gap: 6px; align-items: center; }
.prog-dot { height: 6px; border-radius: 999px; transition: width 0.25s ease; }
.option-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; margin-bottom: 10px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--fg); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
  transition: var(--ease);
}
.option-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.option-btn.correct { border-color: var(--growth); background: var(--growth-soft); }
.option-btn.wrong { border-color: oklch(72% 0.14 25); background: oklch(97% 0.04 25); }
.option-btn:disabled { cursor: default; opacity: 0.92; }
.feedback-box { padding: 12px 16px; border-radius: 12px; font-weight: 600; margin: 12px 0; text-align: center; }
.feedback-box.ok { background: var(--growth-soft); color: var(--growth-bright); }
.feedback-box.bad { background: oklch(97% 0.04 25); color: oklch(48% 0.16 25); }
.result-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.result-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; text-align: center; }
.result-card-value { font-size: 22px; font-weight: 800; }
.result-card-label { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.xp-bar-wrap { margin: 16px 0 24px; }
.ss-xp-bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 8px; }
.xp-bar-track { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), oklch(72% 0.2 330)); transition: width 0.5s ease; }
.topic-card.active { border-color: var(--accent); background: var(--accent-soft); }
.topic-card-check {
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--growth); color: #fff; font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
}
.ss-topic-card { position: relative; }
.quiz-size-btn { padding: 12px 8px; font-size: 13px; line-height: 1.35; }
.quiz-size-btn small { font-size: 10px; opacity: 0.75; font-weight: 500; }
.ss-game-screen .page { max-width: 640px; }
.ss-game-host { width: 100%; }

.ss-memory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 380px; margin: 0 auto; width: 100%; }
.ss-memory-card {
  aspect-ratio: 1; width: 100%; min-height: 0;
  border-radius: 10px; border: 2px solid var(--border);
  background: linear-gradient(145deg, oklch(97% 0.04 283), oklch(94% 0.06 283));
  cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, background 0.25s ease, box-shadow 0.2s ease;
  font-size: clamp(10px, 2.5vw, 13px); font-weight: 700;
  display: grid; place-items: center; text-align: center; padding: 6px;
  box-sizing: border-box; line-height: 1.2; word-break: break-word;
}
.ss-memory-card:hover:not(.is-solved):not(.is-flipped) {
  transform: scale(1.04); border-color: var(--growth-bright);
  background: var(--growth-soft); box-shadow: 0 4px 14px oklch(72% 0.18 145 / 22%);
}
.ss-memory-card.is-flipped {
  background: var(--surface); color: var(--fg); border-color: var(--accent);
}
.ss-memory-card.is-solved {
  background: oklch(94% 0.09 145); color: oklch(38% 0.14 145);
  border-color: oklch(72% 0.18 145); cursor: default;
  animation: ssMemoryMatch 0.45s ease;
}
@keyframes ssMemoryMatch {
  0% { transform: scale(1); }
  45% { transform: scale(1.1); box-shadow: 0 0 0 4px oklch(72% 0.18 145 / 35%); }
  100% { transform: scale(1); }
}

.ss-recent-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ss-recent-tag {
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: var(--ease);
}
.ss-recent-tag:hover { border-color: var(--accent); background: var(--accent-soft); }

.ss-custom-topic-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.ss-custom-topic-inp {
  flex: 1; min-width: 200px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); font-size: 14px;
}

.ss-topic-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }

.ss-grade-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 560px; }
.ss-grade-grid .ss-choice-icon {
  width: 48px;
  height: 48px;
  overflow: visible;
}
.ss-grade-grid .ss-choice-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  overflow: visible;
}
@media (max-width: 480px) { .ss-grade-grid { grid-template-columns: 1fr; } }

.ss-page-toolbar .ss-quiz-counter { margin-right: 4px; }

.ss-hidden { display: none; }

/* ── Dark theme component overrides ── */
[data-theme="dark"] .ss-login-screen {
  background: oklch(4% 0.01 265);
}
[data-theme="dark"] .ss-login-screen::before {
  background:
    radial-gradient(ellipse 75% 55% at 88% 6%, oklch(58% 0.22 283 / 38%), transparent 58%),
    radial-gradient(ellipse 60% 48% at 6% 94%, oklch(52% 0.18 155 / 30%), transparent 52%);
}
[data-theme="dark"] .ss-login-logo {
  background: linear-gradient(145deg, oklch(72% 0.22 283), oklch(58% 0.2 283));
  box-shadow: 0 8px 32px oklch(68% 0.2 283 / 45%), 0 0 0 1px oklch(72% 0.22 283 / 25%);
}
[data-theme="dark"] .ss-login-card {
  border-color: oklch(38% 0.1 283);
  box-shadow:
    0 4px 28px oklch(68% 0.2 283 / 18%),
    0 12px 40px oklch(0% 0 0 / 55%),
    0 0 0 1px oklch(48% 0.14 283 / 35%);
}
[data-theme="dark"] .ss-btn-primary {
  background: linear-gradient(145deg, oklch(78% 0.26 283), oklch(64% 0.24 283));
  box-shadow:
    0 4px 20px oklch(68% 0.24 283 / 48%),
    0 0 0 1px oklch(72% 0.24 283 / 40%);
}
[data-theme="dark"] .ss-btn-primary:hover {
  box-shadow:
    0 8px 28px oklch(68% 0.24 283 / 58%),
    0 0 0 1px oklch(78% 0.26 283 / 50%);
}
[data-theme="dark"] .ss-login-actions .ss-btn-primary {
  background: linear-gradient(145deg, oklch(76% 0.24 283), oklch(62% 0.22 283));
  box-shadow:
    0 4px 20px oklch(68% 0.22 283 / 42%),
    0 0 0 1px oklch(72% 0.22 283 / 35%);
}
[data-theme="dark"] .ss-login-actions .ss-btn-primary:hover {
  box-shadow:
    0 8px 28px oklch(68% 0.22 283 / 52%),
    0 0 0 1px oklch(76% 0.24 283 / 45%);
}
[data-theme="dark"] .ss-login-actions .ss-btn-guest {
  border-color: oklch(42% 0.14 155);
  background: linear-gradient(180deg, oklch(18% 0.08 155), oklch(14% 0.07 155));
  color: oklch(78% 0.18 155);
  box-shadow: 0 2px 12px oklch(68% 0.15 155 / 22%);
}
[data-theme="dark"] .ss-login-actions .ss-btn-guest:hover {
  border-color: oklch(52% 0.16 155);
  box-shadow: 0 4px 20px oklch(68% 0.15 155 / 32%);
}
[data-theme="dark"] .ss-lang-btn {
  border-color: oklch(34% 0.06 283);
  background: oklch(14% 0.022 265);
  color: var(--fg);
}
[data-theme="dark"] .ss-lang-btn:hover {
  border-color: oklch(52% 0.16 283);
  background: oklch(20% 0.08 283);
  color: var(--accent-bright);
}
[data-theme="dark"] .ss-lang-drop {
  background: oklch(14% 0.022 265);
  border-color: oklch(34% 0.08 283);
  box-shadow: 0 12px 40px oklch(0% 0 0 / 55%), 0 0 0 1px oklch(48% 0.12 283 / 30%);
}
[data-theme="dark"] .ss-modal-overlay {
  background: oklch(4% 0.01 265 / 72%);
}
[data-theme="dark"] .ss-modal-box {
  border-color: oklch(36% 0.1 283);
  box-shadow:
    0 20px 56px oklch(0% 0 0 / 62%),
    0 0 0 1px oklch(48% 0.14 283 / 35%),
    0 0 48px oklch(68% 0.2 283 / 12%);
}
[data-theme="dark"] .ss-input-wrap {
  background: oklch(11% 0.016 265);
  border-color: oklch(30% 0.04 283);
}
[data-theme="dark"] .ss-input-wrap:focus-within {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
[data-theme="dark"] .ss-login-error.is-visible {
  background: oklch(18% 0.06 25);
  border-color: oklch(32% 0.1 25);
  color: oklch(78% 0.12 25);
}
[data-theme="dark"] .ss-guest-tag {
  background: oklch(20% 0.08 155);
  border-color: oklch(38% 0.12 155);
  color: var(--growth-bright);
}
[data-theme="dark"] .ss-lang-item.is-active {
  background: var(--accent-pill);
  color: var(--accent-bright);
}
[data-theme="dark"] .ss-ask-drawer {
  box-shadow: -12px 0 48px oklch(0% 0 0 / 45%), -4px 0 16px oklch(54% 0.19 283 / 10%);
}
[data-theme="dark"] .ss-ask-bubble--user {
  background: linear-gradient(145deg, var(--accent-bright), var(--accent));
  color: oklch(99% 0 0);
  box-shadow: 0 2px 10px oklch(54% 0.19 283 / 30%);
}
[data-theme="dark"] .ss-ask-ai-avatar {
  background: linear-gradient(145deg, oklch(52% 0.22 283), oklch(38% 0.18 283));
  border-color: oklch(58% 0.2 283 / 50%);
  box-shadow: 0 2px 12px oklch(68% 0.22 283 / 35%);
  color: oklch(98% 0 0);
}
[data-theme="dark"] .ss-ask-welcome-icon {
  background: linear-gradient(145deg, oklch(52% 0.22 283), oklch(38% 0.18 283));
  border-color: oklch(58% 0.2 283 / 45%);
  box-shadow: 0 4px 18px oklch(68% 0.22 283 / 32%);
  color: oklch(98% 0 0);
}
[data-theme="dark"] .ss-ask-input-row {
  box-shadow: inset 0 1px 2px oklch(0% 0 0 / 20%);
}
[data-theme="dark"] .ss-lesson-screen,
[data-theme="dark"] .ss-quiz-screen,
[data-theme="dark"] .ss-result-screen {
  background: linear-gradient(165deg, oklch(10% 0.012 265), oklch(8% 0.01 283));
}
[data-theme="dark"] .ss-lib-item {
  background: var(--card-bg);
  border-color: var(--border);
}
[data-theme="dark"] .ss-lib-icon {
  background: var(--icon-tile);
  color: var(--accent-bright);
}
[data-theme="dark"] .ss-material-empty {
  background: oklch(12% 0.016 265);
  border-color: var(--border);
}
[data-theme="dark"] .ss-coach-hero {
  background: linear-gradient(145deg, oklch(18% 0.08 283) 0%, oklch(14% 0.06 283) 100%);
  border-color: oklch(34% 0.1 283);
}
[data-theme="dark"] .ss-coach-progress-bar {
  background: oklch(18% 0.02 265);
}
[data-theme="dark"] .ss-coach-score-ring {
  background: conic-gradient(var(--growth-bright) 0deg, var(--growth-bright) 252deg, oklch(18% 0.02 265) 252deg);
}
[data-theme="dark"] .ss-coach-score-inner {
  background: oklch(14% 0.018 265);
}
[data-theme="dark"] .ss-quiz-opt {
  background: var(--card-bg);
  border-color: var(--border);
}
[data-theme="dark"] .ss-quiz-opt:hover {
  border-color: oklch(48% 0.12 283);
  background: oklch(16% 0.04 283);
}
[data-theme="dark"] .ss-quiz-opt.is-selected {
  border-color: var(--accent-bright);
  background: var(--accent-soft);
}
[data-theme="dark"] .ss-quiz-opt.is-correct {
  border-color: var(--growth-bright);
  background: var(--growth-soft);
}
[data-theme="dark"] .ss-quiz-opt.is-wrong {
  border-color: oklch(58% 0.14 25);
  background: oklch(18% 0.06 25);
}
[data-theme="dark"] .ss-lesson-card {
  background: var(--card-bg);
  border-color: var(--border);
}
[data-theme="dark"] .ss-result-card {
  background: var(--card-bg);
  border-color: var(--border);
}
[data-theme="dark"] .ss-game-host {
  background: var(--card-bg);
  border-color: var(--border);
}
[data-theme="dark"] .ss-hangman-key {
  background: oklch(14% 0.018 265);
  border-color: var(--border);
}
[data-theme="dark"] .ss-hangman-key:hover {
  background: var(--accent-soft);
  border-color: oklch(42% 0.12 283);
}
[data-theme="dark"] .ss-wordle-cell.filled {
  border-color: oklch(38% 0.04 265);
  background: oklch(14% 0.018 265);
}
[data-theme="dark"] .ss-memory-card {
  background: linear-gradient(145deg, oklch(18% 0.06 283), oklch(14% 0.05 283));
  color: var(--accent-bright);
}
[data-theme="dark"] .ss-memory-card.is-flipped {
  background: oklch(14% 0.018 265);
  color: var(--fg);
  border-color: var(--accent);
}
[data-theme="dark"] .ss-memory-card.is-solved {
  background: oklch(22% 0.08 145);
  color: oklch(82% 0.16 145);
  border-color: oklch(58% 0.16 145);
}
[data-theme="dark"] .ss-memory-card:hover:not(.is-solved):not(.is-flipped) {
  background: oklch(20% 0.07 145);
  border-color: var(--growth-bright);
}
[data-theme="dark"] .ss-recent-tag {
  background: oklch(14% 0.018 265);
  border-color: var(--border);
}
[data-theme="dark"] .ss-custom-topic-inp,
[data-theme="dark"] .ss-coach-inp,
[data-theme="dark"] .ss-coach-answer {
  background: oklch(12% 0.016 265);
  border-color: var(--border);
  color: var(--fg);
}
[data-theme="dark"] .ss-tf-btn {
  background: var(--card-bg);
  border-color: var(--border);
}
[data-theme="dark"] .ss-tf-btn.is-correct {
  border-color: var(--growth-bright);
  background: var(--growth-soft);
}
[data-theme="dark"] .ss-tf-btn.is-wrong {
  border-color: oklch(58% 0.14 25);
  background: oklch(18% 0.06 25);
}
[data-theme="dark"] .streak-nav-badge {
  background: linear-gradient(135deg, oklch(28% 0.14 155) 0%, oklch(20% 0.12 155) 100%);
  color: var(--growth-bright);
  border-color: oklch(52% 0.16 155);
  box-shadow: 0 3px 20px oklch(72% 0.2 155 / 42%);
}
[data-theme="dark"] .ss-mode-screen::before {
  background: radial-gradient(circle, oklch(42% 0.16 283 / 55%) 0%, transparent 68%);
}
[data-theme="dark"] .ss-mode-screen::after {
  background: radial-gradient(circle, oklch(40% 0.14 155 / 48%) 0%, transparent 68%);
}
[data-theme="dark"] .ss-nav-icon--material {
  background: var(--icon-tile-neutral);
  color: oklch(72% 0.02 265);
}
[data-theme="dark"] .ss-nav-icon--logout {
  background: linear-gradient(145deg, #334155 0%, #1e293b 100%);
  color: #94a3b8;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
}
[data-theme="dark"] .ss-v2-logout-btn:hover .ss-nav-icon--logout {
  background: linear-gradient(145deg, #3d4f66 0%, #243044 100%);
  color: #cbd5e1;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.45);
}
[data-theme="dark"] .ss-choice-icon--lvl1 {
  background: var(--icon-tile-green);
}
[data-theme="dark"] .ss-choice-icon--lvl2 {
  background: var(--icon-tile);
}
[data-theme="dark"] .ss-nav-icon--home,
[data-theme="dark"] .ss-nav-icon--ask,
[data-theme="dark"] .ss-nav-icon--coach {
  background: var(--icon-tile);
}
[data-theme="dark"] .ss-page-toolbar .ss-topbar-controls { margin-left: auto; }

/* App dark mode — vibrant accents (excludes login) */
[data-theme="dark"] .ss-v2-screen .ss-pill,
[data-theme="dark"] .ss-study-screen .ss-pill,
[data-theme="dark"] .ss-game-screen .ss-pill {
  background: var(--accent-soft);
  color: var(--accent-bright);
  border-color: oklch(52% 0.14 283);
}
[data-theme="dark"] .ss-v2-screen .ss-breadcrumb,
[data-theme="dark"] .ss-study-screen .ss-breadcrumb,
[data-theme="dark"] .ss-game-screen .ss-breadcrumb {
  color: var(--accent-bright);
}
[data-theme="dark"] .ss-v2-screen .ss-back-btn:hover,
[data-theme="dark"] .ss-study-screen .ss-back-btn:hover,
[data-theme="dark"] .ss-game-screen .ss-back-btn:hover {
  border-color: oklch(58% 0.16 283);
  background: var(--accent-soft);
  color: var(--accent-bright);
}
[data-theme="dark"] .ss-lib-item:hover,
[data-theme="dark"] .ss-choice-card:hover {
  border-color: oklch(58% 0.16 283);
  box-shadow: 0 6px 22px oklch(68% 0.22 283 / 22%);
}
[data-theme="dark"] .ss-lib-icon {
  background: var(--icon-tile);
  color: var(--accent-bright);
  box-shadow: 0 2px 8px oklch(68% 0.2 283 / 22%);
}
[data-theme="dark"] .ss-coach-hero {
  background: linear-gradient(145deg, oklch(38% 0.2 283) 0%, oklch(28% 0.16 283) 100%);
  border-color: oklch(52% 0.16 283);
  box-shadow: 0 8px 28px oklch(68% 0.22 283 / 28%);
}
[data-theme="dark"] .ss-material-hero {
  background: linear-gradient(145deg, oklch(42% 0.2 283) 0%, oklch(32% 0.17 283) 100%);
  border-color: oklch(52% 0.16 283);
  box-shadow: 0 6px 24px oklch(68% 0.22 283 / 26%);
}
[data-theme="dark"] .ss-ask-drawer-header {
  border-bottom-color: oklch(38% 0.08 283);
}
[data-theme="dark"] .ss-ask-chip {
  border-color: oklch(38% 0.1 283);
  background: var(--accent-soft);
  color: var(--accent-bright);
}
[data-theme="dark"] .ss-ask-chip:hover {
  border-color: oklch(58% 0.16 283);
  background: oklch(32% 0.14 283);
  box-shadow: 0 2px 10px oklch(68% 0.22 283 / 24%);
}
[data-theme="dark"] .ss-quiz-opt.is-selected {
  border-color: var(--accent-bright);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px oklch(72% 0.22 283 / 35%);
}
[data-theme="dark"] .ss-quiz-opt.is-correct {
  border-color: var(--growth-bright);
  background: var(--growth-soft);
  box-shadow: 0 0 0 1px oklch(68% 0.18 155 / 35%);
}
[data-theme="dark"] .ss-coach-progress-fill {
  background: linear-gradient(90deg, var(--growth-bright), var(--accent-bright));
  box-shadow: 0 0 12px oklch(68% 0.18 155 / 40%);
}
[data-theme="dark"] .ss-premium-stat--hi {
  background: var(--accent-soft);
  border-color: oklch(52% 0.14 283);
}
[data-theme="dark"] .ss-premium-stat--hi .ss-premium-stat-val {
  color: var(--accent-bright);
}

/* ── Ship polish: focus, motion, interaction ── */
.ss-focus-ring:focus { outline: none; }
.ss-focus-ring:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ss-btn-primary:focus-visible,
.ss-btn-outline:focus-visible,
.ss-btn-premium:focus-visible,
.ss-back-btn:focus-visible,
.ss-theme-toggle:focus-visible,
.ss-lang-btn:focus-visible,
.ss-mobile-menu-btn:focus-visible,
.ss-v2-nav-item:focus-visible,
.ss-v2-brand:focus-visible,
.ss-choice-card:focus-visible,
.ss-level-card:focus-visible,
.ss-game-card:focus-visible,
.ss-mode-pick:focus-visible,
.ss-mode-btn:focus-visible,
.ss-modal-close:focus-visible,
.ss-ask-drawer-close:focus-visible,
.ss-ask-chip:focus-visible,
.ss-ask-send:focus-visible,
.ss-ask-recent-item:focus-visible,
.ss-lib-item:focus-visible,
.ss-material-hero:focus-visible,
.ss-quiz-opt:focus-visible,
.ss-tf-btn:focus-visible,
.ss-lang-item:focus-visible,
.ss-eye-btn:focus-visible,
.streak-nav-badge:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.ss-lang-btn[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-bright);
}

.ss-modal-overlay.is-open,
.ss-ask-drawer.is-open {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ss-choice-card:hover,
  .ss-level-card:hover,
  .ss-game-card:hover,
  .ss-mode-pick:hover,
  .ss-btn-primary:hover,
  .ss-btn-outline:hover,
  .ss-v2-nav-item:hover {
    transform: none;
  }
}

body.ss-scroll-lock { overflow: hidden; }

.ss-ask-drawer {
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.ss-modal-overlay {
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

@media (max-width: 900px) {
  .ss-study-screen:has(.ss-v2-sidebar) .page,
  .ss-game-screen:not(.ss-game-screen--solo) .page {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }
  .ss-study-screen .page,
  .ss-game-screen .page {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    display: block;
    align-items: stretch;
  }
  .ss-study-screen .page > *,
  .ss-game-screen .page > * {
    max-width: 100%;
  }
  .ss-study-screen .ss-v2-page-title,
  .ss-study-screen .page-lead,
  .ss-study-screen .ss-title-accent {
    text-align: center;
    margin-inline: auto;
  }
  .ss-study-screen .ss-search-wrap,
  .ss-study-screen .ss-grade-grid,
  .ss-study-screen .ss-levels-grid,
  .ss-study-screen .ss-lab-grid {
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .ss-premium-stats { grid-template-columns: 1fr; }
  .ss-premium-limits-head, .ss-premium-limits-row {
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    font-size: 12px;
    padding: 8px 10px;
  }
  .ss-ask-drawer { width: 100vw; }
  .ss-modal-box { padding: 22px 18px; border-radius: 14px; }
}

.ss-play-topic-inp {
  background: var(--input-bg);
  color: var(--fg);
}
.ss-play-topic-inp:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow), var(--shadow-card);
}

[data-theme="dark"] .ss-coach-hero {
  color: var(--fg);
}
[data-theme="dark"] .ss-reading-bar {
  background: oklch(18% 0.02 265);
}

.ss-material-hero svg { flex-shrink: 0; }
.ss-coach-chip:focus-visible,
.ss-coach-diff-btn:focus-visible,
.ss-recent-tag:focus-visible,
.ss-hangman-key:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

:root {
      --bg: oklch(97.8% 0.008 265);
      --surface: oklch(100% 0 0);
      --canvas: oklch(96.5% 0.012 265);
      --fg: oklch(20% 0.025 265);
      --muted: oklch(50% 0.018 265);
      --border: oklch(88% 0.01 265);
      --accent: oklch(54% 0.19 283);
      --accent-bright: oklch(58% 0.21 283);
      --accent-soft: oklch(95% 0.05 283);
      --accent-glow: oklch(54% 0.19 283 / 22%);
      --accent-pill: oklch(54% 0.19 283 / 14%);
      --growth: oklch(58% 0.16 155);
      --growth-bright: oklch(62% 0.18 155);
      --growth-soft: oklch(95% 0.06 155);
      --violet: oklch(52% 0.18 275);
      --amber: oklch(68% 0.16 75);
      --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
      --font-body: 'Inter', system-ui, sans-serif;
      --sidebar-w: 256px;
      --ease: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      --shadow-xs: 0 1px 2px oklch(0% 0 0 / 5%), 0 0 0 1px oklch(0% 0 0 / 3%);
      --shadow-card: 0 1px 3px oklch(0% 0 0 / 4%), 0 4px 20px oklch(54% 0.19 283 / 5%), 0 0 0 1px oklch(88% 0.01 265);
      --shadow-lift: 0 4px 20px oklch(54% 0.19 283 / 12%), 0 12px 32px oklch(0% 0 0 / 8%), 0 0 0 1px oklch(80% 0.06 283 / 70%);
      --shadow-float: 0 16px 40px oklch(0% 0 0 / 10%), 0 4px 12px oklch(54% 0.19 283 / 6%);
      --shadow-sidebar: 6px 0 32px oklch(54% 0.19 283 / 6%), 1px 0 0 oklch(88% 0.01 265);
      --card-bg: linear-gradient(145deg, oklch(100% 0 0) 0%, oklch(99% 0.004 265) 100%);
      --sidebar-bg: linear-gradient(180deg, oklch(100% 0 0) 0%, oklch(98.5% 0.008 283) 55%, oklch(98% 0.01 265) 100%);
      --input-bg: linear-gradient(180deg, oklch(100% 0 0) 0%, oklch(99.5% 0.002 265) 100%);
      --main-panel-bg: linear-gradient(180deg, oklch(99.5% 0.006 265) 0%, oklch(98.8% 0.008 283) 40%, oklch(98.2% 0.01 265) 100%);
      --footer-fade: linear-gradient(180deg, transparent 0%, oklch(99% 0.006 283 / 80%) 30%);
      --overlay-surface: linear-gradient(165deg, oklch(100% 0 0), oklch(98.5% 0.006 283));
      --drawer-bg: linear-gradient(180deg, oklch(99.5% 0.004 265) 0%, oklch(98% 0.008 283) 100%);
      --drawer-header-bg: linear-gradient(180deg, var(--surface), oklch(99.2% 0.006 283));
      --drawer-chips-bg: oklch(99% 0.004 265);
      --drawer-input-bg: oklch(99.5% 0.002 265);
      --btn-ghost-bg: linear-gradient(180deg, var(--surface), oklch(99% 0.004 265));
      --login-card-bg: linear-gradient(168deg, oklch(100% 0 0) 0%, oklch(98.8% 0.008 283) 100%);
      --material-hero-bg: linear-gradient(145deg, oklch(97% 0.05 283), oklch(94% 0.08 283));
      --material-hero-color: var(--accent-bright);
      --mode-tab-active: linear-gradient(145deg, oklch(100% 0 0) 0%, oklch(97% 0.04 283) 100%);
    }

    [data-theme="dark"] {
      color-scheme: dark;
      --bg: oklch(8% 0.018 265);
      --surface: oklch(14% 0.028 265);
      --surface-raised: oklch(17% 0.032 265);
      --canvas: oklch(10% 0.02 265);
      --fg: oklch(97% 0.008 265);
      --muted: oklch(72% 0.022 265);
      --border: oklch(34% 0.06 285);
      --accent: oklch(78% 0.32 285);
      --accent-bright: oklch(86% 0.34 285);
      --accent-soft: oklch(28% 0.18 285);
      --accent-glow: oklch(78% 0.32 285 / 58%);
      --accent-pill: oklch(78% 0.32 285 / 32%);
      --growth: oklch(82% 0.28 155);
      --growth-bright: oklch(88% 0.30 155);
      --growth-soft: oklch(26% 0.16 155);
      --violet: oklch(80% 0.28 300);
      --amber: oklch(84% 0.22 75);
      --shadow-xs: 0 1px 2px oklch(0% 0 0 / 40%);
      --shadow-card: 0 2px 12px oklch(0% 0 0 / 48%), 0 0 0 1px oklch(30% 0.04 285), 0 0 20px oklch(68% 0.28 285 / 8%);
      --shadow-lift: 0 8px 32px oklch(72% 0.30 285 / 28%), 0 12px 36px oklch(0% 0 0 / 55%), 0 0 0 1px oklch(72% 0.26 285 / 38%);
      --shadow-float: 0 20px 52px oklch(0% 0 0 / 60%), 0 8px 28px oklch(72% 0.28 285 / 16%);
      --shadow-sidebar: 6px 0 40px oklch(0% 0 0 / 52%), 1px 0 0 oklch(28% 0.05 285);
      --card-bg: linear-gradient(145deg, oklch(17% 0.028 265) 0%, oklch(13% 0.022 285) 100%);
      --sidebar-bg: linear-gradient(180deg, oklch(13% 0.022 265) 0%, oklch(10% 0.02 285) 55%, oklch(8% 0.018 265) 100%);
      --input-bg: oklch(14% 0.022 265);
      --main-panel-bg: linear-gradient(180deg, oklch(11% 0.018 265) 0%, oklch(8% 0.016 285) 50%, oklch(7% 0.014 265) 100%);
      --footer-fade: linear-gradient(180deg, transparent 0%, oklch(8% 0.018 285 / 94%) 30%);
      --icon-tile: linear-gradient(145deg, oklch(38% 0.24 285) 0%, oklch(22% 0.18 285) 100%);
      --icon-tile-green: linear-gradient(145deg, oklch(38% 0.22 155) 0%, oklch(22% 0.17 155) 100%);
      --icon-tile-violet: linear-gradient(145deg, oklch(38% 0.22 300) 0%, oklch(22% 0.16 300) 100%);
      --icon-tile-neutral: linear-gradient(145deg, oklch(18% 0.024 265) 0%, oklch(14% 0.02 265) 100%);
      --overlay-surface: linear-gradient(165deg, oklch(16% 0.026 265), oklch(10% 0.02 285));
      --drawer-bg: linear-gradient(180deg, oklch(14% 0.024 265) 0%, oklch(9% 0.018 285) 100%);
      --drawer-header-bg: linear-gradient(180deg, oklch(16% 0.026 265), oklch(12% 0.02 285));
      --drawer-chips-bg: oklch(10% 0.016 265);
      --drawer-input-bg: oklch(8% 0.014 265);
      --btn-ghost-bg: oklch(14% 0.022 265);
      --login-card-bg: linear-gradient(168deg, oklch(15% 0.026 265) 0%, oklch(10% 0.02 285) 100%);
      --material-hero-bg: linear-gradient(145deg, oklch(52% 0.24 285), oklch(40% 0.20 285));
      --material-hero-color: oklch(98% 0 0);
      --mode-tab-active: linear-gradient(145deg, oklch(28% 0.16 285) 0%, oklch(16% 0.12 285) 100%);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; width: 100%; overflow-x: hidden; }
    body {
      font-family: var(--font-body);
      background:
        radial-gradient(ellipse 80% 60% at 10% -10%, oklch(96% 0.04 283 / 45%), transparent 55%),
        radial-gradient(ellipse 60% 50% at 95% 100%, oklch(96% 0.05 155 / 35%), transparent 50%),
        linear-gradient(180deg, oklch(98.5% 0.006 265) 0%, oklch(97.8% 0.004 250) 100%);
      color: var(--fg);
      -webkit-font-smoothing: antialiased;
      transition: background 0.3s ease, color 0.25s ease;
    }
    [data-theme="dark"] body {
      background:
        radial-gradient(ellipse 70% 55% at 10% -5%, oklch(58% 0.30 285 / 38%), transparent 58%),
        radial-gradient(ellipse 60% 50% at 95% 105%, oklch(62% 0.28 155 / 32%), transparent 52%),
        radial-gradient(ellipse 45% 40% at 85% 15%, oklch(65% 0.26 330 / 20%), transparent 50%),
        linear-gradient(180deg, oklch(8% 0.018 265) 0%, oklch(5% 0.012 265) 100%);
      transition: color 0.2s ease;
    }
    button, a { font-family: inherit; }
    .screen { display: none !important; min-height: 100vh; width: 100%; visibility: hidden; }
    .screen.active:not(.ss-login-screen):not(.ss-mode-screen) { display: block !important; visibility: visible; }
    #screen-login.active, #screen-mode.active {
      display: flex !important;
      visibility: visible;
      position: fixed;
      inset: 0;
      z-index: 600;
      width: 100%;
      min-height: 100vh;
      min-height: 100dvh;
    }
    #screen-login.active {
      background:
        radial-gradient(ellipse 75% 55% at 88% 8%, oklch(93% 0.09 283 / 42%), transparent 58%),
        radial-gradient(ellipse 60% 50% at 8% 92%, oklch(93% 0.1 155 / 32%), transparent 52%),
        linear-gradient(180deg, oklch(98.5% 0.006 265) 0%, oklch(97.8% 0.004 250) 100%);
    }
    [data-theme="dark"] #screen-login.active {
      background:
        radial-gradient(ellipse 70% 55% at 10% -5%, oklch(52% 0.2 283 / 32%), transparent 58%),
        radial-gradient(ellipse 60% 50% at 95% 105%, oklch(48% 0.18 155 / 26%), transparent 52%),
        linear-gradient(180deg, oklch(8% 0.014 265) 0%, oklch(5% 0.01 265) 100%);
    }
    .ss-v2-screen { position: relative; min-height: 100vh; width: 100%; }
    .ss-v2-screen::before {
      content: '';
      position: fixed;
      inset: var(--sidebar-w) 0 0 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 70% 55% at 85% 8%, oklch(94% 0.07 283 / 35%), transparent 55%),
        radial-gradient(ellipse 55% 45% at 10% 92%, oklch(94% 0.08 155 / 28%), transparent 50%),
        repeating-radial-gradient(circle at 1px 1px, oklch(88% 0.01 265 / 35%) 0 1px, transparent 1px 28px);
      opacity: 0.7;
      transition: opacity 0.3s ease;
    }
    [data-theme="dark"] .ss-v2-screen::before {
      background:
        radial-gradient(ellipse 65% 50% at 85% 8%, oklch(52% 0.22 283 / 32%), transparent 55%),
        radial-gradient(ellipse 50% 40% at 10% 92%, oklch(48% 0.18 155 / 24%), transparent 50%);
      opacity: 1;
    }

    /* ── Theme toggle ── */
    .ss-topbar-controls {
      display: flex; align-items: center; gap: 8px;
      margin-left: auto;
    }
    .ss-theme-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--btn-ghost-bg);
      color: var(--muted);
      cursor: pointer;
      transition: var(--ease);
      box-shadow: var(--shadow-xs);
      flex-shrink: 0;
    }
    .ss-theme-toggle:hover {
      color: var(--accent-bright);
      border-color: oklch(72% 0.12 283);
      transform: scale(1.05);
      box-shadow: var(--shadow-card);
      background: var(--accent-soft);
    }
    [data-theme="dark"] .ss-theme-toggle:hover {
      border-color: oklch(48% 0.12 283);
    }
    .ss-theme-toggle:active { transform: scale(0.98); }
    .ss-theme-toggle .ss-theme-icon { display: block; }
    .ss-theme-toggle .ss-theme-icon--sun { display: none; }
    [data-theme="dark"] .ss-theme-toggle .ss-theme-icon--moon { display: none; }
    [data-theme="dark"] .ss-theme-toggle .ss-theme-icon--sun { display: block; color: var(--amber); }
    .ss-theme-toggle--sidebar { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }
    .ss-sidebar-theme-row {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 8px;
      margin-bottom: 0;
    }
    .ss-sidebar-theme-label {
      font-size: 13px; font-weight: 500;
      color: var(--muted);
      letter-spacing: 0.02em;
    }
    .ss-corner-controls {
      display: flex; align-items: center; gap: 8px;
    }
    .ss-mode-theme-corner {
      position: absolute;
      top: 24px; right: 24px;
      z-index: 2;
    }

    /* ── Mode picker (screen-mode) ── */
    .ss-mode-screen {
      display: none;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100vh;
      min-height: 100dvh;
      padding: 48px 24px;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
    }
    .ss-mode-screen::before {
      content: '';
      position: absolute;
      width: 480px; height: 480px;
      top: -120px; right: -80px;
      background: radial-gradient(circle, oklch(94% 0.06 283 / 50%) 0%, transparent 70%);
      pointer-events: none;
    }
    .ss-mode-screen::after {
      content: '';
      position: absolute;
      width: 360px; height: 360px;
      bottom: -80px; left: -60px;
      background: radial-gradient(circle, oklch(94% 0.06 155 / 40%) 0%, transparent 70%);
      pointer-events: none;
    }
    .ss-mode-screen.active { display: flex; }
    .ss-mode-wrap {
      width: min(520px, 100%);
      flex: 0 0 auto;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    .ss-mode-brand {
      display: flex; align-items: center; justify-content: flex-start; gap: 10px;
      margin-bottom: 40px;
      cursor: pointer;
      transition: var(--ease);
    }
    .ss-mode-brand:hover { opacity: 0.85; transform: scale(1.02); }
    .ss-mode-brand svg {
      color: var(--accent);
      filter: drop-shadow(0 2px 6px oklch(56% 0.17 283 / 25%));
    }
    .ss-mode-logo {
      font-family: var(--font-display);
      font-size: 20px; font-weight: 700;
      letter-spacing: -0.02em;
    }
    .ss-mode-title {
      font-family: var(--font-display);
      font-size: clamp(28px, 5vw, 36px);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.15;
      margin-bottom: 10px;
    }
    .ss-mode-sub {
      color: var(--muted);
      font-size: 16px;
      line-height: 1.55;
      max-width: 42ch;
      margin-bottom: 28px;
    }
    .ss-mode-cards {
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding-bottom: 28px;
    }
    .ss-mode-pick {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .ss-mode-pick::before {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 52%;
      border-radius: 0 0 13px 13px;
      pointer-events: none;
      opacity: 0.62;
      transition: var(--ease);
      z-index: 0;
    }
    .ss-mode-pick--play::before {
      background: linear-gradient(180deg, transparent 0%, oklch(58% 0.2 155 / 32%) 100%);
    }
    .ss-mode-pick--study::before {
      background: linear-gradient(180deg, transparent 0%, oklch(54% 0.22 283 / 36%) 100%);
    }
    .ss-mode-pick--play {
      background: linear-gradient(148deg, oklch(99.5% 0.02 155) 0%, oklch(97% 0.05 155) 52%, oklch(94% 0.08 155) 100%);
      border: 1px solid oklch(76% 0.12 155);
      border-bottom: 2px solid oklch(58% 0.18 155);
      box-shadow:
        var(--shadow-card),
        0 8px 28px oklch(52% 0.18 155 / 16%),
        inset 0 1px 0 oklch(100% 0 0 / 70%);
    }
    .ss-mode-pick--study {
      background: linear-gradient(148deg, oklch(99.5% 0.02 283) 0%, oklch(97% 0.06 283) 52%, oklch(94% 0.09 283) 100%);
      border: 1px solid oklch(74% 0.14 283);
      border-bottom: 2px solid oklch(52% 0.2 283);
      box-shadow:
        var(--shadow-card),
        0 8px 28px oklch(48% 0.2 283 / 18%),
        inset 0 1px 0 oklch(100% 0 0 / 70%);
    }
    .ss-mode-pick--play .ss-choice-body,
    .ss-mode-pick--study .ss-choice-body,
    .ss-mode-pick--play .ss-choice-arrow,
    .ss-mode-pick--study .ss-choice-arrow,
    .ss-mode-pick--play .ss-mode-pick-icon,
    .ss-mode-pick--study .ss-mode-pick-icon {
      position: relative;
      z-index: 1;
    }
    .ss-mode-pick--play .ss-choice-arrow { color: oklch(48% 0.16 155); }
    .ss-mode-pick--study .ss-choice-arrow { color: oklch(48% 0.18 283); }
    .ss-mode-pick--play:hover::before { opacity: 0.78; }
    .ss-mode-pick--study:hover::before { opacity: 0.78; }
    .ss-mode-pick-icon--play {
      background: linear-gradient(145deg, oklch(92% 0.12 155) 0%, oklch(86% 0.16 155) 100%) !important;
      color: oklch(38% 0.14 155) !important;
      box-shadow: 0 4px 14px oklch(52% 0.18 155 / 32%) !important;
    }
    .ss-mode-pick-icon--study {
      background: linear-gradient(145deg, oklch(92% 0.12 283) 0%, oklch(86% 0.16 283) 100%) !important;
      color: oklch(38% 0.16 283) !important;
      box-shadow: 0 4px 14px oklch(48% 0.2 283 / 34%) !important;
    }
    .ss-mode-pick--play:hover .ss-mode-pick-icon--play {
      background: linear-gradient(145deg, oklch(90% 0.14 155) 0%, oklch(84% 0.18 155) 100%) !important;
      transform: scale(1.06);
      box-shadow: 0 6px 18px oklch(52% 0.18 155 / 40%) !important;
    }
    .ss-mode-pick--study:hover .ss-mode-pick-icon--study {
      background: linear-gradient(145deg, oklch(90% 0.14 283) 0%, oklch(84% 0.18 283) 100%) !important;
      transform: scale(1.06);
      box-shadow: 0 6px 18px oklch(48% 0.2 283 / 42%) !important;
    }
    .ss-mode-pick--play:hover {
      border-color: oklch(62% 0.16 155);
      border-bottom-color: oklch(52% 0.2 155);
      box-shadow: var(--shadow-lift), 0 10px 32px oklch(52% 0.18 155 / 22%);
      transform: translateY(-3px);
    }
    .ss-mode-pick--study:hover {
      border-color: oklch(58% 0.18 283);
      border-bottom-color: oklch(48% 0.22 283);
      box-shadow: var(--shadow-lift), 0 10px 32px oklch(48% 0.2 283 / 24%);
      transform: translateY(-3px);
    }
    .ss-mode-pick--play:hover .ss-choice-arrow { color: oklch(42% 0.18 155); transform: translateX(6px); }
    .ss-mode-pick--study:hover .ss-choice-arrow { color: oklch(42% 0.2 283); transform: translateX(6px); }

    /* ── Choice cards (shared) ── */
    .ss-choice-card {
      display: flex; align-items: center; gap: 14px;
      width: 100%; padding: 18px 20px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      color: var(--fg);
      cursor: pointer;
      text-align: left;
      box-shadow: var(--shadow-card);
      transition: var(--ease);
    }
    .ss-choice-card:not(.ss-mode-pick):hover {
      border-color: oklch(72% 0.12 283);
      box-shadow: var(--shadow-lift);
      transform: translateY(-4px);
    }
    .ss-mode-pick.ss-choice-card:hover {
      transform: translateY(-3px);
    }
    .ss-mode-pick--play.ss-choice-card:hover {
      border-color: oklch(62% 0.16 155);
      border-bottom-color: oklch(52% 0.2 155);
      box-shadow: var(--shadow-lift), 0 10px 32px oklch(52% 0.18 155 / 22%);
    }
    .ss-mode-pick--study.ss-choice-card:hover {
      border-color: oklch(58% 0.18 283);
      border-bottom-color: oklch(48% 0.22 283);
      box-shadow: var(--shadow-lift), 0 10px 32px oklch(48% 0.2 283 / 24%);
    }
    .ss-choice-card:active { transform: translateY(-1px) scale(0.99); }
    .ss-choice-icon {
      flex-shrink: 0;
      width: 44px; height: 44px;
      border-radius: 12px;
      display: grid; place-items: center;
      transition: var(--ease);
      overflow: visible;
    }
    .ss-choice-icon svg { overflow: visible; display: block; }
    .ss-choice-icon--play {
      background: linear-gradient(145deg, oklch(97% 0.05 283) 0%, oklch(94% 0.07 283) 100%);
      color: var(--accent);
      box-shadow: 0 2px 8px oklch(56% 0.17 283 / 12%);
    }
    .ss-choice-icon--study {
      background: linear-gradient(145deg, oklch(97% 0.05 155) 0%, oklch(94% 0.08 155) 100%);
      color: var(--growth);
      box-shadow: 0 2px 8px oklch(62% 0.14 155 / 12%);
    }
    .ss-choice-icon--lvl1 {
      background: linear-gradient(145deg, oklch(96% 0.06 155) 0%, oklch(92% 0.1 155) 100%);
      color: var(--growth-bright);
      box-shadow: 0 3px 10px oklch(58% 0.16 155 / 18%);
    }
    .ss-choice-icon--lvl2 {
      background: linear-gradient(145deg, oklch(96% 0.06 283) 0%, oklch(92% 0.1 283) 100%);
      color: var(--accent-bright);
      box-shadow: 0 3px 10px oklch(54% 0.19 283 / 20%);
    }
    .ss-choice-icon--lvl3 {
      background: linear-gradient(145deg, oklch(96% 0.06 275) 0%, oklch(91% 0.1 275) 100%);
      color: var(--violet);
      box-shadow: 0 3px 10px oklch(52% 0.18 275 / 18%);
    }
    .ss-choice-icon--lvl4 {
      background: linear-gradient(145deg, oklch(97% 0.06 75) 0%, oklch(93% 0.1 75) 100%);
      color: oklch(55% 0.14 75);
      box-shadow: 0 3px 10px oklch(68% 0.16 75 / 18%);
    }
    .ss-choice-card:hover .ss-choice-icon--play {
      background: linear-gradient(145deg, oklch(95% 0.07 283) 0%, oklch(92% 0.09 283) 100%);
      transform: scale(1.05);
    }
    .ss-choice-card:hover .ss-choice-icon--study {
      background: linear-gradient(145deg, oklch(95% 0.07 155) 0%, oklch(92% 0.1 155) 100%);
      transform: scale(1.05);
    }
    .ss-choice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .ss-choice-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; word-break: normal; overflow-wrap: normal; }
    .ss-choice-desc { font-size: 13px; color: var(--muted); line-height: 1.45; word-break: normal; overflow-wrap: normal; }
    .ss-choice-arrow {
      flex-shrink: 0;
      color: var(--muted);
      transition: var(--ease);
    }
    .ss-choice-arrow svg { display: block; }
    .ss-choice-card:hover .ss-choice-arrow { color: var(--accent); transform: translateX(5px); }
    .ss-mode-pick.ss-choice-card:hover .ss-choice-arrow { transform: translateX(6px); }
    .ss-mode-pick--play.ss-choice-card:hover .ss-choice-arrow { color: oklch(42% 0.18 155); }
    .ss-mode-pick--study.ss-choice-card:hover .ss-choice-arrow { color: oklch(42% 0.2 283); }

    /* ── Sidebar shell ── */
    .ss-v2-sidebar {
      position: fixed; left: 0; top: 0;
      width: var(--sidebar-w); height: 100%;
      display: flex; flex-direction: column;
      padding: 12px 12px 10px;
      background: var(--sidebar-bg);
      border-right: 1px solid var(--border);
      box-shadow: var(--shadow-sidebar);
      z-index: 50;
      overflow: hidden;
    }
    .ss-v2-sidebar > .ss-v2-brand,
    .ss-v2-sidebar > .ss-v2-profile-block,
    .ss-v2-sidebar > .ss-mode-switch { flex-shrink: 0; }
    .ss-v2-brand {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-display);
      font-size: 16px; font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
      cursor: pointer;
      transition: var(--ease);
      border: none; background: none; color: var(--fg);
      padding: 4px 6px;
      margin-left: -8px;
      border-radius: 10px;
    }
    .ss-v2-brand:hover {
      color: var(--accent);
      background: oklch(56% 0.17 283 / 8%);
      transform: scale(1.02);
    }
    .ss-v2-brand svg {
      color: var(--accent);
      filter: drop-shadow(0 1px 4px oklch(56% 0.17 283 / 20%));
    }
    .ss-v2-profile-block { margin-bottom: 4px; padding: 0 2px; }
    .ss-play-profile-block { margin-bottom: 4px; }
    .ss-v2-profile-block p:first-child { font-weight: 600; font-size: 13px; line-height: 1.3; }
    .ss-v2-profile-block p:last-child { font-size: 11px; color: var(--muted); margin-top: 1px; line-height: 1.3; }
    .ss-v2-nav-list {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      overflow: visible;
      margin: 0 -4px;
      padding: 0 4px;
    }
    .ss-v2-nav-section { display: flex; flex-direction: column; gap: 1px; }
    .ss-v2-nav-section-line {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
      margin: 5px 0;
    }
    .ss-v2-nav-spacer { display: none; }
    .ss-nav-icon {
      flex-shrink: 0;
      width: 28px; height: 28px;
      border-radius: 8px;
      display: grid; place-items: center;
      transition: var(--ease);
    }
    .ss-nav-icon svg { display: block; }
    .ss-nav-icon--home { background: linear-gradient(145deg, oklch(96% 0.06 283) 0%, oklch(93% 0.09 283) 100%); color: var(--accent-bright); box-shadow: 0 2px 6px oklch(54% 0.19 283 / 14%); }
    .ss-nav-icon--library { background: linear-gradient(145deg, oklch(96% 0.05 275) 0%, oklch(92% 0.08 275) 100%); color: var(--violet); box-shadow: 0 2px 6px oklch(52% 0.18 275 / 12%); }
    .ss-nav-icon--material { background: linear-gradient(145deg, oklch(96% 0.04 265) 0%, oklch(93% 0.06 265) 100%); color: oklch(45% 0.04 265); box-shadow: 0 2px 6px oklch(0% 0 0 / 6%); }
    .ss-nav-icon--ask { background: linear-gradient(145deg, oklch(96% 0.06 283) 0%, oklch(92% 0.1 283) 100%); color: var(--accent-bright); box-shadow: 0 2px 8px oklch(54% 0.19 283 / 16%); }
    .ss-nav-icon--coach { background: linear-gradient(145deg, oklch(95% 0.07 283) 0%, oklch(91% 0.11 283) 100%); color: oklch(48% 0.2 283); box-shadow: 0 2px 8px oklch(54% 0.19 283 / 18%); }
    .ss-nav-icon--premium { background: linear-gradient(145deg, oklch(97% 0.06 75) 0%, oklch(93% 0.1 75) 100%); color: oklch(52% 0.14 75); box-shadow: 0 2px 6px oklch(68% 0.16 75 / 16%); }
    .ss-nav-icon--donate { background: linear-gradient(145deg, oklch(97% 0.05 15) 0%, oklch(94% 0.08 15) 100%); color: oklch(52% 0.16 15); box-shadow: 0 2px 6px oklch(52% 0.16 15 / 12%); }
    .ss-nav-icon--feedback { background: linear-gradient(145deg, oklch(96% 0.04 265) 0%, oklch(93% 0.06 265) 100%); color: oklch(48% 0.03 265); }
    .ss-nav-icon--logout {
      background: linear-gradient(145deg, #cbd5e1 0%, #94a3b8 100%);
      color: #334155;
      box-shadow: 0 2px 6px rgba(51, 65, 85, 0.14);
    }
    .ss-v2-logout-btn {
      margin-top: 2px;
      color: var(--muted);
      background: transparent !important;
    }
    .ss-v2-logout-btn:hover {
      color: #475569;
      background: rgba(100, 116, 139, 0.1) !important;
    }
    .ss-v2-logout-btn:hover .ss-nav-icon--logout {
      background: linear-gradient(145deg, #b8c5d4 0%, #8899ad 100%);
      color: #1e293b;
      box-shadow: 0 3px 10px rgba(51, 65, 85, 0.2);
    }
    .ss-v2-nav-item:hover .ss-nav-icon--home,
    .ss-v2-nav-item.is-active .ss-nav-icon--home { color: var(--accent-bright); box-shadow: 0 3px 10px oklch(54% 0.19 283 / 24%); transform: scale(1.05); }
    .ss-v2-nav-item:hover .ss-nav-icon--library,
    .ss-v2-nav-item.is-active .ss-nav-icon--library { box-shadow: 0 3px 10px oklch(52% 0.18 275 / 22%); transform: scale(1.05); }
    .ss-v2-nav-item:hover .ss-nav-icon--ask,
    .ss-v2-nav-item.is-active .ss-nav-icon--ask { box-shadow: 0 3px 12px oklch(54% 0.19 283 / 26%); transform: scale(1.05); }
    .ss-v2-nav-item:hover .ss-nav-icon--coach { box-shadow: 0 3px 12px oklch(54% 0.19 283 / 28%); transform: scale(1.05); }
    .ss-v2-nav-item {
      display: flex; align-items: center; gap: 8px;
      width: 100%; padding: 5px 8px;
      border: none; border-radius: 9px;
      background: transparent;
      color: var(--muted);
      font-size: 13px; font-weight: 500;
      letter-spacing: 0.02em;
      cursor: pointer;
      text-decoration: none;
      transition: var(--ease);
    }
    .ss-v2-nav-item:hover {
      background: oklch(54% 0.19 283 / 12%);
      color: var(--fg);
      transform: translateX(3px);
    }
    .ss-v2-nav-item.is-active {
      background: var(--accent-pill);
      color: var(--accent-bright);
      box-shadow: inset 0 0 0 1px oklch(54% 0.19 283 / 18%), 0 2px 8px oklch(54% 0.19 283 / 10%);
    }
    .ss-v2-nav-item--justify { justify-content: space-between; }
    .ss-pro-badge {
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.08em;
      padding: 3px 8px;
      border-radius: 6px;
      background: linear-gradient(135deg, oklch(48% 0.22 283) 0%, oklch(42% 0.20 283) 100%);
      color: oklch(100% 0 0);
      box-shadow: 0 2px 6px oklch(48% 0.22 283 / 35%);
      flex-shrink: 0;
      line-height: 1.2;
    }
    .ss-pro-badge--active {
      background: linear-gradient(135deg, oklch(62% 0.18 145) 0%, oklch(52% 0.16 145) 100%);
      box-shadow: 0 2px 6px oklch(52% 0.16 145 / 35%);
    }
    .ss-choice-title-row {
      display: flex; align-items: center; gap: 8px;
      flex-wrap: wrap; width: 100%;
    }
    .ss-choice-title-row .ss-choice-title { flex: 1; min-width: 0; }
    .ss-play-card .ss-pro-badge { margin-left: 0; }
    .ss-play-card--locked { opacity: 0.92; }
    .ss-play-card {
      --play-accent: #6366f1;
      position: relative;
      overflow: hidden;
      align-items: center;
      gap: 14px;
      border-color: color-mix(in srgb, var(--play-accent) 24%, var(--border));
      background: linear-gradient(135deg, color-mix(in srgb, var(--play-accent) 7%, var(--surface)) 0%, var(--card-bg) 58%);
    }
    .ss-play-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(125deg, color-mix(in srgb, var(--play-accent) 16%, transparent) 0%, transparent 55%);
      opacity: 0.55;
      pointer-events: none;
      transition: var(--ease);
    }
    .ss-play-card:hover {
      border-color: color-mix(in srgb, var(--play-accent) 48%, var(--border));
      box-shadow: var(--shadow-lift), 0 8px 24px color-mix(in srgb, var(--play-accent) 18%, transparent);
      transform: translateY(-4px);
    }
    .ss-play-card:hover::before { opacity: 0.85; }
    .ss-play-card-icon {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, color-mix(in srgb, var(--play-accent) 20%, white) 0%, color-mix(in srgb, var(--play-accent) 10%, white) 100%);
      color: var(--play-accent);
      box-shadow: 0 3px 12px color-mix(in srgb, var(--play-accent) 26%, transparent);
      transition: var(--ease);
    }
    .ss-play-card-icon svg { display: block; }
    .ss-play-card:hover .ss-play-card-icon {
      transform: scale(1.06);
      box-shadow: 0 4px 16px color-mix(in srgb, var(--play-accent) 34%, transparent);
    }
    .ss-play-card .ss-choice-body { position: relative; z-index: 1; min-width: 0; }
    .ss-play-card .ss-choice-title { line-height: 1.3; }
    .ss-play-card .ss-choice-desc {
      line-height: 1.45;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .ss-play-card .ss-choice-arrow {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      color: color-mix(in srgb, var(--play-accent) 65%, var(--muted));
    }
    .ss-play-card:hover .ss-choice-arrow {
      color: var(--play-accent);
      transform: translateX(5px);
    }
    .ss-play-games-grid--quick .ss-play-card { min-height: 0; }
    .ss-sidebar-game-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 6px 8px;
      border: none;
      border-radius: 9px;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      transition: var(--ease);
    }
    .ss-sidebar-game-btn:hover {
      background: color-mix(in srgb, var(--play-accent, var(--accent)) 12%, transparent);
      color: var(--fg);
    }
    .ss-sidebar-game-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, color-mix(in srgb, var(--play-accent, var(--accent)) 18%, white) 0%, color-mix(in srgb, var(--play-accent, var(--accent)) 10%, white) 100%);
      color: var(--play-accent, var(--accent));
      box-shadow: 0 2px 8px color-mix(in srgb, var(--play-accent, var(--accent)) 22%, transparent);
    }
    .ss-sidebar-game-icon svg { display: block; }
    .ss-sidebar-game-btn--compact .ss-sidebar-game-icon { width: 24px; height: 24px; }
    .ss-sidebar-game-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ss-v2-sidebar-footer {
      flex-shrink: 0;
      margin-top: auto;
      padding-top: 8px;
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 2px;
      background: var(--footer-fade);
    }
    .streak-nav-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 8px;
      border-radius: 9px;
      font-size: 12px; font-weight: 600;
      background: linear-gradient(135deg, oklch(96% 0.07 155) 0%, oklch(92% 0.11 155) 100%);
      color: oklch(38% 0.14 155);
      cursor: pointer;
      transition: var(--ease);
      border: 1px solid oklch(82% 0.08 155);
      box-shadow: 0 3px 12px oklch(58% 0.16 155 / 18%);
      width: 100%;
      text-align: left;
    }
    .streak-nav-badge:hover {
      background: linear-gradient(135deg, oklch(94% 0.09 155) 0%, oklch(90% 0.13 155) 100%);
      transform: scale(1.02) translateY(-1px);
      box-shadow: 0 6px 18px oklch(58% 0.16 155 / 24%);
    }
    .streak-nav-badge svg { flex-shrink: 0; }
    .streak-icon-wrap {
      width: 22px; height: 22px;
      display: grid; place-items: center;
      border-radius: 6px;
      background: linear-gradient(145deg, oklch(95% 0.08 155) 0%, oklch(90% 0.12 155) 100%);
      box-shadow: 0 2px 8px oklch(58% 0.16 155 / 24%);
      color: oklch(46% 0.17 155);
      flex-shrink: 0;
    }
    .streak-icon-wrap svg { display: block; overflow: visible; }
    .ss-levels-picks {
      margin-top: 36px;
    }
    @media (max-width: 900px) {
      .ss-levels-picks { margin-top: 28px; }
    }
    .ss-nav-icon--coach-whistle {
      background: linear-gradient(145deg, oklch(96% 0.06 283) 0%, oklch(92% 0.1 283) 100%);
      color: var(--accent-bright);
      box-shadow: 0 2px 8px oklch(54% 0.19 283 / 18%);
    }
    .ss-v2-nav-item:hover .ss-nav-icon--coach-whistle,
    .ss-v2-nav-item.is-active .ss-nav-icon--coach-whistle {
      box-shadow: 0 3px 12px oklch(54% 0.19 283 / 28%);
      transform: scale(1.05);
      color: var(--accent-bright);
    }
    .ss-mode-switch {
      display: flex; gap: 3px;
      padding: 3px;
      background: oklch(96% 0.006 265);
      border-radius: 10px;
      margin-bottom: 6px;
      border: 1px solid var(--border);
      box-shadow: inset 0 1px 2px oklch(0% 0 0 / 3%);
    }
    .ss-mode-btn {
      flex: 1; padding: 7px 8px;
      border: none; border-radius: 8px;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--muted);
      background: transparent;
      cursor: pointer;
      transition: var(--ease);
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .ss-mode-btn:hover {
      color: var(--accent-bright);
      background: oklch(54% 0.19 283 / 10%);
      transform: scale(1.04);
    }
    .ss-mode-btn.is-active {
      background: var(--mode-tab-active);
      color: var(--accent-bright);
      box-shadow: 0 2px 10px oklch(54% 0.19 283 / 18%), 0 0 0 1px oklch(88% 0.05 283);
      transform: scale(1.03);
    }
    [data-theme="dark"] .ss-mode-btn.is-active {
      box-shadow: 0 2px 12px oklch(68% 0.22 283 / 28%), 0 0 0 1px oklch(52% 0.14 283 / 45%);
    }
    .ss-mode-btn.is-active:hover { transform: scale(1.05); }

    /* ── Main layout ── */
    .ss-v2-topbar {
      position: fixed; top: 0; right: 0;
      padding: 24px 32px;
      z-index: 40;
      display: flex; align-items: center; justify-content: flex-end; gap: 8px;
      pointer-events: none;
    }
    .ss-v2-topbar > * { pointer-events: auto; }
    .page {
      margin-left: var(--sidebar-w);
      width: calc(100% - var(--sidebar-w));
      padding: 32px 40px 48px;
      min-height: 100vh;
      position: relative;
      z-index: 10;
      background: var(--main-panel-bg);
      transition: background 0.3s ease;
      box-sizing: border-box;
    }
    .ss-game-screen--solo .page,
    .ss-lesson-screen .page,
    .ss-quiz-screen .page,
    .ss-result-screen .page,
    .page.ss-flow-page {
      margin-left: 0;
      width: 100%;
      padding-left: 16px;
      padding-right: 16px;
    }
    @media (min-width: 901px) {
      .page.ss-v2-main {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .page.ss-v2-main > * {
        width: 100%;
        max-width: 720px;
      }
      .ss-v2-topbar {
        left: var(--sidebar-w);
        right: 0;
        width: auto;
        padding-left: max(40px, calc((100vw - var(--sidebar-w) - 720px) / 2));
        padding-right: max(40px, calc((100vw - var(--sidebar-w) - 720px) / 2));
      }
      .ss-mode-brand { justify-content: center; }
      .ss-mode-title { text-align: center; }
      .ss-mode-sub { text-align: center; margin-inline: auto; }
    }
    .ss-v2-page-title {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 44px);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 12px;
    }
    .ss-title-accent {
      height: 4px; width: 80px;
      background: linear-gradient(90deg, var(--accent-bright) 0%, var(--growth-bright) 100%);
      border-radius: 999px;
      margin-top: 16px;
      box-shadow: 0 2px 12px oklch(54% 0.19 283 / 30%);
    }
    .page-lead {
      color: var(--muted);
      font-size: 17px;
      line-height: 1.55;
      max-width: 36ch;
    }
    .ss-play-section-label {
      font-size: 12px; font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 12px;
      margin-top: 28px;
    }
    .ss-levels-grid, .ss-picks-grid {
      display: grid;
      gap: 12px;
    }
    .ss-levels-grid { max-width: 100%; }
    .ss-levels-grid .ss-choice-icon {
      overflow: visible;
    }
    .ss-levels-grid .ss-choice-icon svg {
      display: block;
      overflow: visible;
      width: 20px;
      height: 20px;
    }
    .ss-levels-grid .ss-choice-icon--lvl2 svg {
      width: 22px;
      height: 22px;
    }
    .ss-picks-grid--2 { grid-template-columns: repeat(2, 1fr); }
    @media (max-width: 640px) {
      .ss-picks-grid--2 { grid-template-columns: 1fr; }
      .ss-play-games-grid .ss-play-card {
        padding: 14px 16px;
        gap: 12px;
      }
      .ss-play-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 11px;
      }
      .ss-play-card .ss-choice-title { font-size: 14px; }
      .ss-play-card .ss-choice-desc { font-size: 12px; }
      .ss-play-card .ss-choice-arrow { width: 18px; height: 18px; }
      .ss-play-section-label { text-align: left; }
      .ss-play-picks-wrap { width: 100%; }
    }

    /* ── Mobile responsive ── */
    .ss-sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: oklch(15% 0.02 265 / 45%);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      z-index: 48;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ss-sidebar-overlay.is-visible {
      display: block;
      opacity: 1;
      pointer-events: auto;
    }
    .ss-mobile-menu-btn {
      display: none;
      align-items: center;
      justify-content: center;
      width: 40px; height: 40px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--btn-ghost-bg);
      color: var(--fg);
      cursor: pointer;
      box-shadow: var(--shadow-card);
      transition: var(--ease);
      flex-shrink: 0;
    }
    .ss-mobile-menu-btn:hover {
      border-color: oklch(78% 0.08 283);
      color: var(--accent-bright);
      transform: scale(1.04);
    }
    .ss-mobile-menu-btn svg { display: block; }

    @media (max-width: 900px) {
      .ss-v2-sidebar {
        width: min(272px, 86vw);
        transform: translateX(-105%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
      }
      .ss-v2-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 8px 0 40px oklch(0% 0 0 / 18%);
      }
      .ss-v2-screen::before { inset: 0; }
      .ss-study-screen:has(.ss-v2-sidebar) .page,
      .ss-game-screen:not(.ss-game-screen--solo) .page {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
      }
      .page {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: 68px 20px 40px;
        max-width: 640px;
        margin-inline: auto;
        display: block;
        align-items: stretch;
      }
      .page.ss-v2-main > * { max-width: 100%; }
      .ss-v2-topbar {
        left: 0;
        right: 0;
        padding: 14px 16px;
        justify-content: flex-start;
        gap: 12px;
      }
      .ss-v2-topbar .ss-topbar-controls { margin-left: auto; }
      .ss-mobile-menu-btn { display: flex; }
      .ss-v2-page-title { font-size: clamp(26px, 7vw, 36px); text-align: center; }
      .page-lead { font-size: 15px; text-align: center; margin-inline: auto; }
      .ss-levels-grid { max-width: 100%; margin-inline: auto; }
      .ss-choice-card { padding: 16px 18px; }
      .ss-game-card { padding: 16px; }
      .ss-mode-screen {
        padding: 32px 20px;
        align-items: center;
        justify-content: center;
      }
      .ss-mode-wrap {
        max-width: min(440px, 100%);
        text-align: center;
      }
      .ss-mode-brand { justify-content: center; margin-bottom: 32px; }
      .ss-mode-title { text-align: center; }
      .ss-mode-sub { text-align: center; margin-inline: auto; }
      .ss-mode-cards { gap: 16px; }
      .ss-mode-theme-corner { top: 16px; right: 16px; }
    }

    @media (max-width: 480px) {
      .ss-mode-screen { padding: 24px 16px 32px; }
      .ss-mode-wrap { max-width: 100%; }
      .ss-mode-brand { margin-bottom: 24px; }
      .ss-mode-title { font-size: 26px; }
      .ss-mode-sub { font-size: 15px; margin-bottom: 24px; }
      .ss-mode-cards { gap: 14px; padding-bottom: 16px; }
      .ss-mode-pick.ss-choice-card { padding: 16px; }
      .ss-toast {
        left: 16px; right: 16px;
        transform: translateX(0) translateY(80px);
        text-align: center;
      }
      .ss-toast.show { transform: translateX(0) translateY(0); }
      .page { padding: 64px 16px 32px; }
      .ss-v2-topbar { padding: 12px 14px; }
    }

    /* Level cards — premium lift + purple border highlight */
    .ss-level-card {
      position: relative;
      overflow: visible;
    }
    .ss-level-card .ss-choice-body { padding-right: 4px; }
    .ss-level-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, oklch(54% 0.19 283 / 0%) 0%, oklch(54% 0.19 283 / 6%) 100%);
      opacity: 0;
      transition: var(--ease);
      pointer-events: none;
    }
    .ss-level-card:hover {
      border-color: oklch(72% 0.12 283);
      box-shadow: var(--shadow-lift);
      transform: translateY(-4px);
    }
    .ss-level-card:hover::after { opacity: 1; }
    .ss-level-card:hover .ss-choice-icon { transform: scale(1.08); }
    .ss-level-card:hover .ss-choice-icon--lvl1 { box-shadow: 0 4px 16px oklch(58% 0.16 155 / 30%); }
    .ss-level-card:hover .ss-choice-icon--lvl2 { box-shadow: 0 4px 16px oklch(54% 0.19 283 / 32%); }
    .ss-level-card:hover .ss-choice-icon--lvl3 { box-shadow: 0 4px 16px oklch(52% 0.18 275 / 30%); }
    .ss-level-card:hover .ss-choice-icon--lvl4 { box-shadow: 0 4px 16px oklch(68% 0.16 75 / 30%); }
    .ss-level-card:active { transform: translateY(-2px); }

    .ss-play-topic-label {
      display: block;
      font-size: 13px; font-weight: 600;
      margin-bottom: 8px;
      letter-spacing: 0.02em;
    }
    .ss-play-topic-inp {
      width: 100%; max-width: 480px;
      padding: 13px 16px;
      border: 1px solid var(--border);
      border-radius: 12px;
      font-size: 14px;
      background: var(--input-bg);
      color: var(--fg);
      box-shadow: var(--shadow-xs);
      transition: var(--ease);
    }
    .ss-play-topic-inp:hover {
      border-color: oklch(86% 0.02 283);
      box-shadow: 0 2px 8px oklch(0% 0 0 / 4%);
    }
    .ss-play-topic-inp:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 4px var(--accent-glow), var(--shadow-card);
    }
    .ss-play-topic-hint {
      font-size: 12px; color: var(--muted);
      margin-top: 8px; max-width: 48ch;
    }
    .ss-game-card {
      display: flex; flex-direction: column; gap: 8px;
      padding: 18px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      cursor: pointer;
      text-align: left;
      box-shadow: var(--shadow-card);
      transition: var(--ease);
      position: relative;
      overflow: hidden;
    }
    .ss-game-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, oklch(97% 0.03 283 / 0%) 0%, oklch(97% 0.04 283 / 40%) 100%);
      opacity: 0;
      transition: var(--ease);
      pointer-events: none;
    }
    .ss-game-card:hover {
      border-color: oklch(72% 0.12 283);
      box-shadow: var(--shadow-lift);
      transform: translateY(-4px);
    }
    .ss-game-card:hover::before { opacity: 1; }
    .ss-game-card:active { transform: translateY(-1px); }
    .ss-game-card-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      display: grid; place-items: center;
      background: linear-gradient(145deg, oklch(97% 0.04 283) 0%, oklch(94% 0.06 283) 100%);
      color: var(--accent);
      transition: var(--ease);
      position: relative; z-index: 1;
      box-shadow: 0 2px 6px oklch(56% 0.17 283 / 10%);
    }
    .ss-game-card:hover .ss-game-card-icon {
      background: linear-gradient(145deg, oklch(95% 0.06 283) 0%, oklch(92% 0.08 283) 100%);
      transform: scale(1.08);
    }
    .ss-game-card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; position: relative; z-index: 1; }
    .ss-game-card-sub { font-size: 12px; color: var(--muted); position: relative; z-index: 1; }
    .ss-prem-tag {
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--accent);
      margin-top: auto;
      position: relative; z-index: 1;
    }

    /* Toast for sidebar actions */
    .ss-toast {
      position: fixed; bottom: 24px; left: 50%;
      transform: translateX(-50%) translateY(80px);
      padding: 12px 22px;
      background: linear-gradient(135deg, oklch(24% 0.02 265) 0%, oklch(20% 0.03 283) 100%);
      color: var(--surface);
      font-size: 13px; font-weight: 500;
      border-radius: 12px;
      opacity: 0;
      pointer-events: none;
      transition: var(--ease);
      z-index: 200;
      box-shadow: var(--shadow-float);
      border: 1px solid oklch(40% 0.04 283 / 30%);
    }
    .ss-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ── Dark theme: mode picker cards — vivid emerald + amethyst ── */
    [data-theme="dark"] .ss-mode-pick--play {
      background: linear-gradient(148deg, oklch(20% 0.06 155) 0%, oklch(15% 0.05 155) 48%, oklch(12% 0.1 155) 100%);
      border-color: oklch(38% 0.12 155);
      border-bottom-color: oklch(58% 0.2 155);
      box-shadow:
        0 2px 10px oklch(0% 0 0 / 45%),
        0 12px 40px oklch(72% 0.22 155 / 32%),
        inset 0 1px 0 oklch(72% 0.16 155 / 22%);
    }
    [data-theme="dark"] .ss-mode-pick--study {
      background: linear-gradient(148deg, oklch(20% 0.08 283) 0%, oklch(15% 0.07 283) 48%, oklch(12% 0.12 283) 100%);
      border-color: oklch(38% 0.14 283);
      border-bottom-color: oklch(58% 0.24 283);
      box-shadow:
        0 2px 10px oklch(0% 0 0 / 45%),
        0 12px 40px oklch(72% 0.28 283 / 36%),
        inset 0 1px 0 oklch(72% 0.22 283 / 24%);
    }
    [data-theme="dark"] .ss-mode-pick--play::before {
      background: linear-gradient(180deg, transparent 0%, oklch(62% 0.2 155 / 38%) 100%);
    }
    [data-theme="dark"] .ss-mode-pick--study::before {
      background: linear-gradient(180deg, transparent 0%, oklch(58% 0.24 283 / 42%) 100%);
    }
    [data-theme="dark"] .ss-mode-pick-icon--play {
      background: linear-gradient(145deg, oklch(42% 0.16 155) 0%, oklch(30% 0.14 155) 100%) !important;
      color: oklch(86% 0.2 155) !important;
      box-shadow: 0 4px 18px oklch(72% 0.22 155 / 48%) !important;
    }
    [data-theme="dark"] .ss-mode-pick-icon--study {
      background: linear-gradient(145deg, oklch(42% 0.18 283) 0%, oklch(30% 0.16 283) 100%) !important;
      color: oklch(88% 0.22 283) !important;
      box-shadow: 0 4px 18px oklch(72% 0.28 283 / 50%) !important;
    }
    [data-theme="dark"] .ss-mode-pick--play .ss-choice-arrow { color: oklch(72% 0.2 155); }
    [data-theme="dark"] .ss-mode-pick--study .ss-choice-arrow { color: oklch(72% 0.24 283); }
    [data-theme="dark"] .ss-mode-pick--play.ss-choice-card:hover {
      border-color: oklch(52% 0.18 155);
      box-shadow: var(--shadow-lift), 0 10px 36px oklch(72% 0.22 155 / 28%), 0 0 0 1px oklch(62% 0.18 155 / 40%);
    }
    [data-theme="dark"] .ss-mode-pick--study.ss-choice-card:hover {
      border-color: oklch(52% 0.22 283);
      box-shadow: var(--shadow-lift), 0 10px 36px oklch(72% 0.28 283 / 30%), 0 0 0 1px oklch(62% 0.22 283 / 45%);
    }
    [data-theme="dark"] .ss-mode-pick--play.ss-choice-card:hover .ss-choice-arrow { color: oklch(82% 0.22 155); }
    [data-theme="dark"] .ss-mode-pick--study.ss-choice-card:hover .ss-choice-arrow { color: oklch(84% 0.26 283); }
    /* Dark hover: keep icon tiles saturated — light-mode hover rules must not wash them out */
    [data-theme="dark"] .ss-mode-pick--play:hover .ss-mode-pick-icon--play {
      background: linear-gradient(145deg, oklch(48% 0.18 155) 0%, oklch(34% 0.15 155) 100%) !important;
      color: oklch(88% 0.2 155) !important;
      box-shadow: 0 6px 20px oklch(72% 0.22 155 / 55%) !important;
    }
    [data-theme="dark"] .ss-mode-pick--study:hover .ss-mode-pick-icon--study {
      background: linear-gradient(145deg, oklch(48% 0.2 283) 0%, oklch(34% 0.17 283) 100%) !important;
      color: oklch(90% 0.22 283) !important;
      box-shadow: 0 6px 20px oklch(72% 0.28 283 / 55%) !important;
    }
    [data-theme="dark"] .ss-mode-pick--play:hover::before,
    [data-theme="dark"] .ss-mode-pick--study:hover::before {
      opacity: 0.5;
    }
    [data-theme="dark"] .ss-mode-pick--play:hover {
      background: linear-gradient(148deg, oklch(22% 0.07 155) 0%, oklch(16% 0.06 155) 48%, oklch(13% 0.11 155) 100%);
    }
    [data-theme="dark"] .ss-mode-pick--study:hover {
      background: linear-gradient(148deg, oklch(22% 0.09 283) 0%, oklch(16% 0.08 283) 48%, oklch(13% 0.13 283) 100%);
    }

    /* ── Dark theme: component overrides ── */
    [data-theme="dark"] .ss-mode-switch {
      background: oklch(14% 0.018 265);
      border-color: var(--border);
      box-shadow: inset 0 1px 2px oklch(0% 0 0 / 25%);
    }
    [data-theme="dark"] .ss-mode-btn.is-active {
      background: linear-gradient(145deg, oklch(34% 0.20 285) 0%, oklch(24% 0.16 285) 100%);
      color: var(--accent-bright);
      box-shadow: 0 2px 20px oklch(78% 0.32 285 / 48%), 0 0 0 1px oklch(72% 0.26 285 / 55%);
    }
    [data-theme="dark"] .ss-v2-nav-item:hover {
      background: oklch(78% 0.30 285 / 20%);
      color: var(--fg);
    }
    [data-theme="dark"] .ss-v2-nav-item.is-active {
      background: oklch(78% 0.30 285 / 30%);
      color: var(--accent-bright);
      box-shadow: inset 0 0 0 1px oklch(82% 0.30 285 / 45%), 0 2px 16px oklch(78% 0.30 285 / 28%);
    }
    [data-theme="dark"] .ss-level-card:hover,
    [data-theme="dark"] .ss-game-card:hover {
      border-color: oklch(78% 0.28 285);
      box-shadow: 0 8px 32px oklch(78% 0.30 285 / 32%), 0 12px 32px oklch(0% 0 0 / 45%);
    }
    [data-theme="dark"] .ss-title-accent {
      box-shadow: 0 2px 20px oklch(78% 0.32 285 / 55%), 0 2px 10px oklch(82% 0.28 155 / 42%);
    }
    [data-theme="dark"] .ss-nav-icon--home,
    [data-theme="dark"] .ss-nav-icon--ask,
    [data-theme="dark"] .ss-nav-icon--coach,
    [data-theme="dark"] .ss-nav-icon--coach-whistle {
      background: var(--icon-tile);
      color: var(--accent-bright);
      box-shadow: 0 2px 14px oklch(78% 0.30 285 / 36%);
    }
    [data-theme="dark"] .ss-nav-icon--library {
      background: var(--icon-tile-violet);
      color: oklch(82% 0.2 275);
      box-shadow: 0 2px 10px oklch(68% 0.18 275 / 24%);
    }
    [data-theme="dark"] .ss-nav-icon--material,
    [data-theme="dark"] .ss-nav-icon--feedback {
      background: var(--icon-tile-neutral);
      color: oklch(72% 0.02 265);
    }
    [data-theme="dark"] .ss-nav-icon--premium {
      background: linear-gradient(145deg, oklch(32% 0.12 75) 0%, oklch(24% 0.1 75) 100%);
      color: oklch(84% 0.16 75);
      box-shadow: 0 2px 10px oklch(68% 0.14 75 / 28%);
    }
    [data-theme="dark"] .ss-nav-icon--donate {
      background: linear-gradient(145deg, oklch(22% 0.08 15) 0%, oklch(18% 0.07 15) 100%);
      color: oklch(72% 0.14 15);
    }
    [data-theme="dark"] .ss-nav-icon--logout {
      background: linear-gradient(145deg, #334155 0%, #1e293b 100%);
      color: #94a3b8;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
    }
    [data-theme="dark"] .ss-v2-logout-btn:hover .ss-nav-icon--logout {
      background: linear-gradient(145deg, #3d4f66 0%, #243044 100%);
      color: #cbd5e1;
      box-shadow: 0 2px 12px rgba(15, 23, 42, 0.45);
    }
    [data-theme="dark"] .streak-nav-badge {
      background: linear-gradient(135deg, oklch(28% 0.14 155) 0%, oklch(20% 0.12 155) 100%);
      color: var(--growth-bright);
      border-color: oklch(52% 0.16 155);
      box-shadow: 0 3px 20px oklch(72% 0.2 155 / 42%);
    }
    [data-theme="dark"] .streak-nav-badge:hover {
      background: linear-gradient(135deg, oklch(20% 0.09 155) 0%, oklch(16% 0.08 155) 100%);
    }
    [data-theme="dark"] .streak-icon-wrap {
      background: linear-gradient(145deg, oklch(32% 0.15 155) 0%, oklch(22% 0.13 155) 100%);
      color: var(--growth-bright);
      box-shadow: 0 2px 10px oklch(68% 0.18 155 / 38%);
    }
    [data-theme="dark"] .ss-choice-icon--lvl1 {
      background: var(--icon-tile-green);
      color: var(--growth-bright);
    }
    [data-theme="dark"] .ss-choice-icon--lvl2 {
      background: var(--icon-tile);
      color: var(--accent-bright);
    }
    [data-theme="dark"] .ss-choice-icon--lvl3 {
      background: var(--icon-tile-violet);
      color: var(--violet);
    }
    [data-theme="dark"] .ss-choice-icon--lvl4 {
      background: linear-gradient(145deg, oklch(22% 0.08 75) 0%, oklch(18% 0.07 75) 100%);
      color: var(--amber);
    }
    [data-theme="dark"] .ss-mobile-menu-btn {
      background: var(--card-bg);
      border-color: var(--border);
    }
    [data-theme="dark"] .ss-game-card::before {
      background: linear-gradient(135deg, oklch(68% 0.18 283 / 0%) 0%, oklch(68% 0.18 283 / 10%) 100%);
    }
    [data-theme="dark"] .ss-game-card-icon {
      background: var(--icon-tile);
      color: var(--accent-bright);
    }
    [data-theme="dark"] .ss-game-card:hover .ss-game-card-icon {
      background: linear-gradient(145deg, oklch(24% 0.08 283) 0%, oklch(20% 0.07 283) 100%);
    }
    [data-theme="dark"] .ss-toast {
      color: oklch(94% 0.008 265);
      background: linear-gradient(135deg, oklch(18% 0.022 265) 0%, oklch(14% 0.02 283) 100%);
      border-color: oklch(32% 0.06 283 / 40%);
    }
    [data-theme="dark"] .ss-v2-brand:hover {
      background: oklch(68% 0.18 283 / 12%);
    }
    [data-theme="dark"] .page {
      background: var(--main-panel-bg);
    }
    [data-theme="dark"] .ss-play-card {
      border-color: color-mix(in srgb, var(--play-accent) 42%, var(--border));
      background: linear-gradient(135deg, color-mix(in srgb, var(--play-accent) 14%, oklch(14% 0.02 265)) 0%, oklch(13% 0.018 265) 62%);
      box-shadow: var(--shadow-card), 0 0 28px color-mix(in srgb, var(--play-accent) 14%, transparent);
    }
    [data-theme="dark"] .ss-play-card::before {
      background: linear-gradient(125deg, color-mix(in srgb, var(--play-accent) 28%, transparent) 0%, transparent 58%);
      opacity: 0.7;
    }
    [data-theme="dark"] .ss-play-card:hover {
      border-color: color-mix(in srgb, var(--play-accent) 62%, var(--border));
      box-shadow: var(--shadow-lift), 0 0 36px color-mix(in srgb, var(--play-accent) 28%, transparent);
    }
    [data-theme="dark"] .ss-play-card-icon {
      background: linear-gradient(145deg, color-mix(in srgb, var(--play-accent) 38%, oklch(14% 0.02 265)) 0%, color-mix(in srgb, var(--play-accent) 18%, oklch(10% 0.015 265)) 100%);
      color: var(--play-accent);
      box-shadow: 0 0 18px color-mix(in srgb, var(--play-accent) 48%, transparent);
    }
    [data-theme="dark"] .ss-play-card:hover .ss-play-card-icon {
      box-shadow: 0 0 26px color-mix(in srgb, var(--play-accent) 58%, transparent);
    }
    [data-theme="dark"] .ss-play-card .ss-choice-arrow { color: color-mix(in srgb, var(--play-accent) 75%, var(--muted)); }
    [data-theme="dark"] .ss-play-card:hover .ss-choice-arrow { color: var(--play-accent); }
    [data-theme="dark"] .ss-sidebar-game-btn:hover {
      background: color-mix(in srgb, var(--play-accent, var(--accent)) 18%, transparent);
    }
    [data-theme="dark"] .ss-sidebar-game-icon {
      background: linear-gradient(145deg, color-mix(in srgb, var(--play-accent, var(--accent)) 42%, oklch(14% 0.02 265)) 0%, color-mix(in srgb, var(--play-accent, var(--accent)) 22%, oklch(10% 0.015 265)) 100%);
      box-shadow: 0 0 14px color-mix(in srgb, var(--play-accent, var(--accent)) 40%, transparent);
    }
    [data-theme="dark"] .ss-level-card:hover,
    [data-theme="dark"] .ss-choice-card:not(.ss-mode-pick):hover {
      border-color: oklch(72% 0.28 285);
      box-shadow: var(--shadow-lift), 0 0 24px oklch(72% 0.28 285 / 18%);
    }

/* Legacy feature overlays */
#streak-cal-overlay {
  display: none; position: fixed; inset: 0; z-index: 14000;
  background: oklch(0% 0 0 / 45%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 16px;
}
#streak-cal-overlay.open { display: flex; }
.streak-cal-card {
  width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 18px 18px;
  box-shadow: var(--shadow-float); color: var(--fg);
}
.streak-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.streak-cal-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.streak-cal-close {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--btn-ghost-bg); border: 1px solid var(--border);
  color: var(--fg); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.streak-cal-close:hover { background: var(--accent-soft); }
.streak-cal-sub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.streak-cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.streak-cal-dow { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.streak-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.streak-cal-day {
  aspect-ratio: 1; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--btn-ghost-bg); border: 1px solid transparent;
}
.streak-cal-day.in { color: var(--fg); }
.streak-cal-day.done {
  color: oklch(99% 0 0);
  background: linear-gradient(135deg, oklch(68% 0.18 55), oklch(88% 0.16 95));
  box-shadow: 0 4px 12px -4px oklch(68% 0.18 55 / 55%);
}
.streak-cal-day.today { border-color: var(--growth-bright); box-shadow: 0 0 0 1px oklch(72% 0.14 195 / 45%); }
.streak-cal-day.future { opacity: 0.3; }
.streak-cal-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.streak-cal-stat { padding: 10px 12px; border-radius: 10px; background: var(--btn-ghost-bg); border: 1px solid var(--border); }
.streak-cal-stat-val { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent-bright); }
.streak-cal-stat-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

/* Library cards */
#library-list .lib-card {
  position: relative; display: grid; grid-template-columns: 52px 1fr;
  gap: 14px; align-items: start; padding: 14px 16px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  cursor: pointer; transition: var(--ease); box-shadow: var(--shadow-xs);
}
#library-list .lib-card::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--lib-accent, var(--accent)), transparent); opacity: 0.85;
}
#library-list .lib-card:hover {
  transform: translateY(-2px); border-color: oklch(78% 0.08 283);
  box-shadow: var(--shadow-lift);
}
#library-list .lib-card-icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: var(--lib-accent-bg, var(--accent-soft)); flex-shrink: 0;
}
#library-list .lib-card-body { min-width: 0; }
#library-list .lib-card-title { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--fg); }
#library-list .lib-card-type { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 4px; }
#library-list .lib-card-meta { margin-top: 3px; font-size: 12px; color: var(--muted); }
#library-list .lib-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
#library-list .lib-act {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--btn-ghost-bg); color: var(--fg); font-size: 12px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: var(--ease);
}
#library-list .lib-act:hover { background: var(--accent-soft); border-color: oklch(78% 0.08 283); }
#library-list .lib-act.primary { background: var(--accent); border-color: transparent; color: oklch(99% 0 0); }
#library-list .lib-act.danger:hover { background: oklch(58% 0.18 25 / 10%); border-color: oklch(58% 0.18 25 / 40%); color: oklch(48% 0.16 25); }

/* Material modal + saved cards */
.ss-modal {
  display: none; position: fixed; inset: 0; z-index: 13000;
  background: oklch(0% 0 0 / 45%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 20px;
}
.ss-modal-content {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px; max-width: 520px; width: 100%;
  max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: var(--shadow-float);
}
.ss-material-modal-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.ss-material-modal-sub { font-size: 14px; color: var(--muted); line-height: 1.5; margin-bottom: 18px; }
.ss-material-steps { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.ss-material-step.is-active { color: var(--accent-bright); font-weight: 600; }
.ss-material-step-num {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 4px;
  border-radius: 50%; background: var(--accent-soft); font-size: 11px; font-weight: 700;
}
.ss-material-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 12px 0 6px; }
.ss-material-inp {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 14px; color: var(--fg); box-sizing: border-box; transition: var(--ease);
}
.ss-material-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.ss-material-textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.ss-material-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-material-file-name { font-size: 12px; color: var(--muted); }
.ss-material-file-hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.ss-material-kit-default {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--btn-ghost-bg); border: 1px solid var(--border);
}
.ss-material-kit-default-text { font-size: 13px; color: var(--fg); margin: 0; }
.ss-material-customize-btn, .ss-material-select-all {
  border: none; background: none; color: var(--accent-bright);
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 0;
}
.ss-material-games-section { margin-top: 14px; }
.ss-material-games-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ss-material-game-pickers { display: flex; flex-direction: column; gap: 8px; }
.ss-material-game-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--btn-ghost-bg);
}
.ss-material-game-info { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ss-material-game-count-wrap { display: flex; align-items: center; gap: 6px; }
.ss-material-game-count-input { width: 56px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; }
.ss-material-gen-progress { margin-top: 14px; padding: 14px; border-radius: 10px; background: var(--accent-soft); text-align: center; }
.ss-material-loader-label { font-size: 14px; font-weight: 600; }
.ss-material-loader-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ss-material-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.ss-material-modal-actions .ss-btn-primary,
.ss-material-modal-actions .ss-btn-outline { flex: 1; margin: 0; }
.inline-msg { display: none; font-size: 13px; margin-top: 12px; padding: 10px 12px; border-radius: 8px; }
.inline-msg.show { display: block; }
.inline-msg.err { background: oklch(58% 0.18 25 / 10%); color: oklch(48% 0.16 25); border: 1px solid oklch(58% 0.18 25 / 25%); }
.inline-msg.ok { background: oklch(58% 0.16 155 / 10%); color: oklch(38% 0.14 155); border: 1px solid oklch(58% 0.16 155 / 25%); }
.ss-material-card {
  display: flex; align-items: stretch; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-xs);
}
.ss-material-card-main {
  flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: none; background: none; cursor: pointer; text-align: left; color: var(--fg);
}
.ss-material-card-icon { font-size: 22px; color: var(--accent-bright); }
.ss-material-card-body { flex: 1; min-width: 0; }
.ss-material-card-title { display: block; font-size: 15px; font-weight: 600; }
.ss-material-card-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ss-material-card-arrow { color: var(--muted); }
.ss-material-card-del {
  width: 44px; border: none; border-left: 1px solid var(--border);
  background: var(--btn-ghost-bg); color: var(--muted); cursor: pointer; font-size: 14px;
}
.ss-material-card-del:hover { background: oklch(58% 0.18 25 / 8%); color: oklch(48% 0.16 25); }
.ss-material-lab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; }
.ss-material-lab-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .ss-material-lab-grid, .ss-material-lab-grid--3 { grid-template-columns: 1fr; } }
.ss-material-game-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; text-align: left; transition: var(--ease);
  box-shadow: var(--shadow-xs);
}
.ss-material-game-card:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--game-accent, var(--accent)); }
.ss-material-game-card:disabled { opacity: 0.45; cursor: not-allowed; }
.ss-material-game-emoji { font-size: 24px; }
.ss-material-game-label { font-size: 14px; font-weight: 600; }
.ss-material-game-count { font-size: 12px; color: var(--muted); }

.ss-page-transition{pointer-events:none;position:fixed;inset:0;z-index:12000;background:oklch(54% 0.19 283 / 8%);opacity:0;transition:opacity .22s ease}
.ss-page-transition.is-active{opacity:1}

/* Dark mode: instant, calm screen changes (no purple flash/glow) */
[data-theme="dark"] .ss-page-transition{display:none!important}
[data-theme="dark"] body{transition:color .2s ease}
[data-theme="dark"] .ss-v2-screen::before{opacity:.35;transition:none}
[data-theme="dark"] .screen{transition:none}
[data-theme="dark"] .screen.active{animation:none!important}
[data-theme="dark"] .screen[class*="anim-"]{animation:none!important;transform:none!important;filter:none!important}
#premium-modal-overlay.is-open{opacity:1;pointer-events:auto}
#ask-drawer .ask-bubble{max-width:88%;padding:12px 14px;border-radius:14px;font-size:14px;line-height:1.55;margin-bottom:10px;border:1px solid var(--border);background:var(--surface)}
#ask-drawer .ask-row-user .ask-bubble{background:var(--accent-soft);margin-left:auto;border-color:oklch(80% 0.06 283)}

/* Hide Bao / panda mascot artifacts */
.ss-bao-spot, .ss-bao-spot-speech, .ss-bao-hero-row, #panda-corner-wrap, #panda-speech, .panda-wrap, .ss-bao-character, #panda-particle-canvas, .bao-tour-pop { display: none !important; }

/* Playgames.js button aliases */
.btn-primary, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: var(--ease); font-family: inherit;
}
.btn-primary { border: none; background: var(--accent); color: oklch(99% 0 0); }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-outline { border: 1px solid var(--border); background: var(--btn-ghost-bg); color: var(--fg); }
.btn-outline:hover { border-color: oklch(78% 0.08 283); background: var(--accent-soft); }
.ss-game-host { min-height: 120px; }
.ss-game-err { color: oklch(48% 0.16 25); padding: 16px; text-align: center; }
.ss-coach-phase { margin-top: 20px; }
.ss-coach-inline-msg { font-size: 13px; color: oklch(48% 0.16 25); margin: 10px 0; }
.ss-coach-start-btn { margin-top: 16px; width: 100%; max-width: 320px; }
.ss-coach-theme-input { width: 100%; }

/* Play loading overlay */
.ss-play-loading { position: fixed; inset: 0; z-index: 800; display: none; align-items: center; justify-content: center; background: oklch(0% 0 0 / 45%); backdrop-filter: blur(6px); }
.ss-play-loading-inner { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px 32px; min-width: 260px; text-align: center; box-shadow: var(--shadow-lg); }

/* Forgot password modal */
.ss-forgot-overlay { display: none; position: fixed; inset: 0; z-index: 700; align-items: center; justify-content: center; background: oklch(0% 0 0 / 50%); backdrop-filter: blur(4px); padding: 20px; }
.ss-forgot-overlay.open { display: flex; }
.forgot-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 28px; width: min(100%, 400px); box-shadow: var(--shadow-lg); }
.forgot-step { display: none; }
.forgot-step.active { display: block; }
.forgot-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.forgot-sub { font-size: 14px; color: var(--muted); margin-bottom: 16px; line-height: 1.5; }
.code-inputs { display: flex; gap: 8px; justify-content: center; margin: 16px 0; }
.code-digit { width: 42px; height: 48px; text-align: center; font-size: 20px; font-weight: 700; border: 1px solid var(--border); border-radius: 10px; background: var(--btn-ghost-bg); color: var(--fg); }
#fp-msg1, #fp-msg2, #fp-msg3 { font-size: 13px; margin: 8px 0; min-height: 18px; }
.msg-ok { color: var(--growth-bright); }
.msg-err { color: oklch(48% 0.16 25); }
.forgot-card .btn-primary, .forgot-card .btn-outline { width: 100%; margin-top: 8px; }

/* Word-by-word streaming reveal (lessons + Ask AI) */
.wr {
  display: inline;
  opacity: 0;
  animation: ssWordReveal 0.22s ease forwards;
}
@keyframes ssWordReveal {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
.ask-bubble--stream, #ask-live-bubble, #lesson-stream-text {
  white-space: pre-wrap;
  line-height: 1.65;
}

/* ELI10 modal */
.eli10-modal-overlay.open, .eli10-modal-overlay.is-open { display: flex; }
.eli10-modal-box { max-width: 560px; }
.eli10-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.eli10-modal-title { font-size: 20px; font-weight: 700; }
.eli10-modal-topic { font-size: 13px; color: var(--muted); margin-top: 4px; }
.eli10-modal-body { max-height: 50vh; overflow-y: auto; line-height: 1.65; font-size: 15px; margin-bottom: 16px; }
.eli10-modal-footer { display: flex; gap: 10px; justify-content: flex-end; }
.eli10-loading { padding: 24px; text-align: center; color: var(--muted); }

/* Study game panels (T/F, FIB, Match, Survival) */
.ss-game-study-panel { max-width: 640px; }
.ss-game-study-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ss-game-study-title { font-size: 22px; font-weight: 700; margin: 0; }
.ss-game-progress { height: 4px; background: var(--border); border-radius: 2px; margin-bottom: 20px; overflow: hidden; }
.ss-game-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), oklch(72% 0.2 330)); width: 0%; transition: width 0.35s ease; }
.ss-tf-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px 20px; min-height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 17px; font-weight: 600; line-height: 1.55; margin-bottom: 16px; }
.ss-tf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ss-tf-btn { padding: 16px; border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; border: 2px solid transparent; transition: var(--ease); }
.ss-tf-btn--true { border-color: oklch(72% 0.2 145 / 50%); background: oklch(94% 0.08 145); color: oklch(42% 0.16 145); }
.ss-tf-btn--false { border-color: oklch(72% 0.16 25 / 50%); background: oklch(94% 0.06 25); color: oklch(48% 0.16 25); }
.ss-tf-feedback { padding: 12px 16px; border-radius: 12px; font-weight: 600; text-align: center; margin-bottom: 12px; }
.ss-game-result { text-align: center; margin-top: 24px; }
.ss-game-result-emoji { font-size: 56px; margin-bottom: 8px; }
.ss-game-result-score { font-size: 42px; font-weight: 800; letter-spacing: -1px; }
.ss-game-result-sub { font-size: 14px; color: var(--muted); margin: 8px 0 20px; }
.ss-game-result-actions { display: flex; gap: 10px; }
.ss-game-result-actions .ss-btn-primary, .ss-game-result-actions .ss-btn-outline { flex: 1; }
.ss-game-loading { text-align: center; padding: 40px 16px; color: var(--muted); }
.fib-progress-bar, .match-progress-bar { height: 4px; background: var(--border); border-radius: 2px; margin-bottom: 16px; overflow: hidden; }
.fib-progress-fill, .match-progress-fill { height: 100%; background: linear-gradient(90deg, oklch(78% 0.14 200), var(--accent)); width: 0%; transition: width 0.35s ease; }
.fib-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.fib-sentence { font-size: 17px; line-height: 1.6; }
.fib-words { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; justify-content: center; }
.fib-word {
  padding: 10px 16px; border-radius: 12px;
  border: 2px solid var(--border); background: var(--surface);
  cursor: grab; font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow-xs); transition: var(--ease);
  user-select: none;
}
.fib-word:hover:not(.used) {
  border-color: var(--accent); background: var(--accent-soft);
  transform: translateY(-2px); box-shadow: var(--shadow-card);
}
.fib-word.used { opacity: 0.35; pointer-events: none; }
.fib-word.dragging { opacity: 0.6; cursor: grabbing; }
.fib-slot {
  display: inline-block; min-width: 90px; padding: 4px 10px; margin: 0 4px;
  border-bottom: 3px dashed var(--accent); border-radius: 6px;
  font-weight: 700; text-align: center; vertical-align: baseline;
}
.fib-slot.filled { border-bottom-style: solid; border-color: var(--accent-bright); }
.fib-slot.correct { border-color: var(--growth-bright); color: var(--growth-bright); }
.fib-slot.wrong { border-color: oklch(62% 0.18 25); color: oklch(58% 0.18 25); }
.fib-slot.dragover { background: var(--accent-soft); }
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.match-col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px; }
.match-col { display: flex; flex-direction: column; gap: 8px; }
.match-col button { padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); text-align: left; cursor: pointer; font-size: 14px; }
.match-col button.selected { border-color: var(--accent); background: var(--accent-soft); }
.match-col button.matched { opacity: 0.45; pointer-events: none; }
.ss-survival-game { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.surv-hud { display: flex; justify-content: space-between; gap: 16px; }
.surv-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.surv-lives { font-size: 20px; }
.surv-stat-val { font-size: 28px; font-weight: 800; }
.surv-q-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.surv-q-tag { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.surv-q-text { font-size: 18px; font-weight: 600; line-height: 1.5; }
.surv-options { display: flex; flex-direction: column; gap: 8px; }
.surv-options button { padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); text-align: left; cursor: pointer; font-size: 15px; }
.surv-explain { font-size: 14px; color: var(--muted); padding: 8px 4px; }
.surv-over { text-align: center; padding: 32px 16px; }
.surv-over-final { font-size: 48px; font-weight: 800; }
.surv-over-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.surv-over-again, .surv-over-back { padding: 12px 20px; border-radius: 12px; font-weight: 700; cursor: pointer; border: none; }
.surv-over-again { background: var(--accent); color: oklch(99% 0 0); }
.surv-over-back { background: var(--btn-ghost-bg); border: 1px solid var(--border); color: var(--fg); }

/* ── Lesson content alias (JS uses .lesson-box inside #lesson-content) ── */
#lesson-content .lesson-box,
.lesson-box {
  padding: 24px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-card);
  font-size: 15px; line-height: 1.75; color: var(--fg);
}
#lesson-content .lesson-box h1,
#lesson-content .lesson-box h2,
#lesson-content .lesson-box h3 { font-family: var(--font-display); margin: 1.2em 0 0.5em; }
#lesson-content .lesson-box p { margin-bottom: 0.85em; }

/* ── Study screens without sidebar — no offset gradient artifact ── */
.ss-lesson-screen::before,
.ss-quiz-screen::before,
.ss-result-screen::before { display: none !important; }
.ss-lesson-screen, .ss-quiz-screen, .ss-result-screen { overflow-x: hidden; }

/* ── Flashcard grid ── */
#flashcards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.ss-fc {
  cursor: pointer;
  border-radius: 14px;
  min-height: 148px;
  animation: ssFcIn 0.35s ease both;
}
@keyframes ssFcIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ss-fc-inner { position: relative; width: 100%; height: 100%; min-height: 148px; }
.ss-fc-face {
  position: absolute; inset: 0;
  border-radius: 14px; border: 1px solid var(--border);
  padding: 14px 14px 32px;
  display: flex; flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ss-fc-back { display: none; }
.ss-fc-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.ss-fc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 22px; border-radius: 6px; border: 1px solid;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  margin-bottom: 8px; flex-shrink: 0;
}
.ss-fc-text {
  font-size: 14px; line-height: 1.5; color: var(--fg);
  flex: 1; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
.ss-fc-hint {
  position: absolute; bottom: 10px; left: 14px; right: 14px;
  font-size: 11px; color: var(--muted); text-align: right;
}
.ss-fc:hover .ss-fc-face { border-color: oklch(72% 0.1 283); transform: translateY(-2px); transition: var(--ease); }

/* ── Flashcard popup (tap to flip) ── */
.fc-popup-overlay {
  display: none; position: fixed; inset: 0; z-index: 8500;
  background: oklch(0% 0 0 / 55%); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 20px;
}
.fc-popup-overlay.open { display: flex; }
.fc-popup-scene {
  position: relative; width: min(100%, 420px);
  perspective: 1200px;
}
.fc-popup-inner {
  position: relative; width: 100%; min-height: 280px;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.fc-popup-scene.flipped .fc-popup-inner { transform: rotateY(180deg); }
.fc-popup-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 18px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-float);
  padding: 28px 24px 48px; display: flex; flex-direction: column;
}
.fc-popup-back { transform: rotateY(180deg); }
.fc-popup-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.fc-popup-text {
  font-size: 17px; line-height: 1.55; color: var(--fg);
  flex: 1; overflow-y: auto;
}
.fc-popup-hint {
  position: absolute; bottom: 16px; left: 24px; right: 24px;
  font-size: 12px; color: var(--muted); text-align: center;
}
.fc-popup-close {
  position: absolute; top: -12px; right: -12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.fc-nav-btns {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 18px;
}
.fc-nav-btn {
  padding: 10px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--btn-ghost-bg);
  color: var(--fg); font-size: 13px; font-weight: 600; cursor: pointer;
}
.fc-nav-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.fc-counter { font-size: 13px; color: var(--muted); min-width: 56px; text-align: center; }

/* ── Ask AI recent chat delete ── */
.ss-ask-recent-row {
  display: flex; align-items: stretch; gap: 6px;
}
.ss-ask-recent-row .ss-ask-recent-item {
  flex: 1; margin-bottom: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-ask-recent-del {
  flex-shrink: 0; width: 34px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--btn-ghost-bg);
  color: var(--muted); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--ease);
}
.ss-ask-recent-del:hover {
  color: oklch(48% 0.16 25); border-color: oklch(72% 0.12 25);
  background: oklch(97% 0.03 25);
}
.ss-ask-clear-recent {
  margin-top: 4px; padding: 8px 12px; width: 100%;
  border: none; background: transparent; color: var(--muted);
  font-size: 12px; cursor: pointer; text-align: center;
}
.ss-ask-clear-recent:hover { color: var(--fg); text-decoration: underline; }

/* ── Discord — subtle footer link only ── */
.ss-discord-footer-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 4px 2px;
  font-size: 11px; font-weight: 500; color: var(--muted);
  text-decoration: none; opacity: 0.75; transition: var(--ease);
}
.ss-discord-footer-link:hover {
  color: #5865F2; opacity: 1;
}
[data-theme="dark"] .ss-discord-footer-link:hover { color: #7289da; }
.ss-discord-footer-link svg { flex-shrink: 0; opacity: 0.85; }

/* ── AI generating loaders (animated bars) ── */
.st-bar-loader-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 36px 20px; text-align: center;
}
.st-bar-loader-label {
  font-size: 15px; font-weight: 600; color: var(--fg);
  animation: ssLoaderPulse 1.8s ease-in-out infinite;
}
.st-bar-loader-sub {
  font-size: 13px; color: var(--muted);
  animation: ssLoaderFade 2.4s ease-in-out infinite;
}
@keyframes ssLoaderPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes ssLoaderFade {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.loader {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 5px; height: 42px; width: 64px;
}
.loader .bar {
  width: 8px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  animation: ssBarBounce 1s ease-in-out infinite;
  transform-origin: bottom center;
}
.loader .bar:nth-child(1) { animation-delay: 0s; height: 18px; }
.loader .bar:nth-child(2) { animation-delay: 0.12s; height: 28px; }
.loader .bar:nth-child(3) { animation-delay: 0.24s; height: 38px; }
.loader .bar:nth-child(4) { animation-delay: 0.36s; height: 28px; }
.loader .bar:nth-child(5) { animation-delay: 0.48s; height: 18px; }
@keyframes ssBarBounce {
  0%, 100% { transform: scaleY(0.45); opacity: 0.55; }
  50% { transform: scaleY(1); opacity: 1; }
}
.lgp-bar-wrap {
  width: 100%; max-width: 280px; height: 6px; border-radius: 999px;
  background: oklch(88% 0.02 265); overflow: hidden; margin-top: 4px;
}
[data-theme="dark"] .lgp-bar-wrap { background: oklch(22% 0.02 265); }
.lgp-bar {
  height: 100%; width: 35%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-bright), var(--growth-bright));
  animation: ssLgpSlide 1.4s ease-in-out infinite;
}
@keyframes ssLgpSlide {
  0% { transform: translateX(-120%); width: 40%; }
  50% { width: 65%; }
  100% { transform: translateX(320%); width: 40%; }
}
.lesson-spinner-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: oklch(99% 0 0 / 88%);
}
[data-theme="dark"] .lesson-spinner-overlay {
  background: oklch(8% 0.01 265 / 88%);
}
.lesson-spinner-overlay .spinner { text-align: center; }
.lesson-spinner-overlay .spin-icon {
  font-size: 28px; display: inline-block;
  animation: ssSpin 1.2s linear infinite;
}
@keyframes ssSpin { to { transform: rotate(360deg); } }
.ss-coach-loader-fill {
  animation: ssLgpSlide 1.4s ease-in-out infinite;
}

/* ── Guest sign-in overlay (was unstyled — caused logout bleed) ── */
.guest-signin-overlay,
#guest-limit-overlay {
  display: none; position: fixed; inset: 0; z-index: 9500;
  align-items: center; justify-content: center; padding: 20px;
  background: oklch(0% 0 0 / 52%); backdrop-filter: blur(6px);
}
.guest-signin-overlay[style*="flex"],
#guest-limit-overlay[style*="flex"] { display: flex !important; }
.guest-signin-card {
  width: min(100%, 400px); padding: 28px 24px; border-radius: 18px;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-float); position: relative;
}
.guest-signin-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--btn-ghost-bg);
  color: var(--muted); cursor: pointer;
}
.guest-signin-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.guest-signin-sub { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 18px; }
.guest-signin-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--muted); }
.guest-signin-inp {
  width: 100%; padding: 12px 14px; margin-bottom: 12px;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--btn-ghost-bg); color: var(--fg); font-size: 14px;
}
.guest-signin-actions { display: flex; gap: 10px; margin-top: 8px; }
.guest-signin-actions .btn-primary, .guest-signin-actions .btn-outline { flex: 1; }
.guest-signin-foot { font-size: 13px; color: var(--muted); margin-top: 14px; text-align: center; }
.guest-signin-link { background: none; border: none; color: var(--accent-bright); cursor: pointer; font-weight: 600; }

/* ── Unified content stage (old game panel format) ── */
.ss-flow-page {
  display: flex; flex-direction: column;
  min-height: 100dvh;
  max-height: 100dvh;
  padding: 20px 16px 14px;
  box-sizing: border-box;
  overflow: hidden;
  margin-left: 0; width: 100%;
}
.ss-content-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: stretch; min-height: 0; width: 100%;
  max-width: min(560px, 100%); margin: 0 auto;
}
.ss-content-col--wide { max-width: min(720px, 100%); }
.ss-lesson-page .ss-content-col { max-width: min(600px, 100%); }
.ss-lesson-page.ss-flow-page {
  max-height: none; min-height: 100dvh; overflow: visible;
}
.ss-lesson-page .ss-content-stage.ss-lesson-stage {
  flex: none; overflow: visible; min-height: auto;
  border: none; box-shadow: none; background: transparent; padding: 0;
}
.ss-lesson-page .ss-lesson-inner,
.ss-lesson-page #lesson-content .lesson-box {
  font-size: 15px; line-height: 1.75;
}
.ss-lesson-page .ss-flow-actions { margin-top: 20px; }

/* Crossword */
.ss-cw-layout {
  display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%;
}
@media (min-width: 768px) {
  .ss-cw-layout { grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); align-items: start; }
}
.ss-cw-board-wrap { width: 100%; overflow-x: auto; }
.ss-cw-grid {
  display: grid;
  grid-template-columns: repeat(var(--cw-cols, 10), minmax(28px, 36px));
  gap: 1px; width: fit-content; max-width: 100%; margin: 0 auto;
  background: var(--border); border: 2px solid var(--border); border-radius: 8px; padding: 1px;
}
.ss-cw-cell {
  position: relative; aspect-ratio: 1; min-width: 0; min-height: 28px;
  border: none; background: var(--surface); color: var(--fg);
  font-size: 14px; font-weight: 800; cursor: pointer; padding: 0;
  display: grid; place-items: center; text-transform: uppercase;
}
.ss-cw-cell--block { background: oklch(88% 0.01 265); cursor: default; }
[data-theme="dark"] .ss-cw-cell--block { background: oklch(10% 0.012 265); }
.ss-cw-cell--sel { outline: 2px solid var(--accent-bright); outline-offset: -2px; z-index: 2; }
.ss-cw-cell--word { background: var(--accent-soft); }
.ss-cw-cell--filled { color: var(--fg); }
.ss-cw-cell--bad { color: oklch(58% 0.18 25); background: oklch(94% 0.06 25); }
.ss-cw-num {
  position: absolute; top: 1px; left: 2px; font-size: 8px; font-weight: 700;
  line-height: 1; color: var(--muted); pointer-events: none;
}
.ss-cw-letter { font-size: 13px; line-height: 1; }
.ss-cw-active-clue {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--accent-soft); font-size: 13px; line-height: 1.45;
}
.ss-cw-active-clue--hint { color: var(--muted); background: transparent; padding-left: 0; }
.ss-cw-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ss-cw-clues { display: flex; flex-direction: column; gap: 14px; max-height: 50vh; overflow-y: auto; }
.ss-cw-clue-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 8px; }
.ss-cw-clue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-cw-clue-btn {
  display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--btn-ghost-bg); cursor: pointer; font-size: 13px; line-height: 1.4;
}
.ss-cw-clue-btn--on { border-color: var(--accent); background: var(--accent-soft); }
.ss-cw-clue-num { font-weight: 800; color: var(--accent-bright); flex-shrink: 0; }
.ss-game-screen--solo .ss-content-col--wide .ss-cw-layout { max-width: 100%; }
.ss-game-screen--solo .ss-cw-grid { grid-template-columns: repeat(var(--cw-cols, 10), minmax(26px, 34px)); }
.ss-flow-meta { flex-shrink: 0; margin-bottom: 10px; }
.ss-flow-actions { flex-shrink: 0; margin-top: 10px; }
.ss-flow-flashcards {
  flex-shrink: 0; max-height: min(38vh, 320px);
  overflow-y: auto; margin-top: 10px;
}
.ss-content-stage,
.ss-game-host.ss-content-stage {
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .ss-content-stage,
[data-theme="dark"] .ss-game-host.ss-content-stage {
  background: var(--card-bg, oklch(11% 0.014 265));
  border-color: oklch(30% 0.05 283 / 55%);
  box-shadow: 0 8px 32px oklch(0% 0 0 / 28%), inset 0 1px 0 oklch(100% 0 0 / 4%);
}
.ss-lesson-inner,
.ss-content-stage .lesson-box,
.ss-content-stage #lesson-content {
  border: none; box-shadow: none; background: transparent;
  padding: 0; margin: 0; font-size: 14px; line-height: 1.65;
}
.ss-lesson-stage { max-height: none; }
.ss-quiz-stage .ss-quiz-q { margin-top: 0; font-size: clamp(17px, 3.5vw, 20px); }
.ss-quiz-stage .ss-quiz-opt,
.ss-quiz-stage .option-btn { margin-bottom: 8px; padding: 12px 14px; font-size: 14px; }
.ss-quiz-next-btn { width: 100%; margin-top: 12px; }
.ss-result-stage.ss-result-center { padding-top: 12px; text-align: center; }
.ss-result-stage .ss-result-emoji { font-size: 44px; margin-bottom: 4px; }
.ss-result-stage .ss-result-score { font-size: 44px; margin-bottom: 4px; }
.ss-result-stage .ss-result-sub { margin-bottom: 14px; font-size: 14px; }
.ss-result-stage .result-cards-row { margin-bottom: 14px; }
.ss-result-stage .xp-bar-wrap { margin-bottom: 14px; }

/* Game title above stage */
.ss-content-col > .ss-game-title {
  flex-shrink: 0; text-align: center;
  font-family: var(--font-display); font-size: clamp(22px, 4.5vw, 28px);
  font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.ss-game-panel { padding: 0; border: none; background: transparent; box-shadow: none; }
.ss-game-study-panel { padding: 0; }
.ss-game-screen--solo .ss-game-panel.ss-content-stage,
.ss-game-screen--solo .ss-content-col--wide .ss-content-stage.ss-game-host {
  overflow: visible; flex: 1 1 auto;
}
.ss-game-screen--solo .ss-page-wide.ss-flow-page { overflow-y: auto; }
#tf-next, #fib-next { width: 100%; margin-top: 12px; }

/* Game internals (from previous design) */
.ss-game-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 12px; flex-wrap: wrap;
}
.ss-game-q { font-size: 17px; font-weight: 700; line-height: 1.45; margin: 0 0 14px; }
.ss-game-options { display: flex; flex-direction: column; gap: 8px; }
.ss-game-opt {
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--btn-ghost-bg); color: var(--fg); font-size: 14px;
  font-weight: 600; text-align: left; cursor: pointer; transition: var(--ease);
}
.ss-game-opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.ss-game-done { text-align: center; padding: 12px 0; }
.ss-game-done h2 { font-size: 22px; margin-bottom: 8px; }

.ss-hangman-stage {
  display: flex; align-items: center; justify-content: center;
  max-height: 130px; margin: 4px 0 8px; overflow: hidden;
}
.ss-hangman-svg { width: auto; max-width: 150px; max-height: 120px; height: auto; display: block; }
.ss-hangman-word {
  text-align: center; font-size: clamp(16px, 3.5vw, 20px); font-weight: 800;
  letter-spacing: 0.18em; margin: 6px 0 10px; word-break: break-word;
}
.ss-hangman-keys {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
  max-width: 100%; margin-top: 4px;
}
.ss-hang-key, .ss-hangman-key {
  min-width: 30px; height: 34px; padding: 0 8px;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--btn-ghost-bg); color: var(--fg);
  font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--ease);
}
.ss-hang-key:hover:not(.used), .ss-hangman-key:hover:not(.used) {
  border-color: var(--accent); background: var(--accent-soft);
}
.ss-hang-key.used, .ss-hangman-key.used { opacity: 0.35; pointer-events: none; }

.ss-bingo-clue {
  border-radius: 12px; border: 1px solid oklch(78% 0.14 85 / 45%);
  background: oklch(94% 0.06 85 / 35%); padding: 12px 14px; margin-bottom: 12px;
}
[data-theme="dark"] .ss-bingo-clue {
  background: oklch(22% 0.06 85 / 40%); border-color: oklch(55% 0.12 85 / 40%);
}
.ss-bingo-clue-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: oklch(55% 0.14 85); margin-bottom: 4px;
}
[data-theme="dark"] .ss-bingo-clue-lbl { color: oklch(78% 0.14 85); }
.ss-bingo-clue-txt { font-size: 16px; font-weight: 700; line-height: 1.35; }
.ss-bingo-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
}
.ss-bingo-cell {
  aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--border);
  background: var(--btn-ghost-bg); padding: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--ease); min-height: 0;
}
.ss-bingo-cell-txt {
  font-size: clamp(8px, 2.2vw, 11px); font-weight: 700; line-height: 1.15;
  text-align: center; word-break: break-word;
}
.ss-bingo-cell--free .ss-bingo-cell-txt { color: var(--accent-bright); }
.ss-bingo-cell--marked { border-color: var(--growth); background: var(--growth-soft); }
.ss-bingo-cell--marked .ss-bingo-cell-txt { color: var(--growth-bright); }

.ss-game-enter { animation: ssGameEnter 0.35s ease both; }
@keyframes ssGameEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Solo game screens — fit one viewport */
.ss-game-screen--solo::before { display: none !important; }
.ss-game-screen--solo .ss-v2-topbar,
.ss-game-screen--solo .ss-game-topbar { left: 0; right: 0; }
.ss-game-screen--solo .ss-flow-page {
  max-width: 100%; padding-top: 20px;
}
.ss-game-screen--solo .ss-content-stage.ss-game-host {
  display: flex; flex-direction: column; align-items: center;
}
.ss-game-screen--solo .ss-game-head,
.ss-game-screen--solo .ss-game-q,
.ss-game-screen--solo .ss-game-options,
.ss-game-screen--solo .ss-hangman-stage,
.ss-game-screen--solo .ss-hangman-word,
.ss-game-screen--solo .ss-hangman-keys,
.ss-game-screen--solo .ss-wordle-board,
.ss-game-screen--solo .ss-wordle-kb,
.ss-game-screen--solo .ss-memory-grid,
.ss-game-screen--solo .ss-game-end-row {
  width: 100%; max-width: 480px;
}
.ss-game-screen--solo .ss-wordle-kb { max-width: min(100%, 480px); }
.ss-game-screen--solo .ss-wordle-cell { width: 42px; height: 42px; font-size: 16px; }
.ss-game-screen--solo .ss-memory-grid { max-width: min(100%, 380px); }
.ss-game-screen--solo .ss-content-col--wide { max-width: min(800px, 100%); }
.ss-game-screen--solo .ss-content-col--wide .ss-content-stage.ss-game-host > * { max-width: 100%; }

.ss-lesson-screen .ss-flow-page,
.ss-quiz-screen .ss-flow-page,
.ss-result-screen .ss-flow-page {
  max-width: 100%;
}

@media (max-width: 640px) {
  .ss-flow-page { padding: 48px 12px 12px; }
  .ss-content-stage { padding: 14px 16px; border-radius: 14px; }
  .ss-hangman-svg { max-width: 130px; max-height: 100px; }
  .ss-game-screen--solo .ss-wordle-cell { width: 36px; height: 36px; font-size: 14px; }
}

.ss-play-loading {
  display: none; position: fixed; inset: 0; z-index: 800;
  align-items: center; justify-content: center;
  background: oklch(0% 0 0 / 45%); backdrop-filter: blur(6px);
}

/* Session restore — hide login flash while token is validated */
html.ss-auth-restoring #screen-login {
  visibility: hidden;
  pointer-events: none;
}
html.ss-auth-restoring body {
  overflow: hidden;
}

/* Ask AI drawer message list */
.ss-ask-drawer-feed.has-messages {
  justify-content: flex-start;
}
.ss-ask-drawer-feed.has-messages .ss-ask-welcome {
  display: none !important;
}
.ss-v2-sidebar-footer .ss-v2-logout-btn,
.ss-v2-sidebar-footer .ss-v2-signin-btn,
.ss-v2-sidebar-footer [data-ss-auth-action="logout"] {
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.ss-ask-drawer-msgs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  flex: 1;
  min-height: 0;
  padding-bottom: 8px;
}
#ask-drawer .ss-ask-drawer-feed.has-messages {
  justify-content: flex-start;
  align-items: stretch;
}
#ask-drawer .ss-ask-drawer-msgs .ask-img-attached {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 8px;
}
.ss-play-loading.is-visible { display: flex; }

/* ── Play arcade: vivid per-game tiles ── */
.ss-play-tile {
  --play-accent: #6366f1;
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--play-accent) 55%, var(--border));
  background: linear-gradient(165deg, color-mix(in srgb, var(--play-accent) 14%, var(--surface)) 0%, var(--card-bg) 62%);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--play-accent) 16%, transparent), var(--shadow-card);
}
.ss-play-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--play-accent) 22%, transparent) 0%, transparent 58%);
  opacity: 0.75;
  pointer-events: none;
}
.ss-play-tile:hover {
  border-color: color-mix(in srgb, var(--play-accent) 78%, var(--border));
  box-shadow: 0 8px 28px color-mix(in srgb, var(--play-accent) 28%, transparent), var(--shadow-lift);
  transform: translateY(-4px);
}
.ss-play-tile:hover::before { opacity: 1; }
.ss-play-tile .ss-game-card-icon,
.ss-play-tile-icon {
  position: relative;
  z-index: 1;
  background: linear-gradient(145deg, color-mix(in srgb, var(--play-accent) 28%, white) 0%, color-mix(in srgb, var(--play-accent) 14%, white) 100%) !important;
  color: var(--play-accent) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--play-accent) 32%, transparent) !important;
}
.ss-play-tile:hover .ss-game-card-icon,
.ss-play-tile:hover .ss-play-tile-icon {
  transform: scale(1.08);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--play-accent) 42%, transparent) !important;
}
.ss-play-tile .ss-game-card-title,
.ss-play-tile .ss-game-card-sub,
.ss-play-tile-pro {
  position: relative;
  z-index: 1;
}
.ss-play-tile-pro {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
[data-theme="dark"] .ss-play-tile {
  border-color: color-mix(in srgb, var(--play-accent) 62%, var(--border));
  background: linear-gradient(165deg, color-mix(in srgb, var(--play-accent) 26%, oklch(12% 0.02 265)) 0%, oklch(11% 0.018 265) 58%, oklch(9% 0.014 265) 100%);
  box-shadow: 0 0 28px color-mix(in srgb, var(--play-accent) 22%, transparent), var(--shadow-card);
}
[data-theme="dark"] .ss-play-tile::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--play-accent) 34%, transparent) 0%, transparent 60%);
  opacity: 0.85;
}
[data-theme="dark"] .ss-play-tile:hover {
  border-color: color-mix(in srgb, var(--play-accent) 82%, var(--border));
  box-shadow: 0 0 36px color-mix(in srgb, var(--play-accent) 34%, transparent), var(--shadow-lift);
}
[data-theme="dark"] .ss-play-tile .ss-game-card-icon,
[data-theme="dark"] .ss-play-tile-icon {
  background: linear-gradient(145deg, color-mix(in srgb, var(--play-accent) 42%, oklch(14% 0.02 265)) 0%, color-mix(in srgb, var(--play-accent) 22%, oklch(10% 0.015 265)) 100%) !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--play-accent) 52%, transparent) !important;
}
[data-theme="dark"] .ss-play-tile:hover .ss-game-card-icon,
[data-theme="dark"] .ss-play-tile:hover .ss-play-tile-icon {
  box-shadow: 0 0 28px color-mix(in srgb, var(--play-accent) 62%, transparent) !important;
}

/* ── Logout icon: never white tile in dark mode ── */
html[data-theme="dark"] .ss-v2-logout-btn,
html[data-dark="true"] .ss-v2-logout-btn {
  background: transparent !important;
  color: var(--muted) !important;
}
html[data-theme="dark"] .ss-v2-logout-btn:hover,
html[data-dark="true"] .ss-v2-logout-btn:hover {
  background: rgba(148, 163, 184, 0.1) !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .ss-v2-sidebar .ss-nav-icon--logout,
html[data-theme="dark"] .ss-v2-sidebar-footer .ss-nav-icon--logout,
html[data-dark="true"] .ss-v2-sidebar .ss-nav-icon--logout,
html[data-dark="true"] .ss-v2-sidebar-footer .ss-nav-icon--logout {
  background: linear-gradient(145deg, #334155 0%, #1e293b 100%) !important;
  color: #94a3b8 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35) !important;
}
html[data-theme="dark"] .ss-v2-sidebar .ss-v2-logout-btn:hover .ss-nav-icon--logout,
html[data-theme="dark"] .ss-v2-sidebar-footer .ss-v2-logout-btn:hover .ss-nav-icon--logout,
html[data-dark="true"] .ss-v2-sidebar .ss-v2-logout-btn:hover .ss-nav-icon--logout,
html[data-dark="true"] .ss-v2-sidebar-footer .ss-v2-logout-btn:hover .ss-nav-icon--logout {
  background: linear-gradient(145deg, #3d4f66 0%, #243044 100%) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.45) !important;
}
html[data-theme="dark"] .ss-v2-sidebar .ss-nav-icon--logout svg,
html[data-theme="dark"] .ss-v2-sidebar-footer .ss-nav-icon--logout svg,
html[data-dark="true"] .ss-v2-sidebar .ss-nav-icon--logout svg,
html[data-dark="true"] .ss-v2-sidebar-footer .ss-nav-icon--logout svg {
  stroke: currentColor;
}