@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Open+Sans:wght@400;500;600;700&display=swap');

/* Banner nieobsłużonego błędu Blazora — UKRYTY domyślnie. Blazor pokazuje go
   ustawiając inline style="display:block" tylko przy realnym nieobsłużonym
   wyjątku. Bez tej reguły <div id="blazor-error-ui"> jest zwykłym blokiem
   i wisi na ekranie zawsze ("An unhandled error has occurred"). */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    padding: 0.7rem 1.25rem;
    background: var(--color-warning, #c2410c);
    color: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
    font-family: var(--font-body, sans-serif);
}

#blazor-error-ui .reload {
    color: #fff;
    text-decoration: underline;
    margin-left: .5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.6rem;
}

:root {
    --color-primary: #0a2463;
    --color-primary-light: #1a3a8f;
    --color-accent: #e84855;
    --color-accent-dark: #c5303c;
    --color-gold: #f4a261;
    --color-light: #f4f6fb;
    --color-dark: #111827;
    --color-gray: #6b7280;
    --color-gray-light: #e5e7eb;
    --color-white: #ffffff;

    --color-success: #16a34a;
    --color-error: #e84855;
    --color-warning: #c2410c;
    --color-info: #2563eb;
    --color-purple: #7c3aed;
    --color-inactive: #6b7280;

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    --radius-sm: 0.5rem;
    --radius: 0.875rem;
    --radius-lg: 1.25rem;

    --shadow-sm: 0 2px 8px rgba(0,0,0,.07);
    --shadow: 0 4px 24px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.15);

    --transition: all 0.3s ease;

    /* Chrom panelu — szerokosc sidebara. Wartosc zyje w JEDNYM miejscu, bo konsumuje ja
       tez .panel-main (margin-left) i dwie reguly w @media — rozjazd = szpara miedzy
       sidebarem a trescia albo szeroki drawer na mobile (issue #40). */
    --sidebar-width: 208px;            /* 260 − 20% */
    --sidebar-width-collapsed: 70px;   /* rail ikon — miesci znak marki 34x34 i ikony pozycji menu */

    /* Wspolna wysokosc topbara i naglowka sidebara. Te dwie dolne krawedzie STYKAJA SIE na
       ekranie, wiec rozjazd wartosci to od razu widoczny uskok pod logo (issue #45). */
    --topbar-height: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    color: var(--color-dark);
    background: var(--color-light);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

.fw-600 { font-weight: 600; }

/* Cards */
.panel-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.panel-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-gray-light);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.panel-card-header h3 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-primary); margin: 0; }
.panel-card-body { padding: 1.25rem; }

/* Stat cards */
.panel-stat-card {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition);
}
.panel-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.panel-stat-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.panel-stat-icon.primary { background: rgba(10,36,99,.1); color: var(--color-primary); }
.panel-stat-icon.accent  { background: rgba(232,72,85,.1); color: var(--color-accent); }
.panel-stat-icon.gold    { background: rgba(244,162,97,.15); color: var(--color-warning); }
.panel-stat-icon.green   { background: rgba(22,163,74,.1); color: var(--color-success); }

.panel-stat-value {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.75rem;
    color: var(--color-dark);
    line-height: 1;
}

.panel-stat-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-gray);
    margin-top: 0.15rem;
}

/* Loading indicator */
.panel-loading {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--color-gray);
}

/* Text helpers */
.text-gray { color: var(--color-gray); }

/* Table */
/* Gestosc wiersza (#56): naglowek -30%, wiersz danych -20%. Jawny line-height jest warunkiem
   powtarzalnosci — bez niego wysokosc zalezy od metryk `normal` Montserrata/Open Sans i kryterium
   procentowe przestaje byc mierzalne (ten sam problem co przy .panel-sidebar-link, #40).
   Schodzimy paddingiem, NIE font-size: 0.875rem/0.8rem to tokeny DESIGN_SYSTEM.md, a naglowek przy
   0.56rem przestaje byc czytelny. Padding poziomy 1rem zostaje — zwezenie kolumn zmienialoby lamanie
   tekstu na 33 ekranach. Metryki sa swiadomie globalne (wzorzec .panel-tabs): bez wariantu
   kompaktowego i bez nadpisan w scoped CSS pojedynczych ekranow.
   Wartosci wyznaczone pomiarem (Chrome headless, 1440 px), bo wiersz ma dwie rozne podlogi wysokosci:
   z akcja rozstrzyga .panel-btn-sm, bez akcji sam tekst. 0.43rem trafia w -20% dla obu naraz
   (0.817 i 0.788), czego rowna wartosc typu 0.4rem nie robi. */
.panel-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.panel-table thead { background: var(--color-primary); color: var(--color-white); }
/* 0.25rem, nie 0.3rem: w listach z kolumna zaznaczenia podloga naglowka jest checkbox (~20 px),
   a nie tekst (16 px), wiec przy 0.3rem Uczestnicy schodza tylko do -26%. */
.panel-table th {
    padding: 0.25rem 1rem;
    line-height: 1.25;
    text-align: left;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.panel-table td { padding: 0.43rem 1rem; line-height: 1.25; border-bottom: 1px solid var(--color-gray-light); }
.panel-table tbody tr:hover { background: rgba(10,36,99,.03); }
/* Zawijanie bylo prawdziwym powodem, dla ktorego -20% z #56 nie dzialalo na listach z wieksza liczba
   kolumn (#71). table-layout jest automatyczny, wiec 8 kolumn Uczestnikow dzieli te same ~1140 px co
   6 kolumn Opiekunow: naglowek „DATA URODZENIA" lamal sie na dwie linie (thead 24 -> 40-56 px),
   a trzy przyciski akcji na druga linie (wiersz 39 -> 58 px). To nie byl rozjazd CSS — wartosci
   policzone byly identyczne na wszystkich trzech listach.
   Nagloweki jednowyrazowe i tak sie nie lamia, wiec regula dotyka wylacznie tych wielowyrazowych.
   Tabele bez .table-responsive sprawdzone: zadna nie ma wielowyrazowego naglowka. */
.panel-table th { white-space: nowrap; }
/* Kolumna akcji: przyciski w jednej linii, szerokosc shrink-to-fit (width:1% przy table-layout auto
   znaczy „tyle, ile trzeba"), zeby oddac budzet kolumnom z trescia. */
.panel-table th.panel-cell-actions,
.panel-table td.panel-cell-actions { white-space: nowrap; width: 1%; }
/* Imie i nazwisko to druga podloga wysokosci wiersza — zawiniete na dwie linie kasuje cala oszczednosc. */
.panel-table td.panel-cell-name { white-space: nowrap; }

/* Buttons */
.panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}
/* Kanoniczny rozmiar przycisku w tabeli. Padding pionowy zszedl 0.25rem -> 0.2rem przy #56: to
   .panel-btn-sm, nie padding komorki, ustawia podloge wysokosci wiersza z akcjami, wiec bez tego
   -20% bylo nieosiagalne. Nizej juz nie schodzimy — 24.4 px to minimalny sensowny obszar klikniecia. */
