#setGoal .q-opt[data-value="Build muscle"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5v11M17.5 6.5v11M3.5 9v6M20.5 9v6M6.5 12h11'/%3E%3C/svg%3E"); }
#setGoal .q-opt[data-value="Lose fat"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.6 3.2-3.5 5-3.5 9a3.5 3.5 0 0 0 7 0c0-1.6-.7-2.6-1.4-3.6-.3 1-.9 1.6-1.8 1.8.4-2.7-.1-5.3-.3-7.2z'/%3E%3Cpath d='M7.5 21h9'/%3E%3C/svg%3E"); }
#setGoal .q-opt[data-value="Body recomposition (lose fat & build muscle)"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3-3M20 16H7l3 3'/%3E%3C/svg%3E"); }
#setGoal .q-opt[data-value="Get stronger"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3 5 13.5h6L10 21l9-11h-6z'/%3E%3C/svg%3E"); }
#setGoal .q-opt[data-value="Improve endurance / cardio fitness"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.2-5.5 4 11 2.3-5.5H21'/%3E%3C/svg%3E"); }
#setGoal .q-opt[data-value="Sport-specific performance"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='.6'/%3E%3C/svg%3E"); }
#setGoal .q-opt[data-value="Mobility & flexibility"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='1.8'/%3E%3Cpath d='M12 8v6M6.5 11 12 9.5 17.5 11M9 21l3-7 3 7'/%3E%3C/svg%3E"); }
#setGoal .q-opt[data-value="Injury recovery / rehab"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
#setGoal .q-opt[data-value="General health / longevity"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }
#setGoal .q-opt[data-value="__custom__"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v3.5M12 16.5V20M4 12h3.5M16.5 12H20M6.6 6.6l2.4 2.4M15 15l2.4 2.4M17.4 6.6 15 9M9 15l-2.4 2.4'/%3E%3C/svg%3E"); }
#setEquipment .q-opt[data-value="Full commercial gym"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12h19M5 8v8M8 6v12M16 6v12M19 8v8'/%3E%3C/svg%3E"); }
#setEquipment .q-opt[data-value="Home gym, limited equipment"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7M6 10v10h12V10M10 20v-5h4v5'/%3E%3C/svg%3E"); }
#setEquipment .q-opt[data-value="Bodyweight only"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 8v7M7.5 11h9M9.5 21l2.5-6 2.5 6'/%3E%3C/svg%3E"); }
#setToneGrid .tone-opt[data-tone="direct"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M13 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E"); }
#setToneGrid .tone-opt[data-tone="hype"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.3 5.3L20 9l-4.2 3.8L17 18.5l-5-3-5 3 1.2-5.7L4 9l5.7-.7z'/%3E%3C/svg%3E"); }
#setToneGrid .tone-opt[data-tone="clinical"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5.5c0 4.7 3 7.7 7 9.5 4-1.8 7-4.8 7-9.5V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
#setToneGrid .tone-opt[data-tone="adaptive"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c2-5 4-5 6 0s4 5 6 0 3-3.5 6-1'/%3E%3C/svg%3E"); }
#setExperience .q-opt[data-value="Beginner (0-1 yr)"]{ --lv:1; }
#setExperience .q-opt[data-value="Intermediate (1-3 yrs)"]{ --lv:2; }
#setExperience .q-opt[data-value="Advanced (3+ yrs)"]{ --lv:3; }
#setExperience .q-opt[data-value="Professional (10+ yrs)"]{ --lv:4; }

/* ==========================================================================
   SETTINGS, MADE INTERACTIVE (2026-10-08). Same elements, ids and handlers as before: this file only restyles them
   (plus js/settingsui.js for the live summary, steppers, injury chips, tone preview and the save bar).
   ========================================================================== */
@property --p{ syntax:'<number>'; inherits:false; initial-value:0; }

