/* ============================================================================
   HighGrow — arkusz stylów oparty na tokenach.

   Motywy pochodzą z plików DESIGN.md (github.com/voltagent/awesome-design-md, MIT):
     grow       ← spotify      · węglowa ciemność + zieleń, geometria pigułek
     studio     ← supabase     · biel + emerald, minimalny chrome
     graphite   ← linear.app   · grafit + lawenda, hairline'y, gęsto
     terracotta ← claude       · kremowy len + terakota, szeryfowe nagłówki
     voltage    ← clickhouse   · czerń + elektryczna żółć

   ZASADA: sekcje 3+ (komponenty) nie zawierają ani jednej wartości hex.
   Kolory wyłącznie przez zmienne z kontraktu w sekcji 1.
   ========================================================================== */

/* ============================================================ 1. KONTRAKT + MOTYW „grow" (domyślny) */
:root{
  color-scheme:dark;

  /* powierzchnie */
  --canvas:#121212; --surface:#181818; --surface-2:#1f1f1f; --surface-3:#252525;
  /* tekst */
  --ink:#ffffff; --ink-2:#cbcbcb; --ink-3:#b3b3b3;
  /* akcent */
  --accent:#1ed760; --accent-2:#1db954; --on-accent:#000000; --accent-soft:#1ed76022;
  /* linie */
  --line:#2c2c2c; --line-2:#4d4d4d;
  /* semantyka */
  --ok:#1ed760; --warn:#ffa42b; --err:#f3727f; --gold:#ffd05b;

  /* kształt */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --btn-r:var(--r-pill);
  /* głębia */
  --sh-1:0 4px 12px rgb(0 0 0 / .35);
  --sh-2:0 8px 28px rgb(0 0 0 / .5);
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

  /* typografia */
  --font-display:'SpotifyMixUI',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,Menlo,Consolas,'Liberation Mono',monospace;
  --h-weight:700; --h-tracking:-.01em; --h-transform:none;

  /* rytm */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px;
  --maxw:1360px;

  /* ---- paleta canvasu (roślina + wykres) — czytana przez theme.js ---- */
  --pl-wall-1:#1b2b1f; --pl-wall-2:#16211a; --pl-wall-3:#101610;
  --pl-floor-1:#241a12; --pl-floor-2:#120c07; --pl-sheen:#cfe0c0;
  --pl-stem-hi:#63b55a; --pl-stem-lo:#46583a; --pl-dead:#6a5836;
  --pl-pot:#a06a3e; --pl-cord:#2a3120;
  --pl-bud-hi:#8ec163; --pl-bud-lo:#3f6f2a; --pl-pistil:#d2965a; --pl-trichome:#f0f8d7;
  --pl-label:#eaf0e0; --pl-label-2:#a9c98a; --pl-empty:#7a8a6a;
  --ch-bg:#101610; --ch-health:#1ed760; --ch-height:#539df5; --ch-thc:#ffa42b;
}

/* ============================================================ 2. WARIANTY MOTYWÓW */
:root[data-theme="studio"]{
  color-scheme:light;
  --canvas:#ffffff; --surface:#fafafa; --surface-2:#f2f2f2; --surface-3:#ededed;
  --ink:#171717; --ink-2:#4a4a4a; --ink-3:#707070;
  --accent:#3ecf8e; --accent-2:#24b47e; --on-accent:#171717; --accent-soft:#3ecf8e1f;
  --line:#dfdfdf; --line-2:#c7c7c7;
  --ok:#24b47e; --warn:#b06d00; --err:#e2005a; --gold:#b58900;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --btn-r:var(--r-md);
  --sh-1:0 1px 2px rgb(0 0 0 / .06),0 4px 12px rgb(0 0 0 / .06);
  --sh-2:0 8px 32px rgb(0 0 0 / .12);
  --font-display:'Circular','Helvetica Neue',system-ui,sans-serif;
  --h-weight:500; --h-tracking:-.02em;
  --pl-wall-1:#eef2ee; --pl-wall-2:#e6ece6; --pl-wall-3:#dde5dd;
  --pl-floor-1:#ded5c9; --pl-floor-2:#cfc4b5; --pl-sheen:#ffffff;
  --pl-stem-hi:#3f8f45; --pl-stem-lo:#5a6b4a; --pl-dead:#9a8358;
  --pl-pot:#b97a49; --pl-cord:#b6bdb3;
  --pl-bud-hi:#7fb356; --pl-bud-lo:#39672a; --pl-pistil:#c07b3a; --pl-trichome:#ffffff;
  --pl-label:#171717; --pl-label-2:#707070; --pl-empty:#9a9a9a;
  --ch-bg:#fafafa; --ch-health:#24b47e; --ch-height:#054cff; --ch-thc:#d97706;
}