.panel-btn-sm { padding: 0.2rem 0.6rem; font-size: 0.75rem; }
/* Większy CTA nagłówka — wysokość/padding pionowy jak kafle-skróty dashboardu
   (.panel-shortcut-grid .panel-btn). Szerokość do treści; NIE łączyć z .panel-btn-block. */
.panel-btn-lg { padding-top: 0.95rem; padding-bottom: 0.95rem; min-height: 3rem; }
.panel-btn-add  { background: rgba(22,163,74,.1); color: var(--color-success); }
.panel-btn-add:not(:disabled):hover  { background: var(--color-success); color: var(--color-white); }
.panel-btn-edit { background: rgba(37,99,235,.1); color: var(--color-info); }
.panel-btn-edit:not(:disabled):hover { background: var(--color-info); color: var(--color-white); }
.panel-btn-delete { background: rgba(232,72,85,.1); color: var(--color-error); }
.panel-btn-delete:not(:disabled):hover { background: var(--color-error); color: var(--color-white); }

/* Disabled (globalnie dla .panel-btn): przygaszenie + kursor not-allowed + BRAK reakcji na hover
   (hover wariantów niżej wyłączony przez :not(:disabled)). */
.panel-btn:disabled,
.panel-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Filtr z etykietą-caption; jednakowa szerokość pól w panel-filter-bar (#2) */
.filter-field { display: inline-flex; flex-direction: column; gap: 0.15rem; width: 10rem; }
.filter-field select { width: 100%; }
.filter-label { font-size: 0.65rem; font-weight: 600; color: var(--color-gray); }

/* Status badge */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 100px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
}
.status-badge.success  { background: rgba(22,163,74,.1); color: var(--color-success); }
.status-badge.error    { background: rgba(232,72,85,.1); color: var(--color-error); }
.status-badge.warning  { background: rgba(244,162,97,.2); color: var(--color-warning); }
.status-badge.info     { background: rgba(37,99,235,.1); color: var(--color-info); }
.status-badge.purple   { background: rgba(124,58,237,.1); color: var(--color-purple); }
.status-badge.inactive { background: rgba(107,114,128,.1); color: var(--color-inactive); }

/* Klikalna pigulka: ten sam wyglad co status, ale prowadzi do ekranu, ktory ten status opisuje
   (badge subskrypcji w topbarze -> Ustawienia/Abonament). Wariant koloru zostaje w klasie statusu —
   tu tylko zdejmujemy podkreslenie linku (brak globalnego resetu <a> w tym pliku) i dokladamy hover,
   zeby bylo widac, ze to nie sama etykieta. Hover przez `filter`, a nie osobne tlo per status:
   dziala tak samo na kazdym wariancie koloru i nie duplikuje mapy statusow. */
.status-badge-link { text-decoration: none; cursor: pointer; transition: var(--transition); }
.status-badge-link:hover { filter: brightness(0.93); }
/* Focus jak w inputach (granat na jasnym tle), nie jak w sidebarze (zloto na ciemnym). */
.status-badge-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Filter bar */
.panel-filter-bar {
    background: var(--color-light);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
/* Pola paska filtrów mają metryki .panel-btn-sm (padding 0.25rem 0.6rem, font 0.75rem,
   line-height 1.5), pomniejszone o obramowanie 1.5px, którego przycisk nie ma — dzięki temu pole
   i przycisk stojące obok siebie mają DOKŁADNIE tę samą wysokość, a nie zbliżoną.
   Wysokość jest przy tym podana JAWNIE jako min-height, bo Chrome ignoruje line-height na
   <select>: sam padding dawał select o 3 px niższy od sąsiedniego przycisku. min-height, nie
   height, żeby nie spłaszczyć pól o własnej wysokości (np. <select multiple>). box-sizing:
   border-box jest globalny, więc obramowanie mieści się w tej wysokości. */
.panel-filter-bar input,
.panel-filter-bar select {
    min-height: calc(0.75rem * 1.5 + 0.5rem);
    padding: calc(0.25rem - 1.5px) calc(0.6rem - 1.5px);
    border: 1.5px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.5;
    outline: none;
    transition: var(--transition);
}
.panel-filter-bar input:focus,
.panel-filter-bar select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10,36,99,.1);
}

/* Tabs */
.panel-tabs {
    display: flex;
    flex-wrap: wrap;                       /* mobile: zakładki zawijają zamiast przepełniać */
    border-bottom: 2px solid var(--color-gray-light);
    gap: 0;
}
/* Metryki paska zakładek: padding 0.4rem 1rem + font 0.8rem (rozmiar przycisków panelu
   z DESIGN_SYSTEM, nie nowa wartość) → pasek ~30 px zamiast ~37 px, czyli o 20 % niżej.
   Zmiana stoi TUTAJ, a nie w komponencie, bo .panel-tabs to klasa wspólna dla 9 ekranów —
   nadpisanie jej metryk w jednym miejscu byłoby hardkodowaniem zabronionym przez CLAUDE.md §10
   i rozjechałoby ekrany między sobą (ten sam powód co przy .panel-filter-bar wyżej). */
.panel-tabs .panel-tab {
    padding: 0.4rem 1rem;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-gray);
    background: none;                       /* reset chrome <button> (pierwszy konsument .panel-tab) */
    border: none;
    border-bottom: 2px solid transparent;  /* po border:none — aktywna zakładka nadpisuje kolor */
    margin-bottom: -2px;
    transition: var(--transition);
}
.panel-tabs .panel-tab:hover { color: var(--color-primary); }
.panel-tabs .panel-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-accent);
}

/* Modal */
.panel-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.panel-modal {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 560px;
    overflow: hidden;
}
.panel-modal-header {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 1rem 1.25rem;
    font-family: var(--font-heading);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel-modal-close {
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 1.3rem;
    cursor: pointer;
    filter: invert(1);
}
.panel-modal-body { padding: 1.25rem; }
.panel-modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-gray-light);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Alerts */
.panel-alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}
.panel-alert-success { background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.2); color: var(--color-success); }
.panel-alert-error   { background: rgba(232,72,85,.08); border: 1px solid rgba(232,72,85,.2); color: var(--color-error); }
.panel-alert-info    { background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.2); color: var(--color-info); }
.panel-alert-warning { background: rgba(194,65,12,.08); border: 1px solid rgba(194,65,12,.2); color: var(--color-warning); }

/* Auth pages */
.auth-card {
    background: var(--color-white);
    padding: 2.5rem 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
}

/* Form inputs */
.panel-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--color-gray-light);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.875rem;
    outline: none;
    transition: var(--transition);
}
.panel-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10,36,99,.1);
}
.panel-label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
}
.panel-form-group { margin-bottom: 1rem; }

/* Primary button */
.panel-btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.55rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.panel-btn-primary:not(:disabled):hover { background: var(--color-primary-light); }

