:root {
    --bg: #12181a;
    --surface: #1b2326;
    --surface-raised: #202a2e;
    --hairline: #2a3438;
    --text: #e8edec;
    --text-muted: #8ca0a0;
    --accent: #3fbf7f;
    --accent-ink: #08110c;
    --danger: #e0776b;

    --class-a: #2e7d5b;
    --class-b: #4c9a5c;
    --class-c: #8fae4f;
    --class-d: #d9b341;
    --class-e: #d68f3e;
    --class-f: #c96b3e;
    --class-g: #b84c42;

    --radius: 8px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --- wspólne elementy marki --- */

.wordmark {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    color: var(--text);
    text-decoration: none;
}

.status-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--accent);
}

.status-tag .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: blink 1.8s ease-in-out infinite;
}

.footprint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

.footprint .sep { color: var(--hairline); }

/* --- skala klas A–G: motyw wiodący --- */

.scale {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.scale-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.scale-row .letter {
    width: 1.1rem;
    flex-shrink: 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: right;
}

.scale-row .bar {
    height: 1.15rem;
    transform: scaleX(0);
    transform-origin: left;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    animation: draw-in 0.6s var(--ease) forwards;
    animation-delay: calc(var(--i) * 90ms + 200ms);
}

.scale-row[data-class="A"] .bar { width: 38%; background: var(--class-a); }
.scale-row[data-class="B"] .bar { width: 46%; background: var(--class-b); }
.scale-row[data-class="C"] .bar { width: 54%; background: var(--class-c); }
.scale-row[data-class="D"] .bar { width: 62%; background: var(--class-d); }
.scale-row[data-class="E"] .bar { width: 70%; background: var(--class-e); }
.scale-row[data-class="F"] .bar { width: 78%; background: var(--class-f); }
.scale-row[data-class="G"] .bar { width: 86%; background: var(--class-g); }

/* Ten sam motyw jako tło: pas przyklejony do lewej krawędzi, wychodzi poza ekran. */
.scale-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.4vh;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.scale-backdrop .bar {
    display: block;
    height: 6vh;
    transform-origin: left;
    clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
    animation: draw-in 1.1s var(--ease) forwards;
    animation-delay: calc(var(--i) * 110ms);
    transform: scaleX(0);
}

.scale-backdrop [data-class="A"] .bar { width: 40%; background: var(--class-a); }
.scale-backdrop [data-class="B"] .bar { width: 50%; background: var(--class-b); }
.scale-backdrop [data-class="C"] .bar { width: 60%; background: var(--class-c); }
.scale-backdrop [data-class="D"] .bar { width: 70%; background: var(--class-d); }
.scale-backdrop [data-class="E"] .bar { width: 80%; background: var(--class-e); }
.scale-backdrop [data-class="F"] .bar { width: 90%; background: var(--class-f); }
.scale-backdrop [data-class="G"] .bar { width: 100%; background: var(--class-g); }

/* --- ekrany logowania / rejestracji --- */

.auth {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 1.25rem;
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 27rem;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 2rem 1.75rem 1.75rem;
    backdrop-filter: blur(14px);
}

.auth-card > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 1.75rem;
}

.auth-card h1 {
    margin: 0 0 0.4rem;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.lede {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.auth-card form { margin-top: 1.75rem; }

/* --- pola formularza --- */

.field { margin-bottom: 1.1rem; }

.field label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Podkreślenie rysuje się przy focusie tak samo jak słupki skali. */
.ctrl { position: relative; display: block; }

.ctrl input {
    width: 100%;
    padding: 0.7rem 0.8rem;
    background: var(--surface-raised);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
}

.ctrl input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); }

.ctrl-line {
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
}

.ctrl:focus-within .ctrl-line { transform: scaleX(1); }

.field .help {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.field-check {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin: 1.4rem 0;
}

.field-check input {
    margin: 0.15rem 0 0;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.field-check label {
    margin: 0;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted);
}

/* Oświadczenie przed eksportem: najbardziej brzemienny w skutki tekst na tej
   stronie, więc nie może wyglądać jak zgoda marketingowa. */
.declaration {
    border-left: 3px solid var(--accent);
    padding: 0.9rem 0 0.9rem 0.9rem;
    background: rgba(255, 255, 255, 0.02);
}

.declaration label { color: var(--text); }

.errors {
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;
    color: var(--danger);
}

.alert {
    margin-bottom: 1.25rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius);
    font-size: 0.87rem;
    line-height: 1.45;
    border: 1px solid;
}

