:root {
    --bg: #04070d !important;
    --bg-2: #09111b !important;
    --panel: #0a1220 !important;
    --panel-2: #0d1827 !important;
    --panel-3: #132133 !important;

    --text: #eef4ff !important;
    --muted: #9fb0c8 !important;
    --muted-2: #6e809b !important;

    --line: rgba(190, 215, 255, 0.08) !important;
    --line-strong: rgba(190, 215, 255, 0.16) !important;

    --cyan: #7fd3ff !important;
    --cyan-rgb: 127, 211, 255 !important;

    --mint: #9bf7e3 !important;
    --mint-rgb: 155, 247, 227 !important;

    --magenta: #86a8ff !important;
    --magenta-rgb: 134, 168, 255 !important;

    --purple: #5f7cff !important;
    --purple-rgb: 95, 124, 255 !important;

    --gold: #d7e6ff !important;

    --brand-gradient: linear-gradient(135deg, #7fd3ff 0%, #5f7cff 100%) !important;
    --button-gradient: linear-gradient(135deg, #dff3ff 0%, #8fd5ff 100%) !important;
    --danger-gradient: linear-gradient(135deg, #5c7fff 0%, #89b8ff 100%) !important;

    --glass: rgba(8, 14, 24, 0.78) !important;
    --glass-2: rgba(10, 18, 30, 0.92) !important;
    --card-edge: rgba(180, 210, 255, 0.08) !important;

    --glow-cyan: 0 0 0 1px rgba(127, 211, 255, 0.12), 0 0 32px rgba(127, 211, 255, 0.12) !important;
    --glow-magenta: 0 0 0 1px rgba(95, 124, 255, 0.12), 0 0 32px rgba(95, 124, 255, 0.12) !important;
  }

  body {
    background-color: #03060b !important;
    background-image:
      radial-gradient(circle at top left, rgba(95,124,255,0.14), transparent 28%),
      radial-gradient(circle at top right, rgba(127,211,255,0.10), transparent 24%),
      linear-gradient(180deg, rgba(3,6,11,0.65) 0%, rgba(3,6,11,0.94) 38%, rgba(3,6,11,1) 100%),
      var(--user-bg, none) !important;
    color: var(--text) !important;
  }

  body::before {
    opacity: 0.14 !important;
    background-image:
      linear-gradient(rgba(180,210,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(180,210,255,0.02) 1px, transparent 1px) !important;
  }

  .artist-topbar {
    background: rgba(5, 10, 18, 0.96) !important;
    border-bottom: 1px solid rgba(180,210,255,0.08) !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.42) !important;
  }

  .artist-topbar::before {
    background: linear-gradient(180deg, rgba(8,14,24,0.98) 0%, rgba(5,10,18,0.96) 100%) !important;
  }

  .navbar-brand {
    color: #f3f8ff !important;
    text-shadow: 0 0 24px rgba(127,211,255,0.12) !important;
  }

  .navbar-brand-dot {
    background: linear-gradient(135deg, #a6e0ff 0%, #6f8dff 100%) !important;
    box-shadow: 0 0 22px rgba(127,211,255,0.42) !important;
  }

  .brand-subline {
    color: #8fa2be !important;
  }

  .artist-enter-chip {
    border: 1px solid rgba(180,210,255,0.14) !important;
    background: linear-gradient(135deg, rgba(18,28,42,0.88), rgba(10,16,26,0.94)) !important;
    color: #eef5ff !important;
    box-shadow: 0 0 0 1px rgba(180,210,255,0.03), 0 0 22px rgba(127,211,255,0.08) !important;
  }

  .artist-enter-chip i {
    color: #9fdcff !important;
  }

  .artist-marquee {
    border: 1px solid rgba(180,210,255,0.08) !important;
    background: linear-gradient(90deg, rgba(34,49,74,0.48), rgba(255,255,255,0.015), rgba(24,44,74,0.42)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 26px rgba(0,0,0,0.18) !important;
  }

  .artist-marquee-track {
    color: rgba(220,234,255,0.74) !important;
  }

  .artist-marquee-track span strong {
    color: #ffffff !important;
  }

  .profile-section {
    border: 1px solid rgba(180,210,255,0.08) !important;
    background: linear-gradient(180deg, rgba(7,12,20,0.96), rgba(4,8,14,0.99)) !important;
    box-shadow: 0 40px 120px rgba(0,0,0,0.58) !important;
  }

  .artist-hero-shell::before {
    background:
      radial-gradient(circle at top left, rgba(95,124,255,0.18), transparent 24%),
      radial-gradient(circle at top right, rgba(127,211,255,0.10), transparent 24%),
      linear-gradient(180deg, rgba(4,8,14,0.96), rgba(3,6,12,0.99)) !important;
  }

  .artist-hero-shell::after {
    background:
      linear-gradient(90deg, rgba(2,6,12,0.92) 0%, rgba(2,6,12,0.66) 38%, rgba(2,6,12,0.44) 60%, rgba(2,6,12,0.72) 100%),
      radial-gradient(circle at 22% 18%, rgba(95,124,255,0.16), transparent 24%),
      radial-gradient(circle at 84% 20%, rgba(127,211,255,0.12), transparent 22%) !important;
  }

  .artist-hero-lines {
    opacity: .42 !important;
    background:
      linear-gradient(130deg, transparent 0 48%, rgba(127,211,255,0.06) 48.5%, transparent 49%),
      linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px) !important;
  }

  .artist-brand-banner {
    border: 1px solid rgba(180,210,255,0.08) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,0.42) !important;
  }

  .artist-brand-banner-overlay {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.34) 42%, rgba(0,0,0,0.78) 100%),
      linear-gradient(90deg, rgba(4,8,14,0.62) 0%, rgba(4,8,14,0.08) 45%, rgba(4,8,14,0.42) 100%) !important;
  }

  .artist-brand-banner-title {
    color: #f4f8ff !important;
    text-shadow: 0 14px 40px rgba(0,0,0,0.52), 0 0 24px rgba(127,211,255,0.10) !important;
  }

  .artist-brand-panel,
  .artist-side-stack > .panel-card,
  .smartlinks-section,
  .videos-section,
  .main-content {
    background: linear-gradient(180deg, rgba(10,16,28,0.82), rgba(7,12,20,0.92)) !important;
    border: 1px solid rgba(180,210,255,0.08) !important;
    box-shadow: 0 20px 55px rgba(0,0,0,0.34) !important;
    backdrop-filter: blur(18px) !important;
  }

  .artist-brand-panel::before,
  .panel-card::before,
  .smartlinks-section::before,
  .videos-section::before,
  .main-content::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 120px) !important;
  }

  .artist-kicker,
  .section-kicker,
  .artist-brand-banner-kicker,
  .panel-kicker {
    color: #9fdcff !important;
  }

  .artist-kicker::before,
  .section-kicker::before,
  .artist-brand-banner-kicker::before,
  .panel-kicker::before {
    background: #9fdcff !important;
    box-shadow: 0 0 14px rgba(127,211,255,0.28) !important;
  }

  .panel-kicker.cyan-kicker {
    color: #b7e8ff !important;
  }

  .panel-kicker.cyan-kicker::before {
    background: #b7e8ff !important;
    box-shadow: 0 0 14px rgba(183,232,255,0.24) !important;
  }

  .artist-about-title,
  .smartlinks-heading,
  .videos-heading,
  .brand-qr-copy h3,
  .email-capture-panel h3,
  .latest-release-title {
    color: #f5f9ff !important;
    text-shadow: 0 10px 30px rgba(0,0,0,0.36) !important;
  }

  .artist-tagline,
  .artist-bio,
  .brand-qr-copy p,
  .email-capture-panel p,
  .latest-release-desc,
  .smartlinks-subheading,
  .videos-subheading {
    color: rgba(220,232,248,0.72) !important;
  }

  .meta-item,
  .role-badge,
  .hero-mini-chip,
  .wave-track-bpm,
  .wave-track-genre,
  .btn-love,
  .share-icon,
  #pagination-container .pagination-btn,
  .top-search-area .subgenre-button {
    background: rgba(255,255,255,0.028) !important;
    border: 1px solid rgba(180,210,255,0.08) !important;
    color: #dfeaff !important;
  }

  .role-badge {
    color: #b7e0ff !important;
    background: rgba(127,211,255,0.08) !important;
    border-color: rgba(127,211,255,0.14) !important;
  }

  .hero-mini-chip i,
  .meta-item i {
    color: #9fdcff !important;
  }

  .pro-inline-ribbon {
    background: linear-gradient(135deg, rgba(78,108,178,0.22), rgba(32,48,88,0.20)) !important;
    border: 1px solid rgba(160,190,255,0.18) !important;
    color: #f3f7ff !important;
    box-shadow: 0 0 0 1px rgba(160,190,255,0.04), 0 0 24px rgba(95,124,255,0.10) !important;
  }

  .pro-inline-ribbon i {
    color: #bdd2ff !important;
  }

  .btn-share,
  .btn-custom-wide,
  .latest-release-cta,
  .email-submit,
  #modal-artist-links .artist-profile-btn {
    background: linear-gradient(135deg, #eef7ff 0%, #95d8ff 100%) !important;
    color: #08111b !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow: 0 14px 34px rgba(127,211,255,0.16) !important;
  }

  .btn-custom,
  .latest-release-ghost,
  .event-ticket-btn {
    background: linear-gradient(135deg, rgba(52,74,116,0.42), rgba(24,36,58,0.42)) !important;
    border: 1px solid rgba(160,190,255,0.14) !important;
    color: #eaf3ff !important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.18) !important;
  }

  .btn-custom:hover,
  .latest-release-ghost:hover,
  .event-ticket-btn:hover {
    background: linear-gradient(135deg, rgba(72,98,148,0.52), rgba(30,42,66,0.52)) !important;
    border-color: rgba(180,210,255,0.22) !important;
    color: #ffffff !important;
  }

  .btn-share:hover,
  .btn-custom-wide:hover,
  .latest-release-cta:hover,
  .email-submit:hover {
    filter: brightness(1.03) !important;
    box-shadow: 0 18px 42px rgba(127,211,255,0.22) !important;
  }

  .social-icons a {
    background: rgba(255,255,255,0.028) !important;
    border: 1px solid rgba(180,210,255,0.08) !important;
    color: #eef5ff !important;
  }

  .social-icons a:hover {
    color: #9fdcff !important;
    border-color: rgba(127,211,255,0.22) !important;
    background: rgba(127,211,255,0.06) !important;
    box-shadow: 0 0 20px rgba(127,211,255,0.08) !important;
  }

  .profile-media-mask {
    border: 4px solid rgba(127,211,255,0.76) !important;
    box-shadow:
      0 0 0 8px rgba(127,211,255,0.08),
      0 18px 60px rgba(0,0,0,0.52),
      0 0 26px rgba(127,211,255,0.14) !important;
    background: #03070d !important;
  }

  .profile-media-mask:hover {
    border-color: rgba(186,212,255,0.92) !important;
    box-shadow:
      0 0 0 8px rgba(186,212,255,0.08),
      0 18px 60px rgba(0,0,0,0.52),
      0 0 28px rgba(186,212,255,0.16) !important;
  }

  .glass-play-btn {
    background: rgba(10,16,28,0.44) !important;
    border: 1px solid rgba(180,210,255,0.18) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.38), 0 0 18px rgba(127,211,255,0.10) !important;
  }

  .glass-play-btn i {
    color: #f6fbff !important;
  }

  .latest-release-cover-wrap {
    background: linear-gradient(135deg, rgba(127,211,255,0.10), rgba(95,124,255,0.10)) !important;
    border: 1px solid rgba(180,210,255,0.08) !important;
    box-shadow: 0 24px 56px rgba(0,0,0,0.26) !important;
  }

  .latest-release-cover-wrap::after {
    background:
      linear-gradient(180deg, transparent 0%, transparent 45%, rgba(4,7,14,0.86) 100%),
      linear-gradient(135deg, rgba(127,211,255,0.05), transparent 35%, rgba(95,124,255,0.05)) !important;
  }

  .latest-release-stamp {
    background: rgba(7,12,20,0.78) !important;
    border: 1px solid rgba(180,210,255,0.10) !important;
    color: #f4f8ff !important;
  }

  .latest-release-stamp i {
    color: #bfe3ff !important;
  }

  .latest-release-meta {
    color: #9fdcff !important;
  }

  .email-form-wrapper,
  .top-search-area .search-bar-container,
  .top-search-area #search-input,
  .waveform-container,
  .smartlink-embed,
  .video-card,
  .qr-code-shell {
    background: rgba(255,255,255,0.024) !important;
    border: 1px solid rgba(180,210,255,0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,0.18) !important;
  }

  .email-form-wrapper:focus-within,
  .top-search-area #search-input:focus {
    border-color: rgba(127,211,255,0.28) !important;
    box-shadow: 0 0 0 1px rgba(127,211,255,0.12), 0 0 18px rgba(127,211,255,0.08) !important;
  }

  .email-input,
  .top-search-area #search-input {
    color: #f2f8ff !important;
  }

  .email-input::placeholder,
  .top-search-area #search-input::placeholder {
    color: rgba(220,232,248,0.34) !important;
  }

  .qr-code-shell {
    background: rgba(5,10,18,0.88) !important;
  }

  .stats-section {
    border-top: 1px solid rgba(180,210,255,0.08) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.004)) !important;
  }

  .stat-item {
    border-right: 1px solid rgba(180,210,255,0.08) !important;
  }

  .stat-item::before {
    background: #9fdcff !important;
    box-shadow: 0 0 18px rgba(127,211,255,0.44) !important;
  }

  .stat-item:nth-child(2)::before {
    background: #88aaff !important;
    box-shadow: 0 0 18px rgba(136,170,255,0.42) !important;
  }

  .stat-item:nth-child(3)::before {
    background: #c9ecff !important;
    box-shadow: 0 0 18px rgba(201,236,255,0.34) !important;
  }

  .stat-item:nth-child(4)::before {
    background: #dbe8ff !important;
    box-shadow: 0 0 18px rgba(219,232,255,0.34) !important;
  }

  .stat-item h5 {
    color: #f3f8ff !important;
  }

  .stat-item p {
    color: rgba(220,232,248,0.54) !important;
  }

  .main-content {
    background:
      radial-gradient(circle at top, rgba(127,211,255,0.04) 0%, rgba(7,12,20,0.98) 45%, rgba(3,6,12,1) 100%),
      linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.004)) !important;
  }

  #totalRecords {
    color: #f4f9ff !important;
    border-bottom: 1px solid rgba(180,210,255,0.08) !important;
  }

  #totalRecords::before {
    color: #9fdcff !important;
  }

  .wave-track-container {
    background:
      linear-gradient(90deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008) 45%, rgba(255,255,255,0.018)),
      linear-gradient(180deg, rgba(255,255,255,0.016), rgba(255,255,255,0.008)) !important;
    border: 1px solid rgba(180,210,255,0.08) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.02) !important;
  }

  .wave-track-container::before {
    background: linear-gradient(180deg, #9fdcff, rgba(127,211,255,0.08)) !important;
  }

  .wave-track-container:hover {
    background:
      linear-gradient(90deg, rgba(127,211,255,0.03), rgba(255,255,255,0.010) 40%, rgba(95,124,255,0.02)),
      linear-gradient(180deg, rgba(255,255,255,0.020), rgba(255,255,255,0.010)) !important;
    border-color: rgba(127,211,255,0.14) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.024) !important;
  }

  .wave-track-cover {
    border: 1px solid rgba(180,210,255,0.08) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.30) !important;
  }

  .wave-play-btn {
    background: rgba(8,14,24,0.70) !important;
    border: 1px solid rgba(180,210,255,0.14) !important;
    color: #f4f9ff !important;
  }

  .wave-play-btn:hover,
  .wave-track-container:hover .wave-play-btn {
    background: rgba(127,211,255,0.90) !important;
    border-color: rgba(127,211,255,1) !important;
    color: #06111b !important;
    box-shadow: 0 10px 20px rgba(127,211,255,0.24) !important;
  }

  .wave-track-title {
    color: #f2f8ff !important;
  }

  .wave-track-artist,
  .artist-link {
    color: rgba(210,224,244,0.50) !important;
  }

  .artist-link:hover {
    color: #9fdcff !important;
  }

  .wave-track-bpm {
    color: #9fdcff !important;
  }

  .wave-track-genre {
    color: rgba(228,236,248,0.72) !important;
  }

  .btn-love .fa-heart {
    color: #d8e7ff !important;
  }

  .btn-love.act,
  .btn-love:hover {
    background: rgba(127,211,255,0.06) !important;
    border-color: rgba(127,211,255,0.14) !important;
  }

  .btn-love.act .fa-heart {
    color: #9fdcff !important;
  }

  .share-icon {
    color: rgba(228,236,248,0.68) !important;
  }

  .share-icon:hover {
    color: #9fdcff !important;
    background: rgba(127,211,255,0.05) !important;
    border-color: rgba(127,211,255,0.14) !important;
  }

  .download-btn,
  .top-search-area #search-button,
  .top-search-area .subgenre-button.active,
  #pagination-container .pagination-btn.active {
    background: linear-gradient(180deg, rgba(14,22,34,0.98), rgba(8,14,24,0.98)) !important;
    border: 1px solid rgba(127,211,255,0.18) !important;
    color: #f0f7ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 10px 24px rgba(0,0,0,0.24) !important;
  }

  .download-btn i,
  .top-search-area #search-button i,
  .top-search-area .subgenre-button.active,
  #pagination-container .pagination-btn.active {
    color: #9fdcff !important;
  }

  .top-search-area .subgenre-button:hover,
  #pagination-container .pagination-btn:hover:not(:disabled) {
    border-color: rgba(127,211,255,0.16) !important;
    background: rgba(127,211,255,0.04) !important;
    color: #ffffff !important;
  }

  .event-item {
    background: linear-gradient(90deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008)) !important;
    border: 1px solid rgba(180,210,255,0.08) !important;
  }

  .event-item:hover {
    border-color: rgba(127,211,255,0.16) !important;
    background: linear-gradient(90deg, rgba(127,211,255,0.04), rgba(255,255,255,0.01)) !important;
  }

  .event-details h4 {
    color: #f3f8ff !important;
  }

  .event-details span {
    color: var(--muted) !important;
  }

  .event-details span i {
    color: #9fdcff !important;
  }

  .smart-icon {
    background: linear-gradient(135deg, rgba(127,211,255,0.10), rgba(95,124,255,0.10)) !important;
    border: 1px solid rgba(180,210,255,0.08) !important;
    color: #9fdcff !important;
  }

  .smart-title,
  .smartlink-embed h4 {
    color: #f2f8ff !important;
  }

  .smart-label {
    color: #7f93af !important;
  }

  .smart-arrow,
  .btn-smart-overlay {
    color: rgba(228,236,248,0.54) !important;
  }

  .smartlink-embed:hover .smart-arrow,
  .btn-smart-overlay:hover {
    color: #9fdcff !important;
  }

  #shareModal .modal-content,
  #artist-modal .modal-content,
  .studio-panel {
    background:
      radial-gradient(circle at top left, rgba(127,211,255,0.06), transparent 22%),
      radial-gradient(circle at top right, rgba(95,124,255,0.06), transparent 22%),
      linear-gradient(180deg, rgba(8,14,24,0.96), rgba(4,8,14,0.98)) !important;
    border: 1px solid rgba(180,210,255,0.08) !important;
    box-shadow: 0 36px 90px rgba(0,0,0,0.62) !important;
  }

  #shareModal .modal-title,
  .studio-header h3,
  #modal-artist-header {
    color: #f4f9ff !important;
  }

  #shareModal .share-option {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.010)),
      linear-gradient(135deg, rgba(127,211,255,0.03), rgba(95,124,255,0.03)) !important;
    border: 1px solid rgba(180,210,255,0.08) !important;
    color: #eef5ff !important;
  }

  #shareModal .share-option i {
    color: #9fdcff !important;
  }

  #shareModal .share-option:hover {
    border-color: rgba(127,211,255,0.16) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.26), 0 0 20px rgba(127,211,255,0.06) !important;
  }

  .studio-preview-area,
  .studio-loader,
  .fmt-btn.active {
    background-color: #050a12 !important;
  }

  .fmt-btn {
    color: rgba(220,232,248,0.54) !important;
  }

  .fmt-btn.active {
    color: #f4f9ff !important;
    border: 1px solid rgba(180,210,255,0.08) !important;
  }

  .neon-pulse-ring,
  .neon-pulse-ring::before {
    border-color: #9fdcff !important;
  }

  .neon-pulse-ring i,
  .vip-msg-text,
  .btro-toast {
    color: #9fdcff !important;
  }









































  


