:root {
  color-scheme: dark;
  --black: #000;
  --panel: #000;
  --raised: #000;
  --line: rgba(255,255,255,.115);
  --muted: #8d8d93;
  --white: #f6f6f8;
  --purple: #9b43ef;
  --blue: #3268ed;
  --danger: #ff5e57;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; background: #000; color: var(--white); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, input { color: inherit; font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: 0; left: 1rem; z-index: 1000; padding: .75rem 1rem; background: white; color: black; transform: translateY(-120%); }
.skip-link:focus { transform: none; }

.pos-app { display: grid; width: 100vw; height: 100dvh; grid-template-columns: 200px minmax(0,1fr) clamp(330px,28vw,430px); grid-template-rows: 48px minmax(0,1fr); overflow: hidden; background: #000; }
.ios-status { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0 22px; background: #000; color: #f7f7f7; font-size: 14px; font-weight: 600; letter-spacing: .005em; }
.status-spacer { flex: 1; }
.status-symbols { font-size: 15px; letter-spacing: -.08em; }
.battery { position: relative; display: block; width: 25px; height: 12px; border: 1px solid #f7f7f7; border-radius: 3px; }
.battery::after { position: absolute; top: 3px; right: -3px; width: 2px; height: 5px; border-radius: 0 2px 2px 0; background: #f7f7f7; content: ""; }
.battery i { display: block; width: 90%; height: 8px; margin: 1px; border-radius: 1px; background: #42d567; }

.sidebar { display: flex; min-width: 0; min-height: 0; justify-content: space-between; flex-direction: column; padding: 18px 10px 10px; border-right: 1px solid rgba(255,255,255,.055); background: #050505; }
.side-nav { display: grid; gap: 5px; }
.nav-item { display: flex; width: 100%; min-height: 48px; align-items: center; gap: 12px; padding: 0 14px; border: 0; border-radius: 13px; background: transparent; color: #8c8c91; text-align: left; font-size: 15px; font-weight: 400; }
.nav-item svg { width: 28px; height: 22px; flex: 0 0 28px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.nav-item.selected { background: rgba(255,255,255,.13); color: #fff; }
.nav-item:not(.selected):not(:disabled):hover { background: rgba(255,255,255,.055); color: #d8d8da; }
.nav-item.disabled { opacity: .25; }
.staff-card { display: flex; min-height: 58px; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid rgba(155,67,239,.23); border-radius: 12px; background: rgba(155,67,239,.085); color: #d5b4fa; font-size: 14px; }
.staff-avatar { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: rgba(155,67,239,.24); color: #be7dff; font-size: 12px; font-weight: 700; }

.catalog { min-width: 0; min-height: 0; overflow: hidden; background: #000; }
.search-wrap { display: flex; height: 48px; align-items: center; margin: 18px 18px 0; padding: 0 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #151517; }
.search-wrap svg { width: 18px; flex: 0 0 18px; fill: none; stroke: #828287; stroke-width: 1.8; }
.search-wrap input { width: 100%; height: 100%; padding: 0 11px; border: 0; outline: 0; background: transparent; font-size: 14px; }
.search-wrap input::placeholder { color: #77777c; }
.search-wrap:focus-within { border-color: rgba(155,67,239,.65); box-shadow: 0 0 0 3px rgba(155,67,239,.12); }
.categories { display: flex; gap: 8px; overflow-x: auto; padding: 12px 18px 11px; border-bottom: 1px solid rgba(255,255,255,.07); scrollbar-width: none; }
.categories::-webkit-scrollbar { display: none; }
.category-button { flex: 0 0 auto; height: 36px; padding: 0 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: #151517; color: #9a9aa0; font-size: 12px; }
.category-button.active { border-color: #fff; background: #fff; color: #050505; }
.catalog-meta { display: flex; height: 50px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; }
.catalog-meta p { margin: 0; font-size: 14px; font-weight: 600; }
.catalog-meta small { margin-left: 6px; color: #77777c; font-size: 10px; font-weight: 500; }
.catalog-meta button { border: 0; background: transparent; color: #77777c; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.demo-mode-switch { display: flex; height: 64px; align-items: stretch; gap: 27px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.07); background: #000; }
.demo-mode-switch button { position: relative; display: flex; align-items: center; gap: 8px; padding: 2px 0 0; border: 0; background: transparent; color: #737378; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.demo-mode-switch button img { width: 32px; height: 48px; object-fit: contain; opacity: .55; filter: saturate(.65); transition: opacity 140ms, filter 140ms, transform 140ms; }
.demo-mode-switch button img.tab-corona { transform: scale(1.6); }
.demo-mode-switch button img.tab-latte { transform: scale(1.12); }
.demo-mode-switch button:hover img { opacity: .82; }
.demo-mode-switch button:hover { color: #c8c8cc; }
.demo-mode-switch button.active { color: #fff; }
.demo-mode-switch button.active img { opacity: 1; filter: none; }
.demo-mode-switch button.active img.tab-corona { transform: scale(1.6) translateY(-1px); }
.demo-mode-switch button.active img.tab-latte { transform: scale(1.12) translateY(-1px); }
.demo-mode-switch button.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px 2px 0 0; background: #fff; content: ""; }
.product-grid { display: grid; height: calc(100% - 241px); grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: minmax(154px, 1fr); gap: 12px; overflow-y: auto; padding: 0 18px 18px; align-content: start; }
.product-card { position: relative; min-width: 0; min-height: 154px; overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: #000; text-align: left; transition: border-color 140ms, transform 140ms; }
.product-card:hover { border-color: rgba(255,255,255,.3); }
.product-card:active { transform: scale(.985); }
.product-image { position: absolute; inset: 7% 7% 5%; background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.07), transparent 56%); }
.product-image img { width: 100%; height: 100%; object-fit: contain; transform: scale(.88); filter: drop-shadow(0 10px 12px rgba(0,0,0,.5)); transition: transform 180ms; }
.product-card:hover img { transform: scale(.94); }
.product-info { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; padding: 12px 13px; pointer-events: none; }
.product-info strong { max-width: 74%; font-size: 12px; font-weight: 500; line-height: 1.25; text-shadow: 0 1px 5px #000; }
.product-info span { align-self: flex-end; font-size: 11px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 5px #000; }
.add-pulse { position: absolute; top: 9px; right: 9px; z-index: 3; display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(0,0,0,.78); opacity: 0; transform: scale(.7); transition: opacity 140ms, transform 140ms; }
.product-card:hover .add-pulse, .product-card:focus-visible .add-pulse { opacity: 1; transform: none; }
.no-results { grid-column: 1 / -1; display: grid; min-height: 220px; place-content: center; color: var(--muted); text-align: center; }
.no-results p { margin: 7px 0 0; font-size: 13px; }

.order-panel { display: grid; min-height: 0; grid-template-rows: 62px minmax(0,1fr) auto; border-left: 1px solid rgba(255,255,255,.085); background: #000; }
.order-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.075); }
.order-heading h1 { margin: 0; font-size: 17px; font-weight: 650; }
.clear-order { border: 0; background: transparent; color: var(--danger); font-size: 12px; }
.clear-order:disabled { visibility: hidden; }
.order-lines { min-height: 0; overflow-y: auto; padding: 12px; }
.empty-order { display: flex; height: 100%; min-height: 230px; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.tap-icon { display: grid; width: 61px; height: 61px; place-items: center; margin-bottom: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: #000; font-size: 28px; font-weight: 200; }
.empty-order strong { font-size: 15px; font-weight: 550; }
.empty-order p { margin: 6px 0 0; color: #818187; font-size: 12px; }
.order-line { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: #000; }
.order-line + .order-line { margin-top: 8px; }
.line-thumb { width: 48px; height: 48px; border-radius: 9px; background: #080808; object-fit: contain; }
.line-info { min-width: 0; }
.line-info strong { display: block; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.line-info small { display: block; overflow: hidden; margin: 3px 0 1px; color: #aaaab0; font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.line-info span { color: #85858a; font-size: 10px; }
.line-actions { display: grid; grid-template-columns: 27px 25px 27px; align-items: center; text-align: center; }
.line-actions button { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: transparent; }
.line-actions span { font-size: 11px; }
.order-checkout { padding: 16px; border-top: 1px solid rgba(255,255,255,.075); background: #000; }
.item-summary, .totals span { display: flex; justify-content: space-between; }
.item-summary { align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.item-summary span { color: #85858a; font-size: 11px; }
.item-summary strong { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.totals { display: grid; gap: 6px; padding: 11px 0; }
.totals span { color: #85858a; font-size: 10px; }
.totals b { color: #c9c9cd; font-weight: 500; }
.pay-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; }
.pay-button { height: 52px; border-radius: 9px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.pay-button:disabled { opacity: .28; }
.pay-cash { border: 1px solid rgba(255,255,255,.22); background: transparent; }
.pay-card { border: 0; background: linear-gradient(110deg,var(--purple),var(--blue)); }
.reader-status { display: flex; align-items: center; gap: 7px; padding-top: 11px; color: #818187; font-size: 9px; }
.reader-status > span { width: 7px; height: 7px; border-radius: 50%; background: #4ed47a; box-shadow: 0 0 9px rgba(78,212,122,.65); }
.reader-status b { margin-left: auto; font-weight: 500; }
.mobile-order-button { display: none; }

.payment-modal, .cash-modal { width: min(92vw,520px); padding: 54px 38px 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: #121216; color: white; text-align: center; box-shadow: 0 35px 100px rgba(0,0,0,.75); }
.payment-modal::backdrop, .cash-modal::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(8px); }
.modal-close, .tip-back { position: absolute; top: 16px; right: 17px; z-index: 2; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: transparent; color: #8d8d93; font-size: 22px; }
.payment-reader { display: grid; width: 88px; height: 88px; place-items: center; margin: 0 auto 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(255,255,255,.035); font-size: 28px; }
.payment-reader span { transform: rotate(180deg); }
.eyebrow { margin: 0 0 9px; color: #b56bfa; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.payment-modal h2, .cash-modal h2 { margin: 0; font-size: 30px; letter-spacing: -.035em; }
.payment-amount { margin: 14px 0 0; font-size: 38px; font-weight: 700; letter-spacing: -.04em; }
.payment-copy { max-width: 350px; margin: 10px auto 0; color: #8d8d93; font-size: 13px; line-height: 1.5; }
.simulate-button { width: min(100%,340px); height: 52px; margin-top: 24px; border: 0; border-radius: 10px; background: #fff; color: #050505; font-size: 12px; font-weight: 750; }
.cash-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 24px; }
.cash-grid button { height: 58px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.035); }

.coffee-customizer { width: min(94vw,960px); height: min(94dvh,800px); max-width: none; max-height: none; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 28px; overflow: hidden; background: #141416; color: #fff; box-shadow: 0 35px 100px rgba(0,0,0,.8); }
.coffee-customizer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(5px); }
.coffee-customizer-shell { position: relative; display: grid; height: 100%; grid-template-rows: auto auto auto minmax(0,1fr) auto; gap: 20px; padding: 30px; }
.coffee-customizer-close { position: absolute; top: 18px; right: 20px; z-index: 2; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: transparent; color: rgba(255,255,255,.62); font-size: 24px; font-weight: 300; }
.coffee-customizer-header { padding-right: 52px; }
.coffee-customizer-header h2 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.025em; }
.coffee-customizer-header p { margin: 7px 0 0; color: rgba(255,255,255,.6); font-size: 13px; }
.coffee-progress { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.coffee-progress-step { min-width: 0; }
.coffee-progress-step i { display: block; height: 3px; border-radius: 99px; background: rgba(255,255,255,.14); }
.coffee-progress-step.complete i { background: #fff; }
.coffee-progress-step b { display: block; overflow: hidden; margin-top: 7px; color: rgba(255,255,255,.48); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.coffee-progress-step.current b { color: #fff; font-weight: 700; }
.coffee-step-label { margin: 0; color: rgba(255,255,255,.65); font-size: 10px; font-weight: 750; letter-spacing: 1.3px; }
.coffee-options { display: grid; align-content: start; gap: 10px; min-height: 0; overflow-y: auto; padding-right: 2px; }
.coffee-option { display: grid; min-height: 68px; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 0 20px; border: 0; border-radius: 16px; background: rgba(255,255,255,.08); color: #fff; text-align: left; }
.coffee-option:hover { background: rgba(255,255,255,.12); }
.coffee-option.selected { background: rgba(255,255,255,.22); }
.coffee-option strong { font-size: 17px; font-weight: 600; }
.coffee-option b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.coffee-modifier-option { min-height: 58px; padding-inline: 18px; border-radius: 15px; }
.coffee-modifier-option strong { font-size: 15px; }
.coffee-modifier-option b { font-size: 13px; }
.coffee-check { display: grid; width: 20px; height: 20px; place-items: center; border: 1.5px solid rgba(255,255,255,.7); border-radius: 50%; font-size: 12px; line-height: 1; }
.coffee-option.selected .coffee-check { border-color: #fff; background: #fff; color: #111; }
.coffee-customizer-footer { display: flex; align-items: center; gap: 12px; padding-top: 2px; }
.coffee-back { width: 110px; height: 56px; border: 0; border-radius: 15px; background: rgba(255,255,255,.1); color: #fff; font-size: 15px; font-weight: 650; }
.coffee-customizer-price { margin-left: auto; color: rgba(255,255,255,.75); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.coffee-next { min-width: 164px; height: 56px; padding: 0 20px; border: 0; border-radius: 15px; background: #fff; color: #050505; font-size: 15px; font-weight: 650; }
.coffee-next:disabled { opacity: .4; }
.coffee-next span { margin-left: 7px; }

.tip-screen { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: clamp(270px,31vw,360px) 1px minmax(0,1fr); background: linear-gradient(135deg,#0b0c0f,#111217 50%,#090a0d); }
.tip-screen::before { grid-column: 2; background: rgba(255,255,255,.045); content: ""; }
.tip-summary-panel { grid-column: 1; grid-row: 1; display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 34px 24px; }
.tip-brand { width: 150px; height: 42px; margin-left: 8px; }
.summary-card { flex: 1; margin-top: 64px; padding: 22px; border: 1px solid rgba(255,255,255,.035); border-radius: 10px; background: linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.035)); }
.summary-card h2 { margin: 0 0 20px; font-size: 17px; }
.summary-divider { height: 1px; background: rgba(255,255,255,.14); }
.summary-card dl { margin: 8px 0 5px; }
.summary-card dl div { display: flex; justify-content: space-between; padding: 10px 0; color: rgba(255,255,255,.82); font-size: 14px; }
.summary-card dt, .summary-card dd { margin: 0; }
.summary-card dd { font-variant-numeric: tabular-nums; }
.summary-card .summary-total { margin-top: 0; }
.summary-card .summary-total div { padding-top: 15px; color: #fff; font-size: 17px; font-weight: 700; }
.tip-content { position: relative; grid-column: 3; grid-row: 1; min-width: 0; min-height: 0; padding: 52px 30px; overflow-y: auto; }
.tip-content > h1 { margin: 0; font-size: 25px; font-weight: 750; letter-spacing: -.02em; }
.tip-content > p:not(.acknowledgment) { margin: 5px 0 0; color: rgba(255,255,255,.58); font-size: 14px; }
.tip-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 38px; }
.tip-choice { position: relative; display: grid; height: 124px; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.012); }
.tip-choice strong { font-size: 27px; font-weight: 750; letter-spacing: -.02em; }
.tip-choice.selected { border: 1.6px solid var(--purple); background: rgba(155,67,239,.055); color: var(--purple); }
.tip-choice.recommended > span { position: absolute; top: -18px; left: 50%; height: 22px; padding: 0 13px; border-radius: 5px; background: var(--purple); color: #fff; font-size: 8px; font-weight: 900; line-height: 22px; letter-spacing: .8px; transform: translateX(-50%); }
.custom-tip { cursor: pointer; }
.custom-tip input { display: none; width: calc(100% - 20px); border: 0; outline: 0; background: transparent; color: var(--purple); text-align: center; font-size: 23px; font-weight: 750; font-variant-numeric: tabular-nums; }
.custom-tip.selected input { display: block; }
.custom-tip.selected .custom-label { display: none; }
.custom-label { color: #fff; font-size: 16px; font-weight: 700; }
.tip-content > h2 { margin: 38px 0 12px; font-size: 17px; }
.signature-section { position: relative; min-height: 210px; height: calc(100dvh - 410px); max-height: 360px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.008); }
.signature-section canvas { display: block; width: 100%; height: 100%; padding: 18px; touch-action: none; }
.signature-footer { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.signature-footer span { color: rgba(255,255,255,.65); font-size: 12px; font-weight: 700; }
.signature-footer button { border: 0; background: transparent; color: var(--purple); font-size: 14px; font-weight: 500; pointer-events: auto; }
.signature-footer button:disabled { opacity: .55; }
.acknowledgment { margin: 12px 0 0; color: rgba(255,255,255,.46); font-size: 9px; font-weight: 400; line-height: 1.45; letter-spacing: .15px; }
.tip-back { top: 17px; right: 19px; }
.finalizing-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(0,0,0,.82); text-align: center; }
.spinner { width: 31px; height: 31px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.finalizing-overlay h2 { margin: 16px 0 0; font-size: 23px; font-weight: 900; }
.finalizing-overlay p { max-width: 430px; margin: 8px 20px 0; color: #929298; font-size: 14px; line-height: 1.45; }
@keyframes spin { to { transform: rotate(360deg); } }

.success-screen { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #000; text-align: center; }
.success-mark { display: grid; width: 86px; height: 86px; place-items: center; border-radius: 50%; background: #fff; color: #000; font-size: 38px; }
.success-screen p { margin: 22px 0 8px; color: #a96bf0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.success-screen h2 { margin: 0; font-size: 34px; }
.success-screen button { width: 260px; height: 52px; margin-top: 25px; border: 0; border-radius: 10px; background: #fff; color: #000; font-weight: 700; }
.toast { position: fixed; bottom: 25px; left: 50%; z-index: 500; padding: 10px 14px; border-radius: 999px; background: #f5f6f7; color: #090b0f; font-size: 11px; font-weight: 650; opacity: 0; transform: translate(-50%,12px); transition: opacity 180ms, transform 180ms; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1100px) {
  .pos-app { grid-template-columns: 176px minmax(0,1fr) 320px; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tip-options { gap: 10px; }
  .tip-choice { height: 108px; }
}
@media (max-width: 760px) {
  .pos-app { grid-template-columns: 72px minmax(0,1fr); grid-template-rows: 38px minmax(0,1fr); }
  .ios-status { padding: 0 12px; font-size: 11px; }
  .status-date, .status-symbols { display: none; }
  .sidebar { padding: 8px 7px; }
  .nav-item { justify-content: center; min-height: 47px; padding: 0; }
  .nav-item span { display: none; }
  .staff-card { justify-content: center; min-height: 50px; padding: 0; }
  .staff-card > span:last-child { display: none; }
  .catalog { grid-column: 2; }
  .catalog-meta { padding-inline: 12px; }
  .catalog-meta p { font-size: 12px; }
  .catalog-meta small, .catalog-meta > #reset-demo { display: none; }
  .demo-mode-switch { height: 56px; gap: 22px; padding-inline: 15px; }
  .demo-mode-switch button { font-size: 12px; }
  .demo-mode-switch button img { width: 27px; height: 40px; }
  .product-grid { height: calc(100% - 233px); }
  .order-panel { position: fixed; inset: 38px 0 0 72px; z-index: 40; visibility: hidden; opacity: 0; transform: translateY(16px); transition: 180ms; }
  .order-panel.open { visibility: visible; opacity: 1; transform: none; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding-bottom: 86px; }
  .mobile-order-button { position: fixed; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); left: 82px; z-index: 50; display: flex; height: 58px; align-items: center; justify-content: space-between; padding: 0 18px; border: 0; border-radius: 11px; background: #fff; color: #000; box-shadow: 0 10px 40px #000; }
  .mobile-order-button b { display: inline-grid; min-width: 21px; height: 21px; place-items: center; margin-left: 6px; border-radius: 50%; background: #111; color: #fff; font-size: 9px; }
  .tip-screen { display: block; overflow-y: auto; }
  .tip-summary-panel { min-height: auto; padding: 22px 20px 0; }
  .tip-brand { height: 32px; }
  .summary-card { margin-top: 22px; }
  .tip-content { padding: 36px 20px 50px; overflow: visible; }
  .tip-options { grid-template-columns: repeat(2,1fr); }
  .signature-section { height: 240px; }
  .coffee-customizer { width: calc(100vw - 20px); height: calc(100dvh - 20px); border-radius: 22px; }
  .coffee-customizer-shell { gap: 15px; padding: 22px 18px 18px; }
  .coffee-customizer-close { top: 13px; right: 14px; }
  .coffee-customizer-header h2 { font-size: 25px; }
  .coffee-progress { gap: 4px; }
  .coffee-progress-step b { font-size: 8px; }
  .coffee-option { min-height: 60px; padding-inline: 15px; }
  .coffee-customizer-footer { gap: 8px; }
  .coffee-back { width: 76px; }
  .coffee-next { min-width: 118px; padding-inline: 13px; }
}
@media (max-width: 430px) {
  .product-grid { grid-template-columns: 1fr; }
  .tip-choice { height: 98px; }
  .payment-modal, .cash-modal { padding-inline: 22px; }
  .coffee-customizer-price { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Website navigation stays above the iPad workspace. */
:root { --website-height:72px; }
.demo-site-header { position:relative; z-index:90; display:flex; align-items:center; gap:24px; height:var(--website-height); padding:0 28px; border-bottom:1px solid #272727; background:#080808; }
.demo-brand { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:650; letter-spacing:.12em; }
.demo-brand img { width:46px; height:48px; object-fit:contain; align-self:flex-end; }
.demo-label { color:#89898f; font-size:9px; letter-spacing:.17em; }
.website-nav { display:flex; align-items:center; gap:28px; margin-left:auto; font-size:12px; }
.website-nav a:hover { color:#bbb; }
.website-nav a[aria-current] { text-decoration:underline; text-underline-offset:7px; }
.website-cta { padding:11px 15px; border:1px solid #424247; border-radius:6px; }
.website-menu-toggle { display:none; align-items:center; gap:14px; border:0; background:transparent; }
.pos-app { height:calc(100dvh - var(--website-height)); grid-template-rows:40px 64px minmax(0,1fr); }
.ios-status { grid-row:1; }
.sidebar { grid-row:2/4; grid-column:1; background:#000; overflow-y:auto; }
.catalog { grid-row:3; grid-column:2; }
.order-panel { grid-row:3; grid-column:3; }
.demo-mode-switch { grid-row:2; grid-column:2/-1; }
.sample-badge { align-self:center; margin-left:auto; color:#77777f; font-size:10px; }
.product-grid { height:calc(100% - 177px); }
.search-wrap,.category-button:not(.active),.staff-card,.line-thumb { background:#000; }
.staff-card { color:#ddd; border-color:#29292c; }
.staff-avatar { background:#171719; color:#aaa; }
.nav-item.selected { position:relative; background:transparent; }
.nav-item.selected::before { content:""; position:absolute; left:0; top:13px; bottom:13px; width:3px; background:white; border-radius:2px; }
.nav-item:hover { background:#080808!important; }
.product-image { background:none; }
.line-info small { white-space:normal; font-size:11px; line-height:1.6; }
.line-edit { padding:5px 0; border:0; background:transparent; color:#b8a0ff; font-size:11px; }
.order-line { grid-template-columns:42px minmax(0,1fr); }
.line-actions { grid-column:2; display:flex; justify-content:flex-end; gap:10px; }
.line-actions .line-edit { width:auto; margin-right:auto; padding-inline:8px; border:0; border-radius:0; }
.demo-workspace { grid-column:2/-1; grid-row:3; min-width:0; min-height:0; padding:30px; overflow-y:auto; background:#000; }
.demo-page-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px; }
.demo-page-heading h1 { margin:0 0 8px; font-size:32px; font-weight:650; letter-spacing:-.035em; }
.demo-page-heading p { margin:0; color:#8e8e95; font-size:14px; line-height:1.5; }
.demo-periods { display:flex; padding:4px; border:1px solid #29292d; border-radius:30px; gap:3px; }
.demo-periods button { border:0; background:transparent; color:#999; border-radius:25px; padding:10px 16px; font-size:12px; }
.demo-periods button.active { background:white; color:black; }
.demo-search { width:240px; max-width:100%; padding:12px 14px; border:1px solid #333; border-radius:10px; background:black; }
.demo-management { display:grid; grid-template-columns:160px minmax(0,1fr); gap:28px; }
.demo-category-list { display:flex; flex-direction:column; gap:7px; }
.demo-category-list button { padding:14px; border:1px solid transparent; border-radius:10px; text-align:left; background:transparent; color:#929298; }
.demo-category-list button.active { border-color:#38383d; color:white; }
.demo-menu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:15px; align-content:start; }
.demo-menu-item { padding:16px; border:1px solid #29292d; border-radius:16px; min-width:0; }
.demo-menu-item img { display:block; width:100%; height:160px; object-fit:contain; }
.demo-menu-item h2 { margin:14px 0 6px; font-size:15px; font-weight:500; }
.demo-menu-item p { color:#93939b; font-size:12px; line-height:1.7; }
.demo-menu-actions { display:flex; gap:16px; align-items:center; justify-content:space-between; }
.demo-menu-actions button,.demo-text-button { border:0; padding:10px 0; color:#aebfff; background:transparent; font-size:12px; }
.demo-availability { font-size:11px; color:#45d593; }
.demo-availability.off { color:#d59b66; }
.demo-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:24px 0; }
.demo-metric { padding:22px; border:1px solid #27272b; border-radius:20px; min-width:0; }
.demo-metric small { display:block; color:#93939b; font-size:10px; letter-spacing:.12em; }
.demo-metric strong { display:block; margin-top:12px; font-size:clamp(20px,2.4vw,32px); letter-spacing:-.03em; font-weight:600; overflow-wrap:anywhere; }
.demo-metric p { margin:8px 0 0; color:#818189; font-size:11px; }
.demo-performance-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr); gap:20px; }
.demo-trend { min-width:0; padding:30px; border-radius:26px; background:#4738c4; }
.demo-trend-header { display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; }
.demo-trend small { color:#c7c1ff; letter-spacing:.12em; font-size:10px; }
.demo-trend strong { display:block; font-size:clamp(34px,4vw,58px); margin-top:15px; letter-spacing:-.04em; }
.demo-trend p { margin:8px 0 0; color:#c7c1ff; font-size:14px; }
.demo-trend-total { text-align:right; }
.demo-trend-total b { display:block; font-size:23px; margin-top:16px; }
.demo-chart { margin-top:36px; width:100%; height:190px; overflow:visible; }
.demo-chart-labels { display:flex; justify-content:space-between; color:#c7c1ff; font-size:10px; margin-top:10px; }
.demo-mix,.demo-bestsellers { border:1px solid #29292d; border-radius:26px; padding:26px; background:#000; }
.demo-mix h2,.demo-bestsellers h2 { margin:0 0 8px; font-size:21px; }
.demo-mix>p,.demo-bestsellers>p { margin:0; color:#888890; font-size:13px; }
.demo-donut { position:relative; width:190px; height:190px; border-radius:50%; margin:26px auto; display:grid; place-items:center; }
.demo-donut::before { content:""; position:absolute; inset:26px; background:black; border-radius:50%; }
.demo-donut div { position:relative; text-align:center; }
.demo-donut small { color:#92929b; font-size:10px; letter-spacing:.1em; }
.demo-donut strong { display:block; margin-top:7px; font-size:20px; }
.demo-legend-row { display:flex; gap:10px; align-items:center; margin:12px 0 0; font-size:12px; color:#aaa; }
.demo-legend-row i { width:8px; height:8px; border-radius:2px; }
.demo-legend-row b { margin-left:auto; color:#eee; }
.demo-best-row { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:14px; margin-top:25px; }
.demo-best-row>span { display:grid; place-items:center; width:28px; height:28px; background:white; color:black; border-radius:8px; font-size:12px; }
.demo-best-row strong { font-size:14px; font-weight:500; }
.demo-best-row small { float:right; color:#999; font-size:11px; }
.demo-best-row i { display:block; height:6px; margin-top:10px; background:linear-gradient(90deg,#9b43ef,#3268ed); border-radius:8px; }
.demo-best-row>b { font-size:14px; }
.demo-receipts { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; align-items:start; }
.demo-receipt { display:block; width:100%; padding:24px; border:0; border-radius:4px; background:#f6f4ef; color:#181818; text-align:left; font:12px/1.6 ui-monospace,SFMono-Regular,monospace; }
.demo-receipt h3 { margin:0 0 6px; font-size:16px; text-align:center; letter-spacing:.1em; }
.demo-receipt .receipt-meta { text-align:center; color:#646464; font-size:10px; }
.receipt-divider { border-top:1px dashed #aaa; margin:16px 0; }
.receipt-row { display:flex; justify-content:space-between; gap:18px; margin:6px 0; }
.receipt-row span { min-width:0; }
.receipt-row b { white-space:nowrap; font-weight:500; }
.receipt-modifiers { display:block; color:#666; font-size:10px; }
.receipt-final { font-size:16px; font-weight:650; }
.receipt-open { display:block; margin-top:18px; text-align:center; color:#555; font-size:10px; }
.demo-load-more { display:block; margin:26px auto; padding:12px 22px; border:1px solid #444; border-radius:8px; background:black; }
.demo-empty { padding:50px 20px; color:#96969f; text-align:center; grid-column:1/-1; }
.demo-dialog { width:min(94vw,540px); max-height:90dvh; padding:36px; border:1px solid #34343a; border-radius:24px; background:#090909; color:white; }
.demo-dialog::backdrop { background:#000a; backdrop-filter:blur(6px); }
.demo-dialog h2 { font-size:29px; font-weight:500; letter-spacing:-.03em; margin:12px 36px 20px 0; }
.demo-dialog p { color:#999; font-size:13px; line-height:1.7; }
.dialog-dismiss { position:absolute; right:18px; top:16px; width:36px; height:36px; border:0; background:transparent; color:#aaa; font-size:25px; }
.demo-fields { display:grid; gap:20px; }
.demo-fields label { display:grid; gap:9px; font-size:12px; color:#aaa; }
.demo-dialog input:not([type=checkbox]) { width:100%; border:0; border-bottom:1px solid #444; background:#000; border-radius:0; padding:13px 0; color:white; }
.demo-fields .demo-checkbox { display:flex; align-items:center; gap:12px; }
.demo-primary { width:100%; min-height:48px; margin-top:28px; border:0; border-radius:12px; background:white; color:black; font-weight:550; }
.name-dialog { width:min(94vw,720px); padding:55px; }
.receipt-dialog .demo-receipt { margin-top:20px; }
.coffee-tap-hint { font-size:11px!important; color:#777!important; }
.coffee-layout-switch { display:flex; gap:18px; margin-top:15px; }
.coffee-layout-switch button { padding:7px 0; border:0; border-bottom:1px solid transparent; background:transparent; color:#888; font-size:11px; }
.coffee-layout-switch button[aria-pressed=true] { color:#fff; border-color:#fff; }
.coffee-quantity { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:7px 0 2px auto; max-width:220px; border-radius:24px; background:#ffffff18; font-size:12px; }
.coffee-quantity button { width:40px; height:40px; border:0; background:transparent; font-size:20px; }
.coffee-quantity button:disabled { opacity:.3; }
.coffee-quantity span { white-space:nowrap; }
.coffee-quantity button { flex:0 0 30px; }
.coffee-option-wrap { min-width:0; }
.coffee-option-wrap>.coffee-option { width:100%; }
.coffee-customizer.all-options { width:min(96vw,1320px); height:min(94dvh,960px); background:#0e0e0f; }
.all-options .coffee-customizer-shell { grid-template-columns:minmax(0,1fr) 250px; grid-template-rows:auto minmax(0,1fr) auto; gap:22px; padding:26px; }
.all-options .coffee-customizer-header { grid-column:1/-1; }
.all-options .coffee-options { grid-row:2; grid-column:1; }
.all-options .coffee-progress,.all-options .coffee-step-label,.all-options .coffee-tap-hint { display:none; }
.coffee-group { display:grid; grid-template-columns:140px minmax(0,1fr); gap:18px; padding:18px 0; border-bottom:1px solid #ffffff1c; }
.coffee-group-title strong { display:block; font-size:14px; margin:4px 0 6px; font-weight:550; }
.coffee-group-title small { display:block; font-size:10px; color:#888; line-height:1.5; margin:0; }
.coffee-group-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:9px; align-items:start; }
.all-options .coffee-option { display:flex; flex-direction:column; justify-content:center; gap:7px; min-height:86px; padding:10px; border:1px solid #ffffff29; border-radius:13px; background:#ffffff0e; text-align:center; }
.all-options .coffee-option strong { font-size:13px; font-weight:500; }
.all-options .coffee-option b { font-size:11px; font-weight:400; opacity:.6; }
.all-options .coffee-option.selected { background:#fff; color:#000; border-color:white; }
.all-options .coffee-check { display:none; }
.coffee-drink-summary { display:flex; flex-direction:column; min-height:0; padding:18px; border:1px solid #ffffff1f; border-radius:17px; background:#ffffff0b; }
.coffee-summary-header { display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:.1em; color:#aaa; }
.coffee-summary-header button { border:0; padding:8px 0; background:transparent; color:#aaa; font-size:11px; }
.coffee-summary-product { display:grid; grid-template-columns:46px 1fr; align-items:center; gap:6px 10px; margin:22px 0; }
.coffee-summary-product img { grid-row:1/3; width:46px; height:46px; object-fit:contain; }
.coffee-summary-product strong { display:block; font-size:14px; }
.coffee-summary-product small { display:block; font-size:11px; color:#aaa; margin-top:6px; }
.coffee-summary-list { flex:1; overflow:auto; border-block:1px solid #ffffff1c; padding:16px 0; list-style:none; }
.coffee-summary-list li { font-size:12px; color:#45d493; line-height:1.6; margin:0 0 12px; }
.coffee-summary-list li.removed { color:#ff756c; }
.coffee-summary-list .no-options { color:#888; }
.coffee-summary-total { display:flex; justify-content:space-between; margin-top:20px; font-size:15px; }
.all-options .coffee-customizer-footer { grid-column:1/-1; grid-row:3; }
.all-options .coffee-back,.all-options .coffee-customizer-price { display:none; }
.all-options .coffee-next { width:100%; }
:focus-visible { outline:2px solid #97baff; outline-offset:4px; }

@media(max-width:1100px) {
  .website-nav { gap:18px; }
  .demo-label { display:none; }
  .demo-workspace { padding:24px; }
  .demo-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .demo-performance-grid { grid-template-columns:1fr; }
  .demo-mix { display:grid; grid-template-columns:1fr 1fr; align-items:center; column-gap:30px; }
  .demo-mix h2,.demo-mix>p { grid-column:1/-1; }
  .demo-mix .demo-donut { margin:24px auto 0; }
  .demo-management { grid-template-columns:120px minmax(0,1fr); gap:18px; }
  .coffee-group { grid-template-columns:110px minmax(0,1fr); gap:12px; }
  .all-options .coffee-customizer-shell { grid-template-columns:minmax(0,1fr) 210px; gap:16px; }
}
@media(max-width:760px) {
  :root { --website-height:60px; }
  .demo-site-header { padding:0 18px; }
  .demo-brand img { height:40px; width:40px; }
  .website-menu-toggle { display:flex; margin-left:auto; font-size:12px; }
  .website-nav { display:none; position:absolute; top:60px; left:0; right:0; margin:0; padding:24px; background:#080808; border-bottom:1px solid #333; flex-direction:column; align-items:stretch; gap:24px; }
  .website-nav.open { display:flex; }
  .pos-app { grid-template-rows:32px 56px minmax(0,1fr); }
  .sidebar { grid-row:2/4; }
  .demo-mode-switch { padding-inline:14px; gap:20px; }
  .sample-badge { display:none; }
  .product-grid { height:calc(100% - 177px); }
  .order-panel { inset:calc(var(--website-height) + 88px) 0 calc(78px + env(safe-area-inset-bottom)) 72px; }
  .toast { bottom:calc(88px + env(safe-area-inset-bottom)); }
  .demo-workspace { grid-column:2; padding:22px 16px; }
  .demo-page-heading { gap:18px; }
  .demo-page-heading h1 { font-size:27px; }
  .demo-page-heading p { font-size:12px; }
  .demo-periods { max-width:100%; }
  .demo-periods button { padding:10px 11px; font-size:11px; }
  .demo-management { display:block; }
  .demo-category-list { flex-direction:row; overflow:auto; margin-bottom:20px; }
  .demo-category-list button { white-space:nowrap; padding:10px; font-size:11px; }
  .demo-menu-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .demo-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .demo-metric { padding:16px 12px; border-radius:14px; }
  .demo-trend { padding:22px 18px; border-radius:20px; }
  .demo-trend strong { font-size:35px; }
  .demo-trend-total { text-align:left; }
  .demo-chart { height:140px; }
  .demo-mix { display:block; padding:20px; }
  .demo-mix .demo-donut { margin:24px auto; }
  .demo-bestsellers { padding:20px 14px; }
  .demo-best-row { grid-template-columns:22px 1fr; gap:10px; }
  .demo-best-row>b { grid-column:2; }
  .demo-best-row small { float:none; display:block; margin-top:5px; }
  .demo-receipts { grid-template-columns:minmax(0,1fr); }
  .demo-receipt { padding:22px 16px; }
  .demo-dialog,.name-dialog { padding:28px 22px; }
  .coffee-customizer-shell { gap:14px; }
  .all-options .coffee-customizer-shell { display:grid; grid-template-columns:minmax(0,1fr); padding:22px 18px; }
  .all-options .coffee-drink-summary { display:none; }
  .all-options .coffee-customizer-header { grid-column:1; }
  .coffee-group { grid-template-columns:1fr; }
  .coffee-group-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .coffee-layout-switch { gap:13px; }
  .coffee-layout-switch button { font-size:10px; }
}