/* ============================================================
   CASCADE LAYERS — vezi docs/REDESIGN_PLAYBOOK.md.
   Precedență (ultimul câștigă): vendor < app < kf (tokens..utilities).
     vendor      — Bootstrap (importat aici → layered, ca să nu mai bată stilul nostru)
     app         — STYLESHEET-UL PRINCIPAL, VIU (fostul „Battle Broadcast", secțiunile 1-16
                   + tokenii lui :root). NU e throwaway: e re-skinat „Kinetic Sharp" prin
                   blocul nelayered de remap GLOBAL de tokeni (vezi ~2850). ⚠️ NU-l goli /
                   șterge — ar șterge tot site-ul. „Faza 6 = empty legacy" din playbook = OBSOLET.
     tokens..utilities — stratul kf: tokenii --kf-* + base/layout/components/utilities adăugate.
   ============================================================ */
@layer vendor, app, tokens, base, layout, components, utilities;
@import url("../vendor-local/bootstrap/bootstrap.min-0hrUfGv.css") layer(vendor);

@layer app {

/* ============================================================
   DANCE CONTEST PLATFORM — Custom CSS  "Battle Broadcast"
   Brutalist street-scoreboard aesthetic.
   Newsprint paper · ink-black rules · Flash-pink accent ·
   Volt-lime for live/active · Archivo 900 display ·
   Space Mono numerals · sharp corners · hard offset shadows.
   Built on Bootstrap 5.3.3 but overrides it wholesale.

   STRUCTURA:
     1.  TOKENS          — variabile CSS globale (Cypher palette)
     2.  LAYOUT          — structura paginilor + navbar
     3.  TABLES          — tabele dense + stat columns + rank
     4.  BADGES & STATUS — badge-uri colorate + valori semantice
     5.  PILLS & FILTERS — pills cu count, filtre
     6.  CHIPS           — competitor/judge chips inline
     7.  CARDS           — carduri concurs hub
     8.  BRACKET         — vizualizare bracket
     9.  FORMS           — formulare inline compacte
    10.  JUDGE PAGE      — pagina judecatorului (mobile-first)
    11.  ADMIN           — panou admin
    12.  PUBLIC          — pagina publica /concursuri
    13.  UTILITIES       — clase helper
    14.  RANKING & TIER  — leaderboard, stat blocks, tier list, ELO
    15.  AUTH / ERROR    — login (.login-page) + pagini eroare (.error-page)
    16.  MOBILE / RESP.  — utilitare font, card-reflow tabele, nav + touch targets (mobile-first)
   ============================================================ */


/* === 1. TOKENS ============================================= */

:root {
    color-scheme: light dark;   /* native form/scrollbar theming */

    /* ============================================================
       THREE-TIER TOKENS — vezi skill `design-token-theming`.
       1) RAW (--c-*)      valori brute, fără rol — sursa unică de culoare
       2) SEMANTIC         --bg/--surface/--text/--border-*/--accent/... ← componentele folosesc ASTEA
       3) (component)      rar, doar la nevoie reală
       Tema = re-mapează SEMANTIC → RAW. Light = :root. Dark = [data-theme="dark"].
       Tokenii „value-named" istorici (--ink/--paper/--fg*/--card) sunt ALIASURI care
       țintesc rolurile → flipează corect în dark fără să rescriem fiecare componentă.
       ============================================================ */

    /* ---------- TIER 1 · RAW PALETTE ---------- */
    --c-ink-950: #0c0a08;   /* darkest — dark-mode page bg */
    --c-ink-900: #141210;   /* near-black — text / ink surfaces / strong borders */
    --c-ink-800: #1c1a16;   /* dark surface — dark-mode cards */
    --c-ink-700: #4d463d;   /* secondary text */
    --c-ink-500: #837b6e;   /* muted text / labels */
    --c-ink-300: #b3a994;   /* faint / units */
    --c-paper:   #f5f1e8;   /* warm newsprint — page bg */
    --c-paper-2: #ede7d8;   /* deeper newsprint — zebra / blocks */
    --c-card:    #fffdf7;   /* off-white card */
    --c-hair:    #d8cfbd;   /* hairline */
    --c-subtle:  #e3dccc;
    --c-white:   #ffffff;
    /* brand accents (≈ theme-invariant) */
    --c-flash:        #ff2e63;
    --c-flash-strong: #d40d44;
    --c-flash-soft:   #ffd9e3;
    --c-volt:         #d8ff3e;
    --c-volt-ink:     #1a1d00;
    /* dark-mode-only neutrals */
    --c-dark-hair: #34302a;   /* hairline on dark */
    --c-dark-line: #4a443c;   /* strong border on dark */

    /* ---------- TIER 2 · SEMANTIC ROLES — LIGHT (default) ---------- */
    --bg:              var(--c-paper);     /* page background */
    --bg-elevated:     var(--c-paper-2);   /* zebra rows / sunk blocks */
    --surface:         var(--c-card);      /* cards, panels */
    --surface-2:       var(--c-paper-2);   /* secondary surface */
    --surface-inverse: var(--c-ink-900);   /* dark strips: navbar, btn-ink, active */
    --text:            var(--c-ink-900);   /* primary text */
    --text-secondary:  var(--c-ink-700);
    --text-muted:      var(--c-ink-500);
    --text-faint:      var(--c-ink-300);
    --text-on-inverse: var(--c-paper);     /* text on surface-inverse */
    --border-hair:     var(--c-hair);      /* hairline borders (role: rămâne numele) */
    --border-subtle:   var(--c-subtle);
    --border-strong:   var(--c-ink-900);   /* 2px ink frames */
    --accent:          var(--c-flash);
    --accent-strong:   var(--c-flash-strong);
    --accent-soft:     var(--c-flash-soft);
    --accent-text:     var(--c-white);     /* text on accent */
    --live:            var(--c-volt);
    --live-ink:        var(--c-volt-ink);
    --shadow-color:    var(--c-ink-900);   /* hard offset shadow color */
    --focus-ring:      var(--c-flash);

    /* ---------- LEGACY ALIASES (țintesc rolurile; flipează în dark) ---------- */
    --primary:        var(--accent);
    --primary-strong: var(--accent-strong);
    --primary-soft:   var(--accent-soft);
    --volt:           var(--live);          /* electric lime — LIVE / highlight / hover */
    --volt-ink:       var(--live-ink);
    --ink:            var(--c-ink-900);     /* raw ink — decorativ; pt TEXT folosește --text */
    --paper:          var(--bg);            /* attn: pt text-pe-inchis folosește --text-on-inverse */
    --paper-2:        var(--bg-elevated);
    --card:           var(--surface);
    --fg1: var(--text);  --fg2: var(--text-secondary);  --fg3: var(--text-muted);  --fg4: var(--text-faint);

    /* ---------- SEMANTIC ---------- */
    --success:      #0f8a3d;
    --danger:       #d92121;
    --warning:      #d98a00;
    --neutral:      #837b6e;
    --success-soft: #dff3e3;
    --danger-soft:  #fbe0e0;
    --warning-soft: #fbeccd;
    --on-warning-soft: #8a5a00;   /* text amber pe warning-soft (tie) */
    --golden-soft:  #ffeec2;      /* bg bandă rundă de departajare (golden) — theme-INDEPENDENT, ca .sc-round--c* */
    --on-golden:    #6b4e00;      /* text pe golden-soft */
    --sc-round-ink: #22303f;      /* text pe tintele pastel .sc-round--c* — theme-INDEPENDENT (altfel --fg2/--fg3 flipează deschis în dark → invizibil) */

    /* ---------- WINNER (token DEDICAT, NU --success semantic) ----------
       Câștigătorul citește DOAR aceste 4 roluri → re-skin global dintr-un loc.
       Default = verdele legacy; blocul global kf le remapează la lime. */
    --winner-bg:   var(--success-soft);
    --winner-fg:   var(--success);
    --winner-edge: var(--success);
    --winner-ink:  var(--success);

    /* ---------- CONTEST STATUS ---------- */
    --status-draft-bg:    #e8e2d4; --status-draft-fg:    #6b6158;
    --status-open-bg:     #dff3e3; --status-open-fg:     #0f8a3d;
    --status-closed-bg:   #dfe9ff; --status-closed-fg:   #2f6df0;
    --status-active-bg:   #d8ff3e; --status-active-fg:   #141210;  /* LIVE = volt */
    --status-done-bg:     #ede7d8; --status-done-fg:     #837b6e;

    /* ---------- BATTLE STATUS ---------- */
    --battle-pending-bg:    #e8e2d4; --battle-pending-fg:    #6b6158;
    --battle-progress-bg:   #d8ff3e; --battle-progress-fg:   #141210;
    --battle-completed-bg:  #dff3e3; --battle-completed-fg:  #0f8a3d;

    /* ---------- CATEGORY-ROW TINTS ----------
       Foste „dance-style badge" bg-uri; consumate acum DOAR de .category-row--0..5 ca tentă.
       Badge-ul real de stil = .style-pill (hue din nume). -fg-urile + slots 6/7 = moarte (scoase). */
    --style0-bg: #ffd9e3; --style1-bg: #dfe9ff; --style2-bg: #d3f3e6;
    --style3-bg: #ffe9c9; --style4-bg: #e8ddff; --style5-bg: #ffdcd2;

    /* ---------- TIER (S/A/B/C/D) ---------- */
    --tier-s: #ff2e63; --tier-s-bg: #ffe4ec;
    --tier-a: #ff7a1a; --tier-a-bg: #ffeede;
    --tier-b: #e6b800; --tier-b-bg: #fff6d6;
    --tier-c: #2f6df0; --tier-c-bg: #e4edff;
    --tier-d: #9b9486; --tier-d-bg: #ece6d9;

    /* ---------- RANK / PODIUM ---------- */
    --rank-gold:   #c79200;
    --rank-silver: #8f8a7e;
    --rank-bronze: #b06a2c;
    --rank-4:      #6b7280;      /* neutru pt locul 4 pe podium (fără medalie) — text alb reads */

    /* ---------- TYPE ---------- */
    /* "Twemoji Country Flags" = polyfill steaguri (Windows n-are glife) — unicode-range îl
       limitează STRICT la codepoint-urile de steag, restul textului nu e afectat. */
    --font-display: "Twemoji Country Flags", "Archivo", system-ui, sans-serif;
    --font-sans:    "Twemoji Country Flags", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "Twemoji Country Flags", "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Compact type scale (keeps existing var names for template compatibility).
       Scală unică 3xs→10xl (F3 audit 2026-07-20): fostele ~40 valori literale de font-size au fost
       snap-uite la aceste trepte (diferențe mici ≤~0.8px la text; trepte NOI la display ca să nu
       sară mult). REUSE-FIRST: folosește un token de aici, NU font-size literal. */
    --font-3xs:  0.55rem;       /* ← .55/.56 */
    --font-2xs:  0.6rem;        /* 9.6px — micro badge/label; ← .62/.63/.64 */
    --font-xs:   0.7rem;        /* 11px — labels uppercase; ← .65/.66/.67/.68/.72 */
    --font-sm:   0.75rem;       /* 12px — text secundar; ← .74/.76 */
    --font-md:   0.8125rem;     /* 13px — tabele dense; ← .78/.8/.82 */
    --font-base: 0.875rem;      /* 14px — text normal; ← .85 */
    --font-lg:   1rem;          /* ← .95/1/1.02/1.05 */
    --font-xl:   1.125rem;      /* ← 1.1/1.15 */
    --font-2xl:  1.3rem;        /* ← 1.25/1.3/1.35 */
    --font-3xl:  1.5rem;        /* ← 1.4/1.5 */
    --font-4xl:  1.65rem;       /* ← 1.6/1.65 */
    --font-5xl:  1.85rem;       /* ← 1.8/1.85 */
    --font-6xl:  2rem;          /* ← 2 */
    --font-7xl:  2.25rem;       /* ← 2.2 */
    --font-8xl:  2.5rem;        /* ← 2.4/2.5/2.6 */
    --font-9xl:  3rem;          /* ← 3 */
    --font-10xl: 5rem;          /* ← 5 (display uriaș) */

    /* ---------- SPACING ---------- */
    --pad-cell:  0.35rem 0.5rem;    /* padding celula tabel compact */
    --pad-badge: 0.15rem 0.45rem;
    --pad-pill:  0.2rem 0.6rem;
    --pad-chip:  0.2rem 0.5rem;
    --pad-card:  0.5rem 0.75rem;
    --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;  --space-4: 1rem;
    /* Breakpoints (referință — CSS nu acceptă var() în @media): mobil ≤640px, tabletă ≤992px */
    --tap-min: 44px;     /* touch target minim (a11y) */
    /* Înălțimea navbarului. Navbarul e `position: sticky; top: 0` → ORICE alt element lipicios
       trebuie să se oprească SUB el, deci are nevoie de valoarea asta, nu de un 58px copiat. */
    --nav-h: 58px;

    /* ---------- RADII (sharp) ---------- */
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 3px;
    /* Bordura inputurilor de înscriere = punctată + colțuri rotunjite (excepție voită de la kf-sharp,
       NU e zeroit în tema kf → rămâne rotund pe /concursuri). */
    --entry-radius: 6px;

    /* ---------- BORDERS ---------- */
    --bw:        2px;
    --bw-hair:   1px;
    --border:    1px solid var(--border-hair);  /* hairline — compat cu codul existent */
    --border-dark: 2px solid var(--border-strong);

    /* ---------- ELEVATION — hard offset, no blur ---------- */
    --shadow-hard:    4px 4px 0 0 var(--shadow-color);
    --shadow-hard-sm: 2px 2px 0 0 var(--shadow-color);

    /* ---------- ZEBRA + HOVER rows ---------- */
    --row-odd-bg:   var(--bg-elevated);
    --row-hover-bg: var(--live);
}

/* ---------- DARK THEME — re-mapează DOAR rolurile semantice (TIER 2) ----------
   Componentele nu se ating. Badge-urile (status/style/tier) rămân intenționat vii
   (pastel pe fundal închis = pop). Vezi skill `design-token-theming`. */
[data-theme="dark"] {
    --bg:              var(--c-ink-950);   /* #0c0a08 page */
    --bg-elevated:     var(--c-ink-900);   /* zebra rows */
    --surface:         var(--c-ink-800);   /* #1c1a16 cards */
    --surface-2:       var(--c-ink-900);
    --surface-inverse: #000000;            /* navbar / btn-ink strip */
    --text:            var(--c-paper);     /* light text */
    --text-secondary:  #d2caba;
    --text-muted:      #a79e8d;
    --text-faint:      #8b8274;
    --text-on-inverse: var(--c-paper);     /* stays light on dark strips */
    --border-hair:     var(--c-dark-hair); /* #34302a */
    --border-subtle:   #2a2620;
    --border-strong:   var(--c-dark-line); /* #4a443c — frames visible on dark */
    --shadow-color:    #000000;            /* hard offset shadow */
    /* accents pop on dark as-is; soften the large alert fills + lift status hues */
    --success: #4cc97e; --danger: #ff6b6b; --warning: #f0b541;
    --success-soft: #14301f; --danger-soft: #3a1717; --warning-soft: #332611;
}

/* System preference when the user has NOT chosen (no-JS / first paint fallback). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: var(--c-ink-950); --bg-elevated: var(--c-ink-900);
        --surface: var(--c-ink-800); --surface-2: var(--c-ink-900); --surface-inverse: #000000;
        --text: var(--c-paper); --text-secondary: #d2caba; --text-muted: #a79e8d; --text-faint: #8b8274;
        --text-on-inverse: var(--c-paper);
        --border-hair: var(--c-dark-hair); --border-subtle: #2a2620; --border-strong: var(--c-dark-line);
        --shadow-color: #000000;
        --success: #4cc97e; --danger: #ff6b6b; --warning: #f0b541;
        --success-soft: #14301f; --danger-soft: #3a1717; --warning-soft: #332611;
    }
}

/* ---------- BOOTSTRAP 5.3 THEME BRIDGE ----------
   Utilitățile Bootstrap (.text-muted, .text-secondary, .nav-tabs, .bg-light, dropdown…) se
   colorează prin --bs-*; le legăm la tokenii NOȘTRI ca să flipeze cu [data-theme] pe tot site-ul.
   Selectorul include [data-bs-theme] ca să bată regulile proprii Bootstrap dark (specificitate
   egală → câștigă app.css, încărcat DUPĂ bootstrap.min.css). Brand newsprint/ink păstrat. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg:                  var(--bg);
    --bs-body-color:               var(--text);
    --bs-emphasis-color:           var(--text);
    --bs-heading-color:            var(--text);
    --bs-secondary-color:          var(--text-muted);   /* .text-muted, .text-secondary */
    --bs-secondary-bg:             var(--surface-2);
    --bs-tertiary-color:           var(--text-faint);
    --bs-tertiary-bg:              var(--surface-2);
    --bs-border-color:             var(--border-hair);
    --bs-border-color-translucent: var(--border-hair);
    --bs-link-color:               var(--accent);
    --bs-link-hover-color:         var(--accent-strong);
}
/* Utilitățile pe RGB nu citesc tokenii direct → override scurt cu tokeni (cele folosite). */
.bg-light     { background-color: var(--surface-2) !important; }
.bg-secondary { background-color: var(--surface-inverse) !important; color: var(--text-on-inverse) !important; }

/* Base overrides — Bootstrap bg-light → paper newsprint */
html, body {
    font-family: var(--font-sans);
    background: var(--paper);
    color: var(--fg1);
}
/* Alert bootstrap adaptat la tokens */
.alert-danger   { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger);  }
.alert-success  { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.alert-warning  { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }

/* Bootstrap form-control/-select adaptate la temă (altfel rămân albe în dark).
   Override-uri mai specifice (ex. .login-card .form-control) au prioritate. */
.form-control, .form-select {
    background-color: var(--surface);
    border-color: var(--border-hair);
    color: var(--text);
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 .15rem var(--accent-soft);
}


/* === 2. LAYOUT ============================================= */

/* Navbar — Kinetic Sharp (light × brutalist: flat, hairline 1px, accent lime) */
.app-nav {
    background: var(--kf-surface-bright);
    border-bottom: var(--kf-border);
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.app-nav__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
}
.app-nav__brand {
    font-family: var(--kf-font-display);
    font-weight: 900;
    font-size: var(--font-3xl);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--kf-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color .1s;
}
.app-nav__brand .bi-trophy-fill { color: var(--kf-accent); }
.app-nav__brand:hover { color: var(--kf-accent); }

.app-nav__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.app-nav__link {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--kf-text-variant);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border-radius: var(--kf-r-sm);
    transition: color .1s, background .1s;
}
.app-nav__link:hover { color: var(--kf-text); background: var(--kf-tint); }
/* Logout = form POST cu CSRF (nu link GET); form-ul nu strică flex-ul, butonul arată ca linkul. */
.app-nav__logout { display: contents; }
.app-nav__link--btn { background: none; border: 0; font: inherit; font-size: var(--font-md); font-weight: 600; cursor: pointer; }
.app-nav__link--active {
    color: var(--kf-accent);
    box-shadow: inset 0 -2px var(--kf-accent-strip);
}

.app-nav__btn {
    font-size: var(--font-sm);
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border: var(--kf-border);
    border-radius: var(--kf-r-sm);
    background: transparent;
    color: var(--kf-text);
    text-decoration: none;
    transition: background .1s, color .1s, border-color .1s;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
}
.app-nav__btn:hover { background: var(--kf-text); color: var(--kf-surface-bright); }
.app-nav__btn--flash {
    background: var(--kf-primary);
    border-color: var(--kf-primary);
    color: var(--kf-on-primary);
}
.app-nav__btn--flash:hover {
    background: var(--kf-primary-solid);
    border-color: var(--kf-primary-solid);
    color: var(--kf-on-solid);
}
.app-nav__theme {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; line-height: 1;
    background: transparent; border: var(--kf-border);
    border-radius: var(--kf-r-sm); color: var(--kf-text);
    cursor: pointer; transition: background .1s, color .1s, border-color .1s;
}
.app-nav__theme:hover { background: var(--kf-text); border-color: var(--kf-text); color: var(--kf-surface-bright); }

/* Login inline din bară — dropdown flat (hairline 1px) */
.app-nav__login {
    min-width: 16rem; padding: .75rem;
    border: var(--kf-border); border-radius: var(--kf-r-sm);
    box-shadow: none;
}
.app-nav__login-lbl {
    display: block; margin-bottom: .4rem;
    font-family: var(--kf-font-display); font-weight: 900; font-size: var(--font-2xs);
    text-transform: uppercase; letter-spacing: .08em; color: var(--kf-accent);
}

.app-nav__user {
    font-size: var(--font-xs);
    color: var(--kf-text-variant);
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: color .1s;
}
.app-nav__user:hover { color: var(--kf-accent); }
.app-nav__role {
    font-family: var(--kf-font-mono);
    font-size: var(--font-2xs);
    background: var(--kf-surface-2);
    border: 1px solid var(--kf-line);
    padding: 0 5px;
    border-radius: var(--kf-r-sm);
    color: var(--kf-text-variant);
    letter-spacing: .05em;
}

/* Wrapper principal */
.app-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Pagina judecatorului — fara sidebar, full screen */


/* Container login — latime fixa centrata */
.login-container { max-width: 420px; }

/* Container formular ingust */


/* Header de pagina compact */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.page-header__title {
    font-family: var(--font-display);
    font-size: var(--font-base);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}


/* === 3. TABLES ============================================= */

/* Tabel compact */






/* Coloane fixe frecvente */



.col-actions { width: 100px; text-align: right; white-space: nowrap; }

/* Rank column */

.rank-1         { color: var(--rank-gold); }
.rank-2         { color: var(--rank-silver); }
.rank-3         { color: var(--rank-bronze); }

/* Stat column */

.stat-value { font-weight: 700; color: var(--fg1); }


/* Results table */









/* Section header */



/* === 4. BADGES & STATUS ==================================== */

/* Badge status concurs */
.badge-status {
    font-family: var(--font-display);
    font-size: var(--font-xs);
    font-weight: 900;
    padding: var(--pad-badge);
    border-radius: var(--radius-md);
    display: inline-block;
    white-space: nowrap;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.badge-status--draft    { background: var(--status-draft-bg);   color: var(--status-draft-fg); }
.badge-status--open     { background: var(--status-open-bg);    color: var(--status-open-fg); }
.badge-status--closed   { background: var(--status-closed-bg);  color: var(--status-closed-fg); }
.badge-status--active   { background: var(--status-active-bg);  color: var(--status-active-fg); }
.badge-status--done     { background: var(--status-done-bg);    color: var(--status-done-fg); }

/* Badge status battle/bout */

.badge-battle--pending   { background: var(--battle-pending-bg);   color: var(--battle-pending-fg); }
.badge-battle--progress  { background: var(--battle-progress-bg);  color: var(--battle-progress-fg); }
.badge-battle--completed { background: var(--battle-completed-bg); color: var(--battle-completed-fg); }

/* Badge faza bracket */


/* Badge categorie */
.badge-category {
    font-size: var(--font-xs);
    font-weight: 700;
    padding: var(--pad-badge);
    border-radius: var(--radius-md);
    background: var(--surface-inverse);
    color: var(--text-on-inverse);
    text-decoration: none;
    display: inline-block;
    transition: background 0.1s;
}
.badge-category:hover { background: var(--primary); color: var(--c-white); }

/* Badge metoda calificare */



/* Valori semantice */






/* === 5. PILLS & FILTERS ==================================== */

.filter-pill {
    font-size: var(--font-sm);
    padding: var(--pad-pill);
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-strong);
    background: var(--card);
    color: var(--fg2);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
}
.filter-pill:hover  { background: var(--volt); color: var(--volt-ink); border-color: var(--volt-ink); }
.filter-pill.active { background: var(--surface-inverse); color: var(--text-on-inverse); }

/* Rândul tab-uri + filtru (/concursuri): nav-ul și pill-ul „Concursurile mele" pe aceeași linie,
   pill-ul aliniat dreapta, la aceeași înălțime vizuală cu tab-urile. */
.tabs-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs-row .folder-tabs { margin-bottom: 0; }
.tabs-row .filter-pill { padding: .4rem .85rem; font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }



/* === 5b. FOLDER TABS (segmented page tabs, lipite de conținut) === */
.folder-tabs {
    display: flex; flex-wrap: wrap; gap: .25rem; align-items: flex-end;
    border-bottom: 2px solid var(--border-strong);
    margin-bottom: 1rem;
}
.folder-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: .4rem .85rem; margin-bottom: -2px;        /* acoperă rigla containerului */
    background: transparent; border: 2px solid transparent; border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
    letter-spacing: .05em; font-size: var(--font-xs); line-height: 1.3;
    color: var(--text-muted); text-decoration: none; cursor: pointer;
    transition: background .1s, color .1s;
}
.folder-tab:hover  { background: var(--volt); color: var(--volt-ink); }
.folder-tab.active { background: var(--surface); border-color: var(--border-strong); color: var(--text); }


/* === 6. CHIPS ============================================== */

/* Chip competitor inline */



/* Chip judecator */
.judge-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-sm);
    padding: var(--pad-chip);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--card);
    color: var(--fg1);
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
    line-height: 1.4;
}
.judge-chip:hover { background: var(--volt); color: var(--volt-ink); border-color: var(--volt-ink); }

.judge-chip .chip-system  { font-size: var(--font-xs); color: var(--fg3); background: var(--paper-2); padding: 0 3px; border-radius: var(--radius-sm); }
.judge-chip__del-form { display: inline; line-height: 0; }
.judge-chip__del { border: 0; background: transparent; color: var(--danger); padding: 0; line-height: 1; cursor: pointer; font-size: var(--font-xs); }
.judge-chip:hover .judge-chip__del { color: var(--volt-ink); }
/* Jurat marcat pentru eliminare (staged) — se aplică la „Salvează modificările" */


/* Hint jurați per categorie (panel: X/N roluri · mai alege …) */
.exhint { font-size: var(--font-xs); margin-bottom: 2px; min-height: 1em; }
.exhint--ok   { color: var(--success); }
.exhint--warn { color: var(--warning); }
.exhint--err  { color: var(--danger); font-weight: 600; }


/* === 7. CARDS — Hub organizator ============================= */

.hub-card {
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--card);
    transition: box-shadow .1s;
}
.hub-card:hover { box-shadow: var(--shadow-hard); }

/* Strip status colorat (top) */
.hub-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .28rem .75rem;
    font-family: var(--font-display);
    font-size: var(--font-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    border-bottom: 2px solid var(--border-strong);
}
.hub-strip--open   { background: var(--status-open-bg);   color: var(--status-open-fg); }
.hub-strip--closed { background: var(--status-closed-bg); color: var(--status-closed-fg); }
.hub-strip--active { background: var(--status-active-bg); color: var(--status-active-fg); }

/* Descriere concurs (sub hero, în metarow) */


/* Rândul de arhivă (.arch-*) trăiește ACUM într-un singur bloc, în secțiunea „Arhivă publică"
   de mai jos — căutați `--- Arhivă publică (/arhiva) ---`. Clasele vechi `hub-head`/`hub-thumb`
   au fost redenumite acolo (2026-07-27); `hub-card`/`hub-strip` de pe home sunt alt component. */

/* Acțiuni de stare pe rândul de categorie — următorul pas explicit */
.cat-actions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.cat-actions form { display: inline; margin: 0; }

/* === Cont organizator (profil) === */
.acct-card {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
    padding: .6rem .75rem; border: 2px solid var(--border-strong);
    border-radius: var(--radius-lg); background: var(--surface);
}
.acct-card__id { display: flex; align-items: center; gap: .55rem; flex: 1 1 auto; min-width: 0; }
.acct-card__ico { font-size: var(--font-4xl); color: var(--text-muted); }
.acct-card__name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: var(--font-base); color: var(--text); }
.acct-card__email { font-size: var(--font-sm); color: var(--text-secondary); }
.acct-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; padding-top: .6rem; margin-top: .5rem; border-top: 1px solid var(--border-hair); }
.acct-form__row { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 220px; }
.acct-form__lbl { font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
.acct-form__actions { flex: 0 0 auto; }





/* === 8. BRACKET ============================================ */

/* ── Pagina categorie LATĂ (fără sidebar, container extins pt bracket) ── */
.page-wide .app-wrap { max-width: 1600px; }

/* Filtrul „Ale mele" (mine-filter.js): body[data-mine-only] ascunde cardurile străine.
   CSS-driven — compune cu archive-filter.js (care umblă la style.display pe altă axă). */
body[data-mine-only] [data-mine="0"] { display: none !important; }

/* ── Strip categorii = TAB-URILE paginii de concurs (fostul topbar compact s-a dizolvat:
      antetul mare = .res-hero via _contest_head, categoria activă = .res-cat-head) ── */
/* Fără border-top (linia subțire dubla border-bottom-ul gros al .res-hero de deasupra);
   tab-urile stau lipite de linia groasă. Colțuri SHARP (radius 0) — brandul e brutalist. */
.cat-strip {
    display: flex; gap: .35rem; flex-wrap: wrap;
}
.res-cat-strip { margin-top: -.5rem; margin-bottom: .85rem; }
.cat-strip__item {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem; border-radius: 0;
    border: 1px solid var(--border-subtle); background: var(--paper);
    font-size: var(--font-xs); color: var(--fg2); text-decoration: none; white-space: nowrap;
}
.cat-strip__item:hover { border-color: var(--border-strong); }
.cat-strip__item--on { background: var(--surface-inverse); color: var(--text-on-inverse); border-color: var(--border-strong); }
.cat-strip__fmt { font-weight: 700; }
.cat-strip__top { font-size: var(--font-2xs); color: var(--fg4); }
.cat-strip__item--on .cat-strip__top { color: rgba(245, 241, 232, .6); }

.bk-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 96px;
    max-width: 190px;
}
.bk-col-label {
    font-family: var(--font-display);
    font-size: var(--font-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--fg3);
    text-align: center;
    padding: .35rem .5rem .5rem;
    border-bottom: 1px solid var(--border-hair);
    margin-bottom: .5rem;
}
.bk-col-label--active { color: var(--volt-ink); background: var(--volt); border-bottom-color: var(--volt-ink); }
.bk-col-label--done   { color: var(--success); border-bottom-color: var(--success); }

.bk-col-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Fiecare battle = un slot flex egal, conținut centrat → runda cu N/2 matchuri
   pică fix la mijlocul dintre cei 2 feederi din runda dinainte. */
