@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Outfit:wght@300;400;500;600;700&display=swap";:root{--color-bg-dark: #0f0f23;--color-bg-mid: #1a1a2e;--color-bg-light: #16213e;--color-primary: #00d9ff;--color-primary-glow: rgba(0, 217, 255, .3);--color-secondary: #ff6b35;--color-accent: #ffd23f;--color-success: #4ade80;--color-danger: #f87171;--color-text: #e8e8e8;--color-text-muted: #9ca3af;--color-border: #2d2d4a;--font-display: "Press Start 2P", monospace;--font-body: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--shadow-glow: 0 0 20px var(--color-primary-glow);--shadow-card: 0 4px 24px rgba(0, 0, 0, .4);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:var(--font-body);background:var(--color-bg-dark);color:var(--color-text);line-height:1.5;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#app{height:100%;display:flex;flex-direction:column}input,textarea{-webkit-user-select:text;user-select:text}.text-display{font-family:var(--font-display);letter-spacing:.05em}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.text-accent{color:var(--color-accent)}.text-success{color:var(--color-success)}.text-danger{color:var(--color-danger)}.text-muted{color:var(--color-text-muted)}.glow{text-shadow:0 0 10px var(--color-primary-glow),0 0 20px var(--color-primary-glow)}.btn{font-family:var(--font-body);font-weight:600;padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);min-height:44px;min-width:44px;touch-action:manipulation}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg,var(--color-primary),#0099cc);color:var(--color-bg-dark);box-shadow:var(--shadow-glow)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 30px var(--color-primary-glow)}.btn-primary:active:not(:disabled){transform:translateY(0) scale(.98)}.btn-secondary{background:transparent;color:var(--color-primary);border:2px solid var(--color-primary)}.btn-secondary:hover:not(:disabled){background:var(--color-primary);color:var(--color-bg-dark)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background:#ef4444}.panel{background:var(--color-bg-mid);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-card);transition:border-color var(--transition-fast)}.panel:hover{border-color:#00d9ff33}.panel-header{font-family:var(--font-display);font-size:.7rem;color:var(--color-primary);margin-bottom:var(--spacing-md);text-transform:uppercase;letter-spacing:.1em}.form-group{margin-bottom:var(--spacing-md)}.form-label{display:block;font-size:.85rem;color:var(--color-text-muted);margin-bottom:var(--spacing-xs)}.form-input,.form-select{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-light);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-family:var(--font-body);font-size:16px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.form-input:focus,.form-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-glow)}.form-range{-webkit-appearance:none;width:100%;height:6px;background:var(--color-bg-light);border-radius:3px;cursor:pointer;touch-action:none}.form-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--color-primary);border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--color-primary-glow);transition:transform var(--transition-fast)}.form-range::-webkit-slider-thumb:hover{transform:scale(1.15)}.form-range::-webkit-slider-thumb:active{transform:scale(1.25)}.form-range::-moz-range-thumb{width:20px;height:20px;background:var(--color-primary);border-radius:50%;border:none;cursor:pointer;box-shadow:0 0 10px var(--color-primary-glow)}input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-dark)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes glow-pulse{0%,to{box-shadow:0 0 10px var(--color-primary-glow)}50%{box-shadow:0 0 30px var(--color-primary-glow)}}.animate-pulse{animation:pulse 2s infinite}.animate-fade-in{animation:fadeIn .3s ease-out}.animate-slide-up{animation:slideUp .4s ease-out}.animate-scale-in{animation:scaleIn .25s ease-out}.skeleton{background:linear-gradient(90deg,var(--color-bg-light) 25%,var(--color-bg-mid) 50%,var(--color-bg-light) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}.toggle-label{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;padding:var(--spacing-xs);-webkit-tap-highlight-color:transparent}@media(max-width:768px){:root{--spacing-lg: 1rem;--spacing-xl: 1.25rem}.panel{border-radius:var(--radius-md);padding:var(--spacing-md)}.panel-header{font-size:.65rem}.btn{padding:var(--spacing-sm) var(--spacing-md);font-size:.9rem}}@media(max-width:480px){:root{--spacing-lg: .75rem;--spacing-xl: 1rem}.panel{padding:var(--spacing-sm)}}@media(max-height:500px)and (orientation:landscape){.app-header{padding:var(--spacing-xs) var(--spacing-md)!important}.app-footer{display:none!important}}@media(prefers-contrast:high){:root{--color-border: #4d4d6a;--color-text-muted: #b0b0b0}.btn{border:2px solid currentColor}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@supports (padding: max(0px)){.app-container{padding-left:max(var(--spacing-md),env(safe-area-inset-left));padding-right:max(var(--spacing-md),env(safe-area-inset-right));padding-bottom:max(var(--spacing-sm),env(safe-area-inset-bottom))}}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}button:focus:not(:focus-visible),input:focus:not(:focus-visible){outline:none}.keyboard-nav button:focus,.keyboard-nav input:focus,.keyboard-nav a:focus{outline:2px solid var(--color-primary);outline-offset:2px}
