/* ---- style block (main) ---- */
:root{
  --bg:#F2F2F7;--card:#FFFFFF;--text:#1C1C1E;--sub:#6E6E73;--border:#E5E5EA;
  --accent:#0D9488;--accent-bg:#E6F5F3;--amber:#B7791F;--amber-bg:#FDF3E1;--danger-soft:#FDEBEB;
  --danger:#D14343;--green:#1F8A4C;--on-accent:#FFFFFF;--accent-soft:#DCF2EF;--accent-wash:#F3FBF9;--accent-shadow:#0A6A61;--green-bg:#E9F6EE;--calm:1;--weight-b:1;--weight-t:1;
  --glass:rgba(255,255,255,.78);
  --accent-2:#14B8A6;--fs:1;--r:0px;--c:0px;--glow:1;--feed-gap:16px;
  --spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,1,.36,1);
  --hdr:70px;--radius:28px;--radius-lg:34px;--radius-sm:18px;--radius-chip:16px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 4px 12px rgba(16,24,40,.04);
  --shadow-md:0 2px 6px rgba(16,24,40,.05),0 12px 30px rgba(16,24,40,.07);
  --shadow-lg:0 14px 44px rgba(16,24,40,.16);
  --fill:rgba(120,120,128,.10);--fill-2:rgba(120,120,128,.16);
  --pad:20px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#0B0B0D;--card:#1C1C1E;--text:#F2F2F2;--sub:#98989D;--border:#2C2C2E;--accent-bg:#0F2C29;--amber-bg:#2A2110;--glass:rgba(28,28,30,.74);}
}
:root[data-theme="dark"]{--bg:#0B0B0D;--card:#1C1C1E;--text:#F2F2F2;--sub:#98989D;--border:#2C2C2E;--accent-bg:#0F2C29;--amber-bg:#2A2110;--glass:rgba(28,28,30,.74);}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}
button{font-family:inherit;cursor:pointer}
body{display:flex;justify-content:center}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#app{width:100%;max-width:480px;height:100%;height:100dvh;position:relative;overflow:hidden}
#app::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 38% at 50% -6%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}

/* header: large title that shrinks into a blurred bar */
header{position:absolute;top:0;left:0;right:0;z-index:6;height:calc(var(--hdr) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--pad) 0;display:flex;align-items:flex-end}
header::before{content:'';position:absolute;inset:0;background:var(--glass);backdrop-filter:blur(32px) saturate(1.9);-webkit-backdrop-filter:blur(32px) saturate(1.9);border-bottom:.5px solid var(--border);opacity:0;transition:opacity .25s}
header.compact::before{opacity:1}
.hrow{position:relative;width:100%;display:flex;align-items:center;gap:12px;padding-bottom:11px}
h1.title{flex:1;margin:0;font-size:31px;line-height:40px;font-weight:800;letter-spacing:-.8px;transform-origin:0 60%;transition:transform .38s var(--ease);white-space:nowrap}
header.compact h1.title{transform:scale(.62)}
h1.title.swap{animation:titleIn .4s var(--ease)}
@keyframes titleIn{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.sub{color:var(--sub);font-size:13.5px;line-height:1.45;margin:2px 0 16px}

main{position:absolute;inset:0;overflow-y:auto;padding:calc(var(--hdr) + env(safe-area-inset-top,0px) + 14px) var(--pad) 136px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}
main::-webkit-scrollbar{display:none}
main.enter{animation:mainIn .42s var(--ease)}
@keyframes mainIn{from{opacity:0;transform:translateX(var(--dx,0px)) translateY(var(--dy,10px)) scale(.985)}to{opacity:1;transform:none}}

/* tab bar with a sliding indicator */
.tabbar{position:absolute;left:14px;right:14px;z-index:7;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;background:var(--glass);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);border:.5px solid var(--border);border-radius:calc(30px + var(--r));padding:7px;box-shadow:var(--shadow-lg)}
.tab-ind{position:absolute;top:7px;bottom:7px;left:0;width:0;border-radius:24px;background:color-mix(in srgb,var(--accent) 14%,transparent);transition:transform .5s var(--spring),width .3s}
.tab{position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;color:var(--sub);font-size:10px;font-weight:600;letter-spacing:-.1px;line-height:1;padding:10px 2px 9px;border-radius:24px;transition:transform .2s var(--spring),color .2s;white-space:nowrap;overflow:hidden}
.tab.active{color:var(--accent)}
.tab:active{transform:scale(.88);will-change:transform}
.tab svg{width:24px;height:24px;flex-shrink:0;transition:transform .35s var(--spring)}
.tab.active svg{transform:translateY(-1px) scale(1.1)}

.card{background:var(--card);border-radius:calc(var(--radius) + var(--r));border:.5px solid var(--border);padding:calc(17px + var(--c)*.5);margin-bottom:var(--feed-gap);box-shadow:var(--shadow-sm);transition:transform .25s var(--spring),box-shadow .2s;opacity:0;animation:cardIn .42s var(--ease) forwards;cursor:pointer}
.card.static{cursor:default}
.card:active{transform:scale(.975);box-shadow:var(--shadow-md);will-change:transform}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card:nth-child(4n+1){animation-delay:.02s}.card:nth-child(4n+2){animation-delay:.06s}.card:nth-child(4n+3){animation-delay:.1s}.card:nth-child(4n){animation-delay:.14s}
main.noanim .card{animation:none;opacity:1}
main.noanim .card.fresh{animation:freshIn .6s var(--spring) both}
@keyframes freshIn{from{opacity:0;transform:translateY(-22px) scale(.94)}to{opacity:1;transform:none}}
.chev{width:16px;height:16px;color:var(--sub);flex-shrink:0;margin-left:4px;opacity:.5}
.row{display:flex;align-items:center;gap:14px}
.badge{width:46px;height:46px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.badge.sm{width:38px;height:38px;border-radius:13px}
.ename{font-size:calc(16px*var(--fs));font-weight:650;letter-spacing:-.2px;line-height:1.3;margin:0 0 3px}
.emeta{font-size:calc(12.8px*var(--fs));color:var(--sub);line-height:1.35;margin:0}
.price{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.price .amt{font-size:17.5px;font-weight:800;letter-spacing:-.3px;color:var(--accent);font-variant-numeric:tabular-nums}
.price .st{display:block;font-size:11px;color:var(--sub);margin:0}
.status-pill{font-size:10.5px;font-weight:700;letter-spacing:.1px;padding:4px 10px;border-radius:999px;white-space:nowrap}
.st-open{background:var(--accent-bg);color:var(--accent)}
.st-accepted{background:var(--amber-bg);color:var(--amber)}
.st-completed{background:var(--green-bg);color:var(--green)}
.tag-near{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:4px 9px;border-radius:999px;margin-top:7px}

/* segmented control with sliding thumb */
.segment{position:relative;display:flex;background:var(--fill-2);border-radius:16px;padding:4px;margin:4px 0 18px}
.seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:13px;background:var(--card);box-shadow:var(--shadow-sm);transition:transform .45s var(--spring)}
.segment[data-i="1"] .seg-thumb{transform:translateX(100%)}
.seg-btn{position:relative;z-index:1;flex:1;border:none;background:none;border-radius:13px;padding:10px 0;font-size:13.5px;font-weight:600;color:var(--sub);transition:color .2s}
.seg-btn.active{color:var(--text)}
.swapin{animation:swapIn .35s var(--ease)}
@keyframes swapIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.2px;color:var(--sub);margin:22px 0 9px}
label .r{float:right;color:var(--text);font-weight:700}
input,textarea,select{width:100%;background:var(--card);border:.5px solid var(--border);border-radius:var(--radius-sm);padding:15px 16px;font-size:16px;color:var(--text);font-family:inherit;transition:border-color .15s,box-shadow .2s,background .2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
textarea{resize:none;min-height:92px;line-height:1.5}
.err{font-size:12.5px;font-weight:600;color:var(--danger);margin:9px 4px 0;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s var(--ease),opacity .2s}
.err.show{max-height:30px;opacity:1}
input.bad,textarea.bad{border-color:var(--danger);box-shadow:0 0 0 4px rgba(209,67,67,.12)}
.shake{animation:shake .42s}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

.input-wrap{position:relative}
.input-wrap input{padding-right:58px}
.loc-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:13px;border:none;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;transition:transform .2s var(--spring)}
.loc-btn:active{transform:translateY(-50%) scale(.88)}
.loc-btn.busy svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.area-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:7px 13px;border-radius:999px;margin-top:12px;max-height:0;opacity:0;transform:scale(.85);transform-origin:0 50%;overflow:hidden;transition:all .4s var(--spring)}
.area-chip.show{max-height:32px;opacity:1;transform:none}
.money-in{position:relative}
.money-in span{position:absolute;left:17px;top:50%;transform:translateY(-50%);font-size:16px;font-weight:700;color:var(--sub);pointer-events:none}
.money-in input{padding-left:38px;font-weight:700;font-variant-numeric:tabular-nums}
.money-in input.pulse{animation:priceOk .7s}
@keyframes priceOk{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent)}100%{box-shadow:0 0 0 14px transparent}}

/* range slider */
input[type=range]{-webkit-appearance:none;appearance:none;height:32px;padding:0;background:none;border:none;box-shadow:none;border-radius:0}
input[type=range]:focus{box-shadow:none}
input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:4px;background:linear-gradient(to right,var(--accent) var(--p,20%),var(--border) var(--p,20%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;border:none;box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.08);transition:transform .2s var(--spring)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
input[type=range]::-moz-range-track{height:7px;border-radius:4px;background:var(--border)}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--accent)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:none;box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* category column */
.catlist{background:var(--card);border-radius:calc(var(--radius) + var(--r));border:.5px solid var(--border);overflow:hidden;box-shadow:var(--shadow-md)}
.catrow{position:relative;width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;border:none;background:none;text-align:left;color:var(--text);transition:background .25s}
.catrow+.catrow::before,.more-in>.catrow:first-child::before{content:'';position:absolute;top:0;left:70px;right:0;height:.5px;background:var(--border)}
.catrow:active{background:rgba(120,120,128,.1)}
.catrow.active{background:var(--accent-bg)}
.catrow .cl{flex:1;min-width:0}
.catrow .cl b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.2px}
.catrow .cl small{font-size:12.5px;color:var(--sub);letter-spacing:.1px}
.trend{display:none;font-size:10.5px;font-weight:700;color:var(--amber);background:var(--amber-bg);padding:4px 10px;border-radius:999px;margin-left:auto}
.catrow.top .trend{display:inline-block;animation:swapIn .4s var(--spring)}
.tick{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s,border-color .2s,transform .35s var(--spring)}
.tick svg{width:14px;height:14px;opacity:0;transform:scale(.4);transition:all .3s var(--spring)}
.catrow.active .tick{background:var(--accent);border-color:var(--accent);transform:scale(1.08)}
.catrow.active .tick svg{opacity:1;transform:none}
.more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.more.open{grid-template-rows:1fr}
.more-in{overflow:hidden;min-height:0}
.more-btn{width:100%;border:none;background:none;border-top:.5px solid var(--border);padding:15px;font-size:13.5px;font-weight:700;color:var(--accent);display:flex;align-items:center;justify-content:center;gap:6px}
.more-btn svg{width:14px;height:14px;transition:transform .4s var(--spring)}
.more-btn.open svg{transform:rotate(180deg)}

.urgent-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--card);border:.5px solid var(--border);border-radius:var(--radius-sm);padding:15px 16px;margin-top:18px}
.urgent-row small{display:block;color:var(--sub);font-size:12px;line-height:1.35;margin-top:3px}
.switch{width:51px;height:31px;border-radius:20px;background:rgba(120,120,128,.3);position:relative;border:none;flex-shrink:0;transition:background .25s}
.switch.on{background:var(--accent)}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.28);transition:transform .35s var(--spring),width .2s}
.switch:active::after{width:32px}
.switch.on::after{transform:translateX(20px)}
.switch.on:active::after{transform:translateX(15px)}

/* AI price pop-up */
.price-wrap{position:relative}
.ai-pop{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:6;display:flex;align-items:center;gap:11px;padding:12px 12px 12px 14px;border-radius:22px;background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));box-shadow:0 16px 44px rgba(0,0,0,.24);opacity:0;transform:translateY(14px) scale(.88);transform-origin:40px 100%;pointer-events:none;transition:opacity .2s,transform .55s var(--spring)}
.ai-pop.show{opacity:1;transform:none;pointer-events:auto}
.ai-pop::after{content:'';position:absolute;left:30px;bottom:-8px;width:14px;height:14px;background:var(--card);border-right:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));transform:rotate(45deg);border-bottom-right-radius:4px}
.ai-pop .spark{width:34px;height:34px;border-radius:12px;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-pop .spark svg{width:18px;height:18px;animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(1.2) rotate(14deg)}}
.ai-pop .pt{flex:1;font-size:13px;line-height:1.4;color:var(--text)}
.ai-pop .pt b{color:var(--accent);white-space:nowrap}
.ai-pop .x{position:absolute;top:-9px;right:-3px;width:26px;height:26px;border-radius:50%;border:.5px solid var(--border);background:var(--card);color:var(--sub);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.ai-pop .x svg{width:12px;height:12px}

.btn{border:none;border-radius:var(--radius-sm);padding:17px 20px;font-size:16px;font-weight:700;letter-spacing:-.2px;width:100%;margin-top:22px;transition:transform .25s var(--spring),background .3s,opacity .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:scale(.965)}
.btn-primary{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 8px 24px color-mix(in srgb,var(--accent) calc(var(--glow)*34%),transparent)}
.btn.done{background:var(--green);box-shadow:0 6px 18px color-mix(in srgb,var(--green) 34%,transparent)}
.btn-small{border:none;border-radius:14px;padding:10px 16px;font-size:13px;font-weight:700;background:var(--accent);color:#fff;transition:transform .2s var(--spring);white-space:nowrap}
.btn-small:active{transform:scale(.92)}
.btn-ghost{background:var(--card);color:var(--accent);border:.5px solid var(--border);box-shadow:none}
.btn-decline{background:none;color:var(--danger);margin-top:4px}
.draw path{stroke-dasharray:26;stroke-dashoffset:26;animation:draw .45s .05s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.chips{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips.wrap{flex-wrap:wrap;overflow:visible}
.chip{display:flex;align-items:center;gap:9px;flex-shrink:0;border:1.5px solid var(--border);background:var(--card);border-radius:999px;padding:8px 16px 8px 8px;font-size:13px;font-weight:600;color:var(--text);transition:transform .2s var(--spring),border-color .2s,background .2s,color .2s}
.chip:active{transform:scale(.94)}
.chip .dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chip.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.chip:not(.active){opacity:.6}
/* segmented sort rail: four equal cells, a thumb that slides, never overflows */
.sortrail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--fill);border:.5px solid var(--border);border-radius:20px;padding:5px;margin:0 0 18px}
.sort-thumb{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/4);border-radius:15px;background:var(--card);box-shadow:var(--shadow-sm);transition:transform .45s var(--spring)}
.sortbtn{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;border:none;background:none;color:var(--sub);font-size:11.5px;font-weight:600;letter-spacing:-.1px;padding:9px 2px;border-radius:15px;transition:color .25s,transform .2s var(--spring);white-space:nowrap}
.sortbtn span{overflow:hidden;text-overflow:ellipsis}
.sortbtn svg{flex-shrink:0;opacity:.75}
.sortbtn.active{color:var(--accent)}
.sortbtn.active svg{opacity:1}
.sortbtn:active{transform:scale(.96)}
.sarr{transition:transform .3s var(--spring)}.sarr.up{transform:rotate(180deg)}
.empty{text-align:center;color:var(--sub);font-size:14px;line-height:1.55;padding:64px 26px}
.empty .eic{width:68px;height:68px;border-radius:24px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}

/* near-you banner */
.spot{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:calc(22px + var(--r));margin-bottom:var(--feed-gap);background:linear-gradient(135deg,var(--accent-bg),color-mix(in srgb,var(--accent-bg) 40%,var(--card)));border:.5px solid color-mix(in srgb,var(--accent) 22%,var(--border))}
.spot .pin{position:relative;width:42px;height:42px;border-radius:15px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.spot .pin::after{content:'';position:absolute;inset:0;border-radius:13px;border:2px solid var(--accent);animation:ring 2.2s infinite}
.spot b{display:block;font-size:14.5px;letter-spacing:-.2px}
.spot small{color:var(--sub);font-size:12.5px;line-height:1.35;display:block;margin-top:2px}
.spot.swap{animation:swapIn .5s var(--spring)}
.spot{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s var(--spring)}
.spot:active{transform:scale(.975)}
.spot>div:nth-child(2){flex:1;min-width:0}
.spot .chev{margin-left:auto}
.sp-list{display:grid;gap:var(--feed-gap,10px);margin:16px 0 4px}
.sp-empty{text-align:center;color:var(--sub);font-size:14px;line-height:1.5;padding:22px 8px}

/* sheets */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,0);display:flex;align-items:flex-end;z-index:20;transition:background .3s}
.sheet-bg.show{background:rgba(0,0,0,.36)}
.sheet{background:var(--glass);backdrop-filter:blur(34px) saturate(1.9);-webkit-backdrop-filter:blur(34px) saturate(1.9);width:100%;max-width:480px;margin:0 auto;border-radius:calc(var(--radius-lg) + var(--r)) calc(var(--radius-lg) + var(--r)) 0 0;padding:0 24px calc(28px + env(safe-area-inset-bottom,0px));max-height:86vh;overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);transition:transform .5s var(--ease),max-height .55s var(--ease),border-radius .4s var(--ease);box-shadow:0 -10px 50px rgba(0,0,0,.22)}
.sheet-bg.show .sheet{transform:translateY(0)}
.sheet .grab{padding:12px 0 18px;touch-action:none;cursor:grab}
.sheet .grabber{width:38px;height:5px;border-radius:3px;background:rgba(120,120,128,.35);margin:0 auto}
.sheet h2{font-size:23px;line-height:1.25;margin:0 0 6px;font-weight:800;letter-spacing:-.5px}
.sheet .sub{margin-bottom:16px}
.sheet.full{max-height:95vh;border-radius:calc(38px + var(--r)) calc(38px + var(--r)) 0 0}
/* expandable details inside the errand sheet */
.up-btn{width:100%;margin-top:20px;border:none;border-radius:var(--radius-sm);padding:15px 16px;background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .25s var(--spring),background .2s}
.up-btn:active{transform:scale(.97)}
.up-btn svg{width:16px;height:16px;transform:rotate(180deg);transition:transform .45s var(--spring)}
.up-btn.open svg{transform:rotate(0)}
.xp{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--ease),opacity .35s .05s}
.xp.open{grid-template-rows:1fr;opacity:1}
.xp-in{overflow:hidden;min-height:0}
.grp-h{font-size:11.5px;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.7px;margin:26px 4px 10px}
.grp{background:color-mix(in srgb,var(--text) 4%,transparent);border-radius:22px;padding:4px 18px}
.grp .field:last-child{border-bottom:none}
.tag{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px}
.tag.hi{background:var(--amber-bg);color:var(--amber)}.tag.mid{background:var(--accent-bg);color:var(--accent)}.tag.lo{background:var(--green-bg);color:var(--green)}
.tl{padding:18px 18px 10px}
.tl-step{position:relative;display:flex;gap:15px;padding-bottom:20px}
.tl-step:not(:last-child)::before{content:'';position:absolute;left:11px;top:26px;bottom:2px;width:2px;border-radius:2px;background:var(--border)}
.tl-step.done:not(:last-child)::before{background:var(--accent)}
.tl-dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);background:var(--card);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff}
.tl-dot svg{width:13px;height:13px;opacity:0}
.tl-step.done .tl-dot{background:var(--accent);border-color:var(--accent)}.tl-step.done .tl-dot svg{opacity:1}
.tl-step.now .tl-dot{border-color:var(--accent);animation:pulse 1.6s infinite}
.tl-step b{display:block;font-size:14px;line-height:24px;letter-spacing:-.1px}
.tl-step small{display:block;color:var(--sub);font-size:12.5px;line-height:1.4;margin-top:2px}
.tl-step:not(.done):not(.now) b{color:var(--sub);font-weight:600}
.note{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:15px 16px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-size:12.8px;line-height:1.5;font-weight:600}
.note svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.av{width:40px;height:40px;border-radius:50%;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.offer{display:flex;align-items:center;gap:13px;padding:15px 0;border-bottom:.5px solid var(--border)}
.offer small,.trk small{display:block;color:var(--sub);font-size:12.5px}
.trk{background:color-mix(in srgb,var(--text) 4%,transparent);border-radius:24px;padding:18px;margin-top:20px}
.bar{height:8px;border-radius:8px;background:var(--border);overflow:hidden;margin-top:12px}
.bar{height:10px}
.bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff));background-size:200% 100%;animation:shimmer 2.4s linear infinite;transition:width .9s linear}
@keyframes shimmer{to{background-position:-200% 0}}
.btn:disabled:not(.done){opacity:.45;box-shadow:none}
.btn.ready{animation:readyPop .6s var(--spring)}
@keyframes readyPop{0%{transform:scale(.94)}100%{transform:none}}
.offtimer{display:flex;align-items:center;gap:15px;padding:16px;margin-top:8px;border-radius:22px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.offtimer small{display:block;color:var(--sub);font-size:12.5px;margin-top:2px;line-height:1.35}
.ring{--p:100;flex-shrink:0;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--accent) calc(var(--p)*1%),rgba(120,120,128,.2) 0)}
.ring b{width:44px;height:44px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:13px;font-variant-numeric:tabular-nums;color:var(--accent)}
.field{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:15px 2px;border-bottom:.5px solid var(--border);font-size:14px;line-height:1.45}
.field span:first-child{color:var(--sub);flex-shrink:0}
.field span:last-child{text-align:right}
.hidden{display:none}

.avail{display:flex;align-items:center;gap:8px;flex-shrink:0;background:var(--card);border:.5px solid var(--border);border-radius:999px;padding:9px 14px;font-size:12.5px;font-weight:700;color:var(--sub);transition:transform .2s var(--spring),color .2s}
.avail:active{transform:scale(.92)}
.avail i{width:9px;height:9px;border-radius:50%;background:var(--sub);transition:background .2s}
.avail.on{color:var(--accent)}.avail.on i{background:var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 50%,transparent)}100%{box-shadow:0 0 0 9px transparent}}

/* toasts live in a fixed host so several can stack at once */
.toast-host{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:0;right:0;z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 12px}
.t-undo{flex-shrink:0;border:none;background:var(--accent-bg);color:var(--accent);font-size:13px;font-weight:700;padding:7px 13px;border-radius:13px;pointer-events:auto}
.t-undo:active{transform:scale(.94)}
.toast{position:relative;width:100%;max-width:456px;pointer-events:auto;transform:translate(-50%,-170%) scale(.94);display:flex;align-items:center;gap:13px;background:var(--glass);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);border:.5px solid var(--border);border-radius:24px;padding:14px 16px 14px 14px;box-shadow:0 14px 36px rgba(0,0,0,.22);z-index:40;transition:transform .6s var(--spring);font-size:13.5px;line-height:1.4;cursor:pointer}
.toast.show{transform:translate(-50%,0)}
.toast b{display:block;font-size:12.5px;color:var(--accent);margin-bottom:1px}
.t-ic{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--accent-bg);color:var(--accent)}
.t-tx{min-width:0}

