/* Shared SenYu application UI system, aligned with the customer mini program. */
:root {
  --ui-green: #1f3a32;
  --ui-green-2: #315f4c;
  --ui-green-soft: #e5eee5;
  --ui-green-action: #d9e8dc;
  --ui-green-mist: #f0f5f0;
  --ui-rice: #f7f4ed;
  --ui-rice-2: #efe7d7;
  --ui-coffee: #6b4936;
  --ui-gold: #c5a56e;
  --ui-ink: #171715;
  --ui-muted: #858b86;
  --ui-line: #e8ece8;
  --ui-white: #fff;
  --ui-card-radius: 24px;
  --ui-control-radius: 14px;
  --ui-pill-radius: 999px;
  --ui-card-shadow: 0 12px 34px rgba(31, 58, 50, .075);
  --ui-float-shadow: 0 18px 44px rgba(31, 58, 50, .14);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

html { background: var(--ui-rice); }
body { color: var(--ui-ink); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { transition: transform .18s ease, opacity .18s ease, background-color .18s ease, box-shadow .18s ease; }
button:not(:disabled):active { transform: scale(.98); }
input, select, textarea { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(49, 95, 76, .10); }

/* Back office */
.admin-port { background: linear-gradient(180deg, var(--ui-green-soft) 0, var(--ui-rice) 360px); }
.admin-port .app-shell { min-height: 100vh; background: transparent; }
.admin-port .sidebar {
  border-right: 1px solid rgba(31, 58, 50, .08);
  background: rgba(255, 255, 255, .86);
  box-shadow: 12px 0 36px rgba(31, 58, 50, .045);
  backdrop-filter: blur(18px);
}
.admin-port .brand-row { padding: 4px 8px 16px; border-bottom: 1px solid var(--ui-line); }
.admin-port .brand-row img { width: 48px; height: 48px; padding: 4px; background: var(--ui-rice); }
.admin-port .brand-row strong { color: var(--ui-green); font-size: 18px; }
.admin-port .brand-row span { color: var(--ui-muted); }
.admin-port #nav button { color: #555c57; border: 1px solid transparent; }
.admin-port #nav button:hover { color: var(--ui-green); background: var(--ui-green-mist); }
.admin-port #nav button.active { color: #fff; background: linear-gradient(135deg, var(--ui-green-2), var(--ui-green)); box-shadow: 0 8px 20px rgba(31, 58, 50, .16); }
.admin-port .user-card { padding: 14px; border: 1px solid var(--ui-line); border-radius: 18px; background: var(--ui-rice); }
.admin-port .main { padding: 24px 30px 36px; }
.admin-port .topbar {
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid rgba(31, 58, 50, .07);
  border-radius: 22px;
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--ui-card-shadow);
  backdrop-filter: blur(14px);
}
.admin-port .topbar h2 { color: var(--ui-green); }
.admin-port .panel,
.admin-port .ui-entry-card,
.admin-port .product-admin-card,
.admin-port .notification-card {
  border-color: transparent;
  border-radius: var(--ui-card-radius);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--ui-card-shadow);
}
.admin-port .panel { padding: 24px; }
.admin-port .ui-entry-card { min-height: 116px; padding: 26px; }
.admin-port .ui-entry-card:hover { border-color: rgba(31, 58, 50, .1); background: var(--ui-green-mist); transform: translateY(-1px); }
.admin-port .metric { border-radius: 18px; background: linear-gradient(145deg, #fff, #fbfcfa); }
.admin-port input,
.admin-port select,
.admin-port textarea {
  min-height: 44px;
  border: 1px solid #dde4dd;
  border-radius: var(--ui-control-radius);
  background: #fbfcfa;
}
.admin-port input[type="color"] { min-height: 44px; padding: 5px; cursor: pointer; }
.admin-port button,
.admin-port .button-link { min-height: 42px; border-radius: var(--ui-control-radius); }
.admin-port button:not(.secondary):not(.ghost):not(.text-button):not(.product-card):not(.category-tab):not(.summary-pill):not(.operation-card):not(.ui-entry-card),
.admin-port .button-link:not(.secondary) { background: var(--ui-green); color: #fff; }
.admin-port button.secondary,
.admin-port .button-link.secondary {
  border: 1px solid #c5d8c8;
  background: var(--ui-green-action);
  color: var(--ui-green);
}
.admin-port button.secondary:hover,
.admin-port .button-link.secondary:hover { background: #ccdfd0; box-shadow: 0 5px 14px rgba(31, 58, 50, .09); }
.admin-port .ui-section-entry { font-weight: 700; }
.admin-port .product-sort-button {
  border: 1px solid #d5e0d7;
  background: var(--ui-green-mist);
}
.admin-port .product-sort-button:hover { border-color: #b9cdbd; background: var(--ui-green-action); }
.admin-port button.ghost { background: transparent; color: var(--ui-green); }
.admin-port #nav button {
  display: flex;
  align-items: center;
  width: 100%;
  color: #49534d;
  background: transparent;
  line-height: 1.35;
}
.admin-port #nav button:hover { color: var(--ui-green); background: var(--ui-green-mist); }
.admin-port #nav button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--ui-green-2), var(--ui-green));
}
.admin-port .product-card {
  color: var(--ui-ink);
  background: #fff;
  text-align: center;
  box-shadow: 0 7px 22px rgba(31, 58, 50, .075);
}
.admin-port .product-card .cashier-product-text {
  display: flex;
  min-height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.admin-port .product-card strong,
.admin-port .product-card b { width: 100%; color: var(--ui-ink); text-align: center; }
.admin-port .product-card b { color: var(--ui-coffee); }
.admin-port .topbar-actions button,
.admin-port .topbar-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.admin-port th { background: var(--ui-green-mist); }
.admin-port .summary-pill.filter {
  color: var(--ui-ink);
  background: linear-gradient(145deg, #fff, #fbfcfa);
  box-shadow: 0 5px 16px rgba(31, 58, 50, .05);
}
.admin-port .summary-pill.filter:hover { border-color: #cfdacf; background: var(--ui-green-mist); }
.admin-port .summary-pill.filter.active {
  border-color: var(--ui-green);
  color: #fff;
  background: linear-gradient(135deg, var(--ui-green-2), var(--ui-green));
  box-shadow: 0 8px 20px rgba(31, 58, 50, .14);
}
.admin-port .summary-pill.filter.active span { color: rgba(255, 255, 255, .76); }
.admin-port .operation-card {
  border: 1px solid #dfe7df;
  color: var(--ui-green);
  background: linear-gradient(145deg, #fff, var(--ui-green-mist));
  box-shadow: 0 6px 18px rgba(31, 58, 50, .055);
}
.admin-port .operation-card span { color: #69736c; }
.admin-port .ui-entry-card {
  border: 1px solid #dfe7df;
  color: var(--ui-green);
  background: linear-gradient(145deg, #fff, var(--ui-green-mist));
  box-shadow: 0 8px 22px rgba(31, 58, 50, .065);
}
.admin-port .ops-summary .metric {
  min-width: 0;
  min-height: 106px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
  padding: 17px 20px;
  border-top: 1px solid var(--ui-line);
  border-right: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--ui-card-shadow);
}
.admin-port .ops-summary .metric > span,
.admin-port .ops-summary .metric > strong,
.admin-port .ops-summary .metric > small { display: block; margin: 0; line-height: 1.3; }
.admin-port .ops-summary .metric > span { color: #566159; font-size: 13px; }
.admin-port .ops-summary .metric > strong { color: var(--ui-ink); font-size: 25px; }
.admin-port .ops-summary .metric > small { overflow: hidden; color: var(--ui-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.admin-port tr { border-color: var(--ui-line); }
.admin-port .tag { border-radius: var(--ui-pill-radius); }
.admin-port .notice { border: 0; border-radius: 16px; box-shadow: var(--ui-card-shadow); }
.admin-port .ui-save-bar { bottom: 16px; border: 0; border-radius: 20px; box-shadow: var(--ui-float-shadow); }
.admin-port .login-shell { background: linear-gradient(155deg, var(--ui-green-soft), var(--ui-rice) 62%, var(--ui-rice-2)); }
.admin-port .login-panel { border: 0; border-radius: 30px; box-shadow: var(--ui-float-shadow); }
.admin-port .login-panel .pos-entry { border-radius: var(--ui-pill-radius); }

/* Customer self-service kiosk */
.kiosk-port { background: linear-gradient(180deg, var(--ui-green-soft), var(--ui-rice) 42%); }
.kiosk-port .kiosk-app { grid-template-rows: 80px minmax(0, 1fr); background: transparent; }
.kiosk-port .kiosk-header {
  margin: 12px 14px 0;
  padding: 0 22px;
  border: 1px solid rgba(31, 58, 50, .06);
  border-radius: 24px;
  color: var(--ui-green);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--ui-card-shadow);
  backdrop-filter: blur(14px);
}
.kiosk-port .kiosk-brand img { padding: 3px; border-radius: 15px; background: var(--ui-rice); }
.kiosk-port .kiosk-brand small,
.kiosk-port .header-copy { color: var(--ui-muted); }
.kiosk-port .header-copy b { color: var(--ui-green); }
.kiosk-port .kiosk-workspace { grid-template-columns: 126px minmax(430px, 1fr) 390px; gap: 12px; padding: 12px 14px 14px; }
.kiosk-port .kiosk-categories,
.kiosk-port .kiosk-menu,
.kiosk-port .kiosk-order { border: 0; border-radius: var(--ui-card-radius); background: rgba(255, 255, 255, .93); box-shadow: var(--ui-card-shadow); }
.kiosk-port .kiosk-categories { padding: 14px 9px; }
.kiosk-port .kiosk-categories button { min-height: 48px; border-radius: 15px; }
.kiosk-port .kiosk-categories button.active { color: #fff; background: var(--ui-green); }
.kiosk-port .kiosk-menu { padding: 20px; }
.kiosk-port .kiosk-menu-title { top: -20px; margin: -20px -20px 16px; padding: 20px 20px 14px; background: rgba(255, 255, 255, .96); }
.kiosk-port .kiosk-menu-title input { height: 44px; border-color: var(--ui-line); border-radius: var(--ui-pill-radius); background: var(--ui-green-mist); }
.kiosk-port .kiosk-promos { border-radius: 20px; box-shadow: none; }
.kiosk-port .kiosk-product { border: 0; border-radius: 22px; background: #fff; box-shadow: 0 7px 24px rgba(31, 58, 50, .08); }
.kiosk-port .kiosk-product .product-photo { border-radius: 18px; }
.kiosk-port .kiosk-product .product-info {
  justify-items: center;
  align-content: center;
  text-align: center;
}
.kiosk-port .kiosk-product .product-info strong,
.kiosk-port .kiosk-product .product-info b { width: 100%; text-align: center; }
.kiosk-port .kiosk-product .product-tags { justify-content: center; }
.kiosk-port .kiosk-product .product-info em { text-align: center; }
.kiosk-port .product-add { background: var(--ui-green); box-shadow: 0 5px 14px rgba(31, 58, 50, .2); }
.kiosk-port .kiosk-order { padding: 22px; }
.kiosk-port .kiosk-service { padding: 4px; border-radius: var(--ui-pill-radius); background: var(--ui-green-mist); }
.kiosk-port .kiosk-service button { border-radius: var(--ui-pill-radius); }
.kiosk-port .kiosk-service button.active { color: var(--ui-green); }
.kiosk-port .kiosk-note input { border-color: var(--ui-line); border-radius: 14px; background: #fbfcfa; }
.kiosk-port .kiosk-submit { height: 56px; border-radius: var(--ui-pill-radius); background: var(--ui-green); box-shadow: 0 8px 22px rgba(31, 58, 50, .18); }
.kiosk-port .option-sheet,
.kiosk-port .kiosk-payment { border-radius: 28px; }
.kiosk-port .option-close { border-color: var(--ui-line); }
.kiosk-port .option-bottom { background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); }

/* Android tablet POS */
.pos-port { background: linear-gradient(180deg, var(--ui-green-soft), var(--ui-rice) 42%); }
.pos-port .pos-app { grid-template-rows: 78px minmax(0, 1fr); padding: 12px 14px 14px; gap: 12px; background: transparent; }
.pos-port .pos-topbar {
  padding: 0 20px;
  border: 1px solid rgba(31, 58, 50, .06);
  border-radius: 24px;
  color: var(--ui-green);
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--ui-card-shadow);
  backdrop-filter: blur(14px);
}
.pos-port .pos-brand img { padding: 3px; border-radius: 13px; background: var(--ui-rice); }
.pos-port .pos-brand small,
.pos-port .user-button small { color: var(--ui-muted); }
.pos-port .top-actions button,
.pos-port .top-actions a { border: 0; border-radius: 14px; color: var(--ui-green); background: var(--ui-green-soft); text-decoration: none; }
.pos-port .top-actions .top-button,
.pos-port .top-actions .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.pos-port .top-actions .top-button #pendingCount {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  margin-left: 7px;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  color: #fff;
  background: #b14e35;
  box-shadow: 0 2px 7px rgba(107, 73, 54, .22);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.pos-port .top-actions .user-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.15;
}
.pos-port .workspace { grid-template-columns: 112px minmax(360px, 1fr) 370px; gap: 12px; }
.pos-port .category-rail,
.pos-port .menu-pane,
.pos-port .order-pane { border: 0; border-radius: var(--ui-card-radius); background: rgba(255, 255, 255, .93); box-shadow: var(--ui-card-shadow); }
.pos-port .category-rail { padding: 13px 9px; }
.pos-port .category { min-height: 48px; border-radius: 15px; }
.pos-port .category.active { border: 0; color: #fff; background: var(--ui-green); }
.pos-port .menu-pane { padding: 20px; }
.pos-port .menu-toolbar input { height: 44px; border: 0; border-radius: var(--ui-pill-radius); background: var(--ui-green-mist); }
.pos-port .pos-products { grid-auto-rows: 246px; gap: 13px; }
.pos-port .pos-product { border: 0; border-radius: 20px; box-shadow: 0 7px 22px rgba(31, 58, 50, .075); }
.pos-port .pos-product-photo { border-radius: 15px; }
.pos-port .pos-product-copy {
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.pos-port .pos-product-copy strong,
.pos-port .pos-product-copy b,
.pos-port .pos-product-copy em { width: 100%; text-align: center; }
.pos-port .pos-product-tags { justify-content: center; }
.pos-port .order-pane { overflow: hidden; }
.pos-port .service-switch { padding: 4px; border-radius: var(--ui-pill-radius); background: var(--ui-green-mist); }
.pos-port .service-switch button { border-radius: var(--ui-pill-radius); }
.pos-port .order-fields input { border-color: var(--ui-line); border-radius: 14px; background: #fbfcfa; }
.pos-port .order-actions { gap: 10px; }
.pos-port .order-actions button { min-height: 54px; border-radius: var(--ui-pill-radius); }
.pos-port .checkout-button { background: var(--ui-green); box-shadow: 0 8px 22px rgba(31, 58, 50, .18); }
.pos-port .login-screen { background: linear-gradient(155deg, var(--ui-green-soft), var(--ui-rice) 62%, var(--ui-rice-2)); }
.pos-port .login-box { border: 0; border-radius: 30px; box-shadow: var(--ui-float-shadow); }
.pos-port .login-box input { border-color: var(--ui-line); border-radius: 14px; background: #fbfcfa; }
.pos-port .login-box button { border-radius: var(--ui-pill-radius); background: var(--ui-green); }
.pos-port .modal,
.pos-port .pending-panel { border-radius: 28px; }

/* Production board */
.production-port { min-height: 100vh; background: linear-gradient(180deg, var(--ui-green-soft), var(--ui-rice) 360px); }
.production-port #app > header {
  margin: 14px;
  padding: 18px 22px;
  border: 1px solid rgba(31, 58, 50, .06);
  border-radius: 24px;
  color: var(--ui-green);
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--ui-card-shadow);
  backdrop-filter: blur(14px);
}
.production-port #app > header nav button,
.production-port #app > header nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-pill-radius);
  color: var(--ui-green);
  background: var(--ui-green-soft);
  line-height: 1.2;
  text-align: center;
}
.production-port .hint { color: var(--ui-muted); }
.production-port main { gap: 16px; }
.production-port .column h2 { color: var(--ui-green); }
.production-port .order { border: 0; border-radius: var(--ui-card-radius); background: rgba(255, 255, 255, .95); box-shadow: var(--ui-card-shadow); }
.production-port .notes { border-radius: 14px; background: var(--ui-rice-2); }
.production-port .order button { border-radius: var(--ui-pill-radius); background: var(--ui-green); }
.production-port .empty { border-radius: 20px; background: rgba(255, 255, 255, .55); }
.production-port .login { background: linear-gradient(155deg, var(--ui-green-soft), var(--ui-rice) 62%, var(--ui-rice-2)); }
.production-port .login form { border-radius: 30px; box-shadow: var(--ui-float-shadow); }
.production-port .login input { min-height: 44px; border-color: var(--ui-line); border-radius: 14px; background: #fbfcfa; }
.production-port .login button { min-height: 50px; border-radius: var(--ui-pill-radius); }

/* Payment confirmation */
.pay-port { background: linear-gradient(155deg, var(--ui-green-soft), var(--ui-rice) 62%, var(--ui-rice-2)); }
.pay-port .phone-pay { padding: 32px 26px; border: 0; border-radius: 30px; background: rgba(255, 255, 255, .94); box-shadow: var(--ui-float-shadow); }
.pay-port .phone-pay > img { padding: 7px; border-radius: 18px; background: var(--ui-rice); }
.pay-port #payPanel { padding: 20px; border-radius: 22px; background: var(--ui-green-mist); }
.pay-port #payPanel > strong { color: var(--ui-coffee); }
.pay-port #phonePayButton { border-radius: var(--ui-pill-radius); background: var(--ui-green); box-shadow: 0 8px 22px rgba(31, 58, 50, .18); }
.pay-port .phone-paid b { background: var(--ui-green); }

@media (max-width: 1100px) {
  .kiosk-port .kiosk-workspace { grid-template-columns: 112px minmax(360px, 1fr) 340px; }
  .pos-port .workspace { grid-template-columns: 102px minmax(330px, 1fr) 340px; }
  .admin-port .main { padding: 20px; }
}

@media (max-width: 760px) {
  .admin-port .sidebar { border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .admin-port .topbar { border-radius: 18px; }
  .admin-port .panel { padding: 18px; border-radius: 20px; }
  .admin-port .ui-entry-grid { grid-template-columns: 1fr; }
  .production-port #app > header { align-items: flex-start; margin: 8px; border-radius: 20px; }
  .production-port main { padding: 0 10px 24px; }
  .production-port .order { border-radius: 20px; }
  .pay-port { padding: 14px; }
}