/* ============================== Tokens ============================== */
:root {
  --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-script: "Dancing Script", "Brush Script MT", cursive;
  --font-num: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tab-h: 62px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* dark: Stronger Tomorrows evergreen night, warm coral + gold */
  --bg: #13221f;
  --card: #1b2e2a;
  --card-2: #233a35;
  --card-3: #2a443e;
  --sheet: #172824;
  --line: rgba(246, 240, 230, 0.09);
  --line-2: rgba(246, 240, 230, 0.16);
  --text: #f6f0e6;
  --text-2: #c9c2b5;
  --text-3: #a9a396; /* 4.5:1+ on bg, card and card-2 (WCAG AA) */
  --track: rgba(246, 240, 230, 0.1);
  --glass: rgba(19, 34, 31, 0.8);
  --accent: #d4806f;
  --accent-2: #e39a8b;
  --accent-soft: rgba(200, 117, 102, 0.18);
  --coral: #c87566;
  --coral-2: #e39a8b;
  --gold: #e9b85c;
  --ok: #6fc79e;
  --danger: #ff6b6b;
  --warn: #e9b85c;
  --p: #e39a8b;
  --c: #e9b85c;
  --f: #8fbfae;
  --water: #8fbfae;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 18px 40px -10px rgba(0, 0, 0, 0.6);
  --on-seg: #2f4a43;
  color-scheme: dark;
}

:root[data-theme="light"] {
  /* light: Soft Cream background, Deep Evergreen text and buttons, Warm Coral energy, Gold achievements */
  --bg: #f6f0e6;
  --card: #fffdf9;
  --card-2: #efe7da;
  --card-3: #fffdf9;
  --sheet: #faf6ef;
  --line: rgba(35, 62, 56, 0.1);
  --line-2: rgba(35, 62, 56, 0.17);
  --text: #1e332e;
  --text-2: #4a5955;
  --text-3: #5a6763; /* 4.5:1+ on cream and white (WCAG AA) */
  --track: rgba(35, 62, 56, 0.09);
  --glass: rgba(246, 240, 230, 0.86);
  --accent: #233e38;
  --accent-2: #3e6a5e;
  --accent-soft: rgba(35, 62, 56, 0.08);
  --coral: #c87566;
  --coral-2: #dc9284;
  --gold: #e9b85c;
  --ok: #2e7d5b;
  --danger: #c2413a;
  --warn: #b8862c;
  --p: #c0614f;
  --c: #b8862c;
  --f: #3e7a68;
  --water: #3e7a68;
  --shadow: 0 2px 4px rgba(35, 62, 56, 0.04), 0 16px 36px -14px rgba(35, 62, 56, 0.2);
  --shadow-pop: 0 18px 40px -12px rgba(35, 62, 56, 0.28);
  --on-seg: #fffdf9;
  color-scheme: light;
}

/* ============================== Base ============================== */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
body { position: fixed; inset: 0; overflow: hidden; -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; text-align: inherit; }
input, select, textarea { font: inherit; color: inherit; }
svg { display: block; flex: none; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
h1, h2, h3 { margin: 0; }

#app { position: fixed; inset: 0; max-width: 560px; margin: 0 auto; }
@media (min-width: 600px) {
  body { background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--bg) !important; }
  #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

.status-shim {
  position: fixed; top: 0; left: 0; right: 0; height: var(--safe-t); z-index: 30;
  background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
:root[data-theme="light"] .status-shim { background: #233e38; }

/* ============================== Screens ============================== */
.screen {
  position: absolute; inset: 0; display: none;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  padding: calc(var(--safe-t) + 14px) 16px calc(var(--tab-h) + var(--safe-b) + 28px);
}
.screen.active { display: block; animation: screenIn 0.4s var(--ease); }
#app.has-mini .screen { padding-bottom: calc(var(--tab-h) + var(--safe-b) + 100px); }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 8px 2px 18px; }
.page-head h1 { font-size: 32px; line-height: 1.08; letter-spacing: -0.028em; font-weight: 750; margin-top: 3px; }
.eyebrow { margin: 0; font-size: 12.5px; font-weight: 650; letter-spacing: 0.04em; color: var(--text-2); text-transform: uppercase; }
.avatar-btn {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 750; font-size: 17px;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.avatar-btn svg { width: 20px; height: 20px; }

.section-title { display: flex; justify-content: space-between; align-items: baseline; font-size: 20px; font-weight: 720; letter-spacing: -0.018em; margin: 26px 4px 10px; }
.link { color: var(--accent); font-weight: 650; font-size: 15px; letter-spacing: 0; }

/* ============================== Cards ============================== */
.card {
  display: block; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px;
  transition: transform 0.2s var(--ease);
}
.pressed:is(.card, .routine-card, .food-row) { transform: scale(0.985); }
.pressed:is(.btn, .icon-btn, .fab, .tab, .add-btn, .play-btn, .set-check, .glass, .chips button, .seg button, .scan-btn, .avatar-btn, .mini-stepper button) { transform: scale(0.94); }
.list-card { padding: 4px 0; overflow: hidden; }
.list-card > * { position: relative; }
.list-card > * + *::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.notice { color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.num-xl { font-family: var(--font-num); font-size: 34px; font-weight: 720; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1; }
.num-lg { font-family: var(--font-num); font-size: 28px; font-weight: 720; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.num-lg span { font-family: var(--font); font-size: 14px; font-weight: 550; color: var(--text-3); letter-spacing: 0; }

/* Hero (calorie ring) */
.hero {
  padding: 18px; cursor: pointer;
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 55%),
    radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 60%),
    var(--card);
}
.hero-grid { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.ring-wrap { position: relative; display: grid; place-items: center; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring-center small { font-size: 12.5px; color: var(--text-2); margin-top: 5px; font-weight: 550; }
.ring-track { stroke: var(--track); }
.ring-val { transition: stroke-dashoffset 0.8s var(--ease); }
.ring.anim .ring-val { animation: ringIn 1.2s var(--ease) both; }
@keyframes ringIn { from { stroke-dashoffset: var(--c); } }
.hero-stats { display: grid; gap: 13px; }
.hs { display: flex; align-items: center; gap: 11px; }
.hs-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--card-2); color: var(--text-2); }
.hs-ic svg { width: 18px; height: 18px; }
.hs-ic.food { color: var(--accent); background: var(--accent-soft); }
.hs-ic.streak { color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.hs small { display: block; font-size: 12px; color: var(--text-2); font-weight: 550; }
.hs b { font-family: var(--font-num); font-size: 17px; font-weight: 680; font-variant-numeric: tabular-nums; }

.macro-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.mbar-head span { font-size: 12px; color: var(--text-2); font-weight: 650; }
.mbar-val { margin-top: 2px; }
.mbar-val b { font-family: var(--font-num); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mbar-val small { color: var(--text-3); font-size: 12px; font-weight: 550; }
.mbar-track { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; margin: 7px 0 5px; }
.mbar-track i { display: block; height: 100%; border-radius: inherit; background: var(--m, var(--accent)); transition: width 0.7s var(--ease); }
.mbar-sub { font-size: 11.5px; color: var(--text-3); font-weight: 500; }

/* Tiles */
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.tile-grid .card { margin: 0; }
.tile { padding: 14px; display: flex; flex-direction: column; gap: 1px; min-height: 132px; --tc: var(--accent); }
.tile.water { --tc: var(--water); }
.tile.weight { --tc: var(--f); }
.tile-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tile-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 16%, transparent); color: var(--tc); }
.tile-ic svg { width: 19px; height: 19px; }
.tile-plus { width: 28px; height: 28px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; color: var(--text-2); }
.tile-plus svg { width: 16px; height: 16px; }
.tile small { color: var(--text-2); font-size: 13px; font-weight: 550; }
.tile b { font-family: var(--font-num); font-size: 25px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tile b span { font-family: var(--font); font-size: 13px; color: var(--text-3); font-weight: 550; letter-spacing: 0; }
.tile .tile-title { font-family: var(--font); font-size: 16.5px; letter-spacing: -0.01em; margin-top: auto; }
.tile.action { min-height: 112px; }
.tile.action .tile-ic { margin-bottom: 14px; }
.water-dots { display: flex; gap: 3px; margin-top: 9px; }
.water-dots i { flex: 1; height: 5px; border-radius: 3px; background: var(--track); transition: background 0.3s; }
.water-dots i.on { background: var(--water); }
.tile-sub { margin: 5px 0 0; font-size: 12px; color: var(--text-3); font-weight: 500; }

/* Workout card */
.wo-card { padding: 18px; position: relative; overflow: hidden; }
.wo-card::after {
  content: ""; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%);
}
.wo-card.live::after { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%); }
.wo-card-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.wo-time { display: inline-flex; gap: 5px; align-items: center; color: var(--text-2); font-size: 13.5px; font-weight: 550; font-variant-numeric: tabular-nums; }
.wo-time svg { width: 15px; height: 15px; }
.wo-card h3 { font-size: 23px; margin: 10px 0 3px; letter-spacing: -0.02em; position: relative; z-index: 1; }
.wo-card p { margin: 0 0 16px; color: var(--text-2); font-size: 14.5px; position: relative; z-index: 1; }
.wo-card .btn { position: relative; z-index: 1; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }
.pill svg { width: 13px; height: 13px; stroke-width: 3; }
.live-pill { background: var(--accent-soft); color: var(--accent); }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite; }
.ok-pill { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* Today meals */
.mq-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 12px 16px; }
.mq-row > div { flex: 1; min-width: 0; }
.mq-row b { display: block; font-size: 16px; font-weight: 620; }
.mq-row small { color: var(--text-3); font-size: 13px; }
.mq-kcal { font-family: var(--font-num); font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; }
.mq-add { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.mq-add svg { width: 16px; height: 16px; stroke-width: 2.5; }

/* Week */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.wk-bar { height: 66px; width: 14px; margin: 0 auto; border-radius: 8px; background: var(--track); display: flex; align-items: flex-end; overflow: hidden; }
.wk-bar i { width: 100%; border-radius: 8px; background: linear-gradient(var(--accent-2), var(--accent)); transition: height 0.7s var(--ease); }
.wk-bar i.over { background: var(--warn); }
.wk-l { display: block; font-size: 12px; color: var(--text-3); margin-top: 7px; font-weight: 700; }
.wk-day.today .wk-l { color: var(--text); }
.wk-day.today .wk-bar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--line-2); }
.wk-day.future .wk-bar { opacity: 0.45; }
.wk-dot { display: block; width: 6px; height: 6px; border-radius: 50%; margin: 5px auto 0; }
.wk-dot.on { background: var(--accent-2); }
.week-legend { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12px; color: var(--text-3); font-weight: 550; }
.week-legend span { display: inline-flex; gap: 6px; align-items: center; }
.lg-bar { width: 7px; height: 12px; border-radius: 3px; background: var(--accent); }
.lg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }

/* Install nudge */
.install-nudge {
  display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 14px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--card)), var(--card) 70%);
}
.in-main { flex: 1; display: flex; align-items: center; gap: 12px; text-align: left; padding: 6px 0; }
.in-main > svg { width: 26px; height: 26px; color: var(--accent); }
.in-main b { display: block; font-size: 15px; }
.in-main small { display: block; font-size: 12.5px; color: var(--text-2); }

/* ============================== Buttons ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 18px; border-radius: 14px;
  font-weight: 650; font-size: 15.5px; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform 0.2s var(--ease), opacity 0.2s, background 0.2s;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent));
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-tonal { background: var(--card-2); color: var(--text); }
.btn-ghost { color: var(--text-2); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost-danger { color: var(--danger); }
.btn-glass { background: rgba(255, 255, 255, 0.16); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-block { display: flex; width: 100%; }
.btn-lg { height: 54px; border-radius: 16px; font-size: 16.5px; }
.btn-sm { height: 34px; padding: 0 14px; border-radius: 11px; font-size: 14px; }
.btn-sm svg { width: 16px; height: 16px; }
.btn-grow { flex: 1; }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn-block + .btn-block { margin-top: 10px; }

.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); background: var(--card-2); transition: transform 0.2s var(--ease), opacity 0.2s; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.sm { width: 34px; height: 34px; background: transparent; }
.icon-btn.sm svg { width: 19px; height: 19px; }
.icon-btn.danger { color: var(--danger); }
.icon-btn:disabled { opacity: 0.25; }

/* ============================== Tab bar ============================== */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-width: 560px; margin: 0 auto;
  height: calc(var(--tab-h) + var(--safe-b)); padding: 4px 8px var(--safe-b);
  display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: start;
  background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid var(--line);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 7px; height: 54px; color: var(--text-3); font-size: 10.5px; font-weight: 650; transition: color 0.2s, transform 0.2s var(--ease); }
.tab svg { width: 25px; height: 25px; }
.tab.active { color: var(--text); }
.tab.active svg { color: var(--accent); }
.fab {
  width: 54px; height: 54px; border-radius: 18px; margin: 0 10px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--accent-2), var(--accent));
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--accent) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.25s var(--spring);
}
.fab svg { width: 26px; height: 26px; }

#mini { position: absolute; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b) + 8px); padding: 0 12px; z-index: 19; }
.mini-workout {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 18px; text-align: left;
  background: var(--card-3); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); animation: rise 0.45s var(--ease);
}
.mini-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; animation: pulse 1.6s infinite; }
.mini-workout > div { flex: 1; min-width: 0; }
.mini-workout b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-workout small { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.mini-rest { font-size: 13px; color: var(--text-2); background: var(--accent-soft); padding: 5px 10px; border-radius: 10px; font-weight: 600; }
.mini-rest b { display: inline; color: var(--accent); font-variant-numeric: tabular-nums; }
.mini-workout > svg { width: 20px; height: 20px; color: var(--text-3); }

/* ============================== Diary ============================== */
.diary-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 14px; }
.date-btn { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 18px; border-radius: 14px; cursor: pointer; }
.date-btn b { font-size: 21px; font-weight: 740; letter-spacing: -0.015em; }
.date-btn small { font-size: 13px; color: var(--text-2); font-weight: 550; }
.date-btn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; -webkit-appearance: none; appearance: none; cursor: pointer; border: 0; }

.eq-card { cursor: pointer; }
.eq { display: flex; align-items: center; justify-content: space-between; text-align: center; }
.eq > div b { display: block; font-family: var(--font-num); font-size: 21px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.eq > div small { font-size: 12px; color: var(--text-2); font-weight: 550; }
.eq-op { color: var(--text-3); font-size: 18px; padding-bottom: 16px; }
.eq-rem b { color: var(--ok); }
.eq-rem.over b { color: var(--danger); }
.eq-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.eqm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.eqm-top b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.eqm-top small { color: var(--text-3); font-weight: 500; }
.eqm .mbar-track { margin-bottom: 0; }

.meal-card { padding: 0; overflow: hidden; }
.meal-head { display: flex; align-items: center; gap: 8px; padding: 12px 8px 8px 16px; }
.meal-head h3 { flex: 1; font-size: 17px; font-weight: 720; letter-spacing: -0.01em; }
.meal-kcal { font-family: var(--font-num); font-weight: 680; font-size: 16px; font-variant-numeric: tabular-nums; }
.water-card .meal-head { padding-right: 16px; }
.entry { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; position: relative; text-align: left; }
.entry::before, .add-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.entry-main { flex: 1; min-width: 0; }
.entry-main b, .entry-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-main b { font-weight: 580; font-size: 15.5px; }
.entry-main small { font-size: 13px; color: var(--text-3); margin-top: 1px; }
.entry-kcal { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 600; }
.add-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px 14px; position: relative; color: var(--accent); font-weight: 680; font-size: 15px; }
.add-row svg { width: 18px; height: 18px; stroke-width: 2.4; }
.meal-head { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.same-row { display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); margin: 2px 12px 4px; padding: 11px 12px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); font-weight: 680; font-size: 15px; text-align: left; }
.same-row svg { flex: none; width: 18px; height: 18px; stroke-width: 2.3; }
.same-row span { flex: 1; }
.same-row small { color: var(--text-2); font-weight: 600; font-size: 13px; }

.water-card { padding: 0 0 14px; }
.glasses { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 0; }
.glass { width: 36px; height: 44px; border-radius: 11px; background: var(--card-2); color: var(--text-3); display: grid; place-items: center; transition: transform 0.2s var(--spring), background 0.25s, color 0.25s; }
.glass svg { width: 19px; height: 19px; }
.glass.on { background: color-mix(in srgb, var(--water) 18%, transparent); color: var(--water); }
.glass.on svg { fill: currentColor; }
.glass.add { background: transparent; border: 1.5px dashed var(--line-2); }
.diary-foot { display: flex; gap: 10px; margin-top: 4px; }
.diary-foot .btn { flex: 1; }

