:root {
  --navy: #071b3a;
  --blue: #0c4da2;
  --gold: #f0b429;
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #172033;
  --muted: #6c778a;
  --line: #e5eaf1;
  --green: #159447;
  --red: #d64545;
  --shadow: 0 12px 35px rgba(16, 37, 67, .07);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

button, input { font: inherit; }
button { cursor: pointer; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 255px;
  background: var(--navy);
  color: white;
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
}

.brand { display:flex; gap:12px; align-items:center; padding: 0 10px 34px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(145deg, var(--gold), #fff1ad);
  color: var(--navy); display:grid; place-items:center; font-weight:900;
}
.brand strong { display:block; letter-spacing:.08em; font-size:15px; }
.brand span { display:block; font-size:9px; color:#aebbd0; letter-spacing:.13em; margin-top:3px; }

nav { display:grid; gap:8px; }
.nav-item {
  border:0; background:transparent; color:#b9c5d8;
  padding:13px 14px; border-radius:11px; text-align:left;
  display:flex; gap:12px; align-items:center; font-weight:600;
}
.nav-item:hover, .nav-item.active { background:rgba(255,255,255,.09); color:#fff; }
.sidebar-footer { margin-top:auto; padding:18px 12px; border-top:1px solid rgba(255,255,255,.09); }
.sidebar-footer small { display:block; color:#fff; }
.sidebar-footer span { display:block; color:#7f8da5; font-size:11px; margin-top:5px; }

.main { margin-left:255px; padding:34px 42px 55px; max-width: 1600px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:25px; }
.eyebrow { margin:0 0 7px; color:var(--blue); font-weight:800; font-size:10px; letter-spacing:.15em; }
h1 { margin:0; font-size:32px; letter-spacing:-.04em; }
.subtitle { margin:7px 0 0; color:var(--muted); }
.top-actions { display:flex; align-items:center; gap:15px; }
.connection { color:#3e536e; font-size:13px; }
.connection i { display:inline-block; width:8px; height:8px; background:var(--green); border-radius:50%; margin-right:7px; }
.profile { border:1px solid var(--line); background:white; padding:10px 14px; border-radius:10px; }

.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; margin:30px 0; }
.stat-card {
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:20px; box-shadow:var(--shadow);
}
.stat-card span { color:var(--muted); font-size:12px; font-weight:700; }
.stat-card strong { display:block; font-size:31px; margin:7px 0 2px; }
.stat-card small { color:#94a0b1; }
.stat-card.online strong { color:var(--green); }
.stat-card.offline strong { color:var(--red); }

.toolbar { display:flex; justify-content:space-between; align-items:center; margin:34px 0 15px; }
.toolbar h2 { margin:0; font-size:20px; }
.toolbar p { margin:5px 0 0; color:var(--muted); font-size:13px; }

.primary {
  border:0; background:var(--blue); color:white; font-weight:800;
  padding:11px 16px; border-radius:10px; box-shadow:0 7px 16px rgba(12,77,162,.18);
}
.primary:hover { filter:brightness(1.08); }
.full { width:100%; margin-top:12px; }

.table-card { background:white; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.table-head, .device-row {
  display:grid; grid-template-columns: 2fr 1fr 1.4fr 1.4fr 1fr;
  gap:16px; align-items:center; padding:15px 20px;
}
.table-head { background:#f9fafc; color:#778397; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.device-row { border-top:1px solid var(--line); font-size:13px; }
.device-name { font-weight:800; }
.device-id { display:block; color:#98a2b2; font-size:10px; margin-top:4px; }
.status { font-weight:800; }
.status.online { color:var(--green); }
.status.offline { color:var(--red); }
.action-btn { border:1px solid var(--line); background:white; padding:8px 11px; border-radius:8px; color:var(--blue); font-weight:700; }
.empty { text-align:center; padding:60px 20px; }
.empty-icon { font-size:32px; color:#b5c1d2; }
.empty h3 { margin:10px 0 5px; }
.empty p { color:var(--muted); font-size:13px; margin:0 auto 20px; max-width:480px; }

.next-stage {
  margin-top:24px; padding:23px; background:var(--navy); color:white; border-radius:17px;
  display:flex; justify-content:space-between; gap:30px; align-items:center;
}
.next-stage .eyebrow { color:var(--gold); }
.next-stage h2 { margin:0 0 7px; }
.next-stage p { margin:0; color:#aebbd0; max-width:650px; }
.live-placeholder {
  width:330px; min-height:125px; border:1px dashed #496180; border-radius:12px;
  padding:18px; display:flex; flex-direction:column; justify-content:center;
}
.live-placeholder span { color:#ff7171; font-size:10px; font-weight:900; }
.live-placeholder strong { margin:5px 0; }
.live-placeholder small { color:#8fa0b8; }

dialog { border:0; border-radius:18px; padding:0; width:min(480px, calc(100% - 30px)); box-shadow:0 30px 80px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(4,16,36,.62); }
dialog form { padding:30px; position:relative; }
dialog h2 { margin:0 0 8px; }
.dialog-copy { color:var(--muted); font-size:13px; line-height:1.55; }
dialog label { display:block; font-size:12px; font-weight:800; margin:20px 0 7px; }
dialog input { width:100%; padding:13px; border:1px solid #d8dee8; border-radius:9px; outline:none; }
dialog input:focus { border-color:var(--blue); }
.close { position:absolute; right:15px; top:13px; border:0; background:transparent; font-size:25px; color:#8994a5; }
.error { color:var(--red); font-size:12px; min-height:16px; }

@media (max-width: 900px) {
  .sidebar { width:72px; padding:20px 10px; }
  .brand { padding:0 4px 25px; }
  .brand > div:last-child, .nav-item span, .sidebar-footer { display:none; }
  .nav-item { justify-content:center; }
  .main { margin-left:72px; padding:25px 20px 45px; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .next-stage { flex-direction:column; align-items:stretch; }
  .live-placeholder { width:auto; }
}

@media (max-width: 650px) {
  .topbar { flex-direction:column; }
  .top-actions { width:100%; justify-content:space-between; }
  .stats { grid-template-columns:1fr 1fr; gap:10px; }
  .stat-card { padding:15px; }
  .table-head { display:none; }
  .device-row { grid-template-columns:1fr 1fr; padding:17px; }
  .device-row > *:nth-child(3), .device-row > *:nth-child(4) { font-size:12px; }
  .device-row > *:nth-child(5) { grid-column:1/-1; }
  .toolbar { align-items:flex-start; gap:12px; flex-direction:column; }
  .toolbar .primary { width:100%; }
}