:root {
  --bg: #121418; --panel: #1c1f26; --panel2: #252932; --line: #323844;
  --text: #e9ebef; --muted: #98a1ae; --accent: #4f8cff;
  --red: #e5484d; --red-bg: rgba(229,72,77,.14); --amber: #f0a020; --amber-bg: rgba(240,160,32,.14);
  --green: #30a46c; --green-bg: rgba(48,164,108,.15);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.4 "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px;
  padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 16px; }
.tabs { display: flex; gap: 4px; }
.tab { background: none; border: 0; padding: 6px 12px; border-radius: 6px; cursor: pointer; color: var(--muted); }
.tab.active { background: var(--panel2); color: var(--text); }
.count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--line);
  font-size: 12px; text-align: center; }
.count.hot { background: var(--red); color: #fff; }
.count.info.new { background: var(--accent); color: #fff; }
.nvr-strip { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--green-bg); color: #7fdcae;
  white-space: nowrap; }
.chip.off { background: var(--red-bg); color: #ff9a9d; }
.right { display: flex; gap: 8px; align-items: center; }
.user { color: var(--muted); }

.btn { border: 1px solid var(--line); background: var(--panel2); padding: 8px 14px; border-radius: 6px;
  cursor: pointer; text-decoration: none; display: inline-block; color: var(--text); }
.btn:hover { border-color: #4a5262; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.ghost { background: transparent; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.take { background: var(--amber); border-color: var(--amber); color: #1a1200; font-weight: 700; }
.btn.real { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.btn.false { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.btn:disabled { opacity: .5; cursor: default; }

.banner { background: var(--amber-bg); color: #ffd28a; padding: 8px 16px; display: flex; gap: 12px;
  align-items: center; }
.banner.warn { background: var(--red-bg); color: #ffb3b5; }
main { padding: 16px; }
.empty { color: var(--muted); padding: 40px; text-align: center; font-size: 16px; }

/* ---------- alarm card ---------- */
#alarms { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 820px), 1fr)); }
.card { background: var(--panel); border-radius: 10px; border-left: 6px solid var(--red);
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 14px; padding: 12px; }
.card.noua { animation: pulse 1.2s ease-in-out infinite; }
.card.preluata { border-left-color: var(--amber); }
.card.closing { opacity: .4; transition: opacity .4s; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } 50% { box-shadow: 0 0 0 3px rgba(229,72,77,.55); } }

.media-main { position: relative; background: #000; border-radius: 6px; overflow: hidden; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center; }
.media-main img, .media-main video { width: 100%; height: 100%; object-fit: contain; display: block; }
.media-main .ph { color: var(--muted); font-size: 13px; }
.media-tabs { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.mtab { font-size: 12px; padding: 3px 8px; border-radius: 4px; background: var(--panel2); border: 1px solid var(--line);
  cursor: pointer; color: var(--muted); }
.mtab.on { color: var(--text); border-color: var(--accent); }
.mtab.wait { cursor: default; font-style: italic; }
.badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.65); padding: 2px 8px; border-radius: 4px;
  font-size: 12px; }

.side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.obj { font-size: 26px; font-weight: 700; line-height: 1.15; word-break: break-word; }
.cam { font-size: 16px; }
.tip { color: #ffb3b5; font-weight: 600; }
.when { display: flex; gap: 12px; align-items: baseline; color: var(--muted); }
.timer { font-variant-numeric: tabular-nums; font-size: 18px; color: var(--text); font-weight: 600; }
.info { font-size: 13px; color: var(--muted); background: var(--panel2); border-radius: 6px; padding: 6px 8px; }
.info b { color: var(--text); font-weight: 600; }
.info a.tel { color: inherit; text-decoration: none; }
@media (pointer: coarse) { .info a.tel b { text-decoration: underline; color: #9cc2ff; } }
.proc { white-space: pre-wrap; margin-top: 4px; color: var(--text); }
.meta { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.ok { color: #7fdcae; } .bad { color: #ff9a9d; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.actions .btn { flex: 1; min-width: 90px; padding: 10px; font-size: 15px; }
.form { background: var(--panel2); border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.form h4 { margin: 0; font-size: 14px; }
.reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.reason { padding: 4px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel);
  cursor: pointer; font-size: 13px; }
.reason.on { background: var(--green); border-color: var(--green); color: #fff; }
textarea { width: 100%; min-height: 54px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px; resize: vertical; }
.chk { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.form .row { display: flex; gap: 8px; }
.form .row .btn { flex: 1; }
.err { color: #ff9a9d; font-size: 13px; min-height: 1em; }

/* ---------- history ---------- */
.filters { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 12px; }
.filters label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.filters input, .filters select { background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 8px; color-scheme: dark; }
.stats { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.stat { background: var(--panel); border-radius: 8px; padding: 8px 14px; }
.stat .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 12px; color: var(--muted); }
table.hist { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 8px; overflow: hidden; }
.hist th, .hist td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.hist th { font-size: 12px; color: var(--muted); font-weight: 600; }
.hist tbody tr { cursor: pointer; }
.hist tbody tr:hover { background: var(--panel2); }
.hist img { width: 96px; height: 54px; object-fit: cover; border-radius: 4px; display: block; background: #000; }
.pill { padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.pill.reala { background: var(--red-bg); color: #ff9a9d; }
.pill.falsa { background: var(--green-bg); color: #7fdcae; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 50; display: flex; align-items: center;
  justify-content: center; padding: 16px; }
.modal-box { background: var(--panel); border-radius: 10px; width: min(1200px, 100%); max-height: 100%; overflow: auto;
  padding: 14px; }
.modal-box .card { border-left-width: 6px; padding: 0; background: none; }
.journal { margin-top: 12px; font-size: 13px; }
.journal td { padding: 2px 10px 2px 0; color: var(--muted); }
.close-x { float: right; }

/* ---------- program ---------- */
.chip.dis { background: rgba(152,161,174,.15); color: #b5bcc6; }
.pill.dezarmat { background: rgba(152,161,174,.15); color: #b5bcc6; }
.prog { background: var(--panel2); border-radius: 8px; padding: 10px; }
.prog .hint { color: var(--muted); font-size: 12px; margin-left: 8px; }
.prow { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.prow .field input[type=time] { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px;
  color: var(--text); color-scheme: dark; }
.pdays { display: flex; gap: 4px; }
.pday { width: 34px; height: 30px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); cursor: pointer;
  color: var(--muted); font-size: 13px; }
.pday.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pquick { display: flex; gap: 4px; }

/* ---------- camere asociate ---------- */
.arow { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.arow select { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; color-scheme: dark; }
.achips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: 1; }
.pday.wide { width: auto; padding: 0 8px; }
.camtabs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.camtab { font-size: 12px; padding: 3px 9px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2);
  cursor: pointer; color: var(--muted); }
.camtab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.camtab.main.on { background: var(--red); border-color: var(--red); }

/* ---------- dispozitive ---------- */
.dev { background: var(--panel2); border-radius: 8px; padding: 10px; margin-bottom: 8px; border-left: 3px solid var(--accent); }
.devhead { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.devline { font-size: 13px; padding: 1px 0; white-space: nowrap; }

/* ---------- jurnal ---------- */
.sysinfo { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; background: var(--panel);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.sysinfo b { color: var(--text); font-weight: 600; }
.sysinfo .btn { margin-left: auto; }
.logbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.logbar input#log-q { flex: 1; min-width: 200px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px; }
.logbar select { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px; color-scheme: dark; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.segb { background: var(--panel); border: 0; padding: 6px 12px; cursor: pointer; color: var(--muted); }
.segb.on { background: var(--accent); color: #fff; }
.logbox { background: #0b0d10; border: 1px solid var(--line); border-radius: 8px; height: calc(100vh - 260px);
  min-height: 300px; overflow: auto; font: 12.5px/1.45 Consolas, "Cascadia Mono", ui-monospace, monospace;
  padding: 8px 10px; white-space: pre-wrap; word-break: break-word; }
.logbox .l { padding: 1px 0; }
.logbox .l.alarm { color: #ff8a8d; }
.logbox .l.err { color: #f5b452; }
.logbox .l.ok { color: #7fdcae; }
.logbox .l.sep { color: #6b7380; }
.logbox table { width: 100%; border-collapse: collapse; font-family: inherit; }
.logbox td { padding: 2px 8px 2px 0; vertical-align: top; border-bottom: 1px solid #1a1e25; }
.logbox td:first-child { white-space: nowrap; color: var(--muted); }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10,12,16,.92); display: flex;
  align-items: center; justify-content: center; padding: 16px; }
.overlay.gate { cursor: pointer; background: rgba(120,20,24,.88); }
.gate-box { text-align: center; }
.gate-title { font-size: 30px; font-weight: 700; }
.gate-sub { margin-top: 10px; font-size: 16px; color: #ffd0d2; }

/* ---------- login ---------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login { background: var(--panel); padding: 24px; border-radius: 10px; width: min(340px, 100%);
  display: flex; flex-direction: column; gap: 12px; }
.login h1 { margin: 0 0 4px; font-size: 20px; }
.login label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.login input { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 8px; }

/* ---------- admin ---------- */
.subtabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.subtab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer;
  color: var(--muted); }
.subtab.active { color: var(--text); border-bottom-color: var(--accent); }
.toolbar { margin-bottom: 10px; }
table.adm tbody tr { cursor: default; }
table.adm td .btn { margin-right: 4px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 14px; }
.fgrid .wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.field input[type=text], .field input[type=number], .field input[type=password], .field select, .field textarea {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; color: var(--text);
  font-size: 14px; color-scheme: dark; }
.field.bool { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 14px; padding-top: 16px; }
.field .multi { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text); font-size: 14px; }
.field .multi label { display: flex; gap: 5px; align-items: center; }
.fsec { background: var(--panel); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.fsec h3 { margin: 0 0 4px; font-size: 16px; }
.fsec .hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.fsec .foot { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.fsec .foot input { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
.msg { font-size: 13px; }
.msg.ok { color: #7fdcae; } .msg.bad { color: #ff9a9d; }
.steps { font-size: 13px; margin-top: 8px; }
.steps div { padding: 2px 0; }
.modal-box h2 { margin: 0 0 12px; font-size: 18px; }
.modal-box h4 { margin: 14px 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- telefon / tabletă ---------- */
.nvr-sum { display: none; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.top { padding-top: max(8px, env(safe-area-inset-top)); }
@media (pointer: coarse) {
  .btn.small { padding: 8px 12px; }
  .mtab, .camtab { padding: 7px 12px; font-size: 13px; }
  .reason { padding: 8px 14px; font-size: 14px; }
  .pday { width: 40px; height: 38px; }
  .hist tbody tr:hover { background: none; }
}
@media (max-width: 900px) {
  .card { grid-template-columns: minmax(0, 1fr); }
  .obj { font-size: 22px; }
  .hist th:nth-child(7), .hist td:nth-child(7) { display: none; }
  .logbox { height: calc(100vh - 320px); }
}
@media (max-width: 1100px) {
  /* lista de obiective conectate se strânge într-un buton (se deschide la apăsare) */
  .nvr-sum { display: inline-block; font-size: 12px; padding: 5px 10px; border-radius: 12px; border: 0;
    background: var(--green-bg); color: #7fdcae; cursor: pointer; margin-left: auto; }
  .nvr-sum.off { background: var(--red-bg); color: #ff9a9d; font-weight: 600; }
  .nvr-strip { display: none; order: 4; width: 100%; flex: none; max-height: 40vh; overflow: auto; padding: 4px 0; }
  .nvr-strip.open { display: flex; }
}
@media (max-width: 700px) {
  html, body { font-size: 15px; }
  main { padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  /* bara de sus: rândul 1 = nume + butoane, rândul 2 = tab-uri; lista de NVR-uri se deschide la apăsare */
  .top { gap: 6px 8px; padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); }
  .brand { font-size: 15px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .right { gap: 6px; order: 2; }
  #user { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;
    vertical-align: bottom; }
  .tabs { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { flex: 1; padding: 9px 8px; white-space: nowrap; }
  .nvr-sum { order: 1; margin-left: 0; }
  .banner { padding: 8px 10px; flex-wrap: wrap; font-size: 14px; }
  /* cardul de alarmă */
  #alarms { gap: 10px; }
  .card { padding: 8px; gap: 8px; border-left-width: 5px; grid-template-columns: minmax(0, 1fr); }
  .card > *, .media-wrap, .side { min-width: 0; }
  .obj { font-size: 21px; }
  .cam { font-size: 15px; }
  .when { flex-wrap: wrap; gap: 4px 12px; }
  .actions { position: sticky; bottom: 0; background: var(--panel); padding: 6px 0 2px; z-index: 2; }
  .actions .btn { padding: 14px 8px; font-size: 16px; min-width: 0; }
  .actions .btn.take { flex-basis: 100%; font-size: 18px; padding: 16px; }
  .form .row { flex-direction: column; }
  .form .row .btn { padding: 12px; font-size: 15px; }
  .media-tabs, .camtabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .mtab, .camtab { white-space: nowrap; flex: none; }
  /* istoric și tabelele de administrare devin carduri */
  .filters { gap: 8px; }
  .filters label { flex: 1 1 140px; }
  .filters input, .filters select { padding: 8px; font-size: 16px; }
  .stat { flex: 1 1 40%; padding: 6px 10px; }
  .stat .v { font-size: 18px; }
  table.hist, .hist tbody, .hist tr, .hist td { display: block; width: 100%; }
  table.hist { background: none; }
  .hist thead { display: none; }
  .hist tbody tr { background: var(--panel); border-radius: 8px; margin-bottom: 8px; padding: 8px 10px; position: relative; }
  .hist td { border: 0; padding: 2px 0; }
  .hist td[data-l]:not([data-l=""])::before { content: attr(data-l) ": "; color: var(--muted); font-size: 12px; }
  .hist th:nth-child(7), .hist td:nth-child(7) { display: block; }
  .hist td:empty { display: none; }
  .hist img { width: 100%; height: auto; aspect-ratio: 16/9; margin-bottom: 4px; }
  table.adm td .btn { margin: 4px 4px 0 0; }
  .devline { white-space: normal; }
  /* ferestrele (modal) ocupă tot ecranul */
  .modal { padding: 0; align-items: stretch; }
  .modal-box { width: 100%; max-height: none; height: 100%; border-radius: 0; padding: 10px;
    padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .close-x { position: sticky; top: 0; z-index: 3; }
  .fgrid { grid-template-columns: 1fr; }
  .field input[type=text], .field input[type=number], .field input[type=password], .field select, .field textarea,
  .login input, textarea, .prow input[type=time], .arow select, .logbar input#log-q, .logbar select { font-size: 16px; }
  .prow, .arow { gap: 8px; }
  .subtabs { overflow-x: auto; }
  .subtab { white-space: nowrap; }
  .sysinfo .btn { margin-left: 0; }
  .logbox { height: 60vh; font-size: 11.5px; }
  .gate-title { font-size: 24px; }
}

/* ---------- contul meu / 2FA ---------- */
.acc { display: flex; gap: 12px 20px; justify-content: space-between; align-items: center; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--line); }
.acc > div:first-child { flex: 1 1 260px; }
.acc .hint { color: var(--muted); font-size: 12px; margin-top: 2px; }
.qr { display: flex; justify-content: center; margin: 10px 0; }
.qr svg { width: 220px; height: 220px; background: #fff; border-radius: 8px; padding: 6px; }
.steps-list { margin: 0 0 6px; padding-left: 20px; color: var(--muted); font-size: 13px; }
.steps-list li { margin: 3px 0; }
code.sel { user-select: all; color: var(--text); background: var(--panel2); padding: 2px 6px; border-radius: 4px; }
#login-cod-wrap input { letter-spacing: .3em; font-size: 20px; text-align: center; }

/* ---------- LPR (treceri vehicule) ---------- */
.lpr-list { display: flex; flex-direction: column; gap: 8px; }
.lpr { display: grid; grid-template-columns: 200px 160px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  background: var(--panel); border-radius: 8px; padding: 8px 12px; border-left: 4px solid var(--accent); cursor: pointer; }
.lpr.fresh { animation: lprflash 2.5s ease-out; }
@keyframes lprflash { from { background: rgba(79,140,255,.28); } to { background: var(--panel); } }
.lpr .scena { width: 200px; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; background: #000; display: block; }
.lpr .crop { width: 160px; height: 44px; object-fit: contain; background: #000; border-radius: 4px; display: block; }
.placuta { display: inline-flex; align-items: center; gap: 6px; background: #f4f4f0; color: #111; border: 2px solid #222;
  border-radius: 5px; padding: 1px 10px 1px 0; font: 700 20px/1.3 "Segoe UI", Arial, sans-serif; letter-spacing: .06em;
  white-space: nowrap; }
.placuta::before { content: attr(data-t); background: #1f4fb5; color: #ffd43b; font-size: 10px; letter-spacing: 0; padding: 7px 4px;
  border-radius: 3px 0 0 3px; align-self: stretch; display: flex; align-items: flex-end; }
.placuta.necitit { color: #888; font-size: 15px; }
.lpr .det { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lpr .det b { color: var(--text); font-weight: 600; }
.lpr .ora { font-variant-numeric: tabular-nums; color: var(--text); font-size: 15px; text-align: right; white-space: nowrap; }
.lpr-big { width: 100%; border-radius: 6px; background: #000; display: block; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; }
.toast { background: var(--panel2); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px;
  padding: 8px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.4); display: flex; gap: 10px; align-items: center;
  pointer-events: auto; cursor: pointer; animation: toastin .25s ease-out; max-width: 420px; }
.toast .t2 { font-size: 12px; color: var(--muted); }
.toast.out { opacity: 0; transition: opacity .4s; }
@keyframes toastin { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 900px) {
  .lpr { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "scena det" "scena ora"; }
  .lpr .scena { width: 120px; grid-area: scena; }
  .lpr .cropw { display: none; }
  .lpr .det { grid-area: det; }
  .lpr .ora { grid-area: ora; text-align: left; font-size: 13px; color: var(--muted); }
  .lpr { align-items: start; }
  .lpr-modal { grid-template-columns: minmax(0, 1fr) !important; }
  .toasts { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
}

/* ---------- LPR: mesaj fix în Active + liste ---------- */
#lpr-pinned { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
#lpr-pinned:empty { display: none; }
.pin { display: flex; gap: 12px; align-items: center; background: var(--panel); border-radius: 8px; padding: 6px 10px;
  border-left: 5px solid var(--accent); cursor: pointer; animation: lprflash 2.5s ease-out; }
.pin.whitelist { border-left-color: var(--green); }
.pin.necunoscut { border-left-color: var(--amber); background: linear-gradient(90deg, var(--amber-bg), var(--panel) 60%); }
.pin.blacklist { border-left-color: var(--red); background: linear-gradient(90deg, var(--red-bg), var(--panel) 60%); }
.pin-img { width: 120px; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; background: #000; flex: none; }
.pin-crop { width: 130px; height: 38px; object-fit: contain; background: #000; border-radius: 4px; flex: none; }
.pin-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.pin-txt b { color: var(--text); }
.pin-txt .placuta { font-size: 17px; }
.pin-ok { flex: none; padding: 10px 14px; font-weight: 600; }
.lbadge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 4px;
  vertical-align: middle; }
.lbadge.whitelist { background: var(--green-bg); color: #7fdcae; }
.lbadge.necunoscut { background: var(--amber-bg); color: #ffd28a; }
.lbadge.blacklist { background: var(--red); color: #fff; }
.ldesc { font-size: 12px; color: var(--muted); vertical-align: middle; }
@media (max-width: 700px) {
  .pin { flex-wrap: wrap; gap: 8px; }
  .pin-img { width: 96px; }
  .pin-crop { display: none; }
  .pin-txt { flex: 1 1 160px; }
  .pin-ok { flex: 1 1 100%; padding: 12px; font-size: 15px; }
}

/* ================= Temă Securytas Grup (bleumarin + galben) ================= */
:root {
  --bg: #0b0842; --panel: #16125c; --panel2: #201b72; --line: #342e8c;
  --text: #eef0ff; --muted: #a7aad8; --accent: #4652d8; --brand: #faed12;
}
html, body { background: var(--bg); }
body { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px); }
.top { background: #120d52; border-bottom: 2px solid var(--brand); }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; letter-spacing: .02em; }
.brand .logo { height: 38px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.tab.active { background: var(--panel2); color: #fff; box-shadow: inset 0 -2px 0 var(--brand); }
.subtab.active { border-bottom-color: var(--brand); }
.btn { background: var(--panel2); border-color: var(--line); }
.btn:hover { border-color: #5a54c0; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #3a45c4; }
.card { box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.overlay { background: rgba(8,5,48,.95); }
.login { border-top: 3px solid var(--brand); text-align: left; }
.login-logo { width: 110px; height: auto; display: block; margin: 0 auto 6px; }
.login h1 { text-align: center; }
.logbox { background: #070530; }
.segb.on, .pday.on, .camtab.on { background: var(--accent); border-color: var(--accent); }
.count.info.new { background: var(--accent); }
.mtab.on { border-color: var(--brand); }
.modal { background: rgba(5,3,35,.75); }
@media (max-width: 700px) { .brand .logo { height: 30px; } .brand span { overflow: hidden; text-overflow: ellipsis; } }

/* pagini alarme + acțiuni administrator */
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 6px 0 10px;
  font-size: 13px; color: var(--muted); }
.pager b { color: var(--text); }
.actbar { display: flex; justify-content: flex-end; margin-bottom: 6px; }

.pager .pp { display: inline-flex; gap: 6px; align-items: center; margin-left: 6px; }
.pager .pp select { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px;
  color: var(--text); color-scheme: dark; }

/* ---------- alarmă selectată: panou lateral cu plan + hartă ---------- */
#view-active.with-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 30vw); gap: 16px; align-items: start; }
#view-active.with-panel #alarms { grid-template-columns: minmax(0, 1fr); }
/* bara de sus (LPR / camere live / personal) rămâne pe toată lățimea; panoul cu harta începe sub ea */
#view-active.with-panel > #lpr-pinned { grid-column: 1 / -1; margin-bottom: 0; }
#alarms .card { cursor: pointer; }
#alarms .card .side, #alarms .card .media-tabs { cursor: auto; }
.card.sel { outline: 2px solid var(--brand); outline-offset: 2px; }
#sidepanel { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; background: var(--panel);
  border-radius: 10px; border-top: 3px solid var(--brand); padding: 12px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.sp-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.sp-obj { font-size: 17px; font-weight: 700; }
.sp-cam { font-weight: 600; } .sp-cam span { color: var(--muted); font-weight: 400; }
.sp-row { font-size: 13px; color: var(--muted); margin-top: 3px; } .sp-row b { color: var(--text); }
.sp-sec h4 { margin: 0 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sp-legend { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lg { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #8f95ff; margin-left: 6px; }
.lg.alarm { background: var(--red); margin-left: 0; } .lg.assoc { background: var(--amber); }
.map-empty { color: var(--muted); font-size: 13px; padding: 14px; text-align: center; background: var(--panel2); border-radius: 8px; }
.map-empty.small { padding: 6px; font-size: 12px; margin-top: 6px; background: none; }
.plan-wrap { position: relative; line-height: 0; border-radius: 8px; overflow: hidden; background: #fff; }
.plan-wrap img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.plan-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.pcam .cone { fill: rgba(79,99,255,.22); stroke: rgba(79,99,255,.7); stroke-width: 1.5; }
.pcam .dot { fill: #4652d8; stroke: #fff; stroke-width: 3; cursor: pointer; }
.pcam text { fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 4px; font-weight: 700; text-anchor: middle;
  font-family: "Segoe UI", system-ui, Arial, sans-serif; pointer-events: none; }
.pcam.assoc .cone { fill: rgba(240,160,32,.25); stroke: rgba(240,160,32,.9); } .pcam.assoc .dot { fill: var(--amber); }
.pcam.sel .cone { fill: rgba(79,179,255,.3); stroke: #1d8fe0; } .pcam.sel .dot { fill: #1d8fe0; stroke: #faed12; }
.pcam.alarm .cone { fill: rgba(229,72,77,.32); stroke: var(--red); stroke-width: 2.5; } .pcam.alarm .dot { fill: var(--red); }
.pcam.alarm text { fill: #b00010; }
.pcam .pulse { fill: none; stroke: var(--red); stroke-width: 4; transform-box: fill-box; transform-origin: center;
  animation: pcampulse 1.2s ease-out infinite; }
@keyframes pcampulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.geo-map { height: 320px; border-radius: 8px; z-index: 0; }
.leaflet-container { background: #dfe3ea; font: 12px "Segoe UI", system-ui, Arial, sans-serif; }
.leaflet-tooltip { font-weight: 600; }
@media (max-width: 1100px) {
  #view-active.with-panel { display: block; }
  #sidepanel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); max-height: none; z-index: 40;
    border-radius: 0; border-top: 0; border-left: 3px solid var(--brand); padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom)); box-shadow: -6px 0 24px rgba(0,0,0,.5); }
  .geo-map { height: 280px; }
}
/* editor hartă (administrare) */
.map-ed { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; }
.map-ed .cams { display: flex; flex-direction: column; gap: 4px; max-height: 62vh; overflow: auto; }
.map-ed .camrow { display: flex; justify-content: space-between; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 6px;
  background: var(--panel2); border: 1px solid transparent; cursor: pointer; font-size: 13px; text-align: left; }
.map-ed .camrow.on { border-color: var(--brand); }
.map-ed .camrow .st { font-size: 11px; color: var(--muted); white-space: nowrap; }
.map-ed .camrow .st.ok { color: #7fdcae; }
.map-ed .tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; font-size: 13px; }
.map-ed .tools input[type=range] { width: 140px; }
.map-ed .hint { color: var(--muted); font-size: 12px; margin: 4px 0 8px; }
.map-ed .geo-map { height: 420px; }
@media (max-width: 800px) { .map-ed { grid-template-columns: minmax(0, 1fr); } .map-ed .cams { max-height: 180px; } }
.brand .ver { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 6px; align-self: flex-end; }
@media (max-width: 700px) { .brand .ver { display: none; } }

/* LPR: pozele camerelor asociate */
.pin-assoc, .lpr-assoc { display: flex; gap: 6px; flex: none; }
.pin-assoc img { width: 68px; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; background: #000; }
.lpr-assoc { margin-top: 4px; flex-wrap: wrap; }
.lpr-assoc img { width: 84px; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; background: #000; }
.lpr-assoc-big { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.lpr-assoc-big figure { margin: 0; } .lpr-assoc-big figcaption { font-size: 12px; color: var(--muted); margin-top: 3px; }
@media (max-width: 700px) { .pin-assoc { display: none; } }
.geo-warn { position: absolute; inset: auto 10px 30px 10px; z-index: 1000; background: rgba(229,72,77,.92); color: #fff;
  padding: 8px 10px; border-radius: 6px; font-size: 12px; }
.map-ed .tools input[type=text], .map-ed .tools input[type=number], .map-ed .tools select {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; color: var(--text); color-scheme: dark; }

/* istoric: planul și harta în fereastra alarmei */
.hist-map { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; gap: 6px 14px; margin: 12px 0; }
.hist-map h4 { margin: 0; } .hist-map .geo-map { height: 100%; min-height: 300px; }
.hist-map.one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 800px) { .hist-map { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; } }

/* zona CAMERE LPR din tab-ul Active */
#lpr-pinned { background: linear-gradient(180deg, #0c3360, #0a2a52); border: 1px solid #1d5a96; border-radius: 10px;
  padding: 8px 10px 10px; gap: 6px; }
.pinned-head { display: flex; align-items: baseline; gap: 10px; padding: 0 2px 2px; }
.pinned-head span { color: var(--brand); font-weight: 700; font-size: 13px; letter-spacing: .08em; }
.pinned-head small { color: #9fc0e6; font-size: 12px; }
#lpr-pinned .pin { background: rgba(7,22,48,.75); }
#lpr-pinned .pin.necunoscut { background: linear-gradient(90deg, var(--amber-bg), rgba(7,22,48,.75) 60%); }
#lpr-pinned .pin.blacklist { background: linear-gradient(90deg, var(--red-bg), rgba(7,22,48,.75) 60%); }

/* fereastra unei treceri LPR: camerele asociate în dreapta */
.lpr-modal { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 14px; align-items: start; }
.lpr-modal.with-assoc { grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr) minmax(180px, .8fr); }
.lpr-side { display: flex; flex-direction: column; gap: 8px; max-height: 75vh; overflow: auto; }
.lpr-side figure { margin: 0; } .lpr-side figcaption { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lpr-side img.pick { cursor: pointer; border: 2px solid transparent; }
.lpr-side img.pick.on { border-color: var(--brand); }
.lpr-cap { font-size: 12px; color: var(--muted); margin-top: 4px; }
@media (max-width: 1000px) { .lpr-modal.with-assoc { grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); }
  .lpr-modal.with-assoc .lpr-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; max-height: none; }
  .lpr-side figure { width: 200px; } }
@media (max-width: 700px) { .lpr-modal, .lpr-modal.with-assoc { grid-template-columns: minmax(0, 1fr); } }

/* alarme tehnice */
.media-main.tech { background: repeating-linear-gradient(135deg, #2a1d06, #2a1d06 14px, #241804 14px, #241804 28px); }
.tech-box { text-align: center; padding: 16px; }
.tech-ico { font-size: 44px; color: var(--amber); line-height: 1; }
.tech-t { font-size: 20px; font-weight: 700; color: #ffd38a; margin-top: 6px; }
.tech-d { font-size: 15px; margin-top: 6px; }
.tech-h { font-size: 12px; color: var(--muted); margin-top: 10px; }
.pill.tehnic { background: var(--amber-bg); color: #ffc46b; }
/* fereastra Stare NVR */
.nvrs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 10px; }
.nvrs-box { background: var(--panel2); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.nvrs-box .l { color: var(--muted); font-size: 12px; } .nvrs-box .v { font-weight: 600; margin-top: 2px; }
.nvrs-box.bad { background: var(--red-bg); } .nvrs-box.warn { background: var(--amber-bg); }
.nvrs-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 12px; }
table.nvrs { width: 100%; border-collapse: collapse; font-size: 13px; }
table.nvrs th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
table.nvrs td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dot-on, .dot-off { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.dot-on { background: var(--green); } .dot-off { background: var(--red); }
.tgl { min-width: 64px; } .tgl.on { background: var(--green); border-color: var(--green); color: #fff; }
.tgl.na { opacity: .45; cursor: default; }

/* istoric actualizări */
.vlist { display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.vrow { background: var(--panel); border-radius: 8px; padding: 8px 12px; border-left: 3px solid var(--line); }
.vrow.cur { border-left-color: var(--brand); }
.vh { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.vh span { color: var(--muted); font-size: 12px; } .vh .vi { margin-left: auto; }
.vrow ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; } .vrow li { margin: 1px 0; }

/* sus: CAMERE LPR (stânga) + CAMERE INTRARE PERSONAL (dreapta) */
#lpr-pinned { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; background: none; border: 0; padding: 0; }
#lpr-pinned.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#lpr-pinned .pcol { display: flex; flex-direction: column; gap: 6px; background: linear-gradient(180deg, #0c3360, #0a2a52);
  border: 1px solid #1d5a96; border-radius: 10px; padding: 8px 10px 10px; min-width: 0; }
#lpr-pinned .pcol.pers { background: linear-gradient(180deg, #0b3a35, #08302b); border-color: #1f7a6c; }
#lpr-pinned .pcol.pers .pinned-head small { color: #8fd6c8; }
#lpr-pinned .pin.pers { border-left-color: #2bb39a; background: rgba(4,30,27,.7); }
.pin.pers .pt1 { color: var(--text); font-weight: 600; font-size: 14px; }
#lpr-pinned.two .pin-assoc { display: none; }
@media (max-width: 1100px) { #lpr-pinned.two { grid-template-columns: minmax(0, 1fr); } }

/* tab Stare NVR-uri */
.stare-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.scard { background: var(--panel); border-radius: 10px; padding: 10px 12px; border-top: 3px solid var(--green); }
.scard.sbad { border-top-color: var(--red); }
.scard .sh { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 15px; }
.scard .sh .sub { color: var(--muted); font-size: 12px; margin-left: 6px; }
.srow { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.srow span { color: var(--muted); } .srow b { text-align: right; font-weight: 600; }
.srow.ok b { color: #7fdcae; } .srow.warn b { color: #ffc46b; } .srow.bad b { color: #ff9a9d; }
.sdet { font-size: 12px; color: var(--muted); padding: 2px 0 4px; } .sdet.bad { color: #ff9a9d; }
.perow { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.perhead { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.perhead select, .perhead input[type=text] { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; color: var(--text); color-scheme: dark; }

/* ieșiri (sirenă / lumini / relee) */
.outs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.outs-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.btn.out { background: #2a1f00; border-color: #6b5200; color: #ffd84a; }
.btn.out.sure { background: var(--amber); color: #111; }
.btn.out.on { background: var(--red); border-color: var(--red); color: #fff; animation: pulse 1.2s ease-in-out infinite; }
.media-main.tech.io { background: repeating-linear-gradient(135deg, #10203d, #10203d 14px, #0d1a33 14px, #0d1a33 28px); }
.sp-outs:empty { display: none; }

.orow { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); }
.orow input[type=text], .orow input[type=number], .orow select, .screw input[type=text], .screw input[type=number], .screw select {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; color: var(--text); color-scheme: dark; }
.screw { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.sc-top { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.sc-line { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.sc-line .hint { margin: 0 6px 0 0; }

.dcell { display: flex; gap: 4px; flex-wrap: wrap; }
.tgl.ctr { min-width: 0; font-size: 11px; } .tgl.ctr:not(.on):not(.na) { background: var(--red-bg); border-color: #7a2b33; color: #ff9a9d; }

.pill.personal { background: rgba(43,179,154,.15); color: #8fd6c8; }

/* incendiu / temperatură (camere termice) */
.card.fire { border-left-color: #ff6a00; background: linear-gradient(135deg, rgba(255,90,0,.22), var(--panel) 45%); }
.card.fire.noua { animation: firepulse .7s ease-in-out infinite; }
@keyframes firepulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,106,0,0); } 50% { box-shadow: 0 0 0 4px rgba(255,106,0,.75); } }
.fire-badge { display: inline-block; background: #ff4d00; color: #fff; font-weight: 800; letter-spacing: .04em; padding: 4px 10px;
  border-radius: 6px; margin-bottom: 4px; text-transform: uppercase; font-size: 15px; }

/* ================= Temă deschisă (Setări → Sunet alarme / interfață → Temă) =================
   Bara de sus (logo, tab-uri) rămâne bleumarin; restul aplicației devine deschis. */
body.light {
  --bg: #eef0f7; --panel: #ffffff; --panel2: #e8eaf4; --line: #d2d6e6;
  --text: #1a1e36; --muted: #5b6280; --accent: #3a46c8;
  --red-bg: rgba(229,72,77,.12); --amber-bg: rgba(240,160,32,.16); --green-bg: rgba(48,164,108,.14);
  background-image: none; color-scheme: light;
}
body.light .top, body.light .top * { --panel: #16125c; --panel2: #201b72; --line: #342e8c; --text: #eef0ff; --muted: #a7aad8; }
body.light .top { color: var(--text); }
body.light .btn { color: var(--text); }
body.light .btn.primary, body.light .btn.real, body.light .btn.take, body.light .btn.false { color: #fff; }
body.light .btn.take { color: #111; }
body.light .btn:hover { border-color: #8f95d8; }
body.light .card, body.light #sidepanel, body.light .modal-box, body.light .scard, body.light .vrow { box-shadow: 0 1px 6px rgba(20,25,60,.12); }
body.light input, body.light select, body.light textarea { color-scheme: light; }
body.light .filters input, body.light .filters select, body.light .field input, body.light .field select, body.light .field textarea,
body.light .pager .pp select, body.light .logbar select, body.light .arow select, body.light .orow input, body.light .orow select,
body.light .screw input, body.light .screw select, body.light .perhead select, body.light .perhead input, body.light .map-ed .tools input,
body.light .map-ed .tools select { background: #fff; color: var(--text); color-scheme: light; }
body.light .modal { background: rgba(20,25,60,.45); }
body.light .logbox { background: #f7f8fc; }
body.light .info { background: var(--panel2); }
/* texte colorate, mai închise pe fond deschis */
body.light .ok, body.light .msg.ok, body.light .logbox .l.ok, body.light .map-ed .camrow .st.ok, body.light .srow.ok b { color: #1d7a4f; }
body.light .bad, body.light .msg.bad, body.light .sdet.bad, body.light .srow.bad b { color: #c0262d; }
body.light .srow.warn b { color: #a86200; }
body.light .pill.reala { color: #b3202a; } body.light .pill.falsa { color: #1d7a4f; }
body.light .pill.dezarmat { color: #4a5068; } body.light .pill.tehnic { color: #9a5b00; } body.light .pill.personal { color: #127a68; }
body.light .chip { color: #1d6b48; } body.light .chip.off { color: #b3202a; } body.light .chip.dis { color: #8a5a00; }
body.light .banner.warn { color: #9b1c22; }
body.light .tip { color: #c0262d; }
body.light .info a.tel b { color: #2b47b8; }
body.light .tech-t { color: #9a5b00; } body.light .tech-d { color: #f2f2f2; }
body.light .card.fire { background: linear-gradient(135deg, rgba(255,90,0,.16), #fff 45%); }
body.light .btn.out { background: #fff6d6; border-color: #e0b400; color: #7a5a00; }
body.light .btn.out.on { color: #fff; }
/* zona de sus CAMERE LPR / INTRARE PERSONAL */
body.light #lpr-pinned .pcol { background: #e4edfb; border-color: #9fbbe6; }
body.light #lpr-pinned .pcol.pers { background: #ddf3ee; border-color: #8fcfbf; }
body.light .pinned-head span { color: #1b2a7a; } body.light #lpr-pinned .pcol.pers .pinned-head span { color: #0e5c4f; }
body.light .pinned-head small, body.light #lpr-pinned .pcol.pers .pinned-head small { color: #4b5878; }
body.light #lpr-pinned .pin, body.light #lpr-pinned .pin.pers { background: #fff; }
body.light #lpr-pinned .pin.necunoscut { background: linear-gradient(90deg, var(--amber-bg), #fff 60%); }
body.light #lpr-pinned .pin.blacklist { background: linear-gradient(90deg, var(--red-bg), #fff 60%); }
body.light .tgl.ctr:not(.on):not(.na) { color: #b3202a; border-color: #e5a0a4; }
body.light .sp-row b, body.light .pager b { color: var(--text); }
body.light .map-empty { background: var(--panel2); }
body.light .toast { background: #fff; color: var(--text); }
html.light, html.light body { background-color: #eef0f7; }
body.light .top .chip { color: #7fdcae; } body.light .top .chip.off { color: #ff9a9d; } body.light .top .chip.dis { color: #ffc46b; }

.placuta.nec::before { background: #777; color: #fff; }

.mtab.retry { color: var(--accent); font-weight: 600; cursor: pointer; }
.mtab.retry:disabled { opacity: .7; cursor: default; }
.lpr2 { color: var(--accent); font-weight: 600; }

/* sus în Active: LPR 25% · camere live 50% · personal 25% */
#lpr-pinned #pin-lpr:empty, #lpr-pinned #pin-pers:empty { display: none; }
#lpr-pinned > div > .pcol { height: 100%; box-sizing: border-box; }
#lpr-pinned.trio { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
#lpr-pinned .pin-empty { color: var(--muted); font-size: 13px; padding: 14px 4px; text-align: center; opacity: .8; }
#lpr-pinned.trio .pin { gap: 8px; padding: 5px 7px; }
#lpr-pinned.trio .pin-img { width: 86px; }
#lpr-pinned.trio .pin-crop, #lpr-pinned.trio .pin-assoc, #lpr-pinned.trio .t2 { display: none; }
#lpr-pinned.trio .pin-txt { font-size: 12px; }
#lpr-pinned.trio .pin-txt .placuta { font-size: 14px; }
#lpr-pinned.trio .pin-txt > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lpr-pinned.trio .pin-ok { padding: 6px 8px; font-size: 11.5px; width: 78px; white-space: normal; line-height: 1.15; }
#lpr-pinned.trio .pinned-head small { display: none; }
#pin-live { min-width: 0; background: #050b16; border: 1px solid #1d3a66; border-radius: 10px; padding: 6px; }
.live-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px; height: 100%; }
.live-tile { position: relative; background: #000; border-radius: 6px; overflow: hidden; cursor: pointer; min-height: 0;
  aspect-ratio: 16 / 9; width: 100%; height: 100%; }
.live-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.live-tile.off img { opacity: .25; }
.live-tile.off::after { content: 'fără imagine'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #8aa; font-size: 12px; }
.live-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; font-size: 11px; color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-cap small { opacity: .7; margin-left: 5px; }
body.light #pin-live { background: #dfe6f3; border-color: #9fbbe6; }
@media (max-width: 1100px) {
  #lpr-pinned.trio { grid-template-columns: minmax(0, 1fr); }
  #pin-live { order: -1; }
}
.camsel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.camsel select { min-width: 0; }
@media (max-width: 800px) { .camsel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.camslot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.camslot span { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--line, #ccd); display: grid; place-items: center;
  font-size: 11px; font-weight: 700; }
.camslot select { flex: 1; min-width: 0; }
.live-tile.empty { background: transparent; border: 1px dashed rgba(127,150,190,.35); cursor: default; }