:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#e7edf8;background:#0b1120;font-family:Arial,sans-serif}*{box-sizing:border-box}body{margin:0}main{max-width:1280px;margin:auto;padding:42px 24px}.eyebrow{color:#44d5b2;letter-spacing:1.5px;font-size:12px;font-weight:700}h1{margin:5px 0;font-size:34px}header>p:last-of-type{color:#9aa9bf}.view-switcher{gap:8px;margin-top:18px;display:flex}.view-btn{color:#e7edf8;cursor:pointer;background:#17243b;border:1px solid #263552;border-radius:8px;padding:8px 20px;font-size:14px;transition:border-color .2s}.view-btn.active{color:#44d5b2;border-color:#44d5b2}.view-btn:hover{border-color:#44d5b2}.layout{grid-template-columns:290px 1fr;gap:20px;margin-top:34px;display:grid}aside,.viewer{background:#121c30;border:1px solid #263552;border-radius:14px;padding:18px}h2{margin:0 0 14px;font-size:18px}h2 span{color:#44d5b2}.camera{width:100%;color:inherit;text-align:left;cursor:pointer;background:#17243b;border:1px solid #0000;border-radius:9px;gap:6px;margin:8px 0;padding:14px;transition:border-color .2s,background .2s;display:grid}.camera:hover,.camera.active{background:#1b2c48;border-color:#44d5b2}.camera small{color:#9aa9bf}.camera i{color:#44d5b2;font-size:12px;font-style:normal}.status-badge{letter-spacing:.5px;align-items:center;gap:5px;font-size:11px;font-weight:700;display:inline-flex}.status-badge.live{color:#44d5b2}.status-badge.offline{color:#7a8ba5}.status-dot{border-radius:50%;width:6px;height:6px;display:inline-block}.status-badge.live .status-dot{background:#44d5b2;animation:1.5s ease-in-out infinite status-pulse}.status-badge.offline .status-dot{background:#7a8ba5}@keyframes status-pulse{0%,to{opacity:1}50%{opacity:.35}}.video{aspect-ratio:16/9;background:#05080e;border-radius:10px;overflow:hidden}.video video{object-fit:contain;width:100%;height:100%}.viewer-info{margin-top:16px}.viewer-info-header{align-items:center;gap:12px;margin-bottom:6px;display:flex}.viewer-info-header h2{margin:0}.viewer-info>p{color:#9aa9bf;word-break:break-word;margin:4px 0 12px}.viewer-info code{font-size:12px}.viewer-info .btn-secondary{color:#e7edf8;cursor:pointer;background:#17243b;border:1px solid #263552;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;transition:border-color .2s;display:inline-flex}.viewer-info .btn-secondary:hover{border-color:#44d5b2}.camera-player-container{background:#05080e;width:100%;height:100%;position:relative}.camera-video{object-fit:contain;width:100%;height:100%}.camera-overlay{color:#9aa9bf;background:#05080ed9;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-size:14px;display:flex;position:absolute;inset:0}.camera-error{color:#ff8f8f}.camera-error-icon{font-size:32px}.camera-spinner{border:3px solid #263552;border-top-color:#44d5b2;border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}.camera-fullscreen-btn{color:#e7edf8;cursor:pointer;opacity:0;z-index:5;background:#0009;border:1px solid #ffffff26;border-radius:6px;justify-content:center;align-items:center;width:34px;height:34px;font-size:16px;transition:opacity .2s;display:flex;position:absolute;top:10px;right:10px}.camera-player-container:hover .camera-fullscreen-btn{opacity:1}@keyframes spin{to{transform:rotate(360deg)}}.grid-controls{color:#9aa9bf;align-items:center;gap:6px;margin-top:34px;font-size:14px;display:flex}.grid-col-btn{color:#e7edf8;cursor:pointer;background:#17243b;border:1px solid #263552;border-radius:6px;width:32px;height:32px;font-size:14px;transition:border-color .2s}.grid-col-btn.active{color:#44d5b2;border-color:#44d5b2}.grid-col-btn:hover{border-color:#44d5b2}.grid-count{margin-left:12px}.grid-view{gap:16px;margin-top:20px;display:grid}.camera-tile{background:#121c30;border:1px solid #263552;border-radius:14px;transition:border-color .2s;position:relative;overflow:hidden}.camera-tile:hover{border-color:#44d5b2}.camera-tile-video{aspect-ratio:16/9;background:#05080e}.camera-tile-overlay{pointer-events:none;z-index:5;justify-content:space-between;align-items:flex-start;display:flex;position:absolute;top:8px;left:8px;right:8px}.camera-tile-overlay>*{pointer-events:auto}.tile-btn{color:#e7edf8;cursor:pointer;opacity:0;background:#0009;border:1px solid #ffffff26;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:opacity .2s;display:flex}.camera-tile:hover .tile-btn{opacity:1}.camera-tile-info{flex-direction:column;gap:4px;padding:10px 14px;display:flex}.camera-tile-info strong{font-size:14px}.camera-tile-info small{color:#9aa9bf;font-size:12px}.modal-overlay{z-index:100;background:#000000bf;justify-content:center;align-items:center;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.modal-card{background:#121c30;border:1px solid #263552;border-radius:14px;width:400px;max-width:92vw;padding:28px;animation:.2s modalSlide}.modal-card h2{margin:0 0 4px}.modal-camera-id{color:#9aa9bf;margin:0 0 20px;font-size:14px}.modal-camera-id small{color:#7a8ba5;font-size:12px;display:block}.modal-fields{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;display:grid}.modal-fields label{color:#9aa9bf;flex-direction:column;gap:4px;font-size:13px;display:flex}.modal-fields input{color:#e7edf8;background:#17243b;border:1px solid #263552;border-radius:8px;outline:none;width:100%;padding:10px 12px;font-size:15px;transition:border-color .2s}.modal-fields input:focus{border-color:#44d5b2}.modal-fields input::-webkit-inner-spin-button{opacity:1}.modal-error{color:#ff8f8f;margin:0 0 12px;font-size:13px}.modal-success{color:#44d5b2;margin:0 0 12px;font-size:13px}.modal-actions{justify-content:flex-end;gap:10px;margin-top:8px;display:flex}.btn-secondary{color:#e7edf8;cursor:pointer;background:#17243b;border:1px solid #263552;border-radius:8px;padding:10px 20px;font-size:14px;transition:border-color .2s}.btn-secondary:hover{border-color:#44d5b2}.btn-primary{color:#0b1120;cursor:pointer;background:#44d5b2;border:none;border-radius:8px;align-items:center;gap:6px;padding:10px 20px;font-size:14px;font-weight:700;transition:opacity .2s;display:inline-flex}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-spinner{border:2px solid #0b11204d;border-top-color:#0b1120;border-radius:50%;width:14px;height:14px;animation:.6s linear infinite spin;display:inline-block}@keyframes fadeIn{0%{opacity:0}}@keyframes modalSlide{0%{opacity:0;transform:translateY(10px)}}.skeleton{position:relative;overflow:hidden}.skeleton-pulse{background:linear-gradient(90deg,#17243b 25%,#1f3050 50%,#17243b 75%) 0 0/200% 100%;border-radius:9px;width:100%;height:100%;animation:1.5s ease-in-out infinite shimmer;display:block}.skeleton-video{aspect-ratio:16/9;border-radius:10px}.skeleton-grid{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px;margin-top:20px;display:grid}.skeleton-grid-tile{aspect-ratio:16/9;background:#121c30;border:1px solid #263552;border-radius:14px;flex-direction:column;padding:0;display:flex}.skeleton-video-area{border-radius:14px 14px 0 0;flex:1}.skeleton-label{border-radius:6px;width:50%;height:16px;margin:14px}.skeleton-list{flex-direction:column;gap:10px;display:flex}.skeleton-list-item{background:#17243b;border-radius:9px;flex-direction:column;gap:8px;padding:14px;display:flex}.skeleton-line{border-radius:6px}.skeleton-line-title{width:70%;height:16px}.skeleton-line-sub{width:50%;height:12px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.placeholder,.empty,.error{color:#9aa9bf;padding:20px 0}.error{color:#ff8f8f}@media (max-width:760px){main{padding:28px 14px}.layout{grid-template-columns:1fr}.viewer{order:-1}.view-switcher{justify-content:center}.grid-view{grid-template-columns:1fr!important}.grid-controls{display:none}.tile-btn,.camera-tile .tile-btn,.camera-fullscreen-btn{opacity:1}.modal-card{width:100%;margin:0 2vw;padding:22px}.modal-fields{grid-template-columns:1fr}}