/* GENERATED by scripts/build.mjs - edit the source files in css/, then run: npm run build:assets */

/* ===== css/styles.css ===== */
: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(100dvh - 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:70dvh;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}
}

/* SYNTHIQ global scrollbar chrome: scrolling remains enabled. */
html,body,*{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb,*::-webkit-scrollbar-thumb{background:transparent!important;border:0!important}


/* ===== css/phase1a-runtime-bundle.css ===== */
/* SYNTHIQ Architecture Phase 1A compatibility CSS bundle.
   Preserve the validated runtime injection timing while consolidating
   the stylesheet entry point. Import order exactly matches config.js. */

/* >>> css/v3.5.3-rc.css */
/* SYNTHIQ Media Browser V3.5.3 release-candidate hardening.
   Testing branch only. Additive overrides; verified V3.5.x base styles remain untouched. */

/* Public/testing builds must not expose administrator entry points. */
.synthiq-testing-public #openManagerBtn,
.synthiq-testing-public .music-manager,
.synthiq-testing-public .manager-backdrop,
.synthiq-testing-public .manager-confirm{display:none!important}

/* Home album artwork uses the same full square framing as public views. */
.synthiq-testing-public .album-cover>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;z-index:0}
.synthiq-testing-public .album-cover .album-play,.synthiq-testing-public .album-cover .play-overlay{position:absolute;z-index:2}

