/* ============ Visiyon "sidebar app" shell — matches the redesign mock ============ */
:root{
  --accent-grad: linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  --sidebar-w: 236px;
  --rightbar-w: 320px;
  --player-h: 84px;
  --border: rgba(255,255,255,0.05);
  --border-soft: rgba(255,255,255,0.035);
}
html{ overflow:hidden; }
html, body{ height:100%; }
body{ display:block; overflow:hidden; }
header, footer, .wrap{ display:none !important; } /* old top nav/footer replaced by shell */

.shell{ display:flex; height:100vh; }
.main{ height:100vh; overflow-y:auto; }
.main, .rightbar, .side-nav{ scrollbar-width:none; -ms-overflow-style:none; }
.main::-webkit-scrollbar, .rightbar::-webkit-scrollbar, .side-nav::-webkit-scrollbar{ display:none; width:0; height:0; }

/* ---------- Sidebar ---------- */
.side{
  width:var(--sidebar-w); flex-shrink:0; background:#000; padding:20px 16px calc(var(--player-h) + 20px); display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  overflow:hidden; transition:width .18s ease, padding .18s ease, opacity .12s ease;
}
.side.collapsed{ width:0; padding-left:0; padding-right:0; opacity:0; pointer-events:none; }
.side-collapse-btn{
  position:fixed; top:22px; left:calc(var(--sidebar-w) - 34px); z-index:250; width:28px; height:28px; border-radius:8px;
  background:transparent; border:none; color:var(--text-2); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:left .18s ease, background .15s ease, color .15s ease;
}
.side-collapse-btn:hover{ background:rgba(255,255,255,0.08); color:var(--text); }
.side-collapse-btn svg{ width:14px; height:14px; transition:transform .18s ease; }
.side-collapse-btn.is-collapsed{ left:14px; }
.side-collapse-btn.is-collapsed svg{ transform:rotate(180deg); }
.side-brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 22px; }
.side-brand img{ height:20px; }
.side-brand span{ font-size:14px; font-weight:400; letter-spacing:0; color:var(--text); }
.side-nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.side-link{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
  color:var(--text-2); font-size:14px; font-weight:500; cursor:pointer; transition:background .12s ease, color .12s ease;
  border:none; background:none; width:100%; text-align:left; font-family:var(--font);
}
.side-link:hover{ color:var(--text); background:rgba(255,255,255,0.05); }
.side-link.active{ color:var(--text); background:rgba(255,255,255,0.08); }
.side-link .ic{ width:18px; height:18px; flex-shrink:0; opacity:0.9; }
.side-link .badge-new{
  margin-left:auto; font-size:9px; font-weight:700; letter-spacing:0.03em; color:#fff;
  background:var(--accent-grad); background-size:200% 100%; padding:2px 6px; border-radius:5px;
  position:relative; overflow:hidden; animation:shimmer-sweep 2.2s ease-in-out infinite;
}
.inbox-badge{
  margin-left:auto; font-size:11px; font-weight:700; color:#fff;
  background:#e5484d; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.badge-new{
  position:relative; overflow:hidden;
}
.badge-new::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  background-size:200% 100%; animation:shimmer-sweep 2.2s ease-in-out infinite;
}
.side-upgrade{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:10px; margin-bottom:12px;
  color:#e9d5ff; font-size:13px; font-weight:600; cursor:pointer; background:rgba(168,85,247,0.12); }
.side-user{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; cursor:pointer; }
.side-user:hover{ background:rgba(255,255,255,0.05); }
.side-user-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--accent-grad); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; overflow:hidden;
}
.side-user-avatar img{ width:100%; height:100%; object-fit:cover; }
.side-user-name{ font-size:13.5px; font-weight:600; line-height:1.2; }
.side-user-plan{ font-size:11.5px; color:var(--text-3); }
.side-guest-btns{ display:flex; flex-direction:column; gap:8px; }

.side-account-wrap{ position:relative; }
.side-account-menu{
  position:absolute; bottom:calc(100% + 6px); left:0; min-width:100%; width:max-content; max-width:260px;
  background:#000000; border:1px solid rgb(10 10 10); border-radius:12px;
  padding:6px; box-shadow:0 12px 32px rgba(0,0,0,0.5); overflow:visible;
  display:none; flex-direction:column; gap:1px; z-index:60;
}
.side-account-menu.open{ display:flex; }
.side-account-menu button{
  display:flex; align-items:center; width:100%; text-align:left; background:none; border:none;
  color:var(--text-2); font-size:13px; padding:9px 10px; border-radius:8px; cursor:pointer; font-family:var(--font);
  white-space:nowrap;
}
.side-account-menu button:hover{ background:rgba(255,255,255,0.06); color:var(--text); }
.side-account-menu button.danger{ color:#ff8a8a; }
.side-account-menu button.danger:hover{ color:#ff8a8a; }
.side-account-menu .divider{ height:1px; background:var(--border); margin:4px 2px; }
@media (max-width:900px){
  .side-account-menu{ left:0; right:0; min-width:0; width:auto; max-width:none; }
}

.profile-modal-body{ display:flex; align-items:center; gap:16px; margin-top:14px; margin-bottom:0; }
.profile-modal-avatar{
  width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:linear-gradient(135deg,#7c5cff,#3d2a8f); color:#fff; font-weight:700; font-size:22px;
  display:flex; align-items:center; justify-content:center;
}
.profile-modal-avatar img{ width:100%; height:100%; object-fit:cover; }
.profile-modal-info{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.profile-modal-handle{ font-size:16px; font-weight:600; }
.profile-modal-email{ font-size:12.5px; color:var(--text-3); margin-top:-4px; }
.profile-modal-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.profile-modal-columns{
  display:grid; grid-template-columns:1fr 1fr; gap:0 28px; margin-top:6px;
}
.profile-modal-col{ display:flex; flex-direction:column; min-width:0; }
.profile-modal-col:first-child{ border-right:1px solid rgba(255,255,255,0.08); padding-right:28px; }
.profile-modal-col:last-child{ padding-left:0; }
.profile-modal-section{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.08); }
.profile-modal-col:first-child .profile-modal-section:first-child{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.08); }
.profile-modal-section-bio{ display:flex; flex-direction:column; flex:1; }
.profile-modal-section-bio .profile-bio-wrap{ flex:1; display:flex; }
.profile-modal-section-bio .profile-bio-wrap textarea{ flex:1; }
.profile-modal-section-title{ font-size:13px; font-weight:700; margin-bottom:9px; }
@media (max-width: 640px){
  .profile-modal-columns{ grid-template-columns:1fr; }
  .profile-modal-col:first-child{ border-right:none; padding-right:0; border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:4px; }
}
.settings-notif-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid rgba(255,255,255,0.06); }
.settings-notif-row:first-of-type{ border-top:none; }
.settings-notif-row .sub{ margin:2px 0 0; }
.settings-notif-label{ font-size:14px; font-weight:600; }
.profile-modal-row{ display:flex; gap:10px; }
.profile-modal-row input{
  flex:1; min-width:0; background:#050505; border:1px solid transparent; border-radius:10px;
  padding:11px 14px; color:var(--text); font-size:14.5px; font-family:var(--font);
  transition:border-color .15s ease;
}
.profile-modal-row input:focus{ outline:none; border-color:rgba(255,255,255,0.25); }
.profile-modal-section .sub{ margin:6px 0 0; font-size:11.5px; color:var(--text-3); }
.profile-modal-section .field{ margin-bottom:10px; }
.profile-modal-section .alert{ margin-bottom:10px; padding:9px 12px; font-size:12.5px; }
.profile-bio-wrap{ position:relative; }
.profile-bio-wrap textarea{
  width:100%; background:#050505; border:1px solid rgba(255,255,255,0.14); transition:border-color .15s ease; padding-bottom:24px;
}
.profile-bio-wrap textarea:focus{ border-color:rgba(255,255,255,0.3); }
.profile-bio-counter{
  position:absolute; right:10px; bottom:8px; font-size:11px; color:var(--text-3); pointer-events:none;
}
.profile-bio-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:10px; }
.profile-bio-footer .sub{ margin:0; }

/* ---------- Main content ---------- */
.main{ flex:1; min-width:0; padding:20px 28px calc(var(--player-h) + 40px); display:flex; flex-direction:column; min-height:100vh; box-sizing:border-box; }
.main.with-right{ margin-right:var(--rightbar-w); }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
.top-search{ flex:1; max-width:520px; position:relative; }
.top-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:15px; height:15px; opacity:0.4; }
.top-search input{
  width:100%; background:#0a0a0a; border:none; border-radius:10px;
  padding:10px 14px 10px 38px; color:var(--text); font-size:13.5px; font-family:var(--font);
}
.top-search input:focus{ outline:none; }
.search-icon-btn{ display:none; }
.search-close-btn{ display:none; }

