/* ─── miaoRadio · dot-matrix terminal aesthetic ─────────────────────────── */

:root {
  --font-display: 'Doto', ui-monospace, monospace;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: 'Newsreader', 'Times New Roman', Georgia, serif;

  --frame-w: 880px;
  --panel-pad-x: 24px;
  --panel-pad-y: 18px;
}

:root,
:root[data-theme="dark"] {
  --bg: #050505;
  --panel: #0c0c0e;
  --grid: #1a1a1a;
  --text: #ececec;
  --text-dim: #7a7a7a;
  --text-faint: #3a3a3a;
  --line: #1f1f22;
  --line-bright: #2a2a2e;
  --accent: #5dffa1;
  --accent-glow: rgba(93, 255, 161, 0.28);
  --accent-dim: rgba(93, 255, 161, 0.06);
  --shadow: 0 0 0 1px var(--line) inset;
}

:root[data-theme="light"] {
  --bg: #f2efe5;
  --panel: #faf8ee;
  --grid: #dcd8c8;
  --text: #14140f;
  --text-dim: #7a7570;
  --text-faint: #c8c3b3;
  --line: #d4cebd;
  --line-bright: #b9b29f;
  --accent: #008a4a;
  --accent-glow: rgba(0, 138, 74, 0.22);
  --accent-dim: rgba(0, 138, 74, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body { padding-bottom: 120px; position: relative; overflow-x: hidden; }

/* full-page dot grid */
.grid-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--grid) 1px, transparent 0);
  background-size: 14px 14px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 60%, transparent 100%);
  opacity: 0.7;
}

.frame {
  position: relative;
  z-index: 1;
  max-width: var(--frame-w);
  margin: 0 auto;
  padding: 28px 16px calc(20px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* The DJ conversation surface always docks at the bottom of the viewport,
   so when you read "Tell me what to play…" the input is right under it.
   Anything above it (queue, controls, hero) sits in normal flow above. */
.frame > .dj-panel { margin-top: auto; }

/* ─── TOP BAR ──────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 24px 24px;
  gap: 16px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 60px);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text);
  user-select: none;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.badge {
  padding: 8px 12px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.theme-toggle, .lang-toggle { display: flex; }
.theme-btn, .lang-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  padding: 9px 14px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.theme-btn + .theme-btn, .lang-btn + .lang-btn { border-left: 0; }
.theme-btn:hover, .lang-btn:hover { color: var(--text); }
.theme-btn.active, .lang-btn.active {
  background: var(--text);
  color: var(--bg);
}
.theme-btn:focus-visible, .lang-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ─── PANELS w/ corner registration marks ─────────────────────────────── */

.panel {
  position: relative;
  background-color: var(--panel);
  border: 1px solid var(--line);
  margin-bottom: 10px;
  background-image:
    radial-gradient(circle at 9px 9px, var(--text-faint) 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, var(--text-faint) 1px, transparent 1.5px),
    radial-gradient(circle at 9px calc(100% - 9px), var(--text-faint) 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--text-faint) 1px, transparent 1.5px);
}

/* ─── HERO / CLOCK ─────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding: 44px 24px 30px;
  text-align: center;
  background-image:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0),
    radial-gradient(circle at 9px 9px, var(--text-faint) 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, var(--text-faint) 1px, transparent 1.5px),
    radial-gradient(circle at 9px calc(100% - 9px), var(--text-faint) 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--text-faint) 1px, transparent 1.5px);
  background-size: 12px 12px, auto, auto, auto, auto;
  background-position: 0 0, top left, top right, bottom left, bottom right;
}
.hero-shader {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  /* Light theme makes the dark shader output too dim — invert it. */
}
[data-theme="light"] .hero-shader { filter: invert(1) hue-rotate(180deg); }
.hero > .clock,
.hero > .date-stack,
.hero > .air-status { position: relative; z-index: 1; }

.clock {
  font-family: var(--font-display);
  font-size: clamp(80px, 16vw, 138px);
  font-weight: 500;
  letter-spacing: 0.045em;
  line-height: 0.92;
  color: var(--text);
  user-select: none;
  font-variant-numeric: tabular-nums;
}

.date-stack { margin-top: 22px; }

.weekday {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--text);
  letter-spacing: 0.01em;
}