.bk-match {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* ── PRIMUL RÂND (T32) = FĂRĂ overlap → conector OUTGOING curat din marginea feederului.
   Brațul pleacă din muchia dreaptă a cardului (left:100%) și ajunge la bara verticală (merge point)
   la --bk-firstarm. De acolo, o linie de legătură (--bk-childlink) merge până în cardul T16. */
.bk-col--first .bk-match--up::after,
.bk-col--first .bk-match--down::after {
    content: '';
    position: absolute;
    left: 100%;
    width: var(--bk-firstarm);
    height: 50%;
    border-right: 2px solid var(--border-subtle);
}
.bk-col--first .bk-match--up::after   { top: 50%;    border-top: 2px solid var(--border-subtle); }
.bk-col--first .bk-match--down::after { bottom: 50%; border-bottom: 2px solid var(--border-subtle); }
.bk-col--first .bk-match--straight::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    width: var(--bk-firstarm);
    border-top: 2px solid var(--border-subtle);
}
/* linia de legătură de la merge point în cardul copil (T16) — ca să nu fie lipit de bracket */
.bk-col--second .bk-match::before {
    content: '';
    position: absolute;
    left: calc(var(--bk-childlink) * -1);
    top: 50%;
    width: var(--bk-childlink);
    border-top: 2px solid var(--border-subtle);
}
.bk-col--second .bk-match--resolved::before { border-color: var(--success); }

/* ── COLOANELE 3+ = overlap → conector „merge" (.bk-merge) pe matchul avansat:
   o LINIE verticală întinsă între CENTRELE celor 2 feederi (25%→75%) + cot scurt în card.
   Capetele sunt pur PROCENTUALE (sloturile flex egale țin centrele la 25%/75% indiferent de
   înălțimea cardului — ex. nume pe 2 rânduri); linia trece PE SUB cardurile feeder
   (z-index: .bk-battle=2 peste .bk-merge=1) → pare că iese din muchia cardului. */
.bk-merge {
    position: absolute;
    left: calc(var(--bk-arm) * -1);
    top: 25%;
    bottom: 25%;
    z-index: 1;
    border-left: 2px solid var(--border-subtle);
}
/* cot scurt din linie în card, la jumătatea matchului avansat */
.bk-col:not(.bk-col--first):not(.bk-col--second):not(.bk-col--final):not(.bk-col--plain) .bk-match::after {
    content: '';
    position: absolute;
    left: calc(var(--bk-arm) * -1);
    top: 50%;
    width: var(--bk-arm);
    border-top: 2px solid var(--border-subtle);
}
/* match rezolvat → linie + cot verzi (calea câștigătorului) */
.bk-match--resolved .bk-merge,
.bk-match--resolved::after { border-color: var(--success); }

/* ── PLACEHOLDER (schelet bracket pregătit din start, ca finala „urmează") ──
   bg OPAC (--paper, ca pagina): linia merge trece pe sub carduri → fără mască s-ar vedea prin el. */
.bk-battle--ph {
    border: 1px dashed var(--border-hair);
    background: var(--paper);
    box-shadow: none;
    min-height: 40px;
    display: flex; align-items: center; justify-content: center;
}
.bk-battle--ph i { font-size: var(--font-xs); color: var(--fg4); opacity: .5; }
/* conectorii unui placeholder = estompați (nu negru plin) */
.bk-match--ph .bk-merge,
.bk-col--second .bk-match--ph::before,
.bk-col--final .bk-battle--ph::before,
.bk-col--final .bk-battle--ph::after { border-color: var(--border-hair); }

/* Card battle — z-index 2 = peste liniile merge (vezi comentariul .bk-merge) */
.bk-battle {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--card);
    overflow: hidden;
    margin: 3px 0;
    position: relative;
    z-index: 2;
    transition: box-shadow .1s;
}
.bk-battle--pending   { border-color: var(--border-hair); }
.bk-battle--active    { border-color: var(--volt-ink); background: var(--volt); color: var(--volt-ink); box-shadow: var(--shadow-hard-sm); }
.bk-battle--completed { background: var(--paper-2); }
.bk-battle--golden    { border-color: var(--primary); box-shadow: 1px 1px 0 0 var(--primary); }

/* Entry row în battle */
.bk-entry {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .5rem;
    font-size: var(--font-base);
    border-bottom: 1px solid var(--border-hair);
    line-height: 1.25;
    min-height: 28px;
}
.bk-entry:last-of-type { border-bottom: none; }
/* câștigătorul iese clar în evidență (bandă verde la margine + bold) ca să-l urmărești ușor */
.bk-entry--winner {
    background: var(--winner-bg); color: var(--winner-fg); font-weight: 800;
    box-shadow: inset 3px 0 0 0 var(--winner-edge);
}
.bk-entry--loser  { color: var(--fg3); }   /* lizibil, dar clar secundar */
.bk-entry--bye    { color: var(--fg3); font-style: italic; letter-spacing: .08em; } /* avans liber — fără win/lose */
/* numele se aliniază spre CENTRUL bracketului: aripa stângă → dreapta, aripa dreaptă → stânga.
   Finala = centru. Nume lungi / 2v2 → maxim 2 RÂNDURI apoi taie (line-clamp); geometria nu se
   strică — sloturile .bk-match rămân egale, conectorii sunt procentuali. */
.bk-entry__name {
    flex: 1; min-width: 0; text-align: right;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.bk-half--right .bk-entry__name { text-align: left; }
.bk-col--final .bk-entry__name  { text-align: center; }
.bk-col--plain .bk-entry__name  { text-align: center; }   /* coloană standalone (ex. „Locul 3") */
.bk-entry__trophy { color: var(--rank-gold); font-size: var(--font-sm); flex-shrink: 0; }

/* Badge golden round */
/* marcaj departajare = COLȚ PLIAT (triunghi) cu nr de runde suplimentare (1/2/3) pe colț.
   Stă pe latura EXTERIOARĂ (opusă numelui, care e aliniat spre centru): stânga pe aripa
   stângă, dreapta pe aripa dreaptă → nu acoperă numele. Absolut → nu mărește înălțimea. */
.bk-golden-mark {
    position: absolute; top: 0; left: 0; z-index: 3;
    width: 26px; height: 26px;
    background: var(--primary); color: var(--text-on-inverse);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    font-size: var(--font-2xs); font-weight: 800; line-height: 1;
    text-align: left; padding: 1.5px 0 0 2.5px;
}
.bk-half--right .bk-golden-mark {
    left: auto; right: 0;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    text-align: right; padding: 1.5px 2.5px 0 0;
}

/* CAMPION */
.bk-champion {
    margin-top: .75rem;
    padding: .65rem .75rem;
    background: var(--volt);
    border: 1px solid var(--volt-ink);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--volt-ink);
    box-shadow: var(--shadow-hard-sm);
}
.bk-champion__label {
    font-family: var(--font-display);
    font-size: var(--font-xs); font-weight: 900; text-transform: uppercase; letter-spacing: .12em;
    color: var(--volt-ink); margin-bottom: .2rem;
}
.bk-champion__name {
    font-family: var(--font-display);
    font-size: var(--font-xl); font-weight: 900; color: var(--volt-ink); text-transform: uppercase;
}

/* ── Podium locurile 2-3-4 (clasare categorie, ADR 0009) — locul 1 = bara CAMPION verde FULL-WIDTH
   deasupra. Locurile 2/3/4 = UN SINGUR rând, pe toată lățimea (= lungimea locului 1), segmente
   DESCRESCĂTOARE (2 > 3 > 4) care umplu împreună tot rândul (flex-grow proporțional). Bare pline cu
   CULOAREA medaliei, cifra pe ACELAȘI rând cu numele, text alb (medaliile sunt închise). */
.podium { display: flex; flex-wrap: wrap; align-items: stretch; gap: 3px; margin-top: .35rem; }
.podium__step {
    display: flex; align-items: baseline; justify-content: center; gap: .4rem; text-align: center;
    padding: .3rem .6rem; border-radius: var(--radius-sm);
    background: var(--_pc); color: var(--c-white);
}
/* flex-grow proporțional → 2/3/4 împart toată lățimea în raportul 45:32:23, descrescător. min-width
   rămâne AUTO (nu 0) → segmentul NU se strânge sub numele lui (fără rupere pe litere); când nu mai
   încap toate pe un rând, `flex-wrap` le lasă unul sub altul (abia atunci). */
.podium__step--2 { --_pc: var(--rank-silver); flex: 45 1 0; }
.podium__step--3 { --_pc: var(--rank-bronze); flex: 32 1 0; }
.podium__step--4 { --_pc: var(--rank-4);      flex: 23 1 0; }
.podium__medal { flex: 0 0 auto; font-family: var(--font-display); font-weight: 900; font-size: var(--font-lg); line-height: 1; }
.podium__nm { white-space: nowrap; font-weight: 800; text-transform: uppercase; font-size: var(--font-sm); line-height: 1.1; }

/* ── Cronometru mare pe proiector (numărătoare inversă, ADR 0010) ── */
.battle-timer {
    display: flex; justify-content: center; align-items: center;
    margin: 0 0 .75rem; padding: .35rem 1rem;
    background: var(--ink); color: var(--paper);
    border: 2px solid var(--ink); box-shadow: var(--shadow-hard-sm);
}
.battle-timer__val {
    font-family: var(--font-mono); font-weight: 700; line-height: 1;
    font-size: clamp(2.5rem, 12vw, 6rem); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
/* Timp expirat: fundal flash brand (roșu) — semnal vizual că runda s-a terminat. */
.battle-timer--done { background: var(--primary); border-color: var(--primary); color: var(--text-on-inverse); }



/* ── Split: bracket (stânga) + battle curent (dreapta), stacked pe mobil ── */
.bk-layout { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
/* --bk-padb = respirația de sub bracket. Trăiește AICI, pe părintele comun, fiindcă o citesc două
   elemente frați: mirror-ul (ca padding) și căsuța „Locul 3" (ca tragere în sus). Legată într-un
   singur loc, căsuța nu poate ajunge niciodată peste cardurile bracketului. */
.bk-layout__bracket { order: 2; min-width: 0; --bk-padb: 1.5rem; }
/* Locul 3 stă sub bracket (standalone, ca să nu strice centrarea și conectorii finalei — ADR 0009),
   dar tras în sus în spațiul gol de sub finală ca să se citească ca parte din final, nu ca anexă.
   Plafonul e chiar padding-ul de jos al mirror-ului: peste el ar începe să se suprapună. */
.bk-third-slot { display: flex; justify-content: center; margin-top: calc(var(--bk-padb) * -0.8); }
.bk-layout__current { order: 1; min-width: 0; }
@media (min-width: 992px) {
    .bk-layout { flex-direction: row; align-items: flex-start; }
    /* Împărțirea NU mai e fixă 33/67 — o dictează cât loc cere efectiv bracketul.
       Bracketul primește `flex-basis: auto`, adică lățimea CONȚINUTULUI lui, care depinde direct de
       câte runde are (Top 32 = multe coloane, Top 4 = două). Panoul de jurizare are bază 33%, poate
       CREȘTE, dar NU se micșorează.
         · bracket mare  → bazele depășesc containerul; doar bracketul se strânge (scroll intern),
                           panoul rămâne fix pe 33% — exact ca înainte.
         · bracket mic   → rămâne spațiu liber; ambele cresc, deci panoul se umflă până la plafon
                           și nu mai rămâne gol lângă un bracket de 4.
       Zero JS, zero reguli per-mărime: mărimea bracketului se citește singură din conținut.
       Plafonul de 60%: peste atât, cei doi concurenți ajung prea depărtați pe orizontală, cu mijlocul
       pierdut între ei — devine mai greu de citit, nu mai ușor.
       align-self: center = panoul mai scund stă pe MIJLOCUL înălțimii bracketului, nu lipit sus;
       sticky rămâne → la scroll tot se lipește sub marginea de sus. */
    .bk-layout__current { order: 1; flex: 1 0 33%; max-width: 60%; min-width: 0; align-self: center; position: sticky; top: .75rem; }
    .bk-layout__bracket { order: 2; flex: 1 1 auto; min-width: 0; }
    .bk-layout--solo .bk-layout__bracket { flex: 1 1 100%; }
}
/* bara de progres sub battle-ul curent detaliat → full width în coloana din dreapta */
.bk-progress--under { margin: .6rem 0 0; }
.bk-progress--under .bk-progress__bar { max-width: none; }

/* Capul panoului „battle curent": fază + control Start/Finalizează */
.bk-current__ctrl {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .35rem .55rem; margin-bottom: .5rem;
    border: 1px solid var(--volt-ink); background: var(--volt);
    border-radius: var(--radius-sm);
}
/* Acțiunile stau grupate la dreapta: cu space-between și trei copii direcți (fază + două forme),
   cronometrul ar fi plutit la mijloc, între fază și Finalizează. */
.bk-current__acts { display: flex; align-items: center; gap: .35rem; }
.bk-timer-btn { display: inline-flex; align-items: center; gap: .25rem; }
.bk-timer-btn__s { font-size: var(--font-2xs); font-weight: 700; opacity: .85; }
/* Previzualizarea deciziei finalei pe ecranul organizatorului (B30) — `<details>` nativ, zero JS.
   Acoperită implicit: verdictul e la un click, ca o privire peste umăr să nu-l ia. Aceeași mecanică
   de summary ca .panel-acc (marker propriu, nu cel al browserului), dar componentă separată — una e
   un acordeon de listă, cealaltă o dezvăluire unică. */
.fp { border: 1px solid var(--winner-edge); border-radius: var(--radius-sm); background: var(--winner-bg); margin-bottom: .5rem; overflow: hidden; }
.fp--tie { border-color: var(--warning); background: var(--warning-soft); }
.fp > summary {
    display: flex; align-items: center; gap: .3rem;
    padding: .35rem .55rem; cursor: pointer; user-select: none;
    font-size: var(--font-xs); font-weight: 700; color: var(--fg2);
    list-style: none;
}
.fp > summary::-webkit-details-marker { display: none; }
.fp > summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; font-size: .8em; transition: transform .15s ease; color: var(--fg4); }
.fp[open] > summary::after { transform: rotate(180deg); }
.fp > summary:hover { filter: brightness(.97); }
.fp__body { display: flex; align-items: center; gap: .5rem; padding: .1rem .55rem .5rem; }
.fp__icon { font-size: var(--font-lg); flex-shrink: 0; color: var(--winner-ink); }
.fp--tie .fp__icon { color: var(--warning); }
.fp__body strong { font-size: var(--font-sm); color: var(--winner-fg); }
.fp--tie .fp__body strong { color: var(--warning); }
.fp__sub { font-size: var(--font-2xs); color: var(--fg3); }

.bk-current__phase {
    font-family: var(--font-display); font-weight: 900;
    font-size: var(--font-sm); text-transform: uppercase; letter-spacing: .06em;
    color: var(--volt-ink);
}

/* Scorecard focus în coloana din stânga: umple lățimea, scară redusă vs panoul mare;
   fără umbră dură — panoul stă lipit de bracket, umbra adăuga zgomot */
.bk-layout__current .sc--focus { width: 100%; max-width: 100%; margin-bottom: 0; box-shadow: none; }
.bk-layout__current .sc--focus .sc__side { font-size: var(--font-lg); padding: .5rem .7rem; }
.bk-layout__current .sc--focus .sc__score-n { font-size: var(--font-4xl); }
.bk-layout__current .sc--focus .sc-jt__note { font-size: var(--font-md); }
.bk-layout__current .sc--focus .sc-jt__row { grid-template-columns: 1fr 6.5rem 1fr; }

/* ── Bracket OGLINDIT (mirrored: stânga → FINALĂ ← dreapta) ──
   FLUID: mirror = 100% din container, coloanele elastice (min 96 / max 190px) → Top 32 încape
   fără scroll pe ecrane late; sub ~1250px coloanele ating minimul și .bk-scroll preia (fallback). */
.bk-scroll { overflow-x: auto; padding-bottom: .5rem; }
.bk-mirror {
    /* --bk-overlap = cât trage coloana 3+ PESTE feederul ei (mai mare = mai compact);
       --bk-firstgap = spațiul normal T32→T16 (primul rând rămâne fără overlap);
       --bk-arm = cotul scurt în card. Reglabile dintr-un loc. */
    --bk-overlap: 36px;
    --bk-firstgap: 18px;   /* T32→T16 total = brațul bracketului + linia de legătură spre copil */
    --bk-firstarm: 9px;    /* brațul bracketului (din cardul T32 până la bara verticală/merge point) */
    --bk-childlink: 9px;   /* linia care leagă merge point-ul de copil (cardul T16) — ca să nu fie lipit */
    --bk-arm: 8px;
    --bk-gap: 14px;
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 200px;
    padding: .5rem .25rem var(--bk-padb, 1.5rem);
    width: 100%;
    min-width: 0;
}
/* aripile împart spațiul egal; când coloanele ating max-width, spațiul liber merge spre
   marginile exterioare (justify flex-end + flip pe dreapta) → bracketul se strânge spre finală.
   min-width: MIN-CONTENT (nu 0!): aripa refuză să se strângă sub suma minimelor coloanelor →
   overflow-ul cade la DREAPTA mirror-ului (scrollabil), nu în stânga aripii (de neatins în LTR). */
.bk-half { display: flex; align-items: stretch; gap: 0; flex: 1 1 0; min-width: min-content; justify-content: flex-end; }
.bk-half--center { align-items: center; padding: 0 var(--bk-gap); flex: 0 0 auto; }
/* coloanele 3+ se suprapun pe orizontală → matchul avansat tras sub feederi (diagonal compact).
   Ordinea DOM (coloana mai centrală = mai târzie) o pune pe ea deasupra → conectorul „merge" se vede. */
.bk-col + .bk-col { margin-left: calc(var(--bk-overlap) * -1); }
/* a 2-a coloană (T16) NU se suprapune peste primul rând (T32) → spațiu normal pt conectorii outgoing */
.bk-col--first + .bk-col { margin-left: var(--bk-firstgap); }

/* Jumătatea dreaptă = oglindită prin CSS: scaleX flip pe coloane + conectori,
   iar conținutul (carduri + etichete) e re-flipuit ca textul să rămână normal. */
.bk-half--right { transform: scaleX(-1); }
.bk-half--right .bk-battle,
.bk-half--right .bk-col-label { transform: scaleX(-1); }

/* Finala primește din AMBELE laturi → brațe scurte stânga + dreapta */
.bk-col--final .bk-battle::before,
.bk-col--final .bk-battle::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    width: var(--bk-gap);
    border-top: 2px solid var(--border-subtle);
}
.bk-col--final .bk-battle::before { left: calc(var(--bk-gap) * -1); }
.bk-col--final .bk-battle::after  { right: calc(var(--bk-gap) * -1); }

/* ── SCORECARD (battle reveal: runde × jurați × participant) ── */
.sc {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--card);
    margin-bottom: .75rem;
    max-width: 680px;
    overflow: hidden;
}
.sc--live { border-color: var(--volt-ink); box-shadow: var(--shadow-hard-sm); }
/* Battle-ul terminat NU mai primește chenar verde pe toată cutia: verdele aprins în jurul întregului
   scoreboard concura cu însuși câștigătorul, care e deja marcat verde + trofeu ÎNĂUNTRU. Un semnal
   repetat pe toată rama nu adaugă informație, doar zgomot. `.sc--live` rămâne (acolo chenarul chiar
   distinge un battle ÎN CURS de restul listei). Clasa `.sc--done` se emite în continuare din Twig,
   intenționat: e marcaj de stare, util dacă mai târziu vrem alt semnal — doar chenarul a picat. */

/* Panou FOCUS — battle curent/rezultat */
.sc--focus { max-width: 960px; width: 100%; margin-bottom: 1rem; box-shadow: var(--shadow-hard); }
.sc--focus .sc__bar { font-size: var(--font-sm); padding: .4rem .85rem; }
.sc--focus .sc__side { font-size: var(--font-2xl); padding: .7rem 1rem; }
.sc--focus .sc__score-n { font-size: var(--font-7xl); }
.sc--focus .sc__score { min-width: 5.5rem; }
.sc--focus .sc-jt__note { font-size: var(--font-lg); }
.sc--focus .sc-jt__cell { min-height: 1.8rem; }
.sc--focus .sc-round__hd { font-size: var(--font-sm); }

.sc__bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: .3rem .6rem;
    background: var(--surface-inverse); color: var(--text-on-inverse);
    font-family: var(--font-display);
    font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .08em;
}
.sc__state { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
.sc__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--volt);
           animation: sc-pulse 1.1s ease-in-out infinite; }
@keyframes sc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.sc__vs { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-hair); }
.sc__side {
    flex: 1; min-width: 0; padding: .5rem .75rem;
    font-family: var(--font-display); font-weight: 900; font-size: var(--font-lg); text-transform: uppercase;
    display: flex; align-items: center; gap: .4rem;
}
.sc__side--r { justify-content: flex-end; text-align: right; }
.sc__side--win { background: var(--winner-bg); color: var(--winner-fg); box-shadow: inset 4px 0 0 0 var(--winner-edge); }
.sc__side--out { color: var(--fg4); }
/* nume lungi / 2v2 → maxim 2 rânduri apoi taie (același pattern ca .bk-entry__name).
   `break-word`, NU `anywhere`: `anywhere` rupea ÎN INTERIORUL cuvântului chiar când nu era nevoie —
   „SATANEL" apărea ca „SATAN / EL". Cu `break-word` numele rămâne întreg cât timp încape (corpul
   literei scade fluid înainte, vezi .sc-jc__nm) și se rupe doar dacă un singur cuvânt chiar nu are
   loc. La 2v2 numele sunt separate prin spații, deci wrap-ul normal le pune pe două rânduri. */
.sc__nm {
    min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: break-word;
}
.sc__tr { color: var(--rank-gold); flex-shrink: 0; }

