/* Cercetați Scripturile — identitate: EB Garamond pentru text scripturistic
   (suportă greaca politonică), IBM Plex Sans pentru interfață, numere de
   verset în roșu-rubrică (convenția cărților liturgice), grecescul în
   albastru închis, accent auriu discret. Temă luminoasă și întunecată. */

:root {
  --fond: #faf6ee;
  --fond-panou: #ffffff;
  --fond-ridicat: #f1ead9;
  --text: #2a241c;
  --text-slab: #6b6152;
  --margine: #ddd2ba;
  --rubrica: #a3222f;
  --greaca: #1f3565;
  --auriu: #96721f;
  --accent: #6b3f2a;
  --accent-fond: #f4e9d8;
  --eroare: #b3261e;
  --umbra: 0 2px 10px rgba(60, 45, 20, .08);
  --raza: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #17140f;
    --fond-panou: #211c15;
    --fond-ridicat: #2a231a;
    --text: #ecE3d2;
    --text-slab: #a99d86;
    --margine: #3a3224;
    --rubrica: #e0656f;
    --greaca: #8fa8e0;
    --auriu: #d3ab5c;
    --accent: #c99a6c;
    --accent-fond: #332a1c;
    --eroare: #ff8a80;
    --umbra: 0 2px 14px rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  --fond: #17140f;
  --fond-panou: #211c15;
  --fond-ridicat: #2a231a;
  --text: #ecE3d2;
  --text-slab: #a99d86;
  --margine: #3a3224;
  --rubrica: #e0656f;
  --greaca: #8fa8e0;
  --auriu: #d3ab5c;
  --accent: #c99a6c;
  --accent-fond: #332a1c;
  --eroare: #ff8a80;
  --umbra: 0 2px 14px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--text);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
h1, h2, h3 { font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight: 600; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* ⚠️ LISTA UNUI `select` NU MOȘTENEȘTE TEMA PAGINII. Windows o desenează pe fond
   ALB, oricât de întunecată ar fi pagina; iar fiindcă `option` ia culoarea de la
   `select` — crem deschis, pe tema de noapte —, ieșea scris alb pe alb: la
   crearea unui cont, rolurile („membru", „coordonator") nu se puteau citi.
   Culorile se scriu aici pe îndelete, nu se moștenesc. Merg pe amândouă temele:
   fondul ferestrei e închis noaptea, alb ziua, iar scrisul urmează după el. */
select option, select optgroup {
  background: var(--fond-panou); color: var(--text);
}
/* ⚠️ ȘI CASETA ÎNCHISĂ TREBUIE ÎMBRĂCATĂ, nu doar lista care se deschide. Cu
   `option` colorat dar `select` lăsat în seama sistemului, ce scrie în casetă —
   rolul ales — ieșea spălăcit pe fondul întunecat: Cristi alegea
   „administrator" și nu-l vedea. Culorile se scriu aici, pe îndelete, pentru
   toate casetele, nu doar pentru cele din antet. */
select {
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--margine);
  background: var(--fond); color: var(--text);
}
select:disabled { opacity: .6; cursor: default; }
a { color: var(--greaca); }

[hidden] { display: none !important; }

/* ── antet ─────────────────────────────────────────────────────────── */
.antet {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: var(--fond-panou);
  border-bottom: 1px solid var(--margine);
  position: sticky; top: 0; z-index: 20;
}
.antet__sigla { font-family: "EB Garamond", serif; font-size: 21px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.antet__sigla small { display: block; font-family: "IBM Plex Sans", sans-serif; font-size: 10px; font-weight: 400; color: var(--text-slab); letter-spacing: .04em; }
.antet__spatiu { flex: 1; }
.antet select {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--margine);
  background: var(--fond); color: var(--text);
}
.buton {
  padding: 7px 13px; border-radius: 8px; border: 1px solid var(--margine);
  background: var(--fond); color: var(--text); cursor: pointer;
}
.buton:hover { background: var(--fond-ridicat); }
.buton--plin { background: var(--accent); border-color: var(--accent); color: var(--fond-panou); }
.buton--plin:hover { opacity: .9; }
.buton--mic { padding: 4px 9px; font-size: 13px; border-radius: 6px; }
.buton--text { border: none; background: none; padding: 4px 6px; text-decoration: underline; color: var(--text-slab); }
.buton-icon {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--margine); background: var(--fond); cursor: pointer;
}

