/* ============================================================================
   radio.css -- AVH Radio player, submission panel, community + profile extras.
   Pairs with radio.js. Reads the shared tokens declared in brand.css.
   ========================================================================== */

/* ============================================================================
   AVH RADIO -- 3D instrument-skin player.
   A radio-shaped, physically-lit card that mirrors the Re-Production Studio
   "Intro" card (flow.css .wz-welcome-card): glass body, rotating neon edge,
   floating glows, drifting grid, scan line, animated equalizer, pulsing dot,
   gradient text. Reads the shared tokens declared in brand.css.
   ========================================================================== */
@property --rd-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.radio-card {
  position: relative;
  margin: 0 0 30px;
  border-radius: 26px;
  transform: perspective(1500px) rotateX(calc(5deg + var(--rd-tx, 0deg))) rotateY(var(--rd-ty, 0deg)) translateY(var(--rd-lift, 0px));
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.radio-card:hover { --rd-lift: -3px; }

/* physical base -- the device's thickness sitting on the surface */
.radio-card::after {
  content: ""; position: absolute; left: 7px; right: 7px; bottom: -9px; height: 20px; z-index: -1;
  border-radius: 0 0 24px 24px; pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 26, 34, .95), rgba(5, 7, 10, .98));
  box-shadow: 0 30px 55px rgba(0, 0, 0, .62);
  filter: blur(.4px);
}

/* rotating neon edge -- identical recipe to the intro card */
.radio-card::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 27px; padding: 1.5px; z-index: 4;
  background: conic-gradient(from var(--rd-ang),
    transparent 0 55%,
    rgba(53, 194, 255, .9) 72%,
    rgba(255, 107, 53, .95) 84%,
    rgba(53, 255, 158, .85) 92%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: rdSpin 6s linear infinite, rdEdgeIn .6s ease both;
  pointer-events: none;
}
@keyframes rdSpin { to { --rd-ang: 360deg; } }
@keyframes rdEdgeIn { from { opacity: 0; } to { opacity: 1; } }

/* the radio body */
.radio-shell {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(120, 140, 160, .22);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(28, 32, 41, .98), rgba(11, 13, 17, .99));
  box-shadow:
    0 42px 90px rgba(0, 0, 0, .62),
    0 8px 0 rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -3px 10px rgba(0, 0, 0, .65);
  animation: rdShellIn .6s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes rdShellIn { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* drifting grid inside the body (mirrors the intro backdrop) */
.radio-shell::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(53, 194, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 194, 255, .05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(90% 85% at 50% 0%, #000, transparent 82%);
  mask-image: radial-gradient(90% 85% at 50% 0%, #000, transparent 82%);
  animation: rdGrid 30s linear infinite;
}
@keyframes rdGrid { to { background-position: 40px 40px, 40px 40px; } }

/* hover sheen sweep across the body */
.radio-shell::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .07) 46%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .85s ease;
}
.radio-card:hover .radio-shell::after { transform: translateX(130%); }

/* floating glows inside the body */
.radio-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.radio-glow-1 { width: 280px; height: 280px; background: rgba(255, 107, 53, .22); top: -130px; left: -70px; animation: rdFloat 12s ease-in-out infinite; }
.radio-glow-2 { width: 320px; height: 320px; background: rgba(53, 194, 255, .18); bottom: -170px; right: -90px; animation: rdFloat 15s ease-in-out infinite reverse; }
@keyframes rdFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(22px, 18px, 0); } }

/* glowing antenna line along the top edge */
.radio-antenna {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 55%, var(--accent-3));
  box-shadow: 0 0 20px rgba(255, 107, 53, .55);
  opacity: .92;
}

.radio-face { position: relative; z-index: 2; padding: 18px 20px 20px; }

/* ---- brand strip --------------------------------------------------------- */
.radio-brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.radio-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 900; letter-spacing: .14em; font-size: .72rem; text-transform: uppercase;
  color: #ffd9c6;
}
.radio-live i { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.radio-card.playing .radio-live i { animation: rdPulse 1.4s infinite; }
@keyframes rdPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 94, .6), 0 0 10px var(--danger); }
  70% { box-shadow: 0 0 0 9px rgba(255, 77, 94, 0), 0 0 10px var(--danger); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0), 0 0 10px var(--danger); }
}
.radio-band {
  font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-3); border: 1px solid rgba(53, 255, 158, .35); background: rgba(53, 255, 158, .08);
  border-radius: 6px; padding: 3px 8px;
}
.radio-brand .spacer { margin-left: auto; }
.radio-genre {
  background: linear-gradient(180deg, #1c2028, #12151b);
  border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .84rem; font-weight: 700;
  cursor: pointer; outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.radio-genre:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(53, 194, 255, .18); }

/* ---- stage: speaker grille + backlit tuning display ---------------------- */
.radio-stage { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 1.7fr); gap: 16px; }