:root[data-theme="graphite"]{
  color-scheme:dark;
  --canvas:#010102; --surface:#0f1011; --surface-2:#141516; --surface-3:#18191a;
  --ink:#f7f8f8; --ink-2:#d0d6e0; --ink-3:#8a8f98;
  --accent:#5e6ad2; --accent-2:#828fff; --on-accent:#ffffff; --accent-soft:#5e6ad226;
  --line:#23252a; --line-2:#34343a;
  --ok:#27a644; --warn:#e0a33e; --err:#eb5757; --gold:#d8b25a;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --btn-r:var(--r-md);
  --sh-1:0 2px 8px rgb(0 0 0 / .5); --sh-2:0 16px 48px rgb(0 0 0 / .7);
  --font-display:'Inter Display','SF Pro Display',system-ui,sans-serif;
  --h-weight:600; --h-tracking:-.022em;
  --pl-wall-1:#14151a; --pl-wall-2:#0f1011; --pl-wall-3:#0a0b0d;
  --pl-floor-1:#17181c; --pl-floor-2:#0e0f11; --pl-sheen:#8a8f98;
  --pl-stem-hi:#5f9e63; --pl-stem-lo:#414c3e; --pl-dead:#5d5647;
  --pl-pot:#8a6247; --pl-cord:#23252a;
  --pl-bud-hi:#7fa96a; --pl-bud-lo:#37542c; --pl-pistil:#b98a5c; --pl-trichome:#e8ecd8;
  --pl-label:#f7f8f8; --pl-label-2:#8a8f98; --pl-empty:#62666d;
  --ch-bg:#0f1011; --ch-health:#27a644; --ch-height:#5e6ad2; --ch-thc:#e0a33e;
}

:root[data-theme="terracotta"]{
  color-scheme:light;
  --canvas:#faf9f5; --surface:#ffffff; --surface-2:#f5f0e8; --surface-3:#efe9de;
  --ink:#141413; --ink-2:#3d3d3a; --ink-3:#6c6a64;
  --accent:#cc785c; --accent-2:#a9583e; --on-accent:#ffffff; --accent-soft:#cc785c1f;
  --line:#e6dfd8; --line-2:#d5cabb;
  --ok:#5db872; --warn:#d4a017; --err:#c64545; --gold:#b98a2a;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --btn-r:var(--r-md);
  --sh-1:0 1px 2px rgb(20 20 19 / .05),0 6px 16px rgb(20 20 19 / .07);
  --sh-2:0 12px 40px rgb(20 20 19 / .14);
  --font-display:'Copernicus','Tiempos Headline',Georgia,serif;
  --font-body:'StyreneB',Inter,system-ui,sans-serif;
  --h-weight:400; --h-tracking:-.015em;
  --pl-wall-1:#efe9de; --pl-wall-2:#e8e0d2; --pl-wall-3:#ded5c4;
  --pl-floor-1:#d8cbb6; --pl-floor-2:#c4b59c; --pl-sheen:#fffdf8;
  --pl-stem-hi:#4e8a46; --pl-stem-lo:#5f6a48; --pl-dead:#a08a5e;
  --pl-pot:#b1613a; --pl-cord:#bfb3a0;
  --pl-bud-hi:#7da85c; --pl-bud-lo:#3e6630; --pl-pistil:#cc785c; --pl-trichome:#fffdf5;
  --pl-label:#141413; --pl-label-2:#6c6a64; --pl-empty:#8e8b82;
  --ch-bg:#f5f0e8; --ch-health:#5db872; --ch-height:#5db8a6; --ch-thc:#e8a55a;
}