/* Scor mare acumulat în antet = runde câștigate (2–0) */
.sc__score { align-self: center; flex-shrink: 0; text-align: center; padding: 0 .7rem; min-width: 4.5rem; }
.sc__vs-mid { font-family: var(--font-display); font-weight: 900; color: var(--fg4); font-size: var(--font-sm); }
.sc__score-n { font-family: var(--font-display); font-weight: 900; font-size: var(--font-4xl); line-height: 1; color: var(--fg3); }
.sc__score-n.is-win { color: var(--winner-ink); }
.sc__score-sep { font-family: var(--font-display); font-weight: 900; color: var(--fg4); font-size: var(--font-lg); margin: 0 .15rem; }
.sc__score-lbl { display: block; font-size: var(--font-2xs); color: var(--fg4); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

/* Bloc rundă = card distinct, fundal colorat ciclic (3 culori) + dungă accent stânga,
   ca rundele să se distingă clar una de alta */
.sc-round {
    border-left: 4px solid var(--fg4);
    border-radius: var(--radius-sm); margin: 0 .45rem .4rem; overflow: hidden;
}
.sc-round:first-of-type { margin-top: .4rem; }
.sc-round--c0 { border-left-color: #2f6df0; background: #f4f8ff; }
.sc-round--c0 .sc-round__hd { background: #dde9ff; }
.sc-round--c1 { border-left-color: var(--warning); background: #fffaef; }
.sc-round--c1 .sc-round__hd { background: var(--warning-soft); }
.sc-round--c2 { border-left-color: #7a4fd0; background: #f7f2ff; }
.sc-round--c2 .sc-round__hd { background: #e7dcff; }
/* runda de departajare (golden) — scoasă în evidență cu auriu */
.sc-round--golden { border: 2px solid var(--rank-gold); border-left-width: 5px; background: #fff8e6; box-shadow: 0 0 0 2px rgba(199,146,0,.12); }
.sc-round--golden .sc-round__hd { background: var(--golden-soft); color: var(--on-golden); }
.sc-round--golden .sc-round__no { color: var(--on-golden); }
/* `flex-wrap` — pe îngust „RUNDA 3" și rezultatul ajungeau lipite și se citeau ca un singur șir
   („RUNDA 3 egal"). Cu wrap, rezultatul pică sub numărul rundei exact când nu mai încape, în loc să
   stea permanent pe două rânduri: antetul rămâne de o linie oriunde e loc (regula de aranjament fluid
   din UI_RULES — cade pe rând când se îngustează, nu dintr-un @media dur). */
.sc-round__hd {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .2rem .6rem; background: var(--paper-2);
    border-bottom: 1px solid var(--border-hair);
    /* Text pinned pe tintele pastel .sc-round--c* (theme-INDEPENDENT) — altfel --fg2/--fg3
       flipează deschis în dark → text deschis pe pastel deschis = invizibil. Golden își
       păstrează override-ul propriu (--on-golden). Copiii moștenesc (color: inherit). */
    color: var(--sc-round-ink);
    font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .05em;
}
.sc-round__no { font-family: var(--font-display); font-weight: 900; color: inherit; }
.sc-round__res { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.sc-round__w { font-weight: 700; }
.sc-round__w--tie { color: inherit; }
.sc-round__tally { font-family: var(--font-mono); color: inherit; opacity: .8; flex-shrink: 0; }

/* Tabel jurați — stânga = e1 | jurat | dreapta = e2. Fundal alb ca umplerea %-ului să se vadă clar
   (identitatea rundei rămâne pe header + dunga stângă + chenar). */
.sc-jt { display: flex; flex-direction: column; background: var(--card); }
/* Mijloc cu lățime FIXĂ (nu auto) → celulele laterale e1/e2 rămân egale pe TOATE rândurile
   și rundele, indiferent de cât de lung e numele juratului/criteriului → barele --w% nu se
   mai distorsionează. Numele/criteriile lungi se rup în mijlocul fix (overflow-wrap). */
.sc-jt__row {
    display: grid; grid-template-columns: 1fr 7.5rem 1fr;
    align-items: stretch; border-top: 1px solid var(--border-hair);
}
.sc--focus .sc-jt__row { grid-template-columns: 1fr 10rem 1fr; }
.sc-jt__row:first-child { border-top: none; }
.sc-jt__judge {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: .12rem .4rem; text-align: center; line-height: 1.05;
    border-left: 1px solid var(--border-hair); border-right: 1px solid var(--border-hair);
    min-width: 0; overflow: hidden; overflow-wrap: anywhere;
}
.sc-jt__jn { font-size: var(--font-xs); font-weight: 700; }
.sc-jt__jr { font-size: var(--font-2xs); color: var(--fg3); text-transform: uppercase; }
/* O singură linie per jurat/participant — FĂRĂ wrap. Fundalul celulei = cât din total
   (lungime = % normalizat), cu muchie clară unde se termină procentul. */
.sc-jt__cell {
    --sc-fill: rgba(20, 18, 16, .12); --sc-edge: rgba(20, 18, 16, .3);
    position: relative; overflow: hidden;
    display: flex; align-items: center; flex-wrap: nowrap; gap: .4rem;
    padding: .14rem .6rem; min-height: 1.55rem; min-width: 0;
    /* Fundal = cât din total: bloc colorat până la --w (=% normalizat) cu muchie clară */
    background:
        linear-gradient(90deg, transparent calc(var(--w, 0%) - 2px), var(--sc-edge) calc(var(--w, 0%) - 2px), var(--sc-edge) var(--w, 0%), transparent var(--w, 0%)),
        linear-gradient(90deg, var(--sc-fill) var(--w, 0%), transparent var(--w, 0%));
}
.sc-jt__cell--e2 {
    justify-content: flex-end;
    background:
        linear-gradient(270deg, transparent calc(var(--w, 0%) - 2px), var(--sc-edge) calc(var(--w, 0%) - 2px), var(--sc-edge) var(--w, 0%), transparent var(--w, 0%)),
        linear-gradient(270deg, var(--sc-fill) var(--w, 0%), transparent var(--w, 0%));
}
.sc-jt__cell.is-fav { --sc-fill: rgba(15, 138, 61, .22); --sc-edge: var(--success); box-shadow: inset 3px 0 0 0 var(--success); }
.sc-jt__cell--e2.is-fav { box-shadow: inset -3px 0 0 0 var(--success); }
/* rundă egală (scor egal) — marcaj neutru amber pe ambele părți + „egal" la mijloc */
.sc-jt__cell.is-tie { --sc-fill: rgba(199, 146, 0, .16); --sc-edge: var(--warning); box-shadow: inset 3px 0 0 0 var(--warning); }
.sc-jt__cell--e2.is-tie { box-shadow: inset -3px 0 0 0 var(--warning); }
.sc-jt__judge.is-tie { background: var(--warning-soft); }
.sc-jt__eq { font-size: var(--font-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--warning); }
/* Caret „favorit" scos din flux, fix la marginea exterioară → nu mai împinge cifrele */
.sc-jt__cell--e1 { padding-left: 1.6rem; }
.sc-jt__cell--e2 { padding-right: 1.6rem; }
.sc-jt__fav { position: absolute; top: 50%; transform: translateY(-50%); }
.sc-jt__cell--e1 .sc-jt__fav { left: .45rem; }
.sc-jt__cell--e2 .sc-jt__fav { right: .45rem; }
/* Nota = numărul prominent; %-ul mic (lungimea fundalului îl arată oricum) */
/* Nota-total a criteriului = lățime FIXĂ + aliniere spre exterior → sub-criteriile de dedesubt
   pornesc de la ACELAȘI x pe toate rândurile (coloană verticală curată). */
.sc-jt__note { flex-shrink: 0; min-width: 2.4rem; font-family: var(--font-mono); font-weight: 700; font-size: var(--font-md); color: var(--fg1); }
.sc-jt__cell--e1 .sc-jt__note { text-align: left; }
.sc-jt__cell--e2 .sc-jt__note { text-align: right; }
.sc-jt__note small { font-size: var(--font-2xs); color: var(--fg2); font-weight: 400; }
/* Sub-criteriile (skills Trivium) STIVUITE unul sub altul, aliniate spre marginea EXTERIOARĂ
   (stânga la e1 / dreapta la e2, exact ca nota-total) → coloană curată de sus până jos, ușor de
   urmărit. Mică distanță față de nota-total (margin). */
.sc-jt__sk { display: inline-flex; flex-direction: column; gap: 1px; }
.sc-jt__cell--e1 .sc-jt__sk { align-items: flex-start; margin-left: .35rem; }
.sc-jt__cell--e2 .sc-jt__sk { align-items: flex-end; margin-right: .35rem; }
.sc-jt__skv { font-size: var(--font-xs); color: var(--fg2); white-space: nowrap; }
.sc-jt__skv b { color: var(--fg1); font-family: var(--font-mono); }
.sc-jt__pen {
    flex-shrink: 0; font-size: var(--font-2xs); color: var(--danger); font-weight: 700; white-space: nowrap;
    background: var(--danger-soft); padding: 0 .3rem; border-radius: var(--radius-sm); text-transform: uppercase;
}
.sc-jt__fav { color: var(--success); flex-shrink: 0; }

/* Legendă reveal — explică notă / % / bară / crash pentru oameni obișnuiți */
.sc-legend {
    display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
    padding: .4rem .65rem; background: var(--paper-2); border-bottom: 1px solid var(--border-hair);
    font-size: var(--font-2xs); color: var(--fg3);
}
.sc-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.sc-legend__k {
    font-family: var(--font-mono); color: var(--fg1);
    background: var(--card); border: 1px solid var(--border-hair); border-radius: var(--radius-sm); padding: 0 .3rem;
}
.sc-legend__bar { width: 26px; height: 7px; border-radius: 999px; border: 1px solid var(--border-hair); background: linear-gradient(90deg, var(--success) 65%, var(--paper) 65%); }

/* OUR / panel — tabel JURAT × DANSATOR. Stânga = juratul + categoria pe care o jurizează;
   coloana fiecărui dansator = TOTALul dat de acel jurat pe criteriul lui. Verde = cine a luat mai
   mult la criteriul ăla; crash/slip marcat. Detaliul pe runde rămâne în bracket (vizualizare detaliată). */
/* UN tabel: cap (nume mari + scor mare, stil .sc__vs) + rânduri criterii pe ACELEAȘI 3 coloane
   (1fr | criteriu/scor | 1fr) → e1 sub nume1, criteriul sub scor, e2 sub nume2. Aliniere garantată. */
/* full-bleed în rama .sc (chenarul exterior = SINGURA ramă; fără cutie-în-cutie) */
/* container-type: rândurile de dedesubt se dimensionează în `cqi` = lățimea REALĂ a tabelului, nu a
   ecranului. Tabelul stă și pe pagina categoriei (îngust, lângă bracket), și pe proiector (lat), deci
   un `@media` pe viewport ar minți. CAPCANĂ: `cq*` NU se rezolvă la elementul care declară containerul
   — doar la descendenți; de aceea clamp-urile stau pe `.sc-jc__*`, nu aici. */
/* Coloana din mijloc e PLAFONATĂ la cât ocupă blocul central din antet („3–0" + „criterii câștigate"),
   nu lăsată pe `auto`. Cu `auto` un criteriu lung („Originalitate & Battle") umfla coloana și strivea
   numele concurenților — care pe scoreboard sunt informația principală. Acum se întâmplă invers:
   criteriul se rupe pe două rânduri în lățimea lui (are spații, deci wrap normal), iar numele își
   păstrează spațiul. Plafon în `rem`, nu `cqi`: ELEMENTUL ĂSTA declară containerul, iar unitățile
   lui nu se rezolvă pe el însuși. */
.sc-jc { display: grid; grid-template-columns: 1fr minmax(4.5rem, 8.5rem) 1fr; margin: 0; background: var(--card); font-variant-numeric: tabular-nums; container-type: inline-size; }
/* cap: nume mari */
/* Corpul numelui scade cu LĂȚIMEA TABELULUI (cqi), nu cu a ecranului — plafon = --font-lg, adică
   exact cât era, deci pe lat nimic nu se schimbă. Rostul: un nume lung („SATANEL") se micșorează
   ÎNAINTE să fie nevoie să fie rupt în două. Ruperea rămâne ultima soluție (vezi .sc__nm). */
.sc-jc__nm { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .75rem; border-bottom: 1px solid var(--border-hair); font-family: var(--font-display); font-weight: 900; font-size: clamp(var(--font-sm), 5.2cqi, var(--font-lg)); text-transform: uppercase; min-width: 0; }
.sc-jc__nm.is-win { background: var(--winner-bg); color: var(--winner-fg); }
.sc-jc__nm.is-out { color: var(--fg4); }
/* cap: scor mare (centru) */
.sc-jc__sc { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .3rem .7rem; border-bottom: 1px solid var(--border-hair); text-align: center; }
.sc-jc__sc-n { font-family: var(--font-display); font-weight: 900; font-size: var(--font-4xl); line-height: 1; color: var(--fg3); }
.sc-jc__sc-n.is-win { color: var(--winner-ink); }
.sc-jc__sc-sep { font-family: var(--font-display); font-weight: 900; color: var(--fg4); font-size: var(--font-lg); margin: 0 .15rem; }
.sc-jc__sc small { font-size: var(--font-2xs); color: var(--fg4); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
/* câte runde s-au dansat în total — jos de tot sub scorul central */
.sc-jc__rounds { font-size: var(--font-2xs); color: var(--fg4); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
/* notă departajare — apare DOAR la egalitate de criterii (suma punctelor decide) */
.sc-jc__tiebreak { margin-top: 3px; padding: 1px 6px; background: var(--warning-soft); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--font-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--on-warning-soft); line-height: 1.2; }
.sc-jc__tiebreak b { font-family: var(--font-mono); color: var(--fg2); }
.sc-jc__tiebreak b.is-win { color: var(--winner-ink); }
/* rânduri criterii — aliniate sub cap; cifra centrată, penalizările sub ea (nu o împing) */
.sc-jc__v { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: .3rem .5rem; border-top: 1px solid var(--border-hair); font-family: var(--font-mono); }
.sc-jc__v b { font-size: var(--font-2xl); font-weight: 700; color: var(--fg2); line-height: 1; }
.sc-jc__v.is-win { background: var(--winner-bg); }
.sc-jc__v.is-win b { color: var(--winner-fg); }
/* egalitate la criteriu (scor egal) — neutru amber, NU verde; „egal" în centru */
.sc-jc__v.is-tie { background: var(--warning-soft); }
.sc-jc__v.is-tie b { color: var(--on-warning-soft); }
.sc-jc__crit.is-tie { background: var(--warning-soft); }
/* Marcajul de egalitate stă SUB numele rundei/criteriului, nu lângă el: pe orizontală împingea numele
   de pe centru, iar coloana din mijloc e oricum plafonată. Bandă lipită de fundul celulei — ține
   egalitatea în ACEEAȘI încăpere cu runda la care se referă. Înainte era un rând peste toată grila
   (`grid-column: 1 / -1`), deci o dungă dintr-o parte în alta a scorecardului, ruptă vizual de rundă:
   cu mai multe runde dedesubt nu se mai vedea la care dintre ele se referă. Numele juraților care au
   văzut egal + „egal", atât — că e vorba de runda de deasupra se înțelege din poziție, nu din text. */
.sc-jc__eq {
    display: flex; flex-direction: column; align-items: center; align-self: stretch; min-width: 0;
    padding: .05rem .25rem; border-radius: var(--radius-sm);
    font-family: var(--font-sans); font-size: var(--font-2xs); font-weight: 800;
    text-transform: uppercase; letter-spacing: .03em; line-height: 1.25;
    color: var(--on-warning-soft); background: var(--warning-soft); overflow-wrap: anywhere;
}
.sc-jc__crit { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .3rem .5rem; border-top: 1px solid var(--border-hair); text-align: center; min-width: 0; }
.sc-jc__jx { display: flex; flex-direction: column; min-width: 0; }
/* criteriul (rolul) = linia PRINCIPALĂ (mare) — contează mai mult decât cine îl jurizează;
   numele juratului = secundar dedesubt (.sc-jc__role). Fallback la numele juratului dacă n-are rol. */
/* Criteriul stă într-o coloană plafonată, deci un nume lung („Originalitate & Battle") CADE PE DOUĂ
   RÂNDURI în loc să umfle coloana — exact ce trebuie, fiindcă spațiul îl merită numele concurenților.
   Corpul scade odată cu tabelul; `break-word` rupe doar dacă un singur cuvânt chiar nu încape. */
.sc-jc__name { font-family: var(--font-sans); font-size: clamp(var(--font-2xs), 3.4cqi, var(--font-sm)); font-weight: 800; color: var(--fg1); line-height: 1.15; overflow-wrap: break-word; }
.sc-jc__role { font-family: var(--font-sans); font-size: var(--font-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--fg3); line-height: 1.15; }
/* min-height = rezervarea rândului de penalizări: când o latură are penalizări iar cealaltă nu, ambele
   randează `.sc-jc__pens` (gol unde lipsește) → înălțime egală, laturile rămân aliniate (regulă de design). */
.sc-jc__pens { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2px; min-height: .9rem; }
.sc-jc__pen { font-size: var(--font-2xs); color: var(--danger); font-weight: 800; background: var(--danger-soft); padding: 0 .25rem; border-radius: var(--radius-sm); text-transform: uppercase; white-space: nowrap; }
/* Și pe proiector/panoul focus numele rămâne FLUID. Regula asta e mai specifică decât clamp-ul de pe
   `.sc-jc__nm`, deci fără clamp aici numele redevenea fix și un „SATANEL" lung se rupea sau se tăia
   exact pe ecranul unde trebuie citit de la distanță. Plafon = --font-2xl, adică mărimea de dinainte. */
.sc--focus .sc-jc__nm { font-size: clamp(var(--font-lg), 7cqi, var(--font-2xl)); padding: .7rem 1rem; }
.sc--focus .sc-jc__sc-n { font-size: var(--font-7xl); }
.sc--focus .sc-jc__v b { font-size: var(--font-5xl); }
.sc--focus .sc-jc__name { font-size: clamp(var(--font-xs), 4cqi, var(--font-md)); }

/* Toggle „Detaliu pe jurați" — lipit sub rezumat, deschide tabelele pe runde (Bootstrap collapse).
   Capul de tabel NU se redublează: numele sunt deja în rezumatul de deasupra. */
/* rând-footer al aceleiași rame (nu cutie separată): full-width, doar hairline sus */
.sc-detail-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; margin: 0; padding: .3rem .6rem;
    background: transparent; border: 0; border-top: 1px solid var(--border-hair); border-radius: 0;
    font-family: var(--font-display); font-size: var(--font-2xs); font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; color: var(--fg2); cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.sc-detail-toggle:hover { background: var(--paper-2); color: var(--fg1); }
.sc-detail-toggle[aria-expanded="true"] { background: var(--surface-inverse); color: var(--text-on-inverse); border-color: var(--border-strong); }
.sc-detail-toggle__chev { flex-shrink: 0; font-size: var(--font-sm); transition: transform .15s; }
.sc-detail-toggle[aria-expanded="true"] .sc-detail-toggle__chev { transform: rotate(180deg); }
.sc-detail { border-top: 1px solid var(--border-hair); }
.sc--focus .sc-detail-toggle { font-size: var(--font-xs); padding: .4rem .75rem; }

/* Totaluri (baza tie-break) */
.sc-totals {
    display: flex; align-items: center; justify-content: space-between;
    padding: .35rem .75rem; background: var(--paper-2); border-top: 1px solid var(--border-hair);
}
/* TOTAL PUNCTE = info importantă (tie-break la egal) → cifre MARI, vizibile */
.sc-totals__v { font-family: var(--font-mono); font-weight: 900; font-size: var(--font-3xl); color: var(--fg3); line-height: 1; }
.sc-totals__v--hi { color: var(--success); }
.sc--focus .sc-totals__v { font-size: var(--font-5xl); }
/* maxul teoretic (constant) — mic, estompat, lipit de total ca scală („18.6 / 30") */
.sc-totals__max { font-size: var(--font-2xs); color: var(--fg4); font-weight: 400; margin-left: 2px; }
.sc-totals__lbl { font-size: var(--font-sm); font-weight: 800; color: var(--fg3); text-transform: uppercase; letter-spacing: .06em; }

/* ── Totalul (%) pe fiecare jurat/criteriu (panel ȘI simplu): centrat în celula flex-column
   `.sc-jc__v` (definită mai sus), cu penalizările pe RÂND PROPRIU dedesubt. Boxele pe runde
   (fostul `.sc-rds`) au fost SCOASE din rezumat — magnitudinea trăiește în % + TOTAL PUNCTE. ── */
/* Coloana totalului = lățime FIXĂ → cifra (b) rămâne pe aceeași lățime pe toate rândurile
   (ex. 100% nu depășește). */
.sc-jc__tg { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: center; gap: 1px; flex-shrink: 0; width: 3.4rem; }
.sc--focus .sc-jc__tg { width: 4.5rem; }
/* Rândurile per-jurat pt varianta simplă (skills) — același grid ca panelul, dar FLUID.
   Nu „îndesat cu valori fixe": densitatea se derivă din lățimea tabelului (`cqi`), cu tokenii ca
   praguri. Pe o coloană îngustă rândurile se strâng singure; pe lat revin la mărimea de dinainte.
   Plafonul fiecărui clamp = VALOAREA DE AZI (--font-2xl / 3.4rem / .3rem) → nimic nu poate crește
   peste ce încăpea deja, deci încadrarea nu se poate strica; se poate doar micșora când e nevoie.
   Cifra e UNA singură (runde câștigate de juratul ăla), nu un procent de 3 caractere — iar verdictul
   se ia din CULOARE, cifra doar confirmă; de aceea pragul de jos poate coborî mult.
   Cele trei mărimi stau ca tokeni AICI: reglarea = trei linii într-un loc. Criteriile sunt neatinse. */
.sc-jr {
    margin-top: .4rem;
    --jr-pad-y: clamp(.12rem, .7cqi, .3rem);
    --jr-num: clamp(var(--font-sm), 4.2cqi, var(--font-2xl));
    --jr-col: clamp(1.9rem, 9cqi, 3.4rem);
    --jr-name: clamp(var(--font-2xs), 3.2cqi, var(--font-sm));
}
.sc-jr .sc-jc__v,
.sc-jr .sc-jc__crit { padding-top: var(--jr-pad-y); padding-bottom: var(--jr-pad-y); }
.sc-jr .sc-jc__v b { font-size: var(--jr-num); }
.sc-jr .sc-jc__tg { width: var(--jr-col); }
/* Numele juratului scade odată cu restul și se rupe în loc să împingă coloanele cifrelor. */
.sc-jr .sc-jc__name { font-size: var(--jr-name); }
/* Jurații care au dat runda laturii — pe UN rând, deasupra punctelor, separați prin „·".
   `min-height` cu unitate `em` (deci legată de propriul corp de literă) rezervă exact o linie ȘI
   ATUNCI CÂND E GOL: la o rundă luată 3–0, latura fără jurați ar fi altfel mai scundă și cele două
   coloane s-ar decala pe verticală. Containerul se randează mereu — vezi template. */
.sc-jr__who {
    /* `align-self: stretch` — altfel, ca element flex sub `align-items: center`, lățimea ar fi cea a
       conținutului, iar gol ar avea lățime zero și n-ar mai centra nimic peste cifră. */
    display: block; align-self: stretch; min-width: 0; min-height: 1.35em; text-align: center;
    font-family: var(--font-sans); font-weight: 700; line-height: 1.2;
    font-size: var(--jr-name); color: var(--fg3); overflow-wrap: anywhere;
}
.sc-jr .sc-jc__v.is-win .sc-jr__who { color: var(--winner-fg); }
/* Pe proiector densitatea nu mai e o virtute — se citește de la distanță. Rescriem TOKENII, nu
   regulile: regulile `.sc-jr …` de mai sus au aceeași specificitate ca perechile `.sc--focus …`
   dinainte și vin după ele în fișier, deci ar câștiga oricum. Aici sursa rămâne una. */
.sc--focus .sc-jr {
    --jr-pad-y: clamp(.2rem, 1cqi, .4rem);
    --jr-num: clamp(var(--font-2xl), 9cqi, var(--font-5xl));
    --jr-col: clamp(2.6rem, 13cqi, 4.5rem);
    --jr-name: clamp(var(--font-sm), 4.5cqi, var(--font-md));
}

/* Rezumat pe RUNDE — randat în ACELAȘI grid .sc-jc ca pe-criterii: totalul pe rundă = procent
   (.sc-jc__tg), penalizările dedesubt. Verde/amber moștenit din .sc-jc__v. */
/* runda de departajare — coloana din mijloc aurie ca la detalii (.sc-round--golden), să se înțeleagă specială */
.sc-jc__crit--golden { background: var(--golden-soft); }
.sc-jc__crit--golden .sc-jc__name { color: var(--on-golden); }

/* Progres (înainte de reveal) — bară segmentată pe toată lățimea, un segment / jurat */
.sc-prog { padding: .55rem .65rem; display: flex; flex-direction: column; gap: 6px; }
.sc-prog__lbl { font-size: var(--font-2xs); color: var(--fg3); text-transform: uppercase; letter-spacing: .05em; }
.sc-prog__row { display: flex; align-items: center; gap: .5rem; }
.sc-prog__no { width: 2.2rem; flex-shrink: 0; font-family: var(--font-display); font-weight: 900; font-size: var(--font-sm); color: var(--fg3); }
.sc-prog__seg { display: flex; gap: 4px; flex: 1; }
.sc-prog__cell {
    flex: 1; height: 18px; border-radius: var(--radius-sm);
    background: var(--paper-2); border: 1px solid var(--border-hair); transition: background .15s;
}
.sc-prog__cell.is-on { background: var(--success); border-color: var(--success); }
.sc-prog__cnt { font-family: var(--font-mono); font-size: var(--font-sm); color: var(--fg2); flex-shrink: 0; min-width: 2.4rem; text-align: right; }
.sc--focus .sc-prog__cell { height: 26px; }
.sc--focus .sc-prog { gap: 8px; padding: .75rem .8rem; }
.sc-prog__empty { font-size: var(--font-sm); color: var(--fg3); }
.sc-prog__hint { font-size: var(--font-2xs); color: var(--fg4); margin-top: .2rem; }

/* Carduri battle terminate = expandabile + acordeon scorecards */
.bk-battle--expandable { cursor: pointer; }
.bk-battle--expandable:hover { box-shadow: var(--shadow-hard-sm); }
/* indiciu „apasă pt scorecard": chevron mic în COLȚ, absolut → fără div/spațiu extra sub card.
   Estompat, se aprinde la hover/expand. */
.bk-battle__more {
    position: absolute; bottom: 0; left: 1px;   /* colț exterior (numele se aliniază spre centru) */
    color: var(--fg4); font-size: var(--font-3xs); line-height: 1;
    opacity: .45; pointer-events: none;
    transition: opacity .12s, color .12s;
}
.bk-battle__more i { transition: transform .12s; }
.bk-battle--expandable:hover .bk-battle__more { opacity: 1; color: var(--text); }
.bk-battle--expandable[aria-expanded="true"] .bk-battle__more { opacity: 1; color: var(--text); }
.bk-battle--expandable[aria-expanded="true"] .bk-battle__more i { transform: rotate(180deg); }

/* Slot principal scorecard (în panoul din dreapta): un singur scorecard vizibil odată — battle-ul
   curent implicit, sau cel pe care s-a dat click în bracket. Restul rămân collapse (ascunse). */
.bk-sc-hint { font-size: var(--font-2xs); color: var(--fg3); margin: .1rem .1rem .4rem; }
.bk-sc-slot { display: flex; flex-direction: column; }
.bk-sc-slot__item .sc { margin-bottom: 0; }

/* Strip progres bracket (battle-uri terminate / total) */
.bk-progress { display: flex; align-items: center; gap: .6rem; margin: .25rem 0 .6rem; font-size: var(--font-xs); color: var(--fg3); }
.bk-progress__lbl { font-weight: 700; white-space: nowrap; }
.bk-progress__bar { flex: 1; max-width: 340px; height: 6px; background: var(--paper-2); border: 1px solid var(--border-hair); border-radius: 999px; overflow: hidden; }
.bk-progress__fill { display: block; height: 100%; background: var(--success); }

/* Finala = accent (centrul convergenței) */
.bk-col--final .bk-battle { box-shadow: var(--shadow-hard-sm); }
.bk-col--final .bk-col-label { color: var(--primary-strong); border-bottom-color: var(--primary); }


/* Backward compat */













/* === 9. FORMS ============================================== */

.form-label-xs {
    font-family: var(--font-display);
    font-size: var(--font-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg3);
    margin-bottom: 2px;
    display: block;
}
.form-control-xs { height: 26px; font-size: var(--font-sm); padding: 0.15rem 0.4rem; }
.form-select-xs  { height: 26px; font-size: var(--font-sm); padding: 0.1rem 1.5rem 0.1rem 0.4rem; }
.form-row-compact {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.65rem 0.55rem;
}
.judge-inline-row,
.staff-inline-row { display: flex; gap: 0.4rem 0.5rem; align-items: flex-end; flex-wrap: wrap; }

/* === TOP-ALIGNED label — SSOT label câmpuri creare/editare concurs ==========================
   Cercetare UX: label deasupra inputului = cel mai scanabil pt formulare dense (vezi plan/Surse).
   Markup: control ÎNTÂI, <label> DUPĂ → `flex-direction: column-reverse` afișează label-ul DEASUPRA
   fără reordonare DOM (dropdown autocomplete rămâne absolut → neafectat). Font Archivo 600, text
   ÎNTREG (fără trunchiere). Padding sus/jos pe control = lizibilitate (anti-aglomerare). */
.form-field { display: flex; flex-direction: column-reverse; gap: 3px; min-width: 0; align-items: flex-start; }
.form-field > label {
    margin: 0; padding: 0;
    font-family: var(--font-sans); font-weight: 600; font-size: var(--font-sm);
    color: var(--text-secondary); line-height: 1.15; white-space: nowrap;
}
.form-field > .form-control,
.form-field > .form-select,
.form-field > textarea.form-control {
    width: 100%; height: auto; min-height: 1.95rem;
    padding: 0.32rem 0.55rem; font-size: var(--font-md); line-height: 1.3;
}
.form-field > textarea.form-control { min-height: 3rem; }
/* Câmp FIXAT (disabled, ex. structuralele la edit după creare) = clar ne-editabil, în temă:
   chenar dashed stins + text muted + lacăt pe label (pattern consistent cu .config-pill--lock). */
.form-field > .form-control:disabled,
.form-field > .form-select:disabled {
    background-color: transparent;
    border-style: dashed; border-color: var(--border-hair);
    color: var(--text-muted); cursor: not-allowed;
    opacity: 1;  /* anulează estomparea Bootstrap pe select — dashed+muted e deja semnalul */
}
.form-field:has(> :disabled) > label { color: var(--text-faint); }
.form-field:has(> :disabled) > label::after {
    font-family: 'bootstrap-icons'; content: "\f47a";  /* bi-lock-fill */
    font-size: .85em; margin-left: .25rem; opacity: .7;
}
/* stepper „Runde/fază": label (cod fază) deasupra, input îngust centrat */
.form-field--num { width: 3.4rem; }
.form-field--num > .form-control { width: 100%; text-align: center; }
/* în rândurile jurat/staff: câmpul = coloană proprie (label sus, control jos) */
.judge-inline-row .form-field,
.staff-inline-row .form-field { min-width: 0; }

/* Panou formular pe temă (kinetic sharp light×brutalist) — înlocuiește card+bg-dark Bootstrap
   pe creare/editare concurs. Cap deschis cu hairline tare + label display uppercase. */
.form-panel {
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.form-panel__head {
    background: var(--surface-2);
    color: var(--text);
    border-bottom: 2px solid var(--border-strong);
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--font-sm);
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
}
.form-panel__head--action { justify-content: space-between; gap: 0.5rem; }
.form-panel__body { padding: 0.75rem; flex: 1 1 auto; }

/* Tabel PhaseRoundConfig */






/* Formular QualificationConfig */




/* === 10. JUDGE PAGE ======================================== */

/* Pagina judecatorului — tema PROPRIE, decuplata de skin-ul kf al platformei (ergonomia
   de vot ramane a ei). Tokenizata pe .judge-page: valorile DARK = default (fallback no-JS
   corect pentru sali intunecate), remap LIGHT via [data-theme="light"] — toggle-ul global
   theme-toggle.js functioneaza neschimbat. Valorile dinamice (--fill, --bh, --rev-h,
   width progres) sunt setate din JS/Twig — nu sunt styling static.
   NAMESPACE: .sc-grid/.sc-bar/.sc-num/.sc-reveal = DOAR pagina jurat; scorecard-ul PUBLIC
   foloseste prefixele .sc-jc__ .sc-jt__ .sc__score- — nu le amesteca. (Fara asterisc+slash
   in comentarii: secventa inchide comentariul si selectorul invalid rezultat DEVOREAZA regula
   urmatoare — exact bugul care a lasat .judge-page fara tokeni.) */
.judge-page {
    --judge-bg:            #212529;
    --judge-surface:       #191d21;              /* card */
    --judge-surface-2:     #0f1113;              /* topbar + card header */
    --judge-col-alt:       #08090c;              /* concurent PAR — recesat, clar mai inchis ca surface */
    --judge-ink:           #fff;
    --judge-ink-2:         rgba(255,255,255,.55);
    --judge-ink-3:         rgba(255,255,255,.38);
    --judge-ink-4:         rgba(255,255,255,.28);
    --judge-hair:          rgba(255,255,255,.08);
    --judge-hair-2:        rgba(255,255,255,.14);
    --judge-soft:          rgba(255,255,255,.04);
    --judge-soft-hi:       rgba(255,255,255,.16);
    --judge-accent:        #ffc107;
    --judge-on-accent:     #14181c;              /* text pe fundal accent plin */
    --judge-accent-soft:   rgba(255,193,7,.14);
    --judge-accent-border: rgba(255,193,7,.28);
    --judge-accent-hair:   rgba(255,193,7,.18);
    --judge-accent-faint:  rgba(255,193,7,.07);
    /* bare de scor: hue = --bh (Twig per bara); saturatie/luminozitate = literale per tema
       in regulile .sc-bar (o singura axa variabila — hue-ul; starile raman usor de citit) */
    --judge-bar-rest:      rgba(255,255,255,.045);
    --judge-bar-rest-hi:   rgba(255,255,255,.09);
    --judge-bar-rest-sel:  rgba(255,255,255,.07);
    /* Podeaua de inaltime a scarii de note: 24px = pragul WCAG 2.2 SC 2.5.8 Target Size (Minimum,
       nivel AA). Folosita de .sc-grid in AMBELE praguri (mobil + desktop) → un singur loc de urcat
       inapoi daca barele se dovedesc greu de nimerit cu degetul in sala. */
    --judge-bar-h-min:     24px;
    --judge-rev-txt:       rgba(255,255,255,.8);
    /* penalizari: cod de culoare pe intensitate slip < crash < wipe */
    --judge-pen-slip:      #ca8a04;
    --judge-pen-crash:     #ea580c;
    --judge-pen-wipe:      #dc2626;
    --judge-pen-ink:       #fdba74;
    --judge-pen-soft:      rgba(181,71,8,.22);
    --judge-pen-border:    rgba(249,115,22,.4);
    /* stare de eroare pagina (banner offline) — aceeasi familie de rosu ca pen-wipe */
    --judge-danger-bg:     #dc2626;
    --judge-danger-ink:    #fff;
    /* Latimea clusterului de chrome (limba + tema, fixed dreapta-sus) = SSOT: .judge-chrome o
       ocupa, .crit-header o rezerva simetric ca numele criteriului sa nu treaca pe sub el.
       = 3.25rem (segmented steaguri) + .3rem gap + --judge-ctl-h + .5rem offset dreapta. */
    --judge-chrome-w:      5.8rem;
    /* Inaltimea AMBELOR controale de chrome — un singur numar, ca sa nu poata devia unul de
       altul si ca banda crit-header sa-si poata calcula min-height-ul din el (fara el, controlul
       depasea banda si ieseau liniile lui din hairline-ul headerului). */
    --judge-ctl-h:         1.7rem;
    min-height: 100vh;
    background: var(--judge-bg);
    color: var(--judge-ink);
    /* Bootstrap e incarcat NELAYERED pe pagina jurat → regula lui `body` bate stratul app la
       background/color. Ii alimentam PROPRIILE variabile in loc de !important. */
    --bs-body-bg: var(--judge-bg);
    --bs-body-color: var(--judge-ink);
}
[data-theme="light"] .judge-page {
    --judge-bg:            #f2f3f5;
    --judge-surface:       #ffffff;
    --judge-surface-2:     #e7e9ec;
    --judge-col-alt:       #f6e6c4;              /* concurent PAR — tenta amber, clar colorat vs alb */
    --judge-ink:           #14181c;
    --judge-ink-2:         rgba(0,0,0,.66);
    --judge-ink-3:         rgba(0,0,0,.5);
    --judge-ink-4:         rgba(0,0,0,.38);
    --judge-hair:          rgba(0,0,0,.1);
    --judge-hair-2:        rgba(0,0,0,.18);
    --judge-soft:          rgba(0,0,0,.04);
    --judge-soft-hi:       rgba(0,0,0,.12);
    --judge-accent:        #a16207;              /* amber inchis, lizibil pe deschis */
    --judge-on-accent:     #fff;
    --judge-accent-soft:   rgba(161,98,7,.12);
    --judge-accent-border: rgba(161,98,7,.34);
    --judge-accent-hair:   rgba(161,98,7,.22);
    --judge-accent-faint:  rgba(161,98,7,.08);
    --judge-bar-rest:      rgba(0,0,0,.05);
    --judge-bar-rest-hi:   rgba(0,0,0,.09);
    --judge-bar-rest-sel:  rgba(0,0,0,.06);
    --judge-rev-txt:       rgba(0,0,0,.75);
    --judge-pen-slip:      #a16207;
    --judge-pen-crash:     #c2410c;
    --judge-pen-wipe:      #b91c1c;
    --judge-pen-ink:       #9a3412;
    --judge-pen-soft:      rgba(194,65,12,.12);
    --judge-pen-border:    rgba(234,88,12,.45);
    --judge-danger-bg:     #b91c1c;
    --judge-danger-ink:    #fff;
}

/* --- Chrome jurat (tema + limba RO/EN) — UN cluster, ancorat ABSOLUT in banda .crit-header
       (deci in interiorul cardului, aliniat cu headerul — nu overlay peste marginea lui).
       Starile fara criteriu (idle, „toate votate") randeaza .crit-header--bare, ca sa nu
       ramana juratul fara controale.
       Fostul topbar (nume jurat · concurs) a fost scos ca sa castigam inaltime pe telefon:
       numele juratului + categoria stau in .j-vote-id (deasupra butonului de trimitere).
       Cele doua controale au ACEEASI carcasa (2.2rem, hairline 1px, radius 8px) → un singur
       obiect vizual. Latimea e SSOT in --judge-chrome-w: crit-header o rezerva simetric ca
       numele criteriului sa ramana centrat. --- */
.judge-chrome {
    position: absolute; top: .25rem; right: .5rem; z-index: 3;
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .3rem;
}
.judge-chrome__theme {
    width: var(--judge-ctl-h); height: var(--judge-ctl-h); flex-shrink: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--judge-hair-2);
    border-radius: 6px; color: var(--judge-ink-2); font-size: var(--font-md); cursor: pointer;
    line-height: 1;
}
.judge-chrome__theme:hover { color: var(--judge-ink); border-color: var(--judge-ink-3); }

/* Comutator limba (ADR 0013 Faza 1) — segmented cu steaguri, pe ACEEASI carcasa ca toggle-ul de
   tema (2.2rem, hairline, radius 8px): doua tile-uri, nu doua linkuri. Starea se citeste ca la
   .filter-pill din restul UI-ului: inactiv = desaturat si stins, activ = culoare plina + fundal
   ridicat + bara de accent inferioara. Fara text vizibil (latimea e buget scump pe telefon) —
   sensul sta in aria-label/title (endonim). */
.judge-lang {
    display: inline-flex; align-items: stretch; height: var(--judge-ctl-h);
    border: 1px solid var(--judge-hair-2); border-radius: 6px; overflow: hidden;
}
.judge-lang__opt {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .25rem; text-decoration: none;
    filter: grayscale(1); opacity: .45; transition: opacity .12s, filter .12s, background .12s;
}
.judge-lang__opt:hover { filter: grayscale(0); opacity: .8; background: var(--judge-soft); }
.judge-lang__opt.is-active {
    filter: none; opacity: 1; background: var(--judge-soft-hi);
    box-shadow: inset 0 -2px 0 var(--judge-accent);
}
.judge-lang__opt + .judge-lang__opt { border-left: 1px solid var(--judge-hair-2); }
/* Steag: caseta e fixa (segmentele ramin egale), imaginea sta INTREAGA in ea (`contain`) —
   RO e 2:3, GB e 1:2, deci fara `contain` una din ele s-ar deforma. */
.judge-lang__flag { display: block; width: 1.05rem; height: .66rem; object-fit: contain; }

/* Ecran foarte ingust: clusterul cade pe doua randuri (tema sus, limba dedesubt) — se rezerva
   in crit-header doar latimea unui element, iar headerul creste cu un rand de control. */
@media (max-width: 360px) {
    /* max-width = latimea celui mai LAT element (segmentul de limba): mai mic si el ar depasi
       containerul spre dreapta, in afara ecranului. Cele doua impreuna o depasesc → wrap. */
    .judge-page { --judge-chrome-w: 3.8rem; }
    .judge-chrome { max-width: 3.3rem; }
    .crit-header { min-height: calc(2 * var(--judge-ctl-h) + .3rem + .5rem); }
}

/* Iconita temei = derivata din <html data-theme>, NU pusa din JS: butonul are ambele glife si
   CSS arata una. Sursa unica de adevar = atributul, deci starea corecta supravietuieste oricarei
   re-randari de markup (swap de polling, Turbo). Se arata ce OBTII la click. */
.theme-ico--sun { display: none; }
[data-theme="dark"] .theme-ico--sun { display: inline-block; }
[data-theme="dark"] .theme-ico--moon { display: none; }

/* --- Banner conexiune pierduta — overlay fixed (zero layout shift), aprins/stins din
       judge-panel.js la >=2 esecuri consecutive de fetch respectiv primul succes --- */
.judge-conn {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1080;
    display: none;
    padding: .5rem .75rem;
    text-align: center;
    font-size: var(--font-sm); font-weight: 600;
    background: var(--judge-danger-bg); color: var(--judge-danger-ink);
}
.judge-conn--on { display: block; }

/* --- Bar chart (un grid per skill) --- */
/* Bare clickabile pe TOATA inaltimea — umplerea vizuala = gradient pana la --fill;
   restul (sus) = zona faint, dar tot clickabila (tinta mare, usor de nimerit).
   Mobile-first: grid mai INALT pe telefon (degete), compact pe desktop.
   Compactat 2026-07-10 (5.4→3.4rem): 2 concurenti × 2 subcriterii trebuie sa incapa pe un ecran
   de telefon fara scroll.
   Injumatatit 2026-07-31 (3.4→1.75rem mobil, 3.2→1.6rem desktop, ~25px): mai multe coloane si
   subcriterii pe un ecran, fara scroll. */
/* Inaltimea barei: fluida pe inaltimea FERESTREI, dar cu praguri care apara ambele constrangeri —
   maximul = ~25px (cerere explicita), deci nu poate creste si nu poate strica „incap concurentii
   in view"; minimul = --judge-bar-h-min (24px) = pragul WCAG 2.2 SC 2.5.8 Target Size (Minimum,
   nivel AA), deci nu poate scadea sub tinta legala. Efectul real: pe fereastra scunda barele se
   strang un pic si recupereaza randuri, pe ecran inalt raman neschimbate.
   ATENTIE a11y: 24-28px e SUB ghidajul de touch al platformelor (44px Apple HIG / 48dp Material /
   WCAG 2.5.5 AAA) — de aceea podeaua nu mai e --tap-min. Ramane conform AA pentru ca scara de note
   se trateaza ca O SINGURA tinta cu valoare aleasa dupa POZITIE (nota WCAG 2.5.8 de mai jos), nu ca
   N butoane independente. Daca in sala se dovedeste greu de nimerit cu degetul, se creste inapoi
   dintr-un singur loc: --judge-bar-h-min + cele doua plafoane. */
/* Latimea scarii se adapteaza la CATE trepte are, nu la o valoare fixa. O scara 1..20 cu min-width
   1.4rem/bara cerea ~505px doar pentru o coloana — pe telefon cu 2 concurenti dadea pe dinafara.
   Gap-ul si latimea minima a barei scad odata cu coloana (`cqi` = latimea lui .judge-col, containerul
   declarat mai jos), cu PLAFONUL = valoarea de dinainte: nimic nu creste, deci nimic din ce incapea
   nu se poate strica; se poate doar stramta cand scala e lunga.
   A11y: WCAG 2.5.8 trateaza controalele unde valoarea se alege dupa POZITIA in interiorul tintei
   (slidere cu valori granulare) ca pe O SINGURA tinta, nu ca pe N butoane — scara de note e exact
   asta, iar inaltimea ei ramane peste --tap-min. */
.sc-grid { display: flex; align-items: stretch; gap: clamp(1px, .5cqi, 3px); height: clamp(var(--judge-bar-h-min), 4.5vh, 1.75rem); }
/* Gradientul barei: hue-ul (rosu 0 -> verde 120) vine per bara din --bh (randat in Twig,
   inline custom-prop = exceptia dinamica documentata); saturatia/luminozitatea = literale
   per tema (dark aici, light in override-ul de mai jos). */
.sc-bar {
    flex: 1; min-width: clamp(.5rem, 3.2cqi, 1.4rem); height: 100%;
    display: flex; align-items: flex-end; justify-content: center;
    cursor: pointer; border-radius: 4px; position: relative;
    /* Container de interogare: nota din bara (.sc-num) se dimensioneaza in `cqw` = procent din
       latimea ACESTEI bare. Bara e `flex: 1`, deci latimea ei depinde de cate bare are scala
       (maxScore) si de cate coloane are grila (1-4 concurenti) — o valoare fixa sau raportata la
       viewport nu poate urmari asta. Cifra creste si scade cu bara, nu cu ecranul. */
    container-type: inline-size;
    background: linear-gradient(to top,
        hsl(var(--bh,60), 55%, 18%) var(--fill,100%),
        var(--judge-bar-rest) var(--fill,100%));
    transition: background .12s, box-shadow .12s;
}
.sc-bar:hover { background: linear-gradient(to top,
        hsl(var(--bh,60), 66%, 30%) var(--fill,100%),
        var(--judge-bar-rest-hi) var(--fill,100%)); }
/* Selectia = gradient viu + halou + CONTUR de cerneala (vizibil garantat pe dark SI pe light) */
.sc-bar.sel { background: linear-gradient(to top,
        hsl(var(--bh,60), 82%, 50%) var(--fill,100%),
        var(--judge-bar-rest-sel) var(--fill,100%));
    box-shadow: 0 0 14px hsl(var(--bh,60), 82%, 42%);
    outline: 2px solid var(--judge-ink); outline-offset: 1px;
    /* Conturul si haloul se picteaza IN AFARA cutiei, iar gap-ul dintre bare e de 1-3px pe o scara
       lunga — deci ies peste vecini. Fara z-index, bara URMATOARE (mai tarziu in DOM, la fel de
       „auto") se picteaza peste ele: la 1..20, alegand 12, culoarea lui 13 taia conturul lui 12.
       `container-type` de mai sus face din fiecare bara propriul context de stivuire, deci un
       singur pas o ridica peste toti fratii. */
    z-index: 1; }
[data-theme="light"] .judge-page .sc-bar { background: linear-gradient(to top,
        hsl(var(--bh,60), 60%, 78%) var(--fill,100%),
        var(--judge-bar-rest) var(--fill,100%)); }
[data-theme="light"] .judge-page .sc-bar:hover { background: linear-gradient(to top,
        hsl(var(--bh,60), 65%, 68%) var(--fill,100%),
        var(--judge-bar-rest-hi) var(--fill,100%)); }
[data-theme="light"] .judge-page .sc-bar.sel { background: linear-gradient(to top,
        hsl(var(--bh,60), 80%, 42%) var(--fill,100%),
        var(--judge-bar-rest-sel) var(--fill,100%));
    box-shadow: 0 0 14px hsl(var(--bh,60), 80%, 55%); }
.judge-col--locked .sc-bar,
.judge-col--locked .sc-bar:hover { cursor: default; }
/* Nota din bara: FLUIDA pe latimea barei (cqw), cu tokenii ca praguri min/max — pe bara minima
   (1.4rem) ramane lizibila, pe bare late creste in loc sa se piarda. `bottom` in `em` = urmeaza
   propria cifra, deci distanta de baza barei nu se strica la niciun corp de litera. */
.sc-num {
    position: absolute; bottom: .25em;
    /* Pragul de jos coboara la --font-2xs: pe o scara lunga bara ajunge sub 1rem, iar cu podeaua
       veche (--font-xs) cifra depasea bara. Confirmarea exacta a notei ramane oricum in .sc-reveal. */
    /* Plafoanele coborate odata cu bara (2026-07-31, --font-xl→--font-lg si --font-2xl→--font-xl):
       cifra e ancorata la baza barei (`bottom: .25em`), deci ocupa font-size + .25em pe verticala.
       Cu vechiul plafon selectat (1.3rem = 20.8px) asta dadea ~26px intr-o bara de 25px → cifra
       iesea peste marginea de sus. Noile plafoane (16px / 18px) incap in bara la orice latime. */
    font-size: clamp(var(--font-2xs), 46cqw, var(--font-lg));
    font-weight: 700; color: var(--judge-ink-3); pointer-events: none; line-height: 1;
}
/* Selectata = pe umplerea vivida (lizibil in ambele teme) si cu un prag mai sus pe toata scala. */
.sc-bar.sel .sc-num { color: var(--c-white); font-size: clamp(var(--font-sm), 54cqw, var(--font-xl)); }
@media (min-width: 768px) {
    .sc-grid { height: clamp(var(--judge-bar-h-min), 4.5vh, 1.6rem); }
}

/* --- Skill row (label + grid, stacked vertical). Multi-skill: numele skillului ca DIVIDER
   centrat cu linii stanga/dreapta (——— TEHNICA /6 ———), asezat intre reveal (detaliul notei,
   sus) si grid (notele, jos) → juratul vede clar pe ce scala apasa (Tehnica vs Variatie).
   Liniile stau pe mijlocul fontului (align-items:center). Fara descriere, fara casuta. --- */
.sk-row { margin-bottom: .35rem; }
.sk-label {
    display: flex; align-items: center; gap: .5rem;
    font-size: var(--font-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    color: var(--judge-accent); margin: .1rem 0 .3rem;
}
.sk-label::before, .sk-label::after { content: ""; flex: 1; height: 1px; background: var(--judge-accent-border); }
.sk-name { font-size: var(--font-sm); }
.sk-max { color: var(--judge-ink-3); font-weight: 700; }


/* --- Header criteriu — MEREU vizibil (juratul nu trebuie sa uite ce jurizeaza).
   Un skill = numele lui mare; multi-skill = numele sistemului + subcriteriile enumerate. --- */
/* min-height = inaltimea clusterului de chrome + offsetul lui: banda nu poate fi mai scunda decat
   controalele ancorate in ea (altfel ii ies din hairline). Derivat din --judge-ctl-h, nu magic. */
/* container-type: numele criteriului se dimensioneaza in `cqi` = latimea RAMASA a benzii (cutia de
   continut, deci fara rezerva de chrome). Maximul = valoarea de dinainte, minimul mai jos → pe
   telefon numele lung intra pe un rand in loc sa se rupa pe doua = un rand recuperat. */
.crit-header { position: relative; container-type: inline-size; text-align: center; padding: .5rem var(--judge-chrome-w) .35rem; min-height: calc(var(--judge-ctl-h) + .5rem); border-bottom: 1px solid var(--judge-hair); }
.crit-header__name { font-size: clamp(var(--font-lg), 9cqi, var(--font-2xl)); font-weight: 900; color: var(--judge-ink); line-height: 1.04; letter-spacing: -.02em; text-transform: uppercase; }
.crit-header__sub { font-size: var(--font-md); color: var(--judge-ink); margin-top: .18rem; line-height: 1.2; }
.crit-header--multi .crit-header__name { font-size: clamp(var(--font-md), 7.5cqi, var(--font-xl)); }
/* Banda doar-chrome (idle / toate votate): inaltimea vine din min-height-ul lui .crit-header, iar
   hairline-ul de jos apare doar cand banda e chiar capul unui card. */
.crit-header--bare { border-bottom: 0; }
.j-card > .crit-header--bare { border-bottom: 1px solid var(--judge-hair); }

/* --- Bara 0 = penalizare (atingere/interferenta), marcata distinct --- */
.sc-bar--zero { opacity: .9; outline: 1px dashed var(--judge-hair-2); outline-offset: -2px; }

/* --- Reveal ancora per coloana: intre numele concurentului si bare. Slot rezervat
   (min-height = fara salt la prima apasare), .sc-reveal--on = colorat din hue-ul notei.
   LVL + textul pe ACELASI rand (inline) = compact, recuperam randuri; padding/margin mici. --- */
.sc-reveal { margin: .15rem 0 .3rem; padding: .2rem .4rem; border-radius: 6px; min-height: 1.5rem;
    border-left: 3px solid var(--judge-hair-2); background: var(--judge-soft);
    font-size: clamp(var(--font-xs), 4.5cqi, var(--font-sm)); line-height: 1.2; }
.sc-reveal__hint { color: var(--judge-ink-4); font-size: var(--font-xs); }
.sc-reveal--on { border-left-color: hsl(var(--rev-h,60), 72%, 50%); background: hsla(var(--rev-h,60), 55%, 42%, .16); }
.sc-reveal--on .sc-reveal__lvl { display: inline; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: var(--font-xs); margin-right: .35rem; color: hsl(var(--rev-h,60), 85%, 66%); }
[data-theme="light"] .judge-page .sc-reveal--on .sc-reveal__lvl { color: hsl(var(--rev-h,60), 85%, 32%); }
.sc-reveal__txt { display: inline; color: var(--judge-rev-txt); }

/* --- Penalizare crash (battle slot): PROEMINENTA — 4 butoane egale pe un rand,
   tinta touch >= 44px mereu. COD DE CULOARE pe intensitate (slip galben < crash portocaliu
   < wipe rosu), vizibil si inactiv prin banda din stanga; activ = fundal plin. --- */
.pen-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); margin-top: .5rem; }
.pen-row__lbl { grid-column: 1 / -1; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--judge-ink-4); }
.pen-btn {
    min-height: var(--tap-min);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    font-size: var(--font-xs); font-weight: 700; padding: .15rem .4rem; border-radius: 6px;
    border: 1px solid var(--judge-hair-2); border-left-width: 3px;
    background: var(--judge-soft); color: var(--judge-ink-2); cursor: pointer;
}
.pen-btn:hover { border-color: var(--judge-ink-3); }
.pen-btn__pct { font-weight: 400; opacity: .65; font-size: var(--font-2xs); }
.pen-btn[data-pen="slip"]  { border-left-color: var(--judge-pen-slip); }
.pen-btn[data-pen="crash"] { border-left-color: var(--judge-pen-crash); }
.pen-btn[data-pen="wipe"]  { border-left-color: var(--judge-pen-wipe); }
.pen-btn[data-pen="slip"].pen-btn--on  { background: var(--judge-pen-slip);  border-color: var(--judge-pen-slip);  color: var(--c-white); }
.pen-btn[data-pen="crash"].pen-btn--on { background: var(--judge-pen-crash); border-color: var(--judge-pen-crash); color: var(--c-white); }
.pen-btn[data-pen="wipe"].pen-btn--on  { background: var(--judge-pen-wipe);  border-color: var(--judge-pen-wipe);  color: var(--c-white); }
.pen-btn[data-pen="none"].pen-btn--on { background: var(--judge-soft-hi); border-color: var(--judge-ink-3); color: var(--judge-ink); }
.pen-applied { margin-top: .35rem; font-size: var(--font-2xs); font-weight: 700; color: var(--judge-pen-ink); text-align: center; background: var(--judge-pen-soft); border: 1px solid var(--judge-pen-border); border-radius: 4px; padding: .15rem .4rem; }

/* --- Coloane concurenti — mobile-first: STACKED (unul sub altul), side-by-side >= 520px --- */
.judge-cols { display: grid; gap: .4rem; grid-template-columns: 1fr; padding: .5rem; }
.judge-cols--voted { opacity: .6; }

/* Fiecare concurent = o CUTIE delimitata (border subtire rotunjit) → toate datele lui sunt
   inconjurate vizual, se citeste mai usor pe ecranul juratului. Fundal SOLID alternant par/impar
   in interior (barele sunt transparente → tenta uniforma, se distinge cine e cine). Gap mic intre
   cutii = aerisire fara sa umfle mult inaltimea. */
/* container-type: cutia concurentului e referinta pentru tot ce scrie in ea (nume, total, reveal).
   Latimea ei depinde de cati concurenti sunt pe rand (1-4) si de latimea ecranului — deci `cqi`,
   nu `vw`: doi concurenti alaturi si doi stivuiti au acelasi ecran, dar cutii de doua latimi.
   ATENTIE: unitatile `cq*` NU se rezolva la containerul care le declara, ci urca la containerul
   strabun (aici nu exista → viewport) — deci pe .judge-col insusi NU se folosesc, doar in copii. */
.judge-col { padding: .5rem .6rem .4rem; border: 1px solid var(--judge-accent-border); border-radius: 8px;
    background: var(--judge-surface); container-type: inline-size; }
.judge-cols .judge-col:nth-child(even) { background: var(--judge-col-alt); }
/* Prag coborat 768→520: pe telefoanele mici (portret <520) raman stivuite, dar de la ~520px
   (landscape/tableta) trec side-by-side ca sa foloseasca latimea si sa NU mai scrolleze pe vertical. */
@media (min-width: 520px) {
    .judge-cols--2 { grid-template-columns: 1fr 1fr; }
    .judge-cols--3 { grid-template-columns: 1fr 1fr 1fr; }
    .judge-cols--4 { grid-template-columns: 1fr 1fr; }
}
/* Marcaj pozitie pe scena: DOAR STANGA/CENTRU/DREAPTA (fara SUS/JOS/nr), aliniat ca numele —
   mosteneste text-align din .judge-col--r pentru concurentul din dreapta. */
.judge-col__side {
    display: inline-flex; align-items: center; flex-shrink: 0;
    font-size: var(--font-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
    color: var(--judge-accent); background: var(--judge-accent-soft);
    border: 1px solid var(--judge-accent-border); border-radius: 4px;
    padding: .15rem .5rem;
}
/* Numele (+ side badge) aliniate DUPA pozitia pe scena: concurentul din stanga = la stanga, cel
   din mijloc = centrat, cel din dreapta = la dreapta (clasa --l/--c/--r vine din _posClass in
   template, calculata pe coloana grilei). Text-align nu afecteaza grid-urile flex (bare/penalizari). */
.judge-col--c { text-align: center; }
.judge-col--r { text-align: right; }
/* Side badge + nume pe ACELASI rand (in dreptul numelui); pozitionarea randului urmeaza alinierea. */
.judge-col__id { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.judge-col--c .judge-col__id { justify-content: center; }
/* row-reverse impacheteaza la main-start = marginea DREAPTA (fara justify-content, care in
   row-reverse ar inversa iar) → nume la dreapta, badge langa marginea dreapta. */
.judge-col--r .judge-col__id { flex-direction: row-reverse; }
/* Numele concurentului: fluid pe latimea CUTIEI lui. Maximul = valoarea de dinainte, deci nu poate
   creste; pe cutii inguste (3-4 concurenti alaturi) scade → numele lungi („X & Y") intra pe un rand
   in loc sa se rupa pe doua, adica exact ce ne trebuie ca sa incapa concurentii in view. */
.judge-col__name { font-size: clamp(var(--font-sm), 7cqi, var(--font-lg)); font-weight: 900; color: var(--judge-ink); line-height: 1.15; text-transform: uppercase; letter-spacing: -.01em; min-width: 0; }
.judge-col__total {
    font-size: clamp(var(--font-sm), 5cqi, var(--font-base)); font-weight: 700; color: var(--judge-ink-3);
    text-align: center; margin-top: .25rem; padding-top: .3rem;
    border-top: 1px solid var(--judge-hair); min-height: 1.2rem;
}
.judge-col__total.ok { color: var(--judge-ink); }
.judge-col__total.locked { color: var(--judge-accent); }
.judge-col__total .tmax { color: var(--judge-ink-4); font-weight: 400; }

/* --- Card --- */
.j-card { background: var(--judge-surface); border: 1px solid var(--judge-hair); border-radius: 10px; overflow: hidden; margin-bottom: 1rem; }
/* Identitatea (Grupa/Runda · faza · jurat · categorie · max) — mutata din stripul de sus DEASUPRA
   butonului de trimitere (mai putin chrome sus, context langa actiune). */
.j-vote-id {
    font-size: var(--font-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--judge-ink-3); text-align: center; margin-bottom: .5rem;
}
.j-card__hdr-round { color: var(--judge-accent); letter-spacing: .06em; }
.j-card__foot { padding: .6rem .75rem; border-top: 1px solid var(--judge-hair); }
.btn-vote { font-size: var(--font-lg); font-weight: 700; padding: .65rem 1rem; border-radius: 8px; width: 100%; min-height: max(var(--tap-min), 3.25rem); }
.btn-vote:disabled { opacity: .35; cursor: not-allowed; }
/* Buton cu stare de trimitere: AMBELE etichete stau în markup, comutate din CSS. Textul rămâne astfel
   în catalogul de traduceri (translation:extract nu vede .js) și supraviețuiește oricărei re-randări.
   `is-busy` vine din JS pentru că e stare EFEMERĂ de interacțiune, nu stare pe care o știe serverul.
   Perechea e generică — o folosesc și .btn-vote, și .flow-btn; fără blocuri per-componentă. */
.btn-swap__busy { display: none; }
.is-busy .btn-swap__idle { display: none; }
.is-busy .btn-swap__busy { display: inline; }
/* Cât ține trimiterea, barele nu mai primesc tap-uri — o clasă pe pagină, nu style inline pe fiecare bară. */
.judge-page.is-submitting .sc-bar { pointer-events: none; }


/* --- Waiting banner --- */
.waiting-banner {
    display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem;
    background: var(--judge-accent-faint); border-top: 1px solid var(--judge-accent-hair);
    color: var(--judge-ink-2); font-size: var(--font-md);
}
.waiting-banner--lg { padding: 1.2rem .75rem; }
.waiting-banner .spin { animation: spin 1.8s linear infinite; color: var(--judge-accent); font-size: var(--font-xl); flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.waiting-banner strong { color: var(--judge-accent); }
.waiting-banner__sub { font-size: var(--font-xs); color: var(--judge-ink-3); }

/* --- Idle / toate scorurile trimise --- */
/* Categorie greșit configurată (sistem de jurizare fără criterii): blocant, nu decorativ — juratul
   trebuie să înțeleagă din prima că nu are ce nota, nu să încerce și să eșueze mut. */
.judge-misconfig {
    margin: var(--space-2) 0; padding: var(--space-3); border-radius: 8px;
    border: 1px solid var(--judge-danger, #c0392b); color: var(--judge-danger, #c0392b);
    font-size: var(--font-sm); font-weight: 700; text-align: center;
}
.judge-idle { text-align: center; padding: clamp(1.25rem, 6vh, 3rem) 0; }
.judge-idle__icon { font-size: var(--font-9xl); }
.judge-idle__hint { color: var(--judge-ink-3); }
.judge-idle__sub { margin-top: .5rem; font-size: var(--font-xs); color: var(--judge-ink-4); }

/* --- Identitatea categoriei pe ecranul juratului (ADR 0018) ---
   Prima linie, în toate stările. Un concurs poate avea trei „Breaking 1v1" (open, U18, Femei), iar
   ecranul se mută singur — deci juratul trebuie să poată citi dintr-o privire pe care e, altfel nici
   nu poate semnala o comutare greșită. Aranjament fluid: insignele pică pe rând, una câte una. */
.j-cat {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: clamp(.25rem, 1.2vw, .5rem);
    margin: .35rem 0 .5rem;
}
.j-cat__nm {
    font-size: var(--font-md); font-weight: 800; line-height: 1.1;
    text-transform: uppercase; letter-spacing: .03em; color: var(--judge-ink-1);
}
/* Discriminatorii (U18, Femei) — pe accent, fiindcă ei sunt diferența dintre două categorii cu
   același nume; numele singur nu spune nimic într-un concurs cu trei „Breaking 1v1". */
.j-cat__disc {
    font-size: var(--font-2xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    padding: .05rem .4rem; border-radius: 999px;
    color: var(--judge-accent); background: var(--judge-accent-soft);
    border: 1px solid var(--judge-accent-border);
}

/* --- Banda de jos a ecranului de jurat (ADR 0018) ---
   Tot ce nu ține de nota curentă (datoria din altă categorie, desfășurarea head coach-ului) stă jos,
   în zona degetului mare. Juratul NU are navigație aici: ce vede e ce a pornit organizatorul.
   NU `position: fixed`: pagina juratului e un card care se termină natural — la fel ca decizia de la
   clusterul de chrome. */
.judge-bar { margin-top: .75rem; }

/* --- Head-coach flow (B25): panoul de desfășurare al primului jurat --- */
.flow-panel { margin: 0 0 1rem; padding: .6rem .75rem; background: var(--judge-surface); border: 1px solid var(--judge-accent-border); border-radius: 10px; }
.flow-panel__lbl { font-size: var(--font-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--judge-accent); margin-bottom: .45rem; }
/* Datoria din ALTĂ categorie (ADR 0018). Stă ULTIMA în bandă și e vizibil mai mică decât controalele
   categoriei de pe ecran: două butoane „Finalizează" identice, unul sub altul, despre battle-uri
   diferite = exact configurația în care head coach-ul declară din greșeală câștigătorul altei
   categorii. Muchia pe accent o ține totuși vizibilă — e o decizie care așteaptă, nu un detaliu. */
.flow-panel--duty { border-left: 3px solid var(--judge-accent); padding: .45rem .6rem; }
.flow-btn--sm { min-height: var(--tap-min); font-size: var(--font-sm); font-weight: 700; }
.flow-btn {
    width: 100%; min-height: max(var(--tap-min), 3.25rem);
    font-size: var(--font-lg); font-weight: 800; border-radius: 8px; cursor: pointer;
    background: var(--judge-accent-soft); color: var(--judge-accent);
    border: 1px solid var(--judge-accent-border);
}
.flow-btn:hover { background: var(--judge-accent); color: var(--judge-on-accent); }
.flow-btn--hot { background: var(--judge-accent); color: var(--judge-on-accent); border-color: var(--judge-accent); }
.flow-btn--hot:hover { filter: brightness(1.06); }
.flow-btn:disabled { opacity: .5; cursor: wait; }
/* Cronometru: acțiune SECUNDARĂ și repetată în cadrul unui battle → pătrat, în stânga, nu lat cât
   panoul. Latura = --tap-min, deci rămâne țintă de atins cu degetul chiar dacă e mic vizual. */
.flow-form--sq { display: flex; justify-content: flex-start; }
.flow-btn--sq {
    width: auto; aspect-ratio: 1; min-width: max(var(--tap-min), 3.25rem);
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .1rem; font-size: var(--font-lg);
}
.flow-btn--sq .btn-swap__idle { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.flow-btn__s { font-size: var(--font-2xs); font-weight: 700; line-height: 1; opacity: .8; }


/* === 10c. CATEGORY SHOW ==================================== */

.cat-panel-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: .32rem .65rem;
    background: var(--paper-2);
    border-top: 2px solid var(--border-strong);
    border-bottom: 1px solid var(--border-hair);
    font-family: var(--font-display);
    font-size: var(--font-xs); font-weight: 900; text-transform: uppercase;
    letter-spacing: .1em; color: var(--fg1); margin-bottom: .35rem;
}
.cat-panel-hdr--active { border-left: 3px solid var(--volt-ink); background: var(--volt); color: var(--volt-ink); }
.cat-panel-hdr--done   { border-left: 3px solid var(--success); background: var(--success-soft); color: var(--success); }
.cat-panel-hdr--info   { border-left: 3px solid var(--status-closed-fg); }

.config-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--card); border: 1px solid var(--border-hair); border-radius: var(--radius-sm);
    padding: .15rem .5rem; font-size: var(--font-xs); color: var(--fg2);
}
.config-pill__val { font-family: var(--font-mono); font-weight: 700; color: var(--fg1); }

/* Tabs categorie */
.cat-tabs .nav-link { font-size: var(--font-sm); padding: .3rem .75rem; color: var(--text-muted); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.cat-tabs .nav-link.active {
    font-weight: 700; color: var(--text);
    background: var(--surface);
    border-color: var(--border-hair) var(--border-hair) var(--surface);
}
.cat-tabs .nav-link .tab-badge { font-size: var(--font-3xs); vertical-align: middle; margin-left: 3px; }





/* Grid de grupe calificare — 2 carduri/rând mobil, 4/rând desktop */
.bouts-groups-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-top: .35rem;
}
@media (min-width: 768px) {
    .bouts-groups-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Card grupă — background se umple orizontal pe măsură ce votează jurații (--fill dinamic) */
.bgc {
    position: relative;
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-sm);
    background: var(--card);
    overflow: hidden;
    font-size: var(--font-base);
}
.bgc::before {
    content: ""; position: absolute; inset: 0;
    width: var(--fill, 0%);
    background: color-mix(in srgb, var(--volt) 38%, transparent);
    transition: width .3s ease;
    z-index: 0; pointer-events: none;
}
.bgc--done::before { width: 100%; background: color-mix(in srgb, var(--success) 26%, transparent); }
.bgc--done   { border-color: var(--success); background: var(--success-soft); }
.bgc--active { border-color: var(--volt-ink); background: var(--volt); }

.bgc__hdr {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 4px;
    font-family: var(--font-display);
    font-size: var(--font-md); font-weight: 900;
    text-transform: uppercase; letter-spacing: .08em;
    padding: .15rem .35rem;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    border-bottom: 1px solid var(--border-hair);
    color: var(--fg3);
}
.bgc--done .bgc__hdr   { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); border-color: var(--success); }
.bgc--active .bgc__hdr { color: var(--volt-ink); background: color-mix(in srgb, var(--text) 10%, transparent); border-color: var(--volt-ink); }
.bgc__ord { white-space: nowrap; }
.bgc__state { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-sm); opacity: .85; }
.bgc--pending { opacity: .72; }
.bgc--pending .bgc__state { color: var(--fg4); }
/* Rundă de departajare (tie-break) — accent golden ca să iasă din grupele normale (B24).
   După regulile de stare → câștigă pe antet chiar și când e „done". */
.bgc--golden { border-color: var(--on-golden); opacity: 1; }
.bgc--golden .bgc__hdr { color: var(--on-golden); background: var(--golden-soft); border-color: var(--on-golden); }
.bgc__live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--volt-ink); display: inline-block;
    animation: bgc-pulse 1.2s ease-in-out infinite;
}
@keyframes bgc-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.bgc__row {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 4px;
    padding: .18rem .3rem;
    border-bottom: 1px solid var(--border-hair);
    min-width: 0;
}
.bgc__row:last-child { border-bottom: none; }

.bgc__dot {
    width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0;
    background: var(--border-hair);
}
.bgc__dot--done   { background: var(--success); }
.bgc__dot--active { background: var(--volt-ink); }

.bgc__name {
    flex: 1; min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    color: var(--fg1); font-weight: 600;
    line-height: 1.3;
}
.bgc--done .bgc__name   { color: var(--success); }
.bgc--active .bgc__name { color: var(--volt-ink); }
.bgc__crew { color: var(--fg3); font-weight: 400; }

/* Listă calificați — 2 coloane jumate/jumate (stivuite pe mobil) + iconiță metodă */
.qual-2col { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 768px) { .qual-2col { grid-template-columns: 1fr 1fr; } }
.qual-method { font-size: var(--font-3xs); margin-left: .3rem; vertical-align: middle; }
/* Celula nume = flex → marcajul ⚖ (departajare) împins la dreapta, aliniat în coloană */
.qual-name-cell { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.qual-name-cell .e-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qual-name-cell .qual-method { margin-left: auto; flex-shrink: 0; }
.qual-method--tie_break { color: var(--primary); }
/* Invitat = calificat direct (fără scor/voturi) — marcaj ★ pe rândul din tabelul de calificați */
.qual-method--invited { color: var(--primary); }
/* Voturile juriului (decidentul PRIMAR) — coloană proeminentă X/Y; plin (toți jurații) = verde */
.qual-votes {
    display: inline-block; min-width: 2.2rem; text-align: center;
    font-family: var(--font-mono); font-size: var(--font-xs); font-weight: 700;
    color: var(--fg2); background: var(--surface-2);
    border: 1px solid var(--border-hair); border-radius: 4px; padding: 0 .3rem;
}
.qual-votes--full { color: var(--success); border-color: var(--success); background: transparent; }
.qual-legend { font-size: var(--font-2xs); color: var(--text-muted); margin: .4rem .15rem 0; line-height: 1.45; }
.qual-cutline {
    display: flex; align-items: center; gap: .5rem;
    margin: .6rem 0 .25rem; font-family: var(--font-display); font-weight: 900;
    font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-faint);
}
.qual-cutline::before, .qual-cutline::after { content: ""; flex: 1; height: 0; border-top: 1px dashed var(--border-hair); }
.qual-out-table { opacity: .72; }
.qual-row--out td { color: var(--text-muted); }

/* Bouturi compacte */
.bout-compact { font-size: var(--font-md); }
.bout-compact .bout-group { border: 2px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: .3rem; }

.bout-compact .bout-row {
    display: flex; align-items: center; gap: .35rem;
    padding: .18rem .45rem; border-bottom: 1px solid var(--border-hair);
    font-size: var(--font-md);
}
.bout-compact .bout-row:last-child { border-bottom: none; }
.bout-compact .bout-row:nth-child(even) { background: var(--row-odd-bg); }
.bout-compact .bout-row:hover { background: var(--row-hover-bg) !important; color: var(--volt-ink) !important; cursor: pointer; }
.bout-compact .bout-row__num  { color: var(--fg4); font-size: var(--font-xs); width: 1.1rem; flex-shrink: 0; }
.bout-compact .bout-row__name { flex: 1; min-width: 0; }


/* Detalii subtile sub fiecare categorie în sidebar */






/* === 11. ADMIN ============================================= */

.admin-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.75rem; align-items: start;
}
/* Plasare deliberată: row1 = Stiluri(3) Formate(3) Utilizatori(6); row2 = Sisteme(12); row3 = Dansatori(12) */
.admin-section--c3  { grid-column: span 3; }
.admin-section--c6  { grid-column: span 6; }
.admin-section--c12 { grid-column: span 12; }
.admin-section--o1 { order: 1; }
.admin-section--o2 { order: 2; }
.admin-section--o3 { order: 3; }
.admin-section--o4 { order: 4; }
.admin-section--o5 { order: 5; }
@media (max-width: 992px) {
    .admin-section--c3, .admin-section--c6, .admin-section--c12 { grid-column: 1 / -1; }
}
.admin-section {
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.admin-section__header {
    font-family: var(--font-display);
    font-size: var(--font-xs); font-weight: 900; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--fg1);
    padding: 0.4rem 0.6rem;
    background: var(--surface-inverse); color: var(--text-on-inverse);
    border-bottom: var(--border);
}
.admin-section__hint { font-size: var(--font-xs); font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.5); margin-left: 0.4rem; }

.admin-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.3rem 0.6rem; font-size: var(--font-md);
    border-bottom: 1px solid var(--border-hair);
    background: var(--card);
}
.admin-item:last-child { border-bottom: none; }
.admin-item:hover { background: var(--paper-2); }





.admin-sys-badge { font-size: var(--font-2xs); font-weight: 700; padding: 1px 6px; border-radius: var(--radius-sm); }
.admin-sys-badge--ok   { background: var(--success-soft); color: var(--success); }
.admin-sys-badge--warn { background: var(--warning-soft); color: var(--warning); }

.admin-skill-tag { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-xs); background: var(--paper-2); border: 1px solid var(--border-hair); border-radius: var(--radius-sm); padding: 1px 5px; color: var(--fg2); }
.admin-skill-tag__max { color: var(--fg4); font-family: var(--font-mono); }
.admin-skill-tag__del { color: var(--danger); cursor: pointer; background: none; border: none; padding: 0; line-height: 1; font-size: var(--font-xs); }
.admin-skill-tag__del:hover { color: var(--primary-strong); }
.admin-skill-tag--anchored { border-color: var(--success); }
.admin-skill-tag__anchor { color: var(--fg4); cursor: pointer; background: none; border: none; padding: 0; line-height: 1; font-size: var(--font-xs); }
.admin-skill-tag__anchor:hover { color: var(--primary-strong); }
.admin-skill-tag--anchored .admin-skill-tag__anchor { color: var(--success); }

/* Barem ancorat — panou editare per skill */
.anchor-panel { width: 100%; }
.anchor-form {
    width: 100%; margin-top: 0.2rem;
    border: 1px solid var(--border-hair); border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm); background: var(--paper-2); padding: 0.5rem 0.6rem;
}
.anchor-form__title {
    font-family: var(--font-display);
    font-size: var(--font-xs); font-weight: 900; text-transform: uppercase;
    letter-spacing: .08em; color: var(--fg1);
}
.anchor-form__max { color: var(--fg4); font-family: var(--font-mono); }
.anchor-form__hint { font-size: var(--font-xs); color: var(--fg3); margin: 0.15rem 0 0.45rem; }
.anchor-row { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.25rem; }
.anchor-row__score { flex-shrink: 0; width: 1.3rem; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: var(--font-sm); color: var(--fg2); }
.anchor-row__label { flex-shrink: 0; width: 92px; }
.anchor-row__text { flex: 1; min-width: 0; }
.anchor-row--penalty .anchor-row__score { color: var(--danger); }

