.connection-panel{width:100%;height:100%;padding:2rem 1.5rem;padding-top:calc(2rem + var(--safe-area-top,0px));padding-bottom:calc(2rem + var(--safe-area-bottom,0px));background:radial-gradient(ellipse at 20% 0%, var(--accent-light) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, #6464ff0f 0%, transparent 50%), var(--bg-primary);flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden auto}.connection-panel:before{content:"";background-image:radial-gradient(2px 2px at 20% 30%, var(--accent-light), transparent), radial-gradient(2px 2px at 40% 70%, var(--accent-light), transparent), radial-gradient(1px 1px at 60% 20%, var(--accent-light), transparent), radial-gradient(1px 1px at 80% 60%, var(--accent-light), transparent);pointer-events:none;opacity:.5;background-size:200% 100%;animation:20s linear infinite shimmer;position:absolute;inset:0}.connection-settings-btn{top:calc(1.25rem + var(--safe-area-top,0px));right:calc(1.25rem + var(--safe-area-right,0px));border-radius:var(--radius-md);width:44px;height:44px;color:var(--text-secondary);transition:all var(--transition-base);z-index:10;justify-content:center;align-items:center;display:flex;position:absolute}.connection-settings-btn:hover{background:var(--bg-hover);color:var(--text-primary);transform:rotate(30deg)}.connection-settings-btn:active{transform:rotate(30deg)scale(.92)}.connection-settings-btn svg{width:22px;height:22px}.connection-logo{animation:fadeInDown var(--transition-slow) ease-out;z-index:1;flex-direction:column;align-items:center;margin-bottom:2.5rem;display:flex;position:relative}.connection-logo-icon{border-radius:var(--radius-xl);background:linear-gradient(135deg, var(--accent), var(--accent-hover));width:80px;height:80px;box-shadow:var(--shadow-glow), var(--shadow-md);justify-content:center;align-items:center;margin-bottom:1.25rem;animation:3s ease-in-out infinite glow;display:flex;position:relative}.connection-logo-icon:after{content:"";border-radius:calc(var(--radius-xl) + 4px);background:linear-gradient(135deg, var(--accent), transparent, var(--accent-hover));z-index:-1;opacity:.3;animation:3s ease-in-out infinite pulse;position:absolute;inset:-4px}.connection-logo-icon svg{color:#fff;width:40px;height:40px}.connection-logo h1{font-size:var(--font-3xl);letter-spacing:-.02em;background:linear-gradient(135deg, var(--text-primary), var(--text-accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:800}.connection-logo p{font-size:var(--font-base);color:var(--text-secondary);margin-top:.25rem}.connection-form{width:100%;max-width:420px;animation:fadeInUp var(--transition-slow) ease-out .15s both;z-index:1;transition:transform var(--transition-fast);flex-direction:column;gap:1rem;display:flex;position:relative}.connection-form--error{animation:.5s ease-in-out shake}.connection-input-wrapper{position:relative}.connection-input{background:var(--bg-secondary);border:1.5px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text-primary);font-size:var(--font-base);transition:all var(--transition-base);padding:.875rem 1.125rem}.connection-input::placeholder{color:var(--text-muted)}.connection-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.connection-input:hover:not(:focus){border-color:var(--border-light)}.connection-form--error .connection-input{border-color:var(--accent-red,#ef4444)}.connection-hint{font-size:var(--font-xs);color:var(--text-muted);margin-top:.25rem;padding-left:.25rem}.connection-btn{background:linear-gradient(135deg, var(--accent), var(--accent-hover));color:#fff;width:100%;font-size:var(--font-base);border-radius:var(--radius-md);transition:all var(--transition-base);padding:.875rem 1.5rem;font-weight:600;position:relative;overflow:hidden}.connection-btn:hover{box-shadow:var(--shadow-glow), var(--shadow-md);transform:translateY(-1px)}.connection-btn:active{transform:translateY(0)scale(.98)}.connection-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.connection-btn .ripple{pointer-events:none;background:#ffffff4d;border-radius:50%;animation:.6s linear ripple;position:absolute;transform:scale(0)}.connection-btn-content{justify-content:center;align-items:center;gap:.5rem;display:flex}.connection-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}.connection-status{font-size:var(--font-sm);color:var(--text-secondary);transition:color var(--transition-base);justify-content:center;align-items:center;gap:.5rem;margin-top:.25rem;display:flex}.connection-status-dot{background:var(--text-muted);width:8px;height:8px;transition:background var(--transition-base), box-shadow var(--transition-base);border-radius:50%}.connection-status-dot.connected{background:#22c55e;animation:2s ease-in-out infinite pulse;box-shadow:0 0 8px #22c55e80}.connection-status-dot.connecting{background:#f59e0b;animation:1s ease-in-out infinite pulse}.connection-status-dot.error{background:#ef4444;box-shadow:0 0 8px #ef444480}.connection-error-message{color:#ef4444;font-size:var(--font-xs);text-align:center;border-radius:var(--radius-sm);animation:fadeIn var(--transition-fast) ease-out;background:#ef444414;border:1px solid #ef444433;margin-top:.25rem;padding:.5rem .75rem}.connection-recent{width:100%;max-width:420px;animation:fadeInUp var(--transition-slow) ease-out .3s both;z-index:1;margin-top:2rem;position:relative}.connection-recent-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.connection-recent-header h3{font-size:var(--font-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.connection-recent-clear{font-size:var(--font-xs);color:var(--text-muted);transition:color var(--transition-fast)}.connection-recent-clear:hover{color:var(--text-accent)}.connection-recent-list{flex-direction:column;gap:.375rem;display:flex}.connection-recent-item{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);text-align:left;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;display:flex}.connection-recent-item:hover{background:var(--bg-hover);border-color:var(--accent);transform:translate(4px)}.connection-recent-item:active{transform:translate(4px)scale(.98)}.connection-recent-icon{border-radius:var(--radius-sm);background:var(--accent-light);width:36px;height:36px;color:var(--text-accent);flex-shrink:0;justify-content:center;align-items:center;display:flex}.connection-recent-icon svg{width:18px;height:18px}.connection-recent-info{flex:1;min-width:0}.connection-recent-name{font-size:var(--font-sm);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.connection-recent-time{font-size:var(--font-xs);color:var(--text-muted)}.connection-recent-empty{text-align:center;color:var(--text-muted);font-size:var(--font-sm);padding:1.5rem}@media (width<=480px){.connection-panel{padding:1.5rem 1rem;padding-top:calc(1.5rem + var(--safe-area-top,0px));padding-bottom:calc(1.5rem + var(--safe-area-bottom,0px))}.connection-logo h1{font-size:var(--font-2xl)}.connection-logo-icon{width:64px;height:64px}.connection-logo-icon svg{width:32px;height:32px}}.touch-controller{z-index:15;touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair;width:100%;height:100%;position:absolute;top:0;left:0}.touch-controller.trackpad{cursor:grab}.touch-controller.trackpad:active{cursor:grabbing}.remote-canvas{background:var(--bg-primary);width:100%;height:100%;position:relative;overflow:hidden}.remote-canvas-screen{background:repeating-conic-gradient(var(--bg-tertiary) 0% 25%, var(--bg-secondary) 0% 50%) 0 0 / 40px 40px;cursor:crosshair;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.remote-canvas-placeholder{color:var(--text-muted);animation:fadeIn var(--transition-slow) ease-out;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:1rem;display:flex}.remote-canvas-placeholder svg{opacity:.3;width:64px;height:64px}.remote-canvas-placeholder p{font-size:var(--font-sm);opacity:.6}.remote-canvas-placeholder .cursor-blink{background:var(--text-accent);vertical-align:text-bottom;width:2px;height:1em;margin-left:4px;animation:1s step-end infinite cursorBlink;display:inline-block}.remote-canvas-statusbar{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px)saturate(1.4);border-bottom:1px solid var(--glass-border);z-index:20;animation:fadeInDown var(--transition-base) ease-out;justify-content:space-between;align-items:center;padding:.5rem 1rem;display:flex;position:absolute;top:0;left:0;right:0}.remote-canvas-stats{font-size:var(--font-xs);color:var(--text-secondary);align-items:center;gap:1.25rem;display:flex}.remote-canvas-stat{align-items:center;gap:.375rem;display:flex}.remote-canvas-stat-label{color:var(--text-muted)}.remote-canvas-stat-value{font-variant-numeric:tabular-nums;color:var(--text-primary);font-weight:600}.remote-canvas-quality{align-items:center;gap:.375rem;display:flex}.remote-canvas-quality-dot{border-radius:50%;width:8px;height:8px;animation:2s ease-in-out infinite pulse}.remote-canvas-quality-dot.excellent{background:#22c55e;box-shadow:0 0 6px #22c55e80}.remote-canvas-quality-dot.good{background:#f59e0b;box-shadow:0 0 6px #f59e0b80}.remote-canvas-quality-dot.poor{background:#ef4444;box-shadow:0 0 6px #ef444480}.remote-canvas-quality-text{font-weight:500}.remote-canvas-disconnect{border-radius:var(--radius-pill);color:#ef4444;font-size:var(--font-xs);transition:all var(--transition-fast);background:#ef444426;align-items:center;gap:.375rem;padding:.375rem .75rem;font-weight:500;display:flex}.remote-canvas-disconnect:hover{background:#ef444440}.remote-canvas-disconnect:active{transform:scale(.95)}.remote-canvas-disconnect svg{width:14px;height:14px}.remote-canvas-fab{background:linear-gradient(135deg, var(--accent), var(--accent-hover));color:#fff;width:52px;height:52px;box-shadow:var(--shadow-md), var(--shadow-glow);z-index:25;transition:all var(--transition-base);animation:fadeIn var(--transition-slow) ease-out .3s both;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;bottom:1.5rem;right:1.5rem}.remote-canvas-fab:hover{box-shadow:var(--shadow-lg), var(--shadow-glow);transform:scale(1.08)}.remote-canvas-fab:active{transform:scale(.95)}.remote-canvas-fab.active{background:var(--bg-hover);color:var(--text-accent);box-shadow:var(--shadow-md)}.remote-canvas-fab svg{width:24px;height:24px}.remote-canvas-settings-btn{border-radius:var(--radius-sm);width:36px;height:36px;color:var(--text-secondary);transition:all var(--transition-base);z-index:21;justify-content:center;align-items:center;display:flex;position:absolute;top:.5rem;right:.5rem}.remote-canvas-settings-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.remote-canvas-settings-btn svg{width:18px;height:18px}.remote-canvas-mode-badge{border-radius:var(--radius-pill);letter-spacing:.04em;text-transform:uppercase;color:#818cf8;background:#6366f133;padding:.125rem .5rem;font-size:.625rem;font-weight:700}.remote-canvas-mode-badge[data-mode=eco]{color:#22c55e;background:#22c55e33}.remote-canvas-reconnecting-overlay{z-index:30;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out;background:#000000b3;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.remote-canvas-reconnecting-content{color:#fff;font-size:var(--font-sm);flex-direction:column;align-items:center;gap:1rem;display:flex}.remote-canvas-reconnecting-spinner{border:3px solid #fff3;border-top-color:#f59e0b;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}.remote-canvas-reconnecting-attempt{font-size:var(--font-xs);color:#ffffff80}@keyframes spin{to{transform:rotate(360deg)}}.remote-canvas-auto-notification{border-radius:var(--radius-lg);background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);color:var(--text-primary);font-size:var(--font-xs);z-index:26;animation:fadeInDown var(--transition-base) ease-out, fadeOut var(--transition-base) ease-in 2.5s forwards;pointer-events:none;padding:.5rem 1rem;font-weight:500;position:absolute;top:3.5rem;left:50%;transform:translate(-50%)}@keyframes fadeOut{to{opacity:0}}@media (width<=480px){.remote-canvas-stats{gap:.75rem;font-size:.625rem}.remote-canvas-fab{width:46px;height:46px;bottom:1rem;right:1rem}}.virtual-keyboard{z-index:30;background:var(--glass-bg);-webkit-backdrop-filter:blur(24px)saturate(1.5);border-top:1px solid var(--glass-border);padding:.5rem;padding-bottom:max(.5rem, env(safe-area-inset-bottom));transition:transform var(--transition-base);overscroll-behavior:contain;max-height:60vh;position:absolute;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(100%);box-shadow:0 -4px 32px #00000040}.virtual-keyboard.open{animation:slideInUp var(--transition-base) ease-out;transform:translateY(0)}.virtual-keyboard.closing{animation:slideOutDown var(--transition-base) ease-in forwards}.vk-shortcut-bar{border-bottom:1px solid var(--glass-border);scrollbar-width:thin;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;gap:.3rem;margin-bottom:.375rem;padding-bottom:.375rem;display:flex;overflow:auto hidden}.vk-shortcut-bar::-webkit-scrollbar{height:3px}.vk-shortcut-bar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.vk-shortcut-divider{background:var(--border);flex-shrink:0;align-self:stretch;width:1px;min-width:1px;margin:0 .15rem}.vk-shortcut{white-space:nowrap;min-width:48px;padding:0 .4rem;font-size:.625rem}.vk-key{border-radius:var(--radius-sm);background:var(--bg-secondary);border:1px solid var(--border);min-width:44px;height:38px;color:var(--text-primary);font-size:var(--font-xs);transition:transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);-webkit-user-select:none;user-select:none;touch-action:manipulation;cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;padding:0 .35rem;font-weight:500;display:flex;position:relative;overflow:hidden}.vk-key:hover{background:var(--bg-hover);border-color:var(--border-light)}.vk-key:active,.vk-key.pressed{background:var(--accent-light);border-color:var(--accent);transform:scale(.92)}.vk-wide{min-width:56px;font-size:var(--font-xs)}.vk-space{flex:1;min-width:100px}.vk-mod{min-width:48px;font-size:.625rem;position:relative}.vk-mod.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 10px var(--accent-light)}.vk-mod.active:hover{background:var(--accent-hover)}.vk-mod.locked{background:var(--accent-hover);border-color:var(--accent);color:#fff;box-shadow:0 0 16px var(--accent-light), inset 0 0 8px #ffffff1a}.vk-mod.locked:hover{background:var(--accent)}.vk-lock-indicator{background:#fff;border-radius:50%;width:5px;height:5px;position:absolute;bottom:3px;right:3px;box-shadow:0 0 4px #fff9}.vk-key .ripple{pointer-events:none;background:#fff3;border-radius:50%;animation:.5s linear ripple;position:absolute;transform:scale(0)}.vk-keyboard-body{flex-direction:column;gap:.25rem;display:flex}.vk-row{justify-content:center;gap:.25rem;display:flex}.vk-bottom-row{align-items:center}.vk-arrows{flex-shrink:0;grid-template-rows:repeat(2,30px);grid-template-columns:repeat(3,34px);grid-template-areas:".up.""left down right";gap:.15rem;margin-left:.25rem;display:grid}.vk-arrows .vk-key{width:100%;min-width:0;height:100%;padding:0;font-size:.75rem}.vk-arrows .vk-key[data-dir=up]{grid-area:up}.vk-arrows .vk-key[data-dir=down]{grid-area:down}.vk-arrows .vk-key[data-dir=left]{grid-area:left}.vk-arrows .vk-key[data-dir=right]{grid-area:right}.vk-fkeys-toggle{font-size:var(--font-xs);color:var(--text-muted);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;align-items:center;gap:.375rem;padding:.15rem 0;display:flex}.vk-fkeys-toggle:hover{color:var(--text-accent)}.vk-fkeys-toggle svg{width:14px;height:14px;transition:transform var(--transition-fast)}.vk-fkeys-toggle.expanded svg{transform:rotate(180deg)}.vk-fkeys{max-height:0;transition:max-height var(--transition-base), opacity var(--transition-base), margin var(--transition-base);opacity:0;flex-wrap:wrap;gap:.25rem;margin-bottom:0;display:flex;overflow:hidden}.vk-fkeys.expanded{opacity:1;max-height:100px;margin-bottom:.375rem}.vk-fkeys .vk-key{min-width:38px;height:32px;font-size:.6rem}@media (width<=480px){.virtual-keyboard{padding:.35rem;padding-bottom:max(.35rem, env(safe-area-inset-bottom))}.vk-key{border-radius:var(--radius-xs);min-width:30px;height:34px;padding:0 .2rem;font-size:.6rem}.vk-wide{min-width:40px}.vk-mod{min-width:38px;font-size:.55rem}.vk-shortcut{min-width:42px;height:32px;font-size:.55rem}.vk-arrows{grid-template-rows:repeat(2,26px);grid-template-columns:repeat(3,28px)}.vk-space{min-width:60px}}@media (width>=481px) and (width<=768px){.vk-key{min-width:36px;height:36px;font-size:.65rem}.vk-wide{min-width:50px}}@media (width>=769px){.vk-key{min-width:44px;height:40px;font-size:var(--font-xs)}.vk-wide{min-width:64px}.vk-space{min-width:180px}.vk-arrows{grid-template-rows:repeat(2,34px);grid-template-columns:repeat(3,40px)}}@media (orientation:landscape) and (height<=500px){.virtual-keyboard{max-height:55vh;padding:.25rem .5rem}.vk-key{height:30px}.vk-shortcut-bar{margin-bottom:.2rem;padding-bottom:.2rem}.vk-row,.vk-keyboard-body{gap:.15rem}.vk-arrows{grid-template-rows:repeat(2,26px)}}.network-mode{z-index:22;animation:fadeIn var(--transition-slow) ease-out .4s both;position:absolute;top:3.5rem;left:1rem}.network-mode-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px)saturate(1.4);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);min-width:200px;padding:.75rem}.network-mode-toggle{background:var(--bg-tertiary);border-radius:var(--radius-pill);margin-bottom:.625rem;padding:3px;display:flex;position:relative}.network-mode-option{border-radius:var(--radius-pill);font-size:var(--font-xs);text-align:center;color:var(--text-secondary);transition:all var(--transition-base);z-index:1;white-space:nowrap;flex:1;padding:.375rem .5rem;font-weight:500;position:relative}.network-mode-option.active{color:#fff}.network-mode-slider{border-radius:var(--radius-pill);background:linear-gradient(135deg, var(--accent), var(--accent-hover));width:calc(33.333% - 2px);height:calc(100% - 6px);transition:transform var(--transition-spring);box-shadow:var(--shadow-sm);position:absolute;top:3px;left:3px}.network-mode-stats{flex-direction:column;gap:.25rem;display:flex}.network-mode-stat{font-size:var(--font-xs);justify-content:space-between;align-items:center;display:flex}.network-mode-stat-label{color:var(--text-muted)}.network-mode-stat-value{font-variant-numeric:tabular-nums;font-weight:500}.network-mode-stat-value.quality-good{color:#22c55e}.network-mode-stat-value.quality-fair{color:#f59e0b}.network-mode-stat-value.quality-poor{color:#ef4444}.network-mode-quality{font-size:var(--font-xs);color:var(--text-muted);border-top:1px solid var(--border);align-items:center;gap:.375rem;margin-top:.5rem;padding-top:.5rem;display:flex}.network-mode-quality-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px;animation:2s ease-in-out infinite pulse}.network-mode-quality-dot.good{background:#22c55e}.network-mode-quality-dot.fair{background:#f59e0b}.network-mode-quality-dot.poor{background:#ef4444}.network-mode-quality-label{flex:1}.network-mode-auto-badge{border-radius:var(--radius-pill);background:var(--accent);color:#fff;letter-spacing:.02em;padding:.125rem .375rem;font-size:.625rem;font-weight:600}@media (width<=480px){.network-mode{top:3rem;left:.5rem}.network-mode-card{min-width:170px;padding:.5rem}.network-mode-option{padding:.3rem .375rem;font-size:.65rem}}.touch-mode{z-index:25;animation:fadeIn var(--transition-slow) ease-out .5s both;position:absolute;bottom:1.5rem;left:1.5rem}.touch-mode-pill{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px)saturate(1.4);border:1px solid var(--glass-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-md);padding:3px;display:flex;position:relative}.touch-mode-option{border-radius:var(--radius-pill);font-size:var(--font-xs);color:var(--text-secondary);transition:all var(--transition-base);z-index:1;white-space:nowrap;padding:.4rem .875rem;font-weight:500;position:relative}.touch-mode-option.active{color:#fff}.touch-mode-option:not(.active):hover{color:var(--text-primary)}.touch-mode-slider{border-radius:var(--radius-pill);background:linear-gradient(135deg, var(--accent), var(--accent-hover));height:calc(100% - 6px);transition:all var(--transition-spring);box-shadow:var(--shadow-sm);position:absolute;top:3px}@media (width<=480px){.touch-mode{bottom:1rem;left:1rem}.touch-mode-option{padding:.3rem .625rem;font-size:.625rem}}.settings-overlay{z-index:100;justify-content:flex-end;display:flex;position:fixed;inset:0}.settings-backdrop{-webkit-backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out;background:#0006;position:absolute;inset:0}.settings-backdrop.closing{opacity:0;transition:opacity var(--transition-base);animation:none}.settings-panel{background:var(--bg-secondary);border-left:1px solid var(--border);width:100%;max-width:420px;height:100%;animation:slideInRight var(--transition-base) ease-out;z-index:1;position:relative;overflow:hidden auto}.settings-panel.closing{animation:slideOutRight var(--transition-base) ease-in forwards}.settings-header{padding:1.25rem 1.5rem;padding-top:calc(1.25rem + var(--safe-area-top,0px));border-bottom:1px solid var(--border);background:var(--bg-secondary);z-index:2;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.settings-header h2{font-size:var(--font-lg);font-weight:700}.settings-close{border-radius:var(--radius-sm);width:36px;height:36px;color:var(--text-secondary);transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.settings-close:hover{background:var(--bg-hover);color:var(--text-primary)}.settings-close:active{transform:scale(.9)}.settings-close svg{width:20px;height:20px}.settings-content{padding:1.5rem;padding-bottom:calc(1.5rem + var(--safe-area-bottom,0px));flex-direction:column;gap:2rem;display:flex}.settings-section{flex-direction:column;gap:1rem;display:flex}.settings-section-title{font-size:var(--font-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.settings-theme-toggle{background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border);justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.settings-theme-label{font-size:var(--font-base);align-items:center;gap:.625rem;font-weight:500;display:flex}.settings-theme-icon{width:20px;height:20px;color:var(--text-accent);justify-content:center;align-items:center;display:flex}.settings-theme-icon svg{width:20px;height:20px;transition:transform var(--transition-spring)}.settings-switch{border-radius:var(--radius-pill);background:var(--border);cursor:pointer;width:48px;height:26px;transition:background var(--transition-base);padding:2px;position:relative}.settings-switch.active{background:var(--accent)}.settings-switch-thumb{width:22px;height:22px;transition:transform var(--transition-spring);box-shadow:var(--shadow-sm);background:#fff;border-radius:50%}.settings-switch.active .settings-switch-thumb{transform:translate(22px)}.settings-accent-row{flex-wrap:wrap;gap:.75rem;padding:.5rem 0;display:flex}.settings-accent-option{cursor:pointer;width:36px;height:36px;transition:all var(--transition-base);border:3px solid #0000;border-radius:50%;position:relative}.settings-accent-option:hover{transform:scale(1.12)}.settings-accent-option:active{transform:scale(.95)}.settings-accent-option.active{border-color:var(--text-primary);box-shadow:0 0 0 2px var(--bg-secondary), 0 0 12px var(--accent-light)}.settings-accent-option .accent-inner{border-radius:50%;width:100%;height:100%}.settings-accent-option[data-accent=blue] .accent-inner{background:#3f67cf}.settings-accent-option[data-accent=purple] .accent-inner{background:#8b5cf6}.settings-accent-option[data-accent=green] .accent-inner{background:#44a393}.settings-accent-option[data-accent=orange] .accent-inner{background:#f97316}.settings-accent-option[data-accent=pink] .accent-inner{background:#d63384}.settings-accent-option[data-accent=blue-red] .accent-inner{background:linear-gradient(135deg,#1116ca 50%,#a20202 50%)}.settings-accent-option[data-accent=red-teal] .accent-inner{background:linear-gradient(135deg,#b00000 50%,#286272 50%)}.settings-select-wrapper{position:relative}.settings-select{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text-primary);font-size:var(--font-base);appearance:none;cursor:pointer;transition:all var(--transition-base);padding:.75rem 2.5rem .75rem 1rem}.settings-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.settings-select:hover:not(:focus){border-color:var(--border-light)}.settings-select-arrow{width:16px;height:16px;color:var(--text-muted);pointer-events:none;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.settings-input{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text-primary);font-size:var(--font-base);transition:all var(--transition-base);padding:.75rem 1rem}.settings-input::placeholder{color:var(--text-muted)}.settings-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.settings-input:hover:not(:focus){border-color:var(--border-light)}.settings-input-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:.375rem;display:block}.settings-field{flex-direction:column;display:flex}.settings-field+.settings-field{margin-top:.75rem}.settings-about-list{flex-direction:column;gap:.5rem;display:flex}.settings-about-item{border-bottom:1px solid var(--border);font-size:var(--font-sm);justify-content:space-between;align-items:center;padding:.625rem 0;display:flex}.settings-about-item:last-child{border-bottom:none}.settings-about-label{color:var(--text-secondary)}.settings-about-value{color:var(--text-primary);font-weight:500}.settings-about-value a{color:var(--text-accent)}@media (width<=480px){.settings-panel{max-width:100%}.settings-content{padding:1rem;padding-bottom:calc(1rem + var(--safe-area-bottom,0px))}.settings-header{padding:1rem;padding-top:calc(1rem + var(--safe-area-top,0px))}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#1a1a2e;--bg-secondary:#1e1e32;--bg-tertiary:#252540;--bg-hover:#2e2e4a;--bg-active:#094771;--text-primary:#d4d4d4;--text-secondary:#9c9c9c;--text-muted:#6a6a6a;--border:#3c3c3c;--border-light:#505050;--accent:#3f67cf;--accent-hover:#3659b8;--accent-light:#3f67cf4d;--text-accent:#6b9cf5;--accent-blue:#3f67cf;--accent-green:#22c55e;--accent-red:#ef4444;--accent-yellow:#f59e0b;--glass-bg:#1e1e32b8;--glass-border:#ffffff0f;--shadow-sm:0 2px 8px #00000040;--shadow-md:0 4px 24px #00000059;--shadow-lg:0 8px 48px #00000080;--shadow-glow:0 0 32px var(--accent-light);--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.3s cubic-bezier(.4, 0, .2, 1);--transition-slow:.5s cubic-bezier(.4, 0, .2, 1);--transition-spring:.5s cubic-bezier(.34, 1.56, .64, 1);--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-xs:.6875rem;--font-sm:.8125rem;--font-base:.9375rem;--font-md:1.0625rem;--font-lg:1.25rem;--font-xl:1.5rem;--font-2xl:2rem;--font-3xl:2.75rem;--safe-area-top:env(safe-area-inset-top,0px);--safe-area-right:env(safe-area-inset-right,0px);--safe-area-bottom:env(safe-area-inset-bottom,0px);--safe-area-left:env(safe-area-inset-left,0px)}[data-theme=light]{--bg-primary:#f6f7f9;--bg-secondary:#fff;--bg-tertiary:#eef1f5;--bg-hover:#e4e9f0;--bg-active:#dceeff;--text-primary:#1f2933;--text-secondary:#52616f;--text-muted:#8793a0;--border:#d7dde5;--border-light:#c4ccd7;--glass-bg:#ffffffb8;--glass-border:#0000000f;--shadow-sm:0 2px 8px #00000014;--shadow-md:0 4px 24px #0000001a;--shadow-lg:0 8px 48px #00000026;--text-accent:#3659b8;--accent-light:#3f67cf29}[data-accent=pink]{--accent:#d63384;--accent-hover:#c22578;--accent-light:#d6338438;--text-accent:#ff78b8}[data-theme=light][data-accent=pink]{--text-accent:#c22578;--accent-light:#d6338429}[data-accent=green]{--accent:#44a393;--accent-hover:#3a8f80;--accent-light:#44a39340;--text-accent:#5dd4bf}[data-theme=light][data-accent=green]{--text-accent:#3a8f80;--accent-light:#44a39329}[data-accent=purple]{--accent:#8b5cf6;--accent-hover:#7c3aed;--accent-light:#8b5cf640;--text-accent:#a78bfa}[data-theme=light][data-accent=purple]{--text-accent:#7c3aed;--accent-light:#8b5cf629}[data-accent=orange]{--accent:#f97316;--accent-hover:#ea580c;--accent-light:#f9731640;--text-accent:#fb923c}[data-theme=light][data-accent=orange]{--text-accent:#ea580c;--accent-light:#f9731629}[data-accent=blue-red]{--accent:#1116ca;--accent-hover:#0e12b0;--accent-light:#1116ca4d;--text-accent:#a20202}[data-theme=light][data-accent=blue-red]{--text-accent:#a20202;--accent-light:#1116ca29}[data-accent=red-teal]{--accent:#b00000;--accent-hover:#9a0000;--accent-light:#b0000040;--text-accent:#286272}[data-theme=light][data-accent=red-teal]{--text-accent:#286272;--accent-light:#b0000029}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100vw;height:100dvh;transition:background var(--transition-base), color var(--transition-base);overscroll-behavior:none;-webkit-overflow-scrolling:touch;padding:var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);line-height:1.5;overflow:hidden}#root{width:100%;height:100%}@supports (-webkit-touch-callout:none){body{overscroll-behavior-y:none;-webkit-overflow-scrolling:touch}}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px)saturate(1.4);border:1px solid var(--glass-border)}.glass-heavy{background:var(--glass-bg);-webkit-backdrop-filter:blur(40px)saturate(1.6);border:1px solid var(--glass-border)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-pill)}::-webkit-scrollbar-thumb:hover{background:var(--border-light)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{background:var(--accent-light);color:var(--text-primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes slideInUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}@keyframes glow{0%,to{filter:drop-shadow(0 0 8px var(--accent-light))}50%{filter:drop-shadow(0 0 24px var(--accent-light))}}@keyframes ripple{to{opacity:0;transform:scale(4)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes cursorBlink{0%,50%{opacity:1}51%,to{opacity:0}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}button{cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none;outline:none}input,select{font-family:inherit;font-size:inherit;color:inherit;outline:none}a{color:var(--text-accent);text-decoration:none}a:hover{text-decoration:underline}