:root { color-scheme: light dark; --background:#F0F0F2; --surface:#ffffff; --surface-hover:#ffffff; --text:#1c1c1e; --muted:#636366; --border:#e5e5ea; --accent:#173973; --accent-soft:rgba(23,57,115,.11); --warn:#9a3412; --warn-soft:rgba(194,65,12,.1); --ok:#15803d; --shadow:0 0 0 .5px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.04);
  --s1:#173973; --s2:#c2410c; --s3:#15803d; --s4:#7e22ce; --s5:#a16207; --outdoor:#8e8e93; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background:#141416; --surface:#1c1c1e; --surface-hover:#2c2c2e; --text:#f2f2f7; --muted:#aeaeb2; --border:#38383a; --accent:#8ab4f8; --accent-soft:rgba(138,180,248,.12); --warn:#fdba74; --warn-soft:rgba(253,186,116,.12); --ok:#86efac; --shadow:0 18px 50px rgba(0,0,0,.24);
  --s1:#8ab4f8; --s2:#fb923c; --s3:#4ade80; --s4:#c084fc; --s5:#facc15; --outdoor:#8e8e93; } }
:root[data-theme="dark"] { --background:#141416; --surface:#1c1c1e; --surface-hover:#2c2c2e; --text:#f2f2f7; --muted:#aeaeb2; --border:#38383a; --accent:#8ab4f8; --accent-soft:rgba(138,180,248,.12); --warn:#fdba74; --warn-soft:rgba(253,186,116,.12); --ok:#86efac; --shadow:0 18px 50px rgba(0,0,0,.24);
  --s1:#8ab4f8; --s2:#fb923c; --s3:#4ade80; --s4:#c084fc; --s5:#facc15; --outdoor:#8e8e93; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; padding:0 24px 48px; background:var(--background); color:var(--text); font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
main,.site-header { width:min(100%,1052px); margin:0 auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:70px; padding:14px 0; }
.site-header a { color:var(--text); font-size:1.2rem; font-weight:650; letter-spacing:-.025em; text-decoration:none; }
.site-header a span { color:var(--accent); font-size:1rem; font-weight:400; }
.header-actions { display:flex; gap:.75rem; }
main { padding:32px; border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }
main > header { margin:0 0 24px; }
h1 { font-size:clamp(1.5rem,4vw,2rem); letter-spacing:-.04em; line-height:1.15; margin:0; }
h2 { font-size:1rem; letter-spacing:-.01em; margin:2rem 0 .75rem; }
.intro { margin:8px 0 0; font-size:.9rem; color:var(--muted); }
.login > header { text-align:center; margin:8px 0 28px; }
.login .intro { margin:12px auto 0; }
button,input { font:inherit; }
button { min-height:44px; padding:.65rem 1rem; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; font-weight:600; font-size:.85rem; white-space:nowrap; }
button:hover { border-color:var(--accent); background:var(--surface-hover); }
button:disabled { opacity:.5; cursor:wait; }
button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
input { width:100%; color:var(--text); background:var(--surface); border:1px solid var(--muted); border-radius:.65rem; padding:.8rem 1rem; }
.login { text-align:center; padding:64px 24px 48px; }
.login h1 { font-size:1.5rem; }
.login .intro { max-width:320px; font-size:.9rem; }
.login form { margin:32px auto; max-width:320px; text-align:left; }
.login label { display:block; margin-bottom:.5rem; font-weight:600; font-size:.9rem; }
.login button { width:100%; margin-top:1rem; color:#fff; background:#173973; }
.login button:hover { filter:brightness(.9); }
#message:not(:empty) { margin:1rem 0; font-size:.9rem; }
[hidden] { display:none!important; }
.banner { padding:.85rem 1rem; border-radius:10px; font-size:.9rem; margin:0 0 1.25rem; background:var(--warn-soft); color:var(--warn); }
.grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.75rem; }
.card { min-width:0; padding:1rem; border:1px solid var(--border); border-radius:13px; background:var(--background); }
.card .label { display:flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:650; }
.swatch { width:.65rem; height:.65rem; border-radius:3px; flex:none; }
.card .temp { font-size:1.9rem; font-weight:650; letter-spacing:-.04em; line-height:1.2; margin-top:.35rem; font-variant-numeric:tabular-nums; }
.card .meta { color:var(--muted); font-size:.78rem; }
.chart-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.chart-head h2 { margin:0; }
.ranges { display:flex; gap:.4rem; }
.ranges button { min-height:36px; padding:.35rem .75rem; }
.chart { margin-top:.75rem; border:1px solid var(--border); border-radius:13px; padding:.5rem; background:var(--background); }
.chart svg { display:block; width:100%; height:auto; }
.chart text { fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.chart .gridline { stroke:var(--border); stroke-width:1; }
.chart .empty { text-anchor:middle; font-size:13px; }
.legend { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:.6rem .25rem 0; font-size:.8rem; color:var(--muted); }
.legend span { display:inline-flex; align-items:center; gap:.4rem; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.85rem; font-variant-numeric:tabular-nums; }
th,td { text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--border); vertical-align:top; white-space:nowrap; }
th { color:var(--muted); font-weight:600; font-size:.78rem; }
td.num,th.num { text-align:right; }
.ok { color:var(--ok); font-weight:600; }
.bad { color:var(--warn); font-weight:600; }
.detail { color:var(--muted); font-size:.78rem; white-space:normal; min-width:12rem; overflow-wrap:anywhere; }
footer { margin-top:2rem; padding-top:1rem; border-top:1px solid var(--border); color:var(--muted); font-size:.78rem; }
@media(max-width:900px) { .grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:560px) { body { padding:0 16px 32px; } main { padding:24px 16px; } .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .site-header { gap:.5rem; } .header-actions { gap:.5rem; } .login { padding:48px 20px; } .site-header a span { display:none; } .site-header button { padding:.65rem .8rem; } }