Upload 59 files

frontend/.env.example

@@ -0,0 +1,11 @@
+# Backend REST API base (leave as /api to use the Vite dev proxy)
+VITE_API_URL=/api
+
+# HLS proxy worker endpoint (leave as /hls to use the Vite dev proxy).
+# To use the deployed Cloudflare worker instead (recommended — the local
+# dev proxy must be running for /hls to work):
+#   VITE_STREAM_PROXY_URL=https://anidoom-proxy.shawnmwask1234.workers.dev/hls
+VITE_STREAM_PROXY_URL=/hls
+
+# Only needed if the worker requires auth (STREAM_KEY secret)
+VITE_STREAM_KEY=

frontend/.env.local

@@ -0,0 +1,3 @@
+# Use the deployed anicove-proxy Cloudflare Worker for all HLS/MP4 streaming
+# instead of the local dev proxy (:8787, which is not always running).
+VITE_STREAM_PROXY_URL=https://anicove-proxy.shawnmwask1234.workers.dev/hls

frontend/.env.production.local

@@ -0,0 +1,4 @@
+# Production build: stream everything through the deployed anicove-proxy worker.
+# Set VITE_API_URL here too if the backend is deployed somewhere else.
+VITE_API_URL=https://frantic-dollie-mwask-009a226f.koyeb.app
+VITE_STREAM_PROXY_URL=https://anicove-proxy.shawnmwask1234.workers.dev/hls

frontend/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+
+EXPOSE 5173
+
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

frontend/dist/assets/index-BOX6jOo8.css

@@ -0,0 +1 @@
+:root{--bg-base: #080808;--bg-surface: #0d0d0d;--bg-elevated: #111111;--bg-card: #0f0f0f;--bg-card-hover: #1a1a1a;--accent-v: #7c3aed;--accent-v2: #9d6ef8;--accent-c: #5b21b6;--accent-c2: #c4b5fd;--accent-green: #22c55e;--accent-amber: #f59e0b;--grad-accent: linear-gradient(135deg, #7c3aed, #4c1d95);--grad-card: linear-gradient(180deg, transparent 35%, rgba(8,8,8,.99) 100%);--text-primary: #ffffff;--text-secondary: #777790;--text-muted: #404050;--border: rgba(255,255,255,.07);--border-bright: rgba(124,58,237,.5);--glass-border: rgba(255,255,255,.06);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-pill: 999px;--shadow-hover: 0 8px 40px rgba(124,58,237,.35);--transition: all .22s cubic-bezier(.4,0,.2,1);--header-h: 62px;--max-w: 1380px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scrollbar-width:none}::-webkit-scrollbar{display:none}body{font-family:Outfit,Inter,sans-serif;background:radial-gradient(circle at top,rgba(124,58,237,.22),transparent 32%),linear-gradient(180deg,#06070a,#0b0b12 36%,#08090d);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}#root{min-height:100vh}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}ul,ol{list-style:none}input{font-family:inherit}.container{max-width:var(--max-w);margin:0 auto;padding:0 28px}.main-content{position:relative;min-height:100vh;overflow-x:hidden}.page-shell{padding-top:calc(var(--header-h) + 30px);padding-bottom:80px}.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px 16px}.search-shell{display:flex;flex-direction:column;gap:18px}.section-header.compact{margin-bottom:16px}#header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);transition:var(--transition)}#header:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0a0a12d1,#0a0a1261);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:var(--transition);pointer-events:none}#header.scrolled:before,#header:not(.scrolled){opacity:1}#header.scrolled{border-bottom:1px solid var(--border);box-shadow:0 12px 28px #0000002e}#header .container{height:100%;display:flex;align-items:center;gap:24px;position:relative;z-index:1}.logo{display:flex;align-items:center;flex-shrink:0}.logo-wordmark{display:flex;align-items:flex-end;line-height:1}.logo-wordmark .l{font-family:Bebas Neue,Outfit,sans-serif;font-size:2.2rem;font-weight:400;line-height:1;color:#fff;letter-spacing:.02em}nav{display:flex;align-items:center;gap:2px}nav a{padding:6px 14px;border-radius:var(--radius-pill);font-size:.88rem;font-weight:500;color:var(--text-secondary);transition:var(--transition)}nav a:hover,nav a.active{color:var(--text-primary);background:#8b5cf626}.search-wrap{flex:1;max-width:360px;position:relative}.search-input{width:100%;padding:9px 16px 9px 42px;border-radius:var(--radius-pill);background:#ffffff0f;border:1px solid var(--border);color:var(--text-primary);font-size:.88rem;outline:none;transition:var(--transition)}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{background:#ffffff1a;border-color:var(--accent-v);box-shadow:0 0 0 3px #8b5cf61f}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted)}.search-icon svg{width:16px;height:16px}.auth-nav{margin-left:auto;flex-shrink:0}.auth-avatar-btn{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:var(--radius-pill);background:#ffffff0f;border:1px solid var(--border);transition:var(--transition);font-size:.85rem;font-weight:700;letter-spacing:.01em;color:var(--text-primary);box-shadow:0 8px 18px #0000001f}.auth-avatar-btn:hover{background:#ffffff1a;border-color:var(--border-bright);transform:translateY(-1px)}.auth-avatar-btn.open{border-color:var(--border-bright);background:linear-gradient(180deg,#7c3aed2e,#ffffff14);box-shadow:0 12px 30px #7c3aed2e}.auth-avatar-btn.guest{background:linear-gradient(135deg,#7c3aed2e,#ffffff14);border-color:#7c3aed6b}.auth-avatar-btn.guest:hover{border-color:#7c3aedb3;box-shadow:0 12px 32px #7c3aed38}.auth-avatar-circle{width:28px;height:28px;border-radius:50%;background:#ffffff14;display:flex;align-items:center;justify-content:center;flex-shrink:0}.auth-avatar-icon{background:linear-gradient(135deg,#7c3aed42,#ffffff14);color:var(--accent-v2)}.auth-avatar-img{object-fit:cover}.auth-nav{position:relative}@media (max-width: 1024px){.container{padding:0 20px}nav{display:none}.search-wrap{max-width:260px}}@media (max-width: 768px){.container{padding:0 16px}.search-wrap{display:none}.anime-card{width:130px}.hero-next,.hero-prev{display:none!important}.hero-cover-wrap{display:none}.home-layout{grid-template-columns:1fr;gap:14px}.home-sidebar{position:static}}@media (max-width: 680px){.container{padding:0 16px}.auth-avatar-btn{gap:0;padding:5px 8px 5px 6px;min-width:42px;justify-content:center}.auth-avatar-btn span,.auth-avatar-btn svg:last-child{display:none}.auth-avatar-circle{width:26px;height:26px}.auth-avatar-icon svg{width:14px;height:14px}.main-content{padding-bottom:calc(66px + env(safe-area-inset-bottom))}.home-layout{grid-template-columns:1fr;gap:14px}.spotlight-featured{min-height:262px;border-radius:14px}.spotlight-featured-body{padding:12px 12px 38px}.spotlight-featured-title{font-size:1.28rem;margin-bottom:4px}.spotlight-nav-btn{width:30px;height:30px;opacity:1}.spotlight-nav-btn.prev{left:8px}.spotlight-nav-btn.next{right:8px}.genre-row-wrap,.genre-row{gap:8px}.genre-pill{padding:7px 12px;font-size:.74rem}.section-header{margin-bottom:14px}.section-title{font-size:1.02rem}.section-title:before{height:19px}.scroll-row{gap:10px}.anime-card{width:138px}.card-body{padding:8px 9px 10px}.card-title{font-size:.78rem}.btn{padding:10px 18px;font-size:.85rem}.btn-sm{padding:6px 13px;font-size:.78rem}}@media (max-width: 420px){.anime-card{width:126px}.hero-ctas{flex-direction:column}.hero-cta{width:100%;justify-content:center}.spotlight-featured{min-height:240px}.auth-dropdown{left:12px;right:12px;min-width:0}}.auth-dropdown{position:absolute;top:calc(100% + 10px);right:0;z-index:130;min-width:240px;background:#0c0c14f5;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--border-bright);border-radius:var(--radius-lg);box-shadow:0 22px 52px #000000b3;padding:10px;animation:fadeUp .18s ease both;overflow:hidden}.auth-dropdown-head{padding:12px 12px 10px;border-bottom:1px solid var(--border);margin-bottom:8px;background:linear-gradient(180deg,rgba(124,58,237,.1),transparent);border-radius:8px 8px 0 0}.auth-dropdown-name{font-size:.9rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.auth-dropdown-sub{font-size:.72rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.auth-dropdown-item{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;border-radius:var(--radius-md);font-size:.85rem;font-weight:600;color:var(--text-primary);transition:var(--transition);cursor:pointer;background:none;border:none;text-align:left;margin-top:2px}.auth-dropdown-item svg{color:var(--accent-v2);flex-shrink:0}.auth-dropdown-item:hover{background:linear-gradient(90deg,#7c3aed29,#ffffff08);border-color:transparent}.auth-dropdown-item.danger{color:#fda4af}.auth-dropdown-item.danger svg{color:#fda4af}.auth-dropdown-item.danger:hover{background:#e11d481f}.auth-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#05050ab8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease both}.auth-modal{position:relative;width:100%;max-width:400px;background:var(--bg-surface);border:1px solid var(--border-bright);border-radius:var(--radius-lg);padding:30px 28px 26px;box-shadow:0 30px 90px #000000b3;animation:fadeUp .22s ease both}.auth-modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:#ffffff0f;border:1px solid var(--border);color:var(--text-secondary);font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:var(--transition);cursor:pointer}.auth-modal-close:hover{background:#ffffff1f;color:#fff}.auth-modal-logo{font-family:Bebas Neue,Outfit,sans-serif;font-size:1.9rem;letter-spacing:.05em;text-align:center;margin-bottom:20px;color:#fff}.auth-tabs{display:flex;background:#ffffff0d;border:1px solid var(--border);border-radius:var(--radius-pill);padding:4px;margin-bottom:20px}.auth-tab{flex:1;padding:8px 0;border-radius:var(--radius-pill);font-size:.84rem;font-weight:700;color:var(--text-secondary);transition:var(--transition);cursor:pointer;background:none;border:none}.auth-tab.active{background:var(--grad-accent);color:#fff;box-shadow:0 0 16px #7c3aed66}.auth-form{display:flex;flex-direction:column;gap:14px}.auth-field{display:flex;flex-direction:column;gap:6px}.auth-field span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.auth-field input{padding:11px 14px;border-radius:var(--radius-md);background:#ffffff0d;border:1px solid var(--border);color:var(--text-primary);font-size:.9rem;outline:none;transition:var(--transition)}.auth-field input:focus{background:#ffffff14;border-color:var(--accent-v);box-shadow:0 0 0 3px #8b5cf61f}.auth-field input::placeholder{color:var(--text-muted)}.auth-error{font-size:.8rem;font-weight:600;color:#fda4af;background:#e11d481a;border:1px solid rgba(225,29,72,.25);border-radius:var(--radius-sm);padding:8px 12px}.auth-submit{width:100%;justify-content:center;margin-top:4px}.auth-submit:disabled{opacity:.5;cursor:not-allowed}.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--text-muted);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border)}.auth-anilist-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:11px;border-radius:var(--radius-md);background:#06b6d41f;border:1px solid rgba(6,182,212,.35);color:#67e8f9;font-size:.86rem;font-weight:700;transition:var(--transition);cursor:pointer}.auth-anilist-btn:hover{background:#06b6d438;border-color:#06b6d499}.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:var(--radius-pill);font-size:.9rem;font-weight:600;transition:var(--transition);white-space:nowrap;cursor:pointer;border:none}.btn-primary{background:var(--grad-accent);color:#fff;box-shadow:0 0 22px #7c3aed59}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 30px #7c3aed8c}.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-ghost{background:#ffffff12;color:var(--text-primary);border:1px solid var(--border)}.btn-ghost:hover{background:#ffffff1f;border-color:var(--border-bright)}.btn-ghost:disabled{opacity:.4;cursor:not-allowed}.btn-sm{padding:7px 16px;font-size:.82rem}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-pill);font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.badge-score{background:#f59e0b26;color:#fcd34d;border:1px solid rgba(245,158,11,.3)}.badge-green{background:#22c55e26;color:#4ade80;border:1px solid rgba(34,197,94,.3)}.badge-dark{background:#ffffff12;color:var(--text-secondary);border:1px solid var(--border)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.section-title{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:700}.section-title:before{content:"";display:block;width:4px;height:22px;background:var(--grad-accent);border-radius:2px}.section-link{font-size:.84rem;font-weight:500;color:var(--accent-v2);display:flex;align-items:center;gap:4px;transition:var(--transition)}.section-link:hover{color:var(--accent-c2);gap:8px}.anime-card{position:relative;flex-shrink:0;width:158px;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);cursor:pointer;transition:var(--transition);border:1px solid var(--border)}.anime-card:hover{transform:translateY(-6px) scale(1.02);border-color:var(--border-bright);box-shadow:var(--shadow-hover)}.card-poster{position:relative;aspect-ratio:2/3;overflow:hidden}.card-poster img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.anime-card:hover .card-poster img{transform:scale(1.05)}.card-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--grad-card);opacity:0;transition:var(--transition)}.anime-card:hover .card-overlay{opacity:1}.card-quick{position:absolute;bottom:8px;left:8px;right:8px;opacity:0;transform:translateY(8px);transition:var(--transition)}.anime-card:hover .card-quick{opacity:1;transform:translateY(0)}.card-quick-btn{width:100%;padding:7px;border-radius:var(--radius-sm);background:var(--grad-accent);color:#fff;font-size:.78rem;font-weight:600;text-align:center}.card-body{padding:10px 10px 12px}.card-title{font-size:.84rem;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px}.card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.card-score{font-size:.72rem;font-weight:700;color:#6ee7b7}.card-meta-item{font-size:.7rem;color:var(--text-muted)}.scroll-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 0;scrollbar-width:thin;scrollbar-color:var(--accent-v) transparent}.scroll-row::-webkit-scrollbar{height:4px;display:block}.scroll-row::-webkit-scrollbar-thumb{background:var(--accent-v);border-radius:99px}.scroll-row .anime-card{scroll-snap-align:start}.skeleton{background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--bg-card-hover) 50%,var(--bg-elevated) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}.skel-card{width:158px;flex-shrink:0}.skel-poster{width:100%;aspect-ratio:2/3;border-radius:var(--radius-md) var(--radius-md) 0 0}.skel-line{height:11px;margin:8px 10px;border-radius:6px}.skel-line-sm{width:55%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes bounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(6px)}}.spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--accent-v);border-radius:50%;animation:spin .7s linear infinite}.loader{display:flex;justify-content:center;align-items:center;padding:60px;flex-direction:column;gap:12px;color:var(--text-muted)}.home-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:calc(var(--header-h) + 40px) 20px 60px;text-align:center;background:radial-gradient(circle at 20% 15%,rgba(124,58,237,.26),transparent 22%),radial-gradient(circle at 80% 18%,rgba(139,92,246,.18),transparent 18%)}.hero-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 70% 70% at 15% 50%,rgba(88,28,235,.35) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 85% 50%,rgba(88,28,235,.15) 0%,transparent 60%);pointer-events:none}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:var(--radius-pill);background:#7c3aed1f;border:1px solid rgba(124,58,237,.3);font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--accent-v2);margin-bottom:32px;animation:fadeUp .5s ease both;box-shadow:0 14px 32px #7c3aed1f}.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-v)}.hero-logo-text{font-family:Rubik Dirt,Bebas Neue,sans-serif;font-size:clamp(5rem,16vw,14rem);font-weight:400;line-height:.9;margin-bottom:16px;background:linear-gradient(180deg,#fff 40%,#c8b4ffb8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeUp .6s ease .1s both;text-shadow:0 0 26px rgba(124,58,237,.18)}.hero-logo-e{display:inline-block;transform:scaleX(-1)}.hero-subtitle{font-size:clamp(1.4rem,3.5vw,2.4rem);font-weight:700;color:var(--text-secondary);margin-bottom:14px;animation:fadeUp .6s ease .2s both}.hero-desc{font-size:1rem;color:var(--text-secondary);max-width:500px;margin:0 auto 32px;line-height:1.7;animation:fadeUp .6s ease .25s both}.hero-desc strong{color:var(--text-primary)}.hero-filters{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:24px;animation:fadeUp .6s ease .3s both;flex-wrap:wrap}.hero-filter-pill{padding:7px 20px;border-radius:var(--radius-pill);background:#ffffff0f;border:1px solid var(--border);font-size:.86rem;font-weight:500;color:var(--text-secondary);transition:var(--transition);cursor:pointer}.hero-filter-pill.active{background:var(--accent-v);border-color:var(--accent-v);color:#fff}.hero-filter-pill:hover:not(.active){border-color:var(--border-bright);color:var(--text-primary)}.hero-search-wrap{position:relative;width:min(620px,100%);margin:0 auto 28px;animation:fadeUp .6s ease .35s both}.hero-search-input{width:100%;padding:16px 60px 16px 22px;border-radius:var(--radius-pill);background:#ffffff12;border:1px solid rgba(255,255,255,.1);color:var(--text-primary);font-size:.95rem;outline:none;transition:var(--transition)}.hero-search-input::placeholder{color:var(--text-muted)}.hero-search-input:focus{background:#ffffff1a;border-color:var(--accent-v);box-shadow:0 0 0 4px #7c3aed26}.hero-search-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:var(--accent-v);color:#fff;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.hero-search-btn:hover{background:var(--accent-v2);transform:translateY(-50%) scale(1.08)}.hero-search-btn svg{width:18px;height:18px}.hero-popular{margin-bottom:36px;animation:fadeUp .6s ease .4s both}.hero-popular-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}.hero-popular-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.hero-popular-tag{padding:6px 16px;border-radius:var(--radius-pill);background:#ffffff0d;border:1px solid var(--border);font-size:.82rem;font-weight:500;color:var(--text-secondary);transition:var(--transition);cursor:pointer}.hero-popular-tag:hover{background:#7c3aed1f;border-color:var(--border-bright);color:var(--accent-v2)}.hero-ctas{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:52px;animation:fadeUp .6s ease .45s both}.hero-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:var(--radius-pill);font-size:.9rem;font-weight:700;transition:var(--transition);cursor:pointer;border:1px solid transparent}.hero-cta-anime{background:var(--grad-accent);color:#fff;box-shadow:0 0 28px #7c3aed66}.hero-cta-anime:hover{transform:translateY(-2px);box-shadow:0 6px 36px #7c3aed8c}.hero-cta-manga{background:#ffffff12;border-color:var(--border);color:var(--text-primary)}.hero-cta-manga:hover{background:#ffffff1f;border-color:var(--border-bright)}.hero-cta-movies{background:#06b6d426;border-color:#06b6d466;color:#67e8f9}.hero-cta-movies:hover{background:#06b6d440;transform:translateY(-2px)}.hero-cta-music{background:#8b5cf62e;border-color:#8b5cf666;color:#a78bfa}.hero-cta-music:hover{background:#8b5cf647;transform:translateY(-2px)}.hero-stats{display:flex;align-items:center;justify-content:center;animation:fadeUp .6s ease .5s both}.hero-stat{padding:0 36px;text-align:center;position:relative}.hero-stat+.hero-stat:before{content:"";position:absolute;left:0;top:15%;bottom:15%;width:1px;background:var(--border)}.hero-stat-val{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;margin-bottom:2px}.hero-stat-label{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.scroll-indicator{position:absolute;bottom:24px;left:50%;transform:translate(-50%);color:var(--text-muted);animation:bounce 2s ease infinite}.library-section{padding:60px 0;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.library-header{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:28px}.library-header-line{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--border-bright));max-width:200px}.library-header-line.right{background:linear-gradient(to left,transparent,var(--border-bright))}.library-header-text{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted)}.marquee-track{overflow:hidden}.marquee-row{display:flex;gap:10px;width:max-content;animation:marquee 30s linear infinite;margin-bottom:10px}.marquee-row.reverse{animation:marquee 35s linear infinite reverse}.marquee-row:last-child{margin-bottom:0}.marquee-poster{width:100px;height:140px;flex-shrink:0;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);transition:var(--transition);cursor:pointer}.marquee-poster:hover{border-color:var(--border-bright);transform:scale(1.04)}.marquee-poster img{width:100%;height:100%;object-fit:cover}.feature-section{padding:80px 0}.feature-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-v2);margin-bottom:16px}.feature-heading{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1.15;margin-bottom:20px}.feature-heading .accent{color:var(--accent-v2)}.feature-desc{font-size:1rem;color:var(--text-secondary);line-height:1.75;max-width:480px;margin-bottom:40px}.feature-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;max-width:560px}.feature-card-icon{width:44px;height:44px;border-radius:var(--radius-md);background:#7c3aed26;border:1px solid rgba(124,58,237,.3);display:flex;align-items:center;justify-content:center;color:var(--accent-v2);margin-bottom:16px}.feature-card-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-v2);margin-bottom:6px}.feature-card-title{font-size:1.1rem;font-weight:800;margin-bottom:8px}.feature-card-desc{font-size:.88rem;color:var(--text-secondary);line-height:1.7;margin-bottom:16px}.feature-track-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-elevated);border-radius:var(--radius-md);margin-bottom:8px}.feature-track-name{font-size:.88rem;font-weight:600}.feature-track-sub{font-size:.75rem;color:var(--text-muted)}.feature-track-badge{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--accent-green)}.content-section{padding:40px 0}.content-section:first-child{padding-top:calc(var(--header-h) + 26px)}.section-sub-label{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}.info-hero{position:relative;min-height:520px;overflow:hidden;display:flex;align-items:flex-end;padding-top:var(--header-h);background:#0a0a0a}.info-hero:before,.info-hero:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.info-hero:before{background:radial-gradient(120% 80% at 30% 30%,#00000040,#000000d9 70%,#0a0a0a)}.info-hero:after{background:linear-gradient(180deg,rgba(10,10,10,0) 40%,rgba(10,10,10,.85) 80%,var(--bg-base) 100%)}.info-hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.05);filter:brightness(.55)}.info-hero-inner{position:relative;z-index:2;display:flex;gap:36px;padding:96px 28px 56px;align-items:flex-end}.info-poster{flex:0 0 240px;width:240px;aspect-ratio:2/3;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px #0009,0 0 0 1px #ffffff0f;background:#111;border:1px solid rgba(255,255,255,.06)}.info-poster img{width:100%;height:100%;object-fit:cover;display:block}.info-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px}.info-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#ffffffb3;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.info-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-v);box-shadow:0 0 12px var(--accent-v)}.info-title{font-family:Poppins,Inter,sans-serif;font-size:clamp(1.8rem,3.6vw,3.2rem);font-weight:900;line-height:1.05;color:#fff;margin:0;text-shadow:0 6px 28px rgba(0,0,0,.6)}.info-subtitle{font-size:.95rem;color:#ffffffa6;font-weight:500;margin-top:-6px}.info-meta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;color:#ffffffd9;font-size:.85rem;font-weight:600}.meta-pill{background:#ffffff14;border:1px solid rgba(255,255,255,.08);padding:6px 12px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.meta-score{color:#fbbf24}.meta-status-airing{color:#22c55e}.info-genres{display:flex;gap:8px;flex-wrap:wrap}.info-genre-tag{background:#ffffff0f;border:1px solid rgba(255,255,255,.08);padding:5px 12px;border-radius:999px;font-size:.72rem;font-weight:600;color:#ffffffd9;cursor:pointer;transition:all .2s ease}.info-genre-tag:hover{background:#ffffff1f;transform:translateY(-1px)}.info-cta{display:flex;gap:12px;margin-top:4px;flex-wrap:wrap}.btn-watch{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:12px;background:linear-gradient(135deg,var(--accent-v) 0%,var(--accent-v2) 100%);color:#fff;font-weight:800;font-size:.95rem;letter-spacing:.04em;text-decoration:none;border:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 12px 30px #7c3aed59}.btn-watch:hover{transform:translateY(-2px);box-shadow:0 18px 40px #7c3aed80}.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:12px;background:#ffffff14;color:#fff;font-weight:700;font-size:.9rem;text-decoration:none;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:background .2s ease}.btn-secondary:hover{background:#ffffff24}.info-body{padding:40px 28px 80px}.info-section{margin-bottom:48px}.info-section-title{display:flex;align-items:center;gap:12px;font-family:Poppins,Inter,sans-serif;font-size:1.3rem;font-weight:800;color:#fff;margin:0 0 18px}.info-section-title:before{content:"";width:4px;height:22px;border-radius:4px;background:var(--accent-v)}.info-grid-2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px;align-items:flex-start}.info-desc{font-size:.96rem;line-height:1.75;color:#ffffffc7;margin:0;position:relative;max-height:22em;overflow:hidden;transition:max-height .3s ease}.info-desc.expanded{max-height:200em}.info-desc:after{content:"";position:absolute;inset:auto 0 0 0;height:3em;background:linear-gradient(180deg,rgba(10,10,10,0) 0%,var(--bg-base) 100%);pointer-events:none;transition:opacity .3s ease}.info-desc.expanded:after{opacity:0}.info-desc-toggle{display:inline-block;margin-top:8px;color:var(--accent-v2);font-weight:700;font-size:.85rem;cursor:pointer;background:none;border:none;padding:0}.info-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:#ffffff05;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:22px}.info-stat-row{display:flex;flex-direction:column;gap:4px}.info-stat-row .label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#ffffff73}.info-stat-row .value{font-size:.95rem;font-weight:700;color:#fff}.info-tags{display:flex;flex-wrap:wrap;gap:6px}.info-tag{background:#ffffff0a;border:1px solid rgba(255,255,255,.06);padding:4px 10px;border-radius:6px;font-size:.72rem;font-weight:600;color:#ffffffb3}@media (max-width: 880px){.info-hero-inner{flex-direction:column;align-items:center;text-align:center;padding:80px 22px 40px;gap:24px}.info-poster{flex:0 0 180px;width:180px}.info-meta-row,.info-genres,.info-cta{justify-content:center}.info-grid-2{grid-template-columns:1fr}.info-hero{min-height:auto}.info-body{padding:32px 22px 80px}}@media (max-width: 540px){.info-hero-inner{padding:72px 20px 36px}.info-poster{flex:0 0 150px;width:150px}.btn-watch{padding:12px 22px;font-size:.88rem}.info-body{padding:28px 20px 80px}}.countdown-wrap{display:inline-flex;flex-direction:column;gap:10px;padding:14px 18px;margin-bottom:22px;border-radius:var(--radius-md);background:#7c3aed14;border:1px solid rgba(124,58,237,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:fit-content}.countdown-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-v2)}.countdown-cards{display:flex;gap:8px}.countdown-cell{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;padding:8px 6px;border-radius:var(--radius-sm);background:#08080899;border:1px solid var(--border-bright)}.countdown-num{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:#fff}.countdown-unit{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.info-genre-pill{padding:5px 14px;background:#ffffff12;border:1px solid var(--border);border-radius:var(--radius-pill);font-size:.8rem;font-weight:500;color:var(--text-secondary);transition:var(--transition);cursor:pointer}.info-genre-pill:hover{border-color:var(--border-bright);color:var(--accent-v2)}.info-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.info-btn-watch{background:var(--grad-accent);color:#fff;box-shadow:0 0 24px #7c3aed59}.info-btn-watch:hover{transform:translateY(-2px);box-shadow:0 6px 32px #7c3aed8c}.info-btn-ghost{background:#ffffff14;color:var(--text-primary);border:1px solid var(--border)}.info-btn-ghost:hover{background:#ffffff24;border-color:var(--border-bright)}.info-body{padding:44px 0 80px}.info-layout{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}.info-section-label{font-size:1.15rem;font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:16px}.info-section-label:before{content:"";width:4px;height:20px;background:var(--grad-accent);border-radius:2px}.info-synopsis{font-size:.93rem;color:var(--text-secondary);line-height:1.8;margin-bottom:8px}.info-synopsis.clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.show-more-btn{color:var(--accent-v2);font-size:.88rem;font-weight:600;display:inline-flex;align-items:center;gap:4px;transition:var(--transition);margin-top:8px;cursor:pointer;background:none;border:none}.show-more-btn:hover{color:var(--accent-c2)}.info-tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 32px}.info-tag{padding:5px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:.78rem;font-weight:500;color:var(--text-secondary);transition:var(--transition);cursor:pointer}.info-tag:hover{border-color:var(--border-bright);color:var(--accent-v2)}.info-stats-grid{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}.info-stat-cell{padding:18px 20px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.info-stat-cell:nth-child(2n){border-right:none}.info-stat-cell:nth-last-child(-n+2){border-bottom:none}.info-stat-label{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}.info-stat-value{font-size:.95rem;font-weight:700}.char-row{display:flex;gap:16px;overflow-x:auto;padding:4px 0 12px}.char-card{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;cursor:pointer}.char-avatar{width:80px;height:80px;border-radius:50%;overflow:hidden;border:2px solid var(--border);transition:var(--transition)}.char-avatar img{width:100%;height:100%;object-fit:cover}.char-card:hover .char-avatar{border-color:var(--border-bright);transform:scale(1.06)}.char-name{font-size:.78rem;font-weight:600;text-align:center;max-width:84px;line-height:1.3}.char-role{font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.watch-page{padding-top:var(--header-h)}.watch-container{padding:0 28px 80px;max-width:var(--max-w);margin:0 auto}.watch-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start;padding-top:12px}.watch-main,.watch-sidebar-col{min-width:0}.player-wrapper{position:relative;width:100%;aspect-ratio:16/9;background:#080a12;border-radius:14px;overflow:hidden;border:1px solid var(--border)}.player-wrapper iframe,.player-wrapper video,.player-wrapper .custom-player{width:100%;height:100%;border:none;display:block}.player-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--text-muted);background:#070a12f2}.player-placeholder svg{width:52px;height:52px;opacity:.3}.player-placeholder span{font-size:.9rem;font-weight:500}.player-error-box{color:#f43f5e}.server-warning{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#f59e0b12;border:1px solid rgba(245,158,11,.2);border-radius:var(--radius-md);margin:10px 0;font-size:.83rem;color:#fcd34d}.server-warning-close{margin-left:auto;opacity:.5;transition:var(--transition);font-size:1.1rem;line-height:1;cursor:pointer;border:none;background:none;color:inherit}.server-warning-close:hover{opacity:1}.watch-warn-banner{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f59e0b14;border:1px solid rgba(245,158,11,.2);border-radius:12px;margin:10px 0 14px;font-size:.83rem;color:#fcd34d}.wwb-icon{width:16px;height:16px;flex-shrink:0}.wwb-text{display:block;flex:1}.wwb-close{margin-left:auto;border:none;background:none;color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.wwb-close svg{width:16px;height:16px}.kv-prefs-bar{display:flex;align-items:center;gap:18px;padding:11px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;margin:10px 0;flex-wrap:wrap}.kv-pref-btn{display:flex;align-items:center;gap:8px;padding:0;background:none;border:none;color:var(--text-secondary);font-size:.82rem;font-weight:600;cursor:pointer}.kv-pref-btn svg{opacity:.8}.kv-pref-pill{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;border-radius:999px;background:#ffffff14;border:1px solid var(--border);margin-left:4px}.kv-pref-knob{position:absolute;left:3px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0006}.kv-pref-btn.on{color:var(--text-primary)}.kv-pref-btn.on svg{color:var(--accent-v2)}.kv-pref-pill.on{background:var(--accent-v);border-color:var(--accent-v)}.kv-pref-pill.on .kv-pref-knob{left:19px}.kv-pref-knob{transition:left .18s ease}.action-btn.is-active{color:var(--accent-v2);border-color:#7c3aed73;background:#7c3aed1f}.kv-prefs-sep{width:1px;height:16px;background:#ffffff14}.watch-player-info{padding-top:14px}.watch-ep-label{font-size:.72rem;font-weight:800;color:var(--accent-v2);letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px}.watch-ep-title{font-size:1.45rem;font-weight:800;line-height:1.25;margin:0 0 8px}.watch-filler-warn{color:#facc15;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:8px}.action-bar{display:flex;align-items:center;gap:12px;padding:14px 0 18px;border-bottom:1px solid var(--border);margin-bottom:18px}.action-anime{display:flex;align-items:center;gap:12px;min-width:0;flex:1;text-decoration:none;color:inherit}.aa-poster{width:52px;height:52px;border-radius:10px;overflow:hidden;flex-shrink:0;border:1px solid rgba(255,255,255,.08)}.aa-poster img{width:100%;height:100%;object-fit:cover;display:block}.aa-info{min-width:0;display:flex;flex-direction:column;gap:4px}.aa-name{font-size:.94rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aa-meta{font-size:.72rem;color:var(--text-muted)}.action-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}.audio-toggle{display:flex;align-items:center;background:#ffffff0a;border:1px solid var(--border);border-radius:999px;padding:4px;gap:4px}.audio-btn{padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:700;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;transition:var(--transition)}.audio-btn.active{background:var(--accent-v);border-color:var(--accent-v);color:#fff}.audio-btn:disabled{opacity:.5;cursor:not-allowed}.action-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#ffffff0f;border:1px solid var(--border);color:var(--text-primary);font-weight:700;font-size:.8rem;cursor:pointer;transition:var(--transition)}.action-btn svg{width:15px;height:15px}.action-btn:hover,.audio-btn:not(.active):hover{border-color:var(--border-bright)}.audio-lang-selected{font-size:.78rem;color:var(--text-muted)}.server-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin:10px 0 0;box-shadow:0 20px 40px #0000003d}.server-panel.is-hidden{display:none}.server-panel-row{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}.server-group{display:flex;flex-direction:column;gap:10px;flex:1;min-width:180px}.server-group-toggle{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#ffffff0a;border:1px solid var(--border);color:var(--text-primary);font-weight:700;cursor:pointer}.sg-icon{flex-shrink:0}.sg-label{flex:1;text-align:left}.sg-count{font-size:.72rem;padding:2px 7px;border-radius:999px;background:#ffffff14;color:var(--text-muted)}.server-btn-row{display:flex;gap:8px;flex-wrap:wrap;padding-left:2px}.server-option{padding:7px 12px;border-radius:10px;border:1px solid var(--border);background:#ffffff08;color:var(--text-secondary);font-size:.78rem;font-weight:600;cursor:pointer}.server-option.selected{background:#7c3aed29;border-color:#7c3aed6b;color:var(--text-primary)}.server-quality-wrap{margin-left:auto}.server-quality-select{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#ffffff0a;color:var(--text-primary)}.server-loading,.server-error{display:flex;align-items:center;gap:8px;padding-top:12px;font-size:.8rem;color:var(--text-muted)}.server-loading-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-v);display:inline-block;animation:pulse 1.3s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}.watch-desc-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-top:18px}.watch-sidebar{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;position:sticky;top:calc(var(--header-h) + 12px);max-height:calc(100vh - var(--header-h) - 24px);display:flex;flex-direction:column}.up-next-header{padding:14px 14px 0}.un-info{display:flex;flex-direction:column;gap:3px}.un-title{font-size:1rem;font-weight:800}.un-subtitle{font-size:.76rem;color:var(--accent-v2)}.next-ep-strip{padding:12px 14px 0}.next-ep-pill{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;background:#7c3aed14;border:1px solid rgba(124,58,237,.22);color:var(--text-primary)}.nep-bell{width:15px;height:15px}.nep-label{font-size:.72rem;font-weight:700;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase}.nep-units{display:flex;align-items:flex-end;gap:8px}.nec-unit{display:flex;align-items:flex-end;gap:2px;font-weight:800;color:#fff}.nec-num{font-size:.9rem}.nec-u{font-size:.6rem;color:var(--text-muted)}.ep-search-wrap{padding:12px 14px 0}.ep-search-input{width:100%;padding:9px 12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-size:.82rem;outline:none}.ep-search-input::placeholder{color:var(--text-muted)}.ep-view-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px}.ep-view-bar-label{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.ep-view-toggle-btn{padding:5px 9px;border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.ep-view-toggle-btn:hover{color:var(--text-primary);border-color:var(--border-bright)}.ep-list{flex:1;overflow-y:auto;padding:0 8px 12px;scrollbar-width:thin;scrollbar-color:var(--accent-v) transparent}.ep-list::-webkit-scrollbar{width:3px;display:block}.ep-list::-webkit-scrollbar-thumb{background:var(--accent-v);border-radius:99px}.ep-list.compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:7px;align-content:start}.ep-list.compact .ep-item{justify-content:center;margin:0;padding:9px 5px}.ep-list.compact .ep-thumb{width:auto;height:auto;background:transparent;overflow:visible}.ep-list.compact .ep-thumb img,.ep-list.compact .ep-info{display:none}.ep-list.compact .ep-thumb-label{position:static;background:transparent;padding:0;color:var(--text-secondary);font-size:.76rem}.ep-list.compact .ep-item.active .ep-thumb-label{color:var(--accent-v2)}.ep-item{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;cursor:pointer;transition:var(--transition);margin-bottom:2px;border:1px solid transparent}.ep-item:hover{background:#ffffff09}.ep-item.active{background:#7c3aed1f;border-color:#7c3aed40}.ep-thumb{width:72px;height:46px;flex-shrink:0;background:var(--bg-elevated);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:var(--text-muted);position:relative}.ep-thumb img{width:100%;height:100%;object-fit:cover}.ep-thumb-label{position:absolute;bottom:3px;left:3px;background:#000000b3;color:#fff;font-size:.62rem;font-weight:700;padding:1px 5px;border-radius:4px}.ep-info{flex:1;min-width:0}.ep-info-title{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}.ep-info-sub{font-size:.7rem;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.audio-notice{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#7c3aed14;border:1px solid rgba(124,58,237,.28);border-radius:var(--radius-md);margin:12px 0;font-size:.83rem;font-weight:500;color:var(--accent-c2);animation:fadeUp .2s ease both}.audio-notice svg{flex-shrink:0;color:var(--accent-v2)}.audio-notice .server-warning-close{margin-left:auto;color:var(--text-muted)}@media (max-width: 1024px){.watch-layout{grid-template-columns:1fr}.watch-sidebar{position:static;max-height:540px}}@media (max-width: 680px){.watch-container{padding:0 12px 60px}.watch-layout{gap:12px;padding-top:8px}.watch-warn-banner{padding:10px 12px}.action-bar{flex-wrap:wrap;border-bottom:none;padding-bottom:8px}.action-anime{width:100%}.action-buttons{width:100%;justify-content:flex-start}.watch-ep-title{font-size:1.15rem}.watch-desc-card{padding:14px 16px}.watch-sidebar{position:static;max-height:420px}.ep-thumb{width:64px;height:40px}.aa-poster{width:44px;height:44px}}.movie-search-wrap{position:relative}.movie-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.movie-tabs button{padding:8px 20px;border-radius:var(--radius-pill);background:#ffffff0f;border:1px solid var(--border);font-size:.86rem;font-weight:600;color:var(--text-secondary);transition:var(--transition);cursor:pointer}.movie-tabs button:hover{border-color:var(--border-bright);color:var(--text-primary)}.movie-tabs button.active{background:var(--accent-v);border-color:var(--accent-v);color:#fff;box-shadow:0 0 18px #7c3aed59}.movie-sort{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 24px}.movie-sort-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-right:6px}.movie-sort button{padding:5px 13px;border-radius:var(--radius-pill);background:#ffffff0a;border:1px solid var(--border);font-size:.76rem;font-weight:600;color:var(--text-secondary);transition:var(--transition);cursor:pointer}.movie-sort button:hover{border-color:var(--border-bright);color:var(--text-primary)}.movie-sort button.active{background:#7c3aed2e;border-color:#7c3aed80;color:var(--accent-c2)}.movie-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--bg-elevated);border:1px solid var(--border-bright);border-radius:var(--radius-md);box-shadow:0 18px 50px #0009;overflow:hidden;max-height:320px;overflow-y:auto}.movie-suggest-item{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;font-size:.88rem;color:var(--text-secondary);transition:var(--transition);cursor:pointer;text-align:left;background:none;border:none;border-bottom:1px solid var(--border)}.movie-suggest-item:last-child{border-bottom:none}.movie-suggest-item:hover{background:#7c3aed1f;color:var(--text-primary)}.movie-suggest-item svg{color:var(--accent-v2);flex-shrink:0}.load-more-wrap{display:flex;justify-content:center;margin-top:36px}.load-more-btn{min-width:220px;justify-content:center}.cast-row{display:flex;gap:14px;overflow-x:auto;padding:4px 0 14px;scrollbar-width:thin;scrollbar-color:var(--accent-v) transparent}.cast-chip{flex-shrink:0;width:96px;text-align:center;cursor:default}.cast-chip img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 8px;border:2px solid var(--border);transition:var(--transition)}.cast-chip:hover img{border-color:var(--border-bright);transform:scale(1.06)}.cast-avatar-fallback{width:72px;height:72px;border-radius:50%;margin:0 auto 8px;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;color:#fff}.cast-chip-name{font-size:.76rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cast-chip-role{font-size:.66rem;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}.ep-grid-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);transition:var(--transition);cursor:pointer;color:var(--text-secondary)}.ep-grid-btn:hover{background:#7c3aed1f;border-color:var(--border-bright);color:var(--text-primary);transform:translateY(-2px)}.ep-grid-num{font-size:.82rem;font-weight:700}.ep-grid-play{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#7c3aed2e;color:var(--accent-v2);transition:var(--transition)}.ep-grid-btn:hover .ep-grid-play{background:var(--accent-v);color:#fff}.player-error{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-muted);padding:20px;text-align:center}.player-error .big{font-size:2.6rem}.player-error p{font-size:.9rem;max-width:420px}.custom-player{position:relative;width:100%;height:100%;background:#000;outline:none;overflow:hidden;cursor:default}.custom-player video{width:100%;height:100%;object-fit:contain;background:#000}.custom-player video::-webkit-media-controls{display:none!important}.cp-fade{position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(to top,rgba(0,0,0,.88),transparent);pointer-events:none;transition:opacity .25s ease;z-index:3}.cp-controls{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;display:flex;flex-direction:column;gap:8px;transition:opacity .25s ease,transform .25s ease;z-index:5}.cp-controls.hide,.cp-fade.hide{opacity:0;pointer-events:none;transform:translateY(10px)}.cp-seek{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none}.cp-seek-track{position:absolute;left:0;right:0;height:4px;border-radius:99px;background:#ffffff38;transition:height .15s ease}.cp-seek:hover .cp-seek-track{height:6px}.cp-buffered{position:absolute;left:0;height:4px;border-radius:99px;background:#ffffff52;transition:height .15s ease}.cp-seek:hover .cp-buffered{height:6px}.cp-progress{position:absolute;left:0;height:4px;border-radius:99px;background:var(--accent-v);box-shadow:0 0 12px #7c3aeda6;transition:height .15s ease}.cp-seek:hover .cp-progress{height:6px}.cp-thumb{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);opacity:0;transition:opacity .15s ease;box-shadow:0 1px 6px #00000080;pointer-events:none}.cp-seek:hover .cp-thumb{opacity:1}.cp-hover-time{position:absolute;top:-28px;transform:translate(-50%);background:#0a0a12eb;border:1px solid var(--border-bright);color:#fff;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:6px;pointer-events:none;white-space:nowrap}.cp-row{display:flex;align-items:center;gap:4px}.cp-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ffffffeb;transition:var(--transition);background:transparent;flex-shrink:0}.cp-btn:hover{background:#ffffff1f;color:#fff}.cp-btn.active{color:var(--accent-v2);background:#7c3aed38}.cp-time{font-size:.8rem;font-weight:600;color:#ffffffd9;font-variant-numeric:tabular-nums;margin-left:6px;white-space:nowrap}.cp-time em{font-style:normal;color:#fff6;margin:0 4px}.cp-spacer{flex:1}.cp-vol-slider{width:74px;accent-color:var(--accent-v);cursor:pointer;flex-shrink:0}.cp-menu{position:absolute;bottom:56px;right:12px;background:#0c0c14f2;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--border-bright);border-radius:var(--radius-md);padding:8px 10px 10px;min-width:172px;box-shadow:0 16px 44px #0009;z-index:10;animation:fadeUp .18s ease both;max-height:min(340px,60vh);overflow-y:auto}.cp-menu-title{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:8px 10px 4px}.cp-menu-title:first-child{padding-top:2px}.cp-menu-item{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;color:var(--text-secondary);transition:var(--transition);cursor:pointer;background:none;border:none}.cp-menu-item:hover{background:#ffffff0f;color:var(--text-primary)}.cp-menu-item.active{background:var(--accent-v);color:#fff}.cp-menu-note{font-size:.7rem;color:var(--text-muted);padding:8px 10px 2px}.cp-center-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:#0a0a1299;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;transition:var(--transition);z-index:4}.cp-center-play:hover{background:var(--accent-v);border-color:var(--accent-v);transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 34px #7c3aed99}.skip-btn{position:absolute;right:18px;bottom:78px;z-index:6;padding:9px 18px;border-radius:var(--radius-pill);background:#0c0c14d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-bright);color:#fff;font-size:.84rem;font-weight:700;opacity:0;transform:translateY(10px);pointer-events:none;transition:var(--transition);display:flex;align-items:center;gap:6px}.skip-btn.show{opacity:1;transform:translateY(0);pointer-events:auto}.skip-btn:hover{background:var(--accent-v);border-color:var(--accent-v)}.movie-quality-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);margin:10px 0}.movie-quality-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-right:4px}.movie-quality-bar button{padding:5px 14px;border-radius:var(--radius-pill);font-size:.78rem;font-weight:700;background:#ffffff0f;border:1px solid var(--border);color:var(--text-secondary);transition:var(--transition);cursor:pointer}.movie-quality-bar button:hover{border-color:var(--border-bright);color:var(--text-primary)}.movie-quality-bar button.active{background:var(--accent-v);border-color:var(--accent-v);color:#fff}.genre-nav-wrap{position:relative}.row-nav-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:38px;height:38px;border-radius:50%;background:#0a0a12d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-bright);color:var(--text-primary);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);cursor:pointer;box-shadow:0 6px 20px #00000080}.genre-nav-wrap:hover .row-nav-btn{opacity:1}.row-nav-btn:hover{background:var(--accent-v);border-color:var(--accent-v);transform:translateY(-50%) scale(1.08)}.row-nav-btn.prev{left:-14px}.row-nav-btn.next{right:-14px}.cw-subtitle{font-size:.78rem;font-weight:500;color:var(--text-muted)}.cw-card{position:relative;flex-shrink:0;width:250px;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);cursor:pointer;transition:var(--transition);border:1px solid var(--border)}.cw-card:hover{transform:translateY(-4px);border-color:var(--border-bright);box-shadow:var(--shadow-hover)}.cw-poster{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-elevated)}.cw-poster img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.cw-card:hover .cw-poster img{transform:scale(1.06)}.cw-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#08080c8c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:.86rem;font-weight:700}.cw-card:hover .cw-overlay{opacity:1}.cw-overlay svg{width:20px;height:20px}.cw-badge{position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:var(--radius-pill);background:#080808c7;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border);color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.04em}.cw-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:#ffffff29}.cw-progress-fill{height:100%;background:var(--grad-accent);box-shadow:0 0 8px #7c3aed99}.cw-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:#080808cc;border:1px solid var(--border);color:var(--text-secondary);font-size:.9rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);cursor:pointer;padding:0}.cw-card:hover .cw-remove{opacity:1}.cw-remove:hover{background:#e11d48;border-color:#e11d48;color:#fff}.cw-body{padding:10px 12px 12px}.cw-body h3{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}.cw-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.7rem;color:var(--text-muted)}.cw-meta-left{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cw-left{color:var(--accent-v2);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}.spotlight-featured{position:relative;width:100%;min-height:500px;border-radius:16px;overflow:hidden;background:var(--bg-elevated) center/cover no-repeat;border:1px solid var(--border);cursor:pointer;transition:var(--transition)}.spotlight-featured:hover{transform:translateY(-4px);border-color:var(--border-bright);box-shadow:var(--shadow-hover)}.spotlight-featured-grad{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#08080c14,#08080c3d 34%,#08080cb8 75%,#08080ce6)}.spotlight-featured-body{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 24px;z-index:2}.spotlight-featured-meta-row{display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#f8d6d6;opacity:.9;margin-bottom:12px}.spotlight-featured-bubble{display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}.spotlight-featured-bubble-inner{display:flex;flex-direction:column;align-items:flex-start;padding:11px 16px;border-radius:999px;background:#123a8261;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.spotlight-featured-bubble-kicker{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#dbeafe}.spotlight-featured-bubble-title{font-size:1rem;font-weight:800;color:#f2fbff;line-height:1.15}.spotlight-featured-title{font-family:Bebas Neue,Outfit,sans-serif;font-size:clamp(2.2rem,4.6vw,4.4rem);font-weight:400;line-height:.9;margin:0 0 10px;text-shadow:0 8px 30px rgba(0,0,0,.7);letter-spacing:.02em;max-width:52%}.spotlight-featured-caption{max-width:48%;font-size:.9rem;color:#fffc;line-height:1.55;margin-bottom:18px}.spotlight-featured-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.spotlight-featured-btn{position:relative;z-index:2}.spotlight-featured-btn.secondary{background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:#fff}.spotlight-slide{animation:spotFade .5s ease both}@keyframes spotFade{0%{opacity:0;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}.spotlight-nav-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px;border-radius:50%;background:#0808089e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;opacity:.7;transition:var(--transition);cursor:pointer}.spotlight-featured:hover .spotlight-nav-btn{opacity:1}.spotlight-nav-btn:hover{background:var(--accent-v);border-color:var(--accent-v);transform:translateY(-50%) scale(1.08)}.spotlight-nav-btn.prev{left:12px}.spotlight-nav-btn.next{right:12px}.spotlight-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:3}.spotlight-dot{width:7px;height:7px;border-radius:50%;background:#ffffff59;transition:var(--transition);cursor:pointer;padding:0}.spotlight-dot.active{background:var(--accent-v2);width:20px;border-radius:99px;box-shadow:0 0 10px #7c3aed99}.genre-section{padding-top:8px;padding-bottom:12px}.genre-row-wrap{position:relative;display:flex;align-items:center;gap:12px}.genre-row{display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none;padding:6px 0}.genre-row::-webkit-scrollbar{display:none}.genre-pill{padding:8px 16px;border-radius:var(--radius-pill);background:#ffffff09;border:1px solid var(--border);color:var(--text-secondary);font-size:.82rem;font-weight:600;transition:var(--transition);cursor:pointer;white-space:nowrap}.genre-pill:hover{background:#7c3aed1f;border-color:var(--border-bright);color:var(--text-primary)}.home-dashboard{padding-top:4px}.home-layout{display:grid;grid-template-columns:minmax(0,1.9fr) 300px;gap:22px;align-items:start}.home-main-column{display:flex;flex-direction:column;gap:10px}.home-sidebar{display:flex;flex-direction:column;gap:18px;position:sticky;top:88px}.sidebar-panel{background:#ffffff05;border:1px solid var(--border);border-radius:12px;padding:18px 14px}.sidebar-panel h3{font-size:.96rem;font-weight:800;letter-spacing:.02em;margin:0 0 14px}.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.sidebar-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer}.sidebar-list li:last-child{border-bottom:none}.sidebar-rank{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;background:var(--grad-accent);font-size:.72rem;font-weight:800;color:#fff;flex-shrink:0}.sidebar-rank.alt{background:linear-gradient(135deg,#0ea5e9e6,#7c3aede6)}.sidebar-info{display:flex;flex-direction:column;min-width:0}.sidebar-info strong{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-info small{font-size:.67rem;color:var(--text-muted);margin-top:2px}.landing-enter{position:relative;padding:90px 24px;overflow:hidden;text-align:center;border-top:1px solid var(--border)}.landing-enter-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 55% 80% at 50% 110%,rgba(124,58,237,.3) 0%,transparent 65%);pointer-events:none}.landing-enter-inner{position:relative;max-width:560px;margin:0 auto}.landing-enter-label{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-v2);margin-bottom:14px}.landing-enter-title{font-family:Bebas Neue,Outfit,sans-serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:400;line-height:1.05;margin-bottom:12px}.landing-enter-desc{font-size:.95rem;color:var(--text-secondary);line-height:1.7;margin-bottom:26px}.empty{padding:40px;text-align:center;color:var(--text-muted)}.empty .big{font-size:2.6rem;margin-bottom:12px}.empty p{font-size:.9rem}.card-rank{position:absolute;top:8px;left:8px;z-index:2;width:26px;height:26px;border-radius:8px;background:var(--grad-accent);color:#fff;font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px #00000080}.card-type-badge{position:absolute;top:8px;right:8px;z-index:2;padding:3px 9px;border-radius:var(--radius-pill);background:#080808b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border-bright);color:var(--accent-c2);font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.card-type-badge.coming-soon{background:#f59e0b2e;border-color:#f59e0b8c;color:#fcd34d}.card-quick-btn.coming-soon{background:#f59e0be6;color:#1a1205}.card-ep-badge{position:absolute;top:8px;left:8px;z-index:2;padding:3px 9px;border-radius:var(--radius-pill);background:#080808b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.04em}#root .mobile-nav{display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:120;height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#0a0a12f5;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--border);justify-content:space-around;align-items:stretch;box-shadow:0 -16px 34px #0a0a0ea6}#root .mobile-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-muted);font-size:.6rem;font-weight:600;letter-spacing:.02em;transition:var(--transition)}#root .mobile-nav-item.active{color:var(--accent-v2);background:linear-gradient(180deg,#7c3aed1f,#7c3aed05)}#root .mobile-nav-item.active svg{filter:drop-shadow(0 0 8px rgba(124,58,237,.6))}#root .mobile-nav-item:active{transform:scale(.94)}@media (max-width:1024px){.search-wrap{max-width:260px}nav{gap:0}nav a{padding:6px 10px;font-size:.8rem}.container{padding:0 20px}.page-shell{padding-top:calc(var(--header-h) + 24px);padding-bottom:64px}.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 14px}.watch-grid,.info-layout{grid-template-columns:1fr}.watch-sidebar{position:static;max-height:500px}.info-hero-body{flex-direction:column;align-items:flex-start}.spotlight-featured{min-height:340px}}@media (max-width:900px){.main-content{padding-bottom:calc(66px + env(safe-area-inset-bottom))}.home-hero{padding-bottom:110px}.scroll-indicator{bottom:calc(80px + env(safe-area-inset-bottom))}.landing-enter{padding-bottom:120px}}@media (max-width:680px){.container{padding:0 16px}nav{display:none}.page-shell{padding-top:calc(var(--header-h) + 18px);padding-bottom:60px}.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px 12px}.search-shell{gap:12px}#header .container{gap:10px}.logo-wordmark .l{font-size:1.6rem}.search-wrap{display:none}.auth-avatar-btn{padding:5px 7px;gap:0;border-radius:14px}.auth-avatar-btn span,.auth-avatar-btn>svg:last-child{display:none}.auth-avatar-circle{width:30px;height:30px}.auth-dropdown{min-width:220px;max-width:calc(100vw - 24px)}.content-section{padding:26px 0}.section-header{margin-bottom:14px}.section-title{font-size:1.02rem}.section-title:before{height:19px}.scroll-row{gap:10px}.anime-card{width:138px;border-radius:var(--radius-sm)}.skel-card{width:138px}.card-body{padding:8px 9px 10px}.card-title{font-size:.78rem}.cw-card{width:198px}.spotlight-featured{min-height:262px;border-radius:14px}.spotlight-featured-body{padding:12px 12px 38px}.spotlight-featured-score{font-size:.68rem;margin-bottom:4px}.spotlight-featured-title{font-size:1.28rem;margin-bottom:4px}.spotlight-featured-meta{font-size:.7rem;margin-bottom:10px}.spotlight-featured-btn{padding:8px 15px;font-size:.76rem}.spotlight-nav-btn{opacity:1;width:30px;height:30px}.spotlight-nav-btn.prev{left:8px}.spotlight-nav-btn.next{right:8px}.spotlight-dots{bottom:9px;gap:5px}.spotlight-dot{width:6px;height:6px}.spotlight-dot.active{width:16px}.genre-row-wrap,.genre-row{gap:8px}.genre-pill{padding:7px 12px;font-size:.74rem}.home-layout{grid-template-columns:1fr;gap:14px}.home-sidebar{position:static}.sidebar-panel{padding:14px 12px}.btn{padding:10px 18px;font-size:.85rem}.btn-sm{padding:6px 13px;font-size:.78rem}.section-link{font-size:.78rem}.home-hero{padding:calc(var(--header-h) + 30px) 14px 0}.home-hero{padding-bottom:110px}.hero-badge{padding:5px 13px;font-size:.66rem;margin-bottom:22px}.hero-logo-text{font-size:clamp(3.2rem,17vw,5.6rem);margin-bottom:12px}.hero-subtitle{font-size:clamp(1.05rem,3.6vw,1.45rem);margin-bottom:10px}.hero-desc{font-size:.88rem;margin-bottom:22px}.hero-filters{gap:6px;margin-bottom:18px}.hero-filter-pill{padding:6px 14px;font-size:.8rem}.hero-search-input{padding:12px 52px 12px 16px;font-size:.9rem}.hero-search-btn{width:38px;height:38px}.hero-ctas{gap:9px;margin-bottom:32px}.hero-cta{padding:11px 17px;font-size:.84rem;gap:7px}.hero-stat{padding:0 14px}.hero-stat-val{font-size:1.15rem}.hero-stat-label{font-size:.6rem}.library-section{padding:44px 0}.library-header{gap:12px;margin-bottom:20px}.library-header-text{font-size:.62rem}.library-header-line{max-width:90px}.marquee-poster{width:86px;height:120px}.marquee-row{gap:8px}.feature-section{padding:48px 0}.feature-eyebrow{font-size:.7rem;margin-bottom:12px}.feature-heading{font-size:1.7rem;line-height:1.2;margin-bottom:14px}.feature-desc{font-size:.9rem;margin-bottom:26px}.feature-card{padding:18px}.landing-enter{padding:56px 18px 118px}.landing-enter-title{font-size:1.9rem}.landing-enter-desc{font-size:.88rem;margin-bottom:20px}.info-hero{min-height:320px}.info-hero-content{padding:20px 0}.info-hero-body{gap:16px}.info-poster{width:108px}.info-title{font-size:1.7rem;margin-bottom:10px}.info-type-tag{font-size:.72rem;margin-bottom:8px}.info-badges{margin-bottom:12px}.info-genres{gap:6px;margin-bottom:16px}.info-genre-pill{padding:4px 11px;font-size:.74rem}.info-actions{gap:8px}.countdown-wrap{padding:10px 14px;gap:8px;margin-bottom:16px}.countdown-cell{min-width:50px;padding:6px 4px}.countdown-num{font-size:1.05rem}.countdown-unit{font-size:.56rem}.info-body{padding:26px 0 60px}.info-layout{gap:30px}.info-section-label{font-size:1.02rem}.info-synopsis{font-size:.88rem}.info-stat-cell{padding:13px 14px}.char-avatar{width:64px;height:64px}.char-name{font-size:.72rem;max-width:72px}.info-btn-watch{padding:10px 20px}.watch-container{padding:0 12px 60px}.watch-grid{gap:12px;padding-top:8px}.watch-anime-row{flex-wrap:wrap}.watch-info-card{padding:14px 16px}.watch-info-title{font-size:.95rem}.ep-title{font-size:1.1rem;margin-bottom:12px}.prefs-bar{padding:10px 12px;gap:12px}.pref-item{font-size:.78rem}.audio-btn,.server-btn{padding:4px 10px;font-size:.74rem}.audio-notice{margin:10px 0;font-size:.78rem;padding:8px 12px}.watch-anime-name{font-size:.85rem}.sidebar-upnext{font-size:.92rem}.ep-thumb{width:64px;height:40px}.ep-item{padding:6px}.ep-info-title{font-size:.76rem}.ep-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}.movie-quality-bar{padding:10px 12px;gap:6px}.movie-quality-bar button{padding:4px 11px;font-size:.72rem}.movie-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.movie-tabs::-webkit-scrollbar{display:none}.movie-tabs button{white-space:nowrap;padding:7px 16px;font-size:.8rem}.movie-sort button{padding:5px 11px;font-size:.72rem}.load-more-btn{min-width:170px}.cp-controls{padding:10px 8px 8px}.cp-btn{width:34px;height:34px}.cp-vol-slider{width:52px}.cp-time{font-size:.72rem}.cp-menu{right:6px;bottom:52px;min-width:150px}.cp-center-play{width:60px;height:60px}.skip-btn{bottom:72px;right:12px;padding:8px 14px;font-size:.8rem}.auth-overlay{padding:0;align-items:flex-end}.auth-modal{max-width:100%;border-radius:20px 20px 0 0;padding:24px 20px calc(20px + env(safe-area-inset-bottom));animation:sheetUp .25s ease both}@keyframes sheetUp{0%{transform:translateY(44px);opacity:0}to{transform:translateY(0);opacity:1}}}@media (max-width:420px){.anime-card,.skel-card{width:126px}.cw-card{width:172px}.marquee-poster{width:74px;height:104px}.info-poster{width:94px}.hero-logo-text{font-size:3rem}.hero-ctas{flex-direction:column}.hero-cta{width:100%;justify-content:center}.spotlight-featured{min-height:240px}.auth-dropdown{left:12px;right:12px;min-width:0}}#hero{position:relative;height:56vh;min-height:600px;max-height:720px;overflow:hidden;background:var(--bg-base)}#hero .hero-slide{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .7s ease;pointer-events:none;will-change:opacity}#hero .hero-slide.active{opacity:1;pointer-events:auto}#hero .hero-bg{position:absolute;top:0;right:0;bottom:0;left:0}#hero .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center top;transform:scale(1.025);transition:transform 8s ease;filter:saturate(.9) contrast(1.04)}#hero .hero-slide.active .hero-bg img{transform:scale(1)}#hero .hero-gradient{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#06070af5,#06070aa3 40%,#06070a1a 72%),linear-gradient(0deg,rgba(6,7,10,.98) 0%,transparent 52%)}#hero .hero-content{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;padding:calc(var(--header-h) + 20px) 0 72px}#hero .hero-content .container{width:100%}#hero .hero-layout{display:flex;align-items:center;justify-content:space-between;gap:40px;width:100%}#hero .hero-info{max-width:560px;animation:fadeUp .6s ease both}#hero .hero-title-block{display:flex;flex-direction:column;align-items:flex-start;gap:10px}#hero .hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}#hero .hero-title{font-size:clamp(2rem,4vw,3.35rem);font-weight:800;line-height:1.12;letter-spacing:-.035em;margin-bottom:14px;text-wrap:balance}#hero .hero-desc{font-size:.95rem;color:var(--text-secondary);line-height:1.7;margin:0 0 18px;max-width:470px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-align:left}#hero .hero-genres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}#hero .hero-genre-tag{padding:4px 10px;border-radius:var(--radius-pill);background:#ffffff14;border:1px solid rgba(255,255,255,.1);font-size:.75rem;font-weight:600;color:var(--text-secondary);transition:var(--transition)}#hero .hero-genre-tag:hover{background:#7c3aed33;border-color:var(--accent-v);color:var(--accent-v2)}#hero .hero-actions{display:flex;gap:12px;flex-wrap:wrap}#hero .hero-stats{display:flex;gap:20px;margin-bottom:14px;flex-wrap:wrap}#hero .hero-stat{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--text-secondary)}#hero .hero-stat svg{color:var(--accent-v2);flex-shrink:0}#hero .hero-cover-wrap{position:relative;flex-shrink:0;animation:fadeIn .8s ease .3s both}#hero .hero-cover{width:190px;aspect-ratio:2/3;object-fit:cover;border-radius:var(--radius-lg);box-shadow:0 8px 48px #0009,0 0 0 1px var(--border);display:block}#hero .hero-cover-glow{position:absolute;top:-14px;right:-14px;bottom:-14px;left:-14px;border-radius:32px;background:radial-gradient(ellipse at center,rgba(139,92,246,.28),transparent 70%);z-index:-1;animation:glow-pulse 3s ease infinite}#hero .hero-prev,#hero .hero-next{position:absolute;top:50%;z-index:5;width:48px;height:48px;border-radius:50%;background:#0a0a12b8;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-primary);transition:var(--transition);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none}#hero .hero-prev{left:40px;transform:translateY(-50%)}#hero .hero-next{right:40px;transform:translateY(-50%)}#hero:hover .hero-next,#hero:hover .hero-prev{opacity:1;pointer-events:auto}#hero .hero-prev:hover{background:#7c3aed59;border-color:var(--accent-v);transform:translate(-4px,-50%)}#hero .hero-next:hover{background:#7c3aed59;border-color:var(--accent-v);transform:translate(4px,-50%)}#hero .hero-indicators{position:absolute;bottom:25px;left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:5}#hero .hero-dot{width:8px;height:8px;border-radius:99px;background:#ffffff4d;transition:var(--transition)}#hero .hero-dot.active{width:28px;background:var(--accent-v)}.genre-bar{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:14px 0 12px;border-bottom:1px solid var(--border);scrollbar-width:none;margin-bottom:24px}.genre-bar::-webkit-scrollbar{display:none}.genre-pill{flex-shrink:0;padding:6px 14px;border-radius:var(--radius-pill);background:#ffffff0f;border:1px solid rgba(255,255,255,.08);font-size:.8rem;font-weight:500;color:var(--text-secondary);transition:var(--transition);white-space:nowrap}.genre-pill:hover{background:#7c3aed2e;border-color:var(--accent-v);color:var(--accent-v2);transform:translateY(-1px)}.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:start}.home-sections{min-width:0}.home-grid .sidebar-widget{position:sticky;top:calc(var(--header-h) + 16px);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.home-grid .sidebar-tabs{display:flex;gap:16px;padding:14px 16px 0;border-bottom:1px solid var(--border);background:#ffffff05}.home-grid .sidebar-tab{padding:0 0 10px;font-size:.82rem;font-weight:700;text-transform:uppercase;color:var(--text-secondary);border-bottom:2px solid transparent;transition:var(--transition)}.home-grid .sidebar-tab:hover{color:var(--text-primary)}.home-grid .sidebar-tab.active{color:var(--accent-v2);border-bottom-color:var(--accent-v)}.home-grid .sidebar-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;transition:var(--transition);border-bottom:1px solid var(--border);color:inherit;text-align:left}.home-grid .sidebar-item:last-child{border-bottom:none}.home-grid .sidebar-item:hover{background:var(--bg-elevated)}.home-grid .sidebar-thumb{width:50px;height:68px;object-fit:cover;border-radius:6px;flex-shrink:0}.home-grid .sidebar-rank{font-size:.72rem;font-weight:800;color:var(--text-muted);width:18px;flex-shrink:0}.home-grid .sidebar-title{font-size:.86rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-grid .sidebar-meta{font-size:.7rem;color:var(--text-muted);margin-top:4px}.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:22px}@media (max-width:1024px){.home-grid{grid-template-columns:1fr}.home-grid .sidebar-widget{position:static;margin-top:20px}}@media (max-width:680px){#hero{height:620px;min-height:0}#hero .hero-content{align-items:flex-end;padding:calc(var(--header-h) + 18px) 0 58px}#hero .hero-cover-wrap,#hero .hero-prev,#hero .hero-next{display:none}#hero .hero-title{font-size:clamp(1.8rem,9vw,2.5rem)}#hero .hero-desc{-webkit-line-clamp:4;line-clamp:4}#hero .hero-indicators{bottom:22px}.genre-bar{margin-bottom:10px}}@media (max-width:600px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.catalog-grid .anime-card{width:100%}}@media (min-width:601px) and (max-width:768px){.anime-card{width:130px}}@media (max-width:420px){.anime-card{width:126px}}.watch-desc-card{display:flex;gap:18px;align-items:flex-start;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#7c3aed29,#0d0d14f5 38%,#0b0b11fa);border-color:#8b5cf642;box-shadow:0 18px 42px #0003}.watch-desc-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 0 0,rgba(167,139,250,.15),transparent 42%);z-index:-1}.watch-info-poster{width:92px;aspect-ratio:2/3;object-fit:cover;border-radius:10px;box-shadow:0 10px 24px #0000006b;flex-shrink:0}.watch-info-body{min-width:0;flex:1}.watch-info-kicker{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-v2);margin-bottom:5px}.watch-info-title{font-size:1.22rem;font-weight:800;line-height:1.22;letter-spacing:-.02em;margin-bottom:10px}.watch-info-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px}.watch-meta-item,.watch-meta-score{display:inline-flex;align-items:center;min-height:23px;padding:3px 8px;border-radius:999px;background:#ffffff0e;border:1px solid rgba(255,255,255,.075);font-size:.7rem;font-weight:700;color:var(--text-secondary)}.watch-meta-score{color:#fcd34d;background:#f59e0b1a;border-color:#f59e0b33}.watch-meta-dot{display:none}.watch-genres{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 11px}.watch-genre-pill{padding:3px 8px;border-radius:999px;background:#7c3aed21;border:1px solid rgba(124,58,237,.22);color:#c4b5fd;font-size:.68rem;font-weight:700}.watch-synopsis{margin:0;color:var(--text-secondary);font-size:.86rem;line-height:1.62;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}@media (max-width:600px){.watch-desc-card{gap:12px;padding:14px}.watch-info-poster{width:72px;border-radius:8px}.watch-info-title{font-size:1.04rem}.watch-synopsis{-webkit-line-clamp:4;line-clamp:4}}

frontend/dist/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="anidoom - Stream thousands of anime series free in HD. Subbed and dubbed. No ads, no limits." />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Bebas+Neue&family=Rubik+Dirt&display=swap"
+      rel="stylesheet"
+    />
+    <title>anidoom — Anime, Manga, Movies &amp; Music in One Place</title>
+    <script type="module" crossorigin src="/assets/index-BYVU7BLe.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BOX6jOo8.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

frontend/dist/music-api.js

@@ -0,0 +1,151 @@
+// music-api.js — fetchAPI bridge for music.js
+// Connects music.js directly to AnimeThemes API v2.
+
+(function () {
+    const AT = 'https://api.animethemes.moe';
+
+    async function _get(url) {
+        const r = await fetch(url, { headers: { Accept: 'application/json' } });
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json();
+    }
+
+    function normalizeImages(images) {
+        if (!images || !Array.isArray(images)) return [];
+        return images.map(img => {
+            let link = img.link || img.url;
+            if (!link && img.path) link = `https://static.animethemes.moe/${img.path}`;
+            if (!link && img.basename) link = `https://static.animethemes.moe/${img.basename}`;
+            return {
+                facet: img.facet || 'Large Cover',
+                link: link || ''
+            };
+        });
+    }
+
+    function normalizeTheme(t, animeRef) {
+        if (!t) return null;
+        const entries = t.animethemeentries || t.entries || [];
+        const normEntries = entries.map(e => {
+            const videos = e.videos || [];
+            const normVideos = videos.map(v => {
+                let audioLink = v.audio?.link || v.link || v.url;
+                if (!audioLink && v.basename) audioLink = `https://v.animethemes.moe/${v.basename}`;
+                if (!audioLink && v.filename) audioLink = `https://v.animethemes.moe/${v.filename}`;
+                return {
+                    ...v,
+                    audio: { id: v.audio?.id || v.id || t.id || '1', link: audioLink }
+                };
+            });
+            return { ...e, videos: normVideos };
+        });
+        return {
+            ...t,
+            id: t.id || Math.random().toString(36).substring(7),
+            slug: t.slug || `${t.type || 'OP'}${t.sequence || ''}`,
+            type: t.type || 'OP',
+            animethemeentries: normEntries,
+            anime: animeRef || t.anime
+        };
+    }
+
+    function normalizeAnime(a) {
+        if (!a) return null;
+        const rawThemes = a.animethemes || a.themes || [];
+        const animeObj = {
+            id: a.slug || String(a.id),
+            rawId: a.id,
+            name: a.name || a.title || a.name_jp || 'Anime',
+            slug: a.slug || String(a.id),
+            year: a.year || (a.season ? a.season : ''),
+            media_format: a.media_format || a.format || 'TV',
+            images: normalizeImages(a.images)
+        };
+        animeObj.animethemes = rawThemes.map(t => normalizeTheme(t, animeObj));
+        return animeObj;
+    }
+
+    function normalizeArtist(art) {
+        if (!art) return null;
+        return {
+            id: art.slug || String(art.id),
+            name: art.name || 'Artist',
+            slug: art.slug || String(art.id),
+            images: normalizeImages(art.images),
+            songs: art.songs || []
+        };
+    }
+
+    async function fetchAPI(path) {
+        try {
+            // /themes/search?q=<q>
+            if (path.startsWith('/themes/search')) {
+                const q = new URL(path, 'https://x').searchParams.get('q') || '';
+                const data = await _get(`${AT}/search?q=${encodeURIComponent(q)}&include[anime]=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`);
+                const list = (data.search?.anime || data.anime || []).map(normalizeAnime);
+                return { anime: list };
+            }
+
+            // /themes/anime/<id_or_slug>
+            if (path.startsWith('/themes/anime/')) {
+                const param = decodeURIComponent(path.replace('/themes/anime/', '').split('?')[0]);
+                let rawAnime = null;
+
+                // 1. Direct slug endpoint fetch with full relations
+                const data = await _get(`${AT}/anime/${encodeURIComponent(param)}?include=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`).catch(() => null);
+                if (data?.anime) rawAnime = data.anime;
+                else if (data?.data) rawAnime = Array.isArray(data.data) ? data.data[0] : data.data;
+
+                // 2. Filter search if direct fetch failed
+                if (!rawAnime) {
+                    const filterData = await _get(`${AT}/anime?filter[slug]=${encodeURIComponent(param)}&include=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`).catch(() => null)
+                        || await _get(`${AT}/anime?filter[anilist_id]=${encodeURIComponent(param)}&include=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`).catch(() => null);
+                    const list = filterData?.anime || filterData?.data || [];
+                    if (list.length) rawAnime = list[0];
+                }
+
+                return { anime: rawAnime ? normalizeAnime(rawAnime) : null };
+            }
+
+            // /themes/artist/<slug>
+            if (path.startsWith('/themes/artist/')) {
+                const slug = decodeURIComponent(path.replace('/themes/artist/', '').split('?')[0]);
+                const data = await _get(`${AT}/artist/${encodeURIComponent(slug)}?include=animethemes.anime.images,animethemes.song`).catch(() => null);
+                const raw = data?.artist || (Array.isArray(data?.data) ? data.data[0] : data?.data);
+                return { artist: raw ? normalizeArtist(raw) : null };
+            }
+
+            // /themes/artists or /themes/top-artists
+            if (path.startsWith('/themes/artists') || path.startsWith('/themes/top-artists')) {
+                const data = await _get(`${AT}/artist?page[size]=24&include=images`);
+                const list = data?.artist || data?.data || [];
+                return { artists: list.map(normalizeArtist) };
+            }
+
+            // /themes/recent
+            if (path.startsWith('/themes/recent')) {
+                const data = await _get(`${AT}/anime?sort=-created_at&page[size]=24&include=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`);
+                const list = data?.anime || data?.data || [];
+                return { anime: list.map(normalizeAnime) };
+            }
+
+            // /themes/year/<year>
+            if (path.startsWith('/themes/year/')) {
+                const year = decodeURIComponent(path.replace('/themes/year/', '').split('?')[0]);
+                const data = await _get(`${AT}/anime?filter[year]=${year}&sort=name&page[size]=24&include=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`);
+                const list = data?.anime || data?.data || [];
+                return { anime: list.map(normalizeAnime) };
+            }
+
+            // Default home discover feed
+            const defaultData = await _get(`${AT}/anime?page[size]=24&include=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`);
+            const defaultList = defaultData?.anime || defaultData?.data || [];
+            return { anime: defaultList.map(normalizeAnime) };
+        } catch (e) {
+            console.error('[music-api] fetch error:', e);
+            return { anime: null, artists: [] };
+        }
+    }
+
+    window.fetchAPI = fetchAPI;
+})();

frontend/dist/music.css

@@ -0,0 +1,2197 @@
+
+:root {
+    --ms-bg: #0a0a0f;
+    --ms-sidebar: #000000;
+    --ms-surface: #121218;
+    --ms-surface-2: #1a1a22;
+    --ms-surface-3: #232330;
+    --ms-text: #ffffff;
+    --ms-text-dim: #a0a0b8;
+    --ms-text-mute: #6a6a82;
+    --ms-divider: rgba(255, 255, 255, 0.07);
+    --ms-accent: #7c3aed;
+    --ms-accent-hot: #9d6ef8;
+    --ms-accent-soft: rgba(124, 58, 237, 0.18);
+}
+
+.music-body {
+    overflow: hidden;
+    background:
+      radial-gradient(circle at top, rgba(124,58,237,0.22), transparent 22%),
+      linear-gradient(180deg, #07070d 0%, #090910 100%);
+}
+
+.music-body .float-nav { display: none !important; }
+
+.music-body #mobile-nav { display: none !important; }
+
+.music-body #header {
+    background: rgba(0, 0, 0, 0.92);
+    border-bottom: 1px solid var(--ms-divider);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+}
+
+.music-app {
+    position: fixed;
+    top: var(--header-h);
+    left: 0;
+    right: 0;
+    bottom: 92px;
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 8px;
+    padding: 8px;
+    background: #000;
+    transition: top 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+                bottom 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+                grid-template-columns 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.music-body #header {
+    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+    will-change: transform;
+}
+.music-body #header.is-hidden {
+    transform: translateY(-100%);
+}
+.music-body.header-hidden .music-app {
+    top: 0;
+}
+
+@media (max-width: 1024px) {
+    .music-body .music-sidebar {
+        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+                    top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .music-body.header-hidden .music-sidebar { top: 0; }
+}
+
+@media (min-width: 1025px) {
+    .music-app.sb-collapsed {
+        grid-template-columns: 0 1fr;
+        gap: 0;
+    }
+    .music-app.sb-collapsed .music-sidebar {
+        transform: translateX(-110%);
+        opacity: 0;
+        pointer-events: none;
+    }
+    .music-sidebar {
+        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+                    opacity 0.22s ease;
+        will-change: transform;
+    }
+    .ms-sidebar-toggle { display: flex; }
+}
+
+.music-body.pb-hidden .music-app { bottom: 0; }
+.music-body.pb-hidden .player-bar { display: none; }
+
+.music-sidebar {
+    background: var(--ms-sidebar);
+    border-radius: 10px;
+    padding: 16px 12px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+}
+
+.music-sidebar::-webkit-scrollbar { width: 8px; }
+.music-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 4px; }
+
+.ms-block { margin-bottom: 22px; }
+
+.ms-block-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--ms-text-dim);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding: 6px 10px 10px;
+}
+.ms-block-title svg { width: 16px; height: 16px; }
+
+.ms-link {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 10px 12px;
+    border-radius: 6px;
+    color: var(--ms-text-dim);
+    font-size: 0.92rem;
+    font-weight: 600;
+    transition: color 0.15s ease, background 0.15s ease;
+    cursor: pointer;
+}
+.ms-link svg { width: 20px; height: 20px; flex-shrink: 0; }
+.ms-link:hover { color: #fff; background: transparent; }
+.ms-link.active { color: #fff; background: var(--ms-surface-2); }
+.ms-link.active svg { color: var(--ms-accent-hot); }
+
+.ms-year-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 6px;
+    padding: 4px 6px;
+}
+.ms-year-grid a {
+    background: var(--ms-surface-2);
+    border-radius: 6px;
+    padding: 9px 10px;
+    text-align: center;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--ms-text-dim);
+    transition: color 0.15s, background 0.15s;
+}
+.ms-year-grid a:hover {
+    background: var(--ms-surface-3);
+    color: #fff;
+}
+
+.music-main {
+    background: linear-gradient(180deg, #1a1228 0, #0e0e14 320px, var(--ms-surface) 100%);
+    border-radius: 10px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+}
+.music-main::-webkit-scrollbar { width: 12px; }
+.music-main::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 6px; }
+.music-main::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
+
+.ms-topbar {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px 24px;
+    background: rgba(10, 10, 16, 0.65);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+}
+
+.ms-nav-btn {
+    width: 32px; height: 32px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    display: flex; align-items: center; justify-content: center;
+    transition: background 0.15s, transform 0.15s;
+    flex-shrink: 0;
+}
+.ms-nav-btn svg { width: 14px; height: 14px; }
+.ms-nav-btn:hover:not([disabled]) { background: #000; transform: scale(1.06); }
+.ms-nav-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
+
+.ms-search {
+    position: relative;
+    flex: 1;
+    max-width: 360px;
+    display: flex;
+    align-items: center;
+}
+.ms-search-icon {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #1a1a22;
+    display: flex;
+    pointer-events: none;
+}
+.ms-search-icon svg { width: 18px; height: 18px; }
+
+.ms-search input {
+    width: 100%;
+    padding: 11px 40px 11px 42px;
+    background: #fff;
+    border: 2px solid transparent;
+    border-radius: 999px;
+    color: #1a1a22;
+    font-family: 'Outfit', sans-serif;
+    font-size: 0.92rem;
+    font-weight: 500;
+    outline: none;
+    transition: box-shadow 0.15s;
+}
+.ms-search input::placeholder { color: #6a6a82; font-weight: 500; }
+.ms-search input:focus {
+    box-shadow: 0 0 0 2px var(--ms-accent);
+}
+
+.ms-search-clear {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 26px; height: 26px;
+    border-radius: 50%;
+    color: #1a1a22;
+    display: flex; align-items: center; justify-content: center;
+    transition: background 0.15s;
+}
+.ms-search-clear svg { width: 14px; height: 14px; }
+.ms-search-clear:hover { background: rgba(0, 0, 0, 0.08); }
+
+.ms-sidebar-toggle {
+    display: flex;
+    width: 38px; height: 38px;
+    border-radius: 10px;
+    color: #fff;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    align-items: center; justify-content: center;
+    margin: 0;
+
+    order: -1;
+    flex-shrink: 0;
+    transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
+    cursor: pointer;
+}
+.ms-sidebar-toggle:hover {
+    background: rgba(167, 139, 250, 0.18);
+    border-color: rgba(167, 139, 250, 0.35);
+    transform: scale(1.04);
+}
+.ms-sidebar-toggle:active { transform: scale(0.94); }
+.ms-sidebar-toggle svg { width: 20px; height: 20px; }
+
+.music-app.sb-collapsed .ms-sidebar-toggle svg { transform: rotate(180deg); transition: transform 0.22s ease; }
+
+.ms-view {
+    padding: 0 24px 40px;
+    min-height: calc(100% - 70px);
+}
+
+.ms-section-title {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 14px;
+    margin: 30px 0 16px;
+}
+.ms-section-title h2 {
+    font-size: 1.5rem;
+    font-weight: 800;
+    letter-spacing: -0.01em;
+    color: #fff;
+}
+.ms-section-title a {
+    color: var(--ms-text-dim);
+    font-size: 0.78rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    transition: color 0.15s;
+}
+.ms-section-title a:hover { color: #fff; text-decoration: underline; }
+
+.ms-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 24px;
+}
+
+.ms-card {
+    background: var(--ms-surface);
+    border-radius: 8px;
+    padding: 16px;
+    transition: background 0.2s ease;
+    cursor: pointer;
+    position: relative;
+    text-align: left;
+    isolation: isolate;
+}
+.ms-card:hover { background: var(--ms-surface-2); }
+.ms-card:hover .ms-card-play {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.ms-card-cover-wrap {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: 6px;
+    overflow: hidden;
+    background: var(--ms-surface-2);
+    margin-bottom: 14px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+
+    contain: layout paint;
+    flex-shrink: 0;
+}
+.ms-card.is-artist .ms-card-cover-wrap {
+    border-radius: 50%;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
+}
+
+.ms-card-cover {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.4s ease;
+}
+
+.ms-card-cover-fallback {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--ms-accent), #2a1656);
+    color: #fff;
+}
+.ms-card-cover-fallback svg { width: 48px; height: 48px; opacity: 0.7; }
+
+.ms-card-play {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    width: 48px; height: 48px;
+    border-radius: 50%;
+    background: var(--ms-accent);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    transform: translateY(8px);
+    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, scale 0.12s;
+    z-index: 2;
+}
+.ms-card-play svg { width: 22px; height: 22px; transform: translateX(1px); }
+.ms-card-play:hover { background: var(--ms-accent-hot); transform: translateY(0) scale(1.06); }
+.ms-card-play:active { transform: translateY(0) scale(0.96); }
+
+.ms-card-title {
+    font-size: 1rem;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    line-clamp: 1;
+}
+.ms-card-sub {
+    font-size: 0.85rem;
+    color: var(--ms-text-dim);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-clamp: 2;
+    line-height: 1.4;
+}
+
+.ms-empty {
+    padding: 60px 20px;
+    text-align: center;
+    color: var(--ms-text-dim);
+}
+.ms-empty svg { width: 56px; height: 56px; margin-bottom: 14px; opacity: 0.4; }
+.ms-empty h3 { font-size: 1.4rem; color: #fff; margin-bottom: 8px; font-weight: 800; }
+.ms-empty p { font-size: 0.95rem; }
+
+.ms-loading {
+    padding: 80px 20px;
+    text-align: center;
+    color: var(--ms-text-dim);
+}
+.ms-spinner {
+    width: 36px; height: 36px;
+    border: 3px solid rgba(124, 58, 237, 0.18);
+    border-top-color: var(--ms-accent);
+    border-radius: 50%;
+    margin: 0 auto 16px;
+    animation: msSpin 0.8s linear infinite;
+}
+@keyframes msSpin { to { transform: rotate(360deg); } }
+
+.ms-album-hero {
+    display: flex;
+    gap: 28px;
+    align-items: flex-end;
+    padding: 36px 0 24px;
+}
+
+.ms-album-cover {
+    width: 232px; height: 232px;
+    border-radius: 6px;
+    overflow: hidden;
+    flex-shrink: 0;
+    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.85);
+    background: linear-gradient(135deg, var(--ms-accent), #2a1656);
+}
+.ms-album-cover img { width: 100%; height: 100%; object-fit: cover; }
+
+.ms-album-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.ms-album-eyebrow {
+    font-size: 0.78rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #fff;
+}
+.ms-album-title {
+    font-size: clamp(2rem, 6vw, 4rem);
+    font-weight: 900;
+    color: #fff;
+    line-height: 1.05;
+    letter-spacing: -0.03em;
+    margin: 4px 0 8px;
+    word-break: break-word;
+}
+.ms-album-meta { color: var(--ms-text-dim); font-size: 0.9rem; }
+.ms-album-meta strong { color: #fff; font-weight: 700; }
+
+.ms-album-actions {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    padding: 24px 0 10px;
+}
+.ms-play-big {
+    width: 60px; height: 60px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--ms-accent) 0%, var(--ms-accent-hot) 100%);
+    color: #fff;
+    display: flex; align-items: center; justify-content: center;
+    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
+                box-shadow 0.18s ease,
+                filter 0.18s ease;
+    box-shadow: 0 10px 28px rgba(167, 139, 250, 0.45),
+                0 4px 12px rgba(0, 0, 0, 0.5),
+                inset 0 1px 0 rgba(255, 255, 255, 0.25);
+    position: relative;
+    overflow: hidden;
+}
+.ms-play-big::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), transparent 55%);
+    pointer-events: none;
+}
+.ms-play-big svg { width: 28px; height: 28px; transform: translateX(2px); position: relative; z-index: 1; }
+.ms-play-big:hover {
+    transform: scale(1.08) translateY(-1px);
+    filter: brightness(1.08);
+    box-shadow: 0 14px 36px rgba(167, 139, 250, 0.6),
+                0 6px 14px rgba(0, 0, 0, 0.55),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+.ms-play-big:active { transform: scale(0.95); transition-duration: 0.08s; }
+.ms-play-big:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.5),
+                0 10px 28px rgba(167, 139, 250, 0.45),
+                0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.ms-icon-btn {
+    width: 38px; height: 38px;
+    border-radius: 50%;
+    color: var(--ms-text-dim);
+    display: flex; align-items: center; justify-content: center;
+    transition: color 0.12s, transform 0.12s;
+}
+.ms-icon-btn svg { width: 24px; height: 24px; }
+.ms-icon-btn:hover { color: #fff; transform: scale(1.05); }
+.ms-icon-btn.is-on { color: var(--ms-accent-hot); }
+.ms-icon-btn.is-on svg { fill: currentColor; }
+
+.ms-tracks {
+    margin-top: 8px;
+    padding-bottom: 16px;
+}
+.ms-tracks-head {
+    display: grid;
+    grid-template-columns: 36px 1fr 0.8fr 100px 60px;
+    gap: 14px;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--ms-divider);
+    margin-bottom: 8px;
+    color: var(--ms-text-dim);
+    font-size: 0.74rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-weight: 600;
+}
+
+.ms-track {
+    display: grid;
+    grid-template-columns: 36px 1fr 0.8fr 100px 60px;
+    gap: 14px;
+    align-items: center;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.12s ease;
+    color: var(--ms-text-dim);
+    position: relative;
+}
+.ms-track:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
+.ms-track:hover .ms-track-num .ms-num { display: none; }
+.ms-track:hover .ms-track-num .ms-play-mini { display: flex; }
+.ms-track.is-playing { color: var(--ms-accent-hot); }
+.ms-track.is-playing .ms-track-title { color: var(--ms-accent-hot); }
+
+.ms-track-num {
+    text-align: center;
+    font-size: 0.95rem;
+    color: var(--ms-text-dim);
+    width: 36px; height: 36px;
+    display: flex; align-items: center; justify-content: center;
+}
+.ms-track-num .ms-play-mini { display: none; color: #fff; }
+.ms-track-num .ms-play-mini svg { width: 16px; height: 16px; fill: currentColor; }
+.ms-track.is-playing .ms-num { display: none; }
+.ms-track.is-playing .ms-now-bars { display: flex; }
+.ms-now-bars { display: none; gap: 2px; align-items: flex-end; height: 14px; }
+.ms-now-bars span {
+    display: block; width: 3px; background: var(--ms-accent-hot); border-radius: 1px;
+    animation: msBar 0.8s ease-in-out infinite alternate;
+}
+.ms-now-bars span:nth-child(1) { animation-delay: -0.5s; }
+.ms-now-bars span:nth-child(2) { animation-delay: -0.2s; }
+.ms-now-bars span:nth-child(3) { animation-delay: -0.8s; }
+@keyframes msBar { from { height: 4px; } to { height: 14px; } }
+
+.ms-track-meta { display: flex; gap: 12px; align-items: center; min-width: 0; }
+.ms-track-cover {
+    width: 40px; height: 40px;
+    border-radius: 4px;
+    object-fit: cover;
+    background: var(--ms-surface-2);
+    flex-shrink: 0;
+}
+.ms-track-text { min-width: 0; }
+.ms-track-title {
+    color: #fff;
+    font-size: 0.95rem;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ms-track-sub {
+    color: var(--ms-text-dim);
+    font-size: 0.82rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ms-track-sub a { transition: color 0.12s; }
+.ms-track-sub a:hover { color: #fff; text-decoration: underline; }
+
+.ms-track-anime {
+    color: var(--ms-text-dim);
+    font-size: 0.85rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ms-track-anime:hover { color: #fff; text-decoration: underline; }
+
+.ms-track-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 10px;
+    border-radius: 999px;
+    background: rgba(124, 58, 237, 0.18);
+    border: 1px solid rgba(124, 58, 237, 0.32);
+    color: #c4b5fd;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    width: fit-content;
+}
+.ms-track-tag.ed { background: rgba(190, 24, 93, 0.16); border-color: rgba(190, 24, 93, 0.4); color: #f9a8d4; }
+.ms-track-tag.in { background: rgba(34, 197, 94, 0.13); border-color: rgba(34, 197, 94, 0.35); color: #86efac; }
+
+.ms-track-like {
+    width: 28px; height: 28px;
+    color: var(--ms-text-dim);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.12s, transform 0.12s, opacity 0.12s;
+    opacity: 0;
+}
+.ms-track-like svg { width: 16px; height: 16px; }
+.ms-track:hover .ms-track-like { opacity: 1; }
+.ms-track-like.is-liked { color: var(--ms-accent-hot); opacity: 1; }
+.ms-track-like.is-liked svg { fill: currentColor; }
+.ms-track-like:hover { color: #fff; transform: scale(1.1); }
+
+.ms-search-tabs {
+    display: flex;
+    gap: 8px;
+    padding: 18px 0 6px;
+    flex-wrap: wrap;
+}
+.ms-tab {
+    padding: 8px 18px;
+    border-radius: 999px;
+    background: var(--ms-surface-2);
+    color: #fff;
+    font-size: 0.86rem;
+    font-weight: 600;
+    transition: background 0.15s, color 0.15s;
+    cursor: pointer;
+}
+.ms-tab:hover { background: var(--ms-surface-3); }
+.ms-tab.active { background: #fff; color: #000; }
+
+.ms-search-block { margin-bottom: 36px; }
+
+.ms-top-result {
+    display: grid;
+    grid-template-columns: 1.05fr 1.6fr;
+    gap: 24px;
+    align-items: stretch;
+    margin: 6px 0 30px;
+}
+@media (max-width: 900px) {
+    .ms-top-result { grid-template-columns: 1fr; }
+}
+
+.ms-top-card {
+    display: grid;
+    grid-template-columns: 120px 1fr;
+    grid-template-rows: auto auto auto 1fr;
+    grid-template-areas:
+        "cover name"
+        "cover tag"
+        "cover ."
+        "play  .";
+    column-gap: 22px;
+    row-gap: 8px;
+    background: var(--ms-surface);
+    border-radius: 10px;
+    padding: 22px;
+    transition: background 0.2s;
+    cursor: pointer;
+    position: relative;
+    min-height: 220px;
+    overflow: hidden;
+}
+.ms-top-card:hover { background: var(--ms-surface-2); }
+.ms-top-card:hover .ms-top-play { opacity: 1; transform: translateY(0); }
+
+.ms-top-cover {
+    grid-area: cover;
+    width: 120px; height: 120px;
+    border-radius: 6px;
+    object-fit: cover;
+    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
+    align-self: start;
+}
+.ms-top-card.is-artist .ms-top-cover { border-radius: 50%; }
+.ms-top-card .ms-top-name { grid-area: name; align-self: end; margin: 0; }
+.ms-top-card .ms-top-tag { grid-area: tag; justify-self: start; }
+
+.ms-top-play {
+    grid-area: play;
+    justify-self: end;
+    align-self: end;
+    width: 56px; height: 56px;
+    border-radius: 50%;
+    background: var(--ms-accent);
+    color: #fff;
+    display: flex; align-items: center; justify-content: center;
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
+    opacity: 0;
+    transform: translateY(8px);
+    transition: opacity 0.18s, transform 0.18s, background 0.18s;
+    z-index: 2;
+}
+.ms-top-play:hover { background: var(--ms-accent-hot); transform: translateY(0) scale(1.06); }
+.ms-top-play svg { width: 26px; height: 26px; transform: translateX(1px); }
+
+@media (max-width: 720px) {
+    .ms-top-card {
+        grid-template-columns: 84px 1fr;
+        grid-template-areas:
+            "cover name"
+            "cover tag"
+            "play  play";
+        column-gap: 16px;
+        padding: 16px;
+        min-height: auto;
+    }
+    .ms-top-cover { width: 84px; height: 84px; }
+    .ms-top-card .ms-top-name { font-size: 1.4rem; }
+    .ms-top-play { opacity: 1; transform: none; width: 48px; height: 48px; margin-top: 6px; }
+    .ms-top-play svg { width: 22px; height: 22px; }
+}
+.ms-top-name {
+    font-size: 2rem;
+    font-weight: 900;
+    color: #fff;
+    margin-bottom: 10px;
+    line-height: 1.05;
+    letter-spacing: -0.02em;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-clamp: 2;
+}
+.ms-top-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 5px 12px;
+    background: rgba(0, 0, 0, 0.55);
+    border-radius: 4px;
+    color: #fff;
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.ms-top-songs {
+    background: transparent;
+    border-radius: 8px;
+    padding: 0;
+}
+.ms-top-songs h3 {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: #fff;
+    margin: 0 0 12px;
+    letter-spacing: -0.01em;
+}
+
+.ms-songlist { display: flex; flex-direction: column; }
+.ms-song-row {
+    display: grid;
+    grid-template-columns: 40px 1fr 28px;
+    gap: 14px;
+    align-items: center;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.12s;
+}
+.ms-song-row:hover { background: var(--ms-surface-2); }
+.ms-song-row.is-playing .ms-song-title { color: var(--ms-accent-hot); }
+
+.ms-song-cover {
+    width: 40px; height: 40px;
+    border-radius: 4px;
+    object-fit: cover;
+    background: var(--ms-surface-2);
+    flex-shrink: 0;
+    position: relative;
+}
+.ms-song-cover-wrap {
+    position: relative;
+    width: 40px; height: 40px;
+    flex-shrink: 0;
+}
+.ms-song-cover-wrap .ms-song-play {
+    position: absolute;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    border-radius: 4px;
+}
+.ms-song-cover-wrap .ms-song-play svg { width: 16px; height: 16px; }
+.ms-song-row:hover .ms-song-play { display: flex; }
+
+.ms-song-text { min-width: 0; }
+.ms-song-title {
+    color: #fff;
+    font-size: 0.92rem;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ms-song-sub {
+    color: var(--ms-text-dim);
+    font-size: 0.8rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ms-song-sub a:hover { color: #fff; text-decoration: underline; }
+
+.ms-song-like {
+    width: 28px; height: 28px;
+    color: var(--ms-text-dim);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.12s, opacity 0.12s, transform 0.12s;
+    opacity: 0;
+}
+.ms-song-like svg { width: 16px; height: 16px; }
+.ms-song-row:hover .ms-song-like { opacity: 1; }
+.ms-song-like.is-liked { color: var(--ms-accent-hot); opacity: 1; }
+.ms-song-like.is-liked svg { fill: currentColor; }
+
+.player-bar {
+    position: fixed;
+    left: 0; right: 0; bottom: 0;
+    height: 90px;
+    background: #000;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    display: grid;
+    grid-template-columns: minmax(180px, 30%) 1fr minmax(180px, 30%);
+    align-items: center;
+    padding: 0 16px;
+    gap: 16px;
+    z-index: 100;
+    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.6);
+}
+.player-bar[data-empty="1"] .pb-controls,
+.player-bar[data-empty="1"] .pb-progress,
+.player-bar[data-empty="1"] .pb-like { opacity: 0.5; pointer-events: none; }
+
+.pb-track {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    min-width: 0;
+}
+.pb-cover {
+    width: 56px; height: 56px;
+    border-radius: 4px;
+    background: var(--ms-surface-2);
+    object-fit: cover;
+    flex-shrink: 0;
+}
+
+.pb-cover:not([src]),
+.pb-cover[src=""],
+.pb-cover.is-failed {
+    visibility: hidden;
+}
+.player-bar[data-empty="1"] .pb-cover {
+    visibility: hidden;
+}
+
+.pb-cover-fallback {
+    position: absolute;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #432470 0%, #1a0f33 100%);
+    color: rgba(255, 255, 255, 0.7);
+    border-radius: 4px;
+}
+.pb-cover-fallback svg { width: 22px; height: 22px; }
+.pb-cover-btn:not(.has-cover) .pb-cover-fallback,
+.player-bar[data-empty="1"] .pb-cover-fallback { display: flex; }
+
+.pb-dismiss {
+    width: 28px; height: 28px;
+    color: var(--ms-text-mute);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.15s, background 0.15s;
+    flex-shrink: 0;
+}
+.pb-dismiss svg { width: 14px; height: 14px; }
+.pb-dismiss:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
+.pb-meta { min-width: 0; flex: 1; }
+.pb-title {
+    color: #fff;
+    font-size: 0.9rem;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    transition: color 0.12s;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+    font-family: inherit;
+}
+.pb-title:hover { text-decoration: underline; }
+.pb-artist {
+    color: var(--ms-text-dim);
+    font-size: 0.74rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    transition: color 0.12s;
+}
+.pb-artist:hover { color: #fff; text-decoration: underline; }
+.pb-like {
+    width: 32px; height: 32px;
+    color: var(--ms-text-dim);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.12s, transform 0.12s;
+    flex-shrink: 0;
+}
+.pb-like svg { width: 18px; height: 18px; }
+.pb-like:hover { color: #fff; transform: scale(1.1); }
+.pb-like.is-liked { color: var(--ms-accent-hot); }
+.pb-like.is-liked svg { fill: currentColor; }
+
+.pb-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    max-width: 720px;
+    margin: 0 auto;
+}
+
+.pb-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 18px;
+}
+
+.pb-btn {
+    width: 32px; height: 32px;
+    color: var(--ms-text-dim);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.12s, transform 0.12s;
+}
+.pb-btn svg { width: 20px; height: 20px; }
+.pb-btn:hover { color: #fff; transform: scale(1.08); }
+.pb-btn.is-on { color: var(--ms-accent-hot); }
+.pb-btn.is-on::after {
+    content: "";
+    width: 4px; height: 4px;
+    background: var(--ms-accent-hot);
+    border-radius: 50%;
+    position: absolute;
+    margin-top: 30px;
+}
+
+.pb-play {
+    width: 38px; height: 38px;
+    border-radius: 50%;
+    background: #fff;
+    color: #000;
+    display: flex; align-items: center; justify-content: center;
+    transition: transform 0.12s, background 0.15s;
+}
+.pb-play svg { width: 22px; height: 22px; }
+.pb-play:hover { transform: scale(1.07); background: #f1eaff; }
+.pb-play:active { transform: scale(0.96); }
+.player-bar[data-empty="1"] .pb-play { opacity: 0.6; }
+
+.pb-progress {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 0 12px;
+}
+.pb-time {
+    font-size: 0.7rem;
+    color: var(--ms-text-dim);
+    font-variant-numeric: tabular-nums;
+    width: 38px;
+    text-align: center;
+    flex-shrink: 0;
+}
+.pb-bar {
+    flex: 1;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.18);
+    border-radius: 2px;
+    position: relative;
+    cursor: pointer;
+    transition: height 0.12s;
+}
+.pb-bar:hover { height: 6px; }
+.pb-bar:hover .pb-bar-fill { background: var(--ms-accent-hot); }
+.pb-bar:hover .pb-bar-knob { opacity: 1; }
+.pb-bar-fill {
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    width: 0%;
+    background: #fff;
+    border-radius: 2px;
+    transition: background 0.12s;
+}
+.pb-bar-knob {
+    position: absolute;
+    top: 50%;
+    width: 12px; height: 12px;
+    background: #fff;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 0.12s;
+    pointer-events: none;
+}
+
+.pb-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+}
+.pb-mobile-play { display: none; }
+.pb-vol {
+    width: 100px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.18);
+    border-radius: 2px;
+    position: relative;
+    cursor: pointer;
+}
+.pb-vol:hover .pb-bar-fill { background: var(--ms-accent-hot); }
+.pb-vol:hover .pb-bar-knob { opacity: 1; }
+
+.ms-sidebar-backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 60;
+    opacity: 0;
+    transition: opacity 0.22s ease;
+}
+.ms-sidebar-backdrop.active {
+    display: block;
+    opacity: 1;
+}
+
+@media (hover: none), (max-width: 800px) {
+    .ms-card-play {
+        opacity: 1;
+        transform: translateY(0);
+        width: 44px; height: 44px;
+        right: 8px; bottom: 8px;
+    }
+    .ms-card-play svg { width: 18px; height: 18px; }
+    .ms-track-like { opacity: 1; }
+    .ms-song-like { opacity: 1; }
+    .ms-song-cover-wrap .ms-song-play { display: none; }
+}
+
+@media (max-width: 1024px) {
+    .music-app { grid-template-columns: 1fr; }
+    .music-sidebar {
+        position: fixed;
+        top: var(--header-h);
+        left: 0;
+        bottom: 92px;
+        width: 280px;
+        z-index: 80;
+        margin: 8px;
+        transform: translateX(-110%);
+        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+        pointer-events: none;
+    }
+    .music-sidebar.open {
+        transform: translateX(0);
+        pointer-events: auto;
+    }
+
+    .music-sidebar.open .ms-link,
+    .music-sidebar.open .ms-year-grid a,
+    .music-sidebar.open .ms-block-title { pointer-events: auto; }
+
+    .music-sidebar .ms-link { padding: 12px 14px; font-size: 0.98rem; }
+
+    .music-sidebar .ms-link,
+    .music-sidebar .ms-year-grid a,
+    .ms-sidebar-toggle {
+        touch-action: manipulation;
+        -webkit-tap-highlight-color: rgba(167, 139, 250, 0.18);
+    }
+    .ms-sidebar-toggle { display: flex; }
+    .ms-sidebar-backdrop { z-index: 70; }
+}
+
+@media (max-width: 800px) {
+    .ms-album-hero {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 18px;
+        padding: 16px 0;
+    }
+    .ms-album-cover { width: 180px; height: 180px; align-self: center; }
+    .ms-album-info { align-items: flex-start; text-align: left; width: 100%; }
+    .ms-tracks-head, .ms-track {
+        grid-template-columns: 36px 1fr 56px;
+    }
+    .ms-tracks-head .ms-th-anime, .ms-tracks-head .ms-th-tag,
+    .ms-track .ms-track-anime, .ms-track .ms-track-tag-cell { display: none; }
+    .ms-view { padding: 0 14px 24px; }
+    .ms-topbar { padding: 12px 14px; gap: 8px; }
+    .ms-search { max-width: none; }
+    .ms-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
+    .ms-top-name { font-size: 1.5rem; }
+}
+
+@media (max-width: 720px) {
+    .player-bar {
+        height: 64px;
+        grid-template-columns: 1fr auto;
+        padding: 0 10px;
+        gap: 10px;
+        bottom: 0;
+        border-radius: 0;
+    }
+    .pb-cover-btn { width: 44px; height: 44px; }
+    .pb-cover { width: 44px; height: 44px; }
+    .pb-title { font-size: 0.86rem; }
+    .pb-artist { font-size: 0.72rem; }
+    .pb-like, .pb-center { display: none; }
+    .pb-mobile-play {
+        display: flex;
+        width: 40px; height: 40px;
+        color: #fff;
+        background: transparent;
+        border-radius: 50%;
+    }
+    .pb-mobile-play svg { width: 24px; height: 24px; }
+    .pb-right .pb-btn:not(#pb-play-mobile), .pb-right .pb-vol { display: none; }
+    .music-app {
+        bottom: 64px;
+        padding: 6px;
+        gap: 6px;
+        top: 10px;
+    }
+    .music-sidebar { bottom: 64px; }
+    .player-bar[data-empty="1"] { display: none; }
+    body.music-body:has(.player-bar[data-empty="1"]) .music-app,
+    body.music-body:has(.player-bar[data-empty="1"]) .music-sidebar {
+        bottom: 0;
+    }
+    .ms-topbar {
+        padding: 12px 12px;
+        gap: 8px;
+    }
+    .ms-search {
+        max-width: none;
+    }
+    .ms-search input {
+        padding: 10px 38px 10px 38px;
+        font-size: 0.84rem;
+    }
+    .ms-sidebar-toggle {
+        width: 34px;
+        height: 34px;
+    }
+}
+
+@media (max-width: 480px) {
+    .ms-card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
+    .ms-section-title h2 { font-size: 1.2rem; }
+    .ms-top-name { font-size: 1.25rem; }
+    .ms-years-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
+    .ms-year-num { font-size: 1.8rem; }
+}
+
+.ms-home-hero {
+    margin: 18px 0 28px;
+}
+.ms-home-greet {
+    font-size: 2rem;
+    font-weight: 900;
+    letter-spacing: -0.02em;
+    color: #fff;
+    margin: 0 0 18px;
+}
+.ms-quick-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+}
+@media (max-width: 900px) { .ms-quick-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 540px) { .ms-quick-grid { grid-template-columns: 1fr; } }
+
+.ms-quick-tile {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: rgba(255, 255, 255, 0.06);
+    border-radius: 6px;
+    padding: 0 14px 0 0;
+    height: 64px;
+    overflow: hidden;
+    position: relative;
+    transition: background 0.15s;
+}
+.ms-quick-tile:hover { background: rgba(255, 255, 255, 0.12); }
+.ms-quick-cover {
+    width: 64px; height: 64px;
+    object-fit: cover;
+    flex-shrink: 0;
+    background: var(--ms-surface-2);
+}
+.ms-quick-name {
+    flex: 1;
+    font-weight: 700;
+    color: #fff;
+    font-size: 0.9rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+.ms-quick-play {
+    width: 44px; height: 44px;
+    border-radius: 50%;
+    background: var(--ms-accent);
+    color: #fff;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
+    opacity: 0;
+    transform: translateX(8px);
+    transition: opacity 0.15s, transform 0.15s, background 0.15s;
+}
+.ms-quick-tile:hover .ms-quick-play { opacity: 1; transform: translateX(0); }
+.ms-quick-play:hover { background: var(--ms-accent-hot); transform: scale(1.06); }
+.ms-quick-play svg { width: 18px; height: 18px; transform: translateX(1px); }
+.ms-quick-empty {
+    grid-column: 1 / -1;
+    color: var(--ms-text-dim);
+    background: var(--ms-surface);
+    border-radius: 6px;
+    padding: 18px;
+    font-size: 0.92rem;
+}
+
+.ms-years-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
+.ms-year-card {
+    display: block;
+    background: var(--ms-surface);
+    padding: 14px;
+    border-radius: 8px;
+    transition: background 0.18s;
+    text-align: left;
+}
+.ms-year-card:hover { background: var(--ms-surface-2); }
+.ms-year-cover {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 12px;
+    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
+    overflow: hidden;
+    position: relative;
+}
+.ms-year-cover::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.12), transparent 55%);
+    pointer-events: none;
+}
+.ms-year-num {
+    font-size: 2.4rem;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+    color: #fff;
+    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+}
+
+.pb-cover-btn {
+    position: relative;
+    width: 56px; height: 56px;
+    border-radius: 4px;
+    overflow: hidden;
+    flex-shrink: 0;
+    background: transparent;
+    cursor: pointer;
+    display: block;
+}
+.pb-cover-btn .pb-cover { width: 100%; height: 100%; display: block; }
+.pb-cover-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.55);
+    color: #fff;
+    opacity: 0;
+    transition: opacity 0.15s;
+}
+.pb-cover-overlay svg { width: 18px; height: 18px; }
+.pb-cover-btn:hover .pb-cover-overlay { opacity: 1; }
+.player-bar[data-empty="1"] .pb-cover-btn { pointer-events: none; }
+
+.np-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 10001;
+    color: #fff;
+    overflow: hidden;
+    animation: npFadeIn 0.22s ease-out;
+}
+.np-modal[hidden] { display: none; }
+body.np-open { overflow: hidden; }
+body.np-open .float-nav { display: none !important; }
+
+body.np-open #header { display: none !important; }
+body.np-open .np-modal { top: 0; }
+@keyframes npFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+
+.np-bg {
+    position: absolute;
+    inset: 0;
+    background-size: cover;
+    background-position: center;
+    filter: blur(38px) saturate(150%) brightness(0.6);
+    transform: scale(1.2);
+    z-index: 0;
+    transition: filter 0.35s ease;
+}
+.np-bg::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, rgba(10,5,25,0.55) 0%, rgba(10,5,25,0.85) 60%, #07050d 100%);
+    transition: opacity 0.35s ease;
+}
+
+body.np-lyrics-open .np-bg {
+    filter: blur(46px) saturate(140%) brightness(0.45);
+}
+body.np-lyrics-open .np-bg::after {
+    background: linear-gradient(180deg, rgba(8,4,20,0.72) 0%, rgba(8,4,20,0.88) 60%, #050208 100%);
+    opacity: 1;
+}
+
+body.np-lyrics-open .np-stage { box-shadow: none; background: transparent; }
+body.np-lyrics-open .np-cover,
+body.np-lyrics-open .np-cover-fallback { display: none !important; }
+
+.np-inner {
+    position: relative;
+    z-index: 1;
+    height: 100vh;
+    height: 100dvh;
+    max-width: 520px;
+    margin: 0 auto;
+    padding: 14px 22px 22px;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
+    gap: 14px;
+}
+@media (min-width: 900px) {
+    .np-inner { max-width: 560px; padding: 18px 28px 26px; gap: 16px; }
+}
+@media (max-width: 480px) {
+    .np-inner { padding: 10px 16px 18px; gap: 10px; }
+}
+
+.np-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+.np-icon-btn {
+    min-width: 36px; height: 36px;
+    display: flex; align-items: center; justify-content: center;
+    gap: 6px;
+    padding: 0 6px;
+    color: #fff;
+    border-radius: 18px;
+    transition: background 0.15s;
+}
+.np-icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
+.np-icon-btn svg { width: 22px; height: 22px; }
+
+.np-back-btn span {
+    font-size: 0.85rem;
+    font-weight: 600;
+    padding-right: 6px;
+}
+@media (max-width: 600px) {
+    .np-back-btn span { display: none; }
+    .np-back-btn { padding: 0; min-width: 36px; border-radius: 50%; }
+}
+.np-source { text-align: center; min-width: 0; flex: 1; }
+.np-eyebrow {
+    font-size: 0.66rem;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    color: rgba(255, 255, 255, 0.7);
+    font-weight: 700;
+    margin-bottom: 2px;
+}
+.np-source-name {
+    font-size: 0.86rem;
+    font-weight: 600;
+    color: #fff;
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+}
+.np-source-name:hover { text-decoration: underline; }
+
+.np-stage {
+    position: relative;
+
+    width: min(100%, 70vh, 560px);
+    max-width: 100%;
+    aspect-ratio: 1 / 1;
+    max-height: min(70vh, 560px);
+    margin: 0 auto;
+    border-radius: 12px;
+    overflow: hidden;
+    background: linear-gradient(135deg, #432470 0%, #1a0f33 100%);
+    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
+    align-self: center;
+    flex-shrink: 0;
+}
+@media (max-width: 600px) {
+    .np-stage {
+
+        width: min(100%, 54vh, 460px);
+        max-height: 54vh;
+    }
+}
+@media (max-width: 380px) {
+    .np-stage {
+        width: min(100%, 48vh, 380px);
+        max-height: 48vh;
+    }
+}
+
+@media (max-height: 520px) and (orientation: landscape) {
+    .np-stage {
+        width: min(82vh, 400px);
+        max-height: 82vh;
+    }
+}
+.np-cover, .np-video {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+.np-video { background: #000; object-fit: contain; }
+
+.np-cover[hidden], .np-video[hidden] { display: none !important; }
+
+.np-cover:not([src]),
+.np-cover[src=""],
+.np-cover.is-failed { visibility: hidden; }
+
+.np-cover-fallback {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.55);
+    pointer-events: none;
+}
+.np-cover-fallback svg { width: 72px; height: 72px; }
+
+.np-loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    z-index: 3;
+    animation: npFadeIn 0.18s ease-out;
+}
+.np-loading[hidden] { display: none; }
+.np-spinner {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    border: 3px solid rgba(255, 255, 255, 0.18);
+    border-top-color: var(--ms-accent-hot);
+    animation: npSpin 0.85s linear infinite;
+}
+@keyframes npSpin { to { transform: rotate(360deg); } }
+
+.np-panel-close {
+    width: 32px; height: 32px;
+    color: rgba(255, 255, 255, 0.7);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: background 0.15s, color 0.15s;
+    flex-shrink: 0;
+}
+.np-panel-close svg { width: 16px; height: 16px; }
+.np-panel-close:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
+.np-lyrics-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+.np-lyrics-head h3 { margin: 0; }
+
+.np-lyrics {
+    position: absolute;
+    inset: 0;
+
+    background: radial-gradient(120% 80% at 50% 0%, #1a0d2e 0%, #0a0612 55%, #050208 100%);
+    overflow: hidden;
+    padding: 18px 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.np-lyrics[hidden] { display: none; }
+.np-lyrics-inner { width: 100%; max-width: 420px; }
+.np-lyrics-inner h3 {
+    margin: 0 0 12px;
+    font-size: 1.1rem;
+    font-weight: 800;
+    color: #fff;
+}
+.np-lyrics-body {
+    color: rgba(255, 255, 255, 0.92);
+    line-height: 1.55;
+    font-size: 0.96rem;
+    margin: 0 0 18px;
+}
+.np-lyrics-meta {
+    display: grid;
+    gap: 10px;
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    padding-top: 14px;
+}
+.np-lyrics-meta div {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    font-size: 0.85rem;
+}
+.np-lyrics-meta span {
+    color: rgba(255, 255, 255, 0.55);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 700;
+    font-size: 0.7rem;
+}
+.np-lyrics-meta strong {
+    color: #fff;
+    font-weight: 600;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 60%;
+}
+
+.np-info {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+.np-info-text { flex: 1; min-width: 0; }
+.np-title {
+    display: block;
+    color: #fff;
+    font-size: 1.4rem;
+    font-weight: 800;
+    letter-spacing: -0.01em;
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 4px;
+}
+.np-title:hover { text-decoration: underline; }
+.np-artist {
+    display: block;
+    color: rgba(255, 255, 255, 0.75);
+    font-size: 0.95rem;
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.np-artist:hover { color: #fff; text-decoration: underline; }
+.np-like {
+    width: 40px; height: 40px;
+    color: rgba(255, 255, 255, 0.85);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.15s, transform 0.15s;
+    flex-shrink: 0;
+}
+.np-like svg { width: 24px; height: 24px; }
+.np-like:hover { color: #fff; transform: scale(1.08); }
+.np-like.is-liked { color: var(--ms-accent-hot); }
+.np-like.is-liked svg { fill: currentColor; }
+
+.np-progress { display: grid; gap: 6px; }
+.np-bar {
+    position: relative;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.18);
+    border-radius: 2px;
+    cursor: pointer;
+    transition: height 0.12s;
+}
+.np-bar:hover { height: 6px; }
+.np-bar-fill {
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    width: 0;
+    background: #fff;
+    border-radius: 2px;
+}
+.np-bar:hover .np-bar-fill { background: var(--ms-accent-hot); }
+.np-bar-knob {
+    position: absolute;
+    top: 50%;
+    width: 12px; height: 12px;
+    background: #fff;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 0.12s;
+}
+.np-bar:hover .np-bar-knob { opacity: 1; }
+.np-times {
+    display: flex;
+    justify-content: space-between;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.72rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.np-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4px;
+}
+.np-ctl {
+    width: 44px; height: 44px;
+    color: rgba(255, 255, 255, 0.85);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.15s, transform 0.15s;
+    position: relative;
+}
+.np-ctl svg { width: 26px; height: 26px; }
+.np-ctl:hover { color: #fff; transform: scale(1.08); }
+.np-ctl.is-on { color: var(--ms-accent-hot); }
+.np-ctl.is-on::after {
+    content: "";
+    position: absolute;
+    bottom: 6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 4px; height: 4px;
+    background: var(--ms-accent-hot);
+    border-radius: 50%;
+}
+.np-play-big {
+    width: 64px; height: 64px;
+    border-radius: 50%;
+    background: #fff;
+    color: #000;
+    display: flex; align-items: center; justify-content: center;
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
+    transition: transform 0.12s;
+}
+.np-play-big svg { width: 30px; height: 30px; transform: translateX(1px); }
+.np-play-big:hover { transform: scale(1.06); }
+.np-play-big:active { transform: scale(0.96); }
+
+.np-tools {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding-top: 4px;
+}
+.np-tool {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 18px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.10);
+    color: rgba(255, 255, 255, 0.92);
+    font-weight: 600;
+    font-size: 0.84rem;
+    letter-spacing: 0.01em;
+    transition: background 0.15s, color 0.15s, transform 0.12s;
+}
+.np-tool svg { width: 18px; height: 18px; }
+.np-tool:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
+.np-tool.is-on {
+    background: var(--ms-accent);
+    color: #fff;
+}
+.np-tool.is-on:hover { background: var(--ms-accent-hot); }
+.np-tool.is-disabled { opacity: 0.45; pointer-events: none; }
+
+@media (min-width: 720px) {
+    .np-inner { max-width: 620px; padding: 28px 32px 36px; gap: 22px; }
+    .np-title { font-size: 1.7rem; }
+}
+
+#toast-container {
+    position: fixed;
+    bottom: 110px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 300;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    pointer-events: none;
+}
+.kv-toast {
+    background: rgba(20, 14, 36, 0.96);
+    color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    padding: 10px 18px;
+    border-radius: 999px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
+    opacity: 0;
+    transform: translateY(8px);
+    transition: opacity 0.2s, transform 0.2s;
+}
+.kv-toast.show { opacity: 1; transform: none; }
+
+.np-queue {
+    position: absolute;
+    inset: 0;
+    background: rgba(8, 4, 18, 0.92);
+    backdrop-filter: blur(28px);
+    -webkit-backdrop-filter: blur(28px);
+    border-radius: inherit;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: npFadeIn 0.18s ease-out;
+}
+.np-queue[hidden] { display: none; }
+.np-queue-head {
+    flex-shrink: 0;
+    padding: 16px 18px 10px;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+.np-queue-head h3 {
+    font-size: 1rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+.np-queue-head span {
+    font-size: 0.78rem;
+    color: var(--ms-text-dim);
+    font-weight: 600;
+}
+.np-queue-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px 8px 12px;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+}
+.np-queue-empty {
+    color: var(--ms-text-dim);
+    text-align: center;
+    padding: 30px 16px;
+    font-size: 0.92rem;
+}
+.np-queue-row {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 44px 1fr auto;
+    gap: 12px;
+    align-items: center;
+    padding: 8px 10px;
+    border-radius: 8px;
+    background: transparent;
+    color: #fff;
+    text-align: left;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+.np-queue-row:hover { background: rgba(255, 255, 255, 0.07); }
+.np-queue-row.is-current { background: rgba(124, 58, 237, 0.18); }
+.np-queue-cover {
+    position: relative;
+    width: 44px; height: 44px;
+    border-radius: 6px;
+    overflow: hidden;
+    background: var(--ms-surface-2);
+    flex-shrink: 0;
+}
+.np-queue-cover img { width: 100%; height: 100%; object-fit: cover; }
+.np-queue-eq {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.55);
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 2px;
+    padding-bottom: 6px;
+}
+.np-queue-eq i {
+    width: 3px; height: 12px;
+    background: var(--ms-accent-hot);
+    border-radius: 1px;
+    animation: eqBars 1s ease-in-out infinite;
+    animation-play-state: paused;
+    transform: scaleY(0.4);
+    transform-origin: bottom center;
+}
+.np-queue-eq i:nth-child(2) { animation-delay: 0.15s; height: 16px; }
+.np-queue-eq i:nth-child(3) { animation-delay: 0.3s; height: 10px; }
+
+body.is-playing .np-queue-eq i { animation-play-state: running; }
+@keyframes eqBars {
+    0%, 100% { transform: scaleY(0.4); }
+    50% { transform: scaleY(1); }
+}
+
+.np-lyric-line {
+    display: block;
+    padding: 6px 4px;
+    line-height: 1.55;
+    color: rgba(255, 255, 255, 0.55);
+    transition: color 0.25s ease, transform 0.25s ease, font-weight 0.2s ease;
+    font-size: 1rem;
+}
+.np-lyric-line.is-active {
+    color: #fff;
+    font-weight: 700;
+    transform: scale(1.04);
+    transform-origin: left center;
+    text-shadow: 0 0 18px rgba(157, 110, 248, 0.55);
+}
+.np-lyric-line.is-loading,
+.np-lyric-line.is-empty {
+    color: rgba(255, 255, 255, 0.5);
+    font-style: italic;
+}
+.np-queue-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+.np-queue-title {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #fff;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.np-queue-row.is-current .np-queue-title { color: var(--ms-accent-hot); }
+.np-queue-sub {
+    font-size: 0.78rem;
+    color: var(--ms-text-dim);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.np-queue-tag {
+    font-size: 0.7rem;
+    color: var(--ms-text-dim);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    flex-shrink: 0;
+}
+
+.ms-link:hover {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.06);
+}
+.ms-link:active { background: rgba(255, 255, 255, 0.12); }
+
+.pb-cover-btn { cursor: pointer; }
+
+@media (max-width: 720px) {
+    .np-inner {
+        padding: 14px 16px 22px;
+        gap: 14px;
+    }
+    .np-stage { aspect-ratio: 1 / 1; }
+    .np-tools { gap: 8px; }
+    .np-tool { padding: 8px 12px; font-size: 0.78rem; }
+    .np-tool span { display: inline; }
+    .np-title { font-size: 1.1rem; }
+    .np-artist { font-size: 0.88rem; }
+    .np-controls { gap: 18px; }
+    .np-play-big { width: 64px; height: 64px; }
+    .np-play-big svg { width: 26px; height: 26px; }
+    .np-queue-row { grid-template-columns: 40px 1fr auto; }
+    .np-queue-cover { width: 40px; height: 40px; }
+}
+
+@media (max-width: 380px) {
+    .np-tool span { display: none; }
+    .np-tool { padding: 8px 10px; }
+    .np-controls { gap: 12px; }
+    .np-controls .pb-icon-btn { width: 36px; height: 36px; }
+    .np-play-big { width: 58px; height: 58px; }
+}
+
+@media (min-width: 721px) and (max-width: 1024px) {
+    .np-inner { max-width: 460px; padding: 22px 28px 30px; }
+}
+
+@media (min-width: 1200px) {
+    .np-inner { max-width: 560px; }
+    .np-stage { max-height: 420px; }
+}
+
+.np-inner {
+    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
+    align-content: stretch;
+    gap: 14px;
+    padding: 14px 22px max(20px, env(safe-area-inset-bottom));
+    overflow: hidden;
+    overscroll-behavior: contain;
+    box-sizing: border-box;
+}
+.np-stage {
+    max-height: min(60vh, 480px);
+    min-height: 0;
+}
+@media (max-height: 780px) {
+    .np-inner { gap: 10px; padding: 10px 18px max(14px, env(safe-area-inset-bottom)); }
+    .np-stage { max-height: min(52vh, 400px); }
+    .np-controls { gap: 14px; }
+    .np-tools { padding-top: 0; gap: 8px; }
+    .np-tool { padding: 7px 12px; font-size: 0.78rem; }
+}
+@media (max-height: 640px) {
+    .np-inner { gap: 6px; padding: 8px 14px max(10px, env(safe-area-inset-bottom)); }
+    .np-stage { max-height: min(42vh, 300px); }
+    .np-info { padding: 6px 10px; }
+    .np-title { font-size: 1rem; margin-bottom: 2px; }
+    .np-artist { font-size: 0.82rem; }
+    .np-play-big { width: 54px; height: 54px; }
+    .np-play-big svg { width: 22px; height: 22px; }
+    .np-ctl { width: 38px; height: 38px; }
+    .np-ctl svg { width: 22px; height: 22px; }
+}
+@media (max-height: 520px) {
+    .np-stage { max-height: 30vh; }
+    .np-inner { gap: 4px; padding: 6px 12px max(8px, env(safe-area-inset-bottom)); }
+    .np-tool span { display: none; }
+    .np-tool { padding: 6px 10px; }
+}
+
+body.np-lyrics-open .np-inner {
+    grid-template-rows: auto minmax(140px, 1fr) auto auto auto auto;
+    align-content: stretch;
+    overflow: hidden;
+}
+body.np-lyrics-open .np-stage {
+    width: 100%;
+    max-width: 100%;
+    aspect-ratio: auto;
+    max-height: none;
+    height: 100%;
+    border-radius: 8px;
+}
+
+.np-back-btn {
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    padding: 0 12px 0 8px !important;
+    min-width: auto !important;
+    border-radius: 18px !important;
+    height: 36px;
+}
+.np-back-btn span { display: inline !important; padding-right: 0 !important; }
+.np-back-btn:hover { background: rgba(255, 255, 255, 0.16); }
+
+.np-lyrics {
+    align-items: stretch;
+    justify-content: center;
+    padding: 28px 18px;
+    overscroll-behavior: contain;
+}
+.np-lyrics-inner {
+    width: 100%;
+    max-width: 640px;
+    height: 100%;
+    margin: 0 auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+.np-lyrics-inner h3 { text-align: center; }
+.np-lyrics-head { flex: 0 0 auto; justify-content: center; gap: 14px; position: relative; }
+.np-lyrics-head .np-panel-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
+.np-lyrics-body {
+    flex: 1 1 0;
+    min-height: 0;
+    text-align: center;
+    font-size: 1.45rem;
+    line-height: 1.5;
+    margin: 0;
+    color: #fff;
+
+    padding: 45% 6px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
+            mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
+}
+.np-lyrics-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
+.np-lyrics-meta { flex: 0 0 auto; padding-top: 8px; }
+
+.np-lyric-line {
+    display: block;
+    padding: 10px 6px;
+    line-height: 1.35;
+    font-size: 1.4rem;
+
+    font-weight: 500;
+    letter-spacing: -0.005em;
+    color: rgba(255, 255, 255, 0.55);
+    transform: scale(0.96);
+    transform-origin: center;
+    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
+                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
+                color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+                font-weight 0.25s ease,
+                text-shadow 0.5s ease;
+    text-align: center;
+    will-change: transform, color;
+
+    max-width: 100%;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+    hyphens: auto;
+    white-space: normal;
+}
+
+.np-lyric-line.is-past {
+    color: rgba(255, 255, 255, 0.32);
+    font-weight: 500;
+}
+
+.np-lyric-line.is-active {
+    transform: scale(1.12);
+    color: #ffffff;
+    font-weight: 900;
+    letter-spacing: 0;
+    text-shadow: 0 0 22px rgba(167, 139, 250, 0.55),
+                 0 2px 14px rgba(0, 0, 0, 0.55);
+}
+
+.np-lyric-line.is-active ~ .np-lyric-line {
+    color: rgba(255, 255, 255, 0.55);
+    font-weight: 500;
+    transform: scale(0.96);
+}
+.np-lyric-line.is-loading,
+.np-lyric-line.is-empty {
+    transform: none;
+    font-style: italic;
+    font-weight: 500;
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+@media (max-width: 600px) {
+    .np-lyrics { padding: 18px 10px; }
+    .np-lyrics-body { font-size: 1.15rem; }
+    .np-lyric-line { font-size: 1.15rem; padding: 8px 4px; }
+    .np-lyric-line.is-active { transform: scale(1.08); }
+}
+
+.np-info {
+    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(255, 255, 255, 0.02));
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 14px;
+    padding: 10px 14px;
+}
+.np-like {
+    width: 44px !important;
+    height: 44px !important;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    color: rgba(255, 255, 255, 0.85);
+    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease;
+}
+.np-like svg { width: 22px !important; height: 22px !important; transition: transform 0.18s ease; }
+.np-like:hover {
+    background: rgba(244, 63, 94, 0.12);
+    border-color: rgba(244, 63, 94, 0.45);
+    color: #fff;
+    transform: scale(1.06);
+}
+.np-like.is-liked {
+    color: #fff;
+    background: linear-gradient(135deg, #f43f5e, #ec4899);
+    border-color: rgba(244, 63, 94, 0.65);
+    box-shadow: 0 8px 22px rgba(244, 63, 94, 0.45);
+}
+.np-like.is-liked svg { fill: currentColor; transform: scale(1.05); }
+.np-like.just-liked { animation: npLikePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
+@keyframes npLikePop {
+    0%   { transform: scale(1); }
+    40%  { transform: scale(1.25); }
+    100% { transform: scale(1.06); }
+}
+@media (max-width: 600px) {
+    .np-info { padding: 8px 12px; gap: 12px; }
+    .np-like { width: 40px !important; height: 40px !important; }
+    .np-like svg { width: 20px !important; height: 20px !important; }
+}

frontend/dist/music.html

@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <title>Music · anidoom</title>
+  <meta name="description" content="Listen to anime openings, endings and OSTs. Powered by AnimeThemes.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/music.css">
+  <style>
+    :root {
+      --header-h: 0px;
+    }
+    body {
+      font-family: 'Outfit', sans-serif;
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+
+<body class="music-body">
+  <main class="music-app" id="music-app">
+    <aside class="music-sidebar" id="music-sidebar">
+      <div class="ms-block">
+        <div class="ms-block-title">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z"/></svg>
+          <span>Browse</span>
+        </div>
+        <a class="ms-link" data-route="#/" href="#/">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20"/><path d="M12 2a14.5 14.5 0 0 1 0 20"/><line x1="2" y1="12" x2="22" y2="12"/></svg>
+          <span>Discover</span>
+        </a>
+        <a class="ms-link" data-route="#/recent" href="#/recent">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+          <span>Newest Themes</span>
+        </a>
+        <a class="ms-link" data-route="#/artists" href="#/artists">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+          <span>Artists</span>
+        </a>
+      </div>
+
+      <div class="ms-block">
+        <div class="ms-block-title">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+          <span>Library</span>
+        </div>
+        <a class="ms-link" data-route="#/liked" href="#/liked">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+          <span>Liked Songs</span>
+        </a>
+        <a class="ms-link" data-route="#/history" href="#/history">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
+          <span>Recently Played</span>
+        </a>
+      </div>
+
+      <div class="ms-block">
+        <div class="ms-block-title">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+          <span>By Year</span>
+        </div>
+        <div class="ms-year-grid" id="ms-year-grid"></div>
+      </div>
+    </aside>
+
+    <section class="music-main" id="music-main">
+      <div class="ms-topbar">
+        <button class="ms-nav-btn" id="ms-back" aria-label="Back" disabled>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+        </button>
+        <button class="ms-nav-btn" id="ms-fwd" aria-label="Forward" disabled>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+        </button>
+
+        <div class="ms-search">
+          <span class="ms-search-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          </span>
+          <input id="ms-search-input" type="text" placeholder="What do you want to listen to?" autocomplete="off">
+          <button class="ms-search-clear" id="ms-search-clear" aria-label="Clear" hidden>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+
+        <button class="ms-sidebar-toggle" id="ms-sidebar-toggle" aria-label="Library">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+        </button>
+      </div>
+
+      <div class="ms-view" id="ms-view"></div>
+    </section>
+  </main>
+
+  <div class="ms-sidebar-backdrop" id="ms-sidebar-backdrop"></div>
+
+  <div class="player-bar" id="player-bar" data-empty="1">
+    <div class="pb-track">
+      <button class="pb-cover-btn" id="pb-expand" aria-label="Expand player">
+        <img class="pb-cover" id="pb-cover" alt="" referrerpolicy="no-referrer">
+        <span class="pb-cover-fallback" id="pb-cover-fallback" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+        </span>
+        <span class="pb-cover-overlay">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+        </span>
+      </button>
+      <div class="pb-meta">
+        <button class="pb-title" id="pb-title" type="button">Pick a song to start</button>
+        <a class="pb-artist" id="pb-artist" href="#">—</a>
+      </div>
+      <button class="pb-like" id="pb-like" aria-label="Like">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+      </button>
+      <button class="pb-dismiss" id="pb-dismiss" aria-label="Hide player">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+
+    <div class="pb-center">
+      <div class="pb-controls">
+        <button class="pb-btn" id="pb-shuffle" aria-label="Shuffle">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
+        </button>
+        <button class="pb-btn" id="pb-prev" aria-label="Previous">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
+        </button>
+        <button class="pb-play" id="pb-play" aria-label="Play">
+          <svg id="pb-play-svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+        </button>
+        <button class="pb-btn" id="pb-next" aria-label="Next">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zm10-12v12h2V6z"/></svg>
+        </button>
+        <button class="pb-btn" id="pb-loop" aria-label="Loop">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
+        </button>
+      </div>
+      <div class="pb-progress">
+        <span class="pb-time" id="pb-cur">0:00</span>
+        <div class="pb-bar" id="pb-seek">
+          <div class="pb-bar-fill" id="pb-seek-fill"></div>
+          <div class="pb-bar-knob" id="pb-seek-knob"></div>
+        </div>
+        <span class="pb-time" id="pb-dur">0:00</span>
+      </div>
+    </div>
+
+    <div class="pb-right">
+      <button class="pb-btn pb-mobile-play" id="pb-play-mobile" aria-label="Play">
+        <svg id="pb-play-mobile-svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+      </button>
+      <button class="pb-btn" id="pb-mute" aria-label="Mute">
+        <svg id="pb-vol-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>
+      </button>
+      <div class="pb-vol" id="pb-vol">
+        <div class="pb-bar-fill" id="pb-vol-fill"></div>
+        <div class="pb-bar-knob" id="pb-vol-knob"></div>
+      </div>
+    </div>
+
+    <audio id="pb-audio" preload="metadata"></audio>
+  </div>
+
+  <div class="np-modal" id="np-modal" hidden>
+    <div class="np-bg" id="np-bg"></div>
+    <div class="np-inner">
+      <div class="np-header">
+        <button class="np-icon-btn np-back-btn" id="np-close" aria-label="Back">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+          <span>Back</span>
+        </button>
+        <div class="np-source">
+          <div class="np-eyebrow">Playing from</div>
+          <a class="np-source-name" id="np-source-name" href="#">—</a>
+        </div>
+        <div style="width:36px"></div>
+      </div>
+
+      <div class="np-stage" id="np-stage">
+        <span class="np-cover-fallback" id="np-cover-fallback" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+        </span>
+        <img class="np-cover" id="np-cover" alt="" referrerpolicy="no-referrer">
+        <video class="np-video" id="np-video" playsinline preload="metadata" hidden></video>
+        <div class="np-loading" id="np-loading" hidden><div class="np-spinner"></div></div>
+        <div class="np-lyrics" id="np-lyrics" hidden>
+          <div class="np-lyrics-inner">
+            <div class="np-lyrics-head">
+              <h3>Lyrics</h3>
+              <button class="np-panel-close" id="np-lyrics-close" aria-label="Close lyrics">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            </div>
+            <p class="np-lyrics-body" id="np-lyrics-body">Pick a song to load lyrics.</p>
+            <div class="np-lyrics-meta" id="np-lyrics-meta"></div>
+          </div>
+        </div>
+        <div class="np-queue" id="np-queue" hidden>
+          <div class="np-queue-head">
+            <h3>Queue</h3>
+            <span id="np-queue-count">0 tracks</span>
+            <button class="np-panel-close" id="np-queue-close" aria-label="Close queue">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+          </div>
+          <div class="np-queue-list" id="np-queue-list"></div>
+        </div>
+      </div>
+
+      <div class="np-info">
+        <div class="np-info-text">
+          <a class="np-title" id="np-title" href="#">—</a>
+          <a class="np-artist" id="np-artist" href="#">—</a>
+        </div>
+        <button class="np-like" id="np-like" aria-label="Like">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+        </button>
+      </div>
+
+      <div class="np-progress">
+        <div class="np-bar" id="np-seek">
+          <div class="np-bar-fill" id="np-seek-fill"></div>
+          <div class="np-bar-knob" id="np-seek-knob"></div>
+        </div>
+        <div class="np-times">
+          <span id="np-cur">0:00</span>
+          <span id="np-dur">0:00</span>
+        </div>
+      </div>
+
+      <div class="np-controls">
+        <button class="np-ctl" id="np-shuffle" aria-label="Shuffle">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
+        </button>
+        <button class="np-ctl" id="np-prev" aria-label="Previous">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
+        </button>
+        <button class="np-play-big" id="np-play" aria-label="Play">
+          <svg id="np-play-svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+        </button>
+        <button class="np-ctl" id="np-next" aria-label="Next">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zm10-12v12h2V6z"/></svg>
+        </button>
+        <button class="np-ctl" id="np-loop" aria-label="Loop">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
+        </button>
+      </div>
+
+      <div class="np-tools">
+        <button class="np-tool" id="np-video-btn" aria-label="Toggle video">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
+          <span>Video</span>
+        </button>
+        <button class="np-tool" id="np-lyrics-btn" aria-label="Toggle lyrics">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 10h12M4 14h16M4 18h8"/></svg>
+          <span>Lyrics</span>
+        </button>
+        <button class="np-tool" id="np-queue-btn" aria-label="Toggle queue">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+          <span>Queue</span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div id="toast-container"></div>
+
+  <script src="/music-api.js"></script>
+  <script src="/music.js"></script>
+</body>
+</html>

frontend/dist/music.js

@@ -0,0 +1,1729 @@
+(function () {
+    const $ = (s, r) => (r || document).querySelector(s);
+    const $$ = (s, r) => Array.from((r || document).querySelectorAll(s));
+
+    const audio = $('#pb-audio');
+    const video = $('#np-video');
+    const view = $('#ms-view');
+    const playerBar = $('#player-bar');
+    const npModal = $('#np-modal');
+
+    let mediaMode = 'audio';
+    function activeMedia() { return mediaMode === 'video' ? video : audio; }
+
+    const STORE = {
+        liked: 'kv_music_liked',
+        history: 'kv_music_history',
+        vol: 'kv_music_vol',
+    };
+
+    const state = {
+        queue: [],
+        index: -1,
+        liked: new Set(JSON.parse(localStorage.getItem(STORE.liked) || '[]')),
+        history: JSON.parse(localStorage.getItem(STORE.history) || '[]'),
+        volume: parseFloat(localStorage.getItem(STORE.vol) || '0.8'),
+        muted: false,
+        loop: false,
+        shuffle: false,
+        navStack: [],
+        navFwd: [],
+        scrubbing: false,
+    };
+
+    const api = {
+        search:  (q)    => fetchAPI(`/themes/search?q=${encodeURIComponent(q)}`),
+        anime:   (id)   => fetchAPI(`/themes/anime/${encodeURIComponent(id)}`),
+        artist:  (slug) => fetchAPI(`/themes/artist/${encodeURIComponent(slug)}`),
+        recent:  ()     => fetchAPI('/themes/recent'),
+        year:    (y)    => fetchAPI(`/themes/year/${encodeURIComponent(y)}`),
+        artists: ()     => fetchAPI('/themes/top-artists'),
+    };
+
+    const esc = (s) => String(s == null ? '' : s).replace(/[<>&"']/g, c => ({
+        '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#39;',
+    }[c]));
+
+    const fmtTime = (sec) => {
+        if (!isFinite(sec) || sec < 0) sec = 0;
+        const m = Math.floor(sec / 60);
+        const s = Math.floor(sec % 60);
+        return `${m}:${s < 10 ? '0' : ''}${s}`;
+    };
+
+    const placeholderCover = (label) => {
+        const t = (label || '?').slice(0, 1).toUpperCase();
+        return `<div class="ms-card-cover-fallback"><span style="font-size:2.4rem;font-weight:900;letter-spacing:-0.04em;">${esc(t)}</span></div>`;
+    };
+
+    function coverImg(url, label, opts) {
+        opts = opts || {};
+        const cls = opts.cls || 'ms-card-cover';
+        if (!url) return placeholderCover(label || '');
+        return `<img class="${cls}" data-cover-fallback="${esc(label || '')}"`
+            + ` src="${esc(url)}" alt="" loading="lazy" referrerpolicy="no-referrer">`;
+    }
+
+    document.addEventListener('error', (e) => {
+        const img = e.target;
+        if (!(img instanceof HTMLImageElement)) return;
+        if (!img.dataset || img.dataset.coverFallback == null) return;
+        const label = img.dataset.coverFallback;
+        const wrap  = img.parentNode;
+        if (!wrap) return;
+
+        const tmp = document.createElement('div');
+        tmp.innerHTML = placeholderCover(label);
+        const node = tmp.firstChild;
+        if (node) wrap.replaceChild(node, img);
+    }, true);
+
+    const coverUrl = (anime) => {
+        if (!anime) return '';
+        const imgs = anime.images || [];
+        const large = imgs.find(i => i.facet === 'Large Cover');
+        const small = imgs.find(i => i.facet === 'Small Cover');
+        return (large || small || imgs[0])?.link || '';
+    };
+
+    const artistImageUrl = (artist) => {
+        if (!artist) return '';
+        const imgs = artist.images || [];
+        const large = imgs.find(i => i.facet === 'Large Cover');
+        const small = imgs.find(i => i.facet === 'Small Cover');
+        return (large || small || imgs[0])?.link || '';
+    };
+
+    function trackFromTheme(anime, theme, animeOverride) {
+        const animeRef = animeOverride || theme.anime || anime;
+        if (!animeRef) return null;
+        const entries = theme.animethemeentries || [];
+        let pickedAudio = null, pickedVideo = null, pickedEntry = null;
+        for (const e of entries) {
+            for (const v of (e.videos || [])) {
+                if (v.audio && v.audio.link) {
+                    pickedAudio = v.audio;
+                    pickedVideo = v;
+                    pickedEntry = e;
+                    break;
+                }
+            }
+            if (pickedAudio) break;
+        }
+        if (!pickedAudio) return null;
+        const cover = coverUrl(animeRef) || (theme.song?.artists?.[0] && artistImageUrl(theme.song.artists[0])) || '';
+        const slug = theme.slug || `${theme.type || ''}${theme.sequence || ''}`;
+        return {
+            id: `${theme.id}-${pickedAudio.id}`,
+            themeId: theme.id,
+            title: theme.song?.title || slug || 'Untitled',
+            type: slug,
+            typeKind: theme.type || '',
+            artists: theme.song?.artists || [],
+            animeId: animeRef.id,
+            animeName: animeRef.name,
+            animeSlug: animeRef.slug,
+            cover,
+            audio: pickedAudio.link,
+            videoLink: pickedVideo?.link,
+            episodes: pickedEntry?.episodes || '',
+        };
+    }
+
+    function tracksFromAnime(anime) {
+        return (anime.animethemes || [])
+            .map(t => trackFromTheme(anime, t))
+            .filter(Boolean);
+    }
+
+    function persistLiked() { localStorage.setItem(STORE.liked, JSON.stringify(Array.from(state.liked))); }
+    function persistHistory() { localStorage.setItem(STORE.history, JSON.stringify(state.history.slice(0, 60))); }
+    function persistVol() { localStorage.setItem(STORE.vol, String(state.volume)); }
+
+    function isLiked(track) { return state.liked.has(track.id); }
+    function toggleLike(track) {
+        if (state.liked.has(track.id)) {
+            state.liked.delete(track.id);
+            try { localStorage.removeItem(`kv_music_track_${track.id}`); } catch (_) { }
+        } else {
+            state.liked.add(track.id);
+            try { localStorage.setItem(`kv_music_track_${track.id}`, JSON.stringify(track)); } catch (_) { }
+        }
+        persistLiked();
+        updatePlayerLike();
+        $$(`.ms-track-like[data-tid="${CSS.escape(track.id)}"]`).forEach(b => {
+            b.classList.toggle('is-liked', state.liked.has(track.id));
+        });
+    }
+
+    function pushHistory(track) {
+        try { localStorage.setItem(`kv_music_track_${track.id}`, JSON.stringify(track)); } catch (_) { }
+        state.history = [track.id, ...state.history.filter(id => id !== track.id)].slice(0, 60);
+        persistHistory();
+    }
+
+    function loadStoredTracks(ids) {
+        const out = [];
+        for (const id of ids) {
+            try {
+                const raw = localStorage.getItem(`kv_music_track_${id}`);
+                if (raw) out.push(JSON.parse(raw));
+            } catch (_) { }
+        }
+        return out;
+    }
+
+    function play(queue, idx) {
+        if (!queue || !queue.length) return;
+        state.queue = queue.slice();
+        state.index = Math.max(0, Math.min(idx || 0, state.queue.length - 1));
+        loadCurrent(true);
+        renderQueue();
+
+        if (window.innerWidth <= 720) openNP();
+    }
+
+    function jumpTo(idx) {
+        if (idx < 0 || idx >= state.queue.length) return;
+        state.index = idx;
+        loadCurrent(true);
+        renderQueue();
+    }
+
+    function renderQueue() {
+        const list = $('#np-queue-list');
+        const count = $('#np-queue-count');
+        if (!list || !count) return;
+        const q = state.queue;
+        count.textContent = q.length ? `${q.length} track${q.length > 1 ? 's' : ''}` : 'Empty';
+        if (!q.length) {
+            list.innerHTML = `<div class="np-queue-empty">Pick a song to start playing.</div>`;
+            return;
+        }
+        list.innerHTML = q.map((t, i) => `
+            <button class="np-queue-row${i === state.index ? ' is-current' : ''}" data-qjump="${i}">
+                <span class="np-queue-cover">
+                    ${t.cover ? `<img src="${esc(t.cover)}" alt="" referrerpolicy="no-referrer">` : ''}
+                    ${i === state.index ? '<span class="np-queue-eq"><i></i><i></i><i></i></span>' : ''}
+                </span>
+                <span class="np-queue-text">
+                    <span class="np-queue-title">${esc(t.title)}</span>
+                    <span class="np-queue-sub">${esc((t.artists || []).map(a => a.name).join(', ') || t.animeName || '')}</span>
+                </span>
+                <span class="np-queue-tag">${i < state.index ? 'Played' : (i === state.index ? 'Now' : 'Next')}</span>
+            </button>
+        `).join('');
+        $$('[data-qjump]', list).forEach(btn => {
+            btn.addEventListener('click', () => jumpTo(parseInt(btn.dataset.qjump, 10)));
+        });
+
+        const cur = list.querySelector('.is-current');
+        if (cur) cur.scrollIntoView({ block: 'nearest' });
+    }
+
+    function loadCurrent(autoplay) {
+        const t = state.queue[state.index];
+        if (!t) return;
+        playerBar.dataset.empty = '0';
+
+        document.body.classList.remove('pb-hidden');
+
+        if (mediaMode === 'video' && !t.videoLink) {
+            setVideoMode(false, false);
+        }
+
+        if (mediaMode === 'video') {
+            video.src = t.videoLink;
+            try { audio.removeAttribute('src'); audio.load(); } catch (_) { }
+            video.muted = state.muted;
+            video.volume = state.volume;
+        } else {
+            audio.src = t.audio;
+            try { video.removeAttribute('src'); video.load(); } catch (_) { }
+            audio.muted = state.muted;
+            audio.volume = state.volume;
+        }
+
+        if (autoplay) {
+            const p = activeMedia().play();
+            if (p && p.catch) p.catch(() => { });
+        }
+        renderPlayerMeta(t);
+        pushHistory(t);
+        updateNowPlayingMarkers();
+    }
+
+    function setVideoMode(on, reload = true) {
+        const t = state.queue[state.index];
+        if (on && (!t || !t.videoLink)) {
+            toast && toast('No video available for this track');
+            return;
+        }
+        const wasPaused = activeMedia().paused;
+        const ct = activeMedia().currentTime || 0;
+        activeMedia().pause();
+
+        mediaMode = on ? 'video' : 'audio';
+        document.body.classList.toggle('np-video-on', mediaMode === 'video');
+        $('#np-video-btn').classList.toggle('is-on', mediaMode === 'video');
+        const npVid = $('#np-video');
+        const npCov = $('#np-cover');
+        if (npVid) npVid.hidden = mediaMode !== 'video';
+        if (npCov) npCov.hidden = mediaMode === 'video';
+
+        if (!t) return;
+
+        if (reload) {
+            if (mediaMode === 'video') {
+                video.src = t.videoLink;
+                try { audio.removeAttribute('src'); audio.load(); } catch (_) { }
+            } else {
+                audio.src = t.audio;
+                try { video.removeAttribute('src'); video.load(); } catch (_) { }
+            }
+            const m = activeMedia();
+            m.muted = state.muted;
+            m.volume = state.volume;
+            const onMeta = () => {
+                try { m.currentTime = ct; } catch (_) { }
+                if (!wasPaused) m.play().catch(() => { });
+                m.removeEventListener('loadedmetadata', onMeta);
+            };
+            m.addEventListener('loadedmetadata', onMeta);
+        }
+    }
+
+    function toast(msg) {
+        const c = $('#toast-container');
+        if (!c) return;
+        const el = document.createElement('div');
+        el.className = 'kv-toast';
+        el.textContent = msg;
+        c.appendChild(el);
+        setTimeout(() => el.classList.add('show'), 10);
+        setTimeout(() => { el.classList.remove('show'); setTimeout(() => el.remove(), 300); }, 2200);
+    }
+
+    function next(auto) {
+        if (!state.queue.length) return;
+        if (state.shuffle && state.queue.length > 1) {
+            let n;
+            do { n = Math.floor(Math.random() * state.queue.length); } while (n === state.index);
+            state.index = n;
+        } else {
+            state.index = state.index + 1;
+            if (state.index >= state.queue.length) {
+                if (state.loop || !auto) state.index = 0;
+                else { state.index = state.queue.length - 1; activeMedia().pause(); return; }
+            }
+        }
+        loadCurrent(true);
+        renderQueue();
+    }
+
+    function prev() {
+        if (!state.queue.length) return;
+        if (activeMedia().currentTime > 3) { activeMedia().currentTime = 0; return; }
+        state.index = (state.index - 1 + state.queue.length) % state.queue.length;
+        loadCurrent(true);
+        renderQueue();
+    }
+
+    function togglePlay() {
+        if (playerBar.dataset.empty === '1') return;
+        const m = activeMedia();
+        if (m.paused) m.play().catch(() => { });
+        else m.pause();
+    }
+
+    function setCoverImg(imgEl, btnEl, url) {
+        if (!imgEl) return;
+        if (url) {
+            imgEl.classList.remove('is-failed');
+            if (imgEl.getAttribute('src') !== url) imgEl.src = url;
+            if (btnEl) btnEl.classList.add('has-cover');
+        } else {
+            imgEl.removeAttribute('src');
+            imgEl.classList.add('is-failed');
+            if (btnEl) btnEl.classList.remove('has-cover');
+        }
+    }
+
+    function renderPlayerMeta(t) {
+        const pbCover = $('#pb-cover');
+        const pbCoverBtn = $('#pb-expand');
+        setCoverImg(pbCover, pbCoverBtn, t.cover || '');
+        const titleEl = $('#pb-title');
+        titleEl.textContent = t.title;
+        titleEl.dataset.animeId = t.animeId || '';
+        const artistEl = $('#pb-artist');
+        const artistsLabel = (t.artists && t.artists.length)
+            ? t.artists.map(a => a.name).join(', ')
+            : (t.animeName || '—');
+        if (t.artists && t.artists.length) {
+            const first = t.artists[0];
+            artistEl.textContent = artistsLabel;
+            artistEl.href = `#/artist/${encodeURIComponent(first.slug || first.id)}`;
+        } else {
+            artistEl.textContent = artistsLabel;
+            artistEl.href = `#/anime/${encodeURIComponent(t.animeId)}`;
+        }
+
+        const npCover = $('#np-cover');
+        const npTitle = $('#np-title');
+        const npArtist = $('#np-artist');
+        const npSource = $('#np-source-name');
+        const npBg = $('#np-bg');
+        setCoverImg(npCover, null, t.cover || '');
+        if (npTitle) { npTitle.textContent = t.title; npTitle.href = `#/anime/${encodeURIComponent(t.animeId)}`; }
+        if (npArtist) {
+            npArtist.textContent = artistsLabel;
+            const first = (t.artists || [])[0];
+            npArtist.href = first ? `#/artist/${encodeURIComponent(first.slug || first.id)}` : `#/anime/${encodeURIComponent(t.animeId)}`;
+        }
+        if (npSource) { npSource.textContent = t.animeName || '—'; npSource.href = `#/anime/${encodeURIComponent(t.animeId)}`; }
+        if (npBg && t.cover) npBg.style.backgroundImage = `url("${t.cover}")`;
+
+        const vidBtn = $('#np-video-btn');
+        if (vidBtn) vidBtn.classList.toggle('is-disabled', !t.videoLink);
+
+        const lyricsMeta = $('#np-lyrics-meta');
+        if (lyricsMeta) {
+            lyricsMeta.innerHTML = `
+                <div><span>Anime</span><strong>${esc(t.animeName || '—')}</strong></div>
+                <div><span>Type</span><strong>${esc(t.type || '—')}</strong></div>
+                <div><span>Episodes</span><strong>${esc(t.episodes || '—')}</strong></div>
+                <div><span>Artists</span><strong>${esc((t.artists || []).map(a => a.name).join(', ') || '—')}</strong></div>
+            `;
+        }
+
+        _syncedLines = [];
+        _activeLyricIdx = -1;
+        const lyricsBody = $('#np-lyrics-body');
+        if (lyricsBody) {
+            lyricsBody.dataset.trackId = t.id;
+            lyricsBody.innerHTML = '<span class="np-lyric-line is-loading">Loading lyrics…</span>';
+        }
+        fetchLyricsFor(t);
+
+        updatePlayerLike();
+    }
+
+    let _lyricsCache = {};
+    let _syncedLines = [];
+    let _rawSyncedLines = [];
+    let _lyricsDuration = 0;
+    let _activeLyricIdx = -1;
+    let _lyricRaf = null;
+
+    function parseLRC(lrc) {
+        const out = [];
+        const lineRe = /^((?:\[\d+:\d+(?:\.\d+)?\])+)(.*)$/;
+        const tagRe  = /\[(\d+):(\d+(?:\.\d+)?)\]/g;
+        for (const raw of String(lrc).split(/\r?\n/)) {
+            const m = raw.match(lineRe);
+            if (!m) continue;
+            const text = m[2].trim();
+            let tag;
+            while ((tag = tagRe.exec(m[1])) !== null) {
+                const t = parseInt(tag[1], 10) * 60 + parseFloat(tag[2]);
+                out.push({ t, text });
+            }
+        }
+        out.sort((a, b) => a.t - b.t);
+        return out;
+    }
+
+    function renderPlainLyrics(text) {
+        const body = $('#np-lyrics-body');
+        if (!body) return;
+        if (!text || !text.trim()) {
+            body.innerHTML = '<span class="np-lyric-line is-empty">We couldn\'t find lyrics for this track yet.</span>';
+            return;
+        }
+        const lines = text.split(/\r?\n/);
+        body.innerHTML = lines
+            .map(l => `<div class="np-lyric-line">${esc(l) || '&nbsp;'}</div>`)
+            .join('');
+    }
+
+    function renderSyncedLyrics(lines) {
+        const body = $('#np-lyrics-body');
+        if (!body) return;
+
+        body.style.transform = '';
+        body.scrollTop = 0;
+        body.innerHTML = lines
+            .map((l, i) => `<div class="np-lyric-line" data-i="${i}">${esc(l.text) || '&nbsp;'}</div>`)
+            .join('');
+    }
+
+    function recomputeSyncedLines() {
+        if (!_rawSyncedLines.length) { _syncedLines = []; return; }
+        _syncedLines = _rawSyncedLines.slice();
+        _activeLyricIdx = -1;
+    }
+
+    function updateLyricsHighlight(currentTime) {
+        if (!_syncedLines.length) return;
+
+        let lo = 0, hi = _syncedLines.length - 1, idx = -1;
+        while (lo <= hi) {
+            const mid = (lo + hi) >> 1;
+            if (_syncedLines[mid].t <= currentTime) { idx = mid; lo = mid + 1; }
+            else hi = mid - 1;
+        }
+        if (idx === _activeLyricIdx) return;
+        _activeLyricIdx = idx;
+        const body = $('#np-lyrics-body');
+        if (!body) return;
+        const lines = body.querySelectorAll('.np-lyric-line');
+        lines.forEach((el, i) => {
+            el.classList.toggle('is-active', i === idx);
+            el.classList.toggle('is-past',   i < idx);
+        });
+        if (idx < 0) return;
+        const active = lines[idx];
+        if (!active) return;
+
+        const viewH = body.clientHeight;
+        if (viewH <= 0) return;
+
+        const ACTIVE_RATIO = 0.42;
+        const target = active.offsetTop + (active.offsetHeight / 2) - (viewH * ACTIVE_RATIO);
+        scrollLyricsTo(body, Math.max(0, target));
+    }
+
+    let _lyricScrollRaf = 0;
+    function scrollLyricsTo(body, target) {
+        if (!body) return;
+        target = Math.max(0, Math.min(target, body.scrollHeight - body.clientHeight));
+        if (_lyricScrollRaf) cancelAnimationFrame(_lyricScrollRaf);
+        const start = body.scrollTop;
+        const delta = target - start;
+        if (Math.abs(delta) < 0.5) { body.scrollTop = target; return; }
+
+        const dist = Math.abs(delta);
+        const dur = Math.min(900, Math.max(280, dist * 0.9));
+        const t0 = performance.now();
+        const ease = (x) => 1 - Math.pow(1 - x, 3);
+        const step = (now) => {
+            const k = Math.min(1, (now - t0) / dur);
+            body.scrollTop = start + delta * ease(k);
+            if (k < 1) _lyricScrollRaf = requestAnimationFrame(step);
+            else _lyricScrollRaf = 0;
+        };
+        _lyricScrollRaf = requestAnimationFrame(step);
+    }
+
+    function cleanLyricTitle(raw) {
+        if (!raw) return '';
+        let s = String(raw);
+
+        s = s.replace(/^\s*(?:OP|ED|IN)\s*\d*\s*[-–:]\s*/i, '');
+        s = s.replace(/^\s*(?:Opening|Ending|Insert\s*Song|Theme)\s*\d*\s*[-–:]\s*/i, '');
+
+        s = s.replace(/\([^)]*\)/g, '');
+        s = s.replace(/\[[^\]]*\]/g, '');
+
+        s = s.replace(/^[\s"'“”『「]+|[\s"'“”』」]+$/g, '');
+        return s.trim();
+    }
+
+    function waitForAudioDuration(m, timeoutMs) {
+        return new Promise((resolve) => {
+            if (!m) return resolve(0);
+            if (isFinite(m.duration) && m.duration > 0) return resolve(m.duration);
+            let done = false;
+            const finish = (v) => {
+                if (done) return;
+                done = true;
+                m.removeEventListener('loadedmetadata', onMeta);
+                m.removeEventListener('durationchange', onMeta);
+                resolve(v);
+            };
+            const onMeta = () => {
+                if (isFinite(m.duration) && m.duration > 0) finish(m.duration);
+            };
+            m.addEventListener('loadedmetadata', onMeta);
+            m.addEventListener('durationchange', onMeta);
+            setTimeout(() => finish(0), timeoutMs || 4000);
+        });
+    }
+
+    async function fetchLyricsFor(track) {
+        if (!track) return;
+        const lyricsBody = $('#np-lyrics-body');
+        if (!lyricsBody) return;
+        const key = track.id;
+        const apply = (data) => {
+            if (lyricsBody.dataset.trackId !== key) return;
+            const synced = data && data.synced;
+            const plain  = data && data.lyrics;
+            _lyricsDuration = (data && Number(data.duration)) || 0;
+            if (synced) {
+                _rawSyncedLines = parseLRC(synced).filter(l => l.text || l.text === '');
+                if (_rawSyncedLines.length) {
+                    recomputeSyncedLines();
+                    renderSyncedLyrics(_syncedLines);
+                    return;
+                }
+            }
+            _rawSyncedLines = [];
+            _syncedLines = [];
+            renderPlainLyrics(plain || (synced ? String(synced).replace(/^\[\d+:\d+(?:\.\d+)?\]\s?/gm, '') : ''));
+        };
+
+        const audioDur = await waitForAudioDuration(activeMedia(), 4000);
+        if (lyricsBody.dataset.trackId !== key) return;
+
+        const durBucket = audioDur ? Math.round(audioDur / 5) * 5 : 0;
+        const cacheKey = `${key}|${durBucket}`;
+        if (_lyricsCache[cacheKey] != null) { apply(_lyricsCache[cacheKey]); return; }
+
+        const title  = cleanLyricTitle(track.title || '');
+
+        const firstArtist = ((track.artists || [])[0] || {}).name || '';
+        try {
+            const durQs = audioDur ? `&duration=${audioDur.toFixed(2)}` : '';
+            const url = `/api/lyrics?title=${encodeURIComponent(title)}&artist=${encodeURIComponent(firstArtist)}${durQs}`;
+            const res = await fetch(url);
+            const data = await res.json();
+            _lyricsCache[cacheKey] = data;
+            apply(data);
+        } catch (_) {
+            apply({});
+        }
+    }
+
+    function updatePlayerLike() {
+        const t = state.queue[state.index];
+        const btn = $('#pb-like');
+        const npBtn = $('#np-like');
+        const liked = !!(t && state.liked.has(t.id));
+        if (btn) btn.classList.toggle('is-liked', liked);
+        if (npBtn) npBtn.classList.toggle('is-liked', liked);
+    }
+
+    function updateNowPlayingMarkers() {
+        const t = state.queue[state.index];
+        $$('.ms-track').forEach(row => {
+            row.classList.toggle('is-playing', !!(t && row.dataset.tid === t.id));
+        });
+    }
+
+    function setPlayUI(playing) {
+        const pause = '<path d="M6 5h4v14H6zm8 0h4v14h-4z"/>';
+        const play = '<path d="M8 5v14l11-7z"/>';
+        const ic = playing ? pause : play;
+        const set = (id) => {
+            const el = $('#' + id);
+            if (el) el.outerHTML = `<svg id="${id}" viewBox="0 0 24 24" fill="currentColor">${ic}</svg>`;
+        };
+        set('pb-play-svg');
+        set('pb-play-mobile-svg');
+        set('np-play-svg');
+
+        document.body.classList.toggle('is-playing', !!playing);
+    }
+
+    function openNP() {
+        if (playerBar.dataset.empty === '1') return;
+        npModal.hidden = false;
+        document.body.classList.add('np-open');
+
+        $('#np-shuffle').classList.toggle('is-on', state.shuffle);
+        $('#np-loop').classList.toggle('is-on', state.loop);
+        $('#np-video-btn').classList.toggle('is-on', mediaMode === 'video');
+        setSeek();
+        updatePlayerLike();
+    }
+    function closeNP() {
+        npModal.hidden = true;
+        document.body.classList.remove('np-open');
+        document.body.classList.remove('np-lyrics-open');
+    }
+
+    function setVolUI() {
+        const v = state.muted ? 0 : state.volume;
+        $('#pb-vol-fill').style.width = (v * 100) + '%';
+        const knob = $('#pb-vol-knob');
+        if (knob) knob.style.left = (v * 100) + '%';
+        const svg = $('#pb-vol-svg');
+        if (!svg) return;
+        let path;
+        if (v === 0) path = '<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/>';
+        else if (v < 0.5) path = '<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>';
+        else path = '<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>';
+        svg.innerHTML = path;
+    }
+
+    function setSeek(t) {
+        const m = activeMedia();
+        const dur = m.duration;
+        const cur = t == null ? m.currentTime : t;
+        $('#pb-cur').textContent = fmtTime(cur);
+        $('#pb-dur').textContent = fmtTime(dur);
+        const pct = dur ? (cur / dur) * 100 : 0;
+        $('#pb-seek-fill').style.width = pct + '%';
+        const knob = $('#pb-seek-knob');
+        if (knob) knob.style.left = pct + '%';
+
+        const npCur = $('#np-cur'), npDur = $('#np-dur'), npFill = $('#np-seek-fill'), npKnob = $('#np-seek-knob');
+        if (npCur) npCur.textContent = fmtTime(cur);
+        if (npDur) npDur.textContent = fmtTime(dur);
+        if (npFill) npFill.style.width = pct + '%';
+        if (npKnob) npKnob.style.left = pct + '%';
+    }
+
+    function bindBar(bar, onChange) {
+        let pending = null;
+        let rafId = 0;
+        const flush = () => {
+            rafId = 0;
+            if (pending != null) { onChange(pending); pending = null; }
+        };
+        const schedule = (pct) => {
+            pending = pct;
+            if (!rafId) rafId = requestAnimationFrame(flush);
+        };
+        const setFromEvent = (e) => {
+            const r = bar.getBoundingClientRect();
+            const x = (e.touches ? e.touches[0].clientX : e.clientX) - r.left;
+            const pct = Math.max(0, Math.min(1, x / r.width));
+            schedule(pct);
+        };
+        let dragging = false;
+        const onUp = () => {
+            dragging = false;
+            state.scrubbing = false;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('touchmove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('touchend', onUp);
+            if (rafId) { cancelAnimationFrame(rafId); rafId = 0; flush(); }
+        };
+        const onMove = (e) => { if (dragging) setFromEvent(e); };
+        bar.addEventListener('mousedown', (e) => {
+            dragging = true; state.scrubbing = true; setFromEvent(e);
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+        });
+        bar.addEventListener('touchstart', (e) => {
+            dragging = true; state.scrubbing = true; setFromEvent(e);
+            document.addEventListener('touchmove', onMove, { passive: true });
+            document.addEventListener('touchend', onUp);
+        }, { passive: true });
+        bar.addEventListener('click', setFromEvent);
+    }
+
+    let _stageSpinnerTimer = 0;
+    function showStageLoading(on) {
+        const el = $('#np-loading');
+        if (!el) return;
+        if (on) {
+            if (_stageSpinnerTimer) return;
+            _stageSpinnerTimer = setTimeout(() => {
+                _stageSpinnerTimer = 0;
+                el.hidden = false;
+            }, 350);
+        } else {
+            if (_stageSpinnerTimer) { clearTimeout(_stageSpinnerTimer); _stageSpinnerTimer = 0; }
+            el.hidden = true;
+        }
+    }
+
+    function navigate(hash) {
+        if (location.hash !== hash) location.hash = hash;
+        else handleRoute();
+    }
+
+    function handleRoute() {
+        const hash = location.hash || '#/';
+        if (state.navStack[state.navStack.length - 1] !== hash) {
+            state.navStack.push(hash);
+            state.navFwd = [];
+        }
+        $('#ms-back').disabled = state.navStack.length <= 1;
+        $('#ms-fwd').disabled = state.navFwd.length === 0;
+
+        $$('.ms-link').forEach(l => {
+            l.classList.toggle('active', l.dataset.route === hash || (hash === '#/' && l.dataset.route === '#/'));
+        });
+
+        if (hash.startsWith('#/search?')) {
+            const q = decodeURIComponent(hash.split('q=')[1] || '');
+            $('#ms-search-input').value = q;
+            $('#ms-search-clear').hidden = !q;
+            renderSearch(q);
+        } else if (hash.startsWith('#/anime/')) {
+            renderAnime(decodeURIComponent(hash.split('/')[2] || ''));
+        } else if (hash.startsWith('#/artist/')) {
+            renderArtist(decodeURIComponent(hash.split('/')[2] || ''));
+        } else if (hash.startsWith('#/year/')) {
+            renderYear(hash.split('/')[2]);
+        } else if (hash === '#/recent') renderRecent();
+        else if (hash === '#/liked') renderLiked();
+        else if (hash === '#/history') renderHistory();
+        else if (hash === '#/artists') renderTopArtists();
+        else renderHome();
+
+        view.scrollTo({ top: 0 });
+        $('#music-main').scrollTo({ top: 0 });
+        closeSidebarIfMobile();
+    }
+
+    function loadingHTML(label) {
+        return `<div class="ms-loading"><div class="ms-spinner"></div><div>${esc(label || 'Loading…')}</div></div>`;
+    }
+
+    function emptyHTML(title, sub) {
+        return `<div class="ms-empty">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+            <h3>${esc(title)}</h3>
+            <p>${esc(sub || '')}</p>
+        </div>`;
+    }
+
+    function animeCardHTML(anime) {
+        const cover = coverUrl(anime);
+        const themesCount = (anime.animethemes || []).length;
+        const sub = themesCount ? `${themesCount} theme${themesCount > 1 ? 's' : ''} · ${anime.year || ''}` : `${anime.year || ''} · ${anime.media_format || ''}`;
+        return `<a class="ms-card" data-anime-id="${esc(anime.id)}" href="#/anime/${encodeURIComponent(anime.id)}">
+            <div class="ms-card-cover-wrap">
+                ${coverImg(cover, anime.name)}
+                <button class="ms-card-play" data-play-anime="${esc(anime.id)}" aria-label="Play">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                </button>
+            </div>
+            <div class="ms-card-title">${esc(anime.name)}</div>
+            <div class="ms-card-sub">${esc(sub)}</div>
+        </a>`;
+    }
+
+    function artistCardHTML(artist) {
+        const img = artistImageUrl(artist);
+        return `<a class="ms-card is-artist" href="#/artist/${encodeURIComponent(artist.slug || artist.id)}">
+            <div class="ms-card-cover-wrap">
+                ${coverImg(img, artist.name)}
+            </div>
+            <div class="ms-card-title">${esc(artist.name)}</div>
+            <div class="ms-card-sub">Artist</div>
+        </a>`;
+    }
+
+    function songCardHTML(song) {
+        const themes = song.animethemes || [];
+        const firstAnime = themes[0]?.anime;
+        const artists = (song.artists || []).map(a => a.name).join(', ');
+        const href = firstAnime ? `#/anime/${encodeURIComponent(firstAnime.id)}` : '#/';
+        return `<a class="ms-card" href="${href}">
+            <div class="ms-card-cover-wrap">
+                ${placeholderCover(song.title)}
+                ${firstAnime ? `<button class="ms-card-play" data-play-song-anime="${esc(firstAnime.id)}" data-song-theme="${esc(themes[0].id)}" aria-label="Play">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                </button>` : ''}
+            </div>
+            <div class="ms-card-title">${esc(song.title)}</div>
+            <div class="ms-card-sub">${esc(artists || (firstAnime?.name || ''))}</div>
+        </a>`;
+    }
+
+    function bindCardClicks(scope) {
+        $$('[data-play-anime]', scope).forEach(btn => {
+            btn.addEventListener('click', async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const id = btn.dataset.playAnime;
+                btn.disabled = true;
+                try {
+                    const data = await api.anime(id);
+                    const a = data.anime;
+                    if (!a) return;
+                    const tracks = tracksFromAnime(a);
+                    if (tracks.length) play(tracks, 0);
+                } finally { btn.disabled = false; }
+            });
+        });
+        $$('[data-play-song-anime]', scope).forEach(btn => {
+            btn.addEventListener('click', async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const aid = btn.dataset.playSongAnime;
+                const themeId = btn.dataset.songTheme;
+                btn.disabled = true;
+                try {
+                    const data = await api.anime(aid);
+                    const a = data.anime;
+                    if (!a) return;
+                    const tracks = tracksFromAnime(a);
+                    if (!tracks.length) return;
+                    const idx = Math.max(0, tracks.findIndex(t => String(t.themeId) === String(themeId)));
+                    play(tracks, idx);
+                } finally { btn.disabled = false; }
+            });
+        });
+    }
+
+    function renderHome() {
+        const hour = new Date().getHours();
+        const greet = hour < 5 ? 'Good evening' : hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
+
+        view.innerHTML = `
+            <div class="ms-home-hero">
+                <h1 class="ms-home-greet">${greet}</h1>
+                <div class="ms-quick-grid" id="home-quick"></div>
+            </div>
+
+            <div class="ms-section-title">
+                <h2>Newest themes</h2>
+                <a href="#/recent">View all</a>
+            </div>
+            <div class="ms-card-grid" id="home-recent">${loadingHTML()}</div>
+
+            <div class="ms-section-title">
+                <h2>Popular artists</h2>
+                <a href="#/artists">View all</a>
+            </div>
+            <div class="ms-card-grid" id="home-artists">${loadingHTML()}</div>
+
+            <div class="ms-section-title">
+                <h2>From your library</h2>
+                <a href="#/liked">View all</a>
+            </div>
+            <div id="home-liked"></div>
+
+            <div class="ms-section-title">
+                <h2>Browse by year</h2>
+            </div>
+            <div class="ms-card-grid ms-years-grid" id="home-years"></div>
+        `;
+
+        const quickEl = $('#home-quick');
+        const quickIds = [];
+        Array.from(state.liked).slice(0, 4).forEach(id => quickIds.push(id));
+        state.history.slice(0, 6).forEach(id => { if (!quickIds.includes(id)) quickIds.push(id); });
+        const quickTracks = loadStoredTracks(quickIds.slice(0, 6));
+        if (quickTracks.length) {
+            quickEl.innerHTML = quickTracks.map(t => `
+                <a class="ms-quick-tile" href="#/anime/${encodeURIComponent(t.animeId)}" data-quick-tid="${esc(t.id)}">
+                    ${t.cover ? `<img class="ms-quick-cover" src="${esc(t.cover)}" alt="" loading="lazy" referrerpolicy="no-referrer">` : `<div class="ms-quick-cover" style="background:linear-gradient(135deg,#4c1d95,#1e1b4b)"></div>`}
+                    <span class="ms-quick-name">${esc(t.title)}</span>
+                    <button class="ms-quick-play" data-play-quick="${esc(t.id)}" aria-label="Play">
+                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                    </button>
+                </a>
+            `).join('');
+            $$('[data-play-quick]', quickEl).forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    e.preventDefault(); e.stopPropagation();
+                    const t = quickTracks.find(x => x.id === btn.dataset.playQuick);
+                    if (t) play([t], 0);
+                });
+            });
+        } else {
+            quickEl.innerHTML = `<div class="ms-quick-empty">Like songs and they'll show up here for one-tap play.</div>`;
+        }
+
+        api.recent().then(d => {
+            const items = (d.anime || []).slice(0, 12);
+            $('#home-recent').innerHTML = items.length
+                ? items.map(animeCardHTML).join('')
+                : emptyHTML('No themes found', '');
+            bindCardClicks($('#home-recent'));
+        }).catch(() => { $('#home-recent').innerHTML = emptyHTML('Could not load', 'Try again in a moment.'); });
+
+        api.artists().then(d => {
+            const items = (d.artists || []).slice(0, 8);
+            $('#home-artists').innerHTML = items.length
+                ? items.map(artistCardHTML).join('')
+                : emptyHTML('No artists', '');
+        }).catch(() => { $('#home-artists').innerHTML = emptyHTML('Could not load', 'Try again in a moment.'); });
+
+        const likedEl = $('#home-liked');
+        const likedTracks = loadStoredTracks(Array.from(state.liked).slice(0, 6));
+        if (likedTracks.length) {
+            likedEl.innerHTML = `<div class="ms-card-grid">${likedTracks.map(t => `
+                <div class="ms-card" data-tid="${esc(t.id)}">
+                    <div class="ms-card-cover-wrap">
+                        ${t.cover ? `<img class="ms-card-cover" src="${esc(t.cover)}" alt="" loading="lazy" referrerpolicy="no-referrer">` : placeholderCover(t.title)}
+                        <button class="ms-card-play" data-play-liked="${esc(t.id)}" aria-label="Play">
+                            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                        </button>
+                    </div>
+                    <div class="ms-card-title">${esc(t.title)}</div>
+                    <div class="ms-card-sub">${esc((t.artists || []).map(a => a.name).join(', ') || t.animeName || '')}</div>
+                </div>
+            `).join('')}</div>`;
+            $$('[data-play-liked]', likedEl).forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    e.preventDefault(); e.stopPropagation();
+                    const t = likedTracks.find(x => x.id === btn.dataset.playLiked);
+                    if (t) play([t], 0);
+                });
+            });
+        } else {
+            likedEl.innerHTML = `<div class="ms-empty" style="padding:36px 12px"><h3>Your library is empty</h3><p>Like songs to see them here.</p></div>`;
+        }
+
+        const yearsEl = $('#home-years');
+        const cy = new Date().getFullYear();
+        const years = [];
+        for (let y = cy; y >= cy - 7; y--) years.push(y);
+        const yearGradients = [
+            ['#7c3aed', '#1e1b4b'], ['#5b21b6', '#0f172a'], ['#4c1d95', '#1e293b'],
+            ['#9d6ef8', '#312e81'], ['#6d28d9', '#0b1023'], ['#7c3aed', '#0f0d1f'],
+            ['#5b21b6', '#1f1430'], ['#4c1d95', '#0a0712'],
+        ];
+        yearsEl.innerHTML = years.map((y, i) => {
+            const [a, b] = yearGradients[i % yearGradients.length];
+            return `<a class="ms-year-card" href="#/year/${y}">
+                <div class="ms-year-cover" style="background:linear-gradient(135deg, ${a} 0%, ${b} 100%);">
+                    <span class="ms-year-num">${y}</span>
+                </div>
+                <div class="ms-card-title">${y}</div>
+                <div class="ms-card-sub">Themes from ${y}</div>
+            </a>`;
+        }).join('');
+    }
+
+    function renderRecent() {
+        view.innerHTML = `<div class="ms-section-title" style="margin-top:14px"><h2>Newest themes</h2></div>
+            <div class="ms-card-grid" id="recent-grid">${loadingHTML()}</div>`;
+        api.recent().then(d => {
+            const items = d.anime || [];
+            $('#recent-grid').innerHTML = items.length
+                ? items.map(animeCardHTML).join('')
+                : emptyHTML('No themes available', '');
+            bindCardClicks($('#recent-grid'));
+        });
+    }
+
+    function renderYear(y) {
+        view.innerHTML = `<div class="ms-section-title" style="margin-top:14px"><h2>Themes from ${esc(y)}</h2></div>
+            <div class="ms-card-grid" id="year-grid">${loadingHTML()}</div>`;
+        api.year(y).then(d => {
+            const items = d.anime || [];
+            $('#year-grid').innerHTML = items.length
+                ? items.map(animeCardHTML).join('')
+                : emptyHTML('Nothing here yet', `No themes catalogued for ${y}.`);
+            bindCardClicks($('#year-grid'));
+        });
+    }
+
+    function renderTopArtists() {
+        view.innerHTML = `<div class="ms-section-title" style="margin-top:14px"><h2>Artists</h2></div>
+            <div class="ms-card-grid" id="artists-grid">${loadingHTML()}</div>`;
+        api.artists().then(d => {
+            const items = d.artists || [];
+            $('#artists-grid').innerHTML = items.length
+                ? items.map(artistCardHTML).join('')
+                : emptyHTML('No artists', '');
+        });
+    }
+
+    function renderLiked() {
+        const tracks = loadStoredTracks(Array.from(state.liked));
+        if (!tracks.length) {
+            view.innerHTML = `<div class="ms-album-hero">
+                <div class="ms-album-cover" style="display:flex;align-items:center;justify-content:center;">
+                    <svg viewBox="0 0 24 24" width="80" height="80" fill="#fff" style="opacity:0.85"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+                </div>
+                <div class="ms-album-info">
+                    <div class="ms-album-eyebrow">Playlist</div>
+                    <h1 class="ms-album-title">Liked Songs</h1>
+                    <div class="ms-album-meta">0 tracks</div>
+                </div>
+            </div>${emptyHTML('No liked songs yet', 'Tap the heart on any track to save it here.')}`;
+            return;
+        }
+        renderTracklist({
+            eyebrow: 'Playlist',
+            title: 'Liked Songs',
+            cover: tracks[0].cover,
+            countLabel: `${tracks.length} track${tracks.length > 1 ? 's' : ''}`,
+            tracks,
+            asPlaylist: true,
+        });
+    }
+
+    function renderHistory() {
+        const tracks = loadStoredTracks(state.history);
+        if (!tracks.length) {
+            view.innerHTML = emptyHTML('Nothing recently played', 'Play some songs to build your history.');
+            return;
+        }
+        renderTracklist({
+            eyebrow: 'History',
+            title: 'Recently Played',
+            cover: tracks[0].cover,
+            countLabel: `${tracks.length} track${tracks.length > 1 ? 's' : ''}`,
+            tracks,
+            asPlaylist: true,
+        });
+    }
+
+    async function renderAnime(id) {
+        view.innerHTML = loadingHTML('Loading album…');
+        try {
+            const data = await api.anime(id);
+            const a = data.anime;
+            if (!a) { view.innerHTML = emptyHTML('Not found', 'This anime has no themes catalogued.'); return; }
+            const tracks = tracksFromAnime(a);
+            renderTracklist({
+                eyebrow: a.media_format || 'Anime',
+                title: a.name,
+                cover: coverUrl(a),
+                countLabel: `${tracks.length} track${tracks.length === 1 ? '' : 's'} · ${a.year || ''}${a.season ? ' · ' + a.season : ''}`,
+                tracks,
+                asPlaylist: false,
+            });
+        } catch (e) {
+            view.innerHTML = emptyHTML('Could not load', 'Please try again.');
+        }
+    }
+
+    async function renderArtist(slug) {
+        view.innerHTML = loadingHTML('Loading artist…');
+        try {
+            const data = await api.artist(slug);
+            const a = data.artist;
+            if (!a) { view.innerHTML = emptyHTML('Artist not found', ''); return; }
+            const tracks = [];
+            for (const song of (a.songs || [])) {
+                for (const theme of (song.animethemes || [])) {
+                    if (!theme.anime) continue;
+                    const merged = { ...theme, song };
+                    const tk = trackFromTheme(theme.anime, merged);
+                    if (tk) tracks.push(tk);
+                }
+            }
+            renderTracklist({
+                eyebrow: 'Artist',
+                title: a.name,
+                cover: artistImageUrl(a),
+                round: true,
+                countLabel: `${tracks.length} track${tracks.length === 1 ? '' : 's'}`,
+                tracks,
+                asPlaylist: true,
+            });
+        } catch (e) {
+            view.innerHTML = emptyHTML('Could not load', 'Please try again.');
+        }
+    }
+
+    function renderTracklist({ eyebrow, title, cover, countLabel, tracks, asPlaylist, round }) {
+        const heroCoverHTML = cover
+            ? `<img src="${esc(cover)}" alt="" referrerpolicy="no-referrer">`
+            : `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:4rem;font-weight:900;">${esc(title.slice(0, 1))}</div>`;
+        view.innerHTML = `
+            <div class="ms-album-hero">
+                <div class="ms-album-cover" ${round ? 'style="border-radius:50%;"' : ''}>${heroCoverHTML}</div>
+                <div class="ms-album-info">
+                    <div class="ms-album-eyebrow">${esc(eyebrow)}</div>
+                    <h1 class="ms-album-title">${esc(title)}</h1>
+                    <div class="ms-album-meta">${esc(countLabel)}</div>
+                </div>
+            </div>
+            <div class="ms-album-actions">
+                <button class="ms-play-big" id="album-play" aria-label="Play all">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                </button>
+                <button class="ms-icon-btn" id="album-shuffle" aria-label="Shuffle">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
+                </button>
+            </div>
+            <div class="ms-tracks">
+                ${tracks.length ? `
+                <div class="ms-tracks-head">
+                    <span style="text-align:center">#</span>
+                    <span>Title</span>
+                    <span class="ms-th-anime">${asPlaylist ? 'Anime' : 'Type'}</span>
+                    <span class="ms-th-tag">${asPlaylist ? 'Type' : 'Episodes'}</span>
+                    <span></span>
+                </div>
+                ${tracks.map((t, i) => trackRowHTML(t, i, asPlaylist)).join('')}
+                ` : emptyHTML('No tracks found', '')}
+            </div>
+        `;
+        const playAll = $('#album-play');
+        if (playAll) playAll.addEventListener('click', () => { if (tracks.length) play(tracks, 0); });
+        const shuf = $('#album-shuffle');
+        if (shuf) shuf.addEventListener('click', () => {
+            if (!tracks.length) return;
+            const shuffled = tracks.slice().sort(() => Math.random() - 0.5);
+            state.shuffle = false;
+            play(shuffled, 0);
+        });
+        bindTrackRows(tracks);
+        updateNowPlayingMarkers();
+    }
+
+    function trackRowHTML(t, i, asPlaylist) {
+        const tagClass = (t.typeKind || '').toUpperCase() === 'ED' ? 'ed' : ((t.typeKind || '').toUpperCase() === 'IN' ? 'in' : '');
+        const artistsText = (t.artists || []).map(a => `<a href="#/artist/${encodeURIComponent(a.slug || a.id)}" data-stop>${esc(a.name)}</a>`).join(', ');
+        const middleCol = asPlaylist
+            ? `<a class="ms-track-anime" href="#/anime/${encodeURIComponent(t.animeId)}" data-stop>${esc(t.animeName)}</a>`
+            : `<span class="ms-track-tag-cell"><span class="ms-track-tag ${tagClass}">${esc(t.type)}</span></span>`;
+        const fourthCol = asPlaylist
+            ? `<span class="ms-track-tag-cell"><span class="ms-track-tag ${tagClass}">${esc(t.type)}</span></span>`
+            : `<span class="ms-track-anime">${esc(t.episodes || '—')}</span>`;
+        return `<div class="ms-track" data-tid="${esc(t.id)}" data-idx="${i}">
+            <div class="ms-track-num">
+                <span class="ms-num">${i + 1}</span>
+                <span class="ms-now-bars"><span></span><span></span><span></span></span>
+                <span class="ms-play-mini"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></span>
+            </div>
+            <div class="ms-track-meta">
+                ${t.cover ? `<img class="ms-track-cover" src="${esc(t.cover)}" alt="" loading="lazy" referrerpolicy="no-referrer">` : '<div class="ms-track-cover"></div>'}
+                <div class="ms-track-text">
+                    <div class="ms-track-title">${esc(t.title)}</div>
+                    <div class="ms-track-sub">${artistsText || esc(t.animeName)}</div>
+                </div>
+            </div>
+            ${middleCol}
+            ${fourthCol}
+            <button class="ms-track-like ${state.liked.has(t.id) ? 'is-liked' : ''}" data-tid="${esc(t.id)}" data-stop aria-label="Like">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+            </button>
+        </div>`;
+    }
+
+    function bindTrackRows(tracks) {
+        $$('.ms-track', view).forEach(row => {
+            row.addEventListener('click', (e) => {
+                if (e.target.closest('[data-stop]')) return;
+                const idx = parseInt(row.dataset.idx, 10);
+                if (!isNaN(idx)) play(tracks, idx);
+            });
+        });
+        $$('.ms-track-like', view).forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.preventDefault(); e.stopPropagation();
+                const id = btn.dataset.tid;
+                const t = tracks.find(x => x.id === id);
+                if (t) toggleLike(t);
+            });
+        });
+    }
+
+    function songRowHTML(track, idx) {
+        const artistsText = (track.artists || []).map(a => `<a href="#/artist/${encodeURIComponent(a.slug || a.id)}" data-stop>${esc(a.name)}</a>`).join(', ');
+        return `<div class="ms-song-row" data-tid="${esc(track.id)}" data-idx="${idx}">
+            <div class="ms-song-cover-wrap">
+                ${track.cover ? `<img class="ms-song-cover" src="${esc(track.cover)}" alt="" loading="lazy" referrerpolicy="no-referrer">` : '<div class="ms-song-cover"></div>'}
+                <span class="ms-song-play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span>
+            </div>
+            <div class="ms-song-text">
+                <div class="ms-song-title">${esc(track.title)}</div>
+                <div class="ms-song-sub">${artistsText || '<a href="#/anime/' + encodeURIComponent(track.animeId) + '" data-stop>' + esc(track.animeName) + '</a>'}</div>
+            </div>
+            <button class="ms-song-like ${state.liked.has(track.id) ? 'is-liked' : ''}" data-tid="${esc(track.id)}" data-stop aria-label="Like">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+            </button>
+        </div>`;
+    }
+
+    function bindSongRows(scope, tracks) {
+        $$('.ms-song-row', scope).forEach(row => {
+            row.addEventListener('click', (e) => {
+                if (e.target.closest('[data-stop]')) return;
+                const idx = parseInt(row.dataset.idx, 10);
+                if (!isNaN(idx) && tracks[idx]) play(tracks, idx);
+            });
+        });
+        $$('.ms-song-like', scope).forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.preventDefault(); e.stopPropagation();
+                const id = btn.dataset.tid;
+                const t = tracks.find(x => x.id === id);
+                if (t) toggleLike(t);
+            });
+        });
+    }
+
+    async function renderSearch(q) {
+        if (!q) { renderHome(); return; }
+        view.innerHTML = loadingHTML(`Searching "${q}"…`);
+        const filter = (state.searchFilter || 'all');
+        try {
+            const data = await api.search(q);
+            window.__lastSearch = data;
+            const anime = data.anime || [];
+            const themes = data.animethemes || [];
+            const artists = data.artists || [];
+            const songs = data.songs || [];
+
+            const themeTracks = themes
+                .map(th => th.anime ? trackFromTheme(th.anime, th) : null)
+                .filter(Boolean);
+
+            const tabsHTML = `<div class="ms-search-tabs">
+                ${['all','anime','songs','artists'].map(f =>
+                    `<button class="ms-tab ${filter===f?'active':''}" data-filter="${f}">${f[0].toUpperCase()+f.slice(1)}</button>`
+                ).join('')}
+            </div>`;
+
+            const noResults = !anime.length && !artists.length && !songs.length && !themeTracks.length;
+            if (noResults) {
+                view.innerHTML = `${tabsHTML}${emptyHTML(`No results for "${q}"`, 'Try a different anime, song, or artist.')}`;
+                bindSearchTabs(q);
+                return;
+            }
+
+            let topResultHTML = '';
+            const topAnime = anime[0];
+            if (topAnime && (filter === 'all' || filter === 'anime')) {
+                const cover = coverUrl(topAnime);
+                topResultHTML = `<div class="ms-top-result">
+                    <div>
+                        <div class="ms-section-title" style="margin:0 0 14px"><h2>Top result</h2></div>
+                        <a class="ms-top-card" href="#/anime/${encodeURIComponent(topAnime.id)}">
+                            ${cover ? `<img class="ms-top-cover" src="${esc(cover)}" alt="" referrerpolicy="no-referrer">` : `<div class="ms-top-cover" style="background:linear-gradient(135deg,#4c1d95,#1e1b4b)"></div>`}
+                            <div class="ms-top-name">${esc(topAnime.name)}</div>
+                            <span class="ms-top-tag">Anime${topAnime.year ? ' · ' + esc(topAnime.year) : ''}</span>
+                            <button class="ms-top-play" data-play-anime="${esc(topAnime.id)}" aria-label="Play">
+                                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                            </button>
+                        </a>
+                    </div>
+                    ${themeTracks.length ? `<div class="ms-top-songs">
+                        <h3>Songs</h3>
+                        <div class="ms-songlist" id="search-top-songs">
+                            ${themeTracks.slice(0, 4).map((tk, i) => songRowHTML(tk, i)).join('')}
+                        </div>
+                    </div>` : ''}
+                </div>`;
+            }
+
+            const animeBlock = (filter === 'all' || filter === 'anime') && anime.length ? `<div class="ms-search-block">
+                <div class="ms-section-title"><h2>Anime</h2></div>
+                <div class="ms-card-grid">${anime.slice(0, filter === 'anime' ? 24 : 8).map(animeCardHTML).join('')}</div>
+            </div>` : '';
+
+            const artistsBlock = (filter === 'all' || filter === 'artists') && artists.length ? `<div class="ms-search-block">
+                <div class="ms-section-title"><h2>Artists</h2></div>
+                <div class="ms-card-grid">${artists.slice(0, filter === 'artists' ? 24 : 8).map(artistCardHTML).join('')}</div>
+            </div>` : '';
+
+            let songsBlock = '';
+            if ((filter === 'all' || filter === 'songs')) {
+                const songTracksAll = themeTracks.length ? themeTracks : [];
+                if (songTracksAll.length) {
+                    const limit = filter === 'songs' ? songTracksAll.length : 8;
+                    songsBlock = `<div class="ms-search-block">
+                        <div class="ms-section-title"><h2>Songs</h2></div>
+                        <div class="ms-songlist" id="search-songs-list">
+                            ${songTracksAll.slice(0, limit).map((tk, i) => songRowHTML(tk, i)).join('')}
+                        </div>
+                    </div>`;
+                } else if (songs.length) {
+                    songsBlock = `<div class="ms-search-block">
+                        <div class="ms-section-title"><h2>Songs</h2></div>
+                        <div class="ms-card-grid">${songs.slice(0, 8).map(songCardHTML).join('')}</div>
+                    </div>`;
+                }
+            }
+
+            view.innerHTML = `
+                ${tabsHTML}
+                ${topResultHTML}
+                ${animeBlock}
+                ${songsBlock}
+                ${artistsBlock}
+            `;
+
+            bindSearchTabs(q);
+            bindCardClicks(view);
+
+            const topListEl = $('#search-top-songs');
+            if (topListEl) bindSongRows(topListEl, themeTracks.slice(0, 4));
+            const songsListEl = $('#search-songs-list');
+            if (songsListEl) {
+                const limit = filter === 'songs' ? themeTracks.length : 8;
+                bindSongRows(songsListEl, themeTracks.slice(0, limit));
+            }
+            updateNowPlayingMarkers();
+        } catch (e) {
+            console.error('[music] search failed', e);
+            view.innerHTML = emptyHTML('Search failed', 'Please try again.');
+        }
+    }
+
+    function bindSearchTabs(q) {
+        $$('.ms-tab', view).forEach(tab => {
+            tab.addEventListener('click', () => {
+                state.searchFilter = tab.dataset.filter;
+                renderSearch(q);
+            });
+        });
+    }
+
+    function closeSidebarIfMobile() {
+        if (window.innerWidth <= 1024) {
+            $('#music-sidebar').classList.remove('open');
+            $('#ms-sidebar-backdrop').classList.remove('active');
+        }
+    }
+
+    function openYearSidebarLinks() {
+        const yearGrid = $('#ms-year-grid');
+        const cy = new Date().getFullYear();
+        const years = [];
+        for (let y = cy; y >= cy - 9; y--) years.push(y);
+        yearGrid.innerHTML = years.map(y => `<a data-route="#/year/${y}" href="#/year/${y}">${y}</a>`).join('');
+    }
+
+    function init() {
+        audio.volume = state.volume;
+        setVolUI();
+
+        openYearSidebarLinks();
+
+        let searchTimer;
+        const searchInput = $('#ms-search-input');
+        searchInput.addEventListener('input', () => {
+            const q = searchInput.value.trim();
+            $('#ms-search-clear').hidden = !q;
+            clearTimeout(searchTimer);
+            if (!q) {
+                if (location.hash.startsWith('#/search')) navigate('#/');
+                return;
+            }
+            searchTimer = setTimeout(() => {
+                navigate('#/search?q=' + encodeURIComponent(q));
+            }, 320);
+        });
+        searchInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') { searchInput.value = ''; navigate('#/'); }
+        });
+        $('#ms-search-clear').addEventListener('click', () => {
+            searchInput.value = '';
+            $('#ms-search-clear').hidden = true;
+            navigate('#/');
+            searchInput.focus();
+        });
+
+        $('#pb-play').addEventListener('click', togglePlay);
+        $('#pb-play-mobile').addEventListener('click', togglePlay);
+        $('#pb-prev').addEventListener('click', prev);
+        $('#pb-next').addEventListener('click', () => next(false));
+        $('#pb-shuffle').addEventListener('click', () => {
+            state.shuffle = !state.shuffle;
+            $('#pb-shuffle').classList.toggle('is-on', state.shuffle);
+        });
+        $('#pb-loop').addEventListener('click', () => {
+            state.loop = !state.loop;
+            $('#pb-loop').classList.toggle('is-on', state.loop);
+            audio.loop = false;
+        });
+        $('#pb-mute').addEventListener('click', () => {
+            state.muted = !state.muted;
+            audio.muted = state.muted;
+            video.muted = state.muted;
+            setVolUI();
+        });
+        $('#pb-like').addEventListener('click', () => {
+            const t = state.queue[state.index];
+            if (t) toggleLike(t);
+        });
+
+        bindBar($('#pb-seek'), (pct) => {
+            const m = activeMedia();
+            if (m.duration) m.currentTime = pct * m.duration;
+            setSeek(pct * (m.duration || 0));
+        });
+        bindBar($('#pb-vol'), (pct) => {
+            state.volume = pct;
+            state.muted = false;
+            audio.muted = false;
+            video.muted = false;
+            audio.volume = pct;
+            video.volume = pct;
+            persistVol();
+            setVolUI();
+        });
+
+        [audio, video].forEach((m) => {
+            m.addEventListener('play', () => {
+                if (m === activeMedia()) { state.isPlaying = true; setPlayUI(true); }
+                if (m === video) showStageLoading(false);
+            });
+            m.addEventListener('pause', () => {
+                if (m === activeMedia()) { state.isPlaying = false; setPlayUI(false); }
+                if (m === video) showStageLoading(false);
+            });
+            m.addEventListener('ended', () => {
+                if (m !== activeMedia()) return;
+                if (state.loop) { m.currentTime = 0; m.play().catch(() => { }); }
+                else next(true);
+            });
+            m.addEventListener('timeupdate', () => {
+                if (m === activeMedia() && !state.scrubbing) setSeek();
+                if (m === activeMedia() && _syncedLines.length) updateLyricsHighlight(m.currentTime);
+            });
+
+            m.addEventListener('play', () => {
+                if (m !== activeMedia()) return;
+                if (_lyricRaf) cancelAnimationFrame(_lyricRaf);
+                const tick = () => {
+                    if (m !== activeMedia() || m.paused || m.ended) {
+                        _lyricRaf = null;
+                        return;
+                    }
+                    if (_syncedLines.length && document.body.classList.contains('np-lyrics-open')) {
+                        updateLyricsHighlight(m.currentTime);
+                    }
+                    _lyricRaf = requestAnimationFrame(tick);
+                };
+                _lyricRaf = requestAnimationFrame(tick);
+            });
+            m.addEventListener('loadedmetadata', () => {
+                if (m !== activeMedia()) return;
+                setSeek();
+
+                if (_rawSyncedLines.length) {
+                    recomputeSyncedLines();
+                    renderSyncedLyrics(_syncedLines);
+                }
+            });
+            m.addEventListener('durationchange', () => {
+                if (m !== activeMedia() || !_rawSyncedLines.length) return;
+                recomputeSyncedLines();
+                renderSyncedLyrics(_syncedLines);
+            });
+
+            m.addEventListener('seeked', () => {
+                if (m !== activeMedia() || !_syncedLines.length) return;
+                _activeLyricIdx = -2;
+                updateLyricsHighlight(m.currentTime || 0);
+            });
+            m.addEventListener('error', () => {
+                if (m !== activeMedia()) return;
+                if (m === video) showStageLoading(false);
+                const t = state.queue[state.index];
+                if (t) console.warn('[music] failed to play', t.title);
+                setTimeout(() => next(true), 800);
+            });
+        });
+
+        video.addEventListener('waiting',   () => { if (mediaMode === 'video' && !video.paused) showStageLoading(true); });
+        video.addEventListener('loadstart', () => { if (mediaMode === 'video') showStageLoading(true); });
+        video.addEventListener('seeking',   () => { if (mediaMode === 'video') showStageLoading(true); });
+        video.addEventListener('stalled',   () => { if (mediaMode === 'video' && !video.paused) showStageLoading(true); });
+        video.addEventListener('canplay',   () => showStageLoading(false));
+        video.addEventListener('canplaythrough', () => showStageLoading(false));
+        video.addEventListener('playing',   () => showStageLoading(false));
+        video.addEventListener('seeked',    () => showStageLoading(false));
+        video.addEventListener('progress',  () => { if (video.readyState >= 3) showStageLoading(false); });
+
+        $('#pb-expand').addEventListener('click', openNP);
+        $('#np-close').addEventListener('click', closeNP);
+        $('#np-shuffle').addEventListener('click', () => {
+            state.shuffle = !state.shuffle;
+            $('#pb-shuffle').classList.toggle('is-on', state.shuffle);
+            $('#np-shuffle').classList.toggle('is-on', state.shuffle);
+        });
+        $('#np-loop').addEventListener('click', () => {
+            state.loop = !state.loop;
+            $('#pb-loop').classList.toggle('is-on', state.loop);
+            $('#np-loop').classList.toggle('is-on', state.loop);
+        });
+        $('#np-prev').addEventListener('click', prev);
+        $('#np-next').addEventListener('click', () => next(false));
+        $('#np-play').addEventListener('click', togglePlay);
+        $('#np-like').addEventListener('click', () => {
+            const t = state.queue[state.index];
+            if (!t) return;
+            toggleLike(t);
+            const btn = $('#np-like');
+            if (btn) {
+                btn.classList.remove('just-liked');
+
+                void btn.offsetWidth;
+                btn.classList.add('just-liked');
+            }
+        });
+        bindBar($('#np-seek'), (pct) => {
+            const m = activeMedia();
+            if (m.duration) m.currentTime = pct * m.duration;
+            setSeek(pct * (m.duration || 0));
+        });
+        function setPanel(which) {
+
+            $('#np-lyrics').hidden = which !== 'lyrics';
+            $('#np-queue').hidden = which !== 'queue';
+            $('#np-lyrics-btn').classList.toggle('is-on', which === 'lyrics');
+            $('#np-queue-btn').classList.toggle('is-on', which === 'queue');
+
+            document.body.classList.toggle('np-lyrics-open', which === 'lyrics');
+            if (which === 'queue') renderQueue();
+
+            if (which === 'lyrics' && _syncedLines.length) {
+                _activeLyricIdx = -2;
+                requestAnimationFrame(() => {
+                    updateLyricsHighlight(activeMedia().currentTime || 0);
+                });
+            }
+        }
+        $('#np-video-btn').addEventListener('click', () => {
+            const t = state.queue[state.index];
+            if (!t) return;
+            if (!t.videoLink) { toast('No video available for this track'); return; }
+            setPanel(null);
+            setVideoMode(mediaMode !== 'video');
+        });
+        $('#np-lyrics-btn').addEventListener('click', () => {
+            const showing = $('#np-lyrics').hidden;
+            setPanel(showing ? 'lyrics' : null);
+        });
+        $('#np-queue-btn').addEventListener('click', () => {
+            const showing = $('#np-queue').hidden;
+            setPanel(showing ? 'queue' : null);
+        });
+
+        $('#np-lyrics-close')?.addEventListener('click', () => setPanel(null));
+        $('#np-queue-close') ?.addEventListener('click', () => setPanel(null));
+
+        $('#np-bg').addEventListener('click', closeNP);
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && !npModal.hidden) closeNP();
+        });
+
+        $('#pb-title').addEventListener('click', () => {
+            if (playerBar.dataset.empty === '1') return;
+            openNP();
+        });
+
+        $('#pb-dismiss')?.addEventListener('click', () => {
+            try { audio.pause(); video.pause(); } catch (_) {}
+            document.body.classList.add('pb-hidden');
+        });
+
+        $('#ms-back').addEventListener('click', () => {
+            if (state.navStack.length > 1) {
+                const cur = state.navStack.pop();
+                state.navFwd.push(cur);
+                const prev = state.navStack[state.navStack.length - 1];
+                state.navStack.pop();
+                location.hash = prev;
+            }
+        });
+        $('#ms-fwd').addEventListener('click', () => {
+            const fwd = state.navFwd.pop();
+            if (fwd) location.hash = fwd;
+        });
+
+        $('#ms-sidebar-toggle').addEventListener('click', () => {
+            const isDesktop = window.innerWidth > 1024;
+            if (isDesktop) {
+                $('#music-app').classList.toggle('sb-collapsed');
+            } else {
+                $('#music-sidebar').classList.toggle('open');
+                $('#ms-sidebar-backdrop').classList.toggle('active');
+            }
+        });
+        $('#ms-sidebar-backdrop').addEventListener('click', closeSidebarIfMobile);
+
+        const sidebarEl = $('#music-sidebar');
+        if (sidebarEl) {
+            let downTarget = null;
+            let downX = 0, downY = 0;
+            let pointerHandledAt = 0;
+            const TAP_SLOP = 10;
+
+            sidebarEl.addEventListener('pointerdown', (e) => {
+                if (e.pointerType === 'mouse' && e.button !== 0) return;
+                downTarget = e.target.closest('a, .ms-link, [data-route]');
+                downX = e.clientX; downY = e.clientY;
+            });
+
+            const fireTap = (e) => {
+                const link = e.target.closest('a, .ms-link, [data-route]');
+                if (!link || !sidebarEl.contains(link)) return false;
+
+                if (downTarget && downTarget !== link) return false;
+                if (Math.abs(e.clientX - downX) > TAP_SLOP) return false;
+                if (Math.abs(e.clientY - downY) > TAP_SLOP) return false;
+                const route = link.dataset.route || link.getAttribute('href');
+                if (route && route.startsWith('#')) {
+                    navigate(route);
+                } else {
+                    closeSidebarIfMobile();
+                }
+                return true;
+            };
+
+            sidebarEl.addEventListener('pointerup', (e) => {
+                if (e.pointerType === 'mouse' && e.button !== 0) return;
+                if (fireTap(e)) pointerHandledAt = performance.now();
+                downTarget = null;
+            });
+
+            sidebarEl.addEventListener('click', (e) => {
+                const link = e.target.closest('a, .ms-link, [data-route]');
+                if (!link || !sidebarEl.contains(link)) return;
+                e.preventDefault();
+                if (performance.now() - pointerHandledAt < 600) return;
+                const route = link.dataset.route || link.getAttribute('href');
+                if (route && route.startsWith('#')) navigate(route);
+                else closeSidebarIfMobile();
+            });
+
+            sidebarEl.addEventListener('pointercancel', () => { downTarget = null; });
+        }
+
+        document.body.classList.remove('header-hidden');
+        const _hdr = document.getElementById('header');
+        if (_hdr) _hdr.classList.remove('is-hidden');
+        const musicMain = document.querySelector('.music-main');
+        if (musicMain && _hdr) {
+            let lastY = 0;
+            let ticking = false;
+            const SCROLL_THRESHOLD = 8;
+            const apply = () => {
+                ticking = false;
+                if (window.innerWidth > 1024) {
+
+                    _hdr.classList.remove('is-hidden');
+                    document.body.classList.remove('header-hidden');
+                    return;
+                }
+                const y = musicMain.scrollTop;
+                const dy = y - lastY;
+                if (Math.abs(dy) < SCROLL_THRESHOLD) return;
+                if (dy > 0 && y > 40) {
+                    _hdr.classList.add('is-hidden');
+                    document.body.classList.add('header-hidden');
+                } else if (dy < 0) {
+                    _hdr.classList.remove('is-hidden');
+                    document.body.classList.remove('header-hidden');
+                }
+                lastY = y;
+            };
+            musicMain.addEventListener('scroll', () => {
+                if (ticking) return;
+                ticking = true;
+                requestAnimationFrame(apply);
+            }, { passive: true });
+            window.addEventListener('resize', apply);
+        }
+
+        window.addEventListener('hashchange', handleRoute);
+
+        document.addEventListener('keydown', (e) => {
+            if (e.target.matches('input, textarea')) return;
+            if (e.code === 'Space') { e.preventDefault(); togglePlay(); }
+            else if (e.key === 'ArrowRight' && e.shiftKey) next(false);
+            else if (e.key === 'ArrowLeft' && e.shiftKey) prev();
+        });
+
+        handleRoute();
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();

frontend/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="anicove - Stream thousands of anime series free in HD. Subbed and dubbed. No ads, no limits." />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Bebas+Neue&family=Rubik+Dirt&display=swap"
+      rel="stylesheet"
+    />
+    <title>anicove — Anime, Manga, Movies &amp; Music in One Place</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package-lock.json

@@ -0,0 +1,1747 @@
+{
+  "name": "anidoom-frontend",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "anidoom-frontend",
+      "version": "0.1.0",
+      "dependencies": {
+        "hls.js": "^1.5.13",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.2"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-react": "^4.3.1",
+        "vite": "^5.4.2"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz",
+      "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@babel/types": "^7.29.8",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
+      "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz",
+      "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz",
+      "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz",
+      "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.8",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.8",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/lzma-linux-x64-gnu": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz",
+      "integrity": "sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^22.20 || ^24.12 || >=25"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.3.tgz",
+      "integrity": "sha512-4An71tdz9X8+3sI4Qqqd2LWd9vS39J7sqd9EU4Scw7TJE/qB10Flv/UuqbPVgfQV9XoK8Np6jNquZitnZq5i+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.4.tgz",
+      "integrity": "sha512-RrPokAb7dmbxFoeO3TloqHyOjgye8RkBhSqmp4aJMIex4c9r46ZstPnleDQOq1t46VOVjwIuwNogIqbodV1Vvg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.4.tgz",
+      "integrity": "sha512-JKuJc+pnpks2pjy7L/N3v/cAkZxYlnmuZoD840ldbMI5KDbC4iO9NKwPKYdjYFCMAIIlBzYSFHxIJVYzRo2/8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.4.tgz",
+      "integrity": "sha512-krw5uS2STmvJ02x0uTXHbqQNuz+9eZ1iw+qXk9dmW2gvV4jV7O2hEoOnuhFrpOPiel1mBFtqbxYZZtC46hXLOw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.4.tgz",
+      "integrity": "sha512-wsTxtgApb4PrOsNJIm0FZ1h3WvCC+k9uxLJ4ad75hgoS4NiRes2SoJFlDAyMwiUY8IssDqGcHbXuN0sx1tfF1A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.4.tgz",
+      "integrity": "sha512-GUOnQlyZe3yAXhWOtOMsn5Qkrv5E5mZXa0thbARWi5Ei2szlVXJFQhddZ4HbAzh8q92w5twp+CQvs/eFanz9YQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.4.tgz",
+      "integrity": "sha512-/Y7f3QuxjzPKsjA/rfEDa3+0vXqyjmJ50Ln8dPpCmWkKTrUoWHG1cWhTqaAMLob2m2nESWuC7yGrREz019Ztqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.4.tgz",
+      "integrity": "sha512-81wiiX3v7aqy+T+bT61TJ78yJjRquqFFTTbAPt08imfQQzkPIW8t6aJbkTagtCCrXMNc9D66+geqlK7ydLPNqA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.4.tgz",
+      "integrity": "sha512-9kmDIvNZqdoHOBZgNtpTBeLWYO/LVipM3H/j62P8848/l/VPEQL6N3uxU9pvP1oZAsXyC2MEnFP3ovRjo7WYNQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.4.tgz",
+      "integrity": "sha512-CcnXHWnXg69g+DX5VWL3FHts3qMRN2uVEHX+BZvGLdd07/gXkn3ePjYtO1LDJvxkGKVHMclKBRa1QUTH+6toYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.4.tgz",
+      "integrity": "sha512-iFOibiHnTRuhrWLlRsOQFdZJJIa7S8OwkneJr4ocALP16u5yk6lWLINFwhHaEqBFMsKDUZofLkGos7+CPzGB3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.4.tgz",
+      "integrity": "sha512-XnWYMI7euHlb5a871xPja+Gm7DRCFU+FGRrtS2sMq9N8FvqtpagUy6gD4YOemC5MRk9xbh8+jYMEJbigFQwsgA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.4.tgz",
+      "integrity": "sha512-qGDAlO0U8xedCcsdRm9oaoQY8DAx/QT7uIxJWhCdx0ceIWX783UC9QSYkdpzAe29wNiVfp24+bZdQmn49o45SQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.4.tgz",
+      "integrity": "sha512-ru4H6ezD7ysA5EiEK6qkkaEb4modH8CTej6kUy/gQi20u3kB3G7Zn8snXXkeJSCOFKG/rbPPtM/+9Wgas1961w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.4.tgz",
+      "integrity": "sha512-2W4MO5WQVJnbJaZdvDb9rhBDuFU1nKIepPFpJUBsTh2k1YY2g+ODViaWuyOAjQ5cOP7NvrvLzt3wvHOoiAvc7w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.4.tgz",
+      "integrity": "sha512-+fxjfuoAmVMCYV5QyjoIpu0cp5DOiOTeqYFk1AVaxGr+/ravWLX89XfQmptsoWcaVy/TGf2hexzbUOrCQIL1CQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.4.tgz",
+      "integrity": "sha512-jTn8JfHGL4djjFxPuM06LmNUJDsst2jeVlsd9OmIH6zc5sC9K6rIuO4YajXatLUpBmBKl6b35ro1QZocLi+tcA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.4.tgz",
+      "integrity": "sha512-oCJCJL4pXsoDcP2QZ+JVlPTIRc6266zsIaeJJsWImmF7HO0W8nb6HuSgZlMWxJwaPf8ehbSw8yo0EUw925hKsA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.4.tgz",
+      "integrity": "sha512-W69hukhZ3KKNRCaMIEzKvcFye42hh0FE1+YoYaf5+Ikacuftoco6yO/xouz0hc5d5W/s3yBro5jRiuEE/Q5vUw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.4.tgz",
+      "integrity": "sha512-qiXbGG2jkjXhzXpsFZSR2Xpb8DN/UaxYsbb/STbuR/6fpaDgRmmaq1B/LmtF2wQFOFOSsK2jdE0RZ3a0zHn4QA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.4.tgz",
+      "integrity": "sha512-nWeM//hxv8mIo6jD7Hu4o48DVmV9pbV6gsKaWU+4NFyqHoPKwrkRiZGLKUhOBk8qNmDmpwFtPKg80Bo/Tn4xiQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.4.tgz",
+      "integrity": "sha512-s62SQ/vgsRSvMwDkOEfTqfgASF0f26ZNaQuTA6Aok5lrikf89yI2W0gFHvZb2Jpgc6N8JnOKZgCK2iciO3CsxQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.4.tgz",
+      "integrity": "sha512-J6wGf8TVGbXJq+HH+ttTvrcfNKPbuZecV6KT1B8I18BC5IURUh5kl4Yl5OEP5eFIUoI5BWxCsyYMhFsDx8kekw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.4.tgz",
+      "integrity": "sha512-zmfrQd/0wu6oJs8Vq8KwY/YtsKSsLtKe/HwAP4Wqy8LhWjeT55fHRAkOhYQ12wI3ayS4Tt12d5CDRD7N96SAYQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.4.tgz",
+      "integrity": "sha512-qPzHqdj9rfUD+w79dtE07zi/kFwKyCJqplp5K5ygeLTp7jLpAoc16OAH39HSmRC9UpozaecsleI8uAdEj6v2yw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.4.tgz",
+      "integrity": "sha512-zD6NdeWEByGE9QF9vCrlJ5YQB4oq9q91kPZS37Jwj5hOkvR1lTBSpsKhKDw4IJtbQ35LsTS1HD9DZYGKIshU1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.12",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.12.tgz",
+      "integrity": "sha512-r7WnVImvVCeFpf2DOXfy41aPWzeNg3H/A2X4dKmy1QL0MSyyk/e7z8ihJ3N6Nn2PsdhkVlqnEfnUE4a05P2aTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.7",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.7.tgz",
+      "integrity": "sha512-JxV13hNrFxqjOc8alRbq9dK1MM79NEXYpma2B2J4wAtpWS5zIEIKqWPGCl7N4o7Uc7B7itylh7SuDujATRyyTw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.44",
+        "caniuse-lite": "^1.0.30001806",
+        "electron-to-chromium": "^1.5.393",
+        "node-releases": "^2.0.51",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001809",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001809.tgz",
+      "integrity": "sha512-xxWVywk6a6Arlk+hymeycyn/VgqEfLDxupvhH/xiY5SJ/18kmi9o6MiO320DCUzypORHLtvh0I4i04tUhCNHNQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.402",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.402.tgz",
+      "integrity": "sha512-/oOpMaPT6Yg+6/1XQhyIPlzgj7Ye9zf+nNM2Uh6OcE2G2oNptWazFa+qB2Pdqqbsc9KnIDzgAntoYN0dbwOXwA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/hls.js": {
+      "version": "1.6.17",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.17.tgz",
+      "integrity": "sha512-NUplVGVuc1hSPwdB/9/cbRkUmLrYi75/hqiXKdA+l300pJNxDu96R7jRb2imDzWJqIUF4I5ThmAdp9GvOCXsuQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.53",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.53.tgz",
+      "integrity": "sha512-D9UOmYG3UH1V+ENW56t5QXBwJw1YEY18ruVeus89Rw+SyIgjPkCO84bRzO3uNIYosJbNwiabWVn48o3uJLjxFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.17",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.4.tgz",
+      "integrity": "sha512-SVUsDe+DybHM/WmYKIVYhZh1o5Dcuf16yM6WjG02Q9XVFMZIJyHYhwrr6bFBXZkVP6z69kNkMyBCujt8FaFLJA==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.4.tgz",
+      "integrity": "sha512-q4HvNl+mmDdkS0g+MqiBZNteQJCuimWoOyHMy4T/RQLAn9Z29+E91QXRaxOujeMl2HTzRSS0KFPd7lxX3PjV0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.3",
+        "react-router": "6.30.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.4.tgz",
+      "integrity": "sha512-RXOqwaPsBGjMNMa4sQjDjHieHEZDFoj/Rdr46l2MU5DfEs16wHJPC2RPTPHWhNl+M3aI472LLqFkFKut4SblOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.9"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@napi-rs/lzma-linux-x64-gnu": "1.5.1",
+        "@rollup/rollup-android-arm-eabi": "4.62.4",
+        "@rollup/rollup-android-arm64": "4.62.4",
+        "@rollup/rollup-darwin-arm64": "4.62.4",
+        "@rollup/rollup-darwin-x64": "4.62.4",
+        "@rollup/rollup-freebsd-arm64": "4.62.4",
+        "@rollup/rollup-freebsd-x64": "4.62.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.62.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.62.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.62.4",
+        "@rollup/rollup-linux-arm64-musl": "4.62.4",
+        "@rollup/rollup-linux-loong64-gnu": "4.62.4",
+        "@rollup/rollup-linux-loong64-musl": "4.62.4",
+        "@rollup/rollup-linux-ppc64-gnu": "4.62.4",
+        "@rollup/rollup-linux-ppc64-musl": "4.62.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.62.4",
+        "@rollup/rollup-linux-riscv64-musl": "4.62.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.62.4",
+        "@rollup/rollup-linux-x64-gnu": "4.62.4",
+        "@rollup/rollup-linux-x64-musl": "4.62.4",
+        "@rollup/rollup-openbsd-x64": "4.62.4",
+        "@rollup/rollup-openharmony-arm64": "4.62.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.62.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.62.4",
+        "@rollup/rollup-win32-x64-gnu": "4.62.4",
+        "@rollup/rollup-win32-x64-msvc": "4.62.4",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.0.tgz",
+      "integrity": "sha512-x/M6q3w4Ybp91CNaS4S69UnliqR3BzRpOT6LWbksjth0S/+jhfaPJsWjt/TewpT8j9eLIojUf5jr29WextHroA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "anicove-frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "hls.js": "^1.5.13",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.2"
+  }
+}

frontend/public/music-api.js

@@ -0,0 +1,151 @@
+// music-api.js — fetchAPI bridge for music.js
+// Connects music.js directly to AnimeThemes API v2.
+
+(function () {
+    const AT = 'https://api.animethemes.moe';
+
+    async function _get(url) {
+        const r = await fetch(url, { headers: { Accept: 'application/json' } });
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json();
+    }
+
+    function normalizeImages(images) {
+        if (!images || !Array.isArray(images)) return [];
+        return images.map(img => {
+            let link = img.link || img.url;
+            if (!link && img.path) link = `https://static.animethemes.moe/${img.path}`;
+            if (!link && img.basename) link = `https://static.animethemes.moe/${img.basename}`;
+            return {
+                facet: img.facet || 'Large Cover',
+                link: link || ''
+            };
+        });
+    }
+
+    function normalizeTheme(t, animeRef) {
+        if (!t) return null;
+        const entries = t.animethemeentries || t.entries || [];
+        const normEntries = entries.map(e => {
+            const videos = e.videos || [];
+            const normVideos = videos.map(v => {
+                let audioLink = v.audio?.link || v.link || v.url;
+                if (!audioLink && v.basename) audioLink = `https://v.animethemes.moe/${v.basename}`;
+                if (!audioLink && v.filename) audioLink = `https://v.animethemes.moe/${v.filename}`;
+                return {
+                    ...v,
+                    audio: { id: v.audio?.id || v.id || t.id || '1', link: audioLink }
+                };
+            });
+            return { ...e, videos: normVideos };
+        });
+        return {
+            ...t,
+            id: t.id || Math.random().toString(36).substring(7),
+            slug: t.slug || `${t.type || 'OP'}${t.sequence || ''}`,
+            type: t.type || 'OP',
+            animethemeentries: normEntries,
+            anime: animeRef || t.anime
+        };
+    }
+
+    function normalizeAnime(a) {
+        if (!a) return null;
+        const rawThemes = a.animethemes || a.themes || [];
+        const animeObj = {
+            id: a.slug || String(a.id),
+            rawId: a.id,
+            name: a.name || a.title || a.name_jp || 'Anime',
+            slug: a.slug || String(a.id),
+            year: a.year || (a.season ? a.season : ''),
+            media_format: a.media_format || a.format || 'TV',
+            images: normalizeImages(a.images)
+        };
+        animeObj.animethemes = rawThemes.map(t => normalizeTheme(t, animeObj));
+        return animeObj;
+    }
+
+    function normalizeArtist(art) {
+        if (!art) return null;
+        return {
+            id: art.slug || String(art.id),
+            name: art.name || 'Artist',
+            slug: art.slug || String(art.id),
+            images: normalizeImages(art.images),
+            songs: art.songs || []
+        };
+    }
+
+    async function fetchAPI(path) {
+        try {
+            // /themes/search?q=<q>
+            if (path.startsWith('/themes/search')) {
+                const q = new URL(path, 'https://x').searchParams.get('q') || '';
+                const data = await _get(`${AT}/search?q=${encodeURIComponent(q)}&include[anime]=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`);
+                const list = (data.search?.anime || data.anime || []).map(normalizeAnime);
+                return { anime: list };
+            }
+
+            // /themes/anime/<id_or_slug>
+            if (path.startsWith('/themes/anime/')) {
+                const param = decodeURIComponent(path.replace('/themes/anime/', '').split('?')[0]);
+                let rawAnime = null;
+
+                // 1. Direct slug endpoint fetch with full relations
+                const data = await _get(`${AT}/anime/${encodeURIComponent(param)}?include=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`).catch(() => null);
+                if (data?.anime) rawAnime = data.anime;
+                else if (data?.data) rawAnime = Array.isArray(data.data) ? data.data[0] : data.data;
+
+                // 2. Filter search if direct fetch failed
+                if (!rawAnime) {
+                    const filterData = await _get(`${AT}/anime?filter[slug]=${encodeURIComponent(param)}&include=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`).catch(() => null)
+                        || await _get(`${AT}/anime?filter[anilist_id]=${encodeURIComponent(param)}&include=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`).catch(() => null);
+                    const list = filterData?.anime || filterData?.data || [];
+                    if (list.length) rawAnime = list[0];
+                }
+
+                return { anime: rawAnime ? normalizeAnime(rawAnime) : null };
+            }
+
+            // /themes/artist/<slug>
+            if (path.startsWith('/themes/artist/')) {
+                const slug = decodeURIComponent(path.replace('/themes/artist/', '').split('?')[0]);
+                const data = await _get(`${AT}/artist/${encodeURIComponent(slug)}?include=animethemes.anime.images,animethemes.song`).catch(() => null);
+                const raw = data?.artist || (Array.isArray(data?.data) ? data.data[0] : data?.data);
+                return { artist: raw ? normalizeArtist(raw) : null };
+            }
+
+            // /themes/artists or /themes/top-artists
+            if (path.startsWith('/themes/artists') || path.startsWith('/themes/top-artists')) {
+                const data = await _get(`${AT}/artist?page[size]=24&include=images`);
+                const list = data?.artist || data?.data || [];
+                return { artists: list.map(normalizeArtist) };
+            }
+
+            // /themes/recent
+            if (path.startsWith('/themes/recent')) {
+                const data = await _get(`${AT}/anime?sort=-created_at&page[size]=24&include=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`);
+                const list = data?.anime || data?.data || [];
+                return { anime: list.map(normalizeAnime) };
+            }
+
+            // /themes/year/<year>
+            if (path.startsWith('/themes/year/')) {
+                const year = decodeURIComponent(path.replace('/themes/year/', '').split('?')[0]);
+                const data = await _get(`${AT}/anime?filter[year]=${year}&sort=name&page[size]=24&include=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`);
+                const list = data?.anime || data?.data || [];
+                return { anime: list.map(normalizeAnime) };
+            }
+
+            // Default home discover feed
+            const defaultData = await _get(`${AT}/anime?page[size]=24&include=animethemes.animethemeentries.videos.audio,animethemes.song.artists,images`);
+            const defaultList = defaultData?.anime || defaultData?.data || [];
+            return { anime: defaultList.map(normalizeAnime) };
+        } catch (e) {
+            console.error('[music-api] fetch error:', e);
+            return { anime: null, artists: [] };
+        }
+    }
+
+    window.fetchAPI = fetchAPI;
+})();

frontend/public/music.css

@@ -0,0 +1,2197 @@
+
+:root {
+    --ms-bg: #0a0a0f;
+    --ms-sidebar: #000000;
+    --ms-surface: #121218;
+    --ms-surface-2: #1a1a22;
+    --ms-surface-3: #232330;
+    --ms-text: #ffffff;
+    --ms-text-dim: #a0a0b8;
+    --ms-text-mute: #6a6a82;
+    --ms-divider: rgba(255, 255, 255, 0.07);
+    --ms-accent: #7c3aed;
+    --ms-accent-hot: #9d6ef8;
+    --ms-accent-soft: rgba(124, 58, 237, 0.18);
+}
+
+.music-body {
+    overflow: hidden;
+    background:
+      radial-gradient(circle at top, rgba(124,58,237,0.22), transparent 22%),
+      linear-gradient(180deg, #07070d 0%, #090910 100%);
+}
+
+.music-body .float-nav { display: none !important; }
+
+.music-body #mobile-nav { display: none !important; }
+
+.music-body #header {
+    background: rgba(0, 0, 0, 0.92);
+    border-bottom: 1px solid var(--ms-divider);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+}
+
+.music-app {
+    position: fixed;
+    top: var(--header-h);
+    left: 0;
+    right: 0;
+    bottom: 92px;
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 8px;
+    padding: 8px;
+    background: #000;
+    transition: top 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+                bottom 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+                grid-template-columns 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.music-body #header {
+    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+    will-change: transform;
+}
+.music-body #header.is-hidden {
+    transform: translateY(-100%);
+}
+.music-body.header-hidden .music-app {
+    top: 0;
+}
+
+@media (max-width: 1024px) {
+    .music-body .music-sidebar {
+        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
+                    top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .music-body.header-hidden .music-sidebar { top: 0; }
+}
+
+@media (min-width: 1025px) {
+    .music-app.sb-collapsed {
+        grid-template-columns: 0 1fr;
+        gap: 0;
+    }
+    .music-app.sb-collapsed .music-sidebar {
+        transform: translateX(-110%);
+        opacity: 0;
+        pointer-events: none;
+    }
+    .music-sidebar {
+        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+                    opacity 0.22s ease;
+        will-change: transform;
+    }
+    .ms-sidebar-toggle { display: flex; }
+}
+
+.music-body.pb-hidden .music-app { bottom: 0; }
+.music-body.pb-hidden .player-bar { display: none; }
+
+.music-sidebar {
+    background: var(--ms-sidebar);
+    border-radius: 10px;
+    padding: 16px 12px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+}
+
+.music-sidebar::-webkit-scrollbar { width: 8px; }
+.music-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 4px; }
+
+.ms-block { margin-bottom: 22px; }
+
+.ms-block-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--ms-text-dim);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding: 6px 10px 10px;
+}
+.ms-block-title svg { width: 16px; height: 16px; }
+
+.ms-link {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 10px 12px;
+    border-radius: 6px;
+    color: var(--ms-text-dim);
+    font-size: 0.92rem;
+    font-weight: 600;
+    transition: color 0.15s ease, background 0.15s ease;
+    cursor: pointer;
+}
+.ms-link svg { width: 20px; height: 20px; flex-shrink: 0; }
+.ms-link:hover { color: #fff; background: transparent; }
+.ms-link.active { color: #fff; background: var(--ms-surface-2); }
+.ms-link.active svg { color: var(--ms-accent-hot); }
+
+.ms-year-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 6px;
+    padding: 4px 6px;
+}
+.ms-year-grid a {
+    background: var(--ms-surface-2);
+    border-radius: 6px;
+    padding: 9px 10px;
+    text-align: center;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--ms-text-dim);
+    transition: color 0.15s, background 0.15s;
+}
+.ms-year-grid a:hover {
+    background: var(--ms-surface-3);
+    color: #fff;
+}
+
+.music-main {
+    background: linear-gradient(180deg, #1a1228 0, #0e0e14 320px, var(--ms-surface) 100%);
+    border-radius: 10px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+}
+.music-main::-webkit-scrollbar { width: 12px; }
+.music-main::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 6px; }
+.music-main::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
+
+.ms-topbar {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px 24px;
+    background: rgba(10, 10, 16, 0.65);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+}
+
+.ms-nav-btn {
+    width: 32px; height: 32px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    display: flex; align-items: center; justify-content: center;
+    transition: background 0.15s, transform 0.15s;
+    flex-shrink: 0;
+}
+.ms-nav-btn svg { width: 14px; height: 14px; }
+.ms-nav-btn:hover:not([disabled]) { background: #000; transform: scale(1.06); }
+.ms-nav-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
+
+.ms-search {
+    position: relative;
+    flex: 1;
+    max-width: 360px;
+    display: flex;
+    align-items: center;
+}
+.ms-search-icon {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #1a1a22;
+    display: flex;
+    pointer-events: none;
+}
+.ms-search-icon svg { width: 18px; height: 18px; }
+
+.ms-search input {
+    width: 100%;
+    padding: 11px 40px 11px 42px;
+    background: #fff;
+    border: 2px solid transparent;
+    border-radius: 999px;
+    color: #1a1a22;
+    font-family: 'Outfit', sans-serif;
+    font-size: 0.92rem;
+    font-weight: 500;
+    outline: none;
+    transition: box-shadow 0.15s;
+}
+.ms-search input::placeholder { color: #6a6a82; font-weight: 500; }
+.ms-search input:focus {
+    box-shadow: 0 0 0 2px var(--ms-accent);
+}
+
+.ms-search-clear {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 26px; height: 26px;
+    border-radius: 50%;
+    color: #1a1a22;
+    display: flex; align-items: center; justify-content: center;
+    transition: background 0.15s;
+}
+.ms-search-clear svg { width: 14px; height: 14px; }
+.ms-search-clear:hover { background: rgba(0, 0, 0, 0.08); }
+
+.ms-sidebar-toggle {
+    display: flex;
+    width: 38px; height: 38px;
+    border-radius: 10px;
+    color: #fff;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    align-items: center; justify-content: center;
+    margin: 0;
+
+    order: -1;
+    flex-shrink: 0;
+    transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
+    cursor: pointer;
+}
+.ms-sidebar-toggle:hover {
+    background: rgba(167, 139, 250, 0.18);
+    border-color: rgba(167, 139, 250, 0.35);
+    transform: scale(1.04);
+}
+.ms-sidebar-toggle:active { transform: scale(0.94); }
+.ms-sidebar-toggle svg { width: 20px; height: 20px; }
+
+.music-app.sb-collapsed .ms-sidebar-toggle svg { transform: rotate(180deg); transition: transform 0.22s ease; }
+
+.ms-view {
+    padding: 0 24px 40px;
+    min-height: calc(100% - 70px);
+}
+
+.ms-section-title {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 14px;
+    margin: 30px 0 16px;
+}
+.ms-section-title h2 {
+    font-size: 1.5rem;
+    font-weight: 800;
+    letter-spacing: -0.01em;
+    color: #fff;
+}
+.ms-section-title a {
+    color: var(--ms-text-dim);
+    font-size: 0.78rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    transition: color 0.15s;
+}
+.ms-section-title a:hover { color: #fff; text-decoration: underline; }
+
+.ms-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 24px;
+}
+
+.ms-card {
+    background: var(--ms-surface);
+    border-radius: 8px;
+    padding: 16px;
+    transition: background 0.2s ease;
+    cursor: pointer;
+    position: relative;
+    text-align: left;
+    isolation: isolate;
+}
+.ms-card:hover { background: var(--ms-surface-2); }
+.ms-card:hover .ms-card-play {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.ms-card-cover-wrap {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: 6px;
+    overflow: hidden;
+    background: var(--ms-surface-2);
+    margin-bottom: 14px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+
+    contain: layout paint;
+    flex-shrink: 0;
+}
+.ms-card.is-artist .ms-card-cover-wrap {
+    border-radius: 50%;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
+}
+
+.ms-card-cover {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.4s ease;
+}
+
+.ms-card-cover-fallback {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--ms-accent), #2a1656);
+    color: #fff;
+}
+.ms-card-cover-fallback svg { width: 48px; height: 48px; opacity: 0.7; }
+
+.ms-card-play {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    width: 48px; height: 48px;
+    border-radius: 50%;
+    background: var(--ms-accent);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
+    opacity: 0;
+    transform: translateY(8px);
+    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, scale 0.12s;
+    z-index: 2;
+}
+.ms-card-play svg { width: 22px; height: 22px; transform: translateX(1px); }
+.ms-card-play:hover { background: var(--ms-accent-hot); transform: translateY(0) scale(1.06); }
+.ms-card-play:active { transform: translateY(0) scale(0.96); }
+
+.ms-card-title {
+    font-size: 1rem;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    line-clamp: 1;
+}
+.ms-card-sub {
+    font-size: 0.85rem;
+    color: var(--ms-text-dim);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-clamp: 2;
+    line-height: 1.4;
+}
+
+.ms-empty {
+    padding: 60px 20px;
+    text-align: center;
+    color: var(--ms-text-dim);
+}
+.ms-empty svg { width: 56px; height: 56px; margin-bottom: 14px; opacity: 0.4; }
+.ms-empty h3 { font-size: 1.4rem; color: #fff; margin-bottom: 8px; font-weight: 800; }
+.ms-empty p { font-size: 0.95rem; }
+
+.ms-loading {
+    padding: 80px 20px;
+    text-align: center;
+    color: var(--ms-text-dim);
+}
+.ms-spinner {
+    width: 36px; height: 36px;
+    border: 3px solid rgba(124, 58, 237, 0.18);
+    border-top-color: var(--ms-accent);
+    border-radius: 50%;
+    margin: 0 auto 16px;
+    animation: msSpin 0.8s linear infinite;
+}
+@keyframes msSpin { to { transform: rotate(360deg); } }
+
+.ms-album-hero {
+    display: flex;
+    gap: 28px;
+    align-items: flex-end;
+    padding: 36px 0 24px;
+}
+
+.ms-album-cover {
+    width: 232px; height: 232px;
+    border-radius: 6px;
+    overflow: hidden;
+    flex-shrink: 0;
+    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.85);
+    background: linear-gradient(135deg, var(--ms-accent), #2a1656);
+}
+.ms-album-cover img { width: 100%; height: 100%; object-fit: cover; }
+
+.ms-album-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.ms-album-eyebrow {
+    font-size: 0.78rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #fff;
+}
+.ms-album-title {
+    font-size: clamp(2rem, 6vw, 4rem);
+    font-weight: 900;
+    color: #fff;
+    line-height: 1.05;
+    letter-spacing: -0.03em;
+    margin: 4px 0 8px;
+    word-break: break-word;
+}
+.ms-album-meta { color: var(--ms-text-dim); font-size: 0.9rem; }
+.ms-album-meta strong { color: #fff; font-weight: 700; }
+
+.ms-album-actions {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    padding: 24px 0 10px;
+}
+.ms-play-big {
+    width: 60px; height: 60px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--ms-accent) 0%, var(--ms-accent-hot) 100%);
+    color: #fff;
+    display: flex; align-items: center; justify-content: center;
+    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
+                box-shadow 0.18s ease,
+                filter 0.18s ease;
+    box-shadow: 0 10px 28px rgba(167, 139, 250, 0.45),
+                0 4px 12px rgba(0, 0, 0, 0.5),
+                inset 0 1px 0 rgba(255, 255, 255, 0.25);
+    position: relative;
+    overflow: hidden;
+}
+.ms-play-big::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), transparent 55%);
+    pointer-events: none;
+}
+.ms-play-big svg { width: 28px; height: 28px; transform: translateX(2px); position: relative; z-index: 1; }
+.ms-play-big:hover {
+    transform: scale(1.08) translateY(-1px);
+    filter: brightness(1.08);
+    box-shadow: 0 14px 36px rgba(167, 139, 250, 0.6),
+                0 6px 14px rgba(0, 0, 0, 0.55),
+                inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+.ms-play-big:active { transform: scale(0.95); transition-duration: 0.08s; }
+.ms-play-big:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.5),
+                0 10px 28px rgba(167, 139, 250, 0.45),
+                0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.ms-icon-btn {
+    width: 38px; height: 38px;
+    border-radius: 50%;
+    color: var(--ms-text-dim);
+    display: flex; align-items: center; justify-content: center;
+    transition: color 0.12s, transform 0.12s;
+}
+.ms-icon-btn svg { width: 24px; height: 24px; }
+.ms-icon-btn:hover { color: #fff; transform: scale(1.05); }
+.ms-icon-btn.is-on { color: var(--ms-accent-hot); }
+.ms-icon-btn.is-on svg { fill: currentColor; }
+
+.ms-tracks {
+    margin-top: 8px;
+    padding-bottom: 16px;
+}
+.ms-tracks-head {
+    display: grid;
+    grid-template-columns: 36px 1fr 0.8fr 100px 60px;
+    gap: 14px;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--ms-divider);
+    margin-bottom: 8px;
+    color: var(--ms-text-dim);
+    font-size: 0.74rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-weight: 600;
+}
+
+.ms-track {
+    display: grid;
+    grid-template-columns: 36px 1fr 0.8fr 100px 60px;
+    gap: 14px;
+    align-items: center;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.12s ease;
+    color: var(--ms-text-dim);
+    position: relative;
+}
+.ms-track:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
+.ms-track:hover .ms-track-num .ms-num { display: none; }
+.ms-track:hover .ms-track-num .ms-play-mini { display: flex; }
+.ms-track.is-playing { color: var(--ms-accent-hot); }
+.ms-track.is-playing .ms-track-title { color: var(--ms-accent-hot); }
+
+.ms-track-num {
+    text-align: center;
+    font-size: 0.95rem;
+    color: var(--ms-text-dim);
+    width: 36px; height: 36px;
+    display: flex; align-items: center; justify-content: center;
+}
+.ms-track-num .ms-play-mini { display: none; color: #fff; }
+.ms-track-num .ms-play-mini svg { width: 16px; height: 16px; fill: currentColor; }
+.ms-track.is-playing .ms-num { display: none; }
+.ms-track.is-playing .ms-now-bars { display: flex; }
+.ms-now-bars { display: none; gap: 2px; align-items: flex-end; height: 14px; }
+.ms-now-bars span {
+    display: block; width: 3px; background: var(--ms-accent-hot); border-radius: 1px;
+    animation: msBar 0.8s ease-in-out infinite alternate;
+}
+.ms-now-bars span:nth-child(1) { animation-delay: -0.5s; }
+.ms-now-bars span:nth-child(2) { animation-delay: -0.2s; }
+.ms-now-bars span:nth-child(3) { animation-delay: -0.8s; }
+@keyframes msBar { from { height: 4px; } to { height: 14px; } }
+
+.ms-track-meta { display: flex; gap: 12px; align-items: center; min-width: 0; }
+.ms-track-cover {
+    width: 40px; height: 40px;
+    border-radius: 4px;
+    object-fit: cover;
+    background: var(--ms-surface-2);
+    flex-shrink: 0;
+}
+.ms-track-text { min-width: 0; }
+.ms-track-title {
+    color: #fff;
+    font-size: 0.95rem;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ms-track-sub {
+    color: var(--ms-text-dim);
+    font-size: 0.82rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ms-track-sub a { transition: color 0.12s; }
+.ms-track-sub a:hover { color: #fff; text-decoration: underline; }
+
+.ms-track-anime {
+    color: var(--ms-text-dim);
+    font-size: 0.85rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ms-track-anime:hover { color: #fff; text-decoration: underline; }
+
+.ms-track-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 10px;
+    border-radius: 999px;
+    background: rgba(124, 58, 237, 0.18);
+    border: 1px solid rgba(124, 58, 237, 0.32);
+    color: #c4b5fd;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    width: fit-content;
+}
+.ms-track-tag.ed { background: rgba(190, 24, 93, 0.16); border-color: rgba(190, 24, 93, 0.4); color: #f9a8d4; }
+.ms-track-tag.in { background: rgba(34, 197, 94, 0.13); border-color: rgba(34, 197, 94, 0.35); color: #86efac; }
+
+.ms-track-like {
+    width: 28px; height: 28px;
+    color: var(--ms-text-dim);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.12s, transform 0.12s, opacity 0.12s;
+    opacity: 0;
+}
+.ms-track-like svg { width: 16px; height: 16px; }
+.ms-track:hover .ms-track-like { opacity: 1; }
+.ms-track-like.is-liked { color: var(--ms-accent-hot); opacity: 1; }
+.ms-track-like.is-liked svg { fill: currentColor; }
+.ms-track-like:hover { color: #fff; transform: scale(1.1); }
+
+.ms-search-tabs {
+    display: flex;
+    gap: 8px;
+    padding: 18px 0 6px;
+    flex-wrap: wrap;
+}
+.ms-tab {
+    padding: 8px 18px;
+    border-radius: 999px;
+    background: var(--ms-surface-2);
+    color: #fff;
+    font-size: 0.86rem;
+    font-weight: 600;
+    transition: background 0.15s, color 0.15s;
+    cursor: pointer;
+}
+.ms-tab:hover { background: var(--ms-surface-3); }
+.ms-tab.active { background: #fff; color: #000; }
+
+.ms-search-block { margin-bottom: 36px; }
+
+.ms-top-result {
+    display: grid;
+    grid-template-columns: 1.05fr 1.6fr;
+    gap: 24px;
+    align-items: stretch;
+    margin: 6px 0 30px;
+}
+@media (max-width: 900px) {
+    .ms-top-result { grid-template-columns: 1fr; }
+}
+
+.ms-top-card {
+    display: grid;
+    grid-template-columns: 120px 1fr;
+    grid-template-rows: auto auto auto 1fr;
+    grid-template-areas:
+        "cover name"
+        "cover tag"
+        "cover ."
+        "play  .";
+    column-gap: 22px;
+    row-gap: 8px;
+    background: var(--ms-surface);
+    border-radius: 10px;
+    padding: 22px;
+    transition: background 0.2s;
+    cursor: pointer;
+    position: relative;
+    min-height: 220px;
+    overflow: hidden;
+}
+.ms-top-card:hover { background: var(--ms-surface-2); }
+.ms-top-card:hover .ms-top-play { opacity: 1; transform: translateY(0); }
+
+.ms-top-cover {
+    grid-area: cover;
+    width: 120px; height: 120px;
+    border-radius: 6px;
+    object-fit: cover;
+    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
+    align-self: start;
+}
+.ms-top-card.is-artist .ms-top-cover { border-radius: 50%; }
+.ms-top-card .ms-top-name { grid-area: name; align-self: end; margin: 0; }
+.ms-top-card .ms-top-tag { grid-area: tag; justify-self: start; }
+
+.ms-top-play {
+    grid-area: play;
+    justify-self: end;
+    align-self: end;
+    width: 56px; height: 56px;
+    border-radius: 50%;
+    background: var(--ms-accent);
+    color: #fff;
+    display: flex; align-items: center; justify-content: center;
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
+    opacity: 0;
+    transform: translateY(8px);
+    transition: opacity 0.18s, transform 0.18s, background 0.18s;
+    z-index: 2;
+}
+.ms-top-play:hover { background: var(--ms-accent-hot); transform: translateY(0) scale(1.06); }
+.ms-top-play svg { width: 26px; height: 26px; transform: translateX(1px); }
+
+@media (max-width: 720px) {
+    .ms-top-card {
+        grid-template-columns: 84px 1fr;
+        grid-template-areas:
+            "cover name"
+            "cover tag"
+            "play  play";
+        column-gap: 16px;
+        padding: 16px;
+        min-height: auto;
+    }
+    .ms-top-cover { width: 84px; height: 84px; }
+    .ms-top-card .ms-top-name { font-size: 1.4rem; }
+    .ms-top-play { opacity: 1; transform: none; width: 48px; height: 48px; margin-top: 6px; }
+    .ms-top-play svg { width: 22px; height: 22px; }
+}
+.ms-top-name {
+    font-size: 2rem;
+    font-weight: 900;
+    color: #fff;
+    margin-bottom: 10px;
+    line-height: 1.05;
+    letter-spacing: -0.02em;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-clamp: 2;
+}
+.ms-top-tag {
+    display: inline-flex;
+    align-items: center;
+    padding: 5px 12px;
+    background: rgba(0, 0, 0, 0.55);
+    border-radius: 4px;
+    color: #fff;
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.ms-top-songs {
+    background: transparent;
+    border-radius: 8px;
+    padding: 0;
+}
+.ms-top-songs h3 {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: #fff;
+    margin: 0 0 12px;
+    letter-spacing: -0.01em;
+}
+
+.ms-songlist { display: flex; flex-direction: column; }
+.ms-song-row {
+    display: grid;
+    grid-template-columns: 40px 1fr 28px;
+    gap: 14px;
+    align-items: center;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.12s;
+}
+.ms-song-row:hover { background: var(--ms-surface-2); }
+.ms-song-row.is-playing .ms-song-title { color: var(--ms-accent-hot); }
+
+.ms-song-cover {
+    width: 40px; height: 40px;
+    border-radius: 4px;
+    object-fit: cover;
+    background: var(--ms-surface-2);
+    flex-shrink: 0;
+    position: relative;
+}
+.ms-song-cover-wrap {
+    position: relative;
+    width: 40px; height: 40px;
+    flex-shrink: 0;
+}
+.ms-song-cover-wrap .ms-song-play {
+    position: absolute;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    border-radius: 4px;
+}
+.ms-song-cover-wrap .ms-song-play svg { width: 16px; height: 16px; }
+.ms-song-row:hover .ms-song-play { display: flex; }
+
+.ms-song-text { min-width: 0; }
+.ms-song-title {
+    color: #fff;
+    font-size: 0.92rem;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ms-song-sub {
+    color: var(--ms-text-dim);
+    font-size: 0.8rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ms-song-sub a:hover { color: #fff; text-decoration: underline; }
+
+.ms-song-like {
+    width: 28px; height: 28px;
+    color: var(--ms-text-dim);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.12s, opacity 0.12s, transform 0.12s;
+    opacity: 0;
+}
+.ms-song-like svg { width: 16px; height: 16px; }
+.ms-song-row:hover .ms-song-like { opacity: 1; }
+.ms-song-like.is-liked { color: var(--ms-accent-hot); opacity: 1; }
+.ms-song-like.is-liked svg { fill: currentColor; }
+
+.player-bar {
+    position: fixed;
+    left: 0; right: 0; bottom: 0;
+    height: 90px;
+    background: #000;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    display: grid;
+    grid-template-columns: minmax(180px, 30%) 1fr minmax(180px, 30%);
+    align-items: center;
+    padding: 0 16px;
+    gap: 16px;
+    z-index: 100;
+    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.6);
+}
+.player-bar[data-empty="1"] .pb-controls,
+.player-bar[data-empty="1"] .pb-progress,
+.player-bar[data-empty="1"] .pb-like { opacity: 0.5; pointer-events: none; }
+
+.pb-track {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    min-width: 0;
+}
+.pb-cover {
+    width: 56px; height: 56px;
+    border-radius: 4px;
+    background: var(--ms-surface-2);
+    object-fit: cover;
+    flex-shrink: 0;
+}
+
+.pb-cover:not([src]),
+.pb-cover[src=""],
+.pb-cover.is-failed {
+    visibility: hidden;
+}
+.player-bar[data-empty="1"] .pb-cover {
+    visibility: hidden;
+}
+
+.pb-cover-fallback {
+    position: absolute;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #432470 0%, #1a0f33 100%);
+    color: rgba(255, 255, 255, 0.7);
+    border-radius: 4px;
+}
+.pb-cover-fallback svg { width: 22px; height: 22px; }
+.pb-cover-btn:not(.has-cover) .pb-cover-fallback,
+.player-bar[data-empty="1"] .pb-cover-fallback { display: flex; }
+
+.pb-dismiss {
+    width: 28px; height: 28px;
+    color: var(--ms-text-mute);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.15s, background 0.15s;
+    flex-shrink: 0;
+}
+.pb-dismiss svg { width: 14px; height: 14px; }
+.pb-dismiss:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
+.pb-meta { min-width: 0; flex: 1; }
+.pb-title {
+    color: #fff;
+    font-size: 0.9rem;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    transition: color 0.12s;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+    font-family: inherit;
+}
+.pb-title:hover { text-decoration: underline; }
+.pb-artist {
+    color: var(--ms-text-dim);
+    font-size: 0.74rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    transition: color 0.12s;
+}
+.pb-artist:hover { color: #fff; text-decoration: underline; }
+.pb-like {
+    width: 32px; height: 32px;
+    color: var(--ms-text-dim);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.12s, transform 0.12s;
+    flex-shrink: 0;
+}
+.pb-like svg { width: 18px; height: 18px; }
+.pb-like:hover { color: #fff; transform: scale(1.1); }
+.pb-like.is-liked { color: var(--ms-accent-hot); }
+.pb-like.is-liked svg { fill: currentColor; }
+
+.pb-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    max-width: 720px;
+    margin: 0 auto;
+}
+
+.pb-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 18px;
+}
+
+.pb-btn {
+    width: 32px; height: 32px;
+    color: var(--ms-text-dim);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.12s, transform 0.12s;
+}
+.pb-btn svg { width: 20px; height: 20px; }
+.pb-btn:hover { color: #fff; transform: scale(1.08); }
+.pb-btn.is-on { color: var(--ms-accent-hot); }
+.pb-btn.is-on::after {
+    content: "";
+    width: 4px; height: 4px;
+    background: var(--ms-accent-hot);
+    border-radius: 50%;
+    position: absolute;
+    margin-top: 30px;
+}
+
+.pb-play {
+    width: 38px; height: 38px;
+    border-radius: 50%;
+    background: #fff;
+    color: #000;
+    display: flex; align-items: center; justify-content: center;
+    transition: transform 0.12s, background 0.15s;
+}
+.pb-play svg { width: 22px; height: 22px; }
+.pb-play:hover { transform: scale(1.07); background: #f1eaff; }
+.pb-play:active { transform: scale(0.96); }
+.player-bar[data-empty="1"] .pb-play { opacity: 0.6; }
+
+.pb-progress {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 0 12px;
+}
+.pb-time {
+    font-size: 0.7rem;
+    color: var(--ms-text-dim);
+    font-variant-numeric: tabular-nums;
+    width: 38px;
+    text-align: center;
+    flex-shrink: 0;
+}
+.pb-bar {
+    flex: 1;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.18);
+    border-radius: 2px;
+    position: relative;
+    cursor: pointer;
+    transition: height 0.12s;
+}
+.pb-bar:hover { height: 6px; }
+.pb-bar:hover .pb-bar-fill { background: var(--ms-accent-hot); }
+.pb-bar:hover .pb-bar-knob { opacity: 1; }
+.pb-bar-fill {
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    width: 0%;
+    background: #fff;
+    border-radius: 2px;
+    transition: background 0.12s;
+}
+.pb-bar-knob {
+    position: absolute;
+    top: 50%;
+    width: 12px; height: 12px;
+    background: #fff;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 0.12s;
+    pointer-events: none;
+}
+
+.pb-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+}
+.pb-mobile-play { display: none; }
+.pb-vol {
+    width: 100px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.18);
+    border-radius: 2px;
+    position: relative;
+    cursor: pointer;
+}
+.pb-vol:hover .pb-bar-fill { background: var(--ms-accent-hot); }
+.pb-vol:hover .pb-bar-knob { opacity: 1; }
+
+.ms-sidebar-backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 60;
+    opacity: 0;
+    transition: opacity 0.22s ease;
+}
+.ms-sidebar-backdrop.active {
+    display: block;
+    opacity: 1;
+}
+
+@media (hover: none), (max-width: 800px) {
+    .ms-card-play {
+        opacity: 1;
+        transform: translateY(0);
+        width: 44px; height: 44px;
+        right: 8px; bottom: 8px;
+    }
+    .ms-card-play svg { width: 18px; height: 18px; }
+    .ms-track-like { opacity: 1; }
+    .ms-song-like { opacity: 1; }
+    .ms-song-cover-wrap .ms-song-play { display: none; }
+}
+
+@media (max-width: 1024px) {
+    .music-app { grid-template-columns: 1fr; }
+    .music-sidebar {
+        position: fixed;
+        top: var(--header-h);
+        left: 0;
+        bottom: 92px;
+        width: 280px;
+        z-index: 80;
+        margin: 8px;
+        transform: translateX(-110%);
+        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+        pointer-events: none;
+    }
+    .music-sidebar.open {
+        transform: translateX(0);
+        pointer-events: auto;
+    }
+
+    .music-sidebar.open .ms-link,
+    .music-sidebar.open .ms-year-grid a,
+    .music-sidebar.open .ms-block-title { pointer-events: auto; }
+
+    .music-sidebar .ms-link { padding: 12px 14px; font-size: 0.98rem; }
+
+    .music-sidebar .ms-link,
+    .music-sidebar .ms-year-grid a,
+    .ms-sidebar-toggle {
+        touch-action: manipulation;
+        -webkit-tap-highlight-color: rgba(167, 139, 250, 0.18);
+    }
+    .ms-sidebar-toggle { display: flex; }
+    .ms-sidebar-backdrop { z-index: 70; }
+}
+
+@media (max-width: 800px) {
+    .ms-album-hero {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 18px;
+        padding: 16px 0;
+    }
+    .ms-album-cover { width: 180px; height: 180px; align-self: center; }
+    .ms-album-info { align-items: flex-start; text-align: left; width: 100%; }
+    .ms-tracks-head, .ms-track {
+        grid-template-columns: 36px 1fr 56px;
+    }
+    .ms-tracks-head .ms-th-anime, .ms-tracks-head .ms-th-tag,
+    .ms-track .ms-track-anime, .ms-track .ms-track-tag-cell { display: none; }
+    .ms-view { padding: 0 14px 24px; }
+    .ms-topbar { padding: 12px 14px; gap: 8px; }
+    .ms-search { max-width: none; }
+    .ms-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
+    .ms-top-name { font-size: 1.5rem; }
+}
+
+@media (max-width: 720px) {
+    .player-bar {
+        height: 64px;
+        grid-template-columns: 1fr auto;
+        padding: 0 10px;
+        gap: 10px;
+        bottom: 0;
+        border-radius: 0;
+    }
+    .pb-cover-btn { width: 44px; height: 44px; }
+    .pb-cover { width: 44px; height: 44px; }
+    .pb-title { font-size: 0.86rem; }
+    .pb-artist { font-size: 0.72rem; }
+    .pb-like, .pb-center { display: none; }
+    .pb-mobile-play {
+        display: flex;
+        width: 40px; height: 40px;
+        color: #fff;
+        background: transparent;
+        border-radius: 50%;
+    }
+    .pb-mobile-play svg { width: 24px; height: 24px; }
+    .pb-right .pb-btn:not(#pb-play-mobile), .pb-right .pb-vol { display: none; }
+    .music-app {
+        bottom: 64px;
+        padding: 6px;
+        gap: 6px;
+        top: 10px;
+    }
+    .music-sidebar { bottom: 64px; }
+    .player-bar[data-empty="1"] { display: none; }
+    body.music-body:has(.player-bar[data-empty="1"]) .music-app,
+    body.music-body:has(.player-bar[data-empty="1"]) .music-sidebar {
+        bottom: 0;
+    }
+    .ms-topbar {
+        padding: 12px 12px;
+        gap: 8px;
+    }
+    .ms-search {
+        max-width: none;
+    }
+    .ms-search input {
+        padding: 10px 38px 10px 38px;
+        font-size: 0.84rem;
+    }
+    .ms-sidebar-toggle {
+        width: 34px;
+        height: 34px;
+    }
+}
+
+@media (max-width: 480px) {
+    .ms-card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
+    .ms-section-title h2 { font-size: 1.2rem; }
+    .ms-top-name { font-size: 1.25rem; }
+    .ms-years-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
+    .ms-year-num { font-size: 1.8rem; }
+}
+
+.ms-home-hero {
+    margin: 18px 0 28px;
+}
+.ms-home-greet {
+    font-size: 2rem;
+    font-weight: 900;
+    letter-spacing: -0.02em;
+    color: #fff;
+    margin: 0 0 18px;
+}
+.ms-quick-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+}
+@media (max-width: 900px) { .ms-quick-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 540px) { .ms-quick-grid { grid-template-columns: 1fr; } }
+
+.ms-quick-tile {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: rgba(255, 255, 255, 0.06);
+    border-radius: 6px;
+    padding: 0 14px 0 0;
+    height: 64px;
+    overflow: hidden;
+    position: relative;
+    transition: background 0.15s;
+}
+.ms-quick-tile:hover { background: rgba(255, 255, 255, 0.12); }
+.ms-quick-cover {
+    width: 64px; height: 64px;
+    object-fit: cover;
+    flex-shrink: 0;
+    background: var(--ms-surface-2);
+}
+.ms-quick-name {
+    flex: 1;
+    font-weight: 700;
+    color: #fff;
+    font-size: 0.9rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+.ms-quick-play {
+    width: 44px; height: 44px;
+    border-radius: 50%;
+    background: var(--ms-accent);
+    color: #fff;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
+    opacity: 0;
+    transform: translateX(8px);
+    transition: opacity 0.15s, transform 0.15s, background 0.15s;
+}
+.ms-quick-tile:hover .ms-quick-play { opacity: 1; transform: translateX(0); }
+.ms-quick-play:hover { background: var(--ms-accent-hot); transform: scale(1.06); }
+.ms-quick-play svg { width: 18px; height: 18px; transform: translateX(1px); }
+.ms-quick-empty {
+    grid-column: 1 / -1;
+    color: var(--ms-text-dim);
+    background: var(--ms-surface);
+    border-radius: 6px;
+    padding: 18px;
+    font-size: 0.92rem;
+}
+
+.ms-years-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
+.ms-year-card {
+    display: block;
+    background: var(--ms-surface);
+    padding: 14px;
+    border-radius: 8px;
+    transition: background 0.18s;
+    text-align: left;
+}
+.ms-year-card:hover { background: var(--ms-surface-2); }
+.ms-year-cover {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 12px;
+    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
+    overflow: hidden;
+    position: relative;
+}
+.ms-year-cover::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.12), transparent 55%);
+    pointer-events: none;
+}
+.ms-year-num {
+    font-size: 2.4rem;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+    color: #fff;
+    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+}
+
+.pb-cover-btn {
+    position: relative;
+    width: 56px; height: 56px;
+    border-radius: 4px;
+    overflow: hidden;
+    flex-shrink: 0;
+    background: transparent;
+    cursor: pointer;
+    display: block;
+}
+.pb-cover-btn .pb-cover { width: 100%; height: 100%; display: block; }
+.pb-cover-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.55);
+    color: #fff;
+    opacity: 0;
+    transition: opacity 0.15s;
+}
+.pb-cover-overlay svg { width: 18px; height: 18px; }
+.pb-cover-btn:hover .pb-cover-overlay { opacity: 1; }
+.player-bar[data-empty="1"] .pb-cover-btn { pointer-events: none; }
+
+.np-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 10001;
+    color: #fff;
+    overflow: hidden;
+    animation: npFadeIn 0.22s ease-out;
+}
+.np-modal[hidden] { display: none; }
+body.np-open { overflow: hidden; }
+body.np-open .float-nav { display: none !important; }
+
+body.np-open #header { display: none !important; }
+body.np-open .np-modal { top: 0; }
+@keyframes npFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+
+.np-bg {
+    position: absolute;
+    inset: 0;
+    background-size: cover;
+    background-position: center;
+    filter: blur(38px) saturate(150%) brightness(0.6);
+    transform: scale(1.2);
+    z-index: 0;
+    transition: filter 0.35s ease;
+}
+.np-bg::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, rgba(10,5,25,0.55) 0%, rgba(10,5,25,0.85) 60%, #07050d 100%);
+    transition: opacity 0.35s ease;
+}
+
+body.np-lyrics-open .np-bg {
+    filter: blur(46px) saturate(140%) brightness(0.45);
+}
+body.np-lyrics-open .np-bg::after {
+    background: linear-gradient(180deg, rgba(8,4,20,0.72) 0%, rgba(8,4,20,0.88) 60%, #050208 100%);
+    opacity: 1;
+}
+
+body.np-lyrics-open .np-stage { box-shadow: none; background: transparent; }
+body.np-lyrics-open .np-cover,
+body.np-lyrics-open .np-cover-fallback { display: none !important; }
+
+.np-inner {
+    position: relative;
+    z-index: 1;
+    height: 100vh;
+    height: 100dvh;
+    max-width: 520px;
+    margin: 0 auto;
+    padding: 14px 22px 22px;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
+    gap: 14px;
+}
+@media (min-width: 900px) {
+    .np-inner { max-width: 560px; padding: 18px 28px 26px; gap: 16px; }
+}
+@media (max-width: 480px) {
+    .np-inner { padding: 10px 16px 18px; gap: 10px; }
+}
+
+.np-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+.np-icon-btn {
+    min-width: 36px; height: 36px;
+    display: flex; align-items: center; justify-content: center;
+    gap: 6px;
+    padding: 0 6px;
+    color: #fff;
+    border-radius: 18px;
+    transition: background 0.15s;
+}
+.np-icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
+.np-icon-btn svg { width: 22px; height: 22px; }
+
+.np-back-btn span {
+    font-size: 0.85rem;
+    font-weight: 600;
+    padding-right: 6px;
+}
+@media (max-width: 600px) {
+    .np-back-btn span { display: none; }
+    .np-back-btn { padding: 0; min-width: 36px; border-radius: 50%; }
+}
+.np-source { text-align: center; min-width: 0; flex: 1; }
+.np-eyebrow {
+    font-size: 0.66rem;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    color: rgba(255, 255, 255, 0.7);
+    font-weight: 700;
+    margin-bottom: 2px;
+}
+.np-source-name {
+    font-size: 0.86rem;
+    font-weight: 600;
+    color: #fff;
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+}
+.np-source-name:hover { text-decoration: underline; }
+
+.np-stage {
+    position: relative;
+
+    width: min(100%, 70vh, 560px);
+    max-width: 100%;
+    aspect-ratio: 1 / 1;
+    max-height: min(70vh, 560px);
+    margin: 0 auto;
+    border-radius: 12px;
+    overflow: hidden;
+    background: linear-gradient(135deg, #432470 0%, #1a0f33 100%);
+    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
+    align-self: center;
+    flex-shrink: 0;
+}
+@media (max-width: 600px) {
+    .np-stage {
+
+        width: min(100%, 54vh, 460px);
+        max-height: 54vh;
+    }
+}
+@media (max-width: 380px) {
+    .np-stage {
+        width: min(100%, 48vh, 380px);
+        max-height: 48vh;
+    }
+}
+
+@media (max-height: 520px) and (orientation: landscape) {
+    .np-stage {
+        width: min(82vh, 400px);
+        max-height: 82vh;
+    }
+}
+.np-cover, .np-video {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+.np-video { background: #000; object-fit: contain; }
+
+.np-cover[hidden], .np-video[hidden] { display: none !important; }
+
+.np-cover:not([src]),
+.np-cover[src=""],
+.np-cover.is-failed { visibility: hidden; }
+
+.np-cover-fallback {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.55);
+    pointer-events: none;
+}
+.np-cover-fallback svg { width: 72px; height: 72px; }
+
+.np-loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    z-index: 3;
+    animation: npFadeIn 0.18s ease-out;
+}
+.np-loading[hidden] { display: none; }
+.np-spinner {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    border: 3px solid rgba(255, 255, 255, 0.18);
+    border-top-color: var(--ms-accent-hot);
+    animation: npSpin 0.85s linear infinite;
+}
+@keyframes npSpin { to { transform: rotate(360deg); } }
+
+.np-panel-close {
+    width: 32px; height: 32px;
+    color: rgba(255, 255, 255, 0.7);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: background 0.15s, color 0.15s;
+    flex-shrink: 0;
+}
+.np-panel-close svg { width: 16px; height: 16px; }
+.np-panel-close:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
+.np-lyrics-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+.np-lyrics-head h3 { margin: 0; }
+
+.np-lyrics {
+    position: absolute;
+    inset: 0;
+
+    background: radial-gradient(120% 80% at 50% 0%, #1a0d2e 0%, #0a0612 55%, #050208 100%);
+    overflow: hidden;
+    padding: 18px 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.np-lyrics[hidden] { display: none; }
+.np-lyrics-inner { width: 100%; max-width: 420px; }
+.np-lyrics-inner h3 {
+    margin: 0 0 12px;
+    font-size: 1.1rem;
+    font-weight: 800;
+    color: #fff;
+}
+.np-lyrics-body {
+    color: rgba(255, 255, 255, 0.92);
+    line-height: 1.55;
+    font-size: 0.96rem;
+    margin: 0 0 18px;
+}
+.np-lyrics-meta {
+    display: grid;
+    gap: 10px;
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    padding-top: 14px;
+}
+.np-lyrics-meta div {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    font-size: 0.85rem;
+}
+.np-lyrics-meta span {
+    color: rgba(255, 255, 255, 0.55);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 700;
+    font-size: 0.7rem;
+}
+.np-lyrics-meta strong {
+    color: #fff;
+    font-weight: 600;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 60%;
+}
+
+.np-info {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+.np-info-text { flex: 1; min-width: 0; }
+.np-title {
+    display: block;
+    color: #fff;
+    font-size: 1.4rem;
+    font-weight: 800;
+    letter-spacing: -0.01em;
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 4px;
+}
+.np-title:hover { text-decoration: underline; }
+.np-artist {
+    display: block;
+    color: rgba(255, 255, 255, 0.75);
+    font-size: 0.95rem;
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.np-artist:hover { color: #fff; text-decoration: underline; }
+.np-like {
+    width: 40px; height: 40px;
+    color: rgba(255, 255, 255, 0.85);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.15s, transform 0.15s;
+    flex-shrink: 0;
+}
+.np-like svg { width: 24px; height: 24px; }
+.np-like:hover { color: #fff; transform: scale(1.08); }
+.np-like.is-liked { color: var(--ms-accent-hot); }
+.np-like.is-liked svg { fill: currentColor; }
+
+.np-progress { display: grid; gap: 6px; }
+.np-bar {
+    position: relative;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.18);
+    border-radius: 2px;
+    cursor: pointer;
+    transition: height 0.12s;
+}
+.np-bar:hover { height: 6px; }
+.np-bar-fill {
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    width: 0;
+    background: #fff;
+    border-radius: 2px;
+}
+.np-bar:hover .np-bar-fill { background: var(--ms-accent-hot); }
+.np-bar-knob {
+    position: absolute;
+    top: 50%;
+    width: 12px; height: 12px;
+    background: #fff;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 0.12s;
+}
+.np-bar:hover .np-bar-knob { opacity: 1; }
+.np-times {
+    display: flex;
+    justify-content: space-between;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.72rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.np-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4px;
+}
+.np-ctl {
+    width: 44px; height: 44px;
+    color: rgba(255, 255, 255, 0.85);
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    transition: color 0.15s, transform 0.15s;
+    position: relative;
+}
+.np-ctl svg { width: 26px; height: 26px; }
+.np-ctl:hover { color: #fff; transform: scale(1.08); }
+.np-ctl.is-on { color: var(--ms-accent-hot); }
+.np-ctl.is-on::after {
+    content: "";
+    position: absolute;
+    bottom: 6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 4px; height: 4px;
+    background: var(--ms-accent-hot);
+    border-radius: 50%;
+}
+.np-play-big {
+    width: 64px; height: 64px;
+    border-radius: 50%;
+    background: #fff;
+    color: #000;
+    display: flex; align-items: center; justify-content: center;
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
+    transition: transform 0.12s;
+}
+.np-play-big svg { width: 30px; height: 30px; transform: translateX(1px); }
+.np-play-big:hover { transform: scale(1.06); }
+.np-play-big:active { transform: scale(0.96); }
+
+.np-tools {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding-top: 4px;
+}
+.np-tool {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 18px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.10);
+    color: rgba(255, 255, 255, 0.92);
+    font-weight: 600;
+    font-size: 0.84rem;
+    letter-spacing: 0.01em;
+    transition: background 0.15s, color 0.15s, transform 0.12s;
+}
+.np-tool svg { width: 18px; height: 18px; }
+.np-tool:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
+.np-tool.is-on {
+    background: var(--ms-accent);
+    color: #fff;
+}
+.np-tool.is-on:hover { background: var(--ms-accent-hot); }
+.np-tool.is-disabled { opacity: 0.45; pointer-events: none; }
+
+@media (min-width: 720px) {
+    .np-inner { max-width: 620px; padding: 28px 32px 36px; gap: 22px; }
+    .np-title { font-size: 1.7rem; }
+}
+
+#toast-container {
+    position: fixed;
+    bottom: 110px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 300;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    pointer-events: none;
+}
+.kv-toast {
+    background: rgba(20, 14, 36, 0.96);
+    color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    padding: 10px 18px;
+    border-radius: 999px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
+    opacity: 0;
+    transform: translateY(8px);
+    transition: opacity 0.2s, transform 0.2s;
+}
+.kv-toast.show { opacity: 1; transform: none; }
+
+.np-queue {
+    position: absolute;
+    inset: 0;
+    background: rgba(8, 4, 18, 0.92);
+    backdrop-filter: blur(28px);
+    -webkit-backdrop-filter: blur(28px);
+    border-radius: inherit;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: npFadeIn 0.18s ease-out;
+}
+.np-queue[hidden] { display: none; }
+.np-queue-head {
+    flex-shrink: 0;
+    padding: 16px 18px 10px;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+.np-queue-head h3 {
+    font-size: 1rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+.np-queue-head span {
+    font-size: 0.78rem;
+    color: var(--ms-text-dim);
+    font-weight: 600;
+}
+.np-queue-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px 8px 12px;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+}
+.np-queue-empty {
+    color: var(--ms-text-dim);
+    text-align: center;
+    padding: 30px 16px;
+    font-size: 0.92rem;
+}
+.np-queue-row {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 44px 1fr auto;
+    gap: 12px;
+    align-items: center;
+    padding: 8px 10px;
+    border-radius: 8px;
+    background: transparent;
+    color: #fff;
+    text-align: left;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+.np-queue-row:hover { background: rgba(255, 255, 255, 0.07); }
+.np-queue-row.is-current { background: rgba(124, 58, 237, 0.18); }
+.np-queue-cover {
+    position: relative;
+    width: 44px; height: 44px;
+    border-radius: 6px;
+    overflow: hidden;
+    background: var(--ms-surface-2);
+    flex-shrink: 0;
+}
+.np-queue-cover img { width: 100%; height: 100%; object-fit: cover; }
+.np-queue-eq {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.55);
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 2px;
+    padding-bottom: 6px;
+}
+.np-queue-eq i {
+    width: 3px; height: 12px;
+    background: var(--ms-accent-hot);
+    border-radius: 1px;
+    animation: eqBars 1s ease-in-out infinite;
+    animation-play-state: paused;
+    transform: scaleY(0.4);
+    transform-origin: bottom center;
+}
+.np-queue-eq i:nth-child(2) { animation-delay: 0.15s; height: 16px; }
+.np-queue-eq i:nth-child(3) { animation-delay: 0.3s; height: 10px; }
+
+body.is-playing .np-queue-eq i { animation-play-state: running; }
+@keyframes eqBars {
+    0%, 100% { transform: scaleY(0.4); }
+    50% { transform: scaleY(1); }
+}
+
+.np-lyric-line {
+    display: block;
+    padding: 6px 4px;
+    line-height: 1.55;
+    color: rgba(255, 255, 255, 0.55);
+    transition: color 0.25s ease, transform 0.25s ease, font-weight 0.2s ease;
+    font-size: 1rem;
+}
+.np-lyric-line.is-active {
+    color: #fff;
+    font-weight: 700;
+    transform: scale(1.04);
+    transform-origin: left center;
+    text-shadow: 0 0 18px rgba(157, 110, 248, 0.55);
+}
+.np-lyric-line.is-loading,
+.np-lyric-line.is-empty {
+    color: rgba(255, 255, 255, 0.5);
+    font-style: italic;
+}
+.np-queue-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+.np-queue-title {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #fff;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.np-queue-row.is-current .np-queue-title { color: var(--ms-accent-hot); }
+.np-queue-sub {
+    font-size: 0.78rem;
+    color: var(--ms-text-dim);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.np-queue-tag {
+    font-size: 0.7rem;
+    color: var(--ms-text-dim);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    flex-shrink: 0;
+}
+
+.ms-link:hover {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.06);
+}
+.ms-link:active { background: rgba(255, 255, 255, 0.12); }
+
+.pb-cover-btn { cursor: pointer; }
+
+@media (max-width: 720px) {
+    .np-inner {
+        padding: 14px 16px 22px;
+        gap: 14px;
+    }
+    .np-stage { aspect-ratio: 1 / 1; }
+    .np-tools { gap: 8px; }
+    .np-tool { padding: 8px 12px; font-size: 0.78rem; }
+    .np-tool span { display: inline; }
+    .np-title { font-size: 1.1rem; }
+    .np-artist { font-size: 0.88rem; }
+    .np-controls { gap: 18px; }
+    .np-play-big { width: 64px; height: 64px; }
+    .np-play-big svg { width: 26px; height: 26px; }
+    .np-queue-row { grid-template-columns: 40px 1fr auto; }
+    .np-queue-cover { width: 40px; height: 40px; }
+}
+
+@media (max-width: 380px) {
+    .np-tool span { display: none; }
+    .np-tool { padding: 8px 10px; }
+    .np-controls { gap: 12px; }
+    .np-controls .pb-icon-btn { width: 36px; height: 36px; }
+    .np-play-big { width: 58px; height: 58px; }
+}
+
+@media (min-width: 721px) and (max-width: 1024px) {
+    .np-inner { max-width: 460px; padding: 22px 28px 30px; }
+}
+
+@media (min-width: 1200px) {
+    .np-inner { max-width: 560px; }
+    .np-stage { max-height: 420px; }
+}
+
+.np-inner {
+    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
+    align-content: stretch;
+    gap: 14px;
+    padding: 14px 22px max(20px, env(safe-area-inset-bottom));
+    overflow: hidden;
+    overscroll-behavior: contain;
+    box-sizing: border-box;
+}
+.np-stage {
+    max-height: min(60vh, 480px);
+    min-height: 0;
+}
+@media (max-height: 780px) {
+    .np-inner { gap: 10px; padding: 10px 18px max(14px, env(safe-area-inset-bottom)); }
+    .np-stage { max-height: min(52vh, 400px); }
+    .np-controls { gap: 14px; }
+    .np-tools { padding-top: 0; gap: 8px; }
+    .np-tool { padding: 7px 12px; font-size: 0.78rem; }
+}
+@media (max-height: 640px) {
+    .np-inner { gap: 6px; padding: 8px 14px max(10px, env(safe-area-inset-bottom)); }
+    .np-stage { max-height: min(42vh, 300px); }
+    .np-info { padding: 6px 10px; }
+    .np-title { font-size: 1rem; margin-bottom: 2px; }
+    .np-artist { font-size: 0.82rem; }
+    .np-play-big { width: 54px; height: 54px; }
+    .np-play-big svg { width: 22px; height: 22px; }
+    .np-ctl { width: 38px; height: 38px; }
+    .np-ctl svg { width: 22px; height: 22px; }
+}
+@media (max-height: 520px) {
+    .np-stage { max-height: 30vh; }
+    .np-inner { gap: 4px; padding: 6px 12px max(8px, env(safe-area-inset-bottom)); }
+    .np-tool span { display: none; }
+    .np-tool { padding: 6px 10px; }
+}
+
+body.np-lyrics-open .np-inner {
+    grid-template-rows: auto minmax(140px, 1fr) auto auto auto auto;
+    align-content: stretch;
+    overflow: hidden;
+}
+body.np-lyrics-open .np-stage {
+    width: 100%;
+    max-width: 100%;
+    aspect-ratio: auto;
+    max-height: none;
+    height: 100%;
+    border-radius: 8px;
+}
+
+.np-back-btn {
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    padding: 0 12px 0 8px !important;
+    min-width: auto !important;
+    border-radius: 18px !important;
+    height: 36px;
+}
+.np-back-btn span { display: inline !important; padding-right: 0 !important; }
+.np-back-btn:hover { background: rgba(255, 255, 255, 0.16); }
+
+.np-lyrics {
+    align-items: stretch;
+    justify-content: center;
+    padding: 28px 18px;
+    overscroll-behavior: contain;
+}
+.np-lyrics-inner {
+    width: 100%;
+    max-width: 640px;
+    height: 100%;
+    margin: 0 auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+.np-lyrics-inner h3 { text-align: center; }
+.np-lyrics-head { flex: 0 0 auto; justify-content: center; gap: 14px; position: relative; }
+.np-lyrics-head .np-panel-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
+.np-lyrics-body {
+    flex: 1 1 0;
+    min-height: 0;
+    text-align: center;
+    font-size: 1.45rem;
+    line-height: 1.5;
+    margin: 0;
+    color: #fff;
+
+    padding: 45% 6px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
+            mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
+}
+.np-lyrics-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
+.np-lyrics-meta { flex: 0 0 auto; padding-top: 8px; }
+
+.np-lyric-line {
+    display: block;
+    padding: 10px 6px;
+    line-height: 1.35;
+    font-size: 1.4rem;
+
+    font-weight: 500;
+    letter-spacing: -0.005em;
+    color: rgba(255, 255, 255, 0.55);
+    transform: scale(0.96);
+    transform-origin: center;
+    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
+                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
+                color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+                font-weight 0.25s ease,
+                text-shadow 0.5s ease;
+    text-align: center;
+    will-change: transform, color;
+
+    max-width: 100%;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+    hyphens: auto;
+    white-space: normal;
+}
+
+.np-lyric-line.is-past {
+    color: rgba(255, 255, 255, 0.32);
+    font-weight: 500;
+}
+
+.np-lyric-line.is-active {
+    transform: scale(1.12);
+    color: #ffffff;
+    font-weight: 900;
+    letter-spacing: 0;
+    text-shadow: 0 0 22px rgba(167, 139, 250, 0.55),
+                 0 2px 14px rgba(0, 0, 0, 0.55);
+}
+
+.np-lyric-line.is-active ~ .np-lyric-line {
+    color: rgba(255, 255, 255, 0.55);
+    font-weight: 500;
+    transform: scale(0.96);
+}
+.np-lyric-line.is-loading,
+.np-lyric-line.is-empty {
+    transform: none;
+    font-style: italic;
+    font-weight: 500;
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+@media (max-width: 600px) {
+    .np-lyrics { padding: 18px 10px; }
+    .np-lyrics-body { font-size: 1.15rem; }
+    .np-lyric-line { font-size: 1.15rem; padding: 8px 4px; }
+    .np-lyric-line.is-active { transform: scale(1.08); }
+}
+
+.np-info {
+    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(255, 255, 255, 0.02));
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 14px;
+    padding: 10px 14px;
+}
+.np-like {
+    width: 44px !important;
+    height: 44px !important;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    color: rgba(255, 255, 255, 0.85);
+    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease;
+}
+.np-like svg { width: 22px !important; height: 22px !important; transition: transform 0.18s ease; }
+.np-like:hover {
+    background: rgba(244, 63, 94, 0.12);
+    border-color: rgba(244, 63, 94, 0.45);
+    color: #fff;
+    transform: scale(1.06);
+}
+.np-like.is-liked {
+    color: #fff;
+    background: linear-gradient(135deg, #f43f5e, #ec4899);
+    border-color: rgba(244, 63, 94, 0.65);
+    box-shadow: 0 8px 22px rgba(244, 63, 94, 0.45);
+}
+.np-like.is-liked svg { fill: currentColor; transform: scale(1.05); }
+.np-like.just-liked { animation: npLikePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
+@keyframes npLikePop {
+    0%   { transform: scale(1); }
+    40%  { transform: scale(1.25); }
+    100% { transform: scale(1.06); }
+}
+@media (max-width: 600px) {
+    .np-info { padding: 8px 12px; gap: 12px; }
+    .np-like { width: 40px !important; height: 40px !important; }
+    .np-like svg { width: 20px !important; height: 20px !important; }
+}

frontend/public/music.html

@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <title>Music · anicove</title>
+  <meta name="description" content="Listen to anime openings, endings and OSTs. Powered by AnimeThemes.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/music.css">
+  <style>
+    :root {
+      --header-h: 0px;
+    }
+    body {
+      font-family: 'Outfit', sans-serif;
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+
+<body class="music-body">
+  <main class="music-app" id="music-app">
+    <aside class="music-sidebar" id="music-sidebar">
+      <div class="ms-block">
+        <div class="ms-block-title">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z"/></svg>
+          <span>Browse</span>
+        </div>
+        <a class="ms-link" data-route="#/" href="#/">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20"/><path d="M12 2a14.5 14.5 0 0 1 0 20"/><line x1="2" y1="12" x2="22" y2="12"/></svg>
+          <span>Discover</span>
+        </a>
+        <a class="ms-link" data-route="#/recent" href="#/recent">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+          <span>Newest Themes</span>
+        </a>
+        <a class="ms-link" data-route="#/artists" href="#/artists">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+          <span>Artists</span>
+        </a>
+      </div>
+
+      <div class="ms-block">
+        <div class="ms-block-title">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+          <span>Library</span>
+        </div>
+        <a class="ms-link" data-route="#/liked" href="#/liked">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+          <span>Liked Songs</span>
+        </a>
+        <a class="ms-link" data-route="#/history" href="#/history">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
+          <span>Recently Played</span>
+        </a>
+      </div>
+
+      <div class="ms-block">
+        <div class="ms-block-title">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+          <span>By Year</span>
+        </div>
+        <div class="ms-year-grid" id="ms-year-grid"></div>
+      </div>
+    </aside>
+
+    <section class="music-main" id="music-main">
+      <div class="ms-topbar">
+        <button class="ms-nav-btn" id="ms-back" aria-label="Back" disabled>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+        </button>
+        <button class="ms-nav-btn" id="ms-fwd" aria-label="Forward" disabled>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+        </button>
+
+        <div class="ms-search">
+          <span class="ms-search-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          </span>
+          <input id="ms-search-input" type="text" placeholder="What do you want to listen to?" autocomplete="off">
+          <button class="ms-search-clear" id="ms-search-clear" aria-label="Clear" hidden>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+
+        <button class="ms-sidebar-toggle" id="ms-sidebar-toggle" aria-label="Library">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+        </button>
+      </div>
+
+      <div class="ms-view" id="ms-view"></div>
+    </section>
+  </main>
+
+  <div class="ms-sidebar-backdrop" id="ms-sidebar-backdrop"></div>
+
+  <div class="player-bar" id="player-bar" data-empty="1">
+    <div class="pb-track">
+      <button class="pb-cover-btn" id="pb-expand" aria-label="Expand player">
+        <img class="pb-cover" id="pb-cover" alt="" referrerpolicy="no-referrer">
+        <span class="pb-cover-fallback" id="pb-cover-fallback" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+        </span>
+        <span class="pb-cover-overlay">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+        </span>
+      </button>
+      <div class="pb-meta">
+        <button class="pb-title" id="pb-title" type="button">Pick a song to start</button>
+        <a class="pb-artist" id="pb-artist" href="#">—</a>
+      </div>
+      <button class="pb-like" id="pb-like" aria-label="Like">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+      </button>
+      <button class="pb-dismiss" id="pb-dismiss" aria-label="Hide player">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+
+    <div class="pb-center">
+      <div class="pb-controls">
+        <button class="pb-btn" id="pb-shuffle" aria-label="Shuffle">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
+        </button>
+        <button class="pb-btn" id="pb-prev" aria-label="Previous">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
+        </button>
+        <button class="pb-play" id="pb-play" aria-label="Play">
+          <svg id="pb-play-svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+        </button>
+        <button class="pb-btn" id="pb-next" aria-label="Next">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zm10-12v12h2V6z"/></svg>
+        </button>
+        <button class="pb-btn" id="pb-loop" aria-label="Loop">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
+        </button>
+      </div>
+      <div class="pb-progress">
+        <span class="pb-time" id="pb-cur">0:00</span>
+        <div class="pb-bar" id="pb-seek">
+          <div class="pb-bar-fill" id="pb-seek-fill"></div>
+          <div class="pb-bar-knob" id="pb-seek-knob"></div>
+        </div>
+        <span class="pb-time" id="pb-dur">0:00</span>
+      </div>
+    </div>
+
+    <div class="pb-right">
+      <button class="pb-btn pb-mobile-play" id="pb-play-mobile" aria-label="Play">
+        <svg id="pb-play-mobile-svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+      </button>
+      <button class="pb-btn" id="pb-mute" aria-label="Mute">
+        <svg id="pb-vol-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>
+      </button>
+      <div class="pb-vol" id="pb-vol">
+        <div class="pb-bar-fill" id="pb-vol-fill"></div>
+        <div class="pb-bar-knob" id="pb-vol-knob"></div>
+      </div>
+    </div>
+
+    <audio id="pb-audio" preload="metadata"></audio>
+  </div>
+
+  <div class="np-modal" id="np-modal" hidden>
+    <div class="np-bg" id="np-bg"></div>
+    <div class="np-inner">
+      <div class="np-header">
+        <button class="np-icon-btn np-back-btn" id="np-close" aria-label="Back">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+          <span>Back</span>
+        </button>
+        <div class="np-source">
+          <div class="np-eyebrow">Playing from</div>
+          <a class="np-source-name" id="np-source-name" href="#">—</a>
+        </div>
+        <div style="width:36px"></div>
+      </div>
+
+      <div class="np-stage" id="np-stage">
+        <span class="np-cover-fallback" id="np-cover-fallback" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+        </span>
+        <img class="np-cover" id="np-cover" alt="" referrerpolicy="no-referrer">
+        <video class="np-video" id="np-video" playsinline preload="metadata" hidden></video>
+        <div class="np-loading" id="np-loading" hidden><div class="np-spinner"></div></div>
+        <div class="np-lyrics" id="np-lyrics" hidden>
+          <div class="np-lyrics-inner">
+            <div class="np-lyrics-head">
+              <h3>Lyrics</h3>
+              <button class="np-panel-close" id="np-lyrics-close" aria-label="Close lyrics">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            </div>
+            <p class="np-lyrics-body" id="np-lyrics-body">Pick a song to load lyrics.</p>
+            <div class="np-lyrics-meta" id="np-lyrics-meta"></div>
+          </div>
+        </div>
+        <div class="np-queue" id="np-queue" hidden>
+          <div class="np-queue-head">
+            <h3>Queue</h3>
+            <span id="np-queue-count">0 tracks</span>
+            <button class="np-panel-close" id="np-queue-close" aria-label="Close queue">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+          </div>
+          <div class="np-queue-list" id="np-queue-list"></div>
+        </div>
+      </div>
+
+      <div class="np-info">
+        <div class="np-info-text">
+          <a class="np-title" id="np-title" href="#">—</a>
+          <a class="np-artist" id="np-artist" href="#">—</a>
+        </div>
+        <button class="np-like" id="np-like" aria-label="Like">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+        </button>
+      </div>
+
+      <div class="np-progress">
+        <div class="np-bar" id="np-seek">
+          <div class="np-bar-fill" id="np-seek-fill"></div>
+          <div class="np-bar-knob" id="np-seek-knob"></div>
+        </div>
+        <div class="np-times">
+          <span id="np-cur">0:00</span>
+          <span id="np-dur">0:00</span>
+        </div>
+      </div>
+
+      <div class="np-controls">
+        <button class="np-ctl" id="np-shuffle" aria-label="Shuffle">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
+        </button>
+        <button class="np-ctl" id="np-prev" aria-label="Previous">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
+        </button>
+        <button class="np-play-big" id="np-play" aria-label="Play">
+          <svg id="np-play-svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+        </button>
+        <button class="np-ctl" id="np-next" aria-label="Next">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zm10-12v12h2V6z"/></svg>
+        </button>
+        <button class="np-ctl" id="np-loop" aria-label="Loop">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
+        </button>
+      </div>
+
+      <div class="np-tools">
+        <button class="np-tool" id="np-video-btn" aria-label="Toggle video">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
+          <span>Video</span>
+        </button>
+        <button class="np-tool" id="np-lyrics-btn" aria-label="Toggle lyrics">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 10h12M4 14h16M4 18h8"/></svg>
+          <span>Lyrics</span>
+        </button>
+        <button class="np-tool" id="np-queue-btn" aria-label="Toggle queue">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+          <span>Queue</span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div id="toast-container"></div>
+
+  <script src="/music-api.js"></script>
+  <script src="/music.js"></script>
+</body>
+</html>

frontend/public/music.js

@@ -0,0 +1,1729 @@
+(function () {
+    const $ = (s, r) => (r || document).querySelector(s);
+    const $$ = (s, r) => Array.from((r || document).querySelectorAll(s));
+
+    const audio = $('#pb-audio');
+    const video = $('#np-video');
+    const view = $('#ms-view');
+    const playerBar = $('#player-bar');
+    const npModal = $('#np-modal');
+
+    let mediaMode = 'audio';
+    function activeMedia() { return mediaMode === 'video' ? video : audio; }
+
+    const STORE = {
+        liked: 'kv_music_liked',
+        history: 'kv_music_history',
+        vol: 'kv_music_vol',
+    };
+
+    const state = {
+        queue: [],
+        index: -1,
+        liked: new Set(JSON.parse(localStorage.getItem(STORE.liked) || '[]')),
+        history: JSON.parse(localStorage.getItem(STORE.history) || '[]'),
+        volume: parseFloat(localStorage.getItem(STORE.vol) || '0.8'),
+        muted: false,
+        loop: false,
+        shuffle: false,
+        navStack: [],
+        navFwd: [],
+        scrubbing: false,
+    };
+
+    const api = {
+        search:  (q)    => fetchAPI(`/themes/search?q=${encodeURIComponent(q)}`),
+        anime:   (id)   => fetchAPI(`/themes/anime/${encodeURIComponent(id)}`),
+        artist:  (slug) => fetchAPI(`/themes/artist/${encodeURIComponent(slug)}`),
+        recent:  ()     => fetchAPI('/themes/recent'),
+        year:    (y)    => fetchAPI(`/themes/year/${encodeURIComponent(y)}`),
+        artists: ()     => fetchAPI('/themes/top-artists'),
+    };
+
+    const esc = (s) => String(s == null ? '' : s).replace(/[<>&"']/g, c => ({
+        '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#39;',
+    }[c]));
+
+    const fmtTime = (sec) => {
+        if (!isFinite(sec) || sec < 0) sec = 0;
+        const m = Math.floor(sec / 60);
+        const s = Math.floor(sec % 60);
+        return `${m}:${s < 10 ? '0' : ''}${s}`;
+    };
+
+    const placeholderCover = (label) => {
+        const t = (label || '?').slice(0, 1).toUpperCase();
+        return `<div class="ms-card-cover-fallback"><span style="font-size:2.4rem;font-weight:900;letter-spacing:-0.04em;">${esc(t)}</span></div>`;
+    };
+
+    function coverImg(url, label, opts) {
+        opts = opts || {};
+        const cls = opts.cls || 'ms-card-cover';
+        if (!url) return placeholderCover(label || '');
+        return `<img class="${cls}" data-cover-fallback="${esc(label || '')}"`
+            + ` src="${esc(url)}" alt="" loading="lazy" referrerpolicy="no-referrer">`;
+    }
+
+    document.addEventListener('error', (e) => {
+        const img = e.target;
+        if (!(img instanceof HTMLImageElement)) return;
+        if (!img.dataset || img.dataset.coverFallback == null) return;
+        const label = img.dataset.coverFallback;
+        const wrap  = img.parentNode;
+        if (!wrap) return;
+
+        const tmp = document.createElement('div');
+        tmp.innerHTML = placeholderCover(label);
+        const node = tmp.firstChild;
+        if (node) wrap.replaceChild(node, img);
+    }, true);
+
+    const coverUrl = (anime) => {
+        if (!anime) return '';
+        const imgs = anime.images || [];
+        const large = imgs.find(i => i.facet === 'Large Cover');
+        const small = imgs.find(i => i.facet === 'Small Cover');
+        return (large || small || imgs[0])?.link || '';
+    };
+
+    const artistImageUrl = (artist) => {
+        if (!artist) return '';
+        const imgs = artist.images || [];
+        const large = imgs.find(i => i.facet === 'Large Cover');
+        const small = imgs.find(i => i.facet === 'Small Cover');
+        return (large || small || imgs[0])?.link || '';
+    };
+
+    function trackFromTheme(anime, theme, animeOverride) {
+        const animeRef = animeOverride || theme.anime || anime;
+        if (!animeRef) return null;
+        const entries = theme.animethemeentries || [];
+        let pickedAudio = null, pickedVideo = null, pickedEntry = null;
+        for (const e of entries) {
+            for (const v of (e.videos || [])) {
+                if (v.audio && v.audio.link) {
+                    pickedAudio = v.audio;
+                    pickedVideo = v;
+                    pickedEntry = e;
+                    break;
+                }
+            }
+            if (pickedAudio) break;
+        }
+        if (!pickedAudio) return null;
+        const cover = coverUrl(animeRef) || (theme.song?.artists?.[0] && artistImageUrl(theme.song.artists[0])) || '';
+        const slug = theme.slug || `${theme.type || ''}${theme.sequence || ''}`;
+        return {
+            id: `${theme.id}-${pickedAudio.id}`,
+            themeId: theme.id,
+            title: theme.song?.title || slug || 'Untitled',
+            type: slug,
+            typeKind: theme.type || '',
+            artists: theme.song?.artists || [],
+            animeId: animeRef.id,
+            animeName: animeRef.name,
+            animeSlug: animeRef.slug,
+            cover,
+            audio: pickedAudio.link,
+            videoLink: pickedVideo?.link,
+            episodes: pickedEntry?.episodes || '',
+        };
+    }
+
+    function tracksFromAnime(anime) {
+        return (anime.animethemes || [])
+            .map(t => trackFromTheme(anime, t))
+            .filter(Boolean);
+    }
+
+    function persistLiked() { localStorage.setItem(STORE.liked, JSON.stringify(Array.from(state.liked))); }
+    function persistHistory() { localStorage.setItem(STORE.history, JSON.stringify(state.history.slice(0, 60))); }
+    function persistVol() { localStorage.setItem(STORE.vol, String(state.volume)); }
+
+    function isLiked(track) { return state.liked.has(track.id); }
+    function toggleLike(track) {
+        if (state.liked.has(track.id)) {
+            state.liked.delete(track.id);
+            try { localStorage.removeItem(`kv_music_track_${track.id}`); } catch (_) { }
+        } else {
+            state.liked.add(track.id);
+            try { localStorage.setItem(`kv_music_track_${track.id}`, JSON.stringify(track)); } catch (_) { }
+        }
+        persistLiked();
+        updatePlayerLike();
+        $$(`.ms-track-like[data-tid="${CSS.escape(track.id)}"]`).forEach(b => {
+            b.classList.toggle('is-liked', state.liked.has(track.id));
+        });
+    }
+
+    function pushHistory(track) {
+        try { localStorage.setItem(`kv_music_track_${track.id}`, JSON.stringify(track)); } catch (_) { }
+        state.history = [track.id, ...state.history.filter(id => id !== track.id)].slice(0, 60);
+        persistHistory();
+    }
+
+    function loadStoredTracks(ids) {
+        const out = [];
+        for (const id of ids) {
+            try {
+                const raw = localStorage.getItem(`kv_music_track_${id}`);
+                if (raw) out.push(JSON.parse(raw));
+            } catch (_) { }
+        }
+        return out;
+    }
+
+    function play(queue, idx) {
+        if (!queue || !queue.length) return;
+        state.queue = queue.slice();
+        state.index = Math.max(0, Math.min(idx || 0, state.queue.length - 1));
+        loadCurrent(true);
+        renderQueue();
+
+        if (window.innerWidth <= 720) openNP();
+    }
+
+    function jumpTo(idx) {
+        if (idx < 0 || idx >= state.queue.length) return;
+        state.index = idx;
+        loadCurrent(true);
+        renderQueue();
+    }
+
+    function renderQueue() {
+        const list = $('#np-queue-list');
+        const count = $('#np-queue-count');
+        if (!list || !count) return;
+        const q = state.queue;
+        count.textContent = q.length ? `${q.length} track${q.length > 1 ? 's' : ''}` : 'Empty';
+        if (!q.length) {
+            list.innerHTML = `<div class="np-queue-empty">Pick a song to start playing.</div>`;
+            return;
+        }
+        list.innerHTML = q.map((t, i) => `
+            <button class="np-queue-row${i === state.index ? ' is-current' : ''}" data-qjump="${i}">
+                <span class="np-queue-cover">
+                    ${t.cover ? `<img src="${esc(t.cover)}" alt="" referrerpolicy="no-referrer">` : ''}
+                    ${i === state.index ? '<span class="np-queue-eq"><i></i><i></i><i></i></span>' : ''}
+                </span>
+                <span class="np-queue-text">
+                    <span class="np-queue-title">${esc(t.title)}</span>
+                    <span class="np-queue-sub">${esc((t.artists || []).map(a => a.name).join(', ') || t.animeName || '')}</span>
+                </span>
+                <span class="np-queue-tag">${i < state.index ? 'Played' : (i === state.index ? 'Now' : 'Next')}</span>
+            </button>
+        `).join('');
+        $$('[data-qjump]', list).forEach(btn => {
+            btn.addEventListener('click', () => jumpTo(parseInt(btn.dataset.qjump, 10)));
+        });
+
+        const cur = list.querySelector('.is-current');
+        if (cur) cur.scrollIntoView({ block: 'nearest' });
+    }
+
+    function loadCurrent(autoplay) {
+        const t = state.queue[state.index];
+        if (!t) return;
+        playerBar.dataset.empty = '0';
+
+        document.body.classList.remove('pb-hidden');
+
+        if (mediaMode === 'video' && !t.videoLink) {
+            setVideoMode(false, false);
+        }
+
+        if (mediaMode === 'video') {
+            video.src = t.videoLink;
+            try { audio.removeAttribute('src'); audio.load(); } catch (_) { }
+            video.muted = state.muted;
+            video.volume = state.volume;
+        } else {
+            audio.src = t.audio;
+            try { video.removeAttribute('src'); video.load(); } catch (_) { }
+            audio.muted = state.muted;
+            audio.volume = state.volume;
+        }
+
+        if (autoplay) {
+            const p = activeMedia().play();
+            if (p && p.catch) p.catch(() => { });
+        }
+        renderPlayerMeta(t);
+        pushHistory(t);
+        updateNowPlayingMarkers();
+    }
+
+    function setVideoMode(on, reload = true) {
+        const t = state.queue[state.index];
+        if (on && (!t || !t.videoLink)) {
+            toast && toast('No video available for this track');
+            return;
+        }
+        const wasPaused = activeMedia().paused;
+        const ct = activeMedia().currentTime || 0;
+        activeMedia().pause();
+
+        mediaMode = on ? 'video' : 'audio';
+        document.body.classList.toggle('np-video-on', mediaMode === 'video');
+        $('#np-video-btn').classList.toggle('is-on', mediaMode === 'video');
+        const npVid = $('#np-video');
+        const npCov = $('#np-cover');
+        if (npVid) npVid.hidden = mediaMode !== 'video';
+        if (npCov) npCov.hidden = mediaMode === 'video';
+
+        if (!t) return;
+
+        if (reload) {
+            if (mediaMode === 'video') {
+                video.src = t.videoLink;
+                try { audio.removeAttribute('src'); audio.load(); } catch (_) { }
+            } else {
+                audio.src = t.audio;
+                try { video.removeAttribute('src'); video.load(); } catch (_) { }
+            }
+            const m = activeMedia();
+            m.muted = state.muted;
+            m.volume = state.volume;
+            const onMeta = () => {
+                try { m.currentTime = ct; } catch (_) { }
+                if (!wasPaused) m.play().catch(() => { });
+                m.removeEventListener('loadedmetadata', onMeta);
+            };
+            m.addEventListener('loadedmetadata', onMeta);
+        }
+    }
+
+    function toast(msg) {
+        const c = $('#toast-container');
+        if (!c) return;
+        const el = document.createElement('div');
+        el.className = 'kv-toast';
+        el.textContent = msg;
+        c.appendChild(el);
+        setTimeout(() => el.classList.add('show'), 10);
+        setTimeout(() => { el.classList.remove('show'); setTimeout(() => el.remove(), 300); }, 2200);
+    }
+
+    function next(auto) {
+        if (!state.queue.length) return;
+        if (state.shuffle && state.queue.length > 1) {
+            let n;
+            do { n = Math.floor(Math.random() * state.queue.length); } while (n === state.index);
+            state.index = n;
+        } else {
+            state.index = state.index + 1;
+            if (state.index >= state.queue.length) {
+                if (state.loop || !auto) state.index = 0;
+                else { state.index = state.queue.length - 1; activeMedia().pause(); return; }
+            }
+        }
+        loadCurrent(true);
+        renderQueue();
+    }
+
+    function prev() {
+        if (!state.queue.length) return;
+        if (activeMedia().currentTime > 3) { activeMedia().currentTime = 0; return; }
+        state.index = (state.index - 1 + state.queue.length) % state.queue.length;
+        loadCurrent(true);
+        renderQueue();
+    }
+
+    function togglePlay() {
+        if (playerBar.dataset.empty === '1') return;
+        const m = activeMedia();
+        if (m.paused) m.play().catch(() => { });
+        else m.pause();
+    }
+
+    function setCoverImg(imgEl, btnEl, url) {
+        if (!imgEl) return;
+        if (url) {
+            imgEl.classList.remove('is-failed');
+            if (imgEl.getAttribute('src') !== url) imgEl.src = url;
+            if (btnEl) btnEl.classList.add('has-cover');
+        } else {
+            imgEl.removeAttribute('src');
+            imgEl.classList.add('is-failed');
+            if (btnEl) btnEl.classList.remove('has-cover');
+        }
+    }
+
+    function renderPlayerMeta(t) {
+        const pbCover = $('#pb-cover');
+        const pbCoverBtn = $('#pb-expand');
+        setCoverImg(pbCover, pbCoverBtn, t.cover || '');
+        const titleEl = $('#pb-title');
+        titleEl.textContent = t.title;
+        titleEl.dataset.animeId = t.animeId || '';
+        const artistEl = $('#pb-artist');
+        const artistsLabel = (t.artists && t.artists.length)
+            ? t.artists.map(a => a.name).join(', ')
+            : (t.animeName || '—');
+        if (t.artists && t.artists.length) {
+            const first = t.artists[0];
+            artistEl.textContent = artistsLabel;
+            artistEl.href = `#/artist/${encodeURIComponent(first.slug || first.id)}`;
+        } else {
+            artistEl.textContent = artistsLabel;
+            artistEl.href = `#/anime/${encodeURIComponent(t.animeId)}`;
+        }
+
+        const npCover = $('#np-cover');
+        const npTitle = $('#np-title');
+        const npArtist = $('#np-artist');
+        const npSource = $('#np-source-name');
+        const npBg = $('#np-bg');
+        setCoverImg(npCover, null, t.cover || '');
+        if (npTitle) { npTitle.textContent = t.title; npTitle.href = `#/anime/${encodeURIComponent(t.animeId)}`; }
+        if (npArtist) {
+            npArtist.textContent = artistsLabel;
+            const first = (t.artists || [])[0];
+            npArtist.href = first ? `#/artist/${encodeURIComponent(first.slug || first.id)}` : `#/anime/${encodeURIComponent(t.animeId)}`;
+        }
+        if (npSource) { npSource.textContent = t.animeName || '—'; npSource.href = `#/anime/${encodeURIComponent(t.animeId)}`; }
+        if (npBg && t.cover) npBg.style.backgroundImage = `url("${t.cover}")`;
+
+        const vidBtn = $('#np-video-btn');
+        if (vidBtn) vidBtn.classList.toggle('is-disabled', !t.videoLink);
+
+        const lyricsMeta = $('#np-lyrics-meta');
+        if (lyricsMeta) {
+            lyricsMeta.innerHTML = `
+                <div><span>Anime</span><strong>${esc(t.animeName || '—')}</strong></div>
+                <div><span>Type</span><strong>${esc(t.type || '—')}</strong></div>
+                <div><span>Episodes</span><strong>${esc(t.episodes || '—')}</strong></div>
+                <div><span>Artists</span><strong>${esc((t.artists || []).map(a => a.name).join(', ') || '—')}</strong></div>
+            `;
+        }
+
+        _syncedLines = [];
+        _activeLyricIdx = -1;
+        const lyricsBody = $('#np-lyrics-body');
+        if (lyricsBody) {
+            lyricsBody.dataset.trackId = t.id;
+            lyricsBody.innerHTML = '<span class="np-lyric-line is-loading">Loading lyrics…</span>';
+        }
+        fetchLyricsFor(t);
+
+        updatePlayerLike();
+    }
+
+    let _lyricsCache = {};
+    let _syncedLines = [];
+    let _rawSyncedLines = [];
+    let _lyricsDuration = 0;
+    let _activeLyricIdx = -1;
+    let _lyricRaf = null;
+
+    function parseLRC(lrc) {
+        const out = [];
+        const lineRe = /^((?:\[\d+:\d+(?:\.\d+)?\])+)(.*)$/;
+        const tagRe  = /\[(\d+):(\d+(?:\.\d+)?)\]/g;
+        for (const raw of String(lrc).split(/\r?\n/)) {
+            const m = raw.match(lineRe);
+            if (!m) continue;
+            const text = m[2].trim();
+            let tag;
+            while ((tag = tagRe.exec(m[1])) !== null) {
+                const t = parseInt(tag[1], 10) * 60 + parseFloat(tag[2]);
+                out.push({ t, text });
+            }
+        }
+        out.sort((a, b) => a.t - b.t);
+        return out;
+    }
+
+    function renderPlainLyrics(text) {
+        const body = $('#np-lyrics-body');
+        if (!body) return;
+        if (!text || !text.trim()) {
+            body.innerHTML = '<span class="np-lyric-line is-empty">We couldn\'t find lyrics for this track yet.</span>';
+            return;
+        }
+        const lines = text.split(/\r?\n/);
+        body.innerHTML = lines
+            .map(l => `<div class="np-lyric-line">${esc(l) || '&nbsp;'}</div>`)
+            .join('');
+    }
+
+    function renderSyncedLyrics(lines) {
+        const body = $('#np-lyrics-body');
+        if (!body) return;
+
+        body.style.transform = '';
+        body.scrollTop = 0;
+        body.innerHTML = lines
+            .map((l, i) => `<div class="np-lyric-line" data-i="${i}">${esc(l.text) || '&nbsp;'}</div>`)
+            .join('');
+    }
+
+    function recomputeSyncedLines() {
+        if (!_rawSyncedLines.length) { _syncedLines = []; return; }
+        _syncedLines = _rawSyncedLines.slice();
+        _activeLyricIdx = -1;
+    }
+
+    function updateLyricsHighlight(currentTime) {
+        if (!_syncedLines.length) return;
+
+        let lo = 0, hi = _syncedLines.length - 1, idx = -1;
+        while (lo <= hi) {
+            const mid = (lo + hi) >> 1;
+            if (_syncedLines[mid].t <= currentTime) { idx = mid; lo = mid + 1; }
+            else hi = mid - 1;
+        }
+        if (idx === _activeLyricIdx) return;
+        _activeLyricIdx = idx;
+        const body = $('#np-lyrics-body');
+        if (!body) return;
+        const lines = body.querySelectorAll('.np-lyric-line');
+        lines.forEach((el, i) => {
+            el.classList.toggle('is-active', i === idx);
+            el.classList.toggle('is-past',   i < idx);
+        });
+        if (idx < 0) return;
+        const active = lines[idx];
+        if (!active) return;
+
+        const viewH = body.clientHeight;
+        if (viewH <= 0) return;
+
+        const ACTIVE_RATIO = 0.42;
+        const target = active.offsetTop + (active.offsetHeight / 2) - (viewH * ACTIVE_RATIO);
+        scrollLyricsTo(body, Math.max(0, target));
+    }
+
+    let _lyricScrollRaf = 0;
+    function scrollLyricsTo(body, target) {
+        if (!body) return;
+        target = Math.max(0, Math.min(target, body.scrollHeight - body.clientHeight));
+        if (_lyricScrollRaf) cancelAnimationFrame(_lyricScrollRaf);
+        const start = body.scrollTop;
+        const delta = target - start;
+        if (Math.abs(delta) < 0.5) { body.scrollTop = target; return; }
+
+        const dist = Math.abs(delta);
+        const dur = Math.min(900, Math.max(280, dist * 0.9));
+        const t0 = performance.now();
+        const ease = (x) => 1 - Math.pow(1 - x, 3);
+        const step = (now) => {
+            const k = Math.min(1, (now - t0) / dur);
+            body.scrollTop = start + delta * ease(k);
+            if (k < 1) _lyricScrollRaf = requestAnimationFrame(step);
+            else _lyricScrollRaf = 0;
+        };
+        _lyricScrollRaf = requestAnimationFrame(step);
+    }
+
+    function cleanLyricTitle(raw) {
+        if (!raw) return '';
+        let s = String(raw);
+
+        s = s.replace(/^\s*(?:OP|ED|IN)\s*\d*\s*[-–:]\s*/i, '');
+        s = s.replace(/^\s*(?:Opening|Ending|Insert\s*Song|Theme)\s*\d*\s*[-–:]\s*/i, '');
+
+        s = s.replace(/\([^)]*\)/g, '');
+        s = s.replace(/\[[^\]]*\]/g, '');
+
+        s = s.replace(/^[\s"'“”『「]+|[\s"'“”』」]+$/g, '');
+        return s.trim();
+    }
+
+    function waitForAudioDuration(m, timeoutMs) {
+        return new Promise((resolve) => {
+            if (!m) return resolve(0);
+            if (isFinite(m.duration) && m.duration > 0) return resolve(m.duration);
+            let done = false;
+            const finish = (v) => {
+                if (done) return;
+                done = true;
+                m.removeEventListener('loadedmetadata', onMeta);
+                m.removeEventListener('durationchange', onMeta);
+                resolve(v);
+            };
+            const onMeta = () => {
+                if (isFinite(m.duration) && m.duration > 0) finish(m.duration);
+            };
+            m.addEventListener('loadedmetadata', onMeta);
+            m.addEventListener('durationchange', onMeta);
+            setTimeout(() => finish(0), timeoutMs || 4000);
+        });
+    }
+
+    async function fetchLyricsFor(track) {
+        if (!track) return;
+        const lyricsBody = $('#np-lyrics-body');
+        if (!lyricsBody) return;
+        const key = track.id;
+        const apply = (data) => {
+            if (lyricsBody.dataset.trackId !== key) return;
+            const synced = data && data.synced;
+            const plain  = data && data.lyrics;
+            _lyricsDuration = (data && Number(data.duration)) || 0;
+            if (synced) {
+                _rawSyncedLines = parseLRC(synced).filter(l => l.text || l.text === '');
+                if (_rawSyncedLines.length) {
+                    recomputeSyncedLines();
+                    renderSyncedLyrics(_syncedLines);
+                    return;
+                }
+            }
+            _rawSyncedLines = [];
+            _syncedLines = [];
+            renderPlainLyrics(plain || (synced ? String(synced).replace(/^\[\d+:\d+(?:\.\d+)?\]\s?/gm, '') : ''));
+        };
+
+        const audioDur = await waitForAudioDuration(activeMedia(), 4000);
+        if (lyricsBody.dataset.trackId !== key) return;
+
+        const durBucket = audioDur ? Math.round(audioDur / 5) * 5 : 0;
+        const cacheKey = `${key}|${durBucket}`;
+        if (_lyricsCache[cacheKey] != null) { apply(_lyricsCache[cacheKey]); return; }
+
+        const title  = cleanLyricTitle(track.title || '');
+
+        const firstArtist = ((track.artists || [])[0] || {}).name || '';
+        try {
+            const durQs = audioDur ? `&duration=${audioDur.toFixed(2)}` : '';
+            const url = `/api/lyrics?title=${encodeURIComponent(title)}&artist=${encodeURIComponent(firstArtist)}${durQs}`;
+            const res = await fetch(url);
+            const data = await res.json();
+            _lyricsCache[cacheKey] = data;
+            apply(data);
+        } catch (_) {
+            apply({});
+        }
+    }
+
+    function updatePlayerLike() {
+        const t = state.queue[state.index];
+        const btn = $('#pb-like');
+        const npBtn = $('#np-like');
+        const liked = !!(t && state.liked.has(t.id));
+        if (btn) btn.classList.toggle('is-liked', liked);
+        if (npBtn) npBtn.classList.toggle('is-liked', liked);
+    }
+
+    function updateNowPlayingMarkers() {
+        const t = state.queue[state.index];
+        $$('.ms-track').forEach(row => {
+            row.classList.toggle('is-playing', !!(t && row.dataset.tid === t.id));
+        });
+    }
+
+    function setPlayUI(playing) {
+        const pause = '<path d="M6 5h4v14H6zm8 0h4v14h-4z"/>';
+        const play = '<path d="M8 5v14l11-7z"/>';
+        const ic = playing ? pause : play;
+        const set = (id) => {
+            const el = $('#' + id);
+            if (el) el.outerHTML = `<svg id="${id}" viewBox="0 0 24 24" fill="currentColor">${ic}</svg>`;
+        };
+        set('pb-play-svg');
+        set('pb-play-mobile-svg');
+        set('np-play-svg');
+
+        document.body.classList.toggle('is-playing', !!playing);
+    }
+
+    function openNP() {
+        if (playerBar.dataset.empty === '1') return;
+        npModal.hidden = false;
+        document.body.classList.add('np-open');
+
+        $('#np-shuffle').classList.toggle('is-on', state.shuffle);
+        $('#np-loop').classList.toggle('is-on', state.loop);
+        $('#np-video-btn').classList.toggle('is-on', mediaMode === 'video');
+        setSeek();
+        updatePlayerLike();
+    }
+    function closeNP() {
+        npModal.hidden = true;
+        document.body.classList.remove('np-open');
+        document.body.classList.remove('np-lyrics-open');
+    }
+
+    function setVolUI() {
+        const v = state.muted ? 0 : state.volume;
+        $('#pb-vol-fill').style.width = (v * 100) + '%';
+        const knob = $('#pb-vol-knob');
+        if (knob) knob.style.left = (v * 100) + '%';
+        const svg = $('#pb-vol-svg');
+        if (!svg) return;
+        let path;
+        if (v === 0) path = '<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/>';
+        else if (v < 0.5) path = '<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>';
+        else path = '<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>';
+        svg.innerHTML = path;
+    }
+
+    function setSeek(t) {
+        const m = activeMedia();
+        const dur = m.duration;
+        const cur = t == null ? m.currentTime : t;
+        $('#pb-cur').textContent = fmtTime(cur);
+        $('#pb-dur').textContent = fmtTime(dur);
+        const pct = dur ? (cur / dur) * 100 : 0;
+        $('#pb-seek-fill').style.width = pct + '%';
+        const knob = $('#pb-seek-knob');
+        if (knob) knob.style.left = pct + '%';
+
+        const npCur = $('#np-cur'), npDur = $('#np-dur'), npFill = $('#np-seek-fill'), npKnob = $('#np-seek-knob');
+        if (npCur) npCur.textContent = fmtTime(cur);
+        if (npDur) npDur.textContent = fmtTime(dur);
+        if (npFill) npFill.style.width = pct + '%';
+        if (npKnob) npKnob.style.left = pct + '%';
+    }
+
+    function bindBar(bar, onChange) {
+        let pending = null;
+        let rafId = 0;
+        const flush = () => {
+            rafId = 0;
+            if (pending != null) { onChange(pending); pending = null; }
+        };
+        const schedule = (pct) => {
+            pending = pct;
+            if (!rafId) rafId = requestAnimationFrame(flush);
+        };
+        const setFromEvent = (e) => {
+            const r = bar.getBoundingClientRect();
+            const x = (e.touches ? e.touches[0].clientX : e.clientX) - r.left;
+            const pct = Math.max(0, Math.min(1, x / r.width));
+            schedule(pct);
+        };
+        let dragging = false;
+        const onUp = () => {
+            dragging = false;
+            state.scrubbing = false;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('touchmove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            document.removeEventListener('touchend', onUp);
+            if (rafId) { cancelAnimationFrame(rafId); rafId = 0; flush(); }
+        };
+        const onMove = (e) => { if (dragging) setFromEvent(e); };
+        bar.addEventListener('mousedown', (e) => {
+            dragging = true; state.scrubbing = true; setFromEvent(e);
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+        });
+        bar.addEventListener('touchstart', (e) => {
+            dragging = true; state.scrubbing = true; setFromEvent(e);
+            document.addEventListener('touchmove', onMove, { passive: true });
+            document.addEventListener('touchend', onUp);
+        }, { passive: true });
+        bar.addEventListener('click', setFromEvent);
+    }
+
+    let _stageSpinnerTimer = 0;
+    function showStageLoading(on) {
+        const el = $('#np-loading');
+        if (!el) return;
+        if (on) {
+            if (_stageSpinnerTimer) return;
+            _stageSpinnerTimer = setTimeout(() => {
+                _stageSpinnerTimer = 0;
+                el.hidden = false;
+            }, 350);
+        } else {
+            if (_stageSpinnerTimer) { clearTimeout(_stageSpinnerTimer); _stageSpinnerTimer = 0; }
+            el.hidden = true;
+        }
+    }
+
+    function navigate(hash) {
+        if (location.hash !== hash) location.hash = hash;
+        else handleRoute();
+    }
+
+    function handleRoute() {
+        const hash = location.hash || '#/';
+        if (state.navStack[state.navStack.length - 1] !== hash) {
+            state.navStack.push(hash);
+            state.navFwd = [];
+        }
+        $('#ms-back').disabled = state.navStack.length <= 1;
+        $('#ms-fwd').disabled = state.navFwd.length === 0;
+
+        $$('.ms-link').forEach(l => {
+            l.classList.toggle('active', l.dataset.route === hash || (hash === '#/' && l.dataset.route === '#/'));
+        });
+
+        if (hash.startsWith('#/search?')) {
+            const q = decodeURIComponent(hash.split('q=')[1] || '');
+            $('#ms-search-input').value = q;
+            $('#ms-search-clear').hidden = !q;
+            renderSearch(q);
+        } else if (hash.startsWith('#/anime/')) {
+            renderAnime(decodeURIComponent(hash.split('/')[2] || ''));
+        } else if (hash.startsWith('#/artist/')) {
+            renderArtist(decodeURIComponent(hash.split('/')[2] || ''));
+        } else if (hash.startsWith('#/year/')) {
+            renderYear(hash.split('/')[2]);
+        } else if (hash === '#/recent') renderRecent();
+        else if (hash === '#/liked') renderLiked();
+        else if (hash === '#/history') renderHistory();
+        else if (hash === '#/artists') renderTopArtists();
+        else renderHome();
+
+        view.scrollTo({ top: 0 });
+        $('#music-main').scrollTo({ top: 0 });
+        closeSidebarIfMobile();
+    }
+
+    function loadingHTML(label) {
+        return `<div class="ms-loading"><div class="ms-spinner"></div><div>${esc(label || 'Loading…')}</div></div>`;
+    }
+
+    function emptyHTML(title, sub) {
+        return `<div class="ms-empty">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+            <h3>${esc(title)}</h3>
+            <p>${esc(sub || '')}</p>
+        </div>`;
+    }
+
+    function animeCardHTML(anime) {
+        const cover = coverUrl(anime);
+        const themesCount = (anime.animethemes || []).length;
+        const sub = themesCount ? `${themesCount} theme${themesCount > 1 ? 's' : ''} · ${anime.year || ''}` : `${anime.year || ''} · ${anime.media_format || ''}`;
+        return `<a class="ms-card" data-anime-id="${esc(anime.id)}" href="#/anime/${encodeURIComponent(anime.id)}">
+            <div class="ms-card-cover-wrap">
+                ${coverImg(cover, anime.name)}
+                <button class="ms-card-play" data-play-anime="${esc(anime.id)}" aria-label="Play">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                </button>
+            </div>
+            <div class="ms-card-title">${esc(anime.name)}</div>
+            <div class="ms-card-sub">${esc(sub)}</div>
+        </a>`;
+    }
+
+    function artistCardHTML(artist) {
+        const img = artistImageUrl(artist);
+        return `<a class="ms-card is-artist" href="#/artist/${encodeURIComponent(artist.slug || artist.id)}">
+            <div class="ms-card-cover-wrap">
+                ${coverImg(img, artist.name)}
+            </div>
+            <div class="ms-card-title">${esc(artist.name)}</div>
+            <div class="ms-card-sub">Artist</div>
+        </a>`;
+    }
+
+    function songCardHTML(song) {
+        const themes = song.animethemes || [];
+        const firstAnime = themes[0]?.anime;
+        const artists = (song.artists || []).map(a => a.name).join(', ');
+        const href = firstAnime ? `#/anime/${encodeURIComponent(firstAnime.id)}` : '#/';
+        return `<a class="ms-card" href="${href}">
+            <div class="ms-card-cover-wrap">
+                ${placeholderCover(song.title)}
+                ${firstAnime ? `<button class="ms-card-play" data-play-song-anime="${esc(firstAnime.id)}" data-song-theme="${esc(themes[0].id)}" aria-label="Play">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                </button>` : ''}
+            </div>
+            <div class="ms-card-title">${esc(song.title)}</div>
+            <div class="ms-card-sub">${esc(artists || (firstAnime?.name || ''))}</div>
+        </a>`;
+    }
+
+    function bindCardClicks(scope) {
+        $$('[data-play-anime]', scope).forEach(btn => {
+            btn.addEventListener('click', async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const id = btn.dataset.playAnime;
+                btn.disabled = true;
+                try {
+                    const data = await api.anime(id);
+                    const a = data.anime;
+                    if (!a) return;
+                    const tracks = tracksFromAnime(a);
+                    if (tracks.length) play(tracks, 0);
+                } finally { btn.disabled = false; }
+            });
+        });
+        $$('[data-play-song-anime]', scope).forEach(btn => {
+            btn.addEventListener('click', async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const aid = btn.dataset.playSongAnime;
+                const themeId = btn.dataset.songTheme;
+                btn.disabled = true;
+                try {
+                    const data = await api.anime(aid);
+                    const a = data.anime;
+                    if (!a) return;
+                    const tracks = tracksFromAnime(a);
+                    if (!tracks.length) return;
+                    const idx = Math.max(0, tracks.findIndex(t => String(t.themeId) === String(themeId)));
+                    play(tracks, idx);
+                } finally { btn.disabled = false; }
+            });
+        });
+    }
+
+    function renderHome() {
+        const hour = new Date().getHours();
+        const greet = hour < 5 ? 'Good evening' : hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
+
+        view.innerHTML = `
+            <div class="ms-home-hero">
+                <h1 class="ms-home-greet">${greet}</h1>
+                <div class="ms-quick-grid" id="home-quick"></div>
+            </div>
+
+            <div class="ms-section-title">
+                <h2>Newest themes</h2>
+                <a href="#/recent">View all</a>
+            </div>
+            <div class="ms-card-grid" id="home-recent">${loadingHTML()}</div>
+
+            <div class="ms-section-title">
+                <h2>Popular artists</h2>
+                <a href="#/artists">View all</a>
+            </div>
+            <div class="ms-card-grid" id="home-artists">${loadingHTML()}</div>
+
+            <div class="ms-section-title">
+                <h2>From your library</h2>
+                <a href="#/liked">View all</a>
+            </div>
+            <div id="home-liked"></div>
+
+            <div class="ms-section-title">
+                <h2>Browse by year</h2>
+            </div>
+            <div class="ms-card-grid ms-years-grid" id="home-years"></div>
+        `;
+
+        const quickEl = $('#home-quick');
+        const quickIds = [];
+        Array.from(state.liked).slice(0, 4).forEach(id => quickIds.push(id));
+        state.history.slice(0, 6).forEach(id => { if (!quickIds.includes(id)) quickIds.push(id); });
+        const quickTracks = loadStoredTracks(quickIds.slice(0, 6));
+        if (quickTracks.length) {
+            quickEl.innerHTML = quickTracks.map(t => `
+                <a class="ms-quick-tile" href="#/anime/${encodeURIComponent(t.animeId)}" data-quick-tid="${esc(t.id)}">
+                    ${t.cover ? `<img class="ms-quick-cover" src="${esc(t.cover)}" alt="" loading="lazy" referrerpolicy="no-referrer">` : `<div class="ms-quick-cover" style="background:linear-gradient(135deg,#4c1d95,#1e1b4b)"></div>`}
+                    <span class="ms-quick-name">${esc(t.title)}</span>
+                    <button class="ms-quick-play" data-play-quick="${esc(t.id)}" aria-label="Play">
+                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                    </button>
+                </a>
+            `).join('');
+            $$('[data-play-quick]', quickEl).forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    e.preventDefault(); e.stopPropagation();
+                    const t = quickTracks.find(x => x.id === btn.dataset.playQuick);
+                    if (t) play([t], 0);
+                });
+            });
+        } else {
+            quickEl.innerHTML = `<div class="ms-quick-empty">Like songs and they'll show up here for one-tap play.</div>`;
+        }
+
+        api.recent().then(d => {
+            const items = (d.anime || []).slice(0, 12);
+            $('#home-recent').innerHTML = items.length
+                ? items.map(animeCardHTML).join('')
+                : emptyHTML('No themes found', '');
+            bindCardClicks($('#home-recent'));
+        }).catch(() => { $('#home-recent').innerHTML = emptyHTML('Could not load', 'Try again in a moment.'); });
+
+        api.artists().then(d => {
+            const items = (d.artists || []).slice(0, 8);
+            $('#home-artists').innerHTML = items.length
+                ? items.map(artistCardHTML).join('')
+                : emptyHTML('No artists', '');
+        }).catch(() => { $('#home-artists').innerHTML = emptyHTML('Could not load', 'Try again in a moment.'); });
+
+        const likedEl = $('#home-liked');
+        const likedTracks = loadStoredTracks(Array.from(state.liked).slice(0, 6));
+        if (likedTracks.length) {
+            likedEl.innerHTML = `<div class="ms-card-grid">${likedTracks.map(t => `
+                <div class="ms-card" data-tid="${esc(t.id)}">
+                    <div class="ms-card-cover-wrap">
+                        ${t.cover ? `<img class="ms-card-cover" src="${esc(t.cover)}" alt="" loading="lazy" referrerpolicy="no-referrer">` : placeholderCover(t.title)}
+                        <button class="ms-card-play" data-play-liked="${esc(t.id)}" aria-label="Play">
+                            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                        </button>
+                    </div>
+                    <div class="ms-card-title">${esc(t.title)}</div>
+                    <div class="ms-card-sub">${esc((t.artists || []).map(a => a.name).join(', ') || t.animeName || '')}</div>
+                </div>
+            `).join('')}</div>`;
+            $$('[data-play-liked]', likedEl).forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    e.preventDefault(); e.stopPropagation();
+                    const t = likedTracks.find(x => x.id === btn.dataset.playLiked);
+                    if (t) play([t], 0);
+                });
+            });
+        } else {
+            likedEl.innerHTML = `<div class="ms-empty" style="padding:36px 12px"><h3>Your library is empty</h3><p>Like songs to see them here.</p></div>`;
+        }
+
+        const yearsEl = $('#home-years');
+        const cy = new Date().getFullYear();
+        const years = [];
+        for (let y = cy; y >= cy - 7; y--) years.push(y);
+        const yearGradients = [
+            ['#7c3aed', '#1e1b4b'], ['#5b21b6', '#0f172a'], ['#4c1d95', '#1e293b'],
+            ['#9d6ef8', '#312e81'], ['#6d28d9', '#0b1023'], ['#7c3aed', '#0f0d1f'],
+            ['#5b21b6', '#1f1430'], ['#4c1d95', '#0a0712'],
+        ];
+        yearsEl.innerHTML = years.map((y, i) => {
+            const [a, b] = yearGradients[i % yearGradients.length];
+            return `<a class="ms-year-card" href="#/year/${y}">
+                <div class="ms-year-cover" style="background:linear-gradient(135deg, ${a} 0%, ${b} 100%);">
+                    <span class="ms-year-num">${y}</span>
+                </div>
+                <div class="ms-card-title">${y}</div>
+                <div class="ms-card-sub">Themes from ${y}</div>
+            </a>`;
+        }).join('');
+    }
+
+    function renderRecent() {
+        view.innerHTML = `<div class="ms-section-title" style="margin-top:14px"><h2>Newest themes</h2></div>
+            <div class="ms-card-grid" id="recent-grid">${loadingHTML()}</div>`;
+        api.recent().then(d => {
+            const items = d.anime || [];
+            $('#recent-grid').innerHTML = items.length
+                ? items.map(animeCardHTML).join('')
+                : emptyHTML('No themes available', '');
+            bindCardClicks($('#recent-grid'));
+        });
+    }
+
+    function renderYear(y) {
+        view.innerHTML = `<div class="ms-section-title" style="margin-top:14px"><h2>Themes from ${esc(y)}</h2></div>
+            <div class="ms-card-grid" id="year-grid">${loadingHTML()}</div>`;
+        api.year(y).then(d => {
+            const items = d.anime || [];
+            $('#year-grid').innerHTML = items.length
+                ? items.map(animeCardHTML).join('')
+                : emptyHTML('Nothing here yet', `No themes catalogued for ${y}.`);
+            bindCardClicks($('#year-grid'));
+        });
+    }
+
+    function renderTopArtists() {
+        view.innerHTML = `<div class="ms-section-title" style="margin-top:14px"><h2>Artists</h2></div>
+            <div class="ms-card-grid" id="artists-grid">${loadingHTML()}</div>`;
+        api.artists().then(d => {
+            const items = d.artists || [];
+            $('#artists-grid').innerHTML = items.length
+                ? items.map(artistCardHTML).join('')
+                : emptyHTML('No artists', '');
+        });
+    }
+
+    function renderLiked() {
+        const tracks = loadStoredTracks(Array.from(state.liked));
+        if (!tracks.length) {
+            view.innerHTML = `<div class="ms-album-hero">
+                <div class="ms-album-cover" style="display:flex;align-items:center;justify-content:center;">
+                    <svg viewBox="0 0 24 24" width="80" height="80" fill="#fff" style="opacity:0.85"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+                </div>
+                <div class="ms-album-info">
+                    <div class="ms-album-eyebrow">Playlist</div>
+                    <h1 class="ms-album-title">Liked Songs</h1>
+                    <div class="ms-album-meta">0 tracks</div>
+                </div>
+            </div>${emptyHTML('No liked songs yet', 'Tap the heart on any track to save it here.')}`;
+            return;
+        }
+        renderTracklist({
+            eyebrow: 'Playlist',
+            title: 'Liked Songs',
+            cover: tracks[0].cover,
+            countLabel: `${tracks.length} track${tracks.length > 1 ? 's' : ''}`,
+            tracks,
+            asPlaylist: true,
+        });
+    }
+
+    function renderHistory() {
+        const tracks = loadStoredTracks(state.history);
+        if (!tracks.length) {
+            view.innerHTML = emptyHTML('Nothing recently played', 'Play some songs to build your history.');
+            return;
+        }
+        renderTracklist({
+            eyebrow: 'History',
+            title: 'Recently Played',
+            cover: tracks[0].cover,
+            countLabel: `${tracks.length} track${tracks.length > 1 ? 's' : ''}`,
+            tracks,
+            asPlaylist: true,
+        });
+    }
+
+    async function renderAnime(id) {
+        view.innerHTML = loadingHTML('Loading album…');
+        try {
+            const data = await api.anime(id);
+            const a = data.anime;
+            if (!a) { view.innerHTML = emptyHTML('Not found', 'This anime has no themes catalogued.'); return; }
+            const tracks = tracksFromAnime(a);
+            renderTracklist({
+                eyebrow: a.media_format || 'Anime',
+                title: a.name,
+                cover: coverUrl(a),
+                countLabel: `${tracks.length} track${tracks.length === 1 ? '' : 's'} · ${a.year || ''}${a.season ? ' · ' + a.season : ''}`,
+                tracks,
+                asPlaylist: false,
+            });
+        } catch (e) {
+            view.innerHTML = emptyHTML('Could not load', 'Please try again.');
+        }
+    }
+
+    async function renderArtist(slug) {
+        view.innerHTML = loadingHTML('Loading artist…');
+        try {
+            const data = await api.artist(slug);
+            const a = data.artist;
+            if (!a) { view.innerHTML = emptyHTML('Artist not found', ''); return; }
+            const tracks = [];
+            for (const song of (a.songs || [])) {
+                for (const theme of (song.animethemes || [])) {
+                    if (!theme.anime) continue;
+                    const merged = { ...theme, song };
+                    const tk = trackFromTheme(theme.anime, merged);
+                    if (tk) tracks.push(tk);
+                }
+            }
+            renderTracklist({
+                eyebrow: 'Artist',
+                title: a.name,
+                cover: artistImageUrl(a),
+                round: true,
+                countLabel: `${tracks.length} track${tracks.length === 1 ? '' : 's'}`,
+                tracks,
+                asPlaylist: true,
+            });
+        } catch (e) {
+            view.innerHTML = emptyHTML('Could not load', 'Please try again.');
+        }
+    }
+
+    function renderTracklist({ eyebrow, title, cover, countLabel, tracks, asPlaylist, round }) {
+        const heroCoverHTML = cover
+            ? `<img src="${esc(cover)}" alt="" referrerpolicy="no-referrer">`
+            : `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:4rem;font-weight:900;">${esc(title.slice(0, 1))}</div>`;
+        view.innerHTML = `
+            <div class="ms-album-hero">
+                <div class="ms-album-cover" ${round ? 'style="border-radius:50%;"' : ''}>${heroCoverHTML}</div>
+                <div class="ms-album-info">
+                    <div class="ms-album-eyebrow">${esc(eyebrow)}</div>
+                    <h1 class="ms-album-title">${esc(title)}</h1>
+                    <div class="ms-album-meta">${esc(countLabel)}</div>
+                </div>
+            </div>
+            <div class="ms-album-actions">
+                <button class="ms-play-big" id="album-play" aria-label="Play all">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                </button>
+                <button class="ms-icon-btn" id="album-shuffle" aria-label="Shuffle">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
+                </button>
+            </div>
+            <div class="ms-tracks">
+                ${tracks.length ? `
+                <div class="ms-tracks-head">
+                    <span style="text-align:center">#</span>
+                    <span>Title</span>
+                    <span class="ms-th-anime">${asPlaylist ? 'Anime' : 'Type'}</span>
+                    <span class="ms-th-tag">${asPlaylist ? 'Type' : 'Episodes'}</span>
+                    <span></span>
+                </div>
+                ${tracks.map((t, i) => trackRowHTML(t, i, asPlaylist)).join('')}
+                ` : emptyHTML('No tracks found', '')}
+            </div>
+        `;
+        const playAll = $('#album-play');
+        if (playAll) playAll.addEventListener('click', () => { if (tracks.length) play(tracks, 0); });
+        const shuf = $('#album-shuffle');
+        if (shuf) shuf.addEventListener('click', () => {
+            if (!tracks.length) return;
+            const shuffled = tracks.slice().sort(() => Math.random() - 0.5);
+            state.shuffle = false;
+            play(shuffled, 0);
+        });
+        bindTrackRows(tracks);
+        updateNowPlayingMarkers();
+    }
+
+    function trackRowHTML(t, i, asPlaylist) {
+        const tagClass = (t.typeKind || '').toUpperCase() === 'ED' ? 'ed' : ((t.typeKind || '').toUpperCase() === 'IN' ? 'in' : '');
+        const artistsText = (t.artists || []).map(a => `<a href="#/artist/${encodeURIComponent(a.slug || a.id)}" data-stop>${esc(a.name)}</a>`).join(', ');
+        const middleCol = asPlaylist
+            ? `<a class="ms-track-anime" href="#/anime/${encodeURIComponent(t.animeId)}" data-stop>${esc(t.animeName)}</a>`
+            : `<span class="ms-track-tag-cell"><span class="ms-track-tag ${tagClass}">${esc(t.type)}</span></span>`;
+        const fourthCol = asPlaylist
+            ? `<span class="ms-track-tag-cell"><span class="ms-track-tag ${tagClass}">${esc(t.type)}</span></span>`
+            : `<span class="ms-track-anime">${esc(t.episodes || '—')}</span>`;
+        return `<div class="ms-track" data-tid="${esc(t.id)}" data-idx="${i}">
+            <div class="ms-track-num">
+                <span class="ms-num">${i + 1}</span>
+                <span class="ms-now-bars"><span></span><span></span><span></span></span>
+                <span class="ms-play-mini"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></span>
+            </div>
+            <div class="ms-track-meta">
+                ${t.cover ? `<img class="ms-track-cover" src="${esc(t.cover)}" alt="" loading="lazy" referrerpolicy="no-referrer">` : '<div class="ms-track-cover"></div>'}
+                <div class="ms-track-text">
+                    <div class="ms-track-title">${esc(t.title)}</div>
+                    <div class="ms-track-sub">${artistsText || esc(t.animeName)}</div>
+                </div>
+            </div>
+            ${middleCol}
+            ${fourthCol}
+            <button class="ms-track-like ${state.liked.has(t.id) ? 'is-liked' : ''}" data-tid="${esc(t.id)}" data-stop aria-label="Like">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+            </button>
+        </div>`;
+    }
+
+    function bindTrackRows(tracks) {
+        $$('.ms-track', view).forEach(row => {
+            row.addEventListener('click', (e) => {
+                if (e.target.closest('[data-stop]')) return;
+                const idx = parseInt(row.dataset.idx, 10);
+                if (!isNaN(idx)) play(tracks, idx);
+            });
+        });
+        $$('.ms-track-like', view).forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.preventDefault(); e.stopPropagation();
+                const id = btn.dataset.tid;
+                const t = tracks.find(x => x.id === id);
+                if (t) toggleLike(t);
+            });
+        });
+    }
+
+    function songRowHTML(track, idx) {
+        const artistsText = (track.artists || []).map(a => `<a href="#/artist/${encodeURIComponent(a.slug || a.id)}" data-stop>${esc(a.name)}</a>`).join(', ');
+        return `<div class="ms-song-row" data-tid="${esc(track.id)}" data-idx="${idx}">
+            <div class="ms-song-cover-wrap">
+                ${track.cover ? `<img class="ms-song-cover" src="${esc(track.cover)}" alt="" loading="lazy" referrerpolicy="no-referrer">` : '<div class="ms-song-cover"></div>'}
+                <span class="ms-song-play"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span>
+            </div>
+            <div class="ms-song-text">
+                <div class="ms-song-title">${esc(track.title)}</div>
+                <div class="ms-song-sub">${artistsText || '<a href="#/anime/' + encodeURIComponent(track.animeId) + '" data-stop>' + esc(track.animeName) + '</a>'}</div>
+            </div>
+            <button class="ms-song-like ${state.liked.has(track.id) ? 'is-liked' : ''}" data-tid="${esc(track.id)}" data-stop aria-label="Like">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+            </button>
+        </div>`;
+    }
+
+    function bindSongRows(scope, tracks) {
+        $$('.ms-song-row', scope).forEach(row => {
+            row.addEventListener('click', (e) => {
+                if (e.target.closest('[data-stop]')) return;
+                const idx = parseInt(row.dataset.idx, 10);
+                if (!isNaN(idx) && tracks[idx]) play(tracks, idx);
+            });
+        });
+        $$('.ms-song-like', scope).forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.preventDefault(); e.stopPropagation();
+                const id = btn.dataset.tid;
+                const t = tracks.find(x => x.id === id);
+                if (t) toggleLike(t);
+            });
+        });
+    }
+
+    async function renderSearch(q) {
+        if (!q) { renderHome(); return; }
+        view.innerHTML = loadingHTML(`Searching "${q}"…`);
+        const filter = (state.searchFilter || 'all');
+        try {
+            const data = await api.search(q);
+            window.__lastSearch = data;
+            const anime = data.anime || [];
+            const themes = data.animethemes || [];
+            const artists = data.artists || [];
+            const songs = data.songs || [];
+
+            const themeTracks = themes
+                .map(th => th.anime ? trackFromTheme(th.anime, th) : null)
+                .filter(Boolean);
+
+            const tabsHTML = `<div class="ms-search-tabs">
+                ${['all','anime','songs','artists'].map(f =>
+                    `<button class="ms-tab ${filter===f?'active':''}" data-filter="${f}">${f[0].toUpperCase()+f.slice(1)}</button>`
+                ).join('')}
+            </div>`;
+
+            const noResults = !anime.length && !artists.length && !songs.length && !themeTracks.length;
+            if (noResults) {
+                view.innerHTML = `${tabsHTML}${emptyHTML(`No results for "${q}"`, 'Try a different anime, song, or artist.')}`;
+                bindSearchTabs(q);
+                return;
+            }
+
+            let topResultHTML = '';
+            const topAnime = anime[0];
+            if (topAnime && (filter === 'all' || filter === 'anime')) {
+                const cover = coverUrl(topAnime);
+                topResultHTML = `<div class="ms-top-result">
+                    <div>
+                        <div class="ms-section-title" style="margin:0 0 14px"><h2>Top result</h2></div>
+                        <a class="ms-top-card" href="#/anime/${encodeURIComponent(topAnime.id)}">
+                            ${cover ? `<img class="ms-top-cover" src="${esc(cover)}" alt="" referrerpolicy="no-referrer">` : `<div class="ms-top-cover" style="background:linear-gradient(135deg,#4c1d95,#1e1b4b)"></div>`}
+                            <div class="ms-top-name">${esc(topAnime.name)}</div>
+                            <span class="ms-top-tag">Anime${topAnime.year ? ' · ' + esc(topAnime.year) : ''}</span>
+                            <button class="ms-top-play" data-play-anime="${esc(topAnime.id)}" aria-label="Play">
+                                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                            </button>
+                        </a>
+                    </div>
+                    ${themeTracks.length ? `<div class="ms-top-songs">
+                        <h3>Songs</h3>
+                        <div class="ms-songlist" id="search-top-songs">
+                            ${themeTracks.slice(0, 4).map((tk, i) => songRowHTML(tk, i)).join('')}
+                        </div>
+                    </div>` : ''}
+                </div>`;
+            }
+
+            const animeBlock = (filter === 'all' || filter === 'anime') && anime.length ? `<div class="ms-search-block">
+                <div class="ms-section-title"><h2>Anime</h2></div>
+                <div class="ms-card-grid">${anime.slice(0, filter === 'anime' ? 24 : 8).map(animeCardHTML).join('')}</div>
+            </div>` : '';
+
+            const artistsBlock = (filter === 'all' || filter === 'artists') && artists.length ? `<div class="ms-search-block">
+                <div class="ms-section-title"><h2>Artists</h2></div>
+                <div class="ms-card-grid">${artists.slice(0, filter === 'artists' ? 24 : 8).map(artistCardHTML).join('')}</div>
+            </div>` : '';
+
+            let songsBlock = '';
+            if ((filter === 'all' || filter === 'songs')) {
+                const songTracksAll = themeTracks.length ? themeTracks : [];
+                if (songTracksAll.length) {
+                    const limit = filter === 'songs' ? songTracksAll.length : 8;
+                    songsBlock = `<div class="ms-search-block">
+                        <div class="ms-section-title"><h2>Songs</h2></div>
+                        <div class="ms-songlist" id="search-songs-list">
+                            ${songTracksAll.slice(0, limit).map((tk, i) => songRowHTML(tk, i)).join('')}
+                        </div>
+                    </div>`;
+                } else if (songs.length) {
+                    songsBlock = `<div class="ms-search-block">
+                        <div class="ms-section-title"><h2>Songs</h2></div>
+                        <div class="ms-card-grid">${songs.slice(0, 8).map(songCardHTML).join('')}</div>
+                    </div>`;
+                }
+            }
+
+            view.innerHTML = `
+                ${tabsHTML}
+                ${topResultHTML}
+                ${animeBlock}
+                ${songsBlock}
+                ${artistsBlock}
+            `;
+
+            bindSearchTabs(q);
+            bindCardClicks(view);
+
+            const topListEl = $('#search-top-songs');
+            if (topListEl) bindSongRows(topListEl, themeTracks.slice(0, 4));
+            const songsListEl = $('#search-songs-list');
+            if (songsListEl) {
+                const limit = filter === 'songs' ? themeTracks.length : 8;
+                bindSongRows(songsListEl, themeTracks.slice(0, limit));
+            }
+            updateNowPlayingMarkers();
+        } catch (e) {
+            console.error('[music] search failed', e);
+            view.innerHTML = emptyHTML('Search failed', 'Please try again.');
+        }
+    }
+
+    function bindSearchTabs(q) {
+        $$('.ms-tab', view).forEach(tab => {
+            tab.addEventListener('click', () => {
+                state.searchFilter = tab.dataset.filter;
+                renderSearch(q);
+            });
+        });
+    }
+
+    function closeSidebarIfMobile() {
+        if (window.innerWidth <= 1024) {
+            $('#music-sidebar').classList.remove('open');
+            $('#ms-sidebar-backdrop').classList.remove('active');
+        }
+    }
+
+    function openYearSidebarLinks() {
+        const yearGrid = $('#ms-year-grid');
+        const cy = new Date().getFullYear();
+        const years = [];
+        for (let y = cy; y >= cy - 9; y--) years.push(y);
+        yearGrid.innerHTML = years.map(y => `<a data-route="#/year/${y}" href="#/year/${y}">${y}</a>`).join('');
+    }
+
+    function init() {
+        audio.volume = state.volume;
+        setVolUI();
+
+        openYearSidebarLinks();
+
+        let searchTimer;
+        const searchInput = $('#ms-search-input');
+        searchInput.addEventListener('input', () => {
+            const q = searchInput.value.trim();
+            $('#ms-search-clear').hidden = !q;
+            clearTimeout(searchTimer);
+            if (!q) {
+                if (location.hash.startsWith('#/search')) navigate('#/');
+                return;
+            }
+            searchTimer = setTimeout(() => {
+                navigate('#/search?q=' + encodeURIComponent(q));
+            }, 320);
+        });
+        searchInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') { searchInput.value = ''; navigate('#/'); }
+        });
+        $('#ms-search-clear').addEventListener('click', () => {
+            searchInput.value = '';
+            $('#ms-search-clear').hidden = true;
+            navigate('#/');
+            searchInput.focus();
+        });
+
+        $('#pb-play').addEventListener('click', togglePlay);
+        $('#pb-play-mobile').addEventListener('click', togglePlay);
+        $('#pb-prev').addEventListener('click', prev);
+        $('#pb-next').addEventListener('click', () => next(false));
+        $('#pb-shuffle').addEventListener('click', () => {
+            state.shuffle = !state.shuffle;
+            $('#pb-shuffle').classList.toggle('is-on', state.shuffle);
+        });
+        $('#pb-loop').addEventListener('click', () => {
+            state.loop = !state.loop;
+            $('#pb-loop').classList.toggle('is-on', state.loop);
+            audio.loop = false;
+        });
+        $('#pb-mute').addEventListener('click', () => {
+            state.muted = !state.muted;
+            audio.muted = state.muted;
+            video.muted = state.muted;
+            setVolUI();
+        });
+        $('#pb-like').addEventListener('click', () => {
+            const t = state.queue[state.index];
+            if (t) toggleLike(t);
+        });
+
+        bindBar($('#pb-seek'), (pct) => {
+            const m = activeMedia();
+            if (m.duration) m.currentTime = pct * m.duration;
+            setSeek(pct * (m.duration || 0));
+        });
+        bindBar($('#pb-vol'), (pct) => {
+            state.volume = pct;
+            state.muted = false;
+            audio.muted = false;
+            video.muted = false;
+            audio.volume = pct;
+            video.volume = pct;
+            persistVol();
+            setVolUI();
+        });
+
+        [audio, video].forEach((m) => {
+            m.addEventListener('play', () => {
+                if (m === activeMedia()) { state.isPlaying = true; setPlayUI(true); }
+                if (m === video) showStageLoading(false);
+            });
+            m.addEventListener('pause', () => {
+                if (m === activeMedia()) { state.isPlaying = false; setPlayUI(false); }
+                if (m === video) showStageLoading(false);
+            });
+            m.addEventListener('ended', () => {
+                if (m !== activeMedia()) return;
+                if (state.loop) { m.currentTime = 0; m.play().catch(() => { }); }
+                else next(true);
+            });
+            m.addEventListener('timeupdate', () => {
+                if (m === activeMedia() && !state.scrubbing) setSeek();
+                if (m === activeMedia() && _syncedLines.length) updateLyricsHighlight(m.currentTime);
+            });
+
+            m.addEventListener('play', () => {
+                if (m !== activeMedia()) return;
+                if (_lyricRaf) cancelAnimationFrame(_lyricRaf);
+                const tick = () => {
+                    if (m !== activeMedia() || m.paused || m.ended) {
+                        _lyricRaf = null;
+                        return;
+                    }
+                    if (_syncedLines.length && document.body.classList.contains('np-lyrics-open')) {
+                        updateLyricsHighlight(m.currentTime);
+                    }
+                    _lyricRaf = requestAnimationFrame(tick);
+                };
+                _lyricRaf = requestAnimationFrame(tick);
+            });
+            m.addEventListener('loadedmetadata', () => {
+                if (m !== activeMedia()) return;
+                setSeek();
+
+                if (_rawSyncedLines.length) {
+                    recomputeSyncedLines();
+                    renderSyncedLyrics(_syncedLines);
+                }
+            });
+            m.addEventListener('durationchange', () => {
+                if (m !== activeMedia() || !_rawSyncedLines.length) return;
+                recomputeSyncedLines();
+                renderSyncedLyrics(_syncedLines);
+            });
+
+            m.addEventListener('seeked', () => {
+                if (m !== activeMedia() || !_syncedLines.length) return;
+                _activeLyricIdx = -2;
+                updateLyricsHighlight(m.currentTime || 0);
+            });
+            m.addEventListener('error', () => {
+                if (m !== activeMedia()) return;
+                if (m === video) showStageLoading(false);
+                const t = state.queue[state.index];
+                if (t) console.warn('[music] failed to play', t.title);
+                setTimeout(() => next(true), 800);
+            });
+        });
+
+        video.addEventListener('waiting',   () => { if (mediaMode === 'video' && !video.paused) showStageLoading(true); });
+        video.addEventListener('loadstart', () => { if (mediaMode === 'video') showStageLoading(true); });
+        video.addEventListener('seeking',   () => { if (mediaMode === 'video') showStageLoading(true); });
+        video.addEventListener('stalled',   () => { if (mediaMode === 'video' && !video.paused) showStageLoading(true); });
+        video.addEventListener('canplay',   () => showStageLoading(false));
+        video.addEventListener('canplaythrough', () => showStageLoading(false));
+        video.addEventListener('playing',   () => showStageLoading(false));
+        video.addEventListener('seeked',    () => showStageLoading(false));
+        video.addEventListener('progress',  () => { if (video.readyState >= 3) showStageLoading(false); });
+
+        $('#pb-expand').addEventListener('click', openNP);
+        $('#np-close').addEventListener('click', closeNP);
+        $('#np-shuffle').addEventListener('click', () => {
+            state.shuffle = !state.shuffle;
+            $('#pb-shuffle').classList.toggle('is-on', state.shuffle);
+            $('#np-shuffle').classList.toggle('is-on', state.shuffle);
+        });
+        $('#np-loop').addEventListener('click', () => {
+            state.loop = !state.loop;
+            $('#pb-loop').classList.toggle('is-on', state.loop);
+            $('#np-loop').classList.toggle('is-on', state.loop);
+        });
+        $('#np-prev').addEventListener('click', prev);
+        $('#np-next').addEventListener('click', () => next(false));
+        $('#np-play').addEventListener('click', togglePlay);
+        $('#np-like').addEventListener('click', () => {
+            const t = state.queue[state.index];
+            if (!t) return;
+            toggleLike(t);
+            const btn = $('#np-like');
+            if (btn) {
+                btn.classList.remove('just-liked');
+
+                void btn.offsetWidth;
+                btn.classList.add('just-liked');
+            }
+        });
+        bindBar($('#np-seek'), (pct) => {
+            const m = activeMedia();
+            if (m.duration) m.currentTime = pct * m.duration;
+            setSeek(pct * (m.duration || 0));
+        });
+        function setPanel(which) {
+
+            $('#np-lyrics').hidden = which !== 'lyrics';
+            $('#np-queue').hidden = which !== 'queue';
+            $('#np-lyrics-btn').classList.toggle('is-on', which === 'lyrics');
+            $('#np-queue-btn').classList.toggle('is-on', which === 'queue');
+
+            document.body.classList.toggle('np-lyrics-open', which === 'lyrics');
+            if (which === 'queue') renderQueue();
+
+            if (which === 'lyrics' && _syncedLines.length) {
+                _activeLyricIdx = -2;
+                requestAnimationFrame(() => {
+                    updateLyricsHighlight(activeMedia().currentTime || 0);
+                });
+            }
+        }
+        $('#np-video-btn').addEventListener('click', () => {
+            const t = state.queue[state.index];
+            if (!t) return;
+            if (!t.videoLink) { toast('No video available for this track'); return; }
+            setPanel(null);
+            setVideoMode(mediaMode !== 'video');
+        });
+        $('#np-lyrics-btn').addEventListener('click', () => {
+            const showing = $('#np-lyrics').hidden;
+            setPanel(showing ? 'lyrics' : null);
+        });
+        $('#np-queue-btn').addEventListener('click', () => {
+            const showing = $('#np-queue').hidden;
+            setPanel(showing ? 'queue' : null);
+        });
+
+        $('#np-lyrics-close')?.addEventListener('click', () => setPanel(null));
+        $('#np-queue-close') ?.addEventListener('click', () => setPanel(null));
+
+        $('#np-bg').addEventListener('click', closeNP);
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && !npModal.hidden) closeNP();
+        });
+
+        $('#pb-title').addEventListener('click', () => {
+            if (playerBar.dataset.empty === '1') return;
+            openNP();
+        });
+
+        $('#pb-dismiss')?.addEventListener('click', () => {
+            try { audio.pause(); video.pause(); } catch (_) {}
+            document.body.classList.add('pb-hidden');
+        });
+
+        $('#ms-back').addEventListener('click', () => {
+            if (state.navStack.length > 1) {
+                const cur = state.navStack.pop();
+                state.navFwd.push(cur);
+                const prev = state.navStack[state.navStack.length - 1];
+                state.navStack.pop();
+                location.hash = prev;
+            }
+        });
+        $('#ms-fwd').addEventListener('click', () => {
+            const fwd = state.navFwd.pop();
+            if (fwd) location.hash = fwd;
+        });
+
+        $('#ms-sidebar-toggle').addEventListener('click', () => {
+            const isDesktop = window.innerWidth > 1024;
+            if (isDesktop) {
+                $('#music-app').classList.toggle('sb-collapsed');
+            } else {
+                $('#music-sidebar').classList.toggle('open');
+                $('#ms-sidebar-backdrop').classList.toggle('active');
+            }
+        });
+        $('#ms-sidebar-backdrop').addEventListener('click', closeSidebarIfMobile);
+
+        const sidebarEl = $('#music-sidebar');
+        if (sidebarEl) {
+            let downTarget = null;
+            let downX = 0, downY = 0;
+            let pointerHandledAt = 0;
+            const TAP_SLOP = 10;
+
+            sidebarEl.addEventListener('pointerdown', (e) => {
+                if (e.pointerType === 'mouse' && e.button !== 0) return;
+                downTarget = e.target.closest('a, .ms-link, [data-route]');
+                downX = e.clientX; downY = e.clientY;
+            });
+
+            const fireTap = (e) => {
+                const link = e.target.closest('a, .ms-link, [data-route]');
+                if (!link || !sidebarEl.contains(link)) return false;
+
+                if (downTarget && downTarget !== link) return false;
+                if (Math.abs(e.clientX - downX) > TAP_SLOP) return false;
+                if (Math.abs(e.clientY - downY) > TAP_SLOP) return false;
+                const route = link.dataset.route || link.getAttribute('href');
+                if (route && route.startsWith('#')) {
+                    navigate(route);
+                } else {
+                    closeSidebarIfMobile();
+                }
+                return true;
+            };
+
+            sidebarEl.addEventListener('pointerup', (e) => {
+                if (e.pointerType === 'mouse' && e.button !== 0) return;
+                if (fireTap(e)) pointerHandledAt = performance.now();
+                downTarget = null;
+            });
+
+            sidebarEl.addEventListener('click', (e) => {
+                const link = e.target.closest('a, .ms-link, [data-route]');
+                if (!link || !sidebarEl.contains(link)) return;
+                e.preventDefault();
+                if (performance.now() - pointerHandledAt < 600) return;
+                const route = link.dataset.route || link.getAttribute('href');
+                if (route && route.startsWith('#')) navigate(route);
+                else closeSidebarIfMobile();
+            });
+
+            sidebarEl.addEventListener('pointercancel', () => { downTarget = null; });
+        }
+
+        document.body.classList.remove('header-hidden');
+        const _hdr = document.getElementById('header');
+        if (_hdr) _hdr.classList.remove('is-hidden');
+        const musicMain = document.querySelector('.music-main');
+        if (musicMain && _hdr) {
+            let lastY = 0;
+            let ticking = false;
+            const SCROLL_THRESHOLD = 8;
+            const apply = () => {
+                ticking = false;
+                if (window.innerWidth > 1024) {
+
+                    _hdr.classList.remove('is-hidden');
+                    document.body.classList.remove('header-hidden');
+                    return;
+                }
+                const y = musicMain.scrollTop;
+                const dy = y - lastY;
+                if (Math.abs(dy) < SCROLL_THRESHOLD) return;
+                if (dy > 0 && y > 40) {
+                    _hdr.classList.add('is-hidden');
+                    document.body.classList.add('header-hidden');
+                } else if (dy < 0) {
+                    _hdr.classList.remove('is-hidden');
+                    document.body.classList.remove('header-hidden');
+                }
+                lastY = y;
+            };
+            musicMain.addEventListener('scroll', () => {
+                if (ticking) return;
+                ticking = true;
+                requestAnimationFrame(apply);
+            }, { passive: true });
+            window.addEventListener('resize', apply);
+        }
+
+        window.addEventListener('hashchange', handleRoute);
+
+        document.addEventListener('keydown', (e) => {
+            if (e.target.matches('input, textarea')) return;
+            if (e.code === 'Space') { e.preventDefault(); togglePlay(); }
+            else if (e.key === 'ArrowRight' && e.shiftKey) next(false);
+            else if (e.key === 'ArrowLeft' && e.shiftKey) prev();
+        });
+
+        handleRoute();
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();

frontend/src/App.jsx

@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+import { Route, Routes, useLocation } from "react-router-dom";
+import Header from "./components/Header.jsx";
+import MobileNav from "./components/MobileNav.jsx";
+import ErrorBoundary from "./components/ErrorBoundary.jsx";
+import Landing from "./pages/Landing.jsx";
+import Home from "./pages/Home.jsx";
+import AuthCallback from "./pages/AuthCallback.jsx";
+import Search from "./pages/Search.jsx";
+import Schedule from "./pages/Schedule.jsx";
+import Anime from "./pages/Anime.jsx";
+import Watch from "./pages/Watch.jsx";
+import Manga from "./pages/Manga.jsx";
+import MangaDetails from "./pages/MangaDetails.jsx";
+import Reader from "./pages/Reader.jsx";
+import Music from "./pages/Music.jsx";
+import Movies from "./pages/Movies.jsx";
+import MovieDetails from "./pages/MovieDetails.jsx";
+import MovieWatch from "./pages/MovieWatch.jsx";
+
+function ScrollToTop() {
+  const { pathname } = useLocation();
+  useEffect(() => {
+    window.scrollTo({ top: 0 });
+  }, [pathname]);
+  return null;
+}
+
+export default function App() {
+  return (
+    <>
+      <ScrollToTop />
+      <Header />
+      <MobileNav />
+      <main className="main-content">
+        <ErrorBoundary>
+        <Routes>
+          <Route path="/" element={<Landing />} />
+          <Route path="/home" element={<Home />} />
+          <Route path="/auth/callback" element={<AuthCallback />} />
+          <Route path="/search" element={<Search />} />
+          <Route path="/browse" element={<Search />} />
+          <Route path="/schedule" element={<Schedule />} />
+          <Route path="/anime/:id" element={<Anime />} />
+          <Route path="/watch/*" element={<Watch />} />
+          <Route path="/manga" element={<Manga />} />
+          <Route path="/manga/read" element={<Reader />} />
+          <Route path="/manga/:source/:id" element={<MangaDetails />} />
+          <Route path="/music" element={<Music />} />
+          <Route path="/movies" element={<Movies />} />
+          <Route path="/movies/:slug" element={<MovieDetails />} />
+          <Route path="/movies/:slug/watch" element={<MovieWatch />} />
+          <Route path="*" element={<Landing />} />
+        </Routes>
+        </ErrorBoundary>
+      </main>
+    </>
+  );
+}

frontend/src/api.js

@@ -0,0 +1,115 @@
+const API_URL = (import.meta.env.VITE_API_URL || "/api").replace(/\/$/, "");
+const STREAM_PROXY = (import.meta.env.VITE_STREAM_PROXY_URL || "/hls").replace(/\/$/, "");
+export const STREAM_KEY = import.meta.env.VITE_STREAM_KEY || "";
+import { getToken } from "./utils/auth.js";
+
+async function req(path, options = {}) {
+  const res = await fetch(`${API_URL}${path}`, {
+    headers: { Accept: "application/json", ...(options.headers || {}) },
+    ...options,
+  });
+  if (!res.ok) {
+    let detail = `HTTP ${res.status}`;
+    try {
+      const body = await res.json();
+      detail = body.detail?.error || body.detail?.hint || body.detail || detail;
+      // FastAPI validation errors are an array of { msg } objects — flatten them.
+      if (Array.isArray(detail)) detail = detail.map((d) => d.msg).join("; ");
+    } catch {
+      /* ignore */
+    }
+    const err = new Error(detail);
+    err.status = res.status; // lets pages distinguish 404 from server errors
+    throw err;
+  }
+  return res.json();
+}
+
+export const api = {
+  // catalog
+  search: (q, page = 1, mal = false) =>
+    req(`/anime/search?q=${encodeURIComponent(q)}&page=${page}&mal=${mal ? 1 : 0}`),
+  trending: (page = 1) => req(`/anime/trending?page=${page}`),
+  popular: (page = 1) => req(`/anime/popular?page=${page}`),
+  upcoming: (page = 1) => req(`/anime/upcoming?page=${page}`),
+  recent: (page = 1) => req(`/anime/recent?page=${page}`),
+  schedule: (page = 1) => req(`/anime/schedule?page=${page}`),
+  details: (id) => req(`/anime/${id}`),
+  mal: (id) => req(`/anime/${id}/mal`),
+  // streaming
+  episodes: (id) => req(`/anime/${id}/episodes`),
+  watch: (episodeId) => req(`/watch/${episodeId}`),
+  // manga (backed by the MangaVault sidecar)
+  mangaHome: () => req(`/manga/home`),
+  mangaSearch: (q) => req(`/manga/search?q=${encodeURIComponent(q)}`),
+  mangaDetails: (source, id) => req(`/manga/${source}/${encodeURIComponent(id)}/details`),
+  mangaChapterImages: (path) => req(`/manga/chapter-images?path=${encodeURIComponent(path)}`),
+  mangaImg: (url, src) => `${API_URL}/manga/img?url=${encodeURIComponent(url)}&src=${src}`,
+  // auth — local accounts + AniList OAuth
+  authRegister: (username, email, password) =>
+    req("/auth/register", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username, email, password }),
+    }),
+  authLogin: (identifier, password) =>
+    req("/auth/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ identifier, password }),
+    }),
+  authMe: () => req("/auth/me", { headers: { Authorization: `Bearer ${getToken()}` } }),
+  authLogout: () =>
+    req("/auth/logout", {
+      method: "POST",
+      headers: { Authorization: `Bearer ${getToken()}` },
+    }),
+  // movies & tv (backed by the Moviebox-API sidecar)
+  movieHome: () => req(`/movies/home`),
+  movieCatalog: (type = "movie", page = 1, sort = "RECOMMEND") =>
+    req(`/movies/catalog?type=${type}&page=${page}&sort=${sort}`),
+  movieSearch: (q, page = 1) =>
+    req(`/movies/search?q=${encodeURIComponent(q)}&page=${page}`),
+  movieSuggest: (q) => req(`/movies/suggest?q=${encodeURIComponent(q)}`),
+  movieDetails: (slug) => req(`/movies/${encodeURIComponent(slug)}`),
+  movieStream: (slug, se = 0, ep = 0) =>
+    req(`/movies/${encodeURIComponent(slug)}/stream?se=${se}&ep=${ep}`),
+  // images
+  img: (url) => (url ? `${API_URL}/img?url=${encodeURIComponent(url)}` : ""),
+};
+
+/** Wrap an upstream m3u8/segment URL so it flows through the HLS proxy worker.
+ * `ref` (optional) sets the Referer/Origin the worker sends upstream. */
+export function proxiedStreamUrl(url, ref) {
+  let out = `${STREAM_PROXY}?url=${encodeURIComponent(url)}`;
+  if (ref) out += `&ref=${encodeURIComponent(ref)}`;
+  return out;
+}
+
+export function streamHeaders() {
+  return STREAM_KEY ? { "x-stream-key": STREAM_KEY } : {};
+}
+
+/** Parse "watch/<provider>/<anilistId>/<category>/<ref>" → parts. */
+export function parseEpisodeId(episodeId) {
+  const parts = (episodeId || "").split("/");
+  if (parts.length >= 4 && parts[0] === "watch") {
+    return {
+      provider: parts[1],
+      anilistId: Number(parts[2]),
+      category: parts[3],
+      ref: parts.slice(4).join("/"),
+    };
+  }
+  return null;
+}
+
+/** Pick the best title from a media object. */
+export function titleOf(media) {
+  return (
+    media?.title?.english ||
+    media?.title?.romaji ||
+    media?.title?.native ||
+    "Untitled"
+  );
+}

frontend/src/components/Ambient.jsx

@@ -0,0 +1,159 @@
+import { useEffect } from "react";
+
+const INTERACTIVES = 'a, button, .card, .nav-item, .try-btn, .copy-btn, label, [role="button"]';
+const TILT_SELECTOR = ".card, .info-cell";
+
+export default function Ambient() {
+  useEffect(() => {
+    /* ── custom cursor (dot + ring, lerped) ─────────────────────── */
+    const dot = document.querySelector(".cursor-dot");
+    const ring = document.querySelector(".cursor-ring");
+    let cursorCleanup = () => {};
+
+    if (dot && ring) {
+      let mx = -200, my = -200;
+      let rx = -200, ry = -200;
+      let visible = false;
+      let rafId = 0;
+      const LERP = 0.22;
+
+      const tick = () => {
+        rx += (mx - rx) * LERP;
+        ry += (my - ry) * LERP;
+        dot.style.transform = `translate(${mx}px,${my}px)`;
+        ring.style.transform = `translate(${Math.round(rx * 10) / 10}px,${Math.round(ry * 10) / 10}px)`;
+        rafId = requestAnimationFrame(tick);
+      };
+      rafId = requestAnimationFrame(tick);
+
+      const onMove = (e) => {
+        mx = e.clientX;
+        my = e.clientY;
+        if (!visible) {
+          visible = true;
+          dot.classList.remove("is-hidden");
+          ring.classList.remove("is-hidden");
+          rx = mx; ry = my;
+        }
+      };
+      const onLeave = () => {
+        dot.classList.add("is-hidden");
+        ring.classList.add("is-hidden");
+        visible = false;
+      };
+      const onEnter = () => {
+        dot.classList.remove("is-hidden");
+        ring.classList.remove("is-hidden");
+        visible = true;
+      };
+      const onDown = () => {
+        ring.classList.add("is-clicking");
+        ring.classList.remove("is-hovering");
+      };
+      const onUp = () => ring.classList.remove("is-clicking");
+      const onOver = (e) => {
+        if (e.target.closest(INTERACTIVES)) {
+          dot.classList.add("is-hovering");
+          ring.classList.add("is-hovering");
+        }
+      };
+      const onOut = (e) => {
+        if (e.target.closest(INTERACTIVES)) {
+          dot.classList.remove("is-hovering");
+          ring.classList.remove("is-hovering");
+        }
+      };
+      const onTouch = () => {
+        dot.style.display = "none";
+        ring.style.display = "none";
+        document.body.style.cursor = "";
+      };
+
+      document.addEventListener("mousemove", onMove, { passive: true });
+      document.addEventListener("mouseleave", onLeave, { passive: true });
+      document.addEventListener("mouseenter", onEnter, { passive: true });
+      document.addEventListener("mousedown", onDown, { passive: true });
+      document.addEventListener("mouseup", onUp, { passive: true });
+      document.addEventListener("mouseover", onOver, { passive: true });
+      document.addEventListener("mouseout", onOut, { passive: true });
+      window.addEventListener("touchstart", onTouch, { once: true, passive: true });
+
+      cursorCleanup = () => {
+        cancelAnimationFrame(rafId);
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseleave", onLeave);
+        document.removeEventListener("mouseenter", onEnter);
+        document.removeEventListener("mousedown", onDown);
+        document.removeEventListener("mouseup", onUp);
+        document.removeEventListener("mouseover", onOver);
+        document.removeEventListener("mouseout", onOut);
+        window.removeEventListener("touchstart", onTouch);
+      };
+    }
+
+    /* ── reveal-on-scroll ───────────────────────────────────────── */
+    const revealObs = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            e.target.classList.add("visible");
+            revealObs.unobserve(e.target);
+          }
+        });
+      },
+      { threshold: 0.07, rootMargin: "0px 0px -40px 0px" }
+    );
+    const observeNew = () => {
+      document.querySelectorAll(".section-reveal:not(.observed)").forEach((el) => {
+        el.classList.add("observed");
+        revealObs.observe(el);
+      });
+    };
+    observeNew();
+    const mo = new MutationObserver(observeNew);
+    mo.observe(document.body, { childList: true, subtree: true });
+
+    /* ── 3D tilt delegation (dynamic-friendly) ──────────────────── */
+    let tiltRaf = null;
+    const onTilt = (e) => {
+      const el = e.target.closest(TILT_SELECTOR);
+      if (!el) return;
+      if (tiltRaf) return;
+      tiltRaf = requestAnimationFrame(() => {
+        const r = el.getBoundingClientRect();
+        const x = (e.clientX - r.left) / r.width - 0.5;
+        const y = (e.clientY - r.top) / r.height - 0.5;
+        const maxDeg = el.classList.contains("info-cell") ? 5 : 6;
+        el.style.setProperty("--rx", `${(-y * maxDeg).toFixed(2)}deg`);
+        el.style.setProperty("--ry", `${(x * maxDeg).toFixed(2)}deg`);
+        tiltRaf = null;
+      });
+    };
+    const onTiltOut = (e) => {
+      const el = e.target.closest(TILT_SELECTOR);
+      if (!el) return;
+      // mouseout bubbles — ignore moves that stay inside the element
+      // (e.g. poster img → title), only reset when actually leaving it.
+      if (e.relatedTarget && el.contains(e.relatedTarget)) return;
+      el.style.setProperty("--rx", "0deg");
+      el.style.setProperty("--ry", "0deg");
+    };
+    document.addEventListener("mousemove", onTilt, { passive: true });
+    document.addEventListener("mouseout", onTiltOut, { passive: true });
+
+    return () => {
+      cursorCleanup();
+      revealObs.disconnect();
+      mo.disconnect();
+      document.removeEventListener("mousemove", onTilt);
+      document.removeEventListener("mouseout", onTiltOut);
+    };
+  }, []);
+
+  return (
+    <>
+      <div className="cursor-dot" aria-hidden="true" />
+      <div className="cursor-ring" aria-hidden="true" />
+    </>
+  );
+}

frontend/src/components/AnimeCard.jsx

@@ -0,0 +1,55 @@
+import { useNavigate } from "react-router-dom";
+import { api, titleOf } from "../api.js";
+
+export default function AnimeCard({ item, rank, isEpisode }) {
+  const navigate = useNavigate();
+
+  if (!item) return null;
+
+  const title = titleOf(item);
+  const poster = item.coverImage || item.image || item.poster;
+  const score = item.score ? (item.score > 10 ? (item.score / 10).toFixed(1) : item.score) : null;
+  const targetUrl = isEpisode ? `/watch/${item.id}` : `/anime/${item.id}`;
+
+  return (
+    <div className="anime-card" onClick={() => navigate(targetUrl)}>
+      <div className="card-poster">
+        {poster ? (
+          <img src={api.img(poster)} alt={title} loading="lazy" />
+        ) : (
+          <div className="skeleton" style={{ width: "100%", height: "100%" }} />
+        )}
+        <div className="card-overlay" />
+        {rank ? <div className="card-rank">{rank}</div> : null}
+        {item.episodes ? (
+          <div className="card-ep-badge">EP {item.episodes}</div>
+        ) : item.type ? (
+          <div className="card-type-badge">{item.type}</div>
+        ) : null}
+        <div className="card-quick">
+          <div className="card-quick-btn">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+              <polygon points="5 3 19 12 5 21 5 3" />
+            </svg>
+            Watch Now
+          </div>
+        </div>
+      </div>
+      <div className="card-body">
+        <div className="card-title" title={title}>{title}</div>
+        <div className="card-meta">
+          {score ? (
+            <span className="card-score">
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+              </svg>
+              {score}
+            </span>
+          ) : null}
+          {item.format ? <span className="card-meta-item">• {item.format}</span> : null}
+          {item.seasonYear ? <span className="card-meta-item">• {item.seasonYear}</span> : null}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/AnimeRow.jsx

@@ -0,0 +1,44 @@
+import { useRef } from "react";
+import AnimeCard from "./AnimeCard.jsx";
+
+export default function AnimeRow({ title, items = [], isRanked = false, viewAllUrl = null }) {
+  const rowRef = useRef(null);
+
+  function scroll(dir) {
+    if (!rowRef.current) return;
+    const scrollAmount = dir === "left" ? -600 : 600;
+    rowRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
+  }
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <section className="content-section">
+      <div className="container">
+        <div className="section-header">
+          <div className="section-title">{title}</div>
+          {viewAllUrl ? (
+            <a href={viewAllUrl} className="section-link">View All</a>
+          ) : null}
+        </div>
+        <div className="genre-nav-wrap" style={{ position: "relative" }}>
+          <button className="row-nav-btn prev" onClick={() => scroll("left")} aria-label="Scroll left">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M15 18l-6-6 6-6" />
+            </svg>
+          </button>
+          <div className="scroll-row" ref={rowRef}>
+            {items.map((item, index) => (
+              <AnimeCard key={item.id || index} item={item} rank={isRanked ? index + 1 : null} />
+            ))}
+          </div>
+          <button className="row-nav-btn next" onClick={() => scroll("right")} aria-label="Scroll right">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M9 18l6-6-6-6" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}

frontend/src/components/AuthModal.jsx

@@ -0,0 +1,206 @@
+import { useEffect, useState } from "react";
+import { api } from "../api.js";
+import { setSession } from "../utils/auth.js";
+
+const SQLI_RE = /(\b(select|insert|update|delete|drop|union|exec|cast|convert|declare|xp_|char|nchar|varchar|alter|create|truncate|sleep|benchmark|waitfor|information_schema)\b|--|;|\/\*|\*\/|0x[0-9a-fA-F]+|\bor\b\s+.{0,30}[=<>]|\band\b\s+.{0,30}[=<>])/i;
+function hasSQLI(val) { return SQLI_RE.test(val); }
+
+function getPasswordStrength(pw) {
+  const score = [/.{8,}/, /[A-Z]/, /[a-z]/, /[0-9]/, /[^A-Za-z0-9]/].filter(r => r.test(pw)).length;
+  const widths = ['0%', '25%', '45%', '70%', '100%'];
+  const colors = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#7c3aed'];
+  return { width: widths[score] || '0%', color: colors[score - 1] || '#334155' };
+}
+
+export default function AuthModal({ open, onClose, onAuthed }) {
+  const [mode, setMode] = useState("login"); // "login" | "register"
+  const [identifier, setIdentifier] = useState("");
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [pwStrength, setPwStrength] = useState({ width: '0%', color: '#334155' });
+
+  // Reset state + close on Escape.
+  useEffect(() => {
+    if (!open) return;
+    setError("");
+    setBusy(false);
+    setPassword("");
+    const onKey = (e) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError("");
+    if (mode === "login") {
+      if (!identifier.trim() || !password) {
+        setError("Enter your username/email and password.");
+        return;
+      }
+      if (hasSQLI(identifier) || hasSQLI(password)) {
+        setError("Invalid input detected.");
+        return;
+      }
+    } else {
+      if (username.trim().length < 3) {
+        setError("Username must be at least 3 characters.");
+        return;
+      }
+      if (username.trim().length > 15) {
+        setError("Username must be 15 characters or less.");
+        return;
+      }
+      if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim())) {
+        setError("Enter a valid email address.");
+        return;
+      }
+      if (email.trim().length > 20) {
+        setError("Email must be 20 characters or less.");
+        return;
+      }
+      if (password.length < 6) {
+        setError("Password must be at least 6 characters.");
+        return;
+      }
+      if (hasSQLI(username) || hasSQLI(email) || hasSQLI(password)) {
+        setError("Invalid input detected.");
+        return;
+      }
+    }
+    setBusy(true);
+    try {
+      const res =
+        mode === "login"
+          ? await api.authLogin(identifier.trim(), password)
+          : await api.authRegister(username.trim(), email.trim(), password);
+      setSession(res.token, res.user);
+      onAuthed?.(res.user);
+      onClose();
+    } catch (err) {
+      setError(err.message || "Something went wrong. Try again.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="auth-overlay" onClick={onClose}>
+      <div className="auth-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
+        <button className="auth-modal-close" onClick={onClose} aria-label="Close">
+          ✕
+        </button>
+
+        <div className="auth-modal-logo"><span className="auth-modal-logo-text">ANICOVE</span></div>
+
+        <div className="auth-tabs">
+          <button
+            className={`auth-tab${mode === "login" ? " active" : ""}`}
+            onClick={() => { setMode("login"); setError(""); }}
+          >
+            Sign in
+          </button>
+          <button
+            className={`auth-tab${mode === "register" ? " active" : ""}`}
+            onClick={() => { setMode("register"); setError(""); }}
+          >
+            Create account
+          </button>
+        </div>
+
+        <form className="auth-form" onSubmit={handleSubmit}>
+          {mode === "login" ? (
+            <label className="auth-field">
+              <span>Username or email</span>
+              <input
+                type="text"
+                value={identifier}
+                onChange={(e) => setIdentifier(e.target.value)}
+                placeholder="username@example.com"
+                autoComplete="username"
+                autoFocus
+              />
+            </label>
+          ) : (
+            <>
+              <label className="auth-field">
+                <span>Username</span>
+                <input
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="Your username"
+                  autoComplete="username"
+                  autoFocus
+                />
+              </label>
+              <label className="auth-field">
+                <span>Email</span>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="you@example.com"
+                  autoComplete="email"
+                />
+              </label>
+            </>
+          )}
+
+          <label className="auth-field">
+            <span>Password {mode === "register" && <span style={{color:'#475569',fontWeight:400,textTransform:'none',letterSpacing:0}}>(min 6 characters)</span>}</span>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+                if (mode === "register") setPwStrength(getPasswordStrength(e.target.value));
+              }}
+              placeholder="••••••••"
+              autoComplete={mode === "login" ? "current-password" : "new-password"}
+              maxLength={18}
+            />
+            {mode === "register" && (
+              <div className="auth-pw-bar"><div className="auth-pw-fill" style={{width: pwStrength.width, background: pwStrength.color}}></div></div>
+            )}
+          </label>
+
+          {error ? <div className="auth-error show">{error}</div> : null}
+
+          <button type="submit" className="btn btn-primary auth-submit" disabled={busy}>
+            <span className="auth-submit-text">{busy ? "Please wait…" : mode === "login" ? "Sign in" : "Create account"}</span>
+            <span className="auth-submit-spinner"></span>
+          </button>
+        </form>
+
+        <div className="auth-divider"><span>OR</span></div>
+
+        <button
+          className="auth-anilist-btn"
+          onClick={() => { window.location.href = "/api/auth/anilist/login"; }}
+          title="Sign in with your AniList account"
+        >
+          <img src="https://anilist.co/img/icons/icon.svg" style={{width:20,height:20}} alt="AniList" />
+          <span>Continue with AniList</span>
+        </button>
+
+        {mode === "login" ? (
+          <p className="auth-switch">No account? <a onClick={() => { setMode("register"); setError(""); }}>Create one</a></p>
+        ) : (
+          <p className="auth-switch">Already have an account? <a onClick={() => { setMode("login"); setError(""); }}>Sign in</a></p>
+        )}
+
+        <div className="auth-recaptcha-terms">
+          This site is protected by reCAPTCHA and the Google
+          <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> and
+          <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a> apply.
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ContinueWatching.jsx

@@ -0,0 +1,123 @@
+import { useEffect, useRef, useState } from "react";
+import { Link } from "react-router-dom";
+import { api } from "../api.js";
+import { getContinueWatching, removeProgress } from "../utils/watchProgress.js";
+
+function timeAgo(ts) {
+  if (!ts) return "";
+  const s = Math.max(1, Math.floor((Date.now() - ts) / 1000));
+  if (s < 60) return "just now";
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.floor(h / 24);
+  if (d < 30) return `${d}d ago`;
+  return new Date(ts).toLocaleDateString();
+}
+
+function timeLeft(position, duration) {
+  const left = Math.max(0, (duration || 0) - (position || 0));
+  const m = Math.floor(left / 60);
+  const s = Math.floor(left % 60);
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+export default function ContinueWatching() {
+  const [items, setItems] = useState([]);
+  const rowRef = useRef(null);
+
+  function refresh() {
+    setItems(getContinueWatching());
+  }
+
+  useEffect(() => {
+    refresh();
+    window.addEventListener("storage", refresh);
+    return () => window.removeEventListener("storage", refresh);
+  }, []);
+
+  function handleRemove(key, e) {
+    e.preventDefault();
+    e.stopPropagation();
+    removeProgress(key);
+    refresh();
+  }
+
+  function scroll(dir) {
+    if (!rowRef.current) return;
+    rowRef.current.scrollBy({ left: dir === "left" ? -600 : 600, behavior: "smooth" });
+  }
+
+  if (items.length === 0) return null;
+
+  return (
+    <section className="content-section">
+      <div className="container">
+        <div className="section-header">
+          <div className="section-title">Continue Watching</div>
+          <span className="cw-subtitle">
+            {items.length} {items.length === 1 ? "title" : "titles"} in progress
+          </span>
+        </div>
+        <div className="genre-nav-wrap">
+          <button className="row-nav-btn prev" onClick={() => scroll("left")} aria-label="Scroll left">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M15 18l-6-6 6-6" />
+            </svg>
+          </button>
+          <div className="scroll-row cw-row" ref={rowRef}>
+            {items.map((item) => {
+              const pct = item.duration ? Math.min(100, (item.position / item.duration) * 100) : 0;
+              return (
+                <Link key={item.key} to={item.href} className="cw-card" title={item.title}>
+                  <div className="cw-poster">
+                    {item.image ? (
+                      <img src={api.img(item.image)} alt={item.title} loading="lazy" />
+                    ) : (
+                      <div className="skeleton" style={{ width: "100%", height: "100%" }} />
+                    )}
+                    <span className="cw-badge">{item.label}</span>
+                    <div className="cw-overlay">
+                      <svg viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M8 5v14l11-7z" />
+                      </svg>
+                      <span>Resume</span>
+                    </div>
+                    <div className="cw-progress">
+                      <div className="cw-progress-fill" style={{ width: `${pct}%` }} />
+                    </div>
+                    <button
+                      className="cw-remove"
+                      onClick={(e) => handleRemove(item.key, e)}
+                      aria-label="Remove from Continue Watching"
+                      title="Remove"
+                    >
+                      ×
+                    </button>
+                  </div>
+                  <div className="cw-body">
+                    <h3>{item.title}</h3>
+                    <div className="cw-meta">
+                      <span className="cw-meta-left">
+                        {item.category ? item.category.toUpperCase() : null}
+                        {item.category ? " · " : ""}
+                        {timeAgo(item.updatedAt)}
+                      </span>
+                      <span className="cw-left">⏱ {timeLeft(item.position, item.duration)} left</span>
+                    </div>
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+          <button className="row-nav-btn next" onClick={() => scroll("right")} aria-label="Scroll right">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M9 18l6-6-6-6" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}

frontend/src/components/ErrorBoundary.jsx

@@ -0,0 +1,51 @@
+import { Component } from "react";
+
+/**
+ * Catches render/effect errors so a single crashing component (e.g. the
+ * player) can never unmount the whole app and leave a black screen.
+ */
+export default class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+
+  componentDidCatch(error, info) {
+    console.error("[ErrorBoundary]", error, info);
+  }
+
+  render() {
+    if (this.state.error) {
+      const message = String(
+        this.state.error?.message || this.state.error || "Unknown error"
+      ).slice(0, 240);
+      return (
+        <div
+          className="player-error"
+          style={{
+            position: "static",
+            minHeight: 220,
+            margin: "24px auto",
+            maxWidth: 560,
+          }}
+        >
+          <div className="big">⚠️</div>
+          <p>Something went wrong rendering this page.</p>
+          {message ? <p style={{ fontSize: "0.8rem", opacity: 0.7 }}>{message}</p> : null}
+          <button
+            className="btn btn-primary btn-sm"
+            style={{ marginTop: 14 }}
+            onClick={() => this.setState({ error: null })}
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

frontend/src/components/Header.jsx

@@ -0,0 +1,196 @@
+import { useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { api } from "../api.js";
+import { clearSession, getToken, getUser, setSession } from "../utils/auth.js";
+import AuthModal from "./AuthModal.jsx";
+
+const NAV = [
+  { to: "/home", label: "Home" },
+  { to: "/browse", label: "Browse" },
+  { to: "/schedule", label: "Schedule" },
+  { to: "/movies", label: "Movies & TV" },
+  { to: "/manga", label: "Manga" },
+  { to: "/music", label: "Music" },
+];
+
+export default function Header() {
+  const [scrolled, setScrolled] = useState(false);
+  const [q, setQ] = useState("");
+  const [user, setUser] = useState(() => getUser());
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fn = () => setScrolled(window.scrollY > 8);
+    window.addEventListener("scroll", fn, { passive: true });
+    return () => window.removeEventListener("scroll", fn);
+  }, []);
+
+  // Hydrate a stored token into the full user profile on load.
+  useEffect(() => {
+    if (getToken() && !getUser()) {
+      api
+        .authMe()
+        .then((u) => setSession(getToken(), u))
+        .then(() => setUser(getUser()))
+        .catch(() => clearSession());
+    }
+  }, []);
+
+  // Close the dropdown when clicking outside / navigating.
+  useEffect(() => setMenuOpen(false), [location.pathname]);
+  useEffect(() => {
+    if (!menuOpen) return;
+    const close = (e) => {
+      if (!e.target.closest?.(".auth-nav")) setMenuOpen(false);
+    };
+    document.addEventListener("click", close);
+    return () => document.removeEventListener("click", close);
+  }, [menuOpen]);
+
+  useEffect(() => {
+    const openAuth = () => {
+      setMenuOpen(false);
+      setModalOpen(true);
+    };
+    window.addEventListener("open-auth-modal", openAuth);
+    return () => window.removeEventListener("open-auth-modal", openAuth);
+  }, []);
+
+  function handleSearch(e) {
+    e.preventDefault();
+    if (q.trim()) navigate(`/search?q=${encodeURIComponent(q.trim())}`);
+  }
+
+  async function handleLogout() {
+    try {
+      await api.authLogout();
+    } catch {
+      /* token already invalid — clear locally anyway */
+    }
+    clearSession();
+    setUser(null);
+    setMenuOpen(false);
+  }
+
+  return (
+    <header id="header" className={scrolled ? "scrolled" : ""}>
+      <div className="container">
+        <Link to="/home" className="logo">
+          <div className="logo-wordmark">
+            {"ANICOVE".split("").map((ch, i) => (
+              <span key={i} className="l">{ch}</span>
+            ))}
+          </div>
+        </Link>
+
+        <nav id="main-nav">
+          {NAV.map(({ to, label }) => (
+            <Link
+              key={to}
+              to={to}
+              className={location.pathname === to ? "active" : ""}
+            >
+              {label}
+            </Link>
+          ))}
+        </nav>
+
+        <div className="search-wrap">
+          <span className="search-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+          </span>
+          <form onSubmit={handleSearch}>
+            <input
+              id="header-search"
+              type="text"
+              value={q}
+              onChange={e => setQ(e.target.value)}
+              className="search-input"
+              placeholder="Search anime..."
+              autoComplete="off"
+            />
+          </form>
+        </div>
+
+        <div className="auth-nav">
+          <button
+            className={`auth-avatar-btn${user ? "" : " guest"}${menuOpen ? " open" : ""}`}
+            onClick={() => setMenuOpen((v) => !v)}
+            aria-label={user ? `${user.username} menu` : "Account menu"}
+            aria-expanded={menuOpen}
+          >
+            {user?.avatar ? (
+              <img className="auth-avatar-circle auth-avatar-img" src={user.avatar} alt="" />
+            ) : (
+              <div className="auth-avatar-circle auth-avatar-icon">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                  <circle cx="12" cy="7" r="4" />
+                </svg>
+              </div>
+            )}
+            <span>{user ? user.username : "Guest"}</span>
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M6 9l6 6 6-6" />
+            </svg>
+          </button>
+
+          {menuOpen ? (
+            <div className="auth-dropdown">
+              {user ? (
+                <>
+                  <div className="auth-dropdown-head">
+                    <div className="auth-dropdown-name">{user.username}</div>
+                    <div className="auth-dropdown-sub">{user.email || user.provider}</div>
+                  </div>
+                  <button
+                    className="auth-dropdown-item"
+                    onClick={() => { setMenuOpen(false); navigate("/home"); }}
+                  >
+                    Home
+                  </button>
+                  <button className="auth-dropdown-item danger" onClick={handleLogout}>
+                    Sign out
+                  </button>
+                </>
+              ) : (
+                <>
+                  <button
+                    className="auth-dropdown-item"
+                    onClick={() => { setMenuOpen(false); setModalOpen(true); }}
+                  >
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                      <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
+                      <path d="M10 17l5-5-5-5M15 12H3" />
+                    </svg>
+                    Sign in
+                  </button>
+                  <button
+                    className="auth-dropdown-item"
+                    onClick={() => { window.location.href = "/api/auth/anilist/login"; }}
+                  >
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M2 3h20v18H2V3zm5.5 5.5h-1.2v7h1.2v-7zm2.6 0h1.2l2.1 5.1 2.1-5.1h1.2v7h-1.15v-4.6L12 15.6l-1.75-4.25v4.15H9.1v-7z" />
+                    </svg>
+                    Sign in with AniList
+                  </button>
+                </>
+              )}
+            </div>
+          ) : null}
+        </div>
+        <AuthModal
+          open={modalOpen}
+          onClose={() => setModalOpen(false)}
+          onAuthed={(u) => setUser(u)}
+        />
+      </div>
+    </header>
+  );
+}

frontend/src/components/HeroCarousel.jsx

@@ -0,0 +1,98 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Link } from "react-router-dom";
+import { api, titleOf } from "../api.js";
+
+export default function HeroCarousel({ items = [] }) {
+  const [index, setIndex] = useState(0);
+  const timer = useRef(null);
+
+  const count = items.length;
+  const go = useCallback(
+    (i) => setIndex(((i % count) + count) % count),
+    [count]
+  );
+
+  useEffect(() => {
+    if (count <= 1) return undefined;
+    timer.current = setInterval(() => setIndex((i) => (i + 1) % count), 6000);
+    return () => clearInterval(timer.current);
+  }, [count]);
+
+  if (!count) return null;
+  const media = items[index];
+  const title = titleOf(media);
+  const native = media.title?.native;
+  const genres = (media.genres || []).slice(0, 3);
+  const banner = media.bannerImage || media.coverImage;
+  const epRef = media.id;
+
+  return (
+    <div className="hero">
+      {banner ? (
+        <div
+          className="hero-bg"
+          style={{ backgroundImage: `url(${api.img(banner)})` }}
+        />
+      ) : null}
+      <div className="hero-scrim" />
+      <button
+        className="hero-nav prev"
+        aria-label="Previous"
+        onClick={() => go(index - 1)}
+      >
+        ‹
+      </button>
+      <button
+        className="hero-nav next"
+        aria-label="Next"
+        onClick={() => go(index + 1)}
+      >
+        ›
+      </button>
+      <div className="hero-content">
+        <div className="hero-kicker">Trending now</div>
+        <h1>{title}</h1>
+        {native && native !== title ? <div className="detail-native">{native}</div> : null}
+        <div className="hero-meta">
+          {media.score ? <span className="chip score">★ {media.score}%</span> : null}
+          {media.format ? <span className="chip">{media.format}</span> : null}
+          {media.seasonYear ? <span className="chip dim">{media.seasonYear}</span> : null}
+          {media.episodes ? <span className="chip dim">{media.episodes} eps</span> : null}
+        </div>
+        {media.synopsis ? <p className="hero-desc">{media.synopsis}</p> : null}
+        <div className="hero-actions">
+          <Link to={`/anime/${epRef}`} className="btn btn-primary">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M8 5v14l11-7z" />
+            </svg>
+            Watch
+          </Link>
+          <Link to={`/anime/${epRef}`} className="btn btn-ghost">
+            Details
+          </Link>
+        </div>
+        {genres.length ? (
+          <div className="genre-pills">
+            {genres.map((g) => (
+              <Link key={g} to={`/search?q=${encodeURIComponent(g)}`}>
+                {g}
+              </Link>
+            ))}
+          </div>
+        ) : null}
+      </div>
+      {count > 1 ? (
+        <div className="hero-dots">
+          {items.map((_, i) => (
+            <button
+              key={i}
+              className={i === index ? "active" : ""}
+              aria-label={`Slide ${i + 1}`}
+              onClick={() => setIndex(i)}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

frontend/src/components/HeroSection.jsx

@@ -0,0 +1,148 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const POPULAR_SEARCHES = ["One Piece", "Solo Leveling", "Demon Slayer", "Jujutsu Kaisen", "Frieren", "Attack on Titan"];
+
+export default function HeroSection() {
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeCategory, setActiveCategory] = useState("All");
+
+  function handleSearch(e) {
+    e.preventDefault();
+    if (searchQuery.trim()) {
+      navigate(`/search?q=${encodeURIComponent(searchQuery.trim())}`);
+    }
+  }
+
+  function handleFilterClick(cat) {
+    setActiveCategory(cat);
+    if (cat === "Anime") {
+      navigate("/search");
+    } else if (cat === "Manga") {
+      navigate("/manga");
+    } else if (cat === "Movies & TV") {
+      navigate("/search?q=movie");
+    }
+  }
+
+  return (
+    <section className="home-hero">
+      <div className="hero-glow" />
+      <div className="hero-badge">
+        <span className="hero-badge-dot" />
+        <span>ANIME • MANGA • MOVIES • MUSIC</span>
+      </div>
+
+      <h1 className="hero-logo-text">
+        ANI<span className="hero-logo-e">C</span>OVE
+      </h1>
+
+      <div className="hero-subtitle">YOUR STREAMING UNIVERSE</div>
+      <p className="hero-desc">
+        Watch, read and listen without losing your place. <strong>Zero friction.</strong><br />
+        <strong>Everything connected.</strong>
+      </p>
+
+      {/* Filter Pills */}
+      <div className="hero-filters">
+        {["All", "Anime", "Manga", "Movies & TV", "Music"].map(cat => (
+          <button
+            key={cat}
+            className={`hero-filter-pill ${activeCategory === cat ? "active" : ""}`}
+            onClick={() => handleFilterClick(cat)}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+
+      {/* Search Bar */}
+      <form className="hero-search-wrap" onSubmit={handleSearch}>
+        <input
+          type="text"
+          className="hero-search-input"
+          placeholder="Search anime, manga, movies, music..."
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+        />
+        <button type="submit" className="hero-search-btn" aria-label="Search">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+        </button>
+      </form>
+
+      {/* Popular Searches */}
+      <div className="hero-popular">
+        <div className="hero-popular-label">POPULAR SEARCHES</div>
+        <div className="hero-popular-tags">
+          {POPULAR_SEARCHES.map(query => (
+            <span
+              key={query}
+              className="hero-popular-tag"
+              onClick={() => navigate(`/search?q=${encodeURIComponent(query)}`)}
+            >
+              {query}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="hero-ctas">
+        <button className="hero-cta hero-cta-anime" onClick={() => navigate("/home")}>
+          <span>Enter anicove</span>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+            <path d="M5 12h14M12 5l7 7-7 7" />
+          </svg>
+        </button>
+        <button className="hero-cta hero-cta-manga" onClick={() => navigate("/manga")}>
+          <span>Read Manga</span>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+          </svg>
+        </button>
+        <button className="hero-cta hero-cta-movies" onClick={() => navigate("/movies")}>
+          <span>Movies &amp; TV</span>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polygon points="5 3 19 12 5 21 5 3" />
+          </svg>
+        </button>
+        <button className="hero-cta hero-cta-music" onClick={() => navigate("/music")}>
+          <span>Play Music</span>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M9 18V5l12-2v13M9 9l12-2" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Stats */}
+      <div className="hero-stats">
+        <div className="hero-stat">
+          <div className="hero-stat-val">10K+</div>
+          <div className="hero-stat-label">SERIES & MOVIES</div>
+        </div>
+        <div className="hero-stat">
+          <div className="hero-stat-val">SUB+DUB</div>
+          <div className="hero-stat-label">AUDIO CHOICES</div>
+        </div>
+        <div className="hero-stat">
+          <div className="hero-stat-val">HD</div>
+          <div className="hero-stat-label">ADAPTIVE PLAYBACK</div>
+        </div>
+        <div className="hero-stat">
+          <div className="hero-stat-val">4-IN-1</div>
+          <div className="hero-stat-label">ANIME • MANGA • MOVIES • MUSIC</div>
+        </div>
+      </div>
+
+      <div className="scroll-indicator">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M19 9l-7 7-7-7" />
+        </svg>
+      </div>
+    </section>
+  );
+}

frontend/src/components/HlsPlayer.jsx

@@ -0,0 +1,1012 @@
+import Hls from "hls.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { proxiedStreamUrl, streamHeaders } from "../api.js";
+
+/** blob:/data: URLs are already local — never route them through the proxy. */
+function subtitleSrc(file, referer) {
+  if (/^(blob|data):/i.test(file || "")) return file;
+  return proxiedStreamUrl(file, referer);
+}
+
+function fmt(t) {
+  if (!Number.isFinite(t) || t < 0) t = 0;
+  const h = Math.floor(t / 3600);
+  const m = Math.floor((t % 3600) / 60);
+  const s = Math.floor(t % 60);
+  const mm = h ? String(m).padStart(2, "0") : String(m);
+  return h ? `${h}:${mm}:${String(s).padStart(2, "0")}` : `${mm}:${String(s).padStart(2, "0")}`;
+}
+
+const S = { fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+
+const IconPlay = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} fill="currentColor">
+    <path d="M8 5.14v13.72c0 .8.87 1.3 1.56.9l11-6.86a1.05 1.05 0 000-1.8l-11-6.86c-.69-.4-1.56.1-1.56.9z" />
+  </svg>
+);
+const IconPause = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} fill="currentColor">
+    <rect x="6" y="5" width="4" height="14" rx="1.2" />
+    <rect x="14" y="5" width="4" height="14" rx="1.2" />
+  </svg>
+);
+const IconReplay = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} {...S}>
+    <path d="M3 12a9 9 0 109-9 9.75 9.75 0 00-6.74 2.74L3 8" />
+    <path d="M3 3v5h5" />
+  </svg>
+);
+const IconVol = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} {...S}>
+    <path d="M11 5L6 9H2v6h4l5 4V5z" />
+    <path d="M15.5 8.5a5 5 0 010 7" />
+    <path d="M18.5 5.5a9 9 0 010 13" />
+  </svg>
+);
+const IconMuted = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} {...S}>
+    <path d="M11 5L6 9H2v6h4l5 4V5z" />
+    <path d="M22 9l-6 6M16 9l6 6" />
+  </svg>
+);
+const IconGear = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} {...S}>
+    <circle cx="12" cy="12" r="3" />
+    <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33h0a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51h0a1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82v0a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z" />
+  </svg>
+);
+const IconCast = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} {...S}>
+    <path d="M2 16.1A5.9 5.9 0 017.9 22" />
+    <path d="M2 12.05A9.95 9.95 0 0111.95 22" />
+    <path d="M2 8V6a2 2 0 012-2h16a2 2 0 012 2v12a2 2 0 01-2 2h-6" />
+    <circle cx="2" cy="20" r="1.4" fill="currentColor" stroke="none" />
+  </svg>
+);
+const IconPip = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} {...S}>
+    <rect x="2" y="4" width="20" height="16" rx="2" />
+    <rect x="12" y="12" width="8" height="5" rx="1" fill="currentColor" stroke="none" />
+  </svg>
+);
+const IconFs = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} {...S}>
+    <path d="M8 3H5a2 2 0 00-2 2v3M16 3h3a2 2 0 012 2v3M8 21H5a2 2 0 01-2-2v-3M16 21h3a2 2 0 002-2v-3" />
+  </svg>
+);
+const IconShrink = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} {...S}>
+    <path d="M8 3v3a2 2 0 01-2 2H3M21 8h-3a2 2 0 01-2-2V3M3 16h3a2 2 0 012 2v3M16 21v-3a2 2 0 012-2h3" />
+  </svg>
+);
+const IconTheater = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} {...S}>
+    <rect x="2" y="3" width="20" height="14" rx="2" />
+    <path d="M7 21h10" />
+    <path d="M10 17v4" />
+    <path d="M14 17v4" />
+  </svg>
+);
+const IconScreenshot = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} {...S}>
+    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
+    <circle cx="12" cy="13" r="4" />
+  </svg>
+);
+const IconRewind = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} {...S}>
+    <polygon points="11 19 2 12 11 5 11 19" />
+    <polygon points="22 19 13 12 22 5 22 19" />
+  </svg>
+);
+const IconForward = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} {...S}>
+    <polygon points="13 19 22 12 13 5 13 19" />
+    <polygon points="2 19 11 12 2 5 2 19" />
+  </svg>
+);
+const IconLoop = (p) => (
+  <svg viewBox="0 0 24 24" width={p.s || 20} height={p.s || 20} {...S}>
+    <path d="M17 1l4 4-4 4" />
+    <path d="M3 11V9a4 4 0 0 1 4-4h14" />
+    <path d="M7 23l-4-4 4-4" />
+    <path d="M21 13v2a4 4 0 0 1-4 4H3" />
+  </svg>
+);
+
+export default function HlsPlayer({ sources, autoPlay = true, onFatal = null, onProgress = null, startAt = 0 }) {
+  const wrapRef = useRef(null);
+  const videoRef = useRef(null);
+  const seekBarRef = useRef(null);
+  const hlsRef = useRef(null);
+  const onFatalRef = useRef(onFatal);
+  const onProgressRef = useRef(onProgress);
+  const startAtRef = useRef(startAt);
+  const hideTimer = useRef(null);
+  const seeking = useRef(false);
+  const resumeAt = useRef(0);
+  const playingRef = useRef(false);
+  const timeRef = useRef(0);
+  const durationRef = useRef(0);
+
+  useEffect(() => {
+    onFatalRef.current = onFatal;
+    onProgressRef.current = onProgress;
+    startAtRef.current = startAt;
+  }, [onFatal, onProgress, startAt]);
+
+  const streams = useMemo(
+    () => (sources?.streams || []).filter((s) => s && s.url),
+    [sources]
+  );
+
+  const [streamIdx, setStreamIdx] = useState(0);
+  const stream = streams[Math.min(streamIdx, streams.length - 1)] || streams[0];
+
+  const [playing, setPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [buffered, setBuffered] = useState(0);
+  const [volume, setVolume] = useState(1);
+  const [muted, setMuted] = useState(false);
+  const [rate, setRate] = useState(1);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [ui, setUi] = useState(true);
+  const [settings, setSettings] = useState(null); // "quality" | "speed" | null
+  const [levels, setLevels] = useState([]);
+  const [hlsLevel, setHlsLevel] = useState(-1);
+  const [castOk, setCastOk] = useState(false);
+  const [casting, setCasting] = useState(false);
+  const [fatal, setFatal] = useState(null);
+  const [showSkip, setShowSkip] = useState(null);
+  const [ended, setEnded] = useState(false);
+  const [hover, setHover] = useState(null); // { pct, time }
+  const [theaterMode, setTheaterMode] = useState(false);
+  const [loop, setLoop] = useState(false);
+  const [volumeBoost, setVolumeBoost] = useState(1);
+
+  const intro = sources?.intro || { start: 0, end: 0 };
+  const outro = sources?.outro || { start: 0, end: 0 };
+  const subtitles = sources?.subtitles || [];
+
+  const isHls =
+    stream?.type === "hls" ||
+    (stream?.url || "").split("?")[0].toLowerCase().endsWith(".m3u8");
+
+  useEffect(() => {
+    playingRef.current = playing;
+    timeRef.current = currentTime;
+    durationRef.current = duration;
+  }, [playing, currentTime, duration]);
+
+  // ── player attach (hls.js for m3u8, native for mp4) ────────────
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !stream?.url) return undefined;
+
+    // Resume from a saved position (startAt), or from a position carried over
+    // when the parent swaps the stream (e.g. movie quality change).
+    const resume = startAtRef.current || resumeAt.current;
+    startAtRef.current = 0;
+    resumeAt.current = 0;
+
+    // Capture the current position before teardown so the next stream can
+    // resume seamlessly. Runs before hls.destroy() resets the video element.
+    const carryPosition = () => {
+      const v = videoRef.current;
+      if (v && v.readyState >= 1 && v.currentTime > 5) resumeAt.current = v.currentTime;
+    };
+
+    setFatal(null);
+    setEnded(false);
+
+    // Streams marked `direct` are already proxied (e.g. the MovieBox sidecar's
+    // own /api/stream endpoint) — play them as-is instead of routing them
+    // through the HLS worker again.
+    const resolveSrc = (st) => (st?.direct ? st.url : proxiedStreamUrl(st.url, st.referer));
+
+    // MP4 path: when the browser rejects the source, probe the resolved URL to
+    // tell apart a server refusal (429/403/HTML — the usual cause) from a real
+    // codec problem, so the message is honest instead of a generic "codec".
+    let retryCount = 0;
+    let retryTimer = null;
+    let alive = true;
+    let diagnosing = false;
+    const diagnoseStream = (st) => {
+      // The error event and the play().catch fallback can both fire for one
+      // failure — only run the probe once per failure to keep the retry count honest.
+      if (diagnosing) return;
+      diagnosing = true;
+      const probeUrl = resolveSrc(st);
+      fetch(probeUrl, {
+        headers: { ...streamHeaders(), Range: "bytes=0-63" },
+        signal: AbortSignal.timeout(12000),
+      })
+        .then((res) => {
+          if (!alive) return;
+          const ct = res.headers.get("content-type") || "";
+          if (res.status === 429) {
+            if (retryCount < 1) {
+              retryCount += 1;
+              setFatal("Stream server is busy (HTTP 429). Retrying…");
+              retryTimer = setTimeout(reloadSrc, 3000);
+            } else {
+              const msg =
+                "The stream server is rate-limiting requests right now. Try again in a few minutes.";
+              setFatal(msg);
+              onFatalRef.current?.(msg);
+            }
+            return;
+          }
+          if (res.status >= 400 || !/video|mp4|octet-stream|quicktime/i.test(ct)) {
+            const msg = `The stream server refused the video (HTTP ${res.status}).`;
+            setFatal(msg);
+            onFatalRef.current?.(msg);
+            return;
+          }
+          // Bytes look like video — the container/codec is genuinely unsupported.
+          const msg = "This video codec is not supported by your browser.";
+          setFatal(msg);
+          onFatalRef.current?.(msg);
+        })
+        .catch(() => {
+          if (!alive) return;
+          const msg = "This stream could not be played.";
+          setFatal(msg);
+          onFatalRef.current?.(msg);
+        });
+    };
+
+    const reloadSrc = () => {
+      const v = videoRef.current;
+      if (!alive || !v || v.getAttribute("data-stream-url") !== stream.url) return;
+      diagnosing = false; // a fresh failure after the reload may be diagnosed again
+      v.removeAttribute("src");
+      v.load();
+      v.src = resolveSrc(stream);
+      v.load();
+      if (autoPlay) v.play().catch(() => {});
+    };
+
+    const onVideoError = () => {
+      const code = video.error?.code;
+      if (!isHls && code === 4 && stream?.url) {
+        diagnoseStream(stream);
+        return;
+      }
+      const msg =
+        code === 4
+          ? "This video codec is not supported by your browser."
+          : "This stream could not be played.";
+      setFatal(msg);
+      onFatalRef.current?.(msg);
+    };
+    video.setAttribute("data-stream-url", stream.url);
+    video.addEventListener("error", onVideoError);
+
+    if (!isHls) {
+      setLevels([]);
+      video.src = resolveSrc(stream);
+      const onMeta = () => {
+        try {
+          video.currentTime = Math.min(resume, video.duration || resume);
+        } catch {
+          /* ignore */
+        }
+      };
+      if (resume > 0) video.addEventListener("loadedmetadata", onMeta, { once: true });
+      if (autoPlay) {
+        video.play().catch(() => {
+          if (video.error) onVideoError();
+        });
+      }
+      return () => {
+        alive = false;
+        if (retryTimer) clearTimeout(retryTimer);
+        carryPosition();
+        video.removeEventListener("error", onVideoError);
+        video.removeEventListener("loadedmetadata", onMeta);
+      };
+    }
+
+    let hls = null;
+    let manifestTimer = null;
+    let stuckTimer = null;
+
+    try {
+      if (Hls.isSupported()) {
+        hls = new Hls({
+          enableWorker: true,
+          maxBufferLength: 40,
+          maxMaxBufferLength: 120,
+          xhrSetup: (xhr) => {
+            for (const [k, v] of Object.entries(streamHeaders())) {
+              xhr.setRequestHeader(k, v);
+            }
+          },
+        });
+        let manifestLoaded = false;
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          manifestLoaded = true;
+          if (!hls.levels?.length) {
+            const msg = "This server returned no playable quality levels.";
+            setFatal(msg);
+            onFatalRef.current?.(msg);
+            return;
+          }
+          setLevels(
+            hls.levels.map((l, i) => ({
+              i,
+              height: l.height,
+              name: l.height ? `${l.height}p` : `Level ${i + 1}`,
+            }))
+          );
+          if (resume > 0) {
+            try {
+              video.currentTime = Math.min(resume, video.duration || resume);
+            } catch {
+              /* ignore */
+            }
+          }
+          if (autoPlay) video.play().catch(() => {});
+          stuckTimer = setTimeout(() => {
+            if (video.readyState < 2) {
+              const msg = "This stream is not delivering data.";
+              setFatal(msg);
+              onFatalRef.current?.(msg);
+            }
+          }, 20000);
+          video.addEventListener("loadeddata", () => clearTimeout(stuckTimer), {
+            once: true,
+          });
+        });
+        let retries = 0;
+        hls.on(Hls.Events.ERROR, (_e, data) => {
+          if (!data.fatal) return;
+          if (data.type === Hls.ErrorTypes.NETWORK_ERROR && retries < 3) {
+            retries += 1;
+            hls.startLoad();
+          } else {
+            const msg = data.details || "This stream could not be loaded.";
+            setFatal(msg);
+            onFatalRef.current?.(msg);
+          }
+        });
+        manifestTimer = setTimeout(() => {
+          if (!manifestLoaded) {
+            const msg = "Timed out loading this stream.";
+            setFatal(msg);
+            onFatalRef.current?.(msg);
+          }
+        }, 12000);
+
+        hls.loadSource(proxiedStreamUrl(stream.url, stream.referer));
+        hls.attachMedia(video);
+        hlsRef.current = hls;
+      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+        video.src = proxiedStreamUrl(stream.url, stream.referer); // native HLS (Safari)
+      }
+    } catch (err) {
+      const msg = err?.message || "Player error";
+      console.error("[HlsPlayer]", err);
+      setFatal(msg);
+      onFatalRef.current?.(msg);
+    }
+
+    return () => {
+      alive = false;
+      if (retryTimer) clearTimeout(retryTimer);
+      carryPosition();
+      if (manifestTimer) clearTimeout(manifestTimer);
+      if (stuckTimer) clearTimeout(stuckTimer);
+      video.removeEventListener("error", onVideoError);
+      if (hls) hls.destroy();
+      hlsRef.current = null;
+    };
+  }, [stream?.url, autoPlay, isHls]);
+
+  // ── media element events ────────────────────────────────────────
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return undefined;
+    let lastSave = 0;
+    const save = (ended = false) => {
+      const v = videoRef.current;
+      if (!v || !Number.isFinite(v.currentTime) || !Number.isFinite(v.duration) || v.duration <= 0) return;
+      onProgressRef.current?.({ position: v.currentTime, duration: v.duration, ended });
+    };
+    const onPlay = () => setPlaying(true);
+    const onPause = () => {
+      setPlaying(false);
+      setUi(true);
+      save();
+    };
+    const onTime = () => {
+      setCurrentTime(video.currentTime);
+      const now = Date.now();
+      if (now - lastSave >= 5000) {
+        lastSave = now;
+        save();
+      }
+    };
+    const onDur = () => setDuration(video.duration || 0);
+    const onProg = () => {
+      const b = video.buffered;
+      setBuffered(b.length ? b.end(b.length - 1) : 0);
+    };
+    const onVol = () => {
+      setVolume(video.volume);
+      setMuted(video.muted);
+    };
+    const onEnd = () => {
+      setPlaying(false);
+      setEnded(true);
+      setUi(true);
+      save(true);
+    };
+    const onFs = () =>
+      setFullscreen(Boolean(document.fullscreenElement || document.webkitFullscreenElement));
+    const onCastState = () => {
+      try {
+        setCasting(video.remote?.state === "connected");
+      } catch {
+        /* ignore */
+      }
+    };
+    video.addEventListener("play", onPlay);
+    video.addEventListener("pause", onPause);
+    video.addEventListener("timeupdate", onTime);
+    video.addEventListener("durationchange", onDur);
+    video.addEventListener("progress", onProg);
+    video.addEventListener("volumechange", onVol);
+    video.addEventListener("ended", onEnd);
+    document.addEventListener("fullscreenchange", onFs);
+    try {
+      video.remote?.addEventListener?.("statechange", onCastState);
+    } catch {
+      /* ignore */
+    }
+    return () => {
+      save();
+      video.removeEventListener("play", onPlay);
+      video.removeEventListener("pause", onPause);
+      video.removeEventListener("timeupdate", onTime);
+      video.removeEventListener("durationchange", onDur);
+      video.removeEventListener("progress", onProg);
+      video.removeEventListener("volumechange", onVol);
+      video.removeEventListener("ended", onEnd);
+      document.removeEventListener("fullscreenchange", onFs);
+      try {
+        video.remote?.removeEventListener?.("statechange", onCastState);
+      } catch {
+        /* ignore */
+      }
+    };
+  }, []);
+
+  // ── cast / airplay availability ─────────────────────────────────
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return undefined;
+    let alive = true;
+    const hasPicker = typeof video.webkitShowPlaybackTargetPicker === "function";
+    try {
+      if (video.remote?.watchAvailability) {
+        video.remote
+          .watchAvailability((avail) => {
+            if (alive) setCastOk(Boolean(avail) || hasPicker);
+          })
+          .catch(() => {
+            if (alive) setCastOk(hasPicker);
+          });
+      } else {
+        setCastOk(hasPicker);
+      }
+    } catch {
+      setCastOk(hasPicker);
+    }
+    return () => {
+      alive = false;
+    };
+  }, [stream?.url]);
+
+  // ── auto-hide controls ──────────────────────────────────────────
+  useEffect(() => {
+    clearTimeout(hideTimer.current);
+    if (!playing) {
+      setUi(true);
+      return undefined;
+    }
+    hideTimer.current = setTimeout(() => {
+      if (!seeking.current) setUi(false);
+    }, 2600);
+    return () => clearTimeout(hideTimer.current);
+  }, [playing]);
+
+  const poke = useCallback(() => {
+    setUi(true);
+    clearTimeout(hideTimer.current);
+    if (playingRef.current) {
+      hideTimer.current = setTimeout(() => {
+        if (!seeking.current) setUi(false);
+      }, 2600);
+    }
+  }, []);
+
+  // ── controls ────────────────────────────────────────────────────
+  const togglePlay = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.paused) video.play().catch(() => {});
+    else video.pause();
+  }, []);
+
+  const seekTo = useCallback((sec) => {
+    const video = videoRef.current;
+    if (!video) return;
+    const d = durationRef.current || video.duration || 0;
+    video.currentTime = Math.min(Math.max(sec, 0), d);
+  }, []);
+
+  const seekFromEvent = useCallback(
+    (clientX) => {
+      const bar = seekBarRef.current;
+      if (!bar) return;
+      const r = bar.getBoundingClientRect();
+      const ratio = Math.min(Math.max((clientX - r.left) / r.width, 0), 1);
+      seekTo(ratio * (durationRef.current || 0));
+    },
+    [seekTo]
+  );
+
+  function toggleMute() {
+    const video = videoRef.current;
+    if (!video) return;
+    video.muted = !video.muted;
+  }
+
+  function setVol(v) {
+    const video = videoRef.current;
+    if (!video) return;
+    const boosted = v * volumeBoost;
+    video.volume = Math.min(boosted, 1);
+    if (v > 0) video.muted = false;
+  }
+
+  function toggleVolumeBoost() {
+    const next = volumeBoost === 1 ? 2 : 1;
+    setVolumeBoost(next);
+    const video = videoRef.current;
+    if (video) {
+      video.volume = Math.min(video.volume * (next / volumeBoost), 1);
+    }
+  }
+
+  function toggleFullscreen() {
+    const el = wrapRef.current;
+    if (!el) return;
+    try {
+      if (document.fullscreenElement || document.webkitFullscreenElement) {
+        (document.exitFullscreen || document.webkitExitFullscreen).call(document);
+      } else {
+        (el.requestFullscreen || el.webkitRequestFullscreen).call(el);
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
+  async function togglePip() {
+    const video = videoRef.current;
+    if (!video) return;
+    try {
+      if (document.pictureInPictureElement) {
+        await document.exitPictureInPicture();
+      } else if (video.requestPictureInPicture) {
+        await video.requestPictureInPicture();
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
+  async function handleCast() {
+    const video = videoRef.current;
+    if (!video) return;
+    try {
+      if (video.remote?.prompt) {
+        await video.remote.prompt();
+        return;
+      }
+    } catch {
+      /* fall through */
+    }
+    try {
+      video.webkitShowPlaybackTargetPicker?.();
+    } catch {
+      /* ignore */
+    }
+  }
+
+  function setSpeed(r) {
+    const video = videoRef.current;
+    if (!video) return;
+    video.playbackRate = r;
+    setRate(r);
+    setSettings(null);
+  }
+
+  function switchHlsQuality(i) {
+    const hls = hlsRef.current;
+    if (hls) hls.currentLevel = i;
+    setHlsLevel(i);
+    setSettings(null);
+  }
+
+  function pickStream(i) {
+    if (i === streamIdx) {
+      setSettings(null);
+      return;
+    }
+    resumeAt.current = videoRef.current?.currentTime || 0;
+    setStreamIdx(i);
+    setSettings(null);
+  }
+
+  function replay() {
+    const video = videoRef.current;
+    if (!video) return;
+    video.currentTime = 0;
+    video.play().catch(() => {});
+  }
+
+  function takeScreenshot() {
+    const video = videoRef.current;
+    if (!video) return;
+    try {
+      const canvas = document.createElement('canvas');
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      const link = document.createElement('a');
+      link.download = `anicove-screenshot-${Date.now()}.png`;
+      link.href = canvas.toDataURL('image/png');
+      link.click();
+    } catch (err) {
+      console.error('Screenshot failed:', err);
+    }
+  }
+
+  function toggleTheaterMode() {
+    setTheaterMode(!theaterMode);
+  }
+
+  function toggleLoop() {
+    const video = videoRef.current;
+    if (!video) return;
+    video.loop = !loop;
+    setLoop(!loop);
+  }
+
+  function skip() {
+    const video = videoRef.current;
+    if (!video) return;
+    const target = showSkip === "intro" ? intro.end + 0.5 : outro.end + 0.5;
+    video.currentTime = target;
+    setShowSkip(null);
+  }
+
+  // ── skip intro/outro detection ──────────────────────────────────
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return undefined;
+    const onTime = () => {
+      const t = video.currentTime;
+      const inIntro = intro.end > intro.start + 3 && t >= intro.start && t < intro.end - 2;
+      const inOutro = outro.end > outro.start + 3 && t >= outro.start && t < outro.end - 2;
+      setShowSkip(inIntro ? "intro" : inOutro ? "outro" : null);
+    };
+    video.addEventListener("timeupdate", onTime);
+    return () => video.removeEventListener("timeupdate", onTime);
+  }, [intro.start, intro.end, outro.start, outro.end]);
+
+  // ── keyboard shortcuts ──────────────────────────────────────────
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return undefined;
+    const onKey = (e) => {
+      const tag = (e.target.tagName || "").toLowerCase();
+      if (tag === "input" || tag === "textarea" || tag === "select") return;
+      switch (e.key.toLowerCase()) {
+        case " ":
+        case "k":
+          e.preventDefault();
+          togglePlay();
+          break;
+        case "arrowright":
+          e.preventDefault();
+          seekTo(timeRef.current + (e.shiftKey ? 10 : 5));
+          break;
+        case "arrowleft":
+          e.preventDefault();
+          seekTo(timeRef.current - (e.shiftKey ? 10 : 5));
+          break;
+        case "arrowup":
+          e.preventDefault();
+          setVol(Math.min((videoRef.current?.volume || 0) + 0.1, 1));
+          break;
+        case "arrowdown":
+          e.preventDefault();
+          setVol(Math.max((videoRef.current?.volume || 0) - 0.1, 0));
+          break;
+        case "m":
+          toggleMute();
+          break;
+        case "f":
+          toggleFullscreen();
+          break;
+        case "p":
+          togglePip();
+          break;
+        case "l":
+          toggleLoop();
+          break;
+        case "t":
+          toggleTheaterMode();
+          break;
+        case "s":
+          takeScreenshot();
+          break;
+        default:
+          break;
+      }
+    };
+    el.addEventListener("keydown", onKey);
+    return () => el.removeEventListener("keydown", onKey);
+  }, [togglePlay, seekTo]);
+
+  // ── quality options ─────────────────────────────────────────────
+  const qualityOptions = useMemo(() => {
+    if (isHls) {
+      return levels.map((l) => ({ key: l.i, label: l.name }));
+    }
+    return streams.map((s, i) => ({
+      key: i,
+      label:
+        s.resolution || s.format || s.server || (s.type === "hls" ? "HLS" : `Quality ${i + 1}`),
+    }));
+  }, [isHls, levels, streams]);
+
+  const currentQualityLabel = useMemo(() => {
+    if (isHls) return hlsLevel === -1 ? "Auto" : levels.find((l) => l.i === hlsLevel)?.name || "Auto";
+    return stream?.resolution || stream?.format || stream?.server || "Auto";
+  }, [isHls, levels, hlsLevel, stream]);
+
+  const pipOk =
+    typeof document !== "undefined" &&
+    document.pictureInPictureEnabled &&
+    typeof HTMLVideoElement !== "undefined" &&
+    "requestPictureInPicture" in HTMLVideoElement.prototype;
+
+  const pct = (v) => `${Math.min(Math.max((v / (durationRef.current || duration || 1)) * 100, 0), 100)}%`;
+
+  const skipLabel = showSkip === "intro" ? "Skip Intro" : "Skip Outro";
+
+  return (
+    <div className={`player-wrap${theaterMode ? " theater-mode" : ""}`}>
+      <div
+        className="custom-player"
+        ref={wrapRef}
+        tabIndex={0}
+        onMouseMove={poke}
+        onPointerDown={poke}
+      >
+        <video ref={videoRef} playsInline onClick={togglePlay} onDoubleClick={(e) => {
+          const rect = videoRef.current.getBoundingClientRect();
+          const x = e.clientX - rect.left;
+          if (x < rect.width / 3) {
+            seekTo(timeRef.current - 10);
+          } else if (x > (rect.width / 3) * 2) {
+            seekTo(timeRef.current + 10);
+          } else {
+            togglePlay();
+          }
+        }}>
+          {subtitles.map((s, i) => (
+            <track
+              key={`${s.file}-${i}`}
+              kind={s.kind || "captions"}
+              src={subtitleSrc(s.file, stream?.referer)}
+              label={s.label || "Subtitles"}
+              srcLang={s.srcLang || "en"}
+              default={i === 0}
+            />
+          ))}
+        </video>
+
+        {fatal ? (
+          <div className="player-error">
+            <div className="big">📺</div>
+            <p>{fatal}</p>
+          </div>
+        ) : null}
+
+        {/* center play / replay */}
+        {!fatal && ended ? (
+          <button className="cp-center-play" onClick={replay} aria-label="Replay">
+            <IconReplay s={34} />
+          </button>
+        ) : !fatal && !playing ? (
+          <button className="cp-center-play" onClick={togglePlay} aria-label="Play">
+            <IconPlay s={34} />
+          </button>
+        ) : null}
+
+        {/* skip intro/outro */}
+        <button className={`skip-btn ${showSkip ? "show" : ""}`} onClick={skip}>
+          ⏭ {skipLabel}
+        </button>
+
+        {/* bottom gradient + controls */}
+        <div className={`cp-fade ${ui ? "" : "hide"}`} />
+        <div className={`cp-controls ${ui ? "" : "hide"}`} onClick={(e) => e.stopPropagation()}>
+          <div
+            className="cp-seek"
+            ref={seekBarRef}
+            onPointerDown={(e) => {
+              seeking.current = true;
+              e.currentTarget.setPointerCapture?.(e.pointerId);
+              seekFromEvent(e.clientX);
+            }}
+            onPointerMove={(e) => {
+              if (seeking.current) {
+                seekFromEvent(e.clientX);
+              } else {
+                const r = e.currentTarget.getBoundingClientRect();
+                const ratio = Math.min(Math.max((e.clientX - r.left) / r.width, 0), 1);
+                setHover({ pct: `${ratio * 100}%`, time: ratio * (durationRef.current || 0) });
+              }
+            }}
+            onPointerUp={() => {
+              seeking.current = false;
+              setHover(null);
+            }}
+            onPointerLeave={() => {
+              if (!seeking.current) setHover(null);
+            }}
+          >
+            <div className="cp-seek-track" />
+            <div className="cp-buffered" style={{ width: pct(buffered) }} />
+            <div className="cp-progress" style={{ width: pct(currentTime) }} />
+            <div className="cp-thumb" style={{ left: pct(currentTime) }} />
+            {hover ? (
+              <div className="cp-hover-time" style={{ left: hover.pct }}>
+                {fmt(hover.time)}
+              </div>
+            ) : null}
+          </div>
+
+          <div className="cp-row">
+            <button className="cp-btn" onClick={togglePlay} aria-label={playing ? "Pause" : "Play"}>
+              {playing ? <IconPause /> : <IconPlay />}
+            </button>
+            <button className="cp-btn" onClick={() => seekTo(timeRef.current - 10)} aria-label="Rewind 10s">
+              <IconRewind />
+            </button>
+            <button className="cp-btn" onClick={() => seekTo(timeRef.current + 10)} aria-label="Forward 10s">
+              <IconForward />
+            </button>
+            <button className="cp-btn" onClick={toggleMute} aria-label={muted ? "Unmute" : "Mute"}>
+              {muted || volume === 0 ? <IconMuted /> : <IconVol />}
+            </button>
+            <input
+              className="cp-vol-slider"
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              value={muted ? 0 : volume}
+              onChange={(e) => setVol(Number(e.target.value))}
+              aria-label="Volume"
+            />
+            <span className="cp-time">
+              {fmt(currentTime)} <em>/</em> {fmt(duration)}
+            </span>
+            <div className="cp-spacer" />
+
+            <button
+              className={`cp-btn cp-gear ${settings ? "active" : ""}`}
+              onClick={() => setSettings(settings ? null : "quality")}
+              title="Quality & speed"
+              aria-label="Settings"
+            >
+              <IconGear />
+            </button>
+
+            {pipOk ? (
+              <button className="cp-btn" onClick={togglePip} title="Picture-in-Picture" aria-label="Picture in picture">
+                <IconPip />
+              </button>
+            ) : null}
+
+            {castOk ? (
+              <button
+                className={`cp-btn ${casting ? "active" : ""}`}
+                onClick={handleCast}
+                title={casting ? "Connected to a cast device" : "Cast / AirPlay"}
+                aria-label="Cast"
+              >
+                <IconCast />
+              </button>
+            ) : null}
+
+            <button className="cp-btn" onClick={toggleTheaterMode} title="Theater Mode" aria-label="Theater mode">
+              <IconTheater />
+            </button>
+            <button className="cp-btn" onClick={takeScreenshot} title="Screenshot" aria-label="Screenshot">
+              <IconScreenshot />
+            </button>
+            <button className={`cp-btn${loop ? " active" : ""}`} onClick={toggleLoop} title="Loop" aria-label="Loop">
+              <IconLoop />
+            </button>
+            <button className="cp-btn" onClick={toggleFullscreen} title="Fullscreen" aria-label="Fullscreen">
+              {fullscreen ? <IconShrink /> : <IconFs />}
+            </button>
+          </div>
+
+          {settings ? (
+            <div className="cp-menu">
+              {qualityOptions.length > 1 ? (
+                <>
+                  <div className="cp-menu-title">Quality</div>
+                  {isHls && hlsLevel !== -1 ? (
+                    <button
+                      className="cp-menu-item"
+                      onClick={() => switchHlsQuality(-1)}
+                    >
+                      Auto
+                    </button>
+                  ) : null}
+                  {qualityOptions.map((q) => {
+                    const active = isHls ? q.key === hlsLevel : q.key === streamIdx;
+                    return (
+                      <button
+                        key={q.key}
+                        className={`cp-menu-item ${active ? "active" : ""}`}
+                        onClick={() => (isHls ? switchHlsQuality(q.key) : pickStream(q.key))}
+                      >
+                        {q.label}
+                      </button>
+                    );
+                  })}
+                </>
+              ) : null}
+              <div className="cp-menu-title">Speed</div>
+              {[0.5, 0.75, 1, 1.25, 1.5, 2].map((r) => (
+                <button
+                  key={r}
+                  className={`cp-menu-item ${rate === r ? "active" : ""}`}
+                  onClick={() => setSpeed(r)}
+                >
+                  {r}x
+                </button>
+              ))}
+              <div className="cp-menu-title">Volume Boost</div>
+              {[1, 1.5, 2].map((boost) => (
+                <button
+                  key={boost}
+                  className={`cp-menu-item ${volumeBoost === boost ? "active" : ""}`}
+                  onClick={() => toggleVolumeBoost()}
+                >
+                  {boost}x
+                </button>
+              ))}
+              <div className="cp-menu-note">Current: {currentQualityLabel}</div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/LibraryMarquee.jsx

@@ -0,0 +1,39 @@
+import { useNavigate } from "react-router-dom";
+import { api } from "../api.js";
+
+export default function LibraryMarquee({ items = [] }) {
+  const navigate = useNavigate();
+  const list = items.filter((x) => x && x.coverImage);
+  if (!list.length) return null;
+
+  const rowA = list.slice(0, 15);
+  // Second row usually offsets by 10; fall back to row A when the library is
+  // too small so the reverse row never renders empty.
+  const rowB = list.length > 10 ? list.slice(10, 25) : rowA;
+
+  return (
+    <section className="library-section">
+      <div className="library-header">
+        <div className="library-header-line" />
+        <div className="library-header-text">A LIBRARY THAT KEEPS MOVING</div>
+        <div className="library-header-line right" />
+      </div>
+      <div className="marquee-track">
+        <div className="marquee-row">
+          {rowA.concat(rowA).map((item, idx) => (
+            <div key={idx} className="marquee-poster" onClick={() => navigate(`/anime/${item.id}`)}>
+              <img src={api.img(item.coverImage)} alt={item.id} loading="lazy" />
+            </div>
+          ))}
+        </div>
+        <div className="marquee-row reverse">
+          {rowB.concat(rowB).map((item, idx) => (
+            <div key={idx} className="marquee-poster" onClick={() => navigate(`/anime/${item.id}`)}>
+              <img src={api.img(item.coverImage)} alt={item.id} loading="lazy" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

frontend/src/components/MangaCard.jsx

@@ -0,0 +1,46 @@
+import { Link } from "react-router-dom";
+import { api } from "../api.js";
+
+export default function MangaCard({ manga }) {
+  if (!manga?.id) return null;
+  const title = manga.title || "Untitled";
+
+  return (
+    <Link
+      to={`/manga/${manga.source}/${encodeURIComponent(manga.id)}`}
+      className="anime-card manga-card"
+      title={title}
+    >
+      <div className="card-poster">
+        {manga.cover ? (
+          <img
+            src={api.mangaImg(manga.cover, manga.source)}
+            alt={title}
+            loading="lazy"
+          />
+        ) : (
+          <div className="skeleton" style={{ width: "100%", height: "100%" }} />
+        )}
+        <div className="card-overlay" />
+        {manga.latest ? (
+          <div className="card-ep-badge">CH {manga.latest}</div>
+        ) : null}
+        <div className="card-quick">
+          <div className="card-quick-btn">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+            </svg>
+            Read Now
+          </div>
+        </div>
+      </div>
+      <div className="card-body">
+        <div className="card-title">{title}</div>
+        <div className="card-meta">
+          {manga.type ? <span className="card-meta-item">{manga.type}</span> : null}
+          {manga.status ? <span className="card-meta-item">• {manga.status}</span> : null}
+        </div>
+      </div>
+    </Link>
+  );
+}

frontend/src/components/MediaCard.jsx

@@ -0,0 +1,34 @@
+import { Link } from "react-router-dom";
+import { api, titleOf } from "../api.js";
+
+export default function MediaCard({ media }) {
+  const title = titleOf(media);
+  const sub = [media.seasonYear, media.format].filter(Boolean).join(" · ");
+
+  return (
+    <Link to={`/anime/${media.id}`} className="card" title={title}>
+      <div className="card-poster">
+        {media.score ? <span className="card-score">{media.score}%</span> : null}
+        {media.coverImage ? (
+          <img src={api.img(media.coverImage)} alt={title} loading="lazy" />
+        ) : (
+          <div className="skeleton" style={{ width: "100%", height: "100%" }} />
+        )}
+        <div className="card-overlay">
+          <span className="card-play">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          </span>
+          <span className="card-eps">
+            {media.episodes ? `${media.episodes} ep` : media.status || ""}
+          </span>
+        </div>
+      </div>
+      <div className="card-body">
+        <h3>{title}</h3>
+        {sub ? <div className="sub">{sub}</div> : null}
+      </div>
+    </Link>
+  );
+}

frontend/src/components/MediaRow.jsx

@@ -0,0 +1,22 @@
+import MediaCard from "./MediaCard.jsx";
+
+export default function MediaRow({ title, items = [], to }) {
+  if (!items.length) return null;
+  return (
+    <section className="section-reveal">
+      <div className="section-head">
+        <h2>{title}</h2>
+        {to ? (
+          <a className="link" href={to}>
+            See all →
+          </a>
+        ) : null}
+      </div>
+      <div className="row">
+        {items.map((m) => (
+          <MediaCard key={m.id} media={m} />
+        ))}
+      </div>
+    </section>
+  );
+}

frontend/src/components/MobileNav.jsx

@@ -0,0 +1,106 @@
+import { NavLink, useLocation, useNavigate } from "react-router-dom";
+
+const ICON = {
+  home: (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 10.5 12 3l9 7.5" />
+      <path d="M5 9.5V21h14V9.5" />
+    </svg>
+  ),
+  browse: (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+      <circle cx="11" cy="11" r="7" />
+      <path d="m20 20-3.5-3.5" />
+    </svg>
+  ),
+  search: (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="11" cy="11" r="7" />
+      <path d="m20 20-3.5-3.5" />
+    </svg>
+  ),
+  schedule: (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="4" width="18" height="18" rx="2" />
+      <path d="M16 2v4M8 2v4M3 10h18" />
+    </svg>
+  ),
+  movies: (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="2" y="4" width="20" height="16" rx="2" />
+      <path d="M7 4v16M17 4v16M2 9h5M2 15h5M17 9h5M17 15h5" />
+    </svg>
+  ),
+  manga: (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+      <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+    </svg>
+  ),
+  music: (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M9 18V5l12-2v13" />
+      <circle cx="6" cy="18" r="3" />
+      <circle cx="18" cy="16" r="3" />
+    </svg>
+  ),
+  profile: (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+      <circle cx="12" cy="7" r="4" />
+    </svg>
+  ),
+};
+
+const ITEMS = [
+  { to: "/home", label: "Home", icon: ICON.home },
+  { to: "/browse", label: "Browse", icon: ICON.browse },
+  { to: "/movies", label: "Movies", icon: ICON.movies },
+  { to: "/schedule", label: "Schedule", icon: ICON.schedule },
+  { to: "/manga", label: "Manga", icon: ICON.manga },
+  { to: "/music", label: "Music", icon: ICON.music },
+  { to: "/home", label: "Profile", icon: ICON.profile, action: "profile" },
+];
+
+export default function MobileNav() {
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
+  const isFullscreen =
+    pathname.startsWith("/watch") ||
+    pathname === "/manga/read" ||
+    pathname.startsWith("/manga/read/") ||
+    /^\/movies\/.+\/watch$/.test(pathname);
+  if (isFullscreen) return null;
+
+  const isActive = (to, action) => {
+    if (action === "profile") return pathname === "/home" || pathname === "/";
+    if (to === "/browse") return pathname === "/browse" || pathname === "/search";
+    return pathname === to;
+  };
+
+  const handleClick = (item) => {
+    if (item.action === "profile") {
+      window.dispatchEvent(new CustomEvent("open-auth-modal"));
+      return;
+    }
+    if (item.to) navigate(item.to);
+  };
+
+  return (
+    <nav className="mobile-nav" aria-label="Mobile navigation">
+      {ITEMS.map(({ to, label, icon, action }) => (
+        <button
+          key={`${label}-${to}`}
+          type="button"
+          onClick={() => handleClick({ to, action })}
+          className={`mobile-nav-item${isActive(to, action) ? " active" : ""}`}
+          aria-label={label}
+        >
+          {icon}
+          <span className="mobile-nav-label">{label}</span>
+        </button>
+      ))}
+    </nav>
+  );
+}

frontend/src/components/MovieCard.jsx

@@ -0,0 +1,59 @@
+import { useNavigate } from "react-router-dom";
+import { api } from "../api.js";
+
+export default function MovieCard({ item, rank = null }) {
+  const navigate = useNavigate();
+  if (!item?.slug) return null;
+  const title = item.title || "Untitled";
+  const comingSoon = item.upcoming || item.badge === "Coming Soon";
+
+  return (
+    <div className="anime-card" onClick={() => navigate(`/movies/${item.slug}`)} title={title}>
+      <div className="card-poster">
+        {item.cover ? (
+          <img src={api.img(item.cover)} alt={title} loading="lazy" />
+        ) : (
+          <div className="skeleton" style={{ width: "100%", height: "100%" }} />
+        )}
+        <div className="card-overlay" />
+        {rank ? <div className="card-rank">{rank}</div> : null}
+        {item.badge ? (
+          <div className={`card-type-badge${comingSoon ? " coming-soon" : ""}`}>{item.badge}</div>
+        ) : null}
+        <div className="card-quick">
+          <div className={`card-quick-btn${comingSoon ? " coming-soon" : ""}`}>
+            {comingSoon ? (
+              <>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 10.59 3.66 2.2-.67 1.11L11 13.02V7h2z" />
+                </svg>
+                Coming Soon
+              </>
+            ) : (
+              <>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                  <polygon points="5 3 19 12 5 21 5 3" />
+                </svg>
+                Watch Now
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="card-body">
+        <div className="card-title" title={title}>{title}</div>
+        <div className="card-meta">
+          {item.rating ? (
+            <span className="card-score">
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+              </svg>
+              {item.rating}
+            </span>
+          ) : null}
+          {item.year ? <span className="card-meta-item">• {item.year}</span> : null}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/MovieRow.jsx

@@ -0,0 +1,41 @@
+import { useRef } from "react";
+import MovieCard from "./MovieCard.jsx";
+
+export default function MovieRow({ title, items = [], isRanked = false }) {
+  const rowRef = useRef(null);
+
+  function scroll(dir) {
+    if (!rowRef.current) return;
+    const scrollAmount = dir === "left" ? -600 : 600;
+    rowRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
+  }
+
+  if (!items || items.length === 0) return null;
+
+  return (
+    <section className="content-section">
+      <div className="container">
+        <div className="section-header">
+          <div className="section-title">{title}</div>
+        </div>
+        <div className="genre-nav-wrap">
+          <button className="row-nav-btn prev" onClick={() => scroll("left")} aria-label="Scroll left">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M15 18l-6-6 6-6" />
+            </svg>
+          </button>
+          <div className="scroll-row" ref={rowRef}>
+            {items.map((item, index) => (
+              <MovieCard key={item.slug || index} item={item} rank={isRanked ? index + 1 : null} />
+            ))}
+          </div>
+          <button className="row-nav-btn next" onClick={() => scroll("right")} aria-label="Scroll right">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M9 18l6-6-6-6" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}

frontend/src/components/Sidebar.jsx

@@ -0,0 +1,116 @@
+import { useEffect, useState } from "react";
+import { Link, NavLink, useNavigate } from "react-router-dom";
+
+const ICONS = {
+  home: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 10.5 12 3l9 7.5" />
+      <path d="M5 9.5V21h14V9.5" />
+    </svg>
+  ),
+  search: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+      <circle cx="11" cy="11" r="7" />
+      <path d="m20 20-3.5-3.5" />
+    </svg>
+  ),
+  book: (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+      <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+    </svg>
+  ),
+};
+
+function NavItem({ to, end, label, icon, onClick }) {
+  return (
+    <NavLink
+      to={to}
+      end={end}
+      className={({ isActive }) => `nav-item${isActive ? " active" : ""}`}
+      onClick={onClick}
+    >
+      <span className="nav-icon">{ICONS[icon]}</span>
+      {label}
+    </NavLink>
+  );
+}
+
+export default function Sidebar() {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const [q, setQ] = useState("");
+
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  function submit(e) {
+    e.preventDefault();
+    if (!q.trim()) return;
+    close();
+    navigate(`/search?q=${encodeURIComponent(q.trim())}`);
+  }
+
+  return (
+    <>
+      <header className="topbar">
+        <span className="mark">◈</span>
+        <span className="topbar-title">anicove</span>
+        <button
+          className={`menu-btn${open ? " active" : ""}`}
+          onClick={() => setOpen((v) => !v)}
+          aria-label="Toggle menu"
+        >
+          <span />
+          <span />
+          <span />
+        </button>
+      </header>
+
+      <div className={`overlay${open ? " open" : ""}`} onClick={close} />
+
+      <aside className={`sidebar${open ? " open" : ""}`}>
+        <div className="logo">
+          <Link to="/home" onClick={close} style={{ display: "flex", alignItems: "center", gap: 10 }}>
+            <span className="mark">◈</span>
+            <span className="logo-text">anicove</span>
+          </Link>
+          <span className="logo-version">v0.1</span>
+        </div>
+
+        <form className="sidebar-search" onSubmit={submit}>
+          {ICONS.search}
+          <input
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            placeholder="Search anime…"
+            aria-label="Search anime"
+          />
+        </form>
+
+        <nav className="nav">
+          <div className="nav-section">
+            <div className="nav-label">Browse</div>
+            <NavItem to="/home" label="Home" icon="home" onClick={close} />
+            <NavItem to="/search" label="Search" icon="search" onClick={close} />
+          </div>
+          <div className="nav-section">
+            <div className="nav-label">Library</div>
+            <NavItem to="/manga" label="Manga" icon="book" onClick={close} />
+          </div>
+        </nav>
+
+        <div className="sidebar-foot">
+          Streaming via <b>Anicove</b> · 13 providers
+          <br />
+          Fallback: <b>Aniraku</b>
+        </div>
+      </aside>
+    </>
+  );
+}

frontend/src/components/Toast.jsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+
+export default function Toast({ message, duration = 3500, onClose }) {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(false);
+      setTimeout(onClose, 300);
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  if (!visible) return null;
+
+  return (
+    <div className="auth-toast">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+        <polyline points="20,6 9,17 4,12" />
+      </svg>
+      {message}
+    </div>
+  );
+}
+
+export function showToast(message, duration = 3500) {
+  const container = document.getElementById('toast-container') || createToastContainer();
+  const toastEl = document.createElement('div');
+  toastEl.className = 'auth-toast';
+  toastEl.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20,6 9,17 4,12"/></svg> ${message}`;
+  container.appendChild(toastEl);
+  setTimeout(() => {
+    toastEl.style.opacity = '0';
+    toastEl.style.transform = 'translateY(16px)';
+    setTimeout(() => toastEl.remove(), 300);
+  }, duration);
+}
+
+function createToastContainer() {
+  const container = document.createElement('div');
+  container.id = 'toast-container';
+  container.style.cssText = 'position:fixed;bottom:24px;right:24px;z-index:99999;display:flex;flex-direction:column;gap:10px;';
+  document.body.appendChild(container);
+  return container;
+}

frontend/src/index.css

@@ -0,0 +1,1072 @@
+/* ANICOVE UI � Complete Design System */
+:root {
+  --bg-base: #080808;
+  --bg-surface: #0d0d0d;
+  --bg-elevated: #111111;
+  --bg-card: #0f0f0f;
+  --bg-card-hover: #1a1a1a;
+  --accent-v: #7c3aed;
+  --accent-v2: #9d6ef8;
+  --accent-c: #5b21b6;
+  --accent-c2: #c4b5fd;
+  --accent-green: #22c55e;
+  --accent-amber: #f59e0b;
+  --grad-accent: linear-gradient(135deg, #7c3aed, #4c1d95);
+  --grad-card: linear-gradient(180deg, transparent 35%, rgba(8,8,8,0.99) 100%);
+  --text-primary: #ffffff;
+  --text-secondary: #777790;
+  --text-muted: #404050;
+  --border: rgba(255,255,255,0.07);
+  --border-bright: rgba(124,58,237,0.5);
+  --glass-border: rgba(255,255,255,0.06);
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --radius-pill: 999px;
+  --shadow-hover: 0 8px 40px rgba(124,58,237,0.35);
+  --transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
+  --header-h: 62px;
+  /* Legacy layout cap keeps the 158px cards visually dense instead of stretching across ultra-wide screens. */
+  --max-w: 1380px;
+}
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+html{scroll-behavior:smooth;scrollbar-width:none}
+::-webkit-scrollbar{display:none}
+body{font-family:'Outfit','Inter',sans-serif;background:
+  radial-gradient(circle at top, rgba(124,58,237,0.22), transparent 32%),
+  linear-gradient(180deg, #06070a 0%, #0b0b12 36%, #08090d 100%);
+  color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}
+#root{min-height:100vh}
+img{display:block;max-width:100%}
+a{color:inherit;text-decoration:none}
+button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}
+ul,ol{list-style:none}
+input{font-family:inherit}
+.container{max-width:var(--max-w);margin:0 auto;padding:0 28px}
+.main-content{position:relative;min-height:100vh;overflow-x:hidden}
+.page-shell{padding-top:calc(var(--header-h) + 30px);padding-bottom:80px}
+.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px 16px}
+.search-shell{display:flex;flex-direction:column;gap:18px}
+.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
+.section-header.compact{margin-bottom:16px}
+
+/* HEADER */
+#header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);transition:var(--transition)}
+#header::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,10,18,0.82), rgba(10,10,18,0.38));backdrop-filter:blur(14px);opacity:0;transition:var(--transition);pointer-events:none}
+#header.scrolled::before,#header:not(.scrolled){opacity:1}
+#header.scrolled{border-bottom:1px solid var(--border);box-shadow:0 12px 28px rgba(0,0,0,0.18)}
+#header .container{height:100%;display:flex;align-items:center;gap:24px;position:relative;z-index:1}
+.logo{display:flex;align-items:center;flex-shrink:0}
+.logo-wordmark{display:flex;align-items:flex-end;line-height:1}
+.logo-wordmark .l{font-family:'Bebas Neue','Outfit',sans-serif;font-size:2.2rem;font-weight:400;line-height:1;color:#fff;letter-spacing:0.02em}
+nav{display:flex;align-items:center;gap:2px}
+nav a{padding:6px 14px;border-radius:var(--radius-pill);font-size:0.88rem;font-weight:500;color:var(--text-secondary);transition:var(--transition)}
+nav a:hover,nav a.active{color:var(--text-primary);background:rgba(139,92,246,0.15)}
+.search-wrap{flex:1;max-width:360px;position:relative}
+.search-input{width:100%;padding:9px 16px 9px 42px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.06);border:1px solid var(--border);color:var(--text-primary);font-size:0.88rem;outline:none;transition:var(--transition)}
+.search-input::placeholder{color:var(--text-muted)}
+.search-input:focus{background:rgba(255,255,255,0.1);border-color:var(--accent-v);box-shadow:0 0 0 3px rgba(139,92,246,0.12)}
+.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted)}
+.search-icon svg{width:16px;height:16px}
+.auth-nav{margin-left:auto;flex-shrink:0}
+.auth-avatar-btn{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.06);border:1px solid var(--border);transition:var(--transition);font-size:0.85rem;font-weight:700;letter-spacing:0.01em;color:var(--text-primary);box-shadow:0 8px 18px rgba(0,0,0,0.12)}
+.auth-avatar-btn:hover{background:rgba(255,255,255,0.1);border-color:var(--border-bright);transform:translateY(-1px)}
+.auth-avatar-btn.open{border-color:var(--border-bright);background:linear-gradient(180deg, rgba(124,58,237,0.18), rgba(255,255,255,0.08));box-shadow:0 12px 30px rgba(124,58,237,0.18)}
+.auth-avatar-btn.guest{background:linear-gradient(135deg, rgba(124,58,237,0.18), rgba(255,255,255,0.08));border-color:rgba(124,58,237,0.42)}
+.auth-avatar-btn.guest:hover{border-color:rgba(124,58,237,0.7);box-shadow:0 12px 32px rgba(124,58,237,0.22)}
+.auth-avatar-circle{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
+.auth-avatar-icon{background:linear-gradient(135deg, rgba(124,58,237,0.26), rgba(255,255,255,0.08));color:var(--accent-v2)}
+.auth-avatar-img{object-fit:cover}
+.auth-nav{position:relative}
+
+@media (max-width: 1024px) {
+  .container {
+    padding: 0 20px;
+  }
+  nav {
+    display: none;
+  }
+  .search-wrap {
+    max-width: 260px;
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 0 16px;
+  }
+  .search-wrap {
+    display: none;
+  }
+  .anime-card {
+    width: 130px;
+  }
+  .hero-next,
+  .hero-prev {
+    display: none !important;
+  }
+  .hero-cover-wrap {
+    display: none;
+  }
+  .home-layout {
+    grid-template-columns: 1fr;
+    gap: 14px;
+  }
+  .home-sidebar {
+    position: static;
+  }
+}
+
+@media (max-width: 680px){
+  .container {
+    padding: 0 16px;
+  }
+  .auth-avatar-btn {
+    gap: 0;
+    padding: 5px 8px 5px 6px;
+    min-width: 42px;
+    justify-content: center;
+  }
+  .auth-avatar-btn span,
+  .auth-avatar-btn svg:last-child{
+    display: none;
+  }
+  .auth-avatar-circle {
+    width: 26px;
+    height: 26px;
+  }
+  .auth-avatar-icon svg {
+    width: 14px;
+    height: 14px;
+  }
+  .main-content {
+    padding-bottom: calc(66px + env(safe-area-inset-bottom));
+  }
+  .home-layout {
+    grid-template-columns: 1fr;
+    gap: 14px;
+  }
+  .spotlight-featured {
+    min-height: 262px;
+    border-radius: 14px;
+  }
+  .spotlight-featured-body {
+    padding: 12px 12px 38px;
+  }
+  .spotlight-featured-title {
+    font-size: 1.28rem;
+    margin-bottom: 4px;
+  }
+  .spotlight-nav-btn {
+    width: 30px;
+    height: 30px;
+    opacity: 1;
+  }
+  .spotlight-nav-btn.prev {
+    left: 8px;
+  }
+  .spotlight-nav-btn.next {
+    right: 8px;
+  }
+  .genre-row-wrap {
+    gap: 8px;
+  }
+  .genre-row {
+    gap: 8px;
+  }
+  .genre-pill {
+    padding: 7px 12px;
+    font-size: 0.74rem;
+  }
+  .section-header {
+    margin-bottom: 14px;
+  }
+  .section-title {
+    font-size: 1.02rem;
+  }
+  .section-title::before {
+    height: 19px;
+  }
+  .scroll-row {
+    gap: 10px;
+  }
+  .anime-card {
+    width: 138px;
+  }
+  .card-body {
+    padding: 8px 9px 10px;
+  }
+  .card-title {
+    font-size: 0.78rem;
+  }
+  .btn {
+    padding: 10px 18px;
+    font-size: 0.85rem;
+  }
+  .btn-sm {
+    padding: 6px 13px;
+    font-size: 0.78rem;
+  }
+}
+
+@media (max-width: 420px) {
+  .anime-card {
+    width: 126px;
+  }
+  .hero-ctas {
+    flex-direction: column;
+  }
+  .hero-cta {
+    width: 100%;
+    justify-content: center;
+  }
+  .spotlight-featured {
+    min-height: 240px;
+  }
+  .auth-dropdown {
+    left: 12px;
+    right: 12px;
+    min-width: 0;
+  }
+}
+
+/* ACCOUNT DROPDOWN */
+.auth-dropdown{position:absolute;top:calc(100% + 10px);right:0;z-index:130;min-width:240px;background:rgba(12,12,20,0.96);backdrop-filter:blur(18px);border:1px solid var(--border-bright);border-radius:var(--radius-lg);box-shadow:0 22px 52px rgba(0,0,0,0.7);padding:10px;animation:fadeUp .18s ease both;overflow:hidden}
+.auth-dropdown-head{padding:12px 12px 10px;border-bottom:1px solid var(--border);margin-bottom:8px;background:linear-gradient(180deg, rgba(124,58,237,0.1), transparent);border-radius:8px 8px 0 0}
+.auth-dropdown-name{font-size:0.9rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.auth-dropdown-sub{font-size:0.72rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.auth-dropdown-item{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;border-radius:var(--radius-md);font-size:0.85rem;font-weight:600;color:var(--text-primary);transition:var(--transition);cursor:pointer;background:none;border:none;text-align:left;margin-top:2px}
+.auth-dropdown-item svg{color:var(--accent-v2);flex-shrink:0}
+.auth-dropdown-item:hover{background:linear-gradient(90deg, rgba(124,58,237,0.16), rgba(255,255,255,0.03));border-color:transparent}
+.auth-dropdown-item.danger{color:#fda4af}
+.auth-dropdown-item.danger svg{color:#fda4af}
+.auth-dropdown-item.danger:hover{background:rgba(225,29,72,0.12)}
+
+/* AUTH MODAL */
+.auth-overlay{position:fixed;inset:0;z-index:200;background:rgba(5,5,10,0.72);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease both}
+.auth-modal{position:relative;width:100%;max-width:400px;background:var(--bg-surface);border:1px solid var(--border-bright);border-radius:var(--radius-lg);padding:30px 28px 26px;box-shadow:0 30px 90px rgba(0,0,0,0.7);animation:fadeUp .22s ease both}
+.auth-modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid var(--border);color:var(--text-secondary);font-size:0.85rem;display:flex;align-items:center;justify-content:center;transition:var(--transition);cursor:pointer}
+.auth-modal-close:hover{background:rgba(255,255,255,0.12);color:#fff}
+.auth-modal-logo{font-family:'Bebas Neue','Outfit',sans-serif;font-size:1.9rem;letter-spacing:0.05em;text-align:center;margin-bottom:20px;color:#fff}
+.auth-tabs{display:flex;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:var(--radius-pill);padding:4px;margin-bottom:20px}
+.auth-tab{flex:1;padding:8px 0;border-radius:var(--radius-pill);font-size:0.84rem;font-weight:700;color:var(--text-secondary);transition:var(--transition);cursor:pointer;background:none;border:none}
+.auth-tab.active{background:var(--grad-accent);color:#fff;box-shadow:0 0 16px rgba(124,58,237,0.4)}
+.auth-form{display:flex;flex-direction:column;gap:14px}
+.auth-field{display:flex;flex-direction:column;gap:6px}
+.auth-field span{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted)}
+.auth-field input{padding:11px 14px;border-radius:var(--radius-md);background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--text-primary);font-size:0.9rem;outline:none;transition:var(--transition)}
+.auth-field input:focus{background:rgba(255,255,255,0.08);border-color:var(--accent-v);box-shadow:0 0 0 3px rgba(139,92,246,0.12)}
+.auth-field input::placeholder{color:var(--text-muted)}
+.auth-error{font-size:0.8rem;font-weight:600;color:#fda4af;background:rgba(225,29,72,0.1);border:1px solid rgba(225,29,72,0.25);border-radius:var(--radius-sm);padding:8px 12px}
+.auth-submit{width:100%;justify-content:center;margin-top:4px}
+.auth-submit:disabled{opacity:0.5;cursor:not-allowed}
+.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--text-muted);font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase}
+.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
+.auth-anilist-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:11px;border-radius:var(--radius-md);background:rgba(6,182,212,0.12);border:1px solid rgba(6,182,212,0.35);color:#67e8f9;font-size:0.86rem;font-weight:700;transition:var(--transition);cursor:pointer}
+.auth-anilist-btn:hover{background:rgba(6,182,212,0.22);border-color:rgba(6,182,212,0.6)}
+
+/* ENHANCED AUTH STYLES */
+.auth-modal-logo-text{font-size:1.4rem;font-weight:900;letter-spacing:.15em;background:linear-gradient(90deg,#fff 60%,#9d5bf0);-webkit-background-clip:text;background-clip:text;color:transparent}
+.auth-input.error{border-color:rgba(248,113,113,.6)}
+.auth-pw-bar{height:3px;border-radius:2px;background:#1e293b;overflow:hidden;margin-top:4px}
+.auth-pw-fill{height:100%;width:0;border-radius:2px;transition:width .3s,background .3s}
+.auth-error{display:none}
+.auth-error.show{display:block}
+.auth-submit-spinner{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}
+.auth-submit.loading .auth-submit-text{display:none}
+.auth-submit.loading .auth-submit-spinner{display:block}
+.auth-switch{text-align:center;font-size:0.8rem;color:#475569;margin-top:4px}
+.auth-switch a{color:#9d5bf0;font-weight:600;cursor:pointer;text-decoration:none}
+.auth-switch a:hover{text-decoration:underline}
+.auth-toast{position:fixed;bottom:24px;right:24px;z-index:99999;background:#0f172a;border:1px solid rgba(74,222,128,.3);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:10px;color:#86efac;font-size:0.85rem;font-weight:600;box-shadow:0 10px 40px rgba(0,0,0,.5);animation:slideUp .3s ease}
+@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
+.auth-recaptcha-terms{margin-top:24px;text-align:center;font-size:0.65rem;color:#475569;line-height:1.4}
+.auth-recaptcha-terms a{color:#64748b;text-decoration:underline;transition:color .2s}
+.auth-recaptcha-terms a:hover{color:#9d5bf0}
+.grecaptcha-badge{visibility:hidden!important}
+
+/* BUTTONS */
+.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:var(--radius-pill);font-size:0.9rem;font-weight:600;transition:var(--transition);white-space:nowrap;cursor:pointer;border:none}
+.btn-primary{background:var(--grad-accent);color:#fff;box-shadow:0 0 22px rgba(124,58,237,0.35)}
+.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 30px rgba(124,58,237,0.55)}
+.btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none}
+.btn-ghost{background:rgba(255,255,255,0.07);color:var(--text-primary);border:1px solid var(--border)}
+.btn-ghost:hover{background:rgba(255,255,255,0.12);border-color:var(--border-bright)}
+.btn-ghost:disabled{opacity:0.4;cursor:not-allowed}
+.btn-sm{padding:7px 16px;font-size:0.82rem}
+
+/* BADGES */
+.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-pill);font-size:0.72rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase}
+.badge-score{background:rgba(245,158,11,0.15);color:#fcd34d;border:1px solid rgba(245,158,11,0.3)}
+.badge-green{background:rgba(34,197,94,0.15);color:#4ade80;border:1px solid rgba(34,197,94,0.3)}
+.badge-dark{background:rgba(255,255,255,0.07);color:var(--text-secondary);border:1px solid var(--border)}
+
+/* SECTION HEADERS */
+.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
+.section-title{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:700}
+.section-title::before{content:'';display:block;width:4px;height:22px;background:var(--grad-accent);border-radius:2px}
+.section-link{font-size:0.84rem;font-weight:500;color:var(--accent-v2);display:flex;align-items:center;gap:4px;transition:var(--transition)}
+.section-link:hover{color:var(--accent-c2);gap:8px}
+
+/* ANIME CARD */
+.anime-card{position:relative;flex-shrink:0;width:158px;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);cursor:pointer;transition:var(--transition);border:1px solid var(--border)}
+.anime-card:hover{transform:translateY(-6px) scale(1.02);border-color:var(--border-bright);box-shadow:var(--shadow-hover)}
+.card-poster{position:relative;aspect-ratio:2/3;overflow:hidden}
+.card-poster img{width:100%;height:100%;object-fit:cover;transition:transform 0.45s ease}
+.anime-card:hover .card-poster img{transform:scale(1.05)}
+.card-overlay{position:absolute;inset:0;background:var(--grad-card);opacity:0;transition:var(--transition)}
+.anime-card:hover .card-overlay{opacity:1}
+.card-quick{position:absolute;bottom:8px;left:8px;right:8px;opacity:0;transform:translateY(8px);transition:var(--transition)}
+.anime-card:hover .card-quick{opacity:1;transform:translateY(0)}
+.card-quick-btn{width:100%;padding:7px;border-radius:var(--radius-sm);background:var(--grad-accent);color:#fff;font-size:0.78rem;font-weight:600;text-align:center}
+.card-body{padding:10px 10px 12px}
+.card-title{font-size:0.84rem;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px}
+.card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.card-score{font-size:0.72rem;font-weight:700;color:#6ee7b7}
+.card-meta-item{font-size:0.7rem;color:var(--text-muted)}
+
+/* SCROLL ROW */
+.scroll-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 0;scrollbar-width:thin;scrollbar-color:var(--accent-v) transparent}
+.scroll-row::-webkit-scrollbar{height:4px;display:block}
+.scroll-row::-webkit-scrollbar-thumb{background:var(--accent-v);border-radius:99px}
+.scroll-row .anime-card{scroll-snap-align:start}
+
+/* SKELETON */
+.skeleton{background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--bg-card-hover) 50%,var(--bg-elevated) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}
+.skel-card{width:158px;flex-shrink:0}
+.skel-poster{width:100%;aspect-ratio:2/3;border-radius:var(--radius-md) var(--radius-md) 0 0}
+.skel-line{height:11px;margin:8px 10px;border-radius:6px}
+.skel-line-sm{width:55%}
+@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
+@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
+@keyframes fadeIn{from{opacity:0}to{opacity:1}}
+@keyframes spin{to{transform:rotate(360deg)}}
+@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
+@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
+.spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--accent-v);border-radius:50%;animation:spin 0.7s linear infinite}
+.loader{display:flex;justify-content:center;align-items:center;padding:60px;flex-direction:column;gap:12px;color:var(--text-muted)}
+
+/* HOME HERO */
+.home-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:calc(var(--header-h) + 40px) 20px 60px;text-align:center;background:radial-gradient(circle at 20% 15%, rgba(124,58,237,0.26), transparent 22%), radial-gradient(circle at 80% 18%, rgba(139,92,246,0.18), transparent 18%);}
+.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 15% 50%,rgba(88,28,235,0.35) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 85% 50%,rgba(88,28,235,0.15) 0%,transparent 60%);pointer-events:none}
+.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:var(--radius-pill);background:rgba(124,58,237,0.12);border:1px solid rgba(124,58,237,0.3);font-size:0.75rem;font-weight:700;letter-spacing:0.1em;color:var(--accent-v2);margin-bottom:32px;animation:fadeUp 0.5s ease both;box-shadow:0 14px 32px rgba(124,58,237,0.12)}
+.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-v)}
+.hero-logo-text{font-family:'Rubik Dirt','Bebas Neue',sans-serif;font-size:clamp(5rem,16vw,14rem);font-weight:400;line-height:0.9;margin-bottom:16px;background:linear-gradient(180deg,#fff 40%,rgba(200,180,255,0.72) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeUp 0.6s ease 0.1s both;text-shadow:0 0 26px rgba(124,58,237,0.18)}
+.hero-logo-e{display:inline-block}
+.hero-subtitle{font-size:clamp(1.4rem,3.5vw,2.4rem);font-weight:700;color:var(--text-secondary);margin-bottom:14px;animation:fadeUp 0.6s ease 0.2s both}
+.hero-desc{font-size:1rem;color:var(--text-secondary);max-width:500px;margin:0 auto 32px;line-height:1.7;animation:fadeUp 0.6s ease 0.25s both}
+.hero-desc strong{color:var(--text-primary)}
+.hero-filters{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:24px;animation:fadeUp 0.6s ease 0.3s both;flex-wrap:wrap}
+.hero-filter-pill{padding:7px 20px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.06);border:1px solid var(--border);font-size:0.86rem;font-weight:500;color:var(--text-secondary);transition:var(--transition);cursor:pointer}
+.hero-filter-pill.active{background:var(--accent-v);border-color:var(--accent-v);color:#fff}
+.hero-filter-pill:hover:not(.active){border-color:var(--border-bright);color:var(--text-primary)}
+.hero-search-wrap{position:relative;width:min(620px,100%);margin:0 auto 28px;animation:fadeUp 0.6s ease 0.35s both}
+.hero-search-input{width:100%;padding:16px 60px 16px 22px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);color:var(--text-primary);font-size:0.95rem;outline:none;transition:var(--transition)}
+.hero-search-input::placeholder{color:var(--text-muted)}
+.hero-search-input:focus{background:rgba(255,255,255,0.1);border-color:var(--accent-v);box-shadow:0 0 0 4px rgba(124,58,237,0.15)}
+.hero-search-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:var(--accent-v);color:#fff;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
+.hero-search-btn:hover{background:var(--accent-v2);transform:translateY(-50%) scale(1.08)}
+.hero-search-btn svg{width:18px;height:18px}
+.hero-popular{margin-bottom:36px;animation:fadeUp 0.6s ease 0.4s both}
+.hero-popular-label{font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
+.hero-popular-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
+.hero-popular-tag{padding:6px 16px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.05);border:1px solid var(--border);font-size:0.82rem;font-weight:500;color:var(--text-secondary);transition:var(--transition);cursor:pointer}
+.hero-popular-tag:hover{background:rgba(124,58,237,0.12);border-color:var(--border-bright);color:var(--accent-v2)}
+.hero-ctas{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:52px;animation:fadeUp 0.6s ease 0.45s both}
+.hero-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:var(--radius-pill);font-size:0.9rem;font-weight:700;transition:var(--transition);cursor:pointer;border:1px solid transparent}
+.hero-cta-anime{background:var(--grad-accent);color:#fff;box-shadow:0 0 28px rgba(124,58,237,0.4)}
+.hero-cta-anime:hover{transform:translateY(-2px);box-shadow:0 6px 36px rgba(124,58,237,0.55)}
+.hero-cta-manga{background:rgba(255,255,255,0.07);border-color:var(--border);color:var(--text-primary)}
+.hero-cta-manga:hover{background:rgba(255,255,255,0.12);border-color:var(--border-bright)}
+.hero-cta-movies{background:rgba(6,182,212,0.15);border-color:rgba(6,182,212,0.4);color:#67e8f9}
+.hero-cta-movies:hover{background:rgba(6,182,212,0.25);transform:translateY(-2px)}
+.hero-cta-music{background:rgba(139,92,246,0.18);border-color:rgba(139,92,246,0.4);color:#a78bfa}
+.hero-cta-music:hover{background:rgba(139,92,246,0.28);transform:translateY(-2px)}
+.hero-stats{display:flex;align-items:center;justify-content:center;animation:fadeUp 0.6s ease 0.5s both}
+.hero-stat{padding:0 36px;text-align:center;position:relative}
+.hero-stat+.hero-stat::before{content:'';position:absolute;left:0;top:15%;bottom:15%;width:1px;background:var(--border)}
+.hero-stat-val{font-size:1.6rem;font-weight:800;letter-spacing:-0.02em;margin-bottom:2px}
+.hero-stat-label{font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted)}
+.scroll-indicator{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:var(--text-muted);animation:bounce 2s ease infinite}
+
+/* LIBRARY MARQUEE */
+.library-section{padding:60px 0;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
+.library-header{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:28px}
+.library-header-line{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--border-bright));max-width:200px}
+.library-header-line.right{background:linear-gradient(to left,transparent,var(--border-bright))}
+.library-header-text{font-size:0.7rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted)}
+.marquee-track{overflow:hidden}
+.marquee-row{display:flex;gap:10px;width:max-content;animation:marquee 30s linear infinite;margin-bottom:10px}
+.marquee-row.reverse{animation:marquee 35s linear infinite reverse}
+.marquee-row:last-child{margin-bottom:0}
+.marquee-poster{width:100px;height:140px;flex-shrink:0;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);transition:var(--transition);cursor:pointer}
+.marquee-poster:hover{border-color:var(--border-bright);transform:scale(1.04)}
+.marquee-poster img{width:100%;height:100%;object-fit:cover}
+
+/* FEATURE SECTION */
+.feature-section{padding:80px 0}
+.feature-eyebrow{font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-v2);margin-bottom:16px}
+.feature-heading{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1.15;margin-bottom:20px}
+.feature-heading .accent{color:var(--accent-v2)}
+.feature-desc{font-size:1rem;color:var(--text-secondary);line-height:1.75;max-width:480px;margin-bottom:40px}
+.feature-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;max-width:560px}
+.feature-card-icon{width:44px;height:44px;border-radius:var(--radius-md);background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.3);display:flex;align-items:center;justify-content:center;color:var(--accent-v2);margin-bottom:16px}
+.feature-card-eyebrow{font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-v2);margin-bottom:6px}
+.feature-card-title{font-size:1.1rem;font-weight:800;margin-bottom:8px}
+.feature-card-desc{font-size:0.88rem;color:var(--text-secondary);line-height:1.7;margin-bottom:16px}
+.feature-track-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-elevated);border-radius:var(--radius-md);margin-bottom:8px}
+.feature-track-name{font-size:0.88rem;font-weight:600}
+.feature-track-sub{font-size:0.75rem;color:var(--text-muted)}
+.feature-track-badge{margin-left:auto;font-size:0.72rem;font-weight:700;color:var(--accent-green)}
+.content-section{padding:40px 0}
+/* Pages whose first section sits directly under the fixed header (Home) */
+.content-section:first-child{padding-top:calc(var(--header-h) + 26px)}
+.section-sub-label{font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted)}
+
+/* DETAILS PAGE */
+.info-hero{position:relative;min-height:520px;overflow:hidden;display:flex;align-items:flex-end;padding-top:var(--header-h);background:#0a0a0a}
+.info-hero::before,
+.info-hero::after{content:'';position:absolute;inset:0;pointer-events:none}
+.info-hero::before{background:radial-gradient(120% 80% at 30% 30%, rgba(0,0,0,0.25), rgba(0,0,0,0.85) 70%, #0a0a0a 100%)}
+.info-hero::after{background:linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,0.85) 80%, var(--bg-base) 100%)}
+.info-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.05);filter:brightness(0.55)}
+.info-hero-inner{position:relative;z-index:2;display:flex;gap:36px;padding:96px 28px 56px;align-items:flex-end}
+.info-poster{flex:0 0 240px;width:240px;aspect-ratio:2/3;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.06);background:#111;border:1px solid rgba(255,255,255,0.06)}
+.info-poster img{width:100%;height:100%;object-fit:cover;display:block}
+.info-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px}
+.info-eyebrow{display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,0.7);font-size:0.78rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase}
+.info-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-v);box-shadow:0 0 12px var(--accent-v)}
+.info-title{font-family:'Poppins','Inter',sans-serif;font-size:clamp(1.8rem,3.6vw,3.2rem);font-weight:900;line-height:1.05;color:#fff;margin:0;text-shadow:0 6px 28px rgba(0,0,0,0.6)}
+.info-subtitle{font-size:0.95rem;color:rgba(255,255,255,0.65);font-weight:500;margin-top:-6px}
+.info-meta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;color:rgba(255,255,255,0.85);font-size:0.85rem;font-weight:600}
+.meta-pill{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px)}
+.meta-score{color:#fbbf24}
+.meta-status-airing{color:#22c55e}
+.info-genres{display:flex;gap:8px;flex-wrap:wrap}
+.info-genre-tag{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);padding:5px 12px;border-radius:999px;font-size:0.72rem;font-weight:600;color:rgba(255,255,255,0.85);cursor:pointer;transition:all 0.2s ease}
+.info-genre-tag:hover{background:rgba(255,255,255,0.12);transform:translateY(-1px)}
+.info-cta{display:flex;gap:12px;margin-top:4px;flex-wrap:wrap}
+.btn-watch{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:12px;background:linear-gradient(135deg, var(--accent-v) 0%, var(--accent-v2) 100%);color:#fff;font-weight:800;font-size:0.95rem;letter-spacing:0.04em;text-decoration:none;border:none;cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease;box-shadow:0 12px 30px rgba(124,58,237,0.35)}
+.btn-watch:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(124,58,237,0.5)}
+.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:12px;background:rgba(255,255,255,0.08);color:#fff;font-weight:700;font-size:0.9rem;text-decoration:none;border:1px solid rgba(255,255,255,0.1);cursor:pointer;transition:background 0.2s ease}
+.btn-secondary:hover{background:rgba(255,255,255,0.14)}
+.info-body{padding:40px 28px 80px}
+.info-section{margin-bottom:48px}
+.info-section-title{display:flex;align-items:center;gap:12px;font-family:'Poppins','Inter',sans-serif;font-size:1.3rem;font-weight:800;color:#fff;margin:0 0 18px}
+.info-section-title::before{content:'';width:4px;height:22px;border-radius:4px;background:var(--accent-v)}
+.info-grid-2{display:grid;grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);gap:32px;align-items:flex-start}
+.info-desc{font-size:0.96rem;line-height:1.75;color:rgba(255,255,255,0.78);margin:0;position:relative;max-height:22em;overflow:hidden;transition:max-height .3s ease}
+.info-desc.expanded{max-height:200em}
+.info-desc::after{content:'';position:absolute;inset:auto 0 0 0;height:3em;background:linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, var(--bg-base) 100%);pointer-events:none;transition:opacity 0.3s ease}
+.info-desc.expanded::after{opacity:0}
+.info-desc-toggle{display:inline-block;margin-top:8px;color:var(--accent-v2);font-weight:700;font-size:0.85rem;cursor:pointer;background:none;border:none;padding:0}
+.info-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:22px}
+.info-stat-row{display:flex;flex-direction:column;gap:4px}
+.info-stat-row .label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.45)}
+.info-stat-row .value{font-size:0.95rem;font-weight:700;color:#fff}
+.info-tags{display:flex;flex-wrap:wrap;gap:6px}
+.info-tag{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);padding:4px 10px;border-radius:6px;font-size:0.72rem;font-weight:600;color:rgba(255,255,255,0.7)}
+@media (max-width: 880px) {
+  .info-hero-inner{flex-direction:column;align-items:center;text-align:center;padding:80px 22px 40px;gap:24px}
+  .info-poster{flex:0 0 180px;width:180px}
+  .info-meta-row,.info-genres,.info-cta{justify-content:center}
+  .info-grid-2{grid-template-columns:1fr}
+  .info-hero{min-height:auto}
+  .info-body{padding:32px 22px 80px}
+}
+@media (max-width: 540px) {
+  .info-hero-inner{padding:72px 20px 36px}
+  .info-poster{flex:0 0 150px;width:150px}
+  .btn-watch{padding:12px 22px;font-size:0.88rem}
+  .info-body{padding:28px 20px 80px}
+}
+
+/* NEXT-EPISODE COUNTDOWN */
+.countdown-wrap{display:inline-flex;flex-direction:column;gap:10px;padding:14px 18px;margin-bottom:22px;border-radius:var(--radius-md);background:rgba(124,58,237,0.08);border:1px solid rgba(124,58,237,0.3);backdrop-filter:blur(8px);width:fit-content}
+.countdown-label{font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-v2)}
+.countdown-cards{display:flex;gap:8px}
+.countdown-cell{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;padding:8px 6px;border-radius:var(--radius-sm);background:rgba(8,8,8,0.6);border:1px solid var(--border-bright)}
+.countdown-num{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:#fff}
+.countdown-unit{font-size:0.6rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted)}
+.info-genre-pill{padding:5px 14px;background:rgba(255,255,255,0.07);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:0.8rem;font-weight:500;color:var(--text-secondary);transition:var(--transition);cursor:pointer}
+.info-genre-pill:hover{border-color:var(--border-bright);color:var(--accent-v2)}
+.info-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
+.info-btn-watch{background:var(--grad-accent);color:#fff;box-shadow:0 0 24px rgba(124,58,237,0.35)}
+.info-btn-watch:hover{transform:translateY(-2px);box-shadow:0 6px 32px rgba(124,58,237,0.55)}
+.info-btn-ghost{background:rgba(255,255,255,0.08);color:var(--text-primary);border:1px solid var(--border)}
+.info-btn-ghost:hover{background:rgba(255,255,255,0.14);border-color:var(--border-bright)}
+.info-body{padding:44px 0 80px}
+.info-layout{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}
+.info-section-label{font-size:1.15rem;font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:16px}
+.info-section-label::before{content:'';width:4px;height:20px;background:var(--grad-accent);border-radius:2px}
+.info-synopsis{font-size:0.93rem;color:var(--text-secondary);line-height:1.8;margin-bottom:8px}
+.info-synopsis.clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
+.show-more-btn{color:var(--accent-v2);font-size:0.88rem;font-weight:600;display:inline-flex;align-items:center;gap:4px;transition:var(--transition);margin-top:8px;cursor:pointer;background:none;border:none}
+.show-more-btn:hover{color:var(--accent-c2)}
+.info-tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 32px}
+.info-tag{padding:5px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:0.78rem;font-weight:500;color:var(--text-secondary);transition:var(--transition);cursor:pointer}
+.info-tag:hover{border-color:var(--border-bright);color:var(--accent-v2)}
+.info-stats-grid{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
+.info-stat-cell{padding:18px 20px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
+.info-stat-cell:nth-child(2n){border-right:none}
+.info-stat-cell:nth-last-child(-n+2){border-bottom:none}
+.info-stat-label{font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
+.info-stat-value{font-size:0.95rem;font-weight:700}
+.char-row{display:flex;gap:16px;overflow-x:auto;padding:4px 0 12px}
+.char-card{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;cursor:pointer}
+.char-avatar{width:80px;height:80px;border-radius:50%;overflow:hidden;border:2px solid var(--border);transition:var(--transition)}
+.char-avatar img{width:100%;height:100%;object-fit:cover}
+.char-card:hover .char-avatar{border-color:var(--border-bright);transform:scale(1.06)}
+.char-name{font-size:0.78rem;font-weight:600;text-align:center;max-width:84px;line-height:1.3}
+.char-role{font-size:0.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em}
+
+/* WATCH PAGE */
+.watch-page{padding-top:var(--header-h)}
+.watch-container{padding:0 28px 80px;max-width:var(--max-w);margin:0 auto}
+.watch-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start;padding-top:12px}
+.watch-main{min-width:0}
+.watch-sidebar-col{min-width:0}
+.player-wrapper{position:relative;width:100%;aspect-ratio:16/9;background:#080a12;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
+.player-wrapper iframe,.player-wrapper video,.player-wrapper .custom-player{width:100%;height:100%;border:none;display:block}
+.player-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--text-muted);background:rgba(7,10,18,0.95)}
+.player-wrap.theater-mode{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center}
+.player-wrap.theater-mode .custom-player{width:100%;height:100%;max-width:100%;max-height:100%;border-radius:0}
+@media(max-width:680px){.auth-nav{display:none}}
+.player-placeholder svg{width:52px;height:52px;opacity:0.3}
+.player-placeholder span{font-size:0.9rem;font-weight:500}
+.player-error-box{color:#f43f5e}
+.server-warning{display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(245,158,11,0.07);border:1px solid rgba(245,158,11,0.2);border-radius:var(--radius-md);margin:10px 0;font-size:0.83rem;color:#fcd34d}
+.server-warning-close{margin-left:auto;opacity:0.5;transition:var(--transition);font-size:1.1rem;line-height:1;cursor:pointer;border:none;background:none;color:inherit}
+.server-warning-close:hover{opacity:1}
+.watch-warn-banner{display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.2);border-radius:12px;margin:10px 0 14px;font-size:0.83rem;color:#fcd34d}
+.wwb-icon{width:16px;height:16px;flex-shrink:0}
+.wwb-text{display:block;flex:1}
+.wwb-close{margin-left:auto;border:none;background:none;color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
+.wwb-close svg{width:16px;height:16px}
+.kv-prefs-bar{display:flex;align-items:center;gap:18px;padding:11px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;margin:10px 0;flex-wrap:wrap}
+.kv-pref-btn{display:flex;align-items:center;gap:8px;padding:0;background:none;border:none;color:var(--text-secondary);font-size:0.82rem;font-weight:600;cursor:pointer}
+.kv-pref-btn svg{opacity:0.8}
+.kv-pref-pill{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid var(--border);margin-left:4px}
+.kv-pref-knob{position:absolute;left:3px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.4)}
+.kv-pref-btn.on{color:var(--text-primary)}.kv-pref-btn.on svg{color:var(--accent-v2)}.kv-pref-pill.on{background:var(--accent-v);border-color:var(--accent-v)}.kv-pref-pill.on .kv-pref-knob{left:19px}.kv-pref-knob{transition:left .18s ease}.action-btn.is-active{color:var(--accent-v2);border-color:rgba(124,58,237,.45);background:rgba(124,58,237,.12)}
+.kv-prefs-sep{width:1px;height:16px;background:rgba(255,255,255,0.08)}
+.watch-player-info{padding-top:14px}
+.watch-ep-label{font-size:0.72rem;font-weight:800;color:var(--accent-v2);letter-spacing:0.12em;text-transform:uppercase;margin:0 0 8px}
+.watch-ep-title{font-size:1.45rem;font-weight:800;line-height:1.25;margin:0 0 8px}
+.watch-filler-warn{color:#facc15;font-size:0.82rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-top:8px}
+.action-bar{display:flex;align-items:center;gap:12px;padding:14px 0 18px;border-bottom:1px solid var(--border);margin-bottom:18px}
+.action-anime{display:flex;align-items:center;gap:12px;min-width:0;flex:1;text-decoration:none;color:inherit}
+.aa-poster{width:52px;height:52px;border-radius:10px;overflow:hidden;flex-shrink:0;border:1px solid rgba(255,255,255,0.08)}
+.aa-poster img{width:100%;height:100%;object-fit:cover;display:block}
+.aa-info{min-width:0;display:flex;flex-direction:column;gap:4px}
+.aa-name{font-size:0.94rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.aa-meta{font-size:0.72rem;color:var(--text-muted)}
+.action-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
+.audio-toggle{display:flex;align-items:center;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:999px;padding:4px;gap:4px}
+.audio-btn{padding:6px 12px;border-radius:999px;font-size:0.78rem;font-weight:700;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;transition:var(--transition)}
+.audio-btn.active{background:var(--accent-v);border-color:var(--accent-v);color:#fff}
+.audio-btn:disabled{opacity:0.5;cursor:not-allowed}
+.action-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid var(--border);color:var(--text-primary);font-weight:700;font-size:0.8rem;cursor:pointer;transition:var(--transition)}
+.action-btn svg{width:15px;height:15px}
+.action-btn:hover,.audio-btn:not(.active):hover{border-color:var(--border-bright)}
+.audio-lang-selected{font-size:0.78rem;color:var(--text-muted)}
+.server-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin:10px 0 0;box-shadow:0 20px 40px rgba(0,0,0,0.24)}
+.server-panel.is-hidden{display:none}
+.server-panel-row{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
+.server-group{display:flex;flex-direction:column;gap:10px;flex:1;min-width:180px}
+.server-group-toggle{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text-primary);font-weight:700;cursor:pointer}
+.sg-icon{flex-shrink:0}
+.sg-label{flex:1;text-align:left}
+.sg-count{font-size:0.72rem;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,0.08);color:var(--text-muted)}
+.server-btn-row{display:flex;gap:8px;flex-wrap:wrap;padding-left:2px}
+.server-option{padding:7px 12px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,0.03);color:var(--text-secondary);font-size:0.78rem;font-weight:600;cursor:pointer}
+.server-option.selected{background:rgba(124,58,237,0.16);border-color:rgba(124,58,237,0.42);color:var(--text-primary)}
+.server-quality-wrap{margin-left:auto}
+.server-quality-select{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,0.04);color:var(--text-primary)}
+.server-loading,.server-error{display:flex;align-items:center;gap:8px;padding-top:12px;font-size:0.8rem;color:var(--text-muted)}
+.server-loading-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-v);display:inline-block;animation:pulse 1.3s ease-in-out infinite}
+@keyframes pulse{0%,100%{opacity:0.45;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}
+.watch-desc-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-top:18px}
+.watch-sidebar{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;position:sticky;top:calc(var(--header-h) + 12px);max-height:calc(100vh - var(--header-h) - 24px);display:flex;flex-direction:column}
+.up-next-header{padding:14px 14px 0}
+.un-info{display:flex;flex-direction:column;gap:3px}
+.un-title{font-size:1rem;font-weight:800}
+.un-subtitle{font-size:0.76rem;color:var(--accent-v2)}
+.next-ep-strip{padding:12px 14px 0}
+.next-ep-pill{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(124,58,237,0.08);border:1px solid rgba(124,58,237,0.22);color:var(--text-primary)}
+.nep-bell{width:15px;height:15px}
+.nep-label{font-size:0.72rem;font-weight:700;color:var(--text-muted);letter-spacing:0.08em;text-transform:uppercase}
+.nep-units{display:flex;align-items:flex-end;gap:8px}
+.nec-unit{display:flex;align-items:flex-end;gap:2px;font-weight:800;color:#fff}
+.nec-num{font-size:0.9rem}
+.nec-u{font-size:0.6rem;color:var(--text-muted)}
+.ep-search-wrap{padding:12px 14px 0}
+.ep-search-input{width:100%;padding:9px 12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-size:0.82rem;outline:none}
+.ep-search-input::placeholder{color:var(--text-muted)}
+.ep-view-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px}
+.ep-view-bar-label{font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted)}
+.ep-view-toggle-btn{padding:5px 9px;border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.ep-view-toggle-btn:hover{color:var(--text-primary);border-color:var(--border-bright)}
+.ep-list{flex:1;overflow-y:auto;padding:0 8px 12px;scrollbar-width:thin;scrollbar-color:var(--accent-v) transparent}
+.ep-list::-webkit-scrollbar{width:3px;display:block}
+.ep-list::-webkit-scrollbar-thumb{background:var(--accent-v);border-radius:99px}
+.ep-list.compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:7px;align-content:start}.ep-list.compact .ep-item{justify-content:center;margin:0;padding:9px 5px}.ep-list.compact .ep-thumb{width:auto;height:auto;background:transparent;overflow:visible}.ep-list.compact .ep-thumb img,.ep-list.compact .ep-info{display:none}.ep-list.compact .ep-thumb-label{position:static;background:transparent;padding:0;color:var(--text-secondary);font-size:.76rem}.ep-list.compact .ep-item.active .ep-thumb-label{color:var(--accent-v2)}
+.ep-item{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;cursor:pointer;transition:var(--transition);margin-bottom:2px;border:1px solid transparent}
+.ep-item:hover{background:rgba(255,255,255,0.035)}
+.ep-item.active{background:rgba(124,58,237,0.12);border-color:rgba(124,58,237,0.25)}
+.ep-thumb{width:72px;height:46px;flex-shrink:0;background:var(--bg-elevated);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:0.68rem;font-weight:700;color:var(--text-muted);position:relative}
+.ep-thumb img{width:100%;height:100%;object-fit:cover}
+.ep-thumb-label{position:absolute;bottom:3px;left:3px;background:rgba(0,0,0,0.7);color:#fff;font-size:0.62rem;font-weight:700;padding:1px 5px;border-radius:4px}
+.ep-info{flex:1;min-width:0}
+.ep-info-title{font-size:0.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
+.ep-info-sub{font-size:0.7rem;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ep-watched-badge{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#22c55e;color:#fff;font-size:0.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,0.4)}
+.ep-item.watched{opacity:0.7}
+.ep-item.watched:hover{opacity:1}
+.season-selector{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
+.season-label{font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted)}
+.season-options{display:flex;gap:6px;flex-wrap:wrap}
+.season-btn{padding:6px 12px;border-radius:8px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text-secondary);font-size:0.76rem;font-weight:600;cursor:pointer;transition:var(--transition)}
+.season-btn:hover{border-color:var(--border-bright);color:var(--text-primary)}
+.season-btn.active{background:var(--accent-v);border-color:var(--accent-v);color:#fff;box-shadow:0 0 12px rgba(124,58,237,0.35)}
+.movie-quality-bar{display:flex;align-items:center;gap:12px;padding:12px 0;margin-top:8px}
+.movie-quality-label{font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted)}
+.movie-quality-options{display:flex;gap:8px;flex-wrap:wrap}
+.movie-quality-btn{padding:6px 14px;border-radius:8px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text-secondary);font-size:0.76rem;font-weight:600;cursor:pointer;transition:var(--transition)}
+.movie-quality-btn:hover{border-color:var(--border-bright);color:var(--text-primary)}
+.movie-quality-btn.active{background:var(--accent-v);border-color:var(--accent-v);color:#fff;box-shadow:0 0 12px rgba(124,58,237,0.35)}
+.watch-anime-row{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;margin:16px 0}
+.watch-anime-thumb{width:48px;height:48px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--bg-elevated)}
+.watch-anime-thumb img{width:100%;height:100%;object-fit:cover}
+.watch-anime-name{font-size:0.9rem;font-weight:700;color:var(--text-primary)}
+.watch-anime-sub-text{font-size:0.75rem;color:var(--text-muted);margin-top:2px}
+.watch-audio-btns{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
+.audio-notice{display:flex;align-items:center;gap:10px;padding:9px 14px;background:rgba(124,58,237,0.08);border:1px solid rgba(124,58,237,0.28);border-radius:var(--radius-md);margin:12px 0;font-size:0.83rem;font-weight:500;color:var(--accent-c2);animation:fadeUp .2s ease both}
+.audio-notice svg{flex-shrink:0;color:var(--accent-v2)}
+.audio-notice .server-warning-close{margin-left:auto;color:var(--text-muted)}
+
+@media (max-width: 1024px){
+  .watch-layout{grid-template-columns:1fr}
+  .watch-sidebar{position:static;max-height:540px}
+}
+@media (max-width: 680px){
+  .watch-container{padding:0 12px 60px}
+  .watch-layout{gap:12px;padding-top:8px}
+  .watch-warn-banner{padding:10px 12px}
+  .action-bar{flex-wrap:wrap;border-bottom:none;padding-bottom:8px}
+  .action-anime{width:100%}
+  .action-buttons{width:100%;justify-content:flex-start}
+  .watch-ep-title{font-size:1.15rem}
+  .watch-desc-card{padding:14px 16px}
+  .watch-sidebar{position:static;max-height:420px}
+  .ep-thumb{width:64px;height:40px}
+  .aa-poster{width:44px;height:44px}
+}
+
+/* MOVIES & TV */
+.movie-search-wrap{position:relative}
+.movie-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
+.movie-tabs button{padding:8px 20px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.06);border:1px solid var(--border);font-size:0.86rem;font-weight:600;color:var(--text-secondary);transition:var(--transition);cursor:pointer}
+.movie-tabs button:hover{border-color:var(--border-bright);color:var(--text-primary)}
+.movie-tabs button.active{background:var(--accent-v);border-color:var(--accent-v);color:#fff;box-shadow:0 0 18px rgba(124,58,237,0.35)}
+.movie-sort{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 24px}
+.movie-sort-label{font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-right:6px}
+.movie-sort button{padding:5px 13px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.04);border:1px solid var(--border);font-size:0.76rem;font-weight:600;color:var(--text-secondary);transition:var(--transition);cursor:pointer}
+.movie-sort button:hover{border-color:var(--border-bright);color:var(--text-primary)}
+.movie-sort button.active{background:rgba(124,58,237,0.18);border-color:rgba(124,58,237,0.5);color:var(--accent-c2)}
+.movie-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--bg-elevated);border:1px solid var(--border-bright);border-radius:var(--radius-md);box-shadow:0 18px 50px rgba(0,0,0,0.6);overflow:hidden;max-height:320px;overflow-y:auto}
+.movie-suggest-item{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;font-size:0.88rem;color:var(--text-secondary);transition:var(--transition);cursor:pointer;text-align:left;background:none;border:none;border-bottom:1px solid var(--border)}
+.movie-suggest-item:last-child{border-bottom:none}
+.movie-suggest-item:hover{background:rgba(124,58,237,0.12);color:var(--text-primary)}
+.movie-suggest-item svg{color:var(--accent-v2);flex-shrink:0}
+.load-more-wrap{display:flex;justify-content:center;margin-top:36px}
+.load-more-btn{min-width:220px;justify-content:center}
+
+/* MOVIE DETAILS */
+.cast-row{display:flex;gap:16px;overflow-x:auto;padding:8px 0 20px;scrollbar-width:thin;scrollbar-color:var(--accent-v) transparent}
+.cast-row::-webkit-scrollbar{height:4px}
+.cast-row::-webkit-scrollbar-thumb{background:var(--accent-v);border-radius:99px}
+.cast-chip{flex-shrink:0;width:110px;text-align:center;cursor:default;transition:var(--transition)}
+.cast-chip:hover{transform:translateY(-4px)}
+.cast-chip img{width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto 10px;border:2px solid var(--border);transition:var(--transition);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
+.cast-chip:hover img{border-color:var(--accent-v);box-shadow:0 6px 20px rgba(124,58,237,0.4)}
+.cast-avatar-fallback{width:80px;height:80px;border-radius:50%;margin:0 auto 10px;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
+.cast-chip-name{font-size:0.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
+.cast-chip-role{font-size:0.7rem;color:var(--text-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
+.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px}
+.ep-grid-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;transition:var(--transition);cursor:pointer;color:var(--text-secondary);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
+.ep-grid-btn:hover{background:rgba(124,58,237,0.15);border-color:var(--accent-v);color:var(--text-primary);transform:translateY(-3px);box-shadow:0 6px 20px rgba(124,58,237,0.3)}
+.ep-grid-btn.watched{background:rgba(34,197,94,0.08);border-color:rgba(34,197,94,0.25)}
+.ep-grid-btn.watched:hover{background:rgba(34,197,94,0.15);border-color:rgba(34,197,94,0.4)}
+.ep-grid-num{font-size:1rem;font-weight:700;color:var(--text-primary)}
+.ep-grid-watched{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:#22c55e;color:#fff;font-size:0.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
+.ep-grid-play{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(124,58,237,0.15);color:var(--accent-v2);transition:var(--transition)}
+.ep-grid-btn:hover .ep-grid-play{background:var(--accent-v);color:#fff}
+.ep-grid-btn.watched .ep-grid-play{background:rgba(34,197,94,0.15);color:#22c55e}
+.ep-grid-btn.watched:hover .ep-grid-play{background:#22c55e;color:#fff}
+
+/* MOVIE PLAYER */
+.player-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-muted);padding:20px;text-align:center}
+.player-error .big{font-size:2.6rem}
+.player-error p{font-size:0.9rem;max-width:420px}
+
+/* CUSTOM PLAYER */
+.custom-player{position:relative;width:100%;height:100%;background:#000;outline:none;overflow:hidden;cursor:default}
+.custom-player video{width:100%;height:100%;object-fit:contain;background:#000}
+.custom-player video::-webkit-media-controls{display:none !important}
+.cp-fade{position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(to top,rgba(0,0,0,0.88),transparent);pointer-events:none;transition:opacity .25s ease;z-index:3}
+.cp-controls{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;display:flex;flex-direction:column;gap:8px;transition:opacity .25s ease,transform .25s ease;z-index:5}
+.cp-controls.hide,.cp-fade.hide{opacity:0;pointer-events:none;transform:translateY(10px)}
+.cp-seek{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none}
+.cp-seek-track{position:absolute;left:0;right:0;height:4px;border-radius:99px;background:rgba(255,255,255,0.22);transition:height .15s ease}
+.cp-seek:hover .cp-seek-track{height:6px}
+.cp-buffered{position:absolute;left:0;height:4px;border-radius:99px;background:rgba(255,255,255,0.32);transition:height .15s ease}
+.cp-seek:hover .cp-buffered{height:6px}
+.cp-progress{position:absolute;left:0;height:4px;border-radius:99px;background:var(--accent-v);box-shadow:0 0 12px rgba(124,58,237,0.65);transition:height .15s ease}
+.cp-seek:hover .cp-progress{height:6px}
+.cp-thumb{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);opacity:0;transition:opacity .15s ease;box-shadow:0 1px 6px rgba(0,0,0,0.5);pointer-events:none}
+.cp-seek:hover .cp-thumb{opacity:1}
+.cp-hover-time{position:absolute;top:-28px;transform:translateX(-50%);background:rgba(10,10,18,0.92);border:1px solid var(--border-bright);color:#fff;font-size:0.72rem;font-weight:600;padding:2px 8px;border-radius:6px;pointer-events:none;white-space:nowrap}
+.cp-row{display:flex;align-items:center;gap:4px}
+.cp-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.92);transition:var(--transition);background:transparent;flex-shrink:0}
+.cp-btn:hover{background:rgba(255,255,255,0.12);color:#fff}
+.cp-btn.active{color:var(--accent-v2);background:rgba(124,58,237,0.22)}
+@media(max-width:680px){.cp-row{gap:2px}.cp-btn{width:34px;height:34px}.cp-vol-slider{width:60px}.cp-btn:nth-child(2),.cp-btn:nth-child(3),.cp-btn:nth-child(11),.cp-btn:nth-child(12),.cp-btn:nth-child(13){display:none}.cp-time{display:none}}
+.cp-time{font-size:0.8rem;font-weight:600;color:rgba(255,255,255,0.85);font-variant-numeric:tabular-nums;margin-left:6px;white-space:nowrap}
+.cp-time em{font-style:normal;color:rgba(255,255,255,0.4);margin:0 4px}
+.cp-spacer{flex:1}
+.cp-vol-slider{width:74px;accent-color:var(--accent-v);cursor:pointer;flex-shrink:0}
+.cp-menu{position:absolute;bottom:56px;right:12px;background:rgba(12,12,20,0.95);backdrop-filter:blur(14px);border:1px solid var(--border-bright);border-radius:var(--radius-md);padding:8px 10px 10px;min-width:172px;box-shadow:0 16px 44px rgba(0,0,0,0.6);z-index:10;animation:fadeUp .18s ease both;max-height:min(340px,60vh);overflow-y:auto}
+.cp-menu-title{font-size:0.64rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);padding:8px 10px 4px}
+.cp-menu-title:first-child{padding-top:2px}
+.cp-menu-item{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:var(--radius-sm);font-size:0.82rem;font-weight:600;color:var(--text-secondary);transition:var(--transition);cursor:pointer;background:none;border:none}
+.cp-menu-item:hover{background:rgba(255,255,255,0.06);color:var(--text-primary)}
+.cp-menu-item.active{background:var(--accent-v);color:#fff}
+.cp-menu-note{font-size:0.7rem;color:var(--text-muted);padding:8px 10px 2px}
+.cp-center-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:rgba(10,10,18,0.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.18);color:#fff;display:flex;align-items:center;justify-content:center;transition:var(--transition);z-index:4}
+.cp-center-play:hover{background:var(--accent-v);border-color:var(--accent-v);transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 34px rgba(124,58,237,0.6)}
+.skip-btn{position:absolute;right:18px;bottom:78px;z-index:6;padding:9px 18px;border-radius:var(--radius-pill);background:rgba(12,12,20,0.85);backdrop-filter:blur(8px);border:1px solid var(--border-bright);color:#fff;font-size:0.84rem;font-weight:700;opacity:0;transform:translateY(10px);pointer-events:none;transition:var(--transition);display:flex;align-items:center;gap:6px}
+.skip-btn.show{opacity:1;transform:translateY(0);pointer-events:auto}
+.skip-btn:hover{background:var(--accent-v);border-color:var(--accent-v)}
+.movie-quality-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);margin:10px 0}
+.movie-quality-label{font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-right:4px}
+.movie-quality-bar button{padding:5px 14px;border-radius:var(--radius-pill);font-size:0.78rem;font-weight:700;background:rgba(255,255,255,0.06);border:1px solid var(--border);color:var(--text-secondary);transition:var(--transition);cursor:pointer}
+.movie-quality-bar button:hover{border-color:var(--border-bright);color:var(--text-primary)}
+.movie-quality-bar button.active{background:var(--accent-v);border-color:var(--accent-v);color:#fff}
+
+/* SCROLL ROW NAV */
+.genre-nav-wrap{position:relative}
+.row-nav-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:38px;height:38px;border-radius:50%;background:rgba(10,10,18,0.85);backdrop-filter:blur(8px);border:1px solid var(--border-bright);color:var(--text-primary);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,0.5)}
+.genre-nav-wrap:hover .row-nav-btn{opacity:1}
+.row-nav-btn:hover{background:var(--accent-v);border-color:var(--accent-v);transform:translateY(-50%) scale(1.08)}
+.row-nav-btn.prev{left:-14px}
+.row-nav-btn.next{right:-14px}
+
+/* CONTINUE WATCHING */
+.cw-subtitle{font-size:0.78rem;font-weight:500;color:var(--text-muted)}
+.cw-card{position:relative;flex-shrink:0;width:250px;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);cursor:pointer;transition:var(--transition);border:1px solid var(--border)}
+.cw-card:hover{transform:translateY(-4px);border-color:var(--border-bright);box-shadow:var(--shadow-hover)}
+.cw-poster{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-elevated)}
+.cw-poster img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
+.cw-card:hover .cw-poster img{transform:scale(1.06)}
+.cw-overlay{position:absolute;inset:0;background:rgba(8,8,12,0.55);backdrop-filter:blur(2px);opacity:0;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:0.86rem;font-weight:700}
+.cw-card:hover .cw-overlay{opacity:1}
+.cw-overlay svg{width:20px;height:20px}
+.cw-badge{position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:var(--radius-pill);background:rgba(8,8,8,0.78);backdrop-filter:blur(6px);border:1px solid var(--border);color:#fff;font-size:0.64rem;font-weight:700;letter-spacing:0.04em}
+.cw-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,0.16)}
+.cw-progress-fill{height:100%;background:var(--grad-accent);box-shadow:0 0 8px rgba(124,58,237,0.6)}
+.cw-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(8,8,8,0.8);border:1px solid var(--border);color:var(--text-secondary);font-size:0.9rem;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);cursor:pointer;padding:0}
+.cw-card:hover .cw-remove{opacity:1}
+.cw-remove:hover{background:#e11d48;border-color:#e11d48;color:#fff}
+.cw-body{padding:10px 12px 12px}
+.cw-body h3{font-size:0.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
+.cw-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:0.7rem;color:var(--text-muted)}
+.cw-meta-left{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.cw-left{color:var(--accent-v2);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
+
+/* TOP 10 SPOTLIGHT — full-width slideshow */
+.spotlight-featured{position:relative;width:100%;min-height:500px;border-radius:16px;overflow:hidden;background:var(--bg-elevated) center/cover no-repeat;border:1px solid var(--border);cursor:pointer;transition:var(--transition)}
+.spotlight-featured:hover{transform:translateY(-4px);border-color:var(--border-bright);box-shadow:var(--shadow-hover)}
+.spotlight-featured-grad{position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,8,12,0.08) 0%, rgba(8,8,12,0.24) 34%, rgba(8,8,12,0.72) 75%, rgba(8,8,12,0.9) 100%)}
+.spotlight-featured-body{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 24px;z-index:2}
+.spotlight-featured-meta-row{display:flex;align-items:center;gap:10px;font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#f8d6d6;opacity:0.9;margin-bottom:12px}
+.spotlight-featured-bubble{display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
+.spotlight-featured-bubble-inner{display:flex;flex-direction:column;align-items:flex-start;padding:11px 16px;border-radius:999px;background:rgba(18, 58, 130, 0.38);border:1px solid rgba(255,255,255,0.18);backdrop-filter:blur(8px)}
+.spotlight-featured-bubble-kicker{font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#dbeafe}
+.spotlight-featured-bubble-title{font-size:1rem;font-weight:800;color:#f2fbff;line-height:1.15}
+.spotlight-featured-title{font-family:'Bebas Neue','Outfit',sans-serif;font-size:clamp(2.2rem,4.6vw,4.4rem);font-weight:400;line-height:0.9;margin:0 0 10px;text-shadow:0 8px 30px rgba(0,0,0,0.7);letter-spacing:0.02em;max-width:52%}
+.spotlight-featured-caption{max-width:48%;font-size:0.9rem;color:rgba(255,255,255,0.8);line-height:1.55;margin-bottom:18px}
+.spotlight-featured-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
+.spotlight-featured-btn{position:relative;z-index:2}
+.spotlight-featured-btn.secondary{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:#fff}
+.spotlight-slide{animation:spotFade .5s ease both}
+@keyframes spotFade{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}
+.spotlight-nav-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px;border-radius:50%;background:rgba(8,8,8,0.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.16);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0.7;transition:var(--transition);cursor:pointer}
+.spotlight-featured:hover .spotlight-nav-btn{opacity:1}
+.spotlight-nav-btn:hover{background:var(--accent-v);border-color:var(--accent-v);transform:translateY(-50%) scale(1.08)}
+.spotlight-nav-btn.prev{left:12px}
+.spotlight-nav-btn.next{right:12px}
+.spotlight-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:3}
+.spotlight-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.35);transition:var(--transition);cursor:pointer;padding:0}
+.spotlight-dot.active{background:var(--accent-v2);width:20px;border-radius:99px;box-shadow:0 0 10px rgba(124,58,237,0.6)}
+
+.genre-section{padding-top:8px;padding-bottom:12px}
+.genre-row-wrap{position:relative;display:flex;align-items:center;gap:12px}
+.genre-row{display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none;padding:6px 0}
+.genre-row::-webkit-scrollbar{display:none}
+.genre-pill{padding:8px 16px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.035);border:1px solid var(--border);color:var(--text-secondary);font-size:0.82rem;font-weight:600;transition:var(--transition);cursor:pointer;white-space:nowrap}
+.genre-pill:hover{background:rgba(124,58,237,0.12);border-color:var(--border-bright);color:var(--text-primary)}
+
+.home-dashboard{padding-top:4px}
+.home-layout{display:grid;grid-template-columns:minmax(0, 1.9fr) 300px;gap:22px;align-items:start}
+.home-main-column{display:flex;flex-direction:column;gap:10px}
+.home-sidebar{display:flex;flex-direction:column;gap:18px;position:sticky;top:88px}
+.sidebar-panel{background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:12px;padding:18px 14px}
+.sidebar-panel h3{font-size:0.96rem;font-weight:800;letter-spacing:0.02em;margin:0 0 14px}
+.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
+.sidebar-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer}
+.sidebar-list li:last-child{border-bottom:none}
+.sidebar-rank{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;background:var(--grad-accent);font-size:0.72rem;font-weight:800;color:#fff;flex-shrink:0}
+.sidebar-rank.alt{background:linear-gradient(135deg, rgba(14,165,233,0.9), rgba(124,58,237,0.9))}
+.sidebar-info{display:flex;flex-direction:column;min-width:0}
+.sidebar-info strong{font-size:0.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sidebar-info small{font-size:0.67rem;color:var(--text-muted);margin-top:2px}
+
+/* LANDING ENTER CTA */
+.landing-enter{position:relative;padding:90px 24px;overflow:hidden;text-align:center;border-top:1px solid var(--border)}
+.landing-enter-glow{position:absolute;inset:0;background:radial-gradient(ellipse 55% 80% at 50% 110%,rgba(124,58,237,0.3) 0%,transparent 65%);pointer-events:none}
+.landing-enter-inner{position:relative;max-width:560px;margin:0 auto}
+.landing-enter-label{font-size:0.72rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-v2);margin-bottom:14px}
+.landing-enter-title{font-family:'Bebas Neue','Outfit',sans-serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:400;line-height:1.05;margin-bottom:12px}
+.landing-enter-desc{font-size:0.95rem;color:var(--text-secondary);line-height:1.7;margin-bottom:26px}
+
+/* SHARED EMPTY STATE + CARD EXTRAS */
+.empty{padding:40px;text-align:center;color:var(--text-muted)}
+.empty .big{font-size:2.6rem;margin-bottom:12px}
+.empty p{font-size:0.9rem}
+.card-rank{position:absolute;top:8px;left:8px;z-index:2;width:26px;height:26px;border-radius:8px;background:var(--grad-accent);color:#fff;font-size:0.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,0.5)}
+.card-type-badge{position:absolute;top:8px;right:8px;z-index:2;padding:3px 9px;border-radius:var(--radius-pill);background:rgba(8,8,8,0.72);backdrop-filter:blur(6px);border:1px solid var(--border-bright);color:var(--accent-c2);font-size:0.62rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}
+.card-type-badge.coming-soon{background:rgba(245,158,11,0.18);border-color:rgba(245,158,11,0.55);color:#fcd34d}
+.card-quick-btn.coming-soon{background:rgba(245,158,11,0.9);color:#1a1205}
+.card-ep-badge{position:absolute;top:8px;left:8px;z-index:2;padding:3px 9px;border-radius:var(--radius-pill);background:rgba(8,8,8,0.72);backdrop-filter:blur(6px);border:1px solid var(--border);color:#fff;font-size:0.62rem;font-weight:700;letter-spacing:0.04em}
+
+/* MOBILE BOTTOM NAV (tab bar with every section) */
+#root .mobile-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(10,10,18,0.96);backdrop-filter:blur(18px);border-top:1px solid var(--border);justify-content:space-around;align-items:stretch;box-shadow:0 -16px 34px rgba(10,10,14,0.65)}
+#root .mobile-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-muted);font-size:0.6rem;font-weight:600;letter-spacing:0.02em;transition:var(--transition)}
+#root .mobile-nav-item.active{color:var(--accent-v2);background:linear-gradient(180deg, rgba(124,58,237,0.12), rgba(124,58,237,0.02));}
+#root .mobile-nav-item.active svg{filter:drop-shadow(0 0 8px rgba(124,58,237,0.6))}
+#root .mobile-nav-item:active{transform:scale(0.94)}
+@media(max-width:1024px){
+  .search-wrap{max-width:260px}
+  nav{gap:0}
+  nav a{padding:6px 10px;font-size:0.8rem}
+  .container{padding:0 20px}
+  .page-shell{padding-top:calc(var(--header-h) + 24px);padding-bottom:64px}
+  .catalog-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 14px}
+  .watch-grid,.info-layout{grid-template-columns:1fr}.watch-sidebar{position:static;max-height:500px}.info-hero-body{flex-direction:column;align-items:flex-start}.spotlight-featured{min-height:340px}
+}
+@media(max-width:900px){
+  .main-content{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
+  .home-hero{padding-bottom:110px}
+  .scroll-indicator{bottom:calc(80px + env(safe-area-inset-bottom))}
+  .landing-enter{padding-bottom:120px}
+}
+
+/* ============ DESKTOP (>=681px) - Hide mobile nav ============ */
+@media(min-width:681px){
+  .mobile-nav{
+    display: none !important;
+  }
+}
+
+/* ============ MOBILE (<=680px) ============ */
+@media(max-width:680px){
+  .container{padding:0 16px}
+  nav{display:none}
+  .page-shell{padding-top:calc(var(--header-h) + 18px);padding-bottom:60px}
+  .catalog-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px 12px}
+  .search-shell{gap:12px}
+
+  /* Header: compact but still polished */
+  #header .container{gap:10px}
+  .logo-wordmark .l{font-size:1.6rem}
+  .search-wrap{display:none}
+  .auth-avatar-btn{padding:5px 7px;gap:0;border-radius:14px}
+  .auth-avatar-btn span,.auth-avatar-btn>svg:last-child{display:none}
+  .auth-avatar-circle{width:30px;height:30px}
+  .auth-dropdown{min-width:220px;max-width:calc(100vw - 24px)}
+
+  /* Home */
+  .content-section{padding:26px 0}
+  .section-header{margin-bottom:14px}
+  .section-title{font-size:1.02rem}
+  .section-title::before{height:19px}
+  .scroll-row{gap:10px}
+  .anime-card{width:138px;border-radius:var(--radius-sm)}
+  .skel-card{width:138px}
+  .card-body{padding:8px 9px 10px}
+  .card-title{font-size:0.78rem}
+  .cw-card{width:198px}
+
+  /* Spotlight slideshow */
+  .spotlight-featured{min-height:262px;border-radius:14px}
+  .spotlight-featured-body{padding:12px 12px 38px}
+  .spotlight-featured-score{font-size:0.68rem;margin-bottom:4px}
+  .spotlight-featured-title{font-size:1.28rem;margin-bottom:4px}
+  .spotlight-featured-meta{font-size:0.7rem;margin-bottom:10px}
+  .spotlight-featured-btn{padding:8px 15px;font-size:0.76rem}
+  .spotlight-nav-btn{opacity:1;width:30px;height:30px}
+  .spotlight-nav-btn.prev{left:8px}
+  .spotlight-nav-btn.next{right:8px}
+  .spotlight-dots{bottom:9px;gap:5px}
+  .spotlight-dot{width:6px;height:6px}
+  .spotlight-dot.active{width:16px}
+
+  .genre-row-wrap{gap:8px}
+  .genre-row{gap:8px}
+  .genre-pill{padding:7px 12px;font-size:0.74rem}
+  .home-layout{grid-template-columns:1fr;gap:14px}
+  .home-sidebar{position:static}
+  .sidebar-panel{padding:14px 12px}
+
+  /* Buttons + shared */
+  .btn{padding:10px 18px;font-size:0.85rem}
+  .btn-sm{padding:6px 13px;font-size:0.78rem}
+  .section-link{font-size:0.78rem}
+
+  /* Landing hero */
+  .home-hero{padding:calc(var(--header-h) + 30px) 14px 0}
+  .home-hero{padding-bottom:110px}
+  .hero-badge{padding:5px 13px;font-size:0.66rem;margin-bottom:22px}
+  .hero-logo-text{font-size:clamp(3.2rem,17vw,5.6rem);margin-bottom:12px}
+  .hero-subtitle{font-size:clamp(1.05rem,3.6vw,1.45rem);margin-bottom:10px}
+  .hero-desc{font-size:0.88rem;margin-bottom:22px}
+  .hero-filters{gap:6px;margin-bottom:18px}
+  .hero-filter-pill{padding:6px 14px;font-size:0.8rem}
+  .hero-search-input{padding:12px 52px 12px 16px;font-size:0.9rem}
+  .hero-search-btn{width:38px;height:38px}
+  .hero-ctas{gap:9px;margin-bottom:32px}
+  .hero-cta{padding:11px 17px;font-size:0.84rem;gap:7px}
+  .hero-stat{padding:0 14px}
+  .hero-stat-val{font-size:1.15rem}
+  .hero-stat-label{font-size:0.6rem}
+
+  /* Library marquee */
+  .library-section{padding:44px 0}
+  .library-header{gap:12px;margin-bottom:20px}
+  .library-header-text{font-size:0.62rem}
+  .library-header-line{max-width:90px}
+  .marquee-poster{width:86px;height:120px}
+  .marquee-row{gap:8px}
+
+  /* Feature section */
+  .feature-section{padding:48px 0}
+  .feature-eyebrow{font-size:0.7rem;margin-bottom:12px}
+  .feature-heading{font-size:1.7rem;line-height:1.2;margin-bottom:14px}
+  .feature-desc{font-size:0.9rem;margin-bottom:26px}
+  .feature-card{padding:18px}
+  .landing-enter{padding:56px 18px 118px}
+  .landing-enter-title{font-size:1.9rem}
+  .landing-enter-desc{font-size:0.88rem;margin-bottom:20px}
+
+  /* Details pages */
+  .info-hero{min-height:320px}
+  .info-hero-content{padding:20px 0}
+  .info-hero-body{gap:16px}
+  .info-poster{width:108px}
+  .info-title{font-size:1.7rem;margin-bottom:10px}
+  .info-type-tag{font-size:0.72rem;margin-bottom:8px}
+  .info-badges{margin-bottom:12px}
+  .info-genres{gap:6px;margin-bottom:16px}
+  .info-genre-pill{padding:4px 11px;font-size:0.74rem}
+  .info-actions{gap:8px}
+  .countdown-wrap{padding:10px 14px;gap:8px;margin-bottom:16px}
+  .countdown-cell{min-width:50px;padding:6px 4px}
+  .countdown-num{font-size:1.05rem}
+  .countdown-unit{font-size:0.56rem}
+  .info-body{padding:26px 0 60px}
+  .info-layout{gap:30px}
+  .info-section-label{font-size:1.02rem}
+  .info-synopsis{font-size:0.88rem}
+  .info-stat-cell{padding:13px 14px}
+  .char-avatar{width:64px;height:64px}
+  .char-name{font-size:0.72rem;max-width:72px}
+  .info-btn-watch{padding:10px 20px}
+
+  /* Watch page */
+  .watch-container{padding:0 12px 60px}
+  .watch-grid{gap:12px;padding-top:8px}
+  .watch-anime-row{flex-wrap:wrap}
+  .watch-info-card{padding:14px 16px}
+  .watch-info-title{font-size:0.95rem}
+  .ep-title{font-size:1.1rem;margin-bottom:12px}
+  .prefs-bar{padding:10px 12px;gap:12px}
+  .pref-item{font-size:0.78rem}
+  .audio-btn,.server-btn{padding:4px 10px;font-size:0.74rem}
+  .audio-notice{margin:10px 0;font-size:0.78rem;padding:8px 12px}
+  .watch-anime-name{font-size:0.85rem}
+  .sidebar-upnext{font-size:0.92rem}
+  .ep-thumb{width:64px;height:40px}
+  .ep-item{padding:6px}
+  .ep-info-title{font-size:0.76rem}
+  .ep-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
+  .movie-quality-bar{padding:10px 12px;gap:6px}
+  .movie-quality-bar button{padding:4px 11px;font-size:0.72rem}
+
+  /* Movies & TV */
+  .movie-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
+  .movie-tabs::-webkit-scrollbar{display:none}
+  .movie-tabs button{white-space:nowrap;padding:7px 16px;font-size:0.8rem}
+  .movie-sort button{padding:5px 11px;font-size:0.72rem}
+  .load-more-btn{min-width:170px}
+
+  /* Custom player */
+  .cp-controls{padding:10px 8px 8px}
+  .cp-btn{width:34px;height:34px}
+  .cp-vol-slider{width:52px}
+  .cp-time{font-size:0.72rem}
+  .cp-menu{right:6px;bottom:52px;min-width:150px}
+  .cp-center-play{width:60px;height:60px}
+  .skip-btn{bottom:72px;right:12px;padding:8px 14px;font-size:0.8rem}
+
+  /* Auth modal -> bottom sheet */
+  .auth-overlay{padding:0;align-items:flex-end}
+  .auth-modal{max-width:100%;border-radius:20px 20px 0 0;padding:24px 20px calc(20px + env(safe-area-inset-bottom));animation:sheetUp .25s ease both}
+  @keyframes sheetUp{from{transform:translateY(44px);opacity:0}to{transform:translateY(0);opacity:1}}
+}
+
+/* ============ SMALL PHONES (<=420px) ============ */
+@media(max-width:420px){
+  .anime-card{width:126px}
+  .skel-card{width:126px}
+  .cw-card{width:172px}
+  .marquee-poster{width:74px;height:104px}
+  .info-poster{width:94px}
+  .hero-logo-text{font-size:3rem}
+  .hero-ctas{flex-direction:column}
+  .hero-cta{width:100%;justify-content:center}
+  .spotlight-featured{min-height:240px}
+  .auth-dropdown{left:12px;right:12px;min-width:0}
+}
+
+/* React Home discovery view (migrated from the legacy project, deliberately scoped). */
+#hero{position:relative;height:56vh;min-height:600px;max-height:720px;overflow:hidden;background:var(--bg-base)}
+#hero .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none;will-change:opacity}#hero .hero-slide.active{opacity:1;pointer-events:auto}
+#hero .hero-bg{position:absolute;inset:0}#hero .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center top;transform:scale(1.025);transition:transform 8s ease;filter:saturate(.9) contrast(1.04)}#hero .hero-slide.active .hero-bg img{transform:scale(1)}
+#hero .hero-gradient{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,7,10,.96) 0%,rgba(6,7,10,.64) 40%,rgba(6,7,10,.1) 72%),linear-gradient(0deg,rgba(6,7,10,.98) 0%,transparent 52%)}
+#hero .hero-content{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;padding:calc(var(--header-h) + 20px) 0 72px}#hero .hero-content .container{width:100%}#hero .hero-layout{display:flex;align-items:center;justify-content:space-between;gap:40px;width:100%}#hero .hero-info{max-width:560px;animation:fadeUp .6s ease both}
+#hero .hero-title-block{display:flex;flex-direction:column;align-items:flex-start;gap:10px}#hero .hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}#hero .hero-title{font-size:clamp(2rem,4vw,3.35rem);font-weight:800;line-height:1.12;letter-spacing:-.035em;margin-bottom:14px;text-wrap:balance}
+#hero .hero-desc{font-size:.95rem;color:var(--text-secondary);line-height:1.7;margin:0 0 18px;max-width:470px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-align:left}#hero .hero-genres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}#hero .hero-genre-tag{padding:4px 10px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-size:.75rem;font-weight:600;color:var(--text-secondary);transition:var(--transition)}#hero .hero-genre-tag:hover{background:rgba(124,58,237,.2);border-color:var(--accent-v);color:var(--accent-v2)}
+#hero .hero-actions{display:flex;gap:12px;flex-wrap:wrap}#hero .hero-stats{display:flex;gap:20px;margin-bottom:14px;flex-wrap:wrap}#hero .hero-stat{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--text-secondary)}#hero .hero-stat svg{color:var(--accent-v2);flex-shrink:0}
+#hero .hero-cover-wrap{position:relative;flex-shrink:0;animation:fadeIn .8s ease .3s both}#hero .hero-cover{width:190px;aspect-ratio:2/3;object-fit:cover;border-radius:var(--radius-lg);box-shadow:0 8px 48px rgba(0,0,0,.6),0 0 0 1px var(--border);display:block}#hero .hero-cover-glow{position:absolute;inset:-14px;border-radius:32px;background:radial-gradient(ellipse at center,rgba(139,92,246,.28),transparent 70%);z-index:-1;animation:glow-pulse 3s ease infinite}
+#hero .hero-prev,#hero .hero-next{position:absolute;top:50%;z-index:5;width:48px;height:48px;border-radius:50%;background:rgba(10,10,18,.72);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-primary);transition:var(--transition);backdrop-filter:blur(8px);opacity:0;pointer-events:none}#hero .hero-prev{left:40px;transform:translateY(-50%)}#hero .hero-next{right:40px;transform:translateY(-50%)}#hero:hover .hero-next,#hero:hover .hero-prev{opacity:1;pointer-events:auto}#hero .hero-prev:hover{background:rgba(124,58,237,.35);border-color:var(--accent-v);transform:translate(-4px,-50%)}#hero .hero-next:hover{background:rgba(124,58,237,.35);border-color:var(--accent-v);transform:translate(4px,-50%)}
+#hero .hero-indicators{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}#hero .hero-dot{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.3);transition:var(--transition)}#hero .hero-dot.active{width:28px;background:var(--accent-v)}
+.genre-bar{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:14px 0 12px;border-bottom:1px solid var(--border);scrollbar-width:none;margin-bottom:24px}.genre-bar::-webkit-scrollbar{display:none}.genre-pill{flex-shrink:0;padding:6px 14px;border-radius:var(--radius-pill);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:.8rem;font-weight:500;color:var(--text-secondary);transition:var(--transition);white-space:nowrap}.genre-pill:hover{background:rgba(124,58,237,.18);border-color:var(--accent-v);color:var(--accent-v2);transform:translateY(-1px)}
+.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:start}.home-sections{min-width:0}.home-grid .sidebar-widget{position:sticky;top:calc(var(--header-h) + 16px);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.home-grid .sidebar-tabs{display:flex;gap:16px;padding:14px 16px 0;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}.home-grid .sidebar-tab{padding:0 0 10px;font-size:.82rem;font-weight:700;text-transform:uppercase;color:var(--text-secondary);border-bottom:2px solid transparent;transition:var(--transition)}.home-grid .sidebar-tab:hover{color:var(--text-primary)}.home-grid .sidebar-tab.active{color:var(--accent-v2);border-bottom-color:var(--accent-v)}.home-grid .sidebar-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;transition:var(--transition);border-bottom:1px solid var(--border);color:inherit;text-align:left}.home-grid .sidebar-item:last-child{border-bottom:none}.home-grid .sidebar-item:hover{background:var(--bg-elevated)}.home-grid .sidebar-thumb{width:50px;height:68px;object-fit:cover;border-radius:6px;flex-shrink:0}.home-grid .sidebar-rank{font-size:.72rem;font-weight:800;color:var(--text-muted);width:18px;flex-shrink:0}.home-grid .sidebar-title{font-size:.86rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-grid .sidebar-meta{font-size:.7rem;color:var(--text-muted);margin-top:4px}
+/* Legacy browse sizing: roomy grid cards, compact two-column cards on phones. */
+.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:22px}
+@media(max-width:1024px){.home-grid{grid-template-columns:1fr}.home-grid .sidebar-widget{position:static;margin-top:20px}}@media(max-width:680px){#hero{height:620px;min-height:0}#hero .hero-content{align-items:flex-end;padding:calc(var(--header-h) + 18px) 0 58px}#hero .hero-cover-wrap,#hero .hero-prev,#hero .hero-next{display:none}#hero .hero-title{font-size:clamp(1.8rem,9vw,2.5rem)}#hero .hero-desc{-webkit-line-clamp:4;line-clamp:4}#hero .hero-indicators{bottom:22px}.genre-bar{margin-bottom:10px}}
+@media(max-width:600px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.catalog-grid .anime-card{width:100%}}
+@media(min-width:601px) and (max-width:768px){.anime-card{width:130px}}@media(max-width:420px){.anime-card{width:126px}}
+
+/* Watch-page anime information card: an intentional media summary instead of loose text. */
+.watch-desc-card{display:flex;gap:18px;align-items:flex-start;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(13,13,20,.96) 38%,rgba(11,11,17,.98));border-color:rgba(139,92,246,.26);box-shadow:0 18px 42px rgba(0,0,0,.2)}.watch-desc-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0 0,rgba(167,139,250,.15),transparent 42%);z-index:-1}.watch-info-poster{width:92px;aspect-ratio:2/3;object-fit:cover;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.42);flex-shrink:0}.watch-info-body{min-width:0;flex:1}.watch-info-kicker{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-v2);margin-bottom:5px}.watch-info-title{font-size:1.22rem;font-weight:800;line-height:1.22;letter-spacing:-.02em;margin-bottom:10px}.watch-info-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px}.watch-meta-item,.watch-meta-score{display:inline-flex;align-items:center;min-height:23px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.075);font-size:.7rem;font-weight:700;color:var(--text-secondary)}.watch-meta-score{color:#fcd34d;background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.2)}.watch-meta-dot{display:none}.watch-genres{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 11px}.watch-genre-pill{padding:3px 8px;border-radius:999px;background:rgba(124,58,237,.13);border:1px solid rgba(124,58,237,.22);color:#c4b5fd;font-size:.68rem;font-weight:700}.watch-synopsis{margin:0;color:var(--text-secondary);font-size:.86rem;line-height:1.62;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}@media(max-width:600px){.watch-desc-card{gap:12px;padding:14px}.watch-info-poster{width:72px;border-radius:8px}.watch-info-title{font-size:1.04rem}.watch-synopsis{-webkit-line-clamp:4;line-clamp:4}}

frontend/src/main.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App.jsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

frontend/src/pages/Anime.jsx

@@ -0,0 +1,196 @@
+import { useEffect, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { api, titleOf } from "../api.js";
+import AnimeRow from "../components/AnimeRow.jsx";
+
+export default function Anime() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [media, setMedia] = useState(null);
+  const [epData, setEpData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [showFullSynopsis, setShowFullSynopsis] = useState(false);
+  // Tick every second while the next episode's air time is in the future.
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    (async () => {
+      try {
+        const [m, eps] = await Promise.all([
+          api.details(id),
+          api.episodes(id).catch(() => null)
+        ]);
+        if (!alive) return;
+        setMedia(m);
+        setEpData(eps);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+    return () => { alive = false; };
+  }, [id]);
+
+  // Live countdown to the next airing episode (absolute timestamp from AniList).
+  const nextAiring = media?.nextAiringEpisode;
+  const airTargetMs = nextAiring?.airingAt ? nextAiring.airingAt * 1000 : 0;
+  useEffect(() => {
+    if (!airTargetMs) return;
+    setNow(Date.now());
+    const t = setInterval(() => {
+      // Stop ticking once the episode airs — no need to re-render forever.
+      if (airTargetMs - Date.now() <= 0) clearInterval(t);
+      setNow(Date.now());
+    }, 1000);
+    return () => clearInterval(t);
+  }, [airTargetMs]);
+
+  const remainingMs = airTargetMs ? Math.max(0, airTargetMs - now) : 0;
+  const showCountdown = airTargetMs > 0 && remainingMs > 0;
+  const totalSecs = Math.floor(remainingMs / 1000);
+  const cdDays = Math.floor(totalSecs / 86400);
+  const cdHours = Math.floor((totalSecs % 86400) / 3600);
+  const cdMins = Math.floor((totalSecs % 3600) / 60);
+  const cdSecs = totalSecs % 60;
+  const pad = (n) => String(n).padStart(2, "0");
+
+  if (loading || !media) {
+    return (
+      <div className="loader" style={{ minHeight: "80vh" }}>
+        <div className="spinner" />
+        <span>Loading anime details...</span>
+      </div>
+    );
+  }
+
+  const title = titleOf(media);
+  const banner = media.bannerImage || media.coverImage;
+  const score = media.score ? (media.score > 10 ? (media.score / 10).toFixed(1) : media.score) : "N/A";
+
+  function handleWatchNow() {
+    const provider = (epData?.providers || [])[0];
+    const firstEp = provider?.sub?.[0] || provider?.dub?.[0];
+    if (firstEp) {
+      navigate(`/watch/${firstEp.id}?animeId=${media.id}`);
+    }
+  }
+
+  return (
+    <div className="info-page">
+      <section className="info-hero">
+        {banner ? (
+          <div className="info-hero-bg" style={{ backgroundImage: `url(${api.img(banner)})` }} />
+        ) : null}
+
+        <div className="container info-hero-inner">
+          <div className="info-poster">
+            <img src={api.img(media.coverImage)} alt={title} />
+          </div>
+
+          <div className="info-head">
+            <div className="info-eyebrow">
+              <span className="dot" />
+              <span>{media.format || "TV"}</span>
+            </div>
+
+            <div>
+              <h1 className="info-title">{title}</h1>
+              <div className="info-subtitle">
+                {media.seasonYear || "Ongoing"} • {media.status || "Airing"}
+              </div>
+            </div>
+
+            <div className="info-meta-row">
+              <span className="meta-pill meta-score">★ {score}</span>
+              <span className="meta-pill">{media.episodes || "?"} EP</span>
+              <span className="meta-pill">{media.duration ? `${media.duration}m` : "24m"}</span>
+              <span className={`meta-pill ${media.status === "RELEASING" ? "meta-status-airing" : ""}`}>
+                {media.status || "Airing"}
+              </span>
+            </div>
+
+            {media.genres ? (
+              <div className="info-genres">
+                {media.genres.map(g => (
+                  <span key={g} className="info-genre-tag">{g}</span>
+                ))}
+              </div>
+            ) : null}
+
+            <div className="info-cta">
+              <button className="btn-watch" type="button" onClick={handleWatchNow}>▶ Watch Now</button>
+              <button className="btn-secondary" type="button">Share</button>
+              <button className="btn-secondary" type="button">My List</button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <main className="info-body">
+        <div className="info-grid-2">
+          <section className="info-section">
+            <h2 className="info-section-title">Synopsis</h2>
+            <p className={`info-desc ${showFullSynopsis ? "expanded" : ""}`}>
+              {media.synopsis || "No description available for this title."}
+            </p>
+            {media.synopsis && media.synopsis.length > 200 ? (
+              <button className="info-desc-toggle" onClick={() => setShowFullSynopsis(v => !v)}>
+                {showFullSynopsis ? "Show Less" : "Read More"}
+              </button>
+            ) : null}
+          </section>
+
+          <aside className="info-section">
+            <h2 className="info-section-title">Details</h2>
+            <div className="info-stats">
+              <div className="info-stat-row">
+                <span className="label">Format</span>
+                <span className="value">{media.format || "TV"}</span>
+              </div>
+              <div className="info-stat-row">
+                <span className="label">Status</span>
+                <span className="value">{media.status || "Airing"}</span>
+              </div>
+              <div className="info-stat-row">
+                <span className="label">Episodes</span>
+                <span className="value">{media.episodes || "Ongoing"}</span>
+              </div>
+              <div className="info-stat-row">
+                <span className="label">Duration</span>
+                <span className="value">{media.duration ? `${media.duration}m` : "24m"}</span>
+              </div>
+              <div className="info-stat-row">
+                <span className="label">Year</span>
+                <span className="value">{media.seasonYear || "1999"}</span>
+              </div>
+              <div className="info-stat-row">
+                <span className="label">Score</span>
+                <span className="value">{score}</span>
+              </div>
+            </div>
+          </aside>
+        </div>
+
+        {media.genres ? (
+          <section className="info-section">
+            <h2 className="info-section-title">Tags</h2>
+            <div className="info-tags">
+              {media.genres.map(g => (
+                <span key={g} className="info-tag">{g}</span>
+              ))}
+            </div>
+          </section>
+        ) : null}
+
+        {media.relations && media.relations.length > 0 ? (
+          <div className="info-section" style={{ marginTop: 12 }}>
+            <AnimeRow title="You Might Also Like" items={media.relations} />
+          </div>
+        ) : null}
+      </main>
+    </div>
+  );
+}

frontend/src/pages/AuthCallback.jsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { api } from "../api.js";
+import { getToken, setSession } from "../utils/auth.js";
+
+export default function AuthCallback() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const [msg, setMsg] = useState("Finishing sign in…");
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const token = searchParams.get("token");
+    const err = searchParams.get("error");
+    if (err) {
+      setError(decodeURIComponent(err));
+      setMsg("");
+      const t = setTimeout(() => navigate("/home", { replace: true }), 3500);
+      return () => clearTimeout(t);
+    }
+    if (!token) {
+      setError("No sign-in result received.");
+      setMsg("");
+      const t = setTimeout(() => navigate("/home", { replace: true }), 3500);
+      return () => clearTimeout(t);
+    }
+    (async () => {
+      try {
+        setSession(token, null);
+        const user = await api.authMe();
+        setSession(getToken(), user);
+        navigate("/home", { replace: true });
+      } catch (e) {
+        setError(e.message || "Sign-in failed.");
+        setMsg("");
+        setTimeout(() => navigate("/home", { replace: true }), 3500);
+      }
+    })();
+  }, [searchParams, navigate]);
+
+  return (
+    <div className="loader" style={{ minHeight: "80vh", paddingTop: 120 }}>
+      <div className="spinner" />
+      {error ? (
+        <span style={{ color: "#fda4af", maxWidth: 420, textAlign: "center" }}>{error}</span>
+      ) : (
+        <span>{msg}</span>
+      )}
+    </div>
+  );
+}

frontend/src/pages/Home.jsx

@@ -0,0 +1,180 @@
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { api, titleOf } from "../api.js";
+import AnimeRow from "../components/AnimeRow.jsx";
+
+export default function Home() {
+  const navigate = useNavigate();
+  const [trending, setTrending] = useState([]);
+  const [popular, setPopular] = useState([]);
+  const [recent, setRecent] = useState([]);
+
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      try {
+        const [t, p, r] = await Promise.all([
+          api.trending(1),
+          api.popular(1),
+          api.recent(1),
+        ]);
+        if (!alive) return;
+        setTrending(t.results || []);
+        setPopular(p.results || []);
+        setRecent(r.results || []);
+      } catch (e) {
+        console.error(e);
+      }
+    })();
+    return () => { alive = false; };
+  }, []);
+
+  const top10 = (trending || []).slice(0, 10);
+  const [slide, setSlide] = useState(0);
+  const [paused, setPaused] = useState(false);
+
+  useEffect(() => {
+    if (paused || top10.length < 2) return;
+    const t = setInterval(() => setSlide((s) => (s + 1) % top10.length), 5000);
+    return () => clearInterval(t);
+  }, [paused, top10.length]);
+
+  const safeSlide = Math.min(slide, Math.max(0, top10.length - 1));
+  const current = top10[safeSlide] || top10[0];
+  const go = (dir) => setSlide((s) => (s + dir + top10.length) % top10.length);
+  const jump = (i) => setSlide(i);
+  const fmtScore = (sc) => (sc != null ? (sc > 10 ? sc / 10 : sc).toFixed(1) : "");
+
+  const genres = useMemo(() => [
+    "Action", "Adventure", "Comedy", "Drama", "Ecchi", "Fantasy", "Horror",
+    "Mahou Shoujo", "Mecha", "Music", "Mystery", "Psychological", "Romance",
+    "Sci-Fi", "Slice of Life", "Sports", "Supernatural", "Thriller",
+  ], []);
+
+  return (
+    <>
+      {current ? (
+        <section id="hero" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
+          <button className="hero-prev" type="button" aria-label="Previous" onClick={(e) => { e.stopPropagation(); go(-1); }}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M15 18l-6-6 6-6" />
+            </svg>
+          </button>
+          <button className="hero-next" type="button" aria-label="Next" onClick={(e) => { e.stopPropagation(); go(1); }}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M9 18l6-6-6-6" />
+            </svg>
+          </button>
+
+          <div className={`hero-slide ${top10.length ? "active" : ""}`}>
+            <div className="hero-bg">
+              <img src={current.coverImage ? api.img(current.coverImage) : "https://images.unsplash.com/..."} alt={titleOf(current)} />
+            </div>
+            <div className="hero-gradient" />
+            <div className="hero-content">
+              <div className="container">
+                <div className="hero-layout">
+                  <div className="hero-info">
+                    <div className="hero-title-block">
+                      <div className="hero-badges">
+                        <span className="badge badge-dark">{current.format || "TV"}</span>
+                        <span className="badge badge-score">★ {fmtScore(current.score)}</span>
+                        <span className="badge badge-dark">{current.episodes ? `${current.episodes} eps` : "24 min"}</span>
+                      </div>
+                      <h1 className="hero-title">{titleOf(current)}</h1>
+                    </div>
+
+                    <p className="hero-desc">{current.description || "A new adventure is waiting. Dive into the latest episodes and discover your next obsession."}</p>
+
+                    <div className="hero-genres">
+                      {(current.genres || genres.slice(0, 4)).map((g) => (
+                        <span key={g} className="hero-genre-tag">{g}</span>
+                      ))}
+                    </div>
+
+                    <div className="hero-actions">
+                      <button className="btn btn-primary" type="button" onClick={() => navigate(`/anime/${current.id}`)}>
+                        Watch Now
+                      </button>
+                      <button className="btn btn-ghost" type="button" onClick={() => navigate(`/search?q=${encodeURIComponent(titleOf(current))}`)}>
+                        More Info
+                      </button>
+                    </div>
+
+                    <div className="hero-stats">
+                      <div className="hero-stat">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" /></svg>
+                        {current.score != null ? fmtScore(current.score) : "9.4"}
+                      </div>
+                      <div className="hero-stat">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm1 15h-2v-2h2Zm0-4h-2V7h2Z" /></svg>
+                        {current.episodes ? `${current.episodes} episodes` : "Fresh"}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="hero-cover-wrap">
+                    <div className="hero-cover-glow" />
+                    <img className="hero-cover" src={current.coverImage ? api.img(current.coverImage) : ""} alt={titleOf(current)} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="hero-indicators">
+            {top10.map((m, i) => (
+              <button
+                key={m.id}
+                type="button"
+                className={`hero-dot${i === safeSlide ? " active" : ""}`}
+                aria-label={`Go to slide ${i + 1}`}
+                onClick={() => jump(i)}
+              />
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      <section className="content-section" style={{ paddingTop: 24 }}>
+        <div className="container">
+          <div className="genre-bar">
+            {genres.map((genre) => (
+              <button key={genre} className="genre-pill" type="button" onClick={() => navigate('/search')}>{genre}</button>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="content-section">
+        <div className="container home-grid">
+          <div className="home-sections">
+            <AnimeRow title="Trending Now" items={trending} isRanked={true} viewAllUrl="/search" />
+            <AnimeRow title="Most Popular" items={popular} viewAllUrl="/search" />
+            <AnimeRow title="Recently Added" items={recent} viewAllUrl="/search" />
+            <AnimeRow title="Movies" items={popular.slice(0, 12)} viewAllUrl="/movies" />
+          </div>
+
+          <aside className="sidebar-widget">
+            <div className="sidebar-tabs">
+              <button type="button" className="sidebar-tab active">Top Airing</button>
+              <button type="button" className="sidebar-tab">New</button>
+            </div>
+            <div>
+              {trending.slice(0, 5).map((item, idx) => (
+                <button key={item.id || idx} type="button" className="sidebar-item" onClick={() => navigate(`/anime/${item.id}`)}>
+                  <span className="sidebar-rank">{idx + 1}</span>
+                  <img className="sidebar-thumb" src={item.coverImage ? api.img(item.coverImage) : ""} alt={titleOf(item)} />
+                  <div style={{ flex: 1, textAlign: "left" }}>
+                    <div className="sidebar-title">{titleOf(item)}</div>
+                    <div className="sidebar-meta">{item.format || "TV"}</div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </aside>
+        </div>
+      </section>
+    </>
+  );
+}

frontend/src/pages/Landing.jsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { api } from "../api.js";
+import HeroSection from "../components/HeroSection.jsx";
+import LibraryMarquee from "../components/LibraryMarquee.jsx";
+
+export default function Landing() {
+  const navigate = useNavigate();
+  const [marqueeItems, setMarqueeItems] = useState([]);
+
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      try {
+        const [t, p, r] = await Promise.all([
+          api.trending(1),
+          api.popular(1),
+          api.recent(1),
+        ]);
+        if (!alive) return;
+        setMarqueeItems([...(t.results || []), ...(p.results || []), ...(r.results || [])]);
+      } catch (e) {
+        console.error(e);
+      }
+    })();
+    return () => { alive = false; };
+  }, []);
+
+  return (
+    <>
+      {/* HERO — the anicove logo through the stats */}
+      <HeroSection />
+
+      {/* LIBRARY THAT KEEPS MOVING */}
+      <LibraryMarquee items={marqueeItems} />
+
+      {/* FEATURE — EVERYTHING STAYS CONNECTED */}
+      <section className="feature-section">
+        <div className="container">
+          <div className="feature-eyebrow">EVERYTHING STAYS CONNECTED</div>
+          <h2 className="feature-heading">
+            One place for every <span className="accent">kind of story.</span>
+          </h2>
+          <p className="feature-desc">
+            Jump between a weekly anime episode, a manga chapter, a movie, or an opening theme — all without rebuilding your library each time.
+          </p>
+
+          <div className="feature-card">
+            <div className="feature-card-icon">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              </svg>
+            </div>
+            <div className="feature-card-eyebrow">YOUR RULES, YOUR LISTS</div>
+            <h3 className="feature-card-title">Connected Tracking</h3>
+            <p className="feature-card-desc">
+              Link AniList, MAL, or both. anidoom records completed episodes using the tracking rules you choose.
+            </p>
+
+            <div className="feature-track-item">
+              <div className="feature-track-name">AniList</div>
+              <div className="feature-track-sub">Progress &amp; status sync</div>
+              <div className="feature-track-badge">Synced</div>
+            </div>
+            <div className="feature-track-item">
+              <div className="feature-track-name">MyAnimeList</div>
+              <div className="feature-track-sub">Auto score &amp; list sync</div>
+              <div className="feature-track-badge">Synced</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ENTER CTA */}
+      <section className="landing-enter">
+        <div className="landing-enter-glow" />
+        <div className="landing-enter-inner">
+          <div className="landing-enter-label">EVERYTHING. CONNECTED.</div>
+          <h2 className="landing-enter-title">Ready to dive in?</h2>
+          <p className="landing-enter-desc">
+            Anime, manga, movies, TV and music — with progress that follows you everywhere.
+          </p>
+          <button className="btn btn-primary" onClick={() => navigate("/home")}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M8 5v14l11-7z" />
+            </svg>
+            Enter anicove
+          </button>
+        </div>
+      </section>
+    </>
+  );
+}

frontend/src/pages/Manga.jsx

@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from "react";
+import { api } from "../api.js";
+import MangaCard from "../components/MangaCard.jsx";
+
+export default function Manga() {
+  const [sections, setSections] = useState([]);
+  const [q, setQ] = useState("");
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searching, setSearching] = useState(false);
+  const [error, setError] = useState(null);
+  const debounce = useRef(null);
+
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      try {
+        const data = await api.mangaHome();
+        if (!alive) return;
+        setSections(data || []);
+      } catch (e) {
+        if (alive) setError(e.message);
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!q.trim()) {
+      setResults([]);
+      setSearching(false);
+      return undefined;
+    }
+    setSearching(true);
+    clearTimeout(debounce.current);
+    debounce.current = setTimeout(async () => {
+      try {
+        const data = await api.mangaSearch(q.trim());
+        setResults(data || []);
+      } catch (e) {
+        setError(e.message);
+        setResults([]);
+      } finally {
+        setSearching(false);
+      }
+    }, 350);
+    return () => clearTimeout(debounce.current);
+  }, [q]);
+
+  const showSearch = q.trim().length > 0;
+
+  return (
+    <div className="container" style={{ paddingTop: "calc(var(--header-h) + 30px)", paddingBottom: 80 }}>
+      {/* MANGA HERO BANNER */}
+      <div className="section-header" style={{ marginBottom: 12 }}>
+        <h1 className="section-title" style={{ fontSize: "1.8rem" }}>
+          Manga Vault
+        </h1>
+      </div>
+      <p style={{ color: "var(--text-secondary)", marginBottom: 28, fontSize: "0.95rem" }}>
+        Read thousands of manga, manhwa &amp; manhua online with zero ads.
+      </p>
+
+      {/* SEARCH BAR */}
+      <div className="hero-search-wrap" style={{ margin: "0 0 36px 0", maxWidth: 640 }}>
+        <input
+          type="text"
+          className="hero-search-input"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          placeholder="Search manga, manhwa, authors..."
+        />
+        <div className="hero-search-btn">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" width="18" height="18">
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+        </div>
+      </div>
+
+      {error && !showSearch ? (
+        <div className="error-box">
+          {error}
+          <div style={{ marginTop: 8, fontSize: "0.82rem" }}>
+            Start the MangaVault sidecar with <code>manga-vault/run.bat</code>.
+          </div>
+        </div>
+      ) : null}
+
+      {showSearch ? (
+        searching ? (
+          <div className="loader">
+            <div className="spinner" />
+            <span>Searching manga...</span>
+          </div>
+        ) : results.length ? (
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: "20px 16px" }}>
+            {results.map((m, i) => (
+              <MangaCard key={`${m.source}-${m.id}-${i}`} manga={m} />
+            ))}
+          </div>
+        ) : (
+          <div className="empty-msg">
+            <p>No manga found for "{q}".</p>
+          </div>
+        )
+      ) : loading ? (
+        <div className="scroll-row" style={{ flexWrap: "wrap", gap: 20, overflow: "visible" }}>
+          {Array.from({ length: 12 }).map((_, i) => (
+            <div key={i} className="anime-card skel-card">
+              <div className="skel-poster skeleton" />
+              <div className="skel-line skeleton" />
+              <div className="skel-line skel-line-sm skeleton" />
+            </div>
+          ))}
+        </div>
+      ) : sections.length ? (
+        sections.map((section) => (
+          <section key={section.key} className="content-section" style={{ padding: "20px 0" }}>
+            <div className="section-header">
+              <div className="section-title">{section.title}</div>
+              <span className="section-link">{section.key.split("_")[0]} →</span>
+            </div>
+            <div className="scroll-row">
+              {section.items.map((m, i) => (
+                <MangaCard key={`${section.key}-${m.id}-${i}`} manga={m} />
+              ))}
+            </div>
+          </section>
+        ))
+      ) : (
+        <div className="empty-msg">
+          <p>No manga catalog loaded. Check sidecar connection.</p>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/MangaDetails.jsx

@@ -0,0 +1,185 @@
+import { useEffect, useMemo, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { api } from "../api.js";
+import { lastChapterIndex, saveLastRead } from "../utils/mangaProgress.js";
+
+export default function MangaDetails() {
+  const { source, id } = useParams();
+  const navigate = useNavigate();
+  const [manga, setManga] = useState(null);
+  const [error, setError] = useState(null);
+  const [showFullDesc, setShowFullDesc] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    setManga(null);
+    setError(null);
+    (async () => {
+      try {
+        const data = await api.mangaDetails(source, id);
+        if (alive) setManga(data);
+      } catch (e) {
+        if (alive) setError(e.message);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [source, id]);
+
+  const chapters = manga?.chapters || [];
+  const lastIdx = useMemo(() => lastChapterIndex(source, id), [source, id, manga]);
+  const continueIdx = Number.isInteger(lastIdx) && lastIdx < chapters.length ? lastIdx : 0;
+
+  function openChapter(idx) {
+    const chapter = chapters[idx];
+    if (!chapter) return;
+    saveLastRead(source, id, idx);
+    navigate(
+      `/manga/read?source=${source}&id=${encodeURIComponent(id)}&path=${encodeURIComponent(chapter.imagePath)}`,
+      { state: { mangaTitle: manga?.title } }
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container" style={{ paddingTop: "calc(var(--header-h) + 40px)" }}>
+        <div className="error-box">{error}</div>
+      </div>
+    );
+  }
+
+  if (!manga) {
+    return (
+      <div className="loader" style={{ minHeight: "80vh" }}>
+        <div className="spinner" />
+        <span>Loading manga details...</span>
+      </div>
+    );
+  }
+
+  const cover = manga.cover ? api.mangaImg(manga.cover, manga.source) : null;
+
+  return (
+    <div className="info-page">
+      {/* HERO BANNER */}
+      <div className="info-hero">
+        {cover ? (
+          <div className="info-hero-bg" style={{ backgroundImage: `url(${cover})` }} />
+        ) : null}
+        <div className="info-hero-grad" />
+        <div className="container info-hero-content">
+          <div className="info-hero-body">
+            <div className="info-poster">
+              <img src={cover} alt={manga.title} />
+            </div>
+            <div className="info-meta-block">
+              <div className="info-type-tag">
+                <span className="info-type-tag-dot" />
+                <span>MANGA</span>
+                <span>•</span>
+                <span>{manga.source}</span>
+              </div>
+              <h1 className="info-title">{manga.title}</h1>
+              <div className="info-badges">
+                <span className="badge badge-green">{manga.status || "Ongoing"}</span>
+                <span className="badge badge-accent">{chapters.length} CHAPTERS</span>
+                {manga.views ? <span className="badge badge-dark">{manga.views} Views</span> : null}
+              </div>
+              {manga.genres ? (
+                <div className="info-genres">
+                  {manga.genres.map((g) => (
+                    <span key={g} className="info-genre-pill">{g}</span>
+                  ))}
+                </div>
+              ) : null}
+              <div className="info-actions">
+                <button className="btn info-btn-watch" onClick={() => openChapter(continueIdx)}>
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                    <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                  </svg>
+                  {lastIdx != null ? "Continue Reading" : "Start Reading"}
+                </button>
+                <Link to="/manga" className="btn info-btn-ghost">
+                  ← Back to Vault
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* DETAILS & CHAPTER LIST */}
+      <div className="container info-body">
+        <div className="info-layout">
+          <div className="info-main-col">
+            <div className="info-section-label">Synopsis</div>
+            <p className={`info-synopsis ${!showFullDesc ? "clamped" : ""}`}>
+              {manga.description || "No synopsis available for this title."}
+            </p>
+            {manga.description && manga.description.length > 200 ? (
+              <button className="show-more-btn" onClick={() => setShowFullDesc(!showFullDesc)}>
+                {showFullDesc ? "Show Less" : "Show More"}
+              </button>
+            ) : null}
+
+            <div className="info-section-label" style={{ marginTop: 36 }}>
+              Chapters ({chapters.length})
+            </div>
+            {chapters.length ? (
+              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(130px, 1fr))", gap: 10 }}>
+                {chapters.map((ch, i) => (
+                  <button
+                    key={`${ch.id}-${i}`}
+                    className={`ep-btn ${i === continueIdx && lastIdx != null ? "active" : ""}`}
+                    onClick={() => openChapter(i)}
+                    style={{
+                      padding: "10px 12px",
+                      borderRadius: "var(--radius-md)",
+                      background: i === continueIdx && lastIdx != null ? "rgba(124,58,237,0.18)" : "var(--bg-surface)",
+                      border: "1px solid " + (i === continueIdx && lastIdx != null ? "rgba(124,58,237,0.4)" : "var(--border)"),
+                      color: "var(--text-primary)",
+                      textAlign: "center",
+                      fontWeight: 600,
+                      fontSize: "0.83rem",
+                      cursor: "pointer",
+                      transition: "var(--transition)"
+                    }}
+                  >
+                    {ch.number != null ? `Ch. ${ch.number}` : ch.title || `Ch. ${i + 1}`}
+                  </button>
+                ))}
+              </div>
+            ) : (
+              <div className="empty-msg">
+                <p>No chapters available.</p>
+              </div>
+            )}
+          </div>
+
+          <div className="info-side-col">
+            <div className="info-section-label">Information</div>
+            <div className="info-stats-grid">
+              <div className="info-stat-cell">
+                <div className="info-stat-label">Source</div>
+                <div className="info-stat-value">{manga.source}</div>
+              </div>
+              <div className="info-stat-cell">
+                <div className="info-stat-label">Status</div>
+                <div className="info-stat-value">{manga.status || "Ongoing"}</div>
+              </div>
+              <div className="info-stat-cell">
+                <div className="info-stat-label">Authors</div>
+                <div className="info-stat-value">{manga.authors || "Unknown"}</div>
+              </div>
+              <div className="info-stat-cell">
+                <div className="info-stat-label">Total Chapters</div>
+                <div className="info-stat-value">{chapters.length}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/MovieDetails.jsx

@@ -0,0 +1,285 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { api } from "../api.js";
+import { getProgress, CW_KEY } from "../utils/watchProgress.js";
+
+export default function MovieDetails() {
+  const { slug } = useParams();
+  const navigate = useNavigate();
+  const [media, setMedia] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [season, setSeason] = useState(null);
+  const [showFull, setShowFull] = useState(false);
+  const [watchedEps, setWatchedEps] = useState(new Set());
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    setError(null);
+    (async () => {
+      try {
+        const m = await api.movieDetails(slug);
+        if (!alive) return;
+        setMedia(m);
+        setSeason(m.seasons?.length ? m.seasons[0] : null);
+        
+        // Load watched episodes
+        const progress = getProgress(CW_KEY.movie(slug));
+        if (progress) {
+          const watched = new Set();
+          if (progress.se && progress.ep) {
+            watched.add(`${progress.se}-${progress.ep}`);
+          }
+          setWatchedEps(watched);
+        }
+      } catch (e) {
+        if (alive) setError(e.message);
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+    return () => { alive = false; };
+  }, [slug]);
+
+  if (loading) {
+    return (
+      <div className="loader" style={{ minHeight: "80vh" }}>
+        <div className="spinner" />
+        <span>Loading title...</span>
+      </div>
+    );
+  }
+
+  if (error || !media) {
+    const isMissing = error?.status === 404 || /not found|coming soon/i.test(error || "");
+    return (
+      <div className="empty" style={{ minHeight: "50vh", paddingTop: 80 }}>
+        <div className="big">🎬</div>
+        {isMissing ? (
+          <>
+            <h2 style={{ margin: "0 0 8px" }}>Not available yet</h2>
+            <p style={{ maxWidth: 420, margin: "0 auto" }}>
+              This title isn&apos;t watchable on MovieBox right now — it may be
+              coming soon or has been removed. Try searching for something else.
+            </p>
+            <button className="btn info-btn-ghost" onClick={() => navigate("/movies")}>
+              Browse Movies
+            </button>
+          </>
+        ) : (
+          <p>{error || "Title not found."}</p>
+        )}
+      </div>
+    );
+  }
+
+  const isSeries = media.type === 2 || media.seasons?.length > 0;
+  const title = media.title;
+  const genres = media.genres || [];
+  const cast = media.cast || [];
+  const rating = media.rating ? Number(media.rating).toFixed(1) : null;
+
+  function handleWatch(se = 0, ep = 0) {
+    if (isSeries) {
+      navigate(`/movies/${media.slug}/watch?se=${se}&ep=${ep}`);
+    } else {
+      navigate(`/movies/${media.slug}/watch`);
+    }
+  }
+
+  return (
+    <div className="info-page">
+      <div className="info-hero">
+        {media.banner ? (
+          <div className="info-hero-bg" style={{ backgroundImage: `url(${api.img(media.banner)})` }} />
+        ) : null}
+        <div className="info-hero-grad" />
+        <div className="container info-hero-content">
+          <div className="info-hero-body">
+            <div className="info-poster">
+              <img src={api.img(media.cover)} alt={title} />
+            </div>
+            <div className="info-meta-block">
+              <div className="info-type-tag">
+                <span className="info-type-tag-dot" />
+                <span>{isSeries ? "TV Series" : "Movie"}</span>
+                <span>•</span>
+                <span>{media.year || media.country || "—"}</span>
+                {media.corner ? <span>•</span> : null}
+                {media.corner ? <span>{media.corner}</span> : null}
+              </div>
+              <h1 className="info-title">{title}</h1>
+              <div className="info-badges">
+                {rating ? <span className="badge badge-score">★ {rating}</span> : null}
+                <span className="badge badge-green">{isSeries ? "Series" : "Feature"}</span>
+                {media.duration ? <span className="badge badge-dark">{media.duration} min</span> : null}
+                {media.country ? <span className="badge badge-dark">{media.country}</span> : null}
+              </div>
+              {genres.length ? (
+                <div className="info-genres">
+                  {genres.map((g) => (
+                    <span key={g} className="info-genre-pill">{g}</span>
+                  ))}
+                </div>
+              ) : null}
+              <div className="info-actions">
+                {media.hasResource ? (
+                  <button
+                    className="btn info-btn-watch"
+                    onClick={() => handleWatch(season?.se ?? 0, isSeries ? 1 : 0)}
+                  >
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M8 5v14l11-7z" />
+                    </svg>
+                    {isSeries ? `Watch S${season?.se ?? 1}E1` : "Watch Now"}
+                  </button>
+                ) : (
+                  <span className="badge badge-dark" style={{ fontSize: "0.85rem", padding: "10px 16px" }}>
+                    Stream unavailable{media.note ? ` — ${media.note}` : ""}
+                  </span>
+                )}
+                {media.trailer ? (
+                  <a
+                    className="btn info-btn-ghost"
+                    href={media.trailer}
+                    target="_blank"
+                    rel="noreferrer"
+                    style={{ textDecoration: "none" }}
+                  >
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M8 5v14l11-7z" />
+                    </svg>
+                    Trailer
+                  </a>
+                ) : null}
+                <button className="btn info-btn-ghost" onClick={() => {
+                  navigator.clipboard.writeText(window.location.href);
+                }} title="Copy link">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+                  </svg>
+                  Share
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container info-body">
+        <div className="info-layout">
+          <div className="info-main-col">
+            <div className="info-section-label">Synopsis</div>
+            <p className={`info-synopsis ${!showFull ? "clamped" : ""}`}>
+              {media.description || "No description available for this title."}
+            </p>
+            {media.description && media.description.length > 200 ? (
+              <button className="show-more-btn" onClick={() => setShowFull(!showFull)}>
+                {showFull ? "Show Less" : "Show More"}
+              </button>
+            ) : null}
+
+            {cast.length ? (
+              <>
+                <div className="info-section-label" style={{ marginTop: 32 }}>Cast</div>
+                <div className="cast-row">
+                  {cast.map((person, i) => (
+                    <div key={`${person.name}-${i}`} className="cast-chip" title={person.character}>
+                      {person.avatar ? (
+                        <img src={api.img(person.avatar)} alt={person.name} loading="lazy" />
+                      ) : (
+                        <div className="cast-avatar-fallback">{(person.name || "?").charAt(0)}</div>
+                      )}
+                      <div className="cast-chip-name">{person.name}</div>
+                      <div className="cast-chip-role">{person.character || "—"}</div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            ) : null}
+          </div>
+
+          <div className="info-side-col">
+            <div className="info-section-label">Information</div>
+            <div className="info-stats-grid">
+              <div className="info-stat-cell">
+                <div className="info-stat-label">Type</div>
+                <div className="info-stat-value">{isSeries ? "TV Series" : "Movie"}</div>
+              </div>
+              <div className="info-stat-cell">
+                <div className="info-stat-label">Released</div>
+                <div className="info-stat-value">{media.releaseDate || media.year || "—"}</div>
+              </div>
+              <div className="info-stat-cell">
+                <div className="info-stat-label">Rating</div>
+                <div className="info-stat-value">{rating ? `★ ${rating}` : "—"}</div>
+              </div>
+              <div className="info-stat-cell">
+                <div className="info-stat-label">Duration</div>
+                <div className="info-stat-value">{media.duration ? `${media.duration} min` : "—"}</div>
+              </div>
+              <div className="info-stat-cell">
+                <div className="info-stat-label">Audio</div>
+                <div className="info-stat-value">
+                  {media.audioTracks?.length
+                    ? media.audioTracks.filter((t) => t?.original).map((t) => t.lanName).join(", ")
+                    : "Original"}
+                </div>
+              </div>
+              <div className="info-stat-cell">
+                <div className="info-stat-label">IMDb votes</div>
+                <div className="info-stat-value">
+                  {media.imdbCount ? media.imdbCount.toLocaleString?.() || media.imdbCount : "—"}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Season + episode picker for series */}
+        {isSeries && media.seasons?.length ? (
+          <div style={{ marginTop: 40 }}>
+            <div className="info-section-label">Episodes</div>
+            {media.seasons.length > 1 ? (
+              <div className="movie-tabs" style={{ marginBottom: 18 }}>
+                {media.seasons.map((s) => (
+                  <button
+                    key={s.se}
+                    type="button"
+                    className={season?.se === s.se ? "active" : ""}
+                    onClick={() => setSeason(s)}
+                  >
+                    Season {s.se}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+            <div className="ep-grid">
+              {Array.from({ length: season?.maxEp || 0 }).map((_, i) => {
+                const ep = i + 1;
+                const isWatched = watchedEps.has(`${season.se}-${ep}`);
+                return (
+                  <button
+                    key={ep}
+                    className={`ep-grid-btn ${isWatched ? "watched" : ""}`}
+                    onClick={() => handleWatch(season.se, ep)}
+                  >
+                    <span className="ep-grid-num">{ep}</span>
+                    {isWatched && <span className="ep-grid-watched">✓</span>}
+                    <span className="ep-grid-play">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M8 5v14l11-7z" />
+                      </svg>
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/MovieWatch.jsx

@@ -0,0 +1,326 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { api, proxiedStreamUrl, streamHeaders } from "../api.js";
+import HlsPlayer from "../components/HlsPlayer.jsx";
+import { CW_KEY, getProgress, removeProgress, saveProgress } from "../utils/watchProgress.js";
+
+/** Fetch an .srt via the HLS worker and return a WebVTT blob URL (or null). */
+async function srtToVttBlob(url, ref) {
+  try {
+    const res = await fetch(proxiedStreamUrl(url, ref), { headers: streamHeaders() });
+    if (!res.ok) return null;
+    const srt = await res.text();
+    // SRT timestamps "00:00:01,000" → WebVTT "00:00:01.000"
+    const vtt = "WEBVTT\n\n" + srt.replace(/(\d{2}:\d{2}:\d{2}),(\d{3})/g, "$1.$2");
+    return URL.createObjectURL(new Blob([vtt], { type: "text/vtt" }));
+  } catch {
+    return null;
+  }
+}
+
+export default function MovieWatch() {
+  const { slug } = useParams();
+  const [searchParams] = useSearchParams();
+  const se = Number(searchParams.get("se") || 0);
+  const ep = Number(searchParams.get("ep") || 0);
+  const navigate = useNavigate();
+
+  const [data, setData] = useState(null);
+  const [media, setMedia] = useState(null);
+  const [quality, setQuality] = useState(0);
+  const [captions, setCaptions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [selectedSeason, setSelectedSeason] = useState(se || 1);
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    setError(null);
+    setCaptions([]);
+    setQuality(0);
+    (async () => {
+      try {
+        const [s, m] = await Promise.all([
+          api.movieStream(slug, se, ep),
+          api.movieDetails(slug).catch(() => null),
+        ]);
+        if (!alive) return;
+        setData(s);
+        setMedia(m);
+        // Convert SRT captions to WebVTT blobs (through the HLS worker for CORS).
+        const ref = s.streams?.[0]?.referer || "";
+        const tracks = await Promise.all(
+          (s.captions || []).map(async (c) => ({
+            ...c,
+            vtt: await srtToVttBlob(c.url, ref),
+          }))
+        );
+        if (alive) setCaptions(tracks.filter((t) => t.vtt));
+      } catch (e) {
+        if (alive) setError(e.message);
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+    return () => { alive = false; };
+  }, [slug, se, ep]);
+
+  const streams = useMemo(() => data?.streams || [], [data]);
+  const selected = streams[quality] || streams[0];
+
+  const isSeries = media?.type === 2 || media?.seasons?.length > 0;
+  const currentSeasonData = media?.seasons?.find((s) => s.se === selectedSeason);
+  const maxEp = currentSeasonData?.maxEp;
+  const totalSeasons = media?.seasons?.length || 1;
+  const seasons = media?.seasons || [];
+
+  function goTo(nse, nep) {
+    const params = new URLSearchParams();
+    if (nse > 0) params.set("se", nse);
+    if (nep > 0) params.set("ep", nep);
+    navigate(`/movies/${slug}/watch${params.toString() ? `?${params}` : ""}`);
+    setSelectedSeason(nse);
+  }
+
+  function nextEp() {
+    if (!isSeries) return;
+    if (ep < (maxEp || 1)) goTo(selectedSeason, ep + 1);
+    else if (selectedSeason < totalSeasons) goTo(selectedSeason + 1, 1);
+  }
+
+  function prevEp() {
+    if (!isSeries) return;
+    if (ep > 1) goTo(selectedSeason, ep - 1);
+    else if (selectedSeason > 1) goTo(selectedSeason - 1, media?.seasons?.find((s) => s.se === selectedSeason - 1)?.maxEp || 1);
+  }
+
+  const title = media?.title || "Title";
+  const watchLabel = isSeries ? `S${se || 1} E${ep || 1}` : "Movie";
+
+  const progressKey = CW_KEY.movie(slug);
+
+  // Resume position for this episode, from the Continue Watching store.
+  const startAt = useMemo(() => {
+    const p = getProgress(progressKey);
+    return p && p.se === se && p.ep === ep ? p.position || 0 : 0;
+  }, [progressKey, se, ep]);
+
+  // Record playback progress (throttled by the player). Finished titles drop
+  // out of Continue Watching automatically.
+  const handleProgress = useCallback(
+    ({ position, duration, ended }) => {
+      if (ended || (duration > 0 && position / duration > 0.92)) {
+        removeProgress(progressKey);
+        return;
+      }
+      saveProgress({
+        key: progressKey,
+        type: "movie",
+        mediaId: slug,
+        title,
+        image: media?.cover || "",
+        href: se > 0 || ep > 0 ? `/movies/${slug}/watch?se=${se}&ep=${ep}` : `/movies/${slug}/watch`,
+        label: watchLabel,
+        category: "",
+        se,
+        ep,
+        position: Math.floor(position),
+        duration: Math.floor(duration),
+        updatedAt: Date.now(),
+      });
+    },
+    [progressKey, slug, se, ep, title, watchLabel, media]
+  );
+
+  return (
+    <div className="watch-page">
+      <div className="watch-container">
+        <div className="watch-layout">
+          <div className="watch-main">
+            <div className="player-wrap">
+              {loading ? (
+                <div className="player-loading">
+                  <div className="spinner" />
+                  <span>Loading Player...</span>
+                </div>
+              ) : error ? (
+                <div className="player-error">
+                  <div className="big">🎬</div>
+                  <p>{error}</p>
+                </div>
+              ) : selected ? (
+                <HlsPlayer
+                  key={`${slug}-${se}-${ep}`}
+                  sources={{
+                    streams: [selected],
+                    subtitles: captions.map((c) => ({
+                      file: c.vtt,
+                      label: c.label || c.lang || "English",
+                      kind: "captions",
+                      srcLang: c.lang || "en",
+                    })),
+                  }}
+                  onProgress={handleProgress}
+                  startAt={startAt}
+                />
+              ) : (
+                <div className="player-error">
+                  <div className="big">📺</div>
+                  <p>{data?.note || "No stream available for this title yet."}</p>
+                </div>
+              )}
+            </div>
+
+            {streams.length > 1 ? (
+              <div className="movie-quality-bar">
+                <span className="movie-quality-label">Quality</span>
+                <div className="movie-quality-options">
+                  {streams.map((s, i) => (
+                    <button
+                      key={`${s.resolution}-${i}`}
+                      className={`movie-quality-btn ${quality === i ? "active" : ""}`}
+                      onClick={() => setQuality(i)}
+                    >
+                      {s.resolution || s.format || "HD"}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+
+            <div className="ep-label">{watchLabel}</div>
+            <h1 className="ep-title">{title}</h1>
+
+            <div className="watch-anime-row">
+              {media?.cover ? (
+                <div className="watch-anime-thumb">
+                  <img src={api.img(media.cover)} alt={title} />
+                </div>
+              ) : null}
+              <div>
+                <div className="watch-anime-name">{title}</div>
+                <div className="watch-anime-sub-text">
+                  {isSeries ? "TV Series" : "Movie"} • {media?.year || media?.country || "—"}
+                </div>
+              </div>
+
+              <div className="watch-audio-btns">
+                {isSeries ? (
+                  <>
+                    <button className="audio-btn" onClick={prevEp} disabled={se <= 1 && ep <= 1}>
+                      ← Prev
+                    </button>
+                    <button className="audio-btn" onClick={nextEp}>
+                      Next →
+                    </button>
+                  </>
+                ) : null}
+                {selected?.downloadUrl ? (
+                  <a
+                    className="server-btn download-btn"
+                    href={selected.downloadUrl}
+                    download
+                    title={`Download ${selected.resolution || selected.format || "video"}`}
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M12 3v10.17l-3.59-3.58L7 11l5 5 5-5-1.41-1.41L13 13.17V3h-1zM5 19h14v2H5z" />
+                    </svg>
+                    Download
+                  </a>
+                ) : null}
+                {media?.trailer ? (
+                  <a className="server-btn" href={media.trailer} target="_blank" rel="noreferrer">
+                    Trailer
+                  </a>
+                ) : null}
+                <button className="server-btn" onClick={() => navigate(`/movies/${slug}`)}>
+                  Details
+                </button>
+              </div>
+            </div>
+
+            <div className="watch-info-card">
+              <div className="watch-info-title">{title}</div>
+              <div className="watch-info-meta">
+                {media?.rating ? <span className="watch-meta-score">★ {Number(media.rating).toFixed(1)}</span> : null}
+                <span className="watch-meta-dot" />
+                <span className="watch-meta-item">{isSeries ? "TV Series" : "Movie"}</span>
+                <span className="watch-meta-dot" />
+                <span className="watch-meta-item">{media?.year || "—"}</span>
+                {media?.duration ? (
+                  <>
+                    <span className="watch-meta-dot" />
+                    <span className="watch-meta-item">{media.duration}m</span>
+                  </>
+                ) : null}
+              </div>
+              {media?.genres?.length ? (
+                <div className="watch-genres">
+                  {media.genres.map((g) => (
+                    <span key={g} className="watch-genre-pill">{g}</span>
+                  ))}
+                </div>
+              ) : null}
+              <p className="watch-synopsis">{media?.description || "No description available."}</p>
+            </div>
+          </div>
+
+          <div className="watch-sidebar">
+            <div className="sidebar-head">
+              <div className="sidebar-upnext">{isSeries ? "Episodes" : "Now Playing"}</div>
+              <div className="sidebar-subtitle">
+                {isSeries ? `Season ${selectedSeason || 1}` : media?.title || " "}
+              </div>
+            </div>
+
+            {isSeries && totalSeasons > 1 ? (
+              <div className="season-selector">
+                <span className="season-label">Season</span>
+                <div className="season-options">
+                  {seasons.map((s) => (
+                    <button
+                      key={s.se}
+                      className={`season-btn ${selectedSeason === s.se ? "active" : ""}`}
+                      onClick={() => goTo(s.se, 1)}
+                    >
+                      S{s.se}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+
+            {isSeries ? (
+              <div className="ep-list">
+                {Array.from({ length: maxEp || 0 }).map((_, i) => {
+                  const n = i + 1;
+                  const active = n === ep;
+                  const progress = getProgress(CW_KEY.movie(slug));
+                  const isWatched = progress && progress.se === selectedSeason && progress.ep === n && (progress.position / progress.duration) > 0.92;
+                  return (
+                    <div key={n} className={`ep-item ${active ? "active" : ""} ${isWatched ? "watched" : ""}`} onClick={() => goTo(selectedSeason, n)}>
+                      <div className="ep-thumb">
+                        {media?.cover ? <img src={api.img(media.cover)} alt="" /> : null}
+                        <div className="ep-thumb-label">EP {n}</div>
+                        {isWatched && <div className="ep-watched-badge">✓</div>}
+                      </div>
+                      <div className="ep-info">
+                        <div className="ep-info-title">Episode {n}</div>
+                        <div className="ep-info-sub">{title}</div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="empty" style={{ padding: "24px 8px" }}>
+                <p>Feature film — sit back and enjoy.</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Movies.jsx

@@ -0,0 +1,291 @@
+import { useEffect, useRef, useState } from "react";
+import { api } from "../api.js";
+import MovieCard from "../components/MovieCard.jsx";
+import MovieRow from "../components/MovieRow.jsx";
+
+const TABS = [
+  { key: "home", label: "Home" },
+  { key: "movie", label: "Movies" },
+  { key: "tv", label: "TV Series" },
+  { key: "animation", label: "Animation" },
+];
+
+const SORTS = ["RECOMMEND", "HOT", "NEW", "RATING", "POPULAR", "LATEST"];
+
+const GRID_STYLE = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))",
+  gap: "20px 16px",
+};
+
+export default function Movies() {
+  const [tab, setTab] = useState("home");
+  const [sections, setSections] = useState([]);
+  const [catalog, setCatalog] = useState([]);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
+  const [sort, setSort] = useState("RECOMMEND");
+  const [q, setQ] = useState("");
+  const [results, setResults] = useState([]);
+  const [searching, setSearching] = useState(false);
+  const [suggestions, setSuggestions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const debounce = useRef(null);
+  const suggestRef = useRef(null);
+
+  // ── home sections (once) ─────────────────────────────────────────
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      try {
+        const data = await api.movieHome();
+        if (alive) setSections(data || []);
+      } catch (e) {
+        if (alive) setError(e.message);
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+    return () => { alive = false; };
+  }, []);
+
+  // ── catalog load (per tab/sort/page) ─────────────────────────────
+  useEffect(() => {
+    if (tab === "home" || q.trim()) return undefined;
+    let alive = true;
+    setLoading(true);
+    (async () => {
+      try {
+        const data = await api.movieCatalog(tab, page, sort);
+        if (!alive) return;
+        setCatalog((prev) => (page === 1 ? data.results : [...prev, ...data.results]));
+        setHasMore(data.hasNextPage);
+      } catch (e) {
+        if (alive) setError(e.message);
+      } finally {
+        if (alive) setLoading(false);
+      }
+    })();
+    return () => { alive = false; };
+  }, [tab, page, sort, q]);
+
+  // ── search + suggestions (debounced) ─────────────────────────────
+  useEffect(() => {
+    if (!q.trim()) {
+      setResults([]);
+      setSuggestions([]);
+      setSearching(false);
+      return undefined;
+    }
+    setSearching(true);
+    clearTimeout(debounce.current);
+    debounce.current = setTimeout(async () => {
+      try {
+        const [data, sug] = await Promise.all([
+          api.movieSearch(q.trim(), 1),
+          api.movieSuggest(q.trim()).catch(() => []),
+        ]);
+        setResults(data.results || []);
+        setSuggestions(sug || []);
+      } catch (e) {
+        setError(e.message);
+        setResults([]);
+      } finally {
+        setSearching(false);
+      }
+    }, 350);
+    return () => clearTimeout(debounce.current);
+  }, [q]);
+
+  // close suggestions on outside click
+  useEffect(() => {
+    function onClick(e) {
+      if (suggestRef.current && !suggestRef.current.contains(e.target)) {
+        setSuggestions([]);
+      }
+    }
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, []);
+
+  function switchTab(key) {
+    setTab(key);
+    setPage(1);
+    setCatalog([]);
+    setError(null);
+    setSuggestions([]);
+  }
+
+  function switchSort(value) {
+    setSort(value);
+    setPage(1);
+    setCatalog([]);
+  }
+
+  function loadMore() {
+    setPage((p) => p + 1);
+  }
+
+  function pickSuggestion(s) {
+    setSuggestions([]);
+    setQ(s);
+  }
+
+  const showSearch = q.trim().length > 0;
+  const showHome = tab === "home" && !showSearch;
+
+  return (
+    <div className="container page-shell">
+      <div className="section-header compact">
+        <h1 className="section-title">Movies &amp; TV</h1>
+      </div>
+
+      {/* Search + suggestions */}
+      <div className="movie-search-wrap" ref={suggestRef}>
+        <div className="hero-search-wrap" style={{ margin: "0 0 22px 0", maxWidth: 640 }}>
+          <input
+            type="text"
+            className="hero-search-input"
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            placeholder="Search movies & TV…"
+          />
+          <div className="hero-search-btn">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" width="18" height="18">
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+          </div>
+          {suggestions.length > 0 ? (
+            <div className="movie-suggest">
+              {suggestions.map((s, i) => (
+                <button key={`${s.title}-${i}`} className="movie-suggest-item" onClick={() => pickSuggestion(s.title)}>
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <circle cx="11" cy="11" r="7" />
+                    <path d="m20 20-3.5-3.5" />
+                  </svg>
+                  {s.title}
+                </button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="movie-tabs">
+        {TABS.map((t) => (
+          <button
+            key={t.key}
+            type="button"
+            className={tab === t.key && !showSearch ? "active" : ""}
+            onClick={() => switchTab(t.key)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Sort (catalog tabs only) */}
+      {!showHome && !showSearch ? (
+        <div className="movie-sort">
+          <span className="movie-sort-label">Sort</span>
+          {SORTS.map((s) => (
+            <button key={s} className={sort === s ? "active" : ""} onClick={() => switchSort(s)}>
+              {s}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      {error ? (
+        <div className="error-box">
+          {error}
+          <div style={{ marginTop: 8, fontSize: "0.82rem" }}>
+            MovieBox is rate-limiting requests right now — try again in a few minutes.
+          </div>
+        </div>
+      ) : null}
+
+      {/* Search results */}
+      {showSearch ? (
+        searching ? (
+          <div style={GRID_STYLE}>
+            {Array.from({ length: 12 }).map((_, i) => (
+              <div key={i} className="anime-card skel-card">
+                <div className="skel-poster skeleton" />
+                <div className="skel-line skeleton" />
+                <div className="skel-line skel-line-sm skeleton" />
+              </div>
+            ))}
+          </div>
+        ) : results.length ? (
+          <div style={GRID_STYLE}>
+            {results.map((m) => (
+              <MovieCard key={m.slug || m.id} item={m} />
+            ))}
+          </div>
+        ) : (
+          <div className="empty">
+            <div className="big">🎬</div>
+            <p>No movies found for “{q}”.</p>
+          </div>
+        )
+      ) : null}
+
+      {/* Home rows */}
+      {showHome ? (
+        loading ? (
+          <div style={GRID_STYLE}>
+            {Array.from({ length: 12 }).map((_, i) => (
+              <div key={i} className="anime-card skel-card">
+                <div className="skel-poster skeleton" />
+                <div className="skel-line skeleton" />
+                <div className="skel-line skel-line-sm skeleton" />
+              </div>
+            ))}
+          </div>
+        ) : sections.length ? (
+          sections.map((section) => (
+            <MovieRow key={section.key} title={section.title} items={section.items} />
+          ))
+        ) : (
+          <div className="empty">
+            <div className="big">🎬</div>
+            <p>No sections loaded from MovieBox.</p>
+          </div>
+        )
+      ) : null}
+
+      {/* Catalog grid */}
+      {!showHome && !showSearch ? (
+        <>
+          <div style={GRID_STYLE}>
+            {catalog.map((m) => (
+              <MovieCard key={m.slug || m.id} item={m} />
+            ))}
+          </div>
+          {loading ? (
+            <div className="loader">
+              <div className="spinner" />
+            </div>
+          ) : null}
+          {!loading && catalog.length === 0 && !error ? (
+            <div className="empty">
+              <div className="big">📺</div>
+              <p>No titles in this tab yet.</p>
+            </div>
+          ) : null}
+          {hasMore ? (
+            <div className="load-more-wrap">
+              <button className="btn btn-primary load-more-btn" onClick={loadMore}>
+                Load More
+              </button>
+            </div>
+          ) : null}
+        </>
+      ) : null}
+    </div>
+  );
+}