/* @-Z, kierunek „Przyrząd”: ciepła czerń, kość słoniowa, mosiądz; glina tylko dla stopu i błędu */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@property --mx{syntax:"<percentage>";inherits:true;initial-value:20%}
@property --my{syntax:"<percentage>";inherits:true;initial-value:0%}

:root{
  --ink:#0E0D0C; --bone:#F0EADD; --brass:#C9A45C; --clay:#D9593B;
  --l-s-1:rgb(14 13 12 / .045); --l-line:rgb(14 13 12 / .12); --l-line-2:rgb(14 13 12 / .38);
  --l-tx-2:rgb(14 13 12 / .72); --l-tx-3:rgb(14 13 12 / .64);

  --f-display:"Bricolage Grotesque",system-ui,sans-serif;
  --f-text:"Hanken Grotesk",system-ui,sans-serif;
  --t-xl:clamp(36px,5.2vw,72px); --t-l:clamp(30px,4.4vw,56px); --t-m:22px; --t-lead:clamp(18px,1.6vw,22px);
  --t-body:16px; --t-small:14px; --t-label:13px; --t-code:clamp(40px,11.5vw,96px);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --gut:12px; --edge:20px; --sec:72px;
  --r-s:8px; --r-m:12px; --r-l:20px; --r-xl:28px;

  --edge-hi:inset 0 1px 0 rgb(255 245 225 / .07);
  --sh-1:0 1px 2px rgb(0 0 0 / .4),0 12px 24px -12px rgb(0 0 0 / .55);
  --sh-2:0 2px 4px rgb(0 0 0 / .35),0 32px 64px -24px rgb(0 0 0 / .7);
  --light:radial-gradient(480px circle at var(--mx) var(--my),rgb(201 164 92 / .08),transparent 70%);
  --ease:cubic-bezier(.2,.8,.2,1); --d-fast:150ms; --d-mid:240ms; --d-slow:480ms;
  --focus-dark:0 0 0 2px var(--ink),0 0 0 4px var(--brass);
  --focus-light:0 0 0 2px var(--bone),0 0 0 4px var(--ink);
}
@media (min-width:768px){:root{--gut:20px;--edge:40px;--sec:112px}}
@media (min-width:1100px){:root{--gut:24px;--edge:64px;--sec:144px}}

/* motyw ciemny (domyślny) i jasny: te same komponenty, inne wartości */
:root,.d{
  --bg:var(--ink); --tx:var(--bone); --tx-2:rgb(240 234 221 / .70); --tx-3:rgb(240 234 221 / .58);
  --s-1:rgb(240 234 221 / .04); --s-2:rgb(240 234 221 / .07); --s-3:rgb(240 234 221 / .11);
  --line:rgb(240 234 221 / .10); --line-2:rgb(240 234 221 / .18);
  --surface:linear-gradient(180deg,rgb(240 234 221 / .065),rgb(240 234 221 / .025));
  --card-edge:var(--edge-hi); --card-sh:var(--sh-1);
  --btn-bg:var(--brass); --btn-tx:var(--ink); --btn-edge:transparent;
  --focus:var(--focus-dark); --focus-line:var(--brass); --bar-track:var(--line);
}
.l{
  --bg:var(--bone); --tx:var(--ink); --tx-2:var(--l-tx-2); --tx-3:var(--l-tx-3);
  --s-1:var(--l-s-1); --s-2:rgb(14 13 12 / .06); --s-3:rgb(14 13 12 / .10);
  --line:var(--l-line); --line-2:var(--l-line-2); --surface:var(--l-s-1);
  --card-edge:0 0 0 0 transparent; --card-sh:none;
  --btn-bg:var(--ink); --btn-tx:var(--bone); --btn-edge:var(--brass);
  --focus:var(--focus-light); --focus-line:var(--ink); --bar-track:var(--l-line-2);
  background:var(--bg); color:var(--tx);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--tx);font:400 var(--t-body)/1.6 var(--f-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
[hidden]{display:none!important}
body::before{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img,svg,video{display:block;max-width:100%}
.skip{position:absolute;left:12px;top:-60px;background:var(--bone);color:var(--ink);padding:12px 16px;border-radius:var(--r-s);z-index:60;font-weight:600}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid transparent;box-shadow:var(--focus)}

/* typografia */
h1,h2,h3,.disp{font-family:var(--f-display)}
h1{font-weight:500;font-size:var(--t-xl);line-height:1.05;letter-spacing:-.03em;font-variation-settings:"wdth" 100}
h2{font-weight:500;font-size:var(--t-l);line-height:1.08;letter-spacing:-.025em}
h3{font-weight:600;font-size:var(--t-m);line-height:1.2;letter-spacing:-.01em}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--tx-2);max-width:34em}
.et{display:block;font:600 var(--t-label)/1.2 var(--f-text);letter-spacing:.01em;color:var(--tx-3)}
.txt{max-width:62ch;color:var(--tx-2)}
.num{font-variant-numeric:tabular-nums}