.alert-error {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.alert-success {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.btn {
    /* Domyślnie szerokość treści; pełną szerokość biorą tylko przyciski
       w karcie logowania, gdzie formularz jest jedyną rzeczą na ekranie. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: filter 0.2s var(--ease), transform 0.2s var(--ease);
}

/* Ten sam przycisk bywa <button> i <a> — link musi zgubić podkreślenie
   i kolor akcentu, inaczej wygląda jak tekst na zielonym tle. */
a.btn { text-decoration: none; color: var(--accent-ink); }

.auth-card .btn { width: 100%; }

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

.alt {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline);
    font-size: 0.87rem;
    color: var(--text-muted);
    text-align: center;
}

.captcha { margin-bottom: 1.25rem; }

/* --- strona startowa --- */

.page {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.page > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--hairline);
}

.home-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vh 1.5rem;
    min-height: 100dvh;
}

.copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.enter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
}

.enter:hover { text-decoration: underline; text-underline-offset: 4px; }

@keyframes draw-in {
    from { transform: scaleX(0); opacity: 0.3; }
    to { transform: scaleX(1); opacity: 1; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* --- panel uprawnionego --- */

.panel {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.panel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--hairline);
    background: var(--surface);
}

.panel-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
}

.panel-email {
    color: var(--text-muted);
    /* Długie adresy nie mogą rozpychać paska na wąskim ekranie. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45vw;
}

.panel-link,
.panel-logout {
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.panel-link:hover,
.panel-logout:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

.panel-main {
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

/* Tabele panelu potrzebują więcej niż kolumna tekstu: przy dziewięciu
   kolumnach 60rem znaczyłoby przewijanie w bok przy każdym spojrzeniu. */
.panel-main.panel-wide { max-width: 84rem; }

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.panel-head h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
}

.empty {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 3rem 2rem;
    text-align: center;
}

.empty-scale {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 2rem;
}

.empty-scale .bar {
    display: block;
    height: 0.5rem;
    border-radius: 2px;
    transform-origin: left center;
    animation: draw-in 0.7s var(--ease) backwards;
    animation-delay: calc(var(--i) * 60ms);
}

.empty-scale .bar[data-class="A"] { width: 3rem;  background: var(--class-a); }
.empty-scale .bar[data-class="B"] { width: 4.5rem; background: var(--class-b); }
.empty-scale .bar[data-class="C"] { width: 6rem;  background: var(--class-c); }
.empty-scale .bar[data-class="D"] { width: 7.5rem; background: var(--class-d); }
.empty-scale .bar[data-class="E"] { width: 9rem;  background: var(--class-e); }
.empty-scale .bar[data-class="F"] { width: 10.5rem; background: var(--class-f); }
.empty-scale .bar[data-class="G"] { width: 12rem; background: var(--class-g); }

