:root{--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--primary: #3b82f6;--primary-dark: #2563eb;--primary-light: #60a5fa;--primary-soft: rgba(59, 130, 246, .12);--accent: #6366f1;--bg-dark: #0b1220;--bg-sidebar: #101a33;--bg-page: #f1f5f9;--bg-card: #fff;--surface-muted: #f8fafc;--text-light: #fff;--text-dark: #0f172a;--text-muted: #64748b;--border: rgba(15, 23, 42, .08);--border-strong: rgba(15, 23, 42, .12);--border-dark: rgba(255,255,255,.1);--success: #12b76a;--danger: #f04438;--warn: #f59e0b;--radius: 12px;--shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 28px rgba(15, 23, 42, .07);--topbar-h: 48px}html.layout-phone,html.layout-phone body{height:100%;min-height:0;overflow:hidden}html.layout-phone .app{min-height:0}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:var(--text-dark);background:var(--bg-page);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}.app{height:100%;display:flex;flex-direction:column;min-height:0}.topbar{height:var(--topbar-h);display:flex;align-items:stretch;background:linear-gradient(135deg,#3b82f6 0%,var(--primary-dark) 42%,#0f172a 100%);color:var(--text-light);box-shadow:0 4px 24px #0f172a38,inset 0 1px #ffffff0f;position:relative;z-index:100}.top-left{display:flex;align-items:center;gap:10px;padding:0 16px;min-width:180px;white-space:nowrap;font-weight:700;font-size:15px;letter-spacing:.5px}.top-left a{color:inherit}.top-center{display:flex;align-items:stretch;flex:1;gap:0}.nav-item{display:flex;align-items:center;padding:0 16px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;gap:6px;font-size:13px;color:#ffffffd9;transition:background .15s,color .15s;white-space:nowrap}.nav-item:hover{background:#ffffff1f;color:#fff}.nav-item[aria-current=page]{background:#ffffff2e;color:#fff;font-weight:600}.nav-item a{color:inherit}.dropdown{display:block;position:absolute;top:var(--topbar-h);left:0;background:var(--bg-card);border-radius:0 0 var(--radius) var(--radius);box-shadow:0 4px 16px #00000026;min-width:160px;z-index:200;overflow:hidden;visibility:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility .22s}.dropdown a{display:block;padding:10px 16px;color:var(--text-dark);transition:background .12s;font-size:13px}.dropdown a:hover{background:var(--primary-soft);color:var(--primary-dark)}.nav-item.open .dropdown{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}@media(prefers-reduced-motion:reduce){.dropdown{transition:opacity .12s ease,visibility .12s;transform:none}.nav-item.open .dropdown{transform:none}}.top-right{display:flex;align-items:center;gap:10px;padding:0 16px;white-space:nowrap;margin-left:auto;font-size:13px;color:#ffffffe6}.top-right-sep{width:1px;height:16px;background:#ffffff40;flex-shrink:0}.nav-item--right{height:auto;padding:4px 10px;border-radius:4px;font-size:13px}.nav-item--right .dropdown{right:0;left:auto;top:100%}.topbar .topbar-user.topbar-user--guest-login{cursor:pointer;border-radius:4px;padding:2px 6px;margin:-2px -6px;outline-offset:2px}.topbar .topbar-user.topbar-user--guest-login:hover{background:#ffffff24}.topbar .topbar-user.topbar-user--guest-login .topbar-username{font-weight:600;letter-spacing:.02em}.topbar .topbar-user.topbar-user--session{cursor:pointer;display:inline-flex;align-items:center;gap:3px;border-radius:4px;padding:2px 6px;margin:-2px -6px;outline-offset:2px}.topbar .topbar-user.topbar-user--session:hover{background:#ffffff24}.topbar .topbar-user.account-trigger-open{background:#ffffff2e}.account-trigger-chevron{flex-shrink:0;font-size:10px;line-height:1;opacity:.9}.account-menu-panel{min-width:220px;max-width:min(340px,92vw);padding:6px;border-radius:10px;border:1px solid rgba(226,232,240,.95);background:#fffffffa;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 20px 50px #0f172a24,0 0 0 1px #ffffff80 inset;color:var(--text-dark);box-sizing:border-box}.account-menu-panel[hidden],.account-menu-panel[hidden=hidden]{display:none!important}.account-menu-panel:not([hidden]){opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease}.account-menu-panel:not([hidden]).account-menu--open{opacity:1;transform:translateY(0)}@media(prefers-reduced-motion:reduce){.account-menu-panel:not([hidden]){transition:opacity .12s ease;transform:none}.account-menu-panel:not([hidden]).account-menu--open{transform:none}}.account-menu-header{font-weight:700;font-size:13px;padding:8px 10px 4px;word-break:break-word}.account-menu-sub{font-size:11px;color:var(--text-muted);padding:0 10px 8px;border-bottom:1px solid rgba(226,232,240,.9)}.account-menu-row{display:block;width:100%;box-sizing:border-box;text-align:left;padding:10px;margin:0;border:0;border-radius:8px;background:transparent;color:inherit;font-size:13px;cursor:pointer;text-decoration:none}a.account-menu-row{color:inherit}.account-menu-row:hover{background:var(--primary-soft);color:var(--primary-dark)}.account-menu-danger{color:#d92d20}.main{flex:1;min-height:0;display:flex;flex-direction:column}.main-grid{flex:1;min-height:0;display:grid;grid-template-columns:260px 1fr;grid-template-rows:1fr auto}.main-grid>.sidebar{grid-row:1 / -1}.breadcrumb{padding:8px 16px;display:flex;align-items:center;gap:8px;font-size:13px;background:var(--bg-card);border-bottom:1px solid var(--border)}.breadcrumb strong{color:var(--primary)}.page{flex:1;min-height:0;overflow:auto;padding:16px;background:var(--bg-page)}.sidebar{background:var(--bg-sidebar);color:#ffffffe6;display:flex;flex-direction:column;min-height:0;border-right:1px solid rgba(255,255,255,.06)}.sidebar-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-tab{flex:1;padding:10px 0;text-align:center;font-size:13px;cursor:pointer;color:#fff9;background:transparent;border:0;border-bottom:2px solid transparent;transition:all .15s}.sidebar-tab:hover{color:#ffffffd9}.sidebar-tab.active{color:#fff;border-bottom-color:var(--primary-light)}.sidebar-search{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08)}.sidebar-search input{flex:1;padding:6px 10px;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);background:#ffffff14;color:#fff;font-size:12px;outline:none}.sidebar-search input::placeholder{color:#fff6}.sidebar-search input:focus{border-color:var(--primary-light)}.sidebar-search button{padding:6px 12px;border:0;border-radius:var(--radius);background:var(--primary);color:#fff;cursor:pointer;font-size:12px}.sidebar-auth{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);display:grid;gap:6px;font-size:12px}.sidebar-auth .row{display:grid;grid-template-columns:60px 1fr;gap:6px;align-items:center}.sidebar-auth input{width:100%;padding:4px 8px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:#ffffff14;color:#fff;font-size:12px}.sidebar-auth .btnline{display:flex;gap:6px;flex-wrap:wrap}.sidebar-auth .hint{color:#ffffff80;font-size:11px;line-height:1.4}.sidebar-auth .hint a{color:var(--primary-light);text-decoration:underline}.sidebar-body{flex:1;overflow:auto;padding:4px 0}.tree,.tree ul{list-style:none}.tree .tree-group-list{padding-left:16px}.tree-item{margin:0}.tree-row{display:flex;align-items:center;gap:6px;padding:7px 10px;cursor:pointer;transition:background .12s;border-radius:4px;margin:1px 6px;font-size:13px}.tree-row:hover{background:#ffffff14}.tree-row.selected{background:var(--primary);color:#fff}.tree-caret{width:16px;height:16px;border:0;padding:0;background:transparent;cursor:pointer;display:grid;place-items:center;flex:0 0 auto;color:#ffffff80;font-size:10px}.tree-caret:before{content:"▶"}.tree-group[aria-expanded=true]>.tree-row .tree-caret:before{content:"▼"}.tree-caret.placeholder{cursor:default}.tree-caret.placeholder:before{content:""}.tree-main{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}.tree-icon{width:16px;text-align:center;flex:0 0 auto;font-size:12px}.tree-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}.tree-count{color:var(--success);font-variant-numeric:tabular-nums;font-size:12px}.tree-row.selected .tree-count{color:#ffffffe6}.tree-fav{border:0;background:transparent;cursor:pointer;font-size:13px;line-height:1;padding:2px;color:#fff6}.tree-fav[aria-pressed=true]{color:#ffd54f}.tree-row.selected .tree-fav{color:#fffc}.tree-group[aria-expanded=false]>.tree-group-list{display:none}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot-online{background:var(--success)}.dot-offline{background:var(--danger)}.video-area{flex:1;display:flex;flex-direction:column;min-height:0;background:#070b14}.video-tabs{display:flex;background:#0f172a;border-bottom:1px solid rgba(255,255,255,.06)}.video-tab{padding:8px 20px;cursor:pointer;color:#fff9;font-size:13px;border:0;background:transparent;border-bottom:2px solid transparent;transition:all .15s}.video-tab:hover{color:#ffffffd9}.video-tab.active{color:#fff;border-bottom-color:var(--primary-light);background:#ffffff0a}.video-container{flex:1;min-height:0;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;background:#101a33;gap:0;overflow:hidden}.video-cell{position:relative;background:#000;overflow:hidden;cursor:pointer;min-width:0;min-height:0;outline:none}.video-cell:after{content:"";display:block;position:absolute;inset:0;pointer-events:none;z-index:11;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .15s}.video-cell:hover:after{box-shadow:inset 0 0 0 2px #60a5fa52}.video-cell.selected:after{box-shadow:inset 0 0 0 2px var(--primary-light)}.video-cell.selected{z-index:1}.video-cell video{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;z-index:0}.video-cell .cell-sdk-mount{position:absolute;inset:0;z-index:1}.cell-last-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;pointer-events:none;z-index:2}.cell-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ffffff26;font-size:28px;font-weight:700;-webkit-user-select:none;user-select:none;pointer-events:none}.cell-placeholder-hero{flex-direction:column;color:#ffffff59;font-size:14px;font-weight:400;gap:8px}.cell-placeholder-hero .vp-icon{font-size:48px;opacity:.5}.cell-osd{position:absolute;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10px;color:#ffffffd9;background:#00000080;padding:2px 6px;border-radius:3px;pointer-events:none;z-index:3;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}.cell-osd:empty{display:none}.cell-osd-tl{top:4px;left:4px}.cell-osd-br{bottom:4px;left:4px}.cell-offline-overlay{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;background:#000000a6;color:#ffffffb3;font-size:14px;gap:8px}.cell-offline-overlay.visible{display:flex}.cell-offline-overlay img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.4}.cell-offline-overlay .offline-badge{position:relative;z-index:1;background:#000000b3;padding:6px 16px;border-radius:4px;font-weight:600;letter-spacing:1px}.cell-loading-overlay,.cell-error-overlay{position:absolute;inset:0;z-index:12;display:none;align-items:center;justify-content:center;flex-direction:column;color:#dbeafef2;background:#0000008c;pointer-events:none;text-align:center;padding:8px;box-sizing:border-box}.video-cell.is-loading .cell-loading-overlay{display:flex}.video-cell.is-error .cell-error-overlay{display:flex;pointer-events:auto}.cell-loading-inner,.cell-error-inner{display:flex;flex-direction:column;align-items:center;max-width:92%}.cell-loading-spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.22);border-top-color:#38bdf8;border-radius:50%;animation:apex-cell-spin .85s linear infinite;margin-bottom:10px}@keyframes apex-cell-spin{to{transform:rotate(360deg)}}.cell-loading-text{font-size:13px;line-height:1.35;opacity:.95}.cell-error-text{font-size:13px;margin-bottom:4px;word-break:break-word}.cell-error-retry{margin-top:10px;pointer-events:auto}.ch-offline .tree-label{opacity:.55}.rec-seg.rec-type-motion{background:var(--warning, #f59e0b)!important}.rec-seg.rec-type-alarm{background:var(--danger, #ef4444)!important}.video-toolbar{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#0f172a;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap}.video-toolbar button,.video-toolbar select{padding:4px 10px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:#ffffff0f;color:#ffffffd9;cursor:pointer;font-size:12px;transition:background .12s}.video-toolbar button:hover{background:#ffffff1f}.video-toolbar button.active{background:var(--primary);border-color:var(--primary);color:#fff}.video-toolbar button:disabled{opacity:.4;cursor:not-allowed}.video-toolbar .spacer{flex:1}.video-toolbar .status-text{font-size:11px;color:#ffffff73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px}.video-toolbar .status-text .channel-loading-dots span{display:inline-block;animation:channel-loading-dot-wave 1.05s infinite ease-in-out both}.video-toolbar .status-text .channel-loading-dots span:nth-child(1){animation-delay:0s}.video-toolbar .status-text .channel-loading-dots span:nth-child(2){animation-delay:.18s}.video-toolbar .status-text .channel-loading-dots span:nth-child(3){animation-delay:.36s}@keyframes channel-loading-dot-wave{0%,80%,to{opacity:.2}40%{opacity:1}}.osd{position:absolute;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px;color:#ffffffe6;background:#00000073;padding:4px 8px;border-radius:4px;pointer-events:none;z-index:3}.osd-tl{top:8px;left:8px}.osd-br{bottom:8px;right:8px}.ptz-section{border-top:1px solid rgba(255,255,255,.1);background:#00000026;flex-shrink:0}.ptz-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;cursor:pointer;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;font-size:13px;color:#fffc}.ptz-header:hover{background:#ffffff0a}.ptz-header .ptz-chevron{display:inline-block;width:16px;height:16px;transition:transform .2s;flex-shrink:0}.ptz-header .ptz-chevron:after{content:"▼";display:block;font-size:10px;line-height:16px;text-align:center;color:#fff6}.ptz-section.collapsed .ptz-chevron{transform:rotate(180deg)}.ptz-section.collapsed .ptz-body{display:none}.ptz-body{padding:8px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:20px}.ptz-joystick{width:130px;height:130px;position:relative;border-radius:50%;background:radial-gradient(circle,#ffffff0a 30%,#ffffff14 70%);border:2px solid rgba(255,255,255,.12)}.ptz-joystick .ptz-quad{position:absolute;border:0;background:transparent;color:#ffffffb3;cursor:pointer;display:grid;place-items:center;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;padding:0;z-index:2}.ptz-joystick .ptz-quad:hover{background:#3b82f67a;color:#fff}.ptz-joystick .ptz-quad:active{background:var(--primary);color:#fff}.ptz-quad[data-ptz=up]{top:0;left:50%;transform:translate(-50%);width:50px;height:42px;border-radius:50px 50px 6px 6px}.ptz-quad[data-ptz=down]{bottom:0;left:50%;transform:translate(-50%);width:50px;height:42px;border-radius:6px 6px 50px 50px}.ptz-quad[data-ptz=left]{left:0;top:50%;transform:translateY(-50%);width:42px;height:50px;border-radius:50px 6px 6px 50px}.ptz-quad[data-ptz=right]{right:0;top:50%;transform:translateY(-50%);width:42px;height:50px;border-radius:6px 50px 50px 6px}.ptz-joystick .ptz-quad svg{width:14px;height:14px;fill:currentColor}.ptz-joystick .ptz-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:#ffffff0f;display:grid;place-items:center;cursor:pointer;pointer-events:auto;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;z-index:3;transition:background .15s,border-color .15s}.ptz-joystick .ptz-center:hover{background:#ffffff1f;border-color:#ffffff59}.ptz-joystick .ptz-center:active{background:#ffffff2e}.ptz-joystick .ptz-center svg{width:18px;height:18px;fill:#ffffff80}.ptz-speed{display:flex;align-items:center;gap:8px;width:100%;padding:0 4px}.ptz-speed .label{font-size:11px;color:#fff6;white-space:nowrap}.ptz-speed input[type=range]{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:#ffffff26;border-radius:2px;outline:none}.ptz-speed input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--primary-light);cursor:pointer;border:2px solid #fff}.ptz-speed input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--primary-light);cursor:pointer;border:2px solid #fff}.ptz-speed input[type=range]::-moz-range-track{height:4px;background:#ffffff26;border-radius:2px;border:0}.ptz-txt-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}.ptz-txt-btn{padding:5px 0;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:#ffffff0a;color:#ffffffb3;cursor:pointer;font-size:11px;text-align:center;white-space:nowrap;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background .12s,color .12s}.ptz-txt-btn:hover{background:#ffffff1a;color:#fff}.ptz-txt-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.ptz-more-row{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;font-size:11px;color:#ffffff59;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;padding:2px 0}.ptz-more-row:hover{color:#fff9}.ptz-more-arrow{display:inline-block;width:14px;height:14px;transition:transform .2s;flex-shrink:0}.ptz-more-arrow:after{content:"▲";display:block;font-size:8px;line-height:14px;text-align:center;color:inherit}.ptz-more-row.expanded .ptz-more-arrow{transform:rotate(180deg)}.ptz-more-panel{display:none;width:100%}.ptz-more-panel.visible{display:block}.ptz-more-empty{font-size:11px;color:#ffffff40;text-align:center;padding:6px 0}.ptz-more-empty-clickable{cursor:pointer;color:#fff6}.ptz-more-empty-clickable:hover{color:#fff9}.ptz-empty-plus-hint{color:var(--primary-light, #5b9dff);font-weight:600;padding:0 2px}.ptz-preset-header{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#ffffff85}.ptz-preset-header-actions{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}.ptz-preset-add,.ptz-preset-clear,.ptz-preset-refresh{flex-shrink:0;min-width:28px;height:24px;padding:0 6px;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:#ffffff0d;color:#ffffffd1;font-size:16px;line-height:1;cursor:pointer;vertical-align:middle;transition:background .15s,border-color .15s}.ptz-preset-clear{min-width:auto;padding:0 8px;font-size:11px}.ptz-preset-add{font-weight:600}.ptz-preset-add:hover,.ptz-preset-clear:hover,.ptz-preset-refresh:hover{background:#ffffff1a;border-color:var(--primary, #3b82f6);color:#fff}.ptz-preset-add:active,.ptz-preset-clear:active,.ptz-preset-refresh:active{background:#ffffff0f}.ptz-preset-list .ptz-preset-single{display:flex;align-items:center;justify-content:center;margin-top:4px;padding:10px 12px;border-radius:4px;border:1px solid rgba(255,255,255,.14);background:#ffffff0e;color:#ffffffeb;font-size:12px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}.ptz-preset-list .ptz-preset-single:hover{border-color:var(--primary, #3b82f6);background:#ffffff1a}.sidebar-pb{padding:12px 10px 0;border-bottom:1px solid rgba(255,255,255,.08)}.pb-field-group{margin-bottom:10px}.pb-field-label{display:block;font-size:12px;color:#ffffff8c;margin-bottom:5px}.pb-field-input-wrap{display:flex;align-items:center}.pb-input{width:100%;padding:6px 8px;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);background:#ffffff0f;color:#ffffffd9;font-size:12px;outline:none}input.pb-input{color-scheme:dark}select.pb-input{color-scheme:light;background:#fff;color:#1b2838;border-color:#ffffff59}select.pb-input option{background-color:#fff;color:#1b2838}.pb-input:focus{border-color:var(--primary-light)}.pb-time-range{gap:6px}.pb-time-range .pb-input{flex:1;min-width:0}.pb-time-sep{color:#ffffff59;font-size:12px;flex-shrink:0}.pb-field-heading{font-size:13px;color:#fffc;padding:6px 0 8px;font-weight:500}.playback-controls{background:#000;border-top:1px solid rgba(148,163,184,.2);display:none;flex-shrink:0}.playback-controls.visible{display:block}.pb-bar{display:flex;align-items:center;height:36px;padding:0 8px 6px}.pb-bar-group{display:flex;align-items:center;gap:2px}.pb-bar-spacer{flex:1}.pb-bar-btn{width:28px;height:28px;border:0;border-radius:4px;background:transparent;color:#ffffff8c;cursor:pointer;display:grid;place-items:center;touch-action:manipulation;transition:color .15s,background .15s;padding:0}.pb-bar-btn:hover{color:#fff;background:#ffffff1a}.pb-bar-btn.active{color:var(--primary-light)}.pb-play-btn{width:32px;height:32px;border-radius:50%;background:#ffffff14;color:#fffc;margin:0 4px}.pb-play-btn:hover{background:#ffffff26;color:#fff}.pb-play-btn.playing svg path{d:path("M6 19h4V5H6v14zm8-14v14h4V5h-4z")}.pb-bar-time{font-size:13px;color:#ffffffbf;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;padding:0 12px;white-space:nowrap}.pb-bar-select{padding:3px 6px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:#fff;color:#1b2838;color-scheme:light;font-size:12px;cursor:pointer;outline:none;margin-left:4px}.pb-bar-select option{background-color:#fff;color:#1b2838}.pb-bar-sep{width:1px;height:16px;background:#fff3;margin:0 4px}.bb-timeline{display:flex;flex-direction:column;min-width:0;-webkit-user-select:none;user-select:none;width:100%}.bb-tl-viewport{position:relative;min-width:0}.bb-tl-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;background:#0d1117}.bb-tl-scroll::-webkit-scrollbar{display:none}.bb-tl-scroll.tl-dragging{cursor:grabbing}.bb-tl-inner{position:relative;height:36px;background:#0d1117;margin:0 50%}.bb-tl-records{position:absolute;inset:0;z-index:1;pointer-events:auto}.bb-tl-records .rec-seg{position:absolute;top:7px;bottom:14px;background:#3b82f680;border-radius:1px;min-width:1px;pointer-events:auto;cursor:pointer}.bb-tl-center-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#f44336;transform:translate(-1px);z-index:3;pointer-events:none}.bb-tl-hover{position:absolute;top:-2px;padding:2px 6px;background:#000000d9;color:#ffffffe6;font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;border-radius:3px;pointer-events:none;display:none;transform:translate(-50%) translateY(-100%);white-space:nowrap;z-index:4}.bb-tl-labels{position:absolute;inset:0;z-index:2;pointer-events:none}.bb-tl-labels .tl-label{position:absolute;bottom:2px;transform:translate(-50%);white-space:nowrap;font-size:10px;color:#ffffff8c;line-height:1}.bb-tl-labels .tl-tick{position:absolute;top:0;width:1px;height:6px;background:#ffffff4d;transform:translate(-.5px)}.bb-tl-labels .tl-tick-minor{position:absolute;top:0;width:1px;height:3px;background:#ffffff26;transform:translate(-.5px)}.bb-tl-zoom{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:2px 8px;background:#0a0e14;flex-shrink:0}.bb-tl-zoom-btn{width:22px;height:18px;border:1px solid rgba(255,255,255,.15);border-radius:3px;background:#ffffff0f;color:#fff9;cursor:pointer;display:grid;place-items:center;font-size:14px;line-height:1;padding:0;transition:background .12s,color .12s}.bb-tl-zoom-btn:hover{background:#ffffff1f;color:#fff}.bb-tl-zoom-btn:disabled{opacity:.3;cursor:not-allowed}.app-bottombar.pb-mode{height:auto;min-height:36px;flex-direction:column;align-items:stretch;border-top:none}.info-panel{background:var(--bg-card);border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0;overflow:auto}.info-section{padding:12px;border-bottom:1px solid var(--border)}.info-section-title{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.card-hd{padding:12px 16px;font-weight:600;font-size:14px;border-bottom:1px solid var(--border);background:var(--surface-muted)}.card-bd{padding:16px;display:grid;gap:14px}.form-row{display:grid;grid-template-columns:100px 1fr;gap:10px;align-items:center}.form-row label{font-size:13px;white-space:nowrap;color:var(--text-muted)}.form-row input,.form-row select{width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:var(--radius);font-size:13px;outline:none;transition:border-color .15s}.form-row input:focus,.form-row select:focus{border-color:var(--primary)}body.page-base-config .form-row{align-items:start}body.page-base-config .form-help{margin:0 0 6px;font-size:12px;line-height:1.5;color:var(--text-muted)}body.page-base-config .form-help code{font-size:11px}.password-field-wrap{display:flex;align-items:stretch;min-width:0;border:1px solid #cbd5e1;border-radius:var(--radius);overflow:hidden;transition:border-color .15s}.password-field-wrap:focus-within{border-color:var(--primary)}.password-field-wrap input{flex:1;min-width:0;border:none!important;border-radius:0!important;box-shadow:none!important}.password-toggle{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:40px;padding:0;border:none;background:#0000000a;color:var(--text-muted);cursor:pointer;transition:color .15s,background .15s}.password-toggle:hover{color:var(--text-main, #24292f);background:#00000012}.password-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}.password-toggle-icon[hidden]{display:none}.btn-row{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}.btn{padding:8px 16px;border:1px solid #cbd5e1;border-radius:var(--radius);background:var(--bg-card);cursor:pointer;font-size:13px;transition:all .15s}.btn:hover{background:#f1f5f9}.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-primary:hover{background:var(--primary-dark);filter:brightness(1.03)}.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}.btn-logout-soft{font-size:12px;border-style:dashed;border-color:#fecdc9;color:#b42318;background:#fffdfb}.toolbar{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar-left{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.toolbar-right{margin-left:auto;display:flex;gap:6px;align-items:center}.toolbar button{padding:6px 12px;border:1px solid #cbd5e1;border-radius:var(--radius);background:var(--bg-card);cursor:pointer;font-size:12px}.toolbar button:hover{background:var(--primary-soft);color:var(--primary-dark)}.toolbar button.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}.toolbar button.btn-primary:hover{background:var(--primary-dark);color:#fff;border-color:var(--primary-dark);filter:brightness(1.05)}.toolbar input,.toolbar select{padding:6px 10px;border:1px solid #cbd5e1;border-radius:var(--radius);font-size:12px;outline:none}.table-wrap{margin-top:12px;background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto}table{width:100%;border-collapse:collapse;min-width:900px}thead th{position:sticky;top:0;background:var(--surface-muted);border-bottom:1px solid var(--border);padding:10px 12px;text-align:left;font-size:12px;font-weight:600;color:var(--text-muted);white-space:nowrap}tbody td{border-top:1px solid var(--border);padding:10px 12px;font-size:13px;vertical-align:middle}tbody tr:hover{background:#f1f5f9}.status-online{color:var(--success);font-weight:600}.status-offline{color:var(--text-muted)}.ops{display:flex;gap:4px;align-items:center}.ops button{padding:4px 10px;border:1px solid #cbd5e1;border-radius:4px;background:transparent;cursor:pointer;font-size:12px;color:var(--primary)}.ops button:hover{background:var(--primary-soft)}.ops button.danger{color:var(--danger)}.ops button.danger:hover{background:#ffebee}.pager{margin-top:12px;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);font-size:13px}.pager .left{display:flex;gap:10px;align-items:center}.pager .right{display:flex;gap:6px;align-items:center}.pager button{padding:4px 10px;border:1px solid #cbd5e1;border-radius:4px;background:var(--bg-card);cursor:pointer;font-size:12px}.pager button:hover{background:var(--primary-soft)}.pager button:disabled{opacity:.4;cursor:not-allowed}.pager select{padding:4px 8px;border:1px solid #cbd5e1;border-radius:4px;font-size:12px}dialog{border:0;border-radius:var(--radius);box-shadow:0 8px 32px #0003;padding:0;width:min(560px,calc(100% - 32px));background:var(--bg-card);color:var(--text-dark)}dialog::backdrop{background:#0f172a6b}.dlg-hd{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;font-weight:600;border-bottom:1px solid var(--border)}.dlg-hd button{border:0;background:transparent;cursor:pointer;font-size:18px;color:var(--text-muted);padding:4px}.dlg-bd{padding:16px}.form-grid{display:grid;grid-template-columns:100px 1fr;gap:12px;align-items:center}.form-grid label{font-size:13px;color:var(--text-muted)}.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:var(--radius);font-size:13px;outline:none;background:var(--bg-card);color:var(--text-dark)}.form-grid input::placeholder,.form-grid textarea::placeholder{color:#888;opacity:1}.form-grid select option{background-color:#fff;color:#222}.form-grid textarea{min-height:72px;resize:vertical;box-sizing:border-box}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--primary)}.form-grid select.user-role-listbox{display:block;width:100%;max-height:220px;padding:6px 8px;overflow-y:auto;line-height:1.45}.form-grid .user-role-field .user-role-hint{display:block;margin-top:6px;font-size:11px;color:var(--text-muted);line-height:1.4}.dialog-inline-status{margin-top:14px;padding:10px 12px;border-radius:var(--radius);border:1px solid rgba(59,130,246,.28);background:#3b82f614;color:#1d4ed8;font-size:12px;line-height:1.5}.dialog-inline-status[hidden]{display:none!important}.dialog-inline-status.is-error{border-color:#f044384d;background:#f0443814;color:#b42318}.dialog-inline-status.is-success{border-color:#12b76a52;background:#12b76a1a;color:#0f7a43}.role-dialog-inline-status{margin-top:10px}#formRole .form-grid.form-grid-role>.role-ch-section-full{grid-column:1 / -1}.form-grid.form-grid-role{align-items:start}.form-grid.form-grid-role>label{padding-top:8px}.role-ch-section-title{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--text-muted, #666)}.role-ch-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}.role-ch-pick-summary{font-size:11px;color:var(--text-muted, #888);line-height:1.4}.role-ch-filter-input{box-sizing:border-box;width:100%;max-width:100%;margin:0 0 10px;padding:8px 10px;font-size:12px;border:1px solid rgba(0,0,0,.14);border-radius:var(--radius)}.role-channel-pick-wrap{--role-ch-checkbox-width: 1.125rem;--role-ch-gutter: .625rem;box-sizing:border-box;min-height:120px;max-height:260px;overflow:auto;padding:10px 10px 12px;margin:0 0 12px;font-size:12px;line-height:1.4;border:1px solid rgba(0,0,0,.12);border-radius:var(--radius);background:#00000005}.role-channel-pick-wrap.is-loading{opacity:.85}.role-channel-pick-placeholder{margin:24px auto;padding:0 12px;max-width:28rem;text-align:center;color:var(--text-muted, #888)}.role-channel-pick-placeholder.role-channel-pick-muted{opacity:.95}.role-channel-pick-placeholder.role-channel-pick-error{color:#b42318}.role-ch-dev-block{margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid rgba(0,0,0,.08)}.role-ch-dev-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.role-ch-pick-line{display:grid;grid-template-columns:var(--role-ch-checkbox-width) minmax(0,1fr);column-gap:var(--role-ch-gutter);align-items:start;margin:0;padding:0;cursor:pointer}.role-ch-pick-line input[type=checkbox]{box-sizing:border-box;width:1rem;min-width:1rem;height:1rem;margin:2px 0 0;align-self:start;justify-self:start;flex-shrink:0}.role-ch-line-main{display:flex;flex-flow:column nowrap;align-items:stretch;gap:4px;min-width:0}.role-ch-ch-line .role-ch-line-main{flex-flow:row wrap;align-items:baseline;gap:4px 10px}.role-ch-dev-line .role-ch-dev-name{font-weight:600;color:inherit}.role-ch-dev-id{display:block;font-size:10px;font-weight:400;line-height:1.35;color:var(--text-muted, #777);word-break:break-all;opacity:.95}.role-ch-channel-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}.role-ch-li{margin:0}.role-ch-name{font-weight:500;min-width:0}.role-ch-id-hint{font-size:10px;font-weight:400;color:var(--text-muted, #888);font-variant-numeric:tabular-nums;opacity:.9}.role-fp-grid{display:flex;flex-direction:column;gap:10px;font-size:12px;color:var(--text-muted, #666)}.role-fp-opt{display:grid;grid-template-columns:1.125rem minmax(0,1fr);align-items:start;column-gap:.625rem;margin:0;cursor:pointer;line-height:1.4}.role-fp-opt input[type=checkbox]{width:1rem;height:1rem;margin:2px 0 0;justify-self:start}.role-fp-opt span{min-width:0}.role-ch-json-details{margin-top:4px;padding:8px 10px;font-size:12px;border:1px solid rgba(0,0,0,.1);border-radius:var(--radius);background:#00000005}.role-ch-json-details summary{cursor:pointer;font-weight:600;color:var(--primary, #2563eb);-webkit-user-select:none;user-select:none}.role-ch-json-details textarea{width:100%;margin-top:8px;box-sizing:border-box}.role-ch-json-hint{margin:8px 0 0;font-size:11px;color:var(--text-muted, #777)}#formUser .form-grid{align-items:start}#formUser .form-grid>label{padding-top:8px}#formUser .form-grid>label#fMustChangePwdWrap{grid-column:1 / -1;padding-top:4px}.dlg-ft{padding:12px 16px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--border)}.status-box{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 16px;margin-top:16px;max-width:600px;font-size:13px;line-height:1.6}.app-bottombar{grid-column:2 / -1;display:flex;align-items:center;height:36px;background:#0b1220;border-top:1px solid rgba(148,163,184,.18);flex-shrink:0;position:relative}.bb-spacer{flex:1}.bb-tools{display:flex;align-items:center;gap:2px;padding:0 8px}.bb-sep{width:1px;height:16px;background:#fff3;margin:0 4px}.app-bottombar button{width:28px;height:28px;border:0;border-radius:4px;background:transparent;color:#ffffff8c;cursor:pointer;display:grid;place-items:center;touch-action:manipulation;transition:color .15s,background .15s;padding:0}.app-bottombar button:hover{color:#fff;background:#ffffff1a}.app-bottombar button.active{color:var(--primary-light)}#mobileAppTabbar{display:none;grid-column:1 / -1;box-sizing:border-box;min-height:calc(48px + env(safe-area-inset-bottom,0px));padding:4px 2px max(4px,env(safe-area-inset-bottom,0px));background:#0b1220;border-top:1px solid rgba(148,163,184,.16);z-index:450}html.layout-phone #mobileAppTabbar{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:0}.mobile-app-tabbar .mobile-tab-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;padding:4px 2px;border:0;border-radius:6px;background:transparent;color:#ffffff8c;font-size:11px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.mobile-app-tabbar .mobile-tab-btn .mobile-tab-icon{font-size:16px;line-height:1;opacity:.85}.mobile-app-tabbar .mobile-tab-btn.active{color:var(--primary-light)}.mobile-app-tabbar .mobile-tab-btn.active .mobile-tab-icon{opacity:1}html.layout-desktop .bb-ptz-panel-btn,html.layout-tablet .bb-ptz-panel-btn{display:none!important}.ptz-mobile-sheet{width:100%;max-width:100%;margin:auto 0 0;padding:0;border:none;border-radius:14px 14px 0 0;background:var(--bg-sidebar, #1b2838);color:#ffffffeb;box-shadow:0 -8px 32px #00000073;z-index:2000;max-height:min(72vh,520px);overflow:hidden}.ptz-mobile-sheet::backdrop{background:#0000008c}.ptz-sheet-inner{display:flex;flex-direction:column;max-height:inherit}.ptz-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:600;font-size:15px}.ptz-sheet-close{width:40px;height:40px;border:0;border-radius:8px;background:#ffffff14;color:#fff;font-size:22px;line-height:1;cursor:pointer;touch-action:manipulation}.ptz-sheet-body{padding:14px 16px max(14px,env(safe-area-inset-bottom,0px));overflow-y:auto;-webkit-overflow-scrolling:touch}.ptz-joystick--sheet{margin:0 auto 14px}.ptz-sheet-zoom{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.ptz-sheet-zoom .ptz-txt-btn{min-height:44px}.ptz-sheet-presets{margin-top:4px;margin-bottom:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}.ptz-sheet-presets .ptz-preset-header{color:#ffffffe6}.ptz-sheet-presets .ptz-preset-list{max-height:min(38vh,240px);overflow-y:auto;margin-top:8px;-webkit-overflow-scrolling:touch}.ptz-sheet-presets .ptz-preset-item{background:#ffffff0f}.ptz-sheet-hint{margin:0;font-size:12px;line-height:1.45;color:#ffffff73}.split-popup{display:none;position:absolute;bottom:100%;right:8px;margin-bottom:4px;background:#fff;border-radius:8px;box-shadow:0 4px 24px #00000040;padding:16px;min-width:300px;z-index:500;color:#333}.split-popup.visible{display:block}.split-group{margin-bottom:14px}.split-group:last-child{margin-bottom:0}.split-group-title{font-size:13px;font-weight:500;color:#666;margin-bottom:8px}.split-options{display:flex;flex-wrap:wrap;gap:6px}.split-popup .split-opt{min-width:38px;height:32px;width:auto;border:1.5px solid #ddd;border-radius:4px;background:#f9f9f9;color:#999;cursor:pointer;display:grid;place-items:center;transition:all .15s;padding:2px 4px}.split-popup .split-opt:hover{border-color:#bbb;color:#666;background:#f0f0f0}.split-popup .split-opt.active{border-color:var(--primary-light);color:var(--primary-light);background:var(--primary-soft)}.split-popup .split-opt[disabled]{opacity:.35;cursor:not-allowed;pointer-events:none}.split-popup .split-add{font-size:20px;font-weight:300;color:#bbb}.split-popup .split-add:hover{color:#888}.mobile-drawer-toggle{display:none;box-sizing:border-box;margin:0;padding:0;cursor:pointer;align-items:center;justify-content:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.sidebar-backdrop{display:none;position:fixed;inset:0;z-index:999;background:#00000080}.sidebar-backdrop.visible{display:block}.touch-ptz-indicator{position:absolute;inset:0;z-index:5;pointer-events:none;display:none;align-items:center;justify-content:center}.touch-ptz-indicator.visible{display:flex}.touch-ptz-indicator .ptz-arrow{font-size:48px;color:#fff9;text-shadow:0 0 12px rgba(0,0,0,.8);transition:opacity .15s}html.layout-desktop #bbPtzSwipeBtn,html.layout-tablet #bbPtzSwipeBtn{display:none!important}html.layout-phone.mobile-chrome-hidden .topbar{height:0!important;min-height:0!important;overflow:hidden;padding-top:0!important;padding-bottom:0!important;border:none;opacity:0;pointer-events:none}html.layout-phone.mobile-chrome-hidden .app-bottombar{height:0!important;min-height:0!important;padding:0!important;overflow:hidden;opacity:0;pointer-events:none}html.layout-phone .main-grid{grid-template-rows:1fr auto auto}html.layout-phone.mobile-chrome-hidden #mobileAppTabbar{height:0!important;min-height:0!important;padding:0!important;overflow:hidden;opacity:0;pointer-events:none;border:none}html.pseudo-fullscreen-active .app-bottombar,html.pseudo-fullscreen-active #mobileAppTabbar,html.pseudo-fullscreen-active .mobile-drawer-toggle,html.pseudo-fullscreen-active #liveToolbar,html.pseudo-fullscreen-active .playback-controls{display:none!important}html.layout-phone.pseudo-fullscreen-active .main-grid{grid-template-rows:1fr}html.layout-phone.pseudo-fullscreen-active .video-area{flex:1;min-height:0}@media(max-width:1024px){.main-grid{grid-template-columns:220px 1fr}.topbar{padding:0 8px}.nav-item{padding:0 10px;font-size:13px}}@media(max-width:767px){.main-grid{grid-template-columns:1fr;grid-template-rows:1fr auto}html.layout-phone .main-grid{grid-template-rows:1fr auto auto}.sidebar{position:fixed;top:0;left:0;bottom:0;padding-top:var(--safe-top);width:280px;z-index:1000;transform:translate(-100%);transition:transform .25s ease;box-shadow:4px 0 20px #00000080}.sidebar.drawer-open{transform:translate(0)}.app-bottombar{grid-column:1 / -1;min-height:calc(44px + var(--safe-bottom));padding-bottom:max(4px,var(--safe-bottom));height:auto;box-sizing:border-box}.app-bottombar button{min-width:44px;min-height:44px;width:auto;height:auto;padding:0 10px}.topbar{padding:0 6px;padding-top:max(6px,var(--safe-top))}.nav-item{padding:0 8px;font-size:12px}.dropdown{min-width:120px}.ptz-section{display:none}.video-cell .cell-osd{font-size:9px}.card{margin:8px;padding:0}.card-bd{padding:12px}.page{padding:8px}.table-wrap{font-size:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-wrap th,.table-wrap td{padding:6px 8px}.toolbar{flex-direction:column;align-items:stretch;gap:10px}.toolbar-left,.toolbar-right{width:100%;justify-content:flex-start}.toolbar .btn,.toolbar button{min-height:44px}dialog{width:92vw;max-width:92vw;margin:5vh auto}}@media(max-width:480px){.topbar .top-center{overflow-x:auto;flex-wrap:nowrap}.nav-item{padding:0 6px;font-size:11px;white-space:nowrap}.top-right .user-info{max-width:80px;overflow:hidden;text-overflow:ellipsis}.sidebar{width:260px}.pager{flex-direction:column;gap:8px}}@media(max-width:767px){html.layout-phone .topbar{display:flex;align-items:center;width:100%;max-width:100vw;min-width:0;box-sizing:border-box;overflow:hidden;padding-left:12px;padding-right:10px;gap:8px}html.layout-phone .topbar *,html.layout-phone .topbar *:before,html.layout-phone .topbar *:after{box-sizing:border-box}html.layout-phone .top-left,html.layout-phone .top-center,html.layout-phone .top-right{min-width:0}html.layout-phone .top-left{flex:0 1 124px;min-width:92px;max-width:132px;overflow:hidden;display:flex;align-items:center}html.layout-phone .top-left>*,html.layout-phone .brand,html.layout-phone .logo-text,html.layout-phone .app-title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}html.layout-phone .brand,html.layout-phone .logo-text,html.layout-phone .app-title{font-size:18px;line-height:1.15}html.layout-phone .top-center{flex:1 1 auto;overflow:hidden;display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}html.layout-phone .top-center>*{flex:0 1 auto;min-width:0}html.layout-phone .top-right{flex:0 1 auto;min-width:0;max-width:46vw;overflow:hidden;display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}html.layout-phone .top-right>*{flex:0 0 auto}html.layout-phone .top-right>.topbar-user{flex:1 1 auto;min-width:0;overflow:hidden}html.layout-phone .topbar-username,html.layout-phone .user-info,html.layout-phone .username,html.layout-phone .user-name{flex:1 1 auto;min-width:0;max-width:24vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;vertical-align:middle}html.layout-phone .topbar .nav-item,html.layout-phone .topbar .settings-link,html.layout-phone .topbar .settings-btn,html.layout-phone .topbar .lang-btn,html.layout-phone .topbar .language-btn,html.layout-phone .topbar button,html.layout-phone .topbar select{min-width:0;max-width:none;font-size:13px;line-height:1.2;padding:6px 9px;white-space:nowrap}html.layout-phone .topbar .divider,html.layout-phone .topbar .topbar-divider{flex:0 0 auto;opacity:.45}}@media(max-width:430px){html.layout-phone .topbar{padding-left:10px;padding-right:8px;gap:6px}html.layout-phone .top-left{flex-basis:116px;min-width:88px;max-width:124px}html.layout-phone .brand,html.layout-phone .logo-text,html.layout-phone .app-title{font-size:17px}html.layout-phone .top-center{gap:4px}html.layout-phone .top-right{max-width:48vw;gap:4px}html.layout-phone .topbar-username,html.layout-phone .user-info,html.layout-phone .username,html.layout-phone .user-name{max-width:22vw}html.layout-phone .topbar .nav-item,html.layout-phone .topbar .settings-link,html.layout-phone .topbar .settings-btn,html.layout-phone .topbar .lang-btn,html.layout-phone .topbar .language-btn,html.layout-phone .topbar button,html.layout-phone .topbar select{font-size:12px;padding:5px 8px}}html.layout-phone .mobile-drawer-toggle.is-floating{display:flex;position:fixed;bottom:calc(112px + max(16px,var(--safe-bottom)));left:max(16px,calc(16px + var(--safe-left)));z-index:1200;width:48px;height:48px;border-radius:50%;background:var(--primary);color:#fff;border:0;box-shadow:0 2px 12px #0006;font-size:22px}html.layout-phone .mobile-drawer-toggle.in-bottom-bar{display:inline-flex}@media(max-width:767px){html.layout-phone #appBottomBar .mobile-drawer-toggle.in-bottom-bar{position:static;inset:auto;transform:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;min-width:42px;flex:0 0 42px;margin:0;border:0;border-radius:12px;background:#3b82f6f2;color:#fff;box-shadow:none;z-index:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-size:18px;padding:0}html.layout-phone #appBottomBar .mobile-drawer-toggle.in-bottom-bar:active{transform:scale(.96)}html.layout-phone #appBottomBar .mobile-drawer-toggle.in-bottom-bar .drawer-toggle-lines{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:18px;height:18px}html.layout-phone #appBottomBar .mobile-drawer-toggle.in-bottom-bar .drawer-toggle-lines span{display:block;width:18px;height:2px;border-radius:999px;background:currentColor}html.layout-phone #appBottomBar .mobile-drawer-toggle.in-bottom-bar .drawer-toggle-x{font-size:22px;line-height:1;font-weight:300}html.layout-phone #appBottomBar .mobile-drawer-toggle.in-bottom-bar:before,html.layout-phone #appBottomBar .mobile-drawer-toggle.in-bottom-bar:after{display:none;content:none}html.layout-phone #appBottomBar .bb-tools.bb-left{display:flex;align-items:center;min-width:0;gap:8px}}@media(max-width:767px){html.layout-phone{--m-header-h: 48px;--m-playerbar-h: 52px;--m-tabbar-h: 56px;--m-safe-bottom: env(safe-area-inset-bottom, 0px);--m-bg: #070b14;--m-panel: #101a33;--m-panel-2: #141f3d;--m-border: rgba(255, 255, 255, .09);--m-text: #e8f0ff;--m-muted: #94a3b8;--m-primary: #3b82f6;--m-primary-2: #2563eb;--topbar-h: var(--m-header-h)}html.layout-phone,html.layout-phone body{height:100%;overflow:hidden;background:var(--m-bg)}html.layout-phone .app{height:100%;max-height:100dvh;min-height:0;overflow:hidden;background:var(--m-bg)}html.layout-phone .main-grid{flex:1;min-height:0;max-height:calc(100dvh - var(--m-header-h));overflow:hidden;grid-template-rows:minmax(calc(100dvh - var(--m-header-h) - var(--m-playerbar-h) - var(--m-tabbar-h) - var(--m-safe-bottom)),120px) auto auto}html.layout-phone.pseudo-fullscreen-active .main-grid{grid-template-rows:1fr;max-height:100dvh}html.layout-phone .video-area{position:relative;min-height:calc(100dvh - var(--m-header-h) - var(--m-playerbar-h) - var(--m-tabbar-h) - var(--m-safe-bottom));background:#000;border-top:1px solid rgba(255,255,255,.06);overflow:hidden}html.layout-phone #mobileStreamProtoBadge{position:absolute;top:max(8px,var(--safe-top));right:8px;z-index:12;padding:4px 8px;border-radius:8px;font-size:11px;color:#ffffffd9;background:#00000073;pointer-events:none;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html.layout-phone .topbar{height:var(--m-header-h);min-height:var(--m-header-h);max-height:var(--m-header-h);display:grid;grid-template-columns:minmax(88px,1.1fr) minmax(0,2fr) auto;align-items:center;gap:8px;width:100%;max-width:100vw;padding:0 12px;padding-top:max(0px,calc(var(--safe-top) - 6px));box-sizing:border-box;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#2563eb,#1d4ed8 52%,#0f172a)}html.layout-phone .top-left{min-width:0;padding:0 4px 0 0;max-width:none;flex:initial;font-size:15px;overflow:hidden}html.layout-phone .top-left>strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:120px}html.layout-phone .desktop-nav.main-nav.top-center{display:none!important}html.layout-phone .mobile-header-lang{display:flex!important;align-items:center;justify-content:flex-end;min-width:0;overflow:visible}html.layout-phone .mobile-header-lang #_langBtn{flex:0 0 auto;min-height:36px;min-width:44px;padding:6px 14px!important;border-radius:10px!important;border:1px solid rgba(255,255,255,.35)!important;background:#ffffff24!important;font-size:13px!important;font-weight:600!important;color:#fff!important;line-height:1.2;touch-action:manipulation;-webkit-tap-highlight-color:transparent}html.layout-phone .mobile-header-lang #_langBtn:active{background:#ffffff38!important}html.layout-phone .top-right{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:0 0 0 4px;margin-left:0;min-width:0;flex:initial;max-width:none}html.layout-phone .top-right>*:not(.mobile-more-btn){display:none!important}html.layout-phone .mobile-more-btn{flex:0 0 auto;width:36px;height:36px;border:0;border-radius:10px;background:#ffffff24;color:#fff;font-size:20px;line-height:1;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}html.layout-phone .mobile-more-btn:active{background:#ffffff38}html.layout-phone .mobile-more-menu{position:fixed;top:calc(var(--m-header-h) + var(--safe-top) + 6px);right:max(10px,var(--safe-right));min-width:196px;max-width:min(92vw,280px);padding:8px;border-radius:14px;background:#101a33;border:1px solid var(--m-border);box-shadow:0 16px 40px #00000061;z-index:1600;box-sizing:border-box}html.layout-phone .mobile-more-menu[hidden],html.layout-phone .mobile-more-menu.mobile-more-hidden{display:none!important}html.layout-phone .mobile-more-item{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;padding:0 12px;margin:2px 0;border:0;border-radius:10px;background:transparent;color:var(--m-text);font-size:14px;text-align:left;cursor:pointer;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-sizing:border-box}html.layout-phone .mobile-more-item:active{background:#ffffff14}html.layout-phone .mobile-more-item span.muted{color:var(--m-muted);font-size:12px;margin-left:8px}html.layout-phone .sidebar{inset:auto 0 0!important;width:100%!important;max-width:100%!important;height:min(88dvh,720px)!important;max-height:min(88dvh,720px)!important;padding-top:0!important;transform:translateY(100%)!important;transition:transform .22s ease!important;border-radius:18px 18px 0 0!important;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -18px 60px #0000007a!important;z-index:1500!important;background:var(--m-panel)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}html.layout-phone .sidebar.drawer-open{transform:translateY(0)!important}html.layout-phone .sidebar-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}html.layout-phone .sidebar-backdrop{z-index:1400;background:#00000085;transition:opacity .18s ease}html.layout-phone body.mobile-drawer-open .sidebar-backdrop.visible{display:block!important}html.layout-phone #appBottomBar{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:4px;min-height:var(--m-playerbar-h)!important;height:var(--m-playerbar-h)!important;padding:4px 6px max(4px,var(--m-safe-bottom))!important;background:#03080efa!important;border-top:1px solid rgba(22,134,232,.45)!important;box-sizing:border-box!important}html.layout-phone #appBottomBar>.bb-spacer{display:none!important}html.layout-phone #appBottomBar>.bb-tools.bb-left,html.layout-phone #appBottomBar>.bb-tools#bbToolsRight{display:contents!important}html.layout-phone #appBottomBar #bbStreamMgr,html.layout-phone #appBottomBar #bbStopPreview,html.layout-phone #appBottomBar #bbConfig,html.layout-phone #appBottomBar #bbPtzPanel,html.layout-phone #appBottomBar #bbPtzSwipeBtn,html.layout-phone #appBottomBar .bb-sep{display:none!important}html.layout-phone #appBottomBar .mobile-drawer-toggle{grid-column:1}html.layout-phone #appBottomBar #bbVolume{grid-column:2}html.layout-phone #appBottomBar #bbSnapshot{grid-column:3}html.layout-phone #appBottomBar #bbRefresh{grid-column:4}html.layout-phone #appBottomBar #bbSplit{grid-column:5}html.layout-phone #appBottomBar #bbFullscreen{grid-column:6}html.layout-phone #appBottomBar .bb-timeline{grid-column:1 / -1}html.layout-phone #appBottomBar button,html.layout-phone #appBottomBar .mobile-drawer-toggle{width:100%;min-width:0!important;height:42px;display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px!important;border:0!important;background:transparent!important;color:#8fa1b8!important;box-shadow:none!important;font-size:10px!important;line-height:1.1;padding:0!important;touch-action:manipulation;-webkit-tap-highlight-color:transparent}html.layout-phone #appBottomBar button:active,html.layout-phone #appBottomBar .mobile-drawer-toggle:active{color:#fff!important;background:#3b82f62e!important}html.layout-phone #appBottomBar .mobile-drawer-toggle.in-bottom-bar{background:linear-gradient(145deg,#3b82f6,#2563eb,#1e40af)!important;color:#fff!important}html.layout-phone #appBottomBar .mobile-drawer-toggle.in-bottom-bar svg,html.layout-phone #appBottomBar button svg{width:18px;height:18px}html.layout-phone #appBottomBar .player-action-label{font-size:10px;font-weight:500;color:inherit;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html.layout-phone #mobileAppTabbar.mobile-app-tabbar{min-height:calc(var(--m-tabbar-h) + var(--m-safe-bottom));padding:4px 6px var(--m-safe-bottom);background:#0b1220;border-top:1px solid rgba(255,255,255,.08);box-sizing:border-box;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;align-items:stretch}html.layout-phone #mobileAppTabbar .mobile-tab-btn{min-width:0;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;border-radius:12px;background:transparent;color:#8a97aa;font-size:11px;cursor:pointer;touch-action:manipulation}html.layout-phone #mobileAppTabbar .mobile-tab-btn.active{color:#60a5fa;font-weight:600}html.layout-phone #mobileAppTabbar .mobile-tab-icon{font-size:16px;line-height:1}html.layout-phone #mobileAppTabbar .mobile-tab-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html.layout-phone .tree-leaf{min-height:46px;padding-top:10px;padding-bottom:10px;align-items:center}html.layout-phone .tree-branch>.tree-row{min-height:44px;padding-top:8px;padding-bottom:8px}html.layout-phone .mobile-account-overlay{position:fixed;inset:0;z-index:1706;display:flex;align-items:flex-end;justify-content:center;padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-sizing:border-box;background:#0008148c}html.layout-phone .mobile-account-overlay[hidden],html.layout-phone .mobile-account-overlay[hidden=hidden]{display:none!important}html.layout-phone .mobile-account-sheet{width:100%;max-width:560px;max-height:78vh;overflow-y:auto;box-sizing:border-box;border-radius:16px 16px 0 0;background:linear-gradient(180deg,#141c33,#101a33 62%);color:var(--m-text);border:1px solid rgba(255,255,255,.1);box-shadow:0 -14px 40px #00060c8c}html.layout-phone .mobile-account-sheet-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 8px;border-bottom:1px solid rgba(255,255,255,.08)}html.layout-phone .mobile-account-sheet-toolbar strong{font-size:16px}html.layout-phone .mobile-account-close{width:36px;height:36px;border:0;border-radius:10px;background:#ffffff14;color:var(--m-text);font-size:16px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}html.layout-phone .mobile-account-bio{padding:12px 16px;font-size:13px;color:#e8f0ffe0;line-height:1.45;word-break:break-word;border-bottom:1px solid rgba(255,255,255,.06)}html.layout-phone .mobile-account-sheet-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:0;padding:0 16px;border:0;border-radius:0;background:transparent;color:var(--m-text);font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06);touch-action:manipulation;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html.layout-phone a.mobile-account-sheet-btn:visited{color:var(--m-text)}html.layout-phone .mobile-account-sheet-btn:active{background:#ffffff12}html.layout-phone .mobile-account-sheet-btn-danger{color:#ff9f9a;font-weight:700;border-bottom:0;padding-top:6px;padding-bottom:max(14px,env(safe-area-inset-bottom,14px))}}.mobile-header-lang{display:none}