@font-face{font-family:'Figtree';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/figtree-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/figtree-latin.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}

/* Layout: portal kafelkowy z ciemnym paskiem nawigacji. Pomarańcz to jedyny kolor marki; zieleń, limonka, żółć i czerwień tylko dla ocen. Tryb jasny i ciemny, przełącznik w pasku. */
:root{
  --bg:#F2F2F3; --surface:#FFFFFF; --sunk:#F2F2F3; --ink:#16171A; --muted:#62656C; --line:#E3E3E6;
  --bar:#141518; --bar-ink:#F4F4F5; --bar-muted:#A9ABB2; --bar-field:#24262B;
  --accent:#E5641F; --accent-hover:#CC5414; --accent-ink:#FFFFFF; --accent-soft:#FCEDE3; --accent-text:#B44A0E;
  --top:#16A34A; --good:#65A30D; --ok:#CA8A04; --low:#DC2626;
  --top-bg:#E6F6EC; --good-bg:#EFF7E2; --ok-bg:#FBF3DA; --low-bg:#FDE8E8;
  --shadow:0 1px 2px rgba(16,17,20,.06),0 6px 18px -10px rgba(16,17,20,.18);
  --shadow-up:0 2px 4px rgba(16,17,20,.08),0 16px 32px -14px rgba(16,17,20,.3);
  --font:"Figtree", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --r:16px; --r-s:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E0F11; --surface:#18191C; --sunk:#202226; --ink:#EDEDEF; --muted:#A0A3AA; --line:#2A2B30;
  --bar:#0A0B0C; --bar-field:#1E2024;
  --accent:#F27A36; --accent-hover:#F58E52; --accent-ink:#140B05; --accent-soft:#3A2214; --accent-text:#F79D68;
  --top:#34D178; --good:#9BD43B; --ok:#F1C232; --low:#F87171;
  --top-bg:#133122; --good-bg:#24300F; --ok-bg:#352B0C; --low-bg:#3A1717;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px -10px rgba(0,0,0,.6); --shadow-up:0 2px 4px rgba(0,0,0,.5),0 18px 36px -14px rgba(0,0,0,.8); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E0F11; --surface:#18191C; --sunk:#202226; --ink:#EDEDEF; --muted:#A0A3AA; --line:#2A2B30;
  --bar:#0A0B0C; --bar-field:#1E2024;
  --accent:#F27A36; --accent-hover:#F58E52; --accent-ink:#140B05; --accent-soft:#3A2214; --accent-text:#F79D68;
  --top:#34D178; --good:#9BD43B; --ok:#F1C232; --low:#F87171;
  --top-bg:#133122; --good-bg:#24300F; --ok-bg:#352B0C; --low-bg:#3A1717;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px -10px rgba(0,0,0,.6); --shadow-up:0 2px 4px rgba(0,0,0,.5),0 18px 36px -14px rgba(0,0,0,.8); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding-inline:24px}
@media (max-width:560px){.wrap{padding-inline:16px}}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-0.02em}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--accent);color:#fff;padding:10px 14px;border-radius:var(--r-s);font-weight:800}
.skip:focus{top:12px}
.link{color:var(--accent-text);font-weight:700}
.link:hover{text-decoration:underline}