.bout-group {
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 0.4rem;
}


.bout-row {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--border-hair);
    font-size: var(--font-md); background: var(--card);
}
.bout-row:last-child { border-bottom: none; }
.bout-row__num    { color: var(--fg4); font-size: var(--font-xs); width: 1.2rem; flex-shrink: 0; font-family: var(--font-mono); }
.bout-row__name   { flex: 1; min-width: 0; }
.bout-row__status { flex-shrink: 0; }

.admin-table { width: 100%; font-size: var(--font-md); border-collapse: collapse; }
.admin-table th {
    font-family: var(--font-display);
    font-size: var(--font-xs); font-weight: 900; text-transform: uppercase;
    letter-spacing: .1em; color: var(--text-on-inverse);
    padding: 0.3rem 0.6rem; border-bottom: 2px solid var(--border-strong); background: var(--surface-inverse);
}
.admin-table td { padding: 0.28rem 0.6rem; border-bottom: 1px solid var(--border-hair); vertical-align: middle; background: var(--card); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--paper-2); }
.admin-table .col-actions { width: 1%; white-space: nowrap; text-align: right; }

/* Grid traduceri (i18n Faza 2) — coloane fixe + textarea confortabil pt conținut */
.trad-table { table-layout: fixed; }
.trad-table td { vertical-align: top; }
.trad-col-ent { width: 20%; }
.trad-col-field { width: 13%; }
.trad-col-src { width: 26%; }
.trad-col-status { width: 6rem; }
.trad-table td .form-control { min-height: 2.6rem; resize: vertical; }
.trad-table td, .trad-table th { word-break: break-word; }