.ymd {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.air-status {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}

.air-dot {
  width: 8px; height: 8px;
  background: var(--text-faint);
  border-radius: 50%;
  transition: background .25s ease;
}

.air-status.on .air-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  animation: pulse 1.6s ease infinite;
}
.air-status.on .air-label { color: var(--accent); }
.air-status.on .air-label::before { content: 'ON AIR'; }
.air-status:not(.on) .air-label::before { content: 'OFF AIR'; }
.air-status .air-label { font-size: inherit; }
.air-status .air-label { display: inline-block; min-width: 6em; text-align: left; }

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px var(--accent-dim); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 6px transparent; }
}

/* hide native label since we render via ::before */
.air-status .air-label { font-size: 0; letter-spacing: 0; }
.air-status .air-label::before { font-size: 12px; letter-spacing: 0.22em; }

/* ─── NOW PLAYING ─────────────────────────────────────────────────────── */

.now-panel { padding: 0; }

.np-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  border-bottom: 1px dotted var(--line-bright);
}

.np-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.np-text { min-width: 0; }

.np-title {
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.np-state {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* bars (audio visualizer) */
.bars {
  display: inline-flex;
  gap: 2.5px;
  align-items: flex-end;
  height: 18px;
  width: 22px;
  flex-shrink: 0;
}
.bars span {
  width: 3px;
  background: var(--text-dim);
  height: 30%;
  transition: height .15s ease, background .2s;
}
.bars.playing span { background: var(--accent); }
.bars.playing span:nth-child(1) { animation: b1 0.7s ease infinite alternate; }
.bars.playing span:nth-child(2) { animation: b2 0.55s ease 0.1s infinite alternate; }
.bars.playing span:nth-child(3) { animation: b3 0.75s ease 0.05s infinite alternate; }
.bars.playing span:nth-child(4) { animation: b4 0.5s ease 0.2s infinite alternate; }
@keyframes b1 { from { height: 20%; } to { height: 95%; } }
@keyframes b2 { from { height: 35%; } to { height: 70%; } }
@keyframes b3 { from { height: 25%; } to { height: 100%; } }
@keyframes b4 { from { height: 45%; } to { height: 60%; } }

.bars.sm { height: 12px; width: 16px; gap: 2px; }
.bars.sm span { width: 2px; }

/* controls */
.controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.ctrl {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  width: 34px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.ctrl + .ctrl { border-left: 0; }
.ctrl svg { width: 14px; height: 14px; fill: currentColor; }
.ctrl:hover { background: var(--line); }
.ctrl:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; z-index: 1; }
.ctrl.ghost {
  width: auto;
  padding: 0 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}
.ctrl.ghost:hover { color: var(--text); }
.ctrl[disabled] { opacity: 0.35; cursor: not-allowed; }

.volume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.vol-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}
#volSlider {
  -webkit-appearance: none; appearance: none;
  width: 70px; height: 2px;
  background: var(--line-bright);
  cursor: pointer;
  outline: none;
}
#volSlider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 6px; height: 14px;
  background: var(--text);
  cursor: pointer;
  border-radius: 0;
}
#volSlider::-moz-range-thumb {
  width: 6px; height: 14px;
  background: var(--text);
  border: 0; border-radius: 0;
  cursor: pointer;
}

/* progress */
.progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 24px 14px;
}
.time {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.track-bar {
  height: 4px;
  position: relative;
  background-image: radial-gradient(circle at 1px 1px, var(--text-faint) 1px, transparent 0);
  background-size: 4px 4px;
  background-position: center;
  background-repeat: repeat-x;
}
.track-bar::before {
  content: '';
  position: absolute;
  inset: 1px 0;
  background: var(--line-bright);
  height: 1px;
  top: 50%;
}
.track-fill {
  position: absolute;
  left: 0; top: 50%;
  height: 1px;
  background: var(--accent);
  width: 0%;
  box-shadow: 0 0 6px var(--accent-glow);
  transition: width .25s linear;
}

/* ─── SECTION HEAD (QUEUE / etc) ──────────────────────────────────────── */

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px dotted var(--line-bright);
}
.section-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--text);
}
.section-count {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}

/* ─── QUEUE ───────────────────────────────────────────────────────────── */

.queue {
  list-style: none;
  padding: 6px 0 10px;
}
.queue li {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 11px 24px 11px 18px;
  font-size: 13px;
  color: var(--text-dim);
  position: relative;
}
.queue li + li { border-top: 1px dotted var(--line); }

