/* Parcurs — interfața de producție.
   Limbajul vizual vine din DESIGN.md: pardoseală crem, cerneală caldă, o
   singură tensiune de brand (portocaliu) folosită rar, adâncime numai din
   filete de 1px. Nicio culoare, rază sau spațiere în afara tokenilor de mai
   jos: dacă un ecran are nevoie de altceva, se adaugă aici, nu în pagină. */
/* Fonturile stau pe serverul nostru, nu la Google: un @import către
   fonts.googleapis.com trimitea IP-ul fiecărui vizitator la Google, la fiecare
   încărcare de pagină, fără temei legal — exact practica sancționată în UE.

   Fișierele sunt variabile (o axă de greutate per familie, nu un fișier per
   greutate), cu axa strânsă la greutățile pe care le cere acest CSS: 400–600
   pentru Inter, 400–500 pentru mono. Fonturile Google veneau cu 100–900, adică
   plămădeală pentru greutăți pe care nu le scriem nicăieri.

   Subsetul `latin-ext` este tăiat la Latin Extended-A plus ș/ț, fiindcă româna
   își ține jumătate din diacritice acolo: â și î au intrat în Latin-1 acum
   treizeci de ani, ă/ș/ț au rămas afară. Cel de la Google acoperea 733 de
   caractere — extensii fonetice, vietnameză, monede — ca să ne dea șase.
   Intervalul păstrat acoperă și maghiara, poloneza, ceha și croata: exporturile
   SAGA din Transilvania vin cu nume ca Szőcs, iar un ő scris cu alt font se
   vede. Ce cade în afara intervalului trece pe fontul de sistem, nu dispare.

   Dacă retai subsetul, `unicode-range` de mai jos merge strâns odată cu
   fișierul, altfel browserul cere fișierul pentru caractere care nu sunt în el.
   Mai important: nu strânge intervalul peste ă/ș/ț — trec tăcut pe fontul de
   sistem, iar textul se vede pestriț. Testul din test/e2e.test.js măsoară exact
   asta, fiindcă altfel nu se prinde decât cu ochiul.

   Licența: public/fonts-OFL.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/public/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/public/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-017F, U+0218-021B;
}
/* Rezerva, încărcată la geometria lui Inter. Până sosește fontul, textul se
   scrie cu Arial (sau cu ce e metric-identic cu el pe sistemul omului), care
   scrie cu 5% mai îngust și are alt ascendent — de aceea la schimb sărea tot
   textul din pagină. Cele patru corecții de mai jos umflă rezerva exact cât
   trebuie: literele tot se schimbă la sosirea fontului, dar nu se mai mută
   nimic din loc.

   Numerele nu sunt alese cu ochiul. `size-adjust` este raportul de lățime
   măsurat prin randarea a 1800 de caractere luate din ecranele reale, în ambele
   fonturi — nu media `xAvgCharWidth` din OS/2, care se calculează peste litere
   mici latine și dădea 105,31%, cu un procent mai puțin și cu un paragraf care
   se rupea în alt loc. Ascendentul și descendentul vin din OS/2, dar raportate
   la em-ul deja ajustat, altfel corecția de lățime i-ar deplasa a doua oară.

   Pe Android nu există Arial, dar sistemul îl aliază la Roboto, ale cărui
   metrici sunt apropiate; corecția rămâne o îmbunătățire, chiar dacă nu exactă.
   Unde nu se găsește niciuna, regula se ignoră și se cade pe `system-ui`.

   Recalibrare, dacă se retaie fonturile: randează același text lung în „Inter"
   și în „Liberation Sans" la aceeași mărime, `size-adjust` este raportul
   lățimilor, iar ascendentul și descendentul sunt sTypoAscender/Descender ale
   lui Inter împărțite la unitsPerEm și apoi la acel raport. Măsurat: Arial brut
   scrie cu 6,21% mai îngust decât Inter, ajustat rămâne la 0,78%. Măsurătoarea
   cere un browser pornit normal — cu --single-process, Chromium nu rezolvă
   `local()` dintr-un @font-face și fața de mai jos se ignoră tăcut. */
@font-face {
  font-family: "Inter Rezerva";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 106.18%;
  ascent-override: 91.24%;
  descent-override: 22.72%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/public/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/public/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-017F, U+0218-021B;
}

:root {
  color-scheme: light;

  /* Suprafețe: pardoseala e crem, nu alb; cardul alb iese din ea fără umbră. */
  --canvas: #f7f7f4;
  --canvas-soft: #fafaf7;
  --canvas-deep: #efeee8;
  --paper: #fff;

  /* Text: cerneală caldă, nu negru. */
  --ink: #26251e;
  --ink-soft: #5a5852;
  --muted: #807d72;
  --faint: #a09c92;

  /* Filete — singura sursă de adâncime din pagină. */
  --line: #e6e5e0;
  --line-strong: #cfcdc4;

  /* Suprafața de cerneală: butonul obișnuit, pasul activ, benzile inversate. */
  --dark: #26251e;
  --dark-hover: #16150f;
  --dark-ink: #f7f7f4;

  /* Tensiunea de brand. Se folosește rar: acțiunea principală, focusul,
     indicatorul paginii curente, umplerea barelor de progres. */
  --accent: #f54e00;
  --accent-hover: #d04200;
  --accent-soft: #fdece4;
  --accent-line: #f7cdb8;
  --focus: rgb(245 78 0 / .24);

  /* Semantice: confirmare, atenție (aurul din paleta de etape), eroare. */
  --green: #1f8a65;
  --green-soft: #e9f4ef;
  --green-line: #bfdfd1;
  --amber: #8a5f22;
  --amber-soft: #f8f1e3;
  --amber-line: #e0cda8;
  --red: #cf2d56;
  --red-hover: #a92143;
  --red-soft: #fceef1;
  --red-line: #f0c3ce;
  --red-focus: rgb(207 45 86 / .18);

  /* Forme: 4 / 6 / 8 / 12 / 16 și pastila. Nimic între. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  --sidebar-width: 240px;
  --topbar-height: 56px;
  /* Umbra rămâne doar pentru straturile care plutesc peste pagină. */
  --shadow-menu: 0 14px 34px rgb(38 37 30 / .12);

  --font: "Inter", "Inter Rezerva", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: var(--font);

  /* Corpuri de literă: 11 e cel mai mic din sistem, nu există micro-text. */
  --text-caption: 11px;
  --text-small: 12px;
  --text-control: 13px;
  --text-body: 14px;
  --text-lead: 16px;

  /* Spațiere pe ritm de 4px, până la respirația de secțiune de 80px. */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 80px;
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background: var(--canvas);
  font: 400 var(--text-body)/1.5 var(--font);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); font-family: var(--display); }
h1 { margin-bottom: 8px; font-size: 32px; font-weight: 400; line-height: 1.14; letter-spacing: -.03em; }
h2 { margin-bottom: 8px; font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
h3 { margin-bottom: 4px; font-size: var(--text-lead); font-weight: 600; line-height: 1.4; }
p { margin-bottom: 1em; color: var(--muted); }
svg { display: block; }
.ui-icon { width: 18px; height: 18px; flex: none; overflow: visible; vertical-align: middle; }
.action-icon { width: 15px; height: 15px; }
.icon-button { display: grid; place-items: center; padding: 0; line-height: 0; }
.icon-button > .ui-icon { width: 18px; height: 18px; }
.button > .ui-icon { width: 16px; height: 16px; }
[hidden] { display: none !important; }
::selection { color: var(--ink); background: var(--accent-soft); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: var(--shadow-menu);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

/* Application shell */
.app-frame {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  background: var(--canvas);
}
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  z-index: 30;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--canvas);
}
.sidebar-head {
  height: var(--topbar-height);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand, .login-brand { min-width: 0; display: inline-flex; align-items: center; gap: 12px; }
.brand-mark, .login-brand-mark {
  width: 27px;
  height: 27px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--paper);
}
.brand-mark svg, .login-brand-mark svg { width: 17px; height: 17px; }
.brand-copy { min-width: 0; display: grid; gap: 1px; }
.brand-copy strong { color: var(--ink); font-size: var(--text-body); font-weight: 600; line-height: 1.05; letter-spacing: -.015em; }
.brand-copy small { color: var(--muted); font-size: var(--text-caption); line-height: 1.2; }
.sidebar nav { padding: 12px 8px; overflow-y: auto; }
/* Singura acțiune a aplicației, scoasă din listă. Reia butonul primar și îi dă
   lățimea meniului, alinierea iconiței cu restul intrărilor și — singurul loc
   din aplicație unde se întâmplă asta — culoarea de brand: DESIGN.md ține
   portocaliul pentru acțiunea principală, iar aplicația are una singură. */
.nav-cta {
  margin: var(--space-md) 8px 0;
  min-height: 40px;
  padding: 0 8px;
  justify-content: flex-start;
  gap: 12px;
  border-color: var(--accent);
  color: var(--paper);
  background: var(--accent);
}
.nav-cta:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.nav-cta[aria-current="page"] { box-shadow: 0 0 0 3px var(--accent-soft); }
.nav-cta svg { width: 18px; height: 18px; flex: none; }

.nav-label {
  padding: 20px 12px 8px;
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.sidebar nav a {
  min-height: 40px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: var(--text-control);
  font-weight: 500;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.sidebar nav a:hover { color: var(--ink); background: rgb(255 255 255 / .68); }
.sidebar nav a[aria-current="page"] { color: var(--ink); border-color: var(--line); background: var(--paper); font-weight: 600; }
.sidebar nav a[aria-current="page"] .nav-icon { color: var(--ink); }
.nav-icon, .nav-icon svg { width: 18px; height: 18px; flex: none; }
.nav-toggle, .mobile-menu {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--line); background: var(--paper); }
.mobile-menu:hover { border-color: var(--line); background: var(--canvas-deep); }
.nav-backdrop { display: none; }
.sidebar-bottom {
  margin: auto 12px 12px;
  /* Îngust pe orizontală: coloana din mijloc trebuie să ducă o adresă de
     email întreagă („demo@example.test") fără să o taie. */
  padding: 12px 8px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.user-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--canvas-deep);
  font-size: var(--text-small);
  font-weight: 600;
}
.user-meta { min-width: 0; display: grid; }
.user-meta strong { color: var(--ink); font-size: var(--text-small); font-weight: 600; }
.user-meta span { overflow: hidden; color: var(--muted); font-size: var(--text-caption); text-overflow: ellipsis; white-space: nowrap; }
.sidebar-bottom form { margin: 0; }
.logout {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.logout .ui-icon { width: 18px; height: 18px; }
.logout span:last-child { display: none; }
.logout:hover { border-color: var(--line); color: var(--ink); background: var(--canvas-deep); }
.app-content { min-width: 0; min-height: 100vh; overflow-x: clip; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-height);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgb(247 247 244 / .92);
  backdrop-filter: blur(10px);
}
.crumb { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: var(--text-small); }
.crumb span, .crumb b { color: var(--faint); font-weight: 400; }
.crumb b { font-weight: 400; }
.crumb strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.saved-state { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--text-caption); }
.saved-state > .ui-icon { width: 15px; height: 15px; color: var(--green); }
.top-help { min-height: 32px; padding: 0 8px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); background: transparent; font-size: var(--text-caption); }
.top-help > .ui-icon { width: 17px; height: 17px; }
.top-help b { font-weight: 500; }
.top-help:hover { border-color: var(--line); color: var(--ink); background: var(--paper); }
.shell { width: 100%; max-width: 1380px; margin: 0 auto; padding: 32px 36px 72px; }

/* Hierarchy */
.page-head {
  min-height: 96px;
  margin-bottom: 24px;
  padding: 4px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}
.page-head > div { max-width: 760px; }
.page-head-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Comutatorul de conturi: aceeași greutate vizuală ca „Ajutor" de lângă el —
   discret până la hover, nu o pastilă care strigă din antet. Popover nativ, ca
   meniul de rând din tabele: fără librărie și fără poziționare din JS. */
