/* Apple-modernist overlay: frosted glass, SF font stack, soft depth.
   Transparent page background so OBS composites it over gameplay. */

:root {
  /* Glass tint split into rgb + alpha so the overlay URL (&bgopacity=) can
     drive how see-through the frosted card is without touching the colour. */
  --glass-rgb: 28, 28, 30;
  --glass-alpha: 0.42;
  --glass: rgba(var(--glass-rgb), var(--glass-alpha));
  --stroke: rgba(255, 255, 255, 0.14);
  --text: #f5f5f7;
  --muted: rgba(235, 235, 245, 0.6);
  --green: #30d158;
  --red: #ff453a;
  --amber: #ffd60a;
  --blue: #0a84ff;
  --radius: 22px;
  --glass-blur: 16px;
  /* Progress-bar fill — overridable per overlay via &barcolor= (see overlay.js). */
  --bar-fill: linear-gradient(90deg, #2bb14e 0%, var(--green) 60%, #6be78a 100%);
}

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

/* Make the `hidden` attribute win even on elements with an explicit display
   (e.g. .record-row is flex), so JS toggling `el.hidden` actually hides them. */
[hidden] { display: none !important; }

html, body {
  background: transparent;
  font-family: var(--font-overlay, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  overflow: hidden;
}

.overlay {
  position: fixed;
  top: 28px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px 16px 16px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  transform: scale(var(--scale, 1));
  transform-origin: top left;
  transition: opacity 0.4s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.25s ease, border-color 0.25s ease;
}

.overlay[data-state="loading"] { opacity: 0.55; }

/* When embedded in a preview iframe, center the overlay instead of
   pinning it to the top-left corner. */
body.preview-mode .overlay {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
}

/* When embedded in broadcast stage mode, position at 0,0 of the draggable container */
body.stage-mode,
body.stage-mode html {
  background: transparent !important;
}

body.stage-mode .overlay {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  transform: scale(var(--scale, 1));
  transform-origin: top left;
}

/* custom background image: fills the whole card (cover) and sits BEHIND the
   glass layer, so the frosted glass tints + blurs it. Clipped to the card
   radius via border-radius: inherit. Hidden until a ?bg= URL is provided. */
.overlay-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%; /* overridden inline by ?bgx=&bgy= */
  border-radius: inherit;
}
.overlay-bg[hidden] { display: none; }

/* the frosted "liquid glass" layer — was on .overlay, now its own layer so a
   background image can live behind it. faint top-down sheen over the tint. */
.overlay-glass {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%), var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* lift real content above the bg + glass layers */
.rank-badge, .info, .setup-msg { position: relative; z-index: 2; }

.rank-badge {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 32%, rgba(255,255,255,0.14), rgba(255,255,255,0) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* author display:grid above overrides the UA [hidden] rule, so the JS onerror
   fallback (sets [hidden] on a broken icon) needs this to actually hide. */
.rank-badge[hidden] { display: none; }

.rank-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.info { display: flex; flex-direction: column; gap: 8px; min-width: 196px; }

.rank-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* light outline on readable text for legibility over live gameplay */
.rank-name, .rr, .last-change, .rec, .rec b {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.35);
}

.rank-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.rr-wrap { position: relative; display: inline-flex; }

.rr {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---- RR progress bar: within-tier progress (0..100) toward promotion ---- */
.rr-bar {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.rr-bar-fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--bar-fill);
  box-shadow: 0 0 10px rgba(48, 209, 88, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  overflow: hidden;
  /* smooth, "clean" fill motion whenever the width changes */
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

/* moving sheen so the bar feels alive without being noisy */
.rr-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: rr-sheen 3s ease-in-out infinite;
  pointer-events: none;
}

.rr-bar-fill.pulse-up { animation: rr-pulse-up 0.7s ease; }
.rr-bar-fill.pulse-down { animation: rr-pulse-down 0.7s ease; }

@keyframes rr-sheen {
  0% { transform: translateX(-100%); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translateX(100%); opacity: 1; }
  50.1%, 100% { transform: translateX(100%); opacity: 0; }
}
@keyframes rr-pulse-up {
  0% { filter: brightness(1); box-shadow: 0 0 10px rgba(48, 209, 88, 0.55); }
  35% { filter: brightness(1.5); box-shadow: 0 0 20px rgba(107, 231, 138, 0.95); }
  100% { filter: brightness(1); box-shadow: 0 0 10px rgba(48, 209, 88, 0.55); }
}
@keyframes rr-pulse-down {
  0% { filter: brightness(1); }
  35% { filter: brightness(0.8) saturate(0.6); }
  100% { filter: brightness(1); }
}

/* ---- floating "+X RR" chip on a genuine RR change ---- */
.rr-gain {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 0);
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.rr-gain.pos { color: #6be78a; }
.rr-gain.neg { color: #ff6b61; }
.rr-gain.play { animation: rr-gain-float 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes rr-gain-float {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.85); }
  18%  { opacity: 1; transform: translate(-50%, -2px) scale(1.05); }
  32%  { transform: translate(-50%, -6px) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -22px) scale(0.98); }
}

.meta-row { display: flex; align-items: center; gap: 14px; }
.record-row { display: flex; align-items: center; gap: 8px; }

.last-change {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 999px;
}
.last-change.pos { color: var(--green); background: rgba(48, 209, 88, 0.14); }
.last-change.neg { color: var(--red);   background: rgba(255, 69, 58, 0.14); }
.last-change.neutral { color: var(--muted); background: rgba(235,235,245,0.10); }

.rec {
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.rec b { font-weight: 700; font-size: 16px; }
/* Per-category W/L/D colours, overridable per overlay via &wcolor/&lcolor/&dcolor
   (see overlay.js). When set, the whole "6W" (number + letter) takes the colour;
   by default only the number is tinted and the letter stays muted. */
.rec.win  { color: var(--win-color, var(--muted)); }
.rec.loss { color: var(--loss-color, var(--muted)); }
.rec.draw { color: var(--draw-color, var(--muted)); }
.rec.win b  { color: var(--win-color, var(--green)); }
.rec.loss b { color: var(--loss-color, var(--red)); }
.rec.draw b { color: var(--draw-color, var(--amber)); }

.demo-tag {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--amber);
  opacity: 0.8;
}

/* "setup needed" state: hide rank/record, show a clear configure message */
.overlay[data-state="setup"] .rank-badge,
.overlay[data-state="setup"] .info {
  display: none;
}

.setup-msg {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px;
  min-width: 168px;
}
.overlay[data-state="setup"] .setup-msg {
  display: flex;
}
.setup-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--amber);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.35);
}
.setup-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.35);
}