/* ============================== Train ============================== */
.routine-card { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; cursor: pointer; transition: transform 0.2s var(--ease); }
.rc-main { flex: 1; min-width: 0; }
.rc-main b { display: block; font-size: 16.5px; font-weight: 680; letter-spacing: -0.01em; }
.rc-main small { display: block; color: var(--text-2); font-size: 13.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-meta { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 4px; font-weight: 500; }
.play-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; transition: transform 0.2s var(--ease); }
.play-btn svg { width: 18px; height: 18px; margin-left: 2px; }

.h-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px 12px 16px; text-align: left; }
.h-row > svg { width: 18px; height: 18px; color: var(--text-3); }
.h-date { width: 46px; height: 50px; border-radius: 13px; background: var(--card-2); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.h-date b { font-family: var(--font-num); font-size: 19px; line-height: 1; font-weight: 720; }
.h-date small { font-size: 10.5px; color: var(--text-2); text-transform: uppercase; font-weight: 700; margin-top: 2px; }
.h-main { flex: 1; min-width: 0; }
.h-main b { display: block; font-size: 16px; font-weight: 640; }
.h-main small { color: var(--text-2); font-size: 13px; }

/* ============================== Progress ============================== */
.chart-card { padding: 16px; }
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cc-head small { display: block; color: var(--text-2); font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.delta { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 650; color: var(--text-2); background: var(--card-2); padding: 3px 8px; border-radius: 8px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line-2); stroke-dasharray: 2 5; }
.chart .axis { fill: var(--text-3); font-size: 10px; font-family: var(--font); font-weight: 600; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--accent); stroke: var(--card); stroke-width: 2.5; }
.chart .halo { fill: var(--accent); opacity: 0.2; }
.chart-empty { height: 150px; display: grid; place-items: center; color: var(--text-3); font-size: 14px; font-weight: 550; border: 1.5px dashed var(--line-2); border-radius: 16px; }

.bars { position: relative; display: flex; gap: 10px; height: 150px; padding-top: 6px; }
.bars.short { height: 112px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bar-track { flex: 1; width: 100%; max-width: 28px; display: flex; align-items: flex-end; border-radius: 8px; background: var(--track); overflow: hidden; }
.bar-track i { width: 100%; border-radius: 8px; background: linear-gradient(var(--accent-2), var(--accent)); transition: height 0.7s var(--ease); }
.bar-track i.over { background: var(--warn); }
.bar-track i.alt { background: linear-gradient(color-mix(in srgb, var(--accent-2) 60%, #fff), var(--accent-2)); }
.bar span { font-size: 11.5px; color: var(--text-3); font-weight: 650; height: 14px; line-height: 14px; }
.bar.today span { color: var(--text); }
.goal-line { position: absolute; left: 0; right: 0; height: 0; z-index: 1; pointer-events: none; border-top: 1.5px dashed color-mix(in srgb, var(--text) 35%, transparent); bottom: calc(20px + (100% - 26px) * var(--g)); }
.goal-line span { position: absolute; right: 0; top: -17px; font-size: 10.5px; color: var(--text-3); font-weight: 650; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.stat { background: var(--card-2); border-radius: 14px; padding: 12px 6px; text-align: center; }
.stat b { display: block; font-family: var(--font-num); font-size: 20px; font-weight: 720; font-variant-numeric: tabular-nums; }
.stat small { font-size: 11.5px; color: var(--text-2); font-weight: 550; }

.seg { display: flex; background: var(--card-2); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { flex: 1; min-width: 0; text-align: center; height: 36px; border-radius: 9px; font-size: 14px; font-weight: 650; color: var(--text-2); transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.seg button.on { background: var(--on-seg); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 0.5px var(--line); }
.seg-sm { margin-top: 12px; }
.seg-sm button { height: 30px; font-size: 13px; }

.empty { text-align: center; padding: 18px 12px; }
.empty-ic { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 17px; background: var(--card-2); display: grid; place-items: center; color: var(--text-3); }
.empty-ic svg { width: 26px; height: 26px; }
.empty b { display: block; font-size: 16px; }
.empty p { margin: 5px auto 0; color: var(--text-2); font-size: 14px; max-width: 270px; line-height: 1.45; }

/* ============================== Sheets ============================== */
#sheets { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.sheet-layer { position: absolute; inset: 0; pointer-events: auto; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.45s var(--ease); }
.sheet-layer.open .sheet-backdrop { opacity: 1; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto;
  max-height: calc(100% - var(--safe-t) - 14px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--sheet); border-radius: 28px 28px 0 0; border-top: 1px solid var(--line-2);
  padding-bottom: var(--safe-b);
  transform: translateY(105%); transition: transform 0.5s var(--ease);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.3);
}
.sheet-layer.open .sheet { transform: none; }
.sheet-full { height: calc(100% - var(--safe-t) - 10px); }
.sheet-grab { flex: none; width: 38px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 8px auto 0; }
.sheet-head { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 14px 10px; touch-action: none; }
.sh-l { justify-self: start; }
.sh-r { justify-self: end; display: flex; gap: 8px; }
.sh-t { text-align: center; min-width: 0; max-width: 62vw; }
.sh-t b { display: block; font-size: 17px; font-weight: 720; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-t small { display: block; font-size: 12.5px; color: var(--text-2); font-weight: 550; }
.sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 6px 16px 22px; }
.sheet-foot { flex: none; display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--sheet); }
.sheet-foot .btn-ghost-danger { background: color-mix(in srgb, var(--danger) 12%, transparent); width: 54px; padding: 0; }

.action-sheet { padding: 0 12px calc(var(--safe-b) + 12px); background: transparent; border: 0; box-shadow: none; }
.action-sheet .sheet-grab { background: rgba(255, 255, 255, 0.4); }
.as-title { text-align: center; font-weight: 700; color: var(--text-2); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin: 12px 0 0; }
.as-list { background: var(--sheet); border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; margin-top: 10px; }
.as-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 18px; text-align: left; font-size: 16.5px; font-weight: 580; position: relative; }
.as-item + .as-item::before { content: ""; position: absolute; top: 0; left: 54px; right: 0; height: 1px; background: var(--line); }
.as-item svg { width: 22px; height: 22px; color: var(--accent); }
.as-item small { margin-left: auto; color: var(--text-3); font-size: 13.5px; font-weight: 550; text-align: right; }
.as-item.danger, .as-item.danger svg { color: var(--danger); }
.as-item:disabled { opacity: 0.35; }
.as-cancel { margin-top: 10px; background: var(--sheet); border: 1px solid var(--line-2); height: 54px; border-radius: 18px; font-size: 16.5px; }

.confirm-body { padding: 16px 20px 12px; text-align: center; }
.confirm-body h3 { margin: 6px 0 8px; font-size: 20px; letter-spacing: -0.015em; }
.confirm-body p { margin: 0 0 20px; color: var(--text-2); line-height: 1.45; font-size: 15px; }
.confirm-body .btn + .btn { margin-top: 6px; }

/* Toast */
#toasts { position: fixed; left: 0; right: 0; top: calc(var(--safe-t) + 10px); z-index: 90; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.toast {
  display: flex; align-items: center; gap: 10px; max-width: 420px; min-height: 46px; padding: 8px 18px 8px 16px;
  border-radius: 24px; background: var(--card-3); color: var(--text); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop);
  font-size: 14.5px; font-weight: 620; pointer-events: auto;
  transform: translateY(-150%) scale(0.92); opacity: 0; transition: transform 0.5s var(--spring), opacity 0.3s;
}
.toast:not(.show) { pointer-events: none; }
.toast.show { transform: none; opacity: 1; }
#toasts.low { top: auto; }
#toasts.low .toast:not(.show) { transform: translateY(150%) scale(0.92); }
.toast > svg { width: 18px; height: 18px; color: var(--ok); }
.toast button { color: var(--accent); font-weight: 750; padding: 7px 12px; margin-right: -10px; border-radius: 16px; background: var(--accent-soft); }

/* ============================== Forms ============================== */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; font-weight: 650; color: var(--text-2); margin: 0 0 7px 2px; }
.field.p > span { color: var(--p); }
.field.c > span { color: var(--c); }
.field.f > span { color: var(--f); }
.field.inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field.inline > span { margin: 0; }
.field.inline .input { width: auto; }
.input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: 13px;
  border: 1px solid var(--line-2); background: var(--card); font-size: 16px; color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none;
}
.input:focus { border-color: color-mix(in srgb, var(--accent) 65%, transparent); box-shadow: 0 0 0 4px var(--accent-soft); }
.input::placeholder { color: var(--text-3); }
.field-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.field-row.two { grid-template-columns: 1fr 1fr; }
.form-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; margin: 22px 4px 8px; }
.form-label svg { width: 16px; height: 16px; color: var(--accent); }
.title-input { height: 58px; font-size: 24px; font-weight: 720; letter-spacing: -0.02em; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 0 2px; margin-bottom: 16px; }
.title-input:focus { box-shadow: none; border-bottom-color: var(--accent); }
.big-input { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 14px 0 4px; }
.big-input input { width: 62%; max-width: 250px; text-align: center; border: 0; background: none; padding: 0; color: var(--text); font-family: var(--font-num); font-size: 58px; font-weight: 720; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.big-input input::placeholder { color: var(--text-3); }
.big-input span { font-size: 18px; color: var(--text-2); font-weight: 650; }
.qa-hint { text-align: center; color: var(--text-2); font-size: 14px; min-height: 20px; margin: 0 0 16px; }
.select-wrap { position: relative; }
.select-wrap select { width: 100%; height: 48px; -webkit-appearance: none; appearance: none; padding: 0 40px 0 14px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--card); font-size: 16px; color: var(--text); }
.select-wrap svg { position: absolute; right: 14px; top: 15px; width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.stepper { display: flex; align-items: center; height: 50px; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line-2); }
.stepper button { width: 54px; height: 100%; display: grid; place-items: center; color: var(--accent); }
.stepper button svg { width: 20px; height: 20px; stroke-width: 2.5; }
.stepper input { flex: 1; min-width: 0; height: 100%; text-align: center; border: 0; background: none; font-family: var(--font-num); font-size: 20px; font-weight: 720; }
.mini-stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--card-2); border-radius: 12px; padding: 3px; }
.mini-stepper button { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--text); transition: transform 0.2s var(--ease); }
.mini-stepper button svg { width: 16px; height: 16px; stroke-width: 2.5; }
.mini-stepper span { min-width: 54px; text-align: center; font-weight: 680; font-variant-numeric: tabular-nums; font-size: 14.5px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--card-2); font-size: 14px; font-weight: 650; color: var(--text-2); transition: background 0.2s, color 0.2s, transform 0.2s var(--ease); }
.chips button.on { background: var(--text); color: var(--bg); }
.chips.wrap { flex-wrap: wrap; margin: 0; padding: 12px 0 0; }
.choice-list { display: grid; gap: 8px; }
.choice { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 15px; background: var(--card); border: 1.5px solid var(--line); transition: border-color 0.2s, background 0.2s; }
.choice b { display: block; font-size: 15.5px; }
.choice small { color: var(--text-2); font-size: 13px; }
.choice.on { border-color: var(--accent); background: var(--accent-soft); }