.account-switch-open {
  min-height: 32px;
  max-width: 260px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.account-switch-open > .ui-icon { width: 17px; height: 17px; }
.account-switch-open b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.account-switch-open:hover { border-color: var(--line); color: var(--ink); background: var(--paper); }
.account-switch-menu {
  width: min(360px, calc(100vw - 32px));
  margin: 0;
  padding: 8px;
  position: fixed;
  inset: calc(var(--topbar-height) - 4px) 16px auto auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-menu);
}
.account-switch-menu .table-search { min-width: 0; padding: 0 8px; }
.account-switch-list { max-height: 320px; margin: 8px 0; overflow-y: auto; display: grid; gap: 2px; }
.account-switch-list button {
  width: 100%;
  padding: 8px;
  display: grid;
  gap: 1px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.account-switch-list button:hover:not(:disabled) { border-color: var(--line); background: var(--canvas-deep); }
.account-switch-list button:disabled { opacity: .5; cursor: default; }
.account-switch-list strong { font-weight: 500; }
.account-switch-list span, .account-switch-empty { color: var(--muted); }
.account-switch-empty { margin: 8px; }
.account-switch-exit { width: 100%; }

/* Banda de cont împrumutat: pe fiecare ecran, deasupra a tot. Aceleași tonuri de
   atenție ca bannerele obișnuite, ca să nu inventeze un al doilea vocabular. */
.impersonation-bar {
  margin-bottom: 16px;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--amber-line);
  border-radius: var(--radius-sm);
  color: var(--amber);
  background: var(--amber-soft);
}
.impersonation-bar p { margin: 0; display: flex; align-items: center; gap: 8px; }
.impersonation-bar > p > .ui-icon { flex: none; width: 17px; height: 17px; }
.impersonation-bar .link-button { color: var(--amber); }
.impersonation-bar .link-button:hover { border-color: var(--amber-line); color: var(--amber); background: var(--paper); }
.page-head h1 { max-width: 720px; }
.page-head p { max-width: 700px; margin-bottom: 0; font-size: var(--text-control); }
.eyebrow, .support-eyebrow {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.section { margin-top: 28px; }
.section-title { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.section-title h2, .section-title p { margin-bottom: 0; }
.section-title p { font-size: var(--text-control); }

/* Controls */
.button {
  min-height: 40px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--dark);
  border-radius: var(--radius-sm);
  color: var(--dark-ink);
  background: var(--dark);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
}
.button:hover { border-color: var(--dark-hover); background: var(--dark-hover); }
.button:active { transform: translateY(1px); }
.button.secondary { border-color: var(--line-strong); color: var(--ink); background: var(--paper); }
.button.secondary:hover { border-color: var(--line-strong); background: var(--canvas-deep); }
/* Singura culoare de brand din aplicație: acțiunea pe care ai venit s-o faci. */
.button.accent { border-color: var(--accent); color: var(--paper); background: var(--accent); }
.button.accent:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.button.wide, .button.full { width: 100%; }
.button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.button.is-loading { pointer-events: none; opacity: .72; }
.button-spinner { width: 13px; height: 13px; border: 2px solid rgb(255 255 255 / .35); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }
.button.secondary .button-spinner { border-color: rgb(41 38 34 / .15); border-top-color: currentColor; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-button { min-height: 34px; padding: 8px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); background: transparent; font-size: var(--text-small); cursor: pointer; }
.link-button:hover { border-color: var(--line); color: var(--ink); background: var(--canvas-deep); }
.danger { color: var(--red) !important; }
.danger-button { border-color: var(--red); background: var(--red); }
.danger-button:hover { border-color: var(--red-hover); background: var(--red-hover); }

.status, .pill, .reset-request-badge {
  min-height: 22px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--green-line);
  border-radius: var(--radius-pill);
  color: var(--green);
  background: var(--green-soft);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
  /* „în așteptare" se rupea pe două rânduri în coloanele înguste de tabel. */
  white-space: nowrap;
}
.status.warning, .pill.warning { border-color: var(--amber-line); color: var(--amber); background: var(--amber-soft); }
.status.inactive { border-color: var(--line); color: var(--muted); background: var(--canvas-deep); }
.reset-request-badge { margin: 4px 0 0 8px; border-color: var(--amber-line); color: var(--amber); background: var(--amber-soft); }
/* Eroare de formular, lângă câmpuri. Mesajele de pagină folosesc `.banner`. */
.error {
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid var(--red-line);
  border-radius: var(--radius-sm);
  color: var(--red);
  background: var(--red-soft);
  font-size: var(--text-small);
}

label { min-width: 0; display: grid; gap: 8px; color: var(--ink-soft); font-size: var(--text-small); font-weight: 500; }
label small { color: var(--muted); font-size: var(--text-caption); font-weight: 400; }
input:not([type="checkbox"]):not([type="color"]):not([type="file"]), select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  outline: 0;
  color: var(--ink);
  background: var(--paper);
  font-size: var(--text-control);
  font-weight: 400;
  transition: border-color .16s ease, box-shadow .16s ease;
}
textarea { min-height: 120px; resize: vertical; }
select { padding-right: 36px; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:not([type="checkbox"]):not([type="color"]):not([type="file"]):focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
/* Săgețile de la input[type=number] mănâncă ~20px din câmp și tăiau
   placeholderul „Valoarea de pe bord". Câmpurile de kilometraj au deja
   inputmode=numeric, deci săgețile nu aduc nimic. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
input[type="color"] { width: 100%; height: 43px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-focus) !important; }
.field-error { color: var(--red); font-size: var(--text-caption); font-weight: 500; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; }
.form-grid .full { grid-column: 1 / -1; }
/* Rând de căutare sau de acțiune: câmpul crește, butonul rămâne cât scrie pe el.
   Într-un .form-grid butonul ar ocupa jumătate de pagină. */
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.inline-form label { flex: 1 1 min(100%, 320px); }
.inline-form .button { flex: none; }
.form-help { margin: -4px 0 0; font-size: var(--text-caption); }
.panel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.panel > :last-child { margin-bottom: 0; }
.settings-grid, .repair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.help-box {
  margin-bottom: 20px;
  padding: 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.help-box > span { width: 29px; height: 29px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--muted); background: var(--canvas); font-size: var(--text-small); }
.help-box > span .ui-icon { width: 15px; height: 15px; }
.help-box > div { min-width: 0; }
.help-box > div { flex: 1; }
.help-box strong { font-size: var(--text-small); }
.help-box p { margin: 2px 0 0; font-size: var(--text-caption); }
.coordinates { padding: 12px; display: grid; gap: 4px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); background: var(--canvas); }
.coordinates span { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .08em; }
.coordinates strong { display: block; color: var(--ink-soft); font-size: var(--text-caption); font-weight: 500; overflow-wrap: anywhere; }

/* Setări (administrator și client): grupuri adnotate — titlul și explicația în
   coloana din stânga, comenzile în cardul din dreapta. Separarea asta e tot ce
   face tiparul: se scanează pe verticală titlurile, iar explicația se citește
   lângă câmpul pe care îl lămurește, nu sub el. Lățimea e plafonată: peste
   ~1080px rândurile de formular devin prea lungi pentru citit. */
.settings-page { max-width: 1080px; display: grid; gap: var(--space-xl); }
.settings-group { display: grid; grid-template-columns: minmax(0, .34fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; scroll-margin-top: calc(var(--topbar-height) + var(--space-lg)); }
.settings-group > header h2 { margin-bottom: var(--space-2xs); font-size: 17px; font-weight: 600; }
.settings-group > header p { max-width: 60ch; margin: 0; color: var(--muted); }
.settings-group > header .status { margin-top: var(--space-sm); }
.settings-card { display: grid; gap: var(--space-md); padding: var(--space-lg); }
/* Câmpurile de pe același rând se aliniază după casetă, nu după eticheta lor:
   „Parola nouă" are un rând de ajutor sub etichetă, „Parola actuală" nu, iar
   fără asta cele două casete ieșeau decalate cu exact înălțimea acelui rând. */
.settings-card label { align-content: end; }
/* Un formular de un singur rând nu are nevoie de buton pe toată lățimea: caseta
   se întinde, butonul stă lângă ea, iar rândul de ajutor coboară sub caseta la
   care se referă — nu sub etichetă, unde se citea ca parte din titlu. */
.field-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: end; }
.field-inline .form-help { grid-column: 1; margin: 0; }
.password-inline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.password-inline .form-help { grid-column: 2 / -1; }
/* Formularul e a doua jumătate a cardului — sinteza deasupra, comenzile dedesubt,
   despărțite de un filet, ca secțiunile unui card Shopify. */
