/* Elric design system */
:root, :root[data-theme] {
  color-scheme: light;
  --e-bg: #F5F5F7; --e-surface: #FFFFFF; --e-input: #ECECEF;
  --e-primary: #E8401F; --e-primary-ink: #C2410C; --e-gold: #FF8A00;
  --e-text: #0B0B0D; --e-muted: #5B5B66; --e-tab: #5B5B66;
  --e-line: rgba(11, 11, 13, .09); --e-outline: rgba(11, 11, 13, .18); --e-wash: rgba(255, 77, 46, .07);
  --e-gold-line: rgba(255, 77, 46, .4); --e-danger: #DC2626; --e-success: #16A34A;
  --e-hot: linear-gradient(135deg, #FF4D2E, #FF8A00);
  --e-serif: "Oswald", "Arial Narrow", Impact, system-ui, sans-serif;
  --e-sans: "Inter", system-ui, -apple-system, sans-serif;
  --e-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(255, 77, 46, .06);
  --e-r-card: 18px; --e-r-btn: 14px; --e-r-input: 12px; --e-r-sheet: 24px;
  --e-pad: 20px; --e-gap: 16px;
  --e-ease: cubic-bezier(.22, 1, .36, 1);
  --e-safe-b: env(safe-area-inset-bottom, 0px); --e-safe-t: env(safe-area-inset-top, 0px);
  /* map the kit tokens so library defaults follow the palette */
  --fill-primary: var(--e-primary); --fill-primary-on: var(--e-bg); --text-primary: var(--e-text); --text-secondary: var(--e-muted); --text-primary-on: #fff;
  --sans: var(--e-sans); --ease-out: var(--e-ease);
}
body { background: var(--e-bg); color: var(--e-text); font: 400 15px/1.5 var(--e-sans); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--e-primary); outline-offset: 2px; border-radius: 8px; }
button { font-family: var(--e-sans); -webkit-tap-highlight-color: transparent; }
.x-label, .x-card h2, .x-sheet label, .x-mealhead h2 { font: 500 12px/1.4 var(--e-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--e-muted); }
.x-note { font: 400 13px/1.5 var(--e-sans); color: var(--e-muted); }

/* shell */
.x-shell { display: block; max-width: none; padding: 0; }
.x-top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--e-line); }
.x-top__in { max-width: 560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(var(--e-safe-t) + 8px) var(--e-pad) 8px; }
.x-brand { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 18px/1 var(--e-serif); letter-spacing: .22em; text-transform: uppercase; color: var(--e-primary); }
.x-brand img { width: 26px; height: 26px; object-fit: contain; }
.x-brandrow { display: flex; align-items: center; gap: 12px; min-width: 0; white-space: nowrap; }
.x-clock { padding-left: 12px; border-left: 1px solid var(--e-gold); font: 500 13px/18px var(--e-sans); font-variant-numeric: tabular-nums; color: rgba(255, 77, 46, .7); white-space: nowrap; }
@media (max-width: 360px) { .x-brand { letter-spacing: .12em; gap: 8px; } .x-brandrow { gap: 10px; } .x-clock { padding-left: 10px; } }
.x-app { max-width: 560px; margin: 0 auto; padding: 8px var(--e-pad) calc(104px + var(--e-safe-b)); display: grid; gap: var(--e-gap); }
.x-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--e-primary); cursor: pointer; font: 400 20px/1 var(--e-sans); }
.x-icon svg { width: 22px; height: 22px; }
.x-icon:hover { background: var(--e-wash); }

/* screen head */
.x-head { display: grid; gap: 8px; padding: 16px 0 8px; }
.x-head__row { display: flex; align-items: flex-end; gap: 16px; }
.x-head h1 { flex: 1; min-width: 0; display: flex; flex-direction: column-reverse; gap: 6px; font: 600 28px/1.15 var(--e-serif); color: var(--e-text); }
.x-head h1 small { font: 500 12px/1.4 var(--e-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--e-muted); }
.x-daynav { display: flex; gap: 8px; }
.x-daynav .x-icon { width: 44px; height: 44px; border: 1px solid var(--e-line); background: var(--e-surface); }
.x-daynav .x-icon svg { width: 18px; height: 18px; }
.x-quote { margin: 0; font: italic 400 14px/1.55 var(--e-sans); color: var(--e-muted); }
.x-quote[hidden] { display: none; }