:root[data-theme="voltage"]{
  color-scheme:dark;
  --canvas:#0a0a0a; --surface:#121212; --surface-2:#1a1a1a; --surface-3:#242424;
  --ink:#ffffff; --ink-2:#cccccc; --ink-3:#888888;
  --accent:#faff69; --accent-2:#e6eb52; --on-accent:#0a0a0a; --accent-soft:#faff6920;
  --line:#2a2a2a; --line-2:#3a3a3a;
  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --gold:#faff69;
  --r-sm:4px; --r-md:6px; --r-lg:10px; --btn-r:var(--r-sm);
  --sh-1:0 2px 10px rgb(0 0 0 / .6); --sh-2:0 12px 40px rgb(0 0 0 / .8);
  --font-display:'Inter Tight',system-ui,sans-serif;
  --h-weight:700; --h-tracking:-.02em; --h-transform:uppercase;
  --pl-wall-1:#151515; --pl-wall-2:#101010; --pl-wall-3:#0a0a0a;
  --pl-floor-1:#1c1a12; --pl-floor-2:#0d0c08; --pl-sheen:#faff69;
  --pl-stem-hi:#5aa84e; --pl-stem-lo:#414a33; --pl-dead:#5f5537;
  --pl-pot:#8f5f36; --pl-cord:#2a2a2a;
  --pl-bud-hi:#8ec163; --pl-bud-lo:#3f6f2a; --pl-pistil:#c89355; --pl-trichome:#faff69;
  --pl-label:#ffffff; --pl-label-2:#888888; --pl-empty:#5a5a5a;
  --ch-bg:#121212; --ch-health:#22c55e; --ch-height:#3b82f6; --ch-thc:#faff69;
}

/* ============================================================ 3. PODSTAWY */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font:400 15px/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--h-weight);letter-spacing:var(--h-tracking);margin:0}
h1{font-size:19px}
h2{font-size:17px;margin-bottom:var(--s3)}
h3{font-size:15px;margin-bottom:var(--s2)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);border-radius:var(--r-sm);padding:1px 5px}
:where(a,button,input,select,textarea,summary):focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
::selection{background:var(--accent);color:var(--on-accent)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--s4) var(--s3) var(--s6)}
.spacer{margin-left:auto}
.sub{color:var(--ink-3);font-weight:400;font-size:13px}
.mini,.help,.meta,.hint,.desc{color:var(--ink-3);font-size:13px}
.mini{margin-top:var(--s2)}
.mini.warn{color:var(--warn);font-weight:600}
.err,.form-errors{color:var(--err);font-size:13px;margin:var(--s1) 0}
.brandline{text-align:center;color:var(--ink-3);font-size:13px;margin-top:var(--s4)}
.empty{color:var(--ink-3);font-size:14px;padding:var(--s5) var(--s3);text-align:center;
  border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--surface-2)}

/* ============================================================ 4. NAGŁÓWEK APLIKACJI */
/* Na telefonie nagłówek odjeżdża ze scrollem — przyklejony zostaje pasek gry
   (.subbar), bo to on trzyma sterowanie. Od tabletu obie warstwy są przyklejone,
   a .subbar siada pod nagłówkiem; --appbar-h ustawia theme.js. */
.appbar{z-index:20;background:var(--canvas);border-bottom:1px solid var(--line)}
.appbar__top{display:flex;align-items:center;gap:var(--s3);
  max-width:var(--maxw);margin:0 auto;padding:var(--s3)}
.brand{display:flex;align-items:center;gap:var(--s2);font-family:var(--font-display);
  font-weight:var(--h-weight);font-size:18px;letter-spacing:var(--h-tracking);
  color:var(--ink);text-transform:var(--h-transform)}
.brand:hover{text-decoration:none}
.brand__mark{font-size:22px;line-height:1}
.brand__sub{display:none;color:var(--ink-3);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none}

.nav{display:flex;gap:var(--s2);align-items:center;overflow-x:auto;scrollbar-width:none;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--s3) var(--s3)}
.nav::-webkit-scrollbar{display:none}
.navlink{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--r-pill);font-size:14px;font-weight:600;
  color:var(--ink-2);background:var(--surface-2);border:1px solid transparent;white-space:nowrap}
.navlink:hover{color:var(--ink);background:var(--surface-3);text-decoration:none}
.navlink[aria-current="page"]{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}

.who{display:none;color:var(--ink-3);font-size:13px;text-align:right;line-height:1.3}
.who b{color:var(--ink-2);display:block;font-size:14px}

/* przełącznik motywu */
.picker{position:relative;flex:0 0 auto}
.picker>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--line);border-radius:var(--btn-r);
  background:var(--surface-2);color:var(--ink-2);font-size:13px;font-weight:600}
