/* ═══════════════════════════════════════════════════════════════
   HexPlay - Panel Gracza · styles.css
   Ciemny, nowoczesny motyw: szkło, delikatne glow, akcent gradientowy.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Panel jest ciemny, więc mówimy o tym także przeglądarce: dzięki temu
       systemowe elementy (rozwiń liste <select>, pasek przewijania, pola daty)
       rysują się w ciemnych barwach, a nie jako białe prostokąty. */
    color-scheme: dark;
    --bg0: #070b14;
    --bg1: #0b1220;
    --card: rgba(148, 163, 184, 0.055);
    --card2: rgba(148, 163, 184, 0.03);
    --line: rgba(148, 163, 184, 0.13);
    --line-strong: rgba(148, 163, 184, 0.22);
    --text: #e9edf6;
    --muted: #97a1b6;
    --muted2: #6b7590;

    /* domyślny akcent (violet → cyan); nadpisywany przez [data-accent] */
    --acc: #7c5cff;
    --acc2: #00c2ff;
    --acc-soft: rgba(124, 92, 255, 0.16);
    --acc-grad: linear-gradient(135deg, var(--acc), var(--acc2));

    --green: #34d399;
    --red: #fb7185;
    --amber: #fbbf24;
    --blue: #60a5fa;
    --violet: #a78bfa;
    --cyan: #22d3ee;

    --r-lg: 18px;
    --r-md: 13px;
    --r-sm: 9px;
    /* proporcja ikony w kwadratowych znaczkach: 55% boku kwadratu.
       Jedno miejsce do regulacji dla całego panelu, szczegóły w bloku
       „znaczki ikon” na końcu tego pliku. */
    --ic-ratio: 55%;
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-head: 'Sora', var(--font);
    --shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7);

    /* powierzchnie - nadpisywane w trybie jasnym (html[data-theme='light']) */
    --surface-top: rgba(8, 12, 21, 0.72);
    --surface-side: linear-gradient(180deg, rgba(13, 18, 31, 0.92), rgba(8, 12, 22, 0.96));
    --surface-field: rgba(4, 8, 16, 0.45);
    --surface-foot: rgba(5, 8, 15, 0.5);
    --line-faint: rgba(148, 163, 184, 0.08);
}

html[data-accent='cyan']     { --acc: #22d3ee; --acc2: #3b82f6; --acc-soft: rgba(34, 211, 238, 0.15); }
html[data-accent='emerald']  { --acc: #10b981; --acc2: #5eead4; --acc-soft: rgba(16, 185, 129, 0.15); }
html[data-accent='sunset']   { --acc: #ff7a59; --acc2: #fbbf24; --acc-soft: rgba(255, 122, 89, 0.16); }

/* ── tryb jasny ─────────────────────────────────────────────── */
html[data-theme='light'] {
    color-scheme: light;
    --bg0: #eef1f7;
    --bg1: #e3e8f1;
    --card: rgba(15, 23, 42, 0.045);
    --card2: rgba(15, 23, 42, 0.025);
    --line: rgba(15, 23, 42, 0.13);
    --line-strong: rgba(15, 23, 42, 0.24);
    --line-faint: rgba(15, 23, 42, 0.09);
    --text: #111827;
    --muted: #4b5563;
    --muted2: #7b8499;
    --shadow: 0 24px 50px -24px rgba(15, 23, 42, 0.22);

    --surface-top: rgba(255, 255, 255, 0.78);
    --surface-side: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(240, 244, 250, 0.98));
    --surface-field: rgba(15, 23, 42, 0.04);
    --surface-foot: rgba(15, 23, 42, 0.03);
}
html[data-theme='light'] body {
    background:
        radial-gradient(900px 520px at 85% -10%, rgba(124, 92, 255, 0.08), transparent 60%),
        radial-gradient(800px 480px at -10% 110%, rgba(0, 194, 255, 0.07), transparent 60%),
        linear-gradient(180deg, var(--bg0), #f4f6fb 45%, var(--bg1));
}
html[data-theme='light'] .demo-note { color: #7a5c00; }
html[data-theme='light'] .demo-note b,
html[data-theme='light'] .demo-note a { color: #8a6d1a; }
html[data-theme='light'] .badge-discord { color: #4f46e5; border-color: rgba(88, 101, 242, 0.4); }

* { box-sizing: border-box; }

/* ── Główny pasek przewijania okna (spójny z resztą panelu) ──────────────
   `scrollbar-gutter: stable` rezerwuje przy prawej krawędzi stały pas na
   pasek przewijania. Bez tego przejście z długiej strony na krótszą (np.
   z „Bazy danych” na profil) zabierało pasek i cały panel przesuwał się w bok
   o jego szerokość - stąd wrażenie, że przewijanie „się psuje”.

   Świadomie NIE ustawiamy tu `scroll-behavior: smooth`. Panel przywraca
   pozycję przewijania po każdej podmianie treści, także w cyklu odświeżania
   co 10 s - płynne przewijanie z arkusza kazało przeglądarce animować każde
   takie przywrócenie, więc strona „jechała” przez ekran w trakcie odświeżania
   i kończyła w innym miejscu niż przed nim. Tam, gdzie płynny przejazd jest
   naprawdę chciany, wołamy go wprost z kodu: `scrollIntoView({ behavior:
   'smooth' })` (karta pojazdu na profilu, „Jak dołączyć?” na stronie startowej).

   `overscroll-behavior-y: contain` pilnuje, żeby koniec przewijania jakiegoś
   elementu (np. kolumny narzędzi) nie przenosił się na okno i nie odświeżał
   przypadkiem całej strony na telefonie. */
html {
    scrollbar-gutter: stable;
    overscroll-behavior-y: contain;
}
body {
    margin: 0;
    font-family: var(--font);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--text);
    background:
        radial-gradient(900px 520px at 85% -10%, rgba(124, 92, 255, 0.14), transparent 60%),
        radial-gradient(800px 480px at -10% 110%, rgba(0, 194, 255, 0.10), transparent 60%),
        linear-gradient(180deg, var(--bg0), #0a101d 45%, var(--bg1));
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--acc-soft); color: #fff; }
img { max-width: 100%; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.22; margin: 0; }
h1 { font-size: 1.9rem; font-weight: 700; }
h2 { font-size: 1.28rem; font-weight: 600; }
h3 { font-size: 1.04rem; font-weight: 600; }
p { margin: 8px 0; }
small { font-size: .82rem; }
.muted { color: var(--muted); }
.tiny { font-size: .8rem; }
code, .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
kbd {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 1px 7px;
    font-family: var(--font);
    font-size: .85em;
}
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; }
/* dopasowanie ramki fokusa do zaokrąglenia przycisków (inaczej wygląda jak rozciągnięta) */
.btn:focus-visible { border-radius: 12px; }
.no-scroll { overflow: hidden; }

/* Scrollbary - JEDEN wspólny wygląd w całym panelu (okno, kolumna narzędzi,
   listy wyboru, tabele, dzienniki i pola tekstowe). Kolor i rozmiar siedzą
   w zmiennych, więc nie ma już miejsc, gdzie pasek wygląda inaczej niż reszta.
   Chromium/WebKit rysują pasek z ::-webkit-scrollbar, a Firefox z własnych
   właściwości `scrollbar-width` i `scrollbar-color` - dlatego ustawiamy oba. */
:root {
    --sb-thumb: rgba(255, 255, 255, 0.12);
    --sb-thumb-hover: rgba(255, 255, 255, 0.22);
    --sb-size: 10px;
}
html { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: content-box; border: 2px solid transparent; border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }
/* róg, w którym schodzą się oba paski (np. tabela przewijana w obie strony) */
::-webkit-scrollbar-corner { background: transparent; }
/* W Firefoksie `scrollbar-width`/`scrollbar-color` NIE dziedziczą się z <html>,
   więc kontenery z własnym paskiem (menu boczne, kolumna narzędzi) proszą
   o ten sam cienki pasek osobno - inaczej byłby tam pasek systemowy. */
.side-nav,
.gp-side {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) transparent;
}

/* ─────────────── boot (loader) ─────────────── */
.boot-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: var(--muted);
    font-size: 14px;
    animation: fadeUp .5s ease;
}
.spinner {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--acc);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─────────────── marka / logo ─────────────── */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--text);
    white-space: nowrap;
}
.brand-logo { border-radius: 12px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text b { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; letter-spacing: .2px; }
.brand-text b em { font-style: normal; background: var(--acc-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brand-text small { color: var(--muted2); font-size: .58rem; font-weight: 600; letter-spacing: .16em; margin-top: 3px; }

/* ─────────────── topbar publiczny ─────────────── */
.topbar {
    position: sticky; top: 0; z-index: 40;
    background: var(--surface-top);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line-faint);
}
.topbar-in {
    max-width: 1200px; margin: 0 auto; padding: 12px 24px;
    display: flex; align-items: center; gap: 18px;
}
.top-links { display: flex; gap: 4px; margin-left: 14px; }
.nav-link {
    color: var(--muted);
    font-weight: 500; font-size: 14.5px;
    padding: 8px 13px; border-radius: 10px;
    transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav-link.active { color: var(--text); background: var(--acc-soft); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ─────────────── przyciski ─────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent;
    background: none; cursor: pointer;
    font-weight: 600; font-size: 14px;
    padding: 10px 18px; border-radius: 12px;
    color: var(--text);
    transition: transform .15s, box-shadow .2s, filter .2s, background .2s, border-color .2s;
    white-space: nowrap;
    user-select: none;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
    background: var(--acc-grad);
    color: #fff;
    box-shadow: 0 8px 22px -8px var(--acc);
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); background: rgba(255, 255, 255, 0.03); color: var(--text); }
.btn-ghost:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.06); }
.btn-soft { background: var(--acc-soft); color: var(--acc); }
.btn-soft:hover { filter: brightness(1.15); }
.btn-light { background: #fff; color: #10141f; }
.btn-light:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgba(255, 255, 255, 0.5); }
.btn-outline-light { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); }
.btn-discord { background: #5865F2; color: #fff; box-shadow: 0 8px 22px -10px #5865F2; }
.btn-discord:hover { filter: brightness(1.1); }
.btn-danger-ghost { color: var(--red); border-color: rgba(251, 113, 133, 0.35); background: rgba(251, 113, 133, 0.08); }
.btn-danger-ghost:hover { background: rgba(251, 113, 133, 0.16); }
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
.btn-lg { padding: 13px 24px; font-size: 15px; border-radius: 14px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    flex: none;
}
.icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.09); border-color: var(--line); }

/* ─────────────── karty / szkło ─────────────── */
.card {
    background: linear-gradient(165deg, var(--card), var(--card2));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px;
    position: relative;
    box-shadow: var(--shadow);
}
.glass {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.card-h { font-size: 1.02rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

/* ─────────────── chips / pill / badges ─────────────── */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4.5px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: .2px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.chip-soft { background: rgba(148, 163, 184, 0.12); color: var(--muted); border-color: var(--line); }
.chip-green { background: rgba(52, 211, 153, 0.13); color: var(--green); border-color: rgba(52, 211, 153, 0.3); }
.chip-red { background: rgba(251, 113, 133, 0.13); color: var(--red); border-color: rgba(251, 113, 133, 0.3); }
.chip-amber { background: rgba(251, 191, 36, 0.13); color: var(--amber); border-color: rgba(251, 191, 36, 0.3); }
.chip-blue { background: rgba(96, 165, 250, 0.14); color: var(--blue); border-color: rgba(96, 165, 250, 0.3); }
.chip-violet { background: rgba(167, 139, 250, 0.14); color: var(--violet); border-color: rgba(167, 139, 250, 0.3); }
.chip-demo { background: rgba(251, 191, 36, 0.12); color: var(--amber); border-color: rgba(251, 191, 36, 0.28); }
.chip-lg { padding: 7px 14px; font-size: 13px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.chip-green .dot { animation: pulse 1.8s ease infinite; }
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
    60% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}

.badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.badge-discord { color: #aab4ff; border-color: rgba(88, 101, 242, 0.45); background: rgba(88, 101, 242, 0.12); }
/* dziennik zdarzeń bezpieczeństwa w Panelu Admina */
.sec-row .sec-ic { background: rgba(251, 113, 133, 0.12); color: var(--red); }
/* ranga administratora z Discorda - kolor roli wypełnia tekst i obwódkę */
.badge-admin-role {
    color: var(--role-c, #fbbf24);
    border-color: color-mix(in srgb, var(--role-c, #fbbf24) 45%, transparent);
    background: color-mix(in srgb, var(--role-c, #fbbf24) 12%, transparent);
}

.count-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 26px; padding: 0 9px;
    border-radius: 999px;
    background: var(--acc-soft); color: var(--acc);
    font-size: 13px; font-weight: 700; font-family: var(--font-head);
    vertical-align: middle;
}

/* pigułka statusu (pill) */
.pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    border: 1px solid transparent;
    background: none; color: var(--muted); cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.pill:hover { border-color: var(--line); background: rgba(255, 255, 255, 0.05); }
.pill-online { color: var(--green); border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.1); }
.pill-offline { color: var(--red); border-color: rgba(251, 113, 133, 0.35); background: rgba(251, 113, 133, 0.1); }
.pill-demo { color: var(--amber); border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.1); }
.pill-unknown { color: var(--muted); border-color: var(--line); background: var(--line-faint); }

/* awatary */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #fff; font-weight: 700; font-family: var(--font-head);
    flex: none; user-select: none;
    letter-spacing: .3px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
}
.avatar-img { object-fit: cover; }

/* użytkownik (chip z awatarem) */
.who {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
    color: var(--text); font-weight: 600; font-size: 13.5px;
    transition: border-color .15s, background .15s;
}
.who:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.07); }
.who-lg { padding: 5px 16px 5px 5px; font-size: 14px; }

/* ─────────────── landing / hero ─────────────── */
.landing { position: relative; overflow: hidden; }
.hero {
    position: relative;
    padding: 74px 24px 88px;
    display: flex;
    justify-content: center;
}
.hero-inner {
    max-width: 1200px; width: 100%;
    display: grid; grid-template-columns: 1.15fr .85fr;
    gap: 48px; align-items: center;
}
.hero-copy .chip { margin-bottom: 20px; }
.hero-copy h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: -1px; }
.hero-copy h1 em {
    font-style: normal;
    background: var(--acc-grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-copy > p { color: var(--muted); font-size: 1.06rem; max-width: 540px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-trust { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 26px; color: var(--muted); font-size: 13.5px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust svg { color: var(--green); }

.orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .5; }
.orb-a { width: 460px; height: 460px; background: rgba(124, 92, 255, 0.28); top: -180px; right: -120px; animation: float 9s ease-in-out infinite; }
.orb-b { width: 380px; height: 380px; background: rgba(0, 194, 255, 0.2); bottom: -170px; left: -110px; animation: float 11s ease-in-out infinite reverse; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }

/* karta serwera w hero */
.server-card { padding: 24px; }
.server-head { display: flex; gap: 14px; align-items: center; }
.server-meta h3 { font-size: 1.06rem; }
.server-meta-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; margin-top: 3px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.stat {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 13px 8px;
    text-align: center;
}
.stat b { display: block; font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; }
.stat span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.cmd-row { margin-top: 18px; }
.cmd-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted2); font-weight: 600; display: block; margin-bottom: 6px; }
.cmd {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface-field);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 9px 9px 9px 15px;
}
.cmd code { flex: 1; color: var(--cyan); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-big { padding: 10px 10px 10px 18px; margin-top: 14px; }
.cmd-big code { font-size: 15.5px; }
.online-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.avatars { display: flex; align-items: center; }
.avatars .avatar { margin-left: -9px; border: 2px solid rgba(255, 255, 255, 0.06); }
.avatars .avatar:first-child { margin-left: 0; }
.avatars .more { background: rgba(148, 163, 184, 0.22); font-size: 11px; }

/* sekcje ogólne */
.sec { max-width: 1200px; margin: 0 auto; padding: 26px 24px 60px; }
.sec-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.sec-head h2 { font-size: 1.7rem; letter-spacing: -.3px; }
.sec-head p { color: var(--muted); }
.sec-head.row { display: flex; justify-content: space-between; align-items: end; text-align: left; max-width: none; gap: 18px; }
.sec-head.row h2 { font-size: 1.5rem; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--acc); white-space: nowrap; }

.grid-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat { padding: 24px; transition: transform .2s, border-color .2s; }
.feat:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.feat h3 { margin: 16px 0 8px; font-size: 1.02rem; }
.feat p { color: var(--muted); font-size: 14px; margin: 0; }
.feat-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 13px;
    background: var(--acc-grad);
    color: #fff;
    box-shadow: 0 10px 24px -10px var(--acc);
    flex: none;
}
.feat:hover .feat-ic { transform: scale(1.06) rotate(-3deg); }
.feat-ic svg { display: block; }
.feat-ic, .step .feat-ic { transition: transform .2s; }

.grid-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { padding: 24px; }
.step-num {
    position: absolute; top: 14px; right: 18px;
    font-family: var(--font-head); font-weight: 800; font-size: 2.6rem;
    background: var(--acc-grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    opacity: .25;
}
.step h3 { margin: 16px 0 8px; font-size: 1rem; }
.step p { color: var(--muted); font-size: 13.5px; margin: 0; }

/* CTA */
.cta-wrap { padding: 0 24px 70px; }
.cta-card {
    max-width: 1200px; margin: 0 auto;
    border-radius: 24px;
    padding: 42px 48px;
    display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
    background:
        radial-gradient(600px 300px at 85% 0%, rgba(0, 194, 255, 0.25), transparent 60%),
        radial-gradient(500px 260px at 0% 100%, rgba(124, 92, 255, 0.3), transparent 60%),
        linear-gradient(120deg, #171337, #0b2133);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow);
}
.cta-card h2 { font-size: 1.55rem; }
.cta-card p { color: rgba(233, 237, 246, 0.75); margin: 6px 0 0; }
.cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.grid-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mini-news {
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: linear-gradient(165deg, var(--card), var(--card2));
    color: var(--text);
    transition: transform .2s, border-color .2s, box-shadow .2s;
    box-shadow: var(--shadow);
}
.mini-news:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.8); }
.mini-news h4 { font-size: .98rem; font-weight: 600; }
.mini-news .chip { align-self: flex-start; }
.mini-news small { color: var(--muted2); }
.mini-news .chip { margin-bottom: 2px; }