/* ==========================================================================
   GLOBAL PLAYER & SHARE STUDIO (Glass-Cyber Structure)
   ========================================================================== */

/* ---------- Global Player ---------- */
:root {
  --gp-h-desktop: 110px; 
}

body.has-global-player {
  padding-bottom: calc(var(--gp-h-desktop) + env(safe-area-inset-bottom) + 20px) !important;
}

#btro-global-player {
  background: var(--glass-2) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--line-strong) !important;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5) !important; 
  border-radius: 0 !important;
}

@media (min-width: 769px) {
  #btro-global-player {
    height: 110px !important; 
  }
  #btro-global-player .gp-inner {
    height: 100% !important; 
  }
  body.has-global-player {
    padding-bottom: 130px !important; 
  }
}

#gp-cover {
  border-radius: 8px !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
  width: 60px !important;
  height: 60px !important;
  filter: none !important;
}

#gp-title {
  font-family: inherit !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 15px rgba(var(--cyan-rgb), 0.2) !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}

#gp-artist {
  font-family: inherit !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  color: var(--cyan) !important;
  font-weight: bold !important;
}

/* Glass Player Controls */
.gp-btn {
  color: var(--text) !important;
  border-radius: 8px !important;
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
  width: 38px !important;
  height: 38px !important;
  transition: all 0.2s ease !important;
  display: grid !important;
  place-items: center !important;
}

