:root {
  --bg: #070b14;
  --panel: #121a2b;
  --panel-2: #182235;
  --text: #f8fafc;
  --muted: #94a3b8;
  --line: #243049;
  --kds-text-scale: 1;

  --time-green: #22c55e;
  --time-yellow: #facc15;
  --time-red: #ef4444;

  --stage-new: #38bdf8;
  --stage-accepted: #c084fc;
  --stage-preparing: #fb923c;
  --stage-ready: #4ade80;
  --stage-out: #60a5fa;
  --stage-served: #94a3b8;
  --stage-paid: #e2e8f0;

  --c-table: #ffffff;
  --c-table-bg: #0f172a;
  --c-order: #22d3ee;
  --c-qty: #f472b6;
  --c-qty-bg: rgba(244, 114, 182, 0.18);
  --c-item: #f1f5f9;
  --c-note: #fde68a;
  --c-note-bg: rgba(253, 230, 138, 0.12);
  --c-guest: #fdba74;
  --c-guest-bg: rgba(251, 146, 60, 0.15);
}

* { box-sizing: border-box; }
html {
  margin: 0;
  height: 100%;
  font-size: calc(15px * var(--kds-text-scale, 1));
}
body {
  margin: 0;
  height: 100%;
}
body.kds-app {
  font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  font-size: 1rem;
  background:
    radial-gradient(900px 480px at 0% -10%, #12304a 0%, transparent 55%),
    radial-gradient(800px 420px at 100% 0%, #2a1848 0%, transparent 50%),
    var(--bg);
  color: var(--text);
  overflow: hidden;
}

.kds-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(7, 11, 20, 0.95);
  border-bottom: 2px solid var(--line);
}
.kds-brand {
  letter-spacing: 0.1em;
  color: var(--stage-new);
  margin-left: 10px;
}
.kds-branch { font-size: 1.3rem; font-weight: 900; }
.kds-top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kds-clock {
  font-variant-numeric: tabular-nums;
  color: var(--c-order);
  font-weight: 800;
  font-size: 1.05rem;
}
.kds-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 2px solid #334155;
  background: #1e293b;
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.kds-chip.is-muted { opacity: 0.55; border-color: #475569; }
.kds-chip.is-voice-on {
  border-color: var(--stage-new);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
}
.kds-chip.is-female {
  border-color: #f472b6;
  color: #fbcfe8;
}
.kds-chip.is-male {
  border-color: #60a5fa;
  color: #bfdbfe;
}
.kds-zoom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  border: 2px solid #334155;
  background: #1e293b;
}
.kds-zoom button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #0f172a;
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}
.kds-zoom button:active { transform: scale(0.94); }
.kds-zoom__val {
  min-width: 2.6em;
  text-align: center;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--c-order);
}

.kds-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  width: 100%;
  padding: 8px 14px 10px;
  background: rgba(7, 11, 20, 0.95);
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
  font-weight: 800;
}
.kds-legend__group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kds-legend__label { color: var(--muted); margin-left: 2px; }
.kds-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid currentColor;
  background: rgba(255, 255, 255, 0.04);
}
.kds-pill i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: currentColor;
}
.kds-pill.stage-new { color: var(--stage-new); }
.kds-pill.stage-accepted { color: var(--stage-accepted); }
.kds-pill.stage-preparing { color: var(--stage-preparing); }
.kds-pill.stage-ready { color: var(--stage-ready); }
.kds-pill.stage-served { color: var(--stage-out); }
.kds-pill.time-green { color: var(--time-green); }
.kds-pill.time-yellow { color: var(--time-yellow); }
.kds-pill.time-red { color: var(--time-red); }
.kds-pill.kind-table { color: var(--c-table); background: var(--c-table-bg); border-color: #475569; }
.kds-pill.kind-qty { color: var(--c-qty); }
.kds-pill.kind-note { color: var(--c-note); }

/* Board = flexible columns (width by order load) */
.kds-board {
  height: calc(100vh - 168px);
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.kds-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  min-width: 160px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.72);
  border: 3px solid var(--line);
  overflow: hidden;
  position: relative;
  /* flex: grow shrink basis — set from JS via style */
  flex: var(--col-grow, 1) 1 var(--col-basis, 200px);
  max-width: var(--col-max, none);
  container-type: inline-size;
  container-name: kdscol;
}
.kds-col.is-empty {
  flex: 0 0 auto;
  width: var(--col-empty-width, 132px);
  max-width: 150px;
  min-width: 120px;
}
.kds-col.is-fixed-width {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: var(--col-fixed, 280px);
  width: var(--col-fixed, 280px);
  max-width: none;
}
.kds-col.is-hidden-col {
  display: none !important;
}
.kds-col.is-dragging {
  opacity: 0.55;
  outline: 2px dashed var(--stage-new);
}
.kds-col.is-drop-target {
  outline: 2px solid var(--stage-ready);
}