/* Sisteme de jurizare — grilă carduri (≈3 coloane după lățime) */
.judging-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 0.5rem; padding: 0.5rem 0.6rem;
    align-items: start;
}
.judging-card {
    border: 1px solid var(--border-hair); border-radius: var(--radius-sm);
    background: var(--card); padding: 0.4rem 0.5rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.judging-card:hover { background: var(--paper-2); }
/* Sisteme inactive — ascunse implicit, dezvăluite cu toggle „Inactive (N)" */
.judging-card--inactive { display: none; }
.judging-grid--show-inactive .judging-card--inactive { display: flex; opacity: 0.6; }

/* Panele specialiste — grup de sisteme cu 1 skill, un jurat pe rol (OUR-3/OUR-5) */
.panel-strip { border: 1px dashed var(--border-hair); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; margin: 0 0.6rem 0.6rem; display: flex; flex-direction: column; gap: 0.45rem; }
.panel-strip__head { font-size: var(--font-sm); font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.4rem; }
.panel-card { border: 1px solid var(--border-hair); border-radius: var(--radius-sm); background: var(--card); padding: 0.4rem 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.panel-card:hover { background: var(--paper-2); }
.panel-card--inactive { opacity: 0.55; }
.panel-card__head { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.panel-card__actions { margin-left: auto; display: flex; gap: 0.2rem; }
.panel-card__actions form { display: inline; }
.panel-card__roles { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.panel-card__empty { font-size: var(--font-xs); }
.panel-role-chip { display: inline-flex; align-items: baseline; gap: 0.3rem; font-size: var(--font-xs); font-weight: 600; padding: 1px 7px; border-radius: var(--radius-sm); background: var(--paper-2); border: 1px solid var(--border-hair); }
.panel-role-chip__sys { color: var(--fg4); font-weight: 400; }
.panel-strip__create { max-width: 360px; }

/* Copiere jurați dintr-o categorie soră (zero JS: `<details>` + un formular gata randat per sursă).
   Acordeon pe surse prin `<details name>`, ca la .panel-acc — deschizi o sursă, se închide cealaltă. */
.cpj { margin-top: .35rem; }
.cpj > summary,
.cpj__src > summary {
    display: flex; align-items: center; gap: .3rem;
    cursor: pointer; user-select: none; list-style: none;
    font-size: var(--font-xs); font-weight: 700; color: var(--fg3);
}
.cpj > summary::-webkit-details-marker,
.cpj__src > summary::-webkit-details-marker { display: none; }
.cpj > summary:hover, .cpj__src > summary:hover { color: var(--fg1); }
.cpj__list { padding: .35rem 0 0 .5rem; display: flex; flex-direction: column; gap: .25rem; }
.cpj__src { border-left: 2px solid var(--border-hair); padding-left: .5rem; }
.cpj__count { color: var(--fg4); font-weight: 400; }
.cpj__form { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; padding: .35rem 0; }
.cpj__row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cpj__row--here { opacity: .55; }
.cpj__pick { display: flex; align-items: center; gap: .3rem; font-size: var(--font-xs); cursor: pointer; margin: 0; }
.cpj__note { font-size: var(--font-2xs); color: var(--fg4); }

/* Acordeon panel (native <details name>) — deschide un panel îl închide pe celălalt, zero JS */
.panel-acc { border: 1px solid var(--border-hair); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.panel-acc + .panel-acc { margin-top: 0.35rem; }
.panel-acc--inactive { opacity: 0.6; }
.panel-acc > summary {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
    padding: 0.45rem 0.6rem; cursor: pointer; font-weight: 700; font-size: var(--font-sm);
    list-style: none; user-select: none;
}
.panel-acc > summary::-webkit-details-marker { display: none; }
.panel-acc > summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; font-size: 0.8em; transition: transform 0.15s ease; color: var(--fg4); }
.panel-acc[open] > summary::after { transform: rotate(180deg); }
.panel-acc > summary:hover { background: var(--paper-2); }
.panel-acc__name { font-weight: 800; }
.panel-acc__body { padding: 0.5rem 0.6rem 0.6rem; border-top: 1px solid var(--border-hair); display: flex; flex-direction: column; gap: 0.5rem; }
.panel-acc__actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.panel-acc__actions form { display: inline; }
@media (prefers-reduced-motion: reduce) { .panel-acc > summary::after { transition: none; } }

/* Marcaj panel pe cardul sistemului */
.sys-panel-tag { display: inline-flex; align-items: center; gap: 0.2rem; font-size: var(--font-xs); padding: 1px 7px; border-radius: var(--radius-sm); background: var(--paper-2); border: 1px solid var(--border-hair); align-self: flex-start; }
.sys-panel-tag__form { display: inline; }
.sys-panel-tag__del { border: 0; background: transparent; color: var(--danger); padding: 0 0 0 2px; line-height: 1; cursor: pointer; }
/* Accent culoare per panel — leagă cardul panelului de sistemele membre din grid */
.jacc-0 { border-left: 3px solid #e8590c; }
.jacc-1 { border-left: 3px solid #2f9e44; }
.jacc-2 { border-left: 3px solid #1971c2; }
.jacc-3 { border-left: 3px solid #f08c00; }
.jacc-4 { border-left: 3px solid #9c36b5; }
.jacc-5 { border-left: 3px solid #0c8599; }

/* Dansatori (admin) — grilă carduri compacte (≈4+ coloane după lățime).
   NB: clasa `.dancer-grid` e deja folosită (2-col) pe alte pagini → nume unic aici. */
.admin-dancer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.4rem; padding: 0.45rem 0.6rem;
}
.dancer-card {
    border: 1px solid var(--border-hair); border-radius: var(--radius-sm);
    background: var(--card); padding: 0.3rem 0.45rem;
}
.dancer-card:hover { background: var(--paper-2); }
.dancer-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; }
.dancer-card__id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dancer-card__id strong { font-size: var(--font-md); }
.dancer-card__crew { color: var(--fg3); font-size: var(--font-xs); margin-left: 0.3rem; }
.dancer-card__act { flex-shrink: 0; display: flex; gap: 0.2rem; }
.dancer-card__meta { font-size: var(--font-xs); color: var(--fg4); margin-top: 1px; }
.dancer-card__edit { margin-top: 0.35rem; }
.dancer-edit-form { display: flex; flex-direction: column; gap: 0.3rem; }


/* === 11b. CONTEST EDIT — /cont/{id}/edit ============== */

.ecat { border: 2px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); margin-bottom: .5rem; }
.ecat__hdr {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: .3rem .6rem; background: var(--paper-2);
    border-bottom: 1px solid var(--border-hair);
}
.ecat__title { font-family: var(--font-display); font-size: var(--font-md); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.ecat__meta { font-size: var(--font-xs); color: var(--fg3); font-weight: 400; text-transform: none; letter-spacing: 0; }
.ecat__body { padding: .5rem .65rem; }
.rounds-form { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.config-pill--lock { opacity: .6; border-style: dashed; }
.inp-poster { max-width: 160px; }
.edit-locked-note {
    font-size: var(--font-xs); color: var(--fg3);
    display: inline-flex; align-items: center; gap: 4px;
}

/* Câmp modificat dar nesalvat — semnal vizual (form-dirty.js îl pune/scoate). Bară accent la stânga. */
.is-dirty {
    border-color: var(--accent) !important;
    box-shadow: inset 3px 0 0 0 var(--accent);
}

/* Bară unică de salvare, lipită jos — un singur „Salvează modificările" pentru tot ce e configurabil. */
.edit-savebar {
    position: sticky; bottom: 0; z-index: 10;
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-top: .75rem; padding: .55rem .7rem;
    background: var(--surface);
    border: 2px solid var(--border-strong); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-hard-sm);
    transition: border-color .15s ease, background-color .15s ease;
}
/* Stare „nesalvat" — semnal vizual în pagină (fără popup), accent pe bară + status. */
.edit-savebar--dirty { border-color: var(--accent); background: var(--bg-elevated); }
.savebar-status {
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
    letter-spacing: .06em; font-size: var(--font-xs); color: var(--accent);
}

/* Flash = toast fix, vizibil indiferent de scroll (sub navbar, centrat). Auto-dispar prin flash-toast.js. */
.flash-stack {
    position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
    z-index: 1080; width: min(560px, 92vw);
    display: flex; flex-direction: column; gap: .4rem; pointer-events: none;
}
.flash-stack:empty { display: none; }
.flash-toast { pointer-events: auto; margin: 0; box-shadow: var(--shadow-hard-sm); }


/* === 12. PUBLIC — /concursuri ============================== */

/* Pagina LIVE = proiector fullscreen, fără chrome. Clasă pe <body> (NU body{} inline — evită
   bug-ul de fundal scurs prin reconcilierea <head> la navigare Turbo, vezi UI_RULES). */
.live-projector { background: var(--paper); min-height: 100vh; }
/* Proiector = lățime MAXIMĂ (datele trebuie citite din sală), conținut CENTRAT pe ambele axe.
   app-wrap devine coloană flex pe înălțimea ecranului; conținutul (.row) ia margin-block auto =
   centrat vertical când încape, curge normal de sus când depășește (safe, nu taie capul paginii).
   Bate plafonul page-wide 1600px (vine mai târziu în fișier). Zoom-ul A−/A+ = proprietatea CSS
   `zoom` (re-layout real, ca Ctrl+/−) prin --proj-zoom setat pe <html> (morph-ul Turbo atinge
   doar body → variabila supraviețuiește auto-refresh-ului). */
.live-projector .app-wrap {
    max-width: none; padding: 1rem 1.5rem;
    min-height: calc(100dvh - 1rem);   /* -1rem = mt-3 (utilitar !important, nu-l putem tăia) */
    display: flex; flex-direction: column;
}
/* Zoom-ul se aplică pe CONȚINUT (rândul centrat), NU pe wrapperul full-height: pe wrapper,
   min-height-ul de 100dvh se scala și el (130dvh la 1.3×) → spații mari sus/jos și conținut
   împins în afara centrului. Pe rând: wrapperul rămâne exact viewportul, flexul (margin-block
   auto) recentrează conținutul mărit. */
.live-projector .app-wrap > .row { margin-block: auto; zoom: var(--proj-zoom, 1); }
/* Antet + tab-uri centrate orizontal */
/* Proiector: antetul mare de concurs dispare; rămâne antetul categoriei (nume + status + butonul
   Proiector = calea de ieșire din mod), centrat. */
.live-projector .res-hero { display: none; }
/* Banda de categorii RĂMÂNE pe proiector (ADR 0019): e comanda manuală a ecranului — un click
   fixează sala pe o categorie, iar comutatorul din .proj-zoom o dă înapoi pe urmărire. Centrată și
   mai mare, fiindcă se apasă în picioare, lângă proiector, nu cu mouse-ul la 40 cm. */
.live-projector .cat-strip { justify-content: center; gap: .6rem; }
/* Ținta de click, nu doar textul: se apasă în picioare, lângă proiector. Font-size-ul stă pe
   __item (nu pe bandă), altfel regula de bază `--font-xs` de acolo ar câștiga oricum. */
.live-projector .cat-strip__item { font-size: var(--font-md); padding: .35rem .8rem; }
.live-projector .res-cat-head { width: fit-content; max-width: 100%; margin-inline: auto; }
/* Rândul „Înscriși" (tab calificare) — centrat ca restul antetului. */
.live-projector .cat-entries-row { justify-content: center; }
/* Mod prezentare = fără controale de management pe ecranul public (ROUTING_GUIDELINES §2):
   ascunde formularele de acțiune ale ownerului — lifecycle din antet (Deschide/Pornește/
   Rezolvă/Bracket), Start/Finalizează din panoul battle-ului curent, ștergerea/adăugarea
   de înscriși — și notele de lucru ale organizatorului (.owner-note: panel incomplet,
   departajare). Butonul „Proiector" (button simplu, nu form) rămâne = ieșirea din mod.
   `.proj-hide` = aceeași regulă pentru elementele care NU sunt formulare (ex. linkul „Ecran de
   sală": pe proiector ești deja acolo). */
.live-projector .action-group form,
.live-projector .bk-current__ctrl form,
.live-projector .e-chip-del__form,
.live-projector .owner-note,
.live-projector .proj-hide,
.live-projector [data-bs-target^="#f"] { display: none; }
.live-projector .cat-tabs { justify-content: center; }
/* Scoreboard + bracket = UNITATE centrată împreună: scoreboard-ul iese din plafonul de 33%
   (lățime fixă confortabilă), bracketul rămâne la lățimea lui naturală (shrink → .bk-scroll preia),
   perechea e centrată cu justify-content. Alinierea verticală reciprocă = align-self: center existent. */
.live-projector .bk-layout { justify-content: center; }
/* Aceeași adaptare ca pe ecranul organizatorului, dar cu praguri de proiector: panoul are ca BAZĂ
   exact lățimea fixă de dinainte (deci cu bracket mare nimic nu se schimbă), poate CREȘTE în spațiul
   pe care un bracket mic nu-l cere, dar NU se micșorează.
   Bracketul rămâne `flex: 0 1 auto` — dimensionat de conținut, se strânge, dar NU crește; astfel
   surplusul rămas după plafonul panoului devine margine, iar `justify-content: center` de mai sus
   ține grupul centrat, adică exact aspectul de proiector de acum.
   Plafonul e mai generos decât la organizator (65vw vs 60%): aici cardul se citește din fundul sălii,
   deci un battle mare la un bracket de 4 e chiar scopul, nu un exces. */
.live-projector .bk-layout__current { flex: 1 0 min(30rem, 40vw); width: auto; max-width: min(70rem, 65vw); }
.live-projector .bk-layout__bracket { flex: 0 1 auto; }
/* Tabul Calificare: coloanele dense citesc mai bine plafonate + centrate */
.live-projector .tab-pane > .row { max-width: 1500px; margin-inline: auto; }
/* Butoanele de zoom: există în DOM mereu, vizibile DOAR în mod proiector */
.proj-zoom { display: none; }
.live-projector .proj-zoom {
    display: flex; gap: .25rem;
    position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
}

/* Badge-uri tip eveniment */









/* (.badge-style-0..7 eliminate — înlocuite de .style-pill cu hue din name|style_hue) */

/* ── CONTEST GRID — masonry pe coloane (JS: assets/js/masonry-columns.js).
   Card = bandă poster SUS (titlu + meta peste) + categorii dedesubt. Coloanele-s independente
   → expand-ul unei înscrieri crește DOAR coloana cardului (fără salt, fără împins rândul de jos).
   Fallback fără JS = CSS Grid de mai jos. ── */
.bcast-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1280px) { .bcast-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .bcast-grid { grid-template-columns: 1fr; } }
.bcast-grid.is-masonry { display: flex; align-items: flex-start; }   /* JS a construit coloane independente */
.bcast-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }

.ccard {
    background: var(--surface);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hard-sm);
    overflow: hidden;
}

/* HERO — poster bandă sus, full-width, cu titlu + meta PESTE (gradient pt lizibilitate) */
.ccard__hero { position: relative; aspect-ratio: 16 / 9; background: var(--surface-inverse); }
.ccard__hero[data-lightbox] { cursor: zoom-in; }
.ccard__hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ccard__hero-ov  { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: .55rem .65rem; background: linear-gradient(to bottom, transparent 28%, rgba(0,0,0,.84)); }
.ccard__title    { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05; font-size: clamp(1.1rem, 1.5vw, 1.45rem); color: var(--c-white); }
/* Titlul-link spre pagina canonică a concursului — moștenește look-ul titlului, underline la hover */
.ccard__title-link { color: inherit; text-decoration: none; }
.ccard__title-link:hover { text-decoration: underline; }
.ccard__herometa { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .7rem; font-size: var(--font-sm); color: rgba(255,255,255,.88); }
.ccard__herometa i { opacity: .8; }
.ccard__hero-badges { position: absolute; top: 6px; right: 6px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 75%; }
.cbc-days        { font-family: var(--font-mono); font-size: var(--font-xs); font-weight: 700; background: var(--ink); color: var(--text-on-inverse); padding: 2px 7px; border-radius: var(--radius-sm); white-space: nowrap; }
.cbc-days--today { background: var(--primary); color: var(--c-white); }
.ccard__zoom { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.55); color: var(--c-white); font-size: var(--font-2xs); padding: 1px 5px; border-radius: var(--radius-sm); }

/* CATEGORIE — bloc pe 3 rânduri + bară „înscrie-te" full-width jos.
   /concursuri tab Deschise: detaliile = link spre pagina concursului (.ccat__stretch acoperă cardul),
   ÎNSCRIEREA se comută DOAR din butonul .ccat__cta. Elementele interactive (CTA, acțiuni owner,
   „Vezi toți") stau DEASUPRA link-ului prin z-index. Celelalte taburi: .ccat e direct un <a> (link). */
.ccat { display: block; padding: .5rem .65rem .6rem; border-top: 1px solid var(--border-hair); cursor: pointer; text-decoration: none; color: inherit; }
.ccat:first-of-type { border-top: none; }
.ccat:hover { background: var(--bg-elevated); }
.ccat--enroll { position: relative; }
.ccat__stretch { position: absolute; inset: 0; z-index: 1; }
.ccat--enroll .ccat__cta,
.ccat--enroll .cat-actions,
.ccat--enroll .ccat__more-btn { position: relative; z-index: 2; }
.ccat__l1  { display: flex; flex-wrap: nowrap; align-items: center; gap: .25rem; overflow: hidden; }
.ccat__l1 > * { flex-shrink: 0; }
.ccat__row { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; margin-top: .3rem; }
.ccat__row--entries { align-items: flex-start; }   /* zona Înscriși = 2 linii fixe → label la vârf */
.ccat__lbl { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: var(--font-2xs); color: var(--text-muted); margin-right: 2px; }
.ccat__cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .5rem; padding: .35rem .5rem; background: var(--surface-inverse); color: var(--text-on-inverse); border: 2px solid var(--border-strong); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; font-size: var(--font-xs); cursor: pointer; transition: background .1s, color .1s, border-color .1s; }
.ccat__cta .bi-chevron-down { transition: transform .2s; }
.ccat__cta:hover, .ccat__cta[aria-expanded="true"] { background: var(--primary); border-color: var(--primary); color: var(--c-white); }
.ccat__cta[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.ccat-form { padding: .6rem .65rem .7rem; background: var(--bg-elevated); border-top: 2px solid var(--border-strong); }
/* Formular de înscriere adus în prim-plan la deschidere (enroll-scroll.js) → lasă loc sub navbarul
   sticky (~4rem) ca titlul formularului să nu ajungă sub el. */
[data-enroll-form] { scroll-margin-top: 4.5rem; }
.ccat-form .pc-form-title { margin-bottom: .5rem; }
.e-chip-list { display: inline-flex; flex-wrap: wrap; gap: .2rem; }

/* Confirmare „te-ai înscris" în formular — apare, ține câteva secunde, apoi se estompează și se pliază,
   lăsând formularul gol gata de o nouă înscriere (înlocuit prin Turbo Stream). */
@keyframes regDoneFade {
    0%, 60% { opacity: 1; max-height: 3rem; padding-top: .35rem; padding-bottom: .35rem; margin-bottom: .4rem; }
    100%    { opacity: 0; max-height: 0;    padding-top: 0;       padding-bottom: 0;       margin-bottom: 0; }
}
.reg-done {
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
    font-size: var(--font-sm); color: var(--success); overflow: hidden;
    animation: regDoneFade 4.5s ease forwards;
}

/* Lightbox poster — overlay seamless, view-only (poster-lightbox.js) */
body.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.88); padding: 2rem; }
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 95vw; max-height: 92vh; border: 3px solid var(--ink); box-shadow: var(--shadow-hard); }
.lightbox__close { position: absolute; top: 1rem; right: 1.2rem; width: 40px; height: 40px; background: var(--ink); color: var(--c-white); border: 2px solid var(--c-white); border-radius: var(--radius-sm); font-size: var(--font-xl); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox__close:hover { background: var(--primary); border-color: var(--primary); }


/* Form collapse row */


/* Grid formular dancer */
.dancer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; margin-bottom: 0.45rem; }
.dancer-lbl  { font-family: var(--font-display); font-size: var(--font-2xs); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--fg3); margin-bottom: 1px; display: block; }
.pc-form-title { font-family: var(--font-display); font-size: var(--font-xs); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--fg3); margin-bottom: 0.5rem; }

/* Pill spoturi */




/* Judecător pill: [Nume | Meta] — Flash-pink tint */
.j-pill     { display: inline-flex; align-items: stretch; font-size: var(--font-xs); border: 1px solid rgba(255,46,99,.28); border-radius: var(--radius-sm); background: rgba(255,46,99,.07); overflow: hidden; white-space: nowrap; line-height: 1.7; vertical-align: middle; text-decoration: none; }
/* .j-pill ca <a> (link spre pagina juratului, doar owner) — fără underline la hover, cursor arată clickabil. */
a.j-pill:hover { text-decoration: none; border-color: var(--primary); }
.j-pill__n  { padding: 0 5px; font-weight: 700; color: var(--primary-strong); }
.j-pill__m  { padding: 0 5px; background: rgba(255,46,99,.12); color: var(--primary); border-left: 1px solid rgba(255,46,99,.18); font-size: var(--font-2xs); }
/* Staff (DJ/Host) line-up pills — same frame as judge pills, distinct neutral/ink accent. */
.s-pill              { border-color: var(--border-strong); background: var(--surface-2); }
.s-pill .j-pill__n   { color: var(--text); }
.s-pill__r           { display: inline-flex; align-items: center; padding: 0 5px; font-weight: 700; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-inverse); color: var(--text-on-inverse); }
.s-pill .j-pill__m   { background: var(--surface); color: var(--text-muted); border-left-color: var(--border-hair); }

