body[data-role="cashier"] {
  --brand: #285f82;
  --brand-2: #347ba5;
  --surface-2: #edf4f8;
}

body[data-role="cashier"] .sidebar { background: #163c52; }

body[data-role="kitchen"] {
  --brand: #b95f2f;
  --brand-2: #d47744;
  --surface-2: #fff2e9;
}

body[data-role="kitchen"] .sidebar { background: #402a20; }

.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--brand);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.role-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  margin: 0;
  padding: 0 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #b9d1c5;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.role-switch i { width: 14px; flex: 0 0 auto; text-align: center; font-size: 12px; opacity: .85; }

.role-switch:hover { background: rgba(255,255,255,.08); color: #fff; }
.role-switch-danger:hover { background: rgba(200,75,69,.18); color: #ffb4af; }

.role-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr);
  gap: 18px;
  margin-bottom: 18px;
}

.welcome-panel {
  min-height: 220px;
  padding: 28px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 18px 44px rgba(28, 66, 48, .17);
}

.welcome-panel::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -75px;
  bottom: -110px;
  border: 42px solid rgba(255,255,255,.08);
  border-radius: 50%;
}

.welcome-panel h2 { max-width: 570px; margin: 8px 0 10px; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.045em; }
.welcome-panel p { max-width: 560px; margin: 0; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.65; }
.welcome-actions { display: flex; gap: 9px; margin-top: 24px; }
.welcome-panel .btn-primary { background: #fff; color: var(--brand); box-shadow: none; }
.welcome-panel .btn-soft { border-color: rgba(255,255,255,.3); color: #fff; background: rgba(255,255,255,.08); }

.workflow-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px;
  margin-bottom: 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  scrollbar-width: none;
}

.workflow-strip::-webkit-scrollbar { display: none; }
.workflow-step { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.workflow-step span {
  min-height: 28px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--brand);
  font-size: 9px;
  font-weight: 800;
}
.workflow-step i { color: #a3afa8; font-style: normal; font-size: 11px; }

.role-action-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.role-action-card {
  min-height: 145px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  box-shadow: var(--shadow);
  transition: .18s ease;
}
.role-action-card:hover { transform: translateY(-3px); border-color: #b8cbc0; }
.role-action-card .stat-icon { margin-bottom: 18px; }
.role-action-card strong { display: block; font-size: 13px; }
.role-action-card p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }

.pos-workspace { display: grid; grid-template-columns: 245px minmax(0,1fr) 350px; gap: 15px; align-items: start; }
.pos-context, .role-cart { position: sticky; top: 90px; overflow: hidden; }
.context-section { padding: 14px; border-bottom: 1px solid var(--line); }
.context-section:last-child { border: 0; }
.context-title { display: block; margin-bottom: 9px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.choice {
  min-height: 37px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
  font-weight: 750;
}
.choice.active { border-color: var(--brand); background: var(--surface-2); color: var(--brand); }

.kot-no { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.kot-privacy { padding: 9px 12px; border-radius: 10px; background: #f1f4f2; color: var(--muted); font-size: 9px; }

.kot-board { display: grid; gap: 8px; }
.kot-row {
  width: 100%;
  min-height: 64px;
  padding: 6px 10px 6px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-left: 4px solid #8b9690;
  border-radius: 14px;
  background: #fff;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, background-color .8s ease;
}
.kot-row:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.kot-row.preparing { border-left-color: var(--accent); }
.kot-row.ready { border-left-color: var(--success); }
.kot-row.urgent { border-left-color: var(--warning); }
.kot-row.urgent .kot-no { color: var(--warning); }
.kot-row.critical { border-left-color: var(--danger); box-shadow: 0 0 0 2px rgba(200,75,69,.18); }
.kot-row.critical .kot-no { color: var(--danger); }
.kot-row.just-updated { background: var(--surface-2); }

.kot-row-open {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 7px 4px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.kot-row-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--brand); font-size: 15px; }
.kot-row-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.kot-row-main strong { font-size: 13px; }
.kot-row-main span { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kot-row-chevron { color: var(--muted); font-size: 12px; flex: 0 0 auto; }

.kot-row-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.kot-row-action {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.kot-row-action:hover { background: var(--surface-2); color: var(--brand); border-color: var(--brand); }
.kot-row-action-danger:hover { background: rgba(200,75,69,.12); color: var(--danger); border-color: var(--danger); }

.bill-card { border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: #fff; }
.bill-card + .bill-card { margin-top: 10px; }
.bill-summary { padding: 14px; display: grid; grid-template-columns: minmax(0,1fr) repeat(3,auto); gap: 15px; align-items: center; }
.bill-summary strong, .bill-summary span { display: block; }
.bill-summary small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.payment-methods { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.payment-method { min-height: 48px; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; font-size: 10px; font-weight: 750; }
.payment-method.active { border-color: var(--brand); color: var(--brand); background: var(--surface-2); }

.permission-list { display: flex; flex-wrap: wrap; gap: 5px; max-width: 370px; }
.permission { padding: 5px 7px; border-radius: 7px; background: var(--surface-2); color: var(--brand); font-size: 8px; font-weight: 750; }

.role-gate {
  min-height: 100vh;
  padding: 40px 20px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 10% 15%, rgba(232,132,77,.16), transparent 26%),
    radial-gradient(circle at 90% 85%, rgba(36,92,69,.18), transparent 27%),
    #f4f7f4;
}
.role-gate-inner { width: min(1040px,100%); }
.role-gate-head { max-width: 680px; margin: 0 auto 28px; text-align: center; }
.role-gate-head .brand-mark { margin: 0 auto 15px; }
.role-gate-head h1 { margin: 0; font-size: clamp(30px,5vw,48px); letter-spacing: -.055em; }
.role-gate-head p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.role-gate-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.role-gate-card { min-height: 260px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.93); box-shadow: var(--shadow); transition: .2s ease; }
.role-gate-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(28,48,38,.12); }
.role-gate-card .stat-icon { width: 48px; height: 48px; margin-bottom: 24px; }
.role-gate-card h2 { margin: 0; font-size: 20px; letter-spacing: -.035em; }
.role-gate-card p { min-height: 46px; margin: 8px 0 18px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.role-gate-list { display: grid; gap: 7px; color: #4d5c54; font-size: 9px; }
.role-gate-list span::before { content: "\2713"; margin-right: 7px; color: var(--success); font-weight: 900; }
.role-gate-card .btn { width: 100%; margin-top: 21px; }

.mobile-cart-bar { display: none; }

.table-check-grid {
  max-height: 190px;
  padding: 7px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fafcfb;
}
.table-check-grid label {
  min-height: 42px;
  padding: 8px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #46544c;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  touch-action: manipulation;
}
.table-check-grid label:has(input:checked) { border-color: var(--brand); background: var(--surface-2); color: var(--brand); }
.table-check-grid input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); flex: 0 0 auto; }

.print-kot { color: #111; background: #fff; }
.print-kot__brand { margin-bottom: 5px; font-size: 14px; font-weight: 900; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.print-kot h2 { margin: 0 0 16px; padding-bottom: 11px; border-bottom: 2px dashed #222; font-size: 20px; text-align: center; }
.print-kot dl { margin: 0 0 14px; display: grid; gap: 5px; }
.print-kot dl div { display: flex; justify-content: space-between; gap: 18px; }
.print-kot dt { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.print-kot dd { margin: 0; font-size: 11px; font-weight: 800; text-align: right; }
.print-kot__items { padding: 11px 0; display: grid; gap: 9px; border-block: 2px dashed #222; }
.print-kot__items > div { display: grid; gap: 2px; }
.print-kot__items strong { font-size: 14px; }
.print-kot__items span { font-size: 10px; }
.print-kot__note { margin-top: 12px; padding: 9px; display: grid; gap: 4px; border: 2px solid #222; }
.print-kot__note strong { font-size: 10px; text-transform: uppercase; }
.print-kot__note span { font-size: 12px; font-weight: 800; }

@media (max-width: 1180px) {
  .role-action-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pos-workspace { grid-template-columns: 220px minmax(0,1fr); }
  .role-cart { grid-column: 1 / -1; position: static; }
  .role-gate-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .role-welcome { grid-template-columns: 1fr; }
  .pos-workspace { grid-template-columns: 1fr; }
  .pos-context { position: static; }
  .role-gate-grid { grid-template-columns: 1fr; }
  .role-gate-card { min-height: 0; }
  .mobile-cart-bar {
    position: fixed;
    z-index: 42;
    left: calc(14px + env(safe-area-inset-left));
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    min-height: 56px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 16px 38px rgba(16,44,31,.28);
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
    touch-action: manipulation;
  }
  .mobile-cart-bar strong { font-size: 13px; white-space: nowrap; }
  body[data-role="cashier"][data-page="pos"] .content { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .choice, .role-switch { min-height: 44px; }
  .role-switch, .card-link { display: inline-flex; align-items: center; }
  .card-link { min-height: 44px; }
  .table-check-grid label { min-height: 44px; }
}

@media (max-width: 700px) {
  .welcome-panel { padding: 21px; }
  .welcome-actions { flex-direction: column; }
  .role-action-grid { grid-template-columns: 1fr; }
  .bill-summary { grid-template-columns: 1fr 1fr; }
  .bill-summary > div:first-child { grid-column: 1 / -1; }
  .role-pill { display: none; }
  .table-check-grid { grid-template-columns: 1fr; }
  .role-gate { padding: calc(24px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); }
  .role-gate-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .welcome-panel h2 { font-size: 25px; }
  .welcome-panel p { font-size: 11px; }
  .role-action-card { min-height: 0; padding: 15px; }
  .role-action-card .stat-icon { margin-bottom: 12px; }
  .bill-summary { gap: 10px; }
  .payment-methods { grid-template-columns: 1fr; }
  .mobile-cart-bar { left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); }
  .kot-row { flex-wrap: wrap; row-gap: 4px; padding: 10px 10px 10px 14px; }
  .kot-row-open { flex: 1 1 100%; }
  .kot-row-actions { flex: 1 1 100%; justify-content: flex-end; padding-left: 53px; }
}

/* Cashier order flow */
body[data-page="pos"] .content { max-width: 1680px; margin-inline: auto; }

.pos-launch {
  min-height: 330px;
  padding: clamp(28px, 4vw, 52px);
  display: none;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  align-items: center;
  gap: 28px;
  overflow: hidden;
  position: relative;
  border-radius: 26px;
  background: linear-gradient(135deg, #123b54 0%, #245f7f 60%, #3d84a8 100%);
  color: #fff;
  box-shadow: 0 24px 55px rgba(19, 59, 82, .2);
}
.pos-launch::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 15%, rgba(255,255,255,.13), transparent 24%), radial-gradient(circle at 90% 90%, rgba(242,142,85,.25), transparent 30%); pointer-events: none; }
.pos-launch-copy { max-width: 650px; position: relative; z-index: 1; }
.launch-kicker { display: inline-flex; min-height: 28px; padding: 0 10px; align-items: center; border-radius: 999px; background: rgba(255,255,255,.12); color: #cce8f5; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.pos-launch h2 { max-width: 560px; margin: 15px 0 10px; font-size: clamp(32px, 4vw, 52px); line-height: 1.03; letter-spacing: -.055em; }
.pos-launch p { max-width: 570px; margin: 0; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; }
.take-order-button { min-height: 56px; margin-top: 26px; padding-inline: 24px; background: #f08b52; box-shadow: 0 14px 28px rgba(10, 38, 54, .28); font-size: 15px; }
.take-order-button:hover { background: #ff9a62; }
.launch-helper { display: block; margin-top: 13px; color: rgba(255,255,255,.6); font-size: 10px; }
.pos-launch-visual { min-height: 230px; display: grid; place-items: center; position: relative; }
.launch-orbit { position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.launch-orbit-one { width: 290px; height: 290px; }
.launch-orbit-two { width: 205px; height: 205px; border-width: 22px; border-color: rgba(255,255,255,.06); }
.launch-receipt { width: 168px; min-height: 190px; padding: 25px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; border: 1px solid rgba(255,255,255,.4); border-radius: 24px; background: rgba(255,255,255,.94); color: var(--brand); box-shadow: 0 24px 50px rgba(3,25,39,.24); transform: rotate(3deg); }
.launch-receipt::after { content: "+"; width: 36px; height: 36px; display: grid; place-items: center; position: absolute; right: -12px; bottom: 21px; border: 4px solid #327694; border-radius: 50%; background: #f08b52; color: #fff; font-size: 22px; font-weight: 800; }
.launch-receipt strong { margin-top: 19px; font-size: 17px; }
.launch-receipt span { margin-top: 5px; color: var(--muted); font-size: 11px; }

.pos-quick-stats { margin: 18px 0; display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pos-quick-stats article { min-height: 82px; padding: 15px 17px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.pos-quick-stats strong, .pos-quick-stats small { display: block; }
.pos-quick-stats strong { font-size: 19px; }
.pos-quick-stats small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.order-how { padding: 21px 23px; display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 25px; border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.order-how h3 { margin: 8px 0 0; font-size: 16px; line-height: 1.4; }
.order-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.order-how-grid article { min-height: 65px; padding: 11px; display: flex; align-items: center; gap: 10px; border-radius: 13px; background: var(--surface-2); }
.order-how-grid b, .setup-label > b { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: var(--brand); color: #fff; font-size: 12px; }
.order-how-grid strong, .order-how-grid small { display: block; }
.order-how-grid strong { font-size: 11px; }
.order-how-grid small { margin-top: 3px; color: var(--muted); font-size: 9px; }

.order-setup-intro { margin: -18px -18px 18px; padding: 20px 22px; background: linear-gradient(135deg, #eff7fb, #f7fbfd); border-bottom: 1px solid #dce9ef; }
.setup-step { color: var(--brand); font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.order-setup-intro h4 { margin: 8px 0 5px; font-size: 20px; letter-spacing: -.03em; }
.order-setup-intro p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.setup-field + .setup-field { margin-top: 23px; padding-top: 22px; border-top: 1px solid var(--line); }
.setup-label { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.setup-label strong, .setup-label small { display: block; }
.setup-label strong { font-size: 13px; }
.setup-label small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.setup-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.setup-choice { min-height: 78px; padding: 13px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; text-align: left; }
.setup-choice.active { border-color: var(--brand); background: var(--surface-2); box-shadow: 0 0 0 3px rgba(40,95,130,.08); }
.setup-choice-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: #eef4f8; color: var(--brand); }
.setup-choice-icon i { font-size: 16px; }
.setup-choice strong, .setup-choice small { display: block; }
.setup-choice strong { font-size: 12px; }
.setup-choice small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.setup-select { margin-top: 11px; display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
.selected-client { margin-top: 9px; padding: 10px; display: flex; align-items: center; gap: 10px; border-radius: 12px; background: #f7fafc; }
.selected-client strong, .selected-client small { display: block; }
.selected-client strong { font-size: 11px; }
.selected-client small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.setup-table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.setup-table {
  position: relative;
  min-height: 86px;
  padding: 13px 14px 12px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
  animation: table-in .28s cubic-bezier(.2, .7, .3, 1) backwards;
}
.setup-table::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #98a69e; }
.setup-table strong, .setup-table span { display: block; }
.setup-table strong { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.setup-table span { color: var(--muted); font-size: 10px; font-weight: 650; }
.setup-table-dot { width: 9px; height: 9px; margin-right: 0; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: #98a69e; box-shadow: 0 0 0 4px color-mix(in srgb, #98a69e 14%, transparent); }
.setup-table-dot.status-available { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 16%, transparent); }
.setup-table-dot.status-partially-seated { background: #2f6fa8; box-shadow: 0 0 0 4px color-mix(in srgb, #2f6fa8 16%, transparent); }
.setup-table-dot.status-occupied { background: #d9891c; box-shadow: 0 0 0 4px color-mix(in srgb, #d9891c 16%, transparent); }
.setup-table-dot.status-ready { background: #117443; box-shadow: 0 0 0 4px color-mix(in srgb, #117443 16%, transparent); }
.setup-table-dot.status-reserved { background: #3d82b3; box-shadow: 0 0 0 4px color-mix(in srgb, #3d82b3 16%, transparent); }
.setup-table-dot.status-out-of-service { background: #7b8780; box-shadow: 0 0 0 4px color-mix(in srgb, #7b8780 16%, transparent); }
.setup-table.status-available::before { background: var(--success); }
.setup-table.status-available { border-color: color-mix(in srgb, var(--success) 30%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--success) 7%, var(--surface)), var(--surface) 60%); }
.setup-table.status-partially-seated::before { background: #2f6fa8; }
.setup-table.status-partially-seated { border-color: color-mix(in srgb, #2f6fa8 30%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, #2f6fa8 7%, var(--surface)), var(--surface) 60%); }
.setup-table.status-ready::before { background: #117443; }
.setup-table.status-ready { border-color: color-mix(in srgb, #117443 30%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, #117443 7%, var(--surface)), var(--surface) 60%); }
.setup-table.status-occupied::before { background: #d9891c; }
.setup-table.status-reserved::before { background: #3d82b3; }
.setup-table.status-out-of-service::before { background: #7b8780; }
.setup-table:not(:disabled):hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 32%, var(--line)); }
.setup-table.active { border-color: var(--brand); background: var(--surface-2); color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.setup-table.active::before { width: 5px; background: var(--brand); }
.setup-table.active::after {
  content: "\2713";
  position: absolute; top: 9px; right: 9px;
  width: 19px; height: 19px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.setup-table.is-blocked, .setup-table:disabled { border-style: dashed; background: color-mix(in srgb, var(--muted) 7%, var(--surface)); color: var(--muted); cursor: not-allowed; opacity: .68; }
.setup-table.is-blocked::before, .setup-table:disabled::before { background: var(--line); }
.setup-table.is-blocked span, .setup-table:disabled span { color: inherit; }
.setup-table-legend { margin: 0 0 12px; padding: 9px 11px; display: flex; gap: 6px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.setup-table-legend span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--canvas); color: var(--muted); font-size: 9px; font-weight: 750; }
.setup-table-legend i { width: 8px; height: 8px; border-radius: 50%; }
@keyframes table-in {
  from { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .setup-table { animation: none !important; transition-duration: .01ms !important; }
}
.setup-takeaway { grid-column: span 2; }
.setup-warning { margin: 9px 0 0; padding: 9px 11px; border-radius: 9px; background: #fff7e3; color: #8f661f; font-size: 10px; }

.pos-session-bar { min-height: 78px; margin-bottom: 12px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #d9e7ee; border-radius: 18px; background: linear-gradient(135deg, #fff, #f5fafc); }
.pos-session-main, .session-actions, .session-fact, .cart-head-actions { display: flex; align-items: center; }
.pos-session-main { gap: 18px; }
.session-status { min-height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; background: #eaf7f0; color: var(--success); font-size: 9px; font-weight: 850; white-space: nowrap; text-transform: uppercase; }
.session-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(35,136,92,.1); }
.session-fact { gap: 9px; }
.session-fact > svg { color: var(--brand); }
.session-fact small, .session-fact strong { display: block; }
.session-fact small { color: var(--muted); font-size: 9px; }
.session-fact strong { margin-top: 2px; font-size: 12px; }
.session-table { padding-left: 17px; border-left: 1px solid var(--line); }
.session-actions { gap: 7px; }
.order-progress { margin: 0 0 13px; padding: 0 8px; display: flex; align-items: center; gap: 7px; color: #8b9690; font-size: 10px; font-weight: 750; }
.order-progress span { min-height: 28px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; white-space: nowrap; }
.order-progress span.done { color: var(--success); }
.order-progress span.active { background: var(--surface-2); color: var(--brand); }
.order-progress > i { min-width: 14px; height: 1px; flex: 1; background: #dce3df; }

.pos-workspace { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 15px; align-items: start; }
.pos-menu { overflow: hidden; }
.pos-toolbar { min-height: 70px; justify-content: space-between; }
.pos-toolbar h3 { margin: 0; font-size: 15px; }
.pos-toolbar p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.pos-toolbar .toolbar-search { max-width: 360px; flex: 1; }
.pos-menu-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.pos-menu-grid .menu-card { min-height: 195px; }
.pos-menu-grid .menu-visual { height: 94px; }
.menu-count { min-height: 24px; padding: 0 8px; display: inline-flex; align-items: center; position: absolute; top: 9px; right: 9px; z-index: 2; border-radius: 999px; background: var(--brand); color: #fff; font-size: 9px; font-weight: 800; box-shadow: 0 4px 12px rgba(40,95,130,.22); }
.menu-empty { grid-column: 1 / -1; min-height: 260px; display: grid; place-content: center; gap: 5px; color: var(--muted); text-align: center; }
.menu-empty strong { color: var(--ink); font-size: 14px; }
.menu-empty span { font-size: 11px; }
.role-cart { grid-column: auto; position: sticky; top: 90px; overflow: hidden; }
.role-cart-head h3 { margin-top: 4px; }
.cart-head-actions { gap: 7px; }
.mobile-cart-close, .cart-backdrop { display: none; }
.role-cart .cart-items { max-height: min(39vh, 380px); }
.cart-line-side { display: grid; justify-items: end; gap: 8px; }
.cart-empty { padding: 42px 12px; }
.cart-form label { display: grid; gap: 6px; }
.cart-form .form-label small { color: var(--muted); font-weight: 500; }
.send-kot-button { min-height: 50px; margin-top: 3px; }
.mobile-cart-bar { display: none; }
.modal-message { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.success-state { padding: 25px 15px; }

.custom-product { margin: -18px -18px 18px; padding: 17px 19px; display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #f2f7f4, #f8fbf9); border-bottom: 1px solid var(--line); }
.custom-product-icon { width: 54px; height: 54px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; background: #fff; font-size: 27px; box-shadow: 0 7px 18px rgba(22,57,41,.07); }
.custom-product strong, .custom-product small { display: block; }
.custom-product strong { font-size: 14px; }
.custom-product small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.custom-form { display: grid; gap: 18px; }
.custom-group { display: grid; gap: 8px; }
.custom-options { display: flex; flex-wrap: wrap; gap: 7px; }
.custom-option { min-width: 78px; min-height: 48px; padding: 7px 10px; display: grid; place-content: center; gap: 2px; flex: 1; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; }
.custom-option strong, .custom-option small { display: block; }
.custom-option strong { font-size: 10px; }
.custom-option small { color: var(--muted); font-size: 8px; }
.custom-option.active { border-color: var(--brand); background: var(--surface-2); color: var(--brand); box-shadow: 0 0 0 3px rgba(40,95,130,.07); }
.custom-note { display: grid; gap: 7px; }
.custom-note .form-label small { color: var(--muted); font-weight: 500; }
.custom-quantity { min-height: 60px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 13px; background: #f7faf8; }
.custom-quantity strong, .custom-quantity small { display: block; }
.custom-quantity strong { font-size: 11px; }
.custom-quantity small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.custom-quantity .qty-btn { width: 40px; height: 40px; }
.custom-quantity .qty { min-width: 22px; font-size: 13px; }
.custom-add-button { min-width: 225px; justify-content: space-between; }
.custom-add-button strong { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.25); }

@media (max-width: 1280px) {
  .pos-menu-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1100px) {
  .pos-launch { display: grid; }
  .pos-quick-stats { display: grid; }
  .pos-workspace { display: block; }
  .role-cart { width: min(420px, 100%); height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column; position: fixed; z-index: 105; inset: 0 0 0 auto; border: 0; border-radius: 0; transform: translateX(105%); transition: transform .25s ease; box-shadow: -24px 0 60px rgba(9,33,46,.2); }
  .role-cart.open { transform: translateX(0); }
  .role-cart .cart-items { max-height: none; flex: 1; }
  .mobile-cart-close { display: grid; }
  .cart-backdrop { width: 100%; height: 100%; padding: 0; position: fixed; z-index: 104; inset: 0; border: 0; background: rgba(8,25,35,.48); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .cart-backdrop.open { display: block; opacity: 1; pointer-events: auto; }
  .mobile-cart-bar { min-height: 64px; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; z-index: 42; left: calc(15px + env(safe-area-inset-left)); right: calc(15px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); border: 1px solid rgba(255,255,255,.2); border-radius: 17px; background: #173f57; color: #fff; box-shadow: 0 18px 42px rgba(13,45,63,.3); cursor: pointer; }
  .mobile-cart-bar > span, .mobile-cart-bar > strong { display: flex; align-items: center; gap: 10px; }
  .mobile-cart-bar b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.12); }
  .mobile-cart-bar span span { font-size: 12px; font-weight: 750; }
  .mobile-cart-bar > strong { font-size: 13px; white-space: nowrap; }
  .mobile-cart-bar.has-items { background: var(--brand); }
  body[data-page="pos"] .content { padding-bottom: calc(105px + env(safe-area-inset-bottom)); }
}

@media (max-width: 900px) {
  .pos-launch { min-height: 300px; grid-template-columns: minmax(0,1fr) 230px; padding: 32px; }
  .pos-launch-visual { min-height: 210px; }
  .launch-orbit-one { width: 230px; height: 230px; }
  .order-how { grid-template-columns: 1fr; }
  .pos-session-main { gap: 12px; }
  .pos-menu-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .pos-launch { min-height: 0; padding: 28px 22px; display: block; border-radius: 22px; }
  .pos-launch h2 { font-size: 34px; }
  .pos-launch p { font-size: 12px; }
  .pos-launch-visual { display: none; }
  .take-order-button { width: 100%; min-height: 58px; }
  .launch-helper { text-align: center; }
  .pos-quick-stats { gap: 8px; }
  .pos-quick-stats article { min-height: 76px; padding: 10px; gap: 8px; }
  .pos-quick-stats .stat-icon { width: 36px; height: 36px; border-radius: 11px; }
  .pos-quick-stats strong { font-size: 16px; }
  .pos-quick-stats small { font-size: 8px; }
  .order-how { padding: 18px; }
  .order-how-grid { grid-template-columns: 1fr; }
  .pos-session-bar { padding: 12px; align-items: stretch; }
  .pos-session-main { flex: 1; flex-wrap: wrap; }
  .session-status { width: 100%; }
  .session-actions { align-self: flex-end; }
  .session-actions .btn:not(.btn-icon) { width: 44px; padding: 0; font-size: 0; }
  .session-actions .btn svg { width: 18px; height: 18px; }
  .session-table { margin-left: auto; }
  .order-progress { padding: 0; overflow-x: auto; scrollbar-width: none; }
  .order-progress > i { min-width: 18px; flex: 0 0 18px; }
  .pos-toolbar { align-items: stretch; flex-direction: column; }
  .pos-toolbar .toolbar-search { width: 100%; max-width: none; }
  .pos-menu-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pos-menu-grid .menu-card { min-height: 174px; }
  .pos-menu-grid .menu-visual { height: 82px; }
  .setup-choice-grid { grid-template-columns: 1fr; }
  .setup-table-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .setup-takeaway { grid-column: span 2; }
  body[data-page="pos"] .modal-backdrop { align-items: flex-end; padding: 0; }
  body[data-page="pos"] .modal { width: 100%; max-height: calc(94dvh - env(safe-area-inset-top)); border-radius: 24px 24px 0 0; }
  body[data-page="pos"] .modal-head { position: sticky; z-index: 2; top: 0; background: #fff; }
  body[data-page="pos"] .modal-foot { padding-bottom: calc(13px + env(safe-area-inset-bottom)); position: sticky; z-index: 2; bottom: 0; background: #fff; }
  .role-cart { width: 100%; height: min(92dvh, 820px); max-height: 92dvh; inset: auto 0 0; border-radius: 24px 24px 0 0; transform: translateY(105%); }
  .role-cart.open { transform: translateY(0); }
}

@media (max-width: 430px) {
  .pos-quick-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pos-quick-stats article { flex-direction: column; align-items: flex-start; }
  .order-how { display: none; }
  .pos-session-bar { margin-inline: -2px; }
  .session-fact .cell-avatar { display: none; }
  .session-table { padding-left: 10px; }
  .pos-menu-grid { gap: 9px; }
  .pos-menu-grid .menu-card { min-height: 165px; }
  .pos-menu-grid .menu-visual { height: 76px; }
  .menu-count { top: 6px; right: 6px; }
  .setup-table-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .setup-takeaway { grid-column: span 2; }
  .custom-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .custom-option { min-width: 0; }
  .modal-foot .custom-add-button { min-width: 0; flex: 1; }
  .mobile-cart-bar { left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); }
}

.mobile-wizard-progress { display: none; }
.setup-input-grid { margin-top: 11px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.setup-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.setup-service {
  min-height: 64px;
  padding: 9px;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: center;
}
.setup-service strong, .setup-service span { display: block; }
.setup-service strong { font-size: 11px; }
.setup-service span { color: var(--muted); font-size: 8px; }
.setup-service.active { border-color: var(--brand); background: var(--surface-2); color: var(--brand); box-shadow: 0 0 0 3px rgba(40,95,130,.08); }
.setup-sub-label { margin: 14px 0 8px; display: block; color: #48564e; font-size: 10px; font-weight: 750; }
.setup-delivery-address { margin-top: 12px; }

.mobile-final-page { max-width: 620px; margin: 0 auto; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
.mobile-step-heading { margin: 14px 0 16px; display: flex; align-items: flex-start; gap: 12px; }
.mobile-step-back { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--brand); cursor: pointer; }
.mobile-step-back svg { transform: rotate(180deg); }
.mobile-step-heading span { color: var(--brand); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.mobile-step-heading h2 { margin: 4px 0 3px; font-size: 23px; letter-spacing: -.04em; }
.mobile-step-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.mobile-order-person { margin-bottom: 12px; padding: 12px; display: flex; align-items: center; gap: 12px; border: 1px solid #d9e7ee; border-radius: 16px; background: linear-gradient(135deg, #fff, #f4fafc); }
.mobile-order-person .session-fact:first-child { min-width: 0; flex: 1; }
.mobile-order-person .session-fact strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-order-person .session-fact em { max-width: 190px; margin-top: 3px; display: block; overflow: hidden; color: var(--muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.mobile-final-items { margin-bottom: 12px; overflow: hidden; }
.mobile-final-items > header { min-height: 62px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.mobile-final-items h3 { margin: 0; font-size: 14px; }
.mobile-final-items header p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.mobile-final-line { padding: 13px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; border-bottom: 1px solid var(--line); }
.mobile-final-line:last-child { border-bottom: 0; }
.mobile-final-line-copy strong, .mobile-final-line-copy small, .mobile-final-line-copy span { display: block; }
.mobile-final-line-copy strong { font-size: 12px; }
.mobile-final-line-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.mobile-final-line-copy span { margin-top: 5px; color: var(--brand); font-size: 9px; font-weight: 750; }
.mobile-final-line-side { display: grid; justify-items: end; gap: 8px; }
.mobile-final-line-side > strong { font-size: 12px; }
.mobile-final-notes { margin-bottom: 12px; padding: 14px; display: grid; gap: 12px; }
.mobile-final-notes label { display: grid; gap: 7px; }
.mobile-amount-card { padding: 16px; display: grid; gap: 11px; }
.amount-card-label { margin-bottom: 2px; color: var(--brand); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.mobile-amount-card .summary-row { font-size: 12px; }
.mobile-amount-card .summary-row.total { margin-top: 3px; padding-top: 13px; font-size: 16px; }
.mobile-final-actions { padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 9px; position: fixed; z-index: 42; left: calc(15px + env(safe-area-inset-left)); right: calc(15px + env(safe-area-inset-right)); bottom: 0; background: linear-gradient(to top, var(--canvas) 72%, transparent); }
.mobile-final-actions .btn { min-height: 56px; }

@media (max-width: 1100px) {
  .mobile-wizard-progress {
    margin: 0 0 15px;
    padding: 12px 13px;
    display: grid;
    grid-template-columns: auto minmax(22px, 1fr) auto minmax(22px, 1fr) auto;
    align-items: start;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(19,59,82,.05);
  }
  .wizard-progress-step { min-width: 45px; display: grid; justify-items: center; gap: 5px; color: #95a29b; }
  .wizard-progress-step > span { width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid #dce4df; border-radius: 50%; background: #fff; font-size: 10px; font-weight: 850; }
  .wizard-progress-step strong { font-size: 9px; }
  .wizard-progress-step.active { color: var(--brand); }
  .wizard-progress-step.active > span { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(40,95,130,.09); }
  .wizard-progress-step.done { color: var(--success); }
  .wizard-progress-step.done > span { border-color: var(--success); background: #eaf7f0; color: var(--success); }
  .mobile-wizard-progress > i { height: 2px; margin-top: 14px; border-radius: 999px; background: #dce4df; }
  .mobile-wizard-progress > i.done { background: var(--success); }
  .mobile-wizard-progress + .order-setup-intro { margin-top: 0; }

  .setup-input-grid { grid-template-columns: 1fr; }
  .setup-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .setup-service { min-height: 67px; padding-inline: 5px; }
  .setup-service strong { font-size: 10px; }
  .setup-table-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  body[data-page="pos"] .order-progress { display: none; }
  body[data-page="pos"] .pos-session-bar { margin-bottom: 12px; }
  body[data-page="pos"] .role-cart,
  body[data-page="pos"] .cart-backdrop { display: none !important; }
  body[data-page="pos"] .mobile-cart-bar[disabled] { opacity: .58; cursor: not-allowed; }
  body[data-page="pos"] .mobile-cart-bar > strong { min-height: 40px; padding: 0 13px; border-radius: 12px; background: rgba(255,255,255,.12); }
  body[data-page="pos"] .pos-menu-grid { padding-bottom: 19px; }
}

@media (min-width: 1101px) {
  body.desktop-setup-required [data-close-setup] { display: none !important; }
  .django-pos.resource-error .pos-launch { display: grid; }
  .django-pos.resource-error .pos-quick-stats { display: grid; }
}

@media (max-width: 430px) {
  .mobile-wizard-progress { margin-inline: -2px; padding-inline: 9px; }
  .wizard-progress-step { min-width: 40px; }
  .setup-service span { display: none; }
  .mobile-order-person { flex-wrap: wrap; }
  .mobile-order-person .session-fact:first-child { width: calc(100% - 70px); }
  .mobile-order-person .session-fact:nth-child(2) { margin-left: 48px; }
  .mobile-order-person .btn { margin-left: auto; }
  .mobile-final-actions { left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); grid-template-columns: 82px minmax(0, 1fr); }
}

/* Stock-aware three-panel order workspace */
.sr-only {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pos-workspace {
  grid-template-columns: 250px minmax(0, 1fr) 360px;
}

.pos-client-rail {
  position: sticky;
  top: 90px;
  overflow: hidden;
}

.client-rail-head {
  min-height: 67px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #f7fbf9, #fff);
}
.client-rail-head h3 { margin: 4px 0 0; font-size: 14px; }
.client-rail-head .btn span { display: none; }
.client-rail-head .btn { width: 36px; padding: 0; }

.client-rail-profile {
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--line);
}
.client-rail-avatar {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--surface-2);
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}
.client-rail-profile strong, .client-rail-profile small { display: block; }
.client-rail-profile strong { font-size: 12px; }
.client-rail-profile small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.client-rail-head .setup-step { font-size: 10px; }

.client-detail-list { margin: 0; padding: 5px 14px; }
.client-detail-list > div { padding: 10px 0; border-bottom: 1px solid #eef2ef; }
.client-detail-list > div:last-child { border-bottom: 0; }
.client-detail-list dt {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}
.client-detail-list dt i { width: 12px; color: var(--brand); text-align: center; }
.client-detail-list dd { margin: 4px 0 0 19px; overflow-wrap: anywhere; font-size: 11px; font-weight: 750; }

.client-route-summary {
  margin: 4px 12px 12px;
  padding: 10px;
  display: grid;
  gap: 7px;
  border-radius: 12px;
  background: #f5f8f6;
}
.client-route-summary span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.client-route-summary i { width: 14px; color: var(--brand); text-align: center; }
.client-route-summary b { min-width: 16px; color: var(--ink); font-size: 11px; }
.client-rail-hint { margin: 0; padding: 12px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.5; }
.client-rail-hint i { margin-right: 5px; color: var(--info); }

.setup-guest-count { max-width: 210px; }
.setup-select small { color: var(--muted); font-weight: 500; }

.pos-menu-tools { min-width: min(100%, 440px); display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.pos-menu-tools .toolbar-search { min-width: 230px; }
.menu-view-toggle {
  padding: 3px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f7f9f8;
}
.menu-view-button {
  min-height: 32px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.menu-view-button.active { background: #fff; color: var(--brand); box-shadow: 0 3px 9px rgba(23, 60, 46, .09); }

.pos-menu-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pos-menu-grid .menu-card { min-width: 0; min-height: 220px; display: flex; flex-direction: column; }
.menu-card-main {
  min-width: 0;
  padding: 0;
  display: block;
  flex: 1;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.menu-card-main[disabled] { cursor: not-allowed; }
.menu-card-main:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent); outline-offset: -3px; border-radius: 11px; }
.menu-card-copy, .menu-card-name, .menu-card-description, .menu-card-meta { display: block; }
.menu-card-name { margin: 11px 0 4px; overflow: hidden; font-size: 13px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.menu-card-description { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.menu-card-meta { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.menu-route, .menu-stock, .cart-route, .customize-route {
  min-height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}
.menu-route.route-prepared, .cart-route.route-prepared, .customize-route.route-prepared { background: #fff2e9; color: #a7562e; }
.menu-route.route-direct, .cart-route.route-direct, .customize-route.route-direct { background: #eaf7f0; color: #237451; }
.menu-stock { background: #f1f4f2; color: #5f6f66; }
.menu-stock.low { background: #fff5df; color: #93620f; }
.menu-price { gap: 8px; }
.menu-quick-add {
  min-height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
}
.menu-quick-add:hover { background: var(--brand-2); }
.menu-quick-add:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent); outline-offset: 2px; }
.menu-quick-add[disabled] { opacity: .5; cursor: not-allowed; }
.menu-card.stock-limit { opacity: .66; }
.stock-limit-label { background: #746f68; }
.customize-route { width: fit-content; margin-top: 7px; }

.pos-menu-grid[data-view="list"] { grid-template-columns: 1fr; gap: 8px; }
.pos-menu-grid[data-view="list"] .menu-card {
  min-height: 100px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.pos-menu-grid[data-view="list"] .menu-card-main { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; }
.pos-menu-grid[data-view="list"] .menu-visual { width: 72px; height: 72px; }
.pos-menu-grid[data-view="list"] .menu-card-name { margin-top: 0; font-size: 13px; }
.pos-menu-grid[data-view="list"] .menu-card-meta { margin-top: 7px; }
.pos-menu-grid[data-view="list"] .menu-price { min-width: 108px; margin: 0; display: grid; justify-items: end; gap: 7px; }
.pos-menu-grid[data-view="list"] .menu-count { top: 6px; left: 56px; right: auto; }

.cart-route { width: fit-content; margin-top: 4px; }
.cart-stock-warning { margin-top: 6px !important; padding: 6px 7px; border-radius: 7px; background: #fff1dd; color: #9a5b0f !important; font-size: 10px !important; font-weight: 800; line-height: 1.4; }
.cart-stock-warning i { margin-right: 4px; }
.cart-route-summary { padding: 9px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; border-radius: 10px; background: #f5f8f6; }
.cart-route-summary span { min-height: 30px; display: grid; place-items: center; border-radius: 8px; background: #fff; color: var(--brand); font-size: 10px; font-weight: 800; }
.qty-btn[disabled] { opacity: .4; cursor: not-allowed; }

@media (max-width: 1500px) and (min-width: 1301px) {
  .pos-workspace { grid-template-columns: 220px minmax(0, 1fr) 335px; gap: 12px; }
  .pos-menu-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .pos-menu-grid .menu-card { min-height: 210px; }
}

@media (max-width: 1300px) and (min-width: 1101px) {
  .pos-workspace { grid-template-columns: minmax(0, 1fr) 340px; }
  .pos-client-rail { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: auto minmax(170px, .7fr) minmax(0, 1.5fr) minmax(170px, .7fr); align-items: stretch; }
  .client-rail-head { border-right: 1px solid var(--line); border-bottom: 0; }
  .client-rail-profile { border-right: 1px solid var(--line); border-bottom: 0; }
  .client-detail-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
  .client-detail-list > div { padding: 8px; border: 0; }
  .client-route-summary { align-self: center; }
  .client-rail-hint { display: none; }
}

@media (max-width: 1100px) {
  .pos-client-rail { margin-bottom: 12px; position: static; }
  .client-detail-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
  .client-route-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-menu-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

@media (max-width: 700px) {
  .client-detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-menu-tools { width: 100%; min-width: 0; justify-content: stretch; }
  .pos-menu-tools .toolbar-search { min-width: 0; }
  .menu-view-button span { display: none; }
  .menu-view-button { width: 36px; padding: 0; }
  .pos-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-menu-grid .menu-card { min-height: 205px; }
  .menu-quick-add span { display: none; }
  .menu-quick-add { width: 34px; padding: 0; justify-content: center; }
  .menu-card-meta { display: grid; }
  .menu-route, .menu-stock { width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 430px) {
  .client-detail-list { grid-template-columns: 1fr 1fr; padding-inline: 12px; }
  .client-detail-list > div:nth-child(2) { grid-column: span 2; }
  .pos-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-menu-grid .menu-card { min-height: 198px; padding: 8px; }
  .pos-menu-grid .menu-visual { height: 72px; }
  .menu-card-name { font-size: 11px; }
  .menu-card-description { font-size: 10px; }
  .menu-route, .menu-stock { min-height: 23px; padding-inline: 6px; font-size: 10px; }
  .pos-menu-grid[data-view="list"] .menu-card { min-height: 92px; padding: 9px; }
  .pos-menu-grid[data-view="list"] .menu-card-main { grid-template-columns: 58px minmax(0, 1fr); gap: 9px; }
  .pos-menu-grid[data-view="list"] .menu-visual { width: 58px; height: 58px; }
  .pos-menu-grid[data-view="list"] .menu-price { min-width: 78px; }
}

@media (max-width: 350px) {
  .pos-menu-grid { grid-template-columns: 1fr; }
}