/* ============================================================
   PogodaCMS — motyw "Enterprise"
   Jasny, precyzyjny interfejs klasy korporacyjnej.
   Referencje: terminale danych finansowych, panele SaaS klasy premium.
   Zasady: dużo bieli, cienkie linie, cyfry tabelaryczne, warstwowe cienie,
   powściągliwy granat jako kolor marki, animacje wyłącznie funkcjonalne.
   ============================================================ */

:root{
  /* ---- powierzchnie ---- */
  --bg:#f4f6fa;              /* tło aplikacji */
  --bg-alt:#eef1f7;          /* pasy sekcji */
  --panel:#ffffff;           /* karty */
  --panel-2:#fafbfd;         /* nagłówki tabel, pola */
  --line:#e3e8ef;            /* linie 1 px */
  --line-2:#cfd7e3;          /* linie mocniejsze */

  /* ---- tekst ---- */
  --ink:#0d1a2b;             /* nagłówki, liczby */
  --ink-2:#48586d;           /* treść */
  --ink-3:#7c8ba1;           /* etykiety, metadane */

  /* ---- marka i dane ---- */
  --brand:#12326b;           /* granat korporacyjny */
  --brand-2:#1d4ed8;         /* akcent interaktywny */
  --brand-soft:#eaf0fb;
  --c1:#1d4ed8;              /* seria 1 — niebieski */
  --c2:#0f766e;              /* seria 2 — morski */
  --c3:#6d28d9;              /* seria 3 — fiolet */
  --c4:#b45309;              /* seria 4 — bursztyn */
  --c5:#be123c;              /* seria 5 — karmin */
  --c6:#64748b;              /* seria 6 — grafit */
  --ok:#0f766e;
  --warn:#b45309;
  --err:#be123c;

  /* ---- cienie warstwowe ---- */
  --sh-1:0 1px 2px rgba(13,26,43,.06), 0 1px 1px rgba(13,26,43,.04);
  --sh-2:0 1px 3px rgba(13,26,43,.07), 0 6px 16px -8px rgba(13,26,43,.14);
  --sh-3:0 2px 6px rgba(13,26,43,.08), 0 18px 44px -22px rgba(13,26,43,.28);

  --r:10px; --r-sm:7px; --r-lg:14px;
  --maxw:1320px;
  --ease:cubic-bezier(.2,.6,.3,1);
}

/* Tryb nocny — dla dyżurnych i serwerowni. Nie jest domyślny. */
html[data-theme="dark"]{
  --bg:#0d1522; --bg-alt:#111b2b; --panel:#131f31; --panel-2:#182740;
  --line:#22344f; --line-2:#31486a;
  --ink:#eaf0f8; --ink-2:#a9bcd4; --ink-3:#7189a6;
  --brand:#dbe6fb; --brand-2:#6aa2ff; --brand-soft:#17263d;
  --c1:#6aa2ff; --c2:#3fbfae; --c3:#a78bfa; --c4:#e0a340; --c5:#f26d8b; --c6:#93a5bd;
  --ok:#3fbfae; --warn:#e0a340; --err:#f26d8b;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 8px rgba(0,0,0,.45);
  --sh-3:0 20px 44px -22px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.018em;color:var(--ink);font-weight:650}
h1{font-size:clamp(1.7rem,2.7vw,2.3rem)}
h2{font-size:clamp(1.25rem,1.9vw,1.6rem)}
h3{font-size:1.05rem}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* delikatna siatka w tle — sygnał „narzędzie pomiarowe", nie „strona firmowa" */
.aurora{position:fixed;inset:0;z-index:-2;background:var(--bg);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;opacity:.5;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%)}
.aurora span{display:none}
.grain{display:none}

/* ============================ NAWIGACJA ============================ */
.nav{position:sticky;top:0;z-index:60;background:var(--panel);
  border-bottom:1px solid var(--line);transition:box-shadow .2s}
.nav.scrolled{box-shadow:var(--sh-2)}
.nav-in{display:flex;align-items:center;gap:22px;height:62px;max-width:1720px;margin:0 auto;padding:0 28px}

.logo{display:flex;align-items:center;gap:11px;white-space:nowrap;color:var(--ink);font-weight:700;
  letter-spacing:-.02em;font-size:1.02rem}
