/*
 * Canonical dark-theme finish layer.
 * Keep this stylesheet last in app.html: several feature stylesheets define
 * their own dark surfaces, and this layer brings them back to one neutral,
 * graphite palette while reserving saturated color for meaning and focus.
 */

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151617;
  --surface: #202225;
  --surface-subtle: #292c30;
  --surface-raised: #30343a;
  --text: #f4f5f7;
  --text-soft: #c3c7ce;
  --text-faint: #949ba6;
  --border: #383c43;
  --border-strong: #565d68;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #1d2e4f;
  --accent-border: #315b96;
  --accent-ink: #9fc2ff;

  --success: #42d39a;
  --success-soft: #19362c;
  --success-border: #2d654e;
  --warning: #f6ad55;
  --warning-soft: #3b2c1d;
  --warning-border: #765329;
  --danger: #fb8291;
  --danger-soft: #3e262c;
  --blue: #b39af8;
  --blue-soft: #332c49;

  --workspace-lilac: #342d49;
  --workspace-peach: #44302b;
  --workspace-sage: #293633;
  --vivid-violet: #a78bfa;
  --vivid-violet-soft: #342d49;
  --vivid-cyan: #22d3ee;
  --vivid-cyan-soft: #17383f;
  --vivid-amber: #fbbf24;
  --vivid-amber-soft: #3d321a;
  --vivid-coral: #fb7185;
  --vivid-coral-soft: #40262e;

  --shadow-sm: 0 3px 14px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main-shell {
  background: var(--bg);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}

html[data-theme="dark"] .nav-item.is-active {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface-subtle);
  box-shadow: inset 3px 0 0 var(--accent);
}

html[data-theme="dark"] .nav-item.is-active svg {
  color: var(--accent-ink);
}

html[data-theme="dark"] .top-ai-wallet-trigger {
  border-color: #484052;
  background: #2a2830;
}

html[data-theme="dark"] .top-ai-wallet-icon {
  color: #c4b5fd;
  background: var(--vivid-violet-soft);
}

html[data-theme="dark"] .top-avatar,
html[data-theme="dark"] .avatar {
  color: #ddd6fe;
  background: var(--vivid-violet-soft);
}

html[data-theme="dark"] :is(.metric-card, .recommendation-paper-card, .notebook-card):nth-child(3n + 1) :is(.metric-icon, .recommendation-icon) {
  color: #c4b5fd;
  background: var(--vivid-violet-soft);
}

html[data-theme="dark"] :is(.metric-card, .recommendation-paper-card, .notebook-card):nth-child(3n + 2) :is(.metric-icon, .recommendation-icon) {
  color: #67e8f9;
  background: var(--vivid-cyan-soft);
}

html[data-theme="dark"] :is(.metric-card, .recommendation-paper-card, .notebook-card):nth-child(3n) :is(.metric-icon, .recommendation-icon) {
  color: #fcd34d;
  background: var(--vivid-amber-soft);
}

/* Question bank: neutral scaffolding with distinct, purposeful accents. */
html[data-theme="dark"] .question-bank-tabs {
  border-color: var(--border);
  background: #1b1d20;
}

html[data-theme="dark"] .question-bank-tabs > button {
  border-color: transparent;
  background: transparent;
}

html[data-theme="dark"] .question-bank-tabs > button:hover {
  border-color: var(--border);
  background: var(--surface-subtle);
}

html[data-theme="dark"] .question-bank-tabs > button.is-active {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-subtle);
  box-shadow: inset 0 -2px 0 var(--accent);
}

