/* ============================================================
   CUMU – style.css  (Mobile-first dark Spotify-like UI)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#121212;--bg-el:#1a1a1a;--bg-card:#242424;--bg-hover:#2a2a2a;
  --t1:#ffffff;--t2:#b3b3b3;--tf:#6a6a6a;
  --accent:#1ed760;--accent-dim:#169c43;
  --border:rgba(255,255,255,.08);--border-m:rgba(255,255,255,.14);
  --r:8px;--rl:16px;--rxl:24px;
  --shadow:0 4px 24px rgba(0,0,0,.5);--shadow-lg:0 12px 48px rgba(0,0,0,.7);
  --nav-h:64px;--player-h:70px;--bottom-h:calc(var(--nav-h) + var(--player-h) + 14px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --font:-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'SF Mono','Consolas',monospace;
}
html{height:100%;overscroll-behavior:none}
body{font-family:var(--font);font-size:15px;color:var(--t1);background:var(--bg);min-height:100%;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:2px}
code{font-family:var(--mono);font-size:12px;background:var(--bg-card);padding:2px 6px;border-radius:4px;color:var(--accent)}

/* ── Auth ──────────────────────────────────────────── */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:24px}
.auth-card{width:100%;max-width:400px;background:var(--bg-el);border:1px solid var(--border);border-radius:var(--rl);padding:40px 32px 36px;box-shadow:var(--shadow-lg)}
.auth-logo{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:4px}
.auth-logo span{color:var(--accent)}
.auth-tagline{font-size:13px;color:var(--tf);margin-bottom:32px}
.auth-title{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:24px}

/* ── Forms ─────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t2);margin-bottom:7px}
.form-group input,.form-group select,input[type="text"],input[type="password"],input[type="search"],select{width:100%;padding:11px 14px;border:1px solid var(--border-m);border-radius:var(--r);font-family:var(--font);font-size:15px;color:var(--t1);background:var(--bg-card);outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.form-group input:focus,input[type="text"]:focus,input[type="password"]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,215,96,.15)}

/* ── Buttons ───────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:50px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:background .12s,transform .1s;white-space:nowrap;text-decoration:none;-webkit-appearance:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#000;width:100%}
.btn-primary:hover{background:#1fdf64}
.btn-secondary{background:var(--bg-card);color:var(--t1);border:1px solid var(--border-m)}
.btn-secondary:hover{background:var(--bg-hover)}
.btn-ghost{background:transparent;color:var(--t2)}

/* ── Alerts ────────────────────────────────────────── */
.alert{padding:12px 14px;border-radius:var(--r);font-size:13.5px;margin-bottom:16px;border:1px solid transparent}
.alert-error{background:rgba(255,82,82,.12);border-color:rgba(255,82,82,.3);color:#ff8080}
.alert-success{background:rgba(30,215,96,.12);border-color:rgba(30,215,96,.3);color:var(--accent)}

/* ── Setup ─────────────────────────────────────────── */
.step-row{display:flex;align-items:center;gap:8px;margin-bottom:28px}
.step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--bg-card);color:var(--tf);border:2px solid var(--border-m);flex-shrink:0}
.step-dot.active{background:var(--accent);color:#000;border-color:var(--accent)}
.step-dot.done{background:rgba(30,215,96,.15);color:var(--accent);border-color:var(--accent)}
.step-line{flex:1;height:2px;background:var(--border-m);border-radius:1px}
.step-line.done{background:var(--accent)}
.w-card{border:2px solid var(--border-m);border-radius:var(--rl);padding:16px 18px;cursor:pointer;display:flex;align-items:center;gap:14px;margin-bottom:10px;transition:border-color .15s,background .15s}
.w-card:hover{border-color:var(--accent)}.w-card.sel{border-color:var(--accent);background:rgba(30,215,96,.07)}
.w-card-icon{width:40px;height:40px;border-radius:50%;background:var(--bg-card);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.w-card.sel .w-card-icon{background:var(--accent);color:#000}
.setup-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(30,215,96,.12);color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:14px}

/* ── App shell ─────────────────────────────────────── */
.app-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--bg)}
.page-content{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(var(--bottom-h) + var(--safe-b));-webkit-overflow-scrolling:touch}
.page-header{padding:env(safe-area-inset-top,44px) 16px 8px;position:sticky;top:0;z-index:10;background:linear-gradient(to bottom,var(--bg) 70%,transparent)}
.page-header h1{font-size:22px;font-weight:800;letter-spacing:-.5px}
.page-header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.section-label{font-size:16px;font-weight:700;padding:16px 16px 10px}
.section-label-sm{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tf);padding:12px 16px 8px}