/* footer */
.footer {
    border-top: 1px solid var(--line-faint);
    background: var(--surface-foot);
    padding: 44px 24px 22px;
    margin-top: 40px;
}
.footer-in {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 34px;
}
.footer .muted { font-size: 13.5px; max-width: 380px; margin-top: 12px; }
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links b { font-family: var(--font-head); margin-bottom: 4px; font-size: 14px; }
.footer-links a { color: var(--muted); font-size: 14px; transition: color .15s; }
.footer-links a:hover { color: var(--text); }
.footer-bottom {
    max-width: 1200px; margin: 34px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--line-faint);
    font-size: 12.5px; color: var(--muted2);
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ─────────────── strony publiczne (aktualności, regulamin…) ─────────────── */
.page { max-width: 1000px; margin: 0 auto; padding: 56px 24px 40px; }
.page-head { margin-bottom: 36px; }
.page-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); letter-spacing: -.5px; margin: 10px 0 8px; }
.page-head p { color: var(--muted); max-width: 620px; }
.page-kicker {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--acc); font-weight: 700; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .12em;
}
.layout-news { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.grid-news-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.layout-single { display: flex; flex-direction: column; gap: 14px; }
.layout-single.narrow { max-width: 780px; margin: 0 auto; }

.news-feat { padding: 30px; background: radial-gradient(500px 200px at 90% -10%, var(--acc-soft), transparent 70%), linear-gradient(165deg, var(--card), var(--card2)); }
.news-feat-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.news-feat h2 { font-size: 1.6rem; letter-spacing: -.3px; }
.news-feat .lead { color: var(--muted); font-size: 1.03rem; }
.news-body { margin-top: 14px; }
.news-body p { color: var(--muted); }

.news-item { padding: 0; overflow: hidden; }
.news-item summary { list-style: none; cursor: pointer; padding: 20px 22px; }
.news-item summary::-webkit-details-marker { display: none; }
.news-item summary h3 { margin: 10px 0 6px; font-size: 1.05rem; transition: color .15s; }
.news-item summary p { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.news-item-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.news-item summary .more { display: inline-flex; align-items: center; gap: 6px; color: var(--acc); font-weight: 600; font-size: 13.5px; }
.news-item summary .more svg { transition: transform .2s; }
.news-item[open] summary .more svg { transform: rotate(90deg); }
.news-item[open] summary h3 { color: var(--acc); }
.news-item .news-body { padding: 0 22px 22px; border-top: 1px dashed var(--line); padding-top: 4px; }

.col-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 90px; }
.side-card h3 { display: flex; align-items: center; gap: 9px; font-size: 1rem; margin-bottom: 6px; }
.side-card h3 svg { color: var(--acc); }
.side-card p { color: var(--muted); font-size: 13.5px; }
.side-card .btn { width: 100%; margin-top: 10px; }

/* notatki */
.note {
    display: flex; gap: 13px; align-items: flex-start;
    padding: 16px 18px;
    border-radius: var(--r-md);
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}
.note svg { color: var(--acc); flex: none; margin-top: 2px; }
.note b { color: var(--text); }
/* Kolejne notatki stojące jedna pod drugą (zakładki „Pojazdy” i „Webhook”) muszą
   mieć odstęp - pojedyncza notatka nie ma własnego marginesu, bo zwykle jest
   w karcie sama, więc bez tej reguły ramki notatek się zlewały. */
.note + .note { margin-top: 14px; }
.note-warn { background: rgba(251, 191, 36, 0.07); border-color: rgba(251, 191, 36, 0.25); }
.note-warn svg { color: var(--amber); }
.note .btn { margin-left: auto; }

/* regulamin */
.rules-wrap { display: flex; flex-direction: column; gap: 12px; }
.rules-group { padding: 0; overflow: hidden; }
.rules-group summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 14px;
    padding: 17px 20px;
}
.rules-group summary::-webkit-details-marker { display: none; }
.rules-group summary:hover { background: rgba(255, 255, 255, 0.025); }
.rules-group .feat-ic { width: 38px; height: 38px; border-radius: 11px; }
.rules-title { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; }
.rules-group summary .count {
    margin-left: auto;
    min-width: 26px; height: 26px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--muted);
    font-size: 12.5px; font-weight: 700;
    transition: background .2s, color .2s;
}
.rules-group[open] summary .count { background: var(--acc-soft); color: var(--acc); }
.rules-list {
    margin: 0; padding: 6px 22px 18px 60px;
    counter-reset: rule;
    display: flex; flex-direction: column; gap: 10px;
    border-top: 1px dashed var(--line);
    padding-top: 14px;
}
.rules-list li {
    list-style: none;
    counter-increment: rule;
    position: relative;
    padding-left: 4px;
    color: var(--muted);
    font-size: 14.5px;
}
.rules-list li::before {
    content: counter(rule);
    position: absolute; left: -42px; top: 1px;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--acc-soft); color: var(--acc);
    font-family: var(--font-head);
    font-size: 12px; font-weight: 700;
}

/* FAQ */
.faq-item { padding: 0; overflow: hidden; }
.faq-item summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 16px;
    padding: 17px 20px;
    position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .q { font-family: var(--font-head); font-weight: 600; font-size: 1rem; flex: 1; }
.faq-item summary::after {
    content: ''; flex: none;
    width: 9px; height: 9px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform .2s, border-color .2s;
    margin-right: 6px;
}
.faq-item[open] summary::after { transform: rotate(-135deg); border-color: var(--acc); }
.faq-item .a {
    margin: 0; padding: 0 22px 20px;
    color: var(--muted);
    border-top: 1px dashed var(--line);
    padding-top: 14px;
}
.cta-inline { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.cta-inline h3 { font-size: 1.08rem; }
/* banery Discord na stronie startowej (sekcja z „cta-inline”) */
.grid-discord { display: grid; grid-template-columns: 1fr; gap: 14px; }
.grid-discord .cta-inline h3 { display: flex; align-items: center; gap: 8px; }
.grid-discord .cta-inline h3 svg { color: var(--acc); flex-shrink: 0; }

/* ekran logowania */
.login-box {
    max-width: 440px; margin: 30px auto;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 40px 32px;
}
.login-box > svg { color: var(--acc); }
.login-box .note { text-align: left; }
.login-box .btn { width: 100%; }

/* ─────────────── layout aplikacji (sidebar) ─────────────── */
.app { display: flex; min-height: 100vh; }

.side {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 256px;
    display: flex; flex-direction: column;
    background: var(--surface-side);
    border-right: 1px solid var(--line-faint);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 60;
    padding: 18px 14px 14px;
}
.side-head { padding: 6px 10px 18px; border-bottom: 1px solid var(--line-faint); margin-bottom: 14px; }
.side-nav {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    /* Menu boczne też ma czasem więcej pozycji niż miejsca: stały pas na pasek
       sprawia, że pojawienie się paska nie zwęża pozycji w połowie klikania. */
    scrollbar-gutter: stable;
}
.nav-group {
    font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted2);
    padding: 14px 12px 6px;
}
.nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--muted);
    font-weight: 500; font-size: 14.5px;
    position: relative;
    transition: background .15s, color .15s;
}
.nav-item:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav-item.active { color: var(--text); background: var(--acc-soft); }
.nav-item .nav-ic { display: inline-flex; color: currentColor; opacity: .85; }
.nav-item.active .nav-ic { color: var(--acc); opacity: 1; }
.nav-glow {
    position: absolute; inset: 0; border-radius: 12px;
    background: var(--acc-grad); opacity: .06; pointer-events: none;
}

.side-foot { border-top: 1px solid var(--line-faint); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.side-status {
    display: flex; flex-direction: column; gap: 5px;
    padding: 10px 12px; border-radius: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
}
.side-status:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--line); }
.side-status .pill-slot { display: flex; }
.side-user { display: flex; align-items: center; gap: 6px; }
.side-user-in {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border-radius: 12px;
    flex: 1; min-width: 0;
    color: var(--text);
    transition: background .15s;
}
.side-user-in:hover { background: rgba(255, 255, 255, 0.05); }
.side-user-meta { display: flex; flex-direction: column; min-width: 0; }
.side-user-meta b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-meta small { color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.scrim {
    position: fixed; inset: 0;
    background: rgba(4, 7, 14, 0.66);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 55;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
.scrim.show { opacity: 1; pointer-events: auto; }

.app-main { margin-left: 256px; width: calc(100% - 256px); min-width: 0; }
.app-content { max-width: 1180px; margin: 0 auto; padding: 30px 34px 30px; }
.app-footer { text-align: center; font-size: 12.5px; padding: 34px 0 10px; }

.mobile-top {
    display: none;
    position: sticky; top: 0; z-index: 50;
    align-items: center; gap: 10px;
    padding: 10px 16px;
    background: var(--surface-top);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-faint);
}
.mobile-top .pill { margin-left: auto; }

/* baner demo */
.demo-note {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    margin-bottom: 22px;
    border-radius: 14px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: #e8d9ae;
    font-size: 13.5px;
}
.demo-note > svg { color: var(--amber); flex: none; }
.demo-note span { flex: 1; }
.demo-note b { color: var(--amber); }
.demo-note a { color: var(--amber); font-weight: 600; text-decoration: underline; }
.demo-note .icon-btn { color: var(--amber); }

/* nagłówek widoku */
.dash-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    margin-bottom: 26px;
}
.dash-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.4px; }
.dash-head h1 .wave { display: inline-block; }
.dash-head-actions { display: flex; align-items: center; gap: 10px; }
.dash-head p { margin: 8px 0 0; }

/* KPI */
/* minmax(0, 1fr) zamiast 1fr: kolumna nie rozciąga się od treści, więc kafelki
   nie wychodzą poza kartę (długi opis + znaczek po prawej nie rozpycha wiersza). */
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
/* flex-wrap: gdy zabraknie miejsca, znaczek schodzi do drugiej linii kafelka,
   zamiast wystawać poza jego ramkę. */
