:root{--bg-primary:#f0f4f9;--bg-surface:#ffffffd9;--bg-card:#ffffffeb;--bg-card-subtle:#fff;--bg-input:#fff;--border-color:#00000014;--border-color-hover:#1a73e859;--border-color-glow:#1a73e833;--text-primary:#1e293b;--text-secondary:#475569;--text-muted:#94a3b8;--color-primary:#1a73e8;--color-primary-hover:#1557b0;--color-primary-glow:#1a73e81f;--color-success:#16a34a;--color-warning:#d97706;--color-danger:#dc2626;--remote-tv-bg:#1a1e2e;--remote-tv-surface:#24293f;--remote-tv-btn-bg:#2d334d;--remote-tv-btn-active:#1e2233;--remote-ac-bg:#fff;--remote-ac-recessed:#f1f5f9;--remote-ac-btn-bg:#475569;--remote-ac-btn-active:#334155;--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;--shadow-sm:0 2px 8px #0000000a, 0 1px 2px #00000008;--shadow-md:0 10px 25px -5px #00000014, 0 4px 10px -2px #0000000a;--shadow-lg:0 20px 40px -10px #0000001f, 0 0 0 1px #0000000d;--shadow-remote:0 25px 60px -15px #00000040, 0 0 0 1px #0000000f;--shadow-btn:0 3px 5px -1px #0003, inset 0 1px 0 #ffffff1f;--shadow-btn-pressed:inset 0 3px 6px #00000080;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-chassis:32px;--ease-spring:cubic-bezier(.175, .885, .32, 1.275);--ease-smooth:cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background-color:var(--bg-primary);width:100%;min-height:100vh;color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(at 0 0,#1a73e814 0,#0000 50%),radial-gradient(at 100% 100%,#007b830f 0,#0000 50%),radial-gradient(#f0f4f9 0,#e2e8f0 100%);background-attachment:fixed;font-size:16px;line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#00000026;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#0000004d}.mono{font-family:var(--font-mono)}@keyframes ackSuccessFlash{0%{filter:brightness(1.6)drop-shadow(0 0 10px #16a34a);transform:scale(.96)}50%{filter:brightness(1.3)drop-shadow(0 0 8px #16a34a);transform:scale(1.02)}to{filter:brightness()drop-shadow(0 0 #0000);transform:scale(1)}}.app-layout{flex-direction:column;align-items:center;min-height:100vh;padding:1.5rem 1rem 3.5rem;display:flex;position:relative}.app-header{z-index:10;flex-direction:column;gap:1rem;width:100%;max-width:400px;margin-bottom:1.25rem;display:flex}.header-top{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.brand-group{align-items:center;gap:.6rem;display:flex}.brand-icon{font-size:1.35rem}.brand-title{letter-spacing:-.02em;color:var(--text-primary);font-size:1.2rem;font-weight:700}.server-status-pill{background:var(--bg-surface);border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-sans);cursor:pointer;box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:20px;align-items:center;gap:.45rem;padding:.45rem .8rem;font-size:.8rem;font-weight:600;transition:all .15s;display:flex}.server-status-pill:hover{border-color:var(--border-color-hover);box-shadow:var(--shadow-md);background:#fff}.server-status-pill.status-connected .status-dot-pulse{color:var(--color-success)}.server-status-pill.status-connecting .status-dot-pulse{color:var(--color-warning)}.server-status-pill.status-offline .status-dot-pulse{color:var(--color-danger)}.server-host-text{text-overflow:ellipsis;white-space:nowrap;max-width:130px;font-family:var(--font-mono);color:var(--text-secondary);font-size:.75rem;overflow:hidden}.settings-gear-icon{opacity:.75;font-size:.85rem}.remote-tabs{border-radius:var(--radius-md);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);background:#ffffffd9;grid-template-columns:1fr 1fr;gap:.4rem;padding:.35rem;display:grid}.tab-btn{border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;gap:.45rem;padding:.65rem .5rem;font-size:.88rem;font-weight:600;transition:all .15s;display:flex}.tab-btn:hover{color:var(--text-primary);background:#00000008}.tab-btn.active{color:#fff;background:var(--color-primary);box-shadow:0 4px 12px #1a73e859}.tab-icon{font-size:1.05rem}.main-viewport{z-index:5;flex-direction:column;align-items:center;width:100%;max-width:400px;display:flex}.remote-wrapper{flex-direction:column;align-items:center;gap:1rem;width:100%;display:flex}button:focus:not(:focus-visible){outline:none}button:disabled{cursor:not-allowed;opacity:.85}.tv-remote-chassis{border-radius:var(--radius-chassis);width:100%;max-width:340px;box-shadow:var(--shadow-remote), inset 0 1px 1px #fff3;color:#fff;background:linear-gradient(#24293f 0%,#1a1e2d 60%,#131622 100%);border:1px solid #ffffff1f;flex-direction:column;gap:1.3rem;padding:1.5rem 1.35rem 1.8rem;display:flex}.tv-header-row{justify-content:space-between;align-items:center;display:flex}.tv-brand-tag{align-items:center;display:flex}.tv-brand-name{letter-spacing:.12em;color:#94a3b8;font-size:.78rem;font-weight:800}.tv-power-btn{color:#ef4444;cursor:pointer;background:linear-gradient(145deg,#2d181b,#1d1012);border:1px solid #ef444466;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;transition:all .1s;display:flex;box-shadow:0 4px 8px #0006}.tv-power-btn:hover{border-color:#ef4444;box-shadow:0 0 10px #ef444466}.tv-power-btn:active{transform:translateY(2px);box-shadow:inset 0 3px 6px #0009}.tv-function-row{grid-template-columns:repeat(4,1fr);gap:.45rem;display:grid}.tv-fn-btn{border-radius:var(--radius-sm);color:#fff;cursor:pointer;background:linear-gradient(#2d334d 0%,#202538 100%);border:1px solid #ffffff14;flex-direction:column;justify-content:center;align-items:center;min-height:46px;padding:.65rem .2rem;transition:all .1s;display:flex;box-shadow:0 3px 5px #0000004d}.tv-fn-btn:hover{background:linear-gradient(#363d5c 0%,#272c43 100%)}.tv-fn-btn:active{transform:translateY(2px);box-shadow:inset 0 3px 6px #0009}.tv-plus-btn .btn-label-primary{color:#38bdf8;font-size:1.15rem;line-height:1}.btn-label-primary{letter-spacing:.02em;font-size:.75rem;font-weight:700}.btn-label-sub{color:#94a3b8;letter-spacing:.03em;font-size:.56rem;font-weight:600}.dpad-cluster{justify-content:center;padding:.35rem 0;display:flex}.dpad-outer-ring{background:radial-gradient(circle,#272d44 0%,#191c2b 100%);border:2px solid #ffffff14;border-radius:50%;justify-content:center;align-items:center;width:190px;height:190px;display:flex;position:relative;box-shadow:0 10px 24px #00000080,inset 0 2px 4px #ffffff1a}.dpad-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:all .1s;display:flex;position:absolute}.dpad-btn:hover{color:#fff}.dpad-up{width:66px;height:46px;top:4px;left:50%;transform:translate(-50%)}.dpad-down{width:66px;height:46px;bottom:4px;left:50%;transform:translate(-50%)}.dpad-left{width:46px;height:66px;top:50%;left:4px;transform:translateY(-50%)}.dpad-right{width:46px;height:66px;top:50%;right:4px;transform:translateY(-50%)}.dpad-up:active,.dpad-down:active,.dpad-left:active,.dpad-right:active{color:#38bdf8}.dpad-ok{color:#fff;letter-spacing:.05em;z-index:2;background:radial-gradient(circle at 35% 35%,#3b4465 0%,#23293e 100%);border:1px solid #ffffff24;border-radius:50%;width:68px;height:68px;font-size:.95rem;font-weight:800;position:relative;box-shadow:0 6px 14px #0006,inset 0 1px 2px #fff3}.dpad-ok:hover{background:radial-gradient(circle at 35% 35%,#444f75 0%,#293049 100%)}.dpad-ok:active{color:#38bdf8;transform:scale(.96);box-shadow:inset 0 3px 6px #0009}.tv-rocker-section{grid-template-columns:1fr 1.2fr 1fr;align-items:center;gap:.85rem;display:grid}.rocker-column{flex-direction:column;align-items:center;gap:.35rem;display:flex}.rocker-label{color:#64748b;letter-spacing:.08em;font-size:.65rem;font-weight:800}.rocker-capsule{background:linear-gradient(#272d42 0%,#1a1d2c 100%);border:1px solid #ffffff1a;border-radius:28px;flex-direction:column;width:56px;height:110px;display:flex;overflow:hidden;box-shadow:0 4px 8px #0000004d}.rocker-btn{color:#fff;cursor:pointer;background:0 0;border:none;flex:1;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700;transition:all .1s;display:flex}.rocker-btn:hover{color:#38bdf8;background:#ffffff0f}.rocker-btn:active{background:#0000004d}.rocker-divider{background:#ffffff14;width:80%;height:1px;margin:0 auto}.tv-center-controls{flex-direction:column;gap:.65rem;display:flex}.tv-pill-btn{color:#94a3b8;cursor:pointer;background:linear-gradient(#272d42 0%,#1c2030 100%);border:1px solid #ffffff14;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;padding:.6rem .4rem;transition:all .1s;display:flex;box-shadow:0 3px 5px #0000004d}.tv-pill-btn:hover{color:#fff;background:linear-gradient(#313853 0%,#23283c 100%)}.tv-pill-btn:active{transform:translateY(2px);box-shadow:inset 0 3px 6px #00000080}.ac-remote-chassis{border-radius:var(--radius-chassis);width:100%;max-width:320px;box-shadow:var(--shadow-remote);color:#1e293b;background:#fff;flex-direction:column;padding:1.4rem 1.3rem 1.7rem;display:flex}.ac-remote-recessed-panel{background:#f1f5f9;border:1.5px solid #cbd5e1;border-radius:22px;flex-direction:column;gap:1.35rem;padding:1.4rem 1.2rem 1.5rem;display:flex;box-shadow:inset 0 2px 6px #0000000f}.ac-brand-header{flex-direction:column;align-items:center;padding-bottom:.2rem;display:flex}.ac-brand-label{letter-spacing:.2em;color:#0f172a;font-size:.95rem;font-weight:800}.ac-buttons-grid{grid-template-columns:1fr 1fr;align-items:center;gap:1.4rem 1.2rem;display:grid}.ac-button-cell{flex-direction:column;align-items:center;gap:.45rem;display:flex}.ac-button-cell.empty-slot{min-height:68px}.ac-btn{cursor:pointer;background:linear-gradient(#475569 0%,#334155 100%);border:1px solid #1e293b;transition:all .1s;position:relative;box-shadow:0 4px 8px #0003,inset 0 1px 1px #ffffff40}.ac-btn-rect{border-radius:8px;width:72px;height:40px}.ac-btn-oval{border-radius:21px;width:86px;height:42px}.ac-btn:hover{background:linear-gradient(#53647b 0%,#3c4c62 100%)}.ac-btn:active{transform:translateY(2px);box-shadow:inset 0 3px 6px #0009}.ac-icon-stencil{color:#334155;flex-direction:column;align-items:center;gap:.15rem;display:flex}.ac-icon-stencil svg{stroke:#1e293b}.ac-text-sub{letter-spacing:.06em;color:#475569;font-size:.62rem;font-weight:800}.ac-remote-bottom-grip{background:#cbd5e1;border-radius:2px;width:44px;height:4px;margin:.4rem auto 0}.last-ack-panel{border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;max-width:340px;box-shadow:var(--shadow-sm);background:#fff;flex-direction:column;gap:.25rem;padding:.65rem .9rem;display:flex}.last-ack-header{letter-spacing:.1em;color:var(--text-muted);font-size:.62rem;font-weight:800}.last-ack-body{justify-content:space-between;align-items:baseline;gap:.5rem;display:flex}.last-ack-name{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:.82rem;font-weight:700;overflow:hidden}.last-ack-time{color:var(--text-secondary);flex-shrink:0;font-size:.72rem}.last-ack-empty{color:var(--text-muted);font-size:.8rem}.setup-container{justify-content:center;width:100%;max-width:400px;padding-top:.5rem;display:flex}.setup-hero-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-lg);flex-direction:column;gap:1.2rem;padding:1.5rem;display:flex}.setup-intro-text{color:var(--text-secondary);font-size:.85rem;line-height:1.45}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#0f172a66;justify-content:center;align-items:center;padding:1rem;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.modal-card{border:1px solid var(--border-color);border-radius:var(--radius-lg);width:100%;max-width:420px;box-shadow:var(--shadow-lg);background:#fff;flex-direction:column;gap:1.2rem;padding:1.5rem;animation:.2s slideUp;display:flex}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-title-group{align-items:center;gap:.5rem;display:flex}.modal-title-group h3{color:var(--text-primary);font-size:1.1rem;font-weight:700}.modal-close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:.25rem .5rem;font-size:1.2rem}.settings-form{flex-direction:column;gap:1.15rem;display:flex}.form-group{flex-direction:column;gap:.4rem;display:flex}.form-label{color:var(--text-secondary);font-size:.82rem;font-weight:600}.form-input{background:var(--bg-input);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);font-family:var(--font-sans);border:1px solid #cbd5e1;padding:.65rem .8rem;font-size:.88rem;transition:all .15s}.form-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #1a73e82e}.form-hint{color:var(--text-muted);font-size:.72rem;line-height:1.4}.preset-chips{flex-wrap:wrap;gap:.4rem;margin-top:.2rem;display:flex}.chip-btn{color:var(--text-secondary);font-size:.75rem;font-family:var(--font-mono);cursor:pointer;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;padding:.25rem .55rem;transition:all .15s}.chip-btn:hover{color:var(--text-primary);background:#e2e8f0}.chip-btn.active{border-color:var(--color-primary);color:var(--color-primary);background:#1a73e81a;font-weight:700}.ws-status-bar{border-radius:var(--radius-sm);background:#f8fafc;border:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:.6rem .8rem;display:flex}.ws-status-label{color:var(--text-secondary);font-size:.8rem;font-weight:600}.ws-badge{font-size:.72rem;font-weight:700;font-family:var(--font-mono);border-radius:4px;padding:.2rem .5rem}.ws-badge.connected{color:var(--color-success);background:#16a34a26}.ws-badge.connecting{color:var(--color-warning);background:#d9770626}.ws-badge.disconnected,.ws-badge.error{color:var(--color-danger);background:#dc262626}.modal-actions{justify-content:flex-end;gap:.65rem;padding-top:.3rem;display:flex}.btn{border-radius:var(--radius-sm);font-family:var(--font-sans);cursor:pointer;border:none;padding:.65rem 1.25rem;font-size:.88rem;font-weight:600;transition:all .15s}.btn-primary{background:var(--color-primary);color:#fff;box-shadow:0 4px 12px #1a73e84d}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{color:var(--text-primary);background:#f1f5f9;border:1px solid #cbd5e1}.btn-secondary:hover{background:#e2e8f0}.btn-tertiary{color:var(--text-secondary);background:0 0}.btn-tertiary:hover{color:var(--text-primary)}.btn-full-mobile{width:100%}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}