/* DietMate demo. System fonts only, no external requests. */
:root {
  --brand: #12805c;
  --on-brand: #ffffff;
  --brand-ink: #117655;
  --brand-soft: #e3f0eb;
  --brand-softer: #f1f8f5;
  --brand-line: #b8d9cd;
  --bg: #e9eeeb;
  --surface: #ffffff;
  --surface-2: #f5f7f6;
  --ink: #15211c;
  --ink-2: #44524b;
  --ink-3: #5b6a63;
  --line: #e2e8e5;
  --line-2: #cbd5d0;
  --focus: #1d4ed8;
  --good: #1b7a45;
  --good-bg: #e3f4ea;
  --bad: #b42318;
  --st-on: #1f6fb0;
  --st-nudge: #dca32e;
  --st-off: #dc5a3c;
  --st-idle: #b6c0bb;
  --st-missed: #d6ddd9;
  --macro-p: #3566d6;
  --macro-c: #d9890f;
  --macro-f: #c0478a;
  --bar-h: 56px;
  --shadow: 0 1px 2px rgba(16, 40, 30, 0.06), 0 0 0 1px var(--line);
  --shadow-lg: 0 18px 40px -18px rgba(16, 40, 30, 0.35);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font);
  --font-friendly: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  color-scheme: light;
}
:root[data-font="classic"] { --font-head: Georgia, "Iowan Old Style", "Times New Roman", serif; }
:root[data-font="friendly"] { --font-head: var(--font-friendly); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.2; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 600; background: #fff; color: var(--ink); padding: 8px 12px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 8px; }
.noscript { padding: 24px; }

/* ------------------------------------------------------------ demo bar */
.demobar {
  position: relative;
  z-index: 300;
  height: var(--bar-h);
  /* Three columns: the side columns share the spare room equally, so the view switch sits in the middle,
     but neither can shrink below its content, so the switch never covers the demo marker. */
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: #101814;
  color: #f2f5f3;
}
.demobar-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.demobar-logo { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #2a3a33; font-weight: 800; font-size: 14px; color: #fff; flex: none; }
.demobar-name { white-space: nowrap; font-size: 14.5px; }
.demobar-by { color: #b9c6c0; }
.demo-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; background: #ffd23f; color: #2b2100; font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.demo-dot { width: 7px; height: 7px; border-radius: 50%; background: #2b2100; }
.viewswitch { display: flex; gap: 2px; background: #1d2924; padding: 3px; border-radius: 12px; }
.vs-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #cfdad5; font-weight: 600; font-size: 13.5px; padding: 7px 12px; border-radius: 9px; }
.vs-btn:hover { color: #fff; }
.vs-btn[aria-pressed="true"] { background: #f2f5f3; color: #101814; }
.vs-btn .ic { width: 18px; height: 18px; }
.demobar-actions { display: flex; gap: 6px; justify-content: flex-end; }
.db-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #34443d; background: transparent; color: #e5ece8; font-weight: 600; font-size: 13.5px; padding: 7px 12px; border-radius: 10px; }
.db-btn:hover { background: #1d2924; }
.db-btn .ic { width: 18px; height: 18px; }
.demobar :focus-visible { outline-color: #ffd23f; }
@media (max-width: 1179px) { .vs-both { display: none; } }
/* Icon-only buttons keep their text for screen readers (visually hidden, not display:none) and show a tooltip. */
@media (max-width: 980px) {
  .demobar-by { display: none; }
  .db-btn span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .db-btn { padding: 8px; }
}
@media (max-width: 760px) {
  :root { --bar-h: 52px; }
  .demobar { gap: 8px; padding: 0 10px; }
  .demobar-name { display: none; }
  .demo-pill { font-size: 11.5px; padding: 4px 8px; }
  .vs-btn span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .vs-btn { padding: 7px 9px; }
  .demobar-actions { gap: 4px; }
}
@media (max-width: 374px) {
  .demobar { gap: 6px; padding: 0 8px; }
  .demobar-logo { display: none; }
  .vs-btn { padding: 7px; }
  .db-btn { padding: 7px; }
}

/* ------------------------------------------------------------ stage */
.stage { height: calc(100vh - var(--bar-h)); height: calc(100dvh - var(--bar-h)); display: grid; outline: none; }
.stage[data-view="both"] { grid-template-columns: 448px minmax(0, 1fr); }
.stage[data-view="client"] { grid-template-columns: 1fr; }
.stage[data-view="client"] .pane-coach, .stage[data-view="coach"] .pane-client { display: none; }
.stage[data-view="coach"] { grid-template-columns: 1fr; }
.pane { min-width: 0; min-height: 0; }
.pane-client {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  background: radial-gradient(120% 70% at 50% 0%, var(--brand-softer), transparent 70%), var(--bg);
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.pane-coach { container: coach / inline-size; height: 100%; overflow: hidden; background: var(--surface-2); }
.pane-caption { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-3); text-align: center; }

.phone {
  position: relative;
  width: 396px;
  height: min(860px, calc(100vh - var(--bar-h) - 70px));
  min-height: 560px;
  padding: 12px;
  border-radius: 56px;
  background: #0e1412;
  box-shadow: inset 0 0 0 2px #2c3631, 0 0 0 1px rgba(0, 0, 0, 0.25), 0 40px 70px -30px rgba(10, 30, 20, 0.55);
  flex: none;
}
.phone::before { content: ""; position: absolute; right: -3px; top: 160px; width: 3px; height: 70px; border-radius: 0 3px 3px 0; background: #1d2622; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 44px; overflow: hidden; background: var(--surface); isolation: isolate; }
.phone-screen::after { content: ""; position: absolute; bottom: 7px; left: 50%; width: 124px; height: 5px; margin-left: -62px; border-radius: 3px; background: #15211c; opacity: 0.85; z-index: 95; pointer-events: none; }
.phone-island { position: absolute; top: 10px; left: 50%; width: 112px; height: 32px; margin-left: -56px; border-radius: 20px; background: #0e1412; z-index: 96; }
.client-root { position: absolute; inset: 0; }

@media (max-width: 760px) {
  .pane-client { padding: 0; border: 0; background: var(--surface); }
  .phone { width: 100%; height: 100%; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .phone::before, .phone-island, .phone-screen::after, .pane-caption { display: none; }
  .phone-screen { border-radius: 0; }
}

/* ------------------------------------------------------------ shared controls */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 650;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s, background 0.15s, transform 0.05s;
}
.btn:active { transform: translateY(1px); }
.btn .ic { width: 18px; height: 18px; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { filter: brightness(0.94); }
.btn-soft { background: var(--brand-soft); color: var(--brand-ink); }
.btn-soft:hover { filter: brightness(0.97); }
.btn-ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { color: var(--bad); }
.btn-danger-solid { background: var(--bad); color: #fff; }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.btn-xs { min-height: 32px; padding: 5px 10px; font-size: 12.5px; border-radius: 9px; gap: 4px; }
.btn-xs .ic { width: 16px; height: 16px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.icon-btn { position: relative; width: 40px; height: 40px; display: inline-grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); flex: none; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn-sm { width: 32px; height: 32px; border-radius: 9px; }
.icon-btn-sm .ic { width: 17px; height: 17px; }
.link-btn { border: 0; background: none; padding: 0; font-weight: 700; color: var(--brand-ink); text-align: left; display: inline-flex; align-items: center; gap: 2px; }
.link-btn:hover { text-decoration: underline; }
.link-btn.strong { color: var(--ink); }
.link-btn .ic { width: 16px; height: 16px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 650; white-space: nowrap; }
.chip:hover { border-color: var(--ink-3); }
.chip[aria-pressed="true"] { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.tag .ic { width: 14px; height: 14px; }
.tag-brand { background: var(--brand-soft); color: var(--brand-ink); border-color: transparent; }
.tag-mini { font-size: 10.5px; font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); padding: 1px 6px; border-radius: 6px; vertical-align: 1px; }
.pill-mini { display: inline-block; font-size: 11px; font-weight: 750; padding: 2px 7px; border-radius: 999px; background: #efeafa; color: #5b3f99; vertical-align: 1px; }
.pill-good { background: var(--good-bg); color: var(--good); }
.pill-warn { background: #fcf1d9; color: #7a4f00; }
.status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.status .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.status.st-on, .status.st-reviewed { color: #17558a; background: #e7f0fa; }
.status.st-nudge { color: #7a4f00; background: #fcf1d9; }
.status.st-off { color: #a3301c; background: #fde9e5; }
.status.st-idle { color: #4a5852; background: #edf0ef; }
.status.st-pending { color: #5b3f99; background: #efeafa; }
.status.st-new { color: #5b3f99; background: #efeafa; }
.status.st-archived { color: #4a5852; background: #edf0ef; }
.sim-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #6b4a00; background: #fff1c2; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.sim-tag .ic { width: 13px; height: 13px; }
.hint { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12.5px; color: #4d3800; background: #fff8e1; border: 1px dashed #c99700; border-radius: 10px; padding: 8px 10px; }
.hint .ic { width: 16px; height: 16px; margin-top: 1px; }
.fine { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12px; color: var(--ink-3); }
.fine .ic { width: 15px; height: 15px; margin-top: 1px; }
.empty { list-style: none; color: var(--ink-3); font-size: 13.5px; padding: 14px 4px; text-align: center; }
.good { color: var(--good); }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field-l { font-size: 13px; font-weight: 650; color: var(--ink-2); padding: 0; }
.field-l small { font-weight: 500; color: var(--ink-3); }
.field-help { font-size: 12px; color: var(--ink-3); }
.field-wide { grid-column: 1 / -1; }
.input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface); color: var(--ink); font-size: 15px; }
.input:hover { border-color: var(--ink-3); }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); border-radius: 11px; }
textarea.input { resize: vertical; min-height: 64px; line-height: 1.4; }
select.input { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.input-sm { min-height: 34px; padding: 5px 10px; font-size: 13.5px; }
.input-narrow { max-width: 120px; }
.input::placeholder { color: #7b8983; }
.input-unit { position: relative; display: flex; align-items: center; }
.input-unit .input { padding-right: 58px; }
.input-unit > span { position: absolute; right: 12px; font-size: 13px; color: var(--ink-3); pointer-events: none; }
.row-2, .row-3, .row-4 { display: grid; gap: 10px; }
.row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-error { margin: 0; color: var(--bad); font-size: 13px; font-weight: 650; }
.form-error:empty { display: none; }
.seg { display: flex; gap: 3px; background: var(--surface-2); padding: 3px; border-radius: 12px; border: 1px solid var(--line); }
.seg label { position: relative; flex: 1; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 34px; padding: 0 8px; border-radius: 9px; font-size: 13px; font-weight: 650; color: var(--ink-2); text-align: center; }
.seg input:checked + span { background: var(--surface); color: var(--brand-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.range { width: 100%; accent-color: var(--brand); height: 28px; }
.range-out { float: right; font-weight: 800; color: var(--brand-ink); }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; font-weight: 650; cursor: pointer; }
.switch input { position: absolute; left: 0; width: 42px; height: 24px; opacity: 0; margin: 0; cursor: pointer; }
.switch-ui { position: relative; width: 42px; height: 24px; border-radius: 12px; background: #b9c4be; flex: none; transition: background 0.2s; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s; }
.switch input:checked + .switch-ui { background: var(--brand); }
.switch input:checked + .switch-ui::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-ui { outline: 3px solid var(--focus); outline-offset: 2px; }
.check-line { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.check-line input, .assign-opt input, .pay-m input { accent-color: var(--brand); width: 18px; height: 18px; margin: 0; flex: none; }
.search { position: relative; display: flex; align-items: center; }
.search > .ic { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 38px; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 14px 0; }
.stepper .icon-btn { width: 46px; height: 46px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); }
.stepper output { display: flex; flex-direction: column; align-items: center; min-width: 84px; }
.stepper output strong { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stepper output span { font-size: 12px; color: var(--ink-3); }
.stepper-inline { justify-content: flex-start; margin: 0; gap: 10px; }
.stepper-inline .icon-btn { width: 36px; height: 36px; }
.stepper-inline output strong { font-size: 20px; }
.stepper-xs { gap: 2px; margin: 0; }
.stepper-xs .icon-btn { width: 28px; height: 28px; background: var(--surface-2); color: var(--ink-2); border-radius: 8px; }
.stepper-xs output { min-width: 26px; font-weight: 750; font-size: 13.5px; }
.meter { height: 8px; border-radius: 999px; background: #e9eeeb; overflow: hidden; }
.meter.is-over > span { background: var(--st-off); }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--mc, var(--brand)); transition: width 0.4s; }
.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lg.st-on { background: var(--st-on); }
.lg.st-off { background: var(--st-off); }
.lg.st-nudge { background: var(--st-nudge); }
.lg.st-idle { background: var(--st-idle); }
.lg.st-missed { background: var(--st-missed); }
/* New clients: a hatched grey, told apart from Inactive by texture rather than another hue. */
.lg.st-new, .dist-seg.st-new { background: repeating-linear-gradient(135deg, #8f9c96 0 3px, #e4e9e6 3px 6px); }
.lg-line { width: 14px; height: 0; border-top: 2px dashed var(--ink); border-radius: 0; }
.mm-p, .macro-p { --mc: var(--macro-p); }
.mm-c, .macro-c { --mc: var(--macro-c); }
.mm-f, .macro-f { --mc: var(--macro-f); }

.logo { width: var(--logo); height: var(--logo); display: inline-grid; place-items: center; flex: none; background: var(--brand); color: var(--on-brand); font-family: var(--font-head); font-weight: 800; font-size: calc(var(--logo) * 0.46); line-height: 1; letter-spacing: -0.02em; text-transform: none; }
.logo-round { border-radius: 50%; }
.logo-square { border-radius: 28%; }
.avatar { width: var(--av); height: var(--av); border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-weight: 750; font-size: calc(var(--av) * 0.38); letter-spacing: 0.01em; }
.diet-mark { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1.5px solid; border-radius: 3px; flex: none; margin-top: 2px; }
.diet-mark i { display: block; width: 6px; height: 6px; border-radius: 50%; }
.diet-veg { border-color: #1e8a3e; }
.diet-veg i { background: #1e8a3e; }
.diet-egg { border-color: #b7800f; }
.diet-egg i { background: #b7800f; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.diet-nonveg { border-color: #8b3a1a; }
.diet-nonveg i { width: 0; height: 0; border-radius: 0; background: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #8b3a1a; }

/* charts */
.chart { margin: 0; }
.chart { margin: 0; width: 100%; }
.chart svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.ch-grid { stroke: #e6ebe8; stroke-width: 1; }
.ch-base { stroke: var(--line-2); stroke-width: 1; }
.ch-axis { font-size: 10px; fill: var(--ink-3); font-family: var(--font); }
.ch-line { stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ch-area { fill: var(--brand); opacity: 0.08; }
.ch-dot { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
.ch-dot.is-last { fill: var(--brand); }
.ch-goal { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 4 4; }
.ch-goal-t { font-size: 10px; fill: var(--ink-2); font-weight: 700; font-family: var(--font); }
.ch-target { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 5 4; }
.ch-bar.st-on { fill: var(--st-on); }
.ch-bar.st-off { fill: var(--st-off); }
.ch-bar.st-missed { fill: var(--st-missed); }
.ch-bar.st-pre { fill: none; }
.ch-pt, .ch-bar-g { cursor: default; outline: none; }
.ch-pt:hover .ch-dot, .ch-pt:focus-visible .ch-dot { stroke-width: 4; }
.ch-bar-g:hover .ch-bar, .ch-bar-g:focus-visible .ch-bar { filter: brightness(0.9); }
.ch-bar-g:focus-visible rect { stroke: var(--focus); stroke-width: 2; }
.tip { position: fixed; z-index: 500; transform: translate(-50%, -100%); background: #15211c; color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 9px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity 0.12s; white-space: nowrap; }
.tip.is-on { opacity: 1; }

/* ------------------------------------------------------------ client app */
.ca-frame, .ca-render { position: absolute; inset: 0; }
.ca { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--surface-2); }
.ca .input { font-size: 16px; }
.ca-status { flex: none; height: 50px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 30px 7px 36px; background: var(--surface); font-size: 14.5px; font-weight: 650; letter-spacing: 0.01em; }
.ca-signin .ca-status { background: var(--brand-soft); }
.ca-sys { display: flex; align-items: center; gap: 6px; }
.sig { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.sig i { display: block; width: 3px; background: var(--ink); border-radius: 1px; }
.sig i:nth-child(1) { height: 4px; }
.sig i:nth-child(2) { height: 6px; }
.sig i:nth-child(3) { height: 8.5px; }
.sig i:nth-child(4) { height: 11px; }
.bat { width: 24px; height: 12px; border: 1.5px solid var(--ink); border-radius: 4px; padding: 1.5px; position: relative; opacity: 0.9; }
.bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: var(--ink); }
.bat i { display: block; width: 72%; height: 100%; background: var(--ink); border-radius: 1.5px; }
@media (max-width: 760px) { .ca-status { display: none; } }
.ca-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ca-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ca-brand-name { font-family: var(--font-head); font-weight: 750; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-head-actions { display: flex; align-items: center; gap: 2px; }
.avatar-btn { border: 0; background: none; padding: 4px; border-radius: 50%; }
.badge-dot { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface); }
.ca-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.ca-pad { display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 28px; }
.ca-tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px 8px; background: var(--surface); border-top: 1px solid var(--line); }
.phone .ca-tabs { padding-bottom: 22px; }
@media (max-width: 760px) { .phone .ca-tabs { padding-bottom: calc(8px + env(safe-area-inset-bottom)); } }
.ca-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border: 0; background: none; border-radius: 12px; color: var(--ink-3); font-size: 11px; font-weight: 650; }
.ca-tab .ic { width: 22px; height: 22px; padding: 3px 14px; box-sizing: content-box; border-radius: 999px; transition: background 0.2s; }
.ca-tab[aria-current="page"] { color: var(--brand-ink); }
.ca-tab[aria-current="page"] .ic { background: var(--brand-soft); stroke-width: 2.1; }
.tab-dot { position: absolute; top: 3px; right: calc(50% - 22px); width: 9px; height: 9px; border-radius: 50%; background: var(--bad); border: 2px solid var(--surface); }
.card { background: var(--surface); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }
.greet h1, .view-head h1 { margin: 0; font-family: var(--font-head); font-size: 23px; letter-spacing: -0.01em; }
.greet p, .view-head p { margin: 3px 0 0; color: var(--ink-3); font-size: 13.5px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 2px 2px 8px; }
.card .sec-head { margin: 0 0 10px; }
.sec-head h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--font-head); font-size: 16px; }
.sec-head h2 .ic { width: 18px; height: 18px; color: var(--brand-ink); }
.sec-head > span { font-size: 12.5px; color: var(--ink-3); text-align: right; }
.h3 { margin: 16px 0 6px; font-family: var(--font-head); font-size: 14.5px; }

.due-banner { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--brand); color: var(--on-brand); text-align: left; box-shadow: var(--shadow-lg); }
.due-banner > span { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.due-banner strong { font-size: 15px; }
.due-banner span span { font-size: 13px; }
.hero-top { display: flex; align-items: center; gap: 16px; }
.ring { position: relative; width: var(--ring); height: var(--ring); flex: none; }
.ring svg { display: block; }
.ring-track { stroke: var(--brand-soft); }
.ring-val { stroke: var(--brand); transition: stroke-dasharray 0.5s ease; }
.ring.is-over .ring-val { stroke: var(--st-off); }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-label strong { font-size: 27px; line-height: 1.05; font-variant-numeric: tabular-nums; font-family: var(--font-head); }
.ring-label span { font-size: 11.5px; color: var(--ink-3); font-weight: 650; }
.hero-stats { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hero-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding-bottom: 7px; border-bottom: 1px dashed var(--line); }
.hero-stats div:last-child { border: 0; padding: 0; }
.hero-stats dt { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.hero-stats dt .ic { width: 15px; height: 15px; }
.hero-stats dd { margin: 0; font-weight: 800; font-size: 15.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-stats small { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.macros { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.macro-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.macro-name { display: flex; align-items: center; gap: 6px; font-weight: 650; }
.macro-swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--mc); }
.macro-val { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.macro-val strong { color: var(--ink); }
.macro.is-over .macro-val strong { color: var(--bad); }
.coach-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--brand-softer); border: 1px solid var(--brand-line); }
.cn-who { margin: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.cn-who span { font-size: 12px; color: var(--ink-3); }
.cn-text { margin: 5px 0 0; font-size: 14px; }
.plan-list { display: flex; flex-direction: column; gap: 8px; }
.pm { display: grid; grid-template-columns: 52px minmax(0, 1fr); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.pm-time { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; background: var(--surface-2); font-size: 12px; font-weight: 750; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pm-time i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; }
.pm-time i .ic { width: 13px; height: 13px; stroke-width: 3; }
.pm.is-done .pm-time i { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pm-body { min-width: 0; padding: 10px 12px 12px; }
.pm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pm-top h3 { margin: 0; font-size: 15px; }
.pm-opt { font-size: 10.5px; font-weight: 750; color: var(--brand-ink); background: var(--brand-soft); padding: 2px 6px; border-radius: 6px; vertical-align: 2px; }
.pm-kcal { font-size: 13px; font-weight: 750; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-items { margin: 4px 0 9px; font-size: 13.5px; color: var(--ink-2); }
.pm.is-done .pm-items { color: var(--ink-3); }
.q { color: var(--ink-3); font-weight: 650; }
.pm-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pm-done { display: inline-flex; align-items: center; gap: 4px; margin-right: 2px; font-size: 13px; font-weight: 750; color: var(--good); }
.pm-done .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.water-card .glasses { display: grid; grid-template-columns: repeat(auto-fill, minmax(25px, 1fr)); gap: 4px; }
.glass { border: 0; background: none; padding: 2px; border-radius: 8px; }
.glass svg { display: block; width: 100%; height: 34px; }
.g-cup { fill: #f3f6f5; stroke: #b9c5bf; stroke-width: 1.5; stroke-linejoin: round; }
.g-water { fill: transparent; transition: fill 0.2s; }
.glass.is-full .g-cup { stroke: #2f86c4; fill: #eaf4fb; }
.glass.is-full .g-water { fill: #4aa3df; }
.glass:hover .g-cup { stroke: #2f86c4; }
.water-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.equation { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 14px 10px; }
.eq { flex: 1; display: flex; flex-direction: column; align-items: center; }
.eq-n { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.eq-l { font-size: 11px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.eq-op { font-size: 18px; color: var(--ink-3); font-weight: 600; }
.eq-res .eq-n { color: var(--brand-ink); }
.eq-res.is-over .eq-n { color: var(--bad); }
.macro-mini { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin-top: -6px; padding: 0 2px; font-size: 12.5px; color: var(--ink-2); }
.mm i, .nutri-m i, .pbt-m i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--mc); }
.datestrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ds-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 5px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.ds-day span { font-size: 10.5px; font-weight: 650; color: var(--ink-3); }
.ds-day strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.ds-day i { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.ds-day.has-log i { background: var(--brand); }
.ds-day[aria-pressed="true"] { background: var(--brand-ink); color: #fff; box-shadow: none; }
.ds-day[aria-pressed="true"] span { color: #fff; }
.ds-day[aria-pressed="true"] i { background: #fff; }
.meal-group { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.mg-head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px 8px; }
.mg-head h2 { margin: 0; font-size: 15px; }
.mg-head span { font-size: 13.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.log-item { display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 14px; border-top: 1px solid var(--line); }
.li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.li-main strong { font-size: 14px; font-weight: 650; }
.li-main span { font-size: 12px; color: var(--ink-3); }
.li-kcal { font-weight: 750; font-size: 14px; font-variant-numeric: tabular-nums; }
.add-row { width: 100%; display: flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--brand-ink); font-weight: 750; font-size: 13.5px; text-align: left; }
.add-row:hover { background: var(--brand-softer); }
.add-row .ic { width: 18px; height: 18px; }
.recipe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.recipe-card { position: relative; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); text-align: left; }
.recipe-card:hover { box-shadow: var(--shadow), 0 8px 20px -12px rgba(16, 40, 30, 0.4); }
.recipe-card .recipe-art { display: block; width: 100%; height: 108px; }
.rc-badge { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; background: var(--surface); color: var(--brand-ink); font-size: 11px; font-weight: 750; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.rc-badge .ic { width: 12px; height: 12px; }
.rc-body { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px 12px; }
.rc-name { display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.rc-meta { font-size: 12px; color: var(--ink-3); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.stat span { font-size: 12px; color: var(--ink-3); font-weight: 650; }
.stat strong { font-size: 22px; font-family: var(--font-head); font-variant-numeric: tabular-nums; }
.stat small { font-size: 11.5px; color: var(--ink-3); }
.stat-main { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.stat-main span, .stat-main small { color: var(--on-brand); }
.progress-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 2px 0; font-size: 13.5px; color: var(--ink-2); }
.progress-line .ic { width: 16px; height: 16px; color: var(--brand-ink); }
.inline-form { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; }
.field-inline { flex: 1; }
.water-sum { display: flex; align-items: center; gap: 12px; }
.water-sum .ic { width: 26px; height: 26px; color: #2f86c4; }
.water-sum div { display: flex; flex-direction: column; }
.water-sum span { font-size: 12.5px; color: var(--ink-3); }
.ci-form { display: flex; flex-direction: column; gap: 14px; }
.ci-form h2 { margin: 0; font-family: var(--font-head); font-size: 17px; }
.scale { border: 0; padding: 0; margin: 0; min-width: 0; }
.scale legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.scale-opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.scale-opt { position: relative; }
.scale-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.scale-opt span { display: grid; place-items: center; height: 40px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface); font-weight: 750; }
.scale-opt input:checked + span { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.scale-opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.scale-ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }
.photo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.photo-thumb svg { display: block; width: 48px; height: 64px; }
.ci-sent, .ci-next { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ci-sent h2, .ci-next h2 { margin: 4px 0 0; font-size: 17px; font-family: var(--font-head); }
.ci-sent p, .ci-next p { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); }
.ci-list { display: flex; flex-direction: column; gap: 8px; }
.ci-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.ci-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ci-facts, .ci-row-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--ink-2); }
.ci-facts span, .ci-row-facts span { display: inline-flex; align-items: center; gap: 4px; }
.ci-facts .ic, .ci-row-facts .ic { width: 14px; height: 14px; color: var(--ink-3); }
.ci-reply { display: flex; gap: 9px; padding: 10px; border-radius: 12px; background: var(--brand-softer); }
.ci-reply strong { font-size: 13px; }
.ci-reply p { margin: 2px 0 0; font-size: 13.5px; }
.ci-change { display: flex; align-items: center; gap: 4px; color: var(--brand-ink); font-weight: 650; font-size: 12.5px !important; }
.ci-change .ic { width: 14px; height: 14px; }

/* sign-in */
.signin { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 30px; background: linear-gradient(180deg, var(--brand-soft), var(--surface) 42%); }
.signin-brand { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 0 6px; text-align: center; }
.signin-brand h1 { margin: 10px 0 0; font-family: var(--font-head); font-size: 26px; letter-spacing: -0.01em; }
.signin-brand p { margin: 0; color: var(--ink-2); font-size: 14px; }
.signin-form, .cds-form { display: flex; flex-direction: column; gap: 12px; }
.demo-creds { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: #fff8e1; border: 1px dashed #c99700; color: #4d3800; font-size: 12.5px; }
.demo-creds .ic { width: 18px; height: 18px; margin-top: 1px; }
.demo-creds > div { display: flex; flex-direction: column; gap: 3px; }
.demo-creds strong { font-size: 13px; }
.demo-creds code { background: rgba(77, 56, 0, 0.08); padding: 1px 5px; border-radius: 5px; }
.privacy-line { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; font-size: 13px; color: var(--ink-2); text-align: center; }
.privacy-line .ic { width: 17px; height: 17px; color: var(--brand-ink); }

/* sheets inside the app */
.sheet-backdrop { position: absolute; inset: 0; z-index: 40; background: rgba(10, 20, 15, 0.42); animation: fade 0.2s ease; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 41; display: flex; flex-direction: column; max-height: 90%; background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16); animation: up 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet-tall { height: 90%; }
.sheet-handle { width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: #d3dbd7; flex: none; }
.sheet-head { display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 18px; flex: none; }
.sheet-head:has(.icon-btn:first-child[data-act="sheet-back"]) { padding-left: 6px; }
.sheet-head h2 { flex: 1; min-width: 0; margin: 0; font-family: var(--font-head); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 18px 18px; }
.sheet-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px 14px; border-top: 1px solid var(--line); flex: none; }
.phone .sheet-foot { padding-bottom: 26px; }
@media (max-width: 760px) { .phone .sheet-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); } }
.foot-select { flex: 1; }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.search-sheet { margin: 4px 0 10px; }
.add-count { margin: 8px 2px 2px; }
.food-list { list-style: none; margin: 0; padding: 0; }
.food-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.food-row:hover { background: var(--surface-2); }
.fr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-name { font-weight: 650; }
.fr-serv { font-size: 12.5px; color: var(--ink-3); }
.fr-kcal { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr-kcal small { font-weight: 600; color: var(--ink-3); }
.fr-plus { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); }
.add-detail { display: flex; flex-direction: column; gap: 10px; }
.nutri { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 6px; }
.nutri > div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 4px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.nutri strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.nutri span { font-size: 11.5px; color: var(--ink-3); }
.nutri-k strong { font-size: 22px; color: var(--brand-ink); }
.recipe-hero .recipe-art-lg { display: block; width: 100%; height: 168px; border-radius: 16px; }
.recipe-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 8px; }
.recipe-facts div { display: flex; flex-direction: column; padding: 8px 4px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.recipe-facts strong { font-size: 15px; }
.recipe-facts span { font-size: 11px; color: var(--ink-3); }
.recipe-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.ingredients { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.notif-list { list-style: none; margin: 10px 0 0; padding: 0; }
.notif { display: flex; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.notif > .ic { margin-top: 2px; color: var(--brand-ink); }
.notif p { margin: 0; font-size: 14px; }
.notif span { font-size: 12px; color: var(--ink-3); }
.notif.is-unread p { font-weight: 750; }
.me-card { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; }
.me-card > div { display: flex; flex-direction: column; }
.me-card strong { font-size: 16px; }
.me-card span { font-size: 13px; color: var(--ink-3); }
.me-sec { padding: 6px 0 14px; border-top: 1px solid var(--line); }
.me-sec .h3 { margin-top: 12px; }
.me-plan { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.me-plan > div { display: flex; flex-direction: column; }
.me-plan span { font-size: 12.5px; color: var(--ink-3); }
.inv-list { list-style: none; margin: 0; padding: 0; }
.inv-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.inv-row > .ic { color: var(--brand-ink); }
.inv-row > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inv-row > span:nth-child(2) span { font-size: 12px; color: var(--ink-3); }
.inv-amt { font-weight: 750; font-variant-numeric: tabular-nums; }
.privacy-box { display: flex; gap: 10px; padding-top: 14px; }
.privacy-box > .ic { color: var(--brand-ink); margin-top: 2px; }
.privacy-box p { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }
.pkg-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pkg { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface); text-align: left; }
.pkg.is-sel { border-color: var(--brand); background: var(--brand-softer); }
.pkg-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; background: var(--surface); }
.pkg.is-sel .pkg-radio { border: 5px solid var(--brand); }
.pkg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pkg-main span { font-size: 12.5px; color: var(--ink-3); }
.pkg-price { font-weight: 800; font-variant-numeric: tabular-nums; }
.test-banner { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: #fff8e1; border: 1px dashed #c99700; color: #4d3800; font-size: 13px; }
.test-banner > div { display: flex; flex-direction: column; gap: 2px; }
.test-banner strong { font-size: 14px; }
.sum { margin: 14px 0; }
.sum div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sum dt, .sum dd { margin: 0; }
.sum dd { font-variant-numeric: tabular-nums; }
.sum-total { font-size: 16px; font-weight: 800; border-bottom: 0 !important; }
.pay-methods { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }
.pay-methods legend { margin-bottom: 6px; }
.pay-m { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; font-weight: 650; }
.pay-m.is-sel { border-color: var(--brand); background: var(--brand-softer); }
.paid { padding: 16px 0 6px; text-align: center; }
.paid-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.paid-icon .ic { width: 32px; height: 32px; stroke-width: 2.6; }
.paid h3 { margin: 0 0 4px; font-size: 20px; font-family: var(--font-head); }
.paid p { margin: 2px 0; }
.ca-toasts { position: absolute; left: 0; right: 0; bottom: 96px; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.ca-toast { display: flex; align-items: center; gap: 6px; max-width: 86%; padding: 9px 14px; border-radius: 999px; background: #15211c; color: #fff; font-size: 13.5px; font-weight: 650; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); animation: pop 0.25s ease; transition: opacity 0.3s, transform 0.3s; }
.ca-toast .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.ca-toast.is-out { opacity: 0; transform: translateY(6px); }
.ca-push-layer { position: absolute; top: 48px; left: 10px; right: 10px; z-index: 97; pointer-events: none; }
@media (max-width: 760px) { .ca-push-layer { top: 8px; } }
.push { pointer-events: auto; width: 100%; display: flex; flex-direction: column; gap: 3px; padding: 10px 14px 11px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(0, 0, 0, 0.05); text-align: left; transform: translateY(-160%); transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); }
.push.is-in { transform: none; }
.push-top { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.push-now { margin-left: auto; font-weight: 500; color: var(--ink-3); }
.push-text { font-size: 14px; font-weight: 600; }
.push-sim { align-self: flex-start; font-size: 10.5px; font-weight: 750; color: #6b4a00; background: #fff1c2; padding: 1px 7px; border-radius: 999px; }

/* ------------------------------------------------------------ invoice */
.invoice { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 13.5px; }
.inv-test { margin-bottom: 12px; padding: 6px 10px; border-radius: 8px; background: #fff1c2; color: #6b4a00; font-size: 12px; font-weight: 750; text-align: center; }
.inv-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.inv-brand { display: flex; gap: 10px; min-width: 0; }
.inv-seller { display: flex; flex-direction: column; min-width: 0; }
.inv-seller > span { font-size: 12px; color: var(--ink-3); }
.inv-meta h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.inv-meta dl { display: grid; grid-template-columns: auto auto; gap: 2px 10px; margin: 0; font-size: 12.5px; }
.inv-meta dt { color: var(--ink-3); }
.inv-meta dd { margin: 0; font-weight: 650; }
.inv-to { display: flex; flex-direction: column; margin: 14px 0 4px; }
.inv-to span { font-size: 12px; color: var(--ink-3); }
.inv-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.inv-table th, .inv-table td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.inv-table thead th { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.inv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-table tfoot th, .inv-table tfoot td { border-bottom: 0; font-size: 15px; padding-top: 10px; }
.inv-sub { display: block; font-size: 11.5px; color: var(--ink-3); }
.inv-foot { margin: 12px 0 0; font-size: 12px; color: var(--ink-3); }

/* ------------------------------------------------------------ modal and toasts */
.modal-backdrop { position: fixed; top: var(--bar-h); left: 0; right: 0; bottom: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(10, 20, 15, 0.46); animation: fade 0.18s ease; }
.modal { display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100vh - var(--bar-h) - 32px); max-height: calc(100dvh - var(--bar-h) - 32px); background: var(--surface); border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.4); animation: pop 0.2s ease; }
.modal-wide { width: min(900px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 12px 6px 22px; }
.modal-head h2 { margin: 0; font-family: var(--font-head); font-size: 19px; }
.modal-body { overflow-y: auto; padding: 4px 22px 22px; }
.modal-body > p { margin: 0 0 12px; color: var(--ink-2); }
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.toast-root { position: fixed; right: 18px; bottom: 18px; z-index: 450; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; max-width: 380px; padding: 11px 16px; border-radius: 12px; background: #15211c; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); animation: pop 0.22s ease; transition: opacity 0.3s, transform 0.3s; }
.toast .ic { width: 18px; height: 18px; color: #9fe0bd; stroke-width: 2.4; }
.toast-info .ic { color: #ffd23f; }
.toast.is-out { opacity: 0; transform: translateY(6px); }
@media (max-width: 760px) {
  .toast-root { left: 12px; right: 12px; bottom: 96px; align-items: center; }
  /* On a phone only the newest message shows, so toasts never pile up over the app. */
  .toast-root .toast:not(:last-child) { display: none; }
}

/* about */
.about-lede { margin: 0 0 14px; font-size: 15px; color: var(--ink-2); }
.about-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; }
.about-cols .h3:first-child { margin-top: 0; }
.about-g { margin: 12px 0 2px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.tour { list-style: none; margin: 0; padding: 0; }
.tour li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.tour li > div { display: flex; flex-direction: column; }
.tour strong { font-size: 14px; }
.tour span { font-size: 12.5px; color: var(--ink-3); }
.about-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.about-list li { display: flex; gap: 10px; }
.about-list .ic { color: var(--brand-ink); margin-top: 1px; }
.about-list-plain li { display: list-item; margin-left: 18px; list-style: disc; }
@media (max-width: 760px) { .about-cols { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ dashboard */
.coach-root { height: 100%; }
.cd { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100%; background: var(--surface-2); }
.cd-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 16px 12px; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); }
.cd-brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 6px; }
.cd-brand-t { display: flex; flex-direction: column; min-width: 0; }
.cd-brand-t strong { font-family: var(--font-head); font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-brand-t span { font-size: 12px; color: var(--ink-3); }
.cd-menu { display: none; margin-left: auto; }
.cd-nav { display: flex; flex-direction: column; gap: 2px; }
.cd-nav-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font-weight: 650; font-size: 14px; text-align: left; }
.cd-nav-item:hover { background: var(--surface-2); }
.cd-nav-item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bad); color: #fff; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.cd-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.cd-data-note { display: flex; gap: 6px; margin: 0; padding: 0 6px; font-size: 12px; color: var(--ink-3); }
.cd-data-note .ic { width: 15px; height: 15px; color: var(--brand-ink); }
.cd-me { display: flex; align-items: center; gap: 9px; padding: 8px 4px 8px 8px; border-radius: 12px; background: var(--surface-2); }
.cd-me > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cd-me strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-me span { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-main { container: main / inline-size; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cd-content { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 24px 28px 40px; }
.cd-content > *, .tab-body > *, .ca-pad > * { flex-shrink: 0; }
.cd-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.cd-h1 { margin: 0; font-family: var(--font-head); font-size: 25px; letter-spacing: -0.015em; outline: none; }
.cd-sub { margin: 4px 0 0; color: var(--ink-3); font-size: 14px; }
.cd-head-actions { display: flex; gap: 8px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); text-align: left; min-width: 0; }
button.kpi:hover { box-shadow: var(--shadow), 0 10px 24px -16px rgba(16, 40, 30, 0.45); }
.kpi-l { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--ink-3); }
.kpi-l .ic { width: 17px; height: 17px; color: var(--brand-ink); }
.kpi strong { font-family: var(--font-head); font-size: 26px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi-s { font-size: 12.5px; color: var(--ink-3); }
.kpi-alert { box-shadow: inset 0 0 0 2px var(--brand-line), var(--shadow); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.panel { min-width: 0; padding: 16px 18px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.panel-head h2 { margin: 0; font-family: var(--font-head); font-size: 16px; }
.empty-panel { display: grid; place-items: center; min-height: 220px; color: var(--ink-3); }
.att-list { list-style: none; margin: 0; padding: 0; }
.att { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.att:first-child { border-top: 0; padding-top: 2px; }
.att-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.att-main span { font-size: 12.5px; color: var(--ink-3); }
.dist { display: flex; gap: 2px; height: 30px; border-radius: 10px; overflow: hidden; }
.dist-seg { min-width: 12px; border: 0; padding: 0; }
.dist-seg.st-on { background: var(--st-on); }
.dist-seg.st-nudge { background: var(--st-nudge); }
.dist-seg.st-off { background: var(--st-off); }
.dist-seg.st-idle { background: var(--st-idle); }
.dist-seg:hover { filter: brightness(0.92); }
.legend-row { margin-top: 10px; }
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.activity li > .ic { width: 16px; height: 16px; color: var(--ink-3); }
.activity li > span { flex: 1; min-width: 0; }
.activity time { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.activity em { font-style: normal; font-size: 11px; font-weight: 750; color: #6b4a00; background: #fff1c2; padding: 1px 6px; border-radius: 6px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.toolbar .search { flex: 1 1 240px; max-width: 340px; }
.table-wrap { overflow-x: auto; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 11.5px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #fafbfa; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-client { display: flex; align-items: center; gap: 10px; }
.cell-client > div, .cell-2 { display: flex; flex-direction: column; }
.cell-client span, .cell-2 span { font-size: 12.5px; color: var(--ink-3); }
.cell-2 .good { color: var(--good); }
.cell-week { display: inline-flex; align-items: center; gap: 8px; }
.week-strip { display: inline-flex; gap: 3px; }
.ws { display: block; width: 10px; height: 20px; border-radius: 3px; }
.ws.st-on { background: var(--st-on); }
.ws.st-off { background: var(--st-off); }
.ws.st-missed { background: var(--st-missed); }
.ws.st-pre { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.back-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; margin-bottom: -8px; padding: 4px 0; border: 0; background: none; color: var(--ink-2); font-weight: 650; }
.back-link .ic { width: 18px; height: 18px; }
.profile-head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.ph-main { flex: 1 1 340px; min-width: 220px; }
.ph-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tab { padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-3); font-weight: 650; font-size: 14px; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--brand-ink); border-bottom-color: var(--brand); }
.tab-body { display: flex; flex-direction: column; gap: 16px; }
.member-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.member-row > div:first-child { display: flex; flex-direction: column; }
.dg { padding: 8px 0; border-top: 1px solid var(--line); }
.dg-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.dg-items { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; color: var(--ink-2); }
.dg-items li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.target-big { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.target-big strong { font-family: var(--font-head); font-size: 32px; font-variant-numeric: tabular-nums; }
.target-big span { color: var(--ink-3); }
.plan-sum { list-style: none; margin: 0; padding: 0; }
.plan-sum li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.plan-sum li:first-child { border-top: 0; padding-top: 0; }
.ps-time { flex: none; width: 44px; padding-top: 1px; font-size: 12.5px; font-weight: 750; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.plan-sum p { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }
.opt-l { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 5px; background: var(--surface-2); color: var(--ink-2); font-size: 11px; font-weight: 800; }
.plan-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--brand-softer); font-size: 13.5px; }
.plan-note .ic { width: 17px; height: 17px; color: var(--brand-ink); margin-top: 1px; }
.ci-table { display: flex; flex-direction: column; gap: 10px; }
.ci-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ci-row-head { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 8px; }
.ci-row-reply { display: flex; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); }
.ci-row-reply .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--brand-ink); }
.review { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.review-list { padding: 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.seg-tabs { display: flex; gap: 3px; margin-bottom: 8px; padding: 3px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.seg-tabs .tab { flex: 1; border: 0; border-radius: 9px; padding: 8px; }
.seg-tabs .tab[aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.rl { list-style: none; margin: 0; padding: 0; }
.rl-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 12px; background: none; text-align: left; }
.rl-item:hover { background: var(--surface-2); }
.rl-item[aria-current="true"] { background: var(--brand-soft); }
.rl-item > .ic { width: 16px; height: 16px; color: var(--ink-3); }
.rl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rl-main span { font-size: 12.5px; color: var(--ink-3); }
.ci-detail { display: flex; flex-direction: column; gap: 14px; }
.cid-head { display: flex; align-items: center; gap: 12px; }
.cid-head > div { flex: 1; min-width: 0; }
.cid-head h2 { margin: 0; font-family: var(--font-head); font-size: 19px; }
.cid-head p { margin: 2px 0 0; font-size: 13px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.facts > div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.facts dt { font-size: 12px; color: var(--ink-3); font-weight: 650; }
.facts dd { margin: 0; font-size: 16px; font-weight: 800; }
.facts span { font-size: 11.5px; color: var(--ink-3); }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quotes figure { margin: 0; }
.quotes figcaption { margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.quotes blockquote { margin: 0; padding: 10px 12px; border-left: 3px solid var(--brand); border-radius: 0 10px 10px 0; background: var(--surface-2); font-size: 14px; }
.cid-chart { max-width: 520px; }
.cid-reply { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.cid-reply .h3 { margin: 0; }
.cid-reply .chips { flex-wrap: wrap; overflow: visible; }
.cid-reply .chip { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; }
.adjust { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.cid-replied { padding: 12px 14px; border-radius: 12px; background: var(--brand-softer); }
.cid-replied .h3 { margin: 0 0 4px; }
.cid-replied p { margin: 0; }
.plans { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.plan-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-card { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; }
.plan-card span { font-size: 12.5px; color: var(--ink-3); }
.plan-card:hover { border-color: var(--line-2); }
.plan-card[aria-current="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-line); }
.builder { display: flex; flex-direction: column; gap: 14px; padding-bottom: 0; }
.pb-top { display: flex; align-items: flex-end; gap: 10px; }
.pb-name { flex: 1; }
.pb-name .input { font-weight: 700; font-size: 17px; }
.pb-top .pill-mini { margin-bottom: 12px; }
.pb-targets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pb-meals { display: flex; flex-direction: column; gap: 10px; }
.pb-meal { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.pbm-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.pbm-head h3 { margin: 0; font-size: 15px; min-width: 104px; }
.pbm-time .input { width: 112px; }
.pbm-opts { display: flex; gap: 4px; }
.opt-tab { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 650; }
.opt-tab[aria-selected="true"] { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.opt-add { padding: 3px 6px; }
.opt-add .ic { width: 15px; height: 15px; }
.pbm-kcal { margin-left: auto; font-weight: 750; font-variant-numeric: tabular-nums; }
.pb-items { list-style: none; margin: 8px 0 0; padding: 0; }
.pb-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); }
.pbi-name { display: flex; flex-direction: column; min-width: 0; }
.pbi-name strong { font-size: 14px; font-weight: 650; }
.pbi-name span { font-size: 12px; color: var(--ink-3); }
.pbi-kcal { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pb-empty { padding: 8px 0; border-top: 1px dashed var(--line); }
.pbm-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pb-total { position: sticky; bottom: -40px; z-index: 2; margin: 0 -18px; padding: 14px 18px 18px; border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; background: var(--surface); box-shadow: 0 -10px 20px -14px rgba(16, 40, 30, 0.3); display: flex; flex-direction: column; gap: 10px; }
.pbt-row { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.pbt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pbt > span { font-size: 12px; font-weight: 650; color: var(--ink-3); }
.pbt strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.pbt small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.recipe-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ra-card { display: flex; gap: 12px; padding: 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.ra-card .recipe-art { width: 92px; height: 92px; border-radius: 12px; flex: none; }
.ra-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ra-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.ra-top strong { font-size: 14.5px; line-height: 1.3; }
.ra-actions { display: flex; gap: 4px; margin-top: auto; }
.recipe-form { display: flex; flex-direction: column; gap: 12px; }
.check-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.check-chip { position: relative; }
.check-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.check-chip span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 650; color: var(--ink-2); }
.check-chip input:checked + span { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.check-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.art-picks { display: flex; flex-wrap: wrap; gap: 10px; }
.art-pick { position: relative; }
.art-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.art-pick span[aria-hidden] { display: block; width: 32px; height: 32px; border-radius: 50%; }
.art-pick input:checked + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.art-pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.assign-list { display: flex; flex-direction: column; gap: 6px; }
.assign-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; }
.assign-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-softer); }
.assign-opt:has(input:disabled) { opacity: 0.7; cursor: default; }
.ao-main { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.ao-main span { font-size: 12.5px; color: var(--ink-3); }
.ao-main span:only-child { font-size: 14px; color: var(--ink); }
.invite-link { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); overflow-wrap: anywhere; }
.pkg-edit { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.pkg-row { display: grid; grid-template-columns: 1.4fr 0.9fr 0.7fr 2fr auto; align-items: end; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pkg-row .field-wide { grid-column: auto; }
.gateway { display: flex; gap: 10px; margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.gateway > .ic { color: var(--brand-ink); margin-top: 1px; }
.gateway > div { display: flex; flex-direction: column; }
.gateway span { font-size: 13px; color: var(--ink-2); }
.pay-table code { font-size: 12.5px; }
.brand-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.brand-form { display: flex; flex-direction: column; gap: 14px; }
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.swatch { position: relative; }
.swatch input[type="radio"] { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch span[aria-hidden] { display: block; width: 34px; height: 34px; border-radius: 50%; }
.swatch input:checked + span { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }
.swatch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 5px; }
.swatch-custom input[type="color"] { width: 38px; height: 38px; padding: 2px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); cursor: pointer; }
.swatch-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.swatch-custom input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.field-hex { width: 104px; }
.contrast-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12.5px; color: var(--good); }
.contrast-note .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.font-classic { font-family: Georgia, "Times New Roman", serif; }
.font-friendly { font-family: var(--font-friendly); }
.bp-phone { max-width: 230px; margin: 4px auto 12px; overflow: hidden; border: 8px solid #101614; border-radius: 28px; background: var(--surface); }
.bp-url { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px; background: var(--surface-2); font-size: 11px; color: var(--ink-3); }
.bp-url .ic { width: 12px; height: 12px; }
.bp-screen { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 26px; background: linear-gradient(180deg, var(--brand-soft), var(--surface) 62%); text-align: center; }
.bp-screen strong { margin-top: 4px; font-family: var(--font-head); font-size: 18px; }
.bp-screen .bp-tagline { font-size: 12px; color: var(--ink-2); }
.bp-screen .bp-input { width: 100%; height: 26px; margin-top: 4px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); }
.bp-screen .bp-btn { width: 100%; margin-top: 4px; padding: 7px; border-radius: 8px; background: var(--brand); color: var(--on-brand); font-weight: 750; font-size: 12.5px; }
.cd-signin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 100%; overflow-y: auto; background: var(--surface); }
.cds-brand { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 48px; background: var(--brand); color: var(--on-brand); }
.cds-brand .logo { background: var(--on-brand); color: var(--brand); }
.cds-brand h1 { margin: 10px 0 0; font-family: var(--font-head); font-size: 32px; letter-spacing: -0.015em; }
.cds-brand p { margin: 0; font-size: 16px; }
.cds-points { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.cds-points li { display: flex; align-items: center; gap: 10px; }
.cds-form { justify-content: center; width: 100%; max-width: 440px; margin: 0 auto; padding: 48px 32px; }
.cds-form h2 { margin: 0 0 4px; font-family: var(--font-head); font-size: 22px; }

/* dashboard: rail sidebar when the pane is narrower */
@container coach (max-width: 1100px) {
  .cd { grid-template-columns: 72px minmax(0, 1fr); }
  .cd-side { align-items: center; padding: 14px 8px; }
  .cd-brand { padding: 2px 0 6px; }
  .cd-brand-t, .cd-nav-l, .cd-data-note span, .cd-me > div { display: none; }
  .cd-nav { width: 100%; }
  .cd-nav-item { justify-content: center; padding: 11px 0; }
  .nav-badge { position: absolute; top: 3px; right: 6px; min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 5px; }
  .cd-data-note { padding: 0; justify-content: center; }
  .cd-me { flex-direction: column; padding: 6px; background: none; }
}
/* dashboard: top bar with a menu on phones */
@container coach (max-width: 700px) {
  .cd { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: 58px minmax(0, 1fr); }
  .cd-main { grid-row: 2; }
  .cd-side { z-index: 20; height: 58px; flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .cd-brand { flex: 1; padding: 0; }
  .cd-brand-t { display: flex; }
  .cd-menu { display: inline-grid; }
  .cd-nav, .cd-side-foot { display: none; }
  .nav-open .cd-side { position: absolute; top: 0; left: 0; right: 0; height: auto; max-height: 100%; flex-direction: column; align-items: stretch; padding-bottom: 14px; overflow-y: auto; box-shadow: var(--shadow-lg); }
  .nav-open .cd-brand { flex: none; min-height: 40px; }
  .nav-open .cd-nav { display: flex; }
  .nav-open .cd-side-foot { display: flex; margin-top: 6px; }
  .nav-open .cd-nav-item { justify-content: flex-start; padding: 10px 12px; }
  .nav-open .cd-nav-l, .nav-open .cd-data-note span, .nav-open .cd-me > div { display: initial; }
  .nav-open .cd-me { flex-direction: row; background: var(--surface-2); padding: 8px; }
  .nav-open .cd-me > div { display: flex; }
  .nav-open .nav-badge { position: static; margin-left: auto; }
  .cd-signin { grid-template-columns: minmax(0, 1fr); }
  .cds-brand { padding: 26px 20px; }
  .cds-brand h1 { font-size: 26px; }
  .cds-points { display: none; }
  .cds-form { padding: 22px 18px 32px; }
}
@container main (max-width: 960px) {
  .grid-2, .review, .plans, .brand-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-cards { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .plan-cards li { flex: 0 0 210px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkg-row .field-wide { grid-column: 1 / -1; }
}
@container main (max-width: 760px) {
  .kpis, .kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-content { padding: 18px 14px 32px; gap: 14px; }
  .cd-h1 { font-size: 22px; }
  .pb-targets, .row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-total { position: static; }
  .pbt-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pbt-row .pbt:first-child { grid-column: 1 / -1; }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clients-table thead, .pay-table thead { display: none; }
  .clients-table, .clients-table tbody, .clients-table tr, .pay-table, .pay-table tbody, .pay-table tr { display: block; }
  .clients-table tr, .pay-table tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .clients-table td, .pay-table td { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border: 0; text-align: right; }
  .clients-table td::before, .pay-table td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 650; color: var(--ink-3); text-align: left; }
  .clients-table td:first-child::before { display: none; }
  .clients-table td:first-child { justify-content: flex-start; text-align: left; padding-bottom: 8px; }
  .cell-2 { align-items: flex-end; }
  .table tbody tr:hover td { background: none; }
}
@container main (max-width: 560px) {
  .row-seg { grid-template-columns: minmax(0, 1fr); }
}
@container main (max-width: 520px) {
  .pb-item { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pbi-kcal { display: none; }
  .ph-actions .btn { flex: 1 1 auto; }
  .cd-head-actions { width: 100%; }
  .cd-head-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .ws, .lg, .dist-seg, .ch-bar { forced-color-adjust: none; }
}

/* ------------------------------------------------------------ review round 2 */
.archived-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #edf0ef; color: var(--ink-2); font-size: 13.5px; }
.archived-bar > span { flex: 1; min-width: 200px; }
.archived-bar > .ic { color: var(--ink-3); }
.ph-manage { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.ph-manage .btn { min-height: 30px; padding: 4px 10px; }
.plan-scope { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.plan-scope > .ic { width: 17px; height: 17px; margin-top: 1px; flex: none; }
.plan-scope > span { flex: 1; min-width: 0; }
.plan-scope-own { background: var(--brand-softer); border-color: var(--brand-line); }
.plan-scope-own > .ic { color: var(--brand-ink); }
.builder > .plan-scope { margin-top: 0; align-items: center; }
.pc-own { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; color: var(--brand-ink) !important; }
.pc-own .ic { width: 14px; height: 14px; }
.plan-card.is-personal { border-style: dashed; }
.member-pending { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #fff8e1; border: 1px dashed #c99700; }
.member-pending:first-child { margin-top: 0; }
.awaiting { margin-top: 16px; }
.pos-help { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 10px; }
.pos-help .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.sum-note { margin: -6px 0 12px; }
.pay-due { display: flex; align-items: center; gap: 12px; border: 1px solid var(--brand-line); background: var(--brand-softer); }
.pay-due > .ic { width: 24px; height: 24px; color: var(--brand-ink); flex: none; }
.pay-due > div { flex: 1; min-width: 0; }
.pay-due h2 { margin: 0; font-family: var(--font-head); font-size: 15px; }
.pay-due p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.pay-due p strong { color: var(--ink); font-size: 13.5px; }
.me-due { margin-bottom: 8px; background: #fff8e1; border: 1px dashed #c99700; }
.inv-to > span:last-child { font-style: italic; }