/* T1 RISE — dark purple-gold shell. Light theme is deferred; both .dark and the default use this set. */
:root, .dark {
  --bg-base: #07070B;
  --bg-elevated: #111118;
  --bg-sunken: #0B0B10;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --text-primary: #F4F2F7;
  --text-secondary: #9A96A8;
  --text-muted: #6B6778;
  --accent-purple: #7B5CFF;
  --accent-purple-soft: rgba(123, 92, 255, 0.18);
  --accent-gold: #E8B86D;
  --accent-gold-glow: rgba(232, 184, 109, 0.35);
  --bg: var(--bg-base);
  --card: var(--bg-elevated);
  --sidebar: var(--bg-sunken);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-subtle);
  --blue: var(--accent-purple);
  --blue-soft: var(--accent-purple-soft);
  --purple: var(--accent-purple);
  --green: #3E9A78;
  --orange: #C4924A;
  --pink: #C56B86;
  --shadow: none;
  color-scheme: dark;
}

html, body {
  background: var(--bg-base);
  color: var(--text-primary);
}

body {
  font-size: 15px;
  line-height: 1.55;
  background: var(--bg-base);
}

body[data-domain="home"],
body[data-domain="ai"],
body[data-domain="review"] {
  background:
    radial-gradient(ellipse 78% 36% at 50% -8%, rgba(123, 92, 255, 0.2), transparent 58%),
    radial-gradient(ellipse 42% 24% at 78% 0%, rgba(232, 184, 109, 0.12), transparent 52%),
    var(--bg-base);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(123, 92, 255, 0.7);
  outline-offset: 3px;
}

.sidebar {
  background: var(--bg-sunken);
  border-right: 1px solid var(--border-subtle);
  backdrop-filter: none;
  color: var(--text-primary);
}

.brand-icon {
  background: transparent;
  color: var(--accent-gold);
  border: 1px solid rgba(123, 92, 255, 0.7);
  box-shadow: 0 0 16px rgba(123, 92, 255, 0.28);
}

.nav-link {
  color: var(--text-secondary);
}

.nav-link.active,
.dark .nav-link.active,
.nav-link.parent-active {
  background: var(--accent-purple-soft);
  color: var(--text-primary);
  box-shadow: none;
}

.nav-link:hover:not(.active) {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.subnav a.active,
.dark .subnav a.active,
.subtabs a.active,
.mobile-nav a.active {
  background: var(--accent-purple-soft);
  color: var(--text-primary);
  border-color: transparent;
  box-shadow: none;
}

.mobile-nav {
  background: var(--bg-sunken);
  border-top: 1px solid var(--border-subtle);
}

.mobile-nav a {
  width: calc(100% / 7) !important;
  flex: 1 1 0;
  color: var(--text-muted);
}

header,
.dark header,
.dark .sidebar {
  background: transparent;
  border-bottom-color: var(--border-subtle);
  color: var(--text-muted);
}

#theme,
header .header-tools a.avatar {
  display: none !important;
}

.side-account {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
}

.save-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 8px var(--accent-gold-glow);
  display: inline-block;
}

.side-foot .avatar {
  width: 22px;
  height: 22px;
  font-size: 10px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.shell, main, .card, dialog {
  color: var(--text-primary);
}

.card,
.dark .rank-board,
.dark .route-card,
.dark .ws-card,
.rank-board,
.route-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
  color: var(--text-primary);
}

.card { border-radius: 18px; }

