/* wivo.ro — foaia de stil. Ideea vizuală: „linia de total” — linia simplă, apoi linia dublă
   care în contabilitate înseamnă „închis, definitiv”. Apare sub siglă, sub titluri, sub câmpul
   de e-mail la focalizare, sub butoane la trecerea cu mouse-ul, sub totalul facturii din machetă
   și ca „total” al paginii, deasupra subsolului. Fără biblioteci, fără resurse de la terți. */

@import url("/fonturi/fonturi.css");

/* ------------------------------------------------------------------ token-uri */
:root {
  color-scheme: light dark;

  --fond: #F4F5F7;
  --suprafata: #FFFFFF;
  --suprafata-2: #EBEDF1;
  --text: #0E1424;
  --secundar: #5B6472;
  --linie: #D5D9E0;
  --linie-slaba: #E6E9EE;
  --accent: #1E40C9;
  --accent-apasat: #17339F;
  --pe-accent: #FFFFFF;
  --invers-fond: #0E1424;
  --invers-text: #ECEEF3;
  --invers-secundar: #A2A9B8;
  --invers-linie: #2A3247;

  --atentie: #C77D0A;  --atentie-text: #7A4B04;  --atentie-fond: #FBF1DF;
  --ok: #157A4A;       --ok-text: #0F5E38;       --ok-fond: #E1F2E8;
  --alerta: #B93A2E;   --alerta-text: #932A20;   --alerta-fond: #F9E6E3;

  --afisare: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --text-font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --t-mare:   clamp(2.125rem, 1.35rem + 2.7vw, 3.8125rem);  /* 34 → 61 */
  --t-titlu:  clamp(1.75rem, 1.25rem + 1.45vw, 2.4375rem);  /* 28 → 39 */
  --t-sub:    clamp(1.375rem, 1.2rem + .5vw, 1.5625rem);    /* 22 → 25 */
  --t-mediu:  1.25rem;                                      /* 20 */
  --t-text:   1.125rem;                                     /* 18 */
  --t-mic:    .9375rem;                                     /* 15 */
  --t-eticheta: .8125rem;                                   /* 13 */

  --gutter: clamp(16px, 4vw, 56px);
  --latime: 1240px;
  --raza: 6px;
  --tranzitie: 160ms ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0B1020;
    --suprafata: #111831;
    --suprafata-2: #182040;
    --text: #ECEEF3;
    --secundar: #9AA3B2;
    --linie: #232A3D;
    --linie-slaba: #1B2236;
    --accent: #7D96FF;
    --accent-apasat: #9DB0FF;
    --pe-accent: #0B1020;
    --invers-fond: #111831;
    --invers-text: #ECEEF3;
    --invers-secundar: #9AA3B2;
    --invers-linie: #2A3450;
    --atentie: #E7A33A;  --atentie-text: #F2C572;  --atentie-fond: #2B2110;
    --ok: #4CC08A;       --ok-text: #7DD9AC;       --ok-fond: #0F2B1F;
    --alerta: #F07A6B;   --alerta-text: #F6A197;   --alerta-fond: #331714;
  }
}
:root[data-theme="dark"] {
  --fond: #0B1020; --suprafata: #111831; --suprafata-2: #182040; --text: #ECEEF3; --secundar: #9AA3B2;
  --linie: #232A3D; --linie-slaba: #1B2236; --accent: #7D96FF; --accent-apasat: #9DB0FF; --pe-accent: #0B1020;
  --invers-fond: #111831; --invers-text: #ECEEF3; --invers-secundar: #9AA3B2; --invers-linie: #2A3450;
  --atentie: #E7A33A; --atentie-text: #F2C572; --atentie-fond: #2B2110;
  --ok: #4CC08A; --ok-text: #7DD9AC; --ok-fond: #0F2B1F;
  --alerta: #F07A6B; --alerta-text: #F6A197; --alerta-fond: #331714;
}

/* ------------------------------------------------------------------ bază */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--text);
  font-family: var(--text-font);
  font-size: var(--t-text);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--afisare); font-weight: 650; line-height: 1.08; letter-spacing: -.022em; text-wrap: balance; }
