/* ═══════════════════════════════════════════════
   TOKENS — Handball Rules Redesign (IHF Arbitraj)
   Paper #FBF8F3 · Ink #17181C · Accent #EA5A2B
   Display: Archivo · Data/Labels: Space Mono
═══════════════════════════════════════════════ */
:root {
  --bg:          #F1ECE3;   /* subtle warm fill (chips, tracks) */
  --paper:       #FBF8F3;   /* page background */
  --canvas:      #E9E4DA;   /* outer canvas (desktop) */
  --dark:        #17181C;   /* ink / dark surfaces */
  --accent:      #EA5A2B;
  --accent-h:    #D14E22;
  --accent-text: #C4501F;   /* accent legible on light bg */
  --accent-light:#FBEAE2;   /* accent tint bg */
  --surface:     #ffffff;
  --border:      #E6E1D7;
  --border-soft: #EDE8DF;
  --border-strong:#DCD6CB;
  --text:        #17181C;
  --text-2:      #46433C;
  --muted:       #6F6A60;
  --faint:       #9A958B;
  --disabled:    #C9C2B5;
  --success:     #1F8A5B;
  --success-dark:#146A45;
  --success-bg:  #DFF3E8;
  --warning:     #D9932A;
  --warning-text:#B45309;
  --warning-bg:  #FEF3C7;
  --danger:      #C4373B;
  --danger-text: #B91C1C;
  --danger-bg:   #FEE2E2;
  --user-bg:     #EA5A2B;
  --ai-bg:       #ffffff;
  --primary:     #EA5A2B;   /* legacy alias */
  /* soft semantic fills (folosite unde erau culori hardcodate) */
  --danger-soft-bg:      #FEF2F2;
  --danger-soft-border:  #FECACA;
  --warning-soft-bg:     #FFFBEB;
  --warning-soft-border: #F3E2A8;
  --warning-strong:      #92400E;
  --warning-strong-2:    #6b5220;
  --press-bg:            #FFFDFA;
  --skeleton-a:          #EFEAE0;
  --skeleton-b:          #F7F3EC;
  --drag-handle:         #E0DACE;
  /* chip „ink" — element închis pe fundal deschis; pe dark se inversează,
     altfel textul/conturul negru dispare pe fundalul închis */
  --ink-chip-bg:   #17181C;
  --ink-chip-text: #ffffff;
  --ink-chip-bg-h: #2A2C30;
  --r:           14px;
  --r-sm:        10px;
  --r-lg:        16px;
  --shadow:      0 4px 16px -10px rgba(23,24,28,.25);
  --shadow-lg:   0 14px 40px -12px rgba(23,24,28,.28);
  --shadow-acc:  0 12px 24px -12px rgba(234,90,43,.7);
  --header-h:    58px;
  --font:        'Archivo', system-ui, -apple-system, sans-serif;
  --mono:        'Space Mono', ui-monospace, monospace;
  --trans:       .18s ease;
  --header-h-mobile: 96px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

/* ═══════════════════════════════════════════════
   DARK MODE — html[data-theme="dark"]
   (setat pre-paint din index.html: manual sau după sistem)
═══════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg:          #23252B;
  --paper:       #131418;
  --canvas:      #0D0E11;
  --accent-h:    #F26A3C;
  --accent-text: #F0854F;
  --accent-light:#35201A;
  --surface:     #1C1E24;
  --border:      #2E3138;
  --border-soft: #272A31;
  --border-strong:#3A3E47;
  --text:        #F0EEE9;
  --text-2:      #C6C3BC;
  --muted:       #8F8C85;
  --faint:       #6E6B64;
  --disabled:    #4A4842;
  --success:     #2FB577;
  --success-dark:#7ADBAE;
  --success-bg:  #142A1F;
  --warning:     #E0A33E;
  --warning-text:#E5B45C;
  --warning-bg:  #2C2410;
  --danger:      #E05B5F;
  --danger-text: #F08B8D;
  --danger-bg:   #331718;
  --ai-bg:       #1C1E24;
  --shadow:      0 4px 16px -10px rgba(0,0,0,.6);
  --shadow-lg:   0 14px 40px -12px rgba(0,0,0,.65);
  --shadow-acc:  0 12px 24px -12px rgba(234,90,43,.45);
  --danger-soft-bg:      #331718;
  --danger-soft-border:  #5A2A2C;
  --warning-soft-bg:     #2C2410;
  --warning-soft-border: #4A3D1A;
  --warning-strong:      #E5B45C;
  --warning-strong-2:    #C9A45C;
  --press-bg:            #22242A;
  --skeleton-a:          #23252B;
  --skeleton-b:          #2B2E35;
  --drag-handle:         #3A3E47;
  --ink-chip-bg:   #F0EEE9;
  --ink-chip-text: #17181C;
  --ink-chip-bg-h: #ffffff;
}
/* figurile din regulament sunt desene negre — pe dark primesc placă albă */
html[data-theme="dark"] .rule-figure img,
html[data-theme="dark"] .rule-article-body img {
  background: #fff;
  border-radius: 10px;
  padding: 6px;
}
/* overlay-ul de modală: puțin mai dens pe dark, blur-ul rămâne */
html[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.55); }
/* suprafețele „ink" (hero, butoane plutitoare) primesc contur pe dark,
   ca să nu se topească în fundalul la fel de închis */
html[data-theme="dark"] .quiz-card--learn { border-color: var(--border-strong); }

/* ═══════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════ */
/* `touch-action: manipulation` = permite pan pe ambele axe + pinch-zoom, dar
   taie double-tap-to-zoom (deci fără întârzierea de ~300ms la tap).
   NU pune `pan-y` aici. A fost așa (moștenire din era PWA/app-shell, respinsă),
   și rezultatul era că pe touch NIMIC nu se putea trage lateral: `touch-action`
   nu se moștenește, dar browserul intersectează valorile de la elementul atins
   în sus prin toți strămoșii — cu `pan-y` pe *, fiecare <td> și fiecare
   container părinte refuzau gestul orizontal, așa că tabelele cu
   `overflow-x: auto` afișau bara de scroll dar erau imposibil de scrollat.
   Pagina nu derivă lateral fără `pan-y`: de asta răspunde `overflow-x: hidden`
   pe html/body, de mai jos. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; overflow-x: hidden; max-width: 100vw; }

/* Container care scrollează orizontal (tabele mai late decât ecranul).
   Gestul de pan orizontal e permis de `touch-action: manipulation` de pe *;
   aici adăugăm doar scroll inerțial pe iOS și oprirea gestului de „back". */
.hscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
html:has(#page-login:not(.hidden)),
body:has(#page-login:not(.hidden)) { background: #17181C; }
/* Decizie 2026-07-10: fără adaptarea culorii barei Safari la drawer/modale —
   site clasic permanent, fundalul documentului nu se schimbă niciodată. */
body {
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
button { cursor: pointer; font-family: inherit; }
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
}
a { color: var(--accent-text); text-decoration: none; }
ul, ol { padding-left: 1.4em; }

/* ═══════════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════════ */
.hidden { display: none !important; }

/* Space Mono label — reused across the app */
.mono-label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════
   PAGES (SPA routing)
═══════════════════════════════════════════════ */
.page { min-height: 100vh; display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .65rem 1.15rem;
  border: none; border-radius: 12px;
  font-size: .875rem; font-weight: 800;
  letter-spacing: -.01em;
  transition: background var(--trans), opacity var(--trans), box-shadow var(--trans), transform var(--trans);
  white-space: nowrap;
}
.btn-primary  { background: var(--accent); color: #fff; box-shadow: var(--shadow-acc); }
.btn-primary:hover { background: var(--accent-h); }
.btn-ghost,
.btn-outline  { background: transparent; color: var(--muted); border: 1.5px solid var(--border); font-weight: 700; }
.btn-ghost:hover,
.btn-outline:hover { background: var(--bg); color: var(--text-2); }
.btn-danger   { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: .88; }
.btn-full     { width: 100%; }
.btn-sm       { padding: .4rem .85rem; font-size: .8rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.icon-btn {
  width: 38px; height: 38px;
  border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--trans), color var(--trans);
}
.icon-btn:hover { background: var(--bg); color: var(--text); }

/* ═══════════════════════════════════════════════
   SPINNER
═══════════════════════════════════════════════ */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .14em;
}
.field input, .field select, .field textarea {
  padding: .75rem .95rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--trans), box-shadow var(--trans);
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(234,90,43,.14);
}
.input-wrap { position: relative; }
.input-wrap input { width: 100%; padding-right: 2.8rem; }
.toggle-pass {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--faint); padding: .25rem;
}
.toggle-pass:hover { color: var(--text); }
.field-error {
  font-size: .825rem; color: var(--danger-text);
  background: var(--danger-soft-bg); border: 1px solid var(--danger-soft-border);
  padding: .5rem .75rem; border-radius: var(--r-sm);
}

/* ═══════════════════════════════════════════════
   LOGIN PAGE — dark, sportiv, oficial (screen 01)
═══════════════════════════════════════════════ */
#page-login {
  position: relative;
  align-items: center; justify-content: center;
  background: var(--dark);
  background-image: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.022) 46px 48px);
  min-height: 100vh;
  padding: 1.5rem;
  padding-top: calc(1.5rem + var(--sat));
  padding-bottom: calc(1.5rem + var(--sab));
}
.login-wrap { width: 100%; max-width: 400px; }
.login-card {
  background: transparent;
  border-radius: 0;
  padding: 1rem 0;
  box-shadow: none;
  display: flex; flex-direction: column; gap: 1.5rem;
  color: #fff;
}
.login-brand { text-align: center; }
.brand-icon {
  font-size: 2.2rem; line-height: 76px;
  width: 76px; height: 76px;
  margin: 0 auto .85rem;
  display: block;
  background: var(--accent);
  border-radius: 22px;
  box-shadow: 0 12px 30px -8px rgba(234,90,43,.6);
}
.login-brand h1 {
  font-size: 1.85rem; font-weight: 900; letter-spacing: -.02em;
  color: #fff; margin-bottom: .55rem;
}
/* Numele lung sub „HOP" (owner, 16 sep 2026) */
.login-brand-name {
  font-size: .95rem; font-weight: 700; letter-spacing: -.005em;
  color: rgba(255,255,255,.82); margin: -.3rem 0 .6rem;
}
.login-brand p {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
}
#loginForm { display: flex; flex-direction: column; gap: 1rem; }
.login-guest { text-align: center; margin: .25rem 0 0; }
.login-guest a {
  font-family: var(--mono);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,255,255,.6);
  padding: .4rem;
}
.login-guest a:hover { color: #fff; }

/* ── Pagini legale (Confidențialitate / Termeni) ── */
.legal-body {
  flex: 1;
  background: var(--paper);
  padding: 1.75rem 1.25rem 3rem;
}
.legal-doc {
  max-width: 680px;
  margin: 0 auto;
  color: var(--text);
  line-height: 1.65;
}
.legal-doc h1 {
  font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em;
  margin: 0 0 .35rem;
}
.legal-doc .legal-meta {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .06em;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.legal-doc h2 {
  font-size: 1.05rem; font-weight: 800;
  margin: 1.75rem 0 .5rem;
}
.legal-doc p { margin: 0 0 .85rem; color: var(--text-2); }
.legal-doc ul { margin: 0 0 .85rem; padding-left: 1.25rem; color: var(--text-2); }
.legal-doc li { margin: 0 0 .4rem; }
.legal-doc a { color: var(--accent-text); text-decoration: underline; }

/* ── Link-uri legale în subsolul drawer-ului (fine print) ── */
.drawer-legal {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1.25rem .2rem;
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .04em;
}
.drawer-legal button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit;
  color: rgba(255,255,255,.5);
}
.drawer-legal button:hover { color: rgba(255,255,255,.85); }
.drawer-legal span { color: rgba(255,255,255,.3); }

/* dark inputs on the login screen */
#page-login .field label { color: var(--faint); }
#page-login .field input {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #fff;
  height: 52px;
}
#page-login .field input::placeholder { color: rgba(255,255,255,.35); }
#page-login .field input:focus {
  border-color: rgba(234,90,43,.65);
  box-shadow: 0 0 0 3px rgba(234,90,43,.18);
}
#page-login .toggle-pass { color: var(--faint); }
#page-login .btn-primary { height: 54px; font-size: 1rem; border-radius: var(--r); }
#page-login .field-error {
  background: rgba(196,55,59,.14); border-color: rgba(196,55,59,.45); color: #F3A6A8;
}