.picker>summary::-webkit-details-marker{display:none}
.picker>summary:hover{border-color:var(--line-2);color:var(--ink)}
.picker__dot{width:14px;height:14px;border-radius:var(--r-pill);background:var(--accent);
  box-shadow:0 0 0 2px var(--canvas),0 0 0 3px var(--line-2);flex:0 0 auto}
.picker__label{display:none}
.picker__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:250px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:var(--s2);display:flex;flex-direction:column;gap:2px}
.picker__title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:var(--s2) var(--s2) var(--s1)}
.theme-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  padding:8px;border:1px solid transparent;border-radius:var(--r-md);
  background:none;color:var(--ink-2);font:inherit;font-size:14px}
.theme-opt:hover{background:var(--surface-2);color:var(--ink)}
.theme-opt[aria-checked="true"]{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.theme-opt__swatch{flex:0 0 auto;width:34px;height:22px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);display:flex;overflow:hidden}
.theme-opt__swatch i{flex:1}
.theme-opt__name{flex:1;font-weight:600}
.theme-opt__note{display:block;font-size:11.5px;font-weight:400;color:var(--ink-3)}

/* ============================================================ 5. PRZYCISKI */
.btn,button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:9px 16px;cursor:pointer;
  font:600 14px/1 var(--font-body);
  color:var(--ink);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--btn-r);transition:background .15s,border-color .15s,transform .05s;
}
.btn:hover,button:hover{background:var(--surface-3);border-color:var(--line-2);text-decoration:none}
.btn:active,button:active{transform:translateY(1px)}
.btn:disabled,button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.danger{background:transparent;border-color:var(--err);color:var(--err)}
.btn.danger:hover{background:color-mix(in srgb,var(--err) 14%,transparent);border-color:var(--err)}
.btn.ghost{background:transparent}
.mini-btn{min-height:32px;padding:5px 10px;font-size:12.5px}
.btn.block,button.block{width:100%}
button.harvest{width:100%;margin-top:var(--s2);background:var(--gold);
  border-color:var(--gold);color:var(--on-accent);font-weight:700}
button.harvest:hover{filter:brightness(1.08)}
#btnBreed.ready{border-color:var(--accent);color:var(--accent);box-shadow:var(--ring)}

/* ============================================================ 6. FORMULARZE */
label{display:flex;flex-direction:column;gap:var(--s1);font-size:12.5px;font-weight:600;color:var(--ink-3)}
input,select,textarea{
  font:400 16px/1.4 var(--font-body);color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;min-height:42px;width:100%;
}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:var(--ring)}
textarea{resize:vertical;min-height:70px}
input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--accent)}
input[type=file]{padding:8px;font-size:13px}

/* suwaki: własny tor i uchwyt — natywne renderowanie różni się między motywami
   (jasny/ciemny color-scheme) i psuło spójność. --fill ustawia theme.js. */
input[type=range]{-webkit-appearance:none;appearance:none;padding:0;border:none;
  min-height:26px;height:26px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-pill);
  background:linear-gradient(to right,var(--accent) var(--fill,50%),var(--line-2) var(--fill,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;
  border-radius:var(--r-pill);background:var(--accent);border:2px solid var(--surface);
  box-shadow:var(--sh-1);cursor:pointer}
input[type=range]::-moz-range-track{height:6px;border-radius:var(--r-pill);background:var(--line-2)}
input[type=range]::-moz-range-progress{height:6px;border-radius:var(--r-pill);background:var(--accent)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid var(--surface);
  border-radius:var(--r-pill);background:var(--accent);cursor:pointer}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--ring)}
