:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  background: #08111f;
  color: #f7f9fc;
  --card: rgba(255,255,255,.075);
  --card2: rgba(255,255,255,.11);
  --line: rgba(255,255,255,.10);
  --muted: #9eabc1;
  --accent: #4fa3ff;
  --good: #47d78a;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #172b49 0, #08111f 42%, #050b13 100%); }
button { font: inherit; }
.app-shell { max-width: 760px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 22px) 18px calc(env(safe-area-inset-bottom) + 108px); }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:20px; }
.eyebrow { color:#7fa2d6; font-size:12px; font-weight:800; letter-spacing:.16em; }
h1 { font-size:31px; line-height:1.08; margin:6px 0 8px; }
#summary { color:var(--muted); margin:0; font-size:15px; }
.avatar { width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:var(--card2); color:#fff; font-weight:800; }
.status-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:24px 0 30px; }
.status-card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:2px; backdrop-filter: blur(18px); }
.status-card.wide { grid-column: 1 / -1; }
.status-label { color:var(--muted); font-size:13px; }
.status-card strong { font-size:28px; }
.status-card small { color:var(--muted); }
.section-head { display:flex; justify-content:space-between; align-items:center; margin: 8px 2px 12px; }
h2 { font-size:20px; margin:0; }
.text-btn { background:transparent; color:#80bfff; border:0; font-weight:700; }
.scene-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.scene { min-height:95px; border:1px solid var(--line); background:var(--card); color:white; border-radius:20px; font-size:28px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:14px; gap:10px; text-align:left; }
.scene span { font-size:13px; font-weight:700; }
.scene:active { transform:scale(.98); background:var(--card2); }
section { margin-bottom:30px; }
.camera-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.camera-card { position:relative; min-height:170px; background:linear-gradient(145deg,#1a2e4b,#0c1728); border:1px solid var(--line); border-radius:22px; overflow:hidden; padding:14px; display:flex; flex-direction:column; justify-content:space-between; }
.camera-card .camera-name { font-weight:800; }
.camera-card .camera-meta { color:var(--muted); font-size:12px; }
.live-btn { align-self:flex-start; border:0; border-radius:999px; padding:9px 14px; background:#f3f6fb; color:#09111c; font-weight:800; }
.online { color:var(--good); }
.device-list { display:grid; gap:10px; }
.device-row { display:flex; justify-content:space-between; align-items:center; padding:15px 16px; border:1px solid var(--line); background:var(--card); border-radius:18px; }
.device-left { display:flex; align-items:center; gap:12px; }
.device-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.08); font-size:19px; }
.device-name { font-weight:750; }
.device-sub { color:var(--muted); font-size:12px; margin-top:2px; }
.toggle { border:0; background:#1d3556; color:#b9c8da; border-radius:999px; padding:8px 12px; font-weight:800; }
.toggle.on { background:#1877d2; color:white; }
.bottom-nav { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom) + 10px); width:min(720px, calc(100% - 24px)); background:rgba(12,20,32,.86); border:1px solid var(--line); border-radius:24px; padding:9px; display:grid; grid-template-columns:repeat(4,1fr); backdrop-filter:blur(24px); z-index:10; }
.bottom-nav button { background:transparent; border:0; color:#8291a9; display:flex; flex-direction:column; gap:4px; align-items:center; font-size:18px; }
.bottom-nav button span { font-size:10px; font-weight:750; }
.bottom-nav button.active { color:white; }
dialog { width:min(92vw,640px); border:1px solid var(--line); background:#0b1423; color:white; border-radius:24px; padding:18px; }
dialog::backdrop { background:rgba(0,0,0,.7); backdrop-filter:blur(3px); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; }
.dialog-head h3 { margin:4px 0 0; font-size:24px; }
.close-btn { background:var(--card2); border:0; color:white; border-radius:50%; width:38px; height:38px; }
.live-placeholder { min-height:320px; margin:18px 0; border-radius:18px; background:radial-gradient(circle at center,#1d395f,#07101b 65%); display:grid; place-items:center; text-align:center; color:var(--muted); padding:30px; position:relative; }
.live-dot { width:12px; height:12px; border-radius:50%; background:#ff4c4c; position:absolute; left:18px; top:18px; box-shadow:0 0 0 6px rgba(255,76,76,.15); }
.dialog-actions { display:flex; gap:10px; justify-content:flex-end; }
.dialog-actions button { border:0; border-radius:14px; padding:11px 14px; background:#3188e8; color:#fff; font-weight:800; }
.dialog-actions .secondary { background:var(--card2); }
.toast { position:fixed; left:50%; bottom:110px; transform:translateX(-50%) translateY(30px); opacity:0; pointer-events:none; transition:.22s; background:#f2f5f9; color:#09111c; padding:12px 16px; border-radius:999px; font-weight:750; z-index:20; box-shadow:0 12px 40px rgba(0,0,0,.3); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-width:430px){
  h1{font-size:28px}.scene-grid{grid-template-columns:repeat(2,1fr)}.camera-grid{grid-template-columns:1fr}.camera-card{min-height:150px}
}