.kpi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 15px; padding: 16px 18px; min-width: 0; }
.kpi > div { display: flex; flex-direction: column; min-width: 0; flex: 1 1 120px; }
.kpi b { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.kpi b small { font-size: .95rem; color: var(--muted); font-weight: 600; }
.kpi span:not(.chip) { font-size: 12.5px; color: var(--muted); }
.kpi .chip { margin-left: auto; flex: 0 1 auto; max-width: 100%; }
.kpi-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 14px;
    color: #fff; flex: none;
    box-shadow: 0 10px 22px -12px currentColor;
}
.kpi-ic svg { display: block; }
.kpi-blue { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.kpi-violet { background: linear-gradient(135deg, #a78bfa, #7c5cff); }
.kpi-cyan { background: linear-gradient(135deg, #22d3ee, #0ea5e9); }
.kpi-amber { background: linear-gradient(135deg, #fbbf24, #f97316); }

/* siatka panelu */
.dash-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
.dash-main { display: flex; flex-direction: column; gap: 18px; }
.dash-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 24px; }

.big-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.big-card-head h2 { font-size: 1.2rem; margin-top: 6px; }
.big-card .page-kicker { display: inline-flex; }

/* pasek zajętości */
.occ-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.occ-bar {
    flex: 1; height: 8px;
    background: rgba(148, 163, 184, 0.12);
    border-radius: 999px;
    overflow: hidden;
}
.occ-bar i {
    display: block; height: 100%;
    background: var(--acc-grad);
    border-radius: 999px;
    transition: width .6s ease;
    box-shadow: 0 0 12px rgba(124, 92, 255, 0.5);
}
.occ-bar.mini { flex: none; width: 100%; margin-top: 10px; height: 6px; }
.occ-row .muted { font-size: 12.5px; white-space: nowrap; }

/* mini lista graczy */
.pl-mini-list { display: flex; flex-direction: column; margin: 0 0 18px; padding: 0; list-style: none; gap: 2px; }
.pl-mini { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 11px; }
.pl-mini:hover { background: rgba(255, 255, 255, 0.04); }
.pl-name { flex: 1; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-ping { color: var(--muted2); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* akcje */
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.act {
    display: flex; align-items: center; gap: 13px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: transform .15s, border-color .15s, background .15s;
}
.act:hover { transform: translateY(-2px); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.05); }
.act-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px; flex: none;
    background: var(--acc-soft); color: var(--acc);
}
.act b { display: block; font-size: 14px; font-weight: 600; }
.act small { color: var(--muted2); font-size: 12px; }

/* side (kolumna) */
.side-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.news-mini-col { display: flex; flex-direction: column; }
.news-mini-col .mini-news { box-shadow: none; border: none; background: none; border-radius: 12px; padding: 10px 8px; border-top: 1px dashed var(--line); }
.news-mini-col .mini-news:first-child { border-top: none; }
.news-mini-col h4 { font-size: .9rem; }
.news-mini-col small { font-size: .72rem; }
.support-card h3 { margin: 14px 0 6px; font-size: 1.05rem; }
.support-card p { color: var(--muted); font-size: 13.5px; }
.support-card .btn { width: 100%; }
.note-side p { font-size: 13px; margin: 10px 0 0; }

/* widok serwera */
.grid-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.stat-card { display: flex; flex-direction: column; gap: 2px; padding: 20px; }
.stat-card > div:not(.occ-bar) { display: flex; flex-direction: column; }
.stat-card b { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.stat-card b small { color: var(--muted); }
.stat-card span { font-size: 12.5px; color: var(--muted); }
.server-panel-card { margin: 18px 0; }
.players-card { padding: 24px; }

.search-wrap {
    display: flex; align-items: center; gap: 9px;
    background: var(--surface-field);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0 13px;
    color: var(--muted2);
    min-width: 220px;
}
.search-wrap:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.search-wrap input {
    background: none; border: none; outline: none;
    color: var(--text);
    font-family: inherit; font-size: 14px;
    padding: 10px 0; width: 100%;
}
.search-wrap input::placeholder { color: var(--muted2); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; container-type: inline-size; }
.table { width: 100%; border-collapse: collapse; min-width: 520px; }
.table thead th {
    text-align: left;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--muted2);
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid var(--line);
}
.table tbody td { padding: 10px 16px; border-bottom: 1px solid var(--line-faint); font-size: 14px; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.pl-id { font-variant-numeric: tabular-nums; color: var(--muted2) !important; }
.pl-cell { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.pl-ident { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pl-ident b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-ident .pl-sub { font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-ping-cell { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.ping { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.ping-good { background: var(--green); }
.ping-mid { background: var(--amber); }
.ping-bad { background: var(--red); }

.empty-state {
    text-align: center; padding: 54px 20px;
    color: var(--muted);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.empty-state svg { color: var(--muted2); }
.empty-state h3 { color: var(--text); font-size: 1.1rem; }
.empty-state p { font-size: 13.5px; max-width: 460px; margin: 0; }

/* profil */
.profile-grid { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.profile-col { display: flex; flex-direction: column; gap: 18px; }
.profile-card { text-align: center; padding: 30px 22px; position: relative; }
.profile-card h2 { margin-top: 16px; font-size: 1.3rem; }
.profile-avatar { position: relative; display: block; }
.profile-avatar > * { vertical-align: middle; }
.profile-avatar .avatar { width: 96px; height: 96px; font-size: 30px; box-shadow: 0 0 0 4px var(--acc-soft), 0 16px 40px -12px rgba(0, 0, 0, 0.8); }
.chip-profile { display: inline-flex; margin-top: 12px; }
.badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.info-rows { list-style: none; margin: 0; padding: 0; }
.info-rows li {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--line-faint);
    font-size: 14px;
}
.info-rows li:last-child { border-bottom: none; }
.info-rows li > span { color: var(--muted); }
.info-rows b { display: inline-flex; align-items: center; gap: 8px; text-align: right; flex-wrap: wrap; justify-content: flex-end; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.swatch {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 14px 9px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600;
    transition: border-color .15s, color .15s, background .15s;
}
.swatch i { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); display: block; box-shadow: 0 4px 10px -4px var(--sw); }
.swatch.active { border-color: var(--sw); color: var(--text); background: rgba(255, 255, 255, 0.06); }
.swatch.active i { box-shadow: 0 0 0 3px var(--acc-soft), 0 4px 10px -4px var(--sw); }

/* przełącznik trybu (jasny / ciemny) */
.theme-row {
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.theme-label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.theme-label svg { color: var(--acc); }
.theme-btns { display: flex; gap: 8px; }
.theme-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px; border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted); cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600;
    transition: border-color .15s, color .15s, background .15s;
}
.theme-btn:hover { color: var(--text); border-color: var(--line-strong); }
.theme-btn.active { background: var(--acc-soft); border-color: var(--acc); color: var(--acc); }

/* profil: zakładki */
.ptabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ptab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted); cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600;
    transition: border-color .15s, color .15s, background .15s;
}
.ptab:hover { color: var(--text); border-color: var(--line-strong); }
.ptab.active { background: var(--acc-soft); border-color: var(--acc); color: var(--acc); }
.ptab-panel { display: none; }
.ptab-panel.active { display: block; }

/* profil: logi logowania */
.log-rows { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.log-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--line-faint);
}
.log-row:last-child { border-bottom: none; }
.log-ic {
    flex: none; width: 38px; height: 38px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--acc-soft); color: var(--acc);
}
.log-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.log-main b { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.log-main small { color: var(--muted); font-size: 12.5px; margin-top: 3px; display: block; }
/* Długi, nieprzerywalny tekst (identyfikator postaci z dziennika bezpieczeństwa,
   adres) nie może rozciągać karty i całej kolumny - inaczej strona przewija się
   w bok. `anywhere` (nie `break-word`) zmniejsza też szerokość minimalną. */
.log-main small, .log-main b { overflow-wrap: anywhere; }
.log-main .mono { color: var(--muted); }
/* kolumna „Discord” w liście graczy: awatar konta obok identyfikatora */
.gp-dc { display: inline-flex; align-items: center; gap: 7px; }
.log-time { color: var(--muted2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* czas względny z tooltipem (PP.ui.timeAgoHtml) - pełna data i godzina po najechaniu */
.ago { cursor: help; border-bottom: 1px dotted var(--line); }
.ago:hover { color: var(--text); border-bottom-color: var(--acc); }
.empty-state.small { padding: 30px 16px; }

@media (max-width: 560px) {
    .log-row { flex-wrap: wrap; }
    .log-time { width: 100%; padding-left: 50px; }
}

/* „Zobacz więcej / Zobacz mniej” pod długą listą dziennika (Przegląd admina):
   domyślnie pokazujemy tylko kilka wpisów, żeby karta nie wyglądała jak ściana
   tekstu - reszta czeka pod przyciskiem (dane są już pobrane). */
.log-more {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--line-faint);
}

/* toasty */
#toasts {
    position: fixed; top: 16px; right: 16px; z-index: 999;
    display: flex; flex-direction: column; gap: 8px;
    max-width: min(360px, calc(100vw - 32px));
}
.toast {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 13px;
    background: rgba(16, 22, 38, 0.95);
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    font-size: 13.5px;
    opacity: 0; transform: translateX(16px);
    transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-ic { display: inline-flex; color: var(--blue); }
.toast.ok .toast-ic { color: var(--green); }
.toast.err .toast-ic { color: var(--red); }

/* animacje */
#root { animation: fadeUp .25s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ─────────────── responsywność ─────────────── */
@media (max-width: 1240px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .grid-status { grid-template-columns: repeat(2, 1fr); }
    .grid-feats { grid-template-columns: repeat(2, 1fr); }
    .grid-steps { grid-template-columns: repeat(2, 1fr); }
    .layout-news { grid-template-columns: 1fr; }
    .col-side { position: static; flex-direction: row; flex-wrap: wrap; }
    .col-side .side-card { flex: 1 1 240px; }
}

@media (max-width: 1080px) {
    .side { transform: translateX(-105%); transition: transform .28s ease; box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5); }
    .side.open { transform: translateX(0); }
    .app-main { margin-left: 0; width: 100%; }
    .mobile-top { display: flex; }
    .app-content { padding: 24px 20px 40px; }
    .hero-inner { grid-template-columns: 1fr; gap: 34px; }
    .hero { padding-top: 52px; }
    .hero-side { max-width: 560px; width: 100%; }
    .profile-grid { grid-template-columns: 1fr; }
    .profile-card { max-width: 420px; }
}

@media (max-width: 860px) {
    .dash-grid { grid-template-columns: 1fr; }
    .dash-side { position: static; }
    .acts { grid-template-columns: 1fr; }
    .cta-card { padding: 30px 24px; }
}

@media (max-width: 680px) {
    .grid-feats, .grid-steps, .grid-news { grid-template-columns: 1fr; }
    .kpi-row, .grid-status { grid-template-columns: 1fr; }
    .topbar-in { padding: 10px 14px; gap: 12px; }
    .top-links { order: 3; width: 100%; overflow-x: auto; margin: 0; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .top-links::-webkit-scrollbar { display: none; }
    .top-actions { margin-left: auto; }
    .top-actions .who span:not(.avatar) { display: none; }
    .footer-in { grid-template-columns: 1fr; gap: 22px; }
    .footer-bottom { flex-direction: column; }
    .page { padding: 34px 16px 26px; }
    .hero { padding: 40px 16px 60px; }
    .sec { padding: 20px 16px 46px; }
    .hero-copy h1 { font-size: 2.1rem; }
    .dash-head-actions .who { display: none; }
    .search-wrap { width: 100%; min-width: 0; }
    .big-card-head { flex-direction: column; }
    .players-card .big-card-head { flex-direction: row; flex-wrap: wrap; }
    .online-row { flex-direction: column; align-items: stretch; }
    .occ-row { flex-wrap: wrap; }
    .note { flex-wrap: wrap; }
    .note .btn { margin-left: 0; }
}

/* ───────────────────────── Postacie ───────────────────────── */
.kpi-green { background: linear-gradient(135deg, #34d399, #0ea5e9); }

.filters-row { display: flex; gap: 12px; margin-bottom: 18px; align-items: stretch; }
.search-wrap.grow { flex: 1; }

/* filtr pochodzenia w widoku „Postacie”: dokładnie ta sama wysokość co pole
   szukania obok (pole szukania ma mniejszy pionowy padding niż zwykłe .input,
   więc przycisk listy dostaje tutaj taki sam) */
.chars-pick { display: flex; min-width: 210px; }
.chars-pick .pick-btn { padding: 8px 13px; }

/* ramka informacyjna w widoku „Postacie” - lekki odstęp od nagłówka i kart poniżej */
.chars-note { margin: 0 0 20px; }

.char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    /* Karty mierzą się treścią, a nie wysokością najwyższej karty w wierszu.
       Siatka domyślnie rozciąga elementy (`stretch`), więc gdy obok stała karta
       zablokowanego konta (dłuższa, bo ma akapit blokady), sąsiednia karta
       bez blokady robiła się wysoka na cały wiersz - stopka odsuwała się
       w dół (`margin-top: auto`) i zostawała duża pusta przerwa. */
    align-items: start;
}
.char-card { display: flex; flex-direction: column; overflow: hidden; }

.char-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px 14px;
    border-bottom: 1px dashed var(--line);
}
.char-head .avatar { flex: none; }
.char-name { min-width: 0; }
.char-name h3 { font-size: 1.08rem; margin: 0 0 6px; }
.char-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-xs { padding: 3px 9px; font-size: 11px; }

.char-rows { list-style: none; margin: 0; padding: 6px 0; }
.char-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    font-size: 13.5px;
}
.char-row + .char-row { border-top: 1px solid var(--line-faint); }
.char-row > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    min-width: 140px;
    white-space: nowrap;
}
.char-row > span svg { color: var(--muted2); }
.char-row b {
    margin-left: auto;
    text-align: right;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    min-width: 0;
    overflow-wrap: anywhere;
}
.char-row b .icon-btn { color: var(--muted2); }
.char-row b .icon-btn:hover { color: var(--acc); }

.char-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--card2);
}
.char-bal { display: flex; flex-direction: column; line-height: 1.4; }
.char-bal small { color: var(--muted); }
.char-bal b { font-size: 1.12rem; font-family: var(--font-head); }
.char-foot .chip { flex: none; }

/* Postać z zablokowanym kontem (`users.disabled = 1`). W widoku „Postacie”
   karta zostaje na liście: blokadę widać po ramce całej karty, a pod imieniem
   stoi zwykły tekst (bez własnego pudełka). Na podstronie profilu postaci ta
   sama informacja jest notatką nad sekcjami. */
.char-card-blocked {
    border-color: rgba(251, 113, 133, 0.45);
    box-shadow: var(--shadow), 0 0 0 3px rgba(251, 113, 133, 0.07);
}
.char-blocked-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 20px 16px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}
.char-blocked-line svg { color: var(--red); flex: none; margin-top: 2px; }
.char-blocked-line b { color: var(--text); }
/* Ten sam komunikat na podstronie profilu postaci: ponieważ nagłówek profilu
   to kontener flex z zawijaniem (`flex-wrap: wrap`), akapit blokady dostaje
   pełną szerokość i ląduje w osobnym wierszu, oddzielony przerywaną linią -
   tak jak w karcie w widoku „Postacie” (tam blokadę oddziela stopka karty). */
.char-profile-head .char-blocked-line {
    flex: 1 0 100%;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}
/* Powód blokady konta (baza panelu → karta postaci gracza): osobny wiersz
   obok informacji o blokadzie, więc gracz od razu wie, DLACZEGO nie wejdzie
   na serwer - a nie tylko że nie wejdzie. Bez powodu (blokada sprzed tej
   funkcji) zostaje sam tekst ogólny, bez tego wiersza. */
.char-blocked-reason {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0 2px;
    padding: 7px 10px;
    border: 1px solid rgba(251, 113, 133, 0.28);
    border-radius: 8px;
    background: rgba(251, 113, 133, 0.08);
}
.char-blocked-reason svg { margin-top: 1px; }

/* podstrona profilu postaci (widok „Postacie” → Szczegóły) */
/* wspólny kontener nagłówka i siatki - nagłówek mierzymy względem siatki,
   żeby jego szerokość idealnie pasowała do jednej kolumny („Praca i finanse”) */
.char-page { max-width: 980px; }
/* Podstrona profilu gracza z narzędziami administratora obok treści potrzebuje
   szerszego pola niż zwykła kolumna panelu (980 px), żeby dane postaci nie
   zwęziły się o szerokość prawej kolumny. */
.gp-page { max-width: 1400px; }
.app-content:has(.gp-layout) { max-width: 1500px; }
.char-profile-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; margin-bottom: 14px; flex-wrap: wrap;
    /* wyrównana do LEWEJ; szerokość pełna siatki - prawa krawędź karty
       idealnie pokrywa się z prawą krawędzią kolumny „Praca i finanse” */
    width: 100%;
    margin-left: 0;
}
.char-profile-head .char-head { flex: 1; min-width: 0; padding: 0; border-bottom: none; }
.char-profile-head .char-name small { color: var(--muted2); font-size: 12px; display: block; margin: -2px 0 6px; }
/* ramka przycisku „Wróć do postaci” jak ramka kart (np. „Zatrudnienie”):
   ten sam border, zaokrąglenie i tło co sekcje */
.char-profile-head .btn {
    flex: none;
    align-self: center;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--card2);
    padding: 11px 18px;
    font-size: 13.5px;
}
.char-profile-head .btn:hover { border-color: var(--line-strong); background: var(--card); }
.char-profile-head .btn:focus-visible { border-radius: var(--r-lg); outline-offset: 1px; }/* kategorie profilu: siatka maks. 2 obok siebie; karta w rzędzie wypełnia
   wysokość rzędu („Pojazdy” nie zostawia pustki obok „Czasu gry”), a ostatnia
   kategoria („Licencje”) rozciąga się na całą szerokość - układ niesymetryczny,
   bez pustych dziur */
.char-secs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 980px;
}
.char-sec { padding: 16px 20px; min-width: 0; }
.char-sec-full { grid-column: 1 / -1; }
/* Profil postaci: treść z lewej, „Narzędzia administratora” z prawej.
   Prawa kolumna trzyma się przy przewijaniu (sticky), a na węższym ekranie
   spada pod treść - najpierw dane gracza, potem narzędzia. */
.gp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 16px;
    align-items: start;
    margin-top: 14px;
}
/* Prawa kolumna (ostrzeżenia, notatki i narzędzia administratora) stoi
   nieruchomo przy przewijaniu strony, ale ma WŁASNY pasek przewijania:
   notatki i cztery kafle narzędzi bywają wyższe niż okno, a wtedy samo
   `sticky` przycinało dół kolumny - ostatnich opcji (licencje, „Zapisz stany
   kont”) nie dało się dosięgnąć ani kółkiem myszy, ani paskiem strony.
   Teraz kolumna przewija się sama, najwyżej na wysokość okna, więc cała jej
   zawartość i wszystkie opcje są zawsze dostępne.
   Ujemny margines z takim samym odstępem trzyma karty w tej samej szerokości
   i przy tej samej prawej krawędzi co wcześniej - pasek leży OBOK kart,
   a nie na nich. */
.gp-side {
    display: grid;
    gap: 14px;
    position: sticky;
    top: 24px;
    align-content: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;   /* koniec kolumny nie porywa całej strony */
    scrollbar-gutter: stable;
    margin-right: -12px;
    padding-right: 12px;
}
.gp-side .gp-tools { grid-template-columns: minmax(0, 1fr); }
.gp-tools-card { padding: 16px 18px; }
/* Ostrzeżenia i notatki administracji o postaci (baza panelu): formularz
   z wyborem rodzaju wpisu i lista tego, co już ktoś zapisał. Karta stoi
   w prawej kolumnie, nad narzędziami administratora. */
.gp-notes-card { padding: 16px 18px; }
.gp-note-form { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 14px; }
.gp-note-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.gp-note-form textarea {
    width: 100%;
    resize: vertical;
    min-height: 66px;
    background: var(--surface-field);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.55;
    outline: none;
}
.gp-note-form textarea:focus { border-color: var(--acc); }
.gp-note-form textarea::placeholder { color: var(--muted2); }
.gp-note-form .btn { align-self: flex-start; }
.gp-note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gp-note {
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--surface-field);
}
/* Ostrzeżenie musi być widoczne na pierwszy rzut oka. */
.gp-note-warn { border-left-color: var(--red); background: rgba(251, 113, 133, 0.07); }
.gp-note-top { display: flex; align-items: center; gap: 8px; }
.gp-note-top .log-time { margin-left: auto; font-size: 11.5px; }
.gp-note-del { flex: none; }
.gp-note-text { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.gp-note-by { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.gp-note-empty { margin: 0; }
/* znaczniki notatek przy postaci na liście graczy */
.gp-note-marks { display: inline-flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
/* Trzy stany szerokości (liczone z menu bocznym 256 px i marginesami panelu):
   1. bardzo szeroko - dane postaci w dwóch kolumnach + narzędzia z prawej,
   2. średnio - narzędzia zostają z prawej, ale dane postaci idą jedną kolumną
      (dwie kolumny po 360 px byłyby nieczytelne),
   3. wąsko (telefon) - narzędzia wracają pod treść, pełną szerokością. */
@media (max-width: 1590px) {
    .gp-layout > .char-secs { grid-template-columns: minmax(0, 1fr); }
    .gp-layout > .char-secs > .char-sec-full { grid-column: auto; }
}
@media (max-width: 860px) {
    .gp-layout { grid-template-columns: minmax(0, 1fr); }
    /* Na jednej kolumnie (telefon) narzędzia wracają pod treść - kolumna nie
       jest już przypięta, więc nie potrzebuje własnego paska ani limitu
       wysokości; przewija się razem ze stroną. */
    .gp-side {
        position: static;
        max-height: none;
        overflow: visible;
        overscroll-behavior: auto;
        margin-right: 0;
        padding-right: 0;
    }
    .gp-side .gp-tools { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}

.char-sec-h {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem; margin: 0 0 12px; color: var(--text);
}
.char-sec-h svg { color: var(--acc); flex: none; }
/* lista przedmiotów postaci (ekwipunek) */
.item-rows { display: flex; flex-direction: column; }
.item-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(140px, 2fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
    border-bottom: 1px solid var(--line-faint);
    font-size: 13.5px;
}
.item-row:last-child { border-bottom: none; }
.item-id { color: var(--muted2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.item-name { font-weight: 600; }
.item-count { color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) {
    .item-row { grid-template-columns: 1fr auto; }
    .item-id { grid-column: 1 / -1; }
}

/* komunikat pustej sekcji - wyśrodkowany w karcie (gdy karta wypełnia rząd) */
.sec-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 90px;
    color: var(--muted);
    font-size: 13.5px;
    text-align: center;
}
@media (max-width: 720px) {
    .char-secs { grid-template-columns: 1fr; }
    .char-sec-full { grid-column: auto; }
    .char-profile-head { width: 100%; margin-left: 0; }
}

@media (max-width: 860px) {
    .char-grid { grid-template-columns: 1fr; }
    .filters-row { flex-direction: column; }
    .chars-pick { min-width: 0; width: 100%; }
}

@media (max-width: 560px) {
    .char-row { flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 20px; }
    .char-row > span { min-width: 0; }
    .char-row b { margin-left: 0; justify-content: flex-start; text-align: left; }
    .char-foot { flex-direction: column; align-items: flex-start; }
    .char-foot .chip { align-self: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   Panel Admina (strefa administratorów)
   ═══════════════════════════════════════════════════════════════ */

/* przycisk Panelu Admina na dole menu bocznego */
.nav-sep { height: 1px; background: var(--line); margin: 10px 12px 8px; flex: none; }
.nav-item-admin { color: var(--acc); }
.nav-item-admin .nav-ic { color: var(--acc); opacity: 1; }
.nav-item-admin:hover { color: var(--text); background: var(--acc-soft); }
.nav-item-admin .chip { margin-left: auto; }

/* szybka akcja Panelu Admina na panelu gracza */
.act-admin .act-ic { background: var(--acc-grad); color: #fff; box-shadow: 0 8px 18px -10px var(--acc); }

/* nagłówki kart admina */
.adm-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.adm-card-head .card-h { margin-bottom: 2px; }
.adm-card-head p { margin: 0; }
.adm-search { margin-bottom: 14px; }

/* tabela postaci */
.adm-table { min-width: 780px; }
.adm-table td { vertical-align: middle; }
.adm-table .pl-cell b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.cell-stack { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.cell-stack small { color: var(--muted); font-size: 12px; }
/* kolumna „Właściciel”: awatar konta Discord obok nazwy i identyfikatora */
.cell-owner { display: flex; align-items: center; gap: 9px; font-weight: 600; white-space: nowrap; }
.cell-owner-meta { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.cell-owner small { color: var(--muted2); font-size: 11.5px; }
.cell-num { font-size: 13px; white-space: nowrap; margin-right: 4px; }
.cell-acc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cell-acc small { width: 100%; color: var(--muted); font-size: 11.5px; }
.mono-cut { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.icon-btn-xs { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; vertical-align: middle; }
.adm-empty-note { margin: 10px 0 0; }

/* tabela graczy (Gracze FiveM): bany + licencje */
.adm-gp-head { margin-bottom: 18px; }
/* licznik awarii + przycisk „Wyślij test awarii” - obok siebie, z odstępem */
.adm-gp-counts { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
/* kompaktowe kolumny - tabela (także z kolumną „Praca”) mieści się bez
   poziomego przewijania; chip pracy zawija się, gdy brakuje miejsca */
.adm-gp-table { min-width: 860px; }
.adm-gp-table thead th { padding: 11px 10px; }
.adm-gp-table tbody td { padding: 10px 10px; font-size: 13px; }
.adm-gp-table .pl-cell { gap: 10px; }
/* Praca: nazwa i stopień w jednym chipie; długa nazwa zawija się do dwóch
   linii, żeby kolumna nie rozpychała tabeli. */
.adm-gp-table .gp-job-cell { white-space: normal; }
.adm-gp-table .gp-job-cell .chip {
    max-width: 190px;
    white-space: normal;
    line-height: 1.35;
    text-align: left;
}
.adm-gp-table .gp-job-cell .ic { flex: none; }
.adm-gp-table .pl-cell b { white-space: normal; line-height: 1.35; }
.adm-gp-table .cell-stack small { font-size: 11.5px; }
.adm-gp-table td .chip-xs { font-size: 11px; padding: 2.5px 7px; }
.adm-gp-table .mono-cut { max-width: 130px; }
/* Czas gry w tym samym formacie co profil postaci („X godz. Y min”).
   Człony („132 godz.” i „40 min”) są nierozerwalne, a gdy tabela ma dość
   miejsca, wymuszamy jedną linię; na wąskim ekranie zawijają się do dwóch,
   żeby „Lista graczy” nie wymuszała poziomego przewijania. */
.adm-gp-table .pt-cell { white-space: normal; line-height: 1.32; font-variant-numeric: tabular-nums; }
.adm-gp-table .pt-part { white-space: nowrap; }
.adm-gp-table .pt-wrap { display: inline-block; }
@container (min-width: 1056px) {
    .adm-gp-table .pt-wrap { min-width: 114px; }
}
.lic-cell { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; max-width: 230px; }
.lic-cell .chip-xs { padding: 2.5px 7px; }
.adm-gp-table td .chip .ic { flex: none; }
/* chip statusu (online/offline) - dopasowany do treści i wyśrodkowany */
.adm-gp-table td > .cell-stack { align-items: center; }

/* zakładka „Odbanowania” (historia odbanowań) */
.unban-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.unban-filters .adm-search { flex: 1 1 240px; }
.unban-date { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.unban-date input[type="date"] {
    background: var(--surface-field);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 7px 11px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    color-scheme: dark;
}
.unban-date input[type="date"]:focus { border-color: var(--acc); }
.unban-rows { margin-top: 0; }

/* status serwera w kolumnie admina */
.adm-status-card .page-kicker { display: inline-flex; color: var(--muted2); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; gap: 7px; align-items: center; }
.adm-status-main { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 14px; }
.adm-status-main p { margin: 0; }

/* awatary w logach logowania (Panel Admina) */
.log-ic-avatar { padding: 0; overflow: hidden; }
.log-ic-avatar .avatar { border-radius: 0; box-shadow: none; }

/* przyszłe narzędzia */
.adm-soon-card p { margin: 0 0 12px; }
.adm-soon-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-soon-chips .chip { color: var(--muted2); }
.adm-soon-chips .chip svg { opacity: .8; }

/* brak dostępu */
.adm-noaccess { padding: 70px 24px; }
.adm-noaccess svg { color: var(--muted2); }
.adm-noaccess h3 { font-size: 1.25rem; }
.adm-noaccess .btn { margin-top: 14px; }

@media (max-width: 560px) {
    .adm-table { min-width: 640px; }
    .mono-cut { max-width: 110px; }
}

/* Przegląd: tabela „Postacie graczy”
   Leży w wąskiej kolumnie (max ~628 px przy szerokim oknie, ~539 px przy
   1280 px), a pięć kolumn z nieprzerywalnym imieniem i nazwiskiem potrzebowało
   665 px - dlatego ZAWSZE pojawiał się poziomy pasek przewijania. Imię i
   nazwisko zawija się teraz do drugiej linii (nic nie jest ukrywane ani
   skracane), a odstęp komórek jest mniejszy, więc cała tabela mieści się
   w karcie. Na szerokiej kolumnie nazwa nadal zajmuje jedną linię. */
.adm-ov-table { min-width: 0; }
.adm-ov-table th, .adm-ov-table td { padding-left: 12px; padding-right: 12px; }
.adm-ov-table .pl-cell b { white-space: normal; overflow-wrap: anywhere; }

/* Kolumna z tabelą „Postacie graczy” dostaje więcej miejsca niż kolumna
   logowań (proporcja 2:1 zamiast ogólnej 1.35:1) - przy pięciu kolumnach
   tabela nie mieściła się w karcie i wymagała przewijania w bok. Asymetria
   jest zamierzona; poniżej 861 px obowiązuje układ jednokolumnowy. */
@media (min-width: 861px) {
    .adm-ov-grid { grid-template-columns: 2fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Whitelista (Panel Admina)
   ═══════════════════════════════════════════════════════════════ */

/* zakładki Panelu Admina */
.adm-tabs { margin-bottom: 22px; }
.ptab .count-chip { min-width: 22px; height: 18px; padding: 0 6px; font-size: 11px; vertical-align: middle; }

/* mini-karta whitelisty w przeglądzie */
.adm-wl-card .adm-card-head { margin-bottom: 10px; }
.wl-mini-counts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.wl-mini-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wl-mini { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 11px; }
.wl-mini:hover { background: rgba(255, 255, 255, 0.04); }
.wl-mini .chip { margin-left: auto; }

/* zakładka whitelisty */
.wl-panel .adm-card-head { margin-bottom: 8px; }
.wl-filters { margin-bottom: 16px; }
.wl-table { min-width: 760px; }
.wl-table .nowrap { white-space: nowrap; }

/* modal podglądu zgłoszenia */
.modal-wrap {
    position: fixed; inset: 0; z-index: 90;
    display: none; align-items: center; justify-content: center;
    padding: 22px;
}
.modal-wrap.show { display: flex; }
.modal-scrim {
    position: absolute; inset: 0;
    background: rgba(3, 6, 12, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.modal {
    position: relative;
    width: min(620px, 100%);
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    background: var(--bg1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
    padding: 24px;
}
.modal-content { display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.modal-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.modal-who b { font-size: 1.02rem; }
.modal-who small { color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-head .chip { flex: none; }
.modal-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.modal-body h3 { font-size: .95rem; margin: 4px 0 10px; }
.wl-qa { list-style: none; margin: 0; padding: 0; }
.wl-qa li { padding: 11px 0; border-bottom: 1px solid var(--line-faint); }
.wl-qa li:last-child { border-bottom: none; }
.wl-qa b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; word-break: break-word; }
.wl-qa p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; }
.wl-reason { margin: 0 0 14px; }
.wl-reviewed { margin: 12px 0 0; display: flex; align-items: center; gap: 6px; }
.wl-reviewed b { color: var(--text); }
.modal-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.wl-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.wl-reject-box { margin-top: 12px; }
.wl-reject-box textarea {
    width: 100%;
    resize: vertical;
    background: var(--surface-field);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 13px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.wl-reject-box textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.15); }
.wl-reject-box textarea::placeholder { color: var(--muted2); }
.wl-reject-box .btn-row { justify-content: flex-end; }
.wl-reject-box[hidden] { display: none; }
/* Okno pytań w motywie panelu (PP.ui.confirm / PP.ui.prompt). Zastępuje
   systemowe okno przeglądarki, które jest jasne i pokazuje adres strony.
   Trzyma się nad innymi oknami (z-index wyżej niż .modal-wrap). */
.ask-wrap { z-index: 130; }
.ask-wrap .modal { width: min(520px, 100%); }
.ask-ic {
    flex: none; width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--acc-soft); color: var(--acc);
}
.ask-ic-danger { background: rgba(251, 113, 133, 0.14); color: var(--red); }
.ask-text { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.ask-text:empty { display: none; }
.ask-detail {
    margin: 12px 0 0; padding: 10px 12px; max-height: 220px; overflow: auto;
    border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; line-height: 1.5; color: var(--muted);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
html[data-theme='light'] .ask-detail { background: rgba(15, 23, 42, 0.05); }
.ask-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.ask-field > span { font-size: 12.5px; color: var(--muted); }
.ask-field input {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 11px;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
    width: 100%;
}
.ask-field input:focus { border-color: var(--acc); }
.ask-row { justify-content: flex-end; }
.ask-row .btn { min-width: 118px; }

/* spinner w przycisku podczas zapisu decyzji */
.spinner-btn {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -2px;
    margin-right: 6px;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────────────────── Whitelista gracza ───────────────────────── */

.wl-status-card { text-align: center; padding: 42px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wl-status-ic { width: 56px; height: 56px; border-radius: 16px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--acc-soft); color: var(--acc); margin-bottom: 4px; }
.wl-status-card h2 { margin: 0; font-size: 1.2rem; }
.wl-status-card p { max-width: 560px; margin: 0; font-size: 14px; }
.wl-ok .wl-status-ic { background: rgba(52, 211, 153, 0.14); color: var(--green); }
.wl-rej .wl-status-ic { background: rgba(251, 113, 133, 0.14); color: var(--red); }
.wl-reason { max-width: 560px; width: 100%; }
.wl-summary-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.wl-details { width: 100%; max-width: 560px; margin-top: 10px; text-align: left; }
.wl-details summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--acc); user-select: none; display: inline-flex; align-items: center; gap: 6px; }
.wl-details summary svg { transition: transform .15s; }
.wl-details[open] summary svg { transform: rotate(90deg); }
.wl-qa-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wl-qa-li b { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 3px; overflow-wrap: anywhere; word-break: break-word; }
.wl-qa-li p { margin: 0; color: var(--muted); font-size: 13.5px; white-space: pre-line; text-align: left; overflow-wrap: anywhere; word-break: break-word; }

/* historia podań */
.wl-hist-card { padding: 26px; margin-top: 18px; }
.wl-hist-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.wl-hist-li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 2px; border-top: 1px solid var(--line); }
.wl-hist-li:first-child { border-top: 0; }
.wl-hist-n { width: 34px; height: 34px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--acc-soft); color: var(--acc); font-weight: 700; font-size: 13px; }
.wl-hist-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wl-hist-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-hist-top b { font-size: 14px; }
.wl-hist-main small { font-size: 12.5px; }
.wl-hist-reason { margin: 2px 0 0; font-size: 13px; color: var(--text); background: rgba(251, 113, 133, 0.08); border: 1px solid rgba(251, 113, 133, 0.22); border-radius: 10px; padding: 9px 12px; overflow-wrap: anywhere; word-break: break-word; }
.wl-hist-reason b { color: var(--red); }
.wl-hist-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* formularz podania */
.wl-form-card { padding: 26px; }
.wl-form-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.wl-form-head h2 { margin: 0 0 4px; }
.wl-form-head p { margin: 0; }
.wl-form-ic { width: 46px; height: 46px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--acc-soft); color: var(--acc); }
.form-field { margin-bottom: 16px; }
.form-label { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.form-label .req { color: var(--red); font-style: normal; }
.form-label a { color: var(--acc); }
.form-input, .form-textarea {
    width: 100%;
    background: var(--surface-field);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.form-input { padding: 11px 13px; }
.form-textarea { padding: 11px 13px; resize: vertical; min-height: 92px; line-height: 1.55; }
.form-input:focus, .form-textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted2); }
.form-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; }
.form-hint { font-size: 12px; color: var(--muted2); }
.form-count { font-size: 12px; color: var(--muted2); font-variant-numeric: tabular-nums; }
.form-check { accent-color: var(--acc); width: 16px; height: 16px; margin-top: 1px; cursor: pointer; flex: none; }
.wl-form-foot { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.wl-form-foot p { margin: 0; max-width: 380px; }

@media (max-width: 640px) {
    .wl-form-card { padding: 18px; }
}

/* ═══ wykres historii serwera (24 h) ═══ */
.chart-card { margin-top: 18px; }
.chart-legend {
    display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
    margin: 14px 2px 10px; font-size: 13px; color: var(--muted);
}
.chart-lg { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--muted); }
.chart-lg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-lg b { color: var(--text); margin-left: 2px; font-weight: 600; }
.chart-wrap { width: 100%; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-txt { fill: var(--muted); font-size: 10px; font-family: inherit; }
.chart-off { fill: rgba(248, 113, 113, 0.10); }
.chart-area-clients { fill: rgba(56, 189, 248, 0.10); }
.chart-line-clients { stroke: #38bdf8; stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart-line-ping { stroke: #a78bfa; stroke-width: 2; fill: none; stroke-dasharray: 5 3; stroke-linejoin: round; stroke-linecap: round; }
.chart-line-serverms { stroke: #34d399; stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot-clients { fill: #38bdf8; }
.chart-dot-ping { fill: #a78bfa; }
.chart-dot-serverms { fill: #34d399; }
.chart-empty { padding: 34px 20px; text-align: center; color: var(--muted); }
.chart-empty svg { color: var(--accent); opacity: 0.75; }
.chart-empty h3 { color: var(--text); margin: 10px 0 4px; font-size: 16px; }
.chart-empty p { max-width: 460px; margin: 0 auto; font-size: 13px; }

/* zakładka „Webhook” w Panelu Admina */
.wh-ic {
    width: 46px; height: 46px; border-radius: 14px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--acc-soft); color: var(--acc);
}
.wh-panel-card { margin-bottom: 18px; }
.wh-panel-card .adm-card-head { margin-bottom: 4px; }
.wh-head-status { display: flex; align-items: center; gap: 8px; }
.wh-form-card { margin-bottom: 18px; }
.wh-form-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; margin-top: 14px; }
.wh-form-hint { margin: 4px 0 12px; }
.wh-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.wh-row {
    display: flex; gap: 13px; align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card2);
    transition: border-color .15s, background .15s;
}
.wh-row.active {
    border-color: rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.05);
}
.wh-row .wh-ic { width: 38px; height: 38px; border-radius: 12px; }
.wh-main { flex: 1; min-width: 0; }
.wh-main b { display: block; color: var(--text); font-size: 14px; }
.wh-url {
    display: block; margin-top: 2px;
    font-size: 12px; color: var(--muted);
    overflow-wrap: anywhere; word-break: break-word;
}
.wh-hint { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12px; color: var(--green); }
.wh-hint.muted { color: var(--muted2); }
.wh-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wh-del-bar {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    margin: 0 0 14px; padding: 12px 14px;
    border: 1px solid rgba(251, 113, 133, 0.35);
    border-radius: var(--r-md);
    background: rgba(251, 113, 133, 0.07);
    color: var(--muted);
    font-size: 13.5px;
}
.wh-del-bar svg { color: var(--red); flex: none; }
.wh-del-bar b { color: var(--text); }
.wh-del-acts { margin-left: auto; display: flex; gap: 8px; }
.wh-empty { margin-top: 18px; }
.wh-events-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-top: 7px;
}
.wh-events-lbl { font-size: 12px; color: var(--muted2); }
/* własny dropdown zdarzeń (spójny z motywem, bez natywnej listy) */
.wh-dd { position: relative; }
.wh-dd-trigger {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4.5px 11px;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    font-size: 12px; font-weight: 600; letter-spacing: .2px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    white-space: nowrap;
}
.wh-dd-trigger:hover { border-color: var(--line-strong); background: rgba(148, 163, 184, 0.16); }
.wh-dd.open .wh-dd-trigger {
    border-color: var(--acc);
    background: var(--acc-soft);
    color: var(--acc);
}
.wh-dd-caret { flex: none; color: var(--muted); transition: transform .18s; }
.wh-dd.open .wh-dd-caret { transform: rotate(180deg); color: var(--acc); }
.wh-dd-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    min-width: 230px;
    padding: 5px;
    background: var(--surface-side);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    box-shadow: var(--shadow);
    display: none;
}
.wh-dd.open .wh-dd-menu { display: block; }
.wh-dd-opt {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0; border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 13px; font-family: inherit;
    text-align: left; cursor: pointer;
    transition: background .12s, color .12s;
}
.wh-dd-opt svg { opacity: 0; flex: none; }
.wh-dd-opt:hover { background: var(--acc-soft); color: var(--text); }
.wh-dd-opt.sel { color: var(--acc); font-weight: 600; }
.wh-dd-opt.sel svg { opacity: 1; }
@media (max-width: 720px) {
    .wh-form-grid { grid-template-columns: 1fr; }
    .wh-row { flex-wrap: wrap; }
    .wh-actions { justify-content: flex-start; width: 100%; }
    .wh-del-acts { margin-left: 0; width: 100%; }
}

/* ═══ zakładka „Administratorzy” (Panel Admina) ═══ */
.adm-team-head { margin-bottom: 18px; }
.adm-team-counts { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-team-table { min-width: 880px; }
.adm-team-table .pl-cell b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.adm-team-roles { display: flex; gap: 5px; flex-wrap: wrap; }
.role-chip {
    font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.role-chip[style] {
    color: var(--role-c, var(--muted));
    border-color: color-mix(in srgb, var(--role-c, var(--muted)) 45%, transparent);
    background: color-mix(in srgb, var(--role-c, var(--muted)) 12%, transparent);
}
.adm-team-note { margin-top: 14px; }
.adm-team-table .chip { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 560px) {
    .adm-team-table { min-width: 720px; }
}

/* ═══ profil gracza (Panel Admina → Gracze FiveM): podstrona #/admin/gracze/<id> ═══ */
.gp-head { align-items: flex-start; }
.gp-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Podpis sekcji wewnątrz karty profilu (np. „Podania whitelistowe”). */
.gp-sub-h { display: flex; align-items: center; gap: 7px; margin: 22px 0 10px; font-size: .92rem; color: var(--text); }
.gp-sub-h:first-of-type { margin-top: 0; }
.gp-sub-h svg { color: var(--acc); flex: none; }
.char-sec .count-chip { min-width: 20px; height: 18px; padding: 0 7px; font-size: 11px; }
.char-sec .count-chip.cnt-red { background: rgba(251, 113, 133, 0.14); color: var(--red); }
/* Podpis sekcji wewnątrz bloku dodatkowych danych (np. „Zarzuty (2)”). */
.gp-sub-h-sm { margin: 16px 0 8px; font-size: .88rem; }
/* Notatki z akt MDT - tekst skryptu, zawijany i bez rozciągania karty. */
/* Narzędzia administratora na profilu postaci (blokada, praca, kasa, licencje).
   Kafle rozkładają się w siatce - na wąskim ekranie jeden pod drugim. */
.gp-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 10px; }
.gp-tool {
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 12px 13px;
    background: var(--surface-field);
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.gp-tool > b { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.gp-tool .btn { align-self: flex-start; }
.gp-tool-fields { display: flex; gap: 8px; flex-wrap: wrap; }
/* Listy wyboru w narzędziach to komponent panelu (PP.pick) - dwa obok siebie,
   tak jak wcześniej dwa pola <select>, ale w ciemnym motywie i z szukaniem. */
.gp-tool-fields .gp-pick { flex: 1 1 130px; min-width: 0; }
.gp-tool-fields .pick-btn { font-size: 13px; padding: 8px 10px; }
.gp-tool-fields input {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 7px 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    min-width: 118px;
    max-width: 100%;
}
.gp-tool-fields input:focus { border-color: var(--acc); }
.gp-lic-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Powód aktualnej blokady konta w narzędziach admina - to samo, co widzi gracz
   na karcie swojej postaci (pusty = blokada bez powodu). */
.gp-block-reason {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(251, 113, 133, 0.28);
    border-radius: 9px;
    background: rgba(251, 113, 133, 0.08);
    font-size: 12.5px;
    line-height: 1.5;
}
.gp-block-reason svg { color: var(--red); flex: none; margin-top: 2px; }
.gp-block-reason b { color: var(--text); }
/* Pasek pojazdów: dodanie nowego pojazdu do garażu (po prawej stronie paska). */
.gp-veh-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.gp-veh-bar > .btn:last-child { margin-left: auto; }
/* Stopka kafelka pojazdu: przyciski „Szczegóły techniczne” i „Usuń pojazd” -
   jeden pod drugim, na całą szerokość karty (tak jak przycisk statystyk
   u gracza), żeby nic nie wystawało poza krawędź kafelka. */
.gp-veh-acts { display: flex; flex-direction: column; gap: 7px; padding: 10px 13px 12px; }
.gp-veh-acts .veh-btn { margin: 0; width: 100%; }

.gp-mdt-notes { margin: 0 0 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .16); font-size: 13px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
/* Dane skryptów: jedno rozwijane źródło pod drugim. */
.gp-ds { border-bottom: 1px solid var(--line-faint); }
.gp-ds:last-child { border-bottom: none; }
/* Zwrotka o aktywnych banach w tabeli listy graczy. */
.gp-ban-mark { color: var(--red); display: inline-flex; align-items: center; gap: 4px; }
/* Kafelki pojazdów w profilu gracza (Panel Admina): ten sam kształt, co
   „Pojazdy” w profilu postaci gracza (.veh-grid / .veh-card wyżej) - zdjęcie,
   nazwa, tablica, stan garażu i podpis z modelem. Karty mierzą się treścią
   (`align-items: start`), więc dłuższy podpis jednego pojazdu nie rozciąga
   sąsiedniej karty w dół - inaczej powstawałaby pusta przerwa nad stopką. */
.gp-veh-grid { align-items: start; }
/* Rozwijany podgląd całego zapisu pojazdu w JSON-ie - dodatek administratora
   w oknie pojazdu (widok gracza go nie ma). */
.gp-veh-more { margin-top: 14px; }
.gp-veh-more > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); padding: 6px 0 0; }
.gp-veh-more > summary:hover { color: var(--text); }
.gp-field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; min-width: 0; }
.gp-field > span { font-size: 12.5px; color: var(--muted); }
.gp-field input {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 11px;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
    width: 100%;
}
.gp-field input:focus { border-color: var(--acc); }
.gp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* wybór modelu w oknie „Dodaj pojazd”: lista z szukaniem (PP.pick), przypięta
   do okna przeglądarki, żeby okno modalne jej nie obcinało */
.gp-veh-model-pick { display: block; }
.gp-veh-model-pick .pick-btn { width: 100%; }
.gp-veh-model-pick .pick-panel { width: min(420px, 92vw); }
.gp-veh-model-pick .pick-list { max-height: 320px; }
@media (max-width: 560px) {
    .gp-field-row { grid-template-columns: 1fr; }
    .gp-veh-bar > .btn:last-child { margin-left: 0; }
}
/* ══════════════════════════════════════════════════════════════
   Elementy rysowane przez przeglądarkę (checkbox, plik, data, kolor)
   ══════════════════════════════════════════════════════════════
   Panel jest ciemny, więc żaden systemowy element nie może zostać biały:
   `color-scheme: dark` w :root przełącza całą resztę (listy rozwijane, kalendarz
   pól daty, pasek przewijania, strzałki pól liczbowych), a poniżej mamy to, czego
   `color-scheme` sam nie obejmuje. */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--acc); cursor: pointer; }
/* Pole pliku (wgranie zdjęcia pojazdu, paczka wydania, manifest) - przycisk
   systemowy zamiast szarego prostokąta przeglądarki. */
input[type="file"] { color: var(--muted); font: inherit; font-size: 13px; }
input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 8px 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-field);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
input[type="file"]::file-selector-button:hover { border-color: var(--acc); background: var(--acc-soft); }
/* Pole koloru (kolor rangi w Uprawnieniach): obramowanie i zaokrąglenie
   w motywie panelu zamiast systemowego kwadratu. */
input[type="color"] { padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-field); cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
/* Wybrane pole daty (filtry odbanowań, data publikacji) - jasna ikona kalendarza
   na ciemnym motywie, ciemna na jasnym. */
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
html[data-theme='dark'] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.6); }
/* Surowa metadata ESX (JSON) - przewijana, żeby nie rozciągała karty. */
.gp-json {
    max-height: 260px; overflow: auto; margin: 8px 0 0; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .18);
    font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.lic-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.lic-tile {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    background: rgba(96, 165, 250, 0.1); color: var(--blue, #60a5fa);
    border: 1px solid rgba(96, 165, 250, 0.28);
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.char-sec .chip { white-space: nowrap; }
@media (max-width: 620px) {
    .gp-head-actions { width: 100%; justify-content: flex-start; }
    .gp-head-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ═══ zakładka „Połączenia” Panelu Admina ═══ */
/* wrapper siatki ma zawsze odstęp od karty „Historia” (także przy pustym stanie) */
#adm-conn-grid { margin: 0 0 14px; }
.adm-conn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.adm-conn-card { display: flex; flex-direction: column; gap: 8px; }
.adm-conn-card-head { display: flex; align-items: center; gap: 10px; }
.adm-conn-ic {
    flex: none; width: 38px; height: 38px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(148, 163, 184, 0.12); color: var(--muted);
}
.conn-mariadb .adm-conn-ic { background: rgba(96, 165, 250, 0.13); color: var(--blue); }
.conn-game .adm-conn-ic { background: rgba(251, 191, 36, 0.13); color: var(--amber); }
.conn-discord .adm-conn-ic { background: rgba(167, 139, 250, 0.14); color: var(--violet); }
.conn-fivem .adm-conn-ic { background: rgba(52, 211, 153, 0.13); color: var(--green); }
.adm-conn-titles { min-width: 0; }
.adm-conn-titles h3 { font-size: 14.5px; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-conn-card-head > .chip { margin-left: auto; flex: none; }
.adm-conn-detail {
    font-size: 12.5px; color: var(--text);
    padding: 7px 10px; border-radius: 8px;
    background: rgba(148, 163, 184, 0.08);
    overflow-wrap: anywhere;
}
.adm-conn-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.adm-conn-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.adm-conn-lbl { color: var(--muted); flex: none; }
.adm-conn-val { text-align: right; font-variant-numeric: tabular-nums; }
.conn-events { margin: 0; }
.conn-ev { padding: 9px 20px; gap: 10px; flex-wrap: wrap; }
.conn-ev-time { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.conn-ev-src { font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.conn-ev-msg { color: var(--muted); font-size: 12.5px; flex: 1; min-width: 160px; overflow-wrap: anywhere; }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.conn-dot-down { background: var(--red); box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.15); }
.conn-dot-up { background: var(--green); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); }
.conn-dot-info { background: var(--blue); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15); }
#adm-deploy-version { margin: 0 0 14px; }
/* karta „Wersja wdrożenia”: odcisk plików panelu (punkt kontrolny po wgraniu) */
.adm-deploy-card .adm-conn-ic { background: rgba(167, 139, 250, 0.14); color: var(--violet); }
.adm-deploy-build {
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12.5px; letter-spacing: 0.4px;
    padding: 2px 7px; border-radius: 6px;
    background: rgba(148, 163, 184, 0.12);
}
.adm-deploy-warn {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 2px; padding: 8px 10px; border-radius: 8px;
    font-size: 12.5px; color: var(--text);
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.25);
}
.adm-deploy-warn > .ic { flex: none; color: var(--amber); margin-top: 1px; }
/* sekcja „Manifest wydania” w karcie „Wersja wdrożenia” (zgodność plików) */
.adm-deploy-manifest {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}
.adm-deploy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.adm-deploy-h { display: flex; align-items: center; gap: 7px; margin: 0 0 3px; font-size: 14px; font-weight: 700; }
.adm-deploy-h > .ic { flex: none; color: var(--violet); }
.adm-deploy-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.adm-deploy-file {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 9px; border-radius: 7px;
    background: rgba(148, 163, 184, 0.07);
    font-size: 12.5px;
}
.adm-deploy-file-why {
    flex: none; min-width: 96px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
    color: var(--muted);
}
.adm-deploy-file-path {
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px; color: var(--text); overflow-wrap: anywhere;
}
.adm-deploy-more { justify-content: center; color: var(--muted); background: transparent; }
.adm-deploy-ok {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 8px;
    font-size: 12.5px; color: var(--text);
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.22);
}
.adm-deploy-ok > .ic { flex: none; color: var(--green); }
.adm-deploy-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* wyjaśnienie, skąd pochodzi opis plików (pieczęć panelu vs manifest z pakietu) */
.adm-deploy-note {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 10px; border-radius: 8px;
    font-size: 12.5px; color: var(--text);
    background: rgba(96, 165, 250, 0.09);
    border: 1px solid rgba(96, 165, 250, 0.24);
}
.adm-deploy-note > .ic { flex: none; color: var(--blue); margin-top: 1px; }
.adm-deploy-note > span { min-width: 0; overflow-wrap: anywhere; }
.adm-deploy-note-ok {
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.22);
}
.adm-deploy-note-ok > .ic { color: var(--green); }
/* okno „Wgraj manifest wydania” (karta „Wersja wdrożenia”) */
.adm-deploy-import-card { width: min(760px, 100%); }
.adm-deploy-import { display: flex; flex-direction: column; gap: 12px; }
.adm-deploy-import-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-deploy-import-text {
    width: 100%; min-height: 220px; max-height: 42vh; resize: vertical;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface-field); color: var(--text);
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px; line-height: 1.5; white-space: pre; overflow: auto;
}
.adm-deploy-import-text:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
/* sekcja „Instalowanie wydania” (paczka ZIP) w karcie „Wersja wdrożenia” */
/* Podtytuł sekcji w karcie instalacji: oddziela listę paczek od listy kopii,
   bo obie są listami plików i bez tego zlewają się w jedną całość. */
.adm-deploy-sub {
    display: flex; align-items: center; gap: 6px; margin: 2px 0 -2px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--muted);
}
.adm-deploy-sub > .ic { flex: none; color: var(--violet); }

/* Paczki ZIP wykryte na hostingu: nazwa, co to za wydanie i trzy akcje. */
.adm-deploy-pkgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adm-deploy-pkg {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 11px; border-radius: 10px;
    background: rgba(148, 163, 184, 0.06); border: 1px solid var(--line);
}
.adm-deploy-pkg-bad { border-color: rgba(251, 113, 133, 0.3); background: rgba(251, 113, 133, 0.05); }
.adm-deploy-pkg-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.adm-deploy-pkg-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.adm-deploy-pkg-name > .ic { flex: none; color: var(--acc); }
.adm-deploy-pkg-main small { color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.adm-deploy-pkg-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adm-deploy-pkg-acts a.btn { text-decoration: none; }
.adm-deploy-pkg-check {
    flex-basis: 100%; display: block; margin-top: 2px; padding: 8px 10px;
    border-radius: 8px; background: rgba(148, 163, 184, 0.07);
    font-size: 12px; color: var(--muted);
}
.adm-deploy-pkg-check > .ic { vertical-align: -2px; margin-right: 5px; }
.adm-deploy-pkg-check b { color: var(--ink); }
.adm-deploy-pkg-check .adm-deploy-install-list { margin-top: 6px; }

.adm-deploy-backups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.adm-deploy-backup {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 8px;
    background: rgba(148, 163, 184, 0.07);
    border: 1px solid rgba(148, 163, 184, 0.12);
}
.adm-deploy-backup-when { flex: none; min-width: 104px; font-size: 12.5px; color: var(--muted); }
.adm-deploy-backup-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.adm-deploy-backup-main b { font-size: 12.5px; }
.adm-deploy-backup-main small { color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
/* okno „Zainstaluj wydanie (ZIP)” */
.adm-deploy-install-card { width: min(820px, 100%); }
.adm-deploy-install-list {
    list-style: none; margin: 0; padding: 8px 10px; max-height: 200px; overflow: auto;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface-field);
    display: flex; flex-direction: column; gap: 3px;
    font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11.5px; color: var(--text);
}
@media (max-width: 720px) {
    .adm-deploy-file { flex-wrap: wrap; }
    .adm-deploy-file-why { min-width: 0; }
    .adm-deploy-import-row { flex-direction: column; align-items: flex-start; }
    .adm-deploy-pkg { align-items: flex-start; }
    .adm-deploy-pkg-acts { width: 100%; }
    .adm-deploy-backup { flex-wrap: wrap; }
    .adm-deploy-backup-when { min-width: 0; }
}
.adm-test-btn { color: var(--amber); border-color: rgba(251, 191, 36, 0.35); }
.adm-test-btn:hover { background: rgba(251, 191, 36, 0.12); color: var(--amber); }
@media (max-width: 720px) {
    .adm-conn-grid { grid-template-columns: 1fr; }
}

/* ─── treści z edytora (HTML w aktualnościach, regulaminie i FAQ) ─── */
.news-body ul, .news-body ol { margin: 0 0 12px; padding-left: 22px; }
.news-body ul { list-style: disc; }
.news-body ol { list-style: decimal; }
.news-body h2 { margin: 16px 0 8px; }
.news-body h3 { margin: 14px 0 6px; }
.news-body blockquote { margin: 0 0 12px; padding: 6px 14px; border-left: 3px solid var(--acc); background: rgba(255, 255, 255, .03); border-radius: 0 10px 10px 0; }
.news-body pre { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .3); overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.news-body img { max-width: 100%; height: auto; border-radius: 12px; }
.news-body a { color: var(--acc); }
.rules-list li > p { margin: 0; }
.rules-list li > p + p { margin-top: 8px; }
.rules-list li ul, .rules-list li ol { margin: 8px 0 0; padding-left: 20px; }
.rules-list li h2, .rules-list li h3 { font-size: 15px; margin: 6px 0 4px; }
.faq-item .a > p { margin: 0 0 10px; }
.faq-item .a > p:last-child { margin-bottom: 0; }

/* ─────────────── edytor treści (nakładka Panelu Admina) ─────────────── */
.ed-overlay { border: 1px solid var(--line); border-radius: 20px; background: var(--card); padding: 22px 22px 26px; }
.ed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.ed-head-main { display: flex; gap: 16px; min-width: 0; }
.ed-head-txt { min-width: 0; }
.ed-head-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #fff; background: var(--acc-grad); }
.ed-head h1 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: -.3px; }
.ed-head p { margin: 8px 0 0; font-size: 13.5px; max-width: 680px; line-height: 1.6; }
.ed-head-acts { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* kafle statystyk sekcji: równa siatka pod nagłówkiem, nic się nie klei ani nie rozjeżdża */
.ed-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 12px; margin: 0 0 20px; }
.ed-stat { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .022); }
.ed-stat-ic { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--acc); background: var(--acc-soft); }
.ed-stat-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ed-stat-main small { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted2); }
.ed-stat-val { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.ed-stat-val b { font-size: 14.5px; color: var(--text); }
#ed-dirty { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--muted); }
#ed-dirty.on { background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .4); color: var(--amber); }

.ed-tabs { margin-bottom: 22px; }

.ed-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; align-items: start; }
.ed-col-list { border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .015); overflow: hidden; }
/* nagłówek lewej kolumny: nazwa + zwijanie w jednym rzędzie, przyciski w drugim
   (dwa przyciski zawsze obok siebie - nigdy jeden pod drugim) */
.ed-col-head { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ed-col-head-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.ed-col-head b { font-size: 13.5px; }
.ed-col-acts { display: flex; align-items: center; gap: 8px; }
.ed-col-acts > .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
.ed-list { padding: 10px; max-height: 66vh; overflow-y: auto; }

.ed-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: background .12s, border-color .12s; }
.ed-row:hover { background: rgba(255, 255, 255, .035); }
.ed-row.active { background: var(--acc-soft); border-color: var(--acc); }
.ed-row.indent { margin-left: 16px; }
.ed-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ed-row-main b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-row-main small { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ed-row-chips { display: inline-flex; gap: 4px; flex: none; }
/* akcje wiersza: zawsze widoczne, większe i z wyraźnym tłem (koniec z ikonami na hover) */
.ed-row-acts { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.ed-icon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, .045); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.ed-icon svg { display: block; }
.ed-icon:hover { color: var(--acc); border-color: var(--acc); background: var(--acc-soft); }
.ed-icon.danger:hover { color: var(--red); border-color: rgba(251, 113, 133, .55); background: rgba(251, 113, 133, .12); }

/* historia wersji wpisu (przywracanie wcześniejszych zapisów) */
.ed-hist { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); min-width: 0; }
.ed-hist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ed-hist-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ed-hist-list { display: grid; gap: 8px; min-width: 0; }
.ed-hist-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, .16); }
.ed-hist-when { min-width: 0; }
.ed-hist-when b { display: block; font-size: 12.5px; }
.ed-hist-when small { display: block; margin-top: 2px; color: var(--muted2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-hist-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ed-hist-prev { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.ed-hist-body small { color: var(--muted2); font-size: 11.5px; }
.ed-hist-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* okno podglądu wersji wpisu (treść + porównanie z obecną) */
.ed-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(6, 8, 16, .72); backdrop-filter: blur(3px); }
.ed-modal-card { width: min(880px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); overflow: hidden; }
.ed-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ed-modal-title b { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.ed-modal-title small { display: block; margin-top: 4px; font-size: 12px; }
.ed-modal-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 18px 12px; border-bottom: 1px solid var(--line); }
.ed-tgl { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 0, 0, .18); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.ed-tgl:hover { color: var(--text); border-color: var(--acc); }
.ed-tgl.on { background: var(--acc-soft); border-color: var(--acc); color: var(--acc); }
.ed-tgl:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ed-modal-body { padding: 16px 18px 18px; overflow-y: auto; }
.ed-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.ed-modal-foot-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ed-diff-sum { margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.ed-diff-sum b.ok { color: var(--green); }
.ed-diff-sum b.bad { color: var(--red); }
.ed-diff-meta { margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.ed-diff-meta h4, .ed-diff-h { margin: 0 0 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted2); }
.ed-diff-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 6px; }
.ed-diff-meta-row:last-child { margin-bottom: 0; }
.ed-diff-meta-row b { min-width: 150px; color: var(--text); font-weight: 600; }
.ed-diff-meta-row .bad, .ed-diff-meta-row .ok { padding: 2px 8px; border-radius: 7px; }
.ed-diff-meta-row .bad { color: var(--red); background: rgba(251, 113, 133, .1); }
.ed-diff-meta-row .ok { color: var(--green); background: rgba(52, 211, 153, .1); }
.ed-diff-meta-row .arrow { color: var(--muted2); }
.ed-diff-h { margin: 0 0 8px; }
.ed-diff { display: grid; gap: 4px; }
.ed-diff-row { display: flex; gap: 8px; padding: 7px 10px; border-radius: 9px; border: 1px solid transparent; background: rgba(255, 255, 255, .02); font-size: 13px; line-height: 1.5; }
.ed-diff-sign { flex: none; width: 12px; text-align: center; color: var(--muted2); }
.ed-diff-text { min-width: 0; overflow-wrap: anywhere; }
.ed-diff-row.same .ed-diff-text { color: var(--muted2); }
.ed-diff-row.add { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .09); }
.ed-diff-row.add .ed-diff-sign { color: var(--green); }
.ed-diff-row.del { border-color: rgba(251, 113, 133, .35); background: rgba(251, 113, 133, .09); }
.ed-diff-row.del .ed-diff-sign { color: var(--red); }
.ed-diff-row.del .ed-diff-text { text-decoration: line-through; opacity: .85; }

/* karta wyniku naprawy wpisów (jednorazowe narzędzie „Napraw wpisy”) */
.ed-repair { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--acc); border-radius: 16px; background: rgba(255, 255, 255, .03); }
.ed-repair-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ed-repair-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ed-repair > p { margin: 0 0 12px; }
.ed-repair-list { display: grid; gap: 10px; }
.ed-repair-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2.2fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, .18); }
.ed-repair-info { min-width: 0; }
.ed-repair-info b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-repair-info small { color: var(--muted2); font-size: 11.5px; }
.ed-repair-diff { display: grid; gap: 4px; min-width: 0; }
.ed-repair-diff code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; padding: 3px 8px; border-radius: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-repair-diff code.bad { color: var(--red); background: rgba(251, 113, 133, .1); }
.ed-repair-diff code.ok { color: var(--green); background: rgba(52, 211, 153, .1); }