html[data-theme="dark"] .question-bank-tabs > button.is-active > span:first-child {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

html[data-theme="dark"] .drill-entry {
  border-color: #504461;
  background:
    radial-gradient(620px circle at 88% 15%, rgba(139, 92, 246, 0.16), transparent 47%),
    linear-gradient(120deg, #25272c, var(--surface) 72%);
  box-shadow: inset 3px 0 0 var(--vivid-violet);
}

html[data-theme="dark"] .drill-entry-label {
  color: #c4b5fd;
}

html[data-theme="dark"] .drill-entry-star {
  color: #fcd34d;
}

html[data-theme="dark"] .library-toolbar {
  border-color: var(--border);
  background: var(--surface);
}

html[data-theme="dark"] .library-scope-chip {
  border-color: #246575;
  color: #67e8f9;
  background: var(--vivid-cyan-soft);
}

html[data-theme="dark"] .public-paper-preview {
  background:
    radial-gradient(circle at 78% 18%, rgba(96, 165, 250, 0.18), transparent 38%),
    linear-gradient(145deg, #292d36, #242932);
}

html[data-theme="dark"] .public-paper-preview.real::after {
  border-color: #3b6ca8;
}

html[data-theme="dark"] .public-paper-preview.real .public-type-badge {
  border-color: #3b6ca8;
  color: #bfdbfe;
  background: rgba(29, 46, 79, 0.9);
}

html[data-theme="dark"] .public-paper-preview.mock {
  background:
    radial-gradient(circle at 78% 18%, rgba(251, 146, 60, 0.18), transparent 38%),
    linear-gradient(145deg, #302c2b, #292727);
}

html[data-theme="dark"] .public-paper-preview.mock::after {
  border-color: #8a572e;
}

html[data-theme="dark"] .public-paper-preview.mock .public-type-badge {
  border-color: #8a572e;
  color: #fdba74;
  background: rgba(67, 44, 28, 0.92);
}

html[data-theme="dark"] .public-paper-preview.mock .public-cover::after {
  background: #f97316;
}

html[data-theme="dark"] .public-paper-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .tool-placeholder {
  border-color: var(--border);
  background: #1c1e21;
}

/* Course catalog and lesson surfaces must remain graphite, not green-black. */
html[data-theme="dark"] [data-course-track] {
  --track-panel: var(--surface-subtle);
  --track-card: var(--surface);
  --track-border: var(--border);
  --track-shadow: #141517;
}

html[data-theme="dark"] .course-module-card.is-current .course-track-art {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  box-shadow: 0 5px 0 #172a49;
}

html[data-theme="dark"] .course-track-controls > button:hover:enabled {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

html[data-theme="dark"] .learning-home {
  --lh-soft: var(--vivid-violet-soft);
}

html[data-theme="dark"] .lh-plan,
html[data-theme="dark"] .lh-analysis-next {
  border-color: var(--border);
  background: var(--surface);
}

html[data-theme="dark"] .lh-plan::after {
  color: #3a3151;
}

html[data-theme="dark"] :is(.lh-plan-label, .lh-plan > p, .lh-plan > small, .lh-plan-time > span) {
  color: var(--text-soft);
}

html[data-theme="dark"] .lh-plan-chips > span,
html[data-theme="dark"] .lh-file-icon {
  border-color: var(--border);
  color: var(--text-soft);
  background: var(--surface-subtle);
}

html[data-theme="dark"] .lh-file-icon.is-purple {
  border-color: #51456a;
  color: #c4b5fd;
  background: var(--vivid-violet-soft);
}

html[data-theme="dark"] .lh-dimension.is-priority {
  border-color: var(--warning-border);
  background: var(--warning-soft);
}

html[data-theme="dark"] .lh-dimension.is-priority .lh-dimension-heading small {
  color: #fcd9a3;
  background: #523820;
}

html[data-theme="dark"] .lh-analysis-tabs button[aria-pressed="true"] {
  border-color: var(--accent-border);
  color: var(--accent-ink);
  background: var(--accent-soft);
}

html[data-theme="dark"] .adaptive-space {
  --ad-ink: var(--text);
  --ad-muted: var(--text-soft);
  --ad-line: var(--border);
  --ad-surface: var(--surface);
  --ad-soft: var(--surface-subtle);
  --ad-gold: var(--accent);
  --ad-green: var(--accent-ink);
}

html[data-theme="dark"] .adaptive-space :is(.ad-next, .ad-review-card) {
  border-color: var(--border);
  background: var(--surface-raised);
}

html[data-theme="dark"] .adaptive-space :is(.ad-path > .is-current, .ad-choices .is-selected, .ad-radio:has(input:checked)) {
  border-color: var(--accent-border);
  color: var(--text);
  background: var(--accent-soft);
}

html[data-theme="dark"] .cc-page {
  --cc-border: var(--border);
  --cc-panel: var(--surface-subtle);
  --cc-card: var(--surface);
  --cc-green: var(--accent-ink);
}

html[data-theme="dark"] .cc-module.is-current .cc-module-art {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  box-shadow: 0 6px 0 #172a49;
}

html[data-theme="dark"] .cc-scenario {
  background: var(--vivid-violet-soft);
}

html[data-theme="dark"] .cc-error-note {
  background: var(--warning-soft);
}

html[data-theme="dark"] .cc-unit-index.is-done {
  color: var(--success);
  background: var(--success-soft);
}

html[data-theme="dark"] .cc-lesson-path .is-current .cc-path-node {
  border-color: #8b5cf6;
  color: #ddd6fe;
  background: var(--vivid-violet-soft);
  box-shadow: 0 7px 0 #5b3c8a, 0 0 0 9px rgba(139, 92, 246, 0.12);
}

html[data-theme="dark"] .cc-lesson-path .is-done .cc-path-node {
  border-color: var(--success-border);
  color: var(--success);
  background: var(--success-soft);
  box-shadow: 0 7px 0 #214b3b;
}

html[data-theme="dark"] .ct-coach {
  --ct-ink: var(--text);
  --ct-paper: var(--surface);
  --ct-line: var(--border);
  --ct-muted: var(--text-faint);
}

html[data-theme="dark"] :is(.ct-context, .ct-message) {
  background: var(--surface-subtle);
}

html[data-theme="dark"] .ct-message.is-user {
  border-color: #51456a;
  background: var(--vivid-violet-soft);
}

html[data-theme="dark"] .ct-launch {
  box-shadow: 0 4px 0 #121315;
}

html[data-theme="dark"] .ct-form button {
  background: var(--accent);
}

html[data-theme="dark"] .clab {
  --clab-ink: var(--text);
  --clab-muted: var(--text-faint);
  --clab-grid: var(--border);
  --clab-paper: var(--surface);
  --clab-accent: #60a5fa;
  --clab-violet: #b39af8;
  --clab-warning: #fb8291;
}

html[data-theme="dark"] :is(.lc-context, .lc-help p) {
  background: var(--surface-raised);
}

html[data-theme="dark"] .lc-option.is-selected {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

html[data-theme="dark"] :is(.lc-option.is-correct, .lc-feedback.is-correct) {
  background: var(--success-soft);
}

html[data-theme="dark"] :is(.lc-option.is-wrong, .lc-feedback.is-retry) {
  background: var(--danger-soft);
}

/* The account profile is a full-screen flow and needs its own dark surfaces. */
html[data-theme="dark"] #learnerProfileRoot {
  --lp-ink: var(--text);
  --lp-muted: var(--text-faint);
  --lp-green: var(--accent);
  --lp-line: var(--border);
  color: var(--text);
  background: var(--bg);
}

html[data-theme="dark"] #learnerProfileRoot::backdrop {
  background: var(--bg);
}

html[data-theme="dark"] #learnerProfileRoot :is(.lp-progress-caption, .lp-kicker, .lp-honesty, .lp-helper, .lp-draft-note, .lp-time-estimate) {
  color: var(--text-faint);
}

html[data-theme="dark"] #learnerProfileRoot .lp-close {
  border-color: var(--border);
  color: var(--text-soft);
}

html[data-theme="dark"] #learnerProfileRoot .lp-close:hover,
html[data-theme="dark"] #learnerProfileRoot .lp-progress-track,
html[data-theme="dark"] #learnerProfileRoot .lp-welcome-tags > span {
  background: var(--surface-subtle);
}

html[data-theme="dark"] #learnerProfileRoot .lp-progress-track > span {
  background: var(--accent);
}

