/* Layout: one phone-width column, colour-block cards from the kinn design, fixed bottom tab bar */
:root{
  --bg:#F6F4EF; --card:#FFFFFF; --s2:#EFEDE7; --line:#E6E2D9; --chipb:#DCD8CE;
  --ink:#16161D; --muted:#4F4F59; --faint:#6B6B75;
  --cta-bg:#16161D; --cta-ink:#FFFFFF; --nav-on:#ECEBFF; --accent:#5759F5; --accent-ink:#4648E0;
  --lime:#CDF56A; --peach:#FFC6B4; --lav:#DCD6FF; --indigo:#5759F5; --orange:#FF6A3D; --coral:#E8573A;
  --good:#2F7D22; --warn:#B4541A; --on-color:#16161D; --shadow:rgba(22,22,29,.10);
  --font:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0F0F14; --card:#1B1B23; --s2:#26262F; --line:#2B2B35; --chipb:#363640;
  --ink:#F4F2EE; --muted:#B4B4BF; --faint:#8B8B97;
  --cta-bg:#F4F2EE; --cta-ink:#16161D; --nav-on:#2A2950; --accent:#9A9CFF; --accent-ink:#B3B5FF;
  --good:#8FD67A; --warn:#F0A36B; --shadow:rgba(0,0,0,.45); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F0F14; --card:#1B1B23; --s2:#26262F; --line:#2B2B35; --chipb:#363640;
  --ink:#F4F2EE; --muted:#B4B4BF; --faint:#8B8B97;
  --cta-bg:#F4F2EE; --cta-ink:#16161D; --nav-on:#2A2950; --accent:#9A9CFF; --accent-ink:#B3B5FF;
  --good:#8FD67A; --warn:#F0A36B; --shadow:rgba(0,0,0,.45); color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:0}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.app{max-width:440px;margin:0 auto;padding-block:20px 120px;display:flex;flex-direction:column;gap:16px}
.top{display:flex;align-items:center;justify-content:space-between}
.wordmark{font-size:24px;font-weight:800;letter-spacing:-.05em}
.avatar{width:40px;height:40px;border-radius:12px;background:var(--lav);color:var(--on-color);font-weight:800;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);box-shadow:2px 3px 0 var(--ink)}
h1{font-size:34px;line-height:1.02;letter-spacing:-.045em;font-weight:800;margin:6px 0 0;text-wrap:balance}
h2{font-size:21px;letter-spacing:-.03em;font-weight:700;margin:0;text-wrap:balance}
.sub{color:var(--muted);font-weight:500;font-size:14px;margin:0}
.label{color:var(--muted);font-weight:700;font-size:12.5px}
.card{background:var(--card);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px}
.block{border-radius:26px;padding:20px;display:flex;flex-direction:column;gap:8px;color:var(--on-color)}
.block.lime{background:var(--lime)} .block.peach{background:var(--peach)} .block.lav{background:var(--lav)}
.block.indigo{background:var(--indigo);color:#fff}
.big{font-size:64px;font-weight:800;letter-spacing:-.06em;line-height:.9}
.num{font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cta{display:flex;align-items:center;justify-content:space-between;gap:10px;height:48px;padding:0 16px;border-radius:14px;background:var(--cta-bg);color:var(--cta-ink);font-weight:700;font-size:14px;width:100%}
.block .cta{background:#16161D;color:#fff}
.cta.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--chipb);justify-content:center}
.cta.small{height:40px;width:auto;font-size:13px}
.chip{padding:8px 13px;border-radius:12px;border:1.5px solid var(--chipb);background:var(--card);font-weight:700;font-size:13px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.bar{height:8px;border-radius:4px;background:var(--s2);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:4px;background:var(--ink)}
.tip{background:var(--peach);color:var(--on-color);border-radius:18px;padding:14px 16px;font-weight:600;font-size:14px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--s2)}
.seg button{padding:9px;border-radius:11px;font-weight:800;font-size:13px;color:var(--muted)}
.seg button[aria-selected="true"]{background:var(--card);color:var(--ink)}
.list{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .grow{flex:1;min-width:0}
.item .name{font-weight:700;font-size:14px}
.item .meta{color:var(--muted);font-size:12.5px;font-weight:600}
.x{width:30px;height:30px;border-radius:9px;background:var(--s2);color:var(--muted);font-weight:800;flex-shrink:0}
.input{width:100%;padding:12px 14px;border-radius:14px;border:1.5px solid var(--chipb);background:var(--card);font-size:15px}
.stepper{display:flex;align-items:center;justify-content:space-between;padding:5px;border-radius:14px;background:var(--s2);flex:1}
.stepper button{width:34px;height:34px;border-radius:10px;background:var(--card);font-size:18px;font-weight:800}
.stepper span{font-weight:800;font-size:14px}
.banner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--nav-on);color:var(--accent-ink);font-size:13px;font-weight:700}
.banner button{margin-left:auto;text-decoration:underline;font-weight:800}
.tabbar{position:fixed;left:0;right:0;bottom:0;padding:0 max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));pointer-events:none;z-index:20}
.tabbar nav{pointer-events:auto;max-width:440px;margin:0 auto;height:64px;border-radius:24px;background:var(--card);box-shadow:0 10px 28px var(--shadow);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center}
.tab{justify-self:center;width:52px;height:44px;border-radius:14px;color:var(--faint);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;font-weight:700}
.tab[aria-current="page"]{background:var(--nav-on);color:var(--accent)}
.tab svg{width:21px;height:21px}
.fab{justify-self:center;width:52px;height:52px;margin-top:-26px;border-radius:16px;background:#16161D;color:#fff;box-shadow:0 5px 0 var(--orange),0 10px 20px rgba(22,22,29,.25);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:600;line-height:1}
.sheet-back{position:fixed;inset:0;background:rgba(22,22,29,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:480px;max-height:88%;overflow:auto;background:var(--bg);border-radius:26px 26px 0 0;padding:20px max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));display:flex;flex-direction:column;gap:14px}
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top, 0px));transform:translateX(-50%);background:var(--cta-bg);color:var(--cta-ink);padding:11px 16px;border-radius:14px;font-weight:700;font-size:13px;z-index:80;max-width:86%;text-align:center;box-shadow:0 10px 24px var(--shadow)}
.chart text{fill:var(--faint);font-size:10px;font-family:var(--font)}
.small-note{color:var(--faint);font-size:12px;font-weight:600}
.danger{color:var(--coral)}
@media (prefers-reduced-motion: no-preference){.card,.block{transition:background .25s}}

