/* ── Home feed — rectangular system ── */

.hsec { margin: 22px 0 6px; }

/* Featured hero */
.feat-hero {
  position: relative;
  height: 280px;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
}
.feat-slide {
  position: absolute; inset: 0;
  opacity: 0; transform: translateX(24px);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;
}
.feat-slide.active { opacity: 1; transform: none; pointer-events: auto; }
.feat-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(28px) brightness(.45);
  transform: scale(1.12);
}
.feat-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,5,16,.94) 0%, rgba(8,5,16,.7) 42%, rgba(8,5,16,.28) 100%);
}
html[data-theme="light"] .feat-bg { filter: blur(28px) brightness(.9); }
html[data-theme="light"] .feat-bg::after {
  background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.65) 45%, rgba(255,255,255,.28) 100%);
}
.feat-inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; align-items: center; gap: 24px;
  padding: 28px 32px;
}
.feat-cover {
  width: 180px; height: 180px;
  border-radius: 2px;
  object-fit: cover; flex-shrink: 0;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  background: var(--grad);
  border: 1px solid rgba(255,255,255,.12);
}
.feat-info { min-width: 0; }
.feat-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #C4B5FD;
  background: rgba(168,85,247,.14);
  border: 1px solid rgba(168,85,247,.28);
  border-radius: 1px;
  padding: 3px 8px; margin-bottom: 12px;
}
html[data-theme="light"] .feat-tag { color: #7C3AED; }
.feat-title {
  font-family: var(--display), 'Unbounded', sans-serif;
  font-size: clamp(1.35rem, 2.8vw, 2.2rem);
  font-weight: 800; color: var(--text);
  line-height: 1.1; letter-spacing: -.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 46vw;
}
.feat-artist { font-size: 14px; color: var(--text2); margin-top: 8px; }
.feat-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.feat-play {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 20px;
  border-radius: 2px; border: none; cursor: pointer;
  background: var(--grad); color: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 750;
  box-shadow: none; text-decoration: none;
  transition: filter .15s;
}
.feat-play svg { width: 16px; height: 16px; }
.feat-play:hover { filter: brightness(1.08); transform: none; }
.feat-open {
  display: inline-flex; align-items: center;
  height: 42px; padding: 0 18px;
  border-radius: 2px;
  font-size: 13px; font-weight: 700;
  color: var(--text);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.feat-open:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.2);
}
.feat-dots {
  position: absolute; right: 18px; bottom: 14px; z-index: 3;
  display: flex; gap: 5px;
}
.feat-dot {
  width: 8px; height: 8px; border-radius: 1px;
  border: none; background: rgba(255,255,255,.2);
  cursor: pointer; padding: 0; transition: width .15s, background .15s;
}
.feat-dot.on { width: 20px; background: var(--grad); }
@media(max-width:760px){
  .feat-hero { height: auto; }
  .feat-inner { flex-direction: column; align-items: flex-start; padding: 20px; gap: 16px; }
  .feat-cover { width: 112px; height: 112px; }
  .feat-title { max-width: 78vw; white-space: normal; }
}

/* Greeting */
.feed-hi {
  font-family: var(--display), 'Unbounded', sans-serif;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 800;
  color: var(--text);
  margin: 4px 0 16px;
  letter-spacing: -.03em;
}

