/* FitPro demo · MakinForU. System fonts only, no external requests. */
*, *::before, *::after { box-sizing: border-box; }
:root {
  color-scheme: light;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --app-font: var(--font-ui);
  --app-stretch: normal;
  /* brand tokens are recomputed live by brand.js */
  --brand: #c2410c; --brand-ink: #ffffff; --brand-deep: #8a2e08; --brand-strong: #c2410c; --brand-on-dark: #f0703a;
  --brand-soft: #f9e8e1; --brand-soft-dark: #3b2219; --brand-ring: rgba(194, 65, 12, .35);
  /* light (owner) surfaces */
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f6f7f9; --border: #e4e7ec; --border-strong: #cfd4dc;
  --text: #14171c; --text-2: #475467; --muted: #5d6676;
  --good: #067647; --good-bg: #e3f4ea; --warn: #8a5a00; --warn-bg: #fff3d6; --bad: #b42318; --bad-bg: #fde8e7;
  --info: #2f54c4; --info-bg: #e8eefc; --risk: #9a3412; --risk-bg: #ffedd5;
  --focus: #2563eb;
  /* chart tokens */
  --chart-series: var(--brand-strong); --grid: #eaecf0; --axis: #d0d5dd; --lbl: #5d6676; --val: #344054; --ref: #667085; --heat-0: #f0f2f5;
  --demobar-h: 52px;
}
html, body { height: 100%; }
body { margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.45; color: var(--text); background: #e9ebef; overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
img, svg { flex: none; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
p { margin: 0; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: #fff; color: #111; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
.boot, .noscript { padding: 48px 20px; text-align: center; color: var(--text-2); }
.boot .btn { margin-top: 16px; }
[hidden] { display: none !important; }

/* ---------------- demo bar ---------------- */
.demobar { position: relative; z-index: 40; height: var(--demobar-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: #111317; color: #e9ebef; }
.demobar :focus-visible { outline-color: #93c5fd; }
.demobar__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.demo-pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: #fbbf24; color: #1f1500; font-size: 12.5px; font-weight: 800; white-space: nowrap; letter-spacing: .01em; }
.demo-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: #1f1500; }
.demobar__name { font-size: 13.5px; color: #c9ced6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demobar__name b { color: #fff; }
.demobar__by { color: #9aa3af; }
#demobar-controls { display: flex; align-items: center; gap: 10px; }
.vswitch { display: inline-flex; background: #24272e; border-radius: 10px; padding: 3px; gap: 2px; }
.vswitch__b { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #c9ced6; font-size: 13px; font-weight: 600; white-space: nowrap; }
.vswitch__b:hover { color: #fff; }
.vswitch__b.is-on { background: #fff; color: #111317; }
.dtools { display: flex; gap: 2px; }
.dtool { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; color: #c9ced6; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.dtool:hover { background: #24272e; color: #fff; }

/* ---------------- stage ---------------- */
.stage { height: calc(100vh - var(--demobar-h)); height: calc(100dvh - var(--demobar-h)); position: relative; overflow: hidden; overflow: clip; outline: none; }
.stage--signin { overflow: auto; background: radial-gradient(1200px 600px at 85% 0%, var(--brand-soft) 0%, transparent 60%), linear-gradient(180deg, #f6f7f9, #eceef2); }
.stage--member { background: radial-gradient(900px 600px at 30% 10%, #ffffff 0%, transparent 70%), radial-gradient(700px 500px at 80% 90%, var(--brand-soft) 0%, transparent 70%), #e7e9ee; }
.stage--owner { background: var(--bg); }
.stage--split { background: #e7e9ee; }

.stage-m { height: 100%; display: grid; grid-template-columns: auto minmax(300px, 380px); gap: 56px; justify-content: center; align-items: safe center; padding: 20px; overflow: auto; }
.device { position: relative; width: 399px; height: min(844px, calc(100dvh - var(--demobar-h) - 40px)); min-height: 560px; padding: 12px; border-radius: 56px; background: #0b0b0d; box-shadow: 0 40px 80px -20px rgba(16, 24, 40, .45), 0 0 0 2px #2c2c30 inset, 0 0 0 1px #000; }
.device__frame { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.device__island { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 112px; height: 32px; border-radius: 20px; background: #000; }
.device__screen { position: relative; width: 100%; height: 100%; border-radius: 44px; overflow: hidden; overflow: clip; background: #0c0e11; }
.device__screen::after { content: ""; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 128px; height: 5px; border-radius: 3px; background: currentColor; opacity: .5; pointer-events: none; z-index: 30; color: #f2f4f7; }
.tourpanel { max-width: 380px; align-self: center; }

.stage-split { height: 100%; display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.split__phone { display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 10px; min-height: 0; padding: 12px 16px; overflow: auto; }
.split__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.device--split { height: min(812px, calc(100dvh - var(--demobar-h) - 56px)); }
.split__owner { min-width: 0; height: 100%; border-left: 1px solid var(--border-strong); background: var(--bg); box-shadow: -8px 0 24px rgba(16, 24, 40, .06); }
.o-root { height: 100%; container-type: inline-size; container-name: owner; }

/* ---------------- shared controls (light) ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; font-size: 14px; font-weight: 650; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .15s, box-shadow .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.btn--primary:hover:not(:disabled) { box-shadow: 0 0 0 4px var(--brand-ring); }
.btn--ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn--danger { background: #b42318; color: #fff; }
.btn--danger:hover { background: #912018; }
.btn--inverse { background: var(--brand-ink); color: var(--brand); }
.btn--ghost-ink { background: transparent; color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand-ink) 55%, transparent); }
.btn--sm { height: 36px; padding: 0 12px; font-size: 13.5px; }
.btn--xs { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; gap: 5px; }
.btn--lg { height: 48px; font-size: 15.5px; }
.btn--block { width: 100%; }
.btn--block + .btn--block { margin-top: 8px; }
.iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 0; background: transparent; color: var(--text-2); }
.iconbtn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.iconbtn:disabled { opacity: .35; cursor: not-allowed; }
.linkbtn { display: inline-flex; align-items: center; gap: 3px; background: none; border: 0; padding: 0; color: var(--brand-strong); font-size: 13px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.field input, .field select, .field textarea, .sel select, .assign select, .tbl input, .tbl select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: #fff; color: var(--text); font-size: 14px; }
.field textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.field input::placeholder, .tbl input::placeholder, textarea::placeholder { color: #737b8a; }
.hint { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.field--wide { grid-column: span 2; }
.field--full { grid-column: 1 / -1; }
.stack-form > * + * { margin-top: 14px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 14px; }
.inline-form .field { flex: 1 1 150px; }
.radios { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.radios legend, .swatches legend, .fonts legend, .m-methods legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.radios--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.radios--row { display: flex; flex-wrap: wrap; }
.radio { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; background: #fff; }
.radio:has(input:checked) { border-color: var(--brand-strong); background: var(--brand-soft); }
.radio:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.radio input { accent-color: var(--brand-strong); width: 17px; height: 17px; margin: 0; }
.radio input:focus-visible { outline: none; }
.radio span { display: flex; flex-direction: column; }
.radio b { font-size: 14px; }
.radio small { font-size: 12px; color: var(--muted); }
.radio--sm { padding: 8px 12px; }
.radio--sm span { flex-direction: row; align-items: center; gap: 6px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand-strong); flex: none; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch span[aria-hidden] { position: absolute; inset: 0; border-radius: 12px; background: #c4cad4; transition: background-color .15s; }
.switch span[aria-hidden]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.switch input:checked + span { background: var(--brand-strong); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; margin-bottom: 12px; }
.seg button { border: 0; background: transparent; padding: 7px 12px; border-radius: 7px; font-size: 13px; font-weight: 650; color: var(--text-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.seg button.is-on { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .14); }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; font-weight: 650; color: var(--text-2); white-space: nowrap; }
.tag--soft { background: var(--brand-soft); color: var(--brand-strong); border-color: transparent; }
.meter { display: block; height: 8px; border-radius: 4px; background: #e9ecf0; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; background: var(--brand-strong); }
.test-note { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border: 1px dashed #d79a00; border-radius: 10px; background: #fff8e6; color: #6b4300; font-size: 12.5px; }
.test-note .ic { margin-top: 1px; }
.dl { margin: 0; }
.dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.dl div:last-child { border-bottom: 0; }
.dl dt { color: var(--text-2); font-size: 13.5px; }
.dl dd { margin: 0; font-size: 13.5px; font-weight: 650; text-align: right; }
.dl dd small { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.dl .dl__total dt, .dl .dl__total dd { font-size: 15.5px; font-weight: 800; color: var(--text); }
.summary { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; }
.sub { font-size: 12.5px; color: var(--muted); }
.empty { color: var(--muted); font-size: 13.5px; padding: 14px 0; text-align: center; list-style: none; }

/* pills & avatars */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; line-height: 1.3; }
.st-active { background: var(--good-bg); color: var(--good); }
.st-expiring { background: var(--warn-bg); color: var(--warn); }
.st-expired { background: var(--bad-bg); color: var(--bad); }
.st-frozen { background: var(--info-bg); color: var(--info); }
.st-risk { background: var(--risk-bg); color: var(--risk); }
.st-muted { background: var(--surface-2); color: var(--muted); }
.pills { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.av { display: inline-grid; place-items: center; border-radius: 50%; color: #1d2939; font-weight: 700; flex: none; letter-spacing: -.02em; }
.logo { display: inline-grid; place-items: center; flex: none; border-radius: 30%; background: var(--brand); color: var(--brand-ink); font-weight: 800; letter-spacing: -.03em; font-family: var(--app-font); }

/* ---------------- modal, toast, tooltip ---------------- */
.modal-back { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(16, 24, 40, .55); animation: fade .15s ease; }
.modal { width: min(560px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: #fff; color: var(--text); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, .3); animation: pop .18s ease; }
.modal--wide { width: min(760px, 100%); }
.modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 10px; }
.modal__head h2 { font-size: 18px; font-weight: 750; }
.modal__kicker { margin-bottom: 4px; font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--brand-strong); }
.modal__body { padding: 4px 20px 20px; overflow: auto; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); }
.modal__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.toasts { position: fixed; left: 50%; top: calc(var(--demobar-h) + 12px); transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #111317; color: #fff; font-size: 13.5px; font-weight: 550; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: drop .2s ease; transition: opacity .3s, transform .3s; }
.toast .ic { color: #6ee7a8; }
.toast--warn { background: #7c2d12; }
.toast--warn .ic { color: #fed7aa; }
.toast.is-out { opacity: 0; transform: translateY(-6px); }
.tip { position: fixed; z-index: 300; display: none; max-width: 260px; padding: 6px 9px; border-radius: 8px; background: #111317; color: #fff; font-size: 12.5px; font-weight: 550; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }

/* ---------------- charts ---------------- */
.chart { position: relative; width: 100%; }
.chart svg { display: block; overflow: visible; }
.ch-grid { stroke: var(--grid); stroke-width: 1; }
.ch-axis { stroke: var(--axis); stroke-width: 1; }
.ch-lbl { fill: var(--lbl); font-size: 11px; font-family: var(--font-ui); }
.ch-lbl--row { font-size: 12.5px; fill: var(--val); }
.ch-val { fill: var(--val); font-size: 11px; font-weight: 650; font-family: var(--font-ui); }
.ch-bar { fill: var(--chart-series); transition: opacity .12s; }
.bar.is-dim .ch-bar { fill: color-mix(in srgb, var(--chart-series) 58%, var(--surface)); }
.bar:hover .ch-bar { opacity: .82; }
.ch-zero { fill: var(--axis); }
.hit { fill: transparent; }
.ch-ref { stroke: var(--ref); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ch-reflbl { fill: var(--val); font-size: 11px; font-weight: 650; font-family: var(--font-ui); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.ch-line { fill: none; stroke: var(--chart-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-area { fill: var(--chart-series); opacity: .1; }
.ch-dot { fill: var(--chart-series); stroke: var(--surface); stroke-width: 2; opacity: 0; pointer-events: none; }
.pt:hover .ch-dot, .pt.is-last .ch-dot { opacity: 1; }
.ch-cross { stroke: var(--axis); stroke-width: 1; opacity: 0; pointer-events: none; }
.pt:hover .ch-cross { opacity: 1; }
.cell:hover { stroke: var(--text); stroke-width: 1.5; }
.heat-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.heat-legend i { width: 18px; height: 10px; border-radius: 2px; }
.heat-legend span:first-child { margin-right: 4px; }
.heat-legend span:last-child { margin-left: 4px; }
.spark path { fill: none; stroke: var(--chart-series); stroke-width: 1.6; stroke-linejoin: round; }
.spark circle { fill: var(--chart-series); }
.ring__track { fill: none; stroke: color-mix(in srgb, var(--brand-ink) 25%, transparent); }
.ring__fill { fill: none; stroke: var(--brand-ink); stroke-linecap: round; }
.ring__lbl { fill: var(--brand-ink); font-size: 19px; font-weight: 800; dominant-baseline: middle; font-family: var(--app-font); }
.tview { margin-top: 8px; }
.tview summary { display: inline-block; font-size: 12.5px; font-weight: 650; color: var(--text-2); cursor: pointer; }
.tview__wrap { max-height: 220px; overflow: auto; margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; }
.tbl--mini { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl--mini th, .tbl--mini td { padding: 5px 10px; text-align: left; border-bottom: 1px solid var(--border); font-weight: 500; }
.tbl--mini thead th { font-weight: 700; background: var(--surface-2); position: sticky; top: 0; }

/* ---------------- sign in ---------------- */
.signin { max-width: 1120px; min-height: 100%; margin: 0 auto; padding: 40px 24px 56px; display: grid; grid-template-columns: 1.1fr .9fr; grid-template-areas: "head card" "more card"; column-gap: 56px; row-gap: 0; align-content: center; align-items: center; }
.signin__head { grid-area: head; align-self: end; }
.signin__more { grid-area: more; align-self: start; }
.signin__card { grid-area: card; }
.eyebrow { font-size: 12.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-strong); }
.signin__head h1 { margin: 10px 0 14px; font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; }
.signin__lede { font-size: 17px; color: var(--text-2); line-height: 1.55; max-width: 52ch; }
.signin__sides { list-style: none; padding: 0; margin: 22px 0; }
.signin__sides li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border-strong); }
.signin__sides li:last-child { border-bottom: 1px solid var(--border-strong); }
.signin__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--border); color: var(--brand-strong); flex: none; }
.signin__sides b { display: block; font-size: 15.5px; }
.signin__sides span { font-size: 14px; color: var(--text-2); }
.signin__honest { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; font-size: 13px; color: var(--text-2); }
.signin__honest .ic { margin-top: 1px; color: var(--brand-strong); }
.signin__card { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 28px; box-shadow: 0 24px 60px -20px rgba(16, 24, 40, .25); }
.signin__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.signin__brand b { display: block; font-size: 17px; font-family: var(--app-font); }
.signin__brand small { font-size: 12.5px; color: var(--muted); }
.signin__card h2 { font-size: 22px; font-weight: 750; margin-bottom: 14px; }
.signin__card .field { margin-bottom: 12px; }
.rolepick { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rolepick__o { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border: 1.5px solid var(--border-strong); border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 650; color: var(--text-2); }
.rolepick__o input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rolepick__o.is-on { border-color: var(--brand-strong); background: var(--brand-soft); color: var(--brand-strong); }
.rolepick__o:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.creds { margin-top: 18px; padding: 12px 14px; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 12px; font-size: 13.5px; }
.creds p { margin-bottom: 6px; }
.creds dl { margin: 0 0 8px; }
.creds dl div { display: flex; gap: 8px; padding: 2px 0; }
.creds dt { min-width: 64px; color: var(--text-2); }
.creds dd { margin: 0; }
.creds code { font-family: var(--font-mono); font-size: 13px; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
.fine { margin-top: 12px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---------------- tour ---------------- */
.tour { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 20px 20px 18px; box-shadow: 0 20px 50px -24px rgba(16, 24, 40, .3); }
.modal .tour { border: 0; padding: 0; box-shadow: none; }
.tour h2 { margin: 4px 0 4px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.tour .eyebrow { font-size: 11.5px; }
.tour__lede { font-size: 13.5px !important; }
.tour__lede { font-size: 14px; color: var(--text-2); }
.tour__progress { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; }
.tour__progress .meter { flex: 1; }
.tour__progress small { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tour__list { list-style: none; padding: 0; margin: 0; }
.tour__list li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.tour__check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); color: #fff; }
.tour__list li.is-done .tour__check { background: var(--good); border-color: var(--good); }
.tour__list b { display: block; font-size: 14px; }
.tour__list small { display: block; font-size: 12.5px; color: var(--text-2); }
.tour__list li.is-done b { color: var(--text-2); }
.tour__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ---------------- GST invoice ---------------- */
.invoice { position: relative; overflow: hidden; background: #fff; color: #14171c; border: 1px solid #e4e7ec; border-radius: 12px; padding: 20px; font-family: var(--font-ui); font-size: 13px; line-height: 1.45; }
.invoice__wm { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-22deg); font-size: 72px; font-weight: 900; letter-spacing: .18em; color: rgba(17, 24, 39, .05); pointer-events: none; }
.invoice__head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #e4e7ec; }
.invoice__brand { display: flex; gap: 10px; align-items: flex-start; }
.invoice__brand b { display: block; font-size: 15px; font-family: var(--app-font); }
.invoice__brand .logo { flex: none; }
.invoice__brand div span { display: block; font-size: 11.5px; color: #475467; max-width: 34ch; }
.invoice__meta h3 { margin-bottom: 6px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; text-align: right; }
.invoice__meta dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 2px 12px; font-size: 12px; }
.invoice__meta dt { color: #475467; }
.invoice__meta dd { margin: 0; font-weight: 650; text-align: right; }
.invoice__to { margin: 14px 0; padding: 10px 12px; background: #f6f7f9; border-radius: 8px; }
.invoice__to span { display: block; font-size: 11.5px; color: #475467; }
.invoice__to b { display: block; font-size: 14px; }
.invoice__tbl { width: 100%; border-collapse: collapse; }
.invoice__tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #475467; border-bottom: 1px solid #cfd4dc; padding: 8px 6px; }
.invoice__tbl td { padding: 9px 6px; border-bottom: 1px solid #eaecf0; vertical-align: top; }
.invoice__tbl td small { display: block; font-size: 11.5px; color: #475467; }
.invoice__tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invoice__tbl tfoot td { border-bottom: 0; padding: 4px 6px; color: #344054; }
.invoice__tbl .invoice__total td { padding-top: 10px; font-size: 15px; font-weight: 800; color: #14171c; border-top: 2px solid #14171c; }
.invoice__words { margin: 12px 0; font-size: 12px; color: #344054; }
.invoice__sign { display: grid; justify-items: end; gap: 2px; margin: 4px 0 12px; font-size: 11.5px; color: #475467; text-align: right; }
.invoice__sign span:first-child { font-weight: 650; color: #344054; }
.invoice__sign i { display: block; width: 150px; height: 26px; border-bottom: 1px solid #98a2b3; }
.invoice__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed #cfd4dc; font-size: 11.5px; color: #475467; }
.invoice__demo { margin-top: 8px; font-size: 11px; color: #5d6676; font-style: italic; }
.print-area { display: none; }

/* =====================================================================
   MEMBER APP
   ===================================================================== */
.m-shell {
  --m-bg: #0c0e11; --m-surface: #16191e; --m-surface-2: #1f2329; --m-border: #2a2f37; --m-seg-on: #353b45;
  --m-text: #f2f4f7; --m-text-2: #b9c0cb; --m-muted: #959dab; --m-accent: var(--brand-on-dark);
  --m-good: #4ade80; --m-warn: #fbbf24; --m-bad: #f87171; --m-rest: #2b313a;
  --surface: var(--m-surface); --grid: #2a2f37; --axis: #3a404a; --lbl: #a1a9b5; --val: #dde1e7; --ref: #a1a9b5; --chart-series: var(--brand-on-dark);
  --text: var(--m-text); --text-2: var(--m-text-2); --muted: var(--m-muted); --border: var(--m-border); --surface-2: var(--m-surface-2);
  --focus: #93c5fd;
  color-scheme: dark;
  /* clip, not hidden: a clipping box that is not a scroll container cannot be scrolled by focus */
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; overflow: clip;
  background: var(--m-bg); color: var(--m-text); font-family: var(--app-font); font-stretch: var(--app-stretch); font-size: 15px;
}
.m-shell[data-mtheme="light"] {
  --m-bg: #f2f3f6; --m-surface: #ffffff; --m-surface-2: #eef0f3; --m-border: #e1e4e9; --m-seg-on: #ffffff;
  --m-text: #111418; --m-text-2: #4a5260; --m-muted: #5d6676; --m-accent: var(--brand-strong);
  --m-good: #15803d; --m-warn: #a15c00; --m-bad: #b91c1c; --m-rest: #111418;
  --grid: #e7e9ee; --axis: #d0d5dd; --lbl: #5d6676; --val: #344054; --ref: #667085; --chart-series: var(--brand-strong);
  --focus: #2563eb;
  color-scheme: light;
}
.device__screen:has(.m-shell[data-mtheme="light"])::after { color: #111418; }
.m-status { flex: none; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; font-size: 15px; font-weight: 650; font-family: var(--font-ui); letter-spacing: -.01em; }
.m-status__l { display: inline-flex; align-items: center; gap: 6px; }
.m-status__demo { padding: 1px 5px; border-radius: 5px; background: #fbbf24; color: #1f1500; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; }
.m-status__icons { display: inline-flex; align-items: center; gap: 5px; }
.m-status__icons svg { fill: currentColor; }
.m-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.m-screen { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 18px; scrollbar-width: thin; scrollbar-color: var(--m-border) transparent; }
.m-tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px 22px; background: var(--m-surface); border-top: 1px solid var(--m-border); }
.m-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px; border: 0; border-radius: 10px; background: none; color: var(--m-muted); font-size: 10.5px; font-weight: 650; }
.m-tab.is-on { color: var(--m-accent); }
.m-tab:hover { color: var(--m-text); }
.m-tab.is-on:hover { color: var(--m-accent); }

.m-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 16px 2px; }
.m-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-brand b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-brand small { display: block; font-size: 12px; color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.m-iconbtn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--m-surface-2); color: var(--m-text); flex: none; }
.m-iconbtn:disabled { opacity: .35; cursor: not-allowed; }
.m-iconbtn--sm { width: 32px; height: 32px; }
.m-badge { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--m-bg); font-family: var(--font-ui); }
.m-hello { padding: 12px 18px 10px; }
.m-date { font-size: 13px; color: var(--m-text-2); }
.m-hello h1 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; outline: none; }
.m-pad { padding: 0 16px; }
.m-card { margin: 0 16px 14px; padding: 16px; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: 18px; }
.m-pad .m-card { margin: 0 0 14px; }
.m-h2 { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 750; margin-bottom: 2px; }
.m-sub { font-size: 12.5px; color: var(--m-text-2); margin-bottom: 10px; }
.m-muted { color: var(--m-text-2); font-size: 13.5px; }
.m-fine { margin-top: 10px; font-size: 12px; color: var(--m-muted); text-align: center; }
.m-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 16px 12px; padding: 10px 12px; border-radius: 12px; background: var(--m-surface-2); color: var(--m-text-2); font-size: 12.5px; }
.m-pad .m-note, .m-summary .m-note { margin: 0 0 14px; }
.m-note .ic { margin-top: 1px; flex: none; }
.m-empty { color: var(--m-muted); font-size: 13.5px; padding: 12px 0; list-style: none; text-align: center; }
.m-weekcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; }
.m-streak { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--m-warn); }
.m-week { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.m-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.m-day__l { font-size: 11px; font-weight: 650; color: var(--m-muted); }
.m-day__d { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--m-surface-2); font-size: 13px; font-weight: 700; color: var(--m-text-2); }
.m-day.is-done .m-day__d { background: var(--brand); color: var(--brand-ink); }
.m-day.is-today .m-day__d { box-shadow: inset 0 0 0 2px var(--m-accent); color: var(--m-text); }
.m-day.is-future .m-day__d { background: transparent; box-shadow: inset 0 0 0 1px var(--m-border); }
.m-resume { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 0 16px 14px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--m-accent); background: var(--m-surface-2); color: var(--m-text); text-align: left; }
.m-resume > span:nth-child(2) { flex: 1; }
.m-resume b { display: block; font-size: 14.5px; }
.m-resume small { font-size: 12.5px; color: var(--m-text-2); font-variant-numeric: tabular-nums; }
.m-resume__go { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 750; color: var(--m-accent); }
.m-hero { position: relative; overflow: hidden; margin: 0 16px 14px; padding: 18px 18px 16px; border-radius: 22px; background: linear-gradient(140deg, var(--brand) 0%, var(--brand-deep) 100%); color: var(--brand-ink); isolation: isolate; }
.m-hero::before { content: ""; position: absolute; right: -60px; top: -70px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid color-mix(in srgb, var(--brand-ink) 9%, transparent); z-index: -1; }
.m-hero__art { position: absolute; right: 14px; top: 10px; z-index: -1; opacity: .2; transform: rotate(-28deg); }
.m-hero__art .ic { stroke-width: 2.4; }
.m-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.m-hero h2 { margin: 6px 0 6px; font-size: 30px; font-weight: 850; letter-spacing: -.03em; }
.m-hero__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; }
.m-hero__list { list-style: none; padding: 0; margin: 12px 0 14px; }
.m-hero__list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--brand-ink) 22%, transparent); font-size: 14px; font-weight: 600; }
.m-hero__list li span { font-variant-numeric: tabular-nums; }
.m-hero__list li.more { font-weight: 700; }
.m-hero__next { margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--brand-ink) 22%, transparent); font-size: 13.5px; font-weight: 650; }
.m-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.m-hero .btn:focus-visible { outline-color: var(--brand-ink); }
.m-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 16px 14px; }
.m-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border-radius: 18px; border: 1px solid var(--m-border); background: var(--m-surface); color: var(--m-text); text-align: left; min-width: 0; }
.m-tile__ic { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 12px; background: var(--brand-soft-dark); color: var(--m-accent); }
.m-shell[data-mtheme="light"] .m-tile__ic, .m-shell[data-mtheme="light"] .m-ann__ic, .m-shell[data-mtheme="light"] .m-libcard__ic, .m-shell[data-mtheme="light"] .w-ex__ic { background: var(--brand-soft); }
.m-tile b { font-size: 15px; }
.m-tile small { font-size: 12.5px; color: var(--m-text-2); }
.m-tile--warn { border-color: color-mix(in srgb, var(--m-warn) 60%, var(--m-border)); }
.m-tile--warn small { color: var(--m-warn); font-weight: 650; }
.m-meter { display: block; width: 100%; height: 6px; margin-top: 10px; border-radius: 3px; background: var(--m-surface-2); overflow: hidden; }
.m-meter i { display: block; height: 100%; border-radius: 3px; background: var(--m-accent); }
.m-sec { padding: 4px 16px 6px; }
.m-sec--flush { padding: 4px 0 6px; }
.m-sec__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.m-sec__head h2 { font-size: 17px; font-weight: 750; }
.m-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.m-stats--4 { grid-template-columns: repeat(2, 1fr); }
.m-stats > div { padding: 12px; border-radius: 14px; background: var(--m-surface); border: 1px solid var(--m-border); min-width: 0; }
.m-stats b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.m-stats small { font-size: 12px; color: var(--m-text-2); }
.m-anns { list-style: none; padding: 0; margin: 0; }
.m-ann { display: flex; gap: 12px; padding: 12px 14px; margin-bottom: 10px; border-radius: 16px; background: var(--m-surface); border: 1px solid var(--m-border); }
.m-ann__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft-dark); color: var(--m-accent); flex: none; }
.m-ann b { font-size: 14.5px; }
.m-ann p { margin: 2px 0; font-size: 13px; color: var(--m-text-2); }
.m-ann small { font-size: 12px; color: var(--m-muted); }
.m-subhead { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; padding: 6px 12px 10px; }
.m-subhead h1 { font-size: 17px; font-weight: 750; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.m-inbox { list-style: none; padding: 0 16px; margin: 0; }
.m-inbox li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--m-border); }
.m-inbox li.is-new b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--m-accent); vertical-align: middle; }
.m-inbox__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--m-surface-2); color: var(--m-accent); flex: none; }
.m-inbox b { font-size: 14.5px; }
.m-inbox p { margin: 2px 0 4px; font-size: 13.5px; color: var(--m-text-2); }
.m-inbox small { font-size: 12px; color: var(--m-muted); }

/* plans */
.m-plan h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 10px 0 2px; }
.m-plan__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--m-surface-2); color: var(--m-text-2); font-size: 12px; font-weight: 650; }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.m-progressline { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; font-size: 13px; font-weight: 650; white-space: nowrap; }
.m-progressline .m-meter { margin: 0; }
.m-days { list-style: none; padding: 0; margin: 8px 0 0; }
.m-dayrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; border: 0; border-top: 1px solid var(--m-border); background: none; color: var(--m-text); text-align: left; }
.m-dayrow > span:nth-child(2) { flex: 1; }
.m-dayrow__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--m-surface-2); font-size: 13px; font-weight: 750; }
.m-dayrow b { display: block; font-size: 15px; }
.m-dayrow small { display: block; font-size: 12.5px; color: var(--m-text-2); }
.m-dayrow .ic:last-child { color: var(--m-muted); }
.m-tag { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: 11px; font-weight: 750; white-space: nowrap; vertical-align: middle; }
.m-lib { list-style: none; padding: 0; margin: 0; }
.m-lib li { margin-bottom: 10px; }
.m-libcard { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 16px; border: 1px solid var(--m-border); background: var(--m-surface); color: var(--m-text); text-align: left; }
.m-libcard > span:nth-child(2) { flex: 1; min-width: 0; }
.m-libcard__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft-dark); color: var(--m-accent); flex: none; }
.m-libcard b { display: block; font-size: 15px; }
.m-libcard small { display: block; font-size: 12.5px; color: var(--m-text-2); }
.m-libcard__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 12.5px; color: var(--m-muted); }
.m-libcard .ic:last-child { color: var(--m-muted); }
.m-seg { display: flex; gap: 4px; padding: 4px; margin: 2px 0 14px; border-radius: 12px; background: var(--m-surface-2); overflow-x: auto; scrollbar-width: none; }
.m-seg button { flex: 1 0 auto; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--m-text-2); font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.m-seg button.is-on { background: var(--m-seg-on); color: var(--m-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.m-seg--sm { margin: 0; flex: none; }
.m-seg--sm button { padding: 6px 12px; font-size: 13px; }
.m-exlist { list-style: none; padding: 0; margin: 0 0 16px; }
.m-exlist li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--m-border); }
.m-exlist__n { font-size: 13px; font-weight: 750; color: var(--m-muted); padding-top: 2px; }
.m-exlist b { font-size: 15px; }
.m-exlist small { display: block; font-size: 12.5px; color: var(--m-text-2); }
.m-exlist__note { display: flex !important; gap: 4px; align-items: center; margin-top: 4px; color: var(--m-text-2); }
.m-exlist__sr { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* workout logger */
.w-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.w-head { flex: none; display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 4px 14px 10px; border-bottom: 1px solid var(--m-border); }
.w-head__t { display: flex; flex-direction: column; text-align: center; min-width: 0; }
.w-head__t b { font-size: 16px; font-weight: 750; outline: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-head__t small { font-size: 12px; color: var(--m-muted); }
.w-stats { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--m-border); }
.w-stats small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--m-muted); }
.w-stats b { font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.w-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 130px; scrollbar-width: thin; }
.w-ex { padding: 14px 12px 8px; margin-bottom: 12px; border-radius: 16px; background: var(--m-surface); border: 1px solid var(--m-border); }
.w-ex__head { display: flex; align-items: center; gap: 10px; }
.w-ex__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-soft-dark); color: var(--m-accent); flex: none; }
.w-ex__head h3 { font-size: 15.5px; font-weight: 750; }
.w-ex__head p { font-size: 12px; color: var(--m-text-2); }
.w-note { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 2px; padding: 8px 10px; border-radius: 10px; background: var(--m-surface-2); font-size: 12.5px; color: var(--m-text-2); }
.w-note .ic { margin-top: 2px; }
.w-sets { width: 100%; border-collapse: separate; border-spacing: 0 4px; margin-top: 6px; }
.w-sets th { padding: 4px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--m-muted); text-align: center; }
.w-sets th .ic { vertical-align: -2px; }
.w-sets td { padding: 2px 3px; text-align: center; }
.w-sets td:first-child { border-radius: 10px 0 0 10px; }
.w-sets td:last-child { border-radius: 0 10px 10px 0; }
.w-n { width: 34px; font-size: 14px; font-weight: 750; }
.w-prev { width: 72px; font-size: 12.5px; color: var(--m-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.w-in { width: 100%; max-width: 72px; height: 38px; padding: 0 4px; border: 1.5px solid transparent; border-radius: 9px; background: var(--m-surface-2); color: var(--m-text); font-size: 15.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.w-in::placeholder { color: var(--m-muted); font-weight: 600; }
.w-in:focus { border-color: var(--m-accent); outline: none; }
.w-in:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.w-sets tr.is-done td { background: color-mix(in srgb, #22c55e 15%, transparent); }
.w-sets tr.is-done .w-in { background: transparent; }
.w-tick { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; border: 0; background: var(--m-surface-2); color: var(--m-muted); }
.w-tick[aria-pressed="true"] { background: #16a34a; color: #fff; }
.w-ex__foot { display: flex; gap: 18px; padding-top: 4px; }
.w-link { display: inline-flex; align-items: center; gap: 4px; padding: 8px 2px; border: 0; background: none; color: var(--m-accent); font-size: 13.5px; font-weight: 700; }
.w-discard { margin-top: 4px; color: var(--m-bad) !important; background: transparent !important; border-color: color-mix(in srgb, var(--m-bad) 45%, transparent) !important; }
.w-rest { position: absolute; left: 12px; right: 12px; bottom: 26px; z-index: 10; padding: 10px 12px 12px; border-radius: 16px; background: var(--m-rest); color: #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); animation: rise .2s ease; }
.w-rest__bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.w-rest__bar i { display: block; height: 100%; background: #fff; border-radius: 2px; transition: width 1s linear; }
.w-rest__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.w-rest__lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; }
.w-rest__lbl b { font-size: 19px; font-variant-numeric: tabular-nums; }
.w-rest__btns { display: inline-flex; gap: 6px; }
.w-chipbtn { height: 34px; padding: 0 10px; border-radius: 9px; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; font-weight: 750; }
.w-chipbtn--solid { background: #fff; color: #111418; }
.w-rest :focus-visible { outline-color: #93c5fd; }

/* summary */
.m-summary { padding: 18px 16px 30px; text-align: center; }
.m-summary h1 { font-size: 26px; font-weight: 850; letter-spacing: -.02em; outline: none; }
.m-summary .m-muted { margin: 4px 0 18px; }
.m-summary__medal { display: grid; place-items: center; width: 84px; height: 84px; margin: 8px auto 16px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 10px var(--brand-soft-dark); }
.m-shell[data-mtheme="light"] .m-summary__medal { box-shadow: 0 0 0 10px var(--brand-soft); }
.m-summary .m-card { margin: 0 0 14px; text-align: left; }
.m-prs h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 750; color: var(--m-warn); }
.m-prs ul { list-style: none; padding: 0; margin: 8px 0 0; }
.m-prs li { padding: 8px 0; border-top: 1px solid var(--m-border); }
.m-prs li b { display: block; font-size: 14.5px; }
.m-prs li span { font-size: 13px; color: var(--m-text-2); }
.m-breakdown { list-style: none; padding: 0; margin: 8px 0 0; }
.m-breakdown li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--m-border); font-size: 13.5px; }
.m-breakdown li span:last-child { color: var(--m-text-2); text-align: right; }
.m-summary__btns { margin-top: 6px; }

/* progress */
.m-cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.m-cal__nav { display: flex; align-items: center; gap: 6px; }
.m-cal__nav b { min-width: 118px; text-align: center; font-size: 13.5px; }
.m-cal__wk, .m-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.m-cal__wk { margin-bottom: 6px; font-size: 11px; font-weight: 700; color: var(--m-muted); }
.m-cal__c { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-size: 12.5px; font-weight: 600; color: var(--m-text-2); }
.m-cal__c.is-v { background: var(--brand); color: var(--brand-ink); font-weight: 800; }
.m-cal__c.is-t { box-shadow: inset 0 0 0 2px var(--m-accent); }
.m-cal__c.is-f { color: var(--m-muted); }
.m-cal + .m-sub { margin: 10px 0 0; }
.m-prlist { list-style: none; padding: 0; margin: 6px 0 0; }
.m-prlist li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--m-border); }
.m-prlist b { display: block; font-size: 14px; }
.m-prlist small { display: block; font-size: 12px; color: var(--m-muted); font-weight: 500; }
.m-prlist__v { text-align: right; font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; }
.m-prlist__v small { color: var(--m-text-2); }
.field--dark { margin-bottom: 14px; }
.field--dark label { color: var(--m-text-2); }
.field--dark select { background: var(--m-surface-2); border-color: var(--m-border); color: var(--m-text); height: 44px; }
.is-up { color: var(--m-good) !important; }
.is-down { color: var(--m-bad) !important; }
.m-hist { list-style: none; padding: 0; margin: 6px 0 0; }
.m-hist li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--m-border); font-size: 13px; }
.m-hist li span:last-child { color: var(--m-text-2); text-align: right; font-variant-numeric: tabular-nums; }
.m-logw { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--m-border); }
.m-logw label { font-size: 13px; font-weight: 650; color: var(--m-text-2); }
.m-logw__row { display: flex; gap: 8px; margin-top: 6px; }
.m-logw input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--m-border); border-radius: 10px; background: var(--m-surface-2); color: var(--m-text); font-size: 15px; font-weight: 650; }
.m-logw input::placeholder { color: var(--m-muted); }
.m-tbl { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
.m-tbl th, .m-tbl td { padding: 8px 6px; border-bottom: 1px solid var(--m-border); text-align: right; font-variant-numeric: tabular-nums; }
.m-tbl th:first-child { text-align: left; }
.m-tbl thead th { font-size: 12px; color: var(--m-muted); font-weight: 700; }
.m-shell .tview summary { color: var(--m-text-2); }
.m-shell .tview__wrap { border-color: var(--m-border); }
.m-shell .tbl--mini th, .m-shell .tbl--mini td { border-color: var(--m-border); }
.m-shell .tbl--mini thead th { background: var(--m-surface-2); }

/* membership */
.m-pass { position: relative; overflow: hidden; margin-bottom: 14px; padding: 18px; border-radius: 22px; background: linear-gradient(140deg, var(--brand) 0%, var(--brand-deep) 100%); color: var(--brand-ink); isolation: isolate; }
.m-pass::before { content: ""; position: absolute; left: -40px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: color-mix(in srgb, var(--brand-ink) 8%, transparent); z-index: -1; }
.m-pass__top { display: flex; align-items: center; gap: 10px; }
.m-pass__top b { font-size: 15px; }
.m-pass__top .logo { background: var(--brand-ink); color: var(--brand); }
.m-pass__st { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand-ink) 18%, transparent); font-size: 12px; font-weight: 750; }
.m-pass__mid { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 16px; }
.m-pass small { display: block; font-size: 12px; font-weight: 600; }
.m-pass__mid b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.m-pass__bot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--brand-ink) 25%, transparent); }
.m-pass__bot b { font-size: 14px; }
.m-alert { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; padding: 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--m-warn) 45%, transparent); background: color-mix(in srgb, var(--m-warn) 12%, transparent); font-size: 13px; color: var(--m-text); }
.m-alert .ic { color: var(--m-warn); flex: none; margin-top: 1px; }
.m-plans { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; min-width: 0; }
.m-planopt { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; border: 1.5px solid var(--m-border); background: var(--m-surface); cursor: pointer; }
.m-planopt input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); flex: none; }
.m-planopt input:focus-visible { outline: none; }
.m-planopt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.m-planopt.is-on { border-color: var(--m-accent); background: color-mix(in srgb, var(--brand) 9%, var(--m-surface)); }
.m-planopt__main { flex: 1; min-width: 0; }
.m-planopt__main b { display: block; font-size: 15px; }
.m-planopt__main small, .m-planopt__price small { display: block; font-size: 12px; color: var(--m-text-2); }
.m-planopt__price { text-align: right; }
.m-planopt__price b { font-size: 15px; font-variant-numeric: tabular-nums; }
.m-pays { list-style: none; padding: 0; margin: 0; }
.m-pays li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--m-border); }
.m-pays li > span:nth-child(2) { flex: 1; min-width: 0; }
.m-pays__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--m-surface-2); color: var(--m-text-2); flex: none; }
.m-pays b { display: block; font-size: 14px; }
.m-pays small { display: block; font-size: 12px; color: var(--m-text-2); }
.m-pays__amt { display: flex; flex-direction: column; align-items: flex-end; }
.m-pays__amt .w-link { padding: 2px 0; font-size: 12.5px; }

