:root{color-scheme:dark;--bg:#080b10;--card:#121820;--line:#222c37;--text:#f4f7fb;--muted:#82909f;--accent:#45e0b8;--red:#ff5a68;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -20%,#1b3340 0,transparent 46%),var(--bg);color:var(--text);touch-action:manipulation}main{width:min(100%,540px);margin:auto;padding:calc(env(safe-area-inset-top) + 18px) 14px calc(env(safe-area-inset-bottom) + 28px)}button,input{font:inherit}button{color:var(--text);background:#161e27;border:1px solid var(--line);border-radius:18px;min-height:52px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}button:active{transform:scale(.96);background:#22303d}.card{background:linear-gradient(145deg,#141b23,#0e131a);border:1px solid var(--line);border-radius:26px;box-shadow:0 14px 30px #0005}.brand{display:flex;align-items:center;gap:12px}.brandmark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--accent);color:#06110e;font-weight:900}.brand h1{font-size:18px;margin:0}.brand p{font-size:12px;color:var(--muted);margin:3px 0 0}.login{margin-top:18vh;padding:26px}.login form{display:grid;gap:10px;margin-top:28px}.login input,.text input{color:var(--text);background:#090d12;border:1px solid #2a3541;border-radius:14px;padding:15px;outline:none}.login input:focus,.text input:focus{border-color:var(--accent)}.primary{background:var(--accent);color:#05100d;font-weight:800;margin-top:6px}.error{color:#ff8290;min-height:1.4em}header{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 16px}.power{width:54px;color:var(--red);font-size:24px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#65717d;margin-right:6px}.dot.on{background:var(--accent);box-shadow:0 0 10px var(--accent)}.notice{height:24px;text-align:center;color:var(--muted);font-size:13px}.quick{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:9px;margin-bottom:12px}.quick button{border:0;background:transparent;border-radius:14px;font-size:10px;min-width:0;padding:6px 2px}.quick span{display:grid;place-items:center;margin:auto auto 6px;width:34px;height:34px;border-radius:11px;background:#242f3a;font-weight:800;font-size:13px}.remote-grid{display:grid;grid-template-columns:64px 1fr 64px;gap:10px;align-items:center}.side{display:grid;padding:5px}.side button{border:0;background:transparent;border-radius:18px;font-size:25px;height:66px}.side small,.nav small{display:block;color:var(--muted);font-size:8px;letter-spacing:.06em}.dpad{position:relative;aspect-ratio:1;padding:12px;border-radius:50%;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr)}.dpad button{border:0;background:transparent;border-radius:50%;font-size:20px}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .ok{grid-area:2/2;background:var(--accent);color:#06110e;font-weight:900}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}.nav{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:8px;margin-top:12px}.nav button,.media button{border:0;background:transparent}.nav button{font-size:20px}.media{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:7px;margin-top:12px}.media .play{color:var(--accent)}.text{display:flex;padding:8px;margin-top:12px;gap:8px}.text input{flex:1;min-width:0}.text button{padding:0 18px;background:#202c36}.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}.tools button{font-size:11px;border-radius:14px;min-height:42px}dialog{width:min(94vw,760px);border:1px solid var(--line);background:#080b10;border-radius:18px;padding:8px}dialog::backdrop{background:#000b}dialog img{width:100%;display:block;border-radius:12px}#closeShot{position:absolute;right:14px;top:14px;width:42px;min-height:42px;font-size:25px}@media(max-width:390px){.quick{grid-template-columns:repeat(3,1fr)}.remote-grid{grid-template-columns:58px 1fr 58px}.side button{height:59px}.tools{grid-template-columns:repeat(2,1fr)}}