html[data-theme="dark"] #learnerProfileRoot :is(.lp-option, .lp-score-field, .lp-score-presets button, .lp-choice, .lp-time-card, .lp-time-preset, .lp-summary-subjects article) {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface);
}

html[data-theme="dark"] #learnerProfileRoot :is(.lp-option:hover, .lp-time-preset:hover) {
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

html[data-theme="dark"] #learnerProfileRoot :is(.lp-option.is-selected, .lp-choice.is-selected, .lp-score-presets button.is-selected, .lp-time-preset.is-selected) {
  border-color: var(--accent-border);
  color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-border);
}

html[data-theme="dark"] #learnerProfileRoot :is(.lp-option-copy strong, .lp-optional-score label strong, .lp-schedule-group legend, .lp-time-card-head strong, .lp-summary-subjects article > div > strong) {
  color: var(--text);
}

html[data-theme="dark"] #learnerProfileRoot :is(.lp-option-copy small, .lp-optional-score label small, .lp-optional-score label > span, .lp-score-field span, .lp-target-panel label, .lp-target-panel > p, .lp-schedule-group > p, .lp-time-card-head small, .lp-time-value, .lp-time-input em, .lp-summary-subjects dt, .lp-summary-subjects dd) {
  color: var(--text-faint);
}

html[data-theme="dark"] #learnerProfileRoot :is(.lp-optional-score, .lp-target-panel, .lp-time-mode, .lp-summary-context) {
  border-color: var(--border);
  background: var(--surface-subtle);
}