/* ── Bottom nav ────────────────────────────────────── */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--bg-el);border-top:1px solid var(--border)}
.mini-player{height:var(--player-h);margin:8px 8px 0;background:var(--bg-card);border-radius:var(--rl);display:flex;align-items:center;padding:0 12px;gap:10px;cursor:pointer;transition:background .12s;border:1px solid var(--border);overflow:hidden;position:relative;-webkit-tap-highlight-color:transparent}
.mini-player:active{background:var(--bg-hover)}
.mini-progress{position:absolute;bottom:0;left:0;height:2px;background:var(--accent);width:0%;border-radius:0 2px 2px 0;transition:width .5s linear}
.mini-cover{width:46px;height:46px;border-radius:6px;flex-shrink:0;overflow:hidden;background:var(--bg-hover);display:flex;align-items:center;justify-content:center}
.mini-cover img{width:100%;height:100%;object-fit:cover}
.mini-cover svg{width:20px;height:20px;color:var(--tf)}
.mini-meta{flex:1;min-width:0}
.mini-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-artist{font-size:12px;color:var(--t2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-controls{display:flex;align-items:center;gap:2px;flex-shrink:0}
.mini-btn{width:36px;height:36px;background:none;border:none;cursor:pointer;color:var(--t1);display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .12s;-webkit-tap-highlight-color:transparent}
.mini-btn:active{background:var(--bg-hover)}
.mini-play{width:32px;height:32px;background:var(--t1);border:none;border-radius:50%;cursor:pointer;color:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .1s;-webkit-tap-highlight-color:transparent}
.mini-play:active{transform:scale(.92)}
.nav-tabs{display:flex;height:var(--nav-h);padding-bottom:var(--safe-b)}
.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:none;cursor:pointer;color:var(--tf);font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;transition:color .15s;padding:8px 0;-webkit-tap-highlight-color:transparent}
.nav-tab svg{width:24px;height:24px;display:block;transition:transform .15s}
.nav-tab.active{color:var(--t1)}.nav-tab.active svg{transform:scale(1.1)}

/* ── Fullscreen player ─────────────────────────────── */
.fp{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);will-change:transform;overflow:hidden}
.fp.open{transform:translateY(0)}
.fp-bg-art{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:blur(80px) saturate(1.5);opacity:.25;transform:scale(1.15);transition:background-image .4s}
.fp-bg-grad{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,18,18,.3) 0%,rgba(18,18,18,.85) 50%,var(--bg) 100%)}
.fp-inner{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;padding-top:env(safe-area-inset-top,44px)}
.fp-header{display:flex;align-items:center;padding:8px 12px;gap:8px}
.fp-down{width:40px;height:40px;background:none;border:none;cursor:pointer;color:var(--t2);display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.fp-down:active{background:var(--bg-card);color:var(--t1)}
.fp-label{flex:1;text-align:center;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t2)}
.fp-art-wrap{flex-shrink:0;padding:16px 32px 8px;display:flex;align-items:center;justify-content:center}
.fp-art{width:100%;max-width:300px;aspect-ratio:1;border-radius:var(--rl);background:var(--bg-card);box-shadow:0 16px 64px rgba(0,0,0,.6);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.fp-art.playing{transform:scale(1.04)}
.fp-art img{width:100%;height:100%;object-fit:cover}
.fp-art .fp-art-ph{width:56px;height:56px;color:var(--tf)}
.fp-info{padding:8px 24px}
.fp-title{font-size:22px;font-weight:800;letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-artist{font-size:16px;color:var(--t2);margin-top:4px;display:inline-block;cursor:pointer;transition:color .12s}
.fp-artist:active{color:var(--t1)}
.fp-progress{padding:16px 24px 0}
.fp-track{width:100%;height:4px;background:var(--bg-hover);border-radius:2px;cursor:pointer;position:relative;overflow:visible}
.fp-fill{height:100%;background:var(--t1);border-radius:2px;width:0%;transition:width .5s linear;position:relative}
.fp-fill::after{content:'';position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--t1);opacity:0;transition:opacity .15s}
.fp-track:active .fp-fill::after,.fp-track:hover .fp-fill::after{opacity:1}
.fp-times{display:flex;justify-content:space-between;padding:8px 0 0;font-size:11px;color:var(--tf);font-family:var(--mono)}
.fp-controls{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 0}
.fp-ctrl{width:48px;height:48px;background:none;border:none;cursor:pointer;color:var(--t2);display:flex;align-items:center;justify-content:center;border-radius:50%;transition:color .12s;-webkit-tap-highlight-color:transparent}
.fp-ctrl:active{color:var(--t1);background:rgba(255,255,255,.06)}
.fp-ctrl svg{display:block}
.fp-play{width:64px;height:64px;background:var(--t1);border:none;border-radius:50%;cursor:pointer;color:var(--bg);display:flex;align-items:center;justify-content:center;transition:transform .1s,background .12s;-webkit-tap-highlight-color:transparent}
.fp-play:active{transform:scale(.93);background:#e0e0e0}
.fp-vol{display:flex;align-items:center;gap:10px;padding:8px 24px 0}
.fp-vol svg{color:var(--tf);flex-shrink:0;width:18px;height:18px}
input[type="range"].vol-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:var(--bg-hover);border-radius:2px;outline:none;cursor:pointer}
input[type="range"].vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--t1);cursor:pointer}