.logo:hover{text-decoration:none}
.logo .mark{width:32px;height:32px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--brand);color:#fff;font-size:14px;box-shadow:var(--sh-1)}
.logo small{display:block;font-size:10px;font-weight:600;color:var(--ink-3);letter-spacing:.1em;
  text-transform:uppercase;margin-top:1px}

.menu{display:flex;gap:1px;margin-left:auto;align-items:center;list-style:none;padding:0;margin-block:0;
  flex:0 0 auto}
.menu>li{position:relative;display:flex;align-items:center}
/* nowrap trzyma strzałkę podmenu w jednej linii z etykietą — bez tego pozycje
   z dłuższą nazwą łamały się na dwie linie i całe menu przestawało być równe */
.menu>li>a{display:flex;align-items:center;white-space:nowrap;
  padding:8px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;line-height:1.2;
  color:var(--ink-2);transition:background .15s,color .15s}
.menu>li>a:hover{color:var(--ink);background:var(--bg-alt);text-decoration:none}
.menu>li.on>a{color:var(--brand);background:var(--brand-soft);font-weight:600}
.menu>li.has>a::after{content:"";flex:0 0 auto;width:4px;height:4px;margin-left:7px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.55}
.submenu{position:absolute;top:calc(100% + 5px);left:0;min-width:238px;padding:6px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-3);list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.16s var(--ease)}
.menu>li:hover .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:block;padding:7px 11px;border-radius:var(--r-sm);font-size:13.5px;color:var(--ink-2)}
.submenu a:hover{background:var(--bg-alt);color:var(--ink);text-decoration:none}

/* Pozycje logowania w rozwijanym menu — potrzebne tylko wtedy, gdy przyciski
   z paska nie mieszczą się w szerokości ekranu. */
.menu>li.menu-auth{display:none}
/* Pozycja „Więcej” zbiera zakładki, które nie mieszczą się na pasku. Lepsze to
   niż schowanie całej nawigacji pod hamburgerem na szerokim monitorze. */
.nav-more>a{cursor:default}
/* Lista „Więcej” jest ostatnia na pasku, więc rozwijamy ją do lewej —
   inaczej wychodziłaby poza prawą krawędź ekranu. */
.nav-more .submenu{left:auto;right:0}
.nav-compact .nav-more{display:none!important}
.nav-act{display:flex;gap:8px;align-items:center;margin-left:10px;flex:0 0 auto}
.nav-act .btn{flex:0 0 auto}
/* Tryb ciasny — pierwszy krok przed schowaniem menu: przyciski tekstowe
   ustępują miejsca jednej ikonie konta, co uwalnia ok. 200 px na etykiety. */
.nav-act .nav-acct{display:none}
.nav-tight .nav-act .btn{display:none}
.nav-tight .nav-act .nav-acct{display:grid}
.nav-compact .nav-act .nav-acct{display:none}
.nav-tight .logo small{display:none}
.nav-tight .menu>li>a{padding:8px 8px;font-size:13.5px}
.logo{flex:0 0 auto}
.icon-btn{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:.15s;font-size:14px}
.icon-btn:hover{border-color:var(--line-2);color:var(--ink);background:var(--bg-alt)}
.burger{display:none}

/* ============================ PRZYCISKI ============================ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:var(--r-sm);
  font-weight:600;font-size:13.8px;border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:.16s var(--ease);white-space:nowrap;line-height:1.3}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--brand-2);color:#fff;box-shadow:var(--sh-2)}
.btn-ghost{background:var(--panel);border-color:var(--line-2);color:var(--ink-2)}
.btn-ghost:hover{background:var(--bg-alt);color:var(--ink);border-color:var(--ink-3)}
.btn-lg{padding:12px 24px;font-size:14.5px}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand-2);outline-offset:2px}

/* ============================ KARTY I SIATKI ============================ */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--sh-1);position:relative}
.card.hover{transition:box-shadow .2s var(--ease),border-color .2s}
.card.hover:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g6{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

section{padding:44px 0;position:relative}
section:nth-of-type(even){background:transparent}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px}
.lead{color:var(--ink-2);font-size:15px;max-width:72ch;margin-bottom:0}

/* ============================ HERO / PULPIT ============================ */
.hero{padding:32px 0 26px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}