.radio-grille {
  position: relative; min-height: 132px; border-radius: 16px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding: 16px 14px;
  background: radial-gradient(130% 120% at 50% 0%, rgba(255, 107, 53, .12), rgba(0, 0, 0, .4) 70%);
  border: 1px solid rgba(0, 0, 0, .55);
  box-shadow: inset 0 3px 14px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .05);
}
.radio-grille::after {   /* speaker slats over the bars */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 7px);
  opacity: .55;
}
.radio-eq { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; width: 100%; }
.radio-eq span {
  flex: 0 0 auto; width: 5px; height: 20%; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-3), var(--accent-2) 52%, var(--accent));
  box-shadow: 0 0 10px rgba(53, 194, 255, .35);
  animation: rdEqIdle 2.6s ease-in-out infinite;
}
.radio-card.playing .radio-eq span { animation: rdEq .9s ease-in-out infinite; }
@keyframes rdEqIdle { 0%, 100% { height: 12%; opacity: .5; } 50% { height: 46%; opacity: .85; } }
@keyframes rdEq { 0%, 100% { height: 12%; opacity: .55; } 50% { height: 96%; opacity: 1; } }

.radio-display {
  position: relative; border-radius: 16px; padding: 14px 16px 15px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; min-height: 132px;
  background: linear-gradient(180deg, rgba(22, 26, 34, .92), rgba(8, 10, 14, .96));
  border: 1px solid rgba(120, 140, 160, .18);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, .65), inset 0 0 40px rgba(255, 178, 122, .05);
}
.radio-display::before {   /* warm backlight wash */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 150% at 18% 0%, rgba(255, 178, 122, .16), transparent 62%);
}
.radio-display::after {    /* scan line */
  content: ""; position: absolute; left: 0; right: 0; top: -60%; height: 60%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(53, 194, 255, .12), transparent);
  animation: rdScan 6s linear infinite;
}
@keyframes rdScan { from { top: -60%; } to { top: 110%; } }

.radio-dial {
  position: relative; height: 16px; margin: 0 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .09);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 12px);
}
.radio-needle {
  position: absolute; top: -4px; bottom: -1px; width: 2px; left: 6%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: rdNeedle 9s ease-in-out infinite alternate;
}
@keyframes rdNeedle { from { left: 6%; } to { left: 92%; } }

.radio-title {
  position: relative; z-index: 1; font-weight: 800; font-size: 1.16rem; line-height: 1.25; letter-spacing: .2px;
  background: linear-gradient(92deg, #ffffff, #cfe6ff 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.radio-sub {
  position: relative; z-index: 1; color: var(--text-dim); font-size: .85rem; margin-top: 5px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.radio-genre-tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #cfeaff; border: 1px solid rgba(53, 194, 255, .4); background: rgba(53, 194, 255, .12);
  border-radius: 6px; padding: 1px 7px;
}
.radio-count { font-size: .78rem; color: var(--text-dim); font-weight: 700; }
.radio-count b { color: var(--text); }

/* ---- control deck -------------------------------------------------------- */
.radio-deck {
  position: relative; margin-top: 18px; padding: 12px 14px; border-radius: 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .28));
  border: 1px solid rgba(0, 0, 0, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -2px 10px rgba(0, 0, 0, .55);
}
.radio-btn {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(120, 140, 160, .25);
  background: radial-gradient(circle at 50% 28%, #2b313a, #14171d 72%);
  color: var(--text); font-size: 1rem; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -3px 7px rgba(0, 0, 0, .6);
  transition: transform .14s ease, box-shadow .2s ease, color .15s ease, border-color .15s ease;
}
.radio-btn:hover { color: var(--accent); border-color: rgba(255, 107, 53, .5); transform: translateY(-2px); box-shadow: 0 9px 20px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .2); }
.radio-btn:active { transform: translateY(0); }
.radio-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.radio-play {
  width: 58px; height: 58px; font-size: 1.3rem; color: #1a0d05; border: 0;
  background: radial-gradient(circle at 50% 26%, #ffc39a, var(--accent) 55%, #d94f1e 100%);
  box-shadow: 0 9px 24px rgba(255, 107, 53, .5), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -5px 10px rgba(120, 40, 0, .5);
}
.radio-play:hover { color: #1a0d05; border: 0; filter: brightness(1.05); }
.radio-card.playing .radio-play { animation: rdPlayPulse 2.4s ease-in-out infinite; }
@keyframes rdPlayPulse {
  0%, 100% { box-shadow: 0 9px 24px rgba(255, 107, 53, .5), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -5px 10px rgba(120, 40, 0, .5); }
  50% { box-shadow: 0 9px 38px rgba(255, 107, 53, .9), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -5px 10px rgba(120, 40, 0, .5); }
}
.radio-like.on { color: var(--danger); border-color: rgba(255, 77, 94, .6); background: radial-gradient(circle at 50% 28%, #3a2026, #1c1216 72%); }
.radio-vol { display: flex; align-items: center; gap: 10px; color: var(--text-dim); margin-left: auto; }
.radio-vol input[type=range] {
  -webkit-appearance: none; appearance: none; width: 116px; height: 6px; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--accent), rgba(255, 255, 255, .16));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}
.radio-vol input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #fff, #b9c0cc);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .65);
}
.radio-vol input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #fff, #b9c0cc);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .65);
}