/* ============================================================
   APP LOADING SPLASH — ekran startowy WASM, renderowany w #app zanim
   Blazor przejmie render; po załadowaniu znika wraz z innerHTML #app.
   Kompozycja tokenów DESIGN_SYSTEM.md — zero nowych kolorów.
   Pierścień postępu sterowany frameworkowym --blazor-load-percentage
   (ustawianym przez Blazora na #app) — geometria <circle> bez zmian.
   Bez wysokiego z-index, by #blazor-error-ui (z-index:1000) mógł
   nałożyć się na splash przy błędzie bootowania. ============================================================ */
.app-loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light), var(--color-dark));
    animation: app-loading-fade-in 0.4s ease both;
}

.app-loading-ring {
    position: relative;
    width: 8rem;
    height: 8rem;
}

.loading-progress {
    display: block;
    width: 100%;
    height: 100%;
}
.loading-progress circle {
    fill: none;
    stroke-width: 0.3rem;
    stroke-linecap: round;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:first-child {
    stroke: rgba(255, 255, 255, .15);
}
.loading-progress circle:last-child {
    stroke: var(--color-gold);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.1s ease-in-out;
}

.app-loading-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2rem;
    letter-spacing: 0.04em;
    color: var(--color-white);
    animation: app-loading-pulse 2s ease-in-out infinite;
}

.app-loading-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.01em;
    color: var(--color-white);
}

.loading-progress-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, .7);
    min-height: 1.2em;
}
.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "");
}

@keyframes app-loading-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes app-loading-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .app-loading { animation: none; }
    .app-loading-mark { animation: none; }
}

/* ============================================================
   LANDING / STRONY PUBLICZNE — kompozycja tokenów DESIGN_SYSTEM.md.
   Bez nowych kolorów: wyłącznie var(--color-*) i rgba palety marki.
   ============================================================ */

.public-shell { display: flex; flex-direction: column; min-height: 100vh; }
.public-main { flex: 1 0 auto; }

.landing-container { max-width: 1140px; margin: 0 auto; padding: 0 1.25rem; }
.landing-container-narrow { max-width: 760px; }

/* Nav publiczny */
.landing-nav {
    position: sticky; top: 0; z-index: 900;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.7rem 1.5rem;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-light);
}
.landing-nav-brand, .landing-footer-brand {
    display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
    font-family: var(--font-heading); font-weight: 800; color: var(--color-primary); font-size: 1.05rem;
}
/* Landing-page brand logo (Clubelio) — full-colour wordmark, used in the public nav and footer */
.landing-brand-logo { display: block; height: 34px; width: auto; }
/* On the dark footer render the same mark as a solid-white silhouette (no second asset needed) */
.landing-footer-brand .landing-brand-logo { filter: brightness(0) invert(1); }
.landing-nav-links { display: flex; gap: 1.5rem; }
.landing-nav-links a { text-decoration: none; color: var(--color-dark); font-weight: 600; font-size: 0.9rem; font-family: var(--font-heading); }
.landing-nav-links a:hover { color: var(--color-primary); }
.landing-nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.landing-nav-login { text-decoration: none; color: var(--color-primary); font-weight: 700; font-size: 0.85rem; font-family: var(--font-heading); }
.lang-switch {
    padding: 0.3rem 0.5rem; border: 1.5px solid var(--color-gray-light); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 0.8rem; background: var(--color-white); cursor: pointer;
}

/* CTA (czerwień = call-to-action wg DESIGN_SYSTEM) */
.btn-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    background: var(--color-accent); color: var(--color-white); border: none; border-radius: var(--radius-sm);
    font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem;
    padding: 0.55rem 1.25rem; cursor: pointer; text-decoration: none; transition: var(--transition);
}
.btn-cta:hover { background: var(--color-accent-dark); }
.btn-cta-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.btn-cta-lg { padding: 0.8rem 1.75rem; font-size: 0.95rem; }
.btn-block { width: 100%; }
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--color-white); border: 1.5px solid rgba(255,255,255,.5);
    border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem;
    padding: 0.55rem 1.25rem; cursor: pointer; text-decoration: none; transition: var(--transition);
}
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-ghost-lg { padding: 0.8rem 1.75rem; font-size: 0.95rem; }

.status-badge.gold { background: rgba(244,162,97,.2); color: var(--color-warning); }

/* Hero */
.landing-hero {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light), var(--color-dark));
    color: var(--color-white); padding: 4rem 0 4.5rem;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; align-items: center; }
.hero-copy h1 { font-size: 2.6rem; line-height: 1.1; font-weight: 900; margin: 0.75rem 0 1rem; color: var(--color-white); }
.hero-subtitle { font-size: 1.1rem; color: rgba(255,255,255,.85); margin-bottom: 1.5rem; max-width: 30rem; }
.hero-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.9rem; color: rgba(255,255,255,.85); }

/* Hero — mockup panelu */
.mockup-window {
    display: grid; grid-template-columns: 56px 1fr; background: var(--color-white);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; min-height: 320px;
}
.mockup-sidebar { background: var(--color-dark); display: flex; flex-direction: column; align-items: center; gap: 0.85rem; padding: 0.85rem 0; }
.mockup-brand {
    width: 34px; height: 34px; border-radius: 9px; background: var(--color-accent); color: var(--color-white);
    font-family: var(--font-heading); font-weight: 900; font-size: 0.75rem; display: flex; align-items: center; justify-content: center;
}
.mockup-nav { font-size: 1rem; opacity: 0.5; }
.mockup-nav.active { opacity: 1; }
.mockup-main { padding: 1rem; min-width: 0; }
.mockup-topbar { font-family: var(--font-heading); font-weight: 800; color: var(--color-primary); margin-bottom: 0.85rem; }
.mockup-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.85rem; }
.mockup-stat { padding: 0.6rem; gap: 0.5rem; }
.mockup-stat .panel-stat-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 1rem; }
.mockup-stat-num { font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; color: var(--color-dark); }
.mockup-stat-lbl { font-size: 0.65rem; color: var(--color-gray); }
.mockup-table th, .mockup-table td { padding: 0.4rem 0.6rem; font-size: 0.75rem; }
.mockup-schedule { margin-top: 0.75rem; border-top: 1px solid var(--color-gray-light); padding-top: 0.6rem; }
.mockup-sched-title { font-family: var(--font-heading); font-weight: 800; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-gray); margin-bottom: 0.4rem; }
.mockup-sched-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; padding: 0.2rem 0; color: var(--color-dark); }

/* Sekcje */
.landing-section { padding: 3.5rem 0; }
.landing-section-alt { background: var(--color-light); }
.section-title { text-align: center; font-size: 1.9rem; font-weight: 800; color: var(--color-primary); margin: 0 0 0.5rem; }
.section-subtitle { text-align: center; color: var(--color-gray); max-width: 36rem; margin: 0 auto 2rem; }

/* Dla kogo */
.audience-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.audience-chip {
    background: var(--color-white); border: 1px solid var(--color-gray-light); border-radius: 100px;
    padding: 0.6rem 1.25rem; font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; box-shadow: var(--shadow-sm);
}