.hero-now{padding:26px 28px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--sh-2);position:relative;overflow:hidden}
.hero-now::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--c2) 55%,var(--c4))}

.live{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ok);background:var(--panel-2);padding:4px 10px;border-radius:4px;
  border:1px solid var(--line)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}

.temp-big{font-size:clamp(3.4rem,7.5vw,5.4rem);font-weight:700;line-height:1;letter-spacing:-.045em;
  color:var(--ink);margin:12px 0 2px;font-variant-numeric:tabular-nums}
.temp-big sup{font-size:.3em;vertical-align:super;font-weight:500;color:var(--ink-3);margin-left:2px}
.temp-meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;color:var(--ink-2);font-size:13.5px;
  margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.temp-meta b{color:var(--ink);font-weight:650}

.mini-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:1px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.mini{outline:1px solid var(--line)}
.mini{padding:12px 14px;background:var(--panel);transition:background .15s}
.mini:hover{background:var(--panel-2)}
.mini .k{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:650}
.mini .v{font-size:1.28rem;font-weight:650;margin-top:3px;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;color:var(--ink)}
.mini .u{font-size:.6em;color:var(--ink-3);font-weight:500;margin-left:2px}
a.mini{color:inherit}a.mini:hover{text-decoration:none;background:var(--brand-soft)}

.hero-side{display:flex;flex-direction:column;gap:16px}
/* Karta z wykresem ma stalą wysokość — nigdy nie rośnie za treścią ani za płótnem. */
.chart-card{flex:none;display:flex;flex-direction:column;min-height:0}
.chart-card .pgc-box{flex:none;height:216px}

.trend{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:650;padding:2px 8px;
  border-radius:4px;border:1px solid var(--line);background:var(--panel-2)}
.trend.up{color:var(--c5)}
.trend.down{color:var(--c1)}
.trend.flat{color:var(--ink-3)}

/* Pudełko wykresu — wysokość ustala kontener, płótno nigdy jej nie zmienia.
   Bez tego Chart.js z maintainAspectRatio:false rozjeżdża stronę w nieskończoność. */
.pgc-box{position:relative;width:100%;min-width:0;overflow:hidden;
  height:260px;max-height:60vh;flex:none}
.pgc-box>canvas{position:absolute!important;top:0;left:0;
  width:100%!important;height:100%!important;display:block}
/* Bezpiecznik ostatniej szansy: nawet przy starym cache płótno nie rozjedzie strony. */
canvas{max-width:100%;max-height:70vh}

/* Komunikat zamiast pustej siatki wykresu. */
.chart-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;text-align:center;padding:18px;color:var(--ink-2);font-size:14px;
  font-weight:600;background:var(--panel-2);border-radius:var(--r-sm);border:1px dashed var(--line-2)}
.chart-empty span{font-weight:400;font-size:12.5px;color:var(--ink-3);max-width:38ch}

/* ============================ KAFELKI KPI ============================ */
.tile{padding:18px 20px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--sh-1);position:relative;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.tile:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}
.tile .bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.tile.in .bar{transform:scaleY(1)}
.tile .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:700}
.tile .v{font-size:1.85rem;font-weight:680;margin:7px 0 2px;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.tile .s{font-size:12.5px;color:var(--ink-3)}

/* ============================ KOMPAS ============================ */
.compass{width:132px;height:132px;margin:0 auto;position:relative}
.compass svg{width:100%;height:100%;overflow:visible}
.compass .needle{transform-origin:50% 50%;transition:transform 1s var(--ease)}
.compass .ring{fill:var(--panel-2);stroke:var(--line-2);stroke-width:1}
.compass .tick{stroke:var(--ink-3);stroke-width:1;opacity:.45}
.compass .lab{fill:var(--ink-3);font-size:10px;font-weight:700;text-anchor:middle}

/* ============================ PROGNOZA ============================ */
.fc-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-1)}
.fc-day{padding:16px 12px;background:var(--panel);text-align:center;transition:background .15s}
.fc-day:hover{background:var(--brand-soft)}
.fc-day .d{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:650}
.fc-day .ico{font-size:24px;margin:8px 0 5px;line-height:1;filter:saturate(.85)}
.fc-day .hi{font-size:1.3rem;font-weight:680;font-variant-numeric:tabular-nums;color:var(--ink)}
.fc-day .lo{font-size:.95rem;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
.fc-day .rain{font-size:11.5px;color:var(--c1);margin-top:5px;font-weight:600}

/* ============================ TABELE ============================ */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  box-shadow:var(--sh-1)}
table.data{width:100%;border-collapse:collapse;font-size:13.8px}
table.data th{text-align:left;padding:10px 14px;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3);font-weight:700;border-bottom:1px solid var(--line-2);white-space:nowrap;
  background:var(--panel-2);position:sticky;top:0;z-index:1}