/* Dark theme: lifted charcoal hierarchy. */
.synthiq-testing-public{--bg:#15181d;--surface:#1d2127;--surface-2:#262b33;--border:#3b414b;--text:#f5f6f7;--text-dim:#bcc1c8;--text-faint:#8d949e;background:#15181d}
.synthiq-testing-public .navbar{background:rgba(21,24,29,.96);border-bottom-color:#363b44}
.synthiq-testing-public .app-shell{background:linear-gradient(180deg,#191d23 0%,#15181d 100%)}
.synthiq-testing-public .sidebar-left{background:rgba(28,32,38,.72);border-radius:14px;padding:14px 10px}
.synthiq-testing-public .main-content,.synthiq-testing-public .public-view-host{background:#181c21}
.synthiq-testing-public .profile-card,.synthiq-testing-public .side-card,.synthiq-testing-public .stat-card{background:#20252c;border-color:#3a4049}
.synthiq-testing-public .track-browser-row,.synthiq-testing-public .artist-card,.synthiq-testing-public .genre-card,.synthiq-testing-public .browser-stat-card{background:#1e2329}
.synthiq-testing-public .mini-player{background:rgba(25,29,35,.98);border-top-color:#3a4049}

/* Explicit light palette instead of legacy whole-page inversion. */
.synthiq-testing-public.light-theme{filter:none!important;--bg:#eef0f3;--surface:#fff;--surface-2:#e5e8ec;--border:#cfd4da;--text:#17191d;--text-dim:#5e646d;--text-faint:#858c96;background:#eef0f3;color:#17191d}
.synthiq-testing-public.light-theme img{filter:none!important}
.synthiq-testing-public.light-theme .navbar{background:rgba(247,248,250,.97);border-bottom-color:#d8dde3}
.synthiq-testing-public.light-theme .app-shell{background:linear-gradient(180deg,#e7eaee 0%,#eef0f3 100%)}
.synthiq-testing-public.light-theme .sidebar-left{background:#e3e6ea;border:1px solid #d0d5db;border-radius:14px;padding:14px 10px}
.synthiq-testing-public.light-theme .sidebar-left .nav-item{color:#515761}
.synthiq-testing-public.light-theme .sidebar-left .nav-item:hover{background:#f7f8f9;color:#17191d}
.synthiq-testing-public.light-theme .sidebar-left .nav-item.active{background:#fff1dc;color:#a85c00;border-left-color:#c97500}
.synthiq-testing-public.light-theme .main-content,.synthiq-testing-public.light-theme .public-view-host{background:#f4f5f7}
.synthiq-testing-public.light-theme .profile-card,.synthiq-testing-public.light-theme .side-card,.synthiq-testing-public.light-theme .stat-card{background:#f9fafb;border-color:#d3d8de}
.synthiq-testing-public.light-theme .mini-player{background:rgba(248,249,250,.98);border-top-color:#d1d6dc}
.synthiq-testing-public.light-theme .navbar-search,.synthiq-testing-public.light-theme .profile-chip,.synthiq-testing-public.light-theme .btn-ghost,.synthiq-testing-public.light-theme .view-toggle,.synthiq-testing-public.light-theme .chip{background:#fff;border-color:#d4d9df;color:#4f5660}
.synthiq-testing-public.light-theme .album-title,.synthiq-testing-public.light-theme .section-header h2,.synthiq-testing-public.light-theme .public-card h3,.synthiq-testing-public.light-theme .artist-card h3,.synthiq-testing-public.light-theme .genre-card h3,.synthiq-testing-public.light-theme .browser-stat-card h3{color:#17191d}
.synthiq-testing-public.light-theme .track-browser-row{background:#fff;border-color:#e0e4e8}
.synthiq-testing-public.light-theme .track-browser-row:hover{background:#f6f7f9;border-color:#cfd4da}

/* Hero keeps its dark artwork/gradient in both themes, so its content must use
   dedicated high-contrast colors instead of inheriting light-theme page text. */
.synthiq-testing-public.light-theme .hero{color:#fff}
.synthiq-testing-public.light-theme .hero .hero-title{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.synthiq-testing-public.light-theme .hero .hero-subtitle{color:#d9dce1}
.synthiq-testing-public.light-theme .hero .hero-eyebrow{color:#ffad32}
.synthiq-testing-public.light-theme .hero .hero-subtitle strong,.synthiq-testing-public.light-theme .hero .accent-text{color:#ffad32}
.synthiq-testing-public.light-theme .hero .btn-ghost,.synthiq-testing-public.light-theme .hero .hero-stats,.synthiq-testing-public.light-theme .hero .hero-count{background:rgba(20,16,12,.62);border-color:rgba(255,255,255,.28);color:#fff}

/* Strong keyboard focus. */
.synthiq-testing-public button:focus-visible,.synthiq-testing-public a:focus-visible,.synthiq-testing-public [tabindex="0"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Critical navigation controls need reliable contrast in both themes. */
.synthiq-testing-public .view-back-btn,.synthiq-testing-public .album-detail-close{border:1px solid rgba(255,255,255,.32);background:rgba(12,12,14,.88);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.32);backdrop-filter:blur(8px)}
.synthiq-testing-public .view-back-btn:hover,.synthiq-testing-public .album-detail-close:hover{border-color:var(--accent);background:#242126;color:var(--accent-hover)}
.synthiq-testing-public .view-back-btn svg,.synthiq-testing-public .album-detail-close svg{stroke:currentColor}
.synthiq-testing-public.light-theme .view-back-btn,.synthiq-testing-public.light-theme .album-detail-close{border-color:rgba(0,0,0,.32);background:rgba(255,255,255,.94);color:#111;box-shadow:0 2px 12px rgba(0,0,0,.16)}
.synthiq-testing-public.light-theme .view-back-btn:hover,.synthiq-testing-public.light-theme .album-detail-close:hover{border-color:#8a4b00;background:#fff;color:#6b3900}

@media(max-width:860px){
 :root{--player-h:132px}.app-shell{grid-template-columns:1fr;padding:12px;gap:12px}.sidebar-left{position:static;top:auto;display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 0 6px}.sidebar-left::-webkit-scrollbar{display:none}.sidebar-left .nav-group{display:flex;flex:0 0 auto;gap:6px}.sidebar-left .nav-group-label{display:none}.sidebar-left .nav-item{flex:0 0 auto;margin:0;padding:9px 11px;border:1px solid var(--border);border-left:1px solid var(--border);border-radius:999px;background:var(--surface);white-space:nowrap}.sidebar-left .nav-item.active{border-color:var(--accent);background:var(--accent-soft)}.sidebar-left .premium-card{display:none}.synthiq-testing-public.light-theme .sidebar-left{background:transparent;border:0;padding:2px 0 6px}.public-view-host{margin-left:0;margin-right:0;padding-bottom:calc(var(--player-h) + 18px)}.public-view-toolbar{align-items:flex-start;flex-wrap:wrap}.public-view-actions{width:100%;margin-left:50px;flex-wrap:wrap}.mini-player{min-height:var(--player-h);padding:10px 12px max(10px,env(safe-area-inset-bottom))}.mp-track,.mp-center{min-width:0}.mp-progress{max-width:none}
}
@media(max-width:700px){.navbar{min-height:60px;height:auto;padding:9px 12px}.navbar-left{gap:10px}.navbar-links,.profile-chip,.has-badge{display:none}.navbar-right{gap:4px}#listenNowBtn{padding:9px 12px}.hero{min-height:280px;padding:30px 22px}.hero-title{font-size:2rem}.public-view-toolbar h1{font-size:32px;overflow-wrap:anywhere}.public-view-toolbar p{line-height:1.45}.album-detail-copy h2{font-size:32px;overflow-wrap:anywhere}.album-detail-copy{left:18px;right:18px}.album-detail-tracks{padding-left:12px;padding-right:12px}.view-back-btn,.album-detail-close{min-width:42px;min-height:42px}}
@media(max-width:480px){.logo-word{font-size:1rem}#themeBtn{display:none}.public-view-host{padding-left:10px;padding-right:10px}.public-grid{gap:8px}.public-card{padding:6px}.public-card-play{opacity:1;transform:none;width:36px;height:36px}.track-browser-row{grid-template-columns:28px minmax(0,1fr) 38px;gap:6px;padding-left:5px;padding-right:5px}.album-detail-actions{flex-wrap:wrap}.album-detail-track-head,.album-detail-track{grid-template-columns:28px minmax(0,1fr) 36px}.album-detail-track-head>:nth-child(3),.album-detail-track>:nth-child(3){display:none}.mp-cover{width:42px;height:42px}.mp-controls{gap:2px}.mp-controls .icon-btn{width:34px;height:34px}.play-toggle{width:40px;height:40px}}
@media(hover:none){.public-card-play{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* <<< css/v3.5.3-rc.css */


/* >>> css/light-mode-visibility-fix.css */
/* SYNTHIQ light-mode visibility patch */
.synthiq-testing-public.light-theme .album-detail{
  background:#f7f8fa;
  border-left-color:#cfd4da;
  color:#17191d;
}
.synthiq-testing-public.light-theme .album-detail-overlay{
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(247,248,250,.96) 94%);
}
.synthiq-testing-public.light-theme .album-detail-copy h2{
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.48);
}
.synthiq-testing-public.light-theme .album-detail-copy p{
  color:#f2f3f5;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.synthiq-testing-public.light-theme .album-detail-meta{
  color:#e2e4e8;
}
.synthiq-testing-public.light-theme .album-detail-tracks{
  background:#f7f8fa;
  color:#17191d;
}
.synthiq-testing-public.light-theme .album-detail-track-head{
  color:#69717c;
}
.synthiq-testing-public.light-theme .album-detail-track{
  color:#17191d;
  border-top-color:#d9dee4;
}
.synthiq-testing-public.light-theme .album-detail-track:hover{
  background:#eef1f4;
}
.synthiq-testing-public.light-theme .album-detail-track strong{
  color:#17191d;
}
.synthiq-testing-public.light-theme .album-detail-track small{
  color:#69717c;
}
.synthiq-testing-public.light-theme .album-detail-track button{
  color:#4e5661;
}

.synthiq-testing-public.light-theme .mini-player{
  color:#17191d;
  background:rgba(248,249,250,.985);
  border-top-color:#cfd4da;
  box-shadow:0 -8px 30px rgba(18,24,32,.08);
}
.synthiq-testing-public.light-theme .mini-player .mp-info strong{
  color:#17191d;
}
.synthiq-testing-public.light-theme .mini-player .mp-info span,
.synthiq-testing-public.light-theme .mini-player .mp-time{
  color:#68707a;
}
.synthiq-testing-public.light-theme .mini-player .icon-btn,
.synthiq-testing-public.light-theme .mini-player .mp-right button{
  color:#242a31;
}
.synthiq-testing-public.light-theme .mini-player .icon-btn:hover,
.synthiq-testing-public.light-theme .mini-player .mp-right button:hover{
  background:#e6e9ed;
  color:#11151a;
}
.synthiq-testing-public.light-theme .mini-player .play-toggle{
  background:var(--accent);
  color:#1a1200;
  box-shadow:0 2px 10px rgba(247,161,46,.28);
}
.synthiq-testing-public.light-theme .mini-player .mp-bar{
  background:#d9dee4;
}
.synthiq-testing-public.light-theme .mini-player .mp-bar-fill{
  background:var(--accent);
}
.synthiq-testing-public.light-theme .mini-player .volume-slider{
  accent-color:var(--accent);
}

/* <<< css/light-mode-visibility-fix.css */


/* >>> css/player-v3.5.4.css */
/* SYNTHIQ Media Browser V3.5.4 player capability pass */
.volume-slider{
  --volume-pct:20%;
  appearance:none;
  -webkit-appearance:none;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0 var(--volume-pct),var(--surface-2) var(--volume-pct) 100%);
  outline:none;
}
.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:0;box-shadow:0 0 0 3px rgba(247,161,46,.14);
}
.volume-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:0;box-shadow:0 0 0 3px rgba(247,161,46,.14);
}
.light-theme .volume-slider{background:linear-gradient(90deg,var(--accent) 0 var(--volume-pct),#b8bec6 var(--volume-pct) 100%)}

.player-queue-drawer{
  position:fixed;right:18px;bottom:calc(var(--player-h) + 14px);z-index:1250;
  width:min(390px,calc(100vw - 24px));max-height:min(620px,70dvh);
  display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:14px;
  background:rgba(28,32,38,.98);box-shadow:0 24px 70px rgba(0,0,0,.42);
  backdrop-filter:blur(16px);
  opacity:0;pointer-events:none;transform:translateY(12px) scale(.98);transition:.16s ease;
}
.player-queue-drawer.open{opacity:1;pointer-events:auto;transform:none}
.player-queue-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 12px;border-bottom:1px solid var(--border)}
.player-queue-head span{display:block;color:var(--accent);font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.player-queue-head h3{margin:3px 0 0;font-size:15px}
.player-queue-list{overflow:auto;padding:8px}
.player-queue-empty{padding:24px 14px;color:var(--text-dim);font-size:11px;line-height:1.5;text-align:center}
.player-queue-item{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 24px;align-items:center;gap:10px;padding:8px;border:1px solid transparent;border-radius:9px;text-align:left;color:var(--text)}
.player-queue-item:hover{background:var(--surface-2);border-color:var(--border)}
.player-queue-item.active{background:var(--accent-soft);border-color:rgba(247,161,46,.35)}
.player-queue-cover{width:42px;height:42px;border-radius:7px;background:var(--surface-2);display:grid;place-items:center;overflow:hidden}
.player-queue-cover img{width:100%;height:100%;object-fit:cover}
.player-queue-copy{min-width:0}
.player-queue-copy strong,.player-queue-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-queue-copy strong{font-size:10px}.player-queue-copy small{margin-top:3px;color:var(--text-dim);font-size:8px}
.player-queue-number{color:var(--text-faint);font-size:9px;text-align:center}.player-queue-playing{color:var(--accent)}

.light-theme .player-queue-drawer{background:rgba(250,251,252,.98);box-shadow:0 20px 60px rgba(35,42,50,.2)}
.light-theme .player-queue-item{color:#17191d}
.light-theme .player-queue-item:hover{background:#eef1f4}
.light-theme .player-queue-item.active{background:#fff3df}

.player-capability-toast{
  position:fixed;left:50%;bottom:calc(var(--player-h) + 22px);z-index:1500;
  transform:translate(-50%,12px);opacity:0;pointer-events:none;
  padding:10px 14px;border:1px solid var(--border);border-radius:999px;
  background:rgba(20,23,28,.96);color:#fff;font-size:10px;font-weight:700;
  box-shadow:0 12px 36px rgba(0,0,0,.3);transition:.16s ease;
}
.player-capability-toast.show{opacity:1;transform:translate(-50%,0)}
.light-theme .player-capability-toast{background:#fff;color:#17191d}

@media(max-width:860px){
  .player-queue-drawer{right:12px;left:12px;width:auto;bottom:calc(var(--player-h) + 12px)}
}

/* Portrait queue uses the dynamic visual viewport and always keeps its header/close control reachable. */
@media (orientation:portrait){
  .player-queue-drawer{
    left:12px!important;
    right:12px!important;
    top:auto!important;
    bottom:calc(var(--v36-phone-nav-h,66px) + env(safe-area-inset-bottom) + 10px)!important;
    width:auto!important;
    height:min(72dvh,calc(100dvh - var(--v36-phone-nav-h,66px) - env(safe-area-inset-bottom) - 28px))!important;
    max-height:min(72dvh,calc(100dvh - var(--v36-phone-nav-h,66px) - env(safe-area-inset-bottom) - 28px))!important;
    overflow:hidden!important;
    border-radius:18px!important;
    z-index:7600!important;
  }
  .player-queue-head{
    position:sticky!important;
    top:0!important;
    z-index:2!important;
    flex:0 0 auto!important;
    background:inherit!important;
    padding:12px 12px 10px!important;
  }
  .player-queue-head [data-queue-close]{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    flex:0 0 44px!important;
  }
  .player-queue-list{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:calc(12px + env(safe-area-inset-bottom))!important;
  }
}

/* <<< css/player-v3.5.4.css */


/* >>> css/player-v3.5.4-experience.css */
/* SYNTHIQ Media Browser V3.5.4 — expanded + floating player experience */
#mpCover{cursor:pointer}
.synthiq-global-brand{margin-left:2px;color:var(--text-faint);font-size:9px;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.expanded-player{position:fixed;inset:0;z-index:1450;overflow:auto;background:#11151a;color:#f7f7f8}
.expanded-player[hidden]{display:none!important}
.expanded-player-bg{position:absolute;inset:0;background-position:center;background-size:cover;filter:blur(34px) saturate(1.15);transform:scale(1.08);opacity:.72}
.expanded-player::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,17,21,.18),rgba(14,17,21,.82) 58%,#11151a 100%);pointer-events:none}
.expanded-player-shell{position:relative;z-index:2;min-height:100%;padding:22px 28px 38px;display:flex;flex-direction:column}
.expanded-player-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.expanded-player-topbar>div{display:flex;flex-direction:column;gap:3px}.expanded-player-topbar strong{font-size:12px;letter-spacing:.08em}.expanded-player-kicker{color:var(--accent);font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.expanded-player-brand{color:#c4c9d0;font-size:9px;font-weight:700;letter-spacing:.04em}
.expanded-player-close{background:rgba(20,23,28,.62);color:#fff;border:1px solid rgba(255,255,255,.22)}
.expanded-player-main{flex:1;display:grid;grid-template-columns:minmax(260px,520px) minmax(320px,560px);align-items:center;justify-content:center;gap:clamp(34px,6vw,90px);padding:38px 0}.expanded-player-art{width:min(520px,42vw);aspect-ratio:1;border-radius:24px;overflow:hidden;background:#20252c;box-shadow:0 34px 90px rgba(0,0,0,.45)}.expanded-player-art img{width:100%;height:100%;object-fit:cover;display:block}.expanded-player-copy{min-width:0}.expanded-player-album{display:block;color:#d0d4da;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}.expanded-player-copy h1{margin:0;font:clamp(42px,6vw,76px)/.95 Anton,sans-serif;text-transform:uppercase;overflow-wrap:anywhere}.expanded-player-copy p{margin:12px 0 0;color:#d4d8de;font-size:15px}.expanded-player-actions{display:flex;gap:8px;margin:24px 0 26px}.expanded-player-actions .icon-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff}.expanded-player-actions .icon-btn.active{background:var(--accent-soft);color:var(--accent);border-color:rgba(247,161,46,.35)}.expanded-player-progress{margin-top:12px}.expanded-player-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;cursor:pointer}.expanded-player-bar span{display:block;height:100%;width:0;background:var(--accent);border-radius:inherit}.expanded-player-times{display:flex;justify-content:space-between;margin-top:8px;color:#c7cbd1;font-size:10px}.expanded-player-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:26px}.expanded-player-controls .icon-btn{color:#fff}.expanded-player-controls .icon-btn.active{color:var(--accent);background:rgba(247,161,46,.12)}.expanded-skip{width:46px;height:46px}.expanded-play{width:68px;height:68px;background:var(--accent)!important;color:#1a1200!important;box-shadow:0 12px 34px rgba(247,161,46,.26)}.expanded-play svg{width:26px;height:26px}body.expanded-player-open{overflow:hidden}
body.expanded-player-open .player-queue-drawer{z-index:1560;right:24px;bottom:24px;max-height:calc(100dvh - 48px);box-shadow:0 30px 90px rgba(0,0,0,.55)}body.expanded-player-open .player-capability-toast{z-index:1600}
.mini-player.player-idle .mp-cover{background:var(--surface-2)}.mini-player.player-idle .mp-cover::after{content:"";width:18px;height:18px;border:2px solid var(--text-faint);border-radius:50%;opacity:.7}.mini-player.player-idle #favoriteBtn{opacity:.45;pointer-events:none}
.mini-player.floating{left:auto;right:18px;bottom:18px;width:min(430px,calc(100vw - 24px));height:76px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr;padding:10px 12px;border:1px solid var(--border);border-radius:16px;box-shadow:0 22px 65px rgba(0,0,0,.36);overflow:hidden}.mini-player.floating .mp-track{min-width:0}.mini-player.floating .mp-cover{width:54px;height:54px}.mini-player.floating .mp-center{display:flex;flex-direction:row;gap:4px}.mini-player.floating .mp-center .mp-progress{display:none}.mini-player.floating .mp-center .mp-controls{gap:1px}.mini-player.floating .mp-center #shuffleBtn,.mini-player.floating .mp-center #prevBtn,.mini-player.floating .mp-center #repeatBtn{display:none}.mini-player.floating .mp-right{display:none}.mini-player.floating #playToggle{width:42px;height:42px}.mini-player.floating #nextBtn{display:flex}.mini-player.floating .mp-fav{display:none}body.floating-player-active .app-shell,body.floating-player-active .public-view-host{padding-bottom:112px}.mini-player.floating::before{content:"Double-click to expand";position:absolute;right:10px;top:4px;color:var(--text-faint);font-size:7px;letter-spacing:.04em;pointer-events:none}
.synthiq-about-inline{max-width:820px;padding:34px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 18px 50px rgba(0,0,0,.12)}.synthiq-about-inline>span{display:block;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.synthiq-about-inline h2{margin:8px 0 14px;font:42px Anton,sans-serif;text-transform:uppercase}.synthiq-about-inline p{max-width:700px;color:var(--text-dim);line-height:1.65}

/* Light UI expanded player: keep artwork ambience, but use a genuinely light player surface. */
.light-theme .expanded-player{background:#eef1f4;color:#17191d}
.light-theme .expanded-player-bg{opacity:.20;filter:blur(38px) saturate(.85) brightness(1.22)}
.light-theme .expanded-player::after{background:linear-gradient(180deg,rgba(250,251,252,.58),rgba(244,246,248,.88) 55%,#eef1f4 100%)}
.light-theme .expanded-player-topbar strong{color:#17191d}.light-theme .expanded-player-brand{color:#69727d}
.light-theme .expanded-player-close{background:rgba(255,255,255,.76);color:#252a31;border-color:rgba(35,42,50,.18);box-shadow:0 8px 24px rgba(35,42,50,.12)}
.light-theme .expanded-player-art{background:#dde2e7;box-shadow:0 28px 70px rgba(35,42,50,.20)}
.light-theme .expanded-player-copy h1{color:#17191d}.light-theme .expanded-player-copy p{color:#555d67}.light-theme .expanded-player-album{color:#69727d}.light-theme .expanded-player-times{color:#69727d}
.light-theme .expanded-player-actions .icon-btn{background:rgba(255,255,255,.68);border-color:rgba(35,42,50,.15);color:#252a31}.light-theme .expanded-player-actions .icon-btn.active{background:#fff3df;color:var(--accent);border-color:rgba(247,161,46,.42)}
.light-theme .expanded-player-bar{background:rgba(35,42,50,.18)}
.light-theme .expanded-player-controls .icon-btn{color:#252a31}.light-theme .expanded-player-controls .icon-btn.active{color:var(--accent);background:rgba(247,161,46,.13)}
.light-theme .expanded-play{color:#1a1200!important}
.light-theme .mini-player.floating{background:rgba(250,251,252,.98);box-shadow:0 18px 50px rgba(35,42,50,.24)}

@media(max-width:1100px){.synthiq-global-brand{display:none}}
@media(max-width:820px){.expanded-player-shell{padding:16px 16px 28px}.expanded-player-main{grid-template-columns:1fr;gap:28px;padding:26px 0 14px}.expanded-player-art{width:min(72vw,420px);justify-self:center}.expanded-player-copy{text-align:center}.expanded-player-actions,.expanded-player-controls{justify-content:center}.expanded-player-copy h1{font-size:clamp(36px,11vw,58px)}.mini-player.floating{right:12px;bottom:12px;width:calc(100vw - 24px)}body.expanded-player-open .player-queue-drawer{right:12px;left:12px;width:auto;bottom:12px;max-height:calc(100dvh - 24px)}.synthiq-about-inline{padding:24px}.synthiq-about-inline h2{font-size:34px}}
@media(max-width:520px){.expanded-player-art{width:min(82vw,360px)}.expanded-player-copy p{font-size:13px}.expanded-player-actions{margin:18px 0 20px}.expanded-player-controls{gap:4px}.expanded-skip{width:42px;height:42px}.expanded-play{width:60px;height:60px}.mini-player.floating{grid-template-columns:minmax(0,1fr) auto;padding:9px 10px;height:72px}.mini-player.floating .mp-cover{width:50px;height:50px}.mini-player.floating .mp-info span{display:none}}

/* V3.6 staging — expanded Now Playing only: viewport-locked, no internal page scroll. */
.expanded-player{
  width:100vw;
  height:100dvh;
  overflow:hidden;
}
.expanded-player-shell{
  width:100%;
  height:100dvh;
  min-height:0;
  overflow:hidden;
}
.expanded-player-topbar{flex:0 0 auto}
.expanded-player-main{
  min-width:0;
  min-height:0;
  overflow:hidden;
  padding:clamp(14px,3dvh,30px) 0;
}
.expanded-player-art{
  width:min(42vw,calc(100dvh - 170px),520px);
  max-width:100%;
  max-height:calc(100dvh - 170px);
}
.expanded-player-copy{min-height:0}
.expanded-player-copy h1{font-size:clamp(34px,min(5.2vw,8dvh),76px)}
.expanded-player-actions{margin:clamp(12px,2dvh,20px) 0}
.expanded-player-controls{margin-top:clamp(12px,2.5dvh,22px)}

@media(max-width:820px){
  .expanded-player-shell{padding:12px 14px 14px}
  .expanded-player-main{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,auto) minmax(0,1fr);
    align-content:center;
    gap:clamp(8px,1.8dvh,16px);
    padding:8px 0;
  }
  .expanded-player-art{
    width:min(58vw,34dvh,330px);
    max-height:34dvh;
  }
  .expanded-player-copy h1{font-size:clamp(28px,8vw,46px)}
  .expanded-player-copy p{margin-top:6px}
  .expanded-player-actions{margin:8px 0}
  .expanded-player-progress{margin-top:6px}
  .expanded-player-controls{margin-top:10px}
}

@media(max-height:620px){
  .expanded-player-shell{padding-top:10px;padding-bottom:10px}
  .expanded-player-main{padding:6px 0;gap:18px}
  .expanded-player-art{width:min(34vw,calc(100dvh - 125px),360px);max-height:calc(100dvh - 125px)}
  .expanded-player-copy h1{font-size:clamp(28px,5vw,52px)}
  .expanded-player-actions{margin:8px 0}
  .expanded-player-controls{margin-top:8px}
}

/* <<< css/player-v3.5.4-experience.css */


/* >>> css/v3.5.4-button-responsiveness.css */
/* SYNTHIQ V3.5.4 responsive controls hardening */
:root{--tap-target:44px}

/* Shared interactive targets */
.synthiq-testing-public button,
.synthiq-testing-public .icon-btn,
.synthiq-testing-public .btn,
.synthiq-testing-public .nav-item,
.synthiq-testing-public .chip,
.synthiq-testing-public .view-btn{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.synthiq-testing-public .icon-btn{
  min-width:38px;
  min-height:38px;
}

@media (max-width:1024px){
  .synthiq-testing-public .icon-btn{
    min-width:42px;
    min-height:42px;
  }
  .synthiq-testing-public .btn{
    min-height:42px;
    padding:10px 16px;
  }
  .synthiq-testing-public .navbar-right{gap:8px}
  .synthiq-testing-public .public-view-actions{gap:8px}
  .synthiq-testing-public .album-detail-actions{gap:8px}
  .synthiq-testing-public .mp-controls{gap:4px}
}

@media (max-width:860px){
  .synthiq-testing-public .sidebar-left .nav-item{
    min-height:42px;
    display:inline-flex;
    align-items:center;
  }
  .synthiq-testing-public .chip,
  .synthiq-testing-public .view-btn{
    min-height:40px;
    display:inline-flex;
    align-items:center;
  }
  .synthiq-testing-public .public-view-actions{
    margin-left:0;
    width:100%;
  }
  .synthiq-testing-public .public-view-actions .btn,
  .synthiq-testing-public .public-view-actions .icon-btn{
    min-height:44px;
  }
  .synthiq-testing-public .mini-player:not(.floating){
    row-gap:10px;
  }
  .synthiq-testing-public .mini-player:not(.floating) .mp-controls .icon-btn{
    width:44px;
    height:44px;
  }
  .synthiq-testing-public .mini-player:not(.floating) .play-toggle{
    width:48px;
    height:48px;
  }
}

@media (max-width:700px){
  .synthiq-testing-public .navbar-right .icon-btn,
  .synthiq-testing-public #listenNowBtn{
    min-width:44px;
    min-height:44px;
  }
  .synthiq-testing-public #listenNowBtn{
    padding-inline:12px;
  }
  .synthiq-testing-public .album-detail-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .synthiq-testing-public .album-detail-actions .btn{
    width:100%;
    min-height:46px;
  }
  .synthiq-testing-public .album-detail-track button,
  .synthiq-testing-public .track-browser-fav{
    min-width:40px;
    min-height:40px;
  }
  .synthiq-testing-public .expanded-player-actions .icon-btn,
  .synthiq-testing-public .expanded-player-controls .icon-btn{
    min-width:46px;
    min-height:46px;
  }
  .synthiq-testing-public .expanded-play{
    width:64px!important;
    height:64px!important;
  }
  .synthiq-testing-public .expanded-player-close{
    min-width:46px;
    min-height:46px;
  }
  .synthiq-testing-public .player-queue-head .icon-btn{
    min-width:44px;
    min-height:44px;
  }
  .synthiq-testing-public .player-queue-item{
    min-height:58px;
  }
}

@media (max-width:520px){
  .synthiq-testing-public .navbar{
    gap:8px;
  }
  .synthiq-testing-public .navbar-right{
    gap:2px;
  }
  .synthiq-testing-public .navbar-right .icon-btn{
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
  }
  .synthiq-testing-public #listenNowBtn{
    min-height:42px;
    padding:8px 10px;
    font-size:.78rem;
  }
  .synthiq-testing-public .sidebar-left .nav-item{
    min-height:40px;
    padding:8px 10px;
  }
  .synthiq-testing-public .public-view-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .synthiq-testing-public .public-view-actions > *{
    width:100%;
  }
  .synthiq-testing-public .album-detail-actions{
    grid-template-columns:1fr;
  }
  .synthiq-testing-public .expanded-player-controls{
    gap:2px;
    justify-content:space-between;
    width:100%;
  }
  .synthiq-testing-public .expanded-player-controls .icon-btn{
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
  }
  .synthiq-testing-public .expanded-play{
    width:58px!important;
    min-width:58px!important;
    height:58px!important;
    min-height:58px!important;
  }
  .synthiq-testing-public .expanded-player-actions{
    justify-content:center;
  }
  .synthiq-testing-public .mini-player.floating{
    gap:6px;
  }
  .synthiq-testing-public .mini-player.floating .mp-track{
    gap:8px;
  }
  .synthiq-testing-public .mini-player.floating .mp-center .icon-btn{
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
  }
  .synthiq-testing-public .player-queue-drawer{
    border-radius:12px;
  }
  .synthiq-testing-public .player-queue-item{
    padding:9px;
  }
}

@media (max-width:380px){
  .synthiq-testing-public .navbar-right .icon-btn{
    width:38px;
    min-width:38px;
    height:38px;
    min-height:38px;
  }
  .synthiq-testing-public #listenNowBtn{
    min-height:38px;
    padding-inline:8px;
    font-size:.72rem;
  }
  .synthiq-testing-public .public-view-actions{
    grid-template-columns:1fr;
  }
  .synthiq-testing-public .expanded-player-controls .icon-btn{
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
  }
  .synthiq-testing-public .expanded-play{
    width:54px!important;
    min-width:54px!important;
    height:54px!important;
    min-height:54px!important;
  }
}

/* <<< css/v3.5.4-button-responsiveness.css */


/* >>> css/v3.5.5-ux-p1.css */
/* SYNTHIQ Media Browser V3.5.5 UX P1 — music-first browser views */
body.ux-v355-music-first .sidebar-right{display:none!important}
body.ux-v355-music-first .public-view-host{grid-column:2 / -1;margin:0;min-width:0;min-height:calc(100dvh - var(--nav-h) - 48px);padding:4px 0 calc(var(--player-h) + 34px);background:transparent!important}
body.ux-v355-music-first .public-view-toolbar{align-items:center;margin-bottom:18px;padding:18px 20px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
body.ux-v355-music-first .public-view-toolbar h1{font-size:clamp(36px,4vw,56px);line-height:1}
body.ux-v355-music-first .public-view-toolbar p{margin-top:5px;font-size:12px;color:var(--text-dim)}
body.ux-v355-music-first .public-view-actions{gap:10px;flex-wrap:wrap}
body.ux-v355-music-first .public-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:18px}
body.ux-v355-music-first .public-card{padding:8px;border-radius:14px}
body.ux-v355-music-first .public-card:hover{background:var(--surface);border-color:var(--border)}
body.ux-v355-music-first .public-card h3{margin-top:10px;font-size:13px}
body.ux-v355-music-first .public-card p{font-size:10px;color:var(--text-dim)}
body.ux-v355-music-first .public-card small{font-size:9px;color:var(--text-faint)}
body.ux-v355-music-first .artist-grid,body.ux-v355-music-first .genre-grid,body.ux-v355-music-first .stat-browser-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
body.ux-v355-music-first .track-browser-list{max-width:none}
body.ux-v355-music-first .track-browser-row{grid-template-columns:42px minmax(0,1fr) minmax(120px,180px) 80px 42px}
body.ux-v355-music-first .ux-albums-select{min-height:42px;padding:0 36px 0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:12px;font-weight:700;outline:none}
body.ux-v355-music-first .ux-albums-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.ux-v355-music-first .ux-albums-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:0 4px;color:var(--text-dim);font-size:12px}
body.ux-v355-music-first .ux-albums-summary strong{color:var(--text);font-size:13px}
body.ux-v355-music-first.light-theme .public-view-toolbar{background:#fff;border-color:#d6dbe1}
body.ux-v355-music-first.light-theme .ux-albums-select{background:#f7f8fa;border-color:#d2d7dd;color:#17191d}
body.ux-v355-music-first.light-theme .public-card:hover{background:#fff;border-color:#d5dae0}
@media(max-width:1100px){body.ux-v355-music-first .public-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}}
@media(max-width:860px){body.ux-v355-music-first .public-view-host{grid-column:1;margin:0;padding:0 0 calc(var(--player-h) + 24px)}body.ux-v355-music-first .public-view-toolbar{align-items:flex-start;padding:14px;flex-wrap:wrap}body.ux-v355-music-first .public-view-actions{width:100%;margin-left:0}body.ux-v355-music-first .ux-albums-select{flex:1;min-width:145px}body.ux-v355-music-first .track-browser-row{grid-template-columns:32px minmax(0,1fr) 42px}}
@media(max-width:520px){body.ux-v355-music-first .public-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}body.ux-v355-music-first .public-view-toolbar h1{font-size:34px}body.ux-v355-music-first .ux-albums-summary{align-items:flex-start;flex-direction:column;gap:4px}body.ux-v355-music-first .artist-grid,body.ux-v355-music-first .genre-grid,body.ux-v355-music-first .stat-browser-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* <<< css/v3.5.5-ux-p1.css */


/* >>> css/v3.6-auth.css */
/* SYNTHIQ Media Browser V3.6 P1 — listener authentication */
.listener-auth-modal{position:fixed;inset:0;z-index:2200;display:grid;place-items:center;padding:20px}.listener-auth-modal[hidden]{display:none!important}.listener-auth-backdrop{position:absolute;inset:0;background:rgba(6,8,12,.72);backdrop-filter:blur(10px)}.listener-auth-card{position:relative;z-index:1;width:min(430px,100%);padding:28px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 30px 100px rgba(0,0,0,.5)}.listener-auth-close{position:absolute;top:14px;right:14px}.listener-auth-kicker{display:block;margin-bottom:7px;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.listener-auth-card h2{margin:0 0 7px;font:36px Anton,sans-serif;text-transform:uppercase}.listener-auth-card>p{margin:0 0 20px;color:var(--text-dim);font-size:12px;line-height:1.55}.listener-auth-card form{display:grid;gap:13px}.listener-auth-card label{display:grid;gap:6px;color:var(--text-dim);font-size:11px;font-weight:700}.listener-auth-card label[hidden]{display:none!important}.listener-auth-card input{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);outline:none}.listener-auth-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.listener-auth-card .btn{margin-top:4px;min-height:44px}.listener-auth-card .btn:disabled{opacity:.55;cursor:wait}.listener-auth-status{min-height:18px!important;margin:12px 0 0!important;color:var(--success)!important;font-size:11px!important}.listener-auth-status.error{color:#ff7d7d!important}.listener-auth-switch{width:100%;margin-top:8px;padding:9px;color:var(--accent);font-size:11px;font-weight:700}.listener-auth-switch:hover{text-decoration:underline}
.listener-account-menu{position:fixed;z-index:2100;width:min(310px,calc(100vw - 24px));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 24px 75px rgba(0,0,0,.42);display:flex;flex-direction:column;min-height:0}.listener-account-menu[hidden]{display:none!important}.listener-account-summary{display:flex;align-items:center;gap:11px;padding:10px;flex:0 0 auto}.listener-account-avatar,.listener-chip-avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ffcb78);color:#261603;font-weight:900}.listener-account-avatar{width:42px;height:42px;font-size:13px}.listener-chip-avatar{width:32px;height:32px;font-size:10px;flex:0 0 auto}.listener-account-summary strong{display:block;font-size:12px}.listener-account-summary span{display:block;margin-top:2px;color:var(--text-dim);font-size:9px;overflow:hidden;text-overflow:ellipsis}.listener-account-plan{display:flex;align-items:center;gap:8px;margin:4px 4px 8px;padding:9px 10px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:800;flex:0 0 auto}.listener-account-menu>button{width:100%;display:flex;align-items:center;gap:9px;padding:10px;border-radius:10px;color:var(--text-dim);font-size:11px;font-weight:700;text-align:left}.listener-account-menu>button:hover{background:var(--surface-2);color:var(--text)}
#listenerProfileEdit{min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:6px}#listenerProfileEdit[hidden]{display:none!important}
#listenerSignOutBtn{position:relative!important;flex:0 0 auto!important;bottom:auto!important;margin-top:6px!important;background:var(--surface)!important;border-top:1px solid var(--border)!important;z-index:3!important;padding-top:12px!important;padding-bottom:max(10px,env(safe-area-inset-bottom))!important}
body.listener-auth-open{overflow:hidden}.profile-chip .avatar-sm[hidden]{display:none!important}.profile-card .avatar-lg[hidden]{display:none!important}.profile-card .avatar-lg[hidden]+h3{margin-top:4px}.light-theme .listener-auth-card,.light-theme .listener-account-menu{background:#fff;border-color:#d5dae0;box-shadow:0 24px 70px rgba(35,42,50,.2)}.light-theme .listener-auth-card input{background:#f6f7f9;border-color:#d5dae0;color:#17191d}@media(max-width:700px){.listener-auth-modal{padding:12px}.listener-auth-card{padding:24px 18px;border-radius:17px}.listener-account-menu{right:12px!important;left:auto!important;max-height:calc(100dvh - var(--v36-portrait-nav-h,72px) - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom));}}

/* Keep the admin account menu compact on mobile. Full System Analytics remains available from the Music Manager. */
#v36AdminYoutubeUsage{display:none!important}

/* <<< css/v3.6-auth.css */


/* >>> css/v3.6-about.css */
/* SYNTHIQ V3.6 — About story */
.v36-about-story{display:flex;flex-direction:column;gap:18px;max-width:1180px;margin:0 auto 40px}.v36-about-hero,.v36-about-card,.v36-about-note,.v36-about-thanks,.v36-about-footer,.v36-about-meaning{border:1px solid var(--border);background:var(--surface);border-radius:18px}.v36-about-hero{padding:30px}.v36-about-kicker{display:block;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}.v36-about-hero h2{margin:0;font:clamp(36px,5vw,64px)/.95 Anton,sans-serif;text-transform:uppercase}.v36-about-hero p{max-width:820px;margin:16px 0 0;color:var(--text-dim);font-size:15px;line-height:1.7}.v36-about-meaning{padding:24px}.v36-about-meaning-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.v36-about-meaning-head>svg{width:22px;height:22px;color:var(--accent)}.v36-about-meaning h3{margin:0;font-size:18px}.v36-about-meaning-intro{margin:0 0 16px;color:var(--text-dim);font-size:13px;line-height:1.65}.v36-about-meaning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.v36-about-meaning-item{padding:16px;border:1px solid var(--border);background:var(--surface-2);border-radius:14px}.v36-about-meaning-item strong{display:block;color:var(--accent);font-size:12px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:7px}.v36-about-meaning-item p{margin:0;color:var(--text-dim);font-size:13px;line-height:1.6}.v36-about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.v36-about-card{padding:22px}.v36-about-card>svg{width:22px;height:22px;color:var(--accent);margin-bottom:14px}.v36-about-card h3{margin:0 0 8px;font-size:16px}.v36-about-card p{margin:0;color:var(--text-dim);font-size:13px;line-height:1.65}.v36-about-note{padding:24px}.v36-about-note-label{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.v36-about-note blockquote{margin:16px 0;padding:18px 20px;border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 12px 12px 0;font-size:17px;line-height:1.55;font-weight:700}.v36-about-note p{margin:0;color:var(--text-dim);font-size:13px;line-height:1.65}.v36-about-thanks{padding:24px;display:flex;gap:16px;align-items:flex-start}.v36-about-thanks>svg{flex:0 0 auto;width:24px;height:24px;color:var(--accent);margin-top:2px}.v36-about-thanks span{display:block;color:var(--accent);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.v36-about-thanks h3{margin:5px 0 8px;font-size:18px}.v36-about-thanks p{margin:0;color:var(--text-dim);font-size:13px;line-height:1.65}.v36-about-footer{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}.v36-about-footer strong{color:var(--accent);font-size:12px}.v36-about-footer span{color:var(--text-dim);font-size:12px}.light-theme .v36-about-hero,.light-theme .v36-about-card,.light-theme .v36-about-note,.light-theme .v36-about-thanks,.light-theme .v36-about-footer,.light-theme .v36-about-meaning{background:#fff;border-color:#d7dce2}.light-theme .v36-about-note blockquote,.light-theme .v36-about-meaning-item{background:#f5f7f9;border-color:#d7dce2}@media(max-width:760px){.v36-about-grid,.v36-about-meaning-grid{grid-template-columns:1fr}.v36-about-hero{padding:22px}.v36-about-card,.v36-about-note,.v36-about-thanks,.v36-about-meaning{padding:18px}.v36-about-footer{align-items:flex-start;flex-direction:column}.v36-about-note blockquote{font-size:15px}}

/* <<< css/v3.6-about.css */


/* >>> css/v3.6-admin-manager.css */
/* SYNTHIQ V3.6 — restore Music Manager only for verified Admin */
.synthiq-testing-public[data-listener-role="admin"] #openManagerBtn{
  display:grid!important;
}
.synthiq-testing-public[data-listener-role="admin"] .music-manager{
  display:block!important;
}
.synthiq-testing-public[data-listener-role="admin"] .manager-backdrop:not([hidden]),
.synthiq-testing-public[data-listener-role="admin"] .manager-confirm:not([hidden]){
  display:block!important;
}

/* All non-admin account states remain forcibly read-only at the UI layer. */
.synthiq-testing-public:not([data-listener-role="admin"]) #openManagerBtn,
.synthiq-testing-public:not([data-listener-role="admin"]) .music-manager,
.synthiq-testing-public:not([data-listener-role="admin"]) .manager-backdrop,
.synthiq-testing-public:not([data-listener-role="admin"]) .manager-confirm{
  display:none!important;
}

/* <<< css/v3.6-admin-manager.css */


/* >>> css/v3.6-profile.css */
/* SYNTHIQ V3.6 — listener profile editor */
.listener-profile-edit{display:grid;gap:14px;padding:14px 16px;border-top:1px solid var(--border);margin-top:8px}
.listener-profile-avatar-row{display:flex;align-items:center;gap:12px}
.listener-profile-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--surface-2);border:1px solid var(--border)}
.listener-profile-avatar-placeholder{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);font-weight:800;font-size:22px;overflow:hidden}
.listener-profile-fields{display:grid;gap:9px}.listener-profile-fields label{font-size:12px;color:var(--text-dim)}
.listener-profile-fields input{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:10px;padding:10px 11px;background:var(--surface);color:var(--text)}
.listener-profile-actions{display:flex;gap:8px;flex-wrap:wrap}.listener-profile-status{font-size:12px;color:var(--text-dim);min-height:16px}
.listener-profile-hint{font-size:11px;color:var(--text-dim);margin-top:5px}
.listener-profile-file{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.listener-profile-avatar-img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover;border-radius:inherit}
.listener-chip-avatar,.listener-account-avatar,[data-account-avatar]{overflow:hidden}
/* The legacy top profile chip already owns .avatar-sm. Hide the V3.6 duplicate avatar shell there. */
#listenerAccountBtn .listener-chip-avatar{display:none!important}
#listenerAccountBtn .avatar-sm{display:block!important;flex:0 0 auto;width:32px;height:32px;border-radius:50%;object-fit:cover}
.listener-home-profile-avatar{width:68px;height:68px;margin:0 auto 10px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border)}
.listener-home-profile-avatar .listener-profile-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.listener-account-avatar img,.profile-card .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* Profile card is a stable identity surface. Keep the outer card responsive,
   but reserve identical internal geometry for Visitor, Free, Premium and Admin. */
.profile-card{
  transform:none!important;
  translate:none!important;
  animation:none!important;
  transition:none!important;
  contain:layout paint;
  backface-visibility:hidden;
  min-height:178px;
}
.profile-card .avatar-lg{
  display:block!important;
  width:72px!important;height:72px!important;
  min-width:72px!important;min-height:72px!important;
  max-width:72px!important;max-height:72px!important;
  aspect-ratio:1/1;
  margin:0 auto 12px!important;
}
.profile-card h3{
  height:20px;min-height:20px;line-height:20px;
  margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.profile-card .premium-badge{
  height:18px;min-height:18px;line-height:18px;
  justify-content:center;margin-bottom:4px;white-space:nowrap;overflow:hidden;
}
.profile-card .premium-badge svg{width:13px;height:13px;flex:0 0 13px}
.profile-card .member-since{
  height:16px;min-height:16px;line-height:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* <<< css/v3.6-profile.css */


/* >>> css/v3.6-premium.css */
/* SYNTHIQ V3.6 — Premium entitlement UI */
.premium-download-btn[hidden]{display:none!important}
.premium-download-btn{position:relative}
.premium-download-btn::after{content:'PREMIUM';position:absolute;top:-8px;right:-8px;font-size:7px;line-height:1;padding:3px 4px;border-radius:999px;background:var(--accent);color:#111;font-weight:800;letter-spacing:.04em}
.nav-item.premium-locked{opacity:.62}
.nav-item.premium-locked::after{content:'Premium';margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent)}
.premium-download-toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,18px);opacity:0;pointer-events:none;z-index:10050;padding:10px 14px;border-radius:12px;background:rgba(17,20,24,.96);color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 38px rgba(0,0,0,.35);font-size:13px;transition:opacity .18s ease,transform .18s ease}
.premium-download-toast.show{opacity:1;transform:translate(-50%,0)}
.premium-download-toast.error{border-color:rgba(245,166,35,.5)}
.light-theme .premium-download-toast{background:rgba(255,255,255,.98);color:#16181b;border-color:rgba(0,0,0,.12)}

/* <<< css/v3.6-premium.css */


/* >>> css/v3.6-close-controls.css */
/* SYNTHIQ V3.6 — global close-control visibility + simplified Music Manager navigation */

/* Music Manager: keep only additive Admin controls as top navigation. */
#musicManager .manager-tabs > .manager-tab:not(#v36MilestonesBtn):not(#v36UsersBtn):not(#v36StructureBtn):not(#v36RegistrationsBtn):not(#v36DevelopmentBtn){display:none!important}
#musicManager .manager-tabs{display:flex!important;align-items:center!important;gap:8px!important;min-height:44px!important;padding-right:82px!important;flex-wrap:wrap!important}
#musicManager #v36MilestonesBtn,
#musicManager #v36UsersBtn,
#musicManager #v36StructureBtn,
#musicManager #v36RegistrationsBtn,
#musicManager #v36DevelopmentBtn{display:inline-flex!important;align-items:center!important;gap:7px!important;padding:10px 12px!important;font-weight:800!important}
#musicManager #v36MilestonesBtn{color:var(--accent)!important;border-bottom:3px solid var(--accent)!important}
#musicManager #v36UsersBtn,
#musicManager #v36StructureBtn,
#musicManager #v36RegistrationsBtn,
#musicManager #v36DevelopmentBtn{color:var(--text)!important;border-bottom:3px solid transparent!important}
#musicManager #v36UsersBtn:hover,
#musicManager #v36StructureBtn:hover,
#musicManager #v36RegistrationsBtn:hover,
#musicManager #v36DevelopmentBtn:hover{color:var(--accent)!important;border-bottom-color:rgba(247,161,46,.45)!important}

/*
  Global close-control contract.
  Covers existing named controls plus dynamically-created song lists, queues,
  drawers, sheets, dialogs and future controllers when their button/id/class/title
  contains "close".  This keeps the X treatment consistent without changing handlers.
*/
#closeManagerBtn,
.album-detail-close,
#closeSearchResults,
#expandedPlayerClose,
.expanded-player-close,
.queue-close,
.play-queue-close,
.songlist-close,
.song-list-close,
.tracklist-close,
.track-list-close,
.modal-close,
.drawer-close,
.sheet-close,
.panel-close,
.listener-auth-close,
.listener-account-close,
.about-close,
[data-close],
[data-modal-close],
[data-drawer-close],
button[aria-label*="close" i],
button[title*="close" i],
button[id*="close" i],
button[class*="close" i]{
  width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;
  display:grid!important;place-items:center!important;
  border:2px solid var(--accent)!important;border-radius:14px!important;
  background:rgba(10,10,12,.96)!important;color:#fff!important;
  box-shadow:0 0 0 3px rgba(247,161,46,.12),0 6px 22px rgba(247,161,46,.28)!important;
  opacity:1!important;visibility:visible!important;z-index:90!important;
  cursor:pointer!important;line-height:1!important;font-size:28px!important;
}
#closeManagerBtn:hover,.album-detail-close:hover,#closeSearchResults:hover,#expandedPlayerClose:hover,.expanded-player-close:hover,.queue-close:hover,.play-queue-close:hover,.songlist-close:hover,.song-list-close:hover,.tracklist-close:hover,.track-list-close:hover,.modal-close:hover,.drawer-close:hover,.sheet-close:hover,.panel-close:hover,.listener-auth-close:hover,.listener-account-close:hover,.about-close:hover,[data-close]:hover,[data-modal-close]:hover,[data-drawer-close]:hover,button[aria-label*="close" i]:hover,button[title*="close" i]:hover,button[id*="close" i]:hover,button[class*="close" i]:hover{background:var(--accent)!important;color:#15100a!important;transform:scale(1.04)}
#closeManagerBtn svg,.album-detail-close svg,#closeSearchResults svg,#expandedPlayerClose svg,.expanded-player-close svg,.queue-close svg,.play-queue-close svg,.songlist-close svg,.song-list-close svg,.tracklist-close svg,.track-list-close svg,.modal-close svg,.drawer-close svg,.sheet-close svg,.panel-close svg,.listener-auth-close svg,.listener-account-close svg,.about-close svg,[data-close] svg,[data-modal-close] svg,[data-drawer-close] svg,button[aria-label*="close" i] svg,button[title*="close" i] svg,button[id*="close" i] svg,button[class*="close" i] svg{width:26px!important;height:26px!important;stroke-width:2.5!important}

/* Known overlay headers get enough room so the close control never overlaps content. */
.manager-header,.search-results-head,.listener-auth-card,.album-detail-hero,[class*="modal-head" i],[class*="drawer-head" i],[class*="sheet-head" i],[class*="panel-head" i],[class*="songlist-head" i],[class*="tracklist-head" i]{position:relative!important;padding-right:76px!important}

/* Manager close is always anchored to the top-right of the panel. */
#musicManager{position:fixed!important}
#musicManager .manager-header{position:relative!important;padding-right:86px!important;min-height:84px!important}
#closeManagerBtn{position:absolute!important;top:18px!important;right:18px!important}

/* Other known overlays: keep close controls in a predictable top-right position. */
.album-detail{position:fixed!important}.album-detail-close{position:absolute!important;top:16px!important;right:16px!important}
.search-results-popover{position:fixed}.search-results-head #closeSearchResults{position:absolute!important;top:8px!important;right:8px!important}

@media(max-width:640px){
#closeManagerBtn,.album-detail-close,#closeSearchResults,#expandedPlayerClose,.expanded-player-close,.queue-close,.play-queue-close,.songlist-close,.song-list-close,.tracklist-close,.track-list-close,.modal-close,.drawer-close,.sheet-close,.panel-close,.listener-auth-close,.listener-account-close,.about-close,[data-close],[data-modal-close],[data-drawer-close],button[aria-label*="close" i],button[title*="close" i],button[id*="close" i],button[class*="close" i]{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;font-size:25px!important}
#musicManager .manager-header{padding-right:72px!important}#closeManagerBtn{top:12px!important;right:12px!important}
}

/* <<< css/v3.6-close-controls.css */


/* >>> css/v3.6-content-community.css */
/* SYNTHIQ V3.6 content/community */
.v36-cc-overlay{position:fixed;inset:0;z-index:14500;background:rgba(0,0,0,.68);display:grid;place-items:center;padding:18px;backdrop-filter:blur(8px)}
.v36-cc-modal{width:min(760px,96vw);max-height:88dvh;overflow:auto;background:var(--surface,#17191d);color:var(--text,#f6f7f8);border:1px solid var(--border,#343840);border-radius:18px;box-shadow:0 28px 90px rgba(0,0,0,.45);padding:20px}
.v36-cc-modal>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.v36-cc-modal>header span{color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.12em}.v36-cc-modal>header h2{margin:3px 0 0;font-size:22px}.v36-cc-modal>header button{border:0;background:transparent;color:inherit;font-size:28px;cursor:pointer}
.v36-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.v36-plan-grid article{border:1px solid var(--border);border-radius:14px;padding:20px;background:var(--surface-2,#22262d)}.v36-plan-grid article.featured{border-color:rgba(247,161,46,.55);box-shadow:inset 0 0 0 1px rgba(247,161,46,.12)}.v36-plan-grid svg{color:var(--accent)}.v36-plan-grid h3{margin:12px 0 6px}.v36-plan-grid p,.v36-cc-note,.v36-community p{color:var(--text-dim,#a8afb8);font-size:12px;line-height:1.6}.v36-plan-grid strong{display:block;margin-top:16px;color:var(--accent)}.v36-cc-note{margin:16px 2px 0}
.v36-community{text-align:center;padding:18px 10px}.v36-community>svg{width:42px;height:42px;color:var(--accent)}.v36-community h3{font-size:20px;margin:12px 0 4px}.v36-community-status{margin:22px auto 0;max-width:520px;text-align:left;display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:12px;padding:13px}.v36-community-status>span{width:10px;height:10px;border-radius:50%;background:#3ecf8e;box-shadow:0 0 0 4px rgba(62,207,142,.12)}.v36-community-status strong,.v36-community-status small{display:block}.v36-community-status small{color:var(--text-dim);margin-top:3px;line-height:1.4}
.v36-editor-tabs{display:flex;gap:7px;margin:-4px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--border)}.v36-editor-tabs button{border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-dim);padding:7px 12px;font-weight:800;cursor:pointer}.v36-editor-tabs button.active{background:var(--accent);border-color:var(--accent);color:#111}.v36-editor-pane{display:none}.v36-editor-pane.active{display:block}.v36-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.v36-editor-grid label{font-size:11px;font-weight:800;color:var(--text-dim)}.v36-editor-grid label.full{grid-column:1/-1}.v36-editor-grid input,.v36-editor-grid textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px;border:1px solid var(--border);border-radius:9px;padding:10px 11px;background:var(--bg,#0d0f12);color:var(--text);font:inherit}.v36-editor-grid textarea{min-height:100px;resize:vertical}.v36-editor-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}.v36-editor-actions span{font-size:10px;color:var(--text-dim);max-width:440px;line-height:1.5}
.v36-managed-about{display:grid;gap:16px;margin-top:18px}.v36-about-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.v36-about-gallery figure{margin:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}.v36-about-gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}.v36-about-gallery figcaption{padding:9px 11px;color:var(--text-dim);font-size:11px}.v36-about-comments{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.v36-about-comments blockquote{margin:0;padding:16px;border-radius:14px;border:1px solid var(--border);background:var(--surface);font-size:13px;line-height:1.55}.v36-about-comments small{display:block;margin-top:10px;color:var(--accent);font-weight:800}.v36-about-dedication{display:flex;gap:12px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.v36-about-dedication svg{flex:0 0 auto;color:var(--accent)}.v36-about-dedication p{margin:0;line-height:1.55}
.light-theme .v36-cc-modal{background:#fafbfc;color:#17191d;border-color:#d4d9df}.light-theme .v36-plan-grid article{background:#f0f2f5;border-color:#d4d9df}.light-theme .v36-editor-grid input,.light-theme .v36-editor-grid textarea{background:#fff;color:#17191d;border-color:#cbd1d8}.light-theme .v36-editor-tabs button{border-color:#cbd1d8;color:#5b6470}.light-theme .v36-about-gallery figure,.light-theme .v36-about-comments blockquote,.light-theme .v36-about-dedication{background:#fff;border-color:#d4d9df}
@media(max-width:640px){.v36-plan-grid,.v36-editor-grid{grid-template-columns:1fr}.v36-editor-grid label.full{grid-column:auto}.v36-editor-actions{align-items:stretch;flex-direction:column}.v36-editor-actions button{width:100%}.v36-editor-tabs{overflow:auto}.v36-editor-tabs button{white-space:nowrap}}

/* <<< css/v3.6-content-community.css */


/* >>> css/v3.6-community-hero.css */
/* SYNTHIQ V3.6 Community Hub + Homepage personality hub */
.v36-community-page{display:grid;gap:18px}.v36-community-v2{grid-template-columns:minmax(0,1fr);align-items:start}.v36-community-main{display:grid;gap:16px;min-width:0}.v36-community-intro{display:flex;justify-content:space-between;gap:20px;align-items:end;padding:24px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(135deg,rgba(247,161,46,.14),transparent 58%),var(--surface)}.v36-community-kicker{color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.v36-community-intro h2{margin:5px 0 8px;font-size:28px;line-height:1.05}.v36-community-intro p{margin:0;max-width:760px;color:var(--text-dim);font-size:12px;line-height:1.65}.v36-community-tabs{display:flex;flex-wrap:wrap;gap:7px;padding:2px;position:relative;z-index:1}.v36-community-tabs button{border:1px solid var(--border);background:var(--surface);color:var(--text-dim);border-radius:999px;padding:8px 13px;font-size:10px;font-weight:900;white-space:nowrap;cursor:pointer}.v36-community-tabs button.active{background:var(--accent);border-color:var(--accent);color:#17120a}.v36-community-panel{display:none;min-width:0}.v36-community-panel.active{display:block}.v36-community-feed{display:grid;gap:12px}.v36-community-feed article,.v36-live-chat,.v36-youtube-card,.v36-community-rail article,.v36-supporter-hero,.v36-supporter-grid article,.v36-today-grid article{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:18px}.v36-community-feed header{display:flex;gap:10px;align-items:center}.v36-community-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#111;font-weight:900}.v36-community-feed header strong,.v36-community-feed header small{display:block}.v36-community-feed header small{color:var(--text-dim);font-size:9px}.v36-community-feed article>p{margin:14px 0;color:var(--text);line-height:1.65;font-size:13px}.v36-community-feed footer{display:flex;gap:18px;color:var(--text-dim);font-size:10px}.v36-live-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);gap:14px}.v36-live-head,.v36-supporter-hero{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.v36-live-dot{border:1px solid rgba(247,161,46,.4);color:var(--accent);border-radius:999px;padding:5px 8px;font-size:8px;font-weight:900}.v36-chat-preview{display:grid;gap:8px;margin:16px 0}.v36-chat-preview p{margin:0;border-radius:10px;background:var(--surface-2);padding:10px;color:var(--text-dim);font-size:10px}.v36-youtube-card{display:grid;gap:12px}.v36-youtube-frame{position:relative;aspect-ratio:16/9;border-radius:13px;overflow:hidden;background:#050505}.v36-youtube-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.v36-supporter-grid,.v36-today-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}.v36-community-rules{display:flex;gap:12px;border:1px solid var(--border);border-radius:14px;padding:15px;background:var(--surface)}.v36-community-rail{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}.v36-rail-support{background:linear-gradient(145deg,rgba(247,161,46,.13),transparent 60%),var(--surface)!important}.hero{position:relative}.v36-hero-spotlight{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:min(350px,38%);display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(12,14,18,.66);box-shadow:0 16px 50px rgba(0,0,0,.28);backdrop-filter:blur(12px);z-index:2}.v36-hero-spotlight img{width:96px;height:96px;border-radius:11px;object-fit:cover}.v36-hero-spotlight span,.v36-hero-spotlight strong,.v36-hero-spotlight small{display:block}.v36-hero-spotlight span{color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.v36-hero-spotlight strong{margin-top:4px;color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v36-hero-spotlight small{color:#c8cbd0;font-size:9px}.v36-hero-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.v36-hero-spotlight button{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:999px;background:var(--accent);color:#14100a;font-weight:900;font-size:9px;padding:7px 10px;cursor:pointer}.v36-hero-spotlight button.v36-support-hero{background:rgba(255,255,255,.11);color:#fff;border:1px solid rgba(255,255,255,.16)}
.v36-tambayan-hub{margin:18px 22px 26px;padding:25px;border:1px solid var(--border);border-radius:20px;background:radial-gradient(circle at 50% 0,rgba(247,161,46,.1),transparent 35%),var(--surface);box-shadow:0 16px 45px rgba(0,0,0,.08)}.v36-tambayan-heading{text-align:center;max-width:760px;margin:0 auto 20px}.v36-tambayan-heading>span{color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.v36-tambayan-heading h2{font-size:29px;margin:5px 0 7px;letter-spacing:-.02em}.v36-tambayan-heading p{margin:0;color:var(--text-dim);font-size:12px}.v36-tambayan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.v36-tambayan-card{position:relative;overflow:hidden;min-height:225px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:23px 20px;border:1px solid var(--border);border-radius:17px;background:var(--surface-2);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.v36-tambayan-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--card-accent) 55%,var(--border));box-shadow:0 16px 32px rgba(0,0,0,.14)}.v36-tambayan-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--card-accent) 22%,transparent),transparent 55%);pointer-events:none}.v36-tambayan-card.soundtrip{--card-accent:#2dd4a7}.v36-tambayan-card.tambayan{--card-accent:#f7a12e}.v36-tambayan-card.iba-pa{--card-accent:#a56bf5}.v36-tambayan-card>svg{position:relative;width:38px;height:38px;padding:10px;box-sizing:content-box;border-radius:50%;background:color-mix(in srgb,var(--card-accent) 18%,transparent);color:var(--card-accent)}.v36-tambayan-card h3{position:relative;margin:11px 0 5px;color:var(--card-accent);font-size:19px}.v36-tambayan-card strong{position:relative;font-size:12px}.v36-tambayan-card p{position:relative;max-width:290px;margin:8px auto 16px;color:var(--text-dim);font-size:11px;line-height:1.55}.v36-tambayan-card button{position:relative;margin-top:auto;width:100%;min-height:38px;border:1px solid color-mix(in srgb,var(--card-accent) 70%,transparent);border-radius:10px;background:transparent;color:var(--card-accent);font-weight:900;font-size:10px;cursor:pointer}.v36-tambayan-card button:hover{background:color-mix(in srgb,var(--card-accent) 13%,transparent)}.v36-hub-button-row{position:relative;margin-top:auto;width:100%;display:flex;gap:7px}.v36-hub-button-row button{margin:0}.v36-hub-button-row button.secondary{width:auto;min-width:88px}.v36-hub-button-row svg{width:13px;height:13px;vertical-align:-2px}
.light-theme .v36-community-intro,.light-theme .v36-community-feed article,.light-theme .v36-community-rules,.light-theme .v36-community-tabs button,.light-theme .v36-live-chat,.light-theme .v36-youtube-card,.light-theme .v36-community-rail article,.light-theme .v36-supporter-hero,.light-theme .v36-supporter-grid article,.light-theme .v36-today-grid article,.light-theme .v36-tambayan-hub{background-color:#fff;border-color:#d4d9df}.light-theme .v36-tambayan-card{background:#f7f8fa;border-color:#d9dde2}.light-theme .v36-hero-spotlight{background:rgba(255,255,255,.86);border-color:rgba(20,25,30,.12)}.light-theme .v36-hero-spotlight strong{color:#17191d}.light-theme .v36-hero-spotlight small{color:#68707a}.light-theme .v36-hero-spotlight button.v36-support-hero{background:#f0f2f4;color:#17191d;border-color:#d4d9df}
@media(max-width:1240px){.v36-hero-spotlight{width:310px;right:18px}.hero-content{max-width:55%}}
@media(max-width:980px){.v36-community-rail{grid-template-columns:1fr}.v36-live-grid{grid-template-columns:1fr}.v36-tambayan-grid{grid-template-columns:1fr 1fr}.v36-tambayan-card.iba-pa{grid-column:1/-1}.v36-supporter-grid,.v36-today-grid{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.v36-hero-spotlight{position:relative;right:auto;top:auto;transform:none;width:auto;margin:18px 16px 0;grid-template-columns:72px 1fr}.v36-hero-spotlight img{width:72px;height:72px}.hero-content{max-width:none}.v36-tambayan-hub{margin:14px 14px 22px;padding:20px}}
@media(max-width:640px){.v36-tambayan-grid,.v36-supporter-grid,.v36-today-grid{grid-template-columns:1fr}.v36-tambayan-card.iba-pa{grid-column:auto}.v36-tambayan-heading h2{font-size:24px}.v36-tambayan-card{min-height:205px}.v36-supporter-hero,.v36-community-intro{align-items:stretch;flex-direction:column}.v36-community-tabs{margin-inline:-2px}}

/* <<< css/v3.6-community-hero.css */


/* >>> css/v3.6-member-notification-polish.css */
/* SYNTHIQ V3.6 member/notification polish */
.v36-notif-mark{margin-left:auto;border:0;background:transparent;color:var(--accent);font-size:10px;font-weight:800;cursor:pointer;padding:6px 8px;border-radius:8px}.v36-notif-mark:hover{background:var(--s36-panel-soft,var(--surface-2,#292d34))}
.sidebar-right .profile-card{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.sidebar-right .profile-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:0 12px 34px rgba(0,0,0,.16)}
.sidebar-right .quick-links a{border-radius:9px}.sidebar-right .quick-links a:hover{background:var(--surface-2)}
.light-theme .sidebar-right .quick-links a:hover{background:#eef1f4}.light-theme .v36-notif-mark:hover{background:#eef1f4}
@media(max-width:760px){.v36-notification-panel .v36-panel-head{gap:6px}.v36-notif-mark{margin-left:auto}}

/* <<< css/v3.6-member-notification-polish.css */


/* >>> css/v3.6-staging-repairs.css */
/* SYNTHIQ V3.6 staging repairs — QA branch only */
.synthiq-testing-public.light-theme .album-card,.synthiq-testing-public.light-theme .artist-card,.synthiq-testing-public.light-theme .playlist-card{background:#fff!important;border-color:#d5dae0!important;color:#17191d!important;box-shadow:0 8px 24px rgba(25,35,45,.07)!important}.synthiq-testing-public.light-theme .album-card h3,.synthiq-testing-public.light-theme .album-card strong,.synthiq-testing-public.light-theme .artist-card h3,.synthiq-testing-public.light-theme .artist-card strong{color:#17191d!important}.synthiq-testing-public.light-theme .album-card p,.synthiq-testing-public.light-theme .album-card small,.synthiq-testing-public.light-theme .artist-card p,.synthiq-testing-public.light-theme .artist-card small{color:#68707a!important}
.synthiq-testing-public.light-theme .music-manager,.synthiq-testing-public.light-theme .manager-panel,.synthiq-testing-public.light-theme .manager-section,.synthiq-testing-public.light-theme .manager-card,.synthiq-testing-public.light-theme [class*="storage-diagnostic"],.synthiq-testing-public.light-theme [class*="storage-card"],.synthiq-testing-public.light-theme [class*="diagnostic-card"]{background:#fff!important;color:#17191d!important;border-color:#d4d9df!important}.synthiq-testing-public.light-theme .music-manager input,.synthiq-testing-public.light-theme .music-manager select,.synthiq-testing-public.light-theme .music-manager textarea{background:#f7f8fa!important;color:#17191d!important;border-color:#cbd1d8!important}.synthiq-testing-public.light-theme .music-manager small,.synthiq-testing-public.light-theme .music-manager .muted,.synthiq-testing-public.light-theme .music-manager [class*="hint"]{color:#68707a!important}
#genreChips .chip-more[hidden]{display:none!important}.v36-repair-overlay{z-index:16000}.v36-member-posts{display:grid;gap:12px}.v36-community-post{border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--surface)}.v36-community-post>div:first-child{display:flex;justify-content:space-between;gap:12px}.v36-community-post small{display:block;color:var(--text-dim);font-size:9px}.v36-community-post p{color:var(--text);font-size:12px;line-height:1.6}.v36-community-post>div:last-child{display:flex;gap:8px}.v36-thread-post,.v36-thread-replies article{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface)}.v36-thread-post small,.v36-thread-replies small{color:var(--text-dim)}.v36-thread-replies{display:grid;gap:9px;margin:12px 0}.v36-support-card{margin-top:16px;border:1px solid var(--border);border-radius:14px;padding:18px;background:var(--surface)}.v36-support-qr{display:block;width:min(260px,80%);aspect-ratio:1;object-fit:contain;margin:16px auto;border-radius:12px;background:#fff;padding:8px}.light-theme .v36-community-post,.light-theme .v36-thread-post,.light-theme .v36-thread-replies article,.light-theme .v36-support-card{background:#fff;border-color:#d4d9df;color:#17191d}
/* Avoid invisible legacy backdrops becoming click shields after album/queue transitions. */
.album-detail[hidden],.album-detail-backdrop[hidden],.album-detail-overlay[hidden],.manager-backdrop[hidden],.manager-confirm[hidden]{display:none!important;pointer-events:none!important}.album-detail-backdrop:not(.show):not(.open),.album-detail-overlay:not(.show):not(.open){pointer-events:none}

/* Global scrollbar visibility: preserve scrolling, remove visible scrollbar chrome. */
html,body,*{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb,*::-webkit-scrollbar-thumb{background:transparent!important;border:0!important}

/* <<< css/v3.6-staging-repairs.css */


/* >>> css/v3.6-global-theme-contrast.css */
/* SYNTHIQ V3.6 — global contrast treatment for light/dark themes */
:root{--s36-card-bg:#1c2127;--s36-card-bg-soft:#232a32;--s36-card-text:#f7f8fa;--s36-card-dim:#9aa3ad;--s36-card-border:rgba(255,255,255,.10);--s36-art-filter:brightness(.88) saturate(.92);--s36-float-bg:rgba(24,29,35,.94);--s36-float-bg-strong:rgba(18,22,27,.98);--s36-float-border:rgba(255,255,255,.12);--s36-float-shadow:0 26px 70px rgba(0,0,0,.42);--s36-backdrop:rgba(5,8,12,.28);--s36-blur:18px}
.light-theme{--s36-card-bg:#ffffff;--s36-card-bg-soft:#f4f6f8;--s36-card-text:#17191d;--s36-card-dim:#68717b;--s36-card-border:#d6dbe1;--s36-art-filter:brightness(1.06) saturate(.90) contrast(.96);--s36-float-bg:rgba(255,255,255,.94);--s36-float-bg-strong:rgba(250,251,252,.98);--s36-float-border:rgba(31,42,52,.14);--s36-float-shadow:0 24px 62px rgba(37,47,58,.18);--s36-backdrop:rgba(40,49,58,.12);--s36-blur:20px}
.public-card,.album-card,.artist-card,.playlist-card,.browser-stat-card,.v36-community-feed article,.v36-community-rules,.v36-community-intro{background:var(--s36-card-bg)!important;color:var(--s36-card-text)!important;border-color:var(--s36-card-border)!important}
.public-card h3,.public-card strong,.album-card h3,.album-card strong,.artist-card h3,.artist-card strong,.playlist-card h3,.playlist-card strong,.browser-stat-card h3,.browser-stat-card strong{color:var(--s36-card-text)!important}
.public-card p,.public-card small,.album-card p,.album-card small,.artist-card p,.artist-card small,.playlist-card p,.playlist-card small,.browser-stat-card p,.browser-stat-card small{color:var(--s36-card-dim)!important}
.public-card-cover,.album-card .album-cover,.artist-card .artist-cover,.playlist-card .playlist-cover,.v36-hero-spotlight{position:relative;overflow:hidden}
.public-card-cover img,.album-card img,.artist-card img,.playlist-card img,.v36-hero-spotlight img{filter:var(--s36-art-filter);transition:filter .22s ease,opacity .22s ease,transform .22s ease}.public-card:hover img,.album-card:hover img,.artist-card:hover img,.playlist-card:hover img{filter:none;transform:scale(1.015)}
#publicViewContent [class*="card"]{border-color:var(--s36-card-border)}
#publicViewContent [data-pb-genre],#publicViewContent .genre-card{background:var(--s36-card-bg)!important;color:var(--s36-card-text)!important;border:1px solid var(--s36-card-border)!important}#publicViewContent [data-pb-genre] *,#publicViewContent .genre-card *{color:inherit!important}
.music-manager .manager-card,.music-manager [class*="diagnostic"],.music-manager [class*="storage"],.music-manager [class*="panel"],.music-manager [class*="section"]{background:var(--s36-card-bg)!important;color:var(--s36-card-text)!important;border-color:var(--s36-card-border)!important}.music-manager .manager-card p,.music-manager [class*="diagnostic"] p,.music-manager [class*="storage"] p,.music-manager small{color:var(--s36-card-dim)!important}
.light-theme .public-card:hover,.light-theme .album-card:hover,.light-theme .artist-card:hover,.light-theme .playlist-card:hover{background:#fbfcfd!important;border-color:#bcc5ce!important;box-shadow:0 12px 30px rgba(30,40,50,.11)!important}.light-theme .public-card-play,.light-theme .album-play,.light-theme .play-toggle{filter:none!important}
/* One floating-surface language across queue, notifications, menus, search and staging modals. */
#playerQueueDrawer,.v36-notification-panel,.profile-menu,.account-menu,.search-results-popover,.v36-mobile-drawer,.v36-mobile-search,.v36-cc-modal,.manager-confirm,.v36-dev-card,.v36-registration-card,.v36-users-card,.v36-structure-card{background:var(--s36-float-bg)!important;color:var(--s36-card-text)!important;border:1px solid var(--s36-float-border)!important;box-shadow:var(--s36-float-shadow)!important;backdrop-filter:blur(var(--s36-blur)) saturate(135%);-webkit-backdrop-filter:blur(var(--s36-blur)) saturate(135%)}
#playerQueueDrawer .player-queue-head,.v36-notification-panel .v36-panel-head{background:var(--s36-float-bg-strong)!important;border-color:var(--s36-float-border)!important}.player-queue-item,.v36-notification,.v36-cc-modal,.profile-menu a,.account-menu a{color:var(--s36-card-text)!important}.player-queue-item:hover,.profile-menu a:hover,.account-menu a:hover{background:var(--s36-card-bg-soft)!important}.player-queue-copy small,.player-queue-number,.v36-notification small,.v36-cc-note{color:var(--s36-card-dim)!important}
/* Overlays dim just enough to establish depth; the floating panel remains interactive. */
.v36-cc-overlay,.manager-backdrop,.v36-dev-overlay,.v36-registration-overlay,.v36-users-overlay,.v36-structure-overlay{background:var(--s36-backdrop)!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
body.queue-open #playerQueueDrawer{transform:translateY(-2px) scale(1)!important}.player-queue-drawer.open,.v36-notification-panel:not([hidden]),.profile-menu.open,.account-menu.open{filter:none!important}
/* Read notifications visually settle without disappearing from history. */
.v36-notification.is-read{opacity:.56}.v36-notification.is-read .v36-notification-icon{filter:grayscale(.35)}

/* <<< css/v3.6-global-theme-contrast.css */


/* >>> css/v3.6-social-hub.css */
/* SYNTHIQ V3.6 — branded Stay Connected social hub */
.v36-social-links{margin-top:12px;display:grid;gap:10px}.v36-social-row{display:flex;flex-wrap:wrap;gap:8px}.v36-social-btn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;text-decoration:none!important;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 18px rgba(0,0,0,.14);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}.v36-social-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.2);filter:brightness(1.06)}.v36-social-btn svg{width:20px;height:20px}.v36-social-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.v36-social-btn.instagram{color:#fff;background:radial-gradient(circle at 30% 110%,#ffd600 0 15%,#ff7a00 30%,#ff0169 50%,#d300c5 72%,#7638fa 100%)}.v36-social-btn.youtube{color:#fff;background:#ff0000}.v36-social-btn.tiktok{color:#fff;background:#0b0b0c;box-shadow:inset 2px 0 #25f4ee,inset -2px 0 #fe2c55,0 8px 18px rgba(0,0,0,.14)}.v36-social-btn.facebook{color:#fff;background:#1877f2}.v36-social-btn.discord{color:#fff;background:#5865f2}.v36-social-btn.message{color:#fff;background:#15181c}.v36-social-edit{display:inline-flex;align-items:center;gap:6px;width:max-content;border:0;background:transparent;color:var(--accent);font-size:9px;font-weight:900;cursor:pointer;padding:0}.v36-social-edit svg{width:13px;height:13px}.v36-social-empty{font-size:10px;color:var(--text-dim)}.light-theme .v36-social-btn{border-color:rgba(20,25,30,.12);box-shadow:0 8px 18px rgba(25,35,45,.09)}.light-theme .v36-social-btn.message{background:#252a31}.light-theme .v36-social-edit{color:#b86a00}@media(max-width:860px){.v36-social-btn{width:42px;height:42px}}

/* <<< css/v3.6-social-hub.css */


/* >>> css/v3.6-clean-baseline-shell.css */
/* SYNTHIQ V3.6 — clean baseline shell refinements from 2be984 (staging only) */
.sidebar-left{position:sticky;top:70px;align-self:start;max-height:calc(100dvh - 142px);overflow:hidden}
.sidebar-left .premium-card{display:none!important}
.v36-clean-support-card{display:grid;gap:10px}.v36-clean-support-actions{display:grid;gap:8px}.v36-clean-support-actions button{border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);padding:10px 12px;font-weight:800;cursor:pointer}.v36-clean-support-actions button:first-child{background:var(--accent);border-color:var(--accent);color:#17120a}
#v36TambayanHub .v36-tambayan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v36-clean-community-card{min-width:0}
.hero{overflow:hidden}.v36-hero-spotlight{right:22px!important;top:50%!important;transform:translateY(-50%)!important;width:min(330px,35%)!important;max-width:calc(100% - 44px);z-index:3}.hero-content{max-width:54%}.v36-clean-feature-copy{min-width:0}.v36-clean-edit-featured{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important}
.v36-clean-modal{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.68);display:grid;place-items:center;padding:20px}.v36-clean-modal-card{width:min(520px,100%);border:1px solid var(--border);border-radius:18px;background:var(--surface);padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.45)}.v36-clean-modal-head{display:flex;align-items:start;justify-content:space-between;gap:16px}.v36-clean-modal-head span{color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.12em}.v36-clean-modal-head h3{margin:4px 0 18px}.v36-clean-modal-head button{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:10px;padding:8px;cursor:pointer}.v36-clean-modal label{display:grid;gap:7px;font-size:11px;font-weight:800}.v36-clean-modal select{width:100%;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);padding:11px}.v36-clean-modal-actions{display:flex;justify-content:flex-end;margin-top:18px}.v36-clean-modal-actions button{border:0;border-radius:10px;background:var(--accent);color:#17120a;padding:10px 14px;font-weight:900;cursor:pointer}.v36-clean-ok{display:block;margin-top:8px;color:#35c78a}
body[data-clean-view="community"] .sidebar-right,body[data-clean-view="about"] .sidebar-right,body[data-clean-view="status"] .sidebar-right{display:none!important}
body[data-clean-view="community"] #publicViewHost,body[data-clean-view="about"] #publicViewHost,body[data-clean-view="status"] #publicViewHost{grid-column:2 / -1;max-width:none;width:auto;margin:0;padding-top:18px}
body[data-clean-view="status"] #publicViewContent{padding-top:0!important;margin-top:0!important}

@media(max-width:980px){.hero-content{max-width:58%}.v36-hero-spotlight{width:min(300px,38%)!important}.v36-clean-support-card p{display:none}}

/* The previous <=700px block hid both sidebars and the entire Home catalog.
   Portrait ownership now belongs to v3.6-mobile-hero-header-clean.css, so this
   legacy layer only keeps Tambayan-specific compact sizing. */
@media(max-width:700px) and (orientation:portrait){
  #v36TambayanHub{margin-top:10px!important}
  .v36-tambayan-heading h2{font-size:22px!important}
  .v36-tambayan-grid{grid-template-columns:1fr!important}
}

/* <<< css/v3.6-clean-baseline-shell.css */


/* >>> css/v3.6-mobile-hero-header-clean.css */
/* SYNTHIQ V3.6 — universal portrait composition.
   Portrait uses one responsive shell on every device size; landscape restores the full desktop architecture. */
#v36HeroSpotlight,.v36-hero-spotlight{display:none!important}

@media (orientation:portrait){
  :root{--v36-portrait-nav-h:72px}
  body.synthiq-portrait-home .app-shell,
  .app-shell{grid-template-columns:minmax(0,1fr)!important;gap:16px!important;padding:14px!important;padding-bottom:20px!important;max-width:none!important}
  body.synthiq-portrait-home .main-content,.main-content{order:1!important;min-width:0!important;padding:0!important}
  body.synthiq-portrait-home .sidebar-right,.sidebar-right{order:2!important;display:flex!important;position:static!important;top:auto!important;width:100%!important;min-width:0!important;gap:14px!important;margin:0!important}
  .main-content>.profile-card,.main-content>.stats-grid{margin-top:16px!important;margin-bottom:0!important}
  .main-content>.profile-card{cursor:default!important}
  .main-content>.stats-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .profile-card,.side-card,.stat-card{min-width:0!important}

  .v36-portrait-account-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
  .v36-portrait-account-actions button{min-height:48px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);font-weight:800;font-size:13px;padding:10px 12px;display:flex;align-items:center;justify-content:center;gap:8px}
  .v36-portrait-account-actions button:first-child{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));color:var(--accent)}

  .sidebar-right>.side-card{width:100%!important}
  .sidebar-right .quick-links{display:block!important;padding:22px!important}
  .sidebar-right .quick-links>a{min-height:52px!important;margin-top:14px!important;border:1px solid var(--border)!important;border-radius:12px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 14px!important;font-weight:800!important}
  .v36-portrait-about-copy{display:grid!important;gap:7px}
  .v36-portrait-about-copy>span{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--accent)}
  .v36-portrait-about-copy>p{font-size:14px;line-height:1.55;color:var(--text-dim);max-width:62ch}
  .v36-portrait-about-copy>strong{margin-top:5px;font-size:15px}
  .v36-portrait-about-copy>small{color:var(--text-faint);font-size:12px}
  .v36-portrait-about-edit{margin-top:12px;min-height:42px;padding:8px 13px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);font-weight:800;display:inline-flex;align-items:center;gap:7px}

  .filter-row,.section-header,#albumGrid,.album-grid{display:flex}
  .album-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
  .album-card,.public-card{min-width:0!important}
  .album-title,.public-card h3{overflow-wrap:anywhere}

  /* Portrait navigation remains a familiar four-item dock, but it is part of
     normal document flow instead of being pinned to the viewport. */
  body.synthiq-portrait-home .sidebar-left,.sidebar-left{
    order:3!important;
    position:static!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    top:auto!important;
    z-index:auto!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:stretch!important;
    justify-content:space-between!important;
    gap:6px!important;
    min-height:var(--v36-portrait-nav-h)!important;
    padding:7px 12px calc(7px + env(safe-area-inset-bottom))!important;
    border:1px solid var(--border)!important;
    border-radius:14px!important;
    background:var(--surface)!important;
    backdrop-filter:none!important;
    box-shadow:none!important;
    overflow:visible!important;
    max-width:none!important;
    width:100%!important;
    margin:0!important;
    transform:none!important;
  }
  .sidebar-left>.nav-group{display:contents!important}
  .sidebar-left .nav-group-label,.sidebar-left .premium-card{display:none!important}
  .sidebar-left .nav-item{display:none!important}
  .sidebar-left .nav-item[data-view="home"],.sidebar-left .nav-item[data-pb-view="home"],.sidebar-left .nav-item[data-view="albums"],.sidebar-left .nav-item[data-pb-view="albums"]{display:flex!important}
  .v36-portrait-nav-extra{display:contents!important}
  .sidebar-left .v36-portrait-search{display:flex!important}
  .sidebar-left .v36-portrait-more{display:none!important}
  .sidebar-left .nav-item,.v36-portrait-nav-extra .nav-item{flex:1 1 0!important;min-width:48px!important;min-height:48px!important;margin:0!important;padding:7px 6px!important;border:0!important;border-radius:10px!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:3px!important;white-space:nowrap!important;font-size:10px!important;line-height:1.1!important;text-align:center!important}
  .sidebar-left .nav-item svg{width:18px!important;height:18px!important}

  .navbar{padding-left:12px!important;padding-right:12px!important;gap:8px!important}
  .navbar-links{display:none!important}.navbar-search{display:none!important}.navbar-right{margin-left:auto!important;gap:4px!important}
  .v36-mobile-search-btn,.v36-mobile-menu-btn{display:none!important}
}

/* Phone portrait: same navigation architecture, only denser content. */
@media (max-width:700px) and (orientation:portrait){
  :root{--v36-portrait-nav-h:66px}
  .navbar{position:sticky!important;top:0!important;z-index:1000!important;min-height:58px!important;height:auto!important;padding:7px 9px!important;display:flex!important;align-items:center!important;gap:5px!important;overflow:visible!important}
  .navbar-left{display:flex!important;align-items:center!important;min-width:0!important;flex:0 1 auto!important}
  .navbar .logo{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important}.navbar .logo-mark{width:32px!important;height:32px!important;flex:0 0 32px!important}.navbar .logo-word{font-size:15px!important;white-space:nowrap!important}
  .navbar-right{margin-left:auto!important;display:flex!important;align-items:center!important;gap:2px!important;min-width:0!important;overflow:visible!important}
  .navbar-right .icon-btn{display:inline-flex!important;width:32px!important;height:32px!important;min-width:32px!important;padding:0!important}
  #v36MobileMenuBtn,.v36-mobile-menu-btn,.v36-mobile-search-btn{display:none!important}
  #listenNowBtn{display:inline-flex!important;width:36px!important;min-width:36px!important;height:36px!important;padding:0!important;font-size:0!important;border-radius:999px!important}#listenNowBtn svg{width:17px!important;height:17px!important;margin:0!important}
  .navbar-right>.profile-chip{display:flex!important;align-items:center!important;min-height:34px!important;width:42px!important;max-width:42px!important;padding:4px!important;gap:2px!important;overflow:hidden!important;justify-content:center!important}.profile-chip .avatar-sm{width:25px!important;height:25px!important;flex:0 0 25px!important}.profile-chip-text{display:none!important}.profile-chip .chip-chevron{display:block!important;width:12px!important;height:12px!important;flex:0 0 12px!important}

  .hero{min-height:0!important;height:auto!important;padding:18px 16px!important;border-radius:16px!important;overflow:hidden!important}.hero-content{max-width:100%!important;padding:0!important}.hero-eyebrow,.hero-kicker{font-size:10px!important;line-height:1.2!important;margin-bottom:6px!important}.hero-title{font-size:36px!important;line-height:.94!important;max-width:8ch!important;margin:0 0 10px!important}.hero-subtitle{font-size:12px!important;line-height:1.42!important;max-width:31ch!important;margin:0!important}.hero-actions{margin-top:13px!important;gap:8px!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important}.hero-actions .btn{padding:9px 13px!important;font-size:11px!important}.hero-meta{font-size:9px!important;line-height:1.2!important}

  body[data-clean-view="home"] .filter-row,body[data-clean-view="home"] .section-header,body[data-clean-view="home"] #albumGrid,body[data-clean-view="home"] .album-grid{display:flex!important}
  body[data-clean-view="home"] #albumGrid,body[data-clean-view="home"] .album-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .filter-row{display:flex!important}.section-header{display:flex!important}

  .main-content>.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
  .main-content>.stats-grid .stat-card{padding:9px 5px!important;gap:3px!important;text-align:center!important;align-items:center!important;justify-content:center!important;min-height:68px!important}
  .main-content>.stats-grid .stat-card svg{width:15px!important;height:15px!important}.main-content>.stats-grid .stat-card strong{font-size:15px!important;line-height:1!important}.main-content>.stats-grid .stat-card span{font-size:8px!important;line-height:1.1!important}
  .v36-portrait-account-actions{grid-template-columns:1fr!important}

  body.synthiq-portrait-home .app-shell,.app-shell{padding-bottom:16px!important}
  body.synthiq-portrait-home .sidebar-left,.sidebar-left{padding:6px 8px calc(6px + env(safe-area-inset-bottom))!important;min-height:var(--v36-portrait-nav-h)!important}
  .sidebar-left .nav-item,.v36-portrait-nav-extra .nav-item{font-size:9px!important;padding:6px 3px!important}
}

/* Landscape is always the desktop architecture, independent of device class. */
@media (orientation:landscape){
  body .app-shell{display:grid!important;grid-template-columns:clamp(160px,18vw,232px) minmax(220px,1fr) clamp(200px,22vw,280px)!important;gap:clamp(12px,2vw,24px)!important;padding:clamp(12px,2vw,24px)!important;padding-bottom:calc(var(--player-h) + 24px)!important;max-width:1680px!important;margin:0 auto!important}
  body .main-content{order:initial!important;min-width:0!important;padding:0!important}
  body .sidebar-left{display:flex!important;position:sticky!important;left:auto!important;right:auto!important;bottom:auto!important;top:calc(var(--nav-h) + 24px)!important;z-index:auto!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:26px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;backdrop-filter:none!important;overflow:visible!important;max-width:none!important;align-self:start!important}
  body .sidebar-left>.nav-group{display:block!important}body .sidebar-left .nav-group-label{display:block!important}body .sidebar-left .nav-item{display:flex!important;min-height:0!important;margin-bottom:2px!important;padding:10px 12px!important;border-left:3px solid transparent!important;border-radius:var(--radius)!important;flex:none!important;flex-direction:row!important;justify-content:flex-start!important;gap:12px!important;font-size:.87rem!important;text-align:left!important}body .sidebar-left .nav-item.active{border-left-color:var(--accent)!important}
  body .sidebar-right{order:initial!important;display:flex!important;position:static!important;width:auto!important;min-width:0!important;gap:16px!important;margin:0!important;flex-direction:column!important}
  .navbar-links{display:flex!important}.navbar-search{display:flex!important;min-width:0!important}#listenNowBtn{display:inline-flex!important;width:auto!important;min-width:0!important;height:auto!important;padding:10px 18px!important;font-size:.85rem!important}.navbar-right>.profile-chip{display:flex!important;width:auto!important;max-width:none!important;padding:5px 12px 5px 5px!important}.profile-chip-text{display:flex!important}
  .v36-mobile-search-btn,.v36-mobile-menu-btn,.v36-portrait-account-actions,.v36-portrait-about-copy,.v36-portrait-about-edit,.v36-portrait-nav-extra{display:none!important}
  .mini-player{grid-template-columns:280px minmax(0,1fr) 220px!important;grid-template-rows:none!important;height:var(--player-h)!important;padding:0 24px!important;gap:20px!important;bottom:0!important}.mp-right{display:flex!important}
}

/* <<< css/v3.6-mobile-hero-header-clean.css */


/* >>> css/v3.6-recovery-auth.css */
/* SYNTHIQ V3.6 — recovery menu logout only. Floating login/signup control disabled. */
.v36-recovery-auth-fab,#v36RecoveryAuthFab{display:none!important}
.v36-recovery-menu-logout{width:100%;display:flex!important;align-items:center;gap:12px;margin-top:18px;padding:14px 16px!important;border:1px solid rgba(245,166,35,.5)!important;border-radius:12px!important;background:transparent!important;color:inherit!important;font-weight:800!important;text-align:left!important;cursor:pointer!important}
.v36-recovery-menu-logout svg{width:20px;height:20px;color:#f5a623}

/* <<< css/v3.6-recovery-auth.css */


/* >>> css/v3.6-community-expanded.css */
/* SYNTHIQ V3.6 — expanded Community workspace. Community-only; no Home/Status/player changes. */
body.v36-community-expanded {
  overflow: hidden;
}

body.v36-community-expanded #publicViewHost {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1400 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(14px, 2vw, 28px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(12px, 1.6dvh, 20px) !important;
  overflow: hidden !important;
  background: var(--bg, #15191f) !important;
  box-sizing: border-box !important;
}

body.v36-community-expanded #publicViewHost[hidden] {
  display: none !important;
}

body.v36-community-expanded #publicViewHost > .public-view-head,
body.v36-community-expanded #publicViewHost > header,
body.v36-community-expanded #publicViewHeader {
  min-width: 0;
  flex: 0 0 auto;
}

/* The expanded Community owns one large scrollable workspace. Individual tabs no longer
   get squeezed into tiny independent scroll boxes. */
body.v36-community-expanded #publicViewContent {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.v36-community-expanded .v36-community-page,
body.v36-community-expanded .v36-community-v2 {
  width: 100% !important;
  min-height: 100% !important;
  height: auto !important;
  max-width: 1780px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px) !important;
  gap: clamp(18px, 2vw, 30px) !important;
  align-items: start !important;
  overflow: visible !important;
}

body.v36-community-expanded .v36-community-main {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  gap: clamp(14px, 1.7dvh, 20px) !important;
  align-content: start !important;
  overflow: visible !important;
}

body.v36-community-expanded .v36-community-intro {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: end !important;
  padding: clamp(18px, 2.2vw, 28px) !important;
}

body.v36-community-expanded .v36-community-intro h2 {
  margin: 4px 0 8px !important;
  font-size: clamp(28px, 3.2vw, 52px) !important;
  line-height: .98 !important;
}

body.v36-community-expanded .v36-community-intro p {
  max-width: 880px !important;
  margin-bottom: 0 !important;
}

/* Primary Community navigation: never compress the labels. */
body.v36-community-expanded .v36-community-tabs {
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 0 2px 4px !important;
}
body.v36-community-expanded .v36-community-tabs::-webkit-scrollbar { display: none; }
body.v36-community-expanded .v36-community-tabs > button {
  flex: 0 0 auto !important;
  min-height: 44px !important;
  min-width: max-content !important;
  padding-inline: 16px !important;
  white-space: nowrap !important;
}

/* One large active panel at a time. Hidden panels stay out of layout. */
body.v36-community-expanded .v36-community-panel {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}
body.v36-community-expanded .v36-community-panel:not(.active) {
  display: none !important;
}
body.v36-community-expanded .v36-community-panel.active {
  display: block !important;
  width: 100% !important;
}

body.v36-community-expanded .v36-community-feed,
body.v36-community-expanded .v36-live-grid,
body.v36-community-expanded .v36-supporter-hero,
body.v36-community-expanded .v36-today-grid {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Feed uses the main Community page scroll instead of a tiny internal scrollbar. */
body.v36-community-expanded .v36-community-feed {
  display: grid !important;
  gap: 14px !important;
  padding-right: 0 !important;
}

body.v36-community-expanded .v36-live-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: 18px !important;
}

body.v36-community-expanded .v36-live-chat,
body.v36-community-expanded .v36-youtube-card {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

body.v36-community-expanded .v36-youtube-frame {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-height: none !important;
}

body.v36-community-expanded .v36-supporter-hero,
body.v36-community-expanded .v36-today-grid {
  overflow: visible !important;
}

body.v36-community-expanded .v36-community-rules {
  min-width: 0 !important;
  margin: 0 !important;
}

/* Supplemental Community rail is always one readable column on desktop. */
body.v36-community-expanded .v36-community-rail {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: min-content !important;
  align-content: start !important;
  gap: 14px !important;
  overflow: visible !important;
  padding-right: 0 !important;
  position: sticky !important;
  top: 0 !important;
}

body.v36-community-expanded .v36-community-rail > article {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Hide the normal site chrome only while Community is acting as an expanded app surface. */
body.v36-community-expanded .navbar,
body.v36-community-expanded .mini-player {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep Community's own header/back surface visible and compact. */
body.v36-community-expanded #publicViewBackBtn {
  display: inline-flex !important;
}

/* Tablet: keep every Community feature. The supplemental rail stacks beneath the main
   workspace instead of disappearing. */
@media (max-width: 1100px) {
  body.v36-community-expanded #publicViewHost {
    padding: 14px !important;
  }
  body.v36-community-expanded .v36-community-page,
  body.v36-community-expanded .v36-community-v2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.v36-community-expanded .v36-community-rail {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 760px) {
  body.v36-community-expanded .v36-community-rail {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.v36-community-expanded .v36-live-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  body.v36-community-expanded #publicViewHost {
    padding: 10px !important;
    gap: 10px !important;
  }
  body.v36-community-expanded .v36-community-intro {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    padding: 14px !important;
  }
  body.v36-community-expanded .v36-community-intro h2 {
    font-size: clamp(25px, 10vw, 38px) !important;
  }
  body.v36-community-expanded .v36-community-main {
    gap: 12px !important;
  }
  body.v36-community-expanded .v36-community-tabs > button {
    min-height: 48px !important;
  }
}

@media (max-height: 650px) and (min-width: 700px) {
  body.v36-community-expanded #publicViewHost {
    padding-block: 10px !important;
    gap: 8px !important;
  }
  body.v36-community-expanded .v36-community-intro {
    padding: 12px 16px !important;
  }
  body.v36-community-expanded .v36-community-intro h2 {
    font-size: clamp(24px, 3vw, 36px) !important;
  }
  body.v36-community-expanded .v36-community-intro p {
    display: block !important;
  }
}

/* <<< css/v3.6-community-expanded.css */


/* >>> css/v3.6-community-workspace-polish.css */
/* SYNTHIQ V3.6 — Community discussion-first presentation. */
body.v36-community-expanded .v36-community-page,
body.v36-community-expanded .v36-community-v2{display:block!important;width:100%!important;max-width:1500px!important;margin:0 auto!important}
body.v36-community-expanded .v36-community-main{display:block!important;width:100%!important}
body.v36-community-expanded .v36-community-tabs{position:sticky!important;top:0!important;z-index:6!important;display:flex!important;flex-wrap:nowrap!important;gap:8px!important;margin:0 0 14px!important;padding:8px 0 10px!important;overflow-x:auto!important;overflow-y:hidden!important;background:var(--bg,#15191f)!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch}
body.v36-community-expanded .v36-community-tabs::-webkit-scrollbar{display:none!important}
body.v36-community-expanded .v36-community-tabs>button{flex:0 0 auto!important;min-height:48px!important;min-width:max-content!important;padding:0 18px!important;white-space:nowrap!important}
body.v36-community-expanded .v36-feed-head{display:flex!important;align-items:end!important;justify-content:space-between!important;gap:18px!important;padding:18px 20px!important;margin-bottom:16px!important;border:1px solid var(--border,#39414b)!important;border-radius:18px!important;background:rgba(255,255,255,.025)!important}
body.v36-community-expanded .v36-feed-head h3{margin:2px 0 4px!important;font-size:clamp(25px,2.2vw,34px)!important}
body.v36-community-expanded .v36-feed-head p{margin:0!important;opacity:.78!important}
body.v36-community-expanded [data-community-panel="feed"]{min-height:70dvh!important}
body.v36-community-expanded .v36-member-posts{display:grid!important;gap:16px!important}
body.v36-community-expanded .v36-member-posts>.v36-community-post{padding:clamp(18px,2vw,26px)!important;border:1px solid var(--border,#39414b)!important;border-radius:18px!important;background:rgba(255,255,255,.018)!important;cursor:pointer!important;transition:border-color .16s ease,background .16s ease!important}
body.v36-community-expanded .v36-member-posts>.v36-community-post:hover,body.v36-community-expanded .v36-member-posts>.v36-community-post:focus-visible{border-color:var(--accent,#f6a12a)!important;background:rgba(255,255,255,.035)!important;outline:none!important}
body.v36-community-expanded .v36-community-post-head{display:flex!important;justify-content:space-between!important;gap:12px!important}
body.v36-community-expanded .v36-community-post-head strong{display:block!important;font-size:clamp(18px,1.4vw,23px)!important}
body.v36-community-expanded .v36-community-post-head small{display:block!important;margin-top:3px!important;opacity:.66!important}
body.v36-community-expanded .v36-member-posts>.v36-community-post>p{font-size:clamp(15px,1.1vw,17px)!important;line-height:1.6!important;white-space:pre-wrap!important}
body.v36-community-expanded .v36-community-post-actions{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:8px!important;margin-top:14px!important}
body.v36-community-expanded .v36-delete-post,[data-delete-comment]{border-color:rgba(255,90,90,.35)!important}
body.v36-community-expanded .v36-feed-latest-reply{display:grid!important;gap:3px!important;margin-top:14px!important;padding:12px 14px!important;border-left:3px solid var(--accent,#f6a12a)!important;border-radius:10px!important;background:rgba(255,255,255,.025)!important}
body.v36-community-expanded .v36-feed-latest-reply span{opacity:.82!important}
.v36-community-images{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;gap:9px!important;margin-top:14px!important}
.v36-community-images a{display:block!important;overflow:hidden!important;border-radius:14px!important;border:1px solid var(--border,#39414b)!important;background:#0f1216!important}
.v36-community-images img{display:block!important;width:100%!important;max-height:420px!important;object-fit:cover!important}
.v36-reaction-summary{display:flex!important;align-items:center!important;gap:8px!important;margin-left:auto!important;flex-wrap:wrap!important;font-size:13px!important;opacity:.9!important}
.v36-reaction-picker{display:flex!important;gap:6px!important;flex-wrap:wrap!important;margin-top:10px!important}
.v36-reaction-picker button{min-width:38px!important;min-height:34px!important;padding:4px 8px!important;border:1px solid var(--border,#39414b)!important;border-radius:999px!important;background:rgba(255,255,255,.025)!important;cursor:pointer!important;font-size:17px!important}
.v36-reaction-picker button:hover{border-color:var(--accent,#f6a12a)!important;background:rgba(246,161,42,.1)!important}
.v36-community-thread-modal{width:min(980px,calc(100vw - 28px))!important;max-height:min(86dvh,900px)!important;overflow:auto!important}
.v36-thread-post,.v36-thread-comment{padding:16px!important;border:1px solid var(--border,#39414b)!important;border-radius:14px!important;background:rgba(255,255,255,.018)!important}
.v36-thread-post>p,.v36-thread-comment>p{white-space:pre-wrap!important;line-height:1.55!important}
.v36-thread-replies{display:grid!important;gap:12px!important;margin-top:14px!important}
.v36-comment-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:8px!important}
.v36-comment-head small{opacity:.62!important}
.v36-comment-actions{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;margin-top:10px!important}
.v36-comment-children{display:grid!important;gap:10px!important;margin:12px 0 0 28px!important;padding-left:12px!important;border-left:2px solid rgba(246,161,42,.28)!important}
.v36-thread-meta{display:flex!important;justify-content:space-between!important;gap:12px!important;align-items:center!important;margin-top:10px!important;font-size:13px!important;opacity:.78!important}
.v36-thread-replybox{display:grid!important;grid-template-columns:1fr auto!important;gap:10px!important;align-items:end!important;margin-top:16px!important;padding-top:16px!important;border-top:1px solid var(--border,#39414b)!important}
.v36-thread-replybox>label:first-child{grid-column:1/-1!important;display:grid!important;gap:6px!important;font-weight:700!important}
.v36-thread-replybox textarea{min-height:96px!important;width:100%!important}
.v36-inline-photo,.v36-photo-field{display:grid!important;gap:5px!important;font-size:13px!important;opacity:.9!important}
body.v36-community-expanded .v36-community-empty{display:grid!important;gap:4px!important;place-items:center!important;min-height:220px!important;padding:28px!important;text-align:center!important;border:1px dashed var(--border,#39414b)!important;border-radius:18px!important;opacity:.8!important}
body.v36-community-expanded .v36-youtube-card [data-edit-youtube-lounge]{width:100%!important;margin-top:8px!important}
@media(max-width:640px){body.v36-community-expanded .v36-feed-head{align-items:stretch!important;flex-direction:column!important}body.v36-community-expanded .v36-feed-head .btn{width:100%!important;min-height:48px!important}body.v36-community-expanded [data-community-panel="feed"]{min-height:75dvh!important}.v36-comment-children{margin-left:10px!important;padding-left:8px!important}.v36-thread-replybox{grid-template-columns:1fr!important}.v36-reaction-summary{margin-left:0!important;width:100%!important}.v36-community-images{grid-template-columns:1fr!important}}

/* <<< css/v3.6-community-workspace-polish.css */


/* >>> css/v3.6-community-thread-refine.css */
/* SYNTHIQ V3.6 — Community thread/editor refinement. */
#v36DiscussionThread .v36-community-thread-modal,
#v36DiscussionComposer .v36-community-thread-modal,
#v36DiscussionEditMedia .v36-community-thread-modal {
  width: min(940px, calc(100vw - 32px)) !important;
  max-width: 940px !important;
  max-height: min(88dvh, 900px) !important;
  overflow: auto !important;
}

#v36DiscussionThread .v36-thread-replybox {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px 16px !important;
  align-items: end !important;
  width: 100% !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--border, #39414b) !important;
}

#v36DiscussionThread .v36-thread-replybox > label:first-child {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 8px !important;
  width: 100% !important;
  font-weight: 700 !important;
}

#v36DiscussionThread .v36-thread-replybox textarea {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 150px !important;
  resize: vertical !important;
  padding: 14px 16px !important;
  border: 1px solid var(--border, #39414b) !important;
  border-radius: 12px !important;
  background: var(--surface, #1d2229) !important;
  color: var(--text, #f4f5f7) !important;
  font: inherit !important;
  line-height: 1.5 !important;
}

#v36DiscussionThread .v36-thread-replybox .v36-inline-photo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#v36DiscussionThread .v36-thread-replybox [data-send-reply] {
  min-width: 110px !important;
  min-height: 48px !important;
  justify-self: end !important;
}

.v36-edit-existing-media {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 8px !important;
}

.v36-edit-existing-media figure {
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid var(--border, #39414b) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.025) !important;
}

.v36-edit-existing-media img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

.v36-edit-existing-media figcaption {
  margin-top: 6px !important;
  font-size: 12px !important;
  opacity: .72 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  #v36DiscussionThread .v36-community-thread-modal,
  #v36DiscussionEditMedia .v36-community-thread-modal {
    width: calc(100vw - 18px) !important;
    max-height: 92dvh !important;
  }
  #v36DiscussionThread .v36-thread-replybox {
    grid-template-columns: 1fr !important;
  }
  #v36DiscussionThread .v36-thread-replybox .v36-inline-photo,
  #v36DiscussionThread .v36-thread-replybox [data-send-reply] {
    grid-column: 1 !important;
    width: 100% !important;
  }
  #v36DiscussionThread .v36-thread-replybox [data-send-reply] {
    justify-self: stretch !important;
  }
}
/* <<< css/v3.6-community-thread-refine.css */


/* >>> css/v3.6-ios-theme-polish.css */
/* SYNTHIQ V3.6 — iPhone standalone + dark-theme comfort patch */
/* Dark stays recognizably dark, but avoids near-black large surfaces. */
.synthiq-testing-public:not(.light-theme){
  --bg:#20252b;
  --surface:#292f36;
  --surface-2:#333a43;
  --border:#4a525d;
  --text:#f6f7f8;
  --text-dim:#c7ccd2;
  --text-faint:#979fa9;
  background:#20252b;
}
.synthiq-testing-public:not(.light-theme) .navbar{background:rgba(32,37,43,.985);border-bottom-color:#454c56}
.synthiq-testing-public:not(.light-theme) .app-shell{background:linear-gradient(180deg,#272d34 0%,#20252b 100%)}
.synthiq-testing-public:not(.light-theme) .main-content,
.synthiq-testing-public:not(.light-theme) .public-view-host{background:#232930}
.synthiq-testing-public:not(.light-theme) .profile-card,
.synthiq-testing-public:not(.light-theme) .side-card,
.synthiq-testing-public:not(.light-theme) .stat-card{background:#2b323a;border-color:#454d57}
.synthiq-testing-public:not(.light-theme) .mini-player{background:rgba(35,41,48,.985);border-top-color:#48505a}
.expanded-player,.v36-now-playing-view{isolation:isolate;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.synthiq-testing-public:not(.light-theme) .expanded-player{background:#20252b}
.synthiq-testing-public:not(.light-theme) .expanded-player-bg{opacity:.42;filter:blur(34px) saturate(.95) brightness(.78)}
.synthiq-testing-public:not(.light-theme) .expanded-player::after{background:linear-gradient(180deg,rgba(32,37,43,.32),rgba(32,37,43,.88) 58%,#20252b 100%)}
@media (display-mode:standalone){
  html,body{background:var(--bg)!important}
  .navbar{top:0!important;height:auto!important;min-height:calc(58px + env(safe-area-inset-top))!important;padding-top:calc(7px + env(safe-area-inset-top))!important;padding-right:max(9px,env(safe-area-inset-right))!important;padding-bottom:7px!important;padding-left:max(9px,env(safe-area-inset-left))!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--surface)!important;z-index:2100!important}
  .app-shell{padding-top:14px!important}
  .expanded-player-shell{padding-top:calc(14px + env(safe-area-inset-top))!important;padding-right:calc(14px + env(safe-area-inset-right))!important;padding-bottom:calc(14px + env(safe-area-inset-bottom))!important;padding-left:calc(14px + env(safe-area-inset-left))!important}
  .expanded-player-topbar{position:relative!important;z-index:20!important;min-height:50px!important}
  .expanded-player-close,#expandedPlayerClose{position:relative!important;top:auto!important;right:auto!important;margin-left:auto!important;z-index:30!important;pointer-events:auto!important}
  .album-detail-close{top:calc(12px + env(safe-area-inset-top))!important;right:calc(12px + env(safe-area-inset-right))!important}
  #closeSearchResults{top:calc(8px + env(safe-area-inset-top))!important;right:calc(8px + env(safe-area-inset-right))!important}
  #musicManager .manager-header{padding-top:calc(12px + env(safe-area-inset-top))!important}
  #closeManagerBtn{top:calc(12px + env(safe-area-inset-top))!important;right:calc(12px + env(safe-area-inset-right))!important}
}
@media (max-width:700px) and (orientation:portrait){
  .expanded-player{height:100dvh!important;min-height:100dvh!important}
  .expanded-player-shell{height:100dvh!important;min-height:0!important}
  .expanded-player-main{min-height:0!important}
}

/* <<< css/v3.6-ios-theme-polish.css */


/* >>> css/v3.6-layout-state-hardening.css */
/* SYNTHIQ V3.6 — layout-state hardening for floating player and full-screen shells */

/* Full-screen Now Playing owns the viewport while open. Keep global chrome from
   covering its close control, and keep the player above every normal app shell. */
body.expanded-player-open .expanded-player{
  z-index:2300!important;
}
body.expanded-player-open #expandedPlayerClose,
body.expanded-player-open .expanded-player-close{
  position:relative!important;
  z-index:2320!important;
  pointer-events:auto!important;
}

@media (max-width:899px), (orientation:portrait){
  body.expanded-player-open .navbar{
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* Defensive fallback: if a stale floating class survives a route/orientation
     transition before JS normalizes it, restore normal full-width player geometry
     instead of allowing a narrow right-edge floating pill. */
  .mini-player.floating,
  .mini-player.v36-floating-player{
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    border-radius:0!important;
    transform:none!important;
  }

  .mini-player.floating::before,
  .mini-player.v36-floating-player::before{
    content:none!important;
    display:none!important;
  }
}

/* Installed/notched devices: keep the expanded close target wholly within the
   usable safe area even after rotation. */
@media (display-mode:standalone){
  body.expanded-player-open .expanded-player-topbar{
    padding-top:max(0px,env(safe-area-inset-top))!important;
    padding-right:max(0px,env(safe-area-inset-right))!important;
    padding-left:max(0px,env(safe-area-inset-left))!important;
  }
}

/* <<< css/v3.6-layout-state-hardening.css */


/* >>> css/v3.6-compact-workspace-flow.css */
/* SYNTHIQ V3.6 — compact Community/Home flow + non-sticky navigation/player overrides. */

/* Desktop/landscape Now Playing belongs to document flow, not the viewport. */
.mini-player{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  z-index:20!important;
}
@media (min-width:861px){
  .app-shell{padding-bottom:24px!important}
  .player-queue-drawer{bottom:18px!important}
  .player-capability-toast{bottom:22px!important}
}
@media (orientation:landscape){
  body .app-shell{padding-bottom:24px!important}
  body .mini-player{position:relative!important;bottom:auto!important;left:auto!important;right:auto!important}
}

/* Portrait Home / Now Playing / Albums / Search stays visible as navigation,
   but scrolls with the page instead of being pinned to the viewport. */
@media (orientation:portrait){
  body .app-shell{padding-bottom:18px!important}
  body.synthiq-portrait-home .sidebar-left,
  body .sidebar-left{
    order:3!important;
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    z-index:auto!important;
    width:100%!important;
    margin:0!important;
    border:1px solid var(--border)!important;
    border-radius:14px!important;
  }
}

/* Community is an in-page workspace. It no longer takes over the viewport. */
body.v36-community-expanded{
  overflow:auto!important;
}
body.v36-community-expanded .app-shell{
  grid-template-columns:minmax(0,1fr)!important;
  gap:0!important;
  max-width:1680px!important;
  padding:14px clamp(12px,2vw,24px) 22px!important;
}
body.v36-community-expanded .main-content,
body.v36-community-expanded .sidebar-left,
body.v36-community-expanded .sidebar-right{
  display:none!important;
}
body.v36-community-expanded .navbar,
body.v36-community-expanded .mini-player{
  visibility:visible!important;
  pointer-events:auto!important;
}
body.v36-community-expanded #publicViewHost{
  position:relative!important;
  inset:auto!important;
  grid-column:1/-1!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-width:1280px!important;
  margin:0 auto!important;
  padding:0!important;
  display:block!important;
  overflow:visible!important;
  background:transparent!important;
  z-index:auto!important;
}
body.v36-community-expanded #publicViewContent{
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  scrollbar-gutter:auto!important;
}
body.v36-community-expanded .public-view-toolbar{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  margin:0 0 10px!important;
  padding:8px 2px 10px!important;
  border-bottom:1px solid var(--border)!important;
}
body.v36-community-expanded .public-view-toolbar h1{
  margin:1px 0 2px!important;
  font-size:clamp(25px,3vw,34px)!important;
  line-height:1!important;
}
body.v36-community-expanded .public-view-toolbar p{
  margin:0!important;
  max-width:70ch!important;
  font-size:10px!important;
  line-height:1.35!important;
}
body.v36-community-expanded .public-view-kicker{
  font-size:8px!important;
}
body.v36-community-expanded #publicViewBackBtn{
  display:inline-flex!important;
  min-height:38px!important;
  padding:7px 10px!important;
  align-self:center!important;
}
body.v36-community-expanded .v36-community-page,
body.v36-community-expanded .v36-community-v2{
  display:block!important;
  width:100%!important;
  min-height:0!important;
  max-width:1180px!important;
  margin:0 auto!important;
}
body.v36-community-expanded .v36-community-main{
  display:grid!important;
  grid-template-rows:auto auto auto!important;
  gap:10px!important;
  min-height:0!important;
}
body.v36-community-expanded .v36-community-intro,
body.v36-community-expanded .v36-community-rail,
body.v36-community-expanded [data-community-tab="today"],
body.v36-community-expanded [data-community-panel="today"],
body.v36-community-expanded .v36-live-chat{
  display:none!important;
}
body.v36-community-expanded .v36-community-tabs{
  position:static!important;
  top:auto!important;
  z-index:auto!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:7px!important;
  margin:0 0 10px!important;
  padding:0 0 2px!important;
  background:transparent!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
}
body.v36-community-expanded .v36-community-tabs::-webkit-scrollbar{display:none!important}
body.v36-community-expanded .v36-community-tabs>button{
  min-height:38px!important;
  padding:7px 13px!important;
  font-size:9px!important;
}
body.v36-community-expanded .v36-community-panel{
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
}
body.v36-community-expanded [data-community-panel="feed"]{
  min-height:0!important;
}
body.v36-community-expanded .v36-feed-head{
  align-items:center!important;
  margin:0 0 10px!important;
  padding:13px 15px!important;
  border-radius:14px!important;
}
body.v36-community-expanded .v36-feed-head h3{
  margin:1px 0 3px!important;
  font-size:clamp(21px,2.2vw,28px)!important;
}
body.v36-community-expanded .v36-feed-head p{
  font-size:10px!important;
}
body.v36-community-expanded .v36-member-posts{
  gap:11px!important;
}
body.v36-community-expanded .v36-member-posts>.v36-community-post{
  padding:15px!important;
  border-radius:14px!important;
}
body.v36-community-expanded .v36-live-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
  max-width:760px!important;
  margin:0 auto!important;
  gap:10px!important;
}
body.v36-community-expanded .v36-youtube-card{
  width:100%!important;
  padding:14px!important;
  gap:10px!important;
}
body.v36-community-expanded .v36-youtube-card h3{
  margin:2px 0 4px!important;
}
body.v36-community-expanded .v36-youtube-card p{
  margin:0!important;
  font-size:10px!important;
  line-height:1.4!important;
}
body.v36-community-expanded .v36-youtube-frame{
  width:min(100%,620px)!important;
  margin:0 auto!important;
}
body.v36-community-expanded .v36-community-rules{
  margin-top:2px!important;
  padding:11px 13px!important;
  font-size:10px!important;
}

/* Home hub: exactly two useful destinations in one compact row. */
.v36-tambayan-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.v36-tambayan-card.iba-pa{
  display:none!important;
}
.v36-tambayan-card{
  min-height:190px!important;
  padding:18px 16px!important;
}
.v36-tambayan-card>svg{
  width:32px!important;
  height:32px!important;
  padding:8px!important;
}
.v36-tambayan-card h3{
  margin:8px 0 4px!important;
  font-size:17px!important;
}
.v36-tambayan-card p{
  margin:6px auto 12px!important;
}

@media (max-width:860px){
  body.v36-community-expanded .app-shell{padding:10px 12px 18px!important}
  body.v36-community-expanded .public-view-toolbar{grid-template-columns:auto minmax(0,1fr)!important}
  body.v36-community-expanded #publicViewActions{grid-column:1/-1!important}
  .v36-tambayan-hub{margin:12px 12px 18px!important;padding:15px!important}
  .v36-tambayan-heading{margin-bottom:12px!important}
  .v36-tambayan-heading h2{font-size:23px!important}
  .v36-tambayan-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .v36-tambayan-card{min-height:176px!important;padding:14px 10px!important}
  .v36-tambayan-card>svg{width:27px!important;height:27px!important;padding:7px!important}
  .v36-tambayan-card h3{font-size:15px!important}
  .v36-tambayan-card strong{font-size:10px!important;line-height:1.25!important}
  .v36-tambayan-card p{font-size:9px!important;line-height:1.4!important;margin:5px auto 9px!important}
  .v36-tambayan-card button{min-height:34px!important;font-size:9px!important}
}

@media (max-width:520px){
  body.v36-community-expanded .public-view-toolbar h1{font-size:24px!important}
  body.v36-community-expanded .public-view-toolbar p{font-size:9px!important}
  body.v36-community-expanded .v36-feed-head{align-items:stretch!important;flex-direction:column!important}
  body.v36-community-expanded .v36-feed-head .btn{width:100%!important;min-height:40px!important}
  .v36-tambayan-hub{padding:12px!important}
  .v36-tambayan-heading h2{font-size:20px!important}
  .v36-tambayan-heading p{font-size:10px!important}
  .v36-tambayan-grid{gap:7px!important}
  .v36-tambayan-card{min-height:168px!important;padding:12px 8px!important;border-radius:14px!important}
  .v36-tambayan-card h3{font-size:14px!important}
  .v36-tambayan-card strong{font-size:9px!important}
  .v36-tambayan-card p{font-size:8.5px!important}
}

/* <<< css/v3.6-compact-workspace-flow.css */


/* >>> css/v3.6-portrait-bottom-nav-fixed.css */
/* SYNTHIQ V3.6 — fixed bottom surfaces with reserved content clearance.
   Portrait uses a true edge-to-edge app navigation bar.
   Desktop/landscape keeps the shared Now Playing mini-player docked to the viewport. */

@media (orientation:portrait){
  :root{--v36-portrait-nav-h:72px}

  body .app-shell,
  body.v36-community-expanded .app-shell,
  body.v36-synthiq-music-view .app-shell{
    padding-bottom:calc(var(--v36-portrait-nav-h,72px) + env(safe-area-inset-bottom) + 28px)!important;
  }

  /* Home's final Quick Links/About Synthiq card is a separate sidebar flex item.
     Give that real scroll-flow clearance of its own so the fixed app bar can never
     cover the final About Synthiq action, regardless of outer-shell sizing. */
  body.synthiq-portrait-home .sidebar-right,
  body[data-clean-view="home"] .sidebar-right{
    box-sizing:border-box!important;
    padding-bottom:calc(var(--v36-portrait-nav-h,72px) + env(safe-area-inset-bottom) + 40px)!important;
    scroll-padding-bottom:calc(var(--v36-portrait-nav-h,72px) + env(safe-area-inset-bottom) + 40px)!important;
  }
  body.synthiq-portrait-home .sidebar-right .quick-links,
  body[data-clean-view="home"] .sidebar-right .quick-links{
    scroll-margin-bottom:calc(var(--v36-portrait-nav-h,72px) + env(safe-area-inset-bottom) + 40px)!important;
  }

  /* Public-view pages such as About live outside parts of the normal home flow.
     Reserve clearance both on the host and inside the actual About content so the
     last card/footer can always scroll completely above the fixed navigation. */
  body #publicViewHost:not([hidden]){
    box-sizing:border-box!important;
    padding-bottom:calc(var(--v36-portrait-nav-h,72px) + env(safe-area-inset-bottom) + 40px)!important;
  }
  body #publicViewContent{
    box-sizing:border-box!important;
    scroll-padding-bottom:calc(var(--v36-portrait-nav-h,72px) + env(safe-area-inset-bottom) + 44px)!important;
  }
  body .v36-about-story{
    margin-bottom:0!important;
  }
  body .v36-about-story::after{
    content:"";
    display:block;
    width:100%;
    height:calc(var(--v36-portrait-nav-h,72px) + env(safe-area-inset-bottom) + 44px);
    flex:0 0 calc(var(--v36-portrait-nav-h,72px) + env(safe-area-inset-bottom) + 44px);
    pointer-events:none;
  }

  /* True app bottom navigation: no floating-card gap, rounded shell, or lifted shadow. */
  body .sidebar-left,
  body.synthiq-portrait-home .sidebar-left,
  body.v36-community-expanded .sidebar-left,
  body.v36-synthiq-music-view .sidebar-left{
    display:flex!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
    z-index:1700!important;
    border:0!important;
    border-top:1px solid var(--border)!important;
    border-radius:0!important;
    background:var(--surface)!important;
    box-shadow:0 -1px 0 rgba(255,255,255,.02),0 -8px 24px rgba(0,0,0,.12)!important;
    backdrop-filter:none!important;
    overflow:visible!important;
  }

  body.expanded-player-open .sidebar-left{
    display:flex!important;
    z-index:1700!important;
  }
}

/* Restore the original desktop/landscape player contract. A later compact-layout
   layer had changed .mini-player to position:relative; this override intentionally
   returns it to the always-reachable bottom dock used by the base SYNTHIQ player. */
@media (orientation:landscape){
  body .mini-player{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    z-index:1000!important;
  }
  body .app-shell{
    padding-bottom:calc(var(--player-h,84px) + 24px)!important;
  }
  body #publicViewHost:not([hidden]){
    box-sizing:border-box!important;
    padding-bottom:calc(var(--player-h,84px) + 32px)!important;
  }
  body .v36-about-story::after{
    content:"";
    display:block;
    width:100%;
    height:calc(var(--player-h,84px) + 30px);
    flex:0 0 calc(var(--player-h,84px) + 30px);
    pointer-events:none;
  }
  body .player-queue-drawer{
    bottom:calc(var(--player-h,84px) + 14px)!important;
  }
  body .player-capability-toast{
    bottom:calc(var(--player-h,84px) + 22px)!important;
  }
}

/* <<< css/v3.6-portrait-bottom-nav-fixed.css */


/* >>> css/v3.6-responsive-ui-audit.css */
/* SYNTHIQ V3.6 — staging responsive UI audit / hardening
   Presentation only. Keeps HOME-specific controls untouched. */

/* ---------- Shared geometry ---------- */
:root{
  --v36-close-box:42px;
  --v36-close-glyph:18px;
  --v36-shell-left:220px;
  --v36-shell-right:260px;
  --v36-shell-gap:22px;
}
html,body{max-width:100%;overflow-x:clip}
.app-shell,.main-content,#publicViewHost,#publicViewContent{min-width:0}
.sidebar-left,.sidebar-right{min-width:0;max-width:100%}

/* ---------- Non-HOME close controls ----------
   Override the older 54px global close contract only inside known secondary/admin surfaces. */
#musicManager #closeManagerBtn,
#v36UsersOverlay button[aria-label="Close"],
#v36DevelopmentOverlay button[aria-label="Close"],
#v36RegistrationOverlay button[aria-label="Close"],
#v36StructureOverlay button[aria-label="Close"],
#v36MilestoneOverlay button[aria-label="Close"],
#v36SocialStandaloneOverlay button[aria-label="Close"],
#v36ToolkitStandaloneOverlay button[aria-label="Close"],
#v36ContentEditor button[aria-label="Close"],
#v36Membership button[aria-label="Close"],
#v36Community button[aria-label="Close"],
#listenerAuthModal button[aria-label="Close"],
.album-detail .album-detail-close,
.search-results-popover #closeSearchResults,
.expanded-player #expandedPlayerClose,
.expanded-player .expanded-player-close{
  width:var(--v36-close-box)!important;
  height:var(--v36-close-box)!important;
  min-width:var(--v36-close-box)!important;
  min-height:var(--v36-close-box)!important;
  padding:0!important;
  border-width:1px!important;
  border-radius:11px!important;
  font-size:20px!important;
  line-height:1!important;
  box-shadow:0 4px 14px rgba(0,0,0,.28)!important;
  flex:0 0 var(--v36-close-box)!important;
}
#musicManager #closeManagerBtn svg,
#v36UsersOverlay button[aria-label="Close"] svg,
#v36DevelopmentOverlay button[aria-label="Close"] svg,
#v36RegistrationOverlay button[aria-label="Close"] svg,
#v36StructureOverlay button[aria-label="Close"] svg,
#v36MilestoneOverlay button[aria-label="Close"] svg,
#v36SocialStandaloneOverlay button[aria-label="Close"] svg,
#v36ToolkitStandaloneOverlay button[aria-label="Close"] svg,
#v36ContentEditor button[aria-label="Close"] svg,
#v36Membership button[aria-label="Close"] svg,
#v36Community button[aria-label="Close"] svg,
#listenerAuthModal button[aria-label="Close"] svg,
.album-detail .album-detail-close svg,
.search-results-popover #closeSearchResults svg,
.expanded-player #expandedPlayerClose svg,
.expanded-player .expanded-player-close svg{
  width:var(--v36-close-glyph)!important;
  height:var(--v36-close-glyph)!important;
  stroke-width:2.2!important;
}

/* predictable top-right placement; safe-area aware after rotation/notches */
#musicManager .manager-header{padding-right:58px!important;min-height:62px!important}
#musicManager #closeManagerBtn{
  top:max(10px,env(safe-area-inset-top))!important;
  right:max(10px,env(safe-area-inset-right))!important;
}
.album-detail .album-detail-close{
  top:max(12px,env(safe-area-inset-top))!important;
  right:max(12px,env(safe-area-inset-right))!important;
}
.search-results-popover .search-results-head{position:relative!important;padding-right:52px!important;min-height:46px!important}
.search-results-popover #closeSearchResults{top:2px!important;right:2px!important}

/* Dynamic V3.6 overlay headers: reserve only the space actually required by the smaller close target. */
#v36UsersOverlay .v36-users-head,
#v36DevelopmentOverlay [class*="head"],
#v36RegistrationOverlay [class*="head"],
#v36StructureOverlay [class*="head"],
#v36MilestoneOverlay [class*="head"],
#v36SocialStandaloneOverlay [class*="head"],
#v36ToolkitStandaloneOverlay [class*="head"]{
  position:relative!important;
  padding-right:54px!important;
}

/* ---------- Desktop shell ---------- */
@media (min-width:1181px) and (min-height:680px){
  .app-shell{
    grid-template-columns:minmax(190px,var(--v36-shell-left)) minmax(0,1fr) minmax(230px,var(--v36-shell-right))!important;
    gap:var(--v36-shell-gap)!important;
  }
  .sidebar-left{width:auto!important;overflow:auto!important;overscroll-behavior:contain}
  .sidebar-right{display:flex!important;width:auto!important}
  #publicViewHost:not([data-shell-independent]){
    margin-left:var(--v36-shell-left);
    margin-right:var(--v36-shell-right);
  }
  body[data-clean-view="community"] #publicViewHost,
  body[data-clean-view="about"] #publicViewHost,
  body[data-clean-view="status"] #publicViewHost{
    margin-left:0!important;margin-right:0!important;
  }
}

/* ---------- Medium / tablet / short desktop ----------
   Right rail is removed before it can squeeze or overlap the main workspace. */
@media (min-width:861px) and (max-width:1180px),
       (min-width:861px) and (max-height:679px){
  :root{--v36-shell-left:190px;--v36-shell-right:0px;--v36-shell-gap:18px}
  .app-shell{
    grid-template-columns:minmax(170px,var(--v36-shell-left)) minmax(0,1fr)!important;
    gap:var(--v36-shell-gap)!important;
  }
  .sidebar-right{display:none!important}
  .sidebar-left{
    position:sticky!important;
    top:calc(var(--nav-h,72px) + 12px)!important;
    max-height:calc(100dvh - var(--nav-h,72px) - 24px)!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
  }
  #publicViewHost:not([data-shell-independent]){
    margin-left:var(--v36-shell-left)!important;
    margin-right:0!important;
  }
  body[data-clean-view="community"] #publicViewHost,
  body[data-clean-view="about"] #publicViewHost,
  body[data-clean-view="status"] #publicViewHost{
    margin-left:0!important;
  }
}

/* ---------- Compact phones / narrow tablets ---------- */
@media (max-width:860px){
  :root{--v36-shell-left:0px;--v36-shell-right:0px;--v36-shell-gap:12px}
  .app-shell{
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
  }
  .sidebar-right{display:none!important}
  .sidebar-left{
    position:static!important;
    top:auto!important;
    max-height:none!important;
    width:100%!important;
    overflow:visible!important;
  }
  #publicViewHost{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
  }
}

/* ---------- Low-height landscape devices ----------
   Width can resemble a tablet/desktop after rotation; height keeps the layout compact. */
@media (orientation:landscape) and (max-height:560px){
  .navbar{min-height:56px;height:auto!important;padding-top:max(6px,env(safe-area-inset-top))!important}
  .app-shell{padding-top:12px!important;padding-bottom:12px!important}
  .sidebar-right{display:none!important}
  .sidebar-left{max-height:calc(100dvh - 82px)!important;overflow:auto!important}
  .music-manager,
  .album-detail,
  #v36UsersOverlay .v36-users-card,
  #v36DevelopmentOverlay>*,
  #v36RegistrationOverlay>*,
  #v36StructureOverlay>*,
  #v36MilestoneOverlay>*,
  #v36SocialStandaloneOverlay>*,
  #v36ToolkitStandaloneOverlay>*{
    max-height:calc(100dvh - 12px)!important;
  }
}

/* Phones that become wider than 860px in landscape still need compact shell behavior. */
@media (orientation:landscape) and (max-height:500px) and (max-width:960px){
  .app-shell{grid-template-columns:minmax(0,1fr)!important}
  .sidebar-left,.sidebar-right{display:none!important}
  #publicViewHost{margin-left:0!important;margin-right:0!important;width:100%!important}
}

/* ---------- Overlay containment across device sizes ---------- */
.music-manager,
.album-detail{
  max-width:100vw!important;
  max-height:100dvh!important;
  overscroll-behavior:contain!important;
}
#v36UsersOverlay,
#v36DevelopmentOverlay,
#v36RegistrationOverlay,
#v36StructureOverlay,
#v36MilestoneOverlay,
#v36SocialStandaloneOverlay,
#v36ToolkitStandaloneOverlay{
  padding-top:max(12px,env(safe-area-inset-top))!important;
  padding-right:max(12px,env(safe-area-inset-right))!important;
  padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
  padding-left:max(12px,env(safe-area-inset-left))!important;
}
#v36UsersOverlay .v36-users-card,
#v36DevelopmentOverlay>*,
#v36RegistrationOverlay>*,
#v36StructureOverlay>*,
#v36MilestoneOverlay>*,
#v36SocialStandaloneOverlay>*,
#v36ToolkitStandaloneOverlay>*{
  max-width:min(1180px,100%)!important;
  max-height:calc(100dvh - 24px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
}

/* Keep a comfortable pointer target even though the visual X is smaller. */
@media (pointer:coarse){
  :root{--v36-close-box:44px;--v36-close-glyph:18px}
}

/* <<< css/v3.6-responsive-ui-audit.css */


/* >>> css/v3.6-nonhome-shell-contract.css */
/* SYNTHIQ V3.6 — staging non-HOME shell contract
   HOME is the only view allowed to own the right rail. Presentation only. */

/* A secondary nav destination is active. */
body:has(.sidebar-left .nav-item.active:not([data-view="home"])) .sidebar-right,
/* A routed public workspace is open. */
body:has(#publicViewHost:not([hidden])) .sidebar-right,
/* Explicit V3.6 clean views. */
body[data-clean-view]:not([data-clean-view="home"]) .sidebar-right,
/* Full secondary workspaces. */
body.v36-community-expanded .sidebar-right,
body.expanded-player-open .sidebar-right{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Rebuild the in-shell workspace as LEFT NAV + CONTENT whenever a non-HOME
   destination is active. This prevents the removed right rail from keeping a
   ghost grid column or squeezing the secondary workspace. */
@media (min-width:861px){
  body:has(.sidebar-left .nav-item.active:not([data-view="home"])) .app-shell,
  body:has(#publicViewHost:not([hidden])) .app-shell,
  body[data-clean-view]:not([data-clean-view="home"]) .app-shell{
    grid-template-columns:minmax(180px,220px) minmax(0,1fr)!important;
    gap:clamp(12px,1.15vw,18px)!important;
  }

  body:has(.sidebar-left .nav-item.active:not([data-view="home"])) .main-content,
  body:has(#publicViewHost:not([hidden])) .main-content,
  body[data-clean-view]:not([data-clean-view="home"]) .main-content{
    grid-column:2!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
  }

  /* publicViewHost is already positioned relative to the secondary shell by
     the route/view owners. Do NOT add the sidebar width again here: that caused
     a second ~220px left offset and the large dead gutter seen on Albums/Music. */
  body:has(#publicViewHost:not([hidden])) #publicViewHost{
    margin-left:0!important;
    margin-right:0!important;
    width:auto!important;
    max-width:none!important;
  }

  /* Views that intentionally own the entire workspace should not reserve the
     left rail either. */
  body[data-clean-view="community"] #publicViewHost,
  body[data-clean-view="about"] #publicViewHost,
  body[data-clean-view="status"] #publicViewHost,
  body.v36-community-expanded #publicViewHost{
    margin-left:0!important;
    margin-right:0!important;
    width:100%!important;
  }
}

/* Keep the retained left rail internally contained. No child card or label is
   allowed to spill into the content column. */
body:has(.sidebar-left .nav-item.active:not([data-view="home"])) .sidebar-left,
body:has(#publicViewHost:not([hidden])) .sidebar-left,
body[data-clean-view]:not([data-clean-view="home"]) .sidebar-left{
  min-width:0!important;
  max-width:220px!important;
  width:100%!important;
  overflow-x:hidden!important;
}
body:has(.sidebar-left .nav-item.active:not([data-view="home"])) .sidebar-left > *,
body:has(#publicViewHost:not([hidden])) .sidebar-left > *,
body[data-clean-view]:not([data-clean-view="home"]) .sidebar-left > *{
  min-width:0!important;
  max-width:100%!important;
}

/* Tablet / compact desktop: use a narrower navigation rail and let content
   consume everything else. publicViewHost still receives no duplicate offset. */
@media (min-width:861px) and (max-width:1100px),
       (min-width:861px) and (max-height:620px){
  body:has(.sidebar-left .nav-item.active:not([data-view="home"])) .app-shell,
  body:has(#publicViewHost:not([hidden])) .app-shell,
  body[data-clean-view]:not([data-clean-view="home"]) .app-shell{
    grid-template-columns:minmax(160px,184px) minmax(0,1fr)!important;
    gap:12px!important;
  }
  body:has(.sidebar-left .nav-item.active:not([data-view="home"])) .sidebar-left,
  body:has(#publicViewHost:not([hidden])) .sidebar-left,
  body[data-clean-view]:not([data-clean-view="home"]) .sidebar-left{
    max-width:184px!important;
  }
  body:has(#publicViewHost:not([hidden])) #publicViewHost{
    margin-left:0!important;
  }
}

/* Narrow screens and short landscape devices: secondary views become content
   first. Both rails are removed so navigation cannot overlap the workspace. */
@media (max-width:860px),
       (orientation:landscape) and (max-height:560px) and (max-width:1180px){
  body:has(.sidebar-left .nav-item.active:not([data-view="home"])) .sidebar-left,
  body:has(#publicViewHost:not([hidden])) .sidebar-left,
  body[data-clean-view]:not([data-clean-view="home"]) .sidebar-left,
  body:has(.sidebar-left .nav-item.active:not([data-view="home"])) .sidebar-right,
  body:has(#publicViewHost:not([hidden])) .sidebar-right,
  body[data-clean-view]:not([data-clean-view="home"]) .sidebar-right{
    display:none!important;
  }

  body:has(.sidebar-left .nav-item.active:not([data-view="home"])) .app-shell,
  body:has(#publicViewHost:not([hidden])) .app-shell,
  body[data-clean-view]:not([data-clean-view="home"]) .app-shell{
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
  }

  body:has(.sidebar-left .nav-item.active:not([data-view="home"])) .main-content,
  body:has(#publicViewHost:not([hidden])) .main-content,
  body[data-clean-view]:not([data-clean-view="home"]) .main-content{
    grid-column:1!important;
    width:100%!important;
    max-width:100%!important;
  }

  body:has(#publicViewHost:not([hidden])) #publicViewHost{
    margin-left:0!important;
    margin-right:0!important;
    width:100%!important;
    max-width:100%!important;
  }
}

/* <<< css/v3.6-nonhome-shell-contract.css */


/* >>> css/v3.6-nonhome-minimal-frame.css */
/* SYNTHIQ V3.6 — minimalist global frame for every non-HOME screen.
   Presentation only. HOME remains the intentional three-column exception. */

:root{
  --v36-nonhome-max:1280px;
  --v36-nonhome-pad:24px;
  --v36-nonhome-pad-compact:18px;
  --v36-nonhome-pad-mobile:14px;
  --v36-nonhome-section-gap:18px;
  --v36-nonhome-radius:18px;
}

/* Shared interior frame. Keep the existing shell/sidebar positioning; normalize
   only the usable page interior so every destination starts/ends on the same guides. */
body:has(.sidebar-left .nav-item.active:not([data-view="home"])) #publicViewHost:not([hidden]),
body[data-clean-view]:not([data-clean-view="home"]) #publicViewHost:not([hidden]){
  box-sizing:border-box!important;
  padding-left:var(--v36-nonhome-pad)!important;
  padding-right:var(--v36-nonhome-pad)!important;
}

body:has(.sidebar-left .nav-item.active:not([data-view="home"])) #publicViewHeader,
body:has(.sidebar-left .nav-item.active:not([data-view="home"])) #publicViewContent,
body[data-clean-view]:not([data-clean-view="home"]) #publicViewHeader,
body[data-clean-view]:not([data-clean-view="home"]) #publicViewContent{
  width:min(100%,var(--v36-nonhome-max))!important;
  max-width:var(--v36-nonhome-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Keep headers minimalist but styled: one frame, one rhythm, no giant detached shell. */
body:has(.sidebar-left .nav-item.active:not([data-view="home"])) #publicViewHeader,
body[data-clean-view]:not([data-clean-view="home"]) #publicViewHeader{
  padding-top:18px!important;
  padding-bottom:14px!important;
}

body:has(.sidebar-left .nav-item.active:not([data-view="home"])) #publicViewContent,
body[data-clean-view]:not([data-clean-view="home"]) #publicViewContent{
  padding-top:0!important;
  padding-bottom:112px!important;
}

/* Common page hero/header shells should share the same restrained visual language. */
body:has(.sidebar-left .nav-item.active:not([data-view="home"])) #publicViewContent > :first-child,
body[data-clean-view]:not([data-clean-view="home"]) #publicViewContent > :first-child{
  box-sizing:border-box;
}

/* Community must use the exact same horizontal guides as Albums/Charts/etc. */
body[data-clean-view="community"] #publicViewHost,
body.v36-community-expanded #publicViewHost{
  padding-left:var(--v36-nonhome-pad)!important;
  padding-right:var(--v36-nonhome-pad)!important;
}
body[data-clean-view="community"] #publicViewHeader,
body[data-clean-view="community"] #publicViewContent,
body.v36-community-expanded #publicViewHeader,
body.v36-community-expanded #publicViewContent,
body[data-clean-view="community"] .v36-community-page,
body[data-clean-view="community"] .v36-community-v2,
body.v36-community-expanded .v36-community-page,
body.v36-community-expanded .v36-community-v2{
  width:min(100%,var(--v36-nonhome-max))!important;
  max-width:var(--v36-nonhome-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

body[data-clean-view="community"] .v36-community-tabs,
body.v36-community-expanded .v36-community-tabs{
  margin-left:0!important;
  margin-right:0!important;
}

/* Community header/back control belongs inside the same frame, never hanging off-screen. */
body[data-clean-view="community"] #publicViewHeader,
body.v36-community-expanded #publicViewHeader{
  padding-left:0!important;
  padding-right:0!important;
}
body[data-clean-view="community"] #publicViewBackBtn,
body.v36-community-expanded #publicViewBackBtn{
  margin-left:0!important;
}

/* Live Lounge: music companion, not a page-dominating hero video. */
body[data-clean-view="community"] .v36-restored-live,
body[data-clean-view="community"] .v36-restored-live-card,
body.v36-community-expanded .v36-restored-live,
body.v36-community-expanded .v36-restored-live-card{
  width:min(100%,760px)!important;
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body[data-clean-view="community"] .v36-restored-live-frame,
body.v36-community-expanded .v36-restored-live-frame{
  width:100%!important;
  aspect-ratio:16/9!important;
  max-height:428px!important;
}

/* SYNTHIQ Music active Watch Mode: larger than Live Lounge, but still bounded. */
body.v36-synthiq-music-view .v36-sm-player.watch-mode,
body.v36-synthiq-music-view .v36-sm-player.v36-sm-watch-mode,
body.v36-synthiq-music-view .v36-sm-player[data-watch-mode="true"],
body.v36-synthiq-music-view .v36-sm-player{
  width:min(100%,920px)!important;
  max-width:920px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.v36-synthiq-music-view .v36-sm-player .v36-sm-player-shell{
  width:100%!important;
}

/* Lists/grids remain allowed to use the full shared content width. */
body.v36-synthiq-music-view .v36-sm-results-card,
body.v36-synthiq-music-view .v36-sm-action-zone,
body.v36-synthiq-music-view .v36-sm-real-collections,
body.v36-synthiq-music-view .v36-sm-queue-card{
  width:100%!important;
  max-width:var(--v36-nonhome-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Compact desktop/tablet. */
@media (max-width:1100px){
  body:has(.sidebar-left .nav-item.active:not([data-view="home"])) #publicViewHost:not([hidden]),
  body[data-clean-view]:not([data-clean-view="home"]) #publicViewHost:not([hidden]),
  body[data-clean-view="community"] #publicViewHost,
  body.v36-community-expanded #publicViewHost{
    padding-left:var(--v36-nonhome-pad-compact)!important;
    padding-right:var(--v36-nonhome-pad-compact)!important;
  }
  body.v36-synthiq-music-view .v36-sm-player{
    max-width:860px!important;
  }
}

/* Mobile/short landscape: full-width content with a modest safe gutter. */
@media (max-width:700px),
       (orientation:landscape) and (max-height:560px) and (max-width:1180px){
  body:has(.sidebar-left .nav-item.active:not([data-view="home"])) #publicViewHost:not([hidden]),
  body[data-clean-view]:not([data-clean-view="home"]) #publicViewHost:not([hidden]),
  body[data-clean-view="community"] #publicViewHost,
  body.v36-community-expanded #publicViewHost{
    padding-left:max(var(--v36-nonhome-pad-mobile),env(safe-area-inset-left))!important;
    padding-right:max(var(--v36-nonhome-pad-mobile),env(safe-area-inset-right))!important;
  }
  body:has(.sidebar-left .nav-item.active:not([data-view="home"])) #publicViewHeader,
  body[data-clean-view]:not([data-clean-view="home"]) #publicViewHeader{
    padding-top:10px!important;
    padding-bottom:10px!important;
  }
  body.v36-synthiq-music-view .v36-sm-player,
  body[data-clean-view="community"] .v36-restored-live,
  body[data-clean-view="community"] .v36-restored-live-card{
    width:100%!important;
    max-width:100%!important;
  }
}

/* Short landscape specifically: keep YouTube usable without swallowing the viewport. */
@media (orientation:landscape) and (max-height:620px){
  body.v36-synthiq-music-view .v36-sm-player .v36-sm-player-shell,
  body[data-clean-view="community"] .v36-restored-live-frame,
  body.v36-community-expanded .v36-restored-live-frame{
    max-height:54dvh!important;
  }
}

/* <<< css/v3.6-nonhome-minimal-frame.css */


/* >>> css/v3.6-community-social-unified.css */
/* SYNTHIQ V3.6 — staging Community social unification + About frame correction. */

/* About follows the same shared non-HOME frame and starts at the top of the workspace. */
body[data-clean-view="about"] #publicViewHost{
  align-self:start!important;
  min-height:0!important;
}
body[data-clean-view="about"] #publicViewHeader,
body[data-clean-view="about"] #publicViewContent,
body[data-clean-view="about"] .v36-about-story{
  width:min(100%,var(--v36-nonhome-max,1280px))!important;
  max-width:var(--v36-nonhome-max,1280px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body[data-clean-view="about"] #publicViewHeader{
  padding-top:18px!important;
  padding-bottom:14px!important;
}
body[data-clean-view="about"] .v36-about-story{
  gap:16px!important;
  margin-bottom:40px!important;
}
body[data-clean-view="about"] .v36-about-hero{
  padding:24px!important;
}
body[data-clean-view="about"] .v36-about-hero h2{
  font-size:clamp(34px,4.2vw,58px)!important;
}

/* Community is one social destination: Feed + featured Live Lounge, with Supporters secondary. */
body.v36-community-social-unified [data-community-tab="live"]{
  display:none!important;
}
body.v36-community-social-unified .v36-community-tabs{
  gap:8px!important;
  margin-bottom:14px!important;
}
body.v36-community-social-unified [data-community-panel="live"]{
  display:none!important;
}
body.v36-community-social-unified [data-community-panel="feed"].active{
  display:block!important;
}
body.v36-community-social-unified .v36-community-social-live{
  width:100%!important;
  max-width:none!important;
  margin:0 0 16px!important;
}
body.v36-community-social-unified .v36-social-live-card{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:minmax(300px,430px) minmax(0,1fr)!important;
  grid-template-areas:
    "video copy"
    "video actions"!important;
  gap:0!important;
  overflow:hidden!important;
  border-radius:18px!important;
  background:var(--surface,#222831)!important;
}
body.v36-community-social-unified .v36-social-live-card .v36-restored-live-frame,
body.v36-community-social-unified .v36-social-live-card .v36-youtube-frame{
  grid-area:video!important;
  width:100%!important;
  height:100%!important;
  min-height:230px!important;
  max-height:280px!important;
  aspect-ratio:16/9!important;
  border-radius:0!important;
  background:#050505!important;
}
body.v36-community-social-unified .v36-social-live-card .v36-restored-live-frame iframe,
body.v36-community-social-unified .v36-social-live-card .v36-youtube-frame iframe{
  width:100%!important;
  height:100%!important;
  display:block!important;
}
body.v36-community-social-unified .v36-social-live-card .v36-restored-live-copy{
  grid-area:copy!important;
  align-self:end!important;
  padding:20px 20px 10px!important;
}
body.v36-community-social-unified .v36-social-live-card .v36-restored-live-copy::before{
  content:'LIVE NOW';
  display:inline-flex;
  align-items:center;
  min-height:24px;
  margin-bottom:9px;
  padding:0 9px;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent,#f6a12a) 16%,transparent);
  color:var(--accent,#f6a12a);
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
}
body.v36-community-social-unified .v36-social-live-card .v36-restored-live-copy .v36-community-kicker{
  display:none!important;
}
body.v36-community-social-unified .v36-social-live-card .v36-restored-live-copy h3{
  margin:0 0 7px!important;
  font-size:clamp(20px,2vw,28px)!important;
}
body.v36-community-social-unified .v36-social-live-card .v36-restored-live-copy p{
  margin:0!important;
  max-width:620px!important;
  color:var(--text-dim,#aeb4bd)!important;
  font-size:13px!important;
  line-height:1.55!important;
}
body.v36-community-social-unified .v36-social-live-card .v36-restored-live-actions{
  grid-area:actions!important;
  align-self:start!important;
  padding:4px 20px 20px!important;
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
body.v36-community-social-unified .v36-social-live-card .v36-restored-live-actions a,
body.v36-community-social-unified .v36-social-live-card .v36-restored-live-actions button{
  min-height:38px!important;
  width:auto!important;
}

/* Keep Feed and the featured Live card on the exact same content guides. */
body.v36-community-social-unified .v36-feed-head,
body.v36-community-social-unified .v36-community-social-live,
body.v36-community-social-unified .v36-member-posts,
body.v36-community-social-unified .v36-community-rules{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

@media(max-width:900px){
  body.v36-community-social-unified .v36-social-live-card{
    grid-template-columns:1fr!important;
    grid-template-areas:"video" "copy" "actions"!important;
  }
  body.v36-community-social-unified .v36-social-live-card .v36-restored-live-frame,
  body.v36-community-social-unified .v36-social-live-card .v36-youtube-frame{
    min-height:0!important;
    max-height:none!important;
  }
}

@media(max-width:640px){
  body[data-clean-view="about"] #publicViewHeader{padding-top:10px!important;padding-bottom:10px!important}
  body[data-clean-view="about"] .v36-about-hero{padding:18px!important}
  body.v36-community-social-unified .v36-social-live-card .v36-restored-live-copy{padding:16px 16px 8px!important}
  body.v36-community-social-unified .v36-social-live-card .v36-restored-live-actions{padding:4px 16px 16px!important}
}

/* <<< css/v3.6-community-social-unified.css */


/* >>> css/v3.6-global-view-modes.css */
/* SYNTHIQ V3.6 — global Grid/List presentation for applicable non-HOME browser views. */

/* Header search is a utility, not the visual hero. Keep it compact on wide screens. */
.navbar-search{
  flex:0 1 380px!important;
  width:min(380px,34vw)!important;
  max-width:380px!important;
  height:38px!important;
  padding-inline:14px!important;
}
.navbar-search input{font-size:.84rem!important}

.v36-global-view-toggle{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border:1px solid var(--border,#3a414a);
  border-radius:11px;
  background:color-mix(in srgb,var(--surface,#222831) 88%,transparent);
}
.v36-global-view-toggle button{
  min-height:34px;
  padding:0 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-dim,#aeb4bd);
  font:inherit;
  font-size:11px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
}
.v36-global-view-toggle button svg{width:14px;height:14px}
.v36-global-view-toggle button.active{
  background:color-mix(in srgb,var(--accent,#f7a12e) 16%,transparent);
  color:var(--accent,#f7a12e);
}

.v36-grid-artwork-fallback{
  width:100%;
  height:100%;
  min-height:100%;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  background:
    radial-gradient(circle at 72% 28%,color-mix(in srgb,var(--accent,#f7a12e) 22%,transparent),transparent 34%),
    linear-gradient(145deg,#171b20,#282f37);
  color:var(--text,#f3f4f6);
}
.v36-grid-artwork-fallback>span{
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--accent,#f7a12e);
  color:#111;
  font-size:24px;
  font-weight:950;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}
.v36-grid-artwork-fallback small{
  max-width:86%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.72;
}

/* GRID MODE -------------------------------------------------------------- */
#publicViewContent[data-global-view-mode="grid"] .track-browser-list{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important;
  gap:14px!important;
}
#publicViewContent[data-global-view-mode="grid"] .track-browser-row{
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  padding:9px 9px 11px!important;
  border:1px solid var(--border,#3a414a)!important;
  border-radius:15px!important;
  background:var(--surface,#222831)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto auto auto!important;
  gap:7px 10px!important;
  align-items:start!important;
  overflow:hidden!important;
}
#publicViewContent[data-global-view-mode="grid"] .v36-grid-artwork{
  grid-column:1/-1!important;
  grid-row:1!important;
  width:100%!important;
  aspect-ratio:1/1!important;
  border-radius:11px!important;
  overflow:hidden!important;
  display:block!important;
  background:#181c21!important;
}
#publicViewContent[data-global-view-mode="grid"] .v36-grid-artwork>img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
#publicViewContent[data-global-view-mode="grid"] .track-browser-index{
  position:absolute!important;
  top:18px!important;
  left:18px!important;
  z-index:3!important;
  width:30px!important;
  height:30px!important;
  border-radius:9px!important;
  display:grid!important;
  place-items:center!important;
  background:color-mix(in srgb,var(--accent,#f7a12e) 88%,#111)!important;
  color:#111!important;
  box-shadow:0 6px 18px rgba(0,0,0,.28)!important;
  font-weight:900!important;
}
#publicViewContent[data-global-view-mode="grid"] .track-browser-main{
  grid-column:1/-1!important;
  grid-row:2!important;
  min-width:0!important;
  padding:2px 2px 0!important;
}
#publicViewContent[data-global-view-mode="grid"] .track-browser-main strong,
#publicViewContent[data-global-view-mode="grid"] .track-browser-main span{
  display:block!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#publicViewContent[data-global-view-mode="grid"] .track-browser-main strong{font-size:12px!important;line-height:1.25!important}
#publicViewContent[data-global-view-mode="grid"] .track-browser-main span{margin-top:3px!important;font-size:10px!important;color:var(--text-dim,#aeb4bd)!important}
#publicViewContent[data-global-view-mode="grid"] .track-browser-album{
  grid-column:1!important;
  grid-row:3!important;
  min-width:0!important;
  padding-left:2px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  color:var(--text-dim,#aeb4bd)!important;
  font-size:9px!important;
}
#publicViewContent[data-global-view-mode="grid"] .track-browser-time{
  grid-column:2!important;
  grid-row:3!important;
  align-self:end!important;
  white-space:nowrap!important;
  font-size:9px!important;
  color:var(--text-dim,#aeb4bd)!important;
}
#publicViewContent[data-global-view-mode="grid"] .track-browser-fav{
  position:absolute!important;
  top:16px!important;
  right:16px!important;
  z-index:3!important;
  width:34px!important;
  height:34px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(18,20,24,.72)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  backdrop-filter:blur(8px)!important;
}

/* Existing visual cards also follow one artwork-first grid contract. */
#publicViewContent[data-global-view-mode="grid"] .public-card-cover{aspect-ratio:1/1!important;border-radius:14px!important;overflow:hidden!important;background:#181c21!important}
#publicViewContent[data-global-view-mode="grid"] .public-card-cover img,
#publicViewContent[data-global-view-mode="grid"] .artist-avatar img{width:100%!important;height:100%!important;object-fit:cover!important}
#publicViewContent[data-global-view-mode="grid"] .artist-card{overflow:hidden!important}
#publicViewContent[data-global-view-mode="grid"] .artist-avatar{width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:1/1!important;margin:0 0 10px!important;border-radius:14px!important;overflow:hidden!important;background:#181c21!important}
#publicViewContent[data-global-view-mode="grid"] .genre-card{overflow:hidden!important;padding:10px!important;display:grid!important;grid-template-columns:1fr!important;align-content:start!important}
#publicViewContent[data-global-view-mode="grid"] .genre-card>.v36-grid-artwork{width:100%!important;aspect-ratio:1/1!important;margin:0 0 10px!important}
#publicViewContent[data-global-view-mode="grid"] .genre-card strong,
#publicViewContent[data-global-view-mode="grid"] .genre-card span:not(.v36-grid-artwork):not(.v36-grid-artwork-fallback){padding-inline:2px!important}

/* LIST MODE -------------------------------------------------------------- */
#publicViewContent[data-global-view-mode="list"] .public-grid,
#publicViewContent[data-global-view-mode="list"] .artist-grid,
#publicViewContent[data-global-view-mode="list"] .genre-grid{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
#publicViewContent[data-global-view-mode="list"] .public-card{width:100%!important;min-width:0!important;min-height:82px!important;padding:9px 12px!important;border:1px solid color-mix(in srgb,var(--border,#3a414a) 72%,transparent)!important;border-radius:12px!important;background:color-mix(in srgb,var(--surface,#222831) 88%,transparent)!important;display:grid!important;grid-template-columns:64px minmax(0,1fr) auto!important;grid-template-rows:auto auto auto!important;column-gap:13px!important;align-items:center!important}
#publicViewContent[data-global-view-mode="list"] .public-card-cover{grid-column:1!important;grid-row:1/4!important;width:64px!important;height:64px!important;min-width:64px!important;aspect-ratio:1!important;border-radius:10px!important;overflow:hidden!important}
#publicViewContent[data-global-view-mode="list"] .public-card-cover img{width:100%!important;height:100%!important;object-fit:cover!important}
#publicViewContent[data-global-view-mode="list"] .public-card h3,
#publicViewContent[data-global-view-mode="list"] .public-card p,
#publicViewContent[data-global-view-mode="list"] .public-card small{grid-column:2!important;margin:0!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#publicViewContent[data-global-view-mode="list"] .public-card h3{grid-row:1!important;font-size:13px!important}
#publicViewContent[data-global-view-mode="list"] .public-card p{grid-row:2!important;font-size:11px!important;color:var(--text-dim,#aeb4bd)!important}
#publicViewContent[data-global-view-mode="list"] .public-card small{grid-row:3!important;font-size:10px!important;color:var(--text-dim,#aeb4bd)!important}
#publicViewContent[data-global-view-mode="list"] .public-card-play{opacity:1!important;transform:none!important;position:static!important;grid-column:3!important;grid-row:1/4!important;width:38px!important;height:38px!important;align-self:center!important;justify-self:end!important}

#publicViewContent[data-global-view-mode="list"] .artist-card,
#publicViewContent[data-global-view-mode="list"] .genre-card{width:100%!important;min-width:0!important;min-height:68px!important;padding:10px 14px!important;border-radius:12px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:13px!important;align-items:center!important}
#publicViewContent[data-global-view-mode="list"] .artist-avatar,
#publicViewContent[data-global-view-mode="list"] .genre-card>.v36-grid-artwork{grid-column:1!important;grid-row:1/3!important;width:48px!important;height:48px!important;min-width:48px!important;aspect-ratio:1!important;margin:0!important;border-radius:9px!important;overflow:hidden!important}
#publicViewContent[data-global-view-mode="list"] .artist-card h3,
#publicViewContent[data-global-view-mode="list"] .artist-card p{grid-column:2!important;margin:0!important;text-align:left!important}
#publicViewContent[data-global-view-mode="list"] .genre-card strong,
#publicViewContent[data-global-view-mode="list"] .genre-card span:not(.v36-grid-artwork):not(.v36-grid-artwork-fallback){grid-column:2!important;margin:0!important;text-align:left!important}

/* Track list keeps a compact artwork thumbnail in List mode. */
#publicViewContent[data-global-view-mode="list"] .track-browser-row{grid-template-columns:42px 30px minmax(0,1fr) minmax(80px,.7fr) auto auto!important}
#publicViewContent[data-global-view-mode="list"] .track-browser-row>.v36-grid-artwork{grid-column:1!important;width:42px!important;height:42px!important;aspect-ratio:1!important;border-radius:8px!important;overflow:hidden!important;background:#181c21!important}
#publicViewContent[data-global-view-mode="list"] .track-browser-row>.v36-grid-artwork img{width:100%!important;height:100%!important;object-fit:cover!important}
#publicViewContent[data-global-view-mode="list"] .track-browser-index{grid-column:2!important}
#publicViewContent[data-global-view-mode="list"] .track-browser-main{grid-column:3!important}
#publicViewContent[data-global-view-mode="list"] .track-browser-album{grid-column:4!important}
#publicViewContent[data-global-view-mode="list"] .track-browser-time{grid-column:5!important}
#publicViewContent[data-global-view-mode="list"] .track-browser-fav{grid-column:6!important}

#publicViewContent[data-global-view-mode] .section-label{margin-bottom:10px!important}

@media(max-width:1100px){
  .navbar-search{flex:1 1 320px!important;width:auto!important;max-width:360px!important}
}
@media(max-width:820px){
  .navbar-search{height:40px!important;max-width:none!important;width:auto!important}
}
@media(max-width:700px){
  .v36-global-view-toggle button{min-width:36px;padding:0 8px}
  .v36-global-view-toggle button span{display:none}
  #publicViewContent[data-global-view-mode="grid"] .track-browser-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  #publicViewContent[data-global-view-mode="grid"] .track-browser-row{padding:7px 7px 9px!important;border-radius:13px!important}
  #publicViewContent[data-global-view-mode="grid"] .track-browser-index{top:13px!important;left:13px!important;width:27px!important;height:27px!important;font-size:10px!important}
  #publicViewContent[data-global-view-mode="grid"] .track-browser-fav{top:12px!important;right:12px!important;width:30px!important;height:30px!important}
  #publicViewContent[data-global-view-mode="list"] .public-card{grid-template-columns:56px minmax(0,1fr) auto!important;min-height:72px!important;padding:8px 9px!important;column-gap:10px!important}
  #publicViewContent[data-global-view-mode="list"] .public-card-cover{width:56px!important;height:56px!important;min-width:56px!important}
  #publicViewContent[data-global-view-mode="list"] .track-browser-row{grid-template-columns:38px minmax(0,1fr) auto!important;gap:8px!important}
  #publicViewContent[data-global-view-mode="list"] .track-browser-row>.v36-grid-artwork{grid-column:1!important;width:38px!important;height:38px!important}
  #publicViewContent[data-global-view-mode="list"] .track-browser-index{display:none!important}
  #publicViewContent[data-global-view-mode="list"] .track-browser-main{grid-column:2!important}
  #publicViewContent[data-global-view-mode="list"] .track-browser-album{display:none!important}
  #publicViewContent[data-global-view-mode="list"] .track-browser-time{grid-column:3!important}
  #publicViewContent[data-global-view-mode="list"] .track-browser-fav{grid-column:3!important}
}
@media(max-width:430px){#publicViewContent[data-global-view-mode="grid"] .track-browser-list{grid-template-columns:1fr!important}}

/* <<< css/v3.6-global-view-modes.css */


/* >>> css/v3.6-about-responsive-contract.css */
/* SYNTHIQ V3.6 — final responsive About shell contract.
   About follows the same non-HOME geometry as Albums/Charts on desktop/tablet,
   and becomes a single-column content view on narrow/short-landscape devices. */

/* Desktop + tablet: sidebar stays in column 1; About starts at the top of column 2.
   Explicit placement prevents CSS Grid auto-placement from dropping About below
   the sidebar and creating the large empty/black shell seen on tablet. */
@media (min-width:861px){
  body[data-clean-view="about"] .app-shell{
    grid-template-columns:minmax(180px,220px) minmax(0,1fr)!important;
    align-items:start!important;
  }
  body[data-clean-view="about"] .sidebar-left{
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
  }
  body[data-clean-view="about"] #publicViewHost:not([hidden]){
    grid-column:2!important;
    grid-row:1!important;
    align-self:start!important;
    justify-self:stretch!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding-top:0!important;
  }
  body[data-clean-view="about"] #publicViewHeader,
  body[data-clean-view="about"] #publicViewContent{
    width:min(100%,var(--v36-nonhome-max,1280px))!important;
    max-width:var(--v36-nonhome-max,1280px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body[data-clean-view="about"] .v36-about-story{
    width:100%!important;
    max-width:1180px!important;
    margin-top:0!important;
  }
}

/* Compact tablet: same structure, narrower nav and tighter page gutter. */
@media (min-width:861px) and (max-width:1100px){
  body[data-clean-view="about"] .app-shell{
    grid-template-columns:minmax(160px,184px) minmax(0,1fr)!important;
    gap:12px!important;
  }
  body[data-clean-view="about"] #publicViewHost:not([hidden]){
    padding-left:var(--v36-nonhome-pad-compact,18px)!important;
    padding-right:var(--v36-nonhome-pad-compact,18px)!important;
  }
}

/* Narrow tablets/phones and short landscape: About owns the single content column.
   Both rails stay out of the workspace and no inherited grid row can create a shell. */
@media (max-width:860px),
       (orientation:landscape) and (max-height:560px) and (max-width:1180px){
  body[data-clean-view="about"] .app-shell{
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:auto!important;
    gap:0!important;
    align-items:start!important;
  }
  body[data-clean-view="about"] .sidebar-left,
  body[data-clean-view="about"] .sidebar-right{
    display:none!important;
  }
  body[data-clean-view="about"] #publicViewHost:not([hidden]){
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
    justify-self:stretch!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding-top:0!important;
    padding-left:max(var(--v36-nonhome-pad-mobile,14px),env(safe-area-inset-left))!important;
    padding-right:max(var(--v36-nonhome-pad-mobile,14px),env(safe-area-inset-right))!important;
  }
  body[data-clean-view="about"] #publicViewHeader,
  body[data-clean-view="about"] #publicViewContent,
  body[data-clean-view="about"] .v36-about-story{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* Portrait tablets can be taller than desktop but still need restrained About cards. */
@media (min-width:701px) and (max-width:1100px){
  body[data-clean-view="about"] .v36-about-hero{padding:24px!important}
  body[data-clean-view="about"] .v36-about-grid{gap:12px!important}
  body[data-clean-view="about"] .v36-about-card,
  body[data-clean-view="about"] .v36-about-note,
  body[data-clean-view="about"] .v36-about-thanks{padding:20px!important}
}

/* <<< css/v3.6-about-responsive-contract.css */


/* >>> css/v3.6-disable-pull-refresh.css */
/* SYNTHIQ V3.6 — Disable browser/WebView pull-to-refresh without blocking normal page scrolling. */
html,
body {
  overscroll-behavior-y: none;
}

/* <<< css/v3.6-disable-pull-refresh.css */


/* >>> css/v3.6-brand-refresh.css */
/* SYNTHIQ V3.6 — official Peak Signal brand system */
:root{--accent:#f56a23;--accent-hover:#ff8a35;--accent-soft:rgba(245,106,35,.14);--brand-orange:#f56a23;--brand-orange-2:#ff8a35;--brand-ink:#0d0d0f;--brand-surface:#141417;--brand-surface-2:#1b1b20;--brand-border:rgba(255,255,255,.09);--brand-glow:0 0 0 1px rgba(245,106,35,.10),0 16px 44px rgba(245,106,35,.08)}
body{background:radial-gradient(circle at 52% -10%,rgba(245,106,35,.055),transparent 28%),var(--bg)}
.navbar{background:rgba(10,10,12,.94);border-bottom-color:rgba(245,106,35,.13);box-shadow:0 10px 36px rgba(0,0,0,.18)}
.logo{gap:11px}.logo-mark{width:38px;height:38px;border-radius:11px;background:#f56a23 url('/assets/brand/synthiq-peak-signal.svg') center/cover no-repeat!important;color:transparent!important;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 22px rgba(245,106,35,.18);flex:0 0 auto}.logo-mark svg,.logo-mark i{display:none!important}.logo-word{font-size:1.15rem!important;font-weight:850!important;letter-spacing:.055em!important;white-space:nowrap!important;line-height:1!important;color:transparent!important;background:linear-gradient(90deg,var(--text) 0 71%,var(--brand-orange) 71% 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}.logo-word::before,.logo-word::after{content:none!important;display:none!important}
.nav-link:hover,.nav-item:hover{color:var(--text)!important}.nav-item.active,.nav-item[aria-current="page"]{position:relative;background:linear-gradient(90deg,rgba(245,106,35,.16),rgba(245,106,35,.035))!important;color:var(--text)!important;border-color:rgba(245,106,35,.18)!important}.nav-item.active:before,.nav-item[aria-current="page"]:before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:999px;background:var(--brand-orange);box-shadow:0 0 14px rgba(245,106,35,.55)}.nav-item.active svg,.nav-item[aria-current="page"] svg{color:var(--brand-orange)!important;stroke:var(--brand-orange)!important}
.btn-primary,.play-toggle,.chip.active,.view-btn.active{background:linear-gradient(135deg,var(--brand-orange),var(--brand-orange-2))!important;color:#140b06!important;box-shadow:0 7px 22px rgba(245,106,35,.16)}.btn-primary:hover,.play-toggle:hover{filter:brightness(1.05)}.btn-outline{border-color:rgba(245,106,35,.7)!important;color:var(--brand-orange)!important}.btn-outline:hover{background:rgba(245,106,35,.10)!important}.profile-chip:hover,.navbar-search:focus-within{border-color:rgba(245,106,35,.30)!important;box-shadow:0 0 0 3px rgba(245,106,35,.06)}
.album-card,.playlist-card,.artist-card,.public-card,.stat-card,.side-card,.premium-card,.music-manager .manager-section,.v36-tool-card,.v36-creator-view{border-color:var(--brand-border)!important}.album-card:hover,.playlist-card:hover,.artist-card:hover,.public-card:hover{border-color:rgba(245,106,35,.30)!important;box-shadow:var(--brand-glow)!important;transform:translateY(-1px)}
.hero{border:1px solid rgba(245,106,35,.08);box-shadow:inset 0 1px rgba(255,255,255,.03)}.hero:after{content:'';position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,106,35,.35),transparent);pointer-events:none}.hero-title span,.hero-subtitle span,.public-view-kicker,.manager-kicker{color:var(--brand-orange)!important}
.mini-player{border-top-color:rgba(245,106,35,.14)!important;background:rgba(10,10,12,.95)!important;box-shadow:0 -18px 48px rgba(0,0,0,.28)}.mp-cover{background:#0a0a0c url('/assets/brand/synthiq-default-cover.svg') center/cover no-repeat!important;box-shadow:0 0 0 1px rgba(245,106,35,.13)}.mp-cover img:not([src]),.mp-cover img[src=""]{opacity:0}.mp-bar-fill{background:linear-gradient(90deg,var(--brand-orange),var(--brand-orange-2))!important}.volume-slider{accent-color:var(--brand-orange)}
#musicManager,.v36-admin-toolkit,.v36-maintenance-panel,#v36MaintenancePanel,#v36CreatorPanel{--accent:var(--brand-orange);--accent-hover:var(--brand-orange-2)}#musicManager .manager-header,.v36-tool-head{border-bottom-color:rgba(245,106,35,.12)!important}#musicManager .manager-tab.active,.v36-creator-tab.active{color:var(--brand-orange)!important;border-color:rgba(245,106,35,.25)!important;background:rgba(245,106,35,.08)!important}.status-dot{background:var(--brand-orange)!important;box-shadow:0 0 12px rgba(245,106,35,.45)}
.light-theme{--brand-border:rgba(22,25,30,.10);--brand-glow:0 0 0 1px rgba(245,106,35,.10),0 14px 34px rgba(52,40,32,.08)}.light-theme body,.light-theme{background:#f7f7f8!important}.light-theme .navbar{background:rgba(255,255,255,.94)!important;border-bottom-color:rgba(245,106,35,.17)!important}.light-theme .logo-word{background:linear-gradient(90deg,#16171a 0 71%,var(--brand-orange) 71% 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}.light-theme .mini-player{background:rgba(255,255,255,.96)!important;border-top-color:rgba(245,106,35,.17)!important}.light-theme .nav-item.active,.light-theme .nav-item[aria-current="page"]{background:linear-gradient(90deg,rgba(245,106,35,.12),rgba(245,106,35,.025))!important}
@media(max-width:860px){.logo-mark{width:34px;height:34px;border-radius:10px}.logo-word{font-size:1.02rem!important}.album-card:hover,.playlist-card:hover,.artist-card:hover,.public-card:hover{transform:none}}
@media(max-width:520px){.logo{gap:8px}.logo-word{font-size:.95rem!important;letter-spacing:.035em!important}}

/* <<< css/v3.6-brand-refresh.css */


/* >>> css/v3.6-theme-qa-contract.css */
/* SYNTHIQ V3.6 — final light/dark contrast QA contract */
/* Never use the legacy whole-page inversion for light mode. */
.light-theme{filter:none!important;color-scheme:light;--bg:#f5f6f8;--surface:#ffffff;--surface-2:#eef1f4;--border:#d5dbe2;--text:#17191d;--text-dim:#5f6974;--text-faint:#707a85;--s36-card-bg:#ffffff;--s36-card-bg-soft:#f3f5f7;--s36-card-text:#17191d;--s36-card-dim:#5f6974;--s36-card-border:#d5dbe2;--s36-float-bg:rgba(255,255,255,.97);--s36-float-bg-strong:#ffffff;--s36-float-border:#d5dbe2}
.light-theme img{filter:none!important}

/* Core shell and navigation. */
.light-theme .app-shell,.light-theme .main-content,.light-theme .sidebar-left,.light-theme .sidebar-right{color:var(--text)}
.light-theme .nav-group-label,.light-theme .section-count,.light-theme .sort-control,.light-theme .member-since{color:var(--text-dim)!important}
.light-theme .navbar-search,.light-theme .profile-chip,.light-theme .chip,.light-theme .view-toggle,.light-theme .btn-ghost{background:#fff!important;border-color:var(--border)!important;color:var(--text)!important}
.light-theme .navbar-search input,.light-theme .sort-control select{color:var(--text)!important;background:#fff!important;border-color:var(--border)!important}
.light-theme .navbar-search input::placeholder{color:#7b858f!important}

/* Music Manager — explicit contrast contract, including Storage Diagnostics. */
.light-theme .music-manager{background:#f7f8fa!important;color:#17191d!important;border-left-color:#d5dbe2!important}
.light-theme .music-manager .manager-header,.light-theme .music-manager .manager-head{background:#f7f8fa!important;color:#17191d!important;border-color:#d5dbe2!important}
.light-theme .music-manager .manager-section,.light-theme .music-manager .manager-card,.light-theme .music-manager [class*="panel"]{background:#fff!important;color:#17191d!important;border-color:#d5dbe2!important}
.light-theme .music-manager .manager-section h2,.light-theme .music-manager .manager-section h3,.light-theme .music-manager .manager-section strong,.light-theme .music-manager .manager-header h2,.light-theme .music-manager .manager-head h2{color:#17191d!important}
.light-theme .music-manager .manager-section p,.light-theme .music-manager .manager-inline-status,.light-theme .music-manager .upload-progress-head,.light-theme .music-manager small{color:#606a75!important}
.light-theme .music-manager .manager-grid label{color:#515b66!important}
.light-theme .music-manager .manager-grid input,.light-theme .music-manager .manager-grid select,.light-theme .music-manager textarea{background:#fff!important;color:#17191d!important;border-color:#cbd2da!important;-webkit-text-fill-color:#17191d!important}
.light-theme .music-manager .manager-grid input::placeholder,.light-theme .music-manager textarea::placeholder{color:#818b95!important;-webkit-text-fill-color:#818b95!important}
.light-theme .music-manager .manager-grid input:focus,.light-theme .music-manager .manager-grid select:focus,.light-theme .music-manager textarea:focus{border-color:var(--brand-orange,#f56a23)!important;box-shadow:0 0 0 3px rgba(245,106,35,.10)!important}
.light-theme .music-manager .diagnostic-grid div{background:#f6f8fa!important;color:#17191d!important;border-color:#d5dbe2!important}
.light-theme .music-manager .diagnostic-grid span{color:#66717c!important}
.light-theme .music-manager .diagnostic-grid strong{color:#17191d!important}
.light-theme .music-manager .batch-item{background:#f6f8fa!important;color:#17191d!important;border-color:#d5dbe2!important}
.light-theme .music-manager .batch-item-meta,.light-theme .music-manager .batch-item-status{color:#66717c!important}
.light-theme .music-manager .upload-progress-track,.light-theme .music-manager .batch-bar{background:#dfe4e9!important}
.light-theme .manager-confirm-card{background:#fff!important;color:#17191d!important;border-color:#d5dbe2!important}
.light-theme .manager-confirm-card p{color:#606a75!important}

/* Public/browse surfaces with historically hard-coded dark colors. */
.light-theme .public-view-host{background:#f5f6f8!important;color:#17191d!important}
.light-theme .public-view-toolbar p,.light-theme .public-card p,.light-theme .public-card small,.light-theme .artist-card p,.light-theme .genre-card p,.light-theme .browser-stat-card p{color:#606a75!important}
.light-theme .view-back-btn{background:#fff!important;color:#17191d!important;border-color:#d5dbe2!important}
.light-theme .artist-card,.light-theme .genre-card,.light-theme .browser-stat-card,.light-theme .track-browser-row{background:#fff!important;color:#17191d!important;border-color:#d5dbe2!important}
.light-theme .track-browser-row:hover{background:#f3f5f7!important}
.light-theme .track-browser-main span,.light-theme .track-browser-album,.light-theme .track-browser-time,.light-theme .track-browser-index{color:#66717c!important}
.light-theme .empty-view{color:#66717c!important;border-color:#c7ced6!important}.light-theme .empty-view h3{color:#17191d!important}

/* Search, menus, account/admin floating surfaces. */
.light-theme .search-results-popover,.light-theme .profile-menu,.light-theme .account-menu,.light-theme .v36-mobile-drawer,.light-theme .v36-mobile-search{background:#fff!important;color:#17191d!important;border-color:#d5dbe2!important}
.light-theme .search-results-head,.light-theme .search-result-section{border-color:#d5dbe2!important}
.light-theme .search-result-section h4,.light-theme .search-result-item span{color:#66717c!important}
.light-theme .search-result-item:hover{background:#f3f5f7!important}

/* Admin / Maintenance / Creator shared legibility. */
.light-theme #musicManager,.light-theme .v36-admin-toolkit,.light-theme #v36MaintenancePanel,.light-theme #v36CreatorPanel,.light-theme .v36-tool-card,.light-theme .v36-creator-view{color:#17191d!important}
.light-theme .v36-tool-card,.light-theme .v36-creator-view{background:#fff!important;border-color:#d5dbe2!important}
.light-theme .v36-tool-card p,.light-theme .v36-tool-card small,.light-theme .v36-creator-view p,.light-theme .v36-creator-view small{color:#606a75!important}

/* Status colors must retain semantic contrast on white. */
.light-theme .manager-inline-status.ok,.light-theme .batch-item-status.ok{color:#147a4a!important}
.light-theme .manager-inline-status.error,.light-theme .batch-item-status.error{color:#b42318!important}

/* Dark mode remains explicit and stable for diagnostics/status text. */
body:not(.light-theme) .music-manager .diagnostic-grid span{color:#9aa3ad!important}
body:not(.light-theme) .music-manager .diagnostic-grid strong{color:#f3f3f4!important}

/* FINAL BRAND LOCK — deterministic two-part wordmark. */
.navbar .logo-word{
  display:inline-flex!important;
  align-items:baseline!important;
  white-space:nowrap!important;
  font-size:0!important;
  line-height:1!important;
  background:none!important;
  color:transparent!important;
  -webkit-text-fill-color:initial!important;
}
.navbar .logo-word::before{
  content:'SYNTH'!important;
  display:inline!important;
  font-size:1.15rem!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.055em!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}
.navbar .logo-word::after{
  content:'IQ'!important;
  display:inline!important;
  font-size:1.15rem!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.055em!important;
  color:#f56a23!important;
  -webkit-text-fill-color:#f56a23!important;
}

/* Light mode chrome follows the light UI. SYNTH becomes charcoal for contrast; IQ stays orange. */
.light-theme .navbar{
  background:rgba(255,255,255,.96)!important;
  border-bottom-color:rgba(245,106,35,.18)!important;
  color:#17191d!important;
  box-shadow:0 8px 28px rgba(31,42,52,.08)!important;
}
.light-theme .navbar .logo-word::before{
  color:#17191d!important;
  -webkit-text-fill-color:#17191d!important;
}
.light-theme .navbar .logo-word::after{
  color:#f56a23!important;
  -webkit-text-fill-color:#f56a23!important;
}
.light-theme .navbar .nav-link,
.light-theme .navbar .icon-btn{color:#505a65!important}
.light-theme .navbar .nav-link:hover,
.light-theme .navbar .icon-btn:hover{color:#17191d!important;background:#eef1f4!important}
.light-theme .navbar .profile-chip{background:#ffffff!important;border-color:#d5dbe2!important;color:#17191d!important}
.light-theme .navbar .profile-chip strong{color:#17191d!important}
.light-theme .navbar .navbar-search{background:#ffffff!important;border-color:#d5dbe2!important;color:#17191d!important}
.light-theme .navbar .navbar-search input{background:transparent!important;color:#17191d!important;-webkit-text-fill-color:#17191d!important}
.light-theme .navbar .navbar-search input::placeholder{color:#7b858f!important;-webkit-text-fill-color:#7b858f!important}

@media(max-width:860px){
  .navbar .logo-word::before,.navbar .logo-word::after{font-size:1.02rem!important}
}
@media(max-width:520px){
  .navbar .logo-word::before,.navbar .logo-word::after{font-size:.95rem!important;letter-spacing:.035em!important}
}

/* <<< css/v3.6-theme-qa-contract.css */


/* >>> css/v3.6-community-about-landscape-hardening-v2.css */
/* SYNTHIQ V3.6 — Community/About scroll hardening v2.
   The document scrolling element is never changed. Community neutralizes its
   route-local fixed-height/overflow locks in every orientation. About keeps its
   landscape shell hardening. Portrait navigation is untouched. */

/* COMMUNITY -------------------------------------------------------------
   Community never owns a separate body/host scroll container. This is global
   across portrait and landscape so Chrome, WebView and Safari keep the same
   browser document scroll owner before, during and after the route. */
body.v36-community-expanded{
  position:static!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

body.v36-community-expanded .app-shell{
  position:relative!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  align-items:start!important;
}

body.v36-community-expanded #publicViewHost{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  align-self:start!important;
}

body.v36-community-expanded #publicViewContent,
body.v36-community-expanded .v36-community-page,
body.v36-community-expanded .v36-community-v2,
body.v36-community-expanded .v36-community-main,
body.v36-community-expanded .v36-community-panel,
body.v36-community-expanded .v36-community-feed,
body.v36-community-expanded .v36-member-posts,
body.v36-community-expanded .v36-community-social-live,
body.v36-community-expanded .v36-restored-live,
body.v36-community-expanded .v36-restored-live-card{
  position:relative!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

body.v36-community-expanded .v36-community-tabs{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-x:contain!important;
}

/* Touch landscape: YouTube is non-interactive by default so a vertical swipe
   over the video belongs to SYNTHIQ. The listener can explicitly enable video
   controls and switch back to page scrolling at any time. Portrait behavior is
   unchanged here; this protection remains landscape-only. */
html.synthiq-community-route.synthiq-touch-landscape .v36-restored-live-frame,
html.synthiq-community-route.synthiq-touch-landscape .v36-youtube-frame{
  position:relative!important;
}
html.synthiq-community-route.synthiq-touch-landscape .v36-restored-live-frame iframe,
html.synthiq-community-route.synthiq-touch-landscape .v36-youtube-frame iframe{
  pointer-events:none!important;
}
html.synthiq-community-route.synthiq-touch-landscape .v36-restored-live-frame.synthiq-community-video-enabled iframe,
html.synthiq-community-route.synthiq-touch-landscape .v36-youtube-frame.synthiq-community-video-enabled iframe{
  pointer-events:auto!important;
}
.synthiq-community-video-mode{display:none}
html.synthiq-community-route.synthiq-touch-landscape .synthiq-community-video-mode{
  position:absolute!important;
  top:max(8px,env(safe-area-inset-top))!important;
  right:max(8px,env(safe-area-inset-right))!important;
  z-index:20!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:40px!important;
  padding:0 12px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:999px!important;
  background:rgba(12,14,18,.86)!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(0,0,0,.32)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  font:inherit!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1!important;
  touch-action:manipulation!important;
  pointer-events:auto!important;
}

/* ABOUT -----------------------------------------------------------------
   About also stays in normal document flow. Do not create a body/html scroll
   container; only ensure the route's grid and shared host can grow naturally. */
@media (orientation:landscape){
  body[data-clean-view="about"]{
    position:static!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body[data-clean-view="about"] .app-shell{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    align-items:start!important;
  }
  body[data-clean-view="about"] #publicViewHost:not([hidden]){
    display:block!important;
    position:relative!important;
    inset:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    align-self:start!important;
  }
  body[data-clean-view="about"] #publicViewContent,
  body[data-clean-view="about"] .v36-about-story{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }
}

@media (orientation:landscape) and (min-width:861px){
  body[data-clean-view="about"] .app-shell{
    grid-template-columns:minmax(160px,220px) minmax(0,1fr)!important;
    grid-auto-rows:auto!important;
  }
  body[data-clean-view="about"] .sidebar-left{
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
  }
  body[data-clean-view="about"] #publicViewHost:not([hidden]){
    grid-column:2!important;
    grid-row:1!important;
    justify-self:stretch!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
}

@media (orientation:landscape) and (max-height:560px) and (max-width:1180px),
       (orientation:landscape) and (max-width:860px){
  body[data-clean-view="about"] .app-shell{
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
  }
  body[data-clean-view="about"] .sidebar-left,
  body[data-clean-view="about"] .sidebar-right{
    display:none!important;
  }
  body[data-clean-view="about"] #publicViewHost:not([hidden]){
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    max-width:100%!important;
  }
}

/* <<< css/v3.6-community-about-landscape-hardening-v2.css */


/* >>> css/v3.6-synthiq-music-cleanup-v1.css */
/* SYNTHIQ V3.6 — SYNTHIQ Music cleanup v1.
   Presentation-only cleanup: keep Recommended for You as the sole home shelf.
   History, generated collections, recommendation data, queue, and playback remain
   owned by the existing SYNTHIQ Music runtime. */

body.v36-synthiq-music-view .v36-sm-home > .v36-sm-home-section:nth-child(2),
body.v36-synthiq-music-view .v36-sm-home > .v36-sm-home-section:nth-child(3),
body.v36-synthiq-music-view .v36-sm-home > .v36-sm-home-section:nth-child(4){
  display:none!important;
}

/* Focused Music search selector. Native horizontal scrolling prevents overlap on
   smaller touch screens without adding touch/pointer interception. */
body.v36-synthiq-music-view .v36-sm-search-mode-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:-4px 0 2px!important;
  padding:0 3px!important;
  min-width:0!important;
}
body.v36-synthiq-music-view .v36-sm-search-mode-label{
  color:var(--text-dim,#aeb4bd)!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  flex:0 0 auto!important;
}
body.v36-synthiq-music-view .v36-sm-search-mode-tabs{
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  padding:3px!important;
  border:1px solid var(--border,#3a414a)!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--surface,#222831) 82%,transparent)!important;
  min-width:0!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain!important;
  scrollbar-width:thin!important;
}
body.v36-synthiq-music-view .v36-sm-search-mode-tabs button{
  min-height:36px!important;
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:0 11px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:var(--text-dim,#aeb4bd)!important;
  font:inherit!important;
  font-size:11px!important;
  font-weight:800!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
body.v36-synthiq-music-view .v36-sm-search-mode-tabs button svg{
  width:15px!important;
  height:15px!important;
  pointer-events:none!important;
}
body.v36-synthiq-music-view .v36-sm-search-mode-tabs button.active{
  background:color-mix(in srgb,var(--accent,#f7a12e) 16%,transparent)!important;
  color:var(--accent,#f7a12e)!important;
}

/* Results view switch: same result DOM and same Play/Queue handlers in both modes. */
body.v36-synthiq-music-view .v36-sm-results-card .v36-sm-head{
  flex-wrap:wrap!important;
}
body.v36-synthiq-music-view .v36-sm-view-toggle{
  display:inline-flex!important;
  align-items:center!important;
  gap:3px!important;
  margin-left:auto!important;
  padding:3px!important;
  border:1px solid var(--border,#3a414a)!important;
  border-radius:11px!important;
  background:color-mix(in srgb,var(--surface,#222831) 82%,transparent)!important;
}
body.v36-synthiq-music-view .v36-sm-view-toggle button{
  min-width:40px!important;
  min-height:36px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--text-dim,#aeb4bd)!important;
  font:inherit!important;
  font-size:11px!important;
  font-weight:800!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
body.v36-synthiq-music-view .v36-sm-view-toggle button svg{
  width:16px!important;
  height:16px!important;
  pointer-events:none!important;
}
body.v36-synthiq-music-view .v36-sm-view-toggle button.active{
  background:color-mix(in srgb,var(--accent,#f7a12e) 16%,transparent)!important;
  color:var(--accent,#f7a12e)!important;
}
body.v36-synthiq-music-view[data-synthiq-music-search-mode="albums"] .v36-sm-view-toggle,
body.v36-synthiq-music-view[data-synthiq-music-search-mode="playlists"] .v36-sm-view-toggle{
  display:none!important;
}
body.v36-synthiq-music-view[data-synthiq-music-search-mode="albums"] .v36-sm-results-card .v36-sm-results,
body.v36-synthiq-music-view[data-synthiq-music-search-mode="playlists"] .v36-sm-results-card .v36-sm-results{
  display:block!important;
  grid-template-columns:none!important;
  max-height:none!important;
  overflow:visible!important;
}
body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="grid"] .v36-sm-results{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;
  max-height:none!important;
  overflow:visible!important;
  gap:0!important;
}
body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="grid"] .v36-sm-result{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-content:start!important;
  align-items:start!important;
  min-width:0!important;
  padding:11px!important;
}
body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="grid"] .v36-sm-thumb{
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
  border-radius:12px!important;
}
body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="grid"] .v36-sm-copy2{
  padding-top:9px!important;
}
body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="list"] .v36-sm-results{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  max-height:none!important;
  overflow:visible!important;
  gap:0!important;
}
body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="list"] .v36-sm-result{
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
  padding:10px 12px!important;
}
body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="list"] .v36-sm-thumb{
  width:112px!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
  border-radius:10px!important;
}
body.v36-synthiq-music-view .v36-sm-results-card .v36-sm-placeholder{
  grid-column:1/-1!important;
}
body.v36-synthiq-music-view .v36-sm-media-badge{
  display:inline-flex!important;
  width:max-content!important;
  align-items:center!important;
  margin-top:6px!important;
  padding:3px 6px!important;
  border:1px solid color-mix(in srgb,var(--border,#3a414a) 82%,transparent)!important;
  border-radius:999px!important;
  color:var(--text-dim,#aeb4bd)!important;
  font-size:8px!important;
  font-weight:800!important;
  letter-spacing:.06em!important;
  line-height:1!important;
  text-transform:uppercase!important;
}
body.v36-synthiq-music-view .v36-sm-media-badge[data-media-type="song"],
body.v36-synthiq-music-view .v36-sm-media-badge[data-media-type="lyrics"],
body.v36-synthiq-music-view .v36-sm-media-badge[data-media-type="musicvideo"]{
  color:var(--accent,#f7a12e)!important;
  border-color:color-mix(in srgb,var(--accent,#f7a12e) 38%,var(--border,#3a414a))!important;
}

@media(max-width:700px){
  body.v36-synthiq-music-view .v36-sm-search-mode-row{
    align-items:stretch!important;
    flex-direction:column!important;
    gap:5px!important;
    margin:-2px 0 2px!important;
  }
  body.v36-synthiq-music-view .v36-sm-search-mode-tabs{
    width:100%!important;
  }
  body.v36-synthiq-music-view .v36-sm-search-mode-tabs button{
    min-height:40px!important;
    padding:0 9px!important;
    font-size:10px!important;
  }
  body.v36-synthiq-music-view .v36-sm-view-toggle button{
    min-width:40px!important;
    min-height:40px!important;
    padding:0 9px!important;
  }
  body.v36-synthiq-music-view .v36-sm-view-toggle button span{
    display:none!important;
  }
  body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="grid"] .v36-sm-results{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="grid"] .v36-sm-result{
    padding:8px!important;
  }
  body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="grid"] .v36-sm-copy2{
    padding-top:7px!important;
  }
  body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="grid"] .v36-sm-actions{
    gap:4px!important;
  }
  body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="grid"] .v36-sm-actions button{
    min-height:30px!important;
    padding:3px 6px!important;
    font-size:9px!important;
  }
  body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="list"] .v36-sm-result{
    grid-template-columns:94px minmax(0,1fr)!important;
    gap:9px!important;
    padding:9px 8px!important;
  }
  body.v36-synthiq-music-view .v36-sm-results-card[data-sm-track-view="list"] .v36-sm-thumb{
    width:94px!important;
  }
}

/* <<< css/v3.6-synthiq-music-cleanup-v1.css */


html:not(.synthiq-current-ready) .navbar,
html:not(.synthiq-current-ready) .app-shell,
html:not(.synthiq-current-ready) .mini-player,
html:not(.synthiq-current-ready) #publicViewHost,
html:not(.synthiq-current-ready) .v36-now-playing-view {
  opacity: 0;
  visibility: hidden;
}
html.synthiq-current-ready .navbar,
html.synthiq-current-ready .app-shell,
html.synthiq-current-ready .mini-player,
html.synthiq-current-ready #publicViewHost,
html.synthiq-current-ready .v36-now-playing-view {
  opacity: 1;
  visibility: visible;
  transition: opacity .12s ease;
}
.navbar-right [aria-label="Notifications"],
.navbar-right [aria-label^="Notifications"],
.v36-notification-panel,
#notifBadge {display:none!important}


/* ===== css/synthiq-core.css ===== */
/* SYNTHIQ V3.7 core layer
   Loaded after the legacy bundle. Contains only new, namespaced (.sq-*) components and
   zero-specificity baselines, so it adds no new !important layers.
   1. Tokens   2. Accessibility baseline   3. Toasts   4. Dialogs   5. Lyrics view
*/

/* 1. Tokens ---------------------------------------------------------------- */
:root{
  --sq-safe-top:env(safe-area-inset-top,0px);
  --sq-safe-right:env(safe-area-inset-right,0px);
  --sq-safe-bottom:env(safe-area-inset-bottom,0px);
  --sq-safe-left:env(safe-area-inset-left,0px);
  /* Dark (default). The app sets body.light-theme and html[data-synthiq-theme] (see v3.6-app-identity.js);
     both selectors are handled below so the components follow device, light and dark preferences. */
  --sq-surface:#1d2228;
  --sq-surface-soft:#262d35;
  --sq-text:#f7f8fa;
  --sq-dim:#9ba4ae;
  --sq-border:rgba(255,255,255,.12);
  --sq-hover:rgba(255,255,255,.07);
  --sq-accent:var(--accent,#f7a12e);
  --sq-accent-text:var(--sq-accent);
  --sq-on-accent:#17120a;
  --sq-danger:#ff6b6b;
  --sq-on-danger:#1a0505;
  --sq-ok:#4cd694;
  --sq-scrim:rgba(0,0,0,.6);
  --sq-ly-dim:.38;
  --sq-ly-past:.5;
  --sq-radius:16px;
  --sq-shadow:0 24px 70px rgba(0,0,0,.5);
  /* Fixed bottom elements stack: bottom nav -> mini player -> toasts. */
  --sq-toast-bottom:calc(var(--sq-safe-bottom) + var(--player-h,72px) + 12px);
}
@media (max-width:700px) and (orientation:portrait){
  :root{--sq-toast-bottom:calc(var(--sq-safe-bottom) + var(--player-h,72px) + var(--v36-portrait-nav-h,0px) + 12px)}
}

body.light-theme,:root[data-synthiq-theme="light"]{
  --sq-surface:#ffffff;
  --sq-surface-soft:#edf1f4;
  --sq-text:#17191d;
  --sq-dim:#5c6670;
  --sq-border:rgba(23,25,29,.16);
  --sq-hover:rgba(23,25,29,.06);
  --sq-accent-text:color-mix(in srgb,var(--sq-accent) 58%,#1a0d00); /* readable on white */
  --sq-danger:#c92a2a;
  --sq-on-danger:#ffffff;
  --sq-ok:#12805a;
  --sq-scrim:rgba(20,26,33,.45);
  --sq-ly-dim:.5;
  --sq-ly-past:.62;
  --sq-shadow:0 20px 56px rgba(20,26,33,.22);
}
/* Native controls (range, textarea, scrollbars) follow the same theme. */
.sq-dialog,.sq-lyrics,.sq-toasts{color-scheme:dark}
body.light-theme .sq-dialog,body.light-theme .sq-lyrics,body.light-theme .sq-toasts,
:root[data-synthiq-theme="light"] .sq-dialog,:root[data-synthiq-theme="light"] .sq-lyrics,:root[data-synthiq-theme="light"] .sq-toasts{color-scheme:light}

/* 2. Accessibility baseline (zero specificity: never overrides component rules) */
:where(button,[role="button"],a[href],input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--sq-accent);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* 3. Toasts ----------------------------------------------------------------- */
.sq-toasts{
  position:fixed;z-index:2147483000;inset:auto;left:50%;bottom:var(--sq-toast-bottom);
  transform:translateX(-50%);margin:0;padding:0;border:0;background:transparent;overflow:visible;
  width:min(440px,calc(100vw - var(--sq-safe-left) - var(--sq-safe-right) - 24px));
  display:flex;flex-direction:column;gap:8px;pointer-events:none;color:var(--sq-text);
}
.sq-toasts:empty{display:none}
.sq-toast{
  pointer-events:auto;display:flex;align-items:center;gap:10px;padding:10px 6px 10px 14px;
  background:var(--sq-surface);color:var(--sq-text);border:1px solid var(--sq-border);
  border-left:4px solid var(--sq-accent);border-radius:12px;box-shadow:var(--sq-shadow);
  font:500 14px/1.35 Inter,system-ui,sans-serif;animation:sq-rise .18s ease-out;
}
.sq-toast.sq-success{border-left-color:var(--sq-ok)}
.sq-toast.sq-error{border-left-color:var(--sq-danger)}
.sq-toast.sq-out{animation:sq-fall .16s ease-in forwards}
.sq-toast-msg{flex:1;min-width:0;overflow-wrap:anywhere;white-space:pre-line}
.sq-toast button{
  flex:0 0 auto;min-width:44px;min-height:44px;border:0;border-radius:10px;background:transparent;
  color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;
}
.sq-toast .sq-toast-action{color:var(--sq-accent-text);font-weight:700;padding:0 10px}
.sq-toast .sq-toast-close{color:var(--sq-dim);font-size:22px;line-height:1}
@keyframes sq-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sq-fall{to{opacity:0;transform:translateY(8px)}}

/* 4. Dialogs ---------------------------------------------------------------- */
.sq-dialog{
  box-sizing:border-box;padding:0;border:1px solid var(--sq-border);border-radius:var(--sq-radius);
  background:var(--sq-surface);color:var(--sq-text);box-shadow:var(--sq-shadow);
  width:min(440px,calc(100vw - var(--sq-safe-left) - var(--sq-safe-right) - 24px));
  max-height:calc(100dvh - var(--sq-safe-top) - var(--sq-safe-bottom) - 24px);overflow:auto;
  overscroll-behavior:contain;
}
.sq-dialog::backdrop{background:var(--sq-scrim,rgba(0,0,0,.6));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sq-dialog[open]{animation:sq-pop .16s ease-out}
.sq-card{margin:0;padding:20px 20px 16px;display:grid;gap:12px;font:400 14px/1.45 Inter,system-ui,sans-serif}
.sq-card h2{margin:0;font:700 18px/1.25 Inter,system-ui,sans-serif}
.sq-msg{margin:0;color:var(--sq-dim);white-space:pre-line;overflow-wrap:anywhere}
.sq-field{display:grid;gap:6px;font-weight:600}
.sq-field input,.sq-field textarea{
  box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid var(--sq-border);border-radius:10px;
  background:var(--sq-surface-soft);color:var(--sq-text);font:400 16px/1.4 Inter,system-ui,sans-serif; /* 16px stops iOS focus-zoom */
}
.sq-field textarea{resize:vertical;min-height:96px}
.sq-field textarea.sq-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}
.sq-field small{color:var(--sq-dim);font-weight:400}
.sq-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.sq-actions button{
  min-height:44px;min-width:88px;padding:0 16px;border-radius:12px;border:1px solid var(--sq-border);
  background:var(--sq-surface-soft);color:var(--sq-text);font:600 14px Inter,system-ui,sans-serif;
  cursor:pointer;touch-action:manipulation;
}
.sq-actions .sq-primary{background:var(--sq-accent);border-color:transparent;color:var(--sq-on-accent)}
.sq-danger .sq-primary{background:var(--sq-danger);color:var(--sq-on-danger)}
.sq-actions button:disabled{opacity:.45;cursor:not-allowed}
@keyframes sq-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:600px){
  .sq-dialog{margin:auto 0 0;width:100%;max-width:none;border-radius:var(--sq-radius) var(--sq-radius) 0 0;border-bottom:0}
  .sq-card{padding-bottom:calc(16px + var(--sq-safe-bottom))}
  .sq-actions{flex-direction:column-reverse}
  .sq-actions button{width:100%}
}

/* 5. Lyrics view ------------------------------------------------------------- */
.sq-lyrics{
  box-sizing:border-box;position:fixed;inset:0;padding:0;margin:0;border:0;width:100%;max-width:none;height:100%;max-height:none;
  background:var(--sq-surface);color:var(--sq-text);overflow:hidden;
}
.sq-lyrics::backdrop{background:#000}
.sq-lyrics[open]{display:grid;animation:sq-pop .18s ease-out;
  grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head" "main" "transport";
  padding:var(--sq-safe-top) var(--sq-safe-right) var(--sq-safe-bottom) var(--sq-safe-left);
}
.sq-ly-head{grid-area:head;display:flex;align-items:center;gap:10px;padding:10px 12px;min-width:0}
.sq-ly-cover{width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--sq-surface-soft);flex:0 0 auto}
.sq-ly-meta{min-width:0;flex:1}
.sq-ly-title{margin:0;font:700 16px/1.25 Inter,system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-ly-artist{margin:2px 0 0;color:var(--sq-dim);font:400 13px/1.3 Inter,system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-ly-tools{display:flex;gap:4px;flex:0 0 auto}
.sq-ly-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 10px;
  border:0;border-radius:12px;background:transparent;color:var(--sq-text);font:600 14px Inter,system-ui,sans-serif;
  cursor:pointer;touch-action:manipulation;
}
.sq-ly-btn:hover{background:var(--sq-hover)}
.sq-ly-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sq-ly-main{grid-area:main;position:relative;min-height:0}
.sq-ly-scroll{
  position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:24px 20px 40dvh;scroll-behavior:auto;font-size:calc(clamp(22px,3.4vw,34px) * var(--sq-ly-scale,1));
  mask-image:linear-gradient(to bottom,transparent 0,#000 40px,#000 calc(100% - 60px),transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px,#000 calc(100% - 60px),transparent 100%);
}
.sq-ly-inner{max-width:720px;margin:0 auto}
.sq-ly-line{
  display:block;width:100%;margin:0;padding:.28em .1em;border:0;background:transparent;color:var(--sq-text);
  font:700 1em/1.3 Inter,system-ui,sans-serif;text-align:left;opacity:var(--sq-ly-dim);cursor:pointer;
  transform-origin:left center;transition:opacity .25s,transform .25s;
}
.sq-ly-line:hover{opacity:.65}
.sq-ly-line.is-past{opacity:var(--sq-ly-past)}
.sq-ly-line.is-active{opacity:1;transform:scale(1.04);color:var(--sq-accent-text)}
.sq-ly-line.is-gap{height:1.2em;padding:0;cursor:default;pointer-events:none}
.sq-ly-plain p{margin:0 0 1.1em;font:500 1em/1.55 Inter,system-ui,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
.sq-ly-empty{max-width:420px;margin:12dvh auto 0;text-align:center;color:var(--sq-dim);font:400 16px/1.5 Inter,system-ui,sans-serif}
.sq-ly-empty .sq-ly-btn{margin-top:12px;background:var(--sq-surface-soft)}
.sq-ly-resume{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);min-height:44px;padding:0 18px;border:0;border-radius:999px;
  background:var(--sq-accent);color:var(--sq-on-accent);font:700 14px Inter,system-ui,sans-serif;box-shadow:var(--sq-shadow);cursor:pointer;
}
.sq-ly-resume[hidden]{display:none}
.sq-ly-transport{grid-area:transport;display:grid;gap:4px;padding:6px 16px 12px}
.sq-ly-seek{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;color:var(--sq-dim);font:500 12px Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.sq-ly-seek input{width:100%;min-height:44px;margin:0;accent-color:var(--sq-accent);touch-action:none}
.sq-ly-controls{display:flex;align-items:center;justify-content:center;gap:12px}
.sq-ly-play{min-width:56px;min-height:56px;border-radius:50%;background:var(--sq-accent);color:var(--sq-on-accent)}
.sq-ly-play:hover{background:var(--sq-accent);filter:brightness(1.08)}

/* Landscape phones / tablets / desktop: cover + controls left, lyrics right. */
@media (min-width:900px),(orientation:landscape) and (max-height:560px){
  .sq-lyrics[open]{
    grid-template-columns:minmax(240px,34%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:"head main" "transport main";
  }
  .sq-ly-head{align-self:start;flex-wrap:wrap;align-content:flex-start}
  .sq-ly-close{order:-3}
  .sq-ly-tools{order:-2;flex:1 1 calc(100% - 56px);justify-content:flex-end}
  .sq-ly-cover{width:min(160px,24dvh);height:min(160px,24dvh)}
  .sq-ly-meta{flex:1 1 100%}
  .sq-ly-title,.sq-ly-artist{white-space:normal}
  .sq-ly-scroll{padding-top:12dvh}
}
@media (orientation:landscape) and (max-height:560px){
  .sq-ly-cover{display:none}
  .sq-ly-scroll{padding-top:16px;font-size:calc(clamp(18px,3.2vw,28px) * var(--sq-ly-scale,1))}
}

/* 6. Lyrics editor + tap-to-stamp ------------------------------------------- */
.sq-editor{width:min(720px,calc(100vw - var(--sq-safe-left) - var(--sq-safe-right) - 24px))}
.sq-tabs{display:flex;gap:6px;padding:4px;border-radius:12px;background:var(--sq-surface-soft)}
.sq-tabs [role="tab"]{
  flex:1;min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--sq-dim);
  font:600 14px Inter,system-ui,sans-serif;cursor:pointer;touch-action:manipulation;
}
.sq-tabs [role="tab"][aria-selected="true"]{background:var(--sq-surface);color:var(--sq-text);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.sq-editor section[hidden]{display:none}
.sq-editor section{display:grid;gap:10px}
.sq-hint{margin:0;color:var(--sq-dim);font-size:13px}
.sq-hint kbd{padding:1px 6px;border:1px solid var(--sq-border);border-radius:6px;background:var(--sq-surface-soft);font:600 12px ui-monospace,Menlo,Consolas,monospace}
.sq-row{display:flex;gap:8px;flex-wrap:wrap}
.sq-chip{
  min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--sq-border);border-radius:12px;
  background:var(--sq-surface-soft);color:var(--sq-text);font:600 14px Inter,system-ui,sans-serif;cursor:pointer;touch-action:manipulation;
}
.sq-chip:hover{background:var(--sq-hover)}
.sq-stamp-list{
  display:grid;gap:2px;max-height:min(42dvh,360px);overflow-y:auto;overscroll-behavior:contain;padding:4px;
  border:1px solid var(--sq-border);border-radius:12px;background:var(--sq-surface-soft);
}
.sq-stamp-row{
  display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:baseline;width:100%;min-height:44px;padding:8px 10px;
  border:0;border-radius:9px;background:transparent;color:var(--sq-text);text-align:left;font:500 15px/1.35 Inter,system-ui,sans-serif;cursor:pointer;
}
.sq-stamp-row .t{color:var(--sq-dim);font:600 13px ui-monospace,Menlo,Consolas,monospace}
.sq-stamp-row.is-stamped .t{color:var(--sq-ok)}
.sq-stamp-row.is-next{background:var(--sq-surface);outline:2px solid var(--sq-accent);outline-offset:-2px}
.sq-stamp-bar{display:grid;gap:10px}
.sq-stamp-time{text-align:center;font:700 28px/1 ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.sq-stamp-transport,.sq-stamp-sub{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.sq-stamp-main{
  min-height:64px;border:0;border-radius:16px;background:var(--sq-accent);color:var(--sq-on-accent);
  font:800 18px Inter,system-ui,sans-serif;cursor:pointer;touch-action:manipulation;
}
.sq-stamp-main:active{filter:brightness(.92);transform:scale(.99)}
.sq-delay{display:inline-flex;align-items:center;gap:6px;color:var(--sq-dim);font:500 13px Inter,system-ui,sans-serif}
.sq-delay select{min-height:44px;border:1px solid var(--sq-border);border-radius:10px;background:var(--sq-surface-soft);color:var(--sq-text);font:inherit;padding:0 8px}
@media (max-width:600px){
  .sq-editor{width:100%;max-height:calc(100dvh - var(--sq-safe-top));border-radius:var(--sq-radius) var(--sq-radius) 0 0}
  .sq-stamp-list{max-height:34dvh}
}
@media (orientation:landscape) and (max-height:560px){
  .sq-editor{width:min(900px,calc(100vw - var(--sq-safe-left) - var(--sq-safe-right) - 16px))}
  .sq-stamp-list{max-height:28dvh}.sq-stamp-main{min-height:52px}
}