/* ═══════════════════════════════════════════════
   APP HEADER (shared)
═══════════════════════════════════════════════ */
.app-header {
  min-height: var(--header-h);
  height: auto;
  background: var(--dark);
  color: #fff;
  display: flex; align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0 .75rem;
  padding-top: var(--sat);
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header-brand { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; order: 1; }
.header-icon  { font-size: 1.3rem; flex-shrink: 0; }
.header-title { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.header-actions { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; order: 3; }
.app-header .icon-btn { color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); border-radius: var(--r-sm); }
.app-header .icon-btn:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Language selector */
.lang-group { display: flex; background: rgba(255,255,255,.09); border-radius: var(--r-sm); overflow: hidden; padding: 3px; gap: 2px; }
.lang-btn {
  border: none; background: transparent; color: var(--faint);
  padding: .28rem .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  border-radius: 7px;
  transition: background var(--trans), color var(--trans);
}
.lang-btn.active { background: #fff; color: var(--dark); }
.lang-btn:hover:not(.active) { background: rgba(255,255,255,.12); color: #fff; }

/* ═══════════════════════════════════════════════
   CHAT PAGE
═══════════════════════════════════════════════ */

/* Messages */


/* Welcome */
.chip {
  border: 1.5px solid var(--border); background: var(--surface);
  border-radius: 20px; padding: .45rem .9rem;
  font-size: .8rem; font-weight: 600; color: var(--text-2);
  transition: border-color var(--trans), background var(--trans), color var(--trans);
}
.chip:hover { border-color: var(--accent); background: rgba(234,90,43,.08); color: var(--accent-text); }

/* Message rows */



/* Markdown inside AI bubble */

/* Clickable article refs in AI answers */

/* Typing dots */

/* Feedback area — pills (screen 03) */


/* Error bubble */

/* Suggestion cards */






/* Info banner */

/* "Load more suggestions" button */

/* Compact suggestions button */

/* Input bar */


/* ═══════════════════════════════════════════════
   ADMIN PAGE
═══════════════════════════════════════════════ */
#page-admin { height: 100vh; overflow: hidden; padding-top: calc(var(--header-h) + var(--sat)); }
.admin-body  { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* tabs extend the dark header (screen 07) */
.admin-tabs  {
  display: flex; background: var(--dark);
  border-bottom: none; flex-shrink: 0;
  padding: 0 1rem;
  gap: 14px;
  overflow-x: auto;
}
.tab {
  padding: .8rem .15rem;
  border: none; background: transparent; color: var(--faint);
  font-family: var(--mono);
  font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
  transition: color var(--trans), border-color var(--trans);
}
.tab:hover  { color: #fff; }
.tab.active { color: #fff; border-bottom-color: var(--accent); }

/* tab-urile din pagina Mentor nu sunt lipite de header —
   bare dark rotunjite, ca niște segmente */
.mentor-body .admin-tabs {
  border-radius: 13px;
  padding: 0 14px;
  margin: 4px 14px 10px;
}
.mentor-tab-content .admin-tabs { margin: 0 0 1rem; }

.tab-panel  { flex: 1; overflow-y: auto; padding: 1.5rem 1rem; }
@media (min-width: 700px) { .tab-panel { padding: 1.5rem 1.5rem; } }

.panel-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1.25rem;
}
.panel-header h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.filter-sel {
  padding: .45rem .75rem; border: 1.5px solid var(--border);
  border-radius: var(--r-sm); font-size: .85rem; font-weight: 600; background: var(--surface);
  outline: none; cursor: pointer;
}
.filter-sel:focus { border-color: var(--accent); }

/* Conversations list (screen 14) */

/* Create user panel (screen 08) */
.create-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.25rem; margin-bottom: 1.25rem;
}
.create-panel h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
@media (max-width: 540px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; gap: .6rem; margin-top: .75rem; }

/* Users list (screen 15) */
/* Căutare utilizatori — filtrare locală peste lista deja încărcată */
.user-search { position: relative; display: flex; align-items: center; margin-bottom: .8rem; }
.user-search input {
  flex: 1; min-width: 0;
  padding: .6rem .8rem .6rem 2.1rem;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface) no-repeat .7rem center / .9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  color: var(--text); font-size: .88rem; font-family: inherit; outline: none;
  transition: border-color var(--trans);
}
.user-search input:focus { border-color: var(--accent); }
.user-search input::-webkit-search-cancel-button { cursor: pointer; }
.user-search-count {
  position: absolute; right: .75rem;
  font-family: var(--mono); font-size: .7rem; color: var(--faint);
  pointer-events: none;
}

.user-list { display: flex; flex-direction: column; gap: .6rem; }
.user-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: .8rem .9rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  transition: box-shadow var(--trans);
}
.user-card:hover { box-shadow: var(--shadow); }
.user-role-avatar {
  width: 40px; height: 40px; line-height: 40px;
  font-size: 1.15rem; text-align: center;
  border-radius: 12px; flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-weight: 700; font-size: .9rem; }
.user-email { font-family: var(--mono); font-size: .72rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Eticheta de rol din lista de utilizatori. Rolul se SCHIMBĂ din modalul de
   editare, nu de aici — în listă doar se citește. */
.role-tag { flex-shrink: 0; }

/* Stats (screen 07) */
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.15rem 1rem; text-align: center;
}


/* Empty & loading states */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state .empty-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.empty-state p { font-size: .9rem; }
.loading-row { text-align: center; padding: 2rem; color: var(--muted); font-size: .875rem; }
.loading-row::after { content: '…'; animation: ellipsis 1.2s infinite; }
@keyframes ellipsis { 0%,100%{content:'…'} 33%{content:'.'} 66%{content:'..'} }

/* ═══════════════════════════════════════════════
   MOBILE — additional responsive rules
═══════════════════════════════════════════════ */

.user-name, .user-email {
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 500px) {
  .chip { font-size: .75rem; padding: .35rem .7rem; }
}

/* Header: 2 rows on mobile (<768px) */
@media (max-width: 768px) {
  .app-header { padding: 8px 12px; padding-top: max(8px, var(--sat)); }
  .header-brand   { order: 1; }
  .header-actions { order: 2; flex-shrink: 0; }
  .lang-btn { padding: 4px 8px; font-size: .75rem; }
  /* tap-target minim 44px pe touch (butoane ✕, back, burger) */
  .icon-btn { width: 44px; height: 44px; }
}

@media (max-width: 380px) {
  .header-title { display: none; }
}




@media (max-width: 480px) {
  .panel-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  .login-card { padding: 1rem 0; }
  .brand-icon  { width: 64px; height: 64px; line-height: 64px; font-size: 1.9rem; border-radius: 18px; }
  .login-brand h1 { font-size: 1.55rem; }
}

@media (max-width: 440px) {
  .user-card { flex-direction: column; align-items: flex-start; }
}


/* #statsContent este el însuși .stats-grid și conține secțiuni întregi —
   pe mobil secțiunile curg una sub alta, nu pe 2 coloane */



.admin-tabs { scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-x pan-y; }
.admin-tabs::-webkit-scrollbar { display: none; }


button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* iOS Safari face auto-zoom la focus pe inputuri cu font < 16px,
   ceea ce mărește pagina și taie elementele când se deschide
   tastatura — pe mobil toate câmpurile au minim 16px */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ═══════════════════════════════════════════════
   CATEGORY VIEW (Step 1 — before chat) — screen 02
═══════════════════════════════════════════════ */



/* kicker deasupra titlului */






/* „Continuă unde ai rămas" — card dark pe home (design screen 02) */

/* ═══════════════════════════════════════════════
   SUBCATEGORY VIEW (Step 2)
═══════════════════════════════════════════════ */










/* Header breadcrumb */


/* Chat view wrapper */





/* ─── PWA install ─── */

/* la citirea unui articol pill-ul „Întreabă AI" ocupă zona — ascunde install-ul */



/* ═══════════════════════════════════════════════
   LOGIN PAGE — INFO CARD + LAYOUT
═══════════════════════════════════════════════ */

.login-page-header {
  position: absolute;
  top: calc(1.1rem + var(--sat));
  right: 1.1rem;
  z-index: 10;
}
.login-lang-group {
  display: flex;
  background: rgba(255,255,255,.09);
  border-radius: var(--r-sm);
  overflow: hidden;
  padding: 3px;
  gap: 2px;
}
.login-lang-btn {
  border: none; background: transparent;
  color: var(--faint);
  padding: .3rem .65rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  border-radius: 7px;
  transition: background var(--trans), color var(--trans);
  font-family: var(--font);
}
.login-lang-btn.active      { background: #fff; color: var(--dark); }
.login-lang-btn:hover:not(.active) { background: rgba(255,255,255,.14); color: #fff; }

.login-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 900px;
  padding: 4rem 1.5rem 2rem;
}
@media (min-width: 780px) {
  .login-layout {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
    padding: 1.5rem;
  }
  #page-login { padding: 1.5rem; }
}

.login-info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 2.5rem 2rem 2rem;
  width: 100%;
  max-width: 320px;
  animation: infoCardIn .45s ease forwards;
}
@keyframes infoCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.how-number {
  font-family: var(--mono);
  font-size: 5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.03em;
  text-shadow: 0 0 48px rgba(234,90,43,.45);
  margin-bottom: .3rem;
  font-variant-numeric: tabular-nums;
}

.how-title {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,.93);
  line-height: 1.4;
  margin-bottom: .65rem;
}

.how-sub {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  line-height: 1.55;
  margin-bottom: 1.6rem;
}

.btn-how-cta {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 12px;
  padding: .6rem 1.4rem;
  font-size: .875rem;
  font-weight: 700;
  font-family: var(--font);
  transition: background var(--trans), border-color var(--trans), transform var(--trans);
  cursor: pointer;
  letter-spacing: .01em;
}
.btn-how-cta:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.5);
  transform: translateY(-2px);
}
.btn-how-cta:active { transform: none; }