/* znak */
.znak{display:inline-flex;align-items:center;color:var(--tx);text-decoration:none;border-radius:var(--r-s)}
.znak svg{height:28px;width:63px}
.zn-k{stroke:currentColor}
.zn-m{stroke:var(--zm,var(--brass))}
.l .znak{--zm:var(--ink)}

/* przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--s-1);color:var(--tx);font:600 16px/1.2 var(--f-text);text-align:center;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:background var(--d-fast),filter var(--d-fast),transform var(--d-fast);-webkit-tap-highlight-color:transparent}
.btn-p{background:var(--btn-bg);color:var(--btn-tx);border:0;border-bottom:2px solid var(--btn-edge)}
.btn-stop{background:var(--clay);color:var(--ink);border:0}
.btn-sm{min-height:44px;padding:8px 18px;font-size:15px}
.btn-xs{min-height:40px;padding:6px 16px;font-size:14px}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--s-3);color:var(--tx-3);cursor:default;border-color:transparent}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--s-2)}
  .btn-p:hover{background:var(--btn-bg);filter:brightness(1.08);box-shadow:var(--card-sh)}
  .btn-stop:hover{background:var(--clay);filter:brightness(1.08)}
  .btn:disabled:hover{background:var(--s-3);filter:none;box-shadow:none}
}
.btn.laduje::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:40%;background:currentColor;opacity:.6;animation:linia 1s var(--ease) infinite}
@keyframes linia{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.btn-blok{width:100%}

/* pola */
.pole{display:block;width:100%;height:52px;padding:0 16px;border-radius:var(--r-s);background:var(--s-2);border:1px solid var(--line-2);color:var(--tx);font:400 16px var(--f-text);transition:border-color var(--d-fast)}
.pole:focus{border-color:var(--focus-line)}
.pole[aria-invalid="true"]{border-color:var(--clay)}
.pole:disabled{opacity:.5}
.grupa{display:grid;gap:8px}
.grupa+.grupa{margin-top:20px}
.blad{margin-top:16px;padding:2px 0 2px 12px;border-left:3px solid var(--clay);font-size:var(--t-small);line-height:1.5;color:var(--tx)}

/* karty */
.karta{position:relative;padding:24px;border-radius:var(--r-l);background:var(--light),var(--surface);border:1px solid var(--line);box-shadow:var(--card-edge),var(--card-sh);transition:--mx 120ms linear,--my 120ms linear}
.l .karta{background:var(--l-s-1)}
@media (min-width:768px){.karta{padding:32px}}

/* odczyt stanu: kropka + słowo */
.stan{display:inline-flex;align-items:center;gap:8px;font:500 13px/1.2 var(--f-text);color:var(--tx-2);min-height:32px;padding:0 10px;border-radius:var(--r-s)}
.stan::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--tx-3);flex:none}
.stan.ok::before,.stan.live::before{background:var(--brass);box-shadow:none}
.stan.live::before{animation:puls 1.6s ease-in-out infinite}
.stan.bad{color:var(--clay)}
.stan.bad::before{background:var(--clay);box-shadow:none}
.l .stan.bad{color:var(--ink);box-shadow:inset 3px 0 0 var(--clay);border-radius:0}
.stan.live::before{background:var(--brass)}
@keyframes puls{50%{opacity:.35}}

