/* ── Page layout ── */
.event-assets-main { padding-left: 0 }
.event-assets-wrap { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1400px }

/* ── Tool hub grid (matches the Home page tool cards) ── */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 4px }
.tool-card {
  border-radius: 18px; padding: 22px 22px 18px;
  background: rgba(255,255,255,.04); border: 1px solid var(--glass-border);
  display: flex; flex-direction: column; gap: 12px; cursor: pointer;
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.tool-card:hover { border-color: rgba(0,212,255,.4); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.3) }
.tool-card.soon { cursor: default; opacity: .75 }
.tool-card.soon:hover { transform: none; border-color: var(--glass-border); box-shadow: none }
.tool-card-header { display: flex; justify-content: space-between; align-items: flex-start }
.tool-card-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text) }
.tool-card-desc { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-top: 4px }
.tool-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); font-size: 12.5px; font-weight: 600; color: var(--cyan) }
.tool-card-footer svg { width: 14px; height: 14px }

/* Icon chip — used on the cards AND on each tool's own page header */
.tool-card-icon, .tool-ic { display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; flex-shrink: 0 }
.tool-card-icon { width: 44px; height: 44px } .tool-card-icon svg { width: 20px; height: 20px }
.tool-ic { width: 38px; height: 38px } .tool-ic svg { width: 18px; height: 18px }
.tool-ic:empty { display: none }
.tool-card-icon.cyan,   .tool-ic.cyan   { background: rgba(0,212,255,.14);  color: #00d4ff }
.tool-card-icon.green,  .tool-ic.green  { background: rgba(16,185,129,.16); color: #10b981 }
.tool-card-icon.purple, .tool-ic.purple { background: rgba(124,58,237,.16); color: #a78bfa }
.tool-card-icon.gold,   .tool-ic.gold   { background: rgba(245,158,11,.16); color: #f59e0b }
.tool-card-icon.rose,   .tool-ic.rose   { background: rgba(244,63,94,.16);  color: #f43f5e }

/* ── Timer page structure ── */
.timer-page-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.timer-workspace {
  display: grid; grid-template-columns: 360px 1fr;
  gap: 20px; align-items: start;
}
.timer-config-panel { padding: 24px }

/* ── Presenter preview panel — sticky so it never scrolls away ── */
.preview-pane {
  position: sticky;
  top: 20px;
  height: calc(100vh - 120px);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  /* ensure it doesn't clip its sticky child */
  overflow: visible;
}

/* Header row inside preview pane */
.preview-pane-hdr {
  display: flex; align-items: center;
  justify-content: space-between; flex-shrink: 0;
}

/* ── Shared preview stage (tv* markup, mirrors the popup stage) ── */
.mini-stage {
  position: relative;
  flex: 1; min-height: 0;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: radial-gradient(ellipse at top, rgba(12,20,34,.7), transparent 60%),
              linear-gradient(180deg, #060b14, #030710);
  padding: 24px 24px 18px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  transition: box-shadow .4s, background .4s;
}
.mini-stage.tv-urgent {
  box-shadow: inset 0 0 60px rgba(249,115,22,.08), 0 0 0 1px rgba(249,115,22,.2);
}
#tvCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.mini-stage .tv-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%;
}
#tvTitle {
  margin: 0; font-family: var(--font-display); font-size: 18px;
  font-weight: 700; color: var(--text); letter-spacing: -.3px;
}
/* Subtitle sits BELOW the title */
#tvSubtitle {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin: 4px 0 0;
}
.tv-time-wrap {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center; margin: 14px 0 10px;
}
.tv-time-wrap.tv-circle { margin: 16px auto; }
#tvTime {
  font-family: var(--font-display); line-height: 1;
  color: var(--cyan); transition: color .3s, text-shadow .3s;
  position: relative; z-index: 2;
  white-space: nowrap; display: inline-flex; align-items: baseline;
}
/* Each glyph in a fixed-width cell → digits never shift the layout, any font */
.tv-dig, .tv-sep { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.tv-dig { width: .62em; }
.tv-sep { width: .30em; }
#tvTime.tv-expired { color: #ef4444 !important; }
.mini-stage.tv-urgent #tvTime { animation: urgPulse .7s ease-in-out infinite; }
@keyframes urgPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.04) } }
.tv-ring {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  z-index: 1; overflow: visible;
}
.tv-ring circle { fill: none; stroke-width: 8; }
.tv-ring .tv-ring-bg { stroke: rgba(255,255,255,.09); }
.tv-ring .tv-ring-fill {
  stroke: var(--cyan); stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .18s linear, stroke .3s;
}
#tvStatus { color: var(--text-2); font-size: 12px; margin-bottom: 14px; }
.tv-bar {
  height: 6px; border-radius: 99px;
  background: rgba(255,255,255,.07); overflow: hidden;
  border: 1px solid rgba(255,255,255,.06); width: 100%; max-width: 420px;
}
.tv-bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border-radius: inherit; transition: width .18s linear, background .3s;
}

