@import "https://fonts.googleapis.com/css2?family=Saira+Stencil+One&display=swap";
@import "https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap";
:root{--color-primary:#6c5ce7;--color-primary-light:#a29bfe;--color-primary-dark:#4a3cb5;--color-primary-glow:#6c5ce74d;--color-accent:#f5b731;--color-accent-light:#fece5a;--color-accent-dark:#d49b1a;--color-accent-glow:#f5b73133;--color-accent-dim:#f5b7311a;--color-yes:#00d68f;--color-yes-light:#4ae8b5;--color-yes-bg:#00d68f1a;--color-maybe:#fa0;--color-maybe-light:#ffc84d;--color-maybe-bg:#ffaa001a;--color-no:#ff4757;--color-no-light:#ff7a85;--color-no-bg:#ff47571a;--color-approved:var(--color-yes);--color-discuss:var(--color-maybe);--color-rejected:var(--color-no);--color-not-started:#8395a7;--color-rehearsing:var(--color-maybe);--color-stage-ready:var(--color-yes);--color-bg-primary:#0a0a0f;--color-bg-secondary:#13131a;--color-bg-tertiary:#1c1c27;--color-bg-elevated:#232333;--color-bg-hover:#2a2a3d;--color-bg-active:#333350;--color-border:#ffffff14;--color-border-light:#ffffff1f;--color-border-focus:var(--color-primary);--color-text-primary:#fff;--color-text-secondary:#b0b0c8;--color-text-tertiary:#6b6b8d;--color-text-muted:#4a4a6a;--surface-glass:#13131acc;--surface-glass-border:#ffffff0f;--surface-card:linear-gradient(135deg, #232333e6, #1c1c27e6);--font-heading:"Space Grotesk", sans-serif;--font-body:"Inter", sans-serif;--font-brand:"Expletus Sans", cursive;--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;--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;--leading-tight:1.2;--leading-normal:1.5;--leading-relaxed:1.7;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 2px 4px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-xl:0 16px 48px #0009;--shadow-glow:0 0 20px var(--color-primary-glow);--shadow-glow-lg:0 0 40px var(--color-primary-glow);--shadow-accent-glow:0 0 20px var(--color-accent-glow);--shadow-accent-glow-lg:0 0 40px var(--color-accent-glow);--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--duration-fast:.15s;--duration-normal:.25s;--duration-slow:.4s;--sidebar-width:260px;--header-height:64px;--max-content-width:1200px;--z-base:1;--z-dropdown:100;--z-sticky:200;--z-overlay:300;--z-modal:400;--z-toast:500}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;-moz-text-size-adjust:100%;text-size-adjust:100%;font-size:16px;overflow-x:clip}body{font-family:var(--font-body);font-weight:var(--weight-regular);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-bg-primary);min-height:100vh;overflow-x:clip}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(at 20% 0,#6c5ce714 0%,#0000 50%),radial-gradient(at 80% 100%,#f5b7310d 0%,#0000 50%);position:fixed;inset:0}a{color:var(--color-accent);transition:color var(--duration-fast) var(--ease-out);text-decoration:none}a:hover{color:var(--color-accent-light)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--color-text-primary)}select{font-family:var(--font-body);font-size:var(--text-base)}select option{background:var(--color-bg-secondary);color:var(--color-text-primary)}.select-input{width:100%;padding:var(--space-3) 2.5rem var(--space-3) var(--space-4);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--text-base);transition:all var(--duration-fast) var(--ease-out);appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .75rem center;background-repeat:no-repeat;background-size:1.5em 1.5em}.select-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-dim);outline:none}img{max-width:100%;display:block}.user-avatar{object-fit:cover;border-radius:50%;width:150px;height:150px;margin-top:3rem}.btn{margin-top:var(--space-4);justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-weight:var(--weight-semibold);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);white-space:nowrap;border:none;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";opacity:0;transition:opacity var(--duration-fast) var(--ease-out);background:linear-gradient(#ffffff1a,#0000);position:absolute;inset:0}.btn:hover:after{opacity:1}.btn-primary{background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));color:var(--color-text-primary);box-shadow:var(--shadow-md), var(--shadow-glow)}.btn-primary:before{content:"";transition:background-position .48s var(--ease-out);border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,#0000 30%,#ffffff21 50%,#0000 70%) 200% 0/200% 100%;position:absolute;inset:0}.btn-primary:hover{box-shadow:var(--shadow-lg), var(--shadow-glow-lg), 0 0 0 1px var(--color-primary-light);transform:translateY(-1px)}.btn-primary:hover:before{background-position:-200% 0}.btn-accent{background:linear-gradient(135deg, var(--color-primary), var(--color-accent-dark));color:var(--color-text-primary);font-weight:var(--weight-bold);box-shadow:var(--shadow-md), var(--shadow-glow)}.btn-accent:before{content:"";transition:background-position .48s var(--ease-out);border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,#0000 30%,#ffffff21 50%,#0000 70%) 200% 0/200% 100%;position:absolute;inset:0}.btn-accent:hover{box-shadow:var(--shadow-lg), var(--shadow-accent-glow-lg), 0 0 0 1px var(--color-accent);transform:translateY(-1px)}.btn-accent:hover:before{background-position:-200% 0}.btn-secondary{background:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border-light)}.btn-secondary:hover{background:var(--color-bg-hover);border-color:#f5b73166}.btn-ghost{color:var(--color-text-secondary);background:0 0}.btn-ghost:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.btn-google{color:#1f1f1f;font-weight:var(--weight-semibold);padding:var(--space-4) var(--space-8);font-size:var(--text-base);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:#fff}.btn-google:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-google img{width:20px;height:20px}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base);border-radius:var(--radius-lg)}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs);border-radius:var(--radius-sm)}.btn-icon{border-radius:var(--radius-md);color:#1f1f1f;background:#fff;width:40px;height:40px;padding:0}.card{background:var(--surface-card);border:1px solid var(--surface-glass-border);border-radius:var(--radius-lg);padding:var(--space-6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all var(--duration-normal) var(--ease-out)}.card:hover{border-color:var(--color-border-light);box-shadow:var(--shadow-md)}.card-accent:hover{box-shadow:var(--shadow-md), 0 0 0 1px #f5b7311a;border-color:#f5b73140}.card-elevated{box-shadow:var(--shadow-lg)}.glass{background:var(--surface-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--surface-glass-border)}.input{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--text-base);transition:all var(--duration-fast) var(--ease-out)}.input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-dim);outline:none}.input::placeholder{color:var(--color-text-tertiary)}.input[type=file]{cursor:pointer;color:var(--color-text-tertiary)}.input[type=file]::file-selector-button{padding:var(--space-2) var(--space-4);margin-right:var(--space-3);background:var(--color-accent);color:#0a0a0f;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;transition:opacity var(--duration-fast) var(--ease-out);border:none}.input[type=file]::file-selector-button:hover{opacity:.85}.badge{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.05em;display:inline-flex}.badge-accent{background:var(--color-accent-dim);color:var(--color-accent);border:1px solid #f5b73140}.badge-yes{background:var(--color-yes-bg);color:var(--color-yes);border:1px solid #00d68f33}.badge-maybe{background:var(--color-maybe-bg);color:var(--color-maybe);border:1px solid #fa03}.badge-no{background:var(--color-no-bg);color:var(--color-no);border:1px solid #ff475733}.badge-genre{color:var(--color-primary-light);background:#6c5ce71a;border:1px solid #6c5ce733}.badge-status{padding:var(--space-1) var(--space-3)}.avatar{border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--color-border-light);width:36px;height:36px}.avatar-sm{width:28px;height:28px}.avatar-lg{width:48px;height:48px}.container{width:100%;max-width:var(--max-content-width);padding:0 var(--space-6);margin:0 auto}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.text-center{text-align:center}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.text-accent{color:var(--color-accent)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fade-in{animation:fadeIn var(--duration-normal) var(--ease-out) forwards}.animate-slide-up{animation:slideUp var(--duration-slow) var(--ease-out) forwards}.skeleton{background:linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-hover) 50%, var(--color-bg-tertiary) 75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s infinite shimmer}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-bg-hover);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-bg-active)}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}::selection{color:#fff;background:#f5b73159}@media (max-width:768px){:root{--sidebar-width:0px;--header-height:56px;--text-5xl:2.5rem;--text-4xl:2rem;--text-3xl:1.75rem}}.authenticated-layout{flex-direction:column;min-height:100vh;display:flex}.authenticated-content{flex:1}:is(.authenticated-layout:has(.modal-overlay) .authenticated-content,.authenticated-layout:has(.song-details-overlay) .authenticated-content,.authenticated-layout:has(.confirm-overlay) .authenticated-content){z-index:999;position:relative}