:root{--mark:url(mark.png)}
/* ===== Lahub tokens (Botanical Premium UI). Every colour, size and radius below reads from here. ===== */
:root{--canvas:#FAF9F0;--card:#FFFFFF;--primary:#075333;--primary-pressed:#043d25;--on-primary:#FFFFFF;--secondary:#70AD46;--soft-green:#EAF2E5;--muted-green:#6B9580;--text:#1E2B24;--text-muted:#4E6E5E;--border-hairline:#DCE6DE;--line-control:#C3D2C6;--warning:#85570F;--warning-soft:#FBF1DE;--danger:#B3261E;--danger-soft:#FBE9E7;--shadow-card:none;--shadow-float:0 12px 32px rgba(7,83,51,.14);--scrim:rgba(23,36,29,.42);--radius-sm:12px;--radius-md:20px;--radius-lg:28px;--fs-xs:12px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:24px;--fs-title:28px;--fs-greet:32px;--control-h:44px;--control-h-sm:36px;--ease:cubic-bezier(.2,.8,.2,1);--dur-fast:.15s;--dur:.2s;--dur-slow:.3s;--dur-hero:.6s;--cream:#FAF9F0;--forest:#075333;--forest2:#0A6640;--leaf:#70AD46;--white:#FFFFFF;--black:#000;--warn:#85570F;--bad:#B3261E;--beige:#EAF2E5;--bline:#DCE6DE;--line:#DCE6DE;--mute:#4E6E5E;--soft:#EAF2E5;--leafsoft:#EAF2E5;--forest-rgb:7,83,51;--leaf-rgb:112,173,70;--cream-rgb:250,249,240;--white-rgb:255,255,255;--warn-rgb:133,87,15;--bad-rgb:179,38,30;--sh:var(--shadow-card);--rm:20px;--fs:16px;--pad:16px;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*:before,*:after{box-sizing:border-box}
body{margin:0;font:15px/1.5 "Plus Jakarta Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.app{max-width:480px;margin:0 auto;padding:0 20px 120px}
p{margin:0}
h1{line-height:1.2;font-weight:700;margin:18px 0 4px;color:var(--primary)}
h2{font-weight:700;margin:0}
.sec{display:flex;align-items:center;justify-content:space-between;margin:28px 0 12px}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 0 4px}
.logo{height:34px;display:block}
.ib{border-radius:50%;background:var(--white);color:var(--forest);display:flex;align-items:center;justify-content:center;cursor:pointer}
.mute{color:var(--mute)}
.search{display:flex;align-items:center;background:var(--white);border-radius:999px;padding:0 18px;height:52px;margin:16px 0;color:var(--mute)}
.search input{flex:1;border:0;background:transparent;font:inherit;font-size:16px;color:var(--forest);padding:0 10px;min-width:0;height:100%}
.search input:focus{outline:none}
.search:focus-within,.btn:focus-visible,.chip:focus-visible,.nb:focus-visible,.ib:focus-visible,.si:focus-visible,.cb:focus-visible,.link:focus-visible,.q:focus-visible,.seg button:focus-visible,[data-a]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.tx:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--forest-rgb),.12)}
.qs{display:flex}
.q{flex:1;margin-right:10px;border:0;border-radius:20px;padding:14px 4px 12px;font:inherit;font-size:12px;font-weight:700;color:var(--forest);cursor:pointer;text-align:center}
.q:last-child{margin-right:0}
.q svg{display:block;margin:0 auto 6px}
.q1{background:var(--leafsoft)}
.q3{background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.q4{background:var(--forest);color:var(--cream)}
.btn{font:inherit;border:0;border-radius:999px;cursor:pointer;margin-right:8px}
.btn:active{transform:scale(.97)}
.btn.sm{min-height:var(--control-h-sm);padding:0 14px;font-size:13px;margin-right:6px}
.link{border:0;background:var(--soft);font:inherit;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer}
.chips{display:flex;overflow-x:auto;margin:0 -20px 14px;padding:2px 20px 4px;-webkit-overflow-scrolling:touch}
.chip{flex:0 0 auto;font:inherit;font-size:13px;font-weight:600;padding:9px 18px;border-radius:999px;margin-right:8px;cursor:pointer}
.scroll{display:flex;overflow-x:auto;margin:0 -20px;padding:2px 20px 14px;-webkit-overflow-scrolling:touch}
.pc{flex:0 0 172px;margin-right:12px;background:var(--white);padding:10px;cursor:pointer;position:relative}
.art{border-radius:18px;height:128px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.art svg{height:112px;width:112px}
.hb{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;border:0;background:var(--white);color:var(--forest);display:flex;align-items:center;justify-content:center;cursor:pointer}
.hb.on{color:var(--bad)}
.hb.on path{fill:var(--bad)}
.st{display:flex;justify-content:space-between;margin-top:10px;padding:0 2px}
.st div{text-align:center;font-size:11px;font-weight:600;color:var(--mute)}
.st span{display:flex;width:34px;height:34px;border-radius:50%;background:var(--soft);align-items:center;justify-content:center;margin:0 auto 3px;color:var(--forest)}
.card{background:var(--white);margin-bottom:12px}
.dark{background:var(--forest);color:var(--cream)}
.black{background:var(--black);color:var(--cream)}
.leafc{background:var(--leafsoft);box-shadow:none}
.row{display:flex;align-items:center;justify-content:space-between}
.rt{display:flex;align-items:center}
.th{width:56px;height:56px;border-radius:16px;background:var(--leafsoft);margin-right:12px;flex:0 0 auto;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.th svg{width:50px;height:50px}
.add{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--forest);background:transparent;color:var(--forest);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.tag{display:inline-block;font-size:12px;font-weight:600;padding:3px 11px;border-radius:999px;background:var(--soft)}
.tag.ok{background:var(--leafsoft)}
.tag.warn{color:var(--warn);background:rgba(var(--warn-rgb),.12)}
.tag.bad{color:var(--danger);background:var(--danger-soft)}
.task.done .tt{text-decoration:line-through;opacity:.5}
.bar{height:8px;border-radius:8px;background:rgba(var(--cream-rgb),.2);overflow:hidden;margin-top:10px}
.bar.l{background:var(--soft)}
.bar i{display:block;height:100%;background:var(--leaf);border-radius:8px;transition:width var(--dur-slow) var(--ease)}
.msg{margin:10px 0;max-width:92%}
.msg.u{margin-left:auto;background:var(--forest);color:var(--cream);padding:10px 14px;border-radius:20px 20px 4px 20px}
.msg.u img{display:block;max-width:180px;border-radius:12px}
.msg.a{background:var(--card);border:1px solid var(--border-hairline);padding:14px 16px;border-radius:20px 20px 20px 4px}
.msg ul{margin:6px 0 0;padding-left:18px}
.inp{display:flex;align-items:center;min-height:56px;margin-top:16px;background:var(--white);border-radius:999px;border:1px solid var(--line-control);padding:5px 5px 5px 8px}
.inp:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--forest-rgb),.12)}
.ai-side{display:none}
@media (min-width:1100px){
  .ai-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
  .ai-main{max-width:760px}
  .ai-side{display:flex;flex-direction:column;align-items:flex-start;gap:8px;position:sticky;top:24px;margin-top:18px}
  .ai-side .art{display:flex;align-items:flex-end;justify-content:center;width:100%;height:168px;border-radius:14px;background:var(--soft-green);overflow:hidden;margin-bottom:6px}
  .ai-side .art svg{height:150px;width:auto}
  .ai-side .btn{margin:8px 0 0}
}
.inp input[type=text]{flex:1;border:0;background:transparent;font:inherit;font-size:16px;color:var(--forest);padding:8px;min-width:0}
.inp input:focus{outline:none}
.inp label{cursor:pointer;color:var(--forest);display:flex;padding:8px}
.inp .btn{margin:0}
.big{font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.log{border-left:2px solid var(--leaf);padding:0 0 14px 14px;margin-left:6px}
.seg{display:inline-flex;border-radius:999px;padding:3px}
.seg button{font:inherit;font-size:13px;font-weight:700;border:0;background:transparent;color:var(--forest);padding:7px 16px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--forest);color:var(--cream)}
.mini{display:flex;margin-top:14px}
.mini div{flex:1;background:var(--white);border-radius:18px;padding:12px;margin-right:10px;font-size:13px;font-weight:600}
.mini div:last-child{margin-right:0}
nav{position:fixed;left:0;right:0;bottom:8px;bottom:max(6px,calc(env(safe-area-inset-bottom,0px) - 14px));z-index:10;margin:0 auto;width:calc(100% - 32px);max-width:448px;border-radius:999px;display:flex;align-items:center;justify-content:space-around;padding:8px}
.nb{width:44px;height:44px;border-radius:50%;border:0;color:var(--forest);display:flex;align-items:center;justify-content:center;cursor:pointer}
.cb{width:62px;height:62px;border-radius:50%;border:4px solid var(--cream);background:var(--white) var(--mark) center/auto 56% no-repeat;margin-top:-30px;box-shadow:0 6px 16px rgba(var(--forest-rgb),.22);cursor:pointer;padding:0}
.cb.on{background-color:var(--forest)}
.coin{display:inline-block;flex:0 0 auto;border-radius:50%;background:var(--cream) url(coin.png) center/auto 58% no-repeat;box-shadow:0 0 0 2px var(--forest),inset 0 0 0 2px var(--cream),inset 0 0 0 3.5px var(--leaf);vertical-align:middle}
.pill{display:flex;align-items:center;border:0;background:var(--white);box-shadow:var(--sh);border-radius:999px;padding:5px 12px 5px 5px;font:inherit;font-weight:700;font-size:13px;color:var(--forest);cursor:pointer}
.pill .coin{margin-right:6px}
select{font:inherit;font-size:16px;width:100%;min-height:var(--control-h);padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--line-control);background:var(--card);color:var(--forest);margin:10px 0}
.qty{display:flex;align-items:center}
.qty button{width:32px;height:32px;border-radius:50%;border:0;background:var(--soft);color:var(--forest);font:inherit;font-weight:700;cursor:pointer}
.qty b{min-width:30px;text-align:center}
.ln{display:flex;justify-content:space-between;margin:6px 0}
.tx{font-size:16px;width:100%;min-height:var(--control-h);padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--line-control);background:var(--card);font:inherit;color:var(--forest);margin-bottom:10px}
.chip[disabled]{opacity:.4;cursor:default}
.car{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:24px;-webkit-overflow-scrolling:touch;background:var(--leafsoft)}
.car>div{flex:0 0 100%;scroll-snap-align:center;height:230px;display:flex;align-items:flex-end;justify-content:center}
.car img{width:100%;height:230px;object-fit:cover}
.car svg{height:200px}
.dots{text-align:center;margin:10px 0 4px}
.dots i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--line);margin:0 3px}
.dots i.on{background:var(--forest)}
.strip{display:flex;overflow-x:auto;margin:0 -20px;padding:12px 20px;-webkit-overflow-scrolling:touch}
.strip div{flex:0 0 auto;display:flex;align-items:center;font-weight:700;margin-right:22px;white-space:nowrap}
.strip svg{margin-right:6px;opacity:.8}
.wks{display:flex;overflow-x:auto;margin:0 -20px;padding:12px 20px 8px;-webkit-overflow-scrolling:touch}
.wk{flex:0 0 66px;margin-right:8px;border:0;border-radius:16px;overflow:hidden;background:var(--white);box-shadow:var(--sh);text-align:center;cursor:pointer;font:inherit;color:var(--forest);padding:0}
.wk i{display:block;font-style:normal;font-size:10px;font-weight:700;color:var(--cream);padding:5px 0}
.wk i.s0{background:var(--leaf)}
.wk i.s1{background:var(--forest)}
.wk i.s2{background:var(--black)}
.wk b{display:block;font-size:24px;font-weight:600;padding-top:6px}
.wk span{display:block;font-size:11px;color:var(--mute);padding-bottom:8px}
.wk.on{transform:translateY(-6px);box-shadow:0 0 0 2px var(--forest),var(--sh)}
.lat{font-style:italic;color:var(--mute);font-size:13px}
.crumb{display:flex;overflow-x:auto;align-items:center;margin:14px -20px 4px;padding:0 20px;white-space:nowrap}
.crumb .link{margin-right:6px;flex:0 0 auto}
.crumb span{margin-right:6px;color:var(--mute)}
.sw{position:relative;width:46px;height:28px;flex:0 0 auto}
.sw input{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.sw i{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:28px;background:var(--line);transition:background-color var(--dur) var(--ease)}
.sw i:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--white);transition:transform var(--dur) var(--ease)}
.sw input:checked+i{background:var(--forest)}
.sw input:checked+i:after{transform:translateX(18px)}
.av2{width:40px;height:40px;border-radius:50%;background:var(--leafsoft);display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto;margin-right:10px}
.pa{display:flex;margin-top:12px}
.pa button{border:0;background:transparent;color:var(--forest);font:inherit;font-weight:600;display:flex;align-items:center;margin-right:18px;cursor:pointer;padding:4px 0}
.pa button svg{margin-right:6px}
.pa .on{color:var(--bad)}
.pa .on path{fill:currentColor}
.bub{max-width:80%;margin:6px 0;padding:10px 14px;border-radius:18px;background:var(--white);box-shadow:var(--sh)}
.bub.me{margin-left:auto;background:var(--forest);color:var(--cream)}
.vf{position:relative;border-radius:24px;overflow:hidden;background:var(--forest);height:250px;margin:14px 0}
.vf video{width:100%;height:100%;object-fit:cover;display:block}
.vf i{position:absolute;width:36px;height:36px;border:3px solid var(--leaf)}
.vf .a{left:22px;top:22px;border-right:0;border-bottom:0}
.vf .b{right:22px;top:22px;border-left:0;border-bottom:0}
.vf .c{left:22px;bottom:22px;border-right:0;border-top:0}
.vf .d{right:22px;bottom:22px;border-left:0;border-top:0}
.ib{width:40px!important;height:40px!important;margin-left:6px!important}
.stp{display:flex;margin:14px 0 6px}
.stp div{flex:1;text-align:center;font-size:11px;font-weight:700;color:var(--mute)}
.stp div i{display:block;height:4px;border-radius:4px;background:var(--line);margin:0 3px 6px}
.stp div.on{color:var(--forest)}
.stp div.on i{background:var(--leaf)}
button,.card[data-a],.pc,.q,.wk,.chip,.nb,.cb,.ib{-webkit-tap-highlight-color:transparent;transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}