h1 { font-size: var(--t-mare); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; font-variation-settings: "opsz" 96; }
h2 { font-size: var(--t-titlu); font-variation-settings: "opsz" 60; }
h3 { font-size: var(--t-sub); letter-spacing: -.012em; font-variation-settings: "opsz" 24; }
h4 { font-size: var(--t-mediu); font-family: var(--text-font); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
p { margin: 0; }
p + p { margin-top: 1em; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { color: var(--accent-apasat); }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }
small { font-size: var(--t-mic); }
svg { display: block; }
figure { margin: 0; }
img { max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--pe-accent); }

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

.vizual-ascuns { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sari {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--text); color: var(--fond); padding: 10px 14px; text-decoration: none; border-radius: var(--raza);
}
.sari:focus { top: 12px; }

.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.eticheta {
  font-family: var(--mono); font-size: var(--t-eticheta); letter-spacing: .08em; text-transform: uppercase;
  color: var(--secundar); line-height: 1.4;
}
.secundar { color: var(--secundar); }
.cifre { font-variant-numeric: tabular-nums; }

/* linia de total: o linie, apoi linia dublă */
.total-linie { position: relative; display: block; height: 7px; border-top: 1px solid currentColor; }
.total-linie::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid currentColor; }
.total-linie.accent { color: var(--accent); }

.container { width: min(var(--latime), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ------------------------------------------------------------------ antet */
.antet {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}
.antet .container { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.sigla { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; }
.sigla svg { width: 92px; height: auto; }
.sigla .cuv { stroke: currentColor; }
.sigla .cuv-punct { fill: currentColor; }
.sigla .linii { stroke: var(--accent); }
.nav { display: none; gap: 28px; margin-left: 24px; }
.nav a { color: var(--text); text-decoration: none; font-size: var(--t-mic); font-weight: 500; position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); opacity: 0; transition: opacity var(--tranzitie); }
.nav a:hover::after, .nav a[aria-current="page"]::after { opacity: 1; }
.antet .buton { margin-left: auto; }
@media (min-width: 900px) { .nav { display: flex; } }

/* ------------------------------------------------------------------ butoane */
.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px;
  background: var(--accent); color: var(--pe-accent);
  border: 1px solid var(--accent); border-radius: var(--raza);
  font-weight: 600; font-size: var(--t-mic); letter-spacing: .005em; text-decoration: none; cursor: pointer;
  position: relative; white-space: nowrap;
  transition: background var(--tranzitie), border-color var(--tranzitie), transform var(--tranzitie);
}
.buton::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 7px; height: 4px;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: 0; transition: opacity var(--tranzitie);
}
.buton:hover { background: var(--accent-apasat); border-color: var(--accent-apasat); color: var(--pe-accent); }
.buton:hover::after { opacity: .9; }
.buton:active { transform: translateY(1px); }
.buton:disabled { opacity: .6; cursor: progress; }
.buton.secundar-buton { background: transparent; color: var(--text); border-color: var(--linie); }
.buton.secundar-buton:hover { background: var(--suprafata); border-color: var(--text); color: var(--text); }
.buton.secundar-buton::after { border-color: var(--accent); }
.antet .buton { min-height: 40px; padding: 0 16px; }

/* ------------------------------------------------------------------ erou */
.erou { padding-block: clamp(40px, 7vw, 96px) clamp(48px, 7vw, 104px); }
.erou .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
.erou .container > * { min-width: 0; }
@media (min-width: 1024px) {
  .erou .container { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 88px); }
}
.erou-text { display: flex; flex-direction: column; gap: 28px; max-width: 42rem; }
.insemn { display: inline-flex; align-items: center; gap: 14px; }
.insemn .total-linie { width: 36px; color: var(--accent); flex: none; }
.erou h1 { max-width: 13ch; }
.erou .conducere { font-size: var(--t-mediu); color: var(--secundar); max-width: 36rem; line-height: 1.55; }
.erou .conducere strong { color: var(--text); font-weight: 500; }
@media (max-width: 479px) { .erou .conducere, .intro { font-size: var(--t-text); } }
.microtext { font-size: var(--t-mic); color: var(--secundar); }