/* v2: auth, kin, chat */
.stack{display:flex;flex-direction:column;gap:10px}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:var(--accent);font-weight:700}
.authwrap{display:flex;flex-direction:column;gap:18px;padding-top:28px}
.authhero{display:flex;flex-direction:column;gap:10px}
.authswitch{font-size:14px;color:var(--muted);font-weight:600;text-align:center}
.linkbtn{color:var(--accent);font-weight:800;font-size:14px;text-decoration:underline;text-underline-offset:3px;align-self:center}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--ink)}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);flex-shrink:0}
.formmsg{margin:0;color:var(--coral);font-weight:700;font-size:13.5px}
.formmsg:empty{display:none}
.formmsg.ok{color:var(--good)}
textarea.input{resize:vertical;min-height:44px;line-height:1.4}
.cta:disabled{opacity:.55}
.syncpill{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--s2);padding:5px 9px;border-radius:999px}
.av{position:relative;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#16161D;font-weight:800;flex-shrink:0}
.av.grp{border-radius:14px;font-size:17px}
.av .on{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#35C25A;box-shadow:0 0 0 2.5px var(--card)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);vertical-align:middle}
.tab{position:relative}
.badge{position:absolute;top:2px;right:6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--orange);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.kinstrip{text-align:left;align-items:flex-start}
.fbcard{text-align:left;align-items:flex-start;gap:4px;border:1.5px dashed var(--chipb);background:transparent}
.quote{background:var(--s2);border-radius:14px;padding:10px 12px;font-size:14px;font-weight:600}
.iconbtn{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0}
.iconbtn:hover{background:var(--s2)}
body.noscroll{overflow:hidden}
.chatwrap{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;height:100dvh}
.chathead{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)) max(12px, env(safe-area-inset-right,0px)) 10px max(12px, env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--card)}
.chathead .name{font-weight:800}
.chathead .meta{color:var(--muted);font-size:12.5px;font-weight:600}
.msgs{flex:1;overflow-y:auto;padding:14px max(16px, env(safe-area-inset-right,0px)) 14px max(16px, env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:4px;max-width:640px;width:100%;margin:0 auto}
.daysep{align-self:center;font-size:11.5px;font-weight:700;color:var(--faint);margin:10px 0 4px}
.msgrow{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:82%}
.msgrow.mine{align-self:flex-end;align-items:flex-end}
.from{font-size:11.5px;font-weight:800;color:var(--muted);margin:6px 0 0 10px}
.bub{background:var(--card);color:var(--ink);padding:9px 12px 7px;border-radius:18px 18px 18px 6px;font-size:15px;font-weight:500;text-align:left;white-space:pre-wrap;word-break:break-word;line-height:1.38}
.bub.mine{background:var(--cta-bg);color:var(--cta-ink);border-radius:18px 18px 6px 18px}
.bub.hidden{color:var(--faint);font-style:italic;background:transparent;border:1px dashed var(--chipb)}
.bub .t{display:block;font-size:10.5px;opacity:.6;margin-top:2px;text-align:right}
.msgacts{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px}
.composer{display:flex;gap:8px;align-items:flex-end;padding:10px max(12px, env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px, env(safe-area-inset-left,0px));border-top:1px solid var(--line);background:var(--card)}
.composer textarea{flex:1;resize:none;border:1.5px solid var(--chipb);background:var(--bg);border-radius:20px;padding:10px 14px;font-size:15px;line-height:1.35;max-height:120px}
.sendbtn{width:44px;height:44px;border-radius:50%;background:#16161D;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 0 var(--orange)}
[hidden]{display:none!important}
/* v2.2: feed, plans, starter, nearby, dashboard */
.feeditem{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.feeditem:last-child{border-bottom:0}
.feedtext{font-size:14.5px;line-height:1.4}
.reacts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.react{padding:5px 10px;border-radius:999px;background:var(--s2);font-size:13px;font-weight:700;color:var(--ink)}
.react.on{background:var(--nav-on);box-shadow:inset 0 0 0 1.5px var(--accent)}
.plans{padding:10px max(12px, env(safe-area-inset-right,0px)) 10px max(12px, env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line);max-height:36vh;overflow:auto}
.plan{display:flex;gap:10px;align-items:center;background:var(--card);border-radius:16px;padding:10px 12px}
.plan .name{font-weight:800;font-size:14.5px}
.plan .meta,.goalbar .meta{color:var(--muted);font-size:12.5px;font-weight:600}
.goalbar{background:var(--card);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--chipb);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;color:#fff}
.tick.ok{background:var(--good);border-color:var(--good)}
.bullets{margin:0;padding-left:18px;color:var(--muted);font-size:14px;font-weight:600;display:flex;flex-direction:column;gap:6px}
.switch{width:46px;height:28px;border-radius:999px;background:var(--chipb);position:relative;flex-shrink:0;transition:background .2s}
.switch span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s}
.switch[aria-checked="true"]{background:var(--good)}
.switch[aria-checked="true"] span{left:21px}
.tiles .tile{padding:12px;gap:4px}
.tilev{font-size:22px;font-weight:800;letter-spacing:-.03em}
.formmsg.ok{color:var(--good)}
@media (prefers-reduced-motion: reduce){.switch,.switch span{transition:none}}
/* v2.3: quick food, workouts, rest timer, calendar, water/sleep, avatars, welcome, skeletons */
.qchip{background:var(--s2);border-color:transparent}
.toastbtn{margin-left:8px;text-decoration:underline;font-weight:800;color:inherit}
.restpill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:8px;background:var(--cta-bg);color:var(--cta-ink);padding:8px 10px 8px 16px;border-radius:999px;box-shadow:0 10px 24px var(--shadow);font-weight:700;font-size:14px;white-space:nowrap}
.restpill b{font-size:18px;min-width:44px}
.restpill button{padding:6px 10px;border-radius:999px;background:rgba(127,127,127,.25);font-weight:800;font-size:12.5px;color:inherit}
.restpill.done{background:var(--good);color:#fff}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.calh{text-align:center;font-size:11.5px;font-weight:700;color:var(--faint)}
.cal{aspect-ratio:1;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:var(--muted);background:var(--s2)}
.cal.lg{background:var(--lav);color:#16161D}
.cal.mv{background:var(--indigo);color:#fff}
.cal.today{box-shadow:inset 0 0 0 2px var(--ink)}
.cal.fut{opacity:.35}
.cal.legend{display:inline-block;width:12px;height:12px;aspect-ratio:auto;border-radius:4px;vertical-align:-1px;margin-right:4px}
.stepbtn{height:38px;min-width:38px;border-radius:12px;background:var(--s2);font-weight:800;font-size:15px;color:var(--ink)}
.stepbtn.wide{flex:1;font-size:13px}
.avgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.avopt{aspect-ratio:1;border-radius:14px;background:var(--s2);font-size:24px}
.avopt.on{box-shadow:inset 0 0 0 2.5px var(--accent);background:var(--nav-on)}
.avcol{width:36px;height:36px;border-radius:50%;border:2px solid var(--line)}
.avcol.on{box-shadow:0 0 0 3px var(--accent)}
.installb{background:var(--s2);color:var(--ink)}
.installb span{flex:1}
.installb button{margin-left:0}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:15px;font-weight:600}
.welcome{gap:20px;padding-top:12px}
.wl-card{min-height:360px;justify-content:flex-end;padding:24px}
.wl-ill{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:auto}
.wl-ill .chip{background:#fff;color:#16161D;border-color:transparent}
.wl-ill .chip[aria-pressed="true"]{background:#16161D;color:#fff}
.wl-av{width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:28px;border:3px solid rgba(255,255,255,.7)}
.wl-big{font-size:72px;line-height:1}
.dots{display:flex;gap:8px;justify-content:center}
.dots span{width:8px;height:8px;border-radius:50%;background:var(--chipb)}
.dots span.on{width:22px;border-radius:4px;background:var(--ink)}
.skel{display:block;border-radius:10px;background:linear-gradient(90deg,var(--s2) 25%,var(--card) 50%,var(--s2) 75%);background-size:200% 100%;animation:sk 1.3s ease-in-out infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:95}
@media (prefers-reduced-motion: reduce){.skel{animation:none}}
/* v2.3.1: progress layout, calorie range */
.profilecard{gap:14px}
.avbtn{position:relative;border-radius:50%;flex-shrink:0}
.avedit{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:var(--cta-bg);color:var(--cta-ink);font-size:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2.5px var(--card)}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--nav-on);color:var(--accent-ink);font-size:12.5px;font-weight:800}
.pacechip{background:rgba(255,255,255,.65);border-color:transparent;color:#16161D}
.pacechip[aria-pressed="true"]{background:#16161D;color:#fff}
.planrows{display:flex;flex-direction:column;margin-top:8px;border-top:1px solid rgba(22,22,29,.12)}
.planrows>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(22,22,29,.12);font-size:14px;font-weight:600}
.planrows b{font-weight:800;text-align:right}
.kbar{position:relative;height:10px;border-radius:5px;background:var(--s2);overflow:hidden}
.krange{position:absolute;top:0;bottom:0;background:rgba(53,194,90,.28)}
.kfill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--ink)}
.kfill.over{background:var(--coral)}
.howcard summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.howcard summary::-webkit-details-marker{display:none}
.howcard summary::after{content:'＋';font-weight:800;color:var(--muted)}
.howcard[open] summary::after{content:'−'}
/* v2.4: achievements */
.winicon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.wincard{border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:8px;color:#16161D;aspect-ratio:4/5;justify-content:flex-end;max-height:52vh}
/* v2.5: social-first home */
.greet{display:flex;flex-direction:column;gap:4px}
.stories{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 8px;margin:0 -2px;scrollbar-width:none;scroll-snap-type:x proximity}
.stories::-webkit-scrollbar{display:none}
.story{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;width:70px;scroll-snap-align:start}
.sring{position:relative;padding:3px;border-radius:50%;background:var(--line);display:inline-flex}
.sring.on{background:conic-gradient(#35C25A,#CDF56A,#35C25A)}
.sring.me{background:var(--chipb)}
.sring .av{box-shadow:0 0 0 3px var(--bg)}
.sring.add{width:64px;height:64px;align-items:center;justify-content:center;background:transparent;border:2px dashed var(--chipb)}
.addcircle{font-size:26px;font-weight:700;color:var(--muted)}
.splus{position:absolute;right:0;bottom:0;width:22px;height:22px;border-radius:50%;background:var(--cta-bg);color:var(--cta-ink);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2.5px var(--bg)}
.sname{font-size:12.5px;font-weight:800;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sstat{font-size:11px;font-weight:600;color:var(--faint);white-space:nowrap}
.sstat.good{color:var(--good)}
.daystrip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.daystrip button{background:var(--card);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:2px;text-align:left}
.daystrip b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.daystrip .meta{font-size:11.5px;font-weight:600;color:var(--muted)}
.startermini{text-align:left;align-items:flex-start;gap:6px}
.nearbymini{flex-direction:row;align-items:center;gap:12px}
.emptyfeed{align-items:center;text-align:center;gap:8px;padding:24px 18px}
/* v2.5.1: reactions and views */
.seenline{display:block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--accent);text-align:left}
.wintag{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:999px;background:#B8E1FF;color:#16161D;font-size:11.5px;font-weight:800;vertical-align:1px}
.winitem{background:linear-gradient(90deg,rgba(184,225,255,.25),transparent 70%);border-radius:14px;padding-left:6px;padding-right:6px}
.rxbanner{flex-direction:row;align-items:center;gap:12px;border:1.5px solid var(--accent)}
/* v2.6: stories */
.story{position:relative}
.story .splus{position:absolute;top:44px;left:50px;z-index:2}
.sring.story{background:conic-gradient(from 200deg,#FF6A3D,#FFB347,#FF4F8B,#FF6A3D)}
.sring.storyseen{background:var(--chipb)}
.sring.mine{background:conic-gradient(from 200deg,#5759F5,#9A9CFF,#5759F5)}
.sstat.hot{color:#FF6A3D;font-weight:800}
.storywrap{position:fixed;inset:0;z-index:55;background:#0B0B10;color:#fff;display:flex;flex-direction:column;padding:calc(10px + env(safe-area-inset-top,0px)) max(12px, env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(12px, env(safe-area-inset-left,0px));max-width:520px;margin:0 auto}
.sbars{display:flex;gap:4px;margin-bottom:10px}
.sbars span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.sbars span i{display:block;height:100%;width:0;background:#fff}
.sbars span.done i{width:100%}
.sbars span.cur i{animation:sfill linear forwards}
@keyframes sfill{from{width:0}to{width:100%}}
.shead{display:flex;align-items:center;gap:10px}
.shead .name{font-weight:800}
.shead .meta{font-size:12.5px;color:rgba(255,255,255,.7);font-weight:600}
.shead .iconbtn{color:#fff}
.sbody{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:14px 0}
.szone{position:absolute;top:0;bottom:0;z-index:2}
.szone.left{left:0;width:32%}
.szone.right{right:0;width:68%}
.scard{width:100%;max-width:420px;aspect-ratio:4/5;max-height:100%;border-radius:28px;background:var(--sbg);color:#16161D;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.sem{font-size:72px;line-height:1;margin-bottom:auto}
.stitle{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.sstat2{font-size:54px;font-weight:800;letter-spacing:-.04em;line-height:1}
.ssub{font-size:17px;font-weight:700}
.snote{font-size:16px;font-weight:600;opacity:.75}
.sago{font-size:13px;font-weight:700;opacity:.65;margin-top:6px}
.sfoot{display:flex;flex-direction:column;gap:10px}
.react.big{font-size:22px;padding:8px 14px;background:rgba(255,255,255,.14)}
.react.big.on{background:rgba(255,255,255,.35);box-shadow:none}
@media (prefers-reduced-motion: reduce){.sbars span.cur i{animation:none;width:100%}}
.sring{padding:4px}
.sring .av{box-shadow:0 0 0 3px var(--bg)}
.sring.add{padding:0}
/* v2.7: notifications, favourites, compact Kin, couples, icon-only bar */
.bell{position:relative;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink);background:var(--card)}
.bell .badge{top:-3px;right:-3px}
.tabbar nav{height:56px;border-radius:20px}
.tab{width:48px;height:40px;gap:0}
.tab svg{width:23px;height:23px}
.tab .badge{top:0;right:4px}
.fab{width:48px;height:48px;margin-top:-20px}
.app{padding-bottom:100px}
.notif.unread{background:var(--nav-on);border-radius:14px;padding-left:8px;padding-right:8px}
.shoutbubble{margin:6px 0 2px;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--peach);color:#16161D;font-weight:700;font-size:14px;display:inline-block}
.favempty{flex-direction:row;align-items:center;gap:12px;font-size:22px}
.favrow{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:none;scroll-snap-type:x proximity}
.favrow::-webkit-scrollbar{display:none}
.favcard{flex:0 0 150px;scroll-snap-align:start;background:var(--card);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:7px;text-align:left}
.favcard .fname{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.favcard .meta{font-size:11.5px;font-weight:600;color:var(--muted)}
.fstat b{font-size:18px;font-weight:800;letter-spacing:-.02em;margin-right:3px}
.minirow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini{background:var(--card);border-radius:16px;padding:10px 12px;display:flex;align-items:center;gap:10px;text-align:left;min-width:0}
.mini .grow{min-width:0}
.mini b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .meta{display:block;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-ic{font-size:20px}
.couplecard{flex-direction:row;align-items:center;gap:12px;background:linear-gradient(90deg,rgba(255,179,217,.35),var(--card) 70%)}
section.couplecard{flex-direction:column;align-items:stretch}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ccol{display:flex;flex-direction:column;gap:10px;min-width:0}
.ccol+.ccol{border-left:1px solid var(--line);padding-left:14px}
.cstat{display:flex;flex-direction:column;gap:2px}
.cstat b{font-size:17px;font-weight:800}
.cstat .meta{font-size:11.5px;color:var(--muted);font-weight:600}
.cweek{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.cweek>div{display:flex;flex-direction:column;align-items:center;gap:5px}
.cdot{width:22px;height:22px;border-radius:50%;background:var(--s2);display:inline-block}
.cdot.on{background:var(--indigo)}
.cdot.b.on{background:#FF6FA8}
.cdot.legend{width:10px;height:10px;vertical-align:-1px}

/* v2.8 */
.fritem{padding:8px 0}
.frmin{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.frmin b{font-size:16px;font-weight:800;line-height:1}
.frmin>span:not(.bar){font-size:11px;font-weight:700;color:var(--muted)}
.codestrip{display:flex;align-items:center;gap:8px;background:var(--lav);color:#16161D;border-radius:18px;padding:10px 12px 10px 16px}
.codestrip .grow span{display:block;font-size:12px;font-weight:700;opacity:.7}
.codestrip b{display:block;font-size:22px;font-weight:800;letter-spacing:.06em;line-height:1.1}
.codestrip .chip{background:#fff;color:#16161D;border-color:transparent}
.codestrip .cta{background:#16161D;color:#fff}
.pips{display:inline-flex;gap:4px;flex-shrink:0;margin-right:6px}
.pips i{width:8px;height:8px;border-radius:50%;background:var(--chipb)}
.pips i.on{background:var(--good)}
.pstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pstats div{background:var(--s2);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.pstats b{font-size:19px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.pstats span{font-size:11.5px;font-weight:700;color:var(--muted)}
.pchart{display:block;overflow:visible}
.pchart text{fill:var(--faint);font-size:10px;font-weight:700;font-family:var(--font)}
.pchart text.plbl{fill:#fff;font-size:10.5px;font-weight:800}
.pempty{min-height:130px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:14px;background:var(--s2);color:var(--muted);font-size:13px;font-weight:600;padding:16px}
.pdays{display:grid;gap:3px}
.pdays span{height:22px;border-radius:5px;background:var(--s2)}
.pdays span.mv{background:var(--accent)}
.pdays span.lg{background:var(--lav)}
.pdays span.today{box-shadow:0 0 0 2px var(--ink)}
.pkey{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--s2);vertical-align:-1px;border:1px solid var(--line)}
.pkey.mv{background:var(--accent);border-color:transparent}.pkey.lg{background:var(--lav);border-color:transparent}

/* v2.8.1: centred title, + at top left, splash */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.top .wordmark{grid-column:2;text-align:center}
.top>:first-child{justify-self:start}
.top .topright,.top>:last-child{justify-self:end}
.topplus{width:40px;height:40px;border-radius:12px;background:#16161D;color:#fff;font-size:26px;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--orange)}
.topplus:active{transform:translateY(2px);box-shadow:0 2px 0 var(--orange)}
#splash{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .4s ease,transform .4s ease}
#splash.out{opacity:0;transform:scale(1.04);pointer-events:none}
#splash .sw{display:flex;font-size:64px;font-weight:800;letter-spacing:-.06em;color:var(--ink);line-height:1}
#splash .sw span{display:inline-block;animation:spl-up .55s cubic-bezier(.2,.9,.3,1.3) both}
#splash .sw span:nth-child(2){animation-delay:.08s}#splash .sw span:nth-child(3){animation-delay:.16s}#splash .sw span:nth-child(4){animation-delay:.24s}
#splash svg{width:180px;height:44px;overflow:visible}
#splash .beat{fill:none;stroke:var(--indigo);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260;animation:spl-beat 1.4s ease-in-out .35s infinite}
#splash .dots{display:flex;gap:8px}
#splash .dots i{width:10px;height:10px;border-radius:50%;animation:spl-dot 1s ease-in-out infinite}
#splash .dots i:nth-child(1){background:var(--peach)}#splash .dots i:nth-child(2){background:var(--lime);animation-delay:.15s}#splash .dots i:nth-child(3){background:var(--lav);animation-delay:.3s}
#splash p{font-size:13px;font-weight:700;color:var(--muted);margin:0}
@keyframes spl-up{from{opacity:0;transform:translateY(28px) scale(.9)}to{opacity:1;transform:none}}
@keyframes spl-beat{0%{stroke-dashoffset:260}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-260}}
@keyframes spl-dot{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){#splash *{animation:none!important}#splash .beat{stroke-dashoffset:0}}

/* v2.9 clean-up
   Colour roles: indigo = brand, navigation, links and your progress; lime = movement and done;
   lavender = gym and strength; peach = food; yellow = body (weight, water, sleep);
   blue = social (achievements, shout-outs, invites); pink = couples; red = errors and delete. */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.top.home{display:grid;grid-template-columns:1fr auto 1fr}
.top.home .wordmark{font-size:26px}
.ptitle{font-size:28px;margin:0;line-height:1.1;letter-spacing:-.04em}
.bell{width:40px;height:40px;border-radius:12px;background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;position:relative}
.bell svg{width:22px;height:22px}
.bell[aria-current="page"]{background:var(--nav-on);color:var(--accent)}
.tabbar nav{height:68px}
.tab{width:62px;height:54px;gap:3px;color:var(--muted)}
.tab svg{width:22px;height:22px}
.tl{font-size:11px;font-weight:700;line-height:1;letter-spacing:.01em}
.tab[aria-current="page"]{background:var(--nav-on);color:var(--accent)}
.tab[aria-current="page"] .tl{font-weight:800}
.tab .badge{top:0;right:8px}
.fabwrap{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink)}
.fabwrap .fab{width:48px;height:48px;margin-top:-22px;font-size:28px}
.topplus{display:none}
/* readable text */
.small-note{font-size:13px;color:var(--muted)}
.sub{font-size:14.5px}
.label{font-size:13px}
.item .name{font-size:15px}
.item .meta{font-size:13px}
.feedtext{font-size:15px}
.seenline{font-size:13px}
.daystrip .meta,.mini .meta,.favcard .meta,.cstat .meta{font-size:12px}
.sstat{font-size:11.5px;color:var(--muted)}
.chart text,.pchart text{font-size:11px}
.sechead{font-size:19px;margin:8px 0 -4px}
/* home */
.slimrow{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:16px;background:var(--card);font-size:13.5px;font-weight:700;text-align:left}
.feedcard{gap:8px}
.winitem{background:#E8F5FF;border-radius:16px;padding:12px;margin:6px 0;border-bottom:0}
.winitem .meta{color:#4F4F59}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .winitem{background:#1E2A36}:root:not([data-theme="light"]) .winitem .meta{color:var(--muted)}}
:root[data-theme="dark"] .winitem{background:#1E2A36}:root[data-theme="dark"] .winitem .meta{color:var(--muted)}
/* profile */
.plancard .planbig{display:flex;flex-direction:column;gap:2px}
.plancard .planbig .num{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.plancard .planbig small{font-size:16px;font-weight:700;color:var(--muted)}
.plancard .planrows{display:flex;flex-direction:column}
.plancard .planrows div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.plancard .planrows span{color:var(--muted);font-weight:600}
/* people */
.bullets.small{font-size:13.5px;color:var(--muted);margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.bullets.small b{color:var(--ink)}
.codestrip{background:#B8E1FF}
/* notifications empty */
.emptybig{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:52vh;padding:24px}
.emptyic{width:84px;height:84px;border-radius:26px;background:var(--nav-on);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.emptyic svg{width:44px;height:44px}
/* chats */
.dot.new{width:10px;height:10px;background:var(--accent)}
/* sheets */
.grab{display:block;width:42px;height:5px;border-radius:3px;background:var(--chipb);align-self:center;margin:-8px 0 -2px}
.sheetclose{height:46px;width:100%;border-radius:14px;font-size:14.5px;font-weight:700;color:var(--muted)}
.qtile{padding:18px;min-height:78px;border-radius:20px;justify-content:center}
.plancard .planrows{border-top:0;margin-top:0}.plancard .planrows>div{border-bottom:0}

/* v2.9.1 header: avatar left, title, bell right - both 40px, same distance from the edges */
.top,.top.home{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:12px;min-height:44px}
.top .ptitle{justify-self:start;grid-column:2}
.top.home .wordmark{justify-self:center;grid-column:2}
.meav{width:40px;height:40px;border-radius:50%;background:var(--lav);color:#16161D;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--chipb)}
.meav[aria-current="page"]{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--accent)}
.top .bell{width:40px;height:40px;background:transparent;border-radius:50%;justify-self:end}
.top .bell svg{width:25px;height:25px}
.top .bell[aria-current="page"]{background:var(--nav-on)}
.top .bell .badge{top:1px;right:1px}
.top .bell{margin-right:-7px}.top .bell svg{width:27px;height:27px}

/* v2.10 birthdays */
.block.bday{background:linear-gradient(135deg,#FFC6B4,#FFD66B 55%,#CDF56A);color:#16161D;align-items:flex-start;gap:6px}
.bdayemoji{font-size:40px;line-height:1}
.bdayfriend{background:#FFF1DA;border:1.5px solid #FFD66B}
.bdayfriend .meta{color:#4F4F59}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bdayfriend{background:#2B2416;border-color:#6B5A23}:root:not([data-theme="light"]) .bdayfriend .meta{color:var(--muted)}}
:root[data-theme="dark"] .bdayfriend{background:#2B2416;border-color:#6B5A23}:root[data-theme="dark"] .bdayfriend .meta{color:var(--muted)}
.bgcard .bgtop{display:flex;align-items:flex-end;gap:10px}
.bgdays{font-size:44px;font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--accent)}

/* ---------- v3.0 fixes ---------- */
/* Long words (no spaces) wrap instead of pushing the page sideways */
body{overflow-wrap:anywhere}
.item .grow,.feedtext,.name,.meta,.chip,.sub,.small-note,.stitle,.tip,.quote{min-width:0;overflow-wrap:anywhere}
.codestrip{flex-wrap:wrap}
.codestrip .grow{min-width:120px}
/* Page titles never push the header wider than the screen (large text sizes) */
.top{gap:10px;min-width:0}
.ptitle{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
/* Chat is a phone-width column on tablets and laptops too */
.chatwrap{max-width:560px;margin:0 auto;box-shadow:0 0 0 100vmax var(--bg)}
/* Pop-up messages sit above the bottom bar, never on top of the page title */
.toast{top:auto;bottom:calc(92px + env(safe-area-inset-bottom, 0px))}
/* Contrast (WCAG AA) */
.tab[aria-current="page"]{color:var(--accent-ink)}
:root:not([data-theme="dark"]) .sstat.hot{color:#B93C12}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sstat.hot{color:#FF8A63}}
.seg .num{opacity:.85!important}
/* Remove buttons on today's sets */
.setchip{display:inline-flex;align-items:center;gap:6px;padding-right:6px}
.setx{width:22px;height:22px;border-radius:7px;background:var(--s2);color:var(--muted);font-weight:800;line-height:1}
/* Full-screen cover while deleting the account or logging out */
.blocker{position:fixed;inset:0;z-index:200;background:rgba(15,15,20,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.blockcard{background:var(--card);color:var(--ink);border-radius:20px;padding:22px 24px;display:flex;align-items:center;gap:14px;max-width:340px;box-shadow:0 16px 40px var(--shadow)}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin 0.9s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation:none}}
.flash{outline:3px solid var(--accent);outline-offset:2px;transition:outline-color .3s}
.missing .item{padding:8px 0}
/* Future days in the calendar: readable but clearly not reached yet */
.cal.fut{opacity:1;color:var(--faint);background:transparent;border:1px dashed var(--chipb)}
/* Red "danger" text dark enough to read (WCAG AA) */
:root:not([data-theme="dark"]) .chip.danger{color:#C2341A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip.danger{color:#FF8A6E}}
:root[data-theme="dark"] .chip.danger{color:#FF8A6E}