:root{--bg:#0f1419;--fg:#e8eef4;--muted:#8b9aab;--accent:#3d8bfd;--card:#1a222c;--ok:#3dd68c;--font:"Segoe UI",system-ui,sans-serif}*{box-sizing:border-box}body,html{margin:0;min-height:100%;font-family:var(--font);background:radial-gradient(1200px 600px at 10% -10%,#1a2a3d,var(--bg));color:var(--fg)}a{color:var(--accent)}main{max-width:28rem;margin:0 auto;padding:1.5rem 1.25rem 3rem}h1{font-size:1.5rem;font-weight:650;margin:0 0 .5rem}p.lead{color:var(--muted);margin:0 0 1.5rem;line-height:1.45}.card{background:var(--card);border-radius:12px;padding:1.25rem;margin-bottom:1rem}label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.35rem}input{margin-bottom:.9rem;padding:.65rem .75rem;border-radius:8px;border:1px solid #2a3544;background:#121820;color:var(--fg)}.btn,button,input{width:100%;font-size:1rem}.btn,button{display:inline-block;padding:.75rem 1rem;border:none;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;text-align:center;text-decoration:none}button.secondary{background:transparent;border:1px solid #2a3544;color:var(--fg);margin-top:.5rem}.nav{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.25rem;font-size:.9rem}.cameras{display:grid;grid-gap:.75rem;gap:.75rem}.camera{background:var(--card);border-radius:12px;overflow:hidden}.camera .placeholder{aspect-ratio:16/9;background:#121820;display:grid;place-items:center;color:var(--muted);font-size:.85rem}.camera .title{padding:.6rem .85rem;font-size:.95rem}.badge{display:inline-block;font-size:.75rem;padding:.15rem .45rem;border-radius:999px;background:#1e3a2f;color:var(--ok)}