/*
 * AYCANE Business: the portal's redesign (2026-09-28), from the Claude Design
 * project's "AYCANE Business v2" and "AYCANE Business Console v2" files.
 *
 * Its own stylesheet, loaded by every page through partials/biz-head (the
 * first portal's stylesheets went with its last pages on 2026-10-07). The
 * design's values are kept as they are drawn: the system face, warm greys, ink
 * for actions and saffron only in the mark.
 */

:root {
  --bz-bg: #F7F6F3;
  --bz-card: #FFFFFF;
  --bz-ink: #17140F;
  --bz-ink-hover: #2E2A23;
  --bz-muted: #5F5A52;
  --bz-faint: #8F887C;
  --bz-line: #E4E1DA;
  --bz-line-soft: #EEEBE5;
  --bz-field: #D6D2C9;
  --bz-sunken: #EDEAE4;
  --bz-tint: #F3F1EC;
  --bz-wash: #FAF9F7;
  --bz-saffron: #FFC43D;
  --bz-ok: #1F7A55;
  --bz-ok-bg: #E3F1EA;
  --bz-ok-fg: #175E41;
  --bz-warn-bg: #FFF3D1;
  --bz-warn-fg: #6B4A00;
  --bz-err: #B42318;
  --bz-err-bg: #FDECEA;
  --bz-off: #CFCAC0;
  --bz-ring: #C9C4BA;
  --bz-focus: 0 0 0 3px rgba(23, 20, 15, 0.08);
  --bz-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html.bz, html.bz body {
  margin: 0;
  background: var(--bz-bg);
  color: var(--bz-ink);
  font-family: var(--bz-font);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
html.bz *, html.bz *::before, html.bz *::after { box-sizing: border-box; }
/* The resets carry no weight (:where), so every component rule below wins over them. */
:where(html.bz) :where(button, input, textarea, select) { font: inherit; color: inherit; }
:where(html.bz) :where(button, a) { -webkit-user-select: none; user-select: none; }
html.bz button:active:not(:disabled) { transform: scale(.97); }
:where(html.bz) a { color: var(--bz-ink); text-underline-offset: 2px; }
:where(html.bz) a:hover { color: #000; }
html.bz input::placeholder, html.bz textarea::placeholder { color: var(--bz-faint); }
html.bz [hidden] { display: none !important; }

@keyframes bz-spin { to { transform: rotate(360deg); } }
@keyframes bz-fade-up { from { opacity: 0; transform: translateY(8px); } }

/* ---------- The mark: an ink square with a saffron dot, and the words ---------- */
.bz-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
/* The AYCANE Business mark, the design's own file (assets/logo/aycane-business-icon.svg, 2026-09-30):
   32 px in the headers, 48 px on the sign-in card. */
.bz-mark {
  width: 32px; height: 32px; flex: none;
  background: url("/images/brand/aycane-business-icon.svg") center / contain no-repeat;
}
.bz-mark.lg { width: 48px; height: 48px; }
.bz-word { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.bz-word-sub { font-size: 18px; font-weight: 400; color: var(--bz-muted); }
.bz-brand.lg .bz-word, .bz-brand.lg .bz-word-sub { font-size: 20px; }

/* ---------- Sign-in pages: one centred card ---------- */
.bz-auth {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 40px 20px;
}
.bz-auth > .bz-brand { margin-bottom: 28px; }
.bz-auth-card {
  width: 100%; max-width: 420px; background: var(--bz-card); border: 1px solid var(--bz-line);
  border-radius: 14px; padding: 32px; box-shadow: 0 1px 2px rgba(23, 20, 15, 0.04);
}
.bz-auth-foot { margin: 20px 0 0; font-size: 15px; color: var(--bz-faint); text-align: center; }
.bz-auth-foot a { color: var(--bz-muted); }
@media (max-width: 480px) {
  .bz-auth { padding: 28px 16px; justify-content: flex-start; }
  .bz-auth-card { padding: 24px 20px; }
}

.bz-h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.bz-sub { margin: 6px 0 24px; font-size: 17px; line-height: 1.5; color: var(--bz-muted); }
.bz-sub b { color: var(--bz-ink); }
.bz-note { margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: var(--bz-muted); }
.bz-alt { margin: 24px 0 0; font-size: 16px; color: var(--bz-muted); text-align: center; }

/* ---------- Segmented tabs (sign-in type; the home's filters) ---------- */
.bz-seg { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--bz-sunken); }
.bz-seg.inline { display: inline-flex; }
.bz-seg > button, .bz-seg > a {
  flex: 1; height: 48px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent;
  font-size: 16px; font-weight: 500; color: var(--bz-muted); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap;
}
.bz-seg.inline > button { flex: none; height: 44px; }
.bz-seg > button:hover { color: var(--bz-ink); }
.bz-seg > [aria-selected="true"], .bz-seg > [aria-checked="true"] {
  background: var(--bz-card); color: var(--bz-ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(23, 20, 15, 0.1);
}
.bz-seg .count { color: inherit; }
.bz-seg > [aria-selected="true"] .count { color: var(--bz-muted); font-weight: 500; }
.bz-auth-card .bz-seg { margin-bottom: 22px; }

/* ---------- Forms ---------- */
.bz-form { display: flex; flex-direction: column; gap: 16px; }
.bz-label { display: flex; flex-direction: column; gap: 6px; font-size: 16px; font-weight: 500; }
.bz-label-row { display: flex; justify-content: space-between; align-items: center; }
.bz-input {
  height: 52px; padding: 0 12px; border: 1px solid var(--bz-field); border-radius: 8px;
  background: var(--bz-card); font-size: 17px; outline: none; width: 100%;
}
.bz-input:focus { border-color: var(--bz-ink); box-shadow: var(--bz-focus); }
.bz-input.code { height: 56px; padding: 0 14px; font-size: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.bz-pw { position: relative; display: flex; }
.bz-pw .bz-input { padding-right: 64px; }
.bz-pw-toggle {
  position: absolute; right: 6px; top: 6px; height: 40px; padding: 0 10px; border: 0; border-radius: 6px;
  background: var(--bz-tint); font-size: 15px; font-weight: 500; cursor: pointer;
}
.bz-rules { display: flex; flex-direction: column; gap: 6px; margin-top: -6px; }
.bz-rule { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--bz-muted); }
.bz-rule::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bz-ring); flex: none;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #FFFFFF;
}
.bz-rule.ok { color: var(--bz-ok); }
.bz-rule.ok::before { content: "✓"; background: var(--bz-ok); box-shadow: none; }
.bz-check { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: var(--bz-muted); line-height: 1.45; cursor: pointer; font-weight: 400; }
.bz-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--bz-ink); flex: none; }

/* ---------- Buttons ---------- */
.bz-btn {
  height: 52px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--bz-ink); color: #FFFFFF;
  font-size: 17px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap;
}
.bz-btn:hover { background: var(--bz-ink-hover); }
.bz-btn:disabled { opacity: .55; cursor: default; }
.bz-btn.block { width: 100%; }
.bz-btn.sm { height: 44px; padding: 0 12px; font-size: 15px; border-radius: 7px; }
.bz-btn.ghost { background: var(--bz-card); color: var(--bz-ink); border: 1px solid var(--bz-field); }
.bz-btn:hover, .bz-btn:focus-visible { color: #FFFFFF; }
.bz-btn.ghost:hover, .bz-btn.ghost:focus-visible { color: var(--bz-ink); }
.bz-btn.ghost:hover { background: var(--bz-bg); }
.bz-btn.danger { background: var(--bz-err); }
.bz-btn.danger:hover { background: #912018; }
.bz-spinner {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF; animation: bz-spin .7s linear infinite; flex: none;
}
.bz-btn.ghost .bz-spinner { border-color: rgba(23, 20, 15, 0.2); border-top-color: var(--bz-ink); }
/* A text action, underlined, with a 44px target. */
.bz-text-btn {
  border: 0; background: none; padding: 0 4px; min-height: 44px; font-size: 16px; font-weight: 600;
  color: var(--bz-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  display: inline-flex; align-items: center;
}
.bz-text-btn.quiet { font-weight: 500; color: var(--bz-muted); }

/* ---------- Messages ---------- */
.bz-alert { padding: 10px 12px; border-radius: 8px; background: var(--bz-err-bg); color: var(--bz-err); font-size: 16px; line-height: 1.45; }
.bz-alert.ok { background: var(--bz-ok-bg); color: var(--bz-ok-fg); }
.bz-alert.warn { background: var(--bz-warn-bg); color: #5A3E00; }
/* An error's own words under the 500 page's message (notice.ejs), off production only. */
.bz-detail { margin: 18px 0 0; padding: 12px; border-radius: 8px; background: var(--bz-tint); font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.bz-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 10px; background: var(--bz-ink);
  color: #FFFFFF; font-size: 16px; box-shadow: 0 12px 32px rgba(23, 20, 15, 0.25); animation: bz-fade-up .2s ease-out;
}

/* ---------- The signed-in header ---------- */
.bz-header { position: sticky; top: 0; z-index: 20; background: var(--bz-card); border-bottom: 1px solid var(--bz-line); }
.bz-header-in { max-width: 1200px; margin: 0 auto; height: 60px; padding: 0 24px; display: flex; align-items: center; gap: 16px; }
.bz-header .bz-brand { padding: 0 4px; min-height: 44px; }
.bz-nav { display: flex; gap: 4px; margin-left: 12px; }
.bz-nav a {
  height: 48px; padding: 0 12px; border-radius: 8px; font-size: 16px; font-weight: 500; color: var(--bz-muted);
  display: inline-flex; align-items: center; text-decoration: none;
}
.bz-nav a:hover { color: var(--bz-ink); }
.bz-nav a[aria-current="page"] { background: var(--bz-tint); color: var(--bz-ink); font-weight: 600; }
.bz-spacer { flex: 1; }
.bz-user { position: relative; }
.bz-user-btn {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 10px 0 4px; border: 1px solid var(--bz-line);
  border-radius: 20px; background: var(--bz-card); cursor: pointer;
}
.bz-user-btn:hover { background: var(--bz-bg); }
.bz-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--bz-ink); color: #FFFFFF;
  display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none;
}
.bz-user-name { font-size: 16px; font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-caret { font-size: 10px; color: var(--bz-muted); }
.bz-menu {
  position: absolute; right: 0; top: 56px; width: 240px; background: var(--bz-card); border: 1px solid var(--bz-line);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(23, 20, 15, 0.12); padding: 6px; animation: bz-fade-up .15s ease-out;
}
.bz-menu-who { padding: 10px 10px 12px; border-bottom: 1px solid var(--bz-line-soft); margin-bottom: 6px; }
.bz-menu-who .n { font-size: 16px; font-weight: 600; }
.bz-menu-who .e { font-size: 15px; color: var(--bz-muted); margin-top: 2px; overflow-wrap: anywhere; }
.bz-menu-item {
  width: 100%; height: 48px; padding: 0 10px; border: 0; border-radius: 6px; background: none; text-align: left;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; text-decoration: none; color: var(--bz-ink);
}
.bz-menu-item:hover { background: var(--bz-tint); }
.bz-menu-item.danger { color: var(--bz-err); }
@media (max-width: 640px) {
  .bz-header-in { padding: 0 16px; gap: 8px; }
  .bz-nav { margin-left: 0; }
  .bz-header .bz-word-sub { display: none; }
  .bz-user-name, .bz-caret { display: none; }
  .bz-user-btn { padding: 0 4px; border-radius: 50%; height: 48px; }
}

/* ---------- Page body ---------- */
.bz-main { max-width: 1200px; width: 100%; margin: 0 auto; padding: 32px 24px 64px; }
.bz-main.narrow { max-width: 760px; padding-top: 28px; }
.bz-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.bz-title { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em; }
.bz-page-sub { margin: 6px 0 0; font-size: 17px; color: var(--bz-muted); line-height: 1.5; }
@media (max-width: 640px) { .bz-main { padding: 24px 16px 56px; } }

/* KPI tiles */
.bz-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 24px; }
.bz-kpi { background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; padding: 16px 18px; }
.bz-kpi .l { font-size: 15px; color: var(--bz-muted); }
.bz-kpi .v { margin-top: 6px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .bz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bz-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.bz-search {
  width: 260px; max-width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--bz-field); border-radius: 8px;
  background: var(--bz-card); font-size: 16px; outline: none;
}
.bz-search:focus { border-color: var(--bz-ink); }
@media (max-width: 640px) { .bz-search { width: 100%; } }

/* Restaurant cards */
.bz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 16px; }
.bz-rcard { background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.bz-rcard-head { padding: 18px 18px 14px; display: flex; gap: 12px; align-items: flex-start; }
.bz-rcard-who { flex: 1; min-width: 0; }
.bz-rcard-name { font-size: 18px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.bz-rcard-addr { margin-top: 3px; font-size: 15px; color: var(--bz-muted); line-height: 1.4; }
.bz-chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.bz-chip.ok { background: var(--bz-ok-bg); color: var(--bz-ok-fg); }
.bz-chip.warn { background: var(--bz-warn-bg); color: var(--bz-warn-fg); }
.bz-chip.muted { background: var(--bz-sunken); color: var(--bz-muted); }
.bz-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--bz-line-soft); border-bottom: 1px solid var(--bz-line-soft); }
.bz-stat { padding: 12px 18px; }
.bz-stat + .bz-stat { border-left: 1px solid var(--bz-line-soft); }
.bz-stat .l { font-size: 13px; color: var(--bz-muted); }
.bz-stat .v { margin-top: 2px; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bz-rcard-row { padding: 12px 18px; display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.bz-rcard-plan { font-size: 15px; color: var(--bz-muted); text-align: right; }
.bz-rcard-plan.cta { color: var(--bz-ink); font-weight: 600; }
/* The card's two ways on (the design's update of 2026-10-02): Edit restaurant info, Queue & reservations */
.bz-rcard-acts { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--bz-line-soft); background: var(--bz-wash); }
.bz-rcard-acts > a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 12px 18px;
  font-size: 16px; font-weight: 600; color: var(--bz-ink); text-decoration: none;
}
.bz-rcard-acts > a + a { border-left: 1px solid var(--bz-line-soft); }
.bz-rcard-acts > a:hover { background: var(--bz-tint); }
.bz-rcard-note { margin: 0 18px; padding: 12px 14px; border-radius: 8px; background: var(--bz-bg); font-size: 15px; line-height: 1.5; color: var(--bz-muted); }
.bz-rcard-foot { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; flex-wrap: wrap; }
.bz-rcard-foot .when { font-size: 15px; color: var(--bz-muted); }
.bz-rcard-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.bz-tool {
  height: 44px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font-size: 15px; font-weight: 500;
  color: var(--bz-muted); cursor: pointer; display: inline-flex; align-items: center; text-decoration: none;
}
.bz-tool:hover { background: var(--bz-tint); color: var(--bz-ink); }
.bz-tool.danger:hover { color: var(--bz-err); }

/* A card's own menu (⋯): the portal's actions the design's card does not draw */
.bz-more { position: relative; flex: none; margin: -10px -10px 0 0; }
.bz-more-btn {
  width: 44px; height: 44px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--bz-muted);
}
.bz-more-btn:hover { background: var(--bz-tint); color: var(--bz-ink); }
.bz-more .bz-menu { top: 46px; width: 240px; z-index: 5; }

