/* Echo · Eva Build — mobil întâi (ecranul exterior al Fold-ului, ~360 px), temă luminoasă și întunecată.
   Culorile sunt jetoane (variabile) în trei locuri: :root (luminos), @media dark și [data-tema="intunecat"].
   Un test (tests/app_css.test.ts) verifică raportul de contrast al perechilor importante, în ambele teme.
   Fără stiluri „inline” în HTML/JS (CSP: style-src 'self'). */

:root {
  color-scheme: light;
  --fundal: #EEF0F7;
  --suprafata: #FFFFFF;
  --suprafata-2: #F3F4FA;
  --text: #15162B;
  --text-mut: #4A4E66;
  --linie: #CDD1E2;
  --camp-brd: #6B6F8A;
  --accent: #1B1464;
  --pe-accent: #FFFFFF;
  --ok: #0A6B4B;
  --pe-ok: #FFFFFF;
  --rosu: #B8000E;
  --rosu-fundal: #FDE8EA;
  --pe-rosu: #7A0009;
  --galben: #7A4B00;
  --galben-brd: #B97300;
  --galben-fundal: #FFF1D0;
  --info: #0B4F9C;
  --info-fundal: #E3EEFB;
  --antet: #1B1464;
  --pe-antet: #FFFFFF;
  --focus: #0B57D0;
  --umbra: 0 1px 2px rgba(27, 20, 100, .10), 0 4px 14px rgba(27, 20, 100, .08);
  --raza: 16px;
  --raza-mica: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="luminos"]) {
    color-scheme: dark;
    --fundal: #0E0D22;
    --suprafata: #1A1936;
    --suprafata-2: #232247;
    --text: #ECEBFA;
    --text-mut: #B4B3D2;
    --linie: #3A3968;
    --camp-brd: #8C8BB5;
    --accent: #655CEE;
    --pe-accent: #FFFFFF;
    --ok: #1FA97A;
    --pe-ok: #04150E;
    --rosu: #FF7A85;
    --rosu-fundal: #3B1018;
    --pe-rosu: #FFC9CE;
    --galben: #FFCB66;
    --galben-brd: #FFCB66;
    --galben-fundal: #3A2A08;
    --info: #8DBBFF;
    --info-fundal: #12294A;
    --antet: #14123A;
    --pe-antet: #FFFFFF;
    --focus: #8DBBFF;
    --umbra: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
  }
}

:root[data-tema="intunecat"] {
  color-scheme: dark;
  --fundal: #0E0D22;
  --suprafata: #1A1936;
  --suprafata-2: #232247;
  --text: #ECEBFA;
  --text-mut: #B4B3D2;
  --linie: #3A3968;
  --camp-brd: #8C8BB5;
  --accent: #655CEE;
  --pe-accent: #FFFFFF;
  --ok: #1FA97A;
  --pe-ok: #04150E;
  --rosu: #FF7A85;
  --rosu-fundal: #3B1018;
  --pe-rosu: #FFC9CE;
  --galben: #FFCB66;
  --galben-brd: #FFCB66;
  --galben-fundal: #3A2A08;
  --info: #8DBBFF;
  --info-fundal: #12294A;
  --antet: #14123A;
  --pe-antet: #FFFFFF;
  --focus: #8DBBFF;
  --umbra: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
}