/* ============================== Add food ============================== */
.af-top { flex: none; padding: 0 16px 10px; display: grid; gap: 10px; }
.meal-select { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--text-2); font-weight: 550; margin-top: -4px; }
.meal-select select { -webkit-appearance: none; appearance: none; background: none; border: 0; font-weight: 750; color: var(--accent); font-size: 15px; padding: 2px 20px 2px 0; cursor: pointer; }
.meal-select svg { width: 16px; height: 16px; color: var(--accent); margin-left: -24px; pointer-events: none; }
.search-bar { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 6px 0 14px; border-radius: 15px; background: var(--card); border: 1px solid var(--line-2); transition: border-color 0.2s, box-shadow 0.2s; }
.search-bar:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search-bar > svg { width: 20px; height: 20px; color: var(--text-3); }
.search-bar input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 16.5px; padding: 0; }
.search-bar input::placeholder { color: var(--text-3); }
.scan-btn { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; display: grid; place-items: center; flex: none; transition: transform 0.2s var(--ease); }
.scan-btn svg { width: 20px; height: 20px; }
.af-tabs button { height: 32px; font-size: 13.5px; }
/* Five tabs on the narrowest phones (iPhone SE 1st gen, small Androids): tighter so every label fits. */
@media (max-width: 374px) { .af-tabs { gap: 0; } .af-tabs button { flex: 1 1 auto; font-size: 12px; padding: 0 3px; } }
.af-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 14px; }
.af-actions button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); font-size: 13px; font-weight: 650; box-shadow: var(--shadow); transition: transform 0.2s var(--ease); }
.af-actions button.pressed { transform: scale(0.96); }
.af-actions span { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.af-actions button:nth-child(2) span { background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.af-actions button:nth-child(3) span { background: color-mix(in srgb, var(--accent-2) 15%, transparent); color: var(--accent-2); }
.af-actions svg { width: 22px; height: 22px; }
.af-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; margin: 16px 4px 8px; }
.af-label:first-child { margin-top: 4px; }
.af-create { margin-top: 14px; }

.food-row { display: flex; align-items: center; gap: 12px; padding: 11px 10px 11px 16px; cursor: pointer; transition: transform 0.2s var(--ease); }
.fr-main { flex: 1; min-width: 0; }
.fr-main b, .fr-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-main b { font-weight: 620; font-size: 15.5px; }
.fr-main small { font-size: 13px; color: var(--text-3); margin-top: 1px; }
.tag { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--ok); color: #fff; vertical-align: -2px; margin-left: 3px; }
.tag svg { width: 10px; height: 10px; stroke-width: 3.4; }
.fr-kcal { text-align: right; font-family: var(--font-num); font-weight: 680; font-variant-numeric: tabular-nums; font-size: 15.5px; }
.fr-kcal small { display: block; font-size: 11px; color: var(--text-3); font-weight: 550; font-family: var(--font); }
.add-btn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); display: grid; place-items: center; flex: none; transition: transform 0.3s var(--spring), background 0.25s, border-color 0.25s, color 0.25s; }
.add-btn svg { width: 18px; height: 18px; stroke-width: 2.5; }
.add-btn.added { background: var(--ok); border-color: var(--ok); color: #fff; animation: pop 0.4s var(--spring); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin 0.7s linear infinite; display: inline-block; flex: none; }
.skeleton .sk-row { padding: 14px 16px; }
.skeleton .sk-row i { display: block; height: 12px; width: 70%; border-radius: 6px; background: linear-gradient(90deg, var(--card-2), var(--card-3), var(--card-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.skeleton .sk-row i + i { width: 40%; height: 10px; margin-top: 8px; }

/* Food detail */
.fd-title { text-align: center; margin: 0 0 16px; }
.fd-title h2 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
.fd-title p { margin: 4px 0 0; color: var(--text-2); font-size: 14.5px; }
.fd-title .link { font-size: 14px; margin-top: 6px; }
.fd-live { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 20px; }
.donut-wrap { position: relative; display: grid; place-items: center; }
.donut .arc { transition: stroke-dasharray 0.45s var(--ease), stroke-dashoffset 0.45s var(--ease); stroke-linecap: butt; }
.arc.p { stroke: var(--p); }
.arc.c { stroke: var(--c); }
.arc.f { stroke: var(--f); }
.fd-legend { display: grid; gap: 12px; }
.lg { display: flex; align-items: center; gap: 10px; }
.lg i { width: 10px; height: 26px; border-radius: 4px; background: var(--m); flex: none; }
.lg b { display: block; font-family: var(--font-num); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lg small { display: block; font-size: 12px; color: var(--text-2); font-weight: 550; }
.fd-meals button { font-size: 13px; }
.fd-facts { padding: 6px 16px; margin-top: 8px; }
.fact { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.fact b { font-weight: 640; font-variant-numeric: tabular-nums; }
.fact.sub { padding-left: 14px; color: var(--text-2); font-size: 14px; }
.fact.sub b { font-weight: 520; }
.fact.big { font-size: 17px; font-weight: 750; border-bottom-width: 4px; border-bottom-color: var(--line-2); }
.fact-note { font-size: 12.5px; color: var(--text-3); margin: 10px 0 8px; line-height: 1.45; }
.fav-btn.on { color: var(--gold); }

/* Scanner */
.sheet.scanner-sheet { height: 100%; max-height: 100%; border-radius: 0; padding-bottom: 0; background: #000; border: 0; }
.scanner { position: relative; flex: 1; display: flex; flex-direction: column; color: #fff; overflow: hidden; background: #000; }
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-shade { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; padding-bottom: 12vh; }
.scan-frame { position: relative; width: min(80vw, 340px); aspect-ratio: 1.4; border-radius: 26px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.5); transition: transform 0.4s var(--spring); }
.scan-frame i { position: absolute; width: 38px; height: 38px; border: 4px solid #fff; transition: border-color 0.3s; }
.scan-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 26px; }
.scan-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 26px; }
.scan-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 26px; }
.scan-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 26px; }
.scan-laser { position: absolute; left: 10%; right: 10%; height: 2px; top: 50%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 70%, transparent); animation: laser 2.2s ease-in-out infinite; }
.scanner:not([data-state="scanning"]) .scan-laser { display: none; }
.scanner[data-state="looking"] .scan-frame { transform: scale(0.96); }
.scanner[data-state="looking"] .scan-frame i { border-color: var(--ok); }
.scan-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--safe-t) + 10px) 14px 10px; }
.scan-top b { font-size: 17px; font-weight: 700; }
.glass-btn { background: rgba(255, 255, 255, 0.16); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.glass-btn.on { background: #fff; color: #000; }
.scan-panel { position: relative; z-index: 2; margin-top: auto; padding: 16px 16px calc(var(--safe-b) + 18px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.scan-hint { margin: 0; padding: 10px 16px; border-radius: 16px; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 14.5px; font-weight: 600; text-align: center; display: flex; align-items: center; gap: 8px; max-width: 340px; }
.scan-card { width: 100%; max-width: 440px; background: var(--sheet); color: var(--text); border-radius: 24px; padding: 20px 18px 18px; display: grid; gap: 10px; text-align: center; animation: rise 0.45s var(--ease); }
.scan-card > b { font-size: 17.5px; letter-spacing: -0.01em; }
.scan-card > .spinner { margin: 0 auto; width: 22px; height: 22px; }
.scan-card p { margin: 0 0 4px; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.manual-input { text-align: center; font-size: 20px; letter-spacing: 0.08em; font-weight: 650; height: 54px; }

/* Nutrition */
.nut-hero { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 20px; }
.nut-list { padding: 4px 16px; }
.nut-row { padding: 11px 0; --m: var(--text-3); }
.nut-row + .nut-row { border-top: 1px solid var(--line); }
.nut-top { display: flex; justify-content: space-between; font-size: 15px; font-weight: 550; }
.nut-top b { font-variant-numeric: tabular-nums; font-weight: 680; }
.nut-top small { color: var(--text-3); font-weight: 500; }
.nut-row .mbar-track { margin: 8px 0 0; }
.per-meal { padding: 10px 16px; }
.pm { display: grid; grid-template-columns: 82px 1fr 54px; gap: 10px; align-items: center; padding: 8px 0; font-size: 14.5px; font-weight: 550; }
.pm b { text-align: right; font-variant-numeric: tabular-nums; }
.pm-track { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.pm-track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

/* Weight */
.w-row { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 16px; }
.w-row span { flex: 1; color: var(--text-2); font-size: 15px; }
.w-row b { font-variant-numeric: tabular-nums; }

/* ============================== Workout ============================== */
.wo-head .sh-t small { font-variant-numeric: tabular-nums; }
.wo-title { max-width: 100%; }
.wo-progress { flex: none; height: 3px; background: var(--track); margin: 0 16px 8px; border-radius: 2px; overflow: hidden; }
.wo-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width 0.5s var(--ease); }
.wo-ex { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 12px 10px 6px; margin-bottom: 12px; transition: border-color 0.3s; }
.wo-ex.complete { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.wo-ex-head { display: flex; align-items: center; gap: 8px; padding: 2px 0 10px 6px; }
.wo-ex-head > div { flex: 1; min-width: 0; }
.wo-ex-head b { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.wo-ex-head small { color: var(--text-2); font-size: 13px; }
.wo-ex-count { font-size: 12.5px; font-weight: 750; color: var(--text-2); background: var(--card-2); padding: 3px 8px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.wo-ex.complete .wo-ex-count { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.set-grid { display: grid; grid-template-columns: 28px minmax(0, 1fr) 66px 58px 40px; gap: 8px; align-items: center; }
.set-head { font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding: 0 4px 6px; }
.set-head span:nth-child(3), .set-head span:nth-child(4) { text-align: center; }
.set-row { padding: 4px; border-radius: 12px; transition: background 0.3s; }
.set-row.done { background: color-mix(in srgb, var(--ok) 13%, transparent); }
.set-n { width: 26px; height: 26px; border-radius: 8px; background: var(--card-2); display: grid; place-items: center; font-size: 13px; font-weight: 750; color: var(--text-2); }
.set-prev { font-size: 13.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 550; }
.set-row input { width: 100%; height: 38px; border-radius: 10px; border: 1.5px solid transparent; background: var(--card-2); text-align: center; font-size: 16px; font-weight: 700; font-family: var(--font-num); font-variant-numeric: tabular-nums; padding: 0; color: var(--text); }
.set-row input:focus { border-color: var(--accent); background: var(--card); }
.set-row input::placeholder { color: var(--text-3); font-weight: 550; }
.set-row.done input { background: transparent; }
.set-na { text-align: center; color: var(--text-3); }
.set-check { width: 38px; height: 38px; border-radius: 11px; background: var(--card-2); display: grid; place-items: center; color: var(--text-3); transition: background 0.25s, color 0.25s, transform 0.3s var(--spring); }
.set-check svg { width: 20px; height: 20px; stroke-width: 2.8; }
.set-row.done .set-check { background: var(--ok); color: #fff; }
.add-set { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 40px; margin-top: 4px; border-radius: 12px; color: var(--text-2); font-weight: 680; font-size: 14.5px; }
.add-set svg { width: 16px; height: 16px; stroke-width: 2.5; }
.shake { animation: shake 0.4s; border-color: var(--danger) !important; }

.rest-bar { position: relative; flex: none; display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; padding: 10px; border-radius: 20px; background: var(--card-3); border: 1px solid var(--line-2); overflow: hidden; box-shadow: var(--shadow-pop); animation: rise 0.4s var(--ease); }
.rest-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-soft); transition: width 0.25s linear; }
.rest-bar > *:not(.rest-fill) { position: relative; }
.rest-adj { height: 42px; padding: 0 12px; border-radius: 12px; background: var(--card-2); font-weight: 750; font-size: 14px; font-variant-numeric: tabular-nums; }
.rest-mid { flex: 1; text-align: center; }
.rest-mid small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); font-weight: 750; }
.rest-mid b { font-family: var(--font-num); font-size: 25px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1.1; }
.rest-skip { height: 42px; padding: 0 16px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 750; font-size: 14px; }

.rx-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.rx-row > div { flex: 1; min-width: 0; }
.rx-row b { display: block; font-size: 15.5px; font-weight: 640; }
.rx-row small { font-size: 13px; color: var(--text-2); }
.rx-sets { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 13.5px; background: var(--card-2); padding: 4px 10px; border-radius: 9px; white-space: nowrap; }

.re-row { padding: 12px 10px 12px 16px; margin-bottom: 10px; }
.re-top { display: flex; align-items: center; gap: 6px; }
.re-top > div:first-child { flex: 1; min-width: 0; }
.re-top b { display: block; font-size: 16px; }
.re-top small { color: var(--text-2); font-size: 13px; }
.re-tools { display: flex; }
.re-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-right: 6px; }
.reps-field { display: flex; align-items: center; gap: 6px; background: var(--card-2); border-radius: 12px; padding: 0 12px; height: 38px; }
.reps-field input { width: 60px; border: 0; background: none; text-align: right; font-weight: 720; font-size: 16px; padding: 0; color: var(--text); }
.reps-field span { color: var(--text-2); font-size: 13.5px; font-weight: 550; }

.ep-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 12px; text-align: left; }
.ep-row > div { flex: 1; min-width: 0; }
.ep-row b { display: block; font-size: 15.5px; font-weight: 620; }
.ep-row small { color: var(--text-2); font-size: 13px; }
.ep-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--card-2); display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--text-2); text-transform: uppercase; flex: none; transition: background 0.2s, color 0.2s; }
.ep-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: #fff; flex: none; transition: all 0.2s var(--spring); }
.ep-row.on .ep-check { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.ep-row.on .ep-ic { background: var(--accent-soft); color: var(--accent); }
.ep-body .chips { margin: 0; }
.ep-body .btn { margin-top: 12px; }

.summary { text-align: center; padding-top: 14px; }
.trophy { width: 88px; height: 88px; margin: 6px auto 14px; border-radius: 28px; background: linear-gradient(145deg, var(--coral-2), var(--coral)); color: #fff; display: grid; place-items: center; box-shadow: 0 16px 34px -10px var(--coral); animation: pop 0.7s var(--spring); }
.trophy svg { width: 46px; height: 46px; }
.summary h2 { margin: 4px 0 18px; font-size: 26px; letter-spacing: -0.025em; }
.pr-card { text-align: left; margin-top: 14px; padding: 4px 16px 8px; }
.pr-card .form-label { margin: 12px 0 6px; color: var(--warn); }
.pr-card .form-label svg { color: var(--gold); }
.pr-row { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.summary > .btn { margin-top: 18px; }

.hd-ex { padding: 12px 16px; }
.hd-ex > b { display: block; margin-bottom: 6px; font-size: 16px; }
.hd-set { display: flex; gap: 14px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.hd-set span { width: 20px; color: var(--text-3); font-weight: 750; }
.hd-set b { font-weight: 620; font-variant-numeric: tabular-nums; }
.sheet-body > .stat-grid { margin: 4px 0 14px; }

/* ============================== Settings ============================== */
.profile-card { display: flex; align-items: center; gap: 14px; margin: 4px 0 0; }
.profile-card .title-input { margin: 0; }
.avatar-lg { width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; font-size: 24px; font-weight: 750; }
.avatar-lg svg { width: 26px; height: 26px; }
.set-group { padding: 2px 16px; }
.set-row-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 8px 0; width: 100%; text-align: left; font-size: 16px; font-weight: 550; }
.set-row-item + .set-row-item { border-top: 1px solid var(--line); }
.set-row-item.col { flex-direction: column; align-items: stretch; gap: 9px; padding: 12px 0; }
.set-row-item.col > span { font-size: 14px; color: var(--text-2); font-weight: 650; }
.link-row > span { display: flex; align-items: center; gap: 12px; }
.link-row > span svg { width: 20px; height: 20px; color: var(--accent); }
.link-row > svg { width: 18px; height: 18px; color: var(--text-3); }
.link-row.danger, .link-row.danger svg { color: var(--danger); }
.inline-num { width: 110px; height: 40px; text-align: right; font-weight: 720; font-family: var(--font-num); font-size: 17px; }
.pct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 0 12px; }
.pct { display: block; background: var(--card-2); border-radius: 14px; padding: 10px 12px; border-top: 3px solid var(--m); }
.pct span { display: block; font-size: 12.5px; font-weight: 680; color: var(--text-2); }
.pct div { display: flex; align-items: baseline; }
.pct input { width: 2.4ch; flex: none; min-width: 0; border: 0; background: none; padding: 0; font-family: var(--font-num); font-size: 23px; font-weight: 720; color: var(--text); }
.pct i { font-style: normal; color: var(--text-3); font-weight: 650; }
.pct small { font-size: 12.5px; color: var(--text-3); font-weight: 550; }
.pct-sum { margin: 0 0 12px; font-size: 13px; color: var(--warn); font-weight: 600; }
.pct-sum:empty { display: none; }
.fine { font-size: 12.5px; color: var(--text-3); line-height: 1.55; text-align: center; margin: 26px 10px 8px; }
.fine a { color: var(--text-2); }

.calc-result { text-align: center; margin-top: 10px; padding: 20px 16px; }
.calc-main small { display: block; color: var(--text-2); font-size: 13px; font-weight: 650; }
.calc-main .num-xl { display: block; font-size: 46px; margin: 6px 0 12px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc-sub { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-2); margin-top: 6px; font-weight: 550; }
.calc-sub b { color: var(--text); font-variant-numeric: tabular-nums; }
.calc-sub .p b { color: var(--p); }
.calc-sub .c b { color: var(--c); }
.calc-sub .f b { color: var(--f); }

.install-hero { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; }
.install-hero img { border-radius: 18px; box-shadow: var(--shadow-pop); }
.install-hero b { display: block; font-size: 18px; }
.install-hero small { color: var(--text-2); font-size: 14px; }
.steps { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.steps b { display: block; font-size: 15.5px; }
.steps small { color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }
.kbd { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--card-2); vertical-align: middle; color: var(--coral); margin-left: 2px; }
.kbd svg { width: 16px; height: 16px; }

/* ============================== Onboarding ============================== */
#onboarding { position: fixed; inset: 0; z-index: 80; background: var(--bg); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
#onboarding.leaving { opacity: 0; transform: scale(1.04); }
.ob { position: relative; max-width: 560px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; padding: calc(var(--safe-t) + 8px) 22px calc(var(--safe-b) + 16px); }
.ob::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 60%; pointer-events: none; background: radial-gradient(80% 70% at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.ob > * { position: relative; }
.ob-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 46px; flex: none; }
.ob-head .link { justify-self: end; }
.ob-dots { display: flex; justify-content: center; gap: 6px; }
.ob-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--line-2); transition: all 0.35s var(--ease); }
.ob-dots i.on { width: 20px; background: var(--accent); }
.ob-body { flex: 1; overflow-y: auto; padding: 14px 2px 20px; }
.ob-body.enter { animation: obIn 0.5s var(--ease); }
.ob-body h2 { font-size: 30px; letter-spacing: -0.028em; margin: 6px 0 6px; font-weight: 760; }
.ob-sub { color: var(--text-2); margin: 0 0 24px; font-size: 16px; }
.ob-body.step-0 { display: flex; }
.ob-welcome { display: flex; flex-direction: column; justify-content: center; flex: 1; padding-bottom: 20px; }
.ob-welcome .ob-motto { font-family: var(--font-script); font-size: 30px; font-weight: 700; line-height: 1.2; margin: 4px 0 6px; color: var(--accent); }
.ob-logo { width: 92px; height: 92px; border-radius: 26px; box-shadow: 0 22px 50px -14px color-mix(in srgb, var(--accent) 60%, transparent); animation: pop 0.8s var(--spring); }
.ob-welcome h1 { font-family: var(--font-display); font-size: 46px; line-height: 1.04; letter-spacing: -0.01em; margin: 24px 0 8px; font-weight: 700; }
.ob-welcome p { font-size: 17px; color: var(--text-2); line-height: 1.5; margin: 0 0 26px; max-width: 380px; }
.ob-feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ob-feats li { display: flex; align-items: center; gap: 12px; font-weight: 620; font-size: 16px; }
.ob-feats svg { width: 22px; height: 22px; padding: 10px; box-sizing: content-box; border-radius: 13px; background: var(--accent-soft); color: var(--accent); }
.ob-foot { flex: none; padding-top: 8px; }
.goal-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.goal-card { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 6px 16px; border-radius: 18px; background: var(--card); border: 1.5px solid var(--line); font-size: 14px; transition: all 0.2s; }
.goal-card svg { width: 26px; height: 26px; color: var(--text-2); }
.goal-card.on { border-color: var(--accent); background: var(--accent-soft); }
.goal-card.on svg { color: var(--accent); }
.ob-plan { text-align: center; padding: 26px 16px 18px; }
.ob-plan .ring-wrap { width: max-content; margin: 0 auto 16px; }
.ob-plan .num-xl { font-size: 40px; }
.ob-plan .fine { margin: 14px 0 0; }

/* ============================== Getting started ============================== */
.start-card { padding: 14px 6px 6px; }
.start-card header { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 12px; }
.start-card header b { display: block; font-size: 17px; font-weight: 720; letter-spacing: -0.01em; }
.start-card header small { color: var(--text-2); font-size: 13px; font-weight: 550; }
.start-progress { height: 5px; border-radius: 3px; background: var(--track); margin: 10px 12px 6px; overflow: hidden; }
.start-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width 0.6s var(--ease); }
.start-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px 10px 12px; border-radius: 14px; text-align: left; }
.start-row > div { flex: 1; min-width: 0; }
.start-row b { display: block; font-size: 15px; font-weight: 620; }
.start-row small { display: block; color: var(--text-2); font-size: 12.5px; }
.start-row > svg { width: 18px; height: 18px; color: var(--text-3); }
.start-row.done b { color: var(--text-3); font-weight: 550; text-decoration: line-through; text-decoration-color: var(--line-2); }
.start-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; flex: none; color: #fff; }
.start-check svg { width: 15px; height: 15px; stroke-width: 3; }
.start-row.done .start-check { background: var(--ok); border-color: var(--ok); }
.start-row:not(.done) .start-check { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* ============================== Install guide ============================== */
.install-sheet .install-hero { align-items: flex-start; }
.install-sheet .install-hero img { border-radius: 15px; flex: none; }
.install-sheet .install-hero small { line-height: 1.45; display: block; margin-top: 2px; }
.install-tabs { margin: 4px 0 14px; }
.install-now { margin-bottom: 4px; }
.or { text-align: center; color: var(--text-3); font-size: 13px; font-weight: 600; margin: 10px 0 12px; }
.steps .step-body { flex: 1; min-width: 0; }
.steps li { align-items: flex-start; }
b.inline { display: inline; font-size: inherit; color: var(--text); }
.warn-card { display: flex; gap: 12px; align-items: flex-start; border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 9%, var(--card)); }
.warn-card > svg { width: 22px; height: 22px; color: var(--warn); margin-top: 1px; }
.warn-card b { display: block; font-size: 15px; }
.warn-card small { display: block; color: var(--text-2); font-size: 13.5px; line-height: 1.5; margin: 3px 0 10px; }
.qr-card { display: flex; gap: 16px; align-items: center; }
.qr-card b { display: block; font-size: 15.5px; }
.qr-card small { color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
canvas.qr { width: 120px; height: 120px; border-radius: 12px; background: #fff; flex: none; opacity: 0; transition: opacity 0.3s; image-rendering: pixelated; }
canvas.qr.ready { opacity: 1; }

.mock { margin-top: 10px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); overflow: hidden; pointer-events: none; }
.mock svg { width: 16px; height: 16px; }
.mock .hot, .mock .hot-btn, .mock .hot-text { position: relative; color: var(--accent); }
.mock .hot::after { content: ""; position: absolute; inset: -3px; border-radius: 10px; border: 2px solid var(--accent); animation: tapRing 1.6s ease-out infinite; }
.mock-bar { display: flex; align-items: center; gap: 8px; padding: 7px 8px; }
.mock-bar .m-url { flex: 1; text-align: center; background: var(--card); border-radius: 8px; padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-bar .m-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; flex: none; }
.mock-list > div { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.mock-list > div + div { border-top: 1px solid var(--line); }
.mock-list > div.hot { background: var(--accent-soft); color: var(--text); font-weight: 650; }
.mock-list > div.hot::after { border-radius: 0; inset: 0; }
.mock-list > div.hot svg { color: var(--accent); }
.mock-dialog { padding: 8px 10px 10px; }
.m-dh { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.m-dh b { font-size: 12px; color: var(--text); }
.hot-text { font-weight: 750; padding: 2px 6px; border-radius: 6px; box-shadow: 0 0 0 2px var(--accent); animation: tapRingSolid 1.6s ease-out infinite; }
.m-app { display: flex; align-items: center; gap: 10px; padding: 9px 0 4px; color: var(--text); font-weight: 600; }
.m-app img { width: 30px; height: 30px; border-radius: 8px; }
.m-toggle { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; }
.m-toggle i { width: 30px; height: 18px; border-radius: 9px; background: var(--ok); position: relative; }
.m-toggle i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.m-actions { display: flex; justify-content: flex-end; gap: 14px; align-items: center; padding-top: 6px; }
.hot-btn { background: var(--accent); color: #fff !important; padding: 5px 12px; border-radius: 14px; font-weight: 700; animation: tapRingSolid 1.6s ease-out infinite; }
@keyframes tapRing { 0% { opacity: 0.9; transform: scale(0.92); } 80%, 100% { opacity: 0; transform: scale(1.18); } }
@keyframes tapRingSolid { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }

.grad-text { background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================== Desktop landing panel ============================== */
#desk { display: none; }
@media (min-width: 1100px) {
  #desk {
    display: flex; flex-direction: column; gap: 18px; position: fixed; top: 50%; transform: translateY(-50%);
    left: calc(50% - 280px - 48px - 330px); width: 330px; color: var(--text);
  }
  .desk-brand { display: flex; align-items: center; gap: 12px; }
  .desk-brand img { border-radius: 14px; box-shadow: var(--shadow-pop); }
  .desk-brand b { display: block; font-family: var(--font-display); font-size: 23px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; }
  .desk-brand span { display: block; font-family: var(--font-script); font-size: 21px; font-weight: 700; color: var(--accent); }
  #desk h2 { font-size: 32px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 780; margin: 6px 0 0; }
  #desk > p { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.55; }
  .desk-qr { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); margin-top: 6px; }
  .desk-qr canvas { width: 116px; height: 116px; border-radius: 12px; background: #fff; flex: none; image-rendering: pixelated; }
  .desk-qr b { display: block; font-size: 15.5px; }
  .desk-qr span { display: block; color: var(--text-2); font-size: 13.5px; line-height: 1.5; margin-top: 3px; }
}
@media (display-mode: standalone) { #desk { display: none !important; } }

/* Macro colour hooks (kept last so they win) */
.p { --m: var(--p); }
.c { --m: var(--c); }
.f { --m: var(--f); }
.kcal { --m: var(--accent); }

/* ============================== Motion ============================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes obIn { from { opacity: 0; transform: translateX(16px); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes laser { 0%, 100% { top: 16%; } 50% { top: 84%; } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Full-screen layout rules live at the very end of this file so they win. */

/* ============================== Plans ============================== */
.quick-row { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; }
.quick-row > div { flex: 1; min-width: 0; }
.quick-row b { display: block; font-size: 16px; font-weight: 650; }
.quick-row small { display: block; color: var(--text-2); font-size: 13px; }
.quick-row > svg { width: 18px; height: 18px; color: var(--text-3); }
.quick-row .tile-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.quick-row .tile-ic svg { width: 20px; height: 20px; }

.plan-empty { text-align: center; padding: 28px 18px 18px; background: radial-gradient(100% 80% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--card); }
.pe-art { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent)); box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.pe-art svg { width: 36px; height: 36px; }
.plan-empty h2 { font-size: 23px; letter-spacing: -0.02em; margin-bottom: 8px; }
.plan-empty p { margin: 0 auto 20px; color: var(--text-2); font-size: 15px; line-height: 1.5; max-width: 320px; }

.plan-hero { padding: 18px; background: radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 60%), var(--card); }
.ph-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ph-top h2 { font-size: 24px; letter-spacing: -0.02em; margin: 3px 0 2px; }
.ph-top small { color: var(--text-2); font-size: 13.5px; font-weight: 550; }
.ph-next { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 14px; border-radius: 18px; text-align: left;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--accent-2))); color: #fff;
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--accent) 90%, transparent); transition: transform 0.2s var(--ease); }
.ph-next.pressed { transform: scale(0.98); }
.ph-next > div { flex: 1; min-width: 0; }
.ph-next small { display: block; font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
.ph-next b { display: block; font-size: 20px; font-weight: 750; letter-spacing: -0.015em; margin: 1px 0; }
.ph-next > div > span { display: block; font-size: 13px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-next .ph-go { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 13px; background: rgba(255, 255, 255, 0.2); font-weight: 750; font-size: 15px; opacity: 1 !important; flex: none; }
.ph-go svg { width: 15px; height: 15px; }
.day-row.next { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.next-pill { height: 20px; padding: 0 8px; font-size: 10.5px; background: var(--accent-soft); color: var(--accent); vertical-align: 2px; margin-left: 4px; }
.plan-actions { margin: 4px 0 4px; }

.lib-intro { color: var(--text-2); font-size: 15px; line-height: 1.5; margin: 0 4px 14px; }
.tpl-card { padding: 16px; }
.tpl-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tpl-week { font-size: 12.5px; color: var(--text-2); font-weight: 650; }
.tpl-card > b { display: block; font-size: 19px; font-weight: 740; letter-spacing: -0.015em; }
.tpl-card > small { display: block; color: var(--accent-2); font-weight: 650; font-size: 13.5px; margin-top: 1px; }
.tpl-card > p { margin: 8px 0 12px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.tpl-days { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-days span { font-size: 12px; font-weight: 650; padding: 4px 9px; border-radius: 8px; background: var(--card-2); color: var(--text-2); }
.lvl { height: 23px; font-size: 11.5px; }
.lvl-beginner { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.lvl-intermediate { background: var(--accent-soft); color: var(--accent); }
.lvl-advanced { background: color-mix(in srgb, var(--f) 16%, transparent); color: var(--f); }
.lvl-all-levels { background: color-mix(in srgb, var(--accent-2) 15%, transparent); color: var(--accent-2); }
.tpl-desc { color: var(--text-2); font-size: 15px; line-height: 1.55; margin: 2px 4px 4px; }
.fl-meta { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-3); }

.pe-day { padding: 6px 0 4px; overflow: hidden; }
.pe-day-head { display: flex; align-items: center; gap: 10px; padding: 6px 6px 8px 14px; }
.pe-num { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 14px; flex: none; }
.pe-day-name { flex: 1; min-width: 0; height: 40px; border: 0; border-bottom: 1.5px solid transparent; background: none; font-size: 18px; font-weight: 720; color: var(--text); padding: 0; }
.pe-day-name:focus { border-bottom-color: var(--accent); }
.pe-day .re-row { margin: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 12px 10px 12px 14px; }
.pe-add { color: var(--accent); border-top: 1px solid var(--line); border-radius: 0; margin-top: 0; height: 46px; }
.hint { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: 14px; line-height: 1.5; background: var(--accent-soft); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; }
.hint svg { width: 18px; height: 18px; color: var(--accent); margin-top: 2px; }
.wo-card.setup h3 { font-size: 21px; }

/* Onboarding: required answers */
.ob-hint { text-align: center; color: var(--text-3); transition: color 0.2s; font-size: 13.5px; font-weight: 650; margin: 0 0 10px; min-height: 18px; }
.ob-hint:empty { visibility: hidden; }
.ob-hint.tried { color: var(--warn); }
.btn.is-disabled { opacity: 0.45; box-shadow: none; }
.fine-link { font-size: inherit; font-weight: 650; }
.w-row b { text-align: right; font-size: 14px; overflow-wrap: anywhere; max-width: 62%; }

/* ============================== Exercise thumbnails & guides ============================== */
.ex-thumb { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--card-2); flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--text-2); text-transform: uppercase; }
.rx-row { cursor: pointer; }
.rx-row .ex-thumb { width: 40px; height: 40px; }
.ep-row .ex-thumb { width: 46px; height: 46px; }
.ep-row.on .ex-thumb { outline: 2px solid var(--accent); outline-offset: 1px; }
.ep-info { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); flex: none; }
.ep-info svg { width: 20px; height: 20px; }
.re-top .ex-thumb { width: 38px; height: 38px; border-radius: 10px; }
.re-top > div[data-guide] { cursor: pointer; }
.wo-ex-head > div[data-guide] { cursor: pointer; }
.wo-ex-thumb { position: relative; flex: none; cursor: pointer; }
.wo-ex-thumb .ex-thumb { width: 46px; height: 46px; }
.wo-ex-thumb i { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; border: 2px solid var(--card); }
.wo-ex-thumb i svg { width: 12px; height: 12px; stroke-width: 2.6; }

.gd-media { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; background: #fff; margin: 4px 0 10px; box-shadow: var(--shadow); }
.gd-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.45s ease; }
.gd-img.on { opacity: 1; }
.gd-state { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 10px; background: rgba(30, 10, 27, 0.7); color: #fff; font-size: 12px; font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gd-dots { margin-bottom: 12px; }
.gd-video { margin-bottom: 12px; }
.gd-noimg { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.gd-noimg svg { width: 28px; height: 28px; }
.gd-noimg p { margin: 0; font-size: 14px; }
.gd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gd-stats small { display: block; color: var(--text-2); font-size: 12px; font-weight: 650; }
.gd-stats b { display: block; font-family: var(--font-num); font-size: 16px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.gd-muscles { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-m { font-size: 13px; font-weight: 650; padding: 6px 11px; border-radius: 10px; background: var(--card-2); color: var(--text-2); }
.chip-m.pri { background: var(--accent-soft); color: var(--accent); }
.chip-m.lvl-chip { background: transparent; border: 1px solid var(--line-2); }
.gd-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.gd-steps li { counter-increment: s; position: relative; padding: 12px 14px 12px 50px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; font-size: 15px; line-height: 1.5; color: var(--text); }
.gd-steps li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; }

/* ============================== AI ============================== */
.af-actions.four { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.af-actions.four button { padding: 12px 4px 10px; font-size: 12.5px; }
.af-actions.five { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.af-actions.five button { padding: 11px 2px 9px; font-size: 11.5px; gap: 7px; border-radius: 16px; white-space: nowrap; }
.af-actions.five span { width: 38px; height: 38px; border-radius: 12px; }
.af-actions.five svg { width: 20px; height: 20px; }
.af-actions button.ai-tile span { background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; }
.ai-photo { position: relative; border-radius: 20px; overflow: hidden; margin: 0 0 12px; background: var(--card); border: 1px solid var(--line); }
.ai-photo img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.ai-photo-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #fff; backdrop-filter: blur(6px); }
.ai-photo-x svg { width: 18px; height: 18px; }
.ai-photo-scan { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent-2) 45%, transparent) 50%, transparent 100%); background-size: 100% 60%; background-repeat: no-repeat; animation: aiScan 1.6s ease-in-out infinite alternate; }
@keyframes aiScan { from { background-position: 0 -60%; } to { background-position: 0 160%; } }
.ai-photo-empty { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 38px 16px; border-radius: 20px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-soft); color: var(--text); margin-bottom: 12px; }
.ai-photo-empty svg { width: 40px; height: 40px; color: var(--accent); margin-bottom: 4px; }
.ai-photo-empty b { font-size: 16px; }
.ai-photo-empty small { color: var(--text-3); font-size: 13px; }
.ai-photo-pick { display: flex; gap: 10px; }
.ai-photo-pick .btn svg { width: 18px; height: 18px; }
.ai-or { text-align: center; margin-top: 14px; }
.ai-said-photo { display: flex; align-items: center; gap: 12px; }
.ai-said-photo img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
.ai-said-photo span { flex: 1; min-width: 0; }
.sh-t b svg, .coach-avatar svg { width: 18px; height: 18px; }
.sh-t b { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.ai-lead { color: var(--text-2); font-size: 15px; line-height: 1.5; margin: 2px 2px 12px; }
.ai-text { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.45; resize: none; font-size: 16px; }
.ai-examples { display: grid; gap: 8px; }
.ai-examples button { text-align: left; padding: 11px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.ai-loading { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ai-loading .spinner { width: 20px; height: 20px; }
.ai-said { color: var(--text-2); font-size: 14.5px; line-height: 1.45; margin: 2px 2px 12px; font-style: italic; }
.ai-said .link { font-style: normal; font-size: 14px; }
.ai-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px 11px 14px; text-align: left; }
.ai-item > div { flex: 1; min-width: 0; }
.ai-item b { display: block; font-size: 15.5px; font-weight: 620; }
.ai-item small { display: block; color: var(--text-3); font-size: 12.5px; }
.ai-item:not(.on) { opacity: 0.5; }
.ai-item.on .ep-check { background: var(--accent); border-color: var(--accent); }
.ai-item .ep-check svg { width: 14px; height: 14px; stroke-width: 3; }
.ai-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ai-total span { color: var(--text-2); font-weight: 650; }
.ai-total b { font-family: var(--font-num); font-size: 20px; }
.ai-total small { color: var(--text-2); margin-left: auto; }
.ai-note { text-align: left; margin: 0 4px 6px; }
.ai-meal-pick { margin-top: 16px; }

.coach-card { padding: 6px; }
.cc-main { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; text-align: left; }
.cc-main > div { flex: 1; min-width: 0; }
.cc-main b { display: block; font-size: 16px; }
.cc-main small { color: var(--text-2); font-size: 13px; }
.cc-main > svg { width: 18px; height: 18px; color: var(--text-3); }
.coach-avatar { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent)); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--accent) 80%, transparent); flex: none; }
.coach-avatar svg { width: 26px; height: 26px; }
.coach-avatar.sm { width: 40px; height: 40px; border-radius: 13px; }
.coach-avatar.sm svg { width: 20px; height: 20px; }
.coach-sugs { display: grid; gap: 8px; margin: 4px 0 14px; }
.coach-sugs button { text-align: left; padding: 11px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 14.5px; font-weight: 550; color: var(--text); }
.coach-sugs.mini { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0 4px 6px; }
.coach-sugs.mini::-webkit-scrollbar { display: none; }
.coach-sugs.mini button { flex: none; background: var(--card-2); border: 0; font-size: 13px; padding: 8px 12px; border-radius: 12px; color: var(--text-2); }

.coach-sheet { padding-bottom: max(var(--safe-b), var(--kb, 0px)); }
.coach-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.coach-hello { text-align: center; padding: 18px 10px 6px; }
.coach-hello .coach-avatar { margin: 0 auto 12px; }
.coach-hello b { display: block; font-size: 19px; letter-spacing: -0.015em; }
.coach-hello p { color: var(--text-2); font-size: 14.5px; line-height: 1.5; margin: 6px auto 4px; max-width: 320px; }
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 20px; font-size: 15.5px; line-height: 1.45; -webkit-user-select: text; user-select: text; animation: rise 0.3s var(--ease); }
.bubble p { margin: 0; }
.bubble p + p, .bubble ul + p, .bubble p + ul { margin-top: 6px; }
.bubble ul { margin: 4px 0 0; padding-left: 18px; }
.bubble li + li { margin-top: 3px; }
.bubble.me { align-self: flex-end; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); color: #fff; border-bottom-right-radius: 6px; }
.bubble.ai { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bubble.typing { display: flex; gap: 5px; padding: 14px 16px; }
.bubble.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: dot 1.2s infinite; }
.bubble.typing i:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.coach-err { margin: 0; }
.coach-body .fine { margin-top: auto; padding-top: 10px; }
.coach-bar { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--sheet); }
.coach-input { flex: 1; min-height: 44px; max-height: 120px; padding: 11px 14px; border-radius: 22px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font-size: 16px; line-height: 1.35; resize: none; }
.coach-input:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.send-btn { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent)); transition: transform 0.2s var(--ease), opacity 0.2s; }
.send-btn svg { width: 20px; height: 20px; stroke-width: 2.6; }
.send-btn:disabled { opacity: 0.4; }
a.btn { text-decoration: none; }

