/* =====================================================================
   dvd.poral.net — style (assets/dvd.css)
   Dwa motywy: jasny (domyślny) i ciemny (paleta ciemnego blu-ray.info / poral.net).
   Bez ciężkich efektów: brak rozmyć tła, animowanych plam i stałego tła.
   ===================================================================== */
:root, html[data-motyw="jasny"] {
    color-scheme: light;
    --bg: #f4f6fa; --tlo-glow: #e1eafa;
    --karta: #fff; --karta-2: #f8fafc; --karta-mocna: #fff;
    --linia: #e3e8f0; --linia-mocna: #cfd7e3;
    --tekst: #0f172a; --tekst-2: #4b5567; --tekst-3: #8a94a6;
    --a1: #2563eb; --a2: #3b82f6; --a-tekst: #fff;
    --wiersz-hover: #f1f5fd; --pasek: #fafbfd;
    --ok: #16a34a; --blad: #dc2626; --info: #2563eb; --uwaga: #d97706;
    --cien: 0 1px 2px rgba(15,23,42,.04), 0 10px 26px -18px rgba(15,23,42,.25);
}
html[data-motyw="ciemny"] {
    color-scheme: dark;
    --bg: #0d1324; --tlo-glow: #1b2552;
    --karta: #131a2e; --karta-2: #182039; --karta-mocna: #131a2e;
    --linia: #26304d; --linia-mocna: #34405f;
    --tekst: #f1f5f9; --tekst-2: #c3cde0; --tekst-3: #94a3b8;
    --a1: #38bdf8; --a2: #818cf8; --a-tekst: #04111f;
    --wiersz-hover: #1a2340; --pasek: #151c32;
    --ok: #4ade80; --blad: #f87171; --info: #38bdf8; --uwaga: #fbbf24;
    --cien: 0 6px 20px rgba(0,0,0,.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    background: radial-gradient(1100px 420px at 50% -140px, var(--tlo-glow), transparent 70%) no-repeat, var(--bg);
    color: var(--tekst);
    font: 15px/1.55 Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--a1); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--karta-2); border: 1px solid var(--linia); padding: 1px 6px; border-radius: 6px; }
h1, h2, h3 { font-family: 'Space Grotesk', Inter, sans-serif; letter-spacing: -.01em; line-height: 1.2; }
:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- nagłówek ---------- */
.gora { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--linia); }
.gora-wnetrze { max-width: 1180px; margin: 0 auto; padding: 10px 18px; display: flex; align-items: center; gap: 14px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--tekst); font: 700 20px/1 'Space Grotesk', Inter, sans-serif; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo b { background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo--duze { font-size: 26px; margin: 10px 0 22px; }
.gora-szukaj { flex: 1; position: relative; max-width: 440px; margin-left: auto; }
.gora-szukaj i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--tekst-3); font-size: 14px; }
.gora-szukaj input { width: 100%; height: 40px; padding: 0 14px 0 36px; border-radius: 999px; border: 1px solid var(--linia); background: var(--karta); color: var(--tekst); font: inherit; }
.gora-szukaj input:focus { border-color: var(--a1); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 20%, transparent); }
.gora-menu { display: flex; align-items: center; gap: 6px; }
.gora-link {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 13px;
    border-radius: 999px; border: 1px solid var(--linia); background: var(--karta);
    color: var(--tekst); font: 600 13px/1 Inter, sans-serif; cursor: pointer; white-space: nowrap; list-style: none;
}
.gora-link::-webkit-details-marker { display: none; }
.gora-link:hover { text-decoration: none; border-color: var(--linia-mocna); background: var(--karta-2); }
.gora-link--akcent { background: var(--a1); border-color: var(--a1); color: var(--a-tekst); }
.gora-link--akcent:hover { background: var(--a2); border-color: var(--a2); }
html[data-motyw="ciemny"] .ik-jasny, html[data-motyw="jasny"] .ik-ciemny { display: none; }
.konto-menu { position: relative; }
.konto-lista { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; padding: 6px; background: var(--karta); border: 1px solid var(--linia); border-radius: 14px; box-shadow: var(--cien); z-index: 30; }
.konto-lista a, .konto-lista button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 12px; border-radius: 9px; border: 0; background: none; color: var(--tekst); font: 500 14px/1.2 Inter, sans-serif; cursor: pointer; text-align: left; }
.konto-lista a:hover, .konto-lista button:hover { background: var(--wiersz-hover); text-decoration: none; }
.konto-lista i { width: 16px; color: var(--tekst-3); }
.konto-lista form { margin: 0; }

/* ---------- układ ---------- */
.strona { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 22px 18px 50px; }
.strona--waska { max-width: 760px; }
.sekcja { margin-top: 38px; }
.sekcja-tytul { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 13px/1.2 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-2); }
.sekcja-tytul > i { color: var(--tekst-3); }
.sekcja-tytul::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--linia-mocna), transparent); order: 2; }
.sekcja-wiecej { order: 3; text-transform: none; letter-spacing: 0; font-size: 13px; }
.tytul-strony { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; font-size: clamp(22px, 3vw, 30px); }
.tytul-strony > i { color: var(--a1); font-size: .8em; }
.ile { font: 600 13px/1 Inter, sans-serif; padding: 6px 10px; border-radius: 999px; background: var(--karta-2); border: 1px solid var(--linia); color: var(--tekst-2); }
.podsumowanie { color: var(--tekst-2); margin: -4px 0 16px; }
.maly, .opc { color: var(--tekst-3); font-size: 13px; font-weight: 400; }
.pusto { padding: 26px; text-align: center; color: var(--tekst-2); background: var(--karta); border: 1px dashed var(--linia-mocna); border-radius: 16px; }

