:root{
  --bg:#070A12;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.12);
  --text:#F1F4FF;
  --muted: rgba(241,244,255,.72);
  --cyan:#00E5FF;
  --blue:#5C8CFF;
  --purple:#9B2DFF;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 900px at 10% 0%, rgba(155,45,255,.22), transparent 50%),
              radial-gradient(1000px 800px at 90% 20%, rgba(0,229,255,.16), transparent 52%),
              linear-gradient(180deg, #060815, #05050b);
  color: var(--text);
}
.bg-glow{
  position:fixed; inset:-40px;
  background: radial-gradient(700px 500px at 20% 15%, rgba(0,229,255,.10), transparent 50%),
              radial-gradient(700px 500px at 80% 25%, rgba(155,45,255,.10), transparent 52%);
  pointer-events:none;
  filter: blur(10px);
  opacity:.9;
}
.shell{ max-width: 1060px; margin: 0 auto; padding: 18px 16px; }
.header{ padding-top: 22px; }
.brand{
  display:flex; gap:14px; align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.brand__logo{
  width: 52px; height: 52px;
  border-radius: 14px;
  padding: 10px;
  background: rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.10);
}
.brand__name{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand__tag{ margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.tabs{ margin-top: 14px; display:flex; gap:10px; flex-wrap: wrap; justify-content: center; }
.tab{
  appearance:none; border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04); color: var(--text);
  padding: 10px 16px; border-radius: 999px;
  font-weight: 700; cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.tab:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.tab.is-active{
  background: linear-gradient(90deg, rgba(0,229,255,.12), rgba(155,45,255,.12));
  border-color: rgba(0,229,255,.35);
  box-shadow: 0 0 0 2px rgba(0,229,255,.08) inset;
}
.searchRow{ margin-top: 14px; display:flex; gap: 12px; align-items:center; justify-content: space-between; }
.search{
  flex:1; display:flex; align-items:center; gap: 10px;
  padding: 10px 12px; border-radius: 999px;
  border:1px solid var(--stroke); background: rgba(0,0,0,.22);
}
.search input{ flex:1; background: transparent; border:none; outline:none; color: var(--text); font-size: 14px; }
.iconBtn{
  border:none; background: rgba(255,255,255,.06); color: var(--text);
  width: 34px; height: 34px; border-radius: 10px; cursor:pointer;
  display:grid; place-items:center;
}
.actions{ display:flex; gap:10px; }
.btn{
  border:1px solid var(--stroke); background: rgba(255,255,255,.06); color: var(--text);
  padding: 10px 14px; border-radius: 12px; font-weight: 800; cursor:pointer;
}
.btn--primary{
  border-color: rgba(0,229,255,.35);
  background: linear-gradient(90deg, rgba(0,229,255,.18), rgba(155,45,255,.18));
  box-shadow: 0 0 30px rgba(0,229,255,.10);
}
.banner{
  margin-top: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 12px 14px;
  display:flex; gap: 10px; align-items:center; justify-content: space-between;
}
.badge{
  font-weight: 900; font-size: 12px; letter-spacing: .02em;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(0,229,255,.22);
  color: rgba(241,244,255,.92);
}
.banner__text{ color: var(--muted); font-weight: 600; }
.main{ padding-bottom: 140px; }
.panel{ display:none; }
.panel.is-active{ display:block; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.card__hdr{ display:flex; align-items:flex-end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
h2{ margin:0; font-size: 18px; letter-spacing: -.01em; }
.muted{ color: var(--muted); font-weight: 600; }
.tiny{ font-size: 12px; }
.rowScroll{ display:flex; gap: 12px; overflow:auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.rowScroll::-webkit-scrollbar{ height: 6px; }
.rowScroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 99px; }

/* Swipe card layout (Apple Music–style artwork + text) */
.mediaThumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(0,229,255,.12), rgba(155,45,255,.14));
  position: relative;
  overflow: hidden;
}
.mediaThumb::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(240px 180px at 20% 25%, rgba(0,229,255,.22), transparent 60%),
              radial-gradient(260px 220px at 80% 75%, rgba(155,45,255,.18), transparent 65%);
  opacity: .95;
}
.mediaMeta{ padding: 10px 2px 0; display:flex; flex-direction: column; gap: 4px; }
.mediaName{ font-weight: 900; font-size: 16px; letter-spacing: -.01em; }
.mediaSub{ font-size: 12px; color: rgba(241,244,255,.74); font-weight: 700; }
.mediaCard{
  width: 170px; min-width: 170px; height: 190px;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(0,229,255,.10), rgba(155,45,255,.12));
  position:relative; overflow:hidden; scroll-snap-align: start; cursor:pointer;
}
.mediaCard::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(220px 160px at 20% 20%, rgba(0,229,255,.22), transparent 60%),
              radial-gradient(240px 200px at 80% 70%, rgba(155,45,255,.18), transparent 65%);
  opacity:.9;
}
.mediaCard__content{ position:absolute; inset:0; padding: 12px; z-index:2; display:flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  font-size: 12px; font-weight: 800; width: fit-content;
}
.pill--ai{ border-color: rgba(0,229,255,.26); background: rgba(0,229,255,.08); }
.mediaCard__title{ font-weight: 900; font-size: 16px; }
.mediaCard__meta{ font-size: 12px; color: rgba(241,244,255,.72); font-weight: 700; }
.list{ display:flex; flex-direction: column; gap: 10px; }
.item{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  border-radius: 16px;
  padding: 10px;
  display:flex; gap: 10px; align-items: center; justify-content: space-between;
}
.itemLeft{ display:flex; gap: 10px; align-items:center; }
.thumb{
  width: 44px; height: 44px; border-radius: 12px; object-fit: cover;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.itemTitle{ font-weight: 900; }
.itemMeta{ font-size: 12px; color: rgba(241,244,255,.72); font-weight: 700; margin-top: 2px; }
.itemBtns{ display:flex; gap: 8px; align-items:center; }
.miniBtn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 900;
}
.miniBtn--play{ border-color: rgba(0,229,255,.30); background: rgba(0,229,255,.08); }
.miniBtn--dl{ border-color: rgba(155,45,255,.30); background: rgba(155,45,255,.08); }
.subhdr{ display:flex; justify-content: flex-end; margin-bottom: 8px; }
.linkPill{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 900;
}
.playerCard{ margin-top: 14px; }
.playerTop{ display:flex; gap: 12px; align-items: center; justify-content: space-between; }
.nowPlaying{ min-width: 0; }
.np__label{ font-weight: 900; color: rgba(241,244,255,.70); font-size: 12px; }
.np__title{ font-size: 18px; font-weight: 900; margin-top: 4px; }
.np__meta{ margin-top: 4px; font-size: 13px; }
.np__artWrap{
  width: 76px; height: 76px; border-radius: 18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25);
}
.np__art{ width:100%; height:100%; object-fit: cover; display:none; }
.playerControls{ margin-top: 10px; display:flex; flex-direction: column; gap: 10px; }
.videoPlayer{
  width:100%; border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  display:none;
}
.playerHelp{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.select{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
}
.rightTools{ display:flex; gap: 10px; align-items:center; }
.chartList{ display:flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.chartRow{
  display:flex; gap: 10px; align-items:center; justify-content: space-between;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  bord

@media (max-width: 820px){
  .legalFooter{
    position: static;
    left: auto;
    bottom: auto;
    margin: 12px 12px 96px; /* leave space above bottom nav */
    max-width: none;
  }
}
er-radius: 16px;
  padding: 10px;
}
.rank{
  width: 36px; height:36px; border-radius: 14px;
  display:grid; place-items:center;
  font-weight: 1000;
  background: linear-gradient(135deg, rgba(0,229,255,.18), rgba(155,45,255,.18));
  border: 1px solid rgba(0,229,255,.25);
}
.chartMain{ display:flex; align-items:center; gap: 10px; min-width: 0; }
.chartTitle{ font-weight: 900; }
.chartMeta{ font-size: 12px; color: rgba(241,244,255,.72); font-weight: 700; margin-top: 2px; }

.foundingChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(241,244,255,.95);
  background: rgba(155,45,255,.14);
  border: 1px solid rgba(155,45,255,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.foundingChip::before{
  content:"★";
  color: var(--cyan);
  font-size: 11px;
  line-height: 1;
}

.footerNav{
  position:fixed; left:0; right:0; bottom:0;
  background: rgba(0,0,0,.55);
  border-top: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  display:flex; justify-content: space-around;
  padding: 10px 8px calc(env(safe-area-inset-bottom) + 10px);
  z-index: 50;
}
.fbtn{
  border:none; background: transparent;
  color: rgba(241,244,255,.78);
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
}
.fbtn.is-active{
  color: var(--text);
  background: rgba(0,229,255,.10);
  border: 1px solid rgba(0,229,255,.18);
}
.popover{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 92px;
  width: min(560px, calc(100vw - 24px));
  background: rgba(10,15,26,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: var(--shadow);
  z-index: 60;
}
.popover__hdr{
  display:flex; align-items:center; justify-content: space-between;
  padding: 12px 12px 8px;
}
.popover__title{
  font-weight: 1000;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.popover__body{ padding: 0 14px 14px; color: rgba(241,244,255,.86); font-weight: 600; }
.popover__body ul{ margin: 10px 0 0 18px; }
.popover__body li{ margin: 8px 0; }
.backdrop{ position: fixed; inset:0; background: rgba(0,0,0,.55); z-index: 70; }
.modal{
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(780px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow:auto;
  background: rgba(10,15,26,.96);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: var(--shadow);
  z-index: 80;
}
.modal__hdr{
  display:flex; align-items:center; justify-content: space-between;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modal__title{ font-weight: 1000; }
.modal__body{ padding: 14px; }
.field{ display:flex; flex-direction: column; gap: 8px; }
.field span{ font-weight: 900; color: rgba(241,244,255,.86); font-size: 13px; }
.field input{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  outline:none;
  font-weight: 700;
}
.row{ display:flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; align-items:center; }
.check{ display:flex; gap: 10px; align-items:center; font-weight: 900; color: rgba(241,244,255,.86); }
.preview{
  margin-top: 12px;
  display:flex; gap: 12px; align-items:center;
  padding: 10px; border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
}
.preview img{
  width: 56px; height: 56px; border-radius: 14px; object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  display:none;
}
.modal__actions{ margin-top: 14px; display:flex; justify-content: flex-end; gap: 10px; }
.callout{
  border: 1px solid rgba(0,229,255,.18);
  background: rgba(0,229,255,.06);
  border-radius: 18px;
  padding: 14px;
  margin-top: 10px;
}
.callout h3{ margin: 0 0 8px; }
.callout p{ margin: 0; color: rgba(241,244,255,.86); font-weight: 600; line-height: 1.45; }
.subcard{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  border-radius: 18px;
  padding: 14px;
}
.subcard h3{ margin:0 0 8px; }
.rules{ margin: 8px 0 0 18px; color: rgba(241,244,255,.86); font-weight: 600; }
.rules li{ margin: 8px 0; }
.badgeMock{ display:flex; align-items:center; justify-content:center; margin: 12px 0 10px; }
.fcBadge{
  width: 138px; height: 138px; border-radius: 999px;
  position: relative; display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, rgba(0,229,255,.20), transparent 55%),
              radial-gradient(circle at 70% 75%, rgba(155,45,255,.22), transparent 58%),
              rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  overflow:hidden;
}
.fcBadge__ring{
  position:absolute; inset: 10px;
  border-radius: 999px;
  border: 2px solid rgba(0,229,255,.35);
  box-shadow: 0 0 40px rgba(0,229,255,.10);
}
.fcBadge__text{ text-align:center; font-weight: 1000; }
.fcBadge__top{ font-size: 12px; letter-spacing: .08em; color: rgba(241,244,255,.92); }
.fcBadge__mid{
  font-size: 18px; letter-spacing: .04em;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.fcBadge__bot{ font-size: 12px; letter-spacing: .05em; color: rgba(241,244,255,.80); margin-top: 4px; }
.inviteBox{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 12px;
}
.inviteLine{ font-weight: 800; }
.pillRow{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 860px){
  .grid2{ grid-template-columns: 1fr; }
  .playerTop{ flex-direction: column-reverse; align-items:flex-start; }
  .tabs{ justify-content: center; }
}

.bannerLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.miniGhost{
  appearance:none;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: rgba(241,244,255,.86);
  font-weight: 800;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.miniGhost:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.24);
  border-color: rgba(155,45,255,.28);
}
.miniGhost:active{ transform: translateY(0px); }

/* --- Footer restore patch v59.3 --- */
.bottom-nav{
  position: fixed !important;
  bottom: 0 !important;
  left: 0; right: 0;
  height: 56px;
  z-index: 9999;
  background: rgba(10,10,18,.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom);
}
.now-playing{
  bottom: 60px !important;
}

.miniBtn--del{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,70,90,.08);
}
.miniBtn--del:hover{
  border-color: rgba(255,70,90,.22);
  background: rgba(255,70,90,.12);
}

/* Legal Footer v59.5 */
\.legalFooter{
  position:fixed;
  left:12px;
  bottom:70px; /* sits above the bottom tab bar */
  z-index:1200;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:calc(100vw - 24px);
  text-align:left;
}

\.legalLeft{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  font-size:12px;
  opacity:.75;
  line-height:1.25;
  max-width:calc(100vw - 24px);
}

.legalFooter a{
  color:rgba(241,244,255,.78);
  text-decoration:none;
  opacity:.9;
}
.legalFooter a:hover{
  color:#b080ff;
  text-decoration:underline;
}
@media (max-width: 520px){
  .legalFooter{ left:10px; bottom: 94px; font-size:10.5px; }
  .legalLeft{ gap:8px; }
  .legalFooter{ left:10px; bottom:94px; }
  .legalFooter__links{ font-size:11.5px; }

}

/* compact legal view */
.legalWrap{ max-width: 720px; font-size:14px; }
.legalWrap h1{ font-size:20px; }
.legalWrap h2{ font-size:15px; }

.howChartsTip{
  position:absolute;
  background:rgba(0,0,0,.86);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  max-width:260px;
  z-index:2000;
}



/* --- Footer legal links (bottom-left, mobile-safe) --- */
.legalFooter{
  text-align:left;
  pointer-events:auto;
}
.legalFooter__inner{
  display:flex;
  align-items:center;
  gap:10px;
}
.legalFooter__links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  font-size:12px;
  opacity:.75;
  line-height:1.25;
  max-width:calc(100vw - 24px);
}
.legalFooter__links a{
  white-space:nowrap;
}
@media (max-width: 720px){
  /* keep clear of the bottom nav bar on phones */
  .legalFooter{ bottom: 64px; }
  .legalFooter__links{ font-size:12px; }
}
@media (min-width: 721px){
  .legalFooter{ bottom: 10px; }
}


/* My Library v59.17 */
.creatorLibrary{padding:12px 10px}
.creatorLibrary h2{margin:8px 0}
.phaseNote{font-size:12px;opacity:.8;margin-bottom:8px}
.librarySections{display:flex;flex-wrap:wrap;gap:10px}
.libCol{flex:1 1 260px;background:rgba(255,255,255,.04);border-radius:10px;padding:8px}
.libList{min-height:40px}
.libraryEmpty{opacity:.85;font-size:13px}

/* Subscribe pricing (Phase 1 display-only) */
.planlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:12px}
.planitem{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px}
.planitem .name{font-weight:800;letter-spacing:.2px}
.planitem .price{float:right;font-weight:800;color:#7dd3ff}
.planitem .small{clear:both;margin-top:6px;color:rgba(255,255,255,.72);font-size:13px;line-height:1.35}
.planitem .btn{margin-top:10px;width:100%}


/* Home layout: Heat Index + Trending + New to Charts (stacked) */
.homeStack{
  display:flex;
  flex-direction:column;
  gap:14px;
}


/* Desktop left sidebar (Spotify-style library) */
.sidebar{
  display:none;
}
@media (min-width: 1100px){
  /* No left sidebar in v59.29 */
  .shell, .footerSticky, .tabbar{ margin-left: 0; }
  .tabbar{ left: 0; width: 100%; }
  .legalFooter{ left: 12px; max-width: calc(100vw - 24px); }
}

@media (max-width: 800px){
  .banner .badge{display:none !important;}
}



/* Mission statement (shows per active tab) */
.missionWrap{margin:10px 0 2px;}
.missionBar{background:linear-gradient(135deg,rgba(0,255,255,.08),rgba(155,45,255,.08));
  border:1px solid rgba(255,255,255,.10);border-radius:12px;
  padding:10px 12px;margin:6px 0;font-size:13px;line-height:1.35}
@media (max-width: 800px){
  .missionBar{font-size:12px;}
}
/* Persistent legal notice (all tabs) */


.legalNotice{
  position:fixed;
  left:12px;
  bottom:112px; /* above legal links + bottom tab bar */
  z-index:1200;
  display:flex;
  align-items:flex-start;
  gap:10px;
  max-width:calc(100vw - 24px);
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  font-size:12px;
  line-height:1.35;
  color:rgba(241,244,255,.92);
}
.legalNotice__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  font-weight:700;
  font-size:11px;
  letter-spacing:.2px;
  background:rgba(0,255,255,.12);
  border:1px solid rgba(0,255,255,.22);
  color:rgba(0,255,255,.92);
  flex:0 0 auto;
  margin-top:1px;
}
.legalNotice a{
  color:rgba(176,128,255,.95);
  text-decoration:none;
}
.legalNotice a:hover{ text-decoration:underline; }

@media (max-width: 520px){
  .legalNotice{ left:10px; bottom:156px; font-size:11.5px; }
}
@media (min-width: 721px){
  .legalNotice{ bottom: 56px; } /* desktop: legalFooter moves lower */
}
@media (min-width: 1100px){
  .legalNotice{ left: 290px; max-width: calc(100vw - 304px); }
}


/* Subscribe glow */
.tab[data-tab="subscribe"], .fbtn[data-tab="subscribe"]{
  box-shadow: 0 0 18px rgba(0, 210, 255, 0.35);
  border-color: rgba(0, 210, 255, 0.55);
}



@media (max-width: 820px){
  /* Mobile: legal notice should NOT float over content */
  .legalNotice{
    position: static;
    left: auto;
    bottom: auto;
    margin: 12px 12px 92px; /* leave space above bottom nav */
    max-width: none;
  }
}



@media (max-width: 820px){
  /* Mobile listening UX: Apple Music style (square art + text below) */
  .rowScroll{
    gap: 16px;
    padding: 6px 16px 12px 16px;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
  }
  .mediaCard{
    width: 62vw;
    min-width: 62vw;
    height: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    position: relative;
    overflow: visible;
    scroll-snap-align: center;
  }
  .mediaCard::after{ display:none; }
  .mediaThumb{ border-radius: 20px; }
  .mediaMeta{ padding-top: 10px; }
  .mediaName{ font-size: 17px; }
  .mediaSub{ font-size: 13px; }
}


/* Mobile: Apple/Spotify darker black base + non-floating legal */
@media (max-width: 820px){
  body{
    background: #000;
  }
  :root{
    --panel: rgba(255,255,255,.05);
    --panel2: rgba(255,255,255,.07);
    --stroke: rgba(255,255,255,.10);
  }
  .legalNotice{
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 10px 12px 0;
    max-width: calc(100% - 24px);
  }
}