/* Hear & Now / BASE: legacy CSS consolidated in original cascade order.
   V11 design refinements live in clarity.css. */

/* ===== Base module: app.css ===== */
/* To use the exact fonts from your site: put the .woff2 files in /public/fonts and add  url("/fonts/yourfile.woff2") format("woff2")  after local(...) below. */
/* Hear & Now. Dark: white and red on black. Light: black and red on white. Gold and purple as hints. */

@font-face { font-family: "Bebas Neue"; src: local("Bebas Neue"), local("BebasNeue-Regular"); font-display: swap; }
@font-face { font-family: "Champagne & Limousines"; src: local("Champagne & Limousines"), local("ChampagneLimousines"); font-display: swap; }

:root {
  --bg: #000;
  --ink: #fff;
  --muted: rgba(255, 255, 255, 0.66);
  --faint: rgba(255, 255, 255, 0.4);
  --panel: rgba(255, 255, 255, 0.055);
  --panel-2: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.16);
  --red: #ff2b45;
  --red-deep: #c4001d;
  --gold: #e2b24f;
  --purple: #8d5bff;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 14px 34px rgba(0, 0, 0, 0.55);
  --head: "Bebas Neue", "League Gothic", Impact, "Arial Narrow Bold", "Helvetica Neue", sans-serif;
  --body: "Champagne & Limousines", "Josefin Sans", "Avenir Next", Avenir, "Helvetica Neue", system-ui, sans-serif;
  --pad: clamp(14px, 3vw, 52px);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #fff;
  --ink: #000;
  --muted: rgba(0, 0, 0, 0.66);
  --faint: rgba(0, 0, 0, 0.42);
  --panel: rgba(0, 0, 0, 0.04);
  --panel-2: rgba(0, 0, 0, 0.075);
  --line: rgba(0, 0, 0, 0.18);
  --red: #d4001f;
  --red-deep: #a80018;
  --gold: #a87a12;
  --purple: #5b2fd6;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 28px rgba(0, 0, 0, 0.14);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.wrap { position: relative; z-index: 1; padding: 0 var(--pad) 80px; width: 100%; }