/* Pasek */
header.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--bar);color:var(--bar-ink)}
.bar .wrap{display:flex;align-items:center;gap:22px;height:62px}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:21px;letter-spacing:-0.035em;white-space:nowrap}
.logo .mark{width:32px;height:32px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:16px}
.logo .dot{color:var(--accent)}
nav.cats{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
nav.cats a{font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--bar-muted);padding:8px 10px;white-space:nowrap}
nav.cats a:hover{color:var(--bar-ink)}
nav.cats a[aria-current="page"]{color:var(--bar-ink);box-shadow:inset 0 -3px 0 var(--accent)}
.bar .tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.search{position:relative}
.search .field{display:flex;align-items:center;gap:8px;background:var(--bar-field);border-radius:var(--r-s);padding:0 12px;height:38px;width:270px;color:var(--bar-muted)}
.search input{border:0;background:transparent;font:inherit;font-size:15px;color:var(--bar-ink);outline:none;width:100%;min-width:0}
.search input::placeholder{color:var(--bar-muted)}
.search kbd{font:inherit;font-size:12px;border:1px solid #3A3D44;border-radius:5px;padding:0 6px;color:var(--bar-muted)}
.sugg{position:absolute;right:0;top:46px;width:360px;max-width:calc(100vw - 32px);background:var(--surface);color:var(--ink);border-radius:var(--r);box-shadow:var(--shadow-up);padding:6px;display:grid;gap:2px}
.sugg a{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px;border-radius:var(--r-s)}
.sugg a:hover,.sugg a[aria-selected="true"]{background:var(--sunk)}
.sugg .th{width:52px;height:36px;border-radius:6px;overflow:hidden;background:#fff;position:relative}
.sugg .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sugg .th.photo img{object-fit:cover}
.sugg b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg small{color:var(--muted);font-size:12.5px}
.sugg .all{grid-template-columns:1fr;font-size:14px;font-weight:700;color:var(--accent-text);padding:9px 8px}
.ibtn{width:38px;height:38px;border-radius:var(--r-s);border:0;background:var(--bar-field);color:var(--bar-ink);display:grid;place-items:center;cursor:pointer;position:relative}
.ibtn:hover{background:#2E3137}
.ibtn svg{width:18px;height:18px}
.ibtn .badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
.mob-search{display:none}
@media (max-width:980px){.search .field{width:200px}}
@media (max-width:820px){.search{display:none}.mob-search{display:grid}}
@media (max-width:820px){.bar .wrap{flex-wrap:wrap;height:auto;padding-top:10px;row-gap:4px}nav.cats{order:3;width:100%;margin-inline:-6px;padding-bottom:2px}nav.cats a{padding:10px 8px 12px;font-size:13px}}
@media (max-width:560px){.bar .wrap{gap:10px}}
@media (max-width:400px){.logo .word{display:none}}
.mob-panel{background:var(--bar);padding:0 16px 12px}
.mob-panel .field{display:flex;align-items:center;gap:8px;background:var(--bar-field);border-radius:var(--r-s);padding:0 12px;height:42px}
.mob-panel input{border:0;background:transparent;font:inherit;font-size:16px;color:var(--bar-ink);outline:none;width:100%}

/* Oceny i plakietki */
.chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:var(--accent);color:#fff;white-space:nowrap}
.chip.sale{background:var(--low)}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.score{display:inline-grid;place-items:center;min-width:44px;height:36px;padding-inline:8px;border-radius:9px;font-weight:900;font-size:18px;letter-spacing:-0.02em;color:#fff}
.score.lg{min-width:80px;height:68px;border-radius:16px;font-size:34px}
.score.sm{min-width:36px;height:26px;font-size:13px;border-radius:7px}
.score.txt{font-size:11px;line-height:1.15;font-weight:800;letter-spacing:0;padding:6px 9px;text-align:center;height:auto;min-height:36px;text-transform:none}
.score.txt.lg{font-size:13px;min-height:68px;padding:8px 12px}
.score.top{background:var(--top)} .score.good{background:var(--good)} .score.ok{background:var(--ok)} .score.low{background:var(--low)} .score.na{background:#7B7E86}
:root[data-theme="dark"] .score:not(.na){color:#0E0F11}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .score:not(.na){color:#0E0F11}}
.agree{font-size:14px;font-weight:700}
.a-hi{color:var(--top)} .a-mid{color:var(--ok)} .a-lo{color:var(--low)}

/* Polska wersja */
.pl{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;white-space:nowrap}
.pl svg{width:18px;height:12px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.pl.full,.pl.subs{color:var(--ink)} .pl.none{color:var(--muted)}
.pl.none svg{filter:grayscale(1);opacity:.5}

/* Zdjęcia */
.media{position:relative;overflow:hidden;background:#FFFFFF;display:block}
.media img{position:absolute;inset:0;width:100%;height:100%;object-position:50% 50%}
.media.studio img{object-fit:contain;padding:9% 10%}
.media.photo{background:#0B0C0E}
.media.photo img{object-fit:cover}
.media .over{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;z-index:2}

/* Przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-s);padding:12px 18px;font:inherit;font-weight:800;font-size:15.5px;cursor:pointer;white-space:nowrap;transition:background .15s,transform .1s}
.btn:hover{background:var(--accent-hover)}
.btn.soft{background:var(--accent-soft);color:var(--accent-text)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.line:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn.line[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text);box-shadow:none}
.btn svg{width:17px;height:17px}
.tile:active,.deal:active,.hero:active,.btn:active{transform:scale(.985)}

/* Bento */
.bento{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:14px;padding-block:18px 8px}
.bento > :first-child{grid-row:span 2}
@media (max-width:900px){.bento{grid-template-columns:1fr}.bento > :first-child{grid-row:auto}}
.hero{position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:240px;transition:transform .18s}
.hero:hover .ttl{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.hero.photo .media{position:absolute;inset:0}
.hero.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.85) 100%);z-index:1}
.hero.photo .cap{position:relative;z-index:2;margin-top:auto;padding:18px;color:#fff;display:grid;gap:6px}
.hero.photo .cap .ttl{font-size:21px;font-weight:800;line-height:1.2}
.hero.photo .cap p{font-size:14.5px;color:rgba(255,255,255,.86);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero.photo .pl{color:#fff}
.hero.photo.big{min-height:520px}
.hero.photo.big .cap{padding:30px;gap:10px}
.hero.photo.big .cap .ttl{font-size:clamp(30px,3.4vw,46px);font-weight:900;line-height:1.05}
.hero.photo.big .cap p{font-size:16.5px;-webkit-line-clamp:3;max-width:62ch}
.hero.photo.big::after{background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.88) 100%)}
@media (max-width:700px){.hero.photo.big{min-height:440px}.hero.photo.big .cap{padding:20px}}
.hero.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero.studio .media{height:100%;min-height:360px}
.hero.studio .cap{padding:30px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.hero.studio .ttl{font-size:clamp(26px,3vw,38px);font-weight:900;line-height:1.05}
.hero.studio .verdict{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:700px){.hero.studio{grid-template-columns:1fr}.hero.studio .media{min-height:0;height:auto;aspect-ratio:4/3}.hero.studio .cap{padding:20px}}
.kicker{font-size:14.5px;font-weight:600;color:var(--muted)}
.verdict{font-size:17px;line-height:1.55}
.verdict b{color:var(--accent-text)}

/* Sekcje */
section.blk{padding-block:36px 4px}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.sh h2{font-size:23px;font-weight:900}
.sh p{color:var(--muted);font-size:15px;margin-top:3px}
.sh a.more{font-size:14.5px;font-weight:800;color:var(--accent-text);white-space:nowrap}
.sh a.more:hover{text-decoration:underline}
.intro{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;padding-top:20px;font-size:14.5px;color:var(--muted)}
.intro b{color:var(--ink)}

/* Kafelki */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1060px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:800px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.grid{grid-template-columns:1fr}}
.tile{position:relative;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-up)}
.tile:hover h3{color:var(--accent-text)}
.tile > a.cover{position:absolute;inset:0;z-index:1}
.tile .media{aspect-ratio:16/10;border-bottom:1px solid var(--line)}
.tile .body{padding:14px 16px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.tile .type{font-size:13px;color:var(--muted);font-weight:600}
.tile h3{font-size:17px;font-weight:800;line-height:1.25;transition:color .15s}
.tile .v{font-size:14.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--muted)}
.tile .foot{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.tile .acts{position:relative;z-index:2;display:flex;gap:4px}
.tbtn{width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.tbtn:hover{background:var(--sunk);color:var(--ink)}
.tbtn[aria-pressed="true"]{color:var(--accent-text);background:var(--accent-soft)}
.tbtn svg{width:17px;height:17px}
.price{font-weight:900;font-size:18px;color:var(--accent-text)}
.was{color:var(--muted);text-decoration:line-through;font-size:13px;margin-left:6px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*14px)/3.4);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.rail > *{scroll-snap-align:start}
.rail-nav{display:none;gap:6px;margin-left:auto;margin-right:14px}
.rail-nav button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.rail-nav button:hover{border-color:var(--accent);color:var(--accent-text)}
@media (hover:hover) and (min-width:900px){.rail-nav{display:inline-flex}}
@media (max-width:800px){.rail{grid-auto-columns:74%}}
.grid.featured > :first-child{grid-column:span 2;grid-row:span 2}
.grid.featured > :first-child h3{font-size:24px}
.grid.featured > :first-child .v{-webkit-line-clamp:5;font-size:15.5px}
@media (max-width:480px){.grid.featured > :first-child{grid-column:auto;grid-row:auto}}

/* Pasek cen */
.deals{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:1060px){.deals{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.deals{grid-template-columns:repeat(2,minmax(0,1fr))}}
.deal{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .18s}
.deal:hover{transform:translateY(-3px)}
.deal:hover h3{color:var(--accent-text)}
.deal .media{aspect-ratio:16/10}
.deal .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.deal h3{font-size:14.5px;font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.deal .lbl{font-size:12px;color:var(--muted);margin-top:auto;padding-top:6px}

/* Grane teraz */
.live ol{list-style:none;margin:0;padding:6px 18px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
@media (max-width:900px){.live ol{grid-template-columns:1fr}}
.live li:nth-child(2) a{border-top:0}
@media (max-width:900px){.live li:nth-child(2) a{border-top:1px solid var(--line)}}
.live li a{display:grid;grid-template-columns:24px 64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.live li:first-child a{border-top:0}
.live li a:hover b{color:var(--accent-text)}
.live .pos{font-weight:900;color:var(--muted);font-size:14px}
.live .th{width:64px;height:37px;border-radius:6px;overflow:hidden;position:relative;background:#0B0C0E}
.live .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.live b{font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live .bar{display:block;height:6px;border-radius:3px;background:var(--accent);margin-top:5px;opacity:.85}
.live .cnt{font-weight:800;font-size:15px;text-align:right}
.live .cnt small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.facts{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;display:grid;gap:16px;align-content:start}
.facts h3{font-size:18px}
.facts .row{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:15px}
.facts .row b{font-size:22px;font-weight:900}
.facts p{font-size:14px;color:var(--muted)}

/* Rankingi */
.ranks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1060px){.ranks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ranks{grid-template-columns:1fr}}
.rank{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 16px 12px;display:flex;flex-direction:column}
.rank h3{font-size:16px;font-weight:900}
.rank ol{list-style:none;margin:10px 0 0;padding:0}
.rank li a{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px}
.rank li a:hover .nm{color:var(--accent-text)}
.rank .pos{font-weight:900;color:var(--muted);font-size:13px}
.rank .nm{font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.rank .all{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px;font-weight:800;color:var(--accent-text)}
.rank .all:hover{text-decoration:underline}

/* Lista: narzędzia */
.toolbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:16px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.f{font-size:14px;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:6px 13px;border-radius:var(--r-s);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.f svg{width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.f:hover{border-color:var(--accent)}
.f[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:#fff}
.toolbar .right{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.toolbar select{font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:7px 10px}
.count{font-size:14px;color:var(--muted)}
.pagehead{margin-top:14px;margin-bottom:16px}
.pagehead h1{font-size:clamp(28px,3.6vw,40px);font-weight:900}
.pagehead p{color:var(--muted);margin-top:4px;max-width:70ch}

/* Metoda */
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px;align-items:start}
@media (max-width:860px){.how{grid-template-columns:1fr;gap:24px}}
.how .lead h2{font-size:clamp(26px,3vw,34px);font-weight:900;line-height:1.1}
.how .lead p{color:var(--muted);font-size:16.5px;margin-top:12px;max-width:52ch}
.how ul{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow)}
.how li{padding:20px 24px;border-top:1px solid var(--line)}
.how li:first-child{border-top:0}
.how h3{font-size:18px}
.how li p{color:var(--muted);font-size:15.5px;margin-top:4px;max-width:60ch}
.legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px;font-size:14px;color:var(--muted);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:7px}

/* Produkt */
.crumbs{padding-block:20px 0;font-size:14px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--accent-text)}
.p-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding-block:16px 20px;align-items:start}
@media (max-width:900px){.p-top{grid-template-columns:1fr}}
.p-top .media{border-radius:var(--r);box-shadow:var(--shadow);aspect-ratio:4/3}
.p-top .media.photo{aspect-ratio:616/353}
.p-info{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:26px;display:flex;flex-direction:column;gap:18px}
@media (max-width:560px){.p-info{padding:20px}}
.p-info h1{font-size:clamp(28px,3.4vw,40px);font-weight:900;line-height:1.05;letter-spacing:-0.03em}
.score-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.score-line .meta{display:grid;gap:3px;font-size:14.5px}
.buy{border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.buy .price{font-size:28px}
.buy .acts{display:flex;gap:8px;flex-wrap:wrap}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
@media (max-width:900px){.quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qcard{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;display:grid;gap:4px;align-content:start}
.qcard .k{font-size:13px;color:var(--muted)}
.qcard .v{font-size:19px;font-weight:900;display:flex;align-items:center;gap:8px}
.qcard .s{font-size:13px;color:var(--muted)}
@media (max-width:560px){.qcard{padding:14px}.qcard .v,.qcard .pl{font-size:16px}.qcard .pl svg{width:21px;height:14px}}
.qcard .pl{font-size:19px;font-weight:900}
.qcard .pl svg{width:27px;height:18px}
.p-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start;padding-bottom:28px}
@media (max-width:960px){.p-grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
@media (max-width:560px){.panel{padding:18px}}
.stack{display:grid;gap:16px}
.panel h2{font-size:20px;font-weight:900;margin-bottom:4px}
.long{font-size:17px;line-height:1.65;max-width:68ch;margin-top:10px}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media (max-width:560px){.pc{grid-template-columns:1fr}}
.pc h4{margin:0 0 8px;font-size:14px;font-weight:800}
.pc ul{list-style:none;padding:0;margin:0;display:grid;gap:7px;font-size:15.5px}
.pc li{display:grid;grid-template-columns:22px 1fr;gap:4px}
.pc li::before{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:12px;font-weight:900;margin-top:2px}
.pc .plus li::before{content:"+";background:var(--top-bg);color:var(--top)}
.pc .minus li::before{content:"-";background:var(--low-bg);color:var(--low)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.split>div{background:var(--sunk);border-radius:12px;padding:14px}
details.srcs{margin-top:14px}
details.srcs summary{cursor:pointer;font-weight:800;font-size:15px;color:var(--accent-text);padding:8px 0;list-style:none}
details.srcs summary::-webkit-details-marker{display:none}
details.srcs summary::after{content:" ›";display:inline-block;transition:transform .15s}
details.srcs[open] summary::after{transform:rotate(90deg)}
.split .k{font-size:13px;color:var(--muted)}
.split .v{font-size:28px;font-weight:900;margin-top:2px}
.split .s{font-size:13px;color:var(--muted)}
.tablewrap{overflow-x:auto}
.src-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.src-table th{text-align:left;font-size:12.5px;font-weight:800;color:var(--muted);padding:0 8px 8px 0;border-bottom:1px solid var(--line)}
.src-table td{padding:11px 8px 11px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.src-table td:last-child,.src-table th:last-child{text-align:right;padding-right:0}
.src-table .raw{color:var(--muted);font-size:13.5px}
.src-table a{color:var(--accent-text);font-weight:700}
.src-table a:hover{text-decoration:underline}
.src-table tr.g th{padding-top:18px;color:var(--ink);font-size:14px;border-bottom:2px solid var(--ink)}
.bar-s{height:7px;border-radius:4px;overflow:hidden;min-width:60px}
.bar-s i{display:block;height:100%;border-radius:4px}
.b-top{background:var(--top)} .b-good{background:var(--good)} .b-ok{background:var(--ok)} .b-low{background:var(--low)}
dl.specs{margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
dl.specs div{background:var(--sunk);border-radius:12px;padding:12px 14px;min-width:0}
dl.specs div.wide{grid-column:1/-1}
dl.specs dt{color:var(--muted);font-size:13px}
dl.specs dd{margin:3px 0 0;font-weight:800;font-size:15.5px;line-height:1.35;overflow-wrap:anywhere}
.voice{border:2px dashed var(--line);box-shadow:none;background:transparent}
.note{font-size:13px;color:var(--muted);margin-top:10px}


/* Po polsku */
.plbanner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 24px;transition:transform .18s}
.plbanner:hover{transform:translateY(-2px)}
.plbanner:hover b{color:var(--accent-text)}
.plbanner .bigflag{width:64px;height:40px;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.plbanner .bigflag svg{width:100%;height:100%;display:block}
.plbanner b{display:block;font-size:20px;font-weight:900}
.plbanner span{color:var(--muted);font-size:15px}
.plbanner .covers{display:flex}
.plbanner .covers img{width:84px;height:48px;object-fit:cover;border-radius:6px;margin-left:-18px;box-shadow:0 0 0 3px var(--surface)}
@media (max-width:760px){.plbanner{grid-template-columns:auto 1fr}.plbanner .covers{display:none}}
.plhead{display:flex;gap:18px;align-items:center}
.plhead .bigflag{width:72px;height:45px;border-radius:7px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.2);flex:none}
.plhead .bigflag svg{width:100%;height:100%;display:block}


/* Nowości i zapowiedzi */
.chip.new{background:var(--top)}
.chip.zap{background:#5B5FE8}
.zap .media{aspect-ratio:16/10}
.when{display:flex;align-items:baseline;gap:8px;font-size:14px}
.when b{font-size:17px;font-weight:900;color:var(--accent-text)}
.countdown{position:absolute;right:12px;bottom:12px;z-index:2;background:rgba(14,15,17,.82);color:#fff;border-radius:10px;padding:6px 10px;text-align:center;line-height:1.1;backdrop-filter:blur(6px)}
.countdown b{display:block;font-size:20px;font-weight:900}
.countdown small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.85}


/* Platformy */
.plats{display:flex;flex-wrap:wrap;gap:4px}
.plat{font-size:11px;font-weight:800;letter-spacing:.02em;padding:2px 6px;border-radius:5px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.plat.p-pc{background:var(--ink);color:var(--bg)}
.plat.p-ps{background:#0070D1;color:#fff}
.plat.p-xb{background:#107C10;color:#fff}
.plat.p-ns{background:#E60012;color:#fff}
.plat.p-mob{background:#5f6670;color:#fff}
.plat.p-vr{background:#1c1e5c;color:#fff}
.stores{display:flex;flex-wrap:wrap;gap:6px}
.store{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;padding:6px 10px;border-radius:8px;color:#fff;text-decoration:none;white-space:nowrap}
.store svg{width:12px;height:12px;opacity:.8}
.store:hover{filter:brightness(1.15)}
.store.s-steam{background:#1b2838}
.store.s-epic{background:#2a2a2a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.store.s-gog{background:#86328A}
.store.s-ps{background:#0070D1}
.store.s-ns{background:#E60012}
.p-info .plats .plat,.zap-plats .plat{font-size:13px;padding:4px 9px;border-radius:7px}
dl.specs.full{grid-template-columns:1fr}
dl.specs.full div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;align-items:baseline;background:transparent;border-radius:0;padding:9px 0;border-top:1px solid var(--line)}
dl.specs.full div:first-child{border-top:0}
dl.specs.full dd{margin:0;font-size:14px;font-weight:600;line-height:1.45}
dl.specs.full dt{font-size:13px}
ul.sv{list-style:none;margin:0;padding:0;display:grid;gap:4px}
ul.sv li{position:relative;padding-left:12px}
ul.sv li::before{content:"";position:absolute;left:0;top:.6em;width:4px;height:4px;border-radius:50%;background:var(--muted)}
.sv-k{color:var(--muted);font-weight:500}
dl.specs.full .na{color:var(--muted);font-weight:500}


.zap-when{display:grid;gap:2px}
.zap-plats{display:grid;gap:6px}
.zap-plats .k{font-size:13px;color:var(--muted)}
h4.mini{font-size:13px;font-weight:700;color:var(--muted);margin:16px 0 8px}
.zap-when .k{font-size:13px;color:var(--muted)}
.zap-when b{font-size:26px;font-weight:900;color:var(--accent-text);letter-spacing:-0.02em}
.zap-when .cd{font-size:14.5px;font-weight:700}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.shots img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:var(--sunk)}


.req{display:grid;grid-template-columns:minmax(90px,.7fr) 1fr 1fr;margin-top:14px;font-size:14.5px}
.req.one{grid-template-columns:minmax(90px,.7fr) 2fr}
.req>div{padding:10px 8px 10px 0;border-top:1px solid var(--line)}
.req .rh{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-top:0;padding-top:0}
.req .rk{color:var(--muted)}
.req .rv{display:grid;gap:3px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.req .rv span+span{font-weight:500;color:var(--muted)}


.psplit{display:grid;grid-template-columns:minmax(90px,.8fr) 1fr 1fr;margin-top:14px}
.psplit>div{padding:10px 8px 10px 0;border-top:1px solid var(--line)}
.psplit .ps-h{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-top:0;padding-top:0;padding-bottom:8px}
.psplit .ps-k{color:var(--muted);font-size:14.5px;display:flex;align-items:center}
.ps-v b{font-size:24px;font-weight:900;display:block;line-height:1.1}
.ps-v small{font-size:12px;color:var(--muted)}
.ps-note{margin:12px 0 0;font-size:15px;font-weight:600}


.advice{display:grid;gap:3px;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--sunk);border-left:4px solid var(--muted)}
.advice .k{font-size:12.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.advice b{font-size:16.5px}
.advice .t{font-size:14.5px;line-height:1.45}
.advice small{font-size:12px;color:var(--muted);margin-top:2px}
.advice.adv-top{border-left-color:var(--top)} .advice.adv-top b{color:var(--top)}
.advice.adv-good{border-left-color:var(--good)}
.advice.adv-ok{border-left-color:var(--ok)}
.advice.adv-wait{border-left-color:var(--accent)} .advice.adv-wait b{color:var(--accent-text)}
.salebar{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin:14px 0 0;padding:12px 16px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent-text)}
.salebar b{font-size:16px} .salebar span{font-size:14.5px;color:var(--ink)}
a.salebar:hover b{text-decoration:underline}

/* Porównanie */
.cmp-wrap{overflow-x:auto;padding-bottom:8px}
.cmp{border-collapse:separate;border-spacing:0;width:100%;min-width:640px;table-layout:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.cmp th,.cmp td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;font-size:15px;overflow-wrap:anywhere}
.cmp th[scope="row"]{width:170px;color:var(--muted);font-weight:600;font-size:13.5px;background:var(--sunk)}
.cmp thead td{vertical-align:bottom}
.cmp .media{aspect-ratio:16/10;border-radius:12px;margin-bottom:10px}
.cmp h3{font-size:17px}
.cmp .best{color:var(--top);font-weight:900}
.cmp .rm{margin-top:8px;font-size:13px;font-weight:700;color:var(--muted);background:none;border:0;padding:0;cursor:pointer}
.cmp .rm:hover{color:var(--low)}
.tray{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(160%);z-index:45;background:var(--bar);color:var(--bar-ink);border-radius:14px;box-shadow:var(--shadow-up);padding:10px 10px 10px 16px;display:flex;align-items:center;gap:14px;transition:transform .25s ease;max-width:calc(100vw - 32px)}
.tray.on{transform:translateX(-50%) translateY(0)}
.tray .items{display:flex;gap:6px}
.tray .items span{width:44px;height:30px;border-radius:6px;overflow:hidden;position:relative;background:#fff}
.tray .items img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.tray .items span.photo img{object-fit:cover}
.tray small{color:var(--bar-muted);font-size:13px;white-space:nowrap}
.toast{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:50;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r-s);font-size:14px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}

footer{border-top:1px solid var(--line);color:var(--muted);padding-block:28px 90px;margin-top:48px;font-size:14px}
footer .wrap{display:grid;gap:18px}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.fcols p{margin:6px 0 0;max-width:46ch}
.fcols nav{display:grid;gap:6px;align-content:start}
.fcols nav a{color:var(--muted)}
.fcols nav a:hover{color:var(--ink)}
footer .fine{margin:0;font-size:13px}
@media (max-width:700px){.fcols{grid-template-columns:1fr 1fr}.fcols>div{grid-column:1/-1}}
.about{max-width:760px}
.about h2{font-size:22px;margin:34px 0 10px;scroll-margin-top:90px}
.about p,.about li{font-size:16.5px;line-height:1.65}
.about ul{padding-left:20px;display:grid;gap:6px}
footer b{color:var(--ink)}
.empty{padding:40px 0;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}