/* =================================================================
   CM Automotive — electronica, electrica si calibrari ADAS
   Directie: laborator de masurare, nu atelier de mecanica.
   Culoare: grafit rece + albastru de scanare. Chihlimbarul si rosul
   raman EXCLUSIV pe lampile din panoul de bord, unde chiar au inteles.
   Tipografie: Archivo latit (etichete de aparat) + Inter Tight + JetBrains Mono
   Element-semnatura: panoul de martori din bord
   ================================================================= */

:root {
  --void: #070A10;
  --panel: #0E131C;
  --panel-2: #161D29;
  --line: #232C3B;
  --line-soft: #1A2130;
  --ink: #E9EDF4;
  --muted: #8792A6;

  /* accentul principal: albastrul aparatului de masura */
  --volt: #00BFF5;
  --volt-dim: #0d4c63;
  --scan: #6E8BFF;

  --ok: #2FD98A;
  --bad: #FF5A5F;
  /* folosit doar pentru martorii de avertizare, nu ca element de brand */
  --lamp-warn: #FFB020;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;

  --w: 1180px;
  --pad: 24px;

  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(880px 480px at 6% -10%, rgba(0, 191, 245, .08), transparent 70%),
    radial-gradient(640px 460px at 97% 0%, rgba(110, 139, 255, .07), transparent 70%);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.08;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.2rem, 5.4vw, 3.7rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.14rem; letter-spacing: -.01em; }

p { margin: 0 0 1em; }
a { color: inherit; }

.num, code { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--volt); color: #04222c; padding: 10px 16px; font-weight: 600; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; border-radius: 4px; }

/* rigla de masura — diviziuni fine, cu reper la fiecare a cincea
   Inlocuieste banda de avarie: acelasi rol structural, alt mesaj. */
.rule {
  height: 9px;
  background:
    repeating-linear-gradient(90deg, var(--volt) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 8px);
  background-size: 200px 9px, 200px 5px;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
  opacity: .5;
  border-bottom: 1px solid var(--line-soft);
}

/* ---------------- structura ---------------- */

.wrap { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 var(--pad); }
.sect { padding: 76px 0; }
.sect.tight { padding-top: 0; }

.eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--volt); margin: 0 0 12px; display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--volt); }

.lead { color: var(--muted); font-size: 1.05rem; max-width: 62ch; }

.grid { display: grid; gap: 18px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ---------------- bara de sus ---------------- */

.topbar { position: sticky; top: 0; z-index: 40; background: rgba(11, 12, 16, .86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); }
.topbar .inner { max-width: var(--w); margin: 0 auto; padding: 11px var(--pad); display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }

.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; text-decoration: none; flex: none; }
.brand svg { width: 27px; height: 27px; display: block; }
.brand span { color: var(--muted); font-weight: 400; font-size: .7rem; font-family: var(--mono); letter-spacing: .1em; display: block; margin-top: -2px; }

.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.nav a { padding: 8px 9px; border-radius: var(--r-sm); text-decoration: none; color: var(--muted); font-size: .88rem; font-weight: 500; white-space: nowrap; transition: color .15s, background .15s; }
.nav a:hover { color: var(--ink); background: var(--panel); }
.nav a.on { color: var(--volt); }

.nav-toggle { display: none; margin-left: auto; background: var(--panel); border: 1px solid var(--line); color: var(--ink); width: 42px; height: 38px; border-radius: var(--r-sm); font-size: 1.1rem; cursor: pointer; }

.callnow { font-family: var(--mono); font-size: .85rem; color: var(--volt); text-decoration: none; white-space: nowrap; padding: 8px 10px; }
.wallet { display: flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; text-decoration: none; flex: none; }
.wallet .amount { font-family: var(--mono); font-weight: 600; font-size: .88rem; }
.wallet .amount span { color: var(--muted); font-weight: 400; margin-left: 3px; }
.wallet:hover { border-color: var(--volt-dim); }

.meter { display: flex; gap: 2px; align-items: flex-end; }
.meter i { display: block; width: 3px; height: 12px; border-radius: 1px; background: var(--line); }
.meter i.lit { background: var(--volt); }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; padding: 0; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.iconbtn svg { width: 17px; height: 17px; }
.iconbtn:hover { color: var(--bad); border-color: rgba(255, 90, 95, .45); }

/* ---------------- ELEMENT-SEMNATURA: cele trei trasee ---------------- */

.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }

.route {
  position: relative; display: block; text-decoration: none;
  background: linear-gradient(180deg, var(--panel) 0%, #101319 100%);
  border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: 22px 20px 20px; overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.route::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--volt); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.route:hover { border-color: var(--line); transform: translateY(-3px); }
.route:hover::after { transform: scaleX(1); }
.route.scan::after { background: var(--scan); }

.route svg { width: 100%; height: 46px; margin-bottom: 16px; display: block; }
.route h3 { margin-bottom: 6px; }
.route p { color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
.route .go { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--volt); }
.route.scan .go { color: var(--scan); }

/* ---------------- butoane ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-family: var(--body); font-size: .95rem; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, background .15s, border-color .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--volt); color: #04222c; }
.btn.primary:hover:not(:disabled) { background: #3fd2ff; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn.ghost:hover:not(:disabled) { border-color: var(--volt); color: var(--volt); }
.btn.quiet { background: var(--panel-2); color: var(--ink); }
.btn.quiet:hover:not(:disabled) { background: #242b38; }
.btn.danger { background: transparent; border-color: rgba(255, 107, 107, .4); color: var(--bad); }
.btn.danger:hover:not(:disabled) { background: rgba(255, 107, 107, .12); }
.btn.sm { padding: 7px 13px; font-size: .84rem; }
.btn.wide { width: 100%; }

/* ---------------- carduri ---------------- */

.card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 22px; }
.card.pad-lg { padding: 28px; }

.tile {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: 22px; display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .18s ease;
}
.tile:hover { border-color: var(--line); transform: translateY(-2px); }

.tag {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono);
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px; border: 1px solid var(--line);
  color: var(--muted); background: var(--panel-2); white-space: nowrap;
}
.tag.atelier { color: var(--volt); border-color: var(--volt-dim); }
.tag.curier { color: var(--scan); border-color: rgba(110, 139, 255, .35); }
.tag.online { color: var(--ok); border-color: rgba(67, 214, 160, .35); }

.price { font-family: var(--mono); font-weight: 600; font-size: 1.45rem; }
.price small { font-size: .7rem; color: var(--muted); font-weight: 400; margin-left: 4px; letter-spacing: .06em; }
.price.soft { font-size: 1.05rem; color: var(--muted); }

.ticks { list-style: none; margin: 0 0 18px; padding: 0; }
.ticks li { position: relative; padding-left: 20px; color: var(--muted); font-size: .92rem; margin-bottom: 7px; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: .58em; width: 7px; height: 7px; background: var(--volt); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ticks.scan li::before { background: var(--scan); }

/* ---------------- hero ---------------- */

.hero { padding: 66px 0 18px; }
.hero h1 em { font-style: normal; color: var(--volt); }
.hero .lead { font-size: 1.12rem; }

.trust { display: flex; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
.trust div { font-size: .84rem; color: var(--muted); }
.trust b { display: block; font-family: var(--mono); font-size: 1.1rem; color: var(--ink); font-weight: 600; }

/* ---------------- pasi ---------------- */

.steps { counter-reset: pas; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; }
.steps li { list-style: none; padding: 24px 22px 24px 0; border-top: 1px solid var(--line-soft); }
.steps li + li { padding-left: 26px; border-left: 1px solid var(--line-soft); }
.steps li::before { counter-increment: pas; content: counter(pas, decimal-leading-zero); font-family: var(--mono); font-size: .78rem; color: var(--volt); display: block; margin-bottom: 8px; }
.steps h3 { margin-bottom: 5px; font-size: 1.02rem; }
.steps p { color: var(--muted); font-size: .9rem; margin: 0; }

/* ---------------- filtre ---------------- */

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.chip { background: var(--panel); border: 1px solid var(--line-soft); color: var(--muted); padding: 7px 14px; border-radius: 999px; font-size: .87rem; cursor: pointer; font-family: var(--body); transition: color .15s, border-color .15s; }
.chip:hover { color: var(--ink); }
.chip.on { color: var(--volt); border-color: var(--volt-dim); background: rgba(0, 191, 245, .08); }

/* ---------------- formulare ---------------- */

.form { display: grid; gap: 15px; }
.field { display: grid; gap: 6px; }
.field > label { font-size: .87rem; font-weight: 500; }
.field .hint { font-size: .79rem; color: var(--muted); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=datetime-local], input[type=file], select, textarea {
  width: 100%; padding: 11px 13px; background: var(--void); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--body); font-size: .94rem; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--volt); outline: none; }