.gp-btn:hover {
  background: var(--panel-3) !important;
  color: var(--cyan) !important;
  border-color: var(--cyan) !important;
  transform: translateY(-2px) !important;
}

/* Main Play Button */
.gp-btn--lg {
  background: var(--button-gradient) !important;
  color: var(--bg) !important;
  border: none !important;
  box-shadow: 0 0 20px rgba(var(--cyan-rgb), 0.3) !important;
  width: 56px !important;
  height: 56px !important;
}

.gp-btn--lg:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 0 30px rgba(var(--cyan-rgb), 0.5) !important;
}

/* Chunky Glass Progress Bar */
#gp-seek {
  background: var(--panel-3) !important;
  background-image: linear-gradient(to right, var(--cyan), var(--purple)) !important;
  background-repeat: no-repeat !important;
  background-size: 0% 100% !important; /* Managed by JS */
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  height: 14px !important;
}

#gp-seek::-webkit-slider-thumb {
  border-radius: 4px !important;
  width: 16px !important;
  height: 28px !important;
  background: #fff !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: 0 0 15px rgba(255,255,255,0.3) !important;
  cursor: pointer !important;
}

#gp-volume-slider {
  background-color: var(--panel-3) !important;
  background-image: linear-gradient(to right, var(--muted-2), var(--muted-2)) !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  height: 10px !important;
}