.nl,.dx{display:none}
@media (min-width:720px){
  .app{max-width:780px}
  nav{max-width:560px}
  .pc{flex-basis:200px}
  body.cx #v>.fade{-webkit-column-count:2;column-count:2;-webkit-column-gap:20px;column-gap:20px}
  body.cx #v>.fade>*{-webkit-column-break-inside:avoid;break-inside:avoid}
  body.cx #v h1,body.cx #v .seg,body.cx #v .chips,body.cx #v .search,body.cx #v .qs,body.cx #v .crumb,body.cx #v .scroll,body.cx #v>.fade>p{-webkit-column-span:all;column-span:all}
}
@media (min-width:1100px){
  .app{max-width:none;margin:0 0 0 244px;padding:0 48px 60px}
  .top,#v{max-width:1120px}
  .top{justify-content:flex-end}
  .logo{position:fixed;left:26px;top:calc(18px + env(safe-area-inset-top,0px));z-index:11}
  nav{left:0;top:0;bottom:0;right:auto;width:244px;max-width:none;margin:0;border-radius:0;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:84px 14px 14px;border-right:1px solid var(--line)}
  nav .nb,nav .dx{width:auto;height:auto;border-radius:14px;justify-content:flex-start;padding:11px 14px;background:transparent;margin-bottom:4px;font:inherit;font-weight:600;color:var(--forest);border:0;cursor:pointer;display:flex;align-items:center}
  nav .nb.on{background:var(--forest);color:var(--cream)}
  nav .nl{display:inline;margin-left:12px}
  nav .dx{display:flex}
  nav .cb{width:auto;height:auto;border-radius:14px;margin:0 0 4px;border:0;box-shadow:none;background-color:transparent;background-position:12px center;background-size:auto 26px;padding:11px 14px 11px 48px;font:inherit;font-weight:600;color:var(--forest);display:flex;align-items:center;text-align:left}
  nav .cb.on{background-color:var(--forest);color:var(--cream)}
  .pc{flex-basis:210px}
  .toast{bottom:28px}
}
.kg{-webkit-column-break-inside:avoid;break-inside:avoid}
.sec{-webkit-column-break-after:avoid;break-after:avoid}
body.ob nav,body.ob .top{display:none}
body.ob .app{padding-bottom:40px}
.obd{display:flex;flex:1;margin-right:14px}
.obd i{flex:1;height:4px;border-radius:4px;background:var(--line);margin-right:5px}
.obd i.on{background:var(--leaf)}
.opt{display:block;width:100%;text-align:left;font:inherit;color:var(--forest);background:var(--white);border-radius:22px;padding:16px;margin-bottom:12px;cursor:pointer}
.opt.on{border-color:var(--forest);background:var(--ls)}
.opt b{display:block;font-size:17px}
.hero{display:flex;justify-content:center;margin:28px 0 8px}
@keyframes pop{from{transform:scale(.2) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
.coach{position:fixed;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:calc(100px + env(safe-area-inset-bottom,0px));width:calc(100% - 32px);max-width:420px;z-index:40;background:var(--forest);color:var(--cream);border-radius:20px;padding:16px;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.coach .mute{color:rgba(var(--cream-rgb),.7)}
.coach .btn{background:var(--cream);color:var(--forest)}
.coach .btn.ghost{background:rgba(var(--cream-rgb),.15);color:var(--cream)}
.hl{position:relative;z-index:30}
@keyframes pl{50%{outline-offset:8px;outline-color:rgba(var(--leaf-rgb),.4)}}
@media (min-width:1100px){
  .coach{left:calc(50% + 122px);bottom:28px}
}

@media (min-width:1500px){
  body.cx #v>.fade{-webkit-column-count:3;column-count:3}
}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--forest);color:var(--cream);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none;z-index:20;white-space:nowrap}
.toast.show{opacity:1}
html{background:var(--cream)}
body{min-height:100vh}
.opt{border:1px solid var(--line)!important}
.opt.on{border:2px solid var(--forest)!important}
.tag,.btn.sm{white-space:nowrap}
.card.row>div:first-child,.card.row>.rt{min-width:0;margin-right:10px}
.g-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 24px}
.g-head .mst{flex:1 1 320px;margin:14px 0 0}
.g-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 12px}
.g-bar .chips{flex:0 0 auto;max-width:100%;margin:0;padding:2px 0}
.g-bar .btn{flex:none;margin:0}
.g-plant{cursor:pointer}
body.cx #v .mst,body.cx #v .hh,body.cx #v .abtn,body.cx #v .seg,body.cx #v .g-head,body.cx #v .g-bar{-webkit-column-span:all;column-span:all}
@media (min-width:1100px){
  body.dt #v,body.nc #v{max-width:820px}
}
.sres{display:flex;align-items:center;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.sres:last-child{border-bottom:0}
details.faq{border-bottom:1px solid var(--line);padding:12px 2px}
details.faq summary{font-weight:700;cursor:pointer;list-style:none}
details.faq p{margin-top:8px}
.ph{display:flex;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:14px 16px;margin-top:16px}
.ph .av{width:120px;height:120px;flex:0 0 auto;border-radius:20px;background:var(--leafsoft);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.ph .av svg{width:110px;height:110px}
.xp{height:8px;border-radius:8px;background:var(--soft);overflow:hidden;margin:8px 0 4px}
.xp i{display:block;height:100%;background:var(--secondary);border-radius:8px;transition:width var(--dur-slow) var(--ease)}
.th2 svg{transform-origin:50% 100%}
.thirst svg g.lv{transform-origin:50% 80%}
.mst{display:flex;margin:14px 0 8px;background:var(--card);border:1px solid var(--border-hairline);border-radius:var(--radius-md)}
.mst div{flex:1;min-width:0;padding:12px 16px;border-left:1px solid var(--border-hairline)}
.mst div:first-child{border-left:0}
.mst b{display:block;font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.mst span{font-size:12px;color:var(--mute)}
.modal{position:fixed;left:0;top:0;right:0;bottom:0;z-index:60;background:var(--scrim);align-items:center;justify-content:center;padding:20px}
.mbox{background:var(--cream);border-radius:28px;padding:24px 20px;max-width:380px;width:100%;text-align:center;box-shadow:var(--shadow-float);animation:mup var(--dur) var(--ease) both}
@keyframes mup{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.mbox .gv{width:170px;height:170px;margin:0 auto;border-radius:50%;background:var(--soft-green);display:flex;align-items:flex-end;justify-content:center}
.mbox .gv svg{width:150px;height:150px;animation:grow var(--dur-hero) cubic-bezier(.3,1.15,.5,1) both;transform-origin:50% 100%}
@keyframes grow{from{transform:scale(.7);opacity:.4}to{transform:none;opacity:1}}
.steps3{display:flex;margin:16px 0}
.steps3 div{flex:1;font-size:12px;font-weight:700}
.steps3 span{display:flex;width:42px;height:42px;border-radius:14px;margin:0 auto 6px;align-items:center;justify-content:center;background:var(--forest);color:var(--cream)}

.hh{margin:16px 0 0}
.hm-meta{margin:6px 0 0}
.hh span:last-child{color:var(--mute)}
.dash{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;margin-top:16px}
.sc{grid-column:1/-1;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:18px;text-align:center}
.stc{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:16px;cursor:pointer;min-height:128px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.stc b{font-size:24px;font-weight:800;letter-spacing:-.02em}
.itile{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--white);flex:0 0 auto}
.ringw{position:relative;width:180px;height:180px;margin:8px auto 4px}
.ringw svg{width:100%;height:100%;display:block}
.num{position:absolute;left:0;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);text-align:center}
.num b{display:block;font-size:50px;font-weight:800;letter-spacing:-.04em;line-height:1}
.num span{font-size:13px;color:var(--mute)}
.rg2{animation:rgx var(--dur-hero) var(--ease) both}
@keyframes rgx{from{stroke-dashoffset:326.7}}
.ecard{background:var(--primary);color:var(--cream);border-radius:24px;padding:18px;margin-top:12px}
.ecard .mute{color:rgba(var(--cream-rgb),.72)}
.ecard .bar{background:rgba(var(--cream-rgb),.18)}
.ecard .btn{background:var(--cream);color:var(--forest)}
.pbar{display:flex;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:14px 16px;margin-top:16px;cursor:pointer}
@media (hover:hover){
  .stc:hover,.pbar:hover{border-color:var(--muted-green)}
}
.side{display:none}
.side h6{font-size:12px}
@media (min-width:720px){
  .dash{grid-template-columns:1.3fr 1fr 1fr}
  .sc{grid-column:1;grid-row:1/3}
}
@media (min-width:1100px){
  nav{display:none!important}
  .app{margin-left:268px!important}
  .side{display:block;position:fixed;left:0;top:0;bottom:0;width:260px;padding:78px 14px 14px;overflow-y:auto;border-right:1px solid var(--line);z-index:10}
  .side h6{color:var(--mute);margin:16px 10px 6px;font-weight:600}
  .si{display:flex;align-items:center;width:100%;min-height:40px;border:0;background:transparent;font:inherit;color:var(--text);padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;margin-bottom:2px;text-align:left}
  .si.on{background:var(--soft-green);color:var(--primary)}
  .si.on .sl{font-weight:600}
  .si.on .itile{color:var(--primary)}
  .si:hover{background:rgba(var(--forest-rgb),.05)}
  .si.on:hover{background:var(--soft-green)}
  .si .itile{width:20px;height:20px;border-radius:0;background:none;color:var(--text-muted)}
  .sl{margin-left:12px;font-weight:500;flex:1}
  .sn{font-size:13px;color:var(--mute)}
  .sf{display:flex;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:12px;margin-top:22px}
  .sf div{margin-left:10px;display:flex;flex-direction:column}
}

.qs2{display:flex;margin-top:18px;border-top:1px solid var(--line);padding-top:8px}
.q2{flex:1;display:flex;flex-direction:column;align-items:center;border:0;background:transparent;color:var(--forest);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:8px 0}
.q2 svg{margin-bottom:4px}
@media (max-width:1099px){
  nav{left:auto;right:16px;right:max(16px,calc(50% - 224px));margin:0;height:62px;transition:width var(--dur-slow) var(--ease),max-width var(--dur-slow) var(--ease),right var(--dur-slow) var(--ease),height var(--dur-slow) var(--ease),padding var(--dur-slow) var(--ease)}
  nav .cb{transition:margin var(--dur-slow) var(--ease),width var(--dur-slow) var(--ease),height var(--dur-slow) var(--ease),border-width var(--dur-slow) var(--ease)}
  nav.min{width:60px;max-width:60px;height:60px;right:16px;justify-content:center}
  nav.min .nb{opacity:0;width:0;min-width:0;margin:0;padding:0;pointer-events:none;overflow:hidden}
  nav.min .cb{margin:0;width:60px;height:60px;border-width:0;box-shadow:none}
}
@media (min-width:720px) and (max-width:1099px){
  nav{right:max(16px,calc(50% - 280px))}
}

.card{border:1px solid var(--line);box-shadow:none}
.pc{box-shadow:none;border:1px solid var(--line)}
.opt{box-shadow:none}
.ib,.pill{box-shadow:none;border:1px solid var(--line)}
.btn:active,.chip:active,.q:active,.ib:active,.nb:active,.link:active,.wk:active,.add:active,.pill:active{transform:scale(.97);filter:none}
.cb:active{transform:scale(.94)}
.card[data-a]:active,.pc:active{transform:scale(.99)}
@media (hover:hover){
  .chip:hover{border-color:var(--muted-green)}
  .ib:hover,.link:hover,.q:hover{background-color:var(--soft-green)}
  .nb:not(.on):hover{color:var(--primary)}
  .card[data-a]:hover,.pc:hover{transform:none;box-shadow:none;border-color:var(--forest)}
}
.pop{animation:fup var(--dur) var(--ease) both}
@keyframes fup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hl{outline:2px dashed var(--forest);outline-offset:5px;border-radius:14px;animation:none}
.rp{position:relative;overflow:visible}
.rp:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid var(--leaf);animation:rpl var(--dur-hero) var(--ease) both;pointer-events:none}
@keyframes rpl{to{transform:scale(7);opacity:0}}

.fade{animation:none}
.msg-in{animation:f var(--dur) var(--ease) both}
.think{animation:think 1.2s ease-in-out infinite}
@keyframes think{50%{opacity:.45}}
@keyframes f{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:1099px){
  nav .nb{transition:opacity var(--dur-fast) var(--ease) .22s,width var(--dur-slow) var(--ease),margin var(--dur-slow) var(--ease)}
  nav.min{overflow:hidden}
  nav.min .nb{transition:opacity .1s var(--ease),width var(--dur-slow) var(--ease),margin var(--dur-slow) var(--ease)}
}
body{font-size:var(--fs)}
.card{border-radius:var(--rm);padding:var(--pad)}
.stc,.pbar{border-radius:calc(var(--rm) + 4px)}
.sc,.ph,.ecard{border-radius:calc(var(--rm) + 6px)}
.pc{border-radius:calc(var(--rm) + 2px)}
/* ===== Type, surfaces and controls ===== */
body{letter-spacing:-.005em;font-feature-settings:"tnum" 0}
h1{font-size:var(--fs-title);letter-spacing:-.02em}
h2{font-size:20px;letter-spacing:-.02em}
.hh{font-size:var(--fs-title);line-height:1.18;letter-spacing:-.02em;font-weight:700;color:var(--primary)}
.small{font-size:13px;line-height:1.45}
.card,.sc,.stc,.ph,.pc,.xt{border:1px solid var(--bline);box-shadow:var(--sh)}
.leafc{border-color:transparent}
.dark,.ecard{border:0}
.stc b,.sc .num b,.bal b{font-variant-numeric:tabular-nums}
.btn{font-weight:700;min-height:var(--control-h);padding:0 20px;line-height:1.2;transition:background-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.xt:active,.stc:active{transform:scale(.99)}
.chip{border-color:var(--bline)}
.seg{background:var(--beige)}

.search{border:1px solid var(--line-control);box-shadow:none}
.ib{box-shadow:none;border:1px solid var(--bline)}
.art{background:var(--soft-green)}
nav{background:var(--card)!important;box-shadow:var(--shadow-float)!important}
.nb{background:transparent}
.nb.on{background:var(--forest);color:var(--cream)}
.side{background:var(--canvas)}
.xgrid{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;margin:18px 0 8px}
.xt{font:inherit;text-align:left;background:var(--white);border-radius:calc(var(--rm) + 4px);padding:16px;display:flex;flex-direction:column;align-items:flex-start;color:var(--forest);cursor:pointer;min-height:136px;transition:opacity var(--dur) var(--ease)}
.xt .itile{background:var(--forest);color:var(--cream);margin-bottom:auto}
.xt b{font-size:16px;margin-top:14px;letter-spacing:-.01em}
.xt .small{margin-top:4px}
.xcol{flex:0 0 auto;font:inherit;font-weight:700;font-size:14px;border:0;background:var(--beige);color:var(--forest);border-radius:16px;padding:14px 18px;margin-right:10px;cursor:pointer}
@media (min-width:720px){
  .xgrid{grid-template-columns:repeat(3,1fr)}
  .hh{font-size:30px}
}
@media (min-width:1100px){
  .hh{font-size:var(--fs-greet)}
}
.fade.in{animation:fup2 var(--dur) var(--ease) both}
@keyframes fup2{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
[data-a][role="button"]:focus-visible,.xt:focus-visible,.xcol:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* ===== Screens: home, plants, notices ===== */
body{background:var(--canvas);color:var(--text)}
.mute,.small.mute,p.mute{color:var(--text-muted)}
.card,.sc,.stc,.ph,.pc,.xt,.lh-card{background:var(--card);border:1px solid var(--border-hairline);box-shadow:var(--shadow-card)}
.lh-card{border-radius:var(--radius-md);padding:16px}
.lh-hero{border-radius:var(--radius-lg);padding:18px}
.lh-tint{background:var(--soft-green);border-radius:var(--radius-lg);padding:18px;display:flex;gap:14px;align-items:flex-start;color:var(--primary)}
.lh-h{font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.01em;margin:0}
.lh-badge{font-size:13px;font-weight:700;color:var(--primary);background:var(--soft-green);border-radius:999px;padding:4px 10px;white-space:nowrap}
.lh-bar{display:block;height:8px;border-radius:999px;background:var(--soft-green);overflow:hidden}
.lh-bar>i{display:block;height:100%;border-radius:inherit;background:var(--secondary);transition:width var(--dur-slow) var(--ease)}
.lh-tile{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--soft-green);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
.lh-tile.lh-art{width:44px;height:44px}
.lh-tile.lh-art svg{width:40px;height:40px}
.lh-trow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:12px 0;border-top:1px solid var(--border-hairline)}
.lh-tt{display:flex;align-items:center;gap:12px;flex:1 1 220px;min-width:0}
.lh-tt b{font-size:16px}
.lh-tch{display:flex;flex-wrap:wrap;gap:8px}
.lh-tch .chip svg{vertical-align:-2px;margin-right:4px}
.lh-tch .chip{margin:0}
.lh-more{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:12px;padding:12px 0 0;border:0;border-top:1px solid var(--border-hairline);background:none;font:inherit;font-size:14px;font-weight:700;color:var(--primary);cursor:pointer}
.chip{background:var(--card);border:1px solid var(--border-hairline);color:var(--primary)}
.chip.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn{background:var(--primary);color:var(--on-primary);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background:var(--primary-pressed)}
.btn.ghost{background:var(--soft-green);color:var(--primary)}
.btn.ghost:hover{background:#DDEAD6}
.link{color:var(--primary)}
.hm-grid{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px}
.hm-grid>*{flex:1 1 100%;min-width:0;margin:0!important}
.hh .hd2{color:var(--text-muted)}
.h-health{display:flex;align-items:center;gap:16px}
.h-ring{position:relative;width:132px;height:132px;flex:0 0 auto}
.h-ring svg{width:100%;height:100%;display:block}
.h-ring .num{top:0;left:0;right:0;bottom:0;-webkit-transform:none;transform:none}
.h-ring .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.h-ring .num b{font-size:32px;line-height:36px;font-weight:600;font-variant-numeric:tabular-nums}
.h-ring .num span{font-size:12px;color:var(--text-muted)}
.h-htx{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.h-htx .btn{margin:0}
.h-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lh-stat{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;min-height:96px;text-align:left;font:inherit;color:var(--text);cursor:pointer;transition:border-color var(--dur-fast) var(--ease)}
.lh-stat b{display:block;font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lh-stat .small{display:block}
.lh-stat:hover,.lh-plant:hover{border-color:var(--muted-green)}
.b-garden .scroll{gap:12px}
.lh-plant{flex:0 0 160px;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:10px;text-align:left;font:inherit;color:var(--text);cursor:pointer;margin:0}
.lh-plant .art{display:flex;align-items:center;justify-content:center;height:112px;border-radius:14px;background:var(--soft-green);overflow:hidden}
.lh-plant .art svg{height:100px;width:auto}
.lh-plant b{font-size:15px;margin:6px 4px 0}
.lh-plant .row{margin:0 4px}
.lh-plant .lh-bar{margin:4px 4px 2px}
.lh-addtile{flex:0 0 140px;border:1px dashed var(--muted-green);border-radius:var(--radius-md);background:transparent;color:var(--primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.lh-markc{width:44px;height:44px;border-radius:999px;background:var(--card) var(--mark) center/26px auto no-repeat;flex:0 0 auto}
.lh-markl{width:72px;height:72px;background-color:var(--soft-green);background-size:38px auto}
.h-ask .btn{margin:0}
.lh-metric{font-size:30px;line-height:34px;font-weight:600;letter-spacing:-.02em;margin:8px 0 6px;font-variant-numeric:tabular-nums}
.lh-metric span{font-size:16px;color:var(--text-muted)}
.h-lc .lh-bar{margin-top:8px}
.lh-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-top:16px;padding:26px 20px}
.lh-empty .btn{margin:8px 0 0}
@media (min-width:720px){
  .h-stats{grid-template-columns:repeat(4,1fr)}
  .hm-grid>#ck{flex:2 1 520px}
  .lh-tch{justify-content:flex-end}
  .b-garden .scroll{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));margin:0;padding:2px 0 4px;overflow:visible}
  .b-garden .lh-plant,.b-garden .lh-addtile{flex:none;min-height:210px}
  .hm-grid>.h-health{flex:1 1 300px}
  .hm-grid>.h-ask,.hm-grid>.h-lc{flex:1 1 320px}
}
.fade.hm{column-count:auto!important;columns:auto!important}
/* bottom navigation with labels (mobile) */
@media (max-width:1099px){
  nav{background:var(--card)!important;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--border-hairline);border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-float)!important;padding:8px}
  nav .nb{width:auto;min-width:56px;height:52px;border-radius:var(--radius-sm);flex-direction:column;gap:2px;background:transparent;color:var(--text-muted)}
  nav .nb .nl{display:block;margin:0;font-size:11px;line-height:14px;font-weight:600}
  nav .nb.on{background:var(--soft-green);color:var(--primary)}
  nav.min{border-radius:999px!important;padding:0}
}
/* ranks, badges, leaderboards */
.lh-bdg,.lh-bdgi{flex:0 0 auto;display:block}
.lh-bdgi{border-radius:50%;object-fit:cover}
.lh-bdg.dim,.lh-bdgi.dim{opacity:.35;filter:grayscale(1)}
.rk-mini{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;color:var(--text);cursor:pointer;margin-top:14px}
.rk-mini:hover{border-color:var(--muted-green)}
.rk-mt{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.rk-mt b{font-size:17px}
.rk-me{display:flex;align-items:center;gap:16px;margin-top:8px}
.rk-nm{font-size:22px!important;font-weight:800;letter-spacing:-.02em}
.rk-lv{display:flex;gap:14px;align-items:flex-start;margin-top:10px}
.rk-lv.cur{border-color:var(--secondary);background:var(--soft-green);box-shadow:none}
.rk-pt{padding:8px 0;border-top:1px solid var(--border-hairline)}
.rk-ach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rk-a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.rk-ctl{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.rk-list{padding:0;overflow:hidden}
.rk-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--border-hairline)}
.rk-list .rk-row:first-child{border-top:0}
.rk-row.me{background:var(--soft-green)}
.rk-pin{border:1px solid var(--border-hairline);border-radius:var(--radius-md);margin-top:10px}
.rk-n{width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--text-muted);flex:0 0 auto;font-variant-numeric:tabular-nums}
.rk-n.t1{background:var(--primary);color:var(--on-primary)}
.rk-n.t2,.rk-n.t3{background:var(--card);color:var(--primary);box-shadow:inset 0 0 0 1.5px var(--secondary)}
.rk-av{width:36px;height:36px;border-radius:999px;background:var(--soft-green);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto}
.rk-row.me .rk-av{background:var(--card)}
.rk-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.rk-tx b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-v{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.rk-v .small{margin-left:3px;font-weight:500}
.hm-grid>.h-note{flex:1 1 100%}
.lh-notice{border-radius:var(--radius-md);padding:14px 16px;font-size:14px;line-height:20px}
.lh-notice--info{background:var(--soft-green);color:var(--primary)}
.lh-notice--warning{background:var(--warning-soft);color:var(--warning)}
.lh-notice--error{background:var(--danger-soft);color:var(--danger)}
.lh-notice .btn{margin:0 8px 0 0}
.lh-notice .btn.ghost{background:var(--card)}
@media (min-width:720px){
  .rk-ach{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* brand cards: current plan and Unlimited */
.card.dark,.card.black{background:var(--primary);color:var(--on-primary);border-color:transparent;box-shadow:none}
.card.black{background:var(--primary-pressed)}
.card.dark .small,.card.black .small,.card.dark .mute,.card.black .mute{color:rgba(255,255,255,.82)!important;opacity:1!important}
.card.dark .bar,.card.black .bar{background:rgba(255,255,255,.22)}
.card.dark .bar i{background:var(--secondary)}
.card.black li{color:var(--on-primary)}
.card.black .btn{background:var(--card)!important;color:var(--primary)!important}
.pd-act{display:flex;gap:8px;margin:12px 0 4px}
.pd-act .btn{flex:1;margin:0}
.wk-set{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 4px;padding:10px 12px;border-radius:var(--radius-md);background:var(--card);border:1px solid var(--border-hairline)}
.wk-set .tx{width:76px;margin:0;text-align:center;min-height:40px}
.wk-set .btn{margin:0 0 0 auto}
/* ===== 02/11 package additions (weather, care plan, photos, notifications) ===== */

/* tablet and desktop: clean reading order instead of free-flowing columns */
@media (min-width:720px){
body.cx #v>.fade{-webkit-column-count:auto!important;column-count:auto!important}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:stretch;margin-top:4px}
.lgrid>.card{margin:0}
.lgrid.tree{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));align-items:start}
.lgrid.sp{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;margin:12px 0}
.feed{-webkit-column-count:2;column-count:2;-webkit-column-gap:14px;column-gap:14px;margin-top:6px}
.feed>.card{-webkit-column-break-inside:avoid;break-inside:avoid;display:inline-block;width:100%;margin:0 0 14px}
.pg-comm .chips,.pg-dict .chips{display:flex;flex-wrap:wrap;gap:8px}
.pg-comm .chips .chip,.pg-dict .chips .chip{margin:0}
}
@media (min-width:1400px){.feed{-webkit-column-count:3;column-count:3}}

/* square plant photos */
.pimg{display:block;width:100%;height:100%;object-fit:cover}
.th{align-items:center}
.th .pimg{border-radius:inherit}
.lh-tile.lh-art .pimg{width:44px;height:44px}
.lh-plant .art{height:auto;aspect-ratio:1/1;align-items:flex-end}
.lh-plant .art svg{height:88%;width:auto}
.lh-plant .art .pimg{width:100%;height:100%}
.car{max-width:560px;margin-left:auto;margin-right:auto}
.car>div{height:auto;aspect-ratio:1/1;align-items:flex-end}
.car img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
.car svg{height:88%;width:auto}
#dots{max-width:560px;margin-left:auto;margin-right:auto}

.ph .av{overflow:hidden}
.ph .av .pimg{width:100%;height:100%;border-radius:inherit}
.car-last{position:relative}
.car-last span{position:absolute;left:10px;bottom:10px;background:rgba(7,83,51,.78);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px}

/* audit fixes: touch targets, readable sizes, onboarding, task form */
.btn.sm,.seg button,.chip{min-height:44px}
.chip{display:inline-flex;align-items:center}
.wk i{font-size:12px!important}
.stp div{font-size:12px!important}
.ob-val{display:flex;flex-direction:column;gap:10px;margin:0 auto 22px;max-width:340px}
.ob-val>div{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:12px 14px;color:var(--primary);font-weight:600;font-size:15px}
#v [data-a="obnext"]{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:5;box-shadow:var(--shadow-float)}
.tf-row{display:flex;gap:10px}.tf-row>div{flex:1;min-width:0}
.tf-save{position:sticky;bottom:calc(96px + env(safe-area-inset-bottom,0px));width:100%}
.mst>div[data-a]:hover{border-color:var(--muted-green)}

.toast{white-space:normal!important;max-width:calc(100% - 32px);width:max-content;text-align:center;line-height:18px;border-radius:18px!important}

.nt .ndot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--secondary);margin-right:6px;vertical-align:middle}
.nt.read{box-shadow:none;opacity:.85}
[data-a="note"]{position:relative}
[data-a="note"][data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font:700 11px/18px var(--font-sans,inherit);text-align:center;box-shadow:0 0 0 2px var(--canvas)}

.wkp{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.wkm{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;background:var(--card);border:1px solid var(--border-hairline);border-radius:var(--radius-sm);padding:10px 12px;color:var(--primary)}
.wkm svg{grid-row:span 2;opacity:.85}
.wkm b{font-size:15px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wkm span{font-size:12px;line-height:16px;color:var(--text-muted)}
.wkc{margin-top:10px}.wkc b{font-size:15px}
.wkf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
.wkl{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text-muted);font-weight:600}
.wkl .tx,.wkl select{margin:0;min-width:0}
@media (min-width:720px){.wkf{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* weather */
.wxcap{font-size:13px;font-weight:600;padding:0;min-height:0}
.wx-now{display:flex;flex-direction:column;gap:14px}
.wx-big{display:flex;align-items:center;gap:14px}.wx-big b{display:block;font-size:48px;line-height:50px;font-weight:800;letter-spacing:-.03em}.wx-big span{color:var(--text-muted);font-weight:600}
.wx-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.wx-meta>div{background:var(--soft-green);border-radius:var(--radius-sm);padding:8px 10px}.wx-meta span{display:block;font-size:12px;color:var(--text-muted)}.wx-meta b{font-size:15px}
.wx-tip{display:flex;gap:12px;align-items:flex-start;margin-top:8px}.wx-tip b{font-size:15px}
.wx-week{padding:4px 14px}.wx-row{display:grid;grid-template-columns:76px 30px 1fr auto auto;align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--border-hairline)}.wx-row:first-child{border-top:0}.wx-d{font-weight:700;font-size:14px}.wx-c{font-size:13px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wx-r{font-size:12px;color:var(--text-muted);display:inline-flex;align-items:center;gap:2px}.wx-t{font-size:14px;white-space:nowrap}
/* care plan */
.care-loc{display:flex;gap:8px;align-items:center;margin:10px 0 4px}.care-loc select{flex:1;margin:0;min-width:0}.care-loc .btn{margin:0}
.care-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--border-hairline)}.care-row b{display:block;font-size:15px}.care-row p{margin-top:2px}
.id-btn{display:inline-flex!important;align-items:center;gap:6px;margin:8px 0!important}
/* push-style banner */
#pushb{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translate(-50%,-140%);width:min(420px,calc(100% - 20px));display:flex;gap:12px;padding:12px 14px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--border-hairline);border-radius:22px;box-shadow:0 18px 40px rgba(7,83,51,.22);z-index:130;transition:transform .42s cubic-bezier(.2,.9,.2,1.05);color:var(--text)}
#pushb.show{transform:translate(-50%,0)}
#pushb .pb-ic{width:42px;height:42px;border-radius:12px;flex:0 0 auto;background:var(--soft-green) var(--mark) center/24px auto no-repeat}
#pushb .pb-tx{flex:1;min-width:0}#pushb .pb-hd{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}#pushb .pb-hd b{color:var(--text-muted);letter-spacing:.02em}
#pushb .pb-t{font-weight:700;font-size:15px;line-height:20px;margin-top:2px}#pushb .pb-b{font-size:13px;color:var(--text-muted);line-height:18px}
#pushb .pb-ac{display:flex;gap:8px;margin-top:8px}#pushb .pb-ac button{flex:1;min-height:36px;border-radius:999px;border:0;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;background:var(--soft-green);color:var(--primary)}#pushb .pb-ac button:first-child{background:var(--primary);color:#fff}
@media (prefers-reduced-motion:reduce){#pushb{transition:none}}
/* ===== end 02/11 additions ===== */
/* ===== Phone and tablet: set last so it wins over the screen rules above ===== */
@media (min-width:1100px){
  .hm-grid>.h-health{flex-direction:column;justify-content:center;text-align:center}
  .h-health .h-htx{align-items:center}
}
@media (max-width:1099px){
  .b-garden .lh-addtile{grid-column:1/-1;flex-direction:row;min-height:56px}
}
.b-garden .scroll{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0;padding:2px 0 4px;overflow:visible}
.b-garden .lh-plant,.b-garden .lh-addtile{flex:none}
.ai-main .chips{flex-wrap:wrap;overflow:visible;margin:0 0 14px;padding:2px 0;gap:8px}
.ai-main .chips .chip{margin:0}
@media (max-width:719px){
  .hh{font-size:var(--fs-xl);line-height:1.25}
  .g-bar .btn{min-height:var(--control-h-sm);padding:0 14px;font-size:13px}
  .g-bar .btn svg{width:16px;height:16px}
  .b-garden .lh-plant .art{height:96px}
  .b-garden .lh-plant .art svg{height:86px}
}

/* Step 4b: Lịch chăm, Thêm việc, Hồ sơ cây */
.cal-list{margin-top:16px}
.cal-list>.row .btn{margin:0}
.cal-bar{margin:12px 0 4px}
.cal-bar+.lh-trow{border-top:0}
.cal-empty{margin:12px 0 0}
.cal-note{margin:12px 0 0}
.lh-card>.lh-trow:first-child{border-top:0;padding-top:0}
.lh-card>.lh-trow:last-child{padding-bottom:0}
.task.done .tt{text-decoration:line-through;opacity:1;color:var(--text-muted)}
.task .tt{font-size:16px}
.pd-back{margin-top:14px}
.pd-back .btn{margin:0}
.pd-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-top:12px}
.pd-id{flex:1 1 360px;min-width:0}
.pd-head .pd-act{flex:1 1 300px;max-width:420px;margin:0}
.pd-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px;margin-top:16px}
.pd-card{margin-top:12px}
.pd-card .btn{margin:0}
.pd-t{font-weight:700}
.pd-nt{margin:6px 0 10px}
.pd-mb{margin-bottom:8px}
.pd-mt{margin-top:10px!important}
.pd-hint{margin-top:8px}
.pd-none{margin:8px 0}
.pd-phrow{gap:8px;margin:2px 0 4px}
.pd-phact{display:flex;align-items:center;gap:8px}
.pd-phact .btn{margin:0}
.pd-nr{margin-top:12px;gap:12px}
.pd-bt{width:44px;height:44px;border-radius:var(--radius-sm)}
.pd-form{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:14px}
.pd-form select,.pd-form .tx{margin:0}
.pd-form .btn{justify-self:start}
.pd-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 8px}
.pd-3 .tx{margin:0;min-width:0}
.pd-card>.lh-h{margin-bottom:0}
.pd-log .log{border-left:0;margin:0;padding:10px 0;border-top:1px solid var(--border-hairline)}
.pd-log .log:first-of-type{border-top:0;padding-top:0}
.pd-log .log:last-child{padding-bottom:0}
.pd-hr{margin:0 0 6px}
.pd-spark{display:block;width:100%;height:56px;margin-bottom:12px}
.pd-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pd-aff{gap:12px;margin-top:12px;padding:12px 0 0;border-top:1px solid var(--border-hairline)}
.pd-aff .btn{margin:0}
.pd-loss{margin-top:12px}
.pd-loss .btn{margin:0}
.pd-side>.sec:first-child{margin-top:20px}
.pd-main .strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px 16px;margin:8px 0 0;padding:4px 0;overflow:visible}
.pd-main .strip div{margin-right:0;font-weight:600}
.pd-main .strip svg{opacity:1;color:var(--text-muted)}
.pd-main .wks{margin:0 -2px;padding:12px 2px 8px}
/* Ô tuần: kiểu do founder chốt (03/11/2026), giữ nguyên ở mọi bản sau */
.wks .wk{flex:0 0 72px;display:flex;flex-direction:column;border:2px solid var(--border-hairline);border-radius:16px;overflow:hidden;background:var(--card);box-shadow:none;padding:0;color:var(--primary);text-align:center}
.wks .wk i{display:block;font-style:normal;font-size:12px;line-height:16px;font-weight:700;color:#FFFFFF;background:var(--primary);padding:5px 4px;white-space:nowrap}
.wks .wk i.s0{background:#467D26}
.wks .wk i.s2{background:var(--text)}
.wks .wk b{display:block;font-size:26px;line-height:30px;font-weight:600;padding-top:8px;font-variant-numeric:tabular-nums}
.wks .wk span{display:block;font-size:12px;padding-bottom:8px;color:var(--text-muted)}
.wks .wk.on{transform:none;background:var(--card);border-color:var(--primary)}
.wks .wk:hover{border-color:var(--muted-green)}
.wks .wk.on:hover{border-color:var(--primary)}
.tf-card{max-width:560px;margin-top:16px}
.fl{display:block;font-size:14px;font-weight:600;margin-bottom:14px}
.fl>span{display:block;margin-bottom:6px}
.fl .tx,.fl select{margin:0;font-weight:400}
.tf-card .btn{margin:4px 0 0}
@media (min-width:1100px){
  body.dt #v{max-width:1120px}
  .pd-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
  .pd-side>.sec:first-child{margin-top:0}
  .pd-side>.sec:first-child h2,.pd-side>.lh-card:first-child{margin-top:0}
  .pd-main .car>div,.pd-main .car img{height:320px}
  .pd-main .car svg{height:270px}
  .pd-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center}
}
@media (max-width:719px){
  .pd-head .pd-act{max-width:none}
  .lh-trow.task .lh-tch{width:100%}
}

/* Step 4c: Khám phá, Từ điển, Học, Nhân giống, Cộng đồng */
.crumb{flex-wrap:wrap;overflow:visible;margin:14px 0 4px;padding:0;white-space:normal;row-gap:6px}
.cnd{display:flex;align-items:flex-start;gap:12px;margin-top:12px}
.cnd>svg{flex:0 0 auto;margin-top:2px;color:var(--primary)}
.cnd-v{font-weight:600}
.qi-tags{margin:10px 0 0}
.chip{white-space:nowrap}

.chips{flex-wrap:wrap;overflow:visible;margin:0 0 14px;padding:2px 0 4px;row-gap:8px}
.x-search{cursor:pointer}
.x-search>span{margin-left:10px}
.x-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:8px}
.x-list .lh-h{margin-bottom:4px}
.x-row{display:flex;align-items:center;gap:14px;width:100%;padding:14px 0;border:0;border-top:1px solid var(--border-hairline);background:none;font:inherit;color:var(--text);text-align:left;cursor:pointer}
.x-list .lh-h+.x-row{border-top:0}
.x-list .x-row:last-child{padding-bottom:0}
.x-row>svg:first-child{color:var(--primary);flex:0 0 auto}
.x-row>svg:last-child{color:var(--text-muted);margin-left:auto;flex:0 0 auto}
.x-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.x-tx b{font-size:16px}
.x-row:hover .x-tx b{color:var(--primary)}
.rd{max-width:820px}
.pr-grid,.cm-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px;align-items:start}
.cm-grid{gap:0 16px}
.pr-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px;margin-top:12px}
.pr-wide{grid-column:1/-1}
.pr-g{margin-top:6px}
.pr-r{margin-top:4px}
.pr-side>.sec:first-child{margin-top:24px}
.cm-note{margin:12px 0 0}
.cm-tabs{margin:14px 0 6px}
@media (min-width:900px){
  .x-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@media (min-width:1100px){
  .pr-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .pr-side>.sec:first-child{margin-top:16px}
  .cm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:479px){
  .pr-form{grid-template-columns:minmax(0,1fr)}
}

/* Step 4d-1: Lacoin */
.rw-top{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}
.rw-bal .rw-bar{margin:12px 0 6px}
.rw-aff{display:flex;align-items:center;gap:12px;width:100%;font:inherit;color:var(--text);text-align:left;cursor:pointer}
.rw-aff>svg{margin-left:auto;color:var(--text-muted);flex:0 0 auto}
.rw-tabs{margin:16px 0 4px}
.rw-list{margin-top:12px}
.rw-row{gap:12px;padding:12px 0;border-top:1px solid var(--border-hairline)}
.rw-row:first-child{border-top:0;padding-top:0}
.rw-row:last-child{padding-bottom:0}
.rw-row .btn{margin:0}
.rw-row .btn[disabled]{opacity:.4;cursor:default}
.rw-tx{margin-left:10px}
.rw-note{margin:12px 0 0}
.rw-nt{margin-top:12px}
@media (min-width:1100px){
  .rw-top.two{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
}

/* Step 4d-2: Tài khoản, Cửa hàng, Thanh toán, Xếp hạng */
.g-head>.btn{margin:0}
.me-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px;align-items:start}
.me-menu,.me-set{margin-top:14px}
.me-menu .x-row{padding:12px 0}
.me-menu .x-row:first-child{border-top:0;padding-top:0}
.me-menu .x-row:last-child{padding-bottom:0}
.me-menu .x-tx{flex:1 1 auto}
.me-menu .x-row>svg:last-child{margin-left:0}
.sh-tabs{margin:12px 0 4px}
.sh-note{margin:8px 0 12px}
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.sh-card{display:flex;flex-direction:column;gap:2px}
.sh-art{display:flex;align-items:center;justify-content:center;height:150px;border:0;border-radius:var(--radius-sm);background:var(--soft-green);cursor:pointer;margin-bottom:10px;padding:0}
.sh-art svg{width:110px;height:110px}
.sh-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
.sh-act .btn{margin:0}
@media (min-width:1100px){
  .me-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .me-side>.sec:first-child{margin-top:14px}
}
@media (max-width:479px){
  .sh-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sh-art{height:120px}
  .sh-art svg{width:90px;height:90px}
  .sh-act .btn{flex:1 1 100%}
}

/* Step 4e: remaining screens */
.nt-list{margin-top:16px}
.nt-row{padding:12px 0}
.nt-row:first-child{border-top:0;padding-top:0}
.nt-row:last-child{padding-bottom:0}
.nt-row .x-tx{flex:1 1 auto;gap:6px}
.nt-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nt-row .x-tx b{font-size:15px;font-weight:600}
.tag svg{vertical-align:-2px}

/* Step 4f: onboarding as one centred column, no sidebar */
body.ob .side{display:none!important}
body.ob .app{margin-left:auto!important;margin-right:auto;max-width:600px;padding-left:24px;padding-right:24px}
body.ob #v{max-width:none}

/* Merge 02/11: new forms and screens on the shared layout */
.tf-row{display:flex;gap:12px}.tf-row>*{flex:1;min-width:0}
.tf-card .chips{margin:0}
.tf-save{margin-top:4px}
.fb-list .fb-row{padding:12px 0;border-top:1px solid var(--border-hairline)}.fb-list .fb-row:first-child{border-top:0;padding-top:0}.fb-list .fb-row p+p{margin-top:4px}
.rw-need{text-align:right;line-height:1.35}
.cal-next{margin-top:12px}
.cal-next .task.next .tt{font-weight:600}
.pd-nextt{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-hairline)}
.pd-nextt b{color:var(--text);font-weight:600}