@media (max-height: 580px) and (max-width: 500px) {
  .login-info-card { display: none; }
  .login-layout    { padding-top: 2rem; }
}

/* ═══════════════════════════════════════════════
   HEADER QUOTA BADGE
═══════════════════════════════════════════════ */




/* ═══════════════════════════════════════════════
   QUOTA EXHAUSTED
═══════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════
   REDIRECT CARD
═══════════════════════════════════════════════ */







/* ═══════════════════════════════════════════════
   MOBILE CHAT REDESIGN (max-width: 768px)
═══════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════
   REGULATION PAGE — screens 04 / 05 / 17
═══════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes ripple-reg {
  from { transform: scale(0); opacity: 0.2; }
  to   { transform: scale(3); opacity: 0;   }
}

#page-regulation .icon-btn {
  width: 44px;
  height: 44px;
}
#regulationHeaderTitle {
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
@media (max-width: 380px) {
  #regulationHeaderTitle { display: block; }
}

#page-regulation {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + var(--sat));
}

/* ── Search bar ── */
.reg-search-bar {
  padding: 12px 14px 8px;
  background: var(--paper);
  border-bottom: none;
  flex-shrink: 0;
}
.reg-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}
.reg-search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 6px 16px -10px rgba(234,90,43,.35);
}
.reg-search-icon { color: var(--faint); flex-shrink: 0; }
.reg-search-wrap:focus-within .reg-search-icon { color: var(--accent); }
#regSearchInput {
  flex: 1;
  border: none;
  background: transparent;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  outline: none;
  min-width: 0;
}
#regSearchInput::placeholder { color: var(--faint); font-weight: 400; }
.reg-search-clear { color: var(--muted); padding: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--bg); font-size: 1.05rem; }

/* ── Search results ── */
.search-results-header {
  padding: 10px 16px 6px;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--faint);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.search-result-item {
  display: block;
  text-align: left;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  margin: 0 14px 10px;
  width: calc(100% - 28px);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.search-result-item:hover { border-color: var(--accent); }
.search-result-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.search-result-cat { font-family: var(--mono); font-size: .66rem; color: var(--faint); }
.search-result-art { font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--accent); letter-spacing: .04em; }
.search-result-snippet { font-size: .85rem; color: var(--text-2); line-height: 1.5; }
.search-result-snippet mark {
  background: rgba(234,90,43,.18);
  color: var(--accent-text);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
}
.search-no-results {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}

.regulation-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  padding-bottom: calc(90px + var(--sab));
  scroll-padding-top: 16px;
}

/* ── List (screen 17 — cuprins) ── */
.regulation-list {
  background: transparent;
  margin: 0;
  padding: 4px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.regulation-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  gap: 13px;
  transition: background .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}
.regulation-item:last-child { border-bottom: 1px solid var(--border); }
.regulation-item:hover,
.regulation-item:active { border-color: var(--border-strong); background: var(--press-bg); }
.regulation-item.reg-read .regulation-item-title { color: var(--muted); }
.reg-read-check { color: var(--success); font-size: 1.05rem; margin-left: auto; flex-shrink: 0; }

/* ── Progres bar ── */
.reg-progress-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px calc(12px + var(--sab));
  background: var(--paper);
  border-top: 1px solid var(--border);
}
.reg-progress-track {
  flex: 1;
  height: 6px;
  background: var(--bg);
  border-radius: 99px;
  overflow: hidden;
}
.reg-progress-fill {
  height: 100%;
  background: var(--success);
  border-radius: 99px;
  transition: width .4s ease;
  min-width: 2px;
}
.reg-progress-label {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 700;
  color: var(--success); white-space: nowrap;
}
.reg-progress-badge { display: none; }
.regulation-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(234,90,43,.1);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
.regulation-item:active::after {
  animation: ripple-reg 0.4s ease-out forwards;
}

.regulation-item-icon {
  font-size: 1.5rem;
  width: 38px;
  flex-shrink: 0;
  line-height: 1;
  text-align: center;
}

/* număr de regulă mono — design screen 17 */
.regulation-item-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--disabled);
  width: 34px;
  flex-shrink: 0;
  text-align: left;
}
.regulation-item.reg-read .regulation-item-num { color: var(--success); }

/* meta deasupra listei: „18 reguli · Ediția IHF" + procent citit */
.reg-list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.reg-list-meta-pct { color: var(--success); letter-spacing: .02em; text-transform: none; }
@media (min-width: 900px) {
  .reg-list-meta { max-width: 760px; margin: 0 auto; }
}

.regulation-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.regulation-item-title {
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.regulation-item-desc {
  font-size: .76rem;
  color: var(--faint);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.regulation-item-arrow {
  color: var(--disabled);
  font-size: 1.2rem;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Skeleton loader ── */
.regulation-skeleton {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.skel-line {
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 50%, var(--skeleton-a) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skel-title { height: 22px; width: 65%; }
.skel-short { width: 80%; }

/* ── Empty state ── */
.regulation-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  gap: 6px;
}
.regulation-empty-icon  { font-size: 3rem; margin-bottom: 8px; }
.regulation-empty-title { font-size: .95rem; font-weight: 700; color: var(--text); margin: 0; }
.regulation-empty-sub   { font-size: .82rem; color: var(--muted); margin: 0; }

/* ── Error state ── */
.regulation-error {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}
.regulation-error .empty-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.regulation-error p { font-size: .875rem; }

/* ── Rule page (Level 2) — screen 05 ── */
.rule-page {
  padding: 0 0 calc(32px + var(--sab));
}
.rule-page-kicker {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 22px 18px 0;
}
.rule-page-title {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--text);
  padding: 6px 18px 14px;
  margin: 0;
  border-bottom: none;
}
@media (min-width: 900px) { .rule-page-kicker { max-width: 760px; margin: 0 auto; } }
.rule-article {
  padding: 16px 18px 0;
  border-bottom: 1px solid var(--border-soft);
}
.rule-article:last-child { border-bottom: none; }
/* Evidențiere scurtă a articolului deschis dintr-un rezultat de căutare */
.rule-article.art-flash { animation: artFlash 1.6s ease-out; }
@keyframes artFlash {
  0%, 15% { background: var(--accent-light); }
  100%    { background: transparent; }
}
html[data-theme="dark"] .rule-article.art-flash { animation: artFlashDark 1.6s ease-out; }
@keyframes artFlashDark {
  0%, 15% { background: rgba(234, 90, 43, .18); }
  100%    { background: transparent; }
}
.rule-article-id {
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent);
  margin: 0 0 8px;
  padding: 0;
}
/* rând articol: id + buton salvare */
.rule-article-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.rule-article-head .rule-article-id { margin: 0; }

/* Titlul de grup din regulament („Timpul de joc", „Time-out") — „Art. X:Y" de
   deasupra e doar un kicker, deci titlul propriu-zis al articolului e ăsta. */
.rule-article-heading {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin: -2px 0 10px;
}
/* în modală textul e mai compact */
.rule-ref-modal-body .rule-article-heading { font-size: 1rem; margin: 0 0 8px; }
.art-bookmark {
  width: 34px; height: 34px;
  border: none; border-radius: var(--r-sm);
  background: transparent;
  color: var(--disabled);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color var(--trans), background var(--trans);
  -webkit-tap-highlight-color: transparent;
}
.art-bookmark:hover { background: var(--bg); color: var(--muted); }
.art-bookmark.saved { color: var(--accent); }

.rule-article-body {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text-2);
  padding-bottom: 16px;
}
.rule-article-body p  { margin: 0 0 .5em; }
.rule-article-body ol,
.rule-article-body ul { margin: .4em 0 .5em 1.2em; }
.rule-article-body li { margin-bottom: .25em; }
/* liste literale a) b) c) — indentare suspendată, fără bulină (litera e marcajul) */
.rule-article-body ul.lit-list { list-style: none; margin: .4em 0 .5em .4em; }
.rule-article-body ul.lit-list li { padding-left: 1.6em; text-indent: -1.6em; margin-bottom: .3em; }
.rule-article-body h1 { display: none; }
/* Reguli abrogate — text tăiat în regulamentul oficial (nu mai sunt valabile) */
.rule-article-body del,
.rule-article-body del * {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--muted);
  opacity: .72;
}

/* ── Modal cu mai multe articole ── */
.rule-ref-modal-body { padding: 0; }
.rule-article-ref-id {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  margin: 16px 0 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.rule-article-ref-id:first-child { border-top: none; margin-top: 0; }

/* ── Figuri ── */
.rule-figures { padding: 12px 0 4px; margin-top: 12px; border-top: 1.5px dashed var(--disabled); }
.rule-figures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.rule-figure {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.rule-figure img {
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
}
.rule-figure img:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Lightbox figură — imaginea deschisă singură, mărită */
.fig-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(2px);
}
.fig-lightbox.hidden { display: none; }
.fig-lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.fig-lightbox-figure img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r);
  background: #fff;
}
.fig-lightbox-figure figcaption {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  text-align: center;
  max-width: 640px;
  line-height: 1.4;
}
.fig-lightbox-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.fig-lightbox-close:hover { background: rgba(255, 255, 255, .28); }
.rule-figure figcaption {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  line-height: 1.4;
}