.earn{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-radius:calc(var(--radius) + var(--r));padding:22px 20px;margin-bottom:var(--feed-gap);box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 28%,transparent)}
.earn small{opacity:.9;font-size:12.5px;letter-spacing:.2px}.earn div{font-size:35px;font-weight:800;letter-spacing:-1px;margin-top:5px}
.radar{width:120px;height:120px;margin:6px auto 14px;position:relative}
.radar i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);animation:ring 1.8s infinite;opacity:0}
.radar i:nth-child(2){animation-delay:.6s}.radar i:nth-child(3){animation-delay:1.2s}
.radar b{position:absolute;inset:40px;border-radius:50%;background:var(--accent)}
@keyframes ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1);opacity:0}}
.res{display:flex;align-items:center;gap:14px;padding:14px 0;text-align:left;opacity:0;animation:swapIn .5s var(--ease) forwards}
.res .ok{width:34px;height:34px;border-radius:12px;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.res b{display:block;font-size:14.5px;letter-spacing:-.1px}.res small{display:block;color:var(--sub);font-size:12.5px;line-height:1.4;margin-top:3px}
.faces{display:flex;justify-content:center;margin:2px 0 14px}
.faces span{width:38px;height:38px;border-radius:50%;margin-left:-9px;border:3px solid var(--card);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;animation:pop .5s var(--spring) backwards}
.faces span:first-child{margin-left:0}
@keyframes pop{from{transform:scale(0)}}

.avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2)) center/cover;color:#fff;font-size:33px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:4px auto 10px;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 35%,transparent);cursor:pointer;transition:transform .25s var(--spring)}
.avatar:active{transform:scale(.94)}
.stats{display:flex;gap:12px;margin-bottom:18px}
.stat{flex:1;min-width:0;background:var(--card);border:.5px solid var(--border);border-radius:22px;padding:18px 12px;text-align:center;box-shadow:var(--shadow-sm)}
.stat b{display:block;font-size:calc(22px*var(--fs));font-weight:800;color:var(--accent);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:calc(11.5px*var(--fs));color:var(--sub);line-height:1.35;margin-top:7px}
.mini{width:40px;height:40px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-2)) center/cover;color:#fff;font-weight:800;font-size:17px;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 30%,transparent);transition:transform .25s var(--spring)}
.mini:active{transform:scale(.88)}.mini svg{width:20px;height:20px}
.alerts.off .alert-body{opacity:.4;pointer-events:none}
.alert-body{transition:opacity .3s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ============ spend / urgency / ads / settings ============ */
/* urgency picker */
.win{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--ease),opacity .3s}
.win.open{grid-template-rows:1fr;opacity:1;margin-top:18px}
.win-in{overflow:hidden;min-height:0}
.win-h{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.7px;margin:2px 2px 12px}
.win-note{font-size:12.5px;color:var(--sub);margin:13px 2px 0;line-height:1.45}
.win-chip{flex-direction:column;align-items:flex-start;gap:3px;padding:11px 16px;border-radius:var(--radius-chip)}
.win-chip .wl{font-size:13.5px;font-weight:700;letter-spacing:-.1px}
.win-chip .wm{font-size:10.5px;font-style:normal;font-weight:700;opacity:.75}
.win-chip.active .wm{opacity:1}
/* fee breakdown */
.fee-prev{margin:16px 0 0;background:color-mix(in srgb,var(--accent) 5%,var(--card));border:.5px solid var(--border);border-radius:var(--radius-sm);padding:15px 17px}
.fee-prev:empty{display:none}
.fee-line{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:13px;padding:6px 0;color:var(--sub)}
.fee-line b{color:var(--text);font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.fee-line.tot{border-top:.5px solid var(--border);margin-top:8px;padding-top:11px;color:var(--text);font-weight:700}
.fee-line.tot b{font-size:18.5px;color:var(--accent);font-weight:800;letter-spacing:-.3px}
.fee-tag,.urg-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.1px;border-radius:999px;padding:4px 9px;margin:0;white-space:nowrap}
.fee-tag{background:var(--fill);color:var(--sub)}
.urg-pill{background:var(--amber-bg);color:var(--amber)}
.price .urg-pill+p{display:none}
/* sponsored placements: one creative per card, the next one peeks at the edge */
.ads{position:relative;margin:0 0 var(--feed-gap)}
.ads-track{display:flex;transition:transform .55s var(--ease);will-change:transform}
.ad-card{flex:0 0 auto;width:76%;max-width:330px;margin-right:14px;border-radius:calc(24px + var(--r));overflow:hidden;background:var(--card);border:.5px solid var(--border);box-shadow:var(--shadow-md);transition:transform .35s var(--ease),opacity .35s var(--ease)}
.ad-card.dim{transform:scale(.94);opacity:.55}
.ad-card:active{transform:scale(.975)}
.ad-logo{width:38px;height:38px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;box-shadow:0 4px 12px rgba(0,0,0,.20)}
.ad-tag{flex-shrink:0;font-size:8.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--sub);background:rgba(120,120,128,.13);padding:3px 7px;border-radius:999px}
.ad-cta{flex-shrink:0;border:none;border-radius:var(--radius-chip);padding:13px 16px;font-size:12.5px;font-weight:700;letter-spacing:-.1px;color:#fff;background:linear-gradient(120deg,var(--accent),var(--accent-2));box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent);transition:transform .2s var(--spring)}
.ad-cta:active{transform:scale(.92)}
.ads-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 6px 0}
.ads-dots{display:flex;gap:7px;align-items:center}
.ads-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--text) 20%,transparent);transition:all .35s var(--spring)}
.ads-dots i.on{width:18px;border-radius:4px;background:var(--accent)}
.ads-hint{font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--sub);opacity:.65}
/* ---------- wallet ---------- */
.wallet-prev{margin:0 0 var(--feed-gap);border-radius:calc(var(--radius) + var(--r));border:.5px solid var(--border);overflow:hidden;cursor:pointer;background:var(--card);box-shadow:var(--shadow-md);transition:transform .25s var(--spring),box-shadow .2s}
.wallet-prev:active{transform:scale(.98)}
.wallet-prev:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wp-row{display:flex;align-items:center;gap:14px;padding:18px 17px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--card)),color-mix(in srgb,var(--accent-2) 10%,var(--card)))}
.wp-ic{width:44px;height:44px;flex-shrink:0;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent)}
.wp-tx{flex:1;min-width:0}
.wp-tx small{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--sub)}
.wp-tx b{display:block;font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1.15;margin-top:4px;font-variant-numeric:tabular-nums}
.wp-go{color:var(--sub);opacity:.7;flex-shrink:0}
.wp-foot{display:flex;align-items:center;gap:10px;padding:13px 17px;font-size:12px;color:var(--sub);border-top:.5px solid var(--border);white-space:nowrap;overflow:hidden}
.wp-foot span:first-child{font-weight:600}
.wp-open{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);flex-shrink:0}
.w-hero{margin:4px 0 16px}
.w-card{border-radius:calc(26px + var(--r));padding:22px 20px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 30%,transparent)}
.w-card small{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;opacity:.92}
.w-amt{font-size:39px;font-weight:800;letter-spacing:-1.4px;line-height:1.18;margin-top:6px;font-variant-numeric:tabular-nums}
.w-sub{font-size:12.5px;opacity:.92;margin-top:3px}
.w-withdraw{margin-top:20px;width:100%;border:none;border-radius:var(--radius-sm);padding:16px;font-size:15px;font-weight:800;color:var(--accent);background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 16px rgba(0,0,0,.16);transition:transform .2s var(--spring)}
.w-withdraw:active{transform:scale(.96)}
.w-grid{display:flex;gap:12px;margin:20px 0 4px}
.w-stat{flex:1;min-width:0;background:var(--card);border:.5px solid var(--border);border-radius:20px;padding:17px 9px;text-align:center;box-shadow:var(--shadow-sm)}
.w-stat b{display:block;font-size:15.5px;font-weight:800;color:var(--accent);letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.w-stat span{display:block;font-size:11px;color:var(--sub);margin-top:5px}
.chart{display:flex;align-items:flex-end;gap:10px;height:132px;padding:8px 2px 0}
.bar-wrap{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}
.bar-wrap i{width:100%;max-width:30px;border-radius:9px 9px 5px 5px;background:color-mix(in srgb,var(--accent) 26%,transparent);transition:height .6s var(--spring);animation:barGrow .7s var(--ease) both}
.bar-wrap i.now{background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 32%,transparent)}
.bar-wrap span{font-size:10px;font-weight:700;letter-spacing:.2px;color:var(--sub)}
@keyframes barGrow{from{height:4px}}
.tx{display:flex;align-items:center;gap:13px;padding:15px 0;border-bottom:.5px solid var(--border)}
.tx:last-child{border-bottom:none}
.tx-ic{width:38px;height:38px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.tx-tx{flex:1;min-width:0}
.tx-tx b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-tx small{display:block;color:var(--sub);font-size:11.5px;margin-top:3px}
.tx-amt{font-size:14px;font-weight:800;letter-spacing:-.2px;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.tx-amt.out{color:var(--sub)}
.w-err{display:flex;align-items:center;gap:8px;color:var(--danger);font-size:12.5px;font-weight:600;line-height:1.4;margin-top:14px}
.w-err:empty{display:none}
.w-amt-chip{font-variant-numeric:tabular-nums}
/* settings */
.set-preview{display:flex;align-items:center;gap:12px;padding:13px 2px 4px}
.set-preview b{font-size:15px;display:block}
.set-preview small{color:var(--sub);font-size:12.5px}
.prev-pill{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:4px 9px;border-radius:999px}
.accent-chip{width:38px;height:38px;border-radius:50%;flex-shrink:0;border:2.5px solid transparent;padding:0;transition:transform .25s var(--spring),border-color .2s;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.accent-chip.active{border-color:var(--text);transform:scale(1.08)}
.accent-chip:active{transform:scale(.9)}
.set-row{align-items:center;justify-content:space-between;gap:16px;padding:15px 2px;border-bottom:.5px solid var(--border)}
.set-row:last-child{border-bottom:none}
.set-tx b{display:block;font-size:14px;letter-spacing:-.1px}
.set-tx small{display:block;color:var(--sub);font-size:12.5px;line-height:1.4;margin-top:3px}
/* ===== v5.1 ===== */
header::before{opacity:1!important;background:var(--glass);border-radius:0 0 30px 30px;border-bottom:.5px solid color-mix(in srgb,var(--text) 8%,transparent)}
header::before,.tabbar,.sheet,.toast{backdrop-filter:blur(var(--blur,30px)) saturate(1.9);-webkit-backdrop-filter:blur(var(--blur,30px)) saturate(1.9)}
.tabbar{border-radius:34px;border:.5px solid color-mix(in srgb,var(--text) 10%,transparent);box-shadow:0 10px 40px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.28)}
main{overflow-x:hidden;overscroll-behavior-x:none}
.toast{touch-action:none;transform:translateY(-170%) scale(.94)!important;left:auto}
.toast.show{transform:none!important}
/* ads: clipped so the page never slides with a swipe */
.ads{overflow:hidden;touch-action:pan-y;padding:4px 0 6px;overscroll-behavior-x:contain}
.ad-card{position:relative;padding:0;border:none;color:var(--on-accent);border-radius:calc(30px + var(--r));box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 30%,transparent);min-height:190px;display:flex;flex-direction:column}
.ad-card::before,.ad-card::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.ad-card::before{width:170px;height:170px;right:-50px;top:-70px}
.ad-card::after{width:110px;height:110px;left:-30px;bottom:-45px;background:rgba(255,255,255,.09)}
.ad-card>*{position:relative;z-index:1}
.ad-logo{background:rgba(255,255,255,.22)!important;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.35);box-shadow:none;color:inherit}
.ad-tag{background:rgba(255,255,255,.22);color:inherit;font-size:9px}
.ad-card .ad-cta{margin:8px 16px 16px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:#fff!important;color:var(--accent);border-radius:999px;padding:11px 18px;box-shadow:0 6px 16px rgba(0,0,0,.18)}
/* sort rail */
.sortrail{background:color-mix(in srgb,var(--text) 6%,transparent);border:.5px solid color-mix(in srgb,var(--text) 8%,transparent);border-radius:999px;padding:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.sort-thumb{border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.sortbtn{border-radius:999px;font-weight:700;padding:11px 2px}.sortbtn.active,.sortbtn.active svg{color:var(--on-accent);opacity:1}
/* profile hero */
.p-hero{position:relative;overflow:hidden;border-radius:40px;padding:28px 20px 22px;text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 22%,var(--card)),color-mix(in srgb,var(--accent-2) 8%,var(--card)));border:.5px solid color-mix(in srgb,var(--accent) 22%,var(--border));box-shadow:var(--shadow-md)}
.p-hero::before{content:'';position:absolute;width:230px;height:230px;border-radius:50%;right:-80px;top:-100px;background:radial-gradient(color-mix(in srgb,var(--accent) 34%,transparent),transparent 70%)}
.p-hero>*{position:relative}.p-hero .avatar{width:92px;height:92px;border:4px solid var(--card)}.p-hero .btn-small{border-radius:999px}
.btn,.btn-small,.urgent-row,.fee-prev,.note,input,textarea,select{border-radius:var(--radius-sm)}.btn-small{border-radius:999px}
.wallet-prev,.w-card{border-radius:34px}
/* earnings */
.w-stat{cursor:pointer;transition:transform .2s var(--spring),border-color .2s,background .2s;font:inherit;color:inherit}
.w-stat:active{transform:scale(.95)}.w-stat.on{border-color:var(--accent);background:var(--accent-bg)}
.bar-wrap{cursor:pointer;-webkit-user-select:none;user-select:none}
.bar-wrap.on i{background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 32%,transparent)}
.bar-wrap.on span{color:var(--accent)}
.w-tip{margin:12px 2px 2px;padding:12px 14px;border-radius:18px;background:var(--accent-bg);color:var(--accent);font-size:13px;font-weight:700;line-height:1.4;animation:swapIn .3s var(--ease)}
/* urgency */
.win-chip{min-width:96px}.win-chip .wl{font-size:15px}
.win-chip .wm{font-size:11px;background:var(--amber-bg);color:var(--amber);padding:2px 8px;border-radius:999px;opacity:1}
.call-btn{text-decoration:none;margin-top:16px}.call-btn svg{width:18px;height:18px}
/* sign-in */
.auth{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:22px;background:radial-gradient(90% 50% at 50% 0,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%),var(--bg)}
.auth-card{width:100%;max-width:400px;background:var(--glass);backdrop-filter:blur(30px);border:.5px solid var(--border);border-radius:38px;padding:30px 24px 26px;box-shadow:var(--shadow-lg);animation:mainIn .5s var(--ease)}
.auth-logo{width:60px;height:60px;border-radius:22px;margin:0 auto 14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 40%,transparent)}
.auth-card h2,.auth-card .sub{text-align:center}
.seg-note{font-size:12px;color:var(--sub);text-align:center;margin:12px 0 0}
header.compact h1.title{transform:none;font-size:20px;letter-spacing:-.3px}
h1.title{min-width:0}
.ads,.ad-card{user-select:none;-webkit-user-select:none}

/* ===== v8 responsiveness + accessibility layer ===== */
/* Keep scrolling and card rendering cheap on phones and older devices. */
.card,.ad-card,.stat,.w-stat,.wallet-prev,.catlist{contain:layout paint;}
.card{content-visibility:auto;contain-intrinsic-size:120px;}
@media (max-width:360px){:root{--pad:14px}.tab{font-size:9px}.tab svg{width:22px;height:22px}.price .amt{font-size:16px}.sortbtn{font-size:10.5px}}
html.p-flat #app::before{display:none}
html.p-flat header::before,html.p-flat .tabbar,html.p-flat .sheet,html.p-flat .toast,html.p-flat .auth-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--card)!important}
html.p-flat .p-hero::before,html.p-flat .ad-card::before,html.p-flat .ad-card::after{display:none}
html.p-flat .btn-primary,html.p-flat .ad-card{background:var(--accent)!important;background-image:none!important}
html.p-still *,html.p-still *::before,html.p-still *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
/* ===== v7 polish layer ===== */
:root{--shadow-sm:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.06);--shadow-md:0 4px 10px rgba(16,24,40,.06),0 18px 40px rgba(16,24,40,.10)}
#app::before{background:radial-gradient(70% 34% at 15% -4%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),radial-gradient(60% 30% at 95% 6%,color-mix(in srgb,var(--accent-2) 16%,transparent),transparent 70%)}
.card{background:linear-gradient(180deg,color-mix(in srgb,var(--card) 100%,#fff 0%),color-mix(in srgb,var(--card) 96%,var(--accent) 4%));border:.5px solid color-mix(in srgb,var(--border) 70%,transparent);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.6)}
:root[data-theme="dark"] .card{box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.05)}
.badge{background-image:linear-gradient(145deg,rgba(255,255,255,.35),transparent 60%);box-shadow:0 6px 14px rgba(16,24,40,.10),inset 0 1px 0 rgba(255,255,255,.5)}
.btn{border-radius:calc(var(--radius-sm) + 4px);position:relative;overflow:hidden}
.btn:active{transform:scale(.96)}
.btn-primary{box-shadow:0 10px 26px color-mix(in srgb,var(--accent) calc(var(--glow)*38%),transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary::after{content:'';position:absolute;inset:0 0 50% 0;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);pointer-events:none}
.tabbar{border-radius:calc(34px + var(--r));padding:8px;box-shadow:0 18px 50px rgba(16,24,40,.20),inset 0 1px 0 rgba(255,255,255,.5)}
.tab-ind{border-radius:26px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent-2) 12%,transparent));box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--accent) 25%,transparent)}
.tab.active svg{filter:drop-shadow(0 3px 6px color-mix(in srgb,var(--accent) 45%,transparent))}
.sheet{box-shadow:0 -20px 60px rgba(16,24,40,.22)}
.grabber{width:42px;height:5px}
.grp{border-radius:26px;background:color-mix(in srgb,var(--card) 90%,var(--text) 3%);border:.5px solid var(--border)}
.switch.on{background:linear-gradient(120deg,var(--accent),var(--accent-2))}
input,textarea,select{border-radius:calc(var(--radius-sm) + 2px);box-shadow:inset 0 1px 2px rgba(16,24,40,.04)}
.auth-card{border-radius:42px;box-shadow:0 30px 80px rgba(16,24,40,.22),inset 0 1px 0 rgba(255,255,255,.5)}
.auth-logo{border-radius:26px;width:68px;height:68px;box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
/* ads: always their own brand colors, whatever theme the person picked */
.ad-card{box-shadow:0 16px 34px color-mix(in srgb,var(--ad,#444) 38%,transparent)!important}
.ad-card .ad-cta{color:var(--ad,#222)}
.ad-card::before{background:rgba(255,255,255,.18)}
/* verification */
.vhero{text-align:center;padding:4px 6px 0}
.vhero h2{margin:12px 0 4px;font-size:22px;letter-spacing:-.4px}
.vshield{width:64px;height:64px;margin:0 auto;border-radius:22px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 38%,transparent)}
.vok{color:var(--green);font-weight:700}.vneed{color:var(--amber);font-weight:700}
.field.tap{cursor:pointer}

/* ===== v8: smoothness, responsiveness, simple modes ===== */
button,.card,.tab,.chip,.switch,input,select,textarea,label{touch-action:manipulation}
.tabbar,.sheet,.toast,.auth-card,header::before{-webkit-backdrop-filter:blur(20px) saturate(1.4)!important;backdrop-filter:blur(20px) saturate(1.4)!important}
.tabbar{will-change:transform}
main{will-change:scroll-position;contain:layout style}
.card{content-visibility:auto;contain-intrinsic-size:auto 120px;transition:transform .16s var(--ease),box-shadow .2s}
main.enter{animation-duration:.28s}
.card{animation-duration:.3s}
.toast{cursor:pointer}
.gbanner{box-shadow:var(--shadow-sm)}
.agree{display:flex!important;gap:12px;align-items:flex-start;font-weight:500!important;font-size:13px;line-height:1.5;margin-top:20px}
.agree input{width:22px;height:22px;flex-shrink:0;margin-top:1px;padding:0;accent-color:var(--accent)}
html.p-solid *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.p-solid{--glass:var(--card)!important}
html.p-solid #app::before{display:none}
html.p-flat .card,html.p-flat .tabbar,html.p-flat .sheet,html.p-flat .btn,html.p-flat .btn-small,html.p-flat .ad-card,html.p-flat .auth-card,html.p-flat .toast,html.p-flat .badge,html.p-flat .vshield,html.p-flat .auth-logo,html.p-flat .wallet-prev,html.p-flat .tab-ind,html.p-flat .p-hero{box-shadow:none!important}
html.p-flat .btn-primary,html.p-flat .btn-small,html.p-flat .switch.on,html.p-flat .vshield,html.p-flat .auth-logo,html.p-flat .avatar{background-image:none!important;background-color:var(--accent)!important}
html.p-flat .card,html.p-flat .badge,html.p-flat .p-hero,html.p-flat .tab-ind{background-image:none!important}
html.p-flat .ad-card{background-image:none!important;background-color:var(--ad,var(--accent))!important}
html.p-flat #app::before,html.p-flat .btn-primary::after,html.p-flat .ad-card::before,html.p-flat .ad-card::after,html.p-flat .p-hero::before{display:none!important}
html.p-flat .tab.active svg{filter:none}
html.p-still .ad-card.dim{transition:none}
html.p-still *{scroll-behavior:auto!important}


/* ads: no big colored haze that gets cut off into a box */
.ads{padding:4px 0 14px!important}
.ad-card{box-shadow:0 6px 12px -2px rgba(16,24,40,.18)!important}
.ad-card::before{display:none}

/* shadows sized to fit inside their containers so nothing is cut off into a box */
:root{--shadow-md:0 2px 6px rgba(16,24,40,.06),0 8px 18px -6px rgba(16,24,40,.16);--shadow-lg:0 2px 12px rgba(16,24,40,.14),0 6px 14px -6px rgba(16,24,40,.16)}
.tabbar{box-shadow:0 2px 12px rgba(16,24,40,.16),0 6px 14px -6px rgba(16,24,40,.16),inset 0 1px 0 rgba(255,255,255,.5)!important}
.w-card{box-shadow:0 10px 20px -6px color-mix(in srgb,var(--accent) 40%,transparent)!important}
.ad-card .ad-cta{box-shadow:0 3px 8px rgba(0,0,0,.16)!important}

/* the top haze now covers the whole window, so it never ends in a hard edge at the sides of the app column */
#app::before{display:none!important}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 34% at 35% -4%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),radial-gradient(50% 30% at 70% 6%,color-mix(in srgb,var(--accent-2) 16%,transparent),transparent 70%)}
html.p-solid body::before,html.p-flat body::before{display:none}

.ai-pop{box-shadow:0 4px 12px -2px rgba(0,0,0,.22)!important}
.badge{box-shadow:0 3px 8px rgba(16,24,40,.10),inset 0 1px 0 rgba(255,255,255,.5)!important}
/* ---------- trust, safety, retention + demo polish ---------- */
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.trust-grid .btn{min-height:48px;padding:10px 12px;font-size:13px}.trust-grid .btn{margin:0}.trust-grid .btn-danger-soft{grid-column:1/-1}.btn-danger-soft{background:var(--danger-bg);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 22%,var(--border))}.proof-box{margin-top:10px;padding:12px;border:1px dashed var(--border);border-radius:16px;background:var(--card2)}.proof-box input{width:100%;margin-top:8px}.proof-ok{color:var(--accent);font-weight:700}.demo-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:var(--accent-bg);color:var(--accent);font-size:11px;font-weight:800}.level-card{position:relative;overflow:hidden}.level-progress{height:6px;background:var(--border);border-radius:99px;overflow:hidden;margin-top:10px}.level-progress>i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px}.ref-code{font:700 13px ui-monospace,SFMono-Regular,monospace;letter-spacing:.6px;padding:8px 10px;border-radius:10px;background:var(--card2)}.chat-msg{max-width:82%;padding:10px 12px;border-radius:16px;margin:7px 0;font-size:14px;line-height:1.4}.chat-me{margin-left:auto;background:var(--accent-bg);color:var(--text)}.chat-them{background:var(--card2)}.offline-bar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:8px 14px;text-align:center;background:var(--danger);color:#fff;font-size:12px;font-weight:700;display:none}.offline-bar.show{display:block}.install-card{display:flex;align-items:center;justify-content:space-between;gap:12px}.lang-select{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--border);background:var(--card);color:var(--text);font:inherit}.ad-campaign{display:grid;gap:10px}.ad-campaign input,.ad-campaign select{width:100%}.safety-note{font-size:12px;line-height:1.5;color:var(--sub);margin-top:8px}.rating-stars{display:flex;gap:7px;justify-content:center;margin:14px 0}.rating-stars button{font-size:27px;background:none;border:0;color:var(--border);cursor:pointer}.rating-stars button.on{color:var(--amber)}

/* ===== v9 micro-interaction + high-performance motion layer ===== */
:root{--ui-spring:cubic-bezier(.2,.9,.25,1.22);--ui-fast:cubic-bezier(.2,.8,.2,1)}
/* Bottom navigation: a moving light, press ripple, icon lift and a tiny active pulse. */
.tabbar{isolation:isolate;overflow:visible}
.tab-ind{overflow:hidden;will-change:transform,width;transition:transform .62s var(--ui-spring),width .22s var(--ui-fast);}
.tab-ind::after{content:'';position:absolute;top:1px;bottom:1px;width:38%;left:-45%;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);opacity:0}
.tab-ind.glint::after{animation:tabGlint .7s var(--ui-fast) forwards}
@keyframes tabGlint{0%{left:-45%;opacity:0}18%{opacity:1}100%{left:115%;opacity:0}}
.tab{overflow:visible;will-change:transform;color:var(--sub);}
.tab::before{content:'';position:absolute;inset:3px;border-radius:inherit;background:color-mix(in srgb,var(--accent) 0%,transparent);transform:scale(.72);opacity:0;transition:transform .42s var(--ui-spring),opacity .25s,background .2s;pointer-events:none}
.tab.active::before{background:color-mix(in srgb,var(--accent) 9%,transparent);transform:scale(1);opacity:1}
.tab svg{position:relative;z-index:1;transform-origin:50% 65%;will-change:transform}
.tab.active svg{animation:tabIconSettle .48s var(--ui-spring) both}
@keyframes tabIconSettle{0%{transform:translateY(5px) scale(.82) rotate(-3deg)}65%{transform:translateY(-2px) scale(1.13) rotate(1deg)}100%{transform:translateY(-1px) scale(1.06) rotate(0)}}
.tab-label{position:relative;z-index:1}
.tab-ripple{position:absolute;width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--accent) 25%,transparent);transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:tabRipple .55s var(--ui-fast) forwards;z-index:0}
@keyframes tabRipple{0%{transform:translate(-50%,-50%) scale(0);opacity:.7}100%{transform:translate(-50%,-50%) scale(8);opacity:0}}
.tab:active{transform:scale(.94)}
/* Ads: make the rail feel physical, while keeping the actual work to compositor-friendly transforms. */
.ads{position:relative;contain:layout paint;}
.ads-track{will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:800px;}
.ad-card{will-change:transform,opacity;transform:translateZ(0) scale(.94);opacity:.58;backface-visibility:hidden;transition:transform .48s var(--ui-spring),opacity .32s var(--ui-fast),filter .32s var(--ui-fast);}
.ad-card.is-active{transform:translateZ(0) scale(1);opacity:1;}
.ad-card.is-next{transform:translateZ(0) scale(.965);opacity:.78;}
.ad-card::after{display:block!important;width:70px!important;height:70px!important;left:auto!important;right:18px!important;bottom:30px!important;background:rgba(255,255,255,.10)!important;opacity:.8;transform:translate3d(0,0,0);animation:adOrb 5.5s ease-in-out infinite alternate;}
@keyframes adOrb{0%{transform:translate3d(0,0,0) scale(.85)}100%{transform:translate3d(-14px,-8px,0) scale(1.12)}}
.ad-card .ad-logo{transition:transform .45s var(--ui-spring),box-shadow .3s}
.ad-card.is-active .ad-logo{transform:scale(1.08) rotate(-2deg);box-shadow:0 7px 18px rgba(0,0,0,.14)}
.ad-card.is-active .ad-offer{animation:adOfferIn .5s var(--ui-spring) both}
@keyframes adOfferIn{0%{opacity:0;transform:translateY(7px) scale(.86)}70%{transform:translateY(-1px) scale(1.04)}100%{opacity:1;transform:none}}
.ad-card .ad-cta{position:relative;overflow:hidden;will-change:transform}
.ad-card .ad-cta::after{content:'';position:absolute;top:0;bottom:0;width:28%;left:-40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);opacity:0}
.ad-card.is-active .ad-cta::after{animation:ctaShine 1.2s .25s ease-out both}
@keyframes ctaShine{0%{left:-40%;opacity:0}12%{opacity:1}100%{left:130%;opacity:0}}
.ad-card .ad-cta svg{transition:transform .35s var(--ui-spring)}
.ad-card .ad-cta:active svg{transform:translateX(4px)}
.ads-dots i{will-change:width,transform;transition:width .42s var(--ui-spring),transform .42s var(--ui-spring),background .25s}
.ads-dots i.on{transform:scaleY(1.15)}
.ads-foot{position:relative}
.ads-foot::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;border-radius:2px;background:color-mix(in srgb,var(--text) 8%,transparent);transform-origin:left;transform:scaleX(0);opacity:0}
.ads-foot.playing::after{animation:adProgress 4.5s linear forwards}
@keyframes adProgress{0%{transform:scaleX(0);opacity:.7}92%{opacity:.45}100%{transform:scaleX(1);opacity:0}}
/* Fast feedback on interactive surfaces without adding layout work. */
.btn,.btn-small,.chip,.switch,.sortbtn,.wallet-prev,.w-stat,.card{will-change:transform}
.btn:active,.btn-small:active,.chip:active,.sortbtn:active,.wallet-prev:active,.w-stat:active{transform:scale(.965)}
html.p-still .tab-ind::after,html.p-still .tab.active svg,html.p-still .ad-card::after,html.p-still .ad-card.is-active .ad-offer,html.p-still .ad-card.is-active .ad-cta::after,html.p-still .ads-foot.playing::after{animation:none!important}
html.p-flat .tab-ind::after,html.p-flat .tab::before,html.p-flat .ad-card::after,html.p-flat .ad-card .ad-cta::after{display:none!important}

/* ===== v10: endless native ad rail, liquid nav, tap-effect layer, lighter paint ===== */
/* fewer permanent GPU layers and cheaper presses */
.card,.btn,.btn-small,.chip,.sortbtn,.wallet-prev,.w-stat,.ad-card,.ad-card .ad-cta{will-change:auto}
.card{transition:transform .18s var(--ease)}
.card:active{box-shadow:var(--shadow-sm);transition-duration:.08s}
.card:nth-child(n+9){animation:none;opacity:1}
.tabbar,header::before{-webkit-backdrop-filter:blur(14px) saturate(1.3)!important;backdrop-filter:blur(14px) saturate(1.3)!important}

/* ads: a real scroller (runs on the compositor thread), looping in both directions */
.ads{overflow:visible!important;contain:layout style!important;touch-action:auto!important;padding:0!important;margin:0 calc(var(--pad)*-1) var(--feed-gap)}
.ads-track{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y;transform:none!important;transition:none!important;perspective:none;padding:6px 0 16px;cursor:grab}
.ads-track::-webkit-scrollbar{display:none}
.ads-track.grab{cursor:grabbing}
.ad-card{flex:0 0 var(--aw,76%)!important;width:var(--aw,76%)!important;max-width:330px;margin-right:12px!important;scroll-snap-align:center;transform:none;opacity:1;transition:none!important;backface-visibility:visible;transform-origin:50% 55%}
.ad-card.is-active,.ad-card.is-next,.ad-card.dim{transform:none;opacity:1}
.ad-card::after{animation:none!important}
.ad-logo{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.ads-foot{padding:0 calc(var(--pad) + 6px)!important;margin-top:-6px}
.ads-init .ad-card .ad-offer,.ads-init .ad-card .ad-cta::after{animation:none!important}
@supports (animation-timeline:view()){
  .ad-card{animation:adFocus linear both;animation-timeline:view(inline);animation-range:entry 0% exit 100%}
  @keyframes adFocus{0%{transform:scale(.88);opacity:.45}50%{transform:scale(1);opacity:1}100%{transform:scale(.88);opacity:.45}}
}
html.p-still .ad-card{animation:none!important}

/* nav: a liquid blob that stretches toward the tab it is travelling to */
.tab-ind{background:none!important;overflow:visible!important;box-shadow:none!important;transition:transform .55s var(--ui-spring),width .25s var(--ui-fast)!important}
.tab-ind::after,.tab-ind.glint::after{display:none!important;animation:none!important}
.tab-ind .blob{position:absolute;inset:0;border-radius:24px;background:color-mix(in srgb,var(--accent) 15%,transparent);overflow:hidden;will-change:scale}
.tab-ind .blob::after{content:'';position:absolute;top:0;bottom:0;width:38%;left:-45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);opacity:0}
.tab-ind.glint .blob::after{animation:tabGlint .7s var(--ui-fast) forwards}
html.p-flat .tab-ind .blob{background:var(--accent-bg)}
html.p-flat .tab-ind .blob::after{display:none}
.sort-thumb,.seg-thumb{will-change:transform}