.queue li .qidx {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.queue li .qtitle {
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue li .qartist {
  color: var(--text-faint);
  font-size: 12px;
  white-space: nowrap;
}

.queue li.current {
  color: var(--text);
  background: var(--accent-dim);
}
.queue li.current::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
}
.queue li.current .qidx { color: var(--accent); }
.queue li.current .qtitle { color: var(--text); }
.queue li.current .qtitle::before {
  content: '\25B6';
  margin-right: 8px;
  color: var(--accent);
  font-size: 10px;
  vertical-align: 1px;
}

.queue-empty {
  padding: 18px 24px;
  color: var(--text-faint);
  font-style: italic;
  font-size: 12px;
}

/* ─── DJ PANEL ────────────────────────────────────────────────────────── */

.dj-panel { padding: 0; }

.dj-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px dotted var(--line-bright);
}
.brand-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.brand-dot {
  width: 8px; height: 8px;
  border: 1px solid var(--text);
  border-radius: 50%;
}

.dj-body {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  padding: 20px 24px 14px;
  align-items: start;
}

.avatar {
  width: 64px;
  height: 64px;
  border: 1px solid var(--line-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-dim);
  position: relative;
}
.avatar::before, .avatar::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 1px;
  background: var(--text-faint);
}
.avatar::before { top: -1px; left: -1px; box-shadow: 56px 0 0 var(--text-faint), 0 64px 0 var(--text-faint), 56px 64px 0 var(--text-faint); }
.avatar svg { width: 42px; height: 42px; }
.avatar svg .eye { fill: var(--bg); }

.dj-msg { min-width: 0; }
.dj-tag {
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.dj-text {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--text);
  letter-spacing: 0.005em;
}
.dj-text .quote-mark {
  color: var(--text-faint);
  font-size: 24px;
  vertical-align: -3px;
  margin: 0 2px;
}

/* ─── IFRAME (collapsible) ────────────────────────────────────────────── */

.iframe-wrap {
  position: relative;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  background-image:
    radial-gradient(circle at 9px 9px, var(--text-faint) 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, var(--text-faint) 1px, transparent 1.5px),
    radial-gradient(circle at 9px calc(100% - 9px), var(--text-faint) 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--text-faint) 1px, transparent 1.5px);
  overflow: hidden;
  height: 280px;
  transition: height .2s ease;
}
.iframe-wrap.hidden { height: 0; border: 0; margin: 0; }
#iframeContainer { width: 100%; height: 100%; }

/* ─── META (debug-ish) ────────────────────────────────────────────────── */

.meta {
  padding: 14px 4px 0;
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1em;
}

/* ─── CHAT FORM (inline inside .dj-panel; the DJ talks above, you answer here) ──
   Sits flush against the DJ message so the prompt "Tell me what to play…"
   and the input feel like one continuous breath. The dotted divider above
   matches the existing dotted-line motif used throughout the radio. */

.chat-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 4px 24px 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-family: inherit;
  /* corner-tick marks on the input box echo the panel's registration marks,
     framing the prompt like a terminal cell */
  background-image:
    linear-gradient(var(--text-faint), var(--text-faint)),
    linear-gradient(var(--text-faint), var(--text-faint)),
    linear-gradient(var(--text-faint), var(--text-faint)),
    linear-gradient(var(--text-faint), var(--text-faint));
  background-size: 6px 1px, 1px 6px, 6px 1px, 1px 6px;
  background-position: top left, top left, bottom right, bottom right;
  background-repeat: no-repeat;
}
.chat-form:focus-within { border-color: var(--text-dim); }
.chat-form > * { position: relative; z-index: 1; }

.prompt-glyph {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 18px;
  margin-right: 10px;
  width: 14px;
  line-height: 1;
  animation: caret-pulse 1.4s ease-in-out infinite;
}
@keyframes caret-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

#chatInput {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 8px 0;
  outline: none;
}
#chatInput::placeholder { color: var(--text-faint); letter-spacing: 0.01em; }

#sendBtn {
  background: transparent;
  border: 1px solid var(--line-bright);
  color: var(--text-dim);
  padding: 8px 16px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.22em;
  cursor: pointer;
  transition: all .15s;
}
#sendBtn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
#sendBtn:disabled { opacity: 0.4; cursor: wait; }

/* ─── DJ AUDIO (hidden) ───────────────────────────────────────────────── */

#djAudio { display: none; }