/* ── Home ──────────────────────────────────────────── */
.recent-row{display:flex;gap:12px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.recent-row::-webkit-scrollbar{display:none}
.r-card{flex-shrink:0;width:130px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .12s}
.r-card:active{opacity:.7}
.r-card-art{width:130px;height:130px;border-radius:var(--r);background:var(--bg-card);margin-bottom:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.r-card-art img{width:100%;height:100%;object-fit:cover}
.r-card-art svg{width:32px;height:32px;color:var(--tf)}
.r-card-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-card-sub{font-size:12px;color:var(--t2);margin-top:2px}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px}
.q-item{display:flex;align-items:center;gap:0;background:var(--bg-card);border-radius:var(--r);overflow:hidden;height:56px;cursor:pointer;transition:background .12s;-webkit-tap-highlight-color:transparent}
.q-item:active{background:var(--bg-hover)}
.q-item-art{width:56px;height:56px;flex-shrink:0;background:var(--bg-hover);display:flex;align-items:center;justify-content:center;overflow:hidden}
.q-item-art img{width:100%;height:100%;object-fit:cover}
.q-item-art svg{width:20px;height:20px;color:var(--tf)}
.q-item-name{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px}

/* ── Search ────────────────────────────────────────── */
.search-bar-wrap{padding:8px 16px 12px;position:sticky;top:0;z-index:10;background:var(--bg)}
.search-bar{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border-m);border-radius:50px;padding:0 16px;height:46px}
.search-bar svg{color:var(--tf);flex-shrink:0}
.search-bar input{flex:1;background:none;border:none;outline:none;font-family:var(--font);font-size:15px;color:var(--t1);padding:0}
.search-bar input::placeholder{color:var(--tf)}

/* ── Library ───────────────────────────────────────── */
.lib-list{padding:0 16px}
.lib-item{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;-webkit-tap-highlight-color:transparent}
.lib-item:last-child{border-bottom:none}
.lib-item:active{opacity:.7}
.lib-item-art{width:56px;height:56px;flex-shrink:0;border-radius:var(--r);background:var(--bg-card);overflow:hidden;display:flex;align-items:center;justify-content:center}
.lib-item-art img{width:100%;height:100%;object-fit:cover}
.lib-item-art svg{width:22px;height:22px;color:var(--tf)}
.lib-item-name{font-size:15px;font-weight:600}
.lib-item-sub{font-size:13px;color:var(--t2);margin-top:2px}

