/* v64: Help'd is light by default, in brand colours (blue for Helpees, mint for Helpers). Dark theme only when the person turns it on in Settings (adds the class "dark" to the page). */
/* Help'd. Customer app is light with a map first layout. Help'd Pro (worker app) is dark with a green accent. */
:root{
  --bg:#F3F6FB; --card:#FFFFFF; --ink:#0F1B33; --soft:#5B6A86; --line:#DDE5F2;
  --brand:#1E6BFF; --brand-ink:#FFFFFF; --brand-soft:#E4EEFF;
  --good:#12805C; --good-soft:#DDF4EA; --warn:#B25E00; --warn-soft:#FFEFD6; --bad:#C0352B;
  --map-bg:#EAF0F8; --map-road:#FFFFFF; --map-ring:#B8C7E3; --field-line:#DCE2EE;
  --display:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
:root.dark:not(.pro){
  --bg:#0B1220; --card:#131D33; --ink:#EAF0FF; --soft:#9AA9C7; --line:#25324F;
  --brand:#4C8DFF; --brand-ink:#06122B; --brand-soft:#16284D;
  --good:#47C99B; --good-soft:#12342B; --warn:#F0A64A; --warn-soft:#3A2A10; --bad:#FF7A6E;
  --map-bg:#16213A; --map-road:#243556; --map-ring:#2E4570; --field-line:#2C3B5C; color-scheme:dark}
:root.pro{
  /* Help'd Pro, day look: soft mint and white with deep green text. Easy to read in sunlight, clearly different from the blue customer app. */
  --bg:#E6F4EC; --card:#FFFFFF; --ink:#0A2818; --soft:#44604F; --line:#C6DFD0;
  --brand:#0B8A5C; --brand-ink:#FFFFFF; --brand-soft:#D5F0E2;
  --good:#0A7650; --good-soft:#D5F0E2; --warn:#9A5400; --warn-soft:#FFEBC9; --bad:#C0352B;
  --map-bg:#D8EEE0; --map-road:#FFFFFF; --map-ring:#9FCBB1; --field-line:#C2DCCB; color-scheme:light}
:root.dark.pro{
  /* Night look when the phone is in dark mode: lighter forest green, bright text. */
  --bg:#18301F; --card:#25402F; --ink:#F6FDF9; --soft:#BBD3C4; --line:#3C5C48;
  --brand:#35DC98; --brand-ink:#04150C; --brand-soft:#2E5E46;
  --good:#35DC98; --good-soft:#2E5E46; --warn:#FFC468; --warn-soft:#4F3D1A; --bad:#FF8F84;
  --map-bg:#203A2B; --map-road:#33513F; --map-ring:#4B7459; --field-line:#3C5C48; color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;
  padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
#app{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:30px;font-weight:800} h2{font-size:22px;font-weight:800} h3{font-size:16px;font-weight:700}
p{margin:0}
a{color:var(--brand)}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:24px}
.logo i{width:30px;height:30px;border-radius:50% 50% 50% 8%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-style:normal;font-size:16px;transform:rotate(-45deg)}
.logo i b{transform:rotate(45deg)}
.pro .logo i{border-radius:8px;transform:none}.pro .logo i b{transform:none}
.badge{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--brand);color:var(--brand-ink);border-radius:6px;padding:2px 7px;margin-left:4px}
.who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--soft);min-width:0}
.iconbtn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;width:38px;height:38px;font-size:18px;cursor:pointer}
.banner{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:500}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.card.hot{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
label{font-weight:700;font-size:13px;display:block;margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=date],select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 12px}
textarea{min-height:76px;resize:vertical}
input:focus,textarea:focus,select:focus,button:focus-visible{outline:3px solid var(--brand);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:14px;padding:8px 12px;border-radius:999px;cursor:pointer}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:700}
.btn{border:0;background:var(--brand);color:var(--brand-ink);font:inherit;font-weight:700;font-size:16px;padding:14px;border-radius:12px;cursor:pointer;width:100%}
.btn.alt{background:var(--brand-soft);color:var(--brand)} .btn.line{background:none;border:1px solid var(--line);color:var(--ink)}
.btn.bad{background:none;color:var(--bad);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:default}
.linkbtn{background:none;border:0;color:var(--soft);font:inherit;text-decoration:underline;cursor:pointer;padding:8px}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between}
.row>*{min-width:0}
.sm{font-size:13px;color:var(--soft)}
.pill{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--brand-soft);color:var(--brand)}
.pill.good{background:var(--good-soft);color:var(--good)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.map{width:100%;aspect-ratio:1/0.9;border-radius:18px;border:1px solid var(--line);overflow:hidden;background:var(--map-bg);position:relative}
.map canvas{width:100%;height:100%;display:block}
.mapwrap{position:relative}
.maptag{position:absolute;left:10px;top:10px;z-index:2;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700}
.steps{display:flex;gap:4px} .steps span{flex:1;height:6px;border-radius:3px;background:var(--line)} .steps span.on{background:var(--brand)}
.big{font-family:var(--display);font-weight:800;font-size:28px;font-variant-numeric:tabular-nums}
.go{width:168px;height:168px;border-radius:50%;border:0;font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:.02em;cursor:pointer;margin:6px auto;display:block;box-shadow:0 0 0 10px var(--brand-soft)}
.go.off{background:var(--brand);color:var(--brand-ink)} .go.live{background:var(--card);color:var(--bad);border:3px solid var(--bad);box-shadow:0 0 0 10px #2a1613}
.gocard{align-items:center;text-align:center}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.tile b{display:block;font-family:var(--display);font-size:24px;font-variant-numeric:tabular-nums} .tile span{font-size:12px;color:var(--soft)}
.chat{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto;padding:2px}
.msg{max-width:82%;padding:7px 11px;border-radius:12px;background:var(--bg);font-size:14px;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--brand);color:var(--brand-ink)}
.stars{display:flex;gap:6px;justify-content:center} .stars button{background:none;border:0;font-size:34px;cursor:pointer;color:var(--line);padding:0}
.stars button.on{color:#F5B301}
.list{display:flex;flex-direction:column;gap:8px} .list .row{padding:8px 0;border-top:1px solid var(--line)} .list .row:first-child{border-top:0}
.err{color:var(--bad);font-size:13px} .ok{color:var(--good);font-size:13px}
details.card summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
details.card summary::after{content:"+";color:var(--soft)} details[open].card summary::after{content:"\2013"}
.sheet{border-radius:22px 22px 14px 14px;margin-top:-30px;position:relative;z-index:1;box-shadow:0 -6px 18px rgba(15,27,51,.08)}
.foot{text-align:center}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:max(20px,env(safe-area-inset-bottom));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;z-index:50;max-width:90vw}
.legal h3{margin-top:10px} .legal p{white-space:pre-line;margin-bottom:6px}
.drop{display:flex;gap:8px}
.drop .btn{font-size:14px;padding:11px}
@media (prefers-reduced-motion:no-preference){.pulse{animation:p 1.4s ease-in-out infinite}@keyframes p{50%{opacity:.45}}}

.bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}.bar span{display:block;height:100%;background:var(--brand);border-radius:4px}
.list .row.sm b{font-size:12px}
.tiers{display:grid;grid-template-columns:1.3fr .7fr 1fr 1fr;gap:0;font-size:14px}.tiers>*{padding:9px 6px;border-top:1px solid var(--line)}.tiers>b:nth-child(-n+4){font-size:12px;color:var(--soft);border-top:0}.tiers>div{display:contents}.tiers>div>*{padding:9px 6px;border-top:1px solid var(--line)}.tiers>div.me>*{background:var(--brand-soft)}.tiers>div.me>:first-child{border-radius:8px 0 0 8px}.tiers>div.me>:last-child{border-radius:0 8px 8px 0}
.banner.code{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;background:var(--brand-soft);color:var(--ink);border:2px dashed var(--brand);padding:12px}.banner.code .big{letter-spacing:.3em;font-size:40px;color:var(--brand)}.banner.code input{text-align:center;font-size:32px;letter-spacing:.4em;font-weight:800;max-width:220px}.banner.code span{font-weight:500;font-size:13px}
.jphoto{width:100%;max-height:240px;object-fit:cover;border-radius:12px;display:block;margin:8px 0}
.jthumbs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.jthumbs .jphoto{width:calc(33.33% - 6px);height:96px;max-height:none;object-fit:cover;border-radius:10px;margin:0;cursor:pointer}
.jthumbs .jbox{position:relative;width:calc(33.33% - 6px);display:block}
.jthumbs .jbox .jphoto{width:100%;cursor:default}
.jx{position:absolute;top:4px;right:4px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:20px;line-height:30px;padding:0;cursor:pointer}
.zoomwrap{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;cursor:pointer}
.zoomwrap img{max-width:100%;max-height:80vh;border-radius:12px}
.zoomwrap p{color:#fff;font-size:15px;margin:0}
@keyframes helpdring{0%{box-shadow:0 0 0 0 rgba(91,224,165,.75)}70%{box-shadow:0 0 0 18px rgba(91,224,165,0)}100%{box-shadow:0 0 0 0 rgba(91,224,165,0)}}
.card.ring{animation:helpdring 1.4s ease-out infinite;border-color:var(--good)}
@media (prefers-reduced-motion:reduce){.card.ring{animation:none}}

.msg .mt{display:block;font-size:10px;opacity:.65;margin-top:2px}
.card.regcard{padding:12px 14px}.card.regcard .drop{margin-top:8px;align-items:center}.btn.small{width:auto;padding:9px 18px}
.greet{font-size:22px;font-weight:800;margin:4px 2px 0;letter-spacing:-.01em}
.bio{font-style:italic;color:var(--ink);opacity:.8;margin:6px 0;overflow-wrap:anywhere}

.ffcard{background:linear-gradient(180deg,var(--brand-soft),var(--card));border:2px solid var(--brand);box-shadow:0 6px 18px rgba(0,0,0,.12);margin:14px 0 6px;color:var(--ink)}
.ffcard .row{margin-bottom:4px}
#f-ff,#ffin,#ffin2,#ffin3{background:#fff;border:2px solid #1E6BFF;border-radius:12px;font-size:20px;font-weight:800;letter-spacing:3px;text-transform:uppercase;text-align:center;padding:14px 12px;color:#0F1B2D;min-height:54px}
#f-ff:focus,#ffin:focus,#ffin2:focus,#ffin3:focus{outline:none;box-shadow:0 0 0 4px rgba(30,107,255,.28)}

.pill{white-space:nowrap;flex-shrink:0}
.card .row h2,.card .row h3{min-width:0}
.welcome{border:1px solid var(--line);background:var(--card)}
.welcome .row{margin-bottom:4px}
.welcome .btn.small{width:auto;padding:6px 16px;flex-shrink:0}
.mapwrap:has(+ #bookform) .map{aspect-ratio:1/0.5}
input[type=file]{font-size:14px;color:var(--soft);max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-weight:700;background:var(--brand-soft);color:var(--brand);border:0;border-radius:999px;padding:8px 16px;margin-right:10px;cursor:pointer}

/* 15.5 flagship polish: payments and trust */
.ic{width:20px;height:20px;flex-shrink:0;vertical-align:middle}
.paycard{position:relative;border-radius:20px;padding:18px 20px;aspect-ratio:1.7;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:linear-gradient(135deg,#1E6BFF 0%,#0B2E8A 100%);box-shadow:0 10px 24px rgba(15,27,51,.22);overflow:hidden}
.paycard::after{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.12)}
.paycard.mastercard{background:linear-gradient(135deg,#3B3F4A 0%,#12151C 100%)}
.pro .paycard{background:linear-gradient(135deg,#19C37D 0%,#0B5C3C 100%)}
.pc-top,.pc-bot{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;letter-spacing:.04em;position:relative;z-index:1}
.pc-logo{font-family:var(--display);font-size:18px;letter-spacing:0}
.pc-tag{background:rgba(255,255,255,.22);border-radius:6px;padding:2px 8px;font-size:11px}
.pc-chip{width:38px;height:28px;border-radius:6px;background:linear-gradient(135deg,#F3D98B,#C9A24A);position:relative;z-index:1}
.pc-num{font-size:20px;font-weight:700;letter-spacing:.12em;font-variant-numeric:tabular-nums;position:relative;z-index:1}
.trust{display:flex;flex-direction:column;gap:12px}
.tr{display:flex;gap:12px;align-items:flex-start}
.tr .ic{color:var(--good);margin-top:2px}
.tr b{display:block;font-size:14px}.tr span{display:block;font-size:13px;color:var(--soft)}
.card .row>.ic{color:var(--good)}
.hero{background:linear-gradient(160deg,var(--good-soft),var(--card));border-color:var(--good)}
.hero .big{font-size:40px;color:var(--good)}
.card.save{align-items:flex-start;background:var(--good-soft);border-color:transparent}
.paynote{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--soft);background:var(--brand-soft);border-radius:10px;padding:8px 10px}
.paynote .ic{width:16px;height:16px;margin-top:1px;color:var(--good)}
.paynote.captured{background:var(--good-soft);color:var(--good)}
.paybox{display:flex;gap:10px;align-items:flex-start;font:inherit;text-align:left;width:100%;color:var(--ink);background:var(--good-soft);border:1px solid transparent;border-radius:12px;padding:10px 12px;font-size:13px}
.paybox .ic{color:var(--good);margin-top:2px}.paybox b{display:block;font-size:14px}
button.paybox.add{cursor:pointer;border:1px dashed var(--good)}
.money,.big,.row b{font-variant-numeric:tabular-nums}
.card{box-shadow:0 1px 2px rgba(15,27,51,.04),0 6px 18px rgba(15,27,51,.04)}
.btn{transition:transform .08s ease,filter .15s ease}.btn:active:not(:disabled){transform:scale(.985);filter:brightness(.95)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

.ffone{font-size:13px;color:var(--ink);background:var(--warn-soft);border-radius:10px;padding:8px 10px;margin:0 0 8px}.ffone b{color:var(--warn)}

/* 15.5 rewards screen */
.ladder{display:flex;flex-direction:column;gap:0;margin-top:4px}
.step{display:grid;grid-template-columns:18px 1fr auto auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14px;position:relative}
.step:first-child{border-top:0}
.step i{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:var(--card)}
.step.past i{background:var(--good);border-color:var(--good)}
.step.me i{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.step span{color:var(--soft);font-size:13px}.step em{font-style:normal;font-weight:700;min-width:84px;text-align:right}
.step.me{background:var(--brand-soft);margin:0 -10px;padding:9px 10px;border-radius:10px;border-top-color:transparent}
.card.paused .ladder{opacity:.45}
.ffcard.ffon{background:var(--good-soft);border-color:var(--good)}
.ffcard.ffon .pill{background:#fff}

.legalmark{text-align:center;margin:-14px 0 28px;font-size:12px;opacity:.8}

/* 16.0 modern balloon logo */
.logo i,.pro .logo i{width:28px;height:32px;border-radius:0;transform:none;background:url(icons/balloon.svg) center/contain no-repeat;font-size:0;display:block}
.pro .logo i{background-image:url(icons/balloon-pro.svg)}
.logo i b,.pro .logo i b{display:none}

.alerts{margin-top:10px;text-align:left;border-top:1px solid var(--line,#E2E8F0);padding-top:8px}.alrt{align-items:center;gap:8px;padding:4px 0;font-size:14px}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;background:#F59E0B}.dot.ok{background:#16A34A}

.feetable{margin-top:10px;border-top:1px solid #E2E8F0;padding-top:8px}.feetable summary{cursor:pointer;color:var(--brand)}.feetable td,.feetable th{padding:4px 2px;border-bottom:1px solid #E2E8F0}
.pcmodal{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(8,16,32,.62);display:flex;align-items:center;justify-content:center;padding:18px;z-index:900}
.pcsheet{background:var(--card);color:var(--ink);border-radius:24px;max-width:420px;width:100%;padding:24px 22px;box-shadow:0 20px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px;text-align:center}
.pcsheet h2{margin:0;font-size:22px}.pcsheet p{margin:0}
.pcpill{align-self:center;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.pcnums{display:flex;justify-content:center;align-items:baseline;gap:12px;font-size:36px;font-weight:800}
.pcnums span{color:var(--soft);text-decoration:line-through;font-weight:600}.pcnums i{font-style:normal;color:var(--soft)}
.pcbtns{display:flex;gap:10px}

.pcsheet{max-height:92vh;overflow:auto;text-align:center;gap:14px}
.pcsheet h2{font-size:21px;line-height:1.25}
.pcnums{font-size:34px;gap:14px}
.pcnote{background:var(--brand-soft);border-radius:16px;padding:12px 16px;text-align:left}
.pcnote small{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:4px}
.pcnote p{font-size:17px;line-height:1.4;font-weight:600;margin:0;word-break:break-word}
.pcearn{display:flex;justify-content:space-between;align-items:baseline;border:1px solid var(--line,rgba(120,130,150,.3));border-radius:14px;padding:10px 16px;font-size:15px}
.pcearn b{font-size:22px}.pcearn span{font-size:13px;opacity:.7}
.pcgap{margin:0}

/* v34: start code card and helper row, built to never glitch at any width, font size or language */
#app{overflow-wrap:anywhere}
.helperrow{display:flex;align-items:center;gap:12px}
.helperrow .avatar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:20px}
.helperrow .hname{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.helperrow .hname b{font-size:17px;line-height:1.25}
.helperrow .heta{flex:0 0 auto;text-align:right}
.pincard{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:var(--brand-soft);color:var(--ink);border:2px solid var(--brand);border-radius:20px;padding:16px 12px}
.pinhead{margin:0;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.pindigits{display:flex;justify-content:center;gap:8px;width:100%}
.pindigits span{flex:0 1 56px;min-width:0;aspect-ratio:3/4;max-height:76px;display:grid;place-items:center;background:var(--card);border:2px solid var(--brand);border-radius:14px;font-family:var(--display);font-weight:800;font-size:38px;line-height:1;font-variant-numeric:tabular-nums;color:var(--brand)}
.pinsay{margin:0;font-size:17px;line-height:1.4;font-weight:600}
.pinwarn{margin:0;font-size:14px;line-height:1.35;color:var(--soft)}
.pcleave{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
@media (max-width:340px){.pindigits span{font-size:30px}.pindigits{gap:6px}}

.soundbar{display:block;width:100%;border:0;border-radius:12px;background:var(--warn-soft);color:var(--warn);font-weight:700;font-size:15px;padding:12px 14px;margin:0 0 10px;text-align:center;cursor:pointer}
/* v38: chat photos, safety code, proof photos */
.zoomwrap{z-index:950}
.attach{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:22px;cursor:pointer;flex:none;position:relative;overflow:hidden}
.attach input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.msg .jthumbs{margin:4px 0 0}.msg .jthumbs .jphoto{width:calc(33.33% - 6px);height:72px}
.pcproof{margin:8px 0}.pcproof small{display:block;font-weight:700;opacity:.75}
.pcproof .jthumbs .jphoto{height:64px}
.pcnoproof{opacity:.8}
.pccode{background:var(--brand-soft);border:2px solid var(--brand);border-radius:14px;padding:10px 12px;margin:8px 0;text-align:left}
.pccode input{width:100%;font-size:26px;letter-spacing:6px;text-align:center;font-weight:800;margin-top:6px}
.pcgive{margin:8px 0}
.pcsheet{max-height:92vh;overflow:auto}
.pcnums,.pcearn{white-space:nowrap}.pcnums{font-size:clamp(22px,8vw,34px);gap:10px;flex-wrap:nowrap}.pcnums span,.pcnums b{white-space:nowrap}.pcearn b{font-size:clamp(17px,6vw,22px)}
.pcearn{gap:8px}
.pcearn{flex-wrap:wrap;white-space:normal}.pcearn b{white-space:nowrap}

.accessnote{text-align:left}.accessnote small{font-weight:700;opacity:.75}

/* v39: helper standards */
.hsrow{margin:8px 0}.hsbar{position:relative;height:10px;border-radius:6px;background:var(--line);margin:6px 0;overflow:visible}
.hsbar i{display:block;height:100%;border-radius:6px;background:var(--good)}.hsbar i.low{background:var(--warn)}
.hsbar u{position:absolute;left:80%;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.7;text-decoration:none}
.hsp{text-align:left;display:flex;flex-direction:column;gap:12px}

/* v41: appeals and customer ratings */
.cwarn{border-left:4px solid var(--warn);text-align:left}
.apform label{font-weight:600}.apform textarea{min-height:130px}

/* v42 multi-day jobs */
.multiopt{border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--card)}
.multiopt.on{border-color:var(--good);background:var(--good-soft)}
.multiopt .chk{all:unset;display:flex;gap:12px;align-items:flex-start;cursor:pointer;width:100%;box-sizing:border-box;min-height:44px}
.multiopt .chk:focus-visible{outline:3px solid var(--good);outline-offset:3px;border-radius:8px}
.multiopt .box{flex:0 0 26px;height:26px;border:2px solid var(--soft);border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:var(--card)}
.multiopt.on .box{background:var(--good);border-color:var(--good)}
.multiopt small{display:block;color:var(--soft);font-size:13px;margin-top:2px}
.daychips{display:flex;flex-wrap:wrap;gap:8px}
.daychips .chip{min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.daychips .chip.on{background:var(--good);border-color:var(--good);color:#fff}
.multibox{border-left:4px solid var(--good);background:var(--good-soft);border-radius:10px;padding:10px 12px;margin:8px 0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.multibox.late{border-left-color:var(--warn);background:var(--warn-soft)}

/* ===== v43 Helpee (customer) look: calm, classy and simple. Same brand blue. The Helper (Pro) side is untouched (every rule starts with :root:not(.pro)). ===== */
@media all{:root:not(.pro){
  --bg:#F7F8FB; --ink:#0E1730; --soft:#66728C; --line:#E7EBF2; --brand-soft:#EDF3FF; --map-bg:#EEF2F9;
}}
:root:not(.pro) body{font-size:15.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
:root:not(.pro) #app{gap:16px}
:root:not(.pro) h1,:root:not(.pro) h2,:root:not(.pro) h3{font-weight:700;letter-spacing:-.02em}
:root:not(.pro) h2{font-size:24px;line-height:1.2}
:root:not(.pro) .logo{font-size:22px;font-weight:700}
:root:not(.pro) .greet{font-size:30px;font-weight:700;letter-spacing:-.025em;line-height:1.15;margin:6px 2px 2px}
:root:not(.pro) .iconbtn{border:0;border-radius:12px;width:40px;height:40px;box-shadow:0 1px 2px rgba(14,23,48,.06),0 4px 12px -4px rgba(14,23,48,.10)}
:root:not(.pro) .card{border-radius:22px;padding:20px;gap:14px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(14,23,48,.03),0 14px 34px -16px rgba(14,23,48,.10)}
:root:not(.pro) .card.hot{border-color:rgba(30,107,255,.45);box-shadow:0 1px 2px rgba(14,23,48,.03),0 16px 36px -14px rgba(30,107,255,.28)}
:root:not(.pro) label{font-size:13px;font-weight:600;color:var(--soft);margin-bottom:6px;letter-spacing:.01em}
:root:not(.pro) input[type=text],:root:not(.pro) input[type=date],:root:not(.pro) input[type=email],:root:not(.pro) input[type=password],:root:not(.pro) input[type=number],:root:not(.pro) input[type=tel],:root:not(.pro) select,:root:not(.pro) textarea{
  background:var(--card);border:1px solid var(--field-line);border-radius:14px;padding:14px 16px;min-height:50px;transition:border-color .15s ease,box-shadow .15s ease}
:root:not(.pro) textarea{min-height:92px;line-height:1.45}
:root:not(.pro) input:focus,:root:not(.pro) textarea:focus,:root:not(.pro) select:focus{outline:2px solid transparent;border-color:var(--brand);box-shadow:0 0 0 4px rgba(30,107,255,.16)}
:root:not(.pro) button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
:root:not(.pro) .chip{background:var(--card);border:1px solid var(--field-line);padding:10px 16px;font-weight:500;transition:background .15s ease,border-color .15s ease}
:root:not(.pro) .chip.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
:root:not(.pro) .btn{border-radius:16px;padding:16px;font-weight:600;letter-spacing:.005em;box-shadow:0 10px 22px -10px rgba(30,107,255,.65)}
:root:not(.pro) .btn.line,:root:not(.pro) .btn.alt,:root:not(.pro) .btn.bad{box-shadow:none}
:root:not(.pro) .btn.line{border:1px solid var(--field-line);background:var(--card)}
:root:not(.pro) .btn.small{padding:9px 18px;border-radius:999px;box-shadow:none}
:root:not(.pro) .linkbtn{color:var(--soft);text-underline-offset:3px}
:root:not(.pro) .map{border:0;border-radius:26px;box-shadow:0 1px 2px rgba(14,23,48,.04),0 16px 36px -18px rgba(14,23,48,.18)}
:root:not(.pro) .maptag{border:0;box-shadow:0 2px 10px rgba(14,23,48,.10)}
:root:not(.pro) .sheet{border-radius:26px;margin-top:-34px;box-shadow:0 -8px 26px -10px rgba(14,23,48,.14)}
:root:not(.pro) .steps{gap:5px}
:root:not(.pro) .steps span{height:4px;border-radius:2px}
:root:not(.pro) .pill{font-weight:600;padding:4px 11px;letter-spacing:.01em}
:root:not(.pro) .sm{font-size:13.5px;line-height:1.5}
:root:not(.pro) .big{font-weight:700;letter-spacing:-.02em}
:root:not(.pro) .list .row{padding:12px 0}
:root:not(.pro) .stars button{font-size:38px}
:root:not(.pro) .msg{border-radius:16px;padding:9px 13px}
:root:not(.pro) .paybox{border-radius:16px;padding:12px 14px}
:root:not(.pro) .multiopt{border-radius:18px;padding:14px 16px;border-color:var(--field-line)}
:root:not(.pro) .multiopt.on{border-color:var(--good)}
:root:not(.pro) .daychips .chip{border-color:var(--field-line)}
:root:not(.pro) .multibox{border-radius:14px}
:root:not(.pro) .welcome{background:var(--brand-soft);border-color:transparent;box-shadow:none}
/* The code box is quiet until someone needs it. */
:root:not(.pro) .ffcard{background:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px rgba(14,23,48,.03),0 14px 34px -16px rgba(14,23,48,.10)}
:root:not(.pro) .ffcard.ffon{background:var(--good-soft);border-color:transparent}
:root:not(.pro) #f-ff,:root:not(.pro) #ffin,:root:not(.pro) #ffin2,:root:not(.pro) #ffin3{border:1px solid var(--field-line);border-radius:14px;font-size:18px;font-weight:700;letter-spacing:.18em;min-height:54px;box-shadow:none}
:root:not(.pro) #f-ff:focus,:root:not(.pro) #ffin:focus,:root:not(.pro) #ffin2:focus,:root:not(.pro) #ffin3:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(30,107,255,.16)}
:root:not(.pro) .pcsheet{border-radius:28px}
:root:not(.pro) .legalmark,:root:not(.pro) .foot{color:var(--soft)}
@media (prefers-reduced-motion:reduce){:root:not(.pro) .chip,:root:not(.pro) input,:root:not(.pro) textarea{transition:none}}
:root:not(.pro) label + .sm,:root:not(.pro) .card>div>.sm{font-size:13px;color:var(--soft);opacity:.92}
:root:not(.pro) .linkbtn{font-size:13.5px;padding:6px 4px;white-space:nowrap}
:root:not(.pro) .ffone{background:var(--bg);color:var(--soft);font-size:13px}
:root:not(.pro) .ffone b{color:var(--ink)}
:root:not(.pro) .paybox b{font-weight:600}
.list .row>b,.row>b{white-space:nowrap;flex-shrink:0}

/* ===== v47 Helpee (customer) header: a clear brand-blue band at the top of every screen. Helper (Pro) side untouched. */
@media all{:root:not(.pro){--band:linear-gradient(135deg,#2B7BFF 0%,#1E6BFF 45%,#1553D6 100%)}}
:root.dark:not(.pro){--band:linear-gradient(135deg,#1F5BD6 0%,#1B4DB8 50%,#123A8C 100%)}
:root:not(.pro) #app>.top:first-child{background:var(--band);color:#fff;padding:14px 16px;border-radius:24px;box-shadow:0 14px 30px -16px rgba(21,83,214,.7)}
:root:not(.pro) #app>.top:first-child h3,:root:not(.pro) #app>.top:first-child .who,:root:not(.pro) #app>.top:first-child .logo{color:#fff}
:root:not(.pro) #app>.top:first-child .logo i{background-color:#fff;background-size:62%;border-radius:11px;width:34px;height:34px}
:root:not(.pro) #app>.top:first-child .who{opacity:.9}
:root:not(.pro) #app>.top:first-child .pill{background:rgba(255,255,255,.18);color:#fff;border-color:transparent}
:root:not(.pro) .btn:not(.line):not(.alt):not(.bad):not(.small){background:linear-gradient(135deg,#2B7BFF,#1E6BFF 55%,#1553D6)}

/* v47: inputs without a type (such as the code box) follow the theme too, including dark mode */
input:not([type]),input[type=search],input[type=url]{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 12px}
:root:not(.pro) input:not([type]),:root:not(.pro) input[type=search],:root:not(.pro) input[type=url]{background:var(--card);border:1px solid var(--field-line);border-radius:14px;padding:14px 16px;min-height:50px}
:root.dark:not(.pro) input:not([type]),:root.dark:not(.pro) input[type=text],:root.dark:not(.pro) input[type=email],:root.dark:not(.pro) input[type=password],:root.dark:not(.pro) input[type=number],:root.dark:not(.pro) input[type=tel],:root.dark:not(.pro) select,:root.dark:not(.pro) textarea{border-color:var(--line)}
:root.dark:not(.pro) #f-ff,:root.dark:not(.pro) #ffin,:root.dark:not(.pro) #ffin2,:root.dark:not(.pro) #ffin3{background:var(--card);color:var(--ink);border-color:var(--brand)}

/* ===== v48 one typeface everywhere, a single seamless header block, tidy icons ===== */
:root{--display:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,.logo,.big,.go,.tile b,.pc-logo{font-family:var(--body)}
.iconbtn svg{display:block}
:root:not(.pro) .hero{background:var(--band);color:#fff;border-radius:24px;padding:14px 16px 20px;box-shadow:0 14px 30px -16px rgba(21,83,214,.7)}
:root:not(.pro) .hero .top{background:none;box-shadow:none;padding:0;border-radius:0}
:root:not(.pro) .hero .logo,:root:not(.pro) .hero .who{color:#fff}
:root:not(.pro) .hero .logo i{background-color:#fff;background-size:62%;border-radius:11px;width:34px;height:34px}
:root:not(.pro) .hero .greet{color:#fff;margin:12px 2px 0}

/* v48 settings as one tidy list, plus small layout fixes found in the screen-by-screen check */
.grp{margin:14px 2px 2px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:14px 4px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:16px;font-weight:500;text-align:left;text-decoration:none;cursor:pointer;border-radius:0}
.navrow::after{content:'';flex:none;width:8px;height:8px;border-right:2px solid var(--soft);border-top:2px solid var(--soft);transform:rotate(45deg);margin-right:4px;opacity:.7}
.navrow.tog::after{display:none}
.navrow.bad{color:var(--bad);font-weight:600}.navrow.bad::after{border-color:var(--bad)}
.navrow:active{background:var(--brand-soft)}
.navrow:focus-visible{outline:3px solid var(--brand);outline-offset:-2px;border-radius:10px}
.ffcard .row{flex-wrap:wrap;gap:6px 10px}
.ffcard .row .pill{white-space:normal}
input + .btn,input + button.btn{margin-top:12px}
:root:not(.pro) .row3 .btn.small{padding:12px 4px;white-space:nowrap;font-size:14.5px;border-radius:14px}
.stars button{color:#C3CCDD}
:root.dark .stars button{color:#4A5A7C}

/* v48: long bold titles may wrap, only prices stay on one line. A row with a small button wraps the button underneath on narrow phones. */
:root:not(.pro) .row>b{white-space:normal;flex-shrink:1;min-width:0}
:root:not(.pro) .list .row>b{white-space:nowrap;flex-shrink:0}
.row:has(>.btn.small){flex-wrap:wrap;gap:8px 12px}
.row>.btn.small{white-space:nowrap}

/* v49: icon buttons are true-centred (the old block svg sat 4px left of centre) */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0;flex:none}
.iconbtn svg{display:block;flex:none}

/* v49 chat bar: camera, field and Send share one 48px height and baseline */
.row:has(> .attach){align-items:stretch;gap:8px}
.attach{width:48px;height:48px;font-size:0;color:var(--soft);border-radius:14px}
.row:has(> .attach) input[type=text]{height:48px;padding-top:0;padding-bottom:0;border-radius:14px}
.sendbtn{width:auto;min-width:76px;height:48px;padding:0 18px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center}
/* v49 live map: shorter on job screens so the job card is the hero */
.mapwrap .map{aspect-ratio:1/0.62}
.mapwrap:has(+ #bookform) .map{aspect-ratio:1/0.5}
/* v49 settings: one left edge for every row, label and button */
.navrow{padding-left:0;padding-right:0}
.card .list .row{padding-left:0;padding-right:0}
.sendbtn{margin:0;align-self:stretch}
input + .btn.sendbtn,input + button.sendbtn{margin:0}

/* v51 file pickers: just a clean "Choose files" button, no "No file chosen" text */
input[type=file]{color:transparent;font-size:0;line-height:0;padding:0;border:0;background:none;min-height:0;width:auto}
input[type=file]::file-selector-button{font-size:15px;line-height:1.2;color:var(--brand)}

/* v51 helper map height */
.pro .map{aspect-ratio:1/0.62}

/* v54 code row on the home screen (the only place a code is entered) */
.card.ffclosed{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;min-height:56px;padding:12px 16px}
.card.ffclosed b{font-size:15px;font-weight:600}
.card.ffclosed .pill{white-space:nowrap;flex:none}

/* v58: small trust line on payment screens */
.stripebadge{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;font-size:12.5px;color:var(--soft)}
.stripebadge .ic{width:14px;height:14px}
.stripebadge b{color:var(--ink);font-weight:700}

/* v60: kind words, upright and easy to read */
.kw{border-left:3px solid var(--good);background:var(--good-soft);background:color-mix(in srgb,var(--good-soft) 62%,var(--card));border-radius:10px;padding:10px 12px;margin:8px 0}
.kwq{margin:0;font-style:normal;font-weight:600;font-size:15.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.kwby{margin:4px 0 0;font-size:13px;color:var(--soft)}

/* ===== v63 continuity: Help'd Pro gets the same shapes, sizes and type as the Helpee side. Colours stay green. */
:root.pro body{font-size:15.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
:root.pro #app{gap:16px}
:root.pro h1,:root.pro h2,:root.pro h3{font-weight:700;letter-spacing:-.02em}
:root.pro h2{font-size:24px;line-height:1.2}
:root.pro .card{border-radius:22px;padding:20px;gap:14px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(10,40,24,.03),0 14px 34px -16px rgba(10,40,24,.14)}
:root.pro label{font-size:13px;font-weight:600;color:var(--soft);margin-bottom:6px;letter-spacing:.01em}
:root.pro input[type=text],:root.pro input[type=email],:root.pro input[type=password],:root.pro input[type=number],:root.pro input[type=tel],:root.pro select,:root.pro textarea,:root.pro input:not([type]),:root.pro input[type=search],:root.pro input[type=url]{
  background:var(--card);border:1px solid var(--field-line);border-radius:14px;padding:14px 16px;min-height:50px}
:root.pro input:focus,:root.pro textarea:focus,:root.pro select:focus{outline:2px solid transparent;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
:root.pro .chip{background:var(--card);border:1px solid var(--field-line);padding:10px 16px;font-weight:500}
:root.pro .chip.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
:root.pro .btn{border-radius:16px;padding:16px;font-weight:600;letter-spacing:.005em}
:root.pro .btn.line{border:1px solid var(--field-line);background:var(--card)}
:root.pro .btn.small{padding:9px 18px;border-radius:999px}
:root.pro .linkbtn{text-underline-offset:3px}
:root.pro .pill{font-weight:600;padding:4px 11px;letter-spacing:.01em}
:root.pro .sm{font-size:13.5px;line-height:1.5}
:root.pro .big{font-weight:700;letter-spacing:-.02em}
:root.pro .list .row{padding:12px 0}
:root.pro .msg{border-radius:16px;padding:9px 13px}
:root.pro .paybox{border-radius:16px;padding:12px 14px}
:root.pro .multiopt{border-radius:18px;padding:14px 16px}
:root.pro .multibox{border-radius:14px}
:root.pro .pcsheet{border-radius:28px}
@media all{:root.pro .btn:not(.line):not(.alt):not(.bad):not(.small){background:linear-gradient(135deg,#12A06C,#0B8A5C 55%,#08724B);box-shadow:0 10px 22px -10px rgba(11,138,92,.55)}}
:root.dark.pro .btn:not(.line):not(.alt):not(.bad):not(.small){background:linear-gradient(135deg,#4AE8A8,#35DC98 55%,#22C283)}

/* v65: header reads Help'd Australia on both sides. Australia sits a touch lighter; small phones get a slightly smaller header so nothing crowds. */
.top{gap:10px}
.logo{white-space:nowrap;min-width:0;flex:0 1 auto}
.logo i{flex-shrink:0}
.logo-au{font-weight:600;font-size:.82em;margin-left:-2px}
.logo .badge{flex-shrink:0;margin-left:2px}
.top .who{flex-shrink:0;display:flex;align-items:center;gap:8px}
@media (max-width:389px){
  .logo,:root:not(.pro) .logo{font-size:19px;gap:6px}
  .pro .logo .badge{font-size:10px;padding:2px 6px}
  .pro .top .who .pill{font-size:11.5px;padding:3px 9px}
  .top .who{gap:6px}
}
@media (max-width:359px){
  .logo,:root:not(.pro) .logo{font-size:17px;gap:5px}
  .logo i,.pro .logo i{width:24px;height:28px}
  .pro .top .who .pill{font-size:11px;padding:3px 7px}
  .top{gap:6px}
}

/* v67: the switch link reads the same size on both sides */
.foot .linkbtn,:root:not(.pro) .foot .linkbtn,:root.pro .foot .linkbtn{font-size:14px;line-height:1.4}
.foot .linkbtn,:root:not(.pro) .foot .linkbtn,:root.pro .foot .linkbtn{white-space:normal;max-width:100%;overflow-wrap:anywhere}
@media (max-width:359px){.foot .linkbtn,:root:not(.pro) .foot .linkbtn,:root.pro .foot .linkbtn{font-size:13px}}
.foot .linkbtn{text-wrap:balance}

/* V72: camera for the Helper photo and spot checks */
.camsheet{width:100%;max-width:420px;max-height:92vh;overflow:auto;margin:0}
.camsheet h2{margin-top:0}
.camwrap{position:relative;width:100%;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:#000;margin:8px 0 12px}
.camwrap video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camshot{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;margin:8px 0 12px}
.avatar.ph{object-fit:cover;padding:0;cursor:zoom-in}
.helperrow img.avatar{flex:0 0 52px;width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--brand-soft)}
input[type=date]{min-height:48px;-webkit-appearance:none;appearance:none;display:block}

/* V74: support centre */
.suplist{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.suprow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;color:var(--ink);cursor:pointer}
.suprow span{display:flex;flex-direction:column;gap:2px;min-width:0}
.suprow b{font-weight:700;font-size:16px}
.suprow small{color:var(--soft);font-size:13.5px;line-height:1.35}
.suprow i{font-style:normal;font-size:26px;line-height:1;color:var(--soft);flex:none}
.suprow.urgent{border-color:#F4C7C3;background:#FFF6F5}
.suprow.urgent b{color:#B42318}
.sup000{background:#FFF1F0;border:1px solid #F4C7C3;color:#7A1A12}
.sup000 a{color:#B42318;font-weight:800}
.sup000.supbig h2{color:#B42318}
.sup000 .btn{display:block;text-align:center;text-decoration:none;margin-top:12px}
.supref{background:var(--brand-soft);border-radius:14px;padding:14px 16px;margin:12px 0;display:flex;flex-direction:column;align-items:center;gap:2px}
.supref small{color:var(--soft)}
.supref b{font-size:26px;letter-spacing:2px;color:var(--brand)}
.foot .suplink{display:block;margin:0 auto 4px;font-weight:600}
:root.dark .suprow.urgent{background:#3A1A18;border-color:#6B2A25}
:root.dark .suprow.urgent b{color:#FFB4AB}
:root.dark .sup000{background:#3A1A18;border-color:#6B2A25;color:#FFDAD6}
:root.dark .sup000 a,:root.dark .sup000.supbig h2{color:#FFB4AB}
.sup000 .btn.bad{background:#B42318;color:#FFFFFF;border:0}