:root {
  /* Design tokens mirrored from Figma file uzZfv7zB6q91z26WTiqLAF (CORE Health).
     Comments name the Figma variable each token maps to. Blue is the primary
     action colour; green is reserved for positive states only. */
  --bg: #050a14;             /* core-color-bg-app */
  --panel: #08111f;          /* core-color-bg-surface */
  --panel-2: #10203a;        /* core-color-bg-interactive */
  --line: #1b2841;
  --text: #eef3fa;           /* core-color-text-primary */
  --muted: #8ea0bd;          /* core-color-text-secondary */
  --subtle: #6b7c96;         /* core-color-text-subtle */
  --primary: #4c7dff;        /* core-color-action-primary — accents, icons, borders */
  /* White on #4c7dff is only 3.69:1, below the 4.5:1 AA threshold for button
     text. Filled buttons use this slightly darker blue (4.73:1) while the Figma
     token stays exact everywhere it is used as an accent rather than a
     text background. */
  --primary-strong: #3f6ae8;
  --primary-2: #3b6ae6;
  --primary-soft: rgba(76,125,255,.09);
  --primary-line: rgba(76,125,255,.34);
  --on-primary: #ffffff;
  --green: #34d399;          /* positive state */
  --green-2: #10b981;
  --green-soft: rgba(52,211,153,.08);
  --green-line: rgba(52,211,153,.32);
  --orange: #ff9f43;
  --red: #ff5d68;
  --blue: #60a5fa;
  --radius: 22px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, sans-serif; min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 245px minmax(0, 1fr); }