#settingsPanel .settings-body{ padding:16px 16px 0; display:flex; flex-direction:column; gap:26px; scroll-behavior:smooth; }
#settingsPanel .su-sec{ display:flex; flex-direction:column; gap:12px; margin:0; }
#settingsPanel .su-sec .field{ margin:0; }
#settingsPanel .unit-toggle{ margin:0; }
#settingsPanel .su-title{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0;
  font:700 16px/1.2 var(--font-ui, inherit); color:var(--text); letter-spacing:0; text-transform:none;
}
#settingsPanel .su-sec.is-done > .su-title::after{
  content:""; flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--gold);
  -webkit-mask:var(--su-check) center/12px no-repeat, linear-gradient(#000,#000); -webkit-mask-composite:xor; mask-composite:exclude;
}
#settingsPanel .su-sub{ font:600 12.5px var(--font-ui, inherit); color:var(--text-dim); margin:0; }
#settingsPanel .su-sub small{ font-weight:500; opacity:.85; }

/* ---------- profile hero ---------- */
.su-hero{
  display:grid; grid-template-columns:auto 1fr; gap:14px 16px; align-items:center; padding:18px; border-radius:18px;
  border:1px solid var(--accent-line, var(--line-strong)); background:linear-gradient(160deg,var(--accent-tint),var(--panel) 72%);
}
.su-crest{
  --p:0; position:relative; width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--gold) calc(var(--p) * 1%), var(--line-strong) 0); transition:--p .8s cubic-bezier(.16,1,.3,1);
}
.su-crest::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--panel); }
.su-crest span{ position:relative; font:400 32px/1 var(--font-display, serif); color:var(--gold); }
.su-hero-txt{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.su-name{ font:700 18px/1.2 var(--font-ui, inherit); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.su-sum{ font-size:13.5px; line-height:1.35; color:var(--text-dim); min-height:1.35em; }
.su-pct{ font-size:12.5px; color:var(--text-dim); }
.su-pct b{ color:var(--gold); font-size:15px; font-variant-numeric:tabular-nums; }
.su-next{
  grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
  padding:11px 14px; border-radius:12px; border:1px dashed var(--accent-line, var(--line-strong)); background:transparent;
  color:var(--text); font:600 13.5px/1.3 var(--font-ui, inherit); cursor:pointer;
}
.su-next::after{ content:"\2192"; color:var(--gold); font-size:16px; flex:0 0 auto; }
.su-next.is-complete{ border-style:solid; cursor:default; }
.su-next.is-complete::after{ content:"\2713"; }
.su-langrow{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.su-langrow label{ margin:0; font:600 12.5px var(--font-ui, inherit); color:var(--text-dim); }
.su-langrow .unit-toggle{ width:190px; padding:3px; }
.su-langrow .unit-opt{ padding:7px 6px; }

/* ---------- tiles (goal, level, place) ---------- */
#settingsPanel .su-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; }
#settingsPanel .su-tiles .q-opt{
  position:relative; display:flex; align-items:center; gap:11px; width:auto; min-height:60px; margin:0; padding:12px 12px;
  text-align:left; font:600 13.5px/1.25 var(--font-ui, inherit); color:var(--text-dim); border-radius:14px;
  border:1px solid var(--line); background:var(--panel); transform:none; box-shadow:none;
  transition:border-color .2s, background-color .2s, color .2s, transform .2s cubic-bezier(.16,1,.3,1);
}
#settingsPanel .su-tiles .q-opt:hover{ border-color:var(--line-strong); transform:none; box-shadow:none; }
#settingsPanel .su-tiles .q-opt:active{ transform:scale(.97); }
#settingsPanel .su-tiles .q-opt::before{
  content:""; flex:0 0 24px; width:24px; height:24px; background:currentColor; opacity:.85;
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat;
}
#settingsPanel .su-tiles .q-opt.selected{ color:var(--text); border-color:var(--gold); background:var(--accent-tint); box-shadow:0 0 0 1px var(--gold) inset; }
#settingsPanel .su-tiles .q-opt.selected::before{ color:var(--gold); opacity:1; }
#settingsPanel .su-tiles .q-opt.selected::after{
  content:""; position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%; background:var(--gold);
  -webkit-mask:var(--su-check) center/11px no-repeat, linear-gradient(#000,#000); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:suPop .38s cubic-bezier(.34,1.56,.64,1);
}
#setGoal .q-opt:nth-child(3), #setGoal .q-opt:last-child{ grid-column:1/-1; }
#setGoal .q-opt.selected{ padding-right:34px; }

#settingsPanel .su-level .q-opt{ flex-direction:column; align-items:flex-start; gap:9px; min-height:88px; }
#settingsPanel .su-level .q-opt::before{
  flex:0 0 auto; width:40px; height:22px; opacity:1; -webkit-mask:var(--su-bars) center/contain no-repeat; mask:var(--su-bars) center/contain no-repeat;
  background:linear-gradient(90deg, var(--gold) calc(var(--lv) * 25% + 4%), var(--line-strong) 0);
}
#settingsPanel .su-level .q-opt.selected::after{ top:10px; right:10px; }

