:root{color:#1d2420;background:#ecefed;font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #1d2420;--muted: #6b746e;--line: #cfd5d1;--surface: #ffffff;--surface-soft: #f5f7f6;--stage: #0e1110;--green: #117a55;--green-strong: #0b6445;--brass: #a66e1f;--danger: #b33d33}*{box-sizing:border-box}html{min-width:320px;min-height:100%;background:#ecefed}body{min-width:320px;min-height:100vh;margin:0;background:#ecefed}button,textarea,input{font:inherit;letter-spacing:0}button{-webkit-tap-highlight-color:transparent}button:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid rgba(17,122,85,.28);outline-offset:2px}.app-shell{min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 24px;border-bottom:1px solid #292f2c;background:#151917;color:#f4f5f4}.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;font-size:17px;font-weight:700;text-decoration:none}.brand img{display:block;border-radius:7px;object-fit:contain}.header-actions{display:flex;align-items:center;gap:12px}.direct-badge{display:inline-flex;align-items:center;gap:7px;color:#cbd2ce;font-size:12px}.direct-badge span{width:7px;height:7px;border-radius:50%;background:#38c98c;box-shadow:0 0 0 3px #38c98c1f}.icon-button{position:relative;display:inline-grid;width:38px;height:38px;flex:0 0 38px;place-items:center;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:#3e4842;cursor:pointer}.topbar .icon-button{border-color:#3b423e;background:#202622;color:#e8ebe9}.icon-button:hover:not(:disabled){border-color:#8d9791;background:#f0f3f1}.topbar .icon-button:hover:not(:disabled){background:#2b332e}.icon-button:disabled{cursor:not-allowed;opacity:.42}.icon-button svg,.primary-button svg,.status-bar svg,.password-field svg{width:18px;height:18px;stroke-width:2}.icon-button:after{position:absolute;z-index:10;top:calc(100% + 7px);left:50%;display:none;width:max-content;max-width:140px;transform:translate(-50%);padding:5px 7px;border-radius:4px;background:#151917;color:#fff;content:attr(data-tooltip);font-size:11px;pointer-events:none}.icon-button:hover:after,.icon-button:focus-visible:after{display:block}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,350px);width:min(1440px,100%);min-height:calc(100vh - 64px);margin:0 auto;background:var(--surface)}.viewer{min-width:0;padding:28px;background:#e2e6e3}.video-frame{position:relative;width:100%;overflow:hidden;border-radius:7px;background:var(--stage);box-shadow:0 12px 30px #0d120f29;aspect-ratio:16 / 9}.video-frame>video{display:block;width:100%;height:100%;background:#080a09;object-fit:contain}.video-settings{display:grid;gap:8px;margin:4px 0 12px}.video-frame>video[hidden],.av-stage[hidden]{display:none}.av-stage{position:absolute;inset:0;overflow:hidden;background:#080a09}.av-stage canvas{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}.av-controls{position:absolute;inset:auto 0 0;display:flex;align-items:center;gap:12px;padding:26px 16px 12px;color:#fff;font-size:12px;background:linear-gradient(transparent,#000c)}.av-controls button{border:0;border-radius:4px;padding:7px 10px;background:#ffffff29;color:#fff;cursor:pointer}.av-controls input{width:min(100px,22vw);accent-color:#66b98a}.av-controls button:last-child{margin-left:auto}.video-frame:fullscreen{border-radius:0;height:100%;aspect-ratio:auto}.video-settings select{width:100%;min-width:0;padding:8px;border:1px solid #bcc5bf;border-radius:5px;background:#fbfcfb}.idle-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:20px;background:#101412;color:#f5f6f5;pointer-events:none}.idle-overlay[hidden]{display:none}.idle-overlay img{width:clamp(70px,11vw,112px);height:clamp(70px,11vw,112px);object-fit:contain;opacity:.9}.idle-overlay div{display:grid;gap:5px}.idle-overlay strong{font-size:clamp(18px,2vw,24px)}.idle-overlay span{color:#98a29c;font-size:13px}.video-topline{position:absolute;top:12px;right:12px;left:12px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.live-indicator,.latency-badge,.format-badge{min-width:42px;padding:5px 8px;border:1px solid rgba(255,255,255,.18);border-radius:4px;background:#0a0d0bd1;color:#f5f6f5;font-size:11px;font-weight:700;text-align:center}.video-badges{display:flex;align-items:center;gap:6px}.format-badge{pointer-events:auto}.format-badge:disabled{opacity:1;cursor:default}.format-badge:not(:disabled){cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}.fallback-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--surface);box-shadow:0 16px 48px #00000040}.fallback-dialog::backdrop{background:#090c0a80}.fallback-dialog form{display:grid;gap:16px}.fallback-dialog h2{margin:0;font-size:17px}.fallback-dialog p{margin:0;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}.latency-badge{min-width:72px;color:#d8dfdb;font-variant-numeric:tabular-nums}.latency-badge[data-state=low]{border-color:#38c98c73;color:#bff2d8}.latency-badge[data-state=chasing]{border-color:#f1b84c85;color:#ffe0a4}.latency-badge[data-state=high]{border-color:#ff8a7e80;color:#ffc0ba}.live-indicator[data-state=success]{border-color:#38c98c73;background:#095b3be0}.live-indicator[data-state=error]{border-color:#ff8a7e66;background:#80231de0}.status-bar{display:flex;align-items:center;gap:10px;min-height:48px;margin-top:16px;padding:11px 14px;border-left:3px solid #819089;background:#ffffffad;color:#4f5b54;font-size:13px}.status-bar[data-tone=loading]{border-left-color:var(--brass);color:#72511d}.status-bar[data-tone=success]{border-left-color:var(--green);color:#0b6646}.status-bar[data-tone=warning]{border-left-color:#c47c16;color:#7a4f15}.status-bar[data-tone=error]{border-left-color:var(--danger);color:#8f3028}.source-panel{min-width:0;padding:28px 24px;border-left:1px solid var(--line);background:var(--surface)}.panel-heading{display:flex;align-items:center;justify-content:space-between;min-height:38px;margin-bottom:22px;font-size:15px;font-weight:700}.source-panel form{display:grid;gap:10px}.source-panel label,.login-dialog label{color:#49524d;font-size:12px;font-weight:650}.input-wrap{position:relative}.input-wrap textarea{display:block;width:100%;min-height:150px;resize:vertical;padding:13px 48px 13px 13px;border:1px solid #bcc5bf;border-radius:6px;background:#fbfcfb;color:var(--ink);font-size:13px;line-height:1.6}.input-wrap textarea::placeholder{color:#929b95}.input-tools{position:absolute;top:8px;right:8px;display:grid;gap:6px}.input-tools .icon-button{width:32px;height:32px;flex-basis:32px;background:#f3f5f4}.primary-button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:9px;padding:10px 16px;border:1px solid var(--green);border-radius:6px;background:var(--green);color:#fff;font-weight:700;cursor:pointer}.primary-button:hover:not(:disabled){border-color:var(--green-strong);background:var(--green-strong)}.primary-button:disabled{cursor:wait;opacity:.62}.stream-details{display:grid;gap:0;margin:28px 0 0;border-top:1px solid var(--line)}.stream-details div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid #e3e7e4}.stream-details dt,.stream-details dd{min-width:0;margin:0;font-size:12px}.stream-details dt{color:var(--muted)}.stream-details dd{overflow-wrap:anywhere;color:#303833;font-weight:650;text-align:right}.login-dialog{width:min(390px,calc(100vw - 32px));padding:0;border:0;border-radius:8px;background:var(--surface);box-shadow:0 22px 70px #00000052}.login-dialog::backdrop{background:#090c0ac2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.login-dialog form{display:grid;gap:14px;padding:30px}.login-dialog form>img{display:block;margin:0 auto;object-fit:contain}.login-title{display:grid;gap:3px;margin-bottom:8px;text-align:center}.login-title strong{font-size:19px}.login-title span{color:var(--muted);font-size:12px}.password-field{display:grid;grid-template-columns:40px 1fr;min-height:44px;align-items:center;border:1px solid #bcc5bf;border-radius:6px;background:#fbfcfb}.password-field svg{justify-self:center;color:#77827b}.password-field input{width:100%;height:42px;padding:0 12px 0 0;border:0;outline:0;background:transparent;color:var(--ink)}.login-error{min-height:18px;margin:-4px 0 0;color:var(--danger);font-size:12px}.admin-dialog{width:min(420px,calc(100vw - 32px));padding:0;border:0;border-radius:8px;background:var(--surface);box-shadow:0 22px 70px #00000052}.admin-dialog::backdrop{background:#090c0ac2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.admin-dialog form{display:grid;gap:12px;padding:30px}.admin-dialog label{color:#49524d;font-size:12px;font-weight:650}.admin-select{width:100%;height:44px;padding:0 12px;border:1px solid #bcc5bf;border-radius:6px;background:#fbfcfb;color:var(--ink);font:inherit}.days-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}.days-row input{width:100%;height:44px;padding:0 12px;border:1px solid #bcc5bf;border-radius:6px;background:#fbfcfb;color:var(--ink)}.days-row span{color:var(--muted);font-size:13px}.quick-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.quick-days button{min-height:36px;border:1px solid #bcc5bf;border-radius:6px;background:#f0f3f1;color:#49524d;font-weight:700;cursor:pointer}.quick-days button:hover{background:#e6ebe8}.generated-code{display:grid;gap:8px;padding:14px;border:1px solid #cfe0d7;border-radius:6px;background:#f2f8f4}.generated-code[hidden]{display:none}.generated-code span{color:#0b6646;font-size:12px;font-weight:650}.code-output{width:100%;height:40px;padding:0 10px;border:1px dashed #9dc3ae;border-radius:6px;background:#fff;color:var(--green-strong);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:650;letter-spacing:.04em;text-align:center}.ghost-button{min-height:40px;border:1px solid #bcc5bf;border-radius:6px;background:#fff;color:#49524d;font-weight:650;cursor:pointer}.ghost-button:hover{background:#f0f3f1}@media(max-width:860px){.workspace{grid-template-columns:1fr}.viewer{padding:18px}.source-panel{padding:22px 18px calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--line);border-left:0}.input-wrap textarea{min-height:116px;resize:none}}@media(max-width:520px){.topbar{min-height:58px;padding:0 14px}.brand img{width:34px;height:34px}.brand span{font-size:15px}.direct-badge{display:none}.workspace{min-height:calc(100vh - 58px)}.viewer{padding:12px}.video-frame{border-radius:4px}.idle-overlay{gap:12px}.idle-overlay img{width:62px;height:62px}.idle-overlay strong{font-size:16px}.status-bar{min-height:44px;margin-top:10px;padding:9px 11px;font-size:12px}.source-panel{padding:18px 14px calc(24px + env(safe-area-inset-bottom))}.panel-heading{margin-bottom:14px}.stream-details{margin-top:20px}.icon-button:after{display:none!important}}@media(orientation:landscape)and (max-height:520px)and (max-width:1000px){.topbar{display:none}.workspace{min-height:100vh}.viewer{padding:8px}.video-frame{max-height:calc(100vh - 66px);margin:0 auto}.source-panel{padding-top:14px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}