html,body,#root{margin:0;padding:0;width:100%;min-height:100vh}body{background:#0b1220}*{margin:0;padding:0;box-sizing:border-box}:root{--bg:#0b1220;--bg2:#121c2d;--card:rgba(26,38,58,.82);--border:rgba(255,255,255,.08);--text:#F8FAFC;--muted:#A8B4C8;--green:#4ADE80;--blue:#60A5FA}html,body,#root{width:100%;min-height:100vh}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:radial-gradient(circle at top,#21314d 0%,transparent 35%),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);color:var(--text)}.page{max-width:520px;margin:auto;padding:24px}.header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.header-label{color:var(--blue);letter-spacing:3px;font-size:12px;font-weight:700}.header h1{margin-top:6px;font-size:34px;color:#fff;font-weight:700}.connection-badge{background:#1e2a40;border:1px solid var(--border);padding:10px 14px;border-radius:999px;display:flex;align-items:center;gap:8px;font-size:13px}.connection-dot{width:8px;height:8px;border-radius:50%;background:#4ade80}.camera-panel{position:relative;overflow:hidden;border-radius:28px;aspect-ratio:16/9;margin-bottom:26px;background:#111827;border:1px solid rgba(255,255,255,.08);box-shadow:0 25px 60px #00000073}.camera-background{position:absolute;inset:0;background:radial-gradient(circle at top,#374c72 0%,transparent 45%),linear-gradient(180deg,#202c43,#10151e)}.camera-topbar{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;z-index:3}.live-badge{background:#00000073;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;padding:8px 14px;display:flex;align-items:center;gap:8px}.live-dot{width:10px;height:10px;border-radius:50%;background:#ff3b30;animation:pulse 1.2s infinite}.camera-name{display:flex;gap:8px;align-items:center;background:#00000073;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;padding:8px 14px}.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2}.camera-icon{width:82px;height:82px;border-radius:50%;background:#ffffff14;display:flex;align-items:center;justify-content:center;margin-bottom:18px}.camera-placeholder strong{font-size:24px;color:#fff}.camera-placeholder span{margin-top:8px;color:var(--muted)}.camera-footer{position:absolute;bottom:18px;left:18px;right:18px;display:flex;justify-content:space-between;z-index:3;color:#fff}.camera-status{display:flex;align-items:center;gap:8px}.controls{display:flex;flex-direction:column;gap:16px}.access-card{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:20px;color:#fff;display:flex;align-items:center;cursor:pointer;transition:.25s}.access-card:hover{transform:translateY(-3px);border-color:#3b82f6}.access-icon{width:62px;height:62px;border-radius:18px;background:#263551;display:flex;align-items:center;justify-content:center}.access-content{flex:1;margin-left:18px;text-align:left}.access-label{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}.access-content h2{color:#fff;font-size:24px}.access-action{color:var(--green);font-weight:700}.access-arrow{font-size:28px;color:#7aa2ff}.system-status{margin-top:24px;background:var(--card);border:1px solid var(--border);border-radius:22px;display:flex;justify-content:space-around;padding:20px}.system-item{display:flex;flex-direction:column;align-items:center;gap:6px}.system-item svg{color:var(--green)}.system-item span{color:var(--muted);font-size:13px}.system-item strong{color:#fff}.system-divider{width:1px;background:#ffffff14}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%);background:#16a34a;color:#fff;display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;box-shadow:0 18px 35px #00000059}@keyframes pulse{0%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}to{opacity:.3;transform:scale(.8)}}