:root{font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f7fa;color:#182235}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;justify-content:space-between;padding:22px 6%;background:white;border-bottom:1px solid #e3e8ef}.brand{font-weight:700;font-size:21px;color:#1e3a64;text-decoration:none}nav{display:flex;gap:24px;align-items:center}nav a{color:#64748b;text-decoration:none;font-size:13px}main{max-width:1300px;margin:35px auto;padding:0 28px}h1{font-size:27px;letter-spacing:-.7px;margin:0 0 26px}h2{font-size:20px;margin:0}button,input{font:inherit;border-radius:6px}button{padding:9px 15px;background:#2563eb;border:1px solid #2563eb;color:white;cursor:pointer;font-weight:500}button:disabled{background:#eef2f7;color:#8d9aad;border-color:#e1e6ee;cursor:default}input{height:41px;padding:9px 11px;border:1px solid #d7dee8;background:white;color:#182235;width:100%}input:focus{outline:3px solid #2563eb15;border-color:#739de6}label{display:grid;gap:7px;color:#64748b;font-size:13px}#login{display:grid;gap:20px;background:white;padding:30px;border:1px solid #e0e6ee;border-radius:10px;max-width:370px;margin:60px auto;box-shadow:0 8px 34px #1b2a4308}#devices{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}article{background:white;border:1px solid #e0e6ee;border-radius:9px;padding:22px}article h2{font-size:15px;margin:0 0 9px}article .key{font:12px ui-monospace,SFMono-Regular,monospace;color:#8490a2;margin-bottom:17px}article p{font-size:12px;color:#718096;display:flex;justify-content:space-between;margin:12px 0}article button{width:100%;margin-top:9px;font-size:12px}.state{font-size:11px;text-transform:capitalize;color:#8895a7}.state.online{color:#20875b}video{width:100%;max-height:70vh;background:#070d17;margin-top:25px;border-radius:8px}#message,#playback{padding:13px 16px;color:#7b5e50;background:#fff8f0;border:1px solid #f4e2d2;border-radius:7px;font-size:13px}.empty{color:#96a2b2;text-align:center;padding:60px}[hidden]{display:none!important}@media(max-width:600px){header{padding:18px 20px}nav{gap:15px}nav a{font-size:12px}main{padding:0 18px}#login{margin:35px auto}}