.settings-card > form { padding-top: var(--space-md); border-top: 1px solid var(--line); }
.settings-card > form:only-child { padding-top: 0; border-top: 0; }
.settings-card .property-list + .settings-meter { margin-top: calc(var(--space-sm) * -1); }
.settings-meter-note { margin: calc(var(--space-sm) * -1) 0 0; color: var(--muted); }
.settings-note { padding: var(--space-sm) var(--space-md); display: flex; align-items: flex-start; gap: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); }
.settings-note .ui-icon { width: 17px; height: 17px; margin-top: 1px; flex: none; color: var(--green); }
.settings-note p { margin: 0; }
.holiday-years { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
/* Legătura din mijlocul unei fraze: `a` este fără culoare și fără subliniere în
   toată aplicația, fiindcă aproape toate legăturile sunt butoane sau rânduri de
   tabel. Într-un paragraf însă trebuie să se vadă că e de apăsat. Merge și pe
   `<button>` — calendarul sărbătorilor se deschide așa, dintr-o notă — de aceea
   are și înălțimea minimă de atingere. */
.inline-link { min-height: 24px; padding: 0; display: inline-flex; align-items: center; border: 0; color: var(--ink); background: transparent; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.inline-link:hover { color: var(--accent); }
/* Specificitatea urcă la două clase: regula lățimii de 520px pentru dialoguri
   vine mai jos în fișier și altfel ar câștiga ea. */
.admin-dialog.holidays-dialog { width: min(920px, calc(100vw - 32px)); }
.holidays-dialog-body { max-height: min(70vh, 620px); padding: var(--space-lg); display: grid; gap: var(--space-md); overflow-y: auto; }
.holiday-year { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.holiday-year > header { min-height: 62px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.holiday-year > header span { color: var(--muted); font-size: var(--text-caption); order: 2; }
.holiday-year > header h3 { margin: 0; font-size: 22px; font-weight: 600; }
.holiday-year ol { margin: 0; padding: 0 16px; list-style: none; }
.holiday-year li { min-height: 52px; padding: 8px 0; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.holiday-year li:last-child { border-bottom: 0; }
.holiday-year time { display: grid; gap: 1px; }
.holiday-year time strong { font-size: var(--text-small); font-weight: 600; text-transform: capitalize; }
.holiday-year time small { color: var(--muted); font-size: var(--text-caption); text-transform: capitalize; }
.holiday-year li > span { min-width: 0; color: var(--ink-soft); font-size: var(--text-caption); line-height: 1.35; }
.holiday-year li > em { padding: 4px 8px; border-radius: var(--radius-xs); color: var(--muted); background: var(--canvas-deep); font-size: var(--text-caption); font-style: normal; font-weight: 600; }
.settings-note a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Dashboard */
/* Panoul are exact trei coloane: cea mai scurtă cale, ce e de rezolvat și
   ultimele documente. Coloanele împrumută rubrica ecranului de pregătire —
   filet gros deasupra, etichetă mică și rânduri despărțite de linii subțiri —
   ca fiecare să se termine unde i se termină conținutul, nu la înălțimea
   celei mai lungi. */
.dashboard-page { width: 100%; }
/* Titlul stă pe un rând cu luna de lucru, iar filetul gros de sub el ține loc
   și de capăt al grilei: un singur reper orizontal, nu trei. */
.dashboard-head { padding: 40px 0 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-bottom: 2px solid var(--ink); }
.dashboard-head > div { min-width: 0; }
.dashboard-head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.dashboard-head .eyebrow { margin-bottom: 2px; }
/* Coloanele sunt despărțite de filete subțiri care coboară până jos: golul de
   sub conținut rămâne parte din grilă, nu spațiu rămas nefolosit. */
.dashboard-grid { min-height: min(52vh, 440px); display: grid; border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
.dashboard-grid > section { padding: 24px 36px 32px; }
.dashboard-grid > section:first-child { padding-left: 0; }
.dashboard-grid > section:last-child { padding-right: 0; }
.dashboard-grid > section + section { border-left: 1px solid var(--line); }
.col-label { margin: 0; color: var(--muted); font-size: var(--text-caption); font-weight: 600; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; }
.col-head { min-height: 20px; margin-bottom: 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.col-head em { color: var(--muted); font-size: var(--text-caption); font-weight: 600; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.col-head em.is-open { color: var(--amber); }
.col-head em.is-clear { color: var(--green); }
.col-head > a { color: var(--muted); font-size: var(--text-caption); font-weight: 600; }
.col-head > a:hover { color: var(--accent); }

.dashboard-start .paper-stack { margin: 20px 0 20px 16px; }
.dashboard-start h2 { max-width: 18ch; margin: 12px 0 12px; font-size: clamp(19px, 1.75vw, 25px); font-weight: 400; line-height: 1.14; letter-spacing: -.03em; }
.dashboard-start p { margin: 0 0 20px; color: var(--muted); font-size: var(--text-small); line-height: 1.55; }

.dashboard-issues ul { margin: 8px 0 0; padding: 0; list-style: none; }
.dashboard-issues li { padding: 12px 0; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; border-bottom: 1px solid var(--line); }
.dashboard-issues li:last-child { border-bottom: 0; }
.dashboard-issues li > span { display: grid; place-items: center; color: var(--muted); }
.dashboard-issues li > span .ui-icon { width: 15px; height: 15px; }
.dashboard-issues li.blocker > span { color: var(--red); }
.dashboard-issues li.warning > span { color: var(--amber); }
.dashboard-issues li > div { min-width: 0; display: grid; gap: 4px; }
.dashboard-issues li strong { font-size: var(--text-control); font-weight: 600; line-height: 1.35; }
.dashboard-issues li small { color: var(--muted); font-size: var(--text-caption); line-height: 1.5; overflow-wrap: anywhere; }
.dashboard-issues li > a { grid-column: 2 / -1; display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: var(--text-caption); font-weight: 600; white-space: nowrap; }
.dashboard-issues li > a:hover { color: var(--accent); }
.dashboard-issues li > a .action-icon { width: 13px; height: 13px; color: var(--faint); transition: color .16s ease, transform .16s ease; }
.dashboard-issues li > a:hover .action-icon { color: var(--accent); transform: translateX(2px); }
.dashboard-clear { padding: 16px 0 0; display: flex; align-items: flex-start; gap: 12px; }
.dashboard-clear > .ui-icon { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--green); }
.dashboard-clear div { display: grid; gap: 4px; }
.dashboard-clear strong { font-size: var(--text-control); font-weight: 600; }
.dashboard-clear small { color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }

.dashboard-runs { margin-top: 8px; }
.dashboard-runs > a { min-height: 56px; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.dashboard-runs > a:last-child { border-bottom: 0; }
.dashboard-runs > a > span { min-width: 0; display: grid; gap: 4px; }
.dashboard-runs strong { font-size: var(--text-control); font-weight: 600; text-transform: capitalize; }
.dashboard-runs small { color: var(--muted); font-size: var(--text-caption); }
.dashboard-runs .action-icon { color: var(--faint); transition: color .16s ease, transform .16s ease; }
.dashboard-runs > a:hover strong { color: var(--accent); }
.dashboard-runs > a:hover .action-icon { color: var(--accent); transform: translate(2px, -2px); }
.dashboard-empty { margin: 16px 0 0; color: var(--muted); font-size: var(--text-caption); }


/* Tables, lists and data */
.collection, .admin-table {
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.collection-toolbar, .admin-toolbar {
  min-height: 58px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.collection-toolbar > div { display: grid; }
.collection-toolbar > div strong { font-size: var(--text-control); }
.collection-toolbar > div span { color: var(--muted); font-size: var(--text-caption); }
.table-search { position: relative; min-width: 230px; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.table-search > .ui-icon { width: 17px; height: 17px; flex: none; }
.table-search input { min-height: 37px !important; padding-left: 8px !important; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
th, td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
/* Prima și ultima coloană se aliniază cu marginea cardului (20px), ca antetul
   listei și rândurile ei să cadă pe aceeași verticală; înainte, coloana
   „Acțiuni" se lipea de bordură. Tabelele din documentație curg în text, nu
   într-un card, deci își păstrează marginea. */
table:not(.docs-table) > * > tr > :first-child { padding-left: 20px; }
table:not(.docs-table) > * > tr > :last-child { padding-right: 20px; }
th { color: var(--muted); background: var(--canvas); font-size: var(--text-caption); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
td { color: var(--ink-soft); }
th.numeric, td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
td strong { color: var(--ink); font-weight: 500; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--canvas); }
th button { min-height: 30px; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.cell-meta { display: block; margin-top: 4px; color: var(--faint); font-size: var(--text-caption); }
.action-col { width: 72px; text-align: right; }
.table-footer { padding: 12px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-caption); }
.plate { width: fit-content; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); color: var(--ink); background: var(--paper); font: 600 var(--text-caption)/1.2 var(--mono); letter-spacing: .06em; }
.empty { padding: 28px; color: var(--muted); text-align: center; }
.empty-state { min-height: 280px; padding: 40px 24px; display: grid; place-items: center; align-content: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-align: center; }
.empty-state > div { width: 42px; height: 42px; margin-bottom: 16px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); background: var(--canvas); font-size: 22px; }
.empty-state > div .ui-icon { width: 22px; height: 22px; }
.empty-state h2 { margin-bottom: 4px; font-size: 18px; font-weight: 600; }
.empty-state p { max-width: 430px; font-size: var(--text-small); }
.empty-state .button { margin-top: 8px; }
.vehicle-import {
  margin-bottom: 20px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.vehicle-import h2 { margin-bottom: 4px; }
.vehicle-import p { margin: 0; font-size: var(--text-caption); }
.vehicle-import form { display: flex; align-items: center; gap: 8px; }
.file { min-width: 190px; min-height: 43px; padding: 8px 12px; display: flex; align-items: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; }
.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file span { display: grid; }
.file b { font-size: var(--text-caption); }
.file small { color: var(--muted); font-size: var(--text-caption); }
.file.has-file { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.logo-field { display: grid; gap: 4px; }
.logo-field-label { color: var(--ink-soft); font-weight: 500; }
.logo-field > small { margin-bottom: 4px; color: var(--muted); }
.logo-field .file { width: 100%; }
.logo-preview { max-width: min(100%, 340px); max-height: 80px; width: auto; height: auto; margin-top: 8px; display: block; border-radius: var(--radius-sm); }
.logo-remove { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.logo-remove input { width: auto; min-height: 0; }

.create-popover { position: relative; }
.create-popover > summary { list-style: none; }
.create-popover > summary::-webkit-details-marker { display: none; }
.popover-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 15;
  width: min(470px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-menu);
}
.popover-panel h2 { margin-bottom: 16px; }
.admin-toolbar { justify-content: flex-start; }
.admin-toolbar .table-search { flex: 1; }
.filter-group { display: flex; align-items: center; gap: 4px; }
.filter-chip { min-height: 33px; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); background: transparent; font-size: var(--text-caption); cursor: pointer; }
.filter-chip:hover { background: var(--canvas-deep); }
.filter-chip.active { border-color: var(--line); color: var(--ink); background: var(--paper); }
.filter-chip span { margin-left: 4px; color: var(--faint); }
.row-menu { width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); background: transparent; cursor: pointer; }
.row-menu:hover { border-color: var(--line); color: var(--ink); background: var(--canvas-deep); }
.row-actions-menu {
  position: fixed;
  z-index: 50;
  width: 240px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-menu);
}
.row-actions-menu button { width: 100%; min-height: 38px; padding: 8px 8px; border: 0; border-radius: var(--radius-sm); color: var(--ink-soft); background: transparent; font-size: var(--text-small); text-align: left; cursor: pointer; }
.row-actions-menu button:hover { color: var(--ink); background: var(--canvas-deep); }
.row-actions-menu form { margin: 0; }

/* Dialogs and summaries */
.admin-dialog, .confirm-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 32px 90px rgb(20 18 16 / .24);
}
.admin-dialog::backdrop, .confirm-dialog::backdrop { background: rgb(35 32 29 / .46); backdrop-filter: blur(3px); }
.dialog-head { padding: 20px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin-bottom: 2px; }
.dialog-head p { margin: 0; font-size: var(--text-caption); }
.dialog-close { width: 34px; height: 34px; flex: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); background: transparent; font-size: 22px; cursor: pointer; }
.dialog-close:hover { border-color: var(--line); color: var(--ink); background: var(--canvas-deep); }
/* Corpul dialogului: toate dialogurile existente sunt formulare, dar unele n-au
   ce trimite, doar ce arăta. Ambele primesc aceeași margine interioară ca
   antetul, altfel conținutul curge până în bordură. */
.admin-dialog > form, .admin-dialog > .dialog-body { padding: 20px; }
.confirm-dialog form { padding: 28px; text-align: center; }
.confirm-symbol { width: 42px; height: 42px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; color: var(--red); background: var(--red-soft); font-size: 18px; font-weight: 600; }
.confirm-dialog h2 { margin-bottom: 8px; }
.confirm-dialog p { margin-bottom: 24px; font-size: var(--text-small); }
.confirm-dialog form > div { display: flex; justify-content: center; gap: 8px; }
details summary { cursor: pointer; }

/* Metrics, account data and settings */
/* Pagina de stare are 4 fișe, cea de consum 3: coloanele se numără după
   conținut, altfel a treia fișă lasă un gol cât ea de mare în dreapta. */
/* Starea sistemului: bandă de verdict, listă de servicii, bandă de activitate.
   Punctele colorate sunt singurul semnal de culoare din ecran — restul rămâne
   pe filete, ca peste tot. */
.status-banner { margin-bottom: var(--space-lg); padding: var(--space-lg); display: flex; align-items: center; gap: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.status-banner h2 { margin-bottom: var(--space-3xs); }
.status-banner p { margin-bottom: 0; color: var(--muted); font-size: var(--text-small); }
.status-beacon { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 var(--space-2xs) var(--green-soft); }
.status-banner.warn .status-beacon { background: var(--amber); box-shadow: 0 0 0 var(--space-2xs) var(--amber-soft); }
.service-list, .attention-list { margin: 0 0 var(--space-lg); padding: 0 var(--space-md); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); list-style: none; }
.service-list > li, .attention-list > li { min-height: 60px; padding: var(--space-sm) 0; display: flex; align-items: center; gap: var(--space-sm); border-bottom: 1px solid var(--line); }
.service-list > li:last-child, .attention-list > li:last-child { border-bottom: 0; }
.service-list div { min-width: 0; flex: 1; }
.service-list strong { display: block; font-size: var(--text-control); }
.service-list small { display: block; color: var(--muted); font-size: var(--text-caption); }
.service-list b { color: var(--muted); font-weight: 500; text-align: right; }
.service-list .status { flex: none; width: 118px; justify-content: center; }
/* Punctul de stare e repetat de eticheta de alături, deci nu poartă informație
   proprie — de aceea n-are text ascuns. */
.service-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--green); }
.service-dot.warn { background: var(--amber); }
.service-dot.idle { background: var(--line-strong); }
.attention-list { margin-top: var(--space-md); }
.attention-list > li { min-height: 0; align-items: flex-start; }
.attention-list .service-dot { margin-top: 5px; }
.attention-list p { flex: 1; margin-bottom: 0; font-size: var(--text-small); }
/* Intrarea în contul unei firme e o mutație, deci un buton într-un formular, nu
   un link. `display: contents` scoate formularul din grilă, ca butonul să cadă
   exact unde ar fi căzut linkul. */
.attention-list form { display: contents; }
.attention-list a, .attention-list button { display: inline-flex; align-items: center; gap: var(--space-2xs); border: 0; color: var(--muted); background: none; font-size: var(--text-small); font-weight: 600; white-space: nowrap; cursor: pointer; }
.attention-list a:hover, .attention-list button:hover { color: var(--accent); }
/* Cele 30 de zile stau pe un rând care se strânge: benzile subțiază, nu se rup
   pe două rânduri. */
.attention-panel .empty { padding: var(--space-lg) 0 var(--space-xs); font-size: var(--text-small); }
.settings-meter, .route-progress > div, .wizard-route-progress { height: 5px; overflow: hidden; border-radius: var(--radius-pill); background: var(--canvas-deep); }
.settings-meter i, .route-progress i, .wizard-route-progress i { height: 100%; display: block; border-radius: inherit; background: var(--accent); }
.inline-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: var(--text-caption); }
.inline-stats span { white-space: nowrap; }
.inline-stats b { color: var(--ink); font-weight: 600; }
.inline-stats .has-error, .inline-stats .has-error b { color: var(--red); }
.account-list { display: grid; gap: 12px; }
.account-list article { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1.35fr); gap: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.account-list h3 { margin-top: 8px; }
.account-list p { margin: 0; font-size: var(--text-caption); }
.account-list form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.account-list form input { width: auto !important; min-width: 130px; flex: 1; }
.setting-row { display: flex; justify-content: space-between; gap: 20px; }
.setting-row p { margin: 0; font-size: var(--text-caption); }
.detail-list { margin: 20px 0 0; }
.detail-list > div { padding: 12px 0; display: grid; grid-template-columns: 130px 1fr; gap: 16px; border-top: 1px solid var(--line); }
.detail-list dt { color: var(--muted); font-size: var(--text-caption); }
.detail-list dd { margin: 0; font-size: var(--text-caption); font-weight: 500; }
.period-filter { display: flex; align-items: center; gap: 8px; }

/* Routes and imports */
.data-workflow { display: grid; gap: 16px; }
.route-workflow, .approximate-confirm {
  padding: 20px;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.workflow-index { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--canvas); font-size: 18px; }
.workflow-index .ui-icon { width: 19px; height: 19px; }
.route-workflow h2 { margin-bottom: 8px; }
.route-workflow p { margin-bottom: 12px; font-size: var(--text-caption); }
.route-progress { margin-top: 16px; }
.route-progress span { display: block; margin-top: 8px; color: var(--muted); font-size: var(--text-caption); }
.approximate-confirm { grid-template-columns: minmax(0, 1fr) auto; margin-top: 20px; border-color: var(--accent-line); background: var(--accent-soft); }
.import-summary { margin: 16px 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.import-summary > div { padding: 12px; border-right: 1px solid var(--line); }
.import-summary > div:last-child { border-right: 0; }
.import-summary dt { color: var(--muted); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .08em; }
.import-summary dd { margin: 4px 0 0; font-size: var(--text-control); font-weight: 500; }
.import-advanced { margin: 20px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.import-advanced > summary, .odometer-example > summary, .wizard-replace > summary { min-height: 44px; padding: 12px 12px; color: var(--ink-soft); background: var(--canvas); font-size: var(--text-caption); font-weight: 500; }
.import-advanced > :not(summary) { margin: 16px; }
.review-issues { display: grid; gap: 8px; }
.review-issues > div { padding: 12px 12px; border-radius: var(--radius-sm); font-size: var(--text-caption); }
.review-issues .error { margin: 0; }
.review-issues .warning { margin: 0; }
.advanced-ok { color: var(--green); font-size: var(--text-caption); }

/* Month preparation flow */
.month-start-card {
  max-width: 720px;
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.month-start-number { min-height: 260px; display: grid; place-items: center; border-right: 1px solid var(--line); color: var(--ink); background: var(--canvas); }
.month-start-number .ui-icon { width: 40px; height: 40px; }
.month-start-card > div:last-child { padding: 36px 36px; display: flex; flex-direction: column; justify-content: center; }
.month-start-card > div h2 { font-size: 22px; font-weight: 600; }
.month-start-card > div p { font-size: var(--text-small); }
.month-start-card form { margin-top: 12px; display: grid; gap: 12px; }
.month-decision { max-width: 820px; margin: 32px auto 16px; padding: 28px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.month-decision-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--canvas); font-size: 18px; }
.month-decision-icon .ui-icon { width: 21px; height: 21px; }
.month-decision h2 { font-size: 22px; font-weight: 600; }
.month-decision p { margin: 0; font-size: var(--text-small); }
.month-decision-actions { max-width: 820px; margin: 0 auto; display: flex; justify-content: flex-end; gap: 8px; }
.workflow-context { margin-bottom: 20px; display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; align-items: end; gap: 20px; }
.workflow-context > a { min-height: 30px; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--text-caption); font-weight: 500; }
.workflow-context > a:last-child { justify-content: flex-end; text-align: right; }
.workflow-context > div { text-align: center; }
.workflow-context span { color: var(--muted); font-size: var(--text-caption); font-weight: 600; letter-spacing: 0; text-transform: none; }
.workflow-context h1 { margin: 4px 0 0; font-size: 22px; }
.wizard-shell { max-width: 970px; margin: 0 auto; }
/* Banda de pași are exact atâtea coloane câți pași sunt. Fixată pe 4, lăsa o
   coloană goală la fluxul de 3 pași — o pată gri în capul cardului. */
.wizard-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--canvas); }
.wizard-steps > a, .wizard-steps > span { position: relative; min-width: 0; min-height: 64px; padding: 12px; display: grid; grid-template-columns: 27px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 8px; border-right: 1px solid var(--line); color: var(--muted); }
.wizard-steps > :last-child { border-right: 0; }
.wizard-steps > a:hover { background: var(--canvas-deep); }
.wizard-steps > .active { color: var(--ink); background: var(--paper); }
.wizard-steps b { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; align-self: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); background: var(--paper); font-size: var(--text-caption); }
.wizard-steps b .ui-icon { width: 15px; height: 15px; }
.wizard-steps .active b { border-color: var(--dark); color: var(--dark-ink); background: var(--dark); }
.wizard-steps .done b { border-color: var(--green-line); color: var(--green); background: var(--green-soft); }
.wizard-steps span span, .wizard-steps a span { overflow: hidden; color: inherit; font-size: var(--text-caption); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wizard-steps small { color: var(--faint); font-size: var(--text-caption); }
.wizard-card { overflow: hidden; border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); background: var(--paper); }
.wizard-card > header { padding: 24px 32px 20px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.wizard-card > header > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: var(--text-caption); font-weight: 600; letter-spacing: 0; text-transform: none; }
.wizard-card > header h2, .wizard-card > header h1 { margin-bottom: 8px; font-size: 22px; font-weight: 600; }
.wizard-card > header p { max-width: 650px; margin: 0; font-size: var(--text-small); }
.wizard-content { padding: 28px 32px; }
.wizard-card > footer { padding: 12px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); color: var(--muted); background: var(--canvas); font-size: var(--text-caption); }
.wizard-card > footer a, .wizard-help-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wizard-top { max-width: 970px; margin: 0 auto 12px; }
.wizard-top a { min-height: 30px; display: inline-flex; align-items: center; color: var(--muted); font-size: var(--text-caption); }
.wizard-upload { display: grid; gap: 16px; }
.wizard-drop { min-height: 180px; padding: 24px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--canvas); text-align: center; cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.wizard-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.wizard-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wizard-file-icon { width: 42px; height: 42px; margin-bottom: 12px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper); font-size: 18px; }
.wizard-file-icon .ui-icon { width: 19px; height: 19px; }
.wizard-drop strong { font-size: var(--text-body); }
.wizard-drop small { max-width: 420px; margin-top: 4px; color: var(--muted); font-size: var(--text-caption); font-weight: 400; }
.wizard-drop > .has-file { color: var(--accent); }
.upload-assistance { padding: 12px 12px; display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); background: var(--paper); font-size: var(--text-caption); }
.upload-assistance a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wizard-primary { justify-self: end; }
.wizard-success, .wizard-warning { padding: 20px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--green-line); border-radius: var(--radius); color: var(--green); background: var(--green-soft); }
.wizard-warning { border-color: var(--amber-line); color: var(--amber); background: var(--amber-soft); }
.wizard-success > span, .wizard-warning > span { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 1px solid currentColor; border-radius: var(--radius-xs); font-size: var(--text-small); font-weight: 600; }
.wizard-success > span .ui-icon, .wizard-warning > span .ui-icon { width: 17px; height: 17px; }
.wizard-success h2, .wizard-warning h2 { margin-bottom: 4px; font-size: var(--text-lead); }
.wizard-success p, .wizard-warning p { margin: 0; color: inherit; font-size: var(--text-caption); opacity: .9; }
.wizard-actions { margin-top: 20px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.wizard-replace { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.wizard-replace .wizard-upload { padding: 16px; }
.route-explain { padding: 8px 0 20px; text-align: center; }
.route-picture { width: fit-content; margin: 0 auto 20px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--canvas); font: 500 var(--text-small)/1 var(--mono); }
.route-picture span { color: var(--accent); }
.route-explain p { max-width: 540px; margin: 0 auto 16px; font-size: var(--text-caption); }
.route-explain small { display: block; margin-top: 8px; color: var(--muted); font-size: var(--text-caption); }
.wizard-help-link { margin-top: 16px; display: block; font-size: var(--text-caption); text-align: center; }
.odometer-example { margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.odometer-example p { margin: 12px; font-size: var(--text-caption); }
.vehicle-km { display: grid; gap: 12px; }
.vehicle-km article { padding: 16px; display: grid; grid-template-columns: minmax(160px, 1fr) repeat(2, minmax(170px, .7fr)) minmax(140px, .8fr) auto; align-items: end; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.vehicle-km article.vehicle-excluded { opacity: .5; background: var(--canvas-deep); }
.vehicle-identity h3 { margin: 8px 0 1px; }
.vehicle-identity p { margin: 0; font-size: var(--text-caption); }
.vehicle-km em { align-self: center; color: var(--muted); font-size: var(--text-caption); font-style: normal; }
.vehicle-km em.km-valid { color: var(--green); }
.vehicle-km em.km-invalid { color: var(--red); }

/* Citirile lunare de kilometraj: un singur câmp pe mașină, cu ancora sub el.
   `auto-fit` ține locul unei perechi de media query — la lățimi mici cele trei
   coloane devin una singură, în ordinea în care se citesc oricum. */
.reading-form { display: grid; gap: 20px; }
.reading-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; gap: 12px; }
.reading-card label { display: grid; gap: 4px; }
.reading-anchor, .reading-diff { align-self: center; color: var(--muted); }
.reading-diff { font-style: normal; }
.reading-diff.km-valid { color: var(--green); }
.reading-diff.km-invalid { color: var(--red); }
.period-picker { display: grid; gap: 4px; min-width: 200px; }
.check { min-height: 43px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { position: absolute; opacity: 0; }
.check > span { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--paper); }
.check input:checked + span { border-color: var(--dark); background: var(--dark); }
.check input:checked + span::after { width: 4px; height: 8px; margin-top: -2px; content: ""; border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(45deg); }
.check b { font-size: var(--text-caption); font-weight: 500; }
.anaf-progress { margin: 0 0 16px; color: var(--muted); font-size: var(--text-caption); }
/* Subtitlu în interiorul unui formular lung, fără să rupă grila de câmpuri. */
.form-section { margin-top: 4px; padding-top: 16px; display: grid; gap: 4px; border-top: 1px solid var(--line); }
.form-section strong { font-size: var(--text-small); font-weight: 600; }
.form-section span { color: var(--muted); font-size: var(--text-caption); }
.wizard-review { margin-top: 16px; padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); }
.wizard-review > span { color: var(--muted); font-size: var(--text-caption); }
.wizard-review > strong { font-size: var(--text-small); }
.wizard-review > small { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-caption); }
.generate-status { margin: 12px 0; color: var(--muted); font-size: var(--text-caption); text-align: right; }
.generate-form > .button:last-child { margin-left: auto; display: flex; }