.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; padding: 20px; box-shadow: var(--cien); }
.karta + .karta { margin-top: 16px; }
.spisy > .karta, .kafle-stat > .karta, .hero .karta { margin-top: 0; }
.karta--srodek { text-align: center; max-width: 640px; margin: 20px auto; padding: 32px 24px; }
.karta--waska { max-width: 520px; margin: 10px auto; }
.karta h1 { margin-top: 0; font-size: 24px; }
.karta h1 > i { color: var(--a1); margin-right: 4px; }
.maly-tytul { margin: 0 0 12px; font: 600 13px/1.2 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-2); }
.maly-tytul i { color: var(--tekst-3); margin-right: 4px; }

/* ---------- przyciski, komunikaty ---------- */
.przycisk {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px;
    border-radius: 12px; border: 1px solid var(--a1); background: var(--a1); color: var(--a-tekst);
    font: 600 14px/1 Inter, sans-serif; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, transform .1s ease;
}
.przycisk:hover { background: var(--a2); border-color: var(--a2); text-decoration: none; }
.przycisk:active { transform: scale(.98); }
.przycisk:disabled { opacity: .5; cursor: not-allowed; }
.przycisk--jasny { background: var(--karta); color: var(--tekst); border-color: var(--linia-mocna); }
.przycisk--jasny:hover { background: var(--karta-2); border-color: var(--a1); }
.przycisk--czerwony { background: var(--blad); border-color: var(--blad); color: #fff; }
.przycisk--czerwony:hover { background: var(--blad); filter: brightness(1.1); }
.przycisk--maly { height: 32px; padding: 0 11px; font-size: 13px; border-radius: 9px; }
.przycisk--pelny { width: 100%; }
.akcje { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.komunikat { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; border: 1px solid; border-left-width: 4px; background: var(--karta); font-size: 14px; }
.komunikat--ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--linia)); border-left-color: var(--ok); }
.komunikat--blad { border-color: color-mix(in srgb, var(--blad) 40%, var(--linia)); border-left-color: var(--blad); }
.komunikat--info { border-color: color-mix(in srgb, var(--info) 35%, var(--linia)); border-left-color: var(--info); }
.znacznik { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font: 600 12px/1.4 Inter, sans-serif; background: var(--karta-2); border: 1px solid var(--linia); color: var(--tekst-2); }
a.znacznik:hover { border-color: var(--a1); text-decoration: none; }

/* ---------- strona główna ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: stretch; margin-top: 8px; }
.odznaka { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--karta); border: 1px solid var(--linia); font: 600 12px/1 Inter, sans-serif; color: var(--tekst-2); }
.odznaka i { color: var(--a1); }
.hero h1 { margin: 14px 0 10px; font-size: clamp(30px, 5vw, 48px); }
.akcent { background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--tekst-2); max-width: 60ch; margin: 0 0 18px; }
.hero-szukaj { position: relative; display: flex; gap: 8px; max-width: 620px; }
.hero-szukaj--strona { margin-bottom: 20px; }
.hero-szukaj > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--tekst-3); }
.hero-szukaj input { flex: 1; min-width: 0; height: 52px; padding: 0 16px 0 44px; border-radius: 14px; border: 1px solid var(--linia-mocna); background: var(--karta); color: var(--tekst); font: 500 16px Inter, sans-serif; }
.hero-szukaj input:focus { outline: none; border-color: var(--a1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a1) 18%, transparent); }
.hero-szukaj .przycisk { height: 52px; border-radius: 14px; padding: 0 22px; }
.liczniki { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--tekst-2); font-size: 14px; }
.liczniki strong { color: var(--tekst); font: 700 20px/1 'Space Grotesk', Inter, sans-serif; margin-right: 3px; }
.hero-bok { display: flex; }
.dnia { display: flex; flex-direction: column; gap: 6px; width: 100%; color: var(--tekst); border-top: 3px solid var(--a1); }
a.dnia:hover { text-decoration: none; border-color: var(--a1); }
a.dnia:hover .dnia-tytul { color: var(--a1); }
.dnia-etykieta { font: 600 12px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--a1); }
.dnia-tytul { font: 700 22px/1.2 'Space Grotesk', Inter, sans-serif; margin-top: 6px; transition: color .15s ease; }
.dnia-org { color: var(--tekst-2); }
.dnia-dane { color: var(--tekst-3); font-size: 14px; }
.dnia .kod { margin-top: auto; width: 150px; padding-top: 10px; color: var(--tekst); }
.dnia--pusty { align-items: flex-start; }
.spisy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.spis-link { display: flex; align-items: center; gap: 10px; padding: 16px 18px; color: var(--tekst); font-weight: 600; }
.spis-link i { color: var(--a1); }
.spis-link:hover { text-decoration: none; border-color: var(--a1); }
.pigulki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pigulki a { display: inline-flex; gap: 8px; align-items: center; padding: 7px 12px; border-radius: 999px; background: var(--karta); border: 1px solid var(--linia); color: var(--tekst); font-size: 13.5px; }
.pigulki a:hover { border-color: var(--a1); text-decoration: none; }
.pigulki span { color: var(--tekst-3); font-size: 12px; }
.zacheta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-left: 4px solid var(--a1); }
.zacheta strong { display: block; font: 600 17px/1.3 'Space Grotesk', Inter, sans-serif; }
.zacheta span { color: var(--tekst-2); }

/* ---------- alfabet, spisy ---------- */
.alfabet { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 16px; }
.alfabet a { min-width: 36px; height: 36px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--karta); border: 1px solid var(--linia); color: var(--tekst); font: 600 14px/1 Inter, sans-serif; }
.alfabet a:hover { border-color: var(--a1); text-decoration: none; }
.alfabet a.akt { background: var(--a1); border-color: var(--a1); color: var(--a-tekst); }
.spis { columns: 4 220px; column-gap: 18px; }
.spis a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 9px; color: var(--tekst); break-inside: avoid; }
.spis a:hover { background: var(--karta); text-decoration: none; color: var(--a1); }
.spis a span { color: var(--tekst-3); font-size: 13px; }
.spis--lata { columns: 6 120px; }
.filtr { position: relative; max-width: 360px; margin: 0 0 14px; }
.filtr i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tekst-3); font-size: 13px; }
.filtr input { width: 100%; height: 38px; padding: 0 12px 0 34px; border-radius: 10px; border: 1px solid var(--linia); background: var(--karta); color: var(--tekst); font: inherit; }