.kds-col__head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 1rem;
  color: #061018;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.kds-col__head:active { cursor: grabbing; }
.kds-col__head-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.kds-col__drag {
  opacity: 0.7;
  font-size: 0.95rem;
  letter-spacing: -0.08em;
  flex: 0 0 auto;
}
.kds-col__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kds-col__count {
  min-width: 1.75em;
  height: 1.75em;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 0.92rem;
  flex: 0 0 auto;
}
.kds-col__hide {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  color: #061018;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}
.kds-col__hide:active { transform: scale(0.94); }

.kds-col__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-content: start;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.kds-col__body.has-cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
}
.kds-col__body > .kds-col-empty {
  grid-column: 1 / -1;
}

/* Wide columns: denser multi-card grid */
@container kdscol (min-width: 36rem) {
  .kds-col__body.has-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container kdscol (min-width: 56rem) {
  .kds-col__body.has-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kds-col__resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  width: 10px;
  cursor: col-resize;
  z-index: 5;
  touch-action: none;
}
.kds-col__resize::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 3px;
  width: 4px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.35);
}
.kds-col__resize:hover::after,
.kds-col__resize.is-active::after {
  background: var(--stage-new);
}

.kds-hidden-bar {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 8px;
  background: rgba(7, 11, 20, 0.95);
  border-bottom: 1px solid var(--line);
}
.kds-hidden-bar.is-on { display: flex; }
.kds-hidden-bar__label {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
}
.kds-hidden-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 2px solid currentColor;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
}
.kds-hidden-chip.status-new { color: var(--stage-new); }
.kds-hidden-chip.status-accepted { color: var(--stage-accepted); }
.kds-hidden-chip.status-preparing { color: var(--stage-preparing); }
.kds-hidden-chip.status-ready { color: var(--stage-ready); }
.kds-hidden-chip.status-served { color: var(--stage-out); }
.kds-hidden-chip__n {
  min-width: 1.4em;
  height: 1.4em;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: currentColor;
  color: #061018;
  font-size: 0.75rem;
  font-weight: 900;
}

.kds-col.status-new { border-color: var(--stage-new); }
.kds-col.status-new .kds-col__head { background: var(--stage-new); }
.kds-col.status-accepted { border-color: var(--stage-accepted); }
.kds-col.status-accepted .kds-col__head { background: var(--stage-accepted); }
.kds-col.status-preparing { border-color: var(--stage-preparing); }
.kds-col.status-preparing .kds-col__head { background: var(--stage-preparing); }
.kds-col.status-ready { border-color: var(--stage-ready); }
.kds-col.status-ready .kds-col__head { background: var(--stage-ready); }
.kds-col.status-served { border-color: var(--stage-out); }
.kds-col.status-served .kds-col__head { background: var(--stage-out); color: #061018; }

/*
  Card layout priority:
  1) head (table + timer + status) — always visible
  2) items scroll area
  3) bump button — always visible (sticky foot)
*/
.kds-card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-radius: 14px;
  padding: 10px;
  border: 2px solid #334155;
  border-right-width: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  max-height: min(68vh, 560px);
  overflow: hidden;
  touch-action: manipulation;
  position: relative;
}
.kds-card:active { transform: scale(0.99); }
.kds-card.is-new-flash { animation: kdsNewFlash 1.4s ease-out 2; }

.kds-card.status-new { border-right-color: var(--stage-new); }
.kds-card.status-accepted { border-right-color: var(--stage-accepted); }
.kds-card.status-preparing { border-right-color: var(--stage-preparing); }
.kds-card.status-ready { border-right-color: var(--stage-ready); }
.kds-card.status-out_to_hall,
.kds-card.status-served { border-right-color: var(--stage-out); }

