/* ============================================================
   LWS - estetyczna, czysta, lekko gamingowa szata graficzna
   Domyślny motyw "kolorowy": granat + neon cyan/fiolet.
   Motywy przełączane atrybutem html[data-theme]:
     kolor  - domyślny (ten plik, :root)
     bialy  - ascetyczna biel, sama skala szarości
     ciemny - ascetyczna czerń, sama skala szarości
   Wybór użytkownika trzymany w cookie odpyt_theme (ustawia go
   skrypt w head; tu tylko wartości zmiennych per motyw).
   ============================================================ */
:root {
    --bg: #0a0e1a;
    --bg-2: #111827;
    --bg-3: #182036;
    --border: #23304f;
    --text: #e8eefb;
    --text-dim: #93a3c4;
    --accent: #22d3ee;
    --accent-2: #a78bfa;
    --good: #34d399;
    --bad: #f87171;
    --warn: #fbbf24;

    /* warstwy tła */
    --nav-bg: rgba(13, 18, 33, .92);
    --panel: rgba(17, 24, 39, .78);
    --panel-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
    --chart-bg: rgba(13, 18, 33, .35);
    /* barwa poziomu 2 na wykresie postępu; w motywach czarno-białych
       odrębna szarość (accent == good zlewałoby poziomy 2 i 3) */
    --chart-lvl2: var(--accent);
    --chat-bg: rgba(13, 18, 33, .55);
    --overlay: rgba(5, 8, 16, .66);

    /* aureole tła (radial-gradient body) */
    --aura-1: rgba(167, 139, 250, .13);
    --aura-2: rgba(34, 211, 238, .11);

    /* przemycia i poświaty w barwie akcentu */
    --wash: rgba(34, 211, 238, .06);
    --wash-strong: rgba(34, 211, 238, .1);
    --glow-soft: rgba(34, 211, 238, .22);
    --glow-strong: rgba(34, 211, 238, .45);
    --glow-faint: rgba(34, 211, 238, .08);
    --glow-text: rgba(34, 211, 238, .55);
    --selection: rgba(34, 211, 238, .35);
    --placeholder: #5c6c8f;
    --scroll-hover: #2c3c63;

    /* komunikaty quizu / przyciski ocen: zielony, czerwony, żółty */
    --ok-wash: rgba(52, 211, 153, .14);
    --ok-border: rgba(52, 211, 153, .55);
    --ok-glow: rgba(52, 211, 153, .3);
    --bad-wash: rgba(248, 113, 113, .12);
    --bad-border: rgba(248, 113, 113, .55);
    --bad-glow: rgba(248, 113, 113, .3);
    --show-wash: rgba(251, 191, 36, .12);
    --show-border: rgba(251, 191, 36, .5);
    --show-glow: rgba(251, 191, 36, .28);
    --cmd-wash: rgba(148, 163, 184, .1);
    --cmd-border: rgba(148, 163, 184, .45);
    --welcome-wash: rgba(167, 139, 250, .1);
    --welcome-border: rgba(167, 139, 250, .5);

    /* fanfary: poświata linii + paleta barw poświat i fajerwerków
       (--fx-line-palette: trójki RGB po |, czytane przez JS quizu) */
    --fanfar-glow: rgba(255, 220, 130, .55);
    --fanfar-border: rgba(255, 220, 130, .85);
    --fx-flash: 255, 236, 170;
    --fx-line-palette: 255, 236, 170|120, 220, 255|255, 160, 225|140, 255, 190|190, 160, 255|255, 200, 140;
    --fx-sat: 90%;
    --fx-lit: 78%;

    /* historia quizów i klipboard */
    --hist-line: rgba(128, 128, 128, .15);
    --hist-cut: #eab308;
    --hist-cut-wash: rgba(250, 204, 21, .13);
    --clip-badge: #64748b;
    --clip-badge-ink: #fff;
    --clip-full-ink: #07242e;
    --clip-cut-ink: #2b0b0b;
    --warn-ink: #3a2b00;   /* tekst na wypełnionym --warn (aktywny komentarz) */
}

