.cctv-view{--cctv-orange:#ff8a1f;--cctv-green:#38d891;--cctv-red:#ff6375;padding-bottom:calc(108px + env(safe-area-inset-bottom))}
.cctv-content{display:grid;gap:14px;min-width:0}
.cctv-security-note{display:flex;align-items:flex-start;gap:12px;padding:15px;border:1px solid color-mix(in srgb,var(--cctv-green) 45%,transparent);border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--cctv-green) 16%,var(--surface)),var(--surface));color:var(--on-surface)}
.cctv-security-note>span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:12px;background:var(--cctv-green);color:#071f16;font-weight:950}
.cctv-security-note b{display:block;font-size:14px}.cctv-security-note p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.cctv-layout-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.cctv-layout-switch button{min-height:44px;border:0;border-radius:12px;background:transparent;color:var(--muted);font:800 12px/1 inherit}
.cctv-layout-switch button.active{background-color:#ff9a2b;background-image:linear-gradient(135deg,var(--cctv-orange),#ffb04e);color:#251204;box-shadow:0 8px 22px rgba(255,138,31,.24)}
.cctv-group{display:grid;gap:10px;min-width:0}.cctv-group>header{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:4px 2px}
.cctv-group>header h2{margin:1px 0 0;color:var(--on-surface);font-size:20px}.cctv-group>header p{margin:3px 0 0;color:var(--muted);font-size:12px}.cctv-group>header strong{display:grid;place-items:center;min-width:34px;height:34px;border-radius:12px;background:color-mix(in srgb,var(--cctv-orange) 18%,var(--surface));color:var(--cctv-orange);font-size:13px}
.cctv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}.cctv-grid.list{gap:9px}
.cctv-camera-card{min-width:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:22px;background:var(--surface);box-shadow:0 16px 34px rgba(1,7,18,.18);transition:transform .18s ease,border-color .18s ease,opacity .18s ease}
.cctv-camera-card.personal{border-color:color-mix(in srgb,var(--cctv-orange) 56%,var(--line));box-shadow:0 16px 38px rgba(255,138,31,.12)}.cctv-camera-card.dragging{opacity:.62;transform:scale(.985);border-color:var(--cctv-orange)}
.cctv-camera-card>header{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;padding:12px}.cctv-drag{display:grid;place-items:center;width:26px;height:44px;color:var(--muted);font-size:20px;cursor:grab;touch-action:none}.cctv-camera-card>header>span:nth-child(2){display:grid;min-width:0}.cctv-camera-card>header small{color:var(--cctv-orange);font-size:9px;font-weight:900;letter-spacing:.08em}.cctv-camera-card>header b{overflow:hidden;color:var(--on-surface);font-size:15px;text-overflow:ellipsis;white-space:nowrap}.cctv-camera-card>header i{overflow:hidden;color:var(--muted);font-size:11px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
.cctv-online{padding:6px 8px;border-radius:999px;background:color-mix(in srgb,var(--cctv-green) 18%,var(--surface));color:var(--cctv-green);font-size:10px;font-style:normal;font-weight:900;white-space:nowrap}.cctv-online.offline{background:color-mix(in srgb,var(--cctv-red) 14%,var(--surface));color:var(--cctv-red)}
.cctv-player{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background-color:#09101c;background-image:radial-gradient(circle at 50% 30%,#223249,#09101c 70%);color:#fff}.cctv-media,.cctv-player-state>img{width:100%;height:100%;object-fit:cover}.cctv-player-state{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:7px;padding:20px;color:#fff;text-align:center}.cctv-player-state>span{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.24);border-radius:16px;background:rgba(7,15,27,.92);font-size:23px}.cctv-player-state>b{max-width:250px;color:#fff;font-size:13px}.cctv-player-state>small{max-width:280px;color:#dce8f7;font-size:11px;line-height:1.4}.cctv-player-state>img{position:absolute;inset:0;opacity:.38}.cctv-player-state>img~b{position:relative}.cctv-player-state.loading>span{width:30px;height:30px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--cctv-orange);border-radius:50%;animation:cctv-spin .8s linear infinite}.cctv-player-state.error>span{border-color:rgba(255,99,117,.5);color:#ff9ca8}
.cctv-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:7px;background:color-mix(in srgb,var(--surface) 90%,#000)}.cctv-controls button{display:grid;place-items:center;align-content:center;gap:2px;min-width:0;min-height:48px;padding:3px 1px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--muted)}.cctv-controls button span{font-size:15px}.cctv-controls button b{font-size:9px}.cctv-controls button:not(:disabled):active{transform:scale(.95)}.cctv-controls button.primary-control{background-color:#ff9a2b;background-image:linear-gradient(135deg,var(--cctv-orange),#ffb04e);color:#241203}.cctv-controls button.primary-control b,.cctv-controls button.primary-control span{color:#241203}.cctv-controls button:disabled{opacity:.35}
.cctv-order-buttons{display:flex;justify-content:flex-end;gap:6px;padding:0 9px 9px}.cctv-order-buttons button{min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);font-size:10px;font-weight:850}.cctv-order-buttons button:disabled{opacity:.3}
.cctv-archive-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--cctv-orange) 6%,var(--surface))}.cctv-archive-form label{display:grid;gap:4px;min-width:0}.cctv-archive-form label span{color:var(--muted);font-size:10px;font-weight:850}.cctv-archive-form input{min-width:0;height:44px;padding:0 8px;border:1px solid var(--line);border-radius:11px;background:var(--background);color:var(--on-surface);font:700 11px inherit;color-scheme:dark}.cctv-archive-form .primary{grid-column:1/-1;min-height:46px;border:0;border-radius:13px;background:linear-gradient(135deg,var(--cctv-orange),#ffb04e);color:#241203;font-weight:950}
body[data-theme="light"] .cctv-player{background-color:#101b2a;background-image:radial-gradient(circle at 50% 30%,#34465f,#101b2a 72%)}body[data-theme="light"] .cctv-archive-form input{color-scheme:light}body[data-theme="light"] .cctv-group>header strong,body[data-theme="light"] .cctv-camera-card>header small{color:#8a3600}body[data-theme="light"] .cctv-online{color:#08713f;background:#e2f5eb}
body[data-theme="vision"] .cctv-security-note,body[data-theme="vision"] .cctv-camera-card{border-width:2px}body[data-theme="vision"] .cctv-controls button,body[data-theme="vision"] .cctv-order-buttons button{font-size:1em}body[data-theme="vision"] .cctv-layout-switch button.active,body[data-theme="vision"] .cctv-controls button.primary-control{background:#ffe500;color:#000}body[data-theme="vision"] .cctv-controls button.primary-control b,body[data-theme="vision"] .cctv-controls button.primary-control span{color:#000}
@media (min-width:680px){.cctv-grid:not(.list){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:370px){.cctv-camera-card>header{grid-template-columns:22px minmax(0,1fr)}.cctv-online{grid-column:2;justify-self:start}.cctv-controls button b{font-size:8px}.cctv-archive-form{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.cctv-camera-card{transition:none}.cctv-player-state.loading>span{animation:none}}
@keyframes cctv-spin{to{transform:rotate(360deg)}}