.empty-title {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.empty-lede {
    margin: 0 auto 1.75rem;
    max-width: 34rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

@media (max-width: 30rem) {
    .panel-bar { padding: 0.85rem 1rem; }
    .panel-main { padding: 1.75rem 1rem 3rem; }
    .panel-head h1 { font-size: 1.25rem; }
    .panel-head .btn,
    .quiz > .btn { width: 100%; align-self: stretch; }
    .empty { padding: 2rem 1.25rem; }
    .empty-scale { align-items: flex-start; }
}

/* --- lista projektów --- */

.project-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.project {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1rem 1.25rem;
}

.project-name { font-weight: 600; }

.project-meta {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.project-flag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    background: rgba(217, 179, 65, 0.15);
    color: var(--class-d);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --- kwalifikator --- */

.lede.narrow {
    max-width: 42rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0 0 2.5rem;
}

.back {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
}

.back:hover { color: var(--text); }

.quiz { display: flex; flex-direction: column; gap: 0.75rem; }

/* Kolumna flex rozciągnęłaby przycisk na całą szerokość pytań. */
.quiz > .btn {
    align-self: flex-start;
    margin-top: 0.75rem;
    padding-inline: 2.5rem;
}

.field-choice {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.1rem 1.25rem;
    margin: 0;
}

/* --- kwalifikacja: pytania w blokach --- */

/* Dziesięć ramek jedna pod drugą czytało się jak ściana, a formularz nie mówił,
   ile jeszcze zostało. Te same pytania, ta sama kolejność — tylko zebrane
   w trzy bloki po temacie, po dwa w rzędzie tam, gdzie się mieszczą. */
.quiz-block {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.25rem 1.5rem 1.5rem;
}

.quiz-block > h2 {
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.72rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-muted);
}

/* auto-fit zwija się do jednej kolumny sam, gdy zabraknie miejsca —
   bez osobnego progu w media query. */
.quiz-questions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.5rem 2.5rem;
}

/* Wewnątrz bloku pytanie nie potrzebuje własnej ramki: oddziela je odstęp,
   a ramka bloku i tak je obejmuje. */
.quiz-block .field-choice {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
    /* Pytania w jednym rzędzie mają różnej długości treść. Kolumna z odpowiedzią
       dosuniętą do dołu ustawia „Tak/Nie" w jednej linii — inaczej sąsiednie
       pary skakałyby względem siebie i trudno je było porównać wzrokiem. */
    display: flex;
    flex-direction: column;
}

/* Float był potrzebny, dopóki legenda przebijała krawędź fieldsetu.
   W kolumnie flex jest zwykłym elementem i float tylko by przeszkadzał. */
.quiz-block .field-choice legend {
    float: none;
    width: auto;
}

.quiz-block .field-choice > div { margin-top: auto; padding-top: 0.9rem; }

/* Kreska na zwykłym elemencie, nie na fieldsecie: legenda jest przez
   przeglądarki rysowana na jego górnej krawędzi i przykryłaby ją. */
.quiz-wide {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
}

/* Legenda domyślnie przebija górną krawędź fieldsetu. Float sprawia, że
   zachowuje się jak zwykły blok w środku, a reszta musi go wyczyścić. */
.field-choice legend {
    float: left;
    width: 100%;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
}

.field-choice legend + * { clear: both; }

.field-choice .help {
    display: block;
    margin: 0.4rem 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Widget rozwinięty renderuje pary input+label jako rodzeństwo, więc chip
   buduje się na etykiecie, a sam input chowamy poza ekran (nie display:none —
   ten wypadłby z nawigacji klawiaturą). */
.field-choice > div {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.field-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.field-choice input[type="radio"] + label {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}

.field-choice input[type="radio"] + label:hover { color: var(--text); }

.field-choice input[type="radio"]:checked + label {
    border-color: var(--accent);
    background: rgba(63, 191, 127, 0.12);
    color: var(--text);
}

.field-choice input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.field-choice .errors { margin-top: 0.75rem; }

/* --- werdykt kwalifikatora --- */

.verdict {
    border: 1px solid var(--hairline);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.5rem 1.75rem;
    max-width: 42rem;
}

.verdict-product { border-left-color: var(--class-g); }
.verdict-stage { border-left-color: var(--class-e); }
.verdict-review { border-left-color: var(--class-d); }

.verdict p { margin: 0 0 0.9rem; line-height: 1.65; }
.verdict p:last-child { margin-bottom: 0; }

.verdict-reason { font-size: 1rem; font-weight: 600; }
.verdict-note { color: var(--text-muted); font-size: 0.88rem; }

.verdict-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Krótka nazwa nie potrzebuje pola na całą szerokość panelu. */
.form-narrow { max-width: 30rem; }

.footnote {
    margin-top: 1.5rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.6;
    max-width: 42rem;
}

@media (max-width: 30rem) {
    .field-choice { padding: 1rem; }
    .verdict { padding: 1.25rem; }
    .project { padding: 0.9rem 1rem; }
}

/* --- plansza weryfikacji i panel administratora --- */

.wall-next { margin-top: 2.5rem; max-width: 42rem; }

.wall-next h2,
.section-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.section-title { margin-top: 2.5rem; }

.wall-next p { margin: 0 0 1.25rem; line-height: 1.65; font-size: 0.92rem; }

.wall-data {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0;
    font-size: 0.85rem;
}

.wall-data dt {
    color: var(--text-muted);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    align-self: center;
}

.wall-data dd { margin: 0; }

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.78rem; }
.break { word-break: break-all; }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
}

.card {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.5rem;
}

.card h2 { margin: 0 0 1rem; font-size: 0.95rem; }
.card .footnote { margin-top: 1.25rem; }

.sync-form {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.admin-nav { display: inline-flex; gap: 1.25rem; flex-wrap: wrap; }

/* --- lista kont: pasek zawężania --- */

/* Filtr nie chowa się pod „wyszukiwaniem zaawansowanym". Przy kilku tysiącach
   kont jest pierwszą rzeczą, po którą sięga administrator, a nie ostatnią. */
.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
}

.filter-field { display: flex; flex-direction: column; gap: 0.35rem; }
.filter-field.grow { flex: 1 1 18rem; }

.filter-field label {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.filter-field input,
.filter-field select {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    min-width: 11rem;
}

.filter-field.grow input { width: 100%; min-width: 0; }
.filter-actions { display: flex; align-items: center; gap: 1rem; }

.list-count {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.list-count strong { color: var(--text); }

/* Znaczniki stanu konta pod jego nazwą — ten sam układ co licznik listy,
   ale to nie licznik i nie może się z nim mylić w selektorach. */
.account-flags {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;
}

/* --- tabela panelu --- */

/* Szeroka tabela przewija się w swoim pudełku; strona nigdy nie jeździ w bok. */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

/* Nagłówek zostaje w miejscu przy przewijaniu — bez niego po dwudziestu
   wierszach nie wiadomo już, co która kolumna znaczy. */
.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 0.7rem 0.9rem;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--hairline);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.data-table thead th a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
    text-decoration: none;
}

.data-table thead th a:hover { color: var(--text); }
.data-table thead th.is-sorted { color: var(--text); }
.sort-mark { opacity: 0.4; font-size: 0.9em; }
.is-sorted .sort-mark { opacity: 1; color: var(--accent); }

.data-table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
}