/* Documents and results */
.document-months { display: grid; gap: 12px; }
.document-months article, .result-card, .confirm-bar { padding: 20px; display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.document-month-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--canvas); font-size: 18px; }
.document-month-icon .ui-icon { width: 20px; height: 20px; }
.document-month-copy { flex: 1; }
.document-month-copy > span { color: var(--faint); font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.document-month-copy h2 { margin: 4px 0; font-size: 22px; text-transform: capitalize; }
.document-month-copy p { margin: 0; font-size: var(--text-caption); }
.document-month-actions, .result-actions { display: flex; align-items: center; gap: 8px; }
.confirm-bar { margin-bottom: 20px; justify-content: space-between; }
.confirm-bar p { margin: 4px 0 0; font-size: var(--text-caption); }
.final-confirmation { border-color: var(--green-line); background: var(--green-soft); }
.results { display: grid; gap: 12px; }
.result-card { justify-content: space-between; }
.result-card > div:first-child { display: flex; align-items: center; gap: 12px; }
/* Verdictul stă lângă butoanele de descărcare, nu la începutul rândului: e
   ultimul lucru de citit înainte de a lua fișierul, nu o etichetă de listă. */
.result-actions > .status { margin-right: 8px; }
.check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.check-list > li { padding: 10px 0; display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--line); }
.check-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.check-list > li:first-child { padding-top: 0; }
.check-list > li > span { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.check-list > li > span > .ui-icon { width: 13px; height: 13px; }
.check-list > li.passed > span { color: var(--green); background: var(--green-soft); }
.check-list > li.failed > span { color: var(--amber); background: var(--amber-soft); }
.check-list strong { display: block; font-weight: 500; }
.check-list small, .check-note { display: block; color: var(--muted); }
.check-note { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.result-card h2 { margin: 0; font-size: var(--text-lead); }
.result-card p { margin: 0; font-size: var(--text-caption); }
.result-actions > a:not(.button) { color: var(--ink); font-size: var(--text-caption); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Sub card, un singur rând cu cele două lucruri de citit despre foaie. Amândouă
   deschid un dialog: un acordeon lângă un modal ar fi fost două feluri de a
   spune „mai vezi ceva aici". */
.result-more { margin-top: -12px; margin-bottom: 8px; padding: 12px 20px; display: flex; align-items: center; gap: 20px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--paper); }
.result-more .inline-link { color: var(--ink-soft); font-size: var(--text-control); font-weight: 500; }
.result-more .inline-link:hover { color: var(--accent); }
/* Tabelul deplasărilor are patru coloane, deci nu încape în lățimea implicită. */
.admin-dialog.trips-dialog { width: min(760px, calc(100vw - 32px)); }
.trips-dialog .table-wrap { max-height: 60vh; overflow-y: auto; }
.results > .table-wrap { margin-top: -12px; margin-bottom: 8px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--paper); }

/* Authentication */
.auth-body { background: var(--canvas); }
.login-shell { min-height: 100vh; padding: 24px; display: grid; place-items: center; }
.login-stage { width: min(1040px, 100%); min-height: min(680px, calc(100vh - 48px)); display: grid; grid-template-columns: minmax(390px, .9fr) minmax(400px, 1.1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 18px 60px rgb(17 24 39 / .08); }
.login-pane { min-width: 0; padding: 28px 36px; display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); text-align: center; }
.login-pane .login-brand { width: fit-content; margin-top: var(--space-lg); gap: var(--space-md); }
.login-pane .login-brand-mark { width: 44px; height: 44px; border-radius: var(--radius-sm); }
.login-pane .login-brand-mark svg { width: 26px; height: 26px; }
.login-pane .brand-copy { text-align: left; }
.login-pane .brand-copy strong { font-size: 20px; }
.login-pane .brand-copy small { font-size: var(--text-small); }
.login-brand .brand-copy strong { color: var(--ink); }
.login-brand .brand-copy small { color: var(--muted); }
.login-brand-mark { color: var(--ink); background: var(--paper); }
.login-content, .password-reset-content { width: min(350px, 100%); margin: auto; }
.auth-heading { margin-bottom: 24px; }
.auth-heading h1, .password-reset-content h1 { margin-bottom: 8px; font-size: 32px; font-weight: 600; }
.auth-heading p, .password-reset-content p { font-size: var(--text-control); }
.auth-form { display: grid; gap: 16px; }
.auth-form label { text-align: left; }
.forgot-password { margin-top: -8px; color: var(--muted); font-size: var(--text-small); font-weight: 500; }
.forgot-password:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 76px !important; }
.password-field button { position: absolute; top: 5px; right: 5px; min-height: 33px; padding: 0 8px; border: 0; border-radius: var(--radius-xs); color: var(--muted); background: var(--canvas-deep); font-size: var(--text-caption); cursor: pointer; }
.support-button { min-height: 36px; width: fit-content; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--text-small); }
.support-button .ui-icon { width: 18px; height: 18px; }
.login-image { min-width: 0; overflow: hidden; background: var(--canvas-deep); }
.login-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.auth-message { margin-bottom: 20px; text-align: center; }
.auth-message > .ui-icon { width: 48px; height: 48px; margin: 0 auto 20px; padding: 12px; border-radius: 50%; color: var(--green); background: var(--green-soft); }

