:root{--bg:#f5f5f5;--bg-card:#fff;--bg-hover:#e8e8e8;--border:#d1d5db;--text:#1f2937;--text-dim:#6b7280;--primary:#3b82f6;--primary-hover:#2563eb;--green:#22c55e;--red:#ef4444;--yellow:#eab308;--orange:#f97316;--radius:8px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.login-page{background:linear-gradient(135deg,#0f1117 0%,#1a1d27 100%);justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;width:360px;padding:2.5rem}.login-card h1{margin-bottom:.25rem;font-size:1.8rem}.login-card .subtitle{color:var(--text-dim);margin-bottom:2rem;font-size:.9rem}.login-card form{flex-direction:column;gap:.75rem;display:flex}.login-card input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:.7rem 1rem;font-size:.95rem}.login-card input:focus{border-color:var(--primary);outline:none}.login-card button{background:var(--primary);color:#fff;border-radius:var(--radius);cursor:pointer;border:none;margin-top:.5rem;padding:.7rem;font-size:1rem}.login-card button:hover{background:var(--primary-hover)}.login-card .error{color:var(--red);font-size:.85rem}.app-layout{min-height:100vh;display:flex;position:relative}.sidebar{background:var(--bg-card);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:1rem;width:220px;padding:1.25rem .85rem;transition:width .22s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);display:flex}.sidebar-header{border-bottom:1px solid var(--border);align-items:center;gap:.6rem;padding-bottom:.5rem;display:flex}.sidebar-toggle-btn{cursor:pointer;color:var(--text-dim);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:6px;transition:all .15s;display:flex}.sidebar-toggle-btn:hover{background:var(--bg-hover);color:var(--text)}.sidebar .logo{white-space:nowrap;align-items:center;gap:.5rem;font-size:1.05rem;font-weight:700;display:flex;overflow:hidden}.sidebar .logo-icon{color:var(--primary);flex-shrink:0}.sidebar .logo-text{flex-direction:column;display:flex;overflow:hidden}.sidebar .brand-name{font-size:1rem;font-weight:700;line-height:1.2}.sidebar .brand-sub{color:var(--text-dim);font-size:.72rem;font-weight:400}.nav-links{flex-direction:column;flex:1;gap:.35rem;display:flex}.nav-links a{border-radius:var(--radius);color:var(--text-dim);white-space:nowrap;align-items:center;gap:.65rem;padding:.65rem .8rem;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .15s;display:flex}.nav-links a:hover{background:var(--bg-hover);color:var(--text)}.nav-links a.active{background:var(--primary);color:#fff}.sidebar-footer{border-top:1px solid var(--border);flex-direction:column;gap:.5rem;padding-top:.75rem;display:flex}.theme-toggle-btn,.logout-btn{border:1px solid var(--border);border-radius:var(--radius);color:var(--text-dim);cursor:pointer;white-space:nowrap;background:0 0;align-items:center;gap:.65rem;padding:.6rem .8rem;font-size:.9rem;transition:all .15s;display:flex}.theme-toggle-btn:hover{background:var(--bg-hover);color:var(--text)}.logout-btn:hover{border-color:var(--red);color:var(--red);background:#ef444414}.sidebar.sidebar-collapsed{align-items:center;width:64px;padding:1.25rem .4rem}.sidebar.sidebar-collapsed .sidebar-header{border-bottom:none;justify-content:center;padding-bottom:0}.sidebar.sidebar-collapsed .nav-links{align-items:center;width:100%}.sidebar.sidebar-collapsed .nav-links a{border-radius:8px;justify-content:center;width:44px;height:44px;padding:0}.sidebar.sidebar-collapsed .sidebar-footer{align-items:center;width:100%}.sidebar.sidebar-collapsed .theme-toggle-btn,.sidebar.sidebar-collapsed .logout-btn{border-radius:8px;justify-content:center;width:44px;height:44px;padding:0}.content{flex:1;min-width:0;padding:1.25rem 1.5rem;transition:all .22s;overflow-y:auto}.mobile-header-bar{margin-bottom:.75rem;display:none}.expand-sidebar-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;color:var(--text);align-items:center;gap:6px;padding:7px 12px;font-size:.85rem;font-weight:600;transition:all .15s;display:inline-flex;box-shadow:0 1px 3px #0000000f}.expand-sidebar-btn:hover{background:var(--bg-hover);border-color:var(--primary);color:var(--primary)}.sidebar-backdrop{display:none}@media (width<=768px){html,body,#root,.app-layout,.content,.dashboard{max-width:100vw!important;overflow-x:hidden!important}.sidebar-backdrop{z-index:998;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0009;display:block;position:fixed;inset:0}.sidebar{z-index:999;width:260px;position:fixed;top:0;bottom:0;left:0;transform:translate(0);box-shadow:6px 0 25px #0006}.sidebar.sidebar-collapsed{pointer-events:none;width:260px;transform:translate(-100%)}.mobile-header-bar{display:flex}.content{box-sizing:border-box;width:100%;max-width:100vw;padding:.5rem .4rem}.dashboard{width:100%;max-width:100%;overflow:hidden}.dashboard-header{flex-direction:column;align-items:stretch;gap:.5rem;margin-bottom:.75rem}.server-status-bar{flex-wrap:wrap;align-items:center;gap:.35rem;width:100%;display:flex}.system-metrics-pills{flex-wrap:wrap;gap:.35rem;width:100%;display:flex}.metric-pill{flex:calc(50% - .2rem);justify-content:center;min-width:120px;padding:.25rem .4rem;font-size:.72rem}.metric-subval{display:none}.metric-mini-bar{width:20px}.density-selector-group{justify-content:center;width:100%;padding:.2rem .35rem}.density-label{display:none!important}.density-buttons{grid-template-columns:repeat(4,1fr);gap:.25rem;width:100%;display:grid}.density-btn{text-align:center;justify-content:center;padding:.25rem .15rem;font-size:.7rem}.stream-section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem}.stream-section-title{align-items:center;gap:.4rem;display:flex}.stream-section-title h2{font-size:1.05rem}.stream-section-header .btn-primary{padding:.3rem .65rem;font-size:.78rem}.streams-table{flex-direction:column;gap:.6rem;width:100%;max-width:100%;display:flex;overflow:visible}.stream-row{box-sizing:border-box!important;border-radius:8px!important;flex-direction:column!important;align-items:stretch!important;gap:.5rem!important;width:100%!important;min-width:0!important;max-width:100%!important;padding:.65rem .75rem!important;display:flex!important;overflow:hidden!important}.stream-row-top{flex-wrap:wrap!important;justify-content:space-between!important;align-items:center!important;gap:.4rem!important;width:100%!important;display:flex!important}.stream-identity-group{flex:auto!important;align-items:center!important;gap:.35rem!important;min-width:0!important;display:flex!important;overflow:hidden!important}.stream-identity-group .item-id{color:var(--text-dim)!important;font-size:.72rem!important;font-weight:700!important}.stream-identity-group .protocol-badge{white-space:nowrap!important;flex-shrink:0!important;padding:.12rem .35rem!important;font-size:.65rem!important}.stream-identity-group .item-name-cell{flex:auto!important;min-width:0!important;overflow:hidden!important}.stream-identity-group .item-name{white-space:nowrap!important;text-overflow:ellipsis!important;font-size:.84rem!important;font-weight:600!important;display:block!important;overflow:hidden!important}.stream-assignment-group{flex-shrink:0!important;align-items:center!important;gap:.35rem!important;display:flex!important}.stream-assignment-group .assigned-outputs-pill{min-width:unset!important;padding:.12rem .4rem!important;font-size:.68rem!important}.output-source-badges{min-width:unset!important;flex-wrap:wrap!important;gap:.25rem!important;max-width:100%!important;display:flex!important}.output-source-badges .source-badge{border-radius:4px!important;padding:.12rem .4rem!important;font-size:.68rem!important}.output-source-badges .badge-text{max-width:85px!important}.stream-row-url{width:100%!important;min-width:0!important;max-width:100%!important;display:block!important}.stream-row-url .mediamtx-url-container{align-items:center!important;gap:.35rem!important;width:100%!important;max-width:100%!important;display:flex!important}.stream-row-url .mediamtx-url{flex:auto!important;justify-content:space-between!important;min-width:0!important;max-width:100%!important;padding:.2rem .45rem!important;font-size:.66rem!important}.stream-row-url .mediamtx-url .url-text{text-overflow:ellipsis!important;white-space:nowrap!important;overflow:hidden!important}.stream-row-bottom{border-top:1px solid #ffffff0f!important;justify-content:space-between!important;align-items:center!important;gap:.4rem!important;width:100%!important;padding-top:.35rem!important;display:flex!important}.stream-metrics-group{flex:auto!important;align-items:center!important;gap:.35rem!important;min-width:0!important;display:flex!important;overflow:hidden!important}.stream-metrics-group .bitrate{min-width:unset!important;white-space:nowrap!important;font-size:.72rem!important}.stream-metrics-group .status-bar-wrapper{cursor:pointer!important;flex-shrink:0!important}.stream-metrics-group .status-bar{width:26px!important;height:6px!important}.stream-metrics-group .codec-info{min-width:unset!important;white-space:nowrap!important;text-overflow:ellipsis!important;align-items:center!important;gap:.2rem!important;font-size:.68rem!important;display:flex!important;overflow:hidden!important}.stream-row-bottom .row-actions{flex-shrink:0!important;align-items:center!important;gap:.2rem!important;margin-left:auto!important;display:flex!important}.stream-row-bottom .row-actions .icon-btn{border-radius:4px!important;padding:.3rem!important}.stream-row-bottom .row-actions .icon-btn svg{width:14px!important;height:14px!important}}.dashboard.density-compact,.dashboard.density-ultra{max-width:100%}.dashboard-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.server-status-bar{flex-wrap:wrap;align-items:center;gap:.65rem;display:flex}.ws-status{color:var(--text);background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);align-items:center;gap:.45rem;padding:.26rem .65rem;font-size:.8rem;font-weight:600;display:flex;box-shadow:0 1px 3px #0000000d}.ws-status-text{letter-spacing:.02em;font-size:.78rem}.ws-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.ws-dot.online{background:#10b981;animation:2.5s infinite pulse-green;box-shadow:0 0 8px #10b981b3}.ws-dot.offline{background:#ef4444;box-shadow:0 0 6px #ef444480}@keyframes pulse-green{0%{box-shadow:0 0 #10b981b3}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.system-metrics-pills{flex-wrap:wrap;align-items:center;gap:.45rem;display:flex}.metric-pill{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);font-size:.78rem;font-family:var(--font-mono,monospace);color:var(--text);-webkit-user-select:none;user-select:none;align-items:center;gap:.35rem;padding:.24rem .6rem;transition:border-color .15s;display:flex;box-shadow:0 1px 3px #0000000a}.metric-pill:hover{border-color:#fff3}.metric-pill.gpu-inactive{border-style:dashed;border-color:#ffffff1f}.metric-icon{font-size:.85rem;line-height:1}.metric-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em;font-size:.72rem;font-weight:700}.metric-val{color:#f1f5f9;font-size:.78rem;font-weight:700}.metric-val.usage-normal{color:#38bdf8}.metric-val.usage-warning{color:#f59e0b}.metric-val.usage-danger{color:#ef4444;font-weight:800}.metric-subval{color:var(--text-dim);opacity:.85;font-size:.7rem}.metric-mini-bar{background:#ffffff14;border-radius:3px;flex-shrink:0;width:34px;height:5px;margin-left:.2rem;overflow:hidden}.metric-mini-bar-fill{border-radius:3px;height:100%;transition:width .4s}.metric-mini-bar-fill.cpu{background:linear-gradient(90deg,#06b6d4,#3b82f6)}.metric-mini-bar-fill.ram{background:linear-gradient(90deg,#8b5cf6,#c084fc)}.metric-mini-bar-fill.gpu{background:linear-gradient(90deg,#10b981,#22c55e)}.metric-mini-bar-fill.usage-warning{background:#f59e0b!important}.metric-mini-bar-fill.usage-danger{background:#ef4444!important}.metric-na{color:var(--text-dim);margin-right:.25rem;font-size:.72rem}.metric-tag-nvenc{color:#10b981;letter-spacing:.04em;text-transform:uppercase;background:#10b9811f;border:1px solid #10b98147;border-radius:4px;padding:1px 4px;font-size:.65rem;font-weight:700}.metric-pill-net{background:#0ea5e90d;border-color:#0ea5e940}.metric-pill-net:hover{border-color:#0ea5e973}.net-traffic-val{align-items:center;gap:.25rem;font-size:.75rem;display:inline-flex}.rx-speed{color:#34d399;font-weight:700}.tx-speed{color:#38bdf8;font-weight:700}.speed-separator{color:var(--text-dim);opacity:.5}.metric-pill-ip{cursor:pointer;background:#a855f70d;border-color:#a855f740}.metric-pill-ip:hover{background:#a855f71a;border-color:#a855f773}.ip-val{color:#c084fc;font-weight:700}.metric-copy-ip-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;margin-left:2px;padding:2px 3px;transition:all .15s;display:inline-flex}.metric-copy-ip-btn:hover{color:#fff;background:#ffffff1a}.metric-copy-ip-btn.copied{color:#34d399}.metric-ports-wrapper{position:relative}.metric-pill-interactive{cursor:pointer;background:#f59e0b0f;border-color:#f59e0b47;transition:all .2s}.metric-pill-interactive:hover,.metric-pill-interactive.active{background:#f59e0b24;border-color:#f59e0b80}.ports-val{color:#fbbf24;font-weight:700}.metric-chevron{color:#fbbf24;opacity:.8;transition:transform .2s}.metric-chevron.rotated{transform:rotate(180deg)}.ports-dropdown-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1200;background:#000000a6;justify-content:center;align-items:center;padding:1rem;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.ports-dropdown-card{background:var(--bg-card);border:1px solid var(--border);width:720px;max-width:95vw;max-height:85vh;color:var(--text);border-radius:10px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 20px 45px #00000038}[data-theme=dark] .ports-dropdown-card{box-shadow:0 25px 50px -12px #000000d9}.ports-dropdown-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:flex-start;padding:1.1rem 1.25rem .85rem;display:flex}.ports-title-row{align-items:center;gap:.5rem;display:flex}.ports-header-icon{font-size:1.2rem}.ports-title-row h4{color:var(--text);margin:0;font-size:1.05rem;font-weight:700}.ports-total-tag{color:#d97706;background:#f59e0b1f;border:1px solid #f59e0b59;border-radius:12px;padding:.1rem .45rem;font-size:.7rem;font-weight:700}[data-theme=dark] .ports-total-tag{color:#fbbf24}.ports-subtitle{color:var(--text-dim);margin:.3rem 0 0;font-size:.78rem;line-height:1.35}.ports-close-btn{color:var(--text-dim);border-radius:6px;padding:.35rem;transition:all .15s}.ports-close-btn:hover{color:var(--text);background:var(--bg-hover)}.ports-controls-bar{background:var(--bg);border-bottom:1px solid var(--border);flex-direction:column;gap:.6rem;padding:.75rem 1.25rem;display:flex}.ports-search-wrap{align-items:center;width:100%;display:flex;position:relative}.ports-search-icon{color:var(--text-dim);pointer-events:none;position:absolute;left:.75rem}.ports-search-input{background:var(--bg-card);border:1px solid var(--border);width:100%;color:var(--text);border-radius:6px;outline:none;padding:.45rem 2rem .45rem 2.2rem;font-size:.8rem;transition:all .2s}.ports-search-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px #3b82f633}.ports-clear-search{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:.2rem;position:absolute;right:.6rem}.ports-clear-search:hover{color:var(--text)}.ports-filter-tabs{flex-wrap:wrap;gap:.4rem;display:flex}.ports-tab{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;border-radius:4px;align-items:center;gap:.35rem;padding:.25rem .65rem;font-size:.74rem;font-weight:600;transition:all .15s;display:inline-flex}.ports-tab:hover{background:var(--bg-hover);color:var(--text)}.ports-tab.active{border-color:var(--primary);color:var(--primary);background:#3b82f61f}.ports-list-container{background:var(--bg-card);flex:1;max-height:480px;padding:.85rem 1.25rem;overflow-y:auto}.ports-grid{flex-direction:column;gap:.4rem;display:flex}.port-row-card{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;align-items:center;gap:.75rem;padding:.45rem .75rem;transition:all .15s;display:flex}.port-row-card:hover{background:var(--bg-hover);border-color:var(--primary)}.port-number-badge{background:var(--bg);border:1px solid var(--border);border-radius:4px;justify-content:center;align-items:baseline;min-width:68px;padding:.2rem .55rem;display:inline-flex}.port-prefix{color:var(--text-dim);margin-right:1px;font-size:.7rem}.port-digits{font-family:var(--font-mono,monospace);color:var(--primary);font-size:.85rem;font-weight:700}.port-info-main{flex-direction:column;flex:1;gap:.15rem;display:flex;overflow:hidden}.port-header-line{align-items:center;gap:.5rem;display:flex}.port-proto-tag{text-transform:uppercase;letter-spacing:.03em;border-radius:3px;padding:.05rem .35rem;font-size:.65rem;font-weight:700}.port-proto-tag.proto-srt{color:#2563eb;background:#3b82f61f;border:1px solid #3b82f659}.port-proto-tag.proto-udp{color:#059669;background:#10b9811f;border:1px solid #10b98159}.port-proto-tag.proto-rtmp{color:#dc2626;background:#ef44441f;border:1px solid #ef444459}.port-proto-tag.proto-hls{color:#0284c7;background:#0ea5e91f;border:1px solid #0ea5e959}.port-proto-tag.proto-webrtc{color:#4f46e5;background:#6366f11f;border:1px solid #6366f159}.port-proto-tag.proto-moq{color:#9333ea;background:#a855f71f;border:1px solid #a855f759}.port-proto-tag.proto-http,.port-proto-tag.proto-https{color:#475569;background:#64748b1f;border:1px solid #64748b59}[data-theme=dark] .port-proto-tag.proto-srt{color:#60a5fa;background:#3b82f633;border-color:#3b82f666}[data-theme=dark] .port-proto-tag.proto-udp{color:#34d399;background:#10b98133;border-color:#10b98166}[data-theme=dark] .port-proto-tag.proto-rtmp{color:#f87171;background:#ef444433;border-color:#ef444466}[data-theme=dark] .port-proto-tag.proto-hls{color:#38bdf8;background:#0ea5e933;border-color:#0ea5e966}[data-theme=dark] .port-proto-tag.proto-webrtc{color:#818cf8;background:#6366f133;border-color:#6366f166}[data-theme=dark] .port-proto-tag.proto-moq{color:#c084fc;background:#a855f733;border-color:#a855f766}[data-theme=dark] .port-proto-tag.proto-http,[data-theme=dark] .port-proto-tag.proto-https{color:#cbd5e1;background:#94a3b833;border-color:#94a3b866}.port-stream-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:600;overflow:hidden}.port-description{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;font-size:.72rem;overflow:hidden}.port-status-col{flex-shrink:0}.port-status-pill{border-radius:12px;align-items:center;gap:.35rem;padding:.15rem .5rem;font-size:.7rem;font-weight:600;display:inline-flex}.port-status-pill .status-dot{border-radius:50%;width:5px;height:5px}.port-status-pill.status-active{color:#16a34a;background:#22c55e1f;border:1px solid #22c55e4d}[data-theme=dark] .port-status-pill.status-active{color:#4ade80}.port-status-pill.status-active .status-dot{background:#22c55e;box-shadow:0 0 5px #22c55e}.port-status-pill.status-listening{color:#0284c7;background:#38bdf81a;border:1px solid #38bdf840}[data-theme=dark] .port-status-pill.status-listening{color:#38bdf8}.port-status-pill.status-listening .status-dot{background:#0284c7}[data-theme=dark] .port-status-pill.status-listening .status-dot{background:#38bdf8}.port-status-pill.status-disabled{background:var(--bg);color:var(--text-dim);border:1px solid var(--border)}.port-status-pill.status-disabled .status-dot{background:#94a3b8}.port-copy-btn{background:var(--bg);border:1px solid var(--border);cursor:pointer;color:var(--text-dim);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:.3rem .4rem;transition:all .15s;display:inline-flex}.port-copy-btn:hover{background:var(--bg-hover);color:var(--text);border-color:var(--primary)}.port-copy-btn.copied{color:#16a34a;background:#22c55e26;border-color:#22c55e}[data-theme=dark] .port-copy-btn.copied{color:#4ade80}.ports-dropdown-footer{background:var(--bg);border-top:1px solid var(--border);padding:.65rem 1.25rem}.ports-tip{color:var(--text-dim);font-size:.72rem}.ports-empty-state{color:var(--text-dim);justify-content:center;align-items:center;padding:2.5rem 1rem;font-size:.8rem;display:flex}.density-selector-group{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);align-items:center;gap:.6rem;padding:.25rem .5rem;display:flex;box-shadow:0 1px 3px #0000000d}.density-label{color:var(--text-dim);-webkit-user-select:none;user-select:none;font-size:.78rem;font-weight:500}.density-buttons{align-items:center;gap:.25rem;display:flex}.density-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;padding:.2rem .6rem;font-size:.75rem;font-weight:600;transition:all .15s}.density-btn:hover{color:var(--text);background:var(--bg-hover)}.density-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 1px 4px #3b82f64d}.stream-management-container{flex-direction:column;gap:1.5rem;display:flex}.density-compact .stream-management-container{gap:1rem}.density-compact .stream-section{padding:.85rem 1rem}.density-compact .stream-section-header{margin-bottom:.75rem;padding-bottom:.5rem}.density-compact .stream-section-title h2{font-size:1.05rem}.density-compact .stream-row{gap:.6rem;min-height:38px;padding:.4rem .75rem}.density-compact .item-name{font-size:.84rem}.density-compact .item-id{min-width:38px;font-size:.75rem}.density-compact .protocol-badge{padding:.1rem .4rem;font-size:.68rem}.density-compact .provider-tag{padding:.05rem .3rem;font-size:.65rem}.density-compact .assigned-outputs-pill{min-width:55px;padding:.1rem .4rem;font-size:.66rem}.density-compact .bitrate{min-width:65px;font-size:.74rem}.density-compact .status-bar{width:46px;height:6px}.density-compact .source-badge{gap:.25rem;padding:.15rem .45rem;font-size:.68rem}.density-compact .badge-text{max-width:95px}.density-compact .codec-info{min-width:80px;font-size:.68rem}.density-compact .icon-btn{padding:.2rem}.density-compact .icon-btn svg{width:14px;height:14px}.density-ultra .stream-management-container{gap:.75rem}.density-ultra .stream-section{padding:.6rem .85rem}.density-ultra .stream-section-header{margin-bottom:.5rem;padding-bottom:.35rem}.density-ultra .stream-section-title h2{font-size:.95rem}.density-ultra .stream-section-header .btn-primary{padding:.3rem .6rem;font-size:.78rem}.density-ultra .streams-table{gap:.25rem}.density-ultra .stream-row{border-radius:4px;gap:.45rem;min-height:30px;padding:.25rem .55rem}.density-ultra .color-dot{width:7px;height:7px}.density-ultra .color-dot-sm{width:5px;height:5px}.density-ultra .item-name{font-size:.76rem}.density-ultra .item-id{min-width:32px;font-size:.68rem}.density-ultra .protocol-badge{border-radius:3px;padding:.05rem .3rem;font-size:.62rem}.density-ultra .provider-tag{padding:.02rem .25rem;font-size:.6rem}.density-ultra .assigned-outputs-pill{min-width:48px;padding:.05rem .35rem;font-size:.62rem}.density-ultra .connection-status-dot{min-width:12px;font-size:.72rem}.density-ultra .bitrate{min-width:55px;font-size:.68rem}.density-ultra .status-bar{width:36px;height:5px}.density-ultra .output-source-badges{gap:.3rem;min-width:200px}.density-ultra .source-badge{border-radius:4px;gap:.2rem;padding:.1rem .35rem;font-size:.62rem}.density-ultra .badge-text{max-width:80px}.density-ultra .active-glow,.density-ultra .backup-glow,.density-ultra .pattern-glow{padding:.02rem .2rem;font-size:.52rem}.density-ultra .codec-info{min-width:65px;font-size:.62rem}.density-ultra .transcode-badge{padding:.05rem .3rem;font-size:.6rem}.density-ultra .row-actions{gap:.25rem}.density-ultra .icon-btn{border-radius:3px;padding:.15rem}.density-ultra .icon-btn svg{width:12px;height:12px}.density-nano .stream-management-container{gap:.5rem}.density-nano .stream-section{border-radius:4px;padding:.45rem .65rem}.density-nano .stream-section-header{margin-bottom:.35rem;padding-bottom:.25rem}.density-nano .stream-section-title h2{font-size:.85rem}.density-nano .count-badge{padding:.05rem .35rem;font-size:.65rem}.density-nano .stream-section-header .btn-primary{border-radius:3px;padding:.2rem .45rem;font-size:.72rem}.density-nano .stream-section-header .btn-primary svg{width:13px;height:13px}.density-nano .streams-table{gap:.15rem}.density-nano .stream-row{border-radius:3px;gap:.35rem;min-height:24px;padding:.15rem .4rem}.density-nano .color-strip-indicator{border-top-left-radius:3px;border-bottom-left-radius:3px;width:3px}.density-nano .color-dot{width:6px;height:6px}.density-nano .color-dot-sm{width:4px;height:4px}.density-nano .item-name{font-size:.72rem;font-weight:500}.density-nano .item-name-cell{gap:.35rem;min-width:110px}.density-nano .item-id{min-width:28px;font-size:.62rem}.density-nano .protocol-badge{border-radius:2px;padding:.02rem .25rem;font-size:.58rem}.density-nano .provider-tag{padding:.01rem .2rem;font-size:.55rem}.density-nano .assigned-outputs-pill{min-width:40px;padding:.02rem .25rem;font-size:.58rem}.density-nano .connection-status-dot{min-width:10px;font-size:.65rem}.density-nano .bitrate{min-width:48px;font-size:.64rem}.density-nano .status-bar{border-radius:2px;width:28px;height:4px}.density-nano .output-source-badges{gap:.2rem;min-width:160px}.density-nano .source-badge{border-radius:3px;gap:.15rem;padding:.05rem .25rem;font-size:.58rem}.density-nano .badge-text{max-width:65px}.density-nano .active-glow,.density-nano .backup-glow,.density-nano .pattern-glow{border-radius:2px;padding:.01rem .15rem;font-size:.48rem}.density-nano .codec-info{min-width:55px;font-size:.58rem}.density-nano .transcode-badge{padding:.02rem .2rem;font-size:.55rem}.density-nano .row-actions{gap:.15rem}.density-nano .icon-btn{border-radius:2px;padding:.1rem}.density-nano .icon-btn svg{width:11px;height:11px}.stream-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:0 4px 12px #00000026}.stream-section-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;display:flex}.stream-section-title{align-items:center;gap:.75rem;display:flex}.stream-section-title h2{margin:0;font-size:1.25rem;font-weight:600}.count-badge{background:var(--bg-hover);color:var(--primary);border:1px solid var(--border);border-radius:999px;padding:.2rem .6rem;font-size:.8rem;font-weight:700}.streams-table{flex-direction:column;gap:.5rem;display:flex}.stream-row{background:var(--bg);border:1px solid var(--border);border-radius:6px;align-items:center;gap:.75rem;padding:.75rem 1rem;transition:all .2s;display:flex;position:relative}.input-item-row{cursor:pointer}.stream-row-top,.stream-row-bottom,.stream-row-url,.stream-identity-group,.stream-assignment-group,.stream-metrics-group{display:contents}.stream-row:hover{background:var(--bg-hover);z-index:10;border-color:#fff3}.row-selected{z-index:15;background:#ffffff0a!important;border-width:1.5px!important}.row-dimmed{opacity:.3;filter:grayscale(.6);transition:opacity .2s}.row-dimmed:hover{opacity:.8}.row-highlighted{z-index:12;box-shadow:0 0 14px #3b82f659;border-color:var(--primary)!important;background:#3b82f614!important}.assigned-outputs-pill{color:var(--text-dim);border:1px solid var(--border);text-align:center;background:#ffffff0f;border-radius:12px;min-width:65px;padding:.15rem .5rem;font-size:.72rem;font-weight:600;transition:all .2s}.assigned-outputs-pill.has-outputs{color:#60a5fa;background:#3b82f626;border-color:#3b82f64d}.filter-active-pill{border:1px solid var(--primary);color:#93c5fd;background:#3b82f626;border-radius:20px;align-items:center;gap:.5rem;padding:.25rem .75rem;font-size:.8rem;animation:.2s fadeIn;display:inline-flex}.filter-clear-btn{color:#f87171;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.1rem .4rem;font-size:.75rem;font-weight:700;transition:background .15s}.filter-clear-btn:hover{background:#ef444433}.color-strip-indicator{border-top-left-radius:6px;border-bottom-left-radius:6px;width:4px;position:absolute;top:0;bottom:0;left:0}.color-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px;display:inline-block;box-shadow:0 0 6px #00000080}.color-dot-sm{border-radius:50%;flex-shrink:0;width:7px;height:7px;display:inline-block}.item-name-cell{flex:1;align-items:center;gap:.5rem;min-width:140px;display:flex}.item-name{color:var(--text);font-size:.95rem;font-weight:600}.provider-tag{color:var(--text-dim);background:#ffffff0d;border-radius:4px;padding:.1rem .4rem;font-size:.7rem}.item-id{color:var(--text-dim);min-width:45px;font-family:monospace;font-size:.85rem}.connection-status-dot{color:var(--text-dim);text-align:center;min-width:16px;font-size:.85rem}.output-source-badges{flex-wrap:wrap;align-items:center;gap:.5rem;min-width:260px;display:flex}.source-badge{border:1px solid var(--border);background:#00000040;border-radius:6px;align-items:center;gap:.35rem;padding:.25rem .6rem;font-size:.75rem;font-weight:500;transition:all .2s;display:inline-flex}.source-badge.source-active,.source-badge.source-active-backup{border-width:1.5px}.source-badge.unassigned{color:var(--text-dim);border-style:dashed}.badge-text{text-overflow:ellipsis;white-space:nowrap;max-width:110px;overflow:hidden}.active-glow{color:#000;letter-spacing:.5px;background:#22c55e;border-radius:3px;padding:.05rem .3rem;font-size:.6rem;font-weight:800;animation:1.5s infinite pulse}.backup-glow{color:#000;letter-spacing:.5px;background:#f59e0b;border-radius:3px;padding:.05rem .3rem;font-size:.6rem;font-weight:800;animation:1.2s infinite pulse}.backup-icon{color:#f59e0b}.pattern-badge{background:#a855f726;border-color:#a855f7!important}.fallback-pattern-badge{background:#a855f714;border-style:dashed;border-color:#a855f766}.fallback-pattern-badge.source-active-pattern{background:#a855f733;border-style:solid;box-shadow:0 0 12px #a855f766;border-color:#a855f7!important}.pattern-glow{color:#fff;letter-spacing:.5px;background:#a855f7;border-radius:3px;padding:.05rem .3rem;font-size:.6rem;font-weight:800;animation:1.2s infinite pulse}.row-actions{align-items:center;gap:.4rem;margin-left:auto;display:flex}.color-picker-row{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.color-swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:24px;height:24px;padding:0;transition:transform .15s,border-color .15s}.color-swatch:hover{transform:scale(1.15)}.color-swatch.selected{border-color:#fff;transform:scale(1.15);box-shadow:0 0 8px #ffffff80}.color-input-custom{cursor:pointer;background:0 0;border:none;border-radius:50%;width:28px;height:28px;padding:0;overflow:hidden}.form-help-text{color:var(--text-dim);margin-top:.3rem;font-size:.75rem;line-height:1.3;display:block}.protocol-badge{background:var(--bg-hover);color:var(--text-dim);border:1px solid #0000;border-radius:4px;align-items:center;gap:.25rem;padding:.15rem .5rem;font-size:.75rem;font-weight:600;display:inline-flex}.protocol-badge-srt{color:#60a5fa;background:#3b82f626;border-color:#3b82f659}.protocol-badge-udp{color:#34d399;background:#10b98126;border-color:#10b98159}.protocol-badge-hls{color:#38bdf8;background:#0ea5e926;border-color:#0ea5e966}.protocol-badge-webrtc{color:#818cf8;background:#6366f126;border-color:#6366f166}.protocol-badge-moq{color:#c084fc;background:#a855f726;border-color:#a855f766}.protocol-badge-rtmp{color:#f87171;background:#ef444426;border-color:#ef444466}.bitrate{color:var(--text-dim);text-align:right;min-width:80px;font-size:.8rem}.status-bar-wrapper{cursor:pointer;align-items:center;padding:6px 0;display:flex;position:relative}.status-bar-wrapper:hover{z-index:9999}.status-bar{background:var(--red);border-radius:4px;width:60px;height:8px;transition:all .2s}.status-bar-wrapper:hover .status-bar{filter:brightness(1.2);box-shadow:0 0 8px #22c55e66}.status-tooltip{z-index:10000;pointer-events:none;background:#1e293b;border:1px solid #334155;border-radius:6px;min-width:260px;animation:.15s fadeIn;position:absolute;top:calc(100% + 6px);right:0;overflow:hidden;box-shadow:0 12px 30px #000000b3}.status-tooltip-header{color:#94a3b8;letter-spacing:.5px;text-transform:uppercase;background:#1e2936;border-bottom:1px solid #334155;padding:6px 12px;font-size:.75rem;font-weight:700}.status-tooltip-body{color:#f1f5f9;padding:8px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.78rem;line-height:1.5}.status-tooltip-row{justify-content:space-between;gap:12px;padding:2px 0;display:flex}.status-tooltip-row .label{color:#94a3b8}.status-tooltip-row .value{font-weight:600}.status-tooltip-row .val-ok{color:#4ade80}.status-tooltip-row .val-warn{color:#facc15}.status-tooltip-row .val-err{color:#f87171}.codec-info{color:var(--text-dim);align-items:center;gap:.3rem;min-width:95px;font-size:.75rem;display:inline-flex}.resolution-tag{letter-spacing:.02em;font-size:.75rem;font-weight:700;color:#38bdf8!important;background:0 0!important}.transcode-badge{color:#38bdf8;background:#38bdf81f;border:1px solid #38bdf84d;border-radius:4px;padding:.1rem .4rem;font-size:.7rem;font-weight:700}.mediamtx-url-container{flex:0 auto;align-items:center;gap:.35rem;max-width:440px;display:inline-flex}.input-item-row .mediamtx-url-container{flex:0 auto;min-width:0;max-width:220px}.input-item-row .mediamtx-url{max-width:175px}.mediamtx-url{cursor:pointer;border-radius:5px;align-items:center;gap:.45rem;max-width:380px;padding:.22rem .55rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.73rem;text-decoration:none;transition:all .2s;display:inline-flex;overflow:hidden}.mediamtx-url .url-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mediamtx-url .external-icon{opacity:.75;flex-shrink:0}.protocol-pill-tag{letter-spacing:.04em;text-transform:uppercase;-webkit-user-select:none;user-select:none;border-radius:3px;flex-shrink:0;padding:.05rem .35rem;font-size:.65rem;font-weight:700}.mediamtx-url.hls-url{color:#38bdf8;background:#38bdf81f;border:1px solid #38bdf859}.mediamtx-url.hls-url:hover{color:#e0f2fe;background:#38bdf838;border-color:#38bdf8}.protocol-pill-tag.hls-tag{color:#fff;background:#0284c7}.mediamtx-url.webrtc-url{color:#818cf8;background:#6366f11f;border:1px solid #6366f159}.mediamtx-url.webrtc-url:hover{color:#eef2ff;background:#6366f138;border-color:#818cf8}.protocol-pill-tag.webrtc-tag{color:#fff;background:#4f46e5}.mediamtx-url.moq-url{color:#c084fc;background:#a855f71f;border:1px solid #a855f759}.mediamtx-url.moq-url:hover{color:#faf5ff;background:#a855f738;border-color:#c084fc}.protocol-pill-tag.moq-tag{color:#fff;background:#9333ea}.mediamtx-url.rtmp-url{color:#f87171;background:#ef44441f;border:1px solid #ef444459}.mediamtx-url.rtmp-url:hover{color:#fef2f2;background:#ef444438;border-color:#f87171}.protocol-pill-tag.rtmp-tag{color:#fff;background:#dc2626}.mediamtx-url.rtmp-dest{color:#fb923c;background:#fb923c1f;border:1px solid #fb923c59}.mediamtx-url.rtmp-dest:hover{color:#fff7ed;background:#fb923c38;border-color:#fb923c}.copy-url-btn{border:1px solid var(--border);cursor:pointer;color:var(--text-dim);background:#ffffff14;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;height:26px;padding:.28rem .42rem;transition:all .15s;display:inline-flex}.copy-url-btn:hover{background:var(--bg-hover);color:#fff;border-color:#38bdf8}.copy-url-btn.copied{color:#4ade80;background:#22c55e33;border-color:#22c55e}.icon-btn{border:1px solid var(--border);cursor:pointer;color:var(--text-dim);background:0 0;border-radius:4px;align-items:center;padding:.3rem;transition:all .15s;display:flex}.icon-btn:hover{background:var(--bg-hover);color:var(--text)}.icon-btn.enabled{color:var(--green);border-color:var(--green)}.icon-btn.disabled{color:var(--text-dim)}.icon-btn.danger:hover{border-color:var(--red);color:var(--red)}.icon-btn.alarm{color:var(--red);border-color:var(--red);animation:1s infinite pulse}.icon-btn.wdg-on{color:var(--green)}.icon-btn.wdg-off{color:var(--text-dim)}.icon-btn.add-output:hover{border-color:var(--primary);color:var(--primary)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.modal-overlay{z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;width:580px;max-width:95vw;max-height:85vh;display:flex}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.modal-header h3{font-size:1.1rem}.modal-body{padding:1.5rem;overflow-y:auto}.modal-footer{border-top:1px solid var(--border);justify-content:flex-end;gap:.5rem;padding:1rem 1.5rem;display:flex}.modal-body hr{border:none;border-top:1px solid var(--border);margin:1rem 0}.modal-body h4{color:var(--text-dim);margin-bottom:.75rem;font-size:.95rem}.form-row{align-items:flex-start;gap:1rem;margin-bottom:.85rem;display:flex}.form-row label{width:140px;color:var(--text-dim);flex-shrink:0;padding-top:.45rem;font-size:.9rem}.form-field{flex-direction:column;flex:1;min-width:0;display:flex}.form-field select,.form-field input{width:100%}.form-row input,.form-row select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:4px;flex:1;padding:.5rem .7rem;font-size:.9rem}.form-row input:focus,.form-row select:focus{border-color:var(--primary);outline:none}.form-row.checkbox label{cursor:pointer;align-items:center;gap:.5rem;width:auto;padding-top:0;display:flex}.form-row.checkbox input{width:auto}.info-box{border:1px solid var(--primary);color:var(--text-dim);background:#3b82f61a;border-radius:4px;margin-bottom:.75rem;padding:.6rem 1rem;font-size:.85rem}.btn-primary{background:var(--primary);color:#fff;border-radius:var(--radius);cursor:pointer;border:none;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:.9rem;display:inline-flex}.btn-primary:hover{background:var(--primary-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--bg-hover);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;padding:.5rem 1rem;font-size:.9rem}.btn-secondary:hover{background:var(--border)}.file-btn{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;display:inline-flex}.file-btn:hover{background:var(--border)}.system-page h2{margin-bottom:1.5rem;font-size:1.4rem}.system-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1rem;padding:1.5rem}.system-section h3{margin-bottom:.5rem;font-size:1.05rem}.system-section p{color:var(--text-dim);margin-bottom:1rem;font-size:.9rem}.network-iface-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.75rem;padding:1rem 1.25rem}.network-iface-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:.75rem;padding-bottom:.5rem;display:flex}.network-iface-title{align-items:center;gap:.5rem;font-size:.95rem;font-weight:600;display:flex}.theme-toggle-btn{border:1px solid var(--border);border-radius:var(--radius);color:var(--text-dim);cursor:pointer;background:0 0;justify-content:center;align-items:center;gap:.6rem;padding:.6rem .8rem;font-size:.95rem;transition:all .15s;display:flex}.theme-toggle-btn:hover{background:var(--bg-hover);color:var(--text);border-color:var(--primary)}[data-theme=dark]{--bg:#0f1117;--bg-card:#1a1d27;--bg-hover:#252836;--border:#2a2d3a;--text:#e4e6eb;--text-dim:#8b8e98;--primary:#3b82f6;--primary-hover:#2563eb}[data-theme=dark] .login-page{background:linear-gradient(135deg,#0f1117 0%,#1a1d27 100%)}[data-theme=dark] .output-row{background:#00000026}[data-theme=dark] .modal-overlay{background:#0009}.network-page{max-width:820px}.network-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-top:1rem;padding:1.25rem 1.5rem}.network-section h3{margin-bottom:.4rem;font-size:1.05rem}.section-desc{color:var(--text-dim);margin-bottom:1rem;font-size:.88rem}.rescue-box{border:1px solid var(--green);border-radius:var(--radius);background:#22c55e14;align-items:flex-start;gap:.9rem;margin-bottom:1rem;padding:.9rem 1.1rem;display:flex}.rescue-icon{color:var(--green);background:#22c55e26;border-radius:6px;flex-shrink:0;padding:.4rem}.rescue-title{margin-bottom:.25rem;font-size:.95rem;font-weight:600}.rescue-body{color:var(--text);font-size:.88rem}.rescue-note{color:var(--text-dim);margin-top:.35rem;font-size:.8rem}.iface-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.75rem;padding:1rem 1.25rem}.iface-card.editing{border-color:var(--primary)}.iface-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:.75rem;padding-bottom:.5rem;display:flex}.iface-title{align-items:center;gap:.5rem;font-size:.95rem;font-weight:600;display:flex}.iface-title .up{color:var(--green)}.mode-badge{text-transform:uppercase;border-radius:4px;padding:.15rem .55rem;font-size:.72rem;font-weight:700}.mode-badge.dhcp{color:var(--text-dim);background:#6b72802e}.mode-badge.static{color:var(--primary);background:#3b82f626}.iface-readonly{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem 1.2rem;display:grid}.ro-row{flex-direction:column;gap:.15rem;display:flex}.ro-row span{color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em;font-size:.75rem}.ro-row strong{color:var(--text-dim);font-size:.95rem;font-weight:600}.iface-edit .form-row{margin-bottom:.7rem}.iface-edit .form-row label{width:160px}.edit-actions{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}.error-box{border:1px solid var(--red);color:var(--red);border-radius:var(--radius);background:#ef44441a;margin-bottom:1rem;padding:.7rem 1rem;font-size:.9rem}.success-box{border:1px solid var(--green);color:var(--green);border-radius:var(--radius);background:#22c55e1a;margin-bottom:1rem;padding:.7rem 1rem;font-size:.9rem}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.cred-form{max-width:480px;margin-top:1rem}.cred-form .form-row{margin-bottom:.7rem}.cred-form .form-row label{width:160px}.mediamtx-note{line-height:1.5}.mediamtx-note p{margin:.4rem 0}.mediamtx-note ul{margin:.4rem 0 .4rem 1.2rem;padding:0}.mediamtx-note li{margin:.2rem 0}.mediamtx-note code{word-break:break-all;background:#00000040;border-radius:4px;padding:.1rem .35rem;font-size:.8rem}.mediamtx-note .note-dim{color:var(--text-dim);font-size:.82rem}.modal.snapshot-modal{width:740px;max-width:95vw}.snapshot-header-icon{width:36px;height:36px;color:var(--primary);background:#3b82f626;border:1px solid #3b82f64d;border-radius:8px;justify-content:center;align-items:center;display:flex}.snapshot-modal-body{background:#0003;padding:1.25rem}.snapshot-loading,.snapshot-error{color:var(--text-dim);flex-direction:column;justify-content:center;align-items:center;padding:3rem 1rem;font-size:.9rem;display:flex}.spin-icon{animation:1s linear infinite spin}.snapshot-img-wrapper{background:#000;border-radius:6px;overflow:hidden}.snapshot-img{transition:transform .2s}.snapshot-img:hover{transform:scale(1.01)}.stream-log-modal{background:#0b1329;border:1px solid #ffffff24;border-radius:10px;flex-direction:column;width:95%;max-width:980px;max-height:90vh;margin:auto;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #000000d9}.log-subtitle{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:3px;display:flex}.log-type-tag{color:#38bdf8;background:#38bdf81f;border:1px solid #38bdf840;border-radius:4px;padding:1px 6px;font-size:.72rem;font-weight:700}.log-limit-badge{color:var(--text-dim);background:#ffffff0d;border-radius:4px;padding:1px 6px;font-size:.72rem}.log-modal-body{background:#0003;flex:1;padding:1rem 1.25rem;overflow-y:auto}.log-modal-grid{flex-direction:column;gap:1rem;display:flex}@media (width>=860px){.log-modal-grid{grid-template-columns:280px 1fr;align-items:stretch;gap:1rem;display:grid}}.log-snapshot-box{background:#070d1e;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;display:flex;overflow:hidden}.log-snapshot-header{background:#ffffff08;border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:.45rem .75rem;display:flex}.icon-btn-sm{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:3px;transition:all .15s;display:flex}.icon-btn-sm:hover:not(:disabled){color:#fff;background:#ffffff1a}.log-snapshot-preview{aspect-ratio:16/9;background:#000;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.log-snapshot-img{object-fit:cover;width:100%;height:100%;display:block}.log-snapshot-loading,.log-snapshot-error{color:var(--text-dim);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:1rem;display:flex}.log-snapshot-expand-btn{color:#fff;cursor:pointer;opacity:.8;background:#000000a6;border:1px solid #fff3;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;transition:opacity .15s;display:flex;position:absolute;top:6px;right:6px}.log-snapshot-expand-btn:hover{opacity:1;background:#000000d9}.log-snapshot-footer{text-align:center;background:#00000040;border-top:1px solid #ffffff0d;padding:.4rem .75rem}.log-terminal-container{background:#060a14;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;display:flex;overflow:hidden}.log-toolbar{background:#00000059;border-bottom:1px solid #ffffff14;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .85rem;display:flex}.log-toggle-label{color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.4rem;font-size:.78rem;display:flex}.log-toolbar-actions{align-items:center;gap:.4rem;display:flex}.log-terminal-viewer{min-height:280px;max-height:420px;font-family:var(--font-mono,monospace);color:#e2e8f0;-webkit-user-select:text;user-select:text;flex:1;padding:.75rem 1rem;font-size:.76rem;line-height:1.5;overflow-y:auto}.log-lines-list{flex-direction:column;gap:.25rem;display:flex}.log-line{word-break:break-word;border-bottom:1px solid #ffffff08;align-items:flex-start;gap:.5rem;padding:.18rem 0;display:flex}.log-time{color:#64748b;flex-shrink:0;min-width:62px;font-size:.72rem}.log-badge{text-transform:uppercase;letter-spacing:.03em;border-radius:3px;flex-shrink:0;padding:1px 5px;font-size:.65rem;font-weight:700}.log-badge.info{color:#38bdf8;background:#38bdf826;border:1px solid #38bdf84d}.log-badge.warn{color:#f59e0b;background:#f59e0b26;border:1px solid #f59e0b4d}.log-badge.error{color:#ef4444;background:#ef444426;border:1px solid #ef44444d}.log-badge.debug{color:#94a3b8;background:#94a3b826;border:1px solid #94a3b84d}.log-msg{color:#f1f5f9;flex:1}.log-empty-state{height:240px;color:var(--text-dim);text-align:center;flex-direction:column;justify-content:center;align-items:center;font-size:.82rem;display:flex}.log-snapshot-lightbox{z-index:1200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.log-snapshot-lightbox-card{background:#0b1329;border:1px solid #fff3;border-radius:8px;max-width:90vw;overflow:hidden;box-shadow:0 25px 50px #000c}