/* ── navigare principala ──────────────────────────────────────────── */
.file-principale { display: flex; gap: 4px; padding: 0 16px; background: var(--fond-panou); border-bottom: 1px solid var(--margine); }
.fila {
  padding: 10px 14px; border: none; background: none; color: var(--text-slab);
  cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500;
}
.fila.activa { color: var(--accent); border-bottom-color: var(--accent); }

/* ── continut ─────────────────────────────────────────────────────── */
.continut { display: flex; height: calc(100vh - 96px); overflow: hidden; }

/* Grilă, nu coloane independente — celulele aceluiași verset stau pe același
   rând, deci versetul 5 e la aceeași înălțime în ambele limbi. */
.coloane {
  flex: 1; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(var(--nr-coloane, 2), 1fr);
  align-content: start;
}
.cap-coloana {
  position: sticky; top: 0; z-index: 5;
  padding: 14px 26px 10px;
  background: var(--fond);
  border-bottom: 1px solid var(--margine);
  border-right: 1px solid var(--margine);
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-slab);
}
.cap-coloana:last-of-type { border-right: none; }

.celula { padding: 4px 26px; border-right: 1px solid var(--margine); min-width: 0; }
.celula__eticheta { display: none; }

.verset { margin: 6px 0 12px; font-family: "EB Garamond", serif; font-size: 20px; line-height: 1.65; }
.verset__nr { color: var(--rubrica); font-weight: 600; font-size: 15px; margin-right: 5px; user-select: none; cursor: pointer; }
.verset__nr:hover { text-decoration: underline; }
.verset--lipsa { color: var(--text-slab); font-style: italic; font-size: 15px; font-family: "IBM Plex Sans", sans-serif; }

.celula--greaca .verset { color: var(--greaca); }
.cuv {
  cursor: pointer; border-radius: 4px; padding: 0 1px;
}
.cuv:hover { background: var(--accent-fond); }
.cuv.selectat { background: var(--auriu); color: var(--fond-panou); }
.cuv.evidentiat { background: var(--accent-fond); text-decoration: underline dotted var(--auriu); }

/* ── panou lateral ────────────────────────────────────────────────── */
.panou {
  width: 360px; flex-shrink: 0; background: var(--fond-panou);
  border-left: 1px solid var(--margine); display: flex; flex-direction: column;
}
.panou__file { display: flex; border-bottom: 1px solid var(--margine); }
.panou__file button {
  flex: 1; padding: 11px 6px; border: none; background: none; color: var(--text-slab);
  cursor: pointer; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500;
}
.panou__file button.activa { color: var(--accent); border-bottom-color: var(--accent); }
/* Punctul de pe fila „Părinți": versetul de sub deget are tâlcuiri de citit.
   Roșu de rubrică — culoarea cu care sunt scrise numerele versetelor, deci
   ochiul o cunoaște deja de pe pagină. Mic: e o vestire, nu o alarmă. */
.panou__file button.are-de-citit { position: relative; }
.panou__file button.are-de-citit::after {
  content: ""; position: absolute; top: 8px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rubrica);
}
.panou__inchide { display: none; flex: 0 0 44px !important; font-size: 16px; }
.panou__corp { flex: 1; overflow-y: auto; padding: 16px; }
.panou__gol { color: var(--text-slab); font-size: 14px; text-align: center; margin-top: 40px; }