input::placeholder, textarea::placeholder { color: #59617a; }
input[type=file] { padding: 9px 12px; font-family: var(--mono); font-size: .84rem; }
input#vh-vin { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }
textarea { min-height: 100px; resize: vertical; }

.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field-row.three { grid-template-columns: 1.2fr 1.2fr .7fr; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: .89rem; color: var(--muted); }
.check input { margin-top: 3px; accent-color: var(--volt); width: 16px; height: 16px; flex: none; }
.check a { color: var(--volt); }

.auth-page { max-width: 450px; margin: 56px auto 86px; }
.auth-page .card { padding: 30px; }
.auth-alt { text-align: center; color: var(--muted); font-size: .89rem; margin-top: 20px; }
.auth-alt a { color: var(--volt); }

.alert { padding: 12px 15px; border-radius: var(--r-sm); font-size: .89rem; border: 1px solid; margin: 0; }
.alert.err { background: rgba(255, 107, 107, .09); border-color: rgba(255, 107, 107, .35); color: #ffb3b3; }
.alert.ok { background: rgba(67, 214, 160, .09); border-color: rgba(67, 214, 160, .35); color: #97eccb; }
.alert.info { background: var(--panel-2); border-color: var(--line); color: var(--muted); }
.alert.warn { background: rgba(0, 191, 245, .08); border-color: var(--volt-dim); color: #ffd08a; }

/* ---------------- tabele ---------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: .89rem; }
thead th { text-align: left; padding: 11px 13px; background: var(--panel-2); font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
tbody td { padding: 11px 13px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:hover { background: rgba(255, 255, 255, .015); }

.state { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.state.nou { background: rgba(142, 151, 168, .14); color: var(--muted); }
.state.programat { background: rgba(0, 191, 245, .13); color: var(--volt); }
.state.asteptam { background: rgba(110, 139, 255, .13); color: var(--scan); }
.state.in_lucru { background: rgba(0, 191, 245, .13); color: var(--volt); }
.state.gata { background: rgba(67, 214, 160, .13); color: var(--ok); }
.state.livrat { background: rgba(67, 214, 160, .1); color: var(--ok); }
.state.anulat { background: rgba(142, 151, 168, .12); color: var(--muted); }
.state.restituit { background: rgba(255, 107, 107, .13); color: var(--bad); }

.plus { color: var(--ok); }
.minus { color: var(--bad); }

/* ---------------- cont ---------------- */

.balance-card { background: linear-gradient(140deg, #1d222e 0%, var(--panel) 62%); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.balance-card .n { font-family: var(--mono); font-size: 2.7rem; font-weight: 600; line-height: 1; margin: 6px 0 0; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.stat { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 17px; }
.stat b { display: block; font-family: var(--mono); font-size: 1.5rem; font-weight: 600; }
.stat span { font-size: .8rem; color: var(--muted); }

.order-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 20px; }
.order-card .head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.order-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 14px 0 0; font-size: .87rem; }
.order-card dt { color: var(--muted); }
.order-card dd { margin: 0; }

/* firul lucrarii */
.track { display: flex; gap: 0; margin: 18px 0 0; }
.track span { flex: 1; font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 10px; border-top: 2px solid var(--line); text-align: center; }
.track span.done { color: var(--volt); border-top-color: var(--volt); }

/* ---------------- admin ---------------- */

.row-actions { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---------------- modal ---------------- */

.modal-root:empty { display: none; }
.backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(4, 5, 8, .8); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.sheet { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; width: 100%; max-width: 540px; margin: auto; box-shadow: 0 40px 90px -30px #000; }
.sheet header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.sheet h3 { margin: 0; }
.sheet .x { background: none; border: none; color: var(--muted); font-size: 1.5rem; cursor: pointer; line-height: 1; }

/* ---------------- toast ---------------- */

.toaster { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; gap: 10px; }
.toast { background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--volt); padding: 13px 16px; border-radius: var(--r-sm); font-size: .89rem; max-width: 340px; animation: slide .25s ease both; }
.toast.bad { border-left-color: var(--bad); }
.toast.good { border-left-color: var(--ok); }
@keyframes slide { from { opacity: 0; transform: translateX(16px); } }

/* ---------------- subsol ---------------- */

.foot { border-top: 1px solid var(--line-soft); margin-top: 40px; padding: 13px 0; }

/* contactul, pe un rând, separat prin puncte */
.foot-contact { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .78rem; }
.foot-contact > * { color: var(--muted); text-decoration: none; }
.foot-contact .foot-note { color: var(--ink); }
.foot-contact > * + *::before { content: '·'; margin-right: 8px; color: var(--line); }
.foot-contact a:hover { color: var(--volt); }

.foot .base {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px 20px; flex-wrap: wrap;
  color: var(--muted); font-size: .78rem;
}
.foot-legal { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.foot-legal a { color: var(--muted); text-decoration: none; }
.foot-legal a + a::before { content: '·'; margin-right: 8px; color: var(--line); }
.foot-legal a:hover { color: var(--volt); }

@media (max-width: 700px) {
  .foot { margin-top: 28px; padding: 12px 0 10px; }
}

/* ---------------- utilitare ---------------- */

.muted { color: var(--muted); }
.center { text-align: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.stack { display: grid; gap: 14px; }
.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty h3 { color: var(--ink); }
.loading { padding: 66px 0; text-align: center; color: var(--muted); font-family: var(--mono); font-size: .84rem; }

/* ---------------- textul trimis de server ----------------
   Fiecare pagina pleaca de la server cu textul ei real scris in ea, ca sa
   fie citit de motoarele de cautare chiar si fara JavaScript. Aplicatia il
   inlocuieste in cateva zecimi de secunda, dar pana atunci trebuie sa arate
   ca facand parte din site, nu ca o pagina fara stil. */
.seo-corp {
  max-width: var(--w);
  margin: 0 auto;
  padding: 54px var(--pad) 70px;
  color: var(--muted);
}
.seo-corp h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 16px;
}
.seo-corp h2 {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 30px 0 10px;
}
.seo-corp p { margin: 0 0 12px; max-width: 70ch; line-height: 1.6; }
.seo-corp ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; }
.seo-corp a { color: var(--volt); text-decoration: none; }
.seo-corp a:hover { text-decoration: underline; }
.seo-corp b { color: var(--ink); font-weight: 600; }

/* Harta site-ului din josul blocului e pentru motoarele de cautare. Rămâne
   in pagina si accesibila, dar nu se vede peste conținutul propriu-zis. */
.seo-corp nav[aria-label='Harta site-ului'] { margin-top: 34px; border-top: 1px solid var(--line-soft); padding-top: 18px; }
.seo-corp nav[aria-label='Harta site-ului'] ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; }

.view { animation: fade .18s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

/* ---------------- mobil ---------------- */

@media (max-width: 1080px) { .callnow { display: none; } }

@media (max-width: 1150px) { .nav a { padding: 8px 7px; font-size: .85rem; } }

@media (max-width: 900px) {
  .routes, .g3, .g2, .steps, .stat-row, .foot .cols, .field-row, .field-row.three { grid-template-columns: 1fr; }
  .steps li + li { padding-left: 0; border-left: none; }
  .steps li { padding-right: 0; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--panel); border-bottom: 1px solid var(--line); padding: 10px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px; }
  .nav { white-space: normal; }
  .topbar .inner { gap: 10px; }
  .wallet, .iconbtn { align-self: flex-start; }
  .sect { padding: 52px 0; }
  .track span { font-size: .58rem; }
}

@media (max-width: 560px) {
  :root { --pad: 16px; }
  .card.pad-lg, .sheet, .balance-card { padding: 19px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .toaster { left: 16px; right: 16px; bottom: 16px; }
  .toast { max-width: none; }
  .callnow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* =================================================================
   Completări pentru fluxul de service
   ================================================================= */

/* ---- hero: text + panoul de martori ---- */

.hero .inner { display: grid; grid-template-columns: 1.02fr .98fr; gap: 50px; align-items: center; }

/* ---- panoul de martori din bord ---- */

.cluster {
  background: linear-gradient(165deg, #171a22 0%, #0f1219 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 30px 60px -34px #000;
}
.cluster-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cluster-title { font-family: var(--display); font-weight: 800; font-size: 1.06rem; letter-spacing: -.01em; }
.cluster-sub { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.lamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lamp {
  background: #0d1016; border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  padding: 13px 8px 10px; cursor: pointer; color: #4a5265;
  display: grid; justify-items: center; gap: 7px;
  font-family: var(--body); font-size: .74rem; line-height: 1.2; text-align: center;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.lamp svg { width: 26px; height: 26px; }
.lamp span { color: var(--muted); }
.lamp:hover { border-color: var(--line); color: #6b7488; }
.lamp.on {
  color: var(--lamp); border-color: color-mix(in srgb, var(--lamp) 45%, transparent);
  background: color-mix(in srgb, var(--lamp) 8%, #0d1016);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--lamp) 35%, transparent));
}
.lamp.on span { color: var(--ink); }

.cluster-out { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.cluster-out p { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.cluster-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- secțiuni pe două coloane ---- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.split-form { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: start; }


/* ---- perechi etichetă / valoare ---- */

.facts { display: flex; gap: 26px; flex-wrap: wrap; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.facts.col { display: grid; grid-template-columns: 1fr; gap: 8px; border-top: none; }
.facts div { display: grid; gap: 2px; }
.facts.col div { grid-template-columns: 150px 1fr; align-items: baseline; gap: 12px; }
.facts span { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts b { font-size: .93rem; font-weight: 600; }

/* ---- zona de încărcare a fișierului ---- */

.hidden-file { position: absolute; opacity: 0; width: 0; height: 0; }
.drop {
  display: grid; gap: 4px; justify-items: center; text-align: center; cursor: pointer;
  padding: 22px 16px; border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: var(--void); transition: border-color .15s, background .15s;
}
.drop:hover { border-color: var(--volt); }
.drop b { font-size: .92rem; }
.drop span { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.drop.filled { border-style: solid; border-color: var(--ok); }
.drop.filled b { color: var(--ok); }

/* ---- alegerea intervalului de programare ---- */

.slots-box { display: grid; gap: 12px; }
.day-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.day {
  background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--muted);
  border-radius: var(--r-sm); padding: 8px 12px; cursor: pointer; white-space: nowrap;
  font-family: var(--body); font-size: .83rem;
}
.day:hover { color: var(--ink); }
.day.on { background: rgba(0, 191, 245, .1); border-color: var(--volt-dim); color: var(--volt); }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.slot {
  background: var(--void); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--r-sm); padding: 9px 6px; cursor: pointer;
  font-family: var(--mono); font-size: .86rem;
}
.slot:hover:not(:disabled) { border-color: var(--volt); color: var(--volt); }
.slot.on { background: var(--volt); border-color: var(--volt); color: #04222c; font-weight: 600; }
.slot.busy, .slot:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }

/* ---- lista de comenzi din cont ---- */

.orders { display: grid; gap: 8px; }
.order-row {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  padding: 13px 15px; cursor: pointer; color: inherit; font: inherit;
  transition: border-color .15s, background .15s;
}
.order-row:hover { border-color: var(--line); background: #212734; }
.order-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.order-arrow { color: var(--muted); font-family: var(--mono); }

/* ---- adresa de expediere ---- */

.ship-box {
  background: var(--void); border: 1px solid var(--line); border-left: 3px solid var(--volt);
  border-radius: var(--r-sm); padding: 15px 17px; font-size: .92rem; line-height: 1.65;
}
.ship-box .muted { font-family: var(--mono); font-size: .78rem; }

/* ---- agenda atelierului ---- */

.agenda { display: grid; gap: 8px; }
.slot-row {
  display: grid; grid-template-columns: 58px 1fr auto auto; gap: 14px; align-items: center;
  padding: 11px 13px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
}
.slot-row > b { font-family: var(--mono); color: var(--volt); }

/* ---- contul ---- */

.account-top { display: grid; grid-template-columns: minmax(270px, 360px) 1fr; gap: 20px; align-items: start; }
.balance-card .meter { margin-top: 20px; flex-wrap: wrap; }
.meter.big i { width: 9px; height: 34px; border-radius: 2px; }
.meter.big { gap: 4px; }
.meter i.lit { box-shadow: 0 0 6px rgba(0, 191, 245, .5); }

/* ---- stările lipsă din fluxul de service ---- */

.state.primit { background: rgba(110, 139, 255, .13); color: var(--scan); }
.state.expediat { background: rgba(67, 214, 160, .1); color: #8ce9c5; }
.state.finalizat { background: rgba(67, 214, 160, .13); color: var(--ok); }

/* pasul curent din firul lucrării */
.track span.now { color: var(--ink); border-top-color: var(--volt); }
.track span.now::after {
  content: ''; display: block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--volt); margin: 6px auto 0;
}

/* ---- mobil ---- */

@media (max-width: 900px) {
  .hero .inner, .split, .split-form, .account-top { grid-template-columns: 1fr; gap: 30px; }
  .facts.col div { grid-template-columns: 1fr; gap: 2px; }
  .slot-row { grid-template-columns: 52px 1fr; }
  .slot-row > :nth-child(3), .slot-row > :nth-child(4) { grid-column: 2; justify-self: start; }
}

@media (max-width: 560px) {
  .lamps { grid-template-columns: repeat(2, 1fr); }
  .cluster { padding: 17px; }
}

/* ---- completări mici ---- */
.cta { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 26px; }
.tag.bonus { color: var(--volt); border-color: var(--volt-dim); }
.sheet-body { display: block; }

/* ---- harta atelierului ---- */

.map {
  position: relative;
  margin: 16px 0 0;
  height: var(--map-h, 260px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--panel-2);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35) contrast(1.05); }

/* Stratul de deasupra preia clicul si duce la traseu; iframe-ul l-ar inghiti. */
.map-hit { position: absolute; inset: 0; display: block; text-decoration: none; }
.map-hit:hover { background: rgba(0, 191, 245, .07); }

.map-cta {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--volt); color: #04222c;
  font-size: .84rem; font-weight: 600;
  padding: 8px 13px; border-radius: var(--r-sm);
}
.map-cta svg { width: 15px; height: 15px; }
.map-hit:hover .map-cta { background: #3fd2ff; }

@media (max-width: 560px) { .map { height: 200px; } }

/* ---- pagina de contact ---- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 16px;
  align-items: stretch;
  min-height: 380px;
}

.contact-info { display: flex; flex-direction: column; }

/* perechile eticheta / valoare, aliniate pe o coloana de iconite */
.cdet-list { display: grid; gap: 4px; flex: 1; }
.cdet {
  display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start;
  padding: 14px 0;
}
.cdet + .cdet { border-top: 1px solid var(--line-soft); }

.cdet-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--volt);
}
.cdet-ico svg { width: 18px; height: 18px; }

.cdet-label {
  display: block; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.cdet-value { display: block; font-size: .98rem; color: var(--ink); text-decoration: none; line-height: 1.45; }
a.cdet-value:hover { color: var(--volt); }

.contact-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.contact-actions .btn { flex: 1; min-width: 150px; }

/* harta umple cardul, fara chenar dublu */
.contact-map { padding: 0; overflow: hidden; }
.contact-map .map { height: 100%; min-height: 320px; margin: 0; border: 0; border-radius: 0; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; min-height: 0; }
  .contact-map .map { min-height: 260px; }
}

/* ---- butonul de WhatsApp ---- */

.btn.wa { background: #25D366; color: #04240f; }
.btn.wa:hover:not(:disabled) { background: #3ee57c; }
.btn.wa svg { width: 17px; height: 17px; flex: none; }

/* eticheta pentru sesiunile la distanță */
.tag.remote { color: #c9a6ff; border-color: rgba(201, 166, 255, .35); }


/* ---- pagina ITP: două carduri egale, harta lată dedesubt ---- */

.itp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
  align-items: stretch;
}
.itp-cols > .card { display: flex; flex-direction: column; }
/* butonul se lipește de baza cardului, ca cele două coloane să se termine la fel */
.itp-cols > .card > .btn { margin-top: auto; }

.itp-map { padding: 0; overflow: hidden; margin-top: 16px; }
.itp-map .map {
  margin: 0; border: 0; border-radius: 0;
  height: auto; aspect-ratio: 21 / 6; min-height: 240px;
}

@media (max-width: 860px) {
  .itp-cols { grid-template-columns: 1fr; }
  .itp-map .map { aspect-ratio: 4 / 3; min-height: 0; }
}

/* ---- formularul secțiunii ITP din admin ---- */
.itp-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  align-items: start;
}
.itp-form textarea { min-height: 0; }
.itp-form code {
  background: var(--void); border: 1px solid var(--line-soft);
  padding: 1px 5px; border-radius: 4px; font-size: .82em;
}

/* ---- caseta de verificare ITP ---- */

.itp-check { margin-top: 30px; border-color: var(--line); }
.itp-check h3 { margin-bottom: 6px; }

.check-form { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.check-form input {
  flex: 1; min-width: 220px;
  font-family: var(--mono); font-size: 1rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 13px 15px;
}
.check-form input::placeholder { letter-spacing: .04em; text-transform: none; }
.check-form .btn { flex: none; }

.check-kind { font-size: .82rem; margin: 10px 0 0; min-height: 1.2em; color: var(--muted); }
.check-kind.ok { color: var(--ok); }
.check-kind.warn { color: var(--lamp-warn); }

@media (max-width: 560px) {
  .check-form .btn { width: 100%; }
}

/* ---- fereastra de programare ---- */

/* Panoul larg, centrat pe ecran. Inaltimea urmeaza fereastra, ca formularul
   sa aiba loc fara derulare dubla. */
.sheet.sheet-wide {
  /* Pe masura formularului furnizorului, care e construit pentru o caseta
     fixa si nu se intinde daca ii dam mai mult loc. */
  max-width: min(760px, 94vw);
  padding: 18px;
  display: flex;
  flex-direction: column;
  max-height: 94vh;
}
.sheet-wide header { margin-bottom: 12px; }

.book-frame {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #fff;               /* formularul furnizorului are fundal deschis */
  height: var(--embed-h, 640px);
  max-height: 78vh;
}
.book-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 700px) {
  .backdrop { padding: 0; }
  .sheet.sheet-wide {
    max-width: 100%; width: 100%; max-height: 100%; height: 100dvh;
    border-radius: 0; border: 0; padding: 14px;
  }
  .book-frame { flex: 1; height: auto; max-height: none; }
}

/* ---- pagina ITP pe toată lățimea ---- */

.wrap-full { max-width: none; padding: 0 clamp(16px, 3.4vw, 52px); }
/* textele lungi rămân lizibile chiar dacă pagina e lată */
.wrap-full > .lead { max-width: 78ch; }

/* bara de acțiuni de deasupra titlului */
.itp-bar {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 24px;
  border-bottom: 1px solid var(--line-soft);
}
.itp-bar .btn svg { width: 16px; height: 16px; flex: none; }

@media (max-width: 620px) {
  .itp-bar { gap: 8px; }
  .itp-bar .btn { flex: 1 1 100%; }
}

/* ---- configurarea meniului din admin ---- */

.nav-rows { display: grid; gap: 8px; }
.nav-row {
  display: grid; grid-template-columns: 44px 1fr 120px; gap: 14px; align-items: center;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 10px 14px;
  transition: opacity .15s;
}
.nav-row.off { opacity: .5; }
.nav-order { display: grid; gap: 3px; }
.nav-order .iconbtn { width: 24px; height: 20px; font-size: .8rem; }
.nav-label input { font-weight: 500; }
.nav-label .hint { font-family: var(--mono); font-size: .74rem; color: var(--muted); display: block; margin-top: 4px; }
.nav-toggle-cell { justify-self: end; }

@media (max-width: 620px) {
  .nav-row { grid-template-columns: 44px 1fr; }
  .nav-toggle-cell { grid-column: 2; justify-self: start; }
}

/* =================================================================
   Banda de inspecție — decor pe marginile paginii ITP

   Mașina coboară prin bandă și trece prin trei posturi de control,
   care își aprind verdictul exact când ajunge în dreptul lor.

   Poziționarea, la fel ca la ADAS: conținutul e centrat, iar benzile
   stau în marginile rămase, câte una de fiecare parte.

   Înainte, benzile apăreau doar de la 1620px în sus și pe un laptop de
   13 inch nu se vedea nimic. Motivul nu era pragul, ci lățimea: pagina
   ITP avea conținutul fixat la 1400px, așa că pe un ecran de 1440px
   rămâneau 20px de margine — nicio bandă nu încape acolo.

   Acum conținutul se strânge exact cât e nevoie ca benzile să aibă loc,
   și nu mai mult: pe ecrane largi rămâne la 1400px ca înainte, iar pe
   unul îngust cedează cei câțiva zeci de pixeli care fac diferența.
   Ambele — conținutul și benzile — se calculează din aceeași valoare,
   ca să nu se poată desincroniza.
   ================================================================= */

/* Sub pragul benzilor nu se rezervă nimic în lateral: acolo nu e nicio
   bandă de găzduit, iar o margine rezervată degeaba ar strânge pagina
   pe telefon până ce ar începe să iasă din ecran. */
:root { --itp-w: 1400px; }

@media (min-width: 1280px) {
  /* 176px = loc pentru cele două benzi, cu spațiu de o parte și de alta */
  :root { --itp-w: min(1400px, calc(100vw - 176px)); }
}

.lane { display: none; }

/* Același prag ca la ADAS. Sub el, animația se mută în pagină. */
@media (min-width: 1280px) {
  .lane {
    display: block;
    position: fixed;
    top: 68px;                 /* sub bara de meniu, ca să nu treacă pe sub ea */
    bottom: 0;
    width: 58px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    color: var(--volt);
  }
  /* marginea dintre fereastră și conținut, minus lățimea benzii și un spațiu */
  .lane-l { left: calc((100vw - var(--itp-w)) / 2 - 76px); }
  .lane-r { right: calc((100vw - var(--itp-w)) / 2 - 76px); }

  /* marcajele benzii, care coboară continuu */
  .lane::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(180deg, var(--volt) 0 30px, transparent 30px 86px) 4px 0 / 2px 86px repeat-y,
      repeating-linear-gradient(180deg, var(--volt) 0 30px, transparent 30px 86px) 52px 0 / 2px 86px repeat-y;
    opacity: .22;
    animation: laneMove 5s linear infinite;
  }

  /* reperele de măsură */
  .lane::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 40px) 23px 0 / 12px 40px repeat-y;
    opacity: .5;
  }
}

/* Pagina ITP: centrată, cu lățimea din aceeași valoare ca benzile, ca
   marginile să rămână exact cât le trebuie lor. */
.wrap-full { max-width: var(--itp-w); margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }

@keyframes laneMove {
  from { background-position-y: 0, 0; }
  to   { background-position-y: 86px, 86px; }
}

/* ---- mașina ---- */

.lane-car {
  position: absolute;
  left: 50%;
  width: 40px;
  margin-left: -20px;
  color: var(--volt);
  animation: carDrive 15s linear infinite;
}
.lane-car svg { width: 100%; height: auto; display: block; }
.lane-r .lane-car { animation-delay: -7.5s; }

@keyframes carDrive {
  from { top: -16%; }
  to   { top: 106%; }
}

/* ---- posturile de control ---- */

.lane-gate {
  position: absolute;
  left: 2px;
  right: 2px;
  opacity: 0;
  animation: gateShow 15s linear infinite;
  animation-delay: var(--d, 0s);
}
.lane-r .lane-gate { animation-delay: calc(var(--d, 0s) - 7.5s); }

/* fasciculul care traversează banda */
.lane-gate::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ok), transparent);
}

/* verdictul, scris pe verticală ca să încapă în bandă */
.lane-gate span {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ok);
  white-space: nowrap;
}

.lane-gate.final::before { background: linear-gradient(90deg, transparent, var(--volt), transparent); height: 3px; }
.lane-gate.final span { color: var(--volt); font-weight: 600; }

@keyframes gateShow {
  0%        { opacity: 0; }
  2%        { opacity: 1; }
  11%       { opacity: 1; }
  17%, 100% { opacity: 0; }
}

/* ---- fasciculul care mătură banda ---- */

.lane-scan {
  position: absolute;
  left: 5px;
  width: 48px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--volt) 42%, transparent) 0%, transparent 72%);
  filter: blur(9px);
  animation: laneScan 15s ease-in-out infinite;
}
.lane-r .lane-scan { animation-delay: -7.5s; }

@keyframes laneScan {
  0%        { top: -12%; opacity: 0; }
  10%       { opacity: .4; }
  75%       { opacity: .4; }
  90%, 100% { top: 104%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lane::before, .lane-car, .lane-gate, .lane-scan { animation: none; }
  .lane-scan { display: none; }
  .lane-gate { opacity: .8; }
  .lane-car { top: 40%; opacity: .5; }
}

/* =================================================================
   ITP — aceeași inspecție, așezată în pagină

   Benzile de mai sus au nevoie de margini largi: conținutul are 1400px,
   iar sub circa 1600px nu mai rămâne loc în lateral. Varianta de aici
   stă în fluxul paginii și merge pe orizontală, deci încape la orice
   lățime — de la 13 inch până la telefon. Cele două nu se suprapun
   niciodată: aceasta dispare exact de unde încep benzile.
   ================================================================= */

.lane-scene {
  margin: 30px 0 4px;
  padding: 0;
}

@media (min-width: 1280px) {
  .lane-scene { display: none; }
}

.lsc-bay {
  position: relative;
  height: 132px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
  color: var(--volt);
}

/* marcajele benzii, care curg spre dreapta */
.lsc-bay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--volt) 0 30px, transparent 30px 86px) 0 34px / 86px 2px repeat-x,
    repeating-linear-gradient(90deg, var(--volt) 0 30px, transparent 30px 86px) 0 96px / 86px 2px repeat-x;
  opacity: .2;
  animation: lscMove 5s linear infinite;
}

/* reperele de măsură, pe axa din mijloc */
.lsc-bay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 40px) 0 59px / 40px 14px repeat-x;
  opacity: .55;
}

