/* Shared appearance tokens and the adjustable desktop workspace. */
:root {
  --focus-entry-height: 42px;
  --dashboard-panel-height: calc(352px + var(--focus-entry-height));
  --font-ui: var(--font-serif);
  --font-number: var(--font-serif);
  --font-index: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --canvas: #eef1f4; --ink: #20272f; --muted: #758079; --line: #dde3df;
  --paper: #f7f8f7; --surface: #fff; --subtle: #edf0ef;
  --index-rise: #d66c58; --index-fall: #4d8a73;
  --shadow: 0 18px 46px rgba(36, 46, 42, .1);
}
:root[data-theme-palette="sage"] {
  --accent: #638576; --accent-deep: #3e6656; --accent-soft: #edf5f0;
  --accent-border: #c9dcd0; --accent-surface: #f7fbf8; --accent-ring: #d7e8df;
  --window-accent: #769687; --heat-l1: #dfebe3; --heat-l2: #bcd4c5; --heat-l3: #91b39f; --heat-l4: #527e65;
}
:root[data-theme-palette="ocean"] {
  --accent: #587eaa; --accent-deep: #3c608c; --accent-soft: #eef3fa;
  --accent-border: #c8d6e9; --accent-surface: #f7f9fd; --accent-ring: #d9e4f4;
  --window-accent: #7b98bb; --heat-l1: #dfe8f4; --heat-l2: #b9cce4; --heat-l3: #88a6cb; --heat-l4: #5276a3;
}
:root[data-theme="dark"], :root[data-theme-mode="dark"] {
  --canvas: #13181e; --ink: #e2e8ee; --muted: #9aa8b5; --line: #323d48;
  --paper: #191f27; --surface: #202832; --subtle: #283340;
  --heat-empty: #303b45; --score-positive: #83c5a7; --score-negative: #f29386;
  --index-rise: #f29386; --index-fall: #83c5a7;
  --shadow: 0 18px 40px rgba(0, 0, 0, .18);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--canvas); font-family: var(--font-ui); }