/* ─── RESPONSIVE ──────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .frame { padding: 20px 12px 0; }
  .topbar { padding: 4px 8px 18px; gap: 10px; flex-wrap: wrap; }
  .wordmark { font-size: 36px; }
  .hero { padding: 32px 16px 22px; }
  .clock { font-size: 16vw; }
  .np-row { grid-template-columns: 1fr; padding: 14px 16px; gap: 14px; }
  .controls { flex-wrap: wrap; }
  .volume { padding-left: 8px; margin-left: 0; }
  #volSlider { width: 60px; }
  .dj-body { grid-template-columns: 56px 1fr; gap: 14px; padding: 16px; }
  .avatar { width: 52px; height: 52px; }
  .avatar svg { width: 34px; height: 34px; }
  .dj-text { font-size: 17px; }
  .queue li { grid-template-columns: 24px 1fr auto auto; gap: 10px; padding: 10px 16px; }
  .queue li .qartist { font-size: 11px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
  .progress { padding: 8px 16px 14px; }
  .chat-form { margin: 4px 16px 16px; padding: 10px 12px; }
}

/* ─── ERROR STATE ─────────────────────────────────────────────────────── */
.dj-text.error { color: var(--accent); font-family: var(--font-mono); font-size: 13px; }

/* ─── AUTH PILL ───────────────────────────────────────────────────────── */
.auth-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line);
  padding: 4px 10px; height: 28px;
  font-family: var(--font-mono); font-size: 11px;
  background: var(--panel);
}
.auth-name { letter-spacing: .04em; color: var(--text); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--text); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; padding: 0; text-transform: uppercase;
}
.auth-btn:hover { color: var(--accent); }

/* ─── LOGIN MODAL ─────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--panel); border: 1px solid var(--line);
  width: 100%; max-width: 380px; padding: 24px;
  font-family: var(--font-mono); color: var(--text);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-title { font-size: 12px; letter-spacing: .12em; color: var(--text-faint); }
.modal-close {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-faint); font-size: 22px; line-height: 1; padding: 0;
}
.modal-close:hover { color: var(--text); }
.modal-lede { font-size: 13px; color: var(--text-faint); margin: 0 0 16px; line-height: 1.5; }
.modal-error {
  font-size: 12px; padding: 8px 10px; margin-bottom: 12px;
  border: 1px solid var(--accent); color: var(--accent);
  background: rgba(255,80,80,.06);
}
.modal-label { display: block; font-size: 10px; letter-spacing: .14em; color: var(--text-faint); margin-bottom: 6px; }
#inviteCode {
  width: 100%; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--text); font-family: var(--font-mono); font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase;
  box-sizing: border-box;
}
#inviteCode:focus { outline: none; border-color: var(--text); }
.invite-status { font-size: 11px; min-height: 16px; margin: 6px 0 14px; letter-spacing: .04em; }
.invite-status.ok { color: #5cb85c; }
.invite-status.bad { color: var(--accent); }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px;
  background: var(--text); color: var(--bg);
  border: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  cursor: pointer; font-weight: 600;
}
.google-btn:disabled { opacity: .35; cursor: not-allowed; }
.google-btn:not(:disabled):hover { background: var(--accent); color: var(--bg); }

/* ─── SETTINGS MODAL ──────────────────────────────────────────────────── */
.settings-card { max-width: 520px; max-height: 92vh; overflow-y: auto; }
.settings-section-title {
  font-size: 10px; letter-spacing: .16em; color: var(--text-faint);
  margin: 22px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.settings-section-title:first-of-type { margin-top: 4px; }
.settings-help {
  font-size: 12px; color: var(--text-faint); margin: 0 0 14px; line-height: 1.5;
}
#settingsForm textarea,
#settingsForm input[type="text"],
#settingsForm input {
  width: 100%; padding: 9px 11px; margin-bottom: 8px;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--text); font-family: var(--font-mono); font-size: 13px;
  box-sizing: border-box; resize: vertical;
}
#settingsForm textarea { line-height: 1.5; min-height: 80px; }
#settingsForm input:focus, #settingsForm textarea:focus {
  outline: none; border-color: var(--text);
}
.calendar-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; margin-bottom: 4px;
}
.calendar-status { font-size: 12px; color: var(--text-faint); flex: 1; }
.calendar-btn {
  background: transparent; border: 1px solid var(--line);
  color: var(--text); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; padding: 6px 12px; cursor: pointer;
}
.calendar-btn:hover { border-color: var(--text); }
.settings-actions { margin-top: 18px; text-align: center; }

/* Printer-style status ticker that prints below the SAVE button after a
   successful save. Stays in the same visual neighborhood as the action
   the user just took, so mobile users see confirmation without scrolling. */
