/* Shared public pages — discovery, auth, library and profile */

.page-head {
  position: relative;
  padding: 12px 0 24px;
  margin-bottom: 24px;
}
.page-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 78px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--od-accent), var(--tu-cyan));
}
.page-eyebrow {
  margin: 0 0 8px;
  color: var(--tu-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}
.page-head h1 {
  margin: 0 0 8px;
  color: var(--od-text);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -.04em;
}
.page-lead {
  max-width: 620px;
  margin: 0;
  color: var(--od-text-muted);
  font-size: 14px;
  line-height: 1.8;
}

.section-block { margin-bottom: 42px; }
.section-head { margin-bottom: 16px; }
.section-head h2 { color: var(--od-text); }
.section-eyebrow { color: var(--tu-cyan); }

/* Shared cards and tabs */
.page-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin-bottom: 26px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
  background: rgba(18,18,26,.66);
}
.page-tabs a {
  min-height: 40px;
  padding: 10px 20px;
  border-radius: 11px;
  color: var(--od-text-muted);
  font-size: 13px;
  transition: color .2s, background .2s, transform .2s;
}
.page-tabs a:hover { color: var(--od-text); background: rgba(255,255,255,.05); }
.page-tabs a.active {
  color: #0a0a0f;
  background: var(--od-accent);
  box-shadow: 0 7px 20px var(--od-accent-glow);
}
.carousel-row {
  gap: 14px;
  padding: 4px 3px 12px;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.media-card {
  flex-basis: 180px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 17px;
  background: rgba(18,18,26,.62);
}
.media-card:hover { border-color: rgba(139,92,246,.35); }
.media-card-cover { border-radius: 12px; }
.media-card-cover img { transition: transform .35s var(--motion-spring); }
.media-card:hover .media-card-cover img { transform: scale(1.06); }
.media-card-play {
  background: linear-gradient(135deg, rgba(139,92,246,.75), rgba(10,10,15,.55));
}
.media-card-body strong { color: var(--od-text); }
.media-card-dl-badge {
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 7px;
}

/* Search */
.search-panel {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  background: rgba(18,18,26,.68);
  box-shadow: 0 16px 38px rgba(0,0,0,.15);
}
.search-panel-grid { gap: 16px; }
.field { gap: 8px; }
.field label { color: var(--od-text-muted); }
.field input,
.field select,
.field textarea {
  min-height: 46px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(30,215,96,.5);
  box-shadow: var(--od-focus-ring);
}
.search-result-count { color: var(--od-text-muted); }
.search-discovery {
  padding: 28px;
  margin-top: 26px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 12%, rgba(139,92,246,.16), transparent 32%),
    rgba(18,18,26,.7);
}
.search-discovery__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.search-discovery__head h2 { margin: 0; color: var(--od-text); font-size: 23px; }
.search-discovery__head svg { width: 48px; height: 48px; color: var(--tu-glow); }
.search-genre-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.search-genre-chips a {
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  color: var(--od-text-muted);
  background: rgba(255,255,255,.035);
  font-size: 13px;
  transition: color .2s, border-color .2s, transform .2s, background .2s;
}
.search-genre-chips a:hover {
  color: var(--od-text);
  border-color: rgba(30,215,96,.3);
  background: rgba(30,215,96,.08);
  transform: translateY(-2px);
}

/* Tables */
.track-table-wrap {
  border-color: rgba(255,255,255,.08);
  background: rgba(18,18,26,.62);
}
.track-table-head { border-bottom-color: rgba(255,255,255,.08); }
.track-row { border-bottom-color: rgba(255,255,255,.06); }
.track-row:hover { background: rgba(139,92,246,.08); }
.track-info strong { color: var(--od-text); }
.btn-dl-sm {
  border-color: rgba(30,215,96,.26);
  color: var(--od-accent);
  background: rgba(30,215,96,.08);
}
.btn-dl-sm:hover { color: #0a0a0f; background: var(--od-accent); }

/* Empty state */
.empty {
  padding: 56px 25px;
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(18,18,26,.6);
}
.empty h3 { color: var(--od-text); font-size: 20px; }
.empty p { color: var(--od-text-muted); }

/* Library */
.library-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.library-stat-card {
  display: flex;
  min-height: 82px;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  transition: border-color .2s, transform .2s;
}
.library-stat-card:hover { border-color: rgba(139,92,246,.35); transform: translateY(-2px); }
.library-stat-card > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.library-stat-card strong { color: var(--od-text); font-size: 18px; }
.library-stat-card small { color: var(--od-text-muted); font-size: 11px; }
.library-stat-card__icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 12px;
  color: var(--od-accent);
  background: rgba(30,215,96,.1);
}
.library-stat-card__icon svg { width: 21px; height: 21px; }
.library-stat-card--action .library-stat-card__icon { color: var(--tu-cyan); background: rgba(34,211,238,.1); }
.library-stat-card__arrow { width: 18px; height: 18px; margin-right: auto; color: var(--od-text-dim); }

/* Profile */
.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr);
  gap: 16px;
  max-width: 850px;
}
.profile-card { padding: 26px; border: 1px solid rgba(255,255,255,.1); }
.profile-avatar {
  width: 76px;
  height: 76px;
  border: 4px solid rgba(255,255,255,.1);
  box-shadow: 0 10px 28px var(--tu-glow-soft);
}
.profile-info h2 { color: var(--od-text); font-size: 23px; }
.profile-stats { grid-column: 2; grid-row: 1; padding: 22px; }
.profile-stat { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.035); }
.profile-stat b { color: var(--od-accent); }
.profile-actions { grid-column: 1 / -1; }

/* Auth */
.auth-wrap {
  min-height: calc(100dvh - var(--header-h) - 160px);
  align-items: center;
}
.auth-card {
  position: relative;
  overflow: hidden;
  width: min(460px, 100%);
  padding: 34px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  box-shadow: 0 25px 70px rgba(0,0,0,.3);
}
.auth-card::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--tu-glow-soft);
  filter: blur(35px);
  pointer-events: none;
}
.auth-card > * { position: relative; }
.auth-eyebrow { color: var(--tu-cyan); }
.auth-card h1 { color: var(--od-text); font-size: 29px; }
.auth-lead { color: var(--od-text-muted); }
.auth-msg { border-radius: 10px; }
.auth-foot a { color: var(--od-accent); }

@media (max-width: 760px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-stats { grid-column: 1; grid-row: auto; }
  .profile-actions { grid-column: 1; }
}
@media (max-width: 600px) {
  .page-head { padding-top: 4px; }
  .page-head h1 { font-size: 30px; }
  .page-tabs a { padding-inline: 14px; }
  .search-panel { padding: 16px; }
  .search-discovery { padding: 20px; }
  .library-overview { gap: 9px; }
  .library-stat-card { padding: 12px; }
  .library-stat-card strong { font-size: 14px; }
  .library-stat-card__icon { width: 36px; height: 36px; }
  .auth-card { padding: 25px 19px; border-radius: 19px; }
}