.cuvant-detaliu__forma { font-family: "EB Garamond", serif; font-size: 30px; color: var(--greaca); margin: 0 0 2px; }
.cuvant-detaliu__lema { color: var(--text-slab); font-size: 14px; margin-bottom: 14px; }
/* ⚠️ Rândurile se pun UNUL SUB ALTUL, nu față în față. Cât timp morfologia era
   englezește — „2nd pres mid impv pl" — încăpea pe un rând lângă etichetă. În
   românește e de trei ori mai lungă, „persoana a II-a, prezent, activ,
   indicativ, plural", iar cu `space-between` se lipea de etichetă și se rupea
   urât: „Morfologiepersoana a II-a…". Panoul e îngust; eticheta deasupra,
   valoarea dedesubt, e singura așezare care ține la orice lungime. */
.cuvant-detaliu__rand { padding: 7px 0; border-bottom: 1px solid var(--margine); font-size: 13px; }
.cuvant-detaliu__rand span:first-child { display: block; color: var(--text-slab); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.cuvant-detaliu__rand span:last-child { display: block; }
.cuvant-detaliu__glosa { margin-top: 10px; padding: 10px; background: var(--fond-ridicat); border-radius: 8px; font-size: 13px; }
.cuvant-detaliu__glosa em { color: var(--text-slab); font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
/* pe câte versete se sprijină cuvântul — cine vrea, poate verifica */
.cuvant-detaliu__temei { display: block; margin-top: 4px; color: var(--text-slab); font-size: 11px; font-style: italic; }
/* Înțelesul din dicționar se deosebește de cuvintele măsurate din Sinodala
   printr-un fir auriu la margine — unul e spus de lexicografi, celălalt e aflat
   din texte; cine citește trebuie să vadă din capul locului care e care. */
.cuvant-detaliu__glosa--dictionar { border-left: 3px solid var(--auriu); }

.aparitii__titlu { font-size: 12px; text-transform: uppercase; color: var(--text-slab); margin: 18px 0 8px; letter-spacing: .04em; }
.aparitii__lista { display: flex; flex-wrap: wrap; gap: 6px; }
.aparitie {
  font-family: "EB Garamond", serif; font-size: 15px; color: var(--greaca);
  background: var(--fond-ridicat); padding: 3px 8px; border-radius: 6px; cursor: pointer;
}
.aparitie:hover { background: var(--accent-fond); }

.parinti-gol, .note-gol { color: var(--text-slab); font-size: 13px; text-align: center; margin-top: 30px; }

.nota { background: var(--fond-ridicat); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.nota__antet { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-slab); margin-bottom: 5px; }
.nota__viz { text-transform: uppercase; letter-spacing: .03em; }
.nota__text { font-size: 14px; white-space: pre-wrap; }
.nota__actiuni { margin-top: 6px; display: flex; gap: 10px; }
.nota-noua textarea {
  width: 100%; min-height: 70px; padding: 9px; border-radius: 8px; border: 1px solid var(--margine);
  background: var(--fond); resize: vertical;
}
.nota-noua__bara { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

/* ── autentificare ────────────────────────────────────────────────── */
/* Ecranul de intrare poartă cuvântul de la care se cheamă aplicația: Ioan 5,
   39, în grecește deasupra și în românește dedesubt. Ales de Cristi din șase
   variante, 04.09.2026.

   ⚠️ SE AȘAZĂ ÎN STIVĂ, nu unul peste altul. Prima încercare punea grecescul
   ca filigran în spatele casetei, a doua îl trecea peste ea — și acolo cădea
   tocmai peste eticheta „Parolă". Cu poziții absolute, se ciocneau la orice
   altă înălțime de fereastră. Stiva ține la orice ecran și pe orice telefon. */
.ecran-login {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: min(5vh, 44px); padding: 4vh 4vw;
  background: linear-gradient(165deg, #f8f2e6, var(--fond) 50%, #ece2cf);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ecran-login {
    background: linear-gradient(165deg, #1c1812, var(--fond) 50%, #100e0a);
  }
}
:root[data-theme="dark"] .ecran-login {
  background: linear-gradient(165deg, #1c1812, var(--fond) 50%, #100e0a);
}
.login-grec {
  font-family: "EB Garamond", serif; line-height: 1; white-space: nowrap;
  font-size: clamp(26px, 9vw, 150px); max-width: 96vw;
  color: var(--greaca); opacity: .22; letter-spacing: .02em;
  user-select: none; pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login-grec { opacity: .32; }
}
:root[data-theme="dark"] .login-grec { opacity: .32; }
.login-verset {
  font-family: "EB Garamond", serif; font-style: italic; text-align: center;
  font-size: clamp(13px, 1.5vw, 17px); color: var(--text-slab); max-width: 90vw;
}
.card-login {
  width: min(360px, 90vw); background: var(--fond-panou); border: 1px solid var(--margine);
  border-radius: var(--raza); padding: 30px 26px; box-shadow: var(--umbra);
}
.card-login h1 { font-family: "EB Garamond", serif; font-size: 26px; margin: 0 0 4px; color: var(--accent); }
.card-login p { color: var(--text-slab); font-size: 13px; margin: 0 0 22px; }
.camp { margin-bottom: 14px; }
.camp label { display: block; font-size: 12px; color: var(--text-slab); margin-bottom: 5px; }
.camp input {
  width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--margine); background: var(--fond);
}
.eroare-login { color: var(--eroare); font-size: 13px; margin: 10px 0 0; min-height: 18px; }

/* ── pagina cercului ──────────────────────────────────────────────── */
.pagina-cerc { flex: 1; overflow-y: auto; padding: 26px; max-width: 760px; margin: 0 auto; width: 100%; }
.intalnire-card {
  background: var(--fond-panou); border: 1px solid var(--margine); border-radius: var(--raza);
  padding: 18px 20px; margin-bottom: 16px;
}
.intalnire-card__data { color: var(--rubrica); font-weight: 600; font-size: 13px; text-transform: uppercase; }
.intalnire-card__tema { font-family: "EB Garamond", serif; font-size: 21px; margin: 6px 0; }
.intalnire-card__text-pornire { color: var(--greaca); font-family: "EB Garamond", serif; font-style: italic; }
.intalnire-card__detalii { color: var(--text-slab); font-size: 13px; margin-top: 8px; }

/* ── subsol ───────────────────────────────────────────────────────── */
.subsol {
  padding: 8px 16px; font-size: 11px; color: var(--text-slab);
  border-top: 1px solid var(--margine); background: var(--fond-panou);
}

/* ── mobil ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Antetul se așază pe două rânduri, altfel selectoarele și butoanele ies
     din ecran pe telefon. */
  /* Două rânduri: sigla + butoane sus, selectoarele dedesubt pe toată lățimea.
     Altfel „Ioan" se strânge până rămâne „I". `.antet__spatiu` devine ruptura
     de rând — lățime 100%, înălțime 0. */
  .antet { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
  .antet__sigla { font-size: 18px; order: 1; flex: 1 1 auto; }
  .antet__sigla small { display: none; }
  #comuta-tema { order: 2; }
  #buton-iesire { order: 3; }
  .antet__spatiu { order: 4; flex: 0 0 100%; height: 0; }
  #sel-carte { order: 5; flex: 1 1 auto; min-width: 0; }
  /* „capitolul 5" nu încape în 84 de puncte; se lasă cât îi trebuie. */
  #sel-capitol { order: 6; flex: 0 1 auto; min-width: 0; }
  /* ⚠️ Fiecare lucru nou din antet are nevoie de rândul lui AICI. Fără `order`,
     caseta versetului a sărit înaintea siglei, pe primul rând — regula de mobil
     rânduiește totul după `order`, iar ce nu e numit rămâne la zero, adică
     înaintea tuturor. */
  #sel-verset { order: 7; flex: 0 1 auto; min-width: 0; }
  .alege-texte { order: 8; }
  #nume-utilizator { display: none; }
  .file-principale { padding: 0 12px; }

  /* O singură coloană: celulele se așază intercalat, în ordinea din DOM —
     versetul 1 românește, versetul 1 grecește, versetul 2 românește… */
  .coloane { grid-template-columns: 1fr; }
  .cap-coloana { display: none; }
  .celula { border-right: none; padding: 2px 16px; }
  .celula--greaca { padding-bottom: 12px; }
  .celula__eticheta {
    display: block; font-size: 10px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-slab); margin-top: 8px;
  }
  /* linie de despărțire între versete, nu între limbi */
  .celula--rand-nou:not(.celula--greaca) {
    border-top: 1px solid var(--margine); margin-top: 6px; padding-top: 8px;
  }
  .verset { font-size: 19px; margin: 2px 0 6px; }

  .panou {
    position: fixed; inset: auto 0 0 0; width: auto; height: 70vh;
    border-left: none; border-top: 1px solid var(--margine);
    border-radius: 16px 16px 0 0; box-shadow: var(--umbra);
    transform: translateY(100%); transition: transform .2s ease; z-index: 30;
  }
  .panou.deschis { transform: translateY(0); }
  .panou__inchide { display: block; }
}

/* apariția din versetul pe care stai acum — ca să nu cauți printre ele */
.aparitie--aici { background: var(--auriu); color: var(--fond-panou); font-weight: 600; }

/* ── secțiuni în cardul întâlnirii ────────────────────────────────── */
.sectiune-mica { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--margine); }
.sectiune-mica__titlu { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-slab); margin-bottom: 8px; }
.gol-mic { color: var(--text-slab); font-size: 13px; margin: 4px 0; }
.lista-participanti { display: flex; flex-wrap: wrap; gap: 6px; }
.participant { background: var(--fond-ridicat); padding: 3px 10px; border-radius: 12px; font-size: 13px; }
.lista-materiale { list-style: none; padding: 0; margin: 0 0 10px; }
.lista-materiale li { padding: 5px 0; font-size: 14px; display: flex; gap: 10px; align-items: center; }
.incarca-material { display: inline-block; cursor: pointer; }
.stare-incarcare { font-size: 12px; color: var(--text-slab); margin-left: 8px; }

/* ── dialogul de schimbare a parolei ──────────────────────────────── */
#dialog-parola { border: 1px solid var(--margine); border-radius: var(--raza); padding: 0; background: var(--fond-panou); color: var(--text); box-shadow: var(--umbra); }
#dialog-parola::backdrop { background: rgba(0,0,0,.4); }
.card-parola { padding: 24px; width: min(340px, 90vw); }
#nume-utilizator { cursor: pointer; font-size: 13px; }

/* ── comentariile Părinților ──────────────────────────────────────── */
.comentariu { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--margine); }
.comentariu:last-child { border-bottom: none; }
.comentariu__autor { font-family: "EB Garamond", serif; font-size: 17px; color: var(--accent); font-weight: 600; }
.comentariu__opera { font-size: 12px; color: var(--text-slab); font-style: italic; margin-bottom: 8px; }
.comentariu__text { font-family: "EB Garamond", serif; font-size: 16px; line-height: 1.6; white-space: pre-wrap; }
.comentariu__subsol { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--text-slab); }
.comentariu__eticheta { background: var(--fond-ridicat); padding: 1px 7px; border-radius: 8px; text-transform: uppercase; letter-spacing: .04em; }
/* Tălmăcirea de lucru poartă un chenar, nu un fond: se vede că e o rezervă, nu
   o carte tipărită, dar nu strigă. Originalul stă dedesubt, strâns, până la
   apăsare — cine citează trebuie să-l poată vedea fără să iasă din pagină. */
