/* Peda web app — mirrors the Flutter app (ng.peda.mobile).
   Tokens come straight from the app's screens. Prefix: pa- */

:root {
  color-scheme: light;
  --pa-black: #000;
  --pa-ink: #111;
  --pa-white: #fff;
  --pa-bg: #F5F5F5;
  --pa-field: #F5F5F5;
  --pa-line: #E5E7EB;
  --pa-line-soft: #F0F0F0;
  --pa-soft: #FAFAFA;
  --pa-chip: #F3F4F6;
  --pa-t1: #111;
  --pa-t2: #4B5563;
  --pa-t3: #888;
  --pa-t4: #9CA3AF;
  --pa-hint: #BBB;
  --pa-green: #059669;
  --pa-red: #DC2626;
  --pa-amber: #F59E0B;
  --pa-font: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; }
html, body { max-width: 100%; overflow-x: clip; }
.pa-body, .pa-body button, .pa-body a, .pa-body input { touch-action: manipulation; }
body.pa-body { font-family: var(--pa-font); color: var(--pa-t1); background: #E9E9EB; -webkit-font-smoothing: antialiased; }
:where(.pa-body) a { color: inherit; text-decoration: none; }
.pa-body button { font-family: inherit; cursor: pointer; }
.pa-body input, .pa-body select, .pa-body textarea { font-family: inherit; }

/* icons (Material Icons Round — same glyphs as Flutter's *_rounded icons) */
.mi { font-family: 'Material Icons Round'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; user-select: none; }

/* phone column: the app, centered on large screens */
.pa-stage { min-height: 100vh; display: flex; justify-content: center; }
.pa-phone { position: relative; width: 100%; max-width: 430px; min-height: 100vh; background: var(--pa-bg); }
@media (min-width: 480px) { .pa-phone { box-shadow: 0 0 40px rgba(0,0,0,.08); } }
.pa-page { padding: 28px 15px 110px; }
.pa-page--plain { padding-bottom: 28px; }

/* buttons */
.pa-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border: 0; border-radius: 10px; background: var(--pa-black); color: #fff; font-size: 15px; font-weight: 700; }
.pa-btn[disabled] { opacity: .55; cursor: default; }
.pa-btn--sheet { height: 48px; border-radius: 14px; font-size: 14px; }
.pa-btn--red { background: var(--pa-red); }

/* ── Home ── */
.pa-head { display: flex; align-items: center; gap: 10px; }
.pa-avatar { width: 36px; height: 36px; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; }
.pa-greet { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--pa-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-greet b { font-weight: 800; color: var(--pa-ink); }
.pa-bell { position: relative; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--pa-line); display: grid; place-items: center; color: #000; flex: none; }
.pa-bell .mi { font-size: 18px; }
.pa-bell i { position: absolute; right: -2px; top: -2px; width: 17px; height: 17px; border-radius: 50%; background: var(--pa-red); border: 2px solid var(--pa-bg); color: #fff; font-style: normal; font-size: 8.5px; font-weight: 800; display: grid; place-items: center; }

.pa-balance { margin-top: 16px; background: #000; border-radius: 20px; padding: 20px; display: flex; align-items: center; gap: 12px; }
.pa-balance-main { flex: 1; min-width: 0; }
.pa-balance-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.5); }
.pa-balance-label button { background: none; border: 0; padding: 0; color: rgba(255,255,255,.5); display: grid; }
.pa-balance-label .mi { font-size: 14px; }
.pa-balance-amt { margin-top: 6px; font-size: 18px; font-weight: 800; letter-spacing: -.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-fund { display: flex; align-items: center; gap: 5px; background: #fff; color: #000; border: 0; border-radius: 12px; padding: 11px 14px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.pa-fund .mi { font-size: 16px; }

.pa-actions { margin-top: 12px; display: flex; gap: 8px; }
.pa-action { flex: 1; min-width: 0; background: #000; border-radius: 14px; padding: 14px 6px; display: flex; flex-direction: column; align-items: center; color: #fff; border: 0; }
.pa-action-ic { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; }
.pa-action-ic .mi { font-size: 20px; }
.pa-action span.t { margin-top: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }

.pa-services { margin-top: 14px; background: #fff; border-radius: 18px; box-shadow: 0 3px 6px rgba(0,0,0,.04); padding: 18px; display: flex; justify-content: space-between; }
.pa-svc { background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.pa-svc-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--pa-chip); display: grid; place-items: center; color: #374151; }
.pa-svc-ic .mi { font-size: 20px; }
.pa-svc span.t { margin-top: 6px; font-size: 9px; font-weight: 600; color: var(--pa-t2); }

/* bottom nav + RATES button */
.pa-nav-wrap { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; z-index: 50; filter: drop-shadow(0 -2px 6px rgba(0,0,0,.08)); }
.pa-nav { height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; background: radial-gradient(circle at 50% 0, transparent 37px, #fff 37.5px); }
.pa-nav > * { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: none; border: 0; padding: 6px 0; color: var(--pa-t4); }
.pa-nav .gap { flex: 0 0 56px; }
.pa-nav .mi { font-size: 20px; }
.pa-nav .l { margin-top: 4px; font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.pa-nav .on { color: #000; }
.pa-fab { position: absolute; left: 50%; top: -30px; margin-left: -30px; width: 60px; height: 60px; border-radius: 20px; background: #000; color: #fff; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.pa-fab .mi { font-size: 17px; }
.pa-fab span.t { margin-top: 3px; font-size: 8px; font-weight: 800; letter-spacing: .3px; }

/* bottom sheet */
.pa-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.54); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 90; }
.pa-backdrop.open { opacity: 1; pointer-events: auto; }
.pa-sheet { position: fixed; left: 50%; bottom: 0; width: 100%; max-width: 430px; transform: translate(-50%, 100%); background: #fff; border-radius: 28px 28px 0 0; padding: 14px 20px calc(28px + env(safe-area-inset-bottom)); z-index: 100; transition: transform .25s cubic-bezier(.2,.8,.2,1); max-height: 92vh; overflow-y: auto; }
.pa-sheet.open { transform: translate(-50%, 0); }
.pa-sheet-handle { width: 40px; height: 5px; border-radius: 10px; background: var(--pa-line); margin: 0 auto 22px; }
.pa-sheet h3 { margin: 0; text-align: center; font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--pa-ink); }
.pa-sheet p.sub { margin: 4px 0 24px; text-align: center; font-size: 13px; color: var(--pa-t4); }
.pa-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; margin-bottom: 12px; background: var(--pa-soft); border: 1px solid var(--pa-line-soft); border-radius: 16px; text-align: left; }
.pa-opt-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.pa-opt-ic .mi { font-size: 20px; }
.pa-opt-tx { flex: 1; min-width: 0; }
.pa-opt-tx b { display: block; font-size: 14px; font-weight: 700; color: var(--pa-ink); }
.pa-opt-tx small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.3; color: var(--pa-t4); }
.pa-opt > .mi { color: #CCC; font-size: 20px; }
.pa-sheet .pa-btn { margin-top: 12px; }
.pa-codefield { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; background: var(--pa-soft); border: 1px solid var(--pa-line); border-radius: 14px; }
.pa-codefield.err { border-color: var(--pa-red); }
.pa-codefield .mi { color: var(--pa-t4); font-size: 18px; }
.pa-codefield input { flex: 1; border: 0; background: none; outline: 0; font-size: 16px; font-weight: 600; letter-spacing: 1.5px; min-width: 0; }
.pa-codefield input::placeholder { font-weight: 400; color: #AAA; letter-spacing: 1px; }
.pa-err { margin: 8px 0 0; font-size: 12px; color: var(--pa-red); }

/* snackbar */
.pa-toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; width: calc(100% - 32px); max-width: 398px; z-index: 200; display: grid; gap: 8px; pointer-events: none; }
.pa-toast { background: #000; color: #fff; border-radius: 20px; padding: 14px 18px; font-size: 14px; animation: paIn .2s ease-out; pointer-events: auto; }
.pa-toast.ok { background: var(--pa-green); }
.pa-toast.bad { background: var(--pa-red); }
@keyframes paIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* sign-in screens */
.pa-auth { padding: 60px 24px 32px; background: #fff; min-height: 100vh; }
.pa-auth h1 { margin: 0; text-align: center; font-size: 28px; font-weight: 800; letter-spacing: -.5px; color: #000; }
.pa-auth .lead { margin: 6px 0 48px; text-align: center; font-size: 14px; color: var(--pa-t3); }
.pa-label { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .3px; color: #444; text-transform: uppercase; }
.pa-input { display: flex; align-items: center; background: var(--pa-field); border-radius: 10px; margin-bottom: 20px; }
.pa-input .mi { color: var(--pa-hint); font-size: 18px; margin-left: 14px; }
.pa-input input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; padding: 16px 14px; font-size: 16px; font-weight: 500; color: #000; }
.pa-input input::placeholder { color: var(--pa-hint); font-weight: 400; }
.pa-input button { background: none; border: 0; padding: 0 12px; color: var(--pa-hint); display: grid; }
.pa-link { font-size: 13px; font-weight: 600; color: #000; }

@media (prefers-reduced-motion: reduce) { .pa-sheet, .pa-backdrop, .pa-toast { transition: none; animation: none; } }

/* ── Auth extras (login / register / forgot / verify) ── */
.pa-back { display: inline-grid; place-items: center; width: 24px; height: 24px; color: #000; background: none; border: 0; padding: 0; margin-bottom: 24px; }
.pa-back .mi { font-size: 24px; }
.pa-auth h1.left { text-align: left; }
.pa-auth .lead.left { text-align: left; margin: 6px 0 24px; }
.pa-row2 { display: flex; gap: 12px; }
.pa-row2 > div { flex: 1; min-width: 0; }
.pa-input.tight { margin-bottom: 18px; }
.pa-forgot { display: block; text-align: right; margin: -10px 0 26px; }
.pa-check { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 24px; cursor: pointer; }
.pa-check input { position: absolute; opacity: 0; pointer-events: none; }
.pa-check .box { width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid #CCC; border-radius: 5px; background: #fff; display: grid; place-items: center; flex: none; }
.pa-check .box .mi { font-size: 14px; color: #fff; display: none; }
.pa-check input:checked + .box { background: #000; border-color: #000; }
.pa-check input:checked + .box .mi { display: block; }
.pa-check input:focus-visible + .box { outline: 2px solid #000; outline-offset: 2px; }
.pa-check span.tx { font-size: 12.5px; color: #666; line-height: 1.5; }
.pa-check span.tx a { color: #000; font-weight: 700; text-decoration: underline; }
.pa-foot { margin-top: 28px; text-align: center; font-size: 14px; color: var(--pa-t3); }
.pa-foot a { color: #000; font-weight: 700; }
.pa-steps { display: flex; margin-bottom: 28px; }
.pa-steps i { flex: 1; height: 3px; border-radius: 10px; background: #EEE; margin-right: 6px; }
.pa-steps i:last-child { margin-right: 0; }
.pa-steps i.on { background: #000; }
.pa-auth h2 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: #000; }
.pa-auth p.copy { margin: 0 0 32px; font-size: 14px; line-height: 1.4; color: var(--pa-t3); }
.pa-codebig { background: var(--pa-field); border-radius: 10px; margin-bottom: 16px; }
.pa-codebig input { width: 100%; border: 0; background: none; outline: 0; text-align: center; font-size: 24px; font-weight: 800; letter-spacing: 8px; padding: 18px 0; color: #000; }
.pa-codebig input::placeholder { color: #CCC; }
.pa-center { text-align: center; margin-bottom: 24px; }
.pa-spin { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: paSpin .7s linear infinite; }
@keyframes paSpin { to { transform: rotate(360deg); } }
.pa-row2 .pa-input .mi { margin-left: 10px; }
.pa-row2 .pa-input input { padding-left: 8px; padding-right: 6px; text-overflow: ellipsis; }
.pa-row2 .pa-input button { padding: 0 8px; }
.pa-input input::placeholder { text-overflow: ellipsis; }

/* ── Landing + stepped register (v3) ── */
.pa-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; }
.pa-logo { width: 34px; height: 34px; border-radius: 10px; background: #000; color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 800; }
.pa-brand b { font-size: 17px; font-weight: 800; letter-spacing: 1.5px; color: #000; }
.pa-land h1 { font-size: 30px; line-height: 1.12; }
.pa-land .lead.left { margin: 12px 0 32px; line-height: 1.45; font-size: 14.5px; }
.pa-f { margin-bottom: 18px; }
.pa-f .pa-input { margin-bottom: 0; }
.pa-f.err .pa-input { box-shadow: inset 0 0 0 1.5px var(--pa-red); background: #FEF6F6; }
.pa-fe { margin: 6px 0 0; font-size: 12px; color: var(--pa-red); display: none; }
.pa-f.err .pa-fe { display: block; }
.pa-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--pa-line); }
.pa-tile { text-align: center; font-size: 11.5px; font-weight: 500; color: #555; line-height: 1.25; }
.pa-tile i { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 14px; background: var(--pa-soft); border: 1px solid var(--pa-line); font-style: normal; }
.pa-tile .mi { font-size: 22px; color: #000; margin: 0; }
.pa-legal { margin: 22px 0 0; font-size: 12px; line-height: 1.5; color: #888; text-align: center; }
.pa-legal a { color: #000; font-weight: 600; text-decoration: underline; }
.pa-legal.left { text-align: left; margin: 14px 0 18px; }
.pa-who { display: flex; align-items: center; gap: 10px; background: var(--pa-field); border-radius: 10px; padding: 12px 14px; margin-bottom: 22px; }
.pa-who .mi { color: var(--pa-hint); font-size: 18px; }
.pa-who span.v { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-who button { background: none; border: 0; font-size: 13px; font-weight: 700; color: #000; text-decoration: underline; padding: 4px; }
.pa-pane[hidden] { display: none; }
.pa-pane.in { animation: paSlide .28s cubic-bezier(.2,.8,.2,1); }
.pa-pane.in-back { animation: paSlideB .28s cubic-bezier(.2,.8,.2,1); }
@keyframes paSlide { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes paSlideB { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.pa-pre { color: #000; font-size: 15px; font-weight: 600; padding: 0 0 0 14px; margin-right: -2px; border-right: 0; }
.pa-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.pa-q span { font-size: 14px; font-weight: 600; color: #000; }
.pa-pills { display: flex; gap: 6px; }
.pa-pill { height: 32px; min-width: 52px; padding: 0 14px; border-radius: 16px; border: 1.5px solid var(--pa-line); background: #fff; font-size: 13px; font-weight: 700; color: #555; }
.pa-pill[aria-pressed=true] { background: #000; border-color: #000; color: #fff; }
.pa-ok { margin: 6px 0 0; font-size: 12px; color: var(--pa-green); display: none; align-items: center; gap: 4px; }
.pa-ok .mi { font-size: 15px; color: var(--pa-green); margin: 0; }
.pa-f.good .pa-ok { display: flex; }
.pa-sheet-ic { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--pa-soft); border: 1px solid var(--pa-line); display: grid; place-items: center; }
.pa-sheet-ic .mi { font-size: 26px; color: #000; }
.pa-sheet p.sub b { color: #000; word-break: break-all; }
.pa-btn--ghost { background: #fff; color: #000; border: 1.5px solid var(--pa-line); }
.pa-textbtn { display: block; width: 100%; background: none; border: 0; margin-top: 8px; padding: 12px; font-size: 14px; font-weight: 600; color: #555; text-align: center; }
.pa-btn .mi { color: #fff; font-size: 22px; margin: 0; }
.pa-btn--ok { background: var(--pa-green); }
.pa-logo-img { display: block; width: 64px; height: 64px; border-radius: 16px; margin: 0 0 36px; }