/* kod: cyfry w stałych komórkach */
.kod-duzy{display:flex;justify-content:center;font:400 var(--t-code)/1 var(--f-display);letter-spacing:0;color:var(--bone)}
.kod-grupa{display:flex}
.kod-grupa+.kod-grupa{margin-left:.72em}
.cyfra{display:block;width:.72em;text-align:center}
.kod-karta{overflow:hidden}
.kod-karta .et{margin-bottom:var(--sp-5)}
.kod-duzy.gasnie{opacity:.4}
.linia{height:2px;margin-top:var(--sp-5);background:var(--bar-track);overflow:hidden}
.linia i{display:block;height:100%;background:var(--brass);transform-origin:left;transform:scaleX(1)}
.kod-dol{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:var(--sp-4);font:500 15px/1.3 var(--f-text);color:var(--tx-2);font-variant-numeric:tabular-nums}
.kod-karta.krotko .linia i{background:var(--clay)}
.kod-karta.krotko .odl{color:var(--bone);box-shadow:inset 3px 0 0 var(--clay);padding-left:10px}

/* kod weryfikacji połączenia */
.weryf{display:grid;gap:6px;padding:20px 24px;border-radius:var(--r-l);background:var(--s-2)}
.weryf-cyfry{display:flex;font:500 clamp(28px,8vw,40px)/1 var(--f-display);color:var(--tx);letter-spacing:0}
.weryf-cyfry .kod-grupa+.kod-grupa{margin-left:.5em}
.weryf-cyfry .cyfra{width:.66em}
.weryf-opis{font-size:var(--t-small);line-height:1.5;color:var(--tx-2);max-width:46ch}

/* ===== STRONA GŁÓWNA ===== */
.w{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--edge)}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.top nav{display:none}
.top-tel{font:600 16px/1 var(--f-text);text-decoration:none;min-height:48px;display:inline-flex;align-items:center;padding:0 4px;border-radius:var(--r-s)}
.top-akcje{display:none;gap:12px;align-items:center}
.hero{padding-bottom:var(--sp-8)}
.hero-g{display:grid;gap:var(--sp-7);padding-top:var(--sp-7)}
.hero h1{max-width:14em;text-wrap:balance}
p,.lead,summary{text-wrap:pretty}
.hero .lead{margin-top:var(--sp-5)}
.cta{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
.hero .karta{align-self:start}
.przyklad{display:flex;justify-content:space-between;gap:12px;margin-bottom:var(--sp-5)}
.przyklad .et{margin:0}
.kod-karta .opis{margin-top:var(--sp-4);font-size:var(--t-small);line-height:1.5;color:var(--tx-2)}

.sek{padding-block:var(--sec)}
.sek h2{margin-bottom:var(--sp-6)}
.sek-l{background:var(--bone)}
.sek-d{background:var(--ink)}
.sek-d+.sek-d{border-top:1px solid var(--line)}

.kroki{display:grid;gap:0}
.kroki li{display:grid;grid-template-columns:72px 1fr;gap:var(--sp-4);padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.kroki li:last-child{border-bottom:1px solid var(--line)}
.kroki .n{font:500 72px/.9 var(--f-display);letter-spacing:-.04em;color:var(--ink)}
.kroki h3{margin-bottom:var(--sp-2)}
.kroki p{font-size:18px;line-height:1.5;color:var(--tx-2);max-width:30em}
.sek-akcja{margin-top:var(--sp-6)}

.uslugi li{padding:var(--sp-5) 0;border-top:1px solid var(--line);min-height:72px}
.uslugi li:last-child{border-bottom:1px solid var(--line)}
.uslugi h3{font-size:clamp(24px,2.6vw,36px);letter-spacing:-.02em;font-weight:500}

.zasady{display:grid;gap:var(--sp-6)}
.zasady li{position:relative;padding-top:var(--sp-4)}
.zasady li::before{content:"";position:absolute;left:0;top:0;width:16px;height:2px;background:var(--brass)}
.zasady h3{font-size:19px;margin-bottom:6px}
.zasady p{color:var(--tx-2);max-width:40em}
.bezp-l{display:grid;gap:var(--sp-4);align-content:start}

.sek-nota{margin-top:var(--sp-5);font-size:18px;line-height:1.5;color:var(--tx)}
.faq{border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px 0;font:600 19px/1.3 var(--f-display);letter-spacing:-.01em;border-radius:var(--r-s)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--tx),var(--tx)) center/14px 2px no-repeat,linear-gradient(var(--tx),var(--tx)) center/2px 14px no-repeat;transition:transform var(--d-mid) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 32px 20px 0;color:var(--tx-2);max-width:48ch}
.kontakt-tel{display:inline-block;font:500 clamp(40px,10vw,96px)/1 var(--f-display);letter-spacing:-.035em;text-decoration:none;font-variant-numeric:tabular-nums;border-radius:var(--r-s)}
.kontakt-mail{display:inline-block;margin-top:var(--sp-5);font-size:var(--t-lead);color:var(--tx-2)}
.kontakt .txt{margin-top:var(--sp-5)}
.kontakt .cta{margin-top:var(--sp-6)}
footer.stopka .w{display:flex;flex-wrap:wrap;gap:4px 32px}
footer.stopka{padding:var(--sp-6) 0 calc(var(--sp-8) + 80px);border-top:1px solid var(--line);font-size:var(--t-small);color:var(--tx-3)}

