:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #0d1117;
  --panel: #111824;
  --border: #263241;
  --muted: #8290a3;
  --text: #d9e1ea;
  --good: #9be8b8;
  --bad: #efaaaa;
  --accent: #75c9e8;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
header {
  min-height: 78px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--panel);
}
h1 { margin: 0; font-size: 22px; letter-spacing: .05em; }
h2 { margin: 0; font-size: 16px; }
.sub, .muted { color: var(--muted); font-size: 12px; margin-top: 4px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
select, button {
  background: #192334; color: var(--text); border: 1px solid #314057; border-radius: 7px;
  padding: 7px 9px;
}
button { cursor: pointer; margin-right: 5px; }
button.active { background: #253851; border-color: #5d7da8; }
.badge { border: 1px solid #39485b; border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 700; }
.badge.online { border-color: #2e8b57; color: var(--good); }
.badge.offline { border-color: #8d4545; color: var(--bad); }
main { padding: 18px 24px 28px; max-width: 1600px; margin: 0 auto; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.card, .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.label { font-size: 11px; text-transform: uppercase; color: #8190a4; letter-spacing: .07em; }
.value { margin-top: 7px; font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.telemetry-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .75fr); gap: 14px; margin-bottom: 14px; }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
#map { height: 410px; border-radius: 9px; overflow: hidden; background: #0a0f15; }
.mini-pill { border: 1px solid var(--border); border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 700; }
.mini-pill.good { border-color: #2e8b57; color: var(--good); }
.mini-pill.bad { border-color: #8d4545; color: var(--bad); }
.mini-pill.neutral { color: #aab6c5; }
.position-strip { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 8px; margin-top: 10px; }
.position-strip div, .status-item { background: #0d141e; border: 1px solid #1e2a39; border-radius: 8px; padding: 10px; }
.position-strip span, .status-item span, .detail-row span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.position-strip strong, .status-item strong { display: block; margin-top: 5px; font-size: 13px; overflow-wrap: anywhere; }
.status-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.detail-row { display: grid; grid-template-columns: 145px 1fr; gap: 10px; padding: 8px 2px; border-bottom: 1px solid rgba(255,255,255,.04); }
.detail-row code { font-size: 11px; color: #b9c6d8; overflow-wrap: anywhere; }
.events-panel { margin-bottom: 14px; }
.events-list { display: grid; gap: 7px; max-height: 210px; overflow: auto; }
.event { display: grid; grid-template-columns: 155px 130px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #1f2a39; border-radius: 8px; background: #0d141e; font-size: 12px; }
.event .code { font-family: ui-monospace, monospace; color: var(--accent); }
.event .buffered { color: #d7ba7d; }
.empty { color: var(--muted); font-size: 12px; padding: 8px; }
.terminal-panel { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #090d12; }
.terminal-toolbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px; background: var(--panel); border-bottom: 1px solid var(--border); }
.controls { display: flex; align-items: center; gap: 6px; }
.controls label { font-size: 12px; color: #a8b3c3; }
.terminal { height: 360px; min-height: 260px; overflow: auto; padding: 10px 12px; font: 12px/1.52 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.line { border-bottom: 1px solid rgba(255,255,255,.025); padding: 1px 0; }
.line .time { color: #778398; }
.line .imei { color: #8fb8e8; }
.line.rx { color: #d4dae2; }
.line.tx { color: var(--good); }
.line.error { color: #ff9e9e; }
.line.system { color: #d7ba7d; }
@media (max-width: 1050px) { .telemetry-layout { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .summary-grid { grid-template-columns: repeat(2,1fr); } .position-strip { grid-template-columns: repeat(2,1fr); } .event { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { header, main { padding-left: 12px; padding-right: 12px; } header { align-items: flex-start; flex-direction: column; } .header-actions { width: 100%; } #device-select { flex: 1; min-width: 0; } .summary-grid, .status-grid, .position-strip { grid-template-columns: 1fr; } #map { height: 330px; } .terminal { height: 55vh; } }

/* Block 3 - Command Manager */
.commands-panel { margin-bottom: 14px; }
.command-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.command-buttons button { min-width: 150px; margin: 0; font-weight: 700; }
.command-buttons button:disabled { cursor: not-allowed; opacity: .42; }
.primary-command { border-color: #476f94; }
.output-command { border-color: #776943; }
.command-note { color: #aab5c4; font-size: 12px; line-height: 1.45; margin: 8px 0 12px; }
.command-feedback { background: #0d141e; border: 1px solid #1f2a39; border-radius: 8px; padding: 9px 10px; font-size: 12px; margin-bottom: 10px; overflow-wrap: anywhere; }
.commands-table-wrap { overflow-x: auto; border: 1px solid #1f2a39; border-radius: 9px; }
.commands-table { width: 100%; border-collapse: collapse; min-width: 980px; font-size: 11px; }
.commands-table th, .commands-table td { padding: 8px 9px; border-bottom: 1px solid #1f2a39; text-align: left; vertical-align: top; }
.commands-table th { color: #8f9cae; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; background: #0d141e; }
.commands-table code { color: #bcd0e6; font-size: 10px; }
.command-status { display: inline-block; border: 1px solid #3b4655; border-radius: 999px; padding: 3px 7px; font-weight: 700; text-transform: uppercase; font-size: 9px; }
.command-status.completed { color: var(--good); border-color: #2e8b57; }
.command-status.acknowledged, .command-status.sent { color: #9bcbe8; border-color: #416a84; }
.command-status.queued { color: #d7ba7d; border-color: #796b47; }
.command-status.failed, .command-status.timeout { color: var(--bad); border-color: #8d4545; }
.command-details summary { cursor: pointer; color: var(--accent); }
.command-details pre { max-width: 560px; white-space: pre-wrap; overflow-wrap: anywhere; color: #aebbd0; font-size: 10px; margin: 7px 0 0; }

/* Block 4 - FTP / Multimedia */
.ftp-command { border-color:#4d7280; }
.media-panel { margin-bottom:14px; }
.ftp-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:10px 0; }
.ftp-summary div { background:#0d141e; border:1px solid #1e2a39; border-radius:8px; padding:10px; }
.ftp-summary span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.ftp-summary strong { display:block; margin-top:5px; font-size:12px; overflow-wrap:anywhere; }
.media-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin-top:10px; }
.media-card { overflow:hidden; border:1px solid #1f2a39; border-radius:9px; background:#0d141e; }
.media-card img,.media-placeholder { width:100%; height:145px; object-fit:cover; display:block; background:#080d13; }
.media-placeholder { display:grid; place-items:center; color:#6f8198; font:700 20px ui-monospace,monospace; }
.media-info { display:grid; gap:3px; padding:9px; font-size:10px; color:#93a2b6; }
.media-info strong { font-size:11px; color:#d4dce7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.media-status { color:var(--accent); text-transform:uppercase; }
@media (max-width:800px) { .ftp-summary { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .ftp-summary { grid-template-columns:1fr; } }

/* Block 5 - ADAS / DMS */
.dms-panel { margin-bottom:14px; }
.dms-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:10px 0; }
.dms-status-grid div { background:#0d141e; border:1px solid #1e2a39; border-radius:8px; padding:10px; }
.dms-status-grid span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.dms-status-grid strong { display:block; margin-top:5px; font-size:12px; overflow-wrap:anywhere; }
.dms-command { border-color:#576d91; }
.dms-picture-command { border-color:#8a7047; }
.dms-warning { border:1px solid #66573c; background:#18150f; border-radius:8px; padding:10px 12px; color:#d8c69e; font-size:12px; line-height:1.5; }
.dss-catalog { margin-top:10px; border-top:1px solid #1e2a39; padding-top:9px; }
.dss-catalog summary { cursor:pointer; color:var(--accent); font-size:12px; }
.dss-catalog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:7px; margin-top:9px; }
.dss-catalog-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto 30px; gap:8px; align-items:center; background:#0d141e; border:1px solid #1f2a39; border-radius:7px; padding:7px 9px; font-size:10px; }
.dss-catalog-row code { color:var(--accent); }
.dss-catalog-row strong { font-size:11px; overflow-wrap:anywhere; }
.dss-catalog-row span,.dss-catalog-row small { color:var(--muted); }
.event-type { display:inline-block; margin-left:6px; border:1px solid #344357; border-radius:999px; padding:1px 5px; color:#9db2ca; font-size:8px; vertical-align:1px; }
@media (max-width:800px) { .dms-status-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .dms-status-grid { grid-template-columns:1fr; } }


/* Block 5 v5.0.1 - DSS capability matrix */
.dss-matrix-wrap { overflow-x:auto; margin:10px 0; }
.dss-matrix { width:100%; border-collapse:collapse; font-size:11px; }
.dss-matrix th,
.dss-matrix td { border-bottom:1px solid #1e2a39; padding:8px 10px; text-align:left; white-space:nowrap; }
.dss-matrix th { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.dss-matrix tbody tr:hover { background:#0d141e; }
.dss-matrix td:first-child { color:var(--accent); font-weight:700; }


/* Block 6 - manual RTO-PIC */
.manual-picture-box {
  margin:12px 0;
  padding:12px;
  border:1px solid #1e2a39;
  border-radius:9px;
  background:#0d141e;
}
.manual-picture-title {
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  color:var(--accent);
}
.picture-command { border-color:#477a8a; }


/* Block 7 - historical RTO-VDO */
.historical-video-box {
  margin:12px 0;
  padding:12px;
  border:1px solid #1e2a39;
  border-radius:9px;
  background:#0d141e;
}
.video-request-grid {
  display:grid;
  grid-template-columns:minmax(110px,.7fr) minmax(220px,1.5fr) minmax(100px,.6fr) minmax(100px,.6fr) auto;
  gap:8px;
  align-items:end;
}
.video-request-grid label { display:grid; gap:5px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
.video-request-grid input,.video-request-grid select { min-height:36px; padding:7px 9px; border:1px solid #344357; border-radius:7px; background:#090e15; color:#dce5ef; }
.video-command { min-height:36px; border-color:#5b7294; font-weight:700; }
.media-card .media-video { width:100%; height:145px; display:block; object-fit:contain; background:#05080c; }
@media (max-width:1000px) { .video-request-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .video-command { grid-column:1/-1; } }
@media (max-width:560px) { .video-request-grid { grid-template-columns:1fr; } .video-command { grid-column:auto; } }


/* Block 7 v7.1.0 - RTO-VDO Query Type 0 */
.video-file-request {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #1e2a39;
}
.video-file-request-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.video-file-request-row label {
  display: grid;
  gap: 5px;
}
.video-file-request-row input {
  min-width: 0;
}
@media (max-width: 760px) {
  .video-file-request-row {
    grid-template-columns: 1fr;
  }
}


/* Block 7 v7.2.0 - RTO-VDO Query Type 2 */
.video-duration-request {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #1e2a39;
}
.video-duration-grid {
  display: grid;
  grid-template-columns: 120px minmax(230px, 1fr) 150px auto;
  gap: 10px;
  align-items: end;
}
.video-duration-grid label {
  display: grid;
  gap: 5px;
}
.video-duration-grid input[readonly] {
  opacity: .75;
  cursor: not-allowed;
}
@media (max-width: 900px) {
  .video-duration-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .video-duration-grid {
    grid-template-columns: 1fr;
  }
}


/* Block 8 - Live RTMP */
.live-control-grid {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr 1fr;
  gap: 12px;
  align-items: end;
  margin: 14px 0;
}
.live-control-grid label { display: grid; gap: 6px; color: var(--muted); }
.live-control-grid select { min-height: 40px; }
.live-command, .live-stop-command { min-height: 42px; }
.live-stop-command { border-color: #7d3740; }
.live-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.live-summary > div {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 4px;
}
.live-summary span { color: var(--muted); font-size: 12px; }
.live-path-row { grid-column: 1 / -1; }
.live-path-row code { overflow-wrap: anywhere; }
.live-player-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin: 10px 0 12px;
}
.live-player-wrap.hidden { display: none; }
.live-player { width: 100%; height: 100%; border: 0; }
#live-player { width: 100%; height: 100%; border: 0; background: #000; }
@media (max-width: 760px) {
  .live-control-grid { grid-template-columns: 1fr; }
  .live-summary { grid-template-columns: repeat(2, 1fr); }
}


/* v8.1.0 - Web authentication */
.user-chip { display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:999px; padding:4px 5px 4px 10px; background:#0d141e; }
.user-chip span { font-size:11px; color:#b8c7d9; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip button { margin:0; padding:5px 9px; font-size:10px; border-radius:999px; }
.login-body { min-height:100vh; background:radial-gradient(circle at 50% 15%, #17263a 0, #0d1117 42%, #080b10 100%); }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(420px,100%); background:rgba(17,24,36,.96); border:1px solid #29394d; border-radius:18px; padding:30px; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.login-mark { width:54px; height:54px; display:grid; place-items:center; border:1px solid #497797; border-radius:15px; color:#8edcf6; font-weight:800; letter-spacing:.08em; margin-bottom:18px; background:#101c2a; }
.login-eyebrow { color:#75c9e8; text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:700; }
.login-card h1 { margin-top:6px; font-size:25px; }
.login-copy { color:var(--muted); font-size:13px; line-height:1.5; margin:8px 0 22px; }
.login-card form { display:grid; gap:14px; }
.login-card label { display:grid; gap:6px; color:#a9b6c6; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.login-card input { width:100%; min-height:44px; border:1px solid #34465d; border-radius:9px; background:#0a1018; color:var(--text); padding:10px 12px; outline:none; }
.login-card input:focus { border-color:#75c9e8; box-shadow:0 0 0 3px rgba(117,201,232,.12); }
.login-card button[type="submit"] { min-height:44px; margin:4px 0 0; font-weight:750; background:#17384b; border-color:#397797; }
.login-card button:disabled { opacity:.6; cursor:wait; }
.login-error { min-height:20px; color:#ffaaaa; font-size:12px; margin-top:12px; }
.login-foot { border-top:1px solid #233044; margin-top:14px; padding-top:14px; color:#6f7e91; font-size:10px; }
@media (max-width:560px) { .user-chip { width:100%; justify-content:space-between; } .login-card { padding:24px; } }