*{box-sizing:border-box}body{margin:0;background:#f5f6f8;color:#151c2b;font:14px Arial}main{display:flex;min-height:100vh}aside{width:240px;background:#111827;color:#fff;padding:28px;position:fixed;inset:0 auto 0 0}aside h1{color:#8290ff}aside span{font-size:13px;letter-spacing:2px;color:#fff}nav{display:grid;gap:6px;margin-top:32px}nav a{color:#9ba6b9;text-decoration:none;padding:11px 12px;border-radius:7px}nav a:hover,nav a.active{color:#fff;background:#202a3d}section{margin-left:240px;padding:30px;width:calc(100% - 240px)}header{display:flex;justify-content:space-between;align-items:center}header h2{margin:0}header p{color:#788295}button{border:0;border-radius:7px;background:#4058df;color:#fff;padding:11px 16px;cursor:pointer}button:disabled{opacity:.55;cursor:default}.cards,.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}.cards article,.rooms article{background:#fff;border:1px solid #e7eaf0;border-radius:10px;padding:20px}.cards small,.rooms span{display:block;color:#788295}.cards b{display:block;font-size:28px;margin-top:12px}.rooms strong{display:block;font-size:16px}.rooms span{margin:8px 0 18px}form{display:grid;grid-template-columns:2fr 1.3fr 1.3fr 2fr auto;gap:12px;align-items:end;margin:24px 0;padding:18px;background:#fff;border:1px solid #e7eaf0;border-radius:10px}label{display:grid;gap:7px;color:#5c6678;font-size:12px}input,select{width:100%;border:1px solid #d8dce5;border-radius:7px;background:#fff;padding:10px;color:#151c2b}.hint{grid-column:1/-1;margin:0;color:#788295;font-size:12px}.camera-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}.camera-grid article{overflow:hidden;background:#fff;border:1px solid #e1e5ed;border-radius:11px}.preview{display:grid;place-items:center;aspect-ratio:16/9;background:#101622}.preview iframe,.preview video,.preview app-hls-player{display:block;width:100%;height:100%;border:0}.preview video{object-fit:contain}.play{background:#29344a}.camera-info{display:flex;justify-content:space-between;align-items:center;padding:16px}.camera-info strong,.camera-info span{display:block}.camera-info span{margin-top:6px;color:#788295;font-size:12px}.danger{padding:8px 10px;background:#fff;color:#bb3040;border:1px solid #efcbd0}.empty{display:grid;gap:8px;place-items:center;margin-top:24px;padding:70px;background:#fff;border:1px dashed #ccd2dd;border-radius:10px;color:#788295}.empty b{color:#151c2b}.error{padding:12px 14px;border-radius:8px;background:#fff0f1;color:#a82030}@media(max-width:900px){aside{width:180px}section{margin-left:180px;width:calc(100% - 180px)}form,.camera-grid,.cards,.rooms{grid-template-columns:1fr}.hint{grid-column:auto}}