.pasek{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px var(--edge) calc(6px + env(safe-area-inset-bottom));background:rgb(14 13 12 / .92);border-top:1px solid var(--line)}
.pasek .btn{min-height:52px}
.js .pasek{transform:translateY(110%);visibility:hidden;transition:transform var(--d-mid) var(--ease),visibility 0s var(--d-mid)}
.js .pasek.widac{transform:none;visibility:visible;transition:transform var(--d-mid) var(--ease)}

@media (min-width:768px){
  .cta{display:flex;flex-wrap:wrap}
  .pasek{display:none}
  footer.stopka{padding-bottom:var(--sp-6)}
  .top{min-height:80px}
  .top nav{display:flex;gap:28px;margin-left:auto;margin-right:20px}
  .top nav a{color:var(--tx-2);text-decoration:none;font-weight:500;min-height:44px;display:inline-flex;align-items:center;border-radius:var(--r-s)}
  .top nav a:hover{color:var(--tx)}
  .top-tel{display:none}
  .top-akcje{display:flex}
  .kroki{grid-template-columns:repeat(3,1fr);column-gap:var(--gut)}
  .kroki li{align-content:start;grid-template-columns:1fr;border-bottom:1px solid var(--line);padding:var(--sp-6) var(--sp-5) var(--sp-6) 0;gap:var(--sp-5)}
  .kroki .n{font-size:96px}
  .uslugi{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gut)}
  .uslugi li:nth-last-child(2){border-bottom:1px solid var(--line)}
  .uslugi li{padding:var(--sp-6) var(--sp-5) var(--sp-6) 0}
  .sek-g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
  .sek-g>.g-l{grid-column:1/6}
  .sek-g>.g-r{grid-column:7/13}
  .sek-g h2{margin-bottom:0}
}
@media (min-width:1100px){
  .hero{padding-bottom:var(--sp-9)}
  .hero-g{grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:center;padding-top:var(--sp-8)}
  .hero-g>div:first-child{grid-column:1/8}
  .hero .karta{grid-column:8/13;align-self:center;margin-top:0}
  .kod-karta .kod-duzy{font-size:clamp(30px,3.1vw,44px)}
}

