:root{--hik-bg:#0b1018;--hik-panel:#111a25;--hik-panel-2:#151f2b;--hik-line:#2a3747;--hik-text:#edf3fa;--hik-muted:#8fa0b3;--hik-cyan:#20b8c7;--hik-green:#39c98a;--hik-red:#ef6a6a}
html,body{height:auto;min-height:100%;max-height:none;overflow-x:hidden;overflow-y:auto}body{background:var(--hik-bg);color:var(--hik-text)}.hik-app{min-height:100vh;height:auto!important;max-height:none!important;overflow:visible!important}.hik-main{padding:24px 24px 32px;max-width:1680px;width:100%;margin:0 auto}.hik-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.hik-heading h1{font-size:24px;margin:0 0 5px;letter-spacing:0}.hik-heading p,.preset-toolbar p{margin:0;color:var(--hik-muted);font-size:13px}.hik-status{display:flex;align-items:center;gap:8px;color:var(--hik-muted);font-size:13px}.status-dot{width:8px;height:8px;border-radius:50%;background:#e2aa43;box-shadow:0 0 0 3px #e2aa4325}.hik-status.online .status-dot{background:var(--hik-green);box-shadow:0 0 0 3px #39c98a25}.hik-status.offline .status-dot{background:var(--hik-red)}
.status-strip{min-height:54px;display:grid;grid-template-columns:repeat(5,minmax(90px,1fr)) 42px;border:1px solid var(--hik-line);background:var(--hik-panel);border-radius:6px;margin-bottom:16px}.status-strip>div{padding:8px 14px;border-right:1px solid var(--hik-line);display:flex;flex-direction:column;justify-content:center}.status-strip span{font-size:11px;color:var(--hik-muted)}.status-strip strong{font-size:14px;margin-top:2px}.icon-btn{width:34px;height:34px;padding:7px;border:1px solid var(--hik-line);border-radius:4px;background:#172230;color:#b8c7d8;cursor:pointer}.icon-btn:hover{border-color:var(--hik-cyan);color:#fff}.icon-btn svg,.hold-btn svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2}.status-strip>.icon-btn{align-self:center;justify-self:center}
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.video-pane{border:1px solid var(--hik-line);background:#070b10;border-radius:6px;overflow:hidden}.video-pane header{height:44px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;background:var(--hik-panel);border-bottom:1px solid var(--hik-line)}.video-pane header>div{display:flex;align-items:center;gap:9px}.stream-state{padding-left:9px;border-left:1px solid var(--hik-line);font-size:11px;color:var(--hik-muted)}.stream-state.online{color:var(--hik-green)}.stream-state.error{color:var(--hik-red)}.video-stage{position:relative;aspect-ratio:16/9;background:#05070a;overflow:hidden}.video-stage video{position:absolute;width:100%;height:100%;object-fit:contain;z-index:1}.video-empty{position:absolute;inset:0;display:grid;place-items:center;color:#657487;font-size:13px}.video-stage.has-video .video-empty{display:none}
.control-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr .78fr;gap:16px;margin-bottom:16px}.control-section{min-height:208px;padding:16px;border:1px solid var(--hik-line);background:var(--hik-panel);border-radius:6px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-head h2,.preset-toolbar h2{font-size:15px;margin:0;letter-spacing:0}.section-head label{font-size:11px;color:var(--hik-muted)}.section-head output{color:var(--hik-text);display:inline-block;min-width:22px;text-align:right}input[type=range]{width:100%;accent-color:var(--hik-cyan);margin:13px 0}.dpad{width:150px;height:116px;margin:2px auto;display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,34px);gap:5px;justify-content:center}.dpad button{width:42px;height:34px}.dpad .up{grid-column:2}.dpad .left{grid-column:1;grid-row:2}.dpad .home-btn{grid-column:2;grid-row:2}.dpad .right{grid-column:3;grid-row:2}.dpad .down{grid-column:2;grid-row:3}.hold-btn,.home-btn,.command-btn,.primary-btn,.secondary-btn{border:1px solid var(--hik-line);border-radius:4px;background:#192432;color:var(--hik-text);cursor:pointer}.hold-btn:hover,.home-btn:hover,.secondary-btn:hover{border-color:var(--hik-cyan)}.hold-btn:active,.hold-btn.holding{background:#123b43;border-color:var(--hik-cyan)}.home-btn{font-weight:700;color:var(--hik-cyan)}.axis-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.command-btn{height:46px;font-size:13px}.command-btn.primary,.primary-btn{background:#137d88;border-color:#1ba2b0}.command-icon{font-size:20px;vertical-align:-1px;margin-right:5px}.segmented{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hik-line);border-radius:4px;margin-top:12px;overflow:hidden}.segmented button{height:34px;border:0;background:#121c27;color:var(--hik-muted);cursor:pointer}.segmented button+button{border-left:1px solid var(--hik-line)}.segmented button.active{background:#1a4750;color:#fff}.switch-row{height:108px;margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:12px}.switch-row span{display:flex;flex-direction:column}.switch-row small{margin-top:5px;color:var(--hik-muted);font-size:11px}.switch-row input{position:absolute;opacity:0}.switch-row i{width:46px;height:24px;border-radius:12px;background:#354150;position:relative;cursor:pointer;flex:none}.switch-row i:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:white;transition:.15s}.switch-row input:checked+i{background:var(--hik-green)}.switch-row input:checked+i:after{left:25px}
.preset-section{border:1px solid var(--hik-line);background:var(--hik-panel);border-radius:6px;overflow:hidden}.preset-toolbar{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--hik-line)}.preset-toolbar>div:last-child{display:flex;gap:8px}.primary-btn,.secondary-btn{height:34px;padding:0 13px}.preset-table-wrap{overflow-x:auto;overflow-y:visible;max-height:none}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:11px 14px;border-bottom:1px solid #202c3a;text-align:left;white-space:nowrap}th{background:var(--hik-panel-2);color:var(--hik-muted);font-weight:500;font-size:11px} .preset-actions{display:flex;gap:6px}.preset-actions button{height:28px;padding:0 9px;border:1px solid var(--hik-line);background:#172230;color:#ccd7e4;border-radius:3px;cursor:pointer}.preset-actions .danger{color:#f18a8a}.preset-id{font-family:Consolas,monospace;color:var(--hik-cyan)}.home-mark{font-size:10px;margin-left:6px;padding:2px 5px;border:1px solid #2f746a;color:#69d0b4;border-radius:3px}.empty-row{text-align:center;color:var(--hik-muted);padding:30px}.toast{position:fixed;right:20px;bottom:20px;max-width:360px;padding:11px 15px;border-radius:4px;background:#233142;color:white;box-shadow:0 8px 24px #0008;opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s;z-index:10000}.toast.show{opacity:1;transform:none}.toast.error{background:#8b3434}
@media(max-width:1100px){.control-grid{grid-template-columns:1fr 1fr}.light-section{min-height:160px}.switch-row{height:70px}.hik-main{padding-left:16px;padding-right:16px}}@media(max-width:720px){.hik-main{padding-top:78px}.hik-heading{align-items:flex-start}.video-grid,.control-grid{grid-template-columns:1fr}.status-strip{grid-template-columns:repeat(2,1fr)}.status-strip>.icon-btn{grid-column:2}.video-stage{aspect-ratio:16/10}.preset-toolbar{align-items:flex-start;gap:12px;flex-direction:column}.control-section{min-height:auto}.app-topbar__brand{display:none}}