:root {
  color-scheme: light;
  /* The restaurant's future identity can replace these neutral brand tokens. */
  --brand: #363639; --brand-ink: #fff; --paper: #f7f6f5; --panel: #fff;
  --ink: #252528; --muted: #727278; --line: #e9e7e5; --soft: #efeeed;
  --green: #52742e; --orange: #a05d19; --blue: #4c647d; --red: #a13b35;
  --shadow: 0 12px 30px #30282308, 0 3px 6px #30282303;
  font: 15px/1.5 ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--paper); color: var(--ink);
}
* { box-sizing: border-box }
body { margin: 0 }
button, input, select, textarea { font: inherit }
button, a, input, select, textarea { touch-action: manipulation }
button { cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 11px 18px; border-radius: 999px; min-height: 44px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: background .16s, box-shadow .16s, transform .16s }
button:hover { background: #f1f0ee; border-color: #d8d5d2 }
button:active { transform: translateY(1px) }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #73737f; outline-offset: 4px }
button:disabled { opacity: .43; cursor: not-allowed; transform: none }
button.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 5px 12px #25252810 }
button.primary:hover:not(:disabled) { background: #202023 }
button.danger { color: var(--red) }
button.quiet { background: transparent; border-color: transparent; font-weight: 500 }
a { color: var(--ink) }
input, textarea, select { width: 100%; min-width: 0; border: 1px solid #dad7d4; background: #fff; border-radius: 16px; padding: 11px 13px; color: var(--ink); min-height: 46px }
textarea { resize: vertical; min-height: 80px }
label { display: grid; gap: 7px; font-size: 13px; color: var(--muted) }
h1, h2, h3, p { margin: 0 }
h1 { font-size: 38px; line-height: 1.15; letter-spacing: -1.3px; font-weight: 750 }
h2 { font-size: 22px; letter-spacing: -.5px; line-height: 1.25 }
h3 { font-size: 16px; font-weight: 650 }
small { font-size: 12px }
.icon { width: 23px; height: 23px; flex: 0 0 auto; vertical-align: middle }
.muted { color: var(--muted) }
.loading { padding: 40px }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }
.shell { display: grid; grid-template-columns: 182px minmax(0,1fr); min-height: 100vh; padding: 16px 0 0 16px }
.sidebar { background: #ffffffd9; box-shadow: var(--shadow); padding: 27px 10px 22px; border-radius: 90px; display: flex; flex-direction: column; gap: 32px; position: sticky; top: 16px; height: calc(100vh - 32px); min-height: 560px }
.brand { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 0 13px }
.brand-mark { display: grid; place-items: center; background: var(--soft); width: 68px; height: 68px; border-radius: 50% }
.brand-mark .icon { width: 35px; height: 35px }
.brand-name { font-size: 17px; font-weight: 700; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere }
.sidebar nav { display: grid; gap: 10px }
.nav-button { background: transparent; border: 0; text-align: left; justify-content: flex-start; gap: 14px; padding: 13px 15px; position: relative; font-size: 14px; min-height: 53px }
.nav-button .icon { width: 26px; height: 26px }
.nav-button.active { background: #eae8e7; color: #27272a }
.nav-button:hover { background: #f0efee }
.sidebar-footer { margin-top: auto; font-size: 11px; text-align: center; color: var(--muted); display: grid; gap: 2px; padding: 14px 8px }
.sidebar-footer small { font-size: 10px }
.count { margin-left: auto; font-size: 10px; background: #e5e2df; min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50% }
.workspace { min-width: 0 }
.topbar { padding: 1px 32px 18px; min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 14px }
.lab-label { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted) }
.lab-label .icon { width: 16px; height: 16px }
.topbar-right { display: flex; align-items: center; gap: 15px }
.station-control { border-left: 1px solid #dedbd8; padding-left: 14px }
.topbar select { width: auto; min-width: 105px; border: 0; background: transparent; border-radius: 999px; font-size: 12px; min-height: 38px; padding: 7px }
.signal { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); white-space: nowrap }
.signal::before { content: ''; width: 8px; height: 8px; background: #7ba854; border-radius: 50% }
.signal.off::before { background: #c77d35 }
.avatar { display: inline-grid; place-items: center; width: 39px; height: 39px; flex-shrink: 0; border-radius: 50%; background: #eae8e6; color: #55545a; font-size: 16px; font-weight: 650 }
main { padding: 10px 32px 26px; max-width: 1800px; margin: auto }
.app-footer { padding: 0 32px 22px; font-size: 11px; color: #838188 }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px }
.page-heading p { color: var(--muted); margin-top: 7px }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.notice { background: #eeece9; border-radius: 20px; padding: 13px 18px; margin-bottom: 24px; font-size: 13px; color: #666167 }
.notice.warn { background: #fff2e0; color: #835222 }
.pill { display: inline-flex; gap: 5px; align-items: center; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 600; background: #edf2e5; color: #4d682c; white-space: nowrap }
.pill.warn { background: #fff0dc; color: #8b511a }
.pill.blue { background: #edf0f3; color: #4c5e71 }
.pill.red { background: #fce9e6; color: #953d32 }
.pill.gray { background: #efedeb; color: #69656a }
/* The salon uses independent table silhouettes instead of dashboard tiles. */
.room-layout { display: grid; grid-template-columns: minmax(0,1fr) 355px; gap: 32px; align-items: start }
.room-main { min-width: 0 }
.room-main .page-heading { margin: 0 0 27px }
.room-main h1 { font-size: 48px; letter-spacing: -1.7px }
.room-main .page-heading p { font-size: 17px }
.room-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px }
.room-tabs, .order-tabs { display: flex; align-items: center; gap: 3px; padding: 4px; border-radius: 999px; background: #efedeb; max-width: 100%; overflow-x: auto }
.room-tabs button, .order-tabs button { border: 0; background: transparent; min-height: 38px; padding: 9px 24px; font-size: 13px; flex-shrink: 0 }
.room-tabs button.active, .order-tabs button.active { background: var(--brand); color: var(--brand-ink); box-shadow: 0 3px 6px #20202314 }
.icon-button { width: 43px; height: 43px; padding: 0; flex-shrink: 0; border: 0; background: #eeecea }
.room-stats { display: flex; gap: 23px; align-items: center; margin-bottom: 30px; font-size: 14px; flex-wrap: wrap }
.room-stats>span { display: inline-flex; align-items: center; gap: 7px }
.room-stats b { font-weight: 750 }
.status-icon { display: inline-grid; place-items: center; background: #eae8e6; border-radius: 50%; width: 36px; height: 36px; margin-right: 1px }
.status-icon.available { background: #e9f0e0; color: #557630 }
.status-icon.due { background: #fbecd9; color: #a46621 }
.status-icon .icon { width: 21px; height: 21px }
.table-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 16px; padding: 4px 0 16px }
.table-card { background: none; border: 0; border-radius: 38px; min-width: 0; width: 100%; padding: 18px 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 16px }
.table-card:hover { border-color: transparent; background: #eae6e12e }
.table-card:hover .table-surface { transform: translateY(-3px); box-shadow: 0 14px 18px #29252110, 0 3px 4px #29252108 }
.table-shape { position: relative; display: grid; place-items: center; width: 140px; height: 140px; max-width: calc(100% - 8px); isolation: isolate }
.table-card.oval .table-shape { width: 169px; height: 132px; margin: 4px 0 }
.table-surface { width: 100%; height: 100%; border-radius: 50%; background: #fff; box-shadow: 0 10px 16px #2925210a, 0 3px 4px #29252108, inset 0 0 0 1px #ffffffc0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: relative; transition: transform .18s, box-shadow .18s; z-index: 1 }
.oval .table-surface { border-radius: 999px }
.table-surface>strong { font-size: 33px; line-height: 1.05; font-weight: 750; letter-spacing: -1px }
.table-surface>strong.custom-table-name { font-size: 17px; line-height: 1.2; text-align: center; padding: 0 12px; overflow-wrap: anywhere; letter-spacing: -.3px }
.table-status { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 999px; background: #efedeb; color: #3c3a40; font-size: 11px; line-height: 1.3; font-weight: 600; padding: 5px 8px; white-space: nowrap }
.table-status .icon { width: 16px; height: 16px }
.available .table-status { color: #4b6c2e; background: #eaf1e0 }
.due .table-status { color: #965514; background: #fff0da }
.selected .table-surface { background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 4px var(--paper), 0 0 0 8px #dedbdd, 0 10px 20px #28232a13 }
.selected .table-status { background: #ffffff20; color: #fff }
.selected-check { width: 28px; height: 28px; display: grid; place-items: center; background: #6f9546; border: 3px solid var(--paper); border-radius: 50%; position: absolute; right: -2px; top: 2px; color: #fff; z-index: 2 }
.selected-check .icon { width: 17px; height: 17px; stroke-width: 2.3 }
.chair { position: absolute; width: 38px; height: 23px; background: #e4e1de; border-radius: 10px; box-shadow: 0 2px 3px #3028230a }
.chair-n { top: -12px; left: calc(50% - 19px) }
.chair-s { bottom: -12px; left: calc(50% - 19px) }
.chair-e { right: -13px; top: calc(50% - 19px); height: 38px; width: 23px }
.chair-w { left: -13px; top: calc(50% - 19px); height: 38px; width: 23px }
.table-caption { color: #807b80; font-size: 11px; font-weight: 400; min-height: 18px }
.room-hint { display: flex; align-items: center; gap: 7px; color: #817b81; font-size: 11px; margin-top: 12px }
.room-hint .icon { width: 16px; height: 16px }
.panel { background: var(--panel); border: 1px solid #ffffffb0; border-radius: 28px; box-shadow: var(--shadow); overflow: hidden; min-width: 0 }
.panel-head { padding: 23px 24px 17px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px }
.panel-body { padding: 24px }
.order-panel { border-radius: 38px; position: sticky; top: 24px; scroll-margin-top: 20px }
.table-panel-heading { display: flex; gap: 15px; align-items: center; padding: 29px 25px 26px }
.table-panel-heading h2 { font-size: 28px; letter-spacing: -.8px; overflow-wrap: anywhere }
.table-panel-heading p { color: var(--muted); font-size: 13px; margin-top: 6px }
.table-avatar { width: 66px; height: 66px; flex-shrink: 0; background: #f1efed; border-radius: 50%; display: grid; place-items: center }
.table-avatar .icon { width: 36px; height: 36px }
.order-tabs { margin: 0 24px 10px; padding: 4px }
.order-tabs button { flex: 1; padding: 8px 9px; font-size: 12px }
.order-summary { padding: 7px 26px 23px }
.summary-row { display: flex; align-items: center; gap: 15px; padding: 20px 0 }
.summary-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #f2f0ee; flex-shrink: 0 }
.summary-icon .icon { width: 25px; height: 25px }
.summary-row strong { font-size: 15px; font-weight: 700 }
.summary-row p { color: var(--muted); margin-top: 3px; font-size: 13px }
.attendant { display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--line); margin: 10px 0 27px; padding-top: 22px; color: var(--muted); font-size: 13px }
.attendant strong { color: var(--ink) }
.order-summary>.primary { width: 100%; min-height: 52px; justify-content: space-between; padding: 12px 23px; font-size: 16px }
.add-consumption { width: 100%; margin-top: 9px }
.add-consumption .icon { padding: 5px; width: 32px; height: 32px; border-radius: 50%; background: #efedeb }
.free-table { display: grid; justify-items: center; gap: 12px; padding: 24px 28px 32px; text-align: center }
.free-table-illustration { width: 100px; height: 100px; background: #f4f2ef; border-radius: 50%; display: grid; place-items: center; position: relative; margin: 12px 0 14px }
.free-table-illustration>.icon { width: 46px; height: 46px; color: #969087 }
.free-table-illustration span { background: #e8efdc; color: #597634; padding: 6px; border-radius: 50%; position: absolute; bottom: -2px; right: -2px; border: 4px solid white }
.free-table h3 { font-size: 21px }
.free-table p, .free-table small { color: var(--muted); max-width: 230px }
.free-table .form { width: 100%; margin-top: 22px; gap: 17px; text-align: left }
.free-table .form label { grid-template-columns: 1fr 80px; align-items: center; font-size: 14px }
.free-table .form input { text-align: center; border-radius: 999px }
.free-table .primary { justify-content: space-between; min-height: 52px; font-size: 16px }
.free-table small { font-size: 11px; margin-top: 3px }
.activity-list { padding: 20px 26px 30px }
.activity-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 13px }
.activity-item small { display: block; color: var(--muted); margin-top: 4px }
.activity-dot { background: #d8d3cf; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex-shrink: 0 }
.empty { padding: 30px 24px; text-align: center; color: var(--muted); display: grid; gap: 12px; justify-items: center }
.empty>.icon { width: 34px; height: 34px; color: #a49e99 }
.empty strong { color: var(--ink); font-weight: 600 }
.form { display: grid; gap: 15px }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.form-row.three { grid-template-columns: 1fr 1fr 1fr }
.order-meta { display: flex; justify-content: space-between; align-items: center; padding: 15px 24px; font-size: 12px; color: var(--muted) }
.line-list { display: grid }
.order-line { padding: 16px 24px; border-bottom: 1px solid var(--line) }
.order-line-top { display: flex; justify-content: space-between; gap: 12px; align-items: start }
.order-line strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; min-width: 0 }
.order-line p { font-size: 12px; color: var(--muted); margin-top: 5px; overflow-wrap: anywhere }
.order-line.cancelled { text-decoration: line-through; opacity: .55 }
.line-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px }
.line-bottom button { min-height: 36px; padding: 5px 9px; font-size: 11px }
.subtotal { display: flex; justify-content: space-between; padding: 18px 24px; font-weight: 700 }
.order-actions { padding: 0 24px 20px; display: grid; gap: 12px }
.order-actions .primary { width: 100% }
.small-actions { display: flex; gap: 6px; flex-wrap: wrap }
.small-actions button { font-size: 11px; min-height: 38px; padding: 7px 10px }
.small-actions .icon { width: 16px; height: 16px }
.form-box { margin: 0 10px 10px; padding: 22px 16px; border-radius: 25px; background: #f6f5f3 }
.form-box h3 { display: flex; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 20px }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(290px,1fr)); gap: 22px; align-items: start }
.ticket-card { background: #fff; border: 1px solid var(--line); border-radius: 26px; border-top: 4px solid #c9b693; overflow: hidden; box-shadow: var(--shadow) }
.ticket-card.preparing { border-top-color: #9caab8 }
.ticket-card.ready { border-top-color: #97ae78 }
.ticket-card.notice-ticket { border-top-color: #c28f82 }
.ticket-head { padding: 20px; display: flex; justify-content: space-between; gap: 10px; align-items: start; border-bottom: 1px solid var(--line) }
.ticket-head small { display: block; color: var(--muted); margin-top: 5px }
.ticket-body { padding: 20px; display: grid; gap: 14px }
.ticket-line { display: grid; gap: 4px }
.ticket-line strong { font-size: 15px; overflow-wrap: anywhere }
.ticket-line p { margin-left: 26px; color: var(--orange); font-size: 13px; overflow-wrap: anywhere }
.ticket-card footer { padding: 16px 20px; background: #f9f8f6; display: flex; gap: 8px; flex-wrap: wrap }
.ticket-card footer button { flex: 1 }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 24px }
.stat { background: #fff; padding: 22px 24px; border-radius: 26px; box-shadow: var(--shadow) }
.stat span { display: block; font-size: 12px; color: var(--muted) }
.stat strong { display: block; font-size: 27px; font-weight: 650; margin-top: 8px }
.two-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.75fr); gap: 24px; align-items: start }
.list-row { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px }
.list-row:last-child { border-bottom: 0 }
.list-row small { display: block; color: var(--muted); margin-top: 4px }
.list-row .actions { justify-content: flex-end }
.stack { display: grid; gap: 24px }
.section-title { margin: 30px 0 18px }
.device-card { padding: 24px; display: grid; gap: 18px }
.device-top { display: flex; justify-content: space-between; gap: 12px }
.device-card small { color: var(--muted); display: block }
.connection-diagram { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 28px; background: #eeece9; border-radius: 28px; margin-bottom: 24px }
.connection-node { text-align: center; display: grid; gap: 5px; min-width: 150px }
.connection-node small { color: var(--muted) }
.connection-arrow { color: #aaa29b; font-size: 22px }
.log-row { padding: 15px 24px; border-bottom: 1px solid var(--line); font-size: 13px; display: flex; gap: 14px }
.log-row time { color: var(--muted); min-width: 66px; font-variant-numeric: tabular-nums }
.log-row small { display: block; color: var(--muted) }
.unconfigured { border-radius: 20px; padding: 20px; background: #f5f3f0; display: grid; gap: 9px }
.unconfigured p { color: var(--muted); font-size: 13px }
#toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: #333236; color: #fff; padding: 14px 24px; border-radius: 24px; max-width: min(600px,calc(100vw - 30px)); z-index: 100; box-shadow: 0 10px 28px #0002; display: none; font-size: 14px }
#toast.visible { display: block }
#toast.error { background: #823d36 }
dialog { border: 1px solid var(--line); border-radius: 30px; padding: 28px; max-width: min(480px,calc(100vw - 24px)); width: 480px; color: var(--ink); box-shadow: 0 24px 100px #0002 }
dialog::backdrop { background: #29272d66; backdrop-filter: blur(4px) }
dialog pre { font: 13px/1.7 ui-monospace,SFMono-Regular,monospace; white-space: pre-wrap; overflow-wrap: anywhere; background: #f6f4f1; border-radius: 17px; padding: 18px }
dialog h2 { margin-bottom: 18px }
dialog>button { width: 100%; margin-top: 18px }
.divider { border: 0; border-top: 1px solid var(--line); margin: 20px 0 }
.invalid { color: var(--red) }
.right { text-align: right }
.mono { font-variant-numeric: tabular-nums; white-space: nowrap }
.blank-state { padding: 55px 24px; background: #fff; border-radius: 30px; display: grid; gap: 10px; text-align: center; color: var(--muted) }
@media(min-width:1500px) {
  .room-layout { grid-template-columns: minmax(0,1fr) 400px; gap: 44px }
  .table-grid { gap: 38px 28px; padding-top: 15px }
  .table-shape { width: 164px; height: 164px }
  .table-card.oval .table-shape { width: 204px; height: 150px; margin: 7px 0 }
  .table-surface>strong { font-size: 38px }
  .table-status { font-size: 13px }
  .table-caption { font-size: 12px }
}
@media(max-width:1200px) {
  .shell { grid-template-columns: 150px minmax(0,1fr); padding-left: 12px }
  .sidebar { padding-left: 7px; padding-right: 7px }
  .nav-button { gap: 9px; padding: 12px; font-size: 13px }
  .brand-name { font-size: 15px }
  main { padding: 10px 24px 24px }
  .topbar { padding-left: 24px; padding-right: 24px }
  .room-layout { grid-template-columns: minmax(0,1fr) 320px; gap: 24px }
  .table-grid { gap: 22px 7px }
  .table-shape { width: 123px; height: 123px }
  .table-card.oval .table-shape { width: 146px; height: 117px; margin: 3px 0 }
  .table-card { padding-left: 8px; padding-right: 8px }
  .table-status { font-size: 10px; padding: 4px 6px }
  .room-stats { gap: 13px; font-size: 12px }
  .status-icon { width: 30px; height: 30px }
  .room-main h1 { font-size: 43px }
  .table-panel-heading { padding: 26px 22px; gap: 12px }
  .table-panel-heading h2 { font-size: 25px }
  .table-avatar { width: 56px; height: 56px }
  .two-col { grid-template-columns: 1fr }
}
@media(max-width:1000px) and (min-width:901px) {
  .table-grid { grid-template-columns: repeat(2,minmax(0,1fr)) }
}
@media(max-width:900px) {
  .shell { display: block; padding: 0 }
  .workspace { padding-bottom: 108px }
  .sidebar { position: fixed; left: 16px; right: 16px; bottom: 14px; top: auto; height: 78px; min-height: 0; border-radius: 999px; z-index: 20; padding: 7px; box-shadow: 0 8px 38px #26212a22; background: #fff; display: block }
  .sidebar .brand, .sidebar-footer { display: none }
  .sidebar nav { display: grid; grid-template-columns: repeat(5,1fr); gap: 3px; height: 100% }
  .nav-button { flex-direction: column; justify-content: center; gap: 2px; font-size: 10px; padding: 5px; min-height: 0 }
  .nav-button .icon { width: 24px; height: 24px }
  .count { position: absolute; right: 9px; top: 3px; width: 18px; height: 18px }
  .topbar { padding: 14px 22px 6px }
  main { padding: 20px 22px }
  .room-layout { grid-template-columns: minmax(0,1fr) 310px; gap: 22px }
  .table-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 10px }
  .room-stats { gap: 10px }
  .room-stats .status-icon { display: none }
  .order-panel { top: 16px }
  .line-bottom button, .small-actions button { min-height: 44px; padding: 9px 12px }
  input, select, textarea { font-size: 16px }
  #toast { bottom: 108px }
}
@media(max-width:680px) {
  .topbar { padding: 12px 18px 0 }
  .lab-label { font-size: 10px; gap: 5px }
  .lab-label .icon { display: none }
  .topbar-right { gap: 8px }
  .topbar select { min-width: 86px; font-size: 11px }
  .station-control { padding-left: 5px }
  .signal { font-size: 11px; gap: 5px }
  .signal::before { width: 6px; height: 6px }
  .topbar .avatar { display: none }
  main { padding: 26px 18px 20px }
  h1 { font-size: 32px }
  .room-main h1 { font-size: 42px }
  .room-main .page-heading p { font-size: 15px }
  .room-main .page-heading { margin-bottom: 24px }
  .room-layout { grid-template-columns: 1fr; gap: 30px }
  .room-toolbar { margin-bottom: 24px }
  .room-tabs button { padding: 8px 18px }
  .room-stats { font-size: 13px; justify-content: space-between; gap: 6px; margin-bottom: 28px }
  .room-stats>span { gap: 5px }
  .room-stats .status-icon { display: inline-grid; width: 27px; height: 27px; margin: 0 }
  .room-stats .icon { width: 17px; height: 17px }
  .table-grid { gap: 28px 16px; padding: 0 3px 10px }
  .table-shape { width: 137px; height: 137px }
  .table-card.oval .table-shape { width: 159px; height: 127px; margin: 5px 0 }
  .table-status { font-size: 11px }
  .table-caption { font-size: 11px }
  .order-panel { position: static; border-radius: 34px }
  .table-panel-heading h2 { font-size: 28px }
  .table-panel-heading { padding: 26px }
  .table-avatar { width: 64px; height: 64px }
  .stats, .cards-grid, .two-col { grid-template-columns: 1fr }
  .page-heading p { font-size: 13px }
  .list-row { align-items: flex-start; flex-wrap: wrap }
  .list-row .actions { width: 100%; justify-content: flex-start }
  .connection-arrow { transform: rotate(90deg) }
  .connection-diagram { flex-direction: column }
  .app-footer { padding: 0 20px 20px; text-align: center; font-size: 10px }
  .form-row.three { grid-template-columns: 1fr 1fr }
  .form-row.three>*:last-child { grid-column: 1 / -1 }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important }
}
/* Restaurant identity is scoped to its data profile, keeping the neutral base reusable. */
body.brand-lucio { --brand: #b82219; --paper: #faf8f3; --soft: #f6ebd7; --line: #eee7dd; --accent: #ffcc35; background: var(--paper) }
.brand-logo { width: 142px; height: 85px; object-fit: contain; margin: 3px -4px 7px }
.brand-lucio .sidebar { background: #fffdf8; border: 1px solid #f4ead6 }
.brand-lucio .nav-button.active { background: #fff0bd; color: #8e271b }
.brand-lucio .nav-button:hover { background: #fff5dc }
.brand-lucio .selected .table-surface { box-shadow: 0 0 0 4px var(--paper),0 0 0 8px #f6d89c,0 10px 20px #8d431214 }
.brand-lucio button.primary:hover:not(:disabled) { background: #941a13 }
.brand-lucio .avatar { background: #fff0c6; color: #7e4d23 }
.brand-lucio .room-tabs,.brand-lucio .order-tabs { background: #f2eadf }
.brand-lucio .room-tabs button.active { background: #b82219 }
.menu-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 28px; align-items: start }
.catalog-main { min-width: 0 }
.menu-heading { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin: 2px 0 25px }
.eyebrow { font-size: 10px; font-weight: 750; letter-spacing: 2.2px; color: #9b6b32 }
.menu-heading h1 { font-size: 43px; margin-top: 9px }
.menu-heading h1>span { color: var(--brand) }
.menu-heading p { color: var(--muted); margin-top: 9px }
.menu-heading>button { font-size: 12px; padding: 9px 12px; flex-shrink: 0 }
.menu-search-wrap { display: flex; align-items: center; gap: 11px; background: white; border: 1px solid var(--line); border-radius: 999px; padding: 3px 18px; margin-bottom: 22px }
.menu-search-wrap>.icon { width: 21px; color: #91877c }
.menu-search-wrap input { border: 0; background: transparent; padding-left: 0; border-radius: 0 }
.menu-search-wrap>span { color: var(--muted); white-space: nowrap; font-size: 11px }
.category-pills { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 20px }
.category-pills button { font-size: 12px; font-weight: 550; padding: 8px 14px; border: 1px solid var(--line); min-height: 42px; background: transparent }
.category-pills .icon { width: 19px; height: 19px }
.category-pills button.active { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 4px 10px #a52b1514 }
.catalog-caption { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted); margin: 0 2px 14px }
.product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px }
.product-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 22px 18px 17px; min-width: 0; border-radius: 28px; border: 1px solid #fff; text-align: left; box-shadow: 0 5px 16px #4a2f0c05; min-height: 258px; position: relative }
.product-card:hover { background: #fffdf7; border-color: #e9c483; box-shadow: 0 8px 22px #5e42100d; transform: translateY(-2px) }
.product-symbol { width: 60px; height: 60px; border-radius: 23px 23px 26px 18px; display: grid; place-items: center; color: #a6681f; background: #fff0cc; margin-bottom: 6px; flex-shrink: 0 }
.product-symbol .icon { width: 32px; height: 32px; stroke-width: 1.5 }
.product-symbol.category-especialidades { color: #b84c34; background: #fce9e0 }
.product-symbol.category-jarra,.product-symbol.category-bebidas { color: #61853f; background: #edf3df }
.product-symbol.category-kids { color: #b68421; background: #fff3bd }
.product-symbol.category-combos { color: #a3473a; background: #fde9e3 }
.product-symbol.category-taza { color: #927052; background: #f3eade }
.product-category { color: var(--muted); font-size: 10px; font-weight: 450 }
.product-card>strong { font-size: 15px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere }
.product-description { color: #80796f; font-size: 11px; line-height: 1.5; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.product-bottom { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 12px }
.product-price { font-size: 16px; font-weight: 750; color: #5c3823 }
.product-price small { font-size: 9px; font-weight: 450 }
.product-add { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #a22b1d; background: #fff1da }
.product-add .icon { width: 19px; height: 19px }
.menu-order { position: sticky; top: 18px; border-radius: 32px }
.menu-order .line-list { max-height: 340px; overflow-y: auto }
.menu-order .panel-head button { font-size: 12px; padding: 5px }
.menu-order .panel-head small { color: var(--muted) }
.menu-callout { display: grid; justify-items: center; text-align: center; gap: 9px; margin: 17px 21px 24px; padding: 23px 16px; border-radius: 25px; background: #fbf5e8 }
.menu-callout>p { color: var(--muted); font-size: 12px }
.menu-callout>strong { font-size: 14px }
.menu-callout-icon { color: #a77832; background: #ffedba; padding: 12px; border-radius: 50% }
.menu-callout>button { background: #fff; font-size: 13px; margin-top: 4px }
.menu-order .menu-callout { display: none }
.no-table { display: grid; justify-items: center; text-align: center; gap: 17px; padding: 45px 28px }
.no-table>.icon { width: 52px; height: 52px; color: #b18b4e }
.no-table p { color: var(--muted); font-size: 13px }
.catalog-notes { margin-top: 18px; color: var(--muted); font-size: 12px }
.catalog-notes summary { cursor: pointer; margin-bottom: 12px }
.catalog-notes p { margin-bottom: 10px }
.product-dialog { width: min(620px,calc(100vw - 32px)); padding: 29px; border-radius: 32px; max-height: calc(100dvh - 36px) }
.product-dialog h2 { padding-right: 5px; font-size: 27px; line-height: 1.15 }
.product-intro { display: flex; align-items: center; gap: 17px; margin: 18px 0 }
.product-intro p { font-size: 13px; color: var(--muted) }
.product-base { font-size: 12px; color: #846444 }
.choice-group { border: 0; padding: 0; margin: 5px 0 0; min-width: 0 }
.choice-group legend { width: 100%; font-size: 15px; font-weight: 650; padding: 0; margin-bottom: 12px }
.choice-group legend small { float: right; font-size: 10px; font-weight: 400; color: var(--muted); margin-top: 4px }
.choice-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px }
.choice { display: flex; align-items: center; gap: 10px; border-radius: 19px; border: 1px solid #e8e1d6; padding: 14px 12px; cursor: pointer; min-height: 70px; position: relative; color: var(--ink); background: #fff }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0 }
.choice>span { display: grid; gap: 3px; flex: 1 }
.choice strong { font-size: 12px; line-height: 1.3 }
.choice small { color: var(--muted); font-size: 11px }
.choice>.icon { width: 18px; height: 18px; color: transparent; border: 1px solid #e7ded0; border-radius: 50%; padding: 2px }
.choice:has(input:checked) { border-color: #be4d31; background: #fff8ed; box-shadow: 0 0 0 1px #be4d31 }
.choice:has(input:checked)>.icon { border-color: #b82219; background: #b82219; color: #fff }
.choice:has(input:focus-visible) { outline: 3px solid #73737f; outline-offset: 3px }
.addons-picker { border: 1px solid var(--line); border-radius: 22px; padding: 15px; margin-top: 4px }
.addons-picker summary { cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px }
.addons-picker summary small { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 10px }
.addons-picker summary .icon { width: 18px }
.addons-list { display: grid; gap: 8px; margin-top: 12px }
.addons-list label { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; gap: 10px }
.addons-list label>span { display: grid; gap: 2px }
.addons-list strong { font-size: 12px; font-weight: 550; color: var(--ink) }
.addons-list small { font-size: 11px }
.addons-list input { width: 70px; text-align: center; border-radius: 15px }
.product-confirm { display: flex; align-items: flex-end; gap: 15px; margin-top: 8px }
.product-confirm>label { width: 83px; flex-shrink: 0 }
.product-confirm>button { flex: 1; min-height: 49px }
.product-form-hint { font-size: 11px; color: var(--muted); text-align: center }
.product-dialog #close-preview { background: transparent; border: 0; color: var(--muted); width: 100%; margin-top: 6px; box-shadow: none; font-size: 12px }
.source-dialog { width: min(1200px,calc(100vw - 30px)) }
.source-menu { display: grid; gap: 20px; margin-top: 20px }
.source-menu img { width: 100%; border-radius: 16px }
.order-line p,.ticket-line p { white-space: pre-line }
@media (max-width:1250px) { .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)) } .menu-layout { gap: 20px; grid-template-columns: minmax(0,1fr) 315px } }
@media (max-width:1050px) { .menu-layout { grid-template-columns: minmax(0,1fr) 285px } .product-card { padding: 18px 15px } .menu-heading h1 { font-size: 36px } .menu-search-wrap>span { display: none } }
@media (max-width:900px) { .brand-lucio .sidebar { border: 0 } .sidebar nav { gap: 1px } .menu-layout { grid-template-columns: minmax(0,1fr) 310px } .menu-heading { align-items: flex-start } }
@media (max-width:680px) { .menu-layout { display: flex; flex-direction: column } .catalog-main,.menu-order { width: 100% } .menu-order { position: static } .menu-heading h1 { font-size: 35px } .menu-heading>button { padding: 8px 0; font-size: 10px } .menu-heading>button .icon { width: 17px } .eyebrow { font-size: 9px } .menu-heading p { font-size: 12px } .category-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 15px; margin-bottom: 6px } .category-pills button { flex-shrink: 0; font-size: 11px } .product-grid { gap: 10px } .product-card { padding: 16px 13px; min-height: 250px; border-radius: 23px } .product-card>strong { font-size: 14px } .product-description { font-size: 10px } .product-symbol { width: 51px; height: 51px; border-radius: 20px } .product-price { font-size: 14px } .product-category { font-size: 9px } .product-dialog { padding: 21px; border-radius: 25px } .product-dialog h2 { font-size: 23px } .choice-options { gap: 7px } .choice { padding: 12px 10px } .choice strong { font-size: 11px } .catalog-caption { flex-direction: column; gap: 3px } .brand-lucio .nav-button { padding-inline: 5px } .menu-search-wrap input { font-size: 12px } }
.menu-search-wrap input:focus-visible { outline: 0 }
.menu-search-wrap:has(input:focus-visible) { outline: 2px solid #bb8f53; outline-offset: 3px }
.mobile-order-jump { display: none }
@media (max-width:680px) { .mobile-order-jump { display: inline-flex; position: fixed; bottom: 84px; left: 20px; right: 20px; z-index: 12; box-shadow: 0 6px 18px #5e1b2330; min-height: 48px; font-size: 13px } .menu-order { scroll-margin-top: 15px; margin-bottom: 65px } }
.mobile-brand { display: none }
@media (max-width:900px) { .has-catalog .sidebar nav { grid-template-columns: repeat(6,minmax(0,1fr)) } .mobile-brand { display: block; width: 104px; height: 42px; object-fit: contain } .brand-lucio .lab-label>.icon,.brand-lucio .lab-label>span { display: none } }
/* Full restaurant theme: colors come from the attached catalog's appearance. */
body.has-catalog { --brand-deep: #971508; --brand-surface: #fff9e9; --brand-light: #fff0b8; background: radial-gradient(ellipse at 65% 4%,#fff5c57d,transparent 65%),linear-gradient(150deg,var(--accent),var(--paper) 48%,var(--accent)); background-attachment: fixed }
.has-catalog .sidebar { background: linear-gradient(165deg,var(--brand),var(--brand-deep)); border: 1px solid #ffffff30; box-shadow: 0 15px 28px #84231220 }
.has-catalog .brand-logo { width: 155px; height: 86px; margin: 6px -9px 12px }
.has-catalog .nav-button { color: #fff7dd }
.has-catalog .nav-button:hover { background: #ffffff17 }
.has-catalog .nav-button.active { color: #721e0d; background: var(--accent); box-shadow: 0 4px 14px #5c140b20 }
.has-catalog .count { background: #fff4c5; color: #8a2a17 }
.has-catalog .sidebar-footer { color: #ffe9bf }
.has-catalog .workspace { padding-top: 6px }
.has-catalog .topbar { margin: 0 28px 8px; padding: 6px 17px; background: #fff7d7d9; border-radius: 999px; border: 1px solid #fff5ca }
.has-catalog main { padding-top: 16px }
.has-catalog .page-heading h1,.has-catalog .menu-heading h1 { color: #662519 }
.has-catalog .page-heading p,.has-catalog .menu-heading p,.has-catalog .catalog-caption,.has-catalog .room-hint,.has-catalog .table-caption,.has-catalog .app-footer,.has-catalog .eyebrow { color: #71502c }
.has-catalog .room-tabs { background: #fff5d3; box-shadow: 0 3px 14px #a3670d0b }
.has-catalog .room-tabs button.active { background: var(--brand) }
.has-catalog .panel,.has-catalog .ticket-card { background: var(--brand-surface); border-color: #fff5d0; box-shadow: 0 10px 25px #9b5e0910 }
.has-catalog .table-surface { background: #fff9e6; box-shadow: 0 10px 20px #8a4f0d14,0 2px 4px #8a4f0d0b }
.has-catalog .selected .table-surface { background: var(--brand); box-shadow: 0 0 0 4px var(--paper),0 0 0 8px #b7271840,0 10px 20px #8d431214 }
.has-catalog .chair { background: #eeb735; box-shadow: 0 3px 5px #88520513 }
.has-catalog .room-stats { color: #6c3a1f }
.has-catalog .room-stats .status-icon:not(.available) { background: #fff1bf; color: #a84421 }
.has-catalog .category-pills button { background: #fff5d7b8; border-color: #e5af3938; color: #69422a }
.has-catalog .category-pills button.active { background: var(--brand); border-color: var(--brand); color: #fff }
.has-catalog .menu-search-wrap { background: #fffbed; border-color: #fff6dc; box-shadow: 0 4px 13px #79561808 }
.has-catalog .product-card { background: var(--brand-surface); border-color: #fff7e3; padding: 12px 13px 15px; box-shadow: 0 9px 20px #9450120d; gap: 7px; min-height: 285px }
.has-catalog .product-card:hover { background: #fffdf6; border-color: #ce751d; box-shadow: 0 10px 26px #9d520b25 }
.has-catalog .product-card>strong,.has-catalog .product-card>.product-category,.has-catalog .product-description,.has-catalog .product-bottom { padding-inline: 5px }
.has-catalog .product-add { background: var(--accent); color: #8d2619 }
.has-catalog .product-price { color: var(--brand-deep) }
.has-catalog .notice { background: #fff3ca; color: #6f4a27; border: 1px solid #f4c85760 }
.has-catalog .order-tabs { background: #f8e8c3 }
.has-catalog .menu-callout { background: #fff0bf }
.has-catalog .table-avatar,.has-catalog .summary-icon,.has-catalog .icon-button { background: #ffedb4; color: #9e4b22 }
.has-catalog .order-panel .line-list { background: #fffdf5 }
.has-catalog button.primary:hover:not(:disabled) { background: var(--brand-deep) }
.product-media { width: 100%; height: 148px; border-radius: 22px; overflow: hidden; display: grid; place-items: center; position: relative; isolation: isolate; background: #ffefc9 }
.menu-photo { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 16px }
.product-media>.menu-photo { max-width: 100%; max-height: 100% }
.product-media.compact { width: 140px; height: 104px; flex: 0 0 140px; border-radius: 20px }
.product-intro { align-items: flex-start }
.product-intro p { padding-top: 8px }
.photo-reference { position: absolute; bottom: 5px; right: 6px; left: auto; border-radius: 999px; padding: 3px 7px; font-size: 8px; color: #624122; background: #fff9e9ee; font-weight: 500; max-width: calc(100% - 12px) }
.missing-photo { color: #ad8746; gap: 5px; align-content: center }
.missing-photo>.icon { width: 44px; height: 44px }
.missing-photo>small { font-size: 9px }
.combo-photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; width: 100%; height: 100%; padding: 10px 12px 23px }
.combo-photos.photos-3 .menu-photo:first-child { grid-row: span 2 }
.combo-photos.photos-2 { align-items: center; transform: rotate(-4deg) }
.combo-photos .menu-photo { border-radius: 50%; background: #ffefc9 }
.delivery-button { width: 100%; margin-top: 9px; min-height: 38px; font-size: 12px; background: #f5edcf; color: #72501c; border-color: #e7d59b }
.delivery-button:hover { background: #ffe8a3 }
.delivery-button .icon { width: 17px; height: 17px }
.delivery-note { white-space: pre-line; padding: 12px; background: #fff5db; border-radius: 15px; font-size: 12px; color: #72502a }
@media (min-width:1500px) { .product-media { height: 172px } }
@media (max-width:900px) { .has-catalog .sidebar { background: var(--brand-deep); border: 1px solid #fff5cb50 } .has-catalog .topbar { margin: 0 18px 8px } .has-catalog .nav-button { color: #fff4d4 } .has-catalog .nav-button.active { color: #702a15 } }
@media (max-width:680px) { .has-catalog .topbar { margin: 0 10px 4px; padding: 6px 10px } .has-catalog main { padding-top: 20px } .has-catalog .product-card { padding: 9px 9px 13px; border-radius: 26px; min-height: 267px } .product-media { height: 112px; border-radius: 19px } .product-media.compact { width: 102px; flex-basis: 102px; height: 87px } .product-intro p { font-size: 11px; padding-top: 0 } .has-catalog .brand-logo { margin: 0 } .has-catalog .mobile-brand { width: 93px; height: 37px } .has-catalog .product-card>strong { font-size: 13px } .photo-reference { font-size: 7px; padding: 2px 5px; right: 4px } .has-catalog .topbar-right { gap: 9px } .has-catalog .signal { font-size: 10px } .has-catalog .station-control { padding-left: 6px } .has-catalog .topbar select { min-width: 85px } }
/* Keep the original large photos; compact only the text and surrounding space. */
[hidden] { display: none !important }
.product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px }
.has-catalog .product-card { display: grid; grid-template-columns: minmax(0,1fr) 28px; grid-template-rows: auto 1fr; align-items: start; gap: 9px 5px; padding: 10px; min-height: 0; border-radius: 25px }
.product-card .product-media { grid-column: 1 / -1; width: 100%; height: 148px; border-radius: 19px }
.product-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 0 2px 3px }
.product-copy>strong { font-size: 13px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere }
.product-copy .product-price { font-size: 15px; line-height: 1.15 }
.product-customize { font-size: 9px; color: var(--muted); line-height: 1.2 }
.product-card .product-add { width: 28px; height: 28px; min-width: 28px; align-self: end; margin-bottom: 4px }
.product-card .product-add .icon { width: 16px; height: 16px }
.product-card .combo-photos { gap: 4px; padding: 8px 6px 20px }
.product-card .photo-reference { font-size: 8px; padding: 3px 6px; right: 5px; bottom: 5px }
.product-card .missing-photo small { font-size: 8px; text-align: center; line-height: 1.2 }
.menu-heading { margin-bottom: 16px; margin-top: 0 }
.menu-heading h1 { font-size: 34px; margin-top: 3px }
.menu-heading p { margin-top: 3px; font-size: 12px }
.menu-heading .eyebrow { font-size: 9px }
.category-pills { gap: 6px; padding-bottom: 12px }
.category-pills button { min-height: 38px; padding: 7px 11px; font-size: 11px; gap: 6px }
.category-pills .icon { width: 17px; height: 17px }
.sidebar { gap: 18px }
.sidebar nav { gap: 4px }
.nav-button { min-height: 46px; padding-block: 10px; font-size: 13px }
.has-catalog .brand-logo { width: 125px; height: 65px }
.cash-steps { display: flex; flex-wrap: wrap; gap: 12px 25px; padding: 0 0 20px; color: #714528; font-size: 13px }
.cash-steps>span { display: flex; align-items: center; gap: 8px }
.cash-steps b { display: grid; place-items: center; width: 27px; height: 27px; background: var(--panel); border-radius: 50%; color: var(--brand) }
.cash-stats { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px }
.cash-stats .stat { padding: 18px }
.cash-stats .stat strong { font-size: 24px }
.cash-layout { grid-template-columns: minmax(0,1fr) 310px }
.cash-order .inline-muted { display: inline; font-size: 11px; font-weight: 400 }
.cash-amount { display: block; font-size: 25px; font-weight: 750; letter-spacing: -.7px; margin-top: 5px }
.cash-order small { max-width: 300px }
.payment-dialog { width: min(560px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); border-radius: 30px; padding: 26px }
.payment-dialog #preview-content>h2 { margin-bottom: 18px }
.payment-total { display: grid; gap: 4px; padding: 18px; border-radius: 22px; background: var(--brand-light,#fff1cd); color: #623b20; text-align: center }
.payment-total span { font-size: 12px }
.payment-total strong { font-size: 35px; line-height: 1.15; letter-spacing: -1px }
.cash-received,.customer-fields { display: grid; gap: 14px }
.change-preview { display: flex; align-items: center; justify-content: space-between; color: #4a662b; padding: 12px 16px; background: #eef5e6; border-radius: 16px }
.change-preview strong { font-size: 22px }
.payment-hint { font-size: 11px }
.billing-fields { min-width: 0; margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); display: grid; gap: 15px }
.billing-fields legend { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; padding-right: 15px }
.billing-fields small { font-size: 11px }
.billing-fields .form-row { align-items: end }
.billing-banner { display: flex; gap: 22px; align-items: center; background: var(--panel); border-radius: 30px; padding: 27px; margin-bottom: 18px }
.billing-banner p { margin: 8px 0 12px; color: var(--muted); font-size: 14px }
.billing-mark { width: 75px; height: 75px; flex-shrink: 0; display: grid; place-items: center; border-radius: 28px; background: var(--brand-light,#fff1cd); color: var(--brand) }
.billing-mark .icon { width: 37px; height: 37px }
.form-error { color: #a12716; font-size: 13px }
.form-error:empty { display: none }
@media(min-width:1500px) { .product-card .product-media { height: 172px } }
@media(min-width:681px) and (max-width:1250px) { .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)) } }
@media(max-width:1200px) { .cash-layout { grid-template-columns: 1fr } }
@media(max-width:900px) { .sidebar nav,.has-catalog .sidebar nav { grid-template-columns: repeat(7,minmax(0,1fr)); gap: 0 } .nav-button { font-size: 9px; gap: 2px; padding: 5px 2px } .has-catalog .nav-button { padding-inline: 2px } .nav-button .icon { width: 21px; height: 21px } }
@media(max-width:680px) {
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px }
  .has-catalog .product-card { padding: 9px; gap: 8px 3px; border-radius: 24px }
  .product-card .product-media { height: 112px }
  .product-copy>strong { font-size: 13px }
  .product-copy .product-price { font-size: 15px }
  .menu-heading { margin-bottom: 14px }
  .menu-heading h1 { font-size: 30px }
  .category-pills button { min-height: 44px }
  .cash-stats { grid-template-columns: repeat(2,minmax(0,1fr)) }
  .cash-stats .stat { padding: 15px }
  .cash-stats .stat strong { font-size: 22px }
  .cash-steps { gap: 10px; flex-direction: column }
  .payment-dialog { padding: 22px }
  .payment-dialog .form-row { grid-template-columns: 1fr }
  .billing-banner { padding: 20px; gap: 15px }
  .billing-mark { width: 51px; height: 51px; border-radius: 20px }
  .billing-mark .icon { width: 28px; height: 28px }
  .billing-banner h2 { font-size: 21px }
  .sidebar { left: 8px; right: 8px }
}

.nav-label-short { display: none }
@media(max-width:900px) { .nav-label-full { display: none } .nav-label-short { display: inline } }

.sunat-panel { margin-bottom: 18px }
.sunat-panel .panel-head { flex-wrap: wrap; gap: 15px }
.sunat-panel .panel-head small { display: block; margin-top: 5px; color: var(--muted) }
.sunat-check-result p { margin: 12px 0 5px; font-size: 13px; color: var(--muted) }
.sunat-check-result>small { display: block; font-size: 11px; color: var(--muted) }
.sunat-setup { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 17px }
.sunat-setup summary { cursor: pointer; font-weight: 650; font-size: 13px }
.sunat-requirements { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 22px }
.sunat-requirements>div { display: flex; gap: 10px; align-items: flex-start }
.sunat-requirements strong { font-size: 13px }
.sunat-requirements small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px }
.setup-dot { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 11px; background: #f2e4cb; color: #896037 }
.setup-dot.complete { color: #506b30; background: #e9f2d9 }
.setup-dot .icon { width: 17px; height: 17px }
@media(max-width:680px) { .sunat-requirements { grid-template-columns: 1fr } .sunat-panel .panel-head>button { width: 100%; justify-content: center } }

.fiscal-row{gap:18px;align-items:flex-start}.fiscal-actions{flex-wrap:wrap;justify-content:flex-end;max-width:420px}.fiscal-link{padding:10px 14px;border:1px solid var(--line,#eee);border-radius:14px;color:var(--brand);font-weight:700;text-decoration:none}.fiscal-message{max-width:650px;overflow-wrap:anywhere}.fiscal-check{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px}.fiscal-check input{width:auto!important;min-height:0!important;margin-top:5px}.fiscal-qr{display:block;width:160px;height:160px;margin:12px auto}.fiscal-hash{font-size:9px;overflow-wrap:anywhere}.page-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.page-header h1{margin:0}.page-header p{color:var(--muted)}@media(max-width:680px){.fiscal-row,.page-header{flex-direction:column;align-items:stretch}.fiscal-actions{justify-content:flex-start}.sunat-requirements{grid-template-columns:1fr}}

.pairing-page { max-width:480px; margin:10vh auto; padding:20px }
.pair-code { font-size:38px; font-weight:800; text-align:center; letter-spacing:6px; padding:24px }