/* JOYFIT STUDIO / v3 — UI-only layer. API, state and existing flows remain unchanged. */
:root{
 --bg:#f7f8f5;--card:#ffffff;--soft:#f0f3ed;--t:#19251f;--t2:#708078;--sep:#e6eae3;--line:#e6eae3;
 --a:#38664d;--g:#43876a;--b:#578898;--p:#806a9b;--y:#b68c49;--r:#bd5d55;
 --hero:#163b2c;--ht:#fffef6;--radius-card:17px;--shadow-card:none;
 --fd:"DM Sans","Segoe UI",system-ui,sans-serif;--fb:"DM Sans","Segoe UI",system-ui,sans-serif;
}
:root[data-theme="dark"]{--bg:#121a17;--card:#1b2621;--soft:#26342d;--t:#f2f6f1;--t2:#a1b1a7;--sep:#34433a;--line:#34433a;--a:#9ac7a4;--g:#8ac79f;--b:#91c5d2;--p:#c1acd6;--y:#dfc18c;--r:#e28c83;--hero:#254c39;--ht:#fffef6}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121a17;--card:#1b2621;--soft:#26342d;--t:#f2f6f1;--t2:#a1b1a7;--sep:#34433a;--line:#34433a;--a:#9ac7a4;--g:#8ac79f;--b:#91c5d2;--p:#c1acd6;--y:#dfc18c;--r:#e28c83;--hero:#254c39;--ht:#fffef6}}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);font:400 15px/1.55 var(--fb);letter-spacing:-.012em}
button,input,select,textarea{font-family:var(--fb)}
button{background:var(--btn-bg,var(--a));color:#fff;border-radius:10px;font-weight:650;font-size:13px;padding:11px 16px;min-height:43px;box-shadow:none}
/* (removido) mesma regra antiga que escurecia o texto de todos os botões no modo escuro */
button.g,button.chip{background:var(--soft);color:var(--t)}
button:hover{filter:brightness(.96)}
input,select{background:var(--card);border-color:var(--line);border-radius:10px;font-size:14px}
#app{max-width:none;padding:28px 22px 112px}
#app .ent{animation:fin .22s ease-out}
.top,.hd{margin:0 0 27px;padding:0;align-items:flex-end}
.top h1,.ht{font-size:clamp(28px,3.2vw,40px);font-weight:750;letter-spacing:-.055em;line-height:1.1}
.top .dt{font-size:12px;font-weight:650;letter-spacing:.04em;color:var(--t2);text-transform:capitalize!important}
.hd-kicker{font-size:11px;letter-spacing:.12em;color:var(--a);font-weight:750}
.bub{max-width:680px;line-height:1.55;font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:21px 22px;margin:0 0 14px;box-shadow:none}
.card[onclick]{transition:border-color .18s,transform .18s,background .18s}
.card[onclick]:hover{border-color:var(--a);transform:translateY(-2px);background:var(--card)}
.lab{font-size:13px;font-weight:750;letter-spacing:-.01em}
.sub{font-size:12px;color:var(--t2);line-height:1.55}
.big{font-size:32px;font-weight:730;letter-spacing:-.055em}
.big.xl{font-size:clamp(65px,8vw,110px);line-height:.95;letter-spacing:-.075em}
.ovr{font-size:72px}
.card.hero{background:var(--hero);color:var(--ht);border-radius:20px;padding:31px 32px;box-shadow:none;position:relative;overflow:hidden}
.card.hero:before{content:"";position:absolute;right:-88px;top:-140px;width:340px;height:340px;border:1px solid rgba(255,255,255,.12);border-radius:50%;pointer-events:none}
.card.hero:after{content:"";position:absolute;right:-23px;top:-80px;width:215px;height:215px;border:1px solid rgba(255,255,255,.09);border-radius:50%;pointer-events:none}
.card.hero>*{position:relative;z-index:1}
.card.hero .sub{color:#c6d7c9}
.hero-calorie>.sub:first-child{font-size:10px;letter-spacing:.14em;font-weight:750;margin-bottom:16px}
.hero-progress{height:6px;max-width:430px;margin-top:23px;background:rgba(255,255,255,.22)}
.hero-progress i{background:#c6e5a5!important}
.lg{border-top:1px solid rgba(255,255,255,.19);padding-top:18px;margin-top:18px;gap:10px}
.lg>div{font-size:11px}.lg b{font-size:15px;letter-spacing:-.025em}
.lg i.dt{display:none!important}
.stats{border-radius:16px;overflow:hidden}
.stats>div{padding:19px 22px}.stats .big{font-size:29px}
.coach{border:1px solid var(--line);border-left:3px solid var(--g);border-radius:0 12px 12px 0;background:var(--card);padding:14px 17px;margin:0 0 14px;color:var(--t2);font-size:13px;line-height:1.55}
.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px}
.dashboard-grid>.card{margin:0;min-height:168px;display:flex;flex-direction:column;justify-content:center}
.dashboard-grid>.card.row{flex-direction:row;justify-content:flex-start}
.dashboard-grid .card:last-child{grid-column:1/-1;min-height:100px}
.dashboard-grid .lab{color:var(--t)!important;font-size:14px}
.dashboard-grid .tank.mini{width:42px;height:63px;border:2px solid var(--b);border-radius:9px 9px 15px 15px}
.grid{gap:14px;margin:0 0 14px}
.grid .card{border-radius:14px;padding:17px}
.bar{height:6px;margin:10px 0 8px;background:var(--soft)}
.bar i{background:var(--a)}
.home-monogram{border-radius:50%;background:var(--soft);color:var(--a);font-size:19px;width:46px;height:46px}
.meal{cursor:pointer}.meal:hover{background:var(--soft)}
.meal-mark{background:var(--soft);color:var(--a)}
.chip{font-size:12px;font-weight:650;padding:9px 13px;border:1px solid var(--line)}.chip.on{background:var(--a);color:#fff;border-color:var(--a)}
.item{padding:14px 0}
.chk{padding:14px 0}
#nav{background:var(--card);border-color:var(--line);box-shadow:none}
#nav button{transition:background .16s;color:var(--t2);font-size:12px;font-weight:650}
#nav button.on{color:var(--a)}
#nav button b{display:grid;place-items:center}
#nav button b svg{width:21px;height:21px}
#nav button .dot{background:var(--r)}
.jf-install{padding:22px;background:var(--soft);border-color:transparent}
.jf-install h3{margin:0 0 7px;font-size:17px;letter-spacing:-.025em}
.jf-install p{font-size:13px;color:var(--t2);margin:0 0 12px}
.jf-install .install-lines{display:grid;gap:7px;margin-top:12px;font-size:12px;color:var(--t2)}
.jf-install strong{color:var(--t)}
#login{background:var(--bg);color:var(--t)}
#login .box{background:var(--card);border:1px solid var(--line);border-radius:20px;max-width:430px;padding:34px;box-shadow:0 20px 90px #0c302114;color:var(--t)}
#login .wm{font-size:42px;letter-spacing:-.07em;color:var(--t)}
#login .box>p{color:var(--t2)!important}
#login #lg0{width:80px;height:80px;margin:0 auto 18px;border-radius:20px;background:var(--soft);align-items:center;overflow:hidden}

#login .tabs{background:var(--soft);border-radius:11px}
#login .tab{color:var(--t2)!important}
#login .tab.on{background:var(--card)!important;color:var(--t)!important}
#login input{background:var(--bg);border:1px solid var(--line);color:var(--t);border-radius:10px}
#login form>button{background:var(--a);color:white;border-radius:10px}
#login .eye{color:var(--a)}
#intro:has(.ob-shell){background:var(--bg);color:var(--t)}
.ob-shell{background:var(--card);color:var(--t);border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 90px #0c30210d;max-width:780px}
.ob-brand{font-family:var(--fd);font-weight:800;color:var(--t);letter-spacing:-.075em}
.ob-brand span{color:var(--g)}
.ob-step,.ob-foot{color:var(--t2)}
.ob-progress{height:5px;background:var(--soft)}.ob-progress i{background:var(--a)}
.ob-kicker{color:var(--a)}
.ob-content h1,.ob-finish h1{color:var(--t);font-weight:750;font-size:clamp(34px,5vw,52px)}
.ob-content>p,.ob-finish>p{color:var(--t2)}
.ob-field{border-color:var(--line)}.ob-field input{color:var(--t);background:transparent}
.ob-option{background:var(--card)!important;color:var(--t)!important;border:1px solid var(--line)!important;text-align:left;border-radius:12px!important;box-shadow:none!important}
.ob-option small{color:var(--t2)}
.ob-option.selected{background:var(--soft)!important;color:var(--t)!important;border:2px solid var(--a)!important}
.ob-next{background:var(--a)!important;color:#fff!important}.ob-back{color:var(--t2)!important;border-color:var(--line)!important}
#intro .ob-finish-mark{background:var(--soft);color:var(--g)}
#intro:not(:has(.ob-shell)){background:var(--hero);color:#fff}
#intro:not(:has(.ob-shell)) .ob-brand{color:#fff}
#intro:not(:has(.ob-shell)) p{color:#d2e1d7}
#sh .sheet{backdrop-filter:blur(5px)}
#sh .sheet>.box{background:var(--card);border:1px solid var(--line)}
#sh .sheet input{margin:6px 0}
#upd{background:var(--hero)}
#nt{border-radius:14px}
/* Desktop: purpose-built three-column editorial dashboard and full sidebar */
@media(min-width:960px){
 #nav{width:252px;padding:31px 18px;gap:5px;border-right:1px solid var(--line)}
 #nav:before{content:"joyfit";font-family:var(--fd);font-weight:800;font-size:28px;letter-spacing:-.08em;padding:0 14px 40px;color:var(--t)}
 #nav:after{content:none;font-size:9px;letter-spacing:.13em;color:var(--t2);position:absolute;bottom:29px;left:31px}
 #nav button{border-radius:10px;min-height:48px;gap:14px;padding:12px 15px;font-size:14px}
 #nav button.on{background:var(--soft);color:var(--a)}
 #app{margin-left:252px;max-width:1680px;padding:47px clamp(32px,4.5vw,78px) 70px}
 #app:has(.dashboard-grid){display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:0 22px;align-items:start}
 #app:has(.dashboard-grid)>.top{grid-column:1/-1;margin-bottom:35px}
 #app:has(.dashboard-grid)>.card.hero{grid-column:1;grid-row:2/4;min-height:355px;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;margin-bottom:18px}
 #app:has(.dashboard-grid)>.coach{grid-column:1;grid-row:4}
 #app:has(.dashboard-grid)>.card.stats{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px}
 #app:has(.dashboard-grid)>.card.stats>div{padding:22px 13px}
 #app:has(.dashboard-grid)>.card.stats .big{font-size:28px}
 #app:has(.dashboard-grid)>.dashboard-grid{grid-column:2;grid-row:3/5;grid-template-columns:1fr 1fr;gap:14px}
 #app:has(.dashboard-grid)>.dashboard-grid>.card{min-height:177px}
 #app:has(.dashboard-grid)>.dashboard-grid>.card:last-child{min-height:105px}
 .card.hero .lg{width:100%;max-width:none;display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding-top:18px}
 .hero-calorie{min-width:0}
 .top h1{font-size:clamp(34px,3.5vw,49px)}
 #sy{left:272px}
}
@media(min-width:960px) and (max-width:1250px){
 #app:has(.dashboard-grid){display:block}
 #app:has(.dashboard-grid)>.card.hero{min-height:0}
 #app:has(.dashboard-grid)>.card.stats{margin-bottom:14px}
 #app:has(.dashboard-grid)>.dashboard-grid{grid-template-columns:repeat(3,1fr)}
 #app:has(.dashboard-grid)>.dashboard-grid>.card:last-child{grid-column:auto}
}
/* Mobile: distinct bottom navigation, simpler hierarchy, thumb targets, compact cards. */
@media(max-width:959px){
 #app{width:min(100%,650px);margin:auto;padding:21px 0 calc(111px + env(safe-area-inset-bottom,0px))}
 .top,.hd{margin:0 20px 22px}
 .top h1,.ht{font-size:clamp(28px,7vw,34px)}
 .top .dt{font-size:11px}
 .home-monogram{width:41px;height:41px}
 .card{margin:0 14px 12px;padding:19px;border-radius:15px}
 .card.hero{padding:26px 23px;border-radius:17px}
 .card.hero .big.xl{font-size:72px}
 .stats>div{padding:16px 12px}
 .stats .big{font-size:26px}
 .stats .sub{font-size:10px}
 .coach{margin:0 14px 12px;font-size:12px}
 .dashboard-grid{grid-template-columns:1fr 1fr;gap:10px;margin:0 14px 12px}
 .dashboard-grid>.card{margin:0;min-height:155px;padding:16px;align-items:flex-start}
 .dashboard-grid>.card.row{gap:9px;flex-wrap:wrap}
 .dashboard-grid>.card.row .tank{display:none}
 .dashboard-grid>.card.row>div[style*="flex:1"]{min-width:100%}
 .dashboard-grid>.card.row button{padding:8px 11px;min-height:36px}
 .dashboard-grid>.card:last-child{grid-column:1/-1;min-height:94px}
 .dashboard-grid .big{font-size:28px}
 .grid{margin:0 14px 12px;gap:9px}
 .grid .card{padding:13px}
 .big{font-size:29px}
 #nav{position:fixed;z-index:35;bottom:0;top:auto;left:0;right:0;width:100%;max-width:none;display:flex;justify-content:space-around;gap:0;padding:7px max(7px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom,0px)) max(7px,env(safe-area-inset-left));border-top:1px solid var(--line);border-right:0;background:var(--card)}
 #nav:before,#nav:after{display:none}
 #nav button{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px 1px 5px;min-height:56px;background:transparent!important;border-radius:10px;font-size:10px;line-height:1.2;color:var(--t2)}
 #nav button.on{color:var(--a)}
 #nav button b{height:23px}
 #nav button b svg{width:21px;height:21px}
 #nav button .dot{top:1px;right:calc(50% - 18px)}
 .lg{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .lg b{font-size:13px}
 .ob-shell{border-radius:0;min-height:100dvh;padding:28px 23px}
 #intro:has(.ob-shell){padding:0}
 .ob-choices{grid-template-columns:1fr}
 .ob-option{min-height:64px}
 #sy{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
 #upd{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
 .sheet{padding:0;align-items:flex-end}
 .sheet>.box{border-radius:22px 22px 0 0;max-width:none;max-height:90dvh;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:380px){.card.hero .big.xl{font-size:64px}.lg b{font-size:12px}.stats .big{font-size:23px}.dashboard-grid>.card{padding:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card[onclick]{transition:none}}