/* ------------------------------------------------------------------ formular */
.formular { display: flex; flex-direction: column; gap: 16px; }
.formular .camp { display: flex; flex-direction: column; gap: 8px; }
.formular label.camp-eticheta { font-weight: 500; font-size: var(--t-mic); }
.rand-camp { display: grid; gap: 12px; }
@media (min-width: 560px) { .rand-camp { grid-template-columns: minmax(0, 1fr) auto; } }
.formular input[type="email"] {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--suprafata); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--raza);
  transition: border-color var(--tranzitie), box-shadow var(--tranzitie);
}
.formular input[type="email"]::placeholder { color: var(--secundar); opacity: .8; }
.formular input[type="email"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 3px 0 -1px var(--fond), 0 3px 0 0 var(--accent), 0 6px 0 -1px var(--fond), 0 6px 0 0 var(--accent); }
.formular input[type="email"][aria-invalid="true"] { border-color: var(--alerta); }
.bifa { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--t-mic); color: var(--secundar); line-height: 1.5; }
.bifa input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }
.bifa a { color: var(--text); }
.mesaj { display: none; padding: 12px 14px; border-radius: var(--raza); font-size: var(--t-mic); border: 1px solid var(--linie); background: var(--suprafata); }
.mesaj.eroare { display: block; border-color: var(--alerta); color: var(--alerta-text); background: var(--alerta-fond); }
.mesaj.ok { display: block; border-color: var(--ok); color: var(--ok-text); background: var(--ok-fond); }
.formular .confirmare { display: none; padding: 24px; border: 1px solid var(--ok); background: var(--ok-fond); color: var(--ok-text); border-radius: var(--raza); }
.formular.trimis .confirmare { display: block; }
.formular.trimis .camp, .formular.trimis .rand-camp, .formular.trimis .bifa, .formular.trimis .mesaj { display: none; }
.confirmare p { color: inherit; font-size: var(--t-mic); }
.confirmare .titlu-confirmare { font-family: var(--afisare); font-weight: 650; line-height: 1.08; letter-spacing: -.012em; font-size: var(--t-sub); margin-bottom: 8px; font-variation-settings: "opsz" 24; }
.capcana { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* pe telefon: câmp → bifă → buton, ca acordul să fie văzut înaintea butonului (pe desktop butonul stă lângă câmp) */
@media (max-width: 559px) {
  .formular:not(.trimis) .camp, .formular:not(.trimis) .rand-camp { display: contents; }
  .formular .camp-eticheta { order: 1; }
  .formular input[type="email"] { order: 2; margin-top: -8px; }
  .formular .bifa { order: 3; }
  .formular .mesaj { order: 4; }
  .formular .buton { order: 5; }
  .formular .confirmare { order: 6; }
  .formular .microtext { order: 7; }
}

/* ------------------------------------------------------------------ hârtia facturii (machetă erou) */
.hartie-cadru { position: relative; padding: 0 0 14px 0; margin: 0; }
@media (max-width: 1023px) { .hartie-cadru { max-width: 560px; } }
@media (max-width: 479px) { .hartie { padding: 18px 16px; } .hartie-cap .firma { font-size: 15px; } .hartie th.n, .hartie td.n { padding-left: 8px; } }
.hartie {
  /* factura e un obiect fizic: rămâne hârtie albă și în tema întunecată (token-urile sunt suprascrise local) */
  color-scheme: light;
  --suprafata: #FFFFFF; --text: #0E1424; --secundar: #5B6472; --linie: #D5D9E0; --linie-slaba: #E6E9EE;
  --ok-text: #0F5E38; --ok-fond: #E1F2E8; --alerta: #B93A2E;
  position: relative;
  background: var(--suprafata); color: var(--text);
  border: 1px solid var(--linie); border-radius: 3px;
  padding: clamp(20px, 3vw, 32px);
  font-size: 12px; line-height: 1.45;
  box-shadow: 10px 10px 0 -1px var(--fond), 10px 10px 0 0 var(--linie);
}
.hartie .eticheta { font-size: 10px; letter-spacing: .1em; }
.hartie-cap { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--linie); }
.hartie-cap .firma { font-family: var(--afisare); font-weight: 700; font-size: 17px; letter-spacing: -.02em; line-height: 1.1; }
.hartie-cap .firma small { display: block; font-family: var(--text-font); font-weight: 400; font-size: 11px; color: var(--secundar); margin-top: 6px; letter-spacing: 0; }
.hartie-cap .doc { text-align: right; }
.hartie-cap .doc b { display: block; font-family: var(--afisare); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.hartie-cap .doc span { display: block; white-space: nowrap; font-family: var(--mono); font-size: 11px; color: var(--secundar); margin-top: 4px; }
.hartie-parti { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie-slaba); font-size: 11.5px; color: var(--secundar); }
.hartie-parti b { display: block; color: var(--text); font-weight: 600; margin: 4px 0 2px; font-size: 12px; }
.hartie table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 11.5px; }
.hartie th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--secundar); padding: 8px 0 6px; border-bottom: 1px solid var(--linie); }
.hartie td { padding: 8px 0; border-bottom: 1px solid var(--linie-slaba); vertical-align: top; }
.hartie th.n, .hartie td.n { text-align: right; padding-left: 12px; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hartie td.n { color: var(--text); }
.hartie-totaluri { margin-left: auto; width: min(100%, 230px); margin-top: 12px; font-size: 11.5px; }
.hartie-totaluri div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--secundar); }
.hartie-totaluri div span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.hartie-totaluri .de-plata { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--text); color: var(--text); font-weight: 600; font-size: 13px; position: relative; }
.hartie-totaluri .de-plata::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--text); }
.hartie-totaluri .de-plata span:last-child { font-size: 15px; font-weight: 500; }
.hartie-picior { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie-slaba); font-size: 11px; color: var(--secundar); }
.stanta {
  display: inline-block; transform: rotate(-6deg); margin-right: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; padding: 5px 9px;
  border: 1.5px solid var(--alerta); color: var(--alerta); border-radius: 3px; opacity: .85; background: var(--suprafata);
}
.legenda-macheta { margin-top: 18px; font-size: var(--t-eticheta); color: var(--secundar); font-family: var(--mono); letter-spacing: .02em; }

