/* Shared presentation layer: intentionally independent of saved state and billing. */
:root {
  --bg: oklch(0.13 0.003 250);
  --bg2: oklch(0.17 0.003 250);
  --card: oklch(0.19 0.003 250);
  --card2: oklch(0.23 0.003 250);
  --line: oklch(0.29 0.003 250);
  --txt: oklch(0.97 0 0);
  --dim: oklch(0.76 0 0);
  --dim2: oklch(0.65 0 0);
  --acc: oklch(0.61 0.25 25);
  --acc-hover: oklch(0.55 0.23 25);
  --acc2: oklch(0.73 0.17 25);
  --water: oklch(0.75 0.14 230);
  --steps: oklch(0.76 0.14 300);
  --r: 8px;
  --r2: 8px;
  --chart-track: var(--card2);
  --media-shade: oklch(0.10 0 0 / 82%);
  --focus-shadow: 0 0 0 3px var(--acc-soft);
}
body {font-family: 'Arial', sans-serif; letter-spacing: 0;}
#phone {max-width: 460px;}
#view {padding: 20px 18px calc(100px + var(--safe));}
h1 {font-size: 24px;line-height: 1.25;}
h2 {font-size: 16px;}
.brand {font-size: 22px;color: var(--acc);}
.logo {background: transparent;color: var(--acc);box-shadow: none;font-size: 28px;width: 23px;}
.topbar {padding-bottom: 18px;}
.btn,.iconbtn,input,select,textarea,.seg,.tabs button,.setrow {border-radius: 8px;}
.btn.pri,.btn.pro {min-height: 44px;}
.bar {background: var(--chart-track);height: 5px;}
.ring svg circle:first-child {stroke: var(--chart-track);}
.card {padding: 16px;}
.sectitle {margin: 22px 0 12px;}
.sectitle h2 {font-size: 15px;}
.home-status {margin: 0 0 18px;gap: 8px;}
.home-status>span:first-child {font-size: 12px;}
.chip.gopro {background: var(--acc);box-shadow: var(--focus-shadow);animation: none;letter-spacing: 0;padding: 8px 10px;}
.member-greeting {margin-bottom: 16px;}
.member-greeting h1 {margin: 3px 0 4px;}
.today-plan {position: relative;isolation: isolate;overflow: hidden;padding: 18px 0 22px;border-top: 1px solid var(--line);}
.plan-heading h1 {font-size: 21px;}
.plan-heading .ring {width: 74px;height: 74px;}
.workout-summary {margin: 16px 0;}
.workout-summary .ic {width: 42px;height: 42px;display:grid;place-items:center;background:var(--card2);border-radius:8px;color:var(--acc);}
.daily-totals {gap: 10px;}
.daily-totals .stat {position:relative;background:var(--bg2);border-color:var(--line);padding:13px;}
.daily-totals .v {color: var(--txt) !important;font-size: 18px;}
.daily-totals .k {font-size:12px;margin:0 0 8px;}
.metric-line {display:flex;align-items:center;gap:7px;}
.metric-icon {color:var(--acc);font-size:15px;}
.daily-totals .stat:nth-child(3) .metric-icon,.daily-totals .stat:nth-child(3) .bar>i {color:var(--water);background:var(--water);}
.daily-totals .stat:nth-child(4) .metric-icon,.daily-totals .stat:nth-child(4) .bar>i {color:var(--steps);background:var(--steps);}
.daily-totals .metric-icon {background:transparent !important;}
.daily-totals .bar {margin-top:12px;}
.quick-tools {margin: 12px 0 22px;}
.quick-tools .btn {background: var(--bg2);}
.banner {background:var(--bg2);border-color:var(--acc-border);border-radius:8px;}
#nav {background:var(--bg);padding:10px 8px calc(8px + var(--safe));}
#nav button.on {background:transparent;color:var(--acc);}
#nav button .ni {width:24px;height:24px;display:grid;place-items:center;}
.ui-icon {width:21px;height:21px;display:inline-block;vertical-align:middle;flex-shrink:0;}
.workout-cover {position:relative;aspect-ratio: 3 / 1;overflow:hidden;border-radius:8px;margin-bottom:16px;}
.workout-cover img {width:100%;height:100%;object-fit:cover;object-position:center 56%;}
.workout-cover::after {content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--media-shade),transparent);}
.workout-intro {padding-top:0;}
.workout-facts {gap:18px;font-size:13px;}
.workout-preview {padding:0;list-style:none;counter-reset: exercise;display:grid;gap:8px;}
.workout-preview li {counter-increment:exercise;display:grid;grid-template-columns:28px minmax(0,1fr) 18px;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:12px 0;font-size:14px;line-height:1.5;}
.workout-preview li::before {content:counter(exercise);font-size:12px;color:var(--dim);width:24px;height:24px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;}
.workout-preview button {text-align:left;min-width:0;}
.workout-preview strong {display:block;color:var(--txt);font-size:14px;}
.workout-preview small {color:var(--dim);font-size:12px;}
#foodBody>.card,#progressBody>.card,#mealplanBody>.card {background:none;border:0;border-radius:0;padding:16px 0 20px;border-bottom:1px solid var(--line);}
.nutrition-overview {display:grid;grid-template-columns:142px minmax(0,1fr);gap:18px;align-items:center;}
.nutrition-overview .ring {width:142px;height:142px;}
.nutrition-overview .rc .b {font-size:27px;}
.nutrition-water {margin-top:18px;flex-wrap:wrap;}
.nutrition-water .bar {max-width:120px;}
#foodBody>.btn.pro {margin:10px 0;}
#foodBody .empty {padding:16px 0 !important;text-align:left;font-size:12px;}
#foodBody .empty .e {display:none;}
#foodBody .item {background:var(--bg2);}
.progress-weight {padding:18px 0 22px;border-bottom:1px solid var(--line);margin-bottom:18px;}
.progress-weight h2 {font-size:15px;}
.weight-reading {font-size:27px;font-weight:800;margin-top:8px;}
.weight-reading small {font-size:14px;color:var(--dim);font-weight:400;}
.profile-summary {padding:4px 0 20px;}
.profile-summary .avatar {background:var(--card2);color:var(--txt);width:44px;height:44px;}
.menu-link .ic {background:transparent;color:var(--dim);}
.membership-strip {display:flex;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--line);}
.membership-strip .ui-icon {color:var(--acc);width:28px;height:28px;}
.membership-strip>div {flex:1;min-width:0;}
.membership-strip .btn {font-size:12px;}
.session-next {border:0;padding:16px 0;border-bottom:1px solid var(--line);}
.timerbig {letter-spacing:0;}
.stat .v {letter-spacing:0;}
button:focus-visible {outline:2px solid var(--acc);outline-offset:3px;}
@media (max-width:359px) {
  #view {padding-inline:12px;}
  .nutrition-overview {grid-template-columns:124px minmax(0,1fr);gap:10px;}
  .nutrition-overview .ring {transform:scale(.87);transform-origin:left center;margin-right:-18px;}
  .daily-totals .v {font-size:16px;}
  .home-status {grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none !important;scroll-behavior:auto !important;transition:none !important;}
}