:root{
  --bg: #0a0a0c;
  --surface: #141417;
  --surface-2: #1a1a1e;
  --border: #29292e;
  --text: #f3f3f4;
  --text-dim: #a3a3ab;
  --text-faint: #6f6f78;
  --accent: #f7a12e;
  --accent-hover: #ffb54c;
  --accent-soft: rgba(247, 161, 46, 0.14);
  --success: #3ecf8e;
  --danger: #ef4444;
  --radius: 10px;
  --radius-lg: 16px;
  --nav-h: 72px;
  --player-h: 84px;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a{ text-decoration: none; color: inherit; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select{ font-family: inherit; }
ul{ list-style: none; }
svg{ width: 16px; height: 16px; stroke-width: 2px; flex-shrink: 0; }

/* ============ NAVBAR ============ */
.navbar{
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(10,10,12,0.92);
  backdrop-filter: blur(10px);
  z-index: 100;
}
.navbar-left{ display: flex; align-items: center; gap: 32px; flex-shrink: 0; }
.logo{ display: flex; align-items: center; gap: 10px; }
.logo-mark{
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #2ecc71, #16a596);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.logo-mark svg{ width: 20px; height: 20px; }
.logo-word{ font-weight: 800; font-size: 1.15rem; letter-spacing: 0.03em; }
.navbar-links{ display: flex; gap: 22px; }
.nav-link{ font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text-dim); }
.nav-link:hover{ color: var(--text); }

.navbar-search{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 16px;
  height: 42px;
  max-width: 480px;
  color: var(--text-faint);
}
.navbar-search input{
  flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 0.9rem;
}
.navbar-search input::placeholder{ color: var(--text-faint); }

.navbar-right{ display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 0.85rem; border-radius: var(--radius); padding: 10px 18px;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: var(--accent); color: #1a1200; }
.btn-primary:hover{ background: var(--accent-hover); }
.btn-pill{ border-radius: 999px; }
.btn-lg{ padding: 13px 24px; font-size: 0.9rem; }
.btn-ghost{ background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover{ border-color: var(--text-faint); }
.btn-outline{ background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.btn-outline:hover{ background: var(--accent-soft); }
.btn-block{ width: 100%; }

.icon-btn{
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); position: relative; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover{ background: var(--surface-2); color: var(--text); }
.badge{
  position: absolute; top: 2px; right: 2px; background: var(--danger); color: #fff;
  font-size: 0.6rem; font-weight: 700; width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg);
}

.profile-chip{
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px 5px 5px;
}
.profile-chip:hover{ border-color: var(--text-faint); }
.avatar-sm{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.avatar-lg{ width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; border: 2px solid var(--border); }
.profile-chip-text{ display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.profile-chip-text strong{ font-size: 0.82rem; }
.profile-chip-text small{ font-size: 0.7rem; color: var(--accent); display: flex; align-items: center; gap: 3px; }
.profile-chip-text small svg{ width: 11px; height: 11px; }
.chip-chevron{ color: var(--text-faint); }

/* ============ SHELL LAYOUT ============ */
.app-shell{
  display: grid;
  grid-template-columns: 232px 1fr 280px;
  gap: 24px;
  padding: 24px;
  padding-bottom: calc(var(--player-h) + 24px);
  max-width: 1680px;
  margin: 0 auto;
}

/* ============ LEFT SIDEBAR ============ */
.sidebar-left{ display: flex; flex-direction: column; gap: 26px; position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
.nav-group-label{
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); padding: 0 12px 8px;
}
.nav-item{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius);
  font-size: 0.87rem; font-weight: 500; color: var(--text-dim);
  border-left: 3px solid transparent; margin-bottom: 2px;
}
.nav-item:hover{ background: var(--surface); color: var(--text); }
.nav-item.active{
  background: var(--accent-soft); color: var(--accent); border-left-color: var(--accent); font-weight: 700;
}
.nav-item svg{ color: inherit; }

.premium-card{
  background: linear-gradient(160deg, #5b2a86 0%, #c1467a 55%, #f7a12e 100%);
  border-radius: var(--radius-lg); padding: 18px; margin-top: 4px;
}
.premium-card h4{ font-size: 1rem; font-weight: 800; margin-bottom: 12px; }
.premium-card ul{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.premium-card li{ display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 500; }
.premium-card li svg{ width: 14px; height: 14px; flex-shrink: 0; }
.premium-card .btn-primary{ background: #fff; color: #1a1200; }
.premium-card .btn-primary:hover{ background: #f3f3f4; }

/* ============ MAIN CONTENT ============ */
.main-content{ min-width: 0; }

.hero{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(100deg, rgba(10,8,6,0.92) 20%, rgba(40,25,10,0.55) 60%, rgba(60,35,15,0.3) 100%),
    radial-gradient(circle at 75% 30%, #3a2410 0%, #150e08 55%, #08080a 100%);
  padding: 40px 48px;
}
.hero-content{ max-width: 560px; position: relative; z-index: 1; }
.hero-eyebrow{ color: var(--accent); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.hero-title{
  font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 3.2rem; line-height: 0.95; letter-spacing: 0.01em; margin-bottom: 16px;
}
.hero-subtitle{ color: var(--text-dim); font-size: 0.98rem; line-height: 1.5; margin-bottom: 24px; max-width: 420px; }
.hero-subtitle span{ color: var(--accent); font-weight: 600; }
.hero-actions{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-meta{
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  padding: 11px 18px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}

.filter-row{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 22px 0; flex-wrap: wrap;
}
.chip-group{ display: flex; gap: 8px; flex-wrap: wrap; }
.chip{
  padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  font-size: 0.82rem; font-weight: 600; color: var(--text-dim);
}
.chip:hover{ color: var(--text); border-color: var(--text-faint); }
.chip.active{ background: var(--accent); color: #1a1200; border-color: var(--accent); }
.chip-more{ padding: 9px 14px; }

.view-controls{ display: flex; align-items: center; gap: 10px; }
.view-toggle{ display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 3px; }
.view-btn{ display: flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 7px; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); }
.view-btn.active{ background: var(--accent-soft); color: var(--accent); }

.section-header{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.section-header h2{
  font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.7rem; display: inline; margin-right: 12px;
}
.section-count{ color: var(--text-faint); font-size: 0.85rem; }
.sort-control{ display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-dim); }
.sort-control select{
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 8px 12px; border-radius: var(--radius); font-size: 0.82rem; font-weight: 600;
}

.album-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
}
.album-card{ cursor: pointer; }
.album-cover{
  aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; position: relative;
  margin-bottom: 10px; background: var(--surface-2);
  display: flex; align-items: flex-end; padding: 14px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.album-card:hover .album-cover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.5); }
.album-cover-img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.album-cover-label{
  font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 1.15rem; line-height: 1;
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6); position: relative; z-index: 1;
}
.album-cover .play-overlay{
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #1a1200; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.8); transition: opacity 0.15s, transform 0.15s;
}
.album-card:hover .play-overlay{ opacity: 1; transform: scale(1); }
.album-title{ font-weight: 700; font-size: 0.86rem; text-transform: uppercase; margin-bottom: 3px; }
.album-artist{ font-size: 0.78rem; color: var(--text-dim); margin-bottom: 2px; }
.album-tracks{ font-size: 0.7rem; color: var(--text-faint); letter-spacing: 0.03em; }

/* ============ RIGHT SIDEBAR ============ */
.sidebar-right{ display: flex; flex-direction: column; gap: 16px; }
.profile-card, .side-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px;
}
.profile-card{ text-align: center; }
.profile-card h3{ font-size: 1rem; margin-bottom: 4px; }
.premium-badge{ display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 0.78rem; font-weight: 700; margin-bottom: 4px; }
.premium-badge svg{ width: 13px; height: 13px; }
.member-since{ color: var(--text-faint); font-size: 0.75rem; }

.stats-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.stat-card svg{ color: var(--accent); }
.stat-card strong{ font-size: 1.25rem; font-weight: 800; }
.stat-card span{ font-size: 0.72rem; color: var(--text-faint); }

.side-card h4{ font-size: 0.92rem; margin-bottom: 6px; }
.side-card p{ font-size: 0.78rem; color: var(--text-dim); margin-bottom: 12px; line-height: 1.4; }
.social-row{ display: flex; gap: 8px; }
.social-btn{
  width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff;
}
.social-btn.instagram{ background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); }
.social-btn.youtube{ background: #ff0000; }
.social-btn.tiktok{ background: #111; border: 1px solid var(--border); }
.social-btn.facebook{ background: #1877f2; }
.social-btn.twitter{ background: #000; border: 1px solid var(--border); }

.status-line{ display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: 0.82rem; margin-bottom: 4px; }
.status-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(62,207,142,0.18); }
.status-updated{ font-size: 0.72rem; color: var(--text-faint); margin-bottom: 8px; }
.status-link{ display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--accent); font-weight: 600; }
.status-link svg{ width: 12px; height: 12px; }

.quick-links a{
  display: flex; align-items: center; justify-content: space-between; padding: 9px 0;
  font-size: 0.83rem; font-weight: 600; border-top: 1px solid var(--border);
}
.quick-links a:first-of-type{ border-top: none; }
.quick-links a svg:last-child{ color: var(--text-faint); width: 14px; height: 14px; }
.quick-links a svg:first-child{ color: var(--text-dim); }

/* ============ MINI PLAYER ============ */
.mini-player{
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--player-h);
  background: rgba(15,15,17,0.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 280px 1fr 220px;
  align-items: center; padding: 0 24px; gap: 20px; z-index: 100;
}
.mp-track{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.mp-cover{
  width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg,#f7a12e,#c1467a); display: flex; align-items: center; justify-content: center;
  font-family: 'Anton', sans-serif; font-size: 0.8rem; color: #1a1200;
}
.mp-info{ display: flex; flex-direction: column; min-width: 0; }
.mp-info strong{ font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-info span{ font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-fav{ color: var(--accent); }

.mp-center{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mp-controls{ display: flex; align-items: center; gap: 6px; }
.play-toggle{
  width: 42px; height: 42px; background: var(--accent); color: #1a1200; border-radius: 50%;
}
.play-toggle:hover{ background: var(--accent-hover); }
.mp-progress{ display: flex; align-items: center; gap: 10px; width: 100%; max-width: 440px; }
.mp-time{ font-size: 0.7rem; color: var(--text-faint); width: 32px; flex-shrink: 0; }
.mp-time:last-child{ text-align: right; }
.mp-bar{ flex: 1; height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; cursor: pointer; }
.mp-bar-fill{ height: 100%; background: var(--accent); width: 36%; border-radius: 999px; }

.mp-right{ display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1180px){
  .app-shell{ grid-template-columns: 210px 1fr; }
  .sidebar-right{ display: none; }
}
@media (max-width: 860px){
  .app-shell{ grid-template-columns: 1fr; padding: 16px; }
  .sidebar-left{ position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .nav-group{ display: none; }
  .premium-card{ display: none; }
  .navbar{ padding: 0 16px; gap: 12px; }
  .navbar-search{ display: none; }
  .hero-title{ font-size: 2.2rem; }
  .mini-player{ grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; padding: 10px 16px; gap: 8px; }
  .mp-right{ display: none; }
}


/* Standalone list-mode behavior */
.album-grid.list-mode{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.album-grid.list-mode .album-card{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  grid-template-rows:auto auto auto;
  column-gap:14px;
  align-items:center;
  padding:8px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
}
.album-grid.list-mode .album-cover{
  grid-row:1 / 4;
  width:88px;
  aspect-ratio:1;
}
.album-grid.list-mode .album-title,
.album-grid.list-mode .album-artist,
.album-grid.list-mode .album-tracks{
  margin-left:0;
  margin-right:0;
}

.volume-slider{width:86px;accent-color:var(--orange)}
.icon-btn.active{color:var(--orange);background:rgba(245,166,35,.10)}
.light-theme{filter:invert(.92) hue-rotate(180deg)}
.light-theme img{filter:invert(1) hue-rotate(180deg)}


/* ===========================
   Standalone V3 Music Manager
   =========================== */
.manager-backdrop{
  position:fixed;inset:0;z-index:1190;background:rgba(0,0,0,.62);backdrop-filter:blur(5px);
}
.music-manager{
  position:fixed;top:0;right:0;bottom:0;z-index:1200;
  width:min(540px,100vw);padding:18px;overflow-y:auto;
  background:#0d0d0f;border-left:1px solid var(--border);
  box-shadow:-28px 0 80px rgba(0,0,0,.45);
  transform:translateX(105%);transition:transform .22s ease;
}
.music-manager.open{transform:translateX(0)}
.manager-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--border)}
.manager-head h2{margin:3px 0 0;font:28px Anton,sans-serif;text-transform:uppercase;letter-spacing:.02em}
.manager-kicker{color:var(--orange);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.manager-status{
  display:flex;align-items:center;gap:8px;margin:14px 0;padding:10px 12px;
  border:1px solid var(--border);border-radius:9px;background:#141416;color:#bbb;font-size:10px;
}
.manager-status .status-dot{width:8px;height:8px;border-radius:50%;background:#f5a623;box-shadow:0 0 10px rgba(245,166,35,.5)}
.manager-status.live .status-dot{background:#4dd78b;box-shadow:0 0 10px rgba(77,215,139,.5)}
.manager-section{
  margin-top:12px;padding:15px;border:1px solid var(--border);border-radius:11px;background:#141416;
}
.manager-section-head{display:flex;align-items:start;justify-content:space-between;gap:10px;margin-bottom:12px}
.manager-section h3{margin:0;font-size:14px}
.manager-section p{margin:4px 0 0;color:#8f8f95;font-size:9px;line-height:1.5}
.manager-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.manager-grid label{display:grid;gap:6px;color:#aaa;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.manager-grid .manager-full{grid-column:1/-1}
.manager-grid input,.manager-grid select{
  width:100%;min-height:40px;border:1px solid var(--border);border-radius:8px;
  background:#0f0f11;color:#eee;padding:8px 10px;outline:none;font:11px Inter,sans-serif;
}
.manager-grid input:focus,.manager-grid select:focus{border-color:var(--orange)}
.file-field input{padding:7px}
.manager-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.manager-inline-status{color:#999;font-size:9px;line-height:1.4}
.manager-inline-status.ok{color:#4dd78b}.manager-inline-status.error{color:#ff6969}
.upload-progress{margin-top:12px}
.upload-progress-head{display:flex;justify-content:space-between;gap:8px;color:#aaa;font-size:9px}
.upload-progress-track{height:7px;margin-top:7px;border-radius:99px;background:#27272b;overflow:hidden}
.upload-progress-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#f5a623,#f7931e);transition:width .18s ease}
.diagnostic-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.diagnostic-grid div{padding:10px;border:1px solid var(--border);border-radius:8px;background:#101012}
.diagnostic-grid span{display:block;color:#777;font-size:8px;text-transform:uppercase}
.diagnostic-grid strong{display:block;margin-top:4px;font-size:10px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){
  .music-manager{width:100vw}
  .manager-grid,.diagnostic-grid{grid-template-columns:1fr}
}


/* V3.2 exact preview mini-player mapping */
.mp-cover{
  overflow:hidden;
}
.mp-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}
.mp-cover img[hidden]{
  display:none;
}


/* V3.4 Music Manager */
.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:0 12px;border:1px solid #8d2d2d;border-radius:8px;
  background:#5b1e1e;color:#fff;font-weight:800;cursor:pointer;
}
.btn-danger:hover{background:#742525}
.batch-queue{display:grid;gap:8px;margin-top:12px}
.batch-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px;border:1px solid var(--border);border-radius:8px;background:#101012;
}
.batch-item-main{min-width:0}
.batch-item-name{font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.batch-item-meta{margin-top:3px;color:#888;font-size:8px}
.batch-item-status{font-size:8px;color:#aaa}
.batch-item-status.ok{color:#4dd78b}
.batch-item-status.error{color:#ff7474}
.batch-bar{height:5px;margin-top:7px;border-radius:999px;background:#27272b;overflow:hidden}
.batch-bar span{display:block;width:0;height:100%;background:linear-gradient(90deg,#f5a623,#f7931e)}
.manager-confirm{
  position:fixed;inset:0;z-index:1400;display:grid;place-items:center;
  padding:20px;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);
}
.manager-confirm[hidden]{display:none!important}
.manager-confirm-card{
  width:min(420px,92vw);padding:18px;border:1px solid var(--border);border-radius:12px;
  background:#141416;box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.manager-confirm-card h3{margin:0 0 7px}
.manager-confirm-card p{margin:0;color:#aaa;font-size:10px;line-height:1.5}


/* =====================================
   V3.5 Public Media Browser
   ===================================== */
.public-view-host{position:relative;min-height:calc(100vh - 150px);margin-left:220px;margin-right:280px;padding:26px 24px 120px;background:#0a0a0a}
.public-view-host[hidden]{display:none!important}
.main-content[hidden]{display:none!important}
.public-view-toolbar{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.public-view-toolbar h1{margin:3px 0 5px;font:46px Anton,sans-serif;letter-spacing:.02em;text-transform:uppercase}
.public-view-kicker{color:var(--orange);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.public-view-toolbar p{margin:0;color:#929297;font-size:11px}
.public-view-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.view-back-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:#151518;color:#eee;cursor:pointer}
.view-back-btn[hidden]{display:none!important}

.public-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.public-card{min-width:0;border:1px solid transparent;border-radius:11px;padding:9px;background:transparent;cursor:pointer;transition:.16s ease}
.public-card:hover{transform:translateY(-3px);background:#141416;border-color:var(--border)}
.public-card-cover{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#17171a}
.public-card-cover img{width:100%;height:100%;object-fit:cover;display:block}
.public-card-play{position:absolute;right:9px;bottom:9px;width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#14100a;opacity:0;transform:translateY(5px);transition:.16s ease;cursor:pointer}
.public-card:hover .public-card-play{opacity:1;transform:none}
.public-card h3{margin:9px 0 3px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.public-card p{margin:0;color:#929297;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.public-card small{display:block;margin-top:4px;color:#707076;font-size:8px}

.artist-grid,.genre-grid,.stat-browser-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.artist-card,.genre-card,.browser-stat-card{padding:16px;border:1px solid var(--border);border-radius:11px;background:#141416;cursor:pointer}
.artist-card:hover,.genre-card:hover{border-color:#4a3a20;transform:translateY(-2px)}
.artist-avatar{width:74px;height:74px;border-radius:50%;overflow:hidden;background:#202024;margin-bottom:12px}
.artist-avatar img{width:100%;height:100%;object-fit:cover}
.artist-card h3,.genre-card h3,.browser-stat-card h3{margin:0 0 4px;font-size:13px}
.artist-card p,.genre-card p,.browser-stat-card p{margin:0;color:#8f8f95;font-size:9px}
.genre-card{min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,#18181b,#282017)}
.genre-card strong{font:26px Anton,sans-serif;text-transform:uppercase}
.genre-card span{color:#9b9b9f;font-size:9px}

.track-browser-list{display:grid;gap:7px}
.track-browser-row{display:grid;grid-template-columns:42px minmax(0,1fr) 140px 80px 42px;align-items:center;gap:10px;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:#111113;cursor:pointer}
.track-browser-row:hover{background:#17171a;border-color:var(--border)}
.track-browser-index{color:#777;font-size:9px;text-align:center}
.track-browser-main{min-width:0}
.track-browser-main strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-browser-main span,.track-browser-album,.track-browser-time{color:#85858a;font-size:8px}
.track-browser-fav{display:grid;place-items:center;width:34px;height:34px;border:0;background:none;color:#888;cursor:pointer}
.track-browser-fav.active{color:var(--orange)}

.empty-view{padding:44px;border:1px dashed #303034;border-radius:12px;text-align:center;color:#85858a}
.empty-view svg{margin:0 auto 10px}
.empty-view h3{margin:0 0 6px;color:#ddd}
.section-label{margin:0 0 10px;font-size:13px}

.album-detail-backdrop{position:fixed;inset:0;z-index:1280;background:rgba(0,0,0,.62);backdrop-filter:blur(5px)}
.album-detail-backdrop[hidden]{display:none!important}
.album-detail{position:fixed;top:0;right:0;bottom:0;z-index:1290;width:min(620px,100vw);background:#0d0d0f;border-left:1px solid var(--border);overflow-y:auto;transform:translateX(105%);transition:transform .22s ease}
.album-detail.open{transform:translateX(0)}
.album-detail-hero{position:relative;min-height:310px;overflow:hidden}
.album-detail-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(8px) brightness(.42);transform:scale(1.06)}
.album-detail-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),#0d0d0f 94%)}
.album-detail-close{position:absolute;top:14px;right:14px;z-index:3;background:rgba(0,0,0,.4)}
.album-detail-copy{position:absolute;left:24px;right:24px;bottom:22px;z-index:2}
.album-detail-kicker{color:var(--orange);font-size:8px;text-transform:uppercase;letter-spacing:.1em}
.album-detail-copy h2{margin:5px 0 4px;font:40px Anton,sans-serif;text-transform:uppercase}
.album-detail-copy p{margin:0;color:#c4c4c7}
.album-detail-meta{margin-top:8px;color:#8f8f95;font-size:9px}
.album-detail-actions{display:flex;gap:8px;margin-top:14px}
.album-detail-tracks{padding:18px 20px 90px}
.album-detail-track-head,.album-detail-track{display:grid;grid-template-columns:34px minmax(0,1fr) 60px 38px;align-items:center;gap:10px}
.album-detail-track-head{padding:0 8px 7px;color:#707076;font-size:8px;text-transform:uppercase}
.album-detail-track{min-height:48px;padding:6px 8px;border-top:1px solid #242428;cursor:pointer;border-radius:6px}
.album-detail-track:hover{background:#151518}
.album-detail-track strong{font-size:10px}
.album-detail-track small{display:block;margin-top:2px;color:#7f7f84;font-size:8px}
.album-detail-track button{border:0;background:none;color:#8d8d92;cursor:pointer}

.search-results-popover{position:fixed;z-index:1350;top:64px;left:50%;transform:translateX(-50%);width:min(700px,calc(100vw - 24px));max-height:70vh;overflow:auto;border:1px solid var(--border);border-radius:12px;background:#111113;box-shadow:0 28px 90px rgba(0,0,0,.55);padding:10px}
.search-results-popover[hidden]{display:none!important}
.search-results-head{display:flex;align-items:center;justify-content:space-between;padding:4px 5px 9px;border-bottom:1px solid var(--border)}
.search-result-section{padding:10px 4px}
.search-result-section h4{margin:0 0 8px;color:#888;font-size:8px;text-transform:uppercase;letter-spacing:.1em}
.search-result-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px;border-radius:8px;cursor:pointer}
.search-result-item:hover{background:#1a1a1d}
.search-result-item img{width:42px;height:42px;border-radius:6px;object-fit:cover;background:#222}
.search-result-item strong{display:block;font-size:9px}
.search-result-item span{display:block;margin-top:2px;color:#818186;font-size:8px}

@media(max-width:1300px){
  .public-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .artist-grid,.genre-grid,.stat-browser-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1000px){
  .public-view-host{margin-right:0}
  .public-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:767px){
  .public-view-host{margin:0;padding:18px 12px 100px}
  .public-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .artist-grid,.genre-grid,.stat-browser-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .track-browser-row{grid-template-columns:32px minmax(0,1fr) 42px}
  .track-browser-album,.track-browser-time{display:none}
  .public-view-toolbar h1{font-size:36px}
}