@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap";*,:before,:after{box-sizing:border-box}:root{--bg-color:#050409;--text-color:#f8fafc;--text-secondary:#94a3b8;--glass-bg:#161224a6;--glass-border:#ffffff14;--glass-shadow:0 8px 32px 0 #00000073;--primary-color:#7c3aed;--secondary-color:#06b6d4;--success-color:#10b981;--error-color:#f43f5e;--warning-color:#f59e0b;--info-color:#3b82f6;--border-color:#ffffff14;--input-bg:#0000004d;--toast-bg:#0f172afa;--badge-text:inherit;--surface-hover:#ffffff0d;--surface-subtle:#ffffff08;--surface-elevated:#0003;--icon-bg:#ffffff0d;--glass-bg-accent:#ffffff0d;--overlay-bg:#000000d1;--modal-bg:#000c;--divider-color:#ffffff1a;--btn-primary-text:#050409;--player-dark-bg:#111;--player-dark-overlay:#00000080;--info-bg:#7c3aed2e;--badge-solid-success-bg:#064e3b;--badge-solid-success-text:#10b981;--badge-solid-error-bg:#450a0a;--badge-solid-error-text:#f43f5e;--badge-solid-info-bg:#1e3a8a;--badge-solid-info-text:#60a5fa;--badge-solid-yt-bg:#7f1d1d;--badge-solid-spotify-bg:#065f46;--badge-solid-multi-bg:#4c1d95}body.light-mode{--bg-color:#f8fafc;--text-color:#0f172a;--text-secondary:#475569;--glass-bg:#ffffffd1;--glass-border:#0f172a1f;--glass-shadow:0 4px 20px #0000000f;--success-color:#047857;--error-color:#b91c1c;--warning-color:#b45309;--info-color:#1d4ed8;--border-color:#0f172a1f;--input-bg:#fff;--toast-bg:#0f172af2;--color-youtube:#dc2626;--color-spotify:#059669;--color-multi:#6d28d9;--badge-text:#fff;--surface-hover:#0f172a0a;--surface-subtle:#0f172a05;--surface-elevated:#0f172a0a;--icon-bg:#0f172a0f;--glass-bg-accent:#7c3aed0f;--overlay-bg:#0f172a99;--modal-bg:#0f172a8c;--divider-color:#0f172a14;--btn-primary-text:#fff;--player-dark-bg:#1e1e2e;--player-dark-overlay:#0f172a80;--info-bg:#1d4ed826;--badge-solid-success-bg:#d1fae5;--badge-solid-success-text:#065f46;--badge-solid-error-bg:#fee2e2;--badge-solid-error-text:#991b1b;--badge-solid-info-bg:#dbeafe;--badge-solid-info-text:#1e40af;--badge-solid-yt-bg:#fee2e2;--badge-solid-spotify-bg:#d1fae5;--badge-solid-multi-bg:#ede9fe}html,body{width:100%;margin:0;padding:0;position:relative;overflow-x:hidden}body{background-color:var(--bg-color);color:var(--text-color);background-image:radial-gradient(at 0 0,#100f15 0,#0000 50%),radial-gradient(at 50% 0,#2f3e6a 0,#0000 50%),radial-gradient(at 100% 0,#722741 0,#0000 50%);background-attachment:fixed;min-height:100vh;padding-top:58px;font-family:Outfit,Inter,system-ui,-apple-system,sans-serif;transition:background-color .35s,color .35s}img,svg,video,canvas,iframe{max-width:100%;height:auto;display:block}iframe{border:none}body.light-mode{background-image:radial-gradient(at 0 0,#6944ee14 0,#0000 50%),radial-gradient(at 50% 0,#07b9d514 0,#0000 50%),radial-gradient(at 100% 0,#f43e7e14 0,#0000 50%)}.glass-panel{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(16px);border-radius:20px;padding:24px;position:relative;overflow:hidden}.glass-panel:before{content:"";pointer-events:none;background:linear-gradient(135deg,#ffffff14 0%,#0000 50%);position:absolute;inset:0}body.light-mode .glass-panel{box-shadow:0 2px 12px #0000000d, 0 0 0 1px var(--glass-border)}body.light-mode .glass-panel:before{background:linear-gradient(135deg,#ffffff80 0%,#0000 50%)}.mesh-background{z-index:0;background-color:var(--bg-color);background-image:radial-gradient(at 0 0,#100f15 0,#0000 50%),radial-gradient(at 50% 0,#2f3e6a 0,#0000 50%),radial-gradient(at 100% 0,#722741 0,#0000 50%);width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.mesh-sphere{filter:blur(80px);opacity:.45;mix-blend-mode:screen;pointer-events:none;border-radius:50%;animation:20s infinite alternate aurora;position:absolute}body.light-mode .mesh-sphere{opacity:.22;mix-blend-mode:soft-light;filter:blur(120px)}body.light-mode .mesh-background{opacity:.5!important}.sphere-3{background:var(--error-color);opacity:.2;width:35vw;height:35vw;animation-duration:30s;animation-delay:-10s;top:40%;left:30%}@keyframes aurora{0%{transform:translate(0)scale(1)rotate(0)}33%{transform:translate(10%,5%)scale(1.1)rotate(10deg)}66%{transform:translate(-5%,15%)scale(.9)rotate(-15deg)}to{transform:translate(0)scale(1)rotate(0)}}body.light-mode .hero-text-glow{text-shadow:none}button{background:var(--primary-color);color:var(--btn-primary-text);cursor:pointer;border:none;border-radius:8px;min-height:40px;padding:10px 20px;font-weight:600;transition:all .2s}button:hover{filter:brightness(1.2);transform:translateY(-2px)}button:active{transform:translateY(0)scale(.98)}button.secondary{color:var(--primary-color);border:1.5px solid var(--primary-color);background:0 0}body.light-mode button.secondary{color:#4f46e5;background:#fff6;border-color:#4f46e5}input[type=text],input[type=password],input[type=email]{box-sizing:border-box;background:var(--input-bg);border:1px solid var(--glass-border);width:100%;color:var(--text-color);border-radius:8px;outline:none;margin-bottom:0;padding:12px 16px;font-size:16px;transition:border .2s,box-shadow .2s}input:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px #7c3aed1a}.input-group{text-align:left;width:100%;margin-bottom:20px}h1,h2,h3{margin-top:0}.container{box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:20px}.tabs-container{flex-wrap:wrap;gap:12px;margin-bottom:30px;display:flex}.tab{background:var(--glass-bg);color:var(--text-color);border:1px solid var(--border-color);cursor:pointer;border-radius:12px;align-items:center;gap:8px;padding:10px 18px;font-size:.9rem;font-weight:600;transition:all .25s cubic-bezier(.4,0,.2,1);display:inline-flex}.tab:hover{background:var(--surface-hover);border-color:var(--primary-color);transform:translateY(-1px)}.tab--active{box-shadow:0 4px 12px #7c3aed4d;background:var(--primary-color)!important;color:var(--btn-primary-text)!important;border-color:var(--primary-color)!important}body.light-mode .tab--active{box-shadow:0 4px 12px #7c3aed26}.tab-icon{opacity:.7;transition:opacity .2s}.tab--active .tab-icon{opacity:1}.main-layout{align-items:flex-start;gap:40px;display:flex}.grid-layout{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;display:grid}.player-container{aspect-ratio:16/9;box-sizing:border-box;background-color:#000;border-radius:12px;width:100%;max-width:100%;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000080}.player-container iframe{border:none;position:absolute;top:0;left:0;width:100%!important;height:100%!important}@media (max-width:900px){.main-layout{flex-direction:column;align-items:stretch;gap:24px}.container{box-sizing:border-box;width:100%;padding:16px}h1{font-size:1.8rem}h2{font-size:1.5rem}}@media (max-width:600px){.container{box-sizing:border-box;width:100%;padding:12px}.glass-panel{border-radius:12px;padding:16px}.grid-layout{grid-template-columns:1fr}h1{font-size:1.4rem}h2{font-size:1.2rem}h3{font-size:1rem}.hover-card:hover{transform:none}.playlist-card:hover{box-shadow:none;transform:none}.tier-card:hover,.tier-card--highlight,.tier-card--highlight:hover,button:hover{transform:none}}.text-truncate{white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;max-width:100%;display:-webkit-box;overflow:hidden}.global-header{z-index:1000;-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-border);background:#0b0914d9;position:fixed;top:0;left:0;right:0}body.light-mode .global-header{background:#f8fafceb;border-bottom-color:#0f172a14}.header-container{justify-content:space-between;align-items:center;gap:12px;max-width:1200px;margin:0 auto;padding:10px 20px;display:flex}.header-logo{cursor:pointer;flex-shrink:0;align-items:center;gap:10px;transition:opacity .2s;display:flex}.header-logo:hover{opacity:.8}.header-logo img{height:30px}.header-logo span{letter-spacing:-1px;background:linear-gradient(45deg, var(--primary-color), var(--secondary-color));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.4rem;font-weight:800}.mesh-background{z-index:0;background:var(--bg-color);pointer-events:none;position:absolute;inset:0;overflow:hidden}.mesh-sphere{filter:blur(80px);opacity:.4;border-radius:50%;animation:20s ease-in-out infinite alternate drift;position:absolute}.sphere-1{background:var(--primary-color);width:40vw;height:40vw;animation-duration:25s;top:-10%;left:-10%}.sphere-2{background:var(--secondary-color);width:35vw;height:35vw;animation-duration:30s;animation-delay:-5s;bottom:-5%;right:-5%}.sphere-3{background:var(--warning-color);opacity:.2;width:25vw;height:25vw;animation-duration:20s;animation-delay:-10s;top:20%;right:15%}@keyframes drift{0%{transform:translate(0)rotate(0)scale(1)}to{transform:translate(10%,15%)rotate(15deg)scale(1.1)}}.hero-title-gradient{background:linear-gradient(135deg, var(--text-color) 30%, var(--primary-color) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero-text-glow{text-shadow:0 0 40px #bb86fc26}.reveal-text{opacity:0;animation:1.2s cubic-bezier(.16,1,.3,1) forwards reveal;transform:translateY(30px)}@keyframes reveal{to{opacity:1;transform:translateY(0)}}.skeleton{background:linear-gradient(90deg,#ffffff08 25%,#ffffff14 50%,#ffffff08 75%) 0 0/200% 100%;border-radius:8px;animation:1.5s linear infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.header-actions--desktop{flex-wrap:nowrap;align-items:center;gap:8px;min-width:0;display:flex}@media (max-width:820px){.header-actions--desktop{gap:6px}.header-actions--desktop button{padding:8px 12px;font-size:.82rem}}.header-mobile-toggle{flex-shrink:0;display:none;position:relative}.header-mobile-menu{background:var(--glass-bg);border:1px solid var(--glass-border);z-index:200;border-radius:14px;flex-direction:column;gap:10px;min-width:220px;padding:12px;animation:.18s fadeDown;display:flex;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 16px 40px #0006}.header-mobile-menu button,.header-mobile-menu>div{width:100%}.menu-item{cursor:pointer;color:var(--text-color);text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:12px;width:100%;padding:10px 16px;font-size:.9rem;transition:background .2s,transform .1s;display:flex}.menu-item:hover{background:var(--surface-hover);transform:translate(4px)}.menu-item:active{transform:translate(2px)scale(.98)}@keyframes fadeDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:.6s cubic-bezier(.16,1,.3,1) backwards entrance}@keyframes entrance{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:680px){.header-actions--desktop{display:none}.header-mobile-toggle{align-items:center;gap:12px;display:flex}}.responsive-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px;display:flex}.responsive-header-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}@media (max-width:600px){.responsive-header{flex-direction:column;align-items:flex-start}.responsive-header-actions{width:100%}.responsive-header-actions>*{text-align:center;flex:auto;justify-content:center;min-width:0}}.admin-table-scroll{-webkit-overflow-scrolling:touch;border-radius:12px;width:100%;overflow-x:auto}.toast{background-color:var(--toast-bg);color:#fff;border-left:4px solid var(--primary-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;max-width:min(350px,92vw);padding:12px 20px;font-size:.95rem;font-weight:500;animation:.3s ease-out forwards slideIn;box-shadow:0 10px 15px -3px #0000004d,0 4px 6px -2px #0000000d}.toast-success{border-left-color:var(--secondary-color)}.toast-error{border-left-color:var(--error-color)}.toast-info{border-left-color:var(--primary-color)}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.password-container{width:100%;position:relative}.password-toggle-icon{cursor:pointer;opacity:.5;justify-content:center;align-items:center;width:20px;height:20px;transition:opacity .2s;display:flex;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.password-toggle-icon:hover{opacity:1}input.with-icon{padding-right:46px!important}.hero{text-align:center;max-width:900px;margin:0 auto;padding:100px 20px}.hero h1{background:linear-gradient(45deg, var(--primary-color), var(--secondary-color));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:20px;font-size:3.5rem;line-height:1.2}.hero p{opacity:.8;margin-bottom:40px;font-size:1.25rem}.features-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin:60px 0;display:grid}.feature-card{text-align:center;padding:40px;transition:transform .3s,background .3s}.feature-card:hover{background:var(--surface-hover);transform:translateY(-10px)}.feature-icon{color:var(--primary-color);background:#bb86fc1a;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;margin:0 auto 20px;display:flex}.hover-card{cursor:default;transition:transform .25s,box-shadow .25s,border-color .25s}.hover-card:hover{box-shadow:var(--glass-shadow), 0 0 0 1px var(--glass-border);transform:translateY(-6px)}body.light-mode .hover-card:hover{box-shadow:0 8px 24px #00000014, 0 0 0 1px var(--glass-border)}:root{--color-youtube:var(--error-color);--color-youtube-bg:#fb71851f;--color-spotify:var(--success-color);--color-spotify-bg:#34d3991f;--color-apple:var(--error-color);--color-apple-bg:#fb71851f;--color-multi:var(--primary-color);--color-multi-bg:#7c3aed1f;--color-tier-free:var(--text-secondary);--color-tier-pro:var(--warning-color);--color-tier-ult:var(--primary-color)}body.light-mode{--color-youtube-bg:#dc262614;--color-spotify-bg:#05966914;--color-apple-bg:#dc262614;--color-multi-bg:#6d28d914}.badge{white-space:nowrap;background-color:var(--glass-bg-accent);letter-spacing:.5px;text-transform:uppercase;border:1px solid #0000;border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-size:.75rem;font-weight:800;display:inline-flex;box-shadow:0 4px 12px #0000001f}.badge--youtube{color:var(--color-youtube);background:var(--color-youtube-bg);border-color:var(--color-youtube)}.badge--spotify{color:var(--color-spotify);background:var(--color-spotify-bg);border-color:var(--color-spotify)}.badge--multi{color:var(--color-multi);background:var(--color-multi-bg);border-color:var(--color-multi)}body.light-mode .badge{text-shadow:0 1px 3px #0003;box-shadow:0 2px 8px #00000014}.tier-card{transition:transform .25s,box-shadow .25s}.tier-card:hover{transform:translateY(-8px)}.tier-card--highlight{transform:scale(1.04)}.tier-card--highlight:hover{transform:scale(1.04)translateY(-8px)}.playlist-card{transition:transform .2s,box-shadow .2s}.playlist-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #0006}body.light-mode .playlist-card:hover{box-shadow:0 8px 24px #00000014}.feature-icon-sq{border-radius:14px;justify-content:center;align-items:center;width:52px;height:52px;margin-bottom:18px;transition:transform .2s;display:flex}.hover-card:hover .feature-icon-sq{transform:scale(1.12)}@media (max-width:600px){.hero h1{font-size:2.2rem}.hero{padding:50px 20px}}#root{width:100%;max-width:100vw;overflow-x:hidden}.checkbox-group{align-items:center;gap:8px;margin-bottom:20px;display:flex}.checkbox-container{cursor:pointer;color:var(--text-color);opacity:.85;-webkit-user-select:none;user-select:none;align-items:center;font-size:.85rem;font-weight:500;transition:opacity .2s,transform .1s;display:flex}.checkbox-container:hover{opacity:1}.checkbox-container:active{transform:scale(.98)}.checkbox-input{display:none}.checkbox-box{background:var(--input-bg);border:2px solid var(--glass-border);border-radius:6px;justify-content:center;align-items:center;width:20px;height:20px;margin-right:10px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.checkbox-input:checked+.checkbox-box{background:var(--primary-color);border-color:var(--primary-color);box-shadow:0 0 10px #7c3aed4d}.checkbox-box:after{content:"";border:solid var(--bg-color);border-width:0 2.5px 2.5px 0;width:5px;height:10px;margin-top:-2px;transition:transform .2s cubic-bezier(.4,0,.2,1);transform:rotate(45deg)scale(0)}.checkbox-input:checked+.checkbox-box:after{transform:rotate(45deg)scale(1)}.feature-card-glow{transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s,border-color .4s}.feature-card-glow:hover{border-color:#fff3;transform:translateY(-12px);box-shadow:0 20px 40px -10px #00000080,0 0 25px -5px #7c3aed26}body.light-mode .feature-card-glow:hover{border-color:var(--glass-border);box-shadow:0 12px 28px -6px #0000001a,0 0 20px -5px #7c3aed14}.feature-card-glow:hover .feature-icon-sq{transform:scale(1.15)rotate(5deg)}body.light-mode .hover-row:hover{background:#0f172a08!important}body.light-mode .badge--youtube{color:#fff;background:#dc2626;border-color:#dc2626}body.light-mode .badge--spotify{color:#fff;background:#059669;border-color:#059669}body.light-mode .badge--multi{color:#fff;background:#6d28d9;border-color:#6d28d9}body.light-mode .header-mobile-menu{background:#fffffff2;box-shadow:0 12px 32px #0000001a}body.light-mode input[type=text],body.light-mode input[type=password],body.light-mode input[type=email]{border-color:#0f172a26;box-shadow:0 1px 2px #0000000a}body.light-mode input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #7c3aed14}body.light-mode .tier-card:hover{box-shadow:0 8px 24px #0000000f}.settings-two-col{grid-template-columns:1fr 1fr;gap:24px;display:grid}@media (max-width:640px){.settings-two-col{grid-template-columns:1fr}}.settings-modal-panel>button:first-child{z-index:10;float:right;background:var(--glass-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;position:sticky;top:0}