/* CSR235 / Black & Gold / v0.4.2
   One theme for every route and dialog. No remote fonts, CDN, or image requests.
   Legacy structural styles load first. These tokens and components own the skin.
   Red / yellow / lime remain semantic: cash percentage, errors and cautions. */
:root {
  color-scheme: dark;
  --bg: #0e0d0c;
  --surface: #161615;
  --surface-raised: #1d1d1b;
  --surface-soft: #121211;
  --gold: #d3b579;
  --gold-light: #eddbb4;
  --gold-muted: #a89162;
  --gold-line: #51452e;
  --gold-wash: #252218;
  --text: #f1f0e9;
  --text-secondary: #c7c5be;
  --text-muted: #a4a096;
  --border: #343330;
  --border-soft: #282724;
  --positive: #a5d3b2;
  --positive-bg: #14271e;
  --negative: #f0a7a5;
  --negative-bg: #2b1b1b;
  --warning: #ecd096;
  --warning-bg: #2a251a;
  --ink: var(--text);
  --paper: var(--bg);
  --navy: #0b0b0a;
  --muted: var(--text-muted);
  --line: var(--border);
  --blue: var(--gold);
  --teal: var(--positive);
  --red: var(--negative);
  --white: var(--surface);
  --shadow: 0 12px 32px #00000014;
  --body-font: "Pretendard", "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --number-font: "Aptos", "Inter", "Segoe UI", Arial, sans-serif;
  --display-font: "Iowan Old Style", "Baskerville", "Palatino Linotype", Georgia, serif;
}
html { scroll-padding-top: 30px; scrollbar-color: #5f5d56 var(--bg); scrollbar-width: thin; }
body { background: var(--bg); color: var(--text); font-family: var(--body-font); font-size: var(--ui-min); line-height: 1.7; -webkit-font-smoothing: antialiased; }
::selection { background: #5d5134; color: #fff5dd; }
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea { transition: background-color .16s, border-color .16s, color .16s, box-shadow .16s; }
a { color: var(--gold-light); }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
#content:focus { outline: none; }
.skip-link { position: fixed; top: -80px; left: 24px; z-index: 200; padding: 12px 18px; background: var(--gold); color: #131211; border-radius: 8px; }
.skip-link:focus { top: 16px; }
h1 { font-size: 31px; font-weight: 600; line-height: 1.4; letter-spacing: -.9px; }
h2 { color: var(--text); font-weight: 600; letter-spacing: -.4px; }
h3 { color: var(--text); }
small { color: inherit; }
button:disabled, .button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.button[aria-busy="true"] { cursor: progress; }
/* Shell — quiet architectural lines, a warm black canvas. */
.shell { grid-template-columns: 240px minmax(0, 1fr); background: var(--navy); }
.sidebar { padding: 34px 20px; background: linear-gradient(160deg,#131211 0%,#0b0b0a 55%); border-right: 1px solid #302f2c; color: var(--text); z-index: 8; }
.brand { gap: 12px; margin: 0 6px 24px; font-weight: 400; }
.brand-mark { width: 43px; height: 48px; position: relative; flex: 0 0 43px; border: 1px solid var(--gold-muted); border-radius: 10px 2px 10px 2px; background: linear-gradient(135deg,#353221,#161615); color: var(--gold-light); font: 32px/1 var(--display-font); font-weight: 400; box-shadow: inset 0 0 0 4px #131211; }
.brand-mark::after { content: ''; height: 1px; width: 15px; right: -5px; top: 23px; position: absolute; background: var(--gold); }
.brand-wordmark { font: 27px/1.2 var(--display-font); color: var(--gold-light); letter-spacing: .6px; }
.brand small, .brand-wordmark small { display: block; font: var(--ui-min)/1.5 var(--number-font); font-weight: 500; color: var(--gold-muted); letter-spacing: 1.45px; margin-top: 6px; }
.sidebar-caption { font-size: var(--ui-min); font-weight: 400; letter-spacing: .15px; color: var(--text-secondary); padding: 0 6px 23px; margin: 0 6px 29px; border-bottom: 1px solid #302f2c; }
.nav-caption { display: flex; justify-content: space-between; align-items: center; font: var(--ui-min)/1.5 var(--number-font); font-weight: 600; letter-spacing: 1.9px; color: var(--text-muted); margin: 0 13px 17px; }
.nav-caption span { font-size: var(--ui-min); letter-spacing: 1px; }
.nav-button { color: var(--text-muted); border: 1px solid transparent; border-radius: 8px; margin-bottom: 6px; padding: 13px 12px; gap: 11px; min-height: 49px; font-size: var(--ui-min); }
.nav-button .nav-icon { display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; opacity: 1; color: var(--text-muted); flex-shrink: 0; }
.nav-icon svg { width: 20px; height: 20px; }
.nav-label { flex: 1; }
.nav-index { font: var(--ui-min)/1 var(--number-font); letter-spacing: .5px; opacity: .65; }
.nav-button:hover { background: #1d1c1a; color: var(--text); }
.nav-button.active { color: var(--gold-light); background: linear-gradient(90deg,#302d1e,#21201e); font-weight: 600; border-color: #4a482e; box-shadow: inset 2px 0 var(--gold); }
.nav-button.active .nav-icon { color: var(--gold); }
.sidebar-bottom { border-top: 1px solid #302f2c; padding-top: 22px; left: 32px; right: 32px; bottom: 30px; color: var(--text-secondary); font-size: var(--ui-min); }
.sidebar-bottom small { color: var(--text-muted); font-size: var(--ui-min); margin-top: 10px; line-height: 1.9; }
.system-dot { width: 6px; height: 6px; background: var(--text-muted); box-shadow: none; margin-right: 7px; }
.system-dot.is-on { background: #a5d3b2; box-shadow: 0 0 8px #a5d3b233; }
.system-dot.is-off { background: #8b8679; }
.workspace { min-width: 0; background: radial-gradient(ellipse at 68% 0%,#22222030,transparent 50%), var(--bg); }
.topbar { height: 76px; border-bottom: 1px solid var(--border); background: #121110ec; padding: 0 36px; }
.breadcrumb { color: var(--text-muted); letter-spacing: .1px; font-size: var(--ui-min); }
.breadcrumb span { color: var(--gold-muted); padding: 0 12px; }
.breadcrumb b { color: var(--text-secondary); }
.top-actions { gap: 16px; }
.top-actions select { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 7px; font-size: var(--ui-min); padding: 6px 25px 6px 10px; }
.user-pill { border: 1px solid var(--border); border-radius: 5px; background: #1b1a18; color: var(--text-secondary); font-size: var(--ui-min); padding: 5px 10px; }
.text-button { color: var(--text-muted); font-size: var(--ui-min); }
.text-button:hover { color: var(--gold-light); }
main { max-width: 1620px; padding: 25px 36px 22px; }
.demo-banner { background: #1a1a18; border-color: #3b3c27; border-radius: 6px; color: #b7b5ad; padding: 9px 13px; font-size: var(--ui-min); }
.demo-banner b { color: #ddd6ba; font-weight: 500; }
.page-title { margin: 28px 0 24px; align-items: center; }
.eyebrow { color: var(--gold-muted); font-family: var(--number-font); font-size: var(--ui-min); font-weight: 600; letter-spacing: 2.3px; margin-bottom: 8px; }
.page-title p { color: var(--text-muted); font-size: var(--ui-min); margin-top: 6px; }
/* Shared interaction language. */
.button { min-height: 40px; border-radius: 7px; background: #1f1f1d; border-color: #4a4843; color: var(--text-secondary); padding: 9px 15px; font-size: var(--ui-min); font-weight: 500; }
.button:hover { background: #2a2926; border-color: #7d7652; color: var(--gold-light); }
.button.primary { background: linear-gradient(115deg,#e4cd9a,#c7a467); border-color: #e1c593; color: #181816; box-shadow: 0 3px 13px #d3b5790d; font-weight: 700; }
.button.primary:hover { background: linear-gradient(115deg,#f0deb5,#d4b57b); border-color: #f0dbaf; color: #121211; }
.button.primary:active { background: #c9ae77; }
.button.ghost { background: transparent; border-color: var(--border); color: var(--text-secondary); }
.button.ghost:hover { background: #232220; color: var(--gold-light); border-color: var(--gold-muted); }
.button.small { min-height: 33px; padding: 6px 11px; font-size: var(--ui-min); }
.button.danger, .button.danger.ghost { color: var(--negative); background: #231a17; border-color: #6a3f38; }
.button.danger:hover { filter: none; color: #ffd2c9; background: #3a2421; border-color: #b97663; }
.button.danger.filled { color: #fff4ec; background: #8f433b; border-color: #b97560; }
.button.danger.filled:hover { background: #a35546; }
.button-row { gap: 9px; }
.badge { border: 1px solid transparent; border-radius: 4px; font-size: var(--ui-min); font-weight: 500; letter-spacing: .1px; padding: 3px 7px; }
.badge.blue { background: #2b2a1b; color: var(--gold-light); border-color: #595132; }
.badge.gray { background: #252421; color: #c1beb7; border-color: #3f3d39; }
.badge.green { background: var(--positive-bg); color: var(--positive); border-color: #365b42; }
.badge.amber { background: #302919; color: var(--warning); border-color: #5c4c2f; }
.badge.red, .badge.danger { background: var(--negative-bg); color: var(--negative); border-color: #65433c; }
.account-toolbar { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-shadow: none; padding: 14px 18px; margin-bottom: 19px; }
.account-toolbar label { font-size: var(--ui-min); letter-spacing: .3px; color: var(--text-muted); }
.account-toolbar select { background: #21211f; color: var(--text); border: 1px solid #3f3d39; border-radius: 6px; min-width: 210px; font-size: var(--ui-min); font-weight: 500; padding: 7px 34px 7px 12px; }
.account-context { font-size: var(--ui-min); color: var(--text-muted); }
.account-context span { color: var(--gold-light); }
/* All forms — dates, file input, autofill, checks, states. */
input, select, textarea { color-scheme: dark; color: var(--text); background: #100f0e; border: 1px solid #4a4843; border-radius: 8px; padding: 11px 13px; min-height: 43px; font-size: var(--ui-min); }
input::placeholder, textarea::placeholder { color: #99958a; opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: #756e4b; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px #d3b5791a; outline: none; }
input[type="date"], input[type="number"] { font-family: var(--number-font); font-variant-numeric: tabular-nums; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .8; cursor: pointer; padding: 3px; }
select option, select optgroup { color: var(--text); background: #1d1c1a; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 1000px #262522 inset; caret-color: var(--gold-light); }
input[type="file"] { border: 1px dashed #585651; background: #1a1917; color: var(--text-secondary); font-size: var(--ui-min); }
input[type="file"]::file-selector-button { background: #2d2c29; border: 1px solid #736642; border-radius: 5px; color: var(--gold-light); font: inherit; padding: 7px 10px; margin-right: 12px; cursor: pointer; }
label { color: var(--text-secondary); font-weight: 500; font-size: var(--ui-min); }
.field { gap: 8px; }
.field small { color: var(--text-muted); font-size: var(--ui-min); line-height: 1.7; }
.check-field, .check-field.field { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; line-height: 1.85; font-size: var(--ui-min); font-weight: 400; color: var(--text-secondary); padding: 12px 13px; background: #1f1e1c; border: 1px solid #3c3b37; border-radius: 8px; }
input[type="checkbox"], .field input[type="checkbox"], .check-field input { width: 19px; min-width: 19px; max-width: 19px; height: 19px; min-height: 19px; padding: 0; margin: 2px 0 0; flex: 0 0 19px; accent-color: var(--gold); cursor: pointer; }
.section-label { color: var(--gold); letter-spacing: .5px; font-size: var(--ui-min); font-weight: 600; padding: 13px 0 4px; border-bottom: 1px solid #49472d; }
.form-actions { border-top: 1px solid var(--border); margin-top: 23px; padding-top: 18px; gap: 10px; }
.form-error { background: var(--negative-bg); border: 1px solid #67443b; border-left: 3px solid #d18574; color: #f2b9ac; border-radius: 7px; padding: 13px 16px; font-size: var(--ui-min); overflow-wrap: anywhere; }
.file-box { background: #1a1917; border: 1px dashed #52504a; border-radius: 10px; padding: 20px; }
.file-result { background: #22211f; border-color: var(--border); color: var(--text-secondary); }
/* Cards, numerical hierarchy, and dense ledger tables. */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow); margin-bottom: 20px; }
.card-heading { border-bottom: 1px solid var(--border); background: linear-gradient(100deg,#1e1d1b,#161615); padding: 19px 23px; }
.card-heading h2 { color: var(--text); font-size: 16px; font-weight: 500; }
.card-heading p { font-size: var(--ui-min); color: var(--text-muted); margin-top: 5px; }
.card-body { padding: 22px 23px; }
.kpi-grid { gap: 13px; margin: 19px 0; }
.kpi { border-radius: 11px; padding: 20px 21px 18px; min-height: 125px; background: linear-gradient(135deg,#201f1d,#161615); border-color: #3b3a36; box-shadow: none; position: relative; }
.kpi::before { content: ''; display: block; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: linear-gradient(90deg,#b09b62aa,transparent 68%); }
.kpi-title { color: #b9b7af; font-size: var(--ui-min); margin-bottom: 12px; }
.kpi-value { font-family: var(--number-font); font-weight: 500; font-size: clamp(24px,2.25vw,32px); line-height: 1.2; letter-spacing: -.8px; color: var(--gold-light); font-variant-numeric: lining-nums tabular-nums; }
.kpi-value span { font-family: var(--body-font); color: #c6c4be; font-size: var(--ui-min); font-weight: 400; margin-left: 5px; }
.kpi-note { font-size: var(--ui-min); color: #a5a197; margin-top: 9px; }
.quote-strip { background: #121110; border-color: var(--border); padding: 13px 23px; gap: 25px; }
.quote-strip div { font-size: var(--ui-min); color: var(--text-muted); }
.quote-strip b { color: var(--gold-light); font-family: var(--number-font); font-size: var(--ui-min); font-weight: 500; margin-left: 9px; }
.order-date-highlight strong { color: var(--gold-light); font-family: var(--number-font); font-weight: 500; }
.table-scroll { scrollbar-color: #64625c #151413; scrollbar-width: thin; }
table { color: var(--text-secondary); font-size: var(--ui-min); }
th { background: #1b1a18; color: #b1aea5; border-color: #3b3935; font-size: var(--ui-min); letter-spacing: .3px; padding: 13px 22px; font-weight: 500; }
td { border-bottom-color: var(--border-soft); padding: 17px 22px; }
tr:hover td { background: #2423212e; }
.numeric { font-family: var(--number-font); font-variant-numeric: tabular-nums; }
.price { font-size: 21px; font-weight: 500; color: var(--gold-light); letter-spacing: -.2px; }
.quiet { color: #a8a59b; }
.price.quiet { color: #a8a59b; }
.channel { font-weight: 500; gap: 10px; }
.channel i { font-family: var(--number-font); font-size: var(--ui-min); font-weight: 600; border-radius: 5px; width: 35px; height: 31px; border: 1px solid #544e2e; }
.channel.buy i { background: #332f1d; color: var(--gold-light); border-color: #75633d; }
.channel.sell i { background: #282725; color: #d1cfca; border-color: #5c5a55; }
.channel small { font-size: var(--ui-min); color: var(--text-secondary); }
.table-foot { border-top: 1px solid var(--border); background: #151514; color: var(--text-muted); font-size: var(--ui-min); }
.note { color: var(--text-muted); font-size: var(--ui-min); line-height: 1.85; }
.note b { color: var(--text-secondary); font-weight: 500; }
.note.warning { color: var(--warning); }
.mini-row { color: var(--text-muted); font-size: var(--ui-min); padding: 11px 0; gap: 15px; }
.mini-row b { color: var(--text-secondary); font-weight: 500; font-variant-numeric: tabular-nums; }
.mini-row+.mini-row { border-color: var(--border-soft); }
.empty, .loading { color: var(--text-muted); background: transparent; font-size: var(--ui-min); padding: 45px 24px; }
.loading::before { content: ''; display: inline-block; width: 12px; height: 12px; border: 1px solid #77704e; border-top-color: var(--gold-light); border-radius: 50%; margin-right: 10px; vertical-align: middle; animation: csr-spin 1.1s linear infinite; }
@keyframes csr-spin { to { transform: rotate(360deg); } }
.status-bubble { color: var(--positive); background: var(--positive-bg); border: 1px solid #365b42; padding: 4px 8px; border-radius: 5px; }
.notice-line { background: #22211f; border: 1px solid #474540; color: #cbc9c4; border-radius: 9px; font-size: var(--ui-min); padding: 13px 16px; }
.profile-grid { gap: 19px; }
.account-card { padding: 23px; position: relative; border-top: 2px solid #7e754a; }
.account-card h2 { font-size: 22px; font-weight: 500; margin: 23px 0 16px; color: var(--gold-light); }
.account-card .button-row { margin-top: 13px; }
.account-card>.button-row:first-child { margin-top: 0; gap: 6px; }
.success-report { background: linear-gradient(110deg,#282725,#21211f); border: 1px solid #55534e; border-radius: 10px; color: var(--positive); padding: 23px; }
.report-check { background: #3f3d39; color: #c5dfb9; border: 1px solid #6a6861; border-radius: 50%; }
.success-report h2 { color: #d9e9cd; font-weight: 500; }
.success-report p { color: #b5c8a5; }
.result-grid { gap: 13px; }
.result-item { background: #232220; border: 1px solid #3e3d39; border-radius: 8px; color: #b8b6ae; font-size: var(--ui-min); padding: 16px; }
.result-item b { font-family: var(--number-font); color: var(--gold-light); font-size: 24px; font-weight: 500; letter-spacing: -.5px; }
/* Order identity — TODAY is distinct from history, not just the newest record. */
.order-hero { isolation: isolate; overflow: hidden; position: relative; border: 1px solid #74623a; border-top: 1px solid #b39b63; background: radial-gradient(ellipse at 90% 50%,#63663a22,transparent 55%),linear-gradient(115deg,#242321,#1c1b19); color: var(--text); border-radius: 14px; padding: 30px 32px; gap: 24px; box-shadow: 0 12px 30px #00000026; min-height: 200px; }
.order-hero::before { content: ''; position: absolute; width: 370px; height: 370px; right: -95px; top: -160px; border: 1px solid #dbc08013; border-radius: 50%; box-shadow: 0 0 0 48px #dbc08008, 0 0 0 96px #dbc08004; pointer-events: none; z-index: -1; }
.order-hero::after { content: ''; position: absolute; top: 18px; bottom: 18px; left: 0; width: 3px; background: linear-gradient(transparent,#d9bc79,transparent); pointer-events: none; }
.order-hero.today { background: radial-gradient(ellipse at 95% 40%,#90875c20,transparent 55%),linear-gradient(112deg,#2d2d1c 0%,#20201e 65%,#1d1c1a 100%); border-color: #79673b; border-top-color: #dac186; }
.order-hero.past, .order-hero.original { background: linear-gradient(115deg,#222220,#1b1a18); border-color: #595751; border-top-color: #a09c91; box-shadow: none; }
.order-hero.past::after, .order-hero.original::after { background: #757165; }
.order-hero.waiting { background: #232220; border-color: #726438; }
.order-hero h2 { color: #e7e4cd; font-size: 16px; font-weight: 400; margin: 14px 0 7px; letter-spacing: -.2px; }
.hero-tag { color: var(--gold-light); background: #423e2433; border: 1px solid #837142; border-radius: 4px; font-family: var(--number-font); font-size: var(--ui-min); line-height: 1.6; padding: 4px 8px; font-weight: 500; letter-spacing: 2.2px; }
.today .hero-tag::before { content: ''; display: inline-block; width: 4px; height: 4px; background: var(--gold-light); margin: 0 7px 2px 0; border-radius: 50%; box-shadow: 0 0 6px #d3b57977; }
.past .hero-tag, .original .hero-tag { background: #302f2c; color: #d3d1cc; border-color: #66645d; }
.hero-date { color: #f1deaf; font: 54px/1.1 var(--display-font); font-weight: 400; letter-spacing: -.5px; font-variant-numeric: lining-nums tabular-nums; }
.hero-date span { color: #c4c2bc; font-family: var(--body-font); font-weight: 400; font-size: var(--ui-min); margin-left: 15px; letter-spacing: -.1px; }
.past .hero-date, .original .hero-date { color: #e1e0dc; }
.order-hero p { color: #bbb9b1; font-size: var(--ui-min); margin-top: 13px; max-width: 650px; line-height: 1.7; }
.hero-meta { min-width: 200px; border-left-color: #79744455; padding-left: 27px; gap: 12px; }
.hero-meta span { font-size: var(--ui-min); color: #b6b3aa; letter-spacing: .2px; }
.hero-meta strong { font-weight: 500; font-size: var(--ui-min); color: #e3dfc1; overflow-wrap: anywhere; }
.history-toolbar { background: #171615; border-color: #3e3c38; border-radius: 9px; padding: 13px 18px; gap: 12px; }
.history-title b { color: var(--text-secondary); font-size: var(--ui-min); font-weight: 500; }
.history-title small { color: var(--text-muted); font-size: var(--ui-min); }
.history-controls input, .history-toolbar>select { color-scheme: dark; border: 1px solid #4b4a45; background: #121211; color: var(--text-secondary); font-size: var(--ui-min); min-height: 37px; border-radius: 6px; }
.history-controls input { width: 155px; max-width: 155px; padding: 8px 11px; }
.history-controls .button { min-height: 37px; }
.order-action-card { border-color: #5a5637; }
.order-action-card .card-heading { border-bottom-color: #514d31; }
.order-action-card .card-heading h2 { color: var(--gold-light); font-size: 16px; }
.order-disclaimer { color: var(--text-muted); font-size: var(--ui-min); }
/* Price / cost-basis graph. Cash colour values come from the unchanged model. */
.graph-card { border-color: #474540; margin-top: 23px; }
.graph-card .card-heading { background: #1b1a18; }
.chart-range { border: 1px solid #484742; border-radius: 7px; padding: 3px; gap: 2px; background: #11100f; }
.chart-range button { background: transparent; color: #b5b2a9; border: 1px solid transparent; border-radius: 4px; font-family: var(--number-font); font-size: var(--ui-min); padding: 6px 12px; min-height: 32px; }
.chart-range button:hover { background: #2b2a28; color: #f3deb2; }
.chart-range button.selected { background: #d1b87c; border-color: #dcc894; color: #161615; font-weight: 700; }
.chart-legend { color: #c8c6bf; font-size: var(--ui-min); padding-top: 17px; gap: 19px; }
.line-key:before { border-color: var(--gold); border-width: 2px; }
.avg-key:before { border-color: #d5d4cf; border-top-style: dashed; }
.cash-scale i { background: linear-gradient(to right,#ef4444,#facc15,#a3e635); box-shadow: 0 0 0 1px #ffffff18; height: 6px; }
.cash-scale small { color: #c8c6bf; font-size: var(--ui-min); }
.cash-green { color: #a3e635; }
.cash-yellow { color: #facc15; }
.cash-red { color: #f69082; }
.chart-plot { fill: #121211; }
.chart-grid { stroke: #44423e; stroke-width: 1; stroke-opacity: .7; }
.chart-axis { fill: #b9b7af; font-size: var(--ui-min); font-family: var(--number-font),var(--body-font); }
.chart-close { stroke: var(--gold); stroke-width: 2.3; }
.chart-close-area { fill: url(#close-area-gold); stroke: none; pointer-events: none; }
.chart-avg { stroke: #d5d4cf; stroke-width: 1.6; stroke-dasharray: 5 5; }
.chart-point { stroke: #181715; stroke-width: 1; }
.chart-cursor { stroke: #c2c0b9; stroke-opacity: .65; }
#chart-hit:focus-visible { outline: none; stroke: var(--gold-light); stroke-width: 1.5; }
.price-chart { padding-top: 12px; }
.chart-readout { border-color: #42413d; background: #201f1d; color: #cbc9c4; border-radius: 8px; font-size: var(--ui-min); padding: 13px 16px; }
.chart-readout strong { color: var(--gold-light); font-family: var(--number-font); font-size: var(--ui-min); font-weight: 600; }
.chart-readout b { color: var(--text); font-family: var(--number-font); font-weight: 500; }
.chart-readout small, .chart-footnotes { color: #aeaba2; }
.chart-footnotes { font-size: var(--ui-min); }
.chart-window-header { background: #222220; border-color: #494742; border-radius: 8px; margin-top: 17px; padding: 12px 15px; }
.chart-window-header strong { font-family: var(--number-font); color: var(--gold-light); font-size: 16px; font-weight: 500; }
.chart-window-header small { color: #b7b4ac; font-size: var(--ui-min); }
.chart-window-mode { background: #2d2c2a; color: #e2d69c; border: 1px solid #6f6b3a; border-radius: 4px; font-size: var(--ui-min); font-weight: 500; }
.chart-window-mode.past { background: #302f2c; border-color: #5f5d56; color: #d0cec8; }
.chart-window-header>.button { min-height: 36px; font-size: var(--ui-min); }
.chart-navigator { background: #191816; border-color: #413f3b; border-radius: 9px; padding: 15px 18px; }
.chart-nav-heading label { color: #d1d0cb; font-size: var(--ui-min); font-weight: 500; }
.chart-nav-heading span, .chart-track-dates, .chart-page-row>span, .chart-scope-note { color: #afaca2; }
.chart-scope-note { font-size: var(--ui-min); }
.chart-slider { background: transparent; border: 0; min-height: 44px; padding: 0; box-shadow: none; }
.chart-slider:hover, .chart-slider:focus { background: transparent; border: 0; box-shadow: none; }
.chart-slider::-webkit-slider-runnable-track { border-color: #66653d; background: linear-gradient(to right,#b59e61 var(--slider-progress),#393834 var(--slider-progress)); height: 6px; }
.chart-slider::-moz-range-track { background: #393834; border-color: #66653d; height: 6px; }
.chart-slider::-moz-range-progress { background: #b59e61; height: 6px; }
.chart-slider::-webkit-slider-thumb { background: #e2c88c; border: 3px solid #1d1c1a; box-shadow: 0 0 0 1px #d2b878,0 2px 6px #00000088; width: 22px; height: 22px; margin-top: -9px; }
.chart-slider::-moz-range-thumb { background: #e2c88c; border: 3px solid #1d1c1a; box-shadow: 0 0 0 1px #d2b878,0 2px 6px #00000088; width: 18px; height: 18px; }
.chart-slider:focus-visible { outline-color: var(--gold-light); }
.chart-step { color: var(--gold-light); }
.chart-track-dates { font-family: var(--number-font); }
.saved-messages, .replay-details { background: #191917; }
.saved-messages summary, .replay-details>summary { color: #ceccc7; font-weight: 500; font-size: var(--ui-min); }
.saved-messages summary::marker, .replay-details>summary::marker { color: var(--gold); }
.saved-messages pre { background: #111110; border: 1px solid #3d3b37; color: #ceccc7; font-size: var(--ui-min); }
.replay-details .replay-panel { background: transparent; }
.replay-panel { border-left-color: var(--gold-muted); }
.replay-waiting { border-left-color: var(--warning); }
.replay-dates span { color: var(--text-muted); }
.replay-dates b { color: var(--gold-light); font-family: var(--number-font); font-weight: 500; }
.replay-position strong { color: var(--gold-light); font-family: var(--number-font); font-weight: 500; }
.replay-progress { color: var(--warning); }
.replay-message { color: var(--text-secondary); }
/* Capital, operations, diagnostics and deletion share semantic surfaces. */
.capital-notice { background: #242321; color: #cfcdc7; border-color: #65653a; border-radius: 10px; }
.capital-notice.is-flat { background: #262523; border-color: #54524c; }
.capital-notice h3 { color: var(--gold-light); font-weight: 500; }
.capital-notice small { color: var(--text-muted); }
.capital-trade { background: linear-gradient(100deg,#2b2a27,#22211f); border: 1px solid #5f5d56; border-radius: 10px; color: #d5d3ce; }
.capital-trade h2 { color: var(--gold-light); font-weight: 500; }
.capital-warnings { background: var(--warning-bg); color: var(--warning); border: 1px solid #61502f; border-radius: 8px; }
.quote-result { border-radius: 9px; }
.quote-result pre { background: #131211; border: 1px solid #3e3c38; color: var(--text-secondary); }
.quote-ok { background: var(--positive-bg); border-color: #52504a; color: #d3d2cd; }
.quote-fail { background: var(--warning-bg); border-color: #61502f; color: var(--warning); }
.market-counts span { color: var(--text-muted); font-size: var(--ui-min); }
.market-counts b { font-family: var(--number-font); font-weight: 500; color: var(--gold-light); }
.provider-results>div { border-color: var(--border); color: var(--text-secondary); font-size: var(--ui-min); }
.provider-results small { color: var(--text-muted); }
.delete-banner { background: #2c211a; border: 1px solid #6a4836; border-radius: 9px; }
.delete-banner h3 { color: #f1c4b1; font-weight: 500; }
.delete-banner p { color: #dbb5a4; font-size: var(--ui-min); }
.delete-warning { background: #2a201a; border-left-color: #cb8d72; color: #dcc1ae; }
.delete-confirm-text, .delete-backup-path { background: #272623; color: var(--gold-light); border: 1px solid #4e4c47; border-radius: 7px; }
#delete-entity-form .form-actions { background: var(--surface); padding-bottom: 10px; }
/* Theme every in-app dialog, including send / retry confirmations. */
dialog { color-scheme: dark; color: var(--text); border: 1px solid #71603c; background: var(--surface); border-radius: 16px; box-shadow: 0 36px 140px #000000c4; max-height: 90dvh; max-width: calc(100vw - 36px); padding: 0; }
dialog::backdrop { background: #040404c4; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.modal-header { position: sticky; top: 0; z-index: 2; background: #21211f; border-bottom: 1px solid #544e32; padding: 21px 25px; }
.dialog-eyebrow { display: block; color: var(--gold-muted); font: var(--ui-min)/1.6 var(--number-font); letter-spacing: 2px; margin-bottom: 5px; }
.modal-header h2 { color: var(--gold-light); font-size: 22px; font-weight: 500; }
.modal-close { color: #ceccc6; background: #2b2a27; border: 1px solid #504f4a; width: 35px; height: 35px; font-size: 22px; border-radius: 50%; line-height: 1; padding: 0; }
.modal-close:hover { color: var(--gold-light); background: #363532; border-color: var(--gold-muted); }
.modal-body { padding: 23px 25px; }
.modal-body .note { color: #b6b3ab; line-height: 1.85; font-size: var(--ui-min); }
.confirm-dialog { width: 490px; }
#confirm-message { color: var(--text-secondary); font-size: var(--ui-min); line-height: 1.9; white-space: pre-line; }
/* Authentication — a complete landing composition, not a floating generic form. */
.auth-layout { min-height: 100vh; background: radial-gradient(ellipse at 15% 30%,#665e332c,transparent 55%),radial-gradient(ellipse at 90% 85%,#3d3c3820,transparent 60%),#0d0d0c; padding: 42px; }
.auth-stage { display: grid; grid-template-columns: 1.1fr 1fr; width: min(1060px,100%); border: 1px solid #6d633d; border-radius: 18px; overflow: hidden; background: #141413; box-shadow: 0 38px 100px #00000055; }
.auth-story { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; padding: 42px 44px 26px; background: radial-gradient(ellipse at 10% 80%,#57532940,transparent 65%),linear-gradient(125deg,#232220,#181816); border-right: 1px solid #6d633d; }
.auth-signature { display: flex; gap: 14px; align-items: center; }
.auth-signature .brand-wordmark { font-size: 31px; }
.auth-story-copy { padding: 82px 0 75px; position: relative; z-index: 1; }
.auth-story-copy .eyebrow { font-size: var(--ui-min); letter-spacing: 2.3px; color: #c6b477; }
.auth-story h2 { font-size: 39px; font-weight: 400; line-height: 1.55; letter-spacing: -1.5px; margin-top: 14px; color: #f0efdb; }
.auth-story h2 em { font-style: normal; color: var(--gold-light); }
.auth-story p { color: #bfbdb6; font-size: var(--ui-min); margin-top: 21px; line-height: 1.9; }
.auth-rule { width: 54px; height: 1px; background: var(--gold-muted); margin: 29px 0; }
.auth-attributes { display: flex; flex-direction: column; gap: 10px; font: var(--ui-min)/1.6 var(--number-font); color: #c8b778; }
.auth-attributes b { margin-left: 12px; color: #c6c4bd; font-family: var(--body-font); font-size: var(--ui-min); font-weight: 400; }
.auth-story-foot { display: flex; justify-content: space-between; gap: 14px; font: var(--ui-min)/1.6 var(--number-font); letter-spacing: 1.6px; color: #b6b991; }
.auth-orbit { pointer-events: none; position: absolute; width: 390px; height: 390px; border: 1px solid #c9af6333; border-radius: 50%; right: -250px; top: 180px; box-shadow: 0 0 0 65px #bdab6710,0 0 0 130px #bdab6708; z-index: 0; }
.auth-card { width: auto; padding: 61px 44px 32px; background: #141413; border: 0; border-radius: 0; box-shadow: none; align-self: center; }
.auth-brand { display: flex; align-items: center; justify-content: space-between; color: #c5b475; font: var(--ui-min)/1.6 var(--number-font); letter-spacing: 2px; font-weight: 500; margin-bottom: 25px; gap: 12px; }
.auth-brand .badge { font-size: var(--ui-min); }
.auth-card h1 { font-size: 24px; font-weight: 500; letter-spacing: -.9px; line-height: 1.55; }
.auth-card p { font-size: var(--ui-min); color: #b6b4ac; line-height: 1.9; margin: 13px 0 28px; }
.auth-card .field { margin-bottom: 19px; }
.auth-card .field input { min-height: 49px; }
.auth-card .button { min-height: 48px; margin-top: 5px; justify-content: space-between; padding: 12px 18px; }
.auth-card .button span { font-size: 19px; }
.auth-card .note { border-top: 1px solid #42413d; padding-top: 22px; margin: 29px 0 0; font-size: var(--ui-min); line-height: 1.9; }
.auth-edition { display: flex; justify-content: space-between; gap: 16px; margin-top: 31px; color: #bdba8f; font: var(--ui-min)/1.6 var(--display-font); letter-spacing: .6px; }
.auth-edition span { color: #aca9a0; font: var(--ui-min)/1.6 var(--body-font); letter-spacing: .1px; }
.toast { background: #2f2e2a; color: #e7e8d2; border: 1px solid #bca966; border-radius: 8px; box-shadow: 0 10px 40px #00000088; font-size: var(--ui-min); padding: 13px 20px; z-index: 100; }
.toast.error { background: #39221c; color: #ffd0be; border-color: #c78262; }
footer { border-top: 1px solid var(--border); color: #a9a59b; font-size: var(--ui-min); letter-spacing: .2px; margin-top: 26px; padding: 18px 0 8px; }
.mono, code, pre { font-family: "Cascadia Code","SFMono-Regular",Consolas,monospace; }
/* Tablet and compact desktop. */
@media (min-width: 820px) and (max-width: 1190px) {
 .shell { grid-template-columns: 209px minmax(0,1fr); }
 .sidebar { padding-left: 13px; padding-right: 13px; }
 .brand-wordmark { font-size: 24px; }
 main { padding: 23px; }
 .topbar { padding: 0 23px; }
 .top-actions { gap: 10px; }
 .breadcrumb { font-size: var(--ui-min); }
 .breadcrumb span { padding: 0 5px; }
 .user-pill { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .hero-date { font-size: 43px; }
 .order-hero { padding: 26px 24px; gap: 18px; }
 .hero-meta { min-width: 170px; padding-left: 18px; }
 .history-toolbar { flex-wrap: wrap; }
 .history-toolbar>select { max-width: 160px; }
 .kpi { padding: 18px 13px; }
 .kpi-value { font-size: 25px; }
 .account-context { flex-basis: 35%; }
 .account-toolbar { gap: 12px; flex-wrap: wrap; }
 .account-toolbar select { min-width: 180px; }
 .card-heading { flex-wrap: wrap; }
}
/* Phone: not a shrunk desktop. Make navigation and actions touchable. */
.mobile-ui .shell { max-width: 640px; border-left-color: var(--border); border-right-color: var(--border); }
.mobile-ui .workspace { background: var(--bg); }
.mobile-ui .mobile-brand { color: var(--gold-light); display: flex; align-items: center; gap: 9px; font: 23px/1 var(--display-font); letter-spacing: .4px; }
.mobile-monogram { border: 1px solid var(--gold-muted); color: var(--gold-light); display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 30px; border-radius: 5px 1px; font-size: 22px; }
.mobile-ui .topbar { background: #141413; padding: 15px 16px 13px; border-bottom-color: #44423e; min-height: 65px; }
.mobile-ui .top-actions { gap: 10px; }
.mobile-ui .top-actions select { font-size: var(--ui-min); min-height: 33px; padding: 5px 7px; border-color: #484742; }
.mobile-ui .top-actions .text-button { font-size: var(--ui-min); min-height: 33px; }
.mobile-ui .mobile-nav { background: #151514; border-bottom: 1px solid #454440; padding: 2px 10px 0; gap: 2px; scrollbar-width: none; }
.mobile-ui .mobile-nav::-webkit-scrollbar { display: none; }
.mobile-ui .mobile-nav button { color: #bab7af; min-height: 47px; padding: 13px 11px 12px; font-size: var(--ui-min); border-left: 0; border-top: 0; border-right: 0; background: transparent; }
.mobile-ui .mobile-nav .nav-index { display: none; }
.mobile-ui .mobile-nav button.active { background: #292826; color: var(--gold-light); border-bottom: 2px solid #d6b978; box-shadow: none; }
.mobile-ui main { padding: 16px 14px 20px; }
.mobile-ui .demo-banner { background: #21201e; color: #b7b4ac; border-color: #484742; border-radius: 5px; font-size: var(--ui-min); padding: 9px 10px; }
.mobile-ui .demo-banner .badge { font-size: var(--ui-min); }
.mobile-ui .page-title { margin: 24px 0 18px; }
.mobile-ui .eyebrow { font-size: var(--ui-min); letter-spacing: 1.6px; margin-bottom: 8px; }
.mobile-ui h1 { font-size: 27px; font-weight: 500; }
.mobile-ui .page-title p { font-size: var(--ui-min); line-height: 1.7; }
.mobile-ui .page-title .button { min-height: 39px; padding: 8px 12px; font-size: var(--ui-min); }
.mobile-ui .account-toolbar { padding: 11px 12px; gap: 9px; border-radius: 9px; border-color: #42413d; background: #181816; }
.mobile-ui .account-toolbar select { background: #292825; border: 1px solid #52504b; border-radius: 5px; font-size: var(--ui-min); min-height: 36px; padding: 7px 10px; }
.mobile-ui .account-toolbar .button { min-height: 37px; padding: 7px 10px; }
.mobile-ui .account-context { color: #b1aea5; font-size: var(--ui-min); }
.mobile-ui .order-hero { padding: 23px 22px; border-radius: 12px; min-height: 0; }
.mobile-ui .order-hero h2 { font-size: var(--ui-min); margin: 13px 0 9px; }
.mobile-ui .hero-tag { font-size: var(--ui-min); }
.mobile-ui .hero-date { font-size: 39px; line-height: 1.1; letter-spacing: -.5px; }
.mobile-ui .hero-date span { font-size: var(--ui-min); margin-left: 10px; }
.mobile-ui .order-hero p { color: #c3c1ba; font-size: var(--ui-min); line-height: 1.85; }
.mobile-ui .hero-meta { border-top-color: #92855855; margin-top: 17px; padding-top: 14px; gap: 10px 15px; }
.mobile-ui .hero-meta strong { color: var(--gold-light); font-size: var(--ui-min); }
.mobile-ui .hero-meta span { color: #b5b2a9; font-size: var(--ui-min); }
.mobile-ui .history-toolbar { background: #1a1a18; border-color: #4e4d48; border-radius: 9px; padding: 13px; gap: 10px; }
.mobile-ui .history-title b { color: #d2d0cb; font-size: var(--ui-min); }
.mobile-ui .history-controls .button { min-height: 38px; }
.mobile-ui .history-controls input { background: #131312; color: var(--text); border-color: #5a5852; font-size: var(--ui-min); min-height: 38px; max-width: none; }
.mobile-ui .history-toolbar>select { background: #131312; border-color: #5a5852; color: #d2d0cb; min-height: 39px; }
.mobile-ui .kpi-grid { gap: 10px; margin: 15px 0; }
.mobile-ui .kpi { padding: 17px 13px; min-height: 113px; border-color: #4b4944; }
.mobile-ui .kpi::before { left: 13px; right: 13px; }
.mobile-ui .kpi-title { color: #c2c0b9; font-size: var(--ui-min); margin-bottom: 10px; }
.mobile-ui .kpi-value { font-size: 25px; font-weight: 500; letter-spacing: -.7px; }
.mobile-ui .kpi-value span { font-size: var(--ui-min); }
.mobile-ui .kpi-note { font-size: var(--ui-min); margin-top: 8px; color: #aeaba1; }
.mobile-ui .card { border-radius: 10px; margin-bottom: 16px; border-color: #484641; }
.mobile-ui .card-heading { padding: 17px 16px; }
.mobile-ui .card-heading h2 { font-size: var(--ui-min); }
.mobile-ui .card-heading p { font-size: var(--ui-min); }
.mobile-ui .card-heading .button { min-height: 36px; font-size: var(--ui-min); padding: 7px 11px; }
.mobile-ui .card-body { padding: 18px 16px; }
.mobile-ui .quote-strip { background: #151514; padding: 12px 16px; gap: 8px 14px; border-color: #43413d; }
.mobile-ui .quote-strip div { font-size: var(--ui-min); color: #b5b2aa; }
.mobile-ui .quote-strip b { font-size: var(--ui-min); color: var(--gold-light); }
.mobile-ui .v4-mobile-orders { padding: 0 18px; }
.mobile-ui .v4-order-tile { padding: 16px 0; border-color: #44423e; }
.mobile-ui .v4-order-tile b { color: var(--gold-light); font-family: var(--number-font); font-weight: 500; font-size: 24px; letter-spacing: -.3px; }
.mobile-ui .v4-order-tile small { color: #bdbab3; font-size: var(--ui-min); }
.mobile-ui .v4-order-tile .channel small { font-size: var(--ui-min); color: #bdbab3; }
.phone-order { border-color: var(--border); }
.phone-order .phone-price { color: var(--gold-light); font-family: var(--number-font); font-weight: 500; }
.phone-order .phone-parent, .phone-order .amount-small, .phone-order .phone-qty { color: var(--text-muted); }
.mobile-ui .table-foot { color: #b9b6ae; font-size: var(--ui-min); padding: 13px 16px; }
.mobile-ui .order-disclaimer { color: #afaca3; font-size: var(--ui-min); margin: 13px 18px; }
.mobile-ui .graph-card .card-heading { padding: 17px 16px; }
.mobile-ui .chart-range { margin-top: 14px; display: flex; width: fit-content; max-width: 100%; }
.mobile-ui .chart-range button { min-height: 34px; padding: 6px 13px; font-size: var(--ui-min); }
.mobile-ui .chart-legend { padding: 15px 16px 0; font-size: var(--ui-min); gap: 10px 16px; color: #c3c1bb; }
.mobile-ui .cash-scale { gap: 8px; }
.mobile-ui .cash-scale small { font-size: var(--ui-min); }
.mobile-ui .chart-window-header { margin: 14px 13px 4px; padding: 12px; gap: 10px; border-radius: 7px; }
.mobile-ui .chart-window-header strong { font-size: 16px; }
.mobile-ui .chart-window-header small { font-size: var(--ui-min); }
.mobile-ui .chart-window-header>.button { width: 100%; min-height: 35px; }
.mobile-ui .chart-readout { margin: 0 13px 14px; padding: 12px; gap: 7px 12px; font-size: var(--ui-min); }
.mobile-ui .chart-readout strong { font-size: var(--ui-min); }
.mobile-ui .chart-readout small { font-size: var(--ui-min); }
.mobile-ui .chart-navigator { margin: 0 13px 14px; padding: 13px; }
.mobile-ui .chart-slide-row { gap: 10px; }
.mobile-ui .chart-page-row .button { font-size: var(--ui-min); min-height: 36px; padding: 7px 9px; }
.mobile-ui .chart-scope-note { font-size: var(--ui-min); }
.mobile-ui .chart-footnotes { padding: 0 16px 17px; font-size: var(--ui-min); }
.mobile-ui .account-card { padding: 19px; }
.mobile-ui .account-card h2 { font-size: 23px; }
.mobile-ui .two-col, .mobile-ui .profile-grid { gap: 0; }
.mobile-ui .form-grid { gap: 17px; }
.mobile-ui dialog { max-width: calc(100vw - 20px); max-height: 92dvh; border-radius: 12px; width: calc(100vw - 20px); }
.mobile-ui .modal-header { padding: 17px 18px; }
.mobile-ui .modal-header h2 { font-size: 22px; }
.mobile-ui .modal-body { padding: 19px 18px; }
.mobile-ui .modal-body .note { font-size: var(--ui-min); }
.mobile-ui .dialog-eyebrow { font-size: var(--ui-min); }
.mobile-ui input:not([type="checkbox"]):not([type="range"]), .mobile-ui select, .mobile-ui textarea { font-size: 16px; }
.mobile-ui .topbar select { font-size: var(--ui-min); }
.mobile-ui .account-toolbar select, .mobile-ui .history-controls input, .mobile-ui .history-toolbar select { font-size: var(--ui-min); }
.mobile-ui .check-field { font-size: var(--ui-min); line-height: 1.8; }
.mobile-ui .form-actions .button { min-height: 43px; white-space: normal; }
.mobile-ui .result-item b { font-size: 19px; }
.mobile-ui .result-item { background: #21211f; font-size: var(--ui-min); border-color: #54524c; }
.mobile-ui .notice-line { background: #242321; border-color: #585651; font-size: var(--ui-min); }
.mobile-ui .capital-notice { background: #272624; border-color: #5d5b55; }
.mobile-ui .capital-notice.is-flat { background: #272623; border-color: #626059; }
.mobile-ui .replay-heading h2 { font-size: 17px; }
.mobile-ui .market-counts b { font-size: var(--ui-min); }
.mobile-ui footer { color: #b2afa7; font-size: var(--ui-min); padding: 16px 5px 7px; }
/* Physical mobile auth should also work before any account exists. */
@media (max-width: 819px) {
 .auth-layout { padding: 20px 16px; align-items: start; }
 .auth-stage { display: block; max-width: 500px; margin: 0 auto; border-radius: 13px; }
 .auth-story { border-right: 0; border-bottom: 1px solid #695f39; padding: 25px; }
 .auth-signature .brand-mark { width: 34px; height: 38px; flex-basis: 34px; font-size: 25px; }
 .auth-signature .brand-mark::after { top: 18px; width: 12px; }
 .auth-signature .brand-wordmark { font-size: 26px; }
 .auth-story-copy { padding: 27px 0 0; }
 .auth-story-copy .eyebrow { display: none; }
 .auth-story h2 { font-size: 26px; line-height: 1.5; margin: 0; letter-spacing: -.8px; }
 .auth-story h2 br { display: none; }
 .auth-story h2 em { display: block; }
 .auth-story p { margin-top: 13px; font-size: var(--ui-min); }
 .auth-rule, .auth-attributes, .auth-story-foot { display: none; }
 .auth-orbit { top: 12px; width: 240px; height: 240px; right: -170px; }
 .auth-card, .mobile-ui .auth-card { padding: 28px 25px 24px; }
 .auth-brand { margin-bottom: 19px; font-size: var(--ui-min); }
 .auth-card h1 { font-size: 22px; }
 .auth-card p { font-size: var(--ui-min); margin-bottom: 23px; }
 .auth-card .field { margin-bottom: 17px; }
 .auth-card .field input { font-size: 16px; min-height: 47px; }
 .auth-card .note { font-size: var(--ui-min); padding-top: 20px; margin-top: 25px; }
 .auth-edition { margin-top: 23px; }
}
@media (max-width: 370px) {
 .mobile-ui .hero-date { font-size: 34px; }
 .mobile-ui .hero-date span { font-size: var(--ui-min); margin-left: 7px; }
 .mobile-ui .kpi-value { font-size: 22px; }
 .mobile-ui .topbar { gap: 6px; padding-left: 12px; padding-right: 12px; }
 .mobile-ui .top-actions { gap: 7px; }
 .mobile-ui .mobile-brand { font-size: 21px; }
 .mobile-ui .chart-range button { padding: 6px 10px; }
 .mobile-ui .chart-page-row>span { font-size: var(--ui-min); }
}
@media (prefers-reduced-motion: reduce) {
 *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Printed pages use paper, while every on-screen route stays Black & Gold. */
@media print {
 :root { color-scheme: light; }
 body, .shell, .workspace, .card, .card-heading, .kpi, .order-hero, .quote-strip, .history-toolbar { background: white !important; color: #111 !important; box-shadow: none !important; }
 .sidebar,.topbar,.mobile-nav,.page-title>.button,.history-controls,.chart-navigator,.demo-banner,.order-hero::before,.order-hero::after { display: none !important; }
 .shell { display: block !important; }
 .card *, .order-hero *, .kpi * { color: #222 !important; }
 main { padding: 0; }
 .chart-axis { fill: #333; }
 .chart-plot { fill: #fff; }
 .chart-avg { stroke: #333; }
 .chart-close { stroke: #81631e; }
 .chart-close-area { fill: none; }
 .chart-grid { stroke: #ddd; }
}

/* Long names and validation messages must not expand the viewport. */
.account-card h2, .account-context, .hero-meta strong { overflow-wrap: anywhere; }
.form-grid .check-field { min-width: 0; }
.field input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
/* Keep header visible and make only the dialog body scroll. */
dialog[open] { display: flex; flex-direction: column; }
#modal-content { display: flex; flex-direction: column; max-height: inherit; min-height: 0; width: 100%; }
.modal-header { flex: 0 0 auto; }
.modal-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }

#modal { width: min(760px, calc(100vw - 36px)); }
.mobile-ui #modal { width: calc(100vw - 20px); }