/* ---------- tabela wydań ---------- */
.tabela-ramka { background: var(--karta); border: 1px solid var(--linia); border-radius: 16px; overflow: hidden; box-shadow: var(--cien); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; padding: 11px 14px; background: var(--pasek); border-bottom: 1px solid var(--linia); font: 600 12px/1.2 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-3); white-space: nowrap; }
.tabela th a { color: inherit; }
.tabela th a:hover { color: var(--tekst); text-decoration: none; }
.tabela th i { font-size: 11px; opacity: .5; margin-left: 2px; }
.tabela th.sort-akt { color: var(--a1); }
.tabela th.sort-akt i { opacity: 1; }
.tabela td { padding: 10px 14px; border-bottom: 1px solid var(--linia); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--wiersz-hover); }
.k-tytul a { color: var(--tekst); }
.k-tytul a:hover strong { color: var(--a1); }
.k-tytul strong { font-weight: 600; }
.org { display: block; color: var(--tekst-3); font-size: 13px; }
.ma-okladke { color: var(--tekst-3); font-size: 12px; margin-left: 6px; }
.k-rok, .k-plyty, .k-data { white-space: nowrap; color: var(--tekst-2); }
.k-plyty { text-align: center; }
.k-dys a { color: var(--tekst-2); }
.k-dys a:hover { color: var(--a1); }
.ean { font: 500 13.5px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; color: var(--a1); white-space: nowrap; }
.ean small { color: var(--tekst-3); }
.strony { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 20px 0 0; }
.strony a, .strony span { min-width: 38px; height: 38px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--linia); background: var(--karta); color: var(--tekst); font-weight: 600; font-size: 14px; }
.strony a:hover { border-color: var(--a1); text-decoration: none; }
.strony .akt { background: var(--a1); border-color: var(--a1); color: var(--a-tekst); }
.strony .strony-przerwa { border: 0; background: none; min-width: 20px; color: var(--tekst-3); }