/* tap effects: one fixed layer, so no screen markup changes and nothing reflows */
#fxLayer{position:fixed;inset:0;z-index:2500;pointer-events:none;overflow:hidden}
html.p-still #fxLayer{display:none}
.fx-clip{position:fixed;overflow:hidden;pointer-events:none;contain:layout paint style}
.fx-clip>i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:50%;opacity:0;pointer-events:none}
.fx-ripple{background:radial-gradient(circle,color-mix(in srgb,var(--c) 36%,transparent) 0,color-mix(in srgb,var(--c) 22%,transparent) 55%,transparent 72%);animation:fxRipple .62s cubic-bezier(.2,.7,.25,1) forwards}
.fx-ring{background:radial-gradient(circle,transparent 50%,color-mix(in srgb,var(--c) 60%,transparent) 57%,color-mix(in srgb,var(--c) 24%,transparent) 65%,transparent 72%);animation:fxRing .7s cubic-bezier(.2,.7,.25,1) forwards}
.fx-glow{background:radial-gradient(circle,color-mix(in srgb,var(--c) 26%,transparent) 0,transparent 68%);animation:fxGlow .75s ease-out forwards}
.fx-clip>i.fx-shine{left:-45%;top:-30%;width:42%;height:160%;margin:0;border-radius:0;background:linear-gradient(100deg,transparent 0,color-mix(in srgb,var(--c) 60%,transparent) 50%,transparent 100%);animation:fxShine .7s cubic-bezier(.3,.6,.3,1) forwards}
.fx-spark{position:fixed;left:var(--x);top:var(--y);width:var(--z);height:var(--z);margin:calc(var(--z)/-2);background:var(--c);border-radius:var(--br);pointer-events:none;opacity:0;animation:fxSpark .66s cubic-bezier(.12,.75,.3,1) forwards}
@keyframes fxRipple{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes fxRing{0%{transform:scale(.1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes fxGlow{0%{transform:scale(.55);opacity:0}22%{opacity:1}100%{transform:scale(1.1);opacity:0}}
@keyframes fxShine{0%{transform:translateX(0) skewX(-18deg);opacity:0}15%{opacity:1}100%{transform:translateX(var(--w)) skewX(-18deg);opacity:0}}
@keyframes fxSpark{0%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(.2) rotate(140deg)}}

/* settings: Personalise menu row and back header */
.nav-grp{padding:4px!important;margin-top:4px}
.nav-row{display:flex;align-items:center;gap:14px;width:100%;border:none;background:none;color:var(--text);text-align:left;padding:13px 12px;border-radius:22px;transition:background .2s,transform .18s var(--ease)}
.nav-row:active{background:color-mix(in srgb,var(--accent) 9%,transparent);transform:scale(.985)}
.nav-ic{width:40px;height:40px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2))}
html.p-flat .nav-ic{background:var(--accent)}
.nav-tx{flex:1;min-width:0}.nav-tx b{display:block;font-size:15.5px;letter-spacing:-.2px}
.nav-tx small{display:block;color:var(--sub);font-size:12.5px;line-height:1.4;margin-top:2px}
.nav-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 10%,transparent)}
.nav-chev{color:var(--sub);flex-shrink:0;opacity:.6}
.set-top{margin:-4px 0 6px}
.set-back{display:inline-flex;align-items:center;gap:4px;border:none;background:none;color:var(--accent);font-size:15px;font-weight:700;padding:6px 8px 6px 0;letter-spacing:-.2px}
.set-back:active{opacity:.55}
@keyframes setSlideL{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes setSlideR{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
html.p-still .sheet-in{animation:none!important}


/* ===== WorkIt 9.0 additions (iPhone-style: big radii, glass, springy) ===== */
.hidden{display:none!important}
.st-cancelled{background:var(--fill-2);color:var(--sub)}
.st-sched{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.card.dimmed{opacity:.62}
.chip.txt{padding:9px 16px}
.lnk{background:none;border:none;color:var(--accent);font-weight:700;font-size:13.5px;padding:2px 0;text-align:left}
.lnk.sm{font-size:12px;display:block;margin-top:2px}
.av-link{background:none;border:none;padding:0;display:flex;border-radius:50%}
.av.big{width:76px;height:76px;font-size:30px;margin:0 auto 8px;box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 30%,transparent)}
.sched-tag,.ph-tag{margin-right:6px}

/* quick post templates */
.tpl-row{display:flex;gap:12px;overflow-x:auto;margin:0 calc(var(--pad)*-1) 6px;padding:4px var(--pad) 12px;scroll-snap-type:x proximity;scrollbar-width:none}
.tpl-row::-webkit-scrollbar{display:none}
/* quick-post chips fade out where they run off the screen edge, and return to full strength once scrolled to */
@property --fl{syntax:'<length>';inherits:false;initial-value:0px}
@property --fr{syntax:'<length>';inherits:false;initial-value:0px}
.tpl-row{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);transition:--fl .25s ease,--fr .25s ease}
.tpl-row.fl{--fl:44px}
.tpl-row.fr{--fr:44px}
@media(prefers-reduced-motion:reduce){.tpl-row{transition:none}}
/* every other sideways scroller (ads, filter chips, chip rows, photos): same edge fade, only while there is more to scroll to */
.ef{transition:--fl .25s ease,--fr .25s ease}
.ef.eo{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.ef.eo.fl{--fl:36px}
.ef.eo.fr{--fr:36px}
@media(prefers-reduced-motion:reduce){.ef{transition:none}}
.tpl{flex:0 0 138px;scroll-snap-align:start;text-align:left;display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:26px;border:.5px solid var(--border);background:var(--card);color:var(--text);box-shadow:var(--shadow-sm);transition:transform .25s var(--spring)}
.tpl:active{transform:scale(.95)}
.tpl .ti{width:42px;height:42px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:4px;background:linear-gradient(145deg,var(--accent),var(--accent-2));box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.tpl b{font-size:13.5px;line-height:1.25;letter-spacing:-.2px}
.tpl small{color:var(--sub);font-size:11.5px}
.pl-row{margin-top:10px}
.pl-x{display:inline-flex;margin-left:8px;width:20px;height:20px;border-radius:50%;background:var(--fill-2);align-items:center;justify-content:center;color:var(--sub)}

/* photos */
.ph-row{display:flex;gap:10px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.ph{position:relative;flex:0 0 auto;width:88px;height:88px;border-radius:22px;background-size:cover;background-position:center;border:.5px solid var(--border);box-shadow:var(--shadow-sm);padding:0}
.ph .x{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:none;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.ph.add{background:color-mix(in srgb,var(--accent) 8%,transparent);border:1.5px dashed color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11.5px;font-weight:700;box-shadow:none}
.ph-view{margin:12px 0 4px}.ph-view .ph{width:104px;height:104px}

/* shopping list, route, schedule */
.sl,.route-box,.sched{background:var(--card);border:.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;margin-top:16px;box-shadow:var(--shadow-sm)}
.sl-h,.rt-h{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px;margin-bottom:8px}
.sl-h span,.rt-h span{display:flex;align-items:center;gap:8px;color:var(--accent)}
.sl-h small,.rt-h small{color:var(--sub);font-weight:600;font-size:12px}
.sl-i{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:.5px solid var(--border);font-size:14px}
.sl-n{flex:1}
.sl-add{display:grid;grid-template-columns:1fr 92px auto;gap:8px;margin-top:10px}
.sl-add input{padding:12px 14px;font-size:15px}
.rt-x{width:28px;height:28px;border-radius:50%;border:none;background:var(--fill);color:var(--sub);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rt-line{position:relative;margin-top:4px}
.rt-stop{display:flex;align-items:center;gap:12px;padding:6px 0;position:relative}
.rt-stop:not(:last-child)::before{content:'';position:absolute;left:6px;top:26px;bottom:-8px;width:2px;background:repeating-linear-gradient(var(--border) 0 4px,transparent 4px 8px)}
.rt-dot{width:14px;height:14px;border-radius:50%;border:3px solid var(--accent);background:var(--card);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff}
.rt-dot.start{background:var(--accent)}
.rt-txt b{display:block;font-size:13.5px}.rt-txt small{color:var(--sub);font-size:12.5px}
.rt-in{padding:11px 14px;font-size:15px}
.rt-add{display:flex;align-items:center;gap:8px;width:100%;margin-top:8px;padding:12px 14px;border-radius:16px;border:1.5px dashed color-mix(in srgb,var(--accent) 45%,transparent);background:none;color:var(--accent);font-weight:700;font-size:14px}
.rt-add small{margin-left:auto;color:var(--sub);font-weight:600}
.rt-view .rv-s{display:flex;gap:12px;padding:10px 0;position:relative}
.rt-view .rv-s:not(:last-child)::before{content:'';position:absolute;left:6px;top:28px;bottom:-6px;width:2px;background:var(--border)}
.rt-view .rv-s.done .rt-dot{background:var(--accent)}
.rt-view small{display:block;color:var(--sub);font-size:12.5px}
.sc-h{display:flex;justify-content:space-between;align-items:center;gap:14px}
.sc-t{display:flex;align-items:center;gap:12px}.sc-t small{display:block;color:var(--sub);font-size:12.5px;font-weight:500}
.sc-ic,.sc-ic2{width:36px;height:36px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);flex-shrink:0}
.sched-card{display:flex;gap:13px;align-items:center;padding:15px;border-radius:22px;background:color-mix(in srgb,var(--accent) 10%,transparent);margin-top:8px}
.sched-card .sc-ic{background:var(--card)}.sched-card small{display:block;color:var(--sub);font-size:12.5px}
.chk{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;border-bottom:.5px solid var(--border);padding:13px 2px;font-size:14.5px;color:var(--text);text-align:left}
.grp .chk:last-child{border-bottom:none}
.chk .ck-n{flex:1}.chk b{color:var(--sub);font-size:13px}
.chk .cb{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;color:transparent;transition:all .25s var(--spring)}
.chk.on .cb{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.08)}
.chk.on .ck-n{text-decoration:line-through;color:var(--sub)}

/* demand map + batch */
.heat-strip{cursor:pointer;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--card)),var(--card))}
.hs-ic{width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(145deg,#FF9F0A,#FF453A);box-shadow:0 8px 18px rgba(255,120,20,.35)}
.hm-legend{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--sub);font-weight:600;margin:14px 2px 10px}
.hm-legend i{flex:1;height:8px;border-radius:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,var(--card)),var(--accent))}
.hm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hm-tile{--k:8%;border:2px solid transparent;border-radius:22px;padding:14px 10px;min-height:84px;background:color-mix(in srgb,var(--accent) var(--k),var(--card));color:var(--text);display:flex;flex-direction:column;justify-content:space-between;text-align:left;transition:transform .25s var(--spring),border-color .2s}
.hm-tile:active{transform:scale(.94)}
.hm-tile b{font-size:13px;line-height:1.2}.hm-tile span{font-size:12px;font-weight:800;color:var(--accent)}
.hm-tile.l0{--k:8%}.hm-tile.l1{--k:20%}.hm-tile.l2{--k:36%}.hm-tile.l3{--k:56%}.hm-tile.l4{--k:78%}
.hm-tile.l3,.hm-tile.l4{color:var(--on-accent)}.hm-tile.l3 span,.hm-tile.l4 span{color:inherit}
.hm-tile.sel{border-color:var(--text)}
.hm-d{margin-top:16px;padding:16px;border-radius:24px;background:var(--card);border:.5px solid var(--border)}
.hm-badge{font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.batch{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,var(--card)),var(--card))}
.bt-h{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14.5px}
.bt-ic{width:30px;height:30px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent)}
.bt-pill{margin-left:auto;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--green-bg);color:var(--green)}
.bt-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:.5px solid var(--border);font-size:14px}
.bt-row .dot{width:32px;height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bt-t{flex:1;min-width:0;font-weight:600}.bt-t small{display:block;color:var(--sub);font-weight:500;font-size:12px}
.bt-f{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:12px;border-top:.5px solid var(--border);font-size:14px}

/* runner steps, PIN, tracker bits */
.steps{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.stp{display:flex;gap:13px;padding:15px;border-radius:22px;background:var(--card);border:.5px solid var(--border)}
.stp.now{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}
.stp.lock{opacity:.55}
.stp-n{width:28px;height:28px;border-radius:50%;background:var(--fill-2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.stp.now .stp-n{background:var(--accent);color:var(--on-accent)}.stp.done .stp-n{background:var(--green);color:#fff}
.stp-b{flex:1;min-width:0}.stp-b b{font-size:14.5px}.stp-b small{display:block;color:var(--sub);font-size:12.5px;line-height:1.4;margin-top:3px}
.pin-row{display:flex;gap:10px;margin-top:10px}
.pin-in{text-align:center;letter-spacing:.5em;font-size:22px!important;font-weight:800;padding:12px!important}
.pin-card{margin-top:14px;padding:16px;border-radius:22px;text-align:center;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 16%,var(--card)),var(--card));border:.5px solid var(--border)}
.pin-h{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--accent)}
.pin-digits{display:flex;justify-content:center;gap:10px;margin:12px 0 8px}
.pin-digits i{font-style:normal;width:46px;height:56px;border-radius:16px;background:var(--card);border:.5px solid var(--border);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.pin-ok,.rc-line{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;border-radius:16px;font-size:13px;font-weight:600;background:var(--green-bg);color:var(--green)}
.rc-line{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.wait-card,.done-card{display:flex;gap:14px;align-items:center;padding:16px;margin-top:12px;border-radius:24px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.wait-card small,.done-card small{display:block;color:var(--sub);font-size:12.5px;line-height:1.4;margin-top:2px}
.done-card{flex-wrap:wrap;background:var(--green-bg)}.done-card.muted{background:var(--fill)}
.done-card b{display:block}.done-card>small{flex-basis:100%;margin-top:-6px}
.dn-ic{width:42px;height:42px;border-radius:15px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center}.done-card.muted .dn-ic{background:var(--sub)}
.dn-r{flex-basis:100%;font-size:13px}.dn-r span{color:#FF9F0A;letter-spacing:2px}
.spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--fill-2);border-top-color:var(--accent);animation:spin9 .9s linear infinite;flex-shrink:0}
@keyframes spin9{to{transform:rotate(360deg)}}
.bonus-row{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-top:10px;border-radius:20px;background:linear-gradient(120deg,var(--amber-bg),var(--card));border:.5px solid var(--border)}
.bn-ic{width:36px;height:36px;border-radius:13px;background:var(--amber);color:#fff;display:flex;align-items:center;justify-content:center}
.bn-tx{flex:1}.bn-tx small{display:block;color:var(--sub);font-size:12px}

/* cancel sheet */
.cq{padding:16px;border-radius:24px;background:var(--card);border:.5px solid var(--border);margin-top:6px}
.cq p{color:var(--sub);font-size:13.5px;line-height:1.5;margin:4px 0 8px}
.tiers{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.tier{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;font-size:13px;color:var(--sub)}
.tier i{width:10px;height:10px;border-radius:50%;background:var(--border)}.tier span{flex:1}
.tier.now{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text);font-weight:700}.tier.now i{background:var(--accent)}

/* runner profile */
.rp-hero{text-align:center;padding-top:6px}.rp-hero h2{margin:0 0 2px}
.rp-rate{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:10px}
.rp-rate b{font-size:36px;letter-spacing:-1px}.rp-rate span{color:#FF9F0A;letter-spacing:2px}.rp-rate small{color:var(--sub)}
.rp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.rp-stats div{background:var(--card);border:.5px solid var(--border);border-radius:20px;padding:13px 6px;text-align:center}
.rp-stats b{display:block;font-size:17px}.rp-stats span{font-size:11.5px;color:var(--sub)}
.rp-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center}
.rp-badges span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.rp-about{font-size:14px;color:var(--sub);line-height:1.5;text-align:center;margin:14px 0 0}
.cm{padding:13px 15px;border-radius:20px;background:var(--card);border:.5px solid var(--border);margin-bottom:8px}
.cm.me{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.cm-h{display:flex;align-items:center;gap:8px;font-size:13.5px}.cm-s{color:#FF9F0A;letter-spacing:1px;font-size:12px}.cm-h small{margin-left:auto;color:var(--sub)}
.cm p{margin:6px 0 0;font-size:13.5px;color:var(--sub);line-height:1.45}

/* profile dashboard */
.lvl-bar{height:10px;border-radius:8px;background:var(--border);overflow:hidden;margin-top:14px}
.lvl-bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .8s var(--ease)}
.lvl-rate{display:flex;justify-content:space-between;font-size:13px;color:var(--sub);margin-top:10px}.lvl-rate b{color:var(--text)}
.lvl-perks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.perk{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--green-bg);color:var(--green)}
.goal-top{display:flex;align-items:center;gap:18px}
.goal-ring{--p:0;position:relative;width:96px;height:96px;border-radius:50%;flex-shrink:0;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--fill-2) 0);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 22%,transparent)}
.goal-ring>div{width:76px;height:76px;border-radius:50%;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center}
.goal-ring b{font-size:20px;letter-spacing:-.5px}.goal-ring small{font-size:10.5px;color:var(--sub)}
.goal-tx small{color:var(--sub);font-size:12px;display:block}.goal-tx b{font-size:20px;letter-spacing:-.4px}.goal-tx b i{font-style:normal;font-size:13px;color:var(--sub);font-weight:600}.goal-tx span{display:block;font-size:13px;color:var(--accent);font-weight:700;margin-top:2px}
.goal-chips{margin-top:14px;padding-bottom:0}
.streak{display:flex;align-items:center;gap:12px;margin-top:14px}
.streak .fl{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(145deg,#FF9F0A,#FF453A)}
.st-tx small{display:block;color:var(--sub);font-size:12.5px}
.sdays{display:flex;justify-content:space-between;margin-top:12px}
.sd{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:var(--sub);font-weight:700}
.sd i{width:28px;height:28px;border-radius:50%;background:var(--fill);display:flex;align-items:center;justify-content:center;color:#fff}
.sd.on i{background:linear-gradient(145deg,#FF9F0A,#FF453A)}.sd.today i{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}

/* safety check-in */
.ci-ring{--p:100;width:96px;height:96px;margin:6px auto 0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--fill-2) 0)}
.ci-ring b{width:76px;height:76px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center}


/* v10.1: Runner Tools group in the v9 glass style, plus small-screen layout fixes */
.runner-tools{margin:2px 0 var(--feed-gap);padding:12px;border-radius:calc(var(--radius) + var(--r));background:linear-gradient(160deg,color-mix(in srgb,var(--accent-bg) 60%,var(--card)),var(--card));border:.5px solid var(--border);box-shadow:var(--shadow-sm);display:grid;gap:10px}
.runner-tools-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 4px 0}
.runner-tools-kicker{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--sub)}
.runner-tools-note{font-size:11px;color:var(--sub)}
.runner-tools .heat-strip,.runner-tools .batch{margin:0}
.bt-h>b{min-width:0;flex:1}.bt-pill{white-space:nowrap}.bt-row{min-width:0}.bt-row .bt-t{overflow-wrap:anywhere}.bt-row>b{flex-shrink:0}
.bt-f{min-width:0}.bt-f>span{min-width:0}.bt-f .btn-small{flex-shrink:0;max-width:48%;white-space:normal;line-height:1.2}
html.p-flat .runner-tools{background:var(--card)!important}
@media(max-width:360px){.runner-tools{padding:9px}.runner-tools-note{display:none}.bt-h{flex-wrap:wrap}.sortrail button{font-size:11px;padding-left:4px;padding-right:4px;gap:3px}.sortrail button svg{width:12px;height:12px}}
.saver *,.saver *::before,.saver *::after{animation:none!important;transition:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

.qrow{display:flex;gap:10px;margin:0 0 14px}
.qchip{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;padding:13px 10px;border-radius:calc(22px + var(--r));background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:.5px solid var(--border);box-shadow:var(--shadow-sm);font:700 calc(13px*var(--fs)) inherit;color:var(--text);cursor:pointer;transition:transform .2s var(--spring)}
.qchip:active{transform:scale(.95)}.qchip svg{color:var(--accent);flex:none}
.ad-card{min-height:104px!important;width:62%!important;border-radius:calc(22px + var(--r))!important}
.ad-card::before,.ad-card::after,.ad-body small{display:none!important}
.pad{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 86px);z-index:60;display:flex;align-items:center;gap:10px;padding:12px 10px 12px 14px;border-radius:26px;color:#fff;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(24px) scale(.97);transition:all .35s var(--spring);max-width:520px;margin:0 auto}
.pad.in{opacity:1;transform:none}.pad-logo{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-weight:800;flex:none}
.pad-tx{flex:1;min-width:0}.pad-tx b{display:block;font-size:14px;line-height:1.25}.pad-tx small{opacity:.85;font-size:11px}
.pad-cta{border:0;border-radius:16px;padding:9px 13px;font-weight:800;background:rgba(255,255,255,.92);color:#222}.pad-x{border:0;background:rgba(255,255,255,.22);color:#fff;width:28px;height:28px;border-radius:50%;font-size:14px}

/* v16.1 */
.earn-wide{grid-column:1/-1}
.tag-near{margin-right:6px}
.tripcard,.vo,.pjoin{margin-bottom:var(--feed-gap)}
.vo-tx{width:100%;min-height:72px;margin-top:12px;resize:vertical}
.vo-act{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.vo-note{margin:10px 2px 0;font-size:12.5px;line-height:1.45;color:var(--sub)}
#voMic.on{background:var(--accent);color:var(--on-accent)}
#voMic svg{vertical-align:-3px}
.pj-row{display:flex;align-items:center;gap:10px;padding:12px 0 2px;margin-top:10px;border-top:.5px solid var(--border)}
.pj-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}
.pj-t small{color:var(--sub);font-size:12px;line-height:1.35}
.px-box{margin-top:14px}

/* v16.2: cards start at opacity 0 and rely on an entrance animation to appear; when motion is off (Simple mode, Reduce motion, data saver) that animation is disabled, so show them directly */
html.p-still .card:not(.dimmed),html.p-still .res,.saver .card:not(.dimmed),.saver .res{opacity:1!important}
/* v16.2: flat / simple mode has no shadows (and high contrast needs firmer edges), so give every surface a clear outline */
html.p-outline{--outline:color-mix(in srgb,var(--text) 30%,transparent)}
html.p-outline .card,html.p-outline .grp,html.p-outline .spot,html.p-outline .wallet-prev,html.p-outline .note,html.p-outline .tabbar,html.p-outline .fab-item,html.p-outline .runner-tools,html.p-outline .btn-ghost,html.p-outline input,html.p-outline textarea,html.p-outline select,html.p-outline .chip:not(.active){border:1.5px solid var(--outline)!important}
html.p-outline .chip.active{border-width:2px!important}
html.p-outline .sheet{border:1.5px solid var(--outline)!important;border-bottom:none!important}
html.p-outline .set-row,html.p-outline .field{border-bottom-color:var(--outline)!important}
html.p-outline .switch:not(.on){box-shadow:inset 0 0 0 1.5px var(--outline)}
html.p-still .draw path,.saver .draw path{stroke-dashoffset:0!important}
html.p-still .radar i,.saver .radar i{opacity:.28}
html.p-still .radar i:nth-child(2),.saver .radar i:nth-child(2){transform:scale(.8)}
html.p-still .radar i:nth-child(3),.saver .radar i:nth-child(3){transform:scale(.6)}
/* v16.2: tighter, smaller For You */
#main .spot{padding:10px 14px;gap:12px;margin-bottom:8px}
#main .spot .pin{width:34px;height:34px}
#main .spot b{font-size:14px}
#main .spot small{margin-top:1px;font-size:12px}
#main section.earn{padding:10px;margin:0 0 8px}
#main section.earn div{font-size:inherit;letter-spacing:normal;font-weight:inherit;margin-top:0}
#main section.earn .earn-h{padding:0 2px 7px}
#main section.earn .earn-h span{display:none}
#main section.earn .earn-grid{gap:8px}
#main section.earn .earn-tile{padding:8px 10px;gap:9px}
#main section.earn .et-ic{width:32px;height:32px}
#main section.earn .et-t b{font-size:13px}
#main section.earn .et-t small{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#main .sortrail{padding:4px;margin:0 0 10px}
#main .sortrail .sort-thumb{top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/4)}
#main .sortrail .sortbtn{padding:7px 2px;gap:4px;font-size:11.5px!important}
#main .sortrail .sortbtn svg:not(.sarr){width:12px;height:12px}
#main .fchips{margin:0 0 10px}
#main .fchip{padding:6px 12px;font-size:12px}
.card.pjoin{padding:0;overflow:hidden}
.pj-head{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border:none;background:none;color:var(--text);text-align:left}
.pj-head .badge{width:34px;height:34px;flex:none}
.pj-ht{flex:1;min-width:0}
.pj-ht b{display:block;font-size:14px;line-height:1.25;letter-spacing:-.1px}
.pj-ht small{display:block;font-size:12px;color:var(--sub);margin-top:1px;line-height:1.3}
.pj-chev{flex:none;color:var(--sub);display:grid;transition:transform .3s var(--spring)}
.pjoin.open .pj-chev{transform:rotate(180deg)}
.pj-body{display:none;padding:0 14px 6px}
.pjoin.open .pj-body{display:block}
.pj-body .pj-row{margin-top:0;padding:10px 0}
.pj-body .pj-row+.pj-row{border-top:.5px solid var(--border)}
/* v16.2 */
.lbl-row{display:flex;align-items:center;justify-content:space-between;margin:22px 0 9px}
.lbl-row label{margin:0}
.vo-ic{width:34px;height:34px;border-radius:50%;border:none;padding:0;flex:none;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);transition:transform .2s var(--spring)}
.vo-ic:active{transform:scale(.88)}
#vsMic.on{background:var(--accent);color:var(--on-accent)}
#vsMic svg{vertical-align:-3px}
.set-tx{flex:1;min-width:0}
.swatches{display:flex;flex-wrap:wrap;gap:12px;padding:4px 2px 6px}
.swatch{width:40px;height:40px;border-radius:50%;flex:none;padding:0;border:3px solid transparent;background-clip:padding-box;box-shadow:0 0 0 1px var(--border),0 3px 10px rgba(0,0,0,.16);transition:transform .25s var(--spring),box-shadow .2s}
.swatch.active{box-shadow:0 0 0 2.5px var(--text),0 3px 10px rgba(0,0,0,.16);transform:scale(1.08)}
.swatch:active{transform:scale(.9)}
.set-note{font-size:12.5px;line-height:1.45;color:var(--sub);margin:6px 2px 0}
.safety-note{font-size:12.5px;line-height:1.45;color:var(--sub);font-weight:500;margin:8px 2px 0}
label .safety-note{display:inline;margin:0;text-transform:none;letter-spacing:0}
.grp>label:first-child{padding-top:14px}
.grp .lang-select{margin:6px 0 4px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.grp>.safety-note{padding:4px 0 14px;margin:0 2px}
.set-look .chips{flex-wrap:wrap;overflow:visible;gap:8px;padding:2px 0 4px}
.set-look .chip{min-height:0}
.set-look label{margin-top:20px}
.set-look .grp>.row:last-child{border-bottom:none}
html.p-big .switch{width:58px;height:36px}
html.p-big .switch::after{width:32px;height:32px}
html.p-big .switch.on::after{transform:translateX(22px)}
html.p-big .switch:active::after{width:38px}
html.p-big .switch.on:active::after{transform:translateX(16px)}
html.p-big .set-look .chip{min-height:44px}
.fab-wrap{position:absolute;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 102px);z-index:8;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none;transition:opacity .25s,transform .35s var(--spring),bottom .35s var(--spring)}
.fab-wrap>*{pointer-events:auto}
.fab-wrap.gone{opacity:0;transform:translateY(16px) scale(.85);visibility:hidden;transition:opacity .2s,transform .3s,visibility 0s .3s}
.fab-wrap.gone>*{pointer-events:none}
body:has(.pad.in) .fab-wrap{bottom:calc(env(safe-area-inset-bottom,0px) + 172px)}
.fab{width:58px;height:58px;border-radius:50%;border:none;padding:0;display:grid;place-items:center;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 12px 28px var(--accent-shadow,rgba(0,0,0,.25)),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .3s var(--spring)}
.fab:active{transform:scale(.92)}
.fab svg{transition:transform .35s var(--spring)}
.fab-wrap.open .fab svg{transform:rotate(135deg)}
html.p-flat .fab{background:var(--accent);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.fab-menu{display:flex;flex-direction:column;align-items:flex-end;gap:10px;opacity:0;transform:translateY(12px) scale(.92);transform-origin:100% 100%;pointer-events:none!important;transition:opacity .2s,transform .4s var(--spring)}
.fab-wrap.open .fab-menu{opacity:1;transform:none}
.fab-wrap.open .fab-menu>*{pointer-events:auto}
.fab-item{display:flex;align-items:center;gap:10px;border:.5px solid var(--border);background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);border-radius:999px;padding:8px 18px 8px 8px;font-size:14px;font-weight:700;color:var(--text);box-shadow:var(--shadow-md);white-space:nowrap}
.fab-item i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);flex:none}
.fab-item:active{transform:scale(.96)}
.fab-scrim{position:absolute;inset:0;z-index:7;background:rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .25s}
.fab-scrim.show{opacity:1;pointer-events:auto}

/* v22: every step's main button (Continue on 1 and 2, Pay on 3) sits at the end of its step.
   It only turns sticky after the poster has scrolled to the very bottom of that step once. */
#pflow .pf-act{position:static!important;bottom:auto!important;z-index:auto!important;margin:12px 0 0!important;padding:0!important;background:none!important;box-shadow:none!important}
#pflow .pf-act .btn{margin-top:20px}
#pflow.armed-1 .pstep[data-step="1"] .pf-act{position:sticky!important;bottom:calc(-38px + env(safe-area-inset-bottom,0px))!important;z-index:8!important;margin:12px calc(var(--pad)*-1) 0!important;padding:22px var(--pad) 16px!important;background:linear-gradient(to bottom,transparent,var(--bg) 42%)!important;box-shadow:0 18px 0 0 var(--bg)!important}
#pflow.armed-1 .pstep[data-step="1"] .pf-act .btn{margin-top:0}
#pflow.armed-2 .pstep[data-step="2"] .pf-act{position:sticky!important;bottom:calc(-38px + env(safe-area-inset-bottom,0px))!important;z-index:8!important;margin:12px calc(var(--pad)*-1) 0!important;padding:22px var(--pad) 16px!important;background:linear-gradient(to bottom,transparent,var(--bg) 42%)!important;box-shadow:0 18px 0 0 var(--bg)!important}
#pflow.armed-2 .pstep[data-step="2"] .pf-act .btn{margin-top:0}
#pflow.armed-3 .pstep[data-step="3"] .pf-act{position:sticky!important;bottom:calc(-38px + env(safe-area-inset-bottom,0px))!important;z-index:8!important;margin:12px calc(var(--pad)*-1) 0!important;padding:22px var(--pad) 16px!important;background:linear-gradient(to bottom,transparent,var(--bg) 42%)!important;box-shadow:0 18px 0 0 var(--bg)!important}
#pflow.armed-3 .pstep[data-step="3"] .pf-act .btn{margin-top:0}

/* ---- style block v163css ---- */
/* compact sponsored strip: a touch taller than a normal errand card */
#main .ads .ad-card{flex:0 0 var(--aw,86%)!important;width:var(--aw,86%)!important;max-width:350px!important;height:126px;min-height:0!important;margin-right:10px!important;padding:11px 14px!important;flex-direction:column!important;justify-content:space-between;align-items:stretch;gap:0;border-radius:calc(22px + var(--r))!important;box-shadow:0 6px 16px color-mix(in srgb,var(--ad,#444) 28%,transparent)!important}
#main .ads .ad-card::before,#main .ads .ad-card::after{display:none!important}
#main .ads .ad-logo{width:30px;height:30px;border-radius:10px;font-size:14px}
#main .ads .ad-tag{font-size:8.5px;padding:3px 7px}
#main .ads .ad-card .ad-cta{margin:0!important;align-self:flex-start!important;display:inline-flex!important;align-items:center;gap:5px;padding:7px 13px!important;font-size:12px!important;border-radius:999px!important;background:#fff!important;color:var(--ad,#222)!important;box-shadow:0 4px 10px rgba(0,0,0,.18)!important}
#main .ads .ad-card .ad-cta::after{display:none!important}
#main .ads-foot{padding:0 calc(var(--pad) + 6px)!important;margin-top:2px!important;justify-content:center}
#main .ads-hint{display:none!important}
#main .ads{margin-bottom:12px!important}
/* category boxes */
.catgrid-wrap{margin:0 0 14px}
.cg-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 8px;font-size:10px;font-weight:800;letter-spacing:1px;color:var(--sub)}
.cg-head span:last-child{font-weight:600;letter-spacing:.2px;font-size:10.5px;opacity:.8}
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cgt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:11px 4px 9px;border-radius:calc(20px + var(--r));border:.5px solid var(--border);background:var(--card);color:var(--text);box-shadow:var(--shadow-sm);text-align:center;transition:transform .25s var(--spring),background .2s,border-color .2s,box-shadow .2s}
.cgt:active{transform:scale(.94)}
.cgt .cgi{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);margin-bottom:3px;transition:background .2s,color .2s}
.cgt b{max-width:100%;font-size:11.5px;font-weight:700;letter-spacing:-.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgt small{max-width:100%;font-size:10px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgt .cgn{position:absolute;top:6px;right:7px;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--on-accent,#fff);font-style:normal;font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1}
.cgt .cgs{position:absolute;top:5px;left:8px;text-decoration:none;font-size:11px;color:var(--amber,#F59E0B)}
.cgt.on{background:var(--accent-bg);border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 22%,transparent)}
.cgt.on .cgi{background:var(--accent);color:var(--on-accent,#fff)}
.cgt.on .cgn{background:var(--card);color:var(--accent)}
@media(max-width:340px){.cgt b{font-size:10.5px}.cgt small{font-size:9.5px}}
html.p-outline .cgt{border:1.5px solid var(--outline)!important}
html.p-flat .cgt{box-shadow:none!important}
#main section.earn3 .earn-grid{grid-template-columns:repeat(3,1fr);gap:7px}
#main section.earn3 .earn-tile{flex-direction:column;align-items:flex-start;gap:7px;padding:10px 9px;min-width:0}
#main section.earn3 .et-ic{width:30px;height:30px}
#main section.earn3 .et-t{min-width:0;width:100%}
#main section.earn3 .et-t b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
#main section.earn3 .et-t small{font-size:10.5px;line-height:1.3;white-space:normal;overflow:visible;display:block}
/* floating button: keep the original pill menu */
.fab-wrap.open .fab svg{transform:rotate(90deg) scale(.92)}

/* ---- style block v165css ---- */
#hAvatar{position:relative;overflow:visible}
#hAvatar::after{content:'';position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;background:#9CA3AF;border:2.5px solid var(--bg);transition:background .25s}
#hAvatar.online::after{background:#22C55E}
.hsearch{width:40px;height:40px;border-radius:50%;border:.5px solid var(--border);background:var(--card);color:var(--text);display:grid;place-items:center;flex-shrink:0;padding:0;transition:transform .2s var(--spring)}
.hsearch:active{transform:scale(.92)}
.hsearch[hidden]{display:none}
.hsbox{display:none;flex:1;min-width:0;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:999px;background:var(--fill);border:.5px solid var(--border);color:var(--sub)}
.hsbox svg{flex:none}
.hsbox input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.hsbox input::-webkit-search-cancel-button{display:none}
.hrow.searching h1.title{display:none}
.hrow.searching .hsbox{display:flex}
.fab-item.fab-avail.to-on i{background:color-mix(in srgb,#22C55E 18%,transparent);color:#16A34A}
.fab-item.fab-avail.to-off i{background:var(--fill-2);color:var(--sub)}
.sr-wrap{padding-top:4px}
.sr-h{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--sub);margin:4px 2px 10px}
.sr-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}

.cgt[style*="--cc"] .cgi{background:color-mix(in srgb,var(--cc) 16%,transparent);color:var(--cc)}
.cgt[style*="--cc"].on{background:color-mix(in srgb,var(--cc) 12%,var(--card));border-color:color-mix(in srgb,var(--cc) 55%,transparent);box-shadow:0 6px 16px color-mix(in srgb,var(--cc) 22%,transparent)}
.cgt[style*="--cc"].on .cgi{background:var(--cc);color:#fff}
.cgt[style*="--cc"].on .cgn{color:var(--cc)}
.card .badge{background-image:none}

.ads{margin-top:0}
#main .ads .ad-card.ad-row{height:54px!important;min-height:0!important;padding:0 10px 0 9px!important;flex:0 0 var(--aw,88%)!important;width:var(--aw,88%)!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;margin-right:8px!important;border-radius:calc(18px + var(--r))!important;box-shadow:0 4px 12px color-mix(in srgb,var(--ad,#444) 26%,transparent)!important}
#main .ads .ad-row .ad-logo{width:30px;height:30px;border-radius:10px;font-size:14px;flex:none}
.ad-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ad-brand{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;opacity:.88;white-space:nowrap}
.ad-brand .ad-tag{font-size:8px;padding:2px 6px}
.ad-line{font-size:12.5px;font-weight:800;line-height:1.2;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#main .ads .ad-row .ad-cta{padding:6px 12px!important;font-size:11.5px!important;align-self:center!important;flex:none}
#main .ads .ad-row .ad-cta svg{display:none}
#main .ads-track{padding:0 0 4px!important}
#main .ads{margin:0 0 8px!important}
#main .ads-foot{margin-top:0!important}
.ads-dots i{width:5px;height:5px}.ads-dots i.on{width:14px}
/* coloured errand cards */
.card[style*="--cc"]{position:relative;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 22%,var(--card)) 0%,color-mix(in srgb,var(--cc) 9%,var(--card)) 52%,var(--card) 100%);border-color:color-mix(in srgb,var(--cc) 32%,var(--border));box-shadow:0 8px 22px color-mix(in srgb,var(--cc) 15%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.card[style*="--cc"]::before{content:'';position:absolute;right:-34px;top:-46px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--cc) 26%,transparent),transparent 70%);pointer-events:none}
.card[style*="--cc"]::after{content:'';position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--cc),color-mix(in srgb,var(--cc) 55%,#fff));pointer-events:none}
.card[style*="--cc"]>*{position:relative;z-index:1}
.card[style*="--cc"] .badge{background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 78%,#fff),var(--cc))!important;color:#fff!important;box-shadow:0 6px 14px color-mix(in srgb,var(--cc) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.45)!important}
.card[style*="--cc"] .amt{color:color-mix(in srgb,var(--cc) 55%,var(--text))}
.dhead{margin:0 0 14px;padding:14px 14px;border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 26%,var(--card)),color-mix(in srgb,var(--cc) 8%,var(--card)));border:.5px solid color-mix(in srgb,var(--cc) 34%,var(--border));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.dhead .badge{background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 78%,#fff),var(--cc))!important;color:#fff!important;box-shadow:0 6px 14px color-mix(in srgb,var(--cc) 40%,transparent)!important}
.dhead h2{margin:0}

.hbell{position:relative}
.hbadge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:#EF4444;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)}
.hbadge[hidden]{display:none}
.hrow.searching .hbell{display:none}
.nb-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;color:var(--text);padding:12px 4px;border-bottom:.5px solid var(--border);position:relative}
.nb-row.new::before{content:'';position:absolute;left:-8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent)}
.nb-ic{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--accent-bg);color:var(--accent)}
.nb-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nb-tx b{font-size:14px}
.nb-tx small{font-size:12.5px;color:var(--sub);line-height:1.35}
.nb-row em{font-style:normal;font-size:11px;color:var(--sub);flex:none;align-self:flex-start;margin-top:3px}
.sr-clear{border:0;background:none;color:var(--accent);font:inherit;font-weight:800;text-transform:none;letter-spacing:0;margin-left:8px;padding:0}
.fab-menu{flex-direction:column-reverse}
.fab{position:relative}
.fab-badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:10px;background:#EF4444;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)}
.fab-badge[hidden]{display:none}
.fab-wrap.tuck{transform:translateX(34px);opacity:.9}
.fab-sum span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.fab-sum small{font-size:10px;font-weight:700;color:var(--sub);letter-spacing:.2px}
.fab-sum b{font-size:14px}
html.lefty .fab-wrap{right:auto;left:18px;align-items:flex-start}
html.lefty .fab-menu{align-items:flex-start;transform-origin:0 100%}
html.lefty .fab-wrap.tuck{transform:translateX(-34px)}
.qh-hero{position:relative;text-align:center;padding:8px 10px 20px;overflow:hidden}
.qh-hero::before{content:'';position:absolute;z-index:-1;inset:-30px -20px auto;height:210px;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 68%)}
.qh-orb{width:62px;height:62px;margin:4px auto 14px;border-radius:22px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--accent),var(--accent-2));box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.qh-kicker{font-size:10px;letter-spacing:1.7px;font-weight:800;color:var(--accent)}
.qh-hero h2{margin:6px 0 7px;font-size:27px;letter-spacing:-.8px}
.qh-hero p{max-width:280px;margin:0 auto;color:var(--sub);font-size:13.5px;line-height:1.5}
.qh-options{display:grid;gap:9px;margin:0 0 12px}
.qh-option{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:12px 13px;border:1px solid var(--border);border-radius:19px;background:var(--card);color:var(--text);box-shadow:var(--shadow-sm);transition:transform .2s var(--spring),border-color .2s,background .2s}
.qh-option:active{transform:scale(.98)}
.qh-option.featured{border-color:color-mix(in srgb,var(--accent) 42%,var(--border));background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 9%,var(--card)),var(--card) 72%)}
.qh-clock{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:14px;color:var(--accent);background:var(--accent-bg)}
.qh-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.qh-copy b{font-size:15px;letter-spacing:-.2px}
.qh-copy small{font-size:11.5px;color:var(--sub)}
.qh-duration{padding:5px 8px;border-radius:9px;background:var(--fill);font-size:10px;font-weight:800;color:var(--sub);font-variant-numeric:tabular-nums}
.qh-arrow{color:var(--sub);opacity:.6;display:flex}
.qh-manual{width:100%;padding:13px 14px;border:0;border-radius:16px;background:var(--fill);color:var(--text);text-align:left;font-family:inherit;font-size:13px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:10px}
.qh-manual span{font-size:11px;font-weight:500;color:var(--sub);text-align:right}
.fab-wrap.open .fab{box-shadow:0 14px 35px color-mix(in srgb,var(--accent) 48%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.fab-item{transition:transform .22s var(--spring),background .2s,border-color .2s,box-shadow .2s}
.fab-item:active{transform:scale(.96) translateY(1px)}/* Quiet-hours sheet: compact two-column timer chooser with an inline custom duration */
.qh-hero{padding:4px 8px 18px;text-align:left}
.qh-hero::before{inset:-40px -30px auto;height:150px;opacity:.75}
.qh-kicker{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;background:var(--accent-bg);font-size:9px;letter-spacing:1.1px}
.qh-hero h2{margin:10px 0 4px;font-size:25px;letter-spacing:-.8px}
.qh-hero p{margin:0;max-width:300px;font-size:13px}
.qh-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 0 10px}
.qh-option{min-height:104px;position:relative;align-items:flex-start;flex-direction:column;justify-content:space-between;gap:9px;padding:13px;border-radius:18px;box-shadow:none;overflow:hidden}
.qh-option.featured{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)}
.qh-option.featured::after{content:'POPULAR';position:absolute;top:12px;right:10px;font-size:8px;font-weight:800;letter-spacing:.7px;color:var(--accent);opacity:.8}
.qh-option .qh-clock{width:30px;height:30px;border-radius:10px}
.qh-copy{gap:2px}
.qh-copy b{font-size:14px}
.qh-copy small{font-size:10.5px}
.qh-duration{position:absolute;right:11px;bottom:12px;font-size:9px;padding:4px 6px}
.qh-custom-choice .qh-clock{font-size:21px;font-weight:500}
.qh-custom-choice.selected{border-color:var(--accent);background:var(--accent-bg)}
.qh-custom{margin:2px 0 10px;padding:13px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));border-radius:18px;background:color-mix(in srgb,var(--accent) 5%,var(--card));animation:swapIn .24s var(--ease)}
.qh-custom[hidden]{display:none}
.qh-custom>label{margin:0 0 8px;font-size:11px;color:var(--sub)}
.qh-custom-row{display:flex;gap:8px;align-items:center}
.qh-input-wrap{display:flex;align-items:center;gap:6px;flex:1;min-width:0;padding:0 10px;border:1px solid var(--border);border-radius:13px;background:var(--card)}
.qh-input-wrap input{min-width:0;width:100%;padding:10px 0;border:0;box-shadow:none;background:transparent;font-size:16px;font-weight:700}
.qh-input-wrap input:focus{box-shadow:none}
.qh-input-wrap span{font-size:11px;color:var(--sub);white-space:nowrap}
.qh-custom-row button{min-height:42px;padding:0 14px;border:0;border-radius:13px;background:var(--accent);color:#fff;font-family:inherit;font-size:12px;font-weight:700;white-space:nowrap}
.qh-hint{display:block;margin-top:7px;font-size:10.5px;color:var(--sub)}
.qh-manual{margin-top:2px;min-height:44px;padding:11px 13px;border-radius:14px;font-size:12px}
.qh-manual span{font-size:10px;color:var(--accent)}
/* Scroll-aware FAB: a soft, springy retreat that reverses cleanly on upward scroll */
.fab-wrap{transition:opacity .28s ease,transform .52s cubic-bezier(.2,.9,.2,1),bottom .35s var(--spring)}
.fab-wrap.tuck{transform:translateX(42px) scale(.82);opacity:.62;filter:saturate(.82)}
.fab-wrap.tuck .fab{box-shadow:0 5px 16px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.28)}
.fab-wrap.tuck:hover,.fab-wrap.tuck:focus-within{transform:translateX(0) scale(1);opacity:1;filter:none}
html.lefty .fab-wrap.tuck{transform:translateX(-42px) scale(.82)}
html.lefty .fab-wrap.tuck:hover,html.lefty .fab-wrap.tuck:focus-within{transform:translateX(0) scale(1)}
@media(prefers-reduced-motion:reduce){.fab-wrap{transition:opacity .15s,bottom .15s}.qh-custom{animation:none}}/* Floating action button: glides toward the edge while scrolling down, then springs home on the way up */
.fab-wrap{will-change:transform,opacity;transition:opacity .3s ease,transform .62s cubic-bezier(.18,1.22,.32,1),bottom .35s var(--spring),filter .35s ease}
.fab-wrap.tuck{transform:translate3d(46px,8px,0) scale(.76);opacity:.48;filter:saturate(.72)}
.fab-wrap.tuck .fab{transform:rotate(8deg);box-shadow:0 4px 12px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.28)}
.fab-wrap.tuck:hover,.fab-wrap.tuck:focus-within{transform:translate3d(0,0,0) scale(1);opacity:1;filter:none}
.fab-wrap.tuck:hover .fab,.fab-wrap.tuck:focus-within .fab{transform:rotate(0)}
html.lefty .fab-wrap.tuck{transform:translate3d(-46px,8px,0) scale(.76)}
html.lefty .fab-wrap.tuck:hover,html.lefty .fab-wrap.tuck:focus-within{transform:translate3d(0,0,0) scale(1)}
html.lefty .fab-wrap.tuck .fab{transform:rotate(-8deg)}
#main .earn3 .earn-wide{grid-column:1/-1;flex-direction:row!important;align-items:center!important;min-height:68px;padding:10px 12px!important;background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 10%,var(--card)),var(--card));border-color:color-mix(in srgb,var(--accent) 22%,var(--border))}
#main .earn3 .earn-wide .et-t{width:auto;flex:1}
#main .earn3 .earn-wide .et-t small{white-space:normal;line-height:1.25}
.ew-arrow{color:var(--accent);display:flex;flex:none}
@media(prefers-reduced-motion:reduce){.fab-wrap{will-change:auto;transition:opacity .15s,bottom .15s}}/* Floating button glides below the viewport while scrolling down and springs back on scroll up. */
.fab-wrap{will-change:transform,opacity;transition:transform .52s var(--spring),opacity .24s ease,filter .24s ease,bottom .35s var(--spring)}
.fab-wrap.tuck{transform:translate3d(0,88px,0) scale(.74);opacity:0;filter:blur(1px);pointer-events:none}
.fab-wrap.tuck>*{pointer-events:none!important}
.fab-wrap.tuck:focus-within{transform:translate3d(0,0,0) scale(1);opacity:1;filter:none;pointer-events:auto}
.fab-wrap.tuck:focus-within>*{pointer-events:auto}
html.lefty .fab-wrap.tuck{transform:translate3d(0,88px,0) scale(.74)}
html.lefty .fab-wrap.tuck:focus-within{transform:translate3d(0,0,0) scale(1)}
#main .earn3 .earn-wide{padding-right:76px!important}
#main .earn3 .ew-arrow{display:none}
@media(prefers-reduced-motion:reduce){.fab-wrap{will-change:auto;transition:opacity .15s,bottom .15s}.fab-wrap.tuck{filter:none}}
/* Compact task cards: an aligned title/pay row with a lightweight details rail. */
#main .card.task-card{position:relative;overflow:hidden;padding:12px 13px 11px;margin-bottom:11px;border:1px solid color-mix(in srgb,var(--cc) 24%,var(--border));border-radius:20px;background:linear-gradient(112deg,color-mix(in srgb,var(--cc) 7%,var(--card)),var(--card) 62%);box-shadow:0 7px 20px color-mix(in srgb,var(--cc) 7%,transparent),var(--shadow-sm)}
#main .card.task-card:before{content:"";position:absolute;inset:12px auto 12px 0;width:3px;border-radius:0 5px 5px 0;background:linear-gradient(180deg,var(--cc),color-mix(in srgb,var(--cc) 32%,transparent));opacity:.82}
.task-top{display:flex;align-items:center;gap:10px;min-width:0}
#main .task-card .badge{width:40px;height:40px;border-radius:14px;box-shadow:0 4px 12px color-mix(in srgb,var(--cc) 18%,transparent)}
.task-main{flex:1;min-width:0}
#main .task-card .ename{font-size:15px;line-height:1.2;margin:0 0 3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#main .task-card .emeta{font-size:11.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#main .task-card .price{gap:4px;margin-left:2px}
#main .task-card .price .amt{font-size:16px;line-height:1.1}
#main .task-card .status-pill{font-size:9.5px;padding:3px 8px}
#main .task-card .chev{width:13px;height:13px;margin-left:0;opacity:.38}
.task-tags{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0;margin:7px 0 0 50px}
#main .task-card .tag-near{margin:0;padding:3px 7px;font-size:9.5px;line-height:1.15;gap:4px;border:1px solid color-mix(in srgb,var(--cc) 10%,transparent);max-width:100%}
#main .task-card .tag-near svg{width:10px;height:10px;flex:none}
@media(max-width:380px){#main .card.task-card{padding:10px 10px 9px}#main .task-top{gap:8px}#main .task-card .badge{width:36px;height:36px;border-radius:12px}#main .task-tags{margin-left:44px}#main .task-card .ename{font-size:14px}#main .task-card .price .amt{font-size:14px}}
/* Refined task-card system: clear editorial hierarchy, compact facts, category-tinted pay marker. */
#main .card.task-card{padding:12px 13px 10px 14px;border:1px solid color-mix(in srgb,var(--cc) 20%,var(--border));border-radius:19px;background:linear-gradient(105deg,color-mix(in srgb,var(--cc) 6%,var(--card)),var(--card) 45%);box-shadow:0 5px 16px color-mix(in srgb,var(--cc) 8%,transparent),var(--shadow-sm);transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s,border-color .24s}
#main .card.task-card:before{inset:11px auto 11px 0;width:3px;background:linear-gradient(180deg,var(--cc),color-mix(in srgb,var(--cc) 30%,transparent));opacity:.76}
#main .card.task-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--cc) 38%,var(--border));box-shadow:0 10px 24px color-mix(in srgb,var(--cc) 12%,transparent),var(--shadow-md)}
#main .card.task-card:focus-visible{outline:3px solid color-mix(in srgb,var(--cc) 48%,transparent);outline-offset:2px}
.task-top{gap:10px;align-items:center}
#main .task-card .badge{width:38px;height:38px;border-radius:13px;box-shadow:inset 0 1px 0 #ffffff77,0 5px 12px color-mix(in srgb,var(--cc) 16%,transparent)}
.task-main{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
#main .task-card .task-kicker{display:flex;align-items:center;gap:5px;margin:0;overflow:hidden;color:var(--sub);font-size:9.5px;font-weight:750;letter-spacing:.075em;text-transform:uppercase;line-height:1.15;white-space:nowrap}
#main .task-card .task-kicker>span:first-child{color:var(--cc);overflow:hidden;text-overflow:ellipsis}
#main .task-card .task-kicker i{font-style:normal;opacity:.45}
#main .task-card .task-kicker .task-urgent{color:#b45309}
#main .task-card .ename{font-size:14.5px;font-weight:730;letter-spacing:-.25px;line-height:1.22;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#main .task-card .price{gap:4px;margin-left:2px;align-items:flex-end}
#main .task-card .task-price .amt{display:block;padding:5px 8px;border-radius:10px;background:color-mix(in srgb,var(--cc) 11%,var(--card));color:color-mix(in srgb,var(--cc) 78%,#15251c);font-size:14px;line-height:1;font-weight:850;letter-spacing:-.35px;white-space:nowrap}
#main .task-card .status-pill{font-size:9px;padding:2px 7px;line-height:1.25}
#main .task-card .chev{width:12px;height:12px;margin-left:0;opacity:.32}
.task-tags{margin:7px 0 0 48px;padding-top:0;border-top:0;gap:5px}
#main .task-card .tag-near{padding:3px 7px;font-size:9px;line-height:1.1;background:color-mix(in srgb,var(--cc) 7%,var(--card));border:1px solid color-mix(in srgb,var(--cc) 12%,transparent);color:color-mix(in srgb,var(--cc) 70%,var(--text));border-radius:7px}
#main .task-card .tag-near svg{width:10px;height:10px;flex:none}
@media(max-width:380px){#main .card.task-card{padding:10px 9px 9px 11px}#main .task-top{gap:8px}#main .task-card .badge{width:34px;height:34px;border-radius:11px}#main .task-tags{margin-left:42px;padding-top:5px}#main .task-card .ename{font-size:13.5px}#main .task-card .task-price .amt{font-size:12.5px;padding:5px 6px}}
@media(prefers-reduced-motion:reduce){#main .card.task-card{transition:none}#main .card.task-card:hover{transform:none}}
/* A refined side-dock motion: stay visible while scrolling, then make a soft spring return. */
.fab-wrap{transform-origin:100% 100%;transition:transform .44s cubic-bezier(.22,1,.36,1),opacity .28s ease,filter .3s ease,bottom .35s var(--spring)}
.fab-wrap.tuck{transform:translate3d(12px,3px,0) scale(.9);opacity:.96;filter:saturate(.88)}
html.lefty .fab-wrap{transform-origin:0 100%}
html.lefty .fab-wrap.tuck{transform:translate3d(-12px,3px,0) scale(.9)}
.fab-wrap.tuck .fab{border-radius:20px;transform:rotate(7deg);box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.32)}
.fab-wrap.tuck .fab svg{transform:rotate(-82deg) scale(.92)}
.fab-wrap.returning .fab{animation:fabDockReturn .62s cubic-bezier(.2,1.4,.4,1) both}
.fab-wrap.returning .fab svg{animation:fabGlyphReturn .62s cubic-bezier(.2,1.35,.4,1) both}
.fab-wrap::after{content:"";position:absolute;right:0;bottom:0;width:58px;height:58px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:50%;opacity:0;pointer-events:none;transform:scale(.86)}
html.lefty .fab-wrap::after{right:auto;left:0}
.fab-wrap.returning::after{animation:fabDockHalo .72s ease-out both}
@keyframes fabDockReturn{0%{transform:rotate(7deg) scale(.9)}58%{transform:rotate(-2deg) scale(1.07)}78%{transform:rotate(1deg) scale(.98)}100%{transform:rotate(0) scale(1)}}
@keyframes fabGlyphReturn{0%{transform:rotate(-82deg) scale(.88)}64%{transform:rotate(8deg) scale(1.08)}100%{transform:rotate(0) scale(1)}}
@keyframes fabDockHalo{0%{opacity:.48;transform:scale(.78)}100%{opacity:0;transform:scale(1.55)}}
.fab-wrap.open,.fab-wrap.open.tuck{transform:none;opacity:1;filter:none}
.fab-wrap.open .fab{border-radius:50%;transform:none}
.fab-wrap.open .fab svg{transform:rotate(135deg)}
@media(prefers-reduced-motion:reduce){.fab-wrap,.fab-wrap.tuck{transition:opacity .15s,bottom .15s;transform:none;filter:none}.fab-wrap.tuck .fab{border-radius:50%;transform:none}.fab-wrap.tuck .fab svg{transform:none}.fab-wrap.returning .fab,.fab-wrap.returning .fab svg,.fab-wrap.returning::after{animation:none}}
/* Keep the compact dock reachable and preserve menu interaction. */
.fab-wrap.tuck{pointer-events:none}
.fab-wrap.tuck>*{pointer-events:auto!important}
/* Scroll gesture: the FAB folds into a small orbiting dock, then springs open on return. */
.fab-wrap{isolation:isolate}
.fab-wrap::before{content:"";position:absolute;right:-5px;bottom:-5px;width:68px;height:68px;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 56%,color-mix(in srgb,var(--accent) 10%,transparent) 65%,color-mix(in srgb,var(--accent) 82%,white) 78%,transparent 92%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));opacity:0;pointer-events:none}
html.lefty .fab-wrap::before{right:auto;left:-5px}
.fab-wrap.docking::before{animation:fabOrbit .74s cubic-bezier(.2,.7,.25,1) both}
.fab-wrap.docking .fab{animation:fabFoldIn .68s cubic-bezier(.22,1.4,.36,1) both}
.fab-wrap.docking .fab svg{animation:fabToolTurn .68s cubic-bezier(.22,1.4,.36,1) both}
.fab-wrap.returning::before{animation:fabOrbit .68s cubic-bezier(.2,.7,.25,1) reverse both}
.fab-wrap.returning::after{animation:fabDockHalo .72s ease-out both}
.fab-wrap.returning .fab{animation:fabUnfold .66s cubic-bezier(.2,1.5,.35,1) both}
.fab-wrap.returning .fab svg{animation:fabToolUntwist .66s cubic-bezier(.2,1.5,.35,1) both}
@keyframes fabOrbit{0%{opacity:0;transform:rotate(-75deg) scale(.72)}35%{opacity:.85}100%{opacity:0;transform:rotate(285deg) scale(1.14)}}
@keyframes fabFoldIn{0%{transform:rotate(0) scale(1)}34%{transform:rotate(-15deg) scale(.78)}66%{transform:rotate(11deg) scale(1.04)}100%{transform:rotate(7deg) scale(.9)}}
@keyframes fabToolTurn{0%{transform:rotate(0) scale(1)}64%{transform:rotate(-104deg) scale(.82)}100%{transform:rotate(-82deg) scale(.92)}}
@keyframes fabUnfold{0%{transform:rotate(7deg) scale(.9)}42%{transform:rotate(-12deg) scale(1.12)}70%{transform:rotate(3deg) scale(.97)}100%{transform:rotate(0) scale(1)}}
@keyframes fabToolUntwist{0%{transform:rotate(-82deg) scale(.92)}62%{transform:rotate(12deg) scale(1.1)}100%{transform:rotate(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.fab-wrap.docking::before,.fab-wrap.returning::before,.fab-wrap.docking .fab,.fab-wrap.docking .fab svg,.fab-wrap.returning .fab,.fab-wrap.returning .fab svg{animation:none!important}}
/* FAB motion only: no orbit, halo, or decorative trail. */
.fab-wrap::before,.fab-wrap::after{content:none!important;display:none!important;animation:none!important}
.fab-wrap{transition:transform .48s cubic-bezier(.22,.8,.24,1),opacity .28s ease,bottom .35s var(--spring);filter:none}
.fab-wrap.tuck{transform:translate3d(13px,2px,0) scale(.9);opacity:.98;filter:none}
html.lefty .fab-wrap.tuck{transform:translate3d(-13px,2px,0) scale(.9)}
.fab-wrap.tuck .fab{border-radius:18px;transform:rotate(5deg);box-shadow:0 8px 20px var(--accent-shadow,rgba(0,0,0,.2)),inset 0 1px 0 rgba(255,255,255,.3)}
.fab-wrap.tuck .fab svg{transform:none}
.fab-wrap.docking .fab{animation:fabTuck .5s cubic-bezier(.22,1.25,.36,1) both}
.fab-wrap.returning .fab{animation:fabReturn .58s cubic-bezier(.2,1.35,.34,1) both}
.fab-wrap.returning .fab svg{animation:fabIconReturn .46s cubic-bezier(.2,1,.3,1) both}
@keyframes fabTuck{0%{transform:rotate(0) scale(1)}48%{transform:rotate(-5deg) scale(.86)}76%{transform:rotate(7deg) scale(.93)}100%{transform:rotate(5deg) scale(.9)}}
@keyframes fabReturn{0%{transform:rotate(5deg) scale(.9)}45%{transform:rotate(-5deg) scale(1.07)}72%{transform:rotate(2deg) scale(.98)}100%{transform:rotate(0) scale(1)}}
@keyframes fabIconReturn{0%{transform:rotate(-8deg)}68%{transform:rotate(5deg)}100%{transform:rotate(0)}}
.fab-wrap.open,.fab-wrap.open.tuck{transform:none;opacity:1;filter:none}
.fab-wrap.open .fab{border-radius:50%;transform:none}
.fab-wrap.open .fab svg{transform:rotate(135deg)}
@media(prefers-reduced-motion:reduce){.fab-wrap,.fab-wrap.tuck{transition:opacity .15s,bottom .15s;transform:none;filter:none}.fab-wrap.tuck .fab{border-radius:50%;transform:none}.fab-wrap.docking .fab,.fab-wrap.returning .fab,.fab-wrap.returning .fab svg{animation:none!important}}
/* Dock settles upright and smaller; rotation exists only during the transition. */
.fab-wrap.tuck{transform:translate3d(14px,2px,0) scale(.84);opacity:.98}
html.lefty .fab-wrap.tuck{transform:translate3d(-14px,2px,0) scale(.84)}
.fab-wrap.tuck .fab{border-radius:15px;transform:rotate(0deg) scale(.92)}
.fab-wrap.docking .fab{animation:fabTuck .5s cubic-bezier(.22,1.25,.36,1) both}
.fab-wrap.returning .fab{animation:fabReturn .58s cubic-bezier(.2,1.35,.34,1) both}
@keyframes fabTuck{0%{transform:rotate(0) scale(1)}42%{transform:rotate(-8deg) scale(.78)}72%{transform:rotate(4deg) scale(1.02)}100%{transform:rotate(0) scale(.92)}}
@keyframes fabReturn{0%{transform:rotate(0) scale(.92)}45%{transform:rotate(-5deg) scale(1.12)}72%{transform:rotate(2deg) scale(.98)}100%{transform:rotate(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.fab-wrap.tuck .fab{transform:none}}
/* Slightly smaller tucked footprint; the full-size state is unchanged. */
.fab-wrap.tuck{transform:translate3d(14px,2px,0) scale(.8)}
html.lefty .fab-wrap.tuck{transform:translate3d(-14px,2px,0) scale(.8)}
.fab-wrap.tuck .fab{border-radius:14px;transform:rotate(0deg) scale(.9)}
@keyframes fabTuck{0%{transform:rotate(0) scale(1)}42%{transform:rotate(-8deg) scale(.76)}72%{transform:rotate(4deg) scale(1)}100%{transform:rotate(0) scale(.9)}}
@keyframes fabReturn{0%{transform:rotate(0) scale(.9)}45%{transform:rotate(-5deg) scale(1.12)}72%{transform:rotate(2deg) scale(.98)}100%{transform:rotate(0) scale(1)}}
/* Final small reduction to the compact dock state. */
.fab-wrap.tuck{transform:translate3d(14px,2px,0) scale(.78)}
html.lefty .fab-wrap.tuck{transform:translate3d(-14px,2px,0) scale(.78)}
.fab-wrap.tuck .fab{transform:rotate(0deg) scale(.88)}
@keyframes fabTuck{0%{transform:rotate(0) scale(1)}42%{transform:rotate(-8deg) scale(.75)}72%{transform:rotate(4deg) scale(.98)}100%{transform:rotate(0) scale(.88)}}
@keyframes fabReturn{0%{transform:rotate(0) scale(.88)}45%{transform:rotate(-5deg) scale(1.12)}72%{transform:rotate(2deg) scale(.98)}100%{transform:rotate(0) scale(1)}}
/* Earn more: a compact, glassy opportunity shelf with rounded iOS-inspired controls. */
#main section.earn.earn3{position:relative;isolation:isolate;overflow:hidden;margin:0 0 12px;padding:13px;border:1px solid color-mix(in srgb,var(--accent) 12%,rgba(255,255,255,.9));border-radius:26px;background:linear-gradient(145deg,color-mix(in srgb,var(--card) 92%,white),color-mix(in srgb,var(--accent) 6%,var(--fill-2)));box-shadow:0 12px 30px rgba(25,43,55,.07),inset 0 1px 0 rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25)}
#main section.earn3 .earn-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 10px}
#main section.earn3 .earn-h b{font-size:15px;font-weight:760;letter-spacing:-.35px;color:var(--text)}
#main section.earn3 .earn-h span{display:inline-flex;align-items:center;white-space:nowrap;padding:4px 8px;border:1px solid color-mix(in srgb,var(--accent) 10%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--card) 78%,transparent);color:var(--sub);font-size:9px;font-weight:700;letter-spacing:.02em}
#main section.earn3 .earn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#main section.earn3 .earn-tile{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0;min-height:68px;padding:9px 8px;border:1px solid color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.9));border-radius:19px;background:linear-gradient(145deg,rgba(255,255,255,.88),color-mix(in srgb,var(--card) 85%,var(--fill-2)));color:var(--text);box-shadow:0 3px 10px rgba(27,48,61,.035),inset 0 1px 0 rgba(255,255,255,.95);text-align:left;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s,background .22s}
#main section.earn3 button.earn-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 28%,var(--border));box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.95)}
#main section.earn3 button.earn-tile:active{transform:scale(.975);box-shadow:inset 0 2px 5px rgba(20,40,50,.08)}
#main section.earn3 .et-ic{display:grid;place-items:center;flex:none;width:31px;height:31px;border-radius:12px;background:linear-gradient(145deg,var(--accent-2),var(--accent));color:var(--on-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 7px color-mix(in srgb,var(--accent) 15%,transparent)}
#main section.earn3 .et-ic svg{width:17px;height:17px}
#main section.earn3 .et-t{display:flex;flex-direction:column;gap:2px;min-width:0;width:auto;flex:1}
#main section.earn3 .et-t b{display:block;overflow:hidden;color:var(--text);font-size:11.5px;font-weight:760;letter-spacing:-.18px;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
#main section.earn3 .et-t small{display:-webkit-box;overflow:hidden;margin:0;color:var(--sub);font-size:9.5px;line-height:1.25;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#main section.earn3 .earn-tile .nw{color:var(--accent);font-weight:750}
#main section.earn3 .earn-tile.off{opacity:.62;box-shadow:none}
#main section.earn3 .earn-wide{grid-column:1/-1;min-height:59px;margin-top:1px;padding:9px 11px!important;border-radius:19px;background:linear-gradient(105deg,color-mix(in srgb,var(--accent) 11%,var(--card)),color-mix(in srgb,var(--card) 82%,white) 78%);border:1px solid color-mix(in srgb,var(--accent) 19%,var(--border));box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 4px 12px color-mix(in srgb,var(--accent) 5%,transparent)}
#main section.earn3 .earn-wide .et-ic{width:34px;height:34px;border-radius:13px}
#main section.earn3 .earn-wide .et-t{width:auto;flex:1}
#main section.earn3 .earn-wide .et-t b{font-size:12.5px}
#main section.earn3 .earn-wide .et-t small{display:block;white-space:nowrap;text-overflow:ellipsis;-webkit-line-clamp:1}
#main section.earn3 .earn-wide .ew-arrow{display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:50%;background:color-mix(in srgb,var(--accent) 11%,var(--card));color:var(--accent);font-size:19px;line-height:1;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s}
#main section.earn3 .earn-wide:hover .ew-arrow{transform:translateX(2px);background:color-mix(in srgb,var(--accent) 17%,var(--card))}
#main section.earn3 button.earn-tile:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}
@media(max-width:380px){#main section.earn.earn3{padding:11px;border-radius:23px}#main section.earn3 .earn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}#main section.earn3 .earn-tile{min-height:62px;padding:8px;border-radius:17px}#main section.earn3 .earn-grid>.earn-tile:nth-child(3){grid-column:1/-1}#main section.earn3 .earn-wide .et-t small{white-space:normal}}
@media(prefers-reduced-motion:reduce){#main section.earn3 .earn-tile,#main section.earn3 .earn-wide .ew-arrow{transition:none}#main section.earn3 button.earn-tile:hover,#main section.earn3 button.earn-tile:active{transform:none}}
#main section.earn3 .earn-wide .ew-arrow{font-size:0;line-height:0}
#main section.earn3 .earn-wide .ew-arrow svg{display:block;width:14px;height:14px;stroke:currentColor;stroke-width:2.5}
/* Match open status to its errand category accent. */
#main .task-card .status-pill.st-open{background:color-mix(in srgb,var(--cc) 13%,var(--card));color:color-mix(in srgb,var(--cc) 82%,var(--text));border:1px solid color-mix(in srgb,var(--cc) 12%,transparent)}
/* Refined category ledge on each errand card. */
#main .card.task-card:before{inset:12px auto 12px 0;width:4px;border-radius:0 8px 8px 0;background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 55%,white) 0%,var(--cc) 42%,color-mix(in srgb,var(--cc) 82%,var(--text)) 100%);box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 10%,transparent),2px 0 9px color-mix(in srgb,var(--cc) 22%,transparent);opacity:.95}
/* Light appearance: give the bright palette the same layered polish as the dark glass theme. */
html:not(.lg-dark):not(.p-flat) body{background-color:#F2F4F8;background-image:radial-gradient(85% 38% at 5% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 72%),radial-gradient(60% 30% at 96% 8%,rgba(114,151,255,.10),transparent 72%),linear-gradient(160deg,#F5F6FA 0%,#EEF2F7 55%,#F5F2F8 100%);background-attachment:fixed}
html:not(.lg-dark):not(.p-flat) body::before{background:radial-gradient(54% 28% at 12% 0%,color-mix(in srgb,var(--accent-2) 9%,transparent),transparent 75%),radial-gradient(48% 32% at 100% 42%,rgba(150,169,255,.07),transparent 76%),radial-gradient(70% 34% at 50% 110%,rgba(255,255,255,.62),transparent 70%)}
html:not(.lg-dark):not(.p-flat) header::before{background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.68))!important;border:1px solid rgba(255,255,255,.88);box-shadow:0 10px 28px rgba(40,58,78,.09),inset 0 1px 0 rgba(255,255,255,.96)!important;backdrop-filter:blur(26px) saturate(1.65)!important;-webkit-backdrop-filter:blur(26px) saturate(1.65)!important}
html:not(.lg-dark):not(.p-flat) .tabbar,html:not(.lg-dark):not(.p-flat) .sheet,html:not(.lg-dark):not(.p-flat) .toast{background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.72))!important;border:1px solid rgba(255,255,255,.92);box-shadow:0 16px 38px rgba(40,55,75,.12),inset 0 1px 0 rgba(255,255,255,.98)!important;backdrop-filter:blur(26px) saturate(1.6)!important;-webkit-backdrop-filter:blur(26px) saturate(1.6)!important}
html:not(.lg-dark):not(.p-flat) .card:not(.task-card),html:not(.lg-dark):not(.p-flat) .grp,html:not(.lg-dark):not(.p-flat) .w-stat,html:not(.lg-dark):not(.p-flat) .wallet-prev{background:linear-gradient(145deg,rgba(255,255,255,.96),color-mix(in srgb,var(--card) 92%,var(--accent-wash)))!important;border:1px solid rgba(255,255,255,.92);box-shadow:0 8px 26px rgba(35,52,72,.075),inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 color-mix(in srgb,var(--accent) 3%,transparent)!important}
html:not(.lg-dark):not(.p-flat) .cgt{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.8));border:1px solid rgba(255,255,255,.96);box-shadow:0 8px 20px rgba(36,52,70,.08),inset 0 1px 0 #fff}
html:not(.lg-dark):not(.p-flat) .cgt.active{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,white),color-mix(in srgb,var(--accent) 4%,var(--card)));border-color:color-mix(in srgb,var(--accent) 35%,white);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 15%,transparent),inset 0 1px 0 rgba(255,255,255,.95)}
html:not(.lg-dark):not(.p-flat) .tab.active{background:linear-gradient(145deg,rgba(255,255,255,.8),color-mix(in srgb,var(--accent) 9%,white));border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 5px 16px color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
html:not(.lg-dark):not(.p-flat) .earn3{box-shadow:0 14px 34px rgba(40,58,78,.09),inset 0 1px 0 rgba(255,255,255,.98)}
html:not(.lg-dark):not(.p-flat) .earn3 .earn-tile{background:linear-gradient(145deg,rgba(255,255,255,.96),color-mix(in srgb,var(--card) 88%,var(--accent-wash)));box-shadow:0 5px 14px rgba(40,58,78,.055),inset 0 1px 0 rgba(255,255,255,.98)}
html:not(.lg-dark):not(.p-flat) .earn3 .earn-wide{background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 10%,white),rgba(255,255,255,.94) 72%)}
html:not(.lg-dark):not(.p-flat) .btn-primary,html:not(.lg-dark):not(.p-flat) .w-card{box-shadow:0 10px 25px color-mix(in srgb,var(--accent) 23%,transparent),inset 0 1px 0 rgba(255,255,255,.45)}
html:not(.lg-dark):not(.p-flat) .chip,html:not(.lg-dark):not(.p-flat) .filter-chip{background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.76));box-shadow:0 3px 10px rgba(38,54,74,.055),inset 0 1px 0 #fff}
@media(prefers-reduced-transparency:reduce){html:not(.lg-dark):not(.p-flat) header::before,html:not(.lg-dark):not(.p-flat) .tabbar,html:not(.lg-dark):not(.p-flat) .sheet,html:not(.lg-dark):not(.p-flat) .toast{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
/* Tighter vertical rhythm on the Post screen, scoped to the quick-post form. */
main#main:has(#tplRow)>.pjoin{margin-bottom:10px}
main#main:has(#tplRow)>.grp-h{margin-bottom:5px!important}
main#main:has(#tplRow)>.tpl-row{margin-bottom:2px;padding-top:2px;padding-bottom:7px}
main#main:has(#tplRow)>label{margin-top:15px!important;margin-bottom:7px!important}
main#main:has(#tplRow)>.tpl-row+label{margin-top:4px!important}
main#main:has(#tplRow)>#catSub{margin:-2px 2px 7px!important}
main#main:has(#tplRow)>.catlist{margin-bottom:0}
/* Remove the collapsed empty title-error gap and tighten the Details heading. */
main#main:has(#tplRow) #err-title{height:0;margin:0 4px!important}
main#main:has(#tplRow) #err-title.show{height:auto;margin:5px 4px 0!important}
main#main:has(#tplRow) .lbl-row{margin:12px 0 6px!important}
main#main:has(#tplRow) .lbl-row label{margin:0!important}
/* Selected categories use one clear full-tile boundary. */
.cgt.on{background:var(--accent-bg);border:2px solid var(--cc,var(--accent));box-shadow:var(--shadow-sm)}
.cgt.on .cgi{background:var(--accent);color:var(--on-accent,#fff);box-shadow:none}
.cgt.on .cgi::after{content:none;display:none}
.cgt.on .cgn{background:var(--card);color:var(--accent);box-shadow:none}/* A clearly visible boundary is the category selection cue, on tap and after selection. */
.cgt.on{border:3px solid var(--cc,var(--accent))!important;box-shadow:0 5px 15px color-mix(in srgb,var(--cc,var(--accent)) 18%,transparent)}
.cgt:active{border:3px solid var(--cc,var(--accent))!important}
/* Slightly stronger selected state for the feed filter chips. */
#main .fchips .fchip.on{background:color-mix(in srgb,var(--accent) 19%,var(--card));color:color-mix(in srgb,var(--accent) 78%,var(--text));border:1.5px solid color-mix(in srgb,var(--accent) 58%,var(--border));box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 12%,transparent)}

/* ---- style block look ---- */
:root{--accent:#0c8a7e;--accent-2:#339d93;--on-accent:#101014;--accent-bg:#ecf6f5;--accent-soft:#d8ecea;--accent-wash:#f4faf9;--accent-shadow:#053e39;--amber:#457445;--amber-bg:#ecf6f5;--green:#0a776c;--green-bg:#e7f3f2;--fs:1.000;--r:0px;--c:0px;--glow:1;--weight-b:1;--weight-t:1;--calm:1}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent:#219d92;--accent-2:#45ada3;--on-accent:#101014;--accent-bg:#162729;--accent-soft:#173838;--accent-wash:#151c1f;--accent-shadow:#0f4742;--amber:#507f50;--amber-bg:#162a2c;--green:#1c877e;--green-bg:#162d2e;}}:root[data-theme="dark"]{--accent:#219d92;--accent-2:#45ada3;--on-accent:#101014;--accent-bg:#162729;--accent-soft:#173838;--accent-wash:#151c1f;--accent-shadow:#0f4742;--amber:#507f50;--amber-bg:#162a2c;--green:#1c877e;--green-bg:#162d2e;}:root{--radius:18px;--radius-lg:22px;--radius-sm:12px;--radius-chip:12px;--rr:12px;--rr-lg:18px;--rr-xl:22px}:root{--glass:rgba(255,255,255,0.7);--blur:30px}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--glass:rgba(28,28,30,0.7)}}:root[data-theme="dark"]{--glass:rgba(28,28,30,0.7)}html,body,button,input,textarea,select{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}

/* ---- style block (main) ---- */
.ng-log{display:flex;flex-direction:column;gap:6px;margin:10px 0}.ng-m{max-width:84%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.35;background:var(--accent-bg);color:var(--accent)}.ng-m.me{align-self:flex-end;background:var(--accent);color:#fff}.ng-m.sys{align-self:center;background:transparent;color:var(--sub);font-size:12.5px}.ng-sum{font-size:12.5px;color:var(--sub);margin:6px 2px 10px}.ng-row{display:flex;gap:8px}.ng-row .btn{flex:1}

/* ---- style block (main) ---- */
.ob-dots{display:flex;gap:6px;justify-content:center;margin:16px 0}.ob-dots i{width:7px;height:7px;border-radius:4px;background:var(--border);transition:all .25s}.ob-dots i.on{width:20px;background:var(--accent)}.sheet-in [data-d]{margin-top:8px}

/* ---- style block (main) ---- */
.filter-panel{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:0;border:0;background:none;box-shadow:none;min-width:0}.filter-heading{box-sizing:border-box;height:32px;display:flex;align-items:center;gap:5px;flex:none;margin:0 1px 0 2px;padding:0 9px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--accent) 9%,var(--card));color:var(--accent);font-size:11px;font-weight:800;line-height:1;letter-spacing:.01em;white-space:nowrap}.filter-heading svg{display:block;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.#main .filter-panel .fchips{flex:1;min-width:0;margin:0;padding:0 1px;gap:7px}.filter-panel .fchip{box-sizing:border-box;height:32px;display:flex;align-items:center;justify-content:center;padding:0 11px;line-height:1}.fchips{display:flex;gap:8px;overflow-x:auto;margin:-6px 0 14px;padding:2px 1px;scrollbar-width:none}.fchips::-webkit-scrollbar{display:none}.fchip{flex:none;border:.5px solid var(--border);background:var(--card);color:var(--sub);border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:700;transition:all .2s}.fchip.on{background:var(--accent-bg);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}.ptr{position:absolute;top:0;left:50%;transform:translate(-50%,-60px);z-index:30;width:38px;height:38px;border-radius:50%;background:var(--card);box-shadow:var(--shadow-md);display:grid;place-items:center;transition:transform .25s;pointer-events:none}.ptr i{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--accent);border-top-color:transparent}.ptr.spin i{animation:ptrspin .7s linear infinite}@keyframes ptrspin{to{transform:rotate(360deg)}}.sk .skb,.sk .skl{border-radius:10px;background:linear-gradient(90deg,var(--fill) 25%,color-mix(in srgb,var(--fill) 40%,var(--card)) 50%,var(--fill) 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}.sk .skb{width:52px;height:52px;border-radius:16px}.sk .skl{height:12px;margin-top:12px;width:80%}.sk .skl.s{width:50%}.pop-ok{position:fixed;inset:0;display:grid;place-items:center;z-index:200;pointer-events:none}.pop-ok div{width:96px;height:96px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 14px 40px color-mix(in srgb,var(--accent) 40%,transparent);animation:popok 1s cubic-bezier(.2,.9,.25,1.3) both}@keyframes popok{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.08);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(1.15);opacity:0}}.tab{position:relative}.tab-badge{position:absolute;top:2px;left:calc(50% + 8px);min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:#e5484d;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;animation:bdg .3s}@keyframes bdg{from{transform:scale(0)}}.pv-l{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--sub);margin:14px 2px 6px}.pv-card{margin-bottom:4px}#main .card[data-id]{content-visibility:auto;contain-intrinsic-size:auto 120px}@media(hover:hover){#main .card[data-id]:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}}.btn:active,.btn-small:active,.chip:active,.fchip:active{transform:scale(.97)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-small{min-height:40px}

/* ---- style block (main) ---- */
html.lg-dark body{background:radial-gradient(120% 55% at 50% 118%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 62%),radial-gradient(100% 60% at 10% -6%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 58%),radial-gradient(80% 50% at 100% 20%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),#07090C;background-attachment:fixed}
html.lg-dark{--card:rgba(255,255,255,.07);--glass:rgba(22,26,34,.52);--border:rgba(255,255,255,.12);--sub:#A5ADBA;--text:#F4F6FA}
html.lg-dark .card,html.lg-dark .grp,html.lg-dark .w-stat,html.lg-dark .chip,html.lg-dark input,html.lg-dark textarea,html.lg-dark select{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:.5px solid rgba(255,255,255,.16);box-shadow:0 8px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04)}
html.lg-dark .tabbar,html.lg-dark .sheet,html.lg-dark .toast,html.lg-dark header::before{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05)),rgba(14,18,26,.55)!important;backdrop-filter:blur(26px) saturate(1.8)!important;-webkit-backdrop-filter:blur(26px) saturate(1.8)!important;border:.5px solid rgba(255,255,255,.18);box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3)!important}
html.lg-dark .btn-primary,html.lg-dark .w-card{box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.45)!important}
html.lg-dark .btn-ghost{background:rgba(255,255,255,.08);border:.5px solid rgba(255,255,255,.18)}
html.lg-dark .sheet-bg.show{background:rgba(2,4,8,.55)}
html.lg-dark .field,html.lg-dark .offer{border-bottom-color:rgba(255,255,255,.1)}

html.lg-dark .card,html.lg-dark .sheet,html.lg-dark .w-card,html.lg-dark .grp{border-radius:26px}
html.lg-dark .btn,html.lg-dark .btn-small,html.lg-dark input,html.lg-dark select,html.lg-dark textarea{border-radius:18px}
html.lg-dark .card{position:relative}
html.lg-dark .card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 38%)}
html.lg-dark .tab.active{background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.07));border-radius:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 22px color-mix(in srgb,var(--accent) 30%,transparent);color:#fff}
html.lg-dark .btn,html.lg-dark .card,html.lg-dark .tab,html.lg-dark .chip{transition:transform .28s cubic-bezier(.3,1.4,.5,1),box-shadow .25s}
html.lg-dark .btn:active,html.lg-dark .card:not(.static):active,html.lg-dark .chip:active,html.lg-dark .tab:active{transform:scale(.97);transition:transform .12s ease}
@media (prefers-reduced-motion:reduce){html.lg-dark .btn,html.lg-dark .card,html.lg-dark .tab,html.lg-dark .chip{transition:none!important}html.lg-dark .btn:active,html.lg-dark .card:active,html.lg-dark .tab:active{transform:none}}
html.lg-dark.p-still .card,html.lg-dark.p-still .chip,html.lg-dark.p-still input,html.lg-dark.p-still select,html.lg-dark.p-still textarea,html.lg-dark.p-still .tabbar,html.lg-dark.p-still .sheet,html.lg-dark.p-still .toast{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#12181B!important}
html.lg-dark.p-still body{background:#07090C}
.v12-note{margin:14px 0 4px;padding:12px 14px;border-radius:16px;background:var(--accent-bg);color:var(--text);font-size:13.5px;line-height:1.45}
.v12-grp{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.v12-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.v12-chips button{border:.5px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:9px 14px;font-size:13.5px;font-weight:600;font-family:inherit}
.v12-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:.5px solid var(--border)}

/* ---- style block v122css ---- */
html .card,html .spot,html .batch,html .heat-strip,html .w-card,html .grp,html .auth-card,html .p-hero,html .note,html .earn{border-radius:var(--rr-lg)}
html .btn,html .btn-small,html input,html select,html textarea,html .chip,html .sortrail,html .seg,html .set-row{border-radius:var(--rr)}
html .tabbar{border-radius:calc(var(--rr-lg) + 4px)}
html .tab.active,html .tab-ind,html .tab-ind .blob{border-radius:calc(var(--rr-lg))}
html .sheet{border-radius:var(--rr-xl) var(--rr-xl) 0 0}
html .ad-card{border-radius:var(--rr-lg)}
html .badge,html .vshield,html .pin,html .bt-ic,html .hs-ic,html .et-ic{border-radius:var(--rr)}
html body{touch-action:manipulation}
#main{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
.card:not(.static),.earn-tile,.btn,.chip,.tab{transition:transform .16s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,opacity .2s ease}
.earn-tile:active,.btn:active,.chip:active{transform:scale(.97)}
.spot{padding:12px 14px;gap:12px}
.spot .pin{width:38px;height:38px}
.earn{margin:0 0 var(--feed-gap);padding:14px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 9%,var(--card)),var(--card));border:.5px solid var(--border);box-shadow:var(--shadow-sm)}
.earn-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 2px 12px}
.earn-h b{font-size:15px;letter-spacing:-.2px;color:var(--text)}
.earn-h span{font-size:12px;color:var(--sub);text-align:right}
.earn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.earn-tile{display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border-radius:var(--rr);background:var(--card);border:.5px solid var(--border);color:var(--text);font-family:inherit;text-align:left;cursor:pointer}
.earn-tile.off{opacity:.6;cursor:default}
.et-ic{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent)}
.et-t{min-width:0;display:block}
.et-t b{display:block;font-size:13.5px;line-height:1.25}
.nw{white-space:nowrap}.et-t small{display:block;margin-top:2px;font-size:11.5px;line-height:1.3;color:var(--sub);overflow-wrap:anywhere}
.hs-ic{background:var(--accent)!important;color:var(--on-accent)!important;box-shadow:none!important}
.batch{padding:16px!important}
.route-wrap{margin:4px 0 12px}
.route-wrap .batch{margin:0}
.bt-h{gap:10px;margin-bottom:12px}
.bt-row{padding:12px 0}
.bt-f{gap:14px;margin-top:6px;padding-top:14px}
.bt-f .btn-small{margin:0;padding:11px 18px;white-space:nowrap;max-width:none}
.heat-strip{padding:14px 16px}
/* ads: smaller, quieter, clearly secondary to the app's own content */
.ads{margin-bottom:var(--feed-gap)!important}
.ads-track{padding:2px 0 8px!important}
.ad-card{min-height:0!important;box-shadow:0 4px 10px -4px rgba(16,24,40,.28)!important;flex-basis:var(--aw,68%)!important;width:var(--aw,68%)!important;max-width:290px!important}
.ad-body{padding:12px 14px 4px!important}
.ad-pitch b{font-size:14px!important;line-height:1.3!important}
.ad-pitch small{font-size:11.5px!important;margin-top:3px!important;line-height:1.35!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ad-card .ad-cta{margin:6px 14px 12px!important;padding:8px 14px!important;font-size:12.5px!important}
.ads-foot{padding:6px 18px 0!important}
/* light/dark parity for every accent */
html.lg-dark .earn,html.lg-dark .earn-tile{background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border-color:rgba(255,255,255,.14)}
html.p-flat .earn,html.p-flat .earn-tile{background:var(--card)!important;box-shadow:none!important}
html.p-flat .et-ic{background:var(--accent)!important}
html.p-solid .earn{background:var(--card)}

/* ---- style block v123css ---- */
/* v12.3: every accent behaves like the default one */
html .btn-primary,html .btn-small:not(.btn-ghost),html .w-withdraw,html .spot .pin,html .et-ic,html .bt-ic,html .vshield,html .avatar,html .auth-logo,html .nav-ic,html .switch.on i{color:var(--on-accent)}
html .w-card,html .w-card small,html .w-card .w-amt,html .w-card .w-sub{color:var(--on-accent)}
html .w-withdraw{background:color-mix(in srgb,var(--on-accent) 16%,transparent)}
html .tab.active{color:var(--accent)}
html .btn-ghost,html .btn-small.btn-ghost{background:color-mix(in srgb,var(--accent) 8%,var(--card));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border))}
html.p-flat .btn-ghost,html.p-flat .btn-small.btn-ghost,html.p-flat .btn.btn-ghost{background:var(--card)!important;background-color:var(--card)!important;color:var(--accent)!important;border:1px solid var(--border)!important;box-shadow:none!important}
html.p-flat .btn-small:not(.btn-ghost),html.p-flat .btn-primary{color:var(--on-accent)!important}
html.p-flat .btn-decline,html.p-flat .btn-danger-soft{background:var(--card)!important;background-color:var(--card)!important}
html.p-flat .tab.active{background:var(--accent-bg)!important}
html.p-solid .sheet,html.p-solid .tabbar,html.p-solid .toast,html.p-solid header::before{background:var(--card)!important}
html.p-solid .tabbar{border:1px solid var(--border)}
.status-pill,.perk,.vok{color:var(--accent)}
html.lg-dark .btn-ghost,html.lg-dark .btn-small.btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}