/* ── Coin Toss / Number Dice / Number Spin Wheel stages ── */
.tv-coin-zone, .tv-dice-zone, .tv-wheel-zone { width: 100%; display: flex; flex-direction: column; align-items: center; }
.tv-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  font-size: 12px; font-weight: 700; color: var(--text-2);
}

/* Coin Toss — real 3D flip via preserve-3d, two faces (the edge illusion during
   the flip comes from natural rotateY foreshortening, not a separate rim mesh —
   a from-scratch rim built out of many rotated strips rendered as a solid block
   at most angles, so the "thickness" is faked with an embossed border instead). */
.tv-coin-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; perspective: 900px; margin: 10px auto 4px; }
.tv-coin-bounce { width: clamp(90px,16vmin,220px); height: clamp(90px,16vmin,220px); }
.tv-coin-3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1800ms cubic-bezier(.2,.85,.25,1); }
.tv-coin-face {
  position: absolute; inset: 0; border-radius: 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden; box-sizing: border-box;
  font-weight: 800; font-size: clamp(11px,1.9vmin,20px);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
}
/* Milled (reeded) edge — the notched rim of a struck coin */
.tv-coin-mill {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    var(--cf-edged,#9c6412) 0deg 2deg, var(--cf-edgel,#f7d476) 2deg 4deg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
/* Recessed metal field the relief is struck into */
.tv-coin-field {
  position: absolute; inset: 7%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 34% 26%,
    var(--cf-light,#fff8e1), var(--cf-mid,#f0c04b) 56%, var(--cf-dark,#a9711a) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(0,0,0,.16),
    inset 0 0 0 3px rgba(255,255,255,.32),
    inset 0 -12px 24px rgba(0,0,0,.16),
    inset 0 10px 20px rgba(255,255,255,.24);
}
.tv-coin-art {
  position: absolute; inset: 3%; color: var(--cf-ink,#7d4f0b);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.45));
}
.tv-coin-art svg { width: 100%; height: 100%; display: block; }
.tv-coin-heads { transform: translateZ(3px); }
.tv-coin-tails { transform: rotateY(180deg) translateZ(3px); }
.tv-coin-shadow {
  width: 60%; height: 14px; margin-top: 10px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%); filter: blur(1px);
}
@keyframes tvCoinLand { 0% { transform: scale(1) } 30% { transform: scale(.88,1.12) } 60% { transform: scale(1.05,.95) } 100% { transform: scale(1) } }
.tv-coin-result { margin-top: 10px; font-size: clamp(16px,2.4vmin,26px); font-weight: 800; color: var(--text); min-height: 1.3em; }
.tv-coin-history, .tv-dice-history { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 8px; max-width: 420px; }

/* Number Dice — closed 3D cubes, standard preserve-3d depth-sorting (no backface-visibility needed) */
.tv-dice-stage { display: flex; gap: 18px; align-items: center; justify-content: center; perspective: 1000px; flex-wrap: wrap; margin: 10px auto 4px; }
.tv-die-wrap { width: clamp(56px,9vmin,110px); height: clamp(56px,9vmin,110px); }
.tv-die { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1600ms cubic-bezier(.2,.85,.25,1); }
.tv-die-face {
  position: absolute; inset: 0; border-radius: 14%; box-sizing: border-box;
  background: linear-gradient(150deg,#ffffff,#e6e9ee);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.15);
  display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); padding: 16%;
}
.pip { width: 100%; height: 100%; border-radius: 50%; background: #1c2333; opacity: 0; justify-self: center; align-self: center; }
.dv-1 .pip:nth-child(5) { opacity: 1 }
.dv-2 .pip:nth-child(1), .dv-2 .pip:nth-child(9) { opacity: 1 }
.dv-3 .pip:nth-child(1), .dv-3 .pip:nth-child(5), .dv-3 .pip:nth-child(9) { opacity: 1 }
.dv-4 .pip:nth-child(1), .dv-4 .pip:nth-child(3), .dv-4 .pip:nth-child(7), .dv-4 .pip:nth-child(9) { opacity: 1 }
.dv-5 .pip:nth-child(1), .dv-5 .pip:nth-child(3), .dv-5 .pip:nth-child(5), .dv-5 .pip:nth-child(7), .dv-5 .pip:nth-child(9) { opacity: 1 }
.dv-6 .pip:nth-child(1), .dv-6 .pip:nth-child(3), .dv-6 .pip:nth-child(4), .dv-6 .pip:nth-child(6), .dv-6 .pip:nth-child(7), .dv-6 .pip:nth-child(9) { opacity: 1 }
.tv-die-digit { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(22px,4vmin,42px); color: #1c2333; }
.tv-dice-sum { margin-top: 10px; font-weight: 800; font-size: clamp(15px,2vmin,22px); color: var(--text); }

/* Number Spin Wheel — conic-gradient disc + fixed pointer, labels rotate with the disc.
   A non-rotating sheen + a center hub + thin per-segment dividers (built into the
   gradient stops in JS) round it out to look like a real prize wheel. */
.tv-wheel-stage { position: relative; width: clamp(200px,42vmin,420px); aspect-ratio: 1; margin: 10px auto; }
/* Brushed-metal frame. The disc sits INSIDE it, so the conic gradient never
   meets a translucent border — that overlap is what caused the colour fringe. */
.tv-wheel-bezel {
  position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 210deg,
    #f8fafc, #93a1b0 12%, #e8edf3 25%, #63707f 38%, #f1f5f9 50%,
    #93a1b0 62%, #e8edf3 75%, #6b7a8c 88%, #f8fafc 100%);
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.45);
}
.tv-wheel-stud {
  position: absolute; top: 50%; left: 50%; transform-origin: 0 0;
  width: 2.4%; height: 2.4%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #cbd5e1 55%, #5b6672);
  box-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.tv-wheel-disc {
  position: absolute; inset: 6%; border-radius: 50%; z-index: 1;
  box-shadow: 0 0 0 2px rgba(15,23,42,.5), inset 0 0 26px rgba(0,0,0,.28);
  transition: transform 4000ms cubic-bezier(.15,.85,.2,1);
}
.tv-wheel-sheen {
  position: absolute; inset: 6%; border-radius: 50%; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.30), rgba(255,255,255,0) 46%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 56%, rgba(0,0,0,.30) 100%);
}
.tv-wheel-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3;
  width: 15%; height: 15%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #e2e8f0 38%, #93a1b0 72%, #47535f 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.7), inset 0 -4px 8px rgba(0,0,0,.28);
}
.tv-wheel-label {
  position: absolute; top: 50%; left: 50%; transform-origin: 0 0;
  font-weight: 800; font-size: clamp(12px,1.85vmin,17px);
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.4);
  white-space: nowrap; pointer-events: none;
}
.tv-wheel-label.ink { color: #16202f; text-shadow: 0 1px 2px rgba(255,255,255,.45); }
.tv-wheel-label.won { opacity: .45; text-decoration: line-through; }
.tv-wheel-pointer {
  position: absolute; top: -3%; left: 50%; transform: translateX(-50%);
  width: 8.5%; height: 12%; z-index: 4;
  background: linear-gradient(180deg,#ffffff 0%,#e2e8f0 34%,#93a1b0 70%,#5b6672 100%);
  clip-path: polygon(50% 100%, 0 34%, 0 0, 100% 0, 100% 34%);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.55));
}
.tv-wheel-result { margin-top: 12px; font-size: clamp(16px,2.4vmin,26px); font-weight: 800; color: var(--text); min-height: 1.3em; }

/* All controls on one left-aligned line, every control the same size */
.preview-controls-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: flex-start; flex-shrink: 0;
}
.preview-controls-row .tctl {
  flex: 0 0 auto; height: 42px; min-width: 104px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 700; border-radius: 10px; box-sizing: border-box;
}
/* Manual time entry — clean compact field, professional numeric font (not Syne) */
.timer-manual {
  flex: 0 0 auto; height: 42px; width: 122px; box-sizing: border-box;
  text-align: center; padding: 0 10px;
  font-family: 'Space Grotesk', 'Rajdhani', sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: 1px;
}
/* Target-time picker in the controls row (shown instead of Start/Reset in
   target mode — the timer just follows the clock). */