/* Public support */
.support-body { background: var(--canvas); }
.support-nav, .support-footer, .support-body > main { width: min(1200px, calc(100% - 32px)); margin: 0 auto; border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
.support-nav { min-height: 65px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--canvas); }
.support-nav nav { display: flex; align-items: center; gap: 28px; }
.support-nav nav > a { color: var(--muted); font-size: var(--text-caption); font-weight: 500; }
.support-nav nav > a:hover { color: var(--ink); }
.support-login { min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-sm); color: var(--paper) !important; background: var(--accent); }
.support-hero { min-height: 550px; padding: 90px 40px 70px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(230px, .55fr); align-items: end; gap: 60px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.support-hero > div { max-width: 720px; }
.support-hero h1 { max-width: 640px; font-size: clamp(3.3rem, 7vw, 5.6rem); font-weight: 400; line-height: .94; }
.support-hero p { max-width: 610px; font-size: var(--text-lead); line-height: 1.6; }
.support-hero-actions { margin-top: 28px; display: flex; gap: 8px; }
.support-hero-actions a { min-height: 39px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); font-size: var(--text-caption); font-weight: 500; }
.support-hero-actions a:first-child { border-color: var(--accent); color: var(--paper); background: var(--accent); }
.support-hero aside { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.support-hero aside > span, .support-workflow span, .support-cta span { color: var(--muted); font-size: var(--text-caption); font-weight: 600; letter-spacing: .13em; }
.support-hero aside strong { margin: 20px 0 4px; display: block; font-size: 36px; font-weight: 400; letter-spacing: -.05em; }
.support-hero aside p { margin: 0; font-size: var(--text-caption); }
.support-section { padding: 80px 40px; border-bottom: 1px solid var(--line); background: var(--paper); }
.support-section-head { max-width: 680px; margin-bottom: 40px; }
.support-section-head > span { color: var(--muted); font-size: var(--text-caption); font-weight: 600; letter-spacing: .13em; }
.support-section-head h2 { margin: 8px 0 8px; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 400; }
.support-section-head p { font-size: var(--text-small); }
.support-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.support-guide-grid article { min-height: 350px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.support-number { color: var(--faint); font: 500 var(--text-caption)/1 var(--mono); }
.support-icon { width: 38px; height: 38px; margin: 36px 0 20px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); }
.support-guide-grid h3 { font-size: 22px; font-weight: 400; }
.support-guide-grid p, .support-guide-grid li { font-size: var(--text-caption); }
.support-guide-grid ul { margin: 20px 0 0; padding-left: 16px; color: var(--muted); }
.support-workflow { padding: 76px 40px; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 70px; border-bottom: 1px solid rgb(247 247 244 / .16); color: var(--dark-ink); background: var(--dark); }
.support-workflow h2 { margin: 12px 0 0; color: var(--dark-ink); font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 400; }
.support-workflow p { margin: 0; color: rgb(247 247 244 / .74); font-size: var(--text-control); }
.support-faq-grid { border-top: 1px solid var(--line); }
.support-faq-grid details { border-bottom: 1px solid var(--line); }
.support-faq-grid summary { min-height: 70px; padding: 20px 0; color: var(--ink); font-size: 18px; font-weight: 500; list-style-position: inside; }
.support-faq-grid details p { max-width: 750px; padding: 0 0 24px 24px; font-size: var(--text-small); }
.support-cta { padding: 54px 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--line); background: var(--accent-soft); }
.support-cta h2 { margin: 8px 0 4px; font-size: 32px; font-weight: 400; }
.support-cta p { margin: 0; font-size: var(--text-caption); }
.support-cta a { min-height: 41px; padding: 8px 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-sm); color: var(--paper); background: var(--accent); font-size: var(--text-control); font-weight: 500; }
.support-footer { min-height: 90px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); background: var(--canvas); font-size: var(--text-caption); }