.su-place{ grid-template-columns:1fr !important; }

#setGoalCustomBox{ margin:0; }
#setGoalCustomBox input{ width:100%; }

/* ---------- body: segmented toggles and stat cards ---------- */
#settingsPanel .unit-toggle .unit-opt{ transition:background-color .2s, color .2s, box-shadow .2s; }
#settingsPanel .unit-toggle .unit-opt.selected{ background:var(--accent-tint); color:var(--text); box-shadow:0 0 0 1px var(--gold) inset; }
.su-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.su-stat{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:11px 6px 9px; border-radius:14px;
  border:1px solid var(--line); background:var(--panel); transition:border-color .2s;
}
.su-stat:focus-within{ border-color:var(--gold); }
.su-stat label{ margin:0; font:600 11.5px/1.2 var(--font-ui, inherit); color:var(--text-dim); text-align:center; }
.su-stat input{
  width:100%; margin:0; padding:0; border:0; background:transparent; color:var(--text); text-align:center;
  font:700 28px/1.15 var(--font-ui, inherit); font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield; outline:none;
}
.su-stat input::-webkit-outer-spin-button, .su-stat input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.su-steps{ display:flex; gap:8px; }
.su-step{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:var(--panel-2, var(--panel)); color:var(--text);
  font:600 18px/1 var(--font-ui, inherit); display:grid; place-items:center; padding:0; cursor:pointer; touch-action:manipulation;
}
.su-step:active{ transform:scale(.9); background:var(--accent-tint); border-color:var(--gold); }

/* ---------- injuries ---------- */
.su-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.su-chip{
  border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:7px 12px; cursor:pointer;
  font:600 12.5px/1 var(--font-ui, inherit); color:var(--text-dim); transition:border-color .2s, background-color .2s, color .2s;
}
.su-chip.on{ border-color:var(--gold); background:var(--accent-tint); color:var(--text); }
#setInjuries{ min-height:84px; border-radius:14px; }

/* ---------- tone ---------- */
#settingsPanel .su-tones{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#settingsPanel .su-tones .tone-opt{
  display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:13px 12px; min-height:80px; border-radius:14px;
  font:600 13.5px/1.25 var(--font-ui, inherit); color:var(--text-dim); border:1px solid var(--line); background:var(--panel); position:relative;
  transition:border-color .2s, background-color .2s, color .2s, transform .2s cubic-bezier(.16,1,.3,1);
}
#settingsPanel .su-tones .tone-opt:active{ transform:scale(.97); }
#settingsPanel .su-tones .tone-opt::before{
  content:""; width:22px; height:22px; background:currentColor; -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat;
}
#settingsPanel .su-tones .tone-opt.selected{ color:var(--text); border-color:var(--gold); background:var(--accent-tint); box-shadow:0 0 0 1px var(--gold) inset; }
#settingsPanel .su-tones .tone-opt.selected::before{ color:var(--gold); }
.su-say{
  min-height:0; padding:14px 16px; border-radius:14px; border:1px dashed var(--accent-line, var(--line-strong)); background:transparent;
  display:flex; flex-direction:column; gap:6px;
}
.su-say small{ font:600 11.5px var(--font-ui, inherit); color:var(--text-dim); }
.su-say q{ font:400 18px/1.35 var(--font-display, serif); color:var(--text); quotes:none; }
.su-say.is-swap q{ opacity:0; transform:translateY(4px); }
.su-say q{ transition:opacity .22s, transform .22s; }