h1, h2, h3 { font-family: var(--head); font-weight: 400; letter-spacing: 0.02em; margin: 0; line-height: 0.95; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- top bar ---------- */
.bar { display: flex; align-items: center; gap: 14px; padding: 16px 0; flex-wrap: wrap; }
.logo { font-family: var(--head); font-size: 2.1rem; letter-spacing: 0.06em; text-decoration: none; display: flex; align-items: center; gap: 12px; line-height: 1; }
.logo i { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--gold) 0 14%, #000 15% 38%, var(--red) 39% 44%, #000 45% 100%); box-shadow: 0 0 0 2px var(--red), 0 4px 12px rgba(255, 43, 69, 0.45); }
.bar .grow { flex: 1; }

/* ---------- buttons ---------- */
.btn {
  appearance: none; cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  font-family: var(--head); font-size: 1.05rem; letter-spacing: 0.08em; padding: 9px 18px; border-radius: 10px; line-height: 1.1;
  box-shadow: var(--shadow); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.btn:hover { border-color: var(--red); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, var(--red), var(--red-deep)); border-color: transparent; color: #fff; }
.btn.primary:hover { filter: brightness(1.12); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.danger:hover { border-color: #ff5d5d; color: #ff7a7a; }
.btn.sm { font-size: 0.9rem; padding: 6px 12px; border-radius: 8px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ---------- panels ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: clamp(14px, 2vw, 24px); box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.panel > h2 { font-size: 1.9rem; margin-bottom: 14px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 0.9rem; }

/* ---------- platform chip ---------- */
.chip { --pc: var(--purple); display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; line-height: 1; padding: 6px 11px; border-radius: 999px; background: var(--pc); color: #fff; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 4px 12px color-mix(in srgb, var(--pc) 45%, transparent); white-space: nowrap; }
.chip-dark { color: #000; }

/* ---------- rating ---------- */
.rating { display: inline-flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }
.rating b { font-family: var(--head); font-weight: 400; font-size: 1.7rem; color: var(--gold); line-height: 1; }
.rating small { color: var(--faint); margin-right: 8px; }
.bars { display: inline-flex; gap: 3px; align-self: center; }
.bars i { width: 5px; height: 14px; border-radius: 2px; background: var(--line); }
.bars i.on { background: linear-gradient(180deg, var(--red), var(--red-deep)); }
.rating-big b { font-size: 4.2rem; }
.rating-big small { font-size: 1.2rem; }
.rating-big .bars i { width: 10px; height: 26px; border-radius: 3px; }
.awaiting { color: var(--faint); font-style: italic; }

/* ---------- thumbnails ---------- */
.thumb { width: 56px; height: 56px; border-radius: 9px; object-fit: cover; flex: none; background: var(--panel-2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
.thumb.ph, .cover.ph { display: grid; place-items: center; font-family: var(--head); font-size: 1.8rem; color: #fff; background: linear-gradient(135deg, var(--purple), var(--red-deep)); }

/* ---------- hero: the record sleeve ---------- */
.hero { display: grid; grid-template-columns: minmax(300px, min(56vw, 860px)) 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: 18px 0 40px; }
/* The art box is wider than the cover so the record has room to slide out without covering the text. */
.art { position: relative; aspect-ratio: 1.55 / 1; width: 100%; }
.cover { position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 1; width: auto; object-fit: cover; border-radius: 14px; z-index: 2; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--line); }
.cover.ph { width: auto; font-size: clamp(5rem, 14vw, 9rem); }
.disc { position: absolute; width: 59.4%; aspect-ratio: 1; top: 50%; margin-top: -29.7%; left: 24%; z-index: 1; transition: left 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vinyl {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #0b0b0b 0 2px, #1b1b1b 2px 3px), #0b0b0b;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.vinyl::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 20%, rgba(255, 255, 255, 0.18) 25%, transparent 32% 70%, rgba(255, 255, 255, 0.12) 76%, transparent 82%); }
.vinyl::after { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: radial-gradient(circle, #000 0 8%, var(--gold) 9% 22%, var(--red) 23% 100%); box-shadow: 0 0 0 4px #111; }
.hero.live .disc { left: 40.6%; }
.hero.live .vinyl { animation: spin 3.4s linear 1s infinite; }
.hero.recent .disc { left: 36%; }
@keyframes spin { to { transform: rotate(360deg); } }
.status { display: inline-flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--muted); }
.status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); }
.hero.live .status { color: var(--ink); }
.hero.live .dot { background: var(--red); box-shadow: 0 0 0 0 rgba(255, 43, 69, 0.7); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(255, 43, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 43, 69, 0); } }
.meter { display: none; gap: 3px; align-items: flex-end; height: 18px; }
.hero.live .meter { display: inline-flex; }
.meter i { width: 4px; background: linear-gradient(180deg, var(--gold), var(--red)); border-radius: 2px; animation: lvl 1.1s ease-in-out infinite; height: 30%; }
.meter i:nth-child(2) { animation-delay: 0.15s; } .meter i:nth-child(3) { animation-delay: 0.3s; } .meter i:nth-child(4) { animation-delay: 0.45s; } .meter i:nth-child(5) { animation-delay: 0.6s; }
@keyframes lvl { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.hero .info { min-width: 0; display: grid; gap: 14px; }
.status { display: inline-flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--muted); }
.status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); }
.hero.live .status { color: var(--ink); }
.hero.live .dot { background: var(--red); box-shadow: 0 0 0 0 rgba(255, 43, 69, 0.7); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(255, 43, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 43, 69, 0); } }
.meter { display: none; gap: 3px; align-items: flex-end; height: 18px; }
.hero.live .meter { display: inline-flex; }
.meter i { width: 4px; background: linear-gradient(180deg, var(--gold), var(--red)); border-radius: 2px; animation: lvl 1.1s ease-in-out infinite; height: 30%; }
.meter i:nth-child(2) { animation-delay: 0.15s; } .meter i:nth-child(3) { animation-delay: 0.3s; } .meter i:nth-child(4) { animation-delay: 0.45s; } .meter i:nth-child(5) { animation-delay: 0.6s; }
@keyframes lvl { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.hero h1 { font-size: clamp(3.2rem, 8.5vw, 8rem); line-height: 0.88; overflow-wrap: anywhere; }
.hero .creator { font-size: clamp(1.2rem, 2.2vw, 1.8rem); }
.hero .detail { color: var(--muted); }
.hero .row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero .review { max-width: 60ch; color: var(--muted); border-left: 3px solid var(--red); padding-left: 14px; white-space: pre-wrap; }
.credit { color: var(--muted); font-size: 0.95rem; }
.credit b { color: var(--gold); font-weight: 700; }
.modenote { color: var(--faint); font-size: 0.88rem; }
.hero.empty .disc { left: 30%; opacity: 0.6; }

/* ---------- lists ---------- */
.cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 36px); align-items: start; }
.stack { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.tabs { display: none; gap: 8px; margin: 0 0 16px; position: sticky; top: 0; z-index: 5; padding: 8px 0; background: var(--bg); }
.tabs button { flex: 1; white-space: nowrap; letter-spacing: 0.04em; padding-left: 8px; padding-right: 8px; }
.tabs button[aria-selected="true"] { background: linear-gradient(180deg, var(--red), var(--red-deep)); border-color: transparent; color: #fff; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pill { cursor: pointer; border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 6px 14px; font-size: 0.92rem; }
.pill[aria-pressed="true"], .pill.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.list { display: grid; gap: 4px; }
.item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid transparent; }
.item:hover { background: var(--panel-2); border-color: var(--line); }
.item .t { font-size: 1.08rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .s { color: var(--muted); font-size: 0.93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .r { display: grid; gap: 6px; justify-items: end; text-align: right; }
.item .when { color: var(--faint); font-size: 0.82rem; }
.pick { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.pick .thumb { width: 84px; height: 84px; }
.pick .t { font-weight: 700; font-size: 1.1rem; }
.pick .review { color: var(--muted); font-size: 0.95rem; margin-top: 6px; white-space: pre-wrap; }
.empty { color: var(--muted); padding: 22px 6px; }
.more { margin-top: 10px; }

/* ---------- forms ---------- */
label.f { display: grid; gap: 6px; font-size: 0.95rem; color: var(--muted); }
input[type="text"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], select, textarea {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; color: var(--ink); font-size: 1rem; min-height: 46px;
}
textarea { min-height: 84px; resize: vertical; }
select option { color: #000; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent); }
.form { display: grid; gap: 14px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.nums { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.nums button { cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px; min-height: 44px; font-family: var(--head); font-size: 1.3rem; }
.nums button.on { background: linear-gradient(180deg, var(--gold), #a87a12); color: #000; border-color: transparent; }
.err { color: #ff6b7d; min-height: 1.2em; font-size: 0.95rem; }
:root[data-theme="light"] .err { color: #c4001d; }
.results { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.result { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; text-align: left; }
.result:hover { border-color: var(--gold); }
.result .thumb { width: 48px; height: 48px; }
.note { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.note.gold { border-color: var(--gold); }

/* ---------- admin ---------- */
.wrap.narrow { max-width: 860px; margin: 0 auto; }
.admin .wrap { max-width: 1100px; margin: 0 auto; padding-bottom: 120px; }
.nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, var(--bg) 92%, transparent); border-top: 1px solid var(--line); backdrop-filter: blur(10px); padding-bottom: env(safe-area-inset-bottom); }
.nav button { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 12px 4px 10px; font-family: var(--head); font-size: 1.12rem; letter-spacing: 0.06em; color: var(--muted); position: relative; }
.nav button[aria-selected="true"] { color: var(--ink); }
.nav button[aria-selected="true"]::after { content: ""; position: absolute; left: 22%; right: 22%; top: 0; height: 3px; background: var(--red); border-radius: 0 0 3px 3px; }
.nav .badge { position: absolute; top: 6px; right: 14%; background: var(--red); color: #fff; font-family: var(--body); font-size: 0.72rem; border-radius: 999px; padding: 1px 6px; font-weight: 700; }
.pane { display: none; gap: 18px; }
.pane.on { display: grid; }
.now { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; }
.now .thumb { width: 84px; height: 84px; }
.now .t { font-weight: 700; font-size: 1.2rem; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.state { font-size: 0.78rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.state.public { border-color: #2fd07a; color: #2fd07a; }
.state.waiting { border-color: var(--gold); color: var(--gold); }
.state.hidden, .state.held { border-color: var(--faint); color: var(--faint); }
.state.level { border-color: var(--purple); color: var(--purple); }
.aitem { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); align-items: start; }
.aitem .t { font-weight: 700; }
.aitem .s { color: var(--muted); font-size: 0.93rem; }
.aitem .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.aitem .note-txt { margin-top: 8px; white-space: pre-wrap; border-left: 3px solid var(--purple); padding-left: 10px; color: var(--muted); }
.modes { display: grid; gap: 10px; }
.mode { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--panel); }
.mode:has(input:checked) { border-color: var(--red); background: var(--panel-2); }
.mode b { font-family: var(--head); font-size: 1.4rem; font-weight: 400; letter-spacing: 0.05em; }
.modal { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.7); display: grid; place-items: center; padding: 14px; overflow: auto; }
.modal .panel { width: min(640px, 100%); background: var(--bg); max-height: 92vh; overflow: auto; }
.linkbox { word-break: break-all; padding: 12px; border: 1px dashed var(--gold); border-radius: 10px; background: var(--panel); font-size: 0.9rem; }
details.more-opts summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
.login { min-height: 80vh; display: grid; place-items: center; }
.login .panel { width: min(420px, 100%); }

#toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: 0.25s; z-index: 60; max-width: 90vw; font-weight: 700; }
#toast.show { opacity: 1; transform: translateX(-50%); }
#toast.bad { background: var(--red); color: #fff; }

footer.foot { margin-top: 40px; color: var(--faint); font-size: 0.85rem; display: grid; gap: 6px; }

@media (min-width: 900px) {
  .admin .nav { position: sticky; top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--line); width: min(640px, 100%); margin: 0 auto 18px; border-radius: 0 0 14px 14px; }
  .admin #toast { bottom: 30px; }
}
@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; padding-top: 4px; }
  .art { max-width: 520px; margin: 0 auto; }
  .cols { grid-template-columns: 1fr; }
  .tabs { display: flex; }
  [data-pane]:not(.on) { display: none; }
  .two { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .item { grid-template-columns: auto minmax(0, 1fr); }
  .item .r { grid-column: 1 / -1; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: space-between; }
  .nums { grid-template-columns: repeat(5, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hero.live .vinyl, .hero.live .dot, .meter i { animation: none; }
  .hero.live .meter i { height: 70%; }
  * { transition: none !important; }
}


/* ===== Base module: public.css ===== */
/* Hear & Now — public listening room, editorial redesign. Admin is intentionally untouched. */
.public-site {
  --bg: #09090b;
  --ink: #f4f2ed;
  --muted: #aaa8a9;
  --faint: #77747c;
  --panel: rgba(24, 23, 28, .89);
  --panel-2: rgba(255, 255, 255, .065);
  --line: rgba(255, 255, 255, .14);
  --red: #ff665e;
  --red-deep: #de504e;
  --gold: #e3b77b;
  --purple: #9571c7;
  --body: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --head: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --pad: clamp(22px, 5vw, 82px);
  background: radial-gradient(ellipse 70vw 520px at 83% 10%, rgba(104, 38, 55, .23) 0%, transparent 69%),
              radial-gradient(ellipse 55vw 650px at -14% 48%, rgba(64, 51, 79, .13), transparent 74%), var(--bg);
  background-attachment: fixed;
  font-size: 15px;
  letter-spacing: -.012em;
}
:root[data-theme="light"] .public-site {
  --bg: #f4f1eb;
  --ink: #191921;
  --muted: #575662;
  --faint: #777580;
  --panel: rgba(255, 255, 255, .73);
  --panel-2: rgba(20, 20, 30, .05);
  --line: rgba(22, 21, 29, .15);
  --red: #cc514b;
  --red-deep: #a43635;
  --gold: #9b6735;
  background: radial-gradient(ellipse 70vw 520px at 83% 10%, rgba(232, 172, 145, .2) 0%, transparent 69%),var(--bg);
}
.public-site .wrap { max-width: 1600px; margin: 0 auto; padding-bottom: 20px; }
.public-site #stars { display: none; }
.public-site .public-bar { padding: 28px 0; border-bottom: 1px solid var(--line); gap: 34px; flex-wrap: nowrap; }
.public-site .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; }
.public-site .brand-name { font-size: 1.62rem; font-weight: 800; letter-spacing: -.08em; line-height: 1; }
.public-site .brand-amp { font-weight: 350; color: var(--red); margin: 0 1px; }
.public-site .brand-period, .public-site .pink-dot { color: var(--red); }
.public-site .brand-icon { position: relative; width: 31px; height: 31px; border: 2px solid var(--red); border-radius: 50%; display: inline-grid; place-items: center; transform: rotate(-23deg); }
.public-site .brand-icon:before { content: ''; width: 18px; height: 18px; border: 1.5px solid var(--red); border-radius: 50%; }
.public-site .brand-icon span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.public-site .top-links { margin: 0 auto; display: flex; gap: clamp(16px, 2.8vw, 43px); }
.public-site .top-links a { font-size: .81rem; letter-spacing: .04em; color: var(--muted); text-decoration: none; transition: color .2s; }
.public-site .top-links a:hover { color: var(--ink); }
.public-site .theme-btn { font-family: var(--body); text-transform: none; font-size: .77rem; letter-spacing: 0; border: 1px solid var(--line); padding: 11px 16px; border-radius: 999px; }
.public-site .btn { font-family: var(--body); font-size: .86rem; font-weight: 650; letter-spacing: .01em; border-radius: 999px; box-shadow: none; }
.public-site .btn.primary { background: var(--red); border-color: var(--red); color: #0e0a0c; }
.public-site .btn.primary:hover { background: #ff8a80; }
.public-site .intro { min-height: 310px; padding: 62px 0 56px; display: flex; justify-content: space-between; gap: 35px; position: relative; overflow: hidden; }
.public-site .intro > div:first-child { z-index: 1; }
.public-site .eyebrow { font-size: .69rem; letter-spacing: .19em; font-weight: 700; color: var(--red); text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.public-site .eyebrow-line { height: 1px; width: 22px; background: var(--red); }
.public-site .intro-title { font-family: var(--head); font-size: clamp(2.45rem, 5.3vw, 5.6rem); max-width: 960px; font-weight: 750; line-height: 1.08; letter-spacing: -.067em; margin: 25px 0 18px; }
.public-site em { font-family: Georgia, 'Iowan Old Style', serif; font-style: italic; font-weight: normal; letter-spacing: -.055em; }
.public-site .intro-title em { color: var(--gold); }
.public-site .intro-copy { color: var(--muted); font-size: 1rem; max-width: 620px; line-height: 1.75; }
.public-site .intro-mark { align-self: center; flex: 0 0 255px; height: 255px; position: relative; opacity: .45; margin-right: 2%; }
.public-site .orbit { position: absolute; border: 1px solid rgba(230, 171, 135, .29); border-radius: 50%; inset: 0; transform: rotate(-30deg) scaleX(.65); }
.public-site .orbit-two { transform: rotate(30deg) scaleX(.65); }
.public-site .orbit-three { transform: rotate(90deg) scaleX(.65); }
.public-site .orbit-core { width: 94px; height: 94px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #d5886e 0 5%, #662e34 37%, transparent 68%); box-shadow: 0 0 60px rgba(252, 95, 84, .17); }
.public-site .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; font-weight: 700; font-size: .7rem; letter-spacing: .18em; border-top: 1px solid var(--line); }
.public-site .section-no { color: var(--red); }
.public-site .section-context { color: var(--faint); font-weight: 500; }
.public-site .hero { margin-top: 12px; padding: clamp(24px, 4vw, 55px); border-radius: 18px; border: 1px solid rgba(218, 181, 162, .19); background: linear-gradient(125deg, rgba(72, 38, 44, .33), rgba(18, 18, 22, .93) 52%, rgba(20, 18, 25, .98)), var(--panel); position: relative; overflow: hidden; grid-template-columns: minmax(280px, min(43%, 470px)) minmax(0,1fr); gap: clamp(30px, 7vw, 100px); min-height: 424px; box-shadow: 0 26px 55px rgba(0, 0, 0, .18); }
:root[data-theme="light"] .public-site .hero { background: linear-gradient(125deg, #f7eae2, #f5f3ef 62%); }
.public-site .hero:after { content: ''; position: absolute; bottom: -140px; right: -180px; width: 440px; height: 440px; pointer-events: none; border: 1px solid rgba(245, 179, 131, .10); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.012), 0 0 0 110px rgba(255,255,255,.01); }
.public-site .hero .art { aspect-ratio: 1.3; width: 100%; max-height: 370px; }
.public-site .cover { border-radius: 12px; box-shadow: 0 16px 45px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1); }
.public-site .hero .disc { width: 77%; margin-top: -38.5%; left: 16%; }
.public-site .hero.live .disc { left: 38%; }
.public-site .hero.recent .disc { left: 31%; }
.public-site .hero.empty .disc { left: 32%; opacity: .8; }
.public-site .vinyl { background: repeating-radial-gradient(circle, #151519 0 2px, #242429 3px 4px, #0c0c0e 4px 7px); }
.public-site .quiet-cover { background: radial-gradient(ellipse at 15% 12%, #793640, transparent 58%), linear-gradient(160deg, #41303b, #1f1b25 47%, #17161c); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; width: auto; }
.public-site .quiet-cover:before { content: ''; position:absolute; border:1px solid rgba(255,255,255,.13); inset:14px; pointer-events:none; }
.public-site .quiet-cover-title { color: #f7f3eb; font-size: clamp(2.3rem, 6.2vw, 5.4rem); font-weight: 750; line-height: 1.02; letter-spacing: -.09em; text-align: center; display:flex; flex-direction:column; }
.public-site .quiet-cover-title span { font-family: Georgia,serif; color: #f3a198; font-style: italic; font-weight: 400; font-size: .58em; }
.public-site .quiet-cover-sub { font-size: .54rem; font-weight:700; color:#d6c8c9; letter-spacing:.23em; }
.public-site .hero .info { position: relative; z-index:1; gap: 15px; align-content: center; }
.public-site .hero .status { font-size: .67rem; letter-spacing: .18em; color: var(--red); font-weight: 800; text-transform: uppercase; }
.public-site .status .dot { background: var(--red); width: 6px; height: 6px; }
.public-site .hero h1 { font-family: var(--head); font-size: clamp(2.55rem, 5.4vw, 5.5rem); line-height:1.02; font-weight: 760; letter-spacing:-.072em; max-width: 12ch; overflow-wrap: anywhere; }
.public-site .hero .creator { font-size: 1.25rem; font-weight: 500; }
.public-site .hero .detail { font-size: .94rem; }
.public-site .hero .muted { font-size: 1.04rem; line-height: 1.7; max-width: 450px; }
.public-site .hero .modenote { color: var(--faint); font-size: .8rem; }
.public-site .hero .review { color: var(--muted); }
.public-site .hero .chip { font-size: .77rem; }
.public-site .hero .rating-big b { font-size: 2.9rem; font-weight: 700; }
.public-site .hero .rating-big .bars i { width: 7px; height: 18px; }
.public-site .archive-intro { display: flex; justify-content: space-between; gap: 48px; align-items: end; padding: 65px 0 25px; }
.public-site .archive-intro .eyebrow { margin-bottom: 12px; }
.public-site .archive-intro h2 { font-family: var(--head); font-size: clamp(1.9rem, 3.3vw, 3rem); font-weight: 740; letter-spacing: -.055em; line-height: 1.14; }
.public-site .archive-intro h2 em { color:var(--gold); }
.public-site .archive-intro > p { max-width: 385px; font-size: .93rem; line-height: 1.7; color: var(--muted); }
.public-site .cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 19px; }
.public-site .stack { gap: 19px; }
.public-site .panel { padding: clamp(22px, 2.9vw, 32px); border-radius: 15px; background:var(--panel); box-shadow: none; backdrop-filter: blur(9px); }
.public-site .panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 23px; }
.public-site .mini-eyebrow { color: var(--red); font-size: .66rem; font-weight: 750; letter-spacing: .16em; }
.public-site .panel > h2, .public-site .panel-heading h2 { margin: 8px 0 0; font-family: var(--head); font-size: clamp(1.8rem, 2.4vw, 2.45rem); line-height: 1.1; font-weight: 760; letter-spacing: -.052em; }
.public-site .panel-index { color: var(--faint); font-size: .8rem; }
.public-site .filters { gap: 7px; margin-bottom: 22px; }
.public-site .pill { font-size: .77rem; font-weight: 600; border: 1px solid var(--line); padding: 8px 13px; transition: .2s; }
.public-site .pill[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.public-site .pill:hover { border-color: var(--red); }
.public-site .item { border-bottom: 1px solid var(--line); border-radius: 0; padding: 15px 1px; gap: 15px; }
.public-site .item:hover { border-color: var(--line); background: transparent; }
.public-site .item .t { font-weight: 730; }
.public-site .item .r { min-width: 91px; }
.public-site .item .thumb { width: 62px; height: 62px; }
.public-site .pick { grid-template-columns: 76px minmax(0,1fr); background:transparent; border:0; padding: 11px 0; border-bottom:1px solid var(--line); border-radius:0; }
.public-site .pick .thumb { width: 74px; height: 74px; }
.public-site .pick .t { font-weight:730; }
.public-site .chip { font-weight: 700; font-size: .67rem; box-shadow: none; padding: 5px 10px; }
.public-site .rating b { font-family: var(--body); font-size: 1.12rem; font-weight: 800; color:var(--gold); }
.public-site .rating small { font-size:.7rem; }
.public-site .bars { gap: 2px; }
.public-site .bars i { width: 3px; height: 11px; }
.public-site .recommend-mark { display: flex; align-items: center; justify-content: center; margin: 2px 0 20px; width: 59px; height: 59px; font-size: 2.6rem; font-weight: 300; color:var(--red); border:1px solid rgba(255,102,94,.35); border-radius: 50%; background: rgba(255,102,94,.06); }
.public-site .suggestion-panel p { max-width: 340px; line-height: 1.75; margin-top:10px; }
.public-site .suggestion-panel { background: linear-gradient(130deg, rgba(106, 55, 63, .22), transparent 75%),var(--panel); }
.public-site .empty, .public-site .loading-note { padding: 24px 2px; color: var(--muted); line-height: 1.7; }
.public-site .connection-note { display:grid; align-items:start; justify-items:start; gap: 10px; padding: 18px 0 24px; }
.public-site .connection-note strong { font-size:.95rem; letter-spacing:-.01em; }
.public-site .connection-note p { color:var(--muted); line-height:1.6; font-size:.85rem; }
.public-site .connection-symbol { color:var(--red); display:grid;place-items:center; width:38px;height:38px;border:1px solid var(--line);border-radius:50%;font-size:1.2rem; }
.public-site .foot { border-top: 1px solid var(--line); margin-top: 65px; padding: 30px 0 45px; display: flex; flex-direction: column; gap: 24px; }
.public-site .footer-wordmark { font-size: 2.5rem; font-weight: 790; letter-spacing: -.08em; line-height:1; }
.public-site .footer-wordmark > span:first-child { color:var(--red);font-family:Georgia,serif;font-style:italic;font-weight:400; }
.public-site .footer-row { display: flex; justify-content: space-between; flex-wrap:wrap; gap: 15px; font-size:.66rem; letter-spacing:.09em; color:var(--faint); }
.public-site .tabs { background: var(--bg); }
.public-site .tabs .btn { padding: 12px 5px; }
.public-site .tabs .btn[aria-selected="true"] { background: var(--red); color: #0d090a; }
@media(max-width:1080px) { .public-site .intro-mark{display:none}.public-site .hero { gap:25px; padding:28px; grid-template-columns: minmax(225px,40%) minmax(0,1fr); }.public-site .quiet-cover-title { font-size:clamp(2rem,6vw,4rem); } }
@media(max-width:899px) { .public-site .intro{min-height:0;padding:48px 0 36px}.public-site .hero { grid-template-columns:1fr; padding:30px; }.public-site .hero .art { width:min(100%,400px); margin:0 auto; }.public-site .hero .info { text-align:left; }.public-site .hero h1 { max-width:17ch; }.public-site .archive-intro { padding:50px 0 25px; display:block; }.public-site .archive-intro > p{margin-top:14px}.public-site .cols { grid-template-columns:1fr; }.public-site .tabs { display:flex; }.public-site [data-pane]:not(.on) { display:none; }.public-site .top-links { display:none; }.public-site .public-bar{justify-content:space-between}.public-site .intro-title { font-size:clamp(2.65rem,8vw,4.8rem); } }
@media(max-width:540px) { .public-site .public-bar { padding:19px 0; }.public-site .brand-name { font-size:1.45rem; }.public-site .intro { padding:40px 0 35px; }.public-site .intro-title { font-size:clamp(2.65rem,11vw,4rem); margin:18px 0; }.public-site .intro-copy { font-size:.89rem; }.public-site .section-context { display:none; }.public-site .hero { padding:20px; min-height:0; }.public-site .hero .art { width:min(100%,330px); }.public-site .quiet-cover-title { font-size:clamp(2.3rem,13vw,4.1rem); }.public-site .hero h1 { font-size:clamp(2.55rem,10vw,3.7rem); }.public-site .hero .muted{font-size:.94rem}.public-site .archive-intro h2 { font-size:2.25rem; }.public-site .panel{padding:19px}.public-site .panel-heading h2{font-size:1.9rem}.public-site .item { grid-template-columns:52px minmax(0,1fr); }.public-site .item .thumb {width:52px;height:52px}.public-site .item .r { grid-column:2;display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; }.public-site .item .when { margin-left:auto; }.public-site .foot{margin-top:35px}.public-site .footer-row{flex-direction:column}.public-site .theme-btn{padding:9px 11px;font-size:.71rem} }
@media(prefers-reduced-motion:reduce) { .public-site .vinyl,.public-site .meter i,.public-site .status .dot { animation:none !important; } }


/* ===== Base module: info.css ===== */
/* Genre chips, the "details" drawer, and the request form. Shared by the public page and the admin app. */

/* ---------- genre chips: each genre gets its own steady color ---------- */
.genres { display: flex; flex-wrap: wrap; gap: 6px; }
.gchip { --gh: 260; font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1; padding: 5px 10px; border-radius: 999px; white-space: nowrap; color: hsl(var(--gh) 85% 87%); background: hsl(var(--gh) 55% 26% / .55); border: 1px solid hsl(var(--gh) 65% 58% / .55); }
:root[data-theme="light"] .gchip { color: hsl(var(--gh) 70% 24%); background: hsl(var(--gh) 70% 88% / .85); border-color: hsl(var(--gh) 55% 50% / .5); }
.genres.sm .gchip { font-size: .66rem; padding: 4px 8px; }
button.gchip { cursor: pointer; font-family: inherit; }
.genre-filters { display: flex; gap: 7px; flex-wrap: wrap; margin: -8px 0 20px; align-items: center; }
.genre-filters .lbl { font-size: .66rem; letter-spacing: .16em; font-weight: 750; color: var(--faint); margin-right: 4px; }
.genre-filters .gchip[aria-pressed="true"], .genre-pick .gchip[aria-pressed="true"] { background: hsl(var(--gh) 70% 52%); color: #0b0a0d; border-color: transparent; }
.genre-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.genre-pick .gchip[aria-pressed="false"] { opacity: .72; }

/* ---------- row + hero extras ---------- */
.entry { border-bottom: 1px solid var(--line); }
.entry > .item { border-bottom: 0 !important; cursor: pointer; }
.entry .drawer { margin: 0 0 16px; }
.item .sub-genres { margin-top: 6px; }
.item .r .open-link { font-size: .76rem; font-weight: 700; color: var(--gold); text-decoration: none; white-space: nowrap; }
.item .r .open-link:hover { text-decoration: underline; }
.more-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: .76rem; font-weight: 650; cursor: pointer; }
.more-btn:hover { color: var(--ink); border-color: var(--ink); }
.more-btn .caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s; }
.more-btn[aria-expanded="true"] .caret { transform: rotate(-135deg) translate(-1px, -1px); }
.hero .hero-drawer { grid-column: 1 / -1; position: relative; z-index: 1; }
.hero .genres { margin-top: 2px; }

/* ---------- the drawer ---------- */
.drawer { margin-top: 14px; padding: clamp(14px, 2.4vw, 22px); border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); display: grid; gap: 22px; text-align: left; cursor: default; }
.drawer h4 { font-size: .64rem; letter-spacing: .17em; text-transform: uppercase; color: var(--red); margin: 0 0 10px; font-weight: 750; font-family: inherit; }
.drawer .d-head { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: start; }
.drawer .d-photo { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.drawer .d-photo.ph { display: grid; place-items: center; font-size: 2.2rem; color: #fff; background: linear-gradient(135deg, var(--purple), var(--red-deep)); }
.drawer .d-name { font-size: 1.3rem; font-weight: 760; letter-spacing: -.03em; line-height: 1.15; }
.drawer .d-sub { color: var(--muted); font-size: .85rem; margin-top: 3px; }
.drawer .d-bio { color: var(--muted); line-height: 1.65; font-size: .93rem; margin-top: 10px; white-space: pre-line; }
.drawer .d-bio.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.drawer .d-toggle { background: none; border: 0; color: var(--gold); font: inherit; font-size: .82rem; font-weight: 700; padding: 6px 0 0; cursor: pointer; }
.drawer .d-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.drawer .fact { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.drawer .fact b { display: block; font-size: .64rem; letter-spacing: .14em; color: var(--faint); font-weight: 750; text-transform: uppercase; margin-bottom: 3px; }
.drawer .fact span { font-size: .95rem; font-weight: 650; }
.strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.strip > * { flex: 0 0 112px; scroll-snap-align: start; text-decoration: none; color: inherit; display: grid; gap: 7px; align-content: start; }
.strip img, .strip .ph { width: 112px; height: 112px; border-radius: 10px; object-fit: cover; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.strip .round img, .strip .round .ph { border-radius: 50%; }
.strip .ph { display: grid; place-items: center; font-size: 1.8rem; color: #fff; background: linear-gradient(135deg, var(--purple), var(--red-deep)); }
.strip .tn { font-size: .82rem; font-weight: 650; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.strip .round .tn { text-align: center; }
.strip .ts { font-size: .74rem; color: var(--faint); }
.toplist { display: grid; }
.toplist a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; font-size: .93rem; }
.toplist a:last-child { border-bottom: 0; }
.toplist a:hover b { text-decoration: underline; }
.toplist i { font-style: normal; color: var(--faint); font-size: .8rem; }
.toplist small { color: var(--faint); margin-left: 6px; }
.linkrow { display: flex; flex-wrap: wrap; gap: 8px; }
.linkrow a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .82rem; font-weight: 650; }
.linkrow a:hover { border-color: var(--gold); color: var(--gold); }
.linkrow a.primary { background: var(--red); border-color: var(--red); color: #0e0a0c; }
.d-hint { color: var(--faint); font-size: .76rem; line-height: 1.5; margin-top: 8px; }
.d-mine { display: grid; gap: 8px; }
.d-mine .big { font-size: 1.05rem; font-weight: 700; }
.d-mine ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; color: var(--muted); font-size: .9rem; }
.d-credit { color: var(--faint); font-size: .72rem; line-height: 1.55; border-top: 1px solid var(--line); padding-top: 12px; }
.d-credit a { color: inherit; }
.d-loading { display: grid; gap: 10px; }
.d-loading i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--line), transparent, var(--line)); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.d-loading i:nth-child(2) { width: 82%; }
.d-loading i:nth-child(3) { width: 58%; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 540px) { .drawer .d-head { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; } .drawer .d-photo { width: 76px; height: 76px; } }
@media (prefers-reduced-motion: reduce) { .d-loading i { animation: none; } }

/* ---------- request a link ---------- */
.req-form { display: grid; gap: 12px; margin-top: 16px; }
.req-form label { display: grid; gap: 5px; font-size: .82rem; color: var(--muted); }
.req-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.req-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 540px) { .req-form .row2 { grid-template-columns: 1fr; } }
.req-ok { padding: 14px 16px; border: 1px solid var(--gold); border-radius: 12px; line-height: 1.6; }
.nav-cta { color: var(--ink) !important; border: 1px solid var(--red); border-radius: 999px; padding: 8px 16px; }
.nav-cta:hover { background: var(--red); color: #0e0a0c !important; }
.intro-cta { margin-top: 22px; }
.panel-note { color: var(--faint); font-size: .8rem; margin-top: 10px; line-height: 1.6; }

/* ---------- admin extras ---------- */
.diag { display: grid; gap: 8px; margin-top: 12px; }
.diag .drow { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: .92rem; }
.diag .good { color: #2fd07a; font-weight: 700; }
.diag .bad { color: #ff7a7a; font-weight: 700; }
.search-note { color: var(--muted); font-size: .85rem; line-height: 1.55; padding: 10px 12px; border: 1px dashed var(--gold); border-radius: 10px; }
.aitem .d-wrap { grid-column: 1 / -1; }

/* ---------- rating words, extra scores, play counts ---------- */
.rating .phrase { margin-left: 10px; font-weight: 700; font-size: .85em; color: var(--gold); white-space: nowrap; }
.rating-big .phrase { font-size: 1rem; }
.extras { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.extras .xs { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; }
.extras .xs small { color: var(--faint); font-size: .7rem; }
.extras .xs b { font-weight: 750; }
.plays { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.plays .pl { display: inline-flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.plays .pl b { font-size: 1.1rem; font-weight: 750; line-height: 1.1; }
.plays .pl small { color: var(--faint); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; }
.extras-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 8px; }
.phrase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.phrase-grid .f { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; }


/* ===== Base module: refinement.css ===== */
/* Hear & Now / Listening room 2.0 — presentation layer only.
   Local CSS, no external fonts, scripts, or services. */
:root { --hn-ease: cubic-bezier(.18,.75,.24,1); }

/* --------------------------- ADMIN STUDIO ---------------------------- */
body.admin {
  --bg: #0b0b10; --ink: #f5f1ed; --muted: #b1acb0; --faint: #88818b;
  --panel: #18161d; --panel-2: #242129; --line: rgba(241,229,226,.12);
  --red: #ff6860; --red-deep: #df504e; --gold: #e7bb81; --purple: #9872bc;
  --body: -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --head: -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 17px 44px rgba(0,0,0,.23);
  font-family: var(--body); font-size: 15px; letter-spacing: -.008em;
  background: radial-gradient(ellipse 650px 560px at 85% -11%, rgba(156,69,71,.15), transparent 72%),
    radial-gradient(ellipse 800px 520px at -32% 52%, rgba(100,76,141,.095), transparent 72%), var(--bg);
  background-attachment: fixed;
}
:root[data-theme='light'] body.admin {
  --bg: #f5f2ed; --ink: #201d26; --muted: #68636c; --faint: #89818d;
  --panel: #fffefa; --panel-2: #f0ece8; --line: rgba(36,28,36,.15);
  --red: #c64e4b; --red-deep: #ae3d3c; --gold: #9c6e37; --purple: #7955a6;
  --shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 35px rgba(30,25,25,.06);
  background: radial-gradient(ellipse 650px 560px at 85% -11%, rgba(232,165,150,.20), transparent 72%),var(--bg);
}
.admin #stars { display: none; }
.admin .wrap { max-width: 1330px; padding: 0 clamp(16px,4.5vw,68px) 108px; }
.admin .bar { gap: 20px; padding: 30px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.admin .logo { font-family: var(--body); font-size: 1.5rem; font-weight: 810; letter-spacing: -.065em; gap: 13px; }
.admin .logo i { width: 32px; height: 32px; box-shadow: 0 0 0 1px var(--red), 0 6px 22px rgba(255,104,96,.15); }
.admin h1,.admin h2,.admin h3 { font-family:var(--body); font-weight: 780; letter-spacing: -.052em; line-height:1.13; }
.admin .panel > h2,.admin .panel h2 { font-size: clamp(1.45rem,2.2vw,2rem); margin-bottom: 16px; }
.admin .panel { padding:clamp(20px,2.5vw,30px); border-radius: 20px; background:linear-gradient(144deg,rgba(255,255,255,.035),transparent 44%),var(--panel);
  border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:none; min-width:0; }
.admin .panel:hover { border-color:color-mix(in srgb,var(--line) 74%,var(--gold) 26%); }
.admin .btn { font-family:var(--body); font-size:.86rem; font-weight:740; letter-spacing:-.005em; border-radius:12px; padding:11px 17px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.013)),var(--panel-2); box-shadow:0 4px 16px rgba(0,0,0,.08);
  transition:transform .18s var(--hn-ease),background-color .18s,border-color .18s,box-shadow .18s; }
.admin .btn:hover { border-color:rgba(255,136,115,.7); background-color:rgba(255,136,115,.08); transform:translateY(-2px); box-shadow:0 9px 25px rgba(0,0,0,.17); }
.admin .btn.primary { background:linear-gradient(135deg,#fc786c,#ec5358); color:#170f12; font-weight:790; box-shadow:0 10px 25px rgba(233,78,82,.15); }
.admin .btn.primary:hover { background:linear-gradient(135deg,#ff9990,#fa6e77); box-shadow:0 14px 30px rgba(240,82,84,.23); }
.admin .btn.ghost { box-shadow:none; background:transparent; }
.admin .btn.sm { padding:8px 13px; font-size:.79rem; }
.admin .nav { background:rgba(24,22,29,.9); border:1px solid var(--line); border-radius:17px; overflow:hidden;
  margin:0 0 25px; box-shadow:0 12px 28px rgba(0,0,0,.18); }
.admin .nav button { font-family:var(--body); font-size:.86rem; font-weight:690; letter-spacing:.005em; padding:17px 8px; min-width:0; }
.admin .nav button[aria-selected='true'] { background:rgba(255,104,96,.08); color:var(--ink); }
.admin .nav button[aria-selected='true']::after { top:auto; bottom:0; left:24%; right:24%; height:3px; border-radius:3px 3px 0 0; background:var(--red); }
.admin .nav button:hover:not([aria-selected='true']) { background:var(--panel-2); color:var(--ink); }
.admin .pane { gap:20px; }
.admin .pane.on { display:grid; }
.admin .pane[data-pane='log'].on { grid-template-columns: minmax(0,.91fr) minmax(0,1.09fr); align-items:start; }
.admin .pane[data-pane='log'] > .share-panel { grid-column:1/-1; }
.admin .pane[data-pane='log'] > .panel.current-panel { grid-column:1; }
.admin .pane[data-pane='log'] > .panel.ql-card { grid-column:2; grid-row:2 / span 2; }
.admin .pane[data-pane='log'] > .ql-card:only-child { grid-column:1/-1; }
.admin .share-panel { padding:15px 21px; border-radius:15px; background:linear-gradient(95deg,rgba(245,131,103,.06),transparent 48%),var(--panel); }
.admin .share-panel b { color:var(--ink); font-size:1rem; }
.admin .current-panel { position:relative; overflow:hidden; }
.admin .current-panel::after { content:''; pointer-events:none; position:absolute; height:230px;width:230px;top:-118px;right:-90px;border-radius:50%;background:radial-gradient(circle,rgba(255,104,96,.11),transparent 70%); }
.admin .now { grid-template-columns:96px minmax(0,1fr); align-items:center; gap:18px; }
.admin .now .thumb { width:96px;height:96px; border-radius:13px;box-shadow:0 11px 23px rgba(0,0,0,.35); }
.admin .now .t {font-size:1.19rem;letter-spacing:-.02em;}
.admin .now .muted { font-size:.84rem; line-height:1.45; }
.admin .meta { min-width:0; }
.admin .nums { display:grid; grid-template-columns:repeat(10,minmax(0,1fr));gap:5px; }
.admin .nums button { font-family:var(--body);font-size:.92rem;font-weight:800; min-height:40px; border-radius:9px;
  background:var(--panel-2); transition:background .16s,border-color .16s,transform .16s; }
.admin .nums button:hover { border-color:var(--gold); transform:translateY(-2px); }
.admin .nums button.on { background:linear-gradient(145deg,#f8d491,#dba453);color:#211510;box-shadow:0 6px 17px rgba(226,178,90,.18); }
.admin .f { display:grid;gap:7px;min-width:0; font-size:.81rem; font-weight:650; color:var(--muted); }
.admin .f > span {color:var(--muted); }
.admin input:not([type='radio']):not([type='checkbox']),.admin select,.admin textarea { min-width:0;width:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent),var(--panel-2);border:1px solid var(--line);border-radius:11px;
  color:var(--ink);padding:12px 13px;box-shadow:0 2px 2px rgba(0,0,0,.025) inset; font-family:var(--body);font-size:.91rem;letter-spacing:0;
  transition:border-color .2s,box-shadow .2s,background-color .2s; }
.admin input:focus,.admin select:focus,.admin textarea:focus {border-color:var(--red);box-shadow:0 0 0 3px rgba(255,104,96,.12);outline:none;}
.admin input::placeholder,.admin textarea::placeholder {color:var(--faint);opacity:1;}
.admin textarea {min-height:90px;resize:vertical;}
.admin .pill { color:var(--muted);background:rgba(255,255,255,.025);padding:8px 13px;font-size:.8rem;font-weight:690;
  transition:background .2s,color .2s,border-color .2s; }
.admin .pill:hover {border-color:var(--red);color:var(--ink);}
.admin .pill.on,.admin .pill[aria-pressed='true'] {background:var(--ink);border-color:var(--ink);color:var(--bg);}
.admin .form {gap:18px;}
.admin .ql-card { background:linear-gradient(155deg,rgba(205,112,101,.075),transparent 27%),var(--panel); }
.admin .ql-card-header { border-bottom:1px solid var(--line);margin:-3px 0 21px;padding:0 0 17px; }
.admin .ql-card-header h2 { font-size:clamp(1.9rem,3vw,2.35rem);margin:7px 0 7px; }
.admin .ql-step { font-size:.65rem; color:var(--red);font-weight:790;letter-spacing:.18em;line-height:1.3; }
.admin .ql-tip { font-size:.82rem;color:var(--muted); line-height:1.55; margin-top:5px; }
.admin .ql-form-lead {margin-bottom:-5px;}
.admin .ql-form .chips {gap:7px;}
.admin .ql-form .pill {min-width:61px;}
.admin .ql-search-line {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch;}
.admin .ql-search-line input {min-height:48px;}
.admin .ql-search-btn {min-width:110px;}
.admin .ql-selected { display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:15px;
  padding:12px;border:1px solid rgba(231,187,129,.33);border-radius:14px;background:linear-gradient(100deg,rgba(231,187,129,.08),rgba(231,187,129,.015)); }
.admin .ql-selected[hidden] {display:none;}
.admin .ql-selected .thumb {height:78px;width:78px;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.24);}
.admin .ql-selected-copy {display:grid;gap:3px;min-width:0;}
.admin .ql-eyebrow {font-size:.59rem;letter-spacing:.16em;font-weight:800;color:var(--gold);}
.admin .ql-selected-copy strong {font-size:1.08rem;letter-spacing:-.03em;overflow-wrap:anywhere;}
.admin .ql-byline,.admin .ql-genre {font-size:.78rem;color:var(--muted);line-height:1.4;}
.admin .ql-genre {color:var(--gold);}
.admin .ql-manual {justify-self:start;font-size:.78rem;color:var(--muted);margin-top:-9px;}
.admin .ql-main-fields {display:grid;gap:18px; padding:15px 0 3px;border-top:1px solid var(--line);}
.admin .ql-ratings {gap:10px;}
.admin .ql-ratings .rating-say {min-height:16px;color:var(--gold);}
.admin .ql-advanced {border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.02);overflow:hidden;}
.admin .ql-advanced > summary { font-weight:690;font-size:.85rem;padding:15px 17px;cursor:pointer;list-style:none;position:relative; }
.admin .ql-advanced > summary::-webkit-details-marker {display:none;}
.admin .ql-advanced > summary:after {content:'+';position:absolute;right:17px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.25rem;font-weight:400;}
.admin .ql-advanced[open] > summary:after {content:'−';}
.admin .ql-advanced[open] > summary {border-bottom:1px solid var(--line);}
.admin .ql-advanced-inner {display:grid;gap:16px;padding:17px;}
.admin .ql-advanced .genre-pick {max-height:148px;overflow-y:auto;gap:7px;}
.admin .ql-advanced .gchip {padding:6px 9px;}
.admin .ql-submit {min-height:49px;width:100%;}
.admin .results {display:grid;gap:7px;max-height:295px;overflow:auto;padding:2px;}
.admin .result {grid-template-columns:56px 1fr;padding:9px;gap:12px;border-radius:12px;background:var(--panel-2);}
.admin .result .thumb {height:56px;width:56px;border-radius:8px;}
.admin .result:hover { border-color:var(--red);background:rgba(255,104,96,.075); }
.admin .result b { font-size:.91rem;letter-spacing:-.025em; }
.admin .result .muted { line-height:1.4;display:block;font-size:.76rem; }
.admin .genre-pick {display:flex;gap:7px;}
.admin .mode {padding:17px;border-radius:14px;background:rgba(255,255,255,.014);transition:border-color .18s,background .18s,transform .18s;}
.admin .mode:hover {border-color:var(--gold);transform:translateY(-1px);}
.admin .mode:has(input:checked) {border-color:var(--red);background:rgba(255,104,96,.06);}
.admin .mode b {font-family:var(--body);font-size:1.01rem;letter-spacing:-.02em;font-weight:780;}
.admin .mode .small {font-size:.79rem;line-height:1.55;}
.admin .pane[data-pane='settings'].on {grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
.admin .pane[data-pane='settings'] > .panel:nth-child(3) {grid-column:1/-1;}
.admin .pane[data-pane='settings'] .phrase-grid {grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}
.admin .phrase-grid .f {grid-template-columns:22px minmax(0,1fr);align-items:center;}
.admin .aitem {padding:18px;border-radius:16px;gap:16px;background:var(--panel);box-shadow:var(--shadow);border-color:var(--line);}
.admin .aitem:hover {border-color:rgba(231,187,129,.3);}
.admin .aitem .t {font-size:1.06rem;letter-spacing:-.025em;}
.admin .aitem .s {font-size:.85rem;line-height:1.5;}
.admin .aitem .thumb {width:64px;height:64px;border-radius:11px;}
.admin .aitem .rating {align-items:center;}
.admin .aitem .meta {gap:6px;margin-top:9px;}
.admin .aitem select {max-width:265px;}
.admin .aitem .actions {margin-top:12px;}
.admin .history-tools {padding:21px;}
.admin .linkbox {background:var(--panel-2);border-color:var(--line);border-radius:12px;}
.admin .drawer {background:var(--panel-2);max-width:100%;min-width:0;overflow:hidden;}
.admin .modal {background:rgba(4,4,8,.80);backdrop-filter:blur(9px);align-items:start;}
.admin .modal .panel {width:min(680px,100%);margin:clamp(10px,5vh,60px) 0;background:var(--panel);box-shadow:0 25px 85px rgba(0,0,0,.55);max-height:calc(100dvh - 56px);}
.admin #toast {font-size:.82rem;max-width:calc(100vw - 32px);text-align:center;}

/* ------------------------ PUBLIC LISTENING ROOM ------------------------ */
.public-site .intro {padding-top:clamp(30px,3.5vw,55px);padding-bottom:clamp(28px,3vw,42px);min-height:0;}
.public-site .intro-title {font-size:clamp(2.5rem,4.7vw,4.95rem);}
.public-site .hero {box-shadow:0 2px 1px rgba(255,255,255,.03) inset,0 25px 85px rgba(0,0,0,.22);}
.public-site .hero .cover {transition:transform .35s var(--hn-ease),box-shadow .35s;}
.public-site .hero:hover .cover {transform:translateY(-3px);box-shadow:0 26px 65px rgba(0,0,0,.6);}
.public-site .hero .rating-big {display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap;}
.public-site .hero .rating-big .phrase {font-size:.93rem;font-weight:750;letter-spacing:-.025em;}
.public-site .hero .plays {gap:5px;}
.public-site .hero .plays .pl {min-width:59px;padding:7px 9px;background:rgba(255,255,255,.03);border-radius:10px;}
.public-site .hero .plays .pl small {font-size:.57rem;letter-spacing:.06em;}
.public-site .hero .plays .pl b {font-size:1rem;}
.public-site .panel {min-width:0;}
.public-site .cols,.public-site .cols > *,.public-site .list,.public-site .entry,.public-site .drawer {min-width:0;}
.public-site .drawer {max-width:100%;overflow:hidden;background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),var(--panel);box-shadow:0 20px 45px rgba(0,0,0,.16);}
.public-site .strip {min-width:0;width:100%;max-width:100%;overscroll-behavior-x:contain;}
.public-site .strip > * {min-width:0;}
.public-site .panel {transition:border-color .2s,box-shadow .2s;}
.public-site .panel:hover {border-color:rgba(255,255,255,.22);box-shadow:0 14px 40px rgba(0,0,0,.08);}
.public-site .entry .item {transition:background .2s,border-color .2s;}
.public-site .entry .item:hover {background:rgba(255,255,255,.045);border-radius:10px;}
.public-site .entry .item .r {min-width:0;}
.public-site .entry .rating .phrase {display:inline-block;color:var(--gold);font-size:.76rem;font-weight:750;margin-left:4px;}
.public-site .genre-filters {display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;max-width:100%;padding:2px 0 10px;white-space:nowrap;gap:8px;}
.public-site .genre-filters .gchip {flex:none;}
.public-site .filters {overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:6px;}
.public-site .filters .pill {flex:none;}
.public-site .nav-cta,.public-site .intro-cta {transition:transform .2s,background .2s,border-color .2s;}
.public-site .nav-cta:hover,.public-site .intro-cta:hover {transform:translateY(-2px);}
.public-site .panel .btn:not(.pill):hover {box-shadow:0 8px 22px rgba(0,0,0,.12);}

@media (min-width:900px) {
  .admin .nav {position:sticky;top:12px;bottom:auto;max-width:550px;margin:0 auto 27px;border-radius:16px;z-index:30;}
  .admin .nav button[aria-selected='true']::after {bottom:0;top:auto;}
}
@media (max-width:980px) {
  .admin .pane[data-pane='log'].on {grid-template-columns:minmax(0,1fr);}
  .admin .pane[data-pane='log'] > .panel.current-panel,
  .admin .pane[data-pane='log'] > .panel.ql-card {grid-column:1;grid-row:auto;}
  .admin .pane[data-pane='settings'].on {grid-template-columns:1fr;}
  .admin .pane[data-pane='settings'] > .panel:nth-child(3) {grid-column:1;}
}
@media (max-width:899px) {
  .admin .wrap {padding-bottom:115px;}
  .admin .nav {position:fixed;left:10px;right:10px;bottom:calc(7px + env(safe-area-inset-bottom));top:auto;margin:0;z-index:35;
    padding:3px;border-radius:17px;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(22px);background:rgba(23,21,30,.94);
    box-shadow:0 10px 38px rgba(0,0,0,.40);}
  .admin .nav button {padding:13px 3px 15px;font-size:.72rem;font-weight:730;}
  .admin .nav button[aria-selected='true']::after {bottom:2px;top:auto;height:2px;}
  .admin .pane[data-pane='log'] > .panel.ql-card {order:2;}
  .admin .pane[data-pane='log'] > .panel.current-panel {order:3;}
  .admin .pane[data-pane='log'] > .share-panel {order:1;}
  .admin .pane[data-pane='log'] > .note {order:4;}
}
@media(max-width:600px) {
  .admin .bar {padding:18px 0 16px;margin-bottom:14px;}
  .admin .logo {font-size:1.13rem;letter-spacing:-.04em;gap:9px;}
  .admin .logo i {width:24px;height:24px;}
  .admin .btn.sm {font-size:.74rem;padding:7px 10px;}
  .admin .panel {padding:18px;border-radius:16px;}
  .admin .share-panel {padding:13px 14px;}
  .admin .share-panel b {font-size:.91rem;}
  .admin .now {grid-template-columns:66px minmax(0,1fr);gap:11px;}
  .admin .now .thumb {width:66px;height:66px;}
  .admin .now .t {font-size:1.06rem;}
  .admin .nums {gap:5px;grid-template-columns:repeat(5,minmax(0,1fr));}
  .admin .nums button {min-height:42px;}
  .admin .ql-search-line {grid-template-columns:minmax(0,1fr) auto;gap:7px;}
  .admin .ql-search-btn {min-width:0;padding:10px;font-size:.77rem;}
  .admin .ql-selected {grid-template-columns:62px 1fr;gap:10px;}
  .admin .ql-selected .thumb {width:62px;height:62px;}
  .admin .ql-card-header h2 {font-size:1.8rem;}
  .admin .ql-form .pill {min-width:0;}
  .admin .ql-advanced-inner {padding:13px;}
  .admin .aitem {padding:14px;gap:11px;}
  .admin .aitem .thumb {width:50px;height:50px;}
  .admin .mode {padding:13px;}
  .admin .phrase-grid {grid-template-columns:1fr;}
  .admin .modal {padding:6px;}
  .admin .modal .panel {width:100%;margin:6px 0;max-height:calc(100dvh - 12px);}
  .public-site .intro {padding:24px 0 26px;}
  .public-site .intro-title {font-size:clamp(2.1rem,9vw,3.2rem);letter-spacing:-.064em;margin:15px 0 12px;}
  .public-site .intro-copy {font-size:.84rem;line-height:1.5;}
  .public-site .intro-cta {margin-top:15px;}
  .public-site .hero {display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;min-height:0;padding:17px;border-radius:16px;align-items:start;}
  .public-site .hero .art {width:104px;max-height:none;aspect-ratio:1;margin:2px 0 0;}
  .public-site .hero .cover {inset:0;width:104px;height:104px;aspect-ratio:1;border-radius:10px;}
  .public-site .hero .disc {display:none;}
  .public-site .quiet-cover-title {font-size:1.7rem;}
  .public-site .quiet-cover-sub {font-size:.32rem;}
  .public-site .hero .info {gap:7px;align-content:start;}
  .public-site .hero .status {font-size:.57rem;letter-spacing:.12em;gap:6px;}
  .public-site .hero .meter {height:12px;gap:2px;}
  .public-site .hero .meter i {width:3px;}
  .public-site .hero h1 {font-size:clamp(1.35rem,5.8vw,2rem);line-height:1.04;letter-spacing:-.055em;max-width:none;}
  .public-site .hero .creator {font-size:.88rem;}
  .public-site .hero .detail {font-size:.76rem;}
  .public-site .hero .genres {gap:4px;}
  .public-site .hero .gchip {font-size:.62rem;padding:3px 6px;}
  .public-site .hero .row {gap:6px;}
  .public-site .hero .rating-big b {font-size:1.65rem;}
  .public-site .hero .rating-big small {font-size:.7rem;margin-right:2px;}
  .public-site .hero .rating-big .bars i {width:4px;height:11px;}
  .public-site .hero .rating-big .phrase {font-size:.74rem;margin:0 3px;}
  .public-site .hero .plays .pl {min-width:47px;padding:5px 6px;}
  .public-site .hero .plays .pl b {font-size:.83rem;}
  .public-site .hero .plays .pl small {font-size:.49rem;}
  .public-site .hero .review {font-size:.8rem;}
  .public-site .hero .btn {padding:7px 10px;font-size:.72rem;}
  .public-site .hero .modenote {font-size:.68rem;}
  .public-site .hero .hero-drawer {grid-column:1/-1;}
  .public-site .hero.empty .info {min-height:104px;}
  .public-site .hero.empty h1 {font-size:1.45rem;}
  .public-site .hero.empty .muted {font-size:.77rem;line-height:1.5;}
  .public-site .archive-intro {padding:35px 0 17px;}
  .public-site .archive-intro h2 {font-size:clamp(1.75rem,8vw,2.2rem);}
  .public-site .archive-intro > p {font-size:.84rem;line-height:1.55;}
  .public-site .cols {gap:13px;}
  .public-site .panel {padding:16px;}
  .public-site .panel-heading {margin-bottom:15px;}
  .public-site .item {gap:9px;}
  .public-site .item .r {gap:6px;margin-top:2px;}
  .public-site .item .r .rating {flex-wrap:wrap;}
  .public-site .item .r .rating .phrase {font-size:.7rem;white-space:normal;}
  .public-site .entry .drawer {margin-top:8px;padding:13px;}
  .public-site .foot {margin-top:25px;}
}
@media (prefers-reduced-motion:reduce) {
  .admin .btn,.admin .panel,.admin .mode,.public-site .cover {transition:none!important;}
  .admin .btn:hover,.admin .nums button:hover,.public-site .hero:hover .cover {transform:none;}
}

/* The quick entry spans the studio if automation is idle. */
@media (min-width:981px) {
 .admin .pane[data-pane='log'].no-current > .panel.ql-card {grid-column:1/-1;grid-row:auto;}
 .admin .pane[data-pane='log'].no-current .ql-card {max-width:820px;width:100%;justify-self:center;}
}


/* ===== Base module: fun.css ===== */
/* Score picker, listen chooser, listener panel, notes. Loaded after refinement.css. Uses the existing color variables. */

/* ---------- ratings with emoji ---------- */
.rating { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.rating .rating-emoji { font-size: 1.15em; line-height: 1; }
.rating-big .rating-emoji { font-size: 1.9rem; }
.bars i.half { background: linear-gradient(90deg, var(--red, #ff5c4d) 50%, rgba(255, 255, 255, .12) 50%); }

/* ---------- the score picker ---------- */
.score-picker { --tier: 260; display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); box-shadow: 0 10px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06); }
.score-picker[data-tier="1"], .score-picker[data-tier="2"], .score-picker[data-tier="3"] { --tier: 215; }
.score-picker[data-tier="4"], .score-picker[data-tier="5"] { --tier: 45; }
.score-picker[data-tier="6"], .score-picker[data-tier="7"] { --tier: 95; }
.score-picker[data-tier="8"], .score-picker[data-tier="9"], .score-picker[data-tier="10"] { --tier: 8; }
.sp-read { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 52px; }
.sp-emoji-big { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); transition: transform .18s; }
.sp-num { font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; color: hsl(var(--tier) 85% 68%); }
.sp-words { font-weight: 700; color: var(--muted); }
.sp-clear { margin-left: auto; background: none; border: 0; color: var(--faint); text-decoration: underline; cursor: pointer; font: inherit; font-size: .8rem; }
.sp-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.sp-face { display: grid; place-items: center; gap: 2px; padding: 8px 0 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .03); color: var(--muted); cursor: pointer; font: inherit; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.sp-face span { font-size: 1.35rem; line-height: 1; }
.sp-face small { font-size: .62rem; font-weight: 700; }
.sp-face:hover { transform: translateY(-3px) scale(1.06); background: rgba(255, 255, 255, .09); }
.sp-face[aria-pressed="true"] { background: hsl(var(--tier) 70% 52% / .28); border-color: hsl(var(--tier) 80% 62%); color: var(--ink); box-shadow: 0 8px 18px hsl(var(--tier) 80% 40% / .35); transform: translateY(-3px) scale(1.08); }
@media (max-width: 520px) { .sp-row { grid-template-columns: repeat(5, 1fr); } .sp-face span { font-size: 1.5rem; } }
.sp-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px; outline: none; cursor: pointer; background: linear-gradient(90deg, hsl(var(--tier) 80% 60%) var(--fill, 0%), rgba(255, 255, 255, .12) var(--fill, 0%)); }
.sp-slider.empty { background: rgba(255, 255, 255, .12); }
.sp-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid hsl(var(--tier) 80% 55%); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.sp-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid hsl(var(--tier) 80% 55%); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.sp-slider:focus-visible, .sp-face:focus-visible { outline: 2px solid var(--gold, #e2b24f); outline-offset: 3px; }
.quick-score { display: grid; gap: 10px; margin-top: 12px; }

/* ---------- listen chooser ---------- */
html.modal-open { overflow: hidden; }
.modal-back { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; background: rgba(5, 4, 8, .72); backdrop-filter: blur(6px); }
.modal-back .modal { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 36px); overflow: auto; padding: 26px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel, #17141c); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); display: grid; gap: 14px; }
.modal-back .modal h2 { font-size: 1.7rem; letter-spacing: -.04em; margin: 0; }
.modal-back .modal h3 { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin: 6px 0 10px; }
.modal-kicker { color: var(--faint); font-size: .8rem; margin: 0; }
.modal-lead { color: var(--muted); margin: 0; line-height: 1.55; }
.modal-note { color: var(--faint); font-size: .76rem; margin: 10px 0 0; line-height: 1.5; }
.modal-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.modal-x:hover { color: var(--ink); border-color: var(--ink); }
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.platform-option { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); background: rgba(255, 255, 255, .025); transition: transform .15s, border-color .15s, background .15s; }
.platform-option:hover, .platform-option:focus-visible { transform: translateY(-2px); border-color: var(--gold); background: rgba(255, 255, 255, .06); }
.platform-option.exact { border-color: hsl(150 55% 45% / .7); background: hsl(150 40% 30% / .18); }
.platform-name { font-weight: 700; }
.platform-meta { grid-column: 1; color: var(--faint); font-size: .72rem; }
.platform-arrow { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--gold); }
.listen-btn { display: inline-flex; align-items: center; gap: 8px; }
.listen-btn span:first-child { font-size: .8em; }

/* ---------- notes in the archive ---------- */
.note-excerpt { margin: 6px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.d-note-text { margin: 0; white-space: pre-line; line-height: 1.65; color: var(--ink); }
.d-notes h4 { color: var(--gold); }

/* ---------- listeners ---------- */
.community-badge { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; }
.community-badge small { color: var(--faint); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; }
.community-badge b { font-weight: 800; }
.cb-react { display: inline-flex; align-items: center; gap: 3px; }
.cb-react small { text-transform: none; letter-spacing: 0; }
.listeners { display: grid; gap: 14px; }
.lc-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.lc-avg { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lc-avg .lc-emoji { font-size: 1.8rem; align-self: center; }
.lc-avg b { font-size: 1.9rem; letter-spacing: -.04em; }
.lc-avg small { color: var(--faint); }
.lc-avg .phrase { color: var(--gold); font-weight: 700; margin-left: 2px; }
.lc-reacts { display: flex; gap: 8px; flex-wrap: wrap; font-size: 1.1rem; }
.lc-comments { display: grid; gap: 10px; }
.lc-comment { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.lc-comment.mine { border-color: var(--gold); }
.lc-comment header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .82rem; }
.lc-comment header small { color: var(--faint); }
.lc-comment p { margin: 6px 0 0; line-height: 1.55; white-space: pre-line; }
.lc-pending { font-size: .7rem; padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--gold); color: var(--gold); }
.lc-form { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .02); }
.lc-form h5 { margin: 0; font-size: .9rem; }
.lc-form textarea { width: 100%; resize: vertical; }
.lc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lc-reactpick { display: flex; flex-wrap: wrap; gap: 8px; }
.react-btn { font-size: 1.35rem; line-height: 1; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); cursor: pointer; transition: transform .15s, background .15s, border-color .15s; }
.react-btn:hover { transform: translateY(-2px) scale(1.08); }
.react-btn[aria-pressed="true"] { background: hsl(8 80% 55% / .28); border-color: hsl(8 80% 62%); transform: scale(1.1); }
.lc-cta { display: grid; gap: 10px; justify-items: start; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; }

/* ---------- intro text ---------- */
.public-site .intro-how { max-width: 62ch; color: var(--muted); line-height: 1.65; font-size: .95rem; margin: 12px 0 0; }
.public-site .intro-how strong { color: var(--ink); }

/* ---------- admin switches ---------- */
.switch-row { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.switch-row:last-child { border-bottom: 0; }
.switch-row input { width: 20px; height: 20px; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .sp-face, .react-btn, .platform-option, .sp-emoji-big { transition: none; } .sp-face:hover, .react-btn:hover { transform: none; } }

/* the admin theme styles every input like a text box; the slider must keep its own look */
.admin .score-picker input.sp-slider { height: 10px; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: linear-gradient(90deg, hsl(var(--tier) 80% 60%) var(--fill, 0%), rgba(255, 255, 255, .12) var(--fill, 0%)); box-shadow: none; }
.admin .score-picker input.sp-slider.empty { background: rgba(255, 255, 255, .12); }
.admin .score-picker input.sp-slider:focus { box-shadow: 0 0 0 3px hsl(var(--tier) 80% 55% / .25); }

/* admin Edit window: a real centred window that scrolls, with the Save button always reachable */
.admin .modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: start center; overflow-y: auto; padding: 4vh 14px; }
.admin .modal .panel { width: min(680px, 100%); margin: 0; max-height: none; overflow: visible; }
.admin .modal .ql-form { padding-bottom: 4px; }
.admin .modal .ql-submit { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -14px 24px var(--panel, #17141c); }
.admin .ql-form.is-edit .ql-form-lead, .admin .ql-form.is-edit .ql-search-line, .admin .ql-form.is-edit .ql-manual, .admin .ql-form.is-edit .results, .admin .ql-form.is-edit .ql-selected { display: none; }
/* score picker: neutral thumb before a score is chosen, instant-save note */
.sp-saved { color: var(--faint); font-size: .78rem; min-height: 1em; margin: 0; }
.sp-slider.empty::-webkit-slider-thumb { border-color: rgba(255,255,255,.5); }
.sp-slider.empty::-moz-range-thumb { border-color: rgba(255,255,255,.5); }

/* ---------- footer social icons ---------- */
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials[hidden] { display: none; }
.social-link { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); background: rgba(255, 255, 255, .03); transition: transform .15s, color .15s, border-color .15s, background .15s; }
.social-link:not([class*="social--"]):hover, .social-link:not([class*="social--"]):focus-visible { color: var(--ink); border-color: var(--red, #ff5c4d); background: rgba(255, 92, 77, .12); transform: translateY(-3px); }
.social-link:focus-visible { outline: 2px solid var(--gold, #e2b24f); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .social-link { transition: none; } .social-link:hover { transform: none; } }

/* ---------- admin: footer links editor and visitors ---------- */
.socials-edit { display: grid; gap: 10px; }
.social-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .025); }
.social-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--muted); }
.social-fields { display: grid; gap: 6px; min-width: 0; }
.social-fields input { width: 100%; }
.social-show { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
@media (max-width: 560px) { .social-row { grid-template-columns: 38px minmax(0, 1fr); } .social-show, .social-row .btn { grid-column: 2; justify-self: start; } }
.vstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.vstat { display: grid; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.vstat b { font-size: 1.9rem; letter-spacing: -.04em; line-height: 1; }
.vstat span { color: var(--muted); font-size: .82rem; }
.vbars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 3px; height: 90px; padding: 6px 0; }
.vbars i { height: var(--h, 2%); min-height: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--red, #ff5c4d), rgba(255, 92, 77, .35)); }
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
@media (max-width: 700px) { .vgrid { grid-template-columns: 1fr; } }
.vlist h3 { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin: 0 0 8px; }
.vlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vlist li { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }

/* ---------- details drawer: never wider than its card (long bios and album rows were pushing it out) ---------- */
.drawer, .public-site .drawer, .admin .drawer { grid-template-columns: minmax(0, 1fr); }
.drawer > *, .drawer section, .drawer .d-head > div, .drawer .d-facts, .drawer .toplist { min-width: 0; max-width: 100%; }
.drawer .d-facts { grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); }
.drawer .fact span { overflow-wrap: anywhere; }
.drawer .d-bio, .drawer .d-name, .drawer .d-sub { overflow-wrap: anywhere; }
/* before a score is picked: a quiet dashed circle instead of an emoji */
.sp-emoji-big.empty { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 2px dashed rgba(255, 255, 255, .28); border-radius: 50%; font-size: 1.2rem; font-weight: 800; color: var(--faint); filter: none; }

/* ---------- play it here ---------- */
.play-grid { display: grid; gap: 10px; }
.play-here { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.play-here b { display: block; font-size: 1rem; }
.play-here small { color: var(--muted); font-size: .78rem; }
.play-here .play-ico { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: .95rem; }
.play-here.first { border-color: var(--red, #ff5c4d); background: linear-gradient(135deg, rgba(255, 92, 77, .22), rgba(255, 92, 77, .06)); }
.play-here.first .play-ico { background: var(--red, #ff5c4d); color: #fff; box-shadow: 0 8px 20px rgba(255, 92, 77, .4); }
.play-here:hover { transform: translateY(-2px); border-color: var(--red, #ff5c4d); }
.play-here:focus-visible { outline: 2px solid var(--gold, #e2b24f); outline-offset: 3px; }

/* the docked player */
.dock-player { position: fixed; z-index: 250; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 32px)); padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel, #17141c); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); display: grid; gap: 8px; animation: dock-in .25s ease-out; }
.dock-player.video { width: min(560px, calc(100vw - 32px)); }
@keyframes dock-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.dock-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dock-live { width: 8px; height: 8px; border-radius: 50%; background: var(--red, #ff5c4d); box-shadow: 0 0 0 4px rgba(255, 92, 77, .2); flex: 0 0 auto; }
.dock-title { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dock-via { color: var(--faint); font-size: .74rem; white-space: nowrap; }
.dock-x { margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.dock-x:hover { color: var(--ink); border-color: var(--ink); }
.dock-frame iframe { display: block; width: 100%; border: 0; border-radius: 12px; background: #000; }
.dock-player.video .dock-frame iframe { aspect-ratio: 16 / 9; height: auto; }
.dock-note { margin: 0; color: var(--faint); font-size: .72rem; line-height: 1.4; }
html.has-dock body { padding-bottom: 260px; }
@media (max-width: 560px) { .dock-player { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; } .dock-player.video { width: auto; } }
@media (prefers-reduced-motion: reduce) { .dock-player { animation: none; } .play-here { transition: none; } }
/* the Listen popup: full-width sections (an older admin rule centered everything inside) */
.modal-back .modal { place-items: stretch; justify-items: stretch; align-content: start; text-align: left; inset: auto; z-index: auto; }
.modal-back .modal > section { min-width: 0; }
@media (max-width: 560px) { .dock-note { display: none; } .dock-player { padding: 10px; gap: 6px; } html.has-dock body { padding-bottom: 230px; } }
/* footer icons in each brand's color, the same style as the EMG site */
.social-link[class*="social--"] { border-color: transparent; color: #fff; }
.social-link svg { width: 20px; height: 20px; }
.social--instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social--facebook { background: #1877f2; }
.social--youtube { background: #ff0000; }
.social--applemusic { background: #fa243c; }
.social--soundcloud { background: #ff5500; }
.social--pandora { background: #3668ff; }
.social--spotify { background: #1db954; }
.social--tiktok, .social--x, .social--threads { background: #111; border-color: rgba(255, 255, 255, .25); }
.social--twitch { background: #9146ff; }
.social--bandcamp { background: #1da0c3; }
.social--website, .social--custom { background: #3a3540; }
.social-link[class*="social--"]:hover, .social-link[class*="social--"]:focus-visible { color: #fff; transform: translateY(-3px) scale(1.06); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); border-color: transparent; }


/* ===== Base module: facelift.css ===== */
/* Hear & Now v8: focused spotlight + responsive fixes.
   Scoped last in the cascade, so the working v7 components and behavior stay intact. */
:root { scroll-behavior:smooth; }
.public-site { --red:#ff7468; --gold:#eabb82; }
.public-site .wrap { max-width:1510px; }
.public-site .public-bar { padding-block:18px; }
.public-site .section-heading.now-heading { border-top:0; padding:0 0 22px; align-items:end; }
.public-site .now-section { padding-top:clamp(30px, 5vw, 64px); }
.public-site .now-heading .section-no { display:block; font-size:.71rem; letter-spacing:.2em; margin-bottom:9px; }
.public-site .now-heading h1 { display:flex; align-items:center; gap:14px; font-family:var(--body); font-weight:820; letter-spacing:-.078em; font-size:clamp(3.2rem, 7.6vw, 7.3rem); line-height:.99; }
.public-site .now-heading h1 em { font-family:Georgia,serif; font-weight:400; color:var(--gold); font-size:1.02em; }
.public-site .now-heading p { margin-top:13px; color:var(--muted); font-size:clamp(.86rem,1.5vw,1.07rem); letter-spacing:0; font-weight:450; line-height:1.5; }
.public-site .now-heading .section-context { text-align:right; letter-spacing:.18em; padding-bottom:12px; }
.on-air-pulse { position:relative;display:inline-block;width:11px;height:11px;flex:none;border-radius:50%;background:var(--red);box-shadow:0 0 22px rgba(255,116,104,.45); }
.on-air-pulse::after {content:''; position:absolute; inset:-7px; border:1px solid var(--red);border-radius:50%;opacity:.32; animation:onAirRing 2.4s ease-in-out infinite;}
@keyframes onAirRing { 50% { transform:scale(1.35); opacity:.09; } }
.public-site .hero { margin:0; min-height: min(530px,60vw); padding:clamp(27px,4.2vw,60px); border:1px solid rgba(244,165,137,.33);border-radius:26px; gap:clamp(22px,4.7vw,75px);grid-template-columns:minmax(240px,43%) minmax(0,1fr); background: radial-gradient(ellipse 84% 105% at 4% 25%,rgba(179,77,77,.16),transparent 70%),linear-gradient(110deg,#241b24,#15141c 57%,#14121b);box-shadow:0 34px 95px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.07);}
:root[data-theme='light'] .public-site .hero {background:linear-gradient(125deg,#fff2eb,#faf8f4 60%,#f7f1ee);box-shadow:0 18px 55px rgba(83,40,41,.10);}
.public-site .hero .art { max-height:460px; aspect-ratio:1.12; filter: drop-shadow(0 25px 24px rgba(0,0,0,.3));}
.public-site .hero .cover {border-radius:17px;box-shadow:0 28px 60px rgba(0,0,0,.53),0 0 0 1px rgba(255,255,255,.08);}
.public-site .hero h1 {max-width:15ch;font-size:clamp(2.65rem,5.1vw,5.7rem);letter-spacing:-.07em;line-height:1.02;text-wrap:balance; overflow-wrap:anywhere;}
.public-site .hero .info { gap:13px; min-width:0; }
.public-site .hero .creator {font-size:clamp(1.15rem,1.9vw,1.65rem);font-weight:650;}
.public-site .hero .row {min-width:0;gap:10px 14px;}
.public-site .hero .review {border-left:2px solid var(--gold);background:rgba(241,170,116,.045);padding:10px 13px;color:var(--ink);line-height:1.65;border-radius:0 9px 9px 0;}
.public-site .hero .status {font-size:.76rem;letter-spacing:.2em;}
.public-site .hero .rating {background:rgba(232,185,123,.075);border:1px solid rgba(232,185,123,.19);padding:7px 11px;border-radius:13px;gap:6px;}
.public-site .hero .rating b {font-size:clamp(1.7rem,3vw,2.6rem);}
.public-site .hero .rating .phrase {margin-left:6px; font-size:.82rem;}
.public-site .hero .listen-btn {padding:13px 24px;box-shadow:0 10px 28px rgba(244,102,95,.19);font-weight:800;}
.public-site .hero .more-btn {padding:10px 14px;}
.public-site .hero .modenote {font-size:.75rem;color:var(--faint);}
.public-site .hero:focus-within {border-color:rgba(244,165,137,.65);}
.public-site .hero .hero-drawer {padding:clamp(14px,2.6vw,26px);}
.public-site .about-strip {display:grid;grid-template-columns: minmax(0,1.55fr) minmax(0,.85fr);gap:clamp(18px,5vw,90px);margin-top:25px;padding:22px clamp(4px,1vw,14px) 21px;border-bottom:1px solid var(--line);}
.public-site .about-strip-copy p {font-size:clamp(.93rem,1.35vw,1.08rem);line-height:1.6;color:var(--ink);max-width:62ch;margin-top:9px;}
.public-site .about-strip em {color:var(--gold);}
.public-site .about-strip-hint {color:var(--muted);font-size:.87rem;line-height:1.65;align-self:center;max-width:41ch;}
.public-site .about-strip-hint strong {color:var(--ink);}
.public-site .archive-intro {padding-top:clamp(40px,5vw,70px);}
.public-site .panel {min-width:0;}
.public-site .cols,.public-site .cols > *, .public-site .stack, .public-site .entry, .public-site .drawer,.public-site .hero .hero-drawer, .public-site .d-wrap {min-width:0;max-width:100%;}
.public-site .entry {overflow:clip;}
.public-site .drawer {min-width:0;overflow:hidden;}
.public-site .drawer > *, .public-site .drawer .d-head > *, .public-site .drawer .d-head, .public-site .drawer .d-mine {min-width:0;max-width:100%;}
.public-site .drawer .strip {max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;}
.public-site .drawer .toplist a,.public-site .drawer .linkrow a {min-width:0;max-width:100%;overflow-wrap:anywhere;}
.public-site .drawer .toplist b {overflow-wrap:anywhere;}
.public-site .drawer .toplist small {display:inline-block;max-width:100%;}
.public-site .lc-cta,.public-site .lc-form,.public-site .lc-comments,.public-site .lc-comment,.public-site .listeners {min-width:0;max-width:100%;overflow-wrap:break-word;}
.public-site .entry .note-excerpt {max-width:100%;}
/* True archive filters; no fake sorting only of the first loaded page. */
.archive-tools {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(120px,.82fr) minmax(100px,.64fr);gap:9px;margin-bottom:17px;}
.archive-tools label {min-width:0;display:block;}
.archive-tools input,.archive-tools select {font:inherit;width:100%;min-width:0;height:43px;border-radius:11px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);padding:9px 11px;outline:none;font-size:.81rem;}
.archive-tools input:focus-visible,.archive-tools select:focus-visible {border-color:var(--red);box-shadow:0 0 0 3px rgba(255,116,104,.12);}
.archive-tools input::placeholder{color:var(--muted);}
.public-site .filters,.public-site .genre-filters {display:flex;max-width:100%;gap:7px; flex-wrap:wrap;}
.public-site .item {min-width:0;}
.public-site .item > div:nth-child(2) {min-width:0;}
.public-site .item .t, .public-site .item .s {max-width:100%;}
.public-site .item .r {max-width:100%;min-width:0;}
.public-site .item .rating {min-width:0;flex-wrap:wrap;}
.public-site .modal-back .modal {max-width:calc(100vw - 24px);}
/* Admin: a calm workspace; individual controls remain familiar. */
.admin .panel {min-width:0;}
.admin .pane.on {min-width:0;}
.admin .bar {flex-wrap:wrap;row-gap:10px;}
.admin .history-tools {background:linear-gradient(120deg,rgba(232,114,98,.08),transparent 68%),var(--panel);}
.admin .history-controls {margin-top:10px;gap:12px;}
.admin .history-query-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(145px,.5fr) minmax(125px,.45fr);gap:10px;min-width:0;}
.admin .history-query-row > * {min-width:0;width:100%;}
.admin .history-maintenance {border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.016);min-width:0;}
.admin .history-maintenance > summary {color:var(--muted);font-size:.81rem;cursor:pointer;}
.admin .history-maintenance .two {margin:13px 0 8px;}
.admin .aitem,.admin .aitem > div,.admin .aitem .meta {min-width:0;max-width:100%;}
.admin .aitem {overflow:hidden;}
.admin .aitem .t,.admin .aitem .s {overflow-wrap:anywhere;}
.admin .aitem .d-wrap {min-width:0;max-width:100%;overflow:hidden;}
.admin .aitem .drawer {min-width:0;max-width:100%;overflow:hidden;}
.admin .aitem .strip {max-width:100%;}
.admin .nav {max-width:min(650px,100%);}
.admin .ql-card {min-width:0;}
.admin .score-picker {min-width:0;max-width:100%;}
.admin .score-picker .sp-read {min-width:0;flex-wrap:wrap;}
.admin .score-picker .sp-row {min-width:0;}
.admin .ql-form,.admin .ql-form > * {min-width:0;}
.admin .modal {background:rgba(5,5,10,.82);backdrop-filter:blur(8px);align-items:start;overscroll-behavior:contain;padding:clamp(12px,4vh,38px) 12px;}
.admin .modal .panel {max-height:min(92dvh,900px);overflow-y:auto;overscroll-behavior:contain; width:min(700px,100%);border:1px solid rgba(255,255,255,.23);box-shadow:0 30px 100px rgba(0,0,0,.72);}
.admin .modal .ql-submit {bottom:0;margin-bottom:env(safe-area-inset-bottom);z-index:4;}
@media(max-width:899px) {
  .public-site .now-section {padding-top:21px;}
  .public-site .now-heading h1 {font-size:clamp(2.9rem,8vw,5.6rem);}
  .public-site .hero {min-height:0;grid-template-columns:minmax(220px,40%) minmax(0,1fr);gap:24px;padding:29px;}
  .public-site .hero .art {max-width:360px;width:100%;margin:0;}
  .public-site .hero h1 {font-size:clamp(2.3rem,5vw,3.9rem);}
  .public-site .hero .disc {display:block;}
  .public-site .hero .cover {width:auto;height:100%;aspect-ratio:1;inset:0 auto auto 0;}
  .public-site .about-strip {grid-template-columns:1fr;gap:10px;padding-top:20px;}
  .public-site .about-strip-hint {max-width:none;}
}
@media(max-width:700px) {
  .public-site .hero {grid-template-columns:1fr;gap:13px;padding:19px;}
  .public-site .hero .art {width:min(100%,320px);height:auto;aspect-ratio:1.1;margin:0 auto;}
  .public-site .hero .info {gap:9px;}
  .public-site .hero h1 {max-width:100%;font-size:clamp(2rem,8vw,3.4rem);}
  .public-site .hero .row {gap:9px;}
  .archive-tools {grid-template-columns:repeat(2,minmax(0,1fr));}
  .archive-search {grid-column:1/-1;}
  .admin .history-query-row {grid-template-columns:repeat(2,minmax(0,1fr));}
  .admin .history-query-row input {grid-column:1/-1;}
}
@media(max-width:540px) {
  .public-site .public-bar {padding:15px 0;}
  .public-site .now-section {padding-top:21px;}
  .public-site .now-heading {align-items:start;}
  .public-site .now-heading .section-context {display:none;}
  .public-site .now-heading h1 {font-size:clamp(2.7rem,12vw,4.5rem);gap:12px;}
  .public-site .now-heading p {margin-top:9px;font-size:.85rem;}
  .on-air-pulse {width:8px;height:8px;}
  .public-site .hero {grid-template-columns:minmax(0,1fr);gap:16px;padding:19px 17px 24px;border-radius:19px;}
  .public-site .hero .art {width:min(100%,290px);margin:0 auto;max-height:300px;}
  .public-site .hero .cover {width:auto;height:100%;aspect-ratio:1;inset:0 auto auto 0;}
  .public-site .hero .disc {display:block;}
  .public-site .hero h1 {font-size:clamp(2.15rem,9vw,3.25rem);max-width:100%;}
  .public-site .hero .status {font-size:.66rem;}
  .public-site .hero .creator {font-size:1rem;}
  .public-site .hero .detail {font-size:.87rem;}
  .public-site .hero .rating {padding:6px 9px;}
  .public-site .hero .rating b {font-size:1.75rem;}
  .public-site .hero .listen-btn {padding:13px 22px;font-size:.93rem;}
  .public-site .hero .hero-drawer {padding:12px;}
  .public-site .about-strip {margin-top:15px;padding-block:17px;}
  .public-site .archive-intro {padding-top:40px;}
  .public-site .item {grid-template-columns:50px minmax(0,1fr);gap:10px;padding:14px 0;}
  .public-site .item .thumb {width:50px;height:50px;}
  .public-site .item .r {grid-column:2;grid-row:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:start;text-align:left;min-width:0;gap:8px;}
  .public-site .item .when {margin:0;}
  .public-site .item .rating .phrase {white-space:normal;overflow-wrap:anywhere;}
  .public-site .item .rating .bars {display:none;}
  .public-site .item .r .btn {white-space:normal;}
  .public-site .drawer {padding:12px;gap:13px;}
  .public-site .drawer .d-head {grid-template-columns:65px minmax(0,1fr);}
  .public-site .drawer .d-photo {width:65px;height:65px;}
  .public-site .drawer .d-name {font-size:1.1rem;}
  .public-site .drawer .strip {gap:9px;}
  .public-site .drawer .strip > * {flex-basis:102px;}
  .public-site .drawer .strip img,.public-site .drawer .strip .ph {width:102px;height:102px;}
  .public-site .lc-cta,.public-site .lc-form {padding:12px;}
  .public-site .panel {padding:16px;}
  .admin .wrap {padding-inline:13px;padding-bottom:calc(126px + env(safe-area-inset-bottom));}
  .admin .nav {bottom:calc(12px + env(safe-area-inset-bottom));}
  .admin .nav button {font-size:clamp(.64rem,2.65vw,.83rem);min-width:0;}
  .admin .modal {padding:7px 6px calc(12px + env(safe-area-inset-bottom));align-items:start;}
  .admin .modal .panel {max-height:calc(100dvh - 24px - env(safe-area-inset-bottom));padding:15px;width:100%;margin:0;border-radius:17px;}
  .admin .modal .ql-submit {bottom:0;}
  .admin .history-maintenance .two {grid-template-columns:1fr;}
  .admin .history-query-row {gap:7px;}
  .admin .history-query-row select {font-size:.78rem;padding-inline:8px;}
}
@media(max-width:375px) {
  .public-site .now-heading h1 {font-size:2.65rem;}
  .public-site .hero .art {width:min(100%,235px);}
  .public-site .panel {padding:13px;}
  .admin .nav {left:5px;right:5px;}
  .admin .nav button {font-size:.64rem;padding-inline:2px;}
}
@media(prefers-reduced-motion:reduce) { .on-air-pulse::after {animation:none;} :root {scroll-behavior:auto;} }


/* ===== Base module: v10.css ===== */
/* v10: floating player, station strip, cleaner On the Air, live reactions, archive page, legal pages, admin bits. */

/* ---------- floating player ---------- */
.hn-player { position: fixed; z-index: 260; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); display: grid; gap: 10px; justify-items: center; pointer-events: none; }
.hn-player > * { pointer-events: auto; }
.hp-stage { width: min(560px, 100%); border-radius: 18px; overflow: hidden; background: var(--panel, #17141c); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); transition: opacity .2s, transform .2s; }
.hn-player:not(.stage-open) .hp-stage { height: 0; border-width: 0; opacity: 0; transform: translateY(10px); pointer-events: none; box-shadow: none; }
.hp-stage iframe { display: block; width: 100%; border: 0; background: #000; }
.hn-player.video .hp-stage iframe { aspect-ratio: 16 / 9; height: auto; }
.hp-tip { margin: 0; padding: 10px 14px; font-size: .78rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.hp-tip:empty { display: none; }
.hp-bar { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 999px; background: rgba(24, 21, 28, .82); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
html[data-theme='light'] .hp-bar { background: rgba(255, 255, 255, .88); border-color: rgba(0, 0, 0, .1); }
.hp-art { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.hp-art.ph { display: grid; place-items: center; background: linear-gradient(135deg, var(--purple, #7a4cc2), var(--red, #ff5c4d)); color: #fff; font-weight: 800; }
.hp-meta { min-width: 0; flex: 1 1 auto; display: grid; gap: 1px; }
.hp-title { font-weight: 750; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-sub { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-status { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--faint); min-height: 1em; white-space: nowrap; overflow: hidden; }
.hp-status-text { overflow: hidden; text-overflow: ellipsis; }
.hp-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.hp-status.live .hp-dot, .hv-status.live .hp-dot { background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .2); animation: hp-pulse 1.8s infinite; }
.hp-status.live, .hv-status.live { color: #8fe9b5; }
.hp-status.moved .hp-dot, .hv-status.moved .hp-dot { background: var(--gold, #e2b24f); }
.hp-status.moved, .hv-status.moved { color: var(--gold, #e2b24f); }
@keyframes hp-pulse { 50% { box-shadow: 0 0 0 6px rgba(61, 220, 132, 0); } }
.hp-switch { flex: 0 0 auto; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: 2px 9px; font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer; }
.hp-controls { display: none; align-items: center; gap: 8px; flex: 0 1 300px; min-width: 0; }
.hn-player.controllable .hp-controls { display: flex; }
.hp-time { font-size: .7rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.hp-scrub, .hp-vol { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; cursor: pointer; background: linear-gradient(90deg, var(--ink, #fff) var(--fill, 0%), rgba(255, 255, 255, .18) var(--fill, 0%)); }
.hp-scrub { flex: 1 1 auto; min-width: 60px; }
.hp-scrub::-webkit-slider-thumb, .hp-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s; }
.hp-scrub:hover::-webkit-slider-thumb, .hp-vol:hover::-webkit-slider-thumb, .hp-scrub:focus-visible::-webkit-slider-thumb { opacity: 1; }
.hp-scrub::-moz-range-thumb, .hp-vol::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
.hp-volume { position: relative; display: flex; align-items: center; }
.hp-vol { position: absolute; bottom: 44px; left: 50%; width: 110px; transform: translateX(-50%) rotate(-90deg); transform-origin: center; opacity: 0; pointer-events: none; transition: opacity .15s; }
.hp-volume:hover .hp-vol, .hp-volume:focus-within .hp-vol { opacity: 1; pointer-events: auto; }
.hp-btn { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.hp-btn svg { width: 20px; height: 20px; }
.hp-btn:hover { color: var(--ink); background: rgba(255, 255, 255, .08); }
.hp-btn:focus-visible, .hp-service:focus-visible, .hp-fab:focus-visible { outline: 2px solid var(--gold, #e2b24f); outline-offset: 2px; }
.hp-play { width: 40px; height: 40px; background: var(--ink, #fff); color: #111; }
.hp-play:hover { background: var(--ink, #fff); color: #111; transform: scale(1.05); }
.hp-via { display: flex; align-items: center; gap: 4px; font-size: .7rem; color: var(--faint); flex: 0 0 auto; }
.hp-service { font: inherit; font-size: .76rem; font-weight: 650; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; max-width: 130px; }
.hp-min, .hp-fab { display: none; }
.hp-fab { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); padding: 0; overflow: hidden; background: #111; box-shadow: 0 14px 34px rgba(0, 0, 0, .6); cursor: pointer; justify-self: end; }
.hp-fab-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-fab-art.ph { display: grid; place-items: center; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--purple, #7a4cc2), var(--red, #ff5c4d)); }
.hp-eq { position: absolute; inset: auto 0 8px; display: flex; justify-content: center; gap: 3px; }
.hp-eq i { width: 4px; height: 10px; border-radius: 2px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .6); animation: hp-eq 1s ease-in-out infinite; }
.hp-eq i:nth-child(2) { animation-delay: .2s; }
.hp-eq i:nth-child(3) { animation-delay: .4s; }
@keyframes hp-eq { 50% { height: 4px; } }
html.has-player body { padding-bottom: 110px; }
/* phone and small tablet: the bar becomes a sheet, and can shrink to a corner button */
@media (max-width: 699px) {
  .hn-player { left: 10px; right: 10px; width: auto; transform: none; bottom: max(10px, env(safe-area-inset-bottom)); }
  .hp-stage { width: 100%; }
  .hp-bar { border-radius: 22px; flex-wrap: wrap; row-gap: 6px; }
  .hp-controls { order: 5; flex: 1 1 100%; }
  .hp-volume { display: none; }
  .hp-via span { display: none; }
  .hp-min { display: grid; }
  .hn-player.mini { left: auto; right: max(14px, env(safe-area-inset-right)); width: auto; }
  .hn-player.mini .hp-bar, .hn-player.mini .hp-stage { display: none; }
  .hn-player.mini .hp-fab { display: block; }
  html.has-player body { padding-bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) { .hp-eq i, .hp-status.live .hp-dot { animation: none; } .hp-stage { transition: none; } }

/* ---------- whose page this is ---------- */
.station { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; margin: 18px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .025); }
.station[hidden] { display: none; }
.station-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 800; font-size: 1.15rem; color: #fff; background: linear-gradient(135deg, var(--red, #ff5c4d), var(--gold, #e2b24f)); }
.station-text { display: grid; gap: 1px; min-width: 0; flex: 1 1 200px; }
.station-kicker { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.station-name { font-size: 1.15rem; letter-spacing: -.02em; }
.station-tagline { font-size: .84rem; color: var(--muted); }
.station-links { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.station-links[hidden] { display: none; }
.station-links .social-link { width: 38px; height: 38px; }

/* ---------- On the Air ---------- */
.on-chip { display: inline-flex; align-items: center; gap: 7px; }
.on-label { font-size: .72rem; letter-spacing: .06em; color: var(--faint); }
.ctx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; border: 1px solid var(--line); color: var(--muted); background: rgba(255, 255, 255, .04); }
.ctx-library { color: #ff9eb0; border-color: rgba(255, 158, 176, .35); }
.ctx-exploring { color: #8fd3ff; border-color: rgba(143, 211, 255, .35); }
.ctx-suggested { color: #e2b24f; border-color: rgba(226, 178, 79, .4); }
.ctx-radio { color: #b9a4ff; border-color: rgba(185, 164, 255, .35); }
.ctx-rewatch { color: #8fe9b5; border-color: rgba(143, 233, 181, .35); }
.hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hero-tags .genres { margin: 0; }
.public-site .hero .awaiting { color: var(--faint); font-style: italic; margin: 4px 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.icon-btn { width: 40px; height: 40px; padding: 0 !important; display: inline-grid !important; place-items: center; border-radius: 50% !important; font-size: 1rem; }
.along-btn { white-space: nowrap; }
.hero { position: relative; }
.hero-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.hero-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero-video:has(.hv-status) { aspect-ratio: auto; display: grid; grid-template-rows: auto auto; }
.hero-video:has(.hv-status) iframe { position: static; aspect-ratio: 16 / 9; height: auto; }
.hv-start { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; background: #000; }
.hv-start img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s, transform .3s; }
.hv-start:hover img { opacity: 1; transform: scale(1.02); }
.hv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--red, #ff5c4d); color: #fff; font-size: 1.6rem; padding-left: 5px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.hv-status { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: .8rem; color: var(--faint); background: rgba(0, 0, 0, .55); }
.public-site .hero.has-video .art .disc { display: none; }
/* floating live reactions */
.bubbles { position: absolute; right: 18px; bottom: 18px; display: grid; gap: 8px; justify-items: end; max-width: min(320px, 70%); pointer-events: none; z-index: 3; }
.bubble { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 12px; border-radius: 16px 16px 4px 16px; background: rgba(20, 17, 24, .88); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); animation: bubble-in .35s ease-out; transition: opacity .7s, transform .7s; }
.bubble.gone { opacity: 0; transform: translateY(-14px); }
.b-react { font-size: 1.25rem; line-height: 1; }
.b-who { font-size: .7rem; font-weight: 700; color: var(--faint); }
.b-text { font-size: .86rem; color: var(--ink); flex: 1 1 100%; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; transition: none; } }
.quick-react { display: grid; gap: 8px; margin-top: 4px; }
.qr-row { display: flex; gap: 6px; flex-wrap: wrap; }
.qr-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); font-size: 1.2rem; cursor: pointer; transition: transform .12s; }
.qr-btn:hover { transform: translateY(-2px) scale(1.08); border-color: var(--red, #ff5c4d); }
.qr-btn:active { transform: scale(.92); }
.qr-form { display: flex; gap: 8px; max-width: 460px; }
.qr-input { flex: 1 1 auto; min-width: 0; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; font-size: .9rem; }
.qr-note { font-size: .74rem; color: var(--faint); min-height: 1em; }

/* ---------- rows ---------- */
.row-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.row-tags .genres { margin: 0; }
.row-tags:empty { display: none; }
.row-play { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; line-height: 0; }
.row-play-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.1rem; color: #fff; background: rgba(0, 0, 0, .45); border-radius: inherit; opacity: 0; transition: opacity .15s; line-height: 1; }
.row-play:hover .row-play-icon, .row-play:focus-visible .row-play-icon { opacity: 1; }
@media (hover: none) { .row-play-icon { opacity: .9; background: none; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); } }
.archive-link { display: inline-flex; margin-top: 16px; text-decoration: none; }
.archive-link[hidden] { display: none; }

/* ---------- archive page ---------- */
.archive-page .archive-full { margin-top: 22px; }
.archive-page .archive-full h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.05em; margin: 6px 0 0; }
.archive-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.archive-tools > * { flex: 1 1 180px; min-width: 0; }
.archive-tools .archive-search { flex: 2 1 260px; }
.archive-tools input, .archive-tools select, .rating-filter select { width: 100%; }
.rating-filter { display: flex; gap: 8px; }
.rating-filter select { flex: 1 1 auto; min-width: 0; }
.rating-filter select[hidden] { display: none; }
.genre-wrap { margin: 6px 0 12px; }
.genre-wrap summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--muted); padding: 6px 0; }
.genre-wrap[hidden] { display: none; }
.list.loading { opacity: .5; transition: opacity .2s; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pager span { font-size: .85rem; color: var(--muted); }
.pager .btn[disabled] { opacity: .35; pointer-events: none; }
.archive-count:empty { display: none; }

/* ---------- footer and legal pages ---------- */
.legal-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: .8rem; }
.legal-links a { color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--ink); text-decoration: underline; }
.legal { max-width: 720px; margin: 40px 0 20px; line-height: 1.7; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); letter-spacing: -.05em; margin: 8px 0 18px; }
.legal h2 { font-size: 1.2rem; margin: 28px 0 8px; letter-spacing: -.02em; }
.legal p, .legal li { color: var(--muted); }
.legal b { color: var(--ink); }
.legal ul { padding-left: 20px; display: grid; gap: 8px; }

/* ---------- admin ---------- */
.ctx-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.ctx-pill[aria-pressed='true'] { background: var(--ink, #fff); color: #111; border-color: var(--ink, #fff); }
.genre-find { margin: 8px 0 4px; }
.genre-pick .btn { margin-left: 4px; }
.live-note { color: var(--faint); margin: 12px 0 0; }
.admin .current-panel.fresh { animation: fresh 1.6s ease-out; }
@keyframes fresh { 0% { box-shadow: 0 0 0 3px var(--gold, #e2b24f); } 100% { box-shadow: 0 0 0 0 transparent; } }
.setup-steps { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.setup-steps a { color: var(--gold, #e2b24f); }
.setup-status { font-size: .82rem; margin: 8px 0 0; }
.setup-status.good { color: #8fe9b5; }
.setup-status.bad { color: #ff9a8f; }
.setup-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.setup-card h3 { margin: 0; font-size: 1rem; }
.setup-card p { margin: 0; }
.install-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.install-body { color: var(--muted); font-size: .86rem; line-height: 1.55; }
.socials-fold > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.socials-edit .social-row { padding: 6px 8px; }
@media (min-width: 900px) { .socials-edit { grid-template-columns: 1fr 1fr; } .socials-edit > .btn, .socials-edit > .sp-saved { grid-column: 1 / -1; } }
.admin .pane[data-pane='settings'] > .setup-panel { grid-column: 1 / -1; }

/* player refinements */
.hn-player { width: min(880px, calc(100vw - 32px)); }
.hn-player .hp-service { height: auto !important; min-height: 0 !important; width: auto; padding: 5px 10px !important; font-size: .76rem !important; line-height: 1.2; border-radius: 999px !important; }
@media (max-width: 699px) {
  .hp-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; grid-template-areas: 'art meta min close' 'ctrl ctrl ctrl ctrl' 'via via stage stage'; align-items: center; column-gap: 10px; }
  .hp-art { grid-area: art; }
  .hp-meta { grid-area: meta; }
  .hp-min { grid-area: min; }
  .hp-close { grid-area: close; }
  .hp-controls { grid-area: ctrl; }
  .hp-via { grid-area: via; justify-self: start; }
  .hp-stage-btn { grid-area: stage; justify-self: end; }
  .hn-player:not(.controllable) .hp-controls { display: none; }
}
/* hero buttons: Play here leads, the rest stay quiet */
.public-site .hero-actions .play-btn { font-size: 1rem; padding: 12px 22px; }
.public-site .hero-actions .listen-btn:not(.primary) { font-size: .84rem !important; padding: 9px 16px !important; background: transparent !important; box-shadow: none !important; border: 1px solid var(--line) !important; min-height: 0 !important; }
/* live reactions sit at the top right of the On the Air card, where they are seen */
.bubbles { top: 18px; bottom: auto; }
@media (max-width: 699px) { .bubbles { right: 10px; top: 10px; max-width: 80%; } }