/* =====================================================================
   Always Active Fitness — shared design system
   ---------------------------------------------------------------------
   Loaded AFTER each page's inline <style>, so it re-skins the existing
   markup without touching any structure, ids, names, handlers or JS.

   Principles (Apple-inspired, practical for the web):
   - system font stack, clear type hierarchy, generous whitespace
   - neutral solid surfaces; translucency only on chrome (header, sidebar,
     toasts, overlays) with a solid fallback
   - one restrained accent; semantic colors only for status
   - capsule buttons, filled inputs, rounded cards, hairline borders
   - soft layered depth, calm motion, full keyboard/reduced-motion support

   Specificity note: component rules are written as  `:root :is(...)`  so
   they out-rank the single-selector rules in each page's inline <style>
   regardless of source order. Everything is inside @media screen so the
   existing print styles are untouched.
   ===================================================================== */

@media screen {

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #09090b;
  --card: #1a1a1d;
  --card-raised: #232327;
  --card-border: rgba(255, 255, 255, .09);
  --hairline: rgba(255, 255, 255, .08);

  /* text */
  --text: #f5f5f7;
  --muted: #a1a1a8;

  /* system colors (AA on their surfaces) */
  --green: #34d058;
  --red: #ff6b63;
  --blue: #64b0ff;
  --purple: #c08cff;
  --orange: #ffb340;

  /* accent: fill-safe (white text >= 4.5:1); --accent-text for text on dark */
  --accent: #0a6ee0;
  --accent-strong: #0a5cc2;
  --accent-text: #5eaaff;
  --ring: rgba(10, 132, 255, .45);

  /* fills: Apple-style translucent grays for inputs, chips, segments */
  --fill: rgba(120, 120, 128, .24);
  --fill-hover: rgba(120, 120, 128, .32);
  --fill-strong: rgba(120, 120, 128, .40);
  --seg-active: #4a4a4f;
  --switch-on: #30d158;

  /* glass (chrome only) */
  --glass-bg: rgba(28, 28, 31, .72);
  --glass-border: rgba(255, 255, 255, .10);
  --glass-hl: inset 0 1px 0 rgba(255, 255, 255, .06);
  --scrim: rgba(0, 0, 0, .50);

  /* depth */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .25);
  --shadow-lg: 0 32px 70px -24px rgba(0, 0, 0, .75), 0 8px 20px -8px rgba(0, 0, 0, .45);

  /* shape */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-modal: 28px;
  --radius-pill: 999px;

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* motion */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --dur: .22s;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f5f5f7;
  --card: #ffffff;
  --card-raised: #ffffff;
  --card-border: rgba(0, 0, 0, .08);
  --hairline: rgba(0, 0, 0, .07);

  --text: #1d1d1f;
  --muted: #636366;

  --green: #187232;
  --red: #c21c28;
  --blue: #0a66c2;
  --purple: #7a3cc4;
  --orange: #a24a06;

  --accent: #0071e3;
  --accent-strong: #0062c4;
  --accent-text: #0066cc;
  --ring: rgba(0, 113, 227, .35);

  --fill: rgba(120, 120, 128, .12);
  --fill-hover: rgba(120, 120, 128, .18);
  --fill-strong: rgba(120, 120, 128, .28);
  --seg-active: #ffffff;
  --switch-on: #34c759;

  --glass-bg: rgba(255, 255, 255, .72);
  --glass-border: rgba(0, 0, 0, .07);
  --glass-hl: inset 0 1px 0 rgba(255, 255, 255, .9);
  --scrim: rgba(0, 0, 0, .32);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow: 0 10px 28px -14px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .05);
  --shadow-lg: 0 30px 64px -26px rgba(0, 0, 0, .30), 0 8px 18px -10px rgba(0, 0, 0, .12);
}

/* ---------- 2. Base ---------- */
:root body {
  font-family: var(--font);
  font-size: calc(15px * var(--ts, 1));
  line-height: 1.47;
  letter-spacing: -.005em;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
:root body::before {
  opacity: .035; filter: grayscale(1);
  /* fade the square JPG edges so the watermark never reads as a box */
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
}
:root[data-theme="light"] body::before { opacity: .05; }

:root :is(button, input, select, textarea) { font-family: inherit; }
:root :is(h1, h2, h3, h4) { letter-spacing: -.02em; }
:root a:where(:not(.dl, .skip-link, .btn, .navItem)) { color: var(--accent-text); }
:root a.dl { color: #fff; }
:root :is(code, kbd) {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em;
  background: var(--fill); padding: .1em .4em; border-radius: 6px;
}
:root ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* focus: one consistent, visible ring everywhere */
:root :focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
:root :is(button, .navItem, a.btn, a.navItem):focus-visible { border-radius: var(--radius-pill); }
:root .navItem:focus-visible { border-radius: var(--radius-sm); }
:root :is(input, select, textarea):focus-visible { outline: none; }

:root a.skip-link { border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--accent); color: #fff; }
:root #scrollProgress { background: var(--accent-text); height: 2px; }

/* ---------- 2b. Layout robustness (pre-existing overflow fixes) ---------- */
/* `main` uses margin:auto inside a flex column, which shrink-wraps it to its
   content; Chart.js canvases then pin the page wider than the viewport. */
:root main { width: 100%; min-width: 0; }
:root .chartsGrid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 860px) { :root .chartsGrid { grid-template-columns: minmax(0, 1fr); } }
:root :is(.chartsGrid > *, .chartWrap, .kpiGrid > *) { min-width: 0; }
/* visually-hidden labels inside scrolling tables are absolutely positioned; give
   the scroll wrapper containing-block status so they clip with it instead of
   widening the whole page */
:root :is(.tablewrap, .permMatrix) { position: relative; }

/* ---------- 3. Chrome: sidebar + header (translucent, solid fallback) ---------- */
:root .sidebar {
  background: var(--card);
  border-right: 1px solid var(--hairline);
}
:root :is(header) {
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  padding-top: 12px; padding-bottom: 12px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root .sidebar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
  }
  :root header {
    background: color-mix(in srgb, var(--bg) 74%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
  }
}
:root header.scrolled { box-shadow: 0 1px 0 var(--hairline); }
/* when the header row wraps (e.g. history view), keep the right-hand group
   right-aligned instead of stranded on the left */
:root header { row-gap: 10px; }
:root header .right { margin-left: auto; }

:root .sidebar-brand { padding: 24px 22px 18px; }
:root :is(.sidebar-brand .brand-logo, .sidebar-brand img) {
  width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--hairline);
}
:root .sidebar-brand h1 { font-size: calc(15px * var(--ts, 1)); font-weight: 700; letter-spacing: -.015em; }
:root :is(.sidebar-brand .brand-sub, .sidebar-brand .sub) {
  font-size: calc(11px * var(--ts, 1)); font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted);
}
:root .sidebar-nav { border-top: 1px solid var(--hairline); padding: 10px 12px 14px; gap: 2px; }
:root .sidebar-nav-label {
  font-size: calc(11.5px * var(--ts, 1)); font-weight: 600; letter-spacing: .01em; text-transform: none;
  color: var(--muted); padding: 18px 12px 6px;
}
:root .navItem {
  border-radius: 10px; font-size: calc(14px * var(--ts, 1)); font-weight: 500; padding: 9px 12px; color: var(--text);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
:root .navItem:hover { background: var(--fill); color: var(--text); }
:root .navItem.active { background: var(--accent); color: #fff; box-shadow: none; font-weight: 600; }
:root .sidebar-foot { border-top: 1px solid var(--hairline); }
:root :is(#sidebarBackdrop.open) {
  background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* floating glass panel: inset from the screen edge with concentric radii,
   a specular top edge and line icons in place of emoji */
:root .sidebar {
  margin: 12px 0 12px 12px; top: 12px; height: calc(100vh - 24px); height: calc(100dvh - 24px);
  border: 1px solid var(--hairline); border-radius: 28px; overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.28);
}
:root[data-theme="light"] .sidebar { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.9); }
:root .sidebar-nav { border-top: 0; padding: 4px 12px 12px; }
:root .sidebar-brand { padding: 20px 20px 14px; }
:root .sidebar-foot { margin: 0 12px 12px; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--fill); }
:root .sidebar-foot #userChip { display: flex; align-items: center; gap: 10px; padding: 0; white-space: nowrap; }
:root .sidebar-foot #userChip.hidden { display: none; }
:root #userChip .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: calc(15px * var(--ts, 1)); font-weight: 600;
}
:root #userChip .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
:root #userChip .who b { font-size: calc(14px * var(--ts, 1)); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
:root #userChip .who small { font-size: calc(12px * var(--ts, 1)); font-weight: 400; color: var(--muted); }
:root .sidebar-foot #userChip { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; border-radius: 12px; }
:root .sidebar-foot #userChip::after { content: "⌃"; margin-left: auto; color: var(--muted); font-size: calc(13px * var(--ts, 1)); transform: scaleX(1.4); }
:root .sidebar-foot { position: relative; }
:root .accountMenu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); padding: 6px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg);
}
:root .accountMenu[hidden] { display: none; }
:root .accountMenu button {
  width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: calc(14px * var(--ts, 1)); font-weight: 500; color: var(--red); cursor: pointer;
}
:root .accountMenu button:hover { background: var(--fill); }
:root :is(.userChip) { display: inline-flex; align-items: center; gap: 8px; padding: 0; }
:root .userChip .avatar {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: calc(13px * var(--ts, 1)); font-weight: 600;
}
:root .userChip b { font-size: calc(13.5px * var(--ts, 1)); font-weight: 600; color: var(--text); }
:root .navItem { border-radius: 999px; padding: 10px 14px; gap: 12px; }
:root .navItem .navIcon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 0; color: var(--muted); }
:root .navItem .navSvg { width: 21px; height: 21px; display: block; }
:root .navItem:hover .navIcon { color: var(--text); }
:root .navItem.active {
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent-text); font-weight: 600;
}
:root .navItem.active .navIcon { color: var(--accent-text); }
@media (max-width: 980px) {
  :root .sidebar {
    position: fixed; margin: 0; top: 10px; left: 10px; bottom: 10px; height: auto; max-height: calc(100dvh - 20px);
    transform: translateX(calc(-100% - 24px)); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.28);
  }
  :root .sidebar.open { transform: none; }
}

/* ---------- 4. Buttons ---------- */
/* secondary: tinted fill, capsule */
:root :is(
  #fetchNow, #liveBtn, #themeToggle, #glassToggle, #addMemberBtn, #coachingPackagesBtn, #customerScreenBtn, #openDoorBtn, #logoutBtn,
  #selectModeBtn, #clearSelectionBtn, #cancelSelectBtn,
  header button, header a.btn, .btn-ghost, .btn-danger,
  #sidebarToggle, #menuToggle,
  #catalogCancel, #addMemberCancel, #extendMemberCancel, #addCoachingCancel,
  #faceMatchDismissBtn, .dangerBtn, .rangeActionBtn, .iconBtn,
  .extendMembershipBtn, .coachingLogSessionBtn,
  .pagination button, .addRowBtn
) {
  background: var(--fill);
  border: 1px solid transparent;
  color: var(--text);
  border-radius: var(--radius-pill);
  font-size: calc(13.5px * var(--ts, 1)); font-weight: 600; letter-spacing: -.005em;
  padding: 8px 16px; min-height: 36px;
  box-shadow: none; transform: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform .12s var(--ease), opacity var(--dur) ease;
}
:root :is(
  #fetchNow, #liveBtn, #themeToggle, #glassToggle, #addMemberBtn, #coachingPackagesBtn, #customerScreenBtn, #openDoorBtn, #logoutBtn,
  #selectModeBtn, #clearSelectionBtn, #cancelSelectBtn,
  header button, header a.btn, .btn-ghost, #sidebarToggle, #menuToggle,
  #catalogCancel, #addMemberCancel, #extendMemberCancel, #addCoachingCancel,
  #faceMatchDismissBtn, .iconBtn, .pagination button, .addRowBtn
):hover:not(:disabled) {
  background: var(--fill-hover); border-color: transparent; transform: none; box-shadow: none; color: var(--text);
}
:root :is(button, a.btn):not(:disabled):active { transform: scale(.97); }