/* Funkcje */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.feature-card { padding: 1.5rem; }
.feature-card .panel-stat-icon { margin-bottom: 0.85rem; }
.feature-card h3 { font-size: 1.05rem; color: var(--color-primary); margin: 0 0 0.4rem; }
.feature-card p { color: var(--color-gray); font-size: 0.9rem; margin: 0; }

/* Kroki */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step { text-align: center; padding: 0 0.5rem; }
.step-num {
    width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 0.85rem; background: var(--color-accent);
    color: var(--color-white); font-family: var(--font-heading); font-weight: 900; font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
}
.step h3 { color: var(--color-primary); font-size: 1.1rem; margin: 0 0 0.4rem; }
.step p { color: var(--color-gray); font-size: 0.9rem; margin: 0; }

/* Cennik */
.pricing-card {
    max-width: 380px; margin: 0 auto; text-align: center; background: var(--color-white);
    border: 2px solid var(--color-gold); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 2rem;
}
.pricing-price { font-family: var(--font-heading); font-weight: 900; font-size: 2rem; color: var(--color-primary); margin: 1rem 0 0.25rem; }
.pricing-note { color: var(--color-gray); font-size: 0.85rem; margin-bottom: 1.25rem; }
.pricing-features { list-style: none; padding: 0; margin: 0 auto 1.5rem; text-align: left; display: inline-block; }
.pricing-features li { padding: 0.3rem 0; font-size: 0.9rem; color: var(--color-dark); }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 0.6rem; }
.faq-item { background: var(--color-white); border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); padding: 0.85rem 1.1rem; }
.faq-item summary { cursor: pointer; font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); font-size: 0.95rem; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--color-accent); font-weight: 900; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--color-gray); font-size: 0.9rem; margin: 0.6rem 0 0; }

/* Pasek CTA */
.cta-band { background: var(--color-primary); color: var(--color-white); padding: 3rem 0; }
.cta-band-inner { text-align: center; }
.cta-band-inner h2 { font-size: 1.8rem; font-weight: 800; margin: 0 0 0.5rem; color: var(--color-white); }
.cta-band-inner p { color: rgba(255,255,255,.8); margin: 0 0 1.5rem; }

/* Stopka */
.landing-footer { background: var(--color-dark); color: rgba(255,255,255,.7); padding: 2rem 0; }
.landing-footer-inner { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; justify-content: space-between; }
.landing-footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.landing-footer-links a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 0.85rem; font-family: var(--font-heading); }
.landing-footer-links a:hover { color: var(--color-white); }
.landing-footer-copy { font-size: 0.8rem; width: 100%; text-align: center; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; }

/* Auth (register pod PublicLayout) */
.auth-section { padding: 3rem 1rem; display: flex; justify-content: center; background: var(--color-light); }
.register-card { max-width: 460px; width: 100%; }
.auth-heading { font-size: 1.5rem; font-weight: 800; color: var(--color-primary); text-align: center; margin: 0 0 0.25rem; }
.auth-sub { text-align: center; color: var(--color-gray); font-size: 0.9rem; margin: 0 0 1.5rem; }
.auth-foot { text-align: center; margin-top: 1rem; font-size: 0.85rem; color: var(--color-gray); }
.auth-link { color: var(--color-accent); font-weight: 700; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.field-err { color: var(--color-error); font-size: 0.78rem; margin-top: 0.3rem; }

/* Responsywność landing */
@media (max-width: 991.98px) {
    .landing-nav-links { display: none; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy h1 { font-size: 2rem; }
    .feature-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
}

/* ============================================================
   PANEL CHROME — sidebar + topbar + layout shell.
   Przeniesione z projektu referencyjnego (ten sam DESIGN_SYSTEM.md),
   wyłącznie tokeny var(--*). Brak zależności od Bootstrapa — responsywne
   przełączniki sterowane własnymi klasami (.panel-topbar-toggle-*).
   ============================================================ */

/* Layout wrapper */
.panel-wrapper { display: flex; min-height: 100vh; background: var(--color-light); }

/* Sidebar */
.panel-sidebar { width: var(--sidebar-width); background: var(--color-dark); color: rgba(255,255,255,.8); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040; transition: width .3s ease; }
.panel-sidebar.collapsed { width: var(--sidebar-width-collapsed); }
.panel-sidebar.collapsed .panel-sidebar-link span,
.panel-sidebar.collapsed .panel-sidebar-footer span { display: none; }
.panel-sidebar.collapsed .panel-sidebar-header { justify-content: center; padding: 0 .75rem; }
.panel-sidebar.collapsed .panel-brand-logo-full { display: none; }
.panel-sidebar.collapsed .panel-brand-logo-mark { display: block; }
/* W railu 46 px tresci nie ma miejsca na znak 34 px I przycisk obok — zwiniety sidebar rozwija sie
   klikiem w caly naglowek (@onclick na .panel-sidebar-header), wiec zadna akcja nie ginie. */
.panel-sidebar.collapsed .panel-sidebar-toggle { display: none; }
.panel-sidebar.collapsed .panel-sidebar-link { justify-content: center; padding: .4rem; }
.panel-sidebar.collapsed .panel-sidebar-link i { margin-right: 0; font-size: 1.1rem; }

/* Wysokosc rowna topbarowi (#45). Padding TYLKO poziomy, zeby rozstrzygalo `height`, a nie dwie
   wartosci walczace o te sama wysokosc — tak jak robi to .panel-topbar nizej. W pionie centruje
   istniejace align-items. flex-shrink: 0, bo .panel-sidebar to kolumnowy flex: bez tego naglowek
   zszedlby ponizej 60 px przy niskim oknie, czyli dokladnie tam, gdzie rownosc ma znaczenie. */
.panel-sidebar-header { display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; height: var(--topbar-height); flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer; position: relative; }
/* Marka produktu w naglowku sidebara (#57). Osobny wariant wordmarku (ClubelioLogoSidebar.png,
   szersze odstepy niz wersja z landingu), na bialo tym samym filtrem co stopka landingu (:579).
   Stala `height` i zero pionowego paddingu, bo wysokosc naglowka (60 px) jest kontraktem
   z topbarem (#45) i logo nie moze jej ruszyc. */
.panel-brand-logo { display: block; height: 34px; width: auto; filter: brightness(0) invert(1); }
/* Korekta optyczna 2 px w lewo — na samym wordmarku, a nie na paddingu naglowka, zeby 1.25rem
   pozostalo wspolnym kontraktem ze stanem zwinietym i mobilnym. Znaku w railu nie rusza, bo tam
   o pozycji decyduje justify-content: center (:748). */
.panel-brand-logo-full { margin-left: -2px; }
/* Rail 70 px nie miesci wordmarku (34 px wysokosci => ~147 px szerokosci), wiec w stanie zwinietym
   pokazujemy sam znak 1:1. Podmiana jest binarna (display), wiec nic sie nie animuje przy zwijaniu. */
.panel-brand-logo-mark { display: none; }
/* Strzalka zwijania (przeniesiona z topbara). POZA ukladem flex (position: absolute), bo wordmark
   zjada 147 z 168 px tresci naglowka — w toku flex przycisk zabralby mu szerokosc i przy stalej
   `height` splaszczylby znak. Absolut rozdziela ich budzety: logo nigdy nie walczy o miejsce,
   a przycisk siedzi przy prawej krawedzi, na przezroczystym marginesie PNG-a. Kolory jak
   .panel-sidebar-link — to ten sam ciemny chrom. */
.panel-sidebar-toggle { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; background: none; border: none; font-size: .9rem; line-height: 1; color: rgba(255,255,255,.65); cursor: pointer; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.panel-sidebar-toggle:hover { color: rgba(255,255,255,.95); background: rgba(255,255,255,.08); }
.panel-sidebar-toggle:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -2px; }

.panel-sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem 0; }
/* Gestosc wiersza: jawny line-height, bo bez niego wysokosc zalezy od metryk `normal` Montserrata
   i kryterium "-30%" nie jest powtarzalne (issue #40). 2 × .35rem + 1.25 × 14px ≈ 28,7 px. */
.panel-sidebar-link { display: flex; align-items: center; gap: .5rem; padding: .35rem 1rem; color: rgba(255,255,255,.65); font-size: .875rem; line-height: 1.25; white-space: nowrap; font-family: var(--font-heading); font-weight: 500; transition: all .2s ease; border-left: 3px solid transparent; text-decoration: none; }
.panel-sidebar-link:hover { color: rgba(255,255,255,.95); background: rgba(255,255,255,.05); border-left-color: rgba(255,255,255,.2); }
.panel-sidebar-link:focus-visible { outline: 2px solid var(--color-gold); outline-offset: -2px; }
.panel-sidebar-link.active { color: #fff; background: rgba(232,72,85,.15); border-left-color: var(--color-accent); font-weight: 600; }
.panel-sidebar-link i { width: 20px; text-align: center; font-size: .9rem; flex-shrink: 0; }
/* Budzet na etykiete spadl z ~185 px do ~145 px, wiec dluga pozycja musi sie uciac, a nie zawinac
   (wiersz dwuliniowy zjada dokladnie te 30%, ktore ta zmiana oszczedza). `min-width: 0` jest tu
   konieczne: domyslne `auto` nie pozwala elementowi flex zejsc ponizej szerokosci tresci, wiec bez
   niego `text-overflow` nie ma czego uciac. Bez `display` — rail ikon robi regula .collapsed wyzej. */
.panel-sidebar-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* NAV-5 (ADR-0047): nagłówek sekcji sidebara — gold/UPPERCASE, mniejszy niż etykiety pozycji.
   W trybie zwiniętym (icon-rail) ukryty; na mobile (drawer pełnej szerokości) re-show niżej w @media. */
.panel-sidebar-section { padding: 1rem 1.25rem .35rem; font-family: var(--font-heading); font-weight: 700; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-gold); }
.panel-sidebar.collapsed .panel-sidebar-section { display: none; }

.panel-sidebar-footer { border-top: 1px solid rgba(255,255,255,.08); padding: .5rem 0; }

/* Overlay (mobile) */
.panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1035; display: none; }

