.screen-collage{height:820px;position:relative;overflow:hidden;border-radius:28px;background:#fff0e2;border:1px solid #f1dfcd;isolation:isolate}.screen-collage:before,.screen-collage:after{content:'';position:absolute;pointer-events:none;z-index:-1;border:1px solid #e9b88880;border-radius:50%;width:680px;height:680px;left:-180px;top:180px}.screen-collage:after{width:480px;height:480px;left:auto;right:-200px;top:-170px;border:60px solid #ffdec170}.screen-columns{width:870px;display:grid;grid-template-columns:repeat(3,270px);gap:24px;transform:rotate(-12deg);margin:-100px auto 0}.screen-column{display:flex;flex-direction:column;gap:24px}.screen-column:nth-child(1){padding-top:180px}.screen-column:nth-child(2){padding-top:0}.screen-column:nth-child(3){padding-top:105px}.sample-phone{background:#f5f6f7;border:5px solid #fff;border-radius:25px;overflow:hidden;box-shadow:0 12px 30px #93450e15;color:#1c2634;font-size:10px;line-height:1.4;position:relative;transition:transform .3s ease,box-shadow .3s ease;flex-shrink:0}.sample-phone:hover{transform:translateY(-7px);box-shadow:0 20px 38px #93450e26}.phone-status{display:flex;justify-content:space-between;padding:10px 15px 6px;font-size:9px;font-weight:750}.sample-header{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #e8e9ed}.sample-header>span{flex:1;font-size:9px;font-weight:700}.sample-header>img:first-child{width:27px;height:27px;object-fit:contain}.sample-phone .person{width:29px;height:29px;border-radius:10px;object-fit:cover;flex-shrink:0}.sample-content{padding:15px 13px}.sample-greeting{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.sample-phone h3{font-size:17px;letter-spacing:-.6px;margin:0 0 3px;line-height:1.2}.sample-greeting span{font-size:8px;color:#647185}.sample-greeting>span{font-size:7px}.sample-calendar{display:flex;justify-content:space-between;margin-bottom:14px}.sample-calendar span{text-align:center;font-size:8px;padding:6px 8px;border-radius:11px;color:#677184}.sample-calendar b{display:block;margin-top:5px;font-size:10px;color:#1c2634}.sample-calendar .selected{background:#ffe1c8;color:#9d4511}.sample-dark{background:#24312a;border-radius:15px;padding:17px;color:#fff}.sample-dark span{display:block;font-size:8px;color:#c7d2c7}.sample-dark strong{display:block;font-size:22px;letter-spacing:-.7px;line-height:1.2;margin:10px 0}.sample-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}.sample-metrics>div{background:#ffe7d4;padding:12px;border-radius:13px}.sample-metrics>div:nth-child(2){background:#e7edda}.sample-metrics span,.sample-metrics small{display:block;font-size:8px;color:#647066}.sample-metrics strong{display:block;font-size:20px;letter-spacing:-.7px;margin:4px 0}.sample-heading{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:15px 0 10px}.sample-heading strong{font-size:11px}.sample-heading>span{font-size:8px}.badge{display:inline-block;white-space:nowrap;background:#eee9fa;color:#705c9f;border-radius:6px;padding:4px 7px;font-size:7px;font-weight:650}.badge.green{background:#e2f1e9;color:#2c755c}.badge.orange{background:#fff0df;color:#a7631f}.sample-row{display:flex;align-items:center;gap:9px;background:#fff;border-radius:11px;padding:10px}.sample-row>div{flex:1}.sample-row strong{font-size:10px;display:block}.sample-row small{font-size:7px;color:#6a7685;display:block;margin-top:4px}.sample-nav{display:flex;align-items:center;justify-content:space-around;padding:10px 5px;background:#fff;border-top:1px solid #eceef0}.sample-nav>span{text-align:center;font-size:17px;padding:3px 8px;border-radius:10px}.sample-nav small{font-size:6px;display:block;margin-top:3px}.sample-nav .active{background:#fff0e3;color:#c7611c}.sample-nav .scan{background:#fc7d27;color:#fff;border-radius:50%;width:33px;height:33px;display:grid;place-items:center}.sample-expand{font:inherit;font-size:9px;font-weight:700;border:0;border-top:1px solid #f1dfcf;width:100%;padding:12px;background:#fff8f0;color:#a1470c;cursor:pointer;min-height:38px}.sample-expand:hover{background:#ffe1c8}.sample-expand:focus-visible{outline:3px solid #fc7d27;outline-offset:-4px}.sample-title{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:14px}.sample-title h3{display:flex;align-items:center;gap:6px}.sample-tabs{display:flex;background:#fff;border-radius:10px;padding:4px;margin:10px 0}.sample-tabs>span{flex:1;text-align:center;padding:7px 3px;font-size:8px;font-weight:600;border-radius:8px;color:#77818c}.sample-tabs .selected{background:#fff0e3;color:#a74e12}.sample-coach{display:flex;align-items:center;gap:8px;padding:6px 0 10px;font-size:9px}.sample-coach small{display:block;color:#6b7789;font-size:8px;margin-top:4px}.sample-action{background:#fc7d27;color:#382513;border-radius:7px;padding:6px 7px;font-weight:750;white-space:nowrap}.exercise-graphic{background:#fff;border-radius:12px;padding:8px 10px;margin:7px 0 9px}.exercise-graphic svg{width:100%;height:80px;display:block}.exercise-graphic>span{display:block;font-size:11px;font-weight:700}.exercise-graphic small{display:block;font-size:8px;color:#687588;font-weight:400;margin:4px 0}.set-row{display:flex;align-items:center;justify-content:space-between;background:white;border-radius:9px;margin:6px 0;padding:10px;font-size:9px}.set-row>span:first-child{font-size:7px;color:#728093}.done{color:#2c7958;font-size:12px}.sample-next{padding:14px 0 3px}.sample-next>span{display:block;font-size:7px;letter-spacing:1px;color:#748092}.sample-next strong{font-size:10px;display:block;margin-top:6px}.sample-next b{float:right;color:#c35f18}.sample-plus{display:grid;place-items:center;background:#fff;border-radius:9px;font-size:21px;width:30px;height:30px;color:#d05f16}.sample-search{background:white;color:#87919f;padding:12px;border:1px solid #e7e9ed;border-radius:10px;font-size:9px}.member-card{display:flex;align-items:center;gap:10px;background:#fff;padding:12px 10px;border-radius:12px;margin:8px 0}.member-card .person{width:35px;height:35px;border-radius:12px}.member-card>div{flex:1}.member-card strong{display:block;font-size:10px}.member-card small{display:block;font-size:7px;color:#6d798b;margin:4px 0 6px}.member-card>span{color:#737e8a}.nutrition-total{background:#25372a;color:#fff;padding:17px;border-radius:13px;margin:8px 0 12px;display:flex;align-items:center;gap:22px}.nutrition-total strong{font-size:25px;letter-spacing:-1px}.nutrition-total small{display:block;font-size:8px;font-weight:400;letter-spacing:0;color:#c4d2bc}.nutrition-total>div{flex:1}.nutrition-total span{display:flex;justify-content:space-between;font-size:8px;margin:6px 0;color:#d7e4d0}.meal-row{background:#fff;border-radius:12px;display:flex;align-items:center;gap:10px;padding:13px 9px;margin:9px 0}.meal-art{width:34px;height:38px;border-radius:10px;background:#ffecd3;display:grid;place-items:center;font-size:23px;color:#c47728}.meal-art.lunch{background:#e8edd9;color:#6f8649}.meal-art.snack{background:#f1e6f5;color:#9666a6}.meal-row>div{flex:1}.meal-row strong{font-size:10px;display:block}.meal-row small{display:block;font-size:7px;color:#738092;margin:4px 0}.meal-row b{font-size:7px;font-weight:500;color:#ba5a1b}.sample-profile{text-align:center;padding:5px 0}.sample-profile>img{display:block;margin:auto;width:58px;height:58px;border-radius:20px}.sample-profile strong{display:block;font-size:14px;margin:10px 0 5px}.sample-profile small{color:#738092;font-size:8px}.progress-graph{width:100%;height:100px;background:#fff;border-radius:12px;padding:10px;overflow:visible}.progress-line{stroke-dasharray:250;stroke-dashoffset:250;animation:draw-trend 1.6s ease forwards}.sample-week-labels{display:flex;justify-content:space-around;font-size:7px;color:#7b8694;padding:6px 0}.sample-achievement{display:flex;align-items:center;gap:10px;background:#fff0de;border-radius:12px;padding:14px 10px;margin-top:13px}.sample-achievement>span{font-size:24px;color:#cd781e}.sample-achievement strong{font-size:10px;display:block}.sample-achievement small{font-size:8px;display:block;color:#8f765c;margin-top:5px}.sample-qr{background:#fff;border-radius:14px;text-align:center;padding:16px 10px;margin:14px 0}.sample-qr svg{display:block;width:112px;height:112px;margin:0 auto 14px;padding:8px;border:1px solid #f3d7c3;border-radius:12px}.sample-qr strong{font-size:12px;display:block;margin:6px 0}.sample-qr span{font-size:8px;color:#6c798b}.sample-qr small{font-size:6px;color:#87919e;display:block;margin-top:7px}.showcase-note{font-size:10px;letter-spacing:.8px;color:#74816a;text-align:center;margin:20px 0 0}#screen-dialog{border:1px solid #e4e7df;border-radius:22px;padding:20px;background:#f7f7f2;width:min(420px,calc(100% - 32px));max-height:90dvh;overflow:auto;box-shadow:0 25px 100px #12201833}#screen-dialog::backdrop{background:#20271f99;backdrop-filter:blur(5px)}.screen-dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;font-size:14px}.screen-dialog-top button{border:1px solid #dde1d4;border-radius:50%;width:40px;height:40px;background:#fff;font-size:24px;cursor:pointer}#screen-dialog .sample-phone{width:290px;max-width:100%;margin:auto;transform:none;box-shadow:none}#screen-dialog>p{font-size:10px;text-align:center;color:#6f7c66;margin-top:16px}
@media(min-width:1100px){.screen-columns{width:930px;grid-template-columns:repeat(3,290px);gap:26px}.screen-collage{height:870px}}
@media(max-width:800px){.screen-collage{height:760px}.screen-columns{transform:rotate(-10deg) scale(.85);transform-origin:center top;margin-top:-75px;position:relative;left:50%;margin-left:-435px}.screen-column:nth-child(1){padding-top:155px}.screen-column:nth-child(3){padding-top:85px}}
@media(max-width:520px){.screen-collage{height:620px;border-radius:20px}.screen-columns{transform:rotate(-10deg) scale(.7);margin-top:-55px}.showcase-note{font-size:8px;line-height:1.8}.sample-phone:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.sample-phone{transition:none}.progress-line{animation:none;stroke-dashoffset:0}}
.screen-selectors{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:24px}.screen-selectors button{font:inherit;font-size:11px;font-weight:650;background:#fff;border:1px solid #dfe3d7;border-radius:24px;padding:10px 15px;min-height:42px;cursor:pointer;transition:background-color .2s,border-color .2s}.screen-selectors button:hover{background:#ffebdb;border-color:#fc7d27}.screen-selectors button:focus-visible{outline:3px solid #fc7d27;outline-offset:3px}