/* =================================================================
   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 ---------------- */

.admin-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-soft); margin-bottom: 24px; overflow-x: auto; }
.admin-tabs button { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); padding: 12px 15px; cursor: pointer; font-family: var(--body); font-size: .93rem; font-weight: 500; white-space: nowrap; }
.admin-tabs button:hover { color: var(--ink); }
.admin-tabs button.on { color: var(--volt); border-bottom-color: var(--volt); }
.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: 52px; padding: 26px 0 18px; }
.foot .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 22px; }
.foot h4 { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 4px; }
.foot a, .foot span.li { color: var(--muted); text-decoration: none; font-size: .85rem; }
.foot a:hover { color: var(--volt); }
.foot .base { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .78rem; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---------------- 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; }

.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: conținutul are lățime fixă și e centrat, iar benzile
   stau în marginea rămasă. Apar doar când marginea e destul de lată,
   altfel ar intra peste text — cum se întâmpla la 1920x1080.
   ================================================================= */

.lane { display: none; }

@media (min-width: 1620px) {
  .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(--legal-w, 1400px)) / 2 - 76px); }
  .lane-r { right: calc((100vw - var(--legal-w, 1400px)) / 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: lățime fixă, centrată, ca benzile să aibă loc pe margini */
.wrap-full { max-width: 1400px; 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; }
}

/* ---- 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.
   ================================================================= */

.adas-rail { display: none; }

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

  .adas-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 */
  .adas-rail-l { left: calc((var(--gol) - var(--rw)) / 2); }
  .adas-rail-r { right: calc((var(--gol) - var(--rw)) / 2); }

  .adas-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. */
  .adas-rail-r .ax,
  .adas-rail-r .laser,
  .adas-rail-r .dim,
  .adas-rail-r .target,
  .adas-rail-r .lock,
  .adas-rail-r .fov,
  .adas-rail-r .ph1 { animation-delay: -8s; }
  .adas-rail-r .ph2 { animation-delay: -4s; }
  .adas-rail-r .ph3 { animation-delay: 0s; }
  .adas-rail-r .ph4 { animation-delay: 4s; }
}

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

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

@media (prefers-reduced-motion: reduce) {
  .adas-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;
}