.radio-note { position: relative; z-index: 2; color: var(--text-dim); font-size: .82rem; margin: 12px 4px 0; }
.radio-empty { color: var(--text-dim); font-size: .9rem; padding: 6px 2px; }

@media (max-width: 720px) {
  .radio-card { transform: none; }
  .radio-stage { grid-template-columns: 1fr; }
  .radio-grille { min-height: 96px; }
  .radio-deck { gap: 10px; }
  .radio-vol { width: 100%; margin-left: 0; }
  .radio-vol input[type=range] { flex: 1; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .radio-card, .radio-card::before, .radio-shell, .radio-shell::before, .radio-glow,
  .radio-eq span, .radio-display::after, .radio-needle, .radio-play, .radio-live i {
    animation: none !important;
  }
  .radio-card { transform: none; }
}

/* ---- Submission panel ---------------------------------------------------- */
.radio-submit { margin-bottom: 22px; }
.radio-submit h3 { margin: 0 0 4px; }
.radio-submit .sub { color: var(--text-dim); font-size: .86rem; margin: 0 0 16px; }
.radio-cert {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  border: 1px solid var(--border); border-radius: 14px; padding: 14px;
  background: var(--panel-2); margin-bottom: 12px;
}
.radio-cert-main { min-width: 0; }
.radio-cert-kind { font-weight: 800; font-size: .92rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.radio-cert-meta { color: var(--text-dim); font-size: .8rem; margin-top: 3px; }
.radio-cert-fields { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.radio-cert-fields select,
.radio-cert-fields input {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 9px 12px; font: inherit; font-size: .86rem; outline: none;
}
.radio-cert-fields input { flex: 1; min-width: 130px; }
.radio-cert-fields select:focus, .radio-cert-fields input:focus { border-color: var(--accent-2); }
.radio-cert .btn { align-self: center; }
.badge-station {
  font-size: .66rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  color: #c6ffe4; border: 1px solid rgba(53, 255, 158, .5); background: rgba(53, 255, 158, .12);
  border-radius: 6px; padding: 2px 7px;
}
.radio-upsell {
  border: 1px dashed rgba(255, 107, 53, .5); background: rgba(255, 107, 53, .08);
  border-radius: 14px; padding: 16px; color: var(--text);
}
.radio-upsell a { color: var(--accent); font-weight: 800; }

/* your station tracks */
.radio-mytracks { margin-top: 6px; }
.radio-track {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); margin-bottom: 8px;
}
.radio-track .nm { font-weight: 700; font-size: .92rem; }
.radio-track .mt { color: var(--text-dim); font-size: .78rem; }
.radio-track .spacer { margin-left: auto; }
.radio-track .rm {
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  border-radius: 8px; padding: 6px 10px; font-size: .78rem; cursor: pointer;
}
.radio-track .rm:hover { color: var(--danger); border-color: rgba(255, 77, 94, .5); }

/* ---- Featured artists ---------------------------------------------------- */
.soc-section-title { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 14px; }
.soc-section-title h2 { margin: 0; font-size: 1.15rem; }
.soc-section-title .sub { color: var(--text-dim); font-size: .84rem; }
.rank-badge {
  position: absolute; top: 12px; right: 12px; font-size: .68rem; font-weight: 900;
  color: #1a0d05; background: linear-gradient(92deg, var(--accent), #ff8a4c);
  border-radius: 999px; padding: 2px 9px;
}
.creator-card { position: relative; }
.radio-stats-row { display: flex; gap: 12px; flex-wrap: wrap; color: var(--text-dim); font-size: .78rem; margin: 8px 0 0; }
.radio-stats-row b { color: var(--text); }

/* ---- Profile posts (Facebook-style) -------------------------------------- */
.post-composer {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; margin-bottom: 18px;
}
.post-composer textarea {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: 12px; font: inherit; resize: vertical; min-height: 74px; outline: none;
}
.post-composer textarea:focus { border-color: var(--accent-2); }
.post-composer-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.post-vis { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.post-vis button {
  border: 0; background: transparent; color: var(--text-dim); padding: 7px 14px;
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.post-vis button.active { background: rgba(53, 194, 255, .14); color: var(--text); }
.post-composer-foot .spacer { margin-left: auto; }
.post-list { display: flex; flex-direction: column; gap: 14px; }
.post-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px;
}
.post-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.post-head .who { min-width: 0; }
.post-head .nm { font-weight: 800; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.post-head .when { color: var(--text-dim); font-size: .76rem; }
.post-head .spacer { margin-left: auto; }
.post-vis-badge {
  font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 6px; padding: 2px 7px; border: 1px solid var(--border); color: var(--text-dim);
}
.post-vis-badge.public { color: #cfeaff; border-color: rgba(53, 194, 255, .4); background: rgba(53, 194, 255, .1); }
.post-vis-badge.private { color: #ffe6c9; border-color: rgba(255, 178, 122, .45); background: rgba(255, 178, 122, .1); }
.post-body { font-size: .95rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.post-foot { display: flex; gap: 10px; margin-top: 12px; }
.post-foot .rm {
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  border-radius: 8px; padding: 6px 12px; font-size: .8rem; cursor: pointer;
}
.post-foot .rm:hover { color: var(--danger); border-color: rgba(255, 77, 94, .5); }
.post-empty { color: var(--text-dim); font-size: .9rem; padding: 6px 2px; }

/* ============================================================================
   Community live feed — a full-width "stage" below the featured artists.
   Big, layered, 3D post cards built to pull the eye and invite posting.
   ========================================================================== */
.soc-featured { margin-bottom: 42px; }

.feed-stage {
  position: relative;
  padding: 30px clamp(18px, 3vw, 40px) 42px;
  border-radius: 26px;
  border: 1px solid transparent;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 107, 53, .12) 0%, rgba(255, 107, 53, 0) 46%),
    radial-gradient(120% 140% at 100% 0%, rgba(53, 194, 255, .14) 0%, rgba(53, 194, 255, 0) 48%),
    linear-gradient(180deg, #0e1116 0%, #090b0f 100%);
  background-clip: padding-box;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .04) inset,
    0 30px 70px -30px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(255, 255, 255, .02);
}
.feed-stage::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, rgba(255, 107, 53, .55), rgba(53, 194, 255, .45) 55%, rgba(255, 107, 53, .25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none; opacity: .7;
}

.feed-stage-head { margin-bottom: 22px; }
.fsh-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fsh-title h2 {
  margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.01em;
  background: linear-gradient(92deg, #ffffff 0%, #ffd9c6 46%, #b9e8ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fsh-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: #ffd0bd; border: 1px solid rgba(255, 107, 53, .5); background: rgba(255, 107, 53, .12);
  border-radius: 999px; padding: 4px 11px 4px 9px;
}
.fsh-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(255, 107, 53, .7); animation: fshPulse 1.8s ease-out infinite;
}
@keyframes fshPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, .65); }
  70% { box-shadow: 0 0 0 9px rgba(255, 107, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}
.fsh-sub { margin: 10px 0 0; color: var(--text-dim); font-size: .95rem; max-width: 660px; }

/* the feed itself: a wide, airy column of big cards */
.feed-list { display: flex; flex-direction: column; gap: 20px; }

/* ---- big 3D post card ---- */
.feed-post {
  position: relative;
  padding: 22px 24px 24px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #252b37 0%, #1a1e27 100%);
  background-clip: padding-box;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .10) inset,
    0 -1px 0 rgba(0, 0, 0, .45) inset,
    0 26px 50px -24px rgba(0, 0, 0, .95),
    0 10px 22px -14px rgba(0, 0, 0, .8),
    0 2px 0 rgba(255, 255, 255, .02);
  transition: transform .28s cubic-bezier(.2, .8, .25, 1), box-shadow .28s ease;
  transform: translateZ(0);
  will-change: transform;
}
.feed-post::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .02) 42%, rgba(53, 194, 255, .30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.fp-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.fp-sheen::after {
  content: '';
  position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg); transition: left .7s ease;
}
.feed-post:hover {
  transform: translateY(-5px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .09) inset,
    0 34px 60px -28px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(255, 107, 53, .18),
    0 0 40px -8px rgba(255, 107, 53, .22);
}
.feed-post:hover .fp-sheen::after { left: 130%; }

/* gentle cascading reveal so the feed draws the eye in (no forward fill, so the
   hover lift above still works once the entrance finishes) */
@keyframes feedIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.feed-post { animation: feedIn .5s cubic-bezier(.2, .8, .25, 1) backwards; }
.feed-post:nth-child(2) { animation-delay: .06s; }
.feed-post:nth-child(3) { animation-delay: .12s; }
.feed-post:nth-child(4) { animation-delay: .18s; }
.feed-post:nth-child(5) { animation-delay: .24s; }
.feed-post:nth-child(6) { animation-delay: .30s; }
@media (prefers-reduced-motion: reduce) { .feed-post { animation: none; } }

.feed-post .fp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.feed-post .fp-av { flex: 0 0 auto; display: inline-flex; border-radius: 50%; }
.feed-post .fp-av .soc-avatar { box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .9), 0 0 0 2px rgba(255, 255, 255, .05); }
.feed-post .fp-id { min-width: 0; }
.feed-post .fp-name { font-weight: 800; font-size: 1.08rem; }
.feed-post .fp-name a { color: var(--text); }
.feed-post .fp-name a:hover { color: var(--accent); }
.feed-post .fp-sub { color: var(--text-dim); font-size: .82rem; margin-top: 2px; }
.feed-post .fp-body { font-size: 1.06rem; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; color: #f1f3f6; }

/* ---- post composer tools (photo / video) ---- */
.post-tools { display: inline-flex; gap: 8px; }
.post-tool {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 13px; font-size: .82rem; font-weight: 700; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.post-tool:hover { border-color: var(--accent-2); background: rgba(53, 194, 255, .1); }
.post-tool:active { transform: scale(.97); }

/* ---- attachment preview strip ---- */
.post-attach { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pa-item {
  position: relative; width: 92px; height: 92px; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--border); background: #0b0d12;
}
.pa-item img, .pa-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-badge {
  position: absolute; left: 6px; bottom: 6px; font-size: .7rem;
  background: rgba(0, 0, 0, .6); border-radius: 6px; padding: 2px 5px;
}
.pa-rm {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border-radius: 50%; border: 0; cursor: pointer; line-height: 1;
  background: rgba(0, 0, 0, .65); color: #fff; font-size: .8rem;
}
.pa-rm:hover { background: var(--danger); }

/* ---- rendered post media grid ---- */
.post-media { display: grid; gap: 8px; margin-top: 10px; }
.post-media.single { grid-template-columns: 1fr; max-width: 460px; }
.post-media.multi { grid-template-columns: repeat(2, 1fr); }
.pm-item { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #0b0d12; }
.pm-image a { display: block; }
.pm-image img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
.pm-video video { width: 100%; max-height: 460px; display: block; background: #000; }

/* full-width media inside the big feed cards */
.feed-post .post-media { margin-top: 16px; }
.feed-post .post-media.single { max-width: 100%; }
.feed-post .pm-image img { max-height: 560px; }
.feed-post .pm-video video { max-height: 620px; }

/* ---- composer mounted at the top of the community live feed ---- */
.feed-composer { margin-bottom: 22px; }
.feed-composer .post-composer { margin-bottom: 0; padding: 16px; }
.feed-composer .post-composer textarea { min-height: 62px; }

@media (max-width: 720px) {
  .radio-body { gap: 12px; }
  .radio-controls { width: 100%; justify-content: space-between; }
  .radio-cert { grid-template-columns: 1fr; }
}

/* ============================================================================
   Post engagement — like / comment / share action bar, post modal & share sheet
   ========================================================================== */

/* the whole feed card is clickable to open the post */
.feed-post, .music-post { cursor: pointer; }
.feed-post a, .feed-post button, .feed-post .music-player, .feed-post video,
.music-post a, .music-post button, .music-post .music-player, .music-post video { cursor: auto; }
.feed-post a, .music-post a { cursor: pointer; }
.feed-post button, .music-post button { cursor: pointer; }

/* ---- action bar ---- */
.fp-actions {
  display: flex; align-items: center; gap: 6px;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.fp-act {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  color: var(--text-dim); font: inherit; font-size: .86rem; font-weight: 700;
  padding: 7px 13px; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, transform .1s;
}
.fp-act:hover { color: var(--text); background: rgba(255, 255, 255, .06); border-color: var(--border); }
.fp-act:active { transform: scale(.96); }
.fp-act .fp-act-ico { font-size: 1.02rem; line-height: 1; }
.fp-act-n { min-width: 8px; text-align: left; font-variant-numeric: tabular-nums; }
.fp-act-n[hidden] { display: none; }
.fp-like:hover { color: #ff8aa0; }
.fp-like.liked { color: #ff4d6d; }
.fp-like.liked .fp-act-ico { color: #ff4d6d; }
.fp-like.liked:hover { background: rgba(255, 77, 109, .12); border-color: rgba(255, 77, 109, .35); }
.fp-comment:hover { color: var(--accent-2); }
.fp-share:hover { color: var(--accent-3); }

/* music cards carry the same bar */
.music-post .fp-actions { margin-top: 12px; }

/* ---- repost tag + embedded original ---- */
.fp-repost-tag {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent-3);
  background: rgba(53, 255, 158, .1); border: 1px solid rgba(53, 255, 158, .3);
  border-radius: 999px; padding: 2px 8px; margin-left: 8px; vertical-align: middle;
}
.fp-shared {
  margin-top: 12px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--border); background: rgba(0, 0, 0, .22);
}
.fp-shared-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fp-shared-head .fp-av { display: inline-flex; border-radius: 50%; }
.fp-shared .fp-body { font-size: .98rem; }

/* ============================================================================
   Post modal
   ========================================================================== */
body.modal-open { overflow: hidden; }
.post-modal {
  position: fixed; inset: 0; z-index: 130;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.post-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .68); backdrop-filter: blur(3px); }
.post-modal-card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 640px; max-height: 88vh;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: linear-gradient(180deg, #1b1f28 0%, #14171e 100%);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .05) inset;
  animation: pmIn .28s cubic-bezier(.2, .8, .25, 1);
  overflow: hidden;
}
@keyframes pmIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.post-modal-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(0, 0, 0, .4); color: var(--text); font-size: .95rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.post-modal-x:hover { background: rgba(255, 77, 94, .2); border-color: var(--danger); }
.post-modal-scroll { flex: 1 1 auto; overflow-y: auto; padding: 22px 24px 8px; }
.pm-post { padding-right: 30px; }
.pm-loading { color: var(--text-dim); font-size: .92rem; padding: 12px 2px; }

/* ---- comments ---- */
.post-comments { margin-top: 6px; padding-bottom: 8px; }
.pm-comments-head {
  font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim); margin: 14px 0 12px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.pm-comments-empty { color: var(--text-dim); font-size: .92rem; padding: 6px 2px 14px; }
.pm-comment { display: flex; gap: 10px; padding: 9px 0; }
.pm-comment-av { flex: 0 0 auto; display: inline-flex; border-radius: 50%; }
.pm-comment-main { min-width: 0; flex: 1 1 auto; }
.pm-comment-top { display: flex; align-items: center; gap: 8px; }
.pm-comment-name { font-weight: 800; font-size: .92rem; color: var(--text); }
.pm-comment-name:hover { color: var(--accent); }
.pm-comment-when { color: var(--text-dim); font-size: .76rem; }
.pm-comment-del {
  margin-left: auto; background: transparent; border: 0; color: var(--text-dim);
  cursor: pointer; font-size: .78rem; padding: 2px 6px; border-radius: 6px;
}
.pm-comment-del:hover { color: var(--danger); background: rgba(255, 77, 94, .12); }
.pm-comment-text { font-size: .96rem; line-height: 1.5; color: #eef0f4; margin-top: 2px; white-space: pre-wrap; word-wrap: break-word; }

/* ---- comment composer ---- */
.post-comment-form {
  display: flex; gap: 10px; align-items: center;
  padding: 14px 18px; border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, .25);
}
.post-comment-form input {
  flex: 1 1 auto; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 11px 16px; font: inherit; font-size: .94rem;
}
.post-comment-form input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(53, 194, 255, .12); }
.post-comment-form .btn { flex: 0 0 auto; }

/* ============================================================================
   Share sheet
   ========================================================================== */
.share-sheet {
  position: fixed; inset: 0; z-index: 140;
  display: flex; align-items: flex-end; justify-content: center;
}
.share-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); }
.share-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px; margin: 0 16px 16px;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: linear-gradient(180deg, #1c212b 0%, #14171e 100%);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .95);
  padding: 16px; animation: ssIn .26s cubic-bezier(.2, .8, .25, 1);
}
@keyframes ssIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.share-head { font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); padding: 4px 6px 12px; }
.share-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: 13px 15px; font: inherit; font-size: .96rem; font-weight: 700;
  cursor: pointer; margin-bottom: 9px; text-align: left;
  transition: border-color .15s, background .15s, transform .1s;
}
.share-opt:hover { border-color: var(--accent-2); background: rgba(53, 194, 255, .08); }
.share-opt:active { transform: scale(.99); }
.share-opt[hidden] { display: none; }
.share-ico { font-size: 1.1rem; }
.share-cancel {
  width: 100%; background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 12px; padding: 12px; font: inherit; font-weight: 700; cursor: pointer; margin-top: 2px;
}
.share-cancel:hover { color: var(--text); border-color: var(--text-dim); }

@media (max-width: 640px) {
  .post-modal { padding: 0; }
  .post-modal-card { max-width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .pm-post { padding-right: 24px; }
}

/* §209: save-to-favorites button in the radio deck */
.radio-save.on { color: #ffcf5c; border-color: rgba(255, 207, 92, .6); background: radial-gradient(circle at 50% 28%, #3a3320, #1c1a12 72%); }

/* §209: reusable "save to My Favorites" star on any song surface */
.fav-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text-dim); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0;
  transition: color .15s, border-color .15s, background .15s, transform .12s;
}
.fav-btn:hover { color: #ffcf5c; border-color: rgba(255, 207, 92, .55); transform: translateY(-1px); }
.fav-btn.on { color: #ffcf5c; border-color: rgba(255, 207, 92, .6); background: rgba(255, 207, 92, .1); }
.fav-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }


/* ============================================================================
   §210 -- My Favorites: a small collapsible tab on the radio that opens a
   compact, scrollable dropdown of the user's saved songs (alphabetical), with
   up/down scroll arrows for touch devices. Capped so it never exceeds the
   player's own height.
   ========================================================================== */
.radio-fav-tab {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #ffd98a; background: rgba(255, 207, 92, .1);
  border: 1px solid rgba(255, 207, 92, .32); border-radius: 999px;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
  transition: background .16s, border-color .16s, color .16s;
}
.radio-fav-tab:hover { background: rgba(255, 207, 92, .18); border-color: rgba(255, 207, 92, .5); }
.radio-fav-tab.open { background: rgba(255, 207, 92, .22); border-color: rgba(255, 207, 92, .6); }
.radio-fav-tab-ico { font-size: 12px; line-height: 1; }
.radio-fav-count {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #ffcf5c; color: #1a1400; font-size: 10px; font-weight: 800;
}
@media (max-width: 620px) { .radio-fav-tab-txt { display: none; } }

.radio-fav-panel {
  position: absolute; top: 60px; right: 16px; z-index: 30;
  width: min(290px, 86%); max-height: 300px;
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, #171b25, #0d1017);
  border: 1px solid rgba(255, 207, 92, .3); border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .62);
  animation: rdFavDrop .16s ease both;
}
@keyframes rdFavDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.radio-fav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px; font-weight: 700; color: #ffcf5c; letter-spacing: .03em;
}
.radio-fav-close { background: none; border: 0; color: #98a; font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.radio-fav-close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.radio-fav-body { display: flex; flex-direction: column; min-height: 0; }
.radio-fav-arrow {
  flex: 0 0 auto; width: 100%; height: 22px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .04); color: #cdd4e4; font-size: 10px; line-height: 1;
  transition: background .14s, color .14s;
}
.radio-fav-arrow:hover:not(:disabled) { background: rgba(255, 207, 92, .16); color: #ffcf5c; }
.radio-fav-arrow:disabled { opacity: .3; cursor: default; }
.radio-fav-list {
  flex: 1 1 auto; min-height: 0; max-height: 196px; overflow-y: auto;
  padding: 5px; display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 207, 92, .5) transparent;
  -webkit-overflow-scrolling: touch;
}
.radio-fav-list::-webkit-scrollbar { width: 7px; }
.radio-fav-list::-webkit-scrollbar-thumb { background: rgba(255, 207, 92, .45); border-radius: 999px; }
.radio-fav-list::-webkit-scrollbar-track { background: transparent; }
.radio-fav-empty { padding: 16px 12px; text-align: center; color: #8b93a7; font-size: 12px; line-height: 1.5; }
.radio-fav-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 9px; }
.radio-fav-item:hover { background: rgba(255, 255, 255, .05); }
.radio-fav-play {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 10px; padding: 0;
  background: radial-gradient(circle at 50% 30%, #2a2f3d, #14171f);
  border: 1px solid rgba(255, 255, 255, .14); color: #fff;
}
.radio-fav-play:hover { border-color: rgba(255, 207, 92, .6); color: #ffcf5c; }
.radio-fav-item-main { flex: 1 1 auto; min-width: 0; }
.radio-fav-item-title { font-size: 12.5px; color: #eef1f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-fav-item-artist { font-size: 11px; color: #8b93a7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-fav-rm {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; cursor: pointer; padding: 0;
  background: rgba(255, 90, 120, .08); border: 1px solid rgba(255, 90, 120, .25); color: #ff7a97; font-size: 11px;
}
.radio-fav-rm:hover { background: rgba(255, 90, 120, .16); }
.radio-fav-rm:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Popular Online cards (community discovery rail) --------------------- */
.po-card { padding-top: 16px; }
.po-status {
  display: flex; align-items: center; gap: 7px; margin: 0 0 2px; padding-right: 54px;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-3);
}
.po-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim); flex: 0 0 auto; }
.po-dot.online { background: var(--accent-3); box-shadow: 0 0 0 4px rgba(53, 255, 158, .18); animation: poPulse 1.9s ease-in-out infinite; }
.po-dot.recent { background: var(--text-dim); }
.po-live.muted { color: var(--text-dim); }
@keyframes poPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .po-dot.online { animation: none; } }
/* ---- Paid placement (§214): demand board, placement card, my posts -------- */
.rp-section { margin-top: 22px; }
.rp-section-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rp-section-head > div { flex: 1 1 320px; }
.rp-section-head h2 { margin: 8px 0 6px; }
.rp-section-head .dim { margin: 0; max-width: 60ch; }
.rp-section-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 12px; }
.rp-section-sub h3 { margin: 0; font-size: 1.05rem; }
/* Collapsible section header (details/summary): keep the original top-aligned
   look, pin the CTA + chevron to the right, and space the body when open. */
