/* RadarSV — harta pe tot ecranul, foaie albă jos, butoane mari și rotunde (ca o navigație premium).
   Gândit pentru telefonul prins în suport: ținte mari, contrast mare, zi și noapte. */
:root {
  --bg: #eef0eb;
  --surface: #ffffff;
  --glass: rgba(255, 255, 255, .96);
  --surface-2: #f2f4f7;
  --fg: #15191f;
  --muted: #687280;
  --line: rgba(17, 24, 39, .08);

  --radar: #e8382f;
  --radar-2: #c3221a;
  --politie: #2470e6;
  --politie-2: #1652c4;
  --accident: #ffb43a;
  --accident-2: #f07a00;
  --accident-ink: #2b1700;
  /* culorile iconițelor pe butoanele albe */
  --ico-radar: #e3302a;
  --ico-politie: #1f6fe5;
  --ico-accident: #f39200;
  --ok: #16a34a;
  --ok-2: #0f7a37;
  --on-color: #ffffff;
  --me: #1a73e8;
  --gps-on: #22c55e;
  --gps-on-bg: #1a5a35;
  --gps-on-bg2: #0e3520;
  --gps-off: #121417;
  --pin-ring: #ffffff;
  --sheet: #ffffff;
  --act-bg: #ffffff;
  --grab: #d5d9df;

  --plate: #ffffff;
  --plate-ink: #111111;
  --plate-eu: #1f46b5;
  --plate-star: #ffd617;

  --shadow: 0 12px 32px -10px rgba(16, 24, 40, .3);
  --shadow-sm: 0 4px 16px -4px rgba(16, 24, 40, .22);
  --shadow-up: 0 -8px 28px -8px rgba(16, 24, 40, .18);

  --f-display: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --top-h: 62px;
  --panel-h: 220px; /* actualizat din JS după înălțimea reală a panoului */
  --r-lg: 26px;
  --r-md: 18px;
  color-scheme: light;
}

/* Noaptea: automat după apusul soarelui (ca la Waze) sau aleasă din meniu */
:root[data-theme="dark"] {
    --bg: #0b0f14;
    --surface: #161b22;
    --glass: rgba(22, 27, 34, .96);
    --surface-2: #212833;
    --fg: #eef2f6;
    --muted: #95a1ae;
    --line: rgba(238, 242, 246, .09);
    --radar: #ff4b3a;
    --radar-2: #c81f12;
    --politie: #4a86ff;
    --politie-2: #1b50d0;
    --ico-radar: #ff5a4a;
    --ico-politie: #5b93ff;
    --ico-accident: #ffb02e;
    --ok: #22b366;
    --me: #4d9bff;
    --sheet: #161b22;
    --act-bg: #222a35;
    --grab: #3a434f;
    --shadow: 0 12px 32px -10px rgba(0, 0, 0, .75);
    --shadow-sm: 0 4px 16px -4px rgba(0, 0, 0, .6);
    --shadow-up: 0 -8px 28px -8px rgba(0, 0, 0, .7);
    --gps-off: #000000;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.4 var(--f-body);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
button { font: inherit; }
:focus-visible { outline: 3px solid var(--me); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Sticlă: panourile lasă harta să se vadă estompat prin ele */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--line);
}

/* ---- Hartă ---- */
#map { position: fixed; inset: 0; background: var(--bg); }
.maplibregl-map { font-family: var(--f-body); background: var(--bg); }
.maplibregl-ctrl-top-right { top: calc(var(--safe-t) + var(--top-h)); }
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { bottom: var(--panel-h); }
.maplibregl-ctrl-group { border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm) !important; }
.maplibregl-ctrl-group button { width: 40px; height: 40px; }
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.maplibregl-ctrl.maplibregl-ctrl-attrib { margin: 0 8px 6px 0; background: var(--glass); color: var(--muted); font-size: 10px; }
.maplibregl-ctrl-attrib a { color: var(--muted); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib-button { filter: invert(1); }
@media (pointer: coarse) { .maplibregl-ctrl-group { display: none; } }
/* Noaptea, harta de rezervă OpenStreetMap e întunecată din CSS (harta proprie are varianta ei de noapte) */
:root[data-theme="dark"] .uses-osm .maplibregl-canvas { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.5); }
.is-picking .maplibregl-canvas-container { cursor: crosshair; }

/* ---- Bara de sus ---- */
/* Meniu în stânga, RADAR SV în mijloc, GPS în dreapta */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 8px;
  padding: calc(var(--safe-t) + 12px) 12px 10px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar > #menuBtn { justify-self: start; }

.brand { display: inline-flex; border-radius: 9px; box-shadow: var(--shadow-sm); text-decoration: none; }
.plate {
  display: inline-flex; align-items: stretch; height: 40px;
  background: var(--plate); color: var(--plate-ink);
  border: 2px solid var(--plate-ink); border-radius: 9px; overflow: hidden;
}
.plate-eu {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 4px 5px 3px; background: var(--plate-eu); color: var(--on-color);
  font: 600 10px/1 var(--f-body); letter-spacing: .04em;
}
.plate-eu svg { width: 13px; height: 13px; color: var(--plate-star); }
.plate-txt {
  display: flex; align-items: center; padding: 0 10px;
  font: 700 23px/1 var(--f-display); letter-spacing: .06em;
}

