* { box-sizing: border-box; }

:root {
    --tlo: #14161a;
    --tlo-naglowek: #191c21;
    --tlo-karta: #1d2127;
    --tlo-karta-hover: #242933;
    --tlo-input: #14161a;
    --obwodka: #272c34;
    --obwodka-jasna: #333a45;
    --tekst: #e9ecf1;
    --tekst-przygaszony: #8b94a3;
    --tekst-slaby: #737d8c;
    --akcent: #2f77f0;
    --akcent-hover: #4589ff;
    --blad-tlo: #3a2120;
    --blad-obwodka: #6b3330;
    --blad-tekst: #ffb4ad;
    --ok: #4fd07a;
    --moja-wiad: #1c3050;
    --moja-wiad-obwodka: #2a4a78;
    --cien: 0 2px 10px rgba(0,0,0,.25);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --tlo: #f4f5f7; --tlo-naglowek: #ffffff; --tlo-karta: #ffffff;
        --tlo-karta-hover: #f0f2f5; --tlo-input: #ffffff;
        --obwodka: #e2e5ea; --obwodka-jasna: #d4d8df;
        --tekst: #1c1f24; --tekst-przygaszony: #6b7280; --tekst-slaby: #8a919e;
        --blad-tlo: #fdecec; --blad-obwodka: #f3b8b3; --blad-tekst: #b3261e;
        --moja-wiad: #dceafd; --moja-wiad-obwodka: #a9c9f7;
        --cien: 0 2px 10px rgba(20,20,30,.08);
    }
}
:root[data-theme="light"] {
    --tlo: #f4f5f7; --tlo-naglowek: #ffffff; --tlo-karta: #ffffff;
    --tlo-karta-hover: #f0f2f5; --tlo-input: #ffffff;
    --obwodka: #e2e5ea; --obwodka-jasna: #d4d8df;
    --tekst: #1c1f24; --tekst-przygaszony: #6b7280; --tekst-slaby: #8a919e;
    --blad-tlo: #fdecec; --blad-obwodka: #f3b8b3; --blad-tekst: #b3261e;
    --moja-wiad: #dceafd; --moja-wiad-obwodka: #a9c9f7;
    --cien: 0 2px 10px rgba(20,20,30,.08);
}

body {
    margin: 0; padding: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    background: var(--tlo); color: var(--tekst);
    transition: background .15s, color .15s;
}
a { color: inherit; text-decoration: none; }

header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--obwodka); background: var(--tlo-naglowek);
}
header h1 { font-size: 20px; margin: 0; }
.wyloguj, .wroc { font-size: 14px; color: var(--tekst-przygaszony); }
.wyloguj:hover, .wroc:hover { color: var(--tekst); }

