/* Portal design system. Loaded last by build_portal.py, including generated templates.
   Neutral dark surfaces match the knowledge workspace; data/semantic colors stay local. */
:root {
  --ui-bg: #f6f8f8;
  --ui-surface: #ffffff;
  --ui-raised: #edf1f1;
  --ui-text: #192824;
  --ui-muted: #5f7470;
  --ui-line: #dde5e4;
  --ui-accent: #1c5d4f;
  --ui-soft: #e8f3ed;
  --ui-on-accent: #ffffff;
  --ui-hover: #dcebe4;
  --ui-shadow: 0 2px 5px #102c210a;
}
:root.dark, :root[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #09090b;
  --ui-surface: #18181b;
  --ui-raised: #27272a;
  --ui-text: #f4f4f5;
  --ui-muted: #a1a1aa;
  --ui-line: #303036;
  --ui-accent: #e4e4e7;
  --ui-soft: #27272a;
  --ui-on-accent: #18181b;
  --ui-hover: #3f3f46;
  --ui-shadow: 0 2px 5px #00000014;
}
/* Alias older page-specific tokens to a single theme, retaining the book's paper/ink. */
:root[data-portal-page]:not([data-portal-page="answers"]) {
  --bg: var(--ui-bg); --canvas: var(--ui-bg); --bg-soft: var(--ui-raised);
  --surface: var(--ui-surface); --card: var(--ui-surface); --card-bg: var(--ui-surface); --paper: var(--ui-surface);
  --text: var(--ui-text); --ink: var(--ui-text);
  --muted: var(--ui-muted); --sub: var(--ui-muted); --text-sub: var(--ui-muted); --text-light: var(--ui-muted);
  --line: var(--ui-line); --border: var(--ui-line);
  --accent: var(--ui-accent); --blue: var(--ui-accent); --teal: var(--ui-accent); --primary: var(--ui-accent); --primary-light: var(--ui-accent); --primary-dark: var(--ui-text);
  --accent-ink: var(--ui-on-accent); --active-text: var(--ui-on-accent); --interactive: var(--ui-accent);
  --soft: var(--ui-soft); --subtle: var(--ui-raised); --chip: var(--ui-raised); --accent-soft: var(--ui-soft);
  --hover-bg: var(--ui-hover); --control-surface: var(--ui-raised); --control-hover: var(--ui-hover);
  --directory-paper: var(--ui-surface); --badge-surface: var(--ui-raised); --tier-surface: var(--ui-raised); --tier-line: var(--ui-line); --tier-text: var(--ui-text); --tag-surface: var(--ui-surface);
  --link-hover: var(--ui-soft); --secondary-hover: var(--ui-soft);
  --grid-line: transparent; --shadow: var(--ui-shadow); --card-shadow: var(--ui-shadow); --control-shadow: none; --active-shadow: none;
  --card-hover-shadow: 0 6px 20px #00000012; --radius: 14px;
  --focus-ring: color-mix(in srgb, var(--ui-accent) 25%, transparent);
}
html[data-portal-page] body {
  background: var(--ui-bg); color: var(--ui-text);
  font-family: var(--portal-font-sans); line-height: 1.6;
}
html[data-portal-page] :is(button,input,select,textarea) { font-family: inherit; }
html[data-portal-page] :is(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
html[data-portal-page] :is(button,a) { -webkit-tap-highlight-color: transparent; }
html[data-portal-page] :is(input[type="search"],input[type="text"],select,textarea) { border-radius: 10px; }
.portal-icon { width: 19px; height: 19px; flex: none; vertical-align: middle; }
/* Stable navigation dimensions; long catalogs scroll inside their own row. */
.portal-nav {
  position: relative; z-index: 30; display: flex; flex-wrap: nowrap; gap: 18px;
  min-height: 70px; padding: 12px max(24px, calc((100vw - 1320px) / 2));
  color: var(--ui-muted); background: var(--ui-surface); border-color: var(--ui-line);
}
.portal-nav a { opacity: 1; gap: 8px; border-radius: 9px; font-weight: 500; font-size: 12px; padding: 0 10px; white-space: nowrap; }
.portal-nav a:hover { background: var(--ui-raised); color: var(--ui-text); }
.portal-nav .portal-nav__home { gap: 10px; padding: 0; color: var(--ui-text); font-size: 14px; flex: none; }
.portal-brand-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ui-raised); font-size: 15px; font-weight: 700; }
.portal-nav__links { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 3px; padding: 2px; scrollbar-width: none; -ms-overflow-style: none; scroll-padding-inline: 12px; }
.portal-nav__links::-webkit-scrollbar { display: none; width: 0; height: 0; }
.portal-nav__links[data-nav-scroll="on"] { cursor: grab; }
.portal-nav__links[data-nav-scroll="on"] a { cursor: pointer; }
.portal-nav__links.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.portal-nav__links.is-dragging a { pointer-events: none; }
.portal-nav__links[data-nav-start="more"] { mask-image: linear-gradient(to right, transparent, #000 22px); -webkit-mask-image: linear-gradient(to right, transparent, #000 22px); }
.portal-nav__links[data-nav-end="more"] { mask-image: linear-gradient(to left, transparent, #000 22px); -webkit-mask-image: linear-gradient(to left, transparent, #000 22px); }
.portal-nav__links[data-nav-start="more"][data-nav-end="more"] { mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent); }
@media (prefers-reduced-motion: reduce) { .portal-nav__links.is-dragging { scroll-behavior: auto; } }
.portal-nav [aria-current="page"] { color: var(--ui-text); background: var(--ui-soft); font-weight: 600; }
.portal-nav__empty { color: var(--ui-muted); }
.portal-nav button { color: var(--ui-text); border-color: var(--ui-line); background: var(--ui-surface); white-space: nowrap; }
.portal-nav::-webkit-scrollbar-track { background: transparent; }
/* Shared typography and content hierarchy. */
html[data-portal-page]:not([data-portal-page="answers"]):not([data-portal-page="birds"]) h1 { font-size: clamp(25px, 3vw, 34px); font-weight: 650; line-height: 1.3; letter-spacing: -.035em; }
html[data-portal-page] :is(.home,.wrap,.container) { max-width: 1240px; }
html[data-portal-page] .eyebrow { font: 600 10px/1.6 var(--portal-font-sans); letter-spacing: .16em; color: var(--ui-muted); }
html[data-portal-page] header.top { background: none; padding-top: 30px; padding-bottom: 24px; }
html[data-portal-page] :is(.panel,.card,.supplier-card,.supplier-directory,.market-widget,.prov-card,.stat-card,.section-card,.kpi,.summary-card,.ov-block,.plans-block,.sync-panel) { border-color: var(--ui-line); border-radius: 16px; box-shadow: var(--ui-shadow); }
html[data-portal-page] :is(.panel,.card,.supplier-card,.supplier-directory,.market-widget,.prov-card,.stat-card,.section-card,.summary-card,.ov-block,.plans-block) { background: var(--ui-surface); }
html[data-portal-page] :is(.tool-controls button,.controls button,.tabs button,.theme-toggle,.log-tools button,.toolbar button) { border-radius: 9px; }
html[data-portal-page] :is(.table-scroll,.table-wrap,.pv,.ov-block,.plans-block) { scrollbar-gutter: stable; }
html[data-portal-page] :is(th,thead) { border-color: var(--ui-line); }
html[data-portal-page] th { background-color: var(--ui-raised); }
html[data-portal-page] :is(button,input,select):disabled { opacity: .5; }
/* Compact homepage entries keep four tools per desktop row. */
html[data-portal-page="home"] .home { max-width: 1240px; padding: 48px 32px 32px; }
html[data-portal-page="home"] .masthead { margin-bottom: 38px; padding-bottom: 30px; border-bottom: 1px solid var(--ui-line); }
html[data-portal-page="home"] .masthead h1 { margin: 10px 0 12px; font-size: clamp(26px, 3vw, 36px); }
html[data-portal-page="home"] .masthead p:not(.eyebrow) { font-size: 14px; }
.home-domain { color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
html[data-portal-page="home"] .toolbar { align-items: center; gap: 18px; }
html[data-portal-page="home"] .quick-head { margin-bottom: 16px; }
html[data-portal-page="home"] .quick-head h2 { font-size: 16px; font-weight: 600; }
html[data-portal-page="home"] .quick-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 22px; }
html[data-portal-page="home"] .quick-link { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px; min-height: 110px; border-radius: 12px; border: 1px solid var(--ui-line); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
html[data-portal-page="home"] .quick-link:hover { transform: translateY(-2px); border-color: var(--ui-muted); background: var(--ui-surface); box-shadow: 0 6px 20px #0000000c; }
html[data-portal-page="home"] .quick-link .icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: var(--ui-raised); color: var(--ui-accent); }
html[data-portal-page="home"] .quick-link .portal-icon { width: 18px; height: 18px; }
.quick-category { color: var(--ui-muted); font-size: 10px; line-height: 1.2; font-weight: 500; letter-spacing: .08em; margin-bottom: 5px; }
html[data-portal-page="home"] .quick-name { font-size: 14px; font-weight: 600; line-height: 1.5; padding-right: 8px; white-space: normal; }
html[data-portal-page="home"] .quick-link small { margin-top: 4px; font-size: 11px; line-height: 1.5; white-space: normal; }
.quick-arrow { position: absolute; top: 12px; right: 12px; font-size: 13px; color: var(--ui-muted); }
html[data-portal-page="home"] .panel { padding: 20px 22px; margin-top: 14px; }
html[data-portal-page="home"] .panel[open]>summary { margin-bottom: 20px; padding-bottom: 16px; }
html[data-portal-page="home"] .panel-title { font-size: 14px; font-weight: 600; }
html[data-portal-page="home"] .panel-brief { margin-left: 8px; }
html[data-portal-page="home"] footer { margin-top: 32px; border-color: var(--ui-line); }
html[data-portal-page="home"] .manage-col { background: var(--ui-bg); border-radius: 12px; }
html[data-portal-page="home"] .manage-item { background: var(--ui-surface); border-radius: 9px; }
/* Atlas uses the same surfaces without its old graph-paper backdrop. */
html[data-portal-page="atlas"] body { background-image: none; }
html[data-portal-page="atlas"] .supplier-directory { backdrop-filter: none; }
html[data-portal-page="atlas"] :is(.atlas-pages a[aria-current="page"],.region-switch-button[aria-pressed="true"]) { background: var(--ui-accent); color: var(--ui-on-accent); }
html[data-portal-page="atlas"] :is(.intelligence-guide,.comparison-bar) { border-color: var(--ui-line); }
/* Market chart surfaces retain each preset and the red-up/green-down convention. */
html[data-portal-page="markets"] :is(.market-chart-wrap,.market-empty) { background: var(--visual-bg,#111113); border-color: var(--ui-line); }
html[data-portal-page="markets"] .market-chart-wrap { border-radius: 12px; }
/* Reading page keeps its reader; headers and panels join the shared hierarchy. */
html[data-portal-page="books"] .home-hero { padding-top: 30px; padding-bottom: 40px; }
html[data-portal-page="books"] .home-hero h1 { font-size: clamp(32px,4vw,48px); }
html[data-portal-page="books"] .serif-title { font-family: inherit; font-weight: inherit; }
html[data-portal-page="books"] .sync-panel { padding: 22px; background: var(--ui-surface); border: 1px solid var(--ui-line); }
html[data-portal-page="books"] .loop-caption h2 { font-size: 24px; line-height: 1.4; }
html[data-portal-page="books"] .loop-caption em { font-family: inherit; font-style: normal; }
html[data-portal-page="books"] .node-visual { color: var(--ui-muted); }
html[data-portal-page="books"] .button-primary:hover { background: var(--ui-text); color: var(--ui-bg); }
/* Games keep meaningful map, book and canvas colors; their surrounding UI is neutral. */
html[data-portal-page="countymap"] .mode-tab.active { background: var(--ui-soft); color: var(--ui-accent); }
html[data-portal-page="countymap"] .national-btn { background: var(--ui-accent); color: var(--ui-on-accent); border-radius: 12px; }
html[data-portal-page="countymap"] .slot-row.empty { background: var(--ui-bg); }
html[data-portal-page="answers"] { --bg-deep: #09090b; --bg-mid: #18181b; }
html[data-portal-page="answers"] body { background: #09090b; }
html[data-portal-page="answers"] body::before, html[data-portal-page="answers"] body::after { background: none; }
html[data-portal-page="birds"] #overlay { background: #09090bbf; backdrop-filter: blur(8px); }
html[data-portal-page="birds"] #overlay .panel { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-line); }
html[data-portal-page="birds"] #overlay :is(h1,h2) { color: var(--ui-text); text-shadow: none; }
html[data-portal-page="birds"] #overlay :is(.sub,.bgTip,.bgTxt span,.scoreLine) { color: var(--ui-muted); }
html[data-portal-page="birds"] :is(.hbtn,.btn) { border-radius: 10px; background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-line); text-shadow: none; }
html[data-portal-page="birds"] .btn.primary { background: var(--ui-accent); color: var(--ui-on-accent); box-shadow: none; }
@media (max-width: 900px) {
  .portal-nav { padding: 10px 16px; gap: 12px; }
  .portal-nav__home span:last-child { display: none; }
  html[data-portal-page="home"] .quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .portal-nav { min-height: 58px; gap: 8px; padding: 8px 12px; }
  .portal-nav__home::after { display: none; }
  .portal-nav a { padding-inline: 9px; min-height: 38px; font-size: 12px; }
  .portal-nav__links .portal-icon { display: none; }
  html[data-portal-page="home"] .home { padding: 28px 16px 24px; }
  html[data-portal-page="home"] .masthead { position: relative; margin-bottom: 24px; padding-bottom: 24px; padding-top: 38px; }
  html[data-portal-page="home"] .toolbar { position: absolute; top: 0; right: 0; }
  .home-domain { display: none; }
  html[data-portal-page="home"] .masthead h1 { font-size: 26px; }
  html[data-portal-page="home"] .masthead .eyebrow { font-size: 9px; }
  html[data-portal-page="home"] .quick-grid { gap: 10px; }
  html[data-portal-page="home"] .quick-link { display: flex; flex-direction: column; gap: 8px; padding: 14px; min-height: 140px; }
  html[data-portal-page="home"] .quick-link .icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
  html[data-portal-page="home"] .quick-name { font-size: 14px; padding-right: 0; }
  html[data-portal-page="home"] .quick-link small { font-size: 11px; }
  html[data-portal-page="home"] .panel { padding: 16px; }
  html[data-portal-page="home"] .panel-brief { margin-left: 0; }
  html[data-portal-page="books"] .sync-panel { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-portal-page] *, html[data-portal-page] *::before, html[data-portal-page] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Keep labels legible when the dark theme uses a pale primary action. */
html[data-portal-page="modelcheck"] .runbtn { color: var(--ui-on-accent); }
html[data-portal-page="atlas"] .region-switch-count { background: var(--ui-bg); color: var(--ui-text); }
html[data-portal-page="countymap"].dark .mode-tab.active { background: var(--ui-soft); }
html[data-portal-page="countymap"].dark .slot-row.empty { background: var(--ui-bg); }
html[data-portal-page="countymap"] :is(.submit-btn,.completion-card button,.pause-card button,.dialog-actions .primary,.slot-btn:hover) { color: var(--ui-on-accent); }
html[data-portal-page="birds"] #overlay :is(.bgTxt b,.scoreLine b,.lvBtn .n) { color: var(--ui-text); }
html[data-portal-page="birds"] #overlay .lvBtn { background: var(--ui-raised); border-color: var(--ui-line); }
html[data-portal-page="birds"] #menuStars { color: var(--ui-muted); }

html[data-portal-page="markets"] .market-widget { --visual-bg: #111113; --visual-edge: #303036; --visual-separator: #303036; --visual-text: #e4e4e7; --visual-muted: #a1a1aa; }
html[data-portal-page="markets"] .market-widget[data-chart-style="eastmoney"] { --visual-bg: #141416; }
html[data-portal-page="markets"] .market-widget[data-chart-style="tonghuashun"] { --visual-bg: #19191c; }
html[data-portal-page="markets"] .market-widget[data-chart-style="futu"] { --visual-bg: #101012; }
html[data-portal-page="countymap"].dark .dialog-actions .primary { color: var(--ui-on-accent); }