@keyframes lscMove {
  from { background-position-x: 0, 0; }
  to   { background-position-x: 86px, 86px; }
}

/* ---- mașina, culcată ---- */

.lsc-car {
  position: absolute;
  top: 50%;
  width: 74px;
  height: 40px;
  margin-top: -20px;
  color: var(--volt);
  animation: lscDrive 15s linear infinite;
}

/* Desenul e același din benzile verticale, doar culcat: mașina merge acum
   spre dreapta, nu în jos.

   Desenul are 40 lat pe 74 înalt, deci elementul păstrează raportul lui,
   iar rotația îl aduce la 74 pe 40. O rotație nu schimbă locul ocupat în
   pagină, doar ce se vede, așa că desenul e centrat pe punctul din mijloc
   al mașinii și rotit în jurul lui — altfel ar ieși din bandă. */
.lsc-car svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 74px;
  margin: -37px 0 0 -20px;
  display: block;
  transform: rotate(-90deg);
}

/* Aceeași distanță ca la banda verticală (de la -16% la 106%), ca posturile
   de control să se aprindă exact când ajunge mașina: întârzierile lor se
   calculează în gateDelay() pornind de la aceste valori. */
@keyframes lscDrive {
  from { left: -16%; }
  to   { left: 106%; }
}