.search-suggest{
  display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:40;
  background:#141414; border:1px solid rgba(255,255,255,0.08); border-radius:14px;
  padding:6px; max-height:420px; overflow-y:auto; box-shadow:0 16px 40px rgba(0,0,0,0.45);
}
.search-suggest.open{ display:block; }
.search-suggest-row{
  display:flex; align-items:center; gap:11px; padding:8px; border-radius:10px; cursor:pointer;
}
.search-suggest-row:hover, .search-suggest-row.active{ background:rgba(255,255,255,0.06); }
.search-suggest-row img{ width:36px; height:36px; border-radius:8px; object-fit:cover; background:#111; flex-shrink:0; }
.search-suggest-row .n{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-suggest-row .m{ font-size:11.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-suggest-empty{ padding:16px 12px; font-size:12.5px; color:var(--text-3); text-align:center; }
.search-suggest-more{
  display:block; text-align:center; padding:9px; font-size:12px; font-weight:600; color:var(--text-2);
  border-top:1px solid rgba(255,255,255,0.06); margin-top:4px; cursor:pointer;
}
.search-suggest-more:hover{ color:var(--text); }
.top-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.top-actions .btn{ text-transform:uppercase; letter-spacing:0.03em; font-weight:600; }
.menu-toggle{
  display:none; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0;
  background:none; border:none; border-radius:9px; color:var(--text); cursor:pointer;
}
.menu-toggle:active{ background:rgba(255,255,255,0.08); }
.menu-toggle svg{ width:18px; height:18px; }
.topbar-title{ display:none; font-size:16px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-right:6px; }
.side-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(1px); z-index:290; opacity:0; transition:opacity .18s ease; }
.side-overlay.open{ display:block; opacity:1; }

/* ---------- Right rail ---------- */
.rightbar{
  width:var(--rightbar-w); flex-shrink:0; padding:20px 22px 40px;
  position:fixed; right:0; top:0; bottom:var(--player-h); overflow-y:auto; background:#000;
  mask-image:linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%);
}
.rightbar h3{ font-size:12.5px; font-weight:400; letter-spacing:0.04em; color:var(--text); text-transform:uppercase; margin-bottom:14px; }
.top-track-row{ display:flex; align-items:center; gap:10px; padding:8px 6px; cursor:pointer; border-radius:8px; }
.top-track-row:hover{ background:rgba(255,255,255,0.04); }
.top-rank{ width:16px; font-size:13px; color:var(--text-3); font-weight:600; flex-shrink:0; text-align:center; }
.top-thumb-wrap{ position:relative; width:38px; height:38px; flex-shrink:0; border-radius:8px; overflow:hidden; }
.top-thumb{ width:38px; height:38px; border-radius:8px; object-fit:cover; background:#111; flex-shrink:0; }
.top-thumb-play{
  position:absolute; inset:0; background:rgba(0,0,0,0.45);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease;
}
.top-thumb-play .ic{ width:14px; height:14px; }
.top-track-row:hover .top-thumb-play{ opacity:1; }
.top-track-row.is-playing .top-thumb-play{ opacity:1; }
.top-info{ flex:1; min-width:0; }
.top-info .n{ font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-info .m{ font-size:11.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-track-row .fav-toggle-btn{ flex-shrink:0; padding:5px 7px !important; background:transparent; border:none !important; }
.top-track-row .fav-toggle-btn:hover{ background:rgba(255,255,255,0.06); border:none !important; }
.top-track-row .fav-toggle-btn .fav-count{ font-size:10.5px; color:var(--text-2); }
.top-track-row .fav-toggle-btn.is-favorited .fav-count{ color:#fff; }
/* ---------- Track detail page (own page per track) ---------- */
.track-back-btn{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--text-2);
  font-size:13px; font-weight:600; cursor:pointer; padding:0; margin-bottom:16px;
}
.track-back-btn:hover{ color:var(--text); }
.track-back-btn svg{ width:16px; height:16px; }
.track-hero{
  position:relative; border-radius:20px; overflow:hidden; min-height:340px; margin-bottom:22px;
  background:linear-gradient(135deg,#0c0c0e,#000);
  display:flex; align-items:flex-end;
}
.track-hero-cover-wrap{ position:absolute; inset:0; z-index:0; }
.track-hero-cover{ width:100%; height:100%; object-fit:cover; opacity:0.65; }
.track-hero::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top, #000 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.15) 100%);
}
.track-hero .cover-play-btn{ width:64px; height:64px; }
.track-hero .cover-play-btn svg{ width:22px; height:22px; }
.track-hero-info{ position:relative; z-index:1; padding:32px 36px; width:100%; }
.track-hero-eyebrow{ font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; }
.track-hero-title{ font-size:32px; font-weight:700; letter-spacing:-0.02em; margin-bottom:8px; }
.track-hero-sub{ font-size:14px; color:var(--text-2); margin-bottom:14px; }
.track-hero .cover-seek-row{ position:absolute; left:36px; right:36px; bottom:16px; margin-top:0; }
.track-page-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-pill{
  display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600;
  background:rgba(255,255,255,0.1); border:none; box-shadow:none; color:var(--text-2);
}
.track-page-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.track-page-buy-wrap{ display:flex; align-items:center; gap:12px; }
.track-page-buy-wrap .market-price{ font-size:16px; font-weight:700; }
.track-page-details{ display:flex; flex-direction:column; gap:2px; }

.genre-title{ margin-top:26px; }

/* ---------- App footer (shell view) ---------- */
.app-footer{
  margin-top:auto; padding:48px 0 8px; border-top:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.app-footer-brand{ display:flex; align-items:center; gap:9px; color:var(--text-2); font-size:13px; font-weight:600; }
.app-footer-brand img{ height:16px; width:auto; }
.app-footer-links{ display:flex; gap:18px; flex-wrap:wrap; }
.app-footer-links a{ font-size:12.5px; color:var(--text-3); }
.app-footer-links a:hover{ color:var(--text-2); }
.app-footer-copy{ font-size:12px; color:var(--text-3); }
.app-footer-pay{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.app-footer-pay-label{ font-size:11px; color:var(--text-3); }
.app-footer-pay-icon{ display:flex; align-items:center; opacity:.85; transition:opacity .15s ease; }
.app-footer-pay-icon:hover{ opacity:1; }

/* ---------- Automatic "visiyon.com" watermark on generated track covers ---------- */
.vy-watermark{
  position:absolute; right:8px; bottom:8px; z-index:2;
  font-size:10.5px; font-weight:600; letter-spacing:.2px; color:rgba(255,255,255,0.92);
  background:rgba(0,0,0,0.45); backdrop-filter:blur(2px);
  padding:3px 7px; border-radius:6px; pointer-events:none; user-select:none;
  font-family:inherit; line-height:1;
}
.vy-watermark-lg{ right:16px; bottom:16px; font-size:13px; padding:5px 10px; border-radius:8px; }
@media (max-width: 760px){
  .app-footer{ flex-direction:column; align-items:flex-start; }
  .app-footer-copy{ width:100%; }
  .app-footer-pay{ margin-left:0; }
}
.genre-pill-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.genre-pill{
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; font-size:12.5px; font-weight:500;
  background:rgba(255,255,255,0.05); border:none; box-shadow:none; color:var(--text-2); cursor:pointer;
  max-width:100%; transition:background-color .15s ease, color .15s ease;
}
.genre-pill:hover{ color:var(--text); background:rgba(255,255,255,0.1); }
.genre-pill .gicon{ width:13px; height:13px; flex-shrink:0; display:flex; }
.genre-pill .gicon svg{ width:100%; height:100%; }
.genre-pill .gtext{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Hero ---------- */
.hero{
  border-radius:20px; background:radial-gradient(circle at 75% 30%, rgba(168,85,247,0.18), transparent 60%),
  linear-gradient(135deg,#0c0c0e,#000); padding:40px 44px; margin-bottom:30px; position:relative; overflow:hidden; min-height:260px;
}
.hero-cover-wrap{ position:absolute; top:0; right:0; width:58%; height:100%; z-index:0; }
.hero-cover{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 38%); mask-image:linear-gradient(to right, transparent, #000 38%);
  opacity:0.55;
}
.hero-eyebrow, .hero-title, .hero-sub, .hero-play-btn, .hero-dots{ position:relative; z-index:1; }

/* ---------- Reusable cover player (centered play/pause + seek bar) ---------- */
.cover-play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%;
  background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2; transition:background .15s ease, transform .15s ease;
}
.cover-play-btn:hover{ background:rgba(0,0,0,0.75); transform:translate(-50%,-50%) scale(1.05); }
.cover-play-btn svg{ width:20px; height:20px; }
.cover-seek-row{ position:relative; z-index:2; display:flex; align-items:center; gap:8px; margin-top:10px; }
.cover-seek-time{ font-size:10.5px; color:var(--text-3); width:30px; flex-shrink:0; }
.cover-seek{ flex:1; appearance:none; height:3px; border-radius:999px; background:rgba(255,255,255,0.25); outline:none; cursor:pointer; }
.cover-seek::-webkit-slider-thumb{ appearance:none; width:10px; height:10px; border-radius:50%; background:#fff; cursor:pointer; }
.cover-seek::-webkit-slider-runnable-track{ height:3px; border-radius:999px; background:linear-gradient(to right,#fff var(--pct,0%),rgba(255,255,255,0.25) var(--pct,0%)); }
.hero-cover-wrap .cover-seek-row{ position:absolute; left:12%; right:12%; bottom:18px; margin-top:0; }
.hero-eyebrow{ font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:10px; }
/* Fixed-height reservations so switching slides never shifts anything
   below it — title/sub used to be allowed to wrap to a second line on
   longer track titles, pushing the play button and dots down a beat
   after the auto-advance, which read as the whole hero "jumping". */
.hero-title{
  font-size:38px; font-weight:600; letter-spacing:-0.02em; margin-bottom:8px; max-width:480px;
  height:46px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.hero-sub{ font-size:14px; color:var(--text-2); margin-bottom:22px; height:18px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:480px; }
.hero-play-btn{
  display:inline-flex; align-items:center; gap:9px; background:#fff; color:#000; font-weight:700; font-size:13px;
  padding:11px 22px; border-radius:999px; border:none; cursor:pointer; text-transform:uppercase; letter-spacing:0.03em;
}
.hero-play-btn svg{ width:12px; height:12px; }
.hero-dots{ display:flex; gap:6px; margin-top:28px; }
.hero-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.25); }
.hero-dot.active{ background:#fff; width:16px; border-radius:4px; }

.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.section-head h2{ font-size:17px; font-weight:700; }
.section-head a{ font-size:12.5px; color:var(--text-3); cursor:pointer; }
.section-head a:hover{ color:var(--text); }

/* ---------- Track cards (Newly generated grid) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:16px; margin-bottom:30px; }
.track-card{ cursor:pointer; }
.track-card-art{ position:relative; width:100%; aspect-ratio:1; border-radius:12px; overflow:hidden; background:#111; margin-bottom:9px; }
.track-card-art img{ width:100%; height:100%; object-fit:cover; }
.track-card-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.85); width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,0.3); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease, transform .15s ease;
}
.track-card:hover .track-card-play{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.track-card-play .ring{ position:absolute; inset:0; width:44px; height:44px; transform:rotate(-90deg); }
.track-card-play .ring circle{ fill:none; cx:22; cy:22; r:19; stroke-width:2; }
.track-card-play .ring-bg{ stroke:rgba(255,255,255,0.25); }
.track-card-play .ring-fg{
  stroke:#fff; stroke-linecap:round; stroke-dasharray:119.4; stroke-dashoffset:119.4; transition:stroke-dashoffset .1s linear;
}
.track-card-play .ic{ width:14px; height:14px; position:relative; z-index:1; }
.track-card.is-playing .track-card-play{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.track-card .n{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-card .m{ font-size:12px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-card-add-playlist{ margin-top:8px; }
.track-card-actions{
  position:absolute; left:6px; right:6px; bottom:6px; z-index:2;
  display:flex; gap:4px;
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.track-card:hover .track-card-actions{ opacity:1; transform:translateY(0); pointer-events:auto; }
@media (hover: none){
  .track-card-actions{ opacity:1; transform:none; pointer-events:auto; }
}
.track-card-actions .btn{
  flex-shrink:1; min-width:0; padding:4px 8px; font-size:10.5px;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(3px); border:none; color:#fff;
}
.track-card-actions .btn:hover{ background:rgba(0,0,0,0.75); }
.track-card-actions .track-card-add-playlist{ margin-top:0; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.track-card-actions .fav-toggle-btn{ flex:0 0 auto; }
.icon-only{ padding:6px 9px !important; }
.fav-toggle-btn.is-favorited{ border:none !important; }
.fav-toggle-btn{
  display:inline-flex !important; align-items:center; gap:4px;
  /* Heart icon uses stroke="currentColor" — without an explicit color here
     the button falls back to the browser's default black button text,
     which is invisible on this dark UI (that's the "onzichtbaar" heart in
     Top Charts). */
  color:var(--text-2);
  /* Base .btn styling gives buttons a white/light pill background. On the
     heart-only favorite buttons in list rows that white pill swallows the
     heart icon, making it look invisible. Force it transparent here so
     only the heart glyph shows, with no border either. */
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.fav-toggle-btn:hover{ color:var(--text); background:rgba(255,255,255,0.08) !important; }
.fav-toggle-btn.is-favorited{ color:#fff; }
.fav-toggle-btn .fav-count{ font-size:10.5px; color:var(--text-2); line-height:1; }
.fav-toggle-btn.is-favorited .fav-count{ color:#fff; }

/* ---------- Promo banner ---------- */
.promo{
  display:flex; align-items:center; justify-content:space-between; gap:24px; background:#000;
  border-radius:18px; padding:32px; margin-top:8px; overflow:hidden;
}
.promo-copy h2{ font-size:clamp(26px,3vw,32px); font-weight:600; line-height:1.35; max-width:360px; margin-bottom:22px; letter-spacing:-0.01em; }
.promo-copy .btn{
  background:#fff; color:#000; border-radius:10px; font-weight:700; padding:12px 20px; border:none; cursor:pointer;
  font-size:13px; text-transform:uppercase; letter-spacing:0.03em;
}
.promo-art-wrap{ position:relative; width:100%; max-width:460px; height:220px; border-radius:12px; overflow:hidden; flex-shrink:0; background:#000; }
.promo-art{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(0.72) saturate(1.05); }
.promo-art-wrap::after{
  content:''; position:absolute; inset:0; border-radius:12px;
  background:linear-gradient(90deg, #000 0%, transparent 30%), radial-gradient(circle at 100% 100%, transparent 40%, #000 100%);
  box-shadow:inset 0 0 30px 8px rgba(0,0,0,0.5);
}
@media (max-width: 900px){ .promo-art-wrap{ display:none; } }

.artist-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:16px; margin-bottom:30px; }
.artist-card{
  cursor:pointer; text-align:center; background:transparent; border:none;
  border-radius:14px; padding:18px 12px; display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:background .15s ease;
}
.artist-card:hover{ background:rgba(255,255,255,0.03); }
.artist-avatar{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#7c5cff,#3d2a8f); color:#fff; font-weight:700; font-size:20px;
  margin-bottom:4px; flex-shrink:0; overflow:hidden;
}
.artist-avatar img{ width:100%; height:100%; object-fit:cover; }
.artist-card .n{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.artist-card .m{ font-size:11.5px; color:var(--text-3); }
.artist-card .btn{ margin-top:6px; }

/* X/Twitter-style profile: flat black, no card box, edge-to-edge banner,
   avatar overlapping the banner, floating pill action buttons top-right. */
.artist-page-wrap{ max-width:560px; margin:0 auto; }
.artist-page-card{
  background:#000; border:none; border-radius:0; overflow:visible; padding:0 20px;
}
.artist-page-head{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; padding:0 0 16px; }
.artist-page-head .artist-avatar{
  width:120px; height:120px; font-size:38px; border:4px solid #000; margin-top:-62px; flex-shrink:0;
  box-shadow:none;
}
.artist-page-headtext{ flex:1; min-width:0; padding-top:12px; display:flex; flex-direction:column; align-items:center; width:100%; }
.artist-page-name{ font-size:26px; font-weight:800; margin-bottom:2px; color:#fff; letter-spacing:-0.2px; }
.artist-page-handle{ font-size:16px; color:var(--text-3); margin-bottom:12px; }
.artist-page-joined{ font-size:14px; color:var(--text-3); margin-bottom:14px; display:flex; align-items:center; justify-content:center; }
.artist-page-stats{ font-size:16px; color:var(--text); margin-bottom:16px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.artist-page-stats span{ color:var(--text-3); }
.artist-page-stats b{ color:#fff; font-weight:700; margin-right:4px; }
.artist-trophy-case{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:20px; padding-bottom:4px; }
.trophy-badge{ position:relative; display:inline-flex; cursor:default; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.trophy-badge:hover{ transform:scale(1.12); transition:transform 0.15s ease; }
.trophy-rank{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  font-size:9px; font-weight:800; color:#000; background:#fff;
  border-radius:999px; padding:1px 5px; line-height:1.3; white-space:nowrap;
  box-shadow:0 0 0 2px #000;
}
.artist-stat-btn{
  background:none; border:none; color:var(--text-3); font-size:14px; cursor:pointer;
  padding:4px 10px; border-radius:8px; font-family:inherit;
}
.artist-stat-btn b{ color:#fff; font-weight:700; margin-right:4px; }
.artist-stat-btn:hover{ background:rgba(255,255,255,0.08); color:var(--text); }
.artist-page-actions{ position:static; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
.btn-pill{ border-radius:999px; padding:8px 18px; font-weight:700; }
.artist-follow-btn{ background:#fff; color:#000; border:1px solid #fff; }
.artist-follow-btn:hover{ background:rgba(255,255,255,0.85); }
.artist-follow-btn.is-following{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.35); }
.artist-follow-btn.is-following:hover{ border-color:rgba(255,80,80,0.6); color:#ff5c5c; }
.artist-page-cover{
  position:relative; height:200px; margin:0 -20px 0;
  background:#000;
  background-size:cover; background-position:center 50%; overflow:hidden;
  user-select:none;
}
.artist-page-cover.is-draggable{ cursor:grab; }
.artist-page-cover.is-dragging{ cursor:grabbing; }
.artist-page-cover-edit{
  position:absolute; right:12px; top:12px; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
  border-color:rgba(255,255,255,0.25); color:#ffffff; z-index:2;
}
.artist-page-cover-edit:hover{ background:rgba(0,0,0,0.75); }
.artist-page-cover-save{
  position:absolute; left:12px; top:12px; color:#000000; z-index:2;
}
.verified-badge{
  display:inline-flex; vertical-align:-3px; margin-left:4px; flex-shrink:0;
}
.verified-badge svg{ display:block; }
.artist-posts-col{ max-width:none; padding:0; }
.artist-posts-col #artist-page-post-composer{ padding:16px 0; margin-bottom:0 !important; }
.artist-posts-col #artist-page-posts{ margin:0; }
.artist-posts-col #artist-page-posts .artist-post{ padding:12px 0; }
#artist-page-back-btn{
  border-radius:999px; padding:9px 18px; font-weight:700; background:transparent;
  border:1px solid rgba(255,255,255,0.3); color:#fff; outline:none; box-shadow:none;
}
#artist-page-back-btn:hover{ background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.5); }
#artist-page-back-btn:focus, #artist-page-back-btn:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(255,255,255,0.25); }
.artist-posts-col .gen-textarea{
  background:#000; border:1px solid rgba(255,255,255,0.2); border-radius:6px;
}
.artist-posts-col .gen-textarea:focus{ border-color:rgba(255,255,255,0.4); }
.mention-suggest{
  position:absolute; left:0; right:0; top:100%; margin-top:4px; background:#0a0a0a;
  border:1px solid rgba(255,255,255,0.15); border-radius:8px; overflow:hidden; z-index:20;
  max-height:220px; overflow-y:auto; box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.mention-suggest-row{
  display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; font-size:13.5px;
}
.mention-suggest-row:hover, .mention-suggest-row.active{ background:rgba(255,255,255,0.08); }
.mention-suggest-avatar{
  width:26px; height:26px; border-radius:50%; flex-shrink:0; object-fit:cover;
  background:var(--accent, #7c5cff); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11.5px; font-weight:700;
}
.mention-suggest-name{ font-weight:600; color:#fff; }
.mention-suggest-handle{ color:var(--text-3); font-size:12px; margin-left:4px; }
.post-comment-input:focus{ border-color:rgba(255,255,255,0.4); outline:none; }
.artist-page-main .section-head{ padding-bottom:10px; margin-bottom:0; }
.artist-page-main .section-head h2{ font-size:15px; font-weight:800; }

.artist-page-body{ margin-top:0; }
.artist-page-main{ min-width:0; padding:0 20px; }
.artist-sidebar-followers{ display:flex; flex-direction:column; gap:10px; }
.artist-sidebar-follower{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.artist-sidebar-follower-avatar{ width:32px; height:32px; border-radius:50%; flex-shrink:0; object-fit:cover; background:var(--accent, #7c5cff); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:700; }
.artist-sidebar-follower-name{ font-size:13px; font-weight:600; }
.artist-sidebar-follower-handle{ font-size:11.5px; color:var(--text-3); }
.artist-sidebar-empty{ font-size:12.5px; color:var(--text-3); }
@media (max-width: 860px){
  .artist-page-cover{ margin:0 -20px 0; }
}

/* ---------- Generator view ---------- */
.gen-layout{ display:flex; gap:0; align-items:flex-start; }
.gen-main{ flex:1; min-width:0; padding-right:30px; }
.gen-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.gen-head h1{ font-size:26px; font-weight:600; }
.gen-sub{ color:var(--text-3); font-size:13.5px; margin-bottom:26px; }
.gen-label{ font-size:13.5px; font-weight:600; margin-bottom:9px; }
.gen-textarea{
  width:100%; background:#0a0a0a; border:none; border-radius:14px; padding:16px;
  color:var(--text); font-size:14px; font-family:var(--font); min-height:110px; resize:vertical;
}
.gen-textarea:focus{ outline:none; }
.gen-charcount{ text-align:right; font-size:11.5px; color:var(--text-3); margin:6px 2px 22px; }
.mode-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.mode-card{
  border-radius:14px; padding:16px; cursor:pointer; background:#0a0a0a;
}
.mode-card.active{ background:rgba(168,85,247,0.08); }
.mode-card .t{ font-size:14px; font-weight:700; margin-bottom:4px; }
.mode-card .d{ font-size:12px; color:var(--text-3); }
.mode-icon{ width:18px; height:18px; margin-bottom:10px; opacity:0.85; }
.field-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:6px; }
@media (max-width:900px){ .field-grid4{ grid-template-columns:1fr 1fr; } .mode-grid{ grid-template-columns:1fr; } }
.field-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media (max-width:640px){ .field-grid2{ grid-template-columns:1fr; } }
.mashup-drop{
  border:1px dashed var(--border); border-radius:12px; padding:16px; text-align:center;
  background:#0a0a0a;
}
.mashup-drop.has-file{ border-color:rgba(168,85,247,0.5); }
.mashup-filename{ font-size:12px; color:var(--text-3); margin-top:8px; word-break:break-all; }
.waveform-crop{
  position:relative; margin-top:12px; border-radius:8px; overflow:hidden;
  background:#050505; user-select:none; max-width:100%;
}
.waveform-canvas{ display:block; width:100%; max-width:100%; height:90px; }
@media (max-width:480px){ .waveform-canvas{ height:64px; } .waveform-handle::before{ height:16px; } }
.waveform-dim{
  position:absolute; top:0; bottom:0; background:rgba(0,0,0,0.65); pointer-events:none;
}
.waveform-dim-left{ left:0; }
.waveform-dim-right{ right:0; }
.waveform-handle{
  position:absolute; top:0; bottom:0; width:10px; margin-left:-5px;
  background:rgba(168,85,247,0.9); cursor:ew-resize; touch-action:none;
}
.waveform-handle::before{
  content:''; position:absolute; top:50%; left:50%; width:2px; height:20px;
  background:#fff; transform:translate(-50%,-50%);
}
.waveform-handle:hover, .waveform-handle.dragging{ background:rgba(192,132,252,1); }
.waveform-playhead{
  position:absolute; top:0; bottom:0; width:2px; background:#fff; pointer-events:none;
  box-shadow:0 0 6px rgba(255,255,255,0.8); z-index:2;
}
.waveform-time{ font-size:11.5px; color:var(--text-3); margin-top:6px; }
.mashup-track-picker{
  margin-top:10px; max-height:220px; overflow-y:auto; border-radius:10px;
  background:#0a0a0a; border:1px solid var(--border); text-align:left;
}
.mashup-track-picker .row{
  display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; font-size:13px;
}
.mashup-track-picker .row:hover{ background:rgba(168,85,247,0.12); }
.mashup-track-picker .row img{ width:28px; height:28px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.mashup-track-picker .empty{ padding:14px 12px; font-size:12.5px; color:var(--text-3); text-align:center; }
.gen-field label{ display:block; font-size:12.5px; color:var(--text-2); margin-bottom:7px; }
.gen-field select, .gen-field input[type=text]{
  width:100%; background:#0a0a0a; border:none; border-radius:10px; padding:9px 12px;
  color:var(--text); font-size:13.5px; font-family:var(--font);
}
.gen-field select option{ background:#1a1a1a; color:#fff; }
.gen-advanced-toggle{ font-size:13px; color:var(--text-2); cursor:pointer; display:inline-flex; align-items:center; gap:4px; margin:18px 0 8px; }
.gen-advanced-fields{ display:none; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:10px; }
.gen-advanced-fields.open{ display:grid; }
.gen-submit-row{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:28px; }
#share-prompt-btn{ width:auto; align-self:center; padding:6px 14px; font-size:12px; min-height:0; background:#fff; color:#000 !important; }
.gen-submit-btn{
  width:auto; min-width:260px; max-width:420px; background:var(--accent-grad); color:#fff; font-weight:700; font-size:14.5px; border:none;
  border-radius:12px; padding:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
}
.gen-submit-btn:disabled{ opacity:0.6; cursor:default; }
.gen-note{ font-size:12px; color:var(--text-3); }

/* Buy Now buttons — match the Generate Track gradient instead of the
   default white/system button look. */
[data-buy-track], #track-page-download{
  background:var(--accent-grad) !important; color:#fff !important;
  border:none !important; font-weight:700 !important;
}
[data-buy-track]:hover, #track-page-download:hover{ opacity:0.88; }
.gen-promo{
  margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:#0a0a0a;
  border-radius:16px; padding:22px 26px;
}
.gen-promo .t{ font-weight:700; font-size:15px; margin-bottom:4px; }
.gen-promo .d{ font-size:12.5px; color:var(--text-3); }

/* ---------- Generator right rail (Now generating / preview / history) ---------- */
.gen-right{ width:var(--rightbar-w); flex-shrink:0; }
.now-gen-box{ border-radius:16px; padding:18px; margin-bottom:18px; }
.now-gen-box .lbl{ font-size:11.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; }
.now-gen-row{ display:flex; align-items:center; justify-content:space-between; }
.now-gen-title{ font-size:14.5px; font-weight:700; }
.now-gen-pct{ font-size:11.5px; color:var(--text-3); margin-top:2px; }
.now-gen-pct.shimmer-text{
  background:linear-gradient(90deg, var(--text-3) 0%, #fff 50%, var(--text-3) 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer-sweep 1.8s ease-in-out infinite;
}
@keyframes shimmer-sweep{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.pending-row{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:12px;
  background:#0a0a0a; border:1px solid rgba(255,255,255,0.06); margin-bottom:10px; font-size:13px; color:var(--text-2);
  position:relative; overflow:hidden;
}
.pending-row::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  background-size:200% 100%; animation:shimmer-sweep 1.6s ease-in-out infinite;
}
.pending-spinner{
  display:inline-block; width:16px; height:16px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(255,255,255,0.15); border-top-color:#c084fc; border-right-color:#ec4899;
  animation:spin .8s linear infinite;
}
.spinner-ring{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  border:3px solid rgba(255,255,255,0.15); border-top-color:#c084fc; border-right-color:#ec4899;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.preview-art{
  width:100%; aspect-ratio:1; border-radius:14px; background:radial-gradient(circle,rgba(168,85,247,0.35),rgba(0,0,0,0.9) 70%);
  display:flex; align-items:center; justify-content:center; margin:14px 0 12px; position:relative; overflow:hidden;
}
.preview-art .ring{
  width:60%; aspect-ratio:1; border-radius:50%; box-shadow:0 0 40px rgba(168,85,247,0.5);
}
.preview-art.is-generating .ring{
  animation:preview-pulse 1.8s ease-in-out infinite;
}
.preview-art.is-generating::before{
  content:''; position:absolute; inset:0; border-radius:50%; margin:auto; width:78%; aspect-ratio:1;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.55) 40deg, transparent 90deg);
  animation:spin 1.6s linear infinite; opacity:0.8; mix-blend-mode:screen;
}
@keyframes preview-pulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 40px rgba(168,85,247,0.5); }
  50%{ transform:scale(1.06); box-shadow:0 0 60px rgba(236,72,153,0.65); }
}
.preview-art-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#preview-seek-row{ margin-top:-4px; margin-bottom:12px; }
.now-gen-stats{ grid-template-columns:repeat(3,1fr); gap:10px; margin-top:2px; }
.now-gen-stats div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.now-gen-stats span{ font-size:10.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:0.03em; }
.now-gen-stats b{
  font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word;
}
.hist-row{ display:flex; align-items:center; gap:11px; padding:9px 0; cursor:pointer; }
.hist-row:hover{ background:rgba(255,255,255,0.04); border-radius:8px; }
.hist-thumb{ width:36px; height:36px; border-radius:8px; object-fit:cover; background:#111; flex-shrink:0; }
.hist-info .n{ font-size:13px; font-weight:600; }
.hist-info .m{ font-size:11px; color:var(--text-3); }
.hist-time{ margin-left:auto; font-size:11px; color:var(--text-3); flex-shrink:0; }

/* ---------- Sticky player ---------- */
.player{
  position:fixed; left:0; right:0; bottom:0; height:var(--player-h); background:#000; display:none; align-items:center; padding:0 22px; gap:22px; z-index:200;
}
.player.show{ display:flex; }
.player-track{ display:flex; align-items:center; gap:12px; width:260px; flex-shrink:0; }
.player-art{ width:48px; height:48px; border-radius:9px; object-fit:cover; background:#111; flex-shrink:0; }
.player-track .n{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-track .m{ font-size:11.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-heart{ width:16px; height:16px; opacity:0.5; cursor:pointer; flex-shrink:0; transition:opacity .15s ease, transform .15s ease; }
.player-heart:hover{ opacity:0.85; }
.player-heart.active{ opacity:1; transform:scale(1.08); }
.player-close-btn{
  background:none; border:none; cursor:pointer; color:var(--text-2); display:flex; align-items:center; justify-content:center;
  padding:0; flex-shrink:0; transition:color .15s ease;
}
.player-close-btn:hover{ color:var(--text); }
.player-mid{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; max-width:640px; margin:0 auto; }
.player-btns{ display:flex; align-items:center; gap:20px; }
.player-btns button{ background:none; border:none; cursor:pointer; color:var(--text-2); padding:11px; margin:-11px; display:flex; align-items:center; justify-content:center; position:relative; min-width:38px; min-height:38px; -webkit-tap-highlight-color:transparent; }
.player-btns button:hover{ color:#fff; }
.player-btns button.active{ color:#a855f7; }
.repeat-one-dot{
  position:absolute; top:-6px; right:-7px; width:12px; height:12px; border-radius:50%; background:#a855f7; color:#fff;
  font-size:8px; font-weight:700; align-items:center; justify-content:center; line-height:1;
}
.player-play-btn{
  width:34px; height:34px; border-radius:50%; background:#fff !important; display:flex; align-items:center; justify-content:center;
}
.player-play-btn svg{ fill:#000; }
.player-seek-row{ display:flex; align-items:center; gap:10px; width:100%; }
.player-time{ font-size:10.5px; color:var(--text-3); width:34px; flex-shrink:0; }
.player-time.dur{ text-align:right; }
.player-seek{ flex:1; appearance:none; height:12px; border-radius:999px; background:transparent; outline:none; cursor:pointer; }
.player-seek::-webkit-slider-thumb{ appearance:none; width:10px; height:10px; border-radius:50%; background:#fff; cursor:pointer; opacity:0; transition:opacity .12s ease; margin-top:-2px; }
.player-seek:hover::-webkit-slider-thumb{ opacity:1; }
.player-seek::-webkit-slider-runnable-track{
  height:6px;
  background:linear-gradient(to right,#fff var(--pct,0%),rgba(255,255,255,0.28) var(--pct,0%));
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='6' viewBox='0 0 28 6'%3E%3Cpath d='M0,3 C3.5,1.3 7,1.3 10.5,3 C14,4.7 17.5,4.7 21,3 C24.5,1.3 28,1.3 28,3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='6' viewBox='0 0 28 6'%3E%3Cpath d='M0,3 C3.5,1.3 7,1.3 10.5,3 C14,4.7 17.5,4.7 21,3 C24.5,1.3 28,1.3 28,3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-size:28px 6px; mask-size:28px 6px;
  -webkit-mask-position:0 0; mask-position:0 0;
}
.player-seek::-moz-range-track{
  height:6px;
  background:linear-gradient(to right,#fff var(--pct,0%),rgba(255,255,255,0.28) var(--pct,0%));
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='6' viewBox='0 0 28 6'%3E%3Cpath d='M0,3 C3.5,1.3 7,1.3 10.5,3 C14,4.7 17.5,4.7 21,3 C24.5,1.3 28,1.3 28,3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-repeat:repeat-x; mask-size:28px 6px; mask-position:0 0;
}
.player-seek.is-playing::-webkit-slider-runnable-track{ animation:seekWaveRun 0.9s linear infinite; }
.player-seek.is-playing::-moz-range-track{ animation:seekWaveRun 0.9s linear infinite; }
@keyframes seekWaveRun{ from{ -webkit-mask-position:0 0; mask-position:0 0; } to{ -webkit-mask-position:-28px 0; mask-position:-28px 0; } }
.player-right{ display:flex; align-items:center; gap:14px; width:180px; justify-content:flex-end; flex-shrink:0; }
.player-mute-btn{ background:none; border:none; cursor:pointer; color:inherit; display:flex; padding:0; flex-shrink:0; }
.player-mute-btn:hover{ color:var(--text); }
.player-vol{ width:80px; appearance:none; height:12px; border-radius:999px; background:transparent; outline:none; cursor:pointer; }
.player-vol::-webkit-slider-thumb{ appearance:none; width:9px; height:9px; border-radius:50%; background:#fff; cursor:pointer; margin-top:1.5px; }
.player-vol::-webkit-slider-runnable-track{
  height:12px;
  background:linear-gradient(to right,#fff var(--pct,80%),rgba(255,255,255,0.28) var(--pct,80%));
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Crect x='0' y='4' width='2.5' height='4' rx='1.2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Crect x='0' y='4' width='2.5' height='4' rx='1.2'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-size:8px 12px; mask-size:8px 12px;
  -webkit-mask-position:0 center; mask-position:0 center;
}
.player-vol::-moz-range-track{
  height:12px;
  background:linear-gradient(to right,#fff var(--pct,80%),rgba(255,255,255,0.28) var(--pct,80%));
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Crect x='0' y='4' width='2.5' height='4' rx='1.2'/%3E%3C/svg%3E");
  mask-repeat:repeat-x; mask-size:8px 12px; mask-position:0 center;
}
.player-vol.is-playing::-webkit-slider-runnable-track{ animation:volEqBounce 0.85s ease-in-out infinite; }
.player-vol.is-playing::-moz-range-track{ animation:volEqBounce 0.85s ease-in-out infinite; }
@keyframes volEqBounce{
  0%{ -webkit-mask-size:8px 30%; mask-size:8px 30%; }
  30%{ -webkit-mask-size:8px 95%; mask-size:8px 95%; }
  60%{ -webkit-mask-size:8px 50%; mask-size:8px 50%; }
  100%{ -webkit-mask-size:8px 30%; mask-size:8px 30%; }
}

/* ---------- Views ---------- */
.view{ display:none; }
.view.active{ display:block; }

/* ---------- Stub / soon panel ---------- */
.soon-panel{
  border-radius:18px; padding:60px 30px; text-align:center; color:var(--text-3);
}
.soon-panel .badge-new{ display:inline-block; margin-bottom:14px; }
.soon-panel h3{ color:var(--text); font-size:18px; margin-bottom:8px; }

/* ---------- Simple list (library / my tracks) ---------- */
.simple-list{ display:flex; flex-direction:column; gap:6px; }
.simple-row{ display:flex; align-items:center; gap:14px; padding:9px 10px; border-radius:10px; }
.simple-row-rank{ width:22px; flex-shrink:0; text-align:center; font-size:13.5px; font-weight:700; color:var(--text-3); }
.simple-row:hover{ background:rgba(255,255,255,0.04); }
.simple-row-thumb-wrap{ position:relative; width:42px; height:42px; flex-shrink:0; }
.simple-row img{ width:42px; height:42px; border-radius:9px; object-fit:cover; background:#111; flex-shrink:0; }
.simple-row-play{
  position:absolute; inset:0; border-radius:9px; background:rgba(0,0,0,0.45);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease;
}
.simple-row-play .ic{ width:15px; height:15px; }
.simple-row:hover .simple-row-play{ opacity:1; }
.simple-row.is-playing .simple-row-play{ opacity:1; }
.simple-row .n{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.simple-row .m{ font-size:12px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.simple-row .grow{ flex:1; min-width:0; }
.simple-row-desktop-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.simple-row-cover-actions{ display:none; }
.simple-row-mobile-market{ display:none; }
.simple-row-delete-btn{
  flex-shrink:0; background:none; border:none; color:var(--text-3); cursor:pointer;
  font-size:16px; line-height:1; padding:6px 8px; border-radius:8px;
}
.simple-row-delete-btn:hover{ color:#fff; background:rgba(255,255,255,0.08); }

/* ---- Generic kebab action menu (track rows/cards: Manage, Add to playlist, ...) ---- */
.action-menu-wrap{ position:relative; flex-shrink:0; }
.action-menu-btn{
  display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); border-radius:8px;
  color:var(--text-2); cursor:pointer; transition:background-color .15s ease, color .15s ease; flex-shrink:0;
}
.action-menu-btn:hover{ background:rgba(255,255,255,0.12); color:var(--text); }
.action-menu-btn[aria-expanded="true"]{ background:rgba(255,255,255,0.14); color:var(--text); }
.action-menu{
  position:absolute; top:calc(100% + 6px); right:0; min-width:170px; width:max-content; max-width:220px;
  background:#0a0a0a; border:1px solid rgba(255,255,255,0.1); border-radius:12px;
  padding:6px; box-shadow:0 14px 34px rgba(0,0,0,0.55); display:none; flex-direction:column; gap:1px; z-index:40;
}
.action-menu.open{ display:flex; }
.action-menu button{
  display:flex; align-items:center; width:100%; text-align:left; background:none; border:none;
  color:var(--text-2); font-size:13px; padding:9px 10px; border-radius:8px; cursor:pointer; font-family:var(--font);
  white-space:nowrap;
}
.action-menu button:hover{ background:rgba(255,255,255,0.06); color:var(--text); }

/* ---- Outlook-style Messages pane (inbox view) ---- */
.dm-pane{
  display:flex; gap:0; border:1px solid rgba(255,255,255,0.08); border-radius:12px;
  overflow:hidden; height:440px;
}
.dm-pane-full{ height:calc(100vh - 168px); min-height:460px; }
.dm-pane-list-wrap{ width:290px; flex-shrink:0; border-right:1px solid rgba(255,255,255,0.08); overflow-y:auto; }
.dm-pane-list{
  width:auto; flex-shrink:0; overflow-y:visible; padding:8px; margin:0;
  border-right:none; gap:2px;
}
.dm-thread-row.active{ background:rgba(255,255,255,0.08); }
.dm-thread-row.unread .n{ color:var(--text); font-weight:800; }
.dm-thread-row.unread .m{ color:var(--text-2); font-weight:600; }
.dm-thread-row-dot{
  width:9px; height:9px; border-radius:50%; background:#e5484d; flex-shrink:0;
  margin-left:auto; box-shadow:0 0 0 2px rgba(0,0,0,0.4);
}
.dm-pane-conversation{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dm-pane-empty{
  flex:1; display:flex; align-items:center; justify-content:center;
  color:var(--text-3); font-size:13.5px; text-align:center; padding:20px;
}
.dm-pane-open{ flex:1; display:flex; flex-direction:column; min-height:0; padding:14px; gap:10px; }
.dm-pane-header{ font-size:14px; font-weight:700; flex-shrink:0; display:flex; align-items:center; gap:4px; }
.dm-pane-back-btn{
  display:none; align-items:center; justify-content:center; width:30px; height:30px; margin-left:-6px;
  flex-shrink:0; background:none; border:none; border-radius:8px; color:var(--text); cursor:pointer;
}
.dm-pane-back-btn svg{ width:18px; height:18px; }
.dm-pane-back-btn:active{ background:rgba(255,255,255,0.08); }
.dm-pane-messages{
  flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; min-height:0;
}
.dm-bubble-row{ display:flex; align-items:center; gap:6px; max-width:80%; }
.dm-bubble-row.mine{ align-self:flex-end; flex-direction:row-reverse; }
.dm-bubble-row.theirs{ align-self:flex-start; }
.dm-bubble{
  padding:8px 12px; border-radius:14px; font-size:13.5px; line-height:1.4; word-break:break-word; color:#fff;
}
.dm-bubble-row.mine .dm-bubble{ background:#8b5cf6; border-bottom-right-radius:4px; }
.dm-bubble-row.theirs .dm-bubble{ background:#22252c; border:1px solid rgba(255,255,255,0.06); border-bottom-left-radius:4px; }
.dm-delete-btn{
  background:none; border:none; color:var(--text-3); cursor:pointer; font-size:14px;
  padding:2px 6px; border-radius:6px; flex-shrink:0;
}
.dm-delete-btn:hover{ color:#fff; background:rgba(255,255,255,0.08); }
@media (max-width: 720px){
  /* Outlook-style: list OR conversation, never both stacked. When a
     conversation is open it becomes a fixed full-screen overlay (not just a
     tall box in normal flow) so mobile browser chrome resizing / page scroll
     can never push the message input off-screen or get clipped. */
  .dm-pane{ flex-direction:column; height:calc(100vh - 190px); min-height:420px; position:relative; overflow:visible; border:none; }
  .dm-pane-list-wrap{ width:auto; border-right:none; max-height:none; flex:1; border-radius:12px; border:1px solid rgba(255,255,255,0.08); overflow-y:auto; }
  .dm-pane-conversation{ display:none; }
  .dm-pane.conversation-open .dm-pane-list-wrap{ display:none; }
  .dm-pane.conversation-open .dm-pane-conversation{
    display:flex; position:fixed; inset:0; z-index:400; background:#000;
    height:100dvh; height:100vh;
  }
  .dm-pane.conversation-open .dm-pane-open{ padding:calc(12px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); }
  .dm-pane-back-btn{ display:flex; }
}

@media (max-width: 1180px){
  .rightbar{ display:none; }
  .main.with-right{ margin-right:0; }
  .gen-right{ display:none; }
}
@media (max-width: 760px){
  .menu-toggle{ display:flex; }
  .side-collapse-btn{ display:none; }
  .top-actions{ display:none; }
  .topbar-title{ display:block; flex:1; min-width:0; }

  /* Search collapses to a single icon; tapping it opens a full-width popup */
  .search-icon-btn{
    display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0;
    background:none; border:none; border-radius:9px; color:var(--text); cursor:pointer;
  }
  .search-icon-btn:active{ background:rgba(255,255,255,0.08); }
  .search-icon-btn svg{ width:18px; height:18px; }
  .top-search{ display:none; max-width:none; }
  .top-search.mobile-open{
    display:flex; align-items:center; position:fixed; top:0; left:0; right:0; z-index:500;
    background:#000; padding:calc(10px + env(safe-area-inset-top)) 14px 10px; box-shadow:0 1px 0 rgba(255,255,255,0.06);
  }
  .top-search.mobile-open svg{ position:static; opacity:0.4; width:16px; height:16px; flex-shrink:0; transform:none; margin-right:8px; }
  .top-search.mobile-open input{ flex:1; min-width:0; }
  .search-close-btn{
    display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; margin-left:6px;
    background:none; border:none; border-radius:8px; color:var(--text-2); cursor:pointer;
  }
  .search-close-btn:active{ background:rgba(255,255,255,0.08); }
  .search-close-btn svg{ width:16px; height:16px; }
  .top-search.mobile-open .search-suggest{ left:14px; right:14px; }
  .side{
    position:fixed; z-index:300; transform:translateX(-100%); transition:transform .22s cubic-bezier(.2,.8,.2,1);
    top:0; left:0; width:min(300px, 84vw); box-shadow:2px 0 24px rgba(0,0,0,0.5);
  }
  .side.open{ transform:translateX(0); }
  .side.collapsed{ width:min(300px, 84vw); opacity:1; pointer-events:auto; } /* desktop-collapsed state is irrelevant on phone */
  .main{ padding:14px 14px calc(var(--player-h) + 14px); }

  /* ---- Rows (library, my tracks, playlists, collab, prompts, etc.) ---- */
  /* On phone these become card-like, matching the homepage track cards:
     full-width square cover, fav + playlist overlaid on the cover, no genre
     line, and the market button (Buy Now / Manage) centered below the cover. */
  .simple-row{
    flex-direction:column; align-items:stretch; flex-wrap:nowrap; row-gap:0;
    padding:10px; margin-bottom:10px; background:rgba(255,255,255,0.03); border-radius:14px;
  }
  .simple-row-rank{ width:auto; text-align:left; margin-bottom:6px; order:0; }
  .simple-row-thumb-wrap{
    order:1; position:relative; width:100%; height:auto; aspect-ratio:1;
    border-radius:12px; overflow:hidden; margin-bottom:9px;
  }
  .simple-row-thumb-wrap img{ width:100%; height:100%; border-radius:0; }
  .simple-row-play{ opacity:1; }
  .simple-row-cover-actions{
    display:flex; gap:4px; position:absolute; left:6px; right:6px; bottom:6px; z-index:2;
  }
  .simple-row-cover-actions .btn{
    flex-shrink:1; min-width:0; padding:4px 8px; font-size:10.5px;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(3px); border-color:transparent; color:#fff;
  }
  .simple-row-cover-actions .fav-toggle-btn{ flex:0 0 auto; }
  .simple-row-cover-actions [data-add-playlist]{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; }
  .simple-row .grow{ order:2; flex-basis:auto; text-align:center; }
  .simple-row .n, .simple-row .m{ white-space:normal; }
  .simple-row .n{ font-size:14.5px; }
  .simple-row-desktop-actions{ display:none; }
  .simple-row-mobile-market{ order:3; display:flex; justify-content:center; margin-top:10px; }

  /* Message threads are a plain text list, not a track card \u2014 undo the
     card layout above for them specifically. */
  .dm-thread-row{
    flex-direction:row; align-items:center; padding:9px 10px; margin-bottom:2px;
    background:none; border-radius:10px;
  }
  .dm-thread-row .grow{ order:0; text-align:left; flex-basis:auto; min-width:0; }
  .dm-thread-row .n, .dm-thread-row .m{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dm-thread-row .n{ font-size:13.5px; }

  /* ---- Generator / Studio ---- */
  .gen-layout{ flex-direction:column; }
  .gen-main{ padding-right:0; }
  .gen-submit-row{ flex-wrap:wrap; }
  .gen-submit-btn{ width:100%; min-width:0; max-width:none; }

  /* ---- Track hero ---- */
  .track-hero-info{ padding:20px 18px; }
  .track-hero-title{ font-size:24px; }
  .track-hero .cover-seek-row{ left:18px; right:18px; }

  /* ---- Artist / album page headers ---- */
  .artist-page-head{ flex-wrap:wrap; }
  .artist-page-actions{ position:static; flex-wrap:wrap; margin-top:10px; }

  /* ---- Card grids: tighten so small screens fit 2 columns cleanly ---- */
  .card-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px; }

  /* ---- Section headers: keep title + link from colliding ---- */
  .section-head{ flex-wrap:wrap; gap:8px; }

  /* ---- Studio edit / album price rows ---- */
  .studio-edit-panel{ flex-direction:column; align-items:stretch !important; }
  .studio-edit-panel input{ width:100% !important; }
  .album-price-row{ flex-direction:column; align-items:stretch; }
  .studio-earnings{ flex-wrap:wrap; gap:10px; }
  .field-grid4{ grid-template-columns:1fr; }

  /* ---- Sticky player: stack instead of overflowing off-screen ---- */
  :root{ --player-h:126px; }
  .player{
    flex-wrap:wrap; align-items:center; padding:10px 12px; gap:6px 12px; height:auto;
  }
  .player-track{ width:auto; flex:1 1 auto; min-width:0; order:1; }
  .player-heart{ order:2; }
  .player-mid{ order:3; flex:1 1 100%; max-width:none; gap:6px; }
  .player-btns{ gap:26px; }
  .player-right{ order:4; width:auto; flex:1 1 100%; justify-content:center; }
}
@media (max-width: 420px){
  .player-track .m{ display:none; }
  .player-art{ width:38px; height:38px; }
  .card-grid{ grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); gap:10px; }
  .track-card-actions{ gap:3px; }
  .track-card-actions .btn{ padding:3px 6px; font-size:9.5px; gap:2px; }

  /* ---- Artist cover buttons: shrink so edit + save never collide on narrow phones ---- */
  .artist-page-cover-edit, .artist-page-cover-save{ padding:5px 9px; font-size:11.5px; }
}

/* ---------- Album track picker (Create an Album view) ---------- */
/* ---------- Styled file picker (replaces bare browser <input type=file>) ---------- */
.file-picker{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.file-picker-input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.file-picker-btn{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  padding:9px 16px; border-radius:999px; background:#0a0a0a; color:var(--text);
  border:1px solid rgba(255,255,255,0.14); cursor:pointer; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
  font-family:var(--font);
}
.file-picker-btn svg{ width:15px; height:15px; flex-shrink:0; opacity:0.85; }
.file-picker-btn:hover{ background:#ffffff; color:#000; border-color:#ffffff; }
.file-picker-btn:hover svg{ opacity:1; }
.file-picker-btn:active{ transform:scale(0.97); }
.file-picker-input:focus-visible + .file-picker-btn{ outline:2px solid #ffffff; outline-offset:2px; }
.file-picker-name{ font-size:12.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; max-width:220px; white-space:nowrap; }
.album-cover-preview{ margin-top:10px; }
.album-cover-preview img{ width:72px; height:72px; border-radius:10px; object-fit:cover; background:#0a0a0a; }

/* ---------- Album price field ---------- */
.album-price-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.album-price-toggle{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2); cursor:pointer; user-select:none; }
.album-price-toggle input{ accent-color:#ffffff; width:15px; height:15px; cursor:pointer; }
.album-price-input-wrap{
  display:flex; align-items:center; gap:6px; background:#0a0a0a; border-radius:10px;
  padding:9px 12px; font-size:13.5px; color:var(--text-3); transition:opacity .15s ease;
}
.album-price-input-wrap input{
  background:none; border:none; color:var(--text); font-size:13.5px; font-family:var(--font);
  width:80px; padding:0;
}
.album-price-input-wrap input:focus{ outline:none; }
.album-price-input-wrap.disabled{ opacity:0.4; pointer-events:none; }
.album-price-tag{ font-size:12px; font-weight:700; color:var(--text); }
.album-price-tag.free{ color:var(--text-3); font-weight:600; }

/* ---------- Lazy-load (infinite scroll) ---------- */
.pager{ display:flex; align-items:center; justify-content:center; margin-top:22px; }
.lazy-load-sentinel{ display:flex; align-items:center; justify-content:center; padding:14px 0; width:100%; }
.lazy-load-spinner{
  width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.15); border-top-color:var(--text-2);
  animation:lazy-load-spin .7s linear infinite;
}
@keyframes lazy-load-spin{ to{ transform:rotate(360deg); } }

.album-track-picker{
  display:flex; flex-direction:column; gap:2px; max-width:420px;
  max-height:260px; overflow-y:auto; margin-top:8px;
  border:1px solid var(--border, rgba(255,255,255,0.08)); border-radius:10px; padding:6px;
}
.album-track-pick-row{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px;
  font-size:13.5px; cursor:pointer;
}
.album-track-pick-row:hover{ background:rgba(255,255,255,0.04); }
.album-track-pick-row input{ cursor:pointer; }

/* ---------- Artist posts (Twitter-like feed) ---------- */
.artist-post{
  border-radius:0; background:#000; border:none;
  padding:18px 0; margin-bottom:0;
}
.artist-posts-col #artist-page-posts .artist-post:last-child{ border-bottom:none; }
.artist-post .artist-post-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.artist-post .artist-post-meta{ font-size:13px; color:var(--text-3); }
.artist-post .artist-post-content{ font-size:16px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.mention-link{ color:#fff; text-decoration:none; font-weight:600; }
.mention-link:hover{ text-decoration:underline; }
.artist-post-actions{ display:flex; gap:16px; margin-top:12px; }
.artist-post-actions button{ background:none; border:none; color:var(--text-3); font-size:14px; cursor:pointer; padding:5px 8px; border-radius:6px; }
.artist-post-actions button:hover{ color:var(--text); background:rgba(255,255,255,0.05); }
.artist-post-actions button.liked{ color:#fff; }
.artist-post-comments{ margin-top:8px; padding-top:8px; border-top:1px solid var(--border-soft); display:none; }
.artist-post-comments.open{ display:block; }
.artist-post-comment{ font-size:11.5px; margin-bottom:6px; }
.artist-post-comment b{ color:var(--text-2); }
.artist-post-comment-form{ display:flex; gap:6px; margin-top:6px; }
.artist-post-comment-form input{
  flex:1; background:#000; border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:7px 9px;
  color:var(--text); font-size:11.5px; font-family:var(--font);
}

.artist-page-bio{ font-size:13.5px; color:var(--text-2); line-height:1.5; margin:0 0 10px; max-width:520px; }

/* ---------- Need-help chat widget (standalone, no API — local FAQ) ---------- */
#vm-help-btn{
  position:fixed; bottom:20px; right:20px; z-index:9999;
  width:48px; height:48px; border-radius:50%;
  background:#ffffff; color:#000000; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
  transition:transform .15s ease;
}
#vm-help-btn:hover{ transform:scale(1.06); }
/* Hide the help bubble while any modal (profile edit, etc.) is open so it
   doesn't sit on top of Save buttons and other modal controls. */
body:has(.vy-modal-backdrop.open) #vm-help-btn,
body:has(.vy-modal-backdrop.open) #vm-help-panel{ display:none !important; }
body.has-modal-open #vm-help-btn,
body.has-modal-open #vm-help-panel{ display:none !important; }
#vm-help-panel{
  position:fixed; bottom:80px; right:20px; z-index:9999;
  width:340px; max-width:calc(100vw - 40px); height:440px;
  background:var(--bg-panel); border:none;
  border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.6);
  display:none; flex-direction:column; overflow:hidden;
  font-family:var(--font);
}
#vm-help-panel.open{ display:flex; }
#vm-help-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; flex-shrink:0;
}
#vm-help-head span{ font-size:13.5px; font-weight:500; color:var(--text); display:flex; align-items:center; gap:7px; }
#vm-help-close{ background:none; border:none; color:var(--text-3); cursor:pointer; padding:4px; line-height:0; }
#vm-help-close:hover{ color:var(--text); }
#vm-help-body{ flex:1; min-height:0; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
#vm-help-body .vm-hint{ font-size:12.5px; color:var(--text-3); line-height:1.5; }
#vm-help-body .vm-msg{ font-size:13px; line-height:1.5; white-space:pre-wrap; border-radius:8px; padding:8px 11px; max-width:85%; }
#vm-help-body .vm-msg.user{ background:#fff; color:#000; margin-left:auto; }
#vm-help-body .vm-msg.bot{ background:rgba(255,255,255,0.06); color:var(--text); }
#vm-help-foot{ display:flex; align-items:center; gap:8px; padding:10px; flex-shrink:0; }
#vm-help-input{
  flex:1; background:rgba(255,255,255,0.06); border:none;
  border-radius:8px; padding:8px 10px; font-size:13px; color:var(--text); outline:none; font-family:inherit;
}
#vm-help-input::placeholder{ color:var(--text-3); }
#vm-help-send{
  background:#fff; color:#000; border:none; border-radius:8px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
#vm-help-send:disabled{ opacity:.4; cursor:default; }
body.dm-conversation-open #vm-help-btn, body.dm-conversation-open #vm-help-panel{ display:none !important; }
body.player-visible #vm-help-btn{ bottom:calc(var(--player-h) + 16px); }
body.player-visible #vm-help-panel{ bottom:calc(var(--player-h) + 76px); }
@media (max-width:760px){
  #vm-help-btn{ bottom:20px; }
  #vm-help-panel{ bottom:80px; }
  body.player-visible #vm-help-btn{ bottom:calc(var(--player-h) + 16px); }
  body.player-visible #vm-help-panel{ bottom:calc(var(--player-h) + 76px); }
}

.artist-link{ color:inherit; text-decoration:none; cursor:pointer; }
.artist-link:hover{ color:var(--text); text-decoration:underline; }
.track-card-owner-avatar{
  position:relative; width:14px; height:14px; border-radius:50%; overflow:hidden; vertical-align:middle; margin-right:4px; margin-top:-2px;
  display:inline-flex; align-items:center; justify-content:center; background:var(--accent-grad); color:#fff; font-size:9px; font-weight:700;
}
.track-card-owner-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ---- Topbar notification bell + dropdown ---- */
.topbar-bell-wrap{ position:relative; flex-shrink:0; margin-left:12px; }
.topbar-bell-btn{
  position:relative; width:38px; height:38px; border-radius:10px; border:none;
  background:rgba(255,255,255,0.05); color:var(--text-2); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .12s ease, color .12s ease;
}
.topbar-bell-btn:hover{ background:rgba(255,255,255,0.09); color:var(--text); }
.topbar-bell-btn svg{ width:19px; height:19px; }
.topbar-bell-badge{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; font-size:10px;
  border:2px solid #000;
}
.notif-dropdown{
  position:absolute; top:calc(100% + 10px); right:0; width:340px; max-height:420px;
  background:#0a0a0a; border:1px solid rgba(255,255,255,0.1); border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,0.55); display:none; flex-direction:column; overflow:hidden; z-index:120;
}
.notif-dropdown.open{ display:flex; }
.notif-dropdown-head{
  display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0;
}
.notif-dropdown-head h3{ font-size:14.5px; margin:0; }
.notif-dropdown-head a{ font-size:12px; color:var(--text-3); }
.notif-dropdown-head a:hover{ color:var(--text); }
.notif-dropdown-list{ overflow-y:auto; padding:6px; }
.notif-row{
  display:flex; align-items:flex-start; gap:10px; padding:10px 10px; border-radius:10px; cursor:default;
}
.notif-row:hover{ background:rgba(255,255,255,0.05); }
.notif-row-dot{
  width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; background:transparent;
}
.notif-row.unread .notif-row-dot{ background:#e5484d; }
.notif-row.unread{ background:rgba(229,72,77,0.06); }
.notif-row.unread .notif-row-title{ font-weight:700; color:var(--text); }
.notif-row-body{ flex:1; min-width:0; }
.notif-row-title{ font-size:13px; font-weight:600; color:var(--text-2); }
.notif-row-sub{ font-size:12px; color:var(--text-3); margin-top:2px; }
.notif-row-time{ font-size:10.5px; color:var(--text-3); margin-top:4px; }
.notif-row-delete{
  background:none; border:none; color:var(--text-3); cursor:pointer; font-size:15px; flex-shrink:0; padding:2px 4px; border-radius:6px;
}
.notif-row-delete:hover{ color:#fff; background:rgba(255,255,255,0.08); }
.notif-dropdown-empty{ padding:26px 16px; text-align:center; color:var(--text-3); font-size:13px; }
@media (max-width:760px){
  .notif-dropdown{ position:fixed; top:64px; right:10px; left:10px; width:auto; }
}