.kds-card.urgency-green {
  box-shadow: inset 0 5px 0 0 var(--time-green), 0 8px 18px rgba(0, 0, 0, 0.3);
}
.kds-card.urgency-yellow {
  box-shadow: inset 0 5px 0 0 var(--time-yellow), 0 8px 18px rgba(0, 0, 0, 0.3);
}
.kds-card.urgency-red {
  box-shadow: inset 0 5px 0 0 var(--time-red), 0 0 0 2px rgba(239, 68, 68, 0.55), 0 8px 18px rgba(0, 0, 0, 0.3);
  animation: kdsLatePulse 1.15s ease-in-out infinite;
}

@keyframes kdsLatePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
@keyframes kdsNewFlash {
  0% { outline: 3px solid rgba(56, 189, 248, 0.9); }
  100% { outline: 3px solid transparent; }
}

.kds-card__head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}
.kds-table {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--c-table);
  background: var(--c-table-bg);
  border: 2px solid #475569;
  border-radius: 12px;
  padding: 8px 10px 6px;
  min-width: 4rem;
  text-align: center;
}
.kds-table span {
  font-size: 0.7rem;
  color: var(--muted);
  display: block;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.kds-glance {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  padding-top: 2px;
}
.kds-glance__summary {
  font-size: 0.78rem;
  font-weight: 900;
  color: #e2e8f0;
  letter-spacing: 0.01em;
}
.kds-glance__preview {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--c-item);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.kds-glance__more {
  color: var(--stage-new);
  font-weight: 900;
  white-space: nowrap;
}
.kds-glance .kds-stage-times {
  margin-top: 2px;
}
.kds-meta {
  text-align: left;
  display: grid;
  gap: 4px;
  justify-items: end;
  flex: 0 0 auto;
}
.kds-timer {
  font-size: 1.15rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  padding: 3px 10px;
  border-radius: 10px;
  border: 2px solid transparent;
}
.kds-timer.time-green {
  color: #052e16;
  background: var(--time-green);
  border-color: #16a34a;
}
.kds-timer.time-yellow {
  color: #422006;
  background: var(--time-yellow);
  border-color: #ca8a04;
}
.kds-timer.time-red {
  color: #450a0a;
  background: var(--time-red);
  border-color: #dc2626;
}
.kds-order-id {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--c-order);
}
.kds-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
  color: #061018;
}
.kds-status.status-new { background: var(--stage-new); }
.kds-status.status-accepted { background: var(--stage-accepted); }
.kds-status.status-preparing { background: var(--stage-preparing); }
.kds-status.status-ready { background: var(--stage-ready); }
.kds-status.status-out_to_hall,
.kds-status.status-served { background: var(--stage-out); }

.kds-stage-times {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.kds-stage-total,
.kds-stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  border: 2px solid transparent;
  line-height: 1.2;
}
.kds-stage-total em,
.kds-stage-chip em {
  font-style: normal;
  opacity: 0.85;
  font-weight: 800;
}
.kds-stage-total.time-green {
  color: #052e16;
  background: var(--time-green);
  border-color: #16a34a;
}
.kds-stage-total.time-yellow {
  color: #422006;
  background: var(--time-yellow);
  border-color: #ca8a04;
}
.kds-stage-total.time-red {
  color: #450a0a;
  background: var(--time-red);
  border-color: #dc2626;
}
.kds-stage-chip.status-new {
  color: #061018;
  background: var(--stage-new);
}
.kds-stage-chip.status-accepted {
  color: #061018;
  background: var(--stage-accepted);
}
.kds-stage-chip.status-preparing {
  color: #061018;
  background: var(--stage-preparing);
}
.kds-stage-chip.status-ready {
  color: #061018;
  background: var(--stage-ready);
}
.kds-stage-chip.is-active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
  animation: kdsStagePulse 1.2s ease-in-out infinite;
}
@keyframes kdsStagePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