/* ---- posturile de control ---- */

.lsc-gate {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0;
  animation: gateShow 15s linear infinite;
  animation-delay: var(--d, 0s);
}

/* fasciculul care traversează banda, de sus în jos */
.lsc-gate b {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--ok), transparent);
}

.lsc-gate span {
  position: absolute;
  top: 9px;
  left: 8px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ok);
  white-space: nowrap;
}

.lsc-gate.final b { background: linear-gradient(180deg, transparent, var(--volt), transparent); width: 3px; }
.lsc-gate.final span { color: var(--volt); font-weight: 600; }

/* Ultimul verdict e aproape de marginea din dreapta; scriem eticheta în
   stânga fasciculului, ca să nu fie tăiată. */
.lsc-gate.final span { left: auto; right: 8px; }

/* ---- fasciculul care mătură banda ---- */

.lsc-scan {
  position: absolute;
  top: 50%;
  margin-top: -32px;
  width: 150px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--volt) 42%, transparent) 0%, transparent 72%);
  filter: blur(9px);
  animation: lscScan 15s ease-in-out infinite;
}

@keyframes lscScan {
  0%        { left: -12%; opacity: 0; }
  10%       { opacity: .4; }
  75%       { opacity: .4; }
  90%, 100% { left: 104%; opacity: 0; }
}

