:root {
  --bg: #090a0f;
  --panel: #14161d;
  --panel2: #1b1e27;
  --line: #2a2e3a;
  --text: #ece9ef;
  --muted: #a39fab;
  --accent: #f2385a;
  --accent-dark: #c92a49;
  --radius: 14px;
  --max: 1080px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); }
a:hover { color: #ff6f8a; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 680px; }
.narrow-col { max-width: 760px; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; background: #fff; color: #000; padding: 8px 12px; z-index: 99; border-radius: 6px; }
:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); text-transform: uppercase; font-weight: 900; }
h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); text-transform: uppercase; font-weight: 800; margin-top: 1.6em; }
h3 { font-size: 1.1rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; color: var(--accent); margin: 0 0 .8em; font-weight: 700; }
.lead { font-size: 1.15rem; color: #d6d2db; }
.small { font-size: .88rem; color: var(--muted); }
.plain { list-style: none; padding: 0; margin: 0; }
.block { padding-top: 48px; padding-bottom: 56px; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(9,10,15,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 900; letter-spacing: .06em; }
.brand b { color: var(--accent); }
.brand img { border-radius: 50%; }
nav { display: flex; gap: 4px; }
nav a { color: var(--text); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 600; font-size: .95rem; }
nav a:hover { background: var(--panel2); }
nav a[aria-current="page"] { background: var(--accent); color: #fff; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 4px 0; }
@media (max-width: 760px) {
  .nav-toggle { display: block; }
  nav { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 20px 16px; }
  nav.open { display: flex; }
}

/* buttons */
.btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font-weight: 800; padding: 13px 24px; border-radius: 999px; border: 0; cursor: pointer; font-size: 1rem; letter-spacing: .02em; }
.btn:hover { background: var(--accent-dark); color: #fff; }
.btn.ghost { background: transparent; border: 2px solid var(--line); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent); }
.btn.disabled { background: var(--panel2); color: var(--muted); cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }

/* hero */
.hero { background: radial-gradient(900px 400px at 80% 20%, rgba(242,56,90,.22), transparent 60%), var(--bg); padding: 56px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; }
.hero h1 span { color: var(--accent); }
.hero-art img { border-radius: 50%; box-shadow: 0 0 80px rgba(242,56,90,.35); display: block; margin: 0 auto; }
.onair { display: inline-flex; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(242,56,90,.7); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(242,56,90,0); } 100% { box-shadow: 0 0 0 0 rgba(242,56,90,0); } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } html { scroll-behavior: auto; } }
@media (max-width: 760px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { order: -1; } .hero-art img { max-width: 260px; } }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; display: block; }
a.card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text); }
.card p { color: var(--muted); margin: 0; font-size: .95rem; }
.card.static:hover { transform: none; }
.card li { padding: 3px 0; }
.band { background: linear-gradient(135deg, #1a0d12, #101324); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 0; text-align: center; }
.band .narrow { margin-left: auto; margin-right: auto; }
.band.inline { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 40px; padding: 28px 20px; }
.band.inline h2 { margin-top: 0; }

/* player */
.player { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 20px 0 8px; }
.play { width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 1.7rem; cursor: pointer; flex: none; }
.play:hover { background: var(--accent-dark); }
.play[data-state="playing"] { font-size: 1.4rem; }
.meta { flex: 1 1 220px; min-width: 0; }
.now-label { margin: 0; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; }
.now-title { margin: 2px 0; font-size: 1.4rem; font-weight: 800; overflow-wrap: anywhere; }
.vol { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); gap: 4px; }
.vol input { accent-color: var(--accent); }
.chat iframe { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

/* schedule */
.sched-scroll { overflow-x: auto; margin: 24px 0 8px; border: 1px solid var(--line); border-radius: var(--radius); }
.sched { border-collapse: collapse; width: 100%; min-width: 760px; }
.sched th, .sched td { border: 1px solid var(--line); padding: 12px 8px; text-align: center; font-size: .95rem; }
.sched thead th { background: var(--panel2); text-transform: uppercase; font-size: .78rem; letter-spacing: .1em; }
.sched tbody th { background: var(--panel2); font-weight: 800; width: 70px; }
.sched td { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; background: var(--panel); }
.sched td:empty { background: transparent; }
.sched td.hl { background: #ffd166; color: #111; }
.sched .today { box-shadow: inset 0 0 0 2px var(--accent); }
thead .today { background: var(--accent); color: #fff; }

/* artists */
.artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 28px; }
.artist { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.artist h2 { margin: 0 0 4px; font-size: 1.4rem; }
.artist p { color: #cfcbd5; font-size: .98rem; }
.role { color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; margin: 0; }
.genres { color: var(--muted) !important; font-size: .82rem !important; text-transform: uppercase; letter-spacing: .06em; }

/* forms */
.form { display: grid; gap: 16px; margin-top: 20px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.form input, .form textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 12px 14px; font: inherit; }
.form input:focus, .form textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(242,56,90,.25); }
.hp { position: absolute; left: -9999px; }
.notice { padding: 14px 18px; border-radius: 10px; margin: 18px 0; }
.notice.ok { background: #0f2a1b; border: 1px solid #1f7a45; }
.notice.err { background: #2a1015; border: 1px solid var(--accent); }

.ticks { list-style: none; padding: 0; display: grid; gap: 10px; }
.ticks li::before { content: "\2713"; color: var(--accent); font-weight: 900; margin-right: 10px; }
.prose h2 { font-size: 1.15rem; color: var(--accent); }
.prose li { margin-bottom: 8px; }

/* footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 20px; padding: 36px 0 18px; background: #07080c; }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; }
.foot p { color: var(--muted); margin: 6px 0; }
.foot a { text-decoration: none; }
.foot li { padding: 3px 0; }
.legal { margin-top: 28px; color: var(--muted); font-size: .85rem; }
@media (max-width: 640px) { .foot { grid-template-columns: 1fr; } }

/* chat */
.chatbox { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 18px 0; }
.chat-onair { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(90deg, #2a1119, var(--panel)); border-bottom: 1px solid var(--line); }
.chat-onair > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.small-btn { padding: 8px 16px; font-size: .85rem; }
.chat-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.chat-actions { display: flex; gap: 14px; align-items: center; font-size: .85rem; color: var(--muted); }
button.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 2px 4px; text-decoration: underline; }
button.link.on { color: var(--text); font-weight: 800; text-decoration: none; }
.chat-log { height: 460px; overflow-y: auto; padding: 12px 16px; background: #0c0d13; }
.msg { padding: 6px 0; border-bottom: 1px solid #14161d; }
.msg.mentioned { background: rgba(242,56,90,.14); border-left: 3px solid var(--accent); padding-left: 10px; margin-left: -13px; border-radius: 4px; }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.who { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 800; padding: 0; color: #9fd0ff; }
.who.mod { color: #ffd166; } .who.admin { color: var(--accent); }
.badge { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.time { color: var(--muted); font-size: .75rem; }
.del { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.del:hover { color: var(--accent); }
.msg-body { overflow-wrap: anywhere; font-size: .98rem; }
.at { color: #9fd0ff; font-weight: 700; } .at.me { background: var(--accent); color: #fff; border-radius: 4px; padding: 0 4px; }
.chat-send { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.chat-send input { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; color: var(--text); padding: 11px 16px; font: inherit; min-width: 0; }
.chat-send input:focus { border-color: var(--accent); outline: none; }
.chat-error { color: #ff8da1; padding: 0 16px 10px; margin: 0; }
.chat-auth { padding: 16px; border-top: 1px solid var(--line); }
.auth-tabs { display: flex; gap: 12px; margin-bottom: 8px; }
.chat-mod { padding: 16px; border-top: 1px solid var(--line); background: #0e1016; }
.urow { display: flex; gap: 12px; align-items: center; padding: 4px 0; flex-wrap: wrap; font-size: .92rem; }
.urow > span { min-width: 180px; }

/* admin */
.admin-tabs { gap: 20px; margin: 16px 0; font-size: 1.05rem; }
.admin-sched td, .admin-sched th { padding: 6px; }
.admin-sched input[type=text] { width: 100%; min-width: 96px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 7px 8px; font: inherit; font-size: .85rem; }
.admin-sched .time-in { width: 72px; min-width: 0; text-align: center; font-weight: 800; }
.star { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; cursor: pointer; color: #ffd166; font-size: .85rem; }
.acard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 16px 0; }
.acard .form, .acard { display: grid; gap: 12px; }
.acard label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.acard input[type=text], .acard input[type=number], .acard textarea, .people-search { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 10px 12px; font: inherit; width: 100%; }
.acard .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
@media (max-width: 560px) { .acard .row { grid-template-columns: 1fr; } }
.acard .check { display: flex; align-items: center; gap: 8px; }
.hidden-artist { opacity: .6; border-style: dashed; }
.people-search { max-width: 360px; margin: 10px 0; }
.people td, .people th { text-align: left; padding: 8px 12px; }
.people td { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .92rem; }

/* chat rooms */
.room-tabs { display: flex; gap: 18px; padding: 10px 16px 0; border-bottom: 1px solid var(--line); background: var(--panel2); }
.room-tabs .link { padding: 8px 2px; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; font-weight: 700; }
.room-tabs .link.on { color: var(--text); border-bottom-color: var(--accent); }
.notice-room { margin: 0; padding: 8px 16px; background: #2a2210; color: #ffd166; font-size: .85rem; border-bottom: 1px solid var(--line); }
.chat-actions a { color: var(--accent); }

/* emoji picker */
.emoji-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.emoji-btn:hover { border-color: var(--accent); }
.emoji-pop { max-height: 240px; overflow-y: auto; margin: 0 12px 12px; padding: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; }
.emoji-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 6px 4px 4px; }
.emoji-grid { display: flex; flex-wrap: wrap; gap: 2px; }
.emoji-grid button { width: 38px; height: 38px; font-size: 1.35rem; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.emoji-grid button:hover, .emoji-grid button:focus-visible { background: var(--panel); }
.msg-body { font-family: system-ui, -apple-system, "Segoe UI", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }

/* online list and guests */
.who.guest { color: var(--muted); }

/* chat window with a Users side panel */
.chat-split .chat-log { min-width: 0; }
.chat-users { background: #08090d; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; height: 460px; }
.users-head { background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; font-weight: 700; text-align: left; padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.users-head .caret { margin-left: auto; transition: transform .15s; display: inline-block; transform: translateY(-3px); }
.users-closed .users-head .caret { transform: rotate(-90deg); }
.users-list { list-style: none; margin: 0; padding: 6px 8px; overflow-y: auto; flex: 1; }
.users-list li.small { padding: 10px 6px; }
.urow2 { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-radius: 10px; padding: 6px; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.urow2:hover { background: var(--panel2); }
.utext { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.uname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urole { font-size: .78rem; color: var(--muted); }
.avatar { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #2b3a8f; }
.avatar svg { width: 24px; height: 24px; fill: #fff; }
.avatar.admin { background: var(--accent); } .avatar.mod { background: #c79200; } .avatar.guest { background: #5b5f6b; } .avatar.artist { background: #7a3fc4; } .avatar.member { background: #2b4fd9; }
.status { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #08090d; }
.status.here { background: #2ecc71; } .status.away { background: #ff9f1a; }
@media (max-width: 720px) {
  .chat-split { grid-template-columns: 1fr; }
  .chat-users { order: -1; height: auto; max-height: 240px; border-left: 0; border-bottom: 1px solid var(--line); }
  .users-closed .users-list { display: none; }
}

/* avatars, pictures, GIFs */
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg-main { min-width: 0; flex: 1; }
.mav { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; margin-top: 2px; background: #2b3a8f; }
.mav.ph { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .85rem; }
.mav.ph.admin { background: var(--accent); } .mav.ph.mod { background: #c79200; } .mav.ph.guest { background: #5b5f6b; } .mav.ph.user { background: #2b4fd9; }
.chat-img, .chat-gif { display: block; max-width: min(100%, 360px); max-height: 320px; border-radius: 10px; margin-top: 6px; background: var(--panel2); }
.chat-img { cursor: zoom-in; }
.avatar.has-img { background: none; }
.avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }
.gif-btn { font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.gif-pop { padding: 10px; }
.gif-search { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; color: var(--text); padding: 9px 14px; font: inherit; margin-bottom: 6px; }
.gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.gif-grid button { padding: 0; border: 0; background: var(--panel); border-radius: 8px; cursor: pointer; overflow: hidden; height: 90px; }
.gif-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-credit { text-align: right; margin: 6px 0 0; }
.emoji-btn { color: var(--text); }
.gif-btn { color: var(--text); }

/* profile popup */
.who-btn { font-weight: 700; color: var(--text) !important; text-decoration: none !important; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; }
.who-btn:hover { border-color: var(--accent); }
.profile-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 40; }
.profile-pop { position: fixed; z-index: 41; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(300px, 92vw); max-height: 92vh; overflow-y: auto; background: #1c1d22; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); padding: 18px 0 8px; text-align: center; }
.pp-x { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: var(--text); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.pp-name { font-size: 1.25rem; font-weight: 800; padding: 0 36px; overflow-wrap: anywhere; }
.pp-sub { color: var(--muted); font-size: .85rem; margin-bottom: 10px; }
.pp-avatar { display: flex; justify-content: center; margin: 6px 0; }
.avatar.big { width: 96px; height: 96px; }
.avatar.big svg { width: 64px; height: 64px; }
.avatar.big img { width: 96px; height: 96px; }
.avatar.big .status { width: 22px; height: 22px; right: 2px; bottom: 2px; border-width: 3px; border-color: #1c1d22; }
.pp-status { font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin: 6px 0 0; }
.pp-menu, .pp-statuslist { display: flex; flex-direction: column; text-align: left; }
.pp-menu button, .pp-statuslist button { background: none; border: 0; border-bottom: 1px solid #2a2c34; color: var(--text); font: inherit; text-align: left; padding: 13px 18px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.pp-menu button:hover, .pp-statuslist button:hover { background: #26282f; }
.pp-menu button[hidden], .pp-statuslist button[hidden] { display: none; }
.pp-menu .pp-last, .pp-statuslist .pp-last { border-bottom: 0; color: var(--muted); }
.pp-form { padding: 14px 18px; text-align: left; display: grid; gap: 10px; }
.pp-form label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.pp-form input { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 10px 12px; font: inherit; }
.pp-row { display: flex; align-items: center; gap: 14px; }
.dot-s { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-s.here { background: #2ecc71; } .dot-s.busy { background: #ff4d4d; } .dot-s.away { background: #ff9f1a; }
.status.busy { background: #ff4d4d; }

/* private message tabs */
.dm-tabs { display: contents; }
.tab-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; line-height: 18px; text-align: center; }
.room-tabs { flex-wrap: wrap; }
.pp-menu button[data-pp-block] { color: #ff8da1; }

.pp-brow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-bottom: 1px solid #2a2c34; }
.pp-brow span { overflow-wrap: anywhere; font-weight: 600; }

/* messages inbox */
.dm-head { display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--panel2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dm-head strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.inbox { padding: 6px 0; }
.inbox-search { width: calc(100% - 24px); margin: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; color: var(--text); padding: 9px 14px; font: inherit; }
.inbox-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; border-bottom: 1px solid #14161d; padding: 10px 16px; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.inbox-row:hover { background: var(--panel2); }
.inbox-row.unread .inbox-name { color: #fff; } .inbox-row.unread .inbox-prev { color: var(--text); font-weight: 600; }
.inbox-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.inbox-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-prev { color: var(--muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.inbox-empty { padding: 18px 16px; }

/* three columns: chats | conversation | users */
.chat-split { display: grid; grid-template-columns: 250px minmax(0, 1fr) 230px; }
.chat-split.no-left { grid-template-columns: minmax(0, 1fr) 230px; }
.chat-center { min-width: 0; display: flex; flex-direction: column; }
.chat-left { background: #08090d; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; height: 540px; }
.chat-left[hidden] { display: none; }
.chat-users { height: 540px; }
.left-body { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; }
.room-list, .dm-list { list-style: none; margin: 0; padding: 6px 8px; }
.dm-list { overflow-y: auto; flex: 1; padding-top: 0; }
.room-item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-radius: 10px; padding: 9px 10px; color: var(--muted); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.room-item:hover { background: var(--panel2); color: var(--text); }
.room-item.on { background: var(--panel2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.room-item[hidden] { display: none; }
.room-ico { width: 22px; text-align: center; color: var(--accent); font-weight: 900; }
.left-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 10px 16px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.left-search { margin: 4px 10px 6px; width: calc(100% - 20px); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; color: var(--text); padding: 7px 12px; font: inherit; font-size: .85rem; }
.dm-empty { padding: 8px 8px 12px; }
.dm-row { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-radius: 10px; padding: 7px 8px; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.dm-row:hover { background: var(--panel2); }
.dm-row.on { background: var(--panel2); box-shadow: inset 3px 0 0 var(--accent); }
.dm-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.dm-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-prev { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row.unread .dm-name { color: #fff; } .dm-row.unread .dm-prev { color: var(--text); font-weight: 600; }
.dm-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.dm-meta .time { font-size: .68rem; }
.dm-head { display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: var(--panel2); border-bottom: 1px solid var(--line); }
.dm-head strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .chat-split, .chat-split.no-left { grid-template-columns: minmax(0, 1fr); }
  .chat-left { order: -2; height: auto; max-height: 360px; border-right: 0; border-bottom: 1px solid var(--line); }
  .chat-users { order: -1; }
  .left-closed .left-body { display: none; }
  .chat-left .users-head .caret { margin-left: 6px; }
}

/* handover cue buttons and cards (Artists room) */
.cue-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: #0e1016; }
.cue-bar[hidden] { display: none; }
.cue-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.cue-btn { display: inline-flex; align-items: center; gap: 8px; border: 2px solid; border-radius: 12px; padding: 9px 14px; font: inherit; font-weight: 800; color: #fff; cursor: pointer; background: #14161d; }
.cue-btn:disabled { opacity: .5; cursor: default; }
.cue-ico { font-size: 1.25rem; line-height: 1; }
.cue-btn.c60, .cue-card.c60 { border-color: #3b82f6; } .cue-btn.c60:hover { background: #12306a; }
.cue-btn.c30, .cue-card.c30 { border-color: #f5b301; } .cue-btn.c30:hover { background: #4a3800; }
.cue-btn.c10, .cue-card.c10 { border-color: #ff7a1a; } .cue-btn.c10:hover { background: #5a2a00; }
.cue-btn.cgo, .cue-card.cgo { border-color: #2ecc71; } .cue-btn.cgo:hover { background: #0f4a28; }
.cue-card { display: inline-flex; align-items: center; gap: 12px; border: 3px solid; border-radius: 14px; padding: 10px 18px; margin-top: 6px; font-size: 1.35rem; font-weight: 900; letter-spacing: .06em; }
.cue-card .cue-ico { font-size: 2rem; }
.cue-card.c60 { background: #12306a; } .cue-card.c30 { background: #4a3800; } .cue-card.c10 { background: #5a2a00; } .cue-card.cgo { background: #0f4a28; animation: cuepulse 1s ease-in-out 3; }
@keyframes cuepulse { 50% { transform: scale(1.05); box-shadow: 0 0 22px #2ecc71aa; } }
@media (prefers-reduced-motion: reduce) { .cue-card.cgo { animation: none; } }
@media (max-width: 560px) { .cue-btn { flex: 1 1 calc(50% - 8px); justify-content: center; } }
@media (max-width: 560px) { .cue-label { display: none; } }

/* replies, reactions, message actions */
.msg-actions { margin-left: auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; }
@media (hover: none) { .msg-actions { opacity: .75; } }
.msg-head .msg-actions + .del { margin-left: 4px; }
.act { background: none; border: 0; border-radius: 8px; padding: 2px 7px; color: var(--muted); cursor: pointer; font-size: .95rem; line-height: 1.4; }
.act:hover, .act:focus-visible { background: var(--panel2); color: var(--text); }
.reply-quote { display: block; max-width: 100%; text-align: left; background: var(--panel2); border: 0; border-left: 3px solid var(--accent); border-radius: 6px; color: var(--muted); font: inherit; font-size: .82rem; padding: 4px 10px; margin: 2px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.reply-quote:hover { color: var(--text); }
.reply-quote.gone { cursor: default; font-style: italic; border-left-color: var(--line); }
.reactions { display: flex; flex-wrap: wrap; gap: 6px; }
.reactions:empty { display: none; }
.rx { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; color: var(--text); font: inherit; font-size: .85rem; padding: 1px 10px; margin-top: 6px; cursor: pointer; }
.rx:hover { border-color: var(--accent); }
.rx.mine { background: rgba(242,56,90,.2); border-color: var(--accent); }
.msg.flash { animation: msgflash 1.6s ease-out; }
@keyframes msgflash { 0%, 40% { background: rgba(255,209,102,.25); } 100% { background: transparent; } }
.react-pop { position: fixed; z-index: 60; background: #1c1d22; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.6); padding: 6px; max-width: min(320px, 92vw); }
.react-pop[hidden] { display: none; }
.react-quick { display: flex; gap: 2px; align-items: center; }
.react-quick button, .react-grid button { background: none; border: 0; border-radius: 8px; font-size: 1.4rem; padding: 4px 6px; cursor: pointer; line-height: 1.2; }
.react-quick button:hover, .react-grid button:hover { background: var(--panel2); }
.react-quick .more { font-size: 1.1rem; font-weight: 800; color: var(--muted); }
.react-grid { display: flex; flex-wrap: wrap; max-height: 200px; overflow-y: auto; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 4px; }
.react-grid[hidden] { display: none; }
.reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #1a1318; border-top: 1px solid var(--line); border-left: 3px solid var(--accent); font-size: .85rem; color: var(--muted); }
.reply-bar[hidden] { display: none; }
.reply-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar strong { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .msg.flash { animation: none; } }

/* bigger chat window: wider page, and a height that follows the screen */
:root { --chat-h: clamp(620px, 82vh, 980px); }
.wrap.wide { max-width: 1480px; }
.chat-split { height: var(--chat-h); }
.chat-left, .chat-users { height: auto; min-height: 0; }
.chat-center { min-height: 0; }
.chat-log { height: auto; flex: 1 1 auto; min-height: 0; }
@media (max-width: 720px) {
  .chat-split { height: auto; }
  /* The message list takes what is left of the screen after everything around it (the site header, the room and user bars, and the message box),
     so the message box, Send button and the WhatsApp ticker are all on screen with no scrolling. In the phone app there is no site header, so it gets 78px more. The 150px floor keeps
     it usable when the keyboard is open. */
  .chat-log { flex: none; height: max(150px, calc(100vh - 483px)); }
  body.in-app .chat-log { height: max(150px, calc(100vh - 405px)); }
  @supports (height: 100dvh) {
    .chat-log { height: max(150px, calc(100dvh - 483px)); }
    body.in-app .chat-log { height: max(150px, calc(100dvh - 405px)); }
  }
  .chat-users { height: auto; }

  /* The slim chat bar on phones: room name and how many are here, Rooms and People buttons, and your name. Rooms and People open as panels over the chat
     instead of taking three bars of the screen; this is why the message list can be ~96px taller (the numbers above are 96px smaller). */
  .chat-log { height: max(150px, calc(100vh - 387px)); }
  body.in-app .chat-log { height: max(150px, calc(100vh - 309px)); }
  @supports (height: 100dvh) {
    .chat-log { height: max(150px, calc(100dvh - 387px)); }
    body.in-app .chat-log { height: max(150px, calc(100dvh - 309px)); }
  }
  .chat-bar { min-height: 44px; padding: 4px 10px; gap: 8px; flex-wrap: nowrap; justify-content: flex-start; align-items: center; box-sizing: border-box; }
  .chat-bar:has([data-mod-toggle]:not([hidden]), [data-notify]:not([hidden])) { flex-wrap: wrap; }   /* moderators and browsers that can enable alerts have extra links: let them wrap */
  .chat-bar .bar-chatroom { display: none; }
  .bar-room { display: flex; align-items: center; gap: 7px; flex: 1 1 0; min-width: 0; font-weight: 700; }
  .bar-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #35d07f; }
  .bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar-count { font-weight: 400; color: #ffb3c0; }
  .bar-pill.on .bar-count { color: #fff; }
  .bar-pill { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid #3a3f52; background: #1b1e2a; color: var(--text); font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; }
  .bar-pill.on { background: var(--accent); border-color: var(--accent); }
  .bar-pill[hidden] { display: none; }
  .chat-actions { flex: none; gap: 8px; }
  .chat-actions .who-btn { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-split { position: relative; }
  .chat-left, .chat-users { position: absolute; top: 0; left: 0; right: 0; z-index: 40; max-height: min(60vh, 420px); overflow-y: auto; border: 1px solid #3a3f52; border-radius: 0 0 12px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
  .chat-left .users-head, .chat-users .users-head { display: none; }
  .chat-left.left-closed, .users-closed .chat-users { display: none; }
}
@media (min-width: 721px) { .bar-room, .bar-pill { display: none; } }

/* picture viewer in the chat (opened by tapping a picture): on top of everything, with a big close button */
.pic-viewer { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .94); touch-action: none; padding: 12px; box-sizing: border-box; }
.pic-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; }
.pic-viewer-x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .7); color: #fff; font-size: 34px; line-height: 1; padding: 0 0 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pic-viewer-x:focus-visible { outline: 3px solid var(--brand, #f2385a); outline-offset: 2px; }
.pic-viewer-hint { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: #cfcbd3; font-size: .8rem; pointer-events: none; text-shadow: 0 1px 3px #000; }

/* rooms: read-only tag, admin picker */
.ro-tag { margin-left: auto; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.room-item { align-items: center; }
.pick-box[hidden] { display: none; }
.pick-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; }
.pick-row { display: flex; align-items: center; gap: 16px; padding: 8px 12px; border-bottom: 1px solid #14161d; }
.pick-row span { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.pick-row label { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: .88rem; }
.acard select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 10px 12px; font: inherit; width: 100%; }

/* Raw Kutzz logo as a watermark behind the messages. The dark overlay on top keeps text easy to read. */
.chat-log {
  background-color: #0c0d13;
  background-image:
    linear-gradient(rgba(12, 13, 19, .86), rgba(12, 13, 19, .86)),
    url('../img/logo.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, contain;   /* the round badge fills the window: full height, centred */
  background-blend-mode: normal, lighten;   /* the logo's darker corners melt into the chat background */
}

/* load earlier messages */
.load-earlier { display: block; width: calc(100% - 8px); margin: 2px 4px 8px; padding: 8px; background: rgba(20, 22, 29, .9); border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font: inherit; font-size: .85rem; cursor: pointer; }
.load-earlier:hover { color: var(--text); border-color: var(--accent); }
.load-earlier:disabled { cursor: default; opacity: .7; }

/* mini player bar: shown on every page except Listen while the radio is playing */
main:focus { outline: none; }
.miniplayer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: rgba(14, 16, 22, .97); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(0,0,0,.5); backdrop-filter: blur(8px); }
.miniplayer[hidden] { display: none; }
body.has-mini { padding-bottom: 76px; }
.mini-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 1.05rem; cursor: pointer; }
.mini-play:hover { background: var(--accent-dark); }
.mini-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.mini-live { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.mini-title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-vol { width: 120px; accent-color: var(--accent); }
.mini-open { flex: none; color: var(--accent); font-weight: 700; text-decoration: none; font-size: .9rem; white-space: nowrap; }
.mini-open:hover { text-decoration: underline; }
@media (max-width: 560px) { .mini-vol { display: none; } }

/* artist photos */
.artist-photo { display: block; width: 100%; aspect-ratio: 494 / 504; object-fit: cover; object-position: center; border-radius: 12px; margin-bottom: 14px; background: var(--panel2); }
.artist-photo.ph { display: flex; align-items: center; justify-content: center; font-size: 4.5rem; font-weight: 900; color: rgba(255,255,255,.35); background: radial-gradient(circle at 30% 25%, #3a1620, var(--panel2) 70%); }
.photo-edit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.photo-thumb { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; object-position: center 22%; background: var(--panel2); flex: none; }
.photo-thumb.none { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .78rem; border: 1px dashed var(--line); }
.photo-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* photo position controls (admin) */
.photo-thumb { width: 120px; height: auto; aspect-ratio: 494 / 504; }
.pos-controls { display: grid; gap: 8px; min-width: 200px; flex: 1; }
.pos-controls label { display: grid; gap: 2px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.pos-controls input[type=range] { accent-color: var(--accent); width: 100%; }

/* Artists page: bigger photos, closer to the size they had on the old site */
.artists { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.artist { padding: 12px 12px 18px; }
.artist > h2, .artist > p { padding-left: 4px; padding-right: 4px; }
@media (max-width: 560px) { .artists { grid-template-columns: 1fr; } }

/* artist photo: a frame that clips the (optionally zoomed) photo */
.artist-frame { display: block; position: relative; width: 100%; padding: 0; border: 0; background: var(--panel2); aspect-ratio: 494 / 504; border-radius: 12px; overflow: hidden; margin-bottom: 14px; cursor: zoom-in; }
.artist-frame .artist-photo { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; margin: 0; object-fit: cover; display: block; transition: transform .15s; }
.artist-frame:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.artist-frame::after { content: "\1F50D"; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; font-size: .95rem; opacity: 0; transition: opacity .15s; }
.artist-frame:hover::after, .artist-frame:focus-visible::after { opacity: 1; }
@media (hover: none) { .artist-frame::after { opacity: .85; } }
.photo-frame { width: 120px; aspect-ratio: 494 / 504; border-radius: 12px; overflow: hidden; background: var(--panel2); flex: none; }
.photo-frame .photo-thumb { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; display: block; }

/* photo viewer */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .97); display: flex; flex-direction: column; align-items: center; padding: 56px 12px 14px; }
.lightbox[hidden] { display: none; }
html.lb-open { overflow: hidden; }
.lb-close { position: absolute; top: 8px; right: 14px; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; padding: 4px 12px; }
.lb-stage { flex: 1; min-height: 0; width: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; }
.lb-stage img { max-width: 94vw; max-height: calc(100vh - 130px); width: auto; height: auto; object-fit: contain; border-radius: 6px; cursor: zoom-in; }
.lightbox.zoomed .lb-stage { align-items: flex-start; justify-content: flex-start; }
.lightbox.zoomed .lb-stage img { max-width: none; max-height: none; width: 190vw; cursor: zoom-out; margin: auto; }
.lb-cap { margin: 10px 0 0; color: #fff; text-align: center; }
.lb-hint { color: var(--muted); font-size: .8rem; margin-left: 10px; }

/* photos are sized and placed explicitly (see photo_box() in artists.php), so zooming out shows more of the picture */
.artist-frame .artist-photo { position: absolute; display: block; max-width: none; object-fit: fill; transition: none; }
.photo-frame { position: relative; }
.photo-frame .photo-thumb { position: absolute; max-width: none; object-fit: fill; }

/* ---- one look for the whole site: the home page's glow and shading everywhere ---- */
body {
  background:
    radial-gradient(900px 480px at 85% -60px, rgba(242,56,90,.20), transparent 62%),
    radial-gradient(760px 520px at -5% 38%, rgba(70,90,255,.09), transparent 60%),
    radial-gradient(700px 400px at 100% 85%, rgba(242,56,90,.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
.hero { background: transparent; }
.site-header { background: rgba(9,10,15,.82); }
.site-footer { background: linear-gradient(180deg, rgba(7,8,12,.6), #07080c); }
main > section.wrap:first-child > h1::after { content: ""; display: block; width: 72px; height: 4px; border-radius: 4px; background: var(--accent); margin-top: 14px; }
.prose, .narrow-col > .notice { border-radius: var(--radius); }
.form select { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 12px 14px; font: inherit; width: 100%; }
.form select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(242,56,90,.25); }
.form input[type=file] { padding: 10px; }
.card-join { background: linear-gradient(135deg, rgba(242,56,90,.22), rgba(70,90,255,.12)), var(--panel); border-color: rgba(242,56,90,.5); }
.card-join h3 { color: #fff; }
.card-join p { color: #e1dde6; }

/* sign-in pop-up on the Listen page */
.auth-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50; }
.chat-auth.modal { position: fixed; z-index: 51; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, 94vw); max-height: 92vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.7); padding: 24px 22px 20px; }
.chat-auth.modal .auth-tabs { justify-content: space-between; }
.chat-auth.modal .auth-tabs .link { flex: 1; text-align: center; padding: 8px 0; border-bottom: 3px solid transparent; text-decoration: none; font-weight: 700; }
.chat-auth.modal .auth-tabs .link.on { border-bottom-color: var(--accent); color: var(--text); }
.auth-title { margin-top: 0; }

/* admin: sidebar layout */
.admin-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 12px; }
.admin-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.side-h { margin: 14px 8px 4px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.side-h:first-child { margin-top: 4px; }
.side-link { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-radius: 10px; color: var(--text); text-align: left; padding: 10px 12px; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; }
.side-link span[aria-hidden] { width: 1.3em; text-align: center; opacity: .85; }
.side-link:hover { background: var(--panel2); color: var(--text); }
.side-link.on { background: var(--accent); color: #fff; }
.side-badge { margin-left: auto; background: #ffd166; color: #111; border-radius: 999px; font-size: .75rem; font-weight: 800; padding: 1px 8px; }
.admin-main { min-width: 0; }
.panel-h { margin: 0 0 12px; font-size: 1.5rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 8px 0 18px; }
.stat { display: grid; gap: 4px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; color: var(--text); font: inherit; cursor: pointer; }
.stat:hover { border-color: #8cc8ff; }
.stat-n { font-size: 2.2rem; font-weight: 900; color: #8cc8ff; line-height: 1; }   /* informational numbers are a calm blue: red/pink looks like a warning; amber = needs attention, green = all clear */
.stat-l { font-size: .88rem; color: var(--muted); white-space: pre-line; }
.app-top { display: flex; gap: 16px; align-items: flex-start; }
.app-top h3 { margin: 0 0 2px; }
.app-top p { margin: 2px 0; }
.app-bio { white-space: pre-wrap; margin: 6px 0; font-size: .95rem; color: #d6d2db; }
.app-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.app-actions input[type=text] { flex: 1 1 220px; }
.app-card.approved { border-color: #1f7a45; }
.app-card.rejected { opacity: .65; }
.status-pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; background: var(--panel2); }
.status-pill.pending { background: #ffd166; color: #111; } .status-pill.approved { background: #1f7a45; } .status-pill.rejected { background: #5b5f6b; }
.secret { font-family: ui-monospace, Consolas, monospace; background: var(--bg); padding: 8px 12px; border-radius: 8px; overflow-wrap: anywhere; user-select: all; }
.people select, .acard select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 6px 8px; font: inherit; }
@media (max-width: 860px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-side { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .side-h { display: none; }
  .side-link { width: auto; padding: 8px 12px; }
}

/* home page: all five cards in one row on wide screens, so Join sits beside Get the app */
@media (min-width: 1000px) { .cards.five { grid-template-columns: repeat(5, 1fr); } }


/* home page tiles: the colour shifts steadily from blue to red along the row, each tile picking up where the last ended */
.cards.five .card { background: linear-gradient(135deg, var(--c1), var(--c2)), var(--panel); border-color: var(--c2); }
.cards.five .card p, .cards.five .card-join p { color: #e1dde6; }
.cards.five .card:nth-child(1) { --c1: rgba(70,90,255,.26);   --c2: rgba(113,82,214,.26); }
.cards.five .card:nth-child(2) { --c1: rgba(113,82,214,.26);  --c2: rgba(156,73,172,.26); }
.cards.five .card:nth-child(3) { --c1: rgba(156,73,172,.26);  --c2: rgba(199,65,131,.26); }
.cards.five .card:nth-child(4) { --c1: rgba(199,65,131,.26);  --c2: rgba(242,56,90,.26); }
.cards.five .card:nth-child(5) { --c1: rgba(242,56,90,.26);   --c2: rgba(255,90,60,.26); }
.cards.five a.card:hover { border-color: #fff; }

.notice.warn { background: #2b2410; border: 1px solid #c79200; }
.check-line { display: flex !important; gap: 12px; align-items: flex-start; font-weight: 400 !important; }
.check-line input { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--accent); }
.btn:disabled { background: var(--panel2); color: var(--muted); cursor: not-allowed; }

.stat-n.bad { color: #ffb02e; }
.filter-bar { display: flex; gap: 8px; margin: 6px 0 12px; flex-wrap: wrap; }
.chip { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 6px 16px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.status-pill.pay-paid { background: #1f7a45; color: #fff; }
.status-pill.pay-overdue { background: #ffd166; color: #111; }
.status-pill.pay-failed { background: var(--accent); color: #fff; }
.status-pill.pay-pending { background: #5b5f6b; color: #fff; }

/* WhatsApp ticker under the chat */
.ticker { display: flex; align-items: stretch; margin: 10px 0 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ticker-label { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #1f7a45; color: #fff; font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.ticker-track { flex: 1; min-width: 0; overflow: hidden; position: relative; padding: 11px 0; }
.ticker-move { display: inline-block; white-space: nowrap; padding-left: 100%; animation: ticker-scroll 40s linear infinite; }
.ticker:hover .ticker-move { animation-play-state: paused; }
.ticker-item { margin-right: 56px; }
.ticker-item b { color: #7ee2a8; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-move { animation: none; white-space: normal; padding-left: 14px; }
  .ticker-item { display: block; margin: 0 0 4px; }
}
details.acard summary { cursor: pointer; font-weight: 700; }
details.acard ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: .92rem; }

.status-pill.pay-exempt { background: #2b4fd9; color: #fff; }

/* admin: compact header, tighter sidebar, smaller section headings */
.admin-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.admin-top h1 { font-size: 1.7rem; margin: 0; }
.admin-top p { margin: 0; }
.admin-layout { margin-top: 18px; }
.admin-side { top: 76px; padding: 10px; gap: 1px; }
.admin-side .side-link { padding: 8px 12px; font-size: .92rem; }
.side-h { margin: 12px 8px 3px; }
.side-out { margin-top: 10px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; color: var(--muted); }
.admin-main h2:not(.panel-h) { font-size: 1.05rem; margin: 1.4em 0 .5em; }
.panel-h { font-size: 1.35rem; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.admin-main .acard h3 { margin: 0; }
@media (max-width: 860px) { .side-h { display: block; width: 100%; margin: 8px 6px 0; } .side-out { border-top: 0; margin-top: 0; } }

/* ---- shop ---- */
.nav-cart { white-space: nowrap; }
.cart-badge { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 800; text-align: center; line-height: 1.5; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 20px; margin: 26px 0; }
.product { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.product-img { position: relative; aspect-ratio: 1; background: var(--panel2); }
.product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-ph { display: grid; place-items: center; height: 100%; font-weight: 900; font-size: 2.4rem; letter-spacing: .1em; color: var(--line); }
.stock-tag { position: absolute; top: 10px; left: 10px; background: #000c; color: #fff; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.stock-tag.low { background: #ffd166; color: #111; }
.product.soldout .product-img img { opacity: .45; }
.product-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-body h2 { font-size: 1.1rem; margin: 0; text-transform: none; letter-spacing: 0; }
.price { font-size: 1.3rem; font-weight: 900; margin: 0; color: var(--accent); }
.buy-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.buy-row select, .cart-table select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 8px 10px; font: inherit; }
.buy-row .btn { flex: 1; padding: 10px 16px; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; max-width: 360px; margin: 18px 0 18px auto; }
.totals dt, .totals dd { margin: 0; }
.totals dd { text-align: right; font-weight: 700; }
.totals .grand { font-size: 1.2rem; font-weight: 900; border-top: 1px solid var(--line); padding-top: 8px; }
.order-summary { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 18px 0; }
.os-row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.os-row.grand { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; font-weight: 900; font-size: 1.1rem; }
.pay-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 16px 0; display: grid; gap: 12px; }
.pay-box h3 { margin: 0; }
.card-field { height: 48px; background: #fff0; border: 1px solid var(--line); border-radius: 10px; padding: 0 4px; overflow: hidden; }
.card-field iframe { color-scheme: dark; }
.pay-box .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cart-table td { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .95rem; }

/* admin lists that must not grow forever: compact rows, paging */
.list-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 6px; }
.list-tools .people-search { margin: 0; flex: 1 1 220px; }
.pager { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 14px 0; }
.chip:disabled { opacity: .4; cursor: default; }
.prod-table td { vertical-align: middle; }
.thumb-cell { width: 52px; }
.mini-thumb { display: grid; place-items: center; width: 42px; height: 42px; object-fit: cover; border-radius: 8px; background: var(--panel2); color: var(--muted); }

.check-cell { width: 34px; }
.check-cell input { width: 18px; height: 18px; accent-color: var(--accent); }
.row-actions { white-space: nowrap; }
.row-actions .link { margin-right: 12px; }
.link.danger { color: #ff6f8a; }
.bulk-bar { display: flex; align-items: center; gap: 16px; padding: 10px 14px; margin: 6px 0 10px; background: var(--panel2); border: 1px solid var(--accent); border-radius: 10px; }
.btn.danger-btn { background: #b3202f; padding: 8px 18px; }
.btn.danger-btn:hover { background: #d12a3c; }

/* ---- tickets ---- */
.shop-h { font-size: 1.4rem; margin: 1.6em 0 .3em; }
.product-body h3 { margin: 0; font-size: 1.1rem; }
.event-when { margin: 0; color: #7ee2a8; font-weight: 700; font-size: .92rem; }
.product.is-ticket .product-img { aspect-ratio: 16 / 10; }
.tickets-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ticket { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; background: #fff; color: #111; border-radius: var(--radius); padding: 18px 20px; margin: 14px 0; border-left: 10px solid var(--accent); break-inside: avoid; }
.ticket .ticket-event { font-size: 1.25rem; font-weight: 900; margin: 0; }
.ticket .ticket-meta { margin: 2px 0; color: #444; }
.ticket-main { flex: 1 1 220px; }
.ticket-code { text-align: center; }
.ticket-code svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.ticket-num { margin: 4px 0 0; font-family: ui-monospace, Consolas, monospace; letter-spacing: .12em; font-weight: 700; color: #111; }
.ticket.used, .ticket.void { opacity: .55; }
.ticket-state { display: inline-block; background: #b3202f; color: #fff; padding: 2px 12px; border-radius: 999px; font-weight: 800; font-size: .8rem; text-transform: uppercase; }
@media print {
  body { background: #fff !important; }
  .site-header, .site-footer, .miniplayer, .no-print, .skip { display: none !important; }
  .ticket { border: 2px solid #000; border-left-width: 10px; }
}

/* ---- door scanner ---- */
.scan-field { display: grid; gap: 6px; font-weight: 600; }
.scan-field select { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 12px; font: inherit; }
.scan-counts { font-size: 1.1rem; font-weight: 800; margin: 8px 0; }
.scan-result { border-radius: var(--radius); padding: 26px 18px; text-align: center; margin: 12px 0; border: 3px solid var(--line); background: var(--panel); }
.scan-result .sr-big { font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 900; letter-spacing: .04em; line-height: 1.1; }
.scan-result .sr-small { margin-top: 8px; font-size: 1.05rem; overflow-wrap: anywhere; }
.scan-result.ok { background: #0f3a22; border-color: #2fd070; color: #c9ffe0; }
.scan-result.bad { background: #4a1119; border-color: #ff4a62; color: #ffd6dc; }
.scan-result.warn { background: #4a3a0c; border-color: #ffd166; color: #fff0c2; }
.scan-form { display: flex; gap: 10px; margin: 12px 0; }
.scan-form input { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 14px; font: 1.1rem ui-monospace, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.cam-box { margin: 16px 0; }
.cam-view { position: relative; max-width: 520px; margin: 10px 0; border-radius: var(--radius); overflow: hidden; background: #000; }
.cam-view video { display: block; width: 100%; }
.cam-line { position: absolute; left: 6%; right: 6%; top: 50%; height: 3px; background: #ff4a62; box-shadow: 0 0 10px #ff4a62; }
.recent-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.recent-list li { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.recent-list .rt { color: var(--muted); font-variant-numeric: tabular-nums; }
.recent-list .rc { margin-left: auto; font-family: ui-monospace, Consolas, monospace; color: var(--muted); }

.mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .06em; }
.scan-field select { width: 100%; max-width: 100%; min-width: 0; }
.scan-form { flex-wrap: wrap; }
.scan-form input { flex: 1 1 220px; }
.scan-form .btn { flex: 0 0 auto; }

.status-pill.pay-cancelled { background: #5b5f6b; color: #fff; }
.log-list li { padding: 4px 0; font-size: .92rem; color: var(--muted); }

/* date / time pickers look like the other admin fields */
.acard input[type=datetime-local], .acard input[type=date], .acard input[type=time], .acard input[type=file] { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 10px 12px; font: inherit; width: 100%; min-height: 46px; color-scheme: dark; }
.acard input[type=datetime-local]:focus, .acard input[type=date]:focus, .acard select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(242,56,90,.25); }
.acard select { width: 100%; min-height: 46px; }
.acard .row { align-items: start; }
.acard .row > .check { align-self: end; min-height: 46px; }
.acard input[type=text], .acard input[type=number] { min-height: 46px; }

/* privacy policy layout */
.privacy h2 { margin-top: 2.2em; padding-top: .4em; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.privacy h3 { font-size: 1.05rem; color: var(--text); margin: 1.4em 0 .3em; }
.privacy p, .privacy li { color: #d6d2db; }
.privacy-short { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 16px 20px; margin: 20px 0; }
.privacy-short ul { margin: 8px 0 0; padding-left: 20px; }
.privacy-toc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin: 20px 0; }
.privacy-toc ol { margin: 8px 0 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.privacy-toc li { break-inside: avoid; padding: 2px 0; }
@media (max-width: 600px) { .privacy-toc ol { columns: 1; } }
.privacy table td, .privacy table th { text-align: left; vertical-align: top; text-transform: none; letter-spacing: 0; font-size: .92rem; }
.privacy table td { font-weight: 500; }
.privacy, .privacy a, .privacy td { overflow-wrap: anywhere; }

/* "Log in / Join" prompt shown in place of the message box when you are not logged in */
.join-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--panel2); }
.join-bar span { color: var(--text); font-weight: 600; }
.join-bar .btn { padding: 10px 22px; }
.chat-auth.modal .chat-error { margin: 0; }

/* slimmer player on the Listen page */
.player { padding: 10px 16px; gap: 14px; margin: 12px 0 8px; }
.play { width: 52px; height: 52px; font-size: 1.25rem; }
.play[data-state="playing"] { font-size: 1.05rem; }
.player .meta { flex: 1 1 200px; line-height: 1.35; }
.player .now-label { font-size: .72rem; letter-spacing: .1em; }
.player .now-title { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.player .meta p.small { display: inline; margin: 0 16px 0 0; font-size: .82rem; }
.player .vol { flex-direction: row; align-items: center; gap: 8px; }

/* Listen page: the whole chat (messages + message box) fits in the window without scrolling.
   The chat is as tall as the screen allows after the header, the player bar and a little room for the WhatsApp ticker below. */
.listen-page { padding-top: 14px; padding-bottom: 20px; }
:root { --chat-h: clamp(380px, calc(100vh - 380px), 860px); }
@supports (height: 100dvh) { :root { --chat-h: clamp(380px, calc(100dvh - 380px), 860px); } }
.listen-page .chatbox { margin: 14px 0 10px; }
/* a little taller than before (still fits in the window) */
:root { --chat-h: clamp(400px, calc(100vh - 325px), 920px); }
@supports (height: 100dvh) { :root { --chat-h: clamp(400px, calc(100dvh - 325px), 920px); } }

/* genre picker on the Join form: tick-able pills */
.genre-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.genre-set legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: 8px; }
.genre-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.form .pill { position: relative; display: inline-flex; cursor: pointer; }
.form .pill input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.form .pill span { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font-weight: 600; font-size: .9rem; transition: background .12s, border-color .12s; user-select: none; }
.form .pill:hover span { border-color: var(--accent); }
.form .pill input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.form .pill input:focus-visible + span { outline: 3px solid #ffd166; outline-offset: 2px; }
.genre-other { margin-top: 12px; }

/* Raw Roster application card: a tidy record, not a block of run-on text */
.app-card { gap: 18px; padding: 22px 24px; }
.app-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.app-head .photo-frame { width: 72px; }
.app-title { flex: 1 1 200px; min-width: 0; }
.app-title h3 { margin: 0; font-size: 1.35rem; }
.app-title p { margin: 2px 0 0; }
.app-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px 20px; margin: 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.app-grid dt { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
.app-grid dd { margin: 0; overflow-wrap: anywhere; }
.app-grid a { color: var(--text); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); font-size: .85rem; font-weight: 600; }
.app-bio-box { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.app-bio-label { display: block; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.app-bio-box .app-bio { margin: 0; line-height: 1.6; }
.app-card .app-actions { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 2px; gap: 14px; }
.app-card .app-actions input[type=text] { flex: 1 1 260px; }
@media (max-width: 640px) { .app-grid { grid-template-columns: 1fr; gap: 2px; } .app-grid dd { margin-bottom: 12px; } .app-card { padding: 18px 16px; } }

/* applications: collapsed rows that open into the full record */
.app-list { display: grid; gap: 10px; margin-top: 6px; }
.app-card { display: block; padding: 0; gap: 0; }
.app-sum { list-style: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; cursor: pointer; border-radius: var(--radius); }
.app-sum::-webkit-details-marker { display: none; }
.app-sum:hover { background: var(--panel2); }
.app-sum:focus-visible { outline: 3px solid #ffd166; outline-offset: -3px; }
.app-chev { color: var(--muted); transition: transform .15s; font-size: 1.1rem; width: 1ch; }
.app-card[open] .app-chev { transform: rotate(90deg); }
.app-card[open] > .app-sum { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.app-sum-main { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; line-height: 1.3; }
.app-sum-main strong { font-size: 1.05rem; }
.app-sum-tags { flex: 1 1 220px; }
.app-sum-date { white-space: nowrap; }
.app-body { display: grid; gap: 18px; padding: 20px 24px 22px; }
.app-body .app-grid { border-top: 0; padding-top: 0; }
.app-expand { display: inline-flex; gap: 16px; margin-left: auto; }
@media (max-width: 640px) { .app-body { padding: 16px; } .app-sum { padding: 12px 14px; } }
.app-sum-tags { flex-wrap: nowrap; overflow: hidden; }

/* a slot someone has applied for, waiting for approval */
.sched td.pending { background: transparent; border-style: dashed; border-color: var(--muted); color: var(--muted); font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 600; }
.cards li.pending-li { color: var(--muted); font-style: italic; }
.admin-sched input::placeholder { color: #ffd166; opacity: .85; font-style: italic; }

.art-genres { flex: 1 1 180px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-card.hidden-artist > .app-sum { opacity: .65; }
.app-sum .mini-thumb { flex: none; }

/* "Raw Kutzz Replay": when no DJ is live */
.sched td.replay { background: rgba(255,255,255,.025); color: var(--muted); font-weight: 500; font-size: .72rem; letter-spacing: .02em; text-transform: none; line-height: 1.25; }
.sched td.replay:hover { color: var(--text); }

/* DJ names on the schedule link to their bio */
.show-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.show-link:hover, .show-link:focus-visible { color: var(--accent); border-bottom-style: solid; }
.sched td.hl .show-link:hover { color: #7a0f26; }
.artist { scroll-margin-top: 90px; }
.artist:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(242,56,90,.35); }

/* artist bio pop-up on the Schedule page */
.bio-back { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 60; }
.bio-pop { position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(720px, 94vw); max-height: 90vh; overflow-y: auto; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.7); padding: 26px; }
.bio-pop[hidden] { display: none; }
.bio-x { position: absolute; top: 8px; right: 14px; background: none; border: 0; color: var(--text); font-size: 2rem; line-height: 1; cursor: pointer; z-index: 2; }
.bio-x:hover { color: var(--accent); }
.bio-photo { position: relative; aspect-ratio: 494 / 504; border-radius: 14px; overflow: hidden; background: var(--panel2); align-self: start; }
.bio-photo .bio-img { position: absolute; max-width: none; display: block; }
.bio-text h2 { margin: 0 0 4px; font-size: 1.5rem; padding-right: 28px; }
.bio-text p { color: #d6d2db; margin: 0 0 .8em; }
.bio-text .role { color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; margin: 0; }
.bio-text .genres { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1em; }
.bio-more { margin-top: 1.2em !important; font-size: .92rem; }
html.bio-open { overflow: hidden; }
@media (max-width: 640px) { .bio-pop { grid-template-columns: 1fr; padding: 20px; gap: 16px; } .bio-photo { max-width: 260px; } }

/* the bio as a small card that appears beside a DJ's name when you hover over it (mouse); touch screens get the pop-up window above */
.bio-pop.hovercard { transform: none; width: min(460px, 92vw); max-height: min(72vh, 540px); grid-template-columns: 124px minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: 14px; z-index: 70; box-shadow: 0 16px 48px rgba(0,0,0,.65); border-color: rgba(242,56,90,.45); animation: bio-in .12s ease-out; }
.bio-pop.hovercard .bio-x { display: none; }
.bio-pop.hovercard .bio-photo { border-radius: 10px; }
.bio-pop.hovercard .bio-text h2 { font-size: 1.2rem; padding-right: 0; }
.bio-pop.hovercard .bio-text p { font-size: .9rem; line-height: 1.5; }
.bio-pop.hovercard .bio-more { margin-bottom: 0; }
@keyframes bio-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bio-pop.hovercard { animation: none; } }
.show-link { cursor: help; }
@media (max-width: 560px) { .bio-pop.hovercard { grid-template-columns: 1fr; gap: 10px; } .bio-pop.hovercard .bio-photo { max-width: 110px; } }

.artist-photo.logo-ph { object-fit: contain; padding: 14%; background: radial-gradient(circle at 30% 25%, #3a1620, var(--panel2) 70%); }

.doc-logo { display: block; width: 96px; height: 96px; object-fit: contain; margin: 0 auto 12px; }
.doc-print { text-align: right; margin: 0 0 8px; }

.mav.face, .avatar.has-img.face img { object-position: 50% 22%; }
.mav.logo, .avatar.has-img.logo img { object-fit: contain; padding: 12%; background: #1b1b24; }
.cue-btn.cup, .cue-card.cup { border-color: #e056a0; } .cue-btn.cup:hover { background: #5a1740; }
.cue-card.cup { background: #5a1740; }

.player .play.attn { animation: playpulse 1.2s ease-in-out infinite; }
@keyframes playpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,56,90,.7); } 50% { box-shadow: 0 0 0 16px rgba(242,56,90,0); transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .player .play.attn { animation: none; box-shadow: 0 0 4px 4px rgba(242,56,90,.6); } }

/* admin listener charts */
.stat.static { cursor: default; } .stat.static:hover { border-color: var(--line); }
.chart { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 12px; margin: 0 0 16px; }
.chart h3 { margin: 0 0 12px; font-size: 1rem; }
.chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.chart-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; }
.chart-bar { background: linear-gradient(180deg, var(--accent), var(--accent-dark)); border-radius: 3px 3px 0 0; min-height: 2px; }
.chart-bar.none { background: var(--line); }
.chart-l { font-size: .68rem; color: var(--muted); height: 16px; line-height: 16px; white-space: nowrap; overflow: visible; margin-top: 4px; text-align: left; }

/* admin overview groups */
.stat-group { margin: 0 0 48px; }
.stat-group h3 { margin: 34px 0 6px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stat.alert { border-color: #ffb02e; background: #2a2208; } .stat.alert .stat-n { color: #ffb02e; }
.stat.clear .stat-n, .stat.good .stat-n { color: #2ecc71; }
.stat.down { border-color: #ff4d5e; background: #2a0b10; } .stat.down .stat-n { color: #ff6b7a; }   /* red = urgent: the station is off air */   /* green = all clear, or good news (people listening, sign-ups, sales) */
.stat-n.txt { font-size: 1.25rem; line-height: 1.25; min-height: 2.2rem; display: flex; align-items: center; word-break: break-word; }

/* now playing track and recently played */
.now-track { margin: 2px 0 4px; color: #ffd166; font-weight: 700; }
.mini-track { display: block; font-size: .78rem; color: #ffd166; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.recent-tracks { margin: 14px 0 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; }
.recent-tracks summary { cursor: pointer; font-weight: 700; }
.recent-list { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 6px; }
.recent-list .rt-time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }

/* Admin: collapsible sections */
details.adet { border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 10px; margin: 14px 0; background: rgba(255,255,255,.03); }
details.adet > summary { cursor: pointer; font-weight: 700; padding: 12px 14px; list-style: none; display: flex; align-items: center; gap: 8px; }
details.adet > summary::-webkit-details-marker { display: none; }
details.adet > summary::before { content: "\25B8"; transition: transform .15s; }
details.adet[open] > summary::before { transform: rotate(90deg); }
details.adet > .adet-body { padding: 0 14px 14px; }

/* Phone app: pages shown inside the Raw Kutzz app have no site menu or footer, and sit tight to the edges */
body.in-app main { padding-top: 0; }
body.in-app .wrap { padding-left: 12px; padding-right: 12px; }
body.in-app .block { padding-top: 14px; padding-bottom: 14px; }

/* Wallet buttons under a ticket (the ticket card is white) */
.wallet-btns { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px dashed #bbb; padding-top: 12px; }
.wallet-btns a.btn { background: #090a0f; color: #fff; border: 1px solid #090a0f; border-radius: 999px; padding: 9px 18px; font-weight: 700; text-decoration: none; }
.wallet-btns a.btn:hover { background: #f2385a; border-color: #f2385a; }

/* Events page */
.events-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.my-tickets { background: var(--panel, #14161d); border: 1px solid var(--line, #2a2e3a); border-left: 4px solid var(--accent, #f2385a); border-radius: 12px; padding: 4px 18px 14px; margin: 14px 0 22px; }
.my-tickets ul li { margin: 8px 0; }

/* Sending a ticket to someone else */
.xfer { flex: 1 1 100%; border-top: 1px dashed #bbb; padding-top: 10px; }
.xfer summary { cursor: pointer; font-weight: 700; }
.xfer .form { margin-top: 10px; }
.ticket .xfer .small, .ticket .xfer label { color: #333; }
.ticket-state.sent { color: #c92a49; font-weight: 800; }
.details-note { color: var(--muted); }

/* policy tables: use the full width, wrap text, no scroll bar */
.privacy.narrow-col { max-width: 980px; }
.privacy .sched { min-width: 0; table-layout: fixed; }
.privacy .sched th, .privacy .sched td { text-align: left; vertical-align: top; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .9rem; padding: 10px 12px; overflow-wrap: anywhere; }
.privacy .sched thead th { font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .1em; }
.privacy .sched-scroll { overflow-x: visible; }

/* signed-in user's picture beside "Logged in as" */
.whoami { display: inline-flex; align-items: center; gap: 10px; }
.whoami img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); background: var(--panel2); }
.whoami .ini { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--accent); color: #fff; }

/* desktop app downloads on the app page */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0 10px; }
.dl-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; align-items: flex-start; }
.dl-card h3 { margin: 0; font-size: 1.25rem; }
.dl-sub { color: var(--muted); margin: 2px 0 14px; font-size: .95rem; }
.dl-meta { color: var(--muted); font-size: .85rem; margin: 8px 0 0; }
.dl-alt { font-size: .9rem; margin: 10px 0 0; color: var(--muted); }
.dl-help { color: var(--muted); font-size: .85rem; margin: auto 0 0; padding-top: 14px; }
.dl-card .btn { padding: 11px 26px; }
.dl-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.dl-table td { padding: 8px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.dl-table tr:first-child td { border-top: 0; }
.dl-table td:first-child b { display: block; }
.dl-table td:first-child span { color: var(--muted); font-size: .82rem; }
.dl-table td:last-child { text-align: right; white-space: nowrap; }
.dl-table td:last-child a { display: inline-block; margin-left: 8px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; font-weight: 700; text-decoration: none; }
.dl-table td:last-child a:hover { border-color: var(--accent); }
@media (max-width: 900px) { .dl-grid { grid-template-columns: 1fr; } }
.dl-grid.dl-two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .dl-grid.dl-two { grid-template-columns: 1fr; } }

/* "Windows protected your PC" explanation and download fingerprints */
.dl-why { margin: 12px 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.dl-why summary { cursor: pointer; font-weight: 700; }
.dl-why[open] summary { margin-bottom: 8px; }
.dl-why ol { margin: 6px 0 10px 20px; padding: 0; }
.dl-why p { margin: 6px 0; }
.dl-why .dl-table td span { font: .8rem ui-monospace, Consolas, monospace; }

/* Admin: small pop-up window (Send settings) */
.rk-modal-back { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rk-modal { width: min(460px, 100%); max-height: 92vh; overflow: auto; background: var(--panel, #11131a); border: 1px solid var(--border, #2a2e3a); border-radius: 16px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.rk-modal h3 { margin: 0 0 8px; }
.rk-modal label { display: block; margin: 12px 0 6px; }
.rk-modal input[type=email] { width: 100%; }
.rk-modal .row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* chat messages as speech bubbles: others on the left (grey), you on the right (blue), name and time above the bubble */
.msg { border-bottom: 0; padding: 7px 0; align-items: flex-end; }
.msg .mav { margin-top: 0; margin-bottom: 2px; width: 38px; height: 38px; }
.msg-main { flex: 0 1 auto; min-width: 0; max-width: 82%; margin-right: auto; background: none; border: 0; padding: 0; box-shadow: none; }
.msg-head { margin: 0 0 3px 4px; color: #e6e6ec; font-size: .86rem; gap: 6px; }
.msg-head .time { color: #d6d6de; font-size: .82rem; }
.msg-body { margin: 0; font-size: 1.04rem; line-height: 1.3; }
.bubble { position: relative; display: inline-block; max-width: 100%; text-align: left; background: rgba(104,104,110,.94); color: #fff; padding: 8px 15px 9px; border-radius: 19px 19px 19px 5px; }
.bubble::after { content: ""; position: absolute; left: -6px; bottom: 0; width: 14px; height: 14px; background: rgba(104,104,110,.94); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.msg.mine { flex-direction: row-reverse; }
.msg.mine .msg-main { margin-right: 0; margin-left: auto; text-align: right; }
.msg.mine .msg-head { justify-content: flex-end; margin: 0 4px 3px 0; }
.msg.mine .msg-head .msg-actions { margin-left: 0; }
.msg.mine .bubble { background: #0a2bff; border-radius: 19px 19px 5px 19px; }
.msg.mine .bubble::after { left: auto; right: -6px; background: #0a2bff; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.bubble .reply-quote { display: block; width: 100%; background: rgba(0,0,0,.3); border: 0; border-radius: 12px; padding: 6px 11px; margin: 0 0 6px; color: #fff; font-size: .98rem; }
.bubble .reply-quote.gone { color: #dadae2; }
.bubble .chat-gif, .bubble .chat-img { border-radius: 12px; max-width: 100%; display: block; }
.msg.mentioned { background: transparent; border-left: 0; margin-left: 0; padding-left: 0; }
.msg.mentioned .bubble { outline: 2px solid rgba(242,56,90,.85); }
.msg.cue-msg .bubble { background: transparent; padding: 0; }
.msg.cue-msg .bubble::after { display: none; }
/* the message bar: + (pictures) on the left, then the box, GIF, emoji and Send */
.chat-send { align-items: center; }
.chat-send [data-pic-btn] { order: -1; font-size: 1.7rem; font-weight: 700; line-height: 1; padding: 0 6px; }
.chat-send input[name=body] { order: 0; }
.chat-send .gif-btn { order: 1; } .chat-send [data-emoji-btn]:not(.gif-btn):not([data-pic-btn]) { order: 2; } .chat-send button[type=submit] { order: 3; }

/* "What's new" pop-ups under each application */
.cl-open { margin-top: 8px; }
.cl-dialog { width: min(520px, calc(100vw - 32px)); max-height: 82vh; overflow: auto; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); }
.cl-dialog::backdrop { background: rgba(0,0,0,.65); }
.cl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cl-head h2 { font-size: 1.1rem; margin: 0; }
.cl-close { background: none; border: 0; color: var(--text); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.cl-ver { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 8px 0; }
.cl-ver summary { cursor: pointer; } .cl-ver summary span { color: var(--muted); font-size: .9rem; margin-left: 6px; }
.cl-ver ul { margin: 8px 0 2px 18px; padding: 0; } .cl-ver li { margin: 4px 0; }

/* Admin: crash reports */
.crash-stack { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: .8rem/1.4 ui-monospace, Consolas, monospace; }

/* the message bar on a narrow screen (phones): the box gets a line of its own and is bigger; the buttons sit below it */
@media (max-width: 560px) {
  .chat-send { flex-wrap: wrap; gap: 8px; }
  .chat-send input[name=body] { flex: 1 1 100%; order: -2; min-height: 50px; font-size: 1.05rem; padding: 13px 18px; }
  .chat-send [data-pic-btn] { order: -1; }
  .chat-send .gif-btn, .chat-send [data-emoji-btn] { order: 0; }
  .chat-send button[type=submit] { order: 1; margin-left: auto; min-width: 7.5rem; }
}

/* Join form: a field with a problem is outlined in red and says what is wrong under it */
.field-bad input:not([type=checkbox]), .field-bad select, .field-bad textarea { border-color: #f2385a !important; box-shadow: 0 0 0 2px rgba(242,56,90,.35); }
fieldset.field-bad { border-color: #f2385a; box-shadow: 0 0 0 2px rgba(242,56,90,.35); border-radius: 12px; }
label.check-line.field-bad { outline: 2px solid #f2385a; outline-offset: 4px; border-radius: 8px; }
.field-msg { display: block; color: #ff7a90; font-size: .88rem; font-weight: 600; margin-top: 4px; }

/* Tickets saved on the phone (events page): spacing between the saved cards */
.saved-tix .ticket { margin: 10px 0; }

/* Chat: people online, offered when you type @ in the message box */
.chat-send { position: relative; }
.mention-suggest { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); margin: 0; padding: 6px; list-style: none; background: var(--panel, #14161d); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 -6px 22px rgba(0, 0, 0, .45); z-index: 30; max-height: 260px; overflow-y: auto; }
.mention-suggest[hidden] { display: none; }
.mention-suggest button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 10px; border-radius: 10px; font: inherit; cursor: pointer; }
.mention-suggest button:hover, .mention-suggest button.on { background: rgba(242, 56, 90, .18); }
.mention-suggest .sn { font-weight: 700; }
.mention-suggest .sr { margin-left: auto; font-size: .78rem; color: var(--muted, #a39fab); }
.mention-suggest img, .mention-suggest .av { width: 28px; height: 28px; border-radius: 50%; flex: none; }

/* a booked duo show (two DJs at once) in the schedule */
.sched td.duo { box-shadow: inset 0 0 0 2px var(--accent); }
.duo-coming { margin: 0 0 .6rem; padding: .55rem .8rem; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, .04); border-radius: 0 8px 8px 0; }

/* duo show booking: the day's slots */
.duo-slots { margin: .4rem 0 .8rem; display: grid; gap: .25rem; }
.duo-slot.duo-show span { color: #ffd166; }
.duo-slot.duo-duo span, .duo-slot.duo-past span { color: var(--muted); }

/* Show password button next to a password box */
.pw-wrap { display: flex; gap: 8px; align-items: stretch; }
.pw-wrap > input { flex: 1; min-width: 0; }
.pw-toggle { background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); padding: 0 12px; font: inherit; font-size: .85rem; cursor: pointer; }
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--text); border-color: var(--text); }

/* the "Report this message" pop-up in the chat */
.report-back { z-index: 10001; }
.report-reasons { display: grid; gap: 4px; margin: 6px 0 10px; }
.report-reason { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 8px 10px; border: 1px solid var(--border, #2a2e3a); border-radius: 10px; cursor: pointer; }
.report-reason:hover { border-color: var(--accent, #f2385a); }
.report-reason input { width: 18px; height: 18px; accent-color: var(--accent, #f2385a); }
.rk-modal textarea { width: 100%; box-sizing: border-box; background: var(--bg, #090a0f); color: inherit; border: 1px solid var(--border, #2a2e3a); border-radius: 10px; padding: 10px 12px; font: inherit; }

/* the Messages, Reported messages, Email log and DJ message pages */
.adet-body textarea, .adet-body input[type=text], .acard input[type=email], .acard input[type=search], .acard textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 10px 12px; font: inherit; width: 100%; box-sizing: border-box; }
.adet-body textarea { min-height: 120px; }
.acard input[type=email] { width: auto; }
.acard textarea { min-height: 150px; }

/* ---- chat polls, listening streaks and badges ---- */
.chat-poll { margin: 8px 12px; padding: 12px 14px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; }
.chat-poll .poll-head { margin-bottom: 8px; }
.poll-opt { position: relative; display: flex; justify-content: space-between; gap: 10px; align-items: center; width: 100%; margin: 6px 0; padding: 9px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; text-align: left; overflow: hidden; }
button.poll-opt { cursor: pointer; }
button.poll-opt:hover { border-color: var(--accent); }
.poll-opt.mine { border-color: var(--accent); }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(242, 56, 90, .28); transition: width .4s; }
.poll-text, .poll-pct { position: relative; }
.poll-pct { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.poll-foot { margin-top: 6px; }
.poll-pop { display: flex; flex-direction: column; gap: 8px; max-height: none; overflow: visible; }
.poll-pop[hidden] { display: none; }
.poll-pop:not([hidden]) { position: fixed; z-index: 1000; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 420px); max-height: 88vh; overflow-y: auto; margin: 0; padding: 16px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .65), 0 12px 40px rgba(0, 0, 0, .6); }
.poll-top { display: flex; justify-content: space-between; align-items: center; }
.poll-top .pp-x { position: static; }
.poll-pop input, .poll-pop select { width: 100%; padding: 9px 10px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.poll-pop [data-poll-opts] { display: flex; flex-direction: column; gap: 6px; }
.ubadge { font-size: .95em; }
.pp-listen { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: center; }
.pp-streak { font-weight: 700; margin-bottom: 4px; }
.pp-badge { margin: 3px 0; }


/* ---- Admin: Studio level ---- */
.level-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 8px 0; }
.level-big { font-size: 2rem; font-weight: 800; min-width: 7ch; }
.level-big.ok, .level-word.ok { color: #2FBF71; }
.level-big.warn, .level-word.warn { color: #FFD166; }
.level-big.bad, .level-word.bad { color: #F2385A; }
.level-bar { height: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 6px 0 10px; }
.level-fill { display: block; height: 100%; width: 0; background: var(--muted); transition: width .25s; }
.level-fill.ok { background: #2FBF71; } .level-fill.warn { background: #FFD166; } .level-fill.bad { background: #F2385A; }
.level-canvas { width: 100%; height: auto; max-width: 720px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; display: block; }

/* ---- read receipts in private chats ---- */
.rcpt { font-size: 1.05em; font-weight: 700; color: var(--muted); letter-spacing: -3px; margin-left: 6px; }
.rcpt.seen { color: #5B9BFF; }

/* ---- listening streak beside a name ---- */
.streak-tag { margin-left: 4px; white-space: nowrap; }
.streak-tag .streak { font-size: .78em; font-weight: 700; color: #ffb020; margin-right: 3px; }
.msg-head .who { white-space: nowrap; }

/* Stripe checkout: the Google Pay / Apple Pay button, then "or pay by card" */
.pay-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; color: var(--muted, #9a96a6); font-size: .9rem; }
.pay-or::before, .pay-or::after { content: ''; flex: 1; border-top: 1px solid var(--line, #2a2e3a); }
[data-stripe-express] { min-height: 0; }
[data-stripe-card] { margin: 10px 0 14px; }

/* GIF picker: music categories */
.gif-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.gif-chip { border: 1px solid var(--line, #2a2e3a); background: transparent; color: var(--text, #ece9ef); border-radius: 999px; padding: 4px 12px; font-size: .85rem; cursor: pointer; }
.gif-chip:hover { border-color: var(--accent, #f2385a); }
.gif-chip.on { background: var(--accent, #f2385a); border-color: var(--accent, #f2385a); color: #fff; }

/* ---- the chat inside the phone app: a calmer look (the website's chat is unchanged) ---- */
body.in-app .chatbox { margin: 0 -12px 8px; border-radius: 0; border-left: 0; border-right: 0; }
/* the action icons (reply, react, report, delete) appear when a message is tapped, not on every message */
body.in-app .msg-actions, body.in-app .msg-head .del { display: none; }
body.in-app .msg.tapped .msg-actions { display: inline-flex; opacity: 1; }
body.in-app .msg.tapped .msg-head .del { display: inline-block; }
/* messages grouped by sender: name and time once, the picture on the last message of the group */
body.in-app .msg.cont { padding-top: 1px; }
body.in-app .msg.cont .msg-head { display: none; }
body.in-app .msg.cont.tapped .msg-head { display: flex; }
body.in-app .msg.has-next { padding-bottom: 1px; }
body.in-app .msg.has-next .mav { visibility: hidden; }
body.in-app .msg.has-next .bubble::after { display: none; }
body.in-app .msg.has-next .bubble { border-bottom-left-radius: 19px; }
body.in-app .msg.mine.has-next .bubble { border-bottom-right-radius: 19px; }
body.in-app .msg.tapped .bubble { outline: 1px solid rgba(255,255,255,.28); }
/* the slim bar at the top of the app's chat: more room for the chat's name, smaller links */
body.in-app .chat-bar { gap: 6px; padding: 4px 8px; }
body.in-app .chat-bar .bar-pill { padding: 5px 10px; font-size: .84rem; }
body.in-app .chat-actions { gap: 8px; flex: none; }
body.in-app .chat-actions .link { font-size: .78rem; }
body.in-app .chat-actions .who-btn { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.in-app .bar-name { font-size: .95rem; }

/* GIF picker as a pop-up over the chat, centred, on every device */
.gif-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.62); z-index: 1190; }
.emoji-pop.gif-pop, .emoji-pop[data-emoji-pop] { position: fixed; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 24px)); max-height: min(82vh, 680px); overflow-y: auto; z-index: 1200; margin: 0; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.7); }
@supports (height: 100dvh) { .emoji-pop.gif-pop, .emoji-pop[data-emoji-pop] { max-height: min(82dvh, 680px); } }
.gif-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.gif-x { position: static; font-size: 1.5rem; line-height: 1; padding: 2px 10px; }
.gif-pop .gif-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.gif-pop .gif-grid button { height: 96px; }
body.gif-open { overflow: hidden; }

/* the poll: one line until tapped, so it does not take a third of the screen */
/* (on every screen width) */
.chat-poll { flex: none; margin: 6px 8px; padding: 7px 12px; max-height: 56vh; overflow: hidden; }
.chat-poll.open { overflow-y: auto; }
.chat-poll .poll-head { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.chat-poll .poll-head strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.chat-poll .poll-by { display: none; }
.chat-poll .poll-mini { display: inline; flex: none; white-space: nowrap; }
.chat-poll .poll-chev { display: inline; flex: none; transition: transform .15s; }
.chat-poll.open .poll-chev { transform: rotate(180deg); }
.chat-poll:not(.open) .poll-opt, .chat-poll:not(.open) .poll-foot { display: none; }
.chat-poll.open .poll-head { margin-bottom: 4px; }
.chat-poll .poll-opt { margin: 4px 0; padding: 7px 11px; }
.chat-poll .poll-foot { margin-top: 4px; }

/* GIFs inside chat messages are smaller on a phone (and in the app), so a screen shows several messages, not two GIFs */
@media (max-width: 720px) {
  .bubble .chat-gif { max-width: min(100%, 200px); max-height: 160px; width: auto; height: auto; }
}
body.in-app .bubble .chat-gif { max-width: min(100%, 200px); max-height: 160px; width: auto; height: auto; }