.setup-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* subtle pop when a value updates */
.bump { animation: bump 0.45s ease; }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---- update toast: 5s "overlay updated" popup, slides down from the top ---- */
.update-popup {
  position: fixed;
  z-index: 50;
  top: 28px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%), var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--text);
  opacity: 0;
  transform: translate(-50%, -18px);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.update-popup[hidden] { display: none; }
.update-popup.show { opacity: 1; transform: translate(-50%, 0); }

.update-popup { max-width: 340px; }
.update-icon { font-size: 22px; line-height: 1; align-self: flex-start; margin-top: 1px; }
.update-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.25; }
.update-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.update-sub {
  font-size: 12px;
  color: var(--muted);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.update-list {
  margin: 3px 0 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.update-list[hidden] { display: none; }
.update-list li {
  font-size: 12.5px;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.update-list li::marker { color: var(--green); }

.update-refresh {
  align-self: flex-start;
  margin-top: 8px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #0b0b0d;
  background: var(--green);
  border: none;
  border-radius: 10px;
  padding: 7px 14px;
  cursor: pointer;
  pointer-events: auto; /* popup itself is pointer-events:none */
  transition: transform 0.1s ease, filter 0.2s ease;
}
.update-refresh[hidden] { display: none; }
.update-refresh:hover { filter: brightness(1.08); }
.update-refresh:active { transform: scale(0.97); }

/* ==================================================================
   Setup page — "refreshed Apple-like": airy sections on a quiet dark
   canvas, one bold moment (the live product hero), everything else
   disciplined. Scoped to body.setup so the OBS overlay stays untouched.
   ================================================================== */
html:has(body.setup) { overflow: auto; }

body.setup {
  /* setup-only tokens (kept off :root so the overlay is unaffected) */
  --bg: #090a0e;
  --surface: rgba(255, 255, 255, 0.045);   /* section panels */
  --surface-2: rgba(255, 255, 255, 0.06);  /* inputs / controls */
  --surface-3: rgba(255, 255, 255, 0.11);  /* hover */
  --hair: rgba(255, 255, 255, 0.10);
  --hair-2: rgba(255, 255, 255, 0.16);
  --ink: #f6f6f8;
  --ink-dim: rgba(235, 235, 245, 0.60);
  --ink-faint: rgba(235, 235, 245, 0.38);
  --accent: #0a84ff;

  color: var(--ink);
  background: var(--bg);
  overflow: auto;
  min-height: 100vh;
  padding: 44px 20px 72px;
  line-height: 1.4;
}

/* ambient aurora — the only colour on the canvas; a blue lead with a faint
   frog-green echo of the RR bar. Fixed, soft, and quiet. */
.aurora {
  position: fixed;
  inset: -20vh -10vw auto;
  height: 90vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46vw 40vh at 22% 0%, rgba(10, 132, 255, 0.24), transparent 62%),
    radial-gradient(38vw 34vh at 82% 8%, rgba(48, 209, 88, 0.12), transparent 60%);
  filter: blur(18px);
  opacity: 0.9;
}

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ---- masthead ---- */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.wordmark-mark { font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 8px rgba(48, 209, 88, 0.35)); }
.wordmark-name { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.ver-pill {
  font-size: 12px;
  color: var(--ink-dim);
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.ver-pill b { color: var(--accent); font-weight: 700; }

/* ---- intro ---- */
.intro { display: flex; flex-direction: column; gap: 10px; }
.headline {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.subhead {
  font-size: clamp(15px, 2.4vw, 17px);
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 54ch;
}

/* ---- hero: the live overlay, presented as a product shot ---- */
.hero-preview { margin-top: 2px; }
.preview-stage {
  position: relative;
  height: 232px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--hair-2);
  background:
    radial-gradient(130% 120% at 12% 8%, #26365a 0%, transparent 55%),
    radial-gradient(130% 120% at 88% 88%, #45294c 0%, transparent 55%),
    repeating-linear-gradient(48deg, #12141b 0 24px, #171a22 24px 48px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.preview-stage::after { /* soft top light + edge vignette */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%),
    radial-gradient(120% 100% at 50% 120%, rgba(0, 0, 0, 0.45), transparent 60%);
}
.preview-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
.stage-caption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 5px 11px;
}

/* ---- form / steps ---- */
.setup-form { display: flex; flex-direction: column; gap: 26px; }

.step {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.step-head { display: flex; align-items: center; gap: 12px; }
.step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: rgba(10, 132, 255, 0.14);
  border: 1px solid rgba(10, 132, 255, 0.35);
  border-radius: 50%;
}
.step-title { font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }

/* two-up grid that collapses to one column on narrow screens */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.field-grid > .field-lead,
.field-grid > .field:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 520px) { .field-grid { grid-template-columns: 1fr; } }

.game-fields { display: block; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-lead { grid-column: 1 / -1; }

.field-label {
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
}
.field-hint { font-size: 12px; line-height: 1.5; color: var(--ink-dim); }
.field-hint b { color: var(--ink); font-weight: 600; }

/* inputs / selects */
.field input,
.field select,
.import-row input,
.profile-row input {
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.field input:hover,
.field select:hover,
.import-row input:hover,
.profile-row input:hover { border-color: var(--hair-2); }
.field input:focus,
.field select:focus,
.import-row input:focus,
.profile-row input:focus {
  border-color: var(--accent);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.24);
}
.field input::placeholder,
.import-row input::placeholder,
.profile-row input::placeholder { color: var(--ink-faint); }

.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239aa0ad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* colour picker: swatch + live hex + reset */
.color-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 7px 8px 7px 10px;
  transition: border-color 0.18s ease;
}
.color-field:hover { border-color: var(--hair-2); }
.color-field input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: none;
  cursor: pointer;
}
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type="color"]::-webkit-color-swatch { border: 1px solid var(--hair-2); border-radius: 9px; }
.color-hex {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.color-reset {
  margin-left: auto;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 6px 11px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.color-reset:hover { color: var(--ink); background: var(--surface-3); border-color: var(--hair-2); }

/* checkbox rows */
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  padding: 3px 0;
}
.check-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

/* per-category W/L/D colour pickers */
.wld-colors { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wld-color { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.wld-color input[type="color"] {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.wld-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.wld-color input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
.wld-tag { font-size: 13px; font-weight: 800; }
.wld-tag.win  { color: var(--green); }
.wld-tag.loss { color: var(--red); }
.wld-tag.draw { color: var(--amber); }
.wld-colors .color-reset { margin-left: auto; }

/* disclosure groups (custom bg, cross-device profile) */
.subgroup {
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 0 16px;
}
.subgroup > summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.18s ease;
}
.subgroup > summary:hover { color: var(--ink); }
.subgroup > summary::-webkit-details-marker { display: none; }
.subgroup > summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
.subgroup[open] > summary { color: var(--ink); }
.subgroup[open] > summary::before { transform: rotate(45deg); }
.subgroup > :not(summary) { margin-bottom: 16px; }
.subgroup > .field-grid { padding-top: 2px; }

/* range sliders */
.range-val {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
  margin-left: 8px;
}
.pos-grid { display: flex; flex-direction: column; gap: 12px; }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-tag { width: 14px; font-size: 12px; font-weight: 700; color: var(--ink-dim); }
.range-row .range-val { min-width: 42px; text-align: right; margin-left: 0; }

body.setup input[type="range"] {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  outline: none;
  cursor: pointer;
}
body.setup input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease;
}
body.setup input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.15); }
body.setup input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
}

/* ---- link + profile ---- */
.badge-new {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(10, 132, 255, 0.16);
  border: 1px solid rgba(10, 132, 255, 0.3);
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.url-block { display: flex; flex-direction: column; gap: 12px; }
.url-output {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 13px 15px;
}

.url-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.btn:active { transform: scale(0.975); }
.btn-primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, #2a95ff, var(--accent));
  box-shadow: 0 6px 18px -6px rgba(10, 132, 255, 0.7);
}
.btn-primary:hover { box-shadow: 0 8px 22px -6px rgba(10, 132, 255, 0.85); }
.btn-primary:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.btn-ghost { background: var(--surface-2); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-3); border-color: var(--hair-2); }
.btn-ghost[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

.profile-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.profile-row input { flex: 1; min-width: 160px; }
.import-row { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.import-row input { flex: 1; min-width: 0; }
.import-row .btn { flex: none; }
.import-ok { color: var(--green); }

/* ---- OBS steps ---- */
.obs-steps {
  list-style: none;
  counter-reset: obs;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.obs-steps li {
  counter-increment: obs;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.obs-steps li::before {
  content: counter(obs);
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface-3);
  border: 1px solid var(--hair);
  border-radius: 50%;
}
.obs-steps b { color: var(--ink); font-weight: 600; }

.page-foot {
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
  padding-top: 4px;
}

/* ---- entrance: one orchestrated fade-up ---- */
@keyframes fo-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.page > * { animation: fo-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.page > *:nth-child(1) { animation-delay: 0.02s; }
.page > *:nth-child(2) { animation-delay: 0.07s; }
.page > *:nth-child(3) { animation-delay: 0.12s; }
.page > *:nth-child(4) { animation-delay: 0.17s; }
.page > *:nth-child(5) { animation-delay: 0.22s; }
.page > *:nth-child(n+6) { animation-delay: 0.26s; }

@media (prefers-reduced-motion: reduce) {
  .page > * { animation: none; }
  .btn, .field input, .field select, .color-reset, .subgroup > summary::before { transition: none; }
}