:root{--navy:#0b1638;--navy2:#0f1d48;--navy3:#16265a;--pink:#ff4fa3;--blue:#3d8bff;--pink-soft:#ff8ac3;--blue-soft:#9fc3ff;--gold:#ffd23d;--green:#2bd67b;
--muted:rgba(255,255,255,.7);--card:rgba(255,255,255,.07);--line:rgba(255,255,255,.12);--grad:linear-gradient(90deg,#ff4fa3,#3d8bff);
--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--navy)}
body{min-height:100vh;min-height:100dvh;background:radial-gradient(circle at 10% 0%,rgba(255,79,163,.22),transparent 40%),radial-gradient(circle at 100% 35%,rgba(61,139,255,.2),transparent 45%),var(--navy);background-attachment:fixed;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.app{max-width:480px;margin:0 auto;padding:calc(10px + var(--safe-t)) 18px calc(96px + var(--safe-b))}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hidden{display:none!important}
/* header */
.top{display:flex;align-items:center;gap:10px;margin:4px 0 14px}
.top img{width:42px;height:42px;border-radius:50%;box-shadow:0 0 18px rgba(255,79,163,.5)}
.top .t{font-weight:900;letter-spacing:.14em;font-size:13px}
.top .s{font-size:11px;color:var(--muted)}
.chip{margin-left:auto;font-size:13px;font-weight:900;background:rgba(159,195,255,.14);color:#cfe1ff;padding:6px 10px;border-radius:999px;white-space:nowrap}
/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;margin-bottom:14px}
.lbl{font-size:11px;letter-spacing:.18em;font-weight:800;text-transform:uppercase;color:var(--pink-soft);margin-bottom:8px}
h2.screen{font-size:24px;font-weight:900;margin:6px 0 4px}
p.sub{color:var(--muted);font-size:14px;margin-bottom:14px}
.btn{display:block;width:100%;border-radius:18px;padding:18px;font-size:19px;font-weight:900;color:#fff;background:var(--grad);box-shadow:0 10px 30px rgba(255,79,163,.4);text-align:center;transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn.sm{font-size:15px;padding:13px;border-radius:14px}
.btn.ghost{background:rgba(255,255,255,.08);box-shadow:none;border:1px solid var(--line)}
.btn.done{background:linear-gradient(90deg,rgba(43,214,123,.25),rgba(61,139,255,.25));box-shadow:none;border:1px solid rgba(43,214,123,.5);font-size:17px}
.btn[disabled]{opacity:.5}
.btn .s{display:block;font-size:12px;font-weight:700;opacity:.85;margin-top:2px}
/* HUD */
.hud{display:flex;gap:10px;margin-bottom:14px}
.flame{flex:1.1;border-radius:20px;padding:14px 8px;background:linear-gradient(160deg,rgba(255,79,163,.35),rgba(255,140,60,.15));border:1px solid rgba(255,140,90,.5);text-align:center}
.flame.cold{background:linear-gradient(160deg,rgba(159,195,255,.18),rgba(255,255,255,.04));border-color:var(--line)}
.flame .f{font-size:40px;line-height:1;filter:drop-shadow(0 0 12px #ff7a3d)}
.flame.cold .f{filter:grayscale(1);opacity:.55}
.flame .n{font-size:40px;font-weight:900;line-height:1}
.flame .d{font-size:11px;letter-spacing:.15em;font-weight:800;color:#ffd0b0}
.flame .b{font-size:11px;color:var(--muted);margin-top:4px}
.lvl{flex:1.6;border-radius:20px;padding:14px;background:var(--card);border:1px solid var(--line);min-width:0}
.lvl .r{font-size:11px;letter-spacing:.16em;color:var(--blue-soft);font-weight:800}
.lvl .nm{font-size:20px;font-weight:900;margin:2px 0 8px;line-height:1.15}
.bar{height:12px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}
.bar i{display:block;height:100%;background:var(--grad);border-radius:9px;box-shadow:0 0 10px #ff4fa3;transition:width .6s cubic-bezier(.2,.9,.3,1.2)}
.xp{font-size:12px;color:var(--muted);margin-top:6px;display:flex;justify-content:space-between;gap:6px}
.btnwrap{position:relative;margin-bottom:16px}
.pop{position:absolute;right:10px;top:-14px;background:var(--gold);color:var(--navy);font-weight:900;font-size:13px;padding:5px 10px;border-radius:999px;transform:rotate(6deg);box-shadow:0 4px 14px rgba(255,210,61,.5)}
.pop.anim{animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(0) rotate(-20deg)}100%{transform:scale(1) rotate(6deg)}}
/* quests */
.q{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);width:100%;text-align:left}
.q:first-of-type{border-top:0}
.q .e{font-size:24px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.08);flex:none}
.q .m{flex:1;min-width:0}.q b{font-size:15px}.q .p{font-size:12px;color:var(--muted)}
.mini{height:7px;border-radius:6px;background:rgba(255,255,255,.12);margin-top:6px;overflow:hidden}.mini i{display:block;height:100%;background:var(--grad);transition:width .5s}
.q .x{font-size:12px;font-weight:900;color:var(--gold);white-space:nowrap}
.ck{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:14px;flex:none;font-weight:900}
.ck.done{background:var(--green);border-color:var(--green)}
.plus{width:38px;height:38px;border-radius:12px;background:var(--grad);font-size:20px;font-weight:900;display:grid;place-items:center;flex:none;box-shadow:0 4px 14px rgba(255,79,163,.35)}
.plus:active{transform:scale(.9)}
/* workout */
.wk{display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.wk .ic{width:46px;height:46px;border-radius:14px;background:var(--grad);display:grid;place-items:center;font-size:22px;flex:none}
.wk b{display:block;font-size:16px}.wk span{font-size:13px;color:var(--muted)}
.wk .go{margin-left:auto;font-weight:900;color:var(--blue-soft);font-size:14px;white-space:nowrap}
.ex{display:flex;gap:10px;padding:11px 0;border-top:1px solid var(--line)}
.ex:first-child{border-top:0}
.ex .i{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:12px;font-weight:900;flex:none}
.ex b{font-size:15px;display:block}.ex span{font-size:12px;color:var(--muted)}
.seg{display:flex;background:rgba(255,255,255,.08);border-radius:12px;padding:4px;gap:4px;margin-bottom:12px}
.seg button{flex:1;padding:9px;border-radius:9px;font-weight:800;font-size:14px;color:var(--muted)}
.seg button.on{background:var(--grad);color:#fff}
/* quote */
.quote{font-size:17px;font-weight:700;line-height:1.35}
.quote small{display:block;margin-top:8px;font-size:12px;color:var(--muted);font-weight:600}
.pep{background:linear-gradient(135deg,rgba(255,79,163,.18),rgba(61,139,255,.18))}
/* week strip */
.week{display:flex;justify-content:space-between;gap:4px}
.week .dd{flex:1;text-align:center;font-size:11px;color:var(--muted);font-weight:700}
.week .dot{width:36px;height:36px;margin:5px auto 0;border-radius:50%;display:grid;place-items:center;font-size:15px;background:rgba(255,255,255,.08);font-weight:900;color:#fff}
.week .dot.on{background:var(--grad);box-shadow:0 0 12px rgba(255,79,163,.45)}
.week .dot.fz{background:rgba(159,195,255,.3)}
.week .dot.today{outline:2px dashed rgba(255,255,255,.6);outline-offset:2px}
.week .dot.fut{opacity:.35}
/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.cal .h{font-size:10px;color:var(--muted);font-weight:800}
.cal .c{aspect-ratio:1;border-radius:10px;display:grid;place-items:center;font-size:12px;font-weight:800;background:rgba(255,255,255,.05);position:relative}
.cal .c.on{background:var(--grad)}
.cal .c.fz{background:rgba(159,195,255,.3)}
.cal .c.today{outline:2px dashed rgba(255,255,255,.6)}
.cal .c.pf::after{content:"★";position:absolute;top:1px;right:3px;font-size:8px;color:var(--gold)}
.calnav{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.calnav button{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);font-weight:900}
.legend{display:flex;gap:12px;font-size:11px;color:var(--muted);margin-top:10px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
/* badges */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px;text-align:center}
.bd{font-size:11px;color:var(--muted);line-height:1.2}
.bd .h{width:62px;height:62px;margin:0 auto 6px;display:grid;place-items:center;font-size:28px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--grad)}
.bd.lock .h{background:rgba(255,255,255,.12);filter:grayscale(1);opacity:.55}
.bd:not(.lock){color:#fff;font-weight:700}
.ladder .r{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.ladder .r:first-child{border-top:0}.ladder .r.me{color:var(--gold);font-weight:900}.ladder .r.lockd{opacity:.5}
.ladder .r span:last-child{margin-left:auto;font-size:12px;color:var(--muted)}
.boss{display:flex;gap:12px;align-items:center}.boss .e{font-size:34px}
/* squad podium (from Squad Board concept) */
.sample{font-size:10px;font-weight:900;letter-spacing:.12em;background:var(--gold);color:var(--navy);border-radius:999px;padding:3px 8px;margin-left:6px;vertical-align:2px}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:14px 0 8px}
.pd{flex:1;text-align:center}
.pd .av{width:54px;height:54px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;font-weight:900;font-size:17px;background:var(--navy2);border:3px solid}
.pd .blk{border-radius:14px 14px 6px 6px;padding:8px 4px;font-weight:900;font-size:17px}
.pd .blk small{display:block;font-size:11px;color:rgba(255,255,255,.8);font-weight:700}
.g1 .av{border-color:var(--gold);width:64px;height:64px;font-size:20px;box-shadow:0 0 20px rgba(255,210,61,.5)}.g1 .blk{height:96px;background:linear-gradient(180deg,#ff4fa3,#c2378a)}
.g2 .av{border-color:#cfd8e6}.g2 .blk{height:72px;background:linear-gradient(180deg,#7a6bff,#4b3fc4)}
.g3 .av{border-color:#e39a5c}.g3 .blk{height:56px;background:linear-gradient(180deg,#3d8bff,#2a5fc0)}
.crown{font-size:22px;line-height:1}
.you{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);margin-top:6px}
/* forms */
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--blue-soft);margin-bottom:6px;text-transform:uppercase}
.field input,.field select{width:100%;padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.08);font-size:17px;outline:none}
.field input:focus,.field select:focus{border-color:var(--pink)}
.field select option{color:#0b1638}
.row2{display:flex;gap:10px}.row2>*{flex:1;min-width:0}
.hint{font-size:12px;color:var(--muted);margin-top:6px}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.1);font-size:22px;font-weight:900}
.stepper input{text-align:center;font-weight:900}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.4;margin:10px 0}
.check input{width:22px;height:22px;flex:none;accent-color:var(--pink);margin-top:1px}
.macro{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;margin:8px 0}
.macro div{background:rgba(255,255,255,.07);border-radius:12px;padding:10px 4px}
.macro b{display:block;font-size:18px}.macro span{font-size:10px;color:var(--muted);letter-spacing:.1em;font-weight:800}
/* tab bar */
.tab{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:8px 0 calc(10px + var(--safe-b));background:rgba(11,22,56,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);z-index:20}
.tab button{flex:1;font-size:11px;color:var(--muted);text-align:center;padding:4px 0;max-width:96px}
.tab button span{display:block;font-size:22px;line-height:1.2;filter:grayscale(.6);opacity:.8}
.tab button.on{color:#fff;font-weight:800}.tab button.on span{filter:none;opacity:1}
.tagline{text-align:center;font-size:12px;color:var(--muted);margin:6px 0 10px}
/* sheet */
.scrim{position:fixed;inset:0;background:rgba(3,8,24,.6);z-index:40;opacity:0;transition:opacity .2s}
.scrim.on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;max-height:92vh;max-height:92dvh;overflow-y:auto;background:linear-gradient(180deg,#16265a,#0d1a44);border-radius:26px 26px 0 0;border:1px solid var(--line);border-bottom:0;z-index:41;padding:10px 18px calc(22px + var(--safe-b));transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.9,.3,1)}
.sheet.on{transform:none}
.sheet .grab{width:44px;height:5px;border-radius:9px;background:rgba(255,255,255,.3);margin:0 auto 12px}
.sheet .hd{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sheet .hd .e{font-size:30px;width:52px;height:52px;border-radius:16px;background:var(--grad);display:grid;place-items:center;flex:none}
.sheet .hd b{font-size:20px;font-weight:900;display:block}.sheet .hd span{font-size:13px;color:var(--muted)}
.sheet .x{margin-left:auto;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);font-size:16px;flex:none}
.big{display:flex;align-items:baseline;gap:6px;margin:4px 0 8px}
.big b{font-size:44px;font-weight:900;line-height:1}.big span{font-size:16px;color:var(--muted);font-weight:700}
.big .tag{margin-left:auto;font-size:13px;font-weight:900;color:var(--gold);background:rgba(255,210,61,.14);padding:5px 10px;border-radius:999px;align-self:center}
.big .tag.won{background:var(--gold);color:var(--navy)}
.fill{height:18px;border-radius:12px;background:rgba(255,255,255,.12);overflow:hidden;position:relative;margin-bottom:6px}
.fill i{display:block;height:100%;border-radius:12px;background:var(--grad);box-shadow:0 0 14px #ff4fa3;transition:width .7s cubic-bezier(.2,.9,.3,1.2)}
.fill.won i{background:linear-gradient(90deg,#2bd67b,#3d8bff);box-shadow:0 0 14px #2bd67b}
.fillcap{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:14px}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.chips button{padding:16px 4px;border-radius:16px;font-size:18px;font-weight:900;background:rgba(255,255,255,.1);border:1px solid var(--line);transition:transform .1s}
.chips button.hot{background:var(--grad);border-color:transparent;box-shadow:0 6px 18px rgba(255,79,163,.35)}
.chips button:active,.food:active{transform:scale(.93)}
.custom{display:flex;gap:8px;margin:-6px 0 16px}
.custom input{flex:1;min-width:0;padding:14px;border-radius:14px;border:1px solid var(--pink);background:rgba(255,255,255,.08);font-size:18px;outline:none}
.custom button{padding:0 18px;border-radius:14px;background:var(--grad);font-weight:900}
.foods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.food{border-radius:16px;padding:10px 6px;background:rgba(255,255,255,.07);border:1px solid var(--line);text-align:center;transition:transform .1s}
.food .fe{font-size:28px;line-height:1.1}.food b{display:block;font-size:13px;margin-top:4px}
.food span{display:block;font-size:10px;color:var(--muted)}
.food em{display:inline-block;margin-top:5px;font-style:normal;font-size:12px;font-weight:900;color:#fff;background:rgba(255,79,163,.3);padding:2px 8px;border-radius:999px}
.ent{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.ent:first-child{border-top:0}
.ent .t{font-size:11px;color:var(--muted);width:56px;flex:none}
.ent .l{flex:1;min-width:0}.ent .v{font-weight:900}
.ent button{padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.1);font-size:12px;font-weight:800}
.empty{font-size:13px;color:var(--muted);text-align:center;padding:10px 0}
/* toast + modal */
.toast{position:fixed;left:50%;top:calc(14px + var(--safe-t));transform:translate(-50%,-220%);visibility:hidden;background:#fff;color:var(--navy);font-weight:800;font-size:14px;padding:12px 16px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:60;transition:transform .3s cubic-bezier(.2,1.4,.4,1),visibility .3s;max-width:92vw;text-align:center}
.toast.on{transform:translate(-50%,0);visibility:visible}
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:55;background:rgba(3,8,24,.7);padding:24px}
.modal .box{background:linear-gradient(160deg,#1b2d68,#0f1d48);border:1px solid var(--line);border-radius:24px;padding:24px;text-align:center;max-width:360px;width:100%;animation:pop2 .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop2{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.modal .em{font-size:64px;line-height:1.1}
.modal h3{font-size:24px;font-weight:900;margin:8px 0 6px}.modal p{color:var(--muted);font-size:14px;margin-bottom:16px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:70}
/* onboarding */
.ob{min-height:calc(100dvh - 40px);display:flex;flex-direction:column}
.ob .logo{width:120px;height:120px;border-radius:50%;margin:30px auto 18px;display:block;box-shadow:0 0 40px rgba(255,79,163,.6)}
.ob h1{font-size:30px;font-weight:900;text-align:center;line-height:1.15;margin-bottom:10px}
.ob .lead{text-align:center;color:var(--muted);font-size:16px;margin-bottom:22px}
.ob .foot{margin-top:auto;padding-top:20px}
.dots{display:flex;gap:6px;justify-content:center;margin:6px 0 18px}
.dots i{width:8px;height:8px;border-radius:9px;background:rgba(255,255,255,.2)}.dots i.on{width:22px;background:var(--grad)}
.perks{display:grid;gap:10px;margin-bottom:10px}
.perks div{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;font-size:15px;font-weight:700}
.perks span{font-size:24px}
.link{color:var(--blue-soft);font-weight:800;text-decoration:none}
.small{font-size:12px;color:var(--muted);line-height:1.45}
.menu .r{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line);width:100%;text-align:left;font-size:15px;font-weight:700;color:#fff;text-decoration:none}
.menu .r:first-child{border-top:0}.menu .r span:last-child{margin-left:auto;color:var(--muted)}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.stat3 div{background:rgba(255,255,255,.06);border-radius:14px;padding:12px 4px}.stat3 b{display:block;font-size:22px;font-weight:900}.stat3 span{font-size:11px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}