.motyw {
    background: none; border: 1px solid var(--obwodka-jasna); color: var(--tekst-przygaszony);
    border-radius: 8px; width: 34px; height: 34px; font-size: 16px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.motyw:hover { color: var(--tekst); border-color: var(--akcent); }

.oszczedny {
    background: none; border: 1px solid var(--obwodka-jasna); color: var(--tekst-przygaszony);
    border-radius: 8px; width: 34px; height: 34px; font-size: 15px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.oszczedny:hover { color: var(--tekst); border-color: var(--akcent); }
.oszczedny.aktywny { background: var(--moja-wiad); border-color: var(--akcent); color: var(--akcent); }

main { max-width: 1000px; margin: 0 auto; padding: 24px 20px 60px; }
.pusto { color: var(--tekst-przygaszony); }
code { background: var(--tlo-karta-hover); padding: 2px 6px; border-radius: 4px; }

.siatka { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.karta {
    display: flex; align-items: center; gap: 14px;
    background: var(--tlo-karta); border: 1px solid var(--obwodka); border-radius: 10px;
    padding: 14px; transition: .15s;
}
.karta:hover { background: var(--tlo-karta-hover); border-color: var(--obwodka-jasna); transform: translateY(-2px); }
.ikona {
    width: 46px; height: 46px; flex: none; border-radius: 8px;
    background: var(--akcent); display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff; overflow: hidden;
}
.ikona img, .ikona canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.ladowanie-miniatury { font-size: 16px; opacity: .7; }
.pokaz-podglad { font-size: 16px; cursor: pointer; opacity: .8; }
.pokaz-podglad:hover { opacity: 1; }
.opis { display: flex; flex-direction: column; overflow: hidden; }
.opis strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opis span { font-size: 12px; color: var(--tekst-przygaszony); margin-top: 3px; }

.odtwarzacz h2 { margin: 0 0 14px; font-size: 20px; }
video { width: 100%; border-radius: 10px; background: #000; display: block; }
.wideo-owijka { transition: max-width .2s; }

.pasek-narzedzi-wideo {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: 10px; margin-top: 10px; padding: 8px 0;
}
.grupa-predkosci, .grupa-widoku { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.chip-predkosc, .chip-widok {
    background: var(--tlo-karta); border: 1px solid var(--obwodka); color: var(--tekst-przygaszony);
    border-radius: 14px; padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.chip-predkosc:hover, .chip-widok:hover { border-color: var(--obwodka-jasna); color: var(--tekst); }
.chip-predkosc.aktywny, .chip-widok.aktywny { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.chip-widok:disabled { opacity: .4; cursor: not-allowed; }

/* tryb kinowy: odtwarzacz sie rozszerza i reszta strony przygasa */
body.kinowy .odtwarzacz { max-width: 1300px; }
body.kinowy main { max-width: 1300px; }
body.kinowy header { opacity: .5; }
body.kinowy header:hover { opacity: 1; }
.przyciski { margin-top: 16px; display: flex; align-items: center; gap: 14px; }
.btn { background: var(--akcent); padding: 10px 18px; border-radius: 8px; font-weight: 600; color: #fff; border: 0; cursor: pointer; font-size: 14px; }
.btn:hover { background: var(--akcent-hover); }
.info { color: var(--tekst-przygaszony); font-size: 14px; }

body.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.box {
    background: var(--tlo-karta); border: 1px solid var(--obwodka); border-radius: 14px;
    padding: 34px; width: 100%; max-width: 360px; text-align: center; box-shadow: var(--cien);
}
.box h1 { margin: 0 0 6px; font-size: 22px; }
.box p { color: var(--tekst-przygaszony); font-size: 14px; margin: 0 0 20px; }
.box input {
    width: 100%; padding: 12px 14px; margin-bottom: 12px;
    background: var(--tlo-input); border: 1px solid var(--obwodka-jasna); border-radius: 8px;
    color: var(--tekst); font-size: 15px;
}
.box input:focus { outline: none; border-color: var(--akcent); }
.box button {
    width: 100%; padding: 12px; background: var(--akcent); color: #fff;
    border: 0; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.box button:hover { background: var(--akcent-hover); }
.blad { margin-top: 14px; color: var(--blad-tekst); font-size: 14px; }

.prawo { display: flex; gap: 16px; align-items: center; }
.licznik { color: var(--tekst-przygaszony); font-size: 13px; margin: 0 0 16px; }
.alert {
    background: var(--blad-tlo); border: 1px solid var(--blad-obwodka); color: var(--blad-tekst);
    padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px;
}
.baner {
    display: none; background: var(--moja-wiad); border: 1px solid var(--akcent); color: var(--tekst);
    padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px;
}
.baner a { text-decoration: underline; font-weight: 600; }
.karta.wgrywa { opacity: .55; cursor: default; }
.karta.wgrywa .ikona { background: var(--obwodka-jasna); }
.testy { list-style: none; padding: 0; margin: 0; }
.testy li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px 12px; border-bottom: 1px solid var(--obwodka); font-size: 14px;
}
.testy li span { width: 18px; flex: none; font-weight: 700; }
.testy li.ok span { color: var(--ok); }
.testy li.zle span { color: var(--blad-tekst); }
.testy em { display: block; color: var(--tekst-przygaszony); font-style: normal; font-size: 12px; margin-top: 3px; }

/* ---------- CZAT ---------- */
.czat-body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.czat-body header { flex: none; }
.ja { font-size: 13px; color: var(--tekst-przygaszony); }

.status { display: none; padding: 10px 20px; font-size: 13px; }
.status.widoczny { display: block; }
.status.zle { background: var(--blad-tlo); color: var(--blad-tekst); }

.okno {
    flex: 1; overflow-y: auto; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 12px;
}
.wiad {
    max-width: 78%; align-self: flex-start; position: relative;
    background: var(--tlo-karta); border: 1px solid var(--obwodka);
    border-radius: 12px; padding: 9px 13px;
}
.wiad.moja { align-self: flex-end; background: var(--moja-wiad); border-color: var(--moja-wiad-obwodka); }
.glowka { display: flex; gap: 8px; align-items: baseline; font-size: 12px; margin-bottom: 3px; }
.glowka span { color: var(--tekst-slaby); font-size: 11px; }
.tresc { font-size: 15px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
.tresc img { max-width: 100%; max-height: 280px; border-radius: 8px; margin-top: 4px; display: block; cursor: zoom-in; }

.usun-wiad {
    position: absolute; top: -8px; right: -8px; width: 20px; height: 20px;
    border-radius: 50%; background: var(--tlo-karta); border: 1px solid var(--obwodka-jasna);
    color: var(--tekst-przygaszony); font-size: 12px; line-height: 1; cursor: pointer;
    display: none; align-items: center; justify-content: center;
}
.wiad.moja:hover .usun-wiad { display: flex; }
.usun-wiad:hover { background: var(--blad-tlo); color: var(--blad-tekst); border-color: var(--blad-obwodka); }

.edytuj-wiad {
    position: absolute; top: -8px; right: 18px; width: 20px; height: 20px;
    border-radius: 50%; background: var(--tlo-karta); border: 1px solid var(--obwodka-jasna);
    color: var(--tekst-przygaszony); font-size: 11px; line-height: 1; cursor: pointer;
    display: none; align-items: center; justify-content: center;
}
.wiad.moja:hover .edytuj-wiad { display: flex; }
.edytuj-wiad:hover { border-color: var(--akcent); color: var(--tekst); }

.znacznik-edycji { font-size: 11px; color: var(--tekst-slaby); }
.edycja-owijka { margin-top: 2px; }
.edycja-pole {
    width: 100%; min-height: 50px; padding: 6px 8px; resize: vertical;
    background: var(--tlo-input); border: 1px solid var(--akcent); border-radius: 6px;
    color: var(--tekst); font-size: 14px; font-family: inherit;
}
.edycja-przyciski { display: flex; gap: 8px; margin-top: 6px; }
.edycja-przyciski button {
    font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer; border: 0;
}
.edycja-zapisz { background: var(--akcent); color: #fff; }
.edycja-anuluj { background: var(--tlo-karta-hover); color: var(--tekst-przygaszony); }

.reakcje { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.reakcja {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--tlo-karta-hover); border: 1px solid var(--obwodka);
    border-radius: 12px; padding: 1px 8px; font-size: 12px; cursor: pointer; user-select: none;
}
.reakcja:hover { border-color: var(--akcent); }
.reakcja.moja { background: var(--moja-wiad); border-color: var(--akcent); }
.dodaj-wrapper { position: relative; display: inline-flex; }
.dodaj-reakcje {
    background: none; border: 1px dashed var(--obwodka-jasna); color: var(--tekst-przygaszony);
    border-radius: 12px; padding: 1px 7px; font-size: 12px; cursor: pointer;
}
.dodaj-reakcje:hover { border-color: var(--akcent); color: var(--tekst); }
.panel-emoji {
    position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; background: var(--tlo-karta);
    border: 1px solid var(--obwodka-jasna); border-radius: 10px; padding: 6px; display: none;
    gap: 4px; box-shadow: var(--cien); z-index: 5; white-space: nowrap;
}
.panel-emoji.widoczny { display: flex; }
.panel-emoji button { background: none; border: 0; font-size: 18px; cursor: pointer; padding: 3px; border-radius: 6px; }
.panel-emoji button:hover { background: var(--tlo-karta-hover); }

.pisanie {
    flex: none; display: flex; gap: 10px; padding: 14px 20px;
    border-top: 1px solid var(--obwodka); background: var(--tlo-naglowek); align-items: center;
}
.pisanie input[type=text] {
    flex: 1; padding: 12px 14px; background: var(--tlo-input);
    border: 1px solid var(--obwodka-jasna); border-radius: 8px; color: var(--tekst); font-size: 15px;
}
.pisanie input[type=text]:focus { outline: none; border-color: var(--akcent); }
.pisanie button.wyslij {
    padding: 12px 22px; background: var(--akcent); color: #fff; border: 0;
    border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; flex: none;
}
.pisanie button.wyslij:hover { background: var(--akcent-hover); }
.zalacz {
    width: 44px; height: 44px; flex: none; border-radius: 8px;
    background: none; border: 1px solid var(--obwodka-jasna); color: var(--tekst-przygaszony);
    font-size: 18px; cursor: pointer;
}
.zalacz:hover { border-color: var(--akcent); color: var(--tekst); }
.podglad-zdjecia {
    display: none; align-items: center; gap: 10px; padding: 10px 20px;
    background: var(--tlo-naglowek); border-top: 1px solid var(--obwodka);
}
.podglad-zdjecia.widoczny { display: flex; }
.podglad-zdjecia img { height: 50px; border-radius: 6px; }
.podglad-zdjecia button {
    background: var(--blad-tlo); color: var(--blad-tekst); border: 0;
    border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 13px;
}

.lightbox {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85);
    align-items: center; justify-content: center; z-index: 50; padding: 20px; cursor: zoom-out;
}
.lightbox.widoczny { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ---------- OPIS FILMU ---------- */
.opis-filmu {
    margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--obwodka);
}
.opis-glowka { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.opis-glowka h3 { margin: 0; font-size: 15px; color: var(--tekst-przygaszony); font-weight: 600; }
.opis-edytuj {
    background: none; border: 1px solid var(--obwodka-jasna); color: var(--tekst-przygaszony);
    border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.opis-edytuj:hover { border-color: var(--akcent); color: var(--tekst); }
.opis-tekst { font-size: 14px; line-height: 1.6; white-space: pre-wrap; margin: 0; }
.opis-formularz textarea {
    width: 100%; min-height: 90px; padding: 10px 12px; resize: vertical;
    background: var(--tlo-input); border: 1px solid var(--obwodka-jasna); border-radius: 8px;
    color: var(--tekst); font-size: 14px; font-family: inherit;
}
.opis-formularz textarea:focus { outline: none; border-color: var(--akcent); }
.opis-wiersz { display: flex; gap: 10px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.opis-wiersz input[type=password] {
    flex: 1; min-width: 140px; padding: 9px 12px; background: var(--tlo-input);
    border: 1px solid var(--obwodka-jasna); border-radius: 8px; color: var(--tekst); font-size: 14px;
}
.opis-wiersz input[type=password]:focus { outline: none; border-color: var(--akcent); }
.opis-anuluj {
    background: none; border: 0; color: var(--tekst-przygaszony); font-size: 13px; cursor: pointer;
}
.opis-anuluj:hover { color: var(--tekst); }

/* ---------- STATYSTYKI ---------- */
.karty-liczb { display: flex; gap: 14px; margin: 18px 0 28px; flex-wrap: wrap; }
.liczba-box {
    background: var(--tlo-karta); border: 1px solid var(--obwodka); border-radius: 12px;
    padding: 16px 22px; min-width: 140px;
}
.liczba-box b { display: block; font-size: 26px; }
.liczba-box span { font-size: 13px; color: var(--tekst-przygaszony); }
.ranking { display: flex; flex-direction: column; gap: 8px; }
.pozycja {
    display: grid; grid-template-columns: 24px 1fr 120px 50px; align-items: center; gap: 12px;
    background: var(--tlo-karta); border: 1px solid var(--obwodka); border-radius: 10px;
    padding: 10px 14px; font-size: 14px;
}
.pozycja:hover { border-color: var(--obwodka-jasna); }
.miejsce { color: var(--tekst-przygaszony); font-weight: 700; }
.nazwa-rankingu { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pasek-tlo { background: var(--obwodka); border-radius: 4px; height: 6px; overflow: hidden; }
.pasek { display: block; height: 100%; background: var(--akcent); }
.ile-widokow { text-align: right; color: var(--tekst-przygaszony); font-size: 12px; }
@media (max-width: 560px) {
    .pozycja { grid-template-columns: 20px 1fr 40px; }
    .pasek-tlo { display: none; }
}

/* ---------- ROZDZIALY / ZNACZNIKI ---------- */
.rozdzialy-sekcja { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--obwodka); }
.rozdzialy-glowka { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rozdzialy-glowka h3 { margin: 0; font-size: 15px; color: var(--tekst-przygaszony); font-weight: 600; }
.zaznacz-moment {
    background: var(--akcent); color: #fff; border: 0; border-radius: 6px;
    padding: 6px 12px; font-size: 12px; cursor: pointer; font-weight: 600;
}
.zaznacz-moment:hover { background: var(--akcent-hover); }
.lista-rozdzialow { display: flex; flex-direction: column; gap: 4px; }
.rozdzial {
    display: flex; gap: 10px; align-items: center; background: var(--tlo-karta);
    border: 1px solid var(--obwodka); border-radius: 8px; padding: 8px 12px;
    cursor: pointer; font-size: 14px;
}
.rozdzial:hover { border-color: var(--akcent); }
.rozdzial .czas-znacznik {
    color: var(--akcent); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums;
}

/* ---------- KONFETTI (easter egg) ---------- */
.konfetti-czastka {
    position: fixed; top: -20px; font-size: 22px; pointer-events: none; z-index: 999;
    animation: spadanie linear forwards;
}
@keyframes spadanie {
    to { transform: translateY(110vh) rotate(540deg); opacity: 0.3; }
}

/* ---------- CYTOWANIE W CZACIE ---------- */
.cytat {
    border-left: 3px solid var(--akcent); padding: 2px 10px; margin-bottom: 6px;
    font-size: 12px; color: var(--tekst-przygaszony); border-radius: 3px; background: var(--tlo-karta-hover);
}
.cytat b { color: var(--tekst); }
.odpowiedz-wiad {
    position: absolute; top: -8px; left: -8px; width: 20px; height: 20px;
    border-radius: 50%; background: var(--tlo-karta); border: 1px solid var(--obwodka-jasna);
    color: var(--tekst-przygaszony); font-size: 11px; line-height: 1; cursor: pointer;
    display: none; align-items: center; justify-content: center;
}
.wiad:hover .odpowiedz-wiad { display: flex; }
.odpowiedz-wiad:hover { border-color: var(--akcent); color: var(--tekst); }
.pasek-odpowiedzi {
    display: none; align-items: center; gap: 10px; padding: 8px 20px;
    background: var(--tlo-naglowek); border-top: 1px solid var(--obwodka); font-size: 13px;
}
.pasek-odpowiedzi.widoczny { display: flex; }
.pasek-odpowiedzi span { flex: 1; color: var(--tekst-przygaszony); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasek-odpowiedzi span b { color: var(--tekst); }
.pasek-odpowiedzi button { background: none; border: 0; color: var(--tekst-przygaszony); cursor: pointer; font-size: 16px; }

/* ---------- PANEL WGRYWANIA ---------- */
.strefa-drop {
    border: 2px dashed var(--obwodka-jasna); border-radius: 14px; padding: 40px 20px;
    text-align: center; margin: 24px 0; transition: .15s; background: var(--tlo-karta);
}
.strefa-drop.przeciagane { border-color: var(--akcent); background: var(--moja-wiad); }
.strefa-drop-tresc p { margin: 8px 0; }
.link-wybor { color: var(--akcent); text-decoration: underline; cursor: pointer; }
.lista-uploadow { display: flex; flex-direction: column; gap: 12px; }
.upload-wiersz {
    background: var(--tlo-karta); border: 1px solid var(--obwodka); border-radius: 10px; padding: 14px 16px;
}
.upload-nazwa { font-size: 14px; margin-bottom: 8px; font-weight: 600; }
.upload-pasek-tlo { background: var(--obwodka); border-radius: 6px; height: 8px; overflow: hidden; margin-bottom: 8px; }
.upload-pasek { height: 100%; background: var(--akcent); transition: width .2s; }
.upload-status { font-size: 13px; color: var(--tekst-przygaszony); }
.upload-wiersz.upload-gotowe .upload-pasek { background: var(--ok); }
.upload-wiersz.upload-gotowe .upload-status { color: var(--ok); }
.upload-blad { color: var(--blad-tekst) !important; }