:root{color-scheme:dark;--bg:#0c1422;--surface:#101c2c;--raised:#142235;--border:#243247;--text:#eaf0f7;--muted:#91a1b6;--subtle:#697c93;--accent:#66d6c1;--accent-dark:#0b302f;--warning:#e9bd78;--radius:15px;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}button,input,textarea{font:inherit}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}button,a,input,textarea,summary,[tabindex]{outline-offset:4px}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent)}input:focus,textarea:focus{outline:0;border-color:var(--accent)}a{color:inherit;text-decoration:none}[hidden]{display:none!important}h1,h2,p{margin:0}h2{font-size:16px;font-weight:600}.muted{color:var(--muted)}.eyebrow,.section-label{font-size:10px;font-weight:600;letter-spacing:1.8px;color:var(--subtle)}.eyebrow{font-size:11px}.button{min-height:41px;padding:9px 17px;border-radius:8px;border:1px solid transparent;font-size:12px;font-weight:600;display:inline-flex;gap:10px;align-items:center;justify-content:center;transition:background .16s,border-color .16s}.primary{background:var(--accent);color:#092a2b}.primary:hover:enabled{background:#8ee7d6}.secondary{background:#152337;border-color:#2a3b50;color:#c6d3e3}.secondary:hover:enabled{background:#20334a;border-color:#496079}.quiet{background:transparent;color:var(--muted)}.quiet:hover{background:var(--raised);color:var(--text)}.brand{display:flex;gap:12px;align-items:center;font-size:16px;font-weight:650;letter-spacing:-.3px;white-space:nowrap}.brand small{display:block;font-size:7px;letter-spacing:1.8px;color:var(--subtle);font-weight:500;margin-top:2px}.brand-mark{display:flex;position:relative;align-items:center;justify-content:center;width:37px;height:37px;border:1px solid #3a706e;background:linear-gradient(135deg,#214744,#112c31);border-radius:10px;font-size:22px;font-weight:500;color:#a3eee0}.brand-mark span{position:absolute;font-size:11px;right:2px;top:0;background:#153431;line-height:1.3}.workspace{min-height:100dvh;display:grid;grid-template-columns:223px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100dvh;border-right:1px solid #1d2b3d;background:#0d1827;padding:32px 22px;display:flex;flex-direction:column}.sidebar-section{margin-top:54px}.sidebar .section-label{margin:0 12px 14px}.nav-item{display:flex;align-items:center;gap:11px;font-size:12px;padding:12px;border-radius:8px}.nav-item.active{background:#163132;border:1px solid #284b49;color:#92dece}.nav-item>span:first-child{font-size:19px;line-height:1}.nav-dot{width:5px;height:5px;background:var(--accent);border-radius:50%;margin-left:auto}.device-card{display:flex;align-items:center;gap:10px;margin-top:26px;padding:15px 10px;border-top:1px solid #213044;border-bottom:1px solid #213044}.device-icon{font-size:29px;line-height:1;color:#9badc3;transform:rotate(180deg)}.device-card strong{font-size:12px;font-weight:500}.device-card div>span{display:block;font-size:10px;color:var(--subtle);margin-top:2px}.device-card>.status-dot{margin-left:auto}.sidebar-bottom{margin-top:auto;padding-top:35px}.private-note{display:flex;gap:11px;padding:0 7px 23px}.private-note>span{font-size:23px;color:#6c948f}.private-note strong{font-size:11px;font-weight:500;color:#a7b6c8}.private-note p{font-size:10px;color:var(--subtle);line-height:1.9;margin-top:5px}.logout-button{width:100%;justify-content:flex-start;border-top:1px solid #223044;border-radius:0;padding-top:19px}.logout-button>span{font-size:20px}.main-content{width:100%;max-width:1680px;margin:auto;padding:37px 44px 20px}.page-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.header-separator{padding:0 10px;color:#3c4c60}.page-header h1{font-size:29px;font-weight:600;letter-spacing:1px;margin-top:9px;line-height:1.4}.title-dot{color:var(--accent);padding-left:4px}.page-description{color:var(--muted);font-size:12px;margin-top:5px}.header-actions{display:flex;gap:17px;align-items:center}.connection-badge{display:inline-flex;gap:8px;align-items:center;font-size:11px;color:#9eacbe}.status-dot{display:inline-block;width:6px;height:6px;background:#65758b;border-radius:50%;flex-shrink:0}.status-dot.online,.connection-badge.online .status-dot{background:var(--accent);box-shadow:0 0 9px #66d6c129}.connection-badge.online{color:#9bd5ca}.connection-badge.reconnecting .status-dot{background:var(--warning)}.desktop-card{border:1px solid #2a3b51;border-radius:13px;overflow:hidden;box-shadow:0 15px 45px #00000026;background:#090f1a}.desktop-toolbar{height:49px;padding:0 19px;background:#152234;display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid #27374c}.desktop-title,.desktop-tools{display:flex;gap:15px;align-items:center}.desktop-title strong{font-size:11px;font-weight:500;color:#cbd6e3}.window-dots{display:flex;gap:5px;margin-right:4px}.window-dots i{width:7px;height:7px;border-radius:50%;background:#566176}.window-dots i:first-child{background:#9a6668}.window-dots i:nth-child(2){background:#aa9161}.window-dots i:nth-child(3){background:#5c9182}.display-size{font-size:10px;color:var(--subtle);padding-left:14px;border-left:1px solid #354256;font-variant-numeric:tabular-nums}.mode-badge{font-size:10px;border:1px solid #3a485c;color:#a9b7c9;padding:2px 9px;border-radius:5px}.mode-badge.controlling{color:var(--accent);background:#173d37;border-color:#35665d}.icon-button{font-size:22px;line-height:1;width:30px;height:30px;border:0;background:transparent;color:#aabbd1;border-radius:5px}.icon-button:hover{background:#27394e;color:var(--text)}.desktop-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:clamp(300px,47vw,650px);max-height:60vh;background:#070d16;overflow:hidden;outline-offset:-3px;user-select:none;-webkit-user-select:none}.desktop-stage.controlling{touch-action:none;cursor:crosshair}.desktop-stage canvas{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;pointer-events:none}.frame-placeholder{text-align:center;max-width:420px;padding:26px;color:var(--muted)}.monitor-illustration{position:relative;margin:0 auto 31px;width:90px;height:61px;display:grid;place-items:center;border:1px solid #335455;border-radius:8px;background:linear-gradient(145deg,#162c32,#0c1823);box-shadow:0 0 70px #3c938515}.monitor-illustration::before{content:"";position:absolute;bottom:-12px;left:44px;height:12px;width:1px;background:#335455}.monitor-illustration::after{content:"";position:absolute;bottom:-13px;left:30px;height:1px;width:29px;background:#335455}.monitor-illustration span{font-size:29px;color:#6ca498}.frame-placeholder h2{font-size:17px;color:#c4d1df;font-weight:500}.frame-placeholder p{font-size:12px;line-height:1.9;margin-top:10px;color:#7d91a8}.placeholder-caption{display:block;margin-top:24px;font-size:8px;letter-spacing:2px;color:#40566f}.control-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#102822e8;border:1px solid #467265;border-radius:20px;padding:7px 15px;color:#b3e6d7;font-size:11px;pointer-events:none}.desktop-statusbar{min-height:37px;padding:8px 17px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#111d2d;border-top:1px solid #253349;font-size:9px;color:#778ba4}.stream-stats{display:flex;gap:15px;align-items:center;font-variant-numeric:tabular-nums}.stream-stats>span:first-child{display:flex;gap:7px;align-items:center}.stat-divider{height:10px;width:1px;background:#344155}.input-hint{font-size:9px}.control-strip{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 0}.control-description{display:flex;align-items:center;gap:13px}.control-symbol{display:grid;place-items:center;color:var(--accent);border:1px solid #2a4749;background:#142b30;width:37px;height:37px;border-radius:10px;font-size:20px;flex-shrink:0}.control-description h2{font-size:13px;font-weight:500}.control-description p{font-size:11px;color:var(--muted);margin-top:3px}.control-strip .button{min-width:125px}.notice{border:1px solid #485340;background:#262d26;border-radius:9px;padding:12px 16px;margin-bottom:20px;font-size:12px;color:#d3cfb0;overflow-wrap:anywhere}.detail-grid{display:grid;grid-template-columns:minmax(0,1.23fr) minmax(0,1fr);gap:20px}.panel{padding:21px 23px;background:#101c2b;border:1px solid #233348;border-radius:var(--radius)}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.panel-heading .section-label{font-size:8px;letter-spacing:1.5px}.panel-heading h2{font-size:14px;margin-top:4px}.panel-icon{color:#677d97;font-size:24px}.shortcut-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:20px}.shortcut{min-height:50px;border:1px solid #2c3d53;background:#172538;border-radius:7px;color:#bbc9d9;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 4px}.shortcut:hover:enabled{background:#22384a;border-color:#4c716c}.shortcut kbd{font-family:inherit;font-size:12px;white-space:nowrap}.shortcut span{font-size:10px;color:var(--muted)}label{display:block;font-size:12px;font-weight:500;color:#c4d0df;margin-bottom:9px}label span{font-size:10px;color:var(--subtle);margin-left:8px;font-weight:400}.composer-wrap{display:flex;gap:9px;align-items:stretch}.composer-wrap textarea{width:100%;min-width:0;resize:vertical;min-height:64px;max-height:200px;padding:11px 12px;font-size:11px;background:#0c1624;border:1px solid #2b3a4e;border-radius:7px;color:var(--text);line-height:1.7}.composer-wrap textarea::placeholder{color:#60748e}.composer-wrap .button{align-self:flex-end;white-space:nowrap;min-height:38px;padding:8px 12px}.panel-note{font-size:10px;color:var(--subtle);line-height:1.8;margin-top:12px;overflow-wrap:anywhere}.permission-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}.permission-row strong{display:block;font-size:11px;font-weight:500;color:#c4d0df}.permission-row div>span{display:block;font-size:10px;color:var(--subtle);margin-top:2px}.permission-badge{font-size:10px;padding:3px 8px;border-radius:5px;background:#1f2b3c;color:#a3b1c3;white-space:nowrap}.permission-badge.granted{color:#91cfbc;background:#17332e}.permission-badge.denied{color:#deb979;background:#392e20}details{border-top:1px solid #243449;padding-top:12px;font-size:11px;color:#8caaa9}summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:8px}summary::-webkit-details-marker{display:none}summary span{color:#789b97}details ol{padding-left:18px;color:var(--muted);font-size:11px;line-height:1.9;margin:12px 0 0}details li+li{margin-top:6px}.page-footer{display:flex;justify-content:space-between;gap:15px;color:#526781;font-size:9px;letter-spacing:.4px;padding-top:23px}.footer-dot{padding:0 7px}.desktop-card:fullscreen{display:flex;flex-direction:column;width:100%;height:100%;border:0;border-radius:0;background:#070d16}.desktop-card:fullscreen .desktop-stage{flex:1;min-height:0;max-height:none;height:auto}.desktop-card:fullscreen .desktop-toolbar,.desktop-card:fullscreen .desktop-statusbar{flex-shrink:0}.login-view{min-height:100dvh;display:grid;grid-template-columns:1.1fr 1fr}.login-story{display:flex;flex-direction:column;padding:45px clamp(35px,6vw,100px);background:radial-gradient(ellipse at 15% 55%,#17373c70,transparent 65%),#0e1b2b;border-right:1px solid #243447}.login-intro{margin:auto 0;padding:70px 0}.login-intro>.eyebrow{color:#83b9b2;letter-spacing:3px}.login-intro h1{font-size:clamp(30px,3.6vw,58px);font-weight:500;letter-spacing:-1px;line-height:1.5;margin-top:23px}.login-intro h1 span{color:#7bcbbd}.login-intro p{max-width:340px;color:#849ab1;font-size:14px;line-height:2;margin-top:24px}.login-features{display:flex;gap:25px;margin-top:38px;color:#a9bdc9;font-size:11px}.login-footnote{font-size:10px;color:#526e84;letter-spacing:1px}.login-footnote span{padding:0 12px}.login-panel{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px}.login-card{width:100%;max-width:380px}.small-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:13px;background:#193a38;border:1px solid #32605b;color:#8ce0cc;font-size:25px;margin-bottom:34px}.login-card .eyebrow{color:#78908f;font-size:10px}.login-card h2{font-size:30px;margin:8px 0;font-weight:500}.login-card>.muted{font-size:12px}.login-card form{margin-top:32px}.password-wrap{position:relative}.password-wrap input{width:100%;height:48px;background:#111f30;border:1px solid #2d4055;border-radius:8px;padding:12px 60px 12px 14px;color:var(--text);font-size:13px}.password-wrap input:focus{border-color:var(--accent)}.password-wrap input::placeholder{color:#64788f}.password-toggle{position:absolute;right:4px;top:4px;height:40px;border:0;background:transparent;color:#8196ad;font-size:11px;padding:0 12px;border-radius:6px}.form-message{min-height:40px;font-size:11px;line-height:1.7;padding:9px 0;color:#b9a784}.login-submit{width:100%;justify-content:space-between;padding:12px 18px;min-height:47px}.security-note{display:flex;align-items:center;justify-content:center;gap:8px;color:#70879d;font-size:10px;margin-top:21px}.security-note span{color:#79a59c;font-size:18px}.login-help{font-size:10px;color:#60758d;margin-top:65px;text-align:center}
@media(min-width:1600px){.main-content{padding-left:60px;padding-right:60px}.desktop-stage{max-height:64vh}}@media(max-width:1180px){.workspace{grid-template-columns:185px minmax(0,1fr)}.sidebar{padding:28px 15px}.brand{font-size:14px;gap:9px}.brand small{font-size:6px}.main-content{padding:30px 26px 20px}.shortcut{flex-direction:column;gap:0}.desktop-stage{max-height:56vh}.panel{padding:18px}.detail-grid{gap:16px}.header-actions{gap:12px}}@media(max-width:900px){.workspace{display:block}.sidebar{height:auto;position:static;flex-direction:row;align-items:center;padding:16px 24px;border-right:0;border-bottom:1px solid #243447;gap:20px}.sidebar-section,.device-card,.private-note{display:none}.sidebar-bottom{margin-left:auto;margin-top:0;padding:0}.logout-button{border:0;padding:7px 10px;min-height:36px;font-size:11px}.main-content{padding:25px 24px}.page-header h1{font-size:26px}.desktop-stage{height:53vw;min-height:290px;max-height:62vh}.page-footer{font-size:8px}.login-view{grid-template-columns:1fr 1fr}.login-story{padding:35px}.login-features{flex-wrap:wrap;gap:15px}.login-panel{padding:30px}.login-intro h1{font-size:34px}}@media(max-width:640px){.sidebar{padding:14px 18px}.brand-mark{width:32px;height:32px;font-size:19px}.brand{font-size:13px}.brand small{font-size:6px;letter-spacing:1.4px}.main-content{padding:24px 16px 22px}.page-header{align-items:flex-start;gap:12px;margin-bottom:20px}.page-header .eyebrow{font-size:8px;letter-spacing:1.1px}.header-separator{padding:0 5px}.page-header h1{font-size:25px;margin-top:8px}.page-description{font-size:11px}.header-actions{flex-direction:column;align-items:flex-end;gap:10px;padding-top:3px}.connection-badge{font-size:10px}.header-actions .button{font-size:10px;min-height:32px;padding:6px 11px}.desktop-toolbar{height:43px;padding:0 11px;gap:8px}.desktop-title{gap:9px}.window-dots{gap:4px;margin:0}.window-dots i{width:5px;height:5px}.display-size{font-size:8px;padding-left:9px}.desktop-title strong{font-size:10px}.desktop-tools{gap:7px}.mode-badge{font-size:9px;padding:1px 6px}.desktop-stage{height:61vw;min-height:235px;max-height:65vh}.frame-placeholder{padding:18px}.frame-placeholder h2{font-size:14px}.frame-placeholder p{font-size:10px;max-width:245px}.monitor-illustration{width:65px;height:43px;margin-bottom:25px}.monitor-illustration::before{left:32px}.monitor-illustration::after{left:18px}.monitor-illustration span{font-size:22px}.placeholder-caption{font-size:7px;margin-top:17px}.desktop-statusbar{padding:8px 10px;min-height:33px}.stream-stats{gap:9px;font-size:8px}.input-hint{display:none}#frame-size{font-size:8px}.control-strip{align-items:flex-start;gap:12px;padding:20px 0}.control-symbol{display:none}.control-description h2{font-size:12px}.control-description p{font-size:10px;line-height:1.8;max-width:210px}.control-strip .button{min-width:100px;font-size:11px;padding:8px 10px;min-height:37px;flex-shrink:0}.detail-grid{grid-template-columns:1fr;gap:14px}.panel{padding:18px}.panel-heading{margin-bottom:17px}.shortcut{flex-direction:row;min-height:43px;gap:5px}.shortcut span{font-size:9px}.shortcut kbd{font-size:11px}.page-footer{flex-direction:column;gap:6px;padding-top:20px}.control-hint{font-size:9px;padding:5px 10px;bottom:10px}.login-view{display:flex;flex-direction:column}.login-story{border-right:0;border-bottom:1px solid #23384a;padding:25px}.login-intro{padding:38px 0 24px}.login-intro>.eyebrow{font-size:9px}.login-intro h1{font-size:32px;margin-top:13px;line-height:1.4}.login-intro p{font-size:12px;margin-top:15px}.login-features,.login-footnote{display:none}.login-panel{padding:32px 25px}.small-icon{display:none}.login-card h2{font-size:24px}.login-card form{margin-top:23px}.login-help{margin-top:30px}.login-card{max-width:420px}}@media(max-height:540px) and (orientation:landscape){.desktop-stage{min-height:180px}.login-intro{padding:35px 0}.login-help{margin-top:25px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