table.data td{padding:9px 14px;border-bottom:1px solid var(--line);color:var(--ink-2)}
table.data tbody tr:nth-child(even) td{background:var(--panel-2)}
table.data tbody tr:hover td{background:var(--brand-soft)}
table.data td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
table.data tr:last-child td{border-bottom:0}
.hot{color:var(--c5)} .cold{color:var(--c1)} .pos{color:var(--ok)} .warnc{color:var(--warn)}

/* ============================ ANIMACJE (powściągliwe) ============================ */
[data-rv]{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
[data-rv].in{opacity:1;transform:none}
[data-rv][data-rv="left"],[data-rv][data-rv="scale"]{transform:translateY(10px)}
/* Kaskada — elementy w jednym rzędzie pojawiają się jeden po drugim, nie hurtem. */
[data-rv].in{transition-delay:var(--rvd,0ms)}

/* Delikatna poświata przesuwająca się po górnej krawędzi karty głównej.
   Sygnalizuje, że dane są żywe, bez migania i bez odciągania wzroku od liczb. */
.hero-now::after{content:"";position:absolute;left:0;top:0;height:3px;width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  animation:sweep 5.5s var(--ease) infinite;pointer-events:none}
@keyframes sweep{0%{transform:translateX(-40%)}55%,100%{transform:translateX(330%)}}

/* Kafelki lekko się unoszą — ruch na tyle mały, żeby nie rozpraszał. */
.tile{transition:box-shadow .2s,border-color .2s,transform .25s var(--ease)}
.tile:hover{transform:translateY(-2px)}
.mini{transition:background .15s,transform .2s var(--ease)}
.mini:hover{transform:translateY(-1px)}
.fc-day{transition:background .15s,transform .2s var(--ease),box-shadow .2s}
.fc-day:hover{transform:translateY(-2px);box-shadow:var(--sh-1)}

/* Liczniki: w trakcie doliczania cyfry są przygaszone, na końcu wskakują na ostrość. */
.counting{opacity:.72}

/* Krótki błysk na wartości, która właśnie się odświeżyła. */
.flash{animation:flash 1.2s var(--ease)}
@keyframes flash{0%{background:var(--brand-soft)}100%{background:transparent}}

/* Zamiast pustego prostokąta w miejscu wykresu — poświata ładowania. */
.pgc-box.loading::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--panel) 30%,var(--panel-2) 50%,var(--panel) 70%);
  background-size:220% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* Ikony prognozy oddychają — bardzo powoli, to ma być detal, nie efekt. */
.fc-day .ico{animation:float 6s ease-in-out infinite}
.fc-day:nth-child(2n) .ico{animation-delay:-1.5s}
.fc-day:nth-child(3n) .ico{animation-delay:-3s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Podkreślenie nagłówka sekcji dorysowuje się, gdy sekcja wjedzie w kadr. */
.sec-head h2{position:relative}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:-7px;height:2px;width:38px;
  background:linear-gradient(90deg,var(--brand),var(--c2));transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease) .1s}
.sec-head.in h2::after{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  [data-rv]{opacity:1;transform:none}
  .sec-head h2::after{transform:scaleX(1)}
  .hero-now::after{display:none}
}

/* ==================== PODZAKŁADKI (panel użytkownika) ====================
   Segmentowany przełącznik zamiast dwóch gołych odnośników. Aktywna pozycja
   jest „wyniesiona” — tło karty i cień — więc od razu widać, gdzie się jest,
   bez czytania. Całość przewija się w poziomie na wąskim ekranie zamiast
   łamać na dwie linie. */