/* ---- motyw BIAŁY: sama skala szarości na jasnym tle ---- */
html[data-theme="bialy"] {
    --bg: #ffffff;
    --bg-2: #ffffff;
    --bg-3: #f3f3f3;
    --border: #d9d9d9;
    --text: #0a0a0a;
    --text-dim: #595959;
    --accent: #000000;
    --accent-2: #6b6b6b;
    --good: #000000;
    --bad: #777777;
    --warn: #444444;
    color-scheme: light;

    --nav-bg: rgba(255, 255, 255, .95);
    --panel: #ffffff;
    --panel-shadow: 0 8px 28px rgba(0, 0, 0, .12);
    --chart-bg: #fafafa;
    --chart-lvl2: #a0a0a0;
    --chat-bg: #f7f7f7;
    --overlay: rgba(0, 0, 0, .45);

    --aura-1: transparent;
    --aura-2: transparent;
    --wash: rgba(0, 0, 0, .05);
    --wash-strong: rgba(0, 0, 0, .08);
    --glow-soft: rgba(0, 0, 0, .16);
    --glow-strong: rgba(0, 0, 0, .24);
    --glow-faint: rgba(0, 0, 0, .06);
    --glow-text: rgba(0, 0, 0, .3);
    --selection: rgba(0, 0, 0, .16);
    --placeholder: #a3a3a3;
    --scroll-hover: #c4c4c4;

    --ok-wash: rgba(0, 0, 0, .06);
    --ok-border: rgba(0, 0, 0, .75);
    --ok-glow: rgba(0, 0, 0, .2);
    --bad-wash: rgba(0, 0, 0, .05);
    --bad-border: rgba(0, 0, 0, .45);
    --bad-glow: rgba(0, 0, 0, .14);
    --show-wash: rgba(0, 0, 0, .04);
    --show-border: rgba(0, 0, 0, .35);
    --show-glow: rgba(0, 0, 0, .14);
    --cmd-wash: rgba(0, 0, 0, .04);
    --cmd-border: rgba(0, 0, 0, .3);
    --welcome-wash: rgba(0, 0, 0, .04);
    --welcome-border: rgba(0, 0, 0, .4);

    --fanfar-glow: rgba(0, 0, 0, .25);
    --fanfar-border: rgba(0, 0, 0, .5);
    --fx-flash: 25, 25, 25;
    --fx-line-palette: 25, 25, 25|60, 60, 60|95, 95, 95|130, 130, 130|165, 165, 165|40, 40, 40;
    --fx-sat: 0%;
    --fx-lit: 28%;

    --hist-line: rgba(0, 0, 0, .12);
    --hist-cut: #333333;
    --hist-cut-wash: rgba(0, 0, 0, .07);
    --clip-badge: #333333;
    --clip-badge-ink: #ffffff;
    --clip-full-ink: #ffffff;
    --clip-cut-ink: #ffffff;
    --warn-ink: #ffffff;
}

