@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
:root{--color-void:#050510;--color-surface:#0e0e24;--color-surface-elevated:#161638;--color-accent:#7b68ee;--color-accent-soft:#9b8fff;--color-accent-blue:#4a9eff;--color-warm:#e8a87c;--color-positive:#6bcb77;--color-caution:#e8a87c;--color-negative:#e57373;--color-text-primary:#ffffffeb;--color-text-secondary:#ffffff8c;--color-text-tertiary:#ffffff4d;--gradient-accent:linear-gradient(135deg, #7b68ee, #4a9eff);--gradient-recording:linear-gradient(180deg, #e8a87c, #cf6f8a);--gradient-border:linear-gradient(135deg, #ffffff1f, #ffffff0a, #ffffff14);--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--transition-fast:.15s ease;--transition-normal:.3s ease;--transition-slow:.5s ease;--tab-bar-height:56px;--mini-player-height:56px;--safe-bottom:env(safe-area-inset-bottom,0px)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;font-size:16px}body{font-family:var(--font-sans);background-color:var(--color-void);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;min-height:100dvh;overflow-x:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit;font-family:inherit;font-size:inherit;background:0 0;border:none}input,textarea{font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none;outline:none}.cosmic-card{padding:var(--space-md);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid #ffffff14;position:relative}.cosmic-card:before{content:"";border-radius:var(--radius-lg);background:var(--gradient-border);-webkit-mask-composite:xor;pointer-events:none;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.cosmic-bg{background:var(--color-void);min-height:100dvh}.accent-gradient-text{background:var(--gradient-accent);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.btn-primary{justify-content:center;align-items:center;gap:var(--space-sm);width:100%;padding:14px var(--space-lg);background:var(--color-accent);color:#fff;border-radius:var(--radius-md);transition:all var(--transition-fast);font-size:1rem;font-weight:600;display:flex;position:relative;overflow:hidden}.btn-primary:active{opacity:.9;transform:scale(.97)}.btn-secondary{justify-content:center;align-items:center;gap:var(--space-sm);padding:10px var(--space-md);color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast);font-size:.875rem;display:flex}.btn-secondary:active{opacity:.7}.page-container{padding:var(--space-md);padding-bottom:calc(var(--tab-bar-height) + var(--mini-player-height) + var(--safe-bottom) + var(--space-md));background:var(--color-void);min-height:100dvh}.page-title{margin-bottom:var(--space-lg);color:var(--color-text-primary);font-size:1.5rem;font-weight:700}.tab-bar{height:calc(var(--tab-bar-height) + var(--safe-bottom));padding-bottom:var(--safe-bottom);-webkit-backdrop-filter:blur(20px);z-index:100;background:#0e0e24f2;border-top:1px solid #ffffff0f;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.tab-item{color:var(--color-text-tertiary);transition:color var(--transition-fast);flex-direction:column;align-items:center;gap:2px;padding:6px 16px;font-size:.625rem;font-weight:500;display:flex;position:relative}.tab-item.active{color:var(--color-accent)}.tab-item svg{width:22px;height:22px}.mini-player{bottom:calc(var(--tab-bar-height) + var(--safe-bottom));height:var(--mini-player-height);-webkit-backdrop-filter:blur(20px);padding:0 var(--space-md);align-items:center;gap:var(--space-sm);z-index:99;background:#161638f2;border-top:1px solid #7b68ee33;display:flex;position:fixed;left:0;right:0}.mini-player-progress{background:var(--gradient-accent);height:2px;transition:width .1s linear;position:absolute;top:0;left:0}.mini-player-title{white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:.875rem;font-weight:500;overflow:hidden}.mini-player-btn{width:36px;height:36px;color:var(--color-accent);justify-content:center;align-items:center;font-size:1.25rem;display:flex}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:200;background:#050510cc;justify-content:center;align-items:flex-end;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--color-surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;width:100%;max-width:480px;padding:var(--space-lg);padding-bottom:calc(var(--space-lg) + var(--safe-bottom));animation:.3s slideUp}.progress-bar{gap:6px;display:flex}.progress-bar-segment{height:3px;transition:background var(--transition-normal);background:#ffffff1a;border-radius:2px;flex:1}.progress-bar-segment.active{background:var(--color-accent)}.waveform-container{justify-content:center;align-items:center;gap:3px;height:60px;display:flex}.waveform-bar{background:var(--color-accent);border-radius:2px;width:3px;transition:height .1s}.waveform-bar.recording{animation:1.2s ease-in-out infinite waveform}.calendar-grid{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.calendar-day{aspect-ratio:1;border-radius:var(--radius-sm);transition:all var(--transition-fast);justify-content:center;align-items:center;font-size:.75rem;font-weight:500;display:flex}.calendar-day.empty{background:0 0}.calendar-day.none{background:var(--color-surface-elevated);color:var(--color-text-tertiary)}.calendar-day.listened{color:#fff;background:#e8a87c99}.calendar-day.completed{color:#fff;background:#6bcb77b3}.calendar-day.today{box-shadow:inset 0 0 0 2px var(--color-accent)}.calendar-day.future{opacity:.3}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes waveform{0%,to{height:8px}50%{height:40px}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes breathe{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.starfield{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.star{background:#fff;border-radius:50%;width:2px;height:2px;animation:3s ease-in-out infinite twinkle;position:absolute}@keyframes twinkle{0%,to{opacity:.2}50%{opacity:.8}}@media (min-width:768px){.page-container{max-width:480px;margin:0 auto}.tab-bar,.mini-player{max-width:480px;left:50%;transform:translate(-50%)}.modal-content{border-radius:var(--radius-xl);margin-bottom:var(--space-lg)}}