.steam-main { max-width:1200px; gap:18px; }
.steam-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.steam-heading h1 { margin:0; font-size:32px; letter-spacing:-.8px; line-height:1.25; color:var(--ink); }
.steam-eyebrow { margin:0 0 6px; font-size:14px; color:var(--muted); }
.steam-refresh { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border:1px solid var(--border); border-radius:8px; font-size:14px; text-decoration:none; color:var(--accent-text); }
.steam-status { display:flex; gap:8px 24px; flex-wrap:wrap; color:var(--muted); font-size:14px; }
.steam-status > span:first-child { color:var(--success-text); }
.steam-status.is-stale > span:first-child { color:var(--danger); }
.steam-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:4px 0 6px; }
.steam-stat { padding:24px; border:1px solid var(--border); border-radius:12px; background:var(--panel); min-width:0; }
.steam-stat dt { font-size:14px; color:var(--muted); }
.steam-stat dd { margin:8px 0 0; font-size:clamp(28px,3.5vw,42px); font-weight:650; color:var(--ink); letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.steam-stat:first-child { border-color:var(--accent); }
.steam-stat:first-child dd { color:var(--accent-text); }
.steam-stat-detail { display:block; margin-top:10px; font-size:13px; font-weight:400; letter-spacing:0; color:var(--muted); }
.steam-history { background:var(--panel); }
.steam-chart-heading { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }
.steam-chart-heading h2 { margin:0; color:var(--ink); font-size:20px; font-weight:600; }
.steam-ranges { display:flex; flex-wrap:wrap; gap:4px; }
.steam-ranges a { display:flex; align-items:center; min-height:44px; padding:8px 12px; font-size:14px; border-radius:8px; color:var(--muted); text-decoration:none; }
.steam-ranges a:hover { background:var(--bg-soft); }
.steam-ranges a[aria-current] { background:var(--accent-tint); color:var(--accent-text); }
.steam-period-meta { margin:12px 0 18px; font-size:14px; color:var(--muted); }
.steam-chart svg { width:100%; height:auto; overflow:visible; }
.steam-chart text { fill:var(--muted); font:12px var(--font-sans); font-variant-numeric:tabular-nums; }
.steam-grid { stroke:var(--border); }
.steam-line { stroke:var(--accent); }
.steam-dot { fill:var(--accent); }
.steam-chart-small { display:none; }
.steam-chart .chart-pt:focus { outline:none; }
.steam-chart .chart-pt:focus .cdot,.steam-chart .chart-pt.active .cdot { stroke:var(--ink); stroke-width:2; }
.steam-empty { min-height:230px; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted); font-size:16px; }
@media(max-width:680px) {
  .steam-main { padding:0 16px 36px; }
  .steam-heading h1 { font-size:27px; }
  .steam-heading { align-items:flex-start; }
  .steam-refresh { padding:8px 12px; }
  .steam-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .steam-stat { padding:16px; }
  .steam-stat:first-child { grid-column:1/-1; }
  .steam-stat:first-child dd { font-size:40px; }
  .steam-stat dd { font-size:28px; }
  .steam-history { padding:18px 12px; }
  .steam-chart-heading { gap:12px; }
  .steam-ranges { width:100%; justify-content:space-between; gap:0; }
  .steam-ranges a { padding:8px; }
  .steam-chart-wide { display:none; }
  .steam-chart-small { display:block; }
}