:root{--background:222 47% 5%;--foreground:210 35% 96%;--primary:188 95% 55%;--secondary:18 96% 62%;--muted:214 18% 68%;--destructive:0 84% 60%;--border:215 24% 24%;--card:222 40% 11%;--shadow-sm:0 8px 24px hsl(0 0% 0%/.24);--shadow-md:0 18px 48px hsl(0 0% 0%/.34);--shadow-lg:0 28px 80px hsl(188 95% 55%/.18);--transition-fast:180ms ease;--transition-smooth:420ms cubic-bezier(.2,.8,.2,1);--radius-sm:14px;--radius-md:22px;--radius-lg:34px}.dark{--background:222 47% 5%;--foreground:210 35% 96%;--primary:188 95% 55%;--secondary:18 96% 62%;--muted:214 18% 68%;--destructive:0 84% 60%;--border:215 24% 24%;--card:222 40% 11%}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% 10%,hsl(var(--primary)/.16),transparent 30%),hsl(var(--background));color:hsl(var(--foreground));font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}a{text-decoration:none;color:inherit}.dynamic-island{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:10px;padding:8px;width:156px;overflow:hidden;border:1px solid hsl(var(--border)/.7);border-radius:999px;background:hsl(var(--card)/.62);backdrop-filter:blur(22px);box-shadow:var(--shadow-lg);transition:width var(--transition-smooth)}.dynamic-island.expanded,.dynamic-island:hover{width:min(94vw,560px)}.island-trigger{border:0;background:hsl(var(--foreground)/.08);color:hsl(var(--foreground));border-radius:999px;padding:10px 14px;display:flex;gap:8px;align-items:center;font-weight:800;cursor:pointer;white-space:nowrap}.pulse-dot{width:9px;height:9px;border-radius:50%;background:hsl(var(--primary));box-shadow:0 0 18px hsl(var(--primary))}.island-menu{display:flex;gap:4px;opacity:0;transform:translateX(-8px);pointer-events:none;transition:var(--transition-smooth)}.dynamic-island.expanded .island-menu,.dynamic-island:hover .island-menu{opacity:1;transform:translateX(0);pointer-events:auto}.island-menu a{padding:10px 13px;border-radius:999px;color:hsl(var(--muted));font-size:14px}.island-menu a:hover,.island-menu .active{background:hsl(var(--primary)/.13);color:hsl(var(--primary))}.library-shell{max-width:1120px;margin:auto;padding:112px 18px 48px}.eyebrow{color:hsl(var(--primary));text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:900}.library-hero{padding:28px;border:1px solid hsl(var(--border));border-radius:var(--radius-lg);background:linear-gradient(135deg,hsl(var(--card)/.76),hsl(var(--secondary)/.12));backdrop-filter:blur(18px);box-shadow:var(--shadow-md);margin-bottom:20px}.library-hero h1{font-size:clamp(34px,7vw,68px);line-height:1;margin:10px 0}.library-hero p:last-child{color:hsl(var(--muted));max-width:680px;line-height:1.65}.library-grid{display:grid;gap:16px}.glass-panel{padding:18px;border:1px solid hsl(var(--border)/.75);border-radius:var(--radius-lg);background:hsl(var(--card)/.62);backdrop-filter:blur(18px);box-shadow:var(--shadow-sm)}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-heading button{border:1px solid hsl(var(--border));background:transparent;color:hsl(var(--muted));border-radius:999px;padding:10px 12px}.liked-list,.playlist-stack,.recent-grid{display:grid;gap:10px}.liked-item,.playlist-stack div,.empty-state{padding:14px;border-radius:20px;background:hsl(var(--foreground)/.05);border:1px solid hsl(var(--border)/.55)}.liked-item{display:flex;justify-content:space-between;gap:14px}.liked-item small,.playlist-stack span{display:block;color:hsl(var(--muted));margin-top:4px}.recent-grid{grid-template-columns:1fr}.recent-grid span{padding:14px;border-radius:18px;background:linear-gradient(135deg,hsl(var(--secondary)/.16),hsl(var(--primary)/.08));color:hsl(var(--foreground))}.empty-state{text-align:center;color:hsl(var(--muted));padding:30px}.empty-state strong{display:block;color:hsl(var(--foreground));font-size:20px;margin-bottom:8px}@media(min-width:800px){.library-grid{grid-template-columns:1.3fr .7fr}.wide{grid-row:span 2}.recent-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.dynamic-island.expanded,.dynamic-island:hover{width:calc(100vw - 22px)}.island-menu a{font-size:12px;padding:9px 8px}.panel-heading{align-items:flex-start;flex-direction:column}}