:root{
  --primary:#7c5cff;
  --primary-soft:#ede7ff;
  --bg:#f3f4f7;
  --surface:#ffffff;
  --surface-2:#f2f2f6;
  --text:#17171c;
  --muted:#7d7d88;
  --border:rgba(0,0,0,.06);
  --shadow:0 14px 35px rgba(23,23,28,.12);
}
body[data-theme="dark"]{
  --bg:#12101d;
  --surface:#1a1727;
  --surface-2:#222032;
  --text:#f5f6fb;
  --muted:#afafc0;
  --border:rgba(255,255,255,.06);
  --shadow:0 20px 45px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text)} a{text-decoration:none;color:inherit}
.app-gradient{position:fixed;inset:0;background:linear-gradient(180deg,#211733 0%,#4f3496 100%);z-index:0}
.mobile-stage{position:relative;z-index:1;min-height:100vh;padding:16px;overflow-x:auto}
.screen-grid{display:grid;grid-template-columns:repeat(3, minmax(320px, 360px));gap:18px;min-width:max-content;align-items:start}
.screen{background:var(--surface);border-radius:34px;min-height:760px;box-shadow:var(--shadow);padding:18px 18px 24px;position:relative;overflow:hidden;border:1px solid var(--border)}
.status-row{font-weight:700;font-size:14px;margin-bottom:12px}.status-row.dark{color:#0d0d12}
.player-topbar,.home-header,.liked-summary,.liked-item,.recent-item,.profile-wrap,.header-actions,.bottom-nav,.player-controls,.player-bottom-actions{display:flex;align-items:center}.player-topbar,.home-header,.section-head{justify-content:space-between}
.icon-btn,.text-link{width:42px;height:42px;border-radius:50%;border:0;background:var(--surface-2);display:grid;place-items:center;color:var(--text);font-size:18px;box-shadow:none;cursor:pointer}.icon-btn.white{background:rgba(255,255,255,.95);color:#222}
.player-title{font-weight:800;font-size:18px}
.player-cover-wrap{margin-top:14px}.player-cover{width:100%;aspect-ratio:1/1.22;object-fit:cover;border-radius:28px;background:#243a92}
.player-song-info{text-align:center;padding:16px 0 6px}.player-song-info h2{margin:0;font-size:26px}.player-song-info p{margin:8px 0 0;color:var(--muted);font-size:16px}
.progress-wrap{padding:10px 4px 0} input[type=range]{width:100%;accent-color:var(--primary)} .time-row{display:flex;justify-content:space-between;color:var(--muted);font-weight:700;font-size:12px}
.player-controls{justify-content:space-between;gap:12px;padding:20px 8px 14px}.round-icon,.play-main,.spark-btn{border:0;background:transparent;color:var(--text);cursor:pointer}.round-icon{font-weight:800;font-size:28px}.play-main{width:64px;height:64px;border-radius:50%;background:var(--primary);color:#fff;font-size:26px;box-shadow:0 15px 30px rgba(124,92,255,.35)}
.player-bottom-actions{justify-content:space-between;padding:0 14px 8px}.spark-btn{font-size:22px;color:var(--muted)} .lyrics-indicator{text-align:center;padding-top:16px;font-weight:800}
.profile-wrap{gap:12px}.avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;background:var(--surface-2)} .profile-wrap small,.trend-sub,.liked-meta span,.recent-meta span{color:var(--muted)} .profile-wrap strong{font-size:22px;line-height:1.05;display:block;max-width:170px}
.header-actions{gap:10px}.section-head{display:flex;align-items:center;margin:18px 0 14px}.section-head h3{margin:0;font-size:18px}.accent-link{color:var(--primary);font-weight:800;font-size:14px}
.card-row{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px}.trend-card{display:block}.trend-card img{width:100%;aspect-ratio:1;border-radius:18px;object-fit:cover;background:#3659c8}.trend-title{padding-top:10px;font-weight:800}.artist-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.artist-card{text-align:center}.artist-card img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;background:var(--surface-2);margin-bottom:8px}.artist-card span{display:block;font-size:13px;color:var(--muted)}
.recent-list{display:grid;gap:12px}.recent-item{gap:12px;background:var(--surface-2);padding:10px;border-radius:18px}.recent-cover img{width:74px;height:74px;border-radius:14px;object-fit:cover}.recent-meta{flex:1;min-width:0}.recent-meta strong{display:block;font-size:17px;margin-bottom:6px}.recent-actions{display:flex;align-items:center;gap:10px}.ghost-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--text)}.ghost-btn.active,.liked-heart.active{color:var(--primary)} .pause-pill{padding:11px 16px;border-radius:999px;background:#c7ccd8;color:#fff;font-weight:800}
.bottom-nav{position:absolute;left:20px;right:20px;bottom:18px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);border-radius:20px;justify-content:space-around;padding:12px 10px;border:1px solid rgba(255,255,255,.22)} body[data-theme="dark"] .bottom-nav{background:rgba(37,34,58,.82);border-color:rgba(255,255,255,.06)} .bottom-nav.floating{left:28px;right:28px;bottom:22px}.nav-btn{border:0;background:transparent;font-size:24px;color:var(--muted);cursor:pointer}.nav-btn.active{color:var(--primary)}
.liked-hero{height:160px;position:relative;margin:-18px -18px 0}.liked-banner{width:100%;height:100%;object-fit:cover}.liked-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%, var(--surface) 100%)} .liked-hero-top{position:absolute;left:18px;right:18px;top:20px;display:flex;justify-content:space-between;z-index:2}
.liked-card{position:relative;margin-top:-16px;padding:0 6px 70px;background:var(--surface);border-radius:28px 28px 0 0}.liked-summary{gap:14px;padding:0 6px 10px}.heart-box{width:54px;height:54px;border-radius:12px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary);font-size:26px}.liked-summary h3{margin:0 0 4px;font-size:16px}.liked-summary p{margin:0;color:var(--muted);font-size:14px}.floating-play{margin-left:auto;width:58px;height:58px;border-radius:50%;background:var(--primary);display:grid;place-items:center;color:#fff;font-size:22px;box-shadow:0 14px 35px rgba(124,92,255,.35)}
.liked-list{display:grid;gap:18px;padding-top:10px}.liked-item img{width:58px;height:58px;border-radius:10px;object-fit:cover}.liked-meta{flex:1;min-width:0}.liked-meta strong{display:block;font-size:18px;line-height:1.2;margin-bottom:4px}.liked-heart,.liked-more{border:0;background:transparent;font-size:22px;color:var(--primary);cursor:pointer}
.hidden-media{position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.auth-body{background:linear-gradient(135deg,#1f1534,#5c42a2);min-height:100vh;display:grid;place-items:center;padding:20px}.phone-shell{width:100%;max-width:420px}.auth-shell{display:flex;justify-content:center}.glass-card{background:rgba(255,255,255,.14);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.24);box-shadow:0 20px 60px rgba(0,0,0,.2)}.auth-card{border-radius:30px;padding:34px;color:#fff}.brand-pill{display:inline-block;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.16);font-weight:700;margin-bottom:16px}.auth-card h1{font-size:34px;margin:0 0 8px}.auth-card p{color:rgba(255,255,255,.82);margin:0 0 20px}.auth-form{display:grid;gap:10px}.auth-form label{font-weight:600}.auth-form input{height:50px;border-radius:16px;border:0;padding:0 16px}.btn-primary{height:52px;border:0;border-radius:16px;background:#fff;color:#4f35a2;font-weight:800;cursor:pointer;margin-top:6px}.credentials-box{margin-top:16px;padding:14px;border-radius:18px;background:rgba(255,255,255,.12);line-height:1.6}.link-admin{display:block;margin-top:14px;color:#fff;font-weight:700}.alert-error{background:#ffdee2;color:#7f1020;padding:12px 14px;border-radius:14px;margin-bottom:14px}
@media (max-width: 1200px){.screen-grid{grid-template-columns:1fr;min-width:unset}.mobile-stage{overflow:visible}.screen{max-width:420px;margin:0 auto;min-height:860px}}