.sidebar { border-right: 1px solid var(--line); padding: 28px 18px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: rgba(5,10,20,.96); }
.brand { font-size: 18px; font-weight: 800; letter-spacing: .12em; padding: 0 12px 30px; }
.brand span { color: var(--primary); }
.nav { display: grid; gap: 7px; }
.nav button { border: 0; color: var(--muted); background: transparent; padding: 13px 14px; border-radius: 13px; text-align: left; font-weight: 600; display: flex; align-items: center; gap: 11px; }
.nav button:hover, .nav button.active { background: var(--panel-2); color: var(--text); }
.nav button.active { box-shadow: inset 3px 0 var(--primary); }
.nav-icon { width: 20px; text-align: center; }
.portal-switch { margin-top: auto; border-top: 1px solid var(--line); padding-top: 18px; }
.portal-switch button { width: 100%; border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 13px; border-radius: 13px; }
.main { padding: 34px clamp(22px, 4vw, 64px) 70px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; gap: 20px; }
.eyebrow { color: var(--primary); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
h1 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.045em; margin: 7px 0; }
h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
p { color: var(--muted); line-height: 1.6; }
.avatar { width: 43px; height: 43px; border-radius: 50%; background: linear-gradient(135deg,var(--primary),#2748a8); display: grid; place-items: center; color: var(--on-primary); font-weight: 800; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.card { background: linear-gradient(145deg,rgba(13,22,40,.96),rgba(8,17,31,.96)); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; overflow: hidden; }
.span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.hero { min-height: 265px; background: radial-gradient(circle at 85% 10%,rgba(76,125,255,.20),transparent 42%),linear-gradient(145deg,#0d1b30,#08111f); }
.hero h2 { font-size: 31px; max-width: 570px; margin-top: 36px; }
.hero p { max-width: 580px; }
.btn { border: 0; border-radius: 13px; padding: 12px 17px; font-weight: 700; background: var(--primary-strong); color: var(--on-primary); }
.btn.secondary { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.metric { font-size: 34px; font-weight: 800; margin: 18px 0 3px; letter-spacing: -.04em; }
.metric-label { font-size: 13px; color: var(--muted); }
.progress { height: 7px; background: var(--panel-2); border-radius: 99px; overflow: hidden; margin-top: 18px; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.list { display: grid; gap: 10px; margin-top: 18px; }
.list-item { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 15px; padding: 14px; background: rgba(255,255,255,.015); }
.list-item.clickable:hover { border-color: var(--primary-line); background: var(--primary-soft); cursor: pointer; }
.list-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--panel-2); display: grid; place-items: center; color: var(--primary); font-weight: 800; }
.list-copy { flex: 1; min-width: 0; }
.list-copy strong { display: block; margin-bottom: 4px; }
.list-copy small { color: var(--muted); }
.pill { font-size: 11px; color: var(--primary); border: 1px solid var(--primary-line); background: var(--primary-soft); padding: 6px 9px; border-radius: 99px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button { border: 1px solid var(--line); color: var(--muted); background: transparent; padding: 9px 13px; border-radius: 99px; }
.tabs button.active { background: var(--primary-strong); color: var(--on-primary); border-color: var(--primary-strong); }
.muscle-layout { display: grid; grid-template-columns: minmax(280px,1.1fr) minmax(300px,.9fr); gap: 20px; }
.muscle-stage { min-height: 650px; position: relative; display: grid; place-items: center; background: radial-gradient(circle,rgba(76,125,255,.10),transparent 52%); border-radius: 20px; }
.muscle-stage img { max-height: 620px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 22px 36px rgba(0,0,0,.5)); }
.hotspot { position: absolute; width: 25px; height: 25px; border-radius: 50%; border: 5px solid rgba(76,125,255,.36); background: var(--primary); box-shadow: 0 0 0 8px rgba(76,125,255,.08); padding: 0; }
.hotspot:hover { transform: scale(1.18); }
.muscle-title { font-size: 32px; margin: 12px 0; }
.facts { display: grid; gap: 12px; margin: 24px 0; }
.fact { border-top: 1px solid var(--line); padding-top: 12px; }
.fact small { color: var(--muted); display: block; margin-bottom: 5px; }
.login { min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; }
.login-art { padding: 7vw; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 35% 30%,rgba(76,125,255,.20),transparent 36%),linear-gradient(145deg,#10171d,#070a0d); }
.login-art h1 { font-size: clamp(48px,7vw,92px); max-width: 800px; }
.login-panel { display: grid; place-items: center; padding: 30px; }
.login-card { width: min(430px,100%); }
.field { display: grid; gap: 8px; margin: 18px 0; }
.field label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.field input { width: 100%; border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 14px; border-radius: 12px; outline: none; }
.field input:focus { border-color: var(--primary); }
.table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.table th,.table td { text-align: left; padding: 15px 12px; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.status { display: inline-flex; gap: 6px; align-items: center; color: var(--green); font-size: 12px; }
.status:before { content:""; width: 7px; height: 7px; border-radius:50%; background:currentColor; }
.mobile-nav { display: none; }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding-bottom: 100px; }
  .mobile-nav { display: flex; position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; padding: 10px 8px max(10px,env(safe-area-inset-bottom)); background: rgba(8,11,15,.96); border-top: 1px solid var(--line); justify-content: space-around; backdrop-filter: blur(18px); }
  .mobile-nav button { color: var(--muted); border:0; background:transparent; font-size:11px; display:grid; gap:4px; place-items:center; }
  .mobile-nav button.active { color:var(--primary); }
  .span-4,.span-5,.span-6,.span-7,.span-8 { grid-column: span 12; }
  .muscle-layout,.login { grid-template-columns: 1fr; }
  .login-art { min-height: 40vh; padding: 40px 28px; }
  .login-art h1 { font-size: 45px; }
}
@media (max-width: 520px) {
  .main { padding: 24px 16px 95px; }
  .card { padding: 18px; border-radius: 18px; }
  .hero h2 { font-size: 25px; }
  .topbar { align-items: flex-start; }
  .muscle-stage { min-height: 520px; }
  .muscle-stage img { max-height: 500px; }
}

/* CORE Health mobile system — translated from the approved Figma frames */
.member-canvas { min-height: 100vh; background: #01040a; display: flex; justify-content: center; }
.member-phone { width: min(430px,100%); min-height: 100vh; background: var(--bg); position: relative; color: #e8eeff; box-shadow: 0 0 70px rgba(0,0,0,.48); }
.member-page { padding: 14px 16px 88px; }
.statusbar { display:flex; justify-content:space-between; padding:0 8px 22px; font-size:13px; font-weight:600; }
.statusbar span:last-child { color:#94a3b8; font-size:11px; }
.mobile-heading { position:relative; padding:0 8px 18px; }
.mobile-heading small { color:#8ea0bd; font-size:13px; }
.mobile-heading h1 { font-family:'Plus Jakarta Sans',sans-serif; font-size:28px; line-height:1.1; margin:8px 0 4px; letter-spacing:-.03em; }
.mobile-heading p { margin:0; color:#8ea0bd; font-size:13px; }
.notification { position:absolute; right:8px; top:7px; width:40px; height:40px; border-radius:14px; border:1px solid rgba(34,48,76,.7); background:#121d34; color:#c9d5ea; }
.fig-card { border-radius:24px; padding:17px; margin-bottom:14px; border:1px solid rgba(27,40,65,.8); background:var(--panel); }
.today-card { min-height:258px; border-color:rgba(34,74,137,.8); background:#0c1730; }
.fig-label { color:#60a5fa; font-weight:600; font-size:10px; }
.today-card h2 { font-family:'Plus Jakarta Sans',sans-serif; font-size:24px; margin:12px 0 3px; }
.today-card>p { font-size:13px; margin:0 0 16px; color:#94a3b8; }
.plan-row { min-height:54px; padding:9px 13px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:14px; margin:8px 0; }
.plan-row strong { display:block; font-size:14px; }
.plan-row small { display:block; color:#9fb0ca; margin-top:4px; font-size:11px; }
.fig-primary { min-height:44px; width:100%; border-radius:14px; border:1px solid var(--primary-line); background: var(--primary-strong); color:white; font-size:13px; font-weight:600; }
.coach-card { min-height:112px; background:#0a211d; border-color:rgba(23,109,91,.8); }
.coach-card .fig-label { color:#34d399; }
.coach-card p { color:#d8e7e2; font-size:13px; line-height:1.35; margin:10px 0 7px; }
.mini-btn { min-height:28px; border-radius:14px; border:1px solid rgba(34,48,76,.7); background:#121d34; color:#c9d5ea; font-size:12px; font-weight:600; padding:0 18px; }
.ready-card { min-height:122px; }
.ready-card h3 { font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; margin:0 0 4px; }
.ready-card>small { color:#8ea0bd; font-size:11px; }
.signal-row { display:grid; grid-template-columns:repeat(3,1fr); margin-top:15px; }
.signal strong { font-family:'Plus Jakarta Sans',sans-serif; display:block; font-size:20px; }
.signal:nth-child(1) strong { color:#34d399; }.signal:nth-child(2) strong { color:#60a5fa; }.signal:nth-child(3) strong { color:#a78bfa; }
.signal small { color:#8ea0bd; font-size:10px; }
.quick-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; margin:18px 0 10px; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.quick-action { min-height:66px; border-radius:16px; border:1px solid #1b2841; background:#0d1628; color:#aab7cc; padding:9px; text-align:left; font-size:10px; }
.quick-action b { display:block; color:#60a5fa; font-size:12px; margin-bottom:16px; }
.goal-card { min-height:76px; position:relative; padding:13px 15px; margin-top:16px; }
.goal-card small { color:#8ea0bd; font-size:11px; display:block; }
.goal-card strong { font-family:'Plus Jakarta Sans',sans-serif; display:block; font-size:17px; margin-top:6px; }
.goal-card em { position:absolute; right:15px; top:36px; color:#34d399; font-style:normal; font-size:11px; font-weight:600; }
.fig-bottom-nav { position:fixed; z-index:20; bottom:0; width:min(430px,100%); height:58px; border-top:1px solid rgba(255,255,255,.06); background:rgba(9,15,30,.97); display:grid; grid-template-columns:repeat(5,1fr); }
.fig-bottom-nav button { border:0; background:transparent; color:#7d8ca6; font-size:10px; position:relative; padding-top:21px; }
.fig-bottom-nav button:before { content:''; position:absolute; width:4px; height:4px; border-radius:2px; background:rgba(88,103,127,.45); left:50%; top:17px; }
.fig-bottom-nav button.active { color:#60a5fa; }
.fig-bottom-nav button.active:before { background:var(--primary); }
.member-generic { padding-top:10px; }
.member-generic .topbar { display:none; }
.member-generic .card { background:var(--panel); border-color:#1b2841; }
.member-generic .btn { background:var(--primary); color:white; }
.member-generic .pill { color:#60a5fa; border-color:#224a89; background:#0c1730; }
.member-generic .grid { grid-template-columns:1fr; }
.member-generic .span-4,.member-generic .span-5,.member-generic .span-6,.member-generic .span-7,.member-generic .span-8,.member-generic .span-12 { grid-column:1; }
.member-generic .muscle-layout { grid-template-columns:1fr; }
.member-generic .muscle-stage { min-height:570px; }
.toast { position:fixed; z-index:100; left:50%; bottom:78px; transform:translateX(-50%); width:min(370px,calc(100% - 32px)); border:1px solid #224a89; background:#101c33; color:#e8eeff; padding:13px 16px; border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.5); text-align:center; font-size:13px; }
.nutrition-head { padding:0 4px 18px; }.nutrition-head h1{font-size:28px;margin:7px 0;font-family:Inter,sans-serif}.nutrition-head p{margin:0;color:#7d91b0;font-size:14px}
.nutrition-summary{background:#091220;border-color:#143861;padding:17px;margin-bottom:18px}.nutrition-summary h2{font-size:23px;margin:10px 0 4px}.nutrition-summary>p{margin:0;color:#7d91b0;font-size:13px}.nutrition-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:26px 0 18px}.nutrition-metrics strong{display:block;font-size:19px}.nutrition-metrics small{color:#7d91b0;font-size:11px}.nutrition-bar{height:6px;border-radius:3px;background:#121c2e;overflow:hidden}.nutrition-bar i{display:block;width:60%;height:100%;background:#2ed9a6;border-radius:inherit}.screen-section-title{display:flex;justify-content:space-between;align-items:center;margin:22px 4px 10px}.screen-section-title h2{font-size:17px}.screen-section-title button{border:0;background:transparent;color:#73b2ff;font-size:12px}.nutrition-meal{position:relative;background:#0b1321;border-color:#131e30;padding:15px}.nutrition-meal small{color:#7d91b0}.nutrition-meal h2{font-size:18px;margin:9px 0}.nutrition-meal p{margin:0;font-size:12px}.nutrition-meal button{position:absolute;right:17px;top:34px}.nutrition-coach{background:#061b1c;border-color:#0d594a}.nutrition-coach .fig-label{color:#2ed9a6}.nutrition-coach h2{font-size:16px;margin:12px 0 5px}.nutrition-coach p{font-size:12px;margin:0}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 8px}.nutrition-tool{min-height:62px;border-radius:16px;border:1px solid #131e30;background:#0b1321;color:#ebf2fc;text-align:left;padding:11px 13px;font-weight:600}.nutrition-tool small{display:block;color:#7d91b0;margin-top:7px;font-weight:400}.hydration{display:flex;align-items:center;gap:14px}.hydration strong{font-size:17px}.hydration small{color:#7d91b0;white-space:nowrap}.hydration .nutrition-bar{flex:1}.hydration .nutrition-bar i{background:#2e6bfa}
.foundation-screen{padding:38px 4px 18px}.foundation-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.foundation-brand{font-family:'Plus Jakarta Sans';font-weight:700;color:#4c7dff}.foundation-step{font-size:11px;color:#74869e}.foundation-progress{height:8px;border-radius:99px;background:#10203a;margin-bottom:22px;overflow:hidden}.foundation-progress i{display:block;height:100%;background:#4c7dff;border-radius:inherit}.foundation-screen h1{font-family:'Plus Jakarta Sans';font-size:28px;line-height:1.18;margin:0 0 12px}.foundation-intro{color:#74869e;font-size:13px;margin:0 0 18px}.choice-list{display:grid;gap:12px}.choice{width:100%;border:1px solid #10203a;background:#08111f;color:#eef3fa;border-radius:16px;padding:15px;text-align:left}.choice.selected{background:#0b1628;border-color:#315fbd}.choice strong{display:flex;justify-content:space-between;font-size:15px}.choice strong:after{content:'○';color:#74869e}.choice.selected strong:after{content:'●';color:#4c7dff}.choice small{display:block;color:#74869e;margin-top:6px}.guardrail{border:1px solid #10203a;background:#03070d;border-radius:17px;padding:14px;margin:18px 0}.guardrail b{display:block;color:#32d583;font-size:10px;margin-bottom:7px}.guardrail p{font-size:11px;margin:0}.foundation-actions{display:flex;gap:10px;margin-top:18px}.foundation-actions button{flex:1}.foundation-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.foundation-form .field{margin:0}.foundation-form .field.wide{grid-column:1/-1}.foundation-form input{background:#08111f}.profile-screen{padding-top:38px}.profile-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}.profile-avatar{width:56px;height:56px;border-radius:50%;background:#4c7dff;display:grid;place-items:center;font-family:'Plus Jakarta Sans';font-weight:800;color:white}.profile-head-copy{flex:1}.profile-head h1{font-size:22px;margin:0 0 4px}.profile-head p{font-size:11px;margin:0}.text-action{border:0;background:transparent;color:#4c7dff;font-size:12px;font-weight:600}.goal-panel{background:#0b1628;border:1px solid #10203a;border-radius:17px;padding:15px;margin-bottom:16px}.goal-panel b{font-size:10px;color:#4c7dff}.goal-panel strong{display:block;margin:7px 0;font-size:14px}.goal-panel small{color:#32d583}.settings-label{display:block;color:var(--muted);font-weight:600;font-size:10px;margin:17px 0 9px}.settings-group{border:1px solid #10203a;background:#08111f;border-radius:17px;overflow:hidden}.settings-row{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;border-bottom:1px solid #10203a;background:#08111f;color:#eef3fa;padding:12px;text-align:left}.settings-row:last-child{border-bottom:0}.settings-row strong{font-size:13px}.settings-row small{display:block;color:#74869e;font-size:10px;margin-top:4px}.settings-row>span:last-child{color:#33445c;font-size:18px}.safety-panel{border:1px solid #10203a;background:#03070d;border-radius:17px;padding:13px;margin-top:18px}.safety-panel b{color:#ffb547;font-size:10px}.safety-panel p{font-size:11px;margin:7px 0 0}
.training-screen{padding-top:38px}.training-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.training-head h1{font-family:'Plus Jakarta Sans';font-size:29px;margin:0}.training-head button{border:0;background:transparent;color:#4c7dff;font-weight:600}.search-box{width:100%;height:46px;border:1px solid #10203a;background:#03070d;color:#eef3fa;border-radius:17px;padding:0 14px;margin-bottom:14px}.chip-row{display:flex;gap:8px;overflow:auto;margin-bottom:16px}.chip-row button{border:0;background:#10203a;color:#74869e;border-radius:99px;padding:9px 13px;white-space:nowrap;font-size:11px}.chip-row button.active{background:#4c7dff;color:#050a14}.recommend-panel{background:#0b1628;border:1px solid #10203a;border-radius:17px;padding:15px;margin-bottom:18px}.recommend-panel b{font-size:10px;color:#4c7dff}.recommend-panel strong{display:block;font-size:14px;margin:8px 0}.recommend-panel small{color:#74869e}.exercise-list{display:grid;gap:12px}.exercise-row{display:flex;align-items:center;gap:10px;background:#08111f;border:1px solid #10203a;border-radius:15px;padding:13px;color:#eef3fa;text-align:left;width:100%}.exercise-icon{width:46px;height:46px;border:1px solid #10203a;background:#03070d;border-radius:12px;display:grid;place-items:center;color:#4c7dff;font-size:18px}.exercise-copy{flex:1}.exercise-copy strong{display:block;font-size:13px}.exercise-copy small{color:#74869e;font-size:10px}.readiness{font-size:10px;color:#32d583}.training-section{margin:20px 0 10px;color:var(--muted);font-size:10px}.set-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.set-type{border:1px solid #10203a;background:#08111f;color:#eef3fa;border-radius:15px;padding:14px;text-align:left}.set-type strong{display:block}.set-type small{color:#74869e;display:block;margin-top:5px}.builder-exercise{background:#08111f;border:1px solid #10203a;border-radius:17px;padding:14px;margin-bottom:10px}.builder-exercise header{display:flex;justify-content:space-between}.builder-exercise small{color:#74869e}.set-table{width:100%;margin-top:12px;border-collapse:collapse}.set-table td{border-top:1px solid #10203a;padding:10px 4px;color:#74869e;font-size:11px}.set-table td:last-child{text-align:right;color:#eef3fa}.active-banner{background:#0b1628;border:1px solid #315fbd;border-radius:20px;padding:17px;margin-bottom:14px}.active-banner h1{font-size:26px;margin:8px 0}.timer{font-family:'Plus Jakarta Sans';font-size:34px;color:#4c7dff}.history-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #10203a;padding:13px 0}.history-row:last-child{border:0}.history-row small{color:#74869e}.record-value{font-family:'Plus Jakarta Sans';font-size:20px;color:#32d583}
.health-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.health-kpi{background:#08111f;border:1px solid #10203a;border-radius:15px;padding:13px}.health-kpi strong{display:block;font-family:'Plus Jakarta Sans';font-size:20px}.health-kpi small{color:#74869e;font-size:10px}.trend-bars{height:120px;display:flex;align-items:flex-end;gap:9px;padding:14px 4px}.trend-bars i{flex:1;background:linear-gradient(#4c7dff,#18386e);border-radius:5px 5px 2px 2px}.health-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.health-action{min-height:82px;border:1px solid #10203a;background:#08111f;color:#eef3fa;border-radius:16px;padding:14px;text-align:left}.health-action strong{display:block}.health-action small{display:block;color:#74869e;margin-top:7px}.sleep-ring{width:150px;height:150px;border-radius:50%;margin:18px auto;display:grid;place-items:center;background:conic-gradient(#7c5cff 0 84%,#10203a 84%)}.sleep-ring div{width:116px;height:116px;border-radius:50%;background:#08111f;display:grid;place-items:center;text-align:center}.sleep-ring strong{display:block;font-family:'Plus Jakarta Sans';font-size:30px}.route-map{height:210px;border:1px solid #143861;border-radius:18px;background:radial-gradient(circle at 30% 40%,#214c84 0 3px,transparent 4px),radial-gradient(circle at 70% 65%,#32d583 0 4px,transparent 5px),linear-gradient(145deg,#0b1628,#06101c);position:relative;overflow:hidden}.route-map:after{content:'';position:absolute;left:15%;top:25%;width:65%;height:45%;border:3px solid #4c7dff;border-left-color:transparent;border-radius:50%;transform:rotate(18deg)}
/* On a desktop the member app is shown as a phone preview. It previously had a
   fixed 932px height, which is taller than most laptop viewports — so only the
   top of the device was visible and the page itself scrolled, making the app
   look magnified. Now the device fits the window and its CONTENT scrolls
   inside it, the way a phone actually behaves. */
@media(min-width:700px){
  .member-canvas{display:block; background:var(--bg)}
  .member-phone{
    margin:0;
    /* height + max-height rather than min(): clearer, and avoids any doubt
       about how min() resolves against a viewport unit. */
    height:calc(100vh - 48px);
    max-height:932px;
    min-height:0;
    border-radius:28px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .member-page{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch}
  .fig-bottom-nav{position:relative; margin-top:0; flex:0 0 auto; width:100%}
  /* Keep the device chrome quiet — the scrollbar belongs to the phone, not the page. */
  .member-page{scrollbar-width:thin; scrollbar-color:#22304c transparent}
  .member-page::-webkit-scrollbar{width:6px}
  .member-page::-webkit-scrollbar-thumb{background:#22304c; border-radius:99px}
  .member-page::-webkit-scrollbar-track{background:transparent}
}
.google-route-builder{overflow:visible}.google-route-map{height:230px;margin:12px 0 14px;border:1px solid #143861;border-radius:16px;background:#08111f;overflow:hidden}.map-status{margin:10px 0 0;color:#8ea0bd;font-size:11px}.fig-primary:disabled{opacity:.45;cursor:not-allowed}
.route-result{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:12px;border:1px solid #214c84;border-radius:12px;background:#08111f}.route-result[hidden]{display:none}.route-result strong,.route-result small{display:block}.route-result small{color:#8ea0bd;font-size:11px;text-align:right}

/* ---------------- Goal Engine ----------------
   Built from the existing member tokens: panel/line/text colours, the 17px card
   radius, and the .choice / .settings-group shapes the onboarding flow already
   uses, so a goal screen reads as the same app. */
.goal-q{margin:0 0 18px}
.goal-q>label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:6px}
.goal-q>label em{color:var(--subtle);font-style:normal;font-weight:400;font-size:11px}
.goal-q>small{display:block;color:var(--muted);font-size:11px;margin:-2px 0 9px;line-height:1.5}
.goal-input,.goal-range{display:flex;align-items:center;gap:8px}
.goal-input input,.goal-range input{flex:1;min-width:0;height:44px;border:1px solid var(--panel-2);background:#03070d;color:var(--text);border-radius:14px;padding:0 13px}
.goal-input input:focus-visible,.goal-range input:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.goal-input b,.goal-range b{color:var(--muted);font-size:12px;font-weight:600}
.goal-range span{color:var(--muted);font-size:11px}
.goal-chips{display:flex;flex-wrap:wrap;gap:8px}
.goal-chip{border:1px solid var(--panel-2);background:var(--panel);color:var(--muted);border-radius:99px;padding:9px 13px;font-size:12px}
.goal-chip.on{background:var(--primary-soft);border-color:var(--primary-line);color:var(--text)}
.goal-scale{display:flex;gap:8px}
.goal-scale button{flex:1;height:44px;border:1px solid var(--panel-2);background:var(--panel);color:var(--muted);border-radius:14px;font-weight:600}
.goal-scale button.on{background:var(--primary-strong);border-color:var(--primary-strong);color:var(--on-primary)}
.goal-missing{border:1px solid rgba(255,159,67,.35);background:rgba(255,159,67,.07);color:#ffc46b;border-radius:15px;padding:12px 14px;font-size:12px;margin:14px 0;line-height:1.55}
.goal-missing ul{margin:8px 0 0;padding-left:18px}
.goal-missing li{margin:3px 0}
.choice.guide-choice{border-style:dashed}
.goal-suggest{border:1px solid var(--primary-line);background:var(--primary-soft);border-radius:17px;padding:16px;margin-top:18px}
.goal-suggest b{font-size:10px;color:var(--primary);letter-spacing:.08em}
.goal-suggest strong{display:block;font-size:17px;margin:8px 0}
.goal-suggest p{font-size:12px;color:var(--muted);margin:0 0 14px;line-height:1.6}
.goal-alts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

.support-list{display:grid;gap:10px}
.support-row{border:1px solid var(--panel-2);background:var(--panel);border-radius:15px;padding:12px}
.support-row.on{border-color:var(--primary-line);background:#0b1628}
.support-toggle{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--text);font-size:13px;text-align:left;padding:0}
.support-toggle .tick{width:20px;height:20px;flex:none;border:1px solid var(--panel-2);border-radius:7px;display:grid;place-items:center;color:var(--primary)}
.support-row.on .tick{border-color:var(--primary);background:var(--primary-soft)}
.imp-row{display:flex;gap:6px;margin-top:11px}
.imp-row button{flex:1;border:1px solid var(--panel-2);background:#03070d;color:var(--muted);border-radius:10px;padding:7px;font-size:11px}
.imp-row button.on{background:var(--primary-strong);border-color:var(--primary-strong);color:var(--on-primary)}

.body-list{display:grid;gap:10px}
.body-row{border:1px solid var(--panel-2);background:var(--panel);border-radius:15px;padding:12px}
.body-row strong{display:block;font-size:13px;margin-bottom:9px}
.role-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.role-row button{border:1px solid var(--panel-2);background:#03070d;color:var(--muted);border-radius:10px;padding:8px 4px;font-size:10.5px;line-height:1.2}
.role-row button.on{color:var(--on-primary)}
.role-row button.on.primary{background:var(--primary-strong);border-color:var(--primary-strong)}
.role-row button.on.secondary{background:#2a4a9e;border-color:#2a4a9e}
.role-row button.on.maintain{background:var(--panel-2);border-color:#2b3d5e;color:var(--text)}
.role-row button.on.avoid{background:#7a2f39;border-color:#7a2f39}

.safety-flag{border:1px solid var(--panel-2);background:#03070d;border-radius:17px;padding:15px;margin:0 0 12px}
.safety-flag b{display:block;font-size:10px;letter-spacing:.08em;margin-bottom:7px;color:var(--muted)}
.safety-flag strong{display:block;font-size:14px;margin-bottom:7px}
.safety-flag p{font-size:12px;color:var(--muted);margin:0;line-height:1.6}
.safety-flag .clinician{margin-top:9px;color:var(--text)}
.safety-flag.lvl-info b{color:var(--blue)}
.safety-flag.lvl-caution{border-color:rgba(255,159,67,.4)}
.safety-flag.lvl-caution b{color:var(--orange)}
.safety-flag.lvl-high{border-color:rgba(255,93,104,.45)}
.safety-flag.lvl-high b{color:var(--red)}
.safety-flag button{margin-top:12px;border:1px solid var(--primary-line);background:var(--primary-soft);color:var(--text);border-radius:12px;padding:9px 14px;font-size:12px}
.safety-flag button.acked{border-color:var(--green-line);background:var(--green-soft);color:var(--green)}

.goal-hero{border:1px solid var(--primary-line);background:linear-gradient(180deg,#0b1628,#08111f);border-radius:20px;padding:18px;margin-bottom:6px}
.goal-hero b{font-size:10px;color:var(--primary);letter-spacing:.08em}
.goal-hero h2{font-family:'Plus Jakarta Sans';font-size:22px;line-height:1.2;margin:9px 0 10px}
.goal-hero p{font-size:13px;color:var(--muted);margin:0;line-height:1.65}
.settings-row .ok{color:var(--green)}
.set-plan{padding:12px}
.set-plan-row{display:grid;grid-template-columns:88px 1fr 26px;align-items:center;gap:9px;margin-bottom:7px}
.set-plan-row span{font-size:11px;color:var(--muted)}
.set-plan-row i{display:block;height:7px;border-radius:99px;background:var(--primary);min-width:3px}
.set-plan-row b{font-size:11px;text-align:right;color:var(--text)}

.goal-history-card{margin-bottom:12px}
.goal-dates{display:block;color:var(--subtle);font-size:11px;margin-top:6px}
.goal-timeline{margin-top:12px;border-top:1px solid var(--panel-2);padding-top:11px}
.goal-timeline .tl{display:grid;gap:2px;padding:7px 0;border-bottom:1px solid rgba(27,40,65,.6)}
.goal-timeline .tl:last-child{border-bottom:0}
.goal-timeline b{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.goal-timeline span{font-size:12px;color:var(--text);line-height:1.5}
.goal-timeline em{font-size:11px;color:var(--muted);font-style:normal}
.goal-timeline small{font-size:10px;color:var(--subtle)}

.rec-card{border:1px solid var(--panel-2);background:var(--panel);border-radius:18px;padding:16px;margin-bottom:12px}
.rec-card h2{font-size:16px;margin:8px 0 8px}
.rec-card p{font-size:12px;color:var(--muted);margin:0;line-height:1.6}
.rec-card .rec-why{margin:13px 0;border-left:2px solid var(--primary-line);padding-left:11px}
.rec-card .rec-why b{display:block;font-size:9.5px;letter-spacing:.08em;color:var(--primary);margin-bottom:4px}
.rec-card .rec-why span{font-size:12px;color:var(--muted);line-height:1.6}
.rec-card .btn-row{margin-top:14px}
.rec-card.approved{border-color:var(--green-line)}
.rec-card.declined{opacity:.6}
.rec-state{margin-top:12px;font-size:11px;color:var(--muted)}
/* Tracked metrics and cadences are stored as sentence fragments ("weight trend",
   "weekly"). Capitalising in CSS keeps the strings usable mid-sentence
   elsewhere while reading correctly as list rows here. */
.goal-caps{display:inline-block}
.goal-caps::first-letter{text-transform:uppercase}

/* Responsive member desktop workspace. These late overrides deliberately
   replace the original phone-preview media query without changing mobile. */
@media(min-width:700px){
  .member-canvas{display:block;background:var(--bg);padding:0}
  .member-phone{width:100%;min-height:100vh;height:100vh;max-height:none;margin:0;border-radius:0;box-shadow:none;overflow:hidden;display:grid;grid-template-columns:104px minmax(0,1fr)}
  .member-page{grid-column:2;grid-row:1;min-width:0;padding:34px clamp(28px,5vw,72px) 52px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .fig-bottom-nav{position:relative;grid-column:1;grid-row:1;width:104px;height:100vh;margin:0;border-top:0;border-right:1px solid rgba(255,255,255,.07);background:#07101f;grid-template-columns:1fr;grid-template-rows:repeat(5,minmax(76px,1fr));padding:18px 10px}
  .fig-bottom-nav button{padding:42px 6px 10px;border-radius:16px;font-size:11px}
  .fig-bottom-nav button:hover{background:rgba(96,165,250,.08);color:#cbd9ed}
  .fig-bottom-nav button.active{background:#0c1b33}
  .fig-bottom-nav button:before{top:32px}
  .statusbar{display:none}
  .mobile-heading{padding:0 4px 24px}
  .mobile-heading h1{font-size:clamp(34px,4vw,48px)}
  .notification{right:4px}
  .member-page:not(.member-generic){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-content:start}
  .member-page:not(.member-generic)>.mobile-heading,.member-page:not(.member-generic)>.quick-title,.member-page:not(.member-generic)>.quick-grid,.member-page:not(.member-generic)>.goal-card{grid-column:1/-1}
  .member-page:not(.member-generic)>.today-card{grid-column:span 7;margin:0}
  .member-page:not(.member-generic)>.coach-card,.member-page:not(.member-generic)>.ready-card{grid-column:span 5;margin:0}
  .member-page:not(.member-generic)>.quick-title{margin:8px 0 -4px}
  .member-page:not(.member-generic)>.quick-grid{grid-template-columns:repeat(4,minmax(130px,1fr));gap:14px}
  .member-page:not(.member-generic)>.goal-card{margin:0}
  .member-page:not(.member-generic)>.fig-card{min-height:max-content}
  .member-generic .grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .member-generic .span-4{grid-column:span 4}.member-generic .span-5{grid-column:span 5}.member-generic .span-6{grid-column:span 6}.member-generic .span-7{grid-column:span 7}.member-generic .span-8{grid-column:span 8}.member-generic .span-12{grid-column:1/-1}
  .member-generic .muscle-layout{grid-template-columns:minmax(360px,1.15fr) minmax(320px,.85fr)}
  .member-generic .tool-grid,.member-generic .health-action-grid,.member-generic .set-type-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .member-generic>.auth-screen{max-width:540px;margin:6vh auto 0}
  .member-generic>.foundation-screen,.member-generic>.training-screen,.member-generic>.profile-screen{max-width:1180px;margin-left:auto;margin-right:auto}
}
@media(min-width:700px) and (max-width:980px){
  .member-phone{grid-template-columns:82px minmax(0,1fr)}
  .fig-bottom-nav{width:82px;padding-inline:6px}
  .member-page{padding-inline:28px}
  .member-page:not(.member-generic)>.today-card,.member-page:not(.member-generic)>.coach-card,.member-page:not(.member-generic)>.ready-card{grid-column:1/-1;grid-row:auto}
  .member-generic .span-4,.member-generic .span-5,.member-generic .span-6,.member-generic .span-7,.member-generic .span-8{grid-column:1/-1}
  .member-generic .muscle-layout{grid-template-columns:1fr}
}