.comentariu__eticheta--talmacire { background: none; border: 1px solid var(--auriu); color: var(--auriu); }
.comentariu__original {
  margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--margine);
  background: var(--fond-ridicat); border-radius: 0 8px 8px 0;
  font-size: 13px; color: var(--text-slab); font-style: italic;
}
.comentariu__original-titlu {
  font-style: normal; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-slab); margin-bottom: 4px;
}
.comentariu--strain .comentariu__text { font-size: 15px; color: var(--text-slab); }
/* Lămurirea despre capitolul întreg stă deasupra, într-un chenar al ei, ca să
   nu pară că răspunde vreunui comentariu pe verset. */
.comentariu--capitol { background: var(--fond-ridicat); border-radius: 8px; padding: 12px 14px; border-bottom: none; }
.comentariu__inainte { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-slab); margin-bottom: 6px; }
.comentariu__mai-mult { display: block; margin-top: 6px; font-size: 12px; padding-left: 0; }

/* ── alegerea coloanelor ──────────────────────────────────────────── */
.alege-texte { position: relative; }
.alege-texte summary { list-style: none; cursor: pointer; }
.alege-texte summary::-webkit-details-marker { display: none; }
.alege-texte__lista {
  position: absolute; top: 34px; left: 0; z-index: 40; min-width: 250px;
  background: var(--fond-panou); border: 1px solid var(--margine);
  border-radius: var(--raza); box-shadow: var(--umbra); padding: 10px;
}
.alege-texte__rand { display: flex; gap: 8px; align-items: center; padding: 5px 2px; font-size: 13px; cursor: pointer; }
/* textul bifat care n-are cartea deschisă — bifa rămâne, dar se vede de ce
   nu iese coloană; altfel bifezi patru și vezi trei, fără nicio lămurire */