.subnav{display:flex;gap:4px;padding:5px;margin:0 0 22px;border-radius:calc(var(--r-sm) + 5px);
  background:var(--panel-2);border:1px solid var(--line);width:max-content;max-width:100%;
  overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:9px 16px;border-radius:var(--r-sm);font-size:14px;font-weight:550;
  color:var(--ink-2);transition:background .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease)}
.subnav a:hover{color:var(--ink);background:var(--panel);text-decoration:none}
.subnav a.on{background:var(--panel);color:var(--brand);font-weight:650;box-shadow:var(--sh-1)}
.subnav a .ic{font-size:15px;line-height:1;opacity:.85}
.subnav a.on .ic{opacity:1}
.subnav a .badge-n{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand)}
@media(max-width:520px){.subnav{width:100%}.subnav a{padding:9px 12px;font-size:13.5px}}

/* ============================ REKLAMY ============================ */
.ad{margin:24px 0;display:flex;justify-content:center}
.ad-box{position:relative;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);
  background:var(--panel);max-width:100%}
.ad-box::after{content:"reklama";position:absolute;top:4px;right:6px;font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);background:var(--panel);padding:1px 5px;border-radius:3px;
  border:1px solid var(--line)}

/* ============================ KOMUNIKATY ============================ */
.alertbar{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-radius:var(--r-sm);
  margin-bottom:12px;font-size:13.8px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--warn);box-shadow:var(--sh-1);color:var(--ink-2)}
.alertbar .ic{font-size:16px;flex:0 0 auto;line-height:1.4}
.alertbar strong{color:var(--ink)}
.alertbar.s1{border-left-color:var(--warn)}
.alertbar.s2{border-left-color:#c2410c}
.alertbar.s3{border-left-color:var(--err);background:color-mix(in srgb,var(--err) 4%,var(--panel))}

.msg{padding:12px 16px;border-radius:var(--r-sm);margin-bottom:18px;font-size:13.8px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--ink-3);color:var(--ink-2)}
.msg strong{color:var(--ink)}
.msg.success{border-left-color:var(--ok)}
.msg.error{border-left-color:var(--err)}
.msg.warning{border-left-color:var(--warn)}
.msg.info{border-left-color:var(--brand-2)}
.msg ul{margin:0;padding-left:18px}

/* ============================ FORMULARZE ============================ */
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:650;color:var(--ink-2);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:9px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font:inherit;font-size:14px;
  transition:border-color .15s,box-shadow .15s}
.field input:hover,.field select:hover{border-color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand-2);
  box-shadow:0 0 0 3px var(--brand-soft)}
.field input:disabled{background:var(--bg-alt);color:var(--ink-3)}
.field small{display:block;margin-top:5px;font-size:12px;color:var(--ink-3)}
.field.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formcard{max-width:660px;margin:0 auto}

.token-box{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;word-break:break-all;
  padding:12px 14px;border-radius:var(--r-sm);background:var(--panel-2);border:1px solid var(--line);
  line-height:1.65;color:var(--ink)}
pre.code{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--r-sm);padding:15px 18px;overflow:auto;font-size:12.5px;line-height:1.65;
  color:var(--ink-2);font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;margin:0}
pre.code .s{color:var(--c2);font-weight:600}
code.inl{background:var(--panel-2);border:1px solid var(--line);padding:1px 6px;border-radius:4px;
  font-size:.88em;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--ink)}

/* ============================ OKRUSZKI, PAGINACJA ============================ */
.crumbs{font-size:12.5px;color:var(--ink-3);margin-bottom:16px;display:flex;gap:7px;flex-wrap:wrap;
  align-items:center}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--brand-2)}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}
.pager a,.pager span{padding:7px 13px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--panel);font-size:13.5px;color:var(--ink-2)}
.pager a:hover{border-color:var(--brand-2);color:var(--brand-2);text-decoration:none}
.pager .cur{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:650}

/* ============================ STOPKA ============================ */
footer{border-top:1px solid var(--line);margin-top:52px;padding:44px 0 28px;background:var(--panel)}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:32px}
footer h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);margin-bottom:12px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:8px}
footer a{color:var(--ink-2);font-size:13.5px}
footer a:hover{color:var(--brand-2);text-decoration:underline}
/* Opis pod logo nie jest odnośnikiem i nie może go udawać — kolor ustawiamy wprost,
   bo dziedziczenie po globalnej regule dla <a> potrafiło go zabarwić na niebiesko. */
