/* Glass UI (design: "PingLife – Glass UI" canvas). One handset: full screen on a phone, a framed device on desktop.
   The wallpaper hue and the status-bar clock follow a whole life lived as a single day (--h, --L* set from JS). */
:root{
  --ink:#0B0C0F; --ink2:#1E2129; --ink3:#1C1F26; --muted:#4A5060; --muted2:#5A6070; --muted3:#3A404D;
  --blue:#0064DE; --blue-ink:#0057C2; --good:#13803D; --good-ink:#0F6B33; --good-bg:rgba(19,128,61,.12);
  --bad:#C42B2B; --bad-ink:#B4232C; --bad-bg:rgba(196,43,43,.11); --warn:#B4410C; --sep:rgba(20,30,50,.08);
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --fr:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --a-mail:#1F6FB2; --a-msg:#22A559; --a-grp:#169487; --a-bank:#2F5BD3; --a-work:#5B4BD1; --a-love:#D83B72; --a-social:#E85F22; --a-health:#D93535; --a-school:#C48A0C; --a-gov:#5C6878; --a-shop:#8F47C9; --a-me:#334155; --a-album:#B45309;
  --h:205; --L0:50%; --L1:68%; --L2:60%; --L3:38%;
  --wp:radial-gradient(70% 42% at 88% 8%,hsl(calc(var(--h) - 30) 90% var(--L1)/.95),transparent 70%),radial-gradient(85% 50% at 0% 95%,hsl(calc(var(--h) + 70) 80% var(--L2)/.9),transparent 70%),linear-gradient(172deg,hsl(var(--h) 78% var(--L0)),hsl(calc(var(--h) + 38) 72% var(--L3)));
  --sb-safe:env(safe-area-inset-top,0px); --bot-safe:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:#0D0F14;color:var(--ink);font-family:var(--f);display:grid;place-items:center;padding:16px;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;background:none;padding:0;text-align:inherit}
button:disabled{cursor:default;opacity:.5}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* glass */
.g{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 30px rgba(8,18,40,.14)}
.gd{background:rgba(14,16,24,.34);-webkit-backdrop-filter:blur(28px) saturate(160%);backdrop-filter:blur(28px) saturate(160%);border:1px solid rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 24px rgba(0,0,0,.12)}
.w{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(255,255,255,.85);box-shadow:0 6px 20px rgba(8,18,40,.06)}
.gn{background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* handset */
.phone{position:relative;width:min(100%,410px);height:min(100%,864px);border:10px solid #16171B;border-radius:56px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.phone.buzz{animation:buzz .24s}
@keyframes buzz{25%{transform:translateX(-1px)}50%{transform:translateX(1px)}75%{transform:translateX(-.5px)}}
@media (max-width:480px){body{padding:0}.phone{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}}
.sb{position:absolute;inset:0 0 auto;height:calc(54px + var(--sb-safe));padding:calc(6px + var(--sb-safe)) 30px 0;display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:600;color:#fff;z-index:6;font-variant-numeric:tabular-nums;pointer-events:none}
.phone[data-tone="dark"] .sb{color:var(--ink)}
.phone[data-scr="end"] .sb{display:none}
.bt{display:flex;align-items:center;gap:6px;font-size:13px}
.bt i{position:relative;width:24px;height:12px;border:1.5px solid currentColor;border-radius:4px;padding:1.5px;opacity:.95}
.bt i::after{content:"";position:absolute;right:-4px;top:2.5px;width:2px;height:4px;border-radius:0 1px 1px 0;background:currentColor;opacity:.5}
.bt b{display:block;height:100%;border-radius:1.5px;background:currentColor;transition:width .5s}
.bt.low b{background:#FF453A}.bt.mid b{background:#FF9F0A}
.island{position:absolute;top:calc(11px + var(--sb-safe));left:50%;transform:translateX(-50%);width:124px;height:36px;border-radius:18px;background:#000;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;transition:width .35s cubic-bezier(.2,1.2,.4,1),height .35s}
.island span{opacity:0;transition:opacity .2s}
.island.on{width:220px;height:38px}
.island.on span{opacity:1;transition-delay:.15s}
.island .k{opacity:.8}.island.on .k{opacity:.8}
.island .up{color:#5BE38A}.island .dn{color:#FF7A70}

.scr{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:calc(54px + var(--sb-safe));overflow:hidden}
.wall{background:var(--wpimg,none) center/cover no-repeat,var(--wp);color:#fff}
.pale{background:linear-gradient(rgba(242,245,250,.86),rgba(242,245,250,.86)),var(--wpimg,none) center/cover no-repeat,var(--wp);color:var(--ink)}
.pale.chatbg{background:linear-gradient(rgba(244,247,252,.8),rgba(244,247,252,.8)),var(--wpimg,none) center/cover no-repeat,var(--wp)}
.page{flex:1;min-height:0;overflow-y:auto;padding:4px 16px calc(120px + var(--bot-safe));display:flex;flex-direction:column;gap:14px}
.page.flat{padding-bottom:calc(30px + var(--bot-safe))}
.col{display:flex;flex-direction:column;gap:2px;min-width:0}
.grow{flex:1;min-width:0}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.shadowtxt{text-shadow:0 1px 12px rgba(0,20,60,.25)}

/* type */
.h1{margin:0;padding:0 4px;font-size:34px;line-height:41px;font-weight:700;letter-spacing:-.01em}
.h2{margin:0;font-size:20px;font-weight:700}
.lbl{padding:4px 4px 0;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.rowhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 4px 0}
.rowhead small{font-size:13px;font-weight:600;color:var(--muted)}
.up{color:var(--good)}.dn,.neg{color:var(--bad)}
.quiet{margin:12px 0 0;text-align:center;font-size:15px;line-height:21px;opacity:.9}
.pale .quiet{color:var(--muted)}

/* buttons */
.primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:0 20px;border-radius:28px;background:var(--blue);color:#fff;font-size:17px;font-weight:600;border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 24px rgba(0,60,150,.3);text-align:center}
.primary.ring{min-height:60px;border-radius:30px;font-size:18px;box-shadow:0 0 0 5px rgba(255,255,255,.25),inset 0 1px 0 rgba(255,255,255,.45),0 12px 26px rgba(0,50,140,.35)}
.primary.split{justify-content:space-between}
.primary small{font-size:13px;font-weight:600;opacity:.9}
.primary:active,.sec:active,.rp:active,.plus:active{transform:scale(.98)}
.count{min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:rgba(255,255,255,.24);font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.sec{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:8px 12px;border-radius:26px;font-size:15px;font-weight:600;color:var(--ink3);text-align:center}
.wall .sec.gd,.end .sec{color:#fff}
.link{align-self:center;padding:8px 12px;font-size:15px;font-weight:600;color:var(--blue-ink)}
.iconbtn{width:44px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;color:var(--ink3);flex:none}
.closebtn{width:36px;height:36px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:var(--muted3)}

/* bottom bar: Life · Bank | +1 year | Shop · Apps */
.nav{position:absolute;left:16px;right:16px;bottom:calc(24px + var(--bot-safe));display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:4}
.cap{width:134px;height:60px;border-radius:30px;display:flex;align-items:center;justify-content:space-around;padding:0 4px}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;width:60px;padding:6px 0 5px;border-radius:24px;font-size:11px;font-weight:600;color:var(--ink3)}
.tab span{max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab[aria-current="page"]{background:rgba(0,100,222,.13);color:var(--blue-ink)}
.plus{flex:none;width:76px;height:76px;border-radius:38px;background:var(--blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.4);box-shadow:0 0 0 5px rgba(255,255,255,.38),inset 0 1px 0 rgba(255,255,255,.5),0 12px 28px rgba(0,60,150,.4)}
.plus b{font-family:var(--fr);font-size:26px;font-weight:700;line-height:1}
.plus small{font-size:11px;font-weight:600;margin-top:2px}

/* lock screen */
.clock{display:flex;flex-direction:column;align-items:center;padding-top:12px;text-shadow:0 1px 12px rgba(0,20,60,.25)}
.clock .cl{font-size:15px;font-weight:600;opacity:.92}
.clock .age{font-family:var(--fr);font-size:112px;font-weight:700;line-height:.95;letter-spacing:-.03em;color:rgba(255,255,255,.94);margin-top:2px;font-variant-numeric:tabular-nums}
.age.tick{animation:tick .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes tick{from{transform:translateY(14px);opacity:.2}to{transform:none;opacity:1}}
.widgets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:18px 16px 0}
.wg{border-radius:20px;padding:10px 10px 9px;display:flex;flex-direction:column;gap:4px;color:#fff;min-height:66px;min-width:0;text-align:left}
.wg small{font-size:11px;font-weight:600;opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg b{font-family:var(--fr);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.wg b.neg,.wg b.fl-dn{color:#FFB4AE}.wg b.fl-up{color:#B6F5C9}
.bar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.3)}
.bar i{display:block;height:4px;border-radius:2px;background:#fff}
.dots{display:flex;gap:4px}
.dots i{width:8px;height:8px;border-radius:4px;border:1.5px solid rgba(255,255,255,.7)}
.dots i.done{background:#fff;border-color:#fff}.dots i.fail{opacity:.35}
.nh{display:flex;justify-content:space-between;align-items:baseline;padding:20px 20px 8px;text-shadow:0 1px 8px rgba(0,20,60,.25)}
.nh b{font-size:17px;font-weight:700}.nh span{font-size:13px;font-weight:600;opacity:.9}
.notifs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:0 12px calc(170px + var(--bot-safe))}
.nt{display:flex;gap:12px;align-items:flex-start;width:100%;padding:12px 14px;border-radius:24px;text-align:left;color:var(--ink)}
.nt.in{animation:drop .42s cubic-bezier(.2,1.3,.4,1) both}
.nt.done{opacity:.62}
.nt .top{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:#454A57}
.nt .who{font-size:15px;font-weight:600}
.nt .pv{font-size:15px;line-height:20px;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ic{display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.ic40{width:40px;height:40px;border-radius:11px}
.hint{margin:4px 0 0;text-align:center;font-size:13px;font-weight:600;animation:pulse 1.6s infinite;text-shadow:0 1px 8px rgba(0,20,60,.3)}
@keyframes pulse{50%{opacity:.45}}
.pendpill{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(118px + var(--bot-safe));display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:18px;color:#fff;font-size:13px;font-weight:600;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;z-index:3}
.pendpill i{width:8px;height:8px;border-radius:4px;background:#FFB340;flex:none}
@media (max-height:760px){.clock .age{font-size:84px}.widgets{padding-top:12px}.nh{padding-top:14px}}

/* app home */
.goalcard{display:flex;flex-direction:column;gap:10px;width:100%;padding:16px 18px;border-radius:26px;color:#fff;text-align:left}
.gc-h{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;letter-spacing:.02em;opacity:.9}
.gc-h b{text-transform:uppercase}
.goals{display:flex;flex-direction:column}
.goal{display:flex;align-items:center;gap:10px;font-size:15px;line-height:20px;padding:4px 0}
.chk{width:22px;height:22px;border-radius:11px;border:2px solid #8A909D;flex:none;display:flex;align-items:center;justify-content:center}
.goal.done .chk{background:var(--good);border-color:var(--good);color:#fff}
.goal.done span{color:var(--muted)}
.goal.fail{opacity:.55}.goal.fail .chk{border-color:var(--bad);color:var(--bad)}
.goals.on-dark .chk{border-color:rgba(255,255,255,.75)}
.goals.on-dark .goal.done .chk{background:#fff;border-color:#fff;color:var(--good-ink)}
.goals.on-dark .goal.done span{color:inherit;opacity:.8;text-decoration:line-through}
.goals.on-dark .goal.fail .chk{border-color:rgba(255,255,255,.75);color:#fff}
.apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px;padding:14px 0 0;text-shadow:0 1px 6px rgba(0,20,60,.3)}
.app{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:500;color:#fff}
.ic62{position:relative;width:62px;height:62px;border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.16)}
.badge-n{position:absolute;top:-6px;right:-6px;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:#E5262F;color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;text-shadow:none}

/* chat */
.chead{display:flex;align-items:flex-start;justify-content:space-between;padding:4px 16px 0}
.chead .spacer{width:44px;height:44px}
.whois{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.av52{width:52px;height:52px;border-radius:26px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;box-shadow:0 6px 16px rgba(20,40,80,.22)}
.whochip{padding:4px 12px;border-radius:14px;font-size:13px;font-weight:600;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:18px 16px 12px}
.when{align-self:center;font-size:12px;font-weight:600;color:var(--muted2);padding-bottom:6px}
.b{max-width:78%;padding:10px 14px;font-size:16px;line-height:21px;border-radius:20px;white-space:pre-wrap;overflow-wrap:anywhere;animation:pop .2s ease-out both}
.b.them{align-self:flex-start;border-radius:20px 20px 20px 6px}
.b.them+.b.them{border-radius:6px 20px 20px 20px}
.b.me{align-self:flex-end;background:var(--blue);color:#fff;border-radius:20px 20px 6px 20px;margin-top:6px}
.b.typing{color:var(--muted);font-style:italic}
.nar{align-self:center;max-width:88%;text-align:center;font-size:15px;line-height:21px;color:#2A2E38;padding:14px 4px 4px;animation:pop .25s ease-out both}
.fx{align-self:center;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding-top:6px}
.fx span{display:inline-flex;padding:6px 12px;border-radius:14px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;animation:pop .3s ease-out both}
.fx .up{background:var(--good-bg);color:var(--good-ink)}.fx .dn{background:var(--bad-bg);color:var(--bad-ink)}
.dotsT{display:flex;gap:4px;padding:14px}
.dotsT i{width:7px;height:7px;border-radius:50%;background:var(--muted2);animation:blink 1s infinite}
.dotsT i:nth-child(2){animation-delay:.15s}.dotsT i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.replies{padding:8px 16px calc(28px + var(--bot-safe));display:flex;flex-direction:column;gap:10px}
.rlabel{font-size:13px;font-weight:600;color:var(--muted);padding-left:6px}
.rp{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:14px 18px;border-radius:28px;font-size:17px;font-weight:600;line-height:22px;color:var(--blue-ink);text-align:left}
.outcome{border-radius:22px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;align-items:center;animation:pop .3s ease-out both}
.outcome .olbl{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.outcome .fx{padding-top:0}
.rnote{text-align:center;font-size:13px;color:var(--muted);padding-top:2px}

/* app screens */
.titlerow{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.titlerow .col{align-items:flex-end;padding-bottom:4px}
.titlerow small{font-size:13px;font-weight:600;color:var(--muted)}
.titlerow b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.hero{border-radius:26px;padding:18px 20px;color:#fff;display:flex;flex-direction:column;gap:14px}
.hero.bank{background:#1F4FC4;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px rgba(20,60,160,.28)}
.hero.job{background:#4A3BC0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px rgba(60,40,160,.26);gap:6px}
.hero .ht{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600}
.hero small{font-size:13px;font-weight:600;opacity:.9}
.hero .big{font-family:var(--fr);font-size:42px;line-height:46px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero .big.neg{color:#FFD0CC}
.hero .mini{border-radius:16px;background:rgba(255,255,255,.16);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.hero .mini small{font-size:12px}
.hero .mini b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.hero .jt{font-size:26px;line-height:31px;font-weight:700}
.hero .js{font-size:15px;opacity:.92}
.card{border-radius:22px;display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;width:100%;text-align:left}
.row+.row{border-top:1px solid var(--sep)}
.row b{font-size:16px;font-weight:600}
.row small{font-size:13px;color:var(--muted2)}
.row .amt{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rico{width:38px;height:38px;border-radius:19px;background:#EEF0F4;color:var(--muted3)}
.rico.up{background:#E3F3E9;color:var(--good)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:15px}
.kv+.kv{border-top:1px solid var(--sep)}
.kv span{color:var(--muted)}.kv b{font-weight:600;text-align:right}
.card.pad{padding:4px 16px}
/* shop */
.tabs{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;height:36px;padding:0 16px;border-radius:18px;font-size:15px;font-weight:600;color:var(--ink3)}
.tabs button[aria-pressed="true"]{background:var(--ink);color:#fff;border:0;box-shadow:none}
.owned{display:flex;gap:12px;overflow-x:auto;padding:0 4px 4px}
.own{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;flex:none;font-size:12px;font-weight:600;text-align:center}
.tile{position:relative;display:flex;align-items:center;justify-content:center;flex:none;border-radius:16px;width:56px;height:56px}
.own .tile{width:64px;height:64px;border-radius:18px}
.tile .ok{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:11px;background:var(--good);color:#fff;border:2px solid #F2F5FA;display:flex;align-items:center;justify-content:center}
.c-ride{background:rgba(10,124,140,.13);color:#0A6E7C}.c-home{background:rgba(19,128,61,.12);color:#13703A}.c-tech{background:rgba(47,91,211,.12);color:#2A50BC}
.c-style{background:rgba(143,71,201,.13);color:#7A35B3}.c-pets{background:rgba(194,65,12,.13);color:#B23A0B}.c-fun{background:rgba(216,59,114,.12);color:#B8285E}
.item .col b{font-size:16px}.item .col em{font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}
.item .col em.warn{color:var(--warn)}
.item .price{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.item .price.dim{color:#6B7080}
/* sheet (purchase, god mode, waitlist, language) */
.scrim{position:absolute;inset:0;z-index:20;background:rgba(8,12,24,.34);display:flex;align-items:flex-end;padding:8px;animation:fade .2s ease-out both}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;max-height:calc(100% - 40px);overflow-y:auto;border-radius:38px;padding:10px 20px 26px;display:flex;flex-direction:column;gap:16px;color:var(--ink);background:rgba(250,251,253,.88);-webkit-backdrop-filter:blur(36px) saturate(180%);backdrop-filter:blur(36px) saturate(180%);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 -10px 40px rgba(8,18,40,.2);animation:up .32s cubic-bezier(.2,1.1,.4,1) both}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.grab{align-self:center;width:40px;height:5px;border-radius:3px;background:rgba(20,30,50,.18);flex:none}
.sh-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sh-top .lbl{padding:0}
.sh-art{height:180px;border-radius:28px;display:flex;align-items:center;justify-content:center;flex:none}
.sh-t{margin:0;font-size:26px;line-height:31px;font-weight:700}
.sh-d{margin:0;font-size:16px;line-height:21px;color:var(--muted)}
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{border-radius:18px;background:rgba(20,30,50,.05);padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat small{font-size:12px;font-weight:600;color:var(--muted2)}
.stat b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.after{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px;font-size:15px}
.after span{color:var(--muted)}.after b{font-variant-numeric:tabular-nums}
.note{margin:0;text-align:center;font-size:13px;color:var(--muted)}
.god-ic{align-self:center;width:84px;height:84px;border-radius:26px;background:#FFF1CC;color:#A86F00;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px rgba(168,111,0,.22)}
.center{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.center p{margin:0;font-size:16px;line-height:22px;color:var(--muted3);max-width:30ch}
.feat{border-radius:18px;background:rgba(20,30,50,.05);padding:12px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.soon{align-self:center;padding:6px 14px;border-radius:14px;background:#FFF1CC;color:#7A5000;font-size:14px;font-weight:700}
.sheet input[type=email]{width:100%;min-height:52px;border:1px solid rgba(20,30,50,.14);border-radius:16px;padding:0 16px;font-size:16px;background:#fff}
.sheet label{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:19px;color:var(--muted)}
.sheet label input{margin-top:2px;width:18px;height:18px;flex:none}
.sheet .err{color:var(--bad);font-size:14px;font-weight:600}
.sheet a{color:var(--blue-ink);font-size:14px;font-weight:600}
.langlist{display:flex;flex-direction:column;border-radius:22px}
.langlist button{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-size:17px;font-weight:500}
.langlist button+button{border-top:1px solid var(--sep)}
.langlist button[aria-pressed="true"]{color:var(--blue-ink);font-weight:700}
/* dating */
.prof{position:relative;height:430px;max-height:52vh;min-height:320px;border-radius:34px;overflow:hidden;background:#F3D3E0;box-shadow:0 16px 36px rgba(120,30,70,.18);flex:none}
.prof .ini{position:absolute;inset:0 0 110px;display:flex;align-items:center;justify-content:center;font-family:var(--fr);font-size:120px;font-weight:700;color:#A42A5A;opacity:.9}
.prof .steps{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.prof .steps i{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.5)}
.prof .steps i.on{background:#fff}
.prof .info{position:absolute;left:10px;right:10px;bottom:10px;border-radius:26px;padding:14px 18px;display:flex;flex-direction:column;gap:4px}
.prof .info b{font-size:26px;line-height:31px;font-weight:700}
.prof .info span{font-size:16px;line-height:21px;color:#2A2E38}
.swipe{display:flex;justify-content:center;gap:28px;padding-top:4px}
.swipe button{width:68px;height:68px;border-radius:34px;display:flex;align-items:center;justify-content:center;color:var(--muted3)}
.swipe .like{background:#C92F66;color:#fff;border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 24px rgba(170,30,80,.35)}
/* jobs */
.apply{flex:none;min-height:44px;padding:0 16px;border-radius:22px;background:var(--blue);color:#fff;font-size:15px;font-weight:600;display:flex;align-items:center}
/* career and relationship cards */
.career{padding:14px 16px;gap:12px}
.ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.ladder span{text-align:center;font-size:12px;font-weight:600;padding:7px 2px;border-radius:10px;background:rgba(20,30,50,.05);color:var(--muted2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ladder span.done{background:rgba(74,59,192,.12);color:#4A3BC0}
.ladder span.on{background:#4A3BC0;color:#fff}
.meter .tr i.good{background:#1F9D55}.meter .tr i.mid{background:#E0A100}.meter .tr i.bad{background:var(--bad)}
.rep-good{color:var(--good)}.rep-mid{color:#9A6B00}.rep-bad{color:var(--bad)}
.why{margin:0;font-size:15px;line-height:20px;color:var(--ink2)}
.why.small{font-size:13px;line-height:18px;color:var(--muted)}
.jmeta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.chance{font-weight:700}.chance.hi{color:var(--good)}.chance.mid{color:#9A6B00}.chance.lo{color:var(--warn)}
.row.locked b{color:var(--muted2)}.req{color:var(--muted2)}
.lockic{width:44px;height:44px;color:#A0A6B2}
/* social */
.folcard{border-radius:26px;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.folrow{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.folrow .big{font-family:var(--fr);font-size:42px;line-height:46px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.chipg{padding:6px 12px;border-radius:14px;font-size:14px;font-weight:600;white-space:nowrap}
.chipg.up{background:var(--good-bg);color:var(--good-ink)}.chipg.dn{background:var(--bad-bg);color:var(--bad-ink)}
.post-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:26px;background:#C9480F;color:#fff;font-size:17px;font-weight:600;border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px rgba(200,72,15,.28)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.post{aspect-ratio:1;border-radius:18px;padding:10px;display:flex;flex-direction:column;justify-content:space-between;font-size:12px;line-height:15px;font-weight:600}
.post em{align-self:flex-start;font-style:normal;padding:2px 8px;border-radius:10px;background:rgba(255,255,255,.8);font-weight:700;color:var(--good-ink)}
.post em.dn{color:var(--bad-ink)}
.p0{background:#FBD9C6;color:#6A2A0B}.p1{background:#D9E6FB;color:#1C3A7A}.p2{background:#E6DDF8;color:#46277A}.p3{background:#D9F0E2;color:#145A32}.p4{background:#F9DDE8;color:#7A1F44}.p5{background:#EDE9DF;color:#4A4128}
/* me */
.mehead{display:flex;align-items:center;gap:14px;padding:0 4px}
.av68{width:68px;height:68px;border-radius:34px;background:#334155;color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:600;flex:none;box-shadow:0 8px 18px rgba(30,40,60,.25)}
.mehead b{font-size:26px;line-height:31px;font-weight:700}
.mehead small{font-size:15px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
.chip{padding:6px 12px;border-radius:14px;font-size:14px;font-weight:600}
.meters{border-radius:22px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.meter{display:flex;flex-direction:column;gap:6px}
.meter span{display:flex;justify-content:space-between;font-size:15px;font-weight:600}
.meter .tr{height:8px;border-radius:4px;background:rgba(20,30,50,.08)}
.meter .tr i{display:block;height:8px;border-radius:4px}
/* album */
.tier{flex:none;padding:3px 10px;border-radius:10px;font-size:12px;font-weight:700;letter-spacing:.02em;background:rgba(20,30,50,.06);color:var(--muted)}
.tier.rare{background:rgba(91,156,255,.16);color:#2A5FC4}.tier.epic{background:rgba(245,185,49,.2);color:#8A5A00}
.locked b{color:var(--muted2)}

/* start + birth */
.start{padding:24px 20px 0;gap:14px}
.brand{margin:0;font-family:var(--fr);font-size:56px;line-height:56px;font-weight:800;letter-spacing:-.03em}
.tagline{margin:8px 0 0;font-size:17px;line-height:23px;max-width:30ch;opacity:.95}
.stats{border-radius:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:12px 6px;text-align:center}
.stats span{display:flex;flex-direction:column;gap:2px;padding:0 4px}
.stats span+span{border-left:1px solid rgba(255,255,255,.2)}
.stats b{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.stats small{font-size:12px;font-weight:600;opacity:.88}
.mode{display:flex;flex-direction:column;gap:4px;width:100%;padding:16px 18px;border-radius:26px;color:var(--ink);text-align:left}
.mode .mh{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted3);text-transform:uppercase}
.mode .streak{display:inline-flex;align-items:center;gap:4px;color:var(--warn);text-transform:none}
.mode b{font-size:17px;line-height:22px;font-weight:600}
.mode span.d{font-size:15px;line-height:20px;color:var(--muted3)}
.bigbtn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:27px;color:var(--ink);font-size:16px;font-weight:600}
.dock{display:flex;justify-content:space-between;gap:8px;padding:6px 20px calc(22px + var(--bot-safe))}
.dock button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0;border-radius:20px;color:#fff;font-size:12px;font-weight:600}
.dock button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.kick{font-size:13px;font-weight:700;letter-spacing:.04em;opacity:.92;text-transform:uppercase}
.born-name{margin:0;font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.02em}
.dchips{display:flex;flex-wrap:wrap;gap:6px}
.dchip{padding:7px 12px;border-radius:16px;color:#fff;font-size:14px;font-weight:600}
.lcard{border-radius:26px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.lcard .lbl{padding:0;color:var(--muted3)}
.trait b{display:block;font-size:17px;font-weight:700}
.trait span{font-size:15px;line-height:20px;color:var(--muted3)}
.bottom{display:flex;flex-direction:column;gap:10px;padding:10px 20px calc(30px + var(--bot-safe))}

/* end of life */
.end{background:radial-gradient(60% 30% at 50% 22%,rgba(91,156,255,.22),transparent 70%),#000;color:#EDEEF2}
.end .page{padding:10px 20px 20px}
.endhead{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.endhead .kick{color:#9AA0AD}
.endhead h2{margin:0;font-size:34px;line-height:40px;font-weight:700;color:#fff}
.endhead span{font-size:15px;color:#B3B8C3;font-variant-numeric:tabular-nums}
.tcard{border-radius:26px;padding:16px 18px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;animation:pop .5s .1s ease-out both}
.tcard .rar{padding:3px 10px;border-radius:10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.1);color:#C9CDD6}
.tcard.rare{border-color:rgba(91,156,255,.5)}.tcard.rare .rar{background:rgba(91,156,255,.18);color:#8DBBFF}
.tcard.epic{border-color:rgba(245,185,49,.55)}.tcard.epic .rar{background:rgba(245,185,49,.18);color:#F5C542}
.tcard b{font-size:24px;line-height:30px;font-weight:700;color:#fff}
.tcard small{font-size:14px;color:#B3B8C3}
.epi{margin:0;text-align:center;font-size:16px;line-height:22px;font-style:italic;color:#D5D8DF;padding:0 12px}
.grid10{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px}
.grid10 i{width:22px;height:22px;border-radius:6px;background:#5A606D}
.grid10 i.g1{background:#34C46A}.grid10 i.g2{background:#F5C542}.grid10 i.g3{background:#F0605A}.grid10 i.g4{background:#5B9CFF}
.grid10 i.last{background:none;border:2px solid #5A606D;border-radius:11px}
.ostat{border-radius:18px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ostat small{font-size:12px;font-weight:600;color:#9AA0AD}
.ostat b{font-size:17px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:19px;color:#D5D8DF}
.timeline li{display:grid;grid-template-columns:28px 1fr;gap:8px}
.timeline span{color:#9AA0AD;font-weight:600;font-variant-numeric:tabular-nums}
.end .lbl{color:#9AA0AD;padding:4px 0 0}
.end .bottom{padding:8px 20px calc(24px + var(--bot-safe))}
.whitebtn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;border-radius:28px;background:#fff;color:var(--ink);font-size:17px;font-weight:600}
.end .link{color:#8DBBFF}
.linkrow{display:flex;justify-content:center;gap:4px;flex-wrap:wrap}
.off{position:absolute;inset:0;background:#000;z-index:9;display:grid;place-items:center;color:#9AA0AD;font-size:14px}
.off.go{animation:tv .9s ease-in both}
@keyframes tv{0%{background:#300;opacity:0}30%{opacity:1;background:#400}60%{background:#000;clip-path:inset(48% 0 48% 0)}100%{background:#000;clip-path:inset(0)}}

/* toast and the like storm */
.toast{position:absolute;left:10px;right:10px;top:calc(8px + var(--sb-safe));z-index:30;border-radius:24px;padding:14px 16px;font-size:15px;line-height:20px;font-weight:600;color:var(--ink);transform:translateY(-130%);opacity:.6;transition:transform .45s cubic-bezier(.2,1.25,.35,1),opacity .3s}
.toast.in{transform:none;opacity:1}
.toast.win{box-shadow:inset 0 0 0 2px rgba(19,128,61,.5),0 10px 30px rgba(8,18,40,.18)}
.toast.bad{box-shadow:inset 0 0 0 2px rgba(196,43,43,.45),0 10px 30px rgba(8,18,40,.18)}
@keyframes drop{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.storm{position:absolute;inset:calc(56px + var(--sb-safe)) 12px auto;z-index:9;pointer-events:none;display:grid;gap:6px}
.storm div{border-radius:18px;padding:9px 14px;font-size:13px;font-weight:600;color:var(--ink);animation:storm 1.6s ease-in forwards}
@keyframes storm{0%{opacity:0;transform:translateY(-12px)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* pictures: glass app icons, item illustrations, homes, wallpapers */
.pic{background-size:cover;background-position:center}
.ic40.pic{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.av52.pic{border-radius:16px}
@media (min-width:481px){body{background:#0D0F14 var(--deskimg,none) center/cover fixed}}
.tile{overflow:visible}
.tile img{width:100%;height:100%;object-fit:contain;padding:3px}
.sh-art img.big{height:170px;width:auto;object-fit:contain}
.homecard{display:flex;align-items:center;gap:14px;border-radius:22px;padding:10px 16px}
.homecard img{width:72px;height:72px;object-fit:contain}
.homecard small{font-size:13px;color:var(--muted);font-weight:600}.homecard b{font-size:17px}
/* shop: categories stay on screen while you scroll */
.tabs{position:sticky;top:-4px;z-index:3;padding:8px 16px;background:linear-gradient(rgba(242,245,250,.92),rgba(242,245,250,.75));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.stbtn{align-items:flex-end;text-align:right;padding-bottom:4px}
.stbtn small{color:var(--blue-ink)!important}
.chip{cursor:pointer}
.sec.danger{color:var(--bad);margin-top:6px}
.dangerbtn{background:#C42B2B;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px rgba(160,30,30,.28)}
/* start screen */
.tagstats{margin:8px 0 0;font-size:14px;font-weight:600;opacity:.88}
.lifecard{border-radius:26px;padding:16px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.lc-top{display:flex;gap:12px;align-items:center}
.av44{width:44px;height:44px;border-radius:22px;background:#334155;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px;flex:none}
.lc-top b{font-size:18px}.lc-top small{color:var(--muted);font-size:14px}
.lc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lc-stats span{background:rgba(20,30,50,.05);border-radius:14px;padding:8px 10px;display:flex;flex-direction:column;min-width:0}
.lc-stats small{font-size:12px;color:var(--muted2);font-weight:600}.lc-stats b{font-size:16px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lifecard .link{padding:2px 12px}
.how{border-radius:22px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;color:#fff}
.howrow{display:flex;gap:12px;align-items:center;font-size:15px;line-height:20px}
.howic{width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex:none}
.lbl.onwall{color:#fff;opacity:.92;text-shadow:0 1px 8px rgba(0,20,60,.3);padding-top:6px}
.dock button{font-size:11px}
.soundbtn{position:absolute;top:calc(64px + var(--sb-safe));right:20px;width:40px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;z-index:3}
.owned{overflow-y:hidden;padding-bottom:8px}
.owned{overflow:visible;flex-wrap:wrap;padding:0 4px}
/* no visible scrollbars anywhere: it should feel like a phone app (scrolling still works) */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}

/* lock-screen widgets: icon + label, value, one footer line */
.wg{gap:3px;min-height:76px;padding:9px 9px 8px}
.wtop{display:flex;align-items:center;gap:5px;min-width:0}
.wic{width:18px;height:18px;border-radius:5px;flex:none;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.4)}
.wg .wtop small{font-size:10.5px}
.wg b{font-size:17px;line-height:20px}
.wfoot{font-size:10.5px;font-weight:600;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:13px}
.wfoot.up{color:#B6F5C9;opacity:1}.wfoot.dn{color:#FFC2BC;opacity:1}
/* profile */
.profile{border-radius:26px;padding:16px;display:flex;flex-direction:column;gap:12px}
.prow{display:flex;align-items:center;gap:14px}
.av72{width:72px;height:72px;border-radius:36px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:700;background:linear-gradient(145deg,#4C6EF5,#7B4BD8);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 18px rgba(60,60,160,.25)}
.pname{font-size:24px;line-height:29px;font-weight:700}
.prow small{font-size:14px;color:var(--muted)}
.profile .chips{padding:0}
.profile .chip,.pcard .chip{background:rgba(20,30,50,.06);border:0}
.chip.st{background:rgba(0,100,222,.1);color:var(--blue-ink)}
.chip.gone{opacity:.55}.chip.kid{background:rgba(201,47,102,.1);color:#9A2450}
.rings{border-radius:24px;padding:14px 8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ring{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
.ring svg{transform:rotate(-90deg)}
.ring .rbg{fill:none;stroke:rgba(20,30,50,.08);stroke-width:7}
.ring .rfg{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dasharray .6s}
.ring b{position:absolute;top:21px;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.ring small{font-size:12px;font-weight:600;color:var(--muted)}
.pcard{gap:10px;padding:14px 16px}
.ph{display:flex;justify-content:space-between;align-items:baseline}
.ph b{font-size:17px;font-weight:700}.ph small{font-size:13px;font-weight:600;color:var(--muted)}
.pcard.tap{cursor:pointer}.chev{color:#A0A6B2}
.person{display:flex;align-items:center;gap:12px}
.person b{font-size:16px;font-weight:600}.person small{font-size:13px;color:var(--muted2)}
.av40{width:40px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:17px;flex:none}
.av40.pink{background:linear-gradient(145deg,#E2547F,#C92F66)}
.muted{color:var(--muted2);font-size:13px}
.homecard small+b+small{font-size:12px}

/* one glass strip, four segments: icon, value, one footer line */
.widgets.gd{margin:16px 16px 0;padding:10px 2px 9px;border-radius:24px;gap:0}
.widgets.gd .wg{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;min-height:0;padding:0 6px;align-items:center;text-align:center;gap:4px}
.widgets.gd .wg+.wg{border-left:1px solid rgba(255,255,255,.18)}
.widgets.gd .wic{width:26px;height:26px;border-radius:8px}
.widgets.gd .wg b{font-size:17px;line-height:20px;max-width:100%}
.widgets.gd .bar{width:44px}.widgets.gd .dots{justify-content:center}
.widgets.gd .wfoot{max-width:100%}

/* stats strip: one sheet of clear glass, four centred columns (value + label) */
.widgets.glass{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:18px 16px 0;padding:12px 0 11px;border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.1));-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
  border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.1),0 12px 30px rgba(0,20,60,.18)}
.widgets.glass .wg{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;min-width:0;padding:0 4px;position:relative}
.widgets.glass .wg+.wg::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.28)}
.widgets.glass .wg b{font-family:var(--fr);font-size:19px;line-height:22px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-variant-numeric:tabular-nums;text-shadow:0 1px 6px rgba(0,20,60,.25)}
.widgets.glass .wg small{font-size:10px;line-height:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.widgets.glass .wg:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:14px}
.widgets.glass .wg b.neg,.widgets.glass .wg b.fl-dn{color:#FFC9C4}.widgets.glass .wg b.fl-up{color:#C8F7D6}
.widgets.glass .wg small{text-shadow:0 1px 4px rgba(0,20,60,.3)}

/* coloured glass badges (stats strip, end screen) */
.gly{position:relative;width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 4px rgba(0,0,0,.12),0 4px 10px rgba(0,20,60,.18)}
.gly img{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;opacity:0}
.gly.has img{opacity:1}.gly.has svg{opacity:0}
.gly-money{background:linear-gradient(145deg,#4BD488,#16A05A)}.gly-fol{background:linear-gradient(145deg,#FFA45C,#E8591B)}
.gly-mood{background:linear-gradient(145deg,#6FC3FF,#2A7BE4)}.gly-goals{background:linear-gradient(145deg,#FFD15C,#E39A12)}
.gly-job{background:linear-gradient(145deg,#8E7BFF,#5B4BD1)}.gly-kids{background:linear-gradient(145deg,#FF85B0,#D83B72)}
.gly-love{background:linear-gradient(145deg,#FF7A9E,#C92F66)}.gly-age{background:linear-gradient(145deg,#9AA7BD,#5C6878)}
.widgets.glass{padding:11px 0 10px}
.widgets.glass .wg{gap:3px}
.widgets.glass .gly{margin-bottom:2px}

/* end of life: night sky, medal, life in numbers */
.end{background:linear-gradient(rgba(6,9,22,.55),rgba(6,9,22,.88) 55%),url(img/walls/wall-4.jpg) center/cover,#05070f}
.endpage{gap:16px}
.endhero{display:flex;justify-content:center;padding-top:6px}
.endhero img{width:140px;height:140px;object-fit:contain}
.offphone{width:84px;height:84px;border-radius:26px;display:flex;align-items:center;justify-content:center;color:#C9CDD6;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 60px rgba(91,156,255,.25)}
.tcard{position:relative;padding-top:18px;gap:6px}
.medal{position:relative;width:64px;height:64px;border-radius:32px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.95);margin-bottom:4px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35)}
.medal img{position:absolute;inset:-8px;width:80px;height:80px;object-fit:contain;opacity:0}.medal.has img{opacity:1}.medal.has svg{opacity:0}
.medal-common{background:radial-gradient(circle at 35% 30%,#E8B98A,#A86A34 70%)}
.medal-rare{background:radial-gradient(circle at 35% 30%,#F2F5FA,#8D99AE 70%)}
.medal-epic{background:radial-gradient(circle at 35% 30%,#FFE58A,#D99A0B 70%);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -4px 8px rgba(0,0,0,.2),0 0 40px rgba(255,200,60,.45)}
.medal svg{fill:currentColor;stroke:none}
.estats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.estat{border-radius:18px;padding:10px 12px;display:flex;align-items:center;gap:10px;min-width:0}
.estat .gly{width:30px;height:30px}
.estat small{font-size:12px;font-weight:600;color:#9AA0AD}
.estat b{font-size:16px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.estat .col{min-width:0}
.decades{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.decades span{display:flex;flex-direction:column;align-items:center;gap:4px}
.decades i{width:26px;height:26px;border-radius:8px;background:#5A606D;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.decades i.g1{background:linear-gradient(145deg,#5BE38A,#22A559)}.decades i.g2{background:linear-gradient(145deg,#FFD66B,#E0A100)}.decades i.g3{background:linear-gradient(145deg,#FF8A80,#D93535)}
.decades small{font-size:11px;color:#9AA0AD;font-weight:600}
.moments{display:flex;flex-direction:column;gap:6px}
.moment{border-radius:16px;padding:10px 12px;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:19px;color:#E4E6EC}
.mage{flex:none;min-width:30px;height:22px;border-radius:11px;background:rgba(255,255,255,.12);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.confetti i{position:absolute;top:-10px;width:7px;height:12px;border-radius:2px;animation:fall 2.6s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(var(--r));opacity:.9}}
.endpage{position:relative}

.endbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 16px calc(18px + var(--bot-safe));background:linear-gradient(rgba(6,9,22,0),rgba(6,9,22,.9) 40%)}
.endbar .whitebtn,.endbar .primary{min-height:52px;border-radius:26px;font-size:16px}
.endpage{padding-bottom:30px!important}
.heirs{display:flex;flex-direction:column;gap:8px}
.heir{border-radius:18px;padding:10px 12px;display:flex;align-items:center;gap:12px;text-align:left;color:#fff}
.heir b{font-size:15px}.heir small{font-size:12px;color:#B3B8C3}

/* shop categories: a 3x2 grid that never scrolls sideways, pinned while the list scrolls */
.tabs.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;margin:0 -16px;padding:8px 16px}
.tabs.cats button{width:100%;min-width:0;height:36px;padding:0 6px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs.cats button{text-align:center;display:flex;align-items:center;justify-content:center}

/* start screen hero */
.hero{display:flex;flex-direction:column;gap:6px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--fr);font-size:20px;font-weight:800;letter-spacing:-.01em}
.lmark{width:18px;height:28px;border-radius:6px;background:linear-gradient(160deg,#4C8DFF,#0064DE);position:relative;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45),0 4px 10px rgba(0,40,120,.35)}
.lmark::after{content:"";position:absolute;left:4px;right:4px;top:5px;height:6px;border-radius:2px;background:#fff}
.headline{margin:6px 0 0;font-family:var(--fr);font-size:38px;line-height:40px;font-weight:800;letter-spacing:-.025em;max-width:13ch}
.demo{position:relative;display:flex;flex-direction:column;gap:6px;min-height:200px}
.dnt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:20px;color:var(--ink);animation:dnt .55s cubic-bezier(.2,1.25,.35,1) both}
.dnt:nth-child(2){opacity:.85;transform:scale(.97)}.dnt:nth-child(3){opacity:.6;transform:scale(.94)}
.dnt .ic40{width:34px;height:34px;border-radius:9px}
.dnt .top{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#454A57}.dnt .top b{color:var(--ink);font-size:13px}
.dnt .pv{font-size:14px;line-height:18px;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
@keyframes dnt{from{opacity:0;transform:translateY(-18px) scale(.96)}}
.soundbtn{top:calc(66px + var(--sb-safe))}
/* challenge result */
.crowd{border-radius:24px;padding:14px 16px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.crowd .kick{color:#9AA0AD}
.cbig{font-family:var(--fr);font-size:24px;line-height:28px;font-weight:800;color:#fff}
.crowd small{font-size:13px;color:#B3B8C3}
.hist{display:flex;align-items:flex-end;gap:3px;height:52px;margin-top:8px}
.hist i{width:12px;border-radius:3px;background:rgba(255,255,255,.22)}
.hist i.me{background:linear-gradient(#FFD66B,#E0A100);box-shadow:0 0 12px rgba(255,200,60,.6)}
.headline{font-size:34px;line-height:37px}
.demo{min-height:186px}
.primary{flex-direction:row}
.medal.has{background:none;box-shadow:none;width:96px;height:96px;margin-bottom:0}
.medal.has img{inset:0;width:96px;height:96px}
.medal-epic.has{box-shadow:none}
.gly.has{box-shadow:0 4px 10px rgba(0,20,60,.2)}

/* iPhone-style status bar: signal, wifi, battery with the percentage inside */
.sbr{display:flex;align-items:center;gap:6px}
.sbr svg{display:block;fill:currentColor;stroke:none}
.sbr .sig rect:last-child{opacity:.35}
.bt{position:relative;width:27px;height:13px;border-radius:4px;background:rgba(255,255,255,.35);overflow:visible;display:flex;align-items:center;justify-content:center;gap:0;padding:0;font-size:0}
.bt::after{content:"";position:absolute;right:-3px;top:4px;width:1.5px;height:5px;border-radius:0 1px 1px 0;background:currentColor;opacity:.4}
.bt b{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:currentColor;transition:width .5s}
.bt span{position:relative;font-size:10px;line-height:13px;font-weight:700;letter-spacing:-.02em;color:#000;mix-blend-mode:normal;font-variant-numeric:tabular-nums}
.phone[data-tone="dark"] .bt{background:rgba(0,0,0,.22)}
.phone[data-tone="dark"] .bt span{color:#fff}
.bt.mid b{background:#FFD60A}.bt.mid span{color:#000}
.bt.low b{background:#FF3B30}.bt.low span{color:#fff}
.bt i{display:none}

/* newsletter: end-screen card and sheet */
.nlcard{border-radius:24px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;color:#fff}
.nlhead{display:flex;gap:12px;align-items:flex-start}
.nlic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;background:linear-gradient(145deg,#6FC3FF,#2A7BE4);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.nlhead b{font-size:17px}.nlhead small{font-size:13px;line-height:18px;color:#C9CDD6}
.nlform{display:grid;gap:10px}
.nlform input[type=email]{width:100%;min-height:48px;border-radius:14px;padding:0 14px;font-size:16px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:inherit}
.nlform input[type=email]::placeholder{color:rgba(255,255,255,.5)}
.nlform label{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:18px;color:#C9CDD6}
.nlform label input{margin-top:2px;width:18px;height:18px;flex:none}
.nlform .err{color:#FF8A80;font-size:13px;font-weight:600;min-height:0}
.nlform a{color:#8DBBFF;font-size:13px;text-align:center}
.nlform .primary{min-height:50px}
.sheet .nlform input[type=email]{background:#fff;color:var(--ink);border-color:rgba(20,30,50,.14)}
.sheet .nlform input[type=email]::placeholder{color:#8A909D}
.sheet .nlform label{color:var(--muted)}.sheet .nlform a{color:var(--blue-ink)}.sheet .nlform .err{color:var(--bad)}
.nlbig{background:linear-gradient(145deg,#6FC3FF,#2A7BE4);color:#fff}
.nldone{padding:6px 0}.nldone p{margin:0;font-size:14px;color:inherit;opacity:.85}
.phone[data-scr="end"] .scrim{background:rgba(2,4,12,.6)}
.phone[data-scr="end"] .sheet{background:rgba(250,251,253,.97)}