/* =============================================================================
   PsyDAO · idea board — submission modal + ideas wall
   Self-contained styles. Loaded by /board/index.html and (lazy) by the main
   site when the modal opens.

   NB: class names keep the .icpr-* prefix — they're internal and renaming
   them would touch hundreds of lines for zero functional benefit.
   ============================================================================= */

.icpr-modal,
.icpr-modal * { box-sizing: border-box; }

/* Respect motion preferences: turn off our long pulse animations + soften
   transitions for users who set prefers-reduced-motion. Functionality is
   unaffected — recording still shows the red indicator, etc. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   TOUCH-FRIENDLY GLOBALS
   - touch-action: manipulation kills the 300ms tap delay and double-tap zoom
     on every interactive surface in the ICPR module.
   - Min 52px tap targets for any button / clickable card.
   - text-size-adjust prevents iOS from auto-scaling our type.
   ============================================================================= */
.icpr-modal,
.icpr-modal *,
.idea-detail,
.idea-detail *,
.icpr-numpad,
.icpr-numpad *,
.idea-card,
.icpr-cta-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.icpr-modal,
.idea-detail,
.icpr-numpad {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Don't apply min-heights to the mic icon button — it's intentionally bigger.
   And not to text-style ghost links. But primary actions get a generous 52px. */
.icpr-btn,
.icpr-cta-btn,
.icpr-iconbtn {
  min-height: 52px;
}
.icpr-btn.sm { min-height: 40px; }

.icpr-modal {
  --bg:           #faf6f1;
  --bg-2:         #fff8ed;
  --surface:      #ffffff;
  --surface-2:    #f5efe1;
  --border:       rgba(42,21,48,0.10);
  --border-strong:rgba(42,21,48,0.22);
  --ink-1:        #2a1530;
  --ink-2:        #5a3f6b;
  --ink-3:        #8a7a98;
  --purple:       #9835BA;
  --purple-soft:  #c277dc;
  --purple-glow:  #d499ee;
  --salmon:       #F2BEBE;
  --green:        #269280;
  --bad:          #c14a4a;
  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "Geist", system-ui, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  display: none;
  position: fixed; inset: 0;
  z-index: 150;
  background: radial-gradient(140% 100% at 50% 30%, var(--bg-2), var(--bg) 60%, #f0eee9 100%);
  color: var(--ink-1);
  font-family: var(--sans);
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.icpr-modal.open { display: block; }
.icpr-modal[data-kiosk="true"] { position: relative; min-height: 100vh; }

/* Inline mount — the booth lives directly inside a host page (the unified
   /icpr/), not as a fixed overlay. The page provides the background, header,
   and any hero copy; the booth contributes the stage flow + progress dots. */
.icpr-modal[data-inline="true"] {
  position: relative; inset: auto;
  background: transparent;
  overflow: visible;
  min-height: 0;
  z-index: 1;
}
.icpr-modal[data-inline="true"] .icpr-grain { display: none; }
.icpr-modal[data-inline="true"] .icpr-wrap {
  padding: 0;
  min-height: 0;
  /* Override the modal-mode max-width so the inline booth fills the host
     container — same column as the wall + header on the unified page. */
  max-width: none;
  width: 100%;
  margin: 0;
  display: block;
}
.icpr-modal[data-inline="true"] .icpr-progress {
  margin-bottom: 18px;
  justify-content: center;
}
/* Belt-and-braces: when inline, no close affordance anywhere. The booth
   IS the page; there's nothing to dismiss. */
.icpr-modal[data-inline="true"] .icpr-head,
.icpr-modal[data-inline="true"] .icpr-close { display: none !important; }
@media (min-width: 900px) {
  .icpr-modal[data-inline="true"] .icpr-wrap { padding: 0; }
}

/* Welcome stage: transcript card + mic button sit side-by-side on wider
   screens so the page doesn't need much scrolling. Stack on narrow. */
.icpr-welcome-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: stretch;
  margin: 8px 0 20px;
}
.icpr-welcome-row .icpr-transcript-card { margin: 0; }
.icpr-welcome-row .icpr-mic-shell {
  margin: 0;
  align-self: center;
  justify-self: center;
}
@media (max-width: 720px) {
  .icpr-welcome-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* The mic is slightly smaller inline so the row sits within one viewport. */
.icpr-modal[data-inline="true"] .icpr-welcome-row .icpr-mic {
  width: 132px; height: 132px;
}
.icpr-modal[data-inline="true"] .icpr-welcome-row .icpr-mic svg { width: 48px; height: 48px; }
.icpr-modal[data-inline="true"] .icpr-welcome-row .icpr-mic[data-state="recording"]::before {
  width: 28px; height: 28px;
}
.icpr-modal[data-inline="true"] .icpr-transcript {
  min-height: 160px; max-height: 420px;
}

.icpr-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(42,21,48,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,21,48,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 30%, black 40%, transparent 80%);
}

.icpr-wrap {
  position: relative; z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px 80px;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
@media (min-width: 900px) {
  .icpr-wrap { padding: 56px 32px 100px; }
}

/* Header */
.icpr-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.icpr-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-2);
  text-decoration: none;
}
.icpr-brand img { width: 26px; height: 26px; display: block; }
.icpr-brand b { color: var(--ink-1); font-weight: 600; }
.icpr-brand em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--purple); letter-spacing: 0; text-transform: none;
  font-size: 14px;
}

.icpr-close {
  width: 52px; height: 52px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.6);
  font-size: 22px; line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.icpr-close:hover { background: white; color: var(--ink-1); border-color: var(--border-strong); }
.icpr-modal[data-kiosk="true"] .icpr-close { display: none; }

/* Progress dots — touch-friendly clickable buttons. Each <button>'s
   visual dot is centered in a 32×40 tap target. */
.icpr-progress {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 24px;
}
.icpr-progress .dot {
  position: relative;
  width: 32px; height: 40px;
  border: none; background: transparent; padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex; align-items: center; justify-content: center;
}
.icpr-progress .dot::before {
  content: ""; display: block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong);
  opacity: 0.55;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.icpr-progress .dot.done::before { background: var(--purple); opacity: 0.7; }
.icpr-progress .dot.active::before {
  background: var(--purple); opacity: 1;
  box-shadow: 0 0 0 4px rgba(216,135,238,.25);
  width: 28px; border-radius: 999px;
}
.icpr-progress .dot.reachable:hover::before {
  opacity: 1;
  transform: scale(1.4);
}
.icpr-progress .dot:disabled { cursor: not-allowed; }
.icpr-progress .dot:focus-visible::before {
  outline: 2px solid var(--purple);
  outline-offset: 4px;
}

/* Stage shell */
.icpr-stage { flex: 1; }
.icpr-stage[data-active="false"] { display: none; }

.icpr-kicker {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--purple);
  margin-bottom: 10px;
}
.icpr-h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 5vw, 44px); line-height: 1.08;
  letter-spacing: -0.02em; color: var(--ink-1);
  margin: 0 0 14px;
}
.icpr-h em { font-style: italic; color: var(--purple); }
.icpr-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(15px, 2.2vw, 18px); line-height: 1.55;
  color: var(--ink-2); max-width: 560px;
  margin: 0 0 32px;
}