.foot-brand{margin-bottom:14px}
.foot-desc{color:var(--ink-3)!important;font-size:14px;max-width:36ch;text-decoration:none}
.foot-desc a{color:var(--brand-2)}
.foot-credit{margin-top:30px;padding:14px 18px;border-radius:var(--r-sm);background:var(--panel-2);
  border:1px solid var(--line);display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-2)}
.foot-credit a{font-size:inherit;color:var(--brand-2);font-weight:650}
.foot-credit .ci-mark{color:var(--brand-2);font-size:16px;line-height:1;
  animation:float 5s ease-in-out infinite}

.foot-bot{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}

/* ============================ RESPONSYWNOŚĆ ============================ */
@media(max-width:1400px){
  .menu>li>a{padding:8px 9px;font-size:13.5px}
  .nav-in{gap:14px}
  .logo small{display:none}
}
@media(max-width:1240px){
  .menu>li>a{padding:8px 7px;font-size:13px}
  .nav-act .btn{padding:8px 13px;font-size:13px}
}
@media(max-width:1060px){
  .hero-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* Tryb kompaktowy nawigacji.
   Nie zgadujemy szerokości ekranu — skrypt mierzy, czy logo, menu i przyciski
   mieszczą się w pasku, i dopiero wtedy przełącza na menu podręczne.
   Dzięki temu działa niezależnie od długości nazwy stacji i etykiet. */
.nav-compact .burger{display:grid}
.nav-compact .menu{position:fixed;inset:62px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
  padding:10px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--sh-3);
  max-height:calc(100vh - 62px);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s var(--ease)}
.nav-compact .menu.open{opacity:1;visibility:visible;transform:none}
.nav-compact .menu>li{display:block}
.nav-compact .menu>li>a{padding:11px 12px;font-size:15px}
.nav-compact .menu>li.has>a::after{margin-left:auto}
.nav-compact .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
  border:0;background:transparent;padding:0 0 6px 14px}
.nav-compact .menu>li.menu-auth{display:block;border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.nav-compact .menu-auth + .menu-auth{border-top:0;margin-top:0;padding-top:0}
.nav-compact .menu-auth a{color:var(--brand)!important;font-weight:600}
.nav-compact .logo small{display:block}

/* Telefony i wąskie tablety — zmiany dotyczą już treści, nie tylko nawigacji. */
@media(max-width:860px){
  .wrap{padding:0 18px}
  .nav-act .btn{display:none}
  .nav-in{gap:12px}
  section{padding:32px 0}
  .hero-now{padding:20px}
  .field.row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}

/* ============================ DRUK ============================ */
@media print{
  .nav,.nav-act,footer,.ad,.btn{display:none!important}
  body{background:#fff}
  .card,.tbl-wrap{box-shadow:none;border-color:#ccc}
  [data-rv]{opacity:1!important;transform:none!important}
}

/* ============================ BANER COOKIES ============================ */
.ck-wrap{position:fixed;left:0;right:0;bottom:0;z-index:900;padding:16px;display:flex;justify-content:center;
  pointer-events:none}
.ck{pointer-events:auto;max-width:1060px;width:100%;display:flex;gap:18px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);padding:20px 22px;
  box-shadow:0 20px 60px rgba(12,24,50,.18),var(--sh-2);
  transform:translateY(120%);opacity:0;animation:ckIn .55s cubic-bezier(.22,1,.36,1) .45s forwards}
@keyframes ckIn{to{transform:translateY(0);opacity:1}}
.ck-wrap.hide .ck{animation:ckOut .35s cubic-bezier(.4,0,1,1) forwards}
@keyframes ckOut{to{transform:translateY(120%);opacity:0}}

/* trzy kropki „ciasteczka” — drobny ruch zamiast statycznej ikonki */
.ck-ico{flex:none;width:44px;height:44px;border-radius:50%;background:var(--brand-soft);
  border:1px solid var(--line-2);position:relative}
.ck-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--brand-2);opacity:.85;
  animation:ckDot 2.6s ease-in-out infinite}
.ck-dot:nth-child(1){top:12px;left:12px}
.ck-dot:nth-child(2){top:23px;left:25px;animation-delay:-.9s}
.ck-dot:nth-child(3){top:28px;left:13px;animation-delay:-1.8s}
@keyframes ckDot{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.35);opacity:.45}}