/* Documentation support center */
.support-body { min-height: 100vh; background: var(--canvas); }
.support-docs-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 66px;
  padding: 0 max(24px, calc((100vw - 1440px) / 2 + 24px));
  display: grid;
  grid-template-columns: 260px minmax(280px, 440px) 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: rgb(247 247 244 / .94);
  backdrop-filter: blur(10px);
}
.support-docs-brand { width: fit-content; display: inline-flex; align-items: center; gap: 12px; }
.support-docs-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-xs); color: var(--paper); background: var(--dark); font-size: 18px; }
.support-docs-mark .ui-icon { width: 17px; height: 17px; }
.support-docs-brand-copy { display: grid; }
.support-docs-brand-copy strong { font-size: var(--text-lead); line-height: 1.15; letter-spacing: -.02em; }
.support-docs-brand-copy small { color: var(--muted); font-size: var(--text-small); line-height: 1.2; }
.support-docs-menu { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper); cursor: pointer; }
.support-docs-search { position: relative; min-width: 0; display: flex; align-items: center; }
.support-docs-search > span { position: absolute; left: 13px; z-index: 1; color: var(--muted); font-size: 18px; pointer-events: none; }
.support-docs-search > span .ui-icon { width: 17px; height: 17px; }
.support-docs-search input { height: 40px; min-height: 40px !important; padding: 8px 70px 8px 40px !important; border-color: var(--line); background: var(--paper); font-size: var(--text-body); }
.support-docs-search kbd { position: absolute; right: 8px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--muted); background: var(--canvas); font: 500 var(--text-caption)/1.3 var(--font); pointer-events: none; }
.support-search-results { position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; width: min(560px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 100px)); padding: 8px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-menu); }
.support-search-results a { padding: 12px 12px; display: grid; gap: 4px; border-radius: var(--radius-sm); }
.support-search-results a:hover, .support-search-results a:focus-visible { background: var(--canvas-deep); }
.support-search-results strong { font-size: var(--text-body); }
.support-search-results span, .support-search-results p { margin: 0; color: var(--muted); font-size: var(--text-small); }
.support-search-results p { padding: 20px; text-align: center; }
.support-docs-app { min-height: 39px; padding: 8px 12px; justify-self: end; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-sm); color: var(--paper); background: var(--accent); font-size: var(--text-control); font-weight: 500; }
.support-docs-app:hover { background: var(--accent-hover); }
.support-cta a:hover, .support-hero-actions a:first-child:hover, .support-login:hover { background: var(--accent-hover); }
.support-docs-layout { width: min(1440px, 100%); min-height: calc(100vh - 66px); margin: 0 auto; display: grid; grid-template-columns: 270px minmax(0, 1fr) 230px; }
.support-docs-backdrop { display: none; }
.support-docs-sidebar {
  position: sticky;
  top: 66px;
  height: calc(100vh - 66px);
  padding: 24px 20px 20px 24px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--canvas);
}
.support-docs-sidebar-head { display: none; }
.support-docs-sidebar nav { display: grid; gap: 24px; }
.support-docs-sidebar nav section { display: grid; gap: 2px; }
.support-docs-sidebar h2 { margin: 0 0 8px; padding: 0 8px; color: var(--ink); font-size: var(--text-control); font-weight: 600; letter-spacing: 0; }
.support-docs-sidebar nav a { min-height: 34px; padding: 8px 8px; display: flex; align-items: center; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; color: var(--muted); font-size: var(--text-control); line-height: 1.35; }
.support-docs-sidebar nav a:hover { color: var(--ink); background: var(--canvas-deep); }
.support-docs-sidebar nav a[aria-current="page"] { border-left-color: var(--accent); color: var(--accent-hover); background: var(--accent-soft); font-weight: 600; }
.support-docs-sidebar footer { margin-top: auto; padding: 20px 8px 4px; display: grid; gap: 4px; border-top: 1px solid var(--line); }
.support-docs-sidebar footer span { color: var(--muted); font-size: var(--text-small); }
.support-docs-sidebar footer a { color: var(--ink); font-size: var(--text-small); font-weight: 600; }
.support-docs-content { min-width: 0; padding: 28px clamp(36px, 5vw, 74px) 50px; background: var(--paper); }
.support-docs-content > article { width: min(760px, 100%); margin: 0 auto; }
.docs-breadcrumb { width: min(760px, 100%); margin: 0 auto 40px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--text-small); }
.docs-breadcrumb a:hover { color: var(--ink); }
.docs-breadcrumb span { color: var(--line-strong); }
.docs-breadcrumb strong { color: var(--ink-soft); font-weight: 600; }
.docs-article-head { margin-bottom: 48px; }
.docs-article-head > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: var(--text-small); font-weight: 600; letter-spacing: 0; text-transform: none; }
.docs-article-head h1 { margin-bottom: 12px; font-size: clamp(2.25rem, 4.5vw, 3.65rem); font-weight: 600; line-height: 1.04; letter-spacing: -.04em; }
.docs-article-head p { max-width: 690px; margin: 0; color: var(--ink-soft); font-size: 18px; line-height: 1.55; }
.docs-mobile-toc { display: none; }
.docs-section { padding-top: 8px; margin-bottom: 48px; scroll-margin-top: 92px; }
.docs-section > h2 { margin-bottom: 16px; display: flex; align-items: baseline; gap: 8px; font-size: 26px; font-weight: 500; }
.docs-section > h2 a { margin-left: -24px; color: transparent; font-size: var(--text-body); }
.docs-section > h2:hover a, .docs-section > h2 a:focus-visible { color: var(--accent); }
.docs-section > p { margin-bottom: 20px; color: var(--ink-soft); font-size: var(--text-lead); line-height: 1.75; }
.docs-section code { padding: 2px 4px; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--accent-hover); background: var(--canvas); font: 500 var(--text-control)/1.4 var(--mono); }
.docs-checklist { margin: 20px 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.docs-checklist li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-soft); font-size: var(--text-lead); line-height: 1.55; }
.docs-checklist li > span { width: 20px; height: 20px; margin-top: 2px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); font-size: var(--text-caption); font-weight: 600; }
.docs-checklist li > span .ui-icon { width: 12px; height: 12px; }
.docs-steps { margin: 20px 0; padding: 0; display: grid; list-style: none; }
.docs-steps li { position: relative; padding: 0 0 24px 48px; display: grid; grid-template-columns: 1fr; }
.docs-steps li:not(:last-child)::before { content: ""; position: absolute; top: 31px; bottom: 0; left: 15px; width: 1px; background: var(--line); }
.docs-steps li > span { position: absolute; top: 0; left: 0; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper); font-size: var(--text-small); font-weight: 600; }
.docs-steps li strong { display: block; margin-bottom: 4px; font-size: var(--text-lead); }
.docs-steps li p { margin: 0; color: var(--muted); font-size: var(--text-body); line-height: 1.55; }
.docs-callout { margin: 24px 0; padding: 16px 20px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--canvas); }
.docs-callout > span { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--ink-soft); background: var(--paper); font-size: var(--text-small); font-weight: 600; }
.docs-callout > span .ui-icon { width: 14px; height: 14px; }
.docs-callout strong { display: block; margin-bottom: 4px; font-size: var(--text-body); }
.docs-callout p { margin: 0; color: var(--muted); font-size: var(--text-control); line-height: 1.55; }
.docs-callout.success { border-color: var(--green-line); background: var(--green-soft); }
.docs-callout.success > span { color: var(--green); }
.docs-callout.warning { border-color: var(--amber-line); background: var(--amber-soft); }
.docs-callout.warning > span { color: var(--amber); }
.docs-table { margin: 20px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.docs-table table { min-width: 560px; font-size: var(--text-body); }
.docs-table th { padding: 12px 16px; font-size: var(--text-caption); }
.docs-table td { padding: 12px 16px; line-height: 1.5; }
.docs-table td:first-child { width: 31%; }
.docs-app-link { margin: 24px 0; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: border-color .16s ease, background-color .16s ease; }
.docs-app-link:hover { border-color: var(--line-strong); background: var(--canvas); }
.docs-app-link > span { display: grid; gap: 2px; }
.docs-app-link small { color: var(--muted); font-size: var(--text-caption); font-weight: 600; letter-spacing: .12em; }
.docs-app-link strong { font-size: var(--text-lead); }
.docs-app-link em { color: var(--muted); font-size: var(--text-control); font-style: normal; }
.docs-app-link > .action-icon { width: 36px; height: 36px; padding: 12px; border-radius: var(--radius-sm); color: var(--dark-ink); background: var(--dark); }
.docs-next-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.docs-next-grid a { min-height: 100px; padding: 16px; display: flex; justify-content: space-between; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.docs-next-grid a:hover { border-color: var(--line-strong); background: var(--canvas); }
.docs-next-grid strong { font-size: var(--text-lead); }
.docs-next-grid span { color: var(--muted); font-size: var(--text-control); }
.docs-pager { margin-top: 70px; padding-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); }
.docs-pager a { min-height: 80px; padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius); }
.docs-pager a:hover { border-color: var(--line-strong); background: var(--canvas); }
.docs-pager a:last-child { text-align: right; }
.docs-pager small { color: var(--muted); font-size: var(--text-caption); font-weight: 600; letter-spacing: .08em; }
.docs-pager small .ui-icon { width: 13px; height: 13px; display: inline-block; }
.docs-pager strong { font-size: var(--text-body); }
.support-docs-content-footer { width: min(760px, 100%); margin: var(--space-2xl) auto 0; padding-top: 24px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-small); }
.support-docs-content-footer a { color: var(--ink); font-weight: 600; }
.support-docs-content-footer a, .support-docs-toc > div a, .support-docs-sidebar footer a { display: inline-flex; align-items: center; gap: 4px; }
.support-docs-content-footer .ui-icon, .support-docs-toc > div .ui-icon, .support-docs-sidebar footer .ui-icon { width: 14px; height: 14px; }
.support-docs-toc { position: sticky; top: 66px; height: calc(100vh - 66px); padding: 36px 24px 24px; overflow-y: auto; border-left: 1px solid var(--line); background: var(--canvas); }
.support-docs-toc > strong { display: block; margin-bottom: 12px; color: var(--ink); font-size: var(--text-small); }
.support-docs-toc nav { display: grid; }
.support-docs-toc nav a { padding: 4px 0 4px 12px; border-left: 1px solid var(--line); color: var(--muted); font-size: var(--text-small); line-height: 1.4; }
.support-docs-toc nav a:hover { color: var(--ink); }
.support-docs-toc nav a.active { border-left-color: var(--accent); color: var(--accent-hover); font-weight: 600; }
.support-docs-toc > div { margin-top: 28px; padding: 16px; display: grid; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.support-docs-toc > div span { color: var(--muted); font-size: var(--text-caption); }
.support-docs-toc > div a { color: var(--ink); font-size: var(--text-small); font-weight: 600; }

/* Legăturile care se poartă ca niște comenzi (nu cele din corpul textului)
   primesc o țintă de cel puțin 24px, cât cere și testul e2e pentru butoane.
   Înălțimea vine din min-height, nu din padding, ca să nu miște rândurile. */
.col-head > a,
.dashboard-issues li a,
.docs-section > h2 a,
.docs-mobile-toc a,
.section-title a,
.upload-assistance a,
.wizard-card > footer a,
.docs-breadcrumb a,
.support-docs-content-footer a {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wizard-help-link { min-height: 24px; display: flex; align-items: center; justify-content: center; }
/* Aceeași regulă în centrul de ajutor și în fișele de stare: legăturile de
   navigare sunt comenzi, nu text curent. */
.docs-pager a,
.docs-related a,
.support-docs-toc > div a,
.support-docs-sidebar footer a { min-height: 24px; display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 1180px) {
  .support-docs-header { grid-template-columns: 240px minmax(260px, 420px) 1fr; }
  .support-docs-layout { grid-template-columns: 250px minmax(0, 1fr); }
  .support-docs-toc { display: none; }
  .docs-mobile-toc { margin: -20px 0 36px; display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .docs-mobile-toc summary { padding: 12px 12px; color: var(--ink-soft); background: var(--canvas); font-size: var(--text-control); font-weight: 600; }
  .docs-mobile-toc nav { padding: 8px 12px 12px; display: grid; gap: 8px; }
  .docs-mobile-toc a { color: var(--muted); font-size: var(--text-control); }
}

@media (max-width: 860px) {
  .support-docs-header { grid-template-columns: auto minmax(0, 1fr) minmax(220px, 350px) auto; padding: 0 16px; gap: 12px; }
  .support-docs-menu { display: grid; place-items: center; }
  .support-docs-brand { overflow: hidden; }
  .support-docs-brand-copy small { display: none; }
  .support-docs-layout { grid-template-columns: minmax(0, 1fr); }
  .support-docs-sidebar { position: fixed; top: 0; left: 0; z-index: 80; width: min(310px, calc(100vw - 44px)); height: 100vh; padding: 0 20px 20px; transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow-menu); }
  .support-docs-sidebar.open { transform: translateX(0); }
  .support-docs-sidebar-head { min-height: 66px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
  .support-docs-sidebar-head strong { font-size: var(--text-body); }
  .support-docs-sidebar-head button { width: 38px; height: 38px; border: 0; border-radius: var(--radius-sm); color: var(--muted); background: transparent; font-size: 22px; cursor: pointer; }
  .support-docs-sidebar nav { padding-top: 20px; }
  .support-docs-backdrop { position: fixed; inset: 0; z-index: 79; width: 100%; height: 100%; border: 0; background: rgb(35 32 29 / .42); }
  body.support-nav-open .support-docs-backdrop { display: block; }
  body.support-nav-open { overflow: hidden; }
  .support-docs-content { padding-right: clamp(24px, 6vw, 56px); padding-left: clamp(24px, 6vw, 56px); }
}

@media (max-width: 650px) {
  .support-docs-header { height: auto; min-height: 116px; padding: 12px 16px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 40px 40px; }
  .support-docs-search { grid-column: 1 / -1; grid-row: 2; }
  .support-docs-search input { width: 100%; }
  .support-docs-app { min-height: 38px; padding: 8px 12px; font-size: 0; }
  .support-docs-app .ui-icon { width: 18px; height: 18px; }
  .support-docs-content { padding: 24px 16px 44px; }
  .docs-breadcrumb { margin-bottom: 28px; }
  .docs-article-head { margin-bottom: 40px; }
  .docs-article-head h1 { font-size: 2.65rem; }
  .docs-article-head p { font-size: var(--text-lead); }
  .docs-section { margin-bottom: 44px; }
  .docs-section > h2 { font-size: 22px; }
  .docs-section > h2 a { display: none; }
  .docs-table { margin-right: -16px; border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
  .docs-next-grid, .docs-pager { grid-template-columns: 1fr; }
  .docs-pager a:last-child { text-align: left; }
  .docs-pager > span { display: none; }
}

/* Processing overlay */
.processing-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgb(35 32 29 / .55); backdrop-filter: blur(5px); }
.processing-overlay > div { width: min(430px, 100%); padding: 36px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-align: center; box-shadow: 0 30px 90px rgb(0 0 0 / .22); }
.processing-spinner { width: 38px; height: 38px; margin: 0 auto 20px; display: block; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.processing-overlay h2 { margin-bottom: 8px; }
.processing-overlay p { margin-bottom: 8px; font-size: var(--text-small); }
.processing-overlay small { color: var(--faint); font-size: var(--text-caption); }
body.processing { overflow: hidden; }

/* Readable type scale — compact product UI without micro-text */
.brand-copy strong { font-size: var(--text-body); }
.brand-copy small,
.nav-label,
.user-meta span,
.saved-state i,
.top-help span,
.eyebrow,
.support-eyebrow,
.coordinates span,
.month-hero > div > span,
.import-summary dt,
.workflow-context span,
.wizard-steps small,
.wizard-card > header > span,
.document-month-copy > span,
.support-hero aside > span,
.support-workflow span,
.support-cta span,
.support-section-head > span,
.support-number,
.support-footer,
.processing-overlay small { font-size: var(--text-caption); }

.sidebar nav a,
.button,
.link-button,
label,
.row-actions-menu button,
.filter-chip,
.support-nav nav > a,
.support-hero-actions a,
.support-cta a { font-size: var(--text-control); }

.user-meta strong,
.crumb,
.saved-state,
.top-help,
.status,
.pill,
.reset-request-badge,
label small,
.field-error,
.form-help,
.help-box p,
.coordinates strong,
.collection-toolbar > div span,
.cell-meta,
.table-footer,
.vehicle-import p,
.file small,
.dialog-head p,
.service-list b,
.inline-stats,
.account-list p,
.detail-list dt,
.route-progress span,
.review-issues > div,
.advanced-ok,
.workflow-context > a,
.wizard-steps b,
.wizard-steps span span,
.wizard-steps a span,
.wizard-card > footer,
.wizard-top a,
.wizard-drop small,
.upload-assistance,
.wizard-success p,
.wizard-warning p,
.route-explain small,
.wizard-help-link,
.vehicle-identity p,
.vehicle-km em,
.check b,
.wizard-review > span,
.wizard-review > small,
.generate-status,
.document-month-copy p,
.result-card p,
.result-actions > a:not(.button),
.forgot-password,
.password-field button,
.support-button,
.support-hero aside p,
.support-guide-grid p,
.support-guide-grid li,
.plate,
.check-list small,
.check-note,
.reading-anchor,
.account-switch-open,
.account-switch-list span,
.account-switch-empty,
.impersonation-bar,
.reading-diff { font-size: var(--text-small); }

input:not([type="checkbox"]):not([type="color"]):not([type="file"]),
select,
textarea,
.page-head p,
.section-title p,
.banner,
.error,
.help-box strong,
.setup-gate strong,
.setup-gate p,
.month-hero p,
table,
.collection-toolbar > div strong,
.file b,
.confirm-dialog p,
.setting-row p,
.detail-list dd,
.route-workflow p,
.import-advanced > summary,
.odometer-example > summary,
.wizard-replace > summary,
.month-start-card > div p,
.month-decision p,
.wizard-card > header p,
.route-explain p,
.odometer-example p,
.wizard-review > strong,
.confirm-bar p,
.auth-heading p,
.password-reset-content p,
.support-section-head p,
.support-faq-grid details p,
.support-cta p,
.processing-overlay p { font-size: var(--text-control); }

th { font-size: var(--text-caption); }
.setup-gate strong,
.collection-toolbar > div strong,
.file b,
.import-summary dd,
.wizard-drop strong,
.wizard-review > strong { font-size: var(--text-body); }
.wizard-success h2,
.wizard-warning h2,
.result-card h2 { font-size: 18px; }

.button { min-height: 40px; padding: 8px 16px; }
.top-help { min-height: 32px; }
input:not([type="checkbox"]):not([type="color"]):not([type="file"]), select, textarea { min-height: 40px; }
.wizard-steps > a, .wizard-steps > span { min-height: 64px; }
.support-guide-grid article { min-height: 340px; }


/* Progress widths as classes — the CSP forbids inline style attributes */
.bar-0 > i { width: 0%; }
.bar-1 > i { width: 1%; }
.bar-2 > i { width: 2%; }
.bar-3 > i { width: 3%; }
.bar-4 > i { width: 4%; }
.bar-5 > i { width: 5%; }
.bar-6 > i { width: 6%; }
.bar-7 > i { width: 7%; }
.bar-8 > i { width: 8%; }
.bar-9 > i { width: 9%; }
.bar-10 > i { width: 10%; }
.bar-11 > i { width: 11%; }
.bar-12 > i { width: 12%; }
.bar-13 > i { width: 13%; }
.bar-14 > i { width: 14%; }
.bar-15 > i { width: 15%; }
.bar-16 > i { width: 16%; }
.bar-17 > i { width: 17%; }
.bar-18 > i { width: 18%; }
.bar-19 > i { width: 19%; }
.bar-20 > i { width: 20%; }
.bar-21 > i { width: 21%; }
.bar-22 > i { width: 22%; }
.bar-23 > i { width: 23%; }
.bar-24 > i { width: 24%; }
.bar-25 > i { width: 25%; }
.bar-26 > i { width: 26%; }
.bar-27 > i { width: 27%; }
.bar-28 > i { width: 28%; }
.bar-29 > i { width: 29%; }
.bar-30 > i { width: 30%; }
.bar-31 > i { width: 31%; }
.bar-32 > i { width: 32%; }
.bar-33 > i { width: 33%; }
.bar-34 > i { width: 34%; }
.bar-35 > i { width: 35%; }
.bar-36 > i { width: 36%; }
.bar-37 > i { width: 37%; }
.bar-38 > i { width: 38%; }
.bar-39 > i { width: 39%; }
.bar-40 > i { width: 40%; }
.bar-41 > i { width: 41%; }
.bar-42 > i { width: 42%; }
.bar-43 > i { width: 43%; }
.bar-44 > i { width: 44%; }
.bar-45 > i { width: 45%; }
.bar-46 > i { width: 46%; }
.bar-47 > i { width: 47%; }
.bar-48 > i { width: 48%; }
.bar-49 > i { width: 49%; }
.bar-50 > i { width: 50%; }
.bar-51 > i { width: 51%; }
.bar-52 > i { width: 52%; }
.bar-53 > i { width: 53%; }
.bar-54 > i { width: 54%; }
.bar-55 > i { width: 55%; }
.bar-56 > i { width: 56%; }
.bar-57 > i { width: 57%; }
.bar-58 > i { width: 58%; }
.bar-59 > i { width: 59%; }
.bar-60 > i { width: 60%; }
.bar-61 > i { width: 61%; }
.bar-62 > i { width: 62%; }
.bar-63 > i { width: 63%; }
.bar-64 > i { width: 64%; }
.bar-65 > i { width: 65%; }
.bar-66 > i { width: 66%; }
.bar-67 > i { width: 67%; }
.bar-68 > i { width: 68%; }
.bar-69 > i { width: 69%; }
.bar-70 > i { width: 70%; }
.bar-71 > i { width: 71%; }
.bar-72 > i { width: 72%; }
.bar-73 > i { width: 73%; }
.bar-74 > i { width: 74%; }
.bar-75 > i { width: 75%; }
.bar-76 > i { width: 76%; }
.bar-77 > i { width: 77%; }
.bar-78 > i { width: 78%; }
.bar-79 > i { width: 79%; }
.bar-80 > i { width: 80%; }
.bar-81 > i { width: 81%; }
.bar-82 > i { width: 82%; }
.bar-83 > i { width: 83%; }
.bar-84 > i { width: 84%; }
.bar-85 > i { width: 85%; }
.bar-86 > i { width: 86%; }
.bar-87 > i { width: 87%; }
.bar-88 > i { width: 88%; }
.bar-89 > i { width: 89%; }
.bar-90 > i { width: 90%; }
.bar-91 > i { width: 91%; }
.bar-92 > i { width: 92%; }
.bar-93 > i { width: 93%; }
.bar-94 > i { width: 94%; }
.bar-95 > i { width: 95%; }
.bar-96 > i { width: 96%; }
.bar-97 > i { width: 97%; }
.bar-98 > i { width: 98%; }
.bar-99 > i { width: 99%; }
.bar-100 > i { width: 100%; }

/* Tables that stack into labelled rows instead of scrolling sideways on phones */
@media (max-width: 640px) {
  table[data-stack] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table[data-stack] tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table[data-stack] tr:last-child { border-bottom: 0; }
  table[data-stack] td { padding: 0; display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); align-items: baseline; gap: 12px; border: 0; text-align: left; }
  /* Marginea de card a coloanelor de capăt e pentru tabelul în coloane; pe
     telefon rândul e deja stivuit, deci ar deplasa doar prima etichetă. */
  table[data-stack] > * > tr > :first-child { padding-left: 0; }
  table[data-stack] > * > tr > :last-child { padding-right: 0; }
  table[data-stack] td.numeric { text-align: left; }
  table[data-stack] td::before { content: attr(data-label); color: var(--muted); font-size: var(--text-caption); font-weight: 600; }
  table[data-stack] td > .cell-meta { grid-column: 2; }
  table[data-stack] td:empty { display: none; }
}

/* Banner — un singur limbaj pentru mesaje: ton, pictogramă, titlu, descriere,
   acțiuni. Tonurile urmează implicit / atenție / critic / confirmare. */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: var(--paper);
  font-size: var(--text-small);
}
.banner > .ui-icon { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--muted); }
.banner-body { min-width: 0; flex: 1; display: grid; gap: var(--space-3xs); }
.banner-body strong { color: inherit; font-size: var(--text-control); font-weight: 600; }
.banner-body p { margin: 0; color: inherit; font-size: var(--text-small); }
.banner-actions { margin-top: var(--space-xs); display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.banner-dismiss { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--radius-xs); color: inherit; background: transparent; cursor: pointer; }
.banner-dismiss:hover { background: rgb(0 0 0 / .06); }
.banner-info { border-color: var(--accent-line); color: var(--accent-hover); background: var(--accent-soft); }
.banner-info > .ui-icon { color: var(--accent-hover); }
.banner-success { border-color: var(--green-line); color: var(--green); background: var(--green-soft); }
.banner-success > .ui-icon { color: var(--green); }
.banner-caution { border-color: var(--amber-line); color: var(--amber); background: var(--amber-soft); }
.banner-caution > .ui-icon { color: var(--amber); }
.banner-critical { border-color: var(--red-line); color: var(--red); background: var(--red-soft); }
.banner-critical > .ui-icon { color: var(--red); }
.page-banner { margin-bottom: 20px; }

/* Listă de sarcini — pași secvențiali cu stare, legați printr-o linie */
.task-steps { margin: 0; padding: 0; display: grid; gap: var(--space-3xs); list-style: none; }
.task-steps li { position: relative; padding: 8px 0; display: flex; align-items: center; gap: 12px; }
.task-steps li:not(:last-child)::after { position: absolute; top: 31px; bottom: -8px; left: 11px; width: 1px; background: var(--line-strong); content: ""; }
.task-mark { width: 23px; height: 23px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--faint); background: var(--paper); font-size: var(--text-caption); font-weight: 600; }
.task-mark .ui-icon { width: 13px; height: 13px; }
.task-steps b { min-width: 0; font-size: var(--text-control); font-weight: 600; color: var(--ink-soft); }
.task-steps .s-complete .task-mark { border-color: var(--dark); color: var(--dark-ink); background: var(--dark); }
.task-steps .s-current .task-mark { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--focus); }
.task-steps .s-current b { color: var(--ink); }
.task-steps .s-next b { color: var(--faint); font-weight: 500; }

