/* ══════════════════════════════════════════════════════════════════════════
   TEMA „WHITE & BLUE — UNIFIED" (2026-10-03, decizia Xprime)

   Se incarca DUPA app.css, in toate cele patru invelisuri (public, panou client,
   admin, admin fara meniu), si o redefineste. app.css NU se atinge: scoasa linia
   cu theme.css din cele patru sabloane, site-ul revine exact cum era.

   Ce se schimba:
   · pagina alba, text bleumarin, albastrul inelului ca accent peste tot;
   · titluri in Archivo condensat (gros, italic doar la sigla si titlul mare),
     text in Inter — amandoua gazduite aici, ca Poppins inainte;
   · bara laterala bleumarin in panoul clientului si in admin (aceeasi limba);
   · INELUL DE INCARCARE ramane exact in constructia lui (banda conica 5px de la
     218°, haloul neclar, interiorul reasezat) — se schimba DOAR culorile:
     albastru #2C82EE → azur #45B0FF → gheata #A9DCFF, interior bleumarin.

   Albastrul: #2C82EE (banda inelului) pentru accentele mari — titlul, 01—03,
   pictograme, linii. Butoanele pline si textul mic albastru folosesc aceeasi
   nuanta cu o treapta mai adanca, #1F74E0, ca textul alb de pe ele sa ramana
   lizibil (contrast ~4,5:1; pe #2C82EE ar fi ~3,8:1).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LITERE (OFL 1.1, gazduite local; sursa: Google Fonts) ─────────────────── */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600 900; font-stretch: 62% 100%; font-display: swap;
  src: url("/assets/fonts/Archivo-normal-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: "Archivo"; font-style: normal; font-weight: 600 900; font-stretch: 62% 100%; font-display: swap;
  src: url("/assets/fonts/Archivo-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 600 900; font-stretch: 62% 100%; font-display: swap;
  src: url("/assets/fonts/Archivo-italic-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: "Archivo"; font-style: italic; font-weight: 600 900; font-stretch: 62% 100%; font-display: swap;
  src: url("/assets/fonts/Archivo-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/Inter-normal-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 700; font-display: swap;
  src: url("/assets/fonts/Inter-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1DC4-1DC5, U+1DCA-1DCB, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/Inter-normal-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/Inter-normal-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/Inter-normal-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

/* ── CULORI ────────────────────────────────────────────────────────────────── */
:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f5f8fb;
  --field: #ffffff;
  --ink: #0e2342;
  --ink-soft: #4a5d75;
  --muted: #66778c;
  --line: #e2e9f1;
  --line-soft: #eef2f6;
  --line-strong: #cad5e1;

  --brand: #2c82ee;          /* banda inelului: accentele mari               */
  --brand-mid: #45b0ff;      /* tonul din mijloc al inelului                 */
  --brand-ice: #a9dcff;      /* tonul deschis al inelului                    */
  --navy: #0e2342;
  --side: #1e395a;           /* bara laterala, subsolul                      */
  --side-2: #183150;

  --accent: #1f74e0;         /* linkuri si text albastru mic (AA pe alb)     */
  --accent-btn: #1f74e0;     /* butoane pline                                */
  --accent-dark: #175fbf;
  --accent-ink: #ffffff;     /* text pe albastru                             */
  --accent-soft: #e6f0fd;
  --accent-line: rgba(44,130,238,.35);
  --accent-bright: #1f74e0;
  --accent-2: #2c82ee;       /* fostul verde de accent → albastrul inelului  */

  --error: #d32f2f;  --error-bg: #fdecec;  --error-ink: #b42318;  --error-line: #f4c7c3;
  --ok: #12965a;     --ok-bg: #e6f5ed;     --ok-line: #b6e2c8;
  --neutral-bg: #f1f5f9;
  --warn: #e8a33b;   --warn-bright: #f2b24c; --warn-bg: #fdf3e1; --warn-bg-strong: #fbe6c2;
  --warn-ink: #8a5300; --warn-line: #edd3a1;
  --violet: #7357d6; --violet-ink: #5b3fb8; --violet-bg: #f1ecfd;
  --chart-stock: #8fa3b6; --chart-stock-2: #b39b70; --chart-alt: #c98a52;

  /* suprafetele inchise care raman inchise: banda de cookie, bulele de ajutor */
  --ink-surface: #183150;
  --onink: #eaf1f8; --onink-soft: #bfd0e2; --onink-dim: #93a9c2; --onink-line: #3a5a82;

  --coin-green: #0c9a50; --coin-green-soft: #e6f5ed; --coin-green-ink: #0a8445;
  --coin-red: #d9262a;   --coin-red-soft: #fdecec;   --coin-red-ink: #c81e23;

  --shadow: 0 1px 2px rgba(14,35,66,.05), 0 14px 32px -26px rgba(14,35,66,.45);
  --shadow-soft: 0 1px 2px rgba(14,35,66,.04), 0 10px 26px -22px rgba(14,35,66,.38);
  --radius: 4px;
  --radius-s: 3px;

  --sans: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: var(--sans);
  --display: "Archivo", "Inter", "Arial Narrow", "Roboto Condensed", -apple-system, "Segoe UI", sans-serif;
  --grad: linear-gradient(var(--accent-btn), var(--accent-btn));
  --grad-hover: linear-gradient(var(--accent-dark), var(--accent-dark));
}

/* ── BAZA ──────────────────────────────────────────────────────────────────── */
html { color-scheme: light; background: var(--bg); accent-color: var(--accent-btn); }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); }
/* fotografia inchisa de fundal + valul ei: nu mai exista */
body::before, body::after { content: none; display: none; }
::selection { background: rgba(44,130,238,.22); color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 3px rgba(44,130,238,.22); }

h1, h2 { font-family: var(--display); font-stretch: 72%; font-weight: 900; letter-spacing: -.004em; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1.02; }
h2 { line-height: 1.08; }
h3 { color: var(--ink); }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

/* eticheta mica de deasupra titlurilor: „— AUTOMATIC PROCESSING" */
.eyebrow, .page-eyebrow {
  display: flex; align-items: center; gap: .75rem;
  margin: 0 0 .55rem; color: var(--accent);
  font-family: var(--sans); font-size: .76rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.eyebrow::before, .page-eyebrow::before {
  content: ""; flex: none; width: 1.6rem; height: 3px; background: var(--brand);
}

/* ── BUTOANE ───────────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-small { letter-spacing: 0; border-radius: var(--radius); }
.btn-primary {
  background: var(--accent-btn); border-color: var(--accent-btn); color: #fff;
  padding: .62rem 1.25rem; font-size: .9rem; font-weight: 600;
  box-shadow: 0 8px 18px -12px rgba(31,116,224,.75);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--accent-dark); border-color: var(--accent-dark); color: #fff;
  box-shadow: 0 8px 18px -12px rgba(23,95,191,.8);
}
.btn-primary:disabled, .btn-primary[disabled] {
  background: #e7edf3; border-color: #e7edf3; color: #8a99ab; box-shadow: none; opacity: 1;
}
.btn-secondary {
  background: #fff; border-color: var(--line-strong); color: var(--ink);
  padding: .62rem 1.15rem; font-size: .9rem; font-weight: 600;
}
.btn-secondary:hover { background: #fff; border-color: var(--accent-btn); color: var(--accent-btn); }
.btn-small { background: #fff; border-color: var(--line-strong); color: var(--ink); font-weight: 600; }
.btn-small:hover { border-color: var(--accent-btn); color: var(--accent-btn); }
.btn-lg { display: inline-flex; align-items: center; gap: .8rem; padding: .95rem 1.6rem; font-size: 1.05rem; }
.btn-danger:hover { color: #fff; }
.filter-row .btn-primary, .filter-bar .btn-primary, .member-add-bar .btn-primary,
.filter-row .btn-secondary, .filter-bar .btn-secondary { border-radius: var(--radius); }
.filter-row .btn-primary:hover, .filter-bar .btn-primary:hover,
.member-add-bar .btn-primary:hover { background: var(--accent-dark); color: #fff; }

/* ── ANTETUL PUBLIC ────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.header-row { min-height: 5.25rem; }
.brand {
  display: inline-flex; align-items: center;
  font-family: var(--display); font-stretch: 75%; font-weight: 900; font-style: italic;
  font-size: 2.15rem; line-height: 1; letter-spacing: -.01em; color: var(--navy); text-decoration: none;
}
.brand::before { content: ""; flex: none; width: 1.85rem; height: 5px; margin-right: .75rem; background: var(--brand); transform: skewX(-20deg); }
.brand-dash { display: inline-block; margin: 0 .02em; }
.brand-dash, .site-header .brand-dash { color: inherit; }
.main-nav { gap: 0; }
.main-nav > a, .main-nav > .inline-form .link-button {
  padding: 0 1.15rem; border-left: 1px solid rgba(14,35,66,.2);
  color: var(--navy); font-size: .95rem; font-weight: 500; line-height: 1.2;
}
.main-nav > a:first-child { border-left: 0; }
.main-nav > a:hover, .main-nav .link-button:hover { color: var(--accent-btn); }
.main-nav a.nav-cta {
  margin-left: .9rem; padding: .8rem 1.45rem; border: 0; border-radius: var(--radius);
  background: var(--accent-btn); color: #fff; box-shadow: none;
  font-size: .95rem; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.main-nav a.nav-cta:hover { background: var(--accent-dark); color: #fff; }
.main-nav > .lang-switch { margin-left: .8rem; }
.lang-switch summary {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .72rem .95rem; border: 1px solid #d5dee8; border-radius: var(--radius);
  background: #fff; color: var(--navy); font-family: var(--sans); font-size: .85rem; font-weight: 600;
}
.lang-switch summary::after {
  content: ""; width: .42rem; height: .42rem; margin-top: -.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.lang-switch ul { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }

/* ── SUBSOLUL PUBLIC ───────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 0; padding: 1.6rem 0; border-top: 0;
  background: var(--side); color: var(--onink-soft); font-size: .88rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .35rem; }
.site-footer a { color: #fff; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--brand-ice); }
.footer-brand {
  display: inline-flex; align-items: center; margin-right: 1.6rem;
  font-family: var(--display); font-stretch: 75%; font-weight: 900; font-style: italic;
  font-size: 1.6rem; line-height: 1; color: #fff;
}
.footer-brand::before { content: ""; margin-right: .6rem; width: 1.4rem; height: 4px; background: var(--brand-mid); transform: skewX(-20deg); }
.footer-brand .brand-dash { color: inherit; }

/* ── CARDURI, TABELE, CAMPURI ──────────────────────────────────────────────── */
.card { background: #fff; border-color: var(--line); box-shadow: var(--shadow-soft); }
.card > h2:first-child, .card h2 { font-size: 1.45rem; }
.data-table th {
  background: #f7fafc; color: var(--ink-soft); border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-weight: 600; letter-spacing: .1em;
}
.data-table tbody tr:nth-child(even) td { background: #fbfcfe; }
.data-table tbody tr:hover td { background: #f2f7fd; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="search"], input[type="number"], input[type="url"], input[type="date"],
select, textarea { background: #fff; border-color: var(--line-strong); color: var(--ink); }
input::placeholder, textarea::placeholder { color: #95a3b3; }
.plan-scope-check { background: var(--warn-bg); }
.notice code, .card code { background: #f1f5f9; }
.admin-migrate-warning code { background: rgba(255,255,255,.7); }
.hscroll { box-shadow: 0 2px 10px rgba(14,35,66,.18); }
.tk-rate .tk-stars label { color: #c3cfdb; }

/* ── BANDA DE COOKIE (ramane inchisa, bleumarin) ───────────────────────────── */
.cookie-banner { background: var(--ink-surface); color: var(--onink); border-top: 0; box-shadow: 0 -10px 30px rgba(14,35,66,.25); }
.cookie-banner-text a { color: var(--brand-ice); }
.cookie-banner-actions .btn-secondary { background: transparent; color: #fff; border-color: var(--onink-line); }
.cookie-banner-actions .btn-secondary:hover { border-color: var(--brand-ice); color: #fff; }
.cookie-banner-actions .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── BANDA DE TITLU A PAGINILOR (Plans, Contact, Terms, catalog) ─────────────
   Era o banda inchisa cu fotografie; pe tema deschisa devine banda albastru-
   gheata, cu titlul bleumarin si cercurile decorative in albastrul inelului. */
.hero {
  background: linear-gradient(120deg, #e8f1fb 0%, #f4f8fc 60%, #ffffff 100%);
  border: 1px solid #e1e9f2; box-shadow: none; color: var(--ink);
}
.hero-photo { background: linear-gradient(120deg, #e8f1fb 0%, #f4f8fc 60%, #ffffff 100%); }
.hero::before { border-color: rgba(44,130,238,.22); }
.hero h1 { color: var(--navy); }
.hero .lead { color: var(--ink-soft); }
.hero .legal-stamp { color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   INELUL DE INCARCARE — aceeasi constructie, alte culori
   ══════════════════════════════════════════════════════════════════════════ */
.terminal-ring {
  --panel: #10294b;
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
              conic-gradient(from 218deg, #2c82ee 0deg, #45b0ff 92deg,
                             #a9dcff 225deg, #2c82ee 360deg) border-box;
  box-shadow: 0 0 9px rgba(44,130,238,.95),
              0 0 27px rgba(44,130,238,.62),
              0 0 52px rgba(140,205,255,.4),
              inset 0 0 40px rgba(44,130,238,.08);
}
.terminal-ring::before {
  background: conic-gradient(from 218deg, #2c82ee, #45aeff, #a9dcff, #2c82ee);
}
.terminal-ring::after {
  background: radial-gradient(circle at 50% 42%, rgba(72,146,236,.26), transparent 43%),
              linear-gradient(145deg, rgba(24,60,104,.99), rgba(10,31,60,.99));
  border-color: rgba(176,214,255,.12);
}
.terminal-ring:hover, .terminal-ring.is-drag, .terminal-ring.has-file {
  box-shadow: 0 0 11px #2c82ee,
              0 0 38px rgba(44,130,238,.8),
              0 0 72px rgba(140,205,255,.55),
              inset 0 0 45px rgba(44,130,238,.13);
}
.terminal-file-input:focus-visible + .terminal-ring { outline-color: var(--accent-btn); }
/* textul din inel sta pe bleumarin: alb, ca inainte pe negru */
.terminal-ring-content { color: #f3f8ff; }
.terminal-ring-content strong, .terminal-upload--gate .terminal-ring-content h2 {
  color: #fff; font-family: var(--display); font-stretch: 88%; font-weight: 800; letter-spacing: 0;
}
.terminal-upload--gate .terminal-ring-content h2 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.2; }
.terminal-ring-content strong { font-size: clamp(1.1rem, 1.55vw, 1.4rem); }
.terminal-upload-action { color: #c9d9ec; }
.terminal-upload-limit { color: #a9bed8; }
.terminal-file-name { color: #a9dcff; }
.terminal-file-icon { color: #a9dcff; filter: drop-shadow(0 0 10px rgba(69,176,255,.45)); }
.terminal-lock { border-color: #a9dcff; box-shadow: 0 0 18px rgba(69,176,255,.35); }
.terminal-lock::before { border-color: #a9dcff; }
/* sub inel: pe fundal deschis */
.terminal-own { color: var(--ink-soft); }
.terminal-own a { color: var(--accent); }
.terminal-gate-text, .terminal-upload--gate p { color: var(--ink-soft); }
.terminal-remaining { color: var(--muted); }

/* inelul de procesare (pagina fisierului): acelasi tratament */
.processing-glow-ring {
  --panel: #10294b;
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
              conic-gradient(from 205deg, #2c82ee, #45b0ff 40%, #a9dcff 72%, #2c82ee) border-box;
}
.processing-live-card--identifying .processing-glow-ring {
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
              conic-gradient(from 205deg, #2c82ee 0 28%, #45b0ff 44%, rgba(169,220,255,.25) 44% 100%) border-box;
}
.processing-glow-ring::before { background: conic-gradient(from 205deg, #2c82ee, #45b0ff, #a9dcff, rgba(44,130,238,.2)); }
.processing-glow-ring::after {
  background: radial-gradient(circle at 50% 42%, rgba(72,146,236,.26), transparent 43%),
              linear-gradient(145deg, rgba(24,60,104,.99), rgba(10,31,60,.99));
  border-color: rgba(176,214,255,.12);
}
.processing-glow-ring {
  box-shadow: 0 0 10px rgba(44,130,238,.95), 0 0 35px rgba(44,130,238,.7),
              0 0 75px rgba(140,205,255,.45), inset 0 0 45px rgba(44,130,238,.13);
}
.processing-glow-content h2 { color: #fff; font-family: var(--display); font-stretch: 85%; }
.processing-glow-content p { color: #c9d9ec; }
.processing-live-state { color: #a9dcff; }
.processing-queue { color: #a9dcff; }
@keyframes terminal-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(44,130,238,.45); opacity: .72; }
  50% { box-shadow: 0 0 34px rgba(44,130,238,.95), 0 0 68px rgba(140,205,255,.45); opacity: 1; }
}
.processing-live-card {
  background: linear-gradient(180deg, #f5f9fd, #ffffff 60%);
  border-color: var(--line);
}
.processing-live-head { background: #fff; border-bottom-color: var(--line); }
.processing-step-icon { background: #fff; box-shadow: 0 0 0 7px #f5f9fd; }
.processing-pipeline .is-done .processing-step-icon { color: #fff; box-shadow: 0 0 0 7px #f5f9fd, 0 0 18px rgba(18,150,90,.3); }
.processing-pipeline .is-current .processing-step-icon { box-shadow: 0 0 0 7px #f5f9fd, 0 0 16px rgba(44,130,238,.45); }
.processing-live-card #wait-timeout { background: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGINA PRINCIPALA
   ══════════════════════════════════════════════════════════════════════════ */
/* Eroul: trei coloane — text | inel | fotografie. Fotografia sta in spate, de la
   centrul inelului spre dreapta, taiata pe diagonala; inelul o calca pe margine,
   ca in macheta. Pe pagina publica eroul iese din `.wrap` pana la marginile
   ecranului (fotografia ajunge la dreapta); in panou ramane card in coloana. */
.home-hero {
  --ring: clamp(19rem, 26.5vw, 25rem);
  --pad: calc(50vw - 50% + 2.5rem);
  --c1: clamp(19rem, 25vw, 23rem);
  --gap: clamp(1.25rem, 2.2vw, 2.25rem);
  --ringcol: calc(var(--ring) + 3rem);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: var(--c1) var(--ringcol) minmax(0, 1fr);
  column-gap: var(--gap); align-items: center;
  min-height: clamp(34rem, 40vw, 44rem);
  margin: 0 calc(50% - 50vw); padding: 2.2rem var(--pad);
  overflow: hidden;
}
main.wrap:has(> .home-hero:first-child) { padding-top: 0; padding-bottom: 2.5rem; }
.home-hero-photo {
  position: absolute; z-index: -1; top: 0; bottom: 0; right: 0;
  left: calc(var(--pad) + var(--c1) + var(--gap) + var(--ringcol) / 2 - 2rem);
  background-color: #e9eef5;
  background-image: image-set(url("/assets/img/hero-car.webp") type("image/webp"), url("/assets/img/hero-car.jpg") type("image/jpeg"));
  background-position: right bottom; background-size: cover; background-repeat: no-repeat;
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 12% 100%);
}
/* Pe ecrane late panoul fotografiei devine lat (peste ~1,5:1); acolo vine
   varianta 2:1, cu mai multa scena in stanga, ca masina sa nu creasca odata cu
   latimea si sa ramana intreaga. */
@media (min-width: 1600px) {
  .home-hero-photo {
    background-image: image-set(url("/assets/img/hero-car-xl.webp") type("image/webp"), url("/assets/img/hero-car-xl.jpg") type("image/jpeg"));
  }
}
.home-hero-copy { grid-column: 1; position: relative; z-index: 2; min-width: 0; container-type: inline-size; }
.home-hero-title {
  --k: .505;  /* em pe „unitate de litera" (vezi home.php), Archivo condensat */
  margin: 1.1rem 0 1.4rem; color: var(--navy);
  font-family: var(--display); font-stretch: 70%; font-weight: 900; font-style: italic;
  /* Cel mai lung cuvant trebuie sa incapa in coloana, in toate limbile: PHP
     trimite numarul de litere (--hero-chars), iar marimea se alege din latimea
     coloanei (cqi). Plafonul ramane cel din macheta. */
  font-size: min(6.2rem, calc(100cqi / (var(--hero-chars, 9) * var(--k))));
  line-height: .9; letter-spacing: -.012em;
}
/* chirilica si greaca nu exista in Archivo: cad pe litera de rezerva, mai lata */
:lang(ru) .home-hero-title, :lang(uk) .home-hero-title, :lang(bg) .home-hero-title,
:lang(el) .home-hero-title { --k: .62; }
:lang(ru) .home-hero-title, :lang(uk) .home-hero-title, :lang(bg) .home-hero-title,
:lang(el) .home-hero-title { line-height: 1; }
:lang(zh) .home-hero-title, :lang(ja) .home-hero-title { --k: 1.04; font-style: normal; line-height: 1.12; letter-spacing: 0; }
.home-hero-title span { display: block; white-space: nowrap; }
.home-hero-title .is-accent { color: var(--brand); padding-left: .23em; }
.home-hero-lead { margin: 0; color: var(--ink-soft); font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.45; }
.home-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.7rem; margin-top: 1.8rem; }
.home-hero-ctas .btn-primary { margin: 0; }
.home-hero-ctas svg { flex: none; }
.home-hero-login { display: inline-flex; align-items: center; gap: .6rem; color: var(--navy); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.home-hero-login svg { color: var(--brand); }
.home-hero-login:hover { color: var(--accent-btn); }
.home-hero-note { margin: 1.1rem 0 0; color: var(--muted); font-size: .82rem; }
.home-hero .banner-offline { margin-top: 1.2rem; }

.home-hero-ring { grid-column: 2; position: relative; z-index: 3; display: flex; justify-content: center; min-width: 0; }
.home-hero-ring .terminal-upload { width: 100%; }
.home-hero-ring .terminal-ring { width: var(--ring); }
/* sub inel, peste fotografie: un fond alb discret ca textul sa ramana lizibil */
.home-hero-ring .terminal-own,
.home-hero-ring .terminal-gate-text,
.home-hero-ring .terminal-remaining,
.home-hero-ring .country-gate-form, .home-hero-ring .hint {
  width: min(100%, var(--ring)); margin-top: 1.3rem; padding: .6rem .85rem; border-radius: var(--radius);
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -14px rgba(14,35,66,.45);
}
.home-hero-ring .terminal-gate-text { font-size: .84rem; }
.home-hero-ring .terminal-submit { margin-top: .9rem; }
.home-hero--guest .home-hero-ring .terminal-gate-actions { display: none; }

/* banda 01—03 */
.home-band {
  display: flex; align-items: center; gap: 2rem;
  margin: 0 calc(50% - 50vw); padding: 1.9rem calc(50vw - 50% + 2.5rem);
  background: #f1f6fa; border-top: 1px solid #e1e9f2; border-bottom: 1px solid #e1e9f2;
}
.home-band-no {
  flex: none; padding-right: 2rem; border-right: 1px solid #c9d6e4;
  color: var(--brand); font-family: var(--display); font-stretch: 70%; font-weight: 900; font-style: italic;
  font-size: clamp(3rem, 5vw, 4.8rem); line-height: 1; white-space: nowrap;
}
.home-band-text { flex: 1 1 auto; min-width: 0; }
.home-band-text h2 { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.home-band-text p { margin: .35rem 0 0; color: var(--ink-soft); font-size: .98rem; }
.home-band-steps {
  flex: none; display: flex; align-items: center; gap: .8rem; margin: 0; padding: 0 0 0 2rem;
  border-left: 1px solid #c9d6e4; list-style: none;
}
.home-band-steps li { display: flex; align-items: center; gap: .8rem; color: var(--navy); font-weight: 600; }
.home-band-steps li svg { color: var(--brand); }
.home-band-steps li + li::before {
  content: ""; width: .5rem; height: .5rem; margin: 0 .6rem 0 .2rem;
  border-right: 2px solid #8db6ea; border-top: 2px solid #8db6ea; transform: rotate(45deg);
}

/* cum functioneaza + cifrele */
.home-how { padding: 3.4rem 1rem 1rem; }
.home-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.2rem; }
.home-how-card { padding: 1.5rem 1.5rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-soft); }
.home-how-head { display: flex; justify-content: space-between; align-items: center; color: var(--brand); }
.home-how-no { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #ddebfd; color: var(--navy); font-weight: 700; }
.home-how-card h3 { margin: 1.1rem 0 .45rem; font-family: var(--display); font-stretch: 72%; font-weight: 900; font-size: 1.75rem; line-height: 1.05; }
.home-how-card p { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.6; }

/* cifrele (partial comun cu /detect) */
.stat-tiles { margin-top: 1.25rem; border-color: var(--line); border-radius: var(--radius); background: var(--line); }
.stat-tile { background: #f1f6fa; padding-block: 1.6rem; }
.stat-tile-icon { color: var(--brand); }
.stat-tile-value { color: var(--navy); font-family: var(--display); font-stretch: 70%; font-weight: 900; font-size: clamp(2.4rem, 3.4vw, 3.3rem); line-height: 1; }
.stat-tile-label { color: var(--ink-soft); }

/* pasii de pe /detect (si oriunde mai apar) */
.terminal-flow { border-radius: var(--radius); }
.terminal-flow-step { background: #fff; }
.terminal-flow-no { color: var(--brand); }
.terminal-flow-step h2 { font-size: 1.35rem; }

/* pagina de incarcare /detect si cardul de pe tabloul de bord */
.detect-terminal-page {
  background: linear-gradient(180deg, #f1f6fa, #ffffff 75%);
  border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.detect-terminal-page::before, .detect-terminal-page::after { display: none; }
.terminal-dashboard-upload { background: linear-gradient(180deg, #f1f6fa, #fff 70%); border-color: var(--line); border-radius: var(--radius); }
.terminal-hero { background-image: none; background-color: #f1f6fa; }
.terminal-hero::after { display: none; }
.terminal-kicker { color: var(--accent); }
.terminal-promise-mark { background: var(--brand); color: #fff; box-shadow: none; }

/* in panou eroul nu iese din coloana: devine card */
body.panel .home-hero {
  --pad: 2.2rem; --c1: clamp(16rem, 21vw, 21rem); --ring: clamp(17rem, 21vw, 21rem);
  margin: 0; padding: 2rem var(--pad); border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 32rem;
}
body.panel .home-band { margin: 1.25rem 0 0; padding: 1.5rem 2rem; border: 1px solid #e1e9f2; border-radius: var(--radius); flex-wrap: wrap; }
body.panel .home-band-steps { flex-basis: 100%; padding: 1rem 0 0; border-left: 0; border-top: 1px solid #c9d6e4; }
body.panel .home-how { padding-top: 2.4rem; }

/* ══════════════════════════════════════════════════════════════════════════
   PANOUL CLIENTULUI SI ADMINUL — bara laterala bleumarin
   ══════════════════════════════════════════════════════════════════════════ */
.admin-side {
  background: linear-gradient(180deg, var(--side), var(--side-2));
  border-right: 0; box-shadow: none; color: #e3ecf6;
}
.admin-brand, .admin-side .brand { color: #fff; font-size: 1.95rem; }
.admin-side .brand::before { display: none; }
.admin-tag { color: #cfe0f2; border-color: rgba(255,255,255,.3); font-family: var(--sans); font-style: normal; font-weight: 600; }
.admin-nav-title { color: #a8bad0; font-weight: 600; letter-spacing: .18em; }
.admin-nav-link { color: #e3ecf6; border-left: 0; border-radius: var(--radius) 0 0 var(--radius); }
.admin-nav-link svg, .admin-nav-link .nav-ico { color: #c3d3e6; }
.admin-nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-nav-link.is-active {
  background: #ddebfd; color: var(--navy); font-weight: 600;
  border-left: 0; box-shadow: none;
}
.admin-nav-link.is-active svg, .admin-nav-link.is-active .nav-ico { color: var(--brand); }
.admin-nav-link.is-active .nav-badge { background: var(--brand); color: #fff; }
.nav-badge { background: var(--brand); color: #fff; }
.admin-side-foot { border-top-color: rgba(255,255,255,.12); }
.side-foot-link, .admin-side-foot .side-foot-link, .admin-logout {
  color: #e3ecf6; background: none; border: 0; box-shadow: none; font: inherit; cursor: pointer;
}
.side-foot-link:hover, .admin-logout:hover { color: #fff; background: rgba(255,255,255,.07); }
.side-foot-link svg { color: #c3d3e6; }
.panel-lang summary { color: #e3ecf6; }
.panel-lang-label { color: #e3ecf6; }
.panel-lang-current { background: rgba(255,255,255,.1); color: #fff; }
.panel-lang ul { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.panel-lang li a { color: var(--ink); }
.panel-lang li a.current { background: var(--accent-soft); color: var(--accent-dark); }
.panel-lang li a.current .lang-code { color: var(--accent-dark); }

.admin-main { background: #fff; }
@media (min-width: 901px) {
  body.admin:has(> .admin-shell), .admin-shell { background: linear-gradient(90deg, var(--side-2) 232px, #fff 232px); }
}
.panel-topbar, .admin-topbar { border-bottom-color: var(--line); }
.admin-crumbs { color: #7f90a6; }
.admin-crumbs a { color: #7f90a6; }
.admin-crumbs strong { color: var(--navy); }
/* firimiturile se rup intre niveluri, nu in mijlocul unui cuvant („ECU-/LAB") */
.admin-crumbs { flex-wrap: wrap; row-gap: .15rem; }
.admin-crumbs > * { white-space: nowrap; }
.admin-who { color: var(--ink-soft); }
.admin-main h1 { font-size: clamp(2.3rem, 3.4vw, 3.4rem); line-height: 1; margin-bottom: .35rem; }
.admin-main .page-eyebrow + h1, .admin-page > .page-eyebrow + h1 { margin-top: .1rem; }

.coin-pill {
  background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft);
}
.coin-pill b { color: var(--ink); }
.coin-pill--green .coin-dot { background: var(--coin-green); box-shadow: none; }
.coin-pill--red .coin-dot { background: var(--coin-red); box-shadow: none; }
.coin-pill--red b { color: var(--coin-red-ink); }
.admin-engine { border-radius: var(--radius); }

/* ── TELEFON: meniul lateral devine bloc bleumarin sus, toate intrarile la vedere ── */
@media (max-width: 900px) {
  .admin-side { border-bottom: 0; }
}
@media (max-width: 620px) {
  .admin-nav-link {
    border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
    border-radius: 999px; color: #e3ecf6;
  }
  .admin-nav-link.is-active { background: #ddebfd; border-color: #ddebfd; color: var(--navy); }
  .admin-side-foot > .admin-nav-link, .admin-side-foot .side-foot-link { border: 0; background: none; border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RASPUNS PE LATIME
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .home-band { flex-wrap: wrap; }
  .home-band-steps { flex-basis: 100%; padding: 1rem 0 0; border-left: 0; border-top: 1px solid #c9d6e4; }
}
/* Sub 1024px eroul se aseaza pe verticala: text, inel, fotografie. */
@media (max-width: 1023px) {
  .home-hero {
    --pad: calc(50vw - 50% + 1rem);
    display: flex; flex-direction: column; align-items: stretch;
    min-height: 0; padding: 2rem var(--pad) 0;
  }
  .home-hero-copy { order: 1; max-width: 36rem; }
  .home-hero-ring { order: 2; margin: 2.4rem 0 0; }
  .home-hero-photo {
    order: 3; position: relative; inset: auto; z-index: 0;
    height: clamp(14rem, 52vw, 26rem); margin: 2rem calc(-1 * var(--pad)) 0;
    background-image: image-set(url("/assets/img/hero-car-wide.webp") type("image/webp"), url("/assets/img/hero-car-wide.jpg") type("image/jpeg"));
    background-position: center 60%; background-size: cover;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 55%);
  }
  .home-hero-title { font-size: min(5.2rem, calc(100cqi / (var(--hero-chars, 9) * var(--k)))); }
  .home-hero-ring .terminal-own, .home-hero-ring .terminal-gate-text, .home-hero-ring .terminal-remaining,
  .home-hero-ring .country-gate-form, .home-hero-ring .hint { background: none; padding: 0; box-shadow: none; }
  .home-how-grid { grid-template-columns: 1fr; }
  body.panel .home-hero { --pad: 1.4rem; padding: 1.6rem var(--pad) 0; }
}
@media (max-width: 640px) {
  /* antetul pe telefon: sigla + limba sus, meniul intreg dedesubt (toate intrarile la vedere) */
  .header-row { position: relative; flex-wrap: wrap; row-gap: .75rem; padding: .85rem 0 .9rem; min-height: 0; }
  .brand { font-size: 1.85rem; }
  .brand::before { width: 1.5rem; margin-right: .6rem; }
  .main-nav { flex: 1 0 100%; justify-content: flex-start; gap: 0; }
  .main-nav > a, .main-nav > .inline-form .link-button { padding: 0 .8rem; font-size: .92rem; }
  .main-nav > a:first-child { padding-left: 0; }
  .main-nav a.nav-cta { margin-left: auto; padding: .62rem .95rem; font-size: .9rem; }
  .main-nav > .lang-switch { position: absolute; top: .8rem; right: 0; margin: 0; }
  .lang-switch summary { padding: .5rem .7rem; }
}
@media (max-width: 620px) {
  .home-hero { padding-top: 1.6rem; }
  .home-hero-ctas { gap: .8rem 1.3rem; }
  .btn-lg { padding: .9rem 1.25rem; font-size: 1rem; }
  .home-band { display: block; padding: 1.6rem 1rem; }
  .home-band-no { padding: 0; border: 0; font-size: 3.4rem; }
  .home-band-text h2 { margin-top: .6rem; }
  .home-band-steps { justify-content: space-between; gap: .3rem; }
  .home-band-steps li { flex-direction: column; gap: .4rem; font-size: .88rem; }
  .home-band-steps li + li::before { display: none; }
  .home-how { padding: 2.2rem 0 0; }
  .site-footer .wrap { display: block; line-height: 1.9; }
  .footer-brand { display: flex; margin: 0 0 .4rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AJUSTARI 03.10.2026 (seara, dupa verificarea lui Xprime pe site-ul live)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── NOTIFICARI: UN SINGUR ASPECT, PESTE TOT ────────────────────────────────
   Cerinta: mesajele — mai ales verificarea dispozitivului — „sa fie la fel
   peste tot, sa sara in ochi". Pana acum fiecare avea forma lui, iar regula
   generala `.card { background: #fff }` din tema le albise fundalul.

   O cutie, patru tonuri: ATENTIE (chihlimbar) pentru ce blocheaza sau cere o
   actiune, EROARE (rosu), GATA (verde), INFO (albastru). Toate au aceeasi
   bara groasa in stanga, acelasi fundal nuantat, acelasi cerc plin cu semn in
   fata titlului si, la ATENTIE/EROARE, butonul principal in culoarea tonului. */

/* 1) tonul fiecarui tip de mesaj */
.card.device-gate, .card.device-state.device-state--bad, .card.expiry-notice,
.card.country-notice.is-soon, .plan-scope, .maint-banner,
.mfs-entry-notice.mfs-entry-notice--warn, .notice.notice--warn, .flash.flash-warn {
  --n: #e8930c; --n-ink: #8f4c00; --n-bg: #fff6e6; --n-line: #f1d39c; --n-glyph: "!";
  --n-btn: #e8930c; --n-btn-hover: #d27f00; --n-btn-ink: #1c1203;
}
.card.country-notice.is-blocked, .flash.flash-error, .banner-offline {
  --n: #d93025; --n-ink: #a61b12; --n-bg: #fdeeec; --n-line: #f2c2bb; --n-glyph: "!";
  --n-btn: #d93025; --n-btn-hover: #b8261c; --n-btn-ink: #ffffff;
}
.card.device-state.device-state--ok, .card.sub-state.sub-state--active,
.flash.flash-success, .flash.flash-ok, .notice.notice--ok {
  --n: #12965a; --n-ink: #0b6b40; --n-bg: #eaf7f0; --n-line: #bfe4cf; --n-glyph: "✓";
}
.card.device-state.device-state--idle, .card.sub-state.sub-state--none,
.card.country-notice.is-calm, .notice.notice--info,
.mfs-entry-notice.mfs-entry-notice--info, .flash.flash-info {
  --n: #2c82ee; --n-ink: #1757a8; --n-bg: #eef5fd; --n-line: #cfe0f7; --n-glyph: "i";
}

/* 2) cutia (specificitatea din :is() e a celui mai greu selector din lista,
      deci bate si regulile cu trei clase din app.css) */
:is(.card.device-gate, .card.device-state.device-state--bad, .card.device-state,
    .card.expiry-notice, .card.country-notice.is-soon, .card.country-notice,
    .card.sub-state, .plan-scope, .maint-banner, .mfs-entry-notice, .notice, .flash,
    .banner-offline) {
  background: var(--n-bg, #f5f8fb);
  border: 1px solid var(--n-line, var(--line));
  border-left: 5px solid var(--n, var(--line-strong));
  border-radius: var(--radius);
  box-shadow: 0 14px 28px -24px var(--n, rgba(14,35,66,.5));
  color: var(--ink);
}

/* 3) titlul, cu cercul plin in fata */
:is(.card.device-gate, .card.device-state, .card.expiry-notice, .card.country-notice,
    .card.sub-state) > h2,
.plan-scope .plan-scope-title, .maint-banner .maint-banner-title {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 .5rem; color: var(--n-ink);
  font-family: var(--display); font-stretch: 78%; font-weight: 900;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.1; letter-spacing: 0;
}
:is(.card.device-gate, .card.device-state, .card.expiry-notice, .card.country-notice,
    .card.sub-state) > h2::before,
.plan-scope .plan-scope-title::before, .maint-banner .maint-banner-title::before {
  content: var(--n-glyph, "!"); flex: 0 0 auto;
  display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem;
  border: 0; border-radius: 50%; background: var(--n); color: #fff; box-shadow: none;
  font-family: var(--sans); font-stretch: 100%; font-size: 1.02rem; font-weight: 800; line-height: 1;
}
:is(.card.device-gate, .card.device-state, .card.expiry-notice, .card.country-notice,
    .card.sub-state) p { color: var(--ink); }
:is(.card.device-gate, .card.device-state, .card.expiry-notice, .card.country-notice,
    .card.sub-state) .hint { color: var(--ink-soft); }
:is(.card.device-gate, .card.device-state, .card.expiry-notice) .device-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: 1rem 0 0;
}
:is(.card.device-gate, .card.device-state) .device-reqs { margin-top: .35rem; font-size: .86rem; }
.maint-banner .maint-banner-title { font-size: 1.15rem; margin: 0; }

/* 4) mesajele de un rand (flash, notice, banda „offline"): cercul in stanga */
:is(.notice, .flash, .banner-offline) {
  position: relative; padding: .85rem 1.1rem .85rem 3.05rem; font-weight: 500;
}
:is(.notice, .flash, .banner-offline)::before {
  content: var(--n-glyph, "i"); position: absolute; left: .95rem; top: .82rem;
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: var(--n, var(--brand)); color: #fff; font-size: .82rem; font-weight: 800; line-height: 1;
}
.flash.flash-error, .banner-offline, .flash.flash-success, .flash.flash-ok { color: var(--n-ink); }

/* 5) butonul principal in culoarea tonului (ATENTIE / EROARE) */
:is(.card.device-gate, .card.device-state.device-state--bad, .card.expiry-notice,
    .card.country-notice.is-soon, .card.country-notice.is-blocked, .plan-scope) .btn-primary {
  background: var(--n-btn); border-color: var(--n-btn); color: var(--n-btn-ink);
  font-weight: 700; box-shadow: 0 10px 20px -14px var(--n-btn);
}
:is(.card.device-gate, .card.device-state.device-state--bad, .card.expiry-notice,
    .card.country-notice.is-soon, .card.country-notice.is-blocked, .plan-scope) .btn-primary:hover,
:is(.card.device-gate, .card.device-state.device-state--bad, .card.expiry-notice,
    .card.country-notice.is-soon, .card.country-notice.is-blocked, .plan-scope) .btn-primary:focus-visible {
  background: var(--n-btn-hover); border-color: var(--n-btn-hover); color: var(--n-btn-ink);
}
:is(.card.device-gate, .card.device-state, .card.expiry-notice, .card.country-notice,
    .plan-scope) .btn-secondary { background: #fff; border-color: var(--n-line); }

/* 6) aer dupa un mesaj: titlul paginii nu se mai lipeste de el */
:is(.card.device-gate, .card.expiry-notice, .card.country-notice, .maint-banner, .flash, .banner-offline) {
  margin-bottom: 1.5rem;
}
:is(.card.device-gate, .card.expiry-notice, .card.country-notice) + .card { margin-top: 0; }

/* ── COINS: cifra verde, verde; cifra rosie, rosie ────────────────────────── */
.coin-pill--green b, .terminal-wallet-stat .stat-value { color: var(--coin-green-ink); }
.coin-pill--red b, .terminal-wallet-stat .stat-second { color: var(--coin-red-ink); }

/* ── CARDURI PE ACELASI RAND: pornesc de la aceeasi inaltime ────────────────
   `.card + .card { margin-top }` (app.css) e pentru carduri STIVUITE; in grilele
   de mai jos al doilea card statea mai jos decat primul (gasit cu un audit pe
   toate paginile: sumarul comenzii, cifrele din rapoarte, coloanele din admin). */
:is(.order-summary, .rep-kpis, .admin-two-col, .report-cols, .device-counts, .stat-grid,
    [class*="-cols"], [class*="kpis"]) > .card + .card { margin-top: 0; }

/* ── CONTROALE PE ACELASI RAND: aceeasi inaltime ────────────────────────────
   Campurile aveau 40px, butoanele 46px (sau 62px cand textul se rupea pe doua
   randuri), selectoarele 35–37px. Acum toate au aceeasi inaltime minima, iar
   textul butoanelor nu se mai rupe. In formularele mici din tabele (credit,
   tara) totul are inaltimea mica, potrivita cu `.btn-small`. */
:is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
    input[type="search"], input[type="number"], input[type="url"], input[type="date"],
    input[type="datetime-local"], input[type="month"], input[type="time"], select) {
  min-height: 2.6rem; box-sizing: border-box;
}
.btn-primary, .btn-secondary {
  min-height: 2.6rem; display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; white-space: nowrap; vertical-align: middle; line-height: 1.2;
}
.btn-small {
  min-height: 2.2rem; display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; vertical-align: middle; line-height: 1.2;
}
form button:not([class]) { min-height: 2.6rem; white-space: nowrap; }
:is(.inline-form, .credit-adjust, .user-country-form) :is(input[type="text"], input[type="number"], select) {
  min-height: 2.2rem; padding-top: .3rem; padding-bottom: .3rem;
}
.btn-lg { min-height: 3.3rem; }
/* inelul nu iese niciodata din coloana lui (telefon, /detect) */
.terminal-ring { max-width: 100%; }

/* ── BARA LATERALA ──────────────────────────────────────────────────────────
   Mai lata (264px): titlurile de sectiune („AUTOMATIC PROCESSING") se rupeau pe
   doua randuri. Masurat in toate cele 20 de limbi: cel mai lung titlu
   („PRZETWARZANIE AUTOMATYCZNE") si cea mai lunga intrare („Χειροκίνητη
   επεξεργασία") incap acum pe un rand. Bara de derulare: subtire, pe culoarea barii. */
@media (min-width: 901px) {
  .admin-side { flex: 0 0 264px; width: 264px; }
  body.admin:has(> .admin-shell), .admin-shell {
    background: linear-gradient(90deg, var(--side-2) 264px, #fff 264px);
  }
}
.admin-nav-title { letter-spacing: .08em; line-height: 1.35; white-space: nowrap; }
.admin-side { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.admin-side::-webkit-scrollbar { width: 8px; }
.admin-side::-webkit-scrollbar-track { background: transparent; }
.admin-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 8px; }
.admin-side::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.4); }

/* ── FORMULARE PE GRILA: campurile de pe acelasi rand pornesc de la aceeasi
   inaltime, chiar daca o eticheta se rupe pe doua randuri ───────────────────
   Gasit cu auditul: in Admin (grupuri, setari de facturare, fisa clientului)
   eticheta mai lunga cobora campul ei cu un rand fata de vecini. Fiecare camp
   (eticheta / control / explicatie) foloseste acum randurile grilei parinte
   (subgrid): etichetele se aliniaza jos, controalele stau pe aceeasi linie. */
@supports (grid-template-rows: subgrid) {
  .filter-grid { row-gap: .35rem; }
  .filter-grid > .filter-field {
    display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: .3rem;
    margin-bottom: .7rem;
  }
  .filter-grid > .filter-field > label:first-child { align-self: end; margin-bottom: 0; }
  .filter-grid > .filter-field > :nth-child(2) { align-self: start; }
  .filter-grid > :not(.filter-field) { grid-row: span 3; align-self: start; }
  .filter-grid > .filter-check { align-self: center; }
}
/* randuri de formular in flex: totul aliniat pe linia de jos a controalelor */
.filter-row, .rep-subject-row { align-items: flex-end; }
.filter-bar { align-items: center; }
.filter-bar:has(> .filter-grid, > .filter-field) { align-items: flex-end; }
.filter-bar > .filter-grid { margin-bottom: 0; }
.filter-bar > .filter-grid > .filter-field { margin-bottom: 0; }
.filter-bar > .filter-actions { margin: 0; align-self: flex-end; }
.filter-row > .filter-actions { margin-top: 0; align-self: flex-end; }
.filter-bar > label { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.filter-bar > label.opt { flex-direction: row; }
.filter-bar > label > input, .filter-bar > label > select { margin: 0; }
.filter-bar > button, .filter-bar > .btn-primary, .filter-bar > .btn-secondary { margin-top: 0; }
.rep-period { align-items: center; }
.rep-period > label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.rep-period .btn-small { min-height: 2.6rem; }
.rep-subject-row .btn-small, .rep-subject-row > button { min-height: 2.6rem; margin-top: 0; }
form.inline-form:is(.credit-adjust, .user-country-form) {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem;
}
form.inline-form:is(.credit-adjust, .user-country-form) > :is(button, .btn-small, .btn-primary) { margin-top: 0; }
/* buton fara clasa intr-o bara de filtru: aceeasi inaltime, nu se rupe */
.filter-row button:not([class]), .filter-bar button:not([class]) {
  min-height: 2.6rem; border-radius: var(--radius); padding: .5rem 1.1rem; white-space: nowrap;
}

/* ── DEFECTE DE AFISARE GASITE LA VERIFICAREA PAGINA CU PAGINA ──────────────── */

/* Titlurile mici din cardurile de sumar (comanda in admin: „Vehicle & ECU",
   „What was ordered", „File & customer"): eticheta mica, nu titlu mare.
   Regula `.card h2` a temei le marise; cele trei carduri au si aceeasi inaltime. */
.order-summary { align-items: stretch; }
.card > h2.order-card-title, .card h2.order-card-title, .order-card-title {
  margin: 0 0 .7rem; color: var(--muted);
  font-family: var(--sans); font-stretch: 100%; font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.3;
}

/* Cifrele din Admin -> Queue, Throughput, Mailing: `.admin-cards` nu avea
   NICIUN stil (si nici in tema veche), asa ca se citea „In work0 Queued0…".
   Acum sunt placute ca restul cifrelor din panou: eticheta sus, cifra mare. */
.admin-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 1rem; margin: 0 0 1.4rem;
}
.admin-card {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .2rem;
  padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.admin-card-value {
  color: var(--accent-btn); font-family: var(--display); font-stretch: 75%; font-weight: 900;
  font-size: 2rem; line-height: 1.05;
}
.admin-card-label { color: var(--ink-soft); font-size: .8rem; font-weight: 500; }
.admin-card.is-alert { border-color: var(--error-line); border-left: 4px solid var(--error); }
.admin-card.is-alert .admin-card-value { color: var(--error); }

/* Caseta „Before you subscribe" sta si intr-o coloana ingusta (/plans):
   acolo titlul ramane potrivit coloanei. */
.plan-scope .plan-scope-title { font-size: clamp(1.05rem, 1.3vw, 1.3rem); align-items: flex-start; }
.plan-scope .plan-scope-title::before { margin-top: .05rem; }

/* Explicatia de sub inel nu se mai lipeste de lumina lui (/detect pentru oaspeti). */
.terminal-gate-text { margin-top: 1.7rem; }

/* Campul din randurile de filtru cu eticheta deasupra (Admin -> Trace) ia toata
   latimea campului lui; butonul sta langa el, nu la capatul paginii. */
.filter-row > .filter-field input, .filter-row > .filter-field select { max-width: none; }
.filter-row:has(> .filter-field) { justify-content: flex-start; }
/* randul de legaturi de deasupra titlului (Admin -> comanda, client, grup):
   legatura si butoanele mici pe aceeasi linie */
.rep-jump { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rep-jump .btn-small { margin: 0; }

/* Campuri fara atributul `type` (implicit text — ex. pictogramele din Admin ->
   Options & types) nu primeau deloc stilul campurilor: ieseau mici si fara
   chenar langa vecinii lor. Acum arata ca orice camp de text. */
input:not([type]) {
  width: 100%; min-height: 2.6rem; box-sizing: border-box;
  padding: .45rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: #fff; color: var(--ink); font: inherit; font-size: .9rem;
}
input:not([type]):focus { border-color: var(--accent-btn); outline: none; box-shadow: 0 0 0 3px rgba(44,130,238,.22); }
td.icon-cell { width: 13.5rem; min-width: 13.5rem; }
.icon-cell input.icon-input { width: 9.5rem; }

/* Alegerea de fisier (tichete, logo, catalog, anunturi): aceeasi inaltime ca
   butoanele de langa ea, cu butonul nativ in stilul butoanelor mici. */
input[type="file"] {
  min-height: 2.6rem; box-sizing: border-box; max-width: 100%;
  padding: .3rem .45rem; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  height: 2.6rem; line-height: 1;
  background: #fff; color: var(--ink-soft); font: inherit; font-size: .85rem; vertical-align: middle;
}
input[type="file"]::file-selector-button {
  margin-right: .7rem; padding: .3rem .75rem; height: 1.85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: #f5f8fb; color: var(--ink); font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--accent-btn); color: var(--accent-btn); }
/* pe telefon, campul de fisier din grilele de formular nu mai iese din coloana */
:is(.mfs-grid-2, .form-grid, .filter-grid) > * { min-width: 0; }
:is(.fld, .filter-field, .form-grid > div) > input[type="file"] { width: 100%; }

/* ECU-uri suportate (05.10.2026): marcile ca pastile, operatiunile ca etichete.
   Foloseste .chip / .op-chip / .ecu-chip existente; aici doar ce lipsea. */
.ecu-brand-grid { margin-top: .85rem; }
a.ecu-brand { text-decoration: none; color: var(--ink); font-size: .85rem; gap: .45rem; }
a.ecu-brand:hover { border-color: var(--accent-btn); color: var(--accent-dark); }
.ecu-brand-n { font-size: .72rem; font-weight: 600; color: var(--ink-soft); }
.ecu-list-brand h2 { display: flex; align-items: baseline; gap: .5rem; }
.ecu-list-table .op-chip.is-hit { background: var(--accent-btn); color: #fff; }
.ecu-list-note { margin-top: 1rem; }
/* Pe telefon tabelul nu mai derulează lateral: fiecare rând devine un bloc,
   ECU și combustibilul pe un rând, opțiunile dedesubt, pe toată lățimea.
   `tr:nth-child(n)` ridică specificitatea peste dungile și hover-ul generale
   ale `.data-table`, fără `!important`. */
@media (max-width: 700px) {
  .data-table.ecu-list-table { display: block; overflow: visible; }
  .ecu-list-table thead { display: none; }
  .ecu-list-table tbody, .ecu-list-table tr { display: block; }
  .ecu-list-table tbody tr { padding: .6rem .55rem; border-bottom: 1px solid var(--line); }
  .ecu-list-table tbody tr:last-child { border-bottom: 0; }
  .ecu-list-table tbody tr:nth-child(even) { background: var(--panel-2); }
  .data-table.ecu-list-table tbody tr:nth-child(n) td {
    display: inline-block; margin: 0; padding: 0; border: 0; background: transparent;
    white-space: normal; vertical-align: middle;
  }
  .data-table.ecu-list-table tbody tr:nth-child(n) td.col-ecu { margin-right: .55rem; }
  .data-table.ecu-list-table tbody tr:nth-child(n) td.wrap { display: block; margin: .45rem 0 0; }
  .ecu-list-brand.card { padding-left: .8rem; padding-right: .8rem; }
}

/* Avertismentul mare din „ECU-uri suportate" (05.10.2026): nu toate versiunile de software sunt suportate.
   Semnul „!" il deseneaza deja stilul unificat al notificarilor (.notice--warn); aici doar marimea. */
.notice.notice--warn.ecu-list-warn { font-size: 1.2rem; font-weight: 700; line-height: 1.45; padding-top: 1rem; padding-bottom: 1rem; margin: .4rem 0 1.15rem; }

/* Orders — Country / Group / Coins (07.10.2026, cerinta Xprime). Pastilele de grup sunt cele din lista Users;
   abonamentul se recunoaste dupa chenarul de accent. Ca tabelul sa incapa in card fara derulare: pastilele se
   aseaza una sub alta, coins-urile la fel sub 1700px, iar textele lungi (fisier, email) se taie mai devreme. */
.col-country { width: 1%; white-space: nowrap; text-align: center; }
.data-table th.col-country { letter-spacing: 0; }
.col-group .group-list { display: flex; flex-wrap: wrap; gap: .2rem; max-width: 10rem; }
.col-group .group-chip { margin: 0; font-size: .74rem; padding: .06rem .42rem; max-width: 10rem; }
.group-chip.group-chip--sub { border-color: var(--accent-btn); background: var(--accent-soft, var(--panel-2)); }
.col-coins { white-space: nowrap; }
.col-coins .coin-badge { font-variant-numeric: tabular-nums; }
.col-coins .coin-badge + .coin-badge { margin-left: .2rem; }
/* OLS se vede pe pagina comenzii; in lista se retrage primul (pana acum sub 1300px, acum sub 1700px). */
@media (max-width: 1700px) {
  .col-coins .coin-badge { display: block; width: max-content; }
  .col-coins .coin-badge + .coin-badge { margin: .2rem 0 0; }
  body.admin .orders-table th, body.admin .orders-table td { padding: .55rem .4rem; }
  .orders-table .col-file .cell-clip { max-width: 13rem; }
  .orders-table .col-user .cell-clip { max-width: 10rem; }
  .data-table.orders-table th.col-ols, .data-table.orders-table td.col-ols { display: none; }
}
@media (max-width: 1500px) {
  .data-table.orders-table .col-file, .data-table.orders-table th.col-file { min-width: 7rem; }
  .orders-table .col-file .cell-clip { max-width: 8rem; }
  .orders-table .col-user .cell-clip { max-width: 8rem; }
  .orders-table .col-op { min-width: 6rem; }
}
/* Sub 1400px se retrage si „Type” (aproape mereu „auto”; pana acum sub 1100px). */
@media (max-width: 1400px) {
  .data-table.orders-table th.col-type, .data-table.orders-table td.col-type { display: none; }
  .data-table.orders-table .col-file, .data-table.orders-table th.col-file { min-width: 6rem; }
  .orders-table .col-file .cell-clip { max-width: 7rem; }
}
@media (max-width: 1300px) {
  .data-table.orders-table .col-file, .data-table.orders-table th.col-file { min-width: 5rem; }
  .orders-table .col-file .cell-clip { max-width: 6rem; }
  .orders-table .col-user .cell-clip { max-width: 6.5rem; }
  .orders-table .col-group .group-list, .orders-table .col-group .group-chip { max-width: 7.5rem; }
  .orders-table .ecu-maker { display: none; }
}