:root{
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:#f3f4f5;
background:#0a0b0c;
color-scheme:dark;
--bg:#0a0b0c;
--surface:#141516;
--surface-2:#1b1d1f;
--line:#2d3033;
--muted:#a5abb2;
--faint:#7c848d;
--accent:#18b898;
--green:#34c879;
--red:#ff5d6c;
--amber:#f4c95d;

/* Spacing scale: every margin/padding/gap in this file draws from here. */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-7:32px;
--space-8:40px;

/* Radius scale: outer surfaces vs. nested surfaces vs. small controls. */
--radius-lg:14px;
--radius-md:10px;
--radius-sm:8px;

/* Type scale, used for every font-size in the dashboard. */
--fs-2xs:10px;
--fs-xs:11px;
--fs-sm:12px;
--fs-md:13px;
--fs-lg:15px;
--fs-xl:16px;
--fs-display-sm:28px;
--fs-display:34px;
--fs-metric:24px;
--fs-metric-sm:20px;

/* Weight scale: standard steps only (no fractional weights). */
--fw-regular:400;
--fw-medium:600;
--fw-bold:700;
--fw-black:800
}
*{
box-sizing:border-box
}
body{
margin:0;
min-width:320px;
background:radial-gradient(circle at 80% -10%,#202322 0,#0f1011 34%,#0a0b0c 70%),var(--bg)
}
button{
font:inherit
}
.token-form{display:flex;gap:12px;margin-bottom:16px}.token-form input,.login-modal input{flex:1;background:var(--surface-2);color:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;outline:none}.token-form input:focus,.login-modal input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #18b89822}.token-form button,.login-modal button,.revoke-token{background:var(--accent);border:0;border-radius:var(--radius-sm);padding:10px 14px;font-weight:700;cursor:pointer;color:#06251f}.revoke-token{background:transparent;color:var(--red);border:1px solid var(--red);padding:6px 10px}.token-secret{display:block;width:100%;word-break:break-all;text-align:left;background:#f4c95d12;border:1px solid #f4c95d55;border-radius:var(--radius-sm);color:var(--amber);padding:12px 14px;line-height:1.5;cursor:pointer;margin:0 0 16px}.token-secret[hidden]{display:none}.token-secret:hover{background:#f4c95d1d}.login-layer{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:var(--space-5);background:#07080982;backdrop-filter:blur(12px)}.login-layer[hidden]{display:none}.login-modal{width:min(100%,390px);display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3);padding:var(--space-7);background:linear-gradient(145deg,#1b1d1f,#121314);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 24px 80px #00000080}.login-modal .brand-mark{margin-bottom:var(--space-2)}.login-modal h1{font-size:var(--fs-display-sm);margin:0;letter-spacing:-.03em}.login-modal p{margin:0;color:var(--muted);line-height:1.55}.login-modal label{font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-top:var(--space-2)}.login-modal button{margin-top:var(--space-2)}.login-error{color:var(--red)!important;font-size:var(--fs-sm)}.is-locked .app-shell{filter:blur(10px);pointer-events:none;user-select:none}.copy-toast{position:fixed;z-index:30;left:50%;bottom:var(--space-6);padding:10px 14px;border:1px solid #34c87966;border-radius:var(--radius-sm);background:#15231d;color:#d8ffe6;font-size:var(--fs-sm);font-weight:var(--fw-bold);box-shadow:0 12px 32px #0008;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.copy-toast.is-visible{opacity:1;transform:translate(-50%,0)}
main{
max-width:1420px;
margin:auto;
padding:var(--space-6) var(--space-7) var(--space-8)
}

/* ---------- Topbar ---------- */
.topbar{
height:48px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--line);
padding-bottom:var(--space-4)
}
.brand-lockup{
display:flex;
align-items:center;
gap:var(--space-2)
}
.brand-mark{
width:28px;
height:28px;
border-radius:var(--radius-sm);
object-fit:cover;
box-shadow:0 0 22px #18b8984d
}
.brand-name{
font-size:var(--fs-xl);
letter-spacing:-.02em;
font-weight:var(--fw-black)
}
.brand-subtitle{
font-size:var(--fs-2xs);
color:var(--faint);
letter-spacing:.1em;
text-transform:uppercase;
margin-top:var(--space-1)
}
.topbar-meta{
display:flex;
align-items:center;
gap:var(--space-2)
}
.topbar-meta,#refresh{
color:var(--muted);
font-size:var(--fs-xs)
}
.live-dot,.status-dot{
display:inline-block;
width:7px;
height:7px;
border-radius:50%;
background:var(--green);
box-shadow:0 0 0 4px #34c87920
}
.status-dot.status-good{
background:var(--green);
box-shadow:0 0 0 4px #34c87920
}
.status-dot.status-bad{
background:var(--red);
box-shadow:0 0 0 4px #ff5d6c20
}