/* views and cards */
.x-view { display: grid; gap: var(--e-gap); }
.x-view[hidden] { display: none; }
.x-card { background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-card); padding: var(--e-pad); box-shadow: var(--e-shadow); display: grid; gap: 16px; }
.x-card h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.x-card h2 span { font: 400 13px/1.4 var(--e-sans); letter-spacing: 0; text-transform: none; color: var(--e-muted); }

/* calorie ring */
.x-hero { gap: 24px; }
.x-ring { display: grid; justify-items: center; gap: 16px; }
.x-ringwrap { position: relative; width: 200px; height: 200px; }
.x-ring svg { width: 200px; height: 200px; transform: rotate(-90deg); display: block; }
.x-ring circle { fill: none; stroke-width: 10; }
.x-ring .bg { stroke: var(--e-line); }
.x-ring .fg { stroke: url(#x-gold); stroke-linecap: round; transition: stroke-dashoffset 600ms var(--e-ease); }
.x-ring.is-over .fg { stroke: var(--e-danger); }
.x-ringwrap b { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; font-weight: 400; }
.x-ringwrap b span { font: 600 56px/1 var(--e-serif); color: var(--e-text); font-variant-numeric: lining-nums tabular-nums; }
.x-ringwrap b small { font: 500 12px/1.4 var(--e-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--e-muted); }
.x-ring dl { margin: 0; display: flex; justify-content: center; gap: 40px; }
.x-ring dl > div { display: grid; justify-items: center; gap: 2px; }
.x-ring dt { font: 500 12px/1.4 var(--e-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--e-muted); }
.x-ring dd { margin: 0; font: 500 15px/1.4 var(--e-sans); color: var(--e-text); }

/* macro bars */
.x-bar { display: grid; gap: 8px; }
.x-bar p { display: flex; justify-content: space-between; gap: 8px; font: 500 13px/1.4 var(--e-sans); color: var(--e-text); }
.x-bar p span { font: 400 13px/1.4 var(--e-sans); color: var(--e-muted); }
.x-bar i { display: block; height: 6px; border-radius: 999px; background: var(--e-line); overflow: hidden; }
.x-bar i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--e-primary); border-radius: inherit; transition: width 600ms var(--e-ease); }
.x-bar i[data-fx="bar-Protein"]::after { background: var(--e-gold); }
.x-bar.is-over i::after { background: var(--e-danger); }

/* buttons */
.x-big { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--e-r-btn); background: var(--e-primary); color: #fff; font: 500 15px/1.2 var(--e-sans); letter-spacing: .01em; cursor: pointer; text-decoration: none; }
.x-big:hover { background: var(--e-primary-ink); }
.x-big svg { width: 18px; height: 18px; }
.x-big.is-ghost { background: var(--e-surface); border-color: var(--e-outline); color: var(--e-primary); }
.x-big.is-ghost:hover { background: var(--e-wash); }
.x-big.is-text { width: auto; min-height: 44px; justify-self: start; padding: 0 4px; background: transparent; border: 0; color: var(--e-primary); }
.x-big.is-text:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.x-big.is-danger, .x-clear, .x-big.is-red { width: auto; min-height: 44px; justify-self: center; padding: 0 12px; background: transparent; border: 0; color: var(--e-danger); font: 500 13px/1.2 var(--e-sans); letter-spacing: .02em; cursor: pointer; }
.x-big.is-danger:hover, .x-clear:hover, .x-big.is-red:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.x-big.is-auto { width: auto; padding: 0 24px; }
.x-big:disabled { opacity: .5; cursor: default; }
.x-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.x-three { grid-template-columns: repeat(3, 1fr); }
.x-quiet { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px; }
.x-quiet .x-big.is-ghost { width: auto; min-height: 44px; padding: 0 20px; font-size: 14px; }

