* { box-sizing: border-box; }
body { font-family: system-ui, Arial, sans-serif; max-width: 720px; margin: 0 auto;
       padding: 16px; background: #0f1115; color: #e6e6e6; }
h1, h2 { color: #4fd1c5; }
input, button, select { font-size: 16px; padding: 10px; margin: 6px 0; width: 100%;
       border-radius: 8px; border: 1px solid #333; background: #1a1d24; color: #e6e6e6; }
button { background: #4fd1c5; color: #06281f; font-weight: 600; cursor: pointer; border: 0; }
.row { display: flex; gap: 8px; } .row > * { flex: 1; }
.card { background: #1a1d24; padding: 16px; border-radius: 12px; margin: 12px 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { border-bottom: 1px solid #2a2e37; padding: 6px; text-align: left; }
.msg { padding: 8px; border-radius: 8px; } .err { background: #5b2330; color: #ffd; }
.ok { background: #1f4536; color: #dffaf0; } a { color: #4fd1c5; }

/* ── Diag SPA (Phase 2J) — bám flow + ngữ nghĩa màu app, nền tối ─────────────── */
body.diag { max-width: 1040px; }
.conn-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:#141821;
  border:1px solid #2a2e37; border-radius:10px; padding:10px; margin:8px 0; }
.conn-bar input, .conn-bar select { width:auto; flex:1; min-width:140px; margin:0; }
.conn-bar .pill { flex:0 0 auto; }
.pill { padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.pill.on { background:#1B5E20; color:#b9f6ca; } .pill.off { background:#5b2330; color:#ffcdd2; }
.pill.warn { background:#4a3b00; color:#ffe082; } .pill.scan { background:#0d3b66; color:#90caf9; }

.tabbar { display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid #2a2e37; margin:10px 0; }
.tab { flex:0 0 auto; width:auto; margin:0; padding:9px 14px; background:transparent; color:#9aa4b2;
  border:0; border-bottom:2px solid transparent; border-radius:0; font-weight:600; }
.tab.active { color:#4fd1c5; border-bottom-color:#4fd1c5; }

.grp { margin:14px 0 6px; display:flex; align-items:center; gap:8px; }
.grp .gname { font-weight:800; letter-spacing:.3px; } .grp .gbar { flex:1; height:1px; background:#2a2e37; }
.grp-Info .gname{color:#42a5f5} .grp-Body .gname{color:#ba68c8} .grp-Chassis .gname{color:#66bb6a}
.grp-Powertrain .gname{color:#ffa726} .grp-Battery .gname{color:#4db6ac} .grp-Khác .gname{color:#90a4ae}

.ecu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media(max-width:640px){ .ecu-grid{grid-template-columns:repeat(2,1fr);} }
.ecu-card { background:rgba(255,255,255,.03); border:1px solid #333; border-left:4px solid #555;
  border-radius:8px; padding:10px; cursor:pointer; }
.ecu-card:hover { background:rgba(255,255,255,.06); }
.ecu-card.full { grid-column:1/-1; }
.ecu-card.ok { border-left-color:#43A047; background:rgba(67,160,71,.10); }
.ecu-card.err { border-left-color:#E65100; background:rgba(230,81,0,.13); }
.ecu-card.nr { border-left-color:#666; opacity:.7; }
.ecu-card .en { font-weight:700; } .ecu-card .es { font-size:12px; }
.st-ok{color:#69f6a8}.st-err{color:#ffb74d}.st-nr{color:#9aa4b2}

.badge { padding:2px 8px; border-radius:6px; font-size:12px; font-weight:700; }
.dtc { font-family:monospace; font-weight:700; padding:2px 8px; border-radius:6px; color:#fff; }
.dtc.P{background:#c62828}.dtc.C{background:#3949ab}.dtc.B{background:#2e7d32}.dtc.U{background:#8e24aa}
.risk-high{color:#ef5350}.risk-med{color:#ffb74d}.risk-low{color:#9aa4b2}

.subtab { display:flex; gap:2px; overflow-x:auto; margin:8px 0; }
.subtab button { flex:0 0 auto; width:auto; margin:0; padding:7px 12px; background:#141821;
  color:#9aa4b2; border:1px solid #2a2e37; border-radius:8px 8px 0 0; font-size:14px; }
.subtab button.active { background:#1a1d24; color:#4fd1c5; border-bottom-color:#1a1d24; }

mono, .mono, code { font-family:monospace; }
.log { font-family:monospace; font-size:13px; white-space:pre-wrap; background:#0c0e13;
  border:1px solid #2a2e37; border-radius:8px; padding:10px; max-height:280px; overflow:auto; }
.log .l-ok{color:#69f6a8}.log .l-err{color:#ff8a80}.log .l-run{color:#4fd1c5}.log .l-wait{color:#ffe082}

.dlg { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center;
  justify-content:center; padding:16px; z-index:50; }
.dlg-card { background:#1a1d24; border:1px solid #2a2e37; border-radius:12px; padding:18px;
  max-width:520px; width:100%; max-height:88vh; overflow:auto; }
.dlg-card h3 { margin:0 0 8px; color:#4fd1c5; }
.btn-sm { width:auto; padding:6px 12px; font-size:13px; margin:2px; }
.btn-danger { background:#c62828; color:#fff; } .btn-warn{ background:#ef6c00; color:#fff; }
.btn-ghost { background:#222734; color:#cfd6e0; }
.count-big { font-size:48px; font-weight:800; text-align:center; color:#69f6a8; }
.note { font-size:13px; color:#9aa4b2; }