.ck-body{flex:1;min-width:0}
.ck-body h3{font-size:16px;margin:0 0 6px}
.ck-body p{font-size:13.5px;color:var(--ink-2);margin:0 0 6px;max-width:78ch}
.ck-note{font-size:12px;color:var(--ink-3)}
.ck-actions{flex:none;display:flex;flex-direction:column;gap:8px;min-width:190px}
.ck-actions .btn{width:100%;justify-content:center}

@media(max-width:820px){
  .ck{flex-direction:column;gap:14px;padding:18px}
  .ck-actions{flex-direction:row;width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  .ck{animation:none;transform:none;opacity:1}
  .ck-dot{animation:none}
}

/* ============================ ZAPROSZENIE DO SIECI CZUJNIKÓW ============================ */
.netcall{padding-top:8px}
.net-box{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:center;
  background:linear-gradient(135deg,var(--panel) 0%,var(--brand-soft) 100%);
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:30px 34px;box-shadow:var(--sh-2);
  position:relative;overflow:hidden}
.net-box::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--c2) 50%,var(--c3))}
.net-copy h2{margin-bottom:10px}
.net-copy .lead{margin-bottom:20px}

.net-nums{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:20px}
.net-nums b{display:block;font-size:1.9rem;font-weight:700;letter-spacing:-.03em;color:var(--brand);
  font-variant-numeric:tabular-nums;line-height:1.1}
.net-nums span{font-size:12.5px;color:var(--ink-3)}
.net-first{font-size:14px;font-weight:600;color:var(--c2);margin-bottom:16px}
.net-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.net-note{font-size:12.5px;color:var(--ink-3);margin:0;max-width:64ch}

/* Pinezki pulsujące jak sygnał z czujników — bez obrazka, sama geometria. */
.net-viz{position:relative;height:210px;border-radius:var(--r);background:var(--panel);
  border:1px solid var(--line);overflow:hidden;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px}
.net-viz .pin{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--brand-2);
  box-shadow:0 0 0 0 rgba(29,78,216,.45);animation:ping 3.2s ease-out infinite}
.net-viz .p1{top:22%;left:18%} .net-viz .p2{top:56%;left:34%;animation-delay:-.5s}
.net-viz .p3{top:34%;left:58%;animation-delay:-1.1s;background:var(--c2)}
.net-viz .p4{top:70%;left:66%;animation-delay:-1.7s;background:var(--c4)}
.net-viz .p5{top:16%;left:78%;animation-delay:-2.3s}
.net-viz .p6{top:78%;left:22%;animation-delay:-2.8s;background:var(--c5)}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(29,78,216,.45)}
  70%{box-shadow:0 0 0 22px rgba(29,78,216,0)}
  100%{box-shadow:0 0 0 0 rgba(29,78,216,0)}
}

@media(max-width:900px){
  .net-box{grid-template-columns:1fr;padding:24px}
  .net-viz{height:150px;order:-1}
}
@media(prefers-reduced-motion:reduce){ .net-viz .pin{animation:none} }

/* Numer wersji w stopce — pomocny przy zgłoszeniach, nienachalny w odbiorze. */
.foot-ver{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11.5px;
  padding:1px 7px;border-radius:20px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--ink-3);white-space:nowrap}

/* ============================ ZAKŁADKI ZASTOSOWAŃ API ============================ */
.uc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 26px;padding-bottom:2px}
.uc-tab{appearance:none;border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);
  font:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:20px;cursor:pointer;
  transition:.16s var(--ease);white-space:nowrap}
.uc-tab:hover{border-color:var(--ink-3);color:var(--ink);background:var(--bg-alt)}
.uc-tab.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--sh-1)}
.uc-tab:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}

.uc-panel[hidden]{display:none}
/* Zmiana zakładki nie może wyglądać jak przeskok — treść wjeżdża delikatnie. */
.uc-panel.on{animation:ucIn .32s var(--ease)}
@keyframes ucIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.uc-panel pre.code{min-height:230px}

@media(max-width:640px){
  .uc-tabs{gap:5px}
  .uc-tab{font-size:12.5px;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){ .uc-panel.on{animation:none} }