*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:#0f0f23;color:#fff;height:100vh;overflow:hidden;-webkit-user-select:none;user-select:none}#app{max-width:480px;margin:0 auto;padding:20px 16px;height:100vh;display:flex;flex-direction:column}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}.header h1{font-size:22px;font-weight:600;letter-spacing:1px}.status{display:flex;align-items:center;gap:8px;font-size:13px;color:#ffffffb3}.dot{width:8px;height:8px;border-radius:50%;background:#e74c3c;display:inline-block}.dot.online{background:#2ecc71;box-shadow:0 0 6px #2ecc71}#battery{font-weight:600;color:#f1c40f}.panel{flex:1;display:flex;justify-content:center;align-items:center;min-height:0}.dpad{display:flex;flex-direction:column;align-items:center;gap:10px}.dpad-mid{display:flex;gap:10px;align-items:center}.btn-dir{width:78px;height:78px;font-size:26px;border:none;border-radius:16px;background:linear-gradient(145deg,#1a1a3e,#12122a);color:#fff;box-shadow:0 6px 12px #0006,inset 0 1px #ffffff0d;touch-action:manipulation;cursor:pointer;transition:transform .05s,background .1s}.btn-dir:active{transform:scale(.95);background:#0f0f23}.btn-stop{width:78px;height:78px;font-size:22px;border:none;border-radius:50%;background:linear-gradient(145deg,#e74c3c,#c0392b);color:#fff;box-shadow:0 6px 12px #0006;touch-action:manipulation;cursor:pointer;transition:transform .05s}.btn-stop:active{transform:scale(.95)}.moves{display:flex;justify-content:center;gap:8px;margin:12px 0;flex-wrap:wrap}.btn-move{padding:10px 14px;font-size:13px;font-weight:500;border:none;border-radius:10px;background:linear-gradient(145deg,#1a1a3e,#12122a);color:#fff;box-shadow:0 4px 8px #0000004d;touch-action:manipulation;cursor:pointer;transition:transform .05s}.btn-move:active{transform:scale(.95);background:#0f0f23}.emotions{display:flex;justify-content:center;gap:16px;margin:20px 0}.btn-emo{width:58px;height:58px;font-size:26px;border:none;border-radius:50%;background:linear-gradient(145deg,#1a1a3e,#12122a);box-shadow:0 4px 8px #0000004d;touch-action:manipulation;cursor:pointer;transition:transform .05s}.btn-emo:active{transform:scale(.92)}.actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-bottom:env(safe-area-inset-bottom,0)}.btn-action{width:100%;padding:14px;font-size:15px;font-weight:500;border:none;border-radius:12px;background:linear-gradient(145deg,#1e3a5f,#152a45);color:#fff;box-shadow:0 4px 8px #0000004d;touch-action:manipulation;cursor:pointer;transition:transform .05s}.btn-action:active{transform:scale(.98)}.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;justify-content:center;align-items:center;z-index:100;padding:20px}.modal-content{background:#1a1a3e;padding:24px;border-radius:16px;width:100%;max-width:360px;box-shadow:0 20px 40px #00000080}.modal-content h3{margin-bottom:16px;font-size:18px}.modal-content input{width:100%;padding:12px 14px;margin-bottom:12px;border:none;border-radius:10px;background:#0f0f23;color:#fff;font-size:15px;outline:none}.modal-content input::placeholder{color:#fff6}.modal-btns{display:flex;gap:10px;margin-top:8px}.modal-btns button{flex:1;padding:12px;border:none;border-radius:10px;font-size:15px;font-weight:500;cursor:pointer;background:#333;color:#fff}.modal-btns .btn-primary{background:#2ecc71;color:#fff}