/* ============================================================
   Lyric.o — Kraft & Vinyl theme
   Warm cream base, ink text, deep-brick accent, goldenrod ratings.
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}

:root{
    /* ---- Kraft & Vinyl palette (default / light) ---- */
    --sp-black:#F2ECDC;            /* app background            */
    --sp-card:#FBF7EC;             /* card surface               */
    --sp-card-hover:#F1E9D6;       /* card hover                 */
    --sp-elevated:#EFE7D3;         /* elevated panels / inputs   */
    --sp-text:#2A2417;             /* primary ink                */
    --sp-text-sub:#5B5340;         /* secondary text             */
    --sp-text-muted:#6E6450;       /* muted text (AA on cream)   */
    --sp-accent:#7C3B33;           /* deep brick — primary accent*/
    --sp-accent-hover:#93463C;
    --sp-sidebar:#EDE4CE;
    --sp-player:#F6F0E1;
    --sp-border:rgba(42,36,23,.14);
    --sp-player-border:rgba(42,36,23,.12);
    --sp-scrollbar:rgba(42,36,23,.18);
    --sp-scrollbar-hover:rgba(42,36,23,.32);
    --sp-green:#3E6B49;
    --sp-red:#A6402E;
    --sp-gold:#96700F;
    --player-h:80px;--tab-h:60px;--topbar-h:64px;
    --lyrics-font-size:16px;
    --font-display:'Fraunces',Georgia,serif;
    --font-body:'Inter',system-ui,-apple-system,sans-serif;
}

[data-theme="dark"]{
    --sp-black:#221B12;
    --sp-card:#2C2317;
    --sp-card-hover:#392D1D;
    --sp-elevated:#332818;
    --sp-text:#F4ECDA;
    --sp-text-sub:#D9CBAE;
    --sp-text-muted:#B4A688;
    --sp-accent:#DE8F76;
    --sp-accent-hover:#E9A78E;
    --sp-sidebar:#1D170F;
    --sp-player:#241C12;
    --sp-border:rgba(244,236,218,.13);
    --sp-player-border:rgba(244,236,218,.10);
    --sp-scrollbar:rgba(244,236,218,.16);
    --sp-scrollbar-hover:rgba(244,236,218,.3);
    --sp-green:#7FB88C;
    --sp-red:#E28870;
    --sp-gold:#E4B84E;
}

body{font-family:var(--font-body);background:var(--sp-black);color:var(--sp-text);overflow:hidden;height:100vh;transition:background .3s ease,color .3s ease}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--sp-scrollbar);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--sp-scrollbar-hover)}
.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* ---- Accessibility: focus & skip link ---- */
a,button,input,select,textarea,[role="button"],[tabindex]{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--sp-accent);outline-offset:2px;border-radius:4px;
}
.skip-link{position:fixed;top:-60px;left:12px;background:var(--sp-accent);color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:600;z-index:99999;transition:top .2s ease;text-decoration:none}
.skip-link:focus{top:12px}

/* ---- Loading screen ---- */
.loading-screen{position:fixed;inset:0;background:var(--sp-black);z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity .6s cubic-bezier(.4,0,.2,1),visibility .6s cubic-bezier(.4,0,.2,1)}
.loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loading-content{text-align:center}
.loading-logo-wrap{position:relative;width:100px;height:100px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.loading-logo{width:72px;height:72px;border-radius:50%;animation:loading-pulse 2s ease-in-out infinite;position:relative;z-index:2}
.loading-ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--sp-accent);border-right-color:var(--sp-accent);animation:loading-spin 1.2s linear infinite;opacity:.7}
.loading-ring::after{content:'';position:absolute;inset:4px;border-radius:50%;border:2px solid transparent;border-bottom-color:var(--sp-text-muted);border-left-color:var(--sp-text-muted);animation:loading-spin 1.8s linear infinite reverse}
.loading-name{font-family:var(--font-display);font-size:28px;font-weight:600;margin-top:20px;color:var(--sp-text);letter-spacing:-.02em;animation:loading-fade-text 2s ease-in-out infinite}
.loading-dots{display:flex;justify-content:center;gap:8px;margin-top:28px}
.loading-dots span{width:8px;height:8px;border-radius:50%;background:var(--sp-accent);animation:loading-dot-bounce 1.4s ease-in-out infinite}
.loading-dots span:nth-child(2){animation-delay:.16s}
.loading-dots span:nth-child(3){animation-delay:.32s}
.loading-text{margin-top:20px;font-size:13px;color:var(--sp-text-muted);animation:loading-fade-text 2s ease-in-out infinite;min-height:20px}
@keyframes loading-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.75}}
@keyframes loading-spin{to{transform:rotate(360deg)}}
@keyframes loading-dot-bounce{0%,80%,100%{transform:scale(.5);opacity:.35}40%{transform:scale(1.1);opacity:1}}
@keyframes loading-fade-text{0%,100%{opacity:.5}50%{opacity:1}}

