/* Twój Nissan — styl własny: jasny, ciepły „salonowy” (dzień) i ciemny, wysokokontrastowy (tryb jazdy). Tablet 10–11", dotyk. */
:root{
  --bg:#f5f3ef;--bg2:#ece8e1;--card:#ffffff;--ink:#14161b;--sub:#454b57;--muted:#767d8a;--line:rgba(20,22,27,.1);--line2:rgba(20,22,27,.18);
  --red:#c3002f;--red-ink:#a3001f;--red-soft:#fbe9ed;--ok:#0f7a4d;--ok-soft:#e3f4ec;--opt:#8a5a00;--opt-soft:#fdf2dc;
  --shadow:0 18px 40px -22px rgba(20,22,27,.35);--r:18px;--r-sm:12px;--fs:17px;--tap:56px;
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color-scheme:light
}
html[data-theme=drive]{
  --bg:#0b0d11;--bg2:#13161c;--card:#171b22;--ink:#f6f7f9;--sub:#d0d4dc;--muted:#a3a9b5;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.22);
  --red:#ff3b55;--red-ink:#ff6a7d;--red-soft:rgba(255,59,85,.14);--ok:#3ee0a1;--ok-soft:rgba(62,224,161,.12);--opt:#ffc75c;--opt-soft:rgba(255,199,92,.12);
  --shadow:0 18px 40px -22px #000;--fs:19px;color-scheme:dark
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font:500 var(--fs)/1.5 var(--font);overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%}
.ic{width:22px;height:22px;flex:none}
.boot{padding:40px;text-align:center;color:var(--muted)}
h1,h2,h3{letter-spacing:-.02em;margin:0}
h2{font-size:1.45em;margin:34px 0 14px}
h3{font-size:1.02em;margin:22px 0 10px;color:var(--sub);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.kicker{margin:0 0 6px;font-size:.78em;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.lead{margin:12px 0 0;max-width:680px;font-size:1.12em;color:var(--sub)}
.lead2{font-size:1.15em;color:var(--sub);max-width:820px}
.note,.hint{color:var(--muted);font-size:.9em;margin:10px 0}
.foot{margin:40px 0 20px;color:var(--muted);font-size:.82em;text-align:center}
.grow{flex:1}

/* pasek górny */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px max(20px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}.brand img{width:40px;height:40px;border-radius:11px}
.brand b{display:block;font-size:1.02em;font-weight:800;letter-spacing:-.01em}.brand small{display:block;font-size:.78em;color:var(--muted);margin-top:-2px}
.tb{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:1px solid var(--line2);border-radius:999px;background:var(--card);font-weight:700;font-size:.92em}
.tb.icon{width:48px;padding:0;justify-content:center}
.tb:active{transform:scale(.97)}

/* start */
.start{max-width:1240px;margin:0 auto;padding:26px 24px 10px}
.intro h1{font-size:2.6em;line-height:1.08;font-weight:800;max-width:760px}
.models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.mcard{position:relative;display:flex;flex-direction:column;align-items:stretch;padding:16px 16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);text-align:left;transition:transform .18s,border-color .18s}
.mcard:active{transform:scale(.985)}.mcard:hover{border-color:var(--line2)}
.mcard img{width:100%;aspect-ratio:16/8.5;object-fit:contain;margin:14px 0 4px;padding:6px 7%;box-sizing:border-box}
.noimg{display:block;width:100%;aspect-ratio:16/8.5;border-radius:12px;background:var(--bg2)}
.mc-b>b{display:block;font-size:1.45em;font-weight:800;letter-spacing:-.02em}
.mc-b small{display:block;color:var(--muted);font-size:.88em}
.from{display:block;margin-top:8px;color:var(--sub);font-size:.95em}.from b{color:var(--ink);font-size:1.12em}
.badge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.72em;font-weight:800;letter-spacing:.02em;background:var(--bg2);color:var(--sub)}
.badge .ic{width:15px;height:15px}.badge.ev{background:#e4f1fb;color:#0d5a94}.badge.lcv{background:#f1ece2;color:#6a5530}
.grp{margin:36px 0 0;font-size:1.35em;font-weight:800}
html[data-theme=drive] .badge.lcv{background:rgba(255,214,150,.14);color:#f2cf93}
html[data-theme=drive] .badge.ev{background:rgba(89,199,255,.15);color:#8fd6ff}
.prep{display:flex;align-items:center;gap:16px;width:100%;margin:26px 0 0;padding:18px 22px;border:1.5px dashed var(--line2);border-radius:var(--r);background:transparent;text-align:left}
.prep .ic{width:30px;height:30px;color:var(--red)}.prep b{display:block;font-size:1.05em}.prep small{display:block;color:var(--muted)}
.prep.inst{margin-top:12px;border-style:solid;border-color:var(--line);background:var(--card)}
/* instalacja aplikacji */
.inst-h{display:flex;align-items:center;gap:14px;margin:16px 0 6px}.inst-h img{width:64px;height:64px;border-radius:16px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.inst-h b{display:block;font-size:1.15em}.inst-h small{color:var(--muted)}
.steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.steps li>b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-size:.9em}
.steps li span{padding-top:3px}

/* model: nagłówek */
.model{max-width:1240px;margin:0 auto;padding:18px 24px 10px}
.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:center;padding:26px;border-radius:26px;background:var(--card);box-shadow:var(--shadow);border:1px solid var(--line)}
.hero h1{font-size:2.5em;line-height:1.05;font-weight:800}
.sel{margin:10px 0 0;font-size:1.1em;color:var(--sub)}.sel b{color:var(--ink)}
.price{margin:14px 0 0;font-size:1.1em;color:var(--sub)}.price b{display:inline-block;font-size:1.9em;color:var(--ink);font-weight:800;letter-spacing:-.02em;margin-right:6px}.price small{display:block;font-size:.72em;color:var(--muted)}
.for{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:8px 14px;border-radius:999px;background:var(--red-soft);color:var(--red-ink);font-weight:700;font-size:.88em}.for .ic{width:18px;height:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chips span{padding:10px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}.chips b{display:block;font-size:1.05em;font-weight:800}.chips small{display:block;font-size:.75em;color:var(--muted)}
.hero-i{text-align:center}.hero-i img{width:100%;max-height:330px;object-fit:contain}
.colors{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}
.colors button{width:48px;height:48px;padding:0;border:2px solid transparent;border-radius:50%;background:none;display:grid;place-items:center}
.colors button[aria-pressed=true]{border-color:var(--ink)}
.sw{display:block;width:36px;height:36px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.sw.met{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),transparent 42%),var(--c)}
.sw[data-roof]{background:linear-gradient(180deg,var(--r) 0 38%,var(--c) 38%)}
.cname{margin:6px 0 0;font-size:.9em;color:var(--muted)}
/* zdjęcia mają białe tło — w trybie jazdy podajemy je na jasnej „tacy”, ciemne lakiery dostają obwódkę */
html[data-theme=drive] .hero-i img,html[data-theme=drive] .mcard img{background:#fff;border-radius:16px;padding:8px}
html[data-theme=drive] .sw{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.promo{display:flex;gap:14px;margin:18px 0 0;padding:16px 20px;border-radius:var(--r);background:var(--red-soft);border:1px solid color-mix(in srgb,var(--red) 30%,transparent)}
.promo>.ic{width:30px;height:30px;color:var(--red)}.promo b{font-size:1.02em}.promo ul{margin:6px 0 4px;padding-left:18px}.promo li{margin:2px 0}.promo small{color:var(--muted);font-size:.8em}

/* zakładki */
.tabs{position:sticky;top:73px;z-index:15;display:flex;gap:6px;margin:22px 0 0;padding:6px;border-radius:999px;background:var(--bg2);overflow-x:auto;scrollbar-width:none}
.tabs button{flex:1 0 auto;min-height:var(--tap);padding:0 20px;border:0;border-radius:999px;background:transparent;font-weight:700;color:var(--sub);white-space:nowrap}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--bg)}
.tabbody{padding-top:6px}
.seg{display:flex;gap:8px;margin:18px 0 0;overflow-x:auto;scrollbar-width:none}.seg.wrap{flex-wrap:wrap;overflow:visible}
.seg button{min-height:50px;padding:0 18px;border:1px solid var(--line2);border-radius:999px;background:var(--card);font-weight:700;font-size:.92em;white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* karty treści */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{padding:20px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.card b{display:block;font-size:1.15em;font-weight:800}.card span{display:block;color:var(--red-ink);font-weight:700;font-size:.92em;margin-top:2px}.card p{margin:10px 0 0;color:var(--sub)}
.card.big b{font-size:1.4em}
.kv{list-style:none;margin:12px 0 0;padding:0}.kv li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:.95em}.kv span{color:var(--muted)}
.dims{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dims div{padding:16px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line)}.dims b{display:block;font-size:1.25em;font-weight:800}.dims span{color:var(--muted);font-size:.86em}
.facts{columns:2;column-gap:28px;margin:0;padding:0;list-style:none}.facts li{break-inside:avoid;position:relative;padding:8px 0 8px 22px;border-top:1px solid var(--line)}
.facts li::before{content:"";position:absolute;left:2px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.faq details{border-top:1px solid var(--line);padding:4px 0}.faq summary{min-height:var(--tap);display:flex;align-items:center;font-weight:700;cursor:pointer;list-style:none}
.faq summary::after{content:"+";margin-left:auto;font-size:1.4em;color:var(--red)}.faq details[open] summary::after{content:"–"}.faq p{margin:0 0 14px;color:var(--sub)}
.next{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 26px;border:0;border-radius:999px;background:var(--red);color:#fff;font-weight:800}
.cta.ghost{background:transparent;border:1.5px solid var(--line2);color:var(--ink)}
.cta.sm{min-height:48px;padding:0 18px;font-size:.92em}.cta:disabled{opacity:.4}
.cta .ic{width:20px;height:20px}

/* wersje i ceny */
.trims{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:18px}
.trim{display:flex;flex-direction:column;padding:20px;border-radius:var(--r);background:var(--card);border:1.5px solid var(--line)}
.trim.on{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}.trim.off{opacity:.55}
.trim header b{display:block;font-size:1.35em;font-weight:800}.trim header span{display:block;color:var(--muted);font-size:.85em}
.tp{margin:12px 0 4px;font-size:.95em;color:var(--sub)}.tp b{font-size:1.5em;color:var(--ink);font-weight:800}
.tl{margin:8px 0 0;padding:0;list-style:none;font-size:.92em}.tl li{position:relative;padding:5px 0 5px 20px}.tl li::before{content:"";position:absolute;left:2px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.eng-l{display:grid;gap:4px;margin:12px 0 0;font-size:.86em;color:var(--muted)}.eng-l span{display:flex;justify-content:space-between;gap:8px;border-top:1px dashed var(--line);padding-top:4px}.eng-l b{color:var(--ink);white-space:nowrap}
.pk{margin:10px 0 0;font-size:.86em;color:var(--sub)}
.tb2{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:16px}.tb2 .cta.sm{padding:0 14px}
/* tabela cen: wersje × napędy */
.pt-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:34px 0 0}.pt-head h2{margin:0}.pt-bar{display:flex;gap:8px;margin-left:auto}
.cta.adm{border-color:var(--red);color:var(--red-ink)}.cta.adm .ic{color:var(--red)}
table.ptab{min-width:640px}
.ptab thead th{text-align:center;vertical-align:bottom}.ptab thead th:first-child{text-align:left}
.ptab tbody th,.ptab thead th:first-child{position:sticky;left:0;z-index:1;background:var(--card)}.ptab thead th:first-child{background:var(--bg2)}
.paint .sw{flex:none}
.ptab tbody th{min-width:150px}.ptab tbody th b{display:block;font-size:1.05em;color:var(--ink)}
.ptab td{text-align:center;vertical-align:middle;padding:6px}
.ptab td.na{color:var(--muted)}
/* wybrana wersja: cienki czerwony pasek z lewej; wybrany napęd: taki sam pasek pod nazwą napędu (bez zabarwiania całych wierszy i kolumn) */
.ptab tbody tr.on th{box-shadow:inset 3px 0 0 var(--red)}.ptab tbody tr.on th b{color:var(--red-ink)}
.ptab thead th.hi{box-shadow:inset 0 -3px 0 var(--red);color:var(--red-ink)}.ptab thead th.hi small{color:var(--red-ink)}
.lnk{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:4px 0;border:0;background:none;color:var(--red-ink);font-size:.82em;font-weight:700}.lnk .ic{width:15px;height:15px}
.pc{display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:104px;min-height:52px;justify-content:center;padding:6px 10px;border:1px solid transparent;border-radius:12px;background:none}
.pc b{font-size:1.1em;font-weight:800;color:var(--ink);white-space:nowrap}.pc.pr b{color:var(--red-ink)}
.pc s{font-size:.92em;font-weight:600;color:var(--sub);white-space:nowrap;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--sub) 80%,transparent)}
.pc small{font-size:.7em;color:var(--muted);white-space:nowrap}
/* wybrana komórka (wersja + napęd): czerwona ramka i delikatne pulsowanie — klient widzi, o czym rozmawiamy */
@keyframes cellpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 38%,transparent),0 10px 24px -14px color-mix(in srgb,var(--red) 70%,transparent)}50%{box-shadow:0 0 0 9px transparent,0 10px 24px -14px color-mix(in srgb,var(--red) 70%,transparent)}}
@keyframes cellin{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.pc.sel{border:2px solid var(--red);background:var(--card);animation:cellin .35s cubic-bezier(.2,.8,.2,1),cellpulse 2s ease-in-out .35s infinite}
.pc.sel:hover{background:var(--card);border-color:var(--red)}
.ptab td.selc{position:relative;z-index:1}
.ptab tbody th small{display:block;font-weight:500;color:var(--muted);font-size:.8em}
.pt-leg{display:flex;flex-wrap:wrap;gap:6px 20px;margin:10px 0 12px;font-size:.88em;color:var(--muted)}
.pt-leg s{color:var(--sub);font-weight:600;text-decoration-thickness:1.5px;margin-right:4px}.pt-leg b{color:var(--red-ink);margin-right:4px}.pt-leg small{margin-right:4px}
.otab td{font-size:.92em;color:var(--sub)}.otab td b{color:var(--ink)}.otab td .std{display:inline-flex;align-items:center;gap:4px;color:var(--ok);font-weight:700}.otab td .std .ic{width:16px;height:16px}
.otab .na,.ptab .na{color:var(--muted)}.otab thead th.on{box-shadow:inset 0 -3px 0 var(--red);color:var(--red-ink)}
.kl{display:flex;align-items:center;gap:10px}.kl .sw{flex:none;width:28px;height:28px}.kl small{display:block;font-weight:500}
.pc:hover{border-color:var(--line2);background:var(--bg)}.pc:active{transform:scale(.96)}
.ptab.editing td.ed{min-width:150px}
.ptab td.ed label{display:grid;gap:1px;margin:2px 0;text-align:left}.ptab td.ed small{font-size:.68em;color:var(--muted);font-weight:700}
.ptab td.ed input{width:100%;min-height:36px;padding:6px 8px;border:1px solid var(--line2);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit;font-size:.9em;text-align:right}
.ptab td.ed input:focus{outline:2px solid var(--red);outline-offset:-1px}
/* cennik wersji */
.cennik .tech b.cp{font-size:1.15em;font-weight:800}.cennik .tech tbody th small{display:block}
.ck-promo{display:inline-flex;align-items:center;gap:8px;margin:4px 0 0;padding:8px 14px;border-radius:999px;background:var(--red-soft);color:var(--red-ink);font-weight:800}.ck-promo .ic{width:18px;height:18px}
.cennik .paint{cursor:default}

/* różnice */
.dhead,.drow{display:grid;grid-template-columns:minmax(150px,1.2fr) repeat(var(--n),minmax(0,1fr));gap:10px;align-items:center}
.dhead{position:sticky;top:146px;z-index:10;margin-top:18px;padding:14px 0;background:var(--bg);border-bottom:2px solid var(--line2)}
.dhead div{text-align:center}.dhead b{display:block;font-size:1.15em;font-weight:800}.dhead span{display:block;color:var(--sub);font-size:.92em}.dhead em{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:999px;background:var(--red-soft);color:var(--red-ink);font-style:normal;font-weight:800;font-size:.82em}
.gains{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:20px}
.gain{padding:20px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.gain header{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:1.05em;color:var(--sub)}.gain header b{color:var(--ink);font-size:1.15em}.gain header span{margin-left:auto;padding:3px 12px;border-radius:999px;background:var(--red);color:#fff;font-weight:800;font-size:.9em}
.gain ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}.gain li{display:flex;gap:8px;align-items:flex-start}.gain li .ic{width:18px;height:18px;color:var(--ok);margin-top:3px}
.gain .more{margin:10px 0 0;color:var(--muted);font-size:.88em}
.dbar{display:flex;align-items:center;gap:14px;margin-top:30px}.dbar h2{margin:0}.tg{display:inline-flex;align-items:center;gap:10px;margin-left:auto;font-weight:700}.tg input{width:26px;height:26px;accent-color:var(--red)}
.drow{padding:12px 0;border-bottom:1px solid var(--line);font-size:.95em}
.drow .fn{font-weight:700}.drow.dif{background:linear-gradient(90deg,var(--red-soft),transparent 60%)}
.c{text-align:center;color:var(--sub)}.c.yes{color:var(--ok)}.c.yes .ic{width:24px;height:24px}.c.no,.c.na{color:var(--muted)}.c.opt{color:var(--opt);font-size:.9em}

/* wyposażenie */
.eqgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.eqc{padding:6px 18px 12px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.eqc ul{list-style:none;margin:0;padding:0}.eqc li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:.94em}
.eqc li b{text-align:right;font-weight:700;color:var(--sub)}.eqc li.yes b{display:inline-flex;align-items:center;gap:4px;color:var(--ok)}.eqc li.yes .ic{width:18px;height:18px}.eqc li.opt b{color:var(--opt)}

/* dane techniczne */
.tw{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
table.tech{width:100%;border-collapse:collapse;font-size:.92em}
.tech th,.tech td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tech thead th{background:var(--bg2);font-weight:800}.tech thead small{display:block;font-weight:600;color:var(--muted)}
.tech tbody th{font-weight:700;color:var(--sub);min-width:170px}.tech tbody th small{color:var(--muted);font-weight:500}
.tech tr:last-child>*{border-bottom:0}

/* okna */
.scrim{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(10,12,16,.45);backdrop-filter:blur(4px);animation:fade .18s}
.sheet{width:min(720px,100%);max-height:calc(100dvh - 40px);overflow:auto;border-radius:24px;background:var(--card);box-shadow:0 30px 80px -20px rgba(0,0,0,.5);animation:up .22s cubic-bezier(.2,.8,.2,1)}
.sheet.small{width:min(480px,100%)}
.sheet header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;background:var(--card);border-bottom:1px solid var(--line)}
.sheet h2{margin:0;font-size:1.3em}
.sb{padding:4px 22px 22px}.sb h3{margin-top:20px}
.menu{display:grid;gap:10px;padding-top:16px}
.menu button{display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:var(--bg);text-align:left}
.menu b{display:block}.menu small{display:block;color:var(--muted);font-size:.85em}.menu .ic{width:26px;height:26px;color:var(--red)}
.pin{display:grid;gap:12px;padding-top:18px}.pin input,.set input,.set textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--line2);border-radius:14px;background:var(--bg);color:var(--ink);font:inherit}
.pin input{font-size:1.6em;letter-spacing:.4em;text-align:center}
.err{color:var(--red-ink);margin:0;min-height:1.2em}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.row input{flex:1;min-width:200px}
.pl{display:grid;gap:6px;margin:12px 0}.pl span{font-weight:700;font-size:.92em}.pl em{color:var(--red-ink);font-style:normal;font-size:.85em}
.set textarea{min-height:84px;resize:vertical;font-size:.92em}
/* konto administratora */
.tb.adm{border-color:var(--red);color:var(--red-ink)}.tb.adm .ic{color:var(--red)}
.pin .hint{margin:0}.pin input[autocomplete]{font-size:1.1em;letter-spacing:normal}
.adm-sub{font-size:.55em;font-weight:700;color:var(--muted);margin-left:6px}
.ed .edf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ed .edf label{display:grid;gap:6px;font-weight:700;font-size:.9em}
.ed input,.ed textarea{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line2);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;font-weight:500;box-sizing:border-box}
.ed textarea{resize:vertical;font-size:.95em}
.edt{width:100%;border-collapse:collapse;font-size:.92em}.edt th{text-align:left;padding:8px 6px;color:var(--muted);font-size:.85em;white-space:nowrap}
.edt td{padding:5px 6px;border-top:1px solid var(--line)}.edt td input{min-height:40px;max-width:150px;text-align:right}
.edt input.chg{border-color:var(--red);background:rgba(200,16,46,.05)}
.ed .row{margin-top:18px}.ed .prog{font-weight:700;font-size:.9em}
@media(max-width:760px){.ed .edf{grid-template-columns:1fr}}
.prog{color:var(--muted);font-size:.9em}
#toasts{position:fixed;left:50%;bottom:24px;z-index:60;display:grid;gap:8px;transform:translateX(-50%)}
.toast{padding:12px 20px;border-radius:16px;background:var(--ink);color:var(--bg);box-shadow:var(--shadow);animation:up .2s}.toast b{display:block}.toast span{font-size:.88em;opacity:.8}
@keyframes up{from{opacity:0;transform:translateY(14px)}}@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* obrót 360° */
.v360{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;background:#fff;overflow:hidden;touch-action:pan-y;user-select:none;cursor:grab}
.v360:active{cursor:grabbing}
.v-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(1.18);pointer-events:none}
.v-img.in{object-fit:cover;transform:none}
.v-img.loc{transform:scale(.86)}
.v-bar{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:6px;align-items:center}
.v-bar button{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border:1px solid rgba(20,22,27,.15);border-radius:999px;background:rgba(255,255,255,.92);color:#14161b;font-weight:700;font-size:.82em;backdrop-filter:blur(6px)}
.v-bar button[aria-pressed=true]{background:#14161b;color:#fff;border-color:#14161b}
.v-bar button:last-child{margin-left:auto;width:42px;padding:0;justify-content:center}
.v-bar .ic{width:18px;height:18px}
.v-off{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.9);color:#454b57;font-size:.8em;font-weight:700}
.v-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(20,22,27,.78);color:#fff;font-size:.82em;font-weight:700;pointer-events:none;animation:hint 2.4s ease-in-out infinite}
.v-hint .ic{width:18px;height:18px}
@keyframes hint{50%{transform:translateX(calc(-50% + 10px))}}
.v-load{position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.9);color:#767d8a;font-size:.72em;font-weight:700}
.v360.full{aspect-ratio:16/9;border-radius:0}
.sheet.wide{width:min(1400px,100%)}
html[data-theme=drive] .v360{box-shadow:0 0 0 1px rgba(255,255,255,.12)}
/* linki PGD */
.pgd{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 0;padding:14px 18px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.pgd-t{flex:1 1 220px;font-weight:800}.pgd .ic{width:18px;height:18px}
/* realne spalanie / zasięg */
.real{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.rcard{padding:18px 20px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.rcard header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}.rcard header .ic{color:var(--red)}.rcard header b{font-size:1.05em}.rcard header span{margin-left:auto;padding:3px 10px;border-radius:999px;background:var(--bg2);font-weight:800;font-size:.85em}
.rgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}.rgrid.ev{grid-template-columns:repeat(3,minmax(0,1fr))}
.rgrid div{padding:12px 10px;border-radius:12px;background:var(--bg);text-align:center}.rgrid small{display:block;color:var(--muted);font-size:.74em;font-weight:700}.rgrid b{display:block;margin-top:4px;font-size:1.3em;font-weight:800;letter-spacing:-.02em}
.rnote{margin:8px 0 0;color:var(--muted);font-size:.84em}.src{margin:10px 0 0;font-size:.8em;color:var(--muted)}.src a{color:var(--sub)}
/* ceny, lakiery, opcje */
.price s,.tp s,.eng-l s{margin-left:6px;color:var(--muted);font-weight:600;font-size:.62em}.eng-l s{font-size:.85em}
.low{margin:0;color:var(--muted);font-size:.78em}
.tw2{display:grid;gap:2px;margin:10px 0 0;font-size:.86em;color:var(--muted)}.tw2 b{color:var(--ink);font-weight:700}.tw2.big{display:flex;flex-wrap:wrap;gap:6px 24px;font-size:.95em}
.mc-promo{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 10px;border-radius:999px;background:var(--red-soft);color:var(--red-ink);font-weight:800;font-size:.8em}.mc-promo .ic{width:16px;height:16px}
.pplus{margin:6px 0 4px;font-weight:700;font-size:.92em}
.paints{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.paint{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);text-align:left}
.paint.on{border-color:var(--red)}.paint span{flex:1}.paint b{display:block;font-size:.95em}.paint small{color:var(--muted)}.paint em{font-style:normal;font-weight:800;font-size:.88em;white-space:nowrap}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.opt{display:grid;gap:4px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}.opt small{color:var(--muted)}
.opt em{font-style:normal;font-weight:800;color:var(--opt)}.opt em.std{display:inline-flex;align-items:center;gap:4px;color:var(--ok)}.opt em .ic{width:18px;height:18px}
.tech th.hi,.tech td.hi{background:var(--red-soft)}
table.ptab td.hi{background:transparent}table.ptab thead th.hi{background:var(--bg2)}
.cname b{color:var(--ink)}

/* ---------- ruch: wczytywanie zdjęć i „żywa” strona (wyłączane przez systemowe „ogranicz ruch”) ---------- */
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes reveal{from{opacity:0;filter:blur(10px);transform:scale(.95) translateY(10px)}}
@keyframes vreveal{from{opacity:0;filter:blur(14px)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes pop{0%{transform:scale(.55)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes bump{0%{transform:none}35%{transform:scale(1.08);color:var(--red)}100%{transform:none}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,-4%) scale(1.1)}}
@keyframes sheen{from{transform:translateX(-140%) skewX(-18deg)}to{transform:translateX(420%) skewX(-18deg)}}
@keyframes wiggle{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-14deg)}92%{transform:rotate(11deg)}96%{transform:rotate(-6deg)}}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 35%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
/* połysk w miejscu zdjęcia, zanim się wczyta, potem płynne pojawienie (rozmycie → ostrość) */
.mcard img{border-radius:14px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mcard img:not(.ld),.v360:has(.v-img:not(.ld)){background:linear-gradient(100deg,var(--bg2) 35%,color-mix(in srgb,var(--bg2) 35%,#fff) 50%,var(--bg2) 65%) 0 0/250% 100%;animation:shimmer 1.5s linear infinite}
.mcard img.ld{animation:reveal .75s cubic-bezier(.2,.8,.2,1)}
.v-img.ld{animation:vreveal .6s ease-out}
/* „światło salonu” przesuwa się po aucie po wczytaniu i przy zmianie koloru */
.v360::after{content:"";position:absolute;top:0;bottom:0;left:0;width:28%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-140%) skewX(-18deg);pointer-events:none}
.v360:has(.v-img.ld)::after{animation:sheen 1.4s .2s cubic-bezier(.4,0,.2,1) 1}
/* wejście widoku: tekst, kafelki i karty wjeżdżają kaskadowo */
.a-view .intro>*,.a-view .hero-t>*{animation:rise .65s cubic-bezier(.2,.8,.2,1) both}
.a-view .intro>:nth-child(2),.a-view .hero-t>:nth-child(2){animation-delay:.06s}.a-view .intro>:nth-child(3),.a-view .hero-t>:nth-child(3){animation-delay:.12s}
.a-view .hero-t>:nth-child(4){animation-delay:.18s}.a-view .hero-t>:nth-child(n+5){animation-delay:.24s}
.a-view .hero-i{animation:reveal .8s .05s cubic-bezier(.2,.8,.2,1) both}
.a-view .pgd,.a-view .tabs,.a-view .prep,.a-view .grp{animation:rise .6s .28s cubic-bezier(.2,.8,.2,1) both}
.a-view .models>*{animation:rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms + 140ms)}
:is(.a-view,.a-tab) :is(.trims,.cards3,.cards2,.real,.eqgrid,.paints,.opts,.gains,.dims)>*{animation:rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms + 60ms)}
.a-view .chips>*{animation:pop .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms + 300ms)}
.a-tab .tabbody{animation:rise .4s cubic-bezier(.2,.8,.2,1)}
/* odpowiedź na dotyk i drobne akcenty */
.cta,.seg button,.paint,.trim,.mcard,.menu button,.colors button,.tabs button,.v-bar button,.prep{transition:transform .16s,background-color .25s,border-color .25s,color .25s,box-shadow .25s}
.cta:active,.seg button:active,.paint:active,.trim:active,.menu button:active,.v-bar button:active,.prep:active{transform:scale(.965)}
.colors button[aria-pressed=true] .sw{animation:pop .4s cubic-bezier(.2,.8,.2,1)}
.price b.bump{animation:bump .55s cubic-bezier(.2,.8,.2,1)}
.promo>.ic,.mc-promo .ic{transform-origin:50% 25%;animation:wiggle 5.5s ease-in-out infinite}
.for{animation:breathe 2.6s ease-in-out 3}
@media (hover:hover){.mcard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(20,22,27,.45)}.mcard:hover img{transform:scale(1.04)}}
/* tło, które delikatnie „oddycha” — start i nagłówek modelu */
.start,.hero{position:relative;isolation:isolate}.hero{overflow:hidden}
.start::before,.hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;filter:blur(12px);animation:drift 20s ease-in-out infinite}
.start::before{inset:-30px -8% auto;height:520px;background:radial-gradient(38% 46% at 18% 30%,color-mix(in srgb,var(--red) 11%,transparent),transparent 70%),radial-gradient(34% 44% at 82% 8%,rgba(70,110,190,.11),transparent 70%)}
.hero::before{inset:-20%;background:radial-gradient(30% 40% at 85% 20%,color-mix(in srgb,var(--red) 9%,transparent),transparent 70%),radial-gradient(30% 40% at 10% 90%,rgba(70,110,190,.08),transparent 70%)}
/* zapis offline */
.offbox{margin-top:14px;padding:4px 18px 18px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line)}
.off360{display:flex;align-items:center;gap:12px;margin:6px 0 4px!important;font-weight:600}.off360 span{font-size:.92em}
.set .off360 input{width:26px;height:26px;min-height:0;padding:0;flex:none;accent-color:var(--red)}
.cta[hidden]{display:none}
.offbar{height:10px;margin:14px 0 6px;border-radius:999px;background:var(--bg2);overflow:hidden}
.offfill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--red),#ff7088,var(--red)) 0 0/200% 100%;animation:shimmer 1.6s linear infinite;transition:width .35s ease}
.offbar.done .offfill{animation:none;background:var(--ok)}
.offst{margin:4px 0 12px;color:var(--sub);font-size:.88em;font-weight:600;min-height:1.3em}

/* tablet pionowo / telefon */
@media (max-width:980px){
  .models{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{grid-template-columns:1fr}.hero-i{order:-1}
  .cards3{grid-template-columns:1fr}.dims{grid-template-columns:repeat(2,minmax(0,1fr))}.eqgrid{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--fs:16px}
  .start,.model{padding:16px 14px}.intro h1{font-size:1.9em}.models{grid-template-columns:1fr}.cards2{grid-template-columns:1fr}.facts{columns:1}
  .hero{padding:18px}.hero h1{font-size:1.9em}.tb span{display:none}.tb{width:48px;padding:0;justify-content:center}
  .dhead,.drow{grid-template-columns:minmax(110px,1fr) repeat(var(--n),minmax(0,1fr));font-size:.85em}.dhead{top:140px}
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.real{grid-template-columns:1fr}
}