.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-raised); }

/* Wiersz, na którym ktoś czeka na decyzję: pasek z boku, nie tło. Ma się
   rzucać w oczy przy przewijaniu, a nie krzyczeć na całą szerokość. */
.row-waiting td:first-child { box-shadow: inset 3px 0 0 var(--class-d); }

.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .cell-name { min-width: 13rem; }

/* Znaczniki przy nazwisku łamały się w środku i wchodziły na sąsiednią
   kolumnę. Własna linia zamiast doklejania do nazwiska. */
.cell-name .project-flag,
.cell-name .role-flag { white-space: nowrap; }
.cell-name .project-flag { display: inline-block; margin: 0.3rem 0.4rem 0 0; }

/* Kolumna działań zostaje przy krawędzi także wtedy, gdy tabela przewija się
   w bok — przycisk, po który się tu przyszło, nie może uciec poza ekran. */
.data-table .cell-actions,
.data-table thead th.col-actions {
    position: sticky;
    right: 0;
    text-align: right;
    white-space: nowrap;
    background: var(--surface);
    box-shadow: inset 1px 0 0 var(--hairline);
}

.data-table thead th.col-actions { background: var(--surface-raised); z-index: 2; }
.data-table tbody tr:hover .cell-actions { background: var(--surface-raised); }
.data-table .cell-empty { padding: 2.5rem 0.9rem; text-align: center; color: var(--text-muted); }

.cell-note { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--text-muted); }

/* Wiersz z odpowiedziami kwalifikatora: domyślnie zwinięty, bo administrator
   wchodzi na kartę konta po jedną informację, a nie po komplet danych
   o dwudziestu cudzych mieszkaniach naraz. */
.answers-row td { padding-top: 0; }
.answers-row details { font-size: 0.82rem; }

