:root{--menu-bg: #fafafa;--tab-bg: #eaeaea;--tab-active: #ffffff;--toolbar-bg: #eeeeee;--panel: #f5f5f5;--panel-alt: #f0f0f0;--border: #d0d0d0;--border-dark: #bdbdbd;--text: #2c2c2c;--muted: #666666;--icon: #4a4a4a;--accent: #E31C23;--blue: #0b6bcb;--blue-soft: #e3f0fb;--good: #2e7d32;--danger: #c62828;--warn: #ed6c02;--stage: #e8e8e8;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Variable", "Helvetica Neue", Arial, "Noto Sans", "PingFang HK", "Microsoft JhengHei", sans-serif;--fs-ui: 13px;--fs-tool: 11px;--fs-status: 11px;--global-h: 48px}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--panel);color:var(--text);font-family:var(--font);font-size:var(--fs-ui);line-height:1.35;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}.app{display:flex;flex-direction:column;height:100%;min-height:0}.demo-banner{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:10px;height:28px;padding:0 12px;background:#fff3cd;color:#664d03;border-bottom:1px solid #e6d89a;font-size:12px;font-weight:600;letter-spacing:.02em}.demo-banner .dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}.topbar{display:flex;align-items:center;gap:8px;height:var(--global-h);padding:0 10px;background:var(--toolbar-bg);border-bottom:1px solid var(--border);flex-shrink:0}.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}.brand-mark{width:22px;height:22px;border-radius:3px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}.topbar .sep{width:1px;height:28px;background:var(--border);margin:0 6px}.topbar .spacer{flex:1}.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:3px;border:1px solid var(--border);background:#fff;font-size:var(--fs-status);color:var(--muted)}.badge.on{border-color:#a5d6a7;background:#e8f5e9;color:var(--good)}.badge.off{border-color:#ef9a9a;background:#ffebee;color:var(--danger)}.badge.warn{border-color:#ffcc80;background:#fff3e0;color:var(--warn)}.badge.lock{border-color:#bdbdbd;background:#f5f5f5;color:var(--muted)}.nav{display:flex;align-items:stretch;gap:2px;height:36px;padding:0 6px;background:var(--tab-bg);border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto}.nav-btn{background:transparent;border:none;padding:0 14px;color:#3d3d3d;font-size:13px;font-weight:600;border-radius:4px 4px 0 0;white-space:nowrap}.nav-btn:hover{background:#e0e0e0}.nav-btn.active{background:var(--tab-active);border:1px solid var(--border);border-bottom:none;margin-bottom:-1px;color:var(--text)}.main{flex:1;min-height:0;overflow:auto;background:var(--panel);padding:12px}.view{max-width:1200px;margin:0 auto}.view-title{font-size:16px;font-weight:700;margin:0 0 10px}.grid{display:grid;gap:10px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width: 900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.card{background:#fff;border:1px solid var(--border);border-radius:4px;padding:12px}.card h3{margin:0 0 8px;font-size:13px;font-weight:700}.card .meta{color:var(--muted);font-size:11px;margin-bottom:8px}.stat-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px solid #f0f0f0}.stat-row:last-child{border-bottom:none}.stat-label{color:var(--muted)}.stat-value{font-weight:700;font-variant-numeric:tabular-nums}.stat-value.big{font-size:22px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--border-dark);border-radius:3px;background:#fff;color:var(--text)}.btn:hover:not(:disabled){background:#f0f0f0}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.primary:hover:not(:disabled){filter:brightness(.95)}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}.btn.sm{height:26px;padding:0 8px;font-size:12px}.btn-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #f0f0f0}.toggle-row:last-child{border-bottom:none}.toggle-row .label{font-weight:600}.toggle-row .hint{display:block;color:var(--muted);font-size:11px;font-weight:400}.lock-reason{margin-top:6px;padding:6px 8px;background:#fff3e0;border:1px solid #ffcc80;border-radius:3px;color:#e65100;font-size:11px}.hw-lock{margin-top:6px;padding:6px 8px;background:#f5f5f5;border:1px solid var(--border);border-radius:3px;color:var(--muted);font-size:11px}.mode-pills{display:flex;flex-wrap:wrap;gap:6px}.mode-pill{border:1px solid var(--border-dark);background:#fff;border-radius:16px;padding:6px 12px;font-weight:600}.mode-pill.active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}.mode-pill.typhoon.active{background:#ffebee;border-color:var(--danger);color:var(--danger)}.alert-list{list-style:none;margin:0;padding:0}.alert-list li{display:flex;gap:8px;align-items:flex-start;padding:8px;border-bottom:1px solid #f0f0f0}.alert-list li:last-child{border-bottom:none}.alert-sev{flex-shrink:0;font-size:10px;font-weight:800;padding:2px 6px;border-radius:2px;color:#fff}.alert-sev.crit{background:var(--danger)}.alert-sev.warn{background:var(--warn)}.alert-sev.info{background:var(--blue)}.chart-bars{display:flex;align-items:flex-end;gap:3px;height:72px;margin-top:8px}.chart-bars .bar{flex:1;background:var(--blue);border-radius:2px 2px 0 0;min-width:4px;opacity:.85}.scene-wrap{position:relative;height:min(520px,70vh);background:var(--stage);border:1px solid var(--border);border-radius:4px;overflow:hidden}.scene-wrap canvas{display:block;width:100%!important;height:100%!important}.hotspot-panel{position:absolute;right:10px;top:10px;width:260px;max-height:calc(100% - 20px);overflow:auto;background:#fff;border:1px solid var(--border);border-radius:4px;padding:10px;box-shadow:0 2px 8px #0000001f}.hotspot-pins{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.pin{position:absolute;pointer-events:auto;transform:translate(-50%,-100%);background:#fff;border:1px solid var(--blue);color:var(--blue);border-radius:12px;padding:2px 8px;font-size:11px;font-weight:700;cursor:pointer;box-shadow:0 1px 3px #0003}.pin.active{background:var(--blue);color:#fff}.pin.locked{border-color:var(--muted);color:var(--muted)}.hs-label-layer{z-index:2}.hs-label{position:relative;box-sizing:border-box;width:52px;height:52px;padding:4px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#fff;user-select:none;-webkit-user-select:none;cursor:pointer;border:2px solid rgba(255,255,255,.95);box-shadow:0 2px 6px #00000059;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease,background .12s ease;opacity:.95;word-break:break-all;overflow:hidden}.hs-label--on{background:#22a06b}.hs-label--off{background:#e03131}.hs-label--fault{background:#8b1a1a}.hs-label--fault:after{content:"✕";position:absolute;top:-2px;right:-2px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;line-height:1;color:#fff;background:#ff6b6b;border:1.5px solid #fff;pointer-events:none;box-shadow:0 1px 3px #00000059}.hs-label__text{display:block;max-width:100%;z-index:1}.hs-label--selected{opacity:1;box-shadow:0 0 0 3px #ffd43b,0 3px 10px #0006;transform:scale(1.12);z-index:3}.slider-row{display:flex;align-items:center;gap:8px;margin-top:6px}.slider-row input[type=range]{flex:1}.pct{font-variant-numeric:tabular-nums;width:42px;text-align:right;font-weight:700}.log-box{max-height:160px;overflow:auto;background:#fafafa;border:1px solid var(--border);border-radius:3px;padding:8px;font-size:11px;font-family:ui-monospace,Menlo,Consolas,monospace}.log-box div{padding:2px 0;border-bottom:1px solid #eee}.log-box div:last-child{border-bottom:none}.status-footer{flex-shrink:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;height:auto;min-height:26px;padding:4px 10px;background:var(--menu-bg);border-top:1px solid var(--border);font-size:var(--fs-status);color:var(--muted)}.viewer-mask .controls-only button,.viewer-mask .controls-only input,.viewer-mask .controls-only select,.viewer-mask .controls-only .mode-pill{pointer-events:none;opacity:.45}.home-all{padding:12px 16px 24px}.home-stack{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:18px}.home-section{scroll-margin-top:12px}.home-section>.view{max-width:none;margin:0}.home-section .view-title{padding-bottom:6px;border-bottom:1px solid var(--border);margin-bottom:12px}.home-all .scene-wrap{height:420px;max-height:50vh}@media (min-width: 1200px){.home-all .scene-wrap{height:480px;max-height:56vh}}.house-nav{display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:36px;padding:4px 6px 0;gap:4px;overflow:visible}.house-nav-tools{display:flex;align-items:center;gap:6px;flex-shrink:0;padding:0 2px 2px}.house-jump{flex:1;min-width:0;max-width:220px;height:26px;padding:0 8px;border:1px solid var(--border-dark);border-radius:3px;background:#fff;font-size:12px}.house-tabs-wrap{display:flex;align-items:stretch;gap:2px;min-height:32px}.house-tabs{display:flex;align-items:stretch;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.house-tab{min-width:56px;max-width:120px;overflow:hidden;text-overflow:ellipsis}.house-add{font-size:16px;font-weight:700;color:var(--blue);min-width:36px}.house-more{min-width:28px;padding:0 8px;color:var(--muted)}.cam-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.cam-card h3{margin:0}.cam-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.cam-stage{position:relative;aspect-ratio:16 / 10;border-radius:3px;border:1px solid var(--border);background:#1a1a1a;overflow:hidden;margin-bottom:8px}.cam-stage.offline{background:repeating-linear-gradient(-45deg,#ececec,#ececec 8px,#e2e2e2 8px,#e2e2e2 16px);display:flex;align-items:center;justify-content:center}.cam-offline-inner{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:600;text-align:center;padding:12px}.cam-icon{font-size:28px;opacity:.45;line-height:1}.cam-live-stub{width:100%;height:100%;background:linear-gradient(180deg,#2a2a2a,#111)}@media (max-width: 899px){.house-jump{max-width:none}.home-all .scene-wrap{height:min(420px,55vh)}.cam-grid{grid-template-columns:1fr}}