.ws-heading h1 {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.eyebrow { color: var(--accent-gold); }

.btn {
  background: var(--accent-purple);
  color: #fff;
  border: 0;
  border-radius: 13px;
  box-shadow: 0 0 16px rgba(123, 92, 255, 0.22);
}

.btn.secondary,
a.btn.secondary,
.route-card .short-day,
.dark .route-card .short-day {
  background: transparent;
  color: var(--accent-purple);
  border: 1px solid rgba(123, 92, 255, 0.55);
  box-shadow: none;
}

.text-btn { color: var(--text-secondary); }

body[data-domain="english"] main .btn:not(.secondary):not([data-step-next]):not([data-ws-day]) {
  background: transparent;
  color: var(--accent-purple);
  border: 1px solid rgba(123, 92, 255, 0.55);
  box-shadow: none;
}

input, textarea, select,
.ws-field input, .ws-field textarea, .ws-field select,
.dark .ws-field input, .dark .ws-field textarea, .dark .ws-field select,
.field input {
  background: var(--bg-sunken);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.fine, .ws-heading p, .card .fine { color: var(--text-muted); }

footer, .accept-foot, .demo-foot, #offline-demo-banner {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
}

.demo-foot .text-btn, #offline-demo-banner .text-btn { font-size: 11px; }

.enter-gate {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 32px;
  background:
    radial-gradient(ellipse 68% 36% at 50% 46%, rgba(123, 92, 255, 0.28), transparent 62%),
    radial-gradient(ellipse 36% 22% at 62% 50%, rgba(232, 184, 109, 0.16), transparent 58%),
    var(--bg-base);
}

.enter-gate[hidden] { display: none !important; }

body.is-entering .sidebar,
body.is-entering .shell,
body.is-entering .mobile-nav { visibility: hidden; }

.enter-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.enter-light { flex: 1; min-height: 120px; }

.enter-go {
  width: min(420px, 100%);
  margin: 0 auto 6vh;
  min-height: 52px;
  font-size: 16px;
}

.rise-arc {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 22px 18px 18px;
}

.rise-arc-visual { position: relative; width: min(280px, 100%); }

.rise-arc svg { width: 100%; height: auto; display: block; }

.rise-track { color: rgba(255, 255, 255, 0.08); }

.rise-fill {
  color: var(--accent-gold);
  filter: drop-shadow(0 0 6px var(--accent-gold-glow));
}

.rise-fill[stroke-dasharray^="0 "] { opacity: 0; }

.rise-arc-num {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
}

.rise-arc-num strong {
  display: block;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent-gold);
}

.rise-arc-num span, .rise-arc > p { color: var(--text-secondary); font-size: 13px; }

.rise-arc .text-btn { margin-top: 4px; }

.today-card { background: var(--bg-elevated); }

.today-row .support-icon,
.support-icon.blue, .support-icon.green, .support-icon.purple, .support-icon.orange,
.dark .support-icon.blue, .dark .support-icon.green, .dark .support-icon.purple, .dark .support-icon.orange {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.today-row .btn { border-radius: 12px; }

.today-more a[data-english-resume="continue"] {
  color: var(--text-muted);
  font-size: 12px;
}

.cefr-orb {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 4px auto 8px;
  display: grid;
  place-items: center;
}

.cefr-orb-ring {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: conic-gradient(from 220deg, var(--accent-gold) calc(var(--cefr-turn) * 1%), rgba(255, 255, 255, 0.08) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  box-shadow: 0 0 22px rgba(232, 184, 109, 0.12);
}

.cefr-orb-ring[style*="--cefr-turn:0"] {
  background: rgba(255, 255, 255, 0.1);
}

.cefr-orb-core { position: absolute; text-align: center; }

.cefr-orb-core strong {
  display: block;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent-gold);
  line-height: 1;
}

.cefr-orb-core span { color: var(--text-secondary); font-size: 12px; }

.cefr-orb-note { text-align: center; max-width: 36em; margin: 0 auto 12px; }

.cefr-ladder li {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

.rank-current h2, .rank-current p, .rank-current span { color: var(--text-primary); }
.rank-current p, .rank-current span { color: var(--text-secondary); }

.course-days button.active,
.course-day-main.active,
.dark .course-days button.active,
.dark .course-day-main.active,
.course-days .course-day-card:has(.course-day-main.active),
.dark .course-days .course-day-card:has(.course-day-main.active) {
  background: var(--accent-purple-soft);
  border-color: rgba(123, 92, 255, 0.45);
  box-shadow: none;
  color: var(--text-primary);
}

.task-toggle,
.task-toggle.checked,
.step-state {
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.task-toggle.checked {
  border-color: rgba(232, 184, 109, 0.5);
  color: var(--accent-gold);
}

.step-state {
  background: var(--accent-purple-soft);
  color: var(--text-primary);
}

.route-card button.active,
.dark .route-card button.active {
  background: var(--accent-purple-soft);
  color: var(--text-primary);
}

.step-circle {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text-secondary);
}

.route-card button.active .step-circle {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: #fff;
}

.step-circle.done {
  background: transparent;
  color: var(--accent-gold);
  border-color: var(--accent-gold);
}

.route-card button.active .step-circle.done {
  background: var(--accent-purple);
  color: var(--accent-gold);
  border-color: var(--accent-purple);
}

.time-box, .dark .time-box {
  background: var(--bg-sunken);
  color: var(--text-secondary);
}

.time-box strong { color: var(--accent-gold); }

.read-cell { background: var(--bg-sunken); border-color: var(--border-subtle); }

.read-bar > span { background: var(--accent-purple); }

.read-bar.is-complete > span {
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-gold));
}