/* inputs */
.x-input, .x-sheet input:not([type="file"]), .x-sheet textarea, .x-sheet select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--e-r-input); background: var(--e-input); color: var(--e-text); font: 400 16px/1.4 var(--e-sans); letter-spacing: 0; text-transform: none; transition: border-color 160ms ease, box-shadow 160ms ease; -webkit-appearance: none; appearance: none; }
.x-input::placeholder, .x-sheet input::placeholder, .x-sheet textarea::placeholder { color: var(--e-muted); opacity: 1; }
.x-input:focus, .x-sheet input:focus, .x-sheet textarea:focus { outline: none; border-color: var(--e-primary); box-shadow: 0 0 0 3px rgba(255, 77, 46, .12); background: var(--e-surface); }
.x-sheet textarea { min-height: 160px; padding: 12px 14px; font: 400 13px/1.55 "Geist Mono", ui-monospace, monospace; resize: vertical; }
.x-sheet #pl { min-height: 240px; }
.x-sheet input[type="file"] { font: 400 13px/1.4 var(--e-sans); color: var(--e-muted); text-transform: none; letter-spacing: 0; }
#dayname { font-size: 17px; font-weight: 500; }
.x-add { display: flex; gap: 8px; }
.x-add .x-big { width: auto; padding: 0 24px; }
.x-add .x-input { min-height: 52px; }

/* day chips */
.x-days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--e-pad) * -1); padding: 4px var(--e-pad); }
.x-days::-webkit-scrollbar { display: none; }
.x-chip { flex: none; position: relative; min-width: 52px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--e-outline); background: var(--e-surface); color: var(--e-text); font: 500 13px/1 var(--e-sans); cursor: pointer; }
.x-chip::before { content: ""; position: absolute; inset: -4px 0; }
.x-chip:hover { background: var(--e-wash); }
.x-chip[aria-pressed="true"] { background: var(--e-primary); border-color: var(--e-primary); color: #fff; }
.x-chip.has-ex::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--e-gold); }

/* lists */
.x-list { list-style: none; margin: 0; padding: 0; display: grid; }
.x-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border-top: 1px solid var(--e-line); }
.x-row:first-child { border-top: 0; }
.x-row > div { flex: 1; min-width: 0; }
.x-row strong { display: block; font: 500 15px/1.4 var(--e-sans); color: var(--e-text); overflow-wrap: anywhere; }
.x-row small { display: block; font: 400 13px/1.45 var(--e-sans); color: var(--e-muted); }
.x-row .x-k { font: 500 14px/1.4 var(--e-sans); color: var(--e-text); white-space: nowrap; text-align: right; }
.x-row button { width: 36px; height: 36px; flex: none; position: relative; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--e-muted); cursor: pointer; }
.x-row button::before { content: ""; position: absolute; inset: -4px; }
.x-row button:hover { background: var(--e-wash); color: var(--e-primary); }
.x-row button svg { width: 18px; height: 18px; }
.x-row .x-input { min-height: 40px; }
.x-tap { cursor: pointer; }
.x-check { flex: none; position: relative; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; border: 1.5px solid var(--e-outline); color: #fff; }
.x-check svg { width: 15px; height: 15px; }
.x-check::after { content: ""; position: absolute; inset: -6px; border-radius: 11px; border: 1px solid var(--e-gold); opacity: 0; pointer-events: none; }
.x-row.is-done .x-check { background: var(--e-primary); border-color: var(--e-primary); }
.x-row.is-done strong { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--e-muted); }
.x-empty { display: grid; justify-items: center; gap: 16px; padding: 16px 8px; text-align: center; font: 400 13px/1.5 var(--e-sans); color: var(--e-muted); }

