:root { --index-line:#718398; --index-open:#567da5; --index-average:#8970b0; }
:root[data-theme="dark"], :root[data-theme-mode="dark"] { --index-line:#a0b6ce; --index-open:#a8c4e2; --index-average:#bfa3e8; }
.home-index, .index-detail { font-family:var(--font-index, Arial, sans-serif); }
.home-index { display:flex; flex-direction:column; min-height:0; height:100%; color:var(--ink, #28342f); gap:8px; }
[data-index-retry] { border:1px solid var(--line, #d9e1db); background:var(--surface, #fff); color:var(--ink, #28342f); border-radius:10px; padding:8px 12px; cursor:pointer; }
.home-index-quote { display:grid; grid-template-columns:max-content minmax(0, 1fr) max-content; align-items:center; gap:12px; font-variant-numeric:tabular-nums; }
.home-index-quote > strong { color:var(--ink, #28342f); font-size:clamp(49.4px, 4.18vw, 60.8px); font-weight:600; letter-spacing:-.045em; line-height:1.08; }
.home-index-delta { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; font-size:18px; font-weight:500; line-height:1.15; white-space:nowrap; }
.home-index-delta > [data-index-percent] { font-size:19px; }
.home-index-quote > .index-challenge-badge { grid-column:3; grid-row:1; justify-self:end; font-size:11px; }
.index-rise { color:var(--index-rise, #d66c58); } .index-fall { color:var(--index-fall, #4d8a73); }
.home-index-metrics { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.home-index-metrics > div { display:flex; flex-direction:column; gap:4px; }
.home-index-metrics span, .home-index-foot { color:var(--muted, #738078); font-size:12px; }
.home-index-metrics strong { font-size:14px; font-variant-numeric:tabular-nums; }
.home-index-session-metrics { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; margin-top:2px; }
.home-index-session-metrics > div { flex-direction:row; align-items:baseline; gap:6px; }
.home-index-session-metrics strong { font-size:clamp(18px, 1.6vw, 22px); font-weight:600; letter-spacing:-.025em; line-height:1.2; white-space:nowrap; }
.home-index-session-metrics [data-index-high] { color:var(--index-rise, #d66c58); }
.home-index-session-metrics [data-index-low] { color:var(--index-fall, #4d8a73); }
.home-index-session-metrics [data-index-open] { color:var(--index-open); }
.home-index-session-metrics [data-index-average] { color:var(--index-average); }
.home-index-chart-wrap { position:relative; flex:1; min-height:140px; }
.home-index-chart { position:relative; width:100%; height:100%; min-height:140px; }
.market-intraday-svg { display:block; overflow:visible; touch-action:pan-y; user-select:none; }
.market-intraday-tooltip { position:absolute; top:6px; z-index:5; max-width:100%; padding:3px 6px; border:1px solid var(--line, #d9e1db); border-radius:4px; background:var(--surface, #fff); color:var(--muted, #738078); font-size:10px; pointer-events:none; white-space:nowrap; }
.market-intraday-tooltip[hidden] { display:none; }
.index-now-marker { position:absolute; z-index:3; top:7px; bottom:27px; width:0; border-left:1px dashed color-mix(in srgb, var(--accent-deep, #8067b3) 45%, transparent); pointer-events:none; }
.index-now-marker[hidden] { display:none; }
.index-now-marker span { position:absolute; top:0; left:0; transform:translateX(-50%); padding:2px 5px; border-radius:4px; background:var(--accent-soft, #eee9f5); color:var(--accent-deep, #8067b3); font-size:11px; white-space:nowrap; }
.market-axis-open { transform:translateX(-3px); }
.market-axis-close { transform:translateX(-100%); }
.home-index-empty { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted, #738078); pointer-events:none; }
.home-index-empty[hidden] { display:none; }
.home-index-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.home-index-foot:has([data-index-retry][hidden]) { display:none; }
.index-detail { display:flex; flex-direction:column; gap:24px; }
.index-detail-quote { display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; }
.index-detail-quote strong { font-size:48px; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.index-detail p { color:var(--muted, #738078); line-height:1.7; }
.index-detail h3 { margin:0 0 12px; font-size:17px; }
.index-detail-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:0; }
.index-detail-grid > div { padding:12px; border:1px solid var(--line, #d9e1db); border-radius:12px; }
.index-detail-grid dt { font-size:12px; color:var(--muted, #738078); margin-bottom:8px; }
.index-detail-grid dd { margin:0; font-variant-numeric:tabular-nums; }
.index-detail-chart { position:relative; height:230px; min-width:0; }
.index-detail-select { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.index-detail-select select { max-width:180px; background:var(--surface, #fff); color:var(--ink, #28342f); border:1px solid var(--line, #d9e1db); padding:8px; border-radius:8px; }
.index-params { display:grid; grid-template-columns:1fr; gap:12px; margin:0; }
.index-params dt { font-weight:600; }.index-params dd { margin:5px 0 0; color:var(--muted, #738078); font-size:13px; line-height:1.6; }
.index-detail-link { align-self:flex-start; padding:10px 14px; border:1px solid var(--line, #d9e1db); border-radius:10px; color:var(--ink, #28342f); }
@media (max-width:600px) { html:not([data-viewport-mode="wide"]) .index-detail-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } html:not([data-viewport-mode="wide"]) .index-detail-quote strong { font-size:38px; } }