[hidden]{display:none!important}:root{font-family:Tahoma,"Segoe UI",sans-serif;color:#263142;background:#eef3fb;color-scheme:light;--accent:#4d8df7;--accent2:#61d5dc;--panel:#fff;--soft:#f5f7fb;--line:#e5eaf2;--muted:#8a94a5}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#edf4ff 0,#f7f9fc 42%,#eef2f7 100%)}button,input,select{font:inherit}button{border:0;border-radius:12px;padding:12px 16px;background:var(--accent);color:#fff;cursor:pointer;font-weight:700;box-shadow:0 5px 14px #4d8df728}button:disabled{opacity:.55;cursor:not-allowed}.login{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(390px,92vw);text-align:center;background:#fff;border-radius:24px;padding:38px;box-shadow:0 22px 65px #56739a24}.brand-mark{width:68px;height:68px;margin:auto;display:grid;place-items:center;border-radius:22px;background:linear-gradient(145deg,var(--accent2),var(--accent));font-size:38px;color:#fff}.login input{width:100%;padding:14px;margin:18px 0 12px;border-radius:12px;border:1px solid var(--line);background:#f7f9fc}.login button{width:100%}.error{color:#d34a55;min-height:24px;margin-top:12px}main{max-width:1120px;margin:auto;padding:26px 28px 60px}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.app-header h1{margin:0;font-size:27px}.app-header p{margin:7px 0 0;color:var(--muted)}.header-actions{display:flex;align-items:center;gap:10px}.icon-button,.round-menu{width:44px;height:44px;padding:0;border-radius:50%;font-size:23px;background:#fff;color:#39485d;box-shadow:0 5px 18px #4e67831d}.text-button{background:#fff;color:#5e6b7c;box-shadow:none}.device-strip{display:flex;align-items:center;gap:18px;margin-bottom:13px;color:#313c4c}.device-strip span{color:var(--muted);font-size:13px}.device-strip .round-menu{margin-right:auto;font-size:17px;width:38px;height:38px}.camera-card{background:var(--panel);border-radius:20px;padding:16px;box-shadow:0 12px 35px #52729b1b;border:1px solid #edf0f5}.camera-title{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 14px}.camera-title div{display:grid;gap:5px}.camera-title small{color:var(--muted)}.status-chip{font-size:12px;padding:6px 10px;border-radius:999px;background:#ecf2ff;color:#3978db}.status-chip.online{background:#dff7ef;color:#24826b}.status-chip.recording{background:#fee5e7;color:#bc3040}.video{position:relative;aspect-ratio:16/9;background:#151922;border-radius:14px;overflow:hidden}.video img,.video canvas{position:absolute;width:100%;height:100%;object-fit:contain}.video canvas{pointer-events:none}.video canvas.editing{pointer-events:auto;cursor:crosshair}.video #offline{position:absolute;inset:0;display:grid;place-items:center;color:#d6dde8}.live-clock{position:absolute;right:12px;top:10px;padding:5px 9px;border-radius:7px;background:#111827a8;color:#fff;font-size:12px}.hint{color:var(--muted);font-size:12px;margin:10px 3px}.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.home-actions button{display:flex;align-items:center;justify-content:center;gap:8px}.home-actions button:last-child{background:#fff;color:#3e76d6;border:1px solid #d8e4f8;box-shadow:none}.modal{position:fixed;inset:0;z-index:20;background:#18223470;display:grid;place-items:center;padding:22px}.modal[hidden]{display:none}.modal-card{background:#fff;border-radius:20px;padding:22px;width:min(620px,96vw);max-height:90vh;overflow:auto;box-shadow:0 30px 80px #1723363d}.modal-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-22px;background:#fff;padding:8px 0 13px;z-index:2}.modal-head h2{margin:0}.close{width:39px;height:39px;padding:0;border-radius:50%;background:#f0f3f8;color:#647084;box-shadow:none;font-size:25px}.setting-box{background:var(--soft);border:1px solid var(--line);border-radius:15px;padding:16px;margin:12px 0}.setting-box h3{margin:0 0 13px}.setting-box p,.setting-box small{color:var(--muted);font-size:12px}.setting-box label{display:block;margin:11px 0;color:#536071}.setting-box input,.setting-box select{width:100%;padding:11px;margin-top:6px;border:1px solid #dce2eb;border-radius:10px;background:#fff;color:#303a49}.setting-box button{margin:4px 0 4px 8px}.check{display:flex!important;gap:8px;align-items:center}.check input{width:18px!important;margin:0!important}.danger{background:#d95862}.ghost{background:#e8edf5;color:#4c5a6e;box-shadow:none}.result-list{display:grid;gap:9px;margin-top:12px}.result-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--line);padding:11px;border-radius:11px}.result-item div{display:grid;gap:4px}.result-item small{color:var(--muted)}.result-item button{padding:8px 13px}.wizard-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:15px}.wizard-steps span{text-align:center;background:#eef1f5;color:#8b95a5;padding:10px 5px;border-radius:10px;font-size:12px}.wizard-steps .active{background:#e4efff;color:#367be3;font-weight:700}.rules-text{line-height:1.9;color:#586578}.consent .check{margin:15px 0}body[data-theme="blue"]{--accent:#3478e5;--accent2:#6bb7ff}body[data-theme="green"]{--accent:#3c9a73;--accent2:#69d5aa}body[data-theme="rose"]{--accent:#d35e87;--accent2:#f49ab6}body[data-theme="gray"]{--accent:#64748b;--accent2:#94a3b8}body[data-theme="cream"]{--accent:#4d8df7;--accent2:#61d5dc}.font-small{font-size:13px}.font-medium{font-size:15px}.font-large{font-size:18px}@media(max-width:700px){main{padding:18px 14px 38px}.app-header{align-items:flex-start}.app-header h1{font-size:23px}.header-actions{gap:5px}.icon-button{width:39px;height:39px}.text-button{padding:10px}.home-actions{grid-template-columns:1fr}.modal{padding:8px}.modal-card{max-height:96vh;border-radius:16px}.wizard-steps{grid-template-columns:1fr}.video{aspect-ratio:4/3}}
.camera-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px}.camera-sidebar{display:block;background:#fff;border:1px solid var(--line);border-radius:20px;padding:13px;box-shadow:0 12px 35px #52729b14;max-height:720px;overflow:auto}.sidebar-head{display:grid;gap:10px;margin-bottom:12px}.sidebar-head label{font-size:12px;color:var(--muted);display:flex;gap:7px;align-items:center}.camera-list{display:grid;gap:10px}.camera-list-item{border:1px solid var(--line);border-radius:13px;padding:8px;background:var(--soft);cursor:pointer}.camera-list-item.active{border-color:var(--accent);box-shadow:0 0 0 2px #4d8df71c}.camera-list-item img,.camera-thumb-placeholder{width:100%;aspect-ratio:16/9;object-fit:cover;background:#151922;border-radius:9px;display:grid;place-items:center;color:#cad2df;font-size:11px}.camera-list-item strong,.camera-list-item small{display:block;margin-top:6px}.camera-list-item small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.camera-list-item .configure-camera{width:100%;padding:7px;margin-top:7px;font-size:11px}.camera-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}.wall-camera{position:relative;background:#111827;border-radius:16px;overflow:hidden;aspect-ratio:16/9}.wall-camera img{width:100%;height:100%;object-fit:contain}.wall-camera span{position:absolute;right:9px;bottom:8px;background:#111827b8;color:#fff;padding:5px 8px;border-radius:7px;font-size:12px}@media(max-width:850px){.camera-workspace{grid-template-columns:1fr}.camera-sidebar{max-height:none}.camera-list{grid-template-columns:repeat(2,minmax(0,1fr))}.camera-wall{grid-template-columns:1fr}}
.camera-thumb-wrap{position:relative}.camera-name-row{display:flex!important;align-items:center;gap:6px}.camera-name-row strong{flex:1}.camera-tool{width:29px;height:29px;min-width:29px;padding:0;border-radius:50%;background:#eee5d5;color:#5c5142;box-shadow:none;font-size:16px}.camera-tool.active{background:var(--accent);color:#fff}.record-dot{position:absolute;left:10px;top:10px;width:20px;height:20px;padding:0;border:3px solid #fff;border-radius:50%;background:#8d949e;box-shadow:0 1px 7px #0008;z-index:5}.record-dot.active{background:#e32636;box-shadow:0 0 0 4px #e3263640,0 1px 7px #0008}.wall-camera-tools{position:absolute;right:9px;bottom:8px;display:flex;align-items:center;gap:6px;z-index:4}.wall-camera-tools span{position:static}.wall-camera-tools .camera-tool{background:#f3eadacc;color:#40372e}.wall-camera-tools .camera-tool.active{background:var(--accent);color:#fff}.video,.wall-camera{cursor:zoom-in}.video:fullscreen,.wall-camera:fullscreen{width:100vw;height:100vh;max-width:none;max-height:none;aspect-ratio:auto;border-radius:0;background:#000;cursor:zoom-out}.video:fullscreen img,.wall-camera:fullscreen img{width:100%;height:100%;object-fit:contain}.video:fullscreen canvas{width:100%;height:100%}
.ptz-panel{margin:12px 0;padding:13px;border:1px solid #e3d7c4;border-radius:14px;background:#fbf5e9;text-align:center}.ptz-panel strong,.ptz-panel small{display:block;margin-bottom:9px}.ptz-panel small{margin:9px 0 0;color:var(--muted)}.ptz-pad{display:grid;grid-template-columns:repeat(3,48px);grid-template-areas:". up ." "left stop right" ". down .";justify-content:center;gap:6px}.ptz-pad button,.ptz-zoom button{touch-action:none;user-select:none;box-shadow:none}.ptz-pad button{width:48px;height:42px;padding:0}.ptz-pad [data-ptz="up"]{grid-area:up}.ptz-pad [data-ptz="left"]{grid-area:left}.ptz-pad [data-ptz="stop"]{grid-area:stop;background:#8a5c50}.ptz-pad [data-ptz="right"]{grid-area:right}.ptz-pad [data-ptz="down"]{grid-area:down}.ptz-zoom{display:flex;justify-content:center;gap:8px;margin-top:9px}.ptz-zoom button{padding:9px 13px}
.ptz-shortcut{width:100%;margin-top:7px;padding:8px;background:#8a5c50;color:#fff;box-shadow:none}.wall-ptz{position:absolute;left:10px;bottom:9px;width:auto;margin:0;padding:7px 10px;z-index:6;background:#8a5c50dd}
.app-tabs{display:flex;gap:8px;padding:12px 24px 0;position:sticky;top:0;z-index:8;background:#eef3fb}.app-tabs button{width:auto;min-width:140px;background:transparent;color:#263142;border:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:none}.app-tabs button.active{background:var(--panel);color:var(--accent);border-bottom-color:var(--panel)}.records-panel{margin:0 24px 28px;background:var(--panel);border:1px solid var(--line);border-radius:0 20px 20px 20px;padding:22px;min-height:420px}.records-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.records-head h2{margin:0 0 6px}.records-head p{margin:0;color:var(--muted)}.records-head>div:last-child{display:flex;gap:8px}.records-head button{width:auto}.server-recordings{display:grid;gap:10px;max-height:calc(100vh - 245px);overflow:auto;padding-inline-end:4px}.server-recording{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}.recording-number{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700}.recording-info{display:flex;flex-direction:column;min-width:0}.recording-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recording-info small{color:var(--muted);margin-top:4px}.recording-play,.recording-download{display:inline-flex;align-items:center;justify-content:center;padding:8px 13px;border-radius:10px;text-decoration:none;font-weight:700}.recording-play{background:var(--accent);color:#fff}.recording-download{border:1px solid var(--line);color:#263142}.records-empty{padding:50px;text-align:center;color:var(--muted)}@media(max-width:700px){.app-tabs{padding-inline:12px}.app-tabs button{min-width:0;flex:1}.records-panel{margin:0 12px 90px;padding:14px;border-radius:0 16px 16px 16px}.records-head{align-items:stretch;flex-direction:column}.records-head>div:last-child button{flex:1}.server-recordings{max-height:none}.server-recording{grid-template-columns:34px minmax(0,1fr);gap:8px}.recording-play,.recording-download{grid-row:2}.recording-play{grid-column:1}.recording-download{grid-column:2}}
.camera-card{position:relative}.ptz-panel:not([hidden]){position:absolute;z-index:12;left:18px;bottom:92px;width:218px;margin:0;padding:12px;background:#fff7e8ee;border:2px solid #b77a60;box-shadow:0 10px 28px #4b2f2538;backdrop-filter:blur(4px)}.ptz-pad{grid-template-columns:repeat(3,56px);gap:7px}.ptz-pad button{width:56px;height:50px;border-radius:14px;font-size:25px;font-weight:900;line-height:1;background:#f2dfc7;color:#4b2f25;border:1px solid #c99d7d}.ptz-pad [data-ptz="stop"]{background:#8a5c50;color:#fff}.ptz-zoom button{font-weight:700}@media(max-width:760px){.ptz-panel:not([hidden]){position:fixed;left:12px;right:12px;bottom:16px;width:auto;z-index:50}.ptz-panel small{display:none}}
.camera-card .ptz-panel:not([hidden]){position:static;width:auto;margin:12px 0;padding:13px;background:#fff7e8;border:2px solid #b77a60;box-shadow:none;backdrop-filter:none}.camera-card .ptz-panel small{display:block}