/* Sarcini rămase — fiecare rând este o acțiune, cu starea ei */
.task-list { margin: 0; padding: 0; display: grid; gap: var(--space-xs); list-style: none; }
.task-list a { padding: 12px 16px; display: flex; align-items: center; gap: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); transition: border-color .14s ease, background-color .14s ease; }
.task-list a:hover { border-color: var(--line-strong); background: var(--canvas-deep); }
.task-list a > span:first-child { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); background: var(--canvas); }
.task-list a > span:first-child .ui-icon { width: 15px; height: 15px; }
.task-list div { min-width: 0; flex: 1; }
.task-list strong { display: block; font-size: var(--text-control); }
.task-list small { display: block; color: var(--muted); font-size: var(--text-caption); }
.task-list .status { flex: none; }
.task-list .action-icon { flex: none; color: var(--faint); }

/* Perechi cheie–valoare pentru rezumatul unei entități */
.property-list { margin: 0; display: grid; }
.property-list > div { padding: 12px 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); border-bottom: 1px solid var(--line); }
.property-list > div:first-child { padding-top: 0; }
.property-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.property-list dt { color: var(--muted); font-size: var(--text-small); }
.property-list dd { margin: 0; color: var(--ink); font-size: var(--text-control); font-weight: 500; text-align: right; overflow-wrap: anywhere; }

/* Configurare inițială — cadru fără meniu, ca atenția să rămână pe pasul curent */
.focus-frame { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; background: var(--canvas); }
.focus-head { min-height: 58px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-bottom: 1px solid var(--line); background: var(--paper); }
.focus-head-actions { display: flex; align-items: center; gap: 8px; }
.focus-logout { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-caption); font-weight: 500; }
.focus-logout > .ui-icon { width: 16px; height: 16px; }
.focus-main { width: min(1000px, 100%); margin: 0 auto; padding: var(--space-xl) 26px 72px; }

.onboarding-view { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.onboarding-steps-title { margin: 0 0 12px; color: var(--faint); font-size: var(--text-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.onboarding-head { margin-bottom: var(--space-lg); }
.onboarding-head h1 { margin-bottom: var(--space-xs); font-size: 32px; }
.onboarding-head p { max-width: 62ch; margin-bottom: 0; font-size: var(--text-body); }
.onboarding-card { padding: var(--space-lg); }
.onboarding-card-head { margin-bottom: var(--space-md); padding-bottom: var(--space-md); display: flex; align-items: flex-start; gap: var(--space-sm); border-bottom: 1px solid var(--line); }
.onboarding-card-head > span { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--canvas); }
.onboarding-card-head > span .ui-icon { width: 17px; height: 17px; }
.onboarding-card-head h2 { margin-bottom: 4px; }
.onboarding-card-head p { margin-bottom: 0; font-size: var(--text-small); }
.onboarding-card > .banner { margin-bottom: var(--space-md); }
.onboarding-lookup { margin-bottom: var(--space-md); padding: 16px; display: grid; gap: var(--space-xs); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--canvas); }
.onboarding-lookup > div { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm); }
.onboarding-lookup label { flex: 1 1 220px; }
.onboarding-lookup .button { flex: none; }
.onboarding-lookup > small { color: var(--muted); font-size: var(--text-caption); }
.onboarding-logo { display: grid; justify-items: start; gap: 16px; }
.onboarding-logo .file, .onboarding-logo .coordinates { width: 100%; }
.onboarding-foot { margin-top: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.onboarding-foot .link-button { display: inline-flex; align-items: center; gap: 8px; }
.onboarding-foot .link-button .ui-icon { width: 15px; height: 15px; }
.onboarding-skip { margin-left: auto; }

.onboarding-section { margin-bottom: var(--space-md); padding: var(--space-lg); }
.onboarding-section .section-title { margin-bottom: 16px; align-items: flex-start; }
.onboarding-section .section-title .eyebrow { margin-bottom: 4px; }
.onboarding-section .section-title h2 { margin-bottom: 0; }
.onboarding-section .section-title > a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--text-small); font-weight: 600; white-space: nowrap; }
.onboarding-section .section-title > a:hover { color: var(--accent); }
.onboarding-flow { margin: 0 0 var(--space-md); padding: 0; display: grid; gap: var(--space-sm); list-style: none; }
.onboarding-flow li { display: flex; align-items: flex-start; gap: var(--space-sm); }
.onboarding-flow > li > span { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--canvas); }
.onboarding-flow > li > span .ui-icon { width: 15px; height: 15px; }
.onboarding-flow strong { display: block; font-size: var(--text-control); }
.onboarding-flow small { display: block; color: var(--muted); font-size: var(--text-small); }

/* Responsive */
/* Sub lățimea la care coloana de sarcini ar strânge formularul, lista de pași
   trece deasupra conținutului, pe orizontală. */
