:root{--bg-primary: #0a0a1a;--bg-secondary: #111122;--bg-tertiary: #1a1a2e;--bg-card: #16162a;--text-primary: #ffffff;--text-secondary: #a0a0c0;--text-muted: #6a6a8a;--accent-primary: #00ffaa;--accent-secondary: #4ecdc4;--accent-tertiary: #ff6b6b;--border-color: #2a2a4a;--border-glow: rgba(0, 255, 170, .3);--gradient-primary: linear-gradient(135deg, #00ffaa 0%, #4ecdc4 100%);--gradient-secondary: linear-gradient(135deg, #4ecdc4 0%, #556270 100%);--gradient-danger: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);--particle-color: rgba(0, 255, 170, .6);--particle-color-2: rgba(78, 205, 196, .4);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-xxl: 3rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 20px;--transition-fast: .15s ease;--transition-normal: .3s ease;--font-display: "Orbitron", sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif}[data-theme=light]{--bg-primary: #f5f5fa;--bg-secondary: #e8e8f0;--bg-tertiary: #dcdce8;--bg-card: #ffffff;--text-primary: #1a1a2e;--text-secondary: #4a4a6a;--text-muted: #8a8aaa;--accent-primary: #00cc88;--accent-secondary: #3db8b0;--accent-tertiary: #e05050;--border-color: #c0c0d8;--border-glow: rgba(0, 204, 136, .3);--gradient-primary: linear-gradient(135deg, #00cc88 0%, #3db8b0 100%);--gradient-secondary: linear-gradient(135deg, #3db8b0 0%, #6a7a8a 100%);--gradient-danger: linear-gradient(135deg, #e05050 0%, #d04020 100%);--particle-color: rgba(0, 150, 100, .4);--particle-color-2: rgba(60, 180, 170, .3)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;overflow-x:hidden}body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-y:auto}#app{min-height:100vh;display:flex;align-items:center;justify-content:center}.screen{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}.screen.hidden{display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#particles-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}#screen-menu{position:relative;overflow:hidden}.menu-container{position:relative;z-index:1;text-align:center;padding:var(--spacing-xxl);padding-bottom:80px}.game-title{font-family:var(--font-display);font-size:5rem;font-weight:900;margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:.1em}.title-ping{color:var(--accent-tertiary);text-shadow:0 0 30px rgba(255,107,107,.5)}.title-pong{color:var(--accent-secondary);text-shadow:0 0 30px rgba(78,205,196,.5)}.subtitle{font-family:var(--font-display);font-size:1.2rem;color:var(--text-secondary);letter-spacing:.3em;text-transform:uppercase;margin-bottom:var(--spacing-xxl)}.menu-buttons{display:flex;flex-direction:column;gap:var(--spacing-lg);margin-bottom:var(--spacing-xxl)}.controls-hint{display:flex;justify-content:center;gap:var(--spacing-xxl);color:var(--text-muted);font-size:.9rem}.control{display:flex;align-items:center;gap:var(--spacing-sm)}.key{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-family:var(--font-display);font-size:.8rem;font-weight:700}.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-lg) var(--spacing-xl);border:none;border-radius:var(--radius-lg);font-family:var(--font-display);font-size:1.1rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);text-transform:uppercase;letter-spacing:.05em;min-width:280px}.btn-icon{font-size:1.5rem;margin-bottom:var(--spacing-xs)}.btn-hint{font-family:var(--font-body);font-size:.75rem;font-weight:400;opacity:.7;text-transform:none;letter-spacing:normal;margin-top:var(--spacing-xs)}.btn-primary{background:var(--gradient-primary);color:var(--bg-primary);box-shadow:0 4px 20px #00ffaa4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px #00ffaa80}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:2px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-secondary);border-color:var(--accent-secondary);box-shadow:0 0 20px #4ecdc433}.btn-back{background:#0009;color:var(--text-secondary);padding:var(--spacing-sm) var(--spacing-md);min-width:auto;position:absolute;top:var(--spacing-md);left:var(--spacing-md);z-index:100;border-radius:var(--radius-md);border:1px solid var(--border-color)}.btn-back:hover{color:var(--text-primary);background:#000c;border-color:var(--accent-secondary)}.btn-icon-only{min-width:auto;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-tertiary);border:1px solid var(--border-color);font-size:1.2rem}.btn-large{padding:var(--spacing-xl) var(--spacing-xxl);font-size:1.4rem}.btn.ready{background:var(--gradient-danger)}.btn:disabled{opacity:.5;cursor:not-allowed}.lobbies-container{width:100%;max-width:800px;padding:var(--spacing-xl);overflow-x:hidden;box-sizing:border-box}.lobbies-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-xl)}.lobbies-header h2{font-family:var(--font-display);font-size:1.8rem;color:var(--accent-primary)}.header-actions{display:flex;gap:var(--spacing-md)}.lobby-list{display:flex;flex-direction:column;gap:var(--spacing-md);max-height:60vh;overflow-y:auto;padding-right:var(--spacing-sm)}.lobby-list::-webkit-scrollbar{width:6px}.lobby-list::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:3px}.lobby-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.lobby-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);transition:all var(--transition-fast)}.lobby-item:hover{border-color:var(--accent-secondary);box-shadow:0 0 20px #4ecdc41a}.lobby-info{display:flex;align-items:center;gap:var(--spacing-lg)}.lobby-name{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--text-primary)}.lobby-players,.lobby-health{color:var(--text-secondary);font-size:.9rem}.lobby-phase{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;text-transform:uppercase}.phase-waiting{background:#ffc10733;color:#ffc107}.phase-ready{background:#0fa3;color:var(--accent-primary)}.phase-countdown,.phase-playing{background:#4ecdc433;color:var(--accent-secondary)}.phase-gameOver{background:#ff6b6b33;color:var(--accent-tertiary)}.btn-join{padding:var(--spacing-sm) var(--spacing-lg);min-width:80px}.no-lobbies{text-align:center;color:var(--text-muted);padding:var(--spacing-xxl)}.lobby-room-container{text-align:center;padding:var(--spacing-xxl);width:100%;max-width:500px}.lobby-room-header{display:flex;align-items:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-xxl)}.lobby-room-header h2{font-family:var(--font-display);font-size:1.5rem;color:var(--accent-primary);flex:1}.lobby-players{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-xxl)}.player-slot{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius-lg);transition:all var(--transition-fast)}.player-slot.ready{border-color:var(--accent-primary);box-shadow:0 0 15px #0fa3}.player-name{font-family:var(--font-display);font-weight:600}.player-side{color:var(--text-secondary)}.player-ready{font-size:.9rem;color:var(--text-muted)}.player-slot.ready .player-ready{color:var(--accent-primary)}.lobby-actions{margin-bottom:var(--spacing-lg)}.lobby-hint{color:var(--text-muted);font-size:.9rem}.game-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--bg-primary)}#game-canvas{max-width:100%;max-height:100%;border-radius:var(--radius-lg);box-shadow:0 0 50px #0fa3}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.modal.hidden{display:none}.modal-content{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:var(--spacing-xl);width:100%;max-width:400px;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-content h3{font-family:var(--font-display);font-size:1.4rem;color:var(--accent-primary);margin-bottom:var(--spacing-xl);text-align:center}.form-group{margin-bottom:var(--spacing-lg)}.form-group label{display:block;margin-bottom:var(--spacing-sm);color:var(--text-secondary);font-size:.9rem}.form-group input[type=text]{width:100%;padding:var(--spacing-md);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-body);font-size:1rem;transition:border-color var(--transition-fast)}.form-group input[type=text]:focus{outline:none;border-color:var(--accent-primary)}.form-group input[type=range]{width:calc(100% - 40px);margin-right:var(--spacing-sm);accent-color:var(--accent-primary)}#lobby-health-value,#local-health-value{display:inline-block;width:24px;text-align:center;font-family:var(--font-display);font-weight:700;color:var(--accent-primary)}.toggle-label{display:flex;align-items:center;gap:var(--spacing-md);cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-label input[type=checkbox]{width:48px;height:24px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:12px;position:relative;cursor:pointer;transition:all var(--transition-fast)}.toggle-label input[type=checkbox]:before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--text-secondary);top:1px;left:1px;transition:all var(--transition-fast)}.toggle-label input[type=checkbox]:checked{background:var(--accent-primary);border-color:var(--accent-primary)}.toggle-label input[type=checkbox]:checked:before{transform:translate(24px);background:var(--bg-primary)}.toggle-text{color:var(--text-primary);font-size:1rem}.modal-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-xl)}.modal-actions .btn{flex:1;min-width:auto}.difficulty-options{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.difficulty-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-display);font-size:.85rem;cursor:pointer;transition:all var(--transition-fast)}.difficulty-btn:hover{border-color:var(--accent-secondary)}.difficulty-btn.active{border-color:var(--accent-primary);background:#00ffaa26;color:var(--accent-primary)}.touch-controls{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:15px;z-index:200;pointer-events:auto}.touch-controls.hidden{display:none}.touch-btn{width:70px;height:70px;border-radius:50%;border:3px solid var(--accent-primary);background:#00ffaa26;color:var(--accent-primary);font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}.touch-btn:active{background:#0fa6;transform:scale(.95)}.touch-action{width:auto;min-width:100px;height:60px;padding:0 20px;border-radius:30px;font-size:14px;font-family:var(--font-display);letter-spacing:.1em;white-space:nowrap}.touch-action.hidden{display:none}.touch-laser{width:auto;min-width:60px;padding:0 15px;border-radius:35px;font-size:14px;font-family:var(--font-display);border-color:var(--accent-tertiary);background:#ff6b6b26;color:var(--accent-tertiary)}.touch-laser:active{background:#ff6b6b66}.touch-laser.hidden{display:none}.btn-settings{position:fixed;top:20px;right:20px;width:50px;height:50px;border-radius:50%;background:var(--bg-tertiary);border:2px solid var(--border-color);color:var(--text-secondary);font-size:24px;cursor:pointer;transition:all var(--transition-fast);z-index:50;display:flex;align-items:center;justify-content:center;padding:0;min-width:auto}.btn-settings:hover{border-color:var(--accent-secondary);color:var(--text-primary)}.settings-options{display:flex;flex-direction:column;gap:var(--spacing-md)}.settings-option{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.settings-option:hover{border-color:var(--accent-secondary)}.settings-option.active{border-color:var(--accent-primary);background:#00ffaa1a}.settings-option-label{font-family:var(--font-display);font-size:.9rem}.settings-option-desc{font-size:.75rem;color:var(--text-muted)}.settings-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--border-color);display:flex;align-items:center;justify-content:center;color:transparent;transition:all var(--transition-fast)}.settings-option.active .settings-check{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--bg-primary)}.settings-section{margin-bottom:var(--spacing-lg)}.settings-section h4{font-family:var(--font-display);font-size:.85rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--spacing-sm)}.language-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm)}.language-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-size:.85rem;color:var(--text-primary)}.language-btn:hover{border-color:var(--accent-secondary)}.language-btn.active{border-color:var(--accent-primary);background:#00ffaa1a}.language-btn .flag{font-size:1.1rem}.theme-toggle-container{display:flex;gap:var(--spacing-sm)}.theme-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-md);background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-size:.95rem;color:var(--text-primary);font-family:var(--font-body)}.theme-btn:hover{border-color:var(--accent-secondary)}.theme-btn.active{border-color:var(--accent-primary);background:#00ffaa26;color:var(--accent-primary)}@media (max-width: 768px){html,body{overflow:auto;touch-action:pan-y}.game-title{font-size:2.5rem}.subtitle{font-size:.9rem;letter-spacing:.15em}.menu-container{padding:var(--spacing-lg)}.btn{min-width:100%;padding:var(--spacing-md) var(--spacing-lg);font-size:1rem}.btn-icon{font-size:1.3rem}.controls-hint{display:none}.lobbies-container{padding:var(--spacing-sm);max-width:100%}.lobby-info{flex-wrap:wrap;gap:var(--spacing-xs)}.lobbies-header{flex-direction:column;align-items:stretch;gap:var(--spacing-md);position:relative}.lobbies-header h2{font-size:1.4rem;text-align:center;margin-top:var(--spacing-sm)}.header-actions{display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.header-actions .btn{width:100%;min-width:auto}.btn-back{position:relative;top:auto;left:auto;width:100%}.lobby-item{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.btn-join{width:100%}#screen-localGame,#screen-onlineGame{flex-direction:column!important;align-items:stretch;padding-top:var(--spacing-sm)}#screen-localGame .btn-back,#screen-onlineGame .btn-back{position:relative!important;top:auto!important;left:auto!important;width:auto;align-self:flex-start;margin-left:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.game-container{padding:var(--spacing-sm);flex:1;display:flex;align-items:center;justify-content:center}#game-canvas-local,#game-canvas-online{max-width:100%;max-height:calc(100vh - 180px);border-radius:var(--radius-md)}.touch-controls{bottom:15px;gap:10px}.touch-btn{width:60px;height:60px;font-size:24px}.touch-space{min-width:80px;padding:0 15px;font-size:12px}.modal-content{margin:var(--spacing-md);max-width:calc(100% - var(--spacing-xl))}.lobby-room-container{padding:var(--spacing-lg)}.lobby-room-header{flex-direction:column;align-items:flex-start}.lobby-room-header h2{font-size:1.2rem}.btn-settings{top:10px;right:10px;width:45px;height:45px;font-size:20px}}@media (max-width: 480px){.game-title{font-size:2rem}.subtitle{font-size:.8rem;margin-bottom:var(--spacing-xl)}.touch-controls{bottom:10px}.touch-btn{width:55px;height:55px;font-size:22px}#game-canvas-local,#game-canvas-online{max-height:calc(100vh - 140px)}}@media (max-height: 500px) and (orientation: landscape){.touch-controls{bottom:10px;right:20px;left:auto;transform:none;flex-direction:column}.touch-btn{width:50px;height:50px;font-size:20px}.touch-space{min-width:auto;width:50px;font-size:10px;padding:0}#game-canvas-local,#game-canvas-online{max-height:calc(100vh - 20px)}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.overlay.hidden{display:none}.overlay-content{background:var(--bg-card);border:2px solid var(--accent-primary);border-radius:var(--radius-xl);padding:var(--spacing-xl);width:100%;max-width:450px;text-align:center;animation:slideUp .3s ease}.overlay-content h2{font-family:var(--font-display);font-size:2rem;color:var(--accent-primary);margin-bottom:var(--spacing-sm)}.overlay-content>p{color:var(--text-muted);margin-bottom:var(--spacing-xl)}.key-bindings-section{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl);text-align:left}.key-bindings-section h3{font-family:var(--font-display);font-size:1rem;color:var(--accent-secondary);margin-bottom:var(--spacing-xs)}.key-bindings-section .hint{font-size:.8rem;color:var(--text-muted);margin-bottom:var(--spacing-md)}#key-bindings-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.key-binding-row{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border-color)}.key-binding-row.rebinding{border-color:var(--accent-primary);animation:pulse .5s infinite alternate}@keyframes pulse{0%{box-shadow:0 0 5px #00ffaa4d}to{box-shadow:0 0 15px #0fa9}}.player-label{font-family:var(--font-display);font-size:.9rem}.key-buttons{display:flex;gap:var(--spacing-xs)}.key-btn{padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-display);font-size:.8rem;min-width:40px;text-align:center;cursor:pointer;transition:all var(--transition-fast)}.key-btn:hover{border-color:var(--accent-primary);background:#00ffaa1a}.key-btn.active{border-color:var(--accent-primary);background:var(--accent-primary);color:var(--bg-primary)}.overlay-actions{display:flex;gap:var(--spacing-md)}.overlay-actions .btn{flex:1;min-width:auto}#local-paddle-speed-value,#lobby-paddle-speed-value,#local-players-value{display:inline-block;width:36px;text-align:center;font-family:var(--font-display);font-weight:700;color:var(--accent-primary)}.keybindings-panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);max-width:600px;margin:0 auto}.keybindings-title,.controller-title{font-family:var(--font-display);font-size:1rem;color:var(--text-secondary);margin-bottom:var(--spacing-md);text-align:center;font-weight:600}.keybindings-table{width:100%;border-collapse:collapse;margin-bottom:var(--spacing-md);font-size:.85rem}.keybindings-table th{font-family:var(--font-display);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);padding:var(--spacing-sm);text-align:center;border-bottom:1px solid var(--border-color)}.keybindings-table td{padding:var(--spacing-xs) var(--spacing-sm);text-align:center;vertical-align:middle}.keybindings-table tr.keybinding-extra{opacity:.7}.player-label{font-family:var(--font-display);font-weight:700;font-size:.8rem}.keybindings-table .key{min-width:40px;display:inline-block}.key-wide{min-width:60px;width:auto;padding:0 var(--spacing-sm)}.spacebar-hint{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--bg-secondary);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.85rem}.controller-section{margin-top:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid var(--border-color)}.controller-status{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);font-size:.9rem;color:var(--text-secondary);transition:all var(--transition-normal)}.controller-status.connected{background:#00ffaa1a;border:1px solid var(--accent-primary);color:var(--accent-primary)}.controller-status.connected .controller-icon{animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.controller-icon{font-size:1.2rem}.controller-bindings{display:flex;flex-direction:column;gap:var(--spacing-xs)}.controller-binding{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm);background:var(--bg-secondary);border-radius:var(--radius-sm);font-size:.8rem}.controller-key{font-family:var(--font-display);font-weight:600;color:var(--accent-secondary);font-size:.75rem}@media (max-width: 600px){.keybindings-panel{padding:var(--spacing-md)}.keybindings-grid{grid-template-columns:1fr}.keybinding-extra{display:none}.keybindings-title,.controller-title{font-size:.9rem}.key{width:28px;height:28px;font-size:.7rem}}.keybindings-title .hint{font-size:.7rem;font-weight:400;color:var(--text-muted);font-family:var(--font-body)}.key.editable{cursor:pointer;transition:all var(--transition-fast);position:relative}.key.editable:hover{background:var(--accent-secondary);color:var(--bg-primary);border-color:var(--accent-secondary);transform:scale(1.1)}.key.listening{background:var(--accent-tertiary);color:var(--bg-primary);border-color:var(--accent-tertiary);animation:listeningPulse .8s ease-in-out infinite}@keyframes listeningPulse{0%,to{box-shadow:0 0 5px #ff6b6b80;transform:scale(1)}50%{box-shadow:0 0 20px #ff6b6bcc;transform:scale(1.1)}}.keybindings-actions{display:flex;justify-content:center;margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border-color)}.btn-small{padding:var(--spacing-sm) var(--spacing-md);font-size:.75rem;min-width:auto;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary)}.btn-small:hover{background:var(--bg-secondary);border-color:var(--accent-secondary);color:var(--text-primary)}