/* ============================================================================
   Helka Estates — design system  ·  white + Israel blue, premium / trustworthy
   ============================================================================ */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f3f7ff;          /* faint blue tint (inputs, spec tiles) */
  --line:#e4eaf3;
  --text:#0a1b3d;               /* deep navy ink */
  --muted:#5e6e8c;
  --brand:#0038b8;              /* Israel blue */
  --brand-ink:#002a8c;
  --brand-soft:#e8efff;
  --gold:#c79a3a;               /* premium accent (featured) */
  --ok:#137a4f; --ok-soft:#e3f4ea;
  --err:#b3261e;
  --radius:16px;
  --shadow:0 6px 24px rgba(10,27,61,.08);
  --shadow-lg:0 14px 40px rgba(10,27,61,.16);
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15}
.muted{color:var(--muted)} .error{color:var(--err)}

/* ---- app bar ---- */
header.appbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;
  padding:calc(10px + var(--safe-top)) 16px 10px;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
header.appbar .logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;
  margin-right:auto;color:var(--text)}
header.appbar .logo img{width:26px;height:26px}
header.appbar select{background:var(--surface-2);color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:7px 9px;font-weight:600}
header.appbar a[href="#/account"]{color:var(--brand);font-weight:600}

main#view{padding:18px 16px;padding-bottom:calc(86px + var(--safe-bot));max-width:720px;margin:0 auto}
/* Catalog pages (projects/saved) get a wide editorial layout on larger screens */
main#view.wide{max-width:1180px;padding-left:24px;padding-right:24px}