#gp-volume-slider::-webkit-slider-thumb {
  border-radius: 2px !important;
  width: 10px !important;
  height: 20px !important;
  background: #fff !important;
}

.btro-time-label {
  font-family: monospace !important;
  font-weight: bold !important;
  color: var(--cyan) !important;
}

/* Mobile Player Overrides */
@media (max-width: 768px) {
  #btro-global-player {
    border-radius: 0 !important;
    background: var(--glass-2) !important;
    border-top: 1px solid var(--line-strong) !important;
    backdrop-filter: blur(15px) !important;
  }
}

/* ---------- Share Studio Modal UI ---------- */
.modal-content, #share-studio-modal .studio-panel {
  background: var(--bg-2) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6) !important;
}

.modal-header, #share-studio-modal .studio-header {
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}

.modal-title, #share-studio-modal .studio-header h3 {
  color: #fff !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.share-option, #share-studio-modal .fmt-btn, #share-studio-modal .action-row .btn {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  transition: all 0.2s ease !important;
}

.share-option:hover, #share-studio-modal .fmt-btn.active {
  background: var(--panel-3) !important;
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
  box-shadow: 0 0 15px rgba(var(--cyan-rgb), 0.1) !important;
}

/* ---------- Hidden Generator (Cyber Image) ---------- */
#generator-wrapper .gen-template {
  background-color: #03060b !important;
  background-image: radial-gradient(circle at center, #0a1324 0%, #03060b 100%) !important;
  color: #fff !important;
}