.timer-target { width: 150px; letter-spacing: 0; }

/* Keyboard shortcut hint */
.preview-hint {
  color: var(--text-3); font-size: 11.5px;
  flex-shrink: 0; margin-top: 2px;
}
.preview-hint kbd {
  display: inline-block; padding: 1px 6px; border-radius: 5px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  font-family: var(--font-display); font-size: 11px; color: var(--text-2);
  margin: 0 1px;
}

/* Logo acts as a back button on the timer page */
/* Brand: real Event Assets logo on the hub, tool icon chip on a tool page */
.brand-logo-img { height: 60px; width: auto; transition: transform .2s, opacity .2s; }
.brand-chip { width: 52px; height: 52px; border-radius: 14px; }
.brand-chip svg { width: 26px; height: 26px; }
.brand-link { border-radius: 14px; }
/* Hub: the logo slides slightly on hover */
.brand-link:hover .brand-logo-img { transform: translateX(-3px) scale(1.05); opacity: .9; }

/* Tool page: mini-site-editor style back button — the icon fades to a back
   arrow on hover, with a subtle glass pill (no slide). */
.ea-home-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; border: 1px solid transparent;
  transition: background .18s, border-color .18s;
}
.ea-home-icon .brand-chip { transition: opacity .16s ease; }
.ea-home-arrow {
  position: absolute; width: 24px; height: 24px; color: var(--cyan);
  opacity: 0; transition: opacity .16s ease; pointer-events: none;
}
.brand-link.ea-tool-mode:hover { transform: none; opacity: 1; }
.brand-link.ea-tool-mode:hover .ea-home-icon { background: var(--glass); border-color: var(--glass-border); }
.brand-link.ea-tool-mode:hover .brand-chip { opacity: 0; }
.brand-link.ea-tool-mode:hover .ea-home-arrow { opacity: 1; }