/* ---------- strona wydania ---------- */
.okruszki { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst-3); margin-bottom: 8px; }
.okruszki i { font-size: 9px; }
.okruszki a { color: var(--tekst-2); }
.wydanie-glowa h1 { margin: 4px 0 6px; font-size: clamp(26px, 4vw, 38px); }
.wydanie-pod { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 18px; color: var(--tekst-2); font-size: 16px; }
.wydanie-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.ean-karta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ean-karta-kod { background: #fff; color: #000; padding: 10px 12px 6px; border-radius: 10px; border: 1px solid var(--linia); }
.ean-karta-kod .kod { width: 190px; display: block; }
.ean-karta-nr { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.etykieta { font: 600 12px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-3); }
.ean--duzy { font-size: clamp(22px, 3.4vw, 30px); font-weight: 600; color: var(--tekst); letter-spacing: .06em; }
.kopiuj { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--linia); background: var(--karta-2); color: var(--tekst-2); font: 600 12px/1 Inter, sans-serif; cursor: pointer; }
.kopiuj:hover { border-color: var(--a1); color: var(--a1); }
.kopiuj.ok { border-color: var(--ok); color: var(--ok); }
.ostrzezenie { color: var(--uwaga); font-size: 13px; }
.ean-duzy { display: flex; justify-content: center; margin-bottom: 8px; }
.ean-duzy .kod { width: 200px; background: #fff; color: #000; padding: 10px; border-radius: 10px; }
.dane { display: grid; grid-template-columns: minmax(130px, max-content) minmax(0, 1fr); margin: 0; }
.dane dt, .dane dd { padding: 10px 0; border-bottom: 1px solid var(--linia); margin: 0; }
.dane dt { color: var(--tekst-3); font-size: 13.5px; padding-right: 18px; }
.dane dd { font-weight: 500; overflow-wrap: anywhere; }
.dane dt:last-of-type, .dane dd:last-of-type { border-bottom: 0; }
.brak { color: var(--tekst-3); font-weight: 400; }
.wydanie-info { margin: 14px 0 0; font-size: 13px; color: var(--tekst-3); }
.sklepy-linki { display: flex; flex-wrap: wrap; gap: 8px; }
.sklepy-linki a { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--linia); background: var(--karta-2); color: var(--tekst); font-weight: 600; font-size: 14px; }
.sklepy-linki a:hover { border-color: var(--a1); color: var(--a1); text-decoration: none; }
.wydanie-bok { position: sticky; top: 80px; }
.brak-zdjec { text-align: center; color: var(--tekst-3); margin: 6px 0 14px; }
.brak-zdjec i { font-size: 36px; opacity: .5; margin-bottom: 6px; }
.zamek { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 10px 4px 4px; }
.zamek > i { font-size: 30px; color: var(--a1); width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--a1) 12%, transparent); }
.zamek span { color: var(--tekst-2); font-size: 14px; }
.link-maly { font-size: 13px; }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.galeria-el { margin: 0; }
.galeria-el--okladka { grid-column: 1 / -1; }
.galeria-el--okladka img { max-width: 230px; margin: 0 auto; }
.galeria-el img { width: 100%; border-radius: 10px; border: 1px solid var(--linia); background: var(--karta-2); }
.galeria-el figcaption { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--tekst-3); }
.powiekszenie { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(3, 6, 15, .86); cursor: zoom-out; }
.powiekszenie img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }

/* ---------- formularze ---------- */
.formularz h2 { font-size: 18px; margin: 22px 0 10px; }
.pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.pole { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.formularz > .pole { margin-bottom: 14px; }
.pole--szerokie, .pole--ean { grid-column: 1 / -1; }
.pole label { font: 600 13.5px/1.3 Inter, sans-serif; color: var(--tekst); }
.wym { color: var(--blad); }
.pole input, .pole textarea, .pole select {
    width: 100%; min-height: 44px; padding: 10px 13px; border-radius: 11px; border: 1px solid var(--linia-mocna);
    background: var(--karta); color: var(--tekst); font: 15px/1.4 Inter, sans-serif;
}
.pole input:focus, .pole textarea:focus, .pole select:focus { outline: none; border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 18%, transparent); }
.pole input[readonly] { background: var(--karta-2); color: var(--tekst-2); }
.pole--ean input { font: 600 22px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; max-width: 340px; }
.pole--ean.ean-ok input { border-color: var(--ok); }
.pole--blad input, .pole--blad textarea { border-color: var(--blad); }
.pole-blad { color: var(--blad); font-size: 13px; }
.pole-pomoc { color: var(--tekst-3); font-size: 13px; }
.pole-pomoc a { font-weight: 600; }
.pole--ukryte { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zaznacz { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: 14px; color: var(--tekst-2); cursor: pointer; }
.zaznacz input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--a1); flex: none; }
.zdjecia { margin: 22px 0 0; padding: 16px; border: 1px dashed var(--linia-mocna); border-radius: 14px; }
.zdjecia legend { padding: 0 6px; font-weight: 600; }
.zdjecia-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.zdjecie-pole { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.zdjecie-nazwa { font-weight: 600; }
.zdjecie-pole img { border-radius: 8px; border: 1px solid var(--linia); }
.zdjecie-pole input[type=file] { font-size: 13px; color: var(--tekst-2); max-width: 100%; }
.konto-linki { text-align: center; font-size: 14px; color: var(--tekst-3); margin: 16px 0 0; }
.wymagania { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.wymagania .tak i { color: var(--ok); }
.wymagania .nie { color: var(--blad); font-weight: 600; }

/* ---------- reklama (jak ericsson.poral.net / poral.net) ---------- */
.pp-miejsce { position: relative; margin: 22px 0; padding: 22px 14px 12px; min-height: 130px; border: 1px dashed var(--linia-mocna); border-radius: 16px; background: color-mix(in srgb, var(--karta) 60%, transparent); overflow: hidden; }
.pp-etykieta { position: absolute; top: 6px; left: 14px; font: 600 10px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-3); }
.pp-miejsce--info { min-height: 0; padding: 26px 18px 16px; border-style: solid; background: var(--karta-mocna); border-left: 4px solid var(--a1); }
.pp-info { display: flex; gap: 14px; align-items: flex-start; }
.pp-ikona { flex: none; width: 38px; height: 38px; color: var(--a1); }
.pp-info strong { display: block; margin-bottom: 3px; font: 600 16px/1.3 'Space Grotesk', Inter, sans-serif; }
.pp-info p { margin: 0; color: var(--tekst-2); font-size: 14px; }
.pp-admin { min-height: 0; display: grid; place-items: center; padding: 18px; color: var(--tekst-3); font-size: 14px; text-align: center; }

/* ---------- stopka ---------- */
.stopka { border-top: 1px solid var(--linia); padding: 24px 18px 30px; text-align: center; color: var(--tekst-3); font-size: 13.5px; }
.stopka-linki { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 10px; }
.stopka-linki a { color: var(--tekst-2); }
.stopka p { margin: 0; }
.stopka p a { color: inherit; }

/* ---------- administracja ---------- */
.admin-uklad { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.admin-menu { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 3px; padding: 8px; }
.admin-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--tekst); font-weight: 500; font-size: 14px; }
.admin-menu a i { width: 18px; color: var(--tekst-3); }
.admin-menu a:hover { background: var(--wiersz-hover); text-decoration: none; }
.admin-menu a.akt { background: var(--a1); color: var(--a-tekst); }
.admin-menu a.akt i { color: inherit; }
.admin-menu .licz { margin-left: auto; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--blad); color: #fff; }
.kafle-stat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kafel-stat { padding: 16px 18px; }
.kafel-stat strong { display: block; font: 700 26px/1.1 'Space Grotesk', Inter, sans-serif; }
.kafel-stat span { color: var(--tekst-2); font-size: 13px; }
.tabela--admin td { vertical-align: middle; }
.tabela--admin form { display: inline; margin: 0; }
.wiersz-akcje { display: flex; gap: 6px; flex-wrap: wrap; }
.roznice { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0; }
.roznice th, .roznice td { padding: 7px 10px; border: 1px solid var(--linia); text-align: left; vertical-align: top; }
.roznice .stare { color: var(--blad); text-decoration: line-through; }
.roznice .nowe { color: var(--ok); font-weight: 600; }
.pasek-postepu { height: 12px; border-radius: 99px; background: var(--karta-2); border: 1px solid var(--linia); overflow: hidden; margin: 14px 0; }
.pasek-postepu span { display: block; height: 100%; background: linear-gradient(90deg, var(--a1), var(--a2)); }
.filtr-admin { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filtr-admin input, .filtr-admin select { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linia-mocna); background: var(--karta); color: var(--tekst); font: inherit; }
.podglad { max-height: 420px; overflow: auto; }