#generator-wrapper .gen-cover-img {
  border-radius: 12px !important;
  border: 2px solid var(--line-strong) !important;
}

#generator-wrapper .tpl-story .gen-meta h1 {
  font-size: 90px !important;
  line-height: 1.1 !important;
  color: #fff !important;
  text-shadow: 0 0 30px rgba(var(--cyan-rgb), 0.3) !important;
  text-transform: uppercase !important;
}

#generator-wrapper .gen-wave span {
  background: var(--brand-gradient) !important;
  border-radius: 2px !important;
}








/* ==========================================================================
   POST-DOWNLOAD ARTIST MODAL 
   ========================================================================== */

/* 1. Perfect 50/50 Logo Split */
#artist-modal .artist-avatar-wrapper {
  position: absolute !important;
  width: 110px;
  top: 0 !important; 
  left: 50% !important;
  transform: translate(-50%, -50%) !important; 
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 10 !important;
}

/* 2. Cyber Avatar Image */
#artist-modal .artist-avatar-wrapper img {
  border: 2px solid var(--cyan) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 25px rgba(var(--cyan-rgb), 0.4) !important;
  width: 110px !important;
  height: 110px !important;
  display: block !important;
  margin: 0 !important;
  background: var(--bg) !important;
  filter: none !important;
}