.answers-row summary {
    cursor: pointer;
    color: var(--text-muted);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.answers-row summary:hover { color: var(--text); }
.answers-row details[open] summary { margin-bottom: 0.9rem; }
.answers-row .answers { margin: 0; }
.nowrap { white-space: nowrap; }
.none { color: var(--text-muted); }

.amount-plus { color: var(--accent); }
.amount-minus { color: var(--class-e); }

.pager { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap; }

.pager-state {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Odnośnik-przycisk drugiego planu dziedziczyłby ciemny tusz po `a.btn`
   i zniknąłby na ciemnym tle. */
a.btn-secondary { color: var(--text); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- status weryfikacji --- */

/* Kolor razem z nazwą. Sama kropka mówiła tylko „coś jest nie tak", a przy
   sześciu statusach (dok. 07 §11) administrator musi wiedzieć, co dokładnie. */
.status-verified,
.status-auto_verified { background: rgba(63, 191, 127, 0.16); color: var(--accent); }
.status-pending { background: var(--surface-raised); color: var(--text-muted); }
.status-manual_review { background: rgba(217, 179, 65, 0.18); color: var(--class-d); }
.status-conflict { background: rgba(214, 143, 62, 0.2); color: var(--class-e); }
.status-rejected { background: rgba(184, 76, 66, 0.22); color: var(--class-g); }
.chip-blocked { background: rgba(184, 76, 66, 0.22); color: var(--class-g); }

.flag-danger { background: rgba(184, 76, 66, 0.18); color: var(--class-g); }

.btn-small { padding: 0.45rem 0.9rem; font-size: 0.82rem; }
.btn-danger { background: var(--class-g); color: #fff; }

/* --- dziennik zdarzeń --- */

.event-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
}

.event {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.9rem;
    background: var(--surface);
    border-left: 2px solid var(--hairline);
}

.event-time { color: var(--text-muted); flex: none; }
.event-type { color: var(--text); flex: none; }
.event-updated { color: var(--accent); }
.event-failed { color: var(--danger); }
.event-context { color: var(--text-muted); display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* Para klucz–wartość z kontekstu zdarzenia. Klucz przygaszony, bo czyta się
   wartości — klucz jest tylko podpisem, który mówi, czego dotyczą. */
.event-pair {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-right: 0.9rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
}

.pair-key { color: var(--text-muted); }
.pair-key::after { content: ':'; }

@media (max-width: 40rem) {
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-field input, .filter-field select { min-width: 0; width: 100%; }
}

.role-flag {
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

a.project-name { color: var(--text); text-decoration: none; }
a.project-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

.project-card { margin-bottom: 1rem; }
.project-card .panel-head { margin-bottom: 1.25rem; }
.project-card h3 { margin: 0; font-size: 1rem; }

/* Odpowiedzi kwalifikatora czyta się jak listę kontrolną. Domyślnie jedna
   kolumna par etykieta–wartość; na szerokim ekranie dwie pary obok siebie.
   auto-fit tu nie zadziała: grid układa komórki po kolei, więc rozerwałby
   pary i wartość trafiłaby pod cudzą etykietę. */
.answers {
    gap: 0;
}

.answers dt,
.answers dd {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--hairline);
}

.answers dd { text-align: right; }

@media (min-width: 48rem) {
    .answers {
        grid-template-columns: auto 1fr auto 1fr;
        column-gap: 2.5rem;
    }
}

/* --- karta projektu (schemat pól) --- */

.alert-info {
    border-left: 3px solid var(--class-c);
    background: rgba(143, 174, 79, 0.08);
    color: var(--text);
}

.legend {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Kolory grup są celowo z tej samej palety co klasy energetyczne — panel ma
   wyglądać jak jeden produkt, a nie jak zlepek ekranów. */
.chip-klient { background: rgba(76, 154, 92, 0.18); color: var(--class-b); }
.chip-audytor { background: rgba(214, 143, 62, 0.18); color: var(--class-e); }
.chip-wyliczane { background: rgba(63, 191, 127, 0.15); color: var(--accent); }
.chip-systemowe { background: var(--surface-raised); color: var(--text-muted); }

.section-card { margin-bottom: 1rem; }
.section-card h2 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 0.6rem; }

.section-desc {
    margin: 0 0 1.25rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Tabela pól bywa szeroka — przewija się w swoim pudełku, nie rozpycha strony. */
.fields {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    display: block;
    overflow-x: auto;
}

.fields thead th {
    text-align: left;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.fields td {
    padding: 0.6rem 0.75rem 0.6rem 0;
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
}

.fields tbody tr:last-child td { border-bottom: 0; }

.field-label { font-weight: 500; }
.field-label abbr { color: var(--accent); text-decoration: none; margin-left: 0.15rem; }

.field-unit {
    margin-left: 0.4rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.field-help {
    display: block;
    margin-top: 0.25rem;
    max-width: 32rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

.dep {
    display: inline-block;
    margin: 0 0.3rem 0.3rem 0;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--hairline);
    border-radius: 3px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.dep-none { color: var(--hairline); }
.dep-fixed { color: var(--text-muted); font-size: 0.72rem; }
.xml-path { color: var(--text-muted); font-size: 0.7rem; word-break: break-all; }

/* --- formularz sekcji --- */

.audience-note {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

.section-form { max-width: 42rem; }
.section-form .field { margin-bottom: 1.25rem; }

/* Pole zablokowane ma wyglądać na świadomie wyłączone, nie na zepsute. */
.section-form .is-readonly,
.section-form :disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.section-form select {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
}

.section-form textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.6;
    resize: vertical;
}

.row-card {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.25rem 1.5rem;
    margin: 0 0 1rem;
}

.row-card legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 1rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.row-card legend + * { clear: both; }

.progress {
    display: inline-block;
    margin-right: 0.6rem;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
}

.progress-done { background: rgba(63, 191, 127, 0.15); color: var(--accent); }
.progress-part { background: rgba(217, 179, 65, 0.15); color: var(--class-d); }
.progress-none { background: var(--surface-raised); color: var(--text-muted); }

.section-card h2 a { color: var(--text); text-decoration: none; }
.section-card h2 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* --- zaproszenie klienta --- */

.invite-card { margin-bottom: 1.5rem; }
.invite-card h2 { margin: 0 0 0.75rem; font-size: 1rem; }

.invite-form {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.invite-form .field { flex: 1 1 18rem; margin: 0; }
.invite-list { margin-top: 1rem; }
.invite-live { color: var(--accent); }
.invite-dead { color: var(--text-muted); text-decoration: line-through; }

/* --- widoki klienta --- */

.client {
    padding: 4vh 1.5rem;
    min-height: 100dvh;
}

.client-page {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
}

.client-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--hairline);
}

.client-page h1 { margin: 0 0 1rem; font-size: 1.5rem; }
.client-page h2 { margin: 0 0 1.25rem; font-size: 1rem; }
.client-page .section-card { margin-bottom: 1rem; }

.client-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.btn-secondary {
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--hairline);
}

@media (max-width: 30rem) {
    .client { padding: 2.5vh 1rem; }
    .client-actions .btn { width: 100%; }
}

/* --- pliki --- */

.upload-form {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--hairline);
}

.upload-form .field { margin: 0; flex: 0 1 auto; }
.upload-form input[type="file"] { color: var(--text-muted); font-size: 0.85rem; max-width: 100%; }

.media-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.media-item {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface-raised);
}

.media-kind {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex: none;
}

.media-name { font-size: 0.9rem; flex: 1 1 12rem; word-break: break-all; }

.media-meta {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.media-delete { margin: 0; }

/* --- wynik obliczeń --- */

.result-card { margin-bottom: 1.5rem; }
.result-card .panel-head { margin-bottom: 1.25rem; }
.result-card h2 { margin: 0; font-size: 1rem; }
.result-card form { margin: 0; }

.indicators {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.indicator {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface-raised);
}

.indicator-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.indicator-unit {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.indicator-label {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Rozbicie miesięczne: słupki tą samą kreską co skala klas na stronie
   głównej — panel ma wyglądać jak jeden produkt. */
.months {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.35rem;
    align-items: end;
    margin-bottom: 2rem;
    min-height: 8rem;
}

.month {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
    height: 100%;
}

.month-bar {
    width: 100%;
    height: var(--h, 0%);
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(to top, var(--class-a), var(--class-c));
    transform-origin: bottom;
    animation: grow-up 0.5s var(--ease) backwards;
}

.month-name {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6rem;
    color: var(--text-muted);
}

.month-value {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.58rem;
    color: var(--hairline);
}

@keyframes grow-up {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@media (max-width: 40rem) {
    .months { min-height: 6rem; gap: 0.2rem; }
    .month-value { display: none; }
}

/* --- pobieranie danych firmy --- */

.nip-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

.nip-status { margin: 0; }
.nip-error { color: var(--danger); }

/* --- bramka eksportu --- */

.export-card { margin-bottom: 1.5rem; }
.export-card h2 { margin: 0; font-size: 1rem; }

.gate {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gate-item {
    display: grid;
    grid-template-columns: 1.35rem 1fr;
    gap: 0.15rem 0.75rem;
    align-items: baseline;
    font-size: 0.88rem;
}

.gate-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.gate-ok .gate-mark { background: var(--accent); color: var(--accent-ink); }
.gate-fail .gate-mark { background: rgba(184, 76, 66, 0.2); color: var(--class-g); }
.gate-fail .gate-desc { color: var(--text-muted); }

.gate-reason {
    grid-column: 2;
    color: var(--class-e);
    font-size: 0.78rem;
    line-height: 1.5;
}

.event-success { color: var(--accent); }
.event-pending { color: var(--class-d); }

/* Która wersja pliku obowiązuje. Zastąpione są wyszarzone, a nie ukryte:
   historia ma być widoczna, tylko nie ma udawać wersji bieżącej. */
.export-version {
    flex: none;
    font-size: .82em;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.export-current { color: var(--accent); font-weight: 600; }
.export-superseded { color: var(--text-muted); }

/* --- spostrzeżenia walidacyjne --- */

.sev-ok { background: rgba(63, 191, 127, 0.15); color: var(--accent); }
.sev-uwaga { background: rgba(217, 179, 65, 0.18); color: var(--class-d); }
.sev-ostrzezenie { background: rgba(201, 107, 62, 0.18); color: var(--class-f); }
.sev-blad { background: rgba(184, 76, 66, 0.2); color: var(--class-g); }

.issues-card { margin-bottom: 1.5rem; }
.issues-card h2 { margin: 0; font-size: 1rem; }

.issues {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Kolor niesie kreska z lewej — to samo rozwiązanie co przy werdykcie
   kwalifikatora, żeby cały panel czytało się tak samo. */
.issue {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.2rem 0.9rem;
    align-items: baseline;
    padding: 0.7rem 1rem;
    border: 1px solid var(--hairline);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--surface-raised);
    font-size: 0.86rem;
}

.sev-line-uwaga { border-left-color: var(--class-d); }
.sev-line-ostrzezenie { border-left-color: var(--class-f); }
.sev-line-blad { border-left-color: var(--class-g); }

.issue-value {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.issue-message {
    grid-column: 2 / -1;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

/* --- arkusz reguł --- */

.rule-card { margin-bottom: 1rem; }
.rule-card h2 { margin: 0; font-size: 0.95rem; }
.rule-form .fields { margin-bottom: 1rem; }

.rule-form input[type="text"],
.rule-form select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
}

.rule-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
    .scale-row .bar,
    .scale-backdrop .bar,
    .empty-scale .bar { animation: none; transform: scaleX(1); opacity: 1; }
    .month-bar { animation: none; transform: scaleY(1); }
    .status-tag .dot { animation: none; }
    .ctrl-line { transition: none; }
}

@media (max-width: 30rem) {
    .auth-card {
        padding: 1.5rem 1.25rem;
        border-radius: 10px;
    }

    .auth-card h1 { font-size: 1.3rem; }
    .auth { padding: 2.5vh 1rem; }

    /* Karta zajmuje niemal całą szerokość, więc pas schowany dokładnie za nią
       byłby niewidoczny. Wyższe słupki wychodzą nad kartę i pod nią. */
    .scale-backdrop {
        opacity: 0.16;
        gap: 0.8vh;
    }

    .scale-backdrop .bar { height: 11vh; }
}

/* Pasek trybu testowego. Atrapa płatności nadaje kredyty bez pieniędzy —
   ma o sobie mówić na każdym ekranie, a nie działać po cichu. */
.atrapa-bar {
    margin: 0;
    padding: 0.5rem 1.5rem;
    background: var(--accent);
    color: #12181a;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}