/* karetka zwijania/rozwijania sekcji regulaminu */
.ed-caret { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.ed-caret svg { display: block; transition: transform .15s; }
.ed-caret.collapsed svg { transform: rotate(-90deg); }
.ed-caret:hover { color: var(--acc); border-color: var(--line); background: rgba(255, 255, 255, .05); }
.ed-row-group.collapsed { background: rgba(255, 255, 255, .022); }
.ed-row-group.collapsed .ed-row-main b { color: var(--muted); }

.ed-col-pane { border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .015); padding: 18px 18px 20px; min-width: 0; }
.ed-pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.ed-pane-head h3 { font-size: 1.02rem; display: flex; align-items: center; gap: 8px; }
.ed-pane-head small { display: block; margin-top: 4px; font-size: 12px; }
.ed-pane-acts { display: flex; gap: 10px; flex-wrap: wrap; }

.ed-fields { display: grid; gap: 14px; margin-bottom: 18px; }
.ed-field { display: flex; flex-direction: column; gap: 8px; }
.ed-field > span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); }
.ed-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ed-field input, .ed-field textarea {
    width: 100%; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); border-radius: 10px;
    color: var(--text); font: inherit; font-size: 14px; padding: 9px 11px; outline: none; transition: border-color .12s;
}
.ed-field input:focus, .ed-field textarea:focus { border-color: var(--acc); }
.ed-field textarea { resize: vertical; min-height: 62px; }
.ed-field small { font-size: 11.5px; line-height: 1.5; }

