*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f7fb;color:#172033}.app{min-height:100vh}.topbar{height:64px;background:#172033;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;height:100%;text-decoration:none}.brand img{display:block;width:185px;max-height:52px;height:auto;object-fit:contain}.topbar-right{display:flex;align-items:center;gap:16px}.user-name{opacity:.8}.top-link{color:#fff;text-decoration:none;padding:8px 10px;border-radius:7px}.top-link:hover,.admin-link{background:#26344d}.app-body{display:flex;min-height:calc(100vh - 64px)}.sidebar{width:240px;flex:0 0 240px;background:#101a2b;color:#cbd5e1;padding:18px 12px;display:flex;flex-direction:column;gap:5px}.sidebar-title{font-size:11px;font-weight:800;letter-spacing:1px;color:#71809a;padding:8px 12px 12px}.sidebar a{color:#b9c5d7;text-decoration:none;padding:12px;border-radius:8px;display:flex;gap:10px;align-items:center}.sidebar a:hover,.sidebar a.active{background:#23324b;color:#fff}.sidebar-spacer{flex:1}.content{flex:1;min-width:0}.content-inner{max-width:1400px;margin:0 auto;padding:30px}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}.page-head h1{margin:0 0 6px;font-size:30px}.subtitle,.muted{color:#6b778c}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.card{background:#fff;border:1px solid #e4e9f0;border-radius:14px;padding:20px;box-shadow:0 4px 18px rgba(23,32,51,.05)}.stat{min-height:100px;display:flex;flex-direction:column;justify-content:center}.stat b{font-size:30px}.stat span{color:#6b778c;margin-top:5px}.table-wrap{background:#fff;border:1px solid #e4e9f0;border-radius:14px;overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:14px;border-bottom:1px solid #edf0f4;text-align:left;vertical-align:middle}.table th{font-size:12px;text-transform:uppercase;color:#697386;background:#fafbfc}.camera-name{font-weight:700}.actions{display:flex;gap:7px;flex-wrap:wrap}.btn{display:inline-block;border:1px solid #d4dae3;background:#fff;color:#172033;padding:9px 13px;border-radius:8px;text-decoration:none;cursor:pointer;font-size:14px}.btn:hover{background:#f1f4f8}.btn.primary{background:#172033;color:#fff;border-color:#172033}.btn.blue{background:#1976d2;color:#fff;border-color:#1976d2}.btn.danger{background:#b42318;color:#fff;border-color:#b42318}.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}.badge.live,.badge.ok,.badge.online{background:#e8f7ee;color:#16713b}.badge.offline{background:#eef0f3;color:#667085}.badge.blocked{background:#fdecec;color:#b42318}.badge.active{background:#e8f7ee;color:#16713b}.errorbox{background:#fdecec;color:#b42318;padding:12px 14px;border-radius:9px;margin-bottom:18px}.notice{background:#eaf3ff;color:#1756a3;padding:12px 14px;border-radius:9px;margin-bottom:18px}.empty{padding:40px;text-align:center;color:#6b7280}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-weight:700;font-size:14px}.field input,.field select,.field textarea{width:100%;padding:11px;border:1px solid #ccd3dd;border-radius:8px;font:inherit;background:#fff}.field textarea{min-height:110px;resize:vertical}.form-actions{display:flex;gap:8px;margin-top:20px}.code{font-family:monospace}.meter{height:7px;background:#e8ecf2;border-radius:99px;overflow:hidden;margin-top:5px}.meter>span{display:block;height:100%;background:#1976d2}.inline-form{display:inline}.token{font-family:monospace;word-break:break-all;background:#f7f8fa;padding:12px;border-radius:8px}.warning{font-size:12px;color:#8b5e00}.player{background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16/9;max-width:1200px}.player video{width:100%;height:100%;display:block}.mobile-menu{display:none}@media(max-width:900px){.sidebar{width:205px;flex-basis:205px}.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.brand img{width:155px}.topbar{padding:0 12px}.user-name{display:none}.app-body{display:block}.sidebar{width:100%;flex:none;flex-direction:row;overflow:auto;padding:8px}.sidebar-title,.sidebar-spacer{display:none}.sidebar a{white-space:nowrap}.content-inner{padding:18px}.page-head{align-items:flex-start;flex-direction:column}.grid,.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.table th,.table td{padding:10px}}