@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Nunito:wght@700;800;900&display=swap");

/* Final theme layer: shared visual language with psy-methods-lab. */
:root {
  --clay-canvas: #f4f1fa;
  --clay-surface: rgb(255 255 255 / 72%);
  --clay-solid: #fbfaff;
  --clay-recess: #efebf5;
  --clay-ink: #332f3a;
  --clay-muted: #635f69;
  --clay-violet: #7c3aed;
  --clay-violet-light: #a78bfa;
  --clay-pink: #db2777;
  --clay-sky: #0ea5e9;
  --clay-green: #10b981;
  --clay-amber: #f59e0b;
  --clay-line: rgb(124 58 237 / 15%);
  --clay-card-shadow: 16px 16px 32px rgb(120 105 145 / 18%), -10px -10px 24px rgb(255 255 255 / 92%), inset 6px 6px 12px rgb(139 92 246 / 3%), inset -6px -6px 12px #fff;
  --clay-lift-shadow: 20px 20px 38px rgb(120 105 145 / 22%), -12px -12px 28px rgb(255 255 255 / 96%), inset 6px 6px 12px rgb(139 92 246 / 3%), inset -6px -6px 12px #fff;
  --clay-button-shadow: 10px 10px 20px rgb(124 58 237 / 27%), -7px -7px 15px rgb(255 255 255 / 48%), inset 4px 4px 8px rgb(255 255 255 / 34%), inset -4px -4px 8px rgb(0 0 0 / 11%);
  --clay-recess-shadow: inset 8px 8px 16px #d9d4e3, inset -8px -8px 16px #fff;

  /* Preserve existing JS/status behavior through its semantic variable names. */
  --bg: var(--clay-canvas);
  --surface: var(--clay-surface);
  --surface-strong: var(--clay-solid);
  --panel: var(--clay-surface);
  --ink: var(--clay-ink);
  --muted: var(--clay-muted);
  --line: var(--clay-line);
  --blue: var(--clay-violet);
  --blue-soft: #ede9fe;
  --teal: var(--clay-green);
  --teal-soft: #d1fae5;
  --coral: var(--clay-pink);
  --coral-soft: #fce7f3;
  --gold: var(--clay-amber);
  --gold-soft: #fef3c7;
  --radius: 18px;
  --radius-lg: 24px;
  --shadow: var(--clay-card-shadow);
  color-scheme: light;
}

html,
body {
  background: var(--clay-canvas);
  color: var(--clay-ink);
}