/* Competitor chip simplu */
.e-chip     { display: inline-block; font-size: var(--font-xs); padding: 0 5px; border: 1px solid var(--border-hair); border-radius: var(--radius-sm); background: var(--paper-2); color: var(--fg2); white-space: nowrap; line-height: 1.7; vertical-align: middle; }
.e-chip .e-city { color: var(--fg4); }
/* Zona „Înscriși" = înălțime FIXĂ 2 rânduri de e-chip peste tot (uniform, indiferent de câți).
   Colapsat: max 2 linii + „Vezi toți (N)" (JS); deschis (.is-open): crește inline pe loc.
   ~2.6rem = 2×(line-height 1.7 × .67rem) + gap-ul de wrap; sigur pt gap .2rem (default) ȘI .3rem (kf). */
/* Zona „Înscriși" = înălțime fixă 2 linii (uniform). Pliere LINE-BASED în JS: chip-urile de pe
   linia 3+ se ascund, iar „… Vezi toți (N)" se pune INLINE după ultimul chip vizibil (în flux,
   nu absolut). Deschis (.is-open): tot vizibil + „Ascunde". */
.e-chip-list[data-collapse-entries] { min-height: 2.6rem; align-content: flex-start; }
.ccat__more-btn {
    appearance: none; border: 0; background: none; cursor: pointer;
    margin-left: .2rem; padding: 0 .15rem;
    font-family: var(--font-mono); font-size: var(--font-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; color: var(--primary);
    text-decoration: underline; text-underline-offset: 2px;
}
.ccat__more-btn:hover { color: var(--text); }

/* Competitor chip cu buton X delete — hub /cont + acțiuni organizator (prezență/invitat/șterge).
   Înălțime minimă generoasă (--chip-act-h) ca fiecare acțiune să fie ușor de atins cu degetul; pe
   telefon crește la --tap-min (44px, a11y). */
.e-chip-del {
    --chip-act-h: 1.9rem;
    display: inline-flex; align-items: stretch;
    font-size: var(--font-xs);
    min-height: var(--chip-act-h);
    border: 1px solid var(--border-hair);
    border-radius: var(--radius-sm);
    background: var(--paper-2);
    color: var(--fg2);
    white-space: nowrap;
    line-height: 1.4;
    vertical-align: middle;
    overflow: hidden;
    margin-bottom: 3px;
}
.e-chip-del__name { display: inline-flex; align-items: center; padding: 0 8px; }
.e-chip-del__name .e-city { color: var(--fg4); }
.e-chip-del__form { display: inline-flex; margin: 0; padding: 0; }
/* Butoanele-acțiune (× și ★) = cutii pătrate, lățime confortabilă, separator vizibil între ele. */
.e-chip-del__x,
.e-chip-del__act {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px;
    background: var(--paper-2);
    border: none; border-left: 1px solid var(--border-strong);
    color: var(--fg3); line-height: 1;
    cursor: pointer; padding: 0;
    transition: background .1s, color .1s;
}
.e-chip-del__x { font-size: var(--font-md); }
.e-chip-del__act { font-size: var(--font-sm); }
.e-chip-del__x:hover { background: var(--danger); color: var(--c-white); }
/* Fără X pe concursuri nemodificabile */
.e-chip-del:not(.e-chip-del--rm) .e-chip-del__name { padding: 0 8px; }

/* --- Invitat (calificat direct) + apel prezență --- */
/* Marcaj INVITAT — micro-badge pe chip (public ȘI organizator), derivat din tokenii de accent. */
.e-chip__inv {
    font-size: var(--font-3xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 0 3px; border-radius: var(--radius-sm);
    background: var(--primary); color: var(--c-white); vertical-align: middle;
}
/* Numele = ținta de tap pentru apel (buton, dar arată ca text în chip). */
button.e-chip-del__name {
    appearance: none; border: 0; background: transparent; color: inherit;
    font: inherit; text-align: left; cursor: pointer;
}
.e-chip-del__cform { display: inline-flex; margin: 0; padding: 0; min-width: 0; flex: 1 1 auto; }
.e-chip-del__cform .e-chip-del__name { width: 100%; }
.e-chip-del__tick { color: var(--success); margin-right: .25rem; }
/* Confirmat prezent = fundal verde discret pe tot chipul; invitat = chenar accent. */
.e-chip-del--in  { background: var(--success-soft); }
.e-chip-del--inv { border-color: var(--primary); }
/* Comutatorul ★ „invitat" — pornit = accent plin (se vede clar că e invitat). */
.e-chip-del__act:hover { background: var(--primary); color: var(--c-white); }
.e-chip-del__act--on { background: var(--primary); color: var(--c-white); }

/* Spinner de procesare la tap (prezență/invitat) — spațiul e rezervat mereu (lățime 0 → nu mișcă
   nimic), devine vizibil doar pe .is-busy. */
.e-chip-del__spin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 0; overflow: hidden;
    transition: width .1s;
}
.e-chip-del__spin::before {
    content: ""; width: 12px; height: 12px;
    border: 2px solid var(--border-strong); border-top-color: var(--primary);
    border-radius: 50%;
}
.e-chip-del.is-busy { opacity: .65; }
.e-chip-del.is-busy .e-chip-del__spin { width: 20px; }
.e-chip-del.is-busy .e-chip-del__spin::before { animation: e-chip-spin .6s linear infinite; }
/* Cât procesează, nu mai accepta un al doilea tap pe același chip. */
.e-chip-del.is-busy .e-chip-del__name,
.e-chip-del.is-busy .e-chip-del__act,
.e-chip-del.is-busy .e-chip-del__x { pointer-events: none; }
@keyframes e-chip-spin { to { transform: rotate(360deg); } }

/* Poster thumb */
.poster-thumb       { height: 42px; width: auto; object-fit: cover; }


/* Backward compat */







































.spots { font-family: var(--font-mono); font-size: var(--font-xs); font-weight: 700; padding: 0 7px; border-radius: var(--radius-sm); line-height: 1.8; white-space: nowrap; flex-shrink: 0; }













/* (.pc-form-title / .dancer-grid / -col / -lbl = definite mai sus în secțiunea form; dup scos) */

/* Autocomplete dancer name */
.ac-wrap { position: relative; }
.ac-dropdown {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card); border: 2px solid var(--border-strong);
    border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 210px; overflow-y: auto; z-index: 1050;
    box-shadow: var(--shadow-hard);
}
.ac-dropdown.ac-open { display: block; }
/* Autocomplete în rânduri inline (jurat/staff): wrap lățime fixă ca inputul direct (nu full-width,
   altfel butonul +/× sare pe rândul următor); dropdown lăsat mai lat ca să încapă numele. */
.judge-inline-row .ac-wrap,
.staff-inline-row .ac-wrap { display: inline-block; width: 150px; vertical-align: middle; }
/* Câmpul de nume e și .form-field → trebuie flex column-reverse (label DEASUPRA), nu inline-block. */
.judge-inline-row .ac-wrap.form-field,
.staff-inline-row .ac-wrap.form-field { display: flex; flex-direction: column-reverse; width: auto; }
.judge-inline-row .ac-wrap .form-control,
.staff-inline-row .ac-wrap .form-control { width: 100%; }
.judge-inline-row .ac-dropdown,
.staff-inline-row .ac-dropdown { right: auto; min-width: 230px; }
.ac-item {
    padding: 5px 8px; font-size: var(--font-md); cursor: pointer;
    border-bottom: 1px solid var(--border-hair); line-height: 1.45;
    background: var(--card);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.ac-item--hover { background: var(--volt); color: var(--volt-ink); }
/* Eticheta de rol în sugestia de persoană unificată (contribuitor / ↔ legat). */
.ac-tag {
    display: inline-block; margin-left: 4px; padding: 0 5px;
    font-size: var(--font-2xs); font-weight: 600; line-height: 1.5;
    border: 1px solid var(--border-hair); border-radius: var(--radius-sm); color: var(--fg4);
}
.ac-item:hover .ac-tag, .ac-item.ac-item--hover .ac-tag { color: inherit; border-color: currentColor; }
/* Badge per-rol (dansator / jurat / DJ / Host) în sugestie — accent flash subtil, distinct de .ac-tag. */
.ac-role {
    display: inline-block; margin-left: 4px; padding: 0 5px;
    font-size: var(--font-2xs); font-weight: 700; line-height: 1.5; text-transform: lowercase;
    border: 1px solid var(--accent-soft); border-radius: var(--radius-sm); color: var(--primary); background: var(--accent-soft);
}
.ac-item:hover .ac-role, .ac-item.ac-item--hover .ac-role { color: inherit; border-color: currentColor; background: transparent; }
.ac-hint { font-size: var(--font-xs); color: var(--fg4); margin-top: 2px; margin-bottom: 4px; }

/* Tabel categorii în card */
.pub-cat-table { font-size: var(--font-md); width: 100%; border-collapse: collapse; }
.pub-cat-table td { padding: 0.3rem 0.6rem; vertical-align: top; border: none; }
.pub-cat-table tr + tr td { border-top: 1px solid var(--border-hair); }

/* Rândul de entries */
.cat-entries-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 3px; }
.cat-entries-lbl { font-family: var(--font-display); font-size: var(--font-xs); font-weight: 900; color: var(--fg1); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; margin-right: 3px; }

/* Badge format battle (1v1, 2v2) */
.badge-battle-fmt { font-size: var(--font-xs); color: var(--fg2); background: var(--paper-2); border: 1px solid var(--border-hair); border-radius: var(--radius-sm); padding: 1px 5px; font-weight: 600; white-space: nowrap; }

/* Discriminatorii categoriei (U18, Femei) — `_discriminators.html.twig`, aceeași insignă oriunde
   apare o categorie: tab-uri, antet, carduri, arhivă, admin. Din familia lui .badge-battle-fmt, dar pe
   accent: ele sunt exact diferența dintre două categorii cu același nume, deci trebuie să sară în
   ochi mai tare decât formatul. */
.cat-disc {
    font-size: var(--font-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--primary); background: var(--primary-soft);
    border: 1px solid var(--primary); border-radius: var(--radius-sm);
    padding: 0 5px; white-space: nowrap;
}

/* Badge TOP N */
.badge-top-n { font-family: var(--font-mono); font-size: var(--font-2xs); color: var(--fg1); background: var(--paper-2); border: 1px solid var(--border-hair); border-radius: var(--radius-sm); padding: 0 5px; font-weight: 700; white-space: nowrap; }

/* Separator inline */
.cat-sep { color: var(--border-hair); margin: 0 3px; font-size: var(--font-sm); }

/* Grid dancer 2-col */
.dancer-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 3px; }

/* Label număr dansator */

/* Sloturile dancer în formular multi-dansator */




/* === 12b. CATEGORY ROW (formular creare concurs) =========== */

.category-row { border-radius: var(--radius-md); margin-bottom: 0.5rem; position: relative; padding: 8px 10px; border: 2px solid var(--border-strong); }
.category-row--0 { background: var(--style3-bg); }
.category-row--1 { background: var(--style1-bg); }
.category-row--2 { background: var(--style2-bg); }
.category-row--3 { background: var(--style4-bg); }
.category-row--4 { background: var(--style5-bg); }
.category-row--5 { background: var(--style0-bg); }

/* Pastelurile de mai sus sunt FIXE (deschise) în AMBELE teme → textul de pe ele se pinuiește la
   ink închis fix, nu la tokeni tematici (pe dark deveneau gri/roșu deschis → ilizibil pe pastel). */
.category-row .form-field > label,
.category-row .judges-section__label { color: var(--c-kf-on-var); }
.category-row .text-muted  { color: var(--c-kf-on-var) !important; }  /* utilitarele Bootstrap au !important */
.category-row .text-danger { color: var(--c-kf-error) !important; }
.category-row .exhint--ok   { color: var(--c-kf-green); }
.category-row .exhint--warn { color: var(--c-kf-amber); }
.category-row .exhint--err  { color: var(--c-kf-error); }
[data-theme="dark"] .category-row .btn-close { filter: none; }  /* X-ul alb (dark) dispărea pe pastel */

.judges-section { border-top: 1px solid var(--border-hair); padding-top: 6px; margin-top: 6px; }
.judges-section__label { font-family: var(--font-sans); font-weight: 600; font-size: var(--font-sm); color: var(--fg3); }

/* Jurați + DJ/Host UNUL LÂNGĂ ALTUL (2 coloane desktop, stivuit pe mobil). Rândurile interioare
   rămân pe O linie: numele se întinde/strânge (flex), restul fixe, butonul × pe aceeași linie. */
.judges-staff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.judges-staff-grid .judges-section { margin-top: 0; }
/* Rândurile jurat/staff în grid: lasă-le să curgă pe rândul următor (wrap) când nu încap, în loc
   să strângă numele la nimic. Numele păstrează o lățime minimă ≈15 caractere. */
.judges-staff-grid .judge-inline-row,
.judges-staff-grid .staff-inline-row { flex-wrap: wrap; row-gap: 4px; }
.judges-staff-grid .ac-wrap { flex: 1 1 110px; width: auto; min-width: 100px; }
.judges-staff-grid .input-w-name { max-width: none !important; }
/* Listele jurați/staff: intrările curg UNA LÂNGĂ ALTA când e loc (nu stivuiesc pe rânduri noi degeaba —
   ex. DJ/Host la edit, col lat). Fiecare intrare = lățime de conținut. */
.judges-list, .staff-list { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; }
.judges-list > .judge-inline-row, .staff-list > .staff-inline-row { flex: 0 1 auto; }
@media (max-width: 640px) {
    .judges-staff-grid { grid-template-columns: 1fr; }
    .judges-staff-grid .judge-inline-row,
    .judges-staff-grid .staff-inline-row { flex-wrap: wrap; }
}

/* Staff DJ/Host — line-up dens grupat pe rol (compact skill: line-up pe roluri, info puțină). */
.staff-groups { display: flex; flex-wrap: wrap; gap: .2rem .9rem; align-items: center; margin: 2px 0 4px; }
.staff-grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.staff-grp__lbl { font-size: var(--font-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fg4); }

/* === 12c. FORM ELEMENT WIDTHS ============================== */

.input-w-country  { width: 116px !important; }  /* select țară: steag + nume RO */
.input-w-role     { width: 56px !important; }   /* DJ / Host */
.input-w-spots    { width: 48px !important; }   /* 4/8/16/32 — max 2 cifre */
.input-w-age      { width: 62px !important; }
.input-w-gender   { width: 80px !important; }
.input-w-tie      { width: 100px !important; }   /* „Rundă extra" / „Scor total" */
.input-w-group    { width: 84px !important; }    /* concurenți pe grupă (2-8) + label „Pe grupă" */
.input-w-name     { max-width: 112px !important; }  /* nume jurat ≈ 15 caractere */
.input-w-system   { min-width: 110px !important; }
.input-w-skill    { width: 90px !important; }
.input-w-score-sm { width: 50px !important; }

.input-w-format   { width: 70px !important; }   /* „5vs5" / „crew" */
.input-w-dancers  { width: 55px !important; }
.input-w-style    { min-width: 120px !important; }

/* Săgeată compactă pe selecturi înguste — SVG mai mic + padding-right redus, ca textul scurt
   (Gen / Zi / format / rol) să nu fie acoperit de săgeata Bootstrap. Aplicat prin clasă (scoped). */
.sel-tight { background-size: 8px 8px !important; padding-right: 1.05rem !important; background-position: right .3rem center !important; }


/* === 13. UTILITIES ========================================= */




.text-xs { font-size: var(--font-xs) !important; }
.text-sm { font-size: var(--font-sm) !important; }



.action-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Buton ultra-compact */
.btn-xs {
    font-family: var(--font-display);
    font-size: var(--font-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.45rem;
    line-height: 1.4;
    border-radius: var(--radius-sm);
}







/* === 14. RANKING & TIER ==================================== */

/* Coloane cu procent + mini bar */
.col-stat-pct   { width: 90px; text-align: right; }
.lb-col-rank    { width: 26px; }
.stat-pct-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--font-md); font-weight: 700; }
.pct-high       { color: var(--success); }
.pct-low        { color: var(--danger); }

.stat-pct-bar   { height: 3px; border-radius: var(--radius-sm); background: var(--paper-2); margin-top: 2px; overflow: hidden; }
/* lățimea vine din template ca --w (singura formă de style inline permisă) */
.stat-pct-bar .bar-fill { height: 100%; border-radius: var(--radius-sm); width: var(--w, 0%); }
.bar-win        { background: var(--success); }

/* Δ ELO (evoluția la ultimul concurs) + formă (ultimele 5 battle-uri, V/Î) — /clasament */
.lb-delta       { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--font-sm); font-weight: 700; color: var(--fg3); white-space: nowrap; }
.lb-delta--up   { color: var(--success); }
.lb-delta--down { color: var(--danger); }
.lb-form        { display: inline-flex; gap: .2rem; justify-content: flex-end; }
.form-pip       { font-family: var(--font-mono); font-size: var(--font-xs); font-weight: 700; line-height: 1; }
.form-pip--w    { color: var(--success); }
.form-pip--l    { color: var(--danger); }



/* Entity display */
.col-entity   { min-width: 160px; }


.entity-name { font-weight: 700; font-size: var(--font-md); color: var(--fg1); }


/* Tier list */
.role-tabs  { display: flex; gap: 0; border-bottom: 2px solid var(--border-strong); margin-bottom: 1rem; }
.role-tab {
    padding: 0.35rem 0.9rem; font-family: var(--font-display); font-size: var(--font-md); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--fg3); border-bottom: 3px solid transparent;
    text-decoration: none; white-space: nowrap; margin-bottom: -2px;
    transition: color .1s, border-color .1s;
}
.role-tab:hover  { color: var(--primary); }
.role-tab.active { color: var(--fg1); border-bottom-color: var(--primary); }

.tier-header {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.3rem 0.5rem; margin-bottom: 0;
    font-family: var(--font-display);
    font-size: var(--font-xs); font-weight: 900; text-transform: uppercase;
    letter-spacing: .1em; border-bottom: 2px solid var(--border-strong);
}
.tier-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: var(--radius-md);
    font-size: var(--font-md); font-weight: 900; flex-shrink: 0;
}
.tier-S { background: var(--tier-s-bg); } .tier-S .tier-badge { background: var(--tier-s); color: var(--c-white); }
.tier-A { background: var(--tier-a-bg); } .tier-A .tier-badge { background: var(--tier-a); color: var(--c-white); }
.tier-B { background: var(--tier-b-bg); } .tier-B .tier-badge { background: var(--tier-b); color: var(--c-white); }
.tier-C { background: var(--tier-c-bg); } .tier-C .tier-badge { background: var(--tier-c); color: var(--c-white); }
.tier-D { background: var(--tier-d-bg); } .tier-D .tier-badge { background: var(--tier-d); color: var(--c-white); }

.tier-table      { font-size: var(--font-md); width: 100%; border-collapse: collapse; }
.tier-table td   { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border-hair); vertical-align: middle; }
.tier-table tbody tr:last-child td { border-bottom: none; }
.tier-table tbody tr:hover { background: var(--volt); color: var(--volt-ink); }
.tier-table-header th {
    font-family: var(--font-display);
    font-size: var(--font-xs); font-weight: 900; text-transform: uppercase;
    letter-spacing: .1em; color: var(--text-on-inverse);
    padding: 0.25rem 0.5rem; border-bottom: 2px solid var(--border-strong);
    background: var(--surface-inverse); white-space: nowrap; text-align: right;
}
.tier-table-header th:first-child,
.tier-table-header th:nth-child(2) { text-align: left; }

.col-rank-small { width: 28px; text-align: center; font-family: var(--font-mono); font-size: var(--font-sm); font-weight: 700; color: var(--fg4); }
.rank-top       { color: var(--rank-gold); }

/* === 15. AUTH / LOGIN ====================================== */
/* Scoped pe .login-page (clasă pe <body>), NU pe `body` global.
   Regula `body { background }` inline din template scurgea fundalul negru
   în celelalte pagini la navigarea Turbo (head-ul rămânea în DOM). */
.login-page { background: var(--surface-inverse); font-family: var(--font-sans); }
.login-brand { font-family: var(--font-display); font-weight: 900; font-size: var(--font-3xl); text-transform: uppercase; letter-spacing: -.01em; color: var(--text-on-inverse); }
.login-brand .bi-trophy-fill { color: var(--primary); }
.login-sub { font-size: var(--font-sm); color: rgba(245,241,232,.38); text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono); }
.login-error { font-size: var(--font-md); border-radius: var(--radius-sm); border: 2px solid var(--danger); }
.login-card { background: var(--card); border: 2px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 6px 6px 0 0 var(--primary); }
.login-card .form-label { font-family: var(--font-display); font-size: var(--font-xs); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--fg2); }
.login-card .input-group-text { background: var(--paper); border: 2px solid var(--border-strong); border-right: none; color: var(--text); }
.login-card .form-control { border: 2px solid var(--border-strong); border-left: none; font-family: var(--font-sans); }
.login-card .form-control:focus { box-shadow: none; border-color: var(--primary); }
.btn-login { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: var(--surface-inverse); color: var(--text-on-inverse); border: 2px solid var(--border-strong); border-radius: var(--radius-sm); padding: .6rem 1rem; transition: background .1s, color .1s; }
.btn-login:hover { background: var(--primary); border-color: var(--primary); color: var(--c-white); }

/* Pagini de eroare (error403/404) — scoped pe .error-page, NU pe `body` global. */
.error-page { background: var(--paper); font-family: "Archivo", system-ui, sans-serif; }
.err-code { font-size: var(--font-10xl); font-weight: 900; color: var(--text); line-height: 1; text-transform: uppercase; letter-spacing: -.04em; }
.err-code--alert { color: var(--primary); }
.err-title { font-weight: 900; font-size: var(--font-2xl); text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
.err-msg { color: var(--fg3); font-size: var(--font-md); }
.btn-ink { background: var(--surface-inverse); color: var(--text-on-inverse); border: 2px solid var(--border-strong); border-radius: var(--radius-sm); padding: .4rem 1rem; font-weight: 700; text-transform: uppercase; font-size: var(--font-sm); letter-spacing: .06em; text-decoration: none; transition: background .1s; display: inline-block; }
.btn-ink:hover { background: var(--primary); border-color: var(--primary); color: var(--c-white); }
.btn-ink--ghost { background: transparent; color: var(--text); }
.btn-ink--danger { background: var(--danger); border-color: var(--danger); color: var(--c-white); }
.btn-ink--danger:hover { background: var(--primary); border-color: var(--primary); color: var(--c-white); }

/* Pagină de confirmare server-side pentru acțiuni ireversibile (B13, _confirm_page.html.twig) */
.confirm-page { display: flex; justify-content: center; padding: 2rem 1rem; }
.confirm-page__card { max-width: 34rem; width: 100%; padding: 1.25rem 1.5rem; border-left: 4px solid var(--danger); }
.confirm-page__lines { margin: .75rem 0 0; padding-left: 1.1rem; font-size: var(--font-sm); }
.confirm-page__lines li { margin-bottom: .25rem; }
.confirm-page__warn { font-weight: 700; color: var(--danger); font-size: var(--font-sm); margin: .5rem 0 1rem; }
.confirm-page__actions { display: flex; gap: .6rem; align-items: center; }

/* Modal de confirmare brand-uit (SSOT) — folosit de confirm-action.js + form-dirty.js.
   Ramă 2px ink + offset shadow, titlu Archivo uppercase, în loc de cardul soft Bootstrap. */
.confirm-modal .modal-content {
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: 6px 6px 0 var(--shadow-color);
    background: var(--surface);
    color: var(--text);
}
.confirm-modal .modal-header { border-bottom: 2px solid var(--border-strong); padding: .6rem .9rem; }
.confirm-modal .modal-title { font-family: var(--font-display, inherit); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: var(--font-lg); }
.confirm-modal .modal-body { padding: .9rem; }
.confirm-modal .modal-footer { border-top: 0; padding: .6rem .9rem; gap: .5rem; }

/* === 16. MOBILE / RESPONSIVE =============================== */
/* Mobile-first dense data. Vezi skill: references/mobile-first-dense-data.md.
   Bază = stiluri care merg pe telefon; @media(min-width) ar adăuga desktop unde e cazul.
   Aici: utilitare ca să scoatem style="" inline + card-reflow tabele + nav + touch. */

/* --- Utilitare font/opacity (înlocuiesc style="font-size:var(--font-*)") --- */
.fs-2xs  { font-size: var(--font-2xs); }
.fs-xs   { font-size: var(--font-xs); }
.fs-sm   { font-size: var(--font-sm); }


.empty-ico { font-size: var(--font-9xl); opacity: .2; }
.empty-ico--lg { font-size: var(--font-8xl); opacity: .25; }
   /* bulină status în strip */

.cursor-pointer { cursor: pointer; }

/* --- Tabel lat care trebuie păstrat 2D (bracket) → scroll orizontal cu degetul --- */


/* --- CARD-REFLOW: tabel dens → listă de carduri pe telefon ---
   Markup: <table class="reflow-table"> + data-label="..." pe FIECARE <td>. */
@media (max-width: 640px) {
    
    
    
    
    
    
    /* td fără data-label (gol) → ascuns ca rând de card */
    
}

/* --- Navbar responsive: pe telefon nu mai forțăm un singur rând fix --- */
@media (max-width: 640px) {
    /* Navbarul se poate înfășura aici, deci nu mai are înălțime fixă. Elementele lipicioase care
       se ancorează sub el (--nav-h) folosesc minimul: dacă navbarul chiar se rupe pe două rânduri,
       suprapunerea e de câțiva px și cosmetică — ancorele rămân corecte prin scroll-margin-top. */
    :root { --nav-h: 44px; }
    .app-nav__inner { height: auto; min-height: var(--nav-h); flex-wrap: wrap; gap: 0.25rem; padding: 0.3rem 0.6rem; }
    .app-nav__actions { flex-wrap: wrap; gap: 0.35rem; }
    .app-nav__user { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Touch targets pe acțiunile principale */
    .app-nav__link, .app-nav__btn { min-height: 38px; display: inline-flex; align-items: center; }
}

/* --- Touch targets + forms fluide pe telefon --- */
@media (max-width: 640px) {
    .btn, .judge-chip__del, .pen-btn, .filter-pill, .badge-category { min-height: var(--tap-min); }
    .btn { display: inline-flex; align-items: center; justify-content: center; }
    /* Chip organizator: prezență/invitat/șterge = ținte cât tot chipul (44px), acțiuni late și distanțate. */
    .e-chip-del { --chip-act-h: var(--tap-min); font-size: var(--font-sm); }
    .e-chip-del__x, .e-chip-del__act { min-width: 44px; }
    .e-chip-del__act { font-size: var(--font-md); }
    /* Inputuri/select cu lățime fixă (admin) → fluide pe telefon */
    .w-in-lg, .w-in-md, .w-in-sm { width: 100%; }
    /* Formularul de înscriere rămâne FLUID pe telefon (flex-wrap în .enf-row) — câmpurile se
       împachetează 1–2 pe linie după lățime, aliniate la stânga. NU stivuire dură pe coloană
       (dădea spații mari + aliniere pe mijloc). Anti-overflow = min-width:0 pe .enf-opt/.ac-wrap
       (globale mai jos) → câmpurile pot micșora și rup natural, fără casete ieșite din div. */
}

/* --- Clase semantice care înlocuiesc style="" repetat în template-uri --- */
.cell-actions { width: 1%; white-space: nowrap; text-align: right; }   /* coloană acțiuni/chevron */
.cell-actions--top { vertical-align: top; padding-top: 0.35rem; }


.tbl-th { font-size: var(--font-xs); color: var(--fg4); text-transform: uppercase; letter-spacing: .05em; padding: .2rem .6rem; }
.col-rank-narrow { width: 1.8rem; font-weight: 700; }

.bk-col-count { font-size: var(--font-3xs); font-weight: 400; opacity: .6; }
.admin-edit-cell { background: var(--paper-2); padding: 0.5rem 0.6rem; }
.w-in-lg { width: 200px; }   /* input lat (email)   — devine 100% pe mobil */
.w-in-md { width: 140px; }   /* input mediu (parolă)— devine 100% pe mobil */
.w-in-sm { width: 120px; }   /* select (rol)        — devine 100% pe mobil */

/* Warning fuzzy „ești tu?" la înscriere (near-duplicate nudge) — bloc full-width SUB rând */
.dup-warn { width: 100%; margin: 0 0 .5rem; padding: .35rem .5rem; background: var(--warning-soft); border: 1px solid #ffe08a; border-radius: var(--radius-md); font-size: var(--font-xs); }
.dup-warn__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.dup-warn__q { color: var(--warning); font-weight: 600; }
.dup-warn__close { flex-shrink: 0; border: 1px solid var(--border-hair); background: var(--card); border-radius: var(--radius-sm); padding: .05rem .5rem; font-size: var(--font-xs); cursor: pointer; white-space: nowrap; color: var(--fg2); }
.dup-warn__close:hover { background: var(--surface-inverse); color: var(--text-on-inverse); border-color: var(--border-strong); }
.dup-warn__pick { display: inline-block; margin: .12rem .2rem .12rem 0; padding: .12rem .5rem; background: var(--card); border: 1px solid var(--border-hair); border-radius: var(--radius-sm); font-size: var(--font-xs); cursor: pointer; }
.dup-warn__pick:hover { background: var(--volt); color: var(--volt-ink); border-color: var(--volt-ink); }

/* Input oraș îngust în rândul de membru (echipă) — încape pe o linie */


/* Formular înscriere: TOATE câmpurile pe UN rând care se împachetează fluid (nu 2 rânduri rigide).
   Câmpurile „text lat" (nume/crew/email/oraș) cresc (flex-grow) ca să umple linia fără gol la capăt;
   gen + dată = fixe. La lățimi mici rup natural pe 2+ linii, fiecare justificată de câmpurile care cresc. */
.enf-row    { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.enf-name   { flex: 1 1 8rem; min-width: 7rem; }
.enf-gender { flex: 0 0 auto; }
.enf-gender > select { width: 3.6rem; }
.enf-dob    { flex: 0 0 auto; }
.enf-crew   { flex: 1 1 8rem; min-width: 6rem; }
.enf-city   { flex: 1 1 6rem; min-width: 4.5rem; }
.enf-email  { flex: 1 1 8rem; min-width: 7rem; }
/* Dată naștere = 3 selecturi (zi · lună · an). Font mic + padding redus ca să încapă cuvântul/anul întreg. */
.dob-row { display: inline-flex; gap: 3px; }
.dob-row select { font-size: var(--font-xs); padding: .2rem .15rem .2rem .3rem; background-position: right .2rem center; background-size: 8px 8px; }
.dob-row .dob-d { flex: 0 0 2.6rem; }   /* Zi  — 2 cifre */
.dob-row .dob-m { flex: 0 0 3.2rem; }   /* Lună — 2 cifre */
.dob-row .dob-y { flex: 0 0 3.6rem; }   /* An  — 4 cifre */

/* Câmp gol în formularul de înscriere — hint vizual (nu blochează), bordură punctată discretă. */
.field-empty { border-color: var(--danger) !important; border-style: dashed !important; }
/* Câmp opțional (email/gen/dată/crew/oraș) cu comutare input↔readout „pe profil" (B22). Dansator
   existent care ARE câmpul completat → inputul DISPARE, apare readout-ul (email = mascat, crew/oraș =
   valoarea, gen/dată = doar bifă). Lipsă → rămâne input editabil (backfillProfile salvează la înscriere).
   Crew/oraș needitabile: crew-ul de bază NU se schimbă la reînscriere (ar muta dansatorul în alt crew ELO). */
.enf-opt { display: inline-flex; align-items: center; min-width: 0; }
.enf-opt > .ac-wrap { flex: 1 1 auto; min-width: 0; }
.enf-opt > input { flex: 1 1 auto; min-width: 0; }
.enf-opt > .enf-onfile { display: none; }
.enf-opt.is-onfile > select,
.enf-opt.is-onfile > input,
.enf-opt.is-onfile > .dob-row,
.enf-opt.is-onfile > .ac-wrap { display: none; }
.enf-opt.is-onfile > .enf-onfile {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: var(--font-xs); font-weight: 600; color: var(--text); white-space: nowrap;
    padding: .18rem .45rem; border: 1px solid var(--success); border-radius: var(--radius-sm);
    background: var(--success-soft);
}
.enf-opt.is-onfile > .enf-onfile .bi { color: var(--success); }
.enf-onfile-val { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* On-file (readout): pilula = content-size + shrink-friendly, NU dimensiunea inputului. Elimină golul
   de flex-grow (crew→oraș) + suprapunerea de nowrap (oraș sub email). Împachetare naturală în .enf-row. */
.enf-opt.is-onfile { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.enf-opt.is-onfile > .enf-onfile { max-width: 100%; min-width: 0; }

/* Membru de echipă = bloc distinct: cele 2 rânduri (person_rows) + număr mic în gutter + zebra discret,
   ca să deosebești concurent 1/2/3/4 fără să aglomerezi. #num tăiat din spațiu la ecrane mici prin padding. */
.member-rows { display: flex; flex-direction: column; gap: .15rem; }
.member-block { position: relative; padding: .3rem .45rem .3rem 1.5rem; border-radius: var(--radius-sm); }
.member-block:nth-child(even) { background: var(--paper-2); }
.member-block__num {
    position: absolute; left: .3rem; top: .5rem;
    font-size: var(--font-xs); font-weight: 700; line-height: 1; color: var(--text-muted);
}

/* Anti-overflow orizontal: media nu depășește lățimea ecranului */
img, svg, table { max-width: 100%; }


/* === 17. HOME (landing) + page heads — Battle-Broadcast ===== */
.page-head { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: var(--font-3xl); line-height: 1.1; color: var(--text); margin: 0; display: inline-flex; align-items: center; }

/* --- Breadcrumbs (SSOT) + marcaj de context (LIVE / REZULTATE / ARHIVĂ) --- */
.breadcrumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    margin: 0 0 var(--kf-5); font-family: var(--kf-font-mono);
    font-size: var(--font-sm); color: var(--text-muted);
}
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs__sep { color: var(--text-faint); }
.breadcrumbs__current { color: var(--text); font-weight: 700; }

.page-state {
    display: inline-flex; align-items: center; gap: .4rem; vertical-align: middle;
    font-family: var(--font-display); font-weight: 900; font-size: var(--font-sm);
    text-transform: uppercase; letter-spacing: .08em;
    padding: .2rem .65rem; border-radius: var(--radius-md);
}
.page-state--live            { background: var(--status-active-bg); color: var(--status-active-fg); }
.page-state--results,
.page-state--archive-results { background: var(--surface-inverse);  color: var(--text-on-inverse); }
.page-state--archive         { background: var(--status-done-bg);   color: var(--status-done-fg); }
.page-state__dot {
    width: .5rem; height: .5rem; border-radius: 50%; background: currentColor;
    animation: page-state-pulse 1.2s ease-in-out infinite;
}
@keyframes page-state-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Proiector fullscreen: ascunde chrome-ul (nav + breadcrumbs) — toggle pe <body>, vezi projector-toggle.js */
.live-projector .app-nav,
.live-projector .breadcrumbs { display: none; }

/* --- Arhivă publică (/arhiva) -------------------------------------------------------------
   Rândul = afiș PORTRET 3:4 în stânga, cu înălțime EGALĂ pe toate rândurile, + o coloană de
   text care se mulează. Înălțimea fixă e decizia de design, nu o scăpare: dacă afișul ar crește
   odată cu conținutul, un concurs cu 12 categorii ar primi un afiș de 2× față de unul cu 2 →
   grilă zimțată, imposibil de scanat pe verticală.

   Dimensionarea internă vine din LĂȚIMEA CARDULUI (container query pe .arch-card), nu din
   viewport: două carduri pe rând și unul singur au același ecran dar cutii diferite, deci un
   @media ar minți. Aceeași motivație ca .judge-col.
   ⚠️ CAPCANĂ: unitățile `cq*` NU se rezolvă pe elementul care DECLARĂ containerul → toate
   clamp-urile stau în COPII (.arch-row/.arch-poster/.arch-title/.arch-body), niciodată pe
   .arch-card. Și `inline-size`, NICIODATĂ `size` (ăla adaugă containment pe bloc → card prăbușit). */
.arch-toolbar { display: flex; flex-wrap: wrap; gap: .5rem clamp(.5rem, 2vw, 1.25rem); align-items: center; margin-bottom: var(--kf-4); }
.arch-toolbar__filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.arch-toolbar__status { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

/* Bară de salt la an — refolosește .filter-pill (deci și bump-ul de touch 44px de pe mobil). */
.arch-jump { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: var(--kf-5); }

/* Antet de an LIPICIOS: reperul cronologic nu mai dispare la derulare. `top` = înălțimea
   navbarului (el însuși sticky, z-index 1020) → anul se oprește SUB el, nu peste.
   Fundal OPAC obligatoriu, altfel cardurile se văd prin el. z-index explicit: itemii de grilă
   creează contexte de stivuire și ar picta peste antet. */
.arch-year {
    position: sticky; top: var(--nav-h); z-index: 5;
    display: flex; align-items: baseline; gap: .6rem;
    background: var(--bg); padding: .3rem 0; margin: 1.4rem 0 .6rem;
    font-family: var(--font-display); font-weight: 900; font-size: var(--font-3xl);
    text-transform: uppercase; letter-spacing: .02em; color: var(--text);
}
.arch-year__n { font-size: var(--font-sm); font-weight: 400; color: var(--text-muted); }
.arch-year-block { scroll-margin-top: calc(var(--nav-h) + var(--kf-3)); }

/* Coloane INTRINSECI, fără @media: --arch-col-min > 1600/3 ⇒ maximum 2 coloane pe .page-wide
   (max-width 1600px); trecerea la o coloană se face singură pe la ~1100px. `min(100%, …)` =
   plasa anti-overflow când viewportul e sub lățimea minimă de coloană. */
.arch-list {
    --arch-col-min: 34rem;
    display: grid; gap: clamp(.5rem, 1.2vw, var(--kf-4));
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--arch-col-min)), 1fr));
}
.arch-card { container-type: inline-size; }   /* SINGURA declarație de containment */

.arch-row { display: flex; align-items: stretch; gap: clamp(.5rem, 2.5cqi, 1rem); flex: 1 1 auto; }
.arch-poster {
    flex: 0 0 auto; aspect-ratio: 3 / 4; height: clamp(9.5rem, 30cqi, 13.75rem);
    border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-inverse);
}
.arch-poster[data-lightbox] { cursor: zoom-in; }
.arch-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arch-poster--empty { display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: var(--font-2xl); }

.arch-body {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .35rem;
    padding: clamp(.5rem, 2cqi, .75rem) clamp(.6rem, 2.5cqi, 1rem) clamp(.5rem, 2cqi, .75rem) 0;
}
.arch-title {
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
    letter-spacing: -.01em; line-height: 1.03; margin: 0;
    font-size: clamp(var(--font-xl), 6cqi, var(--font-4xl));
    color: var(--text); overflow-wrap: anywhere;
}
.arch-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .2rem clamp(.35rem, 2cqi, .8rem);
    font-size: var(--font-sm); color: var(--text-secondary);
}
.arch-meta i { opacity: .75; }
.arch-month { text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }

