*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #1a1a2e;
  --surface: #16213e;
  --card:    #0f3460;
  --accent:  #e94560;
  --text:    #eaeaea;
  --muted:   #8892a4;
  --new:     #e94560;
  --cooking: #f5a623;
  --ready:   #27ae60;
  --served:  #4a4a6a;
  --radius:  12px;
}

html, body {
  height: 100%; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ── PIN ── */
.pin-screen {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:32px; padding:24px;
}
.pin-logo { font-size:28px; font-weight:700; letter-spacing:2px; color:var(--accent); }
.pin-dots { display:flex; gap:16px; }
.pin-dot {
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--muted); background:transparent; transition:background .15s;
}
.pin-dot.filled { background:var(--accent); border-color:var(--accent); }
.pin-error { color:var(--accent); font-size:14px; min-height:20px; }
.pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:300px; }
.pin-btn {
  background:var(--surface); border:none; border-radius:var(--radius);
  color:var(--text); font-size:26px; font-weight:500;
  padding:20px 0; cursor:pointer; transition:background .1s, transform .1s;
  -webkit-user-select:none;
}
.pin-btn:active { background:var(--card); transform:scale(.95); }
.pin-btn.del    { font-size:20px; color:var(--muted); }
.pin-btn.empty  { visibility:hidden; }

/* ── Workshop select ── */
.ws-screen {
  flex:1; display:flex; flex-direction:column;
  align-items:center; padding:40px 20px; gap:24px;
}
.ws-title { font-size:22px; font-weight:600; }
.ws-grid  { display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; max-width:400px; }
.ws-btn {
  background:var(--card); border:none; border-radius:var(--radius);
  color:var(--text); font-size:18px; font-weight:500;
  padding:28px 16px; cursor:pointer; transition:background .1s, transform .1s;
  -webkit-user-select:none;
}
.ws-btn:active { background:var(--surface); transform:scale(.97); }

/* ── Orders ── */
.orders-screen { flex:1; display:flex; flex-direction:column; min-height:0; }
.orders-header {
  background:var(--surface); padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.07); gap:8px; flex-shrink:0;
}
.orders-header h1 { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.orders-header-right { display:flex; align-items:center; gap:5px; flex-shrink:0; }

.hdr-btn {
  background:rgba(255,255,255,.08); border:none; border-radius:6px;
  color:var(--muted); font-size:12px; font-weight:500;
  padding:5px 9px; cursor:pointer; white-space:nowrap; -webkit-user-select:none;
}
.hdr-btn:active { background:var(--card); color:var(--text); }
.logout-btn { background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer; padding:4px 6px; }
.ws-indicator { display:flex; align-items:center; }
.ws-dot { width:8px; height:8px; border-radius:50%; background:var(--ready); display:inline-block; }
.ws-dot.offline { background:var(--accent); }

/* Кнопка вибору теми */
.theme-toggle-btn {
  width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.25);
  cursor:pointer; flex-shrink:0; transition:transform .15s;
}
.theme-toggle-btn:active { transform:scale(.85); }

/* Панель вибору теми */
.theme-picker {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--surface); border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0; flex-wrap:wrap;
}
.theme-swatch {
  width:34px; height:34px; border-radius:50%;
  border:3px solid transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .1s; flex-shrink:0;
}
.theme-swatch:active  { transform:scale(.88); }
.theme-swatch.active  { border-color:var(--text) !important; }
.theme-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; }

/* ── Error banner ── */
.error-banner {
  background:rgba(245,166,35,.15); color:var(--cooking);
  font-size:12px; text-align:center; padding:6px 12px;
  border-bottom:1px solid rgba(245,166,35,.3); flex-shrink:0;
}

/* ── Waiter tabs ── */
.orders-tabs {
  display:flex; background:var(--surface);
  border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0;
}
.tab-btn {
  flex:1; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--muted); font-size:13px; font-weight:500;
  padding:9px 0; cursor:pointer; transition:color .15s, border-color .15s;
  -webkit-user-select:none;
}
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── Orders list ── */
.orders-list {
  flex:1; overflow-y:auto; padding:10px;
  display:flex; flex-direction:column; gap:10px;
}
.empty-state {
  flex:1; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:18px; padding:40px 0;
}