.lane-scene figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: center;
}

/* Pe ecrane înguste banda se strânge, iar etichetele s-ar suprapune cu
   mașina; le ridicăm și micșorăm tot. */
@media (max-width: 560px) {
  .lsc-bay { height: 104px; }
  .lsc-bay::before {
    background:
      repeating-linear-gradient(90deg, var(--volt) 0 22px, transparent 22px 64px) 0 26px / 64px 2px repeat-x,
      repeating-linear-gradient(90deg, var(--volt) 0 22px, transparent 22px 64px) 0 76px / 64px 2px repeat-x;
  }
  .lsc-bay::after { background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 32px) 0 45px / 32px 12px repeat-x; }
  .lsc-car { width: 56px; height: 30px; margin-top: -15px; }
  .lsc-car svg { width: 30px; height: 56px; margin: -28px 0 0 -15px; }
  .lsc-gate span { font-size: .6rem; top: 6px; left: 6px; }
  .lsc-gate.final span { right: 6px; }
  .lsc-scan { width: 104px; height: 48px; margin-top: -24px; }
}

@media (prefers-reduced-motion: reduce) {
  .lsc-bay::before, .lsc-car, .lsc-gate, .lsc-scan { animation: none; }
  .lsc-scan { display: none; }
  .lsc-gate { opacity: .85; }
  .lsc-car { left: 42%; opacity: .55; }
}

/* ---- bara de cookie-uri ---- */

.cookiebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--panel); border-top: 1px solid var(--line);
  box-shadow: 0 -20px 50px -30px #000;
  animation: ckUp .3s ease both;
}
@keyframes ckUp { from { transform: translateY(100%); } }

.cookiebar-in {
  max-width: var(--w); margin: 0 auto; padding: 15px var(--pad);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.cookiebar p { margin: 0; font-size: .89rem; color: var(--muted); flex: 1; min-width: 260px; }
.cookiebar a { color: var(--volt); }
.cookiebar-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- harta neactivată ---- */

.map-off {
  display: grid; place-items: center;
  background: var(--panel-2);
  border: 1px dashed var(--line);
}
.map-ask { text-align: center; padding: 20px; display: grid; gap: 10px; justify-items: center; }
.map-ask p { margin: 0; font-size: .88rem; color: var(--muted); max-width: 34ch; }

/* ---- paginile legale ---- */

.legal { max-width: 800px; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 26px; }
.legal h2 {
  font-size: 1.12rem; margin: 34px 0 12px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; }
.legal p { color: var(--muted); font-size: .95rem; line-height: 1.7; }
.legal .ticks { margin-bottom: 16px; }
.legal b { color: var(--ink); }

@media (max-width: 560px) {
  .cookiebar-in { padding: 13px var(--pad); }
  .cookiebar-btns .btn { flex: 1; }
}


/* ---- subsol compact ---- */
.foot .brand { font-size: 1.05rem; }
.foot .brand svg { width: 22px; height: 22px; }
.foot .cols > div:first-child p { margin-top: 9px !important; font-size: .84rem !important; max-width: 32ch !important; }

@media (max-width: 900px) {
  .foot { margin-top: 38px; padding: 22px 0 16px; }
  .foot .cols { gap: 18px; }
}

/* =================================================================
   Scena de calibrare ADAS

   SVG cu viewBox, deci se scalează pe orice ecran fără reguli separate.
   Animația parcurge cele patru etape ale procedurii, în 16 secunde.
   ================================================================= */

.adas-scene {
  margin: 30px 0 0;
  padding: 0;
  background: linear-gradient(165deg, #10151f 0%, var(--void) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.adas-scene svg { width: 100%; height: auto; display: block; }
.adas-scene figcaption {
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  font-size: .84rem;
  color: var(--muted);
}

/* ---- elementele scenei ---- */

.adas-art .car .body { fill: var(--panel-2); stroke: var(--volt); stroke-width: 1.6; }
.adas-art .car rect { fill: var(--line); }
.adas-art .car .glass { fill: var(--volt); opacity: .22; }
.adas-art .car .roof { fill: var(--volt); opacity: .08; }
.adas-art .car .cam { fill: var(--volt); }

.adas-art .target .board { fill: var(--panel); stroke: var(--ink); stroke-width: 1.4; }
.adas-art .target .squares rect { fill: var(--ink); opacity: .8; }
.adas-art .target .center { fill: var(--void); stroke: var(--ink); stroke-width: 1.4; }
.adas-art .target .stand { stroke: var(--line); stroke-width: 2.5; }

.adas-art text {
  font-family: var(--mono);
  font-size: 15px;
  fill: var(--muted);
  letter-spacing: .06em;
}

/* axa mașinii: se trasează prima */
.adas-art .ax {
  stroke: var(--volt);
  stroke-width: 1.4;
  stroke-dasharray: 7 7;
  opacity: .75;
  animation: axDraw 16s ease-in-out infinite;
}
@keyframes axDraw {
  0%, 4%   { opacity: 0; transform: scaleY(0); }
  10%      { opacity: .75; transform: scaleY(1); }
  92%      { opacity: .75; }
  100%     { opacity: 0; }
}
.adas-art .ax { transform-origin: 440px 430px; }

/* bara laser */
.adas-art .laser line { stroke: var(--bad); stroke-width: 1.4; opacity: .8; }
.adas-art .laser circle { fill: var(--bad); }
.adas-art .laser text { fill: var(--bad); opacity: .85; }
.adas-art .laser { animation: fadeStep 16s ease-in-out infinite; }
@keyframes fadeStep {
  0%, 6%   { opacity: 0; }
  14%, 92% { opacity: 1; }
  100%     { opacity: 0; }
}

/* cota până la țintă */
.adas-art .dim line, .adas-art .dim path { stroke: var(--scan); stroke-width: 1.2; fill: none; }
.adas-art .dim .tick { stroke-width: 1.6; }
.adas-art .dim text { fill: var(--scan); font-size: 14px; }
.adas-art .dim { animation: dimIn 16s ease-in-out infinite; }
@keyframes dimIn {
  0%, 26%  { opacity: 0; }
  34%, 92% { opacity: 1; }
  100%     { opacity: 0; }
}

/* panoul-țintă intră după măsurarea axei */
.adas-art .target { animation: targetIn 16s ease-in-out infinite; transform-origin: 440px 176px; }
@keyframes targetIn {
  0%, 24%  { opacity: 0; transform: translateY(-22px); }
  32%, 92% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(0); }
}

/* colțurile care se strâng pe țintă */
.adas-art .lock path { stroke: var(--ok); stroke-width: 2.2; fill: none; }
.adas-art .lock { animation: lockIn 16s ease-in-out infinite; transform-origin: 440px 118px; }
@keyframes lockIn {
  0%, 54%  { opacity: 0; transform: scale(1.35); }
  62%, 92% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(1); }
}

/* conul camerei mătură până se fixează */
.adas-art .fov { fill: var(--volt); opacity: 0; animation: fovScan 16s ease-in-out infinite; transform-origin: 440px 322px; }
@keyframes fovScan {
  0%, 44%  { opacity: 0; transform: rotate(-7deg); }
  52%      { opacity: .16; transform: rotate(7deg); }
  60%      { opacity: .16; transform: rotate(-4deg); }
  68%, 92% { opacity: .1; transform: rotate(0deg); }
  100%     { opacity: 0; }
}

/* undele radarului pulsează în timpul calibrării */
.adas-art .radar path { stroke: var(--scan); stroke-width: 1.6; fill: none; opacity: 0; }
.adas-art .radar path:nth-child(1) { animation: wave 2.4s ease-out infinite; }
.adas-art .radar path:nth-child(2) { animation: wave 2.4s ease-out infinite .3s; }
.adas-art .radar path:nth-child(3) { animation: wave 2.4s ease-out infinite .6s; }
@keyframes wave {
  0%   { opacity: 0; }
  30%  { opacity: .55; }
  100% { opacity: 0; }
}

/* etapele, una câte una */
.adas-art .ph { opacity: 0; font-size: 16px; fill: var(--volt); }
.adas-art .ph.ok { fill: var(--ok); }
.adas-art .ph1 { animation: phase 16s linear infinite; }
.adas-art .ph2 { animation: phase 16s linear infinite 4s; }
.adas-art .ph3 { animation: phase 16s linear infinite 8s; }
.adas-art .ph4 { animation: phase 16s linear infinite 12s; }
@keyframes phase {
  0%          { opacity: 0; }
  2%, 22%     { opacity: 1; }
  25%, 100%   { opacity: 0; }
}

/* ---- ecrane mici: textele din scenă devin ilizibile sub o anumită lățime ---- */
@media (max-width: 620px) {
  .adas-art text { font-size: 21px; }
  .adas-art .dim text { display: none; }
  .adas-art .laser text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .adas-art .ax, .adas-art .laser, .adas-art .dim, .adas-art .target,
  .adas-art .lock, .adas-art .fov, .adas-art .radar path, .adas-art .ph {
    animation: none;
  }
  .adas-art .ax, .adas-art .laser, .adas-art .dim, .adas-art .target, .adas-art .lock { opacity: 1; transform: none; }
  .adas-art .fov { opacity: .1; }
  .adas-art .radar path { opacity: .4; }
  .adas-art .ph4 { opacity: 1; }
}

/* grupul etapelor: doar container, stilul e pe fiecare etapă */
.adas-art .phases { pointer-events: none; }


/* =================================================================
   Coloanele laterale de pe pagina ADAS

   Aceeași scenă, în format portret, așezată în spațiul liber dintre
   text și marginea ferestrei. Lățimea se calculează din spațiul chiar
   disponibil, deci nu poate intra peste conținut la nicio rezoluție.
   Sub 1280px coloanele dispar, iar scena orizontală le înlocuiește
   în fluxul paginii.
   ================================================================= */

.side-rail { display: none; }

/* conținutul paginii ADAS are 900px; restul ferestrei rămâne liber */
@media (min-width: 1280px) {
  .adas-scene { display: none; }

  .side-rail {
    --gol: calc((100vw - 900px) / 2);
    --rw: clamp(140px, calc(var(--gol) - 56px), 260px);

    display: block;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: var(--rw);
    max-height: 92vh;
    pointer-events: none;
    z-index: 0;
    opacity: .55;
  }
  /* centrată în spațiul rămas, de o parte și de alta */
  .side-rail-l { left: calc((var(--gol) - var(--rw)) / 2); }
  .side-rail-r { right: calc((var(--gol) - var(--rw)) / 2); }

  .side-rail svg { width: 100%; height: auto; max-height: 92vh; display: block; margin: 0 auto; }

  /* Decalăm coloana din dreapta cu jumătate de ciclu, ca cele două să nu
     fie identice. Undele radarului au ciclul lor scurt, deci le lăsăm. */
  .side-rail-r .ax,
  .side-rail-r .laser,
  .side-rail-r .dim,
  .side-rail-r .target,
  .side-rail-r .lock,
  .side-rail-r .fov,
  .side-rail-r .ph1 { animation-delay: -8s; }
  .side-rail-r .ph2 { animation-delay: -4s; }
  .side-rail-r .ph3 { animation-delay: 0s; }
  .side-rail-r .ph4 { animation-delay: 4s; }
}

/* pe ecrane foarte late, coloanele nu trebuie să se depărteze exagerat */
@media (min-width: 2000px) {
  .side-rail-l { left: calc((100vw - 1700px) / 2); }
  .side-rail-r { right: calc((100vw - 1700px) / 2); }
}

/* textul etapelor, în coloană */
.side-rail text { font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .side-rail svg * { animation: none !important; }
}

/* mesajul când căutarea din admin nu găsește nimic */
.search-empty { padding: 30px 20px; }

/* ---- caseta de căutare din admin ---- */

.admin-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  transition: border-color .15s;
}
.admin-search:focus-within { border-color: var(--volt); }

