:root {
  --bg: #ffffff; --fg: #16232e; --muted: #6b7a88; --card: #f2f6f9;
  --w0:#5b6b7a; --w1:#2e7d3b; --w2:#2a7fd4; --w3:#8e44ad; --w4:#d64545; --w5:#7c1f2e;
  /* wykresy: serie zwalidowane na tle danego motywu (dataviz validator) */
  --chart-avg:#2a7fd4; --chart-gust:#d64545; --chart-forecast:#8e24aa; --chart-grid:rgba(22,35,46,.10);
  /* pole wiatru: rampa windfinder-like (kotwice uzytkownika: ~10 kt jasny
     niebieski, >30 kt brazowy); jasnosc swiadomie niemonotoniczna */
  --wf1:#6bbdf4; --wf2:#3fc487; --wf3:#e6d743; --wf4:#e3662e; --wf5:#9a4318;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#10181f; --fg:#e8eef3; --muted:#93a3b1; --card:#1a252f;
          --w0:#8fa3b3; --w1:#4fbf61;
          --chart-avg:#3d92dd; --chart-gust:#e26666; --chart-forecast:#ce93d8; --chart-grid:rgba(232,238,243,.12);
          --wf1:#79c8fa; --wf2:#4bd191; --wf3:#ecdf52; --wf4:#f08348; --wf5:#93400f; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:16px/1.45 system-ui, sans-serif; }
header { display:flex; align-items:center; justify-content:space-between;
         padding:.5rem 1rem; border-bottom:1px solid var(--card); }
header h1 { font-size:1.1rem; margin:0; }
header a { color:var(--fg); text-decoration:none; margin-right:.75rem; }
header nav { display:flex; align-items:center; white-space:nowrap; }
@media (max-width: 430px) {
  header { padding: .5rem .6rem; }
  header h1 { font-size: 1rem; }
  header a { margin-right: .5rem; font-size: .9rem; }
  #unitToggle { font-size: .85rem; padding: .1rem .4rem; }
}
main { max-width: 720px; margin: 0 auto; padding: 1rem; }
.station-card { background:var(--card); border-radius:12px; padding:1rem;
                margin-bottom:.75rem; display:grid;
                grid-template-columns: 1fr auto; gap:.25rem .75rem; }
.station-card .big { font-size:2rem; font-weight:700; }
.station-card .meta { color:var(--muted); font-size:.85rem; }
.station-card a { color:var(--fg); }
.stale { opacity:.5; }
.badge-amateur { font-size:11px; padding:0 4px; border-radius:4px;
                 background:var(--w0); color:#fff; vertical-align:middle; }
#offline-banner { background:#4d3b00; color:#ffe08a; text-align:center;
                  padding:.35rem .5rem; font-size:.85rem; }
.help-content p { line-height:1.5; }
.help-content h3 { margin:1rem 0 .3rem; }
.btn-msg { display:inline-block; padding:.5rem .9rem; border:1px solid var(--muted);
           border-radius:8px; background:var(--card); color:var(--fg);
           text-decoration:none; }
.w0{color:var(--w0)} .w1{color:var(--w1)} .w2{color:var(--w2)}
.w3{color:var(--w3)} .w4{color:var(--w4)} .w5{color:var(--w5)}
#map { height: calc(100vh - 120px); border-radius: 12px; }
.forecast-scroll { overflow-x:auto; }
.forecast-scroll table { border-collapse: collapse; font-size:.8rem; }
.forecast-scroll td, .forecast-scroll th { padding:.25rem .4rem; text-align:center;
                                           min-width:2.6rem; }
.forecast-scroll td.cell { border-radius:4px; }
.range-toggle button.active { font-weight:700; }
button { cursor:pointer; border:1px solid var(--muted); background:var(--card);
         color:var(--fg); border-radius:8px; padding:.4rem .8rem; }
.danger { color:#c62828; background:none; border:1px solid #c62828; border-radius:8px;
          padding:.4rem .8rem; margin-left:.5rem; }
.sparkline { grid-column: 1 / -1; }
.spark-caption { grid-column: 1 / -1; font-size:.75rem; text-align:right; }
.spark-caption a { color:var(--muted); }
form label { display:block; margin:.5rem 0; }
.trend-rosnie { color: #2e7d32; }
.trend-slabnie { color: #c62828; }
.title-row { display:flex; align-items:center; gap:.5rem; }
.title-row h2 { margin-right:auto; }
.fav-btn { background:none; border:none; cursor:pointer; font-size:1.5rem;
           color:var(--muted); padding:.25rem; min-width:40px; min-height:40px; }
.fav-btn.active { color:#f5b301; }
.map-toolbar { margin-bottom:.5rem; }
.map-toolbar .fav-btn { font-size:1rem; border:1px solid var(--card);
                        border-radius:8px; padding:.35rem .7rem; }
@media (prefers-color-scheme: dark) {
  .trend-rosnie { color: #81c784; }
  .trend-slabnie { color: #ef9a9a; }
}
.freshness-warning {
  background: #fff3cd; color: #664d03;
  border-radius: 8px; padding: 8px 12px; margin-bottom: 8px;
}
@media (prefers-color-scheme: dark) {
  .freshness-warning { background: #4d3b00; color: #ffe08a; }
}
.spot-pin { font-size:16px; background:var(--card); border-radius:50%;
            width:28px; height:28px; display:flex; align-items:center;
            justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.4);
            position:relative; }
.pin-star { position:absolute; top:-7px; right:-7px; font-size:13px;
            color:#f5c518; text-shadow:0 0 2px #16232e; }
/* >=16px: iOS auto-zoomuje strone przy fokusie mniejszego inputa,
   a pinch nad mapa zjada Leaflet - strona zostaje zoomem na stale */
.add-place input { width:160px; margin-bottom:.35rem; font-size:16px; }
.add-place-btns { display:flex; gap:.4rem; }
#view-map { position:relative; }
.wind-canvas { position:absolute; pointer-events:none; }
.wind-legend { position:absolute; left:.5rem; bottom:.5rem; z-index:1000;
               background:var(--card); color:var(--fg); border-radius:8px;
               padding:.3rem .6rem; font-size:.75rem; pointer-events:none;
               display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.wind-legend[hidden] { display:none; }  /* display:flex nadpisalby atrybut hidden */
.wind-legend .grad-wrap { position:relative; width:150px; height:24px;
                          display:inline-block; }
.wind-legend .grad { position:absolute; left:0; right:0; top:2px; height:10px;
                     border-radius:3px; display:block; }
.wind-legend .tick { position:absolute; top:13px; transform:translateX(-50%);
                     font-size:.65rem; color:var(--muted); }
.wind-legend .muted { color:var(--muted); }
.wind-time { display:flex; align-items:center; gap:.5rem; margin:.35rem 0;
             font-size:.85rem; }
.wind-time[hidden] { display:none; }
/* >=16px: twarda regula projektu dla KAZDEGO inputa (iOS auto-zoom) */
.wind-time input[type=range] { flex:1; max-width:280px; font-size:16px; }
.wind-time button { font-size:.8rem; padding:.15rem .5rem; }
.wind-anim { position:absolute; pointer-events:none; }