:root{
  color-scheme:dark;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  background:#08080a;color:#f5f5f7;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100vh;background:
radial-gradient(circle at 50% -20%,#2a1945 0,transparent 33rem),#08080a}
button,input{font:inherit}
.shell{width:min(100%,430px);margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom))}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:11px}.brand>div{display:flex;flex-direction:column;gap:2px}
.brand strong{font-size:15px}.brand span{font-size:12px;color:#888891}
.dot{width:9px;height:9px;border-radius:50%;background:#555;box-shadow:0 0 0 4px #ffffff0b}
.dot.online{background:#64d78b;box-shadow:0 0 0 4px #64d78b20}
.connection{padding:15px;border:1px solid #ffffff12;border-radius:18px;background:#ffffff08;margin-bottom:17px}
.connection label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#8c8c95;margin:0 0 8px 2px}
.iprow{display:flex;gap:8px}.iprow input,.textsend input{min-width:0;flex:1;border:1px solid #ffffff14;background:#050506;color:white;border-radius:12px;padding:12px 13px;outline:none}
.iprow input:focus,.textsend input:focus{border-color:#8a61d2}
.iprow button,.textsend button{border:0;border-radius:12px;background:#6e3db7;color:white;padding:0 15px;font-weight:700}
.connection small{display:block;color:#73737c;font-size:11px;margin:9px 2px 0}
.remote{border:1px solid #ffffff0f;border-radius:32px;background:linear-gradient(180deg,#16161a,#0d0d10);padding:20px;box-shadow:0 28px 60px #0008}
.key{border:1px solid #ffffff12;background:linear-gradient(180deg,#25252b,#19191e);box-shadow:0 6px 15px #0006,inset 0 1px #ffffff10;color:#f7f7f8;border-radius:17px;min-height:58px;font-size:21px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:transform .08s,filter .08s}
.key:active,.key.pressed{transform:translateY(2px) scale(.97);filter:brightness(.78)}
.key span{font-size:10px;color:#9999a2;text-transform:uppercase;letter-spacing:.08em}
.toprow,.media,.volume{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.power{font-size:26px}.danger{color:#ff7079}
.dpad{height:220px;margin:20px auto;max-width:245px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:7px}
.dpad .key{border-radius:22px}.up{grid-area:1/2}.left{grid-area:2/1}.ok{grid-area:2/2;background:linear-gradient(180deg,#7448bb,#56308f);font-size:15px;font-weight:800}.right{grid-area:2/3}.down{grid-area:3/2}
.media{margin-bottom:10px}.widegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.volume{margin:15px 0}.volumeKey{min-height:62px}
.inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;border-top:1px solid #ffffff0d;padding-top:15px}
.slim{min-height:40px;border-radius:12px;font-size:10px;font-weight:700;color:#aaaab3}
.textsend{display:flex;gap:8px;margin-top:15px}
.textsend button{min-height:44px}
.icon.ghost{border:1px solid #ffffff0f;color:#aaa;background:#ffffff08;width:39px;height:39px;border-radius:12px}
.hint{margin:14px 8px 0;text-align:center;font-size:11px;color:#707078;line-height:1.45}
@media(max-width:350px){.shell{padding-left:10px;padding-right:10px}.remote{padding:14px}.dpad{height:195px}}