/* Un SVG fără width/height se întinde la lățimea containerului. Dimensiunea
   e pusă și pe element, în markup, ca să nu depindă doar de foaia de stil. */
.admin-search svg {
  width: 17px !important;
  height: 17px !important;
  flex: none;
  color: var(--muted);
}

.admin-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 11px 0;
  font-size: .92rem;
}
.admin-search input:focus { outline: none; border: 0; }
.admin-search input::-webkit-search-cancel-button { display: none; }

.admin-search .iconbtn {
  border: 0;
  width: 26px;
  height: 26px;
  font-size: 1.1rem;
  line-height: 1;
}

/* ---- editor de liste din admin ---- */

.rowed { display: grid; gap: 8px; justify-items: start; }
.rowed-rows { display: grid; gap: 8px; width: 100%; }

.rowed-row {
  display: grid;
  grid-template-columns: var(--cols, 1fr) 32px;
  gap: 8px;
  align-items: center;
}
.rowed-row input, .rowed-row select { padding: 9px 11px; font-size: .89rem; }
.rowed-row .iconbtn { width: 32px; height: 32px; font-size: 1.2rem; line-height: 1; }
.rowed-row .iconbtn:hover { color: var(--bad); border-color: rgba(255, 90, 95, .45); }

@media (max-width: 760px) {
  /* pe ecran îngust, câmpurile unui element trec unul sub altul */
  .rowed-row { grid-template-columns: 1fr 32px; }
  .rowed-row > :not(.iconbtn) { grid-column: 1; }
  .rowed-row .iconbtn { grid-row: 1; grid-column: 2; }
}

/* ---- lista de marcaje din fila Datele firmei ---- */

.marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 14px; }
.mark {
  display: flex; align-items: baseline; gap: 10px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 9px 12px; cursor: pointer;
  font: inherit; color: inherit; transition: border-color .15s;
}
.mark:hover { border-color: var(--volt); }
.mark code { font-family: var(--mono); font-size: .82rem; color: var(--volt); white-space: nowrap; }
.mark span { font-size: .8rem; color: var(--muted); }

/* =================================================================
   Scena Hibrid 48V — generatorul pe curea și bateria

   Cureaua se mișcă, rotorul se învârte, energia curge spre baterie la
   recuperare și înapoi la boost. Ciclul de 16 secunde urmează cele
   patru regimuri reale ale sistemului.
   ================================================================= */

.mhev-art text {
  font-family: var(--mono);
  font-size: 15px;
  fill: var(--muted);
  letter-spacing: .06em;
}

/* cureaua */
.mhev-art .belt {
  fill: none;
  stroke: var(--line);
  stroke-width: 7;
  stroke-dasharray: 14 10;
  animation: beltRun 1.1s linear infinite;
}
/* Traseul curelei e desenat coborând pe partea stângă. Un decalaj negativ
   ar deplasa marcajele în sensul desenului, adică invers acelor de ceasornic,
   pe când rotorul se învârte în sensul acelor. Semnul pozitiv le sincronizează. */
@keyframes beltRun { to { stroke-dashoffset: 24; } }

/* generatorul */
.mhev-art .rsg .case { fill: var(--panel-2); stroke: var(--volt); stroke-width: 1.8; }
.mhev-art .rotor { stroke: var(--volt); stroke-width: 1.6; fill: none; transform-origin: 120px 214px; animation: rotorSpin 2.2s linear infinite; }
.mhev-art .rotor circle { fill: var(--volt); opacity: .35; }
@keyframes rotorSpin { to { transform: rotate(360deg); } }

/* fulia arborelui cotit */
.mhev-art .crank circle { fill: var(--panel); stroke: var(--line); stroke-width: 1.8; }
.mhev-art .crank .hub { fill: var(--line); }

/* traseul electric */
.mhev-art .wire { fill: none; stroke: var(--line-soft); stroke-width: 2; }
.mhev-art .flow circle { fill: var(--scan); opacity: 0; offset-rotate: 0deg; }
.mhev-art .flow circle:nth-child(1) { animation: flowDown 16s linear infinite; }
.mhev-art .flow circle:nth-child(2) { animation: flowDown 16s linear infinite .35s; }
.mhev-art .flow circle:nth-child(3) { animation: flowDown 16s linear infinite .7s; }
.mhev-art .flow circle:nth-child(4) { animation: flowDown 16s linear infinite 1.05s; }

/* Punctele coboară spre baterie în primele două regimuri și urcă la boost. */
@keyframes flowDown {
  0%        { transform: translate(196px, 214px); opacity: 0; }
  3%        { opacity: .9; }
  28%       { transform: translate(196px, 600px); opacity: .9; }
  30%       { opacity: 0; }
  55%       { transform: translate(196px, 600px); opacity: 0; }
  58%       { opacity: .9; }
  78%       { transform: translate(196px, 214px); opacity: .9; }
  82%, 100% { opacity: 0; }
}

