:root {
  --ink: #16133A;
  --ink-soft: #55527A;
  --canvas: #F5F4FC;
  --surface: #FFFFFF;
  --line: #E1DEF2;
  --coin: #FFD23F;
  --coin-deep: #E8B500;
  --good: #0C8F63;
  --bad: #C73A2B;
  --opt-0: #FF7A66;
  --opt-1: #6DB6FF;
  --opt-2: #4FDDB0;
  --opt-3: #B39BFF;
  --display: 'Bricolage Grotesque', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tabbar-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 10px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }

#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; position: relative; }
@media (min-width: 560px) {
  body { background: radial-gradient(1200px 600px at 50% -10%, #E7E3FF, var(--canvas) 70%); }
  #app { box-shadow: 0 0 0 1px var(--line); background: var(--canvas); }
}

/* ── Top bar ───────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px; background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(10px);
}
.logo { display: flex; align-items: center; gap: 8px; font: 800 21px/1 var(--display); letter-spacing: -0.03em; }
.logo svg { width: 30px; height: 30px; }
.wallet-pill {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 700 16px/1 var(--display); font-variant-numeric: tabular-nums;
  transition: transform .2s;
}
.wallet-pill .coin { width: 22px; height: 22px; }
.wallet-pill.bump { animation: bump .5s ease; }
@keyframes bump { 30% { transform: scale(1.12); } 100% { transform: scale(1); } }
.link-btn { font-weight: 600; padding: 8px 4px; text-decoration: underline; text-underline-offset: 4px; color: var(--ink); }

.coin {
  display: inline-block; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 28%, #FFF0A8 0 12%, var(--coin) 13% 62%, var(--coin-deep) 100%);
  box-shadow: inset 0 0 0 2px rgba(22,19,58,.18);
}

/* ── Screens ───────────────────────────────── */
.screen { flex: 1; padding: 8px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px); display: flex; flex-direction: column; gap: 20px; }
.screen.no-tabs { padding-bottom: 32px; }
.screen-title { font-size: 30px; font-weight: 800; }
.sub { color: var(--ink-soft); }

/* ── Tab bar ───────────────────────────────── */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 480px); z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface);
  border-top: 1px solid var(--line); padding: 6px 8px calc(env(safe-area-inset-bottom) + 6px);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0; border-radius: 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.tab svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] .tab-icon { background: var(--coin); }
.tab-icon { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background .2s; }

/* ── Buttons & fields ──────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 0 22px;
  border-radius: 18px; background: var(--ink); color: #fff; font: 700 18px/1 var(--display); letter-spacing: -0.01em;
  transition: transform .12s, opacity .2s;
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.coin-btn { background: var(--coin); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.small { min-height: 44px; font-size: 16px; width: auto; border-radius: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .label { font-weight: 600; font-size: 15px; }
.input {
  width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line);
  background: var(--surface); font-size: 17px; transition: border-color .15s;
}
textarea.input { resize: none; min-height: 104px; line-height: 1.35; }
.input:focus { outline: none; border-color: var(--ink); }
.hint { font-size: 14px; color: var(--ink-soft); }
.counter { font-size: 13px; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.error { color: var(--bad); font-weight: 600; font-size: 15px; min-height: 1.4em; }

.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: #E9E6F8; border-radius: 16px; }
.segmented button { min-height: 44px; border-radius: 12px; font-weight: 700; color: var(--ink-soft); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(22,19,58,.18); }

/* ── Landing ───────────────────────────────── */
.hero h1 { font-size: clamp(40px, 12.5vw, 54px); font-weight: 800; letter-spacing: -0.035em; }
.hero p { margin-top: 12px; font-size: 18px; color: var(--ink-soft); max-width: 30ch; }
.demo { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.demo-note { font-size: 14px; color: var(--ink-soft); }
.paths { display: grid; gap: 14px; }
.path { padding: 18px; border-radius: 22px; background: var(--surface); display: grid; gap: 6px; }
.path h3 { font-size: 21px; }
.path p { color: var(--ink-soft); }
.cta-stack { display: grid; gap: 10px; }

/* ── Poll tiles (the memorable bit) ────────── */
.poll-q { font: 800 clamp(26px, 8vw, 34px)/1.1 var(--display); letter-spacing: -0.025em; text-wrap: balance; overflow-wrap: anywhere; }
.earn-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface); font-weight: 600; font-size: 15px; }
.earn-chip .coin { width: 24px; height: 24px; }
.tiles { display: grid; gap: 12px; }
.tile {
  position: relative; min-height: 72px; padding: 16px 20px; border-radius: 22px; text-align: left; width: 100%;
  font: 700 20px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere;
  display: flex; align-items: center; transition: transform .14s, opacity .3s, filter .3s;
}
.tile:nth-child(1) { background: var(--opt-0); }
.tile:nth-child(2) { background: var(--opt-1); }
.tile:nth-child(3) { background: var(--opt-2); }
.tile:nth-child(4) { background: var(--opt-3); }
.tile:active { transform: scale(.975); }
.tile.picked { transform: scale(1.02); box-shadow: 0 0 0 4px var(--ink); }
.tiles.locked .tile:not(.picked) { opacity: .28; filter: saturate(.4); }
.tiles.locked .tile { pointer-events: none; }
.poll-actions { display: flex; justify-content: space-between; align-items: center; }
.poll-enter { animation: poll-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes poll-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }

.fly-coin { position: fixed; z-index: 100; width: 36px; height: 36px; pointer-events: none; margin: -18px 0 0 -18px; }
.fly-label { position: fixed; z-index: 100; pointer-events: none; font: 800 22px/1 var(--display); color: var(--ink); background: var(--coin); padding: 7px 12px; border-radius: 999px; transform: translate(-50%, -50%); }

.empty { display: grid; gap: 14px; padding: 28px 4px; justify-items: start; }
.empty h2 { font-size: 30px; font-weight: 800; }
.empty p { color: var(--ink-soft); max-width: 32ch; }
.empty .btn { width: auto; }

/* ── Create ────────────────────────────────── */
.options-list { display: grid; gap: 10px; }
.option-row { display: grid; grid-template-columns: 14px 1fr 44px; align-items: center; gap: 10px; }
.dot { width: 14px; height: 14px; border-radius: 50%; }
.option-row:nth-child(1) .dot { background: var(--opt-0); }
.option-row:nth-child(2) .dot { background: var(--opt-1); }
.option-row:nth-child(3) .dot { background: var(--opt-2); }
.option-row:nth-child(4) .dot { background: var(--opt-3); }
.icon-btn { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--ink-soft); }
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.add-option { justify-self: start; font-weight: 700; padding: 10px 14px; border-radius: 14px; background: #E9E6F8; }
.budget-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--surface); font: 700 17px/1 var(--display); box-shadow: inset 0 0 0 2px var(--line); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.stepper { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; }
.stepper .input { text-align: center; font: 800 26px/1 var(--display); }
.stepper button { border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); font: 800 26px/1 var(--display); }
.summary { padding: 16px 18px; border-radius: 20px; background: var(--surface); display: grid; gap: 4px; }
.summary strong { font: 800 24px/1.15 var(--display); letter-spacing: -0.02em; }
.test-note { font-size: 14px; color: var(--ink-soft); text-align: center; }
.success { display: grid; gap: 18px; justify-items: start; padding-top: 24px; }
.success .big-coin { width: 76px; height: 76px; animation: pop .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.2) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.success h1 { font-size: 40px; font-weight: 800; }
.success .btn { max-width: none; }

/* ── Results ───────────────────────────────── */
.poll-card { background: var(--surface); border-radius: 24px; padding: 18px; display: grid; gap: 14px; }
.poll-card h3 { font-size: 21px; font-weight: 700; overflow-wrap: anywhere; }
.status { justify-self: start; padding: 4px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: #E9E6F8; }
.status.done { background: #CFF5E7; color: #06573C; }
.meter { height: 10px; border-radius: 999px; background: #ECE9FA; overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 999px; background: var(--ink); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.meter-text { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bars { display: grid; gap: 10px; }
.bar { display: grid; gap: 4px; }
.bar-head { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 15px; }
.bar-head span:last-child { font-variant-numeric: tabular-nums; flex: none; }
.bar-track { height: 14px; border-radius: 999px; background: #ECE9FA; overflow: hidden; }
.bar-track > i { display: block; height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.8,.2,1); }

/* ── Wallet ────────────────────────────────── */
.balance-card { padding: 22px 20px; border-radius: 28px; background: var(--ink); color: #fff; display: grid; gap: 6px; }
.balance-card .amt { font: 800 clamp(48px, 15vw, 64px)/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.balance-card .lbl { color: #BDB9E8; font-weight: 500; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { background: var(--surface); border-radius: 20px; padding: 14px 16px; }
.stat b { display: block; font: 800 26px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.stat span { color: var(--ink-soft); font-size: 14px; }
.history { display: grid; }
.history h2 { font-size: 22px; margin-bottom: 6px; }
.entry { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.entry b { font-weight: 600; overflow-wrap: anywhere; }
.entry .amt { font: 800 17px/1.3 var(--display); color: var(--good); font-variant-numeric: tabular-nums; }
.entry .when { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-soft); }
.notice { padding: 14px 16px; border-radius: 18px; background: #FFF3C2; font-size: 15px; }

/* ── Toast & loading ───────────────────────── */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px); transform: translate(-50%, 20px);
  max-width: min(92vw, 440px); padding: 12px 18px; border-radius: 16px; background: var(--ink); color: #fff; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 200; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.skeleton { height: 180px; border-radius: 24px; background: linear-gradient(100deg, #ECE9FA 30%, #F7F6FE 50%, #ECE9FA 70%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}