/* ---------------- Stage: Welcome ----------------- */
.icpr-transcript-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  margin: 4px 0 24px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(42,21,48,0.05);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.icpr-transcript-card[data-recording="true"] {
  border-color: rgba(193,74,74,0.45);
  box-shadow: 0 12px 36px rgba(193,74,74,0.14);
}
.icpr-transcript-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(250,246,241,0.5);
}
.icpr-rec-indicator {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.icpr-transcript-card[data-recording="true"] .icpr-rec-indicator { color: var(--bad); }
.icpr-rec-indicator .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bad);
  animation: icprBlink 1.1s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(193,74,74,0.6);
}
@keyframes icprBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(193,74,74,0.55); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 8px rgba(193,74,74,0); }
}
.icpr-rec-time {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em; min-width: 42px; text-align: right;
}
.icpr-transcript {
  width: 100%;
  min-height: 180px; max-height: 380px;
  padding: 22px 24px;
  border: none; outline: none; resize: vertical;
  background: transparent;
  font-family: var(--serif);
  font-size: clamp(17px, 2.4vw, 22px); line-height: 1.55;
  color: var(--ink-1);
  display: block;
  letter-spacing: -0.005em;
}
.icpr-transcript::placeholder { color: var(--ink-3); font-style: italic; }
.icpr-transcript:focus { background: rgba(216,135,238,0.04); }
.icpr-transcript-card[data-recording="true"] .icpr-transcript {
  background: rgba(193,74,74,0.025);
  /* Subtle pulse on the box itself so it feels alive while recording */
  animation: icprBoxPulse 2.4s ease-in-out infinite;
}
@keyframes icprBoxPulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(193,74,74,0); }
  50%      { box-shadow: inset 0 0 0 1px rgba(193,74,74,0.06); }
}

/* ---- Live waveform (default mode; ?words=1 opts out) ----
   While recording, the sound's waves are the live feedback and the transcript
   box is hidden. The words are revealed (commitTextToTarget re-render) once the
   user taps the mic to stop. Scoped to .icpr-waves so ?words=1 is unaffected. */
.icpr-waveform { display: none; }
.icpr-waves .icpr-transcript-card[data-recording="true"] .icpr-transcript { display: none; }
.icpr-waves .icpr-transcript-card[data-recording="true"] .icpr-waveform {
  display: block;
  width: 100%;
  height: 200px;
  padding: 16px 20px;
  box-sizing: border-box;
}
/* The waveform is the level indicator now — drop the thin foot bar while live. */
.icpr-waves .icpr-transcript-card[data-recording="true"] .icpr-level { visibility: hidden; }
/* Conversation composer: a compact waveform swaps in for the answer box. */
.icpr-waveform-mini { display: none; }
.icpr-waves .icpr-composer[data-recording="true"] textarea { display: none; }
.icpr-waves .icpr-composer[data-recording="true"] .icpr-waveform-mini {
  display: block;
  flex: 1;
  height: 40px;
  align-self: center;
}
/* Hide native + extension UI that would compete with the live transcript:
   Chrome's textarea dictation button, Grammarly's overlay, etc. */
.icpr-transcript::-webkit-search-cancel-button,
.icpr-transcript::-webkit-search-decoration { display: none; }
grammarly-extension,
.icpr-transcript ~ grammarly-extension { display: none !important; }
.icpr-transcript-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: rgba(250,246,241,0.5);
}
.icpr-transcript-foot .icpr-level { flex: 1; max-width: 280px; height: 6px; }
.icpr-transcript-foot .icpr-mic-meta { margin: 0; }

/* Voice-detected pip — sits left of the level meter. Stays dim until the
   meter sees audio above ~4%. Once it lights up, the user knows the mic
   is reaching the page. */
.icpr-voice-pip {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(42,21,48,0.18);
  flex-shrink: 0;
  transition: background .15s ease, box-shadow .15s ease;
}
.icpr-voice-pip[data-active="true"] {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(38,146,128,0.18);
}

/* Engine badge — sits in the foot of the transcript card. */
[data-engine-badge] {
  display: inline-block;
  padding: 1px 6px; border-radius: 4px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: none;
  font-weight: 500;
  background: rgba(152,53,186,0.10); color: var(--purple);
}
[data-engine-badge][data-engine="whisper"] {
  background: rgba(201,161,98,0.16); color: #8a6a2b;
}
[data-engine-badge][data-engine="groq"] {
  background: rgba(38,146,128,0.14); color: var(--green);
}
[data-engine-badge][data-engine="none"] {
  background: rgba(42,21,48,0.06); color: var(--ink-3);
}

/* Watchdog hint — only appears when the watchdog detects "nothing happening"
   while supposedly recording. Soft amber so it reads as advice, not error. */
.icpr-diag-hint {
  padding: 10px 18px 0;
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: #8a6a2b;
  line-height: 1.45;
}

.icpr-mic-shell {
  display: flex; flex-direction: column; align-items: center;
  gap: 22px; margin: 8px 0 28px;
}
.icpr-mic {
  position: relative;
  width: 168px; height: 168px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--purple) 0%, var(--purple-soft) 100%);
  color: white;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 48px rgba(152,53,186,0.35),
              inset 0 -3px 8px rgba(0,0,0,0.18);
  transition: transform .15s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.icpr-mic:hover { transform: translateY(-2px); }
.icpr-mic:active { transform: scale(0.97); }
.icpr-mic:disabled { opacity: 0.45; cursor: not-allowed; }
.icpr-mic svg { width: 64px; height: 64px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.icpr-mic[data-state="recording"] {
  background: linear-gradient(160deg, var(--bad) 0%, #ee7373 100%);
  box-shadow: 0 18px 48px rgba(193,74,74,0.35),
              inset 0 -3px 8px rgba(0,0,0,0.18);
}
.icpr-mic[data-state="recording"] svg { display: none; }
.icpr-mic[data-state="recording"]::before {
  content: ""; width: 36px; height: 36px;
  background: white; border-radius: 6px;
}
.icpr-mic[data-state="recording"]::after {
  content: ""; position: absolute; inset: -8px;
  border-radius: 50%;
  border: 3px solid rgba(193,74,74,0.45);
  animation: icprPulse 1.6s ease-out infinite;
}
.icpr-mic[data-state="processing"] {
  background: linear-gradient(160deg, var(--ink-2) 0%, var(--ink-3) 100%);
}
.icpr-mic[data-state="processing"] svg {
  width: 48px; height: 48px;
  animation: icprSpin 1.1s linear infinite;
}
@keyframes icprPulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes icprSpin {
  to { transform: rotate(360deg); }
}

.icpr-mic-label {
  font-family: var(--serif); font-style: italic;
  font-size: 17px; color: var(--ink-2); text-align: center;
  min-height: 24px;
}
.icpr-mic-meta {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.icpr-mic-meta b { color: var(--ink-2); font-weight: 500; }

.icpr-level {
  width: 100%; max-width: 220px;
  height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(42,21,48,0.08);
}
.icpr-level span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--green), var(--purple));
  transition: width .12s linear;
}