/* ---- motyw CIEMNY: sama skala szarości na czerni ---- */
html[data-theme="ciemny"] {
    --bg: #000000;
    --bg-2: #0d0d0d;
    --bg-3: #191919;
    --border: #333333;
    --text: #f2f2f2;
    --text-dim: #9e9e9e;
    --accent: #ffffff;
    --accent-2: #a3a3a3;
    --good: #ffffff;
    --bad: #8a8a8a;
    --warn: #bdbdbd;
    color-scheme: dark;

    --nav-bg: rgba(0, 0, 0, .92);
    --panel: rgba(12, 12, 12, .85);
    --panel-shadow: 0 10px 40px rgba(0, 0, 0, .6);
    --chart-bg: rgba(20, 20, 20, .5);
    --chart-lvl2: #dcdcdc;
    --chat-bg: rgba(18, 18, 18, .6);
    --overlay: rgba(0, 0, 0, .72);

    --aura-1: transparent;
    --aura-2: transparent;
    --wash: rgba(255, 255, 255, .06);
    --wash-strong: rgba(255, 255, 255, .1);
    --glow-soft: rgba(255, 255, 255, .16);
    --glow-strong: rgba(255, 255, 255, .3);
    --glow-faint: rgba(255, 255, 255, .08);
    --glow-text: rgba(255, 255, 255, .4);
    --selection: rgba(255, 255, 255, .25);
    --placeholder: #808080;
    --scroll-hover: #3d3d3d;

    --ok-wash: rgba(255, 255, 255, .07);
    --ok-border: rgba(255, 255, 255, .7);
    --ok-glow: rgba(255, 255, 255, .25);
    --bad-wash: rgba(255, 255, 255, .05);
    --bad-border: rgba(255, 255, 255, .4);
    --bad-glow: rgba(255, 255, 255, .15);
    --show-wash: rgba(255, 255, 255, .05);
    --show-border: rgba(255, 255, 255, .35);
    --show-glow: rgba(255, 255, 255, .2);
    --cmd-wash: rgba(255, 255, 255, .04);
    --cmd-border: rgba(255, 255, 255, .3);
    --welcome-wash: rgba(255, 255, 255, .05);
    --welcome-border: rgba(255, 255, 255, .45);

    --fanfar-glow: rgba(255, 255, 255, .35);
    --fanfar-border: rgba(255, 255, 255, .7);
    --fx-flash: 255, 255, 255;
    --fx-line-palette: 255, 255, 255|220, 220, 220|190, 190, 190|160, 160, 160|130, 130, 130|235, 235, 235;
    --fx-sat: 0%;
    --fx-lit: 82%;

    --hist-line: rgba(255, 255, 255, .14);
    --hist-cut: #b3b3b3;
    --hist-cut-wash: rgba(255, 255, 255, .08);
    --clip-badge: #444444;
    --clip-badge-ink: #ffffff;
    --clip-full-ink: #000000;
    --clip-cut-ink: #000000;
    --warn-ink: #000000;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--text);
    background:
        radial-gradient(900px 520px at 88% -12%, var(--aura-1), transparent 60%),
        radial-gradient(900px 520px at -12% 112%, var(--aura-2), transparent 60%),
        var(--bg);
}

/* ---------------- nawigacja ---------------- */
nav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .8rem 1.5rem;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
}

nav .brand {
    font-weight: 800;
    letter-spacing: .18em;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

nav a {
    color: var(--text-dim);
    text-decoration: none;
    padding: .3rem .15rem;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}

nav a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

nav button {
    padding: .35rem .8rem;
}

nav form { display: inline; }

/* ---------------- przełącznik motywów (biały/ciemny/kolorowy) ---------------- */
/* trzy kropki po lewej od "Wyloguj"/"Zaloguj"; aktywne zaznaczone podwójnym ringiem */
.theme-switch {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .4rem;
}

button.ts {
    width: 19px;
    height: 19px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1.5px solid var(--text-dim);
    transition: transform .12s, border-color .12s;
}

button.ts:hover {
    transform: scale(1.15);
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text);
}

.ts-bialy { background: #ffffff; }
.ts-ciemny { background: #000000; }
.ts-kolor { background: linear-gradient(135deg, #22d3ee, #a78bfa); }

html[data-theme="bialy"] .ts-bialy,
html[data-theme="ciemny"] .ts-ciemny,
html[data-theme="kolor"] .ts-kolor {
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text);
}

/* ---------------- ustawienia (trybik w nav) ---------------- */
.nav-settings {
    position: relative;
    display: inline-flex;
}

button.settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    color: var(--text-dim);
    transition: color .15s, transform .3s;
}

button.settings-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

button.settings-btn:hover,
button.settings-btn[aria-expanded="true"] {
    color: var(--accent);
    transform: rotate(45deg);
}

.settings-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 230px;
    padding: .45rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--panel-shadow);
    z-index: 70;
}

.settings-head {
    padding: .4rem .6rem .5rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--border);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ---- ostatnie sesje odpytywania (zegar w nav) ---------------------- */
.sessions-menu { min-width: 280px; max-width: 340px; }

.sessions-list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.sessions-empty {
    padding: .6rem;
    color: var(--text-dim);
    font-size: .88rem;
}

.session-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .45rem .6rem;
    border-radius: 8px;
    cursor: default;
}

.session-item.session-link { cursor: pointer; }

.session-item.session-link:hover { background: var(--wash); }

.session-item.session-dead { opacity: .55; }

.session-name {
    font-size: .92rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-meta {
    font-size: .78rem;
    color: var(--text-dim);
}

.session-resumable .session-meta { color: var(--accent); }

.session-resumable .session-name::after {
    content: " ▸";
    color: var(--accent);
}

button.settings-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .6rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    text-align: left;
}

button.settings-item svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex: none;
}

button.settings-item:hover {
    background: var(--bg-3);
}

