@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Serif+TC:wght@400;500;600;700&display=swap";:root{--font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;--font-chinese: "Noto Serif TC", "Songti SC", serif;--font-mono: "SF Mono", "Fira Code", monospace;--bg-primary: #0c0a08;--bg-secondary: #141210;--bg-tertiary: #1c1916;--bg-card: #1a1714;--surface: #1e1b17;--surface-elevated: #262220;--text-primary: #f5f0e8;--text-secondary: #a69e90;--text-tertiary: #6b6358;--text-muted: #4a4439;--accent: #d4a853;--accent-vibrant: #e8c06a;--accent-soft: rgba(212, 168, 83, .1);--accent-medium: rgba(212, 168, 83, .2);--accent-glow: rgba(212, 168, 83, .35);--accent-text: #d4a853;--energy: #c45c3c;--energy-soft: rgba(196, 92, 60, .12);--jade: #5a9e7a;--jade-soft: rgba(90, 158, 122, .12);--success: #5a9e7a;--success-soft: rgba(90, 158, 122, .15);--warning: #d4a853;--error: #c45c3c;--border-light: rgba(212, 168, 83, .06);--border-default: rgba(212, 168, 83, .1);--border-strong: rgba(212, 168, 83, .18);--border-subtle: rgba(255, 255, 255, .04);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-md: 0 4px 20px rgba(0, 0, 0, .5);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .6);--shadow-xl: 0 16px 60px rgba(0, 0, 0, .7);--shadow-gold: 0 4px 30px rgba(212, 168, 83, .15);--shadow-gold-lg: 0 8px 50px rgba(212, 168, 83, .25);--glass-bg: rgba(20, 18, 16, .8);--glass-bg-heavy: rgba(20, 18, 16, .95);--glass-border: rgba(212, 168, 83, .08);--gradient-hero: radial-gradient(ellipse at 50% 0%, rgba(212, 168, 83, .08) 0%, transparent 60%), linear-gradient(180deg, #0c0a08 0%, #100e0b 100%);--gradient-gold: linear-gradient(135deg, #d4a853 0%, #e8c06a 50%, #c49940 100%);--gradient-card: linear-gradient(180deg, rgba(212, 168, 83, .04) 0%, transparent 100%);--gradient-warm: linear-gradient(135deg, #c45c3c 0%, #d4a853 100%);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 28px;--radius-full: 9999px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--transition-fast: .15s var(--ease-out);--transition-base: .25s var(--ease-out);--transition-slow: .4s var(--ease-out)}[data-theme=light]{--bg-primary: #f7f3ed;--bg-secondary: #efe9e0;--bg-tertiary: #e8dfd4;--bg-card: #ffffff;--surface: #f0ebe3;--surface-elevated: #ffffff;--text-primary: #1a1510;--text-secondary: #5c4f3d;--text-tertiary: #8c7b67;--text-muted: #b5a898;--accent: #b8892e;--accent-vibrant: #d4a853;--accent-soft: rgba(184, 137, 46, .1);--accent-medium: rgba(184, 137, 46, .18);--accent-glow: rgba(184, 137, 46, .3);--accent-text: #966e1c;--energy: #b84a2a;--energy-soft: rgba(184, 74, 42, .1);--jade: #3d8a60;--jade-soft: rgba(61, 138, 96, .12);--border-light: rgba(184, 137, 46, .1);--border-default: rgba(184, 137, 46, .18);--border-strong: rgba(184, 137, 46, .3);--border-subtle: rgba(0, 0, 0, .06);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 20px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .12);--shadow-xl: 0 16px 60px rgba(0, 0, 0, .15);--shadow-gold: 0 4px 30px rgba(184, 137, 46, .18);--shadow-gold-lg: 0 8px 50px rgba(184, 137, 46, .28);--glass-bg: rgba(247, 243, 237, .85);--glass-bg-heavy: rgba(247, 243, 237, .97);--glass-border: rgba(184, 137, 46, .12);--gradient-hero: radial-gradient(ellipse at 50% 0%, rgba(184, 137, 46, .1) 0%, transparent 60%), linear-gradient(180deg, #f7f3ed 0%, #efe9e0 100%);--gradient-gold: linear-gradient(135deg, #b8892e 0%, #d4a853 50%, #a07824 100%);--gradient-card: linear-gradient(180deg, rgba(184, 137, 46, .04) 0%, transparent 100%);--gradient-warm: linear-gradient(135deg, #b84a2a 0%, #b8892e 100%)}body,.app-container,.card,.card-glow,.program-card,.stat-card,.bottom-nav,.player-header,.player-dock,.sidebar-panel,.login-screen,.paywall,.dashboard-header{transition:background-color .3s ease,border-color .3s ease,color .3s ease}.theme-toggle{width:36px;height:36px;border-radius:var(--radius-full);border:1.5px solid var(--border-default);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent}.theme-toggle:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-system);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;overflow-x:hidden;min-height:100vh;min-height:100dvh}#root{min-height:100vh;min-height:100dvh}.app-container{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg-primary)}.text-display{font-size:clamp(2.5rem,7vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1.05}.text-headline{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;line-height:1.15}.text-title{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}.text-body{font-size:1rem;font-weight:400;line-height:1.6;color:var(--text-secondary)}.text-caption{font-size:.8125rem;font-weight:500;color:var(--text-secondary)}.text-overline{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}.chinese-text{font-family:var(--font-chinese);font-weight:500;letter-spacing:.05em}.text-gradient-gold{background:var(--gradient-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:var(--space-5);transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast)}.card:hover{border-color:var(--border-default);box-shadow:var(--shadow-md)}.card-glow{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-gold);position:relative;overflow:hidden}.card-glow:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--gradient-gold);opacity:.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-family:var(--font-system);font-size:.9375rem;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.3;cursor:not-allowed;transform:none}.btn-primary{background:var(--gradient-gold);color:#0c0a08;font-weight:700;box-shadow:var(--shadow-gold)}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-gold-lg);transform:translateY(-1px)}.btn-secondary{background:var(--surface-elevated);color:var(--text-primary);border:1px solid var(--border-default)}.btn-secondary:hover:not(:disabled){border-color:var(--border-strong);background:var(--bg-tertiary)}.btn-ghost{background:transparent;color:var(--text-secondary);padding:var(--space-2)}.btn-ghost:hover:not(:disabled){color:var(--text-primary);background:var(--accent-soft)}.btn-icon{width:44px;height:44px;padding:0;border-radius:var(--radius-full)}.btn-icon-lg{width:56px;height:56px}.btn-icon-xl{width:72px;height:72px}.btn-pill{border-radius:var(--radius-full);padding:var(--space-3) var(--space-6)}.input{width:100%;padding:var(--space-4) var(--space-5);font-family:var(--font-system);font-size:1rem;color:var(--text-primary);background:var(--surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.stat-ring{width:80px;height:80px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}.stat-ring svg{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg)}.stat-ring-value{font-size:1.5rem;font-weight:800;color:var(--accent);line-height:1;z-index:1}.stat-ring-label{font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-tertiary);z-index:1}.program-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:var(--space-5);cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.program-card:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.program-card-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:var(--space-4)}.program-card-badge{position:absolute;top:var(--space-3);right:var(--space-3);font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border-radius:var(--radius-full)}.badge-free{background:var(--jade-soft);color:var(--jade)}.badge-premium{background:var(--accent-medium);color:var(--accent)}.badge-locked{background:#ffffff0d;color:var(--text-muted)}.player-screen{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--bg-primary);position:relative}.player-header{position:fixed;top:0;left:0;right:0;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-5);background:var(--glass-bg-heavy);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border-bottom:1px solid var(--border-subtle);z-index:100}.player-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px var(--space-6) 160px;position:relative}.player-content:before{content:"";position:absolute;top:-50px;left:50%;transform:translate(-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(212,168,83,.15) 0%,transparent 65%);filter:blur(80px);pointer-events:none}.timer-circle{width:200px;height:200px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;margin:var(--space-8) 0}.timer-circle svg{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg)}.timer-circle-value{font-size:3rem;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;z-index:1;letter-spacing:-.02em}.timer-circle-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-tertiary);z-index:1}.player-dock{position:fixed;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6) var(--space-8);background:linear-gradient(180deg,transparent 0%,var(--bg-primary) 30%);z-index:100}.dock-controls{display:flex;align-items:center;gap:var(--space-5)}.progress-segmented{display:flex;gap:3px;height:3px;width:100%;max-width:320px}.progress-segment{flex:1;border-radius:2px;background:var(--border-default);transition:background-color .4s var(--ease-out)}.progress-segment.completed{background:var(--accent)}.progress-segment.active{background:var(--accent);animation:segmentPulse 2s ease-in-out infinite}.paywall{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:var(--space-8) var(--space-6);text-align:center;background:var(--gradient-hero);position:relative;overflow:hidden}.paywall:before{content:"";position:absolute;top:-100px;left:50%;transform:translate(-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(212,168,83,.12) 0%,transparent 60%);pointer-events:none}.pricing-card{background:var(--surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);padding:var(--space-8) var(--space-6);width:100%;max-width:380px;position:relative;overflow:hidden}.pricing-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-gold)}.pricing-card.featured{border-color:var(--accent);box-shadow:var(--shadow-gold-lg)}.price-tag{display:flex;align-items:baseline;justify-content:center;gap:4px;margin:var(--space-4) 0}.price-amount{font-size:3rem;font-weight:800;letter-spacing:-.03em;color:var(--text-primary)}.price-period{font-size:.875rem;color:var(--text-tertiary);font-weight:500}.feature-list{list-style:none;text-align:left;display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-6) 0}.feature-list li{display:flex;align-items:center;gap:var(--space-3);font-size:.9375rem;color:var(--text-secondary)}.feature-list li svg{color:var(--accent);flex-shrink:0}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:space-around;background:var(--glass-bg-heavy);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border-top:1px solid var(--border-subtle);z-index:200;padding-bottom:env(safe-area-inset-bottom,0)}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-2) var(--space-4);background:none;border:none;cursor:pointer;color:var(--text-muted);font-family:var(--font-system);transition:color var(--transition-fast);-webkit-tap-highlight-color:transparent}.nav-item.active{color:var(--accent)}.nav-item:hover{color:var(--text-secondary)}.nav-item-label{font-size:.625rem;font-weight:600;letter-spacing:.02em}.dashboard{padding:var(--space-6) var(--space-5) calc(72px + var(--space-6));max-width:600px;margin:0 auto;width:100%}.dashboard-header{padding:var(--space-10) 0 var(--space-6)}.greeting{font-size:.875rem;color:var(--text-tertiary);font-weight:500;margin-bottom:var(--space-1)}.greeting-name{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;color:var(--text-primary)}.stats-row{display:flex;gap:var(--space-3);margin:var(--space-6) 0}.stat-card{flex:1;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--space-4);text-align:center}.stat-value{font-size:1.5rem;font-weight:800;color:var(--text-primary);line-height:1;margin-bottom:2px}.stat-label{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);margin-top:var(--space-8)}.section-title{font-size:1.125rem;font-weight:700;letter-spacing:-.02em}.section-link{font-size:.8125rem;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;font-family:var(--font-system)}.streak-week{display:flex;gap:var(--space-2);justify-content:center;margin:var(--space-4) 0}.streak-day{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border-light)}.streak-day.completed{background:var(--accent-soft);border-color:var(--accent)}.streak-day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.streak-day-label{font-size:.5rem;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em}.streak-day-dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--border-default);margin-top:2px}.streak-day.completed .streak-day-dot{background:var(--accent)}.login-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:var(--space-8) var(--space-6);background:var(--gradient-hero);position:relative;overflow:hidden;text-align:center}.login-screen:before{content:"";position:absolute;top:15%;left:50%;transform:translate(-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(212,168,83,.1) 0%,transparent 60%);pointer-events:none}.login-logo{width:80px;height:80px;border-radius:var(--radius-xl);background:var(--accent-soft);border:1px solid var(--border-default);display:flex;align-items:center;justify-content:center;font-size:2.5rem;margin-bottom:var(--space-8)}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:299}.sidebar-panel{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:90vw;background:var(--bg-secondary);border-left:1px solid var(--border-light);z-index:300;overflow-y:auto;padding:var(--space-8) var(--space-5)}.seq-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);margin-bottom:2px}.seq-item:hover{background:var(--accent-soft)}.seq-item.active{background:var(--accent-soft);border:1px solid var(--accent)}.seq-item-num{width:24px;height:24px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:700;background:var(--border-default);color:var(--text-secondary);flex-shrink:0}.seq-item.active .seq-item-num{background:var(--accent);color:#0c0a08}.seq-item.done .seq-item-num{background:var(--jade);color:#fff}.seq-item-name{font-size:.8125rem;font-weight:500;color:var(--text-secondary);flex:1}.seq-item.active .seq-item-name{color:var(--text-primary);font-weight:600}.seq-item-dur{font-size:.6875rem;color:var(--text-muted);font-variant-numeric:tabular-nums}.achievement-badge{width:64px;height:64px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--bg-card);border:2px solid var(--border-light)}.achievement-badge.earned{border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--shadow-gold)}.achievement-badge.locked{opacity:.3;filter:grayscale(1)}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes segmentPulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes breathe{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.1);opacity:.5}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes goldPulse{0%,to{box-shadow:var(--shadow-gold),0 0 0 0 var(--accent-glow)}50%{box-shadow:var(--shadow-gold-lg),0 0 0 12px transparent}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--radius-full)}*{scrollbar-width:thin;scrollbar-color:var(--border-default) transparent}@media (max-width: 480px){.stats-row{gap:var(--space-2)}.stat-card{padding:var(--space-3)}.stat-value{font-size:1.25rem}.timer-circle{width:160px;height:160px}.timer-circle-value{font-size:2.5rem}.dashboard{padding:var(--space-4) var(--space-4) calc(72px + var(--space-4))}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}