:root { --ink:#14181d; --mute:#6a727b; --line:rgba(20,24,29,.09); --bg:#eef0f3; --paper:#f7f8fa; --up:#2c6b56; --down:#a33b32; --sel:#e8efeb; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.35; cursor:default; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:2px solid var(--up); outline-offset:3px; }
.page { width:100%; max-width:1480px; height:100dvh; min-height:500px; margin:auto; padding:20px 22px; display:flex; flex-direction:column; gap:12px; }
h1 { font-size:24px; font-weight:650; margin:0; letter-spacing:-.04em; }
h2 { font-size:23px; font-weight:650; margin:0 0 3px; letter-spacing:-.035em; }
h3 { font-size:14px; font-weight:600; margin:22px 0 12px; }
.sub,.status { color:var(--mute); font-size:13px; line-height:1.5; margin:5px 0 0; }
.status { font-size:12px; min-height:18px; margin-top:12px; }
.mast { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.segmented { display:flex; gap:3px; padding:3px; border-radius:10px; background:rgba(20,24,29,.05); flex-shrink:0; }
.segmented button { padding:7px 13px; font-size:13px; font-weight:550; border:0; border-radius:8px; background:transparent; color:var(--mute); white-space:nowrap; }
.segmented button[aria-pressed=true] { background:var(--ink); color:var(--paper); }
.toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:20px; }
.date-picker { display:flex; align-items:center; gap:5px; }
.date-picker button,.date-picker select,input[type=search] { padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--paper); font-size:13px; min-height:38px; }
.date-picker select { width:158px; }
input[type=search] { min-width:150px; flex:1; }
.main { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:12px; flex:1; min-height:0; }
.page.trend-view .main { grid-template-columns:minmax(0,1fr) minmax(340px,1.05fr); }
.frame { padding:5px; border-radius:14px; background:rgba(20,24,29,.045); min-width:0; min-height:0; overflow:hidden; }
.board,.side { border-radius:10px; background:var(--paper); height:100%; overflow:auto; }
.side { padding:20px 17px; }
table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
th { font-weight:500; color:var(--mute); font-size:11px; text-align:right; }
td { text-align:right; }
td,th { padding:10px 9px; border-bottom:1px solid var(--line); }
.rankings thead { position:sticky; top:0; background:var(--paper); z-index:1; }
.rankings td:nth-child(2),.rankings th:nth-child(2) { text-align:left; }
.rankings td:first-child { width:45px; color:var(--mute); font-weight:600; }
.rankings td:nth-child(4) { font-weight:600; white-space:nowrap; }
.rankings td:nth-child(5) { white-space:nowrap; }
.rankings td:nth-child(3) { font-size:12px; font-weight:600; }
.rankings tr.selected { background:var(--sel); box-shadow:inset 2px 0 var(--up); }
.rankings tbody tr:hover { background:rgba(20,24,29,.035); }
.player-button { text-align:left; display:block; border:0; background:none; padding:0; font-weight:600; letter-spacing:-.015em; }
.team { display:block; font-size:11px; font-weight:500; color:var(--mute); margin-top:3px; }
.night-col { color:var(--mute); font-size:11px; white-space:nowrap; }
.up { color:var(--up); }
.down { color:var(--down); }
.flat { color:var(--mute); }
.price-card { border:1px solid var(--line); border-radius:10px; padding:16px; margin:19px 0; }
.label { color:var(--mute); font-size:11px; }
.amount { font-size:32px; font-weight:650; letter-spacing:-.045em; margin:4px 0; font-variant-numeric:tabular-nums; }
.change { font-size:13px; font-weight:550; }
.rank-change { color:var(--mute); font-size:12px; margin:8px 0 0; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:12px 0 20px; }
.stat { border-bottom:1px solid var(--line); padding:10px 2px; }
.stat b { display:block; font-size:17px; margin-top:5px; font-weight:600; }
.chart { display:block; width:100%; height:180px; color:var(--ink); overflow:visible; margin-top:15px; }
.chart path { fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.chart line { stroke:var(--line); }
.chart circle { fill:var(--up); }
.chart text { fill:var(--mute); font:11px ui-sans-serif,system-ui,sans-serif; }
.chart-ends { display:flex; justify-content:space-between; color:var(--mute); font-size:11px; margin:4px 0 15px; }
.link-button { background:none; border:0; text-decoration:underline; text-underline-offset:3px; font-size:13px; padding:0; }
.history-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:25px 0 10px; }
.history-tools h3 { margin:0; }
.history-tools select { background:var(--paper); border:1px solid var(--line); border-radius:6px; font-size:12px; padding:6px; }
.history { font-size:12px; }
.history th,.history td { padding:10px 5px; white-space:nowrap; }
.history th:first-child,.history td:first-child { text-align:left; }
.history button { background:none; border:0; padding:0; font-size:12px; white-space:nowrap; }
.history tr.selected { background:var(--sel); }
.history-wrap { overflow-x:auto; }
.empty { text-align:center; color:var(--mute); padding:24px; }
@media(max-width:1100px) { .night-col { display:none; } }
@media(max-width:800px) {
  .page { height:auto; min-height:100dvh; padding:17px 12px; }
  .mast { align-items:flex-start; gap:12px; }
  h1 { font-size:22px; }
  .sub { font-size:12px; }
  .main,.page.trend-view .main { grid-template-columns:1fr; }
  .board { max-height:52dvh; min-height:220px; }
  .page.trend-view .board { max-height:32dvh; }
  .side { overflow:visible; }
  .toolbar { gap:8px; }
  input[type=search] { flex-basis:100%; }
  .segmented button { padding:7px 10px; font-size:12px; }
  .date-picker select { width:146px; }
  .date-picker button { padding:9px; }
  .rankings td,.rankings th { padding:10px 7px; }
}
@media(max-width:440px) { .mast { flex-wrap:wrap; } .toolbar { margin-top:14px; } .rankings td:nth-child(3),.rankings th:nth-child(3) { display:none; } }

#model { padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--paper); font-size:13px; max-width:100%; }
.chart .comparison-line { stroke-dasharray:5 4; opacity:.8; }
.chart .compare-previous { stroke:#3977bd; }
.chart .compare-last5 { stroke:#b36526; }
.chart .compare-current { stroke:#999; }
.legend-a { color:#3977bd; }
.legend-b { color:#b36526; }
.legend-earlier { color:#999; }
.chart .compare-sustained { stroke:#8062bd; }
.legend-new { color:#8062bd; }