.read-daily blockquote {
  border-left-color: var(--accent-purple);
  background: var(--bg-sunken);
}

.reading-book-switch, .dark .reading-book-switch {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.ts-reader {
  --reader-ink: var(--text-primary);
  --reader-line: var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.ts-reader-page, .ts-reader-dark .ts-reader-page {
  background: var(--bg-sunken);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.ts-reader button, .ts-reader select, .ts-reader-import,
.ts-reader-dark button, .ts-reader-dark select {
  background: var(--bg-sunken);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.ts-reader-import { background: transparent; color: var(--accent-purple); border-color: rgba(123, 92, 255, 0.55); }

.ts-reader-head small, .ts-reader-notice, .ts-reader-help, .ts-reader-status,
.ts-reader-dark .ts-reader-head small, .ts-reader-dark .ts-reader-notice, .ts-reader-dark .ts-reader-help, .ts-reader-dark .ts-reader-status {
  color: var(--text-muted);
}

.bp-supplement {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
}

.bp-supplement-slot {
  border-left: 0;
  position: relative;
  padding-left: 16px;
}

.bp-supplement-slot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-gold);
  position: absolute;
  left: 0;
  top: 0.45em;
}

.bp-supplement-slot:nth-child(odd)::before { background: var(--accent-purple); }

.bp-vit, .dark .bp-vit {
  background: var(--bg-sunken);
  border-color: var(--border-subtle);
}

.banner, .dark .banner {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  box-shadow: none;
}

.banner p { color: var(--text-secondary); }

.banner h2 { font-size: 22px !important; font-weight: 650; letter-spacing: -0.03em; }

.rank-seal {
  background: transparent;
  color: var(--accent-gold);
  clip-path: none;
  box-shadow: none;
}

.event-row {
  border-left: 2px solid transparent;
  padding: 8px 8px 8px 10px;
  border-radius: 10px;
}

.event-row:hover {
  background: var(--accent-purple-soft);
  border-left-color: var(--accent-purple);
}

.timeline-item:before { background: var(--accent-purple); }

.soft-note, .storage-bar, .ws-storage {
  background: var(--bg-sunken);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.tile, .tile.green, .tile.pink, .tile.purple, .tile.orange {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.check.done, .model-controls .active, .segmented button.active {
  background: var(--accent-purple);
  color: #fff;
  border-color: var(--accent-purple);
}

.segmented, .dark .segmented { background: var(--bg-sunken); }

.model-card, .dark .model-card {
  background: radial-gradient(ellipse at 50% 35%, #1a1a24, var(--bg-elevated));
}

.fitness-quick, body.dark .fitness-quick {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.answer-option:has(input:checked),
.dark .answer-option:has(input:checked) {
  background: var(--accent-purple-soft);
  color: var(--text-primary);
}

[data-account-card] { max-width: 640px; }

#live-sync-host .card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-top: 0;
  color: var(--text-muted);
}

@media (max-width: 620px) {
  body[data-domain="home"] .ws-heading h1 { font-size: 28px; }
  .rise-arc-num strong { font-size: 28px; }
  .enter-go { margin-bottom: 4vh; }
}