.check{flex-direction:row;align-items:center;gap:var(--s2);font-weight:400;color:var(--ink-2);font-size:14px}
.field-row{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap}
.field-row>label,.row>label{flex:1 1 170px;min-width:0}
.row{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap}
.row>form{display:contents}
.grid-form{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media(min-width:640px){
  .grid-form{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}
  /* przycisk w siatce formularza nie musi rozciągać się na całą kolumnę */
  .grid-form>button{justify-self:start;padding-left:var(--s5);padding-right:var(--s5)}
}

/* ============================================================ 7. KARTY, KAFLE, KOMUNIKATY */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);margin-bottom:var(--s4);box-shadow:var(--sh-1)}
.card .card{box-shadow:none;margin-bottom:0}
.cards{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media(min-width:620px){.cards{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}}
.card__head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.card__head h2,.card__head h3{margin-bottom:0}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:var(--s2);margin-bottom:var(--s3)}
.stats>div{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stats span{color:var(--ink-3);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.stats b{font-size:17px;font-family:var(--font-display);font-weight:var(--h-weight);
  letter-spacing:var(--h-tracking);overflow-wrap:break-word;hyphens:none}

.flashes{max-width:var(--maxw);margin:var(--s3) auto 0;padding:0 var(--s3);
  display:flex;flex-direction:column;gap:var(--s2)}
.flash{border-radius:var(--r-md);padding:10px 14px;font-size:14px;
  border:1px solid var(--line);border-left:3px solid var(--ink-3);background:var(--surface)}
.flash.success{border-left-color:var(--ok)}
.flash.error{border-left-color:var(--err);color:var(--err)}

.tag{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);color:var(--ink-3)}
.tag.ok{border-color:var(--ok);color:var(--ok)}
.tag.bad{border-color:var(--err);color:var(--err)}

/* ============================================================ 8. EKRAN GROWBOXU */
.subbar{position:sticky;top:0;z-index:15;background:var(--surface);border-bottom:1px solid var(--line)}
.subbar__in{max-width:var(--maxw);margin:0 auto;padding:var(--s2) var(--s3);
  display:flex;gap:var(--s2);align-items:center;overflow-x:auto;scrollbar-width:none}
.subbar__in::-webkit-scrollbar{display:none}
.subbar .day{flex:0 0 auto;font-size:14px;color:var(--ink-2);margin-right:var(--s2)}
.subbar .day b{color:var(--ink);font-family:var(--font-display)}
.subbar .btn{flex:0 0 auto}

/* Grow room jest głównym widokiem: zawsze pełna szerokość, panel rośliny pod nim.
   Bez podziału na kolumny — stanowiska mają być duże na każdym ekranie. */
main{max-width:var(--maxw);margin:0 auto;padding:var(--s4) var(--s3);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start}
.room,.panel{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--sh-1);min-width:0}
.log{max-width:var(--maxw);margin:0 auto var(--s6);padding:var(--s4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
@media(max-width:1039px){.log{margin:0 var(--s3) var(--s6)}}

.roomcfg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s3);margin-bottom:var(--s4)}

/* stanowiska: na telefonie karuzela ze snapem, od tabletu siatka 3 kolumn */
.stations{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:var(--s2);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:0 calc(-1 * var(--s4));padding:0 var(--s4) var(--s2)}
.stations::-webkit-scrollbar{display:none}
/* aspect-ratio zamiast height:auto — kadr jest stały (22:30), a bufor canvasu
   dopasowuje do niego game.js, więc powiększony widok nie traci ostrości */
.stations canvas{scroll-snap-align:center;width:100%;height:auto;display:block;
  aspect-ratio:22/30;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);cursor:pointer;image-rendering:pixelated}
.stations canvas:hover{border-color:var(--line-2)}
@media(min-width:560px){
  .stations{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);
    overflow:visible;margin:0;padding:0}
  /* Grow room ma wypełnić ekran: o rozmiarze stanowiska decyduje wysokość okna,
     a nie szerokość kolumny — inaczej przy 3 kolumnach kadr 22:30 wychodzi poza ekran
     i trzeba przewijać, żeby zobaczyć doniczkę. Szerokość dobiera aspect-ratio. */
  .stations canvas{height:min(58vh,560px);height:min(58dvh,560px);
    width:auto;max-width:100%;justify-self:center}
}

/* panel jest teraz szeroki na całą stronę — od tabletu układamy akcje w dwie kolumny */
@media(min-width:840px){
  .acts{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s3);align-items:start}
  .acts>button.harvest{grid-column:1/-1}
}
.acts fieldset{border:1px solid var(--line);border-radius:var(--r-md);
  margin:0 0 var(--s3);padding:var(--s3) var(--s3) var(--s3);background:var(--surface-2)}
.acts legend{color:var(--ink-2);padding:0 var(--s2);font-size:12.5px;font-weight:700}
.acts .ctl{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.acts .ctl input[type=range]{flex:1 1 140px;min-width:110px}
.acts .ctl label{flex:0 1 170px}
.acts .ctl .val{font-family:var(--font-mono);font-size:13px;color:var(--ink);min-width:58px}
.acts .npk{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-bottom:var(--s2)}
.acts .npk label{font-size:11px;text-align:center;align-items:center}
.acts .npk input{text-align:center;padding:8px 4px}
.acts .slider{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--s2)}

