:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: #1a1a24;--bg-hover: #24243a;--text-primary: #ffffff;--text-secondary: #a0a0b0;--text-muted: #606070;--accent-primary: #6366f1;--accent-secondary: #8b5cf6;--accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);--accent-glow: rgba(99, 102, 241, .3);--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--text-5xl: 3.5rem;--text-timer: clamp(4rem, 15vw, 8rem);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .5);--shadow-glow: 0 0 40px var(--accent-glow);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--safe-area-bottom: env(safe-area-inset-bottom, 0px)}[data-theme=light]{--bg-primary: #f8f9fc;--bg-secondary: #ffffff;--bg-card: #ffffff;--bg-hover: #f0f1f5;--text-primary: #1a1a2e;--text-secondary: #4a4a5a;--text-muted: #8a8a9a;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .07);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .1)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;min-height:100dvh;overflow-x:hidden}#root{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;position:relative;background:var(--bg-primary);color:var(--text-primary)}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background:var(--bg-secondary);border-bottom:1px solid rgba(255,255,255,.05);position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.logo{font-size:var(--text-xl);font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;display:flex;align-items:center;gap:var(--space-sm)}.logo-icon{font-size:var(--text-2xl)}.nav-buttons{display:flex;gap:var(--space-sm)}.nav-menu{display:none;position:relative}.menu-btn{width:40px;height:40px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.08);background:var(--bg-card);cursor:pointer;display:grid;place-items:center;transition:all var(--transition-fast)}.menu-btn:hover{background:var(--bg-hover)}.menu-icon,.menu-icon:before,.menu-icon:after{display:block;width:18px;height:2px;background:var(--text-primary);border-radius:999px;content:"";transition:all var(--transition-fast)}.menu-icon{position:relative}.menu-icon:before{position:absolute;left:0;top:-6px}.menu-icon:after{position:absolute;left:0;top:6px}.menu-panel{position:absolute;right:0;top:calc(100% + var(--space-sm));background:var(--bg-secondary);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:var(--space-xs);min-width:160px;box-shadow:var(--shadow-lg);z-index:200}.menu-item{display:block;width:100%;text-align:left;padding:var(--space-sm) var(--space-md);border:none;background:transparent;color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-size:var(--text-sm)}.menu-item:hover{background:var(--bg-hover);color:var(--text-primary)}.menu-item.active{background:var(--accent-gradient);color:#fff}.nav-btn{background:transparent;border:none;color:var(--text-secondary);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-size:var(--text-sm)}.nav-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-btn.active{background:var(--accent-gradient);color:#fff}.timer-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-lg);gap:var(--space-lg);user-select:none;-webkit-user-select:none;touch-action:manipulation}.inspection-display{font-family:var(--font-mono);font-size:var(--text-4xl);font-weight:600;color:var(--warning);text-shadow:0 0 20px rgba(245,158,11,.4);opacity:0;transform:scale(.9);transition:all var(--transition-base)}.inspection-display.visible{opacity:1;transform:scale(1)}.inspection-display.danger{color:var(--danger);text-shadow:0 0 20px rgba(239,68,68,.5);animation:pulse .5s ease infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.timer-display{font-family:var(--font-mono);font-size:var(--text-timer);font-weight:700;letter-spacing:-.02em;transition:all var(--transition-base);position:relative}.timer-display.idle{color:var(--text-secondary)}.timer-display.inspection{color:var(--warning)}.timer-display.running{color:var(--success);text-shadow:0 0 40px rgba(16,185,129,.4)}.timer-display.stopped{background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.scramble-container{max-width:600px;text-align:center}.scramble-container.hidden{visibility:hidden;pointer-events:none}.scramble-text{font-family:var(--font-mono);font-size:var(--text-lg);color:var(--text-secondary);line-height:1.6;word-spacing:.2em;padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);border:1px solid rgba(255,255,255,.05)}.scramble-text:hover{background:var(--bg-hover);border-color:#ffffff1a}.scramble-hint{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-xs)}.penalty-buttons{display:flex;gap:var(--space-md);opacity:0;transform:translateY(10px);transition:all var(--transition-base);pointer-events:none}.penalty-buttons.visible{opacity:1;transform:translateY(0);pointer-events:auto}.penalty-btn{padding:var(--space-sm) var(--space-lg);border:2px solid;border-radius:var(--radius-full);background:transparent;font-weight:600;font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast)}.penalty-btn.plus2{border-color:var(--warning);color:var(--warning)}.penalty-btn.plus2:hover,.penalty-btn.plus2.active{background:var(--warning);color:var(--bg-primary)}.penalty-btn.dnf{border-color:var(--danger);color:var(--danger)}.penalty-btn.dnf:hover,.penalty-btn.dnf.active{background:var(--danger);color:#fff}.penalty-btn.ok{border-color:var(--success);color:var(--success)}.penalty-btn.ok:hover,.penalty-btn.ok.active{background:var(--success);color:#fff}.stats-panel{display:flex;gap:var(--space-xl);flex-wrap:wrap;justify-content:center;padding:var(--space-md)}.stat-item{text-align:center}.stat-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-xs)}.stat-value{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:600;color:var(--text-primary)}.stat-value.best{color:var(--success)}.control-area{padding:var(--space-lg);padding-bottom:calc(var(--space-lg) + var(--safe-area-bottom) + 100px)}.control-area--inline{padding:0}.control-btn{width:100%;max-width:320px;margin:0 auto;display:block;padding:var(--space-lg) var(--space-2xl);font-size:var(--text-xl);font-weight:700;text-transform:uppercase;letter-spacing:.1em;border:none;border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden}.control-btn:before{content:"";position:absolute;inset:0;background:var(--accent-gradient);opacity:1;transition:opacity var(--transition-fast)}.control-btn:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#8b5cf6,#a855f7,#c084fc);opacity:0;transition:opacity var(--transition-fast)}.control-btn:hover:after{opacity:1}.control-btn span{position:relative;z-index:1;color:#fff}.control-btn:active{transform:scale(.98)}.control-btn.stop{box-shadow:0 0 30px #ef444466}.control-btn.stop:before{background:linear-gradient(135deg,#ef4444,#dc2626)}.control-btn.stop:after{background:linear-gradient(135deg,#dc2626,#b91c1c)}.ad-container{position:fixed;bottom:0;left:0;right:0;padding:var(--space-sm);padding-bottom:calc(var(--space-sm) + var(--safe-area-bottom));background:var(--bg-secondary);border-top:1px solid rgba(255,255,255,.05);text-align:center;z-index:50}.ad-link{display:block;text-decoration:none;color:inherit}.ad-content{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);background:linear-gradient(135deg,#6366f126,#8b5cf626);border:1px solid rgba(99,102,241,.3);border-radius:var(--radius-lg);transition:all var(--transition-fast)}.ad-content:hover{background:linear-gradient(135deg,#6366f140,#8b5cf640);border-color:#6366f180;transform:translateY(-2px)}.ad-icon{font-size:var(--text-xl)}.ad-text{font-size:var(--text-sm);font-weight:500;color:var(--text-primary)}.ad-placeholder{background:var(--bg-card);border-radius:var(--radius-md);padding:var(--space-md);color:var(--text-muted);font-size:var(--text-sm)}.history-container{flex:1;padding:var(--space-lg);max-width:800px;margin:0 auto;width:100%}.history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}.history-title{font-size:var(--text-2xl);font-weight:700}.history-actions{display:flex;gap:var(--space-sm)}.action-btn{padding:var(--space-sm) var(--space-md);background:var(--bg-card);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast)}.action-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.history-ad-container{margin-bottom:var(--space-md)}.history-ad-placeholder{padding:var(--space-lg);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.05);text-align:center;color:var(--text-muted);font-size:var(--text-sm)}[data-theme=light] .history-ad-placeholder{border-color:#00000014}.solve-list{display:flex;flex-direction:column;gap:var(--space-sm)}.solve-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.05);transition:all var(--transition-fast)}.solve-item:hover{background:var(--bg-hover);border-color:#ffffff1a}.solve-number{font-size:var(--text-sm);color:var(--text-muted);width:3rem}.solve-time{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:600}.solve-time.dnf{color:var(--danger)}.solve-time.plus2{color:var(--warning)}.solve-scramble{flex:1;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);margin-left:var(--space-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.solve-actions{display:flex;gap:var(--space-xs)}.solve-action-btn{padding:var(--space-xs) var(--space-sm);background:transparent;border:none;color:var(--text-muted);font-size:var(--text-xs);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.solve-action-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.solve-action-btn.delete:hover{color:var(--danger)}.show-more-btn{width:100%;margin-top:var(--space-md);padding:var(--space-md);background:var(--bg-card);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast)}.show-more-btn:hover{background:var(--bg-hover);color:var(--text-primary)}[data-theme=light] .show-more-btn{border-color:#00000014}.settings-container{flex:1;padding:var(--space-lg);max-width:600px;margin:0 auto;width:100%}.settings-title{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-xl)}.settings-section{margin-bottom:var(--space-xl)}.settings-section-title{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-md);color:var(--text-secondary)}.setting-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:var(--bg-card);border-radius:var(--radius-lg);margin-bottom:var(--space-sm)}.setting-label{font-size:var(--text-base)}.setting-description{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--space-xs)}.toggle{position:relative;width:52px;height:28px;background:var(--bg-hover);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast)}.toggle.active{background:var(--accent-primary)}.toggle-knob{position:absolute;top:2px;left:2px;width:24px;height:24px;background:#fff;border-radius:50%;transition:transform var(--transition-fast);box-shadow:var(--shadow-sm)}.toggle.active .toggle-knob{transform:translate(24px)}.empty-state{text-align:center;padding:var(--space-2xl);color:var(--text-muted)}.empty-icon{font-size:4rem;margin-bottom:var(--space-md);opacity:.5}.loading{display:flex;align-items:center;justify-content:center;min-height:200px}.spinner{width:40px;height:40px;border:3px solid var(--bg-hover);border-top-color:var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:640px){.header{padding:var(--space-xs) var(--space-md)}.logo{font-size:var(--text-lg)}.timer-container{padding:var(--space-sm);padding-top:var(--space-xs);justify-content:flex-start;padding-bottom:calc(var(--space-lg) + var(--safe-area-bottom) + 100px)}.nav-buttons{display:none}.nav-menu{display:block}.scramble-text{font-size:var(--text-base)}.stats-panel{gap:var(--space-md)}.stat-value{font-size:var(--text-lg)}.solve-scramble{display:none}}.page-container{flex:1;padding:var(--space-lg);max-width:800px;margin:0 auto;width:100%;padding-bottom:calc(var(--space-2xl) + 80px)}.page-title{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-xl);background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.page-section{margin-bottom:var(--space-xl);padding:var(--space-lg);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.05)}[data-theme=light] .page-section{border-color:#00000014}.page-section h2{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-md);color:var(--accent-primary)}.page-section h3{font-size:var(--text-base);font-weight:600;margin-top:var(--space-md);margin-bottom:var(--space-sm);color:var(--text-primary)}.page-section p{color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-sm)}.page-section ul{color:var(--text-secondary);line-height:1.7;padding-left:var(--space-lg)}.page-section li{margin-bottom:var(--space-xs)}.page-section code{font-family:var(--font-mono);background:var(--bg-hover);padding:.1em .4em;border-radius:var(--radius-sm);font-size:.9em}.page-section a{color:var(--accent-primary);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--transition-fast)}.page-section a:hover{border-bottom-color:var(--accent-primary)}.footer{padding:var(--space-lg);padding-bottom:calc(var(--space-lg) + var(--safe-area-bottom));background:var(--bg-secondary);border-top:1px solid rgba(255,255,255,.05);text-align:center}[data-theme=light] .footer{border-top-color:#00000014}.footer-links{display:flex;justify-content:center;gap:var(--space-md);flex-wrap:wrap;margin-bottom:var(--space-md)}.footer-link{background:none;border:none;color:var(--text-muted);font-size:var(--text-sm);cursor:pointer;padding:var(--space-xs) var(--space-sm);transition:color var(--transition-fast)}.footer-link:hover{color:var(--accent-primary)}.footer-copyright{font-size:var(--text-xs);color:var(--text-muted)}[data-theme=light] .header{border-bottom-color:#00000014}[data-theme=light] .scramble-text{border-color:#00000014}[data-theme=light] .scramble-text:hover{border-color:#00000026}[data-theme=light] .solve-item{border-color:#00000014}[data-theme=light] .solve-item:hover{border-color:#00000026}[data-theme=light] .menu-btn,[data-theme=light] .menu-panel{border-color:#00000014}[data-theme=light] .action-btn{border-color:#0000001a}[data-theme=light] .ad-container{border-top-color:#00000014}