/* ---------- Shared tab intro (kicker + heading + description), used by all three tabs ---------- */
.tab-intro{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:var(--space-6);
padding:var(--space-7) 0 var(--space-6)
}
.section-kicker{
margin:0 0 var(--space-2);
color:var(--faint);
font-size:var(--fs-2xs);
letter-spacing:.16em;
font-weight:var(--fw-black)
}
.tab-intro h1,.tab-intro h2{
margin:0;
letter-spacing:-.04em;
font-size:var(--fs-display);
line-height:1.1
}
.page-description{
color:var(--muted);
font-size:var(--fs-md);
margin:var(--space-2) 0 0;
max-width:620px;
line-height:1.6
}
.tab-intro-note{
color:var(--faint);
font-size:var(--fs-xs);
white-space:nowrap
}

/* ---------- Tabs ---------- */
.tabs{
display:flex;
gap:var(--space-1);
border-bottom:1px solid var(--line);
margin-bottom:var(--space-6)
}
.tab{
cursor:pointer;
background:none;
color:var(--muted);
border:0;
border-bottom:2px solid transparent;
padding:var(--space-3) var(--space-3) var(--space-3);
font-size:var(--fs-sm);
font-weight:var(--fw-bold)
}
.tab:hover,.tab.is-active{
color:#fff
}
.tab.is-active{
border-color:var(--accent)
}
.tab-panel{
display:none
}
.tab-panel.is-active{
display:block
}