/* Names */
.ob-names { display: grid; gap: 6px; }
.ob-names .title-input { margin-bottom: 0; }
.ob-privacy { text-align: left; margin: 14px 2px 18px; }
.profile-names { flex: 1; min-width: 0; display: grid; }
.profile-names .title-input { height: 44px; margin: 0; }
.profile-names .title-input.sub { font-size: 17px; font-weight: 600; color: var(--text-2); }

/* Profile fields: unit shown inside the box instead of example numbers */
.suffix-wrap { position: relative; }
.suffix-wrap .input { padding-right: 62px; }
.suffix-wrap i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 15px; font-weight: 600; color: var(--text-3); pointer-events: none; }
.select-wrap select:invalid { color: var(--text-3); }
.select-wrap select option { color: var(--text); }

/* AI plan builder */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-grid .choice { text-align: center; padding: 13px 8px; }
.choice-grid .choice b { font-size: 14.5px; }
.ai-plan .seg button { font-size: 13px; }
.ai-plan-notes { min-height: 84px; }
.ai-badge { display: flex; align-items: center; gap: 8px; margin: 2px 4px 10px; font-size: 13.5px; font-weight: 650; color: var(--accent-2); }
.ai-badge svg { width: 16px; height: 16px; flex: none; }
.ai-row .tile-ic { background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; }
.coach-plan-btn { align-self: flex-start; margin: -2px 0 4px; }
.coach-sugs .sug-plan { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--card)), var(--card)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); font-weight: 650; }
.coach-sugs .sug-plan svg { width: 18px; height: 18px; color: var(--accent-2); flex: none; }
.plan-actions .btn { padding: 0 10px; font-size: 14.5px; }