.save-ticker {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 10px;
  border: 1px dashed var(--accent);
  background: var(--accent-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  position: relative;
}
.save-ticker[hidden] { display: none; }
.save-ticker .tk-dot {
  width: 7px; height: 7px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--accent-dim);
  animation: tk-pulse 0.9s ease-in-out infinite;
}
.save-ticker .tk-label { font-weight: 500; }
.save-ticker .tk-time {
  color: var(--text-dim);
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  padding-left: 4px;
  border-left: 1px dotted var(--line-bright);
}
.save-ticker.ticking { animation: tk-print .55s steps(24, end); }
@keyframes tk-print {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes tk-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
/* Fade the whole ticker out near the end of its lifetime so it doesn't
   pop off. The 2.4s in JS gives this fade ~400ms of room. */
.save-ticker.ticking { animation: tk-print .55s steps(24, end), tk-out .35s ease-in 2.05s forwards; }
@keyframes tk-out {
  to { opacity: 0; transform: translateY(-2px); }
}
.modal-success {
  font-size: 12px; padding: 8px 10px; margin-bottom: 12px;
  border: 1px solid #5cb85c; color: #5cb85c; background: rgba(92,184,92,.06);
}

/* ─── REACTION BUTTONS ────────────────────────────────────────────────── */
.queue li { position: relative; }
.qreact {
  display: inline-flex; gap: 4px; align-items: center;
  margin-left: auto;
}
.rx-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-faint);
  width: 26px; height: 24px;
  font-size: 12px; line-height: 1;
  cursor: pointer;
  font-family: var(--font-mono);
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .1s, border-color .1s, background .1s;
}
.rx-btn:hover { color: var(--text); border-color: var(--text); }
.rx-btn.on { color: var(--accent); border-color: var(--accent); }
.rx-btn.on.bad { color: #ff5050; border-color: #ff5050; background: rgba(255,80,80,.08); }
@media (max-width: 600px) {
  .rx-btn { width: 30px; height: 28px; font-size: 13px; }
  .queue li .qartist { display: none; }
}

/* ─── LOADING STATES ──────────────────────────────────────────────────── */
.queue li.queue-skeleton {
  opacity: .6;
  color: var(--text-faint);
}
.queue li.queue-skeleton .qidx { color: var(--text-faint); }
.skel-bar {
  display: inline-block;
  height: 10px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--line) 60%, transparent) 0%,
    color-mix(in srgb, var(--text-faint) 80%, transparent) 50%,
    color-mix(in srgb, var(--line) 60%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s linear infinite;
  border-radius: 1px;
  vertical-align: middle;
}
.skel-title { width: min(70%, 240px); }
.skel-artist { width: 80px; }
.skel-btn { width: 22px; height: 22px; margin-right: 2px; }
@keyframes skel-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Animated dots on the DJ patter while thinking */
.dj-text.thinking #djSayText::after {
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: thinking-dots 1.4s steps(4, end) infinite;
  content: '';
}
@keyframes thinking-dots {
  0%        { content: ''; }
  25%       { content: '.'; }
  50%       { content: '..'; }
  75%, 100% { content: '...'; }
}

/* Saved-state flash for the settings SAVE button — green tint + checkmark
   for ~2s, scoped to .google-btn so it doesn't bleed elsewhere. */
.google-btn.saved-flash {
  background: #5cb85c;
  color: #fff;
  transition: background .2s ease, color .2s ease;
}
.google-btn.saved-flash:hover { background: #5cb85c; color: #fff; }

/* ─── ACCOUNT CARD (top of settings modal) ────────────────────────────
   Broadcast-station identity strip: pulsing live-dot, identity in mono,
   sign-out as a ghost action that flares red on hover so it feels like a
   considered exit, not an accidental click. */
.account-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin: 0 0 18px;
  border: 1px solid var(--line-bright);
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 4px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 1px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 4px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 1px 4px no-repeat,
    var(--bg);
  color: var(--text-faint);
  position: relative;
}
.account-dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--accent-dim);
  flex-shrink: 0;
  animation: account-pulse 2s ease-in-out infinite;
}
@keyframes account-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 4px var(--accent-dim); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 7px transparent; }
}
.account-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.account-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.account-email {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-out {
  background: transparent;
  border: 1px solid var(--line-bright);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 7px 12px;
  cursor: pointer;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.account-out:hover:not(:disabled) {
  color: #ff5050;
  border-color: #ff5050;
  background: rgba(255, 80, 80, 0.08);
}
.account-out:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
.account-out:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 480px) {
  .account-card { padding: 10px 12px; gap: 10px; }
  .account-email { font-size: 12px; }
  .account-out { padding: 6px 10px; font-size: 9px; }
}