/* ===== STRONA KLIENTA /pomoc/ ===== */
.p-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:0 var(--edge);max-width:760px;margin-inline:auto}
.p-main{max-width:760px;margin-inline:auto;padding:var(--sp-5) var(--edge) var(--sp-9)}
.p-stan{display:flex;justify-content:flex-end;margin-bottom:var(--sp-2)}
.etapy{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:var(--sp-6)}
.etapy li{display:grid;gap:8px;font:600 var(--t-label)/1.2 var(--f-text);color:var(--tx-3)}
.etapy li::before{content:"";height:2px;background:var(--bar-track)}
.etapy li.aktywny,.etapy li.zrobiony{color:var(--tx)}
.etapy li.aktywny::before,.etapy li.zrobiony::before{background:var(--ink);height:3px;margin-top:-1px}
.etapy li.zrobiony{color:var(--tx-2)}
.p-main section>h1{font-size:clamp(32px,8vw,48px);margin-bottom:var(--sp-3)}
.p-main .opis{color:var(--tx-2);max-width:34em;margin-bottom:var(--sp-5)}
.p-main .opis-komp{margin-top:calc(var(--sp-3) * -1);color:var(--tx)}
.kod-pole{position:relative;display:flex;justify-content:center;margin-top:8px;height:64px}
.kod-pole input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:text}
.kod-kom{display:flex;gap:6px;pointer-events:none}
.kod-kom .g{display:flex;gap:6px}
.kod-kom .g+.g{margin-left:14px}
.kod-kom .c{width:32px;height:64px;display:grid;place-items:center;border-radius:var(--r-s);background:var(--l-s-1);border:1px solid var(--l-line-2);font:500 36px/1 var(--f-display);color:var(--ink)}
.kod-kom .c.akt{border:2px solid var(--ink)}
@media (min-width:420px){.kod-kom .c{width:40px;font-size:40px}.kod-kom{gap:8px}.kod-kom .g{gap:8px}.kod-kom .g+.g{margin-left:20px}}
.kod-pole:has(input:focus-visible){outline:0}
.p-main form .btn{margin-top:var(--sp-5)}
.brak-kodu{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line);color:var(--tx-2);font-size:var(--t-small);line-height:1.5}
.brak-kodu a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);font-size:17px;text-underline-offset:3px}
.lista{display:grid;gap:12px;margin:var(--sp-5) 0}
.lista li{position:relative;padding-left:28px;line-height:1.5}
.lista li::before{content:"";position:absolute;left:0;top:.7em;width:16px;height:2px;background:var(--ink)}
.dwa{display:grid;gap:12px;margin-top:var(--sp-5)}
.dwa .btn{margin-top:0!important}
.wyspa{padding:24px;border-radius:var(--r-xl);background:var(--ink);box-shadow:var(--sh-2);display:grid;gap:var(--sp-5)}
.wyspa .stan{padding-left:0}
.wyspa .status-w{font:600 22px/1.2 var(--f-display);color:var(--bone);letter-spacing:-.01em}
.czat{display:grid;gap:12px}
.czat ol{display:flex;flex-direction:column;gap:10px;max-height:240px;min-height:96px;overflow:auto;padding-right:2px}
.czat ol:empty::before{content:"Wiadomości pojawią się tutaj.";color:var(--tx-3);font-size:var(--t-small)}
.czat li{max-width:85%;padding:10px 14px;font-size:15px;line-height:1.45;display:grid;gap:2px;overflow-wrap:anywhere}
.czat li time{font-size:13px;color:var(--tx-3)}
.czat li.ja{align-self:flex-end;background:rgb(201 164 92 / .16);border-radius:16px 16px 4px 16px}
.czat li.on{align-self:flex-start;background:var(--s-2);border-radius:16px 16px 16px 4px}
.czat form{display:grid;grid-template-columns:1fr auto;gap:8px}
.czat form .btn{min-height:52px;min-width:88px}
.p-stop{margin-top:4px}
@media (max-width:767px){
  #krok-trwa{padding-bottom:88px}
  #krok-trwa .p-stop{position:fixed;left:var(--edge);right:var(--edge);bottom:calc(8px + env(safe-area-inset-bottom));z-index:40;min-height:56px;margin:0;box-shadow:0 0 0 8px var(--bone)}
}
.p-main .kontakt-tel{font-size:clamp(34px,9vw,52px)}