.icpr-tip-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 16px 0 0;
}
@media (max-width: 640px) { .icpr-tip-row { grid-template-columns: 1fr; } }
.icpr-tip {
  padding: 14px 16px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--ink-2); line-height: 1.5;
}
.icpr-tip b {
  display: block;
  font-family: var(--mono); font-style: normal; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--purple); margin-bottom: 6px; font-weight: 500;
}

/* ---------------- Stage: Transcript / Conversation ----------------- */
.icpr-conv {
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 20px;
  min-height: 240px;
}
.icpr-bubble {
  padding: 14px 16px;
  border-radius: 14px;
  font-family: var(--serif);
  font-size: 16px; line-height: 1.55;
  max-width: 92%;
  animation: icprFadeIn .35s ease both;
}
.icpr-bubble.q {
  align-self: flex-start;
  background: rgba(216,135,238,0.10);
  border: 1px solid rgba(152,53,186,0.18);
  color: var(--ink-1);
  font-style: italic;
}
.icpr-bubble.a {
  align-self: flex-end;
  background: var(--ink-1);
  color: #faf6f1;
  font-style: normal;
}
.icpr-bubble.a.interim {
  background: rgba(42,21,48,0.6);
  color: rgba(255,255,255,0.85);
  font-style: italic;
}
.icpr-bubble small {
  display: block;
  font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.55; margin-bottom: 6px;
}
.icpr-bubble.q small { color: var(--purple); }
.icpr-bubble.a small { color: rgba(255,255,255,0.6); }
/* Multiple-choice options under the opening question. Vertical stack of
   tappable buttons; tap one to send it as the answer. Custom text in the
   composer still works as the override if no option fits. */
.icpr-q-options {
  display: flex; flex-direction: column;
  gap: 8px; margin-top: 12px;
}
.icpr-q-opt {
  display: block; width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(152,53,186,0.22);
  background: rgba(255,255,255,0.85);
  font-family: var(--serif);
  font-size: 14.5px; line-height: 1.4;
  color: var(--ink-1);
  cursor: pointer;
  touch-action: manipulation;
  transition: all .15s ease;
  min-height: 44px;
}
.icpr-q-opt:hover {
  background: rgba(216,135,238,0.12);
  border-color: var(--purple);
  transform: translateX(2px);
}
.icpr-q-opt:active { transform: scale(0.98); }
.icpr-q-opt:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
/* Multi-select: a picked option fills in. Tap again to unpick. */
.icpr-q-opt.on,
.icpr-q-opt[aria-pressed="true"] {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}
.icpr-q-opt.on:hover,
.icpr-q-opt[aria-pressed="true"]:hover {
  background: #ad3fd1;
  border-color: #ad3fd1;
  color: #fff;
}
.icpr-q-opt[aria-pressed="true"]::after {
  content: "✓";
  float: right;
  margin-left: 8px;
  font-weight: 600;
}
/* Footer under the multi-select options: hint + Continue button. */
.icpr-q-multi-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.icpr-q-multi-hint {
  font-family: var(--serif); font-style: italic;
  font-size: 12.5px; color: var(--ink-3);
}
.icpr-q-continue { padding: 8px 16px; font-size: 13px; min-height: 40px; }
.icpr-q-continue:disabled { opacity: 0.45; cursor: not-allowed; }

.icpr-typing {
  display: inline-flex; gap: 4px; padding: 4px 0;
}
.icpr-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple);
  animation: icprDot 1.2s ease-in-out infinite;
}
.icpr-typing span:nth-child(2) { animation-delay: 0.15s; }
.icpr-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes icprDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}
@keyframes icprFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.icpr-composer {
  display: flex; align-items: flex-end; gap: 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 12px 12px 12px 20px;
  box-shadow: 0 6px 20px rgba(42,21,48,0.06);
}
.icpr-composer textarea {
  flex: 1;
  border: none; outline: none; resize: none;
  background: transparent;
  font-family: var(--serif); font-size: 17px;
  color: var(--ink-1);
  min-height: 36px; max-height: 160px;
  padding: 8px 0;
  line-height: 1.45;
}
.icpr-composer textarea::placeholder {
  font-style: italic; color: var(--ink-3);
}
/* Phones: keep the composer short (~3 lines, scrolls inside) so the
   conversation above it stays on screen. */
@media (max-width: 720px) {
  .icpr-composer textarea { max-height: 96px; }
}
.icpr-composer-actions { display: flex; gap: 8px; align-items: center; }

.icpr-iconbtn {
  width: 52px; height: 52px; border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.8);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.icpr-iconbtn:hover { background: white; border-color: var(--purple); color: var(--purple); }
.icpr-iconbtn[data-state="recording"] {
  background: var(--bad); border-color: var(--bad); color: white;
}
.icpr-iconbtn[data-state="processing"] { color: var(--purple); }
.icpr-iconbtn[data-state="processing"] svg { animation: icprSpin 1.1s linear infinite; }
.icpr-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.icpr-iconbtn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.icpr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  border-radius: 14px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.8);
  color: var(--ink-1);
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
}
.icpr-btn:hover { background: white; border-color: var(--border-strong); }
.icpr-btn.primary {
  background: var(--purple); color: white; border-color: var(--purple);
  box-shadow: 0 6px 18px rgba(152,53,186,0.25);
}
.icpr-btn.primary:hover { background: #ad3fd1; box-shadow: 0 10px 24px rgba(152,53,186,0.32); }
.icpr-btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.icpr-btn.ghost:hover { background: rgba(42,21,48,0.04); color: var(--ink-1); }
.icpr-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.icpr-footrow {
  margin-top: 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.icpr-footrow .hint {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--ink-3);
}

/* ---------------- Stage: Summary / Lead ---------------- */
.icpr-summary-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 10px 28px rgba(42,21,48,0.06);
}
.icpr-summary-card .ttl {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--purple); margin-bottom: 10px;
}
.icpr-summary-card h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.01em;
  margin: 0 0 14px; color: var(--ink-1);
}
.icpr-summary-card .pitch {
  font-family: var(--serif); font-size: 15px; line-height: 1.6;
  color: var(--ink-2); font-style: italic;
  border-left: 2px solid var(--purple);
  padding-left: 14px; margin-bottom: 18px;
}
.icpr-summary-card .fields {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
@media (max-width: 600px) { .icpr-summary-card .fields { grid-template-columns: 1fr; } }
.icpr-summary-card .f label {
  display: block;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 4px;
}
.icpr-summary-card .f .v {
  font-family: var(--serif); font-size: 14px; line-height: 1.45;
  color: var(--ink-1);
}
.icpr-summary-card .tags {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px;
}
.icpr-summary-card .tag {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(152,53,186,0.10); color: var(--purple);
}

.icpr-lead {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
}
.icpr-lead h3 {
  font-family: var(--serif); font-weight: 500; font-size: 20px;
  margin: 0 0 6px;
}
.icpr-lead p {
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--ink-2); margin: 0 0 16px; line-height: 1.55;
}
.icpr-lead .grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 600px) { .icpr-lead .grid { grid-template-columns: 1fr; } }
.icpr-lead label {
  display: block;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.icpr-lead input {
  width: 100%;
  padding: 16px 18px;
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(250,246,241,0.6);
  font-family: var(--serif); font-size: 17px;
  color: var(--ink-1);
  outline: none;
  transition: all .2s ease;
}
.icpr-lead .row-opt input[type="checkbox"] {
  width: 24px; height: 24px;
}
.icpr-lead input:focus {
  border-color: var(--purple);
  background: white;
  box-shadow: 0 0 0 4px rgba(216,135,238,0.18);
}
.icpr-lead .row-opt {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
  font-family: var(--serif); font-size: 13.5px; color: var(--ink-2);
}
.icpr-lead .row-opt input[type="checkbox"] {
  width: 18px; height: 18px; margin: 0; accent-color: var(--purple);
}
/* "required" badge on the email label. */
.icpr-lead .lead-req {
  display: inline-block; margin-left: 6px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--purple);
  background: rgba(152,53,186,0.10);
  padding: 2px 6px; border-radius: 999px; vertical-align: middle;
}
/* "we'll sharpen this headline" note under the summary title. */
.icpr-title-note {
  margin: 2px 0 10px;
  font-family: var(--serif); font-style: italic;
  font-size: 12px; color: var(--ink-3);
}
.icpr-lead .err {
  margin-top: 10px;
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--bad);
}