/* me */
.m-profile { display: flex; align-items: center; gap: 14px; }
.m-profile b { display: block; font-size: 17px; }
.m-profile small { display: block; font-size: 12.5px; color: var(--m-text-2); }
.m-list { list-style: none; padding: 0; margin: 0 0 14px; border-radius: 16px; overflow: hidden; background: var(--m-surface); border: 1px solid var(--m-border); }
.m-list li + li { border-top: 1px solid var(--m-border); }
.m-list li > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; background: none; color: var(--m-text); font-size: 15px; text-align: left; }
.m-list li > button > span { flex: 1; }
.m-list li > button small { color: var(--m-text-2); font-size: 12.5px; }
.m-list li > button .ic:last-child { color: var(--m-muted); }
.m-list li > button:focus-visible { outline-offset: -3px; }
.m-list__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }
.m-list__lbl { display: flex; align-items: center; gap: 12px; font-size: 15px; }

/* sheets */
.m-sheet-back { position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, .55); animation: fade .15s ease; }
.m-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 86%; overflow-y: auto; padding: 6px 18px 30px; border-radius: 24px 24px 0 0; background: var(--m-surface); box-shadow: 0 -10px 40px rgba(0, 0, 0, .35); animation: slideup .22s ease; }
.m-sheet--tall { max-height: 94%; }
.m-sheet.is-still, .m-sheet-back.is-still { animation: none; }
.m-sheet__grab { width: 40px; height: 5px; margin: 4px auto 10px; border-radius: 3px; background: var(--m-border); }
.m-sheet__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.m-sheet__head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.m-sheet__body > .m-muted + .m-muted { margin-top: 8px; }
.m-sheet__body > .m-muted + .btn, .m-sheet__body > .m-fine + .btn, .m-sheet__body > .m-ok + .btn { margin-top: 16px; }
.m-qr { text-align: center; }
.m-qr__svg { display: block; width: 200px; height: 200px; margin: 4px auto 12px; border-radius: 16px; }
.m-qr b { display: block; font-size: 16px; }
.m-qr small { font-size: 13px; color: var(--m-text-2); }
.m-ok { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; color: var(--m-good); font-size: 14px; font-weight: 700; }
.m-test { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--m-warn); background: color-mix(in srgb, var(--m-warn) 12%, transparent); font-size: 13px; font-weight: 700; color: var(--m-text); }
.m-test .ic { color: var(--m-warn); }
.m-bill { margin: 12px 0 14px; }
.m-bill div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14px; }
.m-bill dt { color: var(--m-text-2); }
.m-bill dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.m-bill__sub dt { font-size: 12.5px; color: var(--m-muted); }
.m-bill__total { margin-top: 6px; padding-top: 10px !important; border-top: 1px solid var(--m-border); font-size: 16.5px !important; }
.m-bill__total dt { color: var(--m-text); font-weight: 750; }
.m-bill__total dd { font-weight: 850; }
.m-methods { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; min-width: 0; }
.m-methods legend { color: var(--m-text-2); }
.m-method { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--m-border); cursor: pointer; }
.m-method input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.m-method input:focus-visible { outline: none; }
.m-method:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.m-method.is-on { border-color: var(--m-accent); }
.m-method b { display: block; font-size: 14.5px; }
.m-method small { display: block; font-size: 12px; color: var(--m-text-2); }
.m-processing { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 0 40px; text-align: center; }
.m-processing small { color: var(--m-warn); font-weight: 700; font-size: 13px; }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--m-border); border-top-color: var(--m-accent); animation: spin .8s linear infinite; }
.m-success { text-align: center; margin-bottom: 8px; }
.m-success b { display: block; font-size: 21px; font-weight: 850; }
.m-success small { display: block; margin-top: 3px; font-size: 13px; color: var(--m-text-2); }
.m-invwrap { margin-bottom: 14px; }
.m-invwrap .invoice { padding: 14px; font-size: 12px; }
.m-invwrap .invoice__meta h3 { text-align: left; }