/* week strip */
.x-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.x-wd { min-height: 64px; padding: 8px 0; display: grid; justify-items: center; align-content: center; gap: 4px; border: 0; border-radius: 14px; background: transparent; color: var(--e-text); cursor: pointer; }
.x-wd span { font: 500 12px/1 var(--e-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--e-muted); }
.x-wd b { font: 500 15px/1.2 var(--e-sans); }
.x-wd i { width: 4px; height: 4px; border-radius: 50%; background: var(--e-gold); visibility: hidden; }
.x-wd.is-done i { visibility: visible; }
.x-wd.is-today b { color: var(--e-primary); font-weight: 600; text-decoration: underline; text-decoration-color: var(--e-gold); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.x-wd:hover { background: var(--e-wash); }
.x-wd[aria-pressed="true"] { background: var(--e-primary); color: #fff; }
.x-wd[aria-pressed="true"] b { color: #fff; }
.x-wd[aria-pressed="true"] span { color: rgba(255, 255, 255, .7); }

/* water */
.x-water { position: relative; overflow: hidden; }
.x-water > :not(.x-wave) { position: relative; }
.x-wave { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); pointer-events: none; background: rgba(255, 77, 46, .045); }
.x-wave::before, .x-wave::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background-repeat: repeat-x; background-size: 120px 12px; }
.x-wave::before { top: -11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6Q30 0 60 6T120 6V12H0Z' fill='%23073F36' fill-opacity='.045'/%3E%3C/svg%3E"); }
.x-wave::after { top: -8px; height: 9px; background-size: 160px 9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q30 12 60 6T120 6V12H0Z' fill='%23073F36' fill-opacity='.035'/%3E%3C/svg%3E"); }
.x-wave.is-empty { visibility: hidden; }

/* meals and totals */
.x-mealhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.x-mealhead small { display: block; margin-top: 4px; font: 400 13px/1.4 var(--e-sans); letter-spacing: 0; text-transform: none; color: var(--e-muted); }
.x-mealhead > span { font: 400 13px/1.4 var(--e-sans); color: var(--e-muted); white-space: nowrap; }
.x-macros { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.x-macros div { display: grid; gap: 4px; padding: 4px; border-left: 1px solid var(--e-line); }
.x-macros div:first-child { border-left: 0; }
.x-macros b { font: 500 20px/1.2 var(--e-sans); color: var(--e-text); }
.x-macros span { font: 500 12px/1.3 var(--e-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--e-muted); }

/* tab bar */
.x-tabs { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 0 var(--e-pad) var(--e-safe-b); background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border-top: 1px solid var(--e-line); }
.x-tabs button { flex: 1; max-width: 180px; position: relative; min-height: 64px; padding: 10px 0 8px; display: grid; justify-items: center; align-content: center; gap: 4px; border: 0; background: transparent; color: var(--e-tab); font: 500 12px/1 var(--e-sans); letter-spacing: .04em; cursor: pointer; }
.x-tabs button svg { width: 22px; height: 22px; }
.x-tabs button[aria-selected="true"] { color: var(--e-primary); }
.x-tabs button[aria-selected="true"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 24px; height: 2px; margin-left: -12px; background: var(--e-gold); }

/* sheet */
.x-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(5, 46, 39, .32); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.x-scrim.is-open { opacity: 1; pointer-events: auto; }
.x-sheet { position: fixed; z-index: 41; left: 50%; bottom: 0; width: min(560px, 100%); max-height: 88dvh; overflow-y: auto; transform: translate(-50%, 100%); transition: transform 320ms var(--e-ease); background: var(--e-surface); border-radius: var(--e-r-sheet) var(--e-r-sheet) 0 0; padding: 8px var(--e-pad) calc(var(--e-safe-b) + 24px); display: grid; gap: 16px; box-shadow: 0 -8px 32px rgba(255, 77, 46, .1); }
.x-sheet.is-open { transform: translate(-50%, 0); }
.x-sheet::before { content: ""; justify-self: center; width: 36px; height: 4px; margin-bottom: 4px; border-radius: 999px; background: rgba(255, 77, 46, .15); }
.x-sheet header { display: flex; align-items: center; gap: 8px; }
.x-sheet header h2 { flex: 1; font: 600 22px/1.2 var(--e-serif); color: var(--e-text); }
.x-sheet header .x-icon { width: 44px; height: 44px; background: var(--e-wash); }
.x-sheet header .x-icon svg { width: 18px; height: 18px; }
.x-sheet label { display: grid; gap: 8px; }
.x-sheet > div > strong { font: 500 17px/1.3 var(--e-sans); }
.x-sheet .x-card { box-shadow: none; padding: 16px; border-radius: 14px; }
.x-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.x-step { display: flex; align-items: center; gap: 8px; }
.x-step input { text-align: center; }
.x-step .x-icon { border: 1px solid var(--e-outline); background: var(--e-surface); }

/* confirm modal */
.x-confirm { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--e-pad); background: rgba(5, 46, 39, .4); opacity: 0; transition: opacity 200ms ease; }
.x-confirm[hidden] { display: none; }
.x-confirm.is-open { opacity: 1; }
.x-confirm__card { width: min(340px, 100%); background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-card); padding: 24px; display: grid; gap: 8px; box-shadow: var(--e-shadow); transform: translateY(16px) scale(.97); transition: transform 240ms var(--e-ease); }
.x-confirm.is-open .x-confirm__card { transform: none; }
.x-confirm__card h2 { margin: 0; font: 600 22px/1.2 var(--e-serif); color: var(--e-text); }
.x-confirm__card p { margin: 0 0 16px; font: 400 15px/1.5 var(--e-sans); color: var(--e-muted); }
.x-confirm .x-btns { align-items: center; }
.x-confirm .x-big.is-red { width: 100%; min-height: 52px; font-size: 15px; }

/* splash, toast, confetti */
.x-splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--e-bg); transition: opacity 300ms ease; }
.x-splash { overflow-y: auto; padding: calc(var(--e-safe-t) + 24px) var(--e-pad) calc(var(--e-safe-b) + 24px); }
.x-land { width: 100%; max-width: 420px; display: grid; gap: 16px; justify-items: center; text-align: center; }
.x-splash img { width: min(160px, 44vw); height: auto; animation: x-splash-in 600ms var(--e-ease) both; }
.x-land h1 { margin: 8px 0 0; font: 600 32px/1.15 var(--e-serif); color: var(--e-text); }
.x-land__sub { margin: 0 0 8px; font: 400 16px/1.5 var(--e-sans); color: var(--e-muted); }
.x-land .x-note { margin: -4px 0 0; }
.x-foot { display: grid; gap: 4px; justify-items: center; padding: 16px 0 0; font: 400 13px/1.5 var(--e-sans); color: var(--e-muted); text-align: center; }
.x-foot p { margin: 0; font-size: 12px; }
.x-foot a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 4px; color: var(--e-primary); text-decoration: none; }
.x-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.x-plan { display: grid; gap: 12px; }
.x-plan__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 500 15px/1.4 var(--e-sans); color: var(--e-text); }
.x-plan__row span:last-child { color: var(--e-primary); font-weight: 600; white-space: nowrap; }
.x-splash.is-out { opacity: 0; pointer-events: none; }
@keyframes x-splash-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.x-toast { position: fixed; z-index: 110; left: 50%; bottom: calc(var(--e-safe-b) + 84px); transform: translate(-50%, 0); padding: 12px 20px; border-radius: 999px; background: var(--e-primary-ink); color: #fff; font: 500 13px/1.2 var(--e-sans); letter-spacing: .02em; box-shadow: var(--e-shadow); opacity: 0; pointer-events: none; transition: opacity 200ms ease; white-space: nowrap; }
.x-toast.is-on { opacity: 1; }
.x-confetti { position: fixed; inset: 0; z-index: 64; pointer-events: none; width: 100%; height: 100%; }
.x-row.is-leaving { overflow: hidden; min-height: 0; padding-block: 0; opacity: 0; transform: translateX(-16px); pointer-events: none; border-top-color: transparent; transition: height 240ms var(--e-ease), min-height 240ms var(--e-ease), padding 240ms var(--e-ease), opacity 180ms ease, transform 240ms var(--e-ease); }

@media (prefers-reduced-motion: no-preference) {
  .x-enter { animation: x-enter 240ms var(--e-ease) backwards; }
  @keyframes x-enter { from { opacity: 0; transform: translateY(12px); } }
  .x-sheet { transition: transform 320ms var(--e-ease), opacity 320ms ease; }
  .x-sheet:not(.is-open) { opacity: .6; }
  .x-confirm__card { opacity: 0; transform: translateY(20px) scale(.94); transition: transform 240ms var(--e-ease), opacity 200ms ease; }
  .x-confirm.is-open .x-confirm__card { opacity: 1; }
  .x-in { animation: x-in 280ms var(--e-ease) backwards; }
  @keyframes x-in { from { opacity: 0; transform: translateY(-8px); } }
  .x-row.is-ticked .x-check { animation: x-pop 300ms var(--e-ease); }
  .x-row.is-ticked .x-check path { stroke-dasharray: 22; animation: x-draw 320ms 80ms var(--e-ease) backwards; }
  .x-row.is-ticked .x-check::after { animation: x-burst 560ms var(--e-ease); }
  @keyframes x-pop { 50% { transform: scale(1.12); } }
  @keyframes x-draw { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
  @keyframes x-burst { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
  .x-wave { transition: height 600ms var(--e-ease); }
  .x-wave::before { animation: x-wave 5s linear infinite; }
  .x-wave::after { animation: x-wave2 7s linear infinite; }
  @keyframes x-wave { to { background-position-x: 120px; } }
  @keyframes x-wave2 { to { background-position-x: -160px; } }
  .x-toast { transform: translate(-50%, 12px); transition: opacity 200ms ease, transform 240ms var(--e-ease); }
  .x-toast.is-on { transform: translate(-50%, 0); }
  .x-big, .x-icon, .x-chip, .x-wd, .x-row button, .x-tabs button { transition: transform 120ms var(--e-ease), background-color 160ms ease, color 160ms ease; }
  .x-big:active:not(:disabled), .x-icon:active, .x-chip:active, .x-wd:active, .x-row button:active, .x-tabs button:active { transform: scale(.97); }
}
/* cloud save status */
.x-topact { display: flex; align-items: center; gap: 2px; flex: none; }
.x-cloud { width: 32px; height: 44px; display: grid; place-items: center; color: var(--e-primary); }
.x-cloud svg { width: 20px; height: 20px; }
.x-cloud .ck, .x-cloud .sl { display: none; }
.x-cloud[data-s="saved"] .ck { display: inline; }
.x-cloud[data-s="saving"] { color: var(--e-gold); animation: x-cloud-pulse 1.2s ease-in-out infinite; }
.x-cloud[data-s="offline"] { color: var(--e-muted); }
.x-cloud[data-s="offline"] .sl { display: inline; }
@keyframes x-cloud-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .x-cloud[data-s="saving"] { animation: none; } }
@media (prefers-reduced-motion: reduce) { .x-sheet, .x-scrim, .x-ring .fg, .x-bar i::after, .x-confirm, .x-confirm__card, .x-splash { transition: none; } .x-splash img { animation: none; } .x-confirm__card { transform: none; } }

/* dark mode */
:root { --e-on: #fff; --e-glass: rgba(245, 245, 247, .86); --e-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] {
  color-scheme: dark;
  --e-bg: #0B0B0D; --e-surface: #16161A; --e-input: #1E1E24;
  --e-primary: #FF4D2E; --e-primary-ink: #FF8A00; --e-gold: #FF8A00;
  --e-text: #FFFFFF; --e-muted: #A1A1AA; --e-tab: #A1A1AA;
  --e-line: #2A2A31; --e-outline: rgba(255, 255, 255, .2); --e-wash: rgba(255, 255, 255, .06);
  --e-gold-line: rgba(255, 77, 46, .45); --e-danger: #F87171; --e-success: #22C55E;
  --e-on: #FFFFFF; --e-glass: rgba(11, 11, 13, .86); --e-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
html, body { overflow-x: clip; }
.x-top, .x-tabs { background: var(--e-glass); }
.x-clock { color: var(--e-muted); }
.x-big, .x-chip[aria-pressed="true"], .x-wd[aria-pressed="true"], .x-wd[aria-pressed="true"] b, .x-check { color: var(--e-on); }
.x-wd[aria-pressed="true"] span { color: var(--e-on); opacity: .7; }
.x-sheet::before { background: var(--e-outline); }
.x-toast { background: var(--e-text); color: var(--e-bg); max-width: calc(100vw - 32px); white-space: normal; text-align: center; }
.x-tabs { padding-inline: 4px; }
.x-tabs button { min-width: 0; }
.x-seg [aria-pressed="true"] { background: var(--e-primary); border-color: var(--e-primary); color: var(--e-on); }
select.x-input, select.x-input:focus { padding-right: 36px; min-width: 0; text-overflow: ellipsis; background-image: var(--e-chev); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }

/* onboarding */
.x-splash.is-ob { place-items: start center; }
.x-ob { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; text-align: left; }
.x-ob label, .x-act label { display: grid; gap: 6px; min-width: 0; }
.x-ob .x-full { grid-column: 1 / -1; }
.x-ob #ob-msg:empty, .x-ob #ob-res:empty { display: none; }
#ob-res { display: grid; gap: 12px; }

/* today: water glasses, activity */
.x-glasses { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 4px; }
.x-glass { height: 48px; min-width: 0; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--e-primary); cursor: pointer; }
.x-glass:hover { background: var(--e-wash); }
.x-glass svg { width: 28px; height: 28px; }
.x-glass .w { fill: transparent; transition: fill 200ms ease; }
.x-glass.is-full .w { fill: var(--e-gold); }
.x-act { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* food: favourites, groups, diet plan */
.x-row button.x-star svg { fill: none; }
.x-row button.x-star.is-on { color: var(--e-gold); }
.x-row button.x-star.is-on svg { fill: currentColor; }
.x-grp { margin: 8px 0 -8px; }
#fres { display: grid; gap: 16px; }
.x-dplan h3 { margin: 0; }
.x-dplan .x-mealhead { margin-bottom: -8px; }
.x-dplan .x-note strong { font-weight: 500; color: var(--e-text); }
/* workout: plans, live logger, rest timer, history */
.x-row.is-on strong { color: var(--e-primary); }
.x-row .x-k.is-on { color: var(--e-gold); }
.x-big.is-sm { width: auto; min-height: 44px; padding: 0 16px; font-size: 14px; }
.x-set { display: grid; grid-template-columns: 28px 1fr 1fr 44px 36px; align-items: center; gap: 8px; }
.x-set > span { font: 500 13px/1 var(--e-sans); color: var(--e-muted); text-align: center; }
.x-set .x-input { min-height: 44px; padding: 0 10px; text-align: center; font-variant-numeric: tabular-nums; }
.x-set.is-head > span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.x-set .x-tk { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--e-outline); border-radius: 12px; background: transparent; color: var(--e-on, #fff); cursor: pointer; }
.x-set .x-tk[aria-pressed="true"] { background: var(--e-primary); border-color: var(--e-primary); }
.x-set .x-tk svg { width: 18px; height: 18px; }
.x-set .x-rm { width: 36px; height: 44px; border: 0; background: transparent; color: var(--e-muted); cursor: pointer; border-radius: 10px; font: 400 18px/1 var(--e-sans); }
.x-set.is-done .x-input { background: var(--e-wash); }
.x-nm { margin: 0; font: 500 17px/1.3 var(--e-sans); color: var(--e-text); }
.x-lib details { border-top: 1px solid var(--e-line); }
.x-lib summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none; }
.x-lib summary::-webkit-details-marker { display: none; }
.x-lib summary::after { content: "+"; font: 400 20px/1 var(--e-sans); color: var(--e-muted); }
.x-lib details[open] summary::after { content: "−"; }
.x-lib summary span { margin-left: 8px; margin-right: auto; letter-spacing: 0; }
.x-lib .x-row[hidden], .x-lib details[hidden] { display: none; }
.x-emo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--e-wash); font-size: 20px; line-height: 1; }
.x-pro { margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--e-gold); color: var(--e-text); letter-spacing: .08em; }
.x-wchart { display: block; width: 100%; height: 120px; overflow: visible; }
.x-wchart .ln { fill: none; stroke: var(--e-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.x-wchart .ar { fill: var(--e-wash); }
.x-split { display: flex; justify-content: space-between; gap: 8px; margin: -8px 0 0; font-size: 12px; }
.x-file { position: relative; overflow: hidden; }
.x-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.x-file:focus-within { outline: 2px solid var(--e-primary); outline-offset: 2px; }
.x-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.x-ph { display: grid; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 12px/1.3 var(--e-sans); color: var(--e-muted); text-align: left; }
.x-ph img, .x-ba img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--e-r-input); background: var(--e-input); }
.x-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.x-ba figure { margin: 0; display: grid; gap: 4px; }
.x-ba figcaption { font: 500 12px/1.3 var(--e-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--e-muted); }
.x-phbig { display: block; width: 100%; border-radius: var(--e-r-input); }
.x-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font: 400 15px/1.5 var(--e-sans); }
.x-tip { margin: 0; font: 500 13px/1.5 var(--e-sans); color: var(--e-gold); }
.x-rest { position: fixed; z-index: 105; left: 50%; bottom: calc(var(--e-safe-b) + 136px); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--e-primary-ink); color: #fff; font: 500 15px/1 var(--e-sans); font-variant-numeric: tabular-nums; box-shadow: var(--e-shadow); }
.x-rest[hidden] { display: none; }
.x-rest button { min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: inherit; font: 500 13px/1 var(--e-sans); cursor: pointer; }
[data-theme="dark"] .x-rest { color: var(--e-on); }
/* plan comparison, reminder banner */
.x-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.x-cmp > div { border: 1px solid var(--e-line); border-radius: 14px; padding: 12px; }
.x-cmp > .is-pro { border-color: var(--e-gold); }
.x-cmp ul { margin: 6px 0 0; padding-left: 18px; font: 400 13px/1.6 var(--e-sans); color: var(--e-muted); }
.x-banner { position: fixed; z-index: 120; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 16px; border-radius: 14px; background: var(--e-surface); border: 1px solid var(--e-gold); box-shadow: var(--e-shadow); font: 500 14px/1.4 var(--e-sans); color: var(--e-text); }
.x-banner[hidden] { display: none; }
.x-banner span { flex: 1; }
.x-banner button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--e-muted); font: 500 16px/1 var(--e-sans); cursor: pointer; }