/* V01 visual proportions. Product semantics remain defined by current contracts. */
:root{--bg:#020608;--panel:#09131c;--line:#182833;--text:#f4f6f7;--muted:#a9bdce;--accent:#4af2c1;font-family:Arial,Helvetica,sans-serif}
body.app-view{background:#080f16}
.app-header{max-width:390px;padding:12px 18px;gap:8px;opacity:.7}
.app-header .wordmark{font-size:10px;letter-spacing:.08em}.app-header .wordmark span{display:none}.app-header a{font-size:10px}
.app-view main{max-width:390px;padding:0 15px 24px;margin:0 auto}
.demo-label{font-size:8px;letter-spacing:.04em;margin:0 0 10px;color:#93a7b4}
.app-view .phone{position:relative;min-height:740px;background:#010507;border:3px solid #2a3b49;border-radius:34px;padding:30px 19px 105px;box-shadow:0 16px 60px #0004}
.app-view #screen>h2{font-size:23px;line-height:1.2;font-weight:600;margin:7px 0 20px}
.app-view .card{background:linear-gradient(120deg,#0a141d,#071019);border:1px solid #172733;border-radius:12px;padding:13px;margin:13px 0}
.app-view p{line-height:1.4}.app-view button{border-radius:10px;font-weight:400}.app-view .primary{background:#4af2c1;color:#00221b;font-size:12px;font-weight:600;box-shadow:inset 0 0 12px #adffdb44}
.app-view #bottom{position:fixed;width:322px;max-width:calc(100% - 64px);bottom:18px;border:1px solid #1c303c;border-radius:19px;background:#030a10f7;padding:4px 2px;box-shadow:none}
.app-view #bottom button{background:transparent;gap:5px;font-size:9px;padding:8px 1px;color:#a7baca;min-height:52px}
.app-view #bottom button[aria-pressed=true]{background:transparent;color:#43f4be}.app-view #bottom button[aria-pressed=true] svg{filter:drop-shadow(0 0 6px #28d99a88)}.app-view #bottom svg{width:19px;height:19px;stroke-width:1.3}
.app-view .greeting{margin:4px 0 0;position:relative;z-index:1}.app-view .greeting p{font-size:14px;color:#fff;margin:0 0 2px}.app-view .greeting h2{font-size:28px!important;font-weight:600;letter-spacing:-.04em;margin:0 0 5px!important}.app-view .greeting h2 span{font-size:20px;color:#fff}.app-view .greeting .small{font-size:11px;color:#b3c3d3;line-height:1.4}.app-view .avatar{width:32px;height:32px;border:1px solid #889ca7;overflow:hidden;background:#101820}.avatar .reference-photo{border-radius:50%;width:100%;height:100%}
.reference-hero{position:relative;height:270px;margin:0 -19px;background:radial-gradient(ellipse at 30% 40%,#103b3699,transparent 63%);overflow:hidden}
.reference-hero .confidence{position:absolute;top:10px;right:19px;z-index:2;font-size:8px;padding:5px 7px;border-radius:12px;background:#35465188;border-color:#65798488}
.hero-landscape{position:absolute;right:42px;top:35px;width:130px;height:207px;mask-image:linear-gradient(transparent,#000 15%,#000 66%,transparent)}
.hero-landscape svg{border-radius:0;filter:brightness(.8)}
.reference-ring{position:absolute;left:22px;top:27px;width:142px;height:142px;padding:0!important;background:transparent!important;border:0!important;border-radius:50%!important}
.reference-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.reference-ring circle{fill:none;stroke:#164c43;stroke-width:9}.reference-ring .arc{stroke:#47f3b4;stroke-linecap:round;stroke-dasharray:256 377;filter:drop-shadow(0 0 5px #26f3b22a)}
.reference-ring>span{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.reference-ring strong{font-size:30px;font-weight:600}.reference-ring small{font-size:9px;color:#bacbd6;margin-top:5px}
.hero-side{position:absolute;right:19px;top:111px;font-size:10px;color:#bdd1de!important;margin:0}.hero-side b{font-size:15px;color:#fff;line-height:1.7}
.hero-caption{position:absolute;left:19px;bottom:7px}.hero-caption h3{font-size:17px!important;margin:0 0 5px!important;font-weight:600}.hero-caption p{font-size:12px;color:#a9bfd1;margin:0;line-height:1.5}
.reference-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:14px 0 21px}.reference-stats button{padding:12px 2px;min-height:62px;background:linear-gradient(120deg,#101d26,#081119);border:1px solid #23303d;border-radius:10px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.reference-stats button:first-child{background:linear-gradient(130deg,#0c2b2d,#091719)}.reference-stats b{font-size:11px;font-weight:500}.reference-stats span{font-size:9px;color:#b5c5d4}
.today-plan{display:flex;align-items:center;gap:12px;width:100%;padding:11px 10px;background:linear-gradient(115deg,#091920,#070f17);border:1px solid #1c303c;text-align:left}.today-plan>span:nth-child(2){flex:1}.today-plan b{font-size:12px;font-weight:500;display:block}.today-plan small{display:block;font-size:10px;color:#a9bfd1;margin-top:5px}.plan-icon{display:grid;place-items:center;width:36px;height:39px;background:#655b3b;border-radius:12px}.plan-icon svg{width:23px;height:23px;color:#fff}
.home-secondary{margin-top:50px}.home-secondary>button{width:100%;font-size:11px;background:#050d12;color:#a9bdce;border-color:#13232d}.home-secondary summary{font-size:11px;color:#93a7b4}.home-secondary p{font-size:12px}
.app-view .subnav{background:#08121c;border-radius:14px;margin:15px 0;padding:2px;gap:2px;font-size:10px}.app-view .subnav>*{padding:7px 6px}.app-view .subnav b,.app-view .meal-tabs button[aria-pressed=true]{background:linear-gradient(#0c2c29,#07201f);border-bottom:1px solid #35cfa8;border-radius:12px;color:#52f4cf}.app-view .meal-tabs button{min-height:33px;font-size:10px}.app-view .meal-photo{height:157px;margin:18px 0 10px;border-radius:10px}.app-view .meal-feature{padding:0 0 16px}.app-view .meal-feature h3{font-size:16px}.app-view .meal-feature p{font-size:12px;margin:6px 0}.app-view .meal-feature .primary{min-height:38px;margin-top:14px}.app-view .tag{font-size:9px;padding:4px 7px;border-radius:7px;background:#082822}.app-view .food-heading label{font-size:9px}.app-view .food-heading input{font-size:10px;min-height:32px;padding:5px;max-width:124px}.app-view .food-shortcuts button{font-size:10px;padding:8px;min-height:48px;background:#07121a}.app-view .small{font-size:11px}.app-view #screen h3{font-size:14px;font-weight:500}.app-view .exercise-row{padding:8px 0;border:0;gap:13px}.app-view .exercise-row .reference-photo{width:52px;height:46px;border-radius:8px}.app-view .exercise-row b{font-size:12px;font-weight:400}.app-view .exercise-row p{font-size:10px}.app-view .stack{gap:7px}.app-view .stack button{font-size:11px;min-height:37px;padding:8px}.app-view .comparison{gap:6px}.app-view .comparison .reference-photo{height:205px;border:1px solid #20303d}.app-view .comparison figcaption{font-size:9px}.app-view .ring{background:conic-gradient(from -40deg,#27e9da,#4cf5a9 68%,#103c31 68%);width:180px;height:180px}.app-view .ring>div{width:161px;height:161px;background:#010608}.app-view .ring strong{font-size:34px}.app-view .design-link{font-size:10px;margin-bottom:80px}
@media(max-width:420px){body.app-view{background:#010507}.app-header{padding:10px 22px}.app-view main{max-width:390px;padding:0 14px 16px}.app-view .phone{border:0;border-radius:0;padding:22px 12px 98px;min-height:720px}.reference-hero{margin:0 -12px}.hero-caption{left:12px}.reference-ring{left:12px}.app-view #bottom{width:350px;max-width:calc(100% - 28px);bottom:10px}}
.hero-landscape{mask-image:linear-gradient(90deg,transparent,#000 25%,#000 78%,transparent);height:215px;top:30px;right:37px}.hero-landscape:after{content:'';position:absolute;inset:0;background:linear-gradient(#01050788,transparent 25%,transparent 55%,#010507)}
.progress-dial{display:block;margin:auto;background:none!important;border:0!important;padding:0!important}.progress-dial .ring{margin:2px auto 19px}.dial-content{background:#010608;border-radius:50%;width:161px;height:161px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.progress-context{display:flex;justify-content:space-between;font-size:10px;color:#9cb2c5;margin:0 4px 16px;line-height:1.8}.progress-context>span:last-child{text-align:right}.progress-context b{color:#f3f6f7;font-size:12px;font-weight:500}.body-previews{display:flex;width:100%;gap:8px;padding:0!important;background:none!important;border:0!important}.body-previews svg{height:115px;width:calc(50% - 4px);border:1px solid #152632;border-radius:12px}.composition-grid{display:grid;grid-template-columns:42% 1fr;gap:12px;align-items:center}.composition-grid svg{width:100%;height:84px;background:#0d1a24;border-radius:6px}.composition-grid p{display:flex;gap:5px;font-size:10px;margin:9px 0;align-items:center}.composition-grid b{margin-left:auto;font-weight:400;color:#fff}.composition-grid i{display:inline-block;width:6px;height:6px;background:#5cf3c9;border-radius:50%}.composition-grid p:first-child i{background:#9a9eef}.composition-grid p:last-child i{background:#7de2f3}.text-link{padding:8px 0!important;min-height:32px!important;border:0!important;background:none!important;font-size:10px!important;color:#9ec9d4!important}.plan-edit{width:100%;font-size:11px;padding:5px;min-height:34px;background:none}.plan-tiles{display:grid;gap:3px;margin-top:14px}.plan-tiles>button{display:flex;align-items:center;gap:13px;padding:13px 12px;border:0;background:linear-gradient(120deg,#0b1822,#071019);text-align:left;min-height:76px}.tile-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#143232;color:#67efd0}.tile-icon svg{width:21px;height:21px}.tile-1{background:#28233d;color:#b697f1}.tile-3{background:#38352a;color:#f8d675}.plan-tiles>button>span:nth-child(2){flex:1}.plan-tiles b{font-size:13px;font-weight:400;display:block}.plan-tiles small{font-size:10px;color:#99afc3;display:block;margin-top:5px}.social-preview{display:grid;gap:3px}.friend-row{display:flex;align-items:center;gap:12px;background:linear-gradient(110deg,#0b1a22,#030a10);border:1px solid #10212c;border-radius:10px;padding:8px}.friend-avatar{width:40px;height:40px;overflow:hidden;border-radius:50%;border:1px solid #507b7d}.friend-row>div{flex:1}.friend-row b{display:block;font-size:12px;font-weight:400}.friend-row small{display:block;font-size:9px;color:#a5bbcb;margin:3px 0}.friend-row>span:last-child{color:#9cb3c5}.friend-row progress{display:block;width:100%;height:5px;border:0;border-radius:5px;background:#12242b}.friend-row progress::-webkit-progress-bar{background:#12242b;border-radius:5px}.friend-row progress::-webkit-progress-value{background:#39e6b2;border-radius:5px}.friend-row .friend-1::-webkit-progress-value{background:#43b6e5}.friend-row .friend-2::-webkit-progress-value{background:#9168f0}.friend-row .friend-3::-webkit-progress-value{background:#ea55ac}
.hero-landscape{width:100px;height:184px;right:57px;top:37px}