.skel{background:var(--sp-elevated);border-radius:8px;animation:skel-pulse 1.5s infinite}
@keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.skel-card{background:var(--sp-elevated);border-radius:8px;overflow:hidden;min-width:164px;max-width:164px;flex-shrink:0}
.skel-card .skel-img{width:100%;aspect-ratio:1;background:var(--sp-card)}
.skel-row{height:56px;background:var(--sp-elevated);border-radius:4px;margin-bottom:4px;display:flex;align-items:center;padding:0 16px;gap:12px}
.skel-row .skel-thumb{width:40px;height:40px;border-radius:4px;background:var(--sp-card);flex-shrink:0}
.skel-row .skel-lines{flex:1}
.skel-row .skel-lines div{height:12px;background:var(--sp-card);border-radius:4px;margin-bottom:6px}
.skel-row .skel-lines div:last-child{width:50%;margin-bottom:0}
.skel-artist{display:flex;flex-direction:column;align-items:center;gap:8px;width:120px}
.skel-artist .skel-circle{width:100px;height:100px;border-radius:50%;background:var(--sp-elevated)}
.skel-artist .skel-text{height:12px;background:var(--sp-elevated);border-radius:4px;width:80px}

/* ---- Sidebar ---- */
#sidebar{position:fixed;left:0;top:0;bottom:var(--player-h);width:280px;background:var(--sp-sidebar);display:flex;flex-direction:column;z-index:40;overflow:hidden;border-right:1px solid var(--sp-border);transition:width .22s ease}
#sidebar.collapsed{width:76px}
#sidebar.collapsed .sb-text,#sidebar.collapsed .sb-logo span,#sidebar.collapsed .sb-footer{display:none}
#sidebar.collapsed .sb-link{justify-content:center;padding:12px}
#sidebar.collapsed .sb-logo{justify-content:center;padding:20px 0 16px}
.sb-logo{padding:20px 24px 16px;display:flex;align-items:center;gap:10px}
.sb-logo img{width:36px;height:36px;border-radius:50%}
.sb-logo span{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:-.01em}
.sb-collapse-btn{margin-left:auto;width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:var(--sp-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sb-collapse-btn:hover{color:var(--sp-text);background:var(--sp-card-hover)}
#sidebar.collapsed .sb-collapse-btn{display:none}
.sb-nav{flex:1;overflow-y:auto;padding:0 12px}
.sb-nav::-webkit-scrollbar{width:0}
.sb-link{display:flex;align-items:center;gap:16px;padding:10px 12px;border-radius:8px;color:var(--sp-text-sub);text-decoration:none;font-size:14px;font-weight:500;cursor:pointer;transition:color .2s,background .2s;white-space:nowrap}
.sb-link:hover,.sb-link.active{color:var(--sp-text)}
.sb-link.active{background:rgba(124,59,51,.12)}
.sb-link svg{flex-shrink:0}
.sb-divider{height:1px;background:var(--sp-border);margin:12px 12px}
.sb-footer{padding:16px 24px;border-top:1px solid var(--sp-border)}
.sb-footer p{font-size:11px;color:var(--sp-text-muted);line-height:1.6}
.sb-theme-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 4px}
.theme-toggle{width:44px;height:24px;border-radius:14px;background:var(--sp-elevated);border:1px solid var(--sp-border);position:relative;cursor:pointer}
.theme-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--sp-accent);transition:left .2s ease}
[data-theme="dark"] .theme-toggle::after{left:22px}

/* ---- Main wrapper / topbar ---- */
#mainWrapper{position:fixed;left:280px;top:0;right:0;bottom:var(--player-h);display:flex;flex-direction:column;background:var(--sp-black);z-index:10;transition:left .22s ease}
#sidebar.collapsed ~ #mainWrapper{left:76px}
#topBar{height:var(--topbar-h);display:flex;align-items:center;padding:0 24px;gap:12px;flex-shrink:0;background:rgba(242,236,220,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:20;position:sticky;top:0;border-bottom:1px solid transparent}
[data-theme="dark"] #topBar{background:rgba(34,27,18,.86)}
.tb-btn{width:32px;height:32px;border-radius:50%;background:var(--sp-elevated);border:none;color:var(--sp-text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.tb-btn:hover{background:var(--sp-card-hover)}
.tb-btn:disabled{opacity:.4;cursor:default}
.tb-spacer{flex:1}
.tb-search-wrap{position:relative;max-width:380px;width:100%}
.tb-search-wrap input{width:100%;height:40px;border-radius:20px;border:2px solid transparent;background:var(--sp-elevated);color:var(--sp-text);padding:0 44px 0 40px;font-size:14px;outline:none;transition:border-color .2s}
.tb-search-wrap input::placeholder{color:var(--sp-text-muted)}
.tb-search-wrap input:focus{border-color:var(--sp-accent)}
.tb-search-wrap .tb-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--sp-text-muted);pointer-events:none}
.tb-search-kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--sp-text-muted);background:var(--sp-card);border:1px solid var(--sp-border);padding:2px 6px;border-radius:5px;pointer-events:none}
@media(max-width:640px){.tb-search-kbd{display:none}}
.tb-mobile-logo{display:none;align-items:center;gap:8px}
.tb-mobile-logo img{width:28px;height:28px;border-radius:50%}
.tb-mobile-logo span{font-family:var(--font-display);font-size:17px;font-weight:600}
.tb-menu-btn{display:none;width:36px;height:36px;border-radius:50%;background:transparent;border:none;color:var(--sp-text);align-items:center;justify-content:center;cursor:pointer}
#contentArea{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:32px}
.content-pad{padding:0 24px}

