:root{color-scheme:dark;--bg:#071014;--panel:#0e1b21;--line:#22343c;--muted:#89a0aa;--text:#edf6f8;--accent:#5ee0a0;--blue:#65a7ff;--danger:#ff6b78}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 85% -10%,#17383b 0,transparent 32rem),var(--bg);color:var(--text);font:16px/1.5 Inter,ui-sans-serif,system-ui,sans-serif}
header{height:68px;padding:0 max(24px,calc((100vw - 1500px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#071014e8;backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}
header div{display:flex;gap:12px;align-items:center}
.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--accent);color:#052016;font-weight:900}
#connection{font-size:14px;color:var(--muted)}
main{max-width:1500px;margin:0 auto;padding:42px 24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px}
.login{max-width:520px;padding:34px;margin:8vh auto}
.login p,.toolbar p{color:var(--muted);margin-top:4px}
h1,h2{margin:0;letter-spacing:-.03em}
.login form{display:flex;gap:10px;margin-top:28px}
input,button{font:inherit;border-radius:10px;border:1px solid var(--line);padding:11px 13px}
input{min-width:0;background:#081318;color:var(--text);flex:1}
button{background:var(--accent);color:#062117;font-weight:700;cursor:pointer}
button.secondary,.controls button{background:#14252c;color:var(--text)}
button:disabled{opacity:.35;cursor:not-allowed}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:18px}
.toolbar-actions{display:flex;gap:9px;flex-wrap:wrap}
.devices{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,345px));gap:18px;align-items:start;justify-content:start}
.device{background:linear-gradient(180deg,#102027,#0d191f);border:1px solid var(--line);border-radius:18px;padding:17px;box-shadow:0 14px 40px #0002}
.device.online{border-color:#2c5145}
.device-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.device-title{display:flex;align-items:center;gap:9px;min-width:0}
.device-title>div{display:grid;min-width:0}
.device-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.native-name{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.presence{padding:4px 9px;border-radius:999px;background:#14252c;color:var(--muted);font-size:12px}
.online .presence{background:#14372b;color:#aaf2cd}
.dot{width:9px;height:9px;border-radius:50%;background:#51626a}
.online .dot{background:var(--accent);box-shadow:0 0 12px #5ee0a0}
.device-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px}
.device-meta code{font-size:11px;overflow:hidden;text-overflow:ellipsis}
.device-meta span{white-space:nowrap}
.screen-wrap{position:relative;display:grid;place-items:center;min-height:330px;margin:14px 0 11px;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:radial-gradient(circle at 50% 35%,#10252d,#030809 68%);color:var(--muted);text-align:center}
.screen-placeholder{display:grid;place-items:center;gap:5px;padding:30px}
.screen-placeholder small{max-width:245px;color:#617780}
.phone-outline{font-size:62px;line-height:1;color:#36505a;font-weight:200}
.screen-wrap .screen{display:none;max-width:100%;max-height:440px;width:auto;height:auto;cursor:crosshair;object-fit:contain;-webkit-user-drag:none}
.screen-wrap.ready .screen{display:block}
.screen-wrap.ready .screen-placeholder{display:none}
.screen-overlay{position:absolute;z-index:2;left:8px;right:8px;bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 7px 6px 11px;border:1px solid #ffffff14;border-radius:10px;background:#031015dd;backdrop-filter:blur(10px);font-size:11px;text-align:left}
.screen-overlay>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-button{display:grid;place-items:center;flex:0 0 auto;width:31px;height:31px;padding:0;border-radius:8px;background:#193239;color:var(--text);font-size:20px;line-height:1}
.screen-wrap.loading::after{content:"";position:absolute;z-index:3;width:32px;height:32px;border:3px solid #ffffff24;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.refresh-settings{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-items:center}
.refresh-settings button{padding:9px 10px;font-size:13px}
.interval-label{display:flex;grid-column:1/-1;grid-row:1;align-items:center;justify-content:center;gap:5px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:12px;white-space:nowrap}
.interval-label input{width:58px;padding:3px 5px;text-align:center;flex:0 0 auto}
.auto-active{background:#214a39;color:#c5f8dd;border-color:#327057}
.refresh-hint{margin:6px 2px 0;color:#637982;font-size:11px}
.controls{display:flex;gap:8px;margin:20px 0 10px}
.controls{flex-wrap:wrap}
.primary-controls{margin-top:14px}
.primary-controls button{flex:1 1 auto;padding:9px 10px;font-size:13px}
button.danger{background:#351b21;color:#ffb3ba;border-color:#6e2a34}
button.danger:hover{background:#49212a}
.advanced{margin-top:10px;border-top:1px solid var(--line);padding-top:9px}
.advanced summary{cursor:pointer;color:var(--muted);font-size:12px;user-select:none}
.advanced .command{margin-top:10px}
.video-dialog{width:min(860px,96vw);max-height:95vh;overflow:auto}
.video-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.video-stage{position:relative;width:100%;height:58vh;min-height:300px;overflow:hidden;background:#000;border-radius:12px;touch-action:none;user-select:none}
#live-video{display:block;width:100%;height:100%;object-fit:contain;cursor:crosshair;touch-action:none;-webkit-user-drag:none}
#gesture-indicator{position:absolute;display:block;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid var(--accent);border-radius:50%;background:#5ee0a033;box-shadow:0 0 0 4px #06120d99;pointer-events:none;opacity:0;transform:scale(.65);transition:opacity .12s,transform .12s}
#gesture-indicator.visible{opacity:1;transform:scale(1)}
.video-stage.dragging #gesture-indicator{border-radius:5px}
.video-note{font-size:14px;color:var(--muted)}
.control-status{min-height:24px;margin:6px 0;color:#b9f5d5;font-size:14px}
#video-status{color:var(--accent)}
#video-diagnostics{min-height:42px;white-space:pre-wrap}
.command{display:grid;grid-template-columns:1fr 1.5fr auto;gap:7px}
.output{min-height:70px;max-height:230px;overflow:auto;background:#071014;border-radius:9px;padding:12px;color:#a7c5d0;font-size:12px}
.empty{border:1px dashed var(--line);border-radius:16px;padding:55px;text-align:center;color:var(--muted)}
dialog{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:16px;width:min(520px,90vw)}
dialog::backdrop{background:#000a}
dialog label{display:grid;gap:8px;margin:24px 0}
.actions{display:flex;justify-content:flex-end;gap:8px}
#credentials{white-space:pre-wrap;background:#071014;padding:14px;border-radius:9px;color:#b9f5d5}
@media(max-width:650px){main{padding:28px 14px}
.login form,.toolbar{align-items:stretch;flex-direction:column}
.toolbar-actions{display:grid;grid-template-columns:1fr 1fr}
.command{grid-template-columns:1fr}
.devices{grid-template-columns:1fr}
.screen-wrap{min-height:300px}
}