/* Quick tiles */
.qg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}
@media(max-width:1100px){ .qg { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:480px){ .qg { grid-template-columns: 1fr; } }

.qt {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 58px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
html[data-theme="light"] .qt {
  background: rgba(26,19,37,.04);
  border-color: rgba(26,19,37,.08);
}
.qt:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}
.qt-cover {
  width: 58px; height: 58px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
}
.qt-cover img { width: 100%; height: 100%; object-fit: cover; }
.qt-cover.round {
  border-radius: 2px;
  margin: 7px;
  width: 44px; height: 44px;
}
.qt-cover.round img { border-radius: 2px; }
.qt-cover svg { width: 20px; height: 20px; fill: #fff; }
.qt-l {
  font-size: 13.5px; font-weight: 750; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 48px; letter-spacing: -.01em;
}
.qt-play {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%) translateY(4px);
  width: 34px; height: 34px;
  border-radius: 2px;
  background: var(--grad);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, transform .15s;
  box-shadow: none;
}
.qt:hover .qt-play { opacity: 1; transform: translateY(-50%); }
.qt-play svg { width: 14px; height: 14px; fill: #fff; margin-left: 1px; }

.alb.playing .alb-play { opacity: 1; transform: translateX(-50%) translateY(0); }
.alb.playing .alb-t { color: #C4B5FD; }
.qt.playing .qt-play { opacity: 1; transform: translateY(-50%); }
.qt.playing .qt-l { color: #C4B5FD; }
html[data-theme="light"] .alb.playing .alb-t,
html[data-theme="light"] .qt.playing .qt-l { color: #7C3AED; }

/* Section heads */
.hsec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.hsec-head h2 {
  font-family: var(--display), 'Unbounded', sans-serif;
  font-size: 1.05rem;
  font-weight: 750;
  display: flex; align-items: center; gap: 8px;
  letter-spacing: -.02em;
  margin: 0;
}
.hsec-head h2 svg { width: 15px; height: 15px; stroke: var(--text3); }
.hsec-link {
  font-size: 11px; font-weight: 750;
  color: var(--text3);
  text-decoration: none;
  letter-spacing: .04em; text-transform: uppercase;
  transition: color .15s;
}
.hsec-link:hover { color: var(--text); }

/* Horizontal rails */
.h-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 160px;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.h-rail::-webkit-scrollbar { height: 4px; }
.h-rail::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 1px;
}

.alb { scroll-snap-align: start; }
.alb-cover {
  position: relative;
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  background: var(--grad);
  border: 1px solid rgba(255,255,255,.08);
}
.alb-cover img { width: 100%; height: 100%; object-fit: cover; }
.alb-play {
  position: absolute; left: 50%; bottom: 10px;
  transform: translateX(-50%) translateY(6px);
  width: 40px; height: 40px;
  border-radius: 2px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, transform .15s;
  box-shadow: none; border: none; cursor: pointer;
}
.alb:hover .alb-play { opacity: 1; transform: translateX(-50%) translateY(0); }
.alb-play svg { width: 16px; height: 16px; fill: #fff; margin-left: 1px; }
.alb-t {
  font-size: 13px; font-weight: 750; color: var(--text);
  margin-top: 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.01em;
}
.alb-a {
  font-size: 11.5px; color: var(--text3); margin-top: 2px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.alb-a .feat-tag { color: #C4B5FD; font-weight: 650; }

/* Track rows */
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 20px; }
@media(max-width:1100px){ .t-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:680px){ .t-grid { grid-template-columns: 1fr; } }
.t-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s;
}
.t-row:hover { background: rgba(255,255,255,.04); }
.t-cover {
  width: 42px; height: 42px;
  border-radius: 2px;
  object-fit: cover;
  background: var(--grad);
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.08);
}
.t-meta { flex: 1; min-width: 0; }
.t-t {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-a {
  font-size: 11.5px; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-more {
  background: none; border: none; color: var(--text3);
  cursor: pointer; padding: 6px;
  border-radius: 2px; flex-shrink: 0;
}
.t-more:hover { color: var(--text); background: rgba(255,255,255,.05); }

/* Genres */
.g-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media(max-width:760px){ .g-grid { grid-template-columns: repeat(2, 1fr); } }
.g-chip {
  height: 80px;
  border-radius: 2px;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 12px;
  font-family: var(--display), 'Unbounded', sans-serif;
  font-weight: 750; font-size: 13px; color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.1);
  transition: filter .15s, border-color .15s;
}
.g-chip:hover { filter: brightness(1.08); border-color: rgba(255,255,255,.22); }

/* Artists */
.ar {
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 2px;
  overflow: hidden;
  transition: background .15s, border-color .15s;
}
.ar:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  transform: none;
  box-shadow: none;
}
html[data-theme="light"] .ar {
  background: #fff;
  border-color: rgba(26,19,37,.1);
}
.ar-ph {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--grad);
}
.ar-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-body { padding: 11px 12px 13px; text-align: left; }
.ar-n {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 750; color: var(--text);
  line-height: 1.3; min-width: 0;
  letter-spacing: -.01em;
}
.ar-n span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ar-n .ar-v {
  width: 14px; height: 14px; flex-shrink: 0; color: #A855F7;
  filter: none;
}
.ar-n .ar-v svg { width: 100%; height: 100%; display: block; }
.ar-r {
  font-size: 10px; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; margin-top: 4px;
}
#artists .ar-more { display: none; }
#artists.artists-all .hsec-head h2 svg { display: none; }
#artists.artists-all .h-rail {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: unset;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  overflow-x: visible;
  gap: 12px;
}
#artists.artists-all .ar-more { display: block; }

.h-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text3);
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 2px;
  background: rgba(255,255,255,.02);
}
.h-empty-title {
  font-size: 15px; font-weight: 750; color: var(--text); margin-bottom: 6px;
  letter-spacing: -.01em;
}