/* margin-top:auto împinge chipurile la baza coloanei → se aliniază între cardurile de pe același rând. */
.arch-cats { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .55rem; }
.arch-cat { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .4rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); text-decoration: none; color: var(--text-muted); }
.arch-cat:hover { border-color: var(--accent); color: var(--text); }
.arch-cat__fmt { font-family: var(--kf-font-mono); font-size: var(--font-xs); }
.arch-cat--more { font-weight: 700; }
/* „Niciun rezultat" — ASCUNS din CSS by default. Altfel e vizibil la primul paint, sub lista
   completă, până rulează JS-ul (și rămâne vizibil dacă JS-ul cade). JS-ul comută clasa .is-on,
   NU style.display: cardurile folosesc deja axa aia, iar două mecanisme pe aceeași axă se bat. */
.arch-empty { display: none; }
.arch-empty.is-on { display: block; }
.home-hero {
    border: var(--border-dark); border-radius: var(--radius-lg); background: var(--card);
    box-shadow: var(--shadow-hard); padding: 2.2rem 1.4rem; text-align: center; margin: 1rem 0 1.4rem;
}
.home-hero__mark { font-size: var(--font-6xl); color: var(--text); line-height: 1; }
.home-hero__title {
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .015em;
    font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; margin: .3rem 0 .45rem; color: var(--text);
}
.home-hero__flash { color: var(--primary); }
.home-hero__tag { font-size: var(--font-md); color: var(--fg2); max-width: 38rem; margin: 0 auto 1.1rem; }
.home-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.home-card__body { padding: .8rem .9rem; display: flex; flex-direction: column; gap: .65rem; align-items: flex-start; }
.home-card__body p { margin: 0; font-size: var(--font-sm); color: var(--fg2); }

/* Leaderboard (clasament) — panou înrămat scoreboard, rânduri dense pe o linie */
.lb-panel { border: var(--border-dark); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; }
.lb-panel__head {
    display: flex; align-items: center; gap: .4rem; padding: .4rem .65rem;
    background: var(--surface-inverse); color: var(--text-on-inverse);
    font-family: var(--font-display); font-weight: 900; font-size: var(--font-sm);
    text-transform: uppercase; letter-spacing: .08em;
}
.lb-panel__head .lb-panel__count { margin-left: auto; font-family: var(--font-mono); font-size: var(--font-xs); color: var(--volt); }
.lb-panel .tier-table { margin: 0; }
.lb-panel .tier-table td { padding: .3rem .55rem; }
.lb-panel .tier-table tbody tr:nth-child(even) td { background: var(--paper-2); }
.lb-panel .tier-table tbody tr:hover td { background: var(--volt); color: var(--volt-ink); }
/* ELO = numărul-vedetă, font display (Archivo) */
.lb-elo { font-family: var(--font-display); font-weight: 900; font-size: var(--font-lg); color: var(--text); line-height: 1; }
/* meta inline pe ACEEAȘI linie cu numele (crew · oraș · țară) — nu pe rând nou */
.lb-meta { font-size: var(--font-xs); color: var(--fg3); white-space: nowrap; }
/* a doua linie meta (N concursuri · ultima participare) — pe rând propriu sub nume */
.lb-meta--sub { display: block; }
.lb-meta__cc { font-family: var(--font-mono); color: var(--fg2); }
.lb-empty { padding: 1rem .65rem; font-size: var(--font-sm); color: var(--fg3); }

/* === 18. RESULTS — pagina /rezultate (concurs terminat, cu chrome) =====
   Identică cu /live (tab-uri Calificare|Bracket, partiale read-only), DOAR că în sistem (cu nav) +
   antet de concurs LIZIBIL. Datele dense (bracket/scoruri) rămân compacte; titlurile + detaliile
   publice = mărite/citibile (NU stil compact-data) — pagina e exact ce caută vizitatorul. */
.res-hero { padding: .25rem 0 1rem; border-bottom: var(--border-dark); margin-bottom: 1rem; }
.res-hero__name {
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em;
    font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.04; color: var(--text); margin: 0;
}
/* Numele + meta (locație/dată, Național/categorii) pe ACEEAȘI linie — meta „în dreptul" numelui.
   Gap orizontal fluid → meta stă lipită subtil de nume pe ecran mare, cade sub el pe îngust. */
