/*
 * Editorial light theme inspired by the layout principles observed in “知道”:
 * a quiet warm canvas, one dominant message, compact navigation and floating
 * information cards. Product identity, copy and the knowledge-galaxy visual
 * remain original to Knowledge Alchemy.
 */
:root {
  color-scheme: light;
  --bg: #f7f4ec;
  --panel: #fffefa;
  --line: #e6e1d7;
  --text: #17243f;
  --muted: #777b83;
  --purple: #2468d9;
  --mint: #58a58d;
  --amber: #c99243;
  --sidebar: 0px;
  --blue: #1769e0;
  --blue-deep: #123d91;
  --paper: #fffefa;
  --paper-soft: #f0ede5;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}

body {
  background:
    radial-gradient(circle at 76% 8%, rgba(43, 111, 224, .075), transparent 28rem),
    var(--bg);
  color: var(--text);
}

a, button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline-color: var(--blue);
}

.sidebar {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  height: 76px;
  padding: 0 max(28px, calc((100vw - 1280px) / 2));
  border: 0;
  border-bottom: 1px solid rgba(31, 51, 84, .08);
  background: rgba(247, 244, 236, .9);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 50;
}

.brand {
  padding: 0;
  margin-right: 48px;
  color: var(--blue-deep);
  font-size: 20px;
  letter-spacing: 0;
}
.brand-mark { width: 35px; height: 38px; color: var(--blue); }
.brand small { color: #9a9da3; font-size: 6px; }
.sidebar nav { display: flex; align-items: center; gap: 8px; }
.nav-item {
  width: auto;
  margin: 0;
  padding: 11px 15px;
  border-radius: 999px;
  color: #656b76;
  font-size: 13px;
}
.nav-item:hover { color: var(--blue-deep); background: rgba(255, 255, 255, .65); }
.nav-item.active {
  color: var(--blue-deep);
  background: #fff;
  box-shadow: 0 8px 26px rgba(34, 52, 82, .08);
}
.nav-item.active .icon { color: var(--blue); }
.nav-item b, .nav-dot { display: none; }
.workspace-label, .sidebar-separator, .side-caption, .topic-nav, .sidebar-bottom { display: none; }

.app-body { margin-left: 0; padding-top: 76px; }
.topbar { display: none; }
main { max-width: 1280px; padding: 58px 30px 0; }

.page-heading {
  align-items: flex-end;
  margin-bottom: 42px;
}
.eyebrow, .section-kicker {
  color: var(--blue);
  letter-spacing: 2.4px;
}
.page-heading h1 {
  max-width: 820px;
  margin: 12px 0 13px;
  font-family: "Songti SC", SimSun, Georgia, serif;
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.045em;
  color: #182744;
}
.serif-accent { color: var(--blue); font-family: inherit; }
.page-heading p { color: #6d727b; font-size: 15px; line-height: 1.9; }

.primary-btn, .secondary-btn, .light-btn {
  border-radius: 999px;
  min-height: 46px;
  padding: 12px 22px;
  font-weight: 600;
}
.primary-btn {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 10px 24px rgba(23, 105, 224, .18);
}
.primary-btn:hover:not(:disabled) { background: #0f58c7; }
.secondary-btn {
  color: var(--blue-deep);
  background: #fff;
  border-color: #d7dfec;
}
.light-btn { color: #fff; background: var(--blue); }
.text-btn { color: var(--blue); }

.overview-strip {
  grid-template-columns: repeat(3, 1fr) .95fr;
  padding: 12px;
  margin-bottom: 28px;
  border: 1px solid rgba(34, 52, 82, .08);
  border-radius: 22px;
  background: rgba(255, 254, 250, .88);
  box-shadow: 0 18px 60px rgba(37, 45, 60, .07);
}
.overview-strip > div { min-height: 82px; border-color: #e8e3da; }
.overview-strip .icon { color: var(--blue); }
.overview-strip > div > span, .overview-note p { color: #7b7d83; }
.overview-strip strong { color: #17243f; }
.overview-strip strong small { color: #929397; }
.overview-note .tiny-orbit { color: var(--blue); }
.overview-strip > .overview-action { justify-content: stretch; padding: 10px 18px; }
.review-entry {
  width: 100%; min-height: 62px; padding: 10px 13px;
  display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 10px;
  color: #173f91; text-align: left; background: #f1f6ff;
  border: 1px solid #cbdcff; border-radius: 13px;
  box-shadow: 0 5px 16px rgba(31, 103, 222, .08);
  transition: border-color .2s, background .2s, transform .2s;
}
.review-entry:hover { background: #e8f1ff; border-color: #8db5ff; transform: translateY(-1px); }
.review-entry-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--blue); }
.review-entry .icon { width: 17px; }
.review-entry > span:nth-child(2) { color: inherit; }
.review-entry strong { display: block; margin: 0; color: #173f91; font-size: 14px; font-weight: 650; line-height: 1.3; letter-spacing: 0; }
.review-entry small { display: block; margin-top: 4px; color: #6f84ac; font-size: 9px; }

@media (max-width: 700px) {
  .overview-strip > .overview-action { padding: 5px; }
  .review-entry { min-height: 58px; padding: 7px; grid-template-columns: 26px 1fr; gap: 6px; }
  .review-entry > .icon { display: none; }
  .review-entry-icon { width: 26px; height: 26px; border-radius: 8px; }
  .review-entry-icon .icon { display: block; width: 14px; }
  .review-entry strong { font-size: 10px; }
  .review-entry small { font-size: 7px; }
}

.galaxy-layout { gap: 22px; grid-template-columns: minmax(0, 1fr) 294px; }
.map-card {
  border: 1px solid #dcd7cd;
  border-radius: 24px;
  background: #fffefa;
  box-shadow: 0 22px 70px rgba(31, 43, 63, .1);
}
.card-top h2 { color: #17243f; }
.live-dot { background: var(--blue); box-shadow: 0 0 0 5px rgba(23, 105, 224, .09); }
.segmented { border-color: #ded9cf; background: #f3f0e8; }
.segmented button { color: #8a8d92; }
.segmented button.active { color: var(--blue); background: #fff; box-shadow: 0 3px 10px rgba(24, 39, 65, .08); }
.map-toolbar { border-color: #e8e3da; }
.chip { color: #767a82; }
.chip:hover { color: var(--blue); }
.chip.active { color: var(--blue-deep); background: #eaf1fe; border-color: #cddcf6; }
.map-search { color: #777c85; }
.map-search input { color: #17243f; }
.map-search input::placeholder { color: #a1a2a5; }

/* The galaxy is the one cinematic surface; surrounding UI stays quiet. */
.star-map {
  min-height: 520px;
  margin: 0 14px;
  border-radius: 18px;
  perspective: 900px;
  background:
    radial-gradient(circle at 50% 42%, rgba(58, 132, 255, .28), transparent 35%),
    radial-gradient(ellipse at 24% 70%, rgba(108, 196, 255, .16), transparent 45%),
    linear-gradient(145deg, #0d2550, #06142f 58%, #030a1a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.star-map::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(circle at 22% 24%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 72% 18%, #b8ddff 0 1px, transparent 1.5px), radial-gradient(circle at 82% 67%, #fff 0 1px, transparent 1.4px);
  background-size: 170px 150px, 230px 190px, 280px 220px;
  animation: starDrift 28s linear infinite;
}
.star-map .purple-nebula { background: rgba(43, 118, 255, .24); }
.star-map .green-nebula { background: rgba(115, 210, 255, .18); }
.star-map .orange-nebula { background: rgba(65, 132, 255, .14); }
.star-map .orbit-line { stroke: rgba(157, 207, 255, .25); }
.star-map .connection { stroke: rgba(130, 190, 255, .32); }
.star-map .connection.highlight { stroke: rgba(224, 243, 255, .85); filter: drop-shadow(0 0 5px #62a9ff); }
.star-map .cluster-label { color: #8dc4ff; }
.star-map .planet-ball {
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 24%, #fff 0 7%, #dff2ff 18%, #76baff 42%, #2168cc 68%, #08275e 100%);
  box-shadow: inset -12px -14px 24px rgba(0, 19, 66, .72), inset 5px 5px 12px rgba(255,255,255,.72), 0 10px 25px rgba(0, 30, 90, .42), 0 0 28px rgba(76, 155, 255, .35);
  animation: planetFloat 5.8s ease-in-out infinite, planetTurn 12s ease-in-out infinite;
}
.star-map .planet-ball::before {
  content: ""; position: absolute; inset: -18%; border-radius: 50%;
  background: repeating-radial-gradient(ellipse at 30% 45%, transparent 0 8px, rgba(255,255,255,.16) 9px 11px, transparent 12px 19px);
  transform: rotate(-18deg); mix-blend-mode: screen; animation: cloudSpin 15s linear infinite;
}
.star-map .planet-ball::after {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: linear-gradient(115deg, rgba(255,255,255,.48), transparent 30%, transparent 70%, rgba(0,20,75,.25));
  filter: blur(2px);
}
.star-map .planet-runtime { filter: hue-rotate(10deg) brightness(1.08); }
.star-map .planet-practice { filter: hue-rotate(-12deg) saturate(.9) brightness(.98); }
.star-map .planet-node:nth-of-type(2n) .planet-ball { animation-delay: -2.2s; }
.star-map .planet-node:nth-of-type(3n) .planet-ball { animation-delay: -4.1s; }
.star-map .planet-aura { border-color: rgba(157, 211, 255, .55); box-shadow: 0 0 12px rgba(69, 149, 255, .2); animation: orbitPulse 5s ease-in-out infinite; }
.star-map .planet-node.selected .planet-ball { box-shadow: inset -14px -16px 25px rgba(0,19,66,.7), inset 6px 6px 13px rgba(255,255,255,.82), 0 14px 32px rgba(0,30,90,.5), 0 0 55px rgba(103,184,255,.65); }
.star-map .planet-label { color: #dbeeff; text-shadow: 0 2px 8px #00163f; }
.star-map .planet-node.selected .planet-label { color: #fff; }
@keyframes planetFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes planetTurn { 0%,100% { rotate: -1deg; scale: 1; } 50% { rotate: 2deg; scale: 1.035; } }
@keyframes cloudSpin { to { transform: rotate(342deg); } }
@keyframes orbitPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes starDrift { to { background-position: 170px 150px, -230px 190px, 280px -220px; } }
.map-bottom { margin-top: 14px; color: #7c7f86; border-color: #e8e3da; }

.navigator-card, .selected-card {
  border: 1px solid rgba(31, 51, 84, .09);
  border-radius: 22px;
  background: rgba(255, 254, 250, .94);
  box-shadow: 0 18px 52px rgba(37, 45, 60, .08);
}
.navigator-card { background: radial-gradient(circle at 50% 28%, #eaf1ff, transparent 42%), #fffefa; }
.navigator-top > span, .navigator-card h3, .selected-card h3 { color: #17243f; }
.navigator-top small, .selected-card > p, .microcopy { color: #777b83; }
.navigator-art { filter: saturate(.8); }
.navigator-card > p { color: #6e7380; }
.selected-english, .selected-meta { color: #7c8491; }

.bottom-callout, .notice, .sharing-card, .source-card, .practice-card, .peer-card,
.evidence-list, .social-banner, .achievement-panel, .collection-panel {
  border-color: rgba(31, 51, 84, .09) !important;
  background: rgba(255, 254, 250, .9) !important;
  color: #17243f;
  box-shadow: 0 16px 48px rgba(37, 45, 60, .06);
}
.bottom-callout { border-radius: 20px; }
.bottom-callout h3, .section-heading h2, .source-card h3, .practice-card h3, .peer-card h3 { color: #17243f; }
.bottom-callout p, .source-card > p, .practice-card > p, .peer-card > p { color: #717680; }
.callout-icon { color: var(--blue); background: #eaf1fe; }

.modal-backdrop { background: rgba(26, 34, 48, .42); backdrop-filter: blur(8px); }
.modal {
  color: #17243f;
  border-color: #e1dcd2;
  background: #fffefa;
  box-shadow: 0 30px 90px rgba(20, 30, 45, .2);
}
.modal-close { color: #6f7580; background: #f0ede6; }
.modal h2, .modal .question-title, .detail-hero h2 { color: #17243f; }
.detail-hero, .detail-footer, .challenge-footer { border-color: #e4dfd5; }
.knowledge-section h3, .detail-aside h3 { color: var(--blue-deep); }
.knowledge-section p, .knowledge-section p.definition, .detail-aside > p.muted { color: #5f6672; }
.example-box, .source-link, .answer-option {
  color: #3f4857;
  border-color: #ded9cf;
  background: #f7f4ed;
}
.source-link strong { color: var(--blue-deep); }
.source-link small { color: #747a85; }
.answer-option:hover:not(:disabled), .answer-option.chosen { color: #16386e; border-color: #91b5eb; background: #edf4ff; }
.answer-letter { color: var(--blue); border-color: #afc7eb; }

/* Learning/alchemy pages use the same paper-and-blue hierarchy. */
.lab-entry, .alchemy-lab, .lab-history-row, .lab-material, .lab-question,
.lab-option, .lab-feedback, .lab-comparison article, .lab-conclusion {
  color: #17243f;
  border-color: #ded9cf;
  background: #fffefa;
}
.lab-entry { box-shadow: 0 18px 55px rgba(37, 45, 60, .07); }
.lab-entry h2, .alchemy-lab h2, .lab-material h3 { color: #17243f; }
.lab-entry p, .lab-lead, .lab-material p, .lab-source-prose,
.lab-question, .lab-feedback p, .lab-comparison p, .lab-conclusion p { color: #626975; }
.lab-entry-mark, .lab-material-number { color: var(--blue); }
.lab-eyebrow, .lab-reference, .lab-label { color: var(--blue-deep); }
.lab-progress li { color: #8a8d93; border-color: #ddd8ce; }
.lab-progress [aria-current] { color: var(--blue); border-color: var(--blue); }
.lab-progress [aria-current] > span { color: #fff; border-color: var(--blue); background: var(--blue); }
.lab-option.selected { color: #173766; border-color: #91b5eb; background: #edf4ff; }
.alchemy-lab textarea { color: #17243f; border-color: #d8d3ca; background: #faf8f2; }

.page-footer { color: #8b8e94; }
#toast { color: #fff; background: #18365f; box-shadow: 0 14px 40px rgba(20, 35, 58, .2); }

@media (max-width: 1000px) {
  .galaxy-layout { grid-template-columns: 1fr; }
  .guide-column { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .sidebar {
    position: sticky;
    height: auto;
    padding: 12px 16px 0;
    border-color: rgba(31, 51, 84, .09);
    background: rgba(247, 244, 236, .95);
  }
  .sidebar nav { width: 100%; }
  .nav-item { border-radius: 9px 9px 0 0; }
  .nav-item.active { box-shadow: none; background: #fff; }
  .app-body { padding-top: 0; }
  main { padding: 34px 17px 0; }
  .page-heading { align-items: flex-start; }
  .page-heading h1 { font-size: 42px; }
  .overview-strip { border-radius: 16px; }
  .map-card, .navigator-card, .selected-card { border-radius: 16px; }
  .star-map { margin: 0 8px; }
  .guide-column { grid-template-columns: 1fr; }
}