/* Monetization band */
.mon {
  position: relative; overflow: hidden;
  border-radius: 2px;
  margin-top: 10px;
  background: linear-gradient(125deg, #1a1028 0%, #0e0e16 55%, #0c1424 100%);
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; padding: 28px 30px;
  box-shadow: none;
}
.mon::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad); pointer-events: none;
}
.mon-glow { display: none; }
.mon-left { position: relative; z-index: 2; max-width: 580px; }
.mon-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #C4B5FD;
  background: rgba(168,85,247,.14);
  border: 1px solid rgba(168,85,247,.28);
  border-radius: 1px;
  padding: 4px 9px; margin-bottom: 12px;
}
.mon-tag svg { stroke: currentColor; fill: none; stroke-width: 2; }
.mon-title {
  font-family: var(--display), 'Unbounded', sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 800; color: #fff;
  line-height: 1.12; letter-spacing: -.03em;
  margin: 0;
}
.mon-sub {
  font-size: 13.5px; color: rgba(255,255,255,.5);
  line-height: 1.6; margin-top: 10px; max-width: 48ch;
}
.mon-stats {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-top: 20px;
}
.mon-stat {
  padding-right: 22px; margin-right: 22px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.mon-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.mon-stat .n {
  font-family: var(--display), 'Unbounded', sans-serif;
  font-weight: 800; font-size: 1.35rem; line-height: 1;
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
}
.mon-stat .l {
  font-size: 10px; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .08em; margin-top: 6px;
  font-weight: 750;
}
.mon-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap;
}
.mon-actions .feat-play:hover { filter: brightness(1.08); box-shadow: none; }
.mon-actions .feat-open {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.mon-actions .feat-open:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.mon-cards {
  position: relative; z-index: 2;
  display: grid; gap: 10px; flex-shrink: 0;
}
.mon-card {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px;
  border-radius: 2px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  font-size: 13px; font-weight: 700; color: #fff;
  min-width: 168px;
  box-shadow: none;
  animation: none;
  transition: background .15s, border-color .15s;
}
.mon-card svg { width: 15px; height: 15px; color: #fff; }
.mon-card .ic {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 2px;
  background: var(--grad);
  box-shadow: none; flex-shrink: 0;
}
.mon-card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  transform: none;
}
.mon-card.mc1, .mon-card.mc2, .mon-card.mc3 { transform: none; animation: none; }
.mon-card.mc1:hover, .mon-card.mc3:hover { transform: none; }

@media(max-width:900px){
  .mon { flex-direction: column; align-items: flex-start; padding: 22px 18px; gap: 20px; }
  .mon-cards {
    display: flex; width: 100%; overflow-x: auto; gap: 8px;
    padding-bottom: 2px; scroll-snap-type: x mandatory;
  }
  .mon-card, .mon-card.mc1, .mon-card.mc2, .mon-card.mc3 {
    transform: none; animation: none; scroll-snap-align: start; flex: 0 0 auto;
  }
  .mon-card:hover, .mon-card.mc1:hover, .mon-card.mc3:hover { transform: none; }
}
@media(max-width:480px){
  .mon { padding: 18px 14px; }
  .mon-stat { padding-right: 16px; margin-right: 16px; }
}

/* deploy-bust 20260719c */