/* ===== PANEL ===== */
.k-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;height:56px;padding:0 var(--edge);background:var(--ink);border-bottom:1px solid var(--line)}
.k-bar .widok{color:var(--tx-3);font-size:var(--t-small);font-weight:500;display:none}
.k-odczyty{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.k-wyloguj{min-height:40px;padding:0 14px;border-radius:var(--r-s);background:transparent;border:1px solid var(--line-2);color:var(--tx);font:500 14px var(--f-text);cursor:pointer}
@media (hover:hover){.k-wyloguj:hover{background:var(--s-2)}}
@media (min-width:768px){.k-bar .widok{display:inline}}
.k-main{max-width:1360px;margin-inline:auto;padding:var(--sp-6) var(--edge) var(--sp-7)}
@media (min-width:1100px){.k-main{padding:var(--sp-7) var(--edge) var(--sp-7)}}
.k-login{min-height:calc(100svh - 56px - 160px);display:grid;place-items:center}
.k-login .karta{width:100%;max-width:440px;display:grid;gap:var(--sp-5)}
.k-login h1{font-size:34px;letter-spacing:-.02em}
.k-login .opis{color:var(--tx-2);font-size:15px;margin-top:8px}
.k-login form .btn{margin-top:var(--sp-5)}
.k-tytul{margin-bottom:var(--sp-5)}
.k-tytul h2{font-size:clamp(30px,3.4vw,44px)}
.k-tytul .lead{margin-top:8px;font-size:18px}
.k-siatka{display:grid;gap:var(--sp-5);align-items:start}
@media (min-width:1100px){.k-siatka{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--gut)}.k-siatka{column-gap:24px}}
.k-akcja{margin-top:var(--sp-5);max-width:420px}
.k-kod{box-shadow:var(--card-edge),var(--sh-2);animation:wjazd var(--d-slow) var(--ease) both}
@keyframes wjazd{from{opacity:0;transform:translateY(12px)}}
.k-kod .kod-duzy{font-size:clamp(40px,11.5vw,96px)}
.k-kod .kod-dol .btn{margin-left:auto}
.postep{display:flex;gap:0;margin-top:var(--sp-5);font:500 14px/1.2 var(--f-text);color:var(--tx-3)}
.postep li{display:flex;align-items:center;gap:8px;flex:1;position:relative}
.postep li::before{content:"";width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--tx-3);flex:none}
.postep li::after{content:"";flex:1;height:1px;background:var(--line-2);margin:0 10px}
.postep li:last-child{flex:none}
.postep li:last-child::after{display:none}
.postep li.zrobiony{color:var(--tx)}
.postep li.zrobiony::before{background:var(--brass);box-shadow:none}
.status-k{margin-top:var(--sp-4);color:var(--tx-2);display:flex;align-items:center;gap:10px}
.status-k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brass);animation:puls 1.6s ease-in-out infinite;flex:none}
.dziennik{display:grid}
.dziennik li{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:8px;min-height:56px;border-top:1px solid var(--line);position:relative;padding-left:0;animation:wjazd var(--d-mid) var(--ease) both}
.dziennik li:first-child{border-top:0}
.dziennik time{font:500 14px/1 var(--f-text);font-variant-numeric:tabular-nums;color:var(--tx-3)}
.dziennik .z{display:flex;align-items:center;gap:10px}
.dziennik .z::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);flex:none}
.dziennik li.m .z::before{background:var(--tx-3)}
.dziennik li.b .z::before{background:var(--clay)}
.dziennik li.pusto{display:block;border:0;color:var(--tx-3);min-height:0;padding:4px 0}
.dziennik li.pusto::before{display:none}
.k-karta-t{margin-bottom:var(--sp-3)}
@media (hover:hover){.dziennik li:not(.pusto):hover{background:var(--s-1)}}