/* kategoria: kafelki zamiast listy rozwijanej */
.ed-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-pick { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 0, 0, .18); color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.ed-pick svg { flex: none; opacity: .85; }
.ed-pick:hover { color: var(--text); border-color: var(--acc); }
.ed-pick.on { background: var(--acc-soft); border-color: var(--acc); color: var(--acc); font-weight: 600; }

/* ikona sekcji: siatka ikon z polskimi podpisami */
.ed-icgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ed-icpick { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .18); color: var(--muted); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.ed-icpick-ic { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .045); }
.ed-icpick-lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-icpick:hover { border-color: var(--acc); color: var(--text); }
.ed-icpick.on { border-color: var(--acc); background: var(--acc-soft); color: var(--acc); font-weight: 600; }
.ed-toggles { display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin-bottom: 18px; }
.ed-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.ed-check input { accent-color: var(--acc); width: 15px; height: 15px; }

.ed-toolbar { display: flex; flex-direction: column; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.ed-trow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 8px 0; }
.ed-trow:first-child { padding-top: 0; }
.ed-trow:last-child { padding-bottom: 0; }
.ed-trow + .ed-trow { border-top: 1px solid rgba(255, 255, 255, .055); }
/* opis rzędu po lewej: od razu widać, do czego służy dany zestaw przycisków */
.ed-trow-lbl { flex: 0 0 84px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted2); }
.ed-trow-hint { font-size: 11.5px; color: var(--muted2); }
.ed-toolbar button { min-height: 31px; padding: 5px 11px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ed-toolbar button:hover { border-color: var(--acc); color: var(--acc); }
.ed-toolbar button.on { background: var(--acc-soft); border-color: var(--acc); color: var(--acc); font-weight: 600; }
.ed-tspacer { flex: 1; }
/* wyrównanie tekstu: trzy przyciski tworzą jeden segment (jedna ramka) */
.ed-seg { display: inline-flex; }
.ed-seg button { border-radius: 0; margin-left: -1px; }
.ed-seg button:first-child { border-radius: 9px 0 0 9px; margin-left: 0; }
.ed-seg button:last-child { border-radius: 0 9px 9px 0; }
.ed-seg button.on { position: relative; z-index: 1; }

/* pasek „Obrazek”: pokazuje się nad treścią, gdy zaznaczysz obrazek w edytorze */
.ed-imgbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--acc); border-radius: 12px; background: var(--acc-soft); }
.ed-imgbar[hidden] { display: none; }
.ed-imgbar-title { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--acc); }
.ed-imgbar-dim { font-size: 11.5px; color: var(--muted2); font-variant-numeric: tabular-nums; }
.ed-imgbar-group { display: inline-flex; align-items: center; gap: 8px; }
.ed-imgbar-lbl { font-size: 12px; color: var(--muted); }
.ed-imgbar input[type="range"] { width: 150px; height: 22px; accent-color: var(--acc); cursor: pointer; }
.ed-imgbar b { min-width: 56px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ed-imgbar button { min-height: 30px; padding: 5px 11px; border-radius: 9px; border: 1px solid var(--line); background: rgba(0, 0, 0, .18); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ed-imgbar button:hover { border-color: var(--acc); color: var(--acc); }
.ed-imgbar button.on { background: var(--acc); border-color: var(--acc); color: #fff; font-weight: 600; }
.ed-imgbar button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ed-imgbar-sep { width: 1px; align-self: stretch; min-height: 22px; background: var(--line); }
.ed-imgbar-del { margin-left: auto; }
.ed-imgbar-del:hover { border-color: var(--red); color: var(--red); background: rgba(251, 113, 133, .12); }

.ed-body { min-height: 260px; max-height: 58vh; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, .18); font-size: 14.5px; line-height: 1.65; outline: none; }
.ed-body:focus { border-color: var(--acc); }
.ed-body:empty:before { content: attr(data-placeholder); color: var(--muted2); }
.ed-body h2 { font-size: 1.22rem; margin: 14px 0 8px; }
.ed-body h3 { font-size: 1.06rem; margin: 12px 0 6px; }
.ed-body p { margin: 0 0 10px; }
.ed-body p:empty { display: none; }
.ed-body > *:first-child { margin-top: 0; }
.ed-body > *:last-child { margin-bottom: 0; }
.ed-body ul, .ed-body ol { margin: 0 0 10px; padding-left: 22px; }
.ed-body ul { list-style: disc; }
.ed-body ol { list-style: decimal; }
.ed-body li { margin-bottom: 4px; }
.ed-body blockquote { margin: 0 0 10px; padding: 6px 14px; border-left: 3px solid var(--acc); background: rgba(255, 255, 255, .03); color: var(--muted); border-radius: 0 10px 10px 0; }
.ed-body pre { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .32); overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.ed-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: rgba(255, 255, 255, .07); padding: 1px 5px; border-radius: 5px; }
.ed-body img { max-width: 100%; height: auto; border-radius: 10px; }
.ed-body a { color: var(--acc); text-decoration: underline; }
.ed-body hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }

.ed-source { width: 100%; min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.6; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); border-radius: 12px; color: var(--text); padding: 12px 14px; resize: vertical; outline: none; }
.ed-source:focus { border-color: var(--acc); }

.ed-preview { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ed-preview-head { display: flex; align-items: center; gap: 7px; padding: 8px 12px; font-size: 12px; color: var(--muted); background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--line); }
.ed-preview-body { padding: 14px 16px; }

.ed-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.ed-sub { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; min-width: 0; }
.ed-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ed-sub-head b { font-size: 13.5px; }
.ed-sublist { display: grid; gap: 8px; min-width: 0; }
.ed-sublist-row { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--muted); }
.ed-sublist-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.ed-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.ed-empty small { color: var(--muted2); font-size: 12px; }
.ed-blank { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--muted); }
.ed-blank h3 { font-size: 1.05rem; color: var(--text); }
.ed-blank p { max-width: 520px; font-size: 13.5px; }
.ed-blank-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

@media (max-width: 980px) {
    .ed-grid { grid-template-columns: 1fr; }
    .ed-repair-row { grid-template-columns: 1fr; }
    .ed-hist-row { grid-template-columns: 1fr; }
    .ed-list { max-height: 320px; }
    .ed-body { max-height: none; }
}
@media (max-width: 620px) {
    .ed-field-row { grid-template-columns: 1fr; }
    /* na wąskim ekranie opisy rzędów zabierają miejsce przyciskom */
    .ed-trow-lbl { display: none; }
    .ed-modal { padding: 10px; }
    .ed-modal-card { max-height: 94vh; }
    .ed-diff-meta-row b { min-width: 100%; }
    .ed-icgrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .ed-head-acts { justify-content: flex-start; }
    .ed-overlay { padding: 14px 12px 18px; border-radius: 16px; }
}

/* ═══════════════════ NAKŁADKA „BAZA DANYCH” ═══════════════════
   Menedżer bazy serwera FiveM (views/database.js): przegląd, tabele,
   przeglądarka wierszy z edycją, konsola SQL i historia operacji. */

.input {
    width: 100%;
    padding: 10px 13px;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    transition: border-color .15s, background .15s;
}
.input:focus { outline: none; border-color: var(--acc); background: rgba(255, 255, 255, 0.05); }
textarea.input { resize: vertical; line-height: 1.55; }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }

.db-overlay { display: flex; flex-direction: column; gap: 16px; }
.db-tabs { margin-top: 2px; }
.db-pane { display: flex; flex-direction: column; gap: 16px; }

/* ── komunikaty i kafelki ── */
.db-note {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line);
    background: var(--card2); font-size: 13.5px; line-height: 1.5;
}
.db-note b { display: block; margin-bottom: 3px; }
.db-note p { margin: 0; }
.db-note code { font-size: 12.5px; }
.db-note-ok { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .07); color: var(--green); }
.db-note-warn { border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .07); color: var(--amber); }
.db-note-err { border-color: rgba(251, 113, 133, .38); background: rgba(251, 113, 133, .08); color: var(--red); }
.db-note .muted { color: inherit; opacity: .75; }

.db-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.db-tile {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 15px 16px; border-radius: 16px; border: 1px solid var(--line);
    background: var(--card);
}
.db-tile-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto;
    background: var(--acc-soft); color: var(--acc);
}
.db-tile b { display: block; font-size: 19px; line-height: 1.2; }
.db-tile span { display: block; font-size: 12.5px; color: var(--muted); }
.db-tile small { display: block; margin-top: 3px; font-size: 11.5px; }

.db-grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.db-grid-tables { display: grid; gap: 16px; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
.db-col-list { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.db-col-struct { min-width: 0; }
.db-empty-card { display: flex; align-items: center; gap: 12px; padding: 22px; }

/* ── pary klucz wartość + listy ── */
.db-kv { display: grid; gap: 10px; }
.db-kv > div { display: flex; flex-direction: column; gap: 3px; padding-bottom: 9px; border-bottom: 1px solid var(--line-faint); }
.db-kv > div:last-child { border-bottom: none; padding-bottom: 0; }
.db-kv span { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted2); }
.db-kv b { font-size: 13.5px; word-break: break-all; }
.db-kv-row { padding: 9px 0; border-bottom: 1px solid var(--line-faint); display: flex; flex-direction: column; gap: 3px; }
.db-kv-row:last-child { border-bottom: none; }

.db-list { display: flex; flex-direction: column; gap: 4px; }
.db-row-link {
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    width: 100%; padding: 9px 12px; border-radius: 11px; border: 1px solid transparent;
    background: transparent; color: var(--text); text-align: left; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.db-row-link:hover { background: rgba(255, 255, 255, .04); border-color: var(--line); }

.db-quick-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.db-quick {
    display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 13px;
    border: 1px solid var(--line); background: var(--card2); color: var(--text);
    cursor: pointer; text-align: left; transition: border-color .12s, transform .12s;
}
.db-quick:hover { border-color: var(--acc); transform: translateY(-1px); }
.db-quick-ic { display: inline-flex; color: var(--acc); flex: 0 0 auto; }
.db-quick-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.db-quick-txt small { font-size: 11.5px; }

/* ── lista tabel ── */
.db-tbl-head { display: flex; align-items: center; gap: 10px; }
.db-search {
    display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
    padding: 0 12px; border-radius: 11px; border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03); color: var(--muted);
}
.db-search .input { border: none; background: transparent; padding: 10px 0; }
.db-search .input:focus { background: transparent; }
.db-scroll-list { display: flex; flex-direction: column; gap: 4px; max-height: 560px; overflow-y: auto; }
.db-tbl-row {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid transparent; border-radius: 12px; padding: 2px 4px;
}
.db-tbl-row:hover { background: rgba(255, 255, 255, .035); }
.db-tbl-row.active { border-color: var(--acc); background: var(--acc-soft); }
.db-tbl-main {
    display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
    padding: 9px 6px; background: transparent; border: none; color: var(--text);
    cursor: pointer; text-align: left;
}
.db-tbl-ic { color: var(--muted); flex: 0 0 auto; }
.db-tbl-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.db-tbl-txt b { font-size: 13.5px; }
.db-tbl-txt small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-tbl-stats { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-left: auto; padding-left: 8px; }
.db-tbl-acts { display: inline-flex; gap: 2px; flex: 0 0 auto; }

/* ── struktura tabeli ── */
.db-struct-card { display: flex; flex-direction: column; gap: 14px; }
.db-struct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.db-struct-head .card-h { margin-bottom: 4px; }
.db-struct-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-struct-wrap { max-height: 420px; overflow: auto; }
.db-struct-table { min-width: 660px; }
.db-struct-table code { font-size: 12.5px; color: var(--violet); }
.db-struct-cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.db-struct-cols h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted2); margin-bottom: 8px; }

.db-danger-zone {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px; border-radius: 14px;
    border: 1px solid rgba(251, 113, 133, .3); background: rgba(251, 113, 133, .06);
}
.db-danger-acts { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* ── przeglądarka danych ── */
.db-data-toolbar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.db-picker { display: flex; flex-direction: column; gap: 5px; min-width: 240px; }
.db-picker label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.db-data-card { display: flex; flex-direction: column; gap: 13px; }
.db-data-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.db-data-title { display: flex; flex-direction: column; gap: 3px; }
.db-data-title b { font-size: 15px; }
.db-data-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-data-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.db-perpage { display: inline-flex; align-items: center; gap: 7px; }
.db-perpage .input { width: auto; padding: 7px 10px; }
.db-sel-bar {
    display: inline-flex; align-items: center; gap: 9px; margin-left: auto;
    padding: 6px 10px 6px 13px; border-radius: 12px;
    border: 1px solid var(--acc); background: var(--acc-soft); font-size: 12.5px;
}

.db-data-table { min-width: 720px; }
.db-data-table td, .db-data-table th { max-width: 280px; }
.db-td {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; font-variant-numeric: tabular-nums;
}
.db-td.db-null { color: var(--muted2); font-style: italic; }
.db-td.db-empty { color: var(--muted2); }
.db-td.db-bin { color: var(--violet); }
.db-th { cursor: pointer; user-select: none; }
.db-th:hover { color: var(--text); }
.db-th-in { display: inline-flex; align-items: center; gap: 6px; }
.db-th small { display: block; font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.db-pk { font-size: 9.5px; font-weight: 700; color: var(--violet); }
.db-sort { font-size: 9px; color: var(--acc); }
.db-th.sorted { color: var(--acc); }
.db-th-check, .db-td-check { width: 42px; text-align: center; }
.db-th-acts, .db-td-acts { width: 86px; white-space: nowrap; }
.db-td-acts .icon-btn { padding: 5px; }
.db-td-acts .icon-btn.db-del:hover { color: var(--red); }
.db-data-table tbody tr.sel { background: var(--acc-soft); }

.db-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.db-pages { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.db-page {
    min-width: 32px; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--line);
    background: transparent; color: var(--muted); cursor: pointer; font-size: 12.5px;
}
.db-page:hover { border-color: var(--line-strong); color: var(--text); }
.db-page.active { border-color: var(--acc); background: var(--acc-soft); color: var(--acc); font-weight: 700; }

/* Konsola SQL */
.db-sql-card { display: flex; flex-direction: column; gap: 12px; }
.db-sql-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.db-toggle { display: inline-flex; gap: 6px; padding: 4px; border-radius: 13px; border: 1px solid var(--line); background: var(--card2); }
.db-tgl {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 10px;
    border: 1px solid transparent; background: transparent; color: var(--muted);
    font-size: 13px; cursor: pointer; transition: all .15s;
}
.db-tgl:hover { color: var(--text); }
.db-tgl.on { background: var(--acc-soft); border-color: var(--acc); color: var(--acc); font-weight: 600; }
.db-tgl:disabled { opacity: .45; cursor: not-allowed; }
.db-sql-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.6; min-height: 170px;
}
.db-sql-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.db-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.db-example {
    padding: 8px 13px; border-radius: 11px; border: 1px solid var(--line);
    background: var(--card2); color: var(--text); font-size: 12.5px; cursor: pointer;
    transition: border-color .12s, transform .12s;
}
.db-example:hover { border-color: var(--acc); transform: translateY(-1px); }
.db-result-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

/* Historia operacji */
.db-hist-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.db-hist-filters .input { width: auto; min-width: 170px; }
.db-hist-filters .db-search { min-width: 200px; }
.db-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.db-hist-table { min-width: 900px; }
.db-hist-table td small { display: block; }
.db-hist-table tr.db-failed { background: rgba(251, 113, 133, .06); }
.db-err { color: var(--red); font-size: 11.5px; margin-top: 3px; }
.db-statement { margin-top: 13px; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--line); background: var(--card2); }
.db-statement-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }
.db-code {
    margin: 0; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line);
    background: rgba(8, 10, 20, .55); color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
    max-height: 340px; overflow: auto;
}
.db-statement .db-code { max-height: 240px; }