/* Editorial catalog header + grid + cards (mirror the homepage) */
.eb-catalog-head{margin:8px 0 4px}
.eb-catalog-head .eyebrow{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.eb-catalog-head h1{font-family:"Spectral",Georgia,serif;font-weight:500;font-size:40px;line-height:1.08;letter-spacing:-.02em;margin:0 0 8px}
.eb-catalog-head p{color:var(--muted);font-size:16px;margin:0;max-width:52ch}
.eb-catalog{display:grid;grid-template-columns:1fr;gap:24px;margin-top:28px}
@media(min-width:640px){.eb-catalog{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.eb-catalog{grid-template-columns:repeat(3,1fr)}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease;display:block}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pcard .ph{height:210px;background-size:cover;background-position:center;background-color:var(--brand-soft);position:relative}
.pcard .pbody{padding:20px}
.pcard .ptags{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.pcard .pill{font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap}
.pcard .pill.type{background:var(--brand-soft);color:var(--brand)}
.pcard .pill.units{background:var(--ok-soft);color:var(--ok)}
.pcard h3{font-family:"Spectral",Georgia,serif;font-weight:500;font-size:23px;letter-spacing:-.01em;margin:0 0 3px}
.pcard .loc{font-size:14px;color:var(--muted);margin-bottom:18px}
.pcard .meta{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--line);padding-top:16px}
.pcard .mk{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.pcard .mv{font-family:"Spectral",Georgia,serif;font-size:22px;font-weight:500}
.pcard .mv.price{color:var(--brand)} .pcard .mv.roi{color:var(--ok)}

/* ---- hero (explore header) ---- */
.hero{margin:2px 0 6px}
.hero h1{font-size:27px;margin:2px 0 8px;font-weight:800}
.hero p{font-size:15px;line-height:1.5}

/* ---- project grid + cards ---- */
.grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
@media(min-width:560px){.grid{grid-template-columns:1fr 1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:block;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card-img,.detail-img{height:172px;background-size:cover;background-position:center;
  background-color:var(--brand-soft);position:relative}
.detail-img{height:240px;border-radius:var(--radius);margin-bottom:14px;box-shadow:var(--shadow)}
.badge.featured{position:absolute;top:10px;inset-inline-start:10px;background:var(--gold);color:#1c1304;
  border-radius:20px;padding:3px 10px;font-size:12px;font-weight:800;box-shadow:var(--shadow)}
.card-body{padding:14px}
.card-body h3{margin:0 0 4px;font-size:17px;font-weight:700}
.price{color:var(--brand);font-weight:800;margin:8px 0 0;font-size:16px}
.roi{color:var(--ok);margin:3px 0 0;font-size:13px;font-weight:600}

/* ---- project detail specs ---- */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;padding:0}
.specs div{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.specs dt{font-size:12px;color:var(--muted);font-weight:600} .specs dd{margin:3px 0 0;font-weight:700;font-size:16px}

/* ---- buttons + inputs ---- */
button,.cta{font:inherit;cursor:pointer;border:none;border-radius:12px;padding:15px 18px;
  background:var(--brand);color:#fff;font-weight:700;width:100%;box-shadow:0 4px 14px rgba(0,56,184,.25);
  transition:background .15s ease,transform .05s ease}
button:hover,.cta:hover{background:var(--brand-ink)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.6;cursor:default}
.cta{margin-top:18px;display:inline-block;text-align:center}
input,textarea,form select{width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--text);margin:8px 0;font:inherit}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);background:#fff}
textarea{resize:vertical}
form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235e6e8c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.fieldlabel{display:block;color:var(--muted);font-size:12px;font-weight:600;margin:10px 0 -2px}
.back{display:inline-block;color:var(--brand);font-weight:600;margin-bottom:12px}

/* ---- bottom tab bar ---- */
nav.tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:10px 0 calc(10px + var(--safe-bot))}
nav.tabbar a{color:var(--muted);font-size:12px;font-weight:600;text-align:center;flex:1}
nav.tabbar a.active{color:var(--brand)}

/* ---- forms (profile + create) ---- */
.lead-form{margin-top:18px;padding:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow)}
.lead-form h3{margin:0 0 10px}
.pdfdrop{border:2px dashed var(--line);border-radius:14px;padding:22px 16px;text-align:center;
  cursor:pointer;background:var(--surface-2);transition:border-color .15s ease,background .15s ease;margin-bottom:10px}
.pdfdrop:hover,.pdfdrop.over{border-color:var(--brand);background:var(--brand-soft)}
.pdfdrop-title{font-weight:700;color:var(--brand);margin-bottom:4px}
.row2{display:flex;gap:10px}.row2 input,.row2 select{flex:1}
label.check{display:flex;align-items:center;gap:10px;color:var(--text);margin:12px 0;cursor:pointer}
label.check input{width:auto;margin:0}
button.ghost{background:#fff;border:1.5px solid var(--brand);color:var(--brand);
  box-shadow:none;margin-top:14px}
button.ghost:hover{background:var(--brand-soft)}

/* ---- reveal / status ---- */
.ok{margin-top:18px;padding:16px;border-radius:14px;background:var(--ok-soft);
  border:1px solid #b7e0c7;color:var(--ok);font-weight:600}
.reveal-phone{display:inline-block;margin-top:6px;font-size:24px;font-weight:800;
  color:var(--brand);letter-spacing:.5px}
.small{font-size:12.5px;margin-top:8px;color:var(--muted)}
.kyc-status{margin:6px 0}.kyc-status:first-of-type{margin-top:14px;color:var(--muted);font-size:13px;font-weight:600}
.badge{display:inline-block;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700}
.badge.kyc-none{background:#eef1f6;color:var(--muted)}
.badge.kyc-pending{background:#fff4d6;color:#8a6d1a}
.badge.kyc-verified{background:var(--ok-soft);color:var(--ok)}
.badge.kyc-rejected{background:#fde4e4;color:var(--err)}

/* ---- RTL (Hebrew) — dir="rtl" is set on <html>; flex/text mirror automatically.
   These fix the few directional details that don't auto-flip. ---- */
[dir="rtl"] form select{background-position:left 14px center}
[dir="rtl"] [style*="text-align:right"]{text-align:left !important}
[dir="rtl"] .back{direction:rtl}

/* ---- favorite heart (on project cards + detail) ---- */
.heart{position:absolute;top:10px;right:10px;width:36px;height:36px;padding:0;border-radius:50%;
  background:rgba(255,255,255,.92);border:none;box-shadow:var(--shadow);display:flex;align-items:center;
  justify-content:center;color:#c2c9d6;cursor:pointer;transition:color .15s ease,transform .05s ease}
.heart svg{width:19px;height:19px;fill:currentColor}
.heart.on,.heart:hover{color:#e0245e}
.heart:active{transform:scale(.9)}
[dir="rtl"] .heart{right:auto;left:10px}

/* ---- welcome / onboarding splash ---- */
.welcome{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#021b5b 0%,#0038b8 100%)}
.welcome-hero{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;background-position:center;position:relative}
.welcome-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,17,55,.35) 0%,rgba(2,17,55,.55) 55%,rgba(2,17,55,.92) 100%)}
.welcome-inner{position:relative;z-index:1;padding:28px 24px calc(34px + var(--safe-bot));color:#fff;max-width:560px;margin:0 auto;width:100%}
.welcome-mark{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;margin-bottom:auto}
.welcome-mark img{width:34px;height:34px}
.welcome h1{font-size:32px;font-weight:800;margin:0 0 10px;letter-spacing:-.02em}
.welcome p{font-size:16px;line-height:1.5;color:#dbe6ff;margin:0 0 22px}
.welcome .cta{background:#fff;color:var(--brand);box-shadow:var(--shadow-lg)}
.welcome .cta.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff}
.welcome-langs{display:flex;gap:8px;justify-content:center;margin-top:18px}
.welcome-langs button{width:auto;padding:8px 16px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:700;box-shadow:none}
.welcome-langs button.active{background:#fff;color:var(--brand)}
.welcome-top{position:fixed;top:calc(14px + var(--safe-top));right:16px;z-index:60}
.welcome-skip{width:auto;padding:8px 14px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-weight:700;box-shadow:none;font-size:13px}

/* Preview banner — shown when an owner/admin views an unpublished project */
.preview-banner{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;
  background:#fff7e6;border:1px solid #f4d58a;border-radius:12px;color:#7a5a00;font-size:14px}
.preview-banner strong{font-weight:700}

/* Cover image picker (admin preview — choose among clean PDF images) */
.cover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.cover-opt{width:100%;height:90px;object-fit:cover;border-radius:8px;border:2px solid var(--line);cursor:pointer;transition:border-color .15s}
.cover-opt:hover{border-color:var(--brand)}

/* Destructive action (delete project) */
.ghost.danger{color:#b42318;border-color:#f3c1ba}
.ghost.danger:hover{background:#fff5f4;border-color:#b42318}

/* Developer project row: title + actions. Wraps, so the buttons drop under the title
   on narrow screens instead of overflowing the card (and the title keeps a usable
   width instead of being squeezed to one word per line). */
.proj-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.proj-row .proj-meta{flex:1 1 190px;min-width:0}

/* Developer wallet bar */
.wallet-bar{display:flex;flex-direction:column;align-items:stretch;gap:6px;flex-wrap:wrap;
  margin:12px 0;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;font-size:15px}
.wallet-bar b{color:var(--brand-ink)}

/* Required-field validation highlight (profile form) */
.field-error{border-color:#b42318 !important;background:#fff5f4 !important}

/* Lead contact in developer dashboard */
.lead-contact{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.7}
.lead-contact a{color:var(--brand);text-decoration:none}
.lead-locked{margin:0;color:#b42318;font-size:14px}

/* In-app push banner (shown for foreground pushes; Android hides system notifs then). */
.push-toast{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:9999;
  background:var(--brand);color:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.25);
  display:flex;flex-direction:column;gap:2px;cursor:pointer;opacity:0;transform:translateY(-16px);
  transition:opacity .25s ease,transform .25s ease;max-width:560px;margin:0 auto}
.push-toast.show{opacity:1;transform:translateY(0)}
.push-toast strong{font-size:15px}
.push-toast span{font-size:13px;opacity:.92}

/* Post-publish edit-window countdown */
.edit-window{background:#fff8e6;border:1px solid #f2e3b3;color:#8a6d1e;border-radius:12px;
  padding:10px 14px;font-size:14px;font-weight:600;margin:8px 0}

/* Developer dashboard header + onboarding guide */
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.guide-help{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line,#e3e6ea);
  background:var(--surface-2,#f2f4f7);color:var(--brand,#0038b8);font-weight:800;font-size:17px;cursor:pointer;padding:0}
.guide-ov{position:fixed;inset:0;z-index:10000;background:rgba(10,20,45,.55);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
/* max-height + scroll: the overlay centres the card, and a centred flex item that
   outgrows its container overflows past the TOP of the screen where it can't be
   scrolled back into view. Capping the height keeps every step reachable on short
   viewports (small phones, large system font). */
.guide-card{position:relative;width:100%;max-width:440px;background:var(--surface,#fff);color:var(--text,#0a1b3d);
  border-radius:20px;padding:30px 24px 20px;box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center;
  max-height:100%;overflow-y:auto;overscroll-behavior:contain}
.guide-x{position:absolute;top:12px;right:12px;border:0;background:transparent;color:var(--muted,#8a95a8);
  font-size:18px;cursor:pointer;line-height:1;padding:6px}
[dir=rtl] .guide-x{right:auto;left:12px}
.guide-icon{font-size:52px;line-height:1;margin:6px 0 14px}
/* Step illustration: a screenshot already framed on its own UI, so show it near 1:1
   rather than shrinking a full phone screen down to thumbnail size. */
.guide-shot{display:block;width:100%;max-width:300px;margin:2px auto 16px;border-radius:12px;
  box-shadow:0 8px 22px rgba(10,20,45,.18);border:1px solid var(--line,#e3e6ea)}
.guide-body h2{margin:0 0 8px;font-size:21px}
.guide-body p{margin:0;color:var(--muted,#5e6e8c);font-size:15px;line-height:1.55}
.guide-dots{display:flex;justify-content:center;gap:7px;margin:22px 0 16px}
.guide-dots span{width:7px;height:7px;border-radius:50%;background:var(--line,#dfe4ea);transition:width .2s,background .2s}
.guide-dots span.on{width:22px;border-radius:4px;background:var(--brand,#0038b8)}
.guide-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.guide-nav .guide-next{width:auto;padding:12px 22px;margin:0;flex:none}
.guide-nav .guide-prev{width:auto;padding:12px 16px;margin:0;flex:none;background:transparent}
.guide-step{flex:1;text-align:center}

/* "Continue with Google" button + "or" separator on the login screen */
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1f1f1f;
  border:1px solid #dadce0;font-weight:600}
.gbtn svg{flex:none}
[dir=rtl] .gbtn{flex-direction:row-reverse}
.or-sep{text-align:center;margin:10px 0;position:relative}
.or-sep::before,.or-sep::after{content:"";position:absolute;top:50%;width:38%;height:1px;background:var(--line,#e3e6ea)}
.or-sep::before{left:0}
.or-sep::after{right:0}

/* In-app "update available" banner (native only) */
.update-banner{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:9997;
  background:var(--brand);color:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.25);
  display:flex;align-items:center;gap:10px;max-width:560px;margin:0 auto}
.update-banner span{flex:1;font-size:14px}
.update-banner button{border:0;border-radius:8px;padding:8px 12px;font-weight:600;font-size:14px;cursor:pointer;
  background:#fff;color:var(--brand);width:auto}
.update-banner .updx{background:transparent;color:#fff;padding:6px 8px;font-size:16px;opacity:.85}

/* Wallet top-up control in the developer dashboard */
.wallet-bar .topup{display:inline-flex;gap:6px;align-items:center;margin-inline-start:auto}
/* Balance left, amount box right, on one line. CPL drops underneath as a quiet reference. */
.wallet-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.wallet-cpl{opacity:.85}
.wallet-bar .topup input{width:90px;padding:6px 8px;margin:0}

/* Soft wall on the project page (visitor without an account) */
.softwall-teaser{color:#5e6e8c; -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent)}
.softwall-cta{margin-top:14px; border:1px solid #e4eaf3; border-radius:14px; padding:22px; background:#f3f7ff; text-align:center}
.softwall-cta h3{margin:0 0 6px; font-size:19px}
.softwall-cta p{margin:0 auto; max-width:44ch}
.softwall-cta .cta{margin-top:16px; width:auto; padding:0 30px}

/* Region sections on the Browse page */
.region-head{margin:34px 0 6px}
.region-head h2{font-family:"Spectral",Georgia,serif;font-weight:500;font-size:27px;letter-spacing:-.01em;margin:0 0 6px;color:var(--text)}
.region-head p{color:var(--muted);font-size:15px;margin:0;max-width:72ch;line-height:1.6}
main#view.wide .region-head{margin:44px 0 8px}
main#view.wide .region-head h2{font-size:34px}

/* Biometric app-lock screen */
.bio-lock{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#021b5b,#0038b8);color:#fff;padding:24px}
.bio-inner{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:340px;width:100%;text-align:center}
.bio-inner h2{font-size:22px;font-weight:700;margin:6px 0 4px;color:#fff}
.bio-inner .cta{background:#fff;color:var(--brand);width:100%;margin-top:6px}
.bio-inner .ghost{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff;width:100%;margin:0}

/* Blocking overlay for irreversible requests (EB.busy). Above .bio-lock (9998) and the
   update banner (9997) so nothing can be clicked underneath while money is moving. */
.eb-busy{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;
  background:rgba(10,20,45,.45);backdrop-filter:blur(2px);cursor:progress}
.eb-busy-box{display:flex;flex-direction:column;align-items:center;gap:12px;background:#fff;
  padding:22px 26px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.2);max-width:80vw}
.eb-busy-spin{width:30px;height:30px;border:3px solid #dfe4ee;border-top-color:var(--brand);
  border-radius:50%;animation:eb-busy-turn .8s linear infinite}
.eb-busy-msg{font-size:14px;color:#33405c;text-align:center}
.eb-busy-msg:empty{display:none}
@keyframes eb-busy-turn{to{transform:rotate(360deg)}}
/* Respect reduced-motion: keep the dimmed block, drop the spin. */
@media (prefers-reduced-motion:reduce){.eb-busy-spin{animation:none}}

/* Confirmation state for EB.busy: the spinner becomes a tick and holds, so a fast call
   still reads as "done" instead of a flicker the user has to infer from small text. */
.eb-busy-tick{width:30px;height:30px;border-radius:50%;background:#067647;position:relative;flex:none}
.eb-busy-tick::after{content:'';position:absolute;left:10px;top:5px;width:8px;height:15px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}

/* Payment status line: centred under the buttons it refers to, and wide enough that a
   sentence does not sit flush against the card edges on a phone. */
#paypalStatus{text-align:center;padding:0 8px}

/* Saved cards on the developer dashboard */
.saved-cards{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.saved-card{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;font-size:14px}
.saved-card-id{font-variant-numeric:tabular-nums}
.saved-card-act{display:inline-flex;gap:6px;align-items:center}
.saved-card-act button{margin:0;width:auto;padding:8px 12px;font-size:14px}

/* What the card will really be debited — prices are quoted ex-VAT. */
.wallet-vat{color:var(--brand-ink);font-weight:600}
.wallet-vat:empty{display:none}

/* Leads heading with its export action */
.leads-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:24px 0 8px}
.leads-head button{margin:0;width:auto;padding:8px 14px;font-size:14px}