/* SGX-inspired layout language, adapted to an education product. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050506;
  --surface: #111113;
  --raised: #1c1c20;
  --ink: #f7f7f9;
  --muted: #aaaab2;
  --line: #2d2d32;
  --accent: #bc91ff;
  --accent-soft: #261a38;
  --accent-mid: #60448a;
  --strong: #7948d8;
  --on-strong: #fff;
  --hero-bg: #0b0a0f;
  --hero-ink: #fff;
  --hero-muted: #c3bbc9;
  --hero-accent: #c49aff;
  --hero-button-bg: rgba(20, 18, 25, .88);
  --hero-button-ink: #fff;
  --progress-track: #36303e;
  --green: var(--ink);
  --green2: #705293;
  --mint: var(--raised);
  --lavender: var(--accent-soft);
  --focus: #d1aaff;
  --shadow: none;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f3f6;
  --surface: #fff;
  --raised: #eeedf2;
  --ink: #141318;
  --muted: #55535e;
  --line: #dedce4;
  --accent: #6940ad;
  --accent-soft: #eee7f7;
  --accent-mid: #cbb9e7;
  --strong: #7043bd;
  --on-strong: #fff;
  --hero-bg: #0b0a0f;
  --hero-ink: #fff;
  --hero-muted: #c3bbc9;
  --hero-accent: #c49aff;
  --hero-button-bg: rgba(20, 18, 25, .88);
  --hero-button-ink: #fff;
  --green: var(--ink);
  --green2: #8f75b0;
  --mint: var(--raised);
  --lavender: var(--accent-soft);
  --focus: #7043bd;
  --shadow: none;
}

body { background: var(--bg); }
.app-shell { max-width: 650px; background: var(--bg); box-shadow: none; padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.topbar { height: calc(84px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 24px 0; gap: 12px; }
.brand-mark { width: 32px; height: 32px; transform: skew(-15deg); }
.brand-mark span { background: var(--ink); border-radius: 2px; }
.brand-mark span:nth-child(2) { background: var(--accent); }
.brand-name { color: var(--ink); font-size: 21px; font-weight: 830; letter-spacing: -.055em; }
.mode-pill { margin-left: auto; padding: 7px 11px; background: var(--surface); color: var(--accent); border: 1px solid var(--line); border-radius: 999px; font-size: 10px; letter-spacing: .1em; }
main { padding: 18px 24px 48px; }
.page-title { font-size: clamp(36px, 9vw, 46px); font-weight: 790; letter-spacing: -.065em; line-height: 1.08; margin: 2px 0 5px; }
.lead { color: var(--muted); font-size: 15px; line-height: 1.45; margin-bottom: 29px; }
.section-head { margin: 30px 0 13px; }
.section-title { font-size: 23px; font-weight: 760; letter-spacing: -.045em; }
.section-count { color: var(--muted); }

.home-intro { margin: 8px 0 26px; }
.home-intro .lead { margin-bottom: 0; }
.home-intro-mark { color: var(--accent); display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .15em; margin-bottom: 10px; }
.home-focus, .plan-banner, .topic-card:first-child {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--hero-bg); border: 1px solid var(--line);
}
.home-focus::before, .plan-banner::before, .topic-card:first-child::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(ellipse at 78% 78%, rgba(132, 51, 255, .82), transparent 32%),
              radial-gradient(ellipse at 20% 27%, rgba(91, 38, 172, .33), transparent 25%);
}
.home-focus::after, .plan-banner::after, .topic-card:first-child::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .52;
  background-image: radial-gradient(circle, #050506 1.7px, transparent 2px);
  background-size: 6px 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
  pointer-events: none;
}
.home-focus { padding: 20px 23px 22px; border-radius: 31px; min-height: 294px; }
.focus-top { align-items: center; }
.focus-date { color: #d2c4df; font-size: 12px; font-weight: 650; }
.focus-edit { display: inline-flex; align-items: center; gap: 3px; color: #d7c2f3; border: 0; text-decoration: none; font-size: 11px; }
.focus-edit .icon { width: 14px; height: 14px; }
.focus-caption { display: block; color: #c9adf1; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .16em; margin-top: 25px; }
.focus-score { color: #fff; text-align: center; font-size: clamp(61px, 17vw, 82px); line-height: 1.08; font-weight: 710; letter-spacing: -.09em; font-variant-numeric: tabular-nums; margin: 4px 0 1px; }
.focus-score span { font-size: .52em; color: #c8c1d0; letter-spacing: -.06em; }
.focus-description { text-align: center; color: #e0d6ec; font-size: 13px; margin: 0 0 17px; }
.focus-track { height: 3px; background: #41334f; margin: 0 2px 17px; }
.focus-track span { background: #bc91ff; }
.focus-action { min-height: 57px; border: 1px solid #48414e; border-radius: 999px; background: rgba(14, 13, 17, .9); color: #fff; font-size: 14px; padding-left: 19px; }
.focus-action:hover { background: #1e1927; border-color: #8d64c4; }
.focus-arrow { background: #28212f; border-radius: 50%; }
.home-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shortcut-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 152px; padding: 17px; border: 1px solid var(--line); border-radius: 25px; background: var(--surface); color: var(--ink); text-align: left; transition: border-color .2s, background-color .2s, transform .2s; }
.shortcut-card > .icon { width: 25px; height: 25px; margin-bottom: auto; }
.shortcut-card strong { font-size: 19px; font-weight: 750; letter-spacing: -.03em; }
.shortcut-card span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.shortcut-card span .icon { width: 14px; height: 14px; }
.shortcut-card:hover { border-color: var(--accent-mid); background: var(--raised); }
.shortcut-card:active { transform: scale(.985); }
.home-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; margin-top: 13px; }
.home-metrics > div, .home-metrics > div + div { min-height: 107px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); padding: 18px; }
.home-metrics strong { font-size: 30px; }
.home-metrics span { font-size: 12px; }
.home-week { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 18px; }
.home-week .bar-track { background: var(--raised); }

.plan-banner { min-height: 133px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; border-radius: 30px; border-left: 1px solid var(--line); margin-bottom: 27px; }
.plan-banner strong { color: #fff; font-size: 20px; font-weight: 750; }
.plan-banner span { color: #d7cddd; font-size: 13px; max-width: 30ch; line-height: 1.35; margin-top: 4px; }
.topic-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border: 0; }
.topic-card, .topic-card:first-child { min-width: 0; width: 100%; min-height: 168px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 18px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); color: var(--ink); text-align: left; transition: border-color .2s, background-color .2s, transform .2s; }
.topic-card:first-child { grid-column: 1 / -1; min-height: 165px; background: var(--hero-bg); }
.topic-card:first-child .topic-info strong, .topic-card:first-child .topic-glyph { color: #fff; }
.topic-card:first-child .topic-info small { color: #d8cce4; }
.topic-card:first-child .topic-next { color: #e8d4ff; }
.topic-card .topic-glyph, .topic-card:nth-child(even) .topic-glyph { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: var(--raised); color: var(--ink); font-size: 19px; }
.topic-card:first-child .topic-glyph { background: #20192d; }
.topic-info { flex: none; margin-top: auto; width: 100%; padding-right: 13px; }
.topic-info strong { font-size: 17px; line-height: 1.17; }
.topic-info small { font-size: 11px; margin-top: 6px; }
.topic-next { font-size: 11px; line-height: 1.2; margin-top: 4px; }
.topic-card > .due-dot { position: absolute; top: 24px; right: 24px; }
.topic-card > .icon { position: absolute; bottom: 20px; right: 15px; width: 15px; height: 15px; }
.topic-card:hover { border-color: var(--accent-mid); background-color: var(--raised); }
.topic-card:first-child:hover { background-color: var(--hero-bg); }
.topic-card:active { transform: scale(.985); }
.add-card { grid-column: 1 / -1; min-height: 59px; justify-content: center; padding: 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; }
.add-card:hover { background: var(--raised); border-color: var(--accent-mid); }
.empty { grid-column: 1 / -1; border: 1px solid var(--line); background: var(--surface); border-radius: 24px; }

.plan-list, .exercise-list, .tile-grid { display: grid; gap: 11px; border: 0; }
.plan-card, .exercise-card, .tile, .tile:nth-child(n), :root[data-theme="dark"] .tile:nth-child(n) { min-height: 78px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); padding: 14px 16px; }
.plan-card:hover, .exercise-card:hover, .tile:hover { background: var(--raised); border-color: var(--accent-mid); }
.tile-grid { grid-template-columns: 1fr; }
.tile, .tile:nth-child(n), :root[data-theme="dark"] .tile:nth-child(n) { gap: 15px; }
.tile .icon { color: var(--accent); }
.plan-marker, .topic-glyph, .skill-glyph, .exercise-num { background: var(--raised); color: var(--accent); }
.phase-number, :root[data-theme="dark"] .phase-number { background: var(--accent-soft); color: var(--accent); }
.panel, .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.button { border-radius: 15px; }
.button-primary, :root[data-theme="dark"] .button-primary { background: var(--strong); color: var(--on-strong); }
.button-primary:hover, :root[data-theme="dark"] .button-primary:hover { background: #8d5ce8; color: #fff; }
.button-soft, .button-outline { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.button-soft:hover, .button-outline:hover { border-color: var(--accent-mid); background: var(--raised); }
.map-center, .flash-card, .slide-card, .recall-prompt, :root[data-theme="dark"] .map-center, :root[data-theme="dark"] .flash-card, :root[data-theme="dark"] .slide-card, :root[data-theme="dark"] .recall-prompt { background: #1b1425; color: #fff; border: 1px solid var(--accent-mid); }
.flash-card.revealed { background: var(--surface); color: var(--ink); }
.slide-number, .recall-prompt span, .recall-prompt small { color: #d4b7ff; }
.option.selected { background: var(--accent-soft); border-color: var(--accent); }
.option.correct { background: #183a2a; border-color: #548d6a; }
.option.wrong { background: #3c2428; border-color: #ae666c; }

#app[data-screen="settings"] .panel { background: transparent; border: 0; padding: 0; }
#app[data-screen="settings"] .subscription-panel, #app[data-screen="settings"] .about-panel { background: var(--surface); border: 1px solid var(--line); padding: 20px; border-radius: 26px; }
#app[data-screen="settings"] .setting-row { min-height: 84px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
#app[data-screen="settings"] .separator { height: 11px; background: transparent; margin: 0; }
#app[data-screen="settings"] .setting-row strong { font-size: 15px; }
#app[data-screen="settings"] .setting-row span { font-size: 12px; }
#app[data-screen="settings"] .theme-picker { gap: 11px; }
#app[data-screen="settings"] .theme-choice { border-radius: 20px; min-height: 100px; background: var(--surface); }
#app[data-screen="settings"] #profile-form { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 20px; }
#app[data-screen="settings"] .input { background: var(--raised); border-color: var(--line); }
.settings-link { background: var(--raised); color: var(--ink); border: 1px solid var(--line); }
.settings-link.danger { color: #f2b8c1; }

.bottom-nav, :root[data-theme="dark"] .bottom-nav { bottom: max(13px, env(safe-area-inset-bottom)); width: min(calc(100% - 34px), 600px); height: 72px; padding: 7px; border: 1px solid var(--line); border-radius: 999px; background: rgba(20, 20, 23, .96); box-shadow: 0 14px 40px #0006; backdrop-filter: blur(18px); }
:root[data-theme="light"] .bottom-nav { background: rgba(255, 255, 255, .96); box-shadow: 0 12px 32px #1512201c; }
.nav-item { flex: 1; min-width: 0; border-radius: 999px; color: #87878e; background: transparent; }
.nav-item .icon { width: 24px; height: 24px; }
.nav-item span { display: none; }
.nav-item.active { color: #fff; background: #29252f; border-radius: 999px; }
:root[data-theme="light"] .nav-item.active { color: #341f4c; background: #eee7f7; }
.nav-item:hover { color: var(--accent); }
.nav-item:active { transform: scale(.96); }
.toast { bottom: calc(98px + env(safe-area-inset-bottom)); }

button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (min-width: 768px) {
  body { padding: 0; }
  .app-shell { min-height: 100dvh; border-radius: 0; }
  main { padding-inline: 30px; }
}
@media (max-width: 390px) {
  main { padding-inline: 18px; }
  .topbar { padding-inline: 18px; }
  .home-focus { padding-inline: 18px; }
  .topic-card { padding: 14px; }
  .topic-card .topic-glyph { width: 36px; height: 36px; }
  .topic-info strong { font-size: 15px; }
  .topic-info small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .shortcut-card, .topic-card, .nav-item { transition: none; }
}