/* ——— bază ——— */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[data-marime="mare"] { font-size: 112.5%; }
html[data-marime="foarte_mare"] { font-size: 125%; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.45;
  background: var(--fundal);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::placeholder { color: var(--text-mut); opacity: 1; }
button { cursor: pointer; }
a { color: var(--info); }
h1, h2, h3 { line-height: 1.25; }
ul { list-style: none; }
.ico { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.ico-mare { width: 30px; height: 30px; }
.doar-cititor { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fara-js { padding: 24px 16px; text-align: center; }

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

/* ——— pornire ——— */
.splash { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 16px; background: var(--antet); color: var(--pe-antet); padding: 24px; text-align: center; }
.splash img { border-radius: 18px; background: #fff; }

/* ——— antet ——— */
.antet {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 4px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 4px 8px 12px;
  background: var(--antet); color: var(--pe-antet);
}
.antet-brand { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; color: inherit; text-decoration: none; min-height: 48px; }
.antet-logo { width: 36px; height: 36px; border-radius: 9px; background: #fff; }
.antet-titlu { font-weight: 800; font-size: 1.25rem; letter-spacing: .5px; white-space: nowrap; }
.chip-mod {
  flex: 0 1 auto; min-width: 0; margin-left: auto; text-align: center;
  font-size: .8125rem; font-weight: 650; line-height: 1.2;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: var(--pe-antet);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-mod:empty { display: none; }
/* runda 2: pastila se vede ÎNTREAGĂ și la 360 px — cel mult două rânduri scurte („Liniște” / „până luni, 05:30”), fără „…” */
.chip-mod-rand { display: block; white-space: nowrap; }
.chip-mod-doua { font-size: .75rem; line-height: 1.15; padding: 4px 10px; border-radius: 14px; text-overflow: clip; }
.chip-mod-doua .chip-mod-rand:first-child { font-weight: 750; }
.chip-mod-fara-retea { background: #FFE9B0; color: #5A3A00; }
.btn-icon {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 48px; height: 48px; border: 0; border-radius: 14px;
  background: transparent; color: inherit; text-decoration: none;
}
.btn-icon:active { background: rgba(127, 127, 160, .25); }
.antet-btn .ico { width: 24px; height: 24px; }
.antet .btn-icon:focus-visible { outline-color: var(--pe-antet); }
@keyframes rotire { to { transform: rotate(360deg); } }
.se-invarte .ico { animation: rotire .8s linear infinite; }

/* ——— benzi (demonstrație, fără internet, versiune nouă) ——— */
.benzi { position: relative; }
.banda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; font-size: .9375rem; line-height: 1.35; border-bottom: 1px solid var(--linie); }
.banda .ico { width: 22px; height: 22px; }
.banda-text { flex: 1 1 180px; min-width: 0; }
.banda-butoane { display: flex; flex: 1 0 100%; justify-content: flex-end; gap: 4px; }
.banda-oferta { background: var(--suprafata-2); color: var(--text); }
.banda-btn { flex: 0 0 auto; min-height: 44px; padding: 0 12px; font-weight: 700; border: 0; background: transparent; color: inherit; text-decoration: underline; }
.banda-proba { background: var(--info-fundal); color: var(--info); }
.banda-fara-retea { background: var(--galben-fundal); color: var(--galben); }
.banda-oprit { background: var(--galben-fundal); color: var(--galben); }
.banda-versiune { background: var(--info-fundal); color: var(--info); }
.banda-pachet { padding: 4px 16px; font-size: .8125rem; color: var(--text-mut); text-align: center; }

/* ——— pagina ——— */
.principal { max-width: 680px; margin: 0 auto; padding: 12px 16px calc(var(--tava-h, 0px) + 120px + env(safe-area-inset-bottom, 0px)); outline: none; }

/* ——— butoane ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 16px; border-radius: 14px; border: 2px solid transparent;
  font-weight: 650; font-size: 1.0625rem; line-height: 1.2; text-align: center; text-decoration: none;
  background: transparent; color: var(--text);
  transition: transform .06s ease;
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primar { background: var(--accent); color: var(--pe-accent); }
.btn-trimite, .btn-mare.btn-primar { background: var(--ok); color: var(--pe-ok); }
.btn-secundar { background: var(--suprafata); border-color: var(--camp-brd); color: var(--text); }
.btn-text { background: transparent; color: var(--text-mut); min-height: 48px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.btn-pericol { background: var(--suprafata); border-color: var(--rosu); color: var(--rosu); }
.btn-mare { min-height: 60px; font-size: 1.1875rem; width: 100%; }
.btn-mic { min-height: 44px; padding: 0 12px; font-size: .9375rem; }
.btn .ico { width: 1.2em; height: 1.2em; }
.mic-text { min-height: 44px; font-size: .9375rem; }
.inapoi { align-self: flex-start; padding-left: 4px; text-decoration: none; color: var(--text); font-weight: 700; }
.butoane-coloana { display: grid; gap: 10px; }

/* ——— salut + contoare ——— */
.salut { margin-bottom: 16px; }
.salut-titlu { font-size: .9375rem; font-weight: 700; color: var(--text-mut); letter-spacing: .3px; }
.salut-rezumat { font-size: 1.375rem; line-height: 1.3; font-weight: 750; margin: 4px 0 14px; }
.contoare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.contor {
  display: grid; justify-items: center; gap: 2px; padding: 10px 6px; min-height: 64px;
  border: 2px solid var(--linie); border-radius: var(--raza-mica); background: var(--suprafata); color: var(--text);
}
.contor-n { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.contor-text { font-size: .8125rem; font-weight: 650; color: var(--text-mut); }
.contor-accent { border-color: var(--rosu); }
.contor-zero .contor-n { color: var(--text-mut); font-weight: 600; }
.btn-asculta { width: 100%; margin-top: 12px; }

/* ——— secțiuni ——— */
.sectiune { margin-top: 24px; }
.sectiune-cap { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; width: 100%; background: transparent; border: 0; text-align: left; color: inherit; min-height: 44px; }
.sectiune-titlu { font-size: 1.1875rem; font-weight: 800; }
.sectiune-doar_tu .sectiune-titlu { color: var(--rosu); }
.sectiune-gata_de_plecat .sectiune-titlu { color: var(--text); }
.numar { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: var(--pe-accent); font-size: .875rem; font-weight: 800; }
.numar-zero { background: var(--suprafata-2); color: var(--text-mut); border: 1px solid var(--linie); }
.sectiune-cap-buton { cursor: pointer; }
.sectiune-cap-buton .ico { margin-left: auto; }
.sectiune-gol { color: var(--text-mut); padding: 8px 4px 0; }
.carduri { display: grid; gap: 12px; }

/* ——— cardul ——— */
.card {
  background: var(--suprafata); border: 1px solid var(--linie); border-left: 6px solid var(--linie);
  border-radius: var(--raza); padding: 14px 14px 12px; box-shadow: var(--umbra);
}
.card-rosu { border-left-color: var(--rosu); }
.card-galben { border-left-color: var(--galben-brd); }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8125rem; color: var(--text-mut); }
.card-timp { margin-left: auto; white-space: nowrap; }
.card-titlu { font-size: 1.1875rem; line-height: 1.3; font-weight: 750; margin: 8px 0 6px; }
.card-compact { padding: 12px 12px 10px; }
.card-compact .card-titlu { font-size: 1.0625rem; font-weight: 700; }
.card-stari { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
/* v3: etichetele porții (posibil fals, manipulare…) și pe ecranul ciornei */
.card-etichete { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.card-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
  background: transparent; border: 0; color: var(--info); font-weight: 650; font-size: .9375rem;
}
.card-detalii { margin: 4px 0 6px; }
.card-text { white-space: pre-wrap; color: var(--text); }
.card-de-la { color: var(--text-mut); font-size: .9375rem; margin-bottom: 4px; }
.card-avertizare { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; padding: 10px 12px; border-radius: var(--raza-mica); background: var(--rosu-fundal); color: var(--pe-rosu); font-weight: 650; }
.card-avertizare .ico { margin-top: 2px; }
.card-fel-frauda { border-left-color: var(--rosu); }
.eticheta-mica { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-mut); }
.legatura { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.card-butoane { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.card-butoane .btn-primar, .card-butoane .btn-text { grid-column: 1 / -1; }
.card-butoane .btn { min-width: 0; padding: 0 10px; }
.card-butoane .btn-text { min-height: 44px; font-size: .9375rem; }
.card-compact .card-butoane .btn { min-height: 48px; font-size: 1rem; }

/* ——— chipuri ——— */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 700; line-height: 1.3; background: var(--suprafata-2); color: var(--text); border: 1px solid var(--linie); }
.chip .ico { width: 1em; height: 1em; }
.chip-rosu { background: var(--rosu-fundal); color: var(--pe-rosu); border-color: var(--rosu); }
.chip-galben { background: var(--galben-fundal); color: var(--galben); border-color: var(--galben-brd); }
.chip-info { background: var(--info-fundal); color: var(--info); border-color: var(--info); }
.chip-proiect { background: transparent; color: var(--text-mut); }
.chip-fel { background: var(--suprafata-2); }

/* ——— ciorna în card ——— */
.ciorna-mini { margin: 8px 0 4px; padding: 10px 12px; border-radius: var(--raza-mica); background: var(--suprafata-2); border: 1px solid var(--linie); }
.ciorna-mini-risc { border-color: var(--rosu); }
.ciorna-mini-blocat { border: 2px solid var(--rosu); background: var(--rosu-fundal); color: var(--pe-rosu); }
.ciorna-mini-catre { font-weight: 650; }
.ciorna-mini-text { color: var(--text-mut); font-size: .9375rem; margin-top: 4px; }
.ciorna-mini-nota { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: .875rem; font-weight: 650; }
.ciorna-mini-nota .ico { width: 1.1em; height: 1.1em; }
.steaguri { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.steag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 750; }
.steag .ico { width: 1em; height: 1em; }
.steag-risc { background: var(--rosu-fundal); color: var(--pe-rosu); border: 1px solid var(--rosu); }
.steag-blocare { background: var(--rosu); color: var(--suprafata); border: 1px solid var(--rosu); }
.steag-info { background: var(--info-fundal); color: var(--info); border: 1px solid var(--info); }

/* ——— ecranul ciornei ——— */
.ecran { display: flex; flex-direction: column; gap: 14px; }
.bara-sus { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pozitie { font-weight: 700; color: var(--text-mut); }
.ecran-titlu { font-size: 1.375rem; font-weight: 800; }
.risc-panou { padding: 14px; border-radius: var(--raza); border: 2px solid var(--rosu); background: var(--rosu-fundal); color: var(--pe-rosu); }
.risc-panou-info { border-color: var(--info); background: var(--info-fundal); color: var(--info); }
.risc-panou-blocat { background: var(--rosu); color: var(--suprafata); border-color: var(--rosu); }
/* ciorna care nu mai e „de aprobat”: în coadă, trimisă, predată către WhatsApp, anulată */
.stare-ciorna { padding: 14px; border-radius: var(--raza); border: 2px solid var(--info); background: var(--info-fundal); color: var(--info); }
.stare-ciorna-ok { border-color: var(--ok); background: var(--suprafata); color: var(--text); }
.stare-ciorna .ciorna-h { margin-bottom: 4px; }
.risc-titlu { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; margin-bottom: 8px; }
.risc-lista { display: grid; gap: 8px; }
.risc-rand { padding-left: 10px; border-left: 4px solid currentColor; }
.risc-nota { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-weight: 650; font-size: .9375rem; }
.context-card { background: var(--suprafata); border: 1px solid var(--linie); border-radius: var(--raza-mica); padding: 8px 12px; }
.context-card summary { min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--info); cursor: pointer; list-style: none; }
.context-card summary::-webkit-details-marker { display: none; }
.context-card summary::before { content: '\25B8'; font-size: 1.1em; }
.context-card[open] summary::before { content: '\25BE'; }
.context-titlu { font-weight: 700; margin-bottom: 4px; }
.context-text { color: var(--text-mut); white-space: pre-wrap; padding-bottom: 6px; }
.ciorna-campuri { display: grid; gap: 12px; background: var(--suprafata); border: 1px solid var(--linie); border-radius: var(--raza); padding: 12px 14px; }
.ciorna-camp dt { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-mut); margin-bottom: 4px; }
.subiect { font-weight: 700; }
.destinatari { display: grid; gap: 6px; }
.destinatar { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--raza-mica); border: 1px solid var(--linie); background: var(--suprafata-2); border-left-width: 5px; }
.destinatar-risc { border-color: var(--rosu); background: var(--rosu-fundal); color: var(--pe-rosu); }
.destinatar-info { border-color: var(--info); background: var(--info-fundal); color: var(--info); }
.destinatar-pictograma { padding-top: 2px; }
.destinatar-corp { display: grid; gap: 2px; min-width: 0; }
.destinatar-nume { font-weight: 750; }
.destinatar-adresa { font-size: .9375rem; word-break: break-all; }
.domeniu { font-weight: 800; }
.domeniu-accent { text-decoration: underline wavy; text-underline-offset: 3px; }
.destinatar-motive { font-size: .875rem; font-weight: 650; }
.ciorna-sectiune { display: grid; gap: 8px; }
.ciorna-h { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 800; }
.corp-mesaj { white-space: pre-wrap; background: var(--suprafata); border: 1px solid var(--linie); border-radius: var(--raza); padding: 14px; font-size: 1.0625rem; line-height: 1.55; }
.marca { padding: 0 3px; border-radius: 4px; font-weight: 800; }
.marca-suma, .marca-iban { background: var(--rosu-fundal); color: var(--pe-rosu); outline: 2px solid var(--rosu); }
.marca-link { background: var(--galben-fundal); color: var(--galben); outline: 2px solid var(--galben-brd); }
.marca-email { color: var(--info); text-decoration: underline; background: transparent; font-weight: 700; }
.legenda-marci { font-size: .875rem; color: var(--text-mut); }
.nota-subsol { font-size: .875rem; color: var(--text-mut); }
.atasamente { display: grid; gap: 6px; }
.atasament { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--raza-mica); border: 1px solid var(--camp-brd); background: var(--suprafata); }
.atasament-risc { border-color: var(--rosu); }
.atasament-periculos { border: 2px solid var(--rosu); background: var(--rosu-fundal); color: var(--pe-rosu); }
.atasament-nume { font-weight: 700; word-break: break-all; }
.atasament-info, .atasament-motive { font-size: .875rem; }
.bara-jos {
  position: sticky; bottom: var(--tava-h, 0px); z-index: 20; display: grid; gap: 8px;
  margin: 4px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--fundal); border-top: 1px solid var(--linie);
}
.bara-rand { display: flex; gap: 8px; }
.bara-rand .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.bara-rand .btn-text { flex: 0 0 auto; padding: 0 12px; }
.bara-nota { font-weight: 650; text-align: center; color: var(--text-mut); }
.ciorna-gresit { justify-items: start; }

/* ——— formulare ——— */
.camp {
  width: 100%; min-height: 52px; padding: 12px 14px; border-radius: var(--raza-mica);
  border: 2px solid var(--camp-brd); background: var(--suprafata); color: var(--text);
}
textarea.camp { min-height: 96px; line-height: 1.45; resize: vertical; }
.camp-corp { min-height: 240px; }
.camp-eticheta { display: grid; gap: 6px; font-weight: 700; }
.camp-rand { display: grid; gap: 6px; padding: 8px 0; }
.camp-pereche { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.camp-cu-unitate { display: flex; align-items: center; gap: 10px; }
.camp-numar { max-width: 140px; }
.camp-ora { max-width: 180px; }
.camp-unitate { color: var(--text-mut); font-weight: 600; }
.camp-ajutor { color: var(--text-mut); font-size: .9375rem; }
.camp-eroare { color: var(--rosu); font-weight: 700; font-size: .9375rem; }
.camp[aria-invalid="true"] { border-color: var(--rosu); }
.editor { display: grid; gap: 12px; }
.editor-adrese { display: grid; gap: 8px; }
.editor-adrese-rand { display: flex; gap: 8px; align-items: center; }
.editor-adrese-rand .camp { flex: 1 1 auto; min-width: 0; }
.editor-adrese-rand .btn { flex: 0 0 auto; white-space: nowrap; }
.chipuri-adrese { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-adresa { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 12px; border-radius: 999px; background: var(--suprafata-2); border: 1px solid var(--camp-brd); font-size: .9375rem; max-width: 100%; }
.chip-adresa-text { min-width: 0; word-break: break-all; }
.chip-adresa-x { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; }
.camp-cod { font-size: 1.5rem; letter-spacing: 4px; text-align: center; text-transform: uppercase; }

/* alegeri (radio) */
.alegeri { border: 0; display: grid; gap: 8px; margin: 8px 0; }
.alegeri-legenda { font-weight: 800; margin-bottom: 4px; }
.alegere { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 2px solid var(--linie); border-radius: var(--raza-mica); background: var(--suprafata); min-height: 56px; cursor: pointer; }
.alegere input { width: 24px; height: 24px; margin-top: 1px; accent-color: var(--accent); flex: 0 0 auto; }
.alegere:has(input:checked) { border-color: var(--accent); background: var(--suprafata-2); }
.alegere-text { display: grid; gap: 2px; min-width: 0; }
.alegere-titlu { font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.alegere-sub { color: var(--text-mut); font-size: .875rem; }
.alegeri-rand { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.alegeri-rand .alegeri-legenda { grid-column: 1 / -1; }
.alegere-mica { min-height: 52px; padding: 10px; }

/* întrerupătoare */
.intrerupator { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; min-height: 56px; }
.intrerupator-input { position: absolute; right: 0; top: 50%; width: 56px; height: 32px; margin: -16px 0 0; opacity: 0; z-index: 2; cursor: pointer; }
.intrerupator-eticheta { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; padding-right: 68px; font-weight: 650; }
.intrerupator-eticheta .camp-ajutor { font-weight: 400; }
.intrerupator-vizual { position: absolute; right: 0; top: 50%; width: 56px; height: 32px; margin-top: -16px; border-radius: 999px; background: var(--camp-brd); transition: background .15s ease; }
.intrerupator-vizual::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--suprafata); transition: transform .15s ease; }
.intrerupator-input:checked ~ .intrerupator-vizual { background: var(--ok); }
.intrerupator-input:checked ~ .intrerupator-vizual::after { transform: translateX(24px); }
.intrerupator-input:focus-visible ~ .intrerupator-vizual { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ——— setări ——— */
.setari-grup { background: var(--suprafata); border: 1px solid var(--linie); border-radius: var(--raza); padding: 14px; display: grid; gap: 6px; }
.setari-titlu { font-size: 1.125rem; font-weight: 800; margin-bottom: 4px; }
.pachete { display: grid; gap: 8px; }
.pachet-rand { display: flex; align-items: center; gap: 8px; }
.bara-salvare { display: grid; gap: 8px; position: sticky; bottom: var(--tava-h, 0px); z-index: 15; padding: 10px 0 calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--fundal); }
.salvare-stare { text-align: center; color: var(--text-mut); font-weight: 650; min-height: 1.2em; }
.persoane { display: grid; gap: 10px; }
.persoana { border: 1px solid var(--linie); border-radius: var(--raza-mica); padding: 8px 12px; background: var(--suprafata-2); }
.persoana-nume { display: grid; gap: 2px; }
.grave { list-style: disc; padding-left: 22px; display: grid; gap: 4px; }
.info-ai { padding: 12px; border-radius: var(--raza-mica); background: var(--info-fundal); color: var(--info); display: grid; gap: 4px; }
.info-ai .camp-ajutor { color: inherit; }
.info-ai-titlu { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.puls { display: grid; gap: 6px; }
.puls-rand { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--raza-mica); }
.puls-ok { background: var(--suprafata-2); }
.puls-ok .ico { color: var(--ok); }
.puls-problema { background: var(--galben-fundal); color: var(--galben); }
.puls-text { display: grid; gap: 2px; }
.cost { display: grid; gap: 6px; margin-top: 6px; }
.versiune { text-align: center; color: var(--text-mut); font-size: .8125rem; margin-top: 8px; }

/* ——— foi (dialoguri) ——— */
dialog.foaie {
  border: 0; padding: 0; margin: auto auto 0; width: min(100%, 560px); max-height: 92dvh; overflow: hidden;
  border-radius: 22px 22px 0 0; background: var(--suprafata); color: var(--text); box-shadow: 0 -8px 40px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column;
}
dialog.foaie:not([open]) { display: none; }
dialog.foaie::backdrop { background: rgba(8, 6, 30, .6); }
.foaie-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 8px 4px 18px; }
.foaie-titlu { font-size: 1.25rem; font-weight: 800; }
.foaie-corp { padding: 8px 18px; overflow: auto; display: grid; gap: 10px; align-content: start; }
.foaie-text { color: var(--text); }
.foaie-text.mut, .mut { color: var(--text-mut); font-size: .9375rem; }
.foaie-eroare { padding: 0 18px; }
.foaie-butoane { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); }
.foaie-butoane .btn { flex: 1 1 140px; min-width: 0; padding: 0 12px; }
.foaie-butoane .btn-secundar, .foaie-butoane .btn-text { flex: 0 0 auto; white-space: nowrap; }

/* ——— mesaje scurte ——— */
.toast { position: fixed; left: 0; right: 0; bottom: calc(var(--tava-h, 0px) + var(--bara-h, 0px) + 96px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.toast:empty { display: none; }
.toast-corp {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 520px; width: 100%;
  padding: 12px 16px; border-radius: var(--raza-mica); background: #1F1E3A; color: #FFFFFF; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); font-weight: 600;
}
.toast-ok { border-left: 6px solid #3DDC97; }
.toast-eroare { border-left: 6px solid #FF7A85; }
.toast-text { flex: 1 1 auto; min-width: 0; }
.toast-btn { flex: 0 0 auto; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: #FFD479; font-weight: 800; text-decoration: underline; }

/* ——— „Se trimit acum” ——— */
.tava {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; gap: 6px;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--suprafata); border-top: 3px solid var(--ok); box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
  max-height: 40dvh; overflow: auto;
}
.tava-rand { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.tava-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.tava-text { font-size: 1.0625rem; }
.tava-catre { color: var(--text-mut); font-size: .875rem; }
.tava-butoane { display: flex; gap: 6px; align-items: center; }
.tava-bara { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--suprafata-2); border: 1px solid var(--linie); overflow: hidden; }
.tava-bara-plin { display: block; height: 100%; width: calc(var(--p, 1) * 100%); background: var(--ok); transition: width .9s linear; }
.tava-eroare { border-left: 5px solid var(--rosu); padding-left: 10px; }
.tava-eroare .tava-text { color: var(--rosu); }
.tava-trimisa .tava-text { color: var(--ok); }

/* ——— vocea ——— */
.mic {
  position: fixed; right: 16px; bottom: calc(var(--tava-h, 0px) + var(--bara-h, 0px) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 45;
  width: 68px; height: 68px; border-radius: 50%; border: 3px solid var(--pe-antet);
  background: var(--antet); color: var(--pe-antet); display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.mic-activ { background: var(--rosu); color: var(--suprafata); animation: puls 1.1s ease-in-out infinite; }
@keyframes puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
body[data-ecran="setari"] .mic { display: none; }
.vocal {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--tava-h, 0px) + var(--bara-h, 0px) + 96px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  max-width: 560px; margin: 0 auto; display: grid; gap: 8px; padding: 16px;
  border-radius: var(--raza); background: var(--suprafata); color: var(--text); border: 2px solid var(--accent); box-shadow: 0 10px 36px rgba(0, 0, 0, .4);
}
.vocal-stare { font-size: 1.25rem; font-weight: 800; }
.vocal-nivel { height: 8px; border-radius: 999px; background: var(--suprafata-2); border: 1px solid var(--linie); overflow: hidden; }
.vocal-nivel span { display: block; height: 100%; width: calc(var(--nivel, 0) * 100%); background: var(--ok); transition: width .08s linear; }
.vocal-text { color: var(--text-mut); }
.vocal-raspuns { font-weight: 650; white-space: pre-wrap; }
.vocal-text:empty, .vocal-raspuns:empty { display: none; }
.vocal-butoane { display: flex; gap: 8px; flex-wrap: wrap; }

/* ——— blocare / legare ——— */
.blocare { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: var(--antet); overflow: auto; }
.blocare-cutie { width: min(100%, 440px); display: grid; gap: 14px; justify-items: stretch; padding: 24px 20px; border-radius: 24px; background: var(--suprafata); color: var(--text); box-shadow: 0 12px 48px rgba(0, 0, 0, .4); text-align: center; }
.blocare-logo { margin: 0 auto; border-radius: 18px; background: #fff; }
.blocare-titlu { font-size: 1.5rem; font-weight: 800; }
.blocare-text { color: var(--text-mut); }
.blocare-cutie .camp-eticheta { text-align: left; }
.splash .blocare-cutie { color: var(--text); }

/* ——— încărcare ——— */
.schelet { display: grid; gap: 12px; margin-top: 12px; }
.schelet-card { height: 150px; border-radius: var(--raza); background: linear-gradient(90deg, var(--suprafata-2), var(--suprafata), var(--suprafata-2)); background-size: 200% 100%; border: 1px solid var(--linie); animation: sclipire 1.4s ease-in-out infinite; }
@keyframes sclipire { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.eroare-lista { display: grid; gap: 12px; padding: 18px; border-radius: var(--raza); background: var(--suprafata); border: 2px solid var(--rosu); }

/* ——— Orizont (#/orizont): o coloană, fără derulare pe lat la 360–375 px; butoane ≥ 44 px; etichetele se rup pe rânduri ——— */
.orizont { min-width: 0; }
.orizont-rezumat { color: var(--text-mut); font-weight: 650; }
.orizont-rezumat:empty { display: none; }
.orizont-banda { border: 1px solid var(--galben-brd); border-radius: var(--raza-mica); }
.orizont-gol, .orizont-incarca { padding: 14px; border-radius: var(--raza); background: var(--suprafata); border: 1px solid var(--linie); color: var(--text); }
.orizont-sectiune { min-width: 0; }
.orizont-grup { display: grid; gap: 8px; margin-top: 14px; min-width: 0; }
.orizont-grup:first-of-type { margin-top: 0; }
.orizont-grup-titlu { font-size: 1rem; font-weight: 800; color: var(--text-mut); }
.orizont-lista { min-width: 0; }
.orizont-rand { min-width: 0; overflow-wrap: anywhere; }
.orizont .card-titlu { font-size: 1.0625rem; }
.orizont-cine, .orizont-explicatie { color: var(--text-mut); font-size: .9375rem; margin: 2px 0; }
.orizont-cine:empty { display: none; }
.orizont-cand { display: flex; align-items: flex-start; gap: 6px; font-weight: 650; margin: 4px 0; min-width: 0; }
.orizont-cand .ico { margin-top: 2px; }
.orizont-cand-intarziat { color: var(--galben); }
.orizont-risc {
  display: flex; align-items: flex-start; gap: 6px; margin: 6px 0; padding: 8px 10px; min-width: 0;
  border-radius: var(--raza-mica); background: var(--galben-fundal); color: var(--galben); font-weight: 650; font-size: .9375rem;
}
.orizont-risc .ico { margin-top: 2px; }
.orizont-linie { margin-top: 6px; }
.orizont .legatura { min-height: 44px; }
.orizont-nota-text { margin: 6px 0; }
.orizont-pachet { display: grid; gap: 10px; margin: 8px 0; min-width: 0; }
.orizont-reper-mic { display: grid; gap: 6px; padding: 10px 12px; min-width: 0; border: 1px dashed var(--camp-brd); border-radius: var(--raza-mica); background: var(--suprafata-2); }
.orizont-reper-mic-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 700; min-width: 0; }
.orizont-reper-mic-titlu { min-width: 0; }
.orizont-reper-mic-data { color: var(--text-mut); font-weight: 600; font-size: .9375rem; }
.orizont-reper-mic-chipuri { display: flex; flex-wrap: wrap; gap: 6px; }
.orizont-reper-mic-chipuri:empty { display: none; }
.orizont-reper-mic .card-butoane { margin-top: 0; }
.orizont-btn { min-height: 48px; min-width: 0; white-space: normal; }
.orizont-btn.btn-text { min-height: 44px; }
.eticheta { display: grid; justify-items: center; min-width: 0; }
.eticheta-rand { display: block; }
.orizont-adauga { margin-top: 20px; }
.orizont-adauga .btn { width: 100%; }
.camp-data { max-width: 220px; }
.orizont-bifa-rand { display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 8px 0; font-weight: 650; cursor: pointer; }
.orizont-bifa { width: 24px; height: 24px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--accent); }
.orizont-bifa-ajutor { display: block; font-weight: 400; }
/* antetul are acum trei iconițe: la 360–380 px se strâng puțin, ca pastila modului să rămână întreagă (runda 2) */
@media (max-width: 380px) {
  .antet { gap: 2px; padding-left: 8px; padding-right: 2px; }
  .antet .btn-icon { width: 44px; height: 44px; }
  .antet-brand { gap: 6px; }
}

/* ——— ecran mai larg (Fold deschis, tabletă, laptop) ——— */
@media (min-width: 700px) {
  .principal { padding-top: 20px; }
  .card-butoane { grid-template-columns: repeat(4, auto); justify-content: start; }
  .card-butoane .btn-primar { grid-column: auto; }
  .card-butoane .btn-text { grid-column: auto; }
  .bara-jos { margin: 4px 0 0; border-radius: var(--raza) var(--raza) 0 0; }
}

/* ——— mișcare redusă ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}