button.settings-item-danger {
    color: var(--bad);
}

button.settings-item-danger:hover {
    background: var(--bad-wash);
    box-shadow: 0 0 0 1px var(--bad-border);
}

/* tozsamosc w nav (przed Wyloguj) */
.nav-user {
    font-size: .85rem;
    color: var(--text-dim);
    margin-left: auto;
}

.nav-user::before {
    content: "● ";
    color: var(--accent);
    font-size: .7rem;
    vertical-align: .1rem;
}

/* dialog trybu: checkbox "rozdziel alternatywy" */
.trybCkb {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .5rem .75rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: .85rem;
    line-height: 1.35;
    cursor: pointer;
    text-align: left;
}

.trybCkb input,
.modal .trybCkb input {
    width: auto;
    margin: 0;
    flex: none;
    accent-color: var(--accent);
}

/* przycisk "Zaloguj" w pasku (tryb anonimowy - tylko element obok przełącznika) */
nav a.nav-login {
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: .3rem 1.1rem;
    box-shadow: 0 0 8px var(--glow-soft);
}

nav a.nav-login:hover {
    background: var(--wash-strong);
    box-shadow: 0 0 12px var(--glow-strong);
}

/* ---------------- nagłówki ---------------- */
h1 {
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 1.45rem;
    margin: 0 0 1.25rem;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

h2 {
    font-size: 1.02rem;
    letter-spacing: .05em;
    margin: 1.25rem 0 .5rem;
    color: var(--text);
}

/* ---------------- panel główny ---------------- */
main {
    max-width: 900px;
    margin: 2rem auto 3rem;
    padding: 1.75rem 2rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--panel-shadow);
}

/* ---------------- formularze ---------------- */
button {
    font: inherit;
    color: var(--text);
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .45rem .95rem;
    margin: .15rem .4rem .15rem 0;
    cursor: pointer;
    transition: border-color .15s, color .15s, box-shadow .15s, transform .05s;
}

button:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--glow-soft);
}

button:active { transform: translateY(1px); }

input, select {
    font: inherit;
    color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .45rem .7rem;
    margin-right: .5rem;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 0 16px var(--glow-soft);
}

input::placeholder { color: var(--placeholder); }

label { color: var(--text-dim); }

input[type="checkbox"] {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    margin-right: .35rem;
    vertical-align: -2px;
}

/* ---------------- linki ---------------- */
a {
    color: var(--accent);
    text-decoration: none;
    transition: text-shadow .15s;
}

a:hover { text-shadow: 0 0 12px var(--glow-text); }

/* ---------------- tabela ---------------- */
table {
    border-collapse: collapse;
    margin-top: 1rem;
    width: 100%;
}

th, td {
    border: 1px solid var(--border);
    padding: .45rem .75rem;
    text-align: left;
}

th {
    color: var(--accent);
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .1em;
    background: var(--wash);
}

tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--wash); }

/* ---------------- listy plików i katalogów ---------------- */
main ul {
    list-style: none;
    padding: 0;
    margin-top: .75rem;
}

main li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem .45rem;
    padding: .4rem .55rem;
    border-bottom: 1px solid var(--border);
    border-radius: 8px;
    transition: background .12s;
}

main li:hover { background: var(--wash); }

main li.clickable { cursor: pointer; }

/* ikony: katalog bursztynowy, plik cyjanowy */
.fi { flex: none; }
.fi.folder { color: var(--warn); }
.fi.file { color: var(--accent); }

/* kotwiczki stanu pliku/katalogu po nazwie (files.html):
   glob = publiczny (zielony), ludzie = udostępniony (cyjan akcentu) */
.flag { display: inline-flex; align-items: center; flex: none;
        margin-left: .35rem; line-height: 0; cursor: help; }
.flag.publiczny { color: var(--good); }
.flag.udostepniony { color: var(--accent); }

/* menu kontekstowe wiersza (przycisk "⋮") - wspólne dla files i public */
.rowActions { position: relative; margin-left: auto; flex: none; }
.menuToggle { background: transparent; border: 0; color: var(--text-dim);
              padding: .3rem; margin: 0; border-radius: 6px; line-height: 0; }
.menuToggle:hover { color: var(--accent); background: var(--wash-strong); box-shadow: none; }
.rowMenu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 190px;
           background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
           box-shadow: 0 8px 30px rgba(0, 0, 0, .5); padding: .3rem; z-index: 60; display: none; }