/* 3. Main Modal Body - Glassmorphism & Top Padding */
#artist-modal .modal-content {
  background: var(--glass-2) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 20px !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6) !important;
  position: relative !important;
  /* 70px top padding clears the bottom half of the 110px logo */
  padding: 70px 40px 40px !important; 
  margin-top: 60px !important; 
  background-image: none !important;
}

/* 4. Cyber "X" Close Button */
#artist-modal .modal-close-btn,
#artist-modal-close {
  position: absolute !important;
  right: 15px !important;
  top: 15px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transition: all 0.2s ease !important;
  z-index: 20 !important;
}

#artist-modal .modal-close-btn:hover,
#artist-modal-close:hover {
  background: var(--purple) !important;
  color: #fff !important;
  transform: rotate(90deg) !important;
  border-color: transparent !important;
}

/* 5. Typography Fixes */
#artist-modal .modal-artist-header,
#artist-modal #modal-artist-header {
  font-family: inherit !important;
  color: #f4f9ff !important;
  text-shadow: 0 0 20px rgba(var(--cyan-rgb), 0.2) !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
  text-align: center !important;
}

#artist-modal .modal-subtext,
#artist-modal .availability-row,
#artist-modal #modal-artist-status {
  font-family: inherit !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

/* Fixes the "By downloading..." text layout */
#artist-modal p[style*="By downloading"] {
  text-align: center !important;
  color: var(--muted-2) !important;
  font-weight: bold !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* 6. Primary Action Buttons (Message / Hire) */
#artist-modal .artist-links button,
#artist-modal .artist-links a.btn,
#artist-modal .artist-profile-btn {
  background: var(--button-gradient) !important;
  color: var(--bg) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 25px rgba(var(--cyan-rgb), 0.15) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-shadow: none !important;
  transition: all 0.2s ease !important;
}

#artist-modal .artist-links button:hover,
#artist-modal .artist-links a.btn:hover,
#artist-modal .artist-profile-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.1) !important;
  box-shadow: 0 15px 30px rgba(var(--cyan-rgb), 0.25) !important;
}

/* 7. Social Media Icons (Glass Blocks) */
#artist-modal .artist-links a:not(.btn):not(.artist-profile-btn) {
  background: var(--panel-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
  color: var(--cyan) !important;
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

#artist-modal .artist-links a:not(.btn):not(.artist-profile-btn):hover {
  background: var(--panel-3) !important;
  border-color: var(--cyan) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}

/* Bio Truncation */
#artist-modal #modal-artist-status {
  display: -webkit-box !important;
  -webkit-line-clamp: 10 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}