.alege-texte__rand--lipsa span { color: var(--text-slab); }
/* Rândul stins nu mai primește clic: bifa e oprită, iar rândul întreg arată
   asta. Altfel preotul apasă și nu se întâmplă nimic. */
.alege-texte__rand--lipsa { cursor: default; opacity: .65; }
.alege-texte__lipsa { margin-left: auto; font-size: 11px; font-style: normal; color: var(--text-slab); background: var(--fond-ridicat); padding: 1px 7px; border-radius: 8px; white-space: nowrap; }

/* ── ecranul de conturi ─────────────────────────────────────────────── */
.cont {
  border: 1px solid var(--margine); border-radius: var(--raza);
  padding: 12px 14px; margin-bottom: 10px; background: var(--fond-panou);
}
/* Un cont blocat se vede blocat de la o poștă, dar nu se stinge de tot:
   omul e tot acolo, cu notele lui — doar nu mai intră. */
.cont--blocat { opacity: .72; border-style: dashed; }
.cont__antet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cont__rand { color: var(--text-slab); font-size: 13px; margin-top: 4px; }
.cont__semn {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 8px; border-radius: 8px;
  border: 1px solid var(--auriu); color: var(--auriu);
}
.cont__semn--blocat { border-color: var(--eroare); color: var(--eroare); }
.cont__unelte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.buton--rau { border-color: var(--eroare); color: var(--eroare); }
.buton--rau:hover:not(:disabled) { background: var(--eroare); color: var(--fond-panou); }
.buton:disabled { opacity: .45; cursor: default; }