/* Okna: formularz wiersza, potwierdzenia, nowa tabela */
.db-modal-card { width: min(920px, 100%); }
.db-fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.db-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.db-field-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.db-field-head b { font-size: 13px; }
.db-field-row { display: flex; align-items: center; gap: 9px; }
.db-field-text { min-height: 66px; }
.db-field-ro {
    flex: 1 1 auto; padding: 10px 13px; border-radius: 11px; border: 1px dashed var(--line);
    color: var(--muted); font-size: 12.5px; font-style: italic;
}
.db-null-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.db-warn {
    display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
    padding: 12px 14px; border-radius: 12px; font-size: 13px;
    border: 1px solid rgba(251, 113, 133, .35); background: rgba(251, 113, 133, .08); color: var(--red);
}
.db-create-name-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.db-create-name-row > span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); }
.db-create-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.db-create-cols { display: flex; flex-direction: column; gap: 9px; }
.db-create-row {
    display: grid; gap: 8px; align-items: center;
    grid-template-columns: minmax(120px, 1.3fr) 120px 74px minmax(100px, 1fr) auto auto auto auto;
    padding: 10px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2);
}
.db-create-row .input { padding: 8px 10px; font-size: 12.5px; }
/* typ kolumny: ta sama wielkość co pola obok. Panel listy jest przypięty do
   okna (position: fixed ustawiane w PP.pick.place), więc nie zostaje obcięty
   przez przewijane okno „Nowa tabela”. */
.db-create-row .db-coltype-pick { display: flex; }
.db-create-row .db-coltype-pick .pick-btn { padding: 8px 10px; font-size: 12.5px; }
.db-create-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.db-create-del { color: var(--muted); }
.db-create-del:hover { color: var(--red); }

@media (max-width: 1080px) {
    .db-grid-tables { grid-template-columns: 1fr; }
    .db-scroll-list { max-height: 340px; }
}
@media (max-width: 720px) {
    .db-create-row { grid-template-columns: 1fr 1fr; }
    .db-create-row .db-create-del { grid-column: 2; justify-self: end; }
    .db-tiles { grid-template-columns: 1fr; }
    .db-sel-bar { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Nakładka „Baza danych” - poprawki układu
   ═══════════════════════════════════════════════════════════════ */

/* Tła „przypiętych” kolumn (zaznaczanie po lewej, akcje po prawej) -
   muszą być kryjące, żeby pod przewijaną kolumną nie prześwitywał tekst */
html {
    --db-pin: rgba(10, 16, 29, 0.97);
    --db-pin-hover: rgba(20, 28, 46, 0.98);
    --db-pin-sel: rgba(46, 38, 92, 0.97);
}
html[data-theme='light'] {
    --db-pin: rgba(244, 246, 251, 0.97);
    --db-pin-hover: rgba(232, 237, 246, 0.98);
    --db-pin-sel: rgba(227, 224, 250, 0.97);
}

/* ── lista rozwijana z szukaniem (jeden komponent w całym panelu) ──
   Systemowa lista rozwijana (<select>) wylewała się poza ekran i nie trzymała
   ciemnego motywu, więc każdy wybór w panelu (filtr postaci, tabela, liczba
   wierszy, filtr historii, ranga) korzysta z tych samych klas .pick*.
   Zachowanie opisuje PP.pick w util.js, wygląd wyłącznie ten blok. */
.db-picker-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.pick { position: relative; }
.pick-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; cursor: pointer; text-align: left;
}
.pick-btn .pick-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-btn .ic { flex: none; color: var(--muted); transition: transform .16s ease; }
.pick-btn[aria-expanded='true'] { border-color: var(--acc); }
.pick-btn[aria-expanded='true'] .ic { transform: rotate(180deg); color: var(--acc); }
.pick-panel {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
    width: min(360px, 92vw); padding: 10px;
    display: flex; flex-direction: column; gap: 8px;
    border-radius: 14px; border: 1px solid var(--line-strong);
    background: var(--surface-side);
    box-shadow: var(--shadow);
}
.pick-panel[hidden] { display: none; }
.pick-search { border: 1px solid var(--line); border-radius: 11px; background: var(--surface-field); }
.pick-search .input { padding: 9px 0; font-size: 13px; }
.pick-list {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
}
.pick-opt {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border-radius: 9px; border: 1px solid transparent;
    background: transparent; color: var(--text); font-size: 13px;
    cursor: pointer; text-align: left; transition: background .13s, border-color .13s, color .13s;
}
.pick-opt:hover { background: rgba(255, 255, 255, .06); border-color: var(--line); }
.pick-opt.active { border-color: var(--acc); background: var(--acc-soft); color: var(--acc); font-weight: 600; }
.pick-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* min-height równa wysokości znaczka (chip-xs) sprawia, że wszystkie pozycje
   listy mają tę samą wysokość, także gdy po prawej jest sam kwadracik koloru. */
.pick-meta { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 25px; }
.pick-empty { padding: 12px 10px; margin: 0; }
.pick-foot { display: block; padding: 0 3px 2px; }
/* kolor rangi na liście wyboru (kwadracik po prawej stronie pozycji) */
.pick-swatch { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--role-c, var(--muted2)); display: inline-block; flex: none; }
/* Wąski ekran: panel nie wychodzi poza krawędź okna (przycisk stoi w karcie
   z własnym marginesem, więc panel przesuwamy lekko w lewo i zwężamy tak, by
   zmieścił się razem z tym marginesem) */
@media (max-width: 560px) {
    .pick-panel { width: min(360px, calc(100vw - 60px)); left: -8px; }
}

/* ── znaczki ikon: jedna proporcja ikony do kwadratu w całym panelu ── */
/* Ikona zajmuje 55% boku swojego kwadratu (i tyle samo w pionie), więc wygląda
   tak samo duża w znaczku 26 px, jak i w znaczku 56 px. Wartość jest procentowa,
   więc zmiana rozmiaru kwadratu w CSS nie wymaga poprawiania ikony.
   Reguła nadpisuje atrybuty width/height w SVG (CSS ma pierwszeństwo), dlatego
   liczba podana w PP.ui.icon(...) przy tych znaczkach nie wpływa na wygląd:
   o rozmiarze ikony decyduje wyłącznie ten blok.
   Selektor z dwiema klasami przy kafelkach bazy jest celowo mocniejszy niż
   ogólne „.db-tile span” (display: block), które wcześniej odbierało kwadratowi
   układ flex, przez co ikona siedziała w lewym górnym rogu zamiast na środku. */
.feat-ic > .ic,
.rules-group .feat-ic > .ic,
.kpi-ic > .ic,
.act-ic > .ic,
.log-ic > .ic,
.adm-conn-ic > .ic,
.wl-status-ic > .ic,
.wl-form-ic > .ic,
.wh-ic > .ic,
.ed-head-ic > .ic,
.ed-stat-ic > .ic,
.ed-icpick-ic > .ic,
.db-tile .db-tile-ic > .ic,
.db-quick .db-quick-ic > .ic {
    width: var(--ic-ratio);
    height: var(--ic-ratio);
}
.db-tile .db-tile-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 12px;
}
.db-tile { align-items: center; }
.chip > .ic { flex: none; }
.db-quick .db-quick-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--acc-soft); }

/* ── tabele dopasowane do panelu (bez sztywnego przewijania w bok) ── */
.db-data-table, .db-struct-table, .db-hist-table { min-width: 0; }
.db-struct-table th:first-child, .db-struct-table td:first-child { min-width: 200px; }
.db-col-name { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; }
.db-col-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* skrajne kolumny zostają na krawędzi, więc ikony akcji są zawsze widoczne */
.db-data-table th.db-th-check, .db-data-table td.db-td-check { position: sticky; left: 0; z-index: 3; background: var(--db-pin); }
.db-data-table th.db-th-acts, .db-data-table td.db-td-acts { position: sticky; right: 0; z-index: 3; background: var(--db-pin); }
.db-data-table thead th.db-th-check, .db-data-table thead th.db-th-acts { z-index: 4; }
.db-data-table tbody tr:hover td.db-td-check, .db-data-table tbody tr:hover td.db-td-acts { background: var(--db-pin-hover); }
.db-data-table tbody tr.sel td.db-td-check, .db-data-table tbody tr.sel td.db-td-acts { background: var(--db-pin-sel); }
.db-th-acts .ic { color: var(--muted2); }
.db-sort { display: inline-flex; align-items: center; }
.db-sort .ic { color: var(--acc); }
.db-pk.chip { font-size: 10.5px; font-weight: 600; padding: 2px 8px; }

/* ── ikony akcji: ten sam rozmiar i widoczna obwódka w każdej tabeli ── */
.db-tbl-acts { gap: 6px; }
.db-tbl-acts .icon-btn, .db-td-acts .icon-btn, .db-hist-table .icon-btn {
    width: 28px; height: 28px; border-radius: 9px; padding: 0;
    border: 1px solid var(--line); background: rgba(255, 255, 255, .035); color: var(--muted);
}
.db-tbl-acts .icon-btn:hover, .db-td-acts .icon-btn:hover, .db-hist-table .icon-btn:hover {
    color: var(--acc); border-color: var(--acc); background: var(--acc-soft);
}
/* Uwaga: nie zmieniamy tu display komórki (position: sticky zależy od układu tabeli),
   odstęp między ikonami robimy marginesem po lewej stronie drugiego przycisku. */
.db-td-acts { text-align: right; white-space: nowrap; }
.db-td-acts .icon-btn + .icon-btn { margin-left: 6px; }
.db-td-acts .icon-btn.db-del:hover { color: var(--red); border-color: var(--red); background: rgba(251, 113, 133, .14); }

/* ── historia: podsumowanie w maks. dwóch liniach (pełny tekst w dymku) ── */
.db-hist-sum {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}

/* ── formularz wiersza: nagłówki tej samej wysokości, więc pola są wyrównane ── */
.db-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
/* Znaczki w formularzu mają stałą wysokość, a każdy nagłówek rezerwuje miejsce na
   jeden ich rząd - dzięki temu pola w obu kolumnach stoją dokładnie na tej samej linii. */
.db-field-head { flex-wrap: nowrap; overflow: hidden; min-height: 23px; align-items: center; }
.db-field-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-field-head .muted, .db-field-head .chip { flex: none; }
.db-field-tags { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden; min-height: 23px; }
.db-field-tags .chip { flex: none; }
.db-field-head .chip, .db-field-tags .chip { height: 23px; padding: 1px 9px; line-height: 1; }
@media (max-width: 860px) {
    .db-fields { grid-template-columns: 1fr; }
    .db-field-tags { flex-wrap: wrap; }
}

/* ── pasek obrazka na wąskim ekranie: krótszy suwak, grupy zostają w jednej linii ── */
/* Grupy (etykieta + suwak + wartość oraz przyciski) nigdy się nie rozdzielają:
   zawija się cały pasek, więc nic nie odstaje od swojego opisu. */
@media (max-width: 620px) {
    .ed-imgbar { gap: 9px 12px; }
    .ed-imgbar input[type="range"] { width: 110px; }
    .ed-imgbar-sep { display: none; }
    .ed-imgbar-del { margin-left: 0; }
}

/* ═══ obrazki z edytora treści: rozmiar i wyrównanie ═══ */
/* Rozmiar jest zapisany w atrybucie width (procent szerokości treści, np.
   width="50%"), a wyrównanie w klasie img-center / img-right (albo img-left).
   Reguły obejmują edytor oraz wszystkie miejsca, w których treść z edytora
   trafia na stronę: aktualności, regulamin i FAQ. Dzięki temu obrazek ustawiony
   w edytorze wygląda tak samo na stronie, także na telefonie. */
.rules-list img,
.faq-item .a img { max-width: 100%; height: auto; border-radius: 10px; }
.news-body img.img-center,
.ed-body img.img-center,
.rules-list img.img-center,
.faq-item .a img.img-center { display: block; margin-left: auto; margin-right: auto; }
.news-body img.img-right,
.ed-body img.img-right,
.rules-list img.img-right,
.faq-item .a img.img-right { display: block; margin-left: auto; margin-right: 0; }
.news-body img.img-left,
.ed-body img.img-left,
.rules-list img.img-left,
.faq-item .a img.img-left { display: block; margin-left: 0; margin-right: auto; }

/* ═══ wyrównanie tekstu z edytora treści ═══ */
/* Wyrównanie jest zapisane w klasie (txt-left / txt-center / txt-right), a nie
   w atrybucie „style”, bo styl jest usuwany przy zapisie treści i na stronie
   zostałoby wyłącznie wyrównanie domyślne. „Lewo” to wartość domyślna, więc nie
   zapisuje się jako klasa. Reguły obejmują edytor oraz wszystkie miejsca,
   w których treść trafia na stronę: aktualności, regulamin i FAQ. */
.news-body .txt-left,
.ed-body .txt-left,
.rules-list .txt-left,
.faq-item .a .txt-left { text-align: left; }
.news-body .txt-center,
.ed-body .txt-center,
.rules-list .txt-center,
.faq-item .a .txt-center { text-align: center; }
.news-body .txt-right,
.ed-body .txt-right,
.rules-list .txt-right,
.faq-item .a .txt-right { text-align: right; }

/* ═══ linie trzymane ciasno (klasa „ln” z edytora treści) ═══ */
/* Akapit zapisany kilkoma złamaniami Shift+Enter to JEDEN blok z wieloma
   liniami. Gdy formatujesz jedną z tych linii, edytor dzieli blok tak, żeby
   tylko zaznaczone linie były osobnymi blokami. Bloki, które nie są ostatnim
   z takiego podziału, dostają klasę „ln”, a ta para reguł sprawia, że podział
   nie zmienia wyglądu ani o piksel: linia bez odstępu pod sobą i sąsiad bez
   odstępu nad sobą. Odstęp akapitu zostaje na ostatnim bloku z podziału,
   czyli dokładnie tam, gdzie był, gdy cały akapit był jednym blokiem.
   Reguły obejmują edytor i wszystkie miejsca, w których treść pokazuje się na
   stronie (aktualności, regulamin, FAQ). */
.news-body .ln,
.ed-body .ln,
.rules-list .ln,
.faq-item .a .ln { margin-bottom: 0; }
.news-body .ln + *,
.ed-body .ln + *,
.rules-list .ln + *,
.faq-item .a .ln + * { margin-top: 0; }

/* ═══ nakładka „Uprawnienia”: macierz rang, lista ról, historia zmian ═══ */
/* Macierz jest szeroka (rangi w kolumnach), więc trzyma własny kontener
   przewijania z przyklejonym nagłówkiem i przyklejoną kolumną opisów: przy
   pięciu rangach nic nie ucieka poza ekran, a przy większej liczbie tabela
   przewija się w poziomie wewnątrz ramki, bez przesuwania całej strony. */
.pp-hint { margin-bottom: 14px; }
.pp-hint .mono { font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace; background: var(--surface-field); padding: 1px 6px; border-radius: 6px; }

.pp-save-bar {
    position: sticky; top: 6px; z-index: 6;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 14px;
    background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow);
}
.pp-save-bar.is-dirty { border-color: rgba(251, 191, 36, 0.45); }
.pp-save-info { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.pp-save-info b { color: var(--text); }
.pp-save-info svg { color: var(--muted2); }
.pp-save-bar.is-dirty .pp-save-info svg { color: var(--amber); }
.pp-save-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pp-table-wrap { overflow: auto; max-height: 68vh; border: 1px solid var(--line); border-radius: 14px; }
.pp-table { min-width: 0; }
.pp-table thead th { position: sticky; top: 0; z-index: 3; background: var(--bg1); }
.pp-table tbody td { vertical-align: middle; }

.pp-col-perm { min-width: 250px; }
.pp-perm { min-width: 250px; }
.pp-perm b { display: block; font-size: 13.5px; }
.pp-perm small { display: block; margin-top: 2px; line-height: 1.4; max-width: 380px; }

/* Krok 1 macierzy: wybór rangi. Kafelki są jednolite szerokością i wyrównane
   do lewej, a wybrana ranga odcina się kolorem akcentu (bez zmiany rozmiaru,
   żeby kliknięcie nie przesuwało sąsiadów). */
.pp-picker { margin-bottom: 14px; }
.pp-picker-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.pp-picker-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.pp-picker-label svg { color: var(--acc); flex: 0 0 auto; }
.pp-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
.pp-pick {
    width: 100%;
    display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
    font: inherit; text-align: left; cursor: pointer;
    padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--card2); color: var(--text);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.pp-pick:hover:not(.is-active) { border-color: var(--line-strong); background: var(--card); }
.pp-pick.is-active { border-color: var(--acc); background: var(--acc-soft); box-shadow: 0 0 0 3px var(--acc-soft); }
.pp-pick.is-owner.is-active { border-color: var(--violet); }
.pp-pick-name { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; font-size: 13.5px; font-weight: 600; }
.pp-pick-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-pick-meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }


/* Krok 2: nagłówek wybranej rangi - nazwa, licznik i akcje dla całej rangi */
.pp-role-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px 16px; flex-wrap: wrap;
    padding: 11px 16px; margin-bottom: 12px;
    border: 1px solid var(--line); border-left: 3px solid var(--acc);
    border-radius: var(--r-md); background: var(--card2);
}
.pp-role-head.is-owner { border-left-color: var(--violet); }
.pp-role-head-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.pp-role-head-name { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.pp-role-head-meta { font-size: 12px; }
.pp-role-head-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pp-role-head-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-owner-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--violet); }

/* Szukanie uprawnienia w obrębie wybranej rangi */
.pp-matrix-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pp-filter {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--card2); color: var(--muted2);
    transition: border-color .15s, box-shadow .15s;
}
.pp-filter:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.pp-filter .pp-input { border: 0; background: transparent; padding: 9px 0; min-width: 230px; max-width: 320px; }
.pp-filter .pp-input:focus { outline: none; border-color: transparent; }
.pp-table tr.is-hidden { display: none; }
.pp-one-table { width: 100%; }

.pp-role-name { display: inline-flex; align-items: center; gap: 7px; justify-content: center; font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.pp-role-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--role-c, var(--muted2)); display: inline-block; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12); }
.pp-role-meta { display: block; font-size: 11px; font-weight: 500; margin-top: 3px; text-transform: none; letter-spacing: 0; }
.pp-role-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 6px; }
/* Kolumny „Stan” i „Nadaj albo odbierz” trzymają stałą szerokość, żeby opisy
   uprawnień po lewej nie rozjeżdżały przełączników między wierszami. */
.pp-col-state { width: 110px; text-align: center; }
.pp-col-toggle { width: 126px; text-align: center; }
.pp-state { text-align: center; }
.pp-toggle { text-align: center; }

/* Przełącznik nadane / odebrane (własny, bo pole wyboru przeglądarki nie
   trzyma się ciemnego motywu ani rozmiaru wiersza) */
.pp-switch { display: inline-flex; align-items: center; cursor: pointer; }
.pp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-switch-track {
    width: 46px; height: 26px; flex: 0 0 auto; padding: 2px;
    border: 1.5px solid var(--line-strong); border-radius: 999px;
    background: var(--surface-field);
    display: inline-flex; align-items: center;
    transition: background .15s, border-color .15s;
}
.pp-switch-knob {
    width: 18px; height: 18px; border-radius: 50%; background: var(--muted2);
    transform: translateX(0); transition: transform .16s, background .16s;
}
.pp-switch:hover .pp-switch-track { border-color: var(--acc); }
.pp-switch input:checked + .pp-switch-track { background: var(--acc-grad); border-color: transparent; }
.pp-switch input:checked + .pp-switch-track .pp-switch-knob { background: #fff; transform: translateX(21px); }
.pp-switch input:focus-visible + .pp-switch-track { outline: 2px solid var(--acc); outline-offset: 2px; }
.pp-switch input:disabled + .pp-switch-track { opacity: .45; }
.pp-switch.is-locked { cursor: not-allowed; }
.pp-mini {
    font: inherit; font-size: 11px; font-weight: 600;
    color: var(--muted); background: var(--card2);
    border: 1px solid var(--line); border-radius: 8px;
    padding: 3px 8px; cursor: pointer; line-height: 1.5;
    display: inline-flex; align-items: center; gap: 4px;
}
.pp-mini:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); background: var(--card); }
.pp-mini:disabled { opacity: .4; cursor: default; }
.pp-danger:hover:not(:disabled) { color: var(--red); border-color: rgba(251, 113, 133, 0.4); }
.pp-lock { color: var(--violet); display: inline-flex; }

.pp-group td { background: var(--card2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: 10px; padding-bottom: 10px; }
.pp-group-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.pp-group-in { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pp-group-txt { min-width: 0; }
.pp-group-ic {
    width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--acc-soft); color: var(--acc);
}
.pp-group-txt b { font-size: 13.5px; }
.pp-group-txt small { display: block; margin-top: 2px; }
.pp-group-acts { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.pp-group-count { white-space: nowrap; }

.pp-role-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card2); }
.pp-add-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.pp-add-or { font-size: 12.5px; }
.pp-input {
    font: inherit; font-size: 13px; color: var(--text);
    background: var(--surface-field); border: 1px solid var(--line);
    border-radius: 9px; padding: 7px 10px; max-width: 320px; min-width: 150px;
}
.pp-input:focus { outline: none; border-color: var(--acc); }
.pp-roles-table .pp-role-order { white-space: nowrap; }
.pp-col-order { width: 96px; }
.pp-col-color { width: 92px; }
.pp-col-del { width: 60px; }
.pp-role-row .pp-input { width: 100%; margin-bottom: 3px; }
.pp-color { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-field); cursor: pointer; }

.pp-add-label { flex-wrap: wrap; }
.pp-add-label .pick { min-width: 215px; }
.pp-role-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.pp-role-del { text-align: right; }
.pp-roles-table td { padding-top: 12px; padding-bottom: 12px; }

.pp-log-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pp-log-filters label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.pp-log-table .pp-log-time { white-space: nowrap; font-size: 12.5px; color: var(--muted); }

/* Wąski ekran: kolumna opisu zwęża się, a „Stan” znika (przełącznik i tak
   pokazuje stan), żeby tabela nie wymagała przesuwania w bok. */
@media (max-width: 760px) {
    .pp-col-perm, .pp-perm { min-width: 0; }
    .pp-perm small { max-width: none; }
    .pp-col-state, .pp-state { display: none; }
    .pp-col-toggle, .pp-toggle { width: 86px; }
    .pp-group-count { display: none; }
    .pp-pick-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .pp-filter .pp-input { min-width: 0; width: 100%; }
}

.pp-noaccess { max-width: 620px; margin: 40px auto; text-align: center; padding: 34px 26px; }
.pp-noaccess-ic {
    width: 58px; height: 58px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;
    border-radius: 18px; background: var(--acc-soft); color: var(--acc);
}
.pp-noaccess h1 { margin: 0 0 8px; font-size: 20px; }
.pp-noaccess p { margin: 0 auto 18px; max-width: 460px; }

/* tryb tylko do podglądu w edytorze treści (ranga bez prawa edycji sekcji) */
.ed-fields-ro { pointer-events: none; opacity: .72; }
.ed-fields-ro input, .ed-fields-ro textarea, .ed-fields-ro button { cursor: not-allowed; }
.ed-body.ed-ro { background: var(--surface-field); border-radius: var(--r-md); padding: 14px 16px; }
.ed-body.ed-ro .ed-preview-head { margin-bottom: 10px; }

/* Przyciski zablokowane (brak uprawnienia, brak zmian do zapisania, trwająca
   operacja) muszą wyglądać na zablokowane - inaczej kuszą kliknięciem. */
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ═══ KAFELKI POJAZDÓW (profil postaci → sekcja „Pojazdy”) ═════════════
   Kształt kafelka: zdjęcie pojazdu u góry, nazwa pod nim, na dole przycisk
   ze statystykami. Kolory wyłącznie z palety panelu (var(--card), var(--line),
   akcent), żeby kafelki wyglądały jak reszta panelu.                     */
.veh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 14px;
    margin-top: 4px;
}
.veh-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--card2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.veh-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.85);
}
.veh-shot {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--acc-soft), transparent 70%),
        linear-gradient(180deg, var(--card), var(--card2));
    border-bottom: 1px solid var(--line-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.veh-img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.veh-noimg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    color: var(--muted2);
    font-size: 11.5px;
    text-align: center;
    padding: 8px;
}
.veh-noimg svg { opacity: .6; }
.veh-noimg small { color: var(--muted); font-size: 11px; }
.veh-chips {
    position: absolute;
    top: 8px;
    right: 8px;
    left: 8px;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    flex-wrap: wrap;
    pointer-events: none;
}
.veh-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px 13px 0;
    min-width: 0;
}
.veh-name {
    font-family: var(--font-head);
    font-size: 14px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.veh-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.veh-plate {
    font-size: 11.5px;
    letter-spacing: .04em;
    background: var(--surface-field);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 2px 7px;
    color: var(--text);
}
.veh-sub {
    color: var(--muted2);
    font-size: 11.5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.veh-btn {
    margin: 10px 13px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-field);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.veh-btn svg { color: var(--acc); flex: none; }
.veh-btn:hover { border-color: var(--acc); background: var(--acc-soft); }
/* Akcja nieodwracalna (np. „Usuń pojazd” w Panelu Admina) i przycisk bez
   uprawnienia - ten sam kształt, tylko czerwony albo wygaszony. */
.veh-btn-danger { color: var(--red); }
.veh-btn-danger svg { color: var(--red); }
.veh-btn-danger:hover { border-color: rgba(251, 113, 133, 0.5); background: rgba(251, 113, 133, 0.08); }
.veh-btn:disabled { opacity: .55; cursor: not-allowed; }
.veh-btn:disabled:hover { border-color: var(--line); background: var(--surface-field); }

/* ── okno „Statystyki pojazdu” ── */
.veh-modal { width: min(760px, 100%); }
.veh-modal .modal-head { margin-bottom: 10px; }
.vh-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.vh-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 170px;
    max-height: 260px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background:
        radial-gradient(120% 100% at 50% 0%, var(--acc-soft), transparent 70%),
        linear-gradient(180deg, var(--card), var(--card2));
    overflow: hidden;
}
.vh-hero img { max-width: 100%; max-height: 240px; object-fit: contain; }
.vh-hero-empty {
    flex-direction: column;
    gap: 6px;
    color: var(--muted2);
    font-size: 12.5px;
}
.vh-sec { margin-top: 18px; }
.vh-sec h4 {
    margin: 0 0 10px;
    font-size: .92rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.vh-sec h4::before {
    content: '';
    width: 3px;
    height: 15px;
    border-radius: 3px;
    background: var(--acc-grad);
}
/* Akcje administratora na pojeździe (Panel Admina): przyciski zapisujące
   w bazie gry stoją nad danymi technicznymi, żeby nie trzeba było ich szukać. */
.vh-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.vh-acts-note { margin: 0 0 11px; }

.vh-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 22px; }
.vh-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 2px;
    border-bottom: 1px solid var(--line-faint);
    font-size: 13px;
}
.vh-row > span { color: var(--muted); }
.vh-row b { display: inline-flex; align-items: center; gap: 7px; text-align: right; flex-wrap: wrap; justify-content: flex-end; }
.vh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vh-tile {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    background: var(--card2);
    border: 1px solid var(--line-faint);
    border-radius: var(--r-sm);
}
.vh-tile small { color: var(--muted2); font-size: 11.5px; }
.vh-tile b { font-size: 14px; font-family: var(--font-head); }
.vh-bar {
    display: block;
    height: 5px;
    border-radius: 5px;
    background: var(--surface-field);
    overflow: hidden;
}
.vh-bar i { display: block; height: 100%; border-radius: 5px; background: var(--acc-grad); }
.vh-bar-ok i { background: linear-gradient(90deg, var(--green), var(--cyan)); }
.vh-bar-warn i { background: linear-gradient(90deg, var(--amber), var(--acc)); }
.vh-bar-bad i { background: linear-gradient(90deg, var(--red), var(--amber)); }
.vh-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.vh-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    font-size: 12.5px;
    color: var(--muted);
    background: var(--card2);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.vh-tag b { color: var(--text); font-weight: 600; }
.vh-bad { color: var(--red); }
.vh-warn { color: var(--amber); }
@media (max-width: 560px) {
    .veh-grid { grid-template-columns: 1fr; }
    .vh-rows { grid-template-columns: 1fr; }
}

/* ═══ ZAKŁADKA „POJAZDY” (Panel Admina → zdjęcia pojazdów) ═════════
   Lista pojazdów z bazy gry: miniatura, nazwa, stan zdjęcia i akcje
   (wgranie pliku, zdjęcie z adresu, usunięcie własnego).            */
/* Pięć kafelków statystyk zakładki „Pojazdy”: mieszczą się w jednym rzędzie,
   a przy braku miejsca schodzą do równych kolumn - nigdy nie wychodzą z karty. */
.kpi-row.kpi-row-veh { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.vp-filters { margin-top: 16px; margin-bottom: 12px; }
.vp-list { display: flex; flex-direction: column; gap: 10px; }
.vp-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    background: var(--card2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .15s ease, transform .15s ease;
}
.vp-row:hover { border-color: var(--line-strong); }
.vp-shot { display: flex; align-items: center; justify-content: center; }
.vp-thumb {
    width: 92px;
    height: 58px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface-field);
    display: block;
}
.vp-thumb-none {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted2);
    background: var(--card2);
}
.vp-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vp-name { font-family: var(--font-head); font-size: 15px; font-weight: 600; }
.vp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.vp-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.vp-url { display: flex; gap: 8px; margin-top: 4px; }
.vp-url[hidden] { display: none; }
.vp-url .input { flex: 1; min-width: 180px; }
.adm-empty { margin: 6px 0 0; }
.vh-photo-note { margin-top: 12px; }

/* Lista modeli pojazdów i okno „Dopasuj model” (Panel Admina → Pojazdy) */
/* Notatki zakładki „Pojazdy”: jedna kolumna z odstępem (odstępy daje kontener,
   więc sama notatka nie dokłada już marginesu). */
.vp-notes { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.vp-notes .note { margin: 0; }
.vp-models-note .tiny { margin-top: 6px; }
/* Przycisk odświeżenia listy na własnej linii - nie przykleja się do zdania. */
.vp-models-acts { display: flex; margin-top: 12px; }
.vp-models-btn { margin-top: 0; }
.note-ok { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .07); color: var(--green); }
.note-ok svg { color: var(--green); }
.vp-modal { width: min(600px, 100%); }
.vp-modal .modal-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.vp-alias-body .note { margin-bottom: 14px; }
.vp-alias-loading { display: flex; align-items: center; gap: 8px; }

/* Wyszukiwarka modeli w oknie „Dopasuj model”: pole szukania i lista wyników
   POD nim, w treści okna (nie w rozwijanym panelu) - wyniki widać od razu,
   lista przewija się sama i nie odjeżdża od pola przy przewijaniu okna. */
.vp-find { display: flex; flex-direction: column; gap: 9px; }
.vp-find-search { border: 1px solid var(--line); border-radius: 11px; background: var(--surface-field); }
.vp-find-search:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.vp-find-search .input { padding: 10px 0; font-size: 13.5px; }
.vp-find-info { margin: 0; }
/* Lista modeli przewija się sama. Wyższe okno, bo bez wpisanego fragmentu nazwy
   pokazuje całą listę z dokumentacji (876 pozycji) - wygodniej się ją przegląda. */
.vp-find-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: min(400px, 44vh); overflow-y: auto; overscroll-behavior: contain;
    padding-right: 2px;
}
.vp-find-list:empty { display: none; }
.vp-find-opt {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--card2); color: var(--text); font-size: 13px;
    cursor: pointer; text-align: left;
    transition: border-color .13s, background .13s;
}
.vp-find-opt:hover { border-color: var(--acc); background: var(--acc-soft); }
.vp-find-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-find-more { margin: 0; text-align: center; }
.vp-find-empty {
    margin: 0; padding: 12px 13px; text-align: center;
    border: 1px dashed var(--line); border-radius: 11px;
}
@media (max-width: 760px) {
    .vp-row { grid-template-columns: 1fr; }
    .vp-actions { justify-content: flex-start; }
}

/* ─────────────── wskaźnik „na żywo” (public/assets/js/live.js) ───────────────
   Mały znacznik przyklejony do rogu ekranu (a nie do widoku), więc przetrwa
   każde przerysowanie panelu. Pokazuje stan silnika odświeżania i jest jego
   wyłącznikiem: klik = pauza/wznowienie. Kolory niosą znaczenie:
   zielony = dane płyną, bursztynowy = silnik zwalnia po błędach,
   szary = pauza (również ręczna), czerwony = sesja wygasła. */
.live-pill {
    position: fixed; right: 16px; bottom: 16px; z-index: 998;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-top);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.75);
    color: var(--muted); font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; user-select: none;
    transition: border-color .16s, color .16s, background .16s;
}
.live-pill:hover { border-color: var(--line-strong); color: var(--text); }
.live-pill .live-text { color: var(--text); letter-spacing: .01em; }
.live-pill .live-age {
    color: var(--muted2); font-weight: 500;
    /* cyfry o stałej szerokości: licznik „sekund temu” nie skacze w poziomie */
    font-variant-numeric: tabular-nums; min-width: 34px; text-align: right;
}
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
    animation: livePulse 1.9s ease-out infinite;
}
/* Krótkie rozbłysnięcie w chwili, gdy silnik naprawdę coś odświeża -
   widać wtedy różnicę między „żyje” a „właśnie pobrał dane”. */
.live-pill.is-busy .live-dot { animation-duration: .7s; }
.live-pill.is-warn .live-dot { background: var(--amber); box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5); animation-duration: 2.6s; }
.live-pill.is-paused .live-dot { background: var(--muted2); animation: none; box-shadow: none; }
.live-pill.is-off { border-color: rgba(251, 113, 133, 0.5); }
.live-pill.is-off .live-dot { background: var(--red); animation: none; box-shadow: none; }
.live-pill.is-off .live-text { color: var(--red); }

@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
    70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* Na telefonie wskaźnik zajmuje mniej miejsca: zostaje sam pulsujący punkt
   i licznik, opis słowny znika (jego rolę przejmuje dymek z podpowiedzią). */
@media (max-width: 640px) {
    .live-pill { right: 10px; bottom: 10px; padding: 6px 10px; gap: 6px; }
    .live-pill .live-text { display: none; }
    .live-pill .live-age { min-width: 28px; }
}

/* Osoby wrażliwe na ruch dostają spokojniejszy wskaźnik (bez pulsowania). */
@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
}

@media print { .live-pill { display: none; } }