/* ── Mode toggle (Timer / Stopwatch / Text / Coin Toss / Dice / Spin Wheel) — centered above the workspace, mirrors the analytics .dbv-tabs ── */
.ea-mode-toggle-bar { display: flex; justify-content: center; margin-bottom: 20px }
.ea-mode-toggle {
  display: flex; flex-wrap: wrap; gap: 4px; max-width: 720px;
  background: var(--glass); border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px; padding: 5px;
}
.ea-mode-btn {
  flex: 0 1 auto; min-width: 96px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  color: rgba(255,255,255,.65); cursor: pointer; transition: var(--transition);
  background: none; border: none; font-family: var(--font);
}
.ea-mode-btn:hover { color: rgba(255,255,255,.92); }
.ea-mode-btn.active { background: var(--grad-primary); color: #fff; box-shadow: 0 2px 12px rgba(0,212,255,.2); }
.ea-mode-btn svg { width: 15px; height: 15px; }

/* Section labels (replaces the old inline-styled group headers) */
.ea-sec-label {
  font-size: 12px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .06em; margin: 20px 0 14px;
}
.ea-sec-label:first-of-type { margin-top: 0; }

/* Quick-message preset chips (Text mode) */
.ea-quick-msgs { display: flex; flex-wrap: wrap; gap: 8px; }
.ea-quick-chip {
  padding: 7px 12px; border-radius: 99px;
  background: rgba(255,255,255,.05); border: 1px solid var(--glass-border);
  color: var(--text-2); font-size: 12.5px; font-weight: 600; font-family: var(--font);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.ea-quick-chip:hover { background: rgba(0,212,255,.12); border-color: rgba(0,212,255,.35); color: var(--cyan); }

/* Single-number countdown (last 10 s): a per-second zoom-in / settle pop */
@keyframes tvSingleZoom {
  0%   { transform: scale(.35); opacity: 0; }
  45%  { transform: scale(1.18); opacity: 1; }
  70%  { transform: scale(.96); }
  100% { transform: scale(1); opacity: 1; }
}
/* Text mode: the big on-screen message (wraps, unlike the digit cells) */
.tv-msg { display: inline-block; white-space: normal; line-height: 1.12; word-break: break-word; }
#tvTime.tv-textmode { white-space: normal; max-width: 100%; font-size: clamp(22px, 4.6vw, 54px); }

/* ── Setup form grid ── */
/* minmax(0,1fr) so a long dropdown label can't force its column wider and
   shrink the other. The .gal-dd label / form-group also need min-width:0 so the
   custom dropdown's built-in ellipsis actually truncates instead of pushing. */
.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px }
.setup-grid .form-group { min-width: 0 }
.setup-grid .gal-dd-label { min-width: 0 }
.hidden { display: none !important }
.badge-live { background: rgba(16,185,129,.12); color: var(--green); border: 1px solid rgba(16,185,129,.2) }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .timer-workspace { grid-template-columns: 1fr }
  .preview-pane { position: static; height: auto; min-height: 500px }
}
@media (max-width: 700px) {
  .setup-grid { grid-template-columns: 1fr }
  .timer-page-header { flex-direction: column; align-items: flex-start }
}

