:root {
  --bg: #0d0f12;
  --bg-elev: #1c1f25;
  --bg-elev-2: #242830;
  --chip-bg: #2a2d33;
  --text: #e8eaed;
  --text-dim: #9098a3;
  --accent: #f5a623;
  --border: #2e323a;
  --shadow: 0 4px 20px rgba(0, 0, 0, .4);
  --backdrop-tint: #2a2d33;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  /* Override on browsers that support dynamic viewport units (2022+). Avoids
     the iOS Safari issue where 100% / 100vh leaves a gap at the bottom when
     the address bar collapses. */
  height: 100dvh;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  /* Suppress the default mobile tap-highlight (iOS / Android Chrome) so taps
     on chips, buttons, etc. don't flash a translucent rectangle. Individual
     elements still get :active / :hover styling defined below. */
  -webkit-tap-highlight-color: transparent;
}

/* Reactive backdrop layers */
.backdrop {
  position: fixed;
  /* Extend past the viewport so the blur's soft edge isn't visible. */
  inset: -120px;
  z-index: -2;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(2px) brightness(.85) saturate(1.05);
  opacity: 0;
  transition: opacity 1.2s ease;
  /* default soft tint when no image url is set */
  background-image: radial-gradient(circle at 30% 35%, var(--backdrop-tint), transparent 60%),
                    radial-gradient(circle at 75% 70%, var(--backdrop-tint), transparent 55%);
  background-color: var(--bg);
}
.backdrop.active { opacity: 1; }

/* Dim the corners (where the side panel + topbar live) to keep the UI legible
   while leaving the center bright enough to actually see the image. */
.backdrop-veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(13, 15, 18, 0) 40%, rgba(13, 15, 18, .55) 90%),
    rgba(13, 15, 18, .15);
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(28, 31, 37, .7);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 1.8rem; height: 1.8rem; display: block; color: var(--accent); flex-shrink: 0; }
.brand-name { font-weight: 600; letter-spacing: .02em; }
.topbar-actions { display: flex; gap: 8px; }

.icon-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: var(--chip-bg); border-color: #3a3f48; }

/* Stage */
.stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  min-height: 0;
}

.wheel-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 0;
  /* Anchor the absolutely-positioned `.hint` pill below. */
  position: relative;
}

#wheel {
  width: min(82vh, 82vw, 720px);
  height: min(82vh, 82vw, 720px);
  user-select: none;
  touch-action: manipulation;
}

.hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 18px 12px 10px;
  color: rgba(232, 234, 237, 0.95);
  font-size: .8rem;
  text-align: center;
  /* The wrapper itself blocks no clicks, but the inner link must remain clickable. */
  pointer-events: none;
  /* Soft gradient fade at the bottom — keeps the hint readable over any
     backdrop without looking like a discrete bar or pill. */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3) 60%, transparent);
}
.hint > * { pointer-events: auto; }
.hint-sep { opacity: 0.5; margin: 0 4px; }
.hint-donate {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.hint-donate:hover { text-decoration: underline; }

/* Side panel */
.side-panel {
  width: 96px;
  border-left: 1px solid var(--border);
  background: rgba(28, 31, 37, .7);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  padding: 16px 8px;
  gap: 12px;
}
.side-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  border-radius: 10px;
  cursor: pointer;
  font-size: .8rem;
  transition: background .15s, color .15s, border-color .15s;
}
.side-btn:hover { background: var(--bg-elev-2); color: var(--text); border-color: var(--border); }
.side-icon { font-size: 1.4rem; }

/* SVG wheel segment chips */
#wheel .ring-bg {
  fill: rgba(28, 31, 37, .6);
  stroke: var(--border);
  stroke-width: 1;
}
#wheel .seg {
  cursor: pointer;
  transition: filter .18s, transform .18s;
  transform-origin: 0 0;
}
#wheel .seg .seg-bg {
  fill: var(--chip-bg);
  stroke: #34383f;
  stroke-width: 1;
  transition: fill .25s;
}
#wheel .seg:hover .seg-bg { fill: #353941; }
#wheel .seg.active .seg-bg {
  fill: var(--seg-color, var(--accent));
  filter: drop-shadow(0 0 6px var(--seg-color, var(--accent)));
}
#wheel .seg .seg-icon {
  font-size: 22px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  fill: var(--text);
}
#wheel .seg.active .seg-icon { fill: #0d0e10; }

/* Center hub */
#wheel .hub { cursor: pointer; }
#wheel .hub-bg { fill: var(--accent); transition: fill .2s, filter .2s; }
#wheel .hub-divider {
  stroke: rgba(13, 14, 16, .35);
  stroke-width: 1;
  pointer-events: none;
}
#wheel .hub-zone { cursor: pointer; }
#wheel .hub-zone-hit {
  fill: transparent;
  pointer-events: all;
}
#wheel .hub-zone:hover .hub-zone-hit {
  fill: rgba(255, 255, 255, .08);
}
#wheel .hub-zone-icon {
  font-size: 26px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: #15171b;
  pointer-events: none;
  transition: opacity .2s;
}
#wheel .hub-silence .hub-zone-icon { opacity: .55; }
#wheel .hub-silence.has-ambience .hub-zone-icon { opacity: 1; }
#wheel .hub-silence:hover .hub-zone-icon { opacity: 1; }

