/* JoyFit Atelier — warm, accessible orange UI; responsive desktop/mobile layouts. */
:root,:root[data-theme="light"]{
  --bg:#fcf7f3;--card:#ffffff;--soft:#fff1e9;--t:#322c29;--t2:#847670;--sep:#eee2dc;--line:#efe3dd;
  --a:#e97748;--g:#d16d45;--b:#c9825e;--p:#a47d8d;--y:#e5aa58;--r:#b95743;--hero:#fbe4d4;--ht:#45342e;
  --fd:"Manrope","DM Sans",system-ui,sans-serif;--fb:"Manrope","DM Sans",system-ui,sans-serif;
  --radius-card:21px;
}
:root[data-theme="dark"]{
 --bg:#1e1a19;--card:#2a2422;--soft:#3b2d28;--t:#fff4ed;--t2:#d1bcb1;--sep:#493b35;--line:#4b3a34;
 --a:#ffa778;--g:#ed9875;--b:#edb497;--p:#c8a4bb;--y:#f6ba77;--r:#ef8e80;--hero:#4d342d;--ht:#fff2e8;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="dark"]){--bg:#fcf7f3;--card:#fff;--soft:#fff1e9;--t:#322c29;--t2:#847670;--sep:#eee2dc;--line:#efe3dd;--a:#e97748;--g:#d16d45;--b:#c9825e;--p:#a47d8d;--y:#e5aa58;--r:#b95743;--hero:#fbe4d4;--ht:#45342e}}
html,body{background:var(--bg);color:var(--t)}
body{font-family:var(--fb);letter-spacing:-.018em;font-size:14px}
button{border-radius:12px;background:var(--btn-bg,var(--a));color:#fff;cursor:pointer;font-weight:730;box-shadow:none}
button.g,button.chip,button.jf-outline,button.jf-subtle{color:var(--t);background:var(--soft)}
/* (removido) regra que forçava texto #30231e em quase todo botão no modo escuro — deixava botões transparentes ilegíveis */
:root[data-theme="dark"] button.jf-outline,:root[data-theme="dark"] button.jf-subtle{color:var(--t)}
input,textarea,select{background:var(--card);border:1px solid var(--line);color:var(--t);border-radius:12px;min-height:44px}
input:focus-visible,button:focus-visible,select:focus-visible,.jf-chart-scroll:focus-visible{outline:3px solid #eea47d;outline-offset:2px}
.card{border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 28px rgba(106,62,40,.035)}
.card.hero{color:var(--t);background:linear-gradient(125deg,#f9d4be,#fde9dd)}
.card.hero:before,.card.hero:after{display:none}
.card.hero .sub{color:#795c4e}
.hero-progress i{background:var(--a)!important}
.coach{border-color:var(--line);border-left:3px solid var(--a);background:var(--card)}
#login .box{box-shadow:0 28px 100px rgba(100,50,25,.09)}
#login .wm{color:var(--a)}
#login #lg0{background:#fff0e7}
#login #ab,#login form>button{background:var(--a)}
#intro:not(:has(.ob-shell)){background:#e97748}
#nav{background:var(--card);border-color:var(--line)}
#nav button{color:var(--t2)}
#nav button.on{color:var(--a)!important;background:var(--soft)!important}
#nav button:hover{color:var(--a)}
#app{max-width:1800px;margin-left:0;padding-top:34px}
.jf-screen{width:100%;max-width:1400px;margin:auto;animation:jfEnter .25s ease-out}
@keyframes jfEnter{from{opacity:.8;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.jf-page-header{display:flex;align-items:center;gap:18px;margin:0 0 29px;min-height:96px}
.jf-head-text{min-width:0;flex:1}
.jf-eyebrow,.jf-tag{display:block;font-size:10px;font-weight:850;letter-spacing:.12em;color:var(--a);text-transform:uppercase}
.jf-head-text h1{font-weight:850;font-size:clamp(30px,3.4vw,42px);letter-spacing:-.057em;line-height:1.13;margin:6px 0 7px}
.jf-head-text p{font-size:14px;line-height:1.55;color:var(--t2);margin:0}
.jf-avatar{flex:none;width:74px;height:74px;min-height:74px;border-radius:50%;border:3px solid #e7aa82;padding:3px;position:relative;background:var(--soft);display:grid;place-items:center;overflow:visible;box-shadow:0 0 0 4px rgba(233,119,72,.07)}
.jf-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.jf-avatar .jf-initial{font-size:29px;font-weight:900;color:var(--a)}
.jf-avatar small{position:absolute;bottom:-5px;right:-7px;border:2px solid var(--card);border-radius:12px;min-width:27px;padding:2px 5px;background:var(--a);color:white;text-align:center;font-size:10px;font-weight:850}
.jf-tier-0{border-color:#e2aa86}.jf-tier-1{border-color:#efab55;box-shadow:0 0 0 4px #ffb45a22}.jf-tier-2{border-color:#efa53c;box-shadow:0 0 0 5px #f1b95438}.jf-tier-3,.jf-tier-4,.jf-tier-5{border-color:#e5a92b;box-shadow:0 0 0 5px #e5a92b44,0 0 0 7px #e5a92b22}
.jf-head-action{flex:none;width:43px;height:43px;display:grid;place-items:center;background:var(--soft);color:var(--a)!important;border:1px solid var(--line)}
.jf-head-action svg{width:19px;height:19px}
.jf-panel{border-radius:22px;background:var(--card);border:1px solid var(--line);padding:25px;min-width:0;box-shadow:0 12px 34px rgba(100,55,30,.035)}
.jf-panel h2{line-height:1.25;letter-spacing:-.04em}
.jf-panel p{color:var(--t2)}
.jf-section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.jf-section-title h2{font-size:17px;font-weight:850;margin:0}
.jf-section-title p{margin:4px 0 0;font-size:12px;line-height:1.55;color:var(--t2)}
.jf-progress{height:9px;background:rgba(104,72,57,.11);border-radius:100px;overflow:hidden;display:block;min-width:0}
.jf-progress i{display:block;height:100%;border-radius:100px;background:var(--a);transition:width .3s ease}
.jf-link{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent!important;padding:5px 0;color:var(--a)!important;font-size:12px;min-height:0;font-weight:800}
.jf-link svg{width:16px;height:16px}
.jf-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#e97748!important;color:#fff!important;border:1px solid #e97748;border-radius:12px;font-size:12px;font-weight:850;min-height:43px}
.jf-primary:hover{background:#cf6438!important}
.jf-wide{width:100%}
.jf-outline,.jf-subtle{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent!important;color:var(--t)!important;border:1px solid var(--line);min-height:40px;font-size:12px}
.jf-outline:hover{border-color:var(--a)}
.jf-subtle{border:0;color:var(--t2)!important}
.jf-outline svg,.jf-primary svg{width:16px;height:16px}
.jf-footnote,.jf-panel .jf-footnote{font-size:11px;color:var(--t2);line-height:1.6;margin:13px 0 0}
.jf-empty{font-size:13px;color:var(--t2);line-height:1.65;padding:20px 0}
.jf-home-layout{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(310px,1fr);gap:18px;align-items:stretch}
.jf-calorie-panel{background:linear-gradient(125deg,#fde5d7 0%,#fff0e6 55%,#fff9f5 100%);border-color:#f6d9c7;grid-column:1;grid-row:1/3;display:flex;flex-direction:column;min-height:350px;padding:32px}
.jf-calorie-panel .jf-hero-title{font-size:19px;font-weight:850;margin:12px 0 5px}
.jf-cal-number{font-size:clamp(60px,6.4vw,92px);letter-spacing:-.08em;line-height:1.08;color:#af4c2a;font-weight:900;white-space:nowrap}
.jf-cal-number span{font-size:20px;letter-spacing:0;font-weight:700;color:#8d5b47}
.jf-calorie-panel p{font-size:13px;color:#896959;margin:4px 0 20px}
.jf-calorie-panel .jf-progress{max-width:470px}
.jf-split-stats{margin-top:auto;display:flex;gap:9px;padding-top:28px}
.jf-split-stats>div{flex:1;min-width:0;border-top:1px solid #ebc9b5;padding-top:15px;display:grid;gap:3px}
.jf-split-stats span{font-size:11px;color:#986f60}.jf-split-stats strong{font-size:14px;color:#583f34}
.jf-reward-panel{position:relative;background:linear-gradient(120deg,#fff,#fff4ec);min-height:170px;grid-column:2;grid-row:1;overflow:hidden}
.jf-reward-icon{position:absolute;right:22px;top:21px;color:#e6a465}
.jf-reward-icon svg{width:38px;height:38px}
.jf-reward-panel h2{font-size:33px;margin:8px 0 2px;color:var(--t)}
.jf-reward-panel>p{font-size:12px;margin:0 0 13px}
.jf-reward-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:7px;margin-top:14px}
.jf-reward-footer span{font-size:11px;color:var(--t2);display:flex;gap:4px;align-items:center}
.jf-reward-footer svg{width:16px;height:16px}
.jf-home-minis{display:grid;grid-template-columns:1fr 1fr;gap:15px;grid-column:2;grid-row:2}
.jf-mini{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:var(--t);cursor:pointer;min-height:165px;padding:19px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.jf-mini>span:not(.jf-mini-icon){font-size:12px;font-weight:800}.jf-mini>strong{font-size:19px;font-weight:850;line-height:1.35;letter-spacing:-.04em}
.jf-mini>small{font-size:11px;color:var(--t2);line-height:1.4}.jf-mini .jf-progress{width:100%;height:5px;margin-top:auto}
.jf-mini-icon{width:31px;height:31px;border-radius:10px;background:var(--soft);display:grid;place-items:center;color:var(--a)}
.jf-mini-icon svg{height:18px;width:18px}.jf-mini-cta{display:inline-flex;align-items:center;gap:4px;color:var(--a);font-size:11px}
.jf-mini-cta svg{width:13px;height:13px}
.jf-week-panel{grid-column:1;grid-row:3}.jf-tip-panel{grid-column:2;grid-row:3;background:#fff6f0;display:flex;flex-direction:column;justify-content:center}
.jf-tip-panel h2{font-size:25px;margin:9px 0}.jf-tip-panel p{line-height:1.65;font-size:13px}.jf-tip-panel button{align-self:flex-start;margin-top:10px}
.jf-week-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:end;margin:12px 0}
.jf-week-item{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
.jf-week-track{height:86px;width:100%;max-width:56px;border-radius:10px;background:var(--soft);display:flex;align-items:flex-end;overflow:hidden;padding:4px}
.jf-week-track i{display:block;width:100%;border-radius:7px;background:#f3bc9b;transition:height .3s}
.jf-week-track .is-complete{background:#e97748}
.jf-week-item>span{font-size:11px;color:var(--t2);font-weight:700}
.jf-week-bottom{display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:12px;color:var(--t2);margin-top:15px;border-top:1px solid var(--line);padding-top:12px}
.jf-water-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1.1fr);gap:18px}
.jf-water-hero{background:linear-gradient(155deg,#fce5d6,#fff9f5);border-color:#f5dccf;min-height:390px;display:flex;flex-direction:column;justify-content:center}
.jf-water-splash{background:rgba(233,119,72,.12);width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#dd754c;margin-bottom:18px}
.jf-water-splash svg{width:28px;height:28px}
.jf-water-hero h2{font-size:clamp(68px,7vw,100px);margin:12px 0 0;color:#af4f2f;font-weight:900;letter-spacing:-.08em;line-height:1.1}
.jf-water-hero h2 small{font-size:13px;letter-spacing:-.01em;color:#9a6755;font-weight:700}
.jf-water-hero p{margin:4px 0 22px;font-size:14px;color:#875a48}
.jf-water-goal{font-size:15px;color:#9b6048;margin-top:26px;padding-top:18px;border-top:1px solid #edcaba}
.jf-water-goal strong{color:#b64b28}
.jf-water-register{min-width:0}.jf-water-actions{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.jf-water-actions button{background:var(--soft);border:1px solid var(--line);color:var(--t)!important;min-height:81px;display:flex;gap:12px;align-items:center;text-align:left;padding:14px;border-radius:14px}
.jf-water-actions button>svg{width:24px;height:24px;flex:none;color:var(--a)}
.jf-water-actions button span{font-size:12px;line-height:1.4;display:grid;gap:1px}.jf-water-actions button strong{font-size:17px}.jf-water-actions button small{font-size:10px;color:var(--t2)}
.jf-water-actions button.jf-undo span{font-weight:750}
.jf-water-actions button:disabled{opacity:.42;cursor:not-allowed}
.jf-custom-water{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.jf-custom-water label{font-size:12px;font-weight:800}.jf-custom-water>div{display:flex;gap:9px;margin-top:7px}
.jf-custom-water input{width:100%;max-width:180px}.jf-custom-water button{flex:1;white-space:nowrap}
.jf-water-week{grid-column:1/-1}.jf-water-week .jf-week-bars{max-width:850px;margin:auto}
.jf-water-week .jf-week-track{height:105px;max-width:90px}
.jf-info-strip{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);margin-top:18px;padding-top:16px;font-size:12px;color:var(--t2)}
.jf-info-strip strong{color:var(--t);font-size:17px}
.jf-workout-level{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-bottom:18px;background:linear-gradient(120deg,#fee6d5,#fff4ec)}
.jf-workout-level>div:first-child{flex:1}.jf-workout-level h2{font-size:36px;margin:7px 0}.jf-workout-level p{font-size:12px;margin:0 0 17px}.jf-workout-level .jf-progress{max-width:650px}
.jf-chest{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff6ed;border:1px solid #f2d6c0;border-radius:17px;min-width:170px;padding:14px;color:#9c5e36}
.jf-chest svg{width:37px;height:37px}.jf-chest span{font-size:10px}.jf-chest strong{font-size:13px}
.jf-workout-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.jf-today{grid-row:1/3}.jf-checklist{display:grid;gap:9px;margin-bottom:20px}.jf-exercise{display:flex;align-items:center;gap:13px;cursor:pointer;background:var(--bg);border:1px solid var(--line);border-radius:13px;padding:14px;font-size:13px;font-weight:660;line-height:1.5}
.jf-exercise input{width:20px;height:20px;accent-color:var(--a);flex:none;min-height:0}
.jf-exercise.is-done span{text-decoration:line-through;color:var(--t2)}
.jf-schedule{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.jf-schedule>div{background:var(--soft);border-radius:12px;text-align:center;padding:15px 5px;display:flex;flex-direction:column;gap:4px}
.jf-schedule .is-done{background:#ffdbc6}.jf-schedule strong{font-size:12px}.jf-schedule span{color:var(--t2);font-size:10px}
.jf-grid-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:23px;padding-top:18px;border-top:1px solid var(--line)}
.jf-grid-metrics div{display:grid;gap:5px}.jf-grid-metrics strong{font-size:23px;line-height:1.1}.jf-grid-metrics span{font-size:10px;color:var(--t2)}
.jf-workout-rewards{grid-column:2;grid-row:2}.jf-milestones{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.jf-milestone{display:grid;justify-items:center;gap:7px;border:1px solid var(--line);border-radius:12px;padding:13px 6px;color:var(--t2);background:var(--bg);text-align:center}
.jf-milestone svg{width:24px;height:24px}.jf-milestone strong{font-size:12px;color:var(--t)}.jf-milestone span{font-size:10px}
.jf-milestone.is-unlocked{background:#fff0d9;border-color:#f9d4a4;color:#c17f22}.jf-milestone.is-next{background:#fff0e6;border-color:#f0b48c;color:var(--a)}
.jf-social{grid-column:1/-1}.jf-peer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.jf-peer{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;min-width:0}
.jf-peer-place{width:25px;font-size:12px;font-weight:900;color:var(--a)}.jf-peer-avatar{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--a);font-weight:850;flex:none}
.jf-peer>div:nth-child(3){flex:1;min-width:0;display:grid;gap:2px}.jf-peer strong{font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.jf-peer small{font-size:10px;color:var(--t2)}.jf-peer>b{color:var(--a);font-size:16px}
.jf-social-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.jf-invite-join{display:flex;gap:8px;flex:1;min-width:min(100%,270px)}.jf-invite-join input{min-width:0;flex:1}.jf-invite-join button{white-space:nowrap}
.jf-invite-result{background:var(--soft);border-radius:13px;padding:14px;margin-top:13px;display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.jf-invite-result code{font-size:15px;color:var(--a);font-weight:850;letter-spacing:.05em}.jf-invite-result span{font-size:11px;color:var(--t2)}
.jf-workout-extra{grid-column:1/-1}.jf-extra-form{display:flex;gap:10px}.jf-extra-form select,.jf-extra-form input{flex:1;min-width:0}
.jf-activity-row{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line);gap:12px;font-size:12px}.jf-activity-row:first-of-type{margin-top:12px}.jf-activity-row span{color:var(--t2)}
.jf-result-chart{margin-bottom:18px}.jf-chart-scroll{width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.jf-weight-svg{display:block;width:100%;min-width:0;height:auto;min-height:260px}
.jf-chart-legend{display:flex;gap:13px;flex-wrap:wrap;font-size:11px;color:var(--t2);margin:4px 0 14px}
.jf-chart-legend span{display:flex;align-items:center;gap:6px}.jf-chart-legend i{width:23px;height:0;border-top:3px solid var(--a)}
.jf-chart-legend i.jf-projected{border-top:2px dashed #9b8a83}.jf-chart-legend i.jf-goal{border-top:2px dashed var(--y)}
.jf-result-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.jf-metric{border-radius:17px;background:var(--card);border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:7px;min-width:0}
.jf-metric span{font-size:11px;color:var(--t2);font-weight:720}.jf-metric strong{font-size:clamp(19px,2.4vw,28px);letter-spacing:-.05em}.jf-metric small{font-size:10px;color:var(--t2)}
.jf-performance-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.jf-mini-chart{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;height:106px;align-items:end}.jf-mini-chart>div{height:100%;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:9px;background:transparent}
.jf-mini-chart i{width:75%;max-width:44px;background:#f0a57d;border-radius:7px;display:block}.jf-mini-chart small{font-size:10px;color:var(--t2)}
.jf-result-actions>div:last-child{display:flex;gap:10px;flex-wrap:wrap}.jf-upload-label{cursor:pointer;padding:10px 14px}
/* Smart photo modal with review before saving; above the persistent mobile navbar. */
.jf-meal-sheet{z-index:80!important}
.jf-meal-sheet .box{max-width:760px;padding:27px;display:grid;gap:20px}
.jf-meal-sheet .jf-modal-head{display:flex;align-items:start;justify-content:space-between;gap:16px}
.jf-modal-head h2{font-size:27px;letter-spacing:-.06em;margin:6px 0 4px}.jf-modal-head p{font-size:12px;color:var(--t2);margin:0}
.jf-close{border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--t)!important;font-size:26px;height:40px;width:40px;min-height:40px;padding:0}
.jf-ai-photo{background:#fff3eb;border:1px solid #f5d5c3;border-radius:18px;padding:18px}
:root[data-theme="dark"] .jf-ai-photo{background:var(--soft);border-color:var(--line)}
.jf-ai-head{display:flex;gap:11px;align-items:start;margin-bottom:14px}.jf-ai-head svg{color:var(--a);flex:none;width:25px;height:25px}
.jf-ai-head strong{font-size:15px}.jf-ai-head p{font-size:11px;color:var(--t2);margin:4px 0 0;line-height:1.5}
.jf-photo-picker{display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-size:12px;font-weight:850;padding:13px;border:1.5px dashed #e9a884;color:var(--a);border-radius:12px;background:var(--card)}
.jf-photo-thumb{margin:16px auto;max-width:340px;max-height:260px;border-radius:13px;overflow:hidden}.jf-photo-thumb img{width:100%;max-height:260px;object-fit:cover;display:block}
.jf-analyzed-title{display:flex;gap:10px;justify-content:space-between;align-items:center;margin:16px 0 9px}.jf-analyzed-title strong{font-size:14px}.jf-analyzed-title span{font-size:10px;color:var(--a)}
.jf-food-rows{background:var(--card);border-radius:13px;overflow:hidden;border:1px solid var(--line)}.jf-food-row{padding:11px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line)}.jf-food-row:last-child{border-bottom:0}
.jf-food-row>div{min-width:0;display:grid;gap:3px}.jf-food-row strong{font-size:12px}.jf-food-row small,.jf-food-row label span{font-size:10px;color:var(--t2)}
.jf-food-row label{display:grid;gap:3px;max-width:95px}.jf-food-row input{width:100%;min-height:36px;height:36px;padding:7px}
.jf-ai-totals{border:1px solid #edc5ae;border-radius:13px;background:#fff7f2;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:8px;padding:12px;margin-top:14px;font-size:10px;color:#7d5b4b}
.jf-ai-totals strong{font-size:18px;color:#9c4e33}.jf-ai-totals span{line-height:1.45}
.jf-ai-error{font-size:12px;color:#a74330;margin:15px 0}.jf-ai-loading{padding:30px 5px;text-align:center;color:var(--a);font-size:13px;display:grid;justify-items:center;gap:13px}.jf-ai-loading svg{width:28px;height:28px}
.jf-manual-entry{display:grid;gap:10px}.jf-manual-entry .jf-section-title{margin-bottom:6px}.jf-manual-entry>input{margin:0}.jf-label{font-weight:800;font-size:12px;margin-top:7px}
.jf-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.jf-form-grid label{font-size:11px;font-weight:750;color:var(--t2)}.jf-form-grid input{width:100%;margin-top:5px!important}
.jf-recents{display:flex;gap:7px;flex-wrap:wrap}.jf-recents button{min-height:32px}
.jf-recent-meals .jf-section-title{margin-bottom:7px}.jf-record-row{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding:10px 0}.jf-record-row>div{display:grid;gap:3px}.jf-record-row strong{font-size:12px}.jf-record-row small{font-size:10px;color:var(--t2)}
/* Existing Diet, Profile and Onboarding — bring them into the new design family. */
.ht,.top h1{color:var(--t)}.hd-kicker{color:var(--a)}.bub{color:var(--t2)}
.meal-mark{background:var(--soft);color:var(--a)}.meal:hover{background:var(--soft)}
.stats .big,.grid .big,.big{color:var(--t)}
.avatar-initial{color:var(--a)}.av.jf-profile-avatar{border:3px solid #edb188;border-radius:50%;padding:3px;box-shadow:0 0 0 4px #fce4d5}
#sh .sheet>.box{border-radius:22px;background:var(--card)}
/* Sidebar is a separate desktop experience. */
@media(min-width:960px){
 #nav{width:244px;border-right:1px solid var(--line);box-shadow:0 0 30px #a9704b08;background:#fffaf6;padding:30px 15px}
 #nav:before{content:'joyfit';color:#cf6b41;font-size:29px;padding:0 14px 33px;letter-spacing:-.07em}
 #nav:after{color:#b58b74;font-size:9px;bottom:24px}
 #nav button{border-radius:12px;min-height:49px;padding:12px 15px}
 #nav button.on{background:#ffeadf!important;color:#bf5e37!important}
 #app{margin-left:244px;padding:35px clamp(24px,3.3vw,65px) 65px;max-width:none}
 #sy{left:270px}
}
@media(min-width:960px) and (max-width:1250px){.jf-home-layout{grid-template-columns:1fr 1fr}.jf-cal-number{font-size:67px}.jf-home-minis{gap:8px}.jf-mini{padding:13px}.jf-reward-footer{display:block}}
/* Mobile is composed independently: no desktop-sized cards, large touch targets, bottom bar. */
@media(max-width:959px){
 #app{margin:0 auto;width:100%;max-width:650px;padding:23px 0 calc(116px + env(safe-area-inset-bottom,0px))}
 .jf-screen{padding:0 14px}.jf-page-header{margin:0 3px 22px;align-items:center;gap:12px;min-height:74px}
 .jf-avatar{width:59px;height:59px;min-height:59px}.jf-avatar .jf-initial{font-size:23px}
 .jf-head-text h1{font-size:clamp(23px,6.4vw,31px);margin:4px 0 5px}.jf-head-text p{font-size:12px;line-height:1.4}.jf-eyebrow{font-size:9px}
 .jf-head-action{width:37px;height:37px;min-height:37px;padding:0}
 .jf-home-layout,.jf-water-layout,.jf-workout-grid,.jf-performance-grid{display:grid;grid-template-columns:1fr;gap:12px}
 .jf-home-layout>*{grid-column:auto!important;grid-row:auto!important}
 .jf-panel{padding:19px;border-radius:18px}.jf-calorie-panel{min-height:270px;padding:24px}
 .jf-calorie-panel .jf-hero-title{font-size:17px}.jf-cal-number{font-size:clamp(55px,11vw,75px)}.jf-cal-number span{font-size:16px}
 .jf-split-stats{padding-top:22px}.jf-split-stats strong{font-size:12px}
 .jf-reward-panel{min-height:158px}.jf-reward-panel h2{font-size:28px}
 .jf-home-minis{grid-template-columns:1fr 1fr;gap:10px}.jf-mini{padding:15px;min-height:170px}
 .jf-mini>strong{font-size:16px}.jf-mini>small{font-size:10px}
 .jf-tip-panel h2{font-size:21px}
 .jf-section-title{margin-bottom:14px}.jf-section-title h2{font-size:16px}
 .jf-week-track{height:70px}.jf-week-bars{gap:7px}
 .jf-water-hero{min-height:255px}.jf-water-hero h2{font-size:74px}.jf-water-hero h2 small{display:block;margin-top:3px}
 .jf-water-register .jf-water-actions button{padding:12px 9px;min-height:77px;gap:6px}.jf-water-actions button svg{width:20px;height:20px}.jf-water-actions button strong{font-size:14px}
 .jf-custom-water>div{gap:7px}.jf-custom-water button{white-space:normal;font-size:11px}
 .jf-workout-level{padding:18px;align-items:center}.jf-workout-level h2{font-size:29px}.jf-workout-level p{font-size:11px}.jf-chest{min-width:100px;padding:10px 7px}.jf-chest svg{width:29px;height:29px}.jf-chest strong{font-size:11px}
 .jf-workout-grid>*{grid-column:auto!important;grid-row:auto!important}.jf-schedule{gap:5px}.jf-schedule>div{padding:12px 4px}
 .jf-milestone{padding:10px 4px}.jf-milestone strong{font-size:10px}.jf-milestone span{font-size:9px}
 .jf-peer-list{grid-template-columns:1fr}.jf-invite-join{flex-wrap:wrap}
 .jf-extra-form{display:grid;grid-template-columns:1fr 1fr}.jf-extra-form button{grid-column:1/-1}
 .jf-result-metrics{grid-template-columns:1fr 1fr;gap:9px}.jf-metric{padding:14px}.jf-metric strong{font-size:21px}
 .jf-result-chart{overflow:hidden}.jf-chart-scroll{margin:4px -6px;width:calc(100% + 12px)}.jf-weight-svg{min-width:0;min-height:0}
 .jf-result-actions>div:last-child{flex-direction:column;align-items:stretch}
 #nav{padding-top:7px;background:#fffaf7;box-shadow:0 -10px 35px rgba(96,50,30,.07)}
 #nav button{font-size:10px;color:var(--t2)}#nav button.on{background:#ffe8dc!important;color:#c66239!important}
 #nav button:nth-child(6){display:none} /* profile is always available via the header avatar */
 .jf-meal-sheet .box{padding:19px 16px calc(22px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0;max-height:93dvh}
 .jf-ai-totals{grid-template-columns:1fr 1fr}.jf-food-row strong{font-size:11px}
}
@media(max-width:390px){.jf-home-minis{grid-template-columns:1fr 1fr}.jf-mini{padding:12px}.jf-head-action{display:none}.jf-water-actions{grid-template-columns:1fr 1fr}.jf-water-actions button span{font-size:11px}.jf-week-track{height:64px}.jf-split-stats{gap:4px}}
@media(prefers-reduced-motion:reduce){.jf-screen{animation:none}.jf-progress i,.jf-week-track i{transition:none}}