/* ── Small laptop (1024–1366 px): auto 90% scale ── */
@media screen and (max-width: 1366px) and (min-width: 1024px) {
  html { zoom: 0.9; }
}


/* ── Phone remote pairing dialog ── */
.rc-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(3, 7, 16, .72); backdrop-filter: blur(6px);
}
.rc-modal.hidden { display: none }
.rc-card {
  position: relative; width: 100%; max-width: 400px; text-align: center;
  padding: 30px 28px 26px; border-radius: 22px;
  background: linear-gradient(180deg, #131c2e, #0d1524);
  border: 1px solid var(--glass-border); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.rc-x {
  position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 9px;
  background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
  color: var(--text-2); font-size: 19px; line-height: 1; cursor: pointer;
}
.rc-x:hover { color: var(--text); background: rgba(255,255,255,.1) }
.rc-title { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--text); padding: 0 26px }
.rc-sub { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 6px 0 18px }
.rc-qr-wrap {
  width: 200px; height: 200px; margin: 0 auto; padding: 10px; border-radius: 16px;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.rc-qr { width: 100%; height: 100%; display: block }
.rc-code {
  font-family: 'Space Grotesk', monospace; font-size: 30px; font-weight: 700;
  letter-spacing: .3em; text-indent: .3em; color: var(--text); margin: 16px 0 4px;
}
.rc-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2) }
.rc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none }
.rc-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18) }
.rc-dot.wait { background: #f59e0b; animation: rcPulse 1s infinite }
.rc-dot.err { background: #ef4444 }
@keyframes rcPulse { 50% { opacity: .3 } }
.rc-alt { font-size: 12px; color: var(--text-3); margin-top: 12px; line-height: 1.5 }
.rc-alt b { color: var(--text-2); font-weight: 600 }

#remoteBtn { display: inline-flex; align-items: center; gap: 6px }
#remoteBtn svg { width: 15px; height: 15px }