html[data-theme="dark"] #learnerProfileRoot .lp-time-mode button {
  color: var(--text-faint);
}

html[data-theme="dark"] #learnerProfileRoot .lp-time-mode button.is-selected {
  color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: none;
}

html[data-theme="dark"] #learnerProfileRoot .lp-time-input {
  border-color: var(--border);
  background: #1b1d20;
}

html[data-theme="dark"] #learnerProfileRoot .lp-time-input:focus-within {
  border-color: var(--accent-border);
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

html[data-theme="dark"] #learnerProfileRoot :is(.lp-score-field input, .lp-target-input input, .lp-time-input input) {
  color: var(--text);
}

html[data-theme="dark"] #learnerProfileRoot .lp-target-input input {
  border-bottom-color: var(--accent-border);
}

html[data-theme="dark"] #learnerProfileRoot .lp-check {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
}

html[data-theme="dark"] #learnerProfileRoot .lp-option.is-selected .lp-check {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

html[data-theme="dark"] #learnerProfileRoot .lp-footer {
  border-color: var(--border);
  background: var(--surface);
}

html[data-theme="dark"] #learnerProfileRoot .lp-next:hover {
  background: var(--accent-hover);
}

html[data-theme="dark"] #learnerProfileRoot .lp-family-math { color: #c4b5fd; background: #352d4b; }
html[data-theme="dark"] #learnerProfileRoot .lp-family-english { color: #86efac; background: #20382b; }
html[data-theme="dark"] #learnerProfileRoot .lp-family-politics { color: #fdba74; background: #402f21; }
html[data-theme="dark"] #learnerProfileRoot .lp-family-computer { color: #93c5fd; background: #24344b; }
html[data-theme="dark"] #learnerProfileRoot .lp-family-mba { color: #f9a8d4; background: #402b3a; }
html[data-theme="dark"] #learnerProfileRoot .lp-family-custom { color: #67e8f9; background: #1d3b40; }