:root{
  --bg:#07111f;
  --bg2:#0b1829;
  --panel:#101f33;
  --panel2:#142640;
  --line:#263b57;
  --text:#f4f7fb;
  --muted:#93a5bb;
  --blue:#4b8cff;
  --blue2:#6857ea;
  --green:#70d36f;
  --green2:#1ea672;
  --orange:#ff9f43;
  --red:#ff6b67;
  --gold:#f3c95f;
  --cyan:#57d6e6;
  --shadow:0 12px 34px rgba(0,0,0,.28);
  --radius:20px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;background:radial-gradient(circle at 50% -10%,#15365d 0,#0b1829 34%,#07111f 72%);color:var(--text);min-height:100vh}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
.hidden{display:none!important}
.app{max-width:1180px;margin:0 auto;min-height:100vh;padding:calc(14px + env(safe-area-inset-top)) 16px calc(94px + env(safe-area-inset-bottom))}
.page{display:none}.page.active{display:block}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:4px 2px 16px}
.app-title{font-size:25px;font-weight:900;letter-spacing:.02em}
.subtitle{color:var(--muted);font-size:13px;margin-top:5px;line-height:1.5}
.pill{display:inline-flex;align-items:center;gap:6px;background:#12243a;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:#c9d5e5;font-size:12px;box-shadow:var(--shadow);white-space:nowrap}
.card{background:linear-gradient(155deg,rgba(20,38,64,.96),rgba(13,28,47,.98));border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.card.flat{box-shadow:none}
.card-title{font-size:17px;font-weight:900;margin:0}
.card-sub{font-size:12px;color:var(--muted);line-height:1.55;margin-top:4px}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}
.section-title{font-size:16px;font-weight:900;margin:18px 3px 10px}
.grid2,.grid3,.grid4{display:grid;gap:12px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric{background:linear-gradient(145deg,#132a46,#0d1d31);border:1px solid var(--line);border-radius:17px;padding:13px;min-height:108px}
.metric-label{font-size:12px;color:var(--muted)}
.metric-value{font-size:28px;font-weight:900;margin-top:8px}.metric-value small{font-size:13px;color:#c7d2df;margin-left:3px}
.metric-change{font-size:12px;margin-top:6px;color:var(--muted)}
.up{color:var(--red)}.down,.good{color:var(--green)}.warn{color:var(--orange)}
.btn{appearance:none;border:0;background:linear-gradient(135deg,var(--blue),var(--blue2));color:white;border-radius:13px;padding:11px 14px;font-weight:800;box-shadow:0 8px 18px rgba(51,100,235,.2)}
.btn.secondary{background:#162a44;color:#dce7f4;border:1px solid var(--line);box-shadow:none}
.btn.ghost{background:transparent;color:#b7c6da;border:1px solid var(--line);box-shadow:none}
.btn.success{background:linear-gradient(135deg,#27b36b,#56d769)}
.btn.danger{background:#402334;color:#ffb2ba;border:1px solid #703747;box-shadow:none}
.btn.small{padding:8px 10px;border-radius:10px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.icon-btn{width:38px;height:38px;border-radius:12px;background:#142943;border:1px solid var(--line);color:#d8e4f2;display:grid;place-items:center;font-size:18px}
.field label{display:block;color:#aebed1;font-size:12px;margin:0 0 6px 2px}
input,select,textarea{width:100%;border:1px solid #2d4664;background:#0a1728;color:#f4f7fb;border-radius:12px;padding:11px 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(75,140,255,.16)}
textarea{min-height:76px;resize:vertical}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.form-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.note{color:var(--muted);font-size:12px;line-height:1.65}
.divider{height:1px;background:var(--line);margin:14px 0}
.badge{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;padding:5px 9px;font-size:11px;color:#cad6e5;background:#10233a}
.badge.green{color:#bff5bf;background:#123324;border-color:#235d3b}.badge.gold{color:#ffe59c;background:#3a3018;border-color:#6d5926}.badge.red{color:#ffc0c0;background:#3d2022;border-color:#6a3333}
/* bottom nav */
.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:100;width:min(1180px,100%);display:grid;grid-template-columns:repeat(6,1fr);background:rgba(7,17,31,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.tab{border:0;background:transparent;color:#71849b;font-size:10px;padding:5px 1px;min-width:0}
.tab .tab-icon{display:block;font-size:21px;line-height:1.15;margin-bottom:2px}.tab.active{color:#64a0ff;font-weight:900}
/* home */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:12px}
.goal-box{display:flex;align-items:center;gap:16px}
.progress-ring{width:116px;height:116px;flex:0 0 116px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--green) var(--deg),#21334a 0)}
.progress-ring:after{content:"";position:absolute;inset:10px;background:#112238;border-radius:50%}.progress-ring>div{position:relative;z-index:1;text-align:center}.progress-ring strong{font-size:27px;display:block}.progress-ring span{font-size:11px;color:var(--muted)}
.quick-list{display:grid;gap:8px}.quick-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;background:#0b1a2d;border:1px solid var(--line);border-radius:14px;padding:10px}.quick-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#173050;font-size:20px}.quick-name{font-weight:800;font-size:13px}.quick-sub{font-size:11px;color:var(--muted);margin-top:3px}
.check{appearance:none;width:27px;height:27px;border-radius:50%;border:2px solid #48627f;background:#0b1727;display:grid;place-items:center}.check:checked{background:var(--green2);border-color:var(--green2)}.check:checked:after{content:"✓";font-weight:900;color:white}
.meal-list{display:grid;gap:8px}.meal{display:grid;grid-template-columns:55px 1fr auto;gap:10px;align-items:center;background:#0c1b2e;border:1px solid var(--line);border-radius:14px;padding:11px}.meal-time{font-size:11px;font-weight:900;color:#9bd7ff;text-align:center;background:#15304d;border-radius:10px;padding:8px 5px}.meal-name{font-weight:850;font-size:13px;line-height:1.45}.meal-detail{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5}.meal-kcal{font-size:11px;color:var(--gold);font-weight:800;white-space:nowrap}.meal-total{display:flex;justify-content:space-between;background:#0b1a2d;border:1px solid var(--line);border-radius:13px;margin-top:10px;padding:10px 12px;font-size:12px}.meal-total strong{font-size:17px}
/* workout */
.program-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px}.program-btn{border:1px solid var(--line);background:#0b192b;color:#aebed1;border-radius:13px;padding:12px;font-weight:900}.program-btn.active{background:linear-gradient(135deg,#2257aa,#5148ca);color:white;border-color:#668cff}
.workout-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.mini-stat{background:#0a1829;border:1px solid var(--line);border-radius:13px;text-align:center;padding:10px}.mini-stat strong{font-size:22px;display:block}.mini-stat span{font-size:11px;color:var(--muted)}
.exercise-card{background:linear-gradient(155deg,#122641,#0a1829);border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:11px}.exercise-head{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center}.exercise-number{width:36px;height:36px;border-radius:12px;background:#1b3a61;display:grid;place-items:center;font-weight:900;color:#8ec0ff}.exercise-name{font-size:15px;font-weight:900}.exercise-target{font-size:11px;color:var(--muted);margin-top:4px}.exercise-actions{display:flex;gap:6px}.exercise-form{display:grid;grid-template-columns:105px 1fr;gap:9px;margin-top:12px}.set-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.set-input label{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}.set-input input{text-align:center;padding:9px 4px}.exercise-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}.exercise-meta select,.exercise-meta input{padding:9px 8px;font-size:12px}.exercise-complete{border-color:#2b7e50;background:linear-gradient(155deg,#123729,#0b2220)}.recommend{margin-top:10px;background:#102f25;border:1px solid #245d43;color:#c7f5d2;border-radius:12px;padding:9px 11px;font-size:12px;line-height:1.55}
/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:flex-end;justify-content:center;z-index:300;padding:16px}.modal-backdrop.show{display:flex}.modal{width:min(680px,100%);max-height:88vh;overflow:auto;background:#0e1e32;border:1px solid var(--line);border-radius:24px 24px 18px 18px;padding:17px;box-shadow:0 24px 80px rgba(0,0,0,.5)}.modal-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;position:sticky;top:-17px;background:#0e1e32;padding:17px 0 10px;z-index:2}.pose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pose{background:#071523;border:1px solid var(--line);border-radius:15px;padding:8px;text-align:center}.pose svg{width:100%;height:145px}.pose-label{font-size:11px;color:#b9c8d9;margin-top:4px}.instruction-list{margin:12px 0 0;padding-left:20px;color:#d7e2ee;font-size:13px;line-height:1.8}.warning-box{background:#39251b;border:1px solid #765034;border-radius:13px;padding:10px 12px;color:#ffd1a4;font-size:12px;line-height:1.65;margin-top:10px}
/* charts */
.chart{width:100%;height:220px;background:#091827;border:1px solid var(--line);border-radius:16px;padding:8px}.chart svg{width:100%;height:100%;overflow:visible}.chart-label{font-size:10px;fill:#8da0b6}.chart-line{fill:none;stroke:#58a3ff;stroke-width:3}.chart-line.green{stroke:#69d778}.chart-grid{stroke:#253a54;stroke-width:1}.chart-dot{fill:#79b5ff}.chart-dot.green{fill:#72df80}
.history-list{display:grid;gap:8px}.history-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:#0b1a2d;border:1px solid var(--line);border-radius:14px;padding:11px}.history-row small{color:var(--muted)}
/* body silhouette measurements */
.measure-layout{display:grid;grid-template-columns:180px 1fr;gap:14px}.body-map{display:grid;place-items:center;background:#091827;border:1px solid var(--line);border-radius:18px;padding:10px}.body-map svg{width:145px;height:290px}.measure-list{display:grid;gap:7px}.measure-chip{display:flex;justify-content:space-between;gap:12px;padding:10px;background:#0a192b;border:1px solid var(--line);border-radius:12px;font-size:12px}.measure-chip strong{font-size:14px}
/* photo */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.photo-slot{aspect-ratio:3/4;border-radius:14px;border:1px dashed #45617f;background:#091827;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;position:relative}.photo-slot img{width:100%;height:100%;object-fit:cover}.photo-slot input{position:absolute;inset:0;opacity:0;cursor:pointer}.photo-slot span{font-size:11px;color:#a9bbd0;margin-top:5px}.photo-icon{font-size:24px}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.compare-photo{aspect-ratio:3/4;background:#091827;border:1px solid var(--line);border-radius:15px;overflow:hidden;display:grid;place-items:center;color:var(--muted);font-size:12px}.compare-photo img{width:100%;height:100%;object-fit:cover}.overlay-wrap{position:relative;aspect-ratio:3/4;max-height:540px;margin:auto;border-radius:16px;overflow:hidden;background:#081522;border:1px solid var(--line)}.overlay-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.overlay-top{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.overlay-line{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:white;box-shadow:0 0 10px black}
/* report */
.report-hero{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center}.score-ring{width:106px;height:106px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) var(--score),#243750 0);position:relative}.score-ring:after{content:"";position:absolute;inset:9px;border-radius:50%;background:#102139}.score-ring strong{position:relative;z-index:1;font-size:28px}.report-list{display:grid;gap:8px}.report-item{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:9px 0;font-size:13px}.report-message{background:linear-gradient(135deg,#143425,#1b2c47);border:1px solid #315f49;border-radius:15px;padding:13px;line-height:1.7;color:#daf6df;font-size:13px}
/* rewards */
.reward-hero{display:grid;grid-template-columns:150px 1fr;gap:15px;align-items:center}.level-orb{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 35% 30%,#ffb55b,#d3462b 43%,#3d1524 75%);border:2px solid #ff9c55;box-shadow:0 0 34px rgba(255,104,55,.3)}.level-orb strong{font-size:31px;display:block}.progress-bar{height:11px;border-radius:999px;background:#243650;overflow:hidden}.progress-bar>div{height:100%;background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:999px}
.reward-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.warrior-card{position:relative;overflow:hidden;background:#0b192a;border:1px solid var(--line);border-radius:17px}.warrior-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}.warrior-card.locked img{filter:grayscale(1) brightness(.28);opacity:.66}.warrior-card-info{padding:10px}.warrior-card-title{font-weight:900;font-size:13px}.warrior-card-sub{font-size:11px;color:var(--muted);margin-top:3px}.lock-layer{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;text-shadow:0 4px 20px #000}.warrior-card:not(.locked) .lock-layer{display:none}
/* calendar */
.calendar-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.dow{text-align:center;color:var(--muted);font-size:10px;padding:4px}.day{aspect-ratio:1;border:1px solid var(--line);background:#0a1829;border-radius:11px;padding:6px;display:flex;flex-direction:column;justify-content:space-between;font-size:11px}.day.empty{visibility:hidden}.day.partial{background:#392f1d;border-color:#6f5928}.day.full{background:#143824;border-color:#2e6f49}.day.today{outline:2px solid var(--blue)}.day-num{font-weight:900}.day-mark{color:var(--muted);font-size:9px}
/* settings */
.settings-list{display:grid;gap:10px}.setting-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:#0b1a2d;border:1px solid var(--line);border-radius:14px;padding:12px}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#f5f8fc;color:#10213a;border-radius:999px;padding:11px 16px;font-size:12px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.22s;z-index:500;white-space:nowrap}.toast.show{opacity:1}
@media(max-width:860px){.grid4{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.reward-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .app{padding-left:11px;padding-right:11px}.topbar{align-items:center}.app-title{font-size:22px}
  .grid3{grid-template-columns:1fr 1fr}.grid4{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}
  .goal-box{align-items:flex-start}.progress-ring{width:102px;height:102px;flex-basis:102px}.progress-ring strong{font-size:23px}
  .metric{min-height:96px}.metric-value{font-size:24px}
  .exercise-form{grid-template-columns:90px 1fr}.exercise-head{grid-template-columns:36px 1fr}.exercise-actions{grid-column:2;justify-content:flex-start}.exercise-meta{grid-template-columns:1fr 1fr}.exercise-meta>*:last-child{grid-column:1/-1}
  .measure-layout{grid-template-columns:1fr}.body-map svg{height:235px}
  .photo-grid{grid-template-columns:repeat(2,1fr)}.compare-grid{grid-template-columns:1fr 1fr}
  .pose-grid{grid-template-columns:1fr}.pose svg{height:180px}
  .reward-hero{grid-template-columns:110px 1fr}.level-orb{width:105px;height:105px}.level-orb strong{font-size:25px}.reward-grid{grid-template-columns:repeat(2,1fr)}
  .tabs{grid-template-columns:repeat(6,1fr)}.tab{font-size:9px}.tab .tab-icon{font-size:19px}
}
@media(max-width:380px){.meal{grid-template-columns:48px 1fr}.meal-kcal{grid-column:2}.form-row,.form-row.three{grid-template-columns:1fr}.workout-summary{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr}.reward-grid{grid-template-columns:1fr 1fr}}