/* ── Salvate (design screen 20) ── */
.saved-page { padding: 0 0 calc(24px + var(--sab)); }
.saved-group-label {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  padding: 14px 16px 10px;
}
.saved-group {
  display: flex; flex-direction: column; gap: 9px;
  padding: 0 14px;
}
.saved-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 8px 12px 15px;
  cursor: pointer;
  transition: border-color .12s;
  -webkit-tap-highlight-color: transparent;
}
.saved-item:hover { border-color: var(--border-strong); }
.saved-item-art {
  font-family: var(--mono);
  font-size: .76rem; font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 34px;
}
.saved-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.saved-item-title {
  font-weight: 700; font-size: .875rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.saved-item-sub { font-family: var(--mono); font-size: .66rem; color: var(--faint); }
@media (min-width: 900px) {
  .saved-group, .saved-group-label { max-width: 760px; margin-left: auto; margin-right: auto; }
  .saved-group-label { padding-left: 16px; }
}

/* ── Cross-reference links ── */
.rule-ref {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}
.rule-ref:hover { opacity: .75; }
.fig-ref {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-style: dotted;
  cursor: zoom-in;
  font-weight: 600;
  white-space: nowrap;
}
.fig-ref:hover { opacity: .75; }
.expl-ref {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 600;
}
.expl-ref:hover { opacity: .75; }

/* Modal explicații — pastila cu regula de referință + corpul pe paragrafe */
.expl-ref-pill { margin: 2px 0 12px; }
.expl-ref-pill .rule-ref {
  display: inline-block;
  padding: 4px 10px;
  background: var(--accent-light);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .03em;
}
.expl-body p { margin: 0 0 12px; line-height: 1.6; }
.expl-body p:last-child { margin-bottom: 0; }
.modal-loading { color: var(--muted); font-style: italic; }

/* ── Content (Level 3) ── */
.regulation-content {
  padding: 20px 18px calc(24px + var(--sab));
  background: var(--paper);
  min-height: 100%;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-2);
}
.regulation-content h1 {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--text);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 10px;
  margin-bottom: 16px;
  margin-top: 0;
}
.regulation-content h2 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin-top: 20px;
  margin-bottom: 8px;
}
.regulation-content ul {
  padding-left: 20px;
  margin-bottom: .6rem;
}
.regulation-content li {
  margin-bottom: 6px;
}
.regulation-content strong {
  color: var(--text);
}
.regulation-content blockquote {
  background: var(--bg);
  border-left: 3px solid var(--accent);
  padding: .55rem .9rem;
  margin: 0 0 1rem;
  font-size: .82rem;
  color: var(--muted);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.regulation-content p {
  margin-bottom: .6rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.regulation-content p:last-child { border-bottom: none; margin-bottom: 0; }
.regulation-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.regulation-content th,
.regulation-content td {
  padding: 6px 10px;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  white-space: nowrap;
}
.regulation-content th { background: var(--bg); font-weight: 700; }
.regulation-content img { max-width: 100%; height: auto; border-radius: 8px; }
.regulation-content pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  font-size: 0.8rem;
  background: var(--bg);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: .8rem;
}
.regulation-content code { font-size: 0.8rem; }

/* ── Ask AI floating CTA (screen 05) ── */

/* ═══════════════════════════════════════════════
   DRAWER MENU — dark (screen 21)
═══════════════════════════════════════════════ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23,24,28,.55);
  z-index: 250;
  opacity: 0;
  transition: opacity .25s ease;
}
.drawer-overlay.open  { opacity: 1; }
.drawer-overlay.hidden { display: none; }

.app-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 290px;
  max-width: 82vw;
  background: var(--dark);
  color: #fff;
  z-index: 260;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 4px 0 24px rgba(0,0,0,.35);
  transform: translateX(-100%);
  transition: transform .25s ease;
}
.app-drawer.open { transform: translateX(0); }

.drawer-user {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 16px 14px 10px;
  padding: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
}
.drawer-avatar {
  font-size: 1.4rem; line-height: 48px;
  width: 48px; height: 48px;
  text-align: center;
  background: var(--accent);
  border-radius: 14px;
  flex-shrink: 0;
}
.drawer-user-name { font-weight: 800; font-size: .95rem; color: #fff; }
.drawer-user-role {
  font-family: var(--mono);
  font-size: .64rem; font-weight: 700; letter-spacing: .08em;
  color: var(--faint); text-transform: uppercase; margin-top: 3px;
}

.drawer-menu {
  list-style: none;
  padding: 8px 10px;
  margin: 0;
}
.drawer-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 12px;
  border: none;
  border-radius: 13px;
  background: transparent;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.drawer-item:active   { background: rgba(255,255,255,.08); }
.drawer-item svg      { flex-shrink: 0; color: var(--faint); }
.drawer-item.active   { color: #fff; background: rgba(234,90,43,.16); }
.drawer-item.active svg { color: var(--accent); }
.drawer-item--danger  { color: #E88; }
.drawer-item--danger svg { color: var(--danger); }

.drawer-count {
  font-family: var(--mono);
  font-size: .72rem; font-weight: 700;
  color: var(--faint);
  margin-left: auto;
}

.drawer-sep {
  height: 1px;
  background: rgba(255,255,255,.1);
  margin: 4px 14px;
}

/* ── Comutator temă (drawer-ul e mereu închis la culoare) ── */
.theme-switch {
  margin-left: auto;
  flex-shrink: 0;
  width: 40px; height: 22px;
  border-radius: 11px;
  background: rgba(255,255,255,.18);
  position: relative;
  transition: background .2s ease;
}
.theme-switch-knob {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s ease;
}
#drawerThemeToggle[aria-checked="true"] .theme-switch { background: var(--accent); }
#drawerThemeToggle[aria-checked="true"] .theme-switch-knob { transform: translateX(18px); }

/* ── Selector limbă în drawer (drawerul e închis în ambele teme) ── */
.drawer-lang { cursor: default; }
.drawer-lang:hover { background: transparent; }
.drawer-lang-group { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
.drawer-lang-btn {
  background: rgba(255,255,255,.08);
  border: none;
  color: #A9B2C0;
  font-family: var(--mono);
  font-size: .68rem; font-weight: 700;
  padding: .3rem .55rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.drawer-lang-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.drawer-lang-btn.active { background: var(--accent); color: #fff; }

.app-drawer > ul:last-child { margin-top: auto; }

/* ═══════════════════════════════════════════════
   PAGINA VIDEO — Interpretări IHF
═══════════════════════════════════════════════ */
#page-video { padding-top: calc(var(--header-h) + var(--sat)); }
@media (max-width: 768px) { #page-video { padding-top: calc(var(--header-h-mobile) + var(--sat)); } }
.video-body {
  flex: 1; overflow-y: auto;
  padding: 1.25rem 1rem calc(1.5rem + var(--sab));
  max-width: 860px; margin: 0 auto; width: 100%;
}
.video-intro  { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
.video-source { color: var(--faint); font-size: .75rem; margin-top: 1.25rem; }

.video-groups { display: flex; flex-direction: column; gap: 10px; }
.video-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.video-group-head {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  background: none; border: none;
  font-family: inherit; font-size: .92rem; font-weight: 700;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.video-group-emoji   { font-size: 1.2rem; flex-shrink: 0; }
.video-group-title   { flex: 1; }
.video-group-count   { font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--faint); white-space: nowrap; }
.video-group-chevron { color: var(--faint); transition: transform var(--trans); }
.video-group.open .video-group-chevron { transform: rotate(180deg); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.video-group.open .video-grid { padding: 0 14px 14px; }
.video-card {
  background: none; border: none; padding: 0;
  font-family: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
}
.video-thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden;
  background: var(--bg);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.6rem;
  background: rgba(0,0,0,.18);
  transition: background var(--trans);
}
.video-card:hover .video-play { background: rgba(0,0,0,.38); }
.video-card-title { font-size: .8rem; font-weight: 600; color: var(--text); line-height: 1.35; }

.video-player-page  { display: flex; flex-direction: column; gap: 12px; }
.video-player-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}
.video-player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-player-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
  #page-regulation {
    padding-top: calc(var(--header-h-mobile) + var(--sat));
  }
  .regulation-item         { padding: 12px 14px; }
  .regulation-item-title   { font-size: .88rem; }
  .regulation-content      { padding: 16px 14px calc(24px + var(--sab)); }
}

/* Regulation back button */
#btnRegBack { margin-right: 2px; }
#btnRegBack.hidden { display: none; }
#btnRegBack:not(.hidden) ~ .reg-home-icon { display: none; }

/* ═══════════════════════════════════════════════
   UPDATE BANNER (SW new version)
═══════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════
   QUIZ PAGE — screens 06 / 09 / 10 / 11 / 18
═══════════════════════════════════════════════ */
#page-quiz { padding-top: calc(var(--header-h) + var(--sat)); }
@media (max-width: 768px) { #page-quiz { padding-top: calc(var(--header-h-mobile) + var(--sat)); } }

.quiz-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1rem calc(1.5rem + var(--sab));
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.quiz-loading {
  text-align: center;
  color: var(--muted);
  padding: 3rem 1rem;
  font-size: .95rem;
}

/* ── Home: mode cards (screen 09) ── */
.quiz-home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: .5rem;
}
@media (max-width: 480px) { .quiz-home { grid-template-columns: 1fr; } }

.quiz-card {
  background: var(--surface);
  border-radius: 18px;
  padding: 20px 18px 18px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: none;
}
/* Antrenament = dark hero card */
.quiz-card--learn {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}
.quiz-card--learn .quiz-card-title { color: #fff; }
.quiz-card--learn .quiz-card-desc  { color: #B8B2A7; }
.quiz-card--learn .quiz-card-meta  { color: var(--accent); font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; }
.quiz-card--exam    { border-color: var(--border); background: var(--surface); }
.quiz-card--stats   { border-color: var(--border); background: var(--surface); grid-column: 1 / -1; }

/* Scorer/Cronometror — al doilea domeniu de examinare. Aceeași pereche
   antrenament-închis / examen-deschis ca la arbitraj, ca perechea să se
   citească drept „încă un examen”, nu drept o secțiune străină. */
.quiz-card--sc-learn {
  background: var(--dark); border-color: var(--dark); color: #fff;
}
.quiz-card--sc-learn .quiz-card-title { color: #fff; }
.quiz-card--sc-learn .quiz-card-desc  { color: #B8B2A7; }
.quiz-card--sc-learn .quiz-card-meta  { color: var(--accent); font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; }
.quiz-card--sc-exam   { border-color: var(--border); background: var(--surface); }
.quiz-card--done    { border-color: var(--success); background: var(--success-bg); }
.quiz-card--expired { border-color: var(--border); opacity: .6; }
.quiz-card-btn--stats { background: var(--ink-chip-bg); color: var(--ink-chip-text); }
.quiz-card-btn--stats:hover { background: var(--ink-chip-bg-h); }

/* ── Stats layout ── */
.quiz-stats { padding: 8px 0 32px; max-width: 600px; margin: 0 auto; }
.stats-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 4px 16px 16px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 10px; text-align: center; }
.stat-card-val { font-family: var(--mono); font-size: 1.45rem; font-weight: 700; color: var(--accent); }
.stat-card-lbl { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 5px; }
.stats-section-title {
  font-family: var(--mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 16px 8px; color: var(--muted);
}
.stats-chapters { padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }
.stats-chapter-row { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; }
.stats-ch-name { font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.stats-ch-bar-wrap { background: var(--bg); border-radius: 99px; height: 6px; overflow: hidden; }
.stats-ch-bar { height: 100%; border-radius: 99px; transition: width .3s; }
.stats-ch-pct { font-family: var(--mono); font-size: .7rem; font-weight: 700; color: var(--muted); text-align: right; white-space: nowrap; }
.quiz-stats-loading { padding: 48px 16px; text-align: center; color: var(--muted); }
.quiz-card-meta--expired { font-size: .8rem; color: var(--faint); }
.quiz-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px) { .quiz-cards-grid { grid-template-columns: 1fr; } }

.quiz-card-icon  { font-size: 1.9rem; line-height: 1; }
.quiz-card-title { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); margin: 0; }
.quiz-card-desc  { font-size: .82rem; color: var(--muted); line-height: 1.5; flex: 1; }
.quiz-card-meta  { font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--accent-text); }
.quiz-card-meta--exam { color: var(--accent-text); }
.quiz-card-btn   { margin-top: 4px; border-radius: 12px; }
.quiz-card-btn--exam { background: transparent; color: var(--text); border: 1.5px solid var(--text); border-radius: 12px; font-weight: 700; }
.quiz-card-btn--exam:hover { background: var(--ink-chip-bg); color: var(--ink-chip-text); opacity: 1; }

/* ── Setup (screen 18) ── */
.quiz-setup { display: flex; flex-direction: column; gap: 20px; }
.quiz-back-btn {
  background: none; border: none; color: var(--accent-text); font-size: .875rem;
  font-weight: 700; cursor: pointer; padding: 0; align-self: flex-start;
  -webkit-tap-highlight-color: transparent;
}
.quiz-setup-title { font-size: 1.4rem; font-weight: 900; letter-spacing: -.02em; margin: 0; }
.quiz-setup-section { display: flex; flex-direction: column; gap: 10px; }
.quiz-setup-label {
  font-family: var(--mono);
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted);
  display: flex; align-items: center; justify-content: space-between;
}
.quiz-setup-label-actions { font-weight: 400; text-transform: none; letter-spacing: 0; font-family: var(--font); }
.link-btn { background: none; border: none; color: var(--accent-text); font-size: .8rem; font-weight: 600; cursor: pointer; padding: 0; }

.chapter-list { display: flex; flex-direction: column; gap: 7px; }
.chapter-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 11px 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.chapter-row:has(input:checked) { border-color: var(--ink-chip-bg); background: var(--ink-chip-bg); color: var(--ink-chip-text); }
.chapter-row:has(input:checked) .chapter-row-count { color: var(--faint); }
.chapter-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.chapter-row-info   { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.chapter-row-name   { font-size: .875rem; font-weight: 700; }
.chapter-row-count  { font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--faint); }

.count-pills { display: flex; gap: 9px; flex-wrap: wrap; }
.count-pill {
  flex: 1; min-width: 64px;
  padding: 13px 18px; border-radius: 13px; border: 1.5px solid var(--border);
  background: var(--surface);
  font-family: var(--mono); font-size: 1rem; font-weight: 700;
  cursor: pointer; color: var(--muted); transition: all .15s;
  text-align: center;
}
.count-pill.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 10px 20px -10px rgba(234,90,43,.6);
}

.quiz-start-btn { margin-top: 4px; padding: .9rem 1.15rem; font-size: .95rem; border-radius: var(--r); }

/* ── Exam intro (screen 09 — Examinare) ── */
.quiz-exam-intro {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 16px; padding-top: .5rem;
}
.exam-intro-icon  { font-size: 3rem; line-height: 1; }
.exam-intro-title { font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; color: var(--text); margin: 0; }
.exam-intro-rules {
  display: flex; gap: 8px; justify-content: center;
  background: transparent; border: none; border-radius: 0;
  padding: 0; width: 100%; max-width: 380px;
}
.exam-rule {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--bg); border-radius: 12px; padding: 13px 6px;
}
.exam-rule-val    { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; color: var(--text); }
.exam-rule-lbl    {
  font-family: var(--mono);
  font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint);
}
.exam-intro-desc  { font-size: .875rem; color: var(--muted); line-height: 1.6; max-width: 380px; }
/* Pragul de promovare, chiar deasupra butonului de start — e ultima informație
   pe care candidatul o citește înainte să pornească timerul, deci nu în gri. */
.exam-intro-pass {
  font-size: .875rem; font-weight: 700; line-height: 1.5; max-width: 380px;
  color: var(--ink); border-left: 3px solid var(--accent);
  padding: .5rem 0 .5rem .7rem; margin: 0 auto;
}
.exam-start-main-btn {
  background: var(--accent); color: #fff; max-width: 380px; width: 100%;
  box-shadow: var(--shadow-acc);
  padding: .9rem 1.15rem; font-size: .95rem; border-radius: var(--r);
}

/* ── Question screen (screens 06 / 10) ── */
.quiz-question-screen { display: flex; flex-direction: column; gap: 14px; }

.exam-timer-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 6px 0;
}
.exam-timer-label {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint);
}
.exam-timer {
  font-family: var(--mono);
  font-size: 1.05rem; font-weight: 700; color: var(--accent);
  background: rgba(234,90,43,.12);
  padding: 5px 11px; border-radius: 9px;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.exam-timer--warning,
.exam-timer.timer-warning { color: var(--danger); background: var(--danger-bg); } /* cursant.js folosește .timer-warning */

.quiz-progress-bar { height: 5px; background: var(--bg); border-radius: 3px; }
.quiz-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }

.quiz-q-counter {
  font-family: var(--mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--faint); text-transform: uppercase;
}
.quiz-q-text    { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; color: var(--text); text-wrap: pretty; }

.quiz-options { display: flex; flex-direction: column; gap: 11px; }
.quiz-option {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 15px;
  padding: 14px 15px; cursor: pointer; transition: border-color .15s, background .15s;
}
.quiz-option:has(input:checked) { border-color: var(--accent); background: rgba(234,90,43,.06); }
/* dublate cu :has(input:checked) ca să bată specificitatea stării „selectat" */
.quiz-option.opt--correct,
.quiz-option.opt--correct:has(input:checked) { border-color: var(--success); background: var(--success-bg); }
.quiz-option.opt--wrong,
.quiz-option.opt--wrong:has(input:checked)   { border-color: var(--danger);  background: var(--danger-soft-bg); }
.quiz-opt-check { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.quiz-opt-key {
  font-family: var(--mono);
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg); color: var(--muted);
  font-weight: 700; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; min-width: 30px;
}
.quiz-option:has(input:checked) .quiz-opt-key { background: var(--accent); color: #fff; }
.quiz-option.opt--correct .quiz-opt-key,
.quiz-option.opt--correct:has(input:checked) .quiz-opt-key { background: var(--success); color: #fff; }
.quiz-option.opt--wrong .quiz-opt-key,
.quiz-option.opt--wrong:has(input:checked) .quiz-opt-key { background: var(--danger); color: #fff; }
.quiz-opt-text  { font-size: .9rem; font-weight: 600; line-height: 1.45; }
.quiz-option.opt--correct .quiz-opt-text { color: var(--success-dark); font-weight: 700; }

/* ── Întrebări cu imagine (Scorer/Cronometror — capturi din CoManMatch) ──
   Capturile sunt late și pline de text mic, deci pe telefon trebuie să ocupe
   toată lățimea disponibilă și să poată fi mărite prin tap (deschid nativ la
   full screen doar dacă le lăsăm ca imagine simplă, fără handler). */
.quiz-q-img {
  display: block; width: 100%; max-width: 100%; height: auto;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: #fff;   /* capturile au fundal alb; pe temă închisă ar „pluti” */
}
/* Bifa și litera rămân pe primul rând; imaginea trece dedesubt, pe toată
   lățimea (flex-basis 100% forțează ruperea de rând, fără markup separat). */
.quiz-option--img { flex-wrap: wrap; }
.quiz-opt-img {
  flex: 1 0 100%;
  display: block; width: 100%; height: auto; border-radius: 9px;
  border: 1px solid var(--border); background: #fff;
}

.quiz-submit-btn, .quiz-next-btn, .quiz-finish-btn, .quiz-prev-btn { width: 100%; }
.quiz-submit-btn, .quiz-next-btn { padding: .85rem 1.15rem; border-radius: var(--r); font-size: .95rem; }
.quiz-finish-btn {
  background: var(--accent); color: #fff; border: none; border-radius: var(--r);
  padding: .85rem 1.15rem; font-weight: 800; font-size: .95rem; cursor: pointer;
  box-shadow: var(--shadow-acc);
}

.exam-nav { display: flex; gap: 10px; }
.exam-nav .btn { flex: 1; }

.quiz-feedback {
  border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; font-size: .875rem; font-weight: 600;
}
.quiz-feedback--ok  { background: var(--success-bg); color: var(--success-dark); border: 1.5px solid var(--success); }
.quiz-feedback--err { background: var(--danger-soft-bg); color: var(--danger-text);  border: 1.5px solid var(--danger-soft-border); }
.feedback-correct, .feedback-ref { font-size: .8rem; font-weight: 400; }

/* ── Articole referite sub feedback (antrenament) — deschid modala ── */
.quiz-ref-articles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.quiz-ref-chip {
  border: 1.5px solid var(--border); border-radius: 999px;
  background: var(--surface); cursor: pointer;
  padding: 9px 14px; font-size: .82rem; font-weight: 700; color: var(--text);
}
.quiz-ref-chip:hover { border-color: var(--accent); color: var(--accent); }

/* ── Exam question grid (screen 10) ── */
.exam-q-grid {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px;
  padding: 12px 0 4px; border-top: 1px solid var(--border);
}
@media (max-width: 480px) { .exam-q-grid { grid-template-columns: repeat(8, 1fr); } }
.qgrid-btn {
  width: 100%; aspect-ratio: 1; height: auto;
  border-radius: 7px; border: none;
  background: var(--bg);
  font-family: var(--mono); font-size: .72rem; font-weight: 700; cursor: pointer;
  color: var(--faint); transition: all .15s;
}
.qgrid-btn.answered { background: var(--ink-chip-bg); color: var(--ink-chip-text); }
.qgrid-btn.current  { background: var(--accent); color: #fff; }

/* ── Results (screen 11) ── */
.quiz-results {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px; padding: 2rem 0;
}
.results-icon  { font-size: 3rem; }
.results-title { font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em; margin: 0; }
.results-score {
  font-family: var(--mono);
  font-size: 3.4rem; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  color: var(--text);
}
.results-pct   { font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.results-hint  { font-size: .875rem; color: var(--muted); max-width: 320px; }
.results-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

.exam-result-badge {
  font-family: var(--mono);
  font-size: .95rem; font-weight: 700; padding: 9px 20px;
  border-radius: 99px; letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: 8px;
}
.exam-result-badge--pass { background: var(--success-bg); color: var(--success-dark); border: none; }
.exam-result-badge--fail { background: var(--danger-bg); color: var(--danger-text);  border: none; }
.exam-timeout-msg { font-size: .875rem; color: var(--danger); font-weight: 700; }

/* ══ Finalul examenului: dezvăluirea scorului ══
   Un singur moment orchestrat, nu efecte împrăștiate: insigna intră cu un
   mic overshoot, scorul se numără în sus, restul urcă în cascadă. */
.quiz-results--exam .exam-result-badge {
  animation: examBadgePop .52s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes examBadgePop {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}
.quiz-results--exam .results-score {
  font-variant-numeric: tabular-nums;   /* cifrele nu mai sar la numărare */
  animation: examRise .5s cubic-bezier(.22,.7,.3,1) .08s both;
}
.quiz-results--exam .exam-timeout-msg { animation: examRise .45s cubic-bezier(.22,.7,.3,1) .14s both; }
.quiz-results--exam .results-pct      { animation: examRise .45s cubic-bezier(.22,.7,.3,1) .20s both; }
.quiz-results--exam .results-hint     { animation: examRise .45s cubic-bezier(.22,.7,.3,1) .26s both; }
.quiz-results--exam .results-actions  { animation: examRise .45s cubic-bezier(.22,.7,.3,1) .32s both; }
@keyframes examRise {
  from { opacity: 0; transform: translateY(11px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Recapitulare examen — toate întrebările cu răspunsul dat vs. cel corect ── */
.quiz-review-screen { display: flex; flex-direction: column; gap: 14px; padding: 1rem 0 2rem; }
.quiz-review-title  { font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; margin: 0; }
.quiz-review-stats  { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--muted); }
.quiz-review-filter { display: flex; gap: 8px; }
.quiz-review-filter .btn { flex: 1; padding: .55rem .9rem; font-size: .82rem; border-radius: 10px; }
.quiz-review-list   { display: flex; flex-direction: column; gap: 14px; }
.quiz-review-empty  { text-align: center; padding: 2.5rem 1rem; color: var(--muted); font-size: .9rem; font-weight: 600; }

.quiz-review-item {
  border: 1.5px solid var(--border); border-radius: 16px;
  background: var(--surface); padding: 15px; display: flex; flex-direction: column; gap: 11px;
}
.quiz-review-item--ok  { border-left: 4px solid var(--success); }
.quiz-review-item--err { border-left: 4px solid var(--danger); }
.quiz-review-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.quiz-review-num {
  font-family: var(--mono); font-weight: 700; font-size: .78rem;
  width: 26px; height: 26px; border-radius: 8px; background: var(--bg); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.quiz-review-badge { font-size: .8rem; font-weight: 700; }

/* opțiunile din recapitulare nu au checkbox — sunt doar de citit */
.quiz-review-opt { cursor: default; }
.quiz-review-mark { margin-left: auto; font-weight: 800; font-size: .95rem; flex-shrink: 0; }
.quiz-review-opt.opt--correct .quiz-review-mark { color: var(--success); }
.quiz-review-opt.opt--wrong   .quiz-review-mark { color: var(--danger); }
.quiz-review-summary { font-size: .82rem; }

/* Antetul recapitulării urcă la deschidere; întrebările vizibile intră în
   cascadă (clasa .is-in, pusă din JS). Cele de sub linia de plutire primesc
   .is-in imediat — nu se animă nimic ce omul n-a văzut încă. */
.quiz-review-screen > .quiz-back-btn    { animation: examRise .4s cubic-bezier(.22,.7,.3,1) both; }
.quiz-review-screen > .quiz-review-title{ animation: examRise .4s cubic-bezier(.22,.7,.3,1) .05s both; }
.quiz-review-screen > .quiz-review-stats{ animation: examRise .4s cubic-bezier(.22,.7,.3,1) .1s both; }
.quiz-review-screen > .quiz-review-filter{ animation: examRise .4s cubic-bezier(.22,.7,.3,1) .15s both; }

.quiz-review-item {
  opacity: 0; transform: translateY(14px);
  transition: opacity .42s cubic-bezier(.22,.7,.3,1), transform .42s cubic-bezier(.22,.7,.3,1);
  transition-delay: var(--rv-d, 0ms);
}
.quiz-review-item.is-in { opacity: 1; transform: none; }

/* Mișcare redusă: totul rămâne vizibil, doar fără deplasare */
@media (prefers-reduced-motion: reduce) {
  .quiz-results--exam .exam-result-badge,
  .quiz-results--exam .results-score,
  .quiz-results--exam .exam-timeout-msg,
  .quiz-results--exam .results-pct,
  .quiz-results--exam .results-hint,
  .quiz-results--exam .results-actions,
  .quiz-review-screen > .quiz-back-btn,
  .quiz-review-screen > .quiz-review-title,
  .quiz-review-screen > .quiz-review-stats,
  .quiz-review-screen > .quiz-review-filter { animation: none; }
  .quiz-review-item {
    opacity: 1; transform: none; transition: none; transition-delay: 0ms;
  }
}


/* ═══════════════════════════════════════════════
   MENTOR PAGE — screen 13
═══════════════════════════════════════════════ */
#page-mentor  { padding-top: calc(var(--header-h) + var(--sat)); }
#page-cursant { padding-top: calc(var(--header-h) + var(--sat)); }
@media (max-width: 768px) {
  #page-mentor  { padding-top: calc(var(--header-h-mobile) + var(--sat)); }
  #page-cursant { padding-top: calc(var(--header-h-mobile) + var(--sat)); }
}
.mentor-body {
  flex: 1; overflow-y: auto;
  padding: 0 0 calc(1.5rem + var(--sab));
  max-width: 720px; margin: 0 auto; width: 100%;
}
.mentor-tab-content { padding: 1rem; }

.mentor-class-list { display: flex; flex-direction: column; gap: 11px; }
.mentor-class-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 15px 16px; gap: 12px;
}
.mentor-class-title { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.mentor-class-meta  { font-family: var(--mono); font-size: .72rem; color: var(--faint); margin-top: 3px; }
/* Doar pentru admin: a cui e clasa, când nu e a lui */
.mentor-class-owner { font-family: var(--mono); font-size: .7rem; font-weight: 700; color: var(--accent-text); margin-top: 4px; }
.mentor-class-actions { display: flex; gap: 8px; flex-shrink: 0; }

.mentor-assignment-list { display: flex; flex-direction: column; gap: 11px; }
.mentor-assignment-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 15px 16px; gap: 12px;
}
.mentor-assignment-title { font-weight: 800; font-size: .95rem; }
.mentor-assignment-meta  { font-family: var(--mono); font-size: .7rem; color: var(--faint); margin-top: 4px; }
.mentor-assignment-info  { flex: 1; min-width: 0; }

.chapter-checkboxes { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px; }
.chapter-check-label { display: flex; align-items: center; gap: 8px; font-size: .85rem; cursor: pointer; }
.chapter-check-label input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }

.mentor-progress-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.mentor-progress-table th, .mentor-progress-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); }
.mentor-progress-table th {
  font-family: var(--mono);
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}

/* Evoluția elevilor — culorile vin din variabilele semantice, deci dark mode
   e acoperit automat. */
.evo-good { color: var(--success); }
.evo-mid  { color: var(--warning-text); }
.evo-bad  { color: var(--danger-text); }

.evo-table tbody tr { cursor: pointer; }
.evo-table tbody tr:hover { background: var(--press-bg); }

.evo-cards {
  display: grid; gap: 10px; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.evo-card {
  border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  padding: 12px; text-align: center;
}
.evo-card-val { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.evo-card-lbl {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-top: 4px;
}

.evo-section-title { margin: 1.5rem 0 .5rem; font-size: .95rem; }

.evo-late {
  font-size: .7rem; padding: 1px 6px; border-radius: 999px;
  background: var(--warning-bg); color: var(--warning-text);
}

.evo-bars { display: flex; flex-direction: column; gap: 8px; }
.evo-bar-row { display: flex; align-items: center; gap: 10px; font-size: .8rem; }
.evo-bar-label { flex: 0 0 5.5rem; color: var(--muted); font-family: var(--mono); font-size: .7rem; }
.evo-bar-track {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--border-soft); overflow: hidden;
}
.evo-bar-fill { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.evo-bar-val { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
  .evo-bar-label { flex-basis: 4rem; }
  .evo-bar-val   { font-size: .72rem; }
}

/* ── Raport PDF (export clasă) ──
   Containerul e ascuns pe ecran și devine singurul conținut la printare.
   Culorile sunt fixe (negru pe alb), nu variabile de temă: raportul se
   tipărește pe hârtie, deci nu trebuie să urmeze dark mode-ul. */
#printReport { display: none; }

@media print {
  /* ascunde aplicația, arată doar raportul */
  body > *:not(#printReport) { display: none !important; }

  html, body {
    background: #fff; color: #000;
    margin: 0; padding: 0; height: auto; overflow: visible;
  }

  #printReport {
    display: block;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 10pt; color: #000; padding: 0;
  }

  @page { size: A4; margin: 16mm 14mm; }

  .pr-header { border-bottom: 2px solid #000; padding-bottom: 8pt; margin-bottom: 12pt; }
  .pr-title  { font-size: 19pt; margin: 0 0 4pt; }
  .pr-meta   { margin: 0; font-size: 9.5pt; line-height: 1.5; }

  .pr-sec-main { font-size: 13pt; margin: 0 0 6pt; }
  .pr-sec      { font-size: 11pt; margin: 12pt 0 4pt; }

  .pr-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .pr-table th, .pr-table td {
    border: 1px solid #999; padding: 4pt 6pt; text-align: left; vertical-align: top;
  }
  .pr-table th { background: #f0f0f0; font-weight: 700; }
  /* antetul se repetă când un tabel se rupe peste pagini */
  .pr-table thead { display: table-header-group; }
  .pr-table tr    { break-inside: avoid; }

  /* fiecare elev începe pe pagină nouă */
  .pr-student { break-before: page; }
  .pr-student-name { font-size: 15pt; margin: 0 0 2pt; }
  .pr-student-sub  { margin: 0 0 8pt; font-size: 9pt; color: #444; }

  .pr-cards { display: flex; gap: 6pt; margin-bottom: 6pt; }
  .pr-card {
    flex: 1; border: 1px solid #999; border-radius: 3pt;
    padding: 5pt; text-align: center; break-inside: avoid;
  }
  .pr-card-val { font-size: 13pt; font-weight: 700; }
  .pr-card-lbl { font-size: 7.5pt; text-transform: uppercase; color: #444; margin-top: 2pt; }

  .pr-bar-row   { display: flex; align-items: center; gap: 6pt; margin-bottom: 3pt; break-inside: avoid; }
  .pr-bar-label { flex: 0 0 60pt; font-size: 8.5pt; }
  .pr-bar-track { flex: 1; height: 6pt; border: 1px solid #999; }
  /* fundalul barei trebuie forțat: browserele nu tipăresc fundaluri implicit */
  .pr-bar-fill  { display: block; height: 100%; background: #555; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-bar-val   { flex: 0 0 auto; font-size: 8.5pt; }
}

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(23,24,28,.45); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--surface); border-radius: var(--r-lg); padding: 24px;
  max-width: 600px; width: 100%; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overscroll-behavior: contain;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-header h3 { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }

/* ── Search bar hidden state ── */
.reg-search-bar.hidden-bar { display: none; }

/* ── Drag handle (modals) ── */
.modal-drag-handle {
  width: 42px; height: 5px;
  background: var(--drag-handle);
  border-radius: 3px;
  margin: 12px auto 4px;
  flex-shrink: 0;
}

/* ── Article reference modal — centrată, cu fundal blurat ── */
.modal-ref-sheet {
  background: var(--surface);
  border-radius: 24px;
  width: 100%;
  max-width: 600px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  overflow: hidden;
  animation: modal-pop .2s ease;
}
#ruleRefModal { align-items: center; padding: 16px; }
#ruleRefModal .modal-drag-handle { display: none; }
/* fix scroll: conținutul modalei trebuie să fie coloană flex cu înălțime
   constrânsă, altfel .rule-ref-modal-body nu are de la ce limită să deruleze */
#ruleRefModalContent {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#ruleRefModal .modal-header {
  padding: 16px 20px 10px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.modal-header-actions { display: flex; gap: 4px; align-items: center; }
.modal-header-actions .icon-btn.active { background: var(--accent-soft, rgba(234,90,43,.12)); color: var(--accent); }
#ruleRefModal .rule-ref-modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 12px 20px 26px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@keyframes modal-pop {
  from { transform: scale(.96) translateY(8px); opacity: .6; }
  to   { transform: scale(1)   translateY(0);   opacity: 1;  }
}

/* ── Nav tree (cuprins) în modala de articol ── */
.ref-tree {
  flex-shrink: 0;
  /* unități viewport, nu % — părintele flex nu are înălțime definită,
     iar max-height în % se rezolvă ca „none" și tree-ul nu mai derulează */
  max-height: min(34vh, 340px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--border-soft);
  padding: 8px 12px;
  background: var(--bg);
}
.ref-tree-rule-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 8px; border: none; background: transparent; cursor: pointer;
  font-size: .84rem; font-weight: 700; color: var(--text); text-align: left;
  border-radius: 8px;
}
.ref-tree-rule-btn:hover { background: var(--surface); }
.ref-tree-chevron { color: var(--muted); font-size: .7rem; transition: transform .15s; flex-shrink: 0; }
.ref-tree-rule.open .ref-tree-chevron { transform: rotate(90deg); }
.ref-tree-arts { padding-left: 20px; }
.ref-tree-art {
  display: block; width: 100%;
  padding: 7px 10px; border: none; background: transparent; cursor: pointer;
  font-size: .8rem; color: var(--text-2); text-align: left;
  border-radius: 8px;
}
.ref-tree-art:hover  { background: var(--surface); color: var(--text); }
.ref-tree-art.active { background: var(--accent-soft, rgba(234,90,43,.12)); color: var(--accent); font-weight: 700; }

/* ── Glosar modal (screen 19) ── */
.modal-sheet {
  background: var(--surface);
  border-radius: 28px 28px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -24px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
#glosarModal { align-items: flex-end; }
#glosarModal .modal-header { padding: 14px 18px 0; }
.glosar-search-wrap { padding: 8px 18px 12px; border-bottom: 1px solid var(--border-soft); }
.glosar-search-wrap input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 10px 14px;
  font-size: .9rem;
  background: var(--paper);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}
.glosar-search-wrap input:focus { border-color: var(--accent); }
.glosar-list { overflow-y: auto; flex: 1; padding: 8px 12px 18px; overscroll-behavior: contain; }
.glosar-item {
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 9px;
  background: var(--surface);
}
.glosar-item:last-child { border-bottom: 1px solid var(--border); }
.glosar-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.glosar-item-head .glosar-term { margin-bottom: 0; flex: 1; min-width: 0; }
.glosar-ref {
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 7px;
  padding: 4px 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.glosar-ref--link { cursor: pointer; }
.glosar-ref--link:hover, .glosar-ref--link:focus-visible { background: var(--accent); color: #fff; }
.glosar-term { font-weight: 800; font-size: .92rem; letter-spacing: -.01em; color: var(--text); margin-bottom: 4px; }
.glosar-def  { font-size: .82rem; color: var(--text-2); line-height: 1.5; }
.glosar-empty { padding: 32px 16px; text-align: center; color: var(--muted); }

/* Role badges (screen 15) */
.role-badge {
  display: inline-block; padding: 4px 10px; border-radius: 20px;
  font-family: var(--mono);
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.role-badge--cursant { background: var(--bg); color: var(--muted); }
.role-badge--arbitru { background: var(--ink-chip-bg); color: var(--ink-chip-text); }
.role-badge--mentor  { background: var(--success-bg); color: var(--success-dark); }
.role-badge--admin   { background: rgba(234,90,43,.14); color: var(--accent-text); }

/* ═══════════════════════════════════════════════
   CURSANT PAGE — screen 12
═══════════════════════════════════════════════ */
.cursant-body {
  flex: 1; overflow-y: auto;
  padding: 1.25rem 1rem calc(1.5rem + var(--sab));
  max-width: 720px; margin: 0 auto; width: 100%;
}
.cursant-list { display: flex; flex-direction: column; gap: 12px; padding: 1rem; }

.cursant-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
/* accent stripe on the left, colored by status badge inside */
.cursant-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--disabled);
}
.cursant-card:has(.badge--pending)::before { background: var(--accent); }
.cursant-card:has(.badge--ok)::before      { background: var(--success); }
.cursant-card:has(.badge--expired)::before { background: var(--disabled); }
.cursant-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cursant-card-title  { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.cursant-card-meta   { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--mono); font-size: .72rem; color: var(--faint); margin-bottom: 12px; }
.cursant-card-actions { display: flex; justify-content: flex-end; }

.badge {
  display: inline-block; padding: 5px 10px; border-radius: 20px;
  font-family: var(--mono);
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.badge--ok      { background: var(--success-bg); color: var(--success-dark); border: none; }
.badge--pending { background: rgba(234,90,43,.12); color: var(--accent-text); border: none; }
.badge--expired { background: var(--bg); color: var(--muted); border: none; }

.results-container { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 1rem; gap: 16px; }
.results-header     { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.text-muted { color: var(--muted); }

/* ═══════════════════════════════════════════════
   DESKTOP CANVAS — center the mobile-first app
═══════════════════════════════════════════════ */
@media (min-width: 1100px) {
  body { background: var(--canvas); }
}
@media (min-width: 900px) {
  .regulation-list,
  .rule-page,
  .regulation-content,
  .reg-search-wrap,
  .search-result-item { max-width: 760px; margin-left: auto; margin-right: auto; }
  .search-results-header { max-width: 760px; margin: 0 auto; }
}

/* ══════════════════════════ CoManMatch simulator ══════════════════════════ */
/* Culori echipe: albastru #3b6fd4, verde #2ea44f. Butoanele <button> NU moștenesc
   culoarea textului (au negru implicit de browser) — de aceea fiecare buton își
   setează explicit color: var(--text) sau culoarea echipei; altfel textul e negru
   pe temă închisă. */
/* `overflow-anchor: none`: o re-randare a tablei nu lasă browserul să mute pagina
   (deschiderea terenului de poziții o derula cu +239px și banda ieșea din ecran). */
.comanmatch-body { max-width: 860px; margin: 0 auto; padding: 16px; color: var(--text); overflow-anchor: none; }

.cmm-info { max-width: 640px; margin: 0 auto; text-align: center; }
.cmm-info-icon { font-size: 2.4rem; }
.cmm-info-title { font-size: 1.4rem; font-weight: 800; margin: .3rem 0 .5rem; }
.cmm-info-lead { color: var(--muted); line-height: 1.6; font-size: .92rem; }

.cmm-legend { text-align: left; margin: 1.4rem 0; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.cmm-legend-title { font-size: 1rem; font-weight: 800; margin: 0 0 .4rem; }
.cmm-legend-sub { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: .9rem 0 .45rem; }
.cmm-legend-grid { display: grid; gap: .35rem; }
.cmm-legend-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; align-items: baseline; }
.cmm-legend-term { font-family: var(--mono); font-size: .76rem; font-weight: 700; color: var(--text); }
.cmm-legend-gloss { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.cmm-legend-note { font-size: .82rem; color: var(--muted); line-height: 1.5; margin: 0; }
.cmm-start-btn { margin-top: 1.2rem; }

.cmm-teams-head { text-align: center; margin-bottom: 1rem; }
.cmm-teams-title { font-size: 1.3rem; font-weight: 800; color: var(--text); }
.cmm-teams-lead { color: var(--muted); font-size: .88rem; margin-top: .3rem; }
.cmm-teams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .cmm-teams-grid { grid-template-columns: 1fr; } }

.cmm-team { border: 1.5px solid var(--border); border-radius: 14px; padding: 1rem; background: var(--surface); }
.cmm-team--blue  { border-color: #3b6fd4; }
.cmm-team--green { border-color: #2ea44f; }
.cmm-team-title { font-size: 1rem; font-weight: 800; margin: 0 0 .7rem; }
.cmm-team--blue  .cmm-team-title { color: #3b6fd4; }
.cmm-team--green .cmm-team-title { color: #2ea44f; }
.cmm-team-group { margin-bottom: .7rem; }
.cmm-team-lbl { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }

/* Grilă fixă de 4 pe rând: cei 16 jucători intră în 4 rânduri în loc de 6, deci
   blocul de echipă e mult mai scund și rămâne loc pentru teren pe ecran. */
.cmm-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.cmm-num { display: inline-flex; align-items: center; justify-content: center; min-width: 0; width: 100%; height: 2.1rem; padding: 0 .2rem; border-radius: 9px; border: 1.5px solid var(--border); background: transparent; color: var(--text); font-family: var(--mono); font-weight: 700; font-size: .85rem; }
.cmm-team--blue  .cmm-num, .cmm-side--blue  .cmm-num { border-color: #3b6fd4; color: #3b6fd4; }
.cmm-team--green .cmm-num, .cmm-side--green .cmm-num { border-color: #2ea44f; color: #2ea44f; }
.cmm-num--gk { background: #3b6fd4; color: #fff !important; border-color: #3b6fd4; }
.cmm-team--green .cmm-num--gk, .cmm-side--green .cmm-num--gk { background: #2ea44f; border-color: #2ea44f; }
.cmm-num--coach { border-style: dashed; }

.cmm-soon { text-align: center; color: var(--muted); padding: 3rem 1rem; }

/* ── tabla interactivă ── */
.cmm-board { display: flex; flex-direction: column; gap: 12px; color: var(--text); }
/* `--cmm-top` = înălțimea barei de sus (comanmatch.js → headerOffset): banda se lipește sub bară, nu sub ea. */
.cmm-band { position: sticky; top: var(--cmm-top, 0px); z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 2.5px solid #f5c518; background: var(--dark); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.cmm-band-prompt { flex: 1; font-size: .86rem; line-height: 1.4; }
.cmm-transition { flex-shrink: 0; padding: .45rem .7rem; border-radius: 9px; cursor: pointer; border: 1.5px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.cmm-transition.on { background: var(--accent); border-color: var(--accent); }

.cmm-court { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmm-side { border: 1.5px solid var(--border); border-radius: 12px; padding: .7rem; }
.cmm-side--blue  { border-color: #3b6fd4; }
.cmm-side--green { border-color: #2ea44f; }
.cmm-side-name { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .5rem; }
.cmm-nums--coach { margin-top: .45rem; }
.cmm-num--btn { cursor: pointer; transition: transform .05s ease; }
.cmm-num--btn:active { transform: scale(.92); }
.cmm-num--sel { outline: 3px solid var(--accent); outline-offset: 1px; }

.cmm-panel { min-height: 2.6rem; border: 1px dashed var(--border); border-radius: 12px; padding: .6rem .7rem; background: var(--surface); }
.cmm-panel-hint { color: var(--muted); font-size: .84rem; text-align: center; padding: .4rem; }
.cmm-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 700; font-size: .85rem; margin-bottom: .5rem; color: var(--text); }
.cmm-panel-x { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: .78rem; }
.cmm-acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.cmm-act { padding: .5rem .7rem; border-radius: 9px; border: 1.5px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: .82rem; font-weight: 600; }
.cmm-act:hover { border-color: var(--accent); }
.cmm-act i { font-family: var(--mono); font-style: normal; color: var(--muted); font-size: .72rem; }
.cmm-goalgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; max-width: 220px; margin: 0 auto .5rem; }
.cmm-zone { aspect-ratio: 1; border: 1.5px solid var(--border); border-radius: 8px; background: transparent; cursor: pointer; font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.cmm-zone:hover { border-color: var(--accent); color: var(--accent); }
.cmm-acts--extra { justify-content: center; }

.cmm-log { border: 1px solid var(--border); border-radius: 12px; padding: .6rem .7rem; background: var(--surface); }
.cmm-log-head { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .45rem; }
.cmm-log-empty { color: var(--muted); font-size: .82rem; padding: .3rem 0; }
.cmm-log-row { display: flex; align-items: center; gap: .5rem; padding: .28rem 0; border-top: 1px solid var(--border); font-size: .84rem; color: var(--text); }
.cmm-log-row:first-of-type { border-top: none; }
.cmm-log-n { font-family: var(--mono); font-size: .68rem; color: var(--muted); min-width: 1.2rem; }
.cmm-log-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.5rem; padding: 0 .35rem; border-radius: 7px; font-family: var(--mono); font-weight: 700; font-size: .74rem; color: #fff; }
.cmm-log-chip--blue { background: #3b6fd4; }
.cmm-log-chip--green { background: #2ea44f; }
.cmm-log-txt { flex: 1; }
.cmm-log-tag { font-weight: 700; font-size: .8rem; }
.cmm-log-tag--to { color: var(--accent); }

.cmm-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 0; background: var(--bg); }
.cmm-clock { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .75rem; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-family: var(--mono); font-weight: 700; }
.cmm-clock.stopped { border-color: var(--danger); color: var(--danger); }
.cmm-clock-flag { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; }
.cmm-undo { margin-left: auto; padding: .55rem .7rem; border-radius: 10px; border: 1.5px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: .8rem; }
.cmm-undo:disabled { opacity: .4; cursor: default; }
.cmm-done { padding: .55rem 1.2rem; }

.cmm-done-screen { max-width: 560px; margin: 0 auto; color: var(--text); }
.cmm-log--done { margin: 1rem 0; }
.cmm-done-actions { display: flex; gap: .6rem; }
.cmm-done-actions .btn { flex: 1; }


/* ── CoManMatch v2: controls (time-out echipă + transition la mijloc), poartă vizuală ── */
.cmm-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.cmm-controls .cmm-transition { justify-self: center; }
.cmm-teamto { padding: .5rem .8rem; border-radius: 10px; border: 2px solid var(--border); background: transparent; cursor: pointer; font-family: var(--mono); font-weight: 700; font-size: .72rem; letter-spacing: .03em; }
.cmm-teamto--blue  { justify-self: start; border-color: #3b6fd4; color: #3b6fd4; }
.cmm-teamto--green { justify-self: end;   border-color: #2ea44f; color: #2ea44f; }
.cmm-teamto:active { transform: scale(.96); }

/* poarta: bare (border gros) + plasă (mesh în romburi) */
/* Poartă realistă: bare roșu-alb (ca la barele oficiale) pe stânga/dreapta/sus,
   jos deschisă — acolo e linia porții, la sol, fără bară. Diagonalele repetate
   ca fundal dau plasa; border-image le pune și pe cadru, cu lățime 0 jos, ca
   modelul să nu se deseneze deloc pe acea latură. */
.cmm-goal {
  position: relative; width: 100%; max-width: 280px; aspect-ratio: 3 / 2;
  margin: .2rem auto .7rem; box-sizing: border-box;
  border-style: solid; border-width: 9px 9px 0 9px;
  border-image: repeating-linear-gradient(135deg, #d81f2a 0 8px, #fff 8px 16px) 12;
  background-color: rgba(120,130,150,.05);
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 9px, rgba(150,160,180,.4) 9px 10px),
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(150,160,180,.4) 9px 10px);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08), 0 3px 10px rgba(0,0,0,.12);
}
/* linia porții, jos — subțire, neutră, cât să sugereze solul fără să pară bară */
.cmm-goal::after {
  content: ''; position: absolute; left: -9px; right: -9px; bottom: -3px; height: 3px;
  background: var(--muted); border-radius: 2px; opacity: .5;
}
.cmm-goal-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); }
.cmm-goal-cell { border: 1px solid rgba(150,160,180,.22); background: transparent; cursor: pointer; transition: background .08s ease; }
.cmm-goal-cell:hover  { background: rgba(234,90,43,.30); }
.cmm-goal-cell:active { background: rgba(234,90,43,.5); }

/* ── CoManMatch: rezultat + sumar sesiune ── */
.cmm-result { max-width: 620px; margin: 0 auto; color: var(--text); }
.cmm-verdict { text-align: center; font-size: 1.4rem; font-weight: 800; padding: .6rem; border-radius: 12px; margin-bottom: .3rem; }
.cmm-verdict.ok { color: var(--success); }
.cmm-verdict.no { color: var(--danger); }
.cmm-res-meta { text-align: center; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .8rem; }
.cmm-res-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; }
.cmm-res-row { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.cmm-res-row.cmm-res-ok { border-color: var(--success); }
.cmm-res-row.cmm-res-no { border-color: var(--danger); }
.cmm-res-mark { font-weight: 800; font-size: 1rem; line-height: 1.4; }
.cmm-res-ok .cmm-res-mark { color: var(--success); }
.cmm-res-no .cmm-res-mark { color: var(--danger); }
.cmm-res-body { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: .84rem; }
.cmm-res-you { flex-basis: 100%; margin-top: .25rem; font-size: .78rem; color: var(--danger); display: flex; align-items: center; gap: .35rem; }

.cmm-summary { max-width: 520px; margin: 0 auto; text-align: center; color: var(--text); }
.cmm-sum-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 1.2rem 0; }
.cmm-sum-card { border: 1px solid var(--border); border-radius: 14px; padding: 1rem .5rem; background: var(--surface); }
.cmm-sum-val { font-size: 1.5rem; font-weight: 800; }
.cmm-sum-lbl { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: .3rem; }

/* ── CoManMatch: link statistici + istoricul sesiunilor ── */
.cmm-stats-link { margin-top: .6rem; }
.cmm-stat-list { display: flex; flex-direction: column; gap: .35rem; text-align: left; margin-top: 1rem; }
.cmm-stat-row { display: flex; align-items: baseline; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.cmm-stat-pct { font-weight: 800; font-size: 1rem; min-width: 3rem; }
.cmm-stat-sub { flex: 1; font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.cmm-stat-date { font-size: .74rem; color: var(--muted); }

/* ── CoManMatch: referință colorată la jucător în text ("VERDE 44") ── */
.cmm-ref {
  font-weight: 800; letter-spacing: .01em; white-space: nowrap;
  padding: .05em .3em; border-radius: 5px;
}
.cmm-ref--blue  { color: #fff; background: #3b6fd4; }
.cmm-ref--green { color: #fff; background: #2ea44f; }

/* ── CoManMatch: shot position ca jumătate de teren, verticală ── */
/* container-type + unități cqw: eticheta scalează odată cu terenul. Altfel, pe
   ecran îngust terenul se micșorează dar textul rămâne la fel, iar butoanele
   vecine ajung să se atingă (Center 6m ↔ Right 6m la 300px). */
.cmm-court-pos {
  position: relative; width: 100%; max-width: 360px; aspect-ratio: 20 / 15;
  margin: .2rem auto .3rem; container-type: inline-size;
}
.cmm-court-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmm-court-bg   { fill: rgba(120,150,120,.10); stroke: var(--border); stroke-width: .08; }
.cmm-court-line { stroke: var(--muted); stroke-width: .12; opacity: .75; }
.cmm-court-dash { stroke-dasharray: .55 .45; }
.cmm-court-goal { stroke: #d81f2a; stroke-width: .3; stroke-linecap: round; }
/* Butoanele pozițiilor, așezate pe teren după POS_XY. */
.cmm-cpos {
  position: absolute; transform: translate(-50%, -50%);
  padding: .9cqw 1.3cqw; border-radius: 7px; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  font-size: max(8.5px, 3.15cqw); font-weight: 700; line-height: 1.15;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}
.cmm-cpos:hover  { border-color: var(--accent); color: var(--accent); }
.cmm-cpos:active { transform: translate(-50%, -50%) scale(.94); }