/* Cheia dată o singură dată. Stă sus, în chenar auriu, și nu pleacă de acolo
   până nu spune omul că a notat-o — parola nu se mai poate afla după aceea. */
.cheia {
  border: 2px solid var(--auriu); border-radius: var(--raza);
  padding: 14px; margin-bottom: 14px; background: var(--accent-fond);
}
.cheia__titlu {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-slab);
}
.cheia__parola {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 22px; font-weight: 600; letter-spacing: .04em;
  margin: 6px 0; user-select: all; color: var(--text);
}

/* Semnătura casei: la subsol și sub cuvântul Scripturii, scrisă mărunt.
   Aplicația se deschide cu Ioan 5, 39, nu cu o firmă — dar cine caută să
   afle cine a făcut-o, află. */
.subsol { text-align: center; }
.subsol__atribuiri { text-align: left; }
/* Aceeași față ca semnătura de pe ecranul de intrare: sigla mare la stânga,
   numele auriu pe rândul lui, meseria dedesubt. Cerut de Cristi pe 05.09.2026
   — două locuri, o singură înfățișare. */

/* Semnătura cu siglă: sigla la stânga, cele două rânduri la dreapta. Toată
   bucata e o singură legătură, ca să se poată apăsa oriunde pe ea. */
/* ── semnătura casei ──────────────────────────────────────────────────
   ⚠️ MARCA E COPIATĂ ÎNTOCMAI DE PE AVVACONT.RO, din CSS-ul lui `.nav-logo`.
   Greșeala dintâi a fost că m-am oprit la siglă: pe site NUMELE FACE PARTE DIN
   LOGO — „Avva" alb, „Cont" auriu, cu Playfair Display 800 —, iar sigla stă
   într-un pătrat alb rotunjit. Scris cu altă literă și tot auriu, nu mai era
   marca lui, ci ceva care semăna cu ea.

   ⚠️ MARCA STĂ PE FOND ÎNCHIS, ÎN AMÂNDOUĂ TEMELE. „Avva" e alb pe site,
   fiindcă acolo bara e albastru-închis. La noi, pe tema luminoasă, albul ar
   pieri; de aceea marca își poartă fondul ei, albastrul mărcii (#0f2a4a) —
   așa arată la fel oriunde, și ziua, și noaptea. */
