/* Shared appearance tokens. System appearance is the default; the selector can override it. */
:root {
  color-scheme: dark;
  --bg: #060609; --panel: #0b0c12; --border: #14151e; --text: #e0eaff;
  --muted: #8a8c9c; --green: #50b777; --red: #ee7376; --blue: #70acf4;
  --chart-text: #8e93a2; --chart-grid: #252733; --chart-border: #343642;
  --chart-green: #51b876; --chart-red: #ee7376; --chart-neutral: #22252e;
  --tooltip-bg: #202431; --tooltip-text: #f5f8ff;
  --control: #11131c; --control-border: #2c2e39; --soft: #161820;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  color-scheme: light;
  --bg: #ffffff; --panel: #ffffff; --border: #e2e7ee; --text: #1e293b;
  --muted: #64748b; --green: #208654; --red: #c74652; --blue: #326fbd;
  --chart-text: #617086; --chart-grid: #edf0f5; --chart-border: #d9e0e9;
  --chart-green: #239561; --chart-red: #d95663; --chart-neutral: #e6ebf2;
  --tooltip-bg: #ffffff; --tooltip-text: #1e293b;
  --control: #f8fafc; --control-border: #d9e1eb; --soft: #f1f5f9;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --panel: #ffffff; --border: #e2e7ee; --text: #1e293b;
  --muted: #64748b; --green: #208654; --red: #c74652; --blue: #326fbd;
  --chart-text: #617086; --chart-grid: #edf0f5; --chart-border: #d9e0e9;
  --chart-green: #239561; --chart-red: #d95663; --chart-neutral: #e6ebf2;
  --tooltip-bg: #ffffff; --tooltip-text: #1e293b;
  --control: #f8fafc; --control-border: #d9e1eb; --soft: #f1f5f9;
}
body { background: var(--bg); color: var(--text); }
.appearance-control { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.appearance-control select { width: auto; margin: 0; background: var(--control); color: var(--text); border: 1px solid var(--control-border); border-radius: 6px; font: inherit; padding: 6px 8px; cursor: pointer; }
.appearance-control select:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
footer .appearance-control { margin-left: auto; }
.market-appearance { margin: 24px 0 0; display: flex; justify-content: flex-end; }
.login-card .appearance-control { margin: 12px 0 0; width: 100%; justify-content: flex-end; }
:root[data-theme="light"] .topbar { background: rgba(255,255,255,.97); border-color: var(--border); }
:root[data-theme="light"] .topbar nav a { color: var(--muted); }
:root[data-theme="light"] .topbar nav a:hover,
:root[data-theme="light"] .topbar nav a.active,
:root[data-theme="light"] .portfolio-nav a.active,
:root[data-theme="light"] .portfolio-nav a:hover { color: var(--text); }
:root[data-theme="light"] .avatar { background: linear-gradient(140deg,#eff5fc,#dce7f4); color: #405b7b; border-color: #d4dfec; }
:root[data-theme="light"] .private-mark { background: #e3f2e9; color: var(--green); }
:root[data-theme="light"] .mini-avatar { background: #e8eef6; color: #405b7b; }
:root[data-theme="light"] .demo-label { color: var(--muted); border-color: var(--border); }
:root[data-theme="light"] .sample-dot { background: var(--muted); }
:root[data-theme="light"] :is(input,textarea,select) { background: var(--control); color: var(--text); border-color: var(--control-border); }
:root[data-theme="light"] #language { background: var(--control); color: var(--text); border-color: var(--control-border); }
:root[data-theme="light"] :is(.period-control,.period-control button,.intervals,.intervals button) { border-color: var(--control-border); }
:root[data-theme="light"] :is(.period-control button,.intervals button) { color: var(--muted); }
:root[data-theme="light"] :is(.period-control .selected,.intervals button.selected,.trade-filter .selected) { background: #e8eef5; color: var(--text); }
:root[data-theme="light"] :is(.period-control button:hover,.trade summary:hover) { background: var(--soft); }
:root[data-theme="light"] :is(.portfolio-nav a,.metric .period-sub,.trade-date small,.trade-stat small,.switch-label,.transactions th,.trade-information dt,.holding-heading small,.live-holding-grid small,.icon-button,.dialog-heading button,.setting-hint,.journal-date span,.heat-days,.heat-months,.heat-month,.heat-legend,.monthly-stats th,.stat-line span,.filter-field>span,.applied-filters,.my-trades-summary,.event-total,.filter-caption,.filter-picker summary .icon,.date-calendar-grid span,.date-picker-nav button,.date-range-value,.chart-legend,.detail-note,footer) { color: var(--muted); }
:root[data-theme="light"] .positive,
:root[data-theme="light"] .chart-value,
:root[data-theme="light"] .metric:nth-child(1) .donut-center,
:root[data-theme="light"] .ready,
:root[data-theme="light"] .eyebrow { color: var(--green); }
:root[data-theme="light"] .negative,
:root[data-theme="light"] .donut-center.negative,
:root[data-theme="light"] .metric:nth-child(1) .donut-center.negative,
:root[data-theme="light"] .error,
:root[data-theme="light"] #error { color: var(--red); }
:root[data-theme="light"] .waiting { color: #99631e; }
:root[data-theme="light"] .donut-center { color: var(--text); }
:root[data-theme="light"] .donut-sub { color: #8b681d; }
:root[data-theme="light"] :is(.trade,.position-row) { background: var(--panel); border-color: var(--border); }
:root[data-theme="light"] .trade-date { background: var(--soft); }
:root[data-theme="light"] :is(.trade-expanded,.trade-detail,.transactions td,.transactions th,.positions td,.monthly-stats td,.monthly-stats th,.stat-line,.report-tabs,footer) { border-color: var(--border); }
:root[data-theme="light"] .trade-detail { background: var(--control); }
:root[data-theme="light"] .switch-label input { background: #d5dce6; }
:root[data-theme="light"] .switch-label input:after { background: #ffffff; }
:root[data-theme="light"] .switch-label input:checked { background: var(--green); }
:root[data-theme="light"] .ohlc-tip { background: #ffffffe6; color: var(--muted); }
:root[data-theme="light"] .chevron { color: var(--muted); }
:root[data-theme="light"] .kinfo-dialog { background: var(--panel); border-color: var(--control-border); box-shadow: 0 16px 80px #24344d30; }
:root[data-theme="light"] .kinfo-dialog::backdrop { background: #27364d66; }
:root[data-theme="light"] .pill { background: #eaf0f7; color: #263e5b; border-color: #cedae8; }
:root[data-theme="light"] .pill:hover { background: #dce7f4; }
:root[data-theme="light"] .text-button { color: var(--blue); }
:root[data-theme="light"] .text-button:hover { color: #215a9d; }
:root[data-theme="light"] .daily-note { color: var(--text); }
:root[data-theme="light"] :is(.heat-cell,.heat-legend i) { background: #eaf0f6; }
:root[data-theme="light"] .heat-cell:hover:not(:disabled) { outline-color: var(--blue); }
:root[data-theme="light"] :is(.heat-cell:before,.heat-legend i.positive) { background: var(--green); }
:root[data-theme="light"] :is(.heat-cell.loss:before,.heat-legend i.negative) { background: var(--red); }
:root[data-theme="light"] :is(.day,.week-total,.month-controls button) { background: var(--control); border-color: var(--border); }
:root[data-theme="light"] .day.profit { background: #e8f4ed; border-color: #c2e2cd; }
:root[data-theme="light"] .day.loss { background: #fceef0; border-color: #f0cfd3; }
:root[data-theme="light"] .day span { color: var(--green); }
:root[data-theme="light"] .day.loss span { color: var(--red); }
:root[data-theme="light"] :is(.day small,.day.loss small,.week-total small) { color: var(--muted); }
:root[data-theme="light"] .day.selected { outline-color: var(--blue); }
:root[data-theme="light"] .calendar-with-week .weekday { color: var(--muted); border-color: var(--border); }
:root[data-theme="light"] .journal-actions .text-button { background: var(--control); border-color: var(--control-border); color: var(--blue); }
:root[data-theme="light"] .symbol-tags span { background: #e2f1e9; color: var(--green); }
:root[data-theme="light"] .symbol-tags span.negative { background: #fce9ec; color: var(--red); }
:root[data-theme="light"] .symbol-tags span.journal-symbol { background: var(--soft); color: var(--text); }
:root[data-theme="light"] .report-tabs button { color: var(--muted); }
:root[data-theme="light"] .report-tabs button.active { color: var(--text); border-bottom-color: var(--blue); }
:root[data-theme="light"] :is(.event-total b,.filter-picker summary,.picker-popover [role="option"],.date-calendar-grid button,.date-presets button) { color: var(--text); }
:root[data-theme="light"] .filter-picker summary { border-color: var(--control-border); }
:root[data-theme="light"] .picker-popover { background: var(--panel); border-color: var(--control-border); box-shadow: 0 12px 32px #24344d20; }
:root[data-theme="light"] .picker-popover input[type="search"] { border-color: var(--border); }
:root[data-theme="light"] :is(.picker-popover [role="option"]:hover,.picker-popover [role="option"]:focus-visible,.date-calendar-grid button:hover,.date-presets button:hover,.date-presets button.selected) { background: var(--soft); }
:root[data-theme="light"] .picker-popover [role="option"][aria-selected="true"] { color: var(--green); }
:root[data-theme="light"] .date-calendar-grid .in-range { background: #e8eff8; }
:root[data-theme="light"] .date-calendar-grid .range-edge { background: #326fbd; color: #ffffff; }
:root[data-theme="light"] .date-presets button.pill { background: #eaf0f7; color: #263e5b; border-color: #cedae8; }
:root[data-theme="light"] .applied-filters button { background: #e8eef6; color: #34516f; }
:root[data-theme="light"] .applied-filters .chip-symbol { background: #e1f1e7; color: #28613e; }
:root[data-theme="light"] .applied-filters .chip-side { background: #e2effa; color: #305f8b; }
:root[data-theme="light"] .applied-filters .chip-asset { background: #efe7f9; color: #634783; }
:root[data-theme="light"] .applied-filters .chip-tag { background: #f8efdf; color: #816033; }
:root[data-theme="light"] .ticker-logo.generic-ticker { background: #edf1f6; color: #405b7b; }
:root[data-theme="light"] .chart text { fill: var(--muted); }
:root[data-theme="light"] .chart .gridline { stroke: var(--chart-grid); }
:root[data-theme="light"] .chart-tooltip { fill: var(--tooltip-bg); stroke: var(--border); }
:root[data-theme="light"] .chart-tip-text { fill: var(--tooltip-text)!important; }
:root[data-theme="light"] .ring .ring-bg { stroke: var(--chart-neutral); }
:root[data-theme="light"] :is(.market-button,#logout) { background: var(--control); color: var(--text); border-color: var(--control-border); }
:root[data-theme="light"] :is(.status-card span,.market-notice,.market-empty) { color: var(--muted); }
:root[data-theme="light"] .market-empty { border-color: var(--border); }
:root[data-theme="light"] .login-card { background: var(--panel); border-color: var(--border); box-shadow: 0 16px 60px #24344d0d; }
:root[data-theme="light"] .login-card p { color: var(--muted); }
:root[data-theme="light"] .login-card #error { color: var(--red); }
:root[data-theme="light"] .login-card button { background: var(--green); color: #ffffff; border-color: var(--green); }
@media (max-width:700px) { footer .appearance-control { width: 100%; margin: 8px 0 0; justify-content: flex-end; } }