/* Main content area */
/* min-width:0 to siatka bezpieczeństwa całego panelu, nie kosmetyka: domyślne `auto` nie pozwala
   elementowi elastycznemu zejść poniżej min-content swojej zawartości, więc dowolna szeroka treść
   (tabela, kanban, wykres) rozpychałaby panel zamiast przewijać się we własnym kontenerze — a paska
   poziomego dostawałaby STRONA, razem z nagłówkiem i nawigacją (issue #35). */
.panel-main { flex: 1; min-width: 0; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; transition: margin-left .3s ease; }
.panel-main.sidebar-collapsed { margin-left: var(--sidebar-width-collapsed); }

/* Top bar */
.panel-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; height: var(--topbar-height); background: var(--color-white); border-bottom: 1px solid var(--color-gray-light); position: sticky; top: 0; z-index: 1020; box-shadow: var(--shadow-sm); }
/* Od #71 zostaje tu WYLACZNIE przelacznik menu mobilnego — marka klubu przeniosla sie do prawej
   grupy. min-width: 0 nie ma juz czego ratowac (przycisk jest staly), ale zostaje jako neutralne
   zabezpieczenie: gdyby cokolwiek wrocilo po lewej, domyslne `auto` znow blokowaloby kurczenie. */
.panel-topbar-left { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.panel-topbar-toggle { background: none; border: none; font-size: 1.1rem; color: var(--color-gray); cursor: pointer; padding: .4rem; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.panel-topbar-toggle:hover { background: var(--color-light); color: var(--color-primary); }
.panel-topbar-toggle-mobile { display: none; }
/* Logo klubu (#59). max-height zamiast height: logo ma dowolne proporcje, a pasek ma 60 px i jego
   wysokosc jest kontraktem z naglowkiem sidebara (#45) — obrazek nie moze go rozepchnac.
   flex-shrink: 0, zeby przy waskim ekranie kurczyla sie nazwa, a nie znak klubu. */
.panel-topbar-logo { display: block; max-height: 32px; width: auto; flex-shrink: 0; }
/* Nazwa klubu ma sie UCIAC wielokropkiem, nie zawinac (#59): druga linia rozepchnelaby topbar,
   ktorego wysokosc 60 px jest kontraktem z naglowkiem sidebara (#45). */
.panel-topbar-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-primary); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Intencja bez zmian od #59 — kurczy sie NAZWA klubu, nie przyciski — ale od #71 egzekwowana o poziom
   nizej. Nazwa siedzi teraz W SRODKU tej grupy, wiec `flex-shrink: 0` na kontenerze dzialaloby
   przeciwko sobie: rozmiar bazowy grupy = max-content razem z nazwa, czyli dluga nazwa nie ucinalaby
   sie, tylko wypychala „Wyloguj" poza ekran. Dlatego grupa moze sie kurczyc (min-width: 0), a zakaz
   kurczenia dostaja pojedyncze akcje — wszystko poza blokiem klubu. */
.panel-topbar-actions { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.panel-topbar-actions > *:not(.panel-topbar-club) { flex-shrink: 0; }
/* Logo + nazwa jako jeden blok (#71): kurczy sie razem, wiec znak klubu nigdy nie odkleja sie od nazwy.
   min-width: 0 jest tu KONIECZNE, nie ozdobne — domyslne `auto` nie pozwala elementowi flex zejsc
   ponizej szerokosci tresci, wiec bez tego .panel-topbar-title nie ma czego uciac (ta sama pulapka
   co przy .panel-sidebar-link span, #40). */
.panel-topbar-club { display: flex; align-items: center; gap: .5rem; min-width: 0; flex-shrink: 1; }

/* Content */
.panel-content { flex: 1; padding: 1.5rem; }

/* Responsive — sidebar staje się drawerem z overlayem (breakpoint 991.98px) */
@media (max-width: 991.98px) {
    .panel-sidebar { transform: translateX(-100%); transition: transform .3s ease; width: var(--sidebar-width) !important; }
    .panel-sidebar.show { transform: translateX(0); }
    .panel-sidebar.collapsed { width: var(--sidebar-width) !important; transform: translateX(-100%); }
    .panel-sidebar.collapsed.show { transform: translateX(0); }
    .panel-sidebar.collapsed .panel-sidebar-link span,
    .panel-sidebar.collapsed .panel-sidebar-footer span { display: inline; }
    .panel-sidebar.collapsed .panel-sidebar-section { display: block; }
    .panel-sidebar.collapsed .panel-sidebar-header { justify-content: flex-start; padding: 0 1.25rem; }
    /* Drawer ma pelna szerokosc, wiec marka wraca do wariantu rozwinietego mimo klasy .collapsed. */
    .panel-sidebar.collapsed .panel-brand-logo-full { display: block; }
    .panel-sidebar.collapsed .panel-brand-logo-mark { display: none; }
    .panel-sidebar.collapsed .panel-sidebar-link { justify-content: flex-start; padding: .35rem 1rem; }
    /* Zwijanie do railu nie istnieje na mobile (szerokosc wymuszona !important powyzej), wiec
       strzalka bylaby martwym przyciskiem. Szufladę zamyka overlay albo przelacznik w topbarze. */
    .panel-sidebar-toggle { display: none; }
    .panel-overlay { display: block; }
    .panel-main, .panel-main.sidebar-collapsed { margin-left: 0; }
    .panel-content { padding: 1rem; }
    .panel-topbar { padding: 0 1rem; }
    .panel-topbar-toggle-mobile { display: flex; }
    /* Na telefonie w prawej grupie stoi juz dzwonek, jezyk i „Wyloguj" (#71) — nazwa klubu wypchnelaby
       ktorys z nich poza ekran. Zostaje samo logo: znak identyfikuje klub, a nazwa jest i tak w tytule
       strony. Klub bez logo ma wtedy prawa strone paska dokladnie taka jak przed zmiana. */
    .panel-topbar-club .panel-topbar-title { display: none; }
}

/* ============================================================
   PANEL PRIMITIVES — nagłówki stron, siatki, paginacja, formularze.
   Z panel.css referencji, na tokenach DESIGN_SYSTEM. Bez Bootstrapa
   (siatka na CSS Grid/Flex zamiast row/col).
   ============================================================ */

/* Page header (tytuł + opcjonalna akcja po prawej) */
.panel-page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.panel-page-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--color-primary); margin: 0 0 .25rem; }
.panel-page-subtitle { color: var(--color-gray); font-size: .875rem; margin: 0; }