/* ============================== Recovery ============================== */
.train-switch { margin: -4px 0 16px; }
.train-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; font-size: 14.5px; }
.train-switch svg { width: 17px; height: 17px; }
.rec-card .ex-thumb { width: 48px; height: 48px; border-radius: 14px; }
.rec-safety { display: flex; align-items: center; gap: 12px; border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--card)); }
.rec-safety > svg:first-child { width: 22px; height: 22px; color: var(--warn); flex: none; }
.rec-safety > div { flex: 1; min-width: 0; }
.rec-safety b { display: block; font-size: 15.5px; }
.rec-safety small { color: var(--text-2); font-size: 13px; }
.rec-safety > svg:last-child { width: 18px; height: 18px; color: var(--text-3); }
.ai-rec-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent-2) 14%, var(--card)), var(--card) 70%); }
.ai-rec-card > div { flex: 1; min-width: 0; }
.ai-rec-card b { display: block; font-size: 16px; }
.ai-rec-card small { color: var(--text-2); font-size: 13px; line-height: 1.4; }
.ai-rec-card > svg { width: 18px; height: 18px; color: var(--text-3); }
.rec-areas { margin-bottom: 4px; }
.rec-quick { grid-template-columns: 1fr 1fr; margin: -4px 0 16px; }
.rec-quick button { font-size: 13.5px; padding: 9px 12px; color: var(--text); }
.rec-safety-body p { color: var(--text-2); font-size: 15px; line-height: 1.55; margin: 4px 2px 14px; }
.rec-safety-body p b { color: var(--text); }
.rec-safety-body ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.trophy.rec-done { background: linear-gradient(145deg, #6ee7b7, var(--ok)); box-shadow: 0 16px 34px -10px var(--ok); }

.rp-body { display: flex; flex-direction: column; align-items: stretch; }
.rp-media { margin-top: 0; }
.rp-media.ph { display: grid; place-items: center; color: var(--text-3); background: var(--card-2); }
.rp-media.ph svg { width: 48px; height: 48px; }
.rp-name { text-align: center; font-size: 23px; letter-spacing: -0.02em; margin: 6px 0 6px; }
.rp-tags { display: flex; justify-content: center; gap: 6px; min-height: 22px; margin-bottom: 8px; }
.rp-round { background: var(--card-2); color: var(--text-2); }
.rp-timer { position: relative; width: 150px; height: 150px; margin: 4px auto 6px; }
.rp-timer .rp-val { transition: stroke-dashoffset 0.25s linear; }
.rp-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rp-num small { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 750; color: var(--text-2); }
.rp-num b { font-family: var(--font-num); font-size: 48px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.05; }
.rp-startnow { align-self: center; margin-bottom: 4px; }
.rp-reps { text-align: center; margin: 8px 0 12px; }
.rp-reps b { display: block; font-family: var(--font-num); font-size: 56px; font-weight: 750; line-height: 1; }
.rp-reps small { color: var(--text-2); font-size: 14px; font-weight: 550; }
.rp-done { margin-bottom: 6px; }
.rp-controls { display: flex; justify-content: center; gap: 22px; margin: 10px 0 8px; }
.rp-controls .icon-btn { width: 52px; height: 52px; }
.rp-controls .icon-btn svg { width: 22px; height: 22px; }
.rp-controls .rp-pause { width: 60px; height: 60px; background: var(--accent); color: #fff; }
.rp-controls .icon-btn:disabled { opacity: 0.3; }
.rp-next { text-align: center; color: var(--text-2); font-size: 14px; margin: 4px 0 12px; }
.rp-next b { color: var(--text); }
.rp-how { margin: 0 0 12px; }
.rp-how summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 10px 2px; list-style: none; }
.rp-how summary::-webkit-details-marker { display: none; }

/* ============================== Accounts ============================== */
#auth { position: fixed; inset: 0; z-index: 85; background: var(--bg); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); height: 100vh; height: 100dvh; }
#auth.leaving { opacity: 0; transform: scale(1.04); }
.auth-gate .ob-body { padding-top: 22px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-brand img { border-radius: 14px; box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.auth-brand b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; }
.auth-brand span { display: block; font-family: var(--font-script); font-size: 21px; font-weight: 700; }
.auth-tabs { margin-bottom: 18px; }
.auth-form .field { margin-bottom: 12px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 70px; }
.pw-toggle { position: absolute; right: 6px; top: 6px; height: 36px; padding: 0 12px; border-radius: 10px; color: var(--accent); font-weight: 700; font-size: 14px; }
.auth-fine { text-align: left; margin: -4px 2px 10px; }
.forgot { display: block; margin: -2px 2px 12px; font-size: 14.5px; }
.auth-err { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.auth-info { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.auth-confirm { text-align: center; padding-top: 20px; }
.auth-confirm .pe-art { background: linear-gradient(145deg, #6ee7b7, var(--ok)); }
.auth-confirm .ob-sub b { color: var(--text); }
.acct-email { font-size: 14.5px; font-weight: 600; color: var(--text-2); overflow-wrap: anywhere; text-align: right; }
.pro-pill { font-size: 12.5px; font-weight: 750; color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent)); padding: 4px 10px; border-radius: 9px; }

/* ============================== Pro paywall ============================== */
.pw-body { padding-top: 0; }
.pw-hero { text-align: center; padding: 4px 10px 16px; }
.pw-badge { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 24px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent)); box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--accent) 85%, transparent); animation: pop 0.7s var(--spring); }
.pw-badge svg { width: 38px; height: 38px; }
.pw-hero h2 { font-size: 26px; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.pw-locked-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 4px; }
.pw-locked-links .link { font-size: 14px; }
.pw-locked .pw-body { padding-top: 18px; }
.trial-nudge { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 14px; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.trial-nudge > div { flex: 1; min-width: 0; }
.trial-nudge b { display: block; font-size: 15px; }
.trial-nudge small { display: block; color: var(--text-3); font-size: 13px; }
.tn-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; }
.tn-ic svg { width: 18px; height: 18px; }
.pw-hero p { color: var(--text-2); font-size: 15.5px; margin: 6px 0 0; }
.pw-features { padding: 6px 0; }
.pw-feat { display: flex; gap: 12px; align-items: flex-start; padding: 11px 16px; }
.pw-feat > span { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.pw-feat > span svg { width: 18px; height: 18px; }
.pw-feat b { display: block; font-size: 15.5px; }
.pw-feat small { color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
.pw-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.pw-plan { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 8px 14px; border-radius: 18px; background: var(--card); border: 2px solid var(--line-2); transition: border-color 0.2s, background 0.2s; }
.pw-plan b { font-size: 16.5px; }
.pw-plan span { color: var(--text-2); font-size: 14px; font-weight: 600; }
.pw-plan.on { border-color: var(--accent); background: var(--accent-soft); }
.pw-plan .pw-save { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent)); padding: 3px 10px; border-radius: 99px; }

/* Community: invite + feedback */
.community-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.community-card { color: var(--text); text-decoration: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.community-card .tile-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 10px; }
.community-card .tile-ic svg { width: 18px; height: 18px; }
.community-card b { font-size: 15.5px; }
.community-card small { color: var(--text-2); font-size: 13px; }
.fb-types { margin-bottom: 12px; }
.fb-text { min-height: 150px; margin-bottom: 14px; }
.stars { display: flex; gap: 6px; }
.stars button { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--card-2); color: var(--text-3); transition: transform 0.2s var(--spring), color 0.2s; }
.stars button svg { width: 24px; height: 24px; }
.stars button.on { color: var(--gold); }
.fb-contact { display: flex; align-items: center; gap: 12px; }
.fb-contact.on .ep-check { background: var(--accent); border-color: var(--accent); }
.fb-contact .ep-check svg { width: 14px; height: 14px; stroke-width: 3; }
.fb-contact small { overflow-wrap: anywhere; }
.pro-row { display: flex; align-items: center; gap: 12px; }
.pro-row svg { width: 20px; height: 20px; color: var(--accent); }
.pw-foot { flex-direction: column; gap: 2px; }
.pw-foot .btn-block + .btn-block { margin-top: 0; }