/* Progress arc */
#wheel .progress-track { fill: none; stroke: var(--border); stroke-width: 2; }
#wheel .progress-arc {
  fill: none; stroke: var(--accent);
  stroke-width: 4; stroke-linecap: round;
  transition: stroke-dashoffset .2s linear;
}

/* Track count dot */
#wheel .seg-dot { fill: var(--text); pointer-events: none; opacity: .6; }
#wheel .seg.active .seg-dot { fill: #0d0e10; opacity: .9; }

/* Dialogs */
.dlg {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: 14px;
  padding: 0;
  box-shadow: var(--shadow);
  max-width: 460px;
  width: 92vw;
}
.dlg.dlg-wide { max-width: 640px; }
.dlg::backdrop { background: rgba(0, 0, 0, .6); }
.dlg form { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.dlg h2 { margin: 0; font-size: 1.15rem; font-weight: 600; }
.dlg label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--text-dim); }
.dlg label > span { color: var(--text-dim); }
.dlg input[type="range"] { accent-color: var(--accent); }
.dlg input[type="file"], .dlg select, .dlg input[type="search"], .dlg input[type="url"], .dlg input[type="password"], .dlg input[type="text"] {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; align-items: center; }
.dlg-actions > #managerAddMore { margin-right: auto; }
.dlg button {
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.dlg button:hover { background: var(--chip-bg); }
.dlg button.primary {
  background: var(--accent);
  color: #15171b;
  border-color: var(--accent);
  font-weight: 600;
}
.dlg button.primary:hover { filter: brightness(1.08); }
.dlg button.danger {
  background: transparent;
  color: #d97a7a;
  border-color: #5a2a2a;
}
.dlg button.danger:hover { background: #3a1f1f; color: #ffb0b0; }
.dlg-actions > .danger { margin-right: auto; }

/* Autofill block */
.autofill-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.autofill-btn {
  background: linear-gradient(135deg, #2a4d6e, #3b6e8f) !important;
  border-color: #3b6e8f !important;
  color: var(--text) !important;
  padding: 10px 14px !important;
  font-weight: 500;
}
.autofill-btn:hover { filter: brightness(1.12); }
.autofill-btn:disabled { opacity: .6; cursor: progress; }
.autofill-status { margin: 0; min-height: 1em; }
.dlg fieldset.api-keys {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.dlg fieldset.api-keys legend { padding: 0 6px; color: var(--text-dim); font-size: .85rem; }
.dlg fieldset.api-keys a { color: var(--accent); font-size: .8rem; }
.dlg .key-guide {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .85rem;
  color: var(--text-dim);
}
.dlg .key-guide[open] { padding-bottom: 12px; }
.dlg .key-guide summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 500;
  outline: none;
  list-style-position: outside;
  padding: 2px 0;
}
.dlg .key-guide summary:hover { color: var(--accent); }
.dlg .key-guide ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.dlg .key-guide ul { margin: 4px 0 0; padding-left: 18px; }
.dlg .key-guide code {
  background: var(--bg-elev-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .85em;
  color: var(--text);
  word-break: break-all;
}
.dlg .key-guide strong { color: var(--text); }
.dlg .key-note {
  font-size: .8rem;
  font-style: italic;
  border-left: 2px solid var(--accent);
  padding-left: 10px;
  margin-top: 4px;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: -8px;
}
.tab {
  border: 1px solid transparent !important;
  border-bottom: none !important;
  background: transparent !important;
  color: var(--text-dim);
  border-radius: 8px 8px 0 0 !important;
  padding: 8px 14px !important;
  cursor: pointer;
}
.tab.active {
  color: var(--text);
  background: var(--bg-elev-2) !important;
  border-color: var(--border) !important;
}
.tab-pane.hidden { display: none; }

/* Search */
.search-row { display: flex; gap: 6px; }
.search-row input { flex: 1; }
.search-results {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 38vh; overflow: auto;
  padding: 4px 2px;
}
.search-result {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev-2);
}
.search-result .meta { min-width: 0; }
.search-result .name {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result .sub {
  font-size: .8rem; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result audio {
  grid-column: 1 / -1;
  width: 100%;
  height: 32px;
}
.search-result button {
  padding: 4px 10px;
  font-size: .85rem;
  align-self: start;
  white-space: nowrap;
}

/* Library list / manager */
.library-list { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow: auto; }
.lib-group { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg-elev-2); }
.lib-group h3 { margin: 0 0 8px; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.lib-track { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .9rem; }
.lib-track .name { flex: 1; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-track .src-badge { font-size: .7rem; padding: 1px 6px; border-radius: 999px; background: var(--bg-elev); color: var(--text-dim); }
.lib-track button { padding: 4px 8px; font-size: .8rem; }
.lib-track input[type="radio"] { accent-color: var(--accent); margin: 0; }

.muted { color: var(--text-dim); font-size: .85rem; margin: 0; }

.donate-line {
  text-align: center;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: rgba(245, 166, 35, 0.04);
}
.donate-line a { color: var(--accent); font-weight: 600; }

/* Batch upload preview (Local-file tab) */
.batch-preview { display: flex; flex-direction: column; gap: 8px; }
.batch-preview.hidden { display: none; }
.batch-summary { font-size: .85rem; }
.batch-rows { display: flex; flex-direction: column; gap: 6px; max-height: 36vh; overflow: auto; }
.batch-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev-2);
}
.batch-row .batch-name {
  color: var(--text-dim);
  font-size: .85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batch-row select { padding: 4px 8px; font-size: .85rem; }
.batch-row .badge {
  font-size: .7rem;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.batch-row .badge.ok { background: #2a4a2a; color: #b8e0a8; border: 1px solid #3a6a3a; }
.batch-row .badge.warn { background: #4a3a1a; color: var(--accent); border: 1px solid #6a4a1a; }

/* Mixer dialog */
.mixer-master, .mixer-layers {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.mixer-master legend, .mixer-layers legend { padding: 0 6px; color: var(--text-dim); font-size: .85rem; }
.mixer-list { display: flex; flex-direction: column; gap: 8px; max-height: 30vh; overflow: auto; }
.mixer-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.6fr) 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev-2);
}
.mixer-row .mixer-label { font-size: .9rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mixer-row input[type="range"] { accent-color: var(--accent); width: 100%; }
.mixer-row .mixer-readout {
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  color: var(--text-dim);
  min-width: 38px;
  text-align: right;
}

/* Session dialog (DM-side) */
.session-status { font-size: .85rem; }
.session-status.ok { color: #b8e0a8; }
.session-status.err { color: #d97a7a; }
.session-controls { justify-content: flex-start; }
.session-url-box { display: flex; flex-direction: column; gap: 6px; }
.session-url-row { display: flex; gap: 6px; align-items: stretch; }
.session-url-row input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
#sessionListenerCount { color: var(--accent); font-weight: 600; }
.hidden { display: none !important; }

/* Listener page */
.listener-body { min-height: 100vh; display: flex; flex-direction: column; }
.brand-tag {
  font-size: .65em;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-dim);
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  vertical-align: middle;
}
.listener-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.listener-card {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.listener-room code {
  background: var(--bg-elev-2);
  padding: 1px 8px;
  border-radius: 4px;
  font-size: .85em;
  color: var(--text);
}
.listener-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
}
.listener-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #5a5a5a;
  box-shadow: 0 0 0 0 transparent;
  flex-shrink: 0;
}
.listener-dot[data-state="connecting"] { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.listener-dot[data-state="connected"]  { background: #6fcf6f; box-shadow: 0 0 6px #6fcf6f; }
.listener-dot[data-state="error"]      { background: #d97a7a; box-shadow: 0 0 6px #d97a7a; }
@keyframes pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.35; }
}
.listener-action {
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.listener-action.primary {
  background: var(--accent);
  color: #15171b;
  border-color: var(--accent);
}
.listener-action:hover { filter: brightness(1.08); }
.now-playing {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .9rem;
}
.np-row { display: flex; gap: 8px; align-items: baseline; }
.np-label {
  color: var(--text-dim);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  min-width: 64px;
}
.np-row em { font-style: normal; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listener-volume { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--text-dim); }
.listener-volume input[type="range"] { accent-color: var(--accent); }
.listener-tip { font-size: .8rem; }

/* Mobile */
@media (max-width: 720px) {
  .stage { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  /* Tighter topbar; hide the brand wordmark so it doesn't wrap on narrow
     screens (the icon mark alone communicates the app). */
  .topbar { padding: 8px 12px; }
  .brand-name { display: none; }
  /* Less padding around the wheel — every pixel matters when the wheel is
     width-limited by the phone's narrow viewport. */
  .wheel-area { padding: 8px 4px; }
  .hint { font-size: .72rem; padding: 16px 10px 8px; }
  .side-panel {
    flex-direction: row;
    width: auto;
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 6px 8px;
    justify-content: space-around;
  }
  .side-btn { flex-direction: row; gap: 8px; padding: 8px 6px; }
  /* Bump dvh ceiling so the wheel can grow if the device is unusually tall
     (small phones are still width-limited; this just helps tablets/landscape). */
  #wheel { width: min(96vw, 84dvh); height: min(96vw, 84dvh); }
}