/* The card's switches, walk-in queue and reservations (a button with role="switch"): what it is over its state */
.bz-switch { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0 4px; min-height: 44px; cursor: pointer; }
.bz-switch .track { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--bz-off); flex: none; transition: background .15s; }
.bz-switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: left .15s;
}
.bz-switch[aria-checked="true"] .track { background: var(--bz-ok); }
.bz-switch[aria-checked="true"] .track::after { left: 18px; }
.bz-switch .label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; font-size: 16px; font-weight: 600; color: var(--bz-muted); }
.bz-switch .label .cap { font-size: 13px; font-weight: 400; color: var(--bz-muted); }
.bz-switch[aria-checked="true"] .label { color: var(--bz-ok-fg); }
.bz-switch:disabled { opacity: .6; cursor: default; }

/* Empty and no-match states */
.bz-empty { margin-top: 32px; padding: 56px 24px; background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; text-align: center; }
.bz-empty .t { font-size: 22px; font-weight: 600; }
.bz-empty p { margin: 8px auto 24px; max-width: 440px; font-size: 17px; line-height: 1.5; color: var(--bz-muted); }
.bz-dashed { margin-top: 16px; padding: 32px; border: 1px dashed var(--bz-field); border-radius: 12px; text-align: center; font-size: 16px; color: var(--bz-muted); }

/* Notices on a page (the portal's own, kept from before the redesign) */
.bz-notices { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.bz-notice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bz-card); border: 1px solid var(--bz-line); font-size: 16px; line-height: 1.45; }
.bz-notice.ok { background: var(--bz-ok-bg); border-color: transparent; color: var(--bz-ok-fg); }
.bz-notice.warn { background: var(--bz-warn-bg); border-color: transparent; color: #5A3E00; }
.bz-notice.err { background: var(--bz-err-bg); border-color: transparent; color: var(--bz-err); }
.bz-notice .msg { flex: 1; }
.bz-notice-x { width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; cursor: pointer; font-size: 18px; color: inherit; flex: none; }

/* Dialogs (<dialog>) */
.bz-dialog {
  width: min(440px, calc(100% - 32px)); border: 1px solid var(--bz-line); border-radius: 14px; padding: 24px;
  background: var(--bz-card); color: var(--bz-ink); box-shadow: 0 24px 60px rgba(23, 20, 15, 0.25);
}
.bz-dialog::backdrop { background: rgba(23, 20, 15, 0.34); }
.bz-dialog h2 { margin: 0; font-size: 20px; font-weight: 600; }
.bz-dialog p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--bz-muted); }
.bz-dialog .bz-form { margin-top: 16px; }
.bz-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }

/* ---------- The claim steps ---------- */
.bz-back {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px 0 6px; margin-left: -6px; border: 0;
  border-radius: 7px; background: none; font-size: 16px; font-weight: 500; color: var(--bz-muted); cursor: pointer; text-decoration: none;
}
.bz-back:hover { background: var(--bz-sunken); color: var(--bz-ink); }
.bz-steps { list-style: none; margin: 16px 0 28px; padding: 0; display: flex; gap: 8px; align-items: center; }
.bz-steps li { display: flex; align-items: center; gap: 8px; flex: 1; }
.bz-steps li:last-child { flex: none; }
.bz-step-n {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none;
  box-shadow: inset 0 0 0 1.5px var(--bz-ring); color: var(--bz-faint);
}
.bz-step-t { font-size: 16px; color: var(--bz-faint); white-space: nowrap; }
.bz-steps .cur .bz-step-n { background: var(--bz-ink); color: #FFFFFF; box-shadow: none; font-weight: 700; }
.bz-steps .cur .bz-step-t { color: var(--bz-ink); font-weight: 600; }
.bz-steps .done .bz-step-n { background: var(--bz-ok); color: #FFFFFF; box-shadow: none; font-weight: 700; }
.bz-steps .done .bz-step-t { color: var(--bz-ink); font-weight: 500; }
.bz-step-line { flex: 1; height: 1px; background: var(--bz-field); min-width: 12px; }
@media (max-width: 560px) { .bz-step-t { display: none; } .bz-steps .cur .bz-step-t { display: inline; } }

.bz-panel { background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; padding: 20px; }
.bz-inline-field { display: flex; gap: 8px; flex-wrap: wrap; }
.bz-inline-field .bz-input { flex: 1; min-width: 220px; height: 56px; }
.bz-inline-field .bz-btn { height: 56px; padding: 0 18px; }
.bz-found { margin-top: 16px; background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; overflow: hidden; animation: bz-fade-up .25s ease-out; }
.bz-found-head { padding: 10px 18px; background: var(--bz-wash); border-bottom: 1px solid var(--bz-line-soft); font-size: 15px; font-weight: 500; color: var(--bz-muted); }
.bz-found-body { padding: 18px; display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.bz-found-photo { width: 96px; height: 72px; border-radius: 8px; background: repeating-linear-gradient(135deg, #EFEBE3 0 8px, #E6E1D7 8px 16px); flex: none; object-fit: cover; }
.bz-found-name { font-size: 19px; font-weight: 600; }
.bz-found-addr { margin-top: 3px; font-size: 16px; color: var(--bz-muted); line-height: 1.45; }
.bz-found-meta { margin-top: 6px; font-size: 15px; color: var(--bz-faint); }
.bz-found-foot { padding: 14px 18px; border-top: 1px solid var(--bz-line-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bz-howto { margin-top: 24px; }
.bz-howto h2 { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.bz-howto ol { margin: 0; padding-left: 22px; font-size: 16px; line-height: 1.7; color: var(--bz-muted); }

/* ---------- Claim steps 2–4: details, verify, manual review, done (Business v2) ---------- */
.bz-sr, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bz-text-btn:disabled { color: var(--bz-muted); font-weight: 500; text-decoration: none; cursor: default; }
.cl-form { display: flex; flex-direction: column; gap: 16px; }
.cl-sec { background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; padding: 20px; }
.cl-sec > h2, .cl-grid > h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.cl-sec h2 .req { font-weight: 400; font-size: 15px; color: var(--bz-err); }
.cl-sec h2 .opt, .cl-opt { font-weight: 400; font-size: 15px; color: var(--bz-muted); }
.cl-sec-p { margin: 0 0 14px; font-size: 15px; color: var(--bz-muted); line-height: 1.45; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.cl-grid.wide { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cl-grid.tight { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cl-grid > h2, .cl-grid .full { grid-column: 1 / -1; margin: 0; }
.cl-hint { font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--bz-muted); }
select.bz-input { padding: 0 10px; }
.cl-cover {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 200px; border-radius: 10px; border: 1.5px dashed var(--bz-ring); background: var(--bz-wash) center / cover no-repeat;
  cursor: pointer; overflow: hidden;
}
.cl-cover:hover { border-color: var(--bz-faint); }
.cl-cover:focus-within { border-color: var(--bz-ink); box-shadow: var(--bz-focus); }
.cl-cover input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cl-cover-btn { height: 48px; padding: 0 14px; border: 1px solid var(--bz-field); border-radius: 8px; background: var(--bz-card); display: inline-flex; align-items: center; font-size: 16px; font-weight: 600; }
.cl-cover-sub { font-size: 15px; color: var(--bz-muted); }
.cl-cover-replace { position: absolute; right: 10px; top: 10px; height: 44px; padding: 0 12px; border-radius: 7px; background: var(--bz-card); display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
.cl-cover.has .cl-cover-btn, .cl-cover.has .cl-cover-sub { display: none; }
.cl-cover:not(.has) .cl-cover-replace { display: none; }
.cl-hours-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.cl-hours-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.cl-hour { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; border-top: 1px solid var(--bz-line-soft); padding: 2px 0; }
.cl-hour-day { font-size: 16px; font-weight: 500; }
.cl-hour-set { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-hour-set input[type="time"] { height: 48px; padding: 0 8px; border: 1px solid var(--bz-field); border-radius: 7px; font-size: 16px; outline: none; font-variant-numeric: tabular-nums; background: var(--bz-card); }
.cl-hour-set input[type="time"]:focus { border-color: var(--bz-ink); box-shadow: var(--bz-focus); }
.cl-hour-to { color: var(--bz-muted); }
.cl-hour-closed { font-size: 16px; color: var(--bz-muted); min-width: 120px; }
.cl-hour-times { display: contents; }
.cl-hour-set .cl-grow { flex: 1; }
.cl-hour-toggle { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--bz-muted); cursor: pointer; }
.cl-hour-toggle input { width: 24px; height: 24px; margin: 0; accent-color: var(--bz-ink); }
@media (max-width: 480px) { .cl-hour { grid-template-columns: 1fr; gap: 4px; padding: 8px 0; } }
.cl-feats { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-feat {
  position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border: 1px solid var(--bz-field);
  border-radius: 17px; background: var(--bz-card); font-size: 15px; font-weight: 500; color: var(--bz-ink); cursor: pointer;
}
.cl-feat input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cl-feat:hover { background: var(--bz-bg); }
.cl-feat:has(input:checked) { background: var(--bz-ink); border-color: var(--bz-ink); color: #FFFFFF; }
.cl-feat:has(input:checked)::before { content: "✓\00a0"; }
.cl-feat:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(23, 20, 15, 0.25); }
.cl-price label { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 48px; min-width: 52px; padding: 0 12px; border-radius: 7px; font-size: 16px; font-weight: 500; color: var(--bz-muted); cursor: pointer; }
.cl-price label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cl-price label:has(input:checked) { background: var(--bz-card); color: var(--bz-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 20, 15, 0.1); }
.cl-price label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(23, 20, 15, 0.25); }
.cl-seg label { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 14px; border-radius: 7px; font-size: 16px; font-weight: 500; color: var(--bz-muted); cursor: pointer; }
.cl-seg label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cl-seg label:has(input:checked) { background: var(--bz-card); color: var(--bz-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 20, 15, 0.1); }
.cl-seg label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(23, 20, 15, 0.25); }
.cl-hour:has(.cl-hour-toggle input:checked) .cl-hour-times { display: none; }
.cl-hour:not(:has(.cl-hour-toggle input:checked)) .cl-hour-closed { display: none; }
.cl-bar {
  position: sticky; bottom: 0; margin: 0 -24px; padding: 14px 24px; background: rgba(247, 246, 243, 0.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--bz-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; z-index: 5;
}
.cl-bar-err { flex: 1; min-width: 200px; font-size: 16px; color: var(--bz-err); }
@media (max-width: 640px) { .cl-bar { margin: 0 -16px; padding: 12px 16px; } }
.cl-src { font-size: 15px; color: var(--bz-faint); font-weight: 400; }
/* The street field's address suggestions (public/js/address-suggest.js; not in the design): the
   design's menu as a list under the field, its width, above the sticky bar and under the header. */
.cl-suggest-box { position: relative; }
.cl-suggest.bz-menu { left: 0; right: 0; top: calc(100% + 4px); width: auto; z-index: 10; font-weight: 400; }
.cl-suggest-list { list-style: none; margin: 0; padding: 0; max-height: min(316px, 50vh); overflow-y: auto; overscroll-behavior: contain; }
.cl-suggest-opt {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 7px 10px;
  border-radius: 6px; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.cl-suggest-opt:hover { background: var(--bz-tint); }
.cl-suggest-opt[aria-selected="true"] { background: var(--bz-tint); box-shadow: inset 0 0 0 1.5px var(--bz-ink); }
.cl-suggest-main { font-size: 16px; font-weight: 500; color: var(--bz-ink); overflow-wrap: anywhere; }
.cl-suggest-sub { font-size: 15px; color: var(--bz-muted); overflow-wrap: anywhere; }
.cl-suggest-credit { margin: 6px 0 0; padding: 6px 10px 2px; border-top: 1px solid var(--bz-line-soft); font-size: 13px; color: var(--bz-muted); }
.cl-suggest-credit a { color: var(--bz-muted); }

.cl-card { background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; overflow: hidden; }
.cl-card-head { padding: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--bz-line-soft); }
.cl-card-name { font-size: 17px; font-weight: 600; }
.cl-card-addr { margin-top: 2px; font-size: 15px; color: var(--bz-muted); }
.cl-card-call { text-align: right; }
.cl-card-call-k { font-size: 13px; color: var(--bz-muted); }
.cl-card-call-v { margin-top: 2px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.cl-card-foot { padding: 14px 18px; background: var(--bz-wash); border-top: 1px solid var(--bz-line-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cl-card-foot.end { justify-content: flex-end; }
.cl-calling { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--bz-ok-bg); color: var(--bz-ok-fg); font-size: 16px; font-weight: 500; }
.cl-calling::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bz-ok); flex: none; }
.cl-code {
  height: 56px; max-width: 280px; width: 100%; padding: 0 16px; border: 1px solid var(--bz-field); border-radius: 10px; background: var(--bz-card);
  font-size: 28px; font-weight: 600; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; outline: none;
}
.cl-code:focus { border-color: var(--bz-ink); box-shadow: var(--bz-focus); }
.cl-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 16px; color: var(--bz-muted); }
.cl-fine { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--bz-faint); }
.cl-fine a { color: var(--bz-muted); }
.cl-lang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--bz-muted); }
.cl-lang select { height: 44px; padding: 0 8px; border: 1px solid var(--bz-field); border-radius: 7px; background: var(--bz-card); font-size: 15px; }
.cl-or { margin-top: 16px; }
.cl-or h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.cl-or p { margin: 0 0 12px; font-size: 15px; color: var(--bz-muted); line-height: 1.5; }
.cl-files { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed var(--bz-ring); border-radius: 10px; background: var(--bz-wash); cursor: pointer; font-weight: 400; }
.cl-files:hover { border-color: var(--bz-faint); }
.cl-files:focus-within { border-color: var(--bz-ink); box-shadow: var(--bz-focus); }
.cl-files input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cl-files-btn { flex: none; height: 44px; padding: 0 12px; border: 1px solid var(--bz-field); border-radius: 7px; background: var(--bz-card); display: inline-flex; align-items: center; font-size: 16px; font-weight: 600; }
.cl-files-name { font-size: 16px; color: var(--bz-muted); overflow-wrap: anywhere; }
textarea.bz-input { height: auto; padding: 10px 12px; line-height: 1.45; resize: vertical; }
.cl-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.cl-done { background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; padding: 40px 24px; text-align: center; animation: bz-fade-up .3s ease-out; }
.cl-done-ic { width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.cl-done-ic.ok { background: var(--bz-ok-bg); color: var(--bz-ok); }
.cl-done-ic.wait { background: var(--bz-warn-bg); color: var(--bz-warn-fg); font-size: 24px; }
.cl-done-ic.no { background: var(--bz-err-bg); color: var(--bz-err); }
.cl-done h1 { margin: 16px 0 0; font-size: 26px; font-weight: 600; }
.cl-done-p { margin: 8px auto 24px; max-width: 440px; font-size: 17px; line-height: 1.5; color: var(--bz-muted); }
.cl-done-p b { color: var(--bz-ink); }
.cl-done-note { margin: -8px auto 24px; max-width: 440px; padding: 12px 14px; border-radius: 8px; background: var(--bz-bg); font-size: 15px; line-height: 1.5; color: var(--bz-muted); text-align: left; }
.cl-done-acts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cl-done .bz-spinner { border-color: rgba(23, 20, 15, 0.2); border-top-color: var(--bz-ink); vertical-align: -2px; margin-right: 8px; }
.cl-done-more { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--bz-line-soft); text-align: left; }
.cl-done-more h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.cl-done-more p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--bz-muted); }

/* ---------- Lock screen (Console v2: set up, PIN, owner sign-in) ---------- */
.bz-lock { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.bz-lock-in { width: 100%; max-width: 360px; text-align: center; }
.bz-lock-brand { display: inline-flex; margin-bottom: 28px; }
.bz-lock-eyebrow { font-size: 15px; font-weight: 600; color: var(--bz-muted); text-transform: uppercase; letter-spacing: .06em; }
.bz-lock-name { margin-top: 8px; font-size: 22px; font-weight: 600; overflow-wrap: anywhere; }
.bz-lock-ask { margin: 18px 0 0; font-size: 17px; color: var(--bz-muted); }
.bz-dots { margin-top: 18px; display: flex; justify-content: center; gap: 16px; }
.bz-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px #A9A398; }
.bz-dot.on { background: var(--bz-ink); box-shadow: none; }
.bz-lock-err { margin-top: 12px; min-height: 20px; font-size: 16px; font-weight: 500; color: var(--bz-err); }
.bz-keys { margin: 10px auto 0; max-width: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bz-key { height: 68px; border: 1px solid var(--bz-line); border-radius: 14px; background: var(--bz-card); font-size: 28px; font-weight: 500; cursor: pointer; font-variant-numeric: tabular-nums; }
.bz-key:hover { background: var(--bz-tint); }
.bz-key:active { background: var(--bz-sunken); }
.bz-key.util { border: 0; background: transparent; font-size: 17px; font-weight: 600; color: var(--bz-muted); }
.bz-key.util:hover { background: var(--bz-sunken); color: var(--bz-ink); }
.bz-keys.waiting .bz-key { opacity: .45; pointer-events: none; }
.bz-lock-links { margin: 22px 0 0; }
.bz-lock-link { display: block; margin: 12px auto 0; border: 0; background: none; padding: 0 4px; min-height: 44px; font-size: 16px; font-weight: 500; color: var(--bz-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bz-lock-links .bz-lock-link { margin-top: 0; }
a.bz-lock-link { display: inline-flex; align-items: center; justify-content: center; color: var(--bz-muted); }
.bz-lock-card { text-align: left; background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 14px; padding: 24px; gap: 14px; }
.bz-lock-card a.bz-lock-link { margin: 0; }
.bz-lock-card a.bz-lock-link.left { align-self: flex-start; }
.bz-lock-h1 { margin: 0; font-size: 22px; font-weight: 600; }
.bz-lock-sub { margin: 4px 0 0; font-size: 16px; line-height: 1.45; color: var(--bz-muted); }
.bz-lock-help { margin: 0; font-size: 15px; line-height: 1.45; color: var(--bz-muted); }
.bz-btn.tall { height: 56px; }

/* ---------- Account settings (Console v2) ---------- */
.bz-acct { max-width: 880px; width: 100%; margin: 0 auto; padding: 24px 24px 64px; display: flex; flex-direction: column; gap: 16px; }
.bz-acct-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.bz-acct .bz-page-sub { margin-top: 4px; font-size: 16px; }
.bz-sec { background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; padding: 20px; }
.bz-sec.flush { padding: 0; overflow: hidden; }
.bz-sec h2 { margin: 0; font-size: 18px; font-weight: 600; }
.bz-sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.bz-sec-grid > h2, .bz-sec-actions, .bz-sec-note, .bz-sec-err { grid-column: 1 / -1; }
.bz-sec-actions { display: flex; justify-content: flex-end; }
.bz-sec-actions .bz-btn.sm { height: 48px; padding: 0 16px; font-size: 16px; border-radius: 8px; }
.bz-sec-note { margin: 0; font-size: 15px; color: var(--bz-muted); line-height: 1.45; }
.bz-sec-err { font-size: 15px; font-weight: 500; color: var(--bz-err); }
.bz-sec-top { padding: 18px 20px; border-bottom: 1px solid var(--bz-line-soft); }
.bz-sec-top p { margin: 3px 0 0; font-size: 15px; line-height: 1.45; color: var(--bz-muted); }
.bz-sec-top b { color: var(--bz-ink); }
.bz-acc-row { padding: 18px 20px; border-bottom: 1px solid var(--bz-line); display: flex; flex-direction: column; gap: 14px; }
.bz-acc-row:last-child { border-bottom: 0; }
.bz-acc-name { font-size: 17px; font-weight: 600; }
.bz-acc-code { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bz-acc-code .l { font-size: 15px; color: var(--bz-muted); white-space: nowrap; }
.bz-code { height: 40px; padding: 0 10px; border-radius: 7px; background: var(--bz-tint); display: inline-flex; align-items: center; font-size: 16px; font-weight: 700; letter-spacing: .06em; font-family: ui-monospace, Menlo, monospace; }
.bz-mini { height: 40px; padding: 0 10px; border: 1px solid var(--bz-field); border-radius: 7px; background: var(--bz-card); font-size: 15px; font-weight: 600; cursor: pointer; }
.bz-mini.tall { height: 44px; }
.bz-mini.link { border: 0; background: none; padding: 0 8px; text-decoration: underline; text-underline-offset: 2px; }
.bz-mini.dark { border: 0; background: var(--bz-ink); color: #FFFFFF; }
.bz-mini.danger-hover:hover { background: var(--bz-err-bg); color: var(--bz-err); border-color: #F1C9C4; }
.bz-mini:disabled { opacity: .55; cursor: default; }
.bz-pin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bz-pin-what { flex: 1 1 180px; min-width: 0; }
.bz-pin-what .t { font-size: 16px; font-weight: 500; }
.bz-pin-what .h { font-size: 14px; color: var(--bz-muted); }
.bz-pin-view, .bz-pin-edit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bz-pin-shown { min-width: 88px; font-size: 19px; font-weight: 600; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.bz-pin-input { width: 128px; height: 44px; padding: 0 10px; border: 1px solid var(--bz-ink); border-radius: 7px; font-size: 18px; font-weight: 600; letter-spacing: .2em; outline: none; }
.bz-pin-err { flex-basis: 100%; font-size: 15px; font-weight: 500; color: var(--bz-err); }
.bz-devices { border-radius: 10px; background: var(--bz-wash); border: 1px solid var(--bz-line-soft); }
.bz-devices-head { padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--bz-line-soft); font-size: 15px; font-weight: 600; }
.bz-devices-head .n { color: var(--bz-muted); font-weight: 500; }
.bz-devices-all { border: 0; background: none; padding: 0 4px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--bz-err); cursor: pointer; }
.bz-device { padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--bz-line-soft); }
.bz-device .w { flex: 1; min-width: 0; }
.bz-device .n { display: block; font-size: 16px; font-weight: 500; }
.bz-device .m { display: block; font-size: 14px; color: var(--bz-muted); }
.bz-devices-none { padding: 12px 14px; font-size: 15px; color: var(--bz-muted); }
.bz-can { padding: 14px 20px; border-bottom: 1px solid var(--bz-line-soft); display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 16px; color: #3E3A33; }
.bz-perm { padding: 14px 20px; border-bottom: 1px solid var(--bz-line-soft); display: flex; align-items: center; gap: 16px; }
.bz-perm:last-child { border-bottom: 0; }
.bz-perm.wrap { flex-wrap: wrap; gap: 10px 16px; }
.bz-perm .w { flex: 1 1 220px; min-width: 0; }
.bz-perm .t { font-size: 16px; font-weight: 600; }
.bz-perm .h { margin-top: 2px; font-size: 15px; color: var(--bz-muted); }
.bz-toggle { border: 0; background: none; padding: 0 4px; min-height: 44px; cursor: pointer; flex: none; }
.bz-toggle span { display: block; position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--bz-off); transition: background .15s; }
.bz-toggle span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform .15s; }
.bz-toggle[aria-checked="true"] span { background: var(--bz-ok); }
.bz-toggle[aria-checked="true"] span::after { transform: translateX(16px); }
@media (max-width: 600px) {
  .bz-acct { padding: 20px 16px 48px; }
}

/* ================================================================
   Console v2 (queue, reservations, settings): header, cards, lists,
   dialogs. The design's inline styles, as classes.
   ================================================================ */
@keyframes bzFadeUp { from { opacity: 0; transform: translateY(8px); } }
@keyframes bzPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.cz-header { position: sticky; top: 0; z-index: 20; background: var(--bz-card); border-bottom: 1px solid var(--bz-line); }
/*
 * The header is one row where everything fits, as the design draws it. Where it does not, the tabs take
 * a row of their own under the brand's, and the brand's row keeps the restaurant (the picker and plan
 * chip, or the name and role) and, pushed right, the switch (or the queue's state), the account menu or
 * Lock and, on a wide enough row, the clock (Q-064, option A, 2026-10-07). An owner's five tabs rarely
 * fit the 1,272px row and a staff console's three fit from about 1,200px, so the tabs and the restaurant
 * decide on what the row holds, not on the window's width. CSS alone decides: the first paint is already
 * the final layout, and a resize or a zoom decides again. partials/console-header.ejs groups the parts:
 * .cz-head-main holds .cz-head-start (the brand and .cz-head-rest) and the tabs; .cz-head-end holds the
 * clock and .cz-head-ctl (the controls).
 * - .cz-head-end keeps its width and .cz-head-main takes the rest of the row and wraps inside it, the
 *   tabs last. .cz-head-start counts at its full width there, so the tabs stay on the brand's row only
 *   when the whole restaurant and the tabs fit. The tabs keep 16px after them, which with the 16px
 *   between the groups is the design's gap either side of its flexible space: the tabs leave the row
 *   where the design's row would wrap. The brand's line is 50px tall, as are the tabs and the controls,
 *   so the end lines up with the brand whichever row the tabs are on.
 * - The clock stays on the brand's row while the row is at least 60em (960px: every laptop, a 1024px
 *   POS, a tablet on its side). On a narrower row (a tablet upright, a narrow window) it goes to the
 *   right end of the tabs' row. This one is decided on the row's width, because a group that wraps
 *   cannot shrink to its lines: anywhere between "the clock beside the controls" and "the controls
 *   alone", .cz-head-end would keep empty space beside a restaurant cut short. Its max-width,
 *   (100% - 60em) * 1000, is all of it from 60em and nothing under it, where min-width: min-content
 *   leaves exactly the controls. .cz-head-end is as tall as the header and lays out from the right
 *   (row-reverse, the controls first), so one line sits at its top and the clock's line, when it wraps,
 *   at its bottom, beside the tabs. The tabs never run into the clock's place (the row less 6em; past
 *   that they scroll inside, as on a phone, which also keeps very large text from scrolling the page).
 * - The restaurant gives way next: the picker narrows and a console's name is cut short with "…" (one
 *   line always; console-header.ejs puts the whole name in its title), while the chips keep their size,
 *   down to 14em (.cz-head-rest's flex-basis). A restaurant that cannot keep 14em beside the brand takes
 *   a row of its own under it, and the header has three rows (a narrow tablet, as the design's row had
 *   there too). On that row it may use the whole row: the container query on .cz-head-main (whose width
 *   never depends on its content) sees it narrower than the brand and 14em (27em) and lets the
 *   restaurant keep its full width, up to the row's.
 * - The row's width reaches the tabs and the restaurant as --cz-head-row. .cz-head-main is a container,
 *   so their cqw would be its width; registered, 100cqw is computed on .cz-head-main itself (whose cqw is
 *   the row's) and inherited as a length. Where @property is unknown, --cz-head-row-known is undefined,
 *   which voids the tabs' cap rather than holding them to .cz-head-main's width; the restaurant's row
 *   then stops at .cz-head-main's width.
 * - Controls too wide to sit beside the brand at all never squeeze over it: .cz-head-end is never
 *   narrower than they are, so the whole end goes under the brand instead. Only very large text gets
 *   there; at 100% the widest controls fit beside the brand at 701px. Lengths are in em, so text zoom
 *   moves them with the text.
 * - Lines under the brand's may run on under .cz-head-end, whose controls fill only its top: the tabs
 *   overflow .cz-head-main's width into that space rather than wrap again.
 * - The divider goes with the restaurant: it sits in the brand's 17px margin, and when the restaurant
 *   starts a line of its own it lands left of .cz-head-main, where the clip hides it (keeping 6px for
 *   a focus ring), rather than end the brand's line with a divider before nothing.
 * - The clock is as wide as its widest time (5em), so the rows do not change when the hour gains a
 *   digit, and console-header.ejs writes its first time, so they do not change when the script runs.
 * Phones (max-width 700px) keep their own layout: the groups step aside (display: contents) and the
 * parts wrap as one list, as before.
 */
@property --cz-head-row { syntax: '<length>'; inherits: true; initial-value: 100000px; }
@property --cz-head-row-known { syntax: '<number>'; inherits: true; initial-value: 0; }
.cz-header-in { max-width: 1320px; margin: 0 auto; min-height: 60px; padding: 8px 24px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; container-type: inline-size; }
.cz-header-in > .bz-spacer { display: none; }
.cz-head-main { flex: 1 1 13.125em; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; clip-path: polygon(-6px -9999px, 9999px -9999px, 9999px 9999px, -6px 9999px); container: cz-head-main / inline-size; --cz-head-row: 100cqw; }
.cz-head-main > .cz-tabs { flex: none; margin-right: 16px; max-width: calc(var(--cz-head-row) - 6em + var(--cz-head-row-known) * 1px); overflow-x: auto; }
.cz-head-start { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cz-head-start > .bz-brand { min-height: 50px; margin-right: 17px; }
.cz-head-rest { flex: 1 1 14em; min-width: 0; max-width: max-content; display: flex; align-items: center; gap: 16px; margin-left: -17px; }
.cz-head-rest > * { flex: none; }
.cz-head-rest > .cz-select, .cz-head-rest > .cz-rest { flex: 0 1 auto; min-width: 0; }
.cz-head-rest > .cz-rest { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@container cz-head-main (width < 27em) { .cz-head-rest { flex: none; max-width: calc(var(--cz-head-row) + 17px); } }
.cz-head-end { flex: 0 1 auto; align-self: stretch; min-width: min-content; max-width: calc((100% - 60em) * 1000); margin-left: auto; display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-content: space-between; align-items: center; gap: 12px 16px; }
.cz-head-ctl { order: -1; min-height: 50px; display: flex; align-items: center; gap: 16px; }
.cz-head-end > .cz-clock { min-width: 5em; min-height: 50px; display: flex; align-items: center; justify-content: flex-end; }
/* What sticks below the header (the reservations calendar, Plan & billing's summaries) stays 17px under
   it, as under one row: --cz-head-h is the header's height, kept by business.js (67px, one row, until then).
   It never runs past the window's bottom (--cz-stick-max; svh where known, so a phone's toolbars never hide
   its end): taller than the space left, it scrolls inside itself. And it sticks only while it sits beside
   what it goes with: stacked above it, it would cover it as the page scrolls, so each one's media query
   turns sticking off wherever it can be stacked, allowing for a 17px scrollbar. */
:root {
  --cz-head-h: 67px; --cz-stick-top: calc(var(--cz-head-h) + 17px);
  --cz-stick-max: calc(100vh - var(--cz-stick-top) - 16px);
}
@supports (height: 100svh) { :root { --cz-stick-max: calc(100svh - var(--cz-stick-top) - 16px); } }
/* The header's phone layout, as it was (the Console's 700px block below puts the tabs last): no groups,
   every part wrapping in order. */
@media (max-width: 700px) {
  .cz-header-in { align-items: center; }
  .cz-head-main, .cz-head-start, .cz-head-rest, .cz-head-end, .cz-head-ctl { display: contents; }
  .cz-header-in > .bz-spacer { display: block; }
  .cz-head-start > .bz-brand { min-height: 0; margin-right: 0; }
  .cz-head-main > .cz-tabs { flex: 0 1 auto; margin-right: 0; max-width: none; }
  .cz-head-rest > * { flex: 0 1 auto; }
  .cz-head-rest > .cz-select, .cz-head-rest > .cz-rest { min-width: auto; }
  .cz-head-rest > .cz-rest { overflow: visible; white-space: normal; }
  .cz-head-end > .cz-clock { min-width: 0; min-height: 0; display: block; }
}
.cz-sep { width: 1px; height: 24px; background: var(--bz-line); }
.cz-select { height: 48px; padding: 0 10px; border: 1px solid var(--bz-field); border-radius: 8px; background: var(--bz-card); font-size: 16px; font-weight: 600; outline: none; max-width: 300px; }
.cz-rest { font-size: 17px; font-weight: 600; }
.cz-role { height: 24px; padding: 0 9px; border-radius: 12px; background: var(--bz-ink); color: #FFFFFF; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }
.cz-plan { height: 24px; padding: 0 9px; border-radius: 12px; background: var(--bz-tint); font-size: 13px; font-weight: 600; color: #3E3A33; display: inline-flex; align-items: center; text-decoration: none; }
.cz-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--bz-sunken); }
.cz-tabs a { height: 44px; padding: 0 14px; border-radius: 7px; font-size: 16px; font-weight: 500; color: var(--bz-muted); display: inline-flex; align-items: center; gap: 5px; text-decoration: none; white-space: nowrap; }
.cz-tabs a:hover { color: var(--bz-ink); }
.cz-tabs a[aria-current="page"] { background: var(--bz-card); box-shadow: 0 1px 2px rgba(23, 20, 15, 0.1); font-weight: 600; color: var(--bz-ink); }
.cz-tabs a .n { color: var(--bz-muted); font-weight: 500; }
.cz-clock { font-size: 16px; color: var(--bz-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cz-qswitch { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 8px; border: 1px solid var(--bz-line); border-radius: 19px; background: var(--bz-card); cursor: pointer; }
.cz-qswitch .track { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--bz-off); flex: none; }
.cz-qswitch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: transform .15s; }
.cz-qswitch[aria-checked="true"] .track { background: var(--bz-ok); }
.cz-qswitch[aria-checked="true"] .track::after { transform: translateX(14px); }
.cz-qswitch .label { font-size: 16px; font-weight: 600; color: var(--bz-muted); white-space: nowrap; }
.cz-qswitch[aria-checked="true"] .label { color: var(--bz-ok-fg); }
.cz-qstate { font-size: 16px; font-weight: 600; color: var(--bz-muted); white-space: nowrap; }
.cz-lock { height: 48px; padding: 0 14px; border: 1px solid var(--bz-field); border-radius: 8px; background: var(--bz-card); font-size: 16px; font-weight: 600; cursor: pointer; }
.cz-lock:hover { background: var(--bz-bg); }
.cz-user-btn { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 10px 0 4px; border: 1px solid var(--bz-line); border-radius: 19px; background: var(--bz-card); cursor: pointer; }
.cz-user-btn:hover { background: var(--bz-bg); }
.cz-user-btn .bz-avatar { width: 40px; height: 40px; }

.cz-main { max-width: 1320px; width: 100%; margin: 0 auto; padding: 24px 24px 64px; }
.cz-banner { margin-bottom: 16px; padding: 12px 16px; border-radius: 10px; background: var(--bz-warn-bg); color: #5A3E00; font-size: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.cz-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cz-h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em; }
.cz-sub { margin: 4px 0 0; font-size: 16px; color: var(--bz-muted); }
.cz-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cz-btn { height: 52px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--bz-ink); color: #FFFFFF; font-size: 16px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.cz-btn:hover { background: var(--bz-ink-hover); color: #FFFFFF; }
.cz-btn.line { border: 1px solid var(--bz-field); background: var(--bz-card); color: var(--bz-ink); }
.cz-btn.line:hover { background: var(--bz-bg); color: var(--bz-ink); }
.cz-btn:disabled { opacity: .55; cursor: default; }
.cz-card { background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; }

/* Queue */
.cz-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; }
.cz-lane { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cz-lane-top { display: flex; align-items: center; gap: 10px; }
.cz-lane-k { width: 44px; height: 44px; border-radius: 8px; background: var(--bz-ink); color: #FFFFFF; display: grid; place-items: center; font-size: 16px; font-weight: 700; flex: none; }
.cz-lane-name { display: block; font-size: 16px; font-weight: 600; }
.cz-lane-range { display: block; font-size: 15px; color: var(--bz-muted); }
.cz-lane-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cz-lane-stats .l { font-size: 13px; color: var(--bz-muted); }
.cz-lane-stats .v { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cz-lane-next { height: 48px; border: 1px solid var(--bz-field); border-radius: 8px; background: var(--bz-card); font-size: 16px; font-weight: 600; cursor: pointer; }
.cz-lane-next:hover { background: var(--bz-bg); }
.cz-lane-next:disabled { color: #A9A398; cursor: default; background: var(--bz-wash); }
.cz-cols { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; align-items: flex-start; }
.cz-col { min-width: 0; overflow: hidden; }
.cz-col.wide { flex: 2 1 560px; }
.cz-col.narrow { flex: 1 1 340px; }
.cz-col-head { padding: 14px 16px; border-bottom: 1px solid var(--bz-line-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cz-col-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.cz-col-head h2 .n { color: var(--bz-muted); font-weight: 500; }
.cz-col-head p { margin: 3px 0 0; font-size: 15px; color: var(--bz-muted); }
.cz-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.cz-filter { height: 40px; padding: 0 12px; border: 1px solid var(--bz-field); border-radius: 15px; background: var(--bz-card); font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.cz-filter:hover { background: var(--bz-bg); }
.cz-filter[aria-pressed="true"] { border-color: var(--bz-ink); background: var(--bz-ink); color: #FFFFFF; font-weight: 600; }
.cz-filter .n { color: var(--bz-muted); }
.cz-filter[aria-pressed="true"] .n { color: inherit; }
.cz-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--bz-line-soft); }
.cz-ticket { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cz-ticket b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cz-ticket span { font-size: 13px; color: var(--bz-muted); white-space: nowrap; }
.cz-who { min-width: 0; }
.cz-who-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cz-name { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.cz-party { font-size: 15px; color: var(--bz-muted); }
.cz-src, .cz-callout { height: 20px; padding: 0 7px; border-radius: 10px; background: var(--bz-tint); font-size: 13px; font-weight: 600; color: var(--bz-muted); display: inline-flex; align-items: center; }
/* "Call out" (Q-037): the source tag's shape in the design's warning tone (its Pending status and
   the paused banner), on a group from the app whose phone won't show the table-ready alert. */
.cz-callout { background: var(--bz-warn-bg); color: #5A3E00; white-space: nowrap; }
.cz-meta { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; color: var(--bz-muted); }
.cz-meta .long { color: #9A3B00; font-weight: 600; }
.cz-meta .note { color: #3E3A33; overflow-wrap: anywhere; }
.cz-row-actions { display: flex; gap: 6px; align-items: center; }
.cz-call { height: 56px; min-width: 88px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--bz-ink); color: #FFFFFF; font-size: 15px; font-weight: 600; cursor: pointer; }
.cz-call:hover { background: var(--bz-ink-hover); }
.cz-seat { height: 56px; min-width: 80px; padding: 0 18px; border: 1px solid var(--bz-field); border-radius: 8px; background: var(--bz-card); font-size: 15px; font-weight: 600; cursor: pointer; }
.cz-seat:hover { background: var(--bz-bg); }
.cz-x { width: 56px; height: 56px; border: 0; border-radius: 10px; background: var(--bz-tint); font-size: 24px; color: var(--bz-muted); cursor: pointer; }
.cz-x:hover { color: var(--bz-err); }
.cz-empty { padding: 40px 16px; text-align: center; font-size: 16px; color: var(--bz-muted); }
.cz-called { padding: 12px 16px; border-bottom: 1px solid var(--bz-line-soft); display: flex; flex-direction: column; gap: 10px; }
.cz-called-top { display: flex; align-items: center; gap: 12px; }
.cz-called-top > b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 48px; }
.cz-called-who { flex: 1; min-width: 0; }
.cz-called-who .cz-name, .cz-called-who .cz-party { display: block; }
.cz-called-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.cz-left { font-size: 15px; font-weight: 600; color: var(--bz-ok-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cz-left.warn { color: #9A3B00; }
.cz-left.over { color: var(--bz-err); font-weight: 700; animation: bzPulse 1.6s ease-in-out infinite; }
.cz-called-actions { display: flex; gap: 6px; }
.cz-called-actions .seat { flex: 1; height: 48px; border: 0; border-radius: 8px; background: var(--bz-ink); color: #FFFFFF; font-size: 15px; font-weight: 600; cursor: pointer; }
.cz-called-actions .seat.green { background: var(--bz-ok); }
.cz-called-actions .again { height: 48px; padding: 0 12px; border: 1px solid var(--bz-field); border-radius: 8px; background: var(--bz-card); font-size: 15px; font-weight: 600; cursor: pointer; }
.cz-called-actions .noshow { height: 48px; padding: 0 12px; border: 1px solid #F1C9C4; border-radius: 8px; background: var(--bz-card); color: var(--bz-err); font-size: 15px; font-weight: 600; cursor: pointer; }
.cz-called-actions .noshow:hover { background: var(--bz-err-bg); }
.cz-foot { padding: 12px 16px; background: var(--bz-wash); display: flex; justify-content: space-between; font-size: 15px; color: var(--bz-muted); }
.cz-foot b { color: var(--bz-ink); }

/* Dialogs */
.cz-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(23, 20, 15, 0.4); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cz-scrim[hidden] { display: none; }
.cz-dialog { width: 100%; max-width: 640px; max-height: calc(100vh - 40px); overflow: auto; background: var(--bz-card); border-radius: 20px; box-shadow: 0 24px 60px rgba(23, 20, 15, 0.3); animation: bzFadeUp .2s ease-out; }
.cz-dialog.sm { max-width: 600px; }
.cz-dlg-head { padding: 20px 22px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cz-dlg-head h2 { margin: 0; font-size: 22px; font-weight: 600; }
.cz-dlg-head p { margin: 4px 0 0; font-size: 16px; color: var(--bz-muted); }
.cz-dlg-x { width: 44px; height: 44px; border: 0; border-radius: 8px; background: var(--bz-tint); font-size: 20px; cursor: pointer; flex: none; }
.cz-dlg-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.cz-dlg-foot { padding: 14px 22px; border-top: 1px solid var(--bz-line-soft); display: flex; justify-content: flex-end; gap: 8px; }
.cz-dlg-foot .cz-btn { height: 52px; }
.cz-field { display: flex; flex-direction: column; gap: 6px; font-size: 16px; font-weight: 500; }
.cz-field .opt { font-weight: 400; color: var(--bz-muted); }
.cz-field input, .cz-field textarea, .cz-field select { height: 52px; padding: 0 12px; border: 1px solid var(--bz-field); border-radius: 8px; background: var(--bz-card); font-size: 17px; outline: none; }
.cz-field textarea { height: auto; padding: 10px 12px; line-height: 1.4; resize: vertical; }
.cz-field input:focus, .cz-field textarea:focus { border-color: var(--bz-ink); }
.cz-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.cz-chips.times { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); max-height: 232px; overflow-y: auto; padding: 2px; }
.cz-chip { height: 56px; border: 1px solid var(--bz-field); border-radius: 12px; background: var(--bz-card); font-size: 20px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.cz-chips.times .cz-chip { height: 52px; font-size: 17px; }
.cz-chip[aria-pressed="true"] { border-color: var(--bz-ink); background: var(--bz-ink); color: #FFFFFF; font-weight: 700; }
.cz-hint { font-size: 15px; font-weight: 400; color: var(--bz-muted); }
.cz-note-box { padding: 14px 16px; border-radius: 12px; background: var(--bz-warn-bg); color: #5A3E00; font-size: 16px; }
.cz-err { padding: 10px 12px; border-radius: 8px; background: var(--bz-err-bg); color: var(--bz-err); font-size: 16px; }
.cz-open-dlg .cz-dlg-head { padding: 24px 26px 0; }
.cz-open-dlg .cz-dlg-head h2 { font-size: 24px; }
.cz-open-dlg .cz-dlg-head p { margin-top: 6px; font-size: 17px; }
.cz-radios { padding: 18px 26px 0; display: flex; flex-direction: column; gap: 10px; }
.cz-radio { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--bz-card); box-shadow: inset 0 0 0 1px var(--bz-field); text-align: left; cursor: pointer; }
.cz-radio .dot { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px #A9A398; flex: none; }
.cz-radio .t { display: block; font-size: 18px; font-weight: 600; }
.cz-radio .s { display: block; font-size: 15px; color: var(--bz-muted); }
.cz-radio[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--bz-ink); }
.cz-radio[aria-checked="true"] .dot { box-shadow: inset 0 0 0 7px var(--bz-ink); }
.cz-close-at { padding: 16px 26px 0; }
.cz-close-at .t { font-size: 16px; font-weight: 600; }
.cz-close-at .cz-chips { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.cz-close-at .cz-chip { font-size: 18px; }
.cz-close-at label { margin-top: 12px; display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--bz-muted); }
.cz-close-at input { height: 52px; padding: 0 12px; border: 1px solid var(--bz-field); border-radius: 10px; font-size: 18px; color: var(--bz-ink); outline: none; }
.cz-close-at p { margin: 12px 0 0; font-size: 15px; color: var(--bz-muted); }
.cz-open-dlg .cz-err { margin: 12px 26px 0; }
.cz-open-dlg .cz-dlg-foot { margin-top: 20px; padding: 16px 26px; gap: 10px; }
.cz-open-dlg .cz-dlg-foot .cz-btn { height: 56px; padding: 0 22px; border-radius: 12px; font-size: 17px; }
.cz-btn.green { background: var(--bz-ok); }
.cz-btn.green:hover { background: #175E41; }

@media (max-width: 700px) {
  .cz-header-in, .cz-main { padding-left: 16px; padding-right: 16px; }
  .cz-row { grid-template-columns: 56px minmax(0, 1fr); }
  .cz-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .cz-tabs { order: 5; width: 100%; overflow-x: auto; }
}
.cz-btn.sm { height: 44px; padding: 0 12px; border-radius: 7px; font-size: 15px; }

/* Reservations */
.cz-res-layout { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; align-items: flex-start; }
.cz-cal { flex: 0 1 340px; min-width: 280px; position: sticky; top: var(--cz-stick-top); max-height: var(--cz-stick-max); overflow-y: auto; padding: 16px; }
/* The calendar (340px) and the day (560px) share a row from 964px: under that the calendar sits above the day. */
@media (max-width: 980px) { .cz-cal { position: static; max-height: none; } }
.cz-cal-head { display: flex; align-items: center; gap: 8px; }
.cz-cal-head .m { flex: 1; font-size: 18px; font-weight: 600; }
.cz-sq { width: 44px; height: 44px; border: 1px solid var(--bz-field); border-radius: 7px; background: var(--bz-card); cursor: pointer; font-size: 18px; flex: none; }
.cz-sq:hover { background: var(--bz-bg); }
.cz-cal-days { margin-top: 12px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 13px; font-weight: 600; color: var(--bz-faint); text-align: center; }
.cz-cal-grid { margin-top: 4px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cz-day { position: relative; height: 60px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; }
.cz-day:hover { background: var(--bz-tint); }
.cz-day .d { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cz-day .c { height: 12px; font-size: 10.5px; font-weight: 600; color: var(--bz-muted); }
.cz-day.past { color: #A9A398; }
.cz-day.past .c { color: #A9A398; font-weight: 400; }
.cz-day.today { background: var(--bz-card); box-shadow: inset 0 0 0 2px var(--bz-ink); }
.cz-day.today .d { font-weight: 700; }
.cz-day.sel { background: var(--bz-ink); color: #FFFFFF; }
.cz-day.sel .d { font-weight: 700; }
.cz-day.sel .c { color: var(--bz-saffron); }
.cz-day .p { position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #E0A100; }
.cz-day-out { height: 56px; }
.cz-cal-legend { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bz-line-soft); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 14px; color: var(--bz-muted); }
.cz-cal-legend .pend { display: flex; align-items: center; gap: 6px; }
.cz-cal-legend .dot { width: 7px; height: 7px; border-radius: 50%; background: #E0A100; }
.cz-cal-legend .cz-btn.sm { height: 40px; padding: 0 10px; }
.cz-res-day { flex: 1 1 560px; min-width: 0; }
.cz-day-nav { display: flex; align-items: center; gap: 8px; }
.cz-day-nav .cz-sq { border-radius: 8px; }
.cz-day-nav h2 { margin: 0 0 0 4px; font-size: 22px; font-weight: 600; }
.cz-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.cz-kpi { background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; padding: 14px 16px; }
.cz-kpi .l { font-size: 15px; color: var(--bz-muted); }
.cz-kpi .v { margin-top: 4px; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cz-res-list { margin-top: 16px; overflow: hidden; }
.cz-res-list .cz-col-head { padding: 12px 16px; }
.cz-search { width: 220px; max-width: 100%; height: 44px; padding: 0 10px; border: 1px solid var(--bz-field); border-radius: 8px; font-size: 16px; outline: none; }
.cz-search:focus { border-color: var(--bz-ink); }
.cz-bk { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--bz-line-soft); }
.cz-bk-time { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cz-bk-time.muted { font-weight: 600; color: #A9A398; }
.cz-status { height: 22px; padding: 0 8px; border-radius: 11px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; background: var(--bz-tint); color: #3E3A33; }
.cz-status.pending { background: var(--bz-warn-bg); color: #5A3E00; }
.cz-status.late { background: var(--bz-err-bg); color: var(--bz-err); }
.cz-status.arrived { background: var(--bz-ok-bg); color: var(--bz-ok-fg); }
.cz-status.seated { color: var(--bz-muted); }
.cz-status.noshow { color: var(--bz-err); }
.cz-status.cancelled { color: var(--bz-muted); text-decoration: line-through; }
.cz-bk-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cz-bk-actions button { height: 48px; padding: 0 12px; border: 1px solid var(--bz-field); border-radius: 8px; background: var(--bz-card); font-size: 15px; font-weight: 600; cursor: pointer; }
.cz-bk-actions button:hover { background: var(--bz-bg); }
.cz-bk-actions .dark { padding: 0 14px; border: 0; background: var(--bz-ink); color: #FFFFFF; }
.cz-bk-actions .dark:hover { background: var(--bz-ink-hover); }
.cz-bk-actions .green { padding: 0 16px; border: 0; background: var(--bz-ok); color: #FFFFFF; }
.cz-bk-actions .red { border-color: #F1C9C4; color: var(--bz-err); }
@media (max-width: 700px) {
  .cz-cal { position: static; flex-basis: 100%; }
  .cz-bk { grid-template-columns: 56px minmax(0, 1fr); }
  .cz-bk-actions { grid-column: 1 / -1; }
}

/* Settings */
.cz-set-main { padding-bottom: 110px; }
.cz-set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.cz-sec { background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; overflow: hidden; }
.cz-sec.full { margin-top: 16px; }
.cz-sec-head { padding: 16px 18px; border-bottom: 1px solid var(--bz-line-soft); }
.cz-sec.full .cz-sec-head { padding: 18px 20px; }
.cz-sec-head h2 { margin: 0; font-size: 19px; font-weight: 600; }
.cz-sec-head p { margin: 3px 0 0; font-size: 15px; color: var(--bz-muted); }
.cz-block { padding: 16px 18px; border-bottom: 1px solid var(--bz-line-soft); }
.cz-sec.full .cz-block { padding: 18px 20px; }
.cz-block:last-child { border-bottom: 0; }
.cz-block .t { font-size: 16px; font-weight: 600; }
.cz-sec.full .cz-block .t { font-size: 17px; }
.cz-block .h { margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--bz-muted); }
.cz-ty-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 48px; gap: 8px; align-items: center; margin-top: 6px; }
.cz-ty-row.labels { margin-top: 12px; font-size: 13px; color: var(--bz-muted); }
.cz-ty-k { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 10px; background: var(--bz-ink); color: #FFFFFF; text-align: center; font-size: 20px; font-weight: 700; text-transform: uppercase; outline: none; }
.cz-ty-k:focus { box-shadow: 0 0 0 3px var(--bz-saffron); }
.cz-num { height: 48px; min-width: 0; padding: 0 10px; border: 1px solid var(--bz-field); border-radius: 8px; font-size: 16px; color: var(--bz-ink); background: var(--bz-card); outline: none; }
.cz-num:focus { border-color: var(--bz-ink); }
.cz-rm { width: 44px; height: 44px; border: 0; border-radius: 8px; background: none; font-size: 20px; color: var(--bz-muted); cursor: pointer; }
.cz-rm:hover { background: var(--bz-tint); color: var(--bz-err); }
.cz-rm:disabled { opacity: .3; cursor: default; background: none; color: var(--bz-muted); }
.cz-rm.boxed { width: 48px; height: 48px; border-radius: 10px; background: var(--bz-tint); font-size: 22px; }
.cz-dash-btn { margin-top: 10px; height: 44px; padding: 0 12px; border: 1px dashed var(--bz-ring); border-radius: 8px; background: var(--bz-card); font-size: 15px; font-weight: 600; cursor: pointer; }
.cz-dash-btn:hover { background: var(--bz-bg); }
.cz-dash-btn.tall { margin-top: 12px; height: 48px; padding: 0 16px; border-radius: 10px; }
.cz-inline-err { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--bz-err); }
.cz-set-row { padding: 14px 18px; border-bottom: 1px solid var(--bz-line-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cz-set-row:last-child { border-bottom: 0; }
.cz-set-row .w { flex: 1 1 220px; min-width: 0; }
.cz-set-row .w .t { font-size: 16px; font-weight: 600; }
.cz-set-row .w .h { margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--bz-muted); }
.cz-set-row .suffix { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--bz-muted); }
.cz-set-row .suffix .cz-num { width: 76px; }
.cz-set-row .range { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--bz-muted); }
.cz-set-row .range .cz-num { width: 70px; }
.cz-set-row .range input[type="time"] { width: auto; }
.cz-set-row .note { font-size: 15px; font-weight: 600; color: var(--bz-muted); }
.cz-set-note { padding: 14px 18px; background: var(--bz-warn-bg); font-size: 15px; color: #5A3E00; }
.cz-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--bz-sunken); flex-wrap: wrap; }
.cz-seg button { height: 44px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; font-size: 15px; font-weight: 500; color: var(--bz-muted); cursor: pointer; white-space: nowrap; }
.cz-seg button[aria-checked="true"] { background: var(--bz-card); box-shadow: 0 1px 2px rgba(23, 20, 15, 0.1); font-weight: 600; color: var(--bz-ink); }
.cz-seg.full { display: flex; border-radius: 10px; }
.cz-seg.full button { flex: 1; height: 42px; border-radius: 8px; }
.cz-svc-tabs { padding: 14px 20px; border-bottom: 1px solid var(--bz-line-soft); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cz-pill { height: 52px; padding: 0 20px; border: 1px solid var(--bz-field); border-radius: 26px; background: var(--bz-card); font-size: 17px; font-weight: 600; cursor: pointer; }
.cz-pill .s { font-weight: 400; color: var(--bz-muted); }
.cz-pill[aria-pressed="true"] { border-color: var(--bz-ink); background: var(--bz-ink); color: #FFFFFF; }
.cz-pill[aria-pressed="true"] .s { color: var(--bz-field); }
.cz-pill.dashed { padding: 0 18px; border-style: dashed; border-color: var(--bz-ring); font-size: 16px; }
.cz-svc-form { padding: 18px 20px; border-bottom: 1px solid var(--bz-line-soft); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: end; }
.cz-svc-form .cz-field input { border-radius: 10px; }
.cz-del { height: 52px; border: 1px solid #F1C9C4; border-radius: 10px; background: var(--bz-card); color: var(--bz-err); font-size: 16px; font-weight: 600; cursor: pointer; }
.cz-days { grid-column: 1 / -1; }
.cz-days .g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cz-days .g button { height: 52px; border: 1px solid var(--bz-field); border-radius: 12px; background: var(--bz-card); font-size: 16px; font-weight: 500; color: var(--bz-muted); cursor: pointer; }
.cz-days .g button[aria-pressed="true"] { border-color: var(--bz-ink); background: var(--bz-ink); color: #FFFFFF; font-weight: 600; }
.cz-fill { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--bz-wash); border: 1px solid var(--bz-line-soft); font-size: 16px; }
.cz-fill > span { font-weight: 500; }
.cz-fill .cz-seg { border-radius: 10px; }
.cz-fill .cz-seg button { border-radius: 8px; }
.cz-fill input[type="time"] { height: 48px; padding: 0 10px; border: 1px solid var(--bz-field); border-radius: 10px; font-size: 16px; outline: none; }
.cz-fill .go { height: 48px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--bz-ink); color: #FFFFFF; font-size: 15px; font-weight: 600; cursor: pointer; }
.cz-fill .clear { height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: none; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cz-hours { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.cz-hour { display: grid; grid-template-columns: 72px repeat(12, minmax(0, 1fr)); gap: 4px; align-items: center; }
.cz-hour > span:first-child { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cz-min { height: 44px; min-width: 0; padding: 0; border: 1px solid var(--bz-line); border-radius: 8px; background: var(--bz-card); color: var(--bz-faint); font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cz-min[aria-pressed="true"] { border-color: var(--bz-ink); background: var(--bz-ink); color: #FFFFFF; font-weight: 700; }
.cz-min-na { height: 44px; border-radius: 8px; background: var(--bz-bg); }
.cz-times-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.cz-times-line .c { font-size: 15px; color: var(--bz-muted); }
.cz-hint-p { margin: 12px 0 8px; font-size: 15px; color: var(--bz-muted); }
.cz-rule { margin-top: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--bz-line); display: flex; flex-direction: column; gap: 12px; }
.cz-rule-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 16px; }
.cz-rule-top .cz-num { width: 72px; border-radius: 10px; font-size: 17px; }
.cz-rule-top .cz-seg { border-radius: 10px; }
.cz-rule-top .cz-seg button { border-radius: 8px; }
.cz-rule-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }
.cz-rule-times button { height: 48px; border: 1px solid var(--bz-field); border-radius: 10px; background: var(--bz-card); font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cz-rule-times button[aria-pressed="true"] { border-color: var(--bz-ink); background: var(--bz-ink); color: #FFFFFF; font-weight: 700; }
.cz-pacing { padding: 18px 20px; border-bottom: 1px solid var(--bz-line-soft); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.cz-pacing .w { flex: 1 1 240px; }
.cz-pacing label { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--bz-muted); }
.cz-pacing .cz-num { width: 80px; border-radius: 10px; font-size: 17px; }
.cz-sp-row { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; border-radius: 12px; background: var(--bz-wash); border: 1px solid var(--bz-line-soft); }
.cz-sp-row .d { min-width: 150px; font-size: 16px; font-weight: 600; }
.cz-sp-row .l { flex: 1; min-width: 160px; font-size: 16px; }
.cz-sp-row .k { font-size: 15px; font-weight: 600; color: var(--bz-muted); }
.cz-sp-new { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; padding: 14px; border-radius: 12px; border: 1px dashed var(--bz-ring); }
.cz-sp-new .cz-field { font-size: 15px; }
.cz-sp-new .cz-field input { height: 48px; border-radius: 10px; font-size: 16px; padding: 0 10px; }
.cz-sp-new .add { height: 48px; border: 0; border-radius: 10px; background: var(--bz-ink); color: #FFFFFF; font-size: 16px; font-weight: 600; cursor: pointer; }
.cz-qr { padding: 20px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.cz-qr-box { position: relative; width: 220px; height: 220px; flex: none; padding: 14px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--bz-line); }
.cz-qr-box img { width: 100%; height: 100%; display: block; }
.cz-qr-logo { position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%); padding: 4px; border-radius: 10px; background: #FFFFFF no-repeat center / contain; background-origin: content-box; }
.cz-qr-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cz-qr-side .grp { display: flex; flex-direction: column; gap: 8px; }
.cz-qr-side .grp > .t { font-size: 17px; font-weight: 600; }
.cz-qr-side .grp > .h { font-size: 15px; color: var(--bz-muted); }
.cz-qr-side .row { display: flex; flex-wrap: wrap; gap: 10px; }
.cz-upload { position: relative; height: 52px; padding: 0 20px; border-radius: 12px; background: var(--bz-ink); color: #FFFFFF; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; cursor: pointer; }
.cz-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cz-upload-rm { height: 52px; padding: 0 18px; border: 1px solid var(--bz-field); border-radius: 12px; background: var(--bz-card); font-size: 16px; font-weight: 600; cursor: pointer; }
/* The design's "Display & kiosk logo" block, above the QR code in the same card. */
.cz-brand { padding: 20px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; border-bottom: 1px solid var(--bz-line-soft); }
.cz-brand-l { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cz-brand-l > .cz-seg { align-self: flex-start; }
.cz-brand-l .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cz-brand-hint { font-size: 14px; color: var(--bz-muted); }
.cz-brand-warn { font-size: 14px; font-weight: 500; color: #9A6B00; }
.cz-brand-pv { flex: 0 1 340px; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--bz-bg); border: 1px solid var(--bz-line); }
.cz-brand-mark { width: 44px; height: 44px; flex: none; border-radius: 10px; background: #FFFFFF center / contain no-repeat; }
.cz-brand-mark.aycane { background: url("/images/brand/aycane-app-icon.svg") center / contain no-repeat; }
.cz-brand-txt { min-width: 0; }
.cz-brand-txt .n { display: block; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-brand-txt .s { display: block; font-size: 13px; color: var(--bz-muted); }
.cz-swatch { width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer; }
.cz-swatch[aria-checked="true"] { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--bz-ink); }
/* A link to copy (the queue link, the display's and the kiosk's), and the card
   of display and kiosk links (Q-011, 2026-10-06): not in the design, so drawn
   from its own pieces. The box shrinks before the page would scroll sideways. */
.cz-copy { display: flex; flex-wrap: wrap; gap: 8px; }
.cz-copy-in { flex: 1 1 160px; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--bz-field); border-radius: 8px; background: var(--bz-wash); color: var(--bz-ink); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; outline: none; }
.cz-copy-in:focus { border-color: var(--bz-ink); }
.cz-link { padding: 18px 20px; border-bottom: 1px solid var(--bz-line-soft); display: flex; flex-direction: column; gap: 12px; }
.cz-link:last-child { border-bottom: 0; }
.cz-link-top { display: flex; align-items: flex-start; gap: 14px; }
.cz-link-top .w { flex: 1; min-width: 0; }
.cz-link-top .t { display: block; font-size: 17px; font-weight: 600; }
.cz-link-top .h { display: block; margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--bz-muted); }
.cz-link-top .bz-chip { margin-top: 2px; }
.cz-link-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cz-link-note { margin: 0; font-size: 15px; line-height: 1.4; color: var(--bz-muted); }
.cz-btn.red { background: var(--bz-err); color: #FFFFFF; }
.cz-btn.red:hover { background: #8F1C13; color: #FFFFFF; }
.cz-btn.line.red { border-color: #F1C9C4; background: var(--bz-card); color: var(--bz-err); }
.cz-btn.line.red:hover { background: var(--bz-err-bg); color: var(--bz-err); }
.cz-dlg-text { margin: 0; font-size: 16px; line-height: 1.45; color: var(--bz-muted); }
.cz-savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--bz-card); border-top: 1px solid var(--bz-line); box-shadow: 0 -8px 24px rgba(23, 20, 15, 0.08); animation: bzFadeUp .2s ease-out; }
.cz-savebar[hidden] { display: none; }
.cz-savebar-in { max-width: 1320px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cz-savebar-in .t { flex: 1; min-width: 200px; font-size: 16px; }
.cz-savebar-in .t span { color: var(--bz-muted); }
.cz-savebar-in .cz-btn:disabled { background: var(--bz-off); opacity: 1; }
@media (max-width: 700px) {
  .cz-hour { grid-template-columns: 56px repeat(6, minmax(0, 1fr)); }
  .cz-days .g { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Console: toast with Undo, sounds, printed tickets, reinstate (Console v2, 2026-09-28) ---------- */
.cz-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 20px; min-height: 64px; box-sizing: border-box;
  border-radius: 14px; background: var(--bz-ink); color: #FFFFFF; font-size: 17px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  animation: bzFadeUp .2s ease-out;
}
.cz-toast[hidden] { display: none; }
.cz-toast .t { flex: 1; min-width: 0; padding: 8px 0; }
.cz-toast .u { height: 48px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--bz-saffron); color: var(--bz-ink); font-size: 17px; font-weight: 700; cursor: pointer; flex: none; }
.cz-toast .u[hidden] { display: none; }

.bz-toggle.lg { padding: 0; }
.bz-toggle.lg span { width: 64px; height: 38px; border-radius: 19px; }
.bz-toggle.lg span::after { top: 4px; left: 4px; width: 30px; height: 30px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform .2s; }
.bz-toggle.lg[aria-checked="true"] span::after { transform: translateX(26px); }
.cz-seg.lg { border-radius: 10px; }
.cz-seg.lg button { height: 48px; padding: 0 18px; border-radius: 8px; font-size: 16px; font-weight: 400; }
.cz-seg.lg button[aria-checked="true"] { font-weight: 600; }

.cz-snd { padding: 16px 20px; border-bottom: 1px solid var(--bz-line-soft); display: flex; flex-direction: column; gap: 12px; }
.cz-snd:last-child { border-bottom: 0; }
.cz-snd-top { display: flex; align-items: center; gap: 14px; }
.cz-snd.cz-snd-top { flex-direction: row; }
.cz-snd .w { flex: 1; min-width: 0; }
.cz-snd .w .t { display: block; font-size: 17px; font-weight: 600; }
.cz-snd .w .h { display: block; font-size: 15px; color: var(--bz-muted); }
.cz-snd-tones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cz-play { height: 48px; padding: 0 16px; border: 1px solid var(--bz-field); border-radius: 10px; background: var(--bz-card); font-size: 15px; font-weight: 600; cursor: pointer; }
.cz-play:hover { background: var(--bz-bg); }
.cz-snd.cz-snd-line { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.cz-snd-line .w { flex: 1 1 200px; }
.cz-range { flex: 1 1 220px; height: 44px; margin: 0; accent-color: var(--bz-ink); }
.cz-vol { width: 52px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

.cz-sec-head-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cz-pr { padding: 20px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.cz-pr-main { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cz-pr-grp { display: flex; flex-direction: column; gap: 8px; }
.cz-pr-grp.tight { gap: 4px; }
.cz-pr-grp > .t { font-size: 17px; font-weight: 600; }
.cz-pr-grp > .h { font-size: 15px; color: var(--bz-muted); }
.cz-pr-grp > .cz-seg { align-self: flex-start; }
.cz-printer { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--bz-line); }
.cz-printer .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bz-ring); flex: none; }
.cz-printer .w { flex: 1; min-width: 0; }
.cz-printer .n { display: block; font-size: 16px; font-weight: 600; }
.cz-printer .s { display: block; font-size: 14px; color: var(--bz-muted); }
.cz-check { display: flex; align-items: center; gap: 12px; min-height: 52px; font-size: 16px; cursor: pointer; }
.cz-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--bz-ink); flex: none; }
.cz-check > span { flex: 1; }
.cz-check .l { display: block; }
.cz-check .h { display: block; font-size: 14px; color: var(--bz-muted); }
.cz-pr-footer { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; font-weight: 500; }
.cz-pr-footer input { height: 52px; padding: 0 14px; border: 1px solid var(--bz-field); border-radius: 10px; font-size: 17px; outline: none; background: var(--bz-card); }
.cz-pr-footer input:focus { border-color: var(--bz-ink); }
.cz-pr-pv { flex: 0 1 320px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; border-radius: 14px; background: #EFECE6; }
.cz-pr-pv > .l { font-size: 14px; font-weight: 600; color: var(--bz-muted); align-self: flex-start; }
.cz-btn.tall { height: 56px; padding: 0 22px; border-radius: 12px; font-size: 17px; justify-content: center; }
.cz-pr-pv .cz-btn.tall { height: 52px; font-size: 16px; }
.cz-btn.block { width: 100%; }
.cz-btn.grow { flex: 1; min-width: 180px; }

/* The ticket itself: the design's receipt, on screen and on paper. */
.cz-tkt {
  width: 290px; flex: none; box-sizing: border-box; padding: 18px 16px 16px; background: #FFFFFF; color: #000000; border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 8px 24px -10px rgba(0, 0, 0, 0.25); font-family: ui-monospace, Menlo, monospace; text-align: center;
}
.cz-tkt.p58 { width: 220px; }
.cz-tkt .r { font-size: 14px; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; }
.cz-tkt .w { margin-top: 2px; font-size: 12px; }
.cz-tkt .d { margin: 12px 0 4px; border-top: 1px dashed #000000; }
.cz-tkt .d.end { margin: 12px 0 8px; }
.cz-tkt .yn { font-size: 12px; letter-spacing: .12em; }
.cz-tkt .n { font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -.02em; font-family: var(--bz-font); white-space: nowrap; }
.cz-tkt.p58 .n { font-size: 52px; }
.cz-tkt .p { margin-top: 6px; font-size: 13px; }
.cz-tkt .wt { margin-top: 8px; font-size: 13px; }
.cz-tkt .q { margin: 12px auto 0; width: 112px; height: 112px; }
.cz-tkt .q svg { display: block; width: 100%; height: 100%; }
.cz-tkt .qt { margin-top: 6px; font-size: 11.5px; line-height: 1.35; }
.cz-tkt .f { font-size: 11.5px; line-height: 1.4; }

.cz-scrim[data-ticket-dialog] { z-index: 45; background: rgba(23, 20, 15, 0.45); }
.cz-tk-dialog { max-width: 560px; }
.cz-tk-head { padding: 22px 24px 0; display: flex; align-items: center; gap: 12px; }
.cz-tk-ok { width: 36px; height: 36px; border-radius: 50%; background: var(--bz-ok-bg); color: var(--bz-ok); display: grid; place-items: center; font-size: 18px; font-weight: 700; flex: none; }
.cz-tk-spin { width: 28px; height: 28px; margin: 4px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--bz-line); border-top-color: var(--bz-ink); animation: bz-spin .7s linear infinite; flex: none; }
.cz-tk-ok[hidden], .cz-tk-spin[hidden] { display: none; }
.cz-tk-title { display: block; font-size: 22px; font-weight: 600; }
.cz-tk-sub { display: block; font-size: 15px; color: var(--bz-muted); }
.cz-tk-stage { margin: 18px 24px 0; padding: 22px; border-radius: 14px; background: #EFECE6; display: flex; justify-content: center; }
.cz-tk-foot { padding: 18px 24px 22px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cz-tk-foot[hidden] { display: none; }

@media print {
  @page { margin: 0; }
  html.bz body * { visibility: hidden !important; }
  html.bz #tkt, html.bz #tkt * { visibility: visible !important; }
  html.bz #tkt { position: fixed !important; left: 0; top: 0; box-shadow: none !important; border-radius: 0; }
  html.bz #tkt.p80 { width: 72mm; }
  html.bz #tkt.p58 { width: 48mm; }
}

.cz-hist-toggle {
  width: 100%; min-height: 56px; padding: 0 16px; border: 0; border-top: 1px solid var(--bz-line-soft); background: var(--bz-card);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 600; cursor: pointer; text-align: left;
}
.cz-hist-toggle .n, .cz-hist-toggle .a { font-weight: 400; color: var(--bz-muted); }
.cz-hist-toggle .a { font-weight: 600; }
.cz-hist-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--bz-line-soft); }
.cz-hist-row .tk { min-width: 56px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bz-muted); }
.cz-hist-row .who { flex: 1; min-width: 0; }
.cz-hist-row .nm { display: block; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-hist-row .mt { display: block; font-size: 14px; color: var(--bz-muted); }
.cz-hist-row .cz-btn { height: 52px; border-radius: 10px; font-size: 15px; flex: none; }
.cz-hist-empty { padding: 18px 16px; border-top: 1px solid var(--bz-line-soft); font-size: 15px; color: var(--bz-muted); }
.cz-bk-actions .re { padding: 0 14px; }

/* ---------- Console: Plan & billing (Console v2, 2026-09-28) ---------- */
.cb-main { max-width: 1120px; }
.cb-view { animation: bzFadeUp .2s ease-out; }
.cb-h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em; }
.cb-h1.mt { margin-top: 12px; }
.cb-h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.cb-sub { margin: 4px 0 0; font-size: 16px; color: var(--bz-muted); }
.cb-sub b { color: var(--bz-ink); }
.cb-lbl { font-size: 15px; color: var(--bz-muted); }
.cb-muted { margin: 10px 0 0; font-size: 16px; color: var(--bz-muted); line-height: 1.45; }
.cb-muted.sm { margin-top: 4px; font-size: 15px; }
.cb-quiet { font-size: 15px; color: var(--bz-muted); }
.cb-err { margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--bz-err); }
.cb-alert { padding: 10px 12px; border-radius: 8px; background: var(--bz-err-bg); color: var(--bz-err); font-size: 16px; }
.cb-banner { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: var(--bz-warn-bg); color: #5A3E00; font-size: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.cb-btn { height: 48px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--bz-ink); color: #FFFFFF; font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cb-btn:hover { background: var(--bz-ink-hover); }
.cb-btn:disabled { background: var(--bz-sunken); color: var(--bz-muted); cursor: default; }
.cb-btn.sm { height: 44px; padding: 0 14px; border-radius: 7px; font-size: 15px; }
.cb-btn.line { border: 1px solid var(--bz-field); background: var(--bz-card); color: var(--bz-ink); }
.cb-btn.line:hover { background: var(--bz-bg); }
.cb-btn.tall { height: 52px; padding: 0 18px; font-size: 17px; }
.cb-btn.tall-h { height: 52px; padding: 0 14px; }
.cb-btn.danger { border: 1px solid #F1C9C4; background: var(--bz-card); color: var(--bz-err); }
.cb-btn.danger:hover { background: var(--bz-err-bg); }
.cb-btn.submit { height: 56px; font-size: 17px; }
.cb-link { border: 0; background: none; padding: 0 4px; min-height: 44px; font-size: 16px; font-weight: 500; color: var(--bz-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; }
.cb-link.strong { font-weight: 600; color: var(--bz-ink); }
.cb-link.green { font-size: 15px; font-weight: 600; color: var(--bz-ok-fg); }
.cb-back { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px 0 6px; margin-left: -6px; border: 0; border-radius: 7px; background: none; font-size: 16px; font-weight: 500; color: var(--bz-muted); cursor: pointer; }
.cb-back:hover { background: var(--bz-sunken); color: var(--bz-ink); }
.cb-chip { height: 22px; padding: 0 8px; border-radius: 11px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.cb-chip.green { background: var(--bz-ok-bg); color: var(--bz-ok-fg); }
.cb-chip.amber { background: var(--bz-warn-bg); color: #5A3E00; }
.cb-chip.red { background: var(--bz-err-bg); color: var(--bz-err); }
.cb-chip.grey { background: var(--bz-tint); color: var(--bz-ink); }

.cb-cols { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; align-items: flex-start; }
.cb-card { background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; }
.cb-pad { padding: 18px; }
.cb-pad2 { padding: 20px; }
.cb-card h2 { margin: 0; font-size: 17px; font-weight: 600; }
.cb-plan { flex: 3 1 420px; min-width: 0; overflow: hidden; }
.cb-plan-top { padding: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cb-plan-name { margin-top: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 24px; font-weight: 600; }
.cb-plan-price { margin-top: 4px; font-size: 16px; color: var(--bz-muted); }
.cb-promo { margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--bz-ok-fg); overflow-wrap: anywhere; }
.cb-next { text-align: right; }
.cb-next .v { margin-top: 4px; font-size: 18px; font-weight: 600; }
.cb-note { margin: 0 18px 14px; padding: 10px 12px; border-radius: 8px; background: var(--bz-tint); font-size: 15px; color: #3E3A33; }
.cb-feats { margin: 0; padding: 14px 18px; border-top: 1px solid var(--bz-line-soft); list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; }
.cb-feats li { display: flex; gap: 8px; font-size: 16px; line-height: 1.4; }
.cb-feats .ok { color: var(--bz-ok); font-weight: 700; }
.cb-plan-foot { padding: 14px 18px; border-top: 1px solid var(--bz-line-soft); background: var(--bz-wash); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cb-acts { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.cb-side { flex: 2 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cb-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cb-cardrow { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.cb-cardrow .n { display: block; font-size: 16px; font-weight: 600; }
.cb-cardrow .s { display: block; font-size: 15px; color: var(--bz-muted); }
.cb-brand { width: 44px; height: 40px; border-radius: 5px; background: var(--bz-ink); color: #FFFFFF; display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; flex: none; }
.cb-ref-on { margin-top: 10px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--bz-ok-bg); }
.cb-ref-on > span { flex: 1; min-width: 0; }
/* A code may be 40 characters (the app's are AYC-ALEX-7K2M-Q8XD-3PWN since 2026-10-10): it wraps, never cut. */
.cb-ref-on .c { display: block; font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--bz-ok-fg); overflow-wrap: anywhere; }
.cb-ref-on .b { display: block; font-size: 14px; color: var(--bz-ok-fg); }
/* Not in the design: a plan's own code taken off once its discount started, offered to put back (console-billing.js,
   backRow). The applied code's row in a neutral tint, since the code is not on the plan. */
.cb-ref-on.off { background: var(--bz-tint); }
.cb-ref-on.off .c, .cb-ref-on.off .b { color: var(--bz-ink); }
/*
 * The referral code fields (the plan's card and "Confirm your plan"). The design draws the field and Apply on one row,
 * for a short code ("e.g. AYC-KAREN"). Since 2026-10-10 the app's codes run to 27 characters and the example is one of
 * them ("e.g. AYC-ALEX-7K2M-Q8XD-3PWN"), more than that row holds on a phone or in a narrow side column. So, not in the
 * design, a narrower row gives the field what it needs to show a code whole:
 * - Under 432px a typed code drops the design's letter spacing. It keeps the field's 16px: smaller text makes iPhone
 *   Safari zoom the page when the field is tapped.
 * - Under 394px Apply goes under the field: that is the narrowest row that holds a 27-character code beside Apply,
 *   just under a desktop's side card (396px). So the design's row stays on a desktop and on a tablet in one column,
 *   and Apply goes under on a phone upright and, in two columns, in a window under about 1,114px (1024px; an iPad
 *   upright).
 * - The example is set lighter than a typed code: 15px, and 13px under 280px (a 320px phone; the side column of an iPad
 *   upright), so it shows whole in every row from a 320px phone up.
 * A 27-character code then shows whole on a phone from 390px, at 1024px and on a desktop, save the widest names (eight
 * wide letters, as MOHAMMAD); in narrower rows it scrolls in the field, as any long entry does, until Apply shows it
 * whole (.cb-ref-on .c). The widths are the row's, never the window's (the row is the container): in two columns a
 * 262px row sits in a 784px window. scripts/visual/shoot.js checks the example, Apply and long codes
 * (referralProblems).
 */
.cb-ref-row { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; container-type: inline-size; }
.cb-ref-in { flex: 1; min-width: 0; height: 48px; padding: 0 12px; border: 1px solid var(--bz-field); border-radius: 8px; font-size: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; outline: none; background: var(--bz-card); }
.cb-ref-in::placeholder { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
@container (width < 432px) { .cb-ref-in { letter-spacing: 0; } }
@container (width < 394px) { .cb-ref-in { flex-basis: 100%; } }
@container (width < 280px) { .cb-ref-in::placeholder { font-size: 13px; } }
.cb-ref-in.tall { height: 52px; }
.cb-ref-in:focus { border-color: var(--bz-ink); }
.cb-ref-row .cb-btn.line { height: 48px; padding: 0 14px; }
.cb-ref-row .cb-btn.tall-h { height: 52px; }
.cb-details { margin-top: 10px; font-size: 16px; line-height: 1.55; color: #3E3A33; }
.cb-inv { margin-top: 16px; overflow: hidden; }
.cb-inv-head { padding: 14px 18px; border-bottom: 1px solid var(--bz-line-soft); }
.cb-inv-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr) auto auto auto; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--bz-line-soft); font-size: 16px; }
.cb-inv-row:last-child { border-bottom: 0; }
.cb-inv-row .dt { color: var(--bz-muted); }
.cb-inv-row .amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-inv-empty { padding: 24px 18px; font-size: 16px; color: var(--bz-muted); }
@media (max-width: 640px) {
  .cb-inv-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .cb-inv-row .dt { grid-column: 1 / -1; }
}

.cb-plans-head { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
/* Choose a billing term (the design's update of 2026-10-02): one row per term, picked like a radio button, and the term picked beside it */
.cb-termcols { gap: 20px; margin-top: 20px; }
.cb-terms { flex: 3 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cb-term { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; min-height: 76px; padding: 14px 18px; border: 0; border-radius: 12px; background: var(--bz-card); box-shadow: inset 0 0 0 1px var(--bz-line); text-align: left; color: var(--bz-ink); cursor: pointer; }
.cb-term:hover { box-shadow: inset 0 0 0 1px #A9A398; }
.cb-term.on { background: #FFFBEF; box-shadow: inset 0 0 0 2px var(--bz-ink); }
.cb-term:focus-visible { outline: 3px solid var(--bz-saffron); outline-offset: 2px; }
.cb-term .dot { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 2px #A9A398; }
.cb-term.on .dot { box-shadow: inset 0 0 0 7px var(--bz-ink); }
.cb-term .mid { min-width: 0; }
.cb-term .top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cb-term .n { font-size: 19px; font-weight: 600; }
.cb-term .tag { height: 22px; padding: 0 8px; border-radius: 11px; background: var(--bz-sunken); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; }
.cb-term .tag.best { background: var(--bz-saffron); color: var(--bz-ink); font-weight: 700; }
.cb-term .per { display: block; margin-top: 3px; font-size: 15px; color: var(--bz-muted); }
.cb-term .save { color: var(--bz-ok-fg); font-weight: 600; white-space: nowrap; }
.cb-term .end { text-align: right; }
.cb-term .p { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-term .b { display: block; font-size: 13px; color: var(--bz-muted); }
.cb-terms-note { margin: 6px 2px 0; font-size: 14px; line-height: 1.5; color: var(--bz-muted); }
.cb-termsum { flex: 2 1 300px; min-width: 0; position: sticky; top: var(--cz-stick-top); max-height: var(--cz-stick-max); overflow-x: hidden; overflow-y: auto; }
.cb-termsum .hd { padding: 18px 20px; border-bottom: 1px solid var(--bz-line-soft); }
.cb-termsum .hd .cb-lbl { font-size: 14px; }
.cb-termsum .row { margin-top: 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cb-termsum .row .n { font-size: 20px; font-weight: 600; }
.cb-termsum .row .p { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-termsum .pm { margin-top: 2px; font-size: 14px; color: var(--bz-muted); }
.cb-termsum .inc { padding: 16px 20px; }
.cb-termsum .inc .t { font-size: 15px; font-weight: 600; }
.cb-termsum .inc ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cb-termsum .inc li { display: flex; gap: 10px; font-size: 15px; line-height: 1.4; }
.cb-termsum .inc .ok { color: var(--bz-ok); font-weight: 700; }
.cb-termsum .ft { padding: 14px 20px 18px; border-top: 1px solid var(--bz-line-soft); }
.cb-btn.go { width: 100%; height: 52px; border-radius: 10px; font-size: 17px; }
/* The terms (420px) and their summary (300px) share a row from 788px (784px for the checkout's 16px gap). */
@media (max-width: 804px) { .cb-termsum { position: static; max-height: none; } }
@media (max-width: 420px) { .cb-term { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; } .cb-term .p { font-size: 19px; } }

.cb-form { flex: 3 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cb-radio { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bz-card); box-shadow: inset 0 0 0 2px var(--bz-ink); }
.cb-radio .dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 5px var(--bz-ink); flex: none; }
.cb-radio .n { display: block; font-size: 16px; font-weight: 600; }
.cb-radio .s { display: block; font-size: 15px; color: var(--bz-muted); }
.cb-sum { flex: 2 1 300px; min-width: 0; position: sticky; top: var(--cz-stick-top); max-height: var(--cz-stick-max); overflow-x: hidden; overflow-y: auto; }
.cb-sum-top { padding: 18px; border-bottom: 1px solid var(--bz-line-soft); }
.cb-sum-top .t { margin: 4px 0 2px; font-size: 19px; font-weight: 600; }
.cb-sum-rows { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.cb-sum-rows .r { display: flex; justify-content: space-between; gap: 12px; }
.cb-sum-rows .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-sum-rows .disc { color: var(--bz-ok-fg); font-weight: 500; }
.cb-sum-rows .quiet { color: var(--bz-muted); }
.cb-sum-rows .total { padding-top: 8px; border-top: 1px solid var(--bz-line-soft); font-weight: 600; }
.cb-sum-rows .due { padding: 10px 12px; margin-top: 4px; border-radius: 8px; background: var(--bz-tint); font-weight: 600; }
.cb-sumnote { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--bz-muted); }
.cb-sumnote.green { margin: 0; color: var(--bz-ok-fg); }
.cb-sum-ref { padding: 14px 18px; border-top: 1px solid var(--bz-line-soft); }
.cb-sum-ref .t { font-size: 16px; font-weight: 600; }
.cb-sum-foot { padding: 14px 18px; border-top: 1px solid var(--bz-line-soft); display: flex; flex-direction: column; gap: 10px; }
.cb-fine { margin: 0; font-size: 13px; line-height: 1.45; color: var(--bz-faint); }
@media (max-width: 804px) { .cb-sum { position: static; max-height: none; } }

.cb-cancel { max-width: 620px; }
.cb-lead { margin: 6px 0 0; font-size: 17px; line-height: 1.5; color: var(--bz-muted); }
.cb-lead b { color: var(--bz-ink); }
.cb-bullets { margin: 16px 0 0; padding: 16px 18px; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.cb-why { margin-top: 18px; font-size: 16px; font-weight: 500; }
.cb-why .opt { font-weight: 400; color: var(--bz-muted); }
.cb-reasons { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.cb-reason { height: 44px; padding: 0 12px; border: 1px solid var(--bz-field); border-radius: 17px; background: var(--bz-card); font-size: 15px; font-weight: 500; cursor: pointer; }
.cb-reason[aria-pressed="true"] { border-color: var(--bz-ink); background: var(--bz-ink); color: #FFFFFF; }
.cb-cancel .cb-alert { margin-top: 16px; }
.cb-cancel-acts { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* Billed separately (2026-10-02): the business name, receipt email and GST/HST number for a restaurant's own billing */
.cb-billform form { margin-top: 18px; }
.cb-billform .opt { font-weight: 400; color: var(--bz-muted); }
.cb-billform .cb-err { margin-top: 0; }
.cb-billform .cb-cancel-acts { margin-top: 4px; }
.cb-done { max-width: 560px; margin: 24px auto 0; padding: 40px 24px; text-align: center; animation: bzFadeUp .3s ease-out; }
.cb-done .tick { width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; background: var(--bz-ok-bg); color: var(--bz-ok); display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.cb-done h1 { margin: 16px 0 0; font-size: 26px; font-weight: 600; }
.cb-done p { margin: 8px auto 24px; max-width: 420px; font-size: 17px; line-height: 1.5; color: var(--bz-muted); }
@media (max-width: 520px) { .cb-next { text-align: left; } }

/* ---------- Before a plan (views/partials/plan-pitch.ejs; Q-035, option A, 2026-10-06) ----------
   The page a restaurant without a plan gets at /r/:id/dashboard. There is no Claude Design page for it,
   so it is drawn with the design's parts: the Console's header, its type, cards and buttons, and the
   owner's screenshots (public/images/preview), each as wide as the page so the Console in it stays legible. */
.cz-plan.warn { background: var(--bz-warn-bg); color: var(--bz-warn-fg); }
.pp-hero { padding: 8px 0 4px; }
.pp-h1 { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.pp-lead { margin: 10px 0 0; max-width: 680px; font-size: 18px; line-height: 1.5; color: var(--bz-muted); }
.pp-lead b, .pp-copy b, .pp-close b, .pp-off b { color: var(--bz-ink); font-weight: 600; }
.pp-cta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.pp-price { font-size: 16px; color: var(--bz-muted); }
.pp-points, .pp-list, .pp-feats, .pp-trust { margin: 0; padding: 0; list-style: none; }
.pp-points { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 16px; color: #3E3A33; }
.pp-points li, .pp-list li, .pp-feats li { display: flex; gap: 8px; line-height: 1.45; }
.pp-points li::before, .pp-list li::before, .pp-feats li::before { content: "✓"; color: var(--bz-ok); font-weight: 700; flex: none; }
.pp-block { margin-top: 44px; }
.pp-block > h2, .pp-copy h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.pp-shot { margin: 0; }
.pp-shot img {
  display: block; width: 100%; height: auto; border: 1px solid var(--bz-line); border-radius: 12px; background: var(--bz-card);
  box-shadow: 0 1px 2px rgba(23, 20, 15, 0.04), 0 18px 40px -28px rgba(23, 20, 15, 0.35);
}
.pp-shot figcaption { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--bz-muted); }
.pp-shot figcaption b { color: var(--bz-ink); font-weight: 600; }
.pp-full { white-space: nowrap; font-weight: 500; }
.pp-full, .pp-trust a { color: var(--bz-muted); }
.pp-copy { margin-top: 18px; }
.pp-copy p { margin: 8px 0 0; max-width: 720px; font-size: 17px; line-height: 1.55; color: #3E3A33; }
.pp-list { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 8px 28px; max-width: 920px; font-size: 16px; color: #3E3A33; }
/* The phone beside the display: a tall picture in a narrow column, so neither towers over the page.
   Its width is definite, so the width and height on the <img> reserve its box before the file arrives. */
.pp-pair { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
.pp-pair.one { grid-template-columns: minmax(0, 1fr); }
.pp-shot.tall img { max-width: 280px; margin: 0 auto; }
.pp-card { margin-top: 44px; background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; padding: 22px; }
.pp-card h2 { margin: 0; font-size: 20px; font-weight: 600; }
.pp-feats { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 10px 20px; font-size: 16px; }
.pp-fine { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--bz-muted); }
.pp-close { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.pp-close p { margin: 6px 0 0; max-width: 600px; font-size: 16px; line-height: 1.5; color: var(--bz-muted); }
.pp-trust { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; line-height: 1.5; color: var(--bz-muted); }
/* A staff or manager console: what is off and who can change it, nothing to buy. */
.pp-off { margin-top: 8px; }
.pp-off .t { margin: 0; }
.pp-off p { margin-bottom: 0; }
@media (max-width: 760px) {
  .pp-pair { grid-template-columns: minmax(0, 1fr); }
  .pp-shot.tall img { max-width: 240px; }
  .pp-shot.tall figcaption { max-width: 380px; margin-left: auto; margin-right: auto; }
}
/* The header on a phone: the mark and the account (or Lock) on the first row, the restaurant on the
   next, the tabs under it. The Console's own header fills that first row with its clock and switch. */
@media (max-width: 700px) {
  .pp-head .cz-sep { display: none; }
  .pp-head .bz-spacer { order: 1; }
  .pp-head .bz-user, .pp-head .pp-lock { order: 2; }
  .pp-head .cz-select, .pp-head .cz-rest, .pp-head .cz-role, .pp-head .cz-plan { order: 3; }
}
@media (max-width: 640px) {
  .pp-h1 { font-size: 28px; }
  .pp-lead { font-size: 17px; }
  .pp-block, .pp-card { margin-top: 32px; }
  .pp-close { margin-top: 16px; }
  .pp-cta .bz-btn { flex: 1 1 auto; }
  .pp-close .bz-btn { width: 100%; }
}

/* ---------- Console: Reports (Console v2, the owner's design of 2026-10-02) ---------- */
.cz-rep { display: flex; flex-direction: column; gap: 20px; }
.cz-rep .cz-sub { overflow-wrap: anywhere; }
.cz-rep-pick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cz-rep-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bz-sunken); }
.cz-rep-seg button { height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; font-size: 16px; color: var(--bz-muted); cursor: pointer; }
.cz-rep-seg button[aria-checked="true"] { background: var(--bz-card); box-shadow: 0 1px 2px rgba(23, 20, 15, 0.1); font-weight: 600; color: var(--bz-ink); }
.cz-rep-seg.two { display: flex; flex-wrap: nowrap; }
.cz-rep-seg.two button { flex: 1 1 0; min-width: 0; height: auto; min-height: 44px; padding: 8px 10px; line-height: 1.25; text-align: center; white-space: normal; font-size: 15px; }
.cz-rep-day { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--bz-muted); }
.cz-rep-day input { height: 48px; padding: 0 10px; border: 1px solid var(--bz-field); border-radius: 10px; font-size: 16px; color: var(--bz-ink); background: var(--bz-card); outline: none; }
.cz-rep-day input:focus { border-color: var(--bz-ink); }
.cz-rep-partial { padding: 12px 16px; border-radius: 10px; background: var(--bz-warn-bg); color: #5A3E00; font-size: 15px; }
.cz-rep-partial[hidden] { display: none; }
.cz-rep-sec { display: flex; flex-direction: column; gap: 10px; }
.cz-rep h2 { margin: 0; font-size: 19px; font-weight: 600; }
.cz-rep-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.cz-rep-kpi { background: var(--bz-card); border: 1px solid var(--bz-line); border-radius: 12px; padding: 16px 18px; }
.cz-rep-kpi .l { font-size: 15px; color: var(--bz-muted); }
.cz-rep-kpi .v { margin-top: 6px; font-size: 30px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cz-rep-kpi .s { margin-top: 4px; min-height: 18px; font-size: 14px; color: var(--bz-muted); }
.cz-rep-kpi .s.good { color: var(--bz-ok-fg); }
.cz-rep-kpi .s.bad { color: var(--bz-err); }

.cz-rep-chart { padding: 18px 20px; }
.cz-rep-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.cz-rep-chart .legend { display: flex; gap: 16px; font-size: 14px; color: var(--bz-muted); }
.cz-rep-chart .legend span { display: flex; align-items: center; gap: 6px; }
.cz-rep-chart .legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--bz-ink); }
.cz-rep-chart .legend i.r { background: var(--bz-saffron); }
.cz-rep-chart .bars, .cz-rep-chart .hours { display: grid; grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); gap: 6px; }
.cz-rep-chart .bars { margin-top: 16px; height: 200px; align-items: end; border-bottom: 1px solid var(--bz-line); }
.cz-rep-chart .col { height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.cz-rep-chart .col span { width: 42%; max-width: 22px; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--bz-ink); }
.cz-rep-chart .col .r { background: var(--bz-saffron); }
.cz-rep-chart .hours { margin-top: 6px; }
.cz-rep-chart .hours span { text-align: center; font-size: 13px; color: var(--bz-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cz-rep-chart .peak { margin: 12px 0 0; font-size: 15px; color: var(--bz-muted); }
/* More than the design's twelve hours (a day that ran early or late): every other label on a phone. */
@media (max-width: 700px) { .cz-rep-chart .hours.dense span:nth-child(even) { visibility: hidden; } }

.cz-rep-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.cz-rep-lanes { overflow: hidden; }
.cz-rep-lanes .hd { padding: 16px 20px; border-bottom: 1px solid var(--bz-line-soft); }
.cz-rep-lanes .row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; min-height: 52px; padding: 0 20px; border-top: 1px solid var(--bz-line-soft); font-size: 16px; font-variant-numeric: tabular-nums; }
.cz-rep-lanes .row.th { min-height: 0; padding: 10px 20px; border-top: 0; background: var(--bz-wash); font-size: 14px; font-weight: 600; color: var(--bz-muted); }
.cz-rep-lanes .n { text-align: right; }
.cz-rep-lanes .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cz-rep-lanes .k { width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--bz-ink); color: #FFFFFF; display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.cz-rep-lanes .rg { font-size: 15px; color: var(--bz-muted); }
.cz-rep-src { padding: 16px 20px; }
.cz-rep-src h2 { margin-bottom: 12px; }
.cz-rep-src .item { padding: 8px 0; }
.cz-rep-src .top { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; }
.cz-rep-src .top .n { font-variant-numeric: tabular-nums; color: var(--bz-muted); white-space: nowrap; }
.cz-rep-src .track { margin-top: 6px; height: 10px; border-radius: 5px; background: var(--bz-sunken); overflow: hidden; }
.cz-rep-src .fill { height: 100%; border-radius: 5px; }

.cz-rep-exp { overflow: hidden; }
.cz-rep-exp .hd { padding: 16px 20px; border-bottom: 1px solid var(--bz-line-soft); }
.cz-rep-exp .hd p { margin: 3px 0 0; font-size: 15px; color: var(--bz-muted); }
.cz-rep-exp .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 72px; padding: 12px 20px; border-top: 1px solid var(--bz-line-soft); }
.cz-rep-exp .row:first-child { border-top: 0; }
.cz-rep-exp .txt { flex: 1; min-width: 220px; }
.cz-rep-exp .t { display: block; font-size: 17px; font-weight: 600; }
.cz-rep-exp .h { display: block; margin-top: 2px; font-size: 14px; color: var(--bz-muted); }
.cz-rep-go { height: 52px; min-width: 150px; padding: 0 20px; border: 1px solid var(--bz-field); border-radius: 10px; background: var(--bz-card); color: var(--bz-ink); font-size: 16px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
.cz-rep-go:hover { background: var(--bz-bg); color: var(--bz-ink); }

.cz-rep-mail { overflow: hidden; }
.cz-rep-mail .top { padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cz-rep-mail .w { flex: 1; min-width: 220px; }
.cz-rep-mail .w p { margin: 3px 0 0; font-size: 15px; color: var(--bz-muted); }
.cz-rep-mail .form { padding: 0 20px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: end; }
.cz-rep-mail .form[hidden], .cz-rep-mail .na[hidden], .cz-rep-mail .err[hidden] { display: none; }
.cz-rep-mail .f { display: flex; flex-direction: column; gap: 8px; font-size: 16px; font-weight: 500; }
.cz-rep-mail .f input { height: 52px; padding: 0 14px; border: 1px solid var(--bz-field); border-radius: 10px; background: var(--bz-card); font-size: 17px; outline: none; }
.cz-rep-mail .f input:focus { border-color: var(--bz-ink); }
.cz-rep-mail .err { grid-column: 1 / -1; font-size: 15px; font-weight: 500; color: var(--bz-err); }
.cz-rep-mail .next { grid-column: 1 / -1; font-size: 14px; color: var(--bz-muted); overflow-wrap: anywhere; }
.cz-rep-mail .na { padding: 0 20px 18px; font-size: 15px; color: var(--bz-muted); }
.cz-rep[aria-busy="true"] .cz-rep-kpis, .cz-rep[aria-busy="true"] .cz-card:not([data-print-hide]) { opacity: .6; transition: opacity .15s; }

/*
 * Printable report: only the sheet, without its export and email sections,
 * with its colours. The page margin is the report's own (a named page): the
 * walk-in ticket's print rule above sets every page's margin to 0.
 */
@media print {
  html.bz body:has(#repSheet) > :not(#repSheet) { display: none !important; }
  html.bz #repSheet, html.bz #repSheet * { visibility: visible !important; }
  html.bz #repSheet { max-width: none; padding: 0 !important; page: aycane-report; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html.bz #repSheet [data-print-hide] { display: none !important; }
  html.bz #repSheet .cz-card, html.bz #repSheet .cz-rep-sec { break-inside: avoid; }
}
@page aycane-report { margin: 12mm; }
@supports not (page: auto) { @media print { html.bz #repSheet { padding: 12mm !important; } } }