.rowMenu.open { display: block; }
.rowMenu button { display: block; width: 100%; text-align: left; margin: 0;
                  background: transparent; border: 0; border-radius: 7px;
                  padding: .45rem .65rem; color: var(--text); }
.rowMenu button:hover { background: var(--wash-strong); color: var(--accent); box-shadow: none; }
.rowMenu button.danger { color: var(--bad); }
.rowMenu button.danger:hover { background: var(--bad-wash); color: var(--bad); box-shadow: none; }

/* podgląd zawartości zestawu (modal, tylko odczyt) */
.pv-list { max-height: 55vh; overflow-y: auto; margin-top: .5rem; text-align: left; }
.pv-item { border-bottom: 1px solid var(--border); }
.pv-item:last-child { border-bottom: 0; }
.pv-row { display: flex; align-items: baseline; gap: .55rem; padding: .3rem .2rem; }
.pv-left { flex: 1; overflow-wrap: anywhere; }
.pv-arrow { flex: none; color: var(--text-dim); }
.pv-right { flex: 1; overflow-wrap: anywhere; }
.pv-comment { color: var(--text-dim); font-size: .85rem; padding: 0 .2rem .35rem; }
.pv-empty { color: var(--text-dim); text-align: center; padding: .75rem 0; margin: 0; }

/* pływająca ikona schowka (files + public): liczba elementów, stan wycinania;
   na "files" klik = wklej tutaj, na "public" klik = przejdź do własnych plików */
#clipWidget { position: fixed; right: 1.2rem; bottom: 1.2rem; width: 52px; height: 52px;
              border-radius: 12px; background: var(--bg-2); border: 2px solid var(--border); color: var(--text-dim);
              display: flex; align-items: center; justify-content: center; cursor: pointer;
              z-index: 50; box-shadow: 0 2px 10px rgba(0,0,0,.35); user-select: none; }
/* display:flex bije ukrycie z UA arkusza - jak w modalach */
#clipWidget[hidden] { display: none; }
#clipWidget.full { border-color: var(--accent); color: var(--accent); }
#clipWidget.cutmode { border-color: var(--bad); color: var(--bad); }
#clipBadge { position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px;
             border-radius: 11px; background: var(--clip-badge); color: var(--clip-badge-ink); font-size: .78rem;
             font-weight: bold; display: flex; align-items: center; justify-content: center;
             padding: 0 5px; box-sizing: border-box; }
#clipBadge.full { background: var(--accent); color: var(--clip-full-ink); }
#clipBadge.cutmode { background: var(--bad); color: var(--clip-cut-ink); }

/* stopka informacyjna: autor (c0d3r5), kontakt, polityka prywatności */
.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem 1.3rem;
    margin-top: 2.5rem;
    padding: 1rem 1.2rem;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: .85rem;
}
.site-footer a { color: var(--text-dim); }
.site-footer a:hover { color: var(--accent); }
.footer-logo { height: 24px; vertical-align: middle; display: block; }

/* przycisk "poziom wyżej" - nad listą plików/katalogów */
.up-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .75rem 0 0;
    background: var(--bg-3);
    color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .3rem .95rem .3rem .65rem;
}

.up-btn:hover:not(:disabled) {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--glow-soft);
}

/* cienki pasek postępu u góry ekranu - oczekiwanie na serwer
   (strony poza quizem; w quizie tę rolę pełni "..." na czacie) */
#topProgress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 100;
    pointer-events: none;
    visibility: hidden;
}

#topProgress.active { visibility: visible; }

#topProgress .bar {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 8px var(--glow-strong);
    border-radius: 0 2px 2px 0;
    animation: topslide 1s ease-in-out infinite;
}

@keyframes topslide { from { transform: translateX(-110%); } to { transform: translateX(360%); } }

.up-btn:disabled {
    opacity: .35;
    cursor: default;
}

.up-btn:disabled:hover {
    border-color: var(--border);
    color: var(--accent);
    box-shadow: none;
}

/* ---------------- drobne ---------------- */
#feedback {
    font-weight: bold;
    min-height: 1.2em;
}

::selection { background: var(--selection); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }

/* ---------------- modale (zamiast confirm/prompt/alert) ---------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay);
    backdrop-filter: blur(3px);
    animation: modalFade .15s ease both;
}

.modal-overlay[hidden] { display: none; }

.modal {
    width: min(92vw, 420px);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 24px var(--glow-faint);
    animation: modalPop .18s cubic-bezier(.2, 1.4, .4, 1) both;
}

.modal p {
    margin: .2rem 0 1rem;
    line-height: 1.45;
    white-space: pre-line;
    word-wrap: break-word;
}

/* szerszy wariant modala (dialog trybu odpytywania - checkbox w 1 linii) */
.modal-wide { width: min(92vw, 560px); }

.modal input {
    width: 100%;
    padding: .5rem .7rem;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    outline: none;
}

.modal input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--glow-soft);
}

.modal-btns {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}

.modal .modal-btn-danger {
    color: var(--bad);
    border-color: var(--bad);
}

.modal .modal-btn-danger:hover {
    background: var(--bad-wash);
    box-shadow: 0 0 0 1px var(--bad), 0 0 14px var(--bad-glow);
}

@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: scale(.92) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ---------------- strona startowa gościa ---------------- */
.account-deleted-note {
    padding: .6rem .9rem;
    border: 1px solid var(--ok-border);
    border-radius: 10px;
    background: var(--ok-wash);
}

.welcome {
    max-width: 60ch;
    color: var(--text-dim);
    font-size: 1.02rem;
    line-height: 1.55;
}

.cta { display: flex; gap: .6rem; margin: 1.1rem 0 1.8rem; }

.cta .btn {
    display: inline-block;
    padding: .55rem 1.2rem;
    border-radius: 10px;
    border: 1px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 0 0 rgba(34, 211, 238, 0);
    transition: box-shadow .15s ease, background .15s ease;
}

.cta .btn:hover { background: var(--wash-strong); box-shadow: 0 0 14px var(--glow-strong); text-shadow: none; }

.cta .btn-ghost { border-color: var(--border); color: var(--text-dim); }
.cta .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.public-list li { margin: .3rem 0; }

.public-list a {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    text-decoration: none;
}

.public-list .pf-name { font-size: 1.02rem; }
.public-list .pf-hint { font-size: .8rem; color: var(--text-dim); }

.dim { color: var(--text-dim); font-size: .88rem; }

/* dialog udostępniania: lista wyników wyszukiwania użytkowników */
#shareResults {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 2.8rem;
    max-height: 42vh;
    overflow-y: auto;
    margin: .8rem 0;
}

#shareResults .share-hint { color: var(--text-dim); font-size: .85rem; margin: 0; }

button.share-user { text-align: left; margin: 0; }

/* ============================================================
   TELEFON / wąski ekran (<= 700px): jedna kolumna, większe cele
   dotykowe, tabelki przewijane w poziomie zamiast rozwalać układ.
   ============================================================ */
@media (max-width: 700px) {
    nav {
        flex-wrap: wrap;
        gap: .3rem .9rem;
        padding: .55rem .8rem;
    }

    nav form { margin-left: 0; }

    main {
        margin: .75rem .5rem 1.5rem;
        padding: 1rem .85rem;
        border-radius: 10px;
    }

    h1 { font-size: 1.15rem; }
    h2 { font-size: .95rem; }

    /* cele dotykowe: wygodne dla palca */
    button { padding: .55rem 1rem; }
    input, select { padding: .55rem .7rem; }

    /* kropki motywów: minimalnie większe pod palec */
    button.ts { width: 23px; height: 23px; }

    /* trybik ustawień: proporcjonalnie do kropek */
    button.settings-btn { width: 28px; height: 28px; }
    button.settings-btn svg { width: 18px; height: 18px; }

    /* tabelki (pary w edycji, historia quizów): przewijanie w poziomie
       w obrębie własnego bloku, bez poziomego scrolla całej strony */
    table { display: block; overflow-x: auto; }
    th, td { padding: .4rem .5rem; }

    /* modale nie wychodzą poza ekran przy dłuższej treści */
    .modal {
        width: min(96vw, 420px);
        max-height: 92vh;
        overflow-y: auto;
    }
}

@media (max-width: 420px) {
    h1 { font-size: 1.02rem; }
    nav { gap: .25rem .7rem; }
    nav a { font-size: .92rem; }
}