:root{--bg-main: #090d16;--bg-card: rgba(22, 28, 45, .7);--bg-button: #1e293b;--bg-button-active: #334155;--accent: #38bdf8;--accent-glow: rgba(56, 189, 248, .35);--accent-secondary: #818cf8;--text-main: #f8fafc;--text-muted: #94a3b8;--danger: #f43f5e;--success: #10b981}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-main);color:var(--text-main);min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;overflow-x:hidden;touch-action:manipulation}#app{width:100%;max-width:420px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:16px;gap:14px;position:relative}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;border:1px solid rgba(255,255,255,.08)}.device-badge{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}.indicator-dot{width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 8px var(--danger);transition:all .3s ease}.indicator-dot.online{background:var(--success);box-shadow:0 0 10px #10b981b3}.latency-text{font-size:11px;color:var(--text-muted);font-family:monospace}.header-actions{display:flex;gap:8px}.icon-btn-small{background:#ffffff0f;border:1px solid rgba(255,255,255,.08);color:var(--text-muted);width:34px;height:34px;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .15s ease}.icon-btn-small:active{background:var(--accent);color:#000}.mode-toggle-bar{display:grid;grid-template-columns:1fr 1fr;background:#0f172acc;padding:4px;border-radius:14px;border:1px solid rgba(255,255,255,.05)}.mode-tab{padding:8px 12px;text-align:center;font-size:13px;font-weight:600;color:var(--text-muted);border-radius:10px;cursor:pointer;transition:all .2s ease}.mode-tab.active{background:var(--bg-button);color:var(--accent);box-shadow:0 2px 8px #0006}.nav-container{display:flex;justify-content:center;align-items:center;padding:10px 0;min-height:280px}.dpad-circle{width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#1e293b,#0f172a);border:2px solid rgba(56,189,248,.2);box-shadow:0 8px 24px #0009,inset 0 2px 6px #ffffff1a;position:relative;display:flex;justify-content:center;align-items:center;touch-action:none}.dpad-btn{position:absolute;background:transparent;border:none;color:var(--text-main);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background .1s ease,transform .05s ease}.dpad-btn:active{background:#38bdf833}.dpad-up{top:0;left:50px;right:50px;height:80px;border-top-left-radius:130px;border-top-right-radius:130px}.dpad-down{bottom:0;left:50px;right:50px;height:80px;border-bottom-left-radius:130px;border-bottom-right-radius:130px}.dpad-left{left:0;top:50px;bottom:50px;width:80px;border-top-left-radius:130px;border-bottom-left-radius:130px}.dpad-right{right:0;top:50px;bottom:50px;width:80px;border-top-right-radius:130px;border-bottom-right-radius:130px}.dpad-center{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#0284c7,#0369a1);box-shadow:0 4px 14px #0284c766,inset 0 2px 4px #ffffff4d;border:2px solid rgba(255,255,255,.2);color:#fff;font-size:18px;font-weight:700;letter-spacing:.5px;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:5;transition:transform .08s ease,box-shadow .08s ease}.dpad-center:active{transform:scale(.92);box-shadow:0 2px 6px #0284c799}.swipe-trackpad{width:100%;height:260px;background:radial-gradient(circle at center,#1e293b,#0f172a);border-radius:24px;border:2px dashed rgba(56,189,248,.3);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;color:var(--text-muted);touch-action:none;cursor:grab;position:relative;overflow:hidden}.swipe-trackpad:active{cursor:grabbing;border-color:var(--accent)}.trackpad-indicator{position:absolute;width:48px;height:48px;border-radius:50%;background:#38bdf84d;border:2px solid var(--accent);pointer-events:none;transform:translate(-50%,-50%);display:none;animation:ripple .4s ease-out}@keyframes ripple{0%{transform:translate(-50%,-50%) scale(.6);opacity:1}to{transform:translate(-50%,-50%) scale(1.4);opacity:0}}.control-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.btn-pill{background:var(--bg-button);border:1px solid rgba(255,255,255,.08);border-radius:16px;height:52px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;color:var(--text-main);font-size:11px;font-weight:600;cursor:pointer;box-shadow:0 4px 10px #0000004d;transition:all .1s ease}.btn-pill:active{transform:scale(.94);background:var(--bg-button-active);border-color:var(--accent)}.btn-pill.danger:active{border-color:var(--danger);background:#f43f5e33}.media-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.volume-card{background:var(--bg-card);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:6px;display:flex;justify-content:space-between;align-items:center}.volume-btn{flex:1;height:46px;background:transparent;border:none;color:var(--text-main);display:flex;justify-content:center;align-items:center;border-radius:12px;cursor:pointer}.volume-btn:active{background:#ffffff1a}.playback-card{background:var(--bg-card);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:6px;display:flex;justify-content:space-between;align-items:center}.app-section{display:flex;flex-direction:column;gap:8px}.section-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);padding-left:4px}.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.app-tile{background:#1e293b80;border:1px solid rgba(255,255,255,.06);border-radius:14px;height:56px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--text-main);cursor:pointer;transition:all .12s ease}.app-tile:active{transform:scale(.92);background:var(--accent);color:#000}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:flex-end;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s ease}.modal-overlay.open{opacity:1;pointer-events:auto}.modal-content{width:100%;max-width:420px;background:#111827;border-top-left-radius:24px;border-top-right-radius:24px;border:1px solid rgba(255,255,255,.1);padding:20px;display:flex;flex-direction:column;gap:16px;box-shadow:0 -10px 30px #0009;transform:translateY(100%);transition:transform .25s cubic-bezier(.16,1,.3,1)}.modal-overlay.open .modal-content{transform:translateY(0)}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:16px;font-weight:700;color:var(--text-main)}.text-input-row{display:flex;gap:8px}.keyboard-input{flex:1;height:48px;background:#1f2937;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:0 14px;color:#fff;font-size:15px;outline:none;user-select:text;-webkit-user-select:text}.keyboard-input:focus{border-color:var(--accent)}.send-btn{height:48px;padding:0 20px;background:var(--accent);border:none;border-radius:12px;color:#000;font-weight:700;cursor:pointer}.send-btn:active{transform:scale(.95)}