/* Items scroll — foot/bump stays pinned at bottom of card */
.kds-card__scroll {
  flex: 1 1 auto;
  min-height: 40px;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  padding: 4px 6px;
  scrollbar-width: thin;
  scrollbar-color: #64748b transparent;
}
.kds-card__scroll::-webkit-scrollbar { width: 8px; }
.kds-card__scroll::-webkit-scrollbar-thumb {
  background: #64748b;
  border-radius: 8px;
}

.kds-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kds-items li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 6px;
  border-bottom: 1px dashed var(--line);
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-item);
  border-radius: 6px;
  line-height: 1.25;
  word-break: break-word;
}
.kds-items li:last-child { border-bottom: 0; }
.kds-items li:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.kds-items .qty {
  display: inline-flex;
  min-width: 1.6em;
  justify-content: center;
  align-items: center;
  order: -1;
  padding: 1px 6px;
  border-radius: 8px;
  color: var(--c-qty);
  background: var(--c-qty-bg);
  border: 1px solid rgba(244, 114, 182, 0.45);
  font-weight: 900;
  flex: 0 0 auto;
}
.kds-items .name {
  flex: 1 1 auto;
  min-width: 0;
}
.kds-items .note {
  display: block;
  width: 100%;
  font-size: 0.8rem;
  color: var(--c-note);
  background: var(--c-note-bg);
  border-right: 3px solid var(--c-note);
  padding: 4px 8px;
  margin-top: 2px;
  border-radius: 6px;
  font-weight: 700;
}
.kds-guest-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.92rem;
  color: var(--c-guest);
  background: var(--c-guest-bg);
  border: 2px solid rgba(251, 146, 60, 0.65);
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 800;
  flex: 0 0 auto;
  max-height: 5.2em;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kds-guest-note.is-prominent {
  box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.25);
}
.kds-guest-note__label {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #fdba74;
  text-transform: none;
}
.kds-guest-note__text {
  color: #ffedd5;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.kds-card__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(24, 34, 53, 0), var(--panel) 28%);
}
.kds-card__foot:not(:has(.kds-foot-mem)) {
  justify-content: flex-end;
}
.kds-bump {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  color: #061018;
  border: 2px solid rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.kds-foot-mem {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}
.kds-foot-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  border: 1px solid transparent;
  white-space: nowrap;
}
.kds-foot-chip.kind-qty {
  color: var(--c-qty);
  background: var(--c-qty-bg);
  border-color: rgba(244, 114, 182, 0.4);
}
.kds-foot-chip.kind-table {
  color: var(--c-table);
  background: var(--c-table-bg);
  border-color: #475569;
}
.kds-foot-chip.kind-note {
  color: var(--c-note);
  background: var(--c-note-bg);
  border-color: rgba(250, 204, 21, 0.45);
}
.kds-foot-chip.kind-order {
  color: var(--c-order);
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
}

