: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}.sidebar{background:var(--bg-card);border-right:1px solid var(--border);flex-direction:column;gap:1rem;width:220px;padding:1.5rem 1rem;display:flex}.sidebar .logo{align-items:center;gap:.5rem;margin-bottom:1rem;font-size:1.1rem;font-weight:700;display:flex}.nav-links{flex-direction:column;flex:1;gap:.25rem;display:flex}.nav-links a{border-radius:var(--radius);color:var(--text-dim);align-items:center;gap:.6rem;padding:.6rem .8rem;font-size:.95rem;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}.logout-btn{border:1px solid var(--border);border-radius:var(--radius);color:var(--text-dim);cursor:pointer;background:0 0;align-items:center;gap:.6rem;padding:.6rem .8rem;font-size:.95rem;display:flex}.logout-btn:hover{border-color:var(--red);color:var(--red)}.content{flex:1;padding:1.5rem 2rem;overflow-y:auto}.dashboard-header{margin-bottom:1rem}.ws-status{color:var(--text-dim);align-items:center;gap:.5rem;font-size:.85rem;display:flex}.ws-dot{border-radius:50%;width:8px;height:8px}.ws-dot.online{background:var(--green);box-shadow:0 0 6px var(--green)}.ws-dot.offline{background:var(--red)}.stream-management-container{flex-direction:column;gap:2rem;display:flex}.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:border-color .15s,background .15s;display:flex;position:relative;overflow:hidden}.stream-row:hover{background:var(--bg-hover);border-color:#fff3}.color-strip-indicator{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{background:#22c55e1f;box-shadow:0 0 10px #22c55e40;border-color:#22c55e!important}.source-badge.source-active-backup{background:#f59e0b26;box-shadow:0 0 10px #f59e0b4d;border-color:#f59e0b!important}.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}.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-radius:4px;padding:.15rem .5rem;font-size:.75rem;font-weight:600}.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{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:999;pointer-events:none;background:#253342;border:1px solid #3b4e61;border-radius:6px;min-width:250px;animation:.15s fadeIn;position:absolute;top:calc(100% + 4px);left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 10px 25px #0009}.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);min-width:100px;font-size:.75rem}.transcode-badge{background:var(--orange);color:#fff;border-radius:4px;padding:.1rem .4rem;font-size:.7rem;font-weight:600}.mediamtx-url{color:var(--primary);text-overflow:ellipsis;white-space:nowrap;cursor:help;max-width:220px;font-size:.7rem;overflow:hidden}.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:520px;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}