button, input, select, textarea { font-family: var(--font-ui); }
.app-shell { border-color: var(--line); background: var(--paper); }
.panel { border-color: var(--line); background: var(--surface); }
.current-time-card > .current-time-art { position: absolute; z-index: 0; top: 0; right: 8px; width: auto; max-width: none; height: 100%; opacity: .8; pointer-events: none; user-select: none; }
.artwork-editor { display: grid; gap: 20px; }
.artwork-preview-frame { overflow: auto; max-height: 340px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.artwork-preview { display: block; height: 240px; width: auto; max-width: none; margin: 0 auto; }
.artwork-upload { display: grid; gap: 12px; }
.artwork-upload label { color: var(--ink); font-size: 14px; font-weight: 600; }
.artwork-upload input { display: block; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13px; }
.artwork-upload input::file-selector-button { margin-right: 10px; padding: 7px 10px; border: 1px solid var(--accent-border); border-radius: 6px; background: var(--accent-soft); color: var(--accent-deep); cursor: pointer; }
.artwork-note, .artwork-message { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.artwork-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.artwork-message { min-height: 1.6em; }
.current-time-card > .sr-only { position: absolute; }
.current-time-card .current-time-motto { margin: 12px 0 0; color: var(--accent-deep); font: 500 14px/1.4 var(--font-serif); }
[data-tooltip], [data-tooltip-target] { cursor: help; }
.hover-popover { position: fixed; z-index: 150; inset: auto; margin: 0; max-width: min(340px, calc(100vw - 24px)); padding: 10px 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 28px rgba(25, 33, 39, .18); font: 14px/1.5 var(--font-serif); white-space: pre-line; pointer-events: none; }
.hover-popover[hidden] { display: none; }
.day-axis-edge { position: absolute; z-index: 3; bottom: 0; height: 24px; padding: 0 3px; background: var(--surface); color: var(--muted); font: 11px/24px var(--font-index); pointer-events: none; white-space: nowrap; }
.day-axis-start { left: 0; }
.day-axis-end { transform: translateX(-100%); }
.home-index-chart, .index-detail-chart, .kline-chart-host { position: relative; }
.chart-hover-detail { position: absolute; right: 8px; top: 42px; z-index: 4; max-width: calc(100% - 16px); margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; }
.chart-hover-detail[hidden] { display: none; }
#activity-score-view { position: relative; }
.progress { background: var(--subtle); }
.dashboard-grid { grid-template-columns: var(--control-column, minmax(300px, 1.5fr)) 10px var(--insight-column, minmax(330px, 3fr)) 10px var(--activity-column, minmax(440px, 2fr)); gap: 0; }
.dashboard-grid .mode-panel { grid-column: 1; }
.dashboard-grid .investment-panel { grid-column: 3; }
.dashboard-grid .activity-panel { grid-column: 5; }
.dashboard-grid[data-layout="stacked"] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dashboard-grid[data-layout="stacked"] .mode-panel { grid-column: 1; grid-row: 1; height: auto; min-height: 0; max-height: none; }
.dashboard-grid[data-layout="stacked"] .investment-panel { grid-column: 1; grid-row: 2; }
.dashboard-grid[data-layout="stacked"] .activity-panel { grid-column: 1; grid-row: 3; }
.dashboard-divider { position: relative; align-self: stretch; grid-row: 1; cursor: col-resize; touch-action: none; user-select: none; outline: none; }
.dashboard-divider[data-dashboard-divider="0"] { grid-column: 2; }
.dashboard-divider[data-dashboard-divider="1"] { grid-column: 4; }
.dashboard-divider::after { content: ""; position: absolute; left: 4px; top: 44%; width: 2px; height: 44px; border-radius: 3px; background: var(--line); transition: background .15s, height .15s; }
.dashboard-divider:hover::after, .dashboard-divider:focus-visible::after { background: var(--accent); height: 64px; }
.dashboard-divider:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-border); border-radius: 6px; }
.dashboard-divider[hidden] { display: none; }
.is-resizing-dashboard, .is-resizing-dashboard * { cursor: col-resize !important; user-select: none !important; }
.mode-panel { display: flex; flex-direction: column; }
#idle-mode-view { min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--accent-border) transparent; }
.active-mode-view { min-height: 0; overflow-y: auto; }
.active-mode-view > .key-list { margin-top: 14px; }
.focus-lock-row { grid-template-rows: repeat(2, 32px); }
#focus-challenge-row { min-width: 0; }
#focus-challenge-row .drag-action { height: 32px; margin: 0; }
#focus-challenge-state { background: var(--accent-soft); color: var(--accent-deep); }
#focus-challenge-state[hidden], #start-focus-challenge[hidden], #settle-overlay-today[hidden] { display: none; }
#focus-challenge-state b { overflow: hidden; text-overflow: ellipsis; }
#settle-overlay-today { margin-top: 24px; cursor: default; }
.focus-state-overlay-card #settle-overlay-today .drag-label { color: var(--accent-deep); font-size: 11px; letter-spacing: 0; }
/* Pause belongs to the whole focus panel; rest retains the full-page overlay. */
#dashboard-controls > .focus-state-overlay.is-panel-overlay {
  position: absolute; inset: 0; z-index: 20; width: 100%; height: 100%;
  padding: 14px; overflow: auto; border-radius: inherit;
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05);
}
#dashboard-controls > .focus-state-overlay.is-panel-overlay .focus-state-overlay-card {
  width: 100%; max-width: 100%; padding: 20px 4px;
  border: 0; border-radius: 0; background: transparent; color: var(--ink); box-shadow: none;
  font-family: var(--font-serif);
}
#dashboard-controls .is-panel-overlay #focus-state-overlay-kicker { color: var(--accent-deep); font-size: 11px; font-weight: 700; }
#dashboard-controls .is-panel-overlay #focus-state-overlay-title { margin-top: 12px; font-size: 21px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
#dashboard-controls .is-panel-overlay .focus-state-overlay-timer-label { display: block; margin-top: 20px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.focus-state-overlay-timer-label[hidden] { display: none; }
#dashboard-controls .is-panel-overlay #focus-state-overlay-timer { margin-top: 6px; color: var(--accent-deep); font-size: 40px; line-height: 1.1; }
#dashboard-controls .is-panel-overlay #focus-state-overlay-note { margin-top: 16px; color: var(--accent-deep); font-size: 13px; line-height: 1.6; }
#dashboard-controls .is-panel-overlay #settle-overlay-today { width: min(260px, 100%); height: 32px; margin: 24px auto 0; }
#dashboard-controls > .focus-state-overlay.is-panel-overlay:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.focus-leaderboard-row.is-today.is-podium { position: relative; border-bottom-color: transparent; border-radius: 5px; background: var(--accent-soft); }
.focus-leaderboard-row.is-podium > :not(.focus-podium-outline) { position: relative; z-index: 1; }
.focus-podium-outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--accent-deep); }
.focus-podium-outline rect { width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .65; animation: podium-outline-flow 6s linear infinite; }
.podium-2 .focus-podium-outline rect { opacity: .5; }
.podium-3 .focus-podium-outline rect { opacity: .4; }
@keyframes podium-outline-flow { to { stroke-dashoffset: -36; } }
@media (prefers-reduced-motion: reduce) { .focus-podium-outline rect { animation: none; } }
.mode-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mode-panel:has(.active-mode-view:not([hidden])) .mode-panel-heading { display: none; }
.mode { padding-right: 60px; }
.mode .quick-pin { right: 32px; }
.mode .quick-detail { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 16px; line-height: 1; cursor: pointer; }
.mode .quick-detail:hover, .mode .quick-detail:focus-visible { background: var(--accent-soft); color: var(--accent-deep); }
.investment-panel { overflow-y: auto; }
/* Added navigation uses the original chart-tab dimensions and emphasis. */
.insight-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; height: 30px; margin-bottom: 4px; }
.insight-switch:has([data-insight-view="summary"]:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insight-switch button { min-width: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: 10px; font-weight: 700; }
.insight-switch button.is-active { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-deep); }
.activity-switch-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.insight-switch button[hidden] { display: none; }
.linear-stack, .linear-stack .stack-rest, .linear-stack .stack-other { background: var(--subtle); }
.investment-trend:not(.up):not(.down), .focus-compare-trend, .friend-diff-row em { background: var(--subtle); }
.investment-range-control { min-width: 0; }
.focus-leaderboard-row { border-color: var(--line); background: var(--surface); }
.focus-leaderboard-row.is-today { background: var(--accent-soft); }
.focus-leaderboard-main { min-width: 0; }
.heat-cell { padding: 0; border: 0; display: block; }
.heat-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.heat-detail-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.heat-detail-row .detail-note { flex: 1; margin: 0; font-size: 10px; }
.heat-detail-row .ui-button { padding: 0 6px; font-size: 10px; white-space: nowrap; }
.heatmap { min-height: 0; }
.detail-note, .chart-detail, .section-heading h2, .linear-scale { color: var(--muted); }
.ui-button, .primary, .outline-button { border-color: var(--line); background: var(--surface); color: var(--ink); }
.ui-button--primary, .primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.ui-button--secondary { color: var(--accent-deep); border-color: var(--accent-border); background: var(--accent-soft); }
.ui-button--quiet { color: var(--muted); background: transparent; }
.ui-button:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.settings-tab, .settings-panel, .account-panel { background: var(--surface); border-color: var(--line); }
.settings-panel input, .settings-panel select, .account-panel input, .login-card input, .subject-settings-row input, .focus-item-settings-row input, .focus-item-settings-row select { color: var(--ink); background: var(--surface); border-color: var(--line); }
.settings-grid .appearance-panel .settings-field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.appearance-panel select { display: block; width: 100%; height: 38px; padding: 0 10px; margin-top: 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--surface); }
.appearance-preview { margin-top: 14px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.appearance-preview i { display: block; width: 32px; height: 32px; border-radius: 9px; background: var(--accent); }
.appearance-preview strong { font-size: 13px; }
.appearance-preview p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.score-paper-bands, .quick-score-drawer, .confirm-dialog { color: var(--ink); background: var(--surface); border-color: var(--line); }
.score-strip-option { font-family: var(--font-ui); }
.site-home-hero, .site-user-card { background: var(--surface); border-color: var(--line); }
body.page-focus-kline { background: var(--canvas); }
.kline-quote-card, .kline-market-card, .kline-market-state { background: var(--surface); border-color: var(--line); }
.kline-unit-badge, .kline-live-badge, .kline-range-switch { background: var(--subtle); }
.kline-params-form input { color: var(--ink); background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] body {
  --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --accent-surface: color-mix(in srgb, var(--accent) 8%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 36%, var(--line));
  --accent-ring: color-mix(in srgb, var(--accent) 45%, var(--surface));
  --accent-deep: color-mix(in srgb, var(--accent) 65%, #fff);
  --heat-l1: color-mix(in srgb, var(--accent) 24%, var(--surface));
  --heat-l2: color-mix(in srgb, var(--accent) 45%, var(--surface));
  --heat-l3: color-mix(in srgb, var(--accent) 70%, var(--surface));
  --heat-l4: var(--accent);
}
:root[data-theme="dark"] .current-time-art { mix-blend-mode: luminosity; opacity: .2; }
:root[data-theme="dark"] .score-entry-preview, :root[data-theme="dark"] .confirm-dialog-head, :root[data-theme="dark"] .friend-diff-head,
:root[data-theme="dark"] .focus-leaderboard-row, :root[data-theme="dark"] .subject-settings-row, :root[data-theme="dark"] .settings-list > div,
:root[data-theme="dark"] .account-profile, :root[data-theme="dark"] .friend-list > div, :root[data-theme="dark"] .invitation-list > div { background: var(--surface); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .investment-trend.up, :root[data-theme="dark"] .focus-compare-trend.is-ahead,
:root[data-theme="dark"] .friend-diff-row em.ahead,
:root[data-theme="dark"] .focus-trust-state { background: #203e35; color: var(--score-positive); }
:root[data-theme="dark"] .investment-trend.down, :root[data-theme="dark"] .focus-compare-trend.is-behind,
:root[data-theme="dark"] .friend-diff-row em.behind,
:root[data-theme="dark"] .focus-trust-state.untrusted { background: #472e31; color: var(--score-negative); }
@media (prefers-color-scheme: dark) {
  :root[data-theme-mode="system"]:not([data-theme]) { --canvas: #13181e; --ink: #e2e8ee; --muted: #9aa8b5; --line: #323d48; --paper: #191f27; --surface: #202832; --subtle: #283340; }
}
@media (orientation: portrait) {
  html.native-app:not([data-viewport-mode="wide"]) .dashboard-grid, html.native-app:not([data-viewport-mode="wide"]) .dashboard-grid[data-layout="stacked"] { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  html.native-app:not([data-viewport-mode="wide"]) .dashboard-grid .mode-panel { grid-column: 1; grid-row: 1; height: auto; min-height: 0; max-height: none; }
  html.native-app:not([data-viewport-mode="wide"]) .dashboard-grid .investment-panel { grid-column: 1; grid-row: 2; }
  html.native-app:not([data-viewport-mode="wide"]) .dashboard-grid .activity-panel { grid-column: 1; grid-row: 3; }
  html.native-app:not([data-viewport-mode="wide"]) .dashboard-divider { display: none; }
  html.native-app:not([data-viewport-mode="wide"]) .settings-grid .appearance-panel .settings-field-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1279px) {
  html:not(.native-app):not([data-viewport-mode="wide"]) body { min-width: 0; }
  html:not(.native-app):not([data-viewport-mode="wide"]) .app-shell { min-width: 0; }
}
@media (max-width: 1169px) {
  html:not(.native-app):not([data-viewport-mode="wide"]) .time-grid { grid-template-columns: minmax(0, 1fr); }
  html:not(.native-app):not([data-viewport-mode="wide"]) .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html:not(.native-app):not([data-viewport-mode="wide"]) .dashboard-grid .mode-panel,
  html:not(.native-app):not([data-viewport-mode="wide"]) .dashboard-grid .investment-panel,
  html:not(.native-app):not([data-viewport-mode="wide"]) .dashboard-grid .activity-panel { grid-column: 1; grid-row: auto; width: 100%; }
  html:not(.native-app):not([data-viewport-mode="wide"]) .dashboard-grid .mode-panel { grid-row: 1; height: auto; min-height: 0; max-height: none; }
  html:not(.native-app):not([data-viewport-mode="wide"]) .dashboard-grid .investment-panel { grid-row: 2; }
  html:not(.native-app):not([data-viewport-mode="wide"]) .dashboard-grid .activity-panel { grid-row: 3; }
  html:not(.native-app):not([data-viewport-mode="wide"]) .dashboard-divider { display: none; }
  html:not(.native-app):not([data-viewport-mode="wide"]) .settings-grid,
  html:not(.native-app):not([data-viewport-mode="wide"]) .settings-content-grid,
  html:not(.native-app):not([data-viewport-mode="wide"]) .account-settings-grid,
  html:not(.native-app):not([data-viewport-mode="wide"]) .account-grid,
  html:not(.native-app):not([data-viewport-mode="wide"]) .focus-layout { grid-template-columns: minmax(0, 1fr); }
  html:not(.native-app):not([data-viewport-mode="wide"]) .settings-grid .appearance-panel .settings-field-grid { grid-template-columns: minmax(0, 1fr); }
  html:not(.native-app):not([data-viewport-mode="wide"]) .site-home-hero { flex-wrap: wrap; }
  html:not(.native-app):not([data-viewport-mode="wide"]) .site-home-hero > :first-child { flex-basis: 100%; min-width: 0; }
  html:not(.native-app):not([data-viewport-mode="wide"]) .site-user-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  html:not(.native-app):not([data-viewport-mode="wide"]) .app-shell { width: 100%; margin: 0; border: 0; border-radius: 0; }
  html:not(.native-app):not([data-viewport-mode="wide"]) .settings-field-grid,
  html:not(.native-app):not([data-viewport-mode="wide"]) .settings-field-grid-single { grid-template-columns: minmax(0, 1fr); }
  html:not(.native-app):not([data-viewport-mode="wide"]) .settings-grid .heat-hour-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html:not(.native-app):not([data-viewport-mode="wide"]) .site-user-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
:is([data-index-chart], [data-index-daily], [data-index-intraday], .kline-chart-host) {
  touch-action: none;
  overscroll-behavior: contain;
}