/* ---------------- Stage: Done ---------------- */
.icpr-done {
  text-align: center; padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.icpr-done .glyph {
  width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(160deg, var(--green), #4cb39c);
  color: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 40px rgba(38,146,128,0.28);
  margin-bottom: 6px;
}
.icpr-done .glyph svg { width: 44px; height: 44px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.icpr-done h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 32px; letter-spacing: -0.02em; line-height: 1.1;
  margin: 0;
}
.icpr-done h2 em { font-style: italic; color: var(--purple); }
.icpr-done p {
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--ink-2); margin: 0;
  max-width: 480px; line-height: 1.55;
}
.icpr-done .actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 18px;
}

/* Mic permission / error banner */
.icpr-banner {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(193,74,74,0.08);
  border: 1px solid rgba(193,74,74,0.25);
  color: var(--bad);
  font-family: var(--serif); font-style: italic; font-size: 13.5px;
  margin: 0 0 16px;
}
.icpr-banner.info {
  background: rgba(216,135,238,0.10);
  border-color: rgba(152,53,186,0.22);
  color: var(--ink-1);
}

/* =============================================================================
   PUBLIC IDEAS WALL
   Embedded on the main site (Proposals page) and on the kiosk between sessions.
   ============================================================================= */
.ideas-wall {
  margin-top: 28px;
}
.ideas-wall-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.ideas-wall-h {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 24px; font-weight: 400; letter-spacing: -0.01em;
  margin: 0; color: var(--ink-1, #2a1530);
}
.ideas-wall-h em { font-style: italic; color: var(--purple, #9835BA); }
.ideas-wall-controls {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ideas-wall-meta {
  font-family: var(--mono, monospace); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3, #8a7a98);
}
.ideas-wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.idea-card {
  padding: 20px 22px;
  min-height: 160px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--border, rgba(42,21,48,0.10));
  border-radius: 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.idea-card:hover {
  transform: translateY(-2px);
  border-color: rgba(152,53,186,0.35);
  box-shadow: 0 14px 32px rgba(42,21,48,0.08);
}
.idea-card:active {
  transform: translateY(0) scale(0.99);
}
.idea-card:focus-visible {
  outline: 2px solid var(--purple, #9835BA);
  outline-offset: 3px;
}
.idea-card .ask-chip {
  margin-left: auto;
  font-family: var(--mono, monospace); font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(38,146,128,0.12);
  color: var(--green, #269280);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.idea-card .tag-row { display: flex; gap: 6px; flex-wrap: wrap; }
.idea-card .tag {
  font-family: var(--mono, monospace); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(152,53,186,0.10); color: var(--purple, #9835BA);
}
.idea-card .tag[data-kind="research"]  { background: rgba(38,146,128,0.10); color: var(--green, #269280); }
.idea-card .tag[data-kind="project"]   { background: rgba(152,53,186,0.10); color: var(--purple, #9835BA); }
.idea-card .tag[data-kind="art"]       { background: rgba(242,190,190,0.30); color: #b95a5a; }
.idea-card .tag[data-kind="role"]      { background: rgba(201,161,98,0.18);  color: #8a6a2b; }
.idea-card .tag[data-kind="other"]     { background: rgba(138,122,152,0.16); color: var(--ink-2, #5a3f6b); }
.idea-card .nm {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 17px; font-weight: 500; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--ink-1, #2a1530);
}
.idea-card .pitch {
  font-family: var(--serif, "Fraunces", serif); font-style: italic;
  font-size: 13.5px; line-height: 1.5;
  color: var(--ink-2, #5a3f6b);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.idea-card .foot {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono, monospace); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3, #8a7a98);
  margin-top: auto;
}
.idea-card .foot .by { color: var(--ink-2, #5a3f6b); }
.ideas-wall-empty {
  padding: 32px;
  text-align: center;
  border: 1px dashed var(--rule-strong, rgba(42,21,48,0.22));
  border-radius: 14px;
  font-family: var(--serif, "Fraunces", serif); font-style: italic;
  color: var(--ink-3, #8a7a98);
}

/* CTA on main site (Become a Node area) */
.icpr-cta {
  display: flex; flex-direction: column; gap: 14px;
  margin: 26px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--border, rgba(42,21,48,0.10));
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(242,190,190,0.16), transparent 60%),
    radial-gradient(120% 100% at 100% 100%, rgba(216,135,238,0.16), transparent 60%),
    rgba(255,255,255,0.6);
}
.icpr-cta-h {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
  margin: 0; color: var(--ink-1, #2a1530);
}
.icpr-cta-h em { font-style: italic; color: var(--purple, #9835BA); }
.icpr-cta-sub {
  font-family: var(--serif, "Fraunces", serif); font-style: italic;
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-2, #5a3f6b); margin: 0;
}
.icpr-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.icpr-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 12px;
  font-family: var(--sans, system-ui); font-size: 14px; font-weight: 500;
  background: var(--purple, #9835BA); color: white;
  border: 1px solid var(--purple, #9835BA);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(152,53,186,0.25);
  transition: all .2s ease;
}
.icpr-cta-btn:hover { background: #ad3fd1; box-shadow: 0 10px 26px rgba(152,53,186,0.32); }
.icpr-cta-btn.ghost {
  background: transparent; color: var(--ink-1, #2a1530);
  border-color: var(--border, rgba(42,21,48,0.10)); box-shadow: none;
}
.icpr-cta-btn.ghost:hover { background: rgba(255,255,255,0.7); border-color: var(--border-strong, rgba(42,21,48,0.22)); }

/* =============================================================================
   IDEA DETAIL OVERLAY — opens when a wall card is clicked.
   ============================================================================= */
.idea-detail {
  /* The overlay lives at <body> level, OUTSIDE .icpr-modal — so it can't
     inherit the brand CSS vars defined there. Re-scope them locally so
     anything using var(--purple) etc. resolves correctly inside the card. */
  --bg:           #faf6f1;
  --bg-2:         #fff8ed;
  --surface:      #ffffff;
  --border:       rgba(42,21,48,0.10);
  --border-strong:rgba(42,21,48,0.22);
  --ink-1:        #2a1530;
  --ink-2:        #5a3f6b;
  --ink-3:        #8a7a98;
  --purple:       #9835BA;
  --purple-soft:  #c277dc;
  --green:        #269280;
  --bad:          #c14a4a;
  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "Geist", system-ui, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 8, 22, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px;
  align-items: flex-start; justify-content: center;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  font-family: var(--sans);
}
.idea-detail.open { display: flex; }
.idea-detail-card {
  position: relative;
  background: #faf6f1;
  border-radius: 22px;
  width: 100%; max-width: 720px;
  margin: 32px auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  overflow: hidden;
  display: flex; flex-direction: column;
  color: var(--ink-1, #2a1530);
  animation: ideaDetailIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes ideaDetailIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.idea-detail-close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--border, rgba(42,21,48,0.10));
  background: rgba(255,255,255,0.7);
  font-size: 22px; line-height: 1; color: var(--ink-2, #5a3f6b);
  cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.idea-detail-close:hover { background: white; color: var(--ink-1, #2a1530); }
.idea-detail-head {
  padding: 28px 32px 18px;
  border-bottom: 1px solid var(--border, rgba(42,21,48,0.10));
  background: linear-gradient(180deg, rgba(216,135,238,0.05), transparent);
}
.idea-detail-head .tag-row {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.idea-detail-head h2 {
  font-family: var(--serif, "Fraunces", serif);
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.18; letter-spacing: -0.015em;
  margin: 0 0 10px; color: var(--ink-1, #2a1530);
}
.idea-detail-meta {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-family: var(--mono, monospace); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3, #8a7a98);
}
.idea-detail-meta .src { color: var(--purple, #9835BA); }
.idea-detail-body {
  padding: 22px 32px;
  overflow-y: auto;
  max-height: 60vh;
}
.idea-detail-section { margin-bottom: 22px; }
.idea-detail-section:last-child { margin-bottom: 0; }
.idea-detail-section h4 {
  font-family: var(--mono, monospace); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--purple, #9835BA); font-weight: 500;
  margin: 0 0 10px;
  display: flex; align-items: baseline; gap: 10px;
}
.idea-detail-h4-meta {
  font-family: var(--serif, "Fraunces", serif);
  font-style: italic; font-weight: 400;
  font-size: 11px; letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3, #8a7a98);
  opacity: 0.85;
}
.idea-detail-pitch {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 17px; line-height: 1.6;
  color: var(--ink-1, #2a1530);
  margin: 0;
  font-style: italic;
  border-left: 2px solid var(--purple, #9835BA);
  padding-left: 14px;
}
.idea-detail-transcript {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 15px; line-height: 1.55;
  color: var(--ink-2, #5a3f6b);
}
.idea-detail-transcript p { margin: 0 0 12px; }
.idea-detail-transcript p:last-child { margin-bottom: 0; }
.idea-detail-transcript .qa {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--border, rgba(42,21,48,0.10));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.idea-detail-transcript .qa:last-child { margin-bottom: 0; }
.idea-detail-transcript .qa .q {
  font-family: var(--serif, "Fraunces", serif);
  font-style: italic;
  font-size: 14px;
  color: var(--purple, #9835BA);
  margin-bottom: 6px;
}
.idea-detail-transcript .qa .a {
  font-style: normal;
  font-size: 15px;
  color: var(--ink-1, #2a1530);
}
.idea-detail-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: rgba(250,246,241,0.6);
  flex-wrap: wrap;
}
/* Detail-foot buttons need their own sizing — the global .icpr-btn rules
   are tuned for the booth modal (52px tall, big padding). Here we want
   compact, comfortable, side-by-side. */
.idea-detail-foot .icpr-btn,
.idea-detail-foot a.icpr-btn {
  min-height: 0;
  height: auto;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 10px;
}
/* The Discord CTA — purple at rest, slightly darker on hover. Explicit
   colors (no var fallback ambiguity) so it ALWAYS reads as the primary. */
.idea-detail-foot a.icpr-btn.primary,
.idea-detail-foot .icpr-btn.primary {
  background: #9835BA;
  color: #ffffff;
  border-color: #9835BA;
  box-shadow: 0 4px 14px rgba(152,53,186,0.25);
}
.idea-detail-foot a.icpr-btn.primary:hover,
.idea-detail-foot .icpr-btn.primary:hover {
  background: #ad3fd1;
  border-color: #ad3fd1;
  box-shadow: 0 6px 18px rgba(152,53,186,0.32);
}
.idea-detail-foot .icpr-btn.ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: transparent;
}
.idea-detail-foot .icpr-btn.ghost:hover {
  background: rgba(42,21,48,0.05);
  color: var(--ink-1);
}
@media (max-width: 600px) {
  .idea-detail { padding: 0; }
  .idea-detail-card { margin: 0; border-radius: 0; min-height: 100vh; max-width: 100%; }
  .idea-detail-head { padding: 22px 20px 16px; }
  .idea-detail-body { padding: 18px 20px; max-height: none; }
  /* Comfortable touch targets + clear the iOS home indicator. */
  .idea-detail-foot {
    padding: 14px 20px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .idea-detail-foot .icpr-btn,
  .idea-detail-foot a.icpr-btn { min-height: 44px; padding: 11px 18px; }
}
.idea-detail-ask {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 28px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--green, #269280);
  letter-spacing: -0.01em;
}

/* =============================================================================
   SUMMARY CARD — funding-ask field (large tappable button that opens numpad)
   ============================================================================= */
.icpr-summary-card .fields { gap: 16px 20px; }
.icpr-summary-card .f-ask { margin-top: 4px; }
.icpr-summary-card .f select {
  width: 100%;
  padding: 14px 14px;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(250,246,241,0.6);
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-1);
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.icpr-ask-btn {
  display: flex; width: 100%;
  align-items: center; justify-content: space-between;
  min-height: 64px;
  padding: 16px 20px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(38,146,128,0.05), transparent),
    rgba(250,246,241,0.6);
  font-family: var(--sans);
  cursor: pointer;
  transition: all .2s ease;
  text-align: left;
  touch-action: manipulation;
}
.icpr-ask-btn:hover {
  border-color: rgba(38,146,128,0.4);
  background:
    linear-gradient(180deg, rgba(38,146,128,0.08), transparent),
    white;
}
.icpr-ask-btn:active { transform: scale(0.99); }
.icpr-ask-amount {
  font-family: var(--serif);
  font-size: 22px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--green, #269280);
  letter-spacing: -0.01em;
}
.icpr-ask-btn .icpr-ask-amount:not(:has(*)):empty,
.icpr-ask-amount {
  /* Dim if it's the placeholder dash */
}
.icpr-ask-btn .icpr-ask-edit {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* =============================================================================
   FUNDING BUCKETS — chooser, wall chips, live reflection panel  (Phase 2 + 3)
   These render BOTH inside the modal (CSS vars defined) and standalone on the
   /board/ page (vars absent) — so every colour uses var(--x, fallback).
   ============================================================================= */

/* Small inline hint next to a field label */
.f-hint {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--ink-3, #8a7a98);
}

/* Use-of-funds text input on the summary card */
.icpr-uof-input {
  width: 100%;
  border: 1px solid var(--border, rgba(42,21,48,0.10));
  border-radius: 12px;
  padding: 12px 14px;
  /* 16px (not 14) so iOS Safari doesn't zoom the page on focus. Every other
     text field in the flow is already >=16px for the same reason. */
  font-family: var(--sans, system-ui, sans-serif); font-size: 16px;
  color: var(--ink-1, #2a1530);
  background: var(--surface, #fff);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.icpr-uof-input::placeholder { color: var(--ink-3, #8a7a98); }
.icpr-uof-input:focus {
  outline: none;
  border-color: var(--purple, #9835BA);
  box-shadow: 0 0 0 3px rgba(152,53,186,0.12);
}

/* ---- Bucket chooser (radiogroup) ---- */
.icpr-wallet-pick {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 4px;
}
@media (max-width: 600px) { .icpr-wallet-pick { grid-template-columns: 1fr; } }
.icpr-wallet-opt {
  --wtint: #8a7a98;
  display: flex; align-items: flex-start; gap: 10px;
  text-align: left; cursor: pointer;
  padding: 12px 13px; border-radius: 14px;
  border: 1px solid var(--border, rgba(42,21,48,0.10));
  background: var(--surface, rgba(255,255,255,0.7));
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  min-height: 0;
}
.icpr-wallet-opt:hover { border-color: var(--wtint); }
.icpr-wallet-opt.on {
  border-color: var(--wtint);
  background: rgba(0,0,0,0.03);
  background: color-mix(in srgb, var(--wtint) 9%, transparent);
  box-shadow: inset 0 0 0 1px var(--wtint);
}
.icpr-wallet-opt .ww-badge {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono, monospace); font-size: 10px; font-weight: 600;
  color: #fff; background: var(--wtint);
}
.icpr-wallet-opt .ww-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.icpr-wallet-opt .ww-text b {
  font-family: var(--sans, system-ui, sans-serif); font-size: 13px; font-weight: 600;
  color: var(--ink-1, #2a1530);
}
.icpr-wallet-opt .ww-text em {
  font-style: normal; font-size: 11.5px; line-height: 1.4;
  color: var(--ink-3, #8a7a98);
}
.icpr-wallet-opt .ww-check {
  flex: none; margin-left: auto; align-self: center;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; background: var(--wtint);
  opacity: 0; transform: scale(0.6); transition: all .15s ease;
}
.icpr-wallet-opt.on .ww-check { opacity: 1; transform: scale(1); }

/* ---- Wall card + detail bucket chip ---- */
.wallet-chip {
  --wtint: #8a7a98;
  font-family: var(--mono, monospace); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 7px; border-radius: 999px;
  color: #fff; background: var(--wtint);
}
.idea-card[data-wallet="public-benefit"],
.idea-card[data-wallet="for-profit"],
.idea-card[data-wallet="hybrid"] {
  border-left: 3px solid var(--wtint, transparent);
}
.idea-detail-bucket {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans, system-ui, sans-serif); font-size: 13.5px;
  color: var(--ink-1, #2a1530); margin-top: 8px;
}
.idea-detail-uof {
  font-family: var(--serif, "Fraunces", serif); font-style: italic;
  font-size: 14px; color: var(--ink-2, #5a3f6b); margin-top: 8px;
}
.idea-detail-uof span {
  font-family: var(--mono, monospace); font-style: normal;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3, #8a7a98); margin-right: 6px;
}

/* ---- Live reflection panel (compact strip + full bucket cards) ---- */
.icpr-reflect {
  border: 1px solid var(--border, rgba(42,21,48,0.10));
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  padding: 14px 16px;
}
.icpr-reflect[data-compact="true"] { margin-bottom: 12px; padding: 12px 14px; }
.icpr-reflect-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.icpr-reflect-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono, monospace); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3, #8a7a98);
}
.icpr-reflect-kicker .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green, #269280);
  animation: reflPulse 1.8s ease-in-out infinite;
}
@keyframes reflPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.icpr-reflect-total {
  display: inline-flex; align-items: baseline; gap: 7px; text-decoration: none;
}
.icpr-reflect-total b {
  font-family: var(--serif, "Fraunces", serif); font-weight: 500;
  font-size: 18px; color: var(--ink-1, #2a1530);
  font-variant-numeric: tabular-nums;
}
.icpr-reflect-total em {
  font-style: normal; font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3, #8a7a98);
}
.icpr-reflect-total:hover b { color: var(--purple, #9835BA); }
.icpr-reflect-line {
  margin: 10px 0 0; font-family: var(--serif, "Fraunces", serif);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2, #5a3f6b);
}
.icpr-reflect-line b { font-style: normal; font-weight: 600; }
.icpr-reflect-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;
}
@media (max-width: 560px) { .icpr-reflect-grid { grid-template-columns: 1fr; } }
.icpr-reflect-card {
  --wtint: #8a7a98;
  border: 1px solid var(--border, rgba(42,21,48,0.10));
  border-left: 3px solid var(--wtint);
  border-radius: 12px; padding: 12px 14px;
  background: var(--surface, #fff);
}
.icpr-reflect-card .rc-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.icpr-reflect-card .rc-badge {
  width: 24px; height: 24px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono, monospace); font-size: 10px; font-weight: 700;
  color: #fff; background: var(--wtint);
}
.icpr-reflect-card .rc-top b {
  font-family: var(--sans, system-ui, sans-serif); font-size: 13.5px; font-weight: 600;
  color: var(--ink-1, #2a1530);
}
.icpr-reflect-card p {
  margin: 0; font-size: 12px; line-height: 1.5;
  color: var(--ink-2, #5a3f6b);
  font-family: var(--sans, system-ui, sans-serif);
}
.icpr-reflect-card .rc-figs {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px;
  font-family: var(--mono, monospace); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3, #8a7a98);
}
.icpr-reflect-card .rc-figs b {
  color: var(--ink-1, #2a1530); font-variant-numeric: tabular-nums;
}
.icpr-reflect-foot {
  margin-top: 12px; font-family: var(--sans, system-ui, sans-serif);
  font-size: 11.5px; color: var(--ink-3, #8a7a98); line-height: 1.5;
}
.icpr-reflect-foot a { color: var(--purple, #9835BA); text-decoration: none; }
.icpr-reflect-foot a:hover { text-decoration: underline; }

/* Page-level reflection section spacing on /board/ */
.pg-reflect-section { margin: 40px 0 0; }

/* =============================================================================
   NUMPAD OVERLAY — full-screen, touch-friendly funding-ask input
   ============================================================================= */
.icpr-numpad {
  /* Like .idea-detail, this overlay is appended to <body> — OUTSIDE
     .icpr-modal — so it can't inherit the brand vars defined there.
     Re-scope the same light palette locally so the cream card is
     self-consistent (dark ink, visible borders) regardless of what the
     host page defines. No-op in light mode by design. */
  --bg:           #faf6f1;
  --bg-2:         #fff8ed;
  --surface:      #ffffff;
  --border:       rgba(42,21,48,0.10);
  --border-strong:rgba(42,21,48,0.22);
  --ink-1:        #2a1530;
  --ink-2:        #5a3f6b;
  --ink-3:        #8a7a98;
  --purple:       #9835BA;
  --bad:          #c14a4a;
  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "Geist", system-ui, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  display: none;
  position: fixed; inset: 0;
  z-index: 220;
  background: rgba(14, 8, 22, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 24px;
  align-items: center; justify-content: center;
  font-family: var(--sans);
}
.icpr-numpad.open { display: flex; }
.icpr-numpad-card {
  position: relative;
  background: #faf6f1;
  border-radius: 24px;
  width: 100%; max-width: 460px;
  padding: 28px 24px 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 18px;
  animation: numpadIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes numpadIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.icpr-numpad-close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: white; color: var(--ink-2);
  font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.icpr-numpad-close:hover { background: var(--bg-2); color: var(--ink-1); }
.icpr-numpad-head { text-align: center; }
.icpr-numpad-kicker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--purple); margin-bottom: 12px;
}
.icpr-numpad-display {
  font-family: var(--serif);
  font-size: 44px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  padding: 8px 0;
  word-break: break-all;
  line-height: 1.1;
}
.icpr-numpad-currency {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin-top: 12px;
}
.icpr-numpad-currency button {
  border: 1px solid var(--border);
  background: white;
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 40px;
  font-family: var(--mono); font-size: 11.5px;
  font-weight: 500; letter-spacing: 0.1em;
  color: var(--ink-2); cursor: pointer;
  touch-action: manipulation;
  transition: all .18s ease;
}
.icpr-numpad-currency button:hover { border-color: var(--purple); color: var(--ink-1); }
.icpr-numpad-currency button.on {
  background: var(--ink-1); color: #faf6f1; border-color: var(--ink-1);
}
.icpr-numpad-quick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.icpr-numpad-quick button {
  border: 1px solid var(--border);
  background: rgba(216,135,238,0.07);
  border-radius: 12px;
  padding: 10px;
  min-height: 48px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--purple);
  cursor: pointer;
  touch-action: manipulation;
  transition: all .18s ease;
}
.icpr-numpad-quick button:hover {
  background: rgba(216,135,238,0.18);
  border-color: var(--purple);
}
.icpr-numpad-quick button:active { transform: scale(0.97); }
.icpr-numpad-keys {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.icpr-numpad-keys button {
  border: 1px solid var(--border);
  background: white;
  border-radius: 14px;
  height: 64px;
  font-family: var(--serif); font-size: 26px; font-weight: 500;
  color: var(--ink-1);
  cursor: pointer;
  touch-action: manipulation;
  transition: all .12s ease;
  display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
}
.icpr-numpad-keys button:hover {
  background: var(--bg-2);
  border-color: var(--border-strong);
}
.icpr-numpad-keys button:active {
  background: var(--ink-1); color: #faf6f1; transform: scale(0.97);
}
.icpr-numpad-keys button:disabled { opacity: 0.35; cursor: not-allowed; }
.icpr-numpad-keys button[data-act="back"] {
  background: rgba(193,74,74,0.06); color: var(--bad); border-color: rgba(193,74,74,0.18);
}
.icpr-numpad-keys button[data-act="back"]:hover { background: rgba(193,74,74,0.14); }
.icpr-numpad-foot {
  display: flex; gap: 10px; justify-content: stretch;
  padding-top: 8px;
}
.icpr-numpad-foot .icpr-btn { flex: 1; min-height: 56px; font-size: 16px; }
@media (max-width: 480px) {
  /* Bottom-sheet style on phones — anchor to the bottom edge and keep the
     foot buttons above the iOS home indicator. */
  .icpr-numpad { padding: 12px; align-items: flex-end; }
  .icpr-numpad-card {
    padding: 22px 18px 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    border-radius: 20px;
  }
  .icpr-numpad-display { font-size: 36px; }
  .icpr-numpad-keys button { height: 58px; font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ── Dark mode (html[data-theme=dark] on the host page) ──
   The main site toggles html[data-theme="dark"]; the standalone /board/ page
   never sets it, so every rule below is inert there. Light mode is untouched.
   Page-level dark vars available on the host: --bg-0/1/2, --ink-1/2/3,
   --rule, --rule-strong, --purple, --purple-soft, --purple-glow, --salmon,
   --green.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- 1. Ideas wall cards (light card surfaces → translucent dark) ---- */
html[data-theme="dark"] .idea-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .idea-card:hover {
  border-color: rgba(212,153,238,0.4);
  box-shadow: 0 14px 32px rgba(0,0,0,0.4);
}
/* Amber/rose tag inks are tuned for cream — brighten them for dark. */
html[data-theme="dark"] .idea-card .tag[data-kind="role"] { background: rgba(201,161,98,0.16); color: #d9b97e; }
html[data-theme="dark"] .idea-card .tag[data-kind="art"]  { background: rgba(242,190,190,0.14); color: #e9a3a3; }

/* ---- 2. "Speak your idea" CTA panel ---- */
html[data-theme="dark"] .icpr-cta {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(242,190,190,0.08), transparent 60%),
    radial-gradient(120% 100% at 100% 100%, rgba(216,135,238,0.08), transparent 60%),
    rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .icpr-cta-btn.ghost { border-color: rgba(255,255,255,0.18); }
html[data-theme="dark"] .icpr-cta-btn.ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
}

/* ---- 4. Booth modal — re-scope the palette + dark stage background ---- */
html[data-theme="dark"] .icpr-modal {
  --bg:           #14091e;
  --bg-2:         #1a0e26;
  --surface:      #1d1228;
  --surface-2:    #241731;
  --border:       rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.18);
  --ink-1:        #f3ecf6;
  --ink-2:        #c9b8d4;
  --ink-3:        #8a7a98;
  background: radial-gradient(140% 100% at 50% 30%, #1a0e26, #14091e 60%, #0b0714 100%);
}
/* Inline mount keeps the host page's own background. */
html[data-theme="dark"] .icpr-modal[data-inline="true"] { background: transparent; }

/* Hardcoded light literals inside the modal that the var re-scope can't fix. */
html[data-theme="dark"] .icpr-modal .icpr-close { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .icpr-modal .icpr-close:hover { background: rgba(255,255,255,0.12); }
html[data-theme="dark"] .icpr-modal .icpr-transcript-card { background: var(--surface); }
html[data-theme="dark"] .icpr-modal .icpr-transcript-head,
html[data-theme="dark"] .icpr-modal .icpr-transcript-foot { background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .icpr-modal .icpr-voice-pip { background: rgba(255,255,255,0.18); }
html[data-theme="dark"] .icpr-modal .icpr-voice-pip[data-active="true"] { background: var(--green, #269280); }
html[data-theme="dark"] .icpr-modal [data-engine-badge][data-engine="whisper"] { color: #d9b97e; }
html[data-theme="dark"] .icpr-modal [data-engine-badge][data-engine="none"] { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .icpr-modal .icpr-diag-hint { color: #d9b97e; }
html[data-theme="dark"] .icpr-modal .icpr-level { background: rgba(255,255,255,0.10); }
html[data-theme="dark"] .icpr-modal .icpr-tip { background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .icpr-modal .icpr-conv { background: rgba(255,255,255,0.04); }
/* .icpr-bubble.a keeps background var(--ink-1) — near-white in dark — so its
   hardcoded cream text must flip dark to stay readable. */
html[data-theme="dark"] .icpr-modal .icpr-bubble.a { color: #14091e; }
html[data-theme="dark"] .icpr-modal .icpr-bubble.a small { color: rgba(20,9,30,0.6); }
html[data-theme="dark"] .icpr-modal .icpr-bubble.a.interim {
  background: rgba(255,255,255,0.10);
  color: var(--ink-1);
}
html[data-theme="dark"] .icpr-modal .icpr-bubble.a.interim small { color: rgba(255,255,255,0.6); }
html[data-theme="dark"] .icpr-modal .icpr-q-opt { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .icpr-modal .icpr-q-opt:hover { background: rgba(216,135,238,0.14); }
/* Re-assert selected state (the dark base rule above outranks .icpr-q-opt.on) */
html[data-theme="dark"] .icpr-modal .icpr-q-opt.on,
html[data-theme="dark"] .icpr-modal .icpr-q-opt[aria-pressed="true"] {
  background: var(--purple);
  color: #fff;
}
html[data-theme="dark"] .icpr-modal .icpr-q-opt.on:hover,
html[data-theme="dark"] .icpr-modal .icpr-q-opt[aria-pressed="true"]:hover { background: #ad3fd1; }
html[data-theme="dark"] .icpr-modal .icpr-composer { background: var(--surface); }
html[data-theme="dark"] .icpr-modal .icpr-iconbtn { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .icpr-modal .icpr-iconbtn:hover { background: rgba(255,255,255,0.12); }
/* After :hover so the recording state wins on hover too (mirrors light cascade). */
html[data-theme="dark"] .icpr-modal .icpr-iconbtn[data-state="recording"] { background: var(--bad); }
html[data-theme="dark"] .icpr-modal .icpr-btn { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .icpr-modal .icpr-btn:hover { background: rgba(255,255,255,0.12); }
/* Re-assert variants the dark base rule above would otherwise outrank. */
html[data-theme="dark"] .icpr-modal .icpr-btn.primary { background: var(--purple); }
html[data-theme="dark"] .icpr-modal .icpr-btn.primary:hover { background: #ad3fd1; }
html[data-theme="dark"] .icpr-modal .icpr-btn.ghost { background: transparent; }
html[data-theme="dark"] .icpr-modal .icpr-btn.ghost:hover { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .icpr-modal .icpr-summary-card { background: var(--surface); }
html[data-theme="dark"] .icpr-modal .icpr-summary-card .f select { background-color: rgba(255,255,255,0.05); }
html[data-theme="dark"] .icpr-modal .icpr-ask-btn {
  background:
    linear-gradient(180deg, rgba(38,146,128,0.08), transparent),
    rgba(255,255,255,0.05);
}
html[data-theme="dark"] .icpr-modal .icpr-ask-btn:hover {
  background:
    linear-gradient(180deg, rgba(38,146,128,0.12), transparent),
    rgba(255,255,255,0.10);
}
html[data-theme="dark"] .icpr-modal .icpr-lead { background: var(--surface); }
html[data-theme="dark"] .icpr-modal .icpr-lead input { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] .icpr-modal .icpr-lead input:focus { background: rgba(255,255,255,0.10); }
html[data-theme="dark"] .icpr-modal .icpr-reflect { background: rgba(255,255,255,0.04); }
/* Treasury-reflect widget when mounted OUTSIDE the modal (the /board/ page's
   funding-buckets section). Defining the palette vars here re-themes all its
   var()-driven children; the card background resolves via var(--surface). */
html[data-theme="dark"] .icpr-reflect {
  --border:  rgba(255,255,255,0.10);
  --surface: #1d1228;
  --ink-1:   #f3ecf6;
  --ink-2:   #c9b8d4;
  --ink-3:   #9a8aa8;
  --purple:  #d499ee;
  background: rgba(255,255,255,0.04);
}
/* NB: the recording stop square (.icpr-mic[data-state="recording"]::before)
   intentionally stays white in both themes — do not override it. */

/* ---- 5. Idea-detail overlay ---- */
html[data-theme="dark"] .idea-detail {
  --bg:           #14091e;
  --bg-2:         #1a0e26;
  --surface:      #1d1228;
  --border:       rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.20);
  --ink-1:        #f3ecf6;
  --ink-2:        #c9b8d4;
  --ink-3:        #9a8aa8;
}
html[data-theme="dark"] .idea-detail-card {
  background: #1a0e26;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
html[data-theme="dark"] .idea-detail-close { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .idea-detail-close:hover { background: rgba(255,255,255,0.12); }
html[data-theme="dark"] .idea-detail-transcript .qa { background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .idea-detail-foot { background: rgba(14,8,22,0.5); }
html[data-theme="dark"] .idea-detail-foot .icpr-btn.ghost:hover { background: rgba(255,255,255,0.06); }

/* ---- 3b. Funding numpad — true dark re-scope ---- */
html[data-theme="dark"] .icpr-numpad {
  --bg:           #14091e;
  --bg-2:         #1a0e26;
  --border:       rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.20);
  --ink-1:        #f3ecf6;
  --ink-2:        #c9b8d4;
  --ink-3:        #9a8aa8;
}
html[data-theme="dark"] .icpr-numpad-card {
  background: #1a0e26;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
html[data-theme="dark"] .icpr-numpad-close { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .icpr-numpad-close:hover { background: rgba(255,255,255,0.12); }
html[data-theme="dark"] .icpr-numpad-currency button { background: rgba(255,255,255,0.06); }
/* Selected pill: bg var(--ink-1) is now near-white — flip its text dark. */
html[data-theme="dark"] .icpr-numpad-currency button.on {
  background: var(--ink-1);
  color: #14091e;
  border-color: var(--ink-1);
}
html[data-theme="dark"] .icpr-numpad-keys button { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .icpr-numpad-keys button:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--border-strong);
}
html[data-theme="dark"] .icpr-numpad-keys button:active {
  background: rgba(255,255,255,0.12);
  color: var(--ink-1);
}
/* After :hover/:active so the red tint wins at rest and on hover (as in light). */
html[data-theme="dark"] .icpr-numpad-keys button[data-act="back"] { background: rgba(193,74,74,0.10); }
html[data-theme="dark"] .icpr-numpad-keys button[data-act="back"]:hover { background: rgba(193,74,74,0.18); }
html[data-theme="dark"] .icpr-numpad .icpr-btn.ghost:hover { background: rgba(255,255,255,0.06); }