:root{--font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--bg-dark:#0a0e17;--bg-grid:#6366f108;--remote-bg:#111827bf;--remote-border:#ffffff14;--remote-glow:#38bdf826;--accent-cyan:#38bdf8;--accent-cyan-glow:#38bdf866;--accent-purple:#818cf8;--accent-purple-glow:#818cf866;--accent-red:#f43f5e;--accent-red-glow:#f43f5e80;--accent-green:#10b981;--accent-green-glow:#10b98166;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--text-muted:#6b7280;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-dark);color:var(--text-primary);background-image:radial-gradient(at 0 0,#6366f126 0,#0000 50%),radial-gradient(at 100% 100%,#38bdf826 0,#0000 50%),linear-gradient(#0000,#0a0e17cc);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex;overflow-x:hidden}#root{width:100%;max-width:1200px;min-height:unset;border-inline:none;display:block}.app-container{grid-template-columns:1fr;align-items:start;gap:40px;width:100%;max-width:1000px;margin:0 auto;display:grid}@media (width>=768px){.app-container{grid-template-columns:360px 1fr}}.header-panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--remote-border);background:#1e293b66;border-radius:16px;flex-direction:column;grid-column:1/-1;gap:15px;margin-bottom:10px;padding:20px;display:flex;box-shadow:0 4px 30px #0006}@media (width>=640px){.header-panel{flex-direction:row;justify-content:space-between;align-items:center}}.title-section h1{background:linear-gradient(90deg,#38bdf8,#818cf8);color:#0000;-webkit-background-clip:text;background-clip:text;margin-bottom:4px;font-size:1.8rem;font-weight:700}.title-section p{color:var(--text-secondary);font-size:.85rem}.backend-switcher{border:1px solid var(--remote-border);background:#11182799;border-radius:9999px;align-items:center;gap:12px;padding:6px;display:flex}.switch-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:9999px;align-items:center;gap:6px;padding:8px 16px;font-size:.85rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.switch-btn.active{color:var(--bg-dark);background:linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));box-shadow:0 4px 12px var(--accent-cyan-glow)}.status-indicator{border:1px solid var(--remote-border);background:#11182766;border-radius:9999px;align-items:center;gap:8px;padding:8px 14px;font-size:.85rem;display:flex}.status-dot{background-color:var(--accent-red);width:8px;height:8px;box-shadow:0 0 8px var(--accent-red-glow);border-radius:50%}.status-dot.connected{background-color:var(--accent-green);box-shadow:0 0 10px var(--accent-green-glow);animation:2s infinite pulse-glow}.remote-body{background:var(--remote-bg);-webkit-backdrop-filter:blur(24px);border:1px solid var(--remote-border);width:100%;max-width:360px;box-shadow:0 15px 35px #00000080, inset 0 1px 1px #ffffff1a, 0 0 40px var(--remote-glow);border-radius:40px;flex-direction:column;gap:28px;margin:0 auto;padding:30px 24px;display:flex;position:relative}.remote-body:before{content:"";background:#1e293b;border-bottom:none;border-radius:6px 6px 0 0;width:40px;height:12px;position:absolute;top:-6px;left:50%;transform:translate(-50%)}.led-transmitter{background-color:#3f3f46;border-radius:50%;width:6px;height:6px;transition:all .15s;position:absolute;top:10px;left:50%;transform:translate(-50%)}.led-transmitter.active{background-color:var(--accent-cyan);box-shadow:0 0 12px 4px var(--accent-cyan)}.btn{color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;background:#1e293bb3;border:1px solid #ffffff0d;border-radius:12px;justify-content:center;align-items:center;font-size:.9rem;font-weight:500;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 2px 4px #0000004d,inset 0 1px #ffffff0d}.btn:hover{background:#334155cc;border-color:#ffffff26;transform:translateY(-1px)}.btn:active{background:#0f172acc;transform:translateY(1px);box-shadow:0 1px 2px #0006}.btn-power{border:1px solid var(--accent-red);width:52px;height:52px;color:var(--accent-red);background:#f43f5e26;border-radius:50%;box-shadow:0 0 8px #f43f5e33}.btn-power:hover{background:var(--accent-red);color:var(--bg-dark);box-shadow:0 0 16px var(--accent-red-glow)}.btn-power:active{color:var(--text-primary);box-shadow:0 0 6px var(--accent-red-glow);background:#be123c}.top-row{justify-content:space-between;align-items:center;display:flex}.dpad-container{justify-content:center;align-items:center;margin:10px 0;display:flex}.dpad{background:#111827;border:4px solid #1f2937;border-radius:50%;width:200px;height:200px;position:relative;box-shadow:0 8px 16px #0009,inset 0 2px 8px #000c}.dpad-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:color .15s,text-shadow .15s;display:flex;position:absolute}.dpad-btn:hover{color:var(--accent-cyan)}.dpad-btn:active{color:var(--accent-purple)}.dpad-up{border-radius:30px 30px 0 0;width:60px;height:45px;top:10px;left:50%;transform:translate(-50%)}.dpad-down{border-radius:0 0 30px 30px;width:60px;height:45px;bottom:10px;left:50%;transform:translate(-50%)}.dpad-left{border-radius:30px 0 0 30px;width:45px;height:60px;top:50%;left:10px;transform:translateY(-50%)}.dpad-right{border-radius:0 30px 30px 0;width:45px;height:60px;top:50%;right:10px;transform:translateY(-50%)}.dpad-ok{background:radial-gradient(135deg, #1f2937, #374151);width:70px;height:70px;color:var(--text-primary);cursor:pointer;border:3px solid #111827;border-radius:50%;justify-content:center;align-items:center;font-size:.95rem;font-weight:700;transition:all .15s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 8px #0006,inset 0 1px 1px #ffffff1a}.dpad-ok:hover{background:radial-gradient(135deg, #374151, #4b5563);border-color:var(--accent-cyan);box-shadow:0 4px 12px #38bdf833,inset 0 1px 1px #ffffff26}.dpad-ok:active{box-shadow:none;background:#111827;transform:translate(-50%,-50%)scale(.95)}.nav-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.nav-grid .btn{letter-spacing:.05em;text-transform:uppercase;height:44px;font-size:.85rem;font-weight:600}.controls-layout{justify-content:space-between;align-items:center;gap:20px;display:flex}.rocker-capsule{background:#111827;border:1px solid #ffffff0d;border-radius:30px;flex-direction:column;justify-content:space-between;align-items:center;width:60px;height:110px;padding:8px 0;display:flex;box-shadow:0 4px 8px #00000080,inset 0 2px 4px #0009}.rocker-btn{color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;justify-content:center;align-items:center;width:100%;height:40px;font-size:1.1rem;transition:all .15s;display:flex}.rocker-btn:hover{color:var(--accent-cyan)}.rocker-btn:active{color:var(--text-primary);transform:scale(.9)}.rocker-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;font-size:.65rem;font-weight:700}.mute-container{flex-grow:1;justify-content:center;display:flex}.btn-mute{border-radius:50%;width:50px;height:50px}.btn-mute.active{background:var(--accent-purple-glow);border-color:var(--accent-purple);color:var(--text-primary);box-shadow:0 0 10px var(--accent-purple-glow)}.queue-panel{-webkit-backdrop-filter:blur(24px);border:1px solid var(--remote-border);background:#11182773;border-radius:24px;flex-direction:column;gap:20px;height:100%;padding:24px;display:flex;box-shadow:0 10px 30px #0000004d}@media (width>=768px){.queue-panel{min-height:500px;max-height:720px}}.queue-header{border-bottom:1px solid var(--remote-border);justify-content:space-between;align-items:center;padding-bottom:15px;display:flex}.queue-header h2{align-items:center;gap:8px;font-size:1.25rem;font-weight:600;display:flex}.queue-badge{color:var(--accent-cyan);background:#38bdf826;border-radius:9999px;padding:4px 10px;font-size:.75rem;font-weight:700}.queue-badge.empty{color:var(--text-muted);background:#6b72801a}.queue-list-container{scrollbar-gutter:stable;overscroll-behavior:contain;flex-grow:1;padding-right:4px;overflow-y:auto}.queue-list-container::-webkit-scrollbar{width:6px}.queue-list-container::-webkit-scrollbar-track{background:#ffffff05;border-radius:99px}.queue-list-container::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:99px}.queue-list-container::-webkit-scrollbar-thumb:hover{background:#fff3}.queue-list{flex-direction:column;gap:12px;list-style:none;display:flex}.queue-item{background:#ffffff08;border:1px solid #ffffff08;border-radius:12px;justify-content:space-between;align-items:center;padding:12px 16px;animation:.2s cubic-bezier(.16,1,.3,1) forwards slide-in;display:flex}.queue-item:nth-child(2n){background:#ffffff0d}.queue-item-name{color:var(--text-primary);text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;font-weight:600}.queue-item-index{color:var(--text-muted);font-size:.75rem;font-weight:600}.queue-empty-state{height:200px;color:var(--text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:20px;display:flex}.queue-empty-state svg{color:#ffffff14}.activity-panel{border-top:1px solid var(--remote-border);flex-direction:column;gap:8px;padding-top:15px;display:flex}.activity-header{text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em;font-size:.75rem;font-weight:700}.activity-log{color:var(--accent-green);background:#000;border:1px solid #10b9811a;border-radius:8px;min-height:48px;max-height:80px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;overflow-y:auto}.activity-log-err{color:var(--accent-red)}@keyframes pulse-glow{0%,to{opacity:1;box-shadow:0 0 10px var(--accent-green-glow)}50%{opacity:.6;box-shadow:0 0 4px var(--accent-green-glow)}}@keyframes slide-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.pulse-active{animation:.15s ease-out flash-led}@keyframes flash-led{0%{background-color:var(--accent-cyan);box-shadow:0 0 16px 6px var(--accent-cyan)}to{box-shadow:none;background-color:#3f3f46}}