/* Siatki (zastępują Bootstrap row/col) */
.panel-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.panel-shortcut-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.panel-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.panel-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }

/* Block button (skrót pełnej szerokości) */
.panel-btn-block { width: 100%; justify-content: center; padding: 0.5rem 0.85rem; }

/* Skróty dashboardu — wyższe/wygodniejsze przyciski; scoped do siatki skrótów (NIE rusza globalnego .panel-btn-block).
   Obnizone o 12 px (49,56 -> 37,56) przy #71: najpierw o 8, potem jeszcze o 4 na prosbe wlasciciela.
   Padding i min-height MUSZA schodzic RAZEM: sam padding zbija tresc, ale wtedy wiazace staje sie
   min-height i przycisk stoi w miejscu (przy 3rem = 48 px, przy 2.5rem = 40 px). Stad .575rem, wartosc
   z pomiaru, nie z ladnego zaokraglenia: 2 x 9,2 px + 19,16 px tresci = 37,56 px, czyli rowno -12 px.
   Podloga 2.25rem (36 px) jest ponizej tresci, wiec o wysokosci decyduje padding, a nie ona.
   .panel-btn-lg (:231) ma stare liczby i zostaje na 49,56 px — to CTA naglowka strony, nie kafel. */
.panel-shortcut-grid .panel-btn { padding-top: .575rem; padding-bottom: .575rem; min-height: 2.25rem; }

/* Empty state */
.panel-empty { text-align: center; padding: 2.5rem 1rem; color: var(--color-gray); }
.panel-empty i { font-size: 2.5rem; margin-bottom: .75rem; opacity: .4; display: block; }
.panel-empty p { font-size: .9rem; margin: 0; }
/* Scoped pod .panel-empty, by wygrać specyficzność z „.panel-empty p { margin:0 }" —
   inaczej margin:auto nie działa i blok 22rem nie centruje się. */
.panel-empty .panel-empty-hint { font-size: .8rem; max-width: 22rem; margin: .35rem auto 0; line-height: 1.5; }
.panel-empty .panel-btn { margin-top: 1rem; }

/* Pagination */
.panel-pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 0 0; font-size: .85rem; }

/* Responsive table wrapper (Bootstrap-free) */
.table-responsive { overflow-x: auto; }

/* Form layout (siatka pól + pod-sekcje) */
.panel-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.panel-form-grid .span-2 { grid-column: 1 / -1; }
/* Master-detail (Lokalizacje, ADR-0021): lewa tabela ~2/3 + prawy formularz inline ~1/3; zwija do 1 kol < 992px. */
.panel-split { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 991.98px) { .panel-split { grid-template-columns: 1fr; } }
.panel-form-section { margin-top: 1.5rem; }
.panel-form-section h4 { font-family: var(--font-heading); font-size: .95rem; font-weight: 700; color: var(--color-primary); margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--color-light); display: flex; align-items: center; gap: .5rem; }

@media (max-width: 767.98px) {
    .panel-grid-2 { grid-template-columns: 1fr; }
    .panel-form-grid { grid-template-columns: 1fr; }
}

/* Siatki statystyk/skrótów — responsywne kolumny jak col-lg-3 col-sm-6 (parytet OrlyBialystok) */
@media (max-width: 991.98px) {
    .panel-stat-grid, .panel-shortcut-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .panel-stat-grid, .panel-shortcut-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PARTICIPANTS (parytet Orły) — szukajka z ikoną, numerowana paginacja,
   toast, pasek akcji formularza. Wyłącznie tokeny var(--*), bez nowych kolorów.
   ============================================================ */

/* Szukajka z ikoną lupy */
/* Wcięcie tekstu i pozycja lupy idą w parze z padding-em pól paska filtrów — po zejściu pól do
   metryk .panel-btn-sm większe wcięcie zostawiało dziurę między ikoną a tekstem. */
.panel-search-input { position: relative; display: inline-flex; align-items: center; }
.panel-search-input i { position: absolute; left: .5rem; color: var(--color-gray); font-size: .7rem; pointer-events: none; }
.panel-search-input input { padding-left: 1.5rem; }

/* Numerowana paginacja */
.panel-pagination button {
    min-width: 2rem;
    padding: .3rem .6rem;
    border: 1.5px solid var(--color-gray-light);
    background: var(--color-white);
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: .8rem;
    color: var(--color-primary);
    cursor: pointer;
    transition: var(--transition);
}
.panel-pagination button:hover:not(:disabled) { background: var(--color-light); }
.panel-pagination button.active { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.panel-pagination button:disabled { opacity: .5; cursor: default; }

/* Toast (fixed bottom-right; tło/obramowanie z .panel-alert-*) */
.panel-toast { position: fixed; bottom: 1rem; right: 1rem; z-index: 9999; box-shadow: var(--shadow); margin: 0; }

/* Pasek akcji formularza-na-stronie (odpowiednik .panel-modal-footer dla strony) */
.panel-form-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-gray-light); }

