/* 观时 · 整站视觉候选 v3
   The first section retains the verified blue palette coverage from v2.
   The second section adds the shared visual system, typography and hero composition. */
:root {
  --paper: #f6fbff;
  --panel: #ffffff;
  --ink: #2b465e;
  --muted: #5d7285;
  --line: #d5e2ed;
  --soft: #edf6fd;
  --accent-text: #526f86;
  --accent-line: #9bbcd5;
  --border-hover: #8faec5;
  --focus: #5b8cb2;
  --placeholder: #607589;
  --action-bg: #e5f2fd;
  --action-text: #294e6a;
  --action-hover: #d5eaf9;
  --selection: #d9edfc;
  --scroll-thumb: #a5bed1;
  --backdrop: #243c5759;
  --dialog-shadow: #253f5a1f;
  --panel-shadow: #6b8ca105;
  --paper-wash: #e6f2fc38;
  --paper-grain: #64798a02;
  --seal-line: #b49b68;
  --seal-bg: #d4be8a0c;
  --art-ink: #9aafc2;
  --mountain-far: #8ea8bc;
  --mountain-fade: #bbcddc;
  --mountain-near: #69879f;
  --mountain-middle: #93afc3;
  --mountain-detail: #7894aa;
  --mountain-water: #abc1d2;
  --ornament-gold: #b4a071;
  --ornament-gold-text: #806a40;
  --ornament-silver: #bccad6;
  --field-line: #7e94a7;
}
:root[data-theme="dark"] {
  --paper: #182534;
  --panel: #223346;
  --ink: #e0eaf3;
  --muted: #adbed0;
  --line: #465d73;
  --soft: #2c4258;
  --accent-text: #bdcfe1;
  --accent-line: #8daac3;
  --border-hover: #9ab7ce;
  --focus: #c0def5;
  --placeholder: #adbed0;
  --action-bg: #c8e3f7;
  --action-text: #213e56;
  --action-hover: #deeffc;
  --selection: #3d607c;
  --scroll-thumb: #708fa9;
  --backdrop: #0b1625b3;
  --dialog-shadow: #00000059;
  --panel-shadow: #00000018;
  --paper-wash: #a4c6df08;
  --paper-grain: #c4d9eb03;
  --seal-line: #bca473;
  --seal-bg: #bca4730d;
  --art-ink: #b2c8db;
  --mountain-far: #9eb9d0;
  --mountain-fade: #64829b;
  --mountain-near: #b4cde1;
  --mountain-middle: #8caac2;
  --mountain-detail: #c1d6e6;
  --mountain-water: #9fbed4;
  --ornament-gold: #bba575;
  --ornament-gold-text: #d4c18f;
  --ornament-silver: #9db3c6;
  --field-line: #718da5;
}
/* Text and existing surfaces. */
body, .site-header { color: var(--ink); background-color: var(--paper); }
.brand-icon { border-color: var(--ink); color: var(--ink); }
.brand-name { color: var(--ink); }
.brand-subtitle, .sidebar-heading, .nav-section-label { color: var(--muted); }
.site-header, .site-sidebar, .site-footer { border-color: var(--line); }
.nav-link { color: var(--muted); }
.nav-link:hover { color: var(--ink); border-color: var(--line); background: var(--panel); }
.nav-link.nav-active { color: var(--ink); border-color: #c6dbea; background: linear-gradient(110deg, var(--soft), #eaf5fd80); }
.nav-icon { color: var(--accent-text); border-color: var(--line); background: linear-gradient(145deg, var(--panel), var(--soft)); }
.nav-link.nav-active .nav-icon { color: var(--ink); border-color: #aac8df; background: #e5f1fb; }
.nav-link:hover .nav-icon { color: var(--ink); border-color: var(--border-hover); }
.nav-link::before, .eyebrow > span, .home-eyebrow > span { background-color: var(--ornament-gold); }
.sidebar-toggle, .history-button, .icon-button, .save-button, .result-inspect,
.preference-control select, .traditional-button { border-color: var(--line); color: var(--ink); background-color: var(--panel); }
.sidebar-toggle:hover, .history-button:hover, .icon-button:hover, .save-button:hover,
.result-inspect:hover, .traditional-button:hover { border-color: var(--border-hover); background-color: var(--soft); }
input, textarea, select, .chart-search, .chart-select { color: var(--ink); border-color: var(--field-line); background-color: var(--panel); }
input:focus, textarea:focus, select:focus { border-color: var(--focus); outline-color: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: var(--focus); }
.cast-button, .home-start, .traditional-button-primary { color: var(--action-text); border-color: #a5c3d9; background: var(--action-bg); }
.cast-button:hover, .home-start:hover, .traditional-button-primary:hover { color: var(--action-text); border-color: var(--border-hover); background: var(--action-hover); }
/* Original home composition and small SVG stay in place. */
.home-title > span, h1 > span { color: var(--accent-text); }
.home-eyebrow, .home-intro-copy, .home-art-caption, .home-ink-inscription { color: var(--muted); }
.home-question-panel { border-color: var(--line); background: radial-gradient(ellipse at 50% 0, var(--paper-wash), transparent 66%), var(--panel); }
.home-question-panel::before, .home-question-panel::after { border-color: var(--ornament-gold); }
.home-question-ornament > span { background-color: var(--ornament-silver); }
.home-question { color: var(--ink); border-color: var(--field-line); background: var(--paper); }
.home-question:focus { border-color: var(--focus); background: var(--panel); outline-color: #86b4d53d; }
.home-optional, .home-question-meta, .home-question-meta > span,
.home-inspiration-heading, .home-inspiration-help, .home-method-note,
.home-settings-link, .home-result-note, .home-bottom-note { color: var(--muted); }
.home-inspiration-step, .home-inspiration-toggle { color: var(--accent-text); }
.home-inspiration-example:hover .home-inspiration-fill { color: var(--accent-text); }
.home-inspiration-category { color: var(--ornament-gold-text); }
.home-method-card { border-color: var(--line); background: var(--panel); }
.home-method-card:hover { border-color: var(--border-hover); background: var(--soft); }
.home-method-option > input:checked + .home-method-card { border-color: #97b9d3; background: #eaf5fd; }
.home-method-option > input:checked + .home-method-card .home-method-icon { color: var(--ink); }
.home-method-option > input:focus-visible + .home-method-card { outline-color: var(--focus); }
.home-method-card::after { background-color: var(--ornament-gold); }
.home-method-icon, .home-method-subtitle { color: var(--muted); }
.home-method-check { color: var(--ink); background-color: #cce5f8; }
.home-section-eyebrow, .home-section-heading > p { color: var(--muted); }
.home-tool-card { border-color: var(--line); background: var(--panel); }
.home-tool-card:hover { border-color: var(--border-hover); background: var(--soft); }
.home-tool-index { color: var(--ornament-gold-text); }
.home-tool-icon { color: var(--accent-text); border-color: var(--line); background: var(--soft); }
.home-tool-badge, .home-tool-description { color: var(--muted); }
.home-tool-action { color: var(--ink); border-color: var(--line); }
.home-tool-action .home-icon { color: var(--accent-text); }
.home-art-seal { color: var(--ornament-gold-text); border-color: var(--seal-line); background-color: var(--seal-bg); }
.home-question-seal { color: var(--ornament-gold-text); border-color: var(--seal-line); background-color: var(--seal-bg); }
/* Existing semantic red and Five Phase colors deliberately inherit unchanged. */
.input-panel, .result-panel, .method-card, .knowledge-note,
.trigram-knowledge, .knowledge-sources, .chart-matrix-scroller,
.chart-hex-card, .bazi-sheet, .bazi-records { border-color: var(--line); background-color: var(--panel); }
.trigram-strip, .body-use-note { border-color: var(--line); background-color: var(--soft); }
.hexagram-card { border-color: var(--line); background-color: var(--paper); }
.card-heading, .card-footer, .calculation-panel, .casting-context,
.policy-details, .knowledge-heading { border-color: var(--line); }
.hexagram-name h4, .result-heading h2 { color: var(--ink); }
.hexagram-caption, .hexagram-number, .card-tag, .card-number,
.figure-legend, .result-date, .form-note, .panel-bottom { color: var(--muted); }
.chart-toggle.is-active, .chart-reading-mode-button.is-active,
.chart-reading-size-button.is-active { color: var(--action-text); background: var(--action-bg); }
.chart-cell-number, .chart-card-pair, .chart-order-note { color: var(--muted); }
.chart-hex-button:hover { background-color: var(--soft); }
.chart-reading-label, .chart-reading-section-title { color: var(--muted); }
.chart-dialog, dialog { color: var(--ink); border-color: var(--line); background-color: var(--panel); }
dialog::backdrop { background-color: var(--backdrop); }
.bazi-button-primary { color: var(--action-text); border-color: #a5c3d9; background-color: var(--action-bg); }
.bazi-button-primary:hover { color: var(--action-text); border-color: var(--border-hover); background-color: var(--action-hover); }
.bazi-mode[aria-pressed="true"] { color: var(--action-text); background-color: var(--action-bg); }
/* Match the original SVG colors to the blue palette without changing any path. */
#home-ink-far stop:first-child { stop-color: var(--mountain-far); }
#home-ink-far stop:last-child { stop-color: var(--mountain-fade); }
#home-ink-near stop:first-child { stop-color: var(--mountain-near); }
#home-ink-near stop:nth-child(2) { stop-color: var(--mountain-middle); }
#home-ink-near stop:last-child { stop-color: var(--mountain-fade); }
#home-ink-cloud stop { stop-color: var(--paper); }
.home-ink-water { stroke: var(--mountain-water); }
.home-ink-mountains path[stroke] { stroke: var(--mountain-detail); }
.home-ink-scene > circle { fill: var(--ornament-gold); }
.home-ink-scene > g[stroke] { stroke: var(--mountain-detail); }
.home-ink-scene > g[fill] { fill: var(--mountain-near); }
:root[data-theme="dark"] .nav-link.nav-active { border-color: var(--line); background: linear-gradient(110deg, var(--soft), #2d465e80); }
:root[data-theme="dark"] .nav-link.nav-active .nav-icon { border-color: var(--accent-line); background: var(--soft); }
:root[data-theme="dark"] .home-method-option > input:checked + .home-method-card { border-color: var(--accent-line); background: var(--soft); }
:root[data-theme="dark"] .home-method-check { color: var(--action-text); background-color: var(--action-bg); }
:root[data-theme="dark"] .cast-button, :root[data-theme="dark"] .home-start,
:root[data-theme="dark"] .traditional-button-primary, :root[data-theme="dark"] .bazi-button-primary { border-color: var(--accent-line); }

/* 观时 v3 — coherent canvas, book typography and foreground surfaces.
   Navigation, content order and application behavior come from the live baseline. */
:root {
  --serif: "Songti SC", STSong, "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif;
  --paper: #f5faff;
  --panel: #ffffff;
  --ink: #213e58;
  --muted: #5b7285;
  --line: #d3e1ec;
  --soft: #e9f3fc;
  --accent-text: #315a78;
  --accent-line: #9ebed6;
  --action-bg: #284f6d;
  --action-text: #ffffff;
  --action-hover: #173d5c;
  --ornament-gold: #ae925d;
  --ornament-gold-text: #80683a;
  --field-border: #7e94a7;
  --field-line: var(--field-border);
  --surface-shadow: 0 14px 40px -26px rgb(47 83 112 / .25);
  --panel-shadow: #4267870e;
  --hero-surface: linear-gradient(160deg, rgb(255 255 255 / .97), rgb(246 251 255 / .94));
  --header-surface: rgb(245 250 255 / .89);
  --explore-surface: linear-gradient(135deg, #244d6b, #17384f);
  --radius: 11px;
}
:root[data-theme="dark"] {
  --paper: #142434;
  --panel: #1e3447;
  --ink: #e4eff8;
  --muted: #b3c6d6;
  --line: #466277;
  --soft: #29465c;
  --accent-text: #c0d9ed;
  --action-bg: #cce7f9;
  --action-text: #1a3c55;
  --action-hover: #e1f1fc;
  --field-border: #7b99b0;
  --ornament-gold: #c6b17f;
  --ornament-gold-text: #dfcb9c;
  --surface-shadow: 0 16px 44px -24px rgb(0 0 0 / .5);
  --panel-shadow: #00000022;
  --hero-surface: linear-gradient(155deg, rgb(34 56 76 / .98), rgb(25 45 62 / .97));
  --header-surface: rgb(20 36 52 / .91);
  --explore-surface: linear-gradient(135deg, #244860, #142d42);
}
body { background: var(--paper); }
/* The shell is quiet so the working content can carry the hierarchy. */
.site-header {
  background: var(--header-surface);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-header .sidebar-toggle { background: transparent; border-color: transparent; }
.site-header .sidebar-toggle:hover { background: var(--soft); }
.site-header .brand { gap: 0; }
.site-header .brand-icon { display: none; }
.site-header .brand-name {
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 5px;
}
.site-header .brand-subtitle {
  display: block;
  margin-top: 6px;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
}
.site-header .brand-subtitle::after {
  content: "GUANSHI";
  display: block;
  font: 500 8px/1 var(--sans);
  letter-spacing: 2.4px;
  color: var(--muted);
}
.site-sidebar { border-right-color: var(--line); }
.nav-icon, .nav-link.nav-active .nav-icon,
:root[data-theme="dark"] .nav-link.nav-active .nav-icon {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.nav-link:hover .nav-icon { border-color: transparent; transform: none; }
.nav-link.nav-active {
  background: linear-gradient(100deg, var(--panel), var(--soft));
  border-color: var(--line);
  box-shadow: 0 4px 12px -9px rgb(42 78 109 / .3);
}
.nav-link.nav-active::before { background: var(--ornament-gold); }
.nav-section-label, .sidebar-heading { color: var(--muted); }
/* Headings use one consistent book face; forms and data remain sans. */
h1, h2, h3, h4,
.home-title, .home-question-label, .home-section-heading h2,
.home-method-name, .home-tool-name, .home-inspiration-text,
.home-start { font-family: var(--serif); }
.home-title, .home-title > span { color: var(--ink); }
.home-title { font-weight: 500; text-shadow: 0 1px 12px rgb(255 255 255 / .65); }
.home-title > span { color: #49728f; }
:root[data-theme="dark"] .home-title > span { color: #b5d4ea; }
:root[data-theme="dark"] .home-title { text-shadow: none; }
.home-intro-copy { color: var(--muted); }
/* An environment under the whole hero, never another small complete picture. */
.home-page { position: relative; isolation: isolate; }
.home-hero { position: relative; isolation: isolate; }
.home-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -42px;
  left: -24px;
  right: -24px;
  height: 620px;
  background-image:
    linear-gradient(to right, var(--paper), transparent 8%, transparent 92%, var(--paper)),
    linear-gradient(to bottom, var(--paper), transparent 10%, transparent 74%, var(--paper)),
    url("./art/cloud-water-environment.png");
  background-size: 100% 100%, 100% 100%, 100% auto;
  background-position: center, center, center top;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  pointer-events: none;
}
.home-art, .home-art-caption { visibility: hidden; }
.home-eyebrow { color: var(--accent-text); }
.home-eyebrow > span { background: var(--ornament-gold); }
.home-question-panel {
  background: var(--hero-surface);
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 70px -34px rgb(48 87 119 / .34), inset 0 1px 0 rgb(255 255 255 / .8);
}
.home-question-panel::before, .home-question-panel::after { content: none; }
.home-question-label { color: var(--ink); font-weight: 500; }
.home-question-ornament > span { background: var(--line); }
.home-question-seal {
  border-color: transparent;
  background: transparent;
  color: var(--ornament-gold-text);
  transform: none;
}
.home-question {
  background: var(--panel);
  border-color: var(--field-border);
  border-radius: 8px;
  box-shadow: inset 0 2px 5px rgb(57 92 121 / .025);
}
.home-question:focus {
  background: var(--panel);
  border-color: var(--focus);
  outline-color: var(--accent-line);
}
.home-inspiration-text { color: var(--ink); }
.home-inspiration-category { color: var(--ornament-gold-text); }
.home-inspiration-fill { color: var(--accent-text); }
.home-method-card {
  background: var(--panel);
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgb(57 92 121 / .015);
}
.home-method-option > input:checked + .home-method-card,
:root[data-theme="dark"] .home-method-option > input:checked + .home-method-card {
  background: linear-gradient(135deg, var(--soft), var(--panel));
  border-color: var(--accent-line);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.home-method-card::after { background: var(--ornament-gold); }
.home-method-check { background: var(--action-bg); color: var(--action-text); }
.home-start {
  border-color: var(--action-bg);
  background: var(--action-bg);
  color: var(--action-text);
  box-shadow: 0 8px 20px -10px rgb(28 72 107 / .5);
  border-radius: 7px;
}
.home-start:hover {
  border-color: var(--action-hover);
  background: var(--action-hover);
  color: var(--action-text);
}
/* The second chapter has a distinct value, while the method cards stay legible. */
.home-tools { position: relative; isolation: isolate; border-top-color: transparent; }
.home-tools::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -24px -16px;
  border: 1px solid #476980;
  border-radius: 15px;
  background: var(--explore-surface);
  box-shadow: 0 20px 48px -30px rgb(23 55 81 / .45);
  pointer-events: none;
}
.home-section-heading h2 { color: #f4faff; font-family: var(--serif); }
.home-section-eyebrow, .home-section-heading > p { color: #c1d6e5; }
.home-tool-card {
  background: var(--panel);
  border-color: transparent;
  border-radius: 10px;
  box-shadow: var(--surface-shadow);
}
.home-tool-card:hover {
  background: var(--panel);
  border-color: var(--accent-line);
  box-shadow: 0 12px 30px -16px rgb(14 35 51 / .4);
}
.home-tool-soon { background: var(--panel); }
.home-tool-top { background-image: none; }
.home-tool-icon {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  color: var(--accent-text);
}
.home-tool-index { color: var(--ornament-gold-text); font-size: 13px; }
.home-tool-name { color: var(--ink); font-family: var(--serif); }
.home-tool-action { border-color: var(--line); color: var(--accent-text); }
:root[data-theme="dark"] .home-hero::before {
  background-color: var(--paper);
  background-blend-mode: normal, normal, multiply;
  opacity: .85;
  mix-blend-mode: normal;
}
:root[data-theme="dark"] .home-question-panel {
  box-shadow: 0 24px 70px -34px rgb(0 0 0 / .6), inset 0 1px 0 rgb(170 202 225 / .12);
}
@media (max-width: 899px) {
  .home-hero::before { top: -28px; left: -12px; right: -12px; background-size: 100% 100%, 100% 100%, auto 480px; background-position: center, center, 64% top; height: 530px; opacity: .8; }
  .home-tools::before { left: -16px; right: -16px; }
}
@media (max-width: 650px) {
  .site-header .brand-name { font-size: 26px; }
  .site-header .brand-subtitle { margin-top: 4px; }
  .home-question-panel { border-radius: 11px; }
  .home-hero::before {
    top: -20px;
    left: -20px;
    right: -20px;
    height: 420px;
    background-size: 100% 100%, 100% 100%, auto 340px;
    background-position: center, center, 58% top;
    opacity: .48;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  }
  .home-title { text-shadow: 0 1px 16px #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .home-tool-card, .home-start, .home-method-card { transition: none; }
  .home-tool-card:hover { transform: none; }
}