/* PaidPal — on top of the shared site styles (styles.base.css, same system as Shill/Noticed).
   Blue and white only: one brand blue, pale blue tints, ink text. */

@font-face { font-family: "Geist"; src: url("assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --accent: #2b63d9;
  --accent-hover: #2152bd;
  --accent-soft: #ecf4fd;
  --accent-line: #d3e4f7;
  --sky: #6aa3e6;
  --ice: #d9e9fb;
  --bg-2: #f6f8fc;
  --text: #0b1020;
  --text-2: #3d4558;
  --muted: #646c80;
  --ink: #0b1020;
  --up: #12a866;
  --live: #0b8a55;
  --c-blue: #2b63d9;
  --c-pink: #6aa3e6;
  --c-yellow: #b4d2f2;
  --c-green: #12a866;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-blue: 0 1px 2px rgba(43, 99, 217, .25), 0 10px 26px -10px rgba(43, 99, 217, .55);
}

/* buttons: brand blue is the primary action */
.btn.primary { background: var(--accent); color: #fff; box-shadow: inset 0 1px rgba(255, 255, 255, .18), var(--shadow-blue); }
.btn.primary:hover { background: var(--accent-hover); }
a.coin-card:hover .btn.primary { background: var(--accent-hover); }
.btn.soft { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.btn.soft:hover { transform: translateY(-2px); border-color: var(--accent); }

/* accent words: brand blue, same typeface (no italic serif) */
.hero h1 .accent, .page-head h1 .accent, .accent-serif { font-family: var(--font); font-style: normal; font-weight: inherit; font-size: 1em; letter-spacing: inherit; padding-right: 0; color: var(--accent); }
.coin-header h1 .sym { font-family: var(--font); font-style: normal; font-weight: 500; font-size: .62em; color: var(--accent); letter-spacing: -0.01em; }

/* nav */
.mark { color: var(--accent); }
.brand-name { font-weight: 700; letter-spacing: -0.025em; }
.nav-links a[aria-current="page"] { color: var(--accent); }

/* hero: white with pale-blue washes only */
.hero-glow { background:
  radial-gradient(40% 36% at 14% 22%, rgba(43, 99, 217, .10), transparent 72%),
  radial-gradient(36% 34% at 88% 18%, rgba(106, 163, 230, .12), transparent 72%),
  radial-gradient(40% 36% at 82% 86%, rgba(43, 99, 217, .07), transparent 72%),
  radial-gradient(36% 34% at 10% 84%, rgba(106, 163, 230, .10), transparent 72%); }
.hero h1 { font-size: clamp(44px, 8.2vw, 92px); letter-spacing: -0.045em; }
.hero-sub { max-width: 560px; color: var(--text-2); font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.55; text-shadow: 0 0 18px #fff, 0 0 6px #fff; }
.hero-inner > :nth-child(5) { --d: .38s; }
.coin-pill-ticker { color: var(--accent); }
.coin-pill-copy { background: var(--accent); }
.paid-item strong { color: var(--up); }
.paid-dot { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 700; }

/* flat stand-in shapes (only if WebGL is missing) */
.ff { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 14px 16px rgba(16, 24, 40, .16)); }
.far .ff { opacity: .55; filter: blur(2px) drop-shadow(0 10px 12px rgba(16, 24, 40, .12)); }

/* sections: blue washes */
.section.alt { background: radial-gradient(40% 55% at 88% 50%, rgba(106, 163, 230, .10), transparent 75%), radial-gradient(40% 55% at 8% 30%, rgba(43, 99, 217, .06), transparent 75%), var(--bg-2); }
.page::before { background:
  radial-gradient(34% 50% at 8% 0%, rgba(43, 99, 217, .09), transparent 72%),
  radial-gradient(30% 46% at 92% 4%, rgba(106, 163, 230, .12), transparent 72%),
  radial-gradient(30% 40% at 62% 0%, rgba(43, 99, 217, .05), transparent 72%); }

/* step icons: blue app-tiles */
.tile-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 6px; color: #fff; background: linear-gradient(160deg, #6f8cff, var(--accent) 70%); box-shadow: inset 0 1px rgba(255, 255, 255, .25), var(--shadow-blue); }
.tile-icon.sky { background: linear-gradient(160deg, #b7c8ff, var(--sky) 75%); }
.tile-icon.ice { background: #fff; color: var(--accent); border: 1px solid var(--accent-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 22px -12px rgba(43, 99, 217, .35); }
.tile-icon svg { width: 22px; height: 22px; }
.step .num { color: var(--muted); font-size: 13px; font-weight: 500; }

/* split list / bar in blues */
.split-list li { border-left-color: var(--accent); }
.split-list li + li { border-left-color: var(--sky); }
.split-list li + li + li { border-left-color: var(--ice); }
.sc-bar .seg.a { background: var(--accent); }
.sc-bar .seg.b { background: var(--sky); }
.dot.a { background: var(--accent); }
.dot.b { background: var(--sky); }
.fact-rows { display: grid; }
.fact-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.fact-row .k { color: var(--muted); }
.fact-row .v { font-weight: 600; text-align: right; }

/* recipient chip */
.who-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 4px 12px 4px 4px; border-radius: var(--pill); background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 13px; color: var(--text); }
.who-chip .ini { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--accent); font-size: 10.5px; font-weight: 700; }
.who-chip .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-chip .em { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--line-2); background: #fff; font-size: 11px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }

/* coin art tile */
.coin-logo.art { border: 0; background: var(--bgc, var(--accent)); box-shadow: inset 0 1px rgba(255, 255, 255, .25); }
.coin-logo.art svg { width: 54%; height: 54%; color: #fff; }

/* explore cards */
.coin-card .pays { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.coin-card .pays .k { color: var(--muted); font-size: 12.5px; flex: 0 0 auto; }
.mini-stat .v.up { color: var(--up); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--live); font-weight: 500; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px rgba(18, 168, 102, .16); }

/* payouts list */
.payout-list { display: grid; }
.payout-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); color: inherit; }
.payout-row:first-child { border-top: 0; }
a.payout-row:hover .amt { color: var(--accent); }
.payout-row .ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #e8f7ef; color: var(--up); }
.payout-row .ic svg { width: 18px; height: 18px; }
.payout-row .to { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.payout-row .sub { color: var(--muted); font-size: 12.5px; }
.payout-row .amt { font-size: 16px; font-weight: 700; color: var(--up); font-variant-numeric: tabular-nums; text-align: right; }
.payout-row .amt small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }

/* $PAIDPAL card */
.token-head { display: flex; align-items: center; gap: 14px; }
.token-head .t { display: grid; gap: 2px; }
.token-head .t strong { font-size: 22px; letter-spacing: -0.03em; }
.token-head .t span { color: var(--muted); font-size: 14px; }
.badge-soft { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.badge-soft::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat-box { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.stat-box .k { color: var(--muted); font-size: 12.5px; }
.stat-box .v { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-box.blue { background: var(--accent-soft); border-color: var(--accent-line); }
.stat-box.blue .k { color: var(--accent); }

/* closing call to action */
.cta-band { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: clamp(32px, 5vw, 56px); border-radius: 28px; color: #fff; background: radial-gradient(60% 90% at 90% 10%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(150deg, #3f8ee0, var(--accent) 55%, #2552c4); box-shadow: 0 30px 70px -30px rgba(43, 99, 217, .7); }
.cta-band h2 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; }
.cta-band p { color: rgba(255, 255, 255, .86); font-size: 17px; margin-top: 12px; }
.cta-form { display: grid; gap: 10px; }
.cta-form label { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.cta-form .row { flex-wrap: nowrap; }
.cta-form .input { height: 54px; border-radius: var(--pill); border: 0; padding: 0 20px; font-size: 16px; box-shadow: none; }
.cta-form .input:focus { box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }
.cta-form .btn { height: 54px; background: #fff; color: var(--accent); box-shadow: 0 10px 24px -10px rgba(11, 16, 32, .45); }
.cta-form .btn:hover { background: #f2f5ff; }
.cta-form .help { color: rgba(255, 255, 255, .8); }

/* footer */
.footer-note { color: var(--muted); font-size: 13px; }

/* launch: people who get paid */
.people { display: grid; gap: 12px; }
.person { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 96px 40px; gap: 10px; align-items: end; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: #fbfcfe; }
.person.solo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.person .fld-label { font-size: 12.5px; color: var(--text-2); }
.person .rm { width: 40px; height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--muted); font-size: 18px; cursor: pointer; }
.person .rm:hover { color: var(--danger); border-color: rgba(217, 45, 67, .4); }
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-icon .input { padding-left: 38px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 2px; }
.switch-row .t { display: grid; gap: 2px; }
.switch-row .t strong { font-size: 14px; font-weight: 600; }
.switch-row .t span { color: var(--muted); font-size: 13px; }
.switch { position: relative; flex: 0 0 auto; width: 46px; height: 28px; border-radius: var(--pill); border: 0; padding: 0; background: #dde2ec; cursor: pointer; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .25); transition: transform .2s var(--ease); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.add-person { justify-self: start; }
.review-people { display: grid; gap: 8px; }
.review-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.review-person .who-chip { background: #fff; }
.review-person .pct { font-weight: 600; font-variant-numeric: tabular-nums; }
.rules { display: grid; gap: 8px; padding: 14px 16px; margin: 4px 0 18px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 13px; color: var(--text-2); }
.rules div { display: flex; justify-content: space-between; gap: 12px; }
.rules strong { color: var(--text); }

/* coin page */
.recip { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.recip:first-of-type { border-top: 0; }
.recip .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; }
.recip .nm { font-weight: 600; font-size: 15px; }
.recip .em { color: var(--muted); font-size: 13px; }
.recip .val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.recip .val small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.goal { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13.5px; }
.goal .bar { height: 8px; border-radius: var(--pill); background: #e4e9f5; overflow: hidden; }
.goal .bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.chart-svg { display: block; width: 100%; height: 280px; }
.chart-tabs { display: flex; gap: 6px; }
.curve-bar span { background: var(--accent) !important; }

/* claim page */
.claim-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.claim-main, .claim-side { display: grid; gap: 24px; min-width: 0; }
.claim-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: 16px; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.claim-total .k { color: var(--accent); font-size: 13px; font-weight: 600; }
.claim-lines { display: grid; }
.claim-line { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.claim-line:first-child { border-top: 0; }
.claim-line .sub { color: var(--muted); font-size: 12.5px; }
.claim-line .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.claim-line .v small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.claim-line .v small.warn { color: var(--warn); }
.track { display: grid; gap: 0; }
.track-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 18px; }
.track-step:last-child { padding-bottom: 0; }
.track-step::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--line-2); }
.track-step:last-child::before { display: none; }
.track-step.done::before { background: var(--accent); }
.track-step .dotx { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-2); background: #fff; color: var(--muted); font-size: 12px; font-weight: 700; }
.track-step.done .dotx { border-color: var(--accent); background: var(--accent); color: #fff; }
.track-step.now .dotx { border-color: var(--accent); color: var(--accent); }
.track-step .dotx svg { width: 14px; height: 14px; }
.track-step strong { display: block; font-size: 14.5px; line-height: 30px; }
.track-step span { color: var(--muted); font-size: 13px; }
.link-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
.link-box code { font-family: var(--mono); font-size: 14px; color: var(--accent); overflow-wrap: anywhere; }

/* admin */
.admin-flag { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--pill); background: #fff4e5; color: #9a5b00; font-size: 12.5px; font-weight: 600; border: 1px solid #ffe0b2; }
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.queue { display: grid; }
.q-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.6fr); gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.q-row:first-child { border-top: 0; }
.q-row .em { font-family: var(--mono); font-size: 13.5px; overflow-wrap: anywhere; }
.q-row .sub { color: var(--muted); font-size: 12.5px; }
.q-row .amt { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.q-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.q-actions .input { height: 38px; width: 190px; font-size: 13.5px; }
.q-done { display: inline-flex; align-items: center; gap: 6px; color: var(--up); font-weight: 600; font-size: 13.5px; }

/* receipt */
.receipt-big { font-size: clamp(44px, 7vw, 64px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--up); font-variant-numeric: tabular-nums; }

/* docs */
.fee-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 8px; }
.fee-table td { padding: 12px 0; border-top: 1px solid var(--line); }
.fee-table td:last-child { text-align: right; font-weight: 600; }

/* routing: one view at a time */
[data-page] { display: none; }
[data-page].on { display: block; }

@media (max-width: 960px) {
  .claim-grid, .cta-band { grid-template-columns: minmax(0, 1fr); }
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-row { grid-template-columns: minmax(0, 1fr) auto; }
  .q-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .person, .person.solo { grid-template-columns: minmax(0, 1fr); }
  .person .rm { width: 100%; }
  .cta-form .row { flex-wrap: wrap; }
  .cta-form .btn { width: 100%; }
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .q-actions .input { width: 100%; }
}

/* fixes after the first render */
.section-head h2, .split-copy h2 { line-height: 1.08; }
.token-ca { justify-content: flex-start; }
.token-ca button { margin-left: auto; }
.admin-flag { justify-self: start; }
.q-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, .55fr) minmax(0, 2.2fr); }
.q-actions { flex-wrap: nowrap; }
.q-actions .input { width: 180px; }
.ca-pill button { background: var(--accent); }
.claim-empty { display: grid; justify-items: center; gap: 10px; padding: 44px 24px; text-align: center; border-radius: var(--radius-lg); border: 1px dashed var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 55%, #fff); }
.claim-empty .tile-icon { margin: 0; }
.claim-empty h3 { font-size: 18px; font-weight: 600; }
.claim-empty p { color: var(--muted); font-size: 14.5px; max-width: 380px; }
@media (max-width: 960px) { .q-actions { flex-wrap: wrap; } }
@media (max-width: 520px) {
  .hero { padding-top: 150px; }
  .nav-actions a.btn.ghost { display: none; }
}

@media (max-width:420px){.hero h1{font-size:40px}}

/* live site: launch status, empty states, admin forms */
.launch-status { margin-top: 12px; font-size: 14px; line-height: 1.45; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--text); }
.launch-status:empty { display: none; }
.launch-status.err { background: rgba(217, 45, 67, .06); color: var(--danger); }
.launch-status.ok { background: rgba(15, 159, 97, .07); color: var(--live); }
.launch-status .btn { margin-top: 8px; }
.empty-card { padding: 28px 22px; text-align: center; color: var(--text-2); }
.empty-card h3 { margin: 0 0 6px; color: var(--text); font-size: 17px; }
.empty-card p { margin: 0 0 14px; }
.paid-item.static { opacity: .85; }
.q-buy { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.q-buy .input { width: 260px; height: 36px; font-size: 13px; }
.coin-logo.ph { background: radial-gradient(120% 120% at 30% 20%, #6aa3e6, #2b63d9 70%); }
.mono-s { font-family: var(--mono); font-size: 12.5px; }
.chart-empty { display: grid; place-items: center; height: 280px; color: var(--muted); font-size: 14px; border-radius: 14px; background: var(--accent-soft); }
/* admin rows: who + amount on top, actions on their own line */
.q-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
.q-row .amt { text-align: right; }
.q-actions, .q-buy { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
.q-actions .input { width: 220px; }
@media (max-width: 640px) { .q-actions .input, .q-buy .input { width: 100%; } }

/* logo gradient (#2958D2 → #3E97DA) on the main actions and the CTA band */
.btn.primary { background: linear-gradient(180deg, #2958d2, #3a86da); }
.btn.primary:hover, a.coin-card:hover .btn.primary { background: linear-gradient(180deg, #2350c2, #3279c9); }
.cta-band { background: radial-gradient(60% 90% at 90% 10%, rgba(255, 255, 255, .16), transparent 60%), linear-gradient(160deg, #2958d2, #3e97da); }