/* bateria */
.mhev-art .batt .shell { fill: var(--panel); stroke: var(--ink); stroke-width: 1.6; }
.mhev-art .batt .cap { fill: var(--line); }
.mhev-art .batt .cells rect { fill: var(--ok); opacity: .18; transform-origin: center bottom; }
.mhev-art .batt .cells rect:nth-child(1) { animation: cellFill 16s ease-in-out infinite; }
.mhev-art .batt .cells rect:nth-child(2) { animation: cellFill 16s ease-in-out infinite .6s; }
.mhev-art .batt .cells rect:nth-child(3) { animation: cellFill 16s ease-in-out infinite 1.2s; }
.mhev-art .batt .cells rect:nth-child(4) { animation: cellFill 16s ease-in-out infinite 1.8s; }
@keyframes cellFill {
  0%, 6%    { opacity: .18; }
  30%, 52%  { opacity: .85; }
  76%, 100% { opacity: .18; }
}
.mhev-art .batt text { fill: var(--ok); }

/* etapele */
.mhev-art .ph { opacity: 0; font-size: 15px; fill: var(--volt); }
.mhev-art .ph.ok { fill: var(--ok); }
.mhev-art .ph1 { animation: phase 16s linear infinite; }
.mhev-art .ph2 { animation: phase 16s linear infinite 4s; }
.mhev-art .ph3 { animation: phase 16s linear infinite 8s; }
.mhev-art .ph4 { animation: phase 16s linear infinite 12s; }

/* coloana din dreapta, decalată cu jumătate de ciclu */
.side-rail-r .mhev-art .flow circle,
.side-rail-r.mhev-art .flow circle { animation-delay: -8s; }
.side-rail-r.mhev-art .ph1 { animation-delay: -8s; }
.side-rail-r.mhev-art .ph2 { animation-delay: -4s; }
.side-rail-r.mhev-art .ph3 { animation-delay: 0s; }
.side-rail-r.mhev-art .ph4 { animation-delay: 4s; }

@media (prefers-reduced-motion: reduce) {
  .mhev-art .belt, .mhev-art .rotor, .mhev-art .flow circle,
  .mhev-art .batt .cells rect, .mhev-art .ph { animation: none; }
  .mhev-art .batt .cells rect { opacity: .6; }
  .mhev-art .ph2 { opacity: 1; }
}

/* =================================================================
   Panoul de administrare — navigare laterală

   Secțiunile sunt grupate pe ce faci cu ele. Structura suportă oricâte
   pagini noi fără să devină un rând de file prin care derulezi.
   Pe ecran îngust, lista devine un selector compact.
   ================================================================= */

.admin-shell {
  display: grid;
  grid-template-columns: 224px 1fr;
  gap: 26px;
  align-items: start;
}

.admin-side { position: sticky; top: 78px; }

.admin-nav { display: grid; gap: 2px; }
.admin-group {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 7px 10px;
}
.admin-group:first-child { margin-top: 0; }

.admin-nav button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left;
  background: none; border: 0; border-left: 2px solid transparent;
  color: var(--muted); cursor: pointer;
  font-family: var(--body); font-size: .9rem;
  padding: 9px 10px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: color .15s, background .15s, border-color .15s;
}
.admin-nav button:hover { color: var(--ink); background: var(--panel); }
.admin-nav button.on {
  color: var(--volt);
  border-left-color: var(--volt);
  background: rgba(0, 191, 245, .07);
  font-weight: 500;
}

.admin-badge {
  font-family: var(--mono); font-style: normal; font-size: .7rem;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  color: var(--muted); padding: 1px 6px; border-radius: 999px; flex: none;
}
.admin-nav button.on .admin-badge { border-color: var(--volt-dim); color: var(--volt); }

/* antetul secțiunii, cu titlul și căutarea pe același rând */
.admin-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.admin-head h3 { margin: 0; font-size: 1.3rem; flex: none; }
.admin-head .admin-search { flex: 1; min-width: 220px; margin-bottom: 0; }

/* selectorul apare doar pe ecran îngust */
.admin-jump { display: none; }

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; gap: 16px; }
  .admin-side { position: static; }
  .admin-nav { display: none; }

  .admin-jump { display: grid; gap: 6px; }
  .admin-jump > span {
    font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
  }
  .admin-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .admin-head .admin-search { min-width: 0; }
}

/* coloana de conținut: min-width 0 ca tabelele late să se poată derula intern */
.admin-main { min-width: 0; }

/* ---- vizibilitate restrânsă ---- */

.tag.viz-part { color: #c9a6ff; border-color: rgba(201, 166, 255, .35); }
.tag.viz-priv { color: var(--bad); border-color: rgba(255, 90, 95, .35); }

/* lista de utilizatori din fereastra de acces */
.acc-list {
  display: grid; gap: 4px;
  max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 6px;
}
.acc-row {
  display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: center;
  padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
  transition: background .12s;
}
.acc-row:hover { background: var(--panel-2); }
.acc-row input { accent-color: var(--volt); width: 16px; height: 16px; }
.acc-row b { font-size: .9rem; font-weight: 600; margin-right: 6px; }
.acc-row .muted { font-size: .8rem; display: block; margin-top: 2px; }
.acc-row .tag { font-size: .6rem; padding: 2px 6px; vertical-align: middle; }

/* text care se comportă ca link, dar e buton */
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--volt);
  text-align: left; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: transparent; transition: text-decoration-color .15s;
}
.linkish:hover { text-decoration-color: var(--volt); }

/* ---- rezumatul creditelor din fișa clientului ---- */

.tx-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; }
.tx-chip {
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 9px 12px;
}
.tx-chip span { display: block; font-size: .74rem; color: var(--muted); }
.tx-chip b { font-family: var(--mono); font-size: 1.05rem; }
.tx-chip i { display: block; font-style: normal; font-size: .72rem; color: var(--muted); margin-top: 1px; }

/* ---- coduri QR ---- */

.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }

.qr-card {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 14px;
}
.qr-card.off { opacity: .55; }
.qr-img { background: #fff; border-radius: 6px; padding: 6px; line-height: 0; }
.qr-img svg { display: block; }

.qr-info { min-width: 0; display: grid; gap: 3px; }
.qr-info b { font-size: .95rem; }
.qr-info code {
  font-family: var(--mono); font-size: .8rem; color: var(--volt);
  overflow-wrap: anywhere;
}
.qr-info .muted { font-size: .8rem; overflow-wrap: anywhere; }
.qr-info .qr-stats { font-family: var(--mono); font-size: .75rem; }

/* previzualizarea din formular */
.qr-preview {
  display: grid; place-items: center;
  background: var(--void); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 14px;
}
.qr-preview svg { background: #fff; border-radius: 4px; }

@media (max-width: 480px) {
  .qr-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .qr-info { justify-items: center; }
}


/* ==================================================================
   Secțiunea de indexare din panoul de administrare

   Titlul și descrierea fiecărei pagini, cu o bară care arată cât din
   spațiul afișat de Google e folosit și o previzualizare a rezultatului.
   ================================================================== */

.seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px 18px;
}

.seo-pag label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* bara de umplere: goală, prea scurtă, bună, prea lungă */
.seo-meter { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .72rem; }
.seo-len {
  display: inline-block;
  width: 54px; height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.seo-len i { display: block; height: 100%; border-radius: 2px; background: var(--muted); transition: width .12s linear, background .12s linear; }
.seo-len.bun i { background: var(--ok); }
.seo-len.scurt i { background: var(--lamp-warn); }
.seo-len.lung i { background: var(--bad); }
.seo-len.lung + .seo-num { color: var(--bad); }
.seo-len.bun + .seo-num { color: var(--ok); }
.seo-num { font-variant-numeric: tabular-nums; }
.seo-max { color: var(--muted); opacity: .65; }

/* cum arată rezultatul în pagina de căutare */
.seo-preview {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--void);
  display: grid;
  gap: 3px;
}
.seo-preview .seo-url { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.seo-preview .seo-title {
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--scan);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.seo-preview .seo-desc {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 720px) {
  .seo-grid { grid-template-columns: 1fr; }
  .seo-pag label { flex-wrap: wrap; }
}