/* ---------- Metric cards ---------- */
.metric-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:var(--space-3);
margin-bottom:var(--space-4)
}
.metric{
background:linear-gradient(145deg,#191b1d,#121314);
border:1px solid var(--line);
border-radius:var(--radius-lg);
padding:var(--space-4);
min-height:105px
}
.metric-label{
color:var(--muted);
font-size:var(--fs-xs)
}
.metric-value{
display:block;
font-size:var(--fs-metric);
letter-spacing:-.04em;
margin-top:var(--space-3);
color:#f4f7fb;
font-weight:var(--fw-bold)
}
.metric-value.positive{
color:var(--green)
}
.metric-value.negative{
color:var(--red)
}
.metric-value.neutral{
color:#f4f7fb
}
.metric-hint{
display:block;
color:var(--faint);
font-size:var(--fs-xs);
margin-top:var(--space-1)
}

/* ---------- Layout grids ---------- */
.content-grid{
display:grid;
gap:var(--space-4);
margin-bottom:var(--space-4)
}
.content-grid-wide{
grid-template-columns:1.55fr 1fr
}

/* ---------- Panels (outer surfaces) ---------- */
.panel{
background:rgba(20,21,22,.92);
border:1px solid var(--line);
border-radius:var(--radius-lg);
padding:var(--space-5);
margin-bottom:var(--space-4);
min-width:0
}
.panel:last-child{
margin-bottom:0
}
/* Panels inside a grid are already spaced by the grid's own gap. */
.content-grid .panel,
.chart-grid .panel{
margin-bottom:0
}
.panel-heading{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:var(--space-4);
margin-bottom:var(--space-4)
}
.panel h2{
font-size:var(--fs-lg);
margin:0;
letter-spacing:-.02em
}
.panel-count{
color:var(--faint);
font-size:var(--fs-xs);
white-space:nowrap
}

/* ---------- Nested cards (share one radius + background) ---------- */
.bot-card,.market-card,.decision-chip{
border-radius:var(--radius-md);
background:var(--surface-2)
}
.bot-list{
display:grid;
gap:var(--space-2)
}
.action{
font-size:var(--fs-2xs);
font-weight:var(--fw-black);
letter-spacing:.08em
}
.action.Buy{
color:#07110c;
background:var(--green)
}
.action.Sell{
color:#1a0709;
background:var(--red)
}
.action.Close,.action.Hold{
color:#171204;
background:var(--amber)
}
.decision-list{
display:flex;
flex-direction:column;
gap:var(--space-3)
}
.decision-chip{
display:grid;
grid-template-columns:auto 1fr auto;
gap:var(--space-4);
align-items:center;
padding:var(--space-4);
border:1px solid var(--line)
}
.decision-age{
color:var(--faint);
font-size:var(--fs-xs);
white-space:nowrap;
align-self:start
}
.decision-action{
display:grid;
place-items:center;
padding:var(--space-4) var(--space-5);
border-radius:var(--radius-md);
background:#242628;
border:1px solid transparent;
font-size:var(--fs-md)
}
.decision-fields{
display:grid;
grid-template-columns:minmax(100px,.6fr) minmax(100px,.6fr) minmax(180px,2fr);
gap:var(--space-4)
}
.decision-fields>div{
display:flex;
flex-direction:column;
gap:var(--space-2);
min-width:0
}
.decision-label{
color:var(--faint);
font-size:var(--fs-2xs);
letter-spacing:.08em;
text-transform:uppercase
}
.decision-fields strong{
font-size:var(--fs-md);
font-weight:var(--fw-medium)
}
.decision-reason strong{
color:var(--muted);
font-size:var(--fs-sm);
font-weight:var(--fw-regular);
line-height:1.45
}
.bot-card{
display:grid;
grid-template-columns:1fr auto;
gap:var(--space-1) var(--space-3);
padding:var(--space-4)
}
.bot-name{
font-size:var(--fs-sm);
font-weight:var(--fw-bold)
}
.bot-state{
font-size:var(--fs-2xs);
color:var(--muted);
display:flex;
align-items:center;
gap:var(--space-2)
}
.bot-meta{
grid-column:1/-1;
color:var(--muted);
font-size:var(--fs-xs)
}
.bot-heartbeat{
grid-column:1/-1;
color:var(--faint);
font-size:var(--fs-2xs);
margin-top:var(--space-1)
}
.bot-name{
display:flex;
align-items:center;
gap:var(--space-2)
}
.bot-flag{
font-size:var(--fs-2xs);
font-weight:var(--fw-regular);
padding:2px 8px;
border-radius:999px;
border:1px solid transparent
}
.flag-good{color:var(--muted);border-color:rgba(255,255,255,.12)}
.flag-warn{color:#f0b429;border-color:rgba(240,180,41,.35);background:rgba(240,180,41,.08)}
.flag-danger{color:#f0616d;border-color:rgba(240,97,109,.4);background:rgba(240,97,109,.1)}
.bot-controls{
grid-column:1/-1;
display:flex;
gap:var(--space-2);
margin-top:var(--space-2)
}
.bot-control{
flex:1;
padding:6px 10px;
font-size:var(--fs-2xs);
border-radius:8px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.04);
color:var(--text);
cursor:pointer
}
.bot-control:hover{background:rgba(255,255,255,.09)}
.bot-control.is-danger{color:#f0616d;border-color:rgba(240,97,109,.35)}
.bot-control.is-danger:hover{background:rgba(240,97,109,.12)}
.market-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:var(--space-3)
}
.market-card{
padding:var(--space-4)
}
.market-title{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:var(--space-4)
}
.market-symbol{
font-size:var(--fs-md);
font-weight:var(--fw-bold)
}
.market-time{
font-size:var(--fs-2xs);
color:var(--faint)
}
.market-prices{
display:flex;
gap:var(--space-5)
}
.market-price label{
display:block;
font-size:var(--fs-2xs);
color:var(--faint);
margin-bottom:var(--space-1)
}
.market-price strong{
font-size:var(--fs-lg)
}
.market-details{
display:flex;
gap:var(--space-2);
flex-wrap:wrap;
color:var(--muted);
font-size:var(--fs-2xs);
margin-top:var(--space-4)
}
.market-details span{
padding-right:var(--space-2);
border-right:1px solid var(--line)
}
.market-details span:last-child{
border:0
}

/* ---------- Analytics ---------- */
.chart-grid{
display:grid;
grid-template-columns:1.45fr 1fr;
gap:var(--space-4);
margin-bottom:var(--space-4)
}
.chart-panel{
min-height:315px
}
.chart{
height:225px;
display:flex;
align-items:center;
justify-content:center
}
.chart svg{
width:100%;
height:100%;
overflow:hidden
}
/* Trading chart component (chart.js) — decoupled analysis widget, not just a static SVG. */
.chart.tc-root{
position:relative;
display:block
}
.tc-toolbar{
position:absolute;
top:var(--space-2);
left:var(--space-2);
z-index:5;
display:flex;
flex-direction:column;
gap:4px;
padding:6px;
background:rgba(16,18,22,0.55);
border:1px solid rgba(255,255,255,0.08);
border-radius:var(--radius-sm);
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px)
}
.tc-btn{
background:rgba(255,255,255,0.04);
color:#f3f4f5;
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:var(--space-1) var(--space-2);
font-size:var(--fs-2xs);
font-weight:var(--fw-medium);
cursor:pointer;
text-align:left;
white-space:nowrap
}
.tc-btn:hover{border-color:var(--accent);color:var(--accent)}
.tc-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#0a0b0c}
.tc-viewport{position:absolute;inset:0}
.tc-viewport svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.tc-viewport svg:active{cursor:grabbing}
.tc-plot-bg{fill:transparent}
.tc-grid{stroke:var(--line);stroke-width:1}
.tc-price-axis,.tc-time-axis{fill:var(--faint);font-size:var(--fs-2xs)}
.tc-panel-label{fill:var(--faint);font-size:var(--fs-2xs);opacity:0.8}
.tc-rsi-bg{fill:rgba(0,0,0,0.18)}
.tc-rsi-border{stroke:#4a4f56;stroke-width:1}
.tc-rsi-grid{stroke:rgba(255,255,255,0.06);stroke-width:1}
.tc-rsi-line{stroke:#c9a5ff;stroke-width:1.4}
.tc-rsi-band{stroke:rgba(255,255,255,0.12);stroke-width:1;stroke-dasharray:2 3}
.tc-bg{cursor:grab}
.tc-axis-strip{cursor:ns-resize}
.tc-fvg{pointer-events:none}
.chart-crosshair{pointer-events:none}
.chart-crosshair-line{stroke:#5b6572;stroke-width:1;stroke-dasharray:3 3}
.chart-crosshair-label{fill:#1b1e21;stroke:#3a4048;stroke-width:1}
.chart-crosshair-text{fill:#f3f4f5;font-size:11px;font-family:inherit;dominant-baseline:middle}
.tc-draggable .tc-price-hit,.tc-draggable .tc-time-hit{cursor:ns-resize}
.tc-time-hit{cursor:ew-resize}
.tc-price-flag,.tc-time-flag{cursor:grab}
.tc-price-hit{stroke:transparent;stroke-width:14;fill:none}
.chart.tc-fullscreen{
position:fixed;
inset:0;
z-index:1000;
width:100vw;
height:100vh;
background:var(--surface)
}
.chart.tc-fullscreen .tc-plot-bg{fill:rgba(0,0,0,0.32)}
.chart.tc-fullscreen .tc-toolbar{background:rgba(10,11,13,0.7)}
/* Volume/RSI are fullscreen-only indicators — keep their toggles out of the compact inline view. */
.tc-toolbar [data-tc-action="toggle-volume"],
.tc-toolbar [data-tc-action="toggle-rsi"]{display:none}
.chart.tc-fullscreen .tc-toolbar [data-tc-action="toggle-volume"],
.chart.tc-fullscreen .tc-toolbar [data-tc-action="toggle-rsi"]{display:block}
.chart-grid-line{
stroke:var(--line);
stroke-width:1
}
.chart-axis{
fill:var(--faint);
font-size:var(--fs-2xs)
}
.chart-line{
fill:none;
stroke:var(--accent);
stroke-width:2.5;
stroke-linecap:round;
stroke-linejoin:round
}
.chart-area{
fill:url(#area-fill);
opacity:.32
}
.chart-point{
fill:var(--surface);
stroke:var(--accent);
stroke-width:2
}
.chart-value{
color:var(--accent);
font-size:var(--fs-md);
font-weight:var(--fw-bold)
}
.chart-heading-controls{
display:flex;
align-items:center;
gap:var(--space-3);
flex-shrink:0
}
.chart-select{
background:var(--surface-2);
color:#f3f4f5;
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:var(--space-2) var(--space-3);
font-size:var(--fs-sm);
font-weight:var(--fw-medium)
}

/* ---------- Training candidate filters ---------- */
.filter-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
gap:var(--space-3);
align-items:end;
margin-bottom:var(--space-4)
}
.filter-grid label{
display:flex;
flex-direction:column;
gap:var(--space-1);
font-size:var(--fs-2xs);
color:var(--faint);
text-transform:uppercase;
letter-spacing:.04em
}
.filter-grid input,.filter-grid select{
background:var(--surface-2);
color:#f3f4f5;
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:var(--space-2);
font-size:var(--fs-sm)
}
.filter-submit{
background:var(--accent);
color:#0a0b0c;
border:none;
border-radius:var(--radius-sm);
padding:var(--space-2) var(--space-4);
font-weight:var(--fw-bold);
cursor:pointer;
height:fit-content
}
.row-action{
background:var(--surface-2);
color:#f3f4f5;
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:var(--space-1) var(--space-3);
font-size:var(--fs-2xs);
cursor:pointer
}
.row-action:hover{
border-color:var(--accent)
}
.row-action:disabled{
opacity:.5;
cursor:default
}

/* ---------- Training workbench ---------- */
.training-start{
display:grid;
grid-template-columns:minmax(180px,1fr) auto;
gap:var(--space-4);
align-items:center;
margin-bottom:var(--space-4)
}
.training-start h2{margin:0}
.training-start-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.training-mode{
background:var(--surface-2);
color:#f3f4f5;
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:var(--space-2) var(--space-3);
font-weight:var(--fw-bold);
cursor:pointer
}
.training-mode.is-active{background:var(--accent);border-color:var(--accent);color:#0a0b0c}
.manual-chart-picker{grid-column:1/-1;display:flex;align-items:end;gap:var(--space-3)}
.manual-chart-picker label{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--fs-2xs);color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.manual-chart-picker select{min-width:160px;background:var(--surface-2);color:#f3f4f5;border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-2);font-size:var(--fs-sm)}
.manual-chart-picker button{height:fit-content}
.training-layout{
display:grid;
grid-template-columns:.85fr 1.4fr;
gap:var(--space-4);
margin-bottom:var(--space-4);
align-items:start
}
.training-list-panel .table-wrap{
max-height:520px;
overflow-y:auto
}
.training-candidate-row{
cursor:pointer
}
.training-candidate-row:hover td{
background:#1b1e21
}
.training-candidate-row.is-selected td{
background:#20242a
}
.chart-tall{
height:440px;
position:relative;
overflow:hidden;
border:1px solid #292c2f;
border-radius:var(--radius-sm);
background:#101214
}
.chart-tall svg{display:block;touch-action:none}
.chart-tall svg{cursor:grab}
.chart-tall svg:active{cursor:grabbing}
.training-price-line-hit{stroke:transparent;stroke-width:12;cursor:ns-resize}
.training-chart-menu{
position:fixed;
z-index:10;
display:grid;
gap:var(--space-1);
min-width:150px;
padding:var(--space-2);
background:#202326;
border:1px solid #3a4148;
border-radius:var(--radius-sm);
box-shadow:0 12px 30px #0009
}
.training-chart-menu[hidden]{display:none}
.training-chart-menu span{
padding:var(--space-1) var(--space-2);
color:var(--faint);
font-size:var(--fs-2xs)
}
.training-chart-menu button{
padding:var(--space-2) var(--space-3);
border:0;
border-radius:6px;
background:transparent;
color:#f3f4f5;
font:inherit;
font-size:var(--fs-sm);
text-align:left;
cursor:pointer
}
.training-chart-menu button:hover{background:#2b3537;color:var(--accent)}
.example-editor{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:var(--space-3);
margin-top:var(--space-4)
}
.example-editor label{
display:flex;
flex-direction:column;
gap:var(--space-1);
font-size:var(--fs-2xs);
color:var(--faint);
text-transform:uppercase;
letter-spacing:.04em
}
.example-editor input,.example-editor select,.example-editor textarea{
background:var(--surface-2);
color:#f3f4f5;
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:var(--space-2);
font-size:var(--fs-sm);
font-family:inherit
}
.example-editor .notes-field{
grid-column:1 / -1
}
.example-editor-actions{
grid-column:1 / -1;
display:flex;
gap:var(--space-3)
}
.example-editor-actions button[type="submit"]{
background:var(--accent);
color:#0a0b0c;
border:none;
border-radius:var(--radius-sm);
padding:var(--space-2) var(--space-4);
font-weight:var(--fw-bold);
cursor:pointer
}
.example-editor-actions button[type="submit"]:disabled{
opacity:.5;
cursor:default
}
.example-editor-actions button[type="button"]{
background:transparent;
color:var(--muted);
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:var(--space-2) var(--space-4);
cursor:pointer
}
@media (max-width:960px){
.training-start{grid-template-columns:1fr}
.training-layout{
grid-template-columns:1fr
}
.manual-chart-picker{align-items:stretch;flex-wrap:wrap}
}

/* ---------- Tables ---------- */
.table-wrap{
overflow:auto
}
table{
width:100%;
border-collapse:collapse;
font-size:var(--fs-sm)
}
th,td{
text-align:left;
padding:var(--space-3) var(--space-2);
border-bottom:1px solid #292c2f;
white-space:nowrap
}
th{
color:var(--faint);
font-weight:var(--fw-medium);
font-size:var(--fs-2xs);
letter-spacing:.04em;
text-transform:uppercase
}
td{
color:#cbd4e2
}
.positive{
color:var(--green)!important
}
.negative{
color:var(--red)!important
}
.neutral{
color:var(--muted)!important
}
.tag{
display:inline-block;
padding:var(--space-1) var(--space-2);
border-radius:var(--radius-sm);
background:#242629;
color:var(--muted);
font-size:var(--fs-2xs)
}
.empty-state{
color:var(--faint);
font-size:var(--fs-sm);
padding:var(--space-6) var(--space-1)
}

/* ---------- News ---------- */
.news-list{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:var(--space-4)
}
.news-card{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius-lg);
padding:var(--space-5);
min-height:190px;
display:flex;
flex-direction:column
}
.news-card time{
color:var(--accent);
font-size:var(--fs-2xs);
letter-spacing:.1em;
text-transform:uppercase
}
.news-card h3{
font-size:var(--fs-xl);
line-height:1.3;
margin:var(--space-4) 0 var(--space-3);
letter-spacing:-.02em
}
.news-card p{
color:var(--muted);
font-size:var(--fs-sm);
line-height:1.65;
margin:0
}
.news-card footer{
margin-top:auto;
padding-top:var(--space-5);
color:var(--faint);
font-size:var(--fs-2xs)
}
footer{
display:flex;
gap:var(--space-5);
color:var(--faint);
font-size:var(--fs-2xs);
letter-spacing:.04em;
padding-top:var(--space-7)
}
.no-live{
color:var(--amber)
}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
main{
padding:var(--space-6) var(--space-5)
}
.metric-grid{
grid-template-columns:repeat(3,1fr)
}
.content-grid-wide,.chart-grid{
grid-template-columns:1fr
}
.news-list{
grid-template-columns:repeat(2,1fr)
}
}
@media(max-width:620px){
main{
padding:var(--space-4) var(--space-3)
}
.tab-intro{
display:block;
padding:var(--space-6) 0 var(--space-5)
}
.tab-intro-note{
display:block;
margin-top:var(--space-3)
}
.tab-intro h1,.tab-intro h2{
font-size:var(--fs-display-sm)
}
.metric-grid{
grid-template-columns:repeat(2,1fr);
gap:var(--space-2)
}
.metric{
padding:var(--space-3);
min-height:96px
}
.metric-value{
font-size:var(--fs-metric-sm)
}
.decision-chip{
grid-template-columns:1fr
}
.decision-fields{
grid-template-columns:repeat(2,1fr);
gap:var(--space-3)
}
.decision-reason{
grid-column:1/-1
}
.news-list{
grid-template-columns:1fr
}
footer{
flex-wrap:wrap
}
.market-grid{
grid-template-columns:1fr
}
}