:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --text: #17202a;
  --muted: #687382;
  --line: #dfe5ec;
  --brand: #0f766e;
  --brand-dark: #115e59;
  --warn: #b45309;
  --danger: #b91c1c;
  --shadow: 0 16px 40px rgba(19, 31, 45, 0.08);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}
.pos-mode {
  --bg: #111316;
  --panel: #1a1d22;
  --text: #f7f4ec;
  --muted: #a9afbb;
  --line: rgba(255,255,255,.10);
  --brand: #d6a84f;
  --brand-dark: #f2c96b;
  --warn: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 22px 55px rgba(0, 0, 0, .28);
  background:
    radial-gradient(circle at 20% 0%, rgba(214, 168, 79, .14), transparent 32%),
    linear-gradient(135deg, #0d0f12 0%, #171a1f 52%, #0f1115 100%);
}
a { color: inherit; text-decoration: none; }
main { max-width: 1440px; margin: 0 auto; padding: 24px; }
.pos-mode main { max-width: none; padding: 18px; }
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.pos-mode .top {
  background: rgba(12, 14, 17, .92);
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: var(--text);
}
.top strong { display: block; font-size: 18px; }
.top span, .muted { color: var(--muted); }
.top nav { display: flex; gap: 8px; flex-wrap: wrap; }
.top a, button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 7px;
  padding: 10px 13px;
  font-weight: 700;
  cursor: pointer;
}
.pos-mode .top a,
.pos-mode button {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: var(--text);
}
button.primary, button:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.pos-mode button.primary,
.pos-mode button:hover {
  background: linear-gradient(135deg, #d6a84f, #9f7427);
  border-color: rgba(255,255,255,.16);
  color: #15120b;
}
.grid { display: grid; gap: 18px; margin-bottom: 18px; }
.two { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); }
.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel, .metrics article, .login-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.panel { padding: 18px; overflow: hidden; }
.pos-mode .panel,
.pos-mode .metrics article {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045));
  border-color: rgba(255,255,255,.11);
  color: var(--text);
  backdrop-filter: blur(16px);
}
h1, h2, h3 { margin: 0 0 14px; letter-spacing: 0; }
h2 { font-size: 20px; }
h3 { font-size: 15px; margin-top: 16px; }
label { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: #344150; }
input, select, textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 11px;
  font: inherit;
  background: #fff;
  color: var(--text);
}
select option,
select optgroup {
  background: #ffffff;
  color: #161426;
}
.pos-mode input,
.pos-mode select,
.pos-mode textarea {
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.13);
  color: var(--text);
}
.pos-mode select option,
.pos-mode select optgroup,
.terminal-mode select option,
.terminal-mode select optgroup {
  background: #ffffff;
  color: #161426;
}
.pos-mode input::placeholder,
.pos-mode textarea::placeholder { color: rgba(247,244,236,.58); }
textarea { resize: vertical; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metrics article { padding: 18px; }
.metrics span { color: var(--muted); font-weight: 700; font-size: 13px; }
.metrics b { display: block; margin-top: 8px; font-size: 24px; }
.toolbar { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 12px; }
.product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; max-height: 520px; overflow: auto; padding-right: 4px; }
.pos-touch {
  grid-template-columns: minmax(0, 1.65fr) minmax(420px, .75fr);
  min-height: calc(100vh - 118px);
  align-items: stretch;
}
.pos-touch .product-list {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  max-height: calc(100vh - 275px);
  gap: 12px;
}
.product-card {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
  cursor: pointer;
}
.pos-mode .product-card {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  border-color: rgba(255,255,255,.10);
  color: var(--text);
  min-height: 242px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.product-card img, .guest-product img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 7px;
  background: #e5e7eb;
  margin-bottom: 8px;
}
.pos-touch .product-card { min-height: 118px; display: grid; align-content: space-between; font-size: 16px; }
.pos-mode .pos-touch .product-card { min-height: 252px; gap: 7px; }
.product-card:hover { border-color: var(--brand); }
.product-card b { display: block; }
.product-card small, .guest-product small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #5f6b7a;
  font-size: 12px;
  line-height: 1.35;
}
.product-card span { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.product-card strong, .guest-product strong { color: var(--brand-dark); font-size: 15px; }
.pos-mode .product-card strong { font-size: 18px; }
del { color: #9aa4b2; font-weight: 600; margin-right: 4px; }
.badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  min-height: 22px;
}
.badges em {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  border-radius: 999px;
  padding: 3px 7px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.cart { display: grid; gap: 8px; min-height: 110px; }
.cart-row {
  display: grid;
  grid-template-columns: 1fr 82px 34px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.pos-mode .cart-row {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.cart-row button { padding: 8px; color: var(--danger); }
.totals {
  display: grid;
  gap: 8px;
  padding: 12px;
  margin: 10px 0;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.pos-mode .totals {
  background: rgba(214,168,79,.10);
  border-color: rgba(214,168,79,.28);
}
.totals span { display: flex; justify-content: space-between; gap: 10px; }
.payments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.table-wrap { overflow: auto; max-height: 430px; border: 1px solid var(--line); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
th { background: #f8fafc; position: sticky; top: 0; }
.pos-mode th { background: #20242b; }
.pos-mode td { color: #ece7dc; }
.alert { max-width: 1440px; margin: 18px auto; padding: 12px 14px; background: #ecfdf5; border: 1px solid #99f6e4; border-radius: 8px; color: #134e4a; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chips span { border: 1px solid var(--line); padding: 8px 10px; border-radius: 999px; background: #f8fafc; }
.cat-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 12px;
  margin-bottom: 8px;
}
.cat-tabs button {
  min-width: max-content;
  min-height: 46px;
  background: #eef2f7;
}
.cat-tabs button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pos-mode .cat-tabs button {
  background: rgba(255,255,255,.07);
  color: #f7f4ec;
  border-color: rgba(255,255,255,.10);
}
.pos-mode .cat-tabs button.active {
  background: linear-gradient(135deg, #d6a84f, #9f7427);
  color: #15120b;
}
.pos-mode .sale-panel {
  position: sticky;
  top: 88px;
  align-self: start;
  min-height: calc(100vh - 112px);
  display: grid;
  grid-template-rows: auto minmax(130px, 1fr) auto auto auto;
}
.pos-mode .payments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pos-mode .metrics article {
  min-height: 104px;
  display: grid;
  align-content: center;
}
.call-list { display: grid; gap: 10px; }
.kitchen-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.kitchen-card {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}
.kitchen-card p { margin: 0; color: #1f2937; }
.call-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
}
.call-card b { font-size: 20px; }
.call-card span, .call-card small { color: var(--warn); }
.call-card button { grid-row: span 3; }
.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.table-card {
  display: grid;
  gap: 8px;
  min-height: 96px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}
.table-card span { color: var(--muted); font-size: 12px; word-break: break-word; }
.guest { padding-bottom: 92px; background: #f7f8fa; }
.guest-main { padding: 14px; }
.guest-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  gap: 12px;
  padding: 12px 0;
  background: rgba(247,248,250,.96);
  backdrop-filter: blur(10px);
}
.guest-head div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.guest-head b { font-size: 20px; }
.guest-head span { color: var(--muted); font-weight: 800; }
.guest-head form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guest-head button { min-height: 52px; }
.guest-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guest-search { margin-bottom: 12px; }
.guest-product {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 260px;
  text-align: left;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}
.guest-product span { color: var(--muted); font-size: 12px; }
.guest-product b { font-size: 16px; }
.guest-product strong { color: var(--brand-dark); }
.guest-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 8px;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px rgba(15, 23, 42, .08);
}
.guest-bar button { min-height: 56px; }
.guest-cart {
  margin: 18px 14px 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.guest-cart .cart-row { grid-template-columns: 1fr 72px 38px; }
.line-note { grid-column: 1 / -1; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(135deg, #e7f3f1, #f8fafc); }
.login-panel { width: min(420px, 100%); padding: 28px; }
.login-panel h1 { font-size: 28px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

@media (max-width: 980px) {
  .two, .three, .metrics { grid-template-columns: 1fr; }
  .top { align-items: flex-start; flex-direction: column; }
  main { padding: 16px; }
  .pos-touch { grid-template-columns: 1fr; min-height: auto; }
  .pos-mode .sale-panel { position: static; min-height: auto; }
}

@media (max-width: 560px) {
  .toolbar, .payments, .cols, .cart-row { grid-template-columns: 1fr; }
  .metrics b { font-size: 20px; }
  .guest-products { grid-template-columns: 1fr 1fr; }
  .guest-cart .cart-row { grid-template-columns: 1fr 72px 38px; }
}

@media (min-width: 1800px) {
  .pos-mode main { padding: 22px; }
  .pos-touch { grid-template-columns: minmax(0, 1.85fr) minmax(470px, .7fr); gap: 22px; }
  .pos-touch .product-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); max-height: calc(100vh - 295px); }
  .pos-mode .pos-touch .product-card { min-height: 292px; padding: 16px; }
  .pos-mode h2 { font-size: 24px; }
  .pos-mode .top strong { font-size: 22px; }
  .pos-mode input, .pos-mode select, .pos-mode textarea, .pos-mode button { min-height: 52px; font-size: 16px; }
  .pos-mode .metrics b { font-size: 30px; }
}

@media (min-width: 1280px) and (max-width: 1799px) {
  .pos-touch { grid-template-columns: minmax(0, 1.55fr) minmax(400px, .8fr); }
  .pos-touch .product-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); max-height: calc(100vh - 275px); }
  .pos-mode .pos-touch .product-card { min-height: 238px; }
}

@media (min-width: 981px) and (max-width: 1279px) {
  .pos-mode main { padding: 14px; }
  .pos-touch { grid-template-columns: minmax(0, 1.25fr) minmax(360px, .9fr); gap: 14px; }
  .pos-touch .product-list { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); max-height: calc(100vh - 260px); gap: 9px; }
  .pos-mode .pos-touch .product-card { min-height: 210px; padding: 10px; }
  .product-card img, .guest-product img { aspect-ratio: 16 / 10; }
  .pos-mode .top { padding: 10px 14px; }
  .pos-mode .top a, .pos-mode button { padding: 9px 10px; }
  .pos-mode .payments { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .metrics article { padding: 12px; }
}

@media (max-width: 760px) {
  .pos-mode main { padding: 10px; }
  .pos-mode .top { position: static; padding: 12px; }
  .pos-touch .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
  .pos-mode .pos-touch .product-card { min-height: 220px; }
  .pos-mode .payments { grid-template-columns: 1fr; }
  .sale-panel { margin-bottom: 12px; }
}

@media (max-width: 420px) {
  .guest-products,
  .pos-touch .product-list { grid-template-columns: 1fr; }
  .guest-bar { grid-template-columns: 1fr; }
  .guest { padding-bottom: 190px; }
  .pos-mode .pos-touch .product-card { min-height: auto; }
}

/* Admin dashboard overhaul */
.admin-mode {
  background:
    radial-gradient(circle at 10% 0%, rgba(240, 19, 107, .18), transparent 26%),
    radial-gradient(circle at 88% 4%, rgba(23, 201, 212, .18), transparent 24%),
    linear-gradient(135deg, #140d26 0%, #2b124e 42%, #0f1320 100%);
}
.admin-main {
  max-width: none;
  padding: 18px;
  display: grid;
  gap: 18px;
}
.admin-top {
  background: linear-gradient(90deg, #f0136b 0%, #8f1fd1 48%, #24145f 100%);
  border-bottom: 0;
  box-shadow: 0 20px 44px rgba(15, 8, 28, .22);
}
.admin-top strong {
  font-size: 22px;
  letter-spacing: .2px;
}
.admin-top nav {
  gap: 10px;
  overflow: auto;
  padding-bottom: 2px;
}
.admin-top nav a {
  border: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.admin-top nav a:hover {
  background: rgba(255,255,255,.22);
}
.admin-hero {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.admin-hero article {
  position: relative;
  overflow: hidden;
  min-height: 108px;
  border: 0;
  border-radius: 16px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  box-shadow: 0 20px 45px rgba(0,0,0,.18);
}
.admin-hero article:nth-child(1) { background: linear-gradient(135deg, #f0136b, #ff6b3d); }
.admin-hero article:nth-child(2) { background: linear-gradient(135deg, #6326d9, #17c9d4); }
.admin-hero article:nth-child(3) { background: linear-gradient(135deg, #16b978, #17c9d4); }
.admin-hero article:nth-child(4) { background: linear-gradient(135deg, #ffb545, #ff6b3d); }
.admin-hero article:nth-child(5) { background: linear-gradient(135deg, #3478f6, #6326d9); }
.admin-hero article:nth-child(6) { background: linear-gradient(135deg, #f0136b, #6326d9); }
.admin-hero span,
.admin-hero b {
  color: #fff;
}
.admin-hero b {
  font-size: clamp(20px, 2vw, 30px);
}
.admin-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.admin-strip-card {
  display: grid;
  gap: 8px;
  min-height: 92px;
  border-radius: 16px;
  padding: 16px 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 42px rgba(0,0,0,.16);
}
.admin-strip-card span {
  color: rgba(255,248,252,.72);
  font-weight: 700;
  font-size: 13px;
}
.admin-strip-card b {
  color: #fff;
  font-size: 18px;
}
.admin-section {
  margin-bottom: 0;
}
.admin-panel {
  position: relative;
  overflow: hidden;
}
.admin-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--v-pink), var(--v-purple), var(--v-cyan));
}
.admin-panel h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-panel h2::after {
  content: "";
  display: block;
  width: 68px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--v-pink), var(--v-purple), var(--v-cyan));
}
.admin-split {
  grid-template-columns: minmax(0, 1.65fr) minmax(420px, .75fr);
}
.admin-split .sale-panel {
  position: sticky;
  top: 94px;
  align-self: start;
}
.admin-section .table-wrap {
  max-height: 390px;
}
.admin-section .table-card {
  border-radius: 14px;
}
.admin-section .kitchen-card,
.admin-section .call-card {
  border-radius: 14px;
}
.admin-section .product-list {
  max-height: calc(100vh - 294px);
}
.admin-section .cat-tabs {
  padding-bottom: 8px;
}

@media (max-width: 1280px) {
  .admin-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-split { grid-template-columns: 1fr; }
  .admin-split .sale-panel { position: static; }
}

@media (max-width: 760px) {
  .admin-main { padding: 10px; }
  .admin-hero,
  .admin-strip { grid-template-columns: 1fr 1fr; }
  .admin-section,
  .admin-section .two,
  .admin-section .three { grid-template-columns: 1fr; }
  .admin-top { padding: 12px; }
  .admin-top nav { width: 100%; }
}

@media (max-width: 520px) {
  .admin-hero,
  .admin-strip { grid-template-columns: 1fr; }
  .admin-hero article,
  .admin-strip-card { min-height: 88px; }
}

.terminal-mode {
  min-height: 100vh;
  background: #09070f;
}
.terminal-shell {
  width: min(100vw, 1920px);
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  grid-template-rows: 72px minmax(0, 1fr);
  background: linear-gradient(135deg, #2b0f49, #171021 46%, #0d0815);
}
.terminal-top {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 180px 1fr auto auto auto;
  gap: 22px;
  align-items: center;
  padding: 0 28px;
  background: linear-gradient(90deg, #ec0f63 0%, #95206f 38%, #24134d 100%);
  color: #fff;
}
.terminal-top .brand { font-size: 24px; font-weight: 900; letter-spacing: .5px; }
.terminal-top strong { font-size: 17px; }
.terminal-top span { font-size: 13px; opacity: .9; }
.terminal-side {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px 10px;
  background: linear-gradient(180deg, #7c124e, #2d164d);
}
.terminal-side a,
.report-menu a {
  display: grid;
  place-items: center;
  min-height: 58px;
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.terminal-side a.active,
.terminal-side a:hover,
.report-menu a.active,
.report-menu a:hover {
  background: rgba(255,255,255,.18);
}
.terminal-main {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr) 180px;
  gap: 0;
  padding: 0;
  background: #eeeaf4;
  color: #2d2840;
  overflow: hidden;
}
.ticket-list,
.delivery-list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  background: #fff;
  min-width: 0;
}
.ticket-list h2,
.delivery-list h2 {
  padding: 22px 24px;
  margin: 0;
  color: #ec0f63;
  border-bottom: 1px solid #eeeaf4;
}
.ticket-row,
.delivery-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid #eeeaf4;
}
.ticket-row i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #ec0f63;
  color: #fff;
  font-style: normal;
  font-weight: 900;
}
.ticket-row span,
.delivery-row span { color: #80778d; font-size: 12px; }
.ticket-row strong,
.delivery-row strong { grid-column: 3; color: #261c3c; }
.ticket-total,
.terminal-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-top: 1px solid #eeeaf4;
  font-size: 18px;
}
.ticket-total b,
.terminal-bottom b { font-size: 28px; color: #261c3c; }
.terminal-bottom a {
  background: #ec0f63;
  color: #fff;
  border-radius: 14px;
  padding: 16px 22px;
  font-weight: 900;
}
.terminal-board {
  padding: 28px;
  min-width: 0;
  overflow: auto;
}
.terminal-board.wide { background: #f6f3fa; }
.crumb { color: #847b90; margin-bottom: 16px; }
.terminal-tables {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
}
.terminal-table {
  display: grid;
  align-content: space-between;
  min-height: 142px;
  border-radius: 18px;
  padding: 18px;
  background: #fff;
  color: #322b43;
  box-shadow: 0 12px 30px rgba(47, 35, 76, .08);
}
.terminal-table b { font-size: 18px; }
.terminal-table span { font-weight: 900; }
.terminal-table small { color: #766d82; }
.terminal-table.busy { background: linear-gradient(135deg, #f01867, #df1458); color: #fff; }
.terminal-table.busy small { color: rgba(255,255,255,.78); }
.terminal-table.closed { background: #e4a461; color: #fff; }
.terminal-filter {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 68px 18px 18px;
  background: #241044;
}
.terminal-filter a {
  display: grid;
  place-items: center;
  min-height: 58px;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
}
.terminal-filter a.active { background: #fff; color: #241044; }
.delivery-list { grid-column: 1; }
.delivery-row {
  grid-template-columns: 1fr auto;
  background: #fff;
}
.delivery-row em {
  justify-self: start;
  border-radius: 999px;
  padding: 7px 12px;
  background: #d9f7f6;
  color: #168784;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}
.order-detail {
  grid-column: 2 / -1;
  padding: 34px;
  background: #eeeaf4;
  font-size: 17px;
}
.status-flow {
  display: flex;
  gap: 10px;
  margin: 20px 0 28px;
}
.status-flow span {
  border-radius: 999px;
  padding: 13px 24px;
  background: #fff;
  font-weight: 900;
}
.status-flow span:first-child { background: #4ad8de; color: #15545a; }
.terminal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 34px;
}
.terminal-actions button {
  min-width: 130px;
  min-height: 56px;
  border-radius: 12px;
  color: #fff;
  background: #ec0f63;
}
.terminal-actions button:first-child { background: #fff; color: #40364f; }
.report-menu {
  background: linear-gradient(180deg, #901252, #2d164d);
  padding: 22px;
}
.report-area {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 28px;
  padding: 34px;
  background: #eeeaf4;
}
.chart-card,
.pay-summary,
.report-kpis article {
  background: #fff;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 12px 30px rgba(47, 35, 76, .08);
}
.chart-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: center;
}
.donut {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: conic-gradient(#444b5a 0 34%, #f43f5e 34% 42%, #d8ddd9 42% 63%, #cfcac3 63% 82%, #8d95a5 82% 100%);
  position: relative;
}
.donut::after {
  content: "";
  position: absolute;
  inset: 58px;
  border-radius: 50%;
  background: #fff;
}
.pay-summary p {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid #eeeaf4;
}
.pay-summary strong {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  color: #ec0f63;
  font-size: 24px;
}
.report-kpis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.report-kpis span { color: #ec0f63; font-weight: 900; }
.report-kpis b { display: block; margin-top: 8px; font-size: 28px; }

@media (max-width: 1280px) {
  .terminal-shell { grid-template-columns: 74px minmax(0, 1fr); grid-template-rows: 62px minmax(0, 1fr); }
  .terminal-main { grid-template-columns: 300px minmax(0, 1fr) 140px; }
  .terminal-tables { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
  .terminal-table { min-height: 124px; padding: 14px; }
  .terminal-top { grid-template-columns: 150px 1fr auto auto; gap: 12px; padding: 0 18px; }
}

@media (max-width: 900px) {
  .terminal-shell { display: block; }
  .terminal-top { grid-template-columns: 1fr; min-height: auto; padding: 14px; }
  .terminal-side { display: flex; overflow-x: auto; padding: 10px; }
  .terminal-side a { min-width: 92px; }
  .terminal-main, .report-area { display: grid; grid-template-columns: 1fr; }
  .terminal-filter, .report-menu { display: none; }
  .order-detail, .report-area { grid-column: auto; }
  .ticket-list, .delivery-list { min-height: 360px; }
  .report-kpis { grid-template-columns: 1fr; }
}

/* Unified vibrant cafe POS theme */
:root {
  --v-ink: #161426;
  --v-paper: #fff9fb;
  --v-soft: #f7f1ff;
  --v-pink: #f0136b;
  --v-purple: #6326d9;
  --v-violet: #2f1a68;
  --v-cyan: #17c9d4;
  --v-green: #16b978;
  --v-amber: #ffb545;
  --v-red: #ef3456;
  --v-blue: #3478f6;
  --v-shadow: 0 18px 42px rgba(61, 30, 105, .16);
}

body {
  background:
    radial-gradient(circle at 12% 5%, rgba(240, 19, 107, .15), transparent 28%),
    radial-gradient(circle at 84% 2%, rgba(23, 201, 212, .16), transparent 26%),
    linear-gradient(135deg, #fff7fb 0%, #f5f1ff 48%, #eefcff 100%);
}

.login {
  background:
    radial-gradient(circle at 20% 10%, rgba(240, 19, 107, .28), transparent 30%),
    radial-gradient(circle at 80% 0%, rgba(23, 201, 212, .25), transparent 30%),
    linear-gradient(135deg, #241044, #5a1c86 46%, #f0136b 100%);
}
.login-panel {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.45);
}
.login-panel h1 { color: var(--v-violet); }

.guest {
  background:
    radial-gradient(circle at 15% 0%, rgba(240, 19, 107, .18), transparent 26%),
    radial-gradient(circle at 88% 4%, rgba(23, 201, 212, .20), transparent 24%),
    linear-gradient(135deg, #fff7fb 0%, #f4efff 54%, #ecfbff 100%);
}
.guest-head {
  margin: -14px -14px 14px;
  padding: 16px 14px;
  background: linear-gradient(135deg, rgba(240,19,107,.96), rgba(99,38,217,.96) 62%, rgba(23,201,212,.92));
  color: #fff;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: var(--v-shadow);
}
.guest-head span,
.guest-head .muted { color: rgba(255,255,255,.86); }
.guest-head button,
.guest-bar button.primary {
  background: #fff;
  color: var(--v-purple);
  border: 0;
}
.guest-head button:last-child,
.guest-bar button.primary {
  background: linear-gradient(135deg, var(--v-amber), #ff6b35);
  color: #23120a;
}
.guest-search {
  border: 0;
  box-shadow: var(--v-shadow);
}
.guest-product {
  border: 0;
  background: rgba(255,255,255,.95);
  box-shadow: var(--v-shadow);
}
.guest-product:nth-child(4n+1) { background: linear-gradient(180deg, #fff, #fff2f7); }
.guest-product:nth-child(4n+2) { background: linear-gradient(180deg, #fff, #f0fbff); }
.guest-product:nth-child(4n+3) { background: linear-gradient(180deg, #fff, #fff8e7); }
.guest-product:nth-child(4n+4) { background: linear-gradient(180deg, #fff, #f3fff8); }
.guest-product b,
.guest-cart h2 { color: var(--v-violet); }
.guest-product strong,
.product-card strong { color: var(--v-pink); }
.guest-bar {
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(99,38,217,.13);
}

.pos-mode {
  --bg: #171022;
  --panel: rgba(255,255,255,.08);
  --text: #fff8fc;
  --muted: rgba(255,248,252,.72);
  --line: rgba(255,255,255,.14);
  --brand: var(--v-pink);
  --brand-dark: #ff7aa8;
  --warn: var(--v-amber);
  --danger: var(--v-red);
  background:
    radial-gradient(circle at 12% 4%, rgba(240, 19, 107, .30), transparent 28%),
    radial-gradient(circle at 86% 0%, rgba(23, 201, 212, .24), transparent 28%),
    linear-gradient(135deg, #130b24 0%, #2a155a 45%, #100d18 100%);
}
.pos-mode .top,
.terminal-top {
  background: linear-gradient(90deg, #f0136b 0%, #9d1fb8 48%, #24145f 100%);
}
.pos-mode .top a,
.pos-mode button,
.terminal-actions button,
.terminal-bottom a {
  border: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  color: #fff;
}
.pos-mode button.primary,
.pos-mode button:hover,
.terminal-actions button.primary,
.terminal-actions button:hover {
  background: linear-gradient(135deg, var(--v-pink), #ff6a3d);
  color: #fff;
}
.pos-mode label { color: rgba(255,248,252,.86); }
.pos-mode .panel,
.pos-mode .metrics article {
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 20px 52px rgba(0,0,0,.24);
}
.pos-mode input,
.pos-mode select,
.pos-mode textarea {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.16);
}
.pos-mode .product-card {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,246,251,.92));
  color: var(--v-ink);
  border: 0;
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}
.pos-mode .product-card:nth-child(5n+1) { background: linear-gradient(180deg, #fff, #ffeef5); }
.pos-mode .product-card:nth-child(5n+2) { background: linear-gradient(180deg, #fff, #eefbff); }
.pos-mode .product-card:nth-child(5n+3) { background: linear-gradient(180deg, #fff, #fff5dc); }
.pos-mode .product-card:nth-child(5n+4) { background: linear-gradient(180deg, #fff, #f0fff6); }
.pos-mode .product-card:nth-child(5n+5) { background: linear-gradient(180deg, #fff, #f2ecff); }
.pos-mode .product-card small,
.pos-mode .product-card span { color: #685f78; }
.pos-mode .cart-row,
.pos-mode .totals {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.16);
}
.pos-mode .cat-tabs button.active {
  background: linear-gradient(135deg, var(--v-cyan), var(--v-purple));
  color: #fff;
}

.terminal-mode {
  background:
    radial-gradient(circle at 16% 0%, rgba(240, 19, 107, .34), transparent 24%),
    radial-gradient(circle at 86% 8%, rgba(23, 201, 212, .26), transparent 26%),
    #090713;
}
.terminal-shell {
  background: linear-gradient(135deg, #421060, #171021 46%, #070712);
}
.terminal-main,
.order-detail,
.report-area,
.terminal-board.wide {
  background: linear-gradient(135deg, #f8f2ff, #edfaff);
}
.terminal-side,
.report-menu {
  background: linear-gradient(180deg, #f0136b, #7c18a8 48%, #241044);
}
.ticket-list,
.delivery-list,
.chart-card,
.pay-summary,
.report-kpis article,
.terminal-table,
.status-flow span {
  background: rgba(255,255,255,.96);
  box-shadow: var(--v-shadow);
}
.ticket-list h2,
.delivery-list h2,
.report-kpis span { color: var(--v-pink); }
.ticket-row i { background: linear-gradient(135deg, var(--v-pink), var(--v-purple)); }
.terminal-table.empty { border-top: 7px solid #d9d4e7; }
.terminal-table.busy { background: linear-gradient(135deg, #f0136b, #ff4d75); }
.terminal-table.closed { background: linear-gradient(135deg, #ffb545, #ff7a3d); }
.terminal-table:nth-child(6n+3):not(.busy):not(.closed) { border-top-color: var(--v-cyan); }
.terminal-table:nth-child(6n+4):not(.busy):not(.closed) { border-top-color: var(--v-green); }
.terminal-table:nth-child(6n+5):not(.busy):not(.closed) { border-top-color: var(--v-amber); }
.terminal-table:nth-child(6n+6):not(.busy):not(.closed) { border-top-color: var(--v-blue); }
.delivery-row:nth-child(even) { background: #fff7dc; }
.delivery-row:nth-child(odd) { background: #fff; }
.delivery-row em { background: #dffbff; color: #087b83; }
.status-flow span:first-child { background: linear-gradient(135deg, var(--v-cyan), #62f0d0); color: #07363e; }
.kitchen-card {
  border: 0;
  background: linear-gradient(135deg, #ffffff, #eafaff);
  box-shadow: var(--v-shadow);
}
.call-card {
  border: 0;
  background: linear-gradient(135deg, #fff7dc, #ffe9f1);
  box-shadow: var(--v-shadow);
}
.donut {
  background: conic-gradient(var(--v-purple) 0 34%, var(--v-pink) 34% 52%, var(--v-cyan) 52% 73%, var(--v-amber) 73% 88%, var(--v-green) 88% 100%);
}

@media (max-width: 760px) {
  .pos-mode .product-card,
  .guest-product {
    box-shadow: 0 10px 24px rgba(61, 30, 105, .14);
  }
}

/* Customer QR PWA final layout */
.guest {
  padding-bottom: 118px;
}
.guest-head {
  margin: -14px -14px 14px;
  padding: 16px 14px;
}
.guest-head .guest-search {
  margin: 0;
  background: rgba(255,255,255,.96);
  color: var(--v-ink);
}
.table-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255,255,255,.22);
  color: #fff !important;
  font-weight: 900;
}
.guest-add {
  display: grid !important;
  place-items: center;
  min-height: 42px;
  border-radius: 8px;
  margin-top: 4px;
  background: linear-gradient(135deg, var(--v-pink), var(--v-purple));
  color: #fff !important;
  font-weight: 900;
}
.guest-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.guest-title b {
  justify-self: start;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(12px, 3.2vw, 20px);
}
.guest-call-top {
  display: block !important;
  grid-template-columns: none !important;
  justify-self: center;
  margin: 0;
  min-width: 0;
}
.guest-call-top button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  background: linear-gradient(135deg, var(--v-cyan), var(--v-purple));
  color: #fff;
  font-weight: 900;
  font-size: clamp(11px, 3vw, 14px);
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(61, 30, 105, .18);
}
.table-pill {
  justify-self: end;
  min-width: 0;
  white-space: nowrap;
  font-size: clamp(11px, 3vw, 14px);
}
.guest-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.guest-category-card {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 138px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  padding: 12px;
  text-align: left;
  color: #fff;
  background: linear-gradient(135deg, var(--v-pink), var(--v-purple));
  box-shadow: var(--v-shadow);
}
.guest-category-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .62;
}
.guest-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 12%, rgba(18, 8, 34, .76));
}
.guest-category-card > * {
  position: relative;
  z-index: 1;
}
.guest-category-card span {
  font-size: 11px;
  font-weight: 900;
  opacity: .9;
}
.guest-category-card b {
  font-size: 17px;
}
.guest-category-card small {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  opacity: .86;
}
.guest-category-card em {
  justify-self: start;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255,255,255,.22);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.guest-category-card.active {
  outline: 3px solid var(--v-amber);
}
.category-back {
  grid-column: 1 / -1;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--v-cyan), var(--v-purple));
  color: #fff;
  font-weight: 900;
  box-shadow: var(--v-shadow);
}
.guest-product-modal[hidden] {
  display: none;
}
.guest-product-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
  padding: 18px;
  background: rgba(15, 8, 28, .62);
  backdrop-filter: blur(8px);
}
.guest-modal-card {
  width: min(520px, 100%);
  max-height: calc(100vh - 34px);
  overflow: auto;
  display: grid;
  gap: 10px;
  border-radius: 18px;
  padding: 16px;
  background: #fff;
  color: var(--v-ink);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.guest-modal-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
}
.guest-modal-card h2 {
  margin: 0;
  color: var(--v-violet);
}
.guest-modal-card p {
  margin: 0;
  color: #5f5870;
}
.guest-modal-card strong {
  font-size: 22px;
  color: var(--v-pink);
}
.modal-close {
  justify-self: end;
  min-height: 34px;
  border-radius: 999px;
}
.qty-picker {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: 8px;
  align-items: center;
}
.qty-picker button,
.guest-add-modal {
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--v-pink), var(--v-purple));
  color: #fff;
  font-weight: 900;
}
.qty-picker input {
  text-align: center;
  font-weight: 900;
}
.guest-add-modal {
  width: 100%;
}
.guest-bar {
  grid-template-columns: 1fr 1.25fr;
}
.guest-bar form {
  margin: 0;
}
.guest-bar form,
.guest-bar button {
  width: 100%;
}
.guest-bar button {
  white-space: nowrap;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--v-amber), #ff6b35);
  color: #23120a;
  font-weight: 900;
}
.hidden-form {
  display: none;
}

@media (max-width: 420px) {
  .guest-title {
    gap: 6px;
  }
  .guest-title b {
    font-size: 12px;
  }
  .guest-call-top button,
  .table-pill {
    min-height: 32px;
    padding-inline: 9px;
    font-size: 11px;
  }
  .guest-bar {
    grid-template-columns: 1fr 1fr;
  }
  .guest {
    padding-bottom: 116px;
  }
}