#trwa .k-tytul{margin-bottom:var(--sp-4)}
.k-scena{display:grid;gap:var(--sp-5);align-items:start}
@media (min-width:1100px){.k-scena{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:24px}}
.scena{border-radius:var(--r-l);background:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden}
#trwa:not([hidden]) .scena{animation:otwarcie var(--d-slow) var(--ease) both}
@keyframes otwarcie{from{clip-path:inset(30% 20% 30% 20% round 20px)}to{clip-path:inset(0 0 0 0 round 20px)}}
.scena-pasek{background:var(--s-1);display:flex;align-items:center;gap:12px;min-height:48px;padding:4px 12px 4px 6px;border-bottom:1px solid var(--line)}
.scena-pasek .czas{font:500 14px/1 var(--f-text);font-variant-numeric:tabular-nums;color:var(--tx-2)}
.scena-pasek .rozciagnij{flex:1}
.scena video{width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 380px);min-height:200px;object-fit:contain;background:var(--ink)}
.hud{display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 16px;min-height:34px;font:500 13px/1.3 var(--f-text);color:var(--tx-3);font-variant-numeric:tabular-nums;border-top:1px solid var(--line)}
.scena .weryf{border-radius:0;background:var(--s-1);border-top:1px solid var(--line);padding:16px 20px}
.czat-p{display:grid;grid-template-rows:auto 1fr auto auto;gap:12px;padding:20px;height:min(640px,calc(100dvh - 140px));min-height:380px}
.czat-p ol{display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:0}
.czat-p ol:empty::before{content:"Brak wiadomości.";color:var(--tx-3);font-size:var(--t-small)}
.czat-p li{max-width:88%;padding:10px 14px;font-size:15px;line-height:1.45;display:grid;gap:2px;overflow-wrap:anywhere}
.czat-p li time{font-size:13px;color:var(--tx-3)}
.czat-p li.ja{align-self:flex-end;background:rgb(201 164 92 / .16);border-radius:16px 16px 4px 16px}
.czat-p li.on{align-self:flex-start;background:var(--s-2);border-radius:16px 16px 16px 4px}
.czat-p form{display:grid;grid-template-columns:1fr auto;gap:8px}
.czat-p form .btn{min-width:88px}
.stopka-k{text-align:center;padding:var(--sp-7) 0 var(--sp-6);font:500 13px/1 var(--f-text);color:var(--tx-3)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);background:var(--bone);color:var(--ink);padding:12px 18px;border-radius:var(--r-m);font:600 14px var(--f-text);opacity:0;pointer-events:none;transition:opacity var(--d-mid),transform var(--d-mid) var(--ease);z-index:60}
.toast.widac{opacity:1;transform:translate(-50%,0)}

/* pojawianie sekcji (raz) */
.js .rv{opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.js .rv.w-view{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.hud:empty{display:none}
@media (min-width:768px){.scena .weryf{grid-template-columns:auto 1fr;grid-template-areas:"et et" "cy op";align-items:center;column-gap:24px}.scena .weryf .et{grid-area:et}.scena .weryf .weryf-cyfry{grid-area:cy}.scena .weryf .weryf-opis{grid-area:op}}
#trwa .k-tytul h2{font-size:clamp(26px,2.6vw,34px)}

.bezp-l{margin-bottom:var(--sp-6)}
@media (min-width:768px){.bezp-l{margin-bottom:0}}
.sprawdz{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.sprawdz p{margin-top:var(--sp-2);color:var(--tx-2)}
.sprawdz ul{margin-top:var(--sp-4);display:grid}
.sprawdz li{display:grid;gap:2px;padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.sprawdz li:last-child{border-bottom:1px solid var(--line)}
.sprawdz a{font-weight:600;font-size:17px;text-underline-offset:3px;width:fit-content;border-radius:var(--r-s)}
.sprawdz li span{font-size:var(--t-small);color:var(--tx-2);font-variant-numeric:tabular-nums}

.l .zasady li::before{background:var(--ink)}
.sprawdz li .nip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.sprawdz .btn-xs{min-height:44px}

/* dopasowanie do strony: czern, czerwien, biel */
:root{--ink:#0B0B0C;--bone:#F4F1EC;--brass:#E10F1A;--clay:#FF4A53;--f-display:"Bricolage Grotesque",system-ui,sans-serif}
:root,.d{--btn-bg:#E10F1A;--btn-tx:#fff;--focus-line:#FF4A53}
body.d{background:#0B0B0C}
.btn-p{background:linear-gradient(180deg,#f0222c,#E10F1A 55%,#b30b14);color:#fff}
.brak-kodu a,.p-main a:not(.btn){color:#FF4A53;text-decoration:underline;text-underline-offset:4px}
.kod-kom>*,.kod-kom span{border-color:rgba(244,241,236,.45)!important}
.kod-kom>*{background:rgba(255,255,255,.06)!important}