/* ---------- account ---------- */
.su-account{ padding-top:22px; border-top:1px solid var(--line); gap:16px !important; }

/* ---------- save bar: only appears when something changed ---------- */
.su-savebar{
  position:sticky; bottom:0; z-index:3; margin:0 -16px; padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg); border-top:1px solid var(--line-strong); box-shadow:0 -14px 28px -18px rgba(0,0,0,.6);
  transform:translateY(120%); opacity:0; pointer-events:none; visibility:hidden; transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .25s, visibility 0s .3s;
}
.su-savebar.on{ transform:none; opacity:1; pointer-events:auto; visibility:visible; transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .25s; }
.su-save-msg{ font:600 13px/1.3 var(--font-ui, inherit); color:var(--text); min-width:0; }
.su-save-btns{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.su-discard{ background:transparent; border:0; color:var(--text-dim); font:600 13px var(--font-ui, inherit); text-decoration:underline; padding:8px 6px; cursor:pointer; }
.su-savebar #saveSettings{ width:auto; margin:0; padding:0 18px; min-height:44px; }
.su-savebar.ask .su-save-msg{ color:var(--gold); }
.su-savebar.ask{ animation:suNudge .45s; }

/* ---------- saved toast ---------- */
.su-toast{
  position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom, 0px)); z-index:100000; transform:translate(-50%, 16px); opacity:0;
  display:flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; background:var(--panel-2, var(--panel));
  border:1px solid var(--gold); color:var(--text); font:700 13.5px var(--font-ui, inherit); box-shadow:0 14px 30px -12px rgba(0,0,0,.7);
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .3s; pointer-events:none;
}
.su-toast.on{ transform:translate(-50%, 0); opacity:1; }
.su-toast::before{ content:"\2713"; color:var(--gold); font-weight:800; }

/* ---------- entrance + helpers ---------- */
#settingsPanel{ --su-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' stroke-width='2.6'/%3E%3C/svg%3E"); --su-bars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='15' width='3.4' height='6' rx='1' fill='black' stroke='none'/%3E%3Crect x='8.4' y='11' width='3.4' height='10' rx='1' fill='black' stroke='none'/%3E%3Crect x='13.8' y='7' width='3.4' height='14' rx='1' fill='black' stroke='none'/%3E%3Crect x='19.2' y='3' width='3.4' height='18' rx='1' fill='black' stroke='none'/%3E%3C/svg%3E"); }
@keyframes suIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes suPop{ from{ transform:scale(.2); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes suNudge{ 0%,100%{ transform:none; } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }
@keyframes suFlash{ 0%{ box-shadow:0 0 0 0 var(--gold); } 100%{ box-shadow:0 0 0 14px transparent; } }
#settingsPanel.show .su-hero, #settingsPanel.show .su-sec{ animation:suIn .55s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i, 0) * 55ms); }
.su-flash{ animation:suFlash .9s ease-out; border-radius:14px; }
html[data-theme="light"] .su-savebar{ box-shadow:0 -14px 28px -18px rgba(60,40,10,.25); }
@media (prefers-reduced-motion:reduce){
  #settingsPanel.show .su-hero, #settingsPanel.show .su-sec, .su-savebar.ask, .su-flash, #settingsPanel .su-tiles .q-opt.selected::after{ animation:none; }
  .su-crest, .su-savebar, .su-toast, .su-say q{ transition:none; }
}