/* Przypisane elementy w formularzu (grupy/opiekunowie) */
.panel-assigned-list { display: flex; flex-direction: column; gap: .4rem; }
.panel-group-assign { border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); padding: .75rem; background: var(--color-light); }
.panel-group-assign-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.panel-group-assign-name { color: var(--color-primary); }
.panel-group-assign-fee { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.panel-discount-grid { display: grid; grid-template-columns: repeat(4, 1fr) 1.6fr; gap: .5rem; }
.panel-discount-grid .panel-label { font-size: .72rem; }
@media (max-width: 767.98px) { .panel-discount-grid { grid-template-columns: repeat(2, 1fr); } .panel-discount-grid .panel-discount-note { grid-column: 1 / -1; } }
.panel-discount-hint { font-size: .78rem; margin-top: .5rem; display: flex; align-items: center; gap: .35rem; }
.panel-discount-hint.muted { color: var(--color-gray); }
.panel-discount-hint.temporal { color: var(--color-gold); }
.panel-badge-remove { background: none; border: none; cursor: pointer; color: inherit; font-size: 1rem; line-height: 1; padding: 0; }
/* Wiersz dodawania (select „Wybierz..." + „Dodaj") w sekcjach grup/opiekunów — wąski jak w Orłach. */
.panel-add-row { display: flex; gap: .5rem; margin-top: .5rem; max-width: 400px; }
/* Podpowiedź pod polem formularza (np. sekcje CMS Oferta/Grafik — treść auto z danych). */
.panel-field-hint { font-size: .8rem; color: var(--color-gray); margin: .25rem 0 .75rem; line-height: 1.5; }
/* CMS media (Slice 4) — podgląd logo + miniatury galerii w edytorze. Podgląd przez publiczne /api/site-media. */
.panel-media-logo { display: block; max-height: 80px; width: auto; margin-bottom: .5rem; border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); background: var(--color-light); }
.panel-thumb-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.panel-thumb { position: relative; width: 96px; height: 96px; }
.panel-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-gray-light); }
.panel-thumb-remove { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; line-height: 20px; text-align: center; padding: 0; border: none; border-radius: 50%; background: var(--color-error); color: #fff; cursor: pointer; }
/* Inbox zapisów (Faza 2) — zaakceptowany regulamin w szczegółach zgłoszenia (kopia, przewijalna). */
.panel-terms-snapshot { max-height: 200px; overflow-y: auto; padding: .75rem; border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); background: var(--color-light); white-space: pre-line; font-size: .85rem; color: var(--color-dark); }
/* Własne domeny (Faza 3A) — wiersz nazwy domeny z odznakami (status/typ/SSL). */
.panel-domain-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
/* Przewodnik krokowy w ustawieniach (PAYU-4) — zwijane instrukcje procesu prowadzonego POZA panelem.
   Zero nowych kolorów: wszystko z tokenów, a nagłówek to zwykły .panel-card-header w roli <summary>. */
.panel-guide > .panel-guide-summary { cursor: pointer; list-style: none; }
.panel-guide > .panel-guide-summary::-webkit-details-marker { display: none; }
/* .panel-card-header jest flexem ze space-between, więc chevron wystarczy dodać jako drugi element —
   bez float, który w kontekście flex i tak nic by nie zrobił. */
.panel-guide > .panel-guide-summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .8rem; color: var(--color-gray); }
.panel-guide[open] > .panel-guide-summary::after { content: '\f077'; }
.panel-guide-step { padding: .85rem 0; border-top: 1px solid var(--color-gray-light); }
.panel-guide-step:first-of-type { border-top: none; padding-top: .25rem; }
.panel-guide-step-title { font-family: var(--font-heading); font-size: .95rem; font-weight: 700; color: var(--color-primary); margin: 0 0 .35rem; }
details.panel-guide-step > .panel-guide-step-title { cursor: pointer; list-style: none; }
details.panel-guide-step > .panel-guide-step-title::-webkit-details-marker { display: none; }
details.panel-guide-step > .panel-guide-step-title::before { content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .7rem; color: var(--color-gray); margin-right: .5rem; }
details.panel-guide-step[open] > .panel-guide-step-title::before { content: '\f078'; }
.panel-guide-list { margin: .25rem 0 .5rem 1.1rem; padding: 0; font-size: .8rem; color: var(--color-gray); line-height: 1.6; }
/* Powiadomienia (M1, ADR-0045) — dzwoneczek w topbarze rodzica + dropdown inboxa; przełączniki ustawień. */
.notif-bell { position: relative; display: inline-flex; }
.notif-bell-btn { position: relative; background: none; border: none; cursor: pointer; color: var(--color-primary); font-size: 1.1rem; width: 38px; height: 38px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; }
.notif-bell-btn:hover { background: var(--color-light); }
.notif-badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 100px; background: var(--color-accent); color: #fff; font-family: var(--font-heading); font-size: .65rem; font-weight: 700; line-height: 17px; text-align: center; }
.notif-backdrop { position: fixed; inset: 0; z-index: 999; }
.notif-dropdown { position: absolute; top: calc(100% + .4rem); right: 0; width: 340px; max-width: 92vw; background: var(--color-white); border: 1px solid var(--color-gray-light); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 1000; overflow: hidden; }
.notif-dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: .6rem .85rem; border-bottom: 1px solid var(--color-gray-light); font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); }
.notif-dropdown-head button { background: none; border: none; cursor: pointer; color: var(--color-info); font-size: .78rem; font-family: var(--font-body); }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--color-gray-light); padding: .6rem .85rem; cursor: pointer; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-light); }
.notif-item.unread { background: rgba(37,99,235,.06); }
.notif-item-title { font-family: var(--font-heading); font-weight: 700; font-size: .82rem; color: var(--color-dark); display: flex; align-items: center; gap: .4rem; min-width: 0; }
.notif-item-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: 0 0 auto; }
.notif-item-meta { font-size: .72rem; color: var(--color-gray); margin-top: .25rem; }
.notif-empty { padding: 1.25rem; text-align: center; color: var(--color-gray); font-size: .85rem; }
/* Strona ogłoszeń, zakładka „Ogłoszenia" (inbox): zawijanie wierszy (dropdown dzwoneczka ucina — scope ann-inbox). */
.ann-inbox .notif-item-title { flex-wrap: wrap; }
.ann-inbox .notif-item-title strong,
.ann-inbox .notif-item > div { white-space: normal; overflow-wrap: anywhere; }
.notif-toggle { display: flex; align-items: center; gap: .55rem; padding: .4rem 0; font-size: .9rem; color: var(--color-dark); cursor: pointer; }
.notif-toggle input { width: 16px; height: 16px; cursor: pointer; }

