/* Dinacharya v2 styles. Colours come from a few tokens; --accent-base is set from the user's favourite colour. */
:root{
  --accent-base:#1F8C82;
  --accent:var(--accent-base);
  --bg:color-mix(in srgb,var(--accent-base) 9%,#F5F8F8);
  --surface:#FFFFFF; --surface-2:color-mix(in srgb,var(--accent-base) 4%,#F3F6F6);
  --ink:#1D2A31; --muted:#56676E; --line:color-mix(in srgb,var(--accent-base) 12%,#D5DEDD);
  --lotus:#E2708F; --saffron:#E3961F; --lilac:#8F82E0; --sky:#3C9FDB; --leaf:#3FA874;
  --on-accent:#FFFFFF; --shadow:rgba(29,42,49,.16);
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --sanskrit:"Tiro Devanagari Sanskrit","Noto Serif Devanagari","Kohinoor Devanagari","Devanagari Sangam MN","Nirmala UI",serif;
  --scale:1;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --accent:color-mix(in srgb,var(--accent-base) 72%,#fff);
    --bg:color-mix(in srgb,var(--accent-base) 10%,#0C1416); --surface:#142228; --surface-2:#1A2B31;
    --ink:#E6EFED; --muted:#9AADB2; --line:#283C43;
    --lotus:#F08FA9; --saffron:#F2AE45; --lilac:#A99DF0; --sky:#5DB5EA; --leaf:#5CC28F;
    --shadow:rgba(0,0,0,.5); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --accent:color-mix(in srgb,var(--accent-base) 72%,#fff);
  --bg:color-mix(in srgb,var(--accent-base) 10%,#0C1416); --surface:#142228; --surface-2:#1A2B31;
  --ink:#E6EFED; --muted:#9AADB2; --line:#283C43;
  --lotus:#F08FA9; --saffron:#F2AE45; --lilac:#A99DF0; --sky:#5DB5EA; --leaf:#5CC28F;
  --shadow:rgba(0,0,0,.5); color-scheme:dark;
}
:root[data-contrast="high"]{ --muted:var(--ink); --line:color-mix(in srgb,var(--ink) 45%,transparent) }

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:16px} /* stops iPhone zooming into fields */
button{cursor:pointer}
:focus-visible{outline:3px solid var(--lilac);outline-offset:2px}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0;letter-spacing:-.01em}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:14px}
[hidden]{display:none!important}

/* shell */
.app{display:flex;min-height:100vh}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.nav .brand,.nav .wide{display:none}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;padding:6px 2px;border-radius:14px;color:var(--muted);font-size:12px;font-weight:600}
.nav button svg{width:24px;height:24px}
.nav button[aria-current="page"]{color:var(--accent)}
main{flex:1;min-width:0;padding:0 16px 120px}
.wrap{max-width:740px;margin:0 auto;zoom:var(--scale)}
.top{display:flex;align-items:center;gap:10px;padding:14px 0 10px}
.top .logo{width:38px;height:38px;flex:none}
.top .title{flex:1;min-width:0}
.top .title h1{font-size:22px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .title p{font-size:13px;color:var(--muted)}
.iconbtn{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;position:relative;flex:none;padding:0}
.iconbtn svg{width:21px;height:21px}
.iconbtn .count{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--lotus);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
@media (min-width:900px){
  .nav{position:sticky;top:0;bottom:auto;height:100vh;width:236px;flex-direction:column;justify-content:flex-start;gap:2px;border-top:0;border-right:1px solid var(--line);padding:22px 14px;overflow-y:auto}
  .nav .brand{display:flex;align-items:center;gap:10px;padding:0 10px 20px}
  .nav .brand svg{width:40px;height:40px}
  .nav .brand b{font-family:var(--display);font-size:21px;font-weight:800}
  .nav .wide{display:flex}
  .nav button{flex:none;flex-direction:row;gap:12px;padding:10px 14px;font-size:15px;justify-content:flex-start}
  .nav button[aria-current="page"]{background:color-mix(in srgb,var(--accent) 14%,transparent)}
  .nav .narrow{display:none}
  .top .logo{display:none}
  main{padding:8px 32px 60px}
}
.view{display:none}
.view.on{display:block;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.vhead{display:flex;align-items:center;gap:10px;margin:4px 0 14px}
.vhead h2{font-size:26px;font-weight:800;flex:1}

/* common */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:18px}
.section{margin-top:22px}
.section > h2,.h2{font-size:19px;font-weight:700;margin-bottom:10px}
.row{display:flex;align-items:center;gap:10px}
.row.wrapr{flex-wrap:wrap}
.spacer{flex:1}
.btn{border-radius:999px;padding:11px 18px;font-weight:700;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;line-height:1.2}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.btn.warm{background:var(--saffron);color:#2a1a00;border-color:transparent}
.btn.ghost{background:transparent}
.btn.danger{color:var(--lotus)}
.btn.small{padding:7px 13px;font-size:14px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 13px;font-size:14px;font-weight:600}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field > span{font-size:14px;font-weight:600;color:var(--muted)}
.input{width:100%;border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:11px 13px;min-height:46px}
textarea.input{min-height:84px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bar{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.bar > i{display:block;height:100%;border-radius:99px;background:var(--c,var(--accent));transition:width .4s ease}
.banner{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:20px;background:color-mix(in srgb,var(--c,var(--lilac)) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--c,var(--lilac)) 35%,var(--line));margin-bottom:12px}
.banner p{flex:1;font-size:14px}
.banner .em{font-size:24px}
.empty{text-align:center;padding:26px 12px;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-family:var(--display);font-size:18px;margin-bottom:4px}
.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px 14px}
.item .em{font-size:22px;flex:none}
.item .info{flex:1;min-width:0;text-align:left;background:none;border:0;padding:0}
.item .tt{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .meta{font-size:13px;color:var(--muted);display:block}

/* today */
.quick{display:flex;gap:8px;margin-bottom:10px}
.quick .input{flex:1}
.parsed{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:var(--surface);border:1px dashed var(--accent);margin-bottom:10px;font-size:14px}
.parsed span{flex:1}
.days{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none;scroll-snap-type:x proximity}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:56px;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:8px 0 9px;text-align:center;scroll-snap-align:start}
.day small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.day b{display:block;font-family:var(--display);font-size:20px}
.day i{display:block;width:6px;height:6px;border-radius:50%;margin:3px auto 0;background:transparent}
.day.has i{background:var(--lotus)}
.day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.day[aria-pressed="true"] small{color:inherit;opacity:.75}
.summary{display:flex;align-items:center;gap:12px;margin:6px 0 14px}
.summary .bar{flex:1}
.summary span{font-size:14px;color:var(--muted);font-weight:600;white-space:nowrap}
.task .chk{width:30px;height:30px;border-radius:50%;border:2.5px solid var(--c);background:transparent;flex:none;display:grid;place-items:center;padding:0}
.task .chk svg{width:16px;height:16px;opacity:0;color:#fff}
.task.done .chk{background:var(--c)}
.task.done .chk svg{opacity:1}
.task.done .tt{text-decoration:line-through;color:var(--muted)}
.fab{position:fixed;right:18px;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:21;height:58px;padding:0 22px 0 18px;border-radius:22px;border:0;background:var(--ink);color:var(--bg);font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;box-shadow:0 12px 28px -10px var(--shadow)}
.fab svg{width:22px;height:22px}
@media (min-width:900px){.fab{bottom:32px;right:32px}}
.glance{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{border:1px solid var(--line);background:var(--surface);border-radius:22px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:112px}
.tile .em{font-size:22px}
.tile b{font-family:var(--display);font-size:18px;line-height:1.1}
.tile small{color:var(--muted);font-size:13px;line-height:1.35}
@media (max-width:520px){.glance{grid-template-columns:1fr 1fr}.glance .tile.span{grid-column:span 2;min-height:0}}
.affirm{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.25}

/* alert cards: the signature piece */
.alerts{position:fixed;z-index:60;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 10px);width:min(460px,calc(100% - 20px));display:flex;flex-direction:column;gap:12px;max-height:78vh;overflow-y:auto;padding:4px 4px 12px;pointer-events:none}
.acard{pointer-events:auto;position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;padding:16px 16px 14px;border-radius:30px;background:color-mix(in srgb,var(--c) 17%,var(--surface));border:2px solid color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 18px 36px -18px color-mix(in srgb,var(--c) 75%,#000),0 2px 0 color-mix(in srgb,var(--c) 30%,transparent);animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
.acard:nth-child(odd){rotate:-.7deg}
.acard:nth-child(even){rotate:.6deg}
@keyframes pop{from{opacity:0;transform:translateY(-14px) scale(.92)}to{opacity:1;transform:none}}
.ablob{width:62px;height:62px;display:grid;place-items:center;font-size:32px;grid-row:span 2;background:color-mix(in srgb,var(--c) 34%,var(--surface));border-radius:58% 42% 55% 45%/50% 58% 42% 50%;animation:wob 3.2s ease-in-out infinite}
@keyframes wob{0%,100%{border-radius:58% 42% 55% 45%/50% 58% 42% 50%;transform:rotate(-4deg)}50%{border-radius:44% 56% 46% 54%/56% 44% 56% 44%;transform:rotate(5deg) translateY(-2px)}}
.abody{min-width:0}
.akind{font-size:13px;font-weight:700;color:color-mix(in srgb,var(--c) 70%,var(--ink))}
.abody h3{font-size:20px;font-weight:800;margin:1px 0 2px;overflow-wrap:anywhere}
.abody p.txt{font-size:14px;color:var(--muted)}
.abody .sk{font-family:var(--sanskrit);font-size:16px;line-height:1.5;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aact{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.aact .btn{padding:9px 16px;font-size:14px}
.aact .go{background:var(--c);color:#fff;border-color:transparent}
.late{position:absolute;top:12px;right:16px;font-size:12px;font-weight:700;color:var(--muted)}

/* sheet */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(10,20,24,.45);display:none;align-items:flex-end;justify-content:center}
.scrim.on{display:flex}
.sheet{background:var(--surface);width:min(640px,100%);max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:30px 30px 0 0;padding:10px 20px calc(24px + env(safe-area-inset-bottom,0px));animation:up .3s cubic-bezier(.2,.9,.3,1);zoom:var(--scale)}
.sheet .grab{width:44px;height:5px;border-radius:9px;background:var(--line);margin:4px auto 14px}
.sheet h2{font-size:24px;font-weight:800;margin-bottom:14px}
.foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:10px}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (min-width:700px){.scrim{align-items:center}.sheet{border-radius:30px}}
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cat{border:1.5px solid var(--line);background:var(--surface-2);border-radius:18px;padding:9px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:600}
.cat span{font-size:22px}
.cat[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,var(--surface))}
.dow{display:flex;gap:6px;flex-wrap:wrap}
.dow .chip{width:40px;padding:7px 0;text-align:center}

/* timers / move */
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:5px}
.modes button{border:0;background:none;border-radius:15px;padding:10px 4px;font-weight:700;font-size:14px;color:var(--muted)}
.modes button[aria-pressed="true"]{background:var(--lilac);color:#fff}
.dial{position:relative;width:min(290px,78vw);aspect-ratio:1;margin:18px auto 6px}
.dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.dial .num b{font-family:var(--display);font-weight:800;font-size:clamp(56px,17vw,92px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.dial .num b.long{font-size:clamp(38px,11vw,60px)}
.dial .num small{font-size:15px;color:var(--muted);font-weight:600;margin-top:6px}
.ctrls{display:flex;justify-content:center;gap:10px;margin:8px 0 18px;flex-wrap:wrap}
.ctrls .btn{min-width:96px}
.laps{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow:auto}
.laps div{display:flex;justify-content:space-between;padding:8px 12px;border-radius:12px;background:var(--surface-2);font-variant-numeric:tabular-nums}
.slider{width:100%;accent-color:var(--lilac)}
.steps{display:flex;flex-direction:column;gap:6px}
.steps div{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--surface-2)}
.steps div.now{background:color-mix(in srgb,var(--lilac) 22%,var(--surface));font-weight:700}

/* water */
.waterhero{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.ring{position:relative;width:170px;height:170px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .in b{font-family:var(--display);font-size:34px;font-weight:800;line-height:1}
.ring .in small{font-size:13px;color:var(--muted)}
.bigline b{font-family:var(--display);font-size:30px;font-weight:800;display:block;line-height:1.1}
.amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.amt{border:1.5px solid color-mix(in srgb,var(--sky) 40%,var(--line));background:color-mix(in srgb,var(--sky) 9%,var(--surface));border-radius:20px;padding:14px 6px;font-family:var(--display);font-weight:700;font-size:19px;display:flex;flex-direction:column;align-items:center;gap:2px}
.amt small{font-family:var(--body);font-size:12px;color:var(--muted);font-weight:600}
.amt:active{transform:scale(.96)}
.week{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:6px}
.week div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.week i{display:block;width:100%;max-width:34px;border-radius:10px 10px 6px 6px;background:color-mix(in srgb,var(--sky) 55%,transparent);min-height:4px}
.week i.full{background:var(--sky)}
.week small{font-size:12px;color:var(--muted);font-weight:600}
@media (max-width:460px){.waterhero{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* gita */
.gitahero{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.gitahero .big{font-family:var(--display);font-weight:800;font-size:64px;line-height:.9;letter-spacing:-.03em;color:var(--saffron)}
.gitahero .of{font-size:15px;color:var(--muted);font-weight:600;padding-bottom:6px}
.verse{border-radius:26px;padding:20px;background:color-mix(in srgb,var(--saffron) 12%,var(--surface));border:1.5px solid color-mix(in srgb,var(--saffron) 40%,var(--line));text-align:left;width:100%;display:block}
.verse .ref{font-weight:700;font-size:14px;color:color-mix(in srgb,var(--saffron) 65%,var(--ink))}
.verse .sk{font-family:var(--sanskrit);font-size:20px;line-height:1.65;margin:8px 0;white-space:pre-line}
.verse .en{font-size:15px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.chapters{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.chap{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:11px 12px;text-align:left;display:flex;flex-direction:column;gap:6px}
.chap b{font-family:var(--display);font-size:16px}
.chap small{font-size:12px;color:var(--muted);line-height:1.3;min-height:31px}
.chap .bar{height:6px}
.chap.complete{border-color:color-mix(in srgb,var(--saffron) 60%,var(--line))}
.big-verse .sk{font-family:var(--sanskrit);font-size:clamp(22px,5.4vw,28px);line-height:1.7;white-space:pre-line;text-align:center;margin:6px 0 16px}
.big-verse .tr{font-family:var(--sanskrit);font-style:italic;font-size:17px;line-height:1.65;color:var(--muted);text-align:center;margin-bottom:18px;white-space:pre-line}
.big-verse h3{font-size:15px;color:color-mix(in srgb,var(--saffron) 70%,var(--ink));margin:16px 0 6px}
.big-verse .en{font-size:18px;line-height:1.65}
.mean{font-size:17px;line-height:1.7;background:var(--surface-2);border-radius:20px;padding:16px}
.word{border-radius:24px;padding:18px;background:var(--surface);border:1px solid var(--line)}
.word .sa{font-family:var(--sanskrit);font-size:30px;line-height:1.2}
.memo{font-family:var(--sanskrit);font-size:clamp(22px,5vw,27px);line-height:1.9;text-align:center;margin:10px 0 16px}
.memo button{font:inherit;border:0;background:color-mix(in srgb,var(--saffron) 22%,var(--surface));border-radius:10px;padding:0 6px;margin:2px;color:transparent;text-shadow:none;min-width:2.2em}
.memo button.show{color:var(--ink);background:transparent}
.quiz .opt{display:block;width:100%;text-align:left;margin-bottom:8px;border-radius:16px;padding:12px 14px;border:1.5px solid var(--line);background:var(--surface-2)}
.quiz .opt.right{border-color:var(--leaf);background:color-mix(in srgb,var(--leaf) 16%,var(--surface))}
.quiz .opt.wrong{border-color:var(--lotus);background:color-mix(in srgb,var(--lotus) 14%,var(--surface))}

/* quotes */
.qfeature{border-radius:30px;padding:26px 22px;background:color-mix(in srgb,var(--c,var(--lilac)) 15%,var(--surface));border:1.5px solid color-mix(in srgb,var(--c,var(--lilac)) 40%,var(--line));text-align:left;width:100%;display:block}
.qfeature q{display:block;font-family:var(--display);font-size:clamp(23px,5.5vw,30px);font-weight:700;line-height:1.2}
.qfeature p{margin-top:12px;color:var(--muted);font-weight:600}
.qlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.qcard{border:1px solid var(--line);background:var(--surface);border-radius:22px;padding:16px;text-align:left;display:flex;flex-direction:column;gap:8px}
.qcard q{font-size:16px;line-height:1.45}
.qcard small{color:var(--muted);font-weight:600}
.qcard .g{font-size:12px;font-weight:700;color:var(--c)}
.bigq q{display:block;font-family:var(--display);font-size:clamp(28px,7vw,40px);font-weight:700;line-height:1.15;margin:10px 0 16px}
.bigq .who{font-size:17px;font-weight:700}
.bigq .src{color:var(--muted);font-size:15px}
.note{margin-top:18px;background:var(--surface-2);border-radius:20px;padding:16px;font-size:16px;line-height:1.65}

/* hub */
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.hub button{border:1px solid var(--line);background:var(--surface);border-radius:22px;padding:16px;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:110px}
.hub button .em{font-size:26px}
.hub button b{font-family:var(--display);font-size:17px}
.hub button small{color:var(--muted);font-size:13px;line-height:1.35}

/* calm */
.sounds{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.snd{border:1.5px solid var(--line);background:var(--surface);border-radius:22px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-weight:700}
.snd .em{font-size:26px}
.snd[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.breath{width:220px;height:220px;margin:18px auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 40%,var(--surface)),color-mix(in srgb,var(--accent) 12%,var(--surface)));transform:scale(.6);transition:transform 4s ease-in-out;font-family:var(--display);font-weight:800;font-size:22px;text-align:center}
.jar{position:relative;width:200px;margin:0 auto}
.jar svg{width:100%;height:auto;display:block}
.mood{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.mood button{border:1.5px solid var(--line);background:var(--surface-2);border-radius:18px;padding:12px 0;font-size:30px}
.mood button small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.mood button[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.stepdots{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.stepdots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.stepdots i.on{background:var(--accent);width:22px;border-radius:9px}

/* progress */
.ranges{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.ranges::-webkit-scrollbar{display:none}
.ranges .chip{flex:none}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px}
.stat b{font-family:var(--display);font-size:24px;display:block;line-height:1.1}
.stat small{color:var(--muted);font-size:13px}
.stat .chg{font-size:13px;font-weight:700}
.up{color:var(--leaf)} .down{color:var(--lotus)}
.chart{width:100%;height:auto;display:block}
.review h3{font-size:18px;margin:4px 0 10px}
.review ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.review li{padding:14px 16px;border-radius:18px;line-height:1.55}
.review .good li{background:color-mix(in srgb,var(--leaf) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--leaf) 30%,var(--line))}
.review .grow li{background:color-mix(in srgb,var(--saffron) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--saffron) 30%,var(--line))}
.review li b{display:block;margin-bottom:2px}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.badge{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:12px;text-align:center}
.badge .em{font-size:30px;display:block}
.badge b{font-family:var(--sanskrit);font-size:15px;display:block}
.badge small{font-size:12px;color:var(--muted)}
.badge.locked{opacity:.4;filter:grayscale(1)}
.story{text-align:center;padding:30px 10px}
.story .big{font-family:var(--display);font-size:64px;font-weight:800;line-height:1;color:var(--accent)}

/* auth + onboarding */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.gate .card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:26px}
.gate .logo{width:64px;height:64px;margin-bottom:12px}
.gate h1{font-size:28px;font-weight:800;margin-bottom:4px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--surface-2);border-radius:16px;padding:4px;margin:18px 0}
.tabs button{border:0;background:none;border-radius:12px;padding:9px;font-weight:700;color:var(--muted)}
.tabs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px var(--shadow)}
.err{color:var(--lotus);font-size:14px;font-weight:600;min-height:20px;margin-bottom:8px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.swatch{border:2px solid var(--line);border-radius:20px;padding:12px 8px;background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:700}
.swatch i{width:40px;height:40px;border-radius:50%;background:var(--sw)}
.swatch[aria-pressed="true"]{border-color:var(--sw);background:color-mix(in srgb,var(--sw) 12%,var(--surface))}
.phone{display:grid;grid-template-columns:96px 1fr;gap:8px}

/* friends + chat */
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-family:var(--display);background:var(--av,var(--accent));flex:none}
.board div{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.board div:last-child{border-bottom:0}
.chat{display:flex;flex-direction:column;gap:10px;min-height:40vh;padding-bottom:10px}
.msg{max-width:85%;padding:12px 15px;border-radius:20px;line-height:1.55;white-space:pre-wrap}
.msg.me{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:6px}
.msg.ai{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:6px}
.composer{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;padding:10px 0;background:var(--bg)}
@media (min-width:900px){.composer{bottom:0}}
.crisis{border-radius:22px;padding:16px;background:color-mix(in srgb,var(--lotus) 14%,var(--surface));border:1.5px solid color-mix(in srgb,var(--lotus) 45%,var(--line))}
.crisis a{color:inherit;font-weight:800}

.toast{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:16px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:70;max-width:90%;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}
.setrow > div:first-child{flex:1}
.setrow small{display:block;color:var(--muted);font-size:13px}
.switch{appearance:none;-webkit-appearance:none;width:50px;height:30px;border-radius:99px;background:var(--line);position:relative;flex:none;transition:.2s;cursor:pointer;margin:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch:checked{background:var(--accent)}
.switch:checked::after{left:23px}
.tones{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
details summary{cursor:pointer;font-weight:700;padding:4px 0;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:" +";color:var(--muted)}
details[open] summary::after{content:" \2212"}

@media (prefers-reduced-motion:reduce){.ablob,.acard,.view.on,.sheet{animation:none}.breath{transition:none}}

/* printing the progress report (Save as PDF on iPhone, Mac and Windows) */
@media print{
  body{background:#fff;color:#000}
  body::before,.nav,.top,.fab,.alerts,.scrim,.toast,.noprint{display:none!important}
  main{padding:0}
  .view{display:none!important}
  #v-progress{display:block!important}
  .panel,.stat,.review li{break-inside:avoid;border-color:#ccc}
}

/* ---------- dashboard ---------- */
.dash{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:18px;align-items:center}
@media (max-width:560px){.dash{grid-template-columns:1fr}}
.ringbox{position:relative;width:100%;max-width:240px;margin:0 auto}
.rings{width:100%;height:auto;display:block}
.ringmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.ringmid b{font-family:var(--display);font-size:26px;font-weight:800;line-height:1}
.ringmid small{font-size:12px;color:var(--muted)}
.legend{display:flex;flex-direction:column;gap:6px}
.legend button{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:9px 12px;text-align:left}
.legend button i{width:12px;height:12px;border-radius:50%;flex:none}
.legend button span{flex:1;font-weight:600;font-size:14px}
.legend button b{font-family:var(--display);font-size:17px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal small{text-align:center;color:var(--muted);font-weight:700;font-size:12px}
.cal button{aspect-ratio:1;border:0;border-radius:12px;font-weight:700;font-size:14px;padding:0}
.heat{display:flex;gap:3px;overflow-x:auto;padding-bottom:4px}
.heat div{display:flex;flex-direction:column;gap:3px}
.heat button,.heat span{width:13px;height:13px;border-radius:3px;border:0;padding:0;flex:none}
i.sw{display:inline-block;width:13px;height:13px;border-radius:3px}
/* commitments */
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px}
.ccard .meta{display:block;font-size:13px;color:var(--muted)}
.mring{width:44px;height:44px;flex:none}
.cstrip{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.cstrip button{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);font-size:13px;font-weight:700;padding:0;color:var(--muted)}
.cstrip button.ok{background:var(--leaf);border-color:transparent;color:#fff}
.cstrip button.miss{background:color-mix(in srgb,var(--lotus) 22%,var(--surface));border-color:color-mix(in srgb,var(--lotus) 50%,var(--line));color:var(--ink)}
.cstrip button.now{border:2px solid var(--accent);color:var(--ink)}
.rbars{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.rbars div{display:grid;grid-template-columns:minmax(140px,1.3fr) 2fr auto;gap:10px;align-items:center;font-size:13px}
.rbars i{display:block;height:10px;border-radius:9px;background:linear-gradient(90deg,var(--lotus) var(--w),var(--surface-2) var(--w))}
.commits-today{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}

/* ---------- welcome: floating questions ---------- */
.ob{position:fixed;inset:0;z-index:90;background:var(--bg);overflow:hidden;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 14px) 20px calc(env(safe-area-inset-bottom,0px) + 18px);transition:opacity .7s ease,transform .7s ease}
.ob.leaving{opacity:0;transform:scale(1.04)}
.ob .blob{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(64px);pointer-events:none;will-change:transform}
.ob .b1{background:radial-gradient(circle,var(--accent),transparent 66%);opacity:.42;top:-24vmax;left:-18vmax;animation:drift1 22s ease-in-out infinite alternate}
.ob .b2{background:radial-gradient(circle,var(--lotus),transparent 66%);opacity:.32;bottom:-28vmax;right:-22vmax;animation:drift2 27s ease-in-out infinite alternate}
.ob .b3{background:radial-gradient(circle,var(--saffron),transparent 66%);opacity:.2;width:42vmax;height:42vmax;top:34%;left:38%;animation:drift3 31s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(14vmax,12vmax) scale(1.12)}}
@keyframes drift2{to{transform:translate(-12vmax,-10vmax) scale(1.08)}}
@keyframes drift3{to{transform:translate(-16vmax,8vmax) scale(.9)}}
.ob .petal{position:absolute;bottom:-24px;left:var(--x);width:11px;height:15px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:color-mix(in srgb,var(--accent) 45%,#fff);opacity:0;transform:scale(var(--s));animation:rise var(--d) linear infinite;animation-delay:var(--delay);pointer-events:none}
@keyframes rise{0%{transform:translate(0,0) rotate(0) scale(var(--s));opacity:0}12%{opacity:.55}85%{opacity:.35}100%{transform:translate(var(--sway),-112vh) rotate(260deg) scale(var(--s));opacity:0}}
.ob-top{position:relative;z-index:2;display:flex;align-items:center;gap:12px;max-width:620px;width:100%;margin:0 auto}
.ob-prog{flex:1;height:6px;border-radius:9px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.ob-prog i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--accent),var(--lotus));transition:width .7s cubic-bezier(.2,.9,.3,1)}
.ob-back{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);font-size:24px;line-height:1;padding:0 0 3px}
.ob-skip{border:0;background:none;color:var(--muted);font-weight:700;padding:8px}
.ob-stage{position:relative;z-index:2;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.ob-card{width:min(600px,100%);max-height:100%;overflow-y:auto;padding:10px 4px 20px;scrollbar-width:none}
.ob-card::-webkit-scrollbar{display:none}
.ob-card.in > *{animation:floatIn .75s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--i,0) * 85ms + 60ms)}
.ob-card.out{animation:floatOut .38s ease-in both}
@keyframes floatIn{from{opacity:0;transform:translateY(30px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes floatOut{to{opacity:0;transform:translateY(-40px);filter:blur(8px)}}
.ob h1{font-size:clamp(32px,7.4vw,48px);font-weight:800;line-height:1.06;letter-spacing:-.025em;margin:6px 0 4px}
.ob h1 .w{display:inline-block;animation:wordUp .7s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--j) * 60ms + 200ms)}
@keyframes wordUp{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
.ob .eyebrow{font-weight:700;color:var(--accent);font-size:15px}
.ob .sub{color:var(--muted);font-size:17px;margin-top:6px;max-width:480px}
.ob-hero{display:flex;justify-content:flex-start;margin-bottom:18px}
.ob-logo{width:88px;height:88px;border-radius:24px;box-shadow:0 18px 40px -16px var(--accent);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-6px) rotate(-3deg)}}
.ob-hero.burst .ob-logo{animation:burst .9s cubic-bezier(.2,1.6,.4,1) both,breathe 4s ease-in-out 1s infinite}
@keyframes burst{from{transform:scale(.4) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.ob-name{display:block;width:100%;border:0;border-bottom:3px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:transparent;font-family:var(--display);font-size:clamp(32px,8vw,46px);font-weight:700;padding:10px 2px;outline:none;margin-top:18px;transition:border-color .3s;border-radius:0}
.ob-name:focus{border-color:var(--accent)}
.ob-name::placeholder{color:color-mix(in srgb,var(--muted) 55%,transparent)}
.ob-hi{min-height:28px;font-size:19px;margin-top:14px;font-weight:600;color:var(--accent);transition:opacity .3s}
.ob-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:20px}
.ob-opts.small{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ob-opts.one{grid-template-columns:1fr}
.ob-opt{position:relative;border:1.5px solid var(--line);background:color-mix(in srgb,var(--surface) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:22px;padding:16px 14px;text-align:left;display:flex;flex-direction:column;gap:5px;transition:transform .3s cubic-bezier(.2,1.5,.4,1),border-color .25s,background .25s,box-shadow .3s}
.ob-opts.one .ob-opt{flex-direction:row;align-items:center;flex-wrap:wrap;column-gap:12px}
.ob-opts.one .ob-opt small{flex-basis:100%;padding-left:46px}
.ob-opt .e{font-size:28px;line-height:1;transition:transform .4s cubic-bezier(.2,1.7,.4,1)}
.ob-opt b{font-size:15.5px}
.ob-opt small{color:var(--muted);font-size:13px;line-height:1.35}
.ob-opt:active{transform:scale(.97)}
@media (hover:hover){.ob-opt:hover{transform:translateY(-3px)}}
.ob-opt[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--surface));box-shadow:0 14px 30px -18px var(--accent)}
.ob-opt[aria-pressed="true"] .e{transform:scale(1.2) rotate(-8deg)}
.ob-opt .tick{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;transform:scale(0);transition:transform .35s cubic-bezier(.2,1.7,.4,1)}
.ob-opt[aria-pressed="true"] .tick{transform:scale(1)}
.ob-other{margin-top:12px}
.ob-count{font-weight:700;color:var(--accent);margin-top:14px;min-height:24px;display:inline-block}
.bump{animation:bump .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{50%{transform:scale(1.14)}}
.ob .chip{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .25s cubic-bezier(.2,1.6,.4,1),background .2s}
.ob .chip:active{transform:scale(.94)}
.ob-chips .chip[aria-pressed="true"]{background:var(--gc);border-color:var(--gc);color:#fff}
.daybar{position:relative;height:44px;margin:34px 6px 8px;border-radius:14px;background:linear-gradient(90deg,#1E2A4F 0%,#F2B035 30%,#7EC8F2 50%,#F28A5C 75%,#1E2A4F 100%);opacity:.95}
.daybar i{position:absolute;top:-4px;bottom:-4px;border-radius:12px;border:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent);transition:left .5s cubic-bezier(.2,.9,.3,1),width .5s cubic-bezier(.2,.9,.3,1)}
.daybar span{position:absolute;bottom:-22px;transform:translateX(-10%);font-size:11px;color:var(--muted);font-weight:600}
.daybar b{position:absolute;top:-30px;transform:translateX(-50%);font-size:20px;transition:left .5s cubic-bezier(.2,.9,.3,1)}
.ob-est{display:flex;align-items:center;gap:18px;margin-top:22px;padding:16px;border-radius:22px;background:color-mix(in srgb,var(--surface) 75%,transparent);border:1px solid var(--line)}
.ob-est b{font-family:var(--display);font-size:22px;display:inline-block}
.ob-est small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.stack{position:relative;width:64px;height:70px;flex:none}
.stack i{position:absolute;left:0;right:0;height:22px;border-radius:9px;background:var(--surface);border:1.5px solid color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 4px 10px -6px var(--shadow);bottom:calc(var(--k) * 7px);transform:scale(calc(1 - var(--k) * .05));animation:card .45s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--k) * 60ms)}
@keyframes card{from{opacity:0;transform:translateY(-14px) scale(.8)}}
.ob-water{display:grid;grid-template-columns:90px 1fr;gap:22px;align-items:center;margin-top:22px}
.ob-water b{font-family:var(--display);font-size:40px;display:block}
.glass{position:relative;width:80px;height:140px;border:3px solid color-mix(in srgb,var(--sky) 60%,var(--line));border-top:0;border-radius:6px 6px 22px 22px;overflow:hidden;background:color-mix(in srgb,var(--surface) 60%,transparent)}
.glass i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,color-mix(in srgb,var(--sky) 70%,#fff),var(--sky));transition:height .5s cubic-bezier(.2,.9,.3,1)}
.glass i::before{content:"";position:absolute;top:-8px;left:-50%;width:200%;height:16px;background:radial-gradient(circle at 25% 100%,transparent 8px,color-mix(in srgb,var(--sky) 70%,#fff) 9px) 0 0/32px 16px repeat-x;animation:wave 2.2s linear infinite}
@keyframes wave{to{transform:translateX(32px)}}
.ob-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px;margin-top:22px}
.ob-col{border:2px solid var(--line);background:color-mix(in srgb,var(--surface) 75%,transparent);border-radius:22px;padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:700;font-size:13px;transition:transform .3s cubic-bezier(.2,1.6,.4,1),border-color .2s;position:relative;cursor:pointer}
.ob-col i{width:44px;height:44px;border-radius:50%;background:var(--sw);box-shadow:0 8px 18px -8px var(--sw)}
.ob-col input{position:absolute;inset:0;opacity:0;cursor:pointer}
.ob-col[aria-pressed="true"]{border-color:var(--sw);transform:translateY(-4px) scale(1.04)}
.ob-sum{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ob-sum span{padding:9px 14px;border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line);font-weight:600;font-size:14px;animation:floatIn .7s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--i) * 90ms + 300ms)}
.ob-foot{position:relative;z-index:2;display:flex;justify-content:center}
.ob-next{width:min(600px,100%);height:58px;border:0;border-radius:20px;background:var(--ink);color:var(--bg);font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 16px 34px -16px var(--shadow);transition:opacity .3s,transform .2s}
.ob-next:active{transform:scale(.98)}
.ob-next .arrow{display:inline-block;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(5px)}}
.ob-next.dim{opacity:.45}
.ob-next.dim .arrow{animation:none}
.ob-next.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@media (prefers-reduced-motion:reduce){.ob .blob,.ob .petal,.ob-logo,.ob-next .arrow,.glass i::before{animation:none}.ob-card.in > *,.ob h1 .w,.ob-sum span,.stack i{animation-duration:.01s;animation-delay:0s}}

/* ---------- month calendar on Today ---------- */
.calendar-tools{display:flex;justify-content:flex-end;margin:-2px 0 8px}
.month-calendar{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:12px;margin-bottom:12px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cal-head b{font-family:var(--display);font-size:18px}
.cal-weekdays,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-weekdays span{text-align:center;font-size:12px;font-weight:700;color:var(--muted);padding-bottom:4px}
.cal-day{aspect-ratio:1;border:1px solid transparent;background:var(--surface-2);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;font-weight:700;font-size:14px}
.cal-day i{width:6px;height:6px;border-radius:50%;background:transparent}
.cal-day.has i{background:var(--lotus)}
.cal-day.complete i{background:var(--leaf)}
.cal-day.outside{opacity:.38}
.cal-day[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* ---------- group goals ---------- */
.group-goal{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px;margin-bottom:8px}
.group-goal .info{flex:1;min-width:0}
.group-goal .tt{font-weight:700;display:block}
.group-goal .meta{font-size:13px;color:var(--muted);display:block}
/* ---------- right-to-left languages (Arabic) ---------- */
[dir="rtl"] .item .info,[dir="rtl"] .tile,[dir="rtl"] .qcard,[dir="rtl"] .chap,[dir="rtl"] .ob-opt,[dir="rtl"] .legend button{text-align:right}
[dir="rtl"] .ob-opt .tick{right:auto;left:10px}
[dir="rtl"] .fab{right:auto;left:18px}
[dir="rtl"] .ob-next .arrow{transform:scaleX(-1)}
[dir="rtl"] .rbars i{background:linear-gradient(270deg,var(--lotus) var(--w),var(--surface-2) var(--w))}
/* ---------- inside Streamlit ---------- */
html.embedded body{min-height:100vh}
/* Streamlit Cloud draws its badge and profile picture over the bottom of the page; keep every button above them */
html.embedded{--host:64px}
html.embedded .sheet{padding-bottom:calc(var(--host) + 24px + env(safe-area-inset-bottom,0px));max-height:calc(100% - 40px)}
html.embedded .ob{padding-bottom:calc(var(--host) + 18px + env(safe-area-inset-bottom,0px))}
html.embedded .fab{bottom:calc(var(--host) + 86px + env(safe-area-inset-bottom,0px))}
html.embedded .toast{bottom:calc(var(--host) + 150px + env(safe-area-inset-bottom,0px))}
html.embedded main,html.embedded .views{padding-bottom:calc(var(--host) + 110px)}
@media (max-width:699px){html.embedded .nav{padding-bottom:calc(var(--host) + 6px + env(safe-area-inset-bottom,0px))}}
@media (min-width:700px){html.embedded .scrim{padding-bottom:var(--host)}html.embedded .sheet{padding-bottom:24px}}
/* reminder cards wait while a sheet is open, so they never cover its buttons */
body.sheeton .alerts{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- tasks: kinds, steps, long-term ---------- */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:4px}
.seg button{border:0;background:none;border-radius:12px;padding:10px;font-weight:700;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px var(--shadow)}
.edlist{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.edrow{display:flex;gap:6px;align-items:center}
.edrow .input{min-height:42px}
.taskwrap{display:flex;flex-direction:column}
.taskwrap .item{position:relative;z-index:1}
.subs{display:flex;flex-direction:column;gap:2px;margin:-6px 0 2px 26px;padding:12px 10px 6px 18px;border-left:2px solid var(--line);background:var(--surface);border-radius:0 0 16px 16px;border:1px solid var(--line);border-top:0}
.sub{display:flex;align-items:center;gap:10px;border:0;background:none;padding:5px 2px;text-align:left;font-size:14px}
.sub i{width:18px;height:18px;border-radius:6px;border:2px solid var(--line);flex:none;display:grid;place-items:center}
.sub.on i{background:var(--leaf);border-color:var(--leaf)}
.sub.on i::after{content:"✓";color:#fff;font-size:11px;font-style:normal;font-weight:800}
.sub.on span{text-decoration:line-through;color:var(--muted)}
.item .from{display:block;font-size:12.5px;color:color-mix(in srgb,var(--saffron) 70%,var(--ink));margin-top:2px}
.longcard{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:18px;padding:12px 14px}
.longcard.over{border-left-color:var(--lotus);background:color-mix(in srgb,var(--lotus) 7%,var(--surface))}
.longcard small{color:var(--muted);font-size:12.5px}
.assign .banner p b{font-size:14.5px}
.cal-day.ck{box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--lilac) 70%,transparent)}
.cal-day.dl::after{content:"🏔";font-size:9px;line-height:1}
.cal-day.rest{background:color-mix(in srgb,var(--leaf) 14%,var(--surface-2))}

/* ---------- the little companion ---------- */
.petcard{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface));border:1px solid var(--line);border-radius:26px;padding:14px 16px;margin-bottom:12px}
.pet{position:relative;width:86px;height:86px;flex:none;border:0;border-radius:50%;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--accent) 22%,var(--surface)),transparent 70%);display:grid;place-items:center;padding:0}
.pet .pe{font-size:52px;line-height:1;transform:scale(var(--ps,1));display:block;transform-origin:50% 90%}
.pet .acc{position:absolute;top:2px;right:8px;font-size:20px;animation:twinkle 2s ease-in-out infinite}
.mood-joyful .pe{animation:hop 1.2s cubic-bezier(.3,1.6,.5,1) infinite}
.mood-happy .pe{animation:sway 2.6s ease-in-out infinite}
.mood-okay .pe{animation:breathe2 4s ease-in-out infinite}
.mood-missing .pe{filter:saturate(.6);transform:scale(var(--ps,1)) rotate(-8deg) translateY(4px)}
@keyframes hop{0%,100%{transform:scale(var(--ps)) translateY(0)}40%{transform:scale(var(--ps)) translateY(-12px) rotate(-4deg)}60%{transform:scale(calc(var(--ps) * 1.04),calc(var(--ps) * .94)) translateY(0)}}
@keyframes sway{0%,100%{transform:scale(var(--ps)) rotate(-5deg)}50%{transform:scale(var(--ps)) rotate(5deg)}}
@keyframes breathe2{50%{transform:scale(calc(var(--ps) * 1.05))}}
@keyframes twinkle{50%{transform:scale(1.25) rotate(12deg);opacity:.7}}
.hearts{position:absolute;inset:0;pointer-events:none}
.hearts i{position:absolute;left:50%;top:30%;font-style:normal;animation:heart 1.3s ease-out forwards}
@keyframes heart{from{opacity:1;transform:translate(-50%,0) scale(.6)}to{opacity:0;transform:translate(calc(-50% + var(--x)),-70px) scale(1.2)}}
.petinfo{flex:1;min-width:0}
.petinfo b{font-family:var(--display);font-size:18px}
.bubble{position:relative;margin-top:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 12px;font-size:14px}

/* ---------- guided sessions ---------- */
.gstage{position:relative;height:200px;border-radius:24px;background:var(--surface-2);margin:8px 0 12px;overflow:hidden}
.gstage i{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--accent);box-shadow:0 0 24px var(--accent);transition:opacity .6s}
.gstage i.blink{animation:gblink 1s ease-in-out infinite}
.gstage i.lr{animation:glr 4s ease-in-out infinite}
.gstage i.ud{animation:gud 4s ease-in-out infinite}
.gstage i.circle{animation:gcircle 5s linear infinite}
.gstage i.nearfar{animation:gnf 5s ease-in-out infinite}
.gstage i.palm{opacity:0}
.gstage i.far{opacity:.25}
.gstage i.boxball{width:60px;height:60px;margin:-30px 0 0 -30px;animation:gbox 16s ease-in-out infinite}
.gstage i.calmball{width:60px;height:60px;margin:-30px 0 0 -30px;animation:gcalm 10s ease-in-out infinite}
@keyframes gblink{50%{transform:scale(.4);opacity:.5}}
@keyframes glr{0%,100%{transform:translateX(-120px)}50%{transform:translateX(120px)}}
@keyframes gud{0%,100%{transform:translateY(-70px)}50%{transform:translateY(70px)}}
@keyframes gcircle{from{transform:rotate(0) translateX(70px) rotate(0)}to{transform:rotate(360deg) translateX(70px) rotate(-360deg)}}
@keyframes gnf{0%,100%{transform:scale(.4)}50%{transform:scale(3)}}
@keyframes gbox{0%{transform:scale(1)}25%,50%{transform:scale(2.6)}75%,100%{transform:scale(1)}}
@keyframes gcalm{0%{transform:scale(1)}40%{transform:scale(2.6)}100%{transform:scale(1)}}

/* ---------- photos and trends ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.pthumb{border:0;padding:0;background:var(--surface-2);border-radius:16px;overflow:hidden;position:relative;aspect-ratio:3/4}
.pthumb img{width:100%;height:100%;object-fit:cover;display:block}
.pthumb small{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.55);color:#fff;border-radius:8px;padding:2px 7px;font-size:11px}
.pbig{width:100%;max-height:60vh;object-fit:contain;border-radius:18px;background:var(--surface-2)}
.pcompare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pcompare img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px}
.pcompare figure{margin:0;text-align:center}
.pcompare figcaption{font-size:13px;color:var(--muted);margin-top:4px}
.trend{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.trend:last-child{border-bottom:0}
.trend .em{font-size:22px}
.tbars{display:flex;flex-direction:column;gap:4px;margin:6px 0 4px}
.tbars i{display:block;height:8px;border-radius:8px;background:var(--accent)}
.tbars i.b{background:color-mix(in srgb,var(--muted) 45%,transparent)}
.ring.over circle:last-of-type{stroke:var(--leaf)}
.syncchip{font-size:18px;width:30px;text-align:center;cursor:help}

/* ---------- cycle ---------- */
.cyhero{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center}
.cyring{position:relative;width:150px;height:150px}
.cyring svg{width:100%;height:100%}
.cyring .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cyring .in b{font-family:var(--display);font-size:28px;font-weight:800}
.cyring .in small{color:var(--muted);font-size:12px}
@media (max-width:480px){.cyhero{grid-template-columns:1fr;justify-items:center;text-align:center}}
/* ---------- meals, recipes, books ---------- */
.mealtpl{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.mtcard{border:1.5px solid var(--line);background:var(--surface);border-radius:22px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:5px}
.mtcard .em{font-size:28px}
.mtcard b{font-family:var(--display);font-size:16px}
.mtcard small{font-size:12.5px;line-height:1.35}
.mtcard.on{border-color:var(--saffron);background:color-mix(in srgb,var(--saffron) 10%,var(--surface))}
.rlist{margin:6px 0 0;padding-left:22px;line-height:1.7}
.bookcard{margin-bottom:10px}
.bookcard b{font-family:var(--display);font-size:17px}

/* =========================================================
   LOOKS: playful (school) and trendy (college). Classic = no attribute, unchanged.
   ========================================================= */
.confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:120;pointer-events:none}

/* ---- playful: bright, chunky, bouncy ---- */
:root[data-look="playful"]{--display:"Baloo 2","Bricolage Grotesque",system-ui,sans-serif;--body:"Baloo 2","Figtree",system-ui,sans-serif;--line:color-mix(in srgb,var(--ink) 16%,transparent)}
:root[data-look="playful"] body{background-color:var(--bg);background-image:radial-gradient(color-mix(in srgb,var(--accent) 22%,transparent) 1.6px,transparent 1.7px);background-size:22px 22px;font-size:17px}
:root[data-look="playful"] .panel,:root[data-look="playful"] .item,:root[data-look="playful"] .tile,:root[data-look="playful"] .hub button,:root[data-look="playful"] .tcard,:root[data-look="playful"] .stat,:root[data-look="playful"] .ccard,:root[data-look="playful"] .petcard{border:2.5px solid color-mix(in srgb,var(--ink) 85%,transparent);box-shadow:0 5px 0 color-mix(in srgb,var(--ink) 85%,transparent);border-radius:24px}
:root[data-look="playful"] .btn{border:2.5px solid color-mix(in srgb,var(--ink) 85%,transparent);box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 85%,transparent);font-weight:800;transition:transform .12s,box-shadow .12s}
:root[data-look="playful"] .btn:active,:root[data-look="playful"] .hub button:active,:root[data-look="playful"] .tile:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 85%,transparent)}
:root[data-look="playful"] .btn.primary{background:var(--accent)}
:root[data-look="playful"] .btn.ghost{box-shadow:none;border-color:transparent}
:root[data-look="playful"] .chip{border-width:2px;font-weight:700}
:root[data-look="playful"] .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--ink);color:#fff;transform:rotate(-2deg) scale(1.04)}
:root[data-look="playful"] h1,:root[data-look="playful"] .vhead h2{font-weight:800;letter-spacing:0}
:root[data-look="playful"] .vhead h2{color:var(--accent)}
:root[data-look="playful"] .nav button[aria-current="page"] svg{animation:navbounce .5s cubic-bezier(.3,1.8,.5,1)}
:root[data-look="playful"] .hub button .em,:root[data-look="playful"] .tile .em{display:inline-block;animation:wiggle 3s ease-in-out infinite}
:root[data-look="playful"] .hub button:nth-child(2n) .em{animation-delay:-1.2s}
:root[data-look="playful"] .task .chk{border-width:3px}
:root[data-look="playful"] .task.done .chk{animation:pop .4s cubic-bezier(.3,1.8,.5,1)}
:root[data-look="playful"] .fab{border:2.5px solid var(--ink);box-shadow:0 5px 0 var(--ink);background:var(--saffron);color:#2a1a00}
@keyframes navbounce{40%{transform:translateY(-7px) scale(1.15)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}10%{transform:rotate(-12deg)}20%{transform:rotate(10deg)}30%{transform:rotate(0)}}
.mascot{display:flex;align-items:center;gap:10px;width:100%;border:2.5px solid color-mix(in srgb,var(--ink) 85%,transparent);box-shadow:0 5px 0 color-mix(in srgb,var(--ink) 85%,transparent);background:color-mix(in srgb,var(--saffron) 22%,var(--surface));border-radius:24px;padding:10px 14px;margin:4px 0 14px;text-align:left}
.mascot .dino{font-size:44px;line-height:1;display:inline-block;animation:dinohop 2.4s ease-in-out infinite;transform-origin:50% 100%}
.mascot .say{flex:1;font-weight:700;font-size:16px;background:var(--surface);border-radius:16px;padding:8px 12px;position:relative}
.mascot .say::before{content:"";position:absolute;left:-7px;top:50%;margin-top:-7px;border:7px solid transparent;border-right-color:var(--surface);border-left:0}
.mascot.hop .dino{animation:dinojump .6s cubic-bezier(.3,1.8,.5,1)}
@keyframes dinohop{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-6deg)}}
@keyframes dinojump{50%{transform:translateY(-22px) rotate(-14deg) scale(1.15)}}

/* ---- trendy: soft gradients, glass, stickers, lowercase ---- */
:root[data-look="trendy"]{--display:"Unbounded","Bricolage Grotesque",system-ui,sans-serif}
:root[data-look="trendy"] body{background:radial-gradient(60vmax 50vmax at 0% 0%,color-mix(in srgb,var(--lilac) 38%,transparent),transparent 60%),radial-gradient(55vmax 45vmax at 100% 20%,color-mix(in srgb,var(--lotus) 30%,transparent),transparent 60%),radial-gradient(60vmax 50vmax at 40% 110%,color-mix(in srgb,var(--sky) 30%,transparent),transparent 60%),var(--bg);background-attachment:fixed}
:root[data-look="trendy"] .panel,:root[data-look="trendy"] .item,:root[data-look="trendy"] .tile,:root[data-look="trendy"] .hub button,:root[data-look="trendy"] .tcard,:root[data-look="trendy"] .stat,:root[data-look="trendy"] .ccard,:root[data-look="trendy"] .petcard,:root[data-look="trendy"] .day{background:color-mix(in srgb,var(--surface) 62%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid color-mix(in srgb,#fff 45%,transparent);box-shadow:0 10px 30px -18px color-mix(in srgb,var(--lilac) 80%,#000)}
:root[data-look="trendy"] h1,:root[data-look="trendy"] h2,:root[data-look="trendy"] .vhead h2,:root[data-look="trendy"] .nav button{text-transform:lowercase}
:root[data-look="trendy"] .vhead h2{font-weight:700;background:linear-gradient(90deg,var(--lilac),var(--lotus),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-look="trendy"] .btn.primary,:root[data-look="trendy"] .fab{background:linear-gradient(120deg,var(--lilac),var(--lotus));color:#fff;border:0;box-shadow:0 10px 24px -12px var(--lotus)}
:root[data-look="trendy"] .chip{border-radius:999px;background:color-mix(in srgb,var(--surface) 55%,transparent)}
:root[data-look="trendy"] .chip[aria-pressed="true"]{background:linear-gradient(120deg,var(--lilac),var(--sky));border-color:transparent;color:#fff}
:root[data-look="trendy"] .badge,:root[data-look="trendy"] .hub button .em{display:inline-block;transform:rotate(-6deg);filter:drop-shadow(0 3px 0 color-mix(in srgb,#fff 80%,transparent))}
:root[data-look="trendy"] .hub button:nth-child(odd) .em{transform:rotate(7deg)}
:root[data-look="trendy"] .nav{background:color-mix(in srgb,var(--surface) 55%,transparent)}
:root[data-look="trendy"] .task.done .chk{background:linear-gradient(120deg,var(--lilac),var(--lotus));border-color:transparent}
.vibe{margin:4px 0 14px;padding:12px 16px;border-radius:999px;background:linear-gradient(120deg,color-mix(in srgb,var(--lilac) 30%,var(--surface)),color-mix(in srgb,var(--lotus) 26%,var(--surface)));font-weight:600;font-size:15px;overflow:hidden;white-space:nowrap}
.vibe span{display:inline-block;animation:shimmer 3s ease-in-out infinite}
@keyframes shimmer{50%{opacity:.75;transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.mascot .dino,:root[data-look] .hub button .em,.vibe span{animation:none}}

/* ---------- targets: countdown calendar ---------- */
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:16px;margin-bottom:12px}
.tcard .tem{font-size:30px;margin-right:4px}
.tcard b{font-family:var(--display);font-size:18px}
.tcard small{display:block}
.tleft{text-align:center;min-width:64px}
.tleft b{font-size:34px;line-height:1;color:var(--accent)}
.tcal{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px;margin-top:12px}
.tcal.mini{grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:4px;margin:12px 0}
.tcal button{position:relative;aspect-ratio:1;border-radius:12px;border:1.5px solid var(--line);background:var(--surface-2);font-weight:700;font-size:13px;color:var(--muted);padding:0;overflow:hidden}
.tcal.mini button{border-radius:9px;font-size:11px}
.tcal button.now{border:2.5px solid var(--accent);color:var(--ink)}
.tcal button.x{background:color-mix(in srgb,var(--leaf) 18%,var(--surface));color:color-mix(in srgb,var(--ink) 55%,transparent);border-color:color-mix(in srgb,var(--leaf) 45%,var(--line))}
.tcal button.x::before,.tcal button.x::after{content:"";position:absolute;left:14%;right:14%;top:50%;height:3px;border-radius:3px;background:var(--leaf)}
.tcal button.x::before{transform:rotate(45deg)}.tcal button.x::after{transform:rotate(-45deg)}
.tcal button.ext{background:color-mix(in srgb,var(--saffron) 20%,var(--surface));border-color:color-mix(in srgb,var(--saffron) 55%,var(--line))}
.tcal button.ext::before,.tcal button.ext::after{background:var(--saffron)}
.tcal sup{position:absolute;top:1px;right:3px;font-size:9px;color:var(--saffron);font-weight:800}
.tcal button.skip{background:color-mix(in srgb,var(--lotus) 12%,var(--surface));border-style:dashed;border-color:color-mix(in srgb,var(--lotus) 55%,var(--line));color:var(--lotus)}
.tcal button.fresh::before,.tcal button.fresh::after{animation:crossin .6s .3s cubic-bezier(.3,1.5,.5,1) both}
@keyframes crossin{from{transform:rotate(0) scaleX(0)}}
.tcal button.fresh::after{animation-name:crossin2}
@keyframes crossin2{from{transform:rotate(-45deg) scaleX(0)}to{transform:rotate(-45deg) scaleX(1)}}
.tcal button.fresh::before{animation-name:crossin1}
@keyframes crossin1{from{transform:rotate(45deg) scaleX(0)}to{transform:rotate(45deg) scaleX(1)}}

/* ---------- manifestation ---------- */
.mhero{background:linear-gradient(135deg,color-mix(in srgb,var(--lilac) 18%,var(--surface)),color-mix(in srgb,var(--saffron) 12%,var(--surface)))}
.mtl{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.mtl-row{display:flex;align-items:center;gap:10px;border:0;background:color-mix(in srgb,var(--surface) 70%,transparent);border-radius:14px;padding:9px 12px;text-align:left}
.mtl-row b{min-width:74px;font-size:13px}
.mtl-row .tx{flex:1}
.mtl-row.done{opacity:.6}
.affbig{white-space:pre-wrap;font-family:var(--display);font-size:clamp(20px,5vw,26px);line-height:1.45;font-weight:700;padding:18px;border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--lilac) 18%,var(--surface)),color-mix(in srgb,var(--lotus) 12%,var(--surface)));max-height:55vh;overflow:auto}
.vboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.vcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;transform:rotate(var(--r));box-shadow:0 8px 18px -12px var(--shadow);display:flex;flex-direction:column;gap:6px}
.vcard span{font-size:30px}
.vcard button{position:absolute;top:6px;right:6px;border:0;background:none;color:var(--muted)}

/* ---------- diet chart ---------- */
.mrings{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.mring2{position:relative;text-align:center}
.mring2 svg{width:100%;max-width:84px;display:block;margin:0 auto}
.mring2 b{position:absolute;top:0;left:0;right:0;height:min(84px,100%);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:16px;pointer-events:none;aspect-ratio:1;margin:0 auto;max-width:84px}
.mring2 small{display:block;font-size:11px;color:var(--muted);line-height:1.25;margin-top:2px}
.dtable{display:flex;flex-direction:column;gap:4px}
.dh,.dr{display:grid;grid-template-columns:70px 1fr 34px 34px 34px;gap:6px;align-items:center;font-size:13px}
.dh{color:var(--muted);font-weight:700;padding:0 8px}
.dr{border:0;background:var(--surface-2);border-radius:12px;padding:8px;text-align:left}
.dr span:nth-child(n+3),.dh span:nth-child(n+3){text-align:right}
.dr small{display:block;color:var(--muted);font-size:11.5px}
.dr.done{background:color-mix(in srgb,var(--leaf) 13%,var(--surface))}

/* ---------- groups ---------- */
.seg4{grid-template-columns:repeat(4,1fr)}
.seg4 button{font-size:13px;padding:9px 2px}
.itin{display:flex;flex-direction:column;gap:6px}
.it{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:10px 12px;text-align:left;width:100%}
.it > b{min-width:68px;font-size:13px;color:var(--accent)}
.it > span{flex:1;display:flex;flex-direction:column}
.it small{font-size:12.5px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:8px}
.fgrid div{background:var(--surface-2);border-radius:12px;padding:8px 10px}
.fgrid small{display:block;color:var(--muted);font-size:12px}
.fgrid b{font-size:14px}
.up{color:var(--leaf)}.down{color:var(--lotus)}

/* ---------- what's new ---------- */
.wn .item{position:relative}
.wntick{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);color:transparent;font-weight:800;flex:none}
.wn .item[aria-pressed="true"]{border-color:var(--accent)}
.wn .item[aria-pressed="true"] .wntick{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- in-app confirm box ---------- */
.askbox{position:fixed;inset:0;z-index:110;background:rgba(10,20,24,.5);display:flex;align-items:center;justify-content:center;padding:20px 16px calc(20px + var(--host,0px))}
.askcard{background:var(--surface);color:var(--ink);border-radius:24px;padding:20px;width:min(420px,100%);box-shadow:0 20px 50px -20px rgba(0,0,0,.5);animation:pop .3s cubic-bezier(.2,1.4,.4,1) both}
.askcard p{font-size:17px;font-weight:600;line-height:1.4;margin-bottom:12px}
.askcard .input{margin-bottom:6px}

/* ---------- cycle calendar ---------- */
.cyhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cyhead b{font-size:17px}
.cygrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.cygrid em{font-style:normal;font-size:12px;color:var(--muted);font-weight:700;padding-bottom:2px}
.cyd{position:relative;aspect-ratio:1;border:0;border-radius:50%;background:var(--surface-2);color:var(--ink);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;padding:0}
.cyd.period{background:var(--lotus,#D9607F);color:#fff}
.cyd.predicted{background:transparent;border:2px dashed var(--lotus,#D9607F);color:var(--lotus,#D9607F)}
.cyd.fertile{background:color-mix(in srgb,#2F8A57 18%,var(--surface))}
.cyd.ovulation{background:color-mix(in srgb,#2F8A57 40%,var(--surface));}
.cyd.today{outline:3px solid var(--ink);outline-offset:1px}
.cyd.future:not(.predicted):not(.fertile):not(.ovulation){opacity:.55}
.cyd s,.cylegend s{position:absolute;bottom:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--saffron,#D98A12)}
.cylegend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:13px;color:var(--muted)}
.cylegend span{display:flex;align-items:center;gap:6px;position:relative}
.cylegend i{width:14px;height:14px;border-radius:50%;display:inline-block}
.cylegend i.period{background:var(--lotus,#D9607F)}
.cylegend i.predicted{border:2px dashed var(--lotus,#D9607F)}
.cylegend i.fertile{background:color-mix(in srgb,#2F8A57 30%,var(--surface))}
.cylegend s{position:static;margin:0}

/* ---------- live sync badge: only shows when something is wrong ---------- */
.livebadge{border:0;border-radius:99px;padding:6px 12px;font-weight:700;font-size:13px;white-space:nowrap;align-self:center}
.livebadge.bad{background:color-mix(in srgb,#D98A12 22%,var(--surface));color:#8a5600}
.livebadge.off{background:var(--surface-2);color:var(--muted)}