/* ---- style block (main) ---- */
.sortrail button{font-size:12px!important;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:clip}.sortrail button svg{flex-shrink:0}

/* ---- style block v169css ---- */
/* v169: accessibility + robustness layer (additive, no new !important fights beyond the targeted ones) */
:root{--glass:rgba(255,255,255,.9)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--glass:rgba(28,28,30,.92)}}
:root[data-theme="dark"]{--glass:rgba(28,28,30,.92)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,.btn,.btn-small,.chip,.fchip,.tab,[role=button],select,input[type=checkbox]+label{min-height:44px}
.fchip,.filter-panel .fchip{min-height:44px;height:auto}
.tab{min-width:44px}
header::before,.tabbar{backdrop-filter:blur(var(--blur,30px)) saturate(1.6)}
@media (prefers-contrast:more){:root{--sub:#4a4a4f;--border:#8a8a90}:root[data-theme="dark"]{--sub:#c7c7cc;--border:#6a6a70}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms;scroll-behavior:auto}}
.wi-trust{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:8px;border-top:.5px solid var(--border);font-size:12px;color:var(--sub)}
.wi-trust button{min-height:44px;padding:0 12px;border:.5px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font-weight:700;font-size:12px}
.wi-ov{position:fixed;inset:0;z-index:400;display:grid;align-items:end;background:rgba(0,0,0,.45)}
.wi-sh{width:100%;max-width:480px;margin:0 auto;background:var(--card);color:var(--text);border-radius:22px 22px 0 0;padding:20px var(--pad,20px) calc(20px + env(safe-area-inset-bottom,0px))}
.wi-sh h3{margin:0 0 6px}.wi-sh p{margin:0 0 12px;color:var(--sub);font-size:13px}
.wi-sh label{display:flex;align-items:center;gap:10px;min-height:44px}
.wi-sh textarea{width:100%;min-height:70px;margin:8px 0;padding:10px;border-radius:12px;border:.5px solid var(--border);background:var(--bg);color:var(--text)}
.wi-row{display:flex;gap:8px}.wi-row button{flex:1;border-radius:14px;border:0;font-weight:800;background:var(--accent);color:var(--on-accent)}
.wi-row button.g{background:var(--fill-2);color:var(--text)}
.offline-bar button{margin-left:8px;min-height:32px;border:0;border-radius:10px;padding:0 10px;font-weight:700}

/* ---- style block round-fix ---- */
/* icon badges and small round buttons are always true circles (equal width/height, never stretched or squeezed) */
html .chip .dot,html .bt-row .dot,html .pl-x{border-radius:50%!important;aspect-ratio:1/1!important;flex:0 0 auto!important;padding:0!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
html .chip .dot{width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;min-height:28px!important;max-height:28px!important}
html #pflow .pf-meta .chip .dot{width:26px!important;height:26px!important;min-width:26px!important;max-width:26px!important;min-height:26px!important;max-height:26px!important}
html .bt-row .dot{width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important;min-height:32px!important;max-height:32px!important}
html .pl-x{width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;min-height:20px!important;max-height:20px!important}
html .chip .dot svg,html .bt-row .dot svg,html .pl-x svg{display:block;flex:0 0 auto}
/* the global 44px min-height on buttons was stretching small round buttons into ovals */
html button.x,html .ai-pop .x,html .ph .x{width:26px!important;height:26px!important;min-width:26px!important;max-width:26px!important;min-height:26px!important;max-height:26px!important;aspect-ratio:1/1!important;padding:0!important;border-radius:50%!important;flex:0 0 auto!important}
html button.rt-x,html .rt-x{width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;min-height:28px!important;max-height:28px!important;aspect-ratio:1/1!important;padding:0!important;border-radius:50%!important;flex:0 0 auto!important}

/* ---- style block round-guard ---- */
/* generated: every element declared as a round badge/button keeps equal width and height and can never be squeezed or stretched into an oval */
html #main .card.task-card .task-kicker .task-urgent,
html #main section.earn3 .earn-wide .ew-arrow,
html #pflow .opt-row .opt-tick,
html #pflow .opt-tick,
html #pflow .tpl .ti,
html .accent-chip,
html .ads-dots i,
html .ai-pop .x,
html .av,
html .avail i,
html .avatar,
html .chip .dot,
html .chk .cb,
html .ci-ring,
html .ci-ring b,
html .desc-composer .desc-voice,
html .desc-composer button#voOpen,
html .desc-voice,
html .fab,
html .fab-item i,
html .faces span,
html .goal-ring,
html .goal-ring > div,
html .hsearch,
html .mini,
html .mp-ctl button,
html .mp-dot i,
html .mp-lbl i,
html .mp-me,
html .mp-x,
html .nav-dot,
html .ob-dots i,
html .pad-logo,
html .pad-x,
html .pf-back,
html .ph .x,
html .pl-x,
html .pop-ok div,
html .pp-ic,
html .ptr,
html .ptr i,
html .ring,
html .ring b,
html .rt-dot,
html .rt-x,
html .sd i,
html .spin,
html .stp-n,
html .swatch,
html .tab-ripple,
html .tick,
html .tier i,
html .tl-dot,
html .vo-ic,
html button.rt-x,
html button.x,
html main#main:has(#tplRow) .desc-composer #voOpen{min-width:0!important;min-height:0!important;aspect-ratio:1/1;flex-shrink:0!important}

/* ---- style block filter-highlight ---- */
/* "Filter" label: a soft accent highlight on a rounded rectangle (deliberately not a pill or circle) */
html #main section.filter-panel .filter-heading.filter-heading.filter-heading{box-sizing:border-box!important;height:34px!important;padding:0 12px 0 9px!important;margin:0 2px 0 0!important;gap:6px!important;border-radius:10px!important;
  background:color-mix(in srgb,var(--accent) 13%,transparent)!important;color:var(--accent)!important;
  border:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent)!important;
  font-size:13px!important;font-weight:800!important;letter-spacing:.2px!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)!important}
html #main section.filter-panel .filter-heading.filter-heading.filter-heading svg{width:15px!important;height:15px!important;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

/* ---- style block when-selected ---- */
/* When control: the chosen option gets an accent outline, accent bold label and a dot, while the track and other options stay neutral */
html #pflow .when-thumb{box-sizing:border-box!important;border:2px solid var(--accent)!important;background:var(--card)!important;box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 24%,transparent)!important}
html #pflow .when button{color:var(--sub)!important}
html #pflow .when button[aria-checked="true"]{color:var(--accent)!important;font-weight:800!important}
html #pflow .when button[aria-checked="true"]::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle;position:relative;top:-1px}

/* ---- style block win-tick ---- */
/* selected urgency window: the tick sits in line with the label (it used to float in the top-right corner) */
html:not(#_) .win-chip.active::after{content:none!important;display:none!important}
html:not(#_) .win-chip .wl{display:inline-flex;align-items:center}
html:not(#_) .win-chip.active .wl::before{content:'\2713';display:inline-block;margin-right:6px;font-weight:900;font-size:13px;line-height:1;color:var(--accent)}

/* ---- style block notes-tidy ---- */
#pflow .when-sub:empty,#pflow #crewNote:empty,#pflow .win-note:empty,#pflow .pf-note:empty{display:none!important}

/* ---- style block use-price-btn ---- */
/* suggestion pop-up: readable button (white on a deeper accent), and the amount appears once, on the button */
html #aiPop #usePrice{background:color-mix(in srgb,var(--accent) 70%,#000)!important;color:#fff!important;font-weight:800!important;font-size:13.5px!important;letter-spacing:.1px;padding:0 16px!important;min-height:40px!important;border:0!important;border-radius:12px!important;white-space:nowrap;flex:0 0 auto;box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 30%,transparent)}
html #aiPop #usePrice:active{transform:scale(.96)}

/* ---- style block sort-selected ---- */
/* sort rail: the selected option is shown only by the filled highlight underneath (no extra outline or tint on the button itself) */
html:not(#_) #main .sortrail .sortbtn.active{background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;color:var(--on-accent)!important;font-weight:800!important}
html:not(#_) #main .sortrail .sortbtn.active svg{color:var(--on-accent)!important;opacity:1!important}

/* ---- style block seg-selected ---- */
/* Posted / Accepted: same treatment as the sort bar. The selected option is shown only by the filled highlight underneath. */
html:not(#_) #main .segment{border-radius:999px}
html:not(#_) #main .segment .seg-thumb{border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2,var(--accent)));box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
html:not(#_) #main .segment .seg-btn{border-radius:999px;font-weight:700}
html:not(#_) #main .segment .seg-btn.active{background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;color:var(--on-accent)!important;font-weight:800!important}

/* ---- style block sort-centre ---- */
/* sort bar: icon + label (+ the direction arrow when shown) are one chunk, centred as a whole */
html:not(#_) #main .sortrail .sort-thumb{left:3px!important;width:calc((100% - 6px)/4)!important}

/* ---- style block sort-like-tabbar ---- */
/* sort bar: same glass panel + soft accent indicator as the bottom nav (For you, Errands, Post, Profile) */
/* panel: identical to the nav bar (same gradient, border, shadow, blur, radius) */
html:not(#_) #main .sortrail{border-radius:22px!important;isolation:isolate;overflow:visible}
html:not(#_):not(.lg-dark):not(.p-flat) #main .sortrail{background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.72))!important;border:1px solid rgba(255,255,255,.92)!important;box-shadow:0 16px 38px rgba(40,55,75,.12),inset 0 1px 0 rgba(255,255,255,.98)!important;-webkit-backdrop-filter:blur(26px) saturate(1.6)!important;backdrop-filter:blur(26px) saturate(1.6)!important}
html.lg-dark:not(#_) #main .sortrail{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05)),rgba(14,18,26,.55)!important;border:.5px solid rgba(255,255,255,.18)!important;box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3)!important;-webkit-backdrop-filter:blur(26px) saturate(1.8)!important;backdrop-filter:blur(26px) saturate(1.8)!important}
html.p-flat:not(#_) #main .sortrail{background:var(--card)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* indicator: same plain tinted pill and the same spring slide as the nav (.5s, same curve), no squish */
html:not(#_) #main .sortrail .sort-thumb{border-radius:24px!important;background:color-mix(in srgb,var(--accent) 22%,transparent)!important;background-image:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)!important;will-change:auto;transition:transform .5s var(--spring)}
html.p-flat:not(#_) #main .sortrail .sort-thumb{background:var(--accent-bg)!important;box-shadow:none!important}
/* labels: same colours and weight as the nav tabs, selected one in accent with the icon lifted and enlarged */
html:not(#_) #main .sortrail .sortbtn{color:var(--sub)!important;font-weight:600!important;border-radius:24px!important;transition:color .2s,transform .2s var(--spring)}
html:not(#_) #main .sortrail .sortbtn.active,html:not(#_) #main .sortrail .sortbtn.active svg{color:var(--accent)!important;font-weight:600!important}
html:not(#_) #main .sortrail .sortbtn svg:not(.sarr){transition:transform .35s var(--spring)}
html:not(#_) #main .sortrail .sortbtn.active svg:not(.sarr){transform:translateY(-1px) scale(1.12)!important}

/* ---- style block cat-selected-like-nav ---- */
/* selected category: the same tinted-pill shade, tone and texture as the nav's selected tab, in the category's own colour (--cc; "All" uses the accent). Colour only: no slide, no panel. */
html:not(#_) #main .catgrid .cgt.on{background:linear-gradient(color-mix(in srgb,var(--cc,var(--accent)) 22%,transparent),color-mix(in srgb,var(--cc,var(--accent)) 22%,transparent)),var(--card)!important;border:1px solid transparent!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)!important;color:var(--cc,var(--accent))!important}
html:not(#_) #main .catgrid .cgt.on b{color:var(--cc,var(--accent))!important}
html:not(#_) #main .catgrid .cgt.on .cgi{background:color-mix(in srgb,var(--cc,var(--accent)) 16%,transparent)!important;color:var(--cc,var(--accent))!important;box-shadow:none!important}
html:not(#_) #main .catgrid .cgt:active{border:1px solid color-mix(in srgb,var(--cc,var(--accent)) 35%,transparent)!important}
html:not(#_) #main .catgrid .cgt.on:active{border-color:transparent!important}
html.p-flat:not(#_) #main .catgrid .cgt.on{background:linear-gradient(color-mix(in srgb,var(--cc,var(--accent)) 22%,transparent),color-mix(in srgb,var(--cc,var(--accent)) 22%,transparent)),var(--card)!important;box-shadow:none!important}

/* ---- style block sel-nav-look-all ---- */
/* One selection look app-wide, taken from the bottom nav's selected tab.
   (1) Controls that sit on a track (Posted/Accepted, Now/Today/Later): glass track + sliding tinted pill with the nav's spring.
   (2) Standalone options (chips, filters, tiles, rows): the same tint, soft top highlight and accent label, no thick outline, no slide.
   The extra :not(#__) keeps these above every older theme rule. */

/* ---- (1) tracks ---- */
html:not(#_):not(#__) #main .segment,html:not(#_):not(#__) #pflow .when{border-radius:22px!important;padding:4px!important;isolation:isolate}
html:not(#_):not(#__):not(.lg-dark):not(.p-flat) #main .segment,html:not(#_):not(#__):not(.lg-dark):not(.p-flat) #pflow .when{background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.72))!important;border:1px solid rgba(255,255,255,.92)!important;box-shadow:0 16px 38px rgba(40,55,75,.12),inset 0 1px 0 rgba(255,255,255,.98)!important;-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6)}
html.lg-dark:not(#_):not(#__) #main .segment,html.lg-dark:not(#_):not(#__) #pflow .when{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05)),rgba(14,18,26,.55)!important;border:.5px solid rgba(255,255,255,.18)!important;box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3)!important;-webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8)}
html.p-flat:not(#_):not(#__) #main .segment,html.p-flat:not(#_):not(#__) #pflow .when{background:var(--card)!important;box-shadow:none!important}
html:not(#_):not(#__) #main .segment .seg-thumb,html:not(#_):not(#__) #pflow .when .when-thumb{border-radius:24px!important;background:color-mix(in srgb,var(--accent) 22%,transparent)!important;background-image:none!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)!important;transition:transform .5s var(--spring)}
html.p-flat:not(#_):not(#__) #main .segment .seg-thumb,html.p-flat:not(#_):not(#__) #pflow .when .when-thumb{background:var(--accent-bg)!important;box-shadow:none!important}
html:not(#_):not(#__) #main .segment .seg-btn,html:not(#_):not(#__) #pflow .when button{color:var(--sub)!important;font-weight:600!important;border:0!important;border-radius:24px!important;background:none!important;box-shadow:none!important;transition:color .2s}
html:not(#_):not(#__) #main .segment .seg-btn.active,html:not(#_):not(#__) #pflow .when button[aria-checked="true"]{color:var(--accent)!important;font-weight:600!important}
html:not(#_):not(#__) #pflow .when button[aria-checked="true"]::before{content:none!important;display:none!important}

/* ---- (2) standalone options ---- */
html:not(#_):not(#__) .chip.active,html:not(#_):not(#__) .chip.on,
html:not(#_):not(#__) .fchip.on,html:not(#_):not(#__) #main .fchips .fchip.on,html:not(#_):not(#__) #main .filter-panel .fchip.on,
html.lg-dark:not(#_):not(#__) #main .filter-panel .fchip.on,
html:not(#_):not(#__) .win-chip.active,
html:not(#_):not(#__) .w-stat.on,html:not(#_):not(#__) .qh-custom-choice.selected,
html:not(#_):not(#__) #pflow .catrow.active,html:not(#_):not(#__) #pflow .opt-row:has(.opt-tick.on){
  background:color-mix(in srgb,var(--accent) 22%,var(--card))!important;background-image:none!important;
  border-color:transparent!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)!important;
  color:var(--accent)!important;font-weight:700!important;opacity:1!important}
html:not(#_):not(#__) .chip.active,html:not(#_):not(#__) .chip.on,html:not(#_):not(#__) .fchip.on,html:not(#_):not(#__) .win-chip.active{border-width:1px!important}
html:not(#_):not(#__) .w-stat.on,html:not(#_):not(#__) .qh-custom-choice.selected{border-width:1px!important}
html:not(#_):not(#__) #pflow .catrow.active .cl b,html:not(#_):not(#__) #pflow .catrow.active{color:var(--accent)!important}
html.p-flat:not(#_):not(#__) .chip.active,html.p-flat:not(#_):not(#__) .chip.on,html.p-flat:not(#_):not(#__) .fchip.on,html.p-flat:not(#_):not(#__) .win-chip.active{box-shadow:none!important}

/* ---- style block mic-btn ---- */
/* mic button: truly centred vertically in the details box, and easier to spot */
html main#main .desc-composer #voOpen.desc-voice{top:0!important;bottom:0!important;margin:auto 0!important;right:8px!important;
  background:color-mix(in srgb,var(--accent) 18%,var(--card))!important;color:var(--accent)!important;
  border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent),0 3px 10px color-mix(in srgb,var(--accent) 22%,transparent)!important}
html main#main .desc-composer #voOpen.desc-voice svg{width:19px!important;height:19px!important;stroke-width:2.2}

/* ---- style block est-css ---- */
/* v18.9 price estimate: question block (step 1) and estimate card (step 3). Uses the app's own tokens so every theme, size and contrast setting carries over. */
.est-wrap:empty{display:none}
.est{margin:2px 0 6px;padding:16px;border:.5px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm)}
.est-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.est-l{font-size:12.5px;font-weight:700;color:var(--sub)}
.est-pill{flex:none;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--amber-bg);color:var(--amber)}
.est-medium .est-pill{background:var(--accent-bg);color:var(--accent)}
.est-high .est-pill{background:var(--green-bg);color:var(--green)}
.est-r{margin:8px 0 2px;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.est-q{margin:8px 0 4px;font-size:16px;font-weight:700;line-height:1.3}
.est-b{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--sub)}
.est-ds{margin-top:12px;border-top:.5px solid var(--border)}
.est-d{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:.5px solid var(--border);font-size:13px;line-height:1.35}
.est-d span{color:var(--sub);min-width:0}
.est-d b{flex:none;font-variant-numeric:tabular-nums}
.est-miss{margin-top:12px}
.est-miss small{display:block;font-size:12px;color:var(--sub);margin-bottom:6px}
.est-miss div{display:flex;flex-wrap:wrap;gap:6px}
.est-chip{border:1px dashed color-mix(in srgb,var(--accent) 50%,var(--border));background:none;color:var(--accent);border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:700;min-height:34px}
.est-act{display:flex;align-items:center;gap:16px;margin-top:14px}
.est-act .lnk{display:inline}
.est-more{margin-top:12px;font-size:13px}
.est-more summary{cursor:pointer;font-weight:700;color:var(--accent);padding:6px 0;min-height:32px}
.est-more ul{margin:4px 0 0;padding-left:18px;color:var(--sub);line-height:1.5}
.est-more .est-d{padding:6px 0}
.est-k{margin:12px 0 2px;font-size:12px;font-weight:700;color:var(--text)}
.est-safe{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border-radius:var(--radius-sm);background:var(--fill);font-size:12.5px;line-height:1.45;color:var(--sub)}
.est-safe svg{flex:none;margin-top:2px}
.est-opt{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:0;font-size:12.5px;font-weight:500;letter-spacing:0;line-height:1.45;color:var(--sub)}
.est-opt input{width:20px;height:20px;flex:none;margin:1px 0 0;padding:0;accent-color:var(--accent)}
.est-none{border-style:dashed}
@media (prefers-reduced-motion:reduce){.est *{transition:none!important;animation:none!important}}

/* ---- style block final-interface-polish ---- */
/* Unified sort and filter sizing and alignment */
#main .sortrail{box-sizing:border-box!important;height:42px!important;min-height:42px!important;padding:3px!important;margin:0 0 10px!important}
#main .sortrail .sortbtn{box-sizing:border-box!important;min-height:36px!important;padding:5px 2px!important;font-size:12px!important;gap:4px!important}
#main .sortrail .sortbtn svg:not(.sarr){width:12px!important;height:12px!important}
#main .sortrail .sort-thumb{top:4px!important;bottom:4px!important;left:4px!important;width:calc((100% - 8px)/4)!important;clip-path:none!important}
#main .filter-panel{box-sizing:border-box!important;height:34px!important;min-height:34px!important;display:flex!important;align-items:center!important;gap:6px!important;margin:0 0 10px!important;padding:0!important}
#main .filter-panel .filter-heading{box-sizing:border-box!important;height:34px!important;min-height:34px!important;display:flex!important;align-items:center!important;margin:0 1px 0 2px!important;padding:0 9px!important;font-size:12px!important;line-height:1!important}
#main .filter-panel .fchips{box-sizing:border-box!important;height:34px!important;min-height:34px!important;align-self:center!important;display:flex!important;align-items:center!important;justify-content:space-between!important;flex:1;min-width:0;margin:0!important;padding:0 1px!important;gap:5px!important;overflow-y:hidden!important}
#main .filter-panel .fchip{box-sizing:border-box!important;flex:0 0 auto!important;height:34px!important;min-height:34px!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0 9px!important;font-size:12px!important;line-height:1!important;font-weight:700}
#main .filter-panel .fchip.on{font-weight:850;border-width:2px!important}
html.lg-dark #main .filter-panel .fchip.on{background:color-mix(in srgb,var(--accent) 76%,#10201f)!important;color:#fff!important;border-color:color-mix(in srgb,var(--accent) 88%,white)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 24%,transparent)!important}
#main .filter-panel+.task-card{margin-top:0!important}
/* Consistent task-card geometry with uncluttered empty metadata rows */
#main .card.task-card{box-sizing:border-box!important;position:relative!important;height:100px!important;min-height:100px!important;max-height:100px!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;padding:9px 13px 8px 14px!important;overflow:hidden!important}
#main .card.task-card .task-top{box-sizing:border-box!important;width:100%;flex:1 1 auto;min-height:0;align-items:center;overflow:hidden}
#main .card.task-card .task-main{box-sizing:border-box;min-width:0;min-height:0;padding-right:78px;overflow:hidden}
#main .card.task-card .ename{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#main .card.task-card .task-price{position:absolute!important;z-index:1;top:50%!important;right:36px!important;bottom:auto!important;left:auto!important;box-sizing:border-box!important;width:max-content!important;height:56px!important;min-height:56px!important;padding:0!important;transform:translateY(-50%)!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;justify-content:space-between!important;gap:0!important}
#main .card.task-card .task-price>.amt{box-sizing:border-box!important;margin:0!important;padding:6px 9px!important;font-size:16px!important;line-height:1.05!important}
#main .card.task-card .task-price>.st{display:block!important;box-sizing:border-box!important;margin:0!important;padding:0!important;line-height:1!important}
#main .card.task-card .task-price .status-pill{display:inline-block!important;margin:0!important;padding:3px 8px!important;font-size:10px!important;line-height:1.2!important}
#main .card.task-card .chev{align-self:center!important;flex:none!important;width:18px!important;height:18px!important;margin:0!important;color:#fff!important;stroke:currentColor!important;opacity:.92!important}
#main .card.task-card .task-tags{box-sizing:border-box;position:relative;z-index:2;flex:0 0 19px;height:19px;min-height:19px;margin:3px 0 0 48px!important;padding:0!important;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#main .card.task-card .task-tags::-webkit-scrollbar{display:none}
#main .card.task-card .task-tags-empty{display:none!important}
#main .card.task-card .task-tags .tag-near,#main .card.task-card .task-tags .fee-tag,#main .card.task-card .task-tags .urg-pill{box-sizing:border-box;flex:0 0 auto;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:2px;padding-bottom:2px;font-size:9px;line-height:1.2}
#main .card.task-card .task-tags .tag-near svg,#main .card.task-card .task-tags .fee-tag svg,#main .card.task-card .task-tags .urg-pill svg{flex:none}
@media(max-width:380px){#main .card.task-card{height:100px!important;min-height:100px!important;max-height:100px!important;padding:8px 9px 8px 11px!important}#main .card.task-card .task-main{padding-right:70px}#main .card.task-card .task-price{right:32px!important;height:54px!important;min-height:54px!important}#main .card.task-card .task-price>.amt{font-size:15px!important;padding:5px 7px!important}#main .card.task-card .task-tags{margin-left:42px!important}#main .card.task-card .chev{width:17px!important;height:17px!important}}
/* Promo line wraps at words instead of ending on a clipped fragment */
#main .ads .ad-line{display:-webkit-box!important;min-width:0;white-space:normal!important;overflow:hidden!important;text-overflow:clip!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;line-height:1.22!important;font-size:12px!important;overflow-wrap:normal!important}
/* Runner tools grows while staying aligned to the app edge and clear of prices */

#fabBtn{width:56px!important;height:56px!important}
#fabBtn svg{width:24px!important;height:24px!important}
html.lg-dark #fabBtn,html.lg-dark #fabBtn svg,html.lg-dark #main section.earn.earn3 .et-ic,html.lg-dark #main section.earn.earn3 .et-ic svg{color:#fff!important;stroke:currentColor!important}
/* Dark earn-more tiles stay cohesive, with readable supporting figures */
html.lg-dark #main section.earn.earn3{background:linear-gradient(145deg,#151a1d,#20272b)!important;border-color:rgba(255,255,255,.14)!important;color:#f8fafc!important;box-shadow:0 12px 30px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important}
html.lg-dark #main section.earn.earn3 .earn-h b{color:#f8fafc!important}
html.lg-dark #main section.earn.earn3 .earn-h span{background:#252d31!important;border-color:rgba(255,255,255,.15)!important;color:#e2e8ec!important}
html.lg-dark #main section.earn.earn3 .earn-tile,html.lg-dark #main section.earn.earn3 .earn-wide{background:linear-gradient(145deg,#2a393c 0%,#202c30 100%)!important;border:1px solid rgba(135,205,197,.2)!important;box-shadow:0 5px 14px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055)!important;color:#f4f8f7!important}
html.lg-dark #main section.earn.earn3 .earn-tile .et-t b,html.lg-dark #main section.earn.earn3 .earn-wide .et-t b{color:#f4f8f7!important}
html.lg-dark #main section.earn.earn3 .et-t small{font-size:10.5px!important;color:#d2dcdf!important}
html.lg-dark #main section.earn.earn3 .et-t small .nw{color:#83eee0!important;font-weight:850!important}
html.lg-dark #main section.earn.earn3 .earn-wide .ew-arrow{background:rgba(53,174,163,.16)!important;color:#8de0d8!important}
/* Balanced errand header: fixed price lane, clear status gap, and centered arrow. */
#main .card.task-card .task-main{padding-right:126px!important}
#main .card.task-card .task-price{right:42px!important;min-width:64px;align-items:flex-end!important;gap:7px!important}
#main .card.task-card .task-price>.amt{font-size:16.5px!important;padding:6px 10px!important;white-space:nowrap}
#main .card.task-card .task-price>.st{margin-top:0!important}
#main .card.task-card .task-price .status-pill{font-size:10.5px!important;padding:3px 9px!important;white-space:nowrap}
#main .card.task-card .chev{position:absolute!important;right:10px!important;top:50%!important;transform:translateY(-50%)!important;width:18px!important;height:18px!important;margin:0!important;color:var(--text)!important;opacity:.8!important}
@media(max-width:380px){#main .card.task-card .task-main{padding-right:114px!important}#main .card.task-card .task-price{right:40px!important;min-width:60px}#main .card.task-card .task-price>.amt{font-size:15px!important;padding:5px 8px!important}#main .card.task-card .task-price .status-pill{font-size:10px!important;padding:3px 8px!important}}/* Category names and open/picked details remain easy to scan */
#main .catgrid .cgt b{font-size:12.5px!important;letter-spacing:-.1px!important}
#main .catgrid .cgt small{font-size:11.25px!important;font-weight:600!important;color:color-mix(in srgb,var(--text) 76%,var(--sub))!important}
html.lg-dark #main .catgrid .cgt small{color:#d0d5dc!important}
#main .catgrid .cgt .cgn{font-size:10.5px!important}
@media(max-width:380px){#main .catgrid .cgt b{font-size:11.5px!important}#main .catgrid .cgt small{font-size:10.5px!important}}

/* ---- style block v168-places ---- */
/* v16.8 place picker */
.pp-dd{margin:8px 0 6px;border-radius:20px;overflow:hidden;overflow-y:auto;max-height:min(54vh,390px);-webkit-overflow-scrolling:touch;background:var(--card);border:.5px solid var(--border);box-shadow:var(--shadow-md,0 12px 30px rgba(0,0,0,.14));animation:ppIn .22s var(--ease,ease-out)}
@keyframes ppIn{from{opacity:.2;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pp-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:none;background:none;color:var(--text);text-align:left;font:inherit}
.pp-row+.pp-row{border-top:.5px solid var(--border)}
.pp-row.hl,.pp-row:active{background:var(--accent-bg)}
.pp-ic{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent)}
.pp-t{flex:1;min-width:0}
.pp-t b{display:block;font-size:14.5px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-t small{display:block;font-size:12px;color:var(--sub);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-t mark{background:none;color:var(--accent);font-weight:800}
.pp-h{padding:10px 16px 4px;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--sub)}
.pp-empty{padding:14px 16px;font-size:13.5px;color:var(--sub)}
.pp-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-top:.5px solid var(--border);background:color-mix(in srgb,var(--text) 3%,transparent)}
.pp-act{display:flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:14px;padding:11px 8px;font:inherit;font-size:13px;font-weight:700;background:var(--accent-bg);color:var(--accent)}
.pp-act:active{transform:scale(.96)}
.pp-act.busy svg{animation:spin 1s linear infinite}
html.p-outline .pp-dd,html.p-outline .mp-card,html.p-outline .mp-x,html.p-outline .mp-ctl button{border:1.5px solid var(--outline)!important}
.mp{position:fixed;inset:0;margin:0 auto;max-width:480px;z-index:400;background:#e6eaed;opacity:0;transform:translateY(18px);transition:opacity .22s,transform .3s var(--spring,ease-out);overflow:hidden;touch-action:none}
.mp.show{opacity:1;transform:none}
.mp-view{position:absolute;inset:0;touch-action:none;cursor:grab}
.mp.drag .mp-view{cursor:grabbing}
.mp-bg{position:absolute;inset:0;background-color:#e6eaed;background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:48px 48px}
.mp-tiles{position:absolute;left:0;top:0;width:0;height:0}
.mp-t{position:absolute;left:0;top:0;width:256px;height:256px;max-width:none;opacity:0;transition:opacity .25s;user-select:none;-webkit-user-drag:none;pointer-events:none;will-change:transform}
.mp-t.on{opacity:1}
.mp-dots{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mp-dot{position:absolute;left:0;top:0;margin:-6px 0 0 -6px;border:none;background:none;padding:0;display:flex;align-items:center;gap:5px;pointer-events:auto;color:#1c1c1e;font:inherit}
.mp-dot i{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.35);flex:none}
.mp-dot span{font-size:11px;font-weight:800;white-space:nowrap;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 6px #fff}
.mp-me{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#2f7bff;border:3px solid #fff;box-shadow:0 0 0 8px rgba(47,123,255,.22);pointer-events:none}
.mp-pin{position:absolute;left:50%;top:50%;width:0;height:0;z-index:4;pointer-events:none}
.mp-pin svg{position:absolute;left:-20px;top:-50px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));transition:transform .2s var(--spring,ease)}
.mp.drag .mp-pin svg{transform:translateY(-9px)}
.mp-sh{position:absolute;left:-7px;top:-3px;width:14px;height:6px;border-radius:50%;background:rgba(0,0,0,.28)}
.mp-top{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;gap:10px;align-items:flex-start;padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 0;pointer-events:none}
.mp-top>*{pointer-events:auto}
.mp-x,.mp-ctl button{flex:none;width:46px;height:46px;border-radius:50%;border:.5px solid var(--border);background:var(--card);color:var(--text);display:grid;place-items:center;padding:0;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.mp-sw{flex:1;min-width:0}
.mp-sw input{margin:0;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.mp-sw .pp-dd{max-height:40vh}
.mp-ctl{position:absolute;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 210px);z-index:5;display:flex;flex-direction:column;gap:8px}
.mp-ctl button.busy svg{animation:spin 1s linear infinite}
.mp-card{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:5;border-radius:26px;padding:14px;background:var(--card);border:.5px solid var(--border);box-shadow:0 14px 40px rgba(0,0,0,.2)}
.mp-lbl{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mp-lbl i{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent)}
.mp-lbl span{flex:1;min-width:0}
.mp-lbl b{display:block;font-size:15.5px;line-height:1.25}
.mp-lbl small{display:block;font-size:12.5px;color:var(--sub);margin-top:2px;line-height:1.3}
.mp-card .btn{margin:0}
.mp-attr{font-size:10px;color:var(--sub);text-align:center;margin-top:8px}

/* v16.8 bell */
#hBellBtn{display:grid;place-items:center}
#hBellBtn svg{display:block;transform-origin:50% 12%}
#hBellBtn.ring svg{animation:bellRing .9s ease-in-out}
@keyframes bellRing{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}

/* ---- style block v169-final ---- */
/* v169b: tidy runner-tools menu */
html #fabMenu{gap:8px;align-items:stretch;width:min(244px,calc(100vw - 40px))}
html.lefty html #fabMenu{align-items:stretch}
html #fabMenu .fab-item{width:100%;min-height:52px;padding:8px 18px 8px 9px;gap:12px;justify-content:flex-start;text-align:left}
html #fabMenu .fab-item i{width:36px;height:36px}
html #fabMenu .fab-item.fab-avail{margin-top:6px}
html #fabMenu .fab-item.fab-sum{margin-bottom:6px;background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
html #fabMenu .fab-sum small{font-size:11px}
html #fabMenu .fab-sum b{font-size:16px}
/* tidy filter panel: heading row, then an even 2x2 grid of chips */
/* more room between price and status on errand cards */
html #main .card.task-card .task-price{height:auto!important;min-height:0!important;justify-content:center!important;gap:12px!important}
html #main .card.task-card .task-price .status-pill{padding:4px 10px!important}
html #main .card.task-card .task-price{height:auto!important;min-height:0!important;justify-content:center!important;gap:14px!important}
html #main .card.task-card .task-price>.st{margin:0!important}

/* filters: one linear row */
html #main section.filter-panel{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;height:auto!important;min-height:0!important;margin:0 0 14px!important}
html #main section.filter-panel .filter-heading{flex:none!important;height:44px!important;width:44px!important;min-height:0!important;margin:0!important;padding:0!important;justify-content:center!important}
html #main section.filter-panel .filter-heading span{display:none!important}
html #main section.filter-panel .fchips{display:flex!important;flex:1 1 auto!important;min-width:0!important;gap:8px!important;height:auto!important;overflow-x:auto!important;overflow-y:hidden!important;margin:0!important;padding:0!important;scrollbar-width:none}
html #main section.filter-panel .fchip{flex:1 0 auto!important;width:auto!important;height:44px!important;min-height:44px!important;padding:0 12px!important;font-size:12.5px!important;white-space:nowrap!important}
/* price: wider */
html #main .card.task-card .task-price{min-width:92px!important;align-items:stretch!important}
html #main .card.task-card .task-price>.amt{padding:6px 16px!important;text-align:center!important}
html #main .card.task-card .task-price>.st{text-align:center!important}
html #main .card.task-card .task-main{padding-right:140px!important}
/* runner button: never tucked off the screen edge */
html .fab-wrap.tuck,html.lefty .fab-wrap.tuck{transform:none!important;opacity:1!important;filter:none!important}
html .fab-wrap.tuck .fab{transform:none!important;border-radius:50%!important}
html #fabWrap,html .fab-wrap{right:max(18px,env(safe-area-inset-right,0px))!important}
html.lefty #fabWrap,html.lefty .fab-wrap{right:auto!important;left:max(18px,env(safe-area-inset-left,0px))!important}

/* price block: even rhythm. chevron(10+18) + 12 gap -> right:40; text column clears the box by 12 */
html #main .card.task-card .task-price{right:40px!important;top:50%!important;min-width:90px!important;gap:10px!important;align-items:stretch!important;justify-content:center!important}
html #main .card.task-card .task-price>.amt{width:100%!important;padding:7px 12px!important;line-height:1.1!important}
html #main .card.task-card .task-price>.st{display:flex!important;justify-content:center!important}
html #main .card.task-card .task-price .status-pill{width:80%!important;text-align:center!important;padding:4px 0!important}
html #main .card.task-card .task-main{padding-right:142px!important}

/* nothing may be clipped at the sides */
html #fabMenu{box-sizing:border-box!important;width:244px!important;max-width:calc(min(100vw,480px) - 36px - env(safe-area-inset-right,0px) - env(safe-area-inset-left,0px))!important;margin:0!important}
html #fabMenu .fab-item{box-sizing:border-box!important;min-width:0!important;max-width:100%!important;overflow:hidden!important}
html #fabMenu .fab-item>span,html #fabMenu .fab-item{text-overflow:ellipsis}
html .fab-wrap{max-width:calc(min(100vw,480px) - 36px)!important;box-sizing:border-box!important}
html #fabBtn{flex:none!important}
html #main>*{max-width:100%;box-sizing:border-box}
html #main .card,html #main section{min-width:0!important}
html,html body{overflow-x:hidden}
@media(max-width:340px){html #fabMenu{width:calc(100vw - 36px)!important}}

/* verified in browser: price block was clipped by .task-top; filters overflowed the right edge */
html #main .card.task-card .task-top{overflow:visible!important}
html #main section.filter-panel .filter-heading{display:none!important}
html #main section.filter-panel .fchips{overflow:visible!important;width:100%!important}
html #main section.filter-panel .fchip{flex:1 1 0!important;min-width:0!important;padding:0 4px!important;font-size:12px!important;overflow:hidden!important;text-overflow:ellipsis!important}


/* filter: "Filter" + icon on the same line as the four chips */
html #main section.filter-panel{flex-direction:row!important;align-items:center!important;gap:6px!important}
html #main section.filter-panel .filter-heading{display:flex!important;flex:none!important;flex-direction:row-reverse!important;align-items:center!important;gap:4px!important;width:auto!important;height:44px!important;min-height:0!important;margin:0!important;padding:0 2px!important;border:0!important;background:none!important;font-size:12px!important}
html #main section.filter-panel .filter-heading span{display:inline!important}
html #main section.filter-panel .filter-heading svg{width:13px!important;height:13px!important}
html #main section.filter-panel .fchips{flex:1 1 0!important;width:auto!important;min-width:0!important;gap:6px!important}
html #main section.filter-panel .fchip{padding:0 3px!important;font-size:11.5px!important;text-overflow:clip!important}
html #main section.filter-panel .fchip{flex:1 1 auto!important;min-width:max-content!important;white-space:nowrap!important}
html #main section.filter-panel .fchips{overflow:hidden!important}
/* chips: restore full-row width, reduce height */
html #main section.filter-panel .fchips{flex:1 1 0!important;justify-content:space-between!important;gap:6px!important;align-items:center!important}
html #main section.filter-panel .fchip{flex:1 1 auto!important;padding:0 3px!important;font-size:11.5px!important;height:34px!important;min-height:34px!important}
html #main section.filter-panel .filter-heading{height:34px!important}

/* ===== alignment pass (measured in browser) ===== */
/* tab bar + FAB share the 20px content margin */
html #tabbar{left:20px!important;right:20px!important;width:auto!important;margin:0!important}
html #fabWrap,html .fab-wrap{right:max(20px,env(safe-area-inset-right,0px))!important}
html.lefty #fabWrap,html.lefty .fab-wrap{left:max(20px,env(safe-area-inset-left,0px))!important}
/* card: symmetric padding. chevron flush to inner edge, price 12px before it, text 12px before price */
html #main .card.task-card .chev{right:0!important}
html #main .card.task-card .task-price{right:30px!important}
html #main .card.task-card .task-main{padding-right:132px!important}
/* cards with a tag row: lift the price block so it never touches the tags */
html #main .card.task-card:has(.task-tags) .task-price{transform:translateY(calc(-50% - 4px))!important;gap:8px!important}
/* filter chips: equal widths */
html #main section.filter-panel .fchips{justify-content:stretch!important}
html #main section.filter-panel .fchip{flex:1 1 0!important;min-width:0!important;padding:0 2px!important;font-size:clamp(10.5px,2.9vw,12px)!important}

/* accent bar: one clean inset pill instead of two overlapping, over-tall bars */
html #main .card.task-card::before{left:6px!important;top:16px!important;bottom:16px!important;height:auto!important;width:4px!important;border-radius:4px!important}
html #main .card.task-card::after{display:none!important}
/* price block: slightly more compact so it never crowds the card's top edge */
html #main .card.task-card .task-price>.amt{padding:5px 12px!important}
html #main .card.task-card .task-price{gap:7px!important}
html #main .card.task-card .task-price .status-pill{padding:3px 0!important}
html #main .card.task-card:has(.task-tags) .task-price{transform:translateY(calc(-50% - 2px))!important;gap:7px!important}
@media(max-width:380px){html #tabbar{left:14px!important;right:14px!important}html #fabWrap,html .fab-wrap{right:max(14px,env(safe-area-inset-right,0px))!important}html.lefty #fabWrap,html.lefty .fab-wrap{left:max(14px,env(safe-area-inset-left,0px))!important}}

/* identical header row on every card: fixed-height row anchored to the top, tags always below it */
html #main .card.task-card{justify-content:flex-start!important}
html #main .card.task-card .task-top{flex:0 0 60px!important;height:60px!important;min-height:60px!important;margin-top:4px!important}
html #main .card.task-card:has(.task-tags) .task-price,html #main .card.task-card .task-price{transform:translateY(-50%)!important;gap:7px!important}
html #main .card.task-card .task-top{flex:0 0 58px!important;height:58px!important;min-height:58px!important;margin-top:0!important}

/* ===== v17: per-card auto-alignment =====
   Each card is a row of chunks: [logo] [category + name + specifics] [price + status] [arrow].
   Every chunk is centered on the card's vertical midpoint, so a card with no specifics sits lower
   in the same fixed-size header, and the logo always lands on the middle of the text chunk. */
html #main .card.task-card{height:100px!important;min-height:100px!important;max-height:100px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:11px!important;padding:0 12px 0 18px!important;overflow:hidden!important}
html #main .card.task-card .task-top{display:contents!important}
html #main .card.task-card .badge{flex:none!important;align-self:center!important;margin:0!important}
html #main .card.task-card .task-main{flex:1 1 auto!important;min-width:0!important;padding:0!important;margin:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:4px!important;overflow:visible!important;align-self:center!important}
html #main .card.task-card .task-kicker{margin:0!important}
html #main .card.task-card .ename{margin:0!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;overflow-wrap:anywhere}
html #main .card.task-card .task-tags{margin:0!important;flex:none!important;height:19px!important;min-height:19px!important}
html #main .card.task-card .task-tags-empty{display:none!important}
html #main .card.task-card .task-price,html #main .card.task-card:has(.task-tags) .task-price{position:static!important;transform:none!important;right:auto!important;top:auto!important;flex:none!important;align-self:center!important;height:auto!important;min-height:0!important;min-width:84px!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important}
html #main .card.task-card .task-price>.amt{width:100%!important;box-sizing:border-box!important;text-align:center!important;margin:0!important;padding:7px 12px!important}
html #main .card.task-card .task-price>.st{display:flex!important;justify-content:center!important;width:100%!important;margin:0!important;padding:0!important}
html #main .card.task-card .task-price .status-pill{width:100%!important;box-sizing:border-box!important;text-align:center!important;padding:4px 0!important;margin:0!important}
html #main .card.task-card .chev{position:static!important;transform:none!important;right:auto!important;top:auto!important;flex:none!important;align-self:center!important;margin:0!important;width:16px!important;height:16px!important}
html #main .card.task-card::before{left:6px!important;top:18px!important;bottom:18px!important;height:auto!important}
@media(max-width:380px){html #main .card.task-card{gap:8px!important;padding:0 9px 0 14px!important}html #main .card.task-card .task-price{min-width:74px!important}}

/* floating button: four-box glyph stays upright */
.fab-wrap.open .fab svg,.fab-wrap.open.tuck .fab svg{transform:none!important}

/* ===== v17.1: floating button shrinks (but stays obvious and tappable) while scrolling down ===== */
html #fabWrap #fabBtn{transform-origin:100% 100%;scale:1;transition:scale .55s cubic-bezier(.2,1.25,.35,1),box-shadow .4s ease,opacity .3s ease,transform .3s var(--spring)!important}
html.lefty #fabWrap #fabBtn{transform-origin:0 100%}
html #fabWrap.tuck:not(.open) #fabBtn{scale:.72!important;opacity:.92!important;box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.3)!important}
html #fabWrap.tuck:not(.open) #fabBtn::after{content:"";position:absolute;inset:-9px;border-radius:50%}
html #fabWrap #fabBtn svg{transform:none}
/* shrink: quick anticipation swell, squash below the resting size, then settle, with a quarter-turn of the icon */
html #fabWrap.docking:not(.open) #fabBtn{animation:fabShrink .7s cubic-bezier(.3,.7,.3,1) both}
html #fabWrap.docking:not(.open) #fabBtn svg{animation:fabGlyphSpin .7s cubic-bezier(.3,.9,.3,1) both}
/* return: springy pop back to full size */
html #fabWrap.returning:not(.open) #fabBtn{animation:fabGrow .62s cubic-bezier(.2,1.3,.4,1) both}
html #fabWrap.returning:not(.open) #fabBtn svg{animation:fabGlyphSpin .62s cubic-bezier(.3,.9,.3,1) both reverse}
@keyframes fabShrink{0%{transform:scale(1)}22%{transform:scale(1.14)}62%{transform:scale(.88)}82%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes fabGrow{0%{transform:scale(.88)}55%{transform:scale(1.1)}78%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes fabGlyphSpin{0%{transform:rotate(0)}100%{transform:rotate(90deg)}}
@media(prefers-reduced-motion:reduce){html #fabWrap #fabBtn,html #fabWrap #fabBtn svg{animation:none!important;transition:scale .15s!important}}

/* ===== v17.2: phone-first sizing (320-430px wide) ===== */
/* round buttons stay perfect circles: the global 44px min-height was stretching 40px-wide buttons into ovals */
html #hAvatar,html #hBellBtn,html #hSearchBtn,html .mini,html .hsearch{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important;aspect-ratio:1/1;flex:none!important;padding:0!important;box-sizing:border-box!important}
html #hAvatar,html #hBellBtn,html #hSearchBtn{position:relative}
html #hAvatar::before,html #hBellBtn::before,html #hSearchBtn::before{content:"";position:absolute;inset:-3px;border-radius:50%}
html #hAvatar::after{box-sizing:border-box}
/* ad strip: brand name ellipsizes instead of sliding under the button, "Ad" tag always visible */
html .ad-brand{min-width:0;max-width:100%}
html .ad-brand .ad-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html .ad-brand .ad-tag{flex:none}
html #main .ads .ad-row .ad-cta{flex:none!important;white-space:nowrap}
@media(max-width:400px){
  html #main .ads .ad-card.ad-row{gap:8px!important;padding:0 8px 0 8px!important}
  html #main .ads .ad-row .ad-cta{padding:6px 10px!important;font-size:11px!important}
  html #main .ads .ad-row .ad-logo{width:28px;height:28px}
}
/* signed-out "Popular errands" banner: less tall on a phone */
html .gbanner{padding:12px 13px!important}
html .gbanner .sub{font-size:12.5px!important;line-height:1.35!important}
html .gbanner .btn,html .gbanner .btn-small{flex:none}
@media(max-width:340px){
  html .tabbar .tab{font-size:10.5px}
  html #main section.earn .earn-h .chip,html #main section.earn .earn-h span.pill{display:none}
}

/* ===== v17.3: tighter card row + sort rail + filter chips on narrow phones ===== */
@media(max-width:400px){
  html #main .card.task-card{padding:0 10px 0 16px!important;gap:9px!important}
  html #main .card.task-card .task-price{min-width:76px!important}
  html #main .card.task-card .task-price>.amt{font-size:15px!important;padding:6px 8px!important}
  html #main .card.task-card .chev{width:14px!important;height:14px!important}
  html #main .card.task-card .task-kicker{font-size:9px!important;letter-spacing:.05em!important;gap:4px!important}
  html #main .card.task-card .task-kicker>span:first-child{flex:0 1 auto!important;min-width:0}
  html #main .card.task-card .task-kicker>span:not(:first-child),html #main .card.task-card .task-kicker>i{flex:none!important}
  html #main .card.task-card .task-kicker .task-urgent{font-size:0!important;letter-spacing:0!important;display:inline-grid!important;place-items:center;width:12px;height:12px;border-radius:50%;background:#b45309;color:#fff!important}
  html #main .card.task-card .task-kicker .task-urgent::before{content:"!";font-size:9px;font-weight:900;line-height:1}
  html .sortbtn{padding-left:9px!important;padding-right:9px!important;gap:4px!important;font-size:12.5px!important}
  html .sortbtn svg{display:none!important}
  html .sortbtn{padding-left:3px!important;padding-right:3px!important;font-size:12px!important}
}
@media(max-width:340px){
  html #main section.filter-panel .fchip{padding:0 9px!important;font-size:12px!important}
}

/* ===== v17.3b: chips never squash; they scroll sideways if the row is too narrow; tiny phones drop the card arrow ===== */
html #main .filter-panel .fchips{overflow-x:auto!important;overflow-y:hidden;scrollbar-width:none;justify-content:flex-start!important;-webkit-overflow-scrolling:touch}
html #main .filter-panel .fchips::-webkit-scrollbar{display:none}
html #main .filter-panel .fchip{flex:0 0 auto!important;white-space:nowrap!important}
@media(max-width:340px){
  html #main .card.task-card .chev{display:none!important}
  html #main .card.task-card{padding-right:12px!important}
  html #main .card.task-card .task-price{min-width:72px!important}
}

html #main section.filter-panel .fchips .fchip{flex:0 0 auto!important;width:auto!important;min-width:max-content!important;white-space:nowrap!important}

/* ===== v17.4: each category tints its own errand card (light + dark) =====
   --cc is the category colour already set on every card. A soft glow sits behind the logo,
   a faint diagonal wash runs across the card, and a flowing wave in the same colour fades in at the right. */
html #main .card.task-card{isolation:isolate;
  --tint-glow:20%;--tint-wash:10%;--tint-wave:.11;--tint-edge:30%;
  background:
    radial-gradient(130px 100px at 46px 50%,color-mix(in srgb,var(--cc) var(--tint-glow),transparent),transparent 72%),
    radial-gradient(150px 90px at 100% 0%,color-mix(in srgb,var(--cc) 9%,transparent),transparent 70%),
    linear-gradient(105deg,color-mix(in srgb,var(--cc) var(--tint-wash),var(--card)),color-mix(in srgb,var(--cc) 3%,var(--card)) 70%)!important;
  border-color:color-mix(in srgb,var(--cc) var(--tint-edge),var(--border))!important}
html.lg-dark #main .card.task-card{--tint-glow:30%;--tint-wash:16%;--tint-wave:.17;--tint-edge:38%}
html #main .card.task-card.task-card::after{content:""!important;display:block!important;position:absolute;right:0;bottom:0;top:auto;left:auto;width:64%;height:100%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,var(--cc) 55%);opacity:var(--tint-wave);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C40 38 82 112 132 62S212 8 240 36V100Z' fill='%23000'/%3E%3Cpath d='M70 100C104 72 142 102 182 78S226 56 240 66V100Z' fill='%23000' fill-opacity='.55'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C40 38 82 112 132 62S212 8 240 36V100Z' fill='%23000'/%3E%3Cpath d='M70 100C104 72 142 102 182 78S226 56 240 66V100Z' fill='%23000' fill-opacity='.55'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html #main .card.task-card.dimmed::after{opacity:calc(var(--tint-wave)*.4)}

/* dark mode: prices read clearly on the tinted chip */
html.lg-dark #main .card.task-card .task-price>.amt{color:color-mix(in srgb,var(--cc) 62%,#fff)!important;background:color-mix(in srgb,var(--cc) 20%,rgba(0,0,0,.25))!important}
/* price on the errand cards stands out: pure white in dark mode, pure black in light mode */
html.lg-dark #main .card.task-card .task-price>.amt{color:#fff!important;background:color-mix(in srgb,var(--cc) 34%,rgba(0,0,0,.3))!important;font-weight:900!important}
html:not(.lg-dark) #main .card.task-card .task-price>.amt{color:#000!important;background:color-mix(in srgb,var(--cc) 18%,var(--card))!important;font-weight:900!important}
/* task filter chips: longer pills with room around the label */
html #main section.filter-panel .fchips .fchip.fchip{flex:1 1 auto!important;min-width:0!important;padding:0 6px!important;justify-content:center!important;text-align:center!important;font-size:clamp(11px,3.2vw,12.5px)!important}
html #main section.filter-panel .fchips{gap:6px!important}
/* all four filter chips share the row and fit on screen: no sideways scrolling */
html #main section.filter-panel .fchips.fchips{margin-right:0!important;padding-right:0!important;overflow:visible!important;justify-content:stretch!important;flex:1 1 0!important}
html #main section.filter-panel.filter-panel{flex-wrap:nowrap!important;gap:6px!important}
html #main section.filter-panel .filter-heading.filter-heading{flex:none!important;width:auto!important;height:34px!important;min-height:0!important;padding:0 4px 0 2px!important;justify-content:flex-start!important;flex-direction:row!important;gap:5px!important;font-size:13px!important;font-weight:700!important;white-space:nowrap!important}
html #main section.filter-panel .filter-heading.filter-heading span{display:inline!important}
html #main section.filter-panel .fchips.fchips.fchips{flex:1 1 0!important}

/* ===== v18: Post flow as four short steps ===== */
.pf-head{display:flex;align-items:center;gap:12px;margin:2px 0 12px}
.pf-back{width:38px;height:38px;min-width:38px;min-height:38px;max-width:38px;max-height:38px;border-radius:50%;border:.5px solid var(--border);background:var(--card);color:var(--text);display:grid;place-items:center;padding:0;flex:none;transition:transform .2s var(--spring)}
.pf-back:active{transform:scale(.9)}
.pf-txt{min-width:0}
.pf-txt small{display:block;font-size:11px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--sub);line-height:1.2}
.pf-txt b{display:block;font-size:21px;font-weight:800;letter-spacing:-.4px;line-height:1.2;color:var(--text)}
.pf-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 18px}
.pf-bar i{display:block;height:5px;border-radius:5px;background:color-mix(in srgb,var(--text) 12%,transparent);transition:background .35s}
.pf-bar i.on{background:var(--accent)}
.pstep{display:none}
.pstep.on{display:block}
.pstep.from-r{animation:pfInR .4s cubic-bezier(.2,.9,.3,1)}
.pstep.from-l{animation:pfInL .4s cubic-bezier(.2,.9,.3,1)}
@keyframes pfInR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes pfInL{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.pf-next,#postBtn{width:100%;margin-top:20px}
.pf-recap{border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 8%,var(--card)),var(--card) 70%);border-radius:18px;padding:12px 14px;margin:0 0 6px}
.pf-rc-l{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--sub);margin-bottom:6px}
.pf-rc-r{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:6px 0}
.pf-rc-r+.pf-rc-r{border-top:.5px solid var(--border)}
.pf-rc-r span{font-size:12.5px;color:var(--sub);flex:none}
.pf-rc-r b{font-size:13.5px;font-weight:700;text-align:right;min-width:0;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.pstep.from-r,.pstep.from-l{animation:none}}

/* ===== v18.1: Post flow visual pass =====
   Goals: the title field is the first thing on step 1, quick posts become one-line chips, categories become a
   two-column grid, step 2/3 rows share one treatment, and the main button stays reachable above the tab bar. */
#pflow label{margin:24px 2px 10px;font-size:13.5px;font-weight:700;letter-spacing:0;color:var(--text)}
#pflow label.pf-first{margin-top:4px}
#pflow label .opt{font-weight:500;color:var(--sub)}
#pflow .lbl-row{margin:24px 0 10px}
#pflow .lbl-row label{margin:0 2px}
#pflow .pf-note{font-size:12.5px;line-height:1.45;margin:8px 2px 0}
#pflow .pf-catsub{font-size:12.5px;margin:-4px 2px 12px}
.pf-txt small{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600}
.pf-bar{gap:5px;margin-bottom:20px}
.pf-bar i{height:4px}

/* step 1: quick post as chips right under the title */
#pflow .tpl-row{margin:12px calc(var(--pad)*-1) 0;padding:2px var(--pad) 6px;gap:8px;scroll-padding-left:var(--pad);scroll-snap-type:none}
#pflow .tpl{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;min-height:40px;padding:5px 14px 5px 5px;border-radius:999px;box-shadow:none;white-space:nowrap;background:var(--card)}
#pflow .tpl .ti{width:30px;height:30px;border-radius:50%;margin:0;box-shadow:none}
#pflow .tpl .ti svg{width:16px;height:16px}
#pflow .tpl b{font-size:13px;font-weight:600;letter-spacing:-.1px}
#pflow .tpl small{display:none}

/* step 1: categories as a two-column grid */
#pflow .catlist{background:none;border:none;box-shadow:none;overflow:visible;contain:none;border-radius:0}
#pflow .cat-top,#pflow .more-in{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#pflow .cat-top{padding-top:8px}
#pflow .more-in{overflow:hidden}
#pflow .more.open .more-in{padding-top:10px;overflow:visible}
#pflow .catrow{position:relative;gap:10px;padding:11px 12px;min-height:62px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);box-shadow:none;transition:border-color .2s,background .2s,transform .2s var(--spring)}
#pflow .catrow::before{display:none!important}
#pflow .catrow:active{transform:scale(.97)}
#pflow .catrow.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--card))}
#pflow .catrow .badge.sm{width:34px;height:34px;border-radius:12px}
#pflow .catrow .cl b{font-size:14px;line-height:1.2}
#pflow .catrow .cl small{display:none}
#pflow .catrow{min-height:56px}
#pflow .catrow .tick{width:20px;height:20px;flex:none;border-color:transparent}
#pflow .catrow .tick svg{width:12px;height:12px}
#pflow .catrow.active .tick{border-color:var(--accent)}
#pflow .catrow .trend{position:absolute;top:-9px;left:12px;margin:0;padding:2px 8px;font-size:10px;line-height:1.4}
#pflow .more-btn{border-top:none;padding:12px;margin-top:4px}

#pflow textarea{min-height:96px}
#pflow .pf-join{margin-top:22px}
#pflow .pf-join .card{margin-bottom:0;box-shadow:none}

/* shared flat panels (shopping list, route, schedule, urgent rows) */
#pflow .sl,#pflow .route-box,#pflow .sched,#pflow .urgent-row,#pflow .pf-dist{box-shadow:none;border-radius:var(--radius-sm)}

/* step 2 */
#pflow .pf-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
#pflow .pf-meta .area-chip{margin-top:0}
#pflow .pf-meta .pl-row{display:contents}
#pflow .pf-meta .chip{min-height:34px;padding:3px 13px 3px 4px;font-size:12.5px}
#pflow .pf-meta .chip .dot{width:26px;height:26px}
#pflow .pf-meta .chip:not(.active){opacity:1}
#pflow .pf-dist{margin-top:16px;background:var(--card);border:.5px solid var(--border);padding:14px 16px}
#pflow .pf-dist-h{display:flex;align-items:baseline;justify-content:space-between}
#pflow .pf-dist-h span{font-size:13.5px;font-weight:700}
#pflow .pf-dist-h b{font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--accent);font-variant-numeric:tabular-nums}
#pflow .pf-dist input[type=range]{margin-top:6px}
#pflow .pf-dist-ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sub);margin-top:-4px}

/* step 3: one row treatment for every switch */
#pflow .pf-stack{display:flex;flex-direction:column}
#pflow .pf-stack>*{margin:0}
#pflow .pf-stack>*+*{margin-top:10px}
#pflow .pf-stack>.win:not(.open){margin-top:0}
#pflow .pf-stack .px-box>.urgent-row{margin-top:0}
#pflow .pf-stack .px-box:not([style*="display: none"])+.px-box:not([style*="display: none"]){margin-top:10px}
#pflow .pf-stack .sched,#pflow .pf-stack .urgent-row{padding:13px 14px}
#pflow .pf-stack .urgent-row{display:flex;align-items:center;gap:12px;justify-content:flex-start;background:var(--card)}
#pflow .ur-ic{width:36px;height:36px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);flex:none}
#pflow .ur-t{flex:1;min-width:0;font-size:15px;font-weight:650;letter-spacing:-.15px;line-height:1.25}
#pflow .ur-t small{display:block;font-size:12.5px;font-weight:500;color:var(--sub);margin-top:2px;line-height:1.35}
#pflow .sc-t b{font-size:15px;font-weight:650;letter-spacing:-.15px}
#pflow .pf-stack .win.open{margin-top:10px}
#pflow .pf-stack .win.open .win-in{background:color-mix(in srgb,var(--accent) 7%,var(--card));border:.5px solid color-mix(in srgb,var(--accent) 24%,var(--border));border-radius:var(--radius-sm);padding:14px}
#pflow .win-h{text-transform:none;letter-spacing:0;font-size:13px;margin:0 0 12px}
#pflow .pf-pref{flex-wrap:wrap;overflow:visible;margin:0;padding:0;gap:8px}
#pflow .pf-pref .chip{padding:8px 13px;white-space:nowrap}
#pflow .pf-pref .chip:not(.active){opacity:1}
#pflow .pf-pref .rate{font-style:normal;font-weight:700;color:var(--amber);margin-left:2px}
#pflow .pf-pref .chip.active .rate{color:inherit}
#pflow .pf-pref{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#pflow .pf-pref .chip{justify-content:center;width:100%;min-width:0;padding-left:10px;padding-right:10px}
#pflow .pf-pref .chip:first-child{grid-column:1/-1}
#pflow .pf-dist.est .pf-dist-h b{color:var(--sub)}
#pflow .pf-extras{margin-top:22px}
#pflow .pf-extras:empty{display:none}

/* step 4 */
.pf-rc-l{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:700}
#pflow .pf-price input{font-size:30px;font-weight:800;letter-spacing:-.6px;padding:18px 16px 18px 48px}
#pflow .pf-price span{font-size:24px;left:18px}
#pflow .pv-l{letter-spacing:0;font-size:12.5px;font-weight:700;margin:22px 2px 8px}

/* main action stays above the tab bar while the step scrolls */
#pflow .pf-act{position:sticky;bottom:calc(-38px + env(safe-area-inset-bottom,0px));z-index:4;margin:12px calc(var(--pad)*-1) 0;padding:22px var(--pad) 16px;background:linear-gradient(to bottom,transparent,var(--bg) 42%);box-shadow:0 18px 0 0 var(--bg)}
#pflow .pf-act .btn{margin-top:0}

/* ===== v18.2: Where & when is one step; the two timing switches become one When control; add-ons are tappable rows ===== */
#pflow .when{position:relative;display:grid;grid-template-columns:repeat(3,1fr);background:var(--fill-2);border-radius:16px;padding:4px}
#pflow .when-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:12px;background:var(--card);box-shadow:var(--shadow-sm);transition:transform .45s var(--spring)}
#pflow .when[data-i="1"] .when-thumb{transform:translateX(100%)}
#pflow .when[data-i="2"] .when-thumb{transform:translateX(200%)}
#pflow .when button{position:relative;z-index:1;border:none;background:none;border-radius:12px;padding:11px 4px;font-size:14px;font-weight:650;letter-spacing:-.1px;color:var(--sub);transition:color .2s}
#pflow .when button[aria-checked="true"]{color:var(--text)}
#pflow .pf-stack>.when-sub{margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--sub)}
#pflow .pf-stack>.sched{margin-top:10px;padding:14px;background:color-mix(in srgb,var(--accent) 7%,var(--card));border:.5px solid color-mix(in srgb,var(--accent) 24%,var(--border))}
#pflow .pf-stack>.sched:empty{display:none}
#pflow .pf-stack>.when-sub+.win:not(.open){margin-top:0}
#pflow .opt-row{position:relative;transition:border-color .2s,background .2s}
#pflow .opt-row:has(.opt-tick.on){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--card))}
#pflow .opt-tick{width:24px;height:24px;flex:none;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--sub) 45%,transparent);background:none;color:var(--on-accent);display:grid;place-items:center;padding:0;transition:background .2s,border-color .2s,transform .35s var(--spring)}
/* v20: the global button{min-height:44px} rule stretched the tick into an oval; keep it a small true circle (the whole row is still the tap target via ::before) */
#pflow .opt-tick,#pflow .opt-row .opt-tick{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;max-width:22px!important;max-height:22px!important;aspect-ratio:1/1;flex:0 0 22px!important;padding:0!important;margin:0;border-radius:50%!important;box-sizing:border-box}
#pflow .opt-tick svg{width:12px!important;height:12px!important}
#pflow .opt-tick svg{width:14px;height:14px;opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s var(--spring)}
#pflow .opt-tick.on{background:var(--accent);border-color:var(--accent);transform:scale(1.08)}
#pflow .opt-tick.on svg{opacity:1;transform:none}
#pflow .opt-tick::before{content:'';position:absolute;inset:0;border-radius:var(--radius-sm)}
#pflow .opt-tick:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#pflow .opt-row:has(.opt-tick:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){#pflow .when-thumb,#pflow .opt-tick,#pflow .opt-tick svg{transition:none}}

/* v18.3: distance estimate card */
#pflow .pf-dist-why{margin:3px 0 0;font-size:11.5px;line-height:1.35;color:var(--sub)}
#pflow .pf-dist{margin-top:12px;padding:10px 14px}
#pflow .pf-dist-h span{font-size:13px}
#pflow .pf-dist-h b{font-size:18px}
#pflow .pf-dist-h b.pop{display:inline-block;animation:distPop .5s var(--spring)}
@keyframes distPop{0%{transform:scale(.88);opacity:.4}100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){#pflow .pf-dist-h b.pop{animation:none}}

/* ---- style block sel-clear-v20 ---- */
/* v20: one unmistakable "selected" look for every option group.
   Cause of the old weak look: theme rules (html.lg-dark .chip, html:not(.lg-dark) .chip gradient) out-ranked .chip.active,
   and .chip:not(.active) dimmed chips that use .on instead of .active. The :not(#_) trick lifts these above every theme rule. */
html:not(#_) .chip:not(.active):not(.on){opacity:.78}
html:not(#_) .chip.on{opacity:1}
html:not(#_) .chip.active,html:not(#_) .chip.on,
html:not(#_) .fchip.on,html:not(#_) #main .fchips .fchip.on,html:not(#_) #main .filter-panel .fchip.on,
html:not(#_) .win-chip.active,html:not(#_) .seg-btn.active,html:not(#_) .sortbtn.active{
  background:color-mix(in srgb,var(--accent) 10%,var(--card))!important;background-image:none!important;
  color:var(--accent)!important;border:2px solid var(--accent)!important;
  font-weight:800!important;opacity:1!important;box-shadow:none!important}
html:not(#_) .chip.active *,html:not(#_) .chip.on *,html:not(#_) .fchip.on *,html:not(#_) .win-chip.active *,
html:not(#_) .sortbtn.active svg,html:not(#_) .chip.active .rate{color:inherit!important;opacity:1!important}
html:not(#_) .win-chip.active .wm{background:color-mix(in srgb,var(--accent) 16%,transparent)!important;color:var(--accent)!important}
/* a tick in front of the selected chip, so it never depends on colour alone */
html:not(#_) .chip.active:not(:has(.dot)):not(.win-chip)::before,html:not(#_) .chip.on:not(:has(.dot))::before,html:not(#_) .fchip.on::before{
  content:'\2713';display:inline-block;margin-right:6px;font-weight:900;font-size:.95em;line-height:1}
html:not(#_) .win-chip.active::after{content:'\2713';position:absolute;top:7px;right:10px;font-weight:900;font-size:12px;line-height:1}
html:not(#_) .win-chip{position:relative}
/* the small pickers: segmented control, tiles, add-ons */
html:not(#_) .w-stat.on,html:not(#_) .qh-custom-choice.selected{border:2px solid var(--accent)!important;background:color-mix(in srgb,var(--accent) 10%,var(--card))!important}
html:not(#_) .cgt.on{border-width:3px!important;background:color-mix(in srgb,var(--cc,var(--accent)) 10%,var(--card))!important}
html:not(#_) #pflow .catrow.active{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 10%,var(--card))!important}
html:not(#_) .swatch.active,html:not(#_) .accent-chip.active{box-shadow:0 0 0 3px var(--card),0 0 0 5.5px var(--text)!important;transform:scale(1.1)}

/* ---- style block pref-compact-v20 ---- */
/* v22: Preferred runner = compact chips (same size as before) that wrap onto as many rows as needed, so nothing scrolls sideways */
html:not(#_) #pflow .pf-pref{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;overflow:visible!important;gap:8px!important;margin:0!important;padding:2px 0 4px!important}
html:not(#_) #pflow .pf-pref .chip{flex:0 0 auto!important;width:auto!important;min-height:36px!important;height:36px;padding:0 13px!important;font-size:13px;white-space:nowrap!important;grid-column:auto!important}
html:not(#_) #pflow .pf-pref .chip:first-child{grid-column:auto!important}

/* ---- style block pad-align-v20 ---- */
/* v20: the Post screen narrows main's side padding (12-22px) but full-bleed rows and sticky buttons still pulled out by --pad (20px),
   so they poked past the section edges. Making --pad match the real padding here lines every row up with the section. */
main#main:has(#tplRow),main#main:has(#f-desc){--pad:clamp(12px,3.8vw,22px)}
@media(max-width:360px){main#main:has(#tplRow),main#main:has(#f-desc){--pad:10px}}

/* ---- style block pf-legible-v22 ---- */
/* v22: larger, easier-to-read headings and helper text across all three Post steps */
html:not(#_) #pflow label{font-size:16px!important;line-height:1.3;font-weight:700!important;color:var(--text)!important;margin:26px 2px 11px!important}
html:not(#_) #pflow label.pf-first{margin-top:4px!important}
html:not(#_) #pflow label .opt{font-size:14px!important;font-weight:500!important}
html:not(#_) #pflow .pf-note,html:not(#_) #pflow .win-note{font-size:13.5px!important;line-height:1.5!important}
html:not(#_) #pflow .win-h{font-size:14px!important}
html:not(#_) #pflow .pv-l,html:not(#_) #pflow .pf-rc-l{font-size:14px!important}
html:not(#_) #pflow .pf-rc-r span{font-size:13.5px!important}
html:not(#_) #pflow .pf-rc-r b{font-size:14.5px!important}

/* ---- style block pf-bar-tap-v22 ---- */
/* v22: progress-bar segments are tappable; the invisible hit area is much taller than the thin bar */
html:not(#_) #pflow .pf-bar i{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
html:not(#_) #pflow .pf-bar i::after{content:'';position:absolute;left:-3px;right:-3px;top:-14px;bottom:-14px}

/* ---- style block loc-btn-v22 ---- */
/* v22: the "use my location" button was being stretched to 44px tall by the global min-height rule, so it was
   taller than wide and sat off-centre. Make it a smaller true square, centred in the field's height. */
html:not(#_) #pflow .loc-btn{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;max-height:34px!important;aspect-ratio:1/1;padding:0!important;margin:0!important;right:9px!important;top:50%!important;bottom:auto!important;border-radius:11px!important;display:grid!important;place-items:center!important;line-height:1}
html:not(#_) #pflow .loc-btn svg{display:block!important;width:17px!important;height:17px!important;margin:0!important}
html:not(#_) #pflow .input-wrap input{padding-right:52px!important}

/* ---- style block vo-look-v22 ---- */
/* v22: only the background of the details microphone: the same tinted fill and top highlight as the selected tab in the bottom bar */
html:not(#_) main#main .desc-composer #voOpen.desc-voice{background:color-mix(in srgb,var(--accent) 22%,transparent)!important;border:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)!important}

/* ---- style block home-v22 ---- */
/* v22: WorkIt Home panel */
#pflow .home-box{margin-top:20px}
#pflow .home-in{margin-top:12px}
#pflow .home-in input{margin-top:10px}
#pflow .home-in label{margin:4px 2px 8px!important}
#pflow .home-consent{display:flex;align-items:flex-start;gap:12px;width:100%;margin-top:12px;padding:13px 14px;border-radius:var(--radius-sm);border:.5px solid var(--border);background:var(--card);color:var(--text);font-size:14px;line-height:1.4;text-align:left;min-height:0}
#pflow .home-consent i{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border);display:grid;place-items:center;color:transparent;font-style:normal}
#pflow .home-consent.on{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
#pflow .home-consent.on i{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
#pflow .home-consent svg{width:14px;height:14px}
#pflow .home-safe{margin-top:12px;font-size:13px;line-height:1.5}
#pflow #h-preview{margin-top:12px;height:auto;min-height:44px;padding:10px 14px;white-space:normal;text-align:left;line-height:1.35}
#pflow .fam-card{margin-bottom:14px}
.home-tag{color:var(--accent)}

/* ---- style block workit-post-responsive-v1 ---- */
/* Mobile-first responsive corrections, intentionally limited to the Post screen. */
main#main:has(#tplRow), main#main:has(#f-desc){
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  padding-left:clamp(12px,3.8vw,22px);padding-right:clamp(12px,3.8vw,22px);
}
main#main:has(#tplRow) *,main#main:has(#f-desc) *{box-sizing:border-box;min-width:0;}
main#main:has(#tplRow) .card,main#main:has(#tplRow) .grp,
main#main:has(#tplRow) input,main#main:has(#tplRow) select,
main#main:has(#tplRow) textarea,main#main:has(#tplRow) button{
  max-width:100%;
}
main#main:has(#tplRow) input,main#main:has(#tplRow) select,
main#main:has(#tplRow) textarea{font-size:16px;}
main#main:has(#tplRow) .catgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(7px,2vw,11px);width:100%;
}
main#main:has(#tplRow) .cgt{width:100%;min-width:0;min-height:clamp(96px,28vw,124px);height:auto;aspect-ratio:auto;overflow:hidden;}
main#main:has(#tplRow) .cgi{width:clamp(36px,10vw,44px);height:clamp(36px,10vw,44px);min-width:clamp(36px,10vw,44px);min-height:clamp(36px,10vw,44px);aspect-ratio:1/1;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;}
main#main:has(#tplRow) .cgi svg{display:block;width:20px;height:20px;max-width:100%;max-height:100%;}
main#main:has(#tplRow) .desc-composer{display:block;position:relative;width:100%;min-width:0;}
main#main:has(#tplRow) .desc-composer #f-desc{width:100%;max-width:100%;min-width:0;min-height:48px;max-height:144px;line-height:22px;overflow-y:hidden;overflow-wrap:anywhere;resize:none;}
main#main:has(#tplRow) .desc-composer #f-desc.scrollable{overflow-y:auto;}
main#main:has(#tplRow) .desc-composer #voOpen{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;aspect-ratio:1/1!important;flex:0 0 36px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:50%!important;}
main#main:has(#tplRow) .desc-composer #voOpen svg{width:18px!important;height:18px!important;display:block!important;}
main#main:has(#tplRow) .chips,main#main:has(#tplRow) .tpl-row{max-width:100%;}
main#main:has(#tplRow) .chips{flex-wrap:wrap;}
main#main:has(#tplRow) .btn,main#main:has(#tplRow) .chip{white-space:normal;overflow-wrap:anywhere;}
@media(max-width:360px){
 main#main:has(#tplRow){padding-left:10px;padding-right:10px;}
 main#main:has(#tplRow) .catgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
 main#main:has(#tplRow) .cgt{min-height:104px;}
}
@media(min-width:600px){
 main#main:has(#tplRow){max-width:680px;margin-left:auto;margin-right:auto;}
 main#main:has(#tplRow) .catgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(orientation:landscape) and (max-height:500px){
 main#main:has(#tplRow) .cgt{min-height:88px;}
}

/* ---- style block pf-tighten-v1 ---- */
/* Post flow: trim the roomiest gaps a little. Gaps that were already moderate are untouched. */
/* gap above each section heading (Details to Photos, and the headings in steps 2 and 3) */
html:not(#_) #pflow label{margin-top:19px!important;margin-bottom:9px!important}
html:not(#_) #pflow label.pf-first{margin-top:4px!important}
/* errand kind to Details: slimmer "Show all categories" row and less space above the Details heading */
html:not(#_) #pflow .more-btn{padding:8px 12px!important;margin-top:0!important}
html:not(#_) main#main:has(#tplRow) #pflow .lbl-row,html:not(#_) main#main:has(#tplRow) .lbl-row{margin:6px 0 6px!important}
/* an empty neighbours card was still adding space above the button */
html:not(#_) #pflow .pf-join:empty{display:none!important}
html:not(#_) #pflow .pf-join{margin-top:14px!important}
/* last field to the Continue button */
html #pflow[class] .pstep[data-step] .pf-act{margin-top:6px!important;padding-top:14px!important}
/* saved-address chips: icon and label sit together as one centred group */
html:not(#_) #pflow .pf-meta .chip{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;padding:3px 13px!important;text-align:center}
html:not(#_) #pflow .pf-meta .chip .dot{width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;min-height:20px!important;max-height:20px!important}
html:not(#_) #pflow .pf-meta .chip .pl-x{margin-left:4px!important}
/* payment step: protection note */
#pflow .pf-trust{display:flex;align-items:flex-start;gap:8px;margin:10px 2px 0;font-size:13px;line-height:1.45;color:var(--sub)}
#pflow .pf-trust svg{flex:none;margin-top:2px;color:var(--accent)}
/* connection notice */
#pflow .pf-offline{display:flex;align-items:flex-start;gap:8px;margin:10px 2px 0;padding:10px 12px;font-size:13px;line-height:1.45;color:var(--text);background:var(--amber-bg);border:.5px solid var(--border);border-radius:var(--radius-sm)}
#pflow .pf-offline[hidden]{display:none}
#pflow .pf-offline svg{flex:none;margin-top:2px;color:var(--amber)}
/* post again chips */
#pflow .rc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 2px 0}
#pflow .rc-row small{width:100%;font-size:13px;font-weight:600;color:var(--sub)}
#pflow .rc-row .chip{opacity:1}
/* runner tools button stays out of the way while posting */
.pl-x,#popX{position:relative}
.pl-x::after,#popX::after{content:'';position:absolute;inset:-12px}
html body:has(#pflow) #fabWrap{display:none!important}
/* inactive chips keep readable text contrast */
html .chip:not(.active){opacity:.8}
/* visible keyboard focus on clickable cards */
.card[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* tab bar: the sliding indicator exactly as in WorkIt 8.0 (a plain tinted pill with a spring slide) */
html:not(#_) .tabbar{padding:7px!important}
html:not(#_) .tabbar .tab-ind{position:absolute;top:7px!important;bottom:7px!important;left:0;border-radius:24px!important;background:color-mix(in srgb,var(--accent) 22%,transparent)!important;background-image:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)!important;overflow:visible!important;will-change:auto!important;transition:transform .5s var(--spring),width .3s!important}
html:not(#_) .tab-ind::after,html:not(#_) .tab-ind.glint::after,html:not(#_) .tab-ind .blob{display:none!important;animation:none!important}
html:not(#_) .tab.active,html:not(#_) .tab.active:hover{background:none!important;background-image:none!important;box-shadow:none!important;color:var(--accent)!important}
html:not(#_) .tab::before,html:not(#_) .tab.active::before{display:none!important}
html:not(#_) .tab.active svg{animation:none!important;filter:none!important;transform:translateY(-1.5px) scale(1.12)!important}
/* Earn more: the wide "Going my way" tile uses the same colour and texture as the other tiles */
html:not(#_) #main section.earn3 .earn-wide{background:linear-gradient(145deg,rgba(255,255,255,.88),color-mix(in srgb,var(--card) 85%,var(--fill-2)));border:1px solid color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.9));box-shadow:0 3px 10px rgba(27,48,61,.035),inset 0 1px 0 rgba(255,255,255,.95)}
html:not(#_):not(.lg-dark):not(.p-flat) #main section.earn3 .earn-wide{background:linear-gradient(145deg,rgba(255,255,255,.96),color-mix(in srgb,var(--card) 88%,var(--accent-wash)));box-shadow:0 5px 14px rgba(40,58,78,.055),inset 0 1px 0 rgba(255,255,255,.98)}
html.lg-dark:not(#_) #main section.earn3 .earn-wide{background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border-color:rgba(255,255,255,.14)}
html.p-flat:not(#_) #main section.earn3 .earn-wide{background:var(--card)!important;box-shadow:none!important}

/* ---- style block earned-card-fix ---- */
/* Errands > Accepted: the "Earned as a runner" summary was picking up the pale card styling meant for the For-you tiles, which left white text on a pale background. Restore the accent fill. */
html:not(#_):not(#__) #main div.earn{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:var(--on-accent,#fff)!important;border:0!important;padding:22px 20px!important;box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 28%,transparent)!important}
html:not(#_):not(#__) #main div.earn small{color:var(--on-accent,#fff)!important;opacity:.9}
html.p-flat:not(#_):not(#__) #main div.earn{box-shadow:none!important}

/* ---- style block track-motion ---- */
/* every sliding selector uses the nav's press feedback and the same spring */
html:not(#_):not(#__) #main .segment .seg-btn,html:not(#_):not(#__) #pflow .when button,html:not(#_):not(#__) #main .sortrail .sortbtn{transition:color .2s,transform .2s var(--spring)!important}
html:not(#_):not(#__) #main .segment .seg-btn:active,html:not(#_):not(#__) #pflow .when button:active,html:not(#_):not(#__) #main .sortrail .sortbtn:active{transform:scale(.94)}