/* Reużywalny combobox (SearchableSelect): pole panel-input z filtrowaniem + lekka rozwijana lista;
   backdrop do zamykania po kliknięciu poza — wzorzec jak dzwoneczek powiadomień. */
.ss { position: relative; }
.ss-list { position: absolute; top: calc(100% + .25rem); left: 0; right: 0; z-index: 1000; background: var(--color-white); border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto; }
.ss-option { display: block; width: 100%; text-align: left; padding: .5rem .75rem; background: none; border: none; cursor: pointer; font-size: .875rem; }
.ss-option:hover { background: var(--color-light); }
.ss-empty { padding: .5rem .75rem; color: var(--color-gray); font-size: .85rem; }
.ss-backdrop { position: fixed; inset: 0; z-index: 999; }

/* Ucinanie długiego tytułu w „Moje ogłoszenia" (zakładka sent). Tylko ta kolumna — max-width w px
   jest konieczny, by ellipsis zadziałał w td przy table-layout:auto (NIE globalny table-layout:fixed). */
.panel-table td.panel-cell-truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Klikalne wiersze list / kafelki grup → edycja. Klik wiersza woła OpenEdit; przyciski akcji w wierszu
   mają @onclick:stopPropagation, więc ich klik nie wyzwala nawigacji wiersza (wzorzec jak w CalendarView). */
.row-clickable { cursor: pointer; }
/* Lokalizacje (master-detail): podświetlenie wiersza aktualnie edytowanego w formularzu po prawej. */
.panel-table tbody tr.selected { background: rgba(10,36,99,.06); }

/* Ogłoszenia (#108 D3): wiersz właśnie wysłanego ogłoszenia + komunikat „Wysłano do N odbiorców"
   po prawej stronie nagłówka karty historii. Zero nowych kolorów — tło to ta sama wartość co
   w .panel-alert-success, a tekst bierze token --color-success. Wzorzec komunikatu w nagłówku:
   .panel-block-count w edytorze bloków (nagłówek jest flexem ze space-between). */
.panel-table tbody tr.row-sent { background: rgba(22,163,74,.08); }
.panel-sent-note { font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--color-success); display: inline-flex; align-items: center; gap: .35rem; }

/* Edytor bloków strony klubu (CMS-1, ADR-0054): pasek jednego zapisu + lista bloków z uchwytem
   przeciągania. Wszystko na tokenach i klasach .panel-* — bez własnych kolorów. */
.panel-save-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem .9rem; margin-bottom: 1rem; background: var(--color-white); border: 1px solid var(--color-gray-light); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-save-state { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--color-gray); }
.panel-save-state--dirty { color: var(--color-warning); font-weight: 600; }
.panel-block-count { font-size: .78rem; color: var(--color-gray); }
.panel-block-palette { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-gray-light); }
.panel-block-palette-label { font-family: var(--font-heading); font-size: .78rem; font-weight: 700; color: var(--color-primary); margin-right: .25rem; }
.panel-block-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.panel-block { border: 1px solid var(--color-gray-light); border-radius: var(--radius-sm); background: var(--color-white); }
.panel-block--hidden { background: var(--color-light); }
.panel-block--dragging { opacity: .45; }
.panel-block-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .55rem .7rem; }
/* Uchwyt jest JEDYNYM elementem draggable — reszta nagłówka zostaje klikalna (zwijanie, akcje). */
.panel-block-grip { cursor: grab; color: var(--color-gray); padding: .2rem .35rem; }
.panel-block-grip:active { cursor: grabbing; }
.panel-block-toggle { display: inline-flex; align-items: center; gap: .5rem; background: none; border: none; padding: 0; cursor: pointer; color: var(--color-primary); }
.panel-block-title { font-family: var(--font-heading); font-size: .85rem; font-weight: 700; }
.panel-block-subtitle { font-size: .8rem; color: var(--color-gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
.panel-block-actions { display: inline-flex; gap: .3rem; margin-left: auto; }
.panel-block-body { padding: .25rem .9rem .9rem; border-top: 1px solid var(--color-gray-light); }

/* Podgląd strony klubu obok edytora (CMS-2, ADR-0055). Wariant .panel-split z szerszą kolumną
   podglądu; przełamanie na 991.98px MUSI być powtórzone, bo modyfikator nadpisuje regułę bazową. */
.panel-split--preview { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 991.98px) { .panel-split--preview { grid-template-columns: 1fr; } }
.site-preview { position: sticky; top: 1rem; }
.site-preview-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.site-preview-title { font-family: var(--font-heading); font-size: .85rem; font-weight: 700; color: var(--color-primary); }
.site-preview-widths { display: inline-flex; gap: .25rem; margin-left: auto; }
.site-preview-hint { margin: 0 0 .5rem; }
/* Scena podglądu: ramka o stałej szerokości (telefon/tablet) wyśrodkowana, z przewijaniem w poziomie,
   gdy wybrana szerokość nie mieści się w kolumnie. */
.site-preview-stage { border: 1px solid var(--color-gray-light); border-radius: var(--radius); background: var(--color-light); padding: .5rem; overflow-x: auto; }
.site-preview-frame { display: block; margin: 0 auto; max-width: 100%; height: 70vh; min-height: 420px; border: 0; border-radius: var(--radius-sm); background: var(--color-white); }
/* Stan zastępczy sceny — ładowanie i awaria (#69). Wysokość MUSI zostać zgodna z .site-preview-frame
   wyżej, inaczej scena kurczy się na czas pobierania i skacze, gdy podgląd dojedzie; globalne
   box-sizing: border-box (linia 78) sprawia, że padding .panel-empty nie dokłada się do tych 70vh. */
.site-preview-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 70vh; min-height: 420px; }

/* Wybór motywu strony klubu (CMS-3, ADR-0056). Miniatura pokazuje to, czym motywy się różnią:
   parę kolorów i krój nagłówka — bo wybór z listy nazw byłby wyborem w ciemno. */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.theme-card { display: flex; flex-direction: column; gap: .4rem; padding: .5rem; background: var(--color-white); border: 2px solid var(--color-gray-light); border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.theme-card:hover { border-color: var(--color-primary-light); }
.theme-card--active { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.theme-swatch { display: block; height: 46px; border-radius: var(--radius-sm); }
.theme-name { font-size: .85rem; font-weight: 700; color: var(--color-dark); }
/* Próbnik koloru — natywny widget potrzebuje własnej wysokości, inaczej .panel-input go spłaszcza. */
.panel-input[type="color"] { width: 64px; height: 38px; padding: 2px; cursor: pointer; }
/* Pasek formatowania treści bloku (CMS-4a, ADR-0057). */
.md-toolbar { display: flex; gap: .25rem; margin-bottom: .35rem; }