/* etichete de stare */
.stare { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; font-family: var(--text-font); letter-spacing: .01em; white-space: nowrap; line-height: 1.6; }
.stare::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stare.ok { background: var(--ok-fond); color: var(--ok-text); }
.stare.atentie { background: var(--atentie-fond); color: var(--atentie-text); }
.stare.alerta { background: var(--alerta-fond); color: var(--alerta-text); }

/* ------------------------------------------------------------------ rândurile paginii */
.rand { border-top: 1px solid var(--linie); padding-block: clamp(48px, 7vw, 104px); }
.rand .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 900px) {
  .rand .container { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; }
  .rand-cap { position: sticky; top: 92px; align-self: start; }
}
.rand-cap { display: flex; align-items: baseline; gap: 14px; }
.rand-cap .nr { font-family: var(--mono); font-size: var(--t-eticheta); color: var(--accent); letter-spacing: .06em; }
.rand-cap .eticheta { color: var(--secundar); }
.rand-corp { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.rand-corp > h2 { display: inline-block; max-width: 24ch; position: relative; padding-bottom: 14px; align-self: flex-start; }
.rand-corp > h2::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; border-top: 1px solid var(--accent); }
.rand-corp > h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--accent); }
.intro { font-size: var(--t-mediu); color: var(--secundar); max-width: 40rem; line-height: 1.55; }
.intro strong { color: var(--text); font-weight: 500; }

