:root{--color-bg:#0a0404;--color-surface:#120808;--color-surface-2:#1a0b0b;--color-border:#2a1010;--color-border-subtle:#1e0c0c;--color-accent:#8b1a1a;--color-accent-bright:#c0392b;--color-accent-glow:#c0392b26;--color-text:#e8d5d5;--color-text-muted:#7a5a5a;--color-text-dim:#4a3030;--color-gold:#c9a96e;--color-gold-dim:#7a6040;--font-display:"Cinzel", serif;--font-body:"DM Sans", sans-serif;--font-lyric:"Cormorant Garamond", serif;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--sidebar-width:220px;--player-height:80px;--player-height-mobile:76px;--tab-bar-height:54px;--transition:.15s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--color-bg);height:100%;color:var(--color-text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.6}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit}input,textarea{font-family:inherit}body:before{content:"";pointer-events:none;z-index:9999;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");background-repeat:repeat;background-size:128px 128px;position:fixed;inset:0}.font-display{font-family:var(--font-display)}.font-lyric{font-family:var(--font-lyric)}h1,h2,h3{font-family:var(--font-display);letter-spacing:.04em;font-weight:400}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}.app-shell{height:100vh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-width);background:var(--color-surface);border-right:1px solid var(--color-border);flex-direction:column;flex-shrink:0;display:flex;overflow-y:auto}.main-content{padding-bottom:var(--player-height);flex:1;overflow-y:auto}.player-bar{bottom:0;left:var(--sidebar-width);height:var(--player-height);background:var(--color-surface);border-top:1px solid var(--color-border);z-index:100;align-items:center;gap:1.5rem;padding:0 1.5rem;display:flex;position:fixed;right:0}.song-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition), background var(--transition);cursor:pointer;padding:1rem}.song-card:hover{border-color:var(--color-accent);background:var(--color-surface-2)}.theme-tag{background:var(--color-accent);color:var(--color-text);letter-spacing:.06em;text-transform:uppercase;border-radius:100px;padding:2px 8px;font-size:11px;font-weight:500;display:inline-block}.status-badge{text-transform:uppercase;letter-spacing:.05em;border-radius:100px;padding:2px 8px;font-size:11px;font-weight:500;display:inline-block}.status-badge.complete{color:#6dbf6d;background:#2864284d}.status-badge.generating{color:var(--color-gold);background:#6450144d}.status-badge.pending{color:var(--color-text-muted);background:#321e1e80}.status-badge.failed{color:var(--color-accent-bright);background:#7814144d}.glow-active{box-shadow:0 0 20px var(--color-accent-glow)}.page-header{border-bottom:1px solid var(--color-border-subtle);margin-bottom:2rem;padding:2rem 2rem 1rem}.page-header h1{color:var(--color-text);font-size:1.6rem}.page-header p{color:var(--color-text-muted);margin-top:.25rem;font-size:.9rem}.karaoke-header{padding:calc(env(safe-area-inset-top,0px) + 1rem) 2rem 1rem}.karaoke-lyrics{padding:4rem 2rem}.karaoke-controls{padding:.75rem 2rem calc(env(safe-area-inset-bottom,0px) + .75rem)}@media (max-width:640px){.karaoke-header{padding:calc(env(safe-area-inset-top,0px) + .75rem) 1rem .75rem}.karaoke-lyrics{padding:1.5rem 1rem}.karaoke-controls{padding:.75rem 1rem calc(env(safe-area-inset-bottom,0px) + .75rem)}}.player-info{flex:0 0 180px;min-width:0;overflow:hidden}.player-center{flex-direction:column;flex:1;align-items:center;gap:6px;display:flex}.player-volume{align-items:center;gap:6px;min-width:100px;display:flex}.player-play-mobile,.mobile-tab-bar{display:none}@media (max-width:640px){.sidebar{display:none}.player-bar{bottom:calc(var(--tab-bar-height) + env(safe-area-inset-bottom));height:auto;min-height:var(--player-height-mobile);flex-wrap:wrap;align-items:center;gap:0;padding:10px 14px 0;left:0!important}.player-info{flex:auto!important}.player-play-mobile{border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;margin-left:12px;font-size:15px;display:flex!important}.player-center{align-items:stretch;padding-bottom:8px;flex:none!important;width:100%!important}.player-desktop-btn{display:none!important}.player-scrubber{height:6px!important}.player-volume{display:none!important}.main-content{padding-bottom:calc(var(--player-height-mobile) + var(--tab-bar-height) + env(safe-area-inset-bottom))}.mobile-tab-bar{height:calc(var(--tab-bar-height) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--color-surface);border-top:1px solid var(--color-border);z-index:200;justify-content:space-around;align-items:stretch;display:flex;position:fixed;bottom:0;left:0;right:0}.mobile-tab{color:var(--color-text-muted);letter-spacing:.04em;transition:color var(--transition);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:6px 4px;font-size:10px;text-decoration:none;display:flex}.mobile-tab.active{color:var(--color-accent-bright)}.mobile-tab-icon{font-size:18px;line-height:1}.mobile-tab-label{text-transform:uppercase;letter-spacing:.06em;font-size:9px}.page-header{margin-bottom:1.25rem;padding:1.25rem 1rem .75rem}.page-header h1{font-size:1.2rem}}