/* =====================================================================
   OWNER DASHBOARD
   ===================================================================== */
.o-shell { position: relative; display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100%; font-family: var(--app-font); font-stretch: var(--app-stretch); }
.o-side { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; background: #fff; border-right: 1px solid var(--border); overflow-y: auto; z-index: 30; }
.o-side__brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.o-side__brand > div { min-width: 0; flex: 1; }
.o-side__brand b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-side__brand small { display: block; font-size: 12px; color: var(--muted); }
.o-side__close { display: none; }
.o-side nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.o-nav { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font-size: 14px; font-weight: 650; text-align: left; }
.o-nav:hover { background: var(--surface-2); color: var(--text); }
.o-nav.is-on { background: var(--brand-soft); color: var(--brand-strong); }
.o-nav.is-on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-strong); }
.o-nav__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); font-size: 11.5px; font-weight: 750; display: grid; place-items: center; }
.o-side__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; border-top: 1px solid var(--border); }
.o-side__foot b { display: block; font-size: 13.5px; }
.o-side__foot small { display: block; font-size: 12px; color: var(--muted); }
.o-scrim { display: none; }
.o-main { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; }
.o-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 24px; background: #fff; border-bottom: 1px solid var(--border); }
.o-burger { display: none; }
.o-top__t { flex: 1; min-width: 0; }
.o-top__date { font-size: 12.5px; color: var(--muted); }
.o-top h1 { font-size: 21px; font-weight: 750; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.o-top__actions { display: flex; gap: 8px; flex: none; }
.o-back { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--brand-strong); font-size: 13px; font-weight: 650; }
.o-content { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px 28px; }
.o-foot { display: flex; align-items: center; gap: 6px; margin-top: 22px; font-size: 12px; color: var(--muted); }
.lede { max-width: 72ch; margin-bottom: 16px; font-size: 14px; color: var(--text-2); }
.card { padding: 18px 20px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); min-width: 0; }
.card + .card, .grid2 + .card, .card + .grid2, .kpis + .card { margin-top: 16px; }
.card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.card__head h2 { font-size: 15.5px; font-weight: 750; display: flex; align-items: center; }
.card__meta { font-size: 12px; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff; color: var(--text); text-align: left; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); min-width: 0; }
button.kpi:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(16, 24, 40, .08); }
.kpi__ic { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-strong); }
.kpi--warn .kpi__ic { background: var(--warn-bg); color: var(--warn); }
.kpi--risk .kpi__ic { background: var(--risk-bg); color: var(--risk); }
.kpi__l { font-size: 13px; font-weight: 600; color: var(--text-2); }
.kpi__v { font-size: 26px; font-weight: 800; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.kpi__s { font-size: 12.5px; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.grid2 + .grid2 { margin-top: 16px; }
.grid2--detail { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-top: 16px; }
.col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.col .card + .card { margin-top: 0; }
.attn-list { list-style: none; padding: 0; margin: 0 0 6px; }
.attn { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.attn:first-child { border-top: 0; }
.attn__btns { display: flex; gap: 6px; flex: none; }
.who { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; text-align: left; min-width: 0; }
.who > span:last-child { min-width: 0; }
.who b { display: block; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { display: block; font-size: 12px; color: var(--muted); }
button.who:hover b { text-decoration: underline; text-underline-offset: 2px; }
.who--static { cursor: default; }
.you { color: var(--brand-strong); font-weight: 650; }
.feed { list-style: none; padding: 0; margin: 0; }
.feed li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.feed li:first-child { border-top: 0; }
.feed li > span:not(.feed__ic):not(.av) { flex: 1; min-width: 0; }
.feed time { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); flex: none; }
.feed--log { margin-bottom: 12px; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--good); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 0 rgba(18, 183, 106, .5); animation: pulse 2s infinite; }
.count-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 8px; padding: 0 6px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 700; }

/* tables */
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.toolbar__r { display: flex; gap: 8px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: #fff; color: var(--text-2); font-size: 13px; font-weight: 650; white-space: nowrap; }
.chip span { margin-left: 3px; color: var(--muted); font-weight: 550; }
.chip.is-on { background: var(--text); border-color: var(--text); color: #fff; }
.chip.is-on span { color: #d0d5dd; }
.search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: #fff; color: var(--muted); }
.search:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }
.search input { width: 210px; height: 100%; border: 0; background: transparent; color: var(--text); font-size: 14px; outline: none; }
.search--full { width: 100%; }
.search--full input { width: 100%; }
.sel select { height: 38px; width: auto; padding-right: 30px; }
.count { margin: 4px 0 8px; font-size: 12.5px; color: var(--muted); }
.tablewrap { overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.card .tablewrap { border-radius: 10px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-2); text-align: left; white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: #fafbfc; }
.tbl td small { display: block; font-size: 12px; color: var(--muted); }
.tbl td b { font-weight: 650; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .empty { padding: 28px; }
.act-cell { white-space: nowrap; text-align: right; }
.act-row { display: flex; gap: 6px; justify-content: flex-end; }
.stack-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.stack-cards .card + .card { margin-top: 0; }
.mono { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.ok-t { color: var(--good); }
.bad-t { color: var(--bad) !important; }
.th-sort { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.th-sort.is-on::after { content: " \2193"; }
.tbl--perm th, .tbl--perm td { text-align: center; }
.tbl--perm th[scope="row"], .tbl--perm thead th:first-child { text-align: left; }
.tbl--perm tbody th { background: none; font-weight: 600; color: var(--text); white-space: normal; border-bottom: 1px solid var(--border); }
.yes { color: var(--good); }
.no { color: var(--muted); }
.cbar { display: flex; align-items: center; gap: 8px; }
.cbar .meter { width: 90px; flex: none; }
.wchg { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

/* member detail */
.mhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.mhead__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mhead__who h2 { font-size: 20px; font-weight: 750; }
.mhead__who .pills { margin: 4px 0; }
.mhead__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.minis div { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.minis b { display: block; font-size: 18px; font-weight: 750; }
.minis small { font-size: 12px; color: var(--muted); }
.agrid { display: flex; gap: 4px; margin-bottom: 8px; overflow-x: auto; }
.agrid__col { flex: none; display: grid; grid-template-rows: repeat(7, 18px); gap: 4px; }
.agrid__c { width: 18px; height: 18px; border-radius: 4px; background: #e9ecf0; }
.agrid__c.is-v { background: var(--brand-strong); }
.agrid__c.is-f { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.h3 { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 14px; font-weight: 750; }
.h3:first-child { margin-top: 0; }
.h3 small { font-weight: 500; color: var(--muted); }
.up { color: var(--good); font-size: 12.5px; font-weight: 700; }
.down { color: var(--bad); font-size: 12.5px; font-weight: 700; }
.flat { color: var(--text-2); font-size: 12.5px; font-weight: 700; }
.lifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 16px 0 6px; }
.lift { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.lift small { display: block; font-size: 12px; color: var(--muted); }
.lift b { display: block; font-size: 18px; font-weight: 750; }
.wlist { list-style: none; padding: 0; margin: 0; }
.wlist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.wlist small { display: block; font-size: 12px; color: var(--muted); }
.planline b { display: block; font-size: 16px; }
.meter-row { display: flex; justify-content: space-between; margin: 12px 0 6px; font-size: 13px; color: var(--text-2); }
.meter-row b { color: var(--text); }
.assign { margin-top: 16px; }
.assign label { display: block; font-size: 13px; font-weight: 650; color: var(--text-2); }
.assign__row { display: flex; gap: 8px; margin-top: 6px; }
.assign__row select { flex: 1; min-width: 0; }
.plist { list-style: none; padding: 0; margin: 0; }
.plist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.plist li:first-child { border-top: 0; }
.plist li > span:first-child { min-width: 0; }
.plist b { display: block; font-size: 13.5px; font-weight: 650; }
.plist small { display: block; font-size: 12px; color: var(--muted); }
.plist__r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; font-size: 13.5px; font-weight: 650; white-space: nowrap; }

/* plans */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.plan-grid .card { margin: 0; }
.plan-card { display: flex; flex-direction: column; }
.plan-card__top { display: flex; gap: 6px; }
.plan-card h2 { margin: 10px 0 2px; font-size: 18px; font-weight: 750; }
.plan-card__desc { flex: 1; margin: 8px 0 10px; font-size: 13.5px; color: var(--text-2); }
.daychips { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.daychips li { padding: 4px 8px; border-radius: 6px; background: var(--surface-2); font-size: 12px; font-weight: 650; color: var(--text-2); }
.plan-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.plan-card__btns { display: flex; gap: 6px; }
.stack { display: flex; align-items: center; }
.stack .av { box-shadow: 0 0 0 2px #fff; }
.stack .av + .av { margin-left: -7px; }
.stack small { margin-left: 8px; font-size: 12.5px; color: var(--muted); }
.editor__days { margin: 18px 0 10px; }
.seg--scroll { display: flex; }
.editor__day { padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.editor__dayhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.editor__dayhead .field { flex: 0 1 260px; }
.tbl--edit td { padding: 6px 8px; }
.tbl--edit input, .tbl--edit select { height: 36px; padding: 0 8px; }
.tbl--edit td:nth-child(2), .tbl--edit td:nth-child(3), .tbl--edit td:nth-child(4) { width: 92px; }
.editor__day > .btn { margin-top: 10px; }
.editor__foot, .form-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.editor__foot { justify-content: flex-end; }

/* admin */
.tabs { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-2); font-size: 14px; font-weight: 650; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.is-on { color: var(--brand-strong); border-bottom-color: var(--brand-strong); }
.tbl--price td:first-child { min-width: 150px; }
.tbl--price td:nth-child(3) { min-width: 120px; }
.exgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 18px; margin: 16px 0 8px; }
.exgroups .h3 { margin: 8px 0 2px; }
.steps { list-style: none; padding: 0; margin: 0 0 14px; counter-reset: s; }
.steps li { position: relative; padding: 0 0 14px 38px; counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); font-size: 13px; font-weight: 800; }
.steps b { display: block; font-size: 14px; }
.steps span { font-size: 13px; color: var(--text-2); }
.brandform .form-grid { margin-bottom: 4px; }
.swatches { border: 0; padding: 0; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.swatch { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.swatch.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text); }
.swatch--custom { display: grid; place-items: center; overflow: hidden; background: conic-gradient(#ef4444, #f59e0b, #84cc16, #10b981, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444); color: #fff; font-size: 20px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); cursor: pointer; }
.swatch--custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.swatch--custom:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.fonts { border: 0; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.fontopt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; }
.fontopt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fontopt span { font-size: 22px; font-weight: 700; color: var(--text); }
.fontopt small { font-size: 11.5px; color: var(--muted); text-align: center; }
.fontopt.is-on { border-color: var(--brand-strong); background: var(--brand-soft); }
.fontopt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.brand-preview { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.brand-preview .dl { flex: 1 1 200px; }
.bp-phone { width: 210px; padding: 12px 10px 8px; border-radius: 26px; border: 6px solid #111317; background: #0c0e11; color: #f2f4f7; font-family: var(--app-font); font-stretch: var(--app-stretch); }
.bp-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bp-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-hero { margin: 12px 0; padding: 12px; border-radius: 14px; background: linear-gradient(140deg, var(--brand), var(--brand-deep)); color: var(--brand-ink); }
.bp-hero small { display: block; font-size: 11px; font-weight: 650; }
.bp-hero b { display: block; font-size: 18px; font-weight: 850; }
.bp-btn { display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 8px; background: var(--brand-ink); color: var(--brand); font-size: 11.5px; font-weight: 750; }
.bp-tabs { display: flex; justify-content: space-around; padding-top: 8px; border-top: 1px solid #2a2f37; color: #959dab; }
.bp-tabs .is-on { color: var(--brand-on-dark); }
.checklist { border: 1px solid var(--border); border-radius: 12px; padding: 0; margin: 0; max-height: 320px; overflow-y: auto; min-width: 0; }
.checkrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.checkrow:last-child { border-bottom: 0; }
.checkrow:hover { background: var(--surface-2); }
.checkrow input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-strong); flex: none; }
.checkrow b { display: block; font-size: 14px; font-weight: 650; }
.checkrow small { display: block; font-size: 12px; color: var(--muted); }
.bubble-wrap { padding: 14px; border-radius: 12px; background: #eceff3; }
.bubble { max-width: 88%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); font-size: 13.5px; white-space: pre-wrap; }
.bubble__link { display: block; margin-top: 8px; color: var(--brand-strong); font-weight: 700; text-decoration: underline; }

/* owner responsive (container queries follow the pane, so split view works too) */
@container owner (min-width: 761px) and (max-width: 960px) {
  .kpis--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpis--5 > :nth-child(-n+3) { grid-column: span 2; }
  .kpis--5 > :nth-child(n+4) { grid-column: span 3; }
}
@container owner (max-width: 1180px) {
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .grid2--detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container owner (max-width: 1060px) {
  .o-shell { grid-template-columns: 72px minmax(0, 1fr); }
  .o-side { padding: 14px 10px; align-items: stretch; }
  .o-side__brand { justify-content: center; padding: 2px 0 14px; }
  .o-side__brand > div, .o-nav > span:not(.o-nav__badge), .o-side__foot > div { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .o-nav { justify-content: center; padding: 12px 0; }
  .o-nav.is-on::before { left: -10px; }
  .o-nav__badge { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 4px; }
  .o-side__foot { justify-content: center; padding: 12px 0 0; }
  .grid2--detail { grid-template-columns: minmax(0, 1fr); }
}
@container owner (max-width: 760px) {
  .o-shell { grid-template-columns: minmax(0, 1fr); }
  .o-side { position: absolute; top: 0; bottom: 0; left: 0; width: min(290px, 86%); padding: 16px 12px; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .25); visibility: hidden; }
  .nav-open .o-side { transform: none; visibility: visible; }
  .o-side__brand { justify-content: flex-start; padding: 2px 6px 14px; }
  .o-side__brand > div, .o-nav > span:not(.o-nav__badge), .o-side__foot > div { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .o-side__close { display: inline-grid; }
  .o-nav { justify-content: flex-start; padding: 11px 12px; }
  .o-nav.is-on::before { left: -12px; }
  .o-nav__badge { position: static; margin-left: auto; }
  .o-side__foot { justify-content: flex-start; padding: 12px 6px 0; }
  .nav-open .o-scrim { display: block; position: absolute; inset: 0; z-index: 25; background: rgba(16, 24, 40, .45); }
  .o-burger { display: inline-grid; margin-left: -8px; }
  .o-top { padding: 10px 16px; gap: 6px; }
  .o-top h1 { font-size: 18px; }
  .o-top__actions .btn { padding: 0 10px; }
  .o-top__actions .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .o-content { padding: 14px 14px 24px; }
  .card { padding: 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi { padding: 12px; }
  .kpi__v { font-size: 22px; }
  .kpi__s { font-size: 12px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .field--wide, .field--full { grid-column: auto; }
  .radios--grid { grid-template-columns: minmax(0, 1fr); }
  .toolbar__r, .search { width: 100%; }
  .search input { width: 100%; }
  .toolbar__r .sel { width: 100%; }
  .toolbar__r .sel select { width: 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  /* tables become cards */
  .tablewrap { border: 0; background: transparent; overflow: visible; }
  .card .tablewrap { border: 0; }
  .tbl--members thead, .tbl--tx thead, .tbl--renew thead, .tbl--prog thead, .tbl--staff thead, .tbl--price thead, .tbl--edit thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl--members tbody, .tbl--tx tbody, .tbl--renew tbody, .tbl--prog tbody, .tbl--staff tbody, .tbl--price tbody, .tbl--edit tbody { display: grid; gap: 10px; }
  .tbl--members tr, .tbl--tx tr, .tbl--renew tr, .tbl--prog tr, .tbl--staff tr, .tbl--price tr, .tbl--edit tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
  .tbl--members td, .tbl--tx td, .tbl--renew td, .tbl--prog td, .tbl--staff td, .tbl--price td, .tbl--edit td { display: block; padding: 0; border: 0 !important; min-width: 0; background: none !important; }
  .tbl--members td[data-label]::before, .tbl--tx td[data-label]::before, .tbl--renew td[data-label]::before, .tbl--prog td[data-label]::before, .tbl--price td[data-label]::before, .tbl--edit td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .tbl--members td:first-child, .tbl--tx td[data-label="Member"], .tbl--renew td:first-child, .tbl--prog td:first-child, .tbl--staff td:first-child, .tbl--price td:first-child, .tbl--edit td:first-child { grid-column: 1 / -1; }
  .tbl--members td:first-child::before, .tbl--renew td:first-child::before, .tbl--prog td:first-child::before { display: none; }
  .tbl--renew .act-cell, .tbl--tx .act-cell { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border) !important; }
  .tbl--renew .act-row { width: 100%; }
  .tbl--staff tr, .tbl--members tr, .tbl--edit tr { position: relative; }
  .tbl--staff td.act-cell, .tbl--members td.act-cell, .tbl--edit td.act-cell { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; padding: 0; border: 0 !important; }
  .tbl--members td:first-child { padding-right: 80px; }
  .tbl--members tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbl--edit tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tbl--edit td:first-child { padding-right: 44px; }
  .tbl--edit td[data-label="Coach note"] { grid-column: 1 / -1; }
  .tbl .empty { grid-column: 1 / -1; }
  .tbl--edit td:nth-child(2), .tbl--edit td:nth-child(3), .tbl--edit td:nth-child(4) { width: auto; }
  .minis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mhead__acts { width: 100%; }
  .mhead__acts .btn { flex: 1 1 auto; }
  .attn { flex-wrap: wrap; }
  .attn__btns { margin-left: 44px; }
  .fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- responsive: page ---------------- */
@media (max-width: 1240px) {
  .stage-split { grid-template-columns: 420px minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .demobar__name { display: none; }
  .dtool span { display: none; }
  .dtool { padding: 0 9px; }
}
@media (max-width: 920px) {
  .stage-m { grid-template-columns: auto; }
  .tourpanel { display: none; }
}
@media (max-width: 860px) {
  .signin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "card" "more"; row-gap: 22px; padding: 24px 16px 40px; }
  .signin__lede { font-size: 15.5px; }
  .signin__sides { margin-top: 4px; }
  .signin__card { padding: 22px; }
}
@media (max-width: 760px) {
  :root { --demobar-h: 52px; }
  .demobar { padding: 0 10px; gap: 6px; }
  .demo-pill { height: 26px; padding: 0 9px; font-size: 11.5px; gap: 5px; }
  .demo-pill__dot { display: none; }
  #demobar-controls { gap: 4px; }
  .vswitch__b { padding: 0 9px; }
  .vswitch__b span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dtool { padding: 0 7px; }
  .stage-m { display: block; padding: 0; overflow: hidden; overflow: clip; height: 100%; }
  .stage--member { background: #0c0e11; }
  .device { width: 100%; height: 100%; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .device__frame, .device__screen::after { display: none; }
  .device__screen { border-radius: 0; }
  .m-status { display: none; }
  .m-tabs { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .w-rest { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .m-sheet { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .m-head { padding-top: 10px; }
  .modal-back { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; }
  .modal--wide { width: 100%; }
}
@media (max-width: 380px) {
  .demo-pill { font-size: 11px; padding: 0 7px; }
  .dtool { padding: 0 6px; }
  .vswitch__b { padding: 0 7px; }
}
@media (max-height: 700px) and (min-width: 761px) {
  .device { min-height: 0; height: calc(100dvh - var(--demobar-h) - 24px); }
}

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes slideup { from { transform: translateY(100%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .5); } 70% { box-shadow: 0 0 0 7px rgba(18, 183, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------------- print: only the invoice ---------------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; overflow: visible; }
  body.printing > *:not(#print-area) { display: none !important; }
  body.printing #print-area { display: block !important; }
  body:not(.printing) .demobar, body:not(.printing) #toasts { display: none; }
  .invoice { border: 0; padding: 0; font-size: 12pt; }
}
.m-shell .btn--ghost { background: var(--m-surface-2); border-color: var(--m-border); color: var(--m-text); }
.m-shell .btn--ghost:hover:not(:disabled) { background: var(--m-border); }