*{box-sizing:border-box}html{background:radial-gradient(circle at top,#3b82f63d,#0000 35%),linear-gradient(#0f172a 0%,#111827 52%,#030712 100%)}body{color:#fff;background:0 0;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}#root{min-height:100vh}.container{justify-content:center;align-items:flex-start;min-height:100vh;padding:24px;display:flex}.card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0f172adb;border:1px solid #94a3b824;border-radius:24px;width:100%;max-width:980px;padding:24px;box-shadow:0 24px 60px #02061766}h1{margin:0;font-size:34px;line-height:1.05}.subtitle{color:#cbd5e1;max-width:620px;margin-bottom:24px}.hero-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.status-chip{background:#0f172a80;border:1px solid #94a3b81f;border-radius:16px;min-width:180px;padding:14px}.status-chip small{color:#cbd5e1;margin-top:8px;display:block}.grid{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.box{background:#334155e0;border:1px solid #94a3b81a;border-radius:18px;margin-bottom:16px;padding:18px}.box h2{margin-top:0}.btn{color:#fff;cursor:pointer;border:none;border-radius:10px;margin:8px 8px 8px 0;padding:14px 18px;font-size:16px;font-weight:600;transition:transform .12s,opacity .12s,filter .12s}.btn:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.green{background:#16a34a}.red{background:#dc2626}.blue{background:#2563eb}.gray{background:#6b7280}.success{color:#4ade80}.danger{color:#f87171}.alert{border:1px solid #0000;border-radius:14px;margin-bottom:16px;padding:14px}.alert.success{background:#0f766e38;border-color:#2dd4bf47}.alert.error{background:#7f1d1d47;border-color:#f8717147}.camera-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.camera-panel{background:#0f172a6b;border:1px solid #94a3b81a;border-radius:16px;padding:14px}.panel-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.panel-header h3{margin:0}.badge{text-transform:capitalize;letter-spacing:.04em;border-radius:999px;justify-content:center;align-items:center;min-width:98px;padding:6px 10px;font-size:12px;font-weight:700;display:inline-flex}.badge.online{color:#86efac;background:#16a34a33}.badge.connecting{color:#93c5fd;background:#2563eb33}.badge.offline{color:#fca5a5;background:#dc262633}.camera-frame{background:#020617;border-radius:14px;position:relative;overflow:hidden}.camera{background:#111;border-radius:14px;width:100%;margin-bottom:16px;display:block}.live-camera{object-fit:cover;min-height:260px;margin-bottom:0}.camera-overlay{color:#cbd5e1;text-align:center;background:#020617b3;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0}.camera-placeholder{color:#cbd5e1;text-align:center;background:#111827;border:2px dashed #6b7280;border-radius:14px;justify-content:center;align-items:center;width:100%;height:260px;margin-bottom:16px;padding:20px;display:flex}.button-row,.footer-actions{flex-wrap:wrap;gap:8px;display:flex}@media (width<=700px){.hero-header{flex-direction:column}.status-chip{width:100%}.grid,.camera-layout{grid-template-columns:1fr}.panel-header{flex-direction:column;align-items:flex-start}.btn{width:100%;margin-right:0}.button-row,.footer-actions{flex-direction:column}}