*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f172a;--surface:#1e293b;--border:#334155;--accent:#38bdf8;--green:#4ade80;--yellow:#facc15;--red:#f87171;--text:#e2e8f0;--muted:#94a3b8}body{background:var(--bg);color:var(--text);font-family:Segoe UI,sans-serif}.header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border)}.header-title{font-size:1.1rem;font-weight:700;color:var(--accent)}.header-sub{font-size:.8rem;color:var(--muted)}.main{padding:1.5rem}.grid{display:grid;grid-gap:1rem;gap:1rem}.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.card{background:var(--surface);border:1px solid var(--border);border-radius:.5rem;padding:1rem}.card-title{font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;margin-bottom:.5rem}.card-value{font-size:2rem;font-weight:700}.badge{display:inline-block;padding:.15rem .5rem;border-radius:9999px;font-size:.7rem;font-weight:600}.badge-green{background:#14532d;color:var(--green)}.badge-red{background:#450a0a;color:var(--red)}.badge-yellow{background:#422006;color:var(--yellow)}.badge-gray{background:#1e293b;color:var(--muted);border:1px solid var(--border)}.badge-blue{background:#0c4a6e;color:#38bdf8}table{width:100%;border-collapse:collapse;font-size:.8rem}td,th{padding:.5rem .75rem;text-align:left;border-bottom:1px solid var(--border)}th{color:var(--muted);font-weight:600}.section-title{font-size:.95rem;font-weight:700;margin:1.5rem 0 .75rem;color:var(--accent)}.section-title:first-child{margin-top:0}.ws-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.ws-dot.on{background:var(--green)}.ws-dot.off{background:var(--red)}.tab-bar{display:flex;align-items:center;gap:2px;padding:4px 8px 0;background:var(--bg);border-bottom:1px solid var(--border);overflow:visible;flex-shrink:0;position:relative}.tab-measure{position:absolute;top:-9999px;left:0;display:flex;gap:2px;visibility:hidden;pointer-events:none;white-space:nowrap}.tab-more-wrap{position:relative;flex-shrink:0}.tab-more{background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:5px 5px 0 0;color:var(--muted);font-size:12px;padding:5px 9px;cursor:pointer;white-space:nowrap;transition:color .12s,background .12s}.tab-more:hover{color:var(--text);background:rgba(255,255,255,.06)}.tab-more-active{color:var(--accent);border-color:var(--accent);font-weight:600}.tab-more-menu{position:absolute;top:100%;right:0;margin-top:2px;background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.4);padding:4px;z-index:100;min-width:170px;max-height:60vh;overflow-y:auto}.tab-more-item{display:flex;align-items:center;justify-content:space-between;border-radius:4px}.tab-more-item:hover{background:rgba(255,255,255,.06)}.tab-more-item-active .tab-more-label{color:var(--accent);font-weight:600}.tab-more-label{flex:1 1;padding:6px 10px;font-size:12px;color:var(--muted);text-decoration:none;white-space:nowrap}.tab-more-label:hover{color:var(--text)}.tab-close-all{margin-left:auto;flex-shrink:0;background:transparent;border:1px solid var(--border);border-radius:5px;color:var(--muted);font-size:11px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:color .12s,border-color .12s,background .12s}.tab-close-all:hover{color:#f87171;border-color:#f87171;background:rgba(248,113,113,.08)}.tab-item{display:flex;align-items:center;gap:0;background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:5px 5px 0 0;padding:0;white-space:nowrap;flex-shrink:0;transition:background .12s}.tab-item:hover{background:rgba(255,255,255,.06)}.tab-item.tab-active{background:var(--bg);border-color:var(--accent);border-bottom:1px solid var(--bg);margin-bottom:-1px}.tab-label{padding:5px 10px 5px 12px;font-size:12px;color:var(--muted);text-decoration:none;display:block}.tab-item.tab-active .tab-label{color:var(--accent);font-weight:600}.tab-label:hover{color:var(--text)}.tab-close{background:none;border:none;color:#475569;font-size:9px;padding:5px 8px 5px 2px;cursor:pointer;line-height:1;border-radius:3px;transition:color .1s,background .1s}.tab-close:hover{color:#f87171;background:rgba(248,113,113,.1)}.app-body{display:flex;flex:1 1;min-height:0;overflow:hidden}.sidebar{width:200px;min-width:200px;background:var(--surface);border-right:1px solid var(--border);padding:.75rem 0;overflow-y:auto;flex-shrink:0;transition:width .22s ease,min-width .22s ease,padding .22s ease,border-color .22s ease}.sidebar.sidebar-closed{width:0;min-width:0;padding:0;border-right-color:transparent;overflow:hidden}.nav-item{display:block;padding:.55rem 1.2rem;color:var(--muted);text-decoration:none;font-size:.82rem;border-left:3px solid transparent;transition:background .12s,color .12s}.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}.nav-item.active{color:var(--accent);border-left-color:var(--accent);background:rgba(56,189,248,.07)}.nav-section{font-size:.65rem;font-weight:700;color:var(--muted);text-transform:uppercase;padding:.75rem 1.2rem .25rem;letter-spacing:.08em}.content{flex:1 1;overflow-y:auto;padding:1.5rem}.sidebar-backdrop,.toggle-mobile{display:none}@media (min-width:769px) and (max-width:1024px){.sidebar{width:168px;min-width:168px}.nav-item{padding:.5rem .85rem;font-size:.78rem}.nav-section{padding:.6rem .85rem .2rem}}@media (max-width:768px){.toggle-desktop{display:none}.toggle-mobile{display:inline}.sidebar{position:fixed;top:0;left:0;height:100%;width:240px;min-width:240px;z-index:50;transform:translateX(0);transition:transform .22s ease;box-shadow:2px 0 18px rgba(0,0,0,.45)}.sidebar.sidebar-closed{width:240px;min-width:240px;padding:.75rem 0;border-right-color:var(--border);transform:translateX(-100%)}.sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40}}@media (max-width:640px){.header{padding:.6rem .9rem;gap:8px}.header-left{min-width:0;flex:1 1}.header-title{font-size:clamp(.85rem,3.6vw,1.1rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-user{display:none}}.cam-grid{display:grid;grid-gap:3px;gap:3px;background:#000;border-radius:4px;overflow:hidden}.cam-grid-1{grid-template-columns:1fr}.cam-grid-4{grid-template-columns:repeat(2,1fr)}.cam-grid-9{grid-template-columns:repeat(3,1fr)}.cam-grid-16{grid-template-columns:repeat(4,1fr)}.cam-grid-25{grid-template-columns:repeat(5,1fr)}.cam-grid-36{grid-template-columns:repeat(6,1fr)}.cam-grid-16 .cam-name-label{font-size:.56rem}.cam-grid-16 .cam-timestamp{font-size:.52rem}.cam-grid-16 .cam-code{font-size:.6rem}.cam-grid-25 .cam-name-label,.cam-grid-25 .cam-timestamp,.cam-grid-36 .cam-name-label,.cam-grid-36 .cam-timestamp{display:none}.cam-grid-25 .cam-overlay-top,.cam-grid-36 .cam-overlay-top{padding:2px 4px}.cam-grid-25 .cam-code,.cam-grid-36 .cam-code{font-size:.52rem}.cam-grid-25 .cam-rec,.cam-grid-36 .cam-rec{font-size:.48rem}.cam-grid-25 .cam-rec-dot,.cam-grid-36 .cam-rec-dot{width:4px;height:4px}.cam-tile{position:relative;background:#050d18;aspect-ratio:16/9;overflow:hidden}.cam-tile.online:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 35% 45%,rgba(0,60,30,.18) 0,transparent 65%);animation:cam-glow 7s ease-in-out infinite alternate;pointer-events:none}@keyframes cam-glow{0%{opacity:.6;transform:scale(1.04) translate(-1.5%)}to{opacity:1;transform:scale(1) translate(1.5%)}}.cam-tile.offline{filter:grayscale(1) brightness(.6)}.cam-tile.cam-empty{display:flex;align-items:center;justify-content:center;background:#0a0f18;border:1px dashed #1e293b}.cam-canvas{width:100%;height:100%;display:block;object-fit:cover}.cam-overlay-top{position:absolute;top:0;left:0;right:0;padding:4px 6px;background:linear-gradient(180deg,rgba(0,0,0,.7),transparent);display:flex;align-items:center;gap:6px;font-size:.7rem}.cam-code{color:#e2e8f0;font-weight:700;font-family:monospace}.cam-rec{color:#f87171;font-size:.65rem;font-weight:700;display:flex;align-items:center;gap:3px}.cam-rec-dot{width:6px;height:6px;border-radius:50%;background:#f87171;animation:blink 1.2s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.2}}.cam-overlay-bottom{position:absolute;bottom:0;left:0;right:0;padding:3px 6px;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);display:flex;justify-content:space-between;align-items:flex-end}.cam-name-label{color:#94a3b8;font-size:.65rem}.cam-timestamp{color:#4ade80;font-size:.62rem;font-family:monospace}.cam-expand-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);color:transparent;font-size:.75rem;font-weight:600;transition:background .15s,color .15s}.cam-tile:hover .cam-expand-hint{background:rgba(0,0,0,.35);color:rgba(255,255,255,.8)}.btn-filter{padding:.3rem .8rem;border-radius:.25rem;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:.8rem;transition:background .12s,color .12s}.btn-filter.active,.btn-filter:hover{background:var(--accent);color:#000;border-color:var(--accent)}@keyframes toastIn{0%{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}.leaflet-container{background:#0f172a!important;font-family:Segoe UI,sans-serif}.leaflet-popup-content-wrapper{color:var(--text)!important;border:1px solid var(--border)!important;border-radius:6px!important;box-shadow:0 4px 20px rgba(0,0,0,.5)!important}.leaflet-control-zoom a,.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--surface)!important}.leaflet-control-zoom a{color:var(--text)!important;border-color:var(--border)!important}.leaflet-control-attribution{background:rgba(15,23,42,.8)!important;color:var(--muted)!important}.leaflet-control-attribution a{color:var(--accent)!important}