.chip, .iconbtn { height: 42px; color: var(--fg); box-shadow: var(--shadow-sm); cursor: pointer; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 21px;
  font: 600 16px/1 var(--f-display); letter-spacing: .03em; white-space: nowrap;
}
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.chip .chev-down { width: 16px; height: 16px; margin: 0 -4px 0 -2px; color: var(--muted); }
.chip.is-on .dot { background: var(--ok); box-shadow: 0 0 0 4px rgba(24, 164, 92, .2); }
.chip.is-wait .dot { background: var(--accident-2); animation: blink 1s ease-in-out infinite; }
.chip.is-denied .dot { background: var(--radar); }
.iconbtn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; padding: 0; border: 0; }
.iconbtn svg { width: 22px; height: 22px; }
.iconbtn[aria-pressed="false"] { color: var(--muted); }


/* ---- Meniul din stânga ---- */
.drawer { position: fixed; inset: 0; z-index: 1200; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(8, 12, 18, .4); animation: fade .2s ease; }
.drawer-panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(340px, 86vw);
  display: grid; align-content: start; gap: 20px; overflow-y: auto;
  padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 20px);
  background: var(--surface); color: var(--fg);
  border-radius: 0 26px 26px 0; box-shadow: var(--shadow);
  animation: slide-in .24s cubic-bezier(.2, .9, .3, 1);
}
.d-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.d-head .banner-x { align-self: center; }
.d-sec { display: grid; gap: 8px; }
.d-sec h2 { margin: 0; font: 700 13px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.d-note { margin: 0; font-size: 13px; color: var(--muted); }
.d-legal { margin: 4px 0 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
.d-legal a { color: var(--muted); text-underline-offset: 3px; }
.snd-list { display: grid; gap: 6px; }
.snd {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); color: var(--fg);
  font: 600 17px/1 var(--f-display); letter-spacing: .02em; text-align: left; cursor: pointer;
}
.snd-play {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg);
}
.snd-play svg { width: 14px; height: 14px; }
.snd-check { margin-left: auto; color: var(--ok); visibility: hidden; }
.snd-check svg { width: 20px; height: 20px; }
.snd[aria-checked="true"] { border-color: var(--ok); background: rgba(24, 164, 92, .1); }
.snd[aria-checked="true"] .snd-check { visibility: visible; }
.d-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; cursor: pointer; }
.d-switch input {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 48px; height: 28px; margin: 0;
  border-radius: 14px; background: var(--gps-off); cursor: pointer; transition: background .2s ease;
}
.d-switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--on-color); transition: transform .2s ease;
}
.d-switch input:checked { background: var(--ok); }
.d-switch input:checked::after { transform: translateX(20px); }
.d-row { width: 100%; }
.seg { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; }
.seg-btn {
  min-height: 44px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  background: var(--surface-2); color: var(--fg); font: 700 16px/1 var(--f-display); letter-spacing: .02em;
}
.seg-btn[aria-checked="true"] { background: linear-gradient(150deg, var(--ok), var(--ok-2)); color: var(--on-color); border-color: transparent; }
.d-lead { margin: 0; font-size: 15px; line-height: 1.4; }
.d-lead b { font-weight: 700; }
/* Valoarea aleasă de tine (km/h peste limită) */
.d-custom {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 8px 6px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-2); font: 700 16px/1 var(--f-display); letter-spacing: .02em; cursor: text;
}
/* Valoarea ta e salvată: căsuța se face albastră, cu „✓ Salvat” */
.d-custom.is-set { border-color: transparent; background: linear-gradient(150deg, #2b7cf2, #1557c9); color: #fff; box-shadow: 0 8px 18px -8px rgba(21, 87, 201, .7); }
.d-custom.is-set .d-num input { border-color: transparent; color: #1557c9; }
.d-custom.is-set .d-num small { color: rgba(255, 255, 255, .85); }
.d-custom.just-saved { animation: saved-pulse .5s ease-out; }
@keyframes saved-pulse { 40% { transform: scale(1.03); } }
/* În secțiunea limitei, alegerea e tot albastră (ca valoarea ta) */
.d-speed .seg-btn[aria-checked="true"] { background: linear-gradient(150deg, #2b7cf2, #1557c9); }
.d-num { display: inline-flex; align-items: center; gap: 6px; font: 700 20px/1 var(--f-display); }
.d-num input {
  width: 76px; height: 42px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--fg); font: 700 21px/1 var(--f-display); text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.d-num input::-webkit-outer-spin-button, .d-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.d-num small { font: 600 14px/1 var(--f-body); color: var(--muted); }
.d-example { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(26, 115, 232, .09); font-size: 14px; line-height: 1.4; }
.d-warn {
  margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4;
  background: rgba(255, 180, 58, .16); color: var(--fg);
}
.d-help { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }
.d-help b { font-weight: 600; }

/* ---- Puncte: profilul din meniu și clasamentul lunii ---- */
.prof { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); }
.prof.is-loading { font-size: 14px; color: var(--muted); }
.prof-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prof-id { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.prof-id strong { font: 700 19px/1.1 var(--f-display); letter-spacing: .01em; }
.prof-pts { display: grid; justify-items: end; gap: 2px; }
.prof-pts b { font: 700 34px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.prof-pts small { font-size: 12px; line-height: 1; color: var(--muted); }
.prof-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.prof-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3d8eff, #1557c9); }
.prof-next, .prof-foot { margin: 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.prof-next b { color: var(--fg); font-weight: 600; }
.prof-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.prof-stats div { display: grid; gap: 4px; align-content: start; padding: 9px 6px 8px; border-radius: 12px; background: var(--surface); text-align: center; }
.prof-stats b { font: 700 21px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.prof-stats small { font-size: 11.5px; line-height: 1.2; color: var(--muted); }

/* Însemnul nivelului */
.lvl {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px;
  font: 700 12.5px/1 var(--f-display); letter-spacing: .03em; white-space: nowrap;
}
.lvl svg { width: 15px; height: 15px; flex: none; }
.lvl-incepator { background: rgba(104, 114, 128, .14); color: var(--muted); }
.lvl-activ { background: rgba(31, 111, 229, .12); color: var(--ico-politie); }
.lvl-expert { background: rgba(22, 163, 74, .13); color: var(--ok); }
.lvl-ambasador { background: linear-gradient(150deg, rgba(249, 196, 64, .32), rgba(240, 122, 0, .22)); color: #a85600; }
:root[data-theme="dark"] .lvl-ambasador { color: #ffc75a; }

/* Top 10 */
.top-list { list-style: none; margin: 0; padding: 0; width: 100%; max-height: 50vh; overflow-y: auto; display: grid; gap: 6px; }
.top-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.top-row.is-me { border-color: rgba(31, 111, 229, .45); background: rgba(31, 111, 229, .08); }
.top-rank {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-2); font: 700 16px/1 var(--f-display); font-variant-numeric: tabular-nums;
}
.top-rank.r1 { background: linear-gradient(150deg, #ffd766, #f0a500); color: #3d2a00; }
.top-rank.r2 { background: linear-gradient(150deg, #eef1f5, #b9c1cc); color: #1d2228; }
.top-rank.r3 { background: linear-gradient(150deg, #f4c7a1, #c9783f); color: #2b1300; }
.top-who { flex: 1; min-width: 0; display: grid; gap: 5px; justify-items: start; }
.top-who strong { font: 700 16px/1.1 var(--f-display); }
.top-who em { font-style: normal; color: var(--ico-politie); }
.top-pts { flex: none; font: 700 21px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.top-pts small { margin-left: 3px; font: 600 11px/1 var(--f-body); color: var(--muted); }
.top-me, .top-rule { width: 100%; margin: 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.top-me { color: var(--fg); font-weight: 600; }

/* ---- Fereastra unei semnalări: confirmare + comentarii ---- */
.banner-detail {
  max-height: calc(100% - var(--top-h) - var(--safe-t) - var(--panel-h) - 12px); overflow-y: auto;
  align-items: stretch;
}
.det-head { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
.det-head .rep-ico { width: 44px; height: 44px; }
.det-meta { font-size: 14px; color: var(--muted); }
.cmts { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.cmts-title { font: 700 13px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cmt-list { display: grid; gap: 6px; }
.cmt { padding: 8px 12px; border-radius: 14px; background: var(--surface-2); }
.cmt.is-mine { background: rgba(59, 120, 255, .12); }
.cmt-who { display: flex; align-items: baseline; gap: 8px; font: 700 14px/1.2 var(--f-display); }
.cmt-who time { font: 400 12px/1 var(--f-body); color: var(--muted); }
.cmt p { margin: 2px 0 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.cmt-empty { font-size: 14px; color: var(--muted); }
.cmt-form { display: flex; gap: 8px; }
.cmt-form input {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--fg); font: 400 16px/1 var(--f-body);
}
input, textarea { -webkit-user-select: text; user-select: text; }

/* ---- Mesajele importante (sunetul, paza, instalarea): o fereastră în mijlocul ecranului, harta întunecată în spate ---- */
.notice {
  position: fixed; inset: 0; z-index: 1150;
  display: grid; place-items: center; padding: calc(var(--safe-t) + 24px) 20px calc(var(--safe-b) + 24px);
  background: rgba(8, 12, 18, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fade .2s ease;
}
.notice-card {
  width: min(360px, 100%); display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: 28px 22px 20px; border-radius: 28px; background: var(--surface); color: var(--fg);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .5);
  animation: pop .24s cubic-bezier(.2, .9, .3, 1.2);
}
.notice-ico {
  width: 68px; height: 68px; margin-bottom: 4px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #5fe08a, #22b85a 48%, #12753a); color: #fff;
  box-shadow: 0 12px 24px -10px #12753a, 0 0 0 7px rgba(34, 197, 94, .14);
}
.notice-ico svg { width: 32px; height: 32px; }
.notice-ico.is-app { background: none; box-shadow: none; border-radius: 18px; overflow: hidden; }
.notice-ico.is-app img { width: 68px; height: 68px; }
.notice-card strong { font: 700 23px/1.15 var(--f-display); letter-spacing: .01em; text-wrap: balance; }
.notice-txt { font-size: 15.5px; line-height: 1.45; color: var(--muted); text-wrap: balance; }
.notice-txt svg { width: 17px; height: 17px; vertical-align: -3px; }
.notice-actions { width: 100%; display: grid; gap: 8px; margin-top: 10px; }
.notice-actions .btn { width: 100%; min-height: 54px; font-size: 19px; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }

/* ---- Alerta de sus ---- */
.banner {
  position: fixed; z-index: 1100;
  top: calc(var(--safe-t) + var(--top-h)); left: 12px; right: 12px;
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 14px 14px 16px; border-radius: var(--r-lg);
  background: var(--glass); color: var(--fg); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--line);
  animation: drop .28s cubic-bezier(.2, .9, .3, 1.2);
}
.banner-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.banner-body small { font: 700 13px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.banner-body strong { font: 700 24px/1.08 var(--f-display); text-wrap: balance; }
.banner-body span { font-size: 15px; opacity: .9; overflow-wrap: anywhere; }
.banner-ico {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .2);
}
.banner-ico svg { width: 30px; height: 30px; }

.banner-alert {
  --c1: var(--radar); --c2: var(--radar-2);
  flex-wrap: nowrap; border: 0; color: var(--on-color);
  background: linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: 0 16px 34px -12px var(--c2);
}
.banner-alert .banner-body strong { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.banner-politie { --c1: var(--politie); --c2: var(--politie-2); }
.banner-accident { --c1: var(--accident); --c2: var(--accident-2); color: var(--accident-ink); }
.banner-accident .banner-ico { background: rgba(0, 0, 0, .1); }
.banner-actions { display: flex; gap: 8px; width: 100%; }
.banner-actions .btn { flex: 1; min-height: 56px; font-size: 19px; }
/* Butonul de închidere: mare (44 px, cât un deget), cu fond, ca să se vadă și să se nimerească ușor.
   X-ul e desenat din două linii (mereu clar și centrat); textul „×” rămâne doar pentru cititoarele de ecran. */
.banner-x {
  position: relative; flex: none; align-self: flex-start; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--fg);
  font-size: 0; cursor: pointer;
}
.banner-x::before, .banner-x::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2.6px; border-radius: 2px;
  background: currentColor; transform: translate(-50%, -50%) rotate(45deg);
}
.banner-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.banner-x:active { transform: scale(.94); }
.banner-alert .banner-x { background: rgba(255, 255, 255, .24); border-color: transparent; color: inherit; }

/* ---- Butoane mici comune ---- */
.btn {
  min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 17px/1 var(--f-display); letter-spacing: .03em;
  transition: transform .1s ease;
}
.btn:active { transform: scale(.97); }
.btn-ok { background: linear-gradient(150deg, var(--ok), var(--ok-2)); color: var(--on-color); box-shadow: 0 8px 18px -8px var(--ok-2); }
.btn-ghost { background: var(--surface-2); color: var(--fg); border: 1px solid var(--line); }
.btn-type { --c1: var(--radar); --c2: var(--radar-2); flex: 1; background: linear-gradient(150deg, var(--c1), var(--c2)); color: var(--on-color); }
.btn-type.t-politie { --c1: var(--politie); --c2: var(--politie-2); }
.btn-type.t-accident { --c1: var(--accident); --c2: var(--accident-2); color: var(--accident-ink); }

/* ---- „Centrează”: doar când ai mutat harta ---- */
.fab {
  position: fixed; z-index: 900; right: 12px; bottom: calc(var(--panel-h) + 24px);
  height: 52px; display: none; align-items: center; gap: 8px; padding: 0 20px 0 15px;
  border: 0; border-radius: 26px; background: var(--fg); color: var(--bg); box-shadow: var(--shadow-sm);
  font: 700 18px/1 var(--f-display); letter-spacing: .02em; cursor: pointer;
}
.fab svg { width: 24px; height: 24px; flex: none; }
.fab.is-off { display: inline-flex; }

/* ---- Vitezometrul ---- */
.speedo {
  position: fixed; z-index: 900; left: 12px; bottom: calc(var(--panel-h) + 84px);
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 1px;
  color: var(--fg); box-shadow: var(--shadow-sm);
}
.speedo b { font: 700 25px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.speedo span { font: 600 11px/1 var(--f-body); color: var(--muted); }
/* peste limită: cifrele se fac roșii; peste limită + 20: tot cercul roșu, pulsând */
.speedo.is-over b { color: var(--radar); }
.speedo.is-warn { background: linear-gradient(150deg, var(--radar), var(--radar-2)); color: var(--on-color); animation: over-pulse 1s ease-in-out infinite; }
.speedo.is-warn b, .speedo.is-warn span { color: var(--on-color); }
@keyframes over-pulse { 50% { transform: scale(1.08); } }

/* ---- Indicatorul cu limita de viteză (sub vitezometru) ---- */
.limit-sign {
  position: fixed; z-index: 900; left: 19px; bottom: calc(var(--panel-h) + 26px);
  width: 50px; height: 50px; border-radius: 50%; box-sizing: border-box;
  display: grid; place-items: center;
  background: #fff; border: 5px solid #e3211b; color: #111; box-shadow: var(--shadow-sm);
}
.limit-sign b { font: 700 19px/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
@media (prefers-reduced-motion: reduce) { .speedo.is-warn { animation: none; } }

/* ---- Mesaj scurt ---- */
.toast {
  position: fixed; z-index: 1100; left: 50%; bottom: calc(var(--panel-h) + 16px);
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-radius: 20px;
  background: var(--fg); color: var(--bg); box-shadow: var(--shadow); font-weight: 500; line-height: 1.3;
  animation: rise .22s ease-out;
}
.toast button {
  border: 0; background: transparent; color: inherit; cursor: pointer; padding: 4px;
  font: 700 15px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline;
}

/* ---- Panoul de jos ---- */
.panel {
  position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  padding: 8px 14px calc(var(--safe-b) + 14px);
  background: var(--sheet); border-radius: 28px; box-shadow: var(--shadow-up); /* toate colțurile rotunde, ca sus */
}
/* mânerul foii (decorativ, ca la navigațiile mari) */
.panel::before { content: ""; justify-self: center; width: 40px; height: 5px; margin-bottom: 2px; border-radius: 3px; background: var(--grab); }
.panel > * { width: 100%; max-width: 620px; min-width: 0; margin-inline: auto; }
.status {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 2px; font-size: 15px; color: var(--muted);
}
.status-count {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 2px 0;
  border: 0; background: transparent; color: var(--fg); cursor: pointer; text-align: left;
  font: 600 16px/1.2 var(--f-body); letter-spacing: -.01em;
}
.status-ico {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
  background: linear-gradient(150deg, var(--radar), var(--radar-2)); color: var(--on-color);
  box-shadow: 0 4px 10px -4px var(--radar-2);
}
.status-ico svg { width: 18px; height: 18px; }
.chev { flex: none; width: 18px; height: 18px; color: var(--muted); }
#count { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-sep { flex: none; width: 1px; height: 26px; background: var(--line); }
.zone-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px 0 11px;
  border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted);
  font: 600 16px/1 var(--f-display); letter-spacing: .02em; white-space: nowrap; cursor: pointer;
}
.zone-btn svg { width: 18px; height: 18px; }
.zone-btn[aria-pressed="true"] { color: var(--ok); border-color: rgba(22, 163, 74, .35); background: rgba(22, 163, 74, .06); }
.zone-off { width: 100%; }
.net { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg); font: 600 16px/1 var(--f-body); }
.net::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.net.is-wait::before { background: var(--accident-2); }
.net.is-off::before { background: var(--radar); }

/* Înregistrare vocală */
.mic {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  min-height: 72px; padding: 8px 20px 8px 9px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--fg); text-align: left; cursor: pointer;
  transition: background .2s ease, transform .1s ease;
}
.mic:active { transform: scale(.985); }
.mic-ico {
  flex: none; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff6a5c, var(--radar) 45%, var(--radar-2)); color: var(--on-color);
  box-shadow: 0 8px 20px -6px rgba(232, 56, 47, .75), 0 0 0 5px rgba(232, 56, 47, .1);
}
.mic-ico svg { width: 26px; height: 26px; }
.mic-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mic-chev { width: 22px; height: 22px; margin-right: -4px; }
.mic-txt strong { font: 700 22px/1.1 var(--f-display); letter-spacing: .01em; }
.mic-txt span { font-size: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mic.is-live { background: rgba(240, 64, 42, .14); border-color: rgba(240, 64, 42, .45); }
.mic.is-live .mic-ico { animation: breathe 1s ease-in-out infinite; }
.mic.is-live .mic-txt span { color: var(--fg); }
.mic.is-busy { cursor: progress; }
.mic.is-busy .mic-ico { animation: breathe 1.6s ease-in-out infinite; }
.mic.is-live::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--radar); animation: fill var(--mic-ms, 5s) linear forwards;
}

/* Rândul de jos: cele 3 butoane de semnalare și GPS-ul, toate de aceeași mărime (GPS-ul în coloana a patra) */
.panel {
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); column-gap: 10px;
  padding-inline: max(14px, calc(50% - 310px)); /* pe ecrane late, rândul rămâne de cel mult 620 px, la mijloc */
}
.panel::before, .status, .mic { grid-column: 1 / -1; }
.actions { grid-column: 1; }
.gps-btn { grid-column: 2; }

/* GPS: verde = pornit („GPS activ”), negru = oprit („GPS oprit”) */
.gps-btn {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2px 0 0;
  border: 0; background: transparent; color: var(--fg); cursor: pointer;
  font: 600 17px/1.1 var(--f-body); letter-spacing: .005em; white-space: nowrap;
}
.gps-ico {
  width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: var(--gps-off);
  box-shadow: 0 10px 20px -10px rgba(16, 24, 40, .7), inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: transform .12s ease, background .2s ease;
}
.gps-ico svg { width: 34px; height: 34px; }
.gps-btn:active .gps-ico { transform: scale(.93); }
.gps-btn.is-on .gps-ico, .gps-btn.is-wait .gps-ico {
  background: linear-gradient(150deg, #34d16a, #15803d);
  box-shadow: 0 10px 20px -10px #15803d, inset 0 1px 0 rgba(255, 255, 255, .35);
}
.gps-btn.is-wait .gps-ico { animation: blink 1.2s ease-in-out infinite; }
.gps-btn.is-denied .gps-ico { color: var(--radar); }
.gps-btn.is-on .gps-word { color: var(--ok); }
.gps-btn.is-off .gps-word, .gps-btn.is-wait .gps-word { color: var(--muted); }
.gps-btn.is-denied .gps-word { color: var(--radar); }

/* Cele 3 butoane: cercuri mari, albe, cu iconița colorată; numele dedesubt */
.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 2px; }
.act {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 2px 0 0; border: 0; background: transparent; color: var(--fg); cursor: pointer;
  font: 600 17px/1.1 var(--f-body); letter-spacing: .005em;
}
.act-ico {
  width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%;
  background: var(--act-bg); color: var(--ico-radar);
  box-shadow: 0 10px 24px -10px rgba(16, 24, 40, .38), 0 1px 3px rgba(16, 24, 40, .08), inset 0 0 0 1px var(--line);
  transition: transform .12s ease, box-shadow .12s ease;
}
.act-ico svg { width: 38px; height: 38px; }
.act:active .act-ico { transform: scale(.93); box-shadow: 0 4px 10px -6px rgba(16, 24, 40, .4), inset 0 0 0 1px var(--line); }
.act-politie .act-ico { color: var(--ico-politie); }
.act-accident .act-ico { color: var(--ico-accident); }
.act.is-armed .act-ico { box-shadow: 0 0 0 3px var(--fg), 0 10px 24px -10px rgba(16, 24, 40, .38); }

/* ---- Pinii de pe hartă ---- */
.pin-wrap { width: 44px; height: 44px; cursor: pointer; z-index: 1; }
.pin {
  --c1: var(--radar); --c2: var(--radar-2);
  position: relative; width: 42px; height: 42px; margin: 1px;
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(155deg, var(--c1), var(--c2)); color: var(--on-color);
  border: 3px solid var(--pin-ring);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .45);
  opacity: calc(1 - var(--age, 0) * .45);
}
.pin svg { width: 20px; height: 20px; }
.pin b {
  position: absolute; top: -8px; right: -10px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--surface); color: var(--fg);
  font: 700 12px/20px var(--f-display); text-align: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.pin-politie { --c1: var(--politie); --c2: var(--politie-2); }
.pin-accident { --c1: var(--accident); --c2: var(--accident-2); color: var(--accident-ink); }
.pin.is-pending { border-style: dashed; }
.pin.is-fresh::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 3px solid var(--c1); animation: ping 1.8s ease-out 3;
}

/* ---- Evenimentele de trafic TomTom: pătrățele colorate (semnalările șoferilor sunt cercuri) ---- */
.inc-wrap { width: 36px; height: 36px; cursor: pointer; z-index: 1; }
.inc {
  --c: #f59e0b; --ink: #2b1700;
  width: 34px; height: 34px; margin: 1px; display: grid; place-items: center; border-radius: 10px;
  background: var(--c); color: var(--ink); border: 2.5px solid #fff; box-shadow: 0 5px 12px -4px rgba(0, 0, 0, .45);
}
.inc svg { width: 19px; height: 19px; }
.inc-big { flex: none; width: 44px; height: 44px; margin: 0; border-radius: 13px; }
.inc-big svg { width: 24px; height: 24px; }
.inc-accident { --c: #f07a00; --ink: #fff; }
.inc-inchis { --c: #e3211b; --ink: #fff; }
.inc-polei, .inc-inundatie { --c: #1d8fe0; --ink: #fff; }
.inc-ceata, .inc-ploaie, .inc-vant { --c: #6b7684; --ink: #fff; }
.inc-ambuteiaj { --c: #b91c1c; --ink: #fff; }
.inc-src { font-size: 12.5px; }
.inc.is-planned { opacity: .55; border-style: dashed; } /* anunțat pentru mai târziu */
/* alerta de sus pentru un eveniment TomTom, în culoarea lui */
.banner-inc { --c1: #ffb43a; --c2: #f07a00; color: var(--accident-ink); }
.banner-inc-inchis { --c1: #ff4b3a; --c2: #c3221a; color: #fff; }
.banner-inc-polei, .banner-inc-inundatie { --c1: #3aa7f0; --c2: #1565c0; color: #fff; }
.banner-inc-ceata { --c1: #8792a0; --c2: #4d5866; color: #fff; }
.banner-inc-ambuteiaj { --c1: #e0413a; --c2: #8f1515; color: #fff; }

/* Tu: mașina văzută de sus, întinsă pe drum (se rotește și se înclină odată cu harta) */
.me-car { width: 36px; height: 60px; z-index: 3; pointer-events: none; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .35)); }
.me-car svg { display: block; width: 100%; height: 100%; }
.me-acc {
  z-index: 0; pointer-events: none; border-radius: 50%;
  background: rgba(26, 115, 232, .14); border: 1.5px solid rgba(26, 115, 232, .35);
}

/* ---- Lista semnalărilor (din rândul de stare) ---- */
.rep-list { list-style: none; margin: 0; padding: 0; width: 100%; max-height: 46vh; overflow-y: auto; display: grid; gap: 6px; }
.rep {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--fg);
  text-align: left; cursor: pointer;
}
.rep-ico {
  --c1: var(--radar); --c2: var(--radar-2);
  flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(150deg, var(--c1), var(--c2)); color: var(--on-color);
}
.rep-ico svg { width: 20px; height: 20px; }
.rep-politie { --c1: var(--politie); --c2: var(--politie-2); }
.rep-accident { --c1: var(--accident); --c2: var(--accident-2); color: var(--accident-ink); }
.rep-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rep-txt strong { font: 700 16px/1.15 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-txt span { font-size: 13px; color: var(--muted); }
.rep-dist { flex: none; font: 700 16px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.rep-empty { width: 100%; font-size: 14px; color: var(--muted); }


.noscript { position: fixed; inset: auto 16px 50% 16px; z-index: 2000; padding: 16px; background: var(--surface); border-radius: 12px; }

/* Telefoane înguste (360–380 px) */
/* Rândul de stare pe telefoane obișnuite: fără linia de despărțire */
@media (max-width: 430px) {
  .status { gap: 8px; }
  .status-sep { display: none; }
}
@media (max-width: 380px) {
  /* „Live” rămâne doar ca punct verde (textul apare când e o problemă: fără semnal, se trimite) */
  .net:not(.is-off):not(.is-wait) { font-size: 0; gap: 0; }
  .topbar { gap: 6px; }
  .plate-txt { padding: 0 8px; font-size: 19px; letter-spacing: .04em; }
  .chip { padding: 0 12px; font-size: 15px; gap: 6px; }
  .act-ico, .gps-ico { width: 62px; height: 62px; }
  .act-ico svg, .gps-ico svg { width: 30px; height: 30px; }
  .act, .gps-btn { font-size: 15px; }
  .gps-word { display: none; }
  .mic-txt strong { font-size: 20px; }
  .zone-btn { padding: 0 10px 0 9px; font-size: 15px; }
}
/* Ecrane scunde (telefon culcat, ecrane mici) */
@media (max-height: 640px) {
  .panel { gap: 8px; }
  .act { gap: 4px; font-size: 15px; }
  .act-ico, .gps-ico { width: 58px; height: 58px; }
  .act-ico svg, .gps-ico svg { width: 28px; height: 28px; }
  .gps-btn { gap: 4px; font-size: 15px; }
  .mic { min-height: 56px; }
  .mic-ico { width: 42px; height: 42px; }
}

/* ===== Aspectul obișnuit („Varianta nouă”): 5 butoane rotunde, negre, pe un rând — Radar, Echipaj, Accident,
   Spune (microfonul), GPS. Butonul pe care îl apeși se aprinde în culoarea lui (e „activ”).
   Fără bara mare a microfonului, panoul e mai jos și harta mai mare. ===== */
.v2 {
  --btn: 62px;
  --btn-black: radial-gradient(circle at 34% 26%, #4b525c 0%, #22262c 44%, #0c0e11 100%);
  --btn-black-shadow: 0 10px 18px -8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -3px 6px rgba(0, 0, 0, .45);
}
/* noaptea, un contur fin ca butoanele negre să se vadă pe panoul închis */
:root[data-theme="dark"] .v2 { --btn-black-shadow: 0 10px 18px -8px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .22); }
.v2 .act-ico, .v2 .mic-ico, .v2 .gps-ico {
  background: var(--btn-black); color: #fff; box-shadow: var(--btn-black-shadow);
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.v2 .panel { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; row-gap: 12px; }
.v2 .gps-btn { grid-column: 3; grid-row: 3; gap: 7px; font-size: 15px; }
.v2 .gps-ico { width: var(--btn); height: var(--btn); }
.v2 .gps-ico svg { width: 30px; height: 30px; }
.v2 .panel::before { grid-column: 1 / -1; grid-row: 1; }
.v2 .status { grid-column: 1 / -1; grid-row: 2; }
.v2 .actions { grid-column: 1; grid-row: 3; gap: 8px; padding-top: 0; }
.v2 .act { gap: 7px; font-size: 15px; }
.v2 .act-ico { width: var(--btn); height: var(--btn); }
.v2 .act-ico svg { width: 32px; height: 32px; }
.v2 .act:active .act-ico { transform: scale(.93); }
/* Apăsat (și încă o clipă după), sau „atinge harta unde e”: butonul se aprinde în culoarea lui */
.v2 .act.is-lit .act-ico, .v2 .act:active .act-ico, .v2 .act.is-armed .act-ico {
  background: radial-gradient(circle at 35% 28%, #ff7466, var(--radar) 48%, var(--radar-2));
  box-shadow: 0 10px 22px -8px var(--radar-2), 0 0 0 5px rgba(232, 56, 47, .2), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.v2 .act-politie.is-lit .act-ico, .v2 .act-politie:active .act-ico, .v2 .act-politie.is-armed .act-ico {
  background: radial-gradient(circle at 35% 28%, #7aa8ff, var(--politie) 48%, var(--politie-2));
  box-shadow: 0 10px 22px -8px var(--politie-2), 0 0 0 5px rgba(36, 112, 230, .2), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.v2 .act-accident.is-lit .act-ico, .v2 .act-accident:active .act-ico, .v2 .act-accident.is-armed .act-ico {
  color: #2b1700; background: radial-gradient(circle at 35% 28%, #ffd37a, #ffa51f 48%, #e07b00);
  box-shadow: 0 10px 22px -8px #e07b00, 0 0 0 5px rgba(240, 138, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* Microfonul, rotund, în același rând */
.v2 .mic {
  grid-column: 2; grid-row: 3; flex-direction: column; justify-content: flex-start; gap: 7px;
  min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; text-align: center;
}
.v2 .mic:active { transform: none; }
.v2 .mic:active .mic-ico { transform: scale(.93); }
.v2 .mic-ico { width: var(--btn); height: var(--btn); }
.v2 .mic-ico svg { width: 30px; height: 30px; }
.v2 .mic-txt { flex: none; display: block; min-width: 0; }
.v2 .mic-txt strong { font: 600 15px/1.1 var(--f-body); letter-spacing: .005em; white-space: nowrap; }
.v2 .mic-txt span, .v2 .mic-chev, .v2 .mic.is-live::after { display: none; }
.v2 .mic.is-live, .v2 .mic.is-busy { background: transparent; }
.v2 .mic.is-live .mic-ico, .v2 .mic.is-busy .mic-ico, .v2 .mic:active .mic-ico {
  background: radial-gradient(circle at 35% 28%, #ff7466, var(--radar) 48%, var(--radar-2));
  box-shadow: 0 10px 22px -8px var(--radar-2), 0 0 0 5px rgba(232, 56, 47, .2), inset 0 1px 0 rgba(255, 255, 255, .35);
}
/* GPS: negru când e oprit, verde cât e pornit */
.v2 .gps-btn.is-on .gps-ico, .v2 .gps-btn.is-wait .gps-ico {
  background: radial-gradient(circle at 35% 28%, #5fe08a, #22b85a 48%, #12753a);
  box-shadow: 0 10px 22px -8px #12753a, 0 0 0 5px rgba(34, 197, 94, .2), inset 0 1px 0 rgba(255, 255, 255, .35);
}
/* Ce aude telefonul, într-un balon deasupra panoului (cât vorbești) */
.v2 .mic.is-live .mic-txt span, .v2 .mic.is-busy .mic-txt span {
  display: block; position: fixed; z-index: 1001; right: 12px; bottom: calc(var(--panel-h) + 12px);
  max-width: min(320px, calc(100% - 24px)); padding: 10px 14px; border-radius: 16px;
  background: var(--fg); color: var(--bg); box-shadow: var(--shadow);
  font: 500 14px/1.35 var(--f-body); text-align: left; white-space: normal;
}
@media (max-width: 380px) { .v2 { --btn: 50px; } .v2 .act, .v2 .mic-txt strong, .v2 .gps-btn { font-size: 13px; } .v2 .act-ico svg, .v2 .mic-ico svg, .v2 .gps-ico svg { width: 26px; height: 26px; } }
@media (max-height: 640px) { .v2 { --btn: 54px; } }

/* Telefon culcat (în suportul de mașină): panoul în stânga, harta, mașina și ferestrele în dreapta.
   (Ținut drept, rămâne cum era: panoul jos.) */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --side-w: min(340px, 44vw); }
  .panel {
    top: 0; right: auto; width: var(--side-w);
    padding: calc(var(--safe-t) + 12px) 14px calc(var(--safe-b) + 12px) calc(env(safe-area-inset-left, 0px) + 14px);
    align-content: end; gap: 10px; overflow-y: auto;
    border-radius: 28px; box-shadow: 8px 0 28px -10px rgba(16, 24, 40, .28);
  }
  .panel::before, .status-sep { display: none; }
  /* rândul de stare pe două rânduri: numărul semnalărilor încape întreg */
  .status { flex-wrap: wrap; row-gap: 10px; }
  .status-count { flex: 1 1 100%; }
  .topbar { left: var(--side-w); }
  .speedo { left: calc(var(--side-w) + 12px); }
  .limit-sign { left: calc(var(--side-w) + 19px); }
  .banner { left: calc(var(--side-w) + 12px); }
  .toast { left: calc(50% + var(--side-w) / 2); max-width: calc(100% - var(--side-w) - 32px); }
  .mic { min-height: 58px; }
  .mic-ico { width: 44px; height: 44px; }
  .mic-txt strong { font-size: 19px; }
  .act, .gps-btn { gap: 4px; font-size: 15px; }
  .act-ico, .gps-ico { width: 60px; height: 60px; }
  .act-ico svg, .gps-ico svg { width: 30px; height: 30px; }
  .v2 { --btn: 50px; }
  .v2 .gps-word { display: none; }
}

@keyframes ping { from { transform: scale(1); opacity: .8; } to { transform: scale(2.1); opacity: 0; } }
@keyframes blink { 50% { opacity: .3; } }
@keyframes breathe { 50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(240, 64, 42, .18); } }
@keyframes fill { to { width: 100%; } }
@keyframes drop { from { transform: translateY(-12px); opacity: 0; } }
@keyframes rise { from { transform: translate(-50%, 10px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .pin.is-fresh::after, .chip.is-wait .dot, .mic.is-live .mic-ico, .d-custom.just-saved { animation: none; }
  .banner, .toast, .notice, .notice-card { animation: none; }
  .act-ico, .btn, .mic { transition: none; }
}