/* ---- Page transitions ---- */
.page-section{display:none}
.page-section.active{display:block;animation:page-in .28s ease}
@keyframes page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
    .page-section.active{animation:none}
    *{scroll-behavior:auto!important}
}

/* ---- Breadcrumb ---- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--sp-text-muted);margin-bottom:16px}
.breadcrumb button{background:none;border:none;color:var(--sp-text-muted);font-size:13px;cursor:pointer;font-family:inherit;padding:2px 4px;border-radius:4px}
.breadcrumb button:hover{color:var(--sp-accent);text-decoration:underline}
.breadcrumb .bc-current{color:var(--sp-text);font-weight:600}
.breadcrumb .bc-sep{opacity:.6}

/* ---- Greeting / hero ---- */
.greeting-row{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.greeting{font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:-.01em}
.greeting-edit-btn{background:none;border:none;color:var(--sp-text-muted);cursor:pointer;display:flex;align-items:center;padding:4px;border-radius:6px}
.greeting-edit-btn:hover{color:var(--sp-accent);background:var(--sp-card-hover)}
@media(max-width:640px){.greeting{font-size:23px}}

.hero{position:relative;border-radius:16px;overflow:hidden;margin-bottom:32px;background:var(--sp-card);display:flex;align-items:flex-end;min-height:280px}
.hero-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;filter:saturate(1.05)}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,14,8,.88) 0%,rgba(20,14,8,.35) 55%,rgba(20,14,8,.05) 100%)}
[data-theme="light"] .hero-scrim,.hero-scrim{background:linear-gradient(0deg,rgba(20,14,8,.85) 0%,rgba(20,14,8,.3) 55%,rgba(20,14,8,.02) 100%)}
.hero-inner{position:relative;z-index:2;padding:28px 32px;color:#fff;max-width:640px}
.hero-eyebrow{font-size:12px;font-weight:600;color:#EFDFC0;margin-bottom:8px}
.hero-title{font-family:var(--font-display);font-size:34px;font-weight:600;line-height:1.15;margin-bottom:6px}
.hero-artist{font-size:15px;color:#EAE1CB;margin-bottom:18px}
.hero-cta{display:inline-flex;align-items:center;gap:8px;background:var(--sp-accent);color:#fff;border:none;padding:12px 26px;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.hero-cta:hover{background:var(--sp-accent-hover)}
@media(max-width:640px){.hero{min-height:220px}.hero-inner{padding:20px}.hero-title{font-size:24px}}

.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin-bottom:32px}
.qa-card{display:flex;align-items:center;background:var(--sp-card);border:1px solid var(--sp-border);border-radius:8px;overflow:hidden;cursor:pointer;transition:background .2s,transform .15s;height:68px;position:relative}
.qa-card:hover{background:var(--sp-card-hover)}
.qa-card img{width:68px;height:68px;object-fit:cover;flex-shrink:0}
.qa-card-body{padding:0 14px;flex:1;min-width:0}
.qa-card-body .qa-t{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa-card-body .qa-s{font-size:11px;color:var(--sp-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa-rating-badge{position:absolute;bottom:6px;right:10px;font-size:10px;color:var(--sp-gold);display:flex;align-items:center;gap:2px;background:var(--sp-elevated);padding:2px 6px;border-radius:10px}
.qa-new-badge{position:absolute;top:6px;right:10px;font-size:9px;font-weight:700;letter-spacing:.03em;color:#fff;background:var(--sp-green);padding:2px 7px;border-radius:10px}

.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.sec-head h2{font-family:var(--font-display);font-size:23px;font-weight:600;letter-spacing:-.01em}
.sec-head a{font-size:13px;font-weight:600;color:var(--sp-text-muted);text-decoration:none;letter-spacing:.02em;transition:color .2s}
.sec-head a:hover{color:var(--sp-accent);text-decoration:underline}

.card-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;margin-bottom:32px;scroll-snap-type:x mandatory}
.card-scroll::-webkit-scrollbar{height:0}
.sp-card{min-width:164px;max-width:164px;background:var(--sp-card);border:1px solid var(--sp-border);border-radius:8px;padding:16px;cursor:pointer;transition:background .25s,transform .15s;position:relative;scroll-snap-align:start;flex-shrink:0}
.sp-card:hover{background:var(--sp-card-hover);transform:translateY(-2px)}
.sp-card:hover .sp-play{opacity:1;transform:translateY(0)}
.sp-card-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;margin-bottom:12px;box-shadow:0 8px 20px rgba(42,36,23,.18);background:var(--sp-elevated)}
.sp-play{position:absolute;right:24px;top:calc(16px + 100% - 128px + 16px);width:48px;height:48px;border-radius:50%;background:var(--sp-accent);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:all .3s ease;box-shadow:0 8px 16px rgba(42,36,23,.3);border:none;color:#fff;cursor:pointer}
.sp-play:hover{background:var(--sp-accent-hover);transform:translateY(0) scale(1.06)!important}
.sp-card-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.sp-card-sub{font-size:13px;color:var(--sp-text-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-card-rating{position:absolute;top:12px;left:12px;font-size:10px;color:var(--sp-gold);display:flex;align-items:center;gap:3px;background:var(--sp-elevated);padding:2px 8px;border-radius:10px;z-index:2}
.sp-card-new{position:absolute;top:12px;right:12px;font-size:9px;font-weight:700;color:#fff;background:var(--sp-green);padding:2px 8px;border-radius:10px;z-index:2}
@media(max-width:640px){.sp-card{min-width:140px;max-width:140px;padding:12px}.sp-card-img{margin-bottom:10px}.sp-play{width:40px;height:40px;right:18px;top:calc(12px + 100% - 116px + 10px)}.sp-card-title{font-size:13px}.sp-card-sub{font-size:12px}}

.track-list{width:100%}
.track-list-head{display:grid;grid-template-columns:40px 1fr 1fr 80px 70px;gap:16px;padding:0 16px 8px;border-bottom:1px solid var(--sp-border);color:var(--sp-text-muted);font-size:12px;letter-spacing:.04em}
.track-row{display:grid;grid-template-columns:40px 1fr 1fr 80px 70px;gap:16px;padding:8px 16px;border-radius:4px;cursor:pointer;transition:background .15s;align-items:center;position:relative;opacity:0;animation:row-in .3s ease forwards}
@keyframes row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.track-row:hover{background:var(--sp-card-hover)}
.track-num{color:var(--sp-text-muted);font-size:14px;display:flex;align-items:center;justify-content:center;position:relative}
.track-row:hover .track-num-text{display:none}
.track-row:hover .track-num-play{display:flex!important}
.track-num-play{display:none!important;position:absolute;color:var(--sp-text)}
.track-info{display:flex;align-items:center;gap:12px;min-width:0}
.track-thumb{width:40px;height:40px;border-radius:4px;object-fit:cover;flex-shrink:0;background:var(--sp-elevated)}
.track-meta{min-width:0;width:100%}
.track-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-title mark,.qa-t mark,.cs-card-title mark,.sp-card-title mark,.artist-name mark{background:rgba(150,112,15,.28);color:inherit;border-radius:2px;padding:0 1px}
.track-artist{font-size:13px;color:var(--sp-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-album{font-size:13px;color:var(--sp-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-views{font-size:13px;color:var(--sp-text-muted);text-align:right}
.track-rating-sm{font-size:11px;color:var(--sp-gold);text-align:center;display:flex;align-items:center;justify-content:center;gap:2px}
.track-read-bar{position:absolute;left:56px;right:16px;bottom:2px;height:2px;background:var(--sp-border);border-radius:2px;overflow:hidden}
.track-read-bar span{display:block;height:100%;background:var(--sp-green)}
@media(max-width:768px){.track-list-head,.track-row{grid-template-columns:40px 1fr 80px}.track-album,.track-rating-sm{display:none}}
@media(max-width:480px){.track-list-head,.track-row{grid-template-columns:1fr 60px}.track-num{display:none}.track-views{text-align:right}}

.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:32px}
.cs-card{background:var(--sp-card);border:1px solid var(--sp-border);border-radius:8px;overflow:hidden;cursor:pointer;transition:background .3s;position:relative}
.cs-card:hover{background:var(--sp-card-hover)}
.cs-card-img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--sp-elevated)}
.cs-card-info{padding:12px}
.cs-card-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.cs-card-sub{font-size:12px;color:var(--sp-text-muted)}
.cs-badge{position:absolute;top:8px;left:8px;background:var(--sp-red);color:#fff;font-size:11px;font-weight:600;padding:3px 8px;border-radius:3px;z-index:2}
.cs-countdown{position:absolute;bottom:56px;left:8px;background:rgba(20,14,8,.78);color:#fff;font-size:10px;font-weight:500;padding:4px 8px;border-radius:4px;z-index:2;display:flex;align-items:center;gap:3px;flex-wrap:wrap;max-width:90%}
.cs-countdown .cd-n{background:var(--sp-gold);color:#1c1305;padding:1px 5px;border-radius:3px;font-weight:700;font-size:11px;min-width:20px;text-align:center}
@media(max-width:640px){.cs-grid{grid-template-columns:repeat(2,1fr);gap:10px}.cs-card-info{padding:8px}.cs-card-title{font-size:13px}.cs-countdown{bottom:48px}}

.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;padding:16px;background:var(--sp-elevated);border-radius:8px;align-items:center}
.filter-bar label{font-size:13px;color:var(--sp-text-muted);font-weight:500}
.filter-toggle-btn{display:none;height:36px;padding:0 18px;border-radius:20px;border:1px solid var(--sp-border);background:var(--sp-card);color:var(--sp-text);font-size:13px;font-weight:600;cursor:pointer;align-items:center;gap:6px;margin-bottom:16px}
@media(max-width:640px){
    .filter-toggle-btn{display:inline-flex}
    .filter-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;border-radius:16px 16px 0 0;flex-direction:column;align-items:stretch;padding-bottom:28px;transform:translateY(100%);transition:transform .25s ease}
    .filter-bar.sheet-open{display:flex;transform:translateY(0)}
    .filter-bar .f-select,.filter-bar .f-reset{width:100%}
}
.f-select{height:36px;padding:0 28px 0 12px;border-radius:20px;border:1px solid var(--sp-border);background:var(--sp-card);color:var(--sp-text);font-size:13px;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6450' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:background .2s}
.f-select:hover{background-color:var(--sp-card-hover)}
.f-reset{height:36px;padding:0 16px;border-radius:20px;border:1px solid var(--sp-border);background:var(--sp-card);color:var(--sp-text-sub);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s}
.f-reset:hover{background:var(--sp-card-hover);color:var(--sp-text)}

.artist-grid{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:32px}
.artist-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;width:120px}
.artist-item:hover .artist-avatar{transform:scale(1.04);box-shadow:0 4px 20px rgba(42,36,23,.25)}
.artist-avatar{width:100px;height:100px;border-radius:50%;object-fit:cover;background:var(--sp-elevated);transition:transform .2s,box-shadow .2s}
.artist-name{font-size:13px;font-weight:500;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.artist-count-label{font-size:11px;color:var(--sp-text-muted)}
.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;margin-bottom:32px}
.genre-card{position:relative;border-radius:8px;padding:16px;height:100px;overflow:hidden;cursor:pointer;transition:transform .15s}
.genre-card:hover{transform:scale(1.03)}
.genre-card span{position:relative;z-index:1;font-size:16px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}

.sd-page{max-width:800px;margin:0 auto}
.sd-back{display:inline-flex;align-items:center;gap:6px;color:var(--sp-text-sub);font-size:14px;cursor:pointer;padding:8px 0;transition:color .15s;background:none;border:none;font-family:inherit}
.sd-back:hover{color:var(--sp-accent)}
.sd-hero{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-bottom:24px;background:var(--sp-elevated)}
.sd-hero img{width:100%;height:100%;object-fit:cover}
.sd-hero-overlay{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(20,14,8,.65))}
.sd-title{font-family:var(--font-display);font-size:30px;font-weight:600;margin-bottom:4px;letter-spacing:-.01em}
.sd-artist{font-size:15px;color:var(--sp-text-sub);margin-bottom:12px}
.sd-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.sd-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 14px;border-radius:20px;font-size:12px;background:var(--sp-elevated);color:var(--sp-text-sub);border:1px solid var(--sp-border)}
.sd-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.sd-yt-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;background:var(--sp-red);color:#fff;border-radius:20px;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s;border:none;cursor:pointer;font-family:inherit}
.sd-yt-btn:hover{filter:brightness(.92)}
.sd-play-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 32px;background:var(--sp-accent);color:#fff;border-radius:20px;font-size:14px;font-weight:600;transition:background .2s;border:none;cursor:pointer;font-family:inherit}
.sd-play-btn:hover{background:var(--sp-accent-hover)}
.sd-share-wrap{position:relative}
.sd-share-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:var(--sp-elevated);color:var(--sp-text);border:1px solid var(--sp-border);border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.sd-share-btn:hover{background:var(--sp-card-hover)}
.sd-share-sheet{position:absolute;top:calc(100% + 8px);left:0;background:var(--sp-card);border:1px solid var(--sp-border);border-radius:12px;padding:8px;min-width:210px;box-shadow:0 12px 30px rgba(20,14,8,.2);z-index:30;display:none}
.sd-share-sheet.open{display:block}
.sd-share-sheet button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;color:var(--sp-text);font-size:13px;cursor:pointer;border-radius:8px;font-family:inherit;text-align:left}
.sd-share-sheet button:hover{background:var(--sp-card-hover)}
.sd-social{display:flex;gap:12px;margin-bottom:24px}
.sd-social a{color:var(--sp-text-muted);transition:color .15s;display:flex;align-items:center}
.sd-social a:hover{color:var(--sp-accent)}

.lyrics-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.lyrics-toggle-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;background:var(--sp-elevated);color:var(--sp-text);border:1px solid var(--sp-border);border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}
.lyrics-toggle-btn:hover{background:var(--sp-card-hover)}
.lyrics-toggle-btn.active{background:var(--sp-accent);border-color:var(--sp-accent);color:#fff}
.lyrics-tools{display:flex;align-items:center;gap:6px}
.lyrics-tools button{width:32px;height:32px;border-radius:50%;border:1px solid var(--sp-border);background:var(--sp-card);color:var(--sp-text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.lyrics-tools button:hover{background:var(--sp-card-hover)}
.lyrics-progress-track{height:3px;background:var(--sp-border);border-radius:3px;margin-bottom:16px;overflow:hidden;display:none}
.lyrics-progress-track.visible{display:block}
.lyrics-progress-fill{height:100%;width:0%;background:var(--sp-accent);transition:width .1s linear}
.sd-lyrics{background:var(--sp-elevated);border-radius:12px;padding:28px 32px;white-space:pre-wrap;line-height:1.9;font-size:var(--lyrics-font-size);margin-bottom:32px;display:none;max-height:60vh;overflow-y:auto}
.sd-lyrics.visible{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.sd-rating-section{background:var(--sp-elevated);border-radius:12px;padding:24px 28px;margin-bottom:32px}
.sd-rating-header{display:flex;align-items:center;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.sd-rating-avg{font-family:var(--font-display);font-size:48px;font-weight:600;color:var(--sp-gold);line-height:1}
.sd-rating-info{display:flex;flex-direction:column;gap:4px}
.sd-rating-count{font-size:14px;color:var(--sp-text-sub)}
.sd-rating-stars-display{display:flex;gap:2px;color:var(--sp-gold)}
.rating-input-wrap{margin-bottom:24px;padding:20px;background:var(--sp-card);border-radius:10px;border:1px solid var(--sp-border)}
.rating-input-label{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--sp-text-sub)}
.rating-stars-input{display:flex;gap:6px;margin-bottom:12px}
.rating-star-btn{background:none;border:none;cursor:pointer;color:var(--sp-text-muted);transition:color .15s,transform .15s;padding:0;display:flex;align-items:center}
.rating-star-btn:hover{transform:scale(1.15)}
.rating-star-btn.filled{color:var(--sp-gold)}
.rating-star-btn.hovered{color:var(--sp-gold);opacity:.7}
.rating-textarea{width:100%;min-height:80px;background:var(--sp-elevated);border:1px solid var(--sp-border);border-radius:8px;color:var(--sp-text);padding:12px;font-size:14px;font-family:inherit;resize:vertical;outline:none;transition:border-color .2s}
.rating-textarea::placeholder{color:var(--sp-text-muted)}
.rating-textarea:focus{border-color:var(--sp-accent)}
.rating-submit-row{display:flex;gap:10px;margin-top:12px;align-items:center}
.rating-submit-btn{padding:8px 24px;background:var(--sp-accent);color:#fff;border:none;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s;font-family:inherit}
.rating-submit-btn:hover{background:var(--sp-accent-hover)}
.rating-submit-btn:disabled{opacity:.5;cursor:not-allowed}
.rating-cancel-btn{padding:8px 20px;background:transparent;color:var(--sp-text-muted);border:1px solid var(--sp-border);border-radius:20px;font-size:13px;cursor:pointer;transition:all .2s;font-family:inherit}
.rating-cancel-btn:hover{color:var(--sp-text);border-color:var(--sp-text-muted)}
.rating-edit-label{font-size:11px;color:var(--sp-accent);font-weight:600;letter-spacing:.03em;margin-bottom:4px}
.review-list{display:flex;flex-direction:column;gap:12px}
.review-item{padding:16px;background:var(--sp-card);border-radius:10px;border:1px solid var(--sp-border)}
.review-item.own-review{border-color:rgba(124,59,51,.35)}
.review-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.review-stars{display:flex;gap:2px;color:var(--sp-gold)}
.review-edit-btn{background:none;border:none;color:var(--sp-accent);font-size:12px;cursor:pointer;font-family:inherit;font-weight:500;transition:color .15s}
.review-edit-btn:hover{color:var(--sp-accent-hover)}
.review-text{font-size:14px;color:var(--sp-text-sub);line-height:1.6;white-space:pre-wrap}
.review-text.empty{color:var(--sp-text-muted);font-style:italic}
.review-date{font-size:11px;color:var(--sp-text-muted);margin-top:6px}
.review-empty{text-align:center;padding:32px 0;color:var(--sp-text-muted);font-size:14px}
.sd-credits{border-top:1px solid var(--sp-border);padding-top:24px;margin-bottom:32px}
.sd-credit-row{display:flex;align-items:center;gap:14px;padding:12px 0}
.sd-credit-row:not(:last-child){border-bottom:1px solid var(--sp-border)}
.sd-credit-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--sp-card)}
.sd-credit-icon{width:48px;height:48px;border-radius:50%;background:var(--sp-card);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sp-text-muted)}
.sd-credit-label{font-size:11px;letter-spacing:.05em;color:var(--sp-text-muted);margin-bottom:2px}
.sd-credit-name{font-size:14px;font-weight:500}
@media(max-width:640px){.sd-title{font-size:23px}.sd-lyrics{padding:20px;font-size:14px}.sd-rating-section{padding:16px}.sd-rating-avg{font-size:36px}}

.ad-header{display:flex;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--sp-border);margin-bottom:20px}
.ad-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--sp-elevated);border:3px solid var(--sp-border)}
.ad-name{font-family:var(--font-display);font-size:22px;font-weight:600}
.ad-count{font-size:14px;color:var(--sp-text-muted);margin-top:4px}
.artist-home-grid{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:32px}
.artist-home-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;width:110px;text-decoration:none;color:inherit}
.artist-home-item:hover .artist-home-avatar{transform:scale(1.05);box-shadow:0 4px 20px rgba(42,36,23,.25)}
.artist-home-avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;background:var(--sp-elevated);transition:transform .2s,box-shadow .2s}
.artist-home-name{font-size:13px;font-weight:500;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.artist-home-count{font-size:11px;color:var(--sp-text-muted)}

.search-input-wrap{position:relative;max-width:480px;margin-bottom:20px}
.search-input-wrap input{width:100%;height:48px;border-radius:24px;border:2px solid transparent;background:var(--sp-elevated);color:var(--sp-text);padding:0 20px 0 48px;font-size:15px;outline:none;transition:border-color .2s}
.search-input-wrap input::placeholder{color:var(--sp-text-muted)}
.search-input-wrap input:focus{border-color:var(--sp-accent)}
.search-input-wrap .si-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--sp-text-muted);pointer-events:none}

.search-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.search-tab{padding:8px 18px;border-radius:20px;border:1px solid var(--sp-border);background:var(--sp-card);color:var(--sp-text-sub);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.search-tab:hover{background:var(--sp-card-hover)}
.search-tab.active{background:var(--sp-accent);color:#fff;border-color:var(--sp-accent)}
.search-group-title{font-size:13px;font-weight:700;color:var(--sp-text-muted);letter-spacing:.03em;margin:20px 0 10px}
.search-suggest{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.suggest-chip{padding:7px 16px;border-radius:20px;background:var(--sp-elevated);border:1px solid var(--sp-border);color:var(--sp-text-sub);font-size:13px;cursor:pointer;transition:background .2s}
.suggest-chip:hover{background:var(--sp-card-hover);color:var(--sp-text)}
.search-suggest-label{font-size:12px;color:var(--sp-text-muted);margin-bottom:8px;font-weight:600}

#playerBar{position:fixed;left:0;right:0;bottom:0;height:var(--player-h);background:var(--sp-player);border-top:1px solid var(--sp-player-border);display:flex;align-items:center;z-index:50;padding:0 16px}
.pb-left{display:flex;align-items:center;gap:12px;min-width:180px;max-width:30%;flex:1}
.pb-thumb-wrap{position:relative;flex-shrink:0}
.pb-thumb{width:56px;height:56px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--sp-elevated);cursor:pointer;display:block}
.pb-yt-dot{position:absolute;bottom:-3px;right:-3px;width:16px;height:16px;border-radius:50%;background:var(--sp-red);display:flex;align-items:center;justify-content:center;border:2px solid var(--sp-player)}
.pb-yt-dot::after{content:'';width:5px;height:6px;border-left:6px solid #fff;border-top:3px solid transparent;border-bottom:3px solid transparent;margin-left:1px}
.pb-info{min-width:0}
.pb-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.pb-title:hover{text-decoration:underline}
.pb-artist{font-size:11px;color:var(--sp-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-queue{font-size:10px;color:var(--sp-text-muted)}
.pb-like{width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--sp-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .2s}
.pb-like:hover{color:var(--sp-accent)}
.pb-like.liked{color:var(--sp-accent)}
.pb-center{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;max-width:600px}
.pb-controls{display:flex;align-items:center;gap:16px}
.pb-ctrl{width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--sp-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s}
.pb-ctrl:hover{color:var(--sp-text)}
.pb-play-main{width:36px;height:36px;background:var(--sp-text)!important;color:var(--sp-black)!important;border-radius:50%!important}
.pb-play-main:hover{transform:scale(1.06)}
.pb-progress{width:100%;display:flex;align-items:center;gap:8px}
.pb-time{font-size:11px;color:var(--sp-text-muted);min-width:35px;text-align:center}
.pb-prog-bar{flex:1;height:4px;background:var(--sp-border);border-radius:2px;position:relative;cursor:pointer}
.pb-prog-fill{height:100%;background:var(--sp-text);border-radius:2px;width:0%}
.pb-right{display:flex;align-items:center;gap:8px;min-width:180px;max-width:30%;justify-content:flex-end;flex:1}
.pb-vol{width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--sp-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s}
.pb-vol:hover{color:var(--sp-text)}
.pb-vol-bar{width:100px;height:4px;background:var(--sp-border);border-radius:2px;position:relative;cursor:pointer}
.pb-vol-fill{height:100%;background:var(--sp-text);border-radius:2px;width:70%}
.pb-empty{color:var(--sp-text-muted);font-size:13px}

#bottomTabs{display:none;position:fixed;left:0;right:0;bottom:0;height:var(--tab-h);background:var(--sp-black);border-top:1px solid var(--sp-player-border);z-index:55;align-items:center;justify-content:space-around;padding:0 8px}
.bt-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;color:var(--sp-text-muted);transition:color .15s;padding:4px 0;min-width:52px}
.bt-item.active{color:var(--sp-accent)}
.bt-item span{font-size:10px;font-weight:500}
#sidebarOverlay{position:fixed;inset:0;background:rgba(20,14,8,.45);z-index:35;display:none}

/* ---- Toast v2 ---- */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--sp-text);color:var(--sp-black);padding:0;border-radius:10px;font-size:14px;z-index:9999;transition:transform .3s ease;pointer-events:none;overflow:hidden;min-width:200px;max-width:88vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast-body{display:flex;align-items:center;gap:10px;padding:12px 16px}
.toast-icon{flex-shrink:0;display:flex}
.toast-bar{height:3px;background:rgba(0,0,0,.18)}
.toast-bar span{display:block;height:100%;background:var(--sp-accent);width:100%;transform-origin:left}

/* ---- Connection banner ---- */
.connection-banner{position:fixed;top:0;left:0;right:0;z-index:9998;text-align:center;font-size:12px;font-weight:600;padding:6px;color:#fff;transform:translateY(-100%);transition:transform .25s ease}
.connection-banner.show{transform:translateY(0)}
.connection-banner.offline{background:var(--sp-red)}
.connection-banner.online{background:var(--sp-green)}

/* ---- Shortcuts modal ---- */
.shortcuts-modal{position:fixed;inset:0;background:rgba(20,14,8,.5);z-index:9997;display:none;align-items:center;justify-content:center;padding:20px}
.shortcuts-modal.open{display:flex}
.shortcuts-card{background:var(--sp-card);border-radius:14px;padding:24px;max-width:360px;width:100%;border:1px solid var(--sp-border)}
.shortcuts-card h3{font-family:var(--font-display);font-size:19px;margin-bottom:16px}
.shortcuts-card .sc-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:13px;color:var(--sp-text-sub);border-bottom:1px solid var(--sp-border)}
.shortcuts-card kbd{background:var(--sp-elevated);border:1px solid var(--sp-border);padding:2px 8px;border-radius:6px;font-size:12px;font-family:inherit}
.shortcuts-close{margin-top:16px;width:100%;padding:10px;border-radius:20px;background:var(--sp-accent);color:#fff;border:none;cursor:pointer;font-weight:600}

/* ---- Ripple ---- */
.ripple-target{position:relative;overflow:hidden}
.ripple-anim{position:absolute;border-radius:50%;background:rgba(124,59,51,.25);transform:scale(0);animation:ripple-grow .55s ease-out;pointer-events:none}
[data-theme="dark"] .ripple-anim{background:rgba(255,255,255,.22)}
@keyframes ripple-grow{to{transform:scale(2.6);opacity:0}}

.sp-footer{border-top:1px solid var(--sp-border);padding:32px 0;margin-top:24px}
.sp-footer-links{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px}
.sp-footer-links a{font-size:13px;color:var(--sp-text-muted);text-decoration:none;transition:color .15s}
.sp-footer-links a:hover{color:var(--sp-accent);text-decoration:underline}
.sp-footer-social{display:flex;gap:16px;margin-bottom:16px}
.sp-footer-social a{color:var(--sp-text-muted);transition:color .15s}
.sp-footer-social a:hover{color:var(--sp-accent)}
.sp-footer-copy{font-size:11px;color:var(--sp-text-muted)}
.genre-result-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.genre-result-head h3{font-size:20px;font-weight:700;font-family:var(--font-display)}
.genre-clear{font-size:13px;color:var(--sp-text-muted);cursor:pointer;display:flex;align-items:center;gap:4px;transition:color .15s;background:none;border:none;font-family:inherit}
.genre-clear:hover{color:var(--sp-accent)}
.empty-state{text-align:center;padding:60px 20px;color:var(--sp-text-muted)}
.empty-state i{margin-bottom:12px}
.empty-state p:first-of-type{font-size:16px;color:var(--sp-text-sub);margin-bottom:4px}
.badge-pop{font-size:11px;font-weight:600;background:var(--sp-accent);color:#fff;padding:2px 10px;border-radius:20px}
.badge-cs{font-size:11px;font-weight:600;background:var(--sp-red);color:#fff;padding:2px 10px;border-radius:20px}
.badge-gold{font-size:11px;font-weight:600;background:var(--sp-gold);color:#fff;padding:2px 10px;border-radius:20px}
.badge-new{font-size:11px;font-weight:600;background:var(--sp-green);color:#fff;padding:2px 10px;border-radius:20px}

@media(max-width:1024px){
    #sidebar{transform:translateX(-100%);transition:transform .25s ease;z-index:45;bottom:0;width:280px!important}
    #sidebar.open{transform:translateX(0)}
    #sidebar.collapsed .sb-text,#sidebar.collapsed .sb-logo span,#sidebar.collapsed .sb-footer{display:inline}
    #mainWrapper{left:0!important}
    .tb-menu-btn{display:flex}
    .tb-mobile-logo{display:flex}
    .sb-collapse-btn{display:none}
}
@media(max-width:768px){
    #playerBar{height:64px;bottom:var(--tab-h)}
    .pb-center{display:none}
    .pb-right{display:none}
    .pb-left{min-width:0;max-width:100%;flex:1}
    .pb-thumb{width:44px;height:44px}
    #bottomTabs{display:flex}
    #contentArea{padding-bottom:16px}
    .content-pad{padding:0 16px}
    #topBar{padding:0 16px}
    .tb-search-wrap{max-width:none}
}
@media(max-width:480px){
    :root{--player-h:60px;--tab-h:56px}
    .pb-thumb{width:40px;height:40px;border-radius:4px}
    .pb-title{font-size:12px}
    .pb-artist{font-size:10px}
    .pb-like{width:28px;height:28px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}