/* ── Artist / Album detail ─────────────────────────── */
.artist-hero{position:relative;height:250px;background:var(--bg-card);overflow:hidden}
.artist-hero img{width:100%;height:100%;object-fit:cover;object-position:center top}
.artist-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 0%,rgba(18,18,18,.15) 70%,transparent 100%)}
.artist-hero-name{position:absolute;bottom:14px;left:16px;right:16px;font-size:30px;font-weight:900;letter-spacing:-1px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.artist-hero-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:900;color:var(--tf);background:linear-gradient(135deg,var(--bg-card),var(--bg-hover))}
.back-btn{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:10px;width:36px;height:36px;background:rgba(0,0,0,.4);border:none;border-radius:50%;cursor:pointer;color:var(--t1);display:flex;align-items:center;justify-content:center;z-index:5}
.play-all{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--accent);border:none;border-radius:50%;cursor:pointer;color:#000;box-shadow:0 4px 16px rgba(30,215,96,.4);transition:transform .1s;flex-shrink:0}
.play-all:active{transform:scale(.93)}
.album-hero{display:flex;flex-direction:column;align-items:center;padding:28px 24px 12px;background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg) 100%)}
.album-art-lg{width:170px;height:170px;border-radius:var(--rl);background:var(--bg-card);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.album-art-lg img{width:100%;height:100%;object-fit:cover}
.album-art-lg svg{width:48px;height:48px;color:var(--tf)}
.album-title{font-size:20px;font-weight:800;letter-spacing:-.4px;text-align:center}
.album-artist{font-size:14px;color:var(--t2);margin-top:6px;cursor:pointer}
.album-meta{font-size:12px;color:var(--tf);margin-top:4px}

/* ── Song row ──────────────────────────────────────── */
.song-row{display:flex;align-items:center;gap:12px;padding:8px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:var(--r);transition:background .1s;position:relative}
.song-row:active,.song-row.playing{background:var(--bg-card)}
.song-row.playing .sr-title{color:var(--accent)}
.sr-num{width:28px;flex-shrink:0;text-align:center;font-size:13px;color:var(--tf)}
.sr-art{width:46px;height:46px;flex-shrink:0;border-radius:4px;background:var(--bg-card);overflow:hidden;display:flex;align-items:center;justify-content:center}
.sr-art img{width:100%;height:100%;object-fit:cover}
.sr-art svg{width:18px;height:18px;color:var(--tf)}
.sr-info{flex:1;min-width:0}
.sr-title{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-artist{font-size:13px;color:var(--t2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-action{flex-shrink:0;padding:8px;background:none;border:none;cursor:pointer;color:var(--tf);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:color .12s;-webkit-tap-highlight-color:transparent}
.sr-action:active{color:var(--t1)}
.play-ind{display:flex;align-items:flex-end;gap:2px;height:16px;position:absolute;left:16px}
.play-ind span{display:block;width:3px;background:var(--accent);border-radius:1px;animation:eq 1.1s ease-in-out infinite}
.play-ind span:nth-child(1){height:8px;animation-delay:0s}
.play-ind span:nth-child(2){height:16px;animation-delay:.2s}
.play-ind span:nth-child(3){height:5px;animation-delay:.4s}
.play-ind span:nth-child(4){height:12px;animation-delay:.1s}
@keyframes eq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.3)}}

/* ── Sheet ─────────────────────────────────────────── */
.sheet-overlay{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.7);display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .25s}
.sheet-overlay.open{opacity:1;pointer-events:all}
.sheet{width:100%;background:var(--bg-el);border-radius:var(--rxl) var(--rxl) 0 0;padding:0 0 calc(var(--safe-b) + 8px);transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);max-height:70vh;overflow-y:auto}
.sheet-overlay.open .sheet{transform:translateY(0)}
.sheet-handle{width:36px;height:4px;background:var(--tf);border-radius:2px;margin:12px auto 8px;opacity:.4}
.sheet-title{font-size:16px;font-weight:700;padding:4px 16px 12px}
.sheet-item{display:flex;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;transition:background .1s;-webkit-tap-highlight-color:transparent}
.sheet-item:active{background:var(--bg-card)}
.sheet-item-icon{width:46px;height:46px;border-radius:var(--r);background:var(--bg-card);display:flex;align-items:center;justify-content:center;flex-shrink:0;over