/* wiersz „nazwa ↔ wartość" nad suwakiem — bez niego tekst i <b> rozjeżdżają się
   na osobne linie, bo <label> jest kontenerem flex w kolumnie */
.lab{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);
  font-size:12.5px;font-weight:600;color:var(--ink-3)}
.lab b{color:var(--ink);font-family:var(--font-mono);font-weight:600}

#chart{width:100%;height:150px;display:block;background:var(--ch-bg);
  border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:var(--s3)}

/* ============================================================ 9. TABELE */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-md)}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:480px}
th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--surface-2);color:var(--ink-3);font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;position:sticky;top:0}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
td.l,th.l{text-align:left;white-space:normal}
td .mini{margin-top:2px;display:block}

/* ============================================================ 10. CERTYFIKAT */
.cert{background:var(--surface-2);border:1px solid var(--gold);border-left-width:4px;
  border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s3)}
.cert.obit{border-color:var(--err)}
.cert p{margin:0 0 var(--s3)}
.cert canvas{width:100%;height:auto;display:block;background:var(--ch-bg);
  border:1px solid var(--line);border-radius:var(--r-sm);margin-top:var(--s3)}

/* ============================================================ 11. TOAST + MODAL */
.toast{position:fixed;left:50%;bottom:calc(var(--s5) + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:60;max-width:min(92vw,420px);
  background:var(--accent);color:var(--on-accent);font-weight:700;font-size:14px;
  padding:11px 20px;border-radius:var(--r-pill);box-shadow:var(--sh-2);
  animation:toast 1.4s ease both}
@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,6px)}}

.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;
  background:rgb(0 0 0 / .6);backdrop-filter:blur(3px);padding:0}
.overlay.hidden{display:none}
.modal{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--s4);
  width:100%;max-height:90vh;overflow:auto;box-shadow:var(--sh-2);
  padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom));
  animation:sheet .22s ease both}
@keyframes sheet{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.modal label{margin-bottom:var(--s3)}
.modal canvas{width:100%;height:auto}
.modalbtns{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s4);flex-wrap:wrap}
.modalbtns>*{flex:1 1 auto}
@media(min-width:640px){
  .overlay{align-items:center;padding:var(--s4)}
  .modal{max-width:640px;border-radius:var(--r-lg)}
  .modalbtns>*{flex:0 0 auto}
}

/* ============================================================ 12. EKRANY LOGOWANIA */
.auth{min-height:calc(100dvh - 120px);display:flex;align-items:center;justify-content:center;
  padding:var(--s4) var(--s3) var(--s6)}
.auth .card{width:100%;max-width:430px;margin:0;padding:var(--s5)}
.auth h2{font-size:22px;margin-bottom:var(--s2)}
.auth label{margin-bottom:var(--s3)}
.auth ul{margin:var(--s1) 0;padding-left:18px;color:var(--err);font-size:13px}
/* wiersze domyślnego form theme Symfony (rejestracja): label + input jako rodzeństwo w <div> */
.auth form>div{margin-bottom:var(--s3)}
.auth form>div>label{margin-bottom:var(--s1)}
.help-text,.form-help{color:var(--ink-3);font-size:12.5px;margin:var(--s1) 0 0}

/* ============================================================ 13. OD TABLETU W GÓRĘ */
@media(min-width:760px){
  .appbar{position:sticky;top:0}
  .subbar{top:var(--appbar-h,0px)}
  body{font-size:15px}
  .wrap{padding:var(--s5) var(--s4) var(--s6)}
  .appbar__top{padding:var(--s3) var(--s4)}
  .nav{padding:0 var(--s4) var(--s3)}
  .brand__sub{display:inline}
  .who{display:block}
  .picker__label{display:inline}
  .subbar__in,main{padding-left:var(--s4);padding-right:var(--s4)}
  h1{font-size:21px}h2{font-size:18px}
}
@media(min-width:1040px){
  .appbar__top{padding-bottom:var(--s3)}
  .appbar{display:flex;flex-direction:column}
  .appbar__top{width:100%}
  .nav{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}