/* ============================== Legal & consent ============================== */
.consent-list { border: 0; margin: 14px 0 6px; padding: 0; min-width: 0; }
.consent-list legend { padding: 0; margin-bottom: 8px; }
.consent-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; margin-bottom: 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--text-2); cursor: pointer; }
.consent-item input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.consent-item a { color: var(--accent); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.consent-list.tried .consent-item.need { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--card)); }
.opt-tag { display: inline-block; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); margin-right: 4px; }
.legal-foot { text-align: center; margin-top: 18px; line-height: 1.8; }
.legal-foot a, .fd-source a, .pw-terms a, .rec-safety-body a { color: var(--accent); }
.fd-source { margin-top: 12px; }
.set-sub { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-3); margin-top: 2px; }
a.set-row-item { color: inherit; text-decoration: none; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 30px; border-radius: 30px; background: var(--line); position: relative; cursor: pointer; transition: background 0.2s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s var(--ease); }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); }
.switch:disabled { opacity: 0.5; }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-terms { padding: 12px 14px; margin: 4px 0 10px; }
.pw-terms ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.pw-terms b { color: var(--text); }
.pw-agree { margin-top: 4px; }
.desk-legal { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 28px; font-size: 13px; }
.desk-legal a { color: var(--text-2); }
.desk-legal span { flex-basis: 100%; color: var(--text-3); font-size: 12px; }
/* ============================== Big rest timer ============================== */
.rest-full { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 22px calc(22px + var(--safe-b)); background: radial-gradient(120% 70% at 50% 30%, color-mix(in srgb, var(--accent) 22%, var(--sheet)) 0%, var(--sheet) 70%); animation: fadeIn 0.25s var(--ease); border-radius: inherit; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.rest-hide { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--card-2); color: var(--text-2); font-size: 14px; font-weight: 700; }
.rest-hide svg { width: 16px; height: 16px; }
.rest-label { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); }
.rest-ring { position: relative; width: min(74vw, 300px); aspect-ratio: 1; display: grid; place-items: center; }
.rest-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rest-ring circle { fill: none; stroke-width: 16; }
.rest-ring .rr-bg { stroke: var(--card-2); }
.rest-ring .rr-fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 0.25s linear; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 45%, transparent)); }
.rest-ring b { position: relative; font-family: var(--font-num); font-size: clamp(56px, 19vw, 84px); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.rest-next { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.rest-next small { font-size: 12px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.rest-next b { font-size: 19px; font-weight: 750; }
.rest-next span { font-size: 14px; color: var(--text-2); }
.rest-ctrls { display: flex; gap: 12px; width: 100%; max-width: 360px; }
.rest-adj.big { flex: 1; height: 56px; font-size: 18px; border-radius: 16px; display: grid; place-items: center; text-align: center; }
.rest-skip-big { max-width: 360px; }
button.rest-mid { background: none; color: inherit; }
/* ============================== Diary day clarity ============================== */
.diary-head.not-today .date-btn { background: color-mix(in srgb, var(--warn, #f5a524) 16%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warn, #f5a524) 55%, transparent); }
.diary-head.not-today .date-btn b { color: var(--warn, #f5a524); }
.day-banner { display: flex; align-items: center; gap: 10px; width: 100%; margin: -4px 0 14px; padding: 11px 14px; border-radius: 16px; text-align: left; background: color-mix(in srgb, var(--warn, #f5a524) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--warn, #f5a524) 45%, transparent); color: var(--text); font-size: 14px; line-height: 1.35; }
.day-banner svg { width: 20px; height: 20px; flex: none; color: var(--warn, #f5a524); }
.day-banner span { flex: 1; min-width: 0; }
.day-banner em { flex: none; font-style: normal; font-weight: 750; color: var(--accent); white-space: nowrap; }
.af-day { display: block; flex-basis: 100%; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--warn, #f5a524); margin-top: 2px; }
.meal-select { flex-wrap: wrap; }

/* ============================== Smart calorie coach ============================== */
.checkin-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 14px; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.checkin-card > div { flex: 1; min-width: 0; }
.checkin-card b { display: block; font-size: 15px; }
.checkin-card small { display: block; color: var(--text-3); font-size: 13px; }
.checkin-card > svg { width: 18px; height: 18px; color: var(--text-3); }
.coach-est { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 14px 16px; margin-bottom: 14px; }
.coach-est > div { flex: 1; min-width: 0; }
.coach-est small { display: block; font-size: 12px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.coach-est b { display: block; font-family: var(--font-num); font-size: 26px; font-weight: 780; color: var(--accent); }
.coach-est b span { font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); }
.coach-est.locked b { font-family: inherit; font-size: 18px; color: var(--text); }
.coach-est em { display: block; font-style: normal; font-size: 13px; color: var(--text-2); }
.coach-est > svg { width: 18px; height: 18px; color: var(--text-3); }
.coach-need { display: grid; gap: 14px; padding: 14px 16px; }
.cn-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; font-size: 14px; }
.cn-row .mbar-track { grid-column: 1 / -1; }
.checkin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.checkin-grid > div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; text-align: center; }
.checkin-grid small { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.checkin-grid b { display: block; font-family: var(--font-num); font-size: 21px; font-weight: 780; margin: 2px 0; }
.checkin-grid span { display: block; font-size: 11.5px; color: var(--text-2); }
.checkin-grid .hl { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.checkin-grid .hl b { color: var(--accent); }
.checkin-sug { text-align: center; padding: 16px; margin-bottom: 10px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--card)), var(--card)); }
.checkin-sug small { display: block; font-size: 12.5px; font-weight: 750; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.checkin-sug b { display: block; font-family: var(--font-num); font-size: 36px; font-weight: 800; margin: 4px 0; }
.checkin-sug span { font-size: 14px; color: var(--text-2); }

/* ============================== Progression ============================== */
.wo-sugg { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; padding: 8px 12px; border-radius: 12px; background: var(--card-2); font-size: 13.5px; color: var(--text-2); }
.wo-sugg svg { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.wo-sugg b { color: var(--text); }
.wo-sugg.up { background: color-mix(in srgb, var(--accent) 14%, var(--card-2)); }
.wo-sugg.up svg { color: var(--accent); }
.set-row.pr .set-n { color: #f5b524; }
.set-row.pr .set-n svg { width: 18px; height: 18px; }
.gd-chart { padding: 12px 14px; }
.plates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; }
.plate { display: grid; place-items: center; min-width: 44px; height: 74px; padding: 0 6px; border-radius: 8px; font-weight: 800; font-size: 15px; color: #fff; background: #233e38; }
.plate.p45, .plate.p25 { height: 92px; background: #c87566; }
.plate.p35, .plate.p20 { height: 84px; background: #d9a419; }
.plate.p15 { height: 80px; background: #d4a245; }
.plate.p10 { height: 68px; background: #233e38; }
.plate.p5 { height: 56px; background: #3e7a68; }
.plate.p2_5, .plate.p1_25 { height: 46px; min-width: 38px; font-size: 13px; background: #8a9a94; }

/* ============================== Saved meals ============================== */
.saved-meal { cursor: pointer; }
.saved-meal .sm-del { flex: none; color: var(--text-3); }
.af-tabs button { font-size: 13.5px; }
.esm-row { padding: 12px 10px 12px 16px; }
.esm-row + .esm-row { border-top: 1px solid var(--line); }
.esm-top { display: flex; align-items: center; gap: 10px; }
.esm-top .icon-btn { flex: none; color: var(--text-3); }
.esm-step { height: 42px; margin: 10px 6px 0 0; }
.esm-step button { width: 48px; }
.esm-step input { font-size: 17px; }
.esm-total { text-align: center; margin-top: 14px; }
.esm-total b { color: var(--text); font-size: 15px; }

/* ============================== Recipes ============================== */
.rc-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin: 2px 0 6px; }
.rc-actions button { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px 11px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-size: 13px; font-weight: 650; box-shadow: var(--shadow); transition: transform 0.2s var(--ease); }
.rc-actions button.pressed { transform: scale(0.96); }
.rc-actions span { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.rc-actions button:nth-child(2) span { background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
.rc-actions button.ai-tile span { background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; }
.rc-actions svg { width: 21px; height: 21px; }
.rc-emoji { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--card-2); }
.rc-row .fr-kcal small { white-space: nowrap; }
.rc-hero { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.rc-hero-emoji { flex: none; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 36px; background: var(--card-2); }
.rc-meta { margin: 0; font-size: 14px; font-weight: 650; color: var(--text-2); }
.rc-sum { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.rc-macros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rc-macros > div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 6px; text-align: center; }
.rc-macros b { display: block; font-family: var(--font-num); font-size: 19px; font-weight: 760; font-variant-numeric: tabular-nums; }
.rc-macros small { font-size: 11.5px; font-weight: 650; color: var(--text-3); }
.rc-macros .p b { color: var(--p); }
.rc-macros .c b { color: var(--c); }
.rc-macros .f b { color: var(--f); }
.rc-for, .rc-opt { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-3); font-size: 12.5px; }
.rc-ing { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 16px; }
.rc-steps { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: rc; display: grid; gap: 10px; }
.rc-steps li { counter-increment: rc; display: flex; gap: 12px; font-size: 15px; line-height: 1.5; }
.rc-steps li::before { content: counter(rc); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 750; margin-top: 1px; }
.rc-note { margin-top: 18px; }
.rc-fields { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.rc-serv-step { height: 48px; }
.rc-serv-step button { width: 44px; }
.rc-steps-field { margin-top: 18px; }
textarea.input { height: auto; min-height: 96px; padding-top: 12px; padding-bottom: 12px; line-height: 1.45; resize: vertical; }
.rc-tags { margin-bottom: 14px; }
.rc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rc-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 14px 13px 13px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: left; transition: transform 0.2s var(--ease); }
.rc-card.pressed { transform: scale(0.97); }
.rc-card-emoji { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.rc-card b { font-size: 15px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.rc-card small { font-size: 12.5px; font-weight: 650; color: var(--text-2); margin-top: 3px; }
.rc-card em { font-style: normal; font-size: 12px; color: var(--text-3); }
.rc-saved { position: absolute; top: 12px; right: 12px; color: var(--c); }
.rc-saved svg { width: 16px; height: 16px; }
.air-left { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 12px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.air-left span { font-size: 13px; font-weight: 650; color: var(--text-2); margin-right: auto; }
.air-left b { font-family: var(--font-num); font-size: 17px; font-weight: 740; }
.air-left b.p { color: var(--p); }
.air-field { margin-top: 16px; }
.air-err, .air-list { margin-top: 14px; }
.rc-img { object-fit: cover; padding: 0; }
.rc-photo { margin: 0 -16px 12px; position: relative; }
.rc-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--card-2); }
.rc-photo figcaption { position: absolute; right: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 3px 9px; border-radius: 9px; background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.85); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-photo figcaption a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); }
.rc-photo + .rc-meta { margin-top: 2px; }
.rc-card:has(.rc-card-img) { overflow: hidden; }
.rc-card:has(.rc-card-img) .rc-saved { top: 8px; right: 8px; padding: 5px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); display: grid; }
.rc-card-img { display: block; width: calc(100% + 26px); margin: -14px -13px 10px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 17px 17px 0 0; background: var(--card-2); }
.meal-select b { font-weight: 700; }
/* Edit a finished workout */
.field-row.ew-top { grid-template-columns: 1fr 150px; margin-bottom: 14px; }
.ew-ex { padding: 12px 12px 8px 16px; margin-bottom: 12px; }
.ew-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ew-head b { font-size: 16px; font-weight: 680; }
.ew-head .icon-btn, .ew-set .icon-btn { color: var(--text-3); flex: none; }
.ew-set { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ew-set > span { width: 30px; flex: none; text-align: center; font-weight: 650; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ew-set .input { flex: 1; min-width: 0; height: 42px; text-align: center; font-family: var(--font-num); font-weight: 650; }
.ew-labels { margin-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.ew-labels > span { flex: 1; width: auto; text-align: center; color: var(--text-3); font-weight: 600; }
.ew-labels > span:first-child { flex: none; width: 30px; }
.ew-labels > i { width: 34px; flex: none; }
.ew-add { margin-top: 6px; }
/* ============================== Records & awards ============================== */
.awards-card { display: block; width: 100%; text-align: left; padding: 14px 16px; }
.aw-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.aw-stats b { display: block; font-family: var(--font-num); font-size: 28px; font-weight: 800; }
.aw-stats b span { font-size: 16px; color: var(--text-3); }
.aw-stats small { font-size: 12.5px; color: var(--text-2); font-weight: 650; }
.badge-strip { display: flex; align-items: center; gap: 8px; }
.badge-strip em { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.badge-strip em svg { width: 16px; height: 16px; }
.mini-badge { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); color: var(--text-3); }
.mini-badge svg { width: 19px; height: 19px; }
.mini-badge.on { background: linear-gradient(145deg, #f7c948, #e0a019); color: #3d2a00; box-shadow: 0 6px 16px -6px rgba(224, 160, 25, 0.7); }
.badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; text-align: center; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.badge-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; background: var(--card-2); color: var(--text-3); }
.badge-ic svg { width: 24px; height: 24px; }
.badge.on .badge-ic { background: linear-gradient(145deg, #f7c948, #e0a019); color: #3d2a00; box-shadow: 0 8px 20px -8px rgba(224, 160, 25, 0.75); }
.badge b { font-size: 14.5px; }
.badge small { font-size: 12px; color: var(--text-3); line-height: 1.3; }
.badge:not(.on) b { color: var(--text-2); }
.badge .mbar-track { width: 80%; margin-top: 4px; }
.pr-line { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; }
.pr-line + .pr-line { border-top: 1px solid var(--line); }
.pr-line > div { flex: 1; min-width: 0; }
.pr-line b { display: block; font-size: 15px; }
.pr-line small { display: block; font-size: 12.5px; color: var(--text-2); }
.pr-date { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12px; color: var(--text-3); }
.pr-date svg { width: 15px; height: 15px; color: var(--gold); }
/* Built by */
.built-by > span { align-items: center; min-width: 0; }
.built-by > span > div { min-width: 0; }
.built-by b { display: block; font-weight: 650; }
.built-by img { flex: none; border-radius: 9px; }
.built-by .hts-logo { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.built-by .set-sub { margin-top: 1px; }
.desk-legal span a { color: inherit; text-decoration: underline; }
/* ============================== Collapsed exercises ============================== */
.wo-ex.collapsed { padding-bottom: 6px; }
.wo-ex.collapsed .wo-ex-head { margin-bottom: 0; }
.wo-ex.collapsed small { white-space: normal; }
.wo-ex-done { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--ok, #22c55e) 18%, var(--card-2)); color: var(--ok, #22c55e); }
.wo-ex-done svg { width: 20px; height: 20px; }
.pr-chip { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #3d2a00; background: linear-gradient(145deg, #f7c948, #e0a019); vertical-align: middle; }
.pr-chip svg { width: 12px; height: 12px; }
.wo-ex-foot { display: flex; gap: 8px; }
.wo-ex-foot .add-set { flex: 1; }
.ex-finish { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; height: 42px; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--ok, #22c55e); background: color-mix(in srgb, var(--ok, #22c55e) 12%, transparent); }
.ex-finish svg { width: 17px; height: 17px; }

/* ============================== Weekly plan calendar ============================== */
.week-plan { padding: 14px 14px 12px; margin-bottom: 14px; }
.wp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wp-head b { font-size: 15px; }
.wp-head .link { font-size: 13.5px; }
.wp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wp-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px 8px; border-radius: 12px; background: var(--card-2); min-width: 0; text-align: center; }
.wp-day small { font-size: 11px; font-weight: 750; color: var(--text-3); }
.wp-day b { font-size: 10.5px; font-weight: 700; line-height: 1.2; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.wp-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1.5px solid var(--line); }
.wp-dot svg { width: 13px; height: 13px; }
.wp-day.done .wp-dot { background: var(--ok, #22c55e); border-color: transparent; color: #fff; }
.wp-day.next .wp-dot { border-color: var(--accent); background: var(--accent-soft); }
.wp-day.next b { color: var(--text); }
.wp-day.missed .wp-dot { border-style: dashed; }
.wp-day.missed b { color: var(--text-3); text-decoration: line-through; }
.wp-day.rest b { color: var(--text-3); font-weight: 600; }
.wp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card-2)); }
.wp-day.is-today small { color: var(--accent); }
.wp-note { display: flex; gap: 8px; margin: 10px 2px 0; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.wp-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--text-3); }
.wd-pick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.wd-pick button { height: 48px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-weight: 750; font-size: 13.5px; color: var(--text-2); }
.wd-pick button.on { background: var(--accent); border-color: var(--accent); color: #fff; }.wo-ex-foot { gap: 6px; }
.wo-ex-foot .add-set, .wo-ex-foot .ex-finish { font-size: 13.5px; height: 40px; margin-top: 4px; white-space: nowrap; }
.wo-ex-foot .rm-set { color: var(--text-3); }
.wo-ex-foot svg { width: 16px; height: 16px; flex: none; }
/* ============================== Notifications ============================== */
.notify-nudge { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; margin-bottom: 14px; }
.nn-main { flex: 1; display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0; }
.nn-main b { display: block; font-size: 15px; }
.nn-main small { display: block; color: var(--text-3); font-size: 13px; }
.notif-row > span { flex: 1; min-width: 0; }
.notif-row .hour-sel, .notif-times .hour-sel { flex: none; height: 34px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 650; }
.notif-times { flex-wrap: wrap; gap: 8px 14px; justify-content: flex-start; font-size: 13.5px; color: var(--text-2); }
.notif-times span { display: inline-flex; align-items: center; gap: 6px; }
.set-group.dim { opacity: 0.55; }
.pro-pill.off { background: var(--card-2); color: var(--text-3); }
.link-row > span svg { flex: none; }
/* ============================== Streaks & recap ============================== */
.head-actions { display: flex; align-items: center; gap: 8px; }
.streak-chip { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--text-3); font-weight: 800; font-size: 15px; font-family: var(--font-num); }
.streak-chip svg { width: 18px; height: 18px; }
.streak-chip.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--coral), var(--gold)); box-shadow: 0 8px 20px -10px var(--coral); }
.hs[data-act="streak"] { cursor: pointer; }
.streak-big { display: flex; align-items: baseline; justify-content: center; gap: 8px; color: var(--coral); }
.streak-big svg { width: 44px; height: 44px; align-self: center; }
.streak-big b { font-family: var(--font-num); font-size: 72px; font-weight: 900; color: var(--text); line-height: 1; }
.streak-big span { font-size: 20px; font-weight: 700; color: var(--text-2); }
.streak-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.streak-stats > div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.streak-stats b { display: block; font-family: var(--font-num); font-size: 24px; font-weight: 800; }
.streak-stats small { font-size: 12px; color: var(--text-3); font-weight: 650; }
.streak-cal { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px; margin-bottom: 10px; }
.sc-head, .sc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sc-head span { font-size: 11px; font-weight: 750; color: var(--text-3); text-align: center; }
.sc-grid { margin-top: 6px; }
.sc-cell { aspect-ratio: 1; border-radius: 8px; background: var(--card-2); }
.sc-cell.on { background: linear-gradient(135deg, var(--coral), var(--coral-2)); }
.sc-cell.today { box-shadow: inset 0 0 0 2px var(--accent); }
.sc-cell.future { opacity: 0.3; }
.share-week { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 14px; }
.share-week > div { flex: 1; min-width: 0; }
.share-week b { display: block; font-size: 15px; }
.share-week small { display: block; color: var(--text-3); font-size: 13px; }
.share-week > svg { width: 18px; height: 18px; color: var(--text-3); }
.recap-frame { display: grid; place-items: center; margin: 0 auto 10px; max-width: 320px; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--card-2); box-shadow: var(--shadow-pop); }
.recap-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recap-body .fine { text-align: center; }.recap-opts { margin-bottom: 12px; }
.recap-opts button { font-size: 12.5px; }
/* ============================== Portrait only (phones) ============================== */
.rotate-cover { display: none; }
html.phone-land:not(.scanning) .rotate-cover {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 10000; padding: 24px;
  background: var(--bg); color: var(--text); text-align: center;
}
.rotate-cover > div { max-width: 360px; display: grid; justify-items: center; gap: 8px; }
.rotate-cover img { border-radius: 16px; margin-bottom: 6px; }
.rotate-cover b { font-size: 20px; font-weight: 750; letter-spacing: -0.01em; }
.rotate-cover p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
html.phone-land:not(.scanning) body { overflow: hidden; }
/* Scanner in landscape: turn the scanner screen back to portrait, and turn the camera picture back again so it still matches the real world. */
html.phone-land.scanning .sheet.scanner-sheet {
  position: fixed; left: 50%; top: 50%; right: auto; bottom: auto; margin: 0; max-width: none;
  width: 100vh; height: 100vw; max-height: none;
  transform: translate(-50%, -50%) rotate(var(--unrot)) !important; transition: none;
  --safe-t: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --safe-b: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}
html.phone-land.scanning .scan-video {
  inset: auto; left: 50%; top: 50%; width: 100vw; height: 100vh;
  transform: translate(-50%, -50%) rotate(calc(var(--unrot) * -1));
}
html.phone-land.scanning .scan-frame { width: min(80vh, 340px); }
html.phone-land.scanning .scan-shade { padding-bottom: 12vw; }

/* Adjust a food before logging */
.fd-adjust { margin-top: 10px; }
.fd-edit { padding: 14px 16px; display: grid; gap: 12px; }
.fd-edit-head b { display: block; font-size: 16px; font-weight: 700; }
.fd-edit-head small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
.fd-ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fd-ed-grid .input { text-align: center; font-family: var(--font-num); font-weight: 650; }
.fd-ed-hint { margin: -4px 0 0; font-size: 12.5px; color: var(--warn, #f59e0b); }
.fd-ed-hint:empty { display: none; }
.fd-keep-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.fd-keep-row input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.fd-ed-btns { display: flex; gap: 8px; }
/* Edit an AI-estimated item */
.ai-row { display: flex; align-items: center; }
.ai-row .ai-item { flex: 1; min-width: 0; }
.ai-row .icon-btn { flex: none; margin-right: 6px; color: var(--text-3); }
.ai-portion-row { display: flex; align-items: center; gap: 10px; }
.ai-portion-row .stepper { flex: 0 0 170px; }
.ai-unit { flex: 1; min-width: 0; font-weight: 650; color: var(--text-2); }
.ai-portion-row .ai-w { flex: 1; min-width: 0; height: 50px; text-align: center; font-family: var(--font-num); font-size: 18px; font-weight: 700; }
.ai-wu { flex: 0 0 110px; }
.fd-weight { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-3); text-align: center; }
.fd-weight:empty { display: none; }

/* ============================== Monthly Wrapped ============================== */
.sheet.wrapped-sheet { height: 100%; max-height: 100%; border-radius: 0; padding-bottom: 0; border: 0; background: #13221f; }
.wrapped {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 14px; color: #fff; overflow: hidden; user-select: none; -webkit-user-select: none; cursor: pointer;
  padding: calc(var(--safe-t) + 12px) 24px calc(var(--safe-b) + 22px);
  background: linear-gradient(160deg, #c87566, #233e38 70%); transition: background 0.5s;
}
.wrapped.w-days { background: linear-gradient(160deg, #c87566, #3a1d17 75%); }
.wrapped.w-food { background: linear-gradient(160deg, #3e6a5e, #13221f 75%); }
.wrapped.w-top { background: linear-gradient(160deg, #dc9284, #233e38 75%); }
.wrapped.w-train { background: linear-gradient(160deg, #233e38, #0d1816 75%); }
.wrapped.w-fav { background: linear-gradient(160deg, #c87566, #233e38 75%); }
.wrapped.w-prs { background: linear-gradient(160deg, #d4a245, #3b2a07 75%); }
.wrapped.w-weight { background: linear-gradient(160deg, #3e7a68, #13221f 75%); }
.wrapped.w-outro { background: linear-gradient(160deg, #e9b85c, #13221f 75%); }
.w-bars { display: flex; gap: 4px; padding-right: 48px; }
.w-bars i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.w-bars i.done, .w-bars i.on { background: #fff; }
.w-close { position: absolute; top: calc(var(--safe-t) + 2px); right: 12px; color: #fff; background: rgba(0, 0, 0, 0.18); }
/* Centered when it fits; when it doesn't (short screens, long food names), it starts at the top and scrolls instead of being cut off. */
.w-slide { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; animation: wIn 0.45s var(--ease); }
.w-slide::-webkit-scrollbar { display: none; }
.w-slide > * { flex-shrink: 0; }
.w-slide > :first-child { margin-top: auto; }
.w-slide > :last-child { margin-bottom: auto; }
@keyframes wIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes wPop { from { opacity: 0; transform: scale(0.6); } }
.w-eyebrow { margin: 0; font-size: 14px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.w-mt { margin-top: 18px; }
.w-huge { margin: 4px 0; font-size: clamp(46px, 14vw, 68px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.w-huge span { color: #e9b85c; }
.w-num { font-family: var(--font-num); font-size: clamp(84px, 27vw, 132px); font-weight: 900; line-height: 0.95; letter-spacing: -0.04em; animation: wPop 0.6s var(--spring); }
.w-big { margin: 2px 0; font-size: clamp(32px, 10vw, 46px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.w-lead { margin: 0; font-size: 19px; font-weight: 650; opacity: 0.95; }
.w-sub { margin: 8px 0 0; font-size: 16px; line-height: 1.4; opacity: 0.92; }
.w-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.w-pills.one { grid-template-columns: 1fr; }
.w-pills > div, .w-grid > div { background: rgba(255, 255, 255, 0.14); border-radius: 18px; padding: 14px 16px; }
.w-pills b { display: block; font-size: 26px; font-weight: 850; }
.w-pills small, .w-grid small { font-size: 13px; font-weight: 600; opacity: 0.85; }
.w-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.w-list li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.13); animation: wIn 0.5s var(--ease) both; }
.w-list li:nth-child(2) { animation-delay: 0.08s; }
.w-list li:nth-child(3) { animation-delay: 0.16s; }
.w-list li:nth-child(4) { animation-delay: 0.24s; }
.w-list li:nth-child(5) { animation-delay: 0.32s; }
.w-list li span { width: 24px; font-weight: 900; opacity: 0.85; text-align: center; }
.w-list li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.w-list li em { font-style: normal; font-weight: 800; opacity: 0.92; }
.w-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.w-grid b { display: block; font-size: 32px; font-weight: 900; }
.w-share { margin-top: 18px; background: #fff; color: #233e38; }
.w-again { background: rgba(255, 255, 255, 0.14); color: #fff; }
.w-months { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.w-months button { padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 13px; font-weight: 700; }
.w-months button.on { background: #fff; color: #233e38; }
.w-tap { margin: 0; text-align: center; font-size: 13px; opacity: 0.7; }
.wrapped-card .tn-ic { background: linear-gradient(145deg, var(--coral-2), var(--coral)); }
.w-exfig { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin-bottom: 14px; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); animation: wPop 0.6s var(--spring); }
.w-exfig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-exfig .w-ex2 { animation: wFlip 2.4s ease-in-out infinite; }
@keyframes wFlip { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
/* Shorter screens (iPhone SE/mini, or the app open in Safari with its toolbars): smaller numbers and pictures so a slide fits. */
@media (max-height: 760px) {
  .wrapped { gap: 10px; padding-left: 20px; padding-right: 20px; }
  .w-num { font-size: clamp(72px, 22vw, 104px); }
  .w-huge { font-size: clamp(42px, 12vw, 58px); }
  .w-big { font-size: clamp(28px, 8.5vw, 38px); }
  .w-lead { font-size: 17px; }
  .w-sub { font-size: 15px; }
  .w-exfig { width: min(100%, 220px); margin-bottom: 8px; }
  .w-mt { margin-top: 10px; }
  .w-list li { padding: 8px 12px; }
  .w-pills > div, .w-grid > div { padding: 11px 14px; }
  .w-grid b { font-size: 27px; }
  .w-share { margin-top: 10px; }
}
/* "Your Wrapped is ready" pop-up */
.sheet.wrapped-pop { background: linear-gradient(160deg, #e9b85c, #c87566 50%, #e9b85c); color: #fff; border: 0; }
.wrapped-pop .sheet-grab { background: rgba(255, 255, 255, 0.45); }
.wp-body { text-align: center; padding-top: 10px; padding-bottom: 18px; }
.wp-gift { font-size: 64px; line-height: 1; margin: 6px 0 10px; animation: wPop 0.7s var(--spring), wWiggle 1.6s ease-in-out 0.7s 2; }
@keyframes wWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.wp-body h2 { margin: 6px 0 8px; font-size: 27px; font-weight: 900; line-height: 1.15; letter-spacing: -0.02em; }
.wp-sub { margin: 0 auto 18px; max-width: 320px; font-size: 15px; line-height: 1.45; opacity: 0.95; }
.wp-go { background: #fff; color: #233e38; }
.wrapped-pop .btn-ghost { color: #fff; opacity: 0.9; }
.wrapped-pop .fine { color: rgba(255, 255, 255, 0.75); }

/* ============================== Water ============================== */
.tile.water { position: relative; }
.tile.water .tile-hit { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.tile.water > :not(.tile-hit) { position: relative; z-index: 1; pointer-events: none; }
.tile.water .tile-more { pointer-events: auto; }
.tile-more svg { width: 16px; height: 16px; }
.wt-bar { height: 8px; border-radius: 5px; background: var(--track); overflow: hidden; }
.wt-bar i { display: block; height: 100%; border-radius: inherit; background: var(--water); transition: width 0.4s var(--ease); }
.wt-bar.sm { height: 5px; margin-top: 9px; }
.wt-bar.dc { margin: 2px 16px 12px; }
.wt-dquick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }
.wt-total { text-align: center; padding: 6px 0 18px; }
.wt-total b { display: block; font-family: var(--font-num); font-size: 44px; font-weight: 800; letter-spacing: -0.02em; color: var(--water); }
.wt-total b span { font-family: var(--font); font-size: 17px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
.wt-total .wt-bar { height: 12px; margin: 10px 0 8px; }
.wt-total small { color: var(--text-2); font-size: 14px; font-weight: 550; }
.wt-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.wt-add { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); text-align: left; transition: transform 0.2s var(--spring); }
.wt-add:active { transform: scale(0.96); }
.wt-add.fav { border-color: color-mix(in srgb, var(--water) 55%, var(--line-2)); background: color-mix(in srgb, var(--water) 10%, var(--card)); }
.wt-add-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 6px; background: color-mix(in srgb, var(--water) 16%, transparent); color: var(--water); }
.wt-add-ic svg { width: 17px; height: 17px; }
.wt-add b { font-size: 15px; font-weight: 680; }
.wt-add small { color: var(--water); font-weight: 700; font-size: 13px; }
.wt-custom-row { display: flex; gap: 8px; margin-bottom: 12px; }
.wt-custom-row .input { flex: 1; min-width: 0; }
.wt-adjust { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.wt-hint { margin-top: -4px; }
.wb-row { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 6px; }
.wb-star { color: var(--text-3); flex: none; }
.wb-star.on { color: var(--star); }
.wb-row .icon-btn:last-child { color: var(--text-3); flex: none; }
.wb-form { padding: 14px; display: grid; gap: 12px; margin-bottom: 12px; }
.wb-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-presets button { padding: 7px 11px; border-radius: 999px; background: var(--card-2); font-size: 13px; font-weight: 650; color: var(--text-2); }
.wb-fields { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.wt-goal { padding: 14px 16px; display: grid; gap: 10px; }
.wt-goal .fine { margin: 0; }
.wt-log { margin-bottom: 12px; }
.wl-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; }
.wl-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--water) 16%, transparent); color: var(--water); }
.wl-ic svg { width: 15px; height: 15px; }
.wl-amt { font-family: var(--font-num); font-weight: 700; color: var(--water); font-size: 14.5px; }
.wl-row .icon-btn { color: var(--text-3); flex: none; }
.wt-undo { color: var(--text-2); }

/* Install steps: iOS 26 Safari mock-ups */
.mock-bar .m-pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; background: var(--card); border-radius: 999px; padding: 0 2px; }
.mock-bar .m-pill .m-url { background: none; padding: 5px 2px; }
.mock-bar .m-round { border-radius: 50%; background: var(--card); }
.mock-share { padding-top: 10px; }
.m-circles { display: flex; justify-content: space-around; padding: 0 6px 10px; }
.m-circles span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; position: relative; }
.m-circles i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--card); font-style: normal; }
.m-circles span.hot { color: var(--accent); font-weight: 650; }
.m-circles span.hot::after { inset: -4px -6px; border-radius: 12px; }
.mock-share .mock-list { border-top: 1px solid var(--line); }
.install-alt { margin: 0 0 10px; text-align: left; }
.sheet:focus, .sheet:focus-visible { outline: none; }
/* Visible to screen readers only (becomes visible while a keyboard user focuses something inside). */
.sr-only:not(:focus-within) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrapped .sr-only:focus-within { display: flex; gap: 8px; justify-content: center; }
.wrapped .sr-only button { color: #fff; text-decoration: underline; padding: 8px; }
.analytics-ask .nn-main { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; text-align: left; }
.analytics-ask .nn-main > div { flex: 1; min-width: 0; }
.analytics-ask b { display: block; font-size: 15px; }
.analytics-ask small { display: block; color: var(--text-3); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.aa-btns { display: flex; gap: 8px; margin-top: 10px; }

/* Timer for timed sets (planks, wall sits, cardio) */
.set-timer { height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 750; }
.set-timer svg { width: 16px; height: 16px; }
.sheet.hold-sheet { height: 100%; max-height: 100%; border-radius: 0; border: 0; padding-bottom: 0; }
.hold-full { position: absolute; inset: 0; border-radius: 0; padding-top: calc(var(--safe-t) + 64px); }
.hold-full .rest-hide { top: calc(var(--safe-t) + 14px); }
.ht-set { margin: -6px 0 0; color: var(--text-3); font-size: 14px; font-weight: 600; }
.hold-full .rest-ring small { position: absolute; bottom: 26%; color: var(--text-2); font-size: 14px; font-weight: 650; letter-spacing: 0.04em; }
.ht-ready { border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); }
.ht-ready-n { font-size: clamp(90px, 30vw, 130px) !important; animation: wPop 0.5s var(--spring); }
.ht-done { border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ok) 22%, transparent), transparent 70%); }
.ht-check { position: absolute; top: 22%; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; animation: wPop 0.5s var(--spring); }
.ht-check svg { width: 30px; height: 30px; stroke-width: 3; }
.ht-pause svg { width: 22px; height: 22px; }
.hold-full .btn-block { max-width: 360px; }

/* Log a finished workout */
.lw-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.lw-chips button { flex: none; white-space: nowrap; }
.field-row.lw-top { grid-template-columns: minmax(0, 1fr) 138px 78px; margin-bottom: 14px; }
.lw-line { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; }
.lw-line label { flex: 1; min-width: 0; display: grid; gap: 3px; text-align: center; }
.lw-line .input { height: 44px; text-align: center; font-family: var(--font-num); font-size: 17px; font-weight: 700; padding: 0 6px; }
.lw-line small { color: var(--text-3); font-size: 12px; font-weight: 600; }
.lw-x { flex: none; height: 44px; display: grid; place-items: center; color: var(--text-3); font-weight: 700; }
.lw-links { display: flex; gap: 16px; margin-top: 8px; }
.lw-links .link { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; }
.lw-links .link svg { width: 14px; height: 14px; }
.wo-logit { display: block; margin: 10px auto 0; font-size: 13.5px; }
@media (max-width: 380px) { .field-row.lw-top { grid-template-columns: 1fr 1fr; } .field-row.lw-top .field:first-child { grid-column: 1 / -1; } }
.lp-plan { padding: 12px 14px; margin-bottom: 10px; }
.lp-name { display: block; font-size: 15.5px; font-weight: 700; }
.lp-name .pill { margin-left: 6px; font-size: 11px; vertical-align: middle; }
.lp-sub { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 1px; }
.lp-days { display: grid; gap: 6px; margin-top: 10px; }
.lp-day { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--card-2); }
.lp-day b { display: block; font-size: 14.5px; font-weight: 650; }
.lp-day small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 1px; }

/* ============================== Coach Kelly: plan numbers, body composition, coach settings ============================== */
.plan-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 8px; }
.plan-nums > div { background: var(--card-2); border-radius: 14px; padding: 10px 6px; text-align: center; }
.plan-nums small { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.plan-nums b { display: block; font-family: var(--font-num); font-size: 20px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.plan-nums .hl { background: var(--accent-soft); }
.plan-nums .hl b { color: var(--accent); }
.plan-method { display: table; margin: 4px auto 0; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 750; }
.calc-result .plan-method, .ob-plan .plan-method { margin-bottom: 8px; }
.calc-result .fine, .ob-plan .fine { text-align: center; }
.pace-note { margin: -4px 0 14px; }
.body-comp { border: 1px solid var(--line-2); border-radius: 16px; padding: 4px 14px; background: var(--card); }
.body-comp summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 10px 0; font-weight: 700; }
.body-comp summary::-webkit-details-marker { display: none; }
.body-comp summary small { color: var(--text-3); font-weight: 550; }
.body-comp summary svg { width: 18px; height: 18px; color: var(--text-3); transition: transform 0.2s; }
.body-comp[open] summary svg { transform: rotate(180deg); }
.body-comp .field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0; }
.body-comp .field span { font-size: 12px; }
.coach-set .coach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 0 4px; }
.unit-input { position: relative; display: flex; align-items: center; }
.unit-input .input { width: 100%; padding-right: 34px; font-family: var(--font-num); font-weight: 720; }
.unit-input i { position: absolute; right: 12px; font-style: normal; font-size: 13px; color: var(--text-3); pointer-events: none; }
.unit-input.sm { width: 96px; }
.unit-input.sm .input { width: 96px; text-align: right; }
.coach-implied { font-size: 13.5px; color: var(--text-2); margin: 6px 0 4px; }
.coach-implied.warn { color: var(--warn); font-weight: 650; }
.coach-sug { margin: 10px 0 4px; padding: 14px; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.coach-sug b { display: block; }
.coach-sug small { display: block; color: var(--text-2); font-size: 13px; line-height: 1.45; margin: 4px 0 10px; }
.coach-sug-btns { display: flex; gap: 8px; justify-content: flex-end; }
.coach-val { font-family: var(--font-num); font-size: 17px; }
.coach-macros { padding: 12px 0 0; }

/* ============================== Coach Kelly habits ============================== */
:root { --fib: #6fc79e; --star: #e9b85c; --sleep: #e39a8b; }
:root[data-theme="light"] { --fib: #2e7d5b; --star: #d4a245; --sleep: #c87566; }
.fib { --m: var(--fib); }
.macro-row.four, .eq-macros:has(.eqm.fib) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.macro-row.four .mbar-val b { font-size: 16px; }
.macro-row.four .mbar-sub { font-size: 10.5px; }
.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.hero-foot b { color: var(--text); font-variant-numeric: tabular-nums; }
.hero-foot .btn svg { width: 16px; height: 16px; }
.eq-rem.in b { color: var(--ok); display: grid; place-items: center; }
.eq-rem.in b svg { width: 22px; height: 22px; }

/* 24-hour calculator */
.plan-nums.four { grid-template-columns: repeat(2, 1fr); }
.calc-range { padding: 16px; }
.calc-range > b { font-size: 16px; }
.range-fields { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; margin-top: 8px; width: 100%; }
.range-dash { padding-bottom: 14px; color: var(--text-3); font-weight: 650; font-size: 13px; }
.set-row-item.col .range-fields { margin-top: 10px; }

/* Gold stars */
.wins-card { padding: 16px; }
.wins-card header, .hb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wins-card header b, .hb-head b { display: block; font-size: 16.5px; font-weight: 750; }
.wins-card header small, .hb-head small { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.wins-count { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--star) 16%, transparent); color: var(--star); }
.wins-count svg { width: 16px; height: 16px; fill: currentColor; }
.wins-count b { font-size: 15px; color: var(--text); }
.wins-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.win { display: grid; justify-items: center; gap: 3px; padding: 9px 2px; border-radius: 14px; background: var(--card-2); }
.win span { font-size: 22px; line-height: 1; color: var(--text-3); filter: grayscale(1); opacity: 0.55; transition: transform 0.4s var(--spring); }
.win small { font-size: 11px; font-weight: 700; color: var(--text-3); text-align: center; }
.win.on { background: color-mix(in srgb, var(--star) 15%, var(--card)); }
.win.on span { filter: none; opacity: 1; transform: scale(1.08); }
.win.on small { color: var(--text); }

/* Movement checkboxes */
.moves-card, .sleep-card { padding: 16px; }
.move-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 4px; border-top: 1px solid var(--line); font-size: 15px; }
.hb-head + .move-row { margin-top: 8px; }
.move-row b { font-weight: 650; flex: 1; }
.move-e { font-size: 19px; }
.move-box { flex: 0 0 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line-2); display: grid; place-items: center; color: #fff; transition: background 0.2s, border-color 0.2s, transform 0.3s var(--spring); }
.move-box svg { width: 16px; height: 16px; stroke-width: 3; }
.move-row.on .move-box { background: var(--ok); border-color: var(--ok); transform: scale(1.06); }
.move-row.on b { color: var(--text); }

/* Sleep */
.sleep-main { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 12px 0 10px; }
.sleep-main .icon-btn { width: 46px; height: 46px; border-radius: 50%; background: var(--card-2); }
.sleep-val { text-align: center; min-width: 90px; }
.sleep-val b { display: block; font-family: var(--font-num); font-size: 40px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sleep-val small { color: var(--text-3); font-size: 12.5px; font-weight: 650; }
.sleep-main.big { margin: 20px 0; }
.wt-bar.sl i { background: var(--sleep); }
.sleep-ok { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13.5px; font-weight: 650; color: var(--ok); }
.sleep-ok svg { width: 16px; height: 16px; }
.habits-sheet .card { margin-bottom: 12px; }

/* Daily lesson */
.lesson-card { padding: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--card)), color-mix(in srgb, var(--accent-2) 10%, var(--card))); }
.lesson-card .eyebrow { display: flex; align-items: center; gap: 6px; color: var(--accent); }
.lesson-card .eyebrow svg { width: 15px; height: 15px; }
.lesson-card > b { display: block; font-family: var(--font-display); font-size: 20px; margin: 6px 0 4px; }
.lesson-card p { margin: 0 0 8px; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }

/* Celebration */
.cheer-layer { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px 16px; }
.cheer-backdrop { position: absolute; inset: 0; background: rgba(30, 8, 28, 0.5); opacity: 0; transition: opacity 0.25s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cheer { position: relative; width: min(380px, 100%); background: var(--sheet); border-radius: 28px; padding: 26px 22px 20px; text-align: center; box-shadow: var(--shadow-pop); transform: scale(0.85) translateY(20px); opacity: 0; transition: transform 0.45s var(--spring), opacity 0.25s; }
.cheer-layer.show .cheer-backdrop { opacity: 1; }
.cheer-layer.show .cheer { transform: none; opacity: 1; }
.cheer-top { position: relative; height: 96px; display: grid; place-items: center; }
.cheer-emoji { font-size: 66px; line-height: 1; animation: cheer-pop 0.7s var(--spring) both 0.1s; }
.cheer-burst i { position: absolute; left: 50%; top: 50%; font-style: normal; font-size: 15px; color: var(--star); opacity: 0; animation: cheer-spark 1s var(--ease) both calc(0.15s + var(--d)); }
.cheer-burst i:nth-child(3n) { color: var(--accent); }
.cheer-burst i:nth-child(3n + 1) { color: var(--accent-2); }
.cheer h2 { font-family: var(--font-display); font-size: 23px; margin: 8px 0 6px; }
.cheer-msg { font-size: 16px; margin: 0 0 14px; color: var(--text); line-height: 1.4; }
.cheer-tip { text-align: left; background: var(--card-2); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
.cheer-tip small { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); }
.cheer-tip small svg { width: 14px; height: 14px; }
.cheer-tip p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.cheer-sign { font-family: var(--font-script); font-size: 22px; color: var(--accent); margin: 2px 0 14px; }
@keyframes cheer-pop { 0% { transform: scale(0.2) rotate(-20deg); } 100% { transform: none; } }
@keyframes cheer-spark { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(0.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-62px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .cheer-emoji, .cheer-burst i { animation: none; } .cheer-burst { display: none; } }

/* Learn */
.coach-tools { padding: 14px 16px; }
.coach-tools > b { display: flex; align-items: center; gap: 6px; }
.coach-tools > b svg { width: 17px; height: 17px; color: var(--accent); }
.coach-tools > small { display: block; color: var(--text-2); font-size: 12.5px; margin: 2px 0 10px; }
.kc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kc-card { margin: 0; padding: 0; overflow: hidden; text-align: left; display: flex; flex-direction: column; }
.kc-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--card-2); }
.kc-emoji { display: grid; place-items: center; font-size: 46px; background: linear-gradient(135deg, var(--card-2), color-mix(in srgb, var(--accent-2) 12%, var(--card-2))); }
.kc-body { padding: 10px 12px 12px; }
.kc-body b { display: block; font-size: 14.5px; line-height: 1.25; }
.kc-body small { display: block; font-size: 12px; color: var(--text-3); margin-top: 3px; }
.kc-builder { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px; text-align: left; width: 100%; }
.kc-builder > div, .kc-link > div { flex: 1; min-width: 0; }
.kc-builder b, .kc-link b { display: block; font-size: 15px; }
.kc-builder small, .kc-link small { display: block; font-size: 12.5px; color: var(--text-3); }
.kc-builder > svg, .kc-link > svg { width: 18px; height: 18px; color: var(--text-3); }
.kc-link-row { display: flex; align-items: center; gap: 4px; padding-right: 10px; }
.kc-link { display: flex; align-items: center; gap: 12px; flex: 1; padding: 13px 8px 13px 16px; color: inherit; text-decoration: none; min-width: 0; }
.lessons .lesson summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; list-style: none; cursor: pointer; }
.lessons .lesson summary::-webkit-details-marker { display: none; }
.lessons .lesson summary svg { width: 18px; height: 18px; color: var(--text-3); transition: transform 0.2s; }
.lessons .lesson[open] summary svg { transform: rotate(180deg); }
.lessons .lesson p { margin: -4px 16px 14px; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.kc-hero { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; background: var(--card-2); font-size: 70px; }
.kc-hero.sm { aspect-ratio: 16 / 9; margin-bottom: 8px; }
.kc-summary { font-size: 16px; line-height: 1.45; margin: 14px 0 4px; }
.kc-nut { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.kc-nut > div { background: var(--card-2); border-radius: 14px; padding: 9px 6px; text-align: center; }
.kc-nut b { display: block; font-family: var(--font-num); font-size: 18px; font-variant-numeric: tabular-nums; }
.kc-nut small { font-size: 11.5px; color: var(--text-3); font-weight: 700; }
.kc-h { font-size: 17px; margin: 20px 0 6px; }
.kc-list { margin: 0; padding-left: 22px; line-height: 1.5; font-size: 15px; }
.kc-list li + li { margin-top: 6px; }
.kc-editor textarea.input { min-height: 0; resize: vertical; font: inherit; line-height: 1.4; padding-top: 10px; }
.kc-editor .btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bar-track i.star-bar { background: linear-gradient(color-mix(in srgb, var(--star) 70%, #fff), var(--star)); }
.bar-track i.sleep-bar { background: linear-gradient(color-mix(in srgb, var(--sleep) 60%, #fff), var(--sleep)); }

/* Powered by Holmquist Tech Solutions */
.powered-by { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 26px auto 8px; padding: 8px 12px; width: fit-content; max-width: 100%; color: var(--text-3); font-size: 12.5px; font-weight: 600; text-decoration: none; border-radius: 99px; }
.powered-by b { color: var(--text-2); font-weight: 750; }
/* HTS logo (from holmquisttechsolutions.com): peaks over "HTS" in Saira, light blue and white on a navy tile */
@font-face { font-family: "Saira HTS"; src: url("assets/fonts/saira-hts.woff2") format("woff2"); font-weight: 650; font-stretch: 125%; font-display: swap; }
.hts-tile { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 22%; background: #07152b; display: grid; place-items: center; }
.hts-brand { width: 74%; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.hts-mark { display: block; width: 86%; height: auto; overflow: visible; }
.hts-peaks, .hts-ridges { fill: none; stroke: #7ea2ff; stroke-linecap: round; stroke-linejoin: round; }
.hts-peaks { stroke-width: 3.6; }
.hts-ridges { stroke-width: 2.4; opacity: 0.75; }
.hts-word { font-family: "Saira HTS", "Saira", system-ui, sans-serif; font-weight: 650; font-stretch: 125%; font-variation-settings: "wdth" 125; letter-spacing: 0.04em; color: #fff; font-size: 8.5px; margin-top: -1px; padding-left: 0.04em; }
.built-by .hts-tile { width: 40px; height: 40px; border-radius: 11px; }
.built-by .hts-word { font-size: 10px; }
.desk-pb { margin: 10px 0 0; padding: 0; flex-basis: 100%; justify-content: flex-start; }
.ob-welcome .powered-by { margin: 22px 0 0; padding-left: 0; justify-content: flex-start; }
/* Light mode: the HTS logo on white (blue peaks, navy letters). Dark mode keeps the navy tile. */
:root[data-theme="light"] .hts-tile { background: #fff; box-shadow: 0 0 0 1px rgba(7, 21, 43, 0.12); }
:root[data-theme="light"] .hts-peaks, :root[data-theme="light"] .hts-ridges { stroke: #1f47d6; }
:root[data-theme="light"] .hts-word { color: #07152b; }

/* More coral: Kelly's coaching card and the big actions use the brand's warm coral. */
.community-card .tile-ic { background: linear-gradient(145deg, var(--coral-2), var(--coral)); color: #fff; }
.community-card b { color: var(--text); }

/* "Turn on reminders?" (asked once after setup) */
.na-body { text-align: center; padding-top: 8px; }
.na-body h2 { font-family: var(--font-display); font-size: 26px; margin: 0 0 8px; }
.na-lead { color: var(--text-2); margin: 0 0 18px; }
.na-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; text-align: left; }
.na-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.na-list svg { width: 20px; height: 20px; flex: none; color: var(--coral); margin-top: 1px; }
.na-body .btn-ghost { margin-top: 6px; }

/* Activity level picker (Coach Kelly's five levels) */
.act-reminder { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--coral) 12%, var(--card)); color: var(--text); font-size: 13.5px; line-height: 1.4; }
.act-reminder svg { width: 18px; height: 18px; flex: none; color: var(--coral); margin-top: 1px; }
.act-list { display: grid; gap: 8px; }
.act-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line-2); color: var(--text); }
.act-opt b { display: block; font-size: 15.5px; font-weight: 750; }
.act-opt small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--text-2); margin-top: 2px; }
.act-opt .act-mult { margin-left: auto; flex: none; font-family: var(--font-num); font-weight: 750; font-size: 14px; color: var(--text-3); }
.act-opt.on { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 10%, var(--card)); }
.act-opt.on .act-mult { color: var(--coral); }

/* ============================== Full-screen shell (keep this block LAST) ============================== */
/* iOS 26 Home Screen apps can report a wrong viewport for elements pinned with inset/bottom, leaving a gap
   or pushing the tab bar off screen. So the app and every full-screen overlay are sized from the top with
   dynamic viewport units, and the tab bar sits inside #app instead of on the viewport edge. */
html { height: 100%; }
body, #app, #sheets, #onboarding, #auth, .cheer-layer { top: 0; bottom: auto; height: 100vh; height: 100dvh; }
.tabbar { position: absolute; bottom: 0; }
/* iOS 26+: in a Home Screen web app, a position: fixed <body> makes iOS shrink the viewport by the status bar
   height, leaving a ~62pt strip under the tab bar. Let the body flow normally there and fill the large
   viewport; scrolling happens inside .screen and the sheets, never on body. */
@media (display-mode: standalone) {
  html { height: 100lvh; overflow: hidden; }
  body { position: static; height: 100lvh; overflow: hidden; }
}

/* ============================== Stronger Tomorrows brand ============================== */
/* Coral = energy (the + button, calorie ring, highlights). Gold = achievement. Evergreen = strength (text, buttons). */
.fab, .scan-btn { background: linear-gradient(145deg, var(--coral-2), var(--coral)); }
.avatar-lg, .pe-art { background: linear-gradient(145deg, var(--coral-2), var(--coral)); }
.wk-dot.on, .lg-dot { background: var(--coral); }
.wk-bar i, .bar-track i { background: linear-gradient(var(--coral-2), var(--coral)); }
.grad-text { background: linear-gradient(100deg, var(--coral), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Over a range is information, not failure: warm coral, never alarm red. */
.eq-rem.over b, .mbar-sub { color: var(--text-3); }
.eq-rem.over b { color: var(--coral); }
.wk-bar i.over, .bar-track i.over { background: var(--coral); }
.streak-chip.on { background: linear-gradient(145deg, #f0cb7e, var(--gold)); color: #3b2a07; }
.hs-ic.streak { background: color-mix(in srgb, var(--gold) 20%, transparent); color: #a8781f; }
:root:not([data-theme="light"]) .hs-ic.streak { color: var(--gold); }
.cheer-sign { color: var(--coral); }
.lesson-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--card)), color-mix(in srgb, var(--gold) 12%, var(--card))); }
.lesson-card .eyebrow { color: var(--accent); }
:root:not([data-theme="light"]) .lesson-card .eyebrow { color: var(--coral-2); }

/* Welcome screen wordmark */
.ms-word { font-family: var(--font); font-weight: 900; letter-spacing: 0.06em; line-height: 0.98; margin: 22px 0 6px; font-size: 44px; color: var(--text); text-transform: uppercase; }
.ms-word span { display: block; }
.ms-by { font-family: var(--font-script); font-size: 26px; color: var(--coral); margin: 0 0 14px; }
.ms-tagline { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--text); }
.ms-message { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); margin: 0 0 18px; }
:root[data-theme="light"] .ms-message { color: #a85a4c; }
.auth-brand .ms-brand-b { font-family: var(--font); font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
.auth-brand span, .desk-brand span { color: var(--coral); }

/* Coach: My clients */
.client-list { display: grid; gap: 8px; margin: 12px 0; }
.client-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; width: 100%; color: var(--text); }
.client-row > div { flex: 1; min-width: 0; }
.client-row b { display: block; font-size: 16px; }
.client-row small { color: var(--text-3); font-size: 13px; }
.client-row svg { width: 18px; height: 18px; color: var(--text-3); }
.client-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--coral-2), var(--coral)); flex: none; }
.client-sum { padding: 14px; }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-grid small { display: block; color: var(--text-3); font-size: 12px; font-weight: 600; }
.cs-grid b { font-size: 22px; font-family: var(--font-num); }
.cs-grid b span { font-size: 13px; color: var(--text-3); font-weight: 600; }
.set-row-item > b { font-weight: 700; }
.client-days { display: grid; gap: 8px; }
.cd-row { padding: 12px 14px; }
.cd-row.empty { opacity: 0.6; }
.cd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cd-stars { color: var(--star); letter-spacing: 1px; }
.cd-nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; font-weight: 700; font-size: 14px; }
.cd-nums small { display: block; font-size: 10.5px; color: var(--text-3); font-weight: 600; }
.cd-moves { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }

/* Activity level (Coach Kelly's 5 levels) */

/* Invites */
.inv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
.inv-row b { display: block; font-size: 15.5px; }
.inv-row small { color: var(--text-3); font-size: 13px; font-family: var(--font-num); }
.inv-row.off { opacity: 0.55; }
.inv-btns { display: flex; gap: 6px; }
.inv-name { padding: 12px 14px 4px; margin: 0; }
.invite-input { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
#clientSearch { margin-top: 10px; }