:root {
  --ink: #182520; --muted: #53625d; --subtle: #697772; --line: #d9e1dd;
  --canvas: #f6f8f6; --surface: #fff; --green: #145e4d; --green-2: #1b8068;
  --green-soft: #e8f3ef; --blue: #3478b9; --blue-soft: #edf5fc; --violet: #7858b5;
  --violet-soft: #f2eef9; --orange: #c97828; --orange-soft: #fff3e7; --rose: #ba536d;
  --rose-soft: #fbedf1; --shadow: 0 10px 35px rgba(31, 55, 45, .08);
  --font: "DM Sans", system-ui, sans-serif; --display: "Manrope", var(--font);
  --text-meta: .75rem; --text-small: .875rem; --text-body: 1rem;
  --control-height: 2.75rem; --focus-color: #16745e;
  --focus-ring: 0 0 0 3px rgba(22, 116, 94, .25);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: var(--font); color: var(--ink); background: var(--canvas); }
body { font-size: var(--text-body); line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.035em; }
h1:focus:not(:focus-visible) { outline: none; }
h1:focus { outline: none; }

.brand { height: 77px; display: flex; align-items: center; gap: 11px; padding: 0 22px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #19725d, #0e493d); font: 800 21px var(--display); box-shadow: 0 6px 16px rgba(14, 73, 61, .22); }
.brand-mark.small { width: 32px; height: 32px; border-radius: 10px; font-size: 17px; }
.brand-mark.hero { width: 62px; height: 62px; font-size: 33px; border-radius: 19px; }
.brand > div { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font: 800 20px var(--display); letter-spacing: -.04em; }
.brand small { margin-top: 5px; color: var(--subtle); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 244px; display: flex; flex-direction: column; background: #fbfcfb; border-right: 1px solid var(--line); }
.app-main { width: calc(100% - 244px); min-height: 100vh; margin-left: 244px; }
.topbar { position: sticky; z-index: 20; top: 0; height: 77px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.topbar-context { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }.topbar-date { color: #7c8983; font-size: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 17px; }
.connection-pill { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 99px; color: #49635a; background: #f0f5f2; font-size: 11px; font-weight: 600; text-decoration: none; }.connection-pill.pending { color: #88602a; background: #fff6e7; }.connection-pill.warning { color: #a1443e; background: #fff0ef; }
.connection-pill > span { width: 7px; height: 7px; border-radius: 50%; background: #26a17b; box-shadow: 0 0 0 3px #d5eee6; }
.profile-button { display: flex; align-items: center; gap: 9px; border: 0; background: none; cursor: pointer; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #e2eee9; color: var(--green); font-weight: 800; font-size: 11px; }
.profile-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.profile-copy strong { font-size: 12px; }.profile-copy small { color: var(--subtle); font-size: 10px; }
.topbar-logout { min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dbe3df; border-radius: 8px; color: #596761; background: #fff; font-size: 10px; font-weight: 700; cursor: pointer; }.topbar-logout:hover { color: #a64b58; border-color: #ebc9cf; background: #fff7f8; }
.content { width: 100%; max-width: 1540px; margin: auto; padding: 28px 30px 45px; }
.topbar .mobile-menu, .sidebar-backdrop { display: none; }

.business-badge { margin: 5px 13px 16px; padding: 11px; display: flex; align-items: center; gap: 10px; border: 1px solid #e2e9e5; background: #f3f7f5; border-radius: 12px; }
.business-badge > span, .business-badge img { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; background: #dcebe5; color: var(--green); object-fit: cover; }
.business-badge div { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.business-badge strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.business-badge small { margin-top: 2px; color: var(--subtle); font-size: 9px; }
.revenue-trend { min-height: 205px; display: flex; align-items: end; justify-content: space-around; gap: 10px; padding: 22px 20px 12px; border-top: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent 49px, #edf3f0 50px); }
.trend-column { flex: 1; min-width: 0; height: 165px; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 6px; }
.trend-column strong { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.trend-bar { width: min(38px, 75%); min-height: 7px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #2b9a7b, #17654f); box-shadow: 0 4px 10px rgba(27,128,104,.18); }
.trend-column small { color: var(--subtle); font-size: 10px; font-weight: 700; }
.branch-switcher { display: flex; flex-direction: column; gap: 5px; margin: -7px 13px 12px; color: var(--subtle); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.branch-switcher select { width: 100%; min-height: 32px; padding: 0 8px; border: 1px solid #d7e4de; border-radius: 8px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 600; }
.nav-list { flex: 1; padding: 3px 12px; overflow-y: auto; }
.nav-list a, .sidebar-footer > a { height: 41px; margin-bottom: 3px; padding: 0 11px; display: flex; align-items: center; gap: 12px; color: #64716c; border-radius: 9px; font-size: 12px; font-weight: 600; transition: .16s ease; }
.nav-list a:hover, .sidebar-footer > a:hover { color: var(--green); background: #f0f5f2; }
.nav-list a.active, .sidebar-footer > a.active { color: var(--green); background: #e5f1ed; box-shadow: inset 3px 0 var(--green-2); }
.nav-list a .icon, .sidebar-footer a .icon { width: 18px; height: 18px; }
.nav-label { padding: 17px 11px 8px; color: #a0aaa6; font-size: 8px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.sidebar-footer { padding: 11px 12px 15px; border-top: 1px solid var(--line); }
.sync-note { margin: 9px 8px 0; display: flex; gap: 7px; align-items: center; color: #93a09a; font-size: 9px; }

.eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--subtle); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow.green { color: var(--green-2); }.eyebrow.amber-text { color: var(--orange); }
.page-header { min-height: 72px; margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
.page-header h1 { margin: 5px 0 5px; font-size: 27px; line-height: 1.15; }
.page-header p { margin: 0; color: var(--muted); font-size: 12px; }
.dashboard-header { margin-bottom: 25px; }
.compact-header { margin-bottom: 19px; align-items: center; }
.button { min-height: 39px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 9px; font-size: 11px; font-weight: 700; cursor: pointer; transition: .16s ease; }
.button:hover { transform: translateY(-1px); }.button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.button.primary { color: #fff; background: var(--green); border-color: var(--green); box-shadow: 0 6px 15px rgba(20,94,77,.15); }
.button.primary:hover { background: #0d5041; }
.button.secondary { color: #50605a; background: #fff; border-color: #dce3df; }
.button.secondary:hover { border-color: #bfcac5; }
.button.large { min-height: 47px; padding: 0 22px; font-size: 12px; border-radius: 11px; }
.button.icon-only { width: 42px; padding: 0; }
.icon-button { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); cursor: pointer; }
.text-button { padding: 4px; border: 0; color: var(--green-2); background: none; font-size: 10px; font-weight: 700; cursor: pointer; }
.text-button.danger { color: #b45c66; }.text-button:disabled { opacity: .4; }
.text-link { display: inline-flex; align-items: center; gap: 5px; color: var(--green-2); font-size: 10px; font-weight: 700; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 17px; }
.metric-card { position: relative; min-height: 135px; padding: 18px 17px 15px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 4px 16px rgba(35,55,47,.03); }
.metric-card > span { margin: 15px 0 4px; color: var(--muted); font-size: 10px; font-weight: 600; }
.metric-card > strong { font: 800 21px var(--display); letter-spacing: -.04em; }
.metric-card > small { margin-top: 5px; color: var(--subtle); font-size: 9px; }
.metric-icon, .quick-icon, .report-icon { width: 35px; height: 35px; display: grid; place-items: center; color: var(--green-2); background: var(--green-soft); border-radius: 10px; }
.metric-icon { position: absolute; right: 15px; top: 15px; }
.metric-icon.blue, .quick-icon.blue, .report-icon.blue { color: var(--blue); background: var(--blue-soft); }
.metric-icon.violet, .quick-icon.violet, .report-icon.violet { color: var(--violet); background: var(--violet-soft); }
.metric-icon.orange, .quick-icon.amber, .quick-icon.orange, .report-icon.orange { color: var(--orange); background: var(--orange-soft); }
.metric-icon.rose, .quick-icon.rose, .report-icon.rose { color: var(--rose); background: var(--rose-soft); }
.metric-icon.slate, .quick-icon.slate, .report-icon.slate { color: #5d7068; background: #eef2f0; }
.workspace-preview { margin-top: 22px; padding: 18px; border: 1px solid #dfe9e4; border-radius: 14px; background: #f7fbf8; }
.workspace-preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.workspace-preview-heading h3 { margin: 3px 0 0; font: 800 15px var(--display); }
.workspace-module-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.workspace-module-list span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid #dbe8e1; border-radius: 8px; color: var(--green-2); background: #fff; font-size: 10px; font-weight: 700; }
.workspace-preview > small { color: var(--subtle); font-size: 10px; line-height: 1.5; }
.metric-card.skeleton, .item-card.skeleton { min-height: 135px; border: 0; background: linear-gradient(90deg,#edf1ef 25%,#f6f8f7 50%,#edf1ef 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, .8fr); gap: 17px; }
.panel { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 4px 18px rgba(31,55,45,.035); }
.panel-heading { min-height: 67px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0ee; }
.panel-heading h2 { margin: 0 0 4px; font-size: 14px; }.panel-heading p { margin: 0; color: var(--subtle); font-size: 9px; }
.select-button { padding: 7px 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #fff; border-radius: 7px; color: var(--muted); font-size: 9px; }
.chart-panel { min-height: 300px; }.quick-panel { min-height: 300px; }
.chart-empty { position: relative; height: 224px; padding: 22px 18px 25px; overflow: hidden; }
.chart-empty svg { position: relative; width: 100%; height: 160px; z-index: 2; }
.chart-gridlines { position: absolute; inset: 25px 18px 38px; display: flex; flex-direction: column; justify-content: space-between; }
.chart-gridlines i { border-top: 1px dashed #e8ecea; }
.chart-labels { display: flex; justify-content: space-between; color: #a2aca8; font-size: 8px; }
.quick-actions { padding: 7px 13px; }
.quick-actions a { padding: 10px 4px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid #f0f2f1; }
.quick-actions a:last-child { border-bottom: 0; }.quick-actions a > .icon { color: #a6afab; }
.quick-actions a div { display: flex; flex-direction: column; gap: 3px; }.quick-actions strong { font-size: 10px; }.quick-actions small { color: var(--subtle); font-size: 8px; }
.recent-panel { min-height: 280px; }.setup-panel { min-height: 280px; display: grid; grid-template-columns: 110px 1fr; align-content: start; }
.setup-panel .panel-heading { grid-column: 1/-1; }.health-ring { padding: 33px 14px 15px 22px; }
.health-ring > div { width: 74px; height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 8px solid #dceee7; border-right-color: var(--green-2); border-radius: 50%; transform: rotate(-30deg); }
.health-ring strong, .health-ring span { transform: rotate(30deg); }.health-ring strong { font: 800 17px var(--display); }.health-ring span { color: var(--subtle); font-size: 8px; }
.health-copy { padding: 33px 20px 15px 2px; }.health-copy strong { font-size: 10px; }.health-copy p { margin: 6px 0 11px; color: var(--muted); font-size: 9px; line-height: 1.55; }

.table-wrap { width: 100%; overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th { padding: 10px 18px; text-align: left; color: #98a29e; background: #fafbfa; border-bottom: 1px solid #edf0ee; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; } td { padding: 13px 18px; border-bottom: 1px solid #f0f2f1; color: var(--muted); font-size: 9px; } tr:last-child td { border-bottom: 0; } td strong { color: var(--ink); }.right { text-align: right; }
.status { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 99px; font-size: 8px; font-weight: 700; }.status.neutral { color: #63706b; background: #f0f3f1; }.status.success { color: #177458; background: #e7f4ef; }
.empty-state { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-state > span, .cart-empty > span { width: 48px; height: 48px; margin-bottom: 13px; display: grid; place-items: center; border-radius: 14px; color: var(--green-2); background: var(--green-soft); }
.empty-state h1, .empty-state h2 { margin: 0 0 6px; font-size: 17px; }.empty-state strong { margin-bottom: 5px; font-size: 10px; }.empty-state p { max-width: 360px; margin: 0 0 14px; color: var(--subtle); font-size: 9px; line-height: 1.55; }
.empty-state.compact { min-height: 190px; padding: 25px; }.empty-state.large { min-height: 340px; }

/* Onboarding */
.onboarding-shell { min-height: 100vh; background: #fbfcfb; }
.onboarding-topbar { height: 76px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0ee; }
.onboarding-brand { padding: 0; height: auto; }.setup-progress-label { color: var(--subtle); font-size: 10px; font-weight: 600; }
.welcome-screen { max-width: 1200px; min-height: calc(100vh - 76px); margin: auto; padding: 7vh 5vw; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 7vw; }
.welcome-copy { max-width: 570px; }.welcome-kicker { padding: 7px 11px; display: inline-flex; align-items: center; gap: 7px; color: var(--green-2); background: var(--green-soft); border-radius: 99px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.welcome-copy h1 { margin: 22px 0 18px; font-size: clamp(38px, 4.4vw, 61px); line-height: 1.05; letter-spacing: -.055em; }.welcome-copy > p { max-width: 515px; margin-bottom: 28px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.welcome-assurances { margin-top: 27px; display: flex; flex-wrap: wrap; gap: 17px; color: #66766f; font-size: 9px; font-weight: 600; }.welcome-assurances span { display: flex; align-items: center; gap: 5px; }.welcome-assurances .icon { color: var(--green-2); }
.welcome-visual { position: relative; min-height: 485px; }
.orbit { position: absolute; inset: 13% 8%; border: 1px dashed #d9e6e1; border-radius: 50%; }.orbit-two { inset: 27% 23%; }
.visual-center { position: absolute; z-index: 2; inset: 50% auto auto 50%; width: 165px; height: 165px; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #dfe9e5; background: rgba(255,255,255,.95); border-radius: 50%; box-shadow: 0 22px 55px rgba(25,70,55,.13); }.visual-center strong { margin-top: 13px; font: 700 12px var(--display); }.visual-center small { margin-top: 4px; color: var(--subtle); font-size: 8px; }
.business-card { position: absolute; z-index: 3; width: 165px; padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #e2e9e6; background: #fff; border-radius: 13px; box-shadow: var(--shadow); }.business-card div { display: flex; flex-direction: column; }.business-card strong { font-size: 10px; }.business-card small { margin-top: 3px; color: var(--subtle); font-size: 8px; }
.visual-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--green-2); background: var(--green-soft); border-radius: 10px; }.visual-icon.violet { color: var(--violet); background: var(--violet-soft); }.visual-icon.amber { color: var(--orange); background: var(--orange-soft); }.visual-icon.rose { color: var(--rose); background: var(--rose-soft); }
.card-retail { top: 4%; left: 3%; }.card-salon { top: 12%; right: 0; }.card-hotel { bottom: 9%; left: 0; }.card-restaurant { right: 2%; bottom: 2%; }
.wizard-wrap { width: min(760px, calc(100% - 36px)); margin: 33px auto 50px; }.wizard-wrap.wide { width: min(1040px, calc(100% - 36px)); }
.wizard-progress { height: 4px; margin-bottom: 21px; overflow: hidden; background: #e7ebe9; border-radius: 99px; }.wizard-progress span { height: 100%; display: block; background: var(--green-2); border-radius: inherit; transition: width .3s ease; }
.wizard-panel { padding: 34px 39px; border: 1px solid var(--line); background: #fff; border-radius: 17px; box-shadow: var(--shadow); }.wizard-panel.narrow-panel { max-width: 660px; margin: auto; }.wizard-panel.summary-panel { text-align: center; }
.wizard-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 28px; }.wizard-heading.centered { max-width: 610px; margin: 0 auto 28px; justify-content: center; text-align: center; }.wizard-heading.centered .step-icon { display: none; }
.wizard-heading h1 { margin: 5px 0 7px; font-size: 25px; }.wizard-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.step-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: var(--green-2); background: var(--green-soft); border-radius: 12px; }
.wizard-actions { padding: 18px 3px; display: flex; align-items: center; justify-content: space-between; }
.alert-message { margin-bottom: 15px; padding: 11px 13px; display: flex; align-items: center; gap: 8px; color: #9d4653; background: #fbedef; border: 1px solid #f2dce1; border-radius: 9px; font-size: 10px; }
.business-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }.business-info-grid .full { grid-column: 1/-1; }
.field { display: flex; flex-direction: column; gap: 6px; }.field > span { color: #52615b; font-size: 9px; font-weight: 700; }.field > span b { color: #b75c69; }.field > small { color: var(--subtle); font-size: 8px; line-height: 1.45; }
.field input, .field select { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #dce3df; outline: 0; background: #fff; border-radius: 8px; color: var(--ink); font-size: 10px; transition: .15s; }.field input::placeholder { color: #abb4b0; }.field input:focus, .field select:focus { border-color: #60a18f; box-shadow: 0 0 0 3px #e6f2ee; }.field input:disabled { color: #7d8884; background: #f5f7f6; }
.section-divider { margin: 26px 0 13px; display: flex; align-items: center; gap: 10px; color: var(--subtle); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.section-divider::after { content:""; height: 1px; flex: 1; background: var(--line); }
.type-filters { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 10px; }.filter-chip { padding: 6px 10px; white-space: nowrap; color: var(--muted); border: 1px solid #e1e6e3; background: #fff; border-radius: 99px; font-size: 8px; font-weight: 700; cursor: pointer; }.filter-chip.active { color: #fff; border-color: var(--green); background: var(--green); }
.business-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }.business-type-card { position: relative; min-height: 91px; padding: 12px; display: flex; align-items: flex-start; gap: 9px; text-align: left; border: 1px solid #e0e6e3; background: #fff; border-radius: 10px; cursor: pointer; }.business-type-card:hover { border-color: #a8c8bd; background: #fcfefd; }.business-type-card.selected { border-color: var(--green-2); background: #f4faf8; box-shadow: 0 0 0 2px #e4f1ed; }
.type-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: var(--green-2); background: var(--green-soft); border-radius: 9px; }.type-icon.large { width: 47px; height: 47px; border-radius: 12px; }
.business-type-card > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }.business-type-card strong { font-size: 9px; line-height: 1.25; }.business-type-card small { margin-top: 4px; color: var(--subtle); font-size: 7px; line-height: 1.35; }.business-type-card i { position: absolute; top: 7px; right: 7px; width: 17px; height: 17px; display: none; place-items: center; color: #fff; background: var(--green-2); border-radius: 50%; }.business-type-card.selected i { display: grid; }
.question-list { display: flex; flex-direction: column; gap: 9px; }.question-row { width: 100%; min-height: 69px; padding: 12px 14px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 11px; text-align: left; border: 1px solid #e0e6e3; background: #fff; border-radius: 11px; cursor: pointer; }.question-row.yes { border-color: #a5cfc1; background: #f5faf8; }.question-row.compact { min-height: 62px; }
.capability-selection-note { margin-bottom: 18px; padding: 12px 14px; display: flex; gap: 9px; align-items: flex-start; color: #49685e; background: #eef7f3; border-radius: 9px; font-size: 9px; line-height: 1.5; }.capability-selection-note .icon { color: var(--green-2); flex: 0 0 auto; }.onboarding-capability-group { padding: 0 0 18px; }.capability-group-heading { margin-bottom: 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }.capability-group-heading h3 { margin: 0; color: var(--subtle); font: 800 8px var(--font); letter-spacing: .1em; text-transform: uppercase; }.capability-group-heading small { color: var(--subtle); font-size: 8px; }
.restaurant-routing-choice { margin: 0 0 20px; padding: 18px; border: 1px solid #f0d9d3; border-radius: 14px; background: linear-gradient(135deg, #fffaf8, #fff); }.restaurant-routing-choice h3 { margin: 4px 0 4px; font-size: 16px; }.restaurant-routing-choice p { margin: 0; color: var(--muted); font-size: 10px; }.restaurant-routing-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }.restaurant-routing-option { min-height: 96px; padding: 12px; display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; border: 1px solid #e2e6e3; border-radius: 11px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; transition: .15s ease; }.restaurant-routing-option:hover { border-color: #c6aaa0; transform: translateY(-1px); }.restaurant-routing-option.selected { border: 2px solid #b85d48; background: #fff7f4; box-shadow: 0 4px 12px rgba(125, 56, 38, .08); }.restaurant-routing-option .type-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #a54d3a; background: #f9e5df; }.restaurant-routing-option > span:last-child { display: flex; flex-direction: column; gap: 4px; }.restaurant-routing-option strong { font-size: 10px; }.restaurant-routing-option small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.question-check { width: 24px; height: 24px; display: grid; place-items: center; color: transparent; border: 1px solid #cfd8d4; border-radius: 7px; }.question-row.yes .question-check { color: #fff; border-color: var(--green-2); background: var(--green-2); }.question-row > span:nth-child(2) { display: flex; flex-direction: column; }.question-row strong { font-size: 10px; }.question-row small { margin-top: 4px; color: var(--subtle); font-size: 8px; line-height: 1.4; }.yes-no { min-width: 35px; color: var(--subtle); font-size: 9px; font-weight: 800; }.question-row.yes .yes-no { color: var(--green-2); }
.smart-note, .privacy-note, .printer-skip, .info-strip { margin-top: 17px; padding: 11px 13px; display: flex; align-items: flex-start; gap: 9px; color: #49685e; background: #eef7f3; border-radius: 9px; font-size: 9px; line-height: 1.5; }.smart-note .icon, .privacy-note .icon, .printer-skip .icon, .info-strip .icon { color: var(--green-2); flex: 0 0 auto; }
.setup-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }.setup-choice { position: relative; min-height: 140px; padding: 18px 13px; display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid #dfe5e2; background: #fff; border-radius: 12px; cursor: pointer; }.setup-choice:hover, .setup-choice.selected { border-color: #78ad9d; background: #f7fbf9; }.setup-choice input[type=file], .logo-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }.setup-choice > span { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 10px; color: var(--green-2); background: var(--green-soft); border-radius: 10px; }.setup-choice strong { font-size: 10px; }.setup-choice small { margin-top: 5px; color: var(--subtle); font-size: 8px; line-height: 1.45; }.starter-box { margin-top: 15px; padding: 14px; background: #f8faf9; border: 1px solid #e5eae7; border-radius: 10px; }.starter-box > small { display: block; margin-top: 5px; color: var(--subtle); font-size: 8px; }.tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }.tag-list span { padding: 5px 8px; color: #437263; background: #e8f3ef; border-radius: 99px; font-size: 8px; }.skip-link { width: 100%; margin-top: 15px; color: var(--subtle); }
.starter-menu-heading { margin-bottom: 11px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.starter-menu-heading div { display: flex; flex-direction: column; }.starter-menu-heading strong { font-size: 11px; }.starter-menu-heading small { max-width: 390px; margin-top: 3px; color: var(--subtle); font-size: 8px; line-height: 1.45; }.starter-menu-heading > span { padding: 5px 7px; color: var(--green-2); background: var(--green-soft); border-radius: 6px; font-size: 8px; font-weight: 800; }.starter-menu-grid { display: flex; flex-direction: column; gap: 7px; }.starter-menu-labels,.starter-menu-row { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(100px,.8fr) 100px 34px; gap: 7px; align-items: center; }.starter-menu-labels { padding: 0 2px; color: var(--subtle); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.starter-menu-row input { width: 100%; height: 37px; padding: 0 9px; border: 1px solid #dce3df; border-radius: 7px; outline: 0; background: #fff; font-size: 9px; }.starter-menu-row input:focus { border-color: #60a18f; box-shadow: 0 0 0 3px #e6f2ee; }.starter-menu-row .icon-button { width: 34px; height: 34px; }.starter-menu-add { margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; }
.starter-table-builder { margin-top: 18px; padding-top: 15px; border-top: 1px solid #dfe7e3; }.starter-table-grid { display: flex; flex-direction: column; gap: 7px; }.starter-table-labels,.starter-table-row { display: grid; grid-template-columns: minmax(0,1fr) 100px 34px; gap: 7px; align-items: center; }.starter-table-labels { padding: 0 2px; color: var(--subtle); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.starter-table-row input { width: 100%; height: 37px; padding: 0 9px; border: 1px solid #dce3df; border-radius: 7px; background: #fff; font-size: 9px; }.starter-table-row .icon-button { width: 34px; height: 34px; }
.starter-menu-labels.starter-catalog-labels,.starter-menu-row.starter-catalog-row { grid-template-columns: minmax(0,1.25fr) minmax(88px,.75fr) 86px 34px; }.starter-menu-labels.starter-catalog-labels:has(span:nth-child(5)),.starter-menu-row.starter-catalog-row:has(input:nth-child(4)) { grid-template-columns: minmax(0,1.1fr) minmax(76px,.65fr) 78px 88px 34px; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }.two-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.receipt-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 30px; }.logo-upload { position: relative; min-height: 70px; padding: 11px 13px; display: flex; align-items: center; gap: 12px; border: 1px dashed #c8d5d0; border-radius: 10px; cursor: pointer; }.logo-upload > span { display: flex; flex-direction: column; }.logo-upload > span > .icon { margin-bottom: 4px; color: var(--green-2); }.logo-upload strong { font-size: 9px; }.logo-upload small { margin-top: 3px; color: var(--subtle); font-size: 8px; }.logo-upload img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; }
.receipt-preview { position: relative; min-height: 340px; padding: 28px 22px 20px; text-align: center; border: 1px solid #e4e7e5; background: #fdfdfc; box-shadow: 0 7px 24px rgba(37,54,47,.08); }.preview-label { position: absolute; top: 8px; right: 9px; color: #b2b9b6; font-size: 7px; letter-spacing: .12em; }.receipt-preview img { width: 42px; height: 42px; object-fit: contain; }.receipt-logo { width: 37px; height: 37px; margin: auto; display: grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 9px; }.receipt-preview h3 { margin: 9px 0 4px; font-size: 12px; }.receipt-preview p { margin: 0; color: #747f7b; font-size: 7px; line-height: 1.5; }.receipt-preview > small { color: #8f9894; font-size: 7px; }.receipt-rule { margin: 15px 0 11px; border-top: 1px solid #dfe3e1; }.receipt-rule.dotted { border-top-style: dashed; }.receipt-line, .receipt-total { display: flex; justify-content: space-between; font-size: 7px; }.receipt-total { align-items: center; }.receipt-total strong { font-size: 10px; }.receipt-footer-copy { margin-top: 20px !important; }
.completion-icon { width: 67px; height: 67px; margin: 0 auto 20px; display: grid; place-items: center; color: #fff; background: var(--green-2); border: 8px solid #ddf0e9; border-radius: 50%; }.summary-panel > h1 { margin: 6px 0 7px; font-size: 27px; }.summary-panel > p { color: var(--muted); font-size: 11px; }.summary-card { max-width: 590px; margin: 25px auto 17px; padding: 18px 20px; text-align: left; border: 1px solid #e0e6e3; border-radius: 13px; background: #fbfcfb; }.summary-business { display: flex; gap: 12px; align-items: center; }.summary-business > div { display: flex; flex-direction: column; }.summary-business small, .summary-label { color: #9aa49f; font-size: 7px; font-weight: 800; letter-spacing: .12em; }.summary-business strong { margin: 2px 0; font: 700 13px var(--display); }.summary-business span { color: var(--muted); font-size: 8px; }.summary-divider { margin: 15px 0; border-top: 1px solid var(--line); }.capability-summary { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }.capability-summary span { padding: 5px 7px; display: inline-flex; gap: 4px; align-items: center; color: #3d6b5d; background: #e9f4f0; border-radius: 6px; font-size: 8px; }.ready-note { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 8px; }

/* Checkout */
.checkout-page { min-height: calc(100vh - 150px); display: grid; grid-template-columns: minmax(0, 1fr) 355px; gap: 18px; }.checkout-catalog { min-width: 0; }.cart-panel { min-height: calc(100vh - 135px); display: flex; flex-direction: column; position: sticky; top: 96px; max-height: calc(100vh - 116px); border: 1px solid var(--line); background: #fff; border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.order-type-switch, .segmented-control { padding: 3px; display: flex; background: #edf1ef; border-radius: 9px; }.order-type-switch button, .segmented-control button { padding: 7px 11px; border: 0; color: var(--muted); background: transparent; border-radius: 7px; font-size: 9px; font-weight: 700; cursor: pointer; }.order-type-switch button.active, .segmented-control button.active { color: var(--green); background: #fff; box-shadow: 0 2px 7px rgba(35,55,47,.08); }
.context-selector { width: 100%; margin-bottom: 13px; padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; text-align: left; border: 1px solid #dfe6e2; background: #fff; border-radius: 10px; cursor: pointer; }.context-selector > span { display: flex; align-items: center; gap: 10px; }.context-selector > span > .icon { color: var(--green-2); }.context-selector div { display: flex; flex-direction: column; }.context-selector small { color: var(--subtle); font-size: 7px; letter-spacing: .1em; }.context-selector strong { margin-top: 3px; font-size: 9px; }.checkout-context-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.context-selector.small { min-width: 0; }
.catalog-toolbar, .list-toolbar { margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }.search-box { height: 42px; min-width: 0; flex: 1; padding: 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid #dce3df; background: #fff; border-radius: 9px; }.search-box:focus-within { border-color: #65a08f; box-shadow: 0 0 0 3px #e6f2ee; }.search-box .icon { color: #93a09a; }.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: none; font-size: 10px; }.search-box input::placeholder { color: #9fa9a5; }.search-box kbd, .keyboard-hint kbd { padding: 2px 5px; color: #87928e; border: 1px solid #dfe4e2; background: #f5f7f6; border-radius: 4px; font: 8px var(--font); box-shadow: 0 1px #d9deda; }
.category-tabs { margin-bottom: 13px; display: flex; gap: 6px; overflow-x: auto; }.category-tabs button { padding: 6px 11px; white-space: nowrap; border: 1px solid #dfe5e2; color: var(--muted); background: #fff; border-radius: 99px; font-size: 8px; font-weight: 700; }.category-tabs button.active { color: #fff; border-color: var(--green); background: var(--green); }
.catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }.item-card { position: relative; min-height: 157px; padding: 13px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 1px solid #e0e6e3; background: #fff; border-radius: 12px; cursor: pointer; transition: .15s ease; }.item-card:hover { transform: translateY(-2px); border-color: #a7c9be; box-shadow: 0 8px 22px rgba(33,65,53,.08); }.item-avatar { width: 38px; height: 38px; display: grid; place-items: center; color: var(--green-2); background: var(--green-soft); border-radius: 10px; }.item-avatar.violet { color: var(--violet); background: var(--violet-soft); }.item-avatar.rose { color: var(--rose); background: var(--rose-soft); }.item-avatar.amber { color: var(--orange); background: var(--orange-soft); }
.item-card-copy { margin: 12px 0 7px; display: flex; flex-direction: column; min-width: 0; }.item-card-copy strong { overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 1.35; }.item-card-copy small { margin-top: 3px; color: var(--subtle); font-size: 8px; }.item-card-price { font-size: 10px; font-weight: 800; }.stock-badge { position: absolute; top: 12px; right: 11px; padding: 3px 5px; color: #568072; background: #edf6f2; border-radius: 5px; font-size: 7px; }.stock-badge.low { color: #a36224; background: #fff2e4; }.stock-badge.service { color: #7658a7; background: #f1edf8; }
.cart-heading { min-height: 64px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.cart-heading > div { display: flex; align-items: center; gap: 8px; }.cart-heading h2 { margin: 0; font-size: 13px; }.line-count { padding: 3px 6px; color: var(--green-2); background: var(--green-soft); border-radius: 99px; font-size: 7px; font-weight: 800; }
.cart-empty { flex: 1; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.cart-empty strong { font-size: 10px; }.cart-empty p { max-width: 220px; margin: 6px 0; color: var(--subtle); font-size: 9px; line-height: 1.5; }.cart-lines { flex: 1; padding: 5px 14px; overflow-y: auto; }.cart-line { padding: 12px 1px; border-bottom: 1px solid #edf0ee; }.cart-line-top, .cart-line-bottom { display: flex; align-items: center; justify-content: space-between; }.cart-line-top div { display: flex; flex-direction: column; }.cart-line-top strong { font-size: 9px; }.cart-line-top small { margin-top: 3px; color: var(--subtle); font-size: 8px; }.remove-button { width: 25px; height: 25px; display: grid; place-items: center; border: 0; color: #a3aca9; background: none; border-radius: 6px; }.remove-button:hover { color: #b34b59; background: #faedef; }.cart-line-bottom { margin-top: 10px; }.cart-line-bottom > strong { font-size: 10px; }.quantity-stepper { height: 28px; display: flex; border: 1px solid #dde3e0; border-radius: 7px; overflow: hidden; }.quantity-stepper button { width: 27px; display: grid; place-items: center; border: 0; background: #f6f8f7; }.quantity-stepper input { width: 40px; text-align: center; border: 0; border-inline: 1px solid #e2e7e4; outline: 0; font-size: 9px; }
.cart-summary { padding: 12px 16px 5px; border-top: 1px solid var(--line); }.cart-summary > div, .summary-action { width: 100%; padding: 5px 0; display: flex; justify-content: space-between; border: 0; background: none; color: var(--muted); font-size: 9px; }.summary-action > span:last-child { display: flex; gap: 4px; align-items: center; color: var(--green-2); font-weight: 700; }.cart-summary .grand-total { margin-top: 8px; padding: 12px 0 5px; border-top: 1px dashed #dce2df; align-items: flex-end; }.grand-total span { color: var(--ink); font-weight: 700; }.grand-total strong { color: var(--ink); font: 800 19px var(--display); }.checkout-button { margin: 8px 14px; min-height: 47px; justify-content: space-between; }.keyboard-hint { padding: 2px 15px 12px; display: flex; justify-content: center; gap: 14px; color: var(--subtle); font-size: 7px; }.keyboard-hint span { display: flex; align-items: center; gap: 5px; }

/* Catalog, settings, modules */
.info-strip { margin: 0 0 16px; }.list-panel { overflow: hidden; }.list-toolbar { min-height: 66px; margin: 0; padding: 12px 15px; justify-content: space-between; border-bottom: 1px solid var(--line); }.list-toolbar .search-box { max-width: 410px; }.table-loader { min-height: 280px; display: grid; place-items: center; color: var(--subtle); font-size: 10px; }.table-item { display: flex; align-items: center; gap: 9px; }.table-item .item-avatar { width: 32px; height: 32px; }.table-item > div { display: flex; flex-direction: column; }.table-item small { margin-top: 3px; color: var(--subtle); font-size: 8px; }.stock-text { color: #427364; font-weight: 700; }.stock-text.low { color: var(--orange); }.muted { color: var(--subtle); }
.modal-layer { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; }.modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(15,28,23,.5); backdrop-filter: blur(3px); }.modal { position: relative; z-index: 2; width: min(580px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 16px; background: #fff; box-shadow: 0 28px 80px rgba(12,30,23,.25); animation: modalIn .18s ease; }.modal > header { min-height: 82px; padding: 20px 23px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); }.modal header h2 { margin: 4px 0 4px; font-size: 19px; }.modal header p { margin: 0; color: var(--muted); font-size: 9px; }.modal > .form-stack, .item-modal > .form-stack { padding: 20px 23px; }.modal > footer { padding: 14px 23px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }.modal .alert-message { margin: 14px 23px 0; }.type-selector { margin: 17px 23px 0; padding: 3px; display: flex; gap: 3px; background: #f0f3f1; border-radius: 9px; }.type-selector button { flex: 1; padding: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; color: var(--muted); border-radius: 7px; font-size: 9px; font-weight: 700; }.type-selector button.active { color: var(--green); background: #fff; box-shadow: 0 2px 7px rgba(35,55,47,.08); }.input-prefix, .input-suffix { display: flex; height: 40px; border: 1px solid #dce3df; border-radius: 8px; overflow: hidden; }.input-prefix span, .input-suffix span { padding: 0 10px; display: grid; place-items: center; color: var(--muted); background: #f3f5f4; border-right: 1px solid #dce3df; font-size: 8px; font-weight: 700; }.input-suffix span { border: 0; border-left: 1px solid #dce3df; }.input-prefix input, .input-suffix input { height: 100%; border: 0; border-radius: 0; }
@keyframes modalIn { from { opacity:0; transform: translateY(8px) scale(.985); } }
.payment-modal { width: min(525px, 100%); }.amount-due { margin: 19px 23px 14px; padding: 15px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); background: #f5f8f6; border-radius: 10px; font-size: 10px; }.amount-due strong { color: var(--ink); font: 800 20px var(--display); }.payment-method-grid { padding: 0 23px 17px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.payment-method { position: relative; min-height: 79px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid #dfe5e2; background: #fff; border-radius: 10px; }.payment-method > span { width: 27px; height: 27px; display: grid; place-items: center; color: var(--green-2); background: var(--green-soft); border-radius: 7px; font-size: 8px; font-weight: 800; }.payment-method strong { font-size: 9px; }.payment-method i { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; display: none; place-items: center; color: #fff; background: var(--green-2); border-radius: 50%; }.payment-method.selected { border-color: var(--green-2); background: #f7fbf9; }.payment-method.selected i { display: grid; }.payment-modal > .field { margin: 0 23px 20px; }
.toast { position: fixed; z-index: 120; right: 22px; bottom: 22px; min-width: 320px; padding: 12px 13px; display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 9px; color: #2c584a; background: #eff9f5; border: 1px solid #cce8dd; border-radius: 11px; box-shadow: var(--shadow); }.toast > div { display: flex; flex-direction: column; }.toast strong { font-size: 9px; }.toast span { margin-top: 3px; font-size: 8px; }.toast button { border: 0; background: none; color: #729087; }
.settings-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 18px; align-items: start; }.settings-nav { position: sticky; top: 97px; padding: 7px; display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; border-radius: 12px; }.settings-nav button { min-height: 41px; padding: 0 10px; display: flex; align-items: center; gap: 10px; text-align: left; border: 0; color: var(--muted); background: none; border-radius: 8px; font-size: 9px; font-weight: 700; }.settings-nav button.active { color: var(--green); background: var(--green-soft); }.settings-nav .icon { width: 17px; }.settings-content { min-width: 0; }.settings-panel { padding-bottom: 22px; }.settings-heading { min-height: 78px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.settings-heading h2 { margin: 0 0 4px; font-size: 16px; }.settings-heading p { margin: 0; color: var(--muted); font-size: 9px; }.profile-summary { margin: 20px 22px; padding: 15px; display: flex; align-items: center; gap: 12px; background: #f4f8f6; border-radius: 11px; }.profile-summary > div { display: flex; flex-direction: column; }.profile-summary small { color: var(--subtle); font-size: 7px; font-weight: 800; letter-spacing: .1em; }.profile-summary h3 { margin: 3px 0 2px; font-size: 14px; }.profile-summary span { color: var(--muted); font-size: 8px; }.settings-panel > .form-stack { padding: 0 22px; }.settings-note, .technical-hidden { margin: 20px 22px 0; padding: 13px; display: flex; gap: 10px; background: #f7f8f7; border: 1px solid var(--line); border-radius: 9px; }.settings-note .icon, .technical-hidden .icon { color: var(--green-2); }.settings-note strong, .technical-hidden strong { font-size: 9px; }.settings-note p, .technical-hidden p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }.capability-count { margin: 17px 22px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; background: #f5f8f6; border-radius: 8px; }.capability-count span { color: var(--green); font-size: 9px; }.capability-count strong { font-size: 15px; }.capability-count small { color: var(--subtle); font-size: 8px; }.capability-group { padding: 0 22px 16px; }.capability-group h3 { margin: 0 0 8px; color: var(--subtle); font: 800 8px var(--font); letter-spacing: .1em; text-transform: uppercase; }.capability-toggle-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }.capability-toggle { min-height: 58px; padding: 10px 11px; display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid #e3e8e5; background: #fff; border-radius: 9px; }.capability-toggle.enabled { background: #f9fcfb; border-color: #cee1da; }.capability-toggle > span:last-child { display: flex; flex-direction: column; }.capability-toggle strong { font-size: 9px; }.capability-toggle small { margin-top: 3px; color: var(--subtle); font-size: 7px; line-height: 1.35; }.toggle, .toggle-button { width: 29px; height: 17px; padding: 2px; display: flex; flex: 0 0 auto; border: 0; background: #cfd7d3; border-radius: 99px; }.toggle i, .toggle-button i { width: 13px; height: 13px; display: block; background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.15); }.capability-toggle.enabled .toggle, .toggle-button.on { background: var(--green-2); }.capability-toggle.enabled .toggle i, .toggle-button.on i { transform: translateX(12px); }.settings-panel > .info-strip { margin: 17px 22px; }.payment-settings-list { padding: 0 22px; }.payment-setting { padding: 10px 0; display: grid; grid-template-columns: 37px 1fr auto; gap: 10px; align-items: center; border-bottom: 1px solid #edf0ee; }.payment-setting .field { max-width: 330px; }.offline-card { margin: 22px; padding: 17px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; border: 1px solid #cee3db; background: #f5fbf8; border-radius: 11px; }.offline-card .metric-icon { position: static; }.offline-card strong { font-size: 10px; }.offline-card p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }.saved-message { display: flex; align-items: center; gap: 6px; color: var(--green-2); font-size: 9px; font-weight: 700; }.confirmation-modal { width: min(450px, 100%); padding-bottom: 17px; }.warning-box { margin: 17px 23px; padding: 13px; display: flex; gap: 10px; color: #744e2d; background: #fff5e9; border-radius: 9px; }.warning-box p { margin: 0; font-size: 9px; line-height: 1.55; }.stacked-actions { padding: 0 23px !important; display: grid !important; }.stacked-actions .button { width: 100%; }.mini-metric-grid { margin-bottom: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.mini-metric-grid article { padding: 14px 16px; display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; border-radius: 11px; }.mini-metric-grid span { color: var(--muted); font-size: 9px; }.mini-metric-grid strong { margin: 6px 0 3px; font: 800 20px var(--display); }.mini-metric-grid small { color: var(--subtle); font-size: 8px; }.date-strip { margin-bottom: 14px; padding: 9px; display: flex; justify-content: center; gap: 7px; border: 1px solid var(--line); background: #fff; border-radius: 11px; }.date-strip > span { width: 50px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; }.date-strip span.active { color: #fff; background: var(--green); }.date-strip small { font-size: 7px; }.date-strip strong { margin-top: 3px; font-size: 11px; }.date-strip button { border: 0; background: none; color: var(--muted); }.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 17px; }.report-card { min-height: 83px; padding: 13px; display: grid; grid-template-columns: 39px 1fr auto; gap: 11px; align-items: center; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 11px; }.report-card > div { display: flex; flex-direction: column; }.report-card strong { font-size: 9px; }.report-card small { margin-top: 4px; color: var(--subtle); font-size: 8px; }.report-card > .icon { color: #a1aaa6; }.report-preview { min-height: 280px; }
.page-loader { width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; color: var(--subtle); }.page-loader p { font-size: 10px; }

@media (min-width: 1280px) { .metric-grid { grid-template-columns: repeat(6, 1fr); }.catalog-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1060px) { .business-type-grid { grid-template-columns: repeat(3, 1fr); }.catalog-grid { grid-template-columns: repeat(3, 1fr); }.metric-grid { grid-template-columns: repeat(2, 1fr); }.report-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 850px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }.app-main { width: 100%; margin-left: 0; }.app-shell.sidebar-open .sidebar { transform: none; }.sidebar-backdrop { position: fixed; z-index: 25; inset: 0; border: 0; background: rgba(10,25,19,.38); }.app-shell.sidebar-open .sidebar-backdrop { display: block; }.topbar .mobile-menu { display: grid; }.topbar { height: 65px; padding: 0 17px; }.content { padding: 22px 18px 38px; }.topbar-context { display: none; }
  .welcome-screen { grid-template-columns: 1fr; padding-top: 45px; text-align: center; }.welcome-copy { margin: auto; }.welcome-copy > p { margin-inline: auto; }.welcome-assurances { justify-content: center; }.welcome-visual { min-height: 420px; }.business-type-grid { grid-template-columns: repeat(2, 1fr); }.checkout-page { grid-template-columns: 1fr; }.cart-panel { position: relative; top: auto; min-height: 470px; max-height: none; }.dashboard-grid { grid-template-columns: 1fr; }.settings-layout { grid-template-columns: 1fr; }.settings-nav { position: static; flex-direction: row; overflow-x: auto; }.settings-nav button { flex: 0 0 auto; }.receipt-layout { grid-template-columns: 1fr; }.receipt-preview { max-width: 280px; width: 100%; margin: auto; }
}
@media (max-width: 600px) {
  .topbar-actions .connection-pill, .profile-copy, .profile-button > .icon { display: none; }.page-header { align-items: flex-start; flex-direction: column; }.page-header .button { width: 100%; }.metric-grid, .mini-metric-grid, .report-grid { grid-template-columns: 1fr 1fr; }.metric-card { min-height: 125px; }.welcome-copy h1 { font-size: 39px; }.welcome-visual { min-height: 360px; }.business-card { width: 135px; }.card-salon { top: 5%; }.visual-center { width: 140px; height: 140px; }.wizard-panel { padding: 26px 20px; }.business-info-grid, .two-fields, .setup-choice-grid, .capability-toggle-list { grid-template-columns: 1fr; }.business-type-grid { grid-template-columns: 1fr; }.business-type-card { min-height: 73px; }.setup-choice { min-height: 112px; }.catalog-grid { grid-template-columns: repeat(2, 1fr); }.item-card { min-height: 150px; }.checkout-context-row { grid-template-columns: 1fr; }.list-toolbar { align-items: stretch; flex-direction: column; }.list-toolbar .search-box { max-width: none; }.segmented-control { overflow-x: auto; }.payment-method-grid { grid-template-columns: repeat(2, 1fr); }.settings-heading { align-items: flex-start; gap: 13px; flex-direction: column; }.settings-heading .button { width: 100%; }.payment-setting { grid-template-columns: 35px 1fr; }.payment-setting .status { display: none; }.report-grid { grid-template-columns: 1fr; }.toast { left: 14px; right: 14px; min-width: 0; }.onboarding-topbar { padding-inline: 18px; }
}


/* Phase 1: accessible readability and interaction foundation */
/* Onboarding decision UX: keep essentials scannable and optional tools out of the way. */
.core-capability-group { padding: 18px; margin-bottom: 20px; border: 1px solid #c9e2d9; background: linear-gradient(135deg, #f4fbf8, #fff); border-radius: 14px; }
.core-capability-group .capability-group-heading { display: block; margin-bottom: 14px; }.core-capability-group .capability-group-heading h3 { color: #216c56; font-size: 10px; }.core-capability-group .capability-group-heading small { display: block; margin-top: 5px; font-size: 11px; }
.core-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.core-tool-grid .question-row { min-height: 76px; }.core-capability:disabled { opacity: 1; cursor: default; }.core-capability .yes-no { color: var(--green-2); }
.optional-capability-group { padding: 0; margin-bottom: 10px; border: 1px solid #e0e8e4; border-radius: 12px; background: #fff; overflow: hidden; }.optional-capability-group summary { padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; }.optional-capability-group summary::-webkit-details-marker { display: none; }.optional-capability-group summary::after { content: "+"; order: -1; width: 22px; height: 22px; display: grid; place-items: center; color: var(--green-2); background: var(--green-soft); border-radius: 50%; font-weight: 800; }.optional-capability-group[open] summary { border-bottom: 1px solid #e6ece9; background: #f8fbfa; }.optional-capability-group[open] summary::after { content: "–"; }.optional-capability-group .capability-group-heading { flex: 1; margin: 0; }.optional-capability-group .capability-group-heading h3 { font-size: 10px; }.optional-capability-group .capability-group-heading small { display: block; margin-top: 4px; font-size: 10px; }.optional-count { color: var(--subtle); white-space: nowrap; font-size: 10px; font-weight: 700; }.optional-capability-group .question-list { padding: 12px; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-navigation {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  color: #fff;
  background: var(--green);
  border-radius: .5rem;
  font-size: var(--text-small);
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform .15s ease;
}
.skip-navigation:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
}
:where(input, select, textarea):focus-visible { outline: 0; box-shadow: var(--focus-ring); }
:where(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .62; }

.brand small,
.business-badge small,
.sync-note,
.eyebrow,
.nav-label,
.setup-progress-label { font-size: var(--text-meta); }
.connection-pill,
.profile-copy small { font-size: var(--text-meta); }
.profile-copy strong,
.business-badge strong { font-size: var(--text-small); }
.profile-button { min-height: var(--control-height); padding: .25rem; border-radius: .625rem; }
.profile-button { min-width: var(--control-height); }
.avatar { font-size: var(--text-meta); }
.nav-list a,
.sidebar-footer > a { min-height: var(--control-height); height: auto; font-size: var(--text-small); }
.nav-label { color: var(--muted); }
.sync-note { color: var(--muted); }

.page-header h1 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
.page-header p { max-width: 50rem; font-size: var(--text-small); line-height: 1.55; }
.page-context-summary { display:inline-flex; margin-top:.65rem; color:var(--muted); font-size:var(--text-meta); font-weight:700; }
.button { min-height: var(--control-height); font-size: var(--text-small); }
.button.large { min-height: 3rem; font-size: var(--text-small); }
.icon-button { width: var(--control-height); height: var(--control-height); }
.button.icon-only { width: var(--control-height); }
.text-button,
.text-link { min-height: var(--control-height); display: inline-flex; align-items: center; font-size: var(--text-small); }

.metric-grid { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.metric-card { min-height: 9.5rem; }
.metric-card > span { font-size: var(--text-small); }
.metric-card > strong { font-size: 1.5rem; }
.metric-card > small { font-size: var(--text-meta); }
.panel-heading h2 { font-size: 1.125rem; }
.panel-heading p,
.chart-labels { font-size: var(--text-meta); }
.select-button { min-height: var(--control-height); font-size: var(--text-meta); cursor: pointer; }
.quick-actions a { min-height: 4rem; }
.quick-actions strong,
.health-copy strong { font-size: var(--text-small); }
.quick-actions small,
.health-ring span,
.health-copy p { font-size: var(--text-meta); }

th { font-size: var(--text-meta); color: var(--muted); }
td { font-size: var(--text-small); }
.status { font-size: var(--text-meta); }
.empty-state h1,
.empty-state h2 { font-size: 1.25rem; }
.empty-state strong { font-size: var(--text-small); }
.empty-state p { font-size: var(--text-small); }

.welcome-kicker,
.welcome-assurances { font-size: var(--text-meta); }
.visual-center small,
.business-card small { font-size: var(--text-meta); }
.visual-center strong,
.business-card strong { font-size: var(--text-small); }
.business-card { width: 12rem; }
.wizard-heading p { font-size: var(--text-small); }
.alert-message { font-size: var(--text-small); }
.field > span { font-size: var(--text-small); }
.field > small { font-size: var(--text-meta); }
.field input,
.field select { height: 3rem; padding-inline: .875rem; font-size: var(--text-body); }
.field input::placeholder,
.search-box input::placeholder { color: #6d7a75; opacity: 1; }

.waiter-topbar { padding-left: 24px; }
.waiter-home { max-width: 820px; margin: 0 auto; padding: 32px 24px 46px; }
.waiter-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:24px; }
.waiter-heading h1 { margin: 7px 0 4px; font-size: 28px; line-height:1.15; }
.waiter-heading p { color: var(--muted); margin:0; font-size:13px; }
.waiter-avatar { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; color:#fff; background:linear-gradient(145deg,#247f68,#125342); font:800 16px var(--display); box-shadow:0 8px 20px rgba(20,94,77,.2); }
.waiter-status { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; margin-bottom:30px; border:1px solid #cfe6dc; border-radius:14px; background:linear-gradient(110deg,#eef8f4,#f8fbfa); }
.waiter-status div { display:grid; grid-template-columns:10px 1fr; column-gap:9px; align-items:center; }.waiter-status strong { font-size:12px; }.waiter-status small { grid-column:2; color:var(--muted); font-size:10px; }.waiter-status-dot { width:9px; height:9px; border-radius:50%; background:#24a174; box-shadow:0 0 0 4px #d8f0e7; }.waiter-shift { color:var(--green); font-weight:800; font-size:12px; }
.waiter-section-title { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }.waiter-section-title h2 { margin:0; font-size:17px; }.waiter-section-title span { color:var(--subtle); font-size:11px; }
.waiter-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }.waiter-action { display:grid; grid-template-columns:48px 1fr 18px; align-items:center; gap:12px; min-height:92px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 5px 18px rgba(20,60,45,.05); color:var(--ink); transition:.16s ease; }.waiter-action:hover { border-color:#9bcbbb; transform:translateY(-2px); box-shadow:0 9px 24px rgba(20,60,45,.1); }.waiter-action-main { grid-column:1/-1; min-height:116px; background:linear-gradient(120deg,#145e4d,#1b8068); color:#fff; border-color:#145e4d; }.waiter-action-main .waiter-action-icon { background:rgba(255,255,255,.16); color:#fff; }.waiter-action-main small { color:#d5eee6; }.waiter-action-main > .icon { color:#c9eadd; }.waiter-action-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:13px; background:#e8f3ef; color:var(--green-2); }.waiter-action span:not(.waiter-action-icon) { display:flex; flex-direction:column; gap:3px; }.waiter-action strong { font-size:14px; }.waiter-action small { color:var(--muted); font-size:10px; line-height:1.35; }.waiter-action > .icon { color:#96a59f; }
.waiter-tip { display:flex; align-items:center; gap:11px; margin-top:24px; padding:14px 16px; border-radius:12px; background:#fff8ed; color:#885c25; }.waiter-tip div { display:flex; flex-direction:column; gap:2px; }.waiter-tip strong { font-size:11px; }.waiter-tip span { font-size:10px; color:#9a7444; }.waiter-signout { display:flex; align-items:center; gap:7px; margin:28px auto 0; border:0; background:none; color:var(--muted); font-size:12px; cursor:pointer; }
@media (max-width:600px) { .waiter-home { padding:24px 16px 36px; }.waiter-heading h1 { font-size:24px; }.waiter-actions { grid-template-columns:1fr; }.waiter-action-main { grid-column:auto; }.waiter-status { margin-bottom:24px; } }
@media (max-width:600px) { .restaurant-routing-options { grid-template-columns: 1fr; }.restaurant-routing-choice { padding: 14px; } }
.section-divider { font-size: var(--text-meta); color: var(--muted); }
.filter-chip { min-height: var(--control-height); padding-inline: .875rem; font-size: var(--text-meta); }
.business-type-grid { grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.business-type-card { min-height: 7rem; padding: .875rem; }
.business-type-card strong { font-size: var(--text-small); }
.business-type-card small { font-size: var(--text-meta); line-height: 1.45; }
.question-row { min-height: 5rem; }
.question-row strong,
.setup-choice strong,
.logo-upload strong { font-size: var(--text-small); }
.question-row small,
.setup-choice small,
.logo-upload small,
.starter-box > small { font-size: var(--text-meta); }
.yes-no { font-size: var(--text-meta); }
.smart-note,
.privacy-note,
.printer-skip,
.info-strip { font-size: var(--text-small); }
.setup-choice { min-height: 10rem; }
.skip-link { min-height: var(--control-height); justify-content: center; }
.tag-list span { font-size: var(--text-meta); }
.summary-panel > p,
.summary-business strong { font-size: var(--text-small); }
.summary-business small,
.summary-label,
.summary-business span,
.capability-summary span,
.ready-note { font-size: var(--text-meta); }

.order-type-switch button,
.segmented-control button,
.category-tabs button,
.type-selector button { min-height: var(--control-height); font-size: var(--text-meta); cursor: pointer; }
.context-selector { min-height: 4.25rem; }
.context-selector small { font-size: var(--text-meta); color: var(--muted); }
.context-selector strong { font-size: var(--text-small); }
.search-box { min-height: 3rem; height: auto; }
.search-box input { font-size: var(--text-small); }
.search-box input { min-height: var(--control-height); }
.search-box kbd,
.keyboard-hint kbd { font-size: var(--text-meta); }
.category-tabs button { padding-inline: .875rem; }
.catalog-grid { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.item-card { min-height: 11.5rem; padding: 1rem; }
.item-card-copy strong { font-size: var(--text-small); }
.item-card-copy small,
.stock-badge { font-size: var(--text-meta); }
.item-card-price { font-size: var(--text-small); }
.cart-heading h2 { font-size: 1rem; }
.line-count { font-size: var(--text-meta); }
.cart-empty strong,
.cart-line-top strong,
.cart-line-bottom > strong { font-size: var(--text-small); }
.cart-empty p,
.cart-line-top small,
.cart-summary > div,
.summary-action { font-size: var(--text-meta); }
.summary-action { min-height: var(--control-height); align-items: center; cursor: pointer; }
.remove-button { width: var(--control-height); height: var(--control-height); cursor: pointer; }
.quantity-stepper { min-height: var(--control-height); height: auto; }
.quantity-stepper button { width: var(--control-height); cursor: pointer; }
.quantity-stepper input { width: 3.25rem; font-size: var(--text-small); }
.keyboard-hint { font-size: var(--text-meta); }

.table-loader,
.table-item small { font-size: var(--text-meta); }
.modal header h2 { font-size: 1.375rem; }
.modal header p { font-size: var(--text-small); }
.input-prefix,
.input-suffix { height: 3rem; }
.input-prefix span,
.input-suffix span { font-size: var(--text-meta); }
.amount-due { font-size: var(--text-small); }
.payment-method { min-height: 6rem; cursor: pointer; }
.payment-method > span,
.payment-method strong { font-size: var(--text-meta); }
.toast { min-height: 4.5rem; }
.toast strong,
.toast span { font-size: var(--text-small); }
.toast button { width: var(--control-height); height: var(--control-height); cursor: pointer; }

.settings-layout { grid-template-columns: 15rem minmax(0, 1fr); }
.settings-nav button { min-height: var(--control-height); font-size: var(--text-small); cursor: pointer; }
.settings-heading h2 { font-size: 1.25rem; }
.settings-heading p,
.profile-summary span,
.settings-note p,
.technical-hidden p,
.capability-count small,
.capability-group h3,
.capability-toggle small,
.offline-card p,
.warning-box p { font-size: var(--text-meta); }
.profile-summary small { font-size: var(--text-meta); color: var(--muted); }
.profile-summary h3 { font-size: 1rem; }
.settings-note strong,
.technical-hidden strong,
.capability-count span,
.capability-toggle strong,
.offline-card strong,
.saved-message { font-size: var(--text-small); }
.capability-toggle { min-height: 4.75rem; cursor: pointer; }
.toggle-button { min-width: var(--control-height); min-height: var(--control-height); padding: .875rem .45rem; align-items: center; cursor: pointer; }
.toggle-button {
  position: relative;
  justify-content: flex-start;
  padding: 0;
  background: transparent !important;
}
.toggle-button::before {
  content: "";
  position: absolute;
  left: .375rem;
  width: 2rem;
  height: 1.25rem;
  background: #aeb9b4;
  border-radius: 999px;
}
.toggle-button.on::before { background: var(--green-2); }
.toggle-button i { position: relative; margin-left: .55rem; }
.mini-metric-grid span,
.mini-metric-grid small,
.date-strip small { font-size: var(--text-meta); }
.date-strip button { width: var(--control-height); height: var(--control-height); cursor: pointer; }
.date-strip strong { font-size: var(--text-small); }
.report-card { min-height: 6rem; cursor: pointer; }
.report-card strong { font-size: var(--text-small); }
.report-card small { font-size: var(--text-meta); }
.page-loader p { font-size: var(--text-small); }

@media (min-width: 1280px) {
  .catalog-grid { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
}

@media (max-width: 850px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav button { min-height: var(--control-height); }
}

@media (max-width: 600px) {
  .content { padding: 1.25rem 1rem 2.5rem; }
  .page-header h1 { font-size: 1.75rem; }
  .metric-grid,
  .mini-metric-grid { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-card { min-height: 11.75rem; }
  .business-card { width: 9.75rem; }
  .wizard-panel { padding: 1.5rem 1.125rem; }
  .modal-layer { padding: .75rem; }
  .modal { max-height: calc(100vh - 1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea):focus-visible { outline: 3px solid CanvasText; }
  .button.primary, .filter-chip.active, .category-tabs button.active { border: 2px solid ButtonText; }
}

/* Phase 2: honest functional states */
.profile-button { cursor: default; }
.date-range-label {
  min-height: var(--control-height);
  padding: 0 .875rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
  background: #f5f7f6;
  border: 1px solid var(--line);
  border-radius: .625rem;
  font-size: var(--text-meta);
  font-weight: 700;
  white-space: nowrap;
}
.report-date-controls { display:flex; align-items:end; gap:.55rem; }
.report-date-controls .field { min-width:8.5rem; }
.dashboard-header-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.55rem; }
.data-freshness, .report-scope { display:inline-flex; align-items:center; gap:.4rem; color:var(--muted); font-size:var(--text-meta); }
.report-scope { margin-top:.65rem; }
.net-metric { border-color:#bfe3d5 !important; background:#f5fbf8 !important; }
.net-metric strong { color:var(--green); }
.report-results-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.report-data-panel { min-height:12rem; }
.report-list { padding:0 1.25rem 1rem; }
.report-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--line); }
.report-row:last-child { border-bottom:0; }
.report-row span { display:flex; flex-direction:column; gap:.2rem; }
.report-row small { color:var(--subtle); font-size:var(--text-meta); }
.report-row b { white-space:nowrap; }
.inventory-report-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; padding:1rem 1.25rem; }
.inventory-report-stats div { display:flex; flex-direction:column; gap:.3rem; }
.inventory-report-stats strong { font-size:1.25rem; }
.inventory-report-stats span { color:var(--muted); font-size:var(--text-meta); }
@media (max-width:700px) { .report-date-controls { width:100%; flex-wrap:wrap; }.report-date-controls .field { flex:1; min-width:8rem; }.report-date-controls .button { width:100%; }.report-results-grid { grid-template-columns:1fr; }.inventory-report-stats { grid-template-columns:1fr; }.dashboard-header-actions { width:100%; justify-content:flex-start; }.dashboard-header-actions .data-freshness { flex:1; }.dashboard-header-actions .button { flex:0 0 auto; } }
.panel-heading-actions { display: flex; align-items: center; gap: .5rem; }
.planned-badge,
.context-state {
  padding: .3rem .55rem;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: #685c3d;
  background: #f5f0df;
  border: 1px solid #e8dfbe;
  border-radius: 999px;
  font-size: var(--text-meta);
  font-weight: 800;
  white-space: nowrap;
}
.context-state {
  color: var(--green);
  background: var(--green-soft);
  border-color: #cfe3dc;
}
.planned-action {
  min-height: var(--control-height);
  padding: .5rem .75rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  background: #f5f7f6;
  border: 1px dashed #c8d1cc;
  border-radius: .625rem;
  font-size: var(--text-small);
  font-weight: 700;
}
.planned-action small {
  padding: .2rem .4rem;
  color: #685c3d;
  background: #f5f0df;
  border-radius: 999px;
  font-size: var(--text-meta);
}
.module-availability {
  margin: 1rem;
  padding: .875rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: #5e6256;
  background: #faf8ef;
  border: 1px solid #e8e2c9;
  border-radius: .75rem;
}
.module-availability > .icon { margin-top: .1rem; color: #8a7640; }
.module-availability > div { display: flex; flex-direction: column; gap: .2rem; }
.module-availability strong { font-size: var(--text-small); }
.module-availability span { color: var(--muted); font-size: var(--text-meta); line-height: 1.5; }
.report-card { cursor: default; }
.report-card .planned-badge { justify-self: end; }
.unavailable-selector {
  color: var(--muted);
  background: #f7f8f7;
  border-style: dashed;
  cursor: default;
}
.unavailable-selector > span:first-child > .icon { color: #7f8c87; }
.current-context { cursor: default; }

.discount-editor {
  margin: .4rem 0;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  background: #f5f8f6;
  border: 1px solid var(--line);
  border-radius: .625rem;
}
.discount-editor > label,
.discount-editor > div,
.applied-discount,
.summary-static {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.discount-editor > label > span:first-child,
.applied-discount,
.summary-static { color: var(--muted); font-size: var(--text-meta); }
.discount-editor > div { justify-content: flex-end; }
.discount-input {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid #cdd7d2;
  border-radius: .5rem;
}
.discount-input:focus-within { border-color: var(--focus-color); box-shadow: var(--focus-ring); }
.discount-input b { padding: 0 .5rem; color: var(--muted); font-size: var(--text-meta); }
.discount-input input {
  width: 6.25rem;
  min-height: var(--control-height);
  padding: 0 .6rem;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-left: 1px solid var(--line);
  outline: 0;
  font-size: var(--text-small);
}
.compact-button { min-height: 2.5rem; }
.applied-discount,
.summary-static { min-height: var(--control-height); }
.applied-discount > span:last-child { display: flex; align-items: center; gap: .35rem; }
.applied-discount strong { color: var(--green); }
.applied-discount button {
  width: var(--control-height);
  height: var(--control-height);
  display: grid;
  place-items: center;
  color: #9e4553;
  background: transparent;
  border: 0;
  border-radius: .5rem;
  cursor: pointer;
}
.summary-static > span:last-child { color: var(--subtle); font-weight: 700; }

@media (max-width: 600px) {
  .planned-action { width: 100%; justify-content: center; }
  .panel-heading-actions { align-items: flex-end; flex-direction: column; }
  .report-card { grid-template-columns: 2.75rem 1fr; }
  .report-card .planned-badge { grid-column: 2; justify-self: start; }
  .context-selector { align-items: flex-start; }
  .planned-badge, .context-state { margin-top: .1rem; }
}

/* Phase 3: mobile checkout */
.mobile-cart-bar,
.mobile-cart-backdrop,
.mobile-sheet-handle,
.mobile-cart-close { display: none; }
.cart-heading-actions { display: flex; align-items: center; gap: .25rem; }
.logout-link {
  width: 100%; min-height: var(--control-height); padding: 0 .75rem;
  display: flex; align-items: center; gap: .75rem; color: var(--muted);
  background: transparent; border: 0; border-radius: .5rem;
  font: 700 var(--text-small) var(--font); text-align: left; cursor: pointer;
}
.logout-link:hover { color: #9e4553; background: #faedef; }
.list-count { color: var(--subtle); font-size: var(--text-meta); font-weight: 700; }
.balance-due { color: #a45b2a; }
.customer-context { align-items: center; }
.customer-context select { min-width: 12rem; min-height: var(--control-height); padding: 0 .65rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: .5rem; font-size: var(--text-meta); }
.customer-context select:focus { border-color: var(--focus-color); box-shadow: var(--focus-ring); outline: 0; }
.login-wrap { width: min(100% - 2rem, 32rem); margin: 8vh auto; }
.login-panel { max-width: 32rem; margin: auto; }
.login-panel .wizard-heading { margin-bottom: 1.5rem; }
.login-panel .form-stack { padding: 0; }
.login-panel .button { width: 100%; margin-top: .5rem; }
.login-offline-note { margin: 1.25rem 0 0; padding: .8rem 1rem; display: flex; align-items: center; gap: .55rem; color: #49685e; background: #eef7f3; border-radius: .6rem; font-size: var(--text-meta); }
.keyboard-hint {
  padding: .35rem 0 .9rem;
  justify-content: flex-start;
  gap: 1rem;
  color: var(--subtle);
  font-size: var(--text-meta);
}
.keyboard-hint kbd {
  min-width: 1.45rem;
  padding: .15rem .3rem;
  display: inline-flex;
  justify-content: center;
  color: var(--muted);
  background: #fff;
  border: 1px solid #d6dfda;
  border-bottom-width: 2px;
  border-radius: .3rem;
  font: 700 var(--text-meta) var(--font);
}
.item-card:disabled { cursor: not-allowed; filter: grayscale(.15); }

@media (max-width: 850px) {
  .checkout-page {
    min-height: 0;
    display: block;
    padding-bottom: 6.75rem;
  }
  .checkout-catalog { padding-bottom: 1rem; }
  .keyboard-hint { display: none; }
  .cart-panel {
    width: 100%;
    min-height: 0;
    max-height: min(88dvh, 46rem);
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    border-width: 1px 0 0;
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -1.25rem 3.5rem rgba(18, 42, 33, .2);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .22s ease, visibility .22s;
  }
  .cart-panel.mobile-open {
    transform: translateY(0);
    visibility: visible;
  }
  .mobile-sheet-handle {
    width: 2.75rem;
    height: .3rem;
    margin: .55rem auto .1rem;
    display: block;
    flex: 0 0 auto;
    background: #cbd3cf;
    border-radius: 999px;
  }
  .cart-heading { flex: 0 0 auto; padding-top: .65rem; }
  .mobile-cart-close { display: grid; }
  .cart-empty,
  .cart-lines {
    min-height: 0;
    overscroll-behavior: contain;
  }
  .cart-lines { padding-inline: 1rem; }
  .cart-line { padding-block: .875rem; }
  .cart-summary {
    flex: 0 0 auto;
    background: #fff;
  }
  .checkout-button {
    flex: 0 0 auto;
    margin-bottom: .75rem;
  }
  .mobile-cart-backdrop {
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    z-index: 85;
    display: block;
    padding: 0;
    background: rgba(11, 28, 22, .48);
    border: 0;
    touch-action: none;
  }
  .mobile-cart-bar {
    min-height: 4.75rem;
    position: fixed;
    inset: auto .75rem calc(.75rem + env(safe-area-inset-bottom));
    z-index: 70;
    padding: .65rem .65rem .65rem .9rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    color: #fff;
    background: #173d30;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 1rem;
    box-shadow: 0 .85rem 2.25rem rgba(15, 46, 35, .28);
    transition: opacity .16s ease, transform .16s ease;
  }
  .mobile-cart-bar.sheet-open {
    opacity: 0;
    pointer-events: none;
    transform: translateY(1rem);
  }
  .mobile-cart-bar > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
  }
  .mobile-cart-bar small { color: #c9d8d2; font-size: var(--text-meta); }
  .mobile-cart-bar strong { color: #fff; font: 800 1.15rem var(--display); }
  .mobile-cart-bar .button {
    min-height: var(--control-height);
    padding-inline: 1rem;
    background: #fff;
    color: var(--green);
  }
  .mobile-cart-bar .button:hover:not(:disabled) { background: #f1f7f4; }
  .mobile-cart-bar .button:disabled {
    color: #aec1ba;
    background: #315648;
    opacity: 1;
  }
}

@media (max-width: 420px) {
  .mobile-cart-bar { inset-inline: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom)); }
  .cart-heading { padding-inline: 1rem; }
}
.kitchen-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; align-items:start; }
.kitchen-column { background:var(--surface-muted,#f7f8fa); border:1px solid var(--border,#e7e9ee); border-radius:1rem; padding:.85rem; min-height:24rem; }
.kitchen-column > header { display:flex; justify-content:space-between; align-items:flex-start; padding:.35rem .25rem .8rem; }
.kitchen-column header strong,.kitchen-column header small { display:block; } .kitchen-column header small { color:var(--muted,#6d7480); margin-top:.2rem; }
.status-dot { width:.65rem; height:.65rem; border-radius:50%; background:#a5adba; margin-top:.35rem; } .status-dot.preparing { background:#e99a32; } .status-dot.ready { background:#43a475; }
.kitchen-empty { color:var(--muted,#6d7480); font-size:.85rem; padding:2rem .5rem; text-align:center; }
.kitchen-order { background:white; border:1px solid var(--border,#e7e9ee); border-radius:.8rem; padding:.85rem; margin-bottom:.7rem; box-shadow:0 3px 10px rgba(30,40,55,.04); }
.kitchen-order-head { display:flex; justify-content:space-between; gap:.5rem; } .kitchen-order-head span { color:var(--muted,#6d7480); font-size:.8rem; }
.kitchen-order-context { color:var(--accent,#b54f72); font-size:.8rem; font-weight:600; margin:.35rem 0 .65rem; }
.kitchen-order ul { padding:0; margin:0 0 .8rem; list-style:none; font-size:.88rem; } .kitchen-order li { padding:.18rem 0; }
.kitchen-order-actions { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
@media (max-width:850px) { .kitchen-board { grid-template-columns:1fr; } .kitchen-column { min-height:0; } }

/* Shift management & register sessions */
.shift-bar { display: flex; justify-content: space-between; align-items: center; padding: .65rem 1rem; border-radius: .75rem; margin-bottom: 1rem; font-size: .88rem; font-weight: 500; }
.shift-bar.warning { background: #fef8ec; border: 1px solid #f3d499; color: #8e5812; }
.shift-bar.open { background: #f0f8f4; border: 1px solid #c2e2d2; color: #1e5a40; }
.shift-bar-actions { display: flex; align-items: center; gap: .5rem; }

/* Change due banner & quick cash */
.change-banner { background: #e8f5ed; border: 1px solid #99d5af; border-radius: .75rem; padding: .75rem 1rem; margin: .85rem 0; display: flex; justify-content: space-between; align-items: center; }
.change-banner span { color: #1e5a40; font-size: .95rem; font-weight: 600; }
.change-banner strong { color: #1e5a40; font-size: 1.35rem; font-weight: 800; }
.quick-cash-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.quick-cash-btn { background: #f0f2f5; border: 1px solid #dce0e6; border-radius: .5rem; padding: .3rem .6rem; font-size: .82rem; font-weight: 600; cursor: pointer; }
.quick-cash-btn:hover { background: #e2e6eb; }

/* Order alert & parked sales */
.order-alert-banner { background: #f4effc; border: 1px solid #d3c4f2; border-radius: .75rem; padding: .75rem 1rem; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.order-alert-banner div { display: flex; flex-direction: column; gap: .2rem; }
.order-alert-banner strong { color: #4b2882; font-size: .92rem; }
.order-alert-banner small { color: #6b509e; }
.parked-list { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0; max-height: 20rem; overflow-y: auto; }
.parked-card { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--border,#e7e9ee); border-radius: .75rem; padding: .85rem 1rem; cursor: pointer; transition: border-color .15s; }
.parked-card:hover { border-color: var(--green, #238656); background: #fbfdfc; }
.variant-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .65rem; margin: 1rem 0; }
.variant-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; background: #fff; border: 1.5px solid var(--border,#e7e9ee); border-radius: .75rem; padding: .85rem; cursor: pointer; }
.variant-btn:hover:not(:disabled) { border-color: var(--green, #238656); background: #fbfdfc; }
.variant-btn:disabled { opacity: .5; cursor: not-allowed; }
.split-tender-grid { display: flex; flex-direction: column; gap: .6rem; margin: .85rem 0; }
.split-tender-row { display: flex; align-items: center; justify-content: space-between; gap: .85rem; background: #f9fafb; padding: .5rem .75rem; border-radius: .5rem; border: 1px solid #e7e9ee; }
.split-tender-row input { max-width: 9rem; text-align: right; }
.role-guidance { padding: .75rem .85rem; display: flex; align-items: flex-start; gap: .55rem; color: #315e50; background: #eef7f3; border: 1px solid #cce5db; border-radius: .7rem; font-size: var(--text-meta); line-height: 1.45; }.role-guidance .icon { flex: 0 0 auto; color: var(--green-2); }.role-guidance strong { color: var(--ink); }
.order-pad { min-height: calc(100vh - 5.5rem); margin: -1.75rem -1.875rem -2.8rem; background: #f4f6f5; }.order-pad-header { height: 5.8rem; padding: 0 clamp(1.1rem,3vw,3rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #102d27; color: #fff; }.order-pad-brand,.order-pad-user { display: flex; align-items: center; gap: .65rem; }.order-pad-brand > div,.order-pad-user > div { display: flex; flex-direction: column; }.order-pad-brand span:not(.order-pad-mark),.order-pad-title > span,.order-pad-user small { color: #a9c2bb; font-size: .7rem; }.order-pad-brand strong { font-size: .9rem; }.order-pad-mark { width: 2.55rem; height: 2.55rem; display: grid; place-items: center; color: #d5fff1; background: #1e5b4d; border-radius: .75rem; }.order-pad-title { text-align: center; }.order-pad-title h1 { margin: .1rem 0 0; font-size: 1.35rem; }.order-pad-user { justify-content: flex-end; }.order-pad-user strong { font-size: .82rem; }.order-pad-user > span { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; color: #123a31; background: #d3eee4; border-radius: 50%; font-size: .72rem; font-weight: 800; }.order-pad-message { max-width: 74rem; margin: 1rem auto 0; padding: .65rem .9rem; color: #1d7057; background: #e5f5ee; border: 1px solid #bfe3d4; border-radius: .7rem; font-size: .82rem; font-weight: 700; }.order-pad-message.error { color: #9f3f4b; background: #fff0f1; border-color: #f1c8cd; }.order-pad-grid { max-width: 94rem; min-height: calc(100vh - 5.8rem); margin: auto; padding: 1.35rem clamp(1.1rem,3vw,3rem) 2rem; display: grid; grid-template-columns: minmax(0,1fr) 22.5rem; gap: 1.35rem; }.order-pad-menu { min-width: 0; }.order-mode-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }.service-toggle { display: flex; padding: .24rem; gap: .2rem; border: 1px solid #d9e2dd; background: #e9eeeb; border-radius: .7rem; }.service-toggle button { min-height: 2.45rem; padding: 0 .8rem; display: inline-flex; align-items: center; gap: .42rem; border: 0; border-radius: .5rem; color: #5b6964; background: transparent; font-size: .8rem; font-weight: 800; cursor: pointer; }.service-toggle button.active { color: #fff; background: #176650; box-shadow: 0 .15rem .45rem rgba(16,54,44,.16); }.order-search { height: 2.95rem; flex: 1; display: flex; align-items: center; gap: .55rem; padding: 0 .85rem; color: #74827d; border: 1px solid #d9e2dd; background: #fff; border-radius: .7rem; }.order-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .88rem; }.table-picker { margin-bottom: 1rem; padding: .85rem; border: 1px solid #dce4e0; background: #fff; border-radius: .85rem; }.table-picker-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: .65rem; }.table-picker-heading span { color: #71817b; font-size: .63rem; font-weight: 900; letter-spacing: .12em; }.table-picker-heading small { color: #8d9995; font-size: .72rem; }.table-chip-list { display: flex; flex-wrap: wrap; gap: .45rem; }.table-chip { min-width: 4.45rem; min-height: 3.05rem; padding: .42rem .6rem; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #dce4e0; background: #fff; border-radius: .55rem; cursor: pointer; }.table-chip strong { font-size: .72rem; }.table-chip small { margin-top: .13rem; color: #82908a; font-size: .62rem; }.table-chip.selected { color: #fff; border-color: #176650; background: #176650; }.table-chip.selected small { color: #d4eee5; }.table-chip.occupied { opacity: .4; cursor: not-allowed; }.menu-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1rem 0 .8rem; }.menu-toolbar > span { color: #8b9893; font-size: .7rem; }.menu-categories { display: flex; gap: .38rem; overflow-x: auto; padding-bottom: .15rem; }.menu-categories button { padding: .45rem .7rem; border: 1px solid #d9e2dd; color: #596964; background: #fff; border-radius: 99px; white-space: nowrap; font-size: .7rem; font-weight: 800; cursor: pointer; }.menu-categories button.active { color: #176650; border-color: #a5d2c2; background: #e7f5ef; }.order-menu-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(9.6rem,1fr)); gap: .75rem; }.order-menu-item,.order-menu-skeleton { min-height: 8.6rem; padding: .85rem; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #dce4e0; background: #fff; border-radius: .85rem; text-align: left; transition: .15s ease; }.order-menu-item { cursor: pointer; }.order-menu-item:hover { border-color: #74af9b; box-shadow: 0 .6rem 1.35rem rgba(20,76,60,.09); transform: translateY(-2px); }.order-menu-item:disabled { opacity: .45; cursor: not-allowed; transform: none; }.order-menu-item-top { width: 100%; display: flex; justify-content: space-between; align-items: center; color: #8d9a95; }.order-menu-item-top small { font-size: .66rem; }.order-menu-item-top b { width: 1.45rem; height: 1.45rem; display: grid; place-items: center; color: #176650; background: #e7f5ef; border-radius: 50%; font-size: 1rem; }.order-menu-item > strong { margin-top: auto; font-size: .85rem; line-height: 1.25; }.order-menu-item > span:last-child { margin-top: .35rem; color: #176650; font-size: .76rem; font-weight: 800; }.order-menu-skeleton { background: linear-gradient(100deg,#e7ece9 25%,#f8faf9 50%,#e7ece9 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }.order-menu-empty { min-height: 20rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; color: #7d8b85; border: 1px dashed #ccd8d2; border-radius: .85rem; }.order-menu-empty strong { margin-top: .4rem; color: #43544e; font-size: .9rem; }.order-menu-empty span { font-size: .75rem; }.order-ticket { position: sticky; top: 6.6rem; height: calc(100vh - 8rem); min-height: 31rem; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d8e2dd; background: #fff; border-radius: 1rem; box-shadow: 0 1rem 2.2rem rgba(21,64,51,.1); }.order-ticket > header { padding: 1rem 1rem .85rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf1ef; }.order-ticket > header div { display: flex; flex-direction: column; }.order-ticket > header span { color: #84918c; font-size: .6rem; font-weight: 900; letter-spacing: .12em; }.order-ticket > header strong { margin-top: .2rem; font-size: .95rem; }.ticket-clear { padding: .35rem; border: 0; color: #ae5661; background: transparent; font-size: .72rem; font-weight: 800; cursor: pointer; }.ticket-clear:disabled { opacity: .35; cursor: not-allowed; }.ticket-empty { flex: 1; padding: 2rem 1.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.ticket-empty > span { width: 3.3rem; height: 3.3rem; margin-bottom: .85rem; display: grid; place-items: center; color: #24705b; background: #e6f4ee; border-radius: 1rem; }.ticket-empty strong { font-size: .88rem; }.ticket-empty small { max-width: 11rem; margin-top: .3rem; color: #8a9792; font-size: .72rem; line-height: 1.5; }.ticket-lines { flex: 1; overflow: auto; padding: .3rem 1rem; }.ticket-line { padding: .9rem 0; border-bottom: 1px solid #edf1ef; }.ticket-line > div:first-child { display: flex; flex-direction: column; }.ticket-line > div:first-child strong { font-size: .8rem; }.ticket-line > div:first-child small { margin-top: .2rem; color: #8b9893; font-size: .68rem; }.ticket-line-actions { margin-top: .65rem; display: flex; align-items: center; justify-content: space-between; }.ticket-line-actions > strong { font-size: .78rem; }.ticket-quantity { display: flex; align-items: center; gap: .12rem; border: 1px solid #dce4e0; border-radius: .45rem; }.ticket-quantity button { width: 1.7rem; height: 1.6rem; border: 0; color: #176650; background: #f5faf7; cursor: pointer; font-size: 1rem; }.ticket-quantity span { min-width: 1.35rem; text-align: center; font-size: .72rem; font-weight: 800; }.order-ticket footer { padding: .9rem 1rem 1rem; border-top: 1px solid #edf1ef; }.ticket-total { margin-bottom: .8rem; display: flex; justify-content: space-between; align-items: center; }.ticket-total span { color: #6d7b75; font-size: .8rem; }.ticket-total strong { font: 800 1.3rem var(--display); }.ticket-primary { width: 100%; min-height: 3.2rem; padding: 0 1rem; display: flex; justify-content: center; align-items: center; gap: .5rem; border: 0; color: #fff; background: #176650; border-radius: .7rem; box-shadow: 0 .5rem 1rem rgba(19,91,70,.2); font-size: .82rem; font-weight: 800; cursor: pointer; }.ticket-primary strong { margin-left: auto; }.ticket-primary:disabled { opacity: .45; cursor: not-allowed; }.ticket-flow-note { display: block; margin-top: .65rem; color: #83908b; text-align: center; font-size: .65rem; }.waiter-payment-modal { width: min(31rem,calc(100% - 2rem)); }.waiter-payment-modal header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }.waiter-payment-modal h2 { margin: .25rem 0; font-size: 1.4rem; }.waiter-payment-modal p { margin: 0; color: var(--muted); font-size: .8rem; }.waiter-payment-methods { display: grid; gap: .6rem; }.waiter-payment-methods button { min-height: 3.8rem; padding: .65rem .75rem; display: grid; grid-template-columns: 2.3rem 1fr auto; align-items: center; gap: .7rem; border: 1px solid #dce4e0; background: #fff; border-radius: .7rem; text-align: left; cursor: pointer; }.waiter-payment-methods button:hover { border-color: #74af9b; background: #f7fcf9; }.waiter-payment-methods button > span { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; color: #176650; background: #e7f5ef; border-radius: .6rem; font-size: .7rem; font-weight: 900; }.waiter-payment-methods strong { font-size: .85rem; }.waiter-payment-methods .icon { color: #8ba19a; }.waiter-receipt-modal { width: min(25rem,calc(100% - 2rem)); padding: 2rem; text-align: center; }.receipt-success-icon { width: 3.5rem; height: 3.5rem; margin: 0 auto .8rem; display: grid; place-items: center; color: #fff; background: #1e8a6c; border-radius: 50%; box-shadow: 0 0 0 .5rem #e4f5ed; }.waiter-receipt-modal h2 { margin: .3rem 0; font-size: 1.6rem; }.waiter-receipt-modal p { margin: 0 0 1.4rem; color: var(--muted); font-size: .8rem; }.waiter-receipt-modal > div { display: flex; justify-content: center; gap: .55rem; }

@media (max-width:850px) { .order-pad { margin-inline: -1.25rem; }.order-pad-grid { grid-template-columns: 1fr; }.order-ticket { position: static; height: auto; min-height: 24rem; }.ticket-lines { max-height: 19rem; }.order-pad-title { display: none; } .order-pad-header { grid-template-columns: 1fr auto; } }
@media (max-width:520px) { .order-pad { margin: -1.25rem -1rem -2rem; }.order-pad-header { height: 4.7rem; padding-inline: 1rem; }.order-pad-brand > div { max-width: 10rem; overflow: hidden; }.order-pad-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.order-pad-user > div { display: none; }.order-pad-grid { padding: 1rem; gap: 1rem; }.order-mode-bar { align-items: stretch; flex-direction: column; gap: .6rem; }.order-search { flex: none; }.order-menu-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }.order-menu-item { min-height: 7.5rem; padding: .7rem; }.waiter-receipt-modal > div { flex-direction: column-reverse; }.waiter-receipt-modal > div .button { width: 100%; } }
.role-workspace { max-width: 980px; margin: 0 auto; }.role-workspace-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; }.role-workspace-header h1 { margin: .3rem 0 .45rem; font-size: clamp(1.85rem, 3vw, 2.6rem); }.role-workspace-header p { max-width: 40rem; margin: 0; color: var(--muted); font-size: var(--text-body); line-height: 1.55; }.role-workspace-badge { min-width: 11rem; padding: .85rem 1rem; display: flex; align-items: center; gap: .7rem; border: 1px solid #d9e7e1; background: #f8fbfa; border-radius: .9rem; }.role-workspace-badge > div { display: flex; flex-direction: column; }.role-workspace-badge small { margin-top: .2rem; color: var(--muted); font-size: var(--text-meta); }.role-workspace-status { margin-bottom: 1.75rem; padding: .9rem 1rem; display: flex; align-items: center; gap: .7rem; border: 1px solid #cbe5da; background: #f1faf6; border-radius: .8rem; }.role-workspace-status .status-dot { width: .65rem; height: .65rem; flex: 0 0 auto; margin: 0; background: var(--green-2); }.role-workspace-status div { display: flex; flex-direction: column; }.role-workspace-status small { margin-top: .15rem; color: var(--muted); font-size: var(--text-meta); }.role-workspace-section-heading h2 { margin: 0 0 .2rem; font-size: 1.2rem; }.role-workspace-section-heading p { margin: 0 0 1rem; color: var(--muted); font-size: var(--text-meta); }.role-task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .85rem; }.role-task-card { min-height: 8.5rem; padding: 1rem; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; color: inherit; border: 1px solid #dfe8e4; background: #fff; border-radius: .9rem; box-shadow: 0 .3rem 1rem rgba(22, 52, 41, .04); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }.role-task-card:hover { color: inherit; border-color: #8cc7b2; box-shadow: 0 .65rem 1.5rem rgba(22, 90, 67, .1); transform: translateY(-2px); }.role-task-card > div { display: flex; flex-direction: column; }.role-task-card strong { font-size: var(--text-body); }.role-task-card small { margin-top: .25rem; color: var(--muted); font-size: var(--text-meta); line-height: 1.4; }.role-task-icon { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; color: var(--green-2); background: var(--green-soft); border-radius: .75rem; }

@media (max-width: 600px) {
  .core-tool-grid { grid-template-columns: 1fr; }
  .optional-capability-group summary { padding: 13px; }
  .optional-count { display: none; }
  .role-workspace-header { flex-direction: column; }.role-workspace-badge { width: 100%; }.role-task-grid { grid-template-columns: 1fr; }
}

/* Product-wide UI polish: final cascade layer for the shared shell and workflows. */
:root {
  --canvas: #f3f7f5;
  --line-strong: #cbd9d3;
  --shadow-soft: 0 8px 24px rgba(20, 63, 49, .055);
  --shadow-hover: 0 12px 30px rgba(20, 63, 49, .11);
}
body { background: radial-gradient(circle at 86% -12%, #e5f3ed 0, transparent 34rem), var(--canvas); }
.sidebar { background: rgba(255,255,255,.96); box-shadow: 8px 0 28px rgba(27,57,46,.045); }
.brand { border-bottom: 1px solid #edf2ef; }
.business-badge { background: #f0f8f4; border-color: #d7e9e0; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.branch-switcher select { border-color: var(--line-strong); }
.nav-list a, .sidebar-footer > a { position: relative; transition: color .16s ease, background .16s ease, transform .16s ease; }
.nav-list a:hover, .sidebar-footer > a:hover { transform: translateX(2px); }
.nav-list a.active, .sidebar-footer > a.active { font-weight: 800; box-shadow: inset 3px 0 var(--green-2), 0 3px 10px rgba(27,128,104,.06); }
.topbar { box-shadow: 0 3px 18px rgba(27,57,46,.035); }
.connection-pill { border: 1px solid #d9e8e1; }
.profile-button { border: 1px solid transparent; transition: background .16s ease, border-color .16s ease; }
.profile-button:hover { background: #f2f7f4; border-color: #dbe8e2; }
.content { padding-top: 32px; }
.page-header h1 { letter-spacing: -.045em; }
.button, .icon-button, .select-button { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; }
.button.primary:hover, .ticket-primary:hover:not(:disabled) { box-shadow: 0 9px 20px rgba(20,94,77,.22); }
.metric-card, .panel { box-shadow: var(--shadow-soft); }
.metric-card { overflow: hidden; }
.metric-card::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, var(--green-2), #9bd5c1); opacity: .7; }
.metric-card:hover, .panel:hover { border-color: #bdd5ca; box-shadow: var(--shadow-hover); }
.metric-card:hover { transform: translateY(-2px); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.quick-actions a { border-radius: 9px; transition: background .16s ease, padding .16s ease; }
.quick-actions a:hover { padding-inline: 8px; background: #f4faf7; }
.quick-actions a:hover > .icon { color: var(--green-2); }
.table-wrap tbody tr { transition: background .14s ease; }
.table-wrap tbody tr:hover { background: #f7fbf9; }
.panel-heading { background: linear-gradient(180deg, #fff, #fcfefd); }
.text-link { border-radius: 6px; }
.text-link:hover { color: var(--green); background: var(--green-soft); }

/* Order pad: make the service decision and current ticket visually dominant. */
.order-pad { background: #eef4f1; }
.order-pad-header { box-shadow: 0 4px 18px rgba(10,43,34,.16); }
.order-mode-bar { padding: .7rem; border: 1px solid #d8e6df; background: rgba(255,255,255,.72); border-radius: .9rem; }
.order-search { border-color: #cbdcd4; box-shadow: 0 2px 8px rgba(20,63,49,.035); }
.order-search:focus-within { border-color: #71b49d; box-shadow: 0 0 0 3px rgba(22,116,94,.14); }
.table-picker { box-shadow: var(--shadow-soft); }
.table-chip:focus-visible, .order-menu-item:focus-visible, .service-toggle button:focus-visible, .menu-categories button:focus-visible, .ticket-quantity button:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.order-menu-item { box-shadow: 0 3px 10px rgba(20,63,49,.035); }
.order-menu-item:active { transform: scale(.98); }
.order-ticket { box-shadow: 0 14px 30px rgba(21,64,51,.14); }
.ticket-primary { min-height: 3.45rem; }

@media (max-width: 850px) {
  body { background: var(--canvas); }
  .content { padding-top: 24px; }
  .order-mode-bar { padding: .55rem; }
  .order-ticket { box-shadow: var(--shadow-soft); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Onboarding polish: make the setup decisions feel calm, legible and reversible. */
.onboarding-shell { background: radial-gradient(circle at 12% 0, #e5f4ed 0, transparent 34rem), #f7faf8; }
.onboarding-topbar { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.9); backdrop-filter: blur(16px); box-shadow: 0 3px 18px rgba(27,57,46,.04); }
.setup-progress-label { padding: .55rem .8rem; color: var(--green); background: var(--green-soft); border: 1px solid #d3e9df; border-radius: 99px; font-weight: 800; }
.setup-stepper { display: flex; align-items: center; justify-content: flex-end; min-width: min(50rem, 62vw); }
.setup-step { display: inline-flex; align-items: center; gap: .45rem; color: #91a09a; white-space: nowrap; }
.setup-step-number { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #d4e0da; border-radius: 50%; background: #fff; color: #82928a; font-size: .7rem; font-weight: 900; }
.setup-step-label { font-size: .7rem; font-weight: 800; }
.setup-step.current { color: var(--green); }
.setup-step.current .setup-step-number { color: #fff; border-color: var(--green); background: var(--green); box-shadow: 0 0 0 4px #dff1e9; }
.setup-step.complete { color: #397864; }
.setup-step.complete .setup-step-number { color: #fff; border-color: var(--green-2); background: var(--green-2); }
.setup-step-connector { width: clamp(1rem, 2.5vw, 2.5rem); height: 1px; margin: 0 .35rem; background: #d7e2dd; }
.setup-step-connector.complete { background: #8bc8b2; }
.welcome-copy h1 { max-width: 38rem; }
.welcome-copy > p { color: #465c53; }
.welcome-copy .button { box-shadow: 0 10px 24px rgba(20,94,77,.18); }
.welcome-copy .button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(20,94,77,.23); }
.welcome-visual { filter: saturate(.9); }
.wizard-progress { height: .5rem; background: #dce8e2; box-shadow: inset 0 1px 2px rgba(20,63,49,.08); }
.wizard-progress span { background: linear-gradient(90deg, #176650, #36a681); box-shadow: 0 0 12px rgba(54,166,129,.25); }
.wizard-panel { box-shadow: 0 12px 32px rgba(20,63,49,.075); }
.wizard-heading h1 { letter-spacing: -.045em; }
.section-divider { margin-top: 1.6rem; margin-bottom: .9rem; font-weight: 800; }
.business-type-card, .setup-choice, .question-row, .restaurant-routing-option { transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.business-type-card:hover, .setup-choice:hover, .question-row:hover, .restaurant-routing-option:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,63,49,.08); }
.business-type-card.selected, .setup-choice.selected { box-shadow: 0 0 0 3px #def1e9, 0 8px 18px rgba(20,63,49,.08); }
.restaurant-routing-choice { box-shadow: 0 5px 16px rgba(125,56,38,.045); }
.capability-selection-note, .smart-note, .privacy-note, .printer-skip { border: 1px solid #d7e9e0; }
.workspace-preview { box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.starter-box { background: #f5faf7; border-color: #d5e7de; }
.skip-link { color: #6a7d74; font-weight: 700; }
.skip-link:hover { color: var(--green); }
.wizard-actions { margin-top: 1rem; padding: 1rem .25rem; border-top: 1px solid #dce8e2; }
.wizard-actions .button { min-width: 8.5rem; }
.summary-panel { box-shadow: 0 15px 38px rgba(20,63,49,.1); }

@media (max-width: 600px) {
  .onboarding-topbar { height: 64px; }
  .onboarding-brand strong { font-size: 1.1rem; }
  .setup-stepper { min-width: 0; max-width: 58%; overflow-x: auto; justify-content: flex-start; padding: .1rem 0; scrollbar-width: none; }
  .setup-stepper::-webkit-scrollbar { display: none; }
  .setup-step-label { display: none; }
  .setup-step-connector { width: .75rem; margin-inline: .2rem; }
  .setup-step-number { width: 1.55rem; height: 1.55rem; font-size: .65rem; }
  .welcome-screen { padding-top: 2.5rem; }
  .welcome-copy h1 { font-size: clamp(2.25rem, 11vw, 3rem); }
  .welcome-visual { min-height: 300px; transform: scale(.86); transform-origin: top center; }
  .wizard-wrap { margin-top: 1.25rem; }
  .wizard-actions { position: sticky; bottom: 0; z-index: 5; margin-inline: -1.125rem; padding: .8rem 1.125rem calc(.8rem + env(safe-area-inset-bottom)); background: rgba(247,250,248,.94); backdrop-filter: blur(12px); }
  .wizard-actions .button { min-width: 7.5rem; }
}

/* Onboarding should read like a guided setup flow, not a compressed POS table. */
.onboarding-shell {
  min-height: 100vh;
  color: #17251f;
  background: #f5f7f5;
  font-size: 16px;
}
.onboarding-topbar {
  height: 82px;
  padding-inline: max(28px, calc((100vw - 1320px) / 2));
  background: rgba(255,255,255,.96);
  border-bottom-color: #e3e9e5;
  box-shadow: 0 4px 18px rgba(24,48,38,.035);
}
.onboarding-brand { gap: 12px; }
.onboarding-brand .brand-mark { width: 42px; height: 42px; border-radius: 13px; }
.onboarding-brand strong { font-size: 21px; }
.onboarding-brand small { font-size: 10px; }
.setup-stepper { width: min(57rem, 68vw); min-width: 0; justify-content: space-between; }
.setup-step { position: relative; gap: 9px; color: #738079; }
.setup-step-number { width: 32px; height: 32px; font-size: 13px; }
.setup-step-label { font-size: 12px; font-weight: 700; }
.setup-step.current .setup-step-number { box-shadow: 0 0 0 4px #e4f1eb; }
.setup-step-connector { flex: 1 1 18px; min-width: 12px; max-width: 42px; margin-inline: 8px; }

.welcome-screen {
  width: min(1320px, 100%);
  min-height: calc(100vh - 82px);
  padding: 72px 44px;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
  gap: clamp(48px, 7vw, 104px);
}
.welcome-copy { max-width: 620px; }
.welcome-kicker { padding: 9px 13px; font-size: 12px; letter-spacing: .055em; }
.welcome-copy h1 { margin: 24px 0 20px; font-size: clamp(48px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -.06em; }
.welcome-copy > p { max-width: 560px; margin-bottom: 32px; font-size: 18px; line-height: 1.65; }
.welcome-copy .button { min-height: 56px; padding-inline: 23px; font-size: 15px; }
.welcome-assurances { margin-top: 28px; gap: 12px 22px; color: #53645b; font-size: 12px; }
.welcome-assurances span { gap: 7px; }
.welcome-visual { min-height: 510px; }
.orbit { border-color: #dce7e1; }
.visual-center { width: 190px; height: 190px; border-color: #e1e9e4; box-shadow: 0 24px 60px rgba(25,70,55,.12); }
.visual-center strong { margin-top: 14px; font-size: 15px; }
.visual-center small { font-size: 11px; }
.business-card { width: 205px; padding: 15px; gap: 12px; border-color: #e4eae6; border-radius: 15px; box-shadow: 0 12px 32px rgba(32,61,48,.09); }
.business-card strong { font-size: 14px; }
.business-card small { font-size: 11px; }
.visual-icon { width: 44px; height: 44px; border-radius: 12px; }

.wizard-wrap { width: min(820px, calc(100% - 48px)); margin: 42px auto 64px; }
.wizard-wrap.wide { width: min(1120px, calc(100% - 48px)); }
.wizard-progress { height: 6px; margin-bottom: 22px; }
.wizard-panel { padding: 42px 48px; border-color: #e2e8e4; border-radius: 20px; box-shadow: 0 14px 42px rgba(26,54,41,.065); }
.wizard-panel.narrow-panel { max-width: 700px; }
.wizard-heading { gap: 18px; margin-bottom: 34px; }
.wizard-heading.centered { max-width: 700px; margin-bottom: 34px; }
.wizard-heading h1 { margin: 7px 0 10px; font-size: clamp(27px, 3vw, 36px); line-height: 1.14; letter-spacing: -.045em; }
.wizard-heading p { font-size: 15px; line-height: 1.6; }
.wizard-heading .eyebrow { font-size: 11px; letter-spacing: .1em; }
.step-icon { width: 50px; height: 50px; border-radius: 15px; }
.section-divider { margin: 32px 0 16px; gap: 14px; font-size: 12px; letter-spacing: .075em; }
.type-filters { gap: 8px; padding-bottom: 12px; }
.filter-chip { min-height: 39px; padding-inline: 14px; font-size: 12px; }
.business-type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.business-type-card { min-height: 82px; padding: 12px; align-items: center; gap: 10px; border-color: #e0e7e3; border-radius: 12px; }
.business-type-card .type-icon { width: 40px; height: 40px; border-radius: 11px; }
.business-type-card strong { padding-right: 10px; color: #263a31; font-size: 14px; line-height: 1.25; }
.business-type-card small { margin-top: 6px; color: #65736d; font-size: 12px; line-height: 1.4; }
.business-type-card.selected { border: 2px solid #168368; background: #eff8f4; box-shadow: 0 0 0 3px #e1f0e9; }
.business-type-card.selected i { top: 6px; right: 6px; width: 19px; height: 19px; color: #fff; background: #13745d; }
.business-info-grid { gap: 19px 16px; }
.field { gap: 8px; }
.field > span { color: #34463d; font-size: 13px; font-weight: 700; }
.field > small { font-size: 12px; }
.field input, .field select { height: 48px; padding-inline: 14px; border-color: #d8e1dc; border-radius: 10px; font-size: 15px; }
.field input::placeholder { color: #8b9992; }
.wizard-actions { margin-top: 18px; padding: 18px 4px; }
.wizard-actions .button { min-width: 132px; min-height: 48px; padding-inline: 18px; font-size: 14px; }
.alert-message { padding: 13px 16px; font-size: 14px; }

.capability-selection-note { padding: 15px 17px; gap: 12px; border-radius: 12px; font-size: 14px; line-height: 1.55; }
.onboarding-capability-group { padding-bottom: 22px; }
.capability-group-heading { margin-bottom: 12px; }
.capability-group-heading h3 { font-size: 11px; }
.capability-group-heading small { font-size: 12px; }
.question-list { gap: 10px; }
.question-row { min-height: 76px; padding: 15px 17px; grid-template-columns: 30px minmax(0,1fr) auto; gap: 13px; border-radius: 12px; }
.question-row strong, .setup-choice strong, .logo-upload strong { font-size: 14px; }
.question-row small, .setup-choice small, .logo-upload small, .starter-box > small { color: #65736d; font-size: 12px; line-height: 1.45; }
.yes-no, .optional-count { font-size: 12px; }
.restaurant-routing-choice { padding: 22px; border-radius: 16px; }
.restaurant-routing-choice h3 { font-size: 19px; }
.restaurant-routing-choice p { font-size: 14px; line-height: 1.5; }
.restaurant-routing-option { min-height: 108px; padding: 15px; gap: 12px; border-radius: 13px; }
.restaurant-routing-option strong { font-size: 14px; }
.restaurant-routing-option small { font-size: 12px; line-height: 1.5; }
.smart-note, .privacy-note, .printer-skip, .info-strip { font-size: 13px; line-height: 1.5; }
.setup-choice { min-height: 145px; padding: 20px; border-radius: 14px; }
.skip-link { min-height: 42px; font-size: 13px; }
.starter-box { padding: 22px; border-radius: 14px; }
.starter-menu-heading strong { font-size: 15px; }
.starter-menu-heading small { font-size: 12px; }
.summary-panel > p { font-size: 15px; line-height: 1.6; }
.summary-business strong { font-size: 16px; }
.summary-business small, .summary-label, .summary-business span, .capability-summary span, .ready-note { font-size: 12px; }

.onboarding-shell :is(button, a, input, select, summary):focus-visible {
  outline: 3px solid rgba(22,116,94,.42);
  outline-offset: 3px;
}
.core-capability:not(.yes) .yes-no { color: #737f79; }
.core-capability:not(.yes) .question-check { color: transparent; border-color: #cbd5cf; background: #fff; }
.setup-step.skipped { color: #929d97; }
.setup-step.skipped .setup-step-number { color: #8a9690; border-style: dashed; background: #f7f9f8; }

@media (max-width: 850px) {
  .welcome-screen { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 56px 30px 40px; }
  .welcome-copy { margin-inline: auto; text-align: center; }
  .welcome-copy > p { margin-inline: auto; }
  .welcome-visual { width: min(560px, 100%); margin-inline: auto; }
  .wizard-wrap, .wizard-wrap.wide { width: min(760px, calc(100% - 36px)); }
  .wizard-panel { padding: 34px 32px; }
  .setup-stepper { width: min(50rem, 70vw); }
  .setup-step-label { font-size: 11px; }
  .setup-step-connector { margin-inline: 5px; }
  .business-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .onboarding-topbar { height: 68px; padding-inline: 16px; }
  .onboarding-brand { gap: 9px; }
  .onboarding-brand .brand-mark { width: 36px; height: 36px; border-radius: 11px; }
  .onboarding-brand strong { font-size: 18px; }
  .onboarding-brand small { font-size: 9px; }
  .setup-stepper { width: auto; max-width: 58%; justify-content: flex-end; overflow: visible; }
  .setup-step:not(.current), .setup-step-connector { display: none; }
  .setup-step.current { gap: 8px; }
  .setup-step.current .setup-step-label { display: inline; font-size: 12px; }
  .setup-step-number { width: 29px; height: 29px; font-size: 12px; }
  .welcome-screen { min-height: calc(100vh - 68px); padding: 48px 22px 28px; gap: 8px; }
  .welcome-copy h1 { margin: 20px 0 15px; font-size: clamp(39px, 11vw, 54px); }
  .welcome-copy h1 br { display: none; }
  .welcome-copy > p { font-size: 16px; line-height: 1.6; }
  .welcome-assurances { font-size: 11px; }
  .welcome-visual { min-height: 300px; transform: scale(.82); transform-origin: top center; margin-bottom: -46px; }
  .business-card { width: 178px; padding: 12px; }
  .business-card strong { font-size: 13px; }
  .business-card small { font-size: 10px; }
  .visual-center { width: 160px; height: 160px; }
  .wizard-wrap, .wizard-wrap.wide { width: calc(100% - 24px); margin: 20px auto 34px; }
  .wizard-progress { margin-bottom: 14px; }
  .wizard-panel { padding: 26px 20px; border-radius: 16px; }
  .wizard-heading, .wizard-heading.centered { margin-bottom: 25px; }
  .wizard-heading h1 { font-size: 27px; }
  .wizard-heading p { font-size: 14px; }
  .section-divider { margin-top: 25px; font-size: 11px; }
  .business-type-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .business-type-card { min-height: 92px; padding: 11px; gap: 9px; }
  .business-type-card .type-icon { width: 34px; height: 34px; }
  .business-type-card strong { font-size: 13px; }
  .business-type-card small { font-size: 11px; }
  .business-info-grid, .two-fields, .setup-choice-grid, .capability-toggle-list { grid-template-columns: 1fr; }
  .field > span { font-size: 13px; }
  .field input, .field select { height: 48px; font-size: 16px; }
  .wizard-actions { position: sticky; bottom: 0; z-index: 5; margin-inline: -12px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: rgba(245,247,245,.96); border-top: 1px solid #dfe7e2; backdrop-filter: blur(12px); }
  .wizard-actions .button { min-width: 112px; min-height: 46px; }
  .restaurant-routing-choice { padding: 17px; }
  .restaurant-routing-options { grid-template-columns: 1fr; }
  .setup-choice { min-height: 112px; }
}
/* Sync controls need horizontal actions inside the settings panels; the
   generic stacked-actions rule is intentionally reserved for modal footers. */
.settings-heading .stacked-actions, .settings-note .stacked-actions { padding: 0 !important; display: flex !important; gap: 7px; align-items: center; }
.settings-heading .stacked-actions .button, .settings-note .stacked-actions .button { width: auto; }

/* Keep the checkout usable after a temporary SignalR interruption and make lost circuits recover clearly. */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  position: fixed;
  z-index: 10000;
  inset: 0;
  padding: 1rem;
  place-items: center;
  background: rgba(16, 34, 28, .58);
  backdrop-filter: blur(4px);
}
.reconnect-card {
  width: min(100%, 32rem);
  padding: clamp(1.5rem, 5vw, 2.25rem);
  border: 1px solid #dce8e2;
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: 0 22px 70px rgba(10, 36, 27, .25);
}
.reconnect-indicator {
  width: .75rem;
  height: .75rem;
  margin-bottom: 1rem;
  display: block;
  border-radius: 50%;
  background: #d99437;
  box-shadow: 0 0 0 6px #fff2dc;
  animation: kasa-reconnect-pulse 1.2s ease-in-out infinite alternate;
}
.reconnect-card h1 { margin: .4rem 0 .6rem; font-size: clamp(1.45rem, 4vw, 1.9rem); }
.reconnect-card > p:not(.eyebrow) { color: #52645c; line-height: 1.55; }
.reconnect-card .reconnect-transaction-note { margin: 1.1rem 0 0; padding: .75rem .85rem; border-radius: .65rem; color: #6d5123; background: #fff8e9; font-size: .875rem; }
.reconnect-actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .65rem; }
@keyframes kasa-reconnect-pulse { to { box-shadow: 0 0 0 10px rgba(255, 242, 220, .35); } }
@media (max-width: 480px) { .reconnect-actions { flex-direction: column; }.reconnect-actions .button { width: 100%; } }

.business-switcher { margin: 0 13px 12px; display: flex; flex-direction: column; gap: 5px; color: var(--subtle); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.business-switcher select { width: 100%; min-height: 36px; padding: 0 9px; border: 1px solid #d7e4de; border-radius: 8px; background: #fff; color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.login-home-link { display: inline-flex; margin: 0 0 1rem; color: #42675a; font-size: .9rem; font-weight: 700; }
.login-home-link:hover { color: var(--green-2); }
.public-home-not-found { width: min(100% - 2rem, 42rem); min-height: 70vh; margin: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.public-home-not-found h1 { margin: .8rem 0 .45rem; font-size: clamp(2rem, 6vw, 3rem); }
.public-home-not-found p { max-width: 34rem; color: #5d6b64; }

.public-home { min-height: 100vh; padding: 0 clamp(1rem, 5vw, 5rem); background: radial-gradient(circle at 76% 12%, #e8f3ed 0, transparent 30rem), #f8faf8; }
.public-home-nav, .public-home-footer { width: min(100%, 1240px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.public-home-nav { min-height: 88px; }
.public-home-brand { display: inline-flex; align-items: center; gap: .7rem; }
.public-home-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.public-home-brand strong { font: 800 1.25rem var(--display); letter-spacing: -.05em; }
.public-home-brand small { margin-top: .32rem; color: #718078; font-size: .58rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.public-home-nav nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); color: #53625d; font-size: .87rem; font-weight: 600; }
.public-home-nav nav > a:not(.button):hover, .public-home-text-link:hover { color: var(--green-2); }
.public-home-nav .button { min-height: 42px; padding-inline: 1.2rem; }
.public-home-hero { width: min(100%, 1240px); min-height: 520px; margin: 1.15rem auto 5.5rem; padding: clamp(2rem, 5.4vw, 4.8rem); display: grid; grid-template-columns: minmax(0, .93fr) minmax(400px, 1.07fr); align-items: center; gap: clamp(2rem, 5vw, 4.8rem); overflow: hidden; border: 1px solid #174d40; border-radius: 30px; color: #f5faf7; background: radial-gradient(circle at 93% 8%, rgba(86, 163, 128, .27), transparent 20rem), linear-gradient(130deg, #103d32, #0c2d26 66%, #163f32); box-shadow: 0 24px 65px rgba(17, 57, 45, .16); }
.public-home-copy { max-width: 570px; }
.public-home-kicker { display: inline-flex; align-items: center; gap: .55rem; color: #b9d9cb; font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.public-home-kicker > span { width: .45rem; height: .45rem; border-radius: 50%; background: #79d3a7; box-shadow: 0 0 0 5px rgba(121, 211, 167, .12); }
.public-home-copy h1 { max-width: 640px; margin: 1.2rem 0 1rem; font-size: clamp(2.5rem, 4.5vw, 4.3rem); line-height: 1.04; letter-spacing: -.065em; }
.public-home-copy > p:not(.public-home-note) { max-width: 490px; margin-bottom: 1.65rem; color: #d0e0d8; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.7; }
.public-home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; }
.public-home-primary { min-height: 52px; padding: 0 1.35rem; display: inline-flex; align-items: center; gap: 1.1rem; border: 1px solid #a8e1c1; border-radius: 9px; color: #143d32; background: #c5efd5; font-weight: 800; box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }
.public-home-primary:hover { transform: translateY(-1px); background: #d7f5e2; }
.public-home-primary span { font-size: 1.25rem; }
.public-home-text-link { color: #f5faf7; font-size: .9rem; font-weight: 700; }
.public-home-text-link span { margin-left: .35rem; color: #a8d7bf; }
.public-home-note { margin: 1.4rem 0 0; color: #a9c7bb; font-size: .78rem; }
.public-home-preview { overflow: hidden; border: 1px solid rgba(255, 255, 255, .35); border-radius: 17px; color: #20312b; background: #f7faf8; box-shadow: 0 22px 55px rgba(3, 22, 16, .28); transform: rotate(1.1deg); }
.preview-topbar { min-height: 66px; padding: .8rem 1rem; display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid #e1e9e4; background: #fff; }
.preview-topbar > div { display: flex; flex-direction: column; line-height: 1.25; }
.preview-topbar strong { font-size: .78rem; }
.preview-topbar small { margin-top: .2rem; color: #77857e; font-size: .67rem; }
.preview-status { margin-left: auto; padding: .32rem .55rem; border: 1px solid #d9e8df; border-radius: 99px; color: #356852; background: #f0f8f3; font-size: .67rem; font-weight: 700; }
.preview-status i { width: .4rem; height: .4rem; margin-right: .28rem; display: inline-block; border-radius: 50%; background: #42a474; }
.preview-body { min-height: 325px; display: grid; grid-template-columns: 130px 1fr; }
.preview-sidebar { padding: 1.1rem .65rem; display: flex; flex-direction: column; gap: .38rem; border-right: 1px solid #e3eae6; background: #fbfcfb; }
.preview-sidebar > span { padding: .57rem .48rem; display: flex; align-items: center; gap: .48rem; border-radius: 6px; color: #74817a; font-size: .67rem; font-weight: 600; }
.preview-sidebar > span.active { color: #185b48; background: #e9f3ed; }
.preview-sidebar b { width: 1rem; color: #60776b; font-size: .88rem; text-align: center; }
.preview-main { padding: 1.55rem clamp(1rem, 2.7vw, 2rem); }
.preview-label { color: #658274; font-size: .59rem; font-weight: 800; letter-spacing: .12em; }
.preview-main h2 { margin: .3rem 0 .2rem; font-size: clamp(1.1rem, 2vw, 1.45rem); letter-spacing: -.045em; }
.preview-main > p { margin: 0 0 1.15rem; color: #74817a; font-size: .72rem; }
.preview-workflow { display: flex; flex-direction: column; gap: .55rem; }
.preview-workflow > div { min-height: 58px; padding: .55rem .65rem; display: flex; align-items: center; gap: .65rem; border: 1px solid #e2e9e5; border-radius: 8px; background: #fff; }
.preview-workflow > div > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.preview-workflow strong { color: #273831; font-size: .71rem; }
.preview-workflow small { margin-top: .12rem; color: #75817b; font-size: .59rem; }
.preview-workflow > div > b { color: #7c9286; font-size: .9rem; }
.preview-icon, .feature-symbol { display: grid; place-items: center; border-radius: 8px; font-weight: 800; }
.preview-icon { width: 31px; height: 31px; font-size: .9rem; }
.green-icon, .feature-green { color: #1f7759; background: #e5f4eb; }
.amber-icon, .feature-amber { color: #a76a21; background: #fff1dc; }
.blue-icon, .feature-blue { color: #376e99; background: #e8f2fa; }
.preview-footer { margin-top: .9rem; display: flex; align-items: center; justify-content: space-between; color: #6e7e75; font-size: .62rem; }
.preview-dots { display: flex; gap: .25rem; }
.preview-dots i { width: .28rem; height: .28rem; border-radius: 50%; background: #b1c5b9; }
.preview-dots i:first-child { background: #388365; }
.public-home-capabilities, .public-home-business-types { width: min(100%, 1160px); margin: 0 auto; }
.public-home-section-heading { max-width: 670px; margin: 0 auto 2.3rem; text-align: center; }
.public-home-section-heading .eyebrow, .public-home-business-types .eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.public-home-section-heading h2, .public-home-business-types h2 { margin: .55rem 0 .6rem; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.055em; }
.public-home-section-heading p, .public-home-business-types > p { color: #5d6b64; line-height: 1.7; }
.public-home-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.public-home-feature-grid article { min-height: 200px; padding: 1.5rem; border: 1px solid #e1e8e3; border-radius: 14px; background: rgba(255, 255, 255, .83); box-shadow: 0 8px 24px rgba(23, 50, 39, .035); }
.feature-symbol { width: 40px; height: 40px; margin-bottom: 1.15rem; font-size: 1rem; }
.public-home-feature-grid h3 { margin-bottom: .4rem; font-size: 1.05rem; letter-spacing: -.025em; }
.public-home-feature-grid p { margin: 0; color: #627169; font-size: .88rem; line-height: 1.65; }
.public-home-business-types { margin-top: 5.25rem; padding: 2rem 2.2rem; display: grid; grid-template-columns: 1.05fr 1.35fr auto; align-items: center; gap: 1.6rem; border: 1px solid #dbe6df; border-radius: 17px; background: #edf4ef; }
.public-home-business-types h2 { margin-bottom: 0; font-size: clamp(1.4rem, 2vw, 1.85rem); }
.public-home-business-types > p { margin: 0; font-size: .9rem; }
.public-home-business-types .button { min-height: 44px; padding-inline: 1rem; white-space: nowrap; }
.public-home-footer { min-height: 115px; margin-top: 2rem; border-top: 1px solid #e1e8e3; }
.public-home-footer > span { color: #718078; font-size: .8rem; }
@media (max-width: 960px) {
  .public-home-hero { grid-template-columns: 1fr; gap: 2.2rem; }
  .public-home-copy { max-width: 720px; }
  .public-home-preview { width: min(100%, 620px); margin-inline: auto; }
  .public-home-business-types { grid-template-columns: 1fr 1fr; }
  .public-home-business-types .button { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .public-home { padding-inline: 1rem; }
  .public-home-nav { min-height: 72px; }
  .public-home-nav nav { gap: .75rem; }
  .public-home-nav nav > a:not(.button) { display: none; }
  .public-home-nav .button { min-height: 38px; padding-inline: .9rem; }
  .public-home-hero { min-height: auto; margin-top: .45rem; margin-bottom: 3.75rem; padding: 1.65rem 1.25rem; gap: 1.6rem; border-radius: 20px; }
  .public-home-copy h1 { margin-top: .9rem; font-size: clamp(2.35rem, 11vw, 3.3rem); }
  .public-home-copy > p:not(.public-home-note) { font-size: .97rem; }
  .public-home-actions { align-items: flex-start; flex-direction: column; gap: .9rem; }
  .public-home-preview { transform: none; }
  .preview-body { grid-template-columns: 88px 1fr; min-height: 295px; }
  .preview-sidebar { padding-inline: .4rem; }
  .preview-sidebar > span { gap: .25rem; padding-inline: .3rem; font-size: .58rem; }
  .preview-main { padding: 1.2rem .7rem; }
  .preview-workflow > div { gap: .4rem; padding-inline: .4rem; }
  .preview-workflow small { font-size: .53rem; }
  .public-home-section-heading { margin-bottom: 1.5rem; text-align: left; }
  .public-home-feature-grid { grid-template-columns: 1fr; }
  .public-home-feature-grid article { min-height: 0; }
  .public-home-business-types { margin-top: 3.5rem; padding: 1.3rem; grid-template-columns: 1fr; gap: .9rem; }
  .public-home-business-types .button { grid-column: auto; }
  .public-home-footer { min-height: 95px; align-items: flex-start; flex-direction: column; justify-content: center; gap: .7rem; }
}