@media (max-width: 900px) {
  .onboarding-view { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .onboarding-steps-title { display: none; }
  .onboarding-steps { display: flex; align-items: center; gap: 12px; }
  .onboarding-steps li { flex: 1; padding: 0; }
  .onboarding-steps li:last-child { flex: none; }
  .onboarding-steps li:not(:last-child)::after { position: static; inset: auto; width: auto; height: 1px; min-width: 12px; flex: 1; }
}

@media (max-width: 1120px) {
  .shell { padding-right: 28px; padding-left: 28px; }
  .dashboard-grid > section { padding: 24px 24px 32px; }
  .vehicle-km article { grid-template-columns: minmax(160px, 1fr) repeat(2, minmax(120px, .75fr)); }
  .vehicle-km em { grid-column: 2 / 4; }
  .vehicle-km .check { grid-column: 1; grid-row: 2; }
  .support-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  :root { --topbar-height: 58px; }
  .app-frame { grid-template-columns: minmax(0, 1fr); background: var(--canvas); }
  .sidebar { position: fixed; left: 0; width: min(300px, calc(100vw - 44px)); transform: translateX(-105%); box-shadow: var(--shadow-menu); transition: none; }
  .sidebar.open { transform: translateX(0); }
  .nav-toggle, .mobile-menu { display: grid; place-items: center; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 29; width: 100%; height: 100%; border: 0; background: rgb(35 32 29 / .42); }
  body.nav-open .nav-backdrop { display: block; }
  body.nav-open { overflow: hidden; }
  .topbar { padding: 0 20px; justify-content: flex-start; gap: 12px; }
  .top-actions { margin-left: auto; }
  .saved-state { display: none; }
  .shell { padding: 28px 24px 60px; }
  .page-head { min-height: 92px; }
  .settings-grid, .repair-grid { grid-template-columns: 1fr; }
  /* Sub prag adnotarea se așază peste card, nu lângă el. */
  .settings-page { max-width: none; gap: var(--space-lg); }
  .settings-group { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .vehicle-import { align-items: flex-start; flex-direction: column; }
  .vehicle-import form { width: 100%; }
  .vehicle-import .file { flex: 1; }
  .account-list article { grid-template-columns: 1fr; }
  .route-workflow { grid-template-columns: 42px minmax(0, 1fr); }
  .route-workflow form { grid-column: 2; }
  .login-stage { grid-template-columns: minmax(360px, .9fr) 1.1fr; }
  .login-pane { padding: 28px 32px; }
  .support-hero { grid-template-columns: 1fr; min-height: 600px; }
  .support-hero aside { max-width: 280px; }
}

@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; min-height: 0; }
  .dashboard-grid > section { padding: 24px 0 8px !important; }
  .dashboard-grid > section + section { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 700px) {
  h1 { font-size: 26px; }
  /* Rândul de serviciu se desface pe două niveluri: numele sus, cifra și
     starea dedesubt. Punctul dispare — eticheta colorată spune același lucru,
     iar pe lățimea asta ar fi strivit denumirea. */
  .service-list > li { flex-wrap: wrap; }
  .service-list > li > .service-dot { display: none; }
  .service-list div { flex-basis: 100%; }
  .service-list b { margin-right: auto; text-align: left; }
  .service-list .status { width: auto; }
  .topbar { padding: 0 12px; }
  .crumb span, .crumb b { display: none; }
  .top-help b { display: none; }
  .top-help { padding: 0 8px; }
  .shell { padding: 24px 16px 50px; }
  .page-head { min-height: 0; margin-bottom: 20px; padding: 12px 0 16px; align-items: flex-start; flex-direction: column; gap: 16px; }
  .page-head > .button, .page-head > form, .page-head > label { width: 100%; }
  .page-head .button { justify-content: center; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > * { grid-column: 1 !important; }
  .focus-head { padding: 0 16px; }
  .focus-main { padding: var(--space-lg) 15px 56px; }
  .onboarding-head h1 { font-size: 26px; }
  .onboarding-card, .onboarding-section { padding: 20px 16px; }
  .onboarding-lookup .button { width: 100%; }
  /* Pe ecrane înguste rămâne vizibilă doar eticheta pasului curent; cercurile
     păstrează poziția în traseu. */
  .onboarding-steps li:not([aria-current]) b { display: none; }
  .panel { padding: 20px; }
  .settings-card { padding: 20px; }
  .field-inline, .password-inline { grid-template-columns: minmax(0, 1fr); }
  .field-inline .button { width: 100%; }
  .password-inline .form-help { grid-column: 1; }
  .holiday-years { grid-template-columns: 1fr; }
  .holiday-year li { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .setup-gate, .month-hero { padding: 20px; align-items: flex-start; flex-wrap: wrap; }
  .setup-gate .button, .month-hero .button { width: 100%; }
  .collection-toolbar, .admin-toolbar { align-items: stretch; flex-direction: column; }
  .table-search { width: 100%; min-width: 0; }
  .filter-group { overflow-x: auto; }
  .filter-chip { flex: none; }
  .vehicle-import form { align-items: stretch; flex-direction: column; }
  .vehicle-import .file { min-width: 0; }
  .popover-panel { position: fixed; top: 50%; right: 16px; left: 16px; width: auto; max-height: calc(100vh - 32px); overflow-y: auto; transform: translateY(-50%); }
  .account-list form { justify-content: flex-start; flex-direction: column; }
  .account-list form input, .account-list form .button, .account-list form .link-button { width: 100% !important; }
  .detail-list > div { grid-template-columns: 1fr; gap: 4px; }
  .setting-row { align-items: flex-start; flex-direction: column; }
  .period-filter { width: 100%; }
  .period-filter input { flex: 1; }
  .route-workflow, .approximate-confirm { padding: 20px; grid-template-columns: 1fr; }
  .route-workflow form { grid-column: 1; }
  .workflow-index { width: 38px; height: 38px; }
  .route-workflow .button, .approximate-confirm .button { width: 100%; }
  .import-summary { grid-template-columns: 1fr; }
  .import-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .import-summary > div:last-child { border-bottom: 0; }
  .month-start-card { margin-top: 20px; grid-template-columns: 1fr; }
  .month-start-number { min-height: 88px; border-right: 0; border-bottom: 1px solid var(--line); }
  .month-start-number .ui-icon { width: 32px; height: 32px; }
  .month-start-card > div:last-child { padding: 28px 20px; }
  .month-decision { margin-top: 20px; padding: 24px 20px; grid-template-columns: 1fr; }
  .month-decision-actions { align-items: stretch; flex-direction: column; }
  .month-decision-actions .button { width: 100%; }
  .workflow-context { grid-template-columns: 1fr auto; align-items: center; }
  .workflow-context > div { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  .workflow-context > a { grid-row: 2; }
  .workflow-context > a:last-child { text-align: right; }
  .wizard-steps > a, .wizard-steps > span { min-height: 59px; padding: 8px 4px; display: grid; place-items: center; grid-template-columns: 1fr; grid-template-rows: auto auto; text-align: center; }
  .wizard-steps b { grid-row: auto; width: 27px; height: 27px; }
  .wizard-steps span span, .wizard-steps a span { display: none; }
  .wizard-card > header, .wizard-content { padding: 24px 20px; }
  .wizard-card > footer { padding: 12px 20px; align-items: flex-start; flex-direction: column; }
  .wizard-drop { min-height: 185px; padding: 20px; }
  .wizard-primary { width: 100%; }
  .wizard-actions { align-items: stretch; flex-direction: column-reverse; }
  .wizard-actions .button { width: 100%; }
  .upload-assistance { flex-direction: column; gap: 4px; }
  .vehicle-km article { grid-template-columns: 1fr; align-items: stretch; }
  .vehicle-km em, .vehicle-km .check { grid-column: 1; grid-row: auto; }
  .wizard-review { grid-template-columns: 1fr; }
  .wizard-review > small { grid-column: 1; }
  .generate-form > .button:last-child { width: 100%; }
  .document-months article, .result-card, .confirm-bar { align-items: flex-start; flex-direction: column; }
  .document-month-icon { width: 38px; height: 38px; }
  .document-month-actions, .result-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .document-month-actions .button, .result-actions .button { width: 100%; }
  .result-card > div:first-child { width: 100%; align-items: flex-start; flex-direction: column; }
  .login-shell { padding: 0; }
  .login-stage { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; }
  .login-pane { min-height: 100vh; padding: 24px 24px; border: 0; }
  .login-image { display: none; }
  .auth-heading h1, .password-reset-content h1 { font-size: 26px; }
  .support-nav, .support-footer, .support-body > main { width: 100%; border-right: 0; border-left: 0; }
  .support-nav { padding: 0 20px; }
  .support-nav nav > a:not(.support-login) { display: none; }
  .support-hero { min-height: 620px; padding: 70px 24px 44px; gap: 36px; }
  .support-hero h1 { font-size: 3.45rem; }
  .support-hero p { font-size: var(--text-body); }
  .support-hero-actions { align-items: stretch; flex-direction: column; }
  .support-hero-actions a { justify-content: center; }
  .support-section { padding: 56px 24px; }
  .support-guide-grid { grid-template-columns: 1fr; }
  .support-guide-grid article { min-height: 285px; }
  .support-workflow { padding: 56px 24px; grid-template-columns: 1fr; gap: 36px; }
  .support-cta { padding: 44px 24px; align-items: flex-start; flex-direction: column; }
  .support-cta a { width: 100%; justify-content: center; }
  .support-footer { padding: 0 20px; flex-direction: column; justify-content: center; gap: 8px; }
  .confirm-dialog form > div { flex-direction: column; }
  .confirm-dialog .button { width: 100%; }
}

@media (max-width: 460px) {
  .topbar .crumb strong { max-width: 165px; }
  .month-hero h2 { font-size: 22px; }
  .section-title { align-items: flex-start; flex-direction: column; }
  .page-head h1 { font-size: 26px; }
  .workflow-context h1 { font-size: 22px; }
  .wizard-card > header h2, .wizard-card > header h1 { font-size: 22px; }
  .support-hero h1 { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Dezambiguizarea facturilor între clienți omonimi. */
.match-list { display: grid; gap: 16px; margin-bottom: 24px; }
.match-options { display: grid; gap: 8px; margin-top: 12px; }
.match-option { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.match-option:hover { border-color: var(--accent); }
.match-option:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.match-option input { margin-top: 4px; flex: none; }
.match-option > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.match-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* ---- Calculează magic ---------------------------------------------------- */

.magic-shell { display: grid; gap: 24px; max-width: 760px; }
.magic-head { display: grid; gap: 12px; justify-items: start; }
.magic-head h1 { margin: 0; font-size: 1.7rem; }
.magic-head p { margin: 0; color: var(--muted); }
.magic-body { display: grid; gap: 20px; }
.magic-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 8px; }
.magic-actions .link-button { margin-right: auto; }
.magic-list { display: grid; gap: 16px; }

.magic-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.magic-files li { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.magic-files li span { color: var(--muted); font-size: .92rem; }

.magic-months { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.magic-month { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); cursor: pointer; }
.magic-month > span { display: grid; gap: 4px; justify-items: start; }
.magic-month:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.magic-month.is-disabled { opacity: .55; cursor: not-allowed; }
.magic-month:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.magic-km { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 12px; }
.magic-km > div { display: grid; gap: 8px; }
.magic-km label { display: grid; gap: 4px; font-size: .9rem; }
.magic-km-known { margin: 0; color: var(--muted); font-size: .9rem; }

/* Sfera: trei inele care se rotesc pe axe diferite. Fără librării, fără canvas. */
.magic-sphere { position: relative; width: 64px; height: 64px; }
.magic-sphere i { position: absolute; inset: 0; border: 2px solid var(--accent); border-radius: 50%; opacity: .75; }
.magic-sphere i:nth-child(1) { animation: magic-spin-a 2.4s linear infinite; }
.magic-sphere i:nth-child(2) { animation: magic-spin-b 3.1s linear infinite; opacity: .5; }
.magic-sphere i:nth-child(3) { animation: magic-spin-c 3.8s linear infinite; opacity: .3; }
@keyframes magic-spin-a { from { transform: rotateY(0deg) rotateX(18deg); } to { transform: rotateY(360deg) rotateX(18deg); } }
@keyframes magic-spin-b { from { transform: rotateX(0deg) rotateZ(30deg); } to { transform: rotateX(360deg) rotateZ(30deg); } }
@keyframes magic-spin-c { from { transform: rotateZ(0deg) rotateY(52deg); } to { transform: rotateZ(360deg) rotateY(52deg); } }
@media (prefers-reduced-motion: reduce) {
  .magic-sphere i { animation: none; }
  .magic-sphere i:nth-child(2) { transform: rotateX(60deg); }
  .magic-sphere i:nth-child(3) { transform: rotateY(60deg); }
}

/* ---- Pregătire rapidă: ecranul de pornire -------------------------------- */
/* Antetul împrumută registrul suprafețelor mari din aplicație (login, suport):
   titlu supradimensionat cu greutate mică, iar lângă el borderoul fișierelor,
   desenat ca o rubrică de formular tipărit. */
.prep-hero { margin-bottom: 32px; padding-bottom: 28px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .62fr); align-items: end; gap: 20px 56px; border-bottom: 1px solid var(--line); }
.prep-eyebrow { display: block; margin-bottom: var(--space-sm); color: var(--muted); font-size: var(--text-caption); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.prep-hero h1 { max-width: 15ch; margin: 0 0 16px; font-size: clamp(2rem, 4.2vw, 3.05rem); font-weight: 400; line-height: 1.02; letter-spacing: -.04em; }
.prep-hero > div > p { max-width: 56ch; margin: 0; font-size: var(--text-body); line-height: 1.6; }
.prep-rubric { padding-top: 12px; border-top: 2px solid var(--ink); }
.prep-rubric > span { color: var(--muted); font-size: var(--text-caption); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.prep-rubric ul { margin: 8px 0 0; padding: 0; list-style: none; }
.prep-rubric li { padding: 12px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; border-bottom: 1px solid var(--line); }
.prep-rubric li:last-child { border-bottom: 0; padding-bottom: 0; }
.prep-rubric b { font-size: var(--text-control); font-weight: 600; }
.prep-rubric em { align-self: center; justify-self: end; color: var(--muted); font-size: var(--text-caption); font-weight: 600; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.prep-rubric em.is-required { color: var(--accent); }
.prep-rubric small { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-small); line-height: 1.5; }

.prep-form { display: grid; gap: 20px; }
/* Masa de lucru. Rama dublă (contur plin + hașură interioară) ține locul
   chenarului punctat clasic, fără să arate ca o casetă de upload oarecare. */
.prep-stage {
  position: relative;
  min-height: 300px;
  padding: 40px 24px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--paper);
  cursor: pointer;
  text-align: center;
  transition: border-color .18s ease, background-color .18s ease;
}
.prep-stage::before { content: ""; position: absolute; inset: 9px; border: 1px dashed var(--line); border-radius: var(--radius); pointer-events: none; transition: border-color .18s ease; }
.prep-stage:hover, .prep-stage:focus-within { border-color: var(--accent); }
.prep-stage:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.prep-stage.is-dragging { border-color: var(--accent); background: var(--accent-soft); }
.prep-stage.is-dragging::before { border-color: var(--accent); }
.prep-stage input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Semnătura fluxului: teancul de foi. Trei coli care stau răsfirate, se ridică
   la hover și se aliniază perfect când ții fișierele deasupra. Mărimile vin din
   proprietăți proprii, ca aceeași componentă să meargă și în miniatură. */
.paper-stack { --sheet-h: 96px; --fan: 74px; --lift: 6px; position: relative; display: block; width: 120px; height: var(--sheet-h); }
.paper-stack.is-mini { --sheet-h: 52px; --fan: 32px; --lift: 4px; width: 70px; }
.paper-stack i {
  position: absolute; inset: 0;
  padding: 0 8px 8px;
  display: grid;
  align-content: end;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background:
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 9px) no-repeat 10px 13px / calc(100% - 30px) calc(var(--sheet-h) - 45px),
    var(--paper);
  color: var(--faint);
  font-size: var(--text-caption); font-weight: 600; font-style: normal; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 8px 18px rgb(38 37 30 / .08);
  transform-origin: 50% 92%;
  transition: transform .42s cubic-bezier(.2, .85, .25, 1), border-color .2s ease, color .2s ease;
}
.paper-stack.is-mini i { padding: 0; border-radius: var(--radius-xs); background-position: 8px 10px; background-size: calc(100% - 24px) calc(var(--sheet-h) - 26px); box-shadow: 0 5px 12px rgb(38 37 30 / .08); }
/* Prima coală rămâne deasupra: facturile sunt singurul fișier obligatoriu. */
.paper-stack i:nth-child(1) { z-index: 3; transform: rotate(-7deg) translate(-13px, 5px); }
.paper-stack i:nth-child(2) { z-index: 2; }
.paper-stack i:nth-child(3) { z-index: 1; transform: rotate(7deg) translate(13px, 5px); }
.fan-host:hover .paper-stack i:nth-child(1), .fan-host:focus-within .paper-stack i:nth-child(1) { transform: rotate(-9deg) translate(calc(var(--fan) * -1), calc(var(--lift) * -1)); }
.fan-host:hover .paper-stack i:nth-child(2), .fan-host:focus-within .paper-stack i:nth-child(2) { transform: translateY(calc(var(--lift) * -1.6)); }
.fan-host:hover .paper-stack i:nth-child(3), .fan-host:focus-within .paper-stack i:nth-child(3) { transform: rotate(9deg) translate(var(--fan), calc(var(--lift) * -1)); }
.prep-stage.is-dragging .paper-stack i { border-color: var(--accent); color: var(--accent); }
.prep-stage.is-dragging .paper-stack i:nth-child(1) { transform: translate(-5px, -10px); }
.prep-stage.is-dragging .paper-stack i:nth-child(2) { transform: translateY(-5px); }
.prep-stage.is-dragging .paper-stack i:nth-child(3) { transform: translate(5px, 0); }

.prep-invite { display: grid; gap: 8px; }
.prep-invite strong { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.prep-invite small { max-width: 46ch; color: var(--muted); font-size: var(--text-small); line-height: 1.55; }

/* După alegere, teancul desenat lasă locul fișierelor reale. */
.prep-stage.has-files .paper-stack, .prep-stage.has-files .prep-invite { display: none; }
.prep-chosen { width: min(100%, 460px); display: grid; gap: 8px; text-align: left; }
.prep-chosen > b { margin-bottom: 4px; color: var(--muted); font-size: var(--text-caption); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.prep-chosen > span { padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); }
.prep-chosen > span > b { min-width: 0; overflow: hidden; font-size: var(--text-small); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.prep-chosen > span > small { color: var(--faint); font-size: var(--text-caption); white-space: nowrap; }
.prep-chosen > em { color: var(--muted); font-size: var(--text-caption); font-style: normal; }

.prep-launch { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.prep-go { min-height: 44px; padding: 12px 20px; font-size: var(--text-body); }
.prep-note { flex: 1 1 320px; margin: 0; color: var(--muted); font-size: var(--text-small); line-height: 1.55; }

@media (max-width: 900px) {
  .prep-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .prep-stage { min-height: 260px; padding: 32px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-stack i { transition: border-color .2s ease, color .2s ease; }
}