/* ---------- telefon i tablet ---------- */
@media (max-width: 980px) {
    .hero { grid-template-columns: minmax(0, 1fr); }
    .wydanie-uklad { grid-template-columns: minmax(0, 1fr); }
    .wydanie-bok { position: static; }
    .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .galeria-el--okladka { grid-column: auto; }
    .spisy, .kafle-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-uklad { grid-template-columns: minmax(0, 1fr); }
    .admin-menu { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 760px) {
    .gora-wnetrze { flex-wrap: wrap; gap: 10px; padding: 8px 14px; }
    .gora-szukaj { order: 3; flex-basis: 100%; max-width: none; }
    .gora-menu { margin-left: auto; }
    .gora-link span { display: none; }
    .gora-link { padding: 0 12px; }
    .strona { padding: 16px 14px 40px; }
    .karta { padding: 16px; border-radius: 16px; }
    .hero-szukaj { flex-direction: column; }
    .hero-szukaj > i { top: 26px; }
    .hero-szukaj input { flex: none; width: 100%; }
    .alfabet { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-right: -14px; padding-right: 14px; scrollbar-width: thin; }
    .alfabet a { flex: none; }
    .pola, .zdjecia-siatka { grid-template-columns: minmax(0, 1fr); }
    .dane { grid-template-columns: minmax(0, 1fr); }
    .dane dt { border-bottom: 0; padding-bottom: 0; }
    .dane dd { padding-top: 2px; }
    /* tabela jako lista kart: EAN, tytuł, rok · dystrybutor · płyty */
    .tabela:not(.tabela--admin) thead { display: none; }
    .tabela:not(.tabela--admin), .tabela:not(.tabela--admin) tbody, .tabela:not(.tabela--admin) tr, .tabela:not(.tabela--admin) td { display: block; }
    .tabela:not(.tabela--admin) tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--linia); }
    .tabela:not(.tabela--admin) tbody tr:last-child { border-bottom: 0; }
    .tabela:not(.tabela--admin) td { padding: 0; border: 0; font-size: 13px; }
    .tabela:not(.tabela--admin) .k-tytul { grid-column: 1 / -1; grid-row: 1; font-size: 14.5px; margin-bottom: 2px; }
    .tabela:not(.tabela--admin) .k-ean { grid-column: 1 / 3; grid-row: 2; }
    .tabela:not(.tabela--admin) .k-plyty { grid-column: 3; grid-row: 2; text-align: right; }
    .tabela:not(.tabela--admin) .k-plyty::after { content: " pł."; color: var(--tekst-3); }
    .tabela:not(.tabela--admin) .k-rok { grid-column: 1; grid-row: 3; }
    .tabela:not(.tabela--admin) .k-dys { grid-column: 2 / -1; grid-row: 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tabela:not(.tabela--admin) .k-data { grid-column: 1 / -1; grid-row: 4; color: var(--tekst-3); }
    .tabela-ramka { overflow-x: auto; }
    .tabela--admin { min-width: 640px; }
    .spis { columns: 1; }
    .spis--lata { columns: 3; }
    .spisy { grid-template-columns: minmax(0, 1fr); }
    .pp-miejsce { min-height: 280px; padding: 20px 8px 8px; }
    .pp-miejsce--info, .pp-admin { min-height: 0; }
    .ean-karta { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* ---------- skan okładki do druku ---------- */
.skan { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--linia); }
.skan img { width: 100%; border-radius: 8px; border: 1px solid var(--linia); background: var(--karta-2); }
.skan .maly { text-align: center; }
.zdjecie-pole--skan { grid-column: 1 / -1; }
@media (min-width: 761px) { .zdjecia-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- kafelki sklepów (jak szukaj_ean.php na blu-ray.info) ---------- */
.szukaj-ean { --se-tlo: var(--karta-2); --se-allegro: #ff5a00; color: var(--tekst); }
.szukaj-naglowek { margin: 0 0 10px; color: var(--tekst-3); font-size: 13.5px; }
.linkbing { color: var(--tekst); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.linkbing:hover { color: var(--a1); }
.sklepy-kafle { display: flex; flex-wrap: wrap; gap: 6px; }
.store-icon {
    width: 70px; height: 70px; border: 1px solid var(--linia); background: var(--se-tlo); color: var(--tekst);
    border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; text-align: center;
    padding: 6px 4px; font-size: 12.5px; line-height: 1.2; filter: brightness(.96);
    transition: border-color .2s ease, filter .2s ease;
}
.store-icon:hover { border-color: var(--a1); filter: brightness(1); text-decoration: none; }
.store-bg { position: relative; overflow: hidden; }
.store-bg::before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 1px/1 Arial, Helvetica, sans-serif; pointer-events: none; opacity: .9; }
.store-bg .store-nazwa { position: relative; font-weight: 700; text-shadow: 0 0 3px var(--se-tlo), 0 0 3px var(--se-tlo), 0 0 6px var(--se-tlo); }
.store-allegro::before { content: "a"; font-size: 104px; color: var(--se-allegro); margin-top: -8px; }
.store-empik::before { content: ","; font-size: 150px; margin-top: -55px; color: var(--tekst-3); }
.store-bluedvd .store-nazwa { font-size: 11px; }
.store-starstore { padding: 4px; overflow: hidden; }
.store-starstore img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* ---------- DVD dnia: mała okładka + niski kod EAN ---------- */
.dnia-uklad { display: flex; gap: 16px; align-items: flex-start; margin-top: 8px; }
.dnia-okladka { flex: none; width: 110px; aspect-ratio: 11 / 16; display: grid; place-items: center; border-radius: 8px; overflow: hidden; background: var(--karta-2); border: 1px solid var(--linia); color: var(--tekst-3); font-size: 34px; }
.dnia-okladka img { width: 100%; height: 100%; object-fit: cover; }
.dnia-opis { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dnia .dnia-tytul { margin-top: 0; font-size: 20px; }
.dnia-kod { display: block; margin-top: 8px; }
.dnia .dnia-kod .kod { width: 150px; padding: 0; margin: 0; color: var(--tekst); }

/* ---------- strona wydania: mały EAN w prawym górnym rogu ---------- */
.wydanie-glowa { position: relative; padding-right: 140px; }
.ean-maly { position: absolute; top: 4px; right: 0; width: 124px; padding: 6px 8px 3px; background: #fff; color: #000; border: 1px solid var(--linia); border-radius: 8px; cursor: zoom-in; transition: box-shadow .15s ease, transform .15s ease; }
.ean-maly:hover { box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .4); transform: translateY(-1px); }
.ean-maly .kod { width: 100%; display: block; }
.ean-okno { border: 0; border-radius: 18px; padding: 24px; background: var(--karta); color: var(--tekst); text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); max-width: min(92vw, 460px); }
.ean-okno::backdrop { background: rgba(3, 6, 15, .7); }
.ean-okno .ean-karta-kod { display: inline-block; background: #fff; color: #000; padding: 14px 16px 8px; border-radius: 12px; }
.ean-okno .kod { width: min(340px, 76vw); display: block; }
.ean-okno .ean--duzy { display: block; margin-top: 12px; }
.ean-okno .akcje { justify-content: center; }
.kopiuj--maly { padding: 3px 8px; font-size: 11.5px; margin-left: 6px; vertical-align: middle; }
.limit { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--karta-2); border: 1px dashed var(--linia-mocna); font-size: 13.5px; color: var(--tekst-2); }
.limit > i { color: var(--a1); font-size: 20px; }
@media (max-width: 760px) {
    .wydanie-glowa { padding-right: 0; }
    .ean-maly { position: static; display: block; width: 130px; margin: 0 0 10px; }
}
.okladka-akcept { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.okladka-akcept-obraz img { width: 100%; max-height: 320px; object-fit: contain; background: var(--karta-2); border: 1px solid var(--linia); border-radius: 10px; }
.okladka-akcept-opis p { margin: 4px 0; }
@media (max-width: 760px) { .okladka-akcept { grid-template-columns: minmax(0, 1fr); } }
.miniatury-gosc { display: flex; gap: 12px; justify-content: center; align-items: flex-start; margin-bottom: 4px; }
.miniatury-gosc figure { margin: 0; text-align: center; }
.miniatury-gosc img { width: 110px; border-radius: 8px; border: 1px solid var(--linia); background: var(--karta-2); pointer-events: none; -webkit-user-drag: none; }
.miniatury-gosc-skan img { width: 160px; }
.miniatury-gosc figcaption { margin-top: 4px; font-size: 12px; color: var(--tekst-3); }
.miniatury-gosc + .zamek > i { width: 44px; height: 44px; font-size: 20px; }

/* ---------- okienka i powiadomienia na środku strony ---------- */
.okno { border: 0; border-radius: 18px; padding: 26px 24px 20px; width: min(92vw, 440px); background: var(--karta); color: var(--tekst); text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); border-top: 4px solid var(--info); }
.okno::backdrop { background: rgba(3, 6, 15, .6); }
.okno--ok { border-top-color: var(--ok); }
.okno--blad { border-top-color: var(--blad); }
.okno-ikona { font-size: 34px; color: var(--info); }
.okno--ok .okno-ikona { color: var(--ok); }
.okno--blad .okno-ikona { color: var(--blad); }
.okno-tytul { display: block; margin: 8px 0 4px; font: 600 18px/1.3 'Space Grotesk', Inter, sans-serif; }
.okno-tresc p { margin: 6px 0; color: var(--tekst-2); font-size: 14.5px; }
.okno-akcje { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.okno-akcje .przycisk { min-width: 110px; }
.powiadomienia { position: fixed; z-index: 90; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 10px; width: min(92vw, 460px); pointer-events: none; }
.powiadomienie { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--karta); color: var(--tekst); border: 1px solid var(--linia); border-left: 5px solid var(--info); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); font-size: 15px; cursor: pointer; animation: pojawPow .25s ease-out; transition: opacity .25s ease, transform .25s ease; }
.powiadomienie > i { font-size: 20px; color: var(--info); margin-top: 1px; }
.powiadomienie span { flex: 1; }
.powiadomienie button { border: 0; background: none; color: var(--tekst-3); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
.powiadomienie--ok { border-left-color: var(--ok); } .powiadomienie--ok > i { color: var(--ok); }
.powiadomienie--blad { border-left-color: var(--blad); } .powiadomienie--blad > i { color: var(--blad); }
.powiadomienie.znika { opacity: 0; transform: scale(.96); }
@keyframes pojawPow { from { opacity: 0; transform: scale(.96); } }

/* ---------- kafelek na plik: przeciągnij albo kliknij ---------- */
.zdjecie-pole { gap: 6px; }
.upuszcz {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 200px; padding: 14px 12px; border-radius: 14px; cursor: pointer; text-align: center; overflow: hidden;
    border: 2px dashed var(--linia-mocna); background: var(--karta-2); color: var(--tekst-2);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.upuszcz:hover, .upuszcz:focus-within { border-color: var(--a1); color: var(--tekst); }
.upuszcz:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 20%, transparent); }
.upuszcz--nad { border-color: var(--a1); border-style: solid; background: color-mix(in srgb, var(--a1) 12%, var(--karta-2)); }
.upuszcz--blad { border-color: var(--blad); }
.upuszcz--szeroki { min-height: 150px; }
.upuszcz--plik { min-height: 120px; }
.upuszcz-wejscie { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upuszcz-plus { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--karta); border: 1px solid var(--linia-mocna); color: var(--a1); font: 300 34px/1 Inter, system-ui, sans-serif; transition: transform .15s ease, background-color .15s ease; }
.upuszcz:hover .upuszcz-plus, .upuszcz--nad .upuszcz-plus { transform: scale(1.08); background: var(--a1); color: var(--a-tekst); border-color: var(--a1); }
.upuszcz-tekst { font-weight: 600; font-size: 13.5px; color: var(--tekst); overflow-wrap: anywhere; max-width: 100%; }
.upuszcz-info { font-size: 12.5px; color: var(--tekst-3); }
.upuszcz-info:empty { display: none; }
.upuszcz-podglad:empty { display: none; }
.upuszcz-podglad img { max-height: 120px; max-width: 100%; border-radius: 8px; border: 1px solid var(--linia); background: var(--karta); }
.upuszcz-podglad img[hidden] { display: none; }
.upuszcz--szeroki .upuszcz-podglad img { max-height: 110px; }
.upuszcz--ma .upuszcz-plus, .upuszcz--wybrany .upuszcz-plus { width: 34px; height: 34px; font-size: 24px; }
.upuszcz--wybrany { border-style: solid; border-color: var(--ok); }
.upuszcz--wybrany .upuszcz-plus { display: none; }
.upuszcz-usun { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linia-mocna); background: var(--karta); color: var(--tekst); font-size: 20px; line-height: 1; cursor: pointer; }
.upuszcz-usun:hover { border-color: var(--blad); color: var(--blad); }
.zaznacz-maly { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
@media (max-width: 760px) {
    /* telefon: przód, tył i płyta obok siebie w małych kafelkach, skan pod nimi */
    .zdjecia { padding: 12px; }
    .zdjecia-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .zdjecie-pole--skan { grid-column: 1 / -1; }
    .zdjecie-pole:not(.zdjecie-pole--skan) > span.maly { display: none; }
    .zdjecie-pole:not(.zdjecie-pole--skan) .zdjecie-nazwa { min-height: 2.5em; display: flex; align-items: flex-end; line-height: 1.25; }
    .zaznacz-maly { font-size: 12px; }
    .zdjecie-nazwa { font-size: 12.5px; }
    .upuszcz { min-height: 130px; padding: 10px 6px; gap: 4px; border-radius: 12px; }
    .upuszcz--szeroki { min-height: 120px; }
    .zdjecie-pole:not(.zdjecie-pole--skan) .upuszcz:not(.upuszcz--wybrany) .upuszcz-tekst { display: none; }
    .upuszcz-plus { width: 40px; height: 40px; font-size: 28px; }
    .upuszcz-podglad img { max-height: 80px; }
    .upuszcz-tekst { font-size: 12px; }
    .upuszcz-usun { top: 4px; right: 4px; width: 26px; height: 26px; font-size: 17px; }
}

/* ---------- podpowiedzi (dystrybutor, studio, reżyser) ---------- */
.podpowiedzi { position: absolute; z-index: 40; left: 0; right: 0; max-height: 300px; overflow-y: auto; margin: 4px 0 0; padding: 6px; list-style: none; background: var(--karta); border: 1px solid var(--linia-mocna); border-radius: 12px; box-shadow: var(--cien), 0 18px 40px -16px rgba(0, 0, 0, .35); }
.podpowiedzi li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 8px; cursor: pointer; color: var(--tekst); font-size: 14.5px; }
.podpowiedzi li small { color: var(--tekst-3); font-size: 12.5px; white-space: nowrap; }
.podpowiedzi li:hover, .podpowiedzi li.akt { background: var(--wiersz-hover); color: var(--a1); }
.podpowiedzi .podpowiedz-nowy { cursor: default; color: var(--tekst-3); font-size: 13px; font-style: italic; }
.podpowiedzi .podpowiedz-nowy:hover { background: none; color: var(--tekst-3); }
@media (min-width: 981px) { .spisy { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.k-prem { white-space: nowrap; color: var(--tekst-2); }
@media (max-width: 760px) { .tabela:not(.tabela--admin) .k-prem { display: none; } }
.znacznik--nowy { background: color-mix(in srgb, var(--uwaga) 18%, var(--karta)); border-color: var(--uwaga); color: var(--tekst); }
.licz-nowe { margin-left: 6px; font-size: 11px; padding: 2px 7px; border-radius: 99px; background: var(--uwaga); color: #111; }
.pole--ok input, .pole--ok textarea, .pole--ok select { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 15%, transparent); }

/* ---------- płyty w formularzu i na stronie ---------- */
.liczba-plyt { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.liczba-plyt input[type=number] { width: 110px; }
.zaznacz--obok { margin: 0; align-items: center; }
.plyty { margin-top: 22px; }
.plyty-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.plyta-blok { margin: 0; padding: 12px 14px 14px; border: 1px solid var(--linia); border-radius: 14px; background: var(--karta-2); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.plyta-blok[hidden] { display: none; }
.plyta-blok legend { padding: 0 6px; font-weight: 700; color: var(--a1); }
.plyta-blok .pole { margin: 0; }
.plyta-blok .upuszcz { min-height: 150px; background: var(--karta); }
.lista-plyt { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lista-plyt li { font-weight: 500; }
.lista-plyt li.razem { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--linia); color: var(--tekst-2); }
.znacznik--serial { background: color-mix(in srgb, var(--a2) 14%, var(--karta)); border-color: var(--a2); }
.lepszy { display: block; margin-top: 12px; text-align: center; }
.miniatury-gosc { flex-wrap: wrap; }
.porownanie { display: flex; gap: 10px; align-items: center; }
.porownanie figure { margin: 0; flex: 1; text-align: center; min-width: 0; }
.porownanie img { width: 100%; max-height: 260px; object-fit: contain; background: var(--karta-2); border: 1px solid var(--linia); border-radius: 10px; }
.porownanie figcaption { margin-top: 4px; font-size: 12.5px; color: var(--tekst-3); }
.porownanie-strzalka { font-size: 24px; color: var(--a1); flex: none; }
.okladka-akcept--zamiana { grid-template-columns: 420px minmax(0, 1fr); }
@media (max-width: 760px) { .okladka-akcept--zamiana { grid-template-columns: minmax(0, 1fr); } .plyty-siatka { grid-template-columns: minmax(0, 1fr); } }
/* lista płyt na stronie wydania: zwykły tekst jak pozostałe wpisy */
.lista-plyt { gap: 2px; }
.lista-plyt li { font-weight: 500; }
.lista-plyt-nr { color: var(--tekst); }
.dane dd.uwagi { font-weight: 400; color: var(--tekst-2); white-space: normal; line-height: 1.6; }
.pole--uwagi { margin-top: 18px; }
.pole--uwagi textarea { min-height: 96px; resize: vertical; }
.nr-kolko { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--linia-mocna); font: 600 11.5px/1 Inter, sans-serif; color: var(--tekst-2); vertical-align: middle; }
.dane-plyta code + code { margin-left: 6px; }