body,
button,
input,
textarea,
select {
  font-family: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
.brand-copy strong,
.detail-heading,
.review-mode-heading,
.chapter-index,
.count-badge,
.progress-ring {
  font-family: "Nunito", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

button,
.chapter-item,
.subject-toggle,
.segment,
.search-result,
.quality-option,
.review-map-neighbor {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
.chapter-item:focus-visible,
.subject-toggle:focus-visible,
.segment:focus-visible {
  outline: 3px solid rgb(124 58 237 / 35%);
  outline-offset: 3px;
}

::selection {
  background: rgb(167 139 250 / 38%);
  color: var(--clay-ink);
}

.topbar {
  background: rgb(255 255 255 / 66%);
  border-color: rgb(255 255 255 / 88%);
  box-shadow: 0 8px 24px rgb(82 65 117 / 9%), inset 0 -1px 0 rgb(124 58 237 / 7%);
  backdrop-filter: blur(22px) saturate(125%);
}

.brand { color: var(--clay-ink); }

.brand-mark {
  background: var(--clay-violet);
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 15px;
  box-shadow: var(--clay-button-shadow);
  color: #fff;
  font-family: "Nunito", "PingFang SC", sans-serif;
}

.brand-copy strong { color: var(--clay-ink); }

.brand-copy small,
.eyebrow,
.breadcrumbs,
.map-hint,
.map-zoom-level { color: var(--clay-muted); }

.search-box {
  background: var(--clay-recess);
  border: 1px solid rgb(255 255 255 / 86%);
  border-radius: 17px;
  box-shadow: var(--clay-recess-shadow);
  color: var(--clay-ink);
}

.search-box:focus-within {
  background: #f8f5fe;
  border-color: rgb(124 58 237 / 35%);
  box-shadow: inset 6px 6px 12px rgb(139 92 246 / 10%), inset -6px -6px 12px #fff, 0 0 0 3px rgb(124 58 237 / 9%);
}

.search-box input,
.quiz-body textarea { color: var(--clay-ink); }

.search-box input::placeholder,
.quiz-body textarea::placeholder { color: #89838f; }

.search-box kbd {
  background: rgb(255 255 255 / 80%);
  border: 1px solid rgb(124 58 237 / 13%);
  border-radius: 7px;
  box-shadow: 2px 2px 5px rgb(120 105 145 / 12%), -2px -2px 4px #fff;
  color: var(--clay-muted);
}

.search-results {
  background: rgb(255 255 255 / 92%);
  border: 1px solid rgb(255 255 255 / 92%);
  border-radius: 18px;
  box-shadow: var(--clay-lift-shadow);
  backdrop-filter: blur(20px);
}

.search-result { border-radius: 12px; color: var(--clay-ink); }
.search-result:hover,
.search-result:focus-visible { background: #f0ebff; color: #5b21b6; }

.primary-button,
.secondary-button,
.icon-button,
.text-button {
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 16px;
  font-family: "Nunito", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 800;
  letter-spacing: 0;
}

.primary-button {
  background: var(--clay-violet);
  box-shadow: var(--clay-button-shadow);
  color: #fff;
}

.primary-button:hover:not(:disabled) {
  background: #6d28d9;
  box-shadow: 13px 13px 24px rgb(124 58 237 / 30%), -8px -8px 18px rgb(255 255 255 / 52%), inset 4px 4px 8px rgb(255 255 255 / 20%), inset -4px -4px 8px rgb(0 0 0 / 13%);
  transform: translateY(-2px);
}

.secondary-button,
.icon-button {
  background: rgb(255 255 255 / 74%);
  box-shadow: 6px 6px 13px rgb(120 105 145 / 16%), -5px -5px 12px rgb(255 255 255 / 88%), inset 2px 2px 5px rgb(139 92 246 / 3%), inset -2px -2px 5px #fff;
  color: var(--clay-ink);
}

.secondary-button:hover:not(:disabled),
.icon-button:hover:not(:disabled) {
  background: #fff;
  border-color: rgb(124 58 237 / 23%);
  box-shadow: 9px 9px 17px rgb(120 105 145 / 19%), -7px -7px 15px #fff;
  color: var(--clay-violet);
  transform: translateY(-2px);
}

.text-button { background: transparent; box-shadow: none; color: var(--clay-violet); }
.text-button:hover:not(:disabled) { background: #ede9fe; color: #5b21b6; }

.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),
.icon-button:active:not(:disabled),
.text-button:active:not(:disabled),
.segment:active,
.chapter-item:active,
.subject-toggle:active { transform: translateY(1px) scale(.97); }

.primary-button:active:not(:disabled) { box-shadow: inset 6px 6px 12px rgb(51 25 104 / 36%), inset -5px -5px 10px rgb(255 255 255 / 17%); }
.secondary-button:active:not(:disabled),
.icon-button:active:not(:disabled) { box-shadow: var(--clay-recess-shadow); }

.chapter-sidebar,
.inspector,
.outline-stage {
  background: var(--clay-surface);
  border-color: rgb(255 255 255 / 88%);
  box-shadow: var(--clay-card-shadow);
  backdrop-filter: blur(22px) saturate(120%);
}

.sidebar-heading,
.sidebar-footer,
.inspector-topline { border-color: rgb(124 58 237 / 11%); }

.count-badge,
.chapter-state,
.status-pill,
.detail-status {
  border: 1px solid rgb(255 255 255 / 74%);
  border-radius: 999px;
  box-shadow: 3px 3px 8px rgb(120 105 145 / 13%), -3px -3px 7px #fff;
  font-family: "Nunito", "PingFang SC", sans-serif;
}

.count-badge { background: #ede9fe; color: #5b21b6; }
.subject-group { border-color: rgb(124 58 237 / 10%); }

.subject-toggle,
.subject-heading {
  background: rgb(255 255 255 / 48%);
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--clay-ink);
}

.subject-toggle:hover,
.subject-group.is-expanded .subject-toggle {
  background: #f0ebff;
  border-color: rgb(124 58 237 / 16%);
  box-shadow: 4px 4px 10px rgb(120 105 145 / 11%), -4px -4px 9px #fff;
}

.subject-heading-meta { color: var(--clay-violet); }
.subject-chapter-drawer { border-color: rgb(124 58 237 / 9%); }

.chapter-item {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 15px;
  color: var(--clay-ink);
}

.chapter-item:hover {
  background: rgb(255 255 255 / 74%);
  border-color: rgb(124 58 237 / 12%);
  box-shadow: 4px 4px 9px rgb(120 105 145 / 10%), -4px -4px 8px #fff;
  transform: translateX(2px);
}

.chapter-item.is-active {
  background: #ede9fe;
  border-color: rgb(124 58 237 / 18%);
  box-shadow: inset 4px 4px 9px rgb(124 58 237 / 12%), inset -4px -4px 8px rgb(255 255 255 / 85%);
  color: #4c1d95;
}

.chapter-index {
  background: rgb(255 255 255 / 72%);
  border: 1px solid rgb(124 58 237 / 12%);
  border-radius: 10px;
  color: var(--clay-violet);
}
.chapter-item.is-active .chapter-index { background: var(--clay-violet); color: #fff; }
.chapter-meta,
.subject-heading-copy small,
.progress-summary p { color: var(--clay-muted); }

.progress-ring {
  background: #ede9fe;
  box-shadow: inset 5px 5px 10px rgb(124 58 237 / 13%), inset -4px -4px 8px #fff;
  color: var(--clay-violet);
}

.workspace-header {
  background: rgb(255 255 255 / 44%);
  border-color: rgb(255 255 255 / 70%);
  border-radius: 19px;
  box-shadow: 8px 8px 18px rgb(120 105 145 / 10%), -7px -7px 16px rgb(255 255 255 / 74%);
}

.breadcrumbs strong,
.breadcrumbs span:last-child { color: var(--clay-ink); }

.segmented-control {
  background: var(--clay-recess);
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 16px;
  box-shadow: var(--clay-recess-shadow);
}

.segment { border-radius: 12px; color: var(--clay-muted); font-family: "Nunito", "PingFang SC", sans-serif; }
.segment:hover { color: var(--clay-violet); }
.segment.is-active {
  background: var(--clay-violet);
  box-shadow: 5px 5px 10px rgb(124 58 237 / 22%), -3px -3px 7px rgb(255 255 255 / 54%), inset 2px 2px 4px rgb(255 255 255 / 21%);
  color: #fff;
}

/* The map stays deep purple to keep a dense chapter tree easy to scan. */
.map-stage {
  background: #302a43;
  border: 1px solid rgb(216 202 255 / 22%);
  border-radius: 24px;
  box-shadow: 18px 18px 34px rgb(72 56 101 / 24%), -10px -10px 22px rgb(255 255 255 / 77%), inset 1px 1px 0 rgb(255 255 255 / 9%);
}

.map-stage::before { opacity: .66; }
.map-stage.is-dragging { cursor: grabbing; }
#mindmap { color: #fbfaff; }
.map-edge { stroke: rgb(216 202 255 / 42%); }

.map-node rect {
  fill: rgb(61 52 84 / 94%);
  stroke: rgb(216 202 255 / 27%);
  stroke-width: 1.2;
  filter: drop-shadow(4px 5px 6px rgb(9 7 19 / 23%));
}
.map-node:hover rect { fill: #4d4169; stroke: #c4b5fd; stroke-width: 1.7; }
.map-node.is-selected rect { fill: #5d4c82; stroke: #f9a8d4; stroke-width: 2; }
.map-node.node-chapter rect { fill: #45365f; stroke: #c4b5fd; }
.map-node.node-section rect { fill: #3e3456; }
.map-node.node-subsection rect { fill: #39304d; }
.map-node.status-mastered rect { stroke: #6ee7b7; }
.map-node.status-due rect,
.map-node.status-weak rect { stroke: #f9a8d4; }
.map-node.status-learning rect { stroke: #67e8f9; }

.node-label { color: #fbfaff; font-family: "DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif; }
.node-toggle { fill: #c4b5fd; stroke: rgb(255 255 255 / 55%); }
.toggle-symbol { fill: #302a43; }
.status-dot.status-mastered { fill: #6ee7b7; }
.status-dot.status-due,
.status-dot.status-weak { fill: #f9a8d4; }
.status-dot.status-learning { fill: #67e8f9; }

.map-hint,
.map-zoom-level,
.map-legend {
  background: rgb(36 32 54 / 78%);
  border-color: rgb(216 202 255 / 18%);
  box-shadow: 4px 5px 12px rgb(8 7 18 / 22%);
  color: #d4cce3;
  backdrop-filter: blur(10px);
}
.map-legend strong,
.map-legend span { color: #fbfaff; }

.outline-stage { color: var(--clay-ink); }
.outline-header,
.outline-group { border-color: rgb(124 58 237 / 12%); }
.outline-group-button { border-radius: 14px; color: var(--clay-ink); }
.outline-group-button:hover { background: #f0ebff; color: #5b21b6; }
.outline-point { border-radius: 12px; color: var(--clay-ink); }
.outline-point:hover { background: #f7f4fd; }

.inspector-empty {
  background: rgb(255 255 255 / 42%);
  border: 1px dashed rgb(124 58 237 / 22%);
  border-radius: 20px;
  color: var(--clay-muted);
}
.detail-heading { color: var(--clay-ink); }
.detail-path,
.source-note,
.citation-text,
.detail-footer,
.block-label { color: var(--clay-muted); }

.detail-block,
.detail-source-block,
.review-source-block,
.review-citation-block {
  background: rgb(255 255 255 / 52%);
  border-color: rgb(255 255 255 / 86%);
  border-radius: 18px;
  box-shadow: 7px 7px 15px rgb(120 105 145 / 10%), -6px -6px 13px rgb(255 255 255 / 86%), inset 2px 2px 5px rgb(139 92 246 / 3%);
}
.detail-source-block.is-topic-bundle { background: #f7f3ff; border-color: rgb(124 58 237 / 15%); }
.source-text { color: var(--clay-ink); }

.status-new,
.detail-status.status-new { background: #ede9fe; color: #6d28d9; }
.status-learning,
.detail-status.status-learning { background: #e0f2fe; color: #0369a1; }
.status-due,
.status-weak,
.detail-status.status-due,
.detail-status.status-weak { background: #fce7f3; color: #be185d; }
.status-mastered,
.detail-status.status-mastered { background: #d1fae5; color: #047857; }

.modal-backdrop { background: rgb(51 47 58 / 43%); backdrop-filter: blur(10px); }
.quiz-dialog,
.stats-dialog {
  background: rgb(255 255 255 / 88%);
  border: 1px solid rgb(255 255 255 / 92%);
  border-radius: 24px;
  box-shadow: 22px 22px 46px rgb(29 22 44 / 26%), -12px -12px 28px rgb(255 255 255 / 56%), inset 4px 4px 9px rgb(139 92 246 / 4%);
  color: var(--clay-ink);
  backdrop-filter: blur(24px);
}
.dialog-header,
.stats-section,
.quiz-question,
.quiz-citation { border-color: rgb(124 58 237 / 13%); }
.quiz-body textarea {
  background: var(--clay-recess);
  border-color: rgb(255 255 255 / 80%);
  border-radius: 16px;
  box-shadow: var(--clay-recess-shadow);
}
.quality-option {
  background: rgb(255 255 255 / 60%);
  border-color: rgb(124 58 237 / 12%);
  border-radius: 15px;
  color: var(--clay-ink);
  box-shadow: 4px 4px 10px rgb(120 105 145 / 10%), -4px -4px 9px #fff;
}
.quality-option:hover,
.quality-option.is-selected { background: #ede9fe; border-color: rgb(124 58 237 / 28%); color: #5b21b6; }
.toast {
  background: #332f3a;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 15px;
  box-shadow: 10px 12px 22px rgb(40 28 62 / 24%);
  color: #fff;
}

/* Keep review geometry fixed and immersive; only its material changes. */
.review-mode { background: var(--clay-canvas); color: var(--clay-ink); }
.review-mode-header {
  background: rgb(255 255 255 / 64%);
  border-color: rgb(255 255 255 / 90%);
  box-shadow: 0 7px 20px rgb(82 65 117 / 9%), inset 0 -1px 0 rgb(124 58 237 / 7%);
  backdrop-filter: blur(22px);
}
.review-mode-heading { color: var(--clay-ink); }
.review-mode-position {
  background: #ede9fe;
  border: 1px solid rgb(124 58 237 / 12%);
  border-radius: 999px;
  box-shadow: 3px 3px 8px rgb(120 105 145 / 12%), -3px -3px 7px #fff;
  color: #5b21b6;
}
.review-progress-track { background: #e4dff0; }
.review-progress-track span { background: var(--clay-violet); }
.review-map-panel { background: rgb(255 255 255 / 45%); border-color: rgb(124 58 237 / 10%); }
.review-map-panel-header { border-color: rgb(124 58 237 / 10%); }
.review-map-toggle {
  background: #ede9fe;
  border-color: rgb(124 58 237 / 13%);
  border-radius: 15px;
  box-shadow: 5px 5px 11px rgb(120 105 145 / 12%), -4px -4px 9px #fff;
  color: #4c1d95;
}
.review-map-path-node,
.review-map-neighbor { border-radius: 13px; }
.review-map-path-node.is-active { background: var(--clay-violet); box-shadow: var(--clay-button-shadow); color: #fff; }
.review-map-neighbor:hover { background: #ede9fe; color: #5b21b6; }
.review-reading-pane { background: transparent; }
.review-content {
  background: rgb(255 255 255 / 72%);
  border: 1px solid rgb(255 255 255 / 90%);
  border-radius: 24px;
  box-shadow: var(--clay-card-shadow);
  color: var(--clay-ink);
}
.review-path { color: var(--clay-violet); }
.review-controls {
  background: rgb(255 255 255 / 68%);
  border-color: rgb(255 255 255 / 90%);
  box-shadow: 0 -8px 20px rgb(82 65 117 / 9%), inset 0 1px 0 rgb(124 58 237 / 6%);
  backdrop-filter: blur(22px);
}

.mobile-bottom-bar {
  background: rgb(255 255 255 / 76%);
  border-color: rgb(255 255 255 / 92%);
  box-shadow: 0 -8px 22px rgb(82 65 117 / 11%), inset 0 1px 0 rgb(124 58 237 / 7%);
  backdrop-filter: blur(22px);
}
.mobile-bottom-bar button { background: transparent; border-radius: 12px; color: var(--clay-muted); }
.mobile-bottom-bar button:hover,
.mobile-bottom-bar button.is-active { background: #ede9fe; box-shadow: 3px 3px 7px rgb(120 105 145 / 12%), -3px -3px 7px #fff; color: var(--clay-violet); }
.mobile-bottom-bar strong { font-family: "Nunito", "PingFang SC", sans-serif; letter-spacing: 0; }
.mobile-scrim { background: rgb(51 47 58 / 34%); backdrop-filter: blur(4px); }

/* The existing theme toggle remains usable even when its implementation varies. */
html[data-theme="dark"],
body[data-theme="dark"],
body.dark-theme,
body.is-dark {
  --bg: #272233;
  --surface: rgb(53 46 72 / 84%);
  --surface-strong: #3a314d;
  --panel: rgb(53 46 72 / 88%);
  --ink: #f7f3ff;
  --muted: #d1c9df;
  --line: rgb(216 202 255 / 18%);
  --clay-canvas: #272233;
  --clay-surface: rgb(53 46 72 / 84%);
  --clay-solid: #3a314d;
  --clay-recess: #302942;
  --clay-ink: #f7f3ff;
  --clay-muted: #d1c9df;
  --clay-card-shadow: 14px 14px 30px rgb(8 6 15 / 36%), -8px -8px 20px rgb(92 77 124 / 22%), inset 5px 5px 11px rgb(9 6 17 / 18%), inset -5px -5px 11px rgb(255 255 255 / 4%);
  --clay-recess-shadow: inset 7px 7px 14px rgb(10 7 18 / 34%), inset -6px -6px 12px rgb(111 91 149 / 17%);
  color-scheme: dark;
}

html[data-theme="dark"] .topbar,
body[data-theme="dark"] .topbar,
body.dark-theme .topbar,
body.is-dark .topbar,
html[data-theme="dark"] .chapter-sidebar,
body[data-theme="dark"] .chapter-sidebar,
body.dark-theme .chapter-sidebar,
body.is-dark .chapter-sidebar,
html[data-theme="dark"] .inspector,
body[data-theme="dark"] .inspector,
body.dark-theme .inspector,
body.is-dark .inspector,
html[data-theme="dark"] .outline-stage,
body[data-theme="dark"] .outline-stage,
body.dark-theme .outline-stage,
body.is-dark .outline-stage,
html[data-theme="dark"] .review-content,
body[data-theme="dark"] .review-content,
body.dark-theme .review-content,
body.is-dark .review-content {
  background: var(--clay-surface);
  border-color: rgb(216 202 255 / 17%);
}

html[data-theme="dark"] .secondary-button,
body[data-theme="dark"] .secondary-button,
body.dark-theme .secondary-button,
body.is-dark .secondary-button,
html[data-theme="dark"] .icon-button,
body[data-theme="dark"] .icon-button,
body.dark-theme .icon-button,
body.is-dark .icon-button {
  background: rgb(75 63 100 / 78%);
  border-color: rgb(216 202 255 / 16%);
  color: var(--clay-ink);
}

@media (max-width: 860px) {
  .topbar { background: rgb(255 255 255 / 74%); }
  .topbar .brand-mark { border-radius: 12px; }
  .chapter-sidebar { border-radius: 0 24px 24px 0; box-shadow: 15px 0 34px rgb(47 36 67 / 24%), inset -1px 0 0 rgb(255 255 255 / 55%); }
  .workspace-header { border-radius: 16px; }
  .workspace-actions .secondary-button,
  .workspace-actions .icon-button { min-height: 40px; }
  .map-stage { border-radius: 20px; }
  .inspector { border-radius: 0; box-shadow: none; }
  .review-mode-header { padding-top: max(.7rem, env(safe-area-inset-top)); }
  .review-content { border-radius: 20px; }
  .review-controls { padding-bottom: max(.85rem, env(safe-area-inset-bottom)); }
  .mobile-bottom-bar { min-height: calc(68px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 430px) {
  .primary-button,
  .secondary-button,
  .icon-button { border-radius: 13px; }
  .workspace-header { box-shadow: 5px 5px 12px rgb(120 105 145 / 10%), -5px -5px 11px rgb(255 255 255 / 68%); }
  .map-stage { border-radius: 17px; }
  .mobile-bottom-bar button { border-radius: 10px; }
  .mobile-bottom-bar strong { font-size: .66rem; }
  .mobile-bottom-bar small { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}