/* ── Order card ── */
.order-card {
  background:var(--surface); border-radius:var(--radius); overflow:hidden;
  border-left:4px solid var(--card); flex-shrink:0;
}
.order-card.has-new   { border-left-color:var(--new); }
.order-card.all-ready { border-left-color:var(--ready); }

.order-card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; background:rgba(255,255,255,.04); gap:8px;
}
.order-table { font-weight:700; font-size:14px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-hdr-right { display:flex; align-items:center; gap:7px; flex-shrink:0; }

/* Timer */
.order-timer { font-size:12px; font-weight:700; }
.timer-ok   { color:var(--ready); }
.timer-warn { color:var(--cooking); }
.timer-late { color:var(--new); animation:pulse 1.5s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.order-time { font-size:11px; color:var(--muted); }

/* Bulk button */
.bulk-btn {
  background:rgba(255,255,255,.12); border:none; border-radius:6px;
  color:var(--text); font-size:11px; font-weight:600;
  padding:5px 9px; cursor:pointer; white-space:nowrap; -webkit-user-select:none;
}
.bulk-btn:active { opacity:.7; }

/* Dish view */
.dish-qty-badge {
  background:var(--card); border-radius:8px;
  padding:3px 10px; font-size:15px; font-weight:700;
}
.status-done { color:var(--ready); font-size:16px; font-weight:700; padding:4px 8px; }

/* ── Order items ── */
.order-items { padding:4px 0; }
.order-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; gap:10px;
}
.order-item + .order-item { border-top:1px solid rgba(255,255,255,.04); }
.item-info { flex:1; min-width:0; }
.item-name { font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-qty  { font-size:13px; color:var(--muted); margin-top:2px; }

/* Workshop badge on item (waiter view) */
.ws-badge {
  display:inline-block; font-size:10px; font-weight:600; border-radius:4px;
  padding:1px 5px; margin-left:6px; vertical-align:middle;
  background:rgba(255,255,255,.1); color:var(--muted);
}
.ws-1  { color:#69c0ff; background:rgba(105,192,255,.15); }
.ws-2  { color:#95de64; background:rgba(149,222,100,.15); }
.ws-3  { color:#ffa940; background:rgba(255,169,64,.15); }
.ws-4  { color:#ff85c2; background:rgba(255,133,194,.15); }
.ws-5  { color:#ffd666; background:rgba(255,214,102,.15); }
.ws-10 { color:#b37feb; background:rgba(179,127,235,.15); }

/* Qty flash */
.qty-val { display:inline-block; font-weight:700; color:var(--text); }
@keyframes qty-flash {
  0%  { transform:scale(1);   color:var(--text); }
  35% { transform:scale(1.6); color:var(--cooking); }
  100%{ transform:scale(1);   color:var(--text); }
}
.qty-flash { animation:qty-flash .7s ease; }

/* Status buttons */
.status-btn {
  border:none; border-radius:8px; padding:7px 13px;
  font-size:12px; font-weight:600; cursor:pointer;
  white-space:nowrap; transition:opacity .1s, transform .1s;
  -webkit-user-select:none; min-width:82px; text-align:center;
}
.status-btn:active { opacity:.7; transform:scale(.95); }
.status-btn.new     { background:var(--new);     color:#fff; }
.status-btn.cooking { background:var(--cooking); color:#1a1a2e; }
.status-btn.ready   { background:var(--ready);   color:#fff; }
.status-btn.served  { background:var(--served);  color:var(--muted); }
.status-tag {
  border-radius:8px; padding:6px 11px; font-size:12px; font-weight:600;
  display:inline-block; background:var(--served); color:var(--muted);
}

/* ── Waiter: table cards overview ── */
.waiter-card {
  background: var(--surface); border-radius: var(--radius);
  border-left: 4px solid var(--card); padding: 14px 16px;
  cursor: pointer; transition: background .1s, transform .1s;
  display: flex; flex-direction: column; gap: 10px;
}
.waiter-card:active   { background: var(--card); transform: scale(.985); }
.waiter-card.wc-has-new  { border-left-color: var(--new); }
.waiter-card.wc-all-ready { border-left-color: var(--ready); }

.wc-header { display: flex; justify-content: space-between; align-items: center; }
.wc-table  { font-size: 18px; font-weight: 700; }
.wc-timer  { font-size: 14px; font-weight: 700; }

.wc-pills  { display: flex; gap: 8px; flex-wrap: wrap; }
.wc-pill   { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.wc-new     { background: rgba(233,69,96,.2);  color: var(--new); }
.wc-cooking { background: rgba(245,166,35,.2); color: var(--cooking); }
.wc-ready   { background: rgba(39,174,96,.2);  color: var(--ready); }

.wc-bar-wrap { display: flex; align-items: center; gap: 8px; }
.wc-bar-wrap > div:first-child { /* progress track */
  flex: 1; height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden;
}
.wc-bar    { height: 100%; background: var(--ready); border-radius: 3px; transition: width .4s; }
.wc-bar-label { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Tile mode for waiter cards */
.tile-mode .waiter-card { padding: 10px 12px; gap: 7px; }
.tile-mode .wc-table    { font-size: 14px; }
.tile-mode .wc-pill     { font-size: 11px; padding: 3px 7px; }

/* ── Waiter: table detail ── */
.wtabs-bar {
  display: flex; overflow-x: auto; background: var(--surface);
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0; -webkit-overflow-scrolling: touch;
}
.wtab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 10px 14px; white-space: nowrap; cursor: pointer;
  transition: color .15s, border-color .15s; -webkit-user-select: none;
}
.wtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.wtab-add   { color: var(--ready); }

/* Guest number badge on each item */
.wt-gbadge {
  width: 36px; height: 36px; border-radius: 50%; border: none; flex-shrink: 0;
  font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s; -webkit-user-select: none;
}
.wt-gbadge:active { transform: scale(.85); }
.wt-gbadge.g0 { background: rgba(255,255,255,.08); color: var(--muted); }
.wt-gbadge.g1 { background: rgba(233,69,96,.25);  color: #ff8fa3; }
.wt-gbadge.g2 { background: rgba(91,141,238,.25); color: #90b4ff; }
.wt-gbadge.g3 { background: rgba(39,174,96,.25);  color: #6fcf97; }
.wt-gbadge.g4 { background: rgba(245,166,35,.25); color: #f5c76a; }
.wt-gbadge.g5 { background: rgba(168,85,247,.25); color: #d4a0ff; }
.wt-gbadge.g6 { background: rgba(255,100,100,.25);color: #ffaa88; }

.wt-item {
  display: flex; align-items: center; padding: 10px 12px; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.wt-item-left { flex-shrink: 0; }
.wt-item-info { flex: 1; min-width: 0; }
.wt-item-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-item-qty  { font-size: 12px; color: var(--muted); margin-top: 2px; }

.wt-served-divider {
  text-align: center; font-size: 11px; color: var(--muted);
  padding: 8px 0; text-transform: uppercase; letter-spacing: 1px;
}

/* Bulk serve button bar */
.wt-bulk-bar {
  padding: 10px 12px; background: rgba(39,174,96,.1);
  border-bottom: 1px solid rgba(39,174,96,.2); flex-shrink: 0;
}
.wt-bulk-btn {
  width: 100%; background: var(--ready); border: none; border-radius: var(--radius);
  color: #fff; font-size: 15px; font-weight: 700;
  padding: 12px; cursor: pointer; -webkit-user-select: none;
}
.wt-bulk-btn:active { opacity: .8; }

/* ── Tile mode: 2 columns ── */
.orders-list.tile-mode {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}
/* Empty state розтягується на обидва стовпці */
.tile-mode .empty-state { grid-column: 1 / -1; }

/* Компактніший хедер картки */
.tile-mode .order-card-header  { padding: 6px 8px; gap: 4px; }
.tile-mode .order-table        { font-size: 12px; }
.tile-mode .order-timer        { font-size: 11px; }
.tile-mode .order-time         { display: none; }   /* час прибрати — є таймер */
.tile-mode .card-hdr-right     { gap: 4px; }

/* Компактніші позиції */
.tile-mode .order-item         { padding: 6px 8px; gap: 6px; flex-wrap: wrap; }
.tile-mode .item-name          { font-size: 12px; white-space: normal; }
.tile-mode .item-qty           { font-size: 11px; margin-top: 1px; }

/* Компактніші кнопки статусу */
.tile-mode .status-btn         { min-width: 64px; padding: 6px 8px; font-size: 11px; }
.tile-mode .bulk-btn           { font-size: 10px; padding: 4px 7px; }

/* Dish cards у плитці */
.tile-mode .dish-card-top      { padding: 8px 10px 3px; }
.tile-mode .dish-card-name     { font-size: 13px; }
.tile-mode .dish-card-qty      { font-size: 24px; }
.tile-mode .dish-card-meta     { padding: 2px 10px 6px; gap: 4px; }
.tile-mode .dish-tbl-badge     { font-size: 10px; padding: 1px 5px; }
.tile-mode .dish-badges        { gap: 5px; }
.tile-mode .dish-st-badge      { font-size: 11px; }
.tile-mode .dish-card-action   { padding: 0 10px 8px; }
.tile-mode .dish-bulk-btn      { font-size: 12px; padding: 9px; }

/* ── Dish cards (cook aggregated view) ── */
.dish-card {
  background: var(--surface); border-radius: var(--radius);
  border-left: 4px solid var(--card); overflow: hidden; flex-shrink: 0;
  position: relative;
}
.dish-card.has-new { border-left-color: var(--new); }

.dish-card-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 6px; gap: 12px;
}
.dish-card-name {
  font-size: 17px; font-weight: 700; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dish-card-qty {
  font-size: 28px; font-weight: 800; color: var(--accent);
  flex-shrink: 0; line-height: 1;
}

.dish-card-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; padding: 4px 14px 10px;
}
.dish-tbl-list { display: flex; flex-wrap: wrap; gap: 5px; }
.dish-tbl-badge {
  background: rgba(255,255,255,.08); border-radius: 5px;
  font-size: 11px; color: var(--muted); padding: 2px 7px;
}
.dish-tbl-more { font-size: 11px; color: var(--muted); }

.dish-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.dish-st-badge { font-size: 12px; font-weight: 600; }
.ds-new     { color: var(--new); }
.ds-cooking { color: var(--cooking); }

.dish-card-action {
  padding: 0 14px 12px;
}
.dish-bulk-btn {
  width: 100%; background: var(--card); border: none; border-radius: 8px;
  color: var(--text); font-size: 14px; font-weight: 700;
  padding: 12px; cursor: pointer; -webkit-user-select: none;
  transition: background .1s, transform .1s;
}
.dish-card.has-new .dish-bulk-btn { background: rgba(233,69,96,.25); color: var(--new); }
.dish-bulk-btn:active { transform: scale(.97); opacity: .8; }

/* Анімація +N при збільшенні кількості під час приготування */
@keyframes plus-n-fly {
  0%   { opacity: 1; transform: translateY(0)   scale(1);   }
  40%  { opacity: 1; transform: translateY(-14px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-30px) scale(0.8); }
}
.plus-n-badge {
  position: absolute; top: 10px; right: 14px; z-index: 10;
  background: var(--new); color: #fff;
  border-radius: 14px; padding: 5px 12px;
  font-size: 18px; font-weight: 900; letter-spacing: 1px;
  pointer-events: none;
  animation: plus-n-fly 2.2s ease forwards;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* Спалах всієї dish-картки при +N */
@keyframes dish-flash-anim {
  0%   { box-shadow: none;                             border-left-color: var(--card); }
  15%  { box-shadow: 0 0 0 4px rgba(233,69,96,.6);   border-left-color: var(--new); }
  50%  { box-shadow: 0 0 0 2px rgba(233,69,96,.3);   border-left-color: var(--new); }
  100% { box-shadow: none;                             border-left-color: var(--new); }
}
.dish-qty-flash { animation: dish-flash-anim 1.4s ease; }

/* ── FABs ── */
.pos-fab {
  position:fixed; bottom:24px; right:20px; z-index:100;
  width:56px; height:56px; border-radius:50%;
  background:var(--accent); border:none; color:#fff;
  font-size:28px; font-weight:300; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(233,69,96,.5);
  -webkit-user-select:none;
}
.pos-fab:active { transform:scale(.93); }

.undo-fab {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:100;
  background:var(--card); border:1px solid rgba(255,255,255,.15); border-radius:24px;
  color:var(--text); font-size:13px; font-weight:600;
  padding:10px 22px; cursor:pointer;
  align-items:center; gap:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  -webkit-user-select:none;
}
.undo-fab:active { opacity:.7; }

/* ── Stats ── */
.stat-section { background:var(--surface); border-radius:var(--radius); overflow:hidden; }
.stat-title   { font-size:10px; font-weight:700; color:var(--muted); padding:10px 14px 6px; text-transform:uppercase; letter-spacing:1px; }
.stat-row     { display:flex; justify-content:space-between; align-items:center; padding:9px 14px; font-size:13px; }
.stat-row + .stat-row { border-top:1px solid rgba(255,255,255,.04); }
.stat-val { font-weight:700; white-space:nowrap; margin-left:8px; }
.stat-empty { padding:12px 14px; color:var(--muted); font-size:13px; }

/* Peak hours bar */
.hour-bar-wrap { flex:1; margin:0 10px; height:6px; background:rgba(255,255,255,.08); border-radius:3px; }
.hour-bar { height:100%; background:var(--accent); border-radius:3px; transition:width .3s; }

/* ── Admin ── */
.admin-user-row {
  display:flex; align-items:center; padding:10px 14px; gap:10px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.admin-user-info { flex:1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.admin-user-name { font-weight:600; font-size:14px; }
.admin-user-role { font-size:11px; color:var(--muted); background:rgba(255,255,255,.08); border-radius:4px; padding:2px 6px; }
.admin-user-pin  { font-size:12px; color:var(--muted); font-family:monospace; }
.admin-del-btn   { background:none; border:none; color:var(--accent); font-size:18px; cursor:pointer; padding:4px 8px; }

.admin-field { margin-bottom:20px; }
.admin-field label { display:block; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.admin-input {
  width:100%; background:var(--card); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; color:var(--text); font-size:16px; padding:12px 14px;
  outline:none;
}
.admin-input:focus { border-color:var(--accent); }

/* ── Admin: employees ── */
.emp-row {
  display:flex; align-items:center; gap:8px; padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.04); flex-wrap:wrap;
}
.emp-info { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.emp-name { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.emp-controls { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.emp-role-sel {
  background:var(--card); border:1px solid rgba(255,255,255,.1); border-radius:6px;
  color:var(--text); font-size:11px; padding:4px 6px; outline:none;
}
.emp-pin-input {
  width:60px; background:var(--card); border:1px solid rgba(255,255,255,.1);
  border-radius:6px; color:var(--text); font-size:13px; padding:6px 8px; text-align:center;
  font-family:monospace; outline:none;
}
.emp-pin-input:focus { border-color:var(--accent); }
.emp-toggle-btn {
  width:30px; height:30px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.08); color:var(--muted); font-size:14px;
  display:flex; align-items:center; justify-content:center;
}

/* ── Admin: employee stats ── */
.emp-stat-row     { flex-wrap:wrap; align-items:flex-start; gap:6px; }
.emp-stat-name    { font-weight:600; font-size:13px; flex:1; min-width:120px; }
.emp-stat-nums    { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.emp-stat-ontime  { color:var(--ready); font-size:12px; font-weight:600; }
.emp-stat-late    { color:var(--new);   font-size:12px; font-weight:600; }
.emp-late-name    { font-weight:600; font-size:12px; color:var(--muted); min-width:100px; }

/* ── Admin table editor ── */
.table-edit-row {
  display:flex; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.table-id-badge {
  background:var(--card); border-radius:6px; padding:4px 9px;
  font-size:12px; color:var(--muted); font-family:monospace; flex-shrink:0; min-width:40px; text-align:center;
}
.table-name-input {
  flex:1; background:var(--card); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; color:var(--text); font-size:14px; padding:8px 10px; outline:none;
}
.table-name-input:focus { border-color:var(--accent); }
.table-save-btn {
  width:36px; height:36px; border-radius:50%; border:none; flex-shrink:0;
  background:rgba(255,255,255,.1); color:var(--muted); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.table-save-btn.changed { background:var(--ready); color:#fff; }
.table-save-btn:active   { opacity:.7; }

.role-toggle { display:flex; gap:8px; }
.role-btn {
  flex:1; background:var(--card); border:2px solid transparent;
  border-radius:8px; color:var(--muted); font-size:14px; font-weight:500;
  padding:10px; cursor:pointer; transition:all .15s; -webkit-user-select:none;
}
.role-btn.active { background:rgba(233,69,96,.15); border-color:var(--accent); color:var(--accent); }

/* ── POS: shell ── */
.pos-screen {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  height: 100%; max-height: 100vh;
}

/* Topbar */
.pos-topbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0;
}
.pos-back-btn {
  background: rgba(255,255,255,.08); border: none; border-radius: 8px;
  color: var(--text); font-size: 18px; width: 38px; height: 38px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pos-back-btn:active { background: var(--card); }
.pos-tbl-label { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pos-tbl-caption { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.pos-tbl-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-cart-hdr-btn {
  background: var(--accent); border: none; border-radius: 8px;
  color: #fff; font-size: 13px; font-weight: 700;
  padding: 7px 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}

/* Search */
.pos-search-row {
  padding: 8px 10px; background: var(--bg); flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pos-search-input {
  width: 100%; background: var(--surface); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; color: var(--text); font-size: 15px;
  padding: 9px 14px; outline: none;
}
.pos-search-input:focus { border-color: var(--accent); }

/* Body: split view */
.pos-body {
  flex: 1; display: flex; overflow: hidden; min-height: 0;
}

/* Left: categories */
.pos-cats {
  width: 105px; overflow-y: auto; flex-shrink: 0;
  background: var(--surface); border-right: 1px solid rgba(255,255,255,.06);
  -webkit-overflow-scrolling: touch;
}
.pos-cat-btn {
  width: 100%; background: none; border: none; border-right: 3px solid transparent;
  color: var(--muted); font-size: 11px; text-align: center;
  padding: 12px 6px; cursor: pointer; line-height: 1.3;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: background .1s, color .1s; -webkit-user-select: none;
}
.pos-cat-btn:active      { background: rgba(255,255,255,.05); }
.pos-cat-btn.active      { color: var(--text); border-right-color: var(--cc, var(--accent)); background: rgba(255,255,255,.04); }
.pos-cat-btn.pos-cat-match { color: var(--cooking); }
.pos-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pos-cat-label { word-break: break-word; }

/* Right: items grid */
.pos-items-wrap { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pos-items-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; padding: 8px;
  align-content: start;
}
.pos-no-items { padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }

/* Item tile */
.pos-tile {
  position: relative; background: var(--surface); border-radius: 10px;
  padding: 10px 10px 8px; cursor: pointer; min-height: 76px;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 2px solid transparent;
  transition: transform .1s, background .1s;
  -webkit-user-select: none;
}
.pos-tile:active        { transform: scale(.93); background: var(--card); }
.pos-tile.pos-tile-active { border-color: var(--accent); }

.pos-tile-qty {
  position: absolute; top: 5px; right: 5px;
  background: var(--accent); color: #fff;
  border-radius: 10px; font-size: 11px; font-weight: 800;
  padding: 1px 7px; min-width: 22px; text-align: center;
  cursor: pointer; z-index: 2;
}
.pos-tile-qty:active { opacity: .7; }
.pos-tile-name {
  font-size: 12px; font-weight: 500; line-height: 1.35;
  color: var(--text); padding-right: 24px; /* не перекриватись бейджем */
}
.pos-tile-price { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 4px; }
.pos-tile.pos-tile-active .pos-tile-price { color: var(--accent); }

/* Bottom cart bar */
.pos-cart-bar {
  background: var(--ready); padding: 14px 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; -webkit-user-select: none;
}
.pos-cart-bar:active { opacity: .85; }
.pos-cb-info  { font-size: 15px; font-weight: 700; color: #fff; }
.pos-cb-arrow { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.85); }

/* ── POS: Table selection ── */
.pos-spot-section { margin-bottom:16px; }
.pos-spot-name    { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; padding:0 2px; }
.pos-table-grid   { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:10px; }
.pos-table-btn {
  background:var(--surface); border:2px solid rgba(255,255,255,.08); border-radius:var(--radius);
  color:var(--text); font-size:15px; font-weight:500;
  padding:20px 12px; cursor:pointer; text-align:center;
  transition:background .1s, transform .1s; -webkit-user-select:none;
}
.pos-table-btn:active { background:var(--card); transform:scale(.96); }

/* ── POS: Menu ── */
.pos-menu-screen { padding-bottom:70px; }
.cat-tabs-wrap {
  background:var(--surface); border-bottom:1px solid rgba(255,255,255,.07);
  overflow-x:auto; flex-shrink:0; -webkit-overflow-scrolling:touch;
}
.cat-tabs { display:flex; padding:0 8px; min-width:max-content; }
.cat-tab {
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--muted); font-size:13px; font-weight:500;
  padding:10px 12px; cursor:pointer; white-space:nowrap;
  transition:color .15s, border-color .15s; -webkit-user-select:none;
}
.cat-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

.product-list { padding-bottom:80px !important; }
.product-item {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface); border-radius:10px; padding:12px 14px; gap:10px;
}
.product-info { flex:1; min-width:0; }
.product-name  { font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-price { font-size:12px; color:var(--muted); margin-top:2px; }
.product-controls { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.product-qty { font-size:16px; font-weight:700; min-width:22px; text-align:center; }

.qty-ctrl {
  width:34px; height:34px; border-radius:50%; border:none; font-size:20px; font-weight:400;
  display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-user-select:none;
  transition:transform .1s;
}
.qty-ctrl:active { transform:scale(.88); }
.qty-ctrl.plus  { background:var(--accent); color:#fff; }
.qty-ctrl.minus { background:rgba(255,255,255,.12); color:var(--text); }

/* Cart FAB */
.cart-fab {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:100;
  background:var(--accent); border:none; border-radius:24px;
  color:#fff; font-size:14px; font-weight:600;
  padding:13px 28px; cursor:pointer; white-space:nowrap;
  box-shadow:0 4px 20px rgba(233,69,96,.5); -webkit-user-select:none;
}
.cart-fab:active { transform:translateX(-50%) scale(.96); }

/* ── POS: Cart ── */
.cart-qty-ctrl { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.cart-submit-bar {
  position:sticky; bottom:0;
  background:var(--surface); border-top:1px solid rgba(255,255,255,.07);
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.cart-total { font-size:16px; font-weight:700; color:var(--ready); }
.cart-submit-btn {
  flex:1; background:var(--ready); border:none; border-radius:var(--radius);
  color:#fff; font-size:15px; font-weight:700;
  padding:14px; cursor:pointer; -webkit-user-select:none;
  transition:opacity .15s;
}
.cart-submit-btn:disabled { opacity:.5; }
.cart-submit-btn:active:not(:disabled) { opacity:.8; }