.login-semnatura, .subsol__semnatura {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-slab); text-decoration: none;
  padding: 10px 16px; border: 1px solid var(--margine); border-radius: var(--raza);
}
.login-semnatura { margin-top: 20px; }
.subsol__semnatura { margin-top: 12px; }
.login-semnatura:hover, .subsol__semnatura:hover { background: rgba(255, 255, 255, .04); }
.semnatura__sus {
  display: block; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; opacity: .7; text-align: center;
}

/* marca, întocmai ca pe site */
.marca {
  display: flex; align-items: center; gap: 10px;
  background: #0f2a4a; padding: 8px 14px 8px 8px; border-radius: 12px;
}
.marca__scut {
  width: 46px; height: 46px; min-width: 46px; background: #ffffff;
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.marca__scut img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.marca__text { text-align: left; }
.marca__nume {
  display: block; font-family: "Playfair Display", Georgia, serif;
  font-size: 22px; font-weight: 800; color: #ffffff; line-height: 1;
}
.marca__nume span { color: #c9a227; }
.marca__sub {
  display: block; font-size: 11px; color: rgba(255, 255, 255, .42);
  font-style: italic; letter-spacing: .03em; margin-top: 3px;
  font-family: "IBM Plex Sans", sans-serif;
}

/* Numărul adevărat al versetului în ediția coloanei, când e altul decât al
   Sinodalei: „Anania 4, 1" sub Sinodala 3, 31. Mic și stins, după număr — e o
   lămurire, nu text de citit; dar trebuie să se vadă, ca să se poată cita. */
.verset__de-la {
  font-family: "IBM Plex Sans", sans-serif; font-size: 11px; font-style: normal;
  color: var(--text-slab); margin-left: 6px; vertical-align: middle;
  border: 1px solid var(--margine); border-radius: 6px; padding: 0 5px;
}
/* Un verset al Ananiei fără pereche în Sinodală stă la coada capitolului, cu
   numărul lui și cu asteriscul care îl deosebește — nu se ascunde, nu se pune
   pe ghicite lângă un verset care nu e al lui. */
.verset--fara-pereche { opacity: .85; }
.verset--fara-pereche .verset__de-la { border-color: var(--auriu); color: var(--auriu); }

/* Adresa de e-mail, la coada rândului de cont: e numele de utilizator, deci
   trebuie să se poată citi și copia, dar nu stă lângă nume. */
.cont__adresa { font-size: 12px; opacity: .75; user-select: all; }

/* Contul de temelie, când și-l vede stăpânul lui: numai numele, stins.
   Nu e un om din Cerc, e o cheie tehnică — și nu se poate face nimic cu el
   de aici, nici de către el însuși. */
.cont--temelie { opacity: .6; border-style: dashed; }