.rp-section.collapsible > .collapsible-head { align-items: flex-start; margin-bottom: 0; }
.rp-section.collapsible > .collapsible-head .collapsible-tail { margin-left: auto; }
.rp-section.collapsible > .collapsible-body { margin-top: 16px; }
.rp-section.collapsible > .collapsible-head .btn { pointer-events: auto; }
.rp-mine-refresh, .rp-board-refresh {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text-dim);
  border-radius: 9px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700;
}
.rp-mine-refresh:hover, .rp-board-refresh:hover { color: var(--text); border-color: var(--accent); }

/* demand board */
.rp-board-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.rp-board-head > div { flex: 1 1 auto; }
.rp-board-head h3 { margin: 0 0 4px; font-size: 1.05rem; }
.rp-board-sub { margin: 0; color: var(--text-dim); font-size: .86rem; line-height: 1.5; max-width: 70ch; }
.rp-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.rp-genre {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; background: var(--panel-2);
  transition: .15s ease;
}
.rp-genre.sel { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(255, 107, 53, .35) inset; }
.rp-genre-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.rp-genre-name { font-weight: 800; font-size: .92rem; }
.rp-price { font-weight: 800; color: var(--accent); font-size: .92rem; white-space: nowrap; }
.rp-price i { font-style: normal; font-size: .68rem; color: var(--text-dim); font-weight: 700; margin-left: 3px; }
.rp-genre-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: .72rem; color: var(--text-dim); font-weight: 600; }
.rp-meter { height: 7px; border-radius: 6px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.rp-meter > span { display: block; height: 100%; border-radius: 6px; background: var(--accent-2); transition: width .4s ease; }
.rp-meter.cool > span { background: linear-gradient(90deg, #35c2ff, #35ff9e); }
.rp-meter.warm > span { background: linear-gradient(90deg, #35c2ff, #ffcf5c); }
.rp-meter.full > span { background: linear-gradient(90deg, #ffcf5c, #ff6b35); }
.rp-meter.over > span { background: linear-gradient(90deg, #ff6b35, #ff4d5e); }
.rp-board-foot { margin: 14px 0 0; font-size: .8rem; color: var(--text-dim); }
.rp-board-loading, .rp-mine-loading { color: var(--text-dim); font-size: .9rem; padding: 12px 0; }
.rp-mine-empty { color: var(--text-dim); font-size: .9rem; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 12px; }

/* placement card (used in the post-to-station modal) */
.rp-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 15px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 107, 53, .1), transparent 60%), var(--panel-2);
  display: flex; flex-direction: column; gap: 12px;
}
.rp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rp-card-title { font-weight: 800; font-size: .95rem; }
.rp-card-live { font-size: .72rem; font-weight: 800; color: var(--accent-3); letter-spacing: .04em; }
.rp-card-field { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; color: var(--text-dim); font-weight: 700; }
.rp-card-field select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: inherit; font-weight: 500; }
.rp-card-field select:focus { outline: none; border-color: var(--accent); }
.rp-card-meter-wrap { display: flex; flex-direction: column; gap: 6px; }
.rp-card-meter-meta { display: flex; justify-content: space-between; font-size: .74rem; color: var(--text-dim); font-weight: 600; }
.rp-card-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rp-card-price { font-size: 1.5rem; font-weight: 800; color: var(--accent); line-height: 1; }
.rp-card-price i { font-style: normal; font-size: .8rem; color: var(--text-dim); font-weight: 700; }
.rp-card-usd { font-size: .8rem; color: var(--text-dim); font-weight: 600; margin-top: 3px; }
.rp-card-lease { text-align: right; font-size: .76rem; color: var(--text-dim); font-weight: 600; }
.rp-card-lease b { font-size: 1.2rem; color: var(--text); }
.rp-card-note { margin: 0; font-size: .78rem; color: var(--text-dim); line-height: 1.5; }

/* my placements */
.rp-mine-list { display: flex; flex-direction: column; gap: 10px; }
.rp-mine {
  display: grid; grid-template-columns: 1.4fr 1.3fr auto auto; gap: 12px; align-items: center;
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--panel-2);
}
.rp-mine.active { border-color: rgba(53, 255, 158, .28); }
.rp-mine-title { font-weight: 800; font-size: .95rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-mine-genre { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-2); border: 1px solid rgba(53, 194, 255, .3); border-radius: 999px; padding: 1px 8px; }
.rp-mine-sub { font-size: .78rem; color: var(--text-dim); margin-top: 3px; }
.rp-mine-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: .76rem; color: var(--text-dim); }
.rp-mine-stats b { color: var(--text); }
.rp-guarantee { font-size: .74rem; font-weight: 800; white-space: nowrap; }
.rp-guarantee.ok { color: var(--accent-3); }
.rp-guarantee.warn { color: #ffcf5c; }
.rp-guarantee.pending { color: var(--accent-2); }
.rp-guarantee.err { color: var(--danger); }
.rp-guarantee.dim { color: var(--text-dim); }
.rp-mine-actions { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.rp-renew { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-dim); font-weight: 700; cursor: pointer; }
.rp-cancel { border: 1px solid rgba(255, 77, 94, .3); background: rgba(255, 77, 94, .08); color: #ff7a97; border-radius: 9px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; }
.rp-cancel:hover { background: rgba(255, 77, 94, .16); }
.rp-cancel:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 720px) {
  .rp-mine { grid-template-columns: 1fr; }
  .rp-mine-actions { justify-content: flex-start; }
}

/* promoted badge on the player */
.radio-promoted {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #1a0d05; background: linear-gradient(135deg, #ffcf5c, #ff6b35);
  border-radius: 999px; padding: 1px 8px;
}