:root{--bg-primary: #0f1923;--bg-secondary: #1a2733;--bg-card: #1e3044;--accent: #00c896;--accent-dim: #00a67a;--text-primary: #e8edf2;--text-secondary: #8899aa;--border: #2a3f52;--danger: #ff4d6a;--logo-bg: transparent}:root[data-theme=light]{--bg-primary: #f3f5f8;--bg-secondary: #ffffff;--bg-card: #ffffff;--accent: #00a67a;--accent-dim: #008c66;--text-primary: #1a2733;--text-secondary: #6c7a89;--border: #dde3ea;--danger: #d63550;--logo-bg: transparent}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow:hidden}#app{height:100%;display:flex;flex-direction:column}#app-shell{height:100%;min-height:0;display:flex;flex-direction:column}.header,.tab-strip,.site-footer{flex:0 0 auto}.header{background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center}.logo img{height:52px;width:auto;object-fit:contain;display:block}:root:not([data-theme=light]) .logo img{filter:brightness(0) invert(1)}.header-status{display:flex;align-items:center;gap:20px}.status-badge{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.stream-count{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-size:13px;font-weight:500}.stream-count strong{color:var(--accent)}.icon-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);text-decoration:none;font-size:16px;cursor:pointer;transition:all .2s}.icon-btn:hover{color:var(--accent);border-color:var(--accent)}.logout-btn:hover{color:var(--danger)!important;border-color:var(--danger)!important}.tab-strip{display:flex;gap:4px;padding:0 32px;background:var(--bg-secondary);border-bottom:1px solid var(--border)}.tab-btn{background:transparent;border:none;color:var(--text-secondary);padding:12px 18px;font-size:14px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.subheader{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 32px;border-bottom:1px solid var(--border);background:var(--bg-secondary)}.breadcrumb{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--text-secondary);flex-wrap:wrap;min-width:0}.breadcrumb a{color:var(--text-secondary);text-decoration:none;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s}.breadcrumb a:hover{color:var(--accent);background:var(--bg-card)}.breadcrumb .sep{color:var(--text-secondary);opacity:.4;padding:0 2px}.breadcrumb .current{color:var(--text-primary);font-weight:500;padding:4px 8px}.view-title{font-size:13px;color:var(--text-secondary);font-weight:500;letter-spacing:.02em}.view-title strong{color:var(--text-primary);font-weight:600}.subheader-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.main{padding:28px 32px;flex:1 1 auto;overflow-y:auto;min-height:0}.site-footer{text-align:center;padding:16px;font-size:12px;color:var(--text-secondary);border-top:1px solid var(--border);background:var(--bg-secondary)}.site-footer a{color:var(--accent);text-decoration:none}.site-footer a:hover{text-decoration:underline}.site-footer .version{margin-left:10px;padding:2px 8px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--text-secondary);opacity:.85}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center}.empty-icon{width:88px;height:88px;background:var(--bg-secondary);border:2px dashed var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;margin-bottom:24px}.empty-state h2{font-size:22px;font-weight:600;margin-bottom:8px}.empty-state p{color:var(--text-secondary);font-size:14px;max-width:420px;line-height:1.6}.empty-state code{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:13px;color:var(--accent)}.view-loading{display:flex;align-items:center;justify-content:center;min-height:240px;color:var(--text-secondary);font-size:13px;gap:10px}.view-loading .spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.section-error{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:4px 0}.view-enter-active,.view-leave-active{transition:opacity .18s ease}.view-enter-from,.view-leave-to{opacity:0}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:12px 18px;font-size:13px;color:var(--text-primary);box-shadow:0 4px 16px #0003;z-index:50;animation:toast-in .2s ease}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.toast.error{border-color:var(--danger);color:var(--danger)}.btn{padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-primary);transition:all .2s;display:inline-flex;align-items:center;gap:8px}.btn:hover{border-color:var(--text-secondary)}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-danger:hover{background:#e03a55;border-color:#e03a55}.btn-small{padding:4px 10px;font-size:12px}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{filter:brightness(1.08);border-color:var(--accent)}.settings-shell{display:flex;flex-direction:column;gap:18px}.settings-header{display:flex;align-items:center;gap:14px}.settings-header h2{font-size:18px;font-weight:600}.settings-header .host{color:var(--text-secondary);font-weight:400;font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.settings-body{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}.settings-nav{display:flex;flex-direction:column;gap:2px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:8px}.settings-nav-item{text-align:left;background:transparent;border:none;border-left:2px solid transparent;color:var(--text-secondary);padding:10px 14px;font-size:14px;font-weight:500;border-radius:6px;cursor:pointer;transition:color .15s,background .15s,border-color .15s}.settings-nav-item:hover{color:var(--text-primary);background:var(--bg-primary)}.settings-nav-item.active{color:var(--accent);background:var(--bg-primary);border-left-color:var(--accent)}.settings-main{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:20px 24px;min-height:320px}.settings-main .settings-section:has(>.view-loading),.settings-main .settings-section:has(>.section-error){max-width:none}.settings-main .view-loading,.settings-main .section-error{grid-column:1 / -1;min-height:280px}.settings-main .section-error{align-items:center;justify-content:center;text-align:center}.settings-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:-4px 0 20px}.settings-tab{background:transparent;border:none;color:var(--text-secondary);padding:10px 16px;font-size:14px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.settings-tab:hover{color:var(--text-primary)}.settings-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.form-row>label{font-size:12px;font-weight:600;color:var(--text-secondary);letter-spacing:.02em}.form-row input:where([type=text],[type=url],[type=password],[type=email],[type=number]),.form-row select{background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;padding:9px 12px;color:var(--text-primary);font:inherit;outline:none}.form-row input:where([type=text],[type=url],[type=password],[type=email],[type=number]):focus,.form-row select:focus{border-color:var(--accent)}.form-row .checks{display:flex;flex-wrap:wrap;gap:14px}.form-row>label.check,.form-row .checks label.check{font:inherit;font-weight:400;color:var(--text-primary);letter-spacing:normal}.check{display:inline-flex;align-items:center;gap:6px}.form-error{color:var(--danger);font-size:13px;margin:8px 0 0}.settings-shell .settings-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px 24px;align-items:start;max-width:1160px}.settings-shell .settings-section>h4,.settings-shell .settings-section>.btn,.settings-shell .settings-section>.error,.settings-shell .settings-section>.muted,.settings-shell .settings-section>.status,.settings-shell .settings-section>.webhook,.settings-shell .settings-section>.stream,.settings-shell .settings-section>.list-table,.settings-shell .settings-section>.slots,.settings-shell .settings-section>.settings-object,.settings-shell .settings-section>.tabbar,.settings-shell .settings-section>.block-label{grid-column:1 / -1}.settings-shell .settings-section>.btn{justify-self:start}.settings-shell .settings-section .webhook,.settings-shell .settings-section .stream{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px 24px;align-items:start}.settings-shell .form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:0}.settings-shell .form-row label{font-size:12px;font-weight:600;color:var(--text-secondary);letter-spacing:.02em}.settings-shell .form-row input,.settings-shell .form-row select{background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;padding:9px 12px;color:var(--text-primary);font:inherit;outline:none}.settings-shell .form-row input:focus,.settings-shell .form-row select:focus{border-color:var(--accent)}.settings-shell .error{color:var(--danger);font-size:13px}.settings-shell .muted{color:var(--text-secondary);font-size:13px}.stream-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(440px,1fr))}.stream-grid:fullscreen,.stream-grid:-webkit-full-screen{background:#000;padding:0;width:100vw;height:100vh;overflow:auto;align-content:start;grid-auto-rows:min-content}.stream-card{background:transparent;border:1px solid var(--border);border-radius:1px;overflow:hidden;position:relative}.stream-card.offline{opacity:.82}.video-container{position:relative;aspect-ratio:16 / 9;background:#000;overflow:hidden}.video-container video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}@media (max-width: 640px){.header{padding:0 16px}.main{padding:16px}}@media (max-width: 768px){.subheader{padding:10px 16px;flex-direction:column;align-items:flex-start}.settings-body{grid-template-columns:1fr}.settings-nav{flex-direction:row;flex-wrap:wrap}}