.kds-bump:disabled { opacity: 0.35; }
.kds-bump.to-accepted { background: var(--stage-accepted); }
.kds-bump.to-preparing { background: var(--stage-preparing); }
.kds-bump.to-ready { background: var(--stage-ready); }
.kds-bump.to-served { background: var(--stage-out); }
.kds-bump.to-paid { background: var(--stage-paid); color: #0f172a; }

.kds-gear-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(2, 6, 23, 0.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 70px 16px 24px;
  overflow: auto;
}
.kds-gear-panel[hidden] { display: none !important; }
.kds-gear-panel__box {
  width: min(440px, 100%);
  background: #0f172a;
  border: 2px solid #334155;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.kds-gear-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.kds-gear-panel__head strong {
  font-size: 1.1rem;
  color: var(--stage-new);
}
.kds-gear-panel__hint {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
}
.kds-voice-wrap {
  position: relative;
  display: inline-flex;
}
.kds-voice-panel {
  position: fixed;
  z-index: 120;
  width: min(400px, calc(100vw - 24px));
  max-height: min(80vh, 640px);
  overflow: auto;
  padding: 12px;
  border-radius: 14px;
  border: 2px solid #334155;
  background: #0f172a;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}
.kds-voice-panel[hidden] { display: none !important; }
.kds-voice-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.kds-voice-panel__head strong {
  font-size: 1.05rem;
  color: var(--stage-ready);
}
.kds-voice-toggle {
  width: 100%;
  min-height: 44px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 2px solid #334155;
  background: #111827;
  color: var(--text);
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
}
.kds-voice-toggle.is-on {
  border-color: var(--stage-ready);
  background: rgba(74, 222, 128, 0.14);
  color: #bbf7d0;
}
.kds-voice-toggle.is-off {
  border-color: #64748b;
  opacity: 0.75;
}
.kds-voice-panel__label {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}
.kds-voice-panel__hint {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}
.kds-voice-genders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.kds-voice-rates {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 0 0 8px;
}
.kds-voice-rate {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.8);
  color: #e2e8f0;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
}
.kds-voice-rate.is-active {
  border-color: rgba(93, 212, 196, 0.75);
  background: rgba(93, 212, 196, 0.18);
  color: #5dd4c4;
}
.kds-voice-gender {
  min-height: 40px;
  border-radius: 10px;
  border: 2px solid #334155;
  background: #111827;
  color: var(--text);
  font-weight: 900;
  font-size: 0.88rem;
  cursor: pointer;
}
.kds-voice-gender.is-active {
  border-color: var(--c-order);
  background: rgba(34, 211, 238, 0.16);
  color: #a5f3fc;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.28);
}
.kds-voice-stage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.kds-voice-stage-tab {
  flex: 1 1 auto;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 2px solid #334155;
  background: #111827;
  color: var(--text);
  font-weight: 900;
  font-size: 0.78rem;
  cursor: pointer;
}
.kds-voice-stage-tab.is-active {
  border-color: var(--stage-new);
  background: rgba(56, 189, 248, 0.16);
  color: #e0f2fe;
}
.kds-voice-stage-tab[data-speech-stage="accepted"].is-active {
  border-color: var(--stage-accepted);
  background: rgba(192, 132, 252, 0.16);
}
.kds-voice-stage-tab[data-speech-stage="preparing"].is-active {
  border-color: var(--stage-preparing);
  background: rgba(251, 146, 60, 0.16);
}
.kds-voice-stage-tab[data-speech-stage="ready"].is-active {
  border-color: var(--stage-ready);
  background: rgba(74, 222, 128, 0.16);
}
.kds-voice-stage-tab[data-speech-stage="served"].is-active {
  border-color: var(--stage-out);
  background: rgba(96, 165, 250, 0.16);
}
.kds-gear-fields {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.kds-gear-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #334155;
  background: #111827;
  cursor: pointer;
  font-weight: 800;
  font-size: 0.95rem;
  user-select: none;
}
.kds-gear-field input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--stage-new);
  flex: 0 0 auto;
}
.kds-gear-field.is-off {
  opacity: 0.55;
}
.kds-gear-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Compact card when fewer head pieces */
.kds-card__head.is-solo {
  grid-template-columns: 1fr;
}
.kds-card__head.is-duo {
  grid-template-columns: auto minmax(0, 1fr);
}
.kds-card.is-compact {
  gap: 6px;
  padding: 8px;
}
.kds-card.is-compact .kds-card__foot {
  margin-top: 0;
}
.kds-col__body.has-cards.is-dense {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
}
@container kdscol (min-width: 36rem) {
  .kds-col__body.has-cards.is-dense {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container kdscol (min-width: 50rem) {
  .kds-col__body.has-cards.is-dense {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container kdscol (min-width: 68rem) {
  .kds-col__body.has-cards.is-dense {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kds-col-empty {
  color: var(--muted);
  text-align: center;
  padding: 28px 8px;
  font-size: 0.92rem;
}

.kds-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 50;
  background: var(--stage-new);
  color: #061018;
  font-weight: 900;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease;
  pointer-events: none;
}
.kds-toast.is-on { transform: translateX(-50%) translateY(0); }
.kds-toast.is-late { background: var(--time-red); color: #fff; }

.kds-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--text);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}
.kds-login-card {
  width: min(380px, 92vw);
  background: var(--panel);
  padding: 24px;
  border-radius: 18px;
  display: grid;
  gap: 12px;
  border: 2px solid #334155;
}
.kds-login-card input {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #475569;
  background: #0f1528;
  color: var(--text);
  font-size: 1rem;
}
.kds-login-card button {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--stage-new);
  color: #061018;
  font-weight: 900;
  font-size: 1.05rem;
  cursor: pointer;
}
.kds-error { color: #fca5a5; }

/* —— Tables map + item edit overlays —— */
.kds-table {
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.kds-table:hover,
.kds-table:focus-visible {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56,189,248,.35);
  transform: scale(1.03);
  outline: none;
}
.kds-items li {
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 6px;
  margin: 0 -6px;
  transition: background .12s ease;
}
.kds-items li:hover,
.kds-items li:focus-visible {
  background: rgba(56,189,248,.12);
  outline: none;
}
.kds-item-add {
  margin: 6px 0 0;
  width: 100%;
  min-height: 36px;
  border-radius: 10px;
  border: 1px dashed #475569;
  background: transparent;
  color: #93c5fd;
  font-weight: 800;
  cursor: pointer;
}
.kds-item-add:hover { border-color: #38bdf8; color: #e0f2fe; }
.kds-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(2,6,14,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.kds-overlay[hidden] { display: none !important; }
.kds-overlay__box {
  width: min(920px, 100%);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  background: #0b1220;
  border: 1px solid #334155;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  overflow: hidden;
}
.kds-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #1e293b;
  background: #111827;
}
.kds-overlay__head strong { font-size: 1.05rem; }
.kds-overlay__body {
  padding: 14px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.kds-overlay__foot {
  padding: 10px 14px;
  border-top: 1px solid #1e293b;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  background: #0f172a;
}
.kds-overlay__foot:empty { display: none; }
.kds-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 700;
}
.kds-map-legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: -1px;
}
.kds-map-legend .free i { background: #22c55e; }
.kds-map-legend .busy i { background: #ef4444; }
.kds-map-legend .cur i { background: #38bdf8; }
.kds-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}
.kds-tcell {
  min-height: 58px;
  border-radius: 12px;
  border: 2px solid #334155;
  background: #111827;
  color: #e2e8f0;
  font-weight: 900;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.kds-tcell small {
  font-size: .65rem;
  font-weight: 800;
  opacity: .85;
}
.kds-tcell.is-free { border-color: #166534; background: rgba(34,197,94,.14); color: #bbf7d0; }
.kds-tcell.is-busy { border-color: #7f1d1d; background: rgba(239,68,68,.16); color: #fecaca; cursor: not-allowed; opacity: .75; }
.kds-tcell.is-current { border-color: #0284c7; box-shadow: 0 0 0 2px rgba(56,189,248,.45); }
.kds-tcell.is-pickable:hover { transform: translateY(-1px); border-color: #38bdf8; }
.kds-field-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.kds-field-row label { font-size: .85rem; color: var(--muted); font-weight: 800; }
.kds-field-row input,
.kds-field-row select {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid #475569;
  background: #0f1528;
  color: var(--text);
  font-size: 1rem;
  padding: 8px 10px;
}
.kds-cat-list { display: flex; flex-direction: column; gap: 14px; }
.kds-cat-block h4 {
  margin: 0 0 8px;
  font-size: .95rem;
  color: #93c5fd;
}
.kds-pick-item {
  width: 100%;
  text-align: right;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  margin: 0 0 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: #111827;
  color: #e2e8f0;
  cursor: pointer;
  font-weight: 700;
}
.kds-pick-item:hover { border-color: #38bdf8; background: #0f1b33; }
.kds-pick-item em { color: #86efac; font-style: normal; font-weight: 900; }
.kds-warn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kds-warn-list li {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #334155;
  background: #111827;
}
.kds-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 0;
  font-weight: 900;
  cursor: pointer;
}
.kds-btn.primary { background: #38bdf8; color: #082f49; }
.kds-btn.danger { background: #ef4444; color: #fff; }
.kds-btn.ghost { background: #1e293b; color: #e2e8f0; }
.kds-btn:disabled { opacity: .5; cursor: not-allowed; }
button.kds-table {
  font: inherit;
  font-size: 2rem;
  font-weight: 900;
  appearance: none;
  -webkit-appearance: none;
}

.kds-chip--tables {
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: #bbf7d0;
  font-weight: 900;
}
.kds-chip--tables:hover {
  background: rgba(34, 197, 94, 0.28);
}
.kds-map-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.kds-map-tab {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: #111827;
  color: #cbd5e1;
  font-weight: 800;
  cursor: pointer;
}
.kds-map-tab.is-active {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #e0f2fe;
}