/* liste cu index */
.grila { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--raza); overflow: hidden; }
.grila > div { background: var(--suprafata); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.grila .idx { font-family: var(--mono); font-size: var(--t-eticheta); color: var(--accent); letter-spacing: .06em; }
.grila h3 { font-size: var(--t-mediu); font-family: var(--text-font); font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
.grila p { color: var(--secundar); font-size: var(--t-mic); line-height: 1.55; }
@media (min-width: 640px) { .grila.c3, .grila.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grila.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nota { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px 20px; border: 1px solid var(--linie); border-left: 3px solid var(--accent); border-radius: var(--raza); background: var(--suprafata); font-size: var(--t-mic); color: var(--secundar); }
.nota .eticheta { color: var(--accent); padding-top: 3px; }
.nota strong { color: var(--text); }

/* profiluri — listă de definiții în rânduri */
.profiluri { display: grid; }
.profiluri > div { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.profiluri > div:first-child { border-top: 1px solid var(--linie); }
.profiluri dt { font-weight: 600; font-size: var(--t-mediu); font-family: var(--text-font); letter-spacing: -.005em; }
.profiluri dd { margin: 0; color: var(--secundar); }
@media (min-width: 640px) { .profiluri > div { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: baseline; } }

/* pași */
.pasi { display: grid; gap: 24px; counter-reset: pas; }
@media (min-width: 640px) { .pasi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pasi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pasi li { list-style: none; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--text); position: relative; }
.pasi li::before { counter-increment: pas; content: "Pasul " counter(pas); font-family: var(--mono); font-size: var(--t-eticheta); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pasi h3 { font-size: var(--t-mediu); font-family: var(--text-font); font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
.pasi p { color: var(--secundar); font-size: var(--t-mic); }

/* întrebări */
.intrebari { border-top: 1px solid var(--linie); }
.intrebari details { border-bottom: 1px solid var(--linie); }
.intrebari summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 16px; align-items: center; padding: 18px 0; font-weight: 600; font-size: var(--t-mediu); letter-spacing: -.005em; line-height: 1.3; }
.intrebari summary::-webkit-details-marker { display: none; }
.intrebari summary .semn { width: 24px; height: 24px; position: relative; color: var(--accent); }
.intrebari summary .semn::before, .intrebari summary .semn::after { content: ""; position: absolute; background: currentColor; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.intrebari summary .semn::before { width: 14px; height: 1.5px; }
.intrebari summary .semn::after { width: 1.5px; height: 14px; transition: transform var(--tranzitie); }
.intrebari details[open] summary .semn::after { transform: translate(-50%, -50%) rotate(90deg); }
.intrebari details > p { padding: 0 48px 22px 0; color: var(--secundar); max-width: 44rem; }
.intrebari summary:hover { color: var(--accent); }

/* ------------------------------------------------------------------ macheta aplicației */
.aplicatie {
  background: var(--suprafata); border: 1px solid var(--linie); border-radius: 10px; overflow: hidden;
  font-size: 12.5px; line-height: 1.4; color: var(--text);
  box-shadow: 0 1px 0 var(--linie), 0 24px 60px -40px rgba(14, 20, 36, .35);
}
.ap-bara { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--linie); background: var(--suprafata-2); }
.ap-bara .sigla svg { width: 54px; }
.ap-bara .cale { font-family: var(--mono); font-size: 11px; color: var(--secundar); }
.ap-bara .cautare { margin-left: auto; width: min(240px, 36%); height: 28px; border: 1px solid var(--linie); border-radius: 5px; background: var(--suprafata); display: flex; align-items: center; padding: 0 10px; color: var(--secundar); font-size: 11px; gap: 8px; }
.ap-bara .cautare svg { width: 12px; height: 12px; }
.ap-bara .cont { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--pe-accent); display: grid; place-items: center; font-size: 10px; font-weight: 600; letter-spacing: .03em; }
.ap-corp { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ap-corp { grid-template-columns: 176px minmax(0, 1fr); } }
.ap-meniu { display: none; border-right: 1px solid var(--linie); padding: 14px 10px; background: var(--suprafata-2); }
@media (min-width: 900px) { .ap-meniu { display: block; } }
.ap-meniu a { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 5px; color: var(--secundar); text-decoration: none; font-size: 12px; font-weight: 500; }
.ap-meniu a[aria-current] { background: var(--suprafata); color: var(--text); box-shadow: inset 0 0 0 1px var(--linie); }
.ap-meniu a .nr { font-family: var(--mono); font-size: 10.5px; color: var(--secundar); }
.ap-meniu .grup { margin: 14px 10px 6px; }
.ap-principal { display: grid; gap: 18px; padding: 18px; min-width: 0; }
.ap-carduri { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
@media (min-width: 700px) { .ap-carduri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ap-sectiune { min-width: 0; }
.ap-titlu { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ap-titlu h3 { font-family: var(--afisare); font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.ap-titlu .buton-mic { font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 5px; background: var(--accent); color: var(--pe-accent); white-space: nowrap; }
.ap-filtre { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; }
.ap-filtre span { padding: 8px 10px; color: var(--secundar); font-size: 12px; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ap-filtre span[aria-current] { color: var(--text); border-bottom-color: var(--accent); }
.ap-filtre .nr { font-family: var(--mono); font-size: 10.5px; margin-left: 5px; color: var(--secundar); }
@media (max-width: 479px) { .ap-filtre span { padding: 8px 6px; } .ap-filtre .nr { display: none; } }
.ap-tabel { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.ap-tabel th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--secundar); padding: 8px 8px 8px 0; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.ap-tabel td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--linie-slaba); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-tabel .nrf { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
.ap-tabel .client { font-weight: 500; }
.ap-tabel .data { font-family: var(--mono); font-size: 11.5px; color: var(--secundar); }
.ap-tabel th.n, .ap-tabel td.n { text-align: right; font-family: var(--mono); padding-right: 0; }
.ap-tabel td.n { font-size: 12px; }
.ap-tabel .s { text-align: right; }
.ap-tabel col.c-nr { width: 118px; } .ap-tabel col.c-client { width: auto; } .ap-tabel col.c-data { width: 92px; } .ap-tabel col.c-suma { width: 100px; } .ap-tabel col.c-stare { width: 106px; }
.ap-tabel .ascunde-m, .ap-tabel .ascunde-xs { display: none; }
@media (min-width: 480px) { .ap-tabel .ascunde-xs { display: table-cell; } .ap-tabel col.ascunde-xs { display: table-column; } }
@media (min-width: 640px) { .ap-tabel .ascunde-m { display: table-cell; } .ap-tabel col.ascunde-m { display: table-column; } }
@media (max-width: 479px) { .ap-tabel col.c-suma { width: 84px; } .ap-tabel col.c-stare { width: 104px; } .ap-tabel .stare { font-size: 10px; padding-inline: 6px; } .ap-bara .cale { display: none; } }
@media (max-width: 639px) { .ap-bara .cautare { width: 30px; padding: 0 8px; } .ap-bara .cautare span { display: none; } }
.ap-total { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--text); position: relative; font-size: 12px; }
.ap-total::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--text); }
.ap-total span { color: var(--secundar); }
.ap-total b { font-family: var(--mono); font-weight: 500; color: var(--text); margin-left: 6px; }
.ap-total .ok b { color: var(--ok-text); }
.ap-total .atentie b { color: var(--atentie-text); }
@media (max-width: 639px) {
  .ap-total { display: grid; gap: 6px; }
  .ap-total span { display: flex; justify-content: space-between; }
}

.ap-card { border: 1px solid var(--linie); border-radius: 8px; padding: 14px 16px 12px; background: var(--suprafata); }
.ap-card .ap-card-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.ap-card h4 { font-size: 13px; font-weight: 600; }
.ap-card .eticheta { font-size: 10px; }
.ap-card .mare { font-family: var(--afisare); font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.ap-card .delta { font-size: 11px; color: var(--ok-text); font-family: var(--mono); }
.grafic { width: 100%; height: auto; margin-top: 10px; }
.grafic text { font-family: var(--mono); font-size: 9.5px; fill: var(--secundar); }
.grafic .axa { stroke: var(--linie); }
.grafic .emis { fill: var(--linie); }
.grafic .incasat { fill: var(--accent); }
.grafic .curent .emis { fill: none; stroke: var(--secundar); stroke-width: 1; stroke-dasharray: 2 2; } /* luna în curs: incompletă, conturată */
.grafic .curent .incasat { fill: var(--accent); }
.grafic .curent-marc { fill: var(--text); font-weight: 500; }
.legenda { display: flex; gap: 14px; font-size: 10.5px; color: var(--secundar); margin-top: 6px; flex-wrap: wrap; }
.legenda span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--linie); }
.legenda span.l-incasat::before { background: var(--accent); }
.ap-lista-mica { margin-top: 12px; border-top: 1px solid var(--linie); }
.ap-lista-mica div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie-slaba); font-size: 11.5px; }
/* :where() ține specificitatea la 0,1,0, ca .r/.a/.p și .zile de mai jos să câștige */
:where(.ap-lista-mica div) span:first-child { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
:where(.ap-lista-mica div) span:last-child { font-family: var(--mono); color: var(--text); white-space: nowrap; }
.ap-lista-mica .r { color: var(--alerta-text); } .ap-lista-mica .a { color: var(--atentie-text); } .ap-lista-mica .p { color: var(--accent); }
.ap-card .delta.alerta { color: var(--alerta-text); }
.ap-lista-mica .zile { display: block; color: var(--secundar); font-family: var(--mono); font-size: 10.5px; margin-top: 1px; }

/* ------------------------------------------------------------------ îndemn final */
.indemn { background: var(--invers-fond); color: var(--invers-text); border-top: 1px solid var(--invers-linie); }
.indemn .container { padding-block: clamp(56px, 8vw, 112px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1024px) { .indemn .container { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; gap: 80px; } }
.indemn h2 { color: var(--invers-text); font-size: var(--t-titlu); max-width: 16ch; }
.indemn .intro { color: var(--invers-secundar); margin-top: 20px; }
.indemn .formular input[type="email"] { background: var(--fond); color: var(--text); border-color: var(--invers-linie); }
.indemn .formular input[type="email"]:focus { box-shadow: 0 3px 0 -1px var(--invers-fond), 0 3px 0 0 var(--accent), 0 6px 0 -1px var(--invers-fond), 0 6px 0 0 var(--accent); }
.indemn .bifa { color: var(--invers-secundar); }
.indemn .bifa a { color: var(--invers-text); }
.indemn .microtext { color: var(--invers-secundar); }
.indemn .formular label.camp-eticheta { color: var(--invers-text); }
.indemn .buton { background: #fff; color: #0E1424; border-color: #fff; }
.indemn .buton:hover { background: var(--accent); border-color: var(--accent); color: var(--pe-accent); }
.indemn .buton::after { border-color: currentColor; }
.indemn .mesaj.eroare { background: #2A1613; border-color: var(--alerta); color: #F6A197; }
.indemn .formular .confirmare { background: #0F2B1F; border-color: var(--ok); color: #7DD9AC; }
.indemn :focus-visible { outline-color: var(--invers-text); }

/* ------------------------------------------------------------------ subsol */
.subsol { background: var(--invers-fond); color: var(--invers-secundar); font-size: var(--t-mic); }
.subsol .total-linie { color: var(--accent); }
.subsol .container { padding-block: 40px 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 900px) { .subsol .container { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 40px; } }
.subsol .sigla { color: var(--invers-text); }
.subsol .sigla svg { width: 78px; }
.subsol .subsol-titlu { color: var(--invers-text); font-size: var(--t-eticheta); font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; font-weight: 400; margin-bottom: 12px; line-height: 1.3; }
.subsol address { font-style: normal; line-height: 1.6; }
.subsol a { color: var(--invers-text); }
.subsol a:hover { color: #fff; }
.subsol ul { list-style: none; display: grid; gap: 8px; }
.subsol .produs { margin-top: 16px; max-width: 30ch; line-height: 1.55; }
.subsol-jos { border-top: 1px solid var(--invers-linie); }
.subsol-jos .container { padding-block: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: var(--t-eticheta); font-family: var(--mono); letter-spacing: .02em; }

/* ------------------------------------------------------------------ pagini simple (confirmare, 404, legale) */
.pagina { padding-block: clamp(48px, 8vw, 112px); }
.pagina .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 900px) { .pagina .container { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; } }
.pagina .rand-cap { align-self: start; }
.pagina .cuprins { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.pagina h1 { font-size: var(--t-titlu); display: inline-block; max-width: 26ch; position: relative; padding-bottom: 14px; align-self: flex-start; font-variation-settings: "opsz" 60; letter-spacing: -.022em; line-height: 1.08; }
.pagina h1::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; border-top: 1px solid var(--accent); }
.pagina h1::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--accent); }
.pagina .mare-cod { font-family: var(--mono); font-size: clamp(4rem, 10vw, 7rem); line-height: 1; color: var(--linie); letter-spacing: -.04em; }
.pagina .actiuni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.pagina .randuri { display: grid; }
.pagina .randuri p { padding: 14px 0; border-bottom: 1px solid var(--linie); color: var(--secundar); }
.pagina .randuri p:first-child { border-top: 1px solid var(--linie); }
.pagina .randuri p + p { margin-top: 0; }

.proza { max-width: 68ch; display: flex; flex-direction: column; gap: 20px; }
.proza .actualizare { color: var(--secundar); font-size: var(--t-mic); font-family: var(--mono); }
.proza h2 { font-family: var(--text-font); font-size: var(--t-mediu); font-weight: 600; letter-spacing: -.005em; line-height: 1.3; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linie); }
.proza h2 .nr { font-family: var(--mono); font-size: var(--t-eticheta); color: var(--accent); letter-spacing: .06em; padding-top: 6px; }
.proza p, .proza li { color: var(--secundar); }
.proza ul { padding-left: 1.2em; display: grid; gap: 6px; }
.proza strong { color: var(--text); }

/* ------------------------------------------------------------------ mișcare redusă și tipărire */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
}
@media print {
  .antet, .indemn, .buton, .formular { display: none !important; }
  body { background: #fff; color: #000; }
}