/* square-ish icon buttons */
:root :is(#themeToggle, #glassToggle, #sidebarToggle, #menuToggle) {
  width: 38px; height: 38px; padding: 0; min-height: 0; justify-content: center; font-size: calc(16px * var(--ts, 1));
}
:root :is(#sidebarToggle, #menuToggle) { border-radius: 12px; }

/* primary: accent fill */
:root :is(
  #liveBtn.show, #addMemberBtn, #glassToggle.active, #selectModeBtn.active,
  .btn-primary, button[type="submit"], a.btn,
  #catalogSave, #settingsSave, #addMemberConfirm, #extendMemberConfirm, #addCoachingConfirm,
  #combineBtn, #emptyBackToLive, .empty-state button, .fmcUseBtn
) {
  background: var(--accent); color: #fff; border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: calc(13.5px * var(--ts, 1)); font-weight: 600; letter-spacing: -.005em;
  padding: 9px 18px; min-height: 36px;
  box-shadow: none; filter: none; transform: none;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform .12s var(--ease), opacity var(--dur) ease;
}
:root :is(
  #liveBtn.show, #addMemberBtn, #glassToggle.active, #selectModeBtn.active,
  .btn-primary, button[type="submit"], a.btn,
  #catalogSave, #settingsSave, #addMemberConfirm, #extendMemberConfirm, #addCoachingConfirm,
  #combineBtn, #emptyBackToLive, .empty-state button, .fmcUseBtn
):hover:not(:disabled) {
  background: var(--accent-strong); border-color: transparent; filter: none; transform: none; box-shadow: none;
}
:root :is(button, a.btn):disabled, :root :is(.btn-primary, #addMemberConfirm, #extendMemberConfirm, #addCoachingConfirm, #catalogSave):disabled {
  opacity: .42; cursor: not-allowed; filter: none; box-shadow: none;
}
:root :is(#themeToggle, #glassToggle, #fetchNow):disabled { opacity: .5; }
:root #liveBtn { display: none; }
:root #liveBtn.show { display: inline-flex; align-items: center; }
:root a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

:root :is(#fetchNow, #liveBtn, #addMemberBtn, #coachingPackagesBtn, #customerScreenBtn, #openDoorBtn, #logoutBtn) { padding: 7px 14px; min-height: 34px; }
:root :is(#_, header .tabs button) { padding: 5px 13px; min-height: 28px; }

/* tinted accent actions inside forms (capture / upload / retake) */
:root :is(.camActions button, #extendDiscountUploadBtn, #extendDiscountCameraBtn, #coachingDiscountCameraBtn, #coachingDiscountUploadBtn, #coachingDiscountRetakeBtn, #extendDiscountRetakeBtn,
          #discountCaptureBtn, #discountRetakeBtn, #discountUploadBtn) {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text); border: 1px solid transparent;
  border-radius: var(--radius-pill); font-size: calc(13px * var(--ts, 1)); font-weight: 600;
  padding: 8px 15px; min-height: 36px; box-shadow: none; transform: none;
}
:root :is(.camActions button, #extendDiscountUploadBtn, #extendDiscountCameraBtn, #coachingDiscountCameraBtn, #coachingDiscountUploadBtn, #coachingDiscountRetakeBtn, #extendDiscountRetakeBtn,
          #discountCaptureBtn, #discountRetakeBtn, #discountUploadBtn):hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 26%, transparent); transform: none; border-color: transparent;
}
:root :is(#camRetakeBtn, #camRetakeBtn:hover:not(:disabled)) { background: var(--fill); color: var(--text); }

/* positive / destructive tinted */
:root :is(#_, .extendMembershipBtn, .coachingLogSessionBtn) {
  background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); border-color: transparent;
}
:root :is(#_, .extendMembershipBtn, .coachingLogSessionBtn):hover:not(:disabled) {
  background: color-mix(in srgb, var(--green) 26%, transparent); transform: none;
}
:root :is(#_, .dangerBtn, .btn-danger, .iconBtn.danger) { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
:root :is(#_, .dangerBtn, .btn-danger, .iconBtn.danger):hover:not(:disabled) {
  background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); border-color: transparent; transform: none;
}
:root :is(#_, .rangeActionBtn) { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); }
:root :is(#_, .rangeActionBtn):hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 24%, transparent); transform: none; }
:root #activeMemberExtendBtn {
  background: var(--green); color: #04210f; border: none; border-radius: var(--radius-pill);
  padding: 7px 14px; min-height: 32px; font-weight: 700;
}
:root #activeMemberExtendBtn:hover { filter: brightness(1.06); }

/* round destructive/remove icon buttons */
:root :is(.memberDeleteBtn, .coachingDeleteBtn, .catalogRmBtn, .rmBtn) {
  width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%;
  background: transparent; border: 1px solid var(--hairline); color: var(--red); font-size: calc(13px * var(--ts, 1));
  display: inline-flex; align-items: center; justify-content: center; transform: none;
}
:root :is(.memberDeleteBtn, .coachingDeleteBtn, .catalogRmBtn, .rmBtn):hover:not(:disabled) {
  background: color-mix(in srgb, var(--red) 14%, transparent); border-color: transparent; transform: none;
}
:root :is(.memberDeleteBtn, .coachingDeleteBtn, .catalogRmBtn, .rmBtn):disabled { opacity: .4; }

:root :is(#_, .addRowBtn) {
  background: transparent; border: 1px dashed var(--fill-strong); color: var(--muted);
  border-radius: var(--radius-sm); width: 100%; font-weight: 600;
}
:root :is(#_, .addRowBtn):hover:not(:disabled) { color: var(--accent-text); border-color: var(--accent-text); background: transparent; }

:root #backToTop {
  background: var(--glass-bg); color: var(--text); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow); width: 44px; height: 44px;
}
:root #backToTop:hover { background: var(--card-raised); transform: translateY(-2px); }

/* text-style links that are buttons */
:root .renewingBanner button {
  background: none; border: none; color: inherit; text-decoration: underline; font-weight: 600; padding: 2px 4px; min-height: 0;
}
:root .renewingBanner button:hover { background: none; }

/* ---------- 5. Segmented controls ---------- */
:root :is(.tabs, .shiftTabs, .visitTabs) {
  display: flex; gap: 2px; padding: 3px; background: var(--fill);
  border: none; border-radius: var(--radius-pill); width: fit-content; max-width: 100%;
}
:root :is(#_, .tabs button, .shiftTabs button, .visitTabs button) {
  background: transparent; border: none; color: var(--muted);
  padding: 6px 16px; min-height: 30px; border-radius: var(--radius-pill);
  font-size: calc(13px * var(--ts, 1)); font-weight: 600; box-shadow: none; transform: none;
}
:root :is(#_, .tabs button, .shiftTabs button, .visitTabs button):hover:not(.active):not(:disabled) {
  color: var(--text); background: transparent; border: none;
}
:root :is(#_, .tabs button.active, .shiftTabs button.active, .visitTabs button.active),
:root :is(#_, .tabs button.active, .shiftTabs button.active, .visitTabs button.active):hover:not(:disabled) {
  background: var(--seg-active); color: var(--text); border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .06);
}

/* ---------- 6. Inputs, selects, switches ---------- */
:root :is(
  .field input, .field textarea, .field select, #memberNameInput,
  #personSearch, #membersSearch, #coachingPackagesSearch, #datePicker,
  .rangeBar input[type="date"], .toolbar input[type="date"], .rangeRow input[type="datetime-local"],
  login input, input[type="text"], input[type="password"], input[type="number"]
):not([type="checkbox"]):not([type="radio"]):not(.cell):not(.pageJump) {
  background-color: var(--fill); color: var(--text);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 10px 13px; min-height: 40px; font-size: calc(15px * var(--ts, 1));
  box-shadow: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:root :is(#datePicker, #personSearch, .rangeBar input[type="date"], .toolbar input[type="date"]) {
  font-size: calc(13.5px * var(--ts, 1)); min-height: 36px; padding: 7px 13px; border-radius: var(--radius-pill);
}
:root :is(#membersSearch, #coachingPackagesSearch) { border-radius: var(--radius-sm); }
:root :is(.field input, .field textarea, .field select, #memberNameInput, #personSearch, #membersSearch,
          #coachingPackagesSearch, #datePicker, input[type="text"], input[type="password"], input[type="number"]):hover {
  background-color: var(--fill-hover); border-color: transparent;
}
:root :is(.field input, .field textarea, .field select, #memberNameInput, #personSearch, #membersSearch,
          #coachingPackagesSearch, #datePicker, .rangeBar input[type="date"], .toolbar input[type="date"],
          .rangeRow input[type="datetime-local"], input[type="text"], input[type="password"], input[type="number"]):focus,
:root :is(.field input, .field textarea, .field select, #memberNameInput, input[type="text"], input[type="password"], input[type="number"]):focus-visible {
  outline: none; background-color: var(--card); border-color: var(--accent-text);
  box-shadow: 0 0 0 4px var(--ring);
}
:root :is(input, select, textarea)::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
:root :is(input, select, textarea):disabled, :root :is(input, textarea)[readonly] { opacity: .55; cursor: not-allowed; }

/* validation states (visual only — native validation behavior is unchanged) */
/* (:root repeated to out-rank the heavy generic input rule above without !important) */
:root:root:root:root:root :is(#_, input, select, textarea):user-invalid {
  border-color: var(--red); background-color: color-mix(in srgb, var(--red) 10%, var(--fill));
}
:root:root:root:root:root :is(#_, input, select, textarea):user-invalid:focus,
:root:root:root:root:root :is(#_, input, select, textarea):user-invalid:focus-visible {
  border-color: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 35%, transparent);
}

/* dense in-table cells keep their compact size */
:root :is(input.cell, select.cell, table.catalogTable input.cell, .pagination .pageJump, .pageSizeSelect) {
  background-color: var(--fill); color: var(--text); border: 1px solid transparent;
  border-radius: var(--radius-xs); font-size: calc(13px * var(--ts, 1));
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:root :is(input.cell, select.cell, table.catalogTable input.cell, .pagination .pageJump, .pageSizeSelect):hover { background-color: var(--fill-hover); }
:root :is(input.cell, select.cell, table.catalogTable input.cell, .pagination .pageJump, .pageSizeSelect):focus,
:root :is(input.cell, select.cell, table.catalogTable input.cell, .pagination .pageJump, .pageSizeSelect):focus-visible {
  outline: none; background-color: var(--card); border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--ring);
}

/* selects: native control, custom chevron */
:root select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22255 -1210 1798 1048%22%3E%3Cpath fill=%22%23a1a1a8%22 transform=%22scale%281 -1%29%22 d=%22M1154 162C1195 162 1230 178 1262 211L2014 980C2040 1006 2053 1037 2053 1074C2053 1149 1993 1210 1918 1210C1882 1210 1847 1194 1820 1167L1155 483L488 1167C461 1194 427 1210 389 1210C315 1210 255 1149 255 1074C255 1037 269 1006 294 980L1046 210C1079 178 1113 162 1154 162Z%22/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 12px 8px;
}
:root[data-theme="light"] select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22255 -1210 1798 1048%22%3E%3Cpath fill=%22%236e6e73%22 transform=%22scale%281 -1%29%22 d=%22M1154 162C1195 162 1230 178 1262 211L2014 980C2040 1006 2053 1037 2053 1074C2053 1149 1993 1210 1918 1210C1882 1210 1847 1194 1820 1167L1155 483L488 1167C461 1194 427 1210 389 1210C315 1210 255 1149 255 1074C255 1037 269 1006 294 980L1046 210C1079 178 1113 162 1154 162Z%22/%3E%3C/svg%3E");
}
:root :is(select.cell, .pageSizeSelect) { padding-right: 28px; background-position: right 9px center; }
:root select option { background: var(--card); color: var(--text); }

/* labels */
:root :is(.field label, label) { font-size: calc(13px * var(--ts, 1)); font-weight: 500; color: var(--muted); letter-spacing: 0; }
:root .field { margin: 18px 0; }
:root :is(.field .hint, .field .fieldHint) { font-size: calc(12px * var(--ts, 1)); line-height: 1.5; color: var(--muted); margin-top: 7px; }
:root .checkbox-field label { color: var(--text); font-size: calc(15px * var(--ts, 1)); font-weight: 500; }

/* iOS-style switch for the form toggles (still a real checkbox: same name,
   value, keyboard + screen-reader behavior) */
:root .checkbox-field input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0;
  width: 42px; height: 26px; margin: 0; border-radius: var(--radius-pill);
  background: var(--fill-strong); border: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:root .checkbox-field input[type="checkbox"]::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  transition: transform var(--dur) var(--ease);
}
:root .checkbox-field input[type="checkbox"]:checked { background: var(--switch-on); }
:root .checkbox-field input[type="checkbox"]:checked::before { transform: translateX(16px); }
:root .checkbox-field input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
:root .checkbox-field input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* table / list checkboxes: refined native control */
:root :is(.permMatrix input[type="checkbox"], .memberDeleteConfirm) {
  -webkit-appearance: none; appearance: none; flex-shrink: 0;
  width: 20px; height: 20px; margin: 0; border-radius: 6px; cursor: pointer;
  background-color: var(--fill); border: 1.5px solid var(--fill-strong);
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:root :is(.permMatrix input[type="checkbox"], .memberDeleteConfirm):hover { background-color: var(--fill-hover); }
:root :is(.permMatrix input[type="checkbox"], .memberDeleteConfirm):checked {
  background-color: var(--accent); border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22255 -1578 1801 1754%22%3E%3Cpath fill=%22white%22 transform=%22scale%281 -1%29%22 d=%22M950 -176C1009 -176 1055 -153 1087 -105L2023 1343C2047 1379 2056 1411 2056 1442C2056 1521 1998 1578 1917 1578C1861 1578 1827 1558 1793 1504L946 162L512 712C479 753 445 771 396 771C314 771 255 713 255 633C255 598 267 565 296 530L814 -108C852 -155 894 -176 950 -176Z%22/%3E%3C/svg%3E");
}
:root .memberDeleteConfirm:checked { background-color: var(--red); }
:root :is(.permMatrix input[type="checkbox"], .memberDeleteConfirm):focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
:root :is(.permMatrix input[type="checkbox"], .memberDeleteConfirm):disabled { opacity: .45; cursor: not-allowed; }
:root .memberDeleteConfirm { margin-right: 6px; vertical-align: middle; }

/* ---------- 7. Surfaces: cards, tiles, panels ---------- */
:root :is(.tile, .panel, .card, .empty-state, .kpiCard, .summaryTile, .dayBar, .statusBanner) {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
:root .summaryTile { background: var(--fill); border-color: transparent; border-radius: var(--radius-sm); box-shadow: none; }
:root :is(.panel, .dayBar) { box-shadow: var(--shadow-sm); }
:root .panel { padding: 22px 24px; }
:root .tile { padding: 20px 22px; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
:root .tile:hover { transform: none; box-shadow: var(--shadow); }
:root .tile .icon { border-radius: 12px; }
:root .tile .label { font-size: calc(12px * var(--ts, 1)); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
:root :is(.tile.c-green, .tile.c-red, .tile.c-blue, .tile.c-purple, .tile.c-orange) { background: var(--card); }
:root :is(.tile.c-green .label, .tile.c-red .label, .tile.c-blue .label, .tile.c-purple .label, .tile.c-orange .label) { color: var(--muted); }
:root .tile .value { font-size: calc(28px * var(--ts, 1)); font-weight: 700; letter-spacing: -.03em; }
:root :is(.kpiCard .label) { font-size: calc(12px * var(--ts, 1)); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
:root :is(.kpiCard .value, .summaryTile .value) { font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
:root :is(.summaryTile .label) { font-size: calc(12px * var(--ts, 1)); font-weight: 600; letter-spacing: 0; text-transform: none; }
:root .panel h2 { font-size: calc(17px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; }
:root :is(.panel h3, .panel-head h3, .dayBar h3) { font-size: calc(17px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; }
:root :is(.panel h2 .sub, .panel p.panelSub, .panel-head p) { color: var(--muted); font-weight: 400; }
:root :is(h2.pageTitle) { font-size: calc(28px * var(--ts, 1)); font-weight: 700; letter-spacing: -.03em; margin-bottom: 6px; }
:root :is(p.pageSub) { font-size: calc(15px * var(--ts, 1)); color: var(--muted); }

:root .card.clickable:hover { border-color: var(--card-border); transform: translateY(-2px); box-shadow: var(--shadow); }
:root .card.selected { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--ring); }
:root .card.drag-over { border-color: var(--accent-text); box-shadow: 0 0 0 4px var(--ring); }
:root .card .name { font-size: calc(15px * var(--ts, 1)); font-weight: 600; letter-spacing: -.01em; }

:root .empty-state { padding: 56px 36px; box-shadow: var(--shadow-sm); }
:root .empty-state h2 { font-size: calc(20px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; }

/* photo placeholders were hard-coded near-black in the original styles, which
   fails contrast for their (muted) fallback glyphs in the light theme */
:root[data-theme="light"] :is(#membersBox .memberPhoto, .expiringPhoto, .expiringNoPhoto, .memberDetailPhoto,
  .memberSearchResult img, .memberSearchResult .noPhoto, .faceMatchCandidate img, .faceMatchCandidate .noPhoto,
  .camThumbWrap img, .discountThumb) { background-color: var(--fill); }

/* ---------- 8. Tables ---------- */
:root :is(table.grid, table) { font-size: calc(14px * var(--ts, 1)); }
:root :is(table.grid th, th) {
  color: var(--muted); font-size: calc(12px * var(--ts, 1)); font-weight: 600; letter-spacing: 0; text-transform: none;
  border-bottom: 1px solid var(--hairline);
}
:root :is(table.grid td, td) { border-bottom: 1px solid var(--hairline); }
:root :is(table.grid th, table.grid td) { padding: 12px 14px; }
:root :is(table.grid tr:hover td, tr.memberRow:hover td, tr.personRow:hover td) { background: var(--fill); }
:root :is(th[data-sort]:hover) { color: var(--text); }
:root tbody tr:last-child td { border-bottom: none; }
:root tfoot td { border-top: 1px solid var(--hairline); }
:root :is(.expiringPhoto, .expiringNoPhoto, #membersBox .memberPhoto, .memberDetailPhoto, .memberSearchResult img, .faceMatchCandidate img, .camThumbWrap img) {
  border: 1px solid var(--hairline);
}
:root .dir-entry { color: var(--green); }
:root .dir-exit { color: var(--red); }

/* the original styles use --accent / --accent-strong as TEXT colors in a few
   places; in this system those are fill colors, so route text to --accent-text */
:root :is(.summaryTile.accent .value, .badge.id, .modalItem .mdl, .splitZone.drag-over,
          #autoCaptureStatus, #autoCaptureStatus:not(.ready)) { color: var(--accent-text); }
:root #autoCaptureStatus.ready { color: var(--green); }

/* ---------- 9. Badges, pills, banners ---------- */
:root :is(.badge, .pill) { border-radius: var(--radius-pill); font-size: calc(12px * var(--ts, 1)); font-weight: 600; letter-spacing: 0; border: none; }
:root .pill { border: 1px solid transparent; padding: 3px 10px; background: var(--fill); }
:root .pill.super { background: var(--accent); color: #fff; }
:root .pill.on { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
:root .pill.bad { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
:root .badge.id { color: var(--accent-text); }

:root :is(.settingsMsg, #catalogError, #modalError, #error, .activeMemberBanner, .renewingBanner, .faceMatchBanner) {
  border-radius: var(--radius-sm); font-size: calc(13.5px * var(--ts, 1)); line-height: 1.45;
}
:root :is(.statusBanner) { border-radius: var(--radius-sm); box-shadow: none; }
:root #offlineBanner { font-size: calc(13.5px * var(--ts, 1)); letter-spacing: -.005em; }
:root .faceBox { border-radius: 8px; }

/* ---------- 10. Modals & overlays ---------- */
:root :is(#modalOverlay, #settingsOverlay, #addMemberOverlay, #membersOverlay, #catalogOverlay,
          #memberDetailOverlay, #extendMemberOverlay, #addCoachingOverlay, #coachingPackagesOverlay, #sellOverlay, #expenseOverlay, #doorOverlay, #dayPassOverlay, #coachMarkOverlay, .modalBackdrop) {
  background: var(--scrim);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  padding: clamp(14px, 4vw, 48px);
}
:root #photoLightboxOverlay, :root #lightboxOverlay.open { background: rgba(0, 0, 0, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root :is(#modalBox, #settingsBox, #addMemberBox, #membersBox, #catalogBox, #memberDetailBox,
          #extendMemberBox, #addCoachingBox, #coachingPackagesBox, #sellBox, #expenseBox, #doorBox, #dayPassBox, #coachMarkBox, .modal) {
  background: var(--card-raised); border: 1px solid var(--card-border); border-radius: var(--radius-modal);
  box-shadow: var(--shadow-lg); padding: 28px;
  animation-timing-function: var(--ease);
}
:root :is(#membersBox) { padding: 28px 28px 24px; }
:root :is(.modalHead h3, .modal h3) { font-size: calc(20px * var(--ts, 1)); font-weight: 700; letter-spacing: -.025em; }
:root :is(.modalSub, .modal p.modalSub) { font-size: calc(13.5px * var(--ts, 1)); color: var(--muted); }
:root .modalHead { padding-right: 40px; margin-bottom: 6px; }
:root .memberDetailFields .mdf label { text-transform: none; letter-spacing: 0; font-size: calc(12px * var(--ts, 1)); font-weight: 500; color: var(--muted); margin-bottom: 2px; }
:root .memberDetailFields .mdf .val { font-size: calc(15px * var(--ts, 1)); font-weight: 500; }
:root .visitHistoryTitle { font-size: calc(15px * var(--ts, 1)); font-weight: 600; }

/* close buttons: every modal gets the same quiet circular control
   (several modals had unstyled ✕ buttons before) */
:root :is(.modalHead > button, .modalCloseBtn, #modalClose, #settingsClose, #membersClose, #addMemberClose, #catalogClose) {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; border: none;
  background: var(--fill); color: var(--muted); font-size: calc(13px * var(--ts, 1)); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: none; transform: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
:root :is(.modalHead > button, .modalCloseBtn, #modalClose, #settingsClose, #membersClose, #addMemberClose, #catalogClose):hover {
  background: var(--fill-strong); color: var(--text);
}
:root :is(.modalHead > button, .modalCloseBtn, #modalClose, #settingsClose, #membersClose, #addMemberClose, #catalogClose):active {
  background: var(--fill-strong); transform: scale(.94);
}
:root #photoLightboxClose, :root #lightboxClose {
  background: rgba(60, 60, 67, .7); color: #fff; border: none; border-radius: 50%;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
:root #photoLightboxClose:hover, :root #lightboxClose:hover { background: rgba(90, 90, 98, .85); color: #fff; }

:root :is(.addMemberFooter, .catalogFooter, .modalActions) { gap: 10px; margin-top: 24px; }
:root #addMemberBox.active-member-outline {
  border-color: var(--green); box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--green) 25%, transparent);
}

/* sub-surfaces inside modals */
:root :is(.memberSearchResults, .faceMatchCandidate, .modalItem, .permMatrix) {
  background: var(--fill); border: 1px solid transparent; border-radius: var(--radius-sm);
}
:root .memberSearchResult { border-bottom: 1px solid var(--hairline); }
:root .memberSearchResult:hover { background: var(--fill-hover); }
:root .faceMatchCandidate img.fmcPreview { border: 2px solid var(--accent-text); border-radius: var(--radius-sm); }
:root .camWrap { border-radius: var(--radius-sm); }
:root .splitZone { border-radius: var(--radius-sm); border-color: var(--fill-strong); }
:root .settingsDivider { border-top-color: var(--hairline); }

/* ---------- 11. Toasts & floating bars (glass) ---------- */
:root .toast {
  background: var(--card-raised); border: 1px solid var(--card-border);
  border-left: 1px solid var(--card-border);
  border-radius: 18px; padding: 14px 16px; font-size: calc(14px * var(--ts, 1));
  box-shadow: var(--shadow-lg), inset 3px 0 0 var(--red);
}
:root .toast.warn { border-left-color: var(--card-border); box-shadow: var(--shadow-lg), inset 3px 0 0 var(--orange); }
:root .toast.info { border-left-color: var(--card-border); box-shadow: var(--shadow-lg), inset 3px 0 0 var(--accent-text); }
:root :is(#toast) {
  background: var(--card-raised); border: 1px solid var(--card-border); border-radius: var(--radius-pill);
  padding: 12px 22px; font-size: calc(14px * var(--ts, 1)); font-weight: 600; box-shadow: var(--shadow-lg);
}
:root #toast.error { border-color: var(--red); }
:root #selectionBar { border-radius: 22px; box-shadow: var(--shadow-lg); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root :is(.toast, #toast, #selectionBar) {
    background: var(--glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  }
}
:root .toast .toast-close { min-height: 0; padding: 0 0 0 6px; background: none; }

/* ---------- 12. Pagination & range controls ---------- */
:root .pagination { gap: 8px; font-size: calc(13px * var(--ts, 1)); }
:root .pagination .pageSizeGroup { border-left: 1px solid var(--hairline); }
:root .rangeBar button.preset {
  background: var(--fill); border: 1px solid transparent; color: var(--text);
  border-radius: var(--radius-pill); font-size: calc(13px * var(--ts, 1)); font-weight: 600; padding: 7px 15px;
}
:root .rangeBar button.preset:hover { background: var(--fill-hover); }
:root .rangeBar button.preset.active { background: var(--accent); color: #fff; }
@media (max-width: 900px) { :root .rangeBar .divider { display: none; } }
:root .exportGroup { border-radius: 18px; background: var(--fill); border: none; }
:root .exportGroupLabel { text-transform: none; letter-spacing: 0; font-size: calc(12px * var(--ts, 1)); }

/* ---------- 13. Login + 404 ---------- */
:root .wrap form {
  background: var(--card-raised); border: 1px solid var(--card-border); border-radius: var(--radius-modal);
  box-shadow: var(--shadow-lg); padding: 32px 28px 26px;
}
:root .wrap form h2 { font-size: calc(22px * var(--ts, 1)); font-weight: 700; letter-spacing: -.03em; }
:root .brand img { border-radius: 22px; }
:root .brand h1 { font-size: calc(24px * var(--ts, 1)); font-weight: 700; letter-spacing: -.03em; }
:root .brand .sub { text-transform: none; font-size: calc(14px * var(--ts, 1)); font-weight: 500; letter-spacing: 0; }
:root .wrap input[type="text"], :root .wrap input[type="password"] { font-size: calc(16px * var(--ts, 1)); min-height: 46px; }
:root .wrap button[type="submit"] { min-height: 46px; font-size: calc(16px * var(--ts, 1)); border-radius: var(--radius-pill); width: 100%; }
:root #togglePw { background: none; color: var(--muted); min-height: 0; }
:root #togglePw:hover { background: none; color: var(--text); }
:root #themeToggle { box-shadow: none; }
:root .box { border-radius: var(--radius-modal); }

/* ---------- 14. Glass theme (existing toggle): refined, still readable ---------- */
:root body.glass {
  background: linear-gradient(135deg, #1b2358 0%, #35246b 38%, #0b4a73 72%, #0a5a48 100%);
  background-attachment: fixed;
}
:root[data-theme="light"] body.glass {
  background: linear-gradient(135deg, #c9d2ff 0%, #e4d1ff 38%, #bfe6ff 72%, #c6f3df 100%);
  background-attachment: fixed;
}
:root body.glass :is(header, .sidebar) {
  background: rgba(28, 28, 31, .62);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border-color: rgba(255, 255, 255, .14);
}
:root[data-theme="light"] body.glass :is(header, .sidebar) {
  background: rgba(255, 255, 255, .62); border-color: rgba(255, 255, 255, .7);
}
/* Apple HIG: Liquid Glass lives in the navigation/controls layer, never the content layer,
   so cards, tiles and panels stay solid in glass mode (this also overrides the page's
   older translucent-card rules) */
:root:root:root:root :is(body.glass .tile, body.glass .panel, body.glass .card, body.glass .tile.c-green, body.glass .tile.c-red,
          body.glass .tile.c-blue, body.glass .tile.c-purple, body.glass .tile.c-orange) {
  background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--card-border);
}
:root :is(body.glass #menuSheet.open) { background: rgba(28, 28, 31, .62); }
:root[data-theme="light"] :is(body.glass #menuSheet.open) { background: rgba(255, 255, 255, .66); }
/* text can sit directly on the gradient in this mode, so lift the secondary text colors */
:root body.glass { --muted: #c6c6cc; }
:root body.glass #offlineBanner { background: color-mix(in srgb, var(--orange) 18%, var(--card)); }
:root[data-theme="light"] body.glass { --muted: #48484d; --orange: #8f3f04; }

/* ---------- 15. Touch targets ---------- */
@media (pointer: coarse) {
  :root:root :is(#_, button, a.btn, .navItem, select, input:not([type="checkbox"]):not([type="radio"])) { min-height: 44px; }
  :root:root :is(#sidebarToggle, #menuToggle, #themeToggle, #glassToggle) { width: 44px; height: 44px; }
  :root:root :is(#_, .tabs button, .shiftTabs button, .visitTabs button, header .tabs button) { min-height: 40px; }
  :root:root :is(#_, .memberDeleteBtn, .coachingDeleteBtn, .catalogRmBtn, .rmBtn, .modalHead > button, .modalCloseBtn) { width: 44px; height: 44px; }
  :root:root:root:root:root :is(#_, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):not(.cell):not(.pageJump) { min-height: 44px; }
  :root .checkbox-field label { min-height: 44px; }
  :root :is(input.cell, select.cell, .pageJump, .pageSizeSelect) { min-height: 40px; }
}
@media (max-width: 640px) {
  :root :is(#modalBox, #settingsBox, #addMemberBox, #membersBox, #catalogBox, #memberDetailBox,
            #extendMemberBox, #addCoachingBox, #coachingPackagesBox, #sellBox, #expenseBox, #doorBox, #dayPassBox, #coachMarkBox, .modal) { padding: 22px 18px; border-radius: 24px; }
  :root :is(h2.pageTitle) { font-size: calc(24px * var(--ts, 1)); }
  :root .panel { padding: 18px; }
}

/* mobile header menu: restore the page's full-width stacked rows that the
   shared control sizing would otherwise override */
@media (max-width: 720px) {
  :root :is(.right, .left-controls) .tabs { width: 100%; }
  :root :is(.right, .left-controls) .tabs button { flex: 1; justify-content: center; }
  :root :is(.right, .left-controls) :is(#themeToggle, #glassToggle) {
    width: 100%; height: auto; min-height: 44px; padding: 8px 16px; gap: 10px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* icon-only toggles get their (already present) title as a visible label */
  :root :is(.right, .left-controls) :is(#themeToggle, #glassToggle)::after {
    content: attr(title); font-size: calc(15px * var(--ts, 1)); font-weight: 500; color: var(--text);
  }
  :root :is(#sidebarToggle, #menuToggle) { border-radius: 50%; width: 44px; height: 44px; padding: 0; }
  :root .right.open, :root .left-controls.open { padding: 4px 0 8px; gap: 10px; }
  :root :is(.right, .left-controls) :is(button, #datePicker):not(.tabs button) { min-height: 44px; }
}

/* empty states: a soft circular badge behind the glyph instead of a bare emoji */
:root .empty-state .empty-icon {
  width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--fill); font-size: calc(36px * var(--ts, 1)); line-height: 1;
}

/* narrow screens: tables full of editable cells keep readable column widths and
   scroll horizontally inside their card, rather than overlapping inputs (the
   page pins each input to a 64px minimum inside a fixed-layout table) */
@media (max-width: 640px) {
  :root .tablewrap:has(input.cell, select.cell) > table { min-width: 560px; }
}

/* ---------- 16. Accessibility preferences ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root :is(header, .sidebar, .toast, #toast, #selectionBar) {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card);
  }
  :root header { background: var(--bg); }
  :root :is(#modalOverlay, #settingsOverlay, #addMemberOverlay, #membersOverlay, #catalogOverlay,
            #memberDetailOverlay, #extendMemberOverlay, #addCoachingOverlay, #coachingPackagesOverlay, #sellOverlay, #expenseOverlay, #doorOverlay, #dayPassOverlay, #coachMarkOverlay, .modalBackdrop) {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  :root { --card-border: rgba(255, 255, 255, .35); --hairline: rgba(255, 255, 255, .3); }
  :root[data-theme="light"] { --card-border: rgba(0, 0, 0, .45); --hairline: rgba(0, 0, 0, .4); }
}
@media (prefers-reduced-motion: reduce) {
  :root *, :root *::before, :root *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  :root .empty-state .empty-icon { animation: none; }
}


/* ---------- 17. Line icons (mask-based, inherit text colour) in place of emoji ---------- */
:root :is(#addMemberBtn,#addMemberTitle,#coachingPackagesBtn,#coachingPackagesTitle,#expiringPanel > h2,#coachingExpiringPanel > h2,#addCoachingTitle,#memberDetailCoachingBtn,#settingsTitle,#membersTitle,#memberDetailTitle,#fetchNow,#extendMemberTitle,#memberDetailExtendBtn,#activeMemberExtendBtn,#catalogTitle,#camCaptureBtn,#discountCaptureBtn,#camUploadBtn,#discountUploadBtn,#extendDiscountUploadBtn)::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .5em; vertical-align: -.16em;
  background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
:root :is(#addMemberBtn, #addMemberTitle)::before { --ic: url("/vendor/sf/i/person-badge-plus.svg"); }
:root :is(#coachingPackagesBtn, #coachingPackagesTitle)::before { --ic: url("/vendor/sf/i/dumbbell.svg"); }
:root :is(#expiringPanel > h2)::before { --ic: url("/vendor/sf/i/clock.svg"); }
:root :is(#coachingExpiringPanel > h2, #addCoachingTitle, #memberDetailCoachingBtn)::before { --ic: url("/vendor/sf/i/dumbbell.svg"); }
:root :is(#settingsTitle)::before { --ic: url("/vendor/sf/i/gearshape.svg"); }
:root :is(#membersTitle)::before { --ic: url("/vendor/sf/i/person-2.svg"); }
:root :is(#memberDetailTitle)::before { --ic: url("/vendor/sf/i/person.svg"); }
:root :is(#fetchNow, #extendMemberTitle, #memberDetailExtendBtn, #activeMemberExtendBtn)::before { --ic: url("/vendor/sf/i/arrow-clockwise.svg"); }
:root :is(#catalogTitle)::before { --ic: url("/vendor/sf/i/cup-and-saucer.svg"); }
:root :is(#camCaptureBtn, #discountCaptureBtn)::before { --ic: url("/vendor/sf/i/camera.svg"); }
:root :is(#camUploadBtn, #discountUploadBtn, #extendDiscountUploadBtn)::before { --ic: url("/vendor/sf/i/photo.svg"); }

/* panel headings are flex rows (title ... count): keep icon + title together, count to the right */
:root :is(#expiringPanel, #coachingExpiringPanel) > h2 { justify-content: flex-start; }
:root :is(#expiringPanel, #coachingExpiringPanel) > h2 .sub { margin-left: auto; }
:root :is(#expiringPanel, #coachingExpiringPanel) > h2::before { flex-shrink: 0; }

/* scroll edge: content fades out softly under the floating header once the page has scrolled */
:root header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none; opacity: 0;
  background: linear-gradient(var(--bg), transparent); transition: opacity var(--dur) var(--ease);
}
:root header.scrolled::after { opacity: .85; }

/* ---------- 18. Mobile: iOS navigation bar + grouped-list menu ---------- */
:root #menuSheet { display: contents; }
:root #menuToggle { display: none; }
:root .navTitle { display: none; }
:root .dateRow .menuOnly { display: none; }
:root .dateRow { display: contents; }
@media (max-width: 720px) {
  :root header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  :root #sidebarToggle { order: 1; }
  :root header .navTitle { display: block; order: 2; flex: 1; text-align: center; font-size: calc(17px * var(--ts, 1)); font-weight: 600; letter-spacing: -.01em; color: var(--text); }
  :root #menuToggle { order: 3; display: inline-flex; align-items: center; justify-content: center; }
  :root header > .spacer { display: none; }
  :root #leftControls { order: 4; }
  :root #headerControls { order: 5; }
  /* the menu is an iOS-style popover anchored under the ⋯ button, over a blurred page */
  :root #menuSheet { display: none; }
  :root #menuSheet.open {
    display: block; position: absolute; z-index: 12; top: calc(100% + 8px); right: 12px;
    width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - 130px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--hairline); border-radius: 22px; box-shadow: var(--shadow-lg);
    transform-origin: top right; animation: menuPop .22s var(--ease);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root #menuSheet.open {
      background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
    }
  }
  @keyframes menuPop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
  :root #menuBackdrop.open {
    display: block; position: fixed; inset: 0; z-index: 9; background: var(--scrim);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  :root #leftControls.open, :root #headerControls.open {
    display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 0; padding: 0; background: none; border: 0; border-radius: 0; overflow: visible;
  }
  :root #headerControls.open { border-top: 8px solid var(--fill); }
  :root:root:root :is(#leftControls, #headerControls).open > :is(button, label, .tabs, .status) {
    width: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none;
    min-height: 48px; justify-content: flex-start; text-align: left; padding: 0 16px; margin: 0;
    border-bottom: 1px solid var(--hairline); font-size: calc(16px * var(--ts, 1)); font-weight: 400; color: var(--text);
  }
  :root:root:root :is(#leftControls, #headerControls).open > :last-child { border-bottom: 0; }
  :root:root:root :is(#leftControls, #headerControls).open > .tabs { padding: 8px 12px; background: transparent; }
  :root:root:root :is(#leftControls, #headerControls).open > .tabs button { min-height: 34px; border-radius: 999px; }
  :root:root:root :is(#leftControls, #headerControls).open > #addMemberBtn { color: var(--accent-text); font-weight: 600; }
  :root:root:root :is(#leftControls, #headerControls).open > #logoutBtn { color: var(--red); }
  :root:root:root :is(#leftControls, #headerControls).open > .status { color: var(--muted); font-size: calc(14px * var(--ts, 1)); display: flex; align-items: center; gap: 8px; }
  :root :is(#leftControls, #headerControls).open > button::before { margin-right: .65em; }
  /* Date row: label left, value right */
  :root .dateRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  :root .dateRow .menuOnly { display: inline; }
  :root:root:root:root:root:root:root .dateRow #datePicker { width: auto; flex: 0 0 auto; background-color: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0; text-align: right; color: var(--accent-text); font-size: calc(16px * var(--ts, 1)); }
  /* theme + glass: labelled iOS switches (state read from the page) */
  :root:root:root :is(#themeToggle, #glassToggle) { font-size: 0 !important; justify-content: space-between !important; gap: 12px; }
  :root:root:root :is(#themeToggle, #glassToggle)::before {
    content: attr(data-label); font-size: calc(16px * var(--ts, 1)); font-weight: 400; color: var(--text);
    -webkit-mask: none; mask: none; background: none; width: auto; height: auto; margin: 0; vertical-align: baseline;
  }
  :root:root:root :is(#themeToggle, #glassToggle)::after {
    content: ""; flex: 0 0 51px; width: 51px; height: 31px; border-radius: 999px; background-color: var(--fill-strong, rgba(120,120,128,.32));
    background-image: radial-gradient(ellipse closest-side, #fff 94%, transparent 100%);
    background-size: 27px 27px; background-repeat: no-repeat; background-position: 2px center;
    transition: background-color var(--dur) var(--ease), background-position var(--dur) var(--ease);
  }
  :root:root:root:not([data-theme="light"]) #themeToggle::after, :root:root:root body.glass #glassToggle::after {
    background-color: var(--green); background-position: 22px center;
  }
  /* pressed: the knob stretches and turns glassy, like iOS */
  :root:root:root :is(#themeToggle, #glassToggle):active::after {
    background-image: radial-gradient(ellipse closest-side, rgba(255,255,255,.88) 94%, transparent 100%);
    background-size: 34px 27px;
  }
  :root:root:root:not([data-theme="light"]) #themeToggle:active::after, :root:root:root body.glass #glassToggle:active::after {
    background-position: 15px center;
  }
}

/* dashboard header keeps one row up to 1280px: same nav bar + popover as phones */
@media (min-width: 721px) and (max-width: 1280px) {
  :root:has(#leftControls) header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  :root:has(#leftControls) #sidebarToggle { order: 1; }
  :root:has(#leftControls) header .navTitle { display: block; order: 2; flex: 1; text-align: center; font-size: calc(17px * var(--ts, 1)); font-weight: 600; letter-spacing: -.01em; color: var(--text); }
  :root:has(#leftControls) #menuToggle { order: 3; display: inline-flex; align-items: center; justify-content: center; }
  :root:has(#leftControls) header > .spacer { display: none; }
  :root:has(#leftControls) #leftControls { order: 4; }
  :root:has(#leftControls) #headerControls { order: 5; }
  /* the menu is an iOS-style popover anchored under the ⋯ button, over a blurred page */
  :root:has(#leftControls) #menuSheet { display: none; }
  :root:has(#leftControls) #menuSheet.open {
    display: block; position: absolute; z-index: 12; top: calc(100% + 8px); right: 12px;
    width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - 130px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--hairline); border-radius: 22px; box-shadow: var(--shadow-lg);
    transform-origin: top right; animation: menuPop .22s var(--ease);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root:has(#leftControls) #menuSheet.open {
      background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
    }
  }
  @keyframes menuPop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
  :root:has(#leftControls) #menuBackdrop.open {
    display: block; position: fixed; inset: 0; z-index: 9; background: var(--scrim);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  :root:has(#leftControls) #leftControls.open, :root:has(#leftControls) #headerControls.open {
    display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 0; padding: 0; background: none; border: 0; border-radius: 0; overflow: visible;
  }
  :root:has(#leftControls) #headerControls.open { border-top: 8px solid var(--fill); }
  :root:has(#leftControls) :is(#leftControls, #headerControls).open > :is(button, label, .tabs, .status) {
    width: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none;
    min-height: 48px; justify-content: flex-start; text-align: left; padding: 0 16px; margin: 0;
    border-bottom: 1px solid var(--hairline); font-size: calc(16px * var(--ts, 1)); font-weight: 400; color: var(--text);
  }
  :root:has(#leftControls) :is(#leftControls, #headerControls).open > :last-child { border-bottom: 0; }
  :root:has(#leftControls) :is(#leftControls, #headerControls).open > .tabs { padding: 8px 12px; background: transparent; }
  :root:has(#leftControls) :is(#leftControls, #headerControls).open > .tabs button { min-height: 34px; border-radius: 999px; }
  :root:has(#leftControls) :is(#leftControls, #headerControls).open > #addMemberBtn { color: var(--accent-text); font-weight: 600; }
  :root:has(#leftControls) :is(#leftControls, #headerControls).open > #logoutBtn { color: var(--red); }
  :root:has(#leftControls) :is(#leftControls, #headerControls).open > .status { color: var(--muted); font-size: calc(14px * var(--ts, 1)); display: flex; align-items: center; gap: 8px; }
  :root:has(#leftControls) :is(#leftControls, #headerControls).open > button::before { margin-right: .65em; }
  /* Date row: label left, value right */
  :root:has(#leftControls) .dateRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  :root:has(#leftControls) .dateRow .menuOnly { display: inline; }
  :root:has(#leftControls) .dateRow #datePicker { width: auto; flex: 0 0 auto; background-color: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0; text-align: right; color: var(--accent-text); font-size: calc(16px * var(--ts, 1)); }
  /* theme + glass: labelled iOS switches (state read from the page) */
  :root:has(#leftControls) :is(#themeToggle, #glassToggle) { font-size: 0 !important; justify-content: space-between !important; gap: 12px; }
  :root:has(#leftControls) :is(#themeToggle, #glassToggle)::before {
    content: attr(data-label); font-size: calc(16px * var(--ts, 1)); font-weight: 400; color: var(--text);
    -webkit-mask: none; mask: none; background: none; width: auto; height: auto; margin: 0; vertical-align: baseline;
  }
  :root:has(#leftControls) :is(#themeToggle, #glassToggle)::after {
    content: ""; flex: 0 0 51px; width: 51px; height: 31px; border-radius: 999px; background-color: var(--fill-strong, rgba(120,120,128,.32));
    background-image: radial-gradient(ellipse closest-side, #fff 94%, transparent 100%);
    background-size: 27px 27px; background-repeat: no-repeat; background-position: 2px center;
    transition: background-color var(--dur) var(--ease), background-position var(--dur) var(--ease);
  }
  :root:has(#leftControls):not([data-theme="light"]) #themeToggle::after, :root:has(#leftControls) body.glass #glassToggle::after {
    background-color: var(--green); background-position: 22px center;
  }
  /* pressed: the knob stretches and turns glassy, like iOS */
  :root:has(#leftControls) :is(#themeToggle, #glassToggle):active::after {
    background-image: radial-gradient(ellipse closest-side, rgba(255,255,255,.88) 94%, transparent 100%);
    background-size: 34px 27px;
  }
  :root:has(#leftControls):not([data-theme="light"]) #themeToggle:active::after, :root:has(#leftControls) body.glass #glassToggle:active::after {
    background-position: 15px center;
  }
}

/* ---------- 19. Daily Report: export popover, status pill, line icons ---------- */
:root :is(.shiftTabs button[data-shift="morning"],.shiftTabs button[data-shift="afternoon"],#exportMenuBtn,#exportShiftPdfBtn, #exportDayPdfBtn,#exportShiftXlsxBtn, #exportDayXlsxBtn,#saveBtn,#closeShiftBtn,#reopenBtn)::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .5em; vertical-align: -.17em;
  background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
:root :is(.shiftTabs button[data-shift="morning"])::before { --ic: url("/vendor/sf/i/sun-max-fill.svg"); }
:root :is(.shiftTabs button[data-shift="afternoon"])::before { --ic: url("/vendor/sf/i/cloud-sun-fill.svg"); }
:root :is(#exportMenuBtn)::before { --ic: url("/vendor/sf/i/square-and-arrow-up.svg"); }
:root :is(#exportShiftPdfBtn, #exportDayPdfBtn)::before { --ic: url("/vendor/sf/i/doc-text.svg"); }
:root :is(#exportShiftXlsxBtn, #exportDayXlsxBtn)::before { --ic: url("/vendor/sf/i/tablecells.svg"); }
:root :is(#saveBtn)::before { --ic: url("/vendor/sf/i/square-and-arrow-down.svg"); }
:root :is(#closeShiftBtn)::before { --ic: url("/vendor/sf/i/lock.svg"); }
:root :is(#reopenBtn)::before { --ic: url("/vendor/sf/i/lock-open.svg"); }

:root .exportMenu { position: relative; }
:root:root:root #exportMenuBtn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--fill); color: var(--accent-text); font-size: calc(14px * var(--ts, 1)); font-weight: 600; box-shadow: none;
}
:root:root:root #exportMenuBtn:hover { background: var(--fill-hover); transform: none; }
:root #exportPopover {
  position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); min-width: 250px; padding: 6px;
  background: var(--card); border: 1px solid var(--hairline); border-radius: 18px; box-shadow: var(--shadow-lg);
  transform-origin: top right; animation: menuPop .2s var(--ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root #exportPopover { background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); }
}
:root #exportPopover[hidden] { display: none; }
:root #exportPopover .exportGroupLabel { padding: 8px 12px 4px; font-size: calc(12px * var(--ts, 1)); font-weight: 600; color: var(--muted); }
:root #exportPopover .exportGroupLabel + .menuItem { margin-top: 0; }
:root #exportPopover .menuItem + .exportGroupLabel { border-top: 1px solid var(--hairline); margin-top: 6px; padding-top: 12px; }
:root:root:root #exportPopover .menuItem {
  display: flex; align-items: center; width: 100%; text-align: left; padding: 10px 12px; min-height: 44px; border: 0; border-radius: 12px;
  background: transparent; box-shadow: none; transform: none; font-size: calc(15px * var(--ts, 1)); font-weight: 400; color: var(--text);
}
:root:root:root #exportPopover .menuItem:hover { background: var(--fill); }
@keyframes menuPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
/* status: quiet pill instead of a full-width bar */
:root .statusBanner {
  display: inline-flex; width: auto; padding: 7px 14px; border-radius: 999px; border: 0; background: var(--fill);
  color: var(--text); font-size: calc(13.5px * var(--ts, 1)); font-weight: 500; box-shadow: none;
}
:root:root:root #closeShiftBtn { background: var(--fill); background-image: none; color: var(--accent-text); box-shadow: none; }
:root:root:root #closeShiftBtn:hover { background: var(--fill-hover); }
:root :is(.statusBanner.open, .statusBanner.closed, .statusBanner.locked) { background: var(--fill); border: 0; }
:root .statusBanner.open { color: var(--green); }
:root .statusBanner.closed { color: var(--orange); }
:root .statusBanner.locked { color: var(--muted); }
:root .statusDot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
/* the old nested export capsules are gone; keep the label style neutral if reused */
:root .exportToolbar { display: none; }

/* ---------- 20. iOS-style alert sheets (replace native confirm/prompt) ---------- */
:root.alertOpen { overflow: hidden; }
:root .alertOverlay {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: alertFade .2s var(--ease);
}
:root .alertSheet {
  width: min(300px, 100%); border-radius: 22px; overflow: hidden; text-align: center;
  background: var(--card); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg);
  animation: alertPop .26s var(--ease); color: var(--text);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root .alertSheet { background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); }
}
:root .alertTitle { margin: 0; padding: 20px 20px 4px; font-size: calc(17px * var(--ts, 1)); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
:root .alertMessage { margin: 0; padding: 0 20px 18px; font-size: calc(13px * var(--ts, 1)); line-height: 1.4; color: var(--muted); }
:root .alertTitle:last-child { padding-bottom: 18px; }
:root .alertInput {
  display: block; width: calc(100% - 32px); margin: 0 16px 16px; padding: 9px 12px; font: inherit; font-size: calc(15px * var(--ts, 1)); color: var(--text);
  background: var(--fill); border: 1px solid transparent; border-radius: 10px; outline: none;
}
:root .alertInput:focus { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--ring); }
:root .alertActions { display: flex; border-top: 1px solid var(--hairline); }
:root .alertBtn {
  flex: 1; min-height: 46px; padding: 0 12px; border: 0; background: transparent; font: inherit; font-size: calc(17px * var(--ts, 1)); font-weight: 400;
  color: var(--accent-text); cursor: pointer; border-radius: 0;
}
:root .alertBtn + .alertBtn { border-left: 1px solid var(--hairline); font-weight: 600; }
:root .alertBtn:hover { background: var(--fill); }
:root .alertBtn:active { background: var(--fill-strong); }
:root .alertBtn.destructive { color: var(--red); }
:root .alertBtn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
@keyframes alertFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes alertPop { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }

/* ---------- 21. Review pass: list actions, KPI grid, members table ---------- */
/* row actions read as plain text buttons (accent / red), like iOS list rows */
:root:root:root :is(#_, .iconBtn) { background: transparent; box-shadow: none; color: var(--accent-text); padding-left: 10px; padding-right: 10px; }
:root:root:root :is(#_, .iconBtn.danger) { background: transparent; color: var(--red); }
:root:root:root :is(#_, .iconBtn):hover:not(:disabled) { background: var(--fill); }
/* KPI cards wrap and stretch evenly instead of leaving an orphan cell */
:root .kpiGrid { display: flex; flex-wrap: wrap; gap: 14px; }
:root .kpiGrid > .kpiCard { flex: 1 1 130px; }
/* members modal: the long tail of columns lives in Member Details (still searchable) */
:root #membersBox table.grid :is(th, td):is(:nth-child(7), :nth-child(9), :nth-child(10), :nth-child(14)) { display: none; }

/* ---------- 22. Review pass: line-icon controls replace emoji / text glyphs ---------- */
:root :is(#themeToggle, #glassToggle, .modalHead > button, .modalCloseBtn, #photoLightboxClose, #lightboxClose, .toast-close,
          .rmBtn, .catalogRmBtn, .dl, #togglePw) { font-size: 0; }
:root :is(#themeToggle, #glassToggle, .modalHead > button, .modalCloseBtn, #photoLightboxClose, #lightboxClose, .toast-close,
          .rmBtn, .catalogRmBtn, .dl, #togglePw)::before {
  content: ""; display: inline-block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
:root :is(.modalHead > button, .modalCloseBtn, #photoLightboxClose, #lightboxClose, .toast-close, .rmBtn, .catalogRmBtn)::before { --ic: url("/vendor/sf/i/xmark.svg"); width: 14px; height: 14px; }
:root #themeToggle::before { --ic: url("/vendor/sf/i/moon.svg"); }
:root[data-theme="light"] #themeToggle::before { --ic: url("/vendor/sf/i/sun-max.svg"); }
:root #glassToggle::before { --ic: url("/vendor/sf/i/rectangle-on-rectangle.svg"); }
:root .dl::before { --ic: url("/vendor/sf/i/arrow-down-to-line.svg"); width: 16px; height: 16px; }
:root #togglePw::before { --ic: url("/vendor/sf/i/eye.svg"); }
:root #togglePw.shown::before { --ic: url("/vendor/sf/i/eye-slash.svg"); }
:root .emptySvg { color: var(--muted); }
:root :is(.empty-state .icon, .empty-state .empty-icon) { color: var(--muted); }

/* ---------- 23. Member Details: profile header + grouped lists ---------- */
:root .memberDetailTop { flex-direction: column; align-items: center; gap: 14px; margin-bottom: 8px; }
:root .memberDetailPhoto { width: 104px; height: 104px; border-radius: 50%; }
:root .memberDetailFields { display: block; width: 100%; min-width: 0; flex: none; }
:root .mdProfile { text-align: center; margin-bottom: 6px; }
:root .mdName { font-size: calc(22px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
:root .mdSub { margin-top: 4px; font-size: calc(14px * var(--ts, 1)); color: var(--muted); display: flex; gap: 8px; align-items: center; justify-content: center; }
:root .mdGroupTitle { margin: 18px 0 6px 16px; font-size: calc(12px * var(--ts, 1)); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
:root .mdGroup { background: var(--fill); border-radius: 16px; overflow: hidden; }
:root .memberDetailFields .mdf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 16px; margin: 0;
  border-bottom: 1px solid var(--hairline);
}
:root .mdGroup > .mdf:last-child { border-bottom: 0; }
:root .memberDetailFields .mdf label { margin: 0; font-size: calc(15px * var(--ts, 1)); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); flex-shrink: 0; }
:root .memberDetailFields .mdf .val { font-size: calc(15px * var(--ts, 1)); font-weight: 400; text-align: right; color: var(--muted); min-width: 0; }
:root .memberDetailFields .mdf .val b { color: var(--text); font-weight: 600; }
:root .memberDetailFields .mdf .hint { font-size: calc(12px * var(--ts, 1)); margin-top: 2px; }
:root .memberDetailFields .mdf .enrollDots { justify-content: flex-end; }
:root .memberDetailBtnRow { margin-top: 16px; }

/* ---------- 24. Long forms: grouped sections, compact camera, floating action bar ---------- */
:root .formGroup { border: 1px solid var(--hairline); border-radius: 16px; padding: 14px 16px 6px; margin: 0 0 16px; }
:root .formGroupTitle { margin: -2px 0 10px; font-size: calc(12px * var(--ts, 1)); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
:root #memberPhotoSection { border: 1px solid var(--hairline); border-radius: 16px; padding: 14px 16px 6px; margin: 0 0 16px; }
:root #addMemberBox .camWrap, :root #addMemberBox .camThumbWrap { max-width: 300px; margin-left: auto; margin-right: auto; border-radius: 16px; overflow: hidden; }
:root .addMemberFooter {
  position: sticky; bottom: 0; z-index: 5; margin-top: 8px; padding: 10px 12px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--hairline); box-shadow: var(--shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root .addMemberFooter { background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
}

/* ---------- 25. Tooltips + enrollment status ---------- */
:root .tooltip {
  position: fixed; z-index: 3000; max-width: 260px; padding: 6px 10px; border-radius: 10px; pointer-events: none;
  font-size: calc(12.5px * var(--ts, 1)); line-height: 1.35; font-weight: 500; color: var(--text);
  background: var(--card); border: 1px solid var(--hairline); box-shadow: var(--shadow);
  opacity: 0; transform: scale(.96); transition: opacity .12s var(--ease), transform .12s var(--ease);
}
:root .tooltip.show { opacity: 1; transform: none; }
:root .tooltip[hidden] { display: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root .tooltip { background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
:root .enrollDots { gap: 4px 14px; }
:root .enrollItem { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--ts, 1)); font-weight: 500; color: var(--text); white-space: nowrap; }
:root .enrollItem::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; flex-shrink: 0; background: currentColor; }
:root .enrollItem.ok::before { background: var(--green); }
:root .enrollItem.bad::before { background: var(--red); }
:root .enrollItem.off { color: var(--muted); }
:root .enrollItem.off::before { background: transparent; border: 1.5px solid var(--muted); }
@media (prefers-reduced-motion: reduce) { :root .tooltip { transition: none; } }

/* ---------- 26. Segmented controls: sliding thumb ---------- */
:root :is(.tabs, .shiftTabs, .visitTabs).segJs { position: relative; }
:root :is(.tabs, .shiftTabs, .visitTabs).segJs::before {
  content: ""; position: absolute; left: 0; top: 0; width: var(--seg-w, 0); height: var(--seg-h, 0);
  transform: translate(var(--seg-x, 0), var(--seg-y, 0)); border-radius: var(--radius-pill);
  background: var(--seg-active); box-shadow: 0 1px 3px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .06);
}
:root :is(.tabs, .shiftTabs, .visitTabs).segReady::before {
  transition: transform .3s var(--ease), width .3s var(--ease), height .3s var(--ease);
}
:root :is(.tabs, .shiftTabs, .visitTabs).segJs > button { position: relative; z-index: 1; }
:root:root:root:root :is(#_, .tabs.segJs > button.active, .shiftTabs.segJs > button.active, .visitTabs.segJs > button.active),
:root:root:root:root :is(#_, .tabs.segJs > button.active, .shiftTabs.segJs > button.active, .visitTabs.segJs > button.active):hover:not(:disabled) {
  background: transparent; box-shadow: none;
}
@media (prefers-reduced-motion: reduce) { :root :is(.tabs, .shiftTabs, .visitTabs).segReady::before { transition: none; } }

/* ---------- 27. Text Size slider (iOS style: small A, ticks, large A) ---------- */
:root .textSize { display: inline-flex; flex-direction: column; justify-content: center; }
:root .tsHead { display: none; }
:root .tsSlider { display: flex; align-items: center; gap: 10px; }
:root .tsSlider .tsSmall { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1; }
:root .tsSlider .tsLarge { font-size: 21px; font-weight: 600; color: var(--muted); line-height: 1; }
:root .tsSlider input[type="range"] {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 96px; height: 30px; margin: 0; padding: 0; cursor: pointer;
  border: 0; outline: none; border-radius: 0; box-shadow: none; color: var(--muted);
  background:
    linear-gradient(var(--fill-strong), var(--fill-strong)) center / 100% 4px no-repeat,
    linear-gradient(90deg, currentColor 0 2px, transparent 2px) 14px center / calc((100% - 30px) / 6) 10px repeat-x;
  background-color: transparent;
}
:root .tsSlider input[type="range"]::-webkit-slider-runnable-track { height: 30px; background: transparent; border: 0; }
:root .tsSlider input[type="range"]::-moz-range-track { height: 30px; background: transparent; border: 0; }
:root .tsSlider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%;
  background: #fff; border: .5px solid rgba(0, 0, 0, .08); box-shadow: 0 2px 6px rgba(0, 0, 0, .28), 0 0 1px rgba(0, 0, 0, .3);
  transition: transform .15s var(--ease);
}
:root .tsSlider input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; background: #fff; border: .5px solid rgba(0, 0, 0, .08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28), 0 0 1px rgba(0, 0, 0, .3);
}
:root .tsSlider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); }
:root .tsSlider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ring), 0 2px 6px rgba(0, 0, 0, .28); }
/* inside the menu popover: heading row (label + current size) above the slider */
:root :is(#leftControls, #headerControls).open > .textSize {
  display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; padding: 10px 16px 8px;
  border-bottom: 1px solid var(--hairline);
}
:root :is(#leftControls, #headerControls).open > .textSize .tsHead { display: flex; align-items: center; justify-content: space-between; }
:root :is(#leftControls, #headerControls).open > .textSize .tsLabel { display: inline; font-size: calc(16px * var(--ts, 1)); color: var(--text); }
:root:root:root .textSize .tsValue {
  border: 0; background: transparent; box-shadow: none; padding: 4px 0; min-height: 0; font-family: inherit;
  font-size: calc(14px * var(--ts, 1)); font-weight: 500; color: var(--muted); cursor: pointer;
}

/* chips never wrap their own text (matters at large Text Size); the row of chips wraps instead */
:root :is(.badge, .chip, .permChip, .pill) { white-space: nowrap; }

/* ---------- 28. "Expiring soon" as an iOS-style list (photo, name + subtitle, status, chevron) ---------- */
:root :is(#expiringPanel, #coachingExpiringPanel) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root :is(#expiringPanel, #coachingExpiringPanel) :is(table, tbody) { display: block; width: 100%; }
:root :is(#expiringPanel, #coachingExpiringPanel) tr.listRow {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
  padding: 10px 12px; margin: 0 -12px; border-radius: 14px; border: 0; position: relative;
  transition: background-color var(--dur) var(--ease);
}
:root :is(#expiringPanel, #coachingExpiringPanel) tr.listRow + tr.listRow::before {
  content: ""; position: absolute; top: 0; left: 80px; right: 12px; border-top: 1px solid var(--hairline);
}
:root :is(#expiringPanel, #coachingExpiringPanel) tr.listRow:hover { background: var(--fill); }
:root :is(#expiringPanel, #coachingExpiringPanel) tr.listRow:hover::before, :root :is(#expiringPanel, #coachingExpiringPanel) tr.listRow:hover + tr.listRow::before { border-color: transparent; }
:root :is(#expiringPanel, #coachingExpiringPanel) tr.listRow > td { display: block; padding: 0; border: 0; background: none; }
:root :is(#expiringPanel, #coachingExpiringPanel) .lrName { font-size: calc(16px * var(--ts, 1)); font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root :is(#expiringPanel, #coachingExpiringPanel) .lrSub { margin-top: 2px; font-size: calc(13.5px * var(--ts, 1)); color: var(--muted); font-variant-numeric: tabular-nums; }
:root :is(#expiringPanel, #coachingExpiringPanel) .lrEnd { display: flex !important; align-items: center; gap: 8px; }
:root :is(#expiringPanel, #coachingExpiringPanel) .lrEnd::after {
  content: ""; width: 14px; height: 14px; background: var(--muted); opacity: .6;
  -webkit-mask: url("/vendor/sf/i/chevron-right.svg") center / contain no-repeat;
  mask: url("/vendor/sf/i/chevron-right.svg") center / contain no-repeat;
}
:root :is(#expiringPanel, #coachingExpiringPanel) tr:not(.listRow) { display: block; padding: 18px 0; }
:root :is(#expiringPanel, #coachingExpiringPanel) tr:not(.listRow) > td { display: block; }
:root :is(#expiringPanel, #coachingExpiringPanel) tr.listRow.noNav { cursor: default; }
:root :is(#expiringPanel, #coachingExpiringPanel) tr.listRow.noNav:hover { background: transparent; }
:root :is(#expiringPanel, #coachingExpiringPanel) tr.listRow.noNav .lrEnd::after { display: none; }
:root .lrAvatar {
  width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-size: calc(18px * var(--ts, 1)); font-weight: 600;
}
:root #coachingExpiringPanel .lrSub { white-space: normal; }
:root :is(#expiringPanel, #coachingExpiringPanel) .tablewrap { overflow: visible; }

/* ---------- 29. Add Member on wide screens: two-column sheet (Photo | Details, Membership, Payment) ---------- */
@media (min-width: 900px) {
  :root #addMemberBox {
    max-width: 980px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 24px; align-items: start;
  }
  :root #addMemberBox > * { grid-column: 1 / -1; }
  :root #addMemberBox > .modalHead { grid-row: 1; }
  :root #addMemberBox > .field:first-of-type { grid-row: 2; }
  :root #addMemberBox > #memberNotices { grid-row: 3; }
  :root #addMemberBox > #memberPhotoSection { grid-column: 1; grid-row: 4 / span 3; position: sticky; top: 0; }
  :root #addMemberBox > .formGroup { grid-column: 2; }
  :root #addMemberBox > .formGroup:nth-of-type(1) { grid-row: 4; }
  :root #addMemberBox > .formGroup:nth-of-type(2) { grid-row: 5; }
  :root #addMemberBox > .formGroup:nth-of-type(3) { grid-row: 6; }
  :root #addMemberBox > .addMemberFooter { grid-row: 7; }
  :root #addMemberBox .camWrap, :root #addMemberBox .camThumbWrap { max-width: 340px; }
  /* coaching-only registration has no photo: let the cards use the full width instead of leaving a gap */
  :root #addMemberBox:has(> #memberPhotoSection[hidden]) > .formGroup { grid-column: 1 / -1; }
  :root #addMemberBox:has(> #memberPhotoSection[hidden]) > :is(.formGroup, #memberNotices) { width: 100%; max-width: 560px; justify-self: center; }
}

/* ---------- 30. Other sheets on wide screens: no more phone-sized dialogs ---------- */
@media (min-width: 900px) {
  :root :is(#extendMemberBox, #addCoachingBox) { max-width: 580px; }
  :root #addCoachingBox { max-width: 580px; }
  :root #memberDetailBox { max-width: 720px; }
  :root #catalogBox { max-width: 720px; }
  /* Settings: the two setting cards sit side by side; bulk actions span the full width */
  :root #settingsBox { max-width: 780px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; align-items: stretch; }
  :root #settingsBox > * { grid-column: 1 / -1; }
  :root #settingsBox > .formGroup:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  :root #settingsBox > .formGroup:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  :root #settingsBox > #settingsSave { justify-self: start; }
}

/* ---------- 31. One notice card for "already active" + "renewing" (Apple callout style) ---------- */
:root #memberNotices {
  display: flex; flex-direction: column; overflow: hidden; margin: 0 0 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--green) 11%, var(--card));
}
:root #memberNotices:not(:has(> :not([hidden]))) { display: none; }
:root:root:root #memberNotices > :is(.activeMemberBanner, .renewingBanner) {
  margin: 0; border: 0; border-radius: 0; background: transparent; padding: 14px 16px; color: var(--text); font-weight: 400;
}
:root:root:root #memberNotices > :is(.activeMemberBanner, .renewingBanner):not([hidden]) ~ :is(.activeMemberBanner, .renewingBanner):not([hidden]) {
  border-top: 1px solid color-mix(in srgb, var(--green) 22%, var(--hairline));
}
:root:root:root #memberNotices > .activeMemberBanner:not([hidden]) {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: start;
}
:root #memberNotices > .activeMemberBanner::before {
  content: ""; width: 24px; height: 24px; background: var(--green);
  -webkit-mask: url("/vendor/sf/i/info-circle.svg") center / contain no-repeat;
  mask: url("/vendor/sf/i/info-circle.svg") center / contain no-repeat;
}
:root #activeMemberBannerText .ntTitle { display: block; font-size: calc(15px * var(--ts, 1)); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--text); }
:root #activeMemberBannerText .ntDetail { display: block; margin-top: 3px; font-size: calc(13px * var(--ts, 1)); font-weight: 400; line-height: 1.4; color: var(--muted); }
:root:root:root #memberNotices #activeMemberExtendBtn {
  grid-column: 2; justify-self: start; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); font-size: calc(14px * var(--ts, 1)); font-weight: 600; box-shadow: none;
}
:root:root:root #memberNotices #activeMemberExtendBtn:hover { background: color-mix(in srgb, var(--green) 28%, transparent); filter: none; }
:root:root:root #memberNotices #activeMemberExtendBtn[hidden] { display: none; }
:root:root:root #memberNotices > .renewingBanner:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
:root #memberNotices #renewingBannerText { font-size: calc(13px * var(--ts, 1)); color: var(--muted); line-height: 1.4; flex: 1 1 200px; }
:root:root:root #memberNotices #renewingBannerClear {
  background: none; border: 0; padding: 4px 0; min-height: 0; font-size: calc(14px * var(--ts, 1)); font-weight: 500;
  color: var(--accent-text); text-decoration: none; cursor: pointer;
}

/* ---------- 32. Extend mode: an active member is selected, so the sheet only asks for what an extension needs ---------- */
:root .extendSummary { display: none; }
:root #addMemberBox.extend-mode > .extendSummary:not([hidden]) { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
:root #addMemberBox.extend-mode > #memberPhotoSection,
:root #addMemberBox.extend-mode > .formGroup:nth-of-type(1),
:root #addMemberBox.extend-mode #activeMemberExtendBtn { display: none; }
:root .esPhoto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--fill); }
:root .esPhoto.esNone { display: inline-flex; align-items: center; justify-content: center; font-size: calc(22px * var(--ts, 1)); font-weight: 600; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
:root .esName { font-size: calc(18px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
:root .esSub { margin-top: 2px; font-size: calc(13.5px * var(--ts, 1)); color: var(--muted); }
@media (min-width: 900px) {
  :root #addMemberBox.extend-mode > .extendSummary { grid-row: 4; }
  :root #addMemberBox.extend-mode > .formGroup { grid-column: 1 / -1; }
  :root #addMemberBox.extend-mode > :is(.formGroup, #memberNotices, .extendSummary) { width: 100%; max-width: 560px; justify-self: center; }
}
:root #addMemberBox.extend-mode #addMemberTitle::before { --ic: url("/vendor/sf/i/calendar-badge-plus.svg"); }

/* ---------- 33. Form sheet (appForm) + multi-line alert messages ---------- */
:root .alertMessage { white-space: pre-line; }
:root .formSheet { width: min(380px, 100%); text-align: left; }
:root .formSheet .alertTitle { text-align: center; }
:root .formSheet .alertMessage { text-align: center; }
:root .formSheetBody { padding: 0 16px 6px; display: flex; flex-direction: column; gap: 12px; }
:root .formSheetField label { display: block; margin: 0 0 4px 2px; font-size: calc(12.5px * var(--ts, 1)); font-weight: 600; color: var(--muted); }
:root .formSheet .alertInput { width: 100%; margin: 0; box-sizing: border-box; }
:root .formSheet select.alertInput { appearance: auto; }
:root .formSheetError { margin: 8px 20px 0; font-size: calc(13px * var(--ts, 1)); color: var(--red); text-align: center; }
:root .formSheetError[hidden] { display: none; }
:root .formSheet .alertActions { margin-top: 14px; }
:root #memberDetailEditBtn::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .5em; vertical-align: -.17em; background: currentColor;
  -webkit-mask: url("/vendor/sf/i/pencil.svg") center / contain no-repeat;
  mask: url("/vendor/sf/i/pencil.svg") center / contain no-repeat;
}

:root #customerScreenBtn::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .5em; vertical-align: -.17em; background: currentColor;
  -webkit-mask: url("/vendor/sf/i/display.svg") center / contain no-repeat;
  mask: url("/vendor/sf/i/display.svg") center / contain no-repeat;
}

/* ---------- 34. Front desk: "Waiting at the kiosk" cards ---------- */
:root #kioskPanel { border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), var(--shadow); }
:root .kioskCard { padding: 16px 0; border-top: 1px solid var(--hairline); }
:root .kioskCard:first-child { border-top: 0; padding-top: 6px; }
:root .kcTop { display: flex; align-items: center; gap: 14px; }
:root .kcPhoto { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--fill); }
:root .kcPhoto.kcNone { display: inline-flex; align-items: center; justify-content: center; font-size: calc(24px * var(--ts, 1)); font-weight: 600; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
:root .kcWho { flex: 1; min-width: 0; }
:root .kcName { font-size: calc(18px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .kcPlan { margin-top: 2px; font-size: calc(14px * var(--ts, 1)); color: var(--muted); }
:root .kcDue { text-align: right; line-height: 1.1; }
:root .kcDue span { display: block; font-size: calc(12px * var(--ts, 1)); color: var(--muted); font-weight: 600; }
:root .kcDue b { font-size: calc(26px * var(--ts, 1)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
:root .kcPay { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
:root .kcSeg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fill); }
:root:root:root .kcSeg button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: calc(14px * var(--ts, 1)); font-weight: 600; cursor: pointer; box-shadow: none; }
:root:root:root .kcSeg button.on { background: var(--seg-active); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.22); }
:root:root:root .kioskCard input { min-height: 38px; width: 140px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--fill); color: var(--text); font: inherit; font-size: calc(15px * var(--ts, 1)); }
:root .kioskCard input[hidden] { display: none; }
:root .kcError { margin-top: 10px; font-size: calc(14px * var(--ts, 1)); color: var(--red); }
:root .kcError[hidden] { display: none; }
:root .kcActions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
:root:root:root .kcActions button { min-height: 42px; padding: 0 22px; border: 0; border-radius: 999px; font: inherit; font-size: calc(15px * var(--ts, 1)); font-weight: 600; cursor: pointer; box-shadow: none; }
:root:root:root .kcReject { background: var(--fill); color: var(--red); }
:root:root:root .kcConfirm { background: var(--accent); color: #fff; }
:root:root:root .kcConfirm:disabled { opacity: .5; }

/* ---------- 35. Open door: header button, member-sheet button, action sheet ---------- */
:root #openDoorBtn.hidden { display: none; }
:root :is(#openDoorBtn, #memberDetailDoorBtn)::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .5em; vertical-align: -.17em; background: currentColor;
  -webkit-mask: url("/vendor/sf/i/door-left-hand-open.svg") center / contain no-repeat;
  mask: url("/vendor/sf/i/door-left-hand-open.svg") center / contain no-repeat;
}
:root .actionOverlay { align-items: flex-end; padding: 0 12px 12px; }
:root .actionSheet { width: min(420px, 100%); background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: flex; flex-direction: column; gap: 8px; animation: actionUp .3s var(--ease); }
:root .actionGroup { border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root .actionGroup { background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); }
}
:root .actionGroup .alertTitle { padding-top: 18px; }
:root .actionBtn { display: block; width: 100%; min-height: 56px; padding: 0 16px; border: 0; border-top: 1px solid var(--hairline); background: transparent; font: inherit; font-size: calc(19px * var(--ts, 1)); color: var(--accent-text); cursor: pointer; }
:root .actionBtn:hover { background: var(--fill); }
:root .actionBtn:active { background: var(--fill-strong); }
:root .actionBtn.destructive { color: var(--red); }
:root .actionCancel { border: 1px solid var(--hairline); border-radius: 22px; background: var(--card); font-weight: 600; box-shadow: var(--shadow-lg); }
:root .actionBtn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
@keyframes actionUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* 36. Activity cards: edge-to-edge photo, calm status */
:root #feed { align-items: stretch; }
:root .card { display: flex; flex-direction: column; }
:root .card .thumb { aspect-ratio: 1 / 1; background: #0a0e17; flex: none; }
:root .card .thumb img { height: 100%; object-fit: cover; object-position: 50% 28%; }
:root .card .body { flex: 1; }
:root .card .doorLabel { text-transform: uppercase; letter-spacing: .04em; font-size: calc(11px * var(--ts, 1)); font-weight: 600; }
:root .card .badges { align-items: center; gap: 6px 14px; min-height: calc(26px * var(--ts, 1)); }
:root .badge .dot, :root .dot { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--ts, 1)); font-weight: 500; color: var(--muted); }
:root .dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
:root .dot.ok::before { background: var(--green); }
:root .attemptsLink { display: inline-flex; align-items: center; gap: 4px; font-size: calc(13px * var(--ts, 1)); font-weight: 500; color: var(--accent-text); }
:root .attemptsLink i { width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .7; }

:root .dayHead { grid-column: 1 / -1; margin: 10px 2px -4px; font-size: calc(22px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; color: var(--text); }
:root .dayHead:first-child { margin-top: 0; }

/* 37. Desktop toolbar: one calm row, occasional controls in a "more" popover */
:root:root:root #moreBtn, :root #moreMenu { display: none; }
@media (min-width: 1281px) {
  :root :is(#leftControls, #headerControls) { display: contents; }
  :root header { row-gap: 10px; }
  :root #leftControls .tabs { order: 1; }
  :root #datePicker { order: 2; }
  :root header .status { order: 3; display: inline-flex; align-items: center; white-space: nowrap; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--fill); font-weight: 500; }
  :root #liveBtn { order: 4; }
  :root:root #fetchNow { order: 10; margin-left: auto; width: 36px; height: 36px; min-height: 0; padding: 0; justify-content: center; font-size: 0; }
  :root:root #fetchNow::before { margin: 0; }
  :root #openDoorBtn { order: 11; }
  :root #addMemberBtn { order: 12; }
  :root:root:root #moreBtn { order: 13; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; min-height: 0; font-size: calc(17px * var(--ts, 1)); }
  :root #logoutBtn { display: none; }

  :root #menuBackdrop.open {
    display: block; position: fixed; inset: 0; z-index: 9; background: var(--scrim);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  :root #moreMenu.open {
    display: block; position: absolute; z-index: 12; top: calc(100% + 8px); right: clamp(12px, 2vw, 24px);
    width: 320px; max-height: calc(100dvh - 130px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--hairline); border-radius: 22px; box-shadow: var(--shadow-lg);
    transform-origin: top right; animation: menuPop .22s var(--ease);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root #moreMenu.open { background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); }
  }
  :root:root:root:root #moreMenu > button:not(.hidden) {
    display: flex; align-items: center; justify-content: flex-start; gap: 0; width: 100%; height: auto; min-height: 48px;
    padding: 0 16px; margin: 0; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0;
    background: transparent; box-shadow: none; transform: none; text-align: left;
    font-size: calc(16px * var(--ts, 1)); font-weight: 400; color: var(--text);
  }
  :root:root:root:root #moreMenu > button:not(.hidden):hover:not(:disabled) { background: var(--fill); }
  :root:root:root:root #moreMenu > button:not(.hidden):last-child { border-bottom: 0; }
  :root #moreMenu > button::before { margin-right: .65em; }
  :root:root:root:root #moreMenu > :is(#themeToggle, #glassToggle) { font-size: 0; justify-content: space-between; gap: 12px; }
  :root:root:root:root #moreMenu > :is(#themeToggle, #glassToggle)::before {
    content: attr(data-label); font-size: calc(16px * var(--ts, 1)); font-weight: 400; color: var(--text);
    -webkit-mask: none; mask: none; background: none; width: auto; height: auto; margin: 0; vertical-align: baseline;
  }
  :root:root:root:root #moreMenu > :is(#themeToggle, #glassToggle)::after {
    content: ""; flex: 0 0 51px; width: 51px; height: 31px; border-radius: 999px; background-color: var(--fill-strong, rgba(120,120,128,.32));
    background-image: radial-gradient(ellipse closest-side, #fff 94%, transparent 100%);
    background-size: 27px 27px; background-repeat: no-repeat; background-position: 2px center;
    transition: background-color var(--dur) var(--ease), background-position var(--dur) var(--ease);
  }
  :root:root:root:root:not([data-theme="light"]) #moreMenu > #themeToggle::after, :root:root:root:root body.glass #moreMenu > #glassToggle::after { background-color: var(--green); background-position: 22px center; }
  :root:root:root:root #moreMenu > :is(#themeToggle, #glassToggle):active::after { background-image: radial-gradient(ellipse closest-side, rgba(255,255,255,.88) 94%, transparent 100%); background-size: 34px 27px; }
  :root:root:root:root:not([data-theme="light"]) #moreMenu > #themeToggle:active::after, :root:root:root:root body.glass #moreMenu > #glassToggle:active::after { background-position: 15px center; }
  :root #moreMenu > .textSize {
    display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; padding: 10px 16px 8px;
    border-bottom: 1px solid var(--hairline);
  }
  :root #moreMenu > .textSize .tsHead { display: flex; align-items: center; justify-content: space-between; }
  :root #moreMenu > .textSize .tsLabel { display: inline; font-size: calc(16px * var(--ts, 1)); color: var(--text); }
}

/* 38. Users & Roles: grouped list rows (Settings-style), segmented permissions, destructive action at the bottom of the sheet */
:root .listSection { margin-bottom: 8px; }
:root .sectionHead { display: flex; align-items: center; justify-content: space-between; margin: 26px 6px 8px; }
:root .sectionHead h3 { margin: 0; font-size: calc(13px * var(--ts, 1)); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
:root:root .addCircle { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; border: 0; background: var(--accent); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
:root .addCircle::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("/vendor/sf/i/plus.svg") center / contain no-repeat; mask: url("/vendor/sf/i/plus.svg") center / contain no-repeat; }
:root .listGroup { background: var(--card); border-radius: 18px; overflow: hidden; border: 1px solid var(--hairline); }
:root:root a.listRow { text-decoration: none; }
:root:root .listRow { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: none; transform: none; }
:root .listRow::after { content: ""; position: absolute; left: 16px; right: 0; bottom: 0; height: 1px; background: var(--hairline); }
:root .listRow.withAvatar::after { left: 70px; }
:root .listRow:last-child::after { display: none; }
:root:root .listRow:hover:not(.static) { background: var(--fill); }
:root .listRow.static { cursor: default; }
:root .rowText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:root .rowTitle { font-size: calc(16px * var(--ts, 1)); font-weight: 600; letter-spacing: -.01em; }
:root .rowSub { font-size: calc(13.5px * var(--ts, 1)); color: var(--muted); line-height: 1.35; }
:root .rowValue { font-size: calc(15px * var(--ts, 1)); color: var(--muted); white-space: nowrap; }
:root .superTag { color: var(--accent-text); font-weight: 600; font-size: calc(13.5px * var(--ts, 1)); }
:root .chev { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); opacity: .55; margin-left: 2px; }
:root .avatarMono { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fill-strong, rgba(120,120,128,.25)); color: var(--text); font-weight: 600; font-size: calc(16px * var(--ts, 1)); }
:root .avatarMono.super { background: var(--accent); color: #fff; }
:root .listRow.addRow .rowTitle { color: var(--accent-text); font-weight: 500; }
:root .addIcon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
:root .addIcon::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("/vendor/sf/i/person-badge-plus.svg") center / contain no-repeat; mask: url("/vendor/sf/i/person-badge-plus.svg") center / contain no-repeat; }
:root .listEmpty { padding: 20px 16px; color: var(--muted); font-size: calc(14px * var(--ts, 1)); }
:root .sectionFoot { margin: 8px 16px 0; color: var(--muted); font-size: calc(13px * var(--ts, 1)); line-height: 1.4; }

:root .permList { background: var(--fill); border-radius: 14px; overflow: hidden; }
:root .permRow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
:root .permRow:last-child { border-bottom: 0; }
:root .permText { min-width: 0; flex: 1; }
:root .permText .resLabel { font-weight: 600; font-size: calc(15px * var(--ts, 1)); }
:root .permText .resDesc { color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); line-height: 1.35; margin-top: 2px; }
:root .permSeg { flex: none; display: inline-flex; padding: 2px; border-radius: 999px; background: var(--fill-strong, rgba(120,120,128,.25)); }
:root:root .permSeg button { min-height: 0; margin: 0; padding: 6px 13px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: calc(13px * var(--ts, 1)); font-weight: 600; cursor: pointer; box-shadow: none; transform: none; }
:root:root .permSeg button.on { background: var(--accent); color: #fff; }
:root:root .permSeg button.on[data-val="none"] { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
:root .credBox code { font-size: calc(15px * var(--ts, 1)); user-select: all; }
:root:root .dangerRow { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 14px; border: 0; border-radius: 14px; background: var(--fill); color: var(--red); font: inherit; font-size: calc(16px * var(--ts, 1)); font-weight: 600; cursor: pointer; }
:root:root .dangerRow:hover { background: var(--fill-hover, var(--fill)); }

/* 39. Page views (Members / Consumables / Settings shown as pages), cross-page transition, floating tab bar */
:root[data-view] main { display: none; }
:root[data-view] header :is(.tabs, #datePicker, #liveBtn, #fetchNow, .status, #openDoorBtn, #addMemberBtn, #moreBtn, #menuToggle) { display: none !important; }
:root[data-view] header .navTitle { display: block; flex: 1; text-align: left; font-size: calc(22px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; color: var(--text); }
:root[data-view="members"] #membersOverlay, :root[data-view="catalog"] #catalogOverlay, :root[data-view="settings"] #settingsOverlay {
  position: fixed; inset: var(--hdr-h, 58px) 0 0 var(--sidebar-w, 260px); display: block; z-index: 20; overflow-y: auto; overscroll-behavior: contain;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 20px clamp(18px, 3vw, 32px) 48px; animation: viewIn .24s var(--ease);
}
@media (max-width: 980px) {
  :root[data-view="members"] #membersOverlay, :root[data-view="catalog"] #catalogOverlay, :root[data-view="settings"] #settingsOverlay {
    inset: var(--hdr-h, 58px) 0 0 0; padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }
}
:root[data-view] :is(#membersBox, #catalogBox, #settingsBox) { width: 100%; max-width: 1100px; max-height: none; margin: 0 auto; box-shadow: none; animation: none; }
:root[data-view="settings"] #settingsBox { max-width: 780px; }
:root[data-view="catalog"] #catalogBox { max-width: 820px; }
:root[data-view] :is(#membersClose, #catalogClose, #settingsClose) { display: none; }
:root .pageAction { display: none; }
:root #membersBox .modalHead > #membersAddBtn::before { content: none; display: none; }
:root[data-view="members"] #membersBox .modalHead > #membersAddBtn:not(.hidden) {
  display: inline-flex; align-items: center; width: auto; height: auto; min-height: 36px; margin-left: auto; padding: 8px 16px;
  border: 0; border-radius: var(--radius-pill); background: var(--accent); color: #fff; box-shadow: none;
  font: inherit; font-size: calc(13.5px * var(--ts, 1)); font-weight: 600; cursor: pointer;
}
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* moving between pages: the browser cross-fades the content while the sidebar stays put */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  :root .sidebar { view-transition-name: sidebar; }
  :root::view-transition-old(root), :root::view-transition-new(root) { animation-duration: .18s; }
}

/* the sidebar's small icon in list rows (More sheet) */
:root .rowIcon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--fill-strong, rgba(120,120,128,.25)); color: var(--text); }
:root .rowIcon svg { width: 20px; height: 20px; }
:root .signOutRow .rowTitle { color: var(--red); }
:root .tabBar, :root .moreScrim, :root .moreSheet { display: none; }

/* phones and tablets held upright: the sidebar steps aside for a floating tab bar */
@media (max-width: 980px) {
  :root .sidebar, :root #sidebarToggle, :root #sidebarBackdrop { display: none !important; }
  :root .main-area { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  :root .tabBar {
    display: flex; gap: 4px; position: fixed; left: 50%; transform: translateX(-50%); z-index: 40;
    bottom: calc(10px + env(safe-area-inset-bottom)); width: min(560px, calc(100vw - 24px)); padding: 6px;
    border-radius: 34px; background: var(--card); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root .tabBar { background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
  }
  :root:root .tabItem {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 9px 4px 8px; margin: 0; border: 0; border-radius: 28px; background: none; box-shadow: none; transform: none;
    color: var(--muted); font: inherit; font-size: calc(11.5px * var(--ts, 1)); font-weight: 600; letter-spacing: 0; text-decoration: none; cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  :root:root .tabItem.hidden { display: none; }
  :root .tabSvg { width: 26px; height: 26px; }
  :root:root .tabItem span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :root:root .tabItem.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
  :root :is(#toast, #selectionBar) { bottom: calc(100px + env(safe-area-inset-bottom)); }

  :root .moreScrim.open { display: block; position: fixed; inset: 0; z-index: 44; background: var(--scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  :root .moreSheet {
    display: block; position: fixed; left: 50%; bottom: 0; z-index: 45; width: min(560px, 100vw); max-height: 86dvh; overflow-y: auto;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--card-raised, var(--card));
    border: 1px solid var(--hairline); border-bottom: 0; box-shadow: var(--shadow-lg);
    transform: translate(-50%, 105%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  :root .moreSheet.open { transform: translate(-50%, 0); visibility: visible; transition: transform .3s var(--ease); }
  :root .moreGrab { width: 38px; height: 5px; border-radius: 3px; background: var(--fill-strong, rgba(120,120,128,.35)); margin: 4px auto 10px; }
  :root .moreTitle { margin: 0 4px 12px; font-size: calc(22px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; }
  :root .moreSheet .listGroup { margin-bottom: 12px; }
  :root .moreSheet .listRow.hidden { display: none; }
  :root .moreSheet .listRow.active .rowTitle { color: var(--accent-text); }
}
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  :root .moreSheet, :root .moreSheet.open { transition: none; }
}

/* 40. Offline status as a small pill under the header (tap for details); compact sidebar on wide screens */
:root #offlineBanner {
  display: flex; align-items: center; gap: 8px; width: fit-content; max-width: calc(100% - 32px); margin: 10px auto 0; padding: 7px 14px 7px 12px;
  border: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--orange) 16%, var(--card)); color: var(--orange);
  font: inherit; font-size: calc(13px * var(--ts, 1)); font-weight: 600; letter-spacing: 0; line-height: 1.3; text-align: left; cursor: pointer; box-shadow: none;
}
:root #offlineBanner::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
:root #offlineBanner.hidden { display: none; }
:root #offlineBanner:hover { background: color-mix(in srgb, var(--orange) 24%, var(--card)); }
@media (min-width: 981px) {
  :root .sidebar-brand { padding: 16px 18px 10px; gap: 10px; }
  :root :is(.sidebar-brand .brand-logo, .sidebar-brand img) { width: 32px; height: 32px; border-radius: 9px; }
  :root .sidebar-brand h1 { font-size: calc(14px * var(--ts, 1)); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
  :root :is(.sidebar-brand .brand-sub, .sidebar-brand .sub) { font-size: calc(11.5px * var(--ts, 1)); margin-top: 1px; letter-spacing: 0; text-transform: none; font-weight: 500; }
  :root .sidebar-nav { gap: 1px; padding-top: 2px; }
  :root .navItem { min-height: 38px; padding-top: 7px; padding-bottom: 7px; }
  :root .sidebar-nav-label { padding-top: 12px; padding-bottom: 4px; }
}

/* 41. Wide screens: the top bar is a floating glass panel like the sidebar — same top edge, same 12px inset, concentric radius,
   no full-width strip or hairline, so the two read as one family instead of colliding at the corner */
@media (min-width: 981px) {
  :root header {
    top: 12px; margin: 12px 12px 0; padding: 10px 14px 10px 18px;
    border: 1px solid var(--hairline); border-radius: 24px; border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.28);
  }
  :root[data-theme="light"] header { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.9); }
  :root header::after { display: none; }
  :root header.scrolled { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.28); }
  :root :is(header .navTitle, header #sidebarToggle) { align-self: center; }
}

/* 42. One content column: top bar, offline pill, and the dashboard / Members content share the same left and right edges;
   toolbar controls get a comfortable 40px target; the offline pill gets more room */
:root #offlineBanner { margin: 16px auto 8px; }
@media (min-width: 981px) {
  :root header { width: calc(100% - 24px); max-width: 1480px; margin: 12px auto 0; }
  :root:has(#feed) main { width: calc(100% - 24px); max-width: 1480px; margin-inline: auto; }
  :root:has(#feed) main > .panel { max-width: none; margin-inline: 0; }
  :root:has(#feed) :is(#main-content, #galleryToolbarWrap, #feed) { max-width: none; margin-inline: 0; padding-inline: 0; }
  :root[data-view="members"] #membersOverlay, :root[data-view="catalog"] #catalogOverlay, :root[data-view="settings"] #settingsOverlay {
    left: calc(var(--sidebar-w, 260px) + 12px); padding-inline: max(12px, calc((100% - 1480px) / 2));
  }
  :root[data-view="members"] #membersBox { max-width: none; }
  :root[data-view] :is(#membersOverlay, #catalogOverlay, #settingsOverlay) { scrollbar-width: none; }
  :root[data-view] :is(#membersOverlay, #catalogOverlay, #settingsOverlay)::-webkit-scrollbar { display: none; }
  :root header { column-gap: 12px; }
  :root:root:root header :is(#openDoorBtn, #addMemberBtn, #liveBtn) { min-height: 40px; padding: 0 18px; font-size: calc(14px * var(--ts, 1)); }
  :root:root:root header #datePicker { min-height: 40px; height: 40px; }
  :root:root header .tabs { min-height: 40px; }
  :root:root header .tabs button { min-height: 34px; padding: 0 16px; }
}
@media (min-width: 1281px) {
  :root:root #fetchNow { width: 40px; height: 40px; }
  :root:root:root #moreBtn { width: 40px; height: 40px; }
}

/* 43. Every page, one frame: same top bar (title left, main action, ⋯), same content column, same scrollbar geometry */
@media (min-width: 981px) {
  :root { scrollbar-gutter: stable; }
  :root:root:root header .navTitle { display: block; flex: 0 1 auto; order: 0; margin-right: auto; text-align: left; align-self: center; font-size: calc(22px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
  :root main { width: calc(100% - 24px); max-width: 1480px; margin-inline: auto; padding-inline: 0; }
  :root h2.pageTitle { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the title lives in the top bar */
  :root p.pageSub { font-size: calc(15px * var(--ts, 1)); margin: 6px 4px 20px; }
}
:root .pageToolbar { display: none; }
@media (min-width: 1281px) {
  :root .pageToolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; width: calc(100% - 24px); max-width: 1480px; margin: 14px auto 0; }
  :root .pageToolbar:empty, :root[data-view] #pageToolbar { display: none; }
  :root #pageToolbar #fetchNow { margin-left: auto; order: 0; }
  :root #pageToolbar .status { display: inline-flex; align-items: center; white-space: nowrap; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--fill); font-weight: 500; order: 0; }
  :root:root:root #pageToolbar :is(#liveBtn) { min-height: 40px; padding: 0 18px; font-size: calc(14px * var(--ts, 1)); order: 0; }
  :root:root:root #pageToolbar #datePicker { min-height: 40px; height: 40px; order: 0; }
  :root:root #pageToolbar .tabs { min-height: 40px; order: 0; }
  :root:root #pageToolbar .tabs button { min-height: 34px; padding: 0 16px; }
  :root:root #pageToolbar #fetchNow { width: 40px; height: 40px; }
}

/* 44. One type scale for page content: table text 14, table headers 12, form fields 14, field labels 13 */
:root main :is(td, .tablewrap td) { font-size: calc(14px * var(--ts, 1)); }
:root main th { font-size: calc(12px * var(--ts, 1)); }
:root:root main :is(input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="search"], select, textarea) { font-size: calc(14px * var(--ts, 1)); }
:root main :is(label, .field label) { font-size: calc(13px * var(--ts, 1)); }
@media (min-width: 981px) {
  :root[data-view="catalog"] #catalogBox, :root[data-view="settings"] #settingsBox { max-width: none; }
}

/* 45. Pages without dashboard filters (Daily Report, Discounts, Analytics, Users & Roles): from 981px up they use the same ⋯ menu as the dashboard
   (the dashboard keeps its own popover between 981 and 1280px because it also holds the filters) */
@media (min-width: 981px) and (max-width: 1280px) {

  :root:not(:has(#leftControls)) :is(#leftControls, #headerControls) { display: contents; }
  :root:not(:has(#leftControls)) header { row-gap: 10px; }
  :root:not(:has(#leftControls)) #datePicker { order: 2; }
  :root:not(:has(#leftControls)) header .status { order: 3; display: inline-flex; align-items: center; white-space: nowrap; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--fill); font-weight: 500; }
  :root:not(:has(#leftControls)) #liveBtn { order: 4; }
  :root:root:not(:has(#leftControls)) #fetchNow { order: 10; margin-left: auto; width: 36px; height: 36px; min-height: 0; padding: 0; justify-content: center; font-size: 0; }
  :root:root:not(:has(#leftControls)) #fetchNow::before { margin: 0; }
  :root:not(:has(#leftControls)) #openDoorBtn { order: 11; }
  :root:not(:has(#leftControls)) #addMemberBtn { order: 12; }
  :root:root:root:not(:has(#leftControls)) #moreBtn { order: 13; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; min-height: 0; font-size: calc(17px * var(--ts, 1)); }
  :root:not(:has(#leftControls)) #logoutBtn { display: none; }

  :root:not(:has(#leftControls)) #menuBackdrop.open {
    display: block; position: fixed; inset: 0; z-index: 9; background: var(--scrim);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  :root:not(:has(#leftControls)) #moreMenu.open {
    display: block; position: absolute; z-index: 12; top: calc(100% + 8px); right: clamp(12px, 2vw, 24px);
    width: 320px; max-height: calc(100dvh - 130px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--hairline); border-radius: 22px; box-shadow: var(--shadow-lg);
    transform-origin: top right; animation: menuPop .22s var(--ease);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root:not(:has(#leftControls)) #moreMenu.open { background: var(--glass-bg); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); }
  }
  :root:root:root:root:not(:has(#leftControls)) #moreMenu > button:not(.hidden) {
    display: flex; align-items: center; justify-content: flex-start; gap: 0; width: 100%; height: auto; min-height: 48px;
    padding: 0 16px; margin: 0; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0;
    background: transparent; box-shadow: none; transform: none; text-align: left;
    font-size: calc(16px * var(--ts, 1)); font-weight: 400; color: var(--text);
  }
  :root:root:root:root:not(:has(#leftControls)) #moreMenu > button:not(.hidden):hover:not(:disabled) { background: var(--fill); }
  :root:root:root:root:not(:has(#leftControls)) #moreMenu > button:not(.hidden):last-child { border-bottom: 0; }
  :root:not(:has(#leftControls)) #moreMenu > button::before { margin-right: .65em; }
  :root:root:root:root:not(:has(#leftControls)) #moreMenu > :is(#themeToggle, #glassToggle) { font-size: 0; justify-content: space-between; gap: 12px; }
  :root:root:root:root:not(:has(#leftControls)) #moreMenu > :is(#themeToggle, #glassToggle)::before {
    content: attr(data-label); font-size: calc(16px * var(--ts, 1)); font-weight: 400; color: var(--text);
    -webkit-mask: none; mask: none; background: none; width: auto; height: auto; margin: 0; vertical-align: baseline;
  }
  :root:root:root:root:not(:has(#leftControls)) #moreMenu > :is(#themeToggle, #glassToggle)::after {
    content: ""; flex: 0 0 51px; width: 51px; height: 31px; border-radius: 999px; background-color: var(--fill-strong, rgba(120,120,128,.32));
    background-image: radial-gradient(ellipse closest-side, #fff 94%, transparent 100%);
    background-size: 27px 27px; background-repeat: no-repeat; background-position: 2px center;
    transition: background-color var(--dur) var(--ease), background-position var(--dur) var(--ease);
  }
  :root:root:root:root:not(:has(#leftControls)):not([data-theme="light"]) #moreMenu > #themeToggle::after, :root:root:root:root:not(:has(#leftControls)) body.glass #moreMenu > #glassToggle::after { background-color: var(--green); background-position: 22px center; }
  :root:root:root:root:not(:has(#leftControls)) #moreMenu > :is(#themeToggle, #glassToggle):active::after { background-image: radial-gradient(ellipse closest-side, rgba(255,255,255,.88) 94%, transparent 100%); background-size: 34px 27px; }
  :root:root:root:root:not(:has(#leftControls)):not([data-theme="light"]) #moreMenu > #themeToggle:active::after, :root:root:root:root:not(:has(#leftControls)) body.glass #moreMenu > #glassToggle:active::after { background-position: 15px center; }
  :root:not(:has(#leftControls)) #moreMenu > .textSize {
    display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; padding: 10px 16px 8px;
    border-bottom: 1px solid var(--hairline);
  }
  :root:not(:has(#leftControls)) #moreMenu > .textSize .tsHead { display: flex; align-items: center; justify-content: space-between; }
  :root:not(:has(#leftControls)) #moreMenu > .textSize .tsLabel { display: inline; font-size: calc(16px * var(--ts, 1)); color: var(--text); }

  :root:not(:has(#leftControls)) #menuToggle { display: none !important; }
}

/* 46. Add Member / Extend sheets: iOS-style choices, result rows, setting rows, footnotes */
:root .choiceNative { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); }
:root .enhancedField > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root .choiceList { background: var(--fill); border-radius: 14px; overflow: hidden; }
:root:root:root .choiceList .choiceOpt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; margin: 0; padding: 10px 16px; border: 0; border-radius: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: none; transform: none; }
:root .choiceList .choiceOpt + .choiceOpt::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: var(--hairline); }
:root:root:root .choiceList .choiceOpt:hover { background: var(--fill-hover, var(--fill)); }
:root .choiceTitle { flex: 1; min-width: 0; font-size: calc(16px * var(--ts, 1)); font-weight: 500; }
:root .choiceSub { color: var(--muted); font-size: calc(15px * var(--ts, 1)); white-space: nowrap; }
:root .choiceOpt.on .choiceTitle { font-weight: 600; }
:root .choiceTick { flex: none; width: 18px; height: 18px; opacity: 0; background: var(--accent-text); -webkit-mask: url("/vendor/sf/i/checkmark.svg") center / contain no-repeat; mask: url("/vendor/sf/i/checkmark.svg") center / contain no-repeat; }
:root .choiceOpt.on .choiceTick { opacity: 1; }
:root .choiceSeg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--fill); }
:root:root:root .choiceSeg .choiceOpt { flex: 1 1 0; min-width: 0; margin: 0; padding: 9px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: calc(14px * var(--ts, 1)); font-weight: 600; cursor: pointer; box-shadow: none; transform: none; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
:root:root:root .choiceSeg .choiceOpt.on { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.28); }
:root .choiceSeg .choiceTitle { flex: none; font-size: inherit; font-weight: inherit; text-align: center; width: 100%; }

:root .resultRows { margin-top: 12px; background: var(--fill); border-radius: 14px; overflow: hidden; }
:root .resultRows:empty { display: none; }
:root .resultRow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 16px; font-size: calc(15px * var(--ts, 1)); color: var(--muted); }
:root .resultRow + .resultRow { border-top: 1px solid var(--hairline); }
:root .resultRow span:last-child { color: var(--text); font-weight: 500; text-align: right; }
:root .resultRow.strong { padding-block: 13px; }
:root .resultRow.strong span:first-child { color: var(--text); font-weight: 600; }
:root .resultRow.strong span:last-child { color: var(--accent-text); font-weight: 700; font-size: calc(17px * var(--ts, 1)); }
:root #memberValidityPreview, :root #extendValidityPreview { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; } /* the rows above say it; kept for screen readers */

/* single-value settings read as rows: label on the left, value on the right */
:root :is(#paymentAmountField, #extendPaymentAmountField, #coachingPaymentAmountField, #gcashRefField, #extendGcashRefField, #coachingGcashRefField, #coachingAddonAmountField, #memberDiscountTypeField, #discountOtherPercentField, #extendDiscountOtherPercentField, #coachingDiscountOtherPercentField, .field:has(> #extendDiscountTypeInput), .field:has(> #coachingDiscountTypeInput)):not([hidden]) {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 0 8px 0 16px; background: var(--fill); border-radius: 14px;
}
:root :is(#paymentAmountField, #extendPaymentAmountField, #coachingPaymentAmountField, #gcashRefField, #extendGcashRefField, #coachingGcashRefField, #coachingAddonAmountField, #memberDiscountTypeField, #discountOtherPercentField, #extendDiscountOtherPercentField, #coachingDiscountOtherPercentField, .field:has(> #extendDiscountTypeInput), .field:has(> #coachingDiscountTypeInput)) > label { margin: 0; font-size: calc(16px * var(--ts, 1)); font-weight: 500; color: var(--text); white-space: nowrap; }
:root:root :is(#paymentAmountField, #extendPaymentAmountField, #coachingPaymentAmountField, #gcashRefField, #extendGcashRefField, #coachingGcashRefField, #coachingAddonAmountField, #memberDiscountTypeField, #discountOtherPercentField, #extendDiscountOtherPercentField, #coachingDiscountOtherPercentField, .field:has(> #extendDiscountTypeInput), .field:has(> #coachingDiscountTypeInput)) > :is(input, select) {
  flex: 1; min-width: 0; width: auto; border: 0; background-color: transparent; box-shadow: none; text-align: right; text-align-last: right; font-size: calc(16px * var(--ts, 1)); font-weight: 600; padding-right: 8px;
}
:root :is(#paymentAmountField, #extendPaymentAmountField, #coachingPaymentAmountField) > input { font-variant-numeric: tabular-nums; }
:root :is(#memberValidityField, #paymentMethodInput, #extendPaymentMethodInput, #coachingPaymentMethodInput, #coachingPackageInput) + .hint, :root #memberValidityField > .hint:not(#memberValidityPreview) { margin: 8px 16px 0; font-size: calc(13px * var(--ts, 1)); color: var(--muted); line-height: 1.4; }
:root :is(#paymentReportHint, #extendPaymentReportHint, #coachingPaymentReportHint) { margin: 8px 16px 0; font-size: calc(13px * var(--ts, 1)); color: var(--muted); line-height: 1.4; }
:root :is(#addMemberBox, #extendMemberBox, #addCoachingBox) .formGroup .field + .field, :root :is(#addMemberBox, #extendMemberBox, #addCoachingBox) .formGroup .choice + .field { margin-top: 12px; }

/* 47. Extend mode: one member card (photo, name, status, expiry, "not this person?") replaces the green notice; the fixed registration type is hidden */
:root #addMemberBox.extend-mode > #registrationTypeField, :root #addMemberBox.extend-mode > #memberNotices { display: none; }
:root #addMemberBox.extend-mode > .extendSummary:not([hidden]) { display: block; padding: 0; margin: 0 0 16px; background: var(--fill); border-radius: 18px; overflow: hidden; }
:root .esTop { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
:root .esPhotoWrap { position: relative; flex: none; display: inline-flex; }
:root .esBadge { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); border: 2px solid var(--card-raised, var(--card)); }
:root .esBadge::after { content: ""; position: absolute; inset: 3px; background: #fff; -webkit-mask: url("/vendor/sf/i/checkmark.svg") center / contain no-repeat; mask: url("/vendor/sf/i/checkmark.svg") center / contain no-repeat; }
:root .esText { flex: 1; min-width: 0; }
:root .esStatus { margin-top: 3px; font-size: calc(13.5px * var(--ts, 1)); font-weight: 600; color: var(--green); }
:root .esExpires { flex: none; text-align: right; display: flex; flex-direction: column; gap: 1px; font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); }
:root .esExpires b { font-size: calc(15px * var(--ts, 1)); font-weight: 600; color: var(--text); }
:root:root:root .esSwitch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 0 16px; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; background: transparent; color: var(--accent-text); font: inherit; font-size: calc(15px * var(--ts, 1)); font-weight: 500; text-align: left; cursor: pointer; box-shadow: none; transform: none; }
:root:root:root .esSwitch:hover { background: var(--fill-hover, var(--fill)); }
:root .esSwitch .chev { flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .55; }

/* 48. Setting rows: the value sits directly on the row (no nested box), clear of the select arrow; one hint size in the sheets */
:root #addMemberBox :is(#paymentAmountInput, #coachingAddonAmountInput, #gcashRefInput, #discountTypeInput, #discountOtherPercentInput, #memberNameInput, #memberMobileInput, #registrationTypeInput),
:root :is(#extendMemberBox :is(#extendPaymentAmountInput, #extendGcashRefInput, #extendDiscountTypeInput, #extendDiscountOtherPercentInput), #addCoachingBox :is(#coachingPaymentAmountInput, #coachingGcashRefInput, #coachingDiscountTypeInput, #coachingDiscountOtherPercentInput)) {
  background-color: transparent; border: 0; box-shadow: none; text-align: right; text-align-last: right;
  padding: 10px 30px 10px 8px; background-position: right 8px center; font-size: calc(16px * var(--ts, 1)); font-weight: 600;
}
:root #addMemberBox :is(#paymentAmountInput, #coachingAddonAmountInput, #gcashRefInput, #discountOtherPercentInput, #memberNameInput, #memberMobileInput),
:root :is(#extendMemberBox :is(#extendPaymentAmountInput, #extendGcashRefInput, #extendDiscountOtherPercentInput), #addCoachingBox :is(#coachingPaymentAmountInput, #coachingGcashRefInput, #coachingDiscountOtherPercentInput)) { padding-right: 8px; }
:root :is(#addMemberBox, #extendMemberBox, #addCoachingBox) .hint { font-size: calc(13px * var(--ts, 1)); line-height: 1.4; }

/* 49. Add Member / Extend: section titles above the groups (no cards), row-style fields, Camera-style shutter, search field, footer hint */
:root :is(#addMemberBox, #extendMemberBox, #addCoachingBox) .formGroup, :root #addMemberBox #memberPhotoSection { border: 0; padding: 0; background: none; box-shadow: none; margin: 0 0 22px; }
:root :is(#addMemberBox, #extendMemberBox, #addCoachingBox) .formGroupTitle, :root #addMemberBox #memberPhotoSection > .formGroupTitle { margin: 0 0 8px 6px; font-size: calc(12.5px * var(--ts, 1)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
:root .settingRow:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; margin: 0 0 8px; padding: 0 8px 0 16px; background: var(--fill); border-radius: 14px; }
:root .settingRow > label { margin: 0; font-size: calc(16px * var(--ts, 1)); font-weight: 500; color: var(--text); white-space: nowrap; }
:root:root:root #addMemberBox .settingRow > :is(input, select) { flex: 1; min-width: 0; width: auto; border: 0; background-color: transparent; box-shadow: none; text-align: right; text-align-last: right; font-size: calc(16px * var(--ts, 1)); font-weight: 600; padding: 10px 8px; }
:root:root:root #addMemberBox .settingRow > select { padding-right: 30px; background-position: right 8px center; }
:root #addMemberBox .settingRow > input::placeholder { color: var(--muted); font-weight: 400; }
:root #addMemberBox .settingRow > .choiceSeg { flex: 0 0 200px; margin: 6px 0; }
:root #addMemberBox .settingRow.disabled-field { opacity: .5; }
:root:root .settingRow.enhancedField > label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }

:root #memberSearchField > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root:root:root #addMemberBox #memberSearchInput {
  padding-left: 40px; background-repeat: no-repeat; background-position: 14px center; background-size: 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22230 -1726 1990 2008%22%3E%3Cpath fill=%22%238e8e93%22 transform=%22scale%281 -1%29%22 d=%22M230 899C230 443 600 73 1056 73C1218 73 1367 121 1492 202L1927 -233C1960 -266 2004 -282 2050 -282C2148 -282 2220 -207 2220 -111C2220 -65 2203 -22 2171 10L1740 443C1830 572 1882 729 1882 899C1882 1356 1512 1726 1056 1726C600 1726 230 1356 230 899ZM466 899C466 1225 731 1489 1056 1489C1382 1489 1646 1225 1646 899C1646 574 1382 309 1056 309C731 309 466 574 466 899Z%22/%3E%3C/svg%3E");
}
:root #addMemberBox .autoCaptureField .hint { margin-top: 2px; }

:root #memberPhotoSection .camActions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 22px; padding-top: 16px; }
:root #memberPhotoSection .camActions::before { content: ""; order: 1; flex: 0 0 100%; height: 0; }
:root:root #memberPhotoSection #camCaptureBtn {
  order: 0; width: 68px; height: 68px; min-height: 0; padding: 0; margin: 0; border-radius: 50%; font-size: 0; box-shadow: none;
  background: radial-gradient(circle at center, var(--text) 0 24px, transparent 25px); border: 3px solid var(--text); transition: transform .12s var(--ease), opacity var(--dur) ease;
}
:root #memberPhotoSection #camCaptureBtn::before { content: none; display: none; }
:root:root #memberPhotoSection #camCaptureBtn:active:not(:disabled) { transform: scale(.92); }
:root:root #memberPhotoSection #camCaptureBtn:disabled { opacity: .3; background: radial-gradient(circle at center, var(--text) 0 24px, transparent 25px); }
:root:root #memberPhotoSection :is(#camRetakeBtn, #camUploadBtn) { order: 2; min-height: 0; padding: 8px 6px; background: none; color: var(--accent-text); font-size: calc(15px * var(--ts, 1)); font-weight: 500; box-shadow: none; }
:root #memberPhotoSection :is(#camRetakeBtn, #camUploadBtn)::before { content: none; display: none; }

:root .addMemberFooter .footHint { margin-right: auto; align-self: center; padding-left: 8px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root .addMemberFooter .footHint:empty { display: none; }

/* 50. Owner overview (super admin): Overview | Live switch and the overview cards */
:root .dashMode { display: flex; justify-content: flex-start; margin: 14px 0 4px; }
:root .dashMode[hidden] { display: none; }
:root:root .ownerOverview { display: none; padding: 0; }
:root:root[data-dash="overview"] .ownerOverview { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin: 12px 0 40px; }
:root[data-dash="overview"] :is(#expiringPanel, #coachingExpiringPanel, #visitsPanel, #main-content, #galleryToolbarWrap, #feed, #galleryPagination, #pageToolbar) { display: none !important; }
:root .ovCard { grid-column: span 6; background: var(--card); border: 1px solid var(--hairline); border-radius: 20px; padding: 20px 22px; min-width: 0; }
:root .ovCard.span4 { grid-column: span 4; } :root .ovCard.span5 { grid-column: span 5; } :root .ovCard.span7 { grid-column: span 7; } :root .ovCard.span8 { grid-column: span 8; } :root .ovCard.span12 { grid-column: 1 / -1; }
:root .ovLabel { font-size: calc(12.5px * var(--ts, 1)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
:root .ovBig { font-size: calc(40px * var(--ts, 1)); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
:root .ovHero .ovBig { font-size: calc(52px * var(--ts, 1)); }
:root .ovSub { margin-top: 4px; font-size: calc(14px * var(--ts, 1)); color: var(--muted); }
:root .ovDeltas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
:root .ovDelta { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: calc(13px * var(--ts, 1)); font-weight: 600; background: var(--fill); color: var(--muted); }
:root .ovDelta small { font-weight: 500; opacity: .85; }
:root .ovDelta.up { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
:root .ovDelta.down { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
:root .ovChips { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: calc(14px * var(--ts, 1)); color: var(--muted); }
:root .ovChips b { color: var(--text); font-weight: 600; margin-left: 4px; }
:root .ovShifts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
:root .ovShift { padding: 4px 11px; border-radius: var(--radius-pill); font-size: calc(13px * var(--ts, 1)); font-weight: 600; background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
:root .ovShift.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
:root .ovStat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: calc(14px * var(--ts, 1)); color: var(--muted); }
:root .ovStat b { color: var(--text); font-weight: 600; text-align: right; }
:root .ovRows { display: flex; flex-direction: column; }
:root .ovRow { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
:root .ovRow + .ovRow { border-top: 1px solid var(--hairline); }
:root .ovRowText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
:root .ovRowText b { font-size: calc(15px * var(--ts, 1)); font-weight: 600; }
:root .ovRowText small { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root .ovPhoto { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--fill); }
:root .ovPhoto.ovNone { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
:root .ovPill { flex: none; padding: 3px 10px; border-radius: var(--radius-pill); font-size: calc(12.5px * var(--ts, 1)); font-weight: 600; background: var(--fill); color: var(--muted); }
:root .ovPill.red { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
:root .ovPill.orange { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
:root .ovDot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
:root .ovDot.orange { background: var(--orange); } :root .ovDot.red { background: var(--red); } :root .ovDot.blue { background: var(--accent); }
:root .ovEmpty { padding: 6px 0 2px; color: var(--muted); font-size: calc(15px * var(--ts, 1)); }
:root:root .ovMore { display: inline-flex; margin-top: 8px; padding: 6px 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: calc(15px * var(--ts, 1)); font-weight: 500; cursor: pointer; box-shadow: none; min-height: 0; }
@media (max-width: 1100px) { :root .ovCard, :root .ovCard.span4, :root .ovCard.span5, :root .ovCard.span7, :root .ovCard.span8 { grid-column: 1 / -1; } }
@media (max-width: 980px) { :root .dashMode { margin-top: 8px; } :root .ovHero .ovBig { font-size: calc(44px * var(--ts, 1)); } }

/* 51. Live view: summary strip + feed on the left, "needs attention" column on the right (wide screens) */
:root #tiles { display: flex; align-items: stretch; gap: 8px 28px; flex-wrap: wrap; margin: 0 0 16px; padding: 20px 26px; background: var(--card); border: 1px solid var(--hairline); border-radius: 20px; }
:root .liveHero { display: flex; flex-direction: column; justify-content: center; min-width: 150px; padding-right: 28px; border-right: 1px solid var(--hairline); }
:root .liveHeroLabel { font-size: calc(12.5px * var(--ts, 1)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
:root .liveHeroNum { font-size: calc(56px * var(--ts, 1)); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
:root .liveHeroSub { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root .liveFigs { flex: 1; min-width: 240px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-content: center; }
:root .liveFig { display: flex; flex-direction: column; gap: 2px; }
:root .liveFig span { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root .liveFig b { font-size: calc(28px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:root .liveCols { display: flex; flex-direction: column; }
:root .liveMain, :root .liveSide { display: contents; }
:root .liveCols .panel { max-width: none; margin: 0 0 16px; }
:root #kioskPanel { order: 0; } :root .liveMain { order: 1; } :root #expiringPanel { order: 5; } :root #coachingExpiringPanel { order: 6; } :root #visitsPanel { order: 7; }
@media (min-width: 1360px) {
  :root:not([data-dash="overview"]) .liveCols { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 16px; align-items: start; }
  :root .liveMain { display: block; min-width: 0; order: 0; }
  :root .liveSide { display: block; position: sticky; top: 92px; max-height: calc(100vh - 108px); overflow-y: auto; scrollbar-width: none; }
  :root .liveSide::-webkit-scrollbar { display: none; }
  :root .liveSide > .panel { order: 0; }
  :root .liveSide > .panel[hidden] { display: none; }
  :root #visitsPanel .tablewrap table :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4)) { display: none; }
  :root #visitsPanel #personSearch { width: 100%; }
  :root #liveSide tr.listRow { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; }
  :root #liveSide tr.listRow + tr.listRow::before { left: 68px; }
  :root #liveSide tr.listRow :is(.expiringPhoto, .expiringNoPhoto) { width: 44px; height: 44px; }
  :root #liveSide .lrName { font-size: calc(15px * var(--ts, 1)); }
  :root #feed { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
/* the expiring list previews five rows */
:root #expiringPanel.collapsible:not(.expanded) tr.moreRow { display: none; }
:root #expiringPanel .expandBtn { margin: 6px 4px 2px; }
/* nothing to show: one quiet line instead of a full card */
:root #coachingExpiringPanel:has(tbody td[colspan]) { padding-block: 14px; }
:root #coachingExpiringPanel:has(tbody td[colspan]) thead { display: none; }
:root #coachingExpiringPanel:has(tbody td[colspan]) > h2 { margin-bottom: 6px; font-size: calc(14px * var(--ts, 1)); color: var(--muted); }
:root #coachingExpiringPanel:has(tbody td[colspan]) td { padding: 0; border: 0; color: var(--muted); font-size: calc(14px * var(--ts, 1)); }
@media (max-width: 720px) { :root .liveHero { border-right: 0; padding-right: 0; min-width: 100%; } :root .liveFigs { min-width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 52. Live feed bar (title, Cards | List, Select) and the list view; one view at a time */
:root .galleryToolbar { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
:root .galleryToolbar.hidden { display: none; }
:root .feedTitle { margin: 0 auto 0 4px; font-size: calc(20px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; }
:root .feedTitle .sub { font-size: calc(13px * var(--ts, 1)); font-weight: 500; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
:root [data-feedview="cards"] > #recentPanel { display: none; }
:root [data-feedview="list"] > :is(#feed, #galleryPagination) { display: none; }
:root [data-feedview="list"] #selectModeBtn { display: none; }
:root #recentPanel { padding: 6px 18px 12px; }
:root #recentPanel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root #recentPanel :is(table, tbody) { display: block; width: 100%; }
:root #recentPanel tr.evRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border: 0; }
:root #recentPanel tr.evRow + tr.evRow { border-top: 1px solid var(--hairline); }
:root #recentPanel tr.evRow > td { display: block; padding: 0; border: 0; background: none; }
:root .evWho { display: flex; align-items: center; gap: 14px; min-width: 0; }
:root .evPhoto { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--fill); }
:root .evPhoto.evNone { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--muted); }
:root .evText { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
:root .evText b { font-size: calc(15px * var(--ts, 1)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .evText small { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root .ovPill.green { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
:root .loadMore { display: flex; margin: 8px auto 4px; padding: 10px 18px; }
:root:root .loadMore { background: var(--fill); border-radius: var(--radius-pill); font-weight: 600; }
:root #main-content { order: 1; } :root #galleryToolbarWrap { order: 2; } :root #recentPanel { order: 3; } :root #feed { order: 4; } :root #galleryPagination { order: 5; }
:root #kioskPanel { order: 0; } :root #expiringPanel { order: 6; } :root #coachingExpiringPanel { order: 7; } :root #visitsPanel { order: 8; }
@media (min-width: 1360px) { :root .liveMain > * { order: 0; } }

/* 53. Live motion: only genuinely new events animate; everything respects reduced motion */
:root .card { animation: none; }
:root .card.fresh { animation: cardIn .5s cubic-bezier(.2, .9, .25, 1.12) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(-16px) scale(.97); } to { opacity: 1; transform: none; } }
:root .newBadge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-size: calc(12px * var(--ts, 1)); font-weight: 700; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); animation: badgePop .4s cubic-bezier(.2, .9, .25, 1.3) both; }
@keyframes badgePop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
:root #recentPanel tr.evRow.fresh { animation: rowIn .45s cubic-bezier(.2, .9, .25, 1.05) both, rowGlow 2.6s ease-out both; border-radius: 12px; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes rowGlow { from { background: color-mix(in srgb, var(--accent) 16%, transparent); } to { background: transparent; } }
:root .liveHeroNum.tick { display: inline-block; transform-origin: left center; animation: heroTick .5s ease; }
@keyframes heroTick { 35% { transform: scale(1.1); color: var(--accent-text); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { :root .card.fresh, :root .newBadge, :root #recentPanel tr.evRow.fresh, :root .liveHeroNum.tick { animation: none; } }

/* 54. Members: status tabs, Filters sheet, Sort pill, active-filter summary */
:root .membersBar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 4px 0 12px; }
:root .membersBar .tabs button .cnt { margin-left: 4px; font-weight: 500; opacity: .6; font-variant-numeric: tabular-nums; }
:root .membersBar .tabs { max-width: 100%; }
:root:root .pillBtn { margin-left: auto; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: var(--fill); color: var(--text); font: inherit; font-size: calc(14px * var(--ts, 1)); font-weight: 600; cursor: pointer; box-shadow: none; }
:root:root .pillBtn.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
:root .sortPill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 6px 0 14px; border-radius: var(--radius-pill); background: var(--fill); font-size: calc(14px * var(--ts, 1)); color: var(--muted); }
:root:root .sortPill select { min-height: 0; padding: 6px 28px 6px 4px; border: 0; background-color: transparent; box-shadow: none; font: inherit; font-size: calc(14px * var(--ts, 1)); font-weight: 600; color: var(--text); width: auto; }
:root .filterSummary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 4px 4px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root .filterSummary[hidden] { display: none; }
:root:root .filterSummary button { border: 0; background: none; color: var(--accent-text); font: inherit; font-size: calc(14px * var(--ts, 1)); font-weight: 500; cursor: pointer; min-height: 0; padding: 4px 6px; box-shadow: none; }
#filterOverlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--scrim); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#filterOverlay.hidden { display: none; }
:root #filterSheet { width: min(460px, 100%); max-height: min(720px, 92dvh); display: flex; flex-direction: column; background: var(--card-raised, var(--card)); border: 1px solid var(--hairline); border-radius: 28px; box-shadow: var(--shadow-lg); overflow: hidden; animation: viewIn .22s var(--ease); }
:root .fsHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
:root .fsHead h3 { margin: 0; font-size: calc(17px * var(--ts, 1)); font-weight: 600; }
:root:root .fsLink { border: 0; background: none; color: var(--accent-text); font: inherit; font-size: calc(16px * var(--ts, 1)); cursor: pointer; padding: 6px 4px; min-height: 0; box-shadow: none; }
:root:root .fsDone { border: 0; background: var(--accent); color: #fff; font: inherit; font-size: calc(15px * var(--ts, 1)); font-weight: 600; cursor: pointer; padding: 7px 16px; min-height: 0; border-radius: var(--radius-pill); box-shadow: none; }
:root .fsBody { overflow-y: auto; padding: 4px 18px 20px; }
:root .fsGroup { margin-top: 16px; }
:root .fsGroup[hidden] { display: none; }
:root .fsGroup h4 { margin: 0 0 8px 6px; font-size: calc(12.5px * var(--ts, 1)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
:root .fsGroup .checkbox-field { margin: 0; padding: 12px 16px; background: var(--fill); border-radius: 14px; }

/* 55. Member details: hero + status pill, round action buttons with labels, plain-language groups, grouped visit list */
:root #memberDetailBox { max-width: 560px; }
:root .mdStatus { margin-top: 10px; display: flex; justify-content: center; }
:root .mdPill { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: var(--radius-pill); font-size: calc(14px * var(--ts, 1)); font-weight: 600; background: var(--fill); color: var(--muted); }
:root .mdPill.green { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
:root .mdPill.orange { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
:root .mdPill.red { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
:root .memberDetailFields .mdf .val small { display: block; margin-top: 1px; font-size: calc(12.5px * var(--ts, 1)); font-weight: 400; color: var(--muted); }
:root .doorOk { color: var(--green); font-weight: 600; } :root .doorNo { color: var(--orange); font-weight: 600; } :root .doorUnk { color: var(--muted); }
:root .mdFoot { margin: 8px 16px 0; font-size: calc(13px * var(--ts, 1)); color: var(--muted); line-height: 1.4; }

:root .memberDetailBtnRow { display: flex; justify-content: center; gap: 12px 18px; flex-wrap: wrap; margin: 18px 0 30px; }
:root:root .memberDetailBtnRow .extendMembershipBtn {
  position: relative; width: 58px; height: 58px; min-height: 0; padding: 0; margin: 0 0 22px; border: 0; border-radius: 50%; font-size: 0;
  background: var(--fill); color: var(--text); box-shadow: none; display: inline-flex; align-items: center; justify-content: center;
}
:root .memberDetailBtnRow .extendMembershipBtn[hidden] { display: none; }
:root .memberDetailBtnRow .extendMembershipBtn::before { margin: 0; width: 24px; height: 24px; }
:root .memberDetailBtnRow .extendMembershipBtn::after { content: attr(data-label); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: calc(13px * var(--ts, 1)); font-weight: 500; color: var(--text); }
:root:root .memberDetailBtnRow #memberDetailExtendBtn { background: var(--accent); color: #fff; }
:root .memberDetailBtnRow #memberDetailExtendBtn::after { font-weight: 600; }
:root:root .memberDetailBtnRow .extendMembershipBtn:hover:not(:disabled) { filter: brightness(1.06); background: var(--fill-hover, var(--fill)); }
:root:root .memberDetailBtnRow #memberDetailExtendBtn:hover:not(:disabled) { background: var(--accent); }

:root .visitSummary { margin: 2px 4px 12px; font-size: calc(14px * var(--ts, 1)); color: var(--muted); }
:root .visitSummary:empty { display: none; }
:root .visitList { margin-top: 12px; }
:root .visitDay { margin: 16px 6px 6px; font-size: calc(12.5px * var(--ts, 1)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
:root .visitDay + .visitRow { border-top-left-radius: 14px; border-top-right-radius: 14px; }
:root .visitRow { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--fill); }
:root .visitRow + .visitRow { border-top: 1px solid var(--hairline); }
:root .visitRow:has(+ .visitDay), :root .visitRow:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
:root .visitDir { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: calc(15px * var(--ts, 1)); font-weight: 700; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
:root .visitDir.exit { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
:root .visitText { flex: 1; min-width: 0; display: flex; flex-direction: column; }
:root .visitText b { font-size: calc(15px * var(--ts, 1)); font-weight: 600; }
:root .visitText small { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root .visitRes { flex: none; font-size: calc(13px * var(--ts, 1)); font-weight: 600; }
:root .visitRes.ok { color: var(--green); } :root .visitRes.bad { color: var(--red); }
:root .visitEmpty { padding: 16px; border-radius: 14px; background: var(--fill); color: var(--muted); font-size: calc(15px * var(--ts, 1)); }
:root #memberDetailBox .memberDetailBtnRow .extendMembershipBtn { background: var(--fill); color: var(--text); border: 0; }
:root #memberDetailBox .memberDetailBtnRow .extendMembershipBtn:hover:not(:disabled) { background: var(--fill-hover, var(--fill)); color: var(--text); }
:root #memberDetailBox .memberDetailBtnRow #memberDetailExtendBtn, :root #memberDetailBox .memberDetailBtnRow #memberDetailExtendBtn:hover:not(:disabled) { background: var(--accent); color: #fff; }
:root #memberDetailBox .memberDetailBtnRow .extendMembershipBtn { width: 58px; height: 58px; min-height: 0; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; gap: 0; letter-spacing: 0; }
:root #memberDetailBox .memberDetailBtnRow .extendMembershipBtn::before { display: inline-block; width: 24px; height: 24px; margin: 0; vertical-align: 0; }
:root #memberDetailBox .memberDetailFields .memberDetailBtnRow { margin: 18px 0 8px; }
:root .formSheetField[hidden] { display: none; }

/* 56. Door mode: two selectable cards */
:root .modeCards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 16px; }
:root:root .modeCard { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 44px 16px 18px; border: 2px solid transparent; border-radius: 18px; background: var(--fill); color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: none; transform: none; min-height: 0; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
:root:root .modeCard:hover:not(.on) { background: var(--fill-hover, var(--fill)); }
:root:root .modeCard.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--card)); }
:root .modeNum { font-size: calc(12.5px * var(--ts, 1)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
:root .modeCard b { font-size: calc(18px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; }
:root .modeText { font-size: calc(14px * var(--ts, 1)); line-height: 1.4; color: var(--muted); }
:root .modeText em { font-style: normal; font-weight: 600; color: var(--text); }
:root .modeTick { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--hairline); }
:root .modeCard.on .modeTick { border-color: var(--accent); background: var(--accent); }
:root .modeCard.on .modeTick::after { content: ""; position: absolute; inset: 4px; background: #fff; -webkit-mask: url("/vendor/sf/i/checkmark.svg") center / contain no-repeat; mask: url("/vendor/sf/i/checkmark.svg") center / contain no-repeat; }
@media (max-width: 720px) { :root .modeCards { grid-template-columns: 1fr; } }

/* 57. Daily Report: door opens check line */
:root .doorCheck { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; font-size: calc(14px * var(--ts, 1)); line-height: 1.4; }
:root .doorCheck.ok { background: color-mix(in srgb, var(--green, #30d158) 14%, transparent); }
:root .doorCheck.warn { background: color-mix(in srgb, var(--orange, #ff9f0a) 18%, transparent); }
#doorPanel[hidden] { display: none; }

/* 58. Front-desk Open door: always reachable on the dashboard */
:root:root #doorFab { position: fixed; right: 24px; bottom: 24px; z-index: 35; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0 22px; height: 54px; border: 0; border-radius: 27px; background: var(--accent); color: #fff; font: inherit; font-size: calc(17px * var(--ts, 1)); font-weight: 600; letter-spacing: -.01em; box-shadow: var(--shadow-lg); cursor: pointer; transform: none; }
:root:root #doorFab:active { transform: scale(.96); }
:root:root #doorFab.hidden, :root[data-view] #doorFab { display: none; }
@media (max-width: 980px) { :root:root #doorFab { right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); } }

/* 59. Door review list */
:root .reviewRow { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--hairline); }
:root .reviewRow:first-child { border-top: 0; }
:root .reviewRow b { display: block; font-size: calc(15px * var(--ts, 1)); font-weight: 600; line-height: 1.35; }
:root .reviewRow small { display: block; margin-top: 2px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root .reviewTag { flex: none; min-width: 84px; text-align: center; padding: 4px 10px; border-radius: 999px; font-size: calc(12px * var(--ts, 1)); font-weight: 600; background: color-mix(in srgb, var(--orange, #ff9f0a) 20%, transparent); color: var(--text); }

/* 60. Camera visits */
:root .vBar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 16px; }
:root .vBar input[type=date] { height: 40px; border-radius: 12px; padding: 0 12px; }
:root .vSeg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--fill); }
:root:root .vSeg button { margin: 0; padding: 7px 14px; border: 0; border-radius: 9px; background: none; box-shadow: none; transform: none; color: var(--muted); font: inherit; font-size: calc(14px * var(--ts, 1)); font-weight: 600; cursor: pointer; }
:root:root .vSeg button.active { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }
:root .vStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
:root .vStat { padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--hairline); }
:root .vStat b { display: block; font-size: calc(26px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; }
:root .vStat span { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root .vStat.good b { color: var(--green); } :root .vStat.warn b { color: var(--orange); }
:root .vMsg { color: var(--muted); font-size: calc(14px * var(--ts, 1)); margin: 8px 0; }
:root .vList { display: grid; gap: 10px; }
:root .vCard { padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--hairline); border-left: 4px solid var(--hairline); }
:root .vCard.ok { border-left-color: var(--green); } :root .vCard.miss { border-left-color: var(--red); } :root .vCard.maybe { border-left-color: var(--orange); }
:root .vHead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
:root .vHead b { display: block; font-size: calc(16px * var(--ts, 1)); font-weight: 600; }
:root .vHead small, :root .vWhen small { display: block; margin-top: 2px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root .vWhen { text-align: right; font-size: calc(14px * var(--ts, 1)); white-space: nowrap; }
:root .vShots, :root .vRaw { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
:root .vRaw { margin-top: 0; }
:root .vShot { position: relative; margin: 0; width: 96px; }
:root .vShot img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 12px; cursor: zoom-in; outline: 2px solid transparent; }
:root .vShot.ok img { outline-color: var(--green); } :root .vShot.best img { outline-color: var(--accent); }
:root .vShot figcaption { margin-top: 3px; font-size: calc(11.5px * var(--ts, 1)); color: var(--muted); text-align: center; }
:root .vTag { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 999px; font-style: normal; font-size: calc(11px * var(--ts, 1)); font-weight: 600; background: rgba(0,0,0,.6); color: #fff; }
:root .vLight { display: none; position: fixed; inset: 0; z-index: 90; align-items: center; justify-content: center; background: var(--scrim, rgba(0,0,0,.7)); }
:root .vLight.open { display: flex; }
:root .vLight img { max-width: 92vw; max-height: 88vh; border-radius: 16px; }

/* 61. Overview: headcount (entrance + exit vs logbook) */
:root .hcHead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
:root .hcHead input { height: 36px; border-radius: 10px; padding: 0 10px; }
:root .hcNums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
:root .hcNums b { display: block; font-size: calc(34px * var(--ts, 1)); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
:root .hcNums span { display: block; font-size: calc(14px * var(--ts, 1)); color: var(--muted); }
:root .hcNums small { display: block; margin-top: 2px; font-size: calc(12.5px * var(--ts, 1)); }
:root .hcCheck { padding: 12px 14px; border-radius: 14px; font-size: calc(14.5px * var(--ts, 1)); line-height: 1.4; }
:root .hcCheck.ok { background: color-mix(in srgb, var(--green, #30d158) 14%, transparent); }
:root .hcCheck.warn { background: color-mix(in srgb, var(--orange, #ff9f0a) 18%, transparent); }
:root .hcNote { margin-top: 8px; font-size: calc(14px * var(--ts, 1)); color: var(--muted); line-height: 1.4; }
:root .hcFoot { margin-top: 10px; font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); }
:root .hcWho { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
:root .hcPair { display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 14px; background: var(--fill); }
:root .hcPair img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
:root .hcPair small { display: block; text-align: center; font-size: calc(11.5px * var(--ts, 1)); color: var(--muted); margin-top: 2px; }
:root .hcNote2 { font-size: calc(12px * var(--ts, 1)); color: var(--muted); max-width: 80px; }
@media (max-width: 560px) { :root .hcNums { grid-template-columns: 1fr; } }

:root .hcTrips { align-self: flex-start; font-style: normal; font-size: calc(11px * var(--ts, 1)); font-weight: 600; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* 62. Daily visitors list */
:root .hcDays { display: grid; gap: 4px; margin: 12px 0 6px; }
:root:root .hcDay { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1.2fr; gap: 8px; align-items: center; width: 100%; margin: 0; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--fill); color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: none; transform: none; }
:root:root .hcDay.sel { background: color-mix(in srgb, var(--accent) 16%, var(--card)); outline: 2px solid var(--accent); }
:root .hcDayName { font-size: calc(15px * var(--ts, 1)); font-weight: 600; }
:root .hcDayName small { display: block; font-weight: 400; font-size: calc(12px * var(--ts, 1)); color: var(--muted); }
:root .hcDayNum { text-align: right; }
:root .hcDayNum b { display: block; font-size: calc(20px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; }
:root .hcDayNum small { display: block; font-size: calc(11.5px * var(--ts, 1)); color: var(--muted); }
:root .hcDaysNote { font-size: calc(12.5px * var(--ts, 1)); color: var(--muted); margin: 4px 2px 14px; }

:root .hcShifts { display: grid; gap: 6px; margin-top: 8px; }
:root .hcShift { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; font-size: calc(14px * var(--ts, 1)); background: var(--fill); }
:root .hcShift i { font-style: normal; font-weight: 600; font-size: calc(12.5px * var(--ts, 1)); }
:root .hcShift.ok i { color: var(--green); } :root .hcShift.warn i { color: var(--orange); }

/* 63. "N blank photos hidden · show" link in the feed heading */
:root:root .blankLink { margin: 0 0 0 6px; padding: 0; border: 0; background: none; box-shadow: none; transform: none; color: var(--accent-text, var(--accent)); font: inherit; font-size: calc(14px * var(--ts, 1)); font-weight: 500; cursor: pointer; }
:root:root .blankLink[hidden] { display: none; }

/* 64. Combined card: entrance and exit of one visit */
:root .card .thumb.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
:root .card .thumb.pair .pairHalf { position: relative; min-width: 0; overflow: hidden; }
:root .card .thumb.pair .pairHalf img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
:root .pairChip { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-size: calc(11.5px * var(--ts, 1)); font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root .card .otherHalf { color: var(--muted); }

:root .card .hist { margin-top: 8px; font-size: calc(12.5px * var(--ts, 1)); line-height: 1.45; color: var(--muted); }
:root .card .thumb { position: relative; }
:root .card .thumb > .pairChip { position: absolute; left: 8px; bottom: 8px; }

/* 65. Person card: calm, one status line, a thin day bar */
:root .card .body .name { font-size: calc(17px * var(--ts, 1)); font-weight: 600; letter-spacing: -.01em; }
:root .card .statusLine { margin-top: 4px; font-size: calc(15px * var(--ts, 1)); color: var(--muted); }
:root .dayWrap .dayBar { position: relative; height: 8px; margin-top: 12px; border-radius: 4px; background: var(--fill); overflow: hidden; }
:root .dayWrap .dayBar .dbStay { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); }
:root .dayWrap .dayBar .dbDot { position: absolute; top: 1px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--card); border: 2px solid var(--muted); box-sizing: content-box; transform: translate(-1px, -1px) scale(.72); }
:root .dayBarAxis { display: flex; justify-content: space-between; margin-top: 3px; font-size: calc(11px * var(--ts, 1)); color: var(--muted); }
:root .card .badges:empty { display: none; }
:root .visitList { grid-column: 1 / -1; padding: 4px 0 8px; }
:root .visitList h4 { margin: 0 0 8px; font-size: calc(15px * var(--ts, 1)); font-weight: 600; }
:root .visitRow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hairline); }
:root .visitRow:first-of-type { border-top: 0; }
:root .vrNum { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--fill); display: inline-flex; align-items: center; justify-content: center; font-size: calc(12px * var(--ts, 1)); font-weight: 600; }
:root .visitRow figure { margin: 0; width: 84px; flex: none; }
:root .visitRow img { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: 12px; }
:root .visitRow figcaption { margin-top: 3px; text-align: center; font-size: calc(11.5px * var(--ts, 1)); color: var(--muted); }
:root .vrNone div { width: 84px; height: 84px; border-radius: 12px; background: var(--fill); display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; box-sizing: border-box; font-size: calc(11.5px * var(--ts, 1)); color: var(--muted); }
:root .vrDur { margin-left: auto; font-size: calc(14px * var(--ts, 1)); color: var(--muted); white-space: nowrap; }

/* 66. Front desk dashboard, calmer: quiet status line, Filters popover, folded side rows */
:root :is(#openDoorBtn) { display: none !important; }
:root .liveLine { display: flex; align-items: baseline; gap: 12px; padding: 4px 2px 10px; }
:root .liveLine .liveHeroNum { font-size: calc(34px * var(--ts, 1)); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
:root .liveLine .liveLineText { font-size: calc(15px * var(--ts, 1)); color: var(--muted); }
:root #pageToolbar { position: relative; }
:root:root #filtersBtn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 20px; background: var(--fill); border: 0; box-shadow: none; transform: none; color: var(--text); font: inherit; font-weight: 500; cursor: pointer; }
:root #filtersBtn i { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
:root #filtersPop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; min-width: 300px; border-radius: 18px; background: var(--card); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg); }
:root #filtersPop[hidden] { display: none; }
:root #filtersPop .tabs { align-self: flex-start; }
:root #filtersPop .dateRow { display: flex; align-items: center; gap: 10px; }
:root:root #filterPill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 16px; border: 0; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font: inherit; font-size: calc(13px * var(--ts, 1)); font-weight: 600; cursor: pointer; box-shadow: none; transform: none; }
:root:root #filterPill[hidden] { display: none; }
:root .liveSide .panel.fold { padding: 14px 18px; }
:root .liveSide .panel.fold > h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; cursor: pointer; font-size: calc(16px * var(--ts, 1)); }
:root .liveSide .panel.fold > h2::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform var(--dur) var(--ease); }
:root .liveSide .panel.fold.open > h2::after { transform: rotate(45deg); }
:root .liveSide .panel.fold > h2 .sub { margin-left: auto; font-weight: 400; }
:root .liveSide .panel.fold:not(.open) > :not(h2) { display: none; }
:root .liveSide .panel.fold.open > h2 { margin-bottom: 10px; }

/* 67. The feed never forces the page wider than the screen */
:root:root #feed { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
:root .dayHead { min-width: 0; }

@media (max-width: 700px) {
  :root .galleryToolbar { flex-wrap: wrap; gap: 10px; }
  :root .galleryToolbar .feedTitle { flex: 1 1 100%; }
  :root .galleryToolbar .feedTitle .sub { white-space: nowrap; }
  :root .galleryToolbar #feedViewTabs { margin-right: auto; }
}

/* 68. Quick actions row + member picker */
:root #addMemberBtn { display: none !important; }
:root .quickRow { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
:root .quickRow[hidden] { display: none; }
:root:root .quickRow button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 23px; background: var(--card); color: var(--text); font: inherit; font-size: calc(16px * var(--ts, 1)); font-weight: 600; box-shadow: var(--shadow-sm); cursor: pointer; transform: none; }
:root:root .quickRow button.qaPrimary { background: var(--accent); color: #fff; }
:root:root .quickRow button[hidden] { display: none; }
:root:root .quickRow button:active { transform: scale(.97); }
@media (max-width: 560px) { :root:root .quickRow button { flex: 1 1 0; justify-content: center; padding: 0 10px; font-size: calc(14px * var(--ts, 1)); } :root .quickRow button svg { display: none; } }
:root .pickScrim { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: var(--scrim, rgba(0,0,0,.45)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:root .pickScrim[hidden] { display: none; }
:root .pickSheet { width: min(520px, calc(100vw - 24px)); max-height: min(640px, 86dvh); display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg); }
@media (max-width: 560px) { :root .pickScrim { align-items: flex-end; } :root .pickSheet { width: 100vw; border-radius: 22px 22px 0 0; max-height: 88dvh; } }
:root .pickHead { display: flex; align-items: center; justify-content: space-between; }
:root .pickHead h3 { margin: 0; font-size: calc(20px * var(--ts, 1)); font-weight: 700; letter-spacing: -.02em; }
:root:root .pickClose { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--fill); color: var(--muted); cursor: pointer; box-shadow: none; transform: none; }
:root:root .pickInput { height: 46px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--fill); color: var(--text); font: inherit; font-size: calc(16px * var(--ts, 1)); }
:root .pickList { overflow-y: auto; display: flex; flex-direction: column; }
:root .pickHint { padding: 10px 4px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root:root .pickItem { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 6px; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; box-shadow: none; transform: none; }
:root:root .pickItem:hover { background: var(--fill); }
:root .pickItem img, :root .pickNone { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; background: var(--fill); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--muted); }
:root .pickText { flex: 1; min-width: 0; }
:root .pickText b { display: block; font-size: calc(16px * var(--ts, 1)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .pickText small { display: block; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root .pickState { flex: none; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root .pickState.warn { color: var(--orange, #ff9f0a); } :root .pickState.bad { color: var(--red, #ff453a); }

/* 69. Front desk dashboard: four KPI cards, full-width feed, side lists as sheets */
:root:root:root:not([data-dash="overview"]) .liveCols { display: flex; flex-direction: column; }
:root:root .liveSide { display: contents; position: static; max-height: none; overflow: visible; }
:root .kpiRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 16px; }
:root:root .kpiCard { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 16px 18px; border: 0; border-radius: 20px; background: var(--card); color: var(--text); font: inherit; box-shadow: var(--shadow-sm); cursor: default; transform: none; margin: 0; }
:root:root button.kpiCard { cursor: pointer; }
:root:root button.kpiCard:active { transform: scale(.98); }
:root .kpiLabel { font-size: calc(13px * var(--ts, 1)); font-weight: 500; color: var(--muted); }
:root .kpiBig { font-size: calc(32px * var(--ts, 1)); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
:root .kpiBig small { font-size: calc(15px * var(--ts, 1)); font-weight: 500; letter-spacing: 0; color: var(--muted); }
:root .kpiSub { font-size: calc(13px * var(--ts, 1)); color: var(--muted); line-height: 1.4; }
:root .kpiSub u { text-decoration: none; color: var(--accent-text, var(--accent)); cursor: pointer; font-weight: 500; }
:root .kpiCard.money { background: color-mix(in srgb, var(--green, #30d158) 12%, var(--card)); }
:root #kioskPanel { margin: 0 0 14px; }
:root #sheetScrim { position: fixed; inset: 0; z-index: 84; background: var(--scrim, rgba(0,0,0,.45)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:root #sheetScrim[hidden] { display: none; }
:root:root .panel.sheetPanel { display: none; }
:root:root .panel.sheetPanel.sheetOpen { display: block; position: fixed; z-index: 85; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(600px, calc(100vw - 24px)); max-height: min(720px, 88dvh); overflow-y: auto; margin: 0; box-shadow: var(--shadow-lg); border-radius: 22px; }
:root:root .panel.sheetPanel.sheetOpen > h2 { padding-right: 36px; }
:root .sheetClose { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--fill); color: var(--muted); cursor: pointer; box-shadow: none; }
@media (max-width: 560px) { :root:root .panel.sheetPanel.sheetOpen { top: auto; bottom: 0; left: 0; transform: none; width: 100vw; border-radius: 22px 22px 0 0; max-height: 88dvh; } }

:root:root #tiles { display: block; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; max-width: none; width: 100%; }

:root:root:root:not([data-dash="overview"]) .liveCols { align-items: stretch; }
:root:root .liveMain { width: 100%; }

/* 70. Quick actions in the sidebar, Find member in the top bar, cards only */
.navQa .navIcon { color: var(--accent-text, var(--accent)); }
@media (min-width: 981px) {
  :root:root .quickRow, :root:root #doorFab { display: none; }
  :root .topSearch { position: relative; flex: 1 1 auto; max-width: 520px; margin: 0 16px; display: flex; align-items: center; }
  :root .topSearch[hidden] { display: none; }
}
:root .topSearch > svg { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
:root:root .topSearch input { width: 100%; height: 42px; padding: 0 16px 0 40px; border: 0; border-radius: 21px; background: var(--fill); color: var(--text); font: inherit; font-size: calc(15px * var(--ts, 1)); }
:root .topResults { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70; max-height: min(520px, 70dvh); overflow-y: auto; padding: 6px 10px; border-radius: 18px; background: var(--card); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
:root .topResults[hidden] { display: none; }
:root #feedViewTabs[hidden], :root #selectModeBtn[hidden] { display: none; }

@media (min-width: 981px) {
  :root:root header .navTitle { flex: 0 0 auto; text-align: left; }
  :root:root header .topSearch { margin: 0 auto 0 28px; }
}

@media (min-width: 981px) {
  :root:root header { justify-content: flex-start; }
  :root:root header .navTitle { margin: 0; }
}

@media (min-width: 981px) {
  :root header .navTitle { margin-right: 0 !important; }
  :root header .topSearch { margin: 0 0 0 28px !important; }
}

/* 71. Sidebar groups: a hairline and breathing room between Quick actions, Menu and Admin */
:root .sidebar-nav .sidebar-nav-label:not(:first-child) { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--hairline); }

/* fix: results in the top bar were squashed and picked up the header's pill buttons */
:root:root .topResults { display: block; }
:root:root .topResults .pickItem { flex: none; display: flex; min-height: 62px; padding: 10px 8px; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; background: none; box-shadow: none; transform: none; }
:root:root .topResults .pickItem:first-child { border-top: 0; }
:root:root .topResults .pickItem:hover { background: var(--fill); border-radius: 12px; }
:root:root .topResults .pickText b { line-height: 1.3; }
:root:root .topResults .pickText small { line-height: 1.3; margin-top: 2px; }

/* fix: the member picker rows (phone/tablet sheet) were squashed in a scrolling column */
:root:root:root .pickList { display: block; }
:root:root:root .pickItem { flex: none; min-height: 62px; background: none; border-radius: 0; }
:root:root:root .pickItem:hover { background: var(--fill); }
:root:root:root .pickText b, :root:root:root .pickText small { line-height: 1.3; }

/* top-bar results sit inside <header>, whose pill-button rules otherwise win */
:root .topResults .pickItem { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; padding: 10px 8px !important; justify-content: flex-start !important; }
:root .topResults .pickItem:first-child { border-top: 0 !important; }
:root .topResults .pickItem:hover { background: var(--fill) !important; border-radius: 12px !important; }

/* the later display rules above must not defeat [hidden] */
:root:root:root .topResults[hidden], :root:root:root .pickScrim[hidden], :root:root:root .pickList[hidden] { display: none !important; }

/* 72. Compressed layout: Find member takes the place of the title, Open door sits beside Extend, no floating button */
:root:root #doorFab { display: none !important; }
:root:root .topSearch[hidden] { display: none !important; }
@media (max-width: 980px) {
  :root:not([data-view]) header .navTitle { display: none; }
  :root:root:not([data-view]) header .topSearch { display: flex; order: 2; flex: 1 1 auto; max-width: none; margin: 0 !important; }
  :root[data-view] header .topSearch { display: none !important; }
}

:root .topSearch { position: relative; align-items: center; }

/* 73. Compressed dashboard: centred quick row, a Back to Live bar, compact KPI cards, connection icon */
:root .quickRow { justify-content: center; }
:root:root .histBar { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 24px); margin: 0 12px 12px; min-height: 40px; border: 0; border-radius: 20px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); font: inherit; font-size: calc(14px * var(--ts, 1)); cursor: pointer; box-shadow: none; transform: none; }
:root:root .histBar[hidden] { display: none; }
:root .histBar u { text-decoration: none; color: var(--accent-text, var(--accent)); font-weight: 600; }
@media (min-width: 981px) { :root:root .histBar { display: none; } }
@media (max-width: 700px) {
  :root .kpiRow { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 0 12px; }
  :root .kpiRow > .kpiCard { grid-column: span 3; padding: 12px 14px; border-radius: 16px; }
  :root .kpiRow > .kpiCard:first-child { grid-column: 1 / -1; }
  :root .kpiRow:has(> :nth-child(4)) > .kpiCard:not(:first-child) { grid-column: span 2; }
  :root .kpiBig { font-size: calc(26px * var(--ts, 1)); }
  :root .kpiBig small { display: none; }
  :root .kpiLabel, :root .kpiSub { font-size: calc(12px * var(--ts, 1)); }
}
:root:root:root #offlineBanner { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; min-height: 0; padding: 0; margin: 0 0 0 10px; border: 0; border-radius: 50%; font-size: 0; box-shadow: none; cursor: pointer; transform: none; }
:root:root:root #offlineBanner::before { content: none; }
:root:root:root #offlineBanner.off { background: color-mix(in srgb, var(--orange, #ff9f0a) 20%, transparent); color: var(--orange, #c77700); }
:root:root:root #offlineBanner.on { background: color-mix(in srgb, var(--green, #30d158) 18%, transparent); color: var(--green, #1e9e45); }
:root:root:root #offlineBanner.hidden { display: none; }

@media (max-width: 980px) { :root .quickRow { padding: 0 12px; } }

/* 74. The day bar is pinned to the bottom of every card, so the bars line up across a row */
:root .card .body { display: flex; flex-direction: column; }
:root .card .body .dayWrap { margin-top: auto; padding-top: 12px; }
:root .card .body .dayWrap .dayBar { margin-top: 0; }

/* 75. Compressed widths: the cards use the full width, and the quick row clears the top bar */
:root:root #main-content { width: 100%; box-sizing: border-box; }
:root:root .liveCols > * { align-self: stretch; }
:root:root .quickRow { margin: 16px 0 14px; }
@media (min-width: 701px) and (max-width: 980px) { :root .kpiRow { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }

/* 76. Calmer day bar: taller, stays only, space always reserved so cards align */
:root .card .body .dayWrap { min-height: 30px; }
:root .dayWrap .dayBar { height: 10px; border-radius: 5px; }
:root .dayWrap .dayBar .dbStay { border-radius: 5px; }

/* 77. Extend | Coaching switch at the top of both sheets */
:root .modeSeg { display: flex; gap: 2px; padding: 3px; margin: 6px 0 14px; border-radius: 12px; background: var(--fill); }
:root:root .modeSeg button { flex: 1; margin: 0; padding: 8px 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: calc(15px * var(--ts, 1)); font-weight: 600; box-shadow: none; transform: none; cursor: pointer; }
:root:root .modeSeg button.active { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }
/* 78. One member card at the top of the Extend and Coaching sheets, same as the Extend screen */
:root :is(#extendMemberBox, #addCoachingBox) > .extendSummary:not([hidden]) { display: block; padding: 0; margin: 0 0 16px; background: var(--fill); border-radius: 18px; overflow: hidden; }
:root .esStatus.bad { color: var(--red); }
:root .esBadge.off { background: var(--muted); }
:root #extendMemberSub, :root #addCoachingSub { display: none; }
:root #coachKindSeg { margin: 4px 0 14px; }
/* 79. Camera sheet for taking a picture of an ID */
:root .camSheet { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root .camSheetBox { width: min(640px, calc(100vw - 24px)); padding: 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 12px; }
:root .camSheetBox h3 { margin: 0; font-size: calc(18px * var(--ts, 1)); font-weight: 700; }
:root .camSheetBox video { width: 100%; max-height: 62dvh; border-radius: 14px; background: #000; object-fit: cover; }
:root .camSheetBtns { display: flex; gap: 10px; justify-content: flex-end; }
:root:root .camSheetBtns button { min-height: 46px; padding: 0 22px; border: 0; border-radius: 23px; background: var(--fill); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; box-shadow: none; transform: none; }
:root:root .camSheetBtns .camShoot { background: var(--accent); color: #fff; }
:root:root .modeSeg[hidden] { display: none !important; }
:root:root:root .kioskCard .kcReplace { margin: 10px 0 0; }
:root:root:root .kioskCard .kcReplace input[type="checkbox"] { width: 42px; height: 26px; min-height: 0; padding: 0; flex: none; }
:root:root:root .day-hide { display: none !important; }
:root:root:root #nameSearchBox { margin: -6px 0 14px; }
:root:root:root #nameSearchBox .hint { margin: 0 4px 6px; }
:root:root:root .card .nameLink { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; transform: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
:root:root:root .card .nameLink .chev { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--accent-text); border-top: 2px solid var(--accent-text); transform: rotate(45deg); margin-left: 4px; opacity: .8; }
:root:root:root .card .nameLink:hover { color: var(--accent-text); }
:root:root:root #tsPanel { border-color: color-mix(in srgb, var(--orange, #ff9f0a) 55%, var(--hairline)); }
:root:root:root #tsPanel .hint { margin: -6px 0 10px; }
:root:root:root #tsPanel[hidden] { display: none !important; }
:root:root:root #tsList { display: block; }
:root:root:root .tsRow { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 12px 4px; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; background: none; color: var(--text); font: inherit; text-align: left; box-shadow: none; transform: none; cursor: pointer; }
:root:root:root .tsRow:first-child { border-top: 0; }
:root:root:root .tsRow .tsName { font-weight: 600; }
:root:root:root .tsRow .tsState { color: var(--orange, #c77700); font-size: calc(13px * var(--ts, 1)); }
:root:root:root .doorSent { color: var(--muted); font-weight: 400; margin-left: 4px; }
:root:root:root .doorWarn { color: var(--orange, #c77700); font-weight: 600; }
:root:root:root .mdActionRow { display: block; width: 100%; margin: 0; padding: 14px 16px; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; font: inherit; font-weight: 600; text-align: left; color: var(--accent-text); cursor: pointer; }
:root:root:root .mdActionRow[data-ts="remove"] { color: var(--red, #ff453a); }
:root:root:root .mdActionRow:disabled { opacity: .5; cursor: default; }
:root:root:root .mdGroup:has(> .mdActionRow) { margin-top: 12px; }

/* ---------- 80. Sell sheet (product sales) ---------- */
:root #sellBox { max-width: 480px; }
:root:root #sellBox .modeSeg { margin: 4px 0 14px; }
:root #sellGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
:root:root:root .sellTile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px; background: var(--fill); border: 1.5px solid transparent; cursor: pointer; text-align: left; color: var(--text); transition: border-color var(--dur-fast, .12s) ease, background-color var(--dur-fast, .12s) ease; }
:root:root:root .sellTile:hover { background: var(--fill-strong, var(--fill)); }
:root:root:root .sellTile.has { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--fill)); }
:root:root:root .sellTile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root .sellPic { position: relative; aspect-ratio: 1 / 1; border-radius: 11px; overflow: hidden; background: color-mix(in srgb, var(--accent) 12%, var(--card)); display: flex; align-items: center; justify-content: center; }
:root .sellPic img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root .sellInit { font-size: calc(30px * var(--ts, 1)); font-weight: 600; color: var(--accent-text); opacity: .75; }
:root:root:root .sellMinus { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; cursor: pointer; }
:root .sellName { font-size: calc(13px * var(--ts, 1)); font-weight: 600; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root .sellRow { display: flex; justify-content: space-between; align-items: center; }
:root .sellRow small { color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); }
:root .sellStep { color: var(--accent-text); font-weight: 600; font-size: calc(14px * var(--ts, 1)); }
:root .sellEmpty { color: var(--muted); font-size: calc(14px * var(--ts, 1)); padding: 14px 4px; grid-column: 1 / -1; }
:root .sellLbl { margin: 18px 0 8px 4px; font-size: calc(12.5px * var(--ts, 1)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
:root .sellPills { display: flex; flex-wrap: wrap; gap: 8px; }
:root:root:root .sellPill { margin: 0; min-height: 0; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--fill); color: var(--muted); font: inherit; font-size: calc(13px * var(--ts, 1)); font-weight: 500; box-shadow: none; transform: none; cursor: pointer; }
:root:root:root .sellPill.on { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
:root .sellBoxIn { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--fill); }
:root .sellBoxIn[hidden], :root #sellRef[hidden], :root .sellErr[hidden], :root .sellIdThumb[hidden], :root #sellIdActions[hidden] { display: none !important; }
:root .sellTwo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
:root #sellBox :is(#sellPct, #sellAmt, #sellNote, #sellRef) { width: 100%; box-sizing: border-box; min-height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--hairline); background: var(--card); color: var(--text); font: inherit; }
:root #sellRef { margin-top: 10px; }
:root .sellIdThumb { display: flex; align-items: center; gap: 12px; }
:root .sellIdThumb img { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; }
:root .sellIdThumb span { flex: 1; font-size: calc(14px * var(--ts, 1)); }
:root:root:root .sellIdThumb button, :root:root:root .sellVoid { margin: 0; min-height: 0; padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: var(--accent-text); font: inherit; font-weight: 600; box-shadow: none; transform: none; cursor: pointer; }
:root #sellBox .camActions { display: flex; gap: 8px; }
:root #sellBox .hint { margin-top: 8px; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
:root .sellSum { margin-top: 16px; padding: 0 6px; font-size: calc(14px * var(--ts, 1)); color: var(--muted); }
:root .sellSum > div { display: flex; justify-content: space-between; padding: 3px 0; }
:root .sellSum .sellSumTot { color: var(--text); font-weight: 600; }
:root .sellFoot { position: sticky; bottom: -4px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: var(--card-raised); box-shadow: 0 0 0 1px var(--hairline), 0 -10px 14px 2px var(--card-raised); }
:root .sellFoot small { display: block; color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); }
:root .sellFoot b { font-size: calc(20px * var(--ts, 1)); font-weight: 600; }
:root:root:root #sellConfirm { margin: 0; min-height: 44px; padding: 0 26px; border: 0; border-radius: 22px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; box-shadow: none; cursor: pointer; }
:root:root:root #sellConfirm:disabled { opacity: .6; cursor: default; }
:root .sellErr { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--red, #ff453a) 14%, var(--card)); color: var(--red, #c4271c); font-size: calc(14px * var(--ts, 1)); }
:root .sellToday { border-radius: 14px; background: var(--fill); padding: 0 12px; }
:root .sellSale { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid var(--hairline); }
:root .sellSale:first-child { border-top: 0; }
:root .sellSaleMain { flex: 1; min-width: 0; }
:root .sellSaleMain b { display: block; font-size: calc(14px * var(--ts, 1)); font-weight: 600; }
:root .sellSaleMain small { color: var(--muted); font-size: calc(12.5px * var(--ts, 1)); }
:root .sellSaleAmt { font-weight: 600; font-size: calc(14px * var(--ts, 1)); }
:root .sellSale.voided { opacity: .55; }
:root .sellSale.voided .sellSaleAmt, :root .sellSale.voided b { text-decoration: line-through; }

/* ---------- 81. Consumables manager (categories, photos, hide switch) ---------- */
:root #catalogBox { max-width: 560px; }
:root .catGroup { margin-top: 18px; }
:root .catGroupHead { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 8px; font-size: calc(12.5px * var(--ts, 1)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
:root:root:root .catGroupActs button { margin: 0 0 0 10px; min-height: 0; padding: 2px 4px; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: calc(13px * var(--ts, 1)); letter-spacing: 0; text-transform: none; box-shadow: none; transform: none; cursor: pointer; }
:root .catList { background: var(--fill); border-radius: 16px; overflow: hidden; }
:root .catItem + .catItem, :root .catItem + .catAdd { border-top: 1px solid var(--hairline); }
:root .catRow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; }
:root .catThumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
:root .catNone { display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--accent-text); }
:root .catName { flex: 1; min-width: 0; font-weight: 500; font-size: calc(15px * var(--ts, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .catPrice { color: var(--muted); font-size: calc(14px * var(--ts, 1)); }
:root .catSw { position: relative; flex: none; width: 42px; height: 26px; margin: 0; cursor: pointer; }
:root .catSw input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
:root .catSw i { position: absolute; inset: 0; border-radius: 13px; background: var(--fill-strong, rgba(120,120,128,.32)); transition: background-color .15s ease; pointer-events: none; }
:root .catSw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: transform .15s ease; }
:root .catSw input:checked + i { background: var(--switch-on, #34c759); }
:root .catSw input:checked + i::after { transform: translateX(16px); }
:root .catEdit { padding: 4px 12px 14px; display: grid; gap: 8px; }
:root #catalogBox .catEdit input { width: 100%; box-sizing: border-box; min-height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--hairline); background: var(--card); color: var(--text); font: inherit; }
:root #catalogBox .catEdit .camActions { display: flex; flex-wrap: wrap; gap: 8px; }
:root:root:root .catDelete { justify-self: start; margin: 4px 0 0; min-height: 0; padding: 4px 2px; border: 0; background: none; color: var(--red, #ff453a); font: inherit; font-weight: 500; box-shadow: none; transform: none; cursor: pointer; }
:root:root:root .catAdd { display: block; width: 100%; margin: 0; padding: 13px 14px; border: 0; border-radius: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 500; text-align: left; box-shadow: none; transform: none; cursor: pointer; }
:root .catAddCat { margin-top: 18px; }

:root .sellSum .sellLines { margin: 0 0 8px; padding: 4px 12px; border-radius: 14px; background: var(--fill); }
:root .sellSum .sellLines::before { content: "Your order"; display: block; padding: 8px 0 2px; font-size: calc(12.5px * var(--ts, 1)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
:root .sellSum .sellLine { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hairline); color: var(--text); }
:root .sellSum .sellLines .sellLine:first-of-type { border-top: 0; }
:root .sellLineName { flex: 1; min-width: 0; font-weight: 500; font-size: calc(14px * var(--ts, 1)); line-height: 1.25; }
:root .sellLineName small { display: block; color: var(--muted); font-weight: 400; font-size: calc(12px * var(--ts, 1)); }
:root .sellQty { display: inline-flex; align-items: center; gap: 4px; flex: none; }
:root .sellQty b { min-width: 22px; text-align: center; font-weight: 600; }
:root:root:root .sellQty button { margin: 0; width: 28px; min-height: 0; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--card); color: var(--accent-text); font: inherit; font-size: 18px; line-height: 1; box-shadow: none; transform: none; cursor: pointer; }
:root .sellLineAmt { flex: none; min-width: 64px; text-align: right; font-weight: 600; font-size: calc(14px * var(--ts, 1)); }
:root:root:root .sellSum > .sellLines { display: block; padding: 4px 12px 6px; }
:root:root:root .sellSum .sellLines > .sellLine { display: flex; justify-content: flex-start; padding: 9px 0; }

/* ---------- 82. Settings: offline copy ---------- */
:root:root:root .offlineGo { margin: 4px 0 10px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 22px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; box-shadow: none; cursor: pointer; }
:root:root:root .offlineGo:disabled { opacity: .55; cursor: default; }
:root .offlineBar { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; margin: 4px 0 8px; }
:root .offlineBar[hidden] { display: none !important; }
:root .offlineBar i { display: block; height: 100%; width: 6%; border-radius: 4px; background: var(--accent); transition: width .4s ease; }

/* ---------- 83. Sell: cash received and change ---------- */
:root .sellCash { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--fill); }
:root .sellCash[hidden] { display: none !important; }
:root .sellCashTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
:root .sellCashTop label { font-weight: 500; font-size: calc(14px * var(--ts, 1)); }
:root #sellBox #sellGot { width: 140px; box-sizing: border-box; min-height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--hairline); background: var(--card); color: var(--text); font: inherit; font-size: calc(17px * var(--ts, 1)); font-weight: 600; text-align: right; }
:root .sellBills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
:root .sellBills:empty { display: none; }
:root:root:root .sellBills button { margin: 0; min-height: 0; padding: 6px 14px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--card); color: var(--accent-text); font: inherit; font-size: calc(13.5px * var(--ts, 1)); font-weight: 600; box-shadow: none; transform: none; cursor: pointer; }
:root .sellChange { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; font-size: calc(15px * var(--ts, 1)); color: var(--muted); }
:root .sellChange:empty { display: none; }
:root .sellChange b { font-size: calc(24px * var(--ts, 1)); font-weight: 700; }
:root .sellChange b.ok { color: var(--green, #34c759); }
:root .sellChange b.short { color: var(--orange, #ff9f0a); }

/* ---------- 84. Sell: GCash receipt ---------- */
:root .sellGcash { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--fill); display: grid; gap: 10px; }
:root .sellGcash[hidden], :root .sellGcashThumb[hidden], :root #sellGcashActions[hidden] { display: none !important; }
:root .sellGcashThumb { display: flex; align-items: center; gap: 12px; }
:root .sellGcashThumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; }
:root .sellGcashThumb span { flex: 1; font-size: calc(13.5px * var(--ts, 1)); line-height: 1.35; }
:root .sellGcashThumb span.warn { color: var(--orange, #ff9f0a); }
:root:root:root .sellGcashThumb button { margin: 0; min-height: 0; padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: var(--accent-text); font: inherit; font-weight: 600; box-shadow: none; cursor: pointer; }
:root #sellBox #sellRef { width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--hairline); background: var(--card); color: var(--text); font: inherit; font-size: calc(16px * var(--ts, 1)); letter-spacing: .02em; }
:root #sellBox .sellGcash .camActions { display: flex; flex-wrap: wrap; gap: 8px; }
:root #sellBox .sellGcash .hint { margin: 0; }
:root .sellGcashDebug[hidden] { display: none !important; }
:root .sellGcashDebug summary { cursor: pointer; color: var(--accent-text); font-size: calc(13px * var(--ts, 1)); }
:root .sellGcashDebug pre { margin: 8px 0 0; padding: 10px; border-radius: 10px; background: var(--card); white-space: pre-wrap; word-break: break-word; font-size: 12px; max-height: 160px; overflow: auto; }

/* ---------- 85. GCash QR (settings + the customer's full-screen QR) ---------- */
:root .qrPreview { display: grid; justify-items: start; gap: 10px; margin: 10px 0; padding: 12px; border-radius: 14px; background: var(--fill); }
:root .qrPreview[hidden], :root #qrSavedActions[hidden], :root .sellQrBtn[hidden] { display: none !important; }
:root .qrPreview canvas { width: 160px; height: 160px; border-radius: 10px; background: #fff; }
:root .btnRowQ { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
:root:root:root .btnRowQ button, :root:root:root .sellQrBtn { margin: 0; min-height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: var(--fill); color: var(--accent-text); font: inherit; font-weight: 600; box-shadow: none; cursor: pointer; }
:root:root:root #qrSave { background: var(--accent); color: #fff; }
:root:root:root .sellQrBtn { background: var(--accent); color: #fff; justify-self: start; }
#customerQr { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .78); }
#customerQr[hidden] { display: none !important; }
#customerQr .cqBox { width: min(420px, 100%); background: #fff; color: #111; border-radius: 28px; padding: 22px 20px 20px; text-align: center; display: grid; gap: 8px; justify-items: center; }
#customerQr .cqTitle { font-size: 18px; font-weight: 600; color: #444; }
#customerQr canvas { width: min(320px, 78vw); height: auto; aspect-ratio: 1; }
#customerQr .cqAmount { font-size: 38px; font-weight: 700; letter-spacing: -.02em; }
#customerQr .cqName { font-size: 16px; color: #555; }
#customerQr .cqHint { font-size: 14px; color: #777; }
#customerQr button { margin-top: 6px; min-height: 46px; padding: 0 34px; border: 0; border-radius: 23px; background: #0b6bff; color: #fff; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; }

/* ---------- 86. Dashboard: big quick-action tiles under the top bar (the front desk's four everyday jobs) ---------- */
:root:root:root .quickRow:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 18px; padding: 0; justify-content: stretch; }
:root:root:root .quickRow button { --qa: var(--accent); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; flex: none; min-height: 112px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 24px; background: var(--card); color: var(--text); font: inherit; font-size: calc(17px * var(--ts, 1)); font-weight: 600; letter-spacing: -.01em; text-align: left; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.12)); cursor: pointer; transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; }
:root:root:root .quickRow button:hover { border-color: color-mix(in srgb, var(--qa) 55%, var(--hairline)); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--qa) 55%, transparent); }
:root:root:root .quickRow button:active { transform: scale(.97); }
:root:root:root .quickRow button svg { display: block; flex: none; box-sizing: content-box; width: 28px; height: 28px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--qa) 16%, transparent); color: var(--qa); }
:root:root:root .quickRow button.qaPrimary { background: var(--accent); border-color: var(--accent); color: #fff; }
:root:root:root .quickRow button.qaPrimary svg { background: rgba(255, 255, 255, .22); color: #fff; }
:root:root:root .quickRow #qaDayPass { --qa: var(--green, #34c759); }
:root:root:root .quickRow #qaSell { --qa: var(--orange, #ff9f0a); }
:root:root:root .quickRow #qaDoor { --qa: var(--purple, #af52de); }
@media (max-width: 560px) {
  :root:root:root .quickRow:not([hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :root:root:root .quickRow button { min-height: 100px; padding: 14px 14px; font-size: calc(16px * var(--ts, 1)); justify-content: space-between; }
}
@media (max-width: 980px) { :root:root:root .quickRow:not([hidden]) { padding: 0 12px; } }

  /* 87. smaller Live feed cards: more people on screen, photos about half the area */
  :root:root:root #feed { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  :root:root:root #feed .card .thumb { aspect-ratio: 4 / 3; }
  :root:root:root #feed .card .body { padding: 8px 10px 10px; }
  :root:root:root #feed .card .body .name { font-size: calc(14px * var(--ts, 1)); }
  :root:root:root #feed .card .body :is(.meta, .sub, .status, .when) { font-size: calc(12px * var(--ts, 1)); }
  :root:root:root #feed .card .dayWrap { min-height: 0; padding-top: 6px; }
  @media (max-width: 700px) { :root:root:root #feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

  /* In/Out time chips on the small cards: one line, compact, never wrapping over the faces */
  :root:root:root #feed .card .pairChip { left: 5px; bottom: 5px; padding: 2px 7px; font-size: calc(10.5px * var(--ts, 1)); line-height: 1.25; white-space: nowrap; max-width: calc(100% - 10px); overflow: hidden; text-overflow: ellipsis; }
  :root:root:root #feed .card .thumb > .pairChip { left: 5px; bottom: 5px; }
  :root:root:root #feed .card .thumb .dl { transform: scale(.8); transform-origin: top right; }

  /* 88. GCash receipt scan inside the payment forms (Add member, Extend, Coaching) */
  :root:root:root .receiptBox { margin-top: 8px; display: grid; gap: 8px; }
  :root:root:root .receiptBox .camActions { display: flex; flex-wrap: wrap; gap: 8px; }
  :root:root:root .receiptBox .camActions[hidden], :root:root:root .receiptThumb[hidden] { display: none !important; }
  :root:root:root .receiptThumb { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--fill); }
  :root:root:root .receiptThumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; flex: none; }
  :root:root:root .receiptThumb span { flex: 1; font-size: calc(13.5px * var(--ts, 1)); line-height: 1.35; }
  :root:root:root .receiptThumb span.warn { color: var(--orange, #ff9f0a); }
  :root:root:root .receiptThumb button { margin: 0; min-height: 0; padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: var(--accent-text); font: inherit; font-weight: 600; box-shadow: none; }
  :root:root:root .kcReceipt { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
  :root:root:root .kcReceipt[hidden] { display: none !important; }
  :root:root:root .kcReceipt img { width: 44px; height: 44px; object-fit: cover; border-radius: 9px; }
  :root:root:root .kcReceipt span { flex: 1; font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
  :root:root:root .kcScan { margin: 0; min-height: 0; padding: 6px 12px; border: 0; border-radius: 9px; background: var(--fill); color: var(--accent-text); font: inherit; font-weight: 600; box-shadow: none; }
  :root:root:root .field:has(> .receiptBox) { flex-wrap: wrap; row-gap: 10px; }
  :root:root:root .field:has(> .receiptBox) > input { flex: 1 1 140px; min-width: 120px; }
  :root:root:root .field > .receiptBox { flex: 1 0 100%; margin-top: 0; }

  /* 89. Daily Report status banner: a roomy card (status line, short notes, buttons) instead of a one-line pill */
  :root:root:root .statusBanner { display: flex; flex-wrap: wrap; align-items: center; width: 100%; box-sizing: border-box; padding: 12px 16px; border-radius: 16px; gap: 6px 12px; }
  :root:root:root .statusBanner > span:first-child { flex: 1 1 100%; }
  :root:root:root .statusBanner .lockNote { flex: 1 1 100%; margin: 0; line-height: 1.4; }
  :root:root:root .statusBanner > button { margin: 6px 0 0 0; }
  :root:root:root .statusBanner > button:first-of-type { margin-left: auto; }

  /* 90. live number under each big quick-action tile */
  :root:root:root .quickRow button .qaText { display: grid; gap: 2px; text-align: left; }
  :root:root:root .quickRow button .qaStat { font-size: calc(12.5px * var(--ts, 1)); font-weight: 500; opacity: .72; min-height: 1.2em; }
  :root:root:root .quickRow #qaExpense { --qa: var(--pink, #ff375f); }
  @media (max-width: 700px) { :root:root:root .quickRow:not([hidden]) > button:not([hidden]):last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 84px; } }

  /* 91. Expense and Open door sheets (same popups as Sell) */
  :root:root:root .sheetNote { margin: 0 0 12px; font-size: calc(13.5px * var(--ts, 1)); color: var(--muted); line-height: 1.4; }
  :root:root:root .sheetNote.warn { color: var(--orange, #ff9f0a); }
  :root:root:root .sheetNote b { color: var(--text); }
  :root:root:root .sheetLbl { margin: 14px 0 8px 4px; font-size: calc(12px * var(--ts, 1)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  :root:root:root .sheetReceipt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--fill); }
  :root:root:root .sheetReceipt img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; }
  :root:root:root .sheetReceipt img[hidden], :root:root:root .sheetReceipt button[hidden] { display: none !important; }
  :root:root:root .sheetReceipt span { flex: 1 1 120px; font-size: calc(13.5px * var(--ts, 1)); }
  :root:root:root .sheetReceipt button { margin: 0; min-height: 0; padding: 6px 12px; border: 0; border-radius: 9px; background: var(--card); color: var(--accent-text); font: inherit; font-weight: 600; box-shadow: none; }
  :root:root:root .sheetErr { min-height: 1.3em; margin: 6px 4px 0; color: var(--red, #ff453a); font-size: calc(13px * var(--ts, 1)); }
  :root:root:root .sheetActions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
  :root:root:root .sheetLink { background: none; border: 0; padding: 6px 4px; color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; box-shadow: none; min-height: 0; }
  :root:root:root .sheetPrimary { margin: 0; min-height: 46px; padding: 0 26px; border: 0; border-radius: 23px; background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: none; }
  :root:root:root .sheetPrimary:disabled { opacity: .55; cursor: default; }
  :root:root:root .doorRows { display: grid; gap: 8px; }
  :root:root:root .doorRow { display: block; width: 100%; margin: 0; min-height: 54px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--fill); color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; box-shadow: none; }
  :root:root:root .doorRow:active { transform: scale(.98); }
  :root:root:root #doorBox .modeSeg { margin: 4px 0 12px; }

  /* 93. every popup except Add member is the same width */
  :root:root:root :is(#extendMemberBox, #addCoachingBox, #sellBox, #expenseBox, #doorBox, #dayPassBox, #coachMarkBox) { max-width: 520px; }
  :root:root:root :is(.shiftTabs, .dayBar)[hidden] { display: none !important; }
  :root:root:root .sellStock { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: calc(11px * var(--ts, 1)); font-weight: 700; }
  :root:root:root .sellStock.low { background: color-mix(in srgb, var(--orange, #ff9f0a) 22%, transparent); color: var(--orange, #ff9f0a); }
  :root:root:root .sellStock.out { background: color-mix(in srgb, var(--red, #ff453a) 20%, transparent); color: var(--red, #ff453a); }
  :root:root:root .sheetNote[hidden] { display: none !important; }
  :root:root:root .dpPrice { margin: 4px 0 2px; text-align: center; font-size: calc(44px * var(--ts, 1)); font-weight: 800; letter-spacing: -.03em; }
  :root:root:root #dayPassBox .modeSeg { margin: 4px 0 12px; }
  :root:root:root .dpGo { display: block; width: 100%; margin-top: 12px; min-height: 54px; font-size: calc(17px * var(--ts, 1)); }
  :root:root:root #dpGcash[hidden] { display: none !important; }
  :root:root:root .dpResults, :root:root:root .dpMatch { margin: 0 0 12px; border-radius: 16px; background: var(--fill); overflow: hidden; }
  :root:root:root .dpResults[hidden], :root:root:root .dpMatch[hidden], :root:root:root #dpFaceStatus[hidden] { display: none !important; }
  :root:root:root .dpResHead { padding: 10px 14px 4px; font-size: calc(12px * var(--ts, 1)); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
  :root:root:root .dpResults .memberSearchResult { padding: 8px 14px; }
  :root:root:root .dpPhotoRow { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; }
  :root:root:root .dpThumb { flex: none; width: 76px; height: 76px; border-radius: 18px; background: var(--fill); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: calc(13px * var(--ts, 1)); overflow: hidden; }
  :root:root:root .dpThumb img { width: 100%; height: 100%; object-fit: cover; }
  :root:root:root .dpPhotoBtns { display: flex; flex-wrap: wrap; gap: 8px; }
  :root:root:root .dpPhotoBtns button, :root:root:root .dpCand button, :root:root:root .dpNotThem { margin: 0; min-height: 0; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--card); color: var(--accent-text); font: inherit; font-weight: 600; box-shadow: none; cursor: pointer; }
  :root:root:root .dpCand { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
  :root:root:root .dpCand img, :root:root:root .dpCand .noPhoto { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--card); flex: none; }
  :root:root:root .dpCandInfo { flex: 1; min-width: 0; }
  :root:root:root .dpCandInfo small { display: block; color: var(--muted); }
  :root:root:root .dpNotThem { display: block; width: calc(100% - 28px); margin: 6px 14px 12px; text-align: center; }
  :root:root:root .itemRow { padding: 11px 16px; cursor: pointer; border-top: 1px solid var(--hairline, rgba(120,120,128,.18)); font-weight: 500; }
  :root:root:root .itemRow:first-child { border-top: 0; }
  :root:root:root .itemRow:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  :root:root:root .itemAdd { color: var(--accent-text); font-weight: 700; }
  :root:root:root .dpCamBtns { justify-content: center; margin-bottom: 10px; }
  :root:root:root #expItemList { max-height: 188px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  :root:root:root .itemRow { padding: 10px 16px; }
  :root:root:root .dpCam { position: relative; margin: 0 0 6px; border-radius: 24px; overflow: hidden; background: #05070c; aspect-ratio: 10 / 11; }
  :root:root:root .dpFaceWrap { position: absolute; left: 50%; top: 46%; width: 56%; aspect-ratio: 4 / 5; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; background: #111; }
  :root:root:root .dpFaceWrap video, :root:root:root .dpFaceWrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
  :root:root:root .dpFaceWrap video { transform: scaleX(-1); }
  :root:root:root .dpFaceWrap video[hidden], :root:root:root .dpFaceWrap img[hidden], :root:root:root .dpCamStatus[hidden] { display: none !important; }
  :root:root:root .dpRing { position: absolute; left: 50%; top: 46%; width: 72%; aspect-ratio: 200 / 250; height: auto; transform: translate(-50%, -50%); }
  :root:root:root .dpTick { stroke: rgba(255, 255, 255, .26); stroke-width: 2.4; stroke-linecap: round; }
  :root:root:root .dpCamStatus { position: absolute; left: 12px; right: 12px; bottom: 14px; color: #fff; font-size: calc(15px * var(--ts, 1)); font-weight: 600; text-align: center; }
  /* 94. Open door lives in the top bar, always visible, next to the search and the menu */
  :root:root:root .kcNote { margin: 4px 0 8px; font-size: 13px; color: var(--muted); }
  /* Recent (the last 24 hours at the kiosk) */
  :root:root:root .kRecentHd { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 11px 4px; border: 0; border-top: 1px solid var(--hairline); background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: left; box-shadow: none; }
  .kRecentHd[hidden], #kioskRecent[hidden] { display: none !important; }
  .kRecentCnt { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text, var(--accent)); }
  .kRecentCnt:empty { display: none; }
  .kRecentSub { font-weight: 400; font-size: 12px; color: var(--muted); }
  .kRecentChev { margin-left: auto; color: var(--muted); transition: transform .2s ease; }
  .kRecentHd[aria-expanded="true"] .kRecentChev { transform: rotate(180deg); }
  .kRecentRow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hairline); }
  .kRecentTime { width: 52px; flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .kRecentPhoto { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; }
  .kRecentWho { flex: 1; min-width: 0; }
  .kTag { font-size: 12px; padding: 2px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
  .kTag.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
  .kTag.wn { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
  .kTag.gr { background: var(--fill); color: var(--muted); }
  :root:root:root .kRestore { min-height: 0; padding: 6px 14px; font-size: 13px; border-radius: 10px; white-space: nowrap; }
  :root:root:root .kRecentRow { cursor: pointer; }
  .kRecentArrow { flex: none; color: var(--muted); transition: transform .2s ease; }
  .kRecentItem.open .kRecentArrow { transform: rotate(180deg); }
  .kRecentItem + .kRecentItem .kRecentRow, .kRecentItem:first-child .kRecentRow { border-top: 1px solid var(--hairline); }
  .kRecentDetails { margin: 0 0 12px 62px; padding: 10px 14px; border-radius: 14px; background: var(--fill); display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 18px; }
  .kRecentDetails div { min-width: 0; }
  .kRecentDetails dt { font-size: 11px; color: var(--muted); }
  .kRecentDetails dd { margin: 1px 0 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
  /* Coaching today */
  :root:root:root .coachRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 0; border-top: 1px solid var(--hairline); }
  .coachWho { flex: 1 1 220px; min-width: 0; }
  .ctFlag { margin-top: 5px; display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
  .coachBtns { display: flex; gap: 8px; flex: none; margin-left: auto; }
  :root:root:root .ctMark, :root:root:root .ctDismiss, :root:root:root .coachingUndoBtn { min-height: 0; padding: 8px 14px; font-size: 13px; border-radius: 10px; white-space: nowrap; }
  :root:root:root .ctMark { background: var(--accent); color: #fff; }
  /* Today's activity */
  :root:root:root .actHd { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: left; box-shadow: none; min-height: 0; }
  .actTitle { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
  .actSub { font-size: 13px; color: var(--muted); }
  .actHd .kRecentChev { margin-left: auto; transition: transform .2s ease; }
  .actHd[aria-expanded="true"] .kRecentChev { transform: rotate(180deg); }
  #activityBody[hidden] { display: none !important; }
  #activityPanel[hidden] { display: none !important; }
  :root:root:root .actRow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hairline); cursor: pointer; }
  .actTime { width: 62px; flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .actIcon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
  .actIcon.sale { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
  .actIcon.payment { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
  .actIcon.expense { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
  .actWho { flex: 1; min-width: 0; }
  .actAmt { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .actAmt.neg { color: var(--red); }
  .actItem.void .actWho, .actItem.void .actAmt { opacity: .55; text-decoration: line-through; }
  .actItem.void .actWho .kcPlan { text-decoration: none; }
  .actItem.open .kRecentArrow { transform: rotate(180deg); }
  .actVoidRow { margin: -4px 0 12px 72px; }
  :root:root:root .actVoid { min-height: 0; padding: 8px 14px; font-size: 13px; border-radius: 10px; color: var(--red); }
  /* ===== front desk panels, Apple style: two columns, grouped lists, section titles above the cards, Settings-style icons, glass only on controls ===== */
  .deskWrap { container-type: inline-size; }
  .deskCols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 22px; }
  @container (min-width: 740px) { .deskCols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
  .deskL:not(:has(.panel:not([hidden]))), .deskR:not(:has(.panel:not([hidden]))) { display: none; }
  :root:root:root :is(#kioskPanel, #coachTodayPanel, #activityPanel) { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 22px; max-width: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root:root:root :is(#kioskPanel, #coachTodayPanel) h2 { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin: 0 0 6px 16px; }
  :is(#kioskPanel, #coachTodayPanel) h2 .sub { margin-left: auto; margin-right: 16px; font-weight: 400; }
  #coachTodayPanel .hint { margin: 0 16px 8px; font-size: 12px; color: var(--muted); }
  /* grouped cards */
  :root:root:root :is(#kioskList, #kioskRecent, #coachTodayList, #activityBody) { background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 .5px var(--hairline); }
  :root:root:root :is(#kioskList, #coachTodayList):empty { display: none; }
  /* a waiting card is one cell: photo, name, amount; then the payment line */
  :root:root:root .kioskCard { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 16px 12px; border-top: 0; }
  .kioskCard + .kioskCard::before { content: ""; position: absolute; top: 0; left: 68px; right: 0; height: .5px; background: var(--hairline); }
  :root:root:root .kioskCard > .kcTop { flex: 1 1 100%; gap: 12px; }
  :root:root:root .kcPhoto { width: 40px; height: 40px; }
  :root:root:root .kcPhoto.kcNone { font-size: 16px; }
  :root:root:root .kcName { font-size: calc(16px * var(--ts, 1)); font-weight: 500; letter-spacing: -.01em; }
  :root:root:root .kcPlan { font-size: calc(13px * var(--ts, 1)); color: var(--muted); }
  :root:root:root .kcDue b { font-size: calc(19px * var(--ts, 1)); font-weight: 600; }
  :root:root:root .kcDue span { font-size: 12px; font-weight: 400; }
  :root:root:root .kioskCard > .kcPay { flex: 1 1 auto; margin: 0; gap: 8px; flex-wrap: nowrap; }
  :root:root:root .kcSeg { padding: 2px; border-radius: 9px; background: rgba(118,118,128,.24); }
  :root:root:root .kcSeg button { min-height: 28px; padding: 0 10px; font-size: 13px; border-radius: 7px; }
  :root:root:root .kcPay input { min-height: 0; height: 32px; width: 72px; padding: 0 12px; font-size: 14px; border-radius: 9px; }
  :root:root:root .kioskCard > .kcActions { flex: none; margin: 0 0 0 auto; align-items: center; gap: 4px; }
  :root:root:root .kcActions button { min-height: 0; padding: 6px 12px; font-size: 15px; font-weight: 500; border-radius: 999px; background: none; }
  :root:root:root .kcActions .kcReject { background: none; color: var(--red); }
  :root:root:root .kcActions .kcEnqOpen { background: none; color: var(--accent); }
  :root:root:root .kcActions .kcConfirm { background: var(--accent); color: #fff; font-weight: 600; padding: 6px 16px; }
  :root:root:root .kioskCard > .kcNote, :root:root:root .kioskCard > .kcError, :root:root:root .kioskCard > .kcReplace, :root:root:root .kioskCard > .kcReceipt { flex: 1 1 100%; margin: 0 0 0 52px; font-size: 12px; }
  /* Recent: a small title between the groups, then plain rows */
  :root:root:root .kRecentHd { display: flex; align-items: center; gap: 8px; width: 100%; margin: 6px 0 6px; padding: 0 16px; border: 0; border-top: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
  .kRecentCnt { font-size: 12px; padding: 0 7px; background: var(--fill); color: var(--muted); }
  .kRecentSub { font-size: 13px; }
  :root:root:root .kRecentRow { position: relative; padding: 8px 16px; border-top: 0; min-height: 48px; gap: 12px; }
  .kRecentItem + .kRecentItem .kRecentRow::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: .5px; background: var(--hairline); }
  .kRecentTime { display: none; }
  :root:root:root .kRecentPhoto { width: 32px; height: 32px; }
  :root:root:root .kTag { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font-size: 13px; }
  .kTag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
  .kTag.ok { color: var(--green); } .kTag.wn { color: var(--orange); } .kTag.gr { color: var(--muted); background: none; }
  :root:root:root .kRestore { min-height: 0; padding: 4px 8px; border: 0; background: none; color: var(--accent); font-size: 15px; font-weight: 500; }
  .kRecentDetails { margin: 0 16px 10px 60px; background: var(--fill); }
  /* Coaching today */
  :root:root:root .coachRow { position: relative; padding: 10px 16px; border-top: 0; gap: 10px 12px; }
  .coachRow + .coachRow::before { content: ""; position: absolute; top: 0; left: 68px; right: 0; height: .5px; background: var(--hairline); }
  :root:root:root .ctFlag { margin-top: 3px; padding: 0; border-radius: 0; background: none; font-size: 12px; font-weight: 500; color: var(--orange); }
  .ctFlag::before { content: "● "; font-size: 9px; vertical-align: 1px; }
  :root:root:root .ctDismiss { background: none; border: 0; color: var(--accent); font-size: 15px; font-weight: 500; padding: 6px 8px; }
  :root:root:root .ctMark { padding: 6px 16px; font-size: 15px; font-weight: 600; border-radius: 999px; }
  /* Today's activity */
  .actHeadRow { position: relative; display: flex; align-items: center; margin: 0 0 6px; }
  :root:root:root .actHd { flex: 1; padding: 0 16px; }
  .actTitle { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
  .actSub { font-size: 13px; color: var(--muted); }
  :root:root:root .actInfo { flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; margin-right: 16px; border-radius: 50%; border: 0; background: rgba(120,120,128,.32); color: var(--text); font: 600 13px/1 var(--font); cursor: pointer; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  .actLegend { position: absolute; right: 8px; top: 32px; z-index: 30; width: min(320px, 92%); padding: 14px 16px; border-radius: 20px; font-size: 13px; background: rgba(58,58,60,.74); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); border: .5px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 40px rgba(0,0,0,.5); color: #fff; }
  .actLegend[hidden] { display: none; }
  :root[data-theme="light"] .actLegend { background: rgba(250,250,252,.78); color: #111; border-color: rgba(0,0,0,.1); }
  .actLegend b { display: block; font-size: 12px; font-weight: 600; opacity: .6; margin: 10px 0 4px; }
  .actLegend b:first-child { margin-top: 0; }
  .lgRow { display: flex; align-items: center; gap: 9px; margin: 5px 0; }
  .lgSq { width: 20px; height: 20px; border-radius: 6px; flex: none; }
  .lgSq.sale { background: #0a84ff; } .lgSq.payx { background: #30d158; } .lgSq.exp { background: #ff453a; }
  .lgAmt { font-weight: 600; min-width: 46px; } .lgAmt.neg { color: #ff453a; } .lgAmt.void { text-decoration: line-through; opacity: .6; }
  .ctFlagDot { color: var(--orange); min-width: 20px; text-align: center; }
  :root:root:root .actRow { position: relative; padding: 10px 16px; border-top: 0; gap: 12px; min-height: 52px; }
  .actItem + .actItem .actRow::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; height: .5px; background: var(--hairline); }
  .actTime { display: none; }
  :root:root:root .actIcon { width: 30px; height: 30px; border-radius: 8px; color: #fff; }
  .actIcon.sale { background: #0a84ff; } .actIcon.payment { background: #30d158; } .actIcon.expense { background: #ff453a; }
  .actAmt { font-size: 16px; font-weight: 500; color: var(--text); }
  .actAmt.neg { color: var(--red); }
  :root:root:root .actVoidRow { margin: -2px 16px 10px 58px; }
  #activityBody .kcNote, #kioskRecent .kcNote { padding: 8px 16px 12px; margin: 0; font-size: 12px; }
  /* the coaching card: 12 numbered circles like the paper card */
  .ccCard { padding: 4px 16px 16px; }
  .ccMeta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 8px 0 12px; }
  .ccDots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 6px; }
  .ccD { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  :root:root:root .ccC { width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--muted) 55%, transparent); background: none; color: var(--muted); font: 500 15px/1 var(--font); display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; box-shadow: none; }
  :root:root:root .ccC.on { background: #30d158; border-color: #30d158; color: #04230f; font-size: 19px; font-weight: 700; }
  :root:root:root .ccC.next { border-color: var(--accent); color: var(--accent); font-weight: 700; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); cursor: pointer; }
  :root:root:root .ccC.gap { border-style: dashed; border-color: #ff9f0a; color: #ff9f0a; }
  :root:root:root .ccC.next.gap { border-style: solid; border-color: #ff9f0a; color: #ff9f0a; box-shadow: 0 0 0 3px rgba(255,159,10,.28); }
  .ccDt { font-size: 10.5px; color: var(--muted); height: 12px; }
  .ccLeg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 12px; }
  .ccLeg span { display: inline-flex; align-items: center; gap: 6px; }
  .ccLeg i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-sizing: border-box; }
  .ccLeg .g { background: #30d158; } .ccLeg .n { border: 1.5px solid var(--accent); } .ccLeg .d { border: 1.5px dashed #ff9f0a; }
  .ccAct { margin-top: 10px; }
  :root:root:root .ctUndo, :root:root:root .coachingUndoBtn { background: none; border: 0; color: var(--red); font-size: 15px; font-weight: 500; padding: 4px 0; min-height: 0; cursor: pointer; }
  :root:root:root .ctToggle { background: none; border: 0; min-height: 0; padding: 6px; color: var(--muted); transition: transform .2s ease; }
  .coachItem.open .ctToggle { transform: rotate(180deg); }
  .coachItem + .coachItem { position: relative; }
  .coachItem + .coachItem::before { content: ""; position: absolute; top: 0; left: 68px; right: 0; height: .5px; background: var(--hairline); }
  .coachItem .coachRow::before { display: none; }
  .ctOpen { cursor: pointer; }
  /* in the Coaching packages list */
  :root:root:root .cpDots { display: inline-flex; align-items: center; gap: 3px; background: none; border: 0; padding: 4px 0; min-height: 0; color: var(--text); font: inherit; cursor: pointer; }
  .cpDots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--muted) 60%, transparent); display: inline-block; box-sizing: border-box; }
  .cpDots i.on { background: #30d158; border-color: #30d158; }
  .cpDots span { margin-left: 6px; font-variant-numeric: tabular-nums; font-weight: 600; }
  .cpCardRow td { background: color-mix(in srgb, var(--fill) 60%, transparent); }
  .cpCardRow .ccCard { max-width: 460px; }
  /* ===== front desk, organized: "Needs action" | "History"; one row template; WebKit-native touches ===== */
  .deskTitle { margin: 0 0 12px 4px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
  :root:root:root :is(#deskHistory, #activityPanel) { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 22px; max-width: none; border-radius: 0; }
  :root:root:root .deskWrap { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
  .deskWrap button, .deskWrap [role="button"] { touch-action: manipulation; -webkit-touch-callout: none; }
  .deskWrap input { accent-color: var(--accent); }
  @media (pointer: coarse) { .deskWrap :is(.kcActions button, .ctMark, .ctDismiss, .kRestore, .ctUndo, .ctToggle, .dhSeg button, .actInfo, .kcSeg button) { min-height: 44px; } .deskWrap .actInfo { min-width: 44px; } }
  /* History: one card, a Kiosk | Activity selector (a real segmented control, glass) */
  .dhBar { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
  .dhSeg { flex: 1; display: flex; padding: 2px; border-radius: 12px; background: rgba(118,118,128,.24); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  :root:root:root .dhSeg button { flex: 1; min-height: 32px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 600 13px/1.2 var(--font); cursor: pointer; box-shadow: none; }
  :root:root:root .dhSeg button[aria-selected="true"] { background: var(--seg-active, rgba(120,120,128,.55)); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
  .dhSeg span { font-weight: 400; opacity: .75; margin-left: 4px; }
  .dhSub { margin: 0 16px 8px; font-size: 12px; color: var(--muted); }
  #kioskRecent[hidden], #activityBody[hidden] { display: none !important; }
  :root:root:root .actInfo { margin-right: 0; }
  /* the legend is a native popover (WebKit/Safari 17+): glass, centered, tap outside to close */
  :root:root:root .actLegend { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(340px, 92vw); max-width: none; padding: 16px 18px; border-radius: 22px; z-index: 40; font-size: 13px; line-height: 1.4; color: var(--text); background: rgba(58,58,60,.78); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); border: .5px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 24px 60px rgba(0,0,0,.5); color: #fff; overflow: visible; }
  .actLegend::backdrop { background: rgba(0,0,0,.22); }
  :root:root:root[data-theme="light"] .actLegend { background: rgba(250,250,252,.84); color: #111; border-color: rgba(0,0,0,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 24px 60px rgba(0,0,0,.25); }
  /* one row template: 40px photo or icon | text | value | action */
  :root:root:root .kioskCard { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; align-items: center; padding: 12px 16px; }
  :root:root:root .kioskCard > .kcTop { display: contents; }
  .kioskCard > .kcTop > .kcPhoto { grid-column: 1; grid-row: 1; }
  .kioskCard > .kcTop > .kcWho { grid-column: 2; grid-row: 1; min-width: 0; }
  .kioskCard > .kcTop > .kcDue { grid-column: 3; grid-row: 1; }
  :root:root:root .kioskCard > .kcPay { grid-column: 2 / 4; grid-row: 2; margin: 0; flex-wrap: wrap; }
  :root:root:root .kioskCard > .kcNote { grid-column: 2 / 4; grid-row: 2; margin: 0; }
  :root:root:root .kioskCard > .kcReplace, :root:root:root .kioskCard > .kcReceipt { grid-column: 2 / 4; grid-row: 3; margin: 0; }
  :root:root:root .kioskCard > .kcError { grid-column: 2 / 4; grid-row: 4; margin: 0; }
  :root:root:root .kioskCard > .kcActions { grid-column: 2 / 4; grid-row: 5; justify-self: end; margin: 0; }
  :root:root:root .coachRow { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: center; }
  .coachRow > .kcPhoto { grid-column: 1; grid-row: 1; }
  .coachRow > .coachWho { grid-column: 2; grid-row: 1; flex: none; }
  .coachRow > .coachBtns { grid-column: 2; grid-row: 2; justify-self: end; margin-left: 0; }
  :root:root:root .actIcon { width: 36px; height: 36px; border-radius: 10px; }
  /* single column front desk: Waiting at the kiosk, then History */
  :root:root:root .deskCols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .deskTitle.small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin: 0 0 6px 16px; }
  /* the Coaching popup */
  :root:root:root #coachMarkBox { max-width: 560px; }
  .coachSubLine { margin: 0 0 6px 4px; font-size: 13px; color: var(--muted); }
  .coachEmpty { text-align: center; color: var(--muted); padding: 20px 0 8px; }
  .coachEmpty[hidden] { display: none; }
  :root:root:root #coachMarkBox #coachTodayList { background: none; box-shadow: none; border-radius: 0; }
  /* ===== master cards (macOS-style frosted panels): header with a count badge and a hairline, then rows on a clean 4-block grid ===== */
  :root:root:root :is(#kioskPanel, #deskHistory, #activityPanel) { container-type: inline-size; background: rgba(44,44,46,.72); -webkit-backdrop-filter: blur(25px) saturate(1.5); backdrop-filter: blur(25px) saturate(1.5); border: .5px solid rgba(255,255,255,.14); border-radius: 16px; box-shadow: 0 10px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.1); overflow: hidden; padding: 0; margin: 0 0 20px; }
  :root:root:root[data-theme="light"] :is(#kioskPanel, #deskHistory, #activityPanel) { background: rgba(255,255,255,.75); border-color: rgba(255,255,255,.65); box-shadow: 0 10px 34px rgba(31,38,135,.12), inset 0 1px 0 rgba(255,255,255,.8); }
  :root:root:root #kioskPanel > h2 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text); border-bottom: .5px solid var(--hairline); }
  :root:root:root #kioskPanel > h2 .sub { margin: 0; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, #007AFF 14%, transparent); color: #007AFF; }
  :root:root:root #kioskPanel #kioskList { background: none; box-shadow: none; border-radius: 0; }
  /* a card: [photo] [name + status] [controls] [due + actions], everything centered on the row */
  :root:root:root #kioskPanel .kioskCard { display: grid; grid-template-columns: 40px minmax(150px, 1fr) auto minmax(150px, auto); grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; padding: 14px 18px; }
  #kioskPanel .kioskCard + .kioskCard::before { left: 18px; right: 18px; }
  :root:root:root #kioskPanel .kioskCard > .kcTop { display: contents; }
  #kioskPanel .kcTop > .kcPhoto { grid-column: 1; grid-row: 1 / 3; }
  #kioskPanel .kcTop > .kcWho { grid-column: 2; grid-row: 1 / 3; }
  :root:root:root #kioskPanel .kioskCard > .kcPay { grid-column: 3; grid-row: 1 / 3; margin: 0; flex-wrap: nowrap; align-items: center; gap: 10px; }
  #kioskPanel .kcTop > .kcDue { grid-column: 4; grid-row: 1; justify-self: end; align-self: end; text-align: right; }
  :root:root:root #kioskPanel .kioskCard > .kcActions { grid-column: 4; grid-row: 2; justify-self: end; align-self: start; margin: 0; gap: 8px; }
  :root:root:root #kioskPanel .kioskCard > .kcNote { grid-column: 2 / 5; grid-row: 3; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
  :root:root:root #kioskPanel .kioskCard > .kcReplace, :root:root:root #kioskPanel .kioskCard > .kcReceipt { grid-column: 2 / 5; grid-row: 4; margin: 0; }
  :root:root:root #kioskPanel .kioskCard > .kcError { grid-column: 2 / 5; grid-row: 5; margin: 0; }
  /* controls: one segmented control, a borderless amount capsule */
  :root:root:root #kioskPanel .kcSeg { background: rgba(118,118,128,.18); padding: 2px; border-radius: 9px; }
  :root:root:root #kioskPanel .kcSeg button.on { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
  :root:root:root #kioskPanel .kcPay input { width: 92px; height: 32px; border: 0; border-radius: 999px; background: rgba(118,118,128,.14); text-align: center; font-weight: 600; box-shadow: none; }
  /* actions: a muted text button beside a solid Apple blue pill */
  :root:root:root #kioskPanel .kcActions .kcReject, :root:root:root #kioskPanel .kcActions .kcReject:hover { background: none; color: var(--muted); font-weight: 500; }
  :root:root:root #kioskPanel .kcActions .kcConfirm { background: #007AFF; color: #fff; font-weight: 600; padding: 7px 18px; }
  :root:root:root #kioskPanel .kcActions .kcEnqOpen { background: none; color: #007AFF; font-weight: 600; }
  /* the coaching enquiry: the package is an info badge in the middle, the actions sit bottom right */
  #kioskPanel .kcEnquiry > .kcTop > .kcDue { grid-column: 3; grid-row: 1 / 3; justify-self: start; align-self: center; text-align: left; padding: 8px 14px; border-radius: 12px; background: color-mix(in srgb, #007AFF 10%, transparent); }
  #kioskPanel .kcEnquiry > .kcTop > .kcDue span { color: var(--muted); }
  #kioskPanel .kcEnquiry > .kcTop > .kcDue b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
  :root:root:root #kioskPanel .kcEnquiry > .kcActions { grid-column: 4; grid-row: 1 / 3; align-self: end; justify-self: end; }
  /* narrow: stack into two rows */
  @container (max-width: 700px) {
    #kioskPanel .kioskCard { grid-template-columns: 40px minmax(0, 1fr) auto; }
    #kioskPanel .kcTop > .kcPhoto { grid-column: 1; grid-row: 1; } #kioskPanel .kcTop > .kcWho { grid-column: 2; grid-row: 1; }
    #kioskPanel .kcTop > .kcDue { grid-column: 3; grid-row: 1; align-self: center; }
    :root:root:root #kioskPanel .kioskCard > .kcPay { grid-column: 2 / 4; grid-row: 2; margin-top: 6px; }
    :root:root:root #kioskPanel .kioskCard > .kcActions { grid-column: 2 / 4; grid-row: 3; justify-self: end; }
    #kioskPanel .kcEnquiry > .kcTop > .kcDue { grid-column: 2 / 4; grid-row: 2; margin-top: 6px; }
    :root:root:root #kioskPanel .kcEnquiry > .kcActions { grid-column: 2 / 4; grid-row: 3; align-self: start; }
    :root:root:root #kioskPanel .kioskCard > .kcNote { grid-row: 4; }
  }
  /* History: the same master card */
  :root:root:root :is(#deskHistory, #activityPanel) .dhBar { padding: 12px 18px; margin: 0; border-bottom: .5px solid var(--hairline); gap: 12px; }
  .dhTitle { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
  :root:root:root #deskHistory .dhSeg { flex: 0 1 260px; margin-left: auto; }
  :root:root:root :is(#deskHistory, #activityPanel) .dhSub { margin: 10px 18px 6px; }
  :root:root:root :is(#deskHistory, #activityPanel) :is(#kioskRecent, #activityBody) { background: none; box-shadow: none; border-radius: 0; }

  /* matched to the owner's reference: plain count, bigger avatar, one-line Due, white amount field, enquiry as an inset sub-card */
  :root:root:root #kioskPanel > h2 .sub { padding: 0; background: none; color: var(--muted); font-size: 15px; font-weight: 500; margin-left: auto; }
  :root:root:root #kioskPanel .kioskCard { grid-template-columns: 56px minmax(150px, 1fr) auto minmax(150px, auto); padding: 16px 18px; }
  :root:root:root #kioskPanel .kcTop > .kcPhoto { width: 56px; height: 56px; }
  :root:root:root #kioskPanel .kcPhoto.kcNone { font-size: 22px; }
  :root:root:root #kioskPanel .kcName { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
  :root:root:root #kioskPanel .kcPlan { color: var(--muted); font-size: 14px; }
  #kioskPanel .kioskCard:not(.kcEnquiry) .kcDue { white-space: nowrap; font-size: 15px; }
  #kioskPanel .kioskCard:not(.kcEnquiry) .kcDue span { display: inline; color: var(--muted); font-weight: 500; }
  #kioskPanel .kioskCard:not(.kcEnquiry) .kcDue b { display: inline; font-size: 15px; font-weight: 700; }
  :root:root:root #kioskPanel .kcSeg button + button { box-shadow: -.5px 0 0 rgba(255,255,255,.14); }
  :root:root:root #kioskPanel .kcPay input { width: 104px; height: 34px; border-radius: 10px; background: #fff; color: #111; }
  :root:root:root #kioskPanel .kcPay input::placeholder { color: #8a8a8e; }
  :root:root:root #kioskPanel .kioskCard.kcEnquiry { margin: 6px 14px 12px; padding: 16px; border-radius: 18px; background: rgba(118,118,128,.14); }
  #kioskPanel .kioskCard.kcEnquiry + .kioskCard::before, #kioskPanel .kioskCard + .kioskCard.kcEnquiry::before { display: none; }
  #kioskPanel .kcEnquiry > .kcTop > .kcDue { justify-self: end; background: color-mix(in srgb, #007AFF 14%, transparent); border-radius: 999px; padding: 6px 14px; }
  #kioskPanel .kcEnquiry > .kcTop > .kcDue b { color: #007AFF; }
  :root:root:root #kioskPanel .kioskCard > .kcNote { grid-column: 2 / 4; grid-row: 2; margin: 0; max-width: 34ch; }
  :root:root:root #kioskPanel .kcEnquiry > .kcActions { grid-column: 4; grid-row: 2; align-self: end; }
  :root:root:root #kioskPanel .kcEnquiry > .kcTop > .kcWho { grid-row: 1; }
  #kioskPanel .kcEnquiry > .kcTop > .kcDue { grid-column: 4; grid-row: 1; align-self: start; }
  #kioskPanel .kcEnquiry > .kcTop > .kcDue { white-space: nowrap; }
  #kioskPanel .kcEnquiry > .kcTop > .kcDue span, #kioskPanel .kcEnquiry > .kcTop > .kcDue b { display: inline; }

  /* narrow / iPad widths: one clean stack  [photo | name | due]  /  controls  /  actions */
  @container (max-width: 900px) {
    :root:root:root #kioskPanel .kioskCard { grid-template-columns: 56px minmax(0, 1fr) auto; row-gap: 12px; }
    :root:root:root #kioskPanel .kioskCard > .kcTop > .kcPhoto { grid-column: 1; grid-row: 1; }
    :root:root:root #kioskPanel .kioskCard > .kcTop > .kcWho { grid-column: 2; grid-row: 1; }
    :root:root:root #kioskPanel .kioskCard > .kcTop > .kcDue { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; margin: 0; }
    :root:root:root #kioskPanel .kioskCard > .kcPay { grid-column: 1 / 4; grid-row: 2; flex-wrap: wrap; margin: 0; }
    :root:root:root #kioskPanel .kioskCard > .kcActions { grid-column: 1 / 4; grid-row: 3; justify-self: end; align-self: center; flex-wrap: nowrap; }
    :root:root:root #kioskPanel .kioskCard > .kcActions button { white-space: nowrap; }
    :root:root:root #kioskPanel .kioskCard > .kcNote { grid-column: 1 / 4; grid-row: 2; max-width: none; }
    :root:root:root #kioskPanel .kioskCard > .kcReplace, :root:root:root #kioskPanel .kioskCard > .kcReceipt, :root:root:root #kioskPanel .kioskCard > .kcError { grid-column: 1 / 4; grid-row: auto; }
    :root:root:root #kioskPanel .kcEnquiry > .kcActions { grid-row: 3; align-self: center; }
  }

  /* Apple wallpaper behind the whole app (public/app-bg.webp, local only like the kiosk's; without the file the gradient stays) */
  :root:root body.glass { background: linear-gradient(rgba(10,10,20,.38), rgba(10,10,20,.38)), url(/app-bg.webp) center / cover no-repeat fixed, linear-gradient(135deg, #1b2358 0%, #35246b 38%, #0b4a73 72%, #0a5a48 100%); }
  :root:root[data-theme="light"] body.glass { background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)), url(/app-bg.webp) center / cover no-repeat fixed, linear-gradient(135deg, #c9d2ff 0%, #e4d1ff 38%, #bfe6ff 72%, #c6f3df 100%); }

  /* ===== Waiting at the kiosk — compact queue: one row per person, one main action; details open below the row ===== */
  :root:root:root #kioskPanel > h2 { padding: 18px 20px 14px; border-bottom: 0; }
  :root:root:root #kioskPanel > h2 .sub { margin-left: auto; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 500; background: rgba(118,118,128,.14); color: var(--muted); }
  :root:root:root #kioskPanel #kioskList { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
  :root:root:root #kioskPanel .kioskCard, :root:root:root #kioskPanel .kioskCard.kcEnquiry { display: block; margin: 0; padding: 0; border-radius: 16px; background: rgba(255,255,255,.55); border: .5px solid rgba(255,255,255,.6); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
  :root:root[data-theme="dark"] #kioskPanel .kioskCard, :root:root:not([data-theme="light"]) #kioskPanel .kioskCard { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
  #kioskPanel .kioskCard + .kioskCard::before { display: none; }
  :root:root:root #kioskPanel .kioskCard > .kcTop { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
  :root:root:root #kioskPanel .kcTop > .kcPhoto { width: 46px; height: 46px; flex: none; }
  :root:root:root #kioskPanel .kcTop > .kcWho { flex: 1; min-width: 0; }
  :root:root:root #kioskPanel .kcName { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
  :root:root:root #kioskPanel .kcPlan { font-size: 13px; color: var(--muted); font-weight: 400; }
  :root:root:root #kioskPanel .kcTop > .kcDue, :root:root:root #kioskPanel .kcEnquiry > .kcTop > .kcDue { display: flex; flex-direction: column; align-items: flex-end; text-align: right; background: none; padding: 0; border-radius: 0; white-space: nowrap; }
  :root:root:root #kioskPanel .kcTop > .kcDue b { font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
  :root:root:root #kioskPanel .kcTop > .kcDue span { font-size: 12px; color: var(--muted); font-weight: 400; }
  :root:root:root #kioskPanel .kcToggle { flex: none; min-width: 96px; text-align: right; background: none; border: 0; box-shadow: none; color: #007AFF; font-size: 15px; font-weight: 500; padding: 8px 4px; cursor: pointer; white-space: nowrap; }
  :root:root:root #kioskPanel .kcToggle:hover { opacity: .7; }
  :root:root:root #kioskPanel .kcToggle:focus-visible { outline: 2px solid #007AFF; outline-offset: 2px; border-radius: 8px; }
  /* details: slide open (grid-rows trick) */
  :root:root:root #kioskPanel .kcMore { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
  :root:root:root #kioskPanel .kioskCard.open > .kcMore { grid-template-rows: 1fr; }
  :root:root:root #kioskPanel .kcMoreIn { overflow: hidden; min-height: 0; padding: 0 16px; opacity: 0; transition: opacity .2s ease, padding .28s ease; }
  :root:root:root #kioskPanel .kioskCard.open .kcMoreIn { padding: 4px 16px 16px; opacity: 1; }
  :root:root:root #kioskPanel .kcMoreIn h4 { margin: 4px 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
  :root:root:root #kioskPanel .kioskCard .kcPay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
  :root:root:root #kioskPanel .kioskCard > .kcMore .kcNote { margin: 0 0 12px; max-width: none; font-size: 13px; color: var(--muted); }
  :root:root:root #kioskPanel .kcPay :is(.kcAmount, .kcRef) { flex: 1 1 160px; width: auto; height: 38px; border-radius: 10px; border: .5px solid var(--hairline); background: #fff; color: #111; text-align: left; padding: 0 12px; font-weight: 500; }
  :root:root:root #kioskPanel .kcMore .kcActions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0; }
  :root:root:root #kioskPanel .kcMore .kcActions .kcConfirm { border-radius: 10px; padding: 9px 18px; background: #007AFF; color: #fff; font-weight: 600; }
  :root:root:root #kioskPanel .kcMore .kcActions .kcReject { color: var(--muted); }
  :root:root:root #kioskPanel .kcMore .kcActions button { white-space: nowrap; }
  :root:root:root #kioskPanel .kcMore :is(.kcError, .kcReplace, .kcReceipt) { margin: 0 0 12px; }
  @media (prefers-reduced-motion: reduce) { :root:root:root #kioskPanel :is(.kcMore, .kcMoreIn) { transition: none; } }
  @media (max-width: 520px) { :root:root:root #kioskPanel .kcTop { flex-wrap: wrap; } :root:root:root #kioskPanel .kcToggle { min-width: 0; } }
  /* a very subtle cool wallpaper, as in the target (the Apple art stays underneath, mostly veiled) */
  :root:root[data-theme="light"] body.glass { background: linear-gradient(rgba(240,246,255,.80), rgba(250,240,248,.80)), url(/app-bg.webp) center / cover no-repeat fixed, linear-gradient(135deg, #c9d2ff 0%, #e4d1ff 38%, #bfe6ff 72%, #c6f3df 100%); }

  /* ===== Quick actions: compact glass toolbar — icon | hairline | label + quiet total ===== */
  :root:root:root .quickRow:not([hidden]) { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 12px 0 16px; }
  :root:root:root .quickRow button { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0; min-height: 84px; padding: 0 16px 0 8px; border-radius: 22px; background: rgba(255,255,255,.42); border: .5px solid rgba(255,255,255,.7); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 6px 20px -10px rgba(40,60,120,.25), inset 0 1px 0 rgba(255,255,255,.8); color: var(--text); transition: background .18s ease, box-shadow .18s ease, transform .12s ease; }
  :root:root:root .quickRow button:hover { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.85); box-shadow: 0 8px 24px -10px rgba(40,60,120,.32), inset 0 1px 0 rgba(255,255,255,.9); }
  :root:root:root .quickRow button svg { width: 30px; height: 30px; padding: 0 16px; border-radius: 0; background: none; color: #5b6475; border-right: .5px solid rgba(60,60,67,.18); box-sizing: content-box; margin-right: 16px; height: 38px; }
  :root:root:root .quickRow button .qaText { gap: 3px; min-width: 0; }
  :root:root:root .quickRow button .qaText > span { font-size: calc(17px * var(--ts, 1)); font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
  :root:root:root .quickRow button .qaStat { font-size: calc(13.5px * var(--ts, 1)); font-weight: 400; opacity: 1; color: var(--muted); }
  :root:root:root .quickRow button .qaStat.qaWarn::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: #ff9f0a; vertical-align: 0; }
  :root:root:root .quickRow button.qaPrimary { background: rgba(0,122,255,.12); border-color: rgba(0,122,255,.28); color: #0a2a6b; box-shadow: 0 8px 24px -10px rgba(0,122,255,.45), inset 0 1px 0 rgba(255,255,255,.7); }
  :root:root:root .quickRow button.qaPrimary:hover { background: rgba(0,122,255,.18); }
  :root:root:root .quickRow button.qaPrimary svg { background: none; color: #007AFF; border-right-color: rgba(0,122,255,.25); }
  :root:root:root .quickRow button.qaPrimary .qaStat { color: #3d7be0; }
  :root:root:root .quickRow button:focus-visible { outline: 2px solid #007AFF; outline-offset: 2px; }
  :root:root[data-theme="dark"] .quickRow button, :root:root:not([data-theme="light"]) .quickRow button { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
  :root:root[data-theme="dark"] .quickRow button.qaPrimary, :root:root:not([data-theme="light"]) .quickRow button.qaPrimary { background: rgba(10,132,255,.28); color: #fff; }
  :root:root[data-theme="dark"] .quickRow button svg, :root:root:not([data-theme="light"]) .quickRow button svg { color: #c7cbd6; }
  :root:root[data-theme="dark"] .quickRow button.qaPrimary svg, :root:root:not([data-theme="light"]) .quickRow button.qaPrimary svg { color: #64a8ff; }
  @media (max-width: 700px) { :root:root:root .quickRow:not([hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root:root:root .quickRow button { min-height: 76px; padding-right: 10px; } :root:root:root .quickRow button svg { padding: 0 12px; margin-right: 12px; } :root:root:root .quickRow button .qaText > span { font-size: 15px; white-space: normal; } }

  /* quick actions on a narrower area: every tile the same height, a slimmer icon column so the numbers fit on one line, labels never cut */
  :root:root:root .quickRow:not([hidden]) { grid-auto-rows: 1fr; }
  :root:root:root .quickRow button { min-height: 84px; padding: 8px 12px 8px 6px; }
  :root:root:root .quickRow button svg { padding: 0 12px; margin-right: 12px; }
  :root:root:root .quickRow button .qaText { align-content: center; min-width: 0; }
  :root:root:root .quickRow button .qaText > span { font-size: calc(16px * var(--ts, 1)); line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
  :root:root:root .quickRow button .qaStat { font-size: calc(12.5px * var(--ts, 1)); line-height: 1.25; }

  /* ===== Waiting at the kiosk: it asks for attention ===== */
  :root:root:root #kioskPanel .kioskCard { position: relative; transition: border-color .5s, background .5s, box-shadow .5s; }
  /* a new customer: drops in, a ring pulses around the card three times, a red New tag throbs */
  :root:root:root #kioskPanel .kioskCard.kcDrop { animation: kcDrop .7s cubic-bezier(.2,1.4,.3,1) both; }
  @keyframes kcDrop { from { opacity: 0; transform: translateY(-30px) scale(.96); } }
  #kioskPanel .kioskCard.kcFresh::after { content: ""; position: absolute; inset: -2px; border-radius: 18px; border: 2px solid #007AFF; opacity: 0; pointer-events: none; animation: kcGlow 1.8s ease-out 3; }
  @keyframes kcGlow { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.03, 1.2); } }
  .kcNewTag { position: absolute; left: 10px; top: 6px; z-index: 3; box-shadow: 0 0 0 2px #fff; background: #ff3b30; color: #fff; font-size: 10px; font-weight: 600; border-radius: 999px; padding: 2px 8px; animation: kcTag 1s ease-in-out infinite; pointer-events: none; }
  @keyframes kcTag { 50% { transform: scale(1.12); } }
  :root:root:root #kioskPanel > h2 .sub.bump { animation: kcBump .5s cubic-bezier(.3,1.7,.4,1); background: #007AFF; color: #fff; }
  @keyframes kcBump { 40% { transform: scale(1.35); } }
  /* the longer they wait, the louder: calm, amber from 3 minutes, red from 10 */
  .kcWait { font-variant-numeric: tabular-nums; }
  :root:root:root #kioskPanel .kioskCard.kcL1 { border-color: rgba(255,159,10,.55); background: rgba(255,159,10,.09); box-shadow: 0 0 0 4px rgba(255,159,10,.1); }
  #kioskPanel .kioskCard.kcL1 .kcWait { color: #c77700; }
  :root:root:root #kioskPanel .kioskCard.kcL1 .kcToggle { color: #a35f00; }
  :root:root:root #kioskPanel .kioskCard.kcL2 { border-color: rgba(255,59,48,.6); background: rgba(255,59,48,.08); animation: kcSoft 1.8s ease-in-out infinite; }
  @keyframes kcSoft { 50% { box-shadow: 0 0 0 7px rgba(255,59,48,.14); } }
  #kioskPanel .kioskCard.kcL2 .kcWait { color: #d70015; }
  :root:root:root #kioskPanel .kioskCard.kcL2 .kcToggle { background: #ff3b30; color: #fff; border-radius: 10px; padding: 8px 14px; animation: kcNudge 3s ease-in-out infinite; }
  @keyframes kcNudge { 0%, 80%, 100% { transform: none; } 84% { transform: translateX(-4px); } 88% { transform: translateX(4px); } 92% { transform: translateX(-3px); } 96% { transform: translateX(2px); } }
  :root:root:root #kioskPanel .kioskCard.kcL2.open { animation: none; }
  /* the sound button in the header */
  .kSound { margin-left: 8px; border: 0; background: rgba(255,159,10,.18); color: #a35f00; border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
  .kSound.on { background: rgba(118,118,128,.14); color: var(--muted); }
  @media (prefers-reduced-motion: reduce) { :root:root:root #kioskPanel .kioskCard, #kioskPanel .kioskCard::after, .kcNewTag, #kioskPanel > h2 .sub.bump, :root:root:root #kioskPanel .kioskCard .kcToggle { animation: none !important; } }

  /* the whole top row of a waiting card opens it, not only the Review / View enquiry word */
  :root:root:root #kioskPanel .kioskCard > .kcTop { cursor: pointer; border-radius: 16px; transition: background .2s; -webkit-tap-highlight-color: transparent; }
  :root:root:root #kioskPanel .kioskCard > .kcTop:hover { background: rgba(0,122,255,.05); }
  :root:root:root #kioskPanel .kioskCard > .kcTop:active { background: rgba(0,122,255,.1); }
  :root:root:root #kioskPanel .kioskCard > .kcTop:focus-visible { outline: 2px solid #007AFF; outline-offset: -2px; }

  /* waiting card: the front desk picks the gender (optional) */
  :root:root:root .kcGender { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 2px 0 12px; }
  :root:root:root .kcGender > span { font-size: 13px; color: var(--muted); }

  /* GCash reference needed: amber, then red with a blinking clock after 5 minutes */
  :root:root:root #gcashPanel .gpItem { border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; background: rgba(255,159,10,.16); border: 1px solid rgba(255,159,10,.45); color: var(--text); }
  :root:root:root #gcashPanel .gpItem.red { background: rgba(255,69,58,.16); border-color: rgba(255,69,58,.55); }
  :root:root:root #gcashPanel .gpRow { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: calc(16px * var(--ts, 1)); }
  :root:root:root #gcashPanel .gpIc { display: inline-flex; color: #ff9f0a; }
  :root:root:root #gcashPanel .gpItem.red .gpIc { color: #ff453a; animation: gpBlink 1s ease-in-out infinite; }
  @keyframes gpBlink { 50% { opacity: .2; } }
  :root:root:root #gcashPanel .gpTm { margin-left: auto; font-variant-numeric: tabular-nums; }
  :root:root:root #gcashPanel .gpSub { font-size: 13px; color: var(--muted); margin: 2px 0 8px 30px; }
  :root:root:root #gcashPanel .gpItem.red .gpOver { color: #ff453a; font-weight: 600; }
  :root:root:root #gcashPanel .gpForm { display: flex; gap: 8px; flex-wrap: wrap; margin-left: 30px; }
  :root:root:root #gcashPanel .gpRef { flex: 1 1 140px; min-height: 40px; }
  :root:root:root #gcashPanel .gpForm button { min-height: 40px; padding: 0 14px; border-radius: 12px; }
  :root:root:root #gcashPanel .gpErr { margin: 6px 0 0 30px; color: #ff453a; font-size: 13px; }
  :root:root:root #gcashPanel .gpLock { margin-left: 30px; font-size: 13px; color: var(--muted); }
  :root:root:root .kcSeen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; cursor: pointer; }
  :root:root:root .kcSeen small { flex-basis: 100%; margin-left: 26px; font-size: 12px; color: var(--muted); }
  :root:root:root .kcSeen[hidden] { display: none; }

  /* coaches settings */
  :root:root:root .retiredRow { opacity: .6; }
  :root:root:root .coachState { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--fill); }
  :root:root:root .coachState.active { background: rgba(48,209,88,.18); color: #30d158; }
  :root:root:root .coachState.leave { background: rgba(255,159,10,.18); color: #ff9f0a; }
  :root:root:root .coachRulesGrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  :root:root:root .toggleRow { display: flex; gap: 10px; align-items: flex-start; grid-column: 1 / -1; font-size: 14px; }
  :root:root:root .toggleRow input { margin-top: 4px; width: 18px; height: 18px; }
  :root:root:root .toggleRow small { display: block; color: var(--muted); font-size: 12px; }
  :root:root:root .logRow s { color: var(--muted); }
  :root:root:root .coachDays { display: flex; gap: 6px; }
  :root:root:root .coachDays button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border, rgba(255,255,255,.2)); background: transparent; color: inherit; transition: background .2s, transform .2s; }
  :root:root:root .coachDays button.on { background: #0a84ff; border-color: #0a84ff; color: #fff; }
  :root:root:root .coachDays button:active { transform: scale(.9); }
  :root:root:root .twoCol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  :root:root:root .rateTable { display: grid; gap: 8px; }
  :root:root:root .rateRow { display: grid; grid-template-columns: 1.3fr 76px; gap: 4px 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(128,128,128,.2); }
  :root:root:root .rateRow:first-child { border-top: 0; }
  :root:root:root .rateName small, :root:root:root .rateEx { display: block; color: var(--muted); font-size: 12px; }
  :root:root:root .rateEx { grid-column: 1 / -1; }
  :root:root:root .rateFrom { margin-top: 10px; padding: 10px; border-radius: 12px; background: rgba(10,132,255,.12); animation: coachRise .35s ease both; }
  :root:root:root .rateHist div { font-size: 13px; padding: 4px 0; border-top: 1px solid rgba(128,128,128,.2); }
  :root:root:root .rateHist small { color: var(--muted); }
  @keyframes coachRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  :root:root:root .coachPick { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
  :root:root:root .coachPickHint { color: var(--muted); text-align: center; padding: 18px 0; font-size: 13px; }
  :root:root:root .coachPickRow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(128,128,128,.25); background: transparent; color: inherit; text-align: left; cursor: pointer; animation: coachRise .3s ease both; transition: transform .2s, background .2s; }
  :root:root:root .coachPickRow:hover:not(.dis):not(.chosen) { background: rgba(128,128,128,.12); transform: translateX(3px); }
  :root:root:root .coachPickRow.dis { opacity: .5; cursor: not-allowed; }
  :root:root:root .coachPickRow img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; }
  :root:root:root .coachPickRow.chosen { background: rgba(10,132,255,.14); border-color: rgba(10,132,255,.4); margin-bottom: 10px; }
  :root:root:root .coachPickRow .rowSub, :root:root:root .coachPickRow .rowTitle { overflow-wrap: anywhere; }
  :root:root:root .startEnd { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--accent-text, #5eaaff); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
  :root:root:root .startEnd[hidden] { display: none; }
}

/* member popup: coaching history */
.mchChain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; font-size: 13px; }
.mchLbl { color: var(--muted); font-size: 12px; margin-right: 4px; }
.mchChip { padding: 3px 11px; border-radius: 999px; background: rgba(120,120,128,.2); font-size: 12.5px; }
.mchChip.cur { background: rgba(52,199,89,.2); color: #34c759; }
.mchArrow { color: var(--muted); }
.mchTl { position: relative; padding-left: 22px; }
.mchTl::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: rgba(120,120,128,.35); }
.mchEv { position: relative; margin-bottom: 12px; font-size: 13px; }
.mchEv::before { content: ''; position: absolute; left: -21px; top: 4px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(120,120,128,.7); background: var(--card); }
.mchEv.now::before { background: #34c759; border-color: #34c759; }
.mchPk { background: rgba(120,120,128,.12); border-radius: 12px; padding: 8px 12px; margin-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* Today's activity: the card in the side panel (on a narrow screen it sits right under the quick actions); a small Void on lines you may void */
.actVoidMini { flex: none; margin-left: 8px; padding: 4px 11px; min-height: 0; border-radius: 999px; border: .5px solid color-mix(in srgb, var(--red) 55%, transparent); background: none; color: var(--red); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
/* Today's activity sits between the quick actions / waiting lists and the live feed (it is placed there in the page); a long list scrolls inside the card so the live feed is not pushed far down.
   The side-panel version is in the git history (commit f86ad64). */
:root #activityPanel #activityBody { max-height: 330px; overflow-y: auto; scrollbar-width: thin; }


/* ===== Front desk dashboard, compact: quick actions, number chips, then Waiting (Kiosk | GCash) beside Today's activity, kiosk history, and the live feed last ===== */
/* order on narrower screens (the page is a flex column there) */
:root:root .quickRow { order: -4; } :root:root #main-content { order: -3; } :root:root #tsPanel { order: -2; } :root:root #histBar { order: -2; } :root:root .deskLanes { order: -1; }
/* the four numbers become small chips */
:root:root:root #main-content { margin: 0 0 12px; }
:root:root:root #tiles .kpiRow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
:root:root:root #tiles .kpiCard { flex-direction: row; align-items: baseline; gap: 8px; padding: 7px 14px; border-radius: 999px; min-width: 0; flex: 0 1 auto; }
:root:root:root #tiles .kpiCard .kpiLabel { font-size: calc(12px * var(--ts, 1)); }
:root:root:root #tiles .kpiCard .kpiBig { font-size: calc(15px * var(--ts, 1)); font-weight: 700; letter-spacing: 0; line-height: 1.2; }
:root:root:root #tiles .kpiCard .kpiBig small { font-size: calc(12px * var(--ts, 1)); }
:root:root:root #tiles .kpiCard .kpiSub { display: none; }
/* the two lanes */
:root:root:root .deskLanes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 14px; align-items: start; }
@media (min-width: 1100px) { :root:root:root .deskLanes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
:root:root:root .deskLanes > .panel { margin: 0; max-width: none; }
/* Waiting card */
:root:root:root .waitCard { padding: 0; overflow: hidden; }
.wcHead { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 2px; }
.wcHead h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.wcSub { margin-left: auto; font-size: 12px; color: var(--muted); }
.wcTabs { display: inline-flex; margin: 8px 18px 8px; padding: 2px; border-radius: 12px; background: rgba(118,118,128,.24); }
.wcTabs button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; padding: 6px 16px; border-radius: 10px; cursor: pointer; }
.wcTabs button[aria-selected="true"] { background: var(--seg-active, rgba(120,120,128,.55)); color: var(--text); }
.wcTabs em { display: inline-block; font-style: normal; font-size: 11px; font-weight: 600; background: #ff3b30; color: #fff; border-radius: 999px; padding: 0 6px; margin-left: 6px; min-width: 18px; text-align: center; }
.wcTabs em[hidden] { display: none; }
.wcTabs em.pulse { animation: wcPulse .9s ease 2; }
@keyframes wcPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,59,48,.6); } 50% { transform: scale(1.3); box-shadow: 0 0 0 7px rgba(255,59,48,0); } 100% { transform: scale(1); } }
.wcBody { max-height: 340px; overflow-y: auto; padding: 0 10px 10px; scrollbar-width: thin; }
:root:root:root #waitCard :is(#kioskPanel, #gcashPanel) { display: block; background: none; border: 0; box-shadow: none; padding: 0; margin: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
:root:root:root #waitCard :is(#kioskPanel, #gcashPanel)[hidden] { display: block; }
:root:root:root #waitCard[data-w="k"] #gcashPanel, :root:root:root #waitCard[data-w="g"] #kioskPanel { display: none; }
:root:root:root #waitCard #gcashPanel > h2 { display: none; }
:root:root:root #waitCard #kioskPanel > h2 { margin: 0; padding: 0 8px 4px; font-size: 0; min-height: 0; }
:root:root:root #waitCard #kioskPanel > h2 > :not(#kioskSoundBtn) { display: none; }
:root:root:root #waitCard #kioskSoundBtn { font-size: 12px; margin: 0; }
#kioskList:empty::after, #gcashList:empty::after { display: block; padding: 22px 12px; text-align: center; color: var(--muted); font-size: 13px; }
#kioskList:empty::after { content: "Nobody waiting at the kiosk."; } #gcashList:empty::after { content: "All GCash references are in."; }
/* compact rows */
:root:root:root #waitCard .kioskCard { padding: 6px 8px 8px; gap: 4px 10px; }
:root:root:root #waitCard .kioskCard + .kioskCard::before { left: 52px; }
:root:root:root #waitCard .kcPhoto { width: 34px; height: 34px; font-size: 15px; }
:root:root:root #waitCard .kcName { font-size: calc(14px * var(--ts, 1)); }
:root:root:root #waitCard .kcPlan { font-size: calc(12px * var(--ts, 1)); }
:root:root:root #waitCard .kcDue b { font-size: calc(14px * var(--ts, 1)); }
:root:root:root #waitCard .kcDue span { display: none; }
:root:root:root #waitCard #gcashPanel .gpItem { padding: 8px 10px; margin-bottom: 6px; border-radius: 12px; }
:root:root:root #waitCard #gcashPanel .gpRow { font-size: calc(14px * var(--ts, 1)); }
:root:root:root #waitCard #gcashPanel .gpSub { font-size: calc(11.5px * var(--ts, 1)); margin: 2px 0 6px; }
/* Today's activity beside it: the same height */
:root:root:root #activityPanel #activityBody { max-height: 340px; }
/* Live feed: last on the page, can be folded */
.feedFold { margin-left: 8px; border: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(118,118,128,.24); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; vertical-align: middle; transition: transform .25s; padding: 0; }
#galleryToolbarWrap .feedTitle { cursor: pointer; }
#liveMain.feedFolded .feedFold { transform: rotate(-90deg); }
#liveMain.feedFolded :is(#recentPanel, #feed, #galleryPagination, #feedViewTabs, #selectModeBtn) { display: none !important; }
:root:root:root #tiles .kpiCard .liveHeroNum { font-size: calc(15px * var(--ts, 1)); font-weight: 700; letter-spacing: 0; line-height: 1.2; }

/* waiting for a photo from the company phone */
.camSheet .phWait { margin: 4px 0 14px; font-size: 14px; color: var(--muted); text-align: center; }
.camSheet .phSpin { width: 34px; height: 34px; margin: 0 auto 18px; border-radius: 50%; border: 3px solid rgba(118,118,128,.35); border-top-color: var(--accent); animation: phSpin 1s linear infinite; }
@keyframes phSpin { to { transform: rotate(360deg); } }

/* ===== Company phone pill (top bar) ===== */
#phonePill { flex: none; display: inline-flex; align-items: center; gap: 7px; margin: 0 6px; padding: 5px 11px 5px 6px; border-radius: 999px; border: .5px solid var(--hairline, rgba(255,255,255,.14)); background: var(--fill, rgba(120,120,128,.2)); color: var(--text); font: inherit; font-size: calc(12px * var(--ts, 1)); cursor: pointer; transition: transform .2s, background .3s; white-space: nowrap; }
#phonePill[hidden] { display: none; }
#phonePill:hover { transform: translateY(-1px); }
#phonePill .ppOrb { position: relative; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; background: var(--oc, #34c759); }
#phonePill .ppOrb::before, #phonePill .ppOrb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--oc, #34c759); opacity: .55; animation: ppRipple 2.2s ease-out infinite; }
#phonePill .ppOrb::after { animation-delay: 1.1s; }
@keyframes ppRipple { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.1); opacity: 0; } }
#phonePill.s-ok { --oc: #34c759; } #phonePill.s-low, #phonePill.s-slow { --oc: #ff9f0a; } #phonePill.s-off { --oc: #ff453a; } #phonePill.s-none { --oc: #8e8e93; }
#phonePill.s-off, #phonePill.s-none { } #phonePill.s-off .ppOrb::before, #phonePill.s-off .ppOrb::after, #phonePill.s-none .ppOrb::before, #phonePill.s-none .ppOrb::after { animation: none; opacity: 0; }
#phonePill.s-off { background: color-mix(in srgb, #ff453a 18%, transparent); border-color: color-mix(in srgb, #ff453a 50%, transparent); }
#phonePill.s-off .ppOrb { animation: ppBlink 1.2s ease-in-out infinite; } @keyframes ppBlink { 50% { opacity: .45; } }
#phonePill .ppLbl { font-weight: 500; }
.ppBat { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: calc(11px * var(--ts, 1)); font-variant-numeric: tabular-nums; }
.ppBat b { display: inline-block; width: 18px; height: 9px; border: 1px solid currentColor; border-radius: 3px; position: relative; padding: 1px; box-sizing: border-box; }
.ppBat b i { display: block; height: 100%; border-radius: 1px; background: currentColor; }
.ppBat b::after { content: ""; position: absolute; right: -3px; top: 2px; width: 2px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0; }
.ppBat.low { color: #ff9f0a; }
#phonePop { position: fixed; z-index: 300; width: 300px; max-width: calc(100vw - 20px); padding: 14px; border-radius: 20px; background: #1c1c1e; color: var(--text); border: .5px solid var(--hairline, rgba(255,255,255,.14)); box-shadow: 0 16px 44px rgba(0,0,0,.45); animation: ppPop .22s ease; transform-origin: top right; }
#phonePop[hidden] { display: none; }
@keyframes ppPop { from { opacity: 0; transform: scale(.93) translateY(-6px); } to { opacity: 1; transform: none; } }
.ppHead { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .ppHead b { font-size: 15px; font-weight: 600; } .ppSub { font-size: 12.5px; }
.ppPhone { width: 30px; height: 46px; border-radius: 9px; border: 2px solid var(--text); position: relative; flex: none; }
.ppPhone::after { content: ""; position: absolute; inset: 4px 3px; border-radius: 4px; background: var(--cl); opacity: .85; }
.ppRow { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: .5px solid var(--hairline, rgba(255,255,255,.12)); font-size: 13px; } .ppRow span:first-child { color: var(--muted); }
.ppAct { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.ppAct button { flex: 1; border: 0; border-radius: 999px; padding: 8px 12px; background: var(--accent); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .ppAct button[disabled] { opacity: .45; cursor: default; }
.ppLink { color: var(--accent-text, var(--accent)); font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.ppMsg { margin-top: 8px; font-size: 12.5px; color: var(--muted); min-height: 1.2em; }
@media (max-width: 700px) { #phonePill .ppLbl { display: none; } }
:root[data-theme="light"] #phonePop { background: #fff; box-shadow: 0 16px 44px rgba(0,0,0,.18); }

/* number chips: no space above, and they stretch to fill the row */
:root:root:root #main-content { padding: 0; margin: 0 0 12px; }
:root:root:root .quickRow { margin-bottom: 10px; }
:root:root:root #tiles .kpiRow { flex-wrap: wrap; }
:root:root:root #tiles .kpiCard { flex: 1 1 200px; justify-content: center; }

/* Waiting and Today's activity: the same height side by side, tall enough for about five waiting at the kiosk; the sound button sits beside the title */
.deskLanes { --laneH: 600px; }
@media (min-width: 1100px) {
  :root:root:root .deskLanes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: var(--laneH); align-items: stretch; }
  :root:root:root .deskLanes > .panel { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
  :root:root:root .deskLanes .wcBody, :root:root:root #activityPanel #activityBody { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; }
}
:root:root:root .wcBody, :root:root:root #activityPanel #activityBody { max-height: 460px; }
:root:root:root .wcHead { align-items: center; }
:root:root:root .wcHead #kioskSoundBtn { margin: 0; padding: 3px 10px; font-size: 12px; }
:root:root:root #waitCard #kioskPanel > h2 { display: none; }
:root:root:root #waitCard .kcWho { min-width: 0; flex: 1 1 auto; }
:root:root:root #waitCard .kcPlan { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root:root:root #waitCard .kcName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* GCash receipt: where to take it from, and the receipt big with the reference field under it */
:root:root:root .srcMenu { position: absolute; z-index: 9000; width: 260px; padding: 6px; border-radius: 16px; background: var(--card-raised, #fff); border: 1px solid var(--card-border); box-shadow: 0 12px 32px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 2px; }
:root:root:root .srcMenu button { text-align: left; min-height: 44px; padding: 0 14px; border: 0; background: transparent; border-radius: 10px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; color: var(--text, inherit); }
:root:root:root .srcMenu button:hover:not(:disabled) { background: var(--fill-ghost-hover, rgba(127,127,127,.15)); }
:root:root:root .srcMenu button:disabled { opacity: .45; }
:root:root:root .srcMenu small { font-size: 12px; color: var(--muted); }
:root:root:root .gpForm .gpView { background: var(--bg-accent, #e6f1fb); color: var(--text-accent, #185fa5); border-radius: 999px; }
:root:root:root .rcView { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
:root:root:root .rcBox { width: min(760px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--card-raised, #fff); border: 1px solid var(--card-border); }
:root:root:root .rcHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
:root:root:root .rcZoom button { width: 36px; height: 36px; border-radius: 10px; margin-left: 6px; font-size: 18px; }
:root:root:root .rcPhoto { overflow: auto; border-radius: 12px; background: #000; min-height: 160px; max-height: 58vh; text-align: center; }
:root:root:root .rcPhoto img { width: 100%; height: auto; display: inline-block; vertical-align: top; }
:root:root:root .rcForm { display: flex; gap: 8px; }
:root:root:root .rcForm input { flex: 1; min-height: 46px; font-size: 18px; padding: 0 14px; border-radius: 12px; }
:root:root:root .rcForm button { min-height: 46px; padding: 0 22px; border-radius: 12px; }
:root:root:root .rcBtns { display: flex; justify-content: space-between; }
:root:root:root .rcBtns button { min-height: 40px; padding: 0 16px; border-radius: 12px; }

/* the "not on the turnstile yet" list: the name opens the member, the chip says what is happening, Retry / Resolve acts */
:root:root:root .tsRow { cursor: default; }
:root:root:root .tsRow .tsOpen { flex: 1; min-width: 0; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; box-shadow: none; transform: none; cursor: pointer; }
:root:root:root .tsRow .tsName, :root:root:root .tsRow .tsState { display: block; }
:root:root:root .tsChip { flex: none; font-size: calc(12px * var(--ts, 1)); padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--orange, #ff9f0a) 18%, transparent); color: var(--orange, #c77700); white-space: nowrap; }
:root:root:root .tsChip.bad { background: color-mix(in srgb, var(--red, #ff453a) 16%, transparent); color: var(--red, #d70015); }
:root:root:root .tsAct { flex: none; width: auto; min-height: 0; margin: 0 0 0 auto; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--accent, #0a84ff); font: inherit; font-weight: 600; box-shadow: none; transform: none; cursor: pointer; }
:root:root:root h2 .tsAct { margin-left: 8px; font-size: calc(14px * var(--ts, 1)); }
:root:root:root .tsAct:disabled { opacity: .6; cursor: default; }

/* ---- Quick actions, iOS 26 look (owner-approved "After"): the four tiles on the Live dashboard and the same jobs in the sidebar.
   No divider line, no glow, the icon sits in a soft rounded square, the main action is a solid blue with readable text. ---- */
:root:root:root:root .quickRow button { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 76px; padding: 10px 14px; border-radius: 24px; border: .5px solid rgba(60,60,67,.18); background: rgba(255,255,255,.66); color: var(--text); box-shadow: none; transition: transform .12s ease, background .15s ease; }
:root:root:root:root .quickRow button:hover { border-color: rgba(60,60,67,.28); box-shadow: none; background: rgba(255,255,255,.8); }
:root:root:root:root .quickRow button:active { transform: scale(.98); }
:root:root:root:root .quickRow button svg { flex: none; box-sizing: content-box; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 9px; border: 0; border-radius: 12px; background: rgba(120,120,128,.14); color: var(--qa, var(--accent)); }
:root:root:root:root .quickRow button .qaStat { color: var(--muted); }
:root:root:root:root .quickRow button.qaPrimary { background: var(--accent); border-color: rgba(255,255,255,.3); color: #fff; box-shadow: none; }
:root:root:root:root .quickRow button.qaPrimary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
:root:root:root:root .quickRow button.qaPrimary svg { background: rgba(255,255,255,.22); color: #fff; }
:root:root:root:root .quickRow button.qaPrimary .qaStat { color: rgba(255,255,255,.8); }
:root:root[data-theme="dark"] .quickRow button:not(.qaPrimary), :root:root:not([data-theme="light"]) .quickRow button:not(.qaPrimary) { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: var(--text); }
:root:root[data-theme="dark"] .quickRow button:not(.qaPrimary):hover, :root:root:not([data-theme="light"]) .quickRow button:not(.qaPrimary):hover { background: rgba(255,255,255,.11); }
:root:root[data-theme="dark"] .quickRow button:not(.qaPrimary) svg, :root:root:not([data-theme="light"]) .quickRow button:not(.qaPrimary) svg { background: rgba(255,255,255,.1); }
:root:root[data-theme="dark"] .quickRow button.qaPrimary, :root:root:not([data-theme="light"]) .quickRow button.qaPrimary { background: var(--accent); border-color: rgba(255,255,255,.25); }
:root:root[data-theme="dark"] .quickRow button.qaPrimary:hover, :root:root:not([data-theme="light"]) .quickRow button.qaPrimary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
@media (prefers-reduced-motion: reduce) { :root:root:root:root .quickRow button { transition: none; } :root:root:root:root .quickRow button:active { transform: none; } }
/* the same four jobs in the sidebar list: the same soft square behind the icon */
:root:root .navItem.navQa .navIcon { width: 30px; height: 30px; border-radius: 9px; background: rgba(120,120,128,.16); }
:root:root .navItem.navQa .navSvg { width: 18px; height: 18px; }
:root:root .navItem.navQa { gap: 10px; padding-top: 5px; padding-bottom: 5px; }