.res-hero__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem clamp(1.25rem, 4vw, 2.5rem); }
/* Locație+dată pe o coloană, Național+categorii pe alta, coloanele una lângă alta, aliniate. */
.res-hero__meta { display: flex; flex-wrap: wrap; gap: .3rem clamp(1.25rem, 3.5vw, 2.5rem); font-size: var(--font-lg); color: var(--fg2); }
.res-hero__meta-col { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.res-hero__meta i { color: var(--primary); margin-right: .4rem; }
.res-hero__meta b { color: var(--text); font-weight: 700; }

/* .res-cat-strip = definit lângă .cat-strip (spacing lipit de linia groasă a .res-hero) */

/* Titlul categoriei curente — lizibil (nu compact) */
.res-cat-head { margin-bottom: .5rem; }
.res-cat-name {
    font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em;
    font-size: var(--font-2xl); line-height: 1.1; color: var(--text); margin: 0 0 .35rem;
    display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
}
.res-cat-fmt { color: var(--primary); }

/* Antetul categoriei: nume+badge-uri, Line-up, Juriu = coloane „în dreptul titlului" (.res-cat-cluster),
   acțiunile ownerului în dreapta (.res-cat-top = space-between, wrap). Gap orizontal FLUID (clamp) →
   aerisit pe ecran mare, strâns pe mic; grupurile pică pe rând nou PROGRESIV (flex-wrap, fără breakpoint
   dur) în funcție de lățime. Fiecare grup e aliniat la STÂNGA în div-ul lui (vezi .res-jury--stacked). */
.res-cat-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
.res-cat-cluster { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .7rem clamp(1.25rem, 4vw, 3rem); min-width: 0; }
.res-cat-title { min-width: 0; }
.res-jury { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.res-jury__lbl { font-size: var(--font-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--fg3); font-weight: 700; margin-right: .2rem; }
/* pills-urile stau într-un wrapper .ccat__vals (cluster wrap propriu) → pe mobil grupul devine
   grilă etichetă | valori (același pattern ca ccat__row): labelul rămâne în stânga, numele se
   adună aliniate în coloana a doua, fără rânduri în plus. */
.res-jury > .ccat__vals { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
@media (max-width: 640px) {
    .res-jury { display: grid; grid-template-columns: auto 1fr; align-items: start; }
    .res-jury__lbl { padding-top: .2rem; }
}
/* Variantă „stivuit" (etichetă deasupra, valori dedesubt, jurați unul sub altul) — Line-up + Juriu
   din antetul categoriei. Bate grid-ul mobil de mai sus prin ordinea în sursă (aceeași specificitate). */
.res-jury--stacked { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.res-jury--stacked > .ccat__vals { flex-direction: column; align-items: flex-start; gap: .25rem; }
@media (max-width: 640px) { .res-jury--stacked { display: flex; flex-direction: column; } }

} /* === END @layer app (stylesheet principal, re-skinat prin remap) ==== */


/* ████████████████████████████████████████████████████████████████
   KINETIC FLOW — design nou (light/airy, line-less, rotunjit).
   Tokens namespaced --kf-* ca să coexiste cu „Battle Broadcast" (legacy)
   până migrăm fiecare pagină. Sursă: .claude/newdesign/kinetic_flow/DESIGN.md
   ████████████████████████████████████████████████████████████████ */

@layer tokens {
  :root {
    /* ---------- TIER 1 · RAW (Material roles din DESIGN.md) ---------- */
    /* lime */
    --c-kf-lime:        #ccff00;   /* primary-container — buton lime (RAR, doar CTA critic) */
    --c-kf-lime-tint:   #eef7c6;   /* lime pal — badge-uri/accente soft (lime „diluat") */
    --c-kf-lime-dim:    #abd600;   /* inverse-primary */
    --c-kf-olive:       #506600;   /* primary — solid / accent text */
    --c-kf-olive-2:     #5b7300;   /* on-primary-container — text pe lime */
    --c-kf-olive-ink:   #161e00;   /* on-primary-fixed */
    /* purple */
    --c-kf-purple:      #7000ff;   /* secondary-container */
    /* orange / alert (tertiary) */
    --c-kf-orange:      #b42800;   /* tertiary */
    --c-kf-orange-2:    #ca2f00;   /* on-tertiary-container */
    --c-kf-orange-soft: #ffe8e3;   /* tertiary-container */
    /* cyan / info (al treilea neon — callout) */
    --c-kf-cyan:        #0a7d88;   /* text cyan închis pe light */
    --c-kf-cyan-soft:   #d6f7fb;   /* bg soft */
    /* error */
    --c-kf-error:       #ba1a1a;
    --c-kf-error-soft:  #ffdad6;
    --c-kf-error-2:     #93000a;
    /* success / done (verde kf — distinct de lime-winner) */
    --c-kf-green:       #2f6b3a;
    --c-kf-green-soft:  #c8efce;
    --c-kf-green-2:     #0b3d1d;
    /* warning / tie (amber kf — distinct de orange-alert/error) */
    --c-kf-amber:       #7a5800;
    --c-kf-amber-soft:  #ffe6a0;
    --c-kf-amber-2:     #5a3e00;
    /* neutrals / surfaces */
    --c-kf-bg:        #f9f9f6;   /* background */
    --c-kf-s-lowest:  #ffffff;   /* surface-container-lowest */
    --c-kf-s-low:     #f4f4f1;   /* surface-container-low — tonal card */
    --c-kf-s:         #eeeeeb;   /* surface-container */
    --c-kf-s-high:    #e8e8e5;   /* surface-container-high */
    --c-kf-s-highest: #e2e3e0;   /* surface-container-highest */
    --c-kf-on:        #1a1c1a;   /* on-surface */
    --c-kf-on-var:    #444933;   /* on-surface-variant */
    --c-kf-outline:   #747a60;   /* outline */
    --c-kf-outline-v: #c4c9ac;   /* outline-variant */
    --c-kf-inverse-on:#f1f1ee;   /* inverse-on-surface */

    /* ---------- TIER 2 · SEMANTIC ROLES (light) ---------- */
    --kf-bg:            var(--c-kf-bg);
    --kf-surface:       var(--c-kf-s-low);    /* carduri / panouri (line-less) */
    --kf-surface-2:     var(--c-kf-s);        /* nested / chips bg */
    --kf-surface-3:     var(--c-kf-s-high);
    --kf-surface-inset: var(--c-kf-s-highest);/* ghost input / inset */
    --kf-surface-bright:var(--c-kf-s-lowest); /* rânduri „feed" */
    --kf-text:          var(--c-kf-on);
    --kf-text-variant:  var(--c-kf-on-var);
    --kf-outline:       var(--c-kf-outline);
    --kf-outline-soft:  var(--c-kf-outline-v);

    --kf-primary:       var(--c-kf-lime);     /* buton lime, bg (RAR) */
    --kf-on-primary:    var(--c-kf-olive-2);  /* text pe lime */
    --kf-tint:          var(--c-kf-lime-tint);/* badge/accent soft (lime diluat) */
    --kf-on-tint:       var(--c-kf-olive);    /* text pe tentă */
    --kf-primary-solid: var(--c-kf-olive);    /* buton solid (submit) */
    --kf-on-solid:      var(--c-kf-s-lowest);  /* text alb pe solid */
    --kf-accent:        var(--c-kf-olive);    /* etichete date / accent text */
    --kf-accent-strip:  var(--c-kf-lime);     /* bară accent stânga */

    --kf-secondary:     var(--c-kf-purple);
    --kf-on-secondary:  var(--c-kf-s-lowest);

    --kf-alert:         var(--c-kf-orange);
    --kf-alert-soft:    var(--c-kf-orange-soft);
    --kf-on-alert-soft: var(--c-kf-orange-2);

    --kf-info:          var(--c-kf-cyan);       /* callout/info (cyan) */
    --kf-info-soft:     var(--c-kf-cyan-soft);

    --kf-danger:        var(--c-kf-error);
    --kf-danger-soft:   var(--c-kf-error-soft);
    --kf-on-danger-soft:var(--c-kf-error-2);

    --kf-success:        var(--c-kf-green);      /* done / qualified / positive */
    --kf-success-soft:   var(--c-kf-green-soft);
    --kf-on-success-soft:var(--c-kf-green-2);

    --kf-warning:        var(--c-kf-amber);      /* tie / locked / atenție */
    --kf-warning-soft:   var(--c-kf-amber-soft);
    --kf-on-warning-soft:var(--c-kf-amber-2);

    /* ---------- TYPOGRAPHY ---------- */
    --kf-font:         'Twemoji Country Flags', 'Archivo', system-ui, sans-serif;
    --kf-font-display: 'Twemoji Country Flags', 'Archivo', sans-serif;  /* Archivo 900 "Black" — gros dar aerisit (fost Anton, prea condensat) */
    --kf-font-mono:    'Twemoji Country Flags', 'Space Mono', ui-monospace, monospace;
    --kf-fs-body:    1rem;     /* 16 — singurul fs kf consumat; restul scalei = superseded de --font-* legacy */

    /* ---------- RADII (brutalist pătrățos) ---------- */
    --kf-r-sm:   0;           /* singurul radius kf consumat; restul = superseded de --radius-* remapat la 0 */

    /* ---------- SPACING (unit 4px) ---------- */
    --kf-1: .25rem;  --kf-2: .5rem;  --kf-3: .75rem;  --kf-4: 1rem;
    --kf-5: 1.5rem;  --kf-6: 2rem;   --kf-7: 2.5rem;  --kf-8: 3rem;
    --kf-gutter: 1.5rem;       /* 24px */
    --kf-margin: 2.5rem;       /* 40px desktop */
    --kf-container: 1440px;

    /* ---------- STRUCTURĂ (brutalist FLAT: hairline subțire, zero umbre) ---------- */
    --kf-line:   #cdd0bd;                      /* hairline muted deschis (NU negru gros) */
    --kf-line-strong: var(--c-kf-outline);     /* hairline mai vizibil la nevoie */
    --kf-border: 1px solid var(--kf-line);     /* 1px subțire */
    /* FLAT — zero umbre: --shadow-hard* (legacy) e remapat la `none`, nu mai trebuie token kf separat. */
  }

  /* ---------- DARK (remap doar rolurile; accentele rămân vii) ---------- */
  [data-theme="dark"] {
    --kf-bg:            #14160f;
    --kf-surface:       #1f211c;
    --kf-surface-2:     #262822;
    --kf-surface-3:     #2f312b;
    --kf-surface-inset: #34362f;
    --kf-surface-bright:#1a1c17;
    --kf-text:          var(--c-kf-inverse-on);
    --kf-text-variant:  #b9bda6;
    --kf-outline:       #8a8f74;
    --kf-outline-soft:  #4a4d3e;
    --kf-on-primary:    var(--c-kf-olive-ink);  /* text mai închis pe lime */
    --kf-tint:          #2c3a00;                 /* tentă lime întunecată */
    --kf-on-tint:       var(--c-kf-lime-dim);
    --kf-line:          #3a3d31;                 /* hairline subțire pe fundal închis */
    --kf-line-strong:   var(--c-kf-outline);
    --kf-shadow:        none;
    --kf-shadow-hover:  none;
    --kf-shadow-float:  none;
    /* semantice pe dark — soft-urile light ar da fundal greșit (remap unlayered = ambele teme) */
    --kf-success:        #7ddb96; --kf-success-soft: #15311d; --kf-on-success-soft: #c8efce;
    --kf-warning:        #e8c466; --kf-warning-soft: #33270a; --kf-on-warning-soft: #ffe6a0;
    --kf-danger:         #ffb4ab; --kf-danger-soft:  #3a1717; --kf-on-danger-soft:  #ffdad6;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHIMBARE TOTALĂ kf — remap GLOBAL al tokenilor de SKIN din @layer app → valori kf.
   Nelayered → bate @layer app (inclusiv [data-theme=dark]) în AMBELE teme;
   tokenii --kf-* sunt theme-aware → light+dark automat. Atinge DOAR skin
   (culoare/font/umbră/rază); width/grid/flex/gap/size rămân legacy → ARANJAMENTUL NEATINS.
   Stările semantice (--success/--danger/--warning + soft) = remapate la kf-native
   (--kf-success/-danger/-warning, theme-aware) → done/penalty/tie/fav urmează paleta kf.
   Codarea pe criterii (.sc-round--c0/c1/c2 hardcodate; golden via --golden-soft/--on-golden
   definite DOAR în :root base, neremapate aici/dark) = PĂSTRATĂ light intenționat (theme-independent).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* fonturi: display → Archivo 900 "Black" (headere/numere mari peste tot); sans/mono rămân (= kf) */
  --font-display: var(--kf-font-display);
  /* flat total + colțuri ascuțite */
  --shadow-hard: none; --shadow-hard-sm: none;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  /* borduri: gata cu ramele ink 2px groase → hairline kf */
  --border-strong: var(--kf-line); --border-hair: var(--kf-line); --border-subtle: var(--kf-line);
  /* accent/live/highlight → lime kf */
  /* --volt = lime (theme-INDEPENDENT, lime în ambele teme) → „ink pe lime" trebuie să fie ÎNCHIS FIX,
     nu un token care se inversează (kf-text→alb pe dark) sau olive cu contrast slab. olive-ink = #161e00. */
  --volt: var(--kf-accent-strip); --volt-ink: var(--c-kf-olive-ink);
  --primary: var(--kf-primary-solid); --accent: var(--kf-primary-solid);
  --primary-strong: var(--kf-primary-solid); --primary-soft: var(--kf-tint);
  /* semantice → kf-native (done/penalty/tie/fav + alerte/badge/spots, dintr-un loc) */
  --success: var(--kf-success); --success-soft: var(--kf-success-soft);
  --danger:  var(--kf-danger);  --danger-soft:  var(--kf-danger-soft);
  --warning: var(--kf-warning); --warning-soft: var(--kf-warning-soft);
  --on-warning-soft: var(--kf-on-warning-soft);
  /* suprafețe */
  --paper: var(--kf-surface); --paper-2: var(--kf-surface-bright); --card: var(--kf-surface);
  --surface: var(--kf-surface); --surface-2: var(--kf-surface-bright);
  --surface-inverse: var(--kf-text); --text-on-inverse: var(--kf-surface-bright);
  /* text */
  --text: var(--kf-text);
  --fg1: var(--kf-text); --fg2: var(--kf-text);
  --fg3: var(--kf-text-variant); --fg4: var(--kf-outline);
  --text-secondary: var(--kf-text); --text-muted: var(--kf-text-variant); --text-faint: var(--kf-outline);
  /* winner → lime kf (toate regulile is-win/winner urmează automat) */
  --winner-bg: var(--kf-tint); --winner-fg: var(--kf-on-tint);
  --winner-edge: var(--kf-primary-solid); --winner-ink: var(--kf-text);
}

@layer base {
  /* Scop opt-in: paginile migrate primesc body class `kf` → look nou.
     NU atinge paginile legacy (care n-au clasa). */
  /* Fundalul html = ACELAȘI cu al body-ului kf — altfel sub conținutul scurt (și la overscroll)
     se vedea --paper (kf-surface), o nuanță diferită = „pată" sub ultimele div-uri. */
  html:has(> body.kf) { background: var(--kf-bg); }
  body.kf {
    background: var(--kf-bg);
    min-height: 100dvh;  /* body-ul acoperă viewportul chiar și cu conținut scurt */
    color: var(--kf-text);
    font-family: var(--kf-font);
    font-size: var(--kf-fs-body);
    line-height: 1.5;
  }
  body.kf .text-muted { color: var(--kf-text-variant) !important; }
}

/* ===== LAYOUT — composition primitives (scoped la body.kf) ===== */
@layer layout {
  /* ritm vertical reutilizabil */
  
}

/* ===== COMPONENTS — Kinetic Flow (scoped la body.kf, bate legacy) ===== */
@layer components {

  /* ---- Dance-style pill — hue din name|style_hue (SSOT: StyleColorExtension) ----
     Culoare distinctă + stabilă per nume stil, număr nelimitat. Single inline
     `--style-h` = excepția dinamică permisă (ca --w%/--fill%). NU e scoped kf →
     se aplică și pe paginile legacy (live/results/category show). */
  .style-pill {
    --style-s: 70%; --style-l-bg: 90%; --style-l-fg: 30%; --style-l-accent: 45%;
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .12rem .5rem .12rem .42rem; border-radius: 999px;
    background: hsl(var(--style-h) var(--style-s) var(--style-l-bg));
    color: hsl(var(--style-h) var(--style-s) var(--style-l-fg));
    border: 1px solid hsl(var(--style-h) var(--style-s) var(--style-l-accent) / .55);
    border-left: 3px solid hsl(var(--style-h) var(--style-s) var(--style-l-accent));
    font-weight: 600; line-height: 1.25; white-space: nowrap;
  }
  [data-theme="dark"] .style-pill {
    --style-s: 55%; --style-l-bg: 22%; --style-l-fg: 82%; --style-l-accent: 62%;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .style-pill {
      --style-s: 55%; --style-l-bg: 22%; --style-l-fg: 82%; --style-l-accent: 62%;
    }
  }

  /* ---- Page head → Archivo Black uppercase ---- */
  body.kf .page-head {
    font-family: var(--kf-font-display);
    font-weight: 900;
    font-size: var(--font-8xl);
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--kf-text);
    line-height: .98;
    margin: 0;
  }

  /* ---- Folder tabs → segmented flat, divizor 1px subțire ---- */
  body.kf .folder-tabs {
    display: flex; flex-wrap: wrap; gap: 0;
    border: var(--kf-border); margin-bottom: var(--kf-5);
    background: var(--kf-surface-bright);
    padding: 0;
    border-radius: var(--kf-r-sm);
    width: fit-content;
    overflow: hidden;
  }
  body.kf .folder-tab {
    border: 0; border-right: 1px solid var(--kf-line); margin: 0;
    border-radius: 0;
    padding: .5rem 1.1rem;
    font-family: var(--kf-font-mono);
    font-weight: 700; font-size: var(--font-sm); text-transform: uppercase; letter-spacing: .04em;
    color: var(--kf-text-variant);
    background: transparent;
    display: inline-flex; align-items: center; gap: .4rem;
    transition: none;
  }
  body.kf .folder-tab:last-child { border-right: 0; }
  body.kf .folder-tab:hover { color: var(--kf-text); background: var(--kf-surface-2); }
  body.kf .folder-tab.active {
    background: var(--kf-primary);
    color: var(--kf-on-primary);
  }

  /* ---- Masonry gutter (coloane independente construite de masonry-columns.js) ---- */
  body.kf .bcast-grid { gap: var(--kf-gutter); }
  body.kf .bcast-grid.is-masonry { gap: 0; }
  body.kf .bcast-col { gap: var(--kf-gutter); padding: 0 calc(var(--kf-gutter) / 2); }

  /* ---- Concurs card (FLAT, sharp, hairline subțire) ---- */
  body.kf .ccard {
    background: var(--kf-surface);
    border: var(--kf-border);
    border-radius: var(--kf-r-sm);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .1s;
  }
  /* hover flat: contur lime instant (fără lift, fără umbră) */
  body.kf .ccard:hover { border-color: var(--kf-primary-solid); }

  /* hero poster band + overlay — grayscale → color la hover (brutalist) */
  body.kf .ccard__hero {
    position: relative; height: 190px; overflow: hidden;
    background: var(--kf-surface-3); cursor: pointer;
  }
  body.kf .ccard__hero img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(1) contrast(1.05); transition: filter .25s;
  }
  body.kf .ccard:hover .ccard__hero img { filter: grayscale(0) contrast(1); }
  body.kf .ccard__hero-ov {
    position: absolute; inset: auto 0 0 0;
    padding: var(--kf-5) var(--kf-4) var(--kf-3);
    background: linear-gradient(to top, rgba(20,22,15,.82) 0%, rgba(20,22,15,.45) 55%, transparent 100%);
  }
  body.kf .ccard__title {
    font-family: var(--kf-font-display); font-weight: 900; font-size: var(--font-5xl);
    line-height: .95; color: var(--c-white); letter-spacing: .01em; text-transform: uppercase;
  }
  body.kf .ccard__herometa {
    display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .35rem;
    font-family: var(--kf-font-mono); font-size: var(--font-md); color: rgba(255,255,255,.82);
  }
  body.kf .ccard__hero-badges {
    position: absolute; top: var(--kf-3); right: var(--kf-3);
    display: flex; flex-wrap: wrap; gap: .35rem; z-index: 2;
  }
  body.kf .ccard__zoom {
    position: absolute; top: var(--kf-3); left: var(--kf-3); z-index: 2;
    width: 32px; height: 32px; border-radius: var(--kf-r-sm);
    background: rgba(255,255,255,.85); color: var(--kf-text);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .18s;
  }
  body.kf .ccard__hero:hover .ccard__zoom { opacity: 1; }

  /* status badge / countdown → fill plat pătrat (flat, fără border) */
  body.kf .badge-status, body.kf .cbc-days {
    border: 0; border-radius: 0;
    padding: .22rem .55rem; font-size: var(--font-xs); font-weight: 700;
    font-family: var(--kf-font-mono); letter-spacing: .06em; text-transform: uppercase;
    display: inline-flex; align-items: center;
  }
  body.kf .badge-status--open   { background: var(--kf-tint);       color: var(--kf-on-tint); }
  body.kf .badge-status--active { background: var(--kf-secondary);  color: var(--kf-on-secondary); }
  body.kf .badge-status--done   { background: var(--kf-surface-inset); color: var(--kf-text-variant); }
  body.kf .cbc-days { background: var(--kf-alert-soft); color: var(--kf-on-alert-soft); }
  body.kf .cbc-days--today { background: var(--kf-alert); color: var(--c-white); }

  /* ---- Categorie (rând în card) ---- */
  body.kf .ccard > .ccat,
  body.kf .ccard .ccat {
    background: var(--kf-surface-bright);
    border: 0; border-radius: 0;
    margin: 0 var(--kf-4) var(--kf-3);
    padding: var(--kf-3) var(--kf-4);
    position: relative; overflow: hidden;
    transition: background .1s;
  }
  body.kf .ccard .ccat:first-of-type { margin-top: var(--kf-4); }
  body.kf .ccard a.ccat { display: block; color: inherit; text-decoration: none; }
  body.kf .ccat::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: var(--kf-accent-strip); opacity: 0; transition: opacity .15s;
  }
  body.kf .ccat:hover { background: var(--kf-surface-2); }
  body.kf .ccat:hover::before { opacity: 1; }

  body.kf .ccat__l1 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .6rem; }
  /* rând meta = grilă 2-col: etichetă lățime fixă | valori (aliniere verticală a etichetelor) */
  body.kf .ccat__row {
    display: grid; grid-template-columns: 4.5rem 1fr;
    align-items: start; gap: .25rem .5rem; margin-top: .45rem;
  }
  body.kf .ccat__lbl {
    grid-column: 1; align-self: start; justify-self: start;
    font-family: var(--kf-font-mono); font-size: var(--font-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--kf-text-variant);
    margin: 0; padding-top: .28rem; white-space: nowrap;
  }
  /* valorile = cluster wrap în col 2 (wrapper .ccat__vals sau .e-chip-list) */
  body.kf .ccat__vals, body.kf .ccat__row .e-chip-list {
    grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  }
  /* EXCEPȚIE: Line-up + Juriu din antetul categoriei = coloană stivuită, aliniată STÂNGA (un item/rând).
     Regula generală de mai sus (flex-row wrap centrat) are specificitate (0,2,1) și bătea varianta
     ne-kf .res-jury--stacked > .ccat__vals (0,2,0) → jurații apăreau pe rând orizontal, nealiniați.
     O re-declarăm sub body.kf (0,3,1) ca să câștige. */
  body.kf .res-jury--stacked > .ccat__vals {
    flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: .25rem;
  }

  /* style-pill pe kf → PĂSTREAZĂ hue-ul (tentă + strip stânga), dar brutalist:
     mono uppercase, plat, sharp. Iese în evidență față de format/TOP gri. */
  body.kf .style-pill {
    border-radius: 0; border: 0;
    border-left: 4px solid hsl(var(--style-h) var(--style-s) var(--style-l-accent));
    background: hsl(var(--style-h) var(--style-s) var(--style-l-bg));
    color: hsl(var(--style-h) var(--style-s) var(--style-l-fg));
    font-family: var(--kf-font-mono); font-weight: 700; font-size: var(--font-xs);
    text-transform: uppercase; letter-spacing: .04em;
    padding: .2rem .5rem .2rem .42rem;
  }
  body.kf .badge-battle-fmt {
    border: 0; border-radius: 0;
    background: var(--kf-surface-inset); color: var(--kf-text-variant);
    font-family: var(--kf-font-mono); font-weight: 700; font-size: var(--font-xs);
    padding: .2rem .5rem; text-transform: uppercase; letter-spacing: .05em;
  }
  body.kf .badge-top-n {
    border: 0; border-radius: 0;
    background: var(--kf-tint); color: var(--kf-on-tint);
    font-family: var(--kf-font-mono); font-weight: 700; font-size: var(--font-xs);
    padding: .2rem .5rem; letter-spacing: .03em;
  }
  body.kf .ccat .badge.bg-secondary {
    border-radius: 0; background: var(--kf-info-soft) !important;
    color: var(--kf-info); font-family: var(--kf-font-mono); font-weight: 700; font-size: var(--font-xs);
  }

  /* juriu / staff / înscriși → fill plat pătrat (fără border) */
  body.kf .j-pill, body.kf .e-chip {
    border: 0; border-radius: 0;
    background: var(--kf-surface-2); color: var(--kf-text);
    font-size: var(--font-xs); padding: .2rem .55rem; display: inline-flex; align-items: center; gap: .3rem;
  }
  /* numele juratului prelua --primary-strong (remapat la olive) → olive-pe-surface ilizibil.
     → text on-surface normal, lizibil pe chip. */
  body.kf .j-pill__n { color: var(--kf-text); }
  body.kf .j-pill__m, body.kf .e-city { color: var(--kf-text-variant); font-family: var(--kf-font-mono); font-size: var(--font-xs); }
  body.kf .s-pill { background: var(--kf-surface-inset); }
  /* rolul (DJ/Host/oră) = text accent DIRECT pe chip (bg transparent) — bg-ul inverse din regula
     de bază dădea olive-pe-negru ilizibil pe light. Pe dark accentul olive nu ține → lime-dim. */
  body.kf .s-pill__r {
    background: transparent;
    font-family: var(--kf-font-mono); font-size: var(--font-2xs); font-weight: 700;
    text-transform: uppercase; color: var(--kf-accent); letter-spacing: .04em;
  }
  [data-theme="dark"] body.kf .s-pill__r { color: var(--c-kf-lime-dim); }
  body.kf .e-chip-list { display: inline-flex; flex-wrap: wrap; gap: .3rem; }

  /* CTA înscriere → lime plat (SINGURUL lime), hover invert instant */
  body.kf .ccat__cta {
    margin-top: var(--kf-4);
    background: var(--kf-primary); color: var(--kf-on-primary);
    border: 0; border-radius: 0;
    padding: .7rem 1rem;
    font-family: var(--kf-font-mono);
    font-weight: 700; font-size: var(--font-md); text-transform: uppercase; letter-spacing: .06em;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    transition: none;
  }
  body.kf .ccat__cta:hover,
  body.kf .ccat__cta[aria-expanded="true"] {
    background: var(--kf-primary-solid); color: var(--kf-on-solid);
  }
  body.kf .ccat__cta .bi-chevron-down { margin-left: auto; }
  body.kf .ccat__cta[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

  /* ---- Formular înscriere inline (flat) ---- */
  body.kf .ccat-form {
    background: var(--kf-surface-2);
    margin: 0 var(--kf-4) var(--kf-4);
    border: 0; border-radius: 0;
    padding: var(--kf-4);
  }
  body.kf .pc-form-title {
    font-family: var(--kf-font-display); font-weight: 900; font-size: var(--font-xl);
    text-transform: uppercase; letter-spacing: .02em;
    color: var(--kf-text); margin-bottom: var(--kf-3);
  }
  body.kf .ac-hint, body.kf .dancer-lbl {
    font-family: var(--kf-font-mono); font-size: var(--font-xs); text-transform: uppercase;
    letter-spacing: .04em; color: var(--kf-text-variant);
  }
  /* inputuri → hairline 1px plat, focus = contur lime instant */
  body.kf .ccat-form .form-control,
  body.kf .ccat-form .form-select {
    background-color: var(--kf-surface-bright);   /* background-color (NU background) — nu șterge săgeata select */
    border: 1px solid var(--kf-line);
    border-radius: 0;
    color: var(--kf-text); font-family: var(--kf-font-mono); font-size: var(--font-md);
    box-shadow: none; transition: border-color .1s;
  }
  body.kf .ccat-form .form-control::placeholder { color: var(--kf-outline); }
  body.kf .ccat-form .form-control:focus,
  body.kf .ccat-form .form-select:focus {
    background-color: var(--kf-surface-bright);
    border-color: var(--kf-primary-solid);
    box-shadow: inset 2px 0 0 var(--kf-accent-strip); outline: none;
  }
  body.kf .ccat-form .dob-row select { font-family: var(--kf-font-mono); }

  /* Formular înscriere — strip „left-strip" DASHED pe stânga + colțuri rotunjite (nu cutie completă).
     Bordura e doar pe stânga; border-radius rotunjește boxul (fundal + capetele strip-ului) = look cool.
     SSOT prin clasa .entry-form pe <form> (_entry_form.html.twig) → identic pe /concursuri
     (în .ccat-form) ȘI pe pagina categoriei organizatorului (formular plain). Plasat în
     @layer components, DUPĂ regula .ccat-form, ca să bată cutia kf (specificitate egală + ordine). */
  body.kf .entry-form .form-control,
  body.kf .entry-form .form-select {
    border: 0; border-left: 2px dashed var(--kf-line);
    border-radius: var(--entry-radius); background-color: var(--kf-surface-bright);
    box-shadow: none; transition: border-left-color .12s;
  }
  body.kf .entry-form .form-control:focus,
  body.kf .entry-form .form-select:focus {
    border-left-color: var(--kf-primary-solid);
    box-shadow: none; outline: none;
  }

  /* submit → olive solid plat, hover invert instant */
  body.kf .ccat-form .btn-ink {
    background: var(--kf-primary-solid); color: var(--kf-on-solid);
    border: 0; border-radius: 0;
    font-family: var(--kf-font-mono); font-weight: 700; padding: .65rem 1.5rem;
    text-transform: uppercase; letter-spacing: .06em;
    transition: none;
  }
  body.kf .ccat-form .btn-ink:hover { background: var(--kf-primary); color: var(--kf-on-primary); }
  body.kf .ccat-form .btn-outline-secondary {
    border-radius: 0; border-color: var(--kf-line); color: var(--kf-text-variant);
    font-family: var(--kf-font-mono); text-transform: uppercase; font-size: var(--font-xs);
  }

  /* empty state */
  body.kf .empty-ico--lg { color: var(--kf-outline); }

  /* ═══════════ DASHBOARD „Contul meu" /cont (scoped body.kf) ═══════════ */

  /* Page header → titlu display + acțiune dreapta, hairline jos */
  body.kf .page-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: var(--kf-3);
    border-bottom: var(--kf-border); padding-bottom: var(--kf-3); margin-bottom: var(--kf-5);
  }
  body.kf .page-header__title {
    font-family: var(--kf-font-display); font-weight: 900; font-size: var(--font-8xl);
    line-height: .98; letter-spacing: .01em; text-transform: uppercase;
    color: var(--kf-text); margin: 0;
  }

  /* btn-ink (page/acct primary) → olive solid plat, hover invert instant */
  body.kf .btn-ink {
    background: var(--kf-primary-solid); color: var(--kf-on-solid);
    border: 0; border-radius: 0;
    font-family: var(--kf-font-mono); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    padding: .5rem 1.1rem; display: inline-flex; align-items: center; gap: .4rem;
    transition: none;
  }
  body.kf .btn-ink:hover { background: var(--kf-primary); color: var(--kf-on-primary); }
  body.kf .btn-ink.btn-xs { padding: .35rem .8rem; font-size: var(--font-xs); }

  /* Card profil organizator → flat hairline */
  body.kf .acct-card {
    background: var(--kf-surface); border: var(--kf-border); border-radius: 0;
    padding: var(--kf-3) var(--kf-4);
  }
  body.kf .acct-card__ico { color: var(--kf-text-variant); }
  body.kf .acct-card__name {
    font-family: var(--kf-font-display); font-weight: 900; text-transform: uppercase;
    letter-spacing: .02em; font-size: var(--font-xl); color: var(--kf-text);
  }
  body.kf .acct-card__email { font-family: var(--kf-font-mono); font-size: var(--font-sm); color: var(--kf-text-variant); }
  body.kf .acct-form { border-top: 1px solid var(--kf-line); }
  body.kf .acct-form__lbl {
    font-family: var(--kf-font-mono); font-size: var(--font-2xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--kf-text-variant);
  }
  body.kf .acct-card .form-control {
    background: var(--kf-surface-bright); border: 1px solid var(--kf-line); border-radius: 0;
    color: var(--kf-text); font-family: var(--kf-font-mono); font-size: var(--font-md); box-shadow: none;
  }
  body.kf .acct-card .form-control:focus {
    border-color: var(--kf-primary-solid); box-shadow: inset 2px 0 0 var(--kf-accent-strip); outline: none;
  }

  /* Rând de arhivă (/arhiva) — afiș portret + coloană de text.
     AICI stă DOAR ce un token nu poate exprima: fontul mono, uppercase, filtrul grayscale→color
     și fundalul paginii. Bordurile, razele (=0) și suprafețele vin gratis din remap-ul global de
     tokeni de mai sus — NU scrie reguli de culoare pentru ele. Dimensiunile (aspect-ratio, clamp,
     container query) rămân în @layer app: kf-ul e o piele, nu un layout. */
  body.kf .arch-poster { background: var(--kf-surface-3); }
  body.kf .arch-poster img { filter: grayscale(1) contrast(1.05); transition: filter .25s; }
  body.kf .ccard:hover .arch-poster img { filter: grayscale(0) contrast(1); }
  /* Modificator pe o clasă care ARE regulă body.kf → are nevoie de copie scopată, altfel pierde
     pe ordinea de layere (components bate app indiferent de specificitate). */
  body.kf .arch-poster--empty { color: var(--kf-outline); }
  body.kf .arch-title {
    font-family: var(--kf-font-display); text-transform: uppercase; letter-spacing: .01em;
    color: var(--kf-text);
  }
  body.kf .arch-meta {
    font-family: var(--kf-font-mono); font-size: var(--font-xs); color: var(--kf-text-variant);
  }
  /* --bg NU e în blocul de remap de mai sus (doar --kf-bg e fundalul lui body.kf) → fără linia
     asta, antetul lipicios ar avea altă nuanță decât pagina și s-ar vedea o dungă la derulare. */
  body.kf .arch-year { background: var(--kf-bg); border-bottom: 1px solid var(--kf-line); }
  body.kf .arch-year__n { font-family: var(--kf-font-mono); }

  /* Tabel categorii (folosit de _qualification_section) */
  body.kf .pub-cat-table td { padding: .4rem .5rem; }
  body.kf .pub-cat-table tr + tr td { border-top: 1px solid var(--kf-line); }
  /* rând categorie (clasă proprie kf → NU se ciocnește cu legacy .cat-tr important) */
  body.kf .kf-catrow td { transition: background .1s; }
  body.kf .kf-catrow--odd td { background: var(--kf-surface-bright); }
  body.kf .kf-catrow:hover td { background: var(--kf-surface-2); color: var(--kf-text); }
  /* hover = strip lime stânga + grey subtil (ca .ccat::before de pe /concursuri) */
  body.kf .kf-catrow:hover td:first-child { box-shadow: inset 4px 0 0 var(--kf-accent-strip); }
  body.kf .cat-entries-lbl {
    font-family: var(--kf-font-mono); font-size: var(--font-2xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--kf-text-variant);
  }
  /* tier pill (clasă proprie → fără Bootstrap text-bg-* care e important în @layer vendor) */
  body.kf .tier-pill {
    border: 0; border-radius: 0; padding: .2rem .5rem;
    background: var(--kf-surface-inset); color: var(--kf-text-variant);
    font-family: var(--kf-font-mono); font-weight: 700; font-size: var(--font-xs);
    text-transform: uppercase; letter-spacing: .03em; display: inline-flex; align-items: center;
  }
  body.kf .tier-pill--rank { background: var(--kf-tint); color: var(--kf-on-tint); }

  /* Acțiuni per-categorie → next-step = lime plat; restul = outline hairline mono */
  body.kf .cat-actions .btn {
    border-radius: 0; border: 1px solid var(--kf-line);
    font-family: var(--kf-font-mono); font-weight: 700; font-size: var(--font-xs);
    text-transform: uppercase; letter-spacing: .04em; padding: .3rem .7rem;
    transition: none; background: var(--kf-surface-bright); color: var(--kf-text-variant);
  }
  body.kf .cat-actions .btn:hover { border-color: var(--kf-primary-solid); color: var(--kf-text); }
  body.kf .cat-actions .btn-success,
  body.kf .cat-actions .btn-warning,
  body.kf .cat-actions .btn-dark {
    background: var(--kf-primary); color: var(--kf-on-primary); border-color: var(--kf-primary);
  }
  body.kf .cat-actions .btn-success:hover,
  body.kf .cat-actions .btn-warning:hover,
  body.kf .cat-actions .btn-dark:hover {
    background: var(--kf-primary-solid); color: var(--kf-on-solid); border-color: var(--kf-primary-solid);
  }

  /* Editează profil → outline hairline mono transparent */
  body.kf .acct-card .btn-outline-secondary {
    border-radius: 0; border: 1px solid var(--kf-line);
    font-family: var(--kf-font-mono); font-weight: 700; font-size: var(--font-xs);
    text-transform: uppercase; letter-spacing: .04em;
    background: transparent; color: var(--kf-text-variant); transition: none;
  }
  body.kf .acct-card .btn-outline-secondary:hover { border-color: var(--kf-primary-solid); color: var(--kf-text); }

  /* empty-state icon */
  body.kf .empty-ico { color: var(--kf-outline); opacity: .35; }

  /* === LANDING `/` — Kinetic Sharp (flat, hairline, display Black) ============ */
  body.kf .home-hero {
    border: 0; border-top: 2px solid var(--kf-accent-strip);
    border-radius: 0; background: var(--kf-surface);
    box-shadow: none; padding: var(--kf-7) var(--kf-4);
    text-align: center; margin: var(--kf-4) 0 var(--kf-5);
  }
  body.kf .home-hero__mark { color: var(--kf-accent); }
  body.kf .home-hero__title {
    font-family: var(--kf-font-display); font-weight: 900;
    text-transform: uppercase; letter-spacing: .01em;
    color: var(--kf-text);
  }
  body.kf .home-hero__flash { color: var(--kf-accent); }
  body.kf .home-hero__tag { color: var(--kf-text-variant); }

  body.kf .home-grid { gap: var(--kf-4); }
  body.kf .home-card__body p { color: var(--kf-text-variant); }

  /* Hub cards (DOAR landing) → flat hairline, fără radius/umbră */
  body.kf .hub-card {
    border: var(--kf-border); border-radius: 0;
    background: var(--kf-surface); transition: none;
  }
  body.kf .hub-card:hover { box-shadow: none; border-color: var(--kf-accent-strip); }
  body.kf .hub-strip {
    font-family: var(--kf-font-display); font-weight: 900;
    border-bottom: var(--kf-border); letter-spacing: .08em;
  }

  /* === CLASAMENT `/clasament` — Kinetic Sharp (flat, hairline, mono) ==== */
  /* Selector stil dans = tab-uri (consecvent cu .folder-tab kf) */
  body.kf .role-tabs {
    border-bottom: 1px solid var(--kf-line); gap: 0;
  }
  body.kf .role-tab {
    font-family: var(--kf-font-mono); text-transform: uppercase;
    letter-spacing: .04em; font-size: var(--font-xs); color: var(--kf-text-variant);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  body.kf .role-tab:hover { color: var(--kf-text); background: var(--kf-surface-2); }
  body.kf .role-tab.active {
    color: var(--kf-text); border-bottom-color: var(--kf-accent-strip);
  }

  /* Panou leaderboard = plat, hairline, 0-radius */
  body.kf .lb-panel {
    border: var(--kf-border); border-radius: 0;
    background: var(--kf-surface); box-shadow: none;
  }
  body.kf .lb-panel__head {
    font-family: var(--kf-font-display); font-weight: 900;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--kf-text); background: var(--kf-surface-bright);
    border-bottom: 1px solid var(--kf-line);
  }
  body.kf .lb-panel__head .lb-panel__count {
    font-family: var(--kf-font-mono); color: var(--kf-accent);
  }

  /* Tabel ELO — celule hairline, header mono, hover lime (NU volt-galben legacy) */
  body.kf .lb-panel .tier-table td { border-bottom: 1px solid var(--kf-line); }
  body.kf .lb-panel .tier-table tbody tr:nth-child(even) td { background: var(--kf-surface-bright); }
  body.kf .lb-panel .tier-table tbody tr:hover td {
    background: var(--kf-surface-2); color: var(--kf-text);
  }
  body.kf .lb-panel .tier-table tbody tr:hover td:first-child {
    box-shadow: inset 4px 0 0 var(--kf-accent-strip);
  }
  body.kf .tier-table-header th {
    font-family: var(--kf-font-mono); text-transform: uppercase;
    letter-spacing: .04em; font-size: var(--font-xs); color: var(--kf-text-variant);
    border-bottom: 1px solid var(--kf-line);
  }

  body.kf .entity-name {
    font-family: var(--kf-font-display); font-weight: 900;
    letter-spacing: .01em; color: var(--kf-text);
  }
  body.kf .lb-elo {
    font-family: var(--kf-font-display); font-weight: 900; color: var(--kf-accent);
  }
  body.kf .lb-meta { color: var(--kf-text-variant); }
  body.kf .lb-meta__cc { font-family: var(--kf-font-mono); color: var(--kf-text); }
  body.kf .lb-empty { font-family: var(--kf-font-mono); color: var(--kf-text-variant); }

  /* Statistici V–Î / Win% */
  body.kf .stat-pct-value { font-family: var(--kf-font-mono); color: var(--kf-text); }
  body.kf .stat-pct-value.pct-high { color: var(--kf-accent); }
  body.kf .stat-pct-value.pct-low { color: var(--kf-text-variant); }
  /* Δ + formă pe skin kf */
  body.kf .lb-delta { font-family: var(--kf-font-mono); color: var(--kf-text-variant); }
  body.kf .lb-delta--up { color: var(--kf-accent); }
  body.kf .lb-delta--down { color: var(--kf-danger); }
  body.kf .form-pip--w { color: var(--kf-accent); }
  body.kf .form-pip--l { color: var(--kf-danger); }
  body.kf .stat-pct-bar { background: var(--kf-surface-inset); border-radius: 0; }
  body.kf .stat-pct-bar .bar-fill, body.kf .bar-win {
    background: var(--kf-accent-strip); border-radius: 0;
  }

  /* Paginare numere (scoped kf — nu atinge alte pagini legacy cu .filter-pill) */
  body.kf .filter-pill {
    font-family: var(--kf-font-mono); border: 1px solid var(--kf-line);
    border-radius: 0; color: var(--kf-text-variant); background: var(--kf-surface);
  }
  body.kf .filter-pill:hover { background: var(--kf-surface-2); color: var(--kf-text); }
  body.kf .filter-pill.active {
    background: var(--kf-tint); color: var(--kf-on-tint); border-color: var(--kf-primary-solid);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KF — overrides COMPONENT peste SSOT-ul de tokeni (blocul global `:root{}` ~2950).
   SSOT skin = tokenii. AICI DOAR ce tokenul NU poate exprima:
   uppercase pe nume, MONO pe label-uri ce erau sans/display, accente lime punctuale
   (unde legacy folosea alt token), hover-strip, winner consistent. NU rescrie
   border/bg/radius/shadow/font-display — alea vin din token. (Vezi UI_RULES „SSOT skin".)
   ═══════════════════════════════════════════════════════════════════════════ */
@layer components {
  /* Numere/headere mari: greutatea 900 vine din regulile legacy (display = Archivo Black);
     override-ul de 400 era doar pentru Anton (un singur weight) → eliminat. */
  body.kf .cat-panel-hdr { letter-spacing: .04em; }

  /* MONO pe label-uri/taguri care erau sans/display (semnal kf — nu vine din token) */
  body.kf .cat-tabs .nav-link, body.kf .bk-col-label,
  body.kf .bgc__hdr, body.kf .tbl-th, body.kf .stat-value, body.kf .sc-totals__v,
  body.kf .sc-round__hd, body.kf .sc-totals__lbl, body.kf .sc-prog__lbl, body.kf .sc-jt__jr,
  body.kf .bk-progress__lbl, body.kf .bk-col-count,
  body.kf .bk-current__phase, body.kf .bk-sc-hint,
  body.kf .sc-jc__pen, body.kf .sc-jt__pen, body.kf .sc-jc__eq, body.kf .sc-jt__eq,
  body.kf .bgc__ord, body.kf .bgc__state, body.kf .bgc__crew { font-family: var(--kf-font-mono); }

  /* UPPERCASE scoreboard pe nume (fontul rămâne) */
  body.kf .bk-entry__name, body.kf .sc-jt__jn { text-transform: uppercase; letter-spacing: .02em; }

  /* Tab-uri Calificare|Bracket = underline flat (legacy = tab cu rame/radius literal) */
  body.kf .cat-tabs .nav-link {
    text-transform: uppercase; letter-spacing: .04em;
    border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
  }
  body.kf .cat-tabs .nav-link:hover { background: var(--kf-surface-2); }
  body.kf .cat-tabs .nav-link.active { border-bottom-color: var(--kf-accent-strip); }

  /* Accente lime PUNCTUALE (legacy folosea alt token → nu vin din remap) */
  /* Categoria activă = clar evidențiată: bordură accent groasă + bold + bulină lime (e clar pe ce categorie ești) */
  body.kf .cat-strip__item--on {
    background: var(--volt); color: var(--volt-ink);
    border: 2px solid var(--volt-ink); font-weight: 700;
  }
  body.kf .cat-strip__item--on .cat-strip__top { color: var(--volt-ink); opacity: .65; }
  body.kf .cat-strip__item--on::after {
    content: ""; width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--volt-ink); flex-shrink: 0;
    animation: bgc-pulse 1.1s ease-in-out infinite;
  }
  body.kf .bgc__live-dot, body.kf .bgc__dot--active { background: var(--kf-primary-solid); }
  body.kf .sc-totals__v--hi { color: var(--kf-accent); }
  body.kf .sc-prog__cell.is-on { background: var(--kf-primary-solid); border-color: var(--kf-primary-solid); }

  /* Barele de magnitudine din celulele de scor: gri-neutru → lime (is-fav verde / is-tie amber) */
  body.kf .sc-jt__cell { --sc-fill: color-mix(in srgb, var(--kf-accent-strip) 22%, transparent); --sc-edge: var(--kf-primary-solid); }
  body.kf .sc-jt__cell.is-fav { --sc-fill: color-mix(in srgb, var(--kf-success) 20%, transparent); --sc-edge: var(--kf-success); }
  body.kf .sc-jt__cell.is-tie { --sc-fill: color-mix(in srgb, var(--kf-warning) 18%, transparent); --sc-edge: var(--kf-warning); }

  /* WINNER = lime: vine acum din tokenul global --winner-* (legacy :root + remap kf),
     citit de TOATE regulile is-win/winner (bk-entry, sc__side, sc-jc, bracket-entry).
     Zero override per-clasă aici → fără spoturi ratate. */

  /* Hover left-strip (lipsea) */
  body.kf .bk-battle:hover { box-shadow: inset 4px 0 0 var(--kf-accent-strip); }
  body.kf .sc-jt__row:hover { background: var(--kf-surface-2); }

  /* Bara „battle curent": fundalul lime remapat dădea text olive-pe-lime (mohorât, ilizibil).
     → text near-black pe lime = contrast brutalist curat. */
  body.kf .bk-current__phase { color: var(--volt-ink); }

  /* Bara Start: olive-solid avea text olive (on-primary, gândit pt LIME) → olive-pe-olive ilizibil.
     → text alb (on-solid) pe olive-solid = contrast clar. */
  body.kf .bk-current__ctrl .btn-warning, body.kf .bk-current__ctrl .btn-warning:hover {
    background: var(--kf-primary-solid); border-color: var(--kf-primary-solid); color: var(--kf-on-solid);
    text-transform: uppercase; border-radius: 0;
  }
  body.kf .bk-current__ctrl .btn-success, body.kf .bk-current__ctrl .btn-success:hover { text-transform: uppercase; border-radius: 0; }
}