/* Weather Phase 1: gardens + weather inside Vườn */
.gd-pick{margin:4px 0 10px}
.gd-wx{padding:16px 18px}
.gd-wx-top{align-items:flex-start}
.gd-wx-now{display:flex;align-items:center;gap:12px}
.gd-wx-now b{display:block;font-size:34px;line-height:1;font-weight:800;letter-spacing:-.02em;color:var(--primary)}
.gd-wx-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 4px;font-size:13px;color:var(--text-muted)}
.gd-wx-meta span{display:inline-flex;align-items:center;gap:4px}
.gd-hrs{display:flex;gap:4px;overflow-x:auto;margin:10px -18px 0;padding:6px 18px 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gd-hrs::-webkit-scrollbar{display:none}
.gd-hrs>div{flex:0 0 52px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;border-radius:var(--radius-sm);background:var(--soft-green)}
.gd-hrs span{font-size:12px;color:var(--text-muted)}.gd-hrs b{font-size:14px;color:var(--text)}.gd-hrs i{font-style:normal;font-size:11px;color:#2F6FA6;min-height:14px}
.gd-wx-src{margin-top:8px}
.gd-row{padding:12px 0;border-top:1px solid var(--border-hairline);gap:10px}.gd-row:first-child{border-top:0;padding-top:0}
.gd-row .small{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:2px}
.gd-act{display:flex;gap:6px;flex:0 0 auto}.gd-act .btn{margin:0}
.gd-list{margin-bottom:12px}.gd-note{margin-top:10px}
.gd-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.gd-btns .btn{margin:0}.gd-del{color:var(--danger,#B3261E)}
.pd-gd{margin-bottom:10px}
.wx-where{display:flex;align-items:center;gap:4px;margin:2px 2px 10px}
.wx-hours{padding:14px 0 10px}
.wx-chart{overflow-x:auto;padding:0 12px;-webkit-overflow-scrolling:touch}
.wx-chart svg{display:block}
.wx-line{fill:none;stroke:var(--primary);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.wx-bar{fill:#9CC3E6}
.wx-tl{font-size:11px;font-weight:700;fill:var(--text);text-anchor:middle}
.wx-hl{font-size:10px;fill:var(--text-muted);text-anchor:middle}
.wx-legend{display:flex;align-items:center;gap:6px;padding:6px 18px 0}
.wx-k1,.wx-k2{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--primary)}.wx-k2{height:8px;width:8px;background:#9CC3E6;margin-left:8px}
.wx-src{margin:10px 2px}
@media (min-width:720px){.wx-meta{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Weather Phase 2: risk analysis */
.rk-card .rk-head{font-weight:600;margin:6px 0 4px}
.rk-kinds{margin:6px 0 2px}.rk-kinds .chip{cursor:default}
.rk-row{cursor:pointer;flex-wrap:nowrap!important;gap:10px}.rk-row .lh-tt{min-width:0}.rk-row .tag{flex:0 0 auto}
.rk-ban{display:flex;flex-wrap:wrap;gap:4px;align-items:center;width:100%;text-align:left;margin:10px 0 0;border:0;cursor:pointer;font:inherit}
.rk-ban.rk-b2{background:#FDF1DC;color:var(--warning)}.rk-ban.rk-b3{background:#FBE3E1;color:#9B2C22}
.rk-note{margin-top:10px}
.tag.rk-l1{background:var(--soft-green);color:var(--primary)}
.tag.rk-l2{background:#FDF1DC;color:var(--warning)}
.tag.rk-l3{background:#FBE3E1;color:#9B2C22}
.rk-item{padding:10px 0;border-top:1px solid var(--border-hairline)}.rk-item:first-child{border-top:0;padding-top:0}
.rk-item p{margin-top:4px}.rk-item .btn{margin:8px 0 0}
.rk-basis{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-hairline)}

/* Weather Phase 3: environment score */
.env-top{display:flex;align-items:center;gap:14px;margin:10px 0 6px}
.env-ring{flex:0 0 auto}.env-r0{fill:none;stroke:var(--soft-green);stroke-width:7}.env-r1{fill:none;stroke:var(--primary);stroke-width:7;stroke-linecap:round}
.env-ring text{font-size:18px;font-weight:800;fill:var(--primary)}
.env-bars{display:grid;gap:6px;margin:8px 0 4px}
.env-bar{display:grid;grid-template-columns:118px 1fr 28px;align-items:center;gap:8px;font-size:13px;color:var(--text-muted)}
.env-bar i{display:block;height:6px;border-radius:6px;background:var(--soft-green);overflow:hidden}.env-bar i b{display:block;height:100%;background:var(--primary);border-radius:6px}
.env-bar .env-v{text-align:right;color:var(--text);font-weight:600}.env-bar em{grid-column:2/4;font-style:normal}
.env-low{margin-top:12px;padding-top:10px;border-top:1px solid var(--border-hairline)}
.env-lr{padding:8px 0;cursor:pointer}.env-lr ul{margin:4px 0 0;padding-left:18px}.env-sc{font-weight:700;color:var(--warning)}
.env-hist{margin-top:10px}
.env-more{margin-top:12px;padding-top:10px;border-top:1px solid var(--border-hairline)}.env-more summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--primary);list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:32px}
.env-more summary::-webkit-details-marker{display:none}.env-more summary:after{content:"+";font-size:18px}.env-more[open] summary:after{content:"–"}.env-more .env-low{border-top:0;margin-top:4px;padding-top:0}

/* Home weather card (real data of the selected garden) */
.hm-grid>.h-wx{flex:1 1 100%;padding:14px 16px}
.h-wx-main{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.h-wx-t b{display:block;font-size:30px;line-height:1;font-weight:800;letter-spacing:-.02em;color:var(--primary)}
.h-wx-r{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.h-wx-r>span{display:inline-flex;align-items:center;gap:3px}
.h-wx-al{display:flex;align-items:center;gap:8px;width:100%;margin-top:12px;padding:10px 12px;border:0;border-radius:var(--radius-sm);font:inherit;font-size:14px;text-align:left;cursor:pointer;background:var(--soft-green);color:var(--text)}
.h-wx-al.rk-b2{background:#FDF1DC}.h-wx-al.rk-b3{background:#FBE3E1}.h-wx-al>span{flex:1;min-width:0}.h-wx-al .tag{flex:0 0 auto}
.h-wx-ok{margin-top:10px;color:var(--text-muted)}
.h-wx-err{display:flex;align-items:center;gap:10px}.h-wx-err p{flex:1}
@media (max-width:560px){.h-wx-main{flex-wrap:wrap;row-gap:6px}.h-wx-r{width:100%;margin-left:60px;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:4px 12px;text-align:left}.h-wx-r>span{white-space:nowrap}}