html {
  -webkit-text-size-adjust: 100%;
}

body {
  color: var(--o2o-text);
  font-family: var(--o2o-font-sans);
  accent-color: var(--o2o-primary);
}

button,
input,
select,
textarea {
  box-sizing: border-box;
  font-family: var(--o2o-font-sans);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--o2o-focus);
  outline-offset: 2px;
}

/* Login screen */
.top-controls .theme-btn,
.top-controls .lang-btn {
  min-height: var(--o2o-touch-sm);
  border-radius: var(--o2o-radius-md) !important;
}

.top-controls .lang-btn {
  letter-spacing: 0 !important;
  white-space: nowrap;
}

#loginCard {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--o2o-radius-lg) !important;
  box-shadow: var(--o2o-shadow-md);
}

#login .login-field,
#loginCard .login-field {
  border-radius: var(--o2o-radius-md);
  transition: border-color var(--o2o-transition), box-shadow var(--o2o-transition), background-color var(--o2o-transition);
}

#login .login-field:focus-within,
#loginCard .login-field:focus-within {
  border-color: var(--o2o-primary) !important;
  box-shadow: 0 0 0 3px var(--o2o-focus);
}

#txtUsername,
#txtPassword,
#cardid {
  min-height: var(--o2o-touch-md);
}

#submitBtn,
#login .k2-button,
#loginCard .k2-button {
  min-height: var(--o2o-touch-md);
  border-radius: var(--o2o-radius-md) !important;
  transition: transform var(--o2o-transition), box-shadow var(--o2o-transition), filter var(--o2o-transition);
}

#submitBtn:hover,
#login .k2-button:hover,
#loginCard .k2-button:hover {
  filter: brightness(1.04);
}

#submitBtn:active,
#login .k2-button:active,
#loginCard .k2-button:active {
  transform: translateY(1px);
}

#keypad .keypadbut {
  min-height: 48px;
  min-width: 48px;
  border-radius: var(--o2o-radius-md) !important;
  box-shadow: var(--o2o-shadow-sm);
}

/* Main POS screen */
#float_btns {
  gap: var(--o2o-space-2) !important;
}

/* #float_btns > div 的完整样式由 TIER 14 #43 定义（显式 #ffffff 不跟随主题） */

#page_wrapper,
#content_wrapper,
#article_aside_wrapper {
  background-color: var(--o2o-bg);
}

#menu_inner,
#article_inner,
#aside_inner,
.content_box_right_lsd {
  box-sizing: border-box;
}

#menu_inner,
#aside_inner .content_box_right_lsd {
  border: 1px solid var(--o2o-border);
  border-radius: var(--o2o-radius-lg);
  background: var(--o2o-surface);
  box-shadow: var(--o2o-shadow-sm);
}

#article_inner {
  border-radius: var(--o2o-radius-lg);
}

#rightlsdtitle,
#showrightsumlsd {
  color: var(--o2o-text-strong);
}

#showrightsumlsd {
  border-top: 1px solid var(--o2o-border);
  background: var(--o2o-surface-2);
}

#code,
#txm_sp,
#qr_table,
#microscan,
#Client_telephone {
  min-height: var(--o2o-touch-md);
  border: 1px solid var(--o2o-border-strong) !important;
  border-radius: var(--o2o-radius-md) !important;
  background: var(--o2o-surface) !important;
  color: var(--o2o-text) !important;
  padding: 8px 10px !important;
}

#code::placeholder,
#txm_sp::placeholder,
#microscan::placeholder,
#Client_telephone::placeholder {
  color: var(--o2o-muted);
}

#txmscan,
#tablescan,
#micropayscan {
  box-sizing: border-box;
  padding: var(--o2o-space-2) 0;
}

#but_enter,
#gettel,
#but_dborder,
.delivery_gettel,
.tel_msg_but,
.tk_msg_button,
.pc_ordermenu_but,
.pc_spsetupmenu_but {
  border-radius: var(--o2o-radius-md) !important;
  border: 1px solid var(--o2o-border-strong) !important;
  box-shadow: var(--o2o-shadow-sm);
}

.order_bt input[type="button"],
.order_bt button {
  border-radius: var(--o2o-radius-md) !important;
  text-wrap: balance;
}

/* POS action semantics */
#spmenu .order_bt input[type="button"],
#tablemenu .order_bt input[type="button"],
#scms .order_bt input[type="button"] {
  min-height: var(--o2o-touch-lg);
  border: 1px solid var(--o2o-border-strong) !important;
  border-radius: var(--o2o-radius-md) !important;
  background: var(--o2o-surface) !important;
  color: var(--o2o-text-strong) !important;
  box-shadow: var(--o2o-shadow-sm);
  font-weight: 650 !important;
  line-height: 1.16;
  white-space: normal;
  word-break: keep-all;
  transition: transform var(--o2o-transition), box-shadow var(--o2o-transition), filter var(--o2o-transition);
}

#spmenu .order_bt input[type="button"]:active,
#tablemenu .order_bt input[type="button"]:active,
#scms .order_bt input[type="button"]:active {
  transform: translateY(1px);
}

#spmenu .order_bt input[onclick=""],
#tablemenu .order_bt input[onclick=""],
#scms .order_bt input[onclick=""] {
  opacity: 0.42;
  box-shadow: none;
  pointer-events: none;
}

#spmenu .order_bt input[onclick*="order_copy('1')"],
#spmenu .order_bt input.k2-button-style-a-g {
  border-color: rgba(22, 128, 60, 0.55) !important;
  background: var(--o2o-success) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(22, 128, 60, 0.24);
}

#spmenu .order_bt input[onclick*="order_copy('0')"],
#spmenu .order_bt input[onclick*="funshoworder2"],
#but_enter {
  border-color: rgba(37, 99, 235, 0.55) !important;
  background: var(--o2o-primary) !important;
  color: #ffffff !important;
}

#spmenu .order_bt input[onclick*="uf_key_clearorder"],
#spmenu .order_bt input[onclick*="funcancelback"],
#tablemenu .order_bt input[onclick*="funcancelsp"] {
  border-color: rgba(180, 35, 24, 0.45) !important;
  background: var(--o2o-danger-soft) !important;
  color: var(--o2o-danger) !important;
}

#spmenu .order_bt input[onclick*="uf_key_change_price"],
#spmenu .order_bt input[onclick*="uf_key_change_add_price"],
#spmenu .order_bt input[onclick*="uf_key_one_zkl"],
#spmenu .order_bt input[onclick*="uf_key_zengsong"],
#spmenu .order_bt input[onclick*="Tc_dzzf"],
#tablemenu .order_bt input[onclick*="funshztsp"],
#tablemenu .order_bt input[onclick*="allzk"],
#scms .order_bt input[onclick*="scms("] {
  border-color: rgba(183, 121, 31, 0.45) !important;
  background: var(--o2o-warning-soft) !important;
  color: var(--o2o-warning) !important;
}

#spmenu .order_bt input[onclick*="uf_key_change_sl"],
#spmenu .order_bt input[onclick*="uf_key_change_kw"],
#spmenu .order_bt input[onclick*="showscms"],
#spmenu .order_bt input[onclick*="switchspda"],
#tablemenu .order_bt input[onclick*="sureneed_qty"],
#tablemenu .order_bt input[onclick*="funchangesp"] {
  border-color: rgba(37, 99, 235, 0.35) !important;
  background: var(--o2o-primary-soft) !important;
  color: var(--o2o-primary-strong) !important;
}

#scms .order_bt input[onclick*="showscms"],
#tablemenu .order_bt input[onclick*="funmode"] {
  border-color: var(--o2o-border-strong) !important;
  background: var(--o2o-surface-2) !important;
  color: var(--o2o-text-strong) !important;
}

/* Right order panel hierarchy */
#aside_inner .content_box_right_lsd {
  overflow: hidden;
  color: var(--o2o-text);
}

#r_c {
  display: block;
  margin: 0;
  padding: var(--o2o-space-2) var(--o2o-space-3);
  border-bottom: 1px solid var(--o2o-border);
  background: var(--o2o-surface-2);
}

#r_c > div:first-child {
  display: flex;
  align-items: center;
  gap: var(--o2o-space-2);
  min-height: var(--o2o-touch-sm);
}

#showtablename,
#showinputno {
  color: var(--o2o-text-strong);
  font-weight: 750;
}

#showinputno {
  margin-left: auto;
  color: var(--o2o-primary-strong);
}

#userxm {
  min-height: 30px;
  max-width: none !important;
  border: 1px solid var(--o2o-border) !important;
  border-radius: var(--o2o-radius-sm) !important;
  background: var(--o2o-surface) !important;
  color: var(--o2o-text) !important;
  padding: 4px 7px !important;
}

#pc_sptime,
#nowtime {
  display: inline-block;
  margin-top: var(--o2o-space-1);
  margin-right: var(--o2o-space-2);
  color: var(--o2o-text);
  font-size: 15px;
  font-family: 'DM Mono', 'Consolas', var(--o2o-font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}

#psje {
  display: block;
  margin: var(--o2o-space-2);
  padding: 7px 9px;
  border: 1px solid rgba(14, 116, 144, 0.25);
  border-radius: var(--o2o-radius-md);
  background: var(--o2o-info-soft);
  color: var(--o2o-info);
  font-weight: 700;
}

#rightlsdtitle {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid var(--o2o-border);
  border-bottom: 1px solid var(--o2o-border);
  background: var(--o2o-surface-2);
}

#rightlsdtitle .order_tr_color {
  height: 32px;
  color: var(--o2o-muted);
  font-size: 12px;
  font-weight: 750;
}

#rightlsdtitle .title_qty,
#rightlsdtitle .title_units {
  text-align: center;
}

#rightlsdtitle .title_name {
  padding-left: var(--o2o-space-2);
  text-align: left;
}

#rightlsdtitle .title_amount {
  padding-right: var(--o2o-space-2);
  text-align: right;
}

#showrightlsd {
  min-height: 160px;
  background: var(--o2o-surface);
  color: var(--o2o-text);
}

#showrightlsd table {
  width: 100%;
  border-collapse: collapse;
}

#showrightlsd td {
  border-bottom: 1px solid rgba(215, 222, 232, 0.6);
  color: var(--o2o-text);
  line-height: 1.25;
}

#showrightsumlsd {
  min-height: var(--o2o-touch-md);
  padding: var(--o2o-space-2) var(--o2o-space-3);
  border-top: 1px solid var(--o2o-border);
  background: var(--o2o-surface-2);
  color: var(--o2o-text-strong);
  font-size: 14px;
  font-weight: 800;
}

/* Unified payment theme ownership */
body.responsive .payment-theme-main,
body.responsive .payment-theme-keypad,
body.responsive .payment-theme-actions {
  color: var(--o2o-pay-text);
}

body.responsive .payment-theme-main {
  background: var(--o2o-pay-page-bg) !important;
  color: var(--o2o-pay-text) !important;
}

body.responsive .payment-theme-main .payment-theme-surface,
body.responsive .payment-theme-main .cash_box_cashdatatable,
body.responsive .payment-theme-main #cashbox_hyzl_show {
  border: 1px solid var(--o2o-pay-border) !important;
  border-radius: 14px !important;
  background: var(--o2o-pay-panel-bg) !important;
  color: var(--o2o-pay-text) !important;
  box-shadow: var(--o2o-pay-shadow);
}

body.responsive .payment-theme-main .payment-theme-surface {
  padding: 12px 14px 14px !important;
  border-bottom-color: var(--o2o-pay-divider) !important;
}

body.responsive .payment-theme-main .item,
body.responsive .payment-theme-main .item_hyzl {
  border-bottom-color: var(--o2o-pay-divider) !important;
}

body.responsive .payment-theme-main .item label,
body.responsive .payment-theme-main .item_hyzl label {
  color: var(--o2o-pay-text-strong) !important;
}

body.responsive .payment-theme-main .item .cash_box_showdata,
body.responsive .payment-theme-main .cash_box_cashdata,
body.responsive .payment-theme-main .cashbox_hyzl {
  border: 1px solid var(--o2o-pay-border) !important;
  border-radius: 10px !important;
  background: var(--o2o-pay-input-bg) !important;
  color: var(--o2o-pay-text) !important;
  box-shadow: none !important;
}

body.responsive .payment-theme-main .cash_box_cashdatatable td,
body.responsive .payment-theme-main #cashbox_hyzl_show .item_hyzl {
  color: var(--o2o-pay-text) !important;
  border-bottom-color: var(--o2o-pay-divider) !important;
}

body.responsive .payment-theme-main #cashbox_realtotal,
body.responsive .payment-theme-main #cashbox_change {
  border: 1px solid var(--o2o-pay-emphasis-border) !important;
  border-radius: 12px !important;
  background: var(--o2o-pay-emphasis-bg) !important;
  color: var(--o2o-pay-emphasis-text) !important;
  box-shadow: none !important;
  font-weight: 800;
}

body.responsive .payment-theme-main #Gratuity,
body.responsive .payment-theme-main #cashbox_PayCard,
body.responsive .payment-theme-actions input[value="付款"],
body.responsive .payment-theme-actions input[value="Payment"] {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, var(--o2o-pay-action-bg) 0%, var(--o2o-pay-action-bg-hover) 100%) !important;
  color: var(--o2o-pay-action-text) !important;
  box-shadow: none !important;
}

body.theme-dark.responsive .payment-theme-main #Gratuity,
body.theme-dark.responsive .payment-theme-main #cashbox_PayCard,
body.theme-dark.responsive .payment-theme-actions input[value="付款"],
body.theme-dark.responsive .payment-theme-actions input[value="Payment"] {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order {
  background: var(--o2o-pay-page-bg) !important;
  border-left: 1px solid var(--o2o-pay-border) !important;
  color: var(--o2o-pay-text) !important;
}

body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order .content_box_right_dd_c,
body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order #rightlsdtitle,
body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order #showlsd,
body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order #sumlsd,
body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order #tablemenu.payment-theme-actions,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order .content_box_right_dd_c,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order #rightlsdtitle,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order #showlsd,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order #sumlsd,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order #tablemenu.payment-theme-actions {
  background: var(--o2o-pay-panel-bg) !important;
  border: 1px solid var(--o2o-pay-border) !important;
  color: var(--o2o-pay-text) !important;
  box-shadow: var(--o2o-pay-shadow);
}

body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order .content_box_right_dd_c,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order .content_box_right_dd_c {
  padding: 10px !important;
  border-radius: 14px !important;
}

body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order #rightlsdtitle,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order #rightlsdtitle {
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
}

body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order #rightlsdtitle td,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order #rightlsdtitle td,
body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order #orderedtablename,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order #orderedtablename {
  color: var(--o2o-pay-text-strong) !important;
}

body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order #showlsd,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order #showlsd {
  min-height: 300px;
  max-height: calc(100vh - 360px);
  overflow: auto;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order #showlsd table,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order #showlsd table {
  width: 100%;
  border-collapse: collapse;
}

body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order #showlsd td,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order #showlsd td {
  border-bottom: 1px solid var(--o2o-pay-divider) !important;
  color: var(--o2o-pay-text) !important;
}

body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order #sumlsd,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order #sumlsd {
  border-radius: 0 0 14px 14px !important;
  color: var(--o2o-pay-emphasis-text) !important;
  background: var(--o2o-pay-emphasis-bg) !important;
  border-color: var(--o2o-pay-emphasis-border) !important;
  font-weight: 800;
}

body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order #tablemenu.payment-theme-actions,
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order #tablemenu.payment-theme-actions,
body.responsive .payment-theme-actions#cashbox_menu {
  border-radius: 14px !important;
  padding: 8px !important;
}

body.responsive .payment-theme-main[style*="display:block"] ~ .payment-theme-order #tablemenu.payment-theme-actions input[onclick*="funmode"],
body.responsive .payment-theme-main[style*="display: block"] ~ .payment-theme-order #tablemenu.payment-theme-actions input[onclick*="funmode"],
body.responsive .payment-theme-actions#cashbox_menu input[onclick*="funmode"] {
  background: var(--o2o-pay-panel-bg-2) !important;
  border: 1px solid var(--o2o-pay-border) !important;
  color: var(--o2o-pay-text-strong) !important;
}

body.responsive #keypad.payment-theme-keypad,
body.responsive #allkeypad.payment-theme-keypad {
  color: var(--o2o-pay-text) !important;
}

body.responsive #allkeypad.payment-theme-keypad {
  background: var(--o2o-pay-panel-bg) !important;
  border: 1px solid var(--o2o-pay-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--o2o-pay-shadow);
}

body.responsive #keypad.payment-theme-keypad input[type="button"],
body.responsive #allkeypad.payment-theme-keypad input[type="button"] {
  background-image: none !important;
  background-color: var(--o2o-pay-key-bg) !important;
  color: var(--o2o-pay-key-text) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
}

body.theme-dark.responsive #keypad.payment-theme-keypad input[type="button"],
body.theme-dark.responsive #allkeypad.payment-theme-keypad input[type="button"] {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.responsive #allkeypad.payment-theme-keypad input[value=""] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 0.3;
}

/* Upload screens */
body > .container {
  width: min(100%, 800px);
  min-height: 100vh;
  border-radius: 0;
  background: var(--o2o-surface);
  box-shadow: none;
}

body > .container h2 {
  color: var(--o2o-text-strong);
  font-weight: 650;
  line-height: 1.25;
}

.upload-area {
  border-color: var(--o2o-border-strong) !important;
  border-radius: var(--o2o-radius-lg);
  background: var(--o2o-surface-2);
  color: var(--o2o-text);
  transition: border-color var(--o2o-transition), background-color var(--o2o-transition), box-shadow var(--o2o-transition);
}

.upload-area:hover,
.upload-area.dragover {
  border-color: var(--o2o-primary) !important;
  background: var(--o2o-primary-soft) !important;
  box-shadow: 0 0 0 3px var(--o2o-focus);
}

.upload-icon {
  color: var(--o2o-primary) !important;
}

#merchantId,
#firstLang {
  width: 100% !important;
  min-height: var(--o2o-touch-md);
  border: 1px solid var(--o2o-border-strong) !important;
  border-radius: var(--o2o-radius-md) !important;
  background: var(--o2o-surface) !important;
  color: var(--o2o-text) !important;
  padding: 10px 12px !important;
}

.upload-btn {
  min-height: var(--o2o-touch-md);
  border-radius: var(--o2o-radius-md) !important;
  background: var(--o2o-primary) !important;
  box-shadow: var(--o2o-shadow-sm);
}

.upload-btn:hover {
  background: var(--o2o-primary-strong) !important;
}

.upload-btn:disabled {
  background: var(--o2o-surface-3) !important;
  color: var(--o2o-muted) !important;
}

.progress-bar {
  height: 18px;
  border-radius: 999px;
  background: var(--o2o-surface-3);
}

.progress-bar .progress {
  border-radius: 999px;
  background: var(--o2o-success);
}

.result,
.stats {
  border-radius: var(--o2o-radius-md);
}

.result.success {
  border-color: rgba(22, 128, 60, 0.35);
  background: var(--o2o-success-soft);
  color: var(--o2o-success);
}

.result.error {
  border-color: rgba(180, 35, 24, 0.35);
  background: var(--o2o-danger-soft);
  color: var(--o2o-danger);
}

.result.info {
  border-color: rgba(14, 116, 144, 0.35);
  background: var(--o2o-info-soft);
  color: var(--o2o-info);
}

.stats {
  border: 1px solid var(--o2o-border);
  background: var(--o2o-surface-2);
  color: var(--o2o-text);
}

@media (max-width: 700px) {
  body > .container {
    padding: var(--o2o-space-4);
  }

  .upload-area {
    padding: var(--o2o-space-6) var(--o2o-space-4);
  }

  #float_btns {
    right: 8px !important;
  }
}

@media (max-width: 480px) {
  .top-controls {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px);
    justify-content: flex-end;
    gap: 8px !important;
  }

  .top-controls .lang-btn {
    max-width: 92px;
    padding: 6px 8px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-controls .lang-flag {
    display: none;
  }
}

/* ============================================================================
   O2OMEAL UI UPGRADE — Editorial Luxury Override Layer
   版本: 2026-04-23 v1
   影响范围: 仅 CSS，不动 PHP / HTML / JS / 业务逻辑
   回滚方式: 在任意条规则前加 slash-star，规则结束后加 star-slash 即可禁用
   分 3 个 Tier，每个 Tier 独立可切换
   =========================================================================== */


/* ───────────────────────────────────────────────────────────
   TIER 1 — 零风险视觉清理（可直接上线）
   #1 #2 #3 #4 #5 #7 #11 #12 #14 #15 #16 #18
   ─────────────────────────────────────────────────────────── */

/* #1 登录装饰层砍到 2 层（原 6 层：网格/凤凰/粒子/浮字 全隐藏） */
.bg-pattern,
.phoenix-silhouette,
.floating-particles,
.float-text {
  display: none !important;
}

/* #2 登录主按钮关闭永动闪光 */
.k2-button-style-a-green {
  animation: none !important;
  background: linear-gradient(135deg, #B8944A 0%, #D4A96A 50%, #B8944A 100%) !important;
}
.k2-button-style-a-green:hover {
  background: linear-gradient(135deg, #C9A05A 0%, #E8C88A 50%, #C9A05A 100%) !important;
}

/* #3 登录页字距回到舒适区（原 14px / 10px / 3px 全部过宽） */
.logo-text-main { letter-spacing: 8px !important; }
.logo-text-en   { letter-spacing: 6px !important; }
.k2-button      { letter-spacing: 1px !important; }

/* #4 登录卡阴影：纯黑 → 暖金调 */
#loginCard {
  box-shadow:
    0 30px 60px -20px rgba(20, 14, 6, 0.5),
    0 0 80px rgba(212, 169, 106, 0.08),
    inset 0 1px 0 rgba(245, 223, 176, 0.08) !important;
}

/* #5 登录背景色 #0A0A0A → 暖黑（AI 设计指纹 → 品牌偏色） */
:root {
  --bg-primary: #0D0B07;
  --bg-secondary: #15110B;
}

/* #7 撤销 — #float_btns > div 由 TIER 14 #43 用显式白底处理（跨主题一致） */

/* #11 主题/语言图标描边细化（粗描边 → Phosphor Light 感） */
.theme-btn svg,
.lang-btn svg {
  stroke-width: 1.25 !important;
}

/* #12 登录错误提示：中国红品牌色 + 抖动物理反馈 */
#login-error {
  background: linear-gradient(135deg, rgba(139, 28, 28, 0.12), rgba(166, 44, 44, 0.08)) !important;
  border: 1px solid rgba(166, 44, 44, 0.35) !important;
  color: #E6A0A0 !important;
  backdrop-filter: blur(10px);
}
#login-error.visible {
  animation: o2oShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes o2oShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* #14 POS 订单行 hover / 选中反馈 */
#showrightlsd tr {
  transition: background 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
#showrightlsd tr:hover td {
  background: var(--o2o-primary-soft);
}
#showrightlsd tr.selected td {
  background: var(--o2o-primary-soft);
  box-shadow: inset 3px 0 0 var(--o2o-primary);
}

/* #15 POS 合计区：金色顶边线 + 衬线 + 宽字距，提升信息层级 */
#showrightsumlsd {
  border-top: 2px solid var(--o2o-primary) !important;
  background: linear-gradient(180deg, var(--o2o-primary-soft), var(--o2o-surface-2)) !important;
  font-family: 'Playfair Display', 'Noto Serif SC', serif;
  letter-spacing: 2px;
  font-size: 16px !important;
}

/* #16 POS 按钮：纯黑阴影 → 暖色有色阴影 */
#spmenu .order_bt input[type="button"],
#tablemenu .order_bt input[type="button"],
.menu-but_new {
  box-shadow:
    0 2px 6px rgba(20, 14, 6, 0.25),
    inset 0 1px 0 rgba(245, 223, 176, 0.08) !important;
}

/* #18 按下物理感（按钮微缩 scale 0.97） */
input[type="button"]:active,
button:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}


/* ───────────────────────────────────────────────────────────
   TIER 2 — 品牌统一（游戏规则改变，建议 UAT 一次再推）
   #6
   ─────────────────────────────────────────────────────────── */

/* #6 POS 全局 token：蓝色扁平 → 金色奢华（只作用于 body.responsive） */
body.responsive.theme-dark {
  --o2o-bg: #0D0B07;
  --o2o-surface: #15110B;
  --o2o-surface-2: #1E1810;
  --o2o-surface-3: #2A2218;
  --o2o-text: #F5F0E4;
  --o2o-text-strong: #FFFDE4;
  --o2o-muted: #9A8F7A;
  --o2o-border: rgba(212, 169, 106, 0.18);
  --o2o-border-strong: rgba(212, 169, 106, 0.38);
  --o2o-primary: #D4A96A;
  --o2o-primary-strong: #E8C88A;
  --o2o-primary-soft: rgba(212, 169, 106, 0.12);
  --o2o-focus: rgba(212, 169, 106, 0.35);
}
body.responsive:not(.theme-dark) {
  --o2o-bg: #F8F6F1;
  --o2o-surface: #FFFFFF;
  --o2o-surface-2: #EDEAE3;
  --o2o-surface-3: #E0DBCF;
  --o2o-text: #2C2620;
  --o2o-text-strong: #1A1510;
  --o2o-muted: #7A6E5A;
  --o2o-border: rgba(184, 148, 74, 0.22);
  --o2o-border-strong: rgba(184, 148, 74, 0.42);
  --o2o-primary: #B8944A;
  --o2o-primary-strong: #8B7030;
  --o2o-primary-soft: rgba(184, 148, 74, 0.10);
  --o2o-focus: rgba(184, 148, 74, 0.32);
}


/* #21 去除 #psje 青色胶囊底框（原 overrides.css:324 用 info-soft 青色，与金色主题冲突） */
#psje {
  background: transparent !important;
  border: 0 !important;
  color: var(--o2o-text-strong) !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  font-weight: 600 !important;
}

/* #6b cashbox 独立 token 系统也切金色（补 #6 漏洞，实测截图发现） */
body.responsive.theme-dark {
  --o2o-cashbox-main-bg: #1E1810;
  --o2o-cashbox-divider: rgba(212, 169, 106, 0.18);
  --o2o-cashbox-label: #C9B89A;
  --o2o-cashbox-field-bg: #15110B;
  --o2o-cashbox-field-border: rgba(212, 169, 106, 0.28);
  --o2o-cashbox-field-text: #F5F0E4;
  --o2o-cashbox-card-bg: #1A1510;
  --o2o-cashbox-card-border: rgba(212, 169, 106, 0.22);
  --o2o-cashbox-card-text: #F5F0E4;
  --o2o-cashbox-shell-bg: rgba(26, 21, 16, 0.82);
  --o2o-cashbox-shell-border: rgba(212, 169, 106, 0.28);
  --o2o-cashbox-shell-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  --o2o-cashbox-emphasis-bg: #D4A96A;
  --o2o-cashbox-emphasis-border: #B8944A;
  --o2o-cashbox-emphasis-text: #0D0B07;
}
body.responsive:not(.theme-dark) {
  --o2o-cashbox-main-bg: #F8F6F1;
  --o2o-cashbox-divider: rgba(184, 148, 74, 0.22);
  --o2o-cashbox-label: #8B7030;
  --o2o-cashbox-field-bg: #FFFFFF;
  --o2o-cashbox-field-border: rgba(184, 148, 74, 0.32);
  --o2o-cashbox-field-text: #2C2620;
  --o2o-cashbox-card-bg: #FFFFFF;
  --o2o-cashbox-card-border: rgba(184, 148, 74, 0.25);
  --o2o-cashbox-card-text: #2C2620;
  --o2o-cashbox-shell-bg: rgba(255, 255, 255, 0.72);
  --o2o-cashbox-shell-border: rgba(184, 148, 74, 0.42);
  --o2o-cashbox-shell-shadow: 0 18px 36px rgba(139, 112, 48, 0.15);
  --o2o-cashbox-emphasis-bg: #FFF7E6;
  --o2o-cashbox-emphasis-border: rgba(184, 148, 74, 0.5);
  --o2o-cashbox-emphasis-text: #8B7030;
}


/* ───────────────────────────────────────────────────────────
   TIER 3 — 质感升级（视觉微调，小概率瑕疵可单条回滚）
   #8 #9 #10 #13 #17 #19 #20
   ─────────────────────────────────────────────────────────── */

/* #8 登录卡 Double-Bezel 外壳（若父容器有 overflow:hidden 外环会被裁） */
#loginCard {
  position: relative;
  border-radius: 24px !important;
}
#loginCard::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 32px;
  border: 1px solid rgba(212, 169, 106, 0.12);
  pointer-events: none;
  z-index: -1;
}

/* #9 登录按钮 Button-in-Button 箭头（中文"登录"OK；英文若挤注释本条） */
#submitBtn {
  position: relative;
  padding-right: 60px !important;
}
#submitBtn::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center / 16px,
    rgba(10, 10, 10, 0.15);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
#submitBtn:hover::after {
  transform: translateY(-50%) translateX(3px);
}

/* #10 登录页胶片颗粒（限定 login 页，避免干扰 POS 弹窗） */
body:has(#loginCard)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9'/><feColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.72 0 0 0 0 0.47 0 0 0 0.8 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* #13 POS 数字列 tabular-nums + DM Mono（中文自动 fallback） */
#showrightlsd .title_amount,
#showrightsumlsd,
#psje,
#cashbox_realtotal,
#cashbox_change,
.cash_box_showdata {
  font-family: 'DM Mono', 'Consolas', var(--o2o-font-sans) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* #17 全局过渡曲线统一（只影响已声明 transition 的元素） */
* {
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* #19 键盘按键变大易点（矮屏自动回退原尺寸） */
.keypadbut {
  width: 72px !important;
  height: 64px !important;
  font-size: 22px !important;
  font-family: 'DM Mono', monospace !important;
}
#keypad table {
  border-spacing: 8px !important;
}
@media (max-height: 700px) {
  .keypadbut {
    width: 60px !important;
    height: 50px !important;
    font-size: 18px !important;
  }
  #keypad table {
    border-spacing: 4px !important;
  }
}

/* #20 POS 桌台标题 Eyebrow 小标签 — 已撤销
   原因: #showtablename 在 ipad.css:1794 是 float:left，display:block 的 ::before
         会撑高浮动元素，与 #orderedtablename / Staff / 日期 挤压叠加
   若未来想保留 eyebrow，需改成 absolute 定位或放到其父容器上 */


/* ───────────────────────────────────────────────────────────
   TIER 4 — 全局加粗 + 订单/合计字号档位切换
   #22 全局加粗（body * 600；h*/b/strong/关键数字 700）
   #23 字号档位（data-fs="s|m|l|xl"，m 为默认不加规则）
   ─────────────────────────────────────────────────────────── */

/* #22 全局加粗 */
body,
body input,
body button,
body select,
body textarea,
body td,
body th,
body label,
body span,
body div,
body p,
body a {
  font-weight: 600 !important;
}
body h1, body h2, body h3, body h4, body h5, body h6,
body b, body strong,
.title_amount, .title_name, .title_qty, .title_units,
#orderedtablename, #showinputno, #showtablename,
#showrightsumlsd, #sumlsd,
#psje, #cashbox_realtotal, #cashbox_change,
.logo-text-main, .logo-text-en {
  font-weight: 700 !important;
}

/* #23 字号档位 — 只作用于订单列 + 合计区，"m" 是默认不声明 */

/* S — 紧凑 */
html[data-fs="s"] #showrightlsd,
html[data-fs="s"] #showrightlsd td,
html[data-fs="s"] #showlsd,
html[data-fs="s"] #showlsd td {
  font-size: 12px !important;
  line-height: 1.3 !important;
}
html[data-fs="s"] #showrightsumlsd,
html[data-fs="s"] #sumlsd,
html[data-fs="s"] #psje,
html[data-fs="s"] #cashbox_realtotal,
html[data-fs="s"] #cashbox_change {
  font-size: 14px !important;
}

/* L — 放大 */
html[data-fs="l"] #showrightlsd,
html[data-fs="l"] #showrightlsd td,
html[data-fs="l"] #showlsd,
html[data-fs="l"] #showlsd td {
  font-size: 16px !important;
  line-height: 1.45 !important;
}
html[data-fs="l"] #showrightsumlsd,
html[data-fs="l"] #sumlsd,
html[data-fs="l"] #psje,
html[data-fs="l"] #cashbox_realtotal,
html[data-fs="l"] #cashbox_change {
  font-size: 20px !important;
}

/* XL — 特大（远距离看清） */
html[data-fs="xl"] #showrightlsd,
html[data-fs="xl"] #showrightlsd td,
html[data-fs="xl"] #showlsd,
html[data-fs="xl"] #showlsd td {
  font-size: 19px !important;
  line-height: 1.5 !important;
}
html[data-fs="xl"] #showrightsumlsd,
html[data-fs="xl"] #sumlsd,
html[data-fs="xl"] #psje,
html[data-fs="xl"] #cashbox_realtotal,
html[data-fs="xl"] #cashbox_change {
  font-size: 24px !important;
}

/* 字号按钮样式（和 EN / ☼ 同款）— 交给 TIER 14 #43 管理 */
#fs_btn {
  cursor: pointer;
  user-select: none;
}



/* ───────────────────────────────────────────────────────────
   TIER 5 — 分类按钮 + 顶部 tab 的 active/inactive 区分
   #24 左侧分类 menu-but_new：ghost 基调，JS 点击后金边 = active
   #25 顶部 Restaurant / Takeaway tab：底下划线式
   ─────────────────────────────────────────────────────────── */

/* #24 左侧分类按钮 ghost 化（压倒 PHP 内联 webkit-gradient 褐色底）
   修订: 描边/字色提浓，避免在浅底上看不见 */
.menu-but_new {
  background: var(--o2o-surface) !important;
  background-image: none !important;
  border: 1.5px solid var(--o2o-border-strong) !important;
  color: var(--o2o-text-strong) !important;
  box-shadow: 0 1px 2px rgba(20, 14, 6, 0.08) !important;
  text-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  transition:
    background-color 150ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 150ms cubic-bezier(0.32, 0.72, 0, 1),
    color 150ms cubic-bezier(0.32, 0.72, 0, 1);
}

.menu-but_new:hover {
  background: var(--o2o-primary-soft) !important;
  border-color: var(--o2o-primary) !important;
}

/* 当 butclick() 把 border 改成金色 = 当前选中分类 */
.menu-but_new[style*="#d4a96a"],
.menu-but_new[style*="#D4A96A"],
.menu-but_new[style*="212, 169, 106"],
.menu-but_new[style*="212,169,106"] {
  background: linear-gradient(90deg, var(--o2o-primary-soft), var(--o2o-surface)) !important;
  border: 1.5px solid var(--o2o-primary) !important;
  color: var(--o2o-text-strong) !important;
  box-shadow: inset 3px 0 0 var(--o2o-primary), 0 2px 6px rgba(212, 169, 106, 0.25) !important;
  font-weight: 700 !important;
}

/* #25 顶部 Restaurant / Takeaway tab（#header_inner nav）
   修订: 保留原 height:40px 不动 — JS 里 $("#header_inner").height() 用于
   slide_height / page_height / lsdheight 计算（js/index.php:1236/1369/8937），
   改了会把 #article_inner 的可见高度算错，中间塌陷空白 */
#header_inner {
  background: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid var(--o2o-border) !important;
}

#header_inner nav ul li a {
  color: var(--o2o-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  border-bottom: 2px solid transparent !important;
  transition:
    color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    background-color 160ms cubic-bezier(0.32, 0.72, 0, 1);
  text-decoration: none !important;
}

#header_inner nav ul li:hover a {
  color: var(--o2o-primary-strong) !important;
  background: var(--o2o-primary-soft) !important;
}

#header_inner nav ul li:active a,
#header_inner nav ul li:focus-within a {
  color: var(--o2o-primary-strong) !important;
  border-bottom-color: var(--o2o-primary) !important;
}



/* ───────────────────────────────────────────────────────────
   TIER 6 — 商品卡层级 + 底部按钮主次
   #26 商品卡：菜名正常 / 价格放大金色 / 已点数量金色 pill 徽章
   #27 底部按钮条：次要按钮 ghost 化，Send Order 为实心金色 CTA
   ─────────────────────────────────────────────────────────── */

/* #26 商品卡（选择器来源：js/WebSQL.php:261）
   .k2-button-style-menu = 卡片 li
   .spda_wrapper_but_li_1_0 = 菜名
   .spda_wrapper_jedw = 价格
   .spda_wrapper_order_sl = 已点数量徽章 */

.k2-button-style-menu {
  position: relative;
  transition:
    transform 180ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 180ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 180ms cubic-bezier(0.32, 0.72, 0, 1);
}
.k2-button-style-menu:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(20, 14, 6, 0.15),
              inset 0 1px 0 rgba(245, 223, 176, 0.12) !important;
}

/* 菜名：可读优先 */
.spda_wrapper_but_li_1_0 {
  font-weight: 600 !important;
  color: var(--o2o-text-strong) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.1px;
}

/* 价格：1.25x + 金色 + 等宽数字（压倒 JS 内联的 FONT-SIZE:12px） */
.spda_wrapper_jedw,
.but_nopicstyle.spda_wrapper_jedw {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--o2o-primary-strong) !important;
  font-family: 'DM Mono', 'Consolas', var(--o2o-font-sans) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px !important;
}

/* 已点数量徽章：金色小 pill */
.spda_wrapper_order_sl {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: var(--o2o-primary) !important;
  color: #0D0B07 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  box-shadow: 0 2px 6px rgba(212, 169, 106, 0.38);
}


/* #27 底部按钮条分主次 */

/* 容器：flex 排列
   修订: 只作用于 #spmenu，不覆盖 #tablemenu 避免与 JS 的 display:none 冲突 */
#spmenu > span.order_bt {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}

/* 次级按钮（数量/改价/烹调方法等）→ ghost 化
   ** 注意：按 onclick 匹配的特定语义色（在 #6 + #11 里）仍保留，
   ** 这里只重定义"未被特定色规则匹配"的 .k2-button-style-a-b 默认态 */
#spmenu > span.order_bt input[type="button"].k2-button-style-a-b,
#spmenu > span.order_bt input[type="button"].k2-button-style-a-z {
  background: transparent !important;
  border: 1.5px solid rgba(212, 169, 106, 0.30) !important;
  color: var(--o2o-primary-strong) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: none !important;
  transition:
    background 150ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 150ms cubic-bezier(0.32, 0.72, 0, 1);
}
#spmenu > span.order_bt input[type="button"].k2-button-style-a-b:hover,
#spmenu > span.order_bt input[type="button"].k2-button-style-a-z:hover {
  background: var(--o2o-primary-soft) !important;
  border-color: var(--o2o-primary) !important;
  color: var(--o2o-text-strong) !important;
}

/* 主 CTA — Send Order（.k2-button-style-a-g）— 金色实心大按钮，最右 */
#spmenu > span.order_bt input[type="button"].k2-button-style-a-g,
#spmenu > span.order_bt input[type="button"][onclick*="order_copy('1')"] {
  background: linear-gradient(135deg, #B8944A 0%, #D4A96A 50%, #B8944A 100%) !important;
  color: #0D0B07 !important;
  border: 0 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
  min-width: 130px !important;
  height: 62px !important;
  padding: 0 20px !important;
  box-shadow: 0 6px 16px rgba(212, 169, 106, 0.4) !important;
  order: 99 !important;
  margin-left: auto !important;
}
#spmenu > span.order_bt input[type="button"].k2-button-style-a-g:hover,
#spmenu > span.order_bt input[type="button"][onclick*="order_copy('1')"]:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* 返回/取消按钮（.k2-button-style-a）→ 红调 ghost */
#spmenu > span.order_bt input[type="button"].k2-button-style-a {
  background: transparent !important;
  border: 1.5px solid rgba(180, 35, 24, 0.35) !important;
  color: var(--o2o-danger) !important;
  font-weight: 600 !important;
}
#spmenu > span.order_bt input[type="button"].k2-button-style-a:hover {
  background: var(--o2o-danger-soft) !important;
  border-color: var(--o2o-danger) !important;
}



/* ───────────────────────────────────────────────────────────
   TIER 7 — 订单侧栏精修（仅字体/颜色，不动任何尺寸以避免 JS 布局计算出错）
   #28 空订单状态提示
   #29 Subtotal / Total 层级（Total = 最后一行，放大金色）
   #30 列头 eyebrow 大写小号样式
   ─────────────────────────────────────────────────────────── */

/* #28 空订单状态：#showrightlsd 无内容时显示提示 */
#showrightlsd:empty::before {
  content: '尚未下单\A\A 点击左侧菜品开始';
  display: block;
  white-space: pre-line;
  text-align: center;
  color: var(--o2o-muted);
  font-size: 13px;
  line-height: 2;
  padding: 60px 20px;
  letter-spacing: 1px;
  opacity: 0.7;
}

/* #29 Subtotal / Total 层级
   从 js/WebSQL.php:1172 的模板看，sumlsd 里是 <table><tr><td colspan=2>Subtotal</td><td align=right>£...</td></tr>
   通常最后一行是 Total / 合计，放大 + 金色 */
#showrightsumlsd table {
  margin: 0 !important;
}
#showrightsumlsd table tr td {
  line-height: 1.6 !important;
  padding: 4px 8px !important;
}

/* 非最后一行（Subtotal、Pre-deposit、Balance 等）= 次要信息 */
#showrightsumlsd table tr:not(:last-child) td {
  font-size: 12px !important;
  color: var(--o2o-muted) !important;
  font-weight: 600 !important;
  font-family: 'DM Mono', 'Consolas', var(--o2o-font-sans) !important;
  font-variant-numeric: tabular-nums;
}

/* 最后一行 = Total / 合计（最重要） */
#showrightsumlsd table tr:last-child td {
  font-size: 18px !important;
  color: var(--o2o-primary-strong) !important;
  font-weight: 800 !important;
  font-family: 'DM Mono', 'Consolas', var(--o2o-font-sans) !important;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--o2o-border) !important;
  padding-top: 8px !important;
  padding-bottom: 6px !important;
}

/* #30 订单列头 eyebrow 风格（数量 / 商品名 / 单位 / 金额） */
#rightlsdtitle .order_tr_color {
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  color: var(--o2o-muted) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-family: 'DM Mono', 'Consolas', var(--o2o-font-sans) !important;
}



/* ───────────────────────────────────────────────────────────
   TIER 8 — 菜品卡上下双行 + 字体放大 + 分类可读性
   #31 菜品卡：名字顶对齐、价格右下角放大金色
   #32 左侧分类字号+反馈强化（不改尺寸避开 JS 高度计算）
   ─────────────────────────────────────────────────────────── */

/* #31 菜品卡片：两行布局
   源码参考 js/WebSQL.php:261 — JS 给菜名 + 价格都内联 margin-top:39px 居中，
   这里用绝对定位把价格钉到右下，菜名顶对齐，信息层级立刻清晰 */

/* 强制父容器 flex-wrap：原 li { float:left } + 父 white-space:nowrap 导致卡片不换行 */
#scroller > ul,
#article_inner > ul,
#showspda > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  white-space: normal !important;
  width: 100% !important;
  list-style: none !important;
  padding: 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 菜品卡：flex 基线 = (100% - 5 个 gap) / 6，压过 float:left 和内联 width:373px */
li.k2-button-style-menu,
ul > li.k2-button-style-menu,
#scroller li.k2-button-style-menu,
#article_inner li.k2-button-style-menu {
  flex: 0 0 calc((100% - 40px) / 6) !important;
  width: calc((100% - 40px) / 6) !important;
  min-width: 0 !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.k2-button-style-menu {
  position: relative !important;
  padding: 14px 14px 44px 14px !important;
  min-height: 130px !important;
  height: auto !important;
  overflow: visible !important;
  background: var(--o2o-surface) !important;
  border: 1px solid var(--o2o-border) !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  transition:
    transform 180ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 180ms,
    box-shadow 180ms,
    background 180ms;
}

.k2-button-style-menu:hover {
  transform: translateY(-2px);
  border-color: var(--o2o-primary) !important;
  background: var(--o2o-primary-soft) !important;
  box-shadow: 0 8px 18px rgba(20, 14, 6, 0.12) !important;
}

/* 菜名：顶部对齐，17px 大字
   压过内联 margin-top:39px + FONT-SIZE:Xpx
   移除 line-clamp 让全名可见，卡片允许长高 */
.spda_wrapper_but_li_1_0 {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  color: var(--o2o-text-strong) !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 价格：右下角绝对定位，17px 金色 DM Mono
   压过内联 float:right + margin-top:39px + FONT-SIZE:Xpx */
.spda_wrapper_jedw,
.but_nopicstyle.spda_wrapper_jedw {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--o2o-primary-strong) !important;
  font-family: 'DM Mono', 'Consolas', var(--o2o-font-sans) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px !important;
  line-height: 1 !important;
}

/* 已点数量徽章：左上角金色小 pill（覆盖 #26 的样式略微微调） */
.spda_wrapper_order_sl {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  margin: 0 !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: var(--o2o-primary) !important;
  color: #0D0B07 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(212, 169, 106, 0.4);
}


/* #32 左侧分类按钮字号+反馈（只改字，不动高/宽/margin） */
.menu-but_new {
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.4px !important;
}



/* ───────────────────────────────────────────────────────────
   TIER 9 — 菜品卡正确选择器（通过 Chrome DevTools 实测确认）

   ⚠️ 之前 TIER 6/7/8 里用的 .k2-button-style-menu 和 .spda_wrapper_but_li_1_0
      实际在当前 POS 页面**根本不存在**！那些选择器只在旧的 PicOrder 分支出现，
      真实 UI 用的是：
        .spda-button-style  — 菜品卡按钮（BUTTON 标签）
        .pc_spda_ul_li_1    — 菜名 SPAN
        .slide              — 菜品卡父容器（不是 <ul>）
        li.qrorder_fldl     — 左侧分类按钮（不是 .menu-but_new）

   TIER 9 用真实选择器重做。
   ─────────────────────────────────────────────────────────── */

/* #33 菜品卡父容器：flex-wrap + 顶对齐（阻止 stretch 把卡拉成高墙） */
.slide {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 8px !important;
  white-space: normal !important;
}

/* #34 菜品卡：强制 6 列（854.5px 容器 / 6 ≈ 135.7px 每卡） */
button.spda-button-style {
  flex: 0 0 calc((100% - 40px) / 6) !important;
  width: calc((100% - 40px) / 6) !important;
  height: 95px !important;
  padding: 10px !important;
  float: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: var(--o2o-surface) !important;
  background-image: none !important;
  border: 1px solid var(--o2o-border-strong) !important;
  border-radius: 8px !important;
  color: var(--o2o-text-strong) !important;
  align-self: flex-start !important;
  transition:
    transform 180ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 180ms,
    background 180ms;
}
button.spda-button-style:hover {
  transform: translateY(-2px);
  border-color: var(--o2o-primary) !important;
  background: var(--o2o-primary-soft) !important;
}

/* #35 菜名：压过内联 font-size: clamp(8px, 5vw, 16px) 的上限 */
.pc_spda_ul_li_1 {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: var(--o2o-text-strong) !important;
}

/* #36 左侧分类字号放大（真实选择器 li.qrorder_fldl）
   ⚠️ theme-day/eye: 白底深字（明亮主题卡片感）
   ⚠️ theme-dark: 温暖深色 #1E1810 + cream 白字（方案 A，对比度 ~11:1 舒适） */
li.qrorder_fldl,
body[class*="theme-"] li.qrorder_fldl {
  font-size: 19px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  position: relative !important;
  padding-left: 16px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #2c2c2c !important;
  border-bottom: 1px solid rgba(196, 166, 115, 0.2) !important;
  transition:
    transform 160ms cubic-bezier(0.32, 0.72, 0, 1),
    background-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    color 160ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* theme-dark 专属：温暖深色浮层 + cream 字 + 金色细边
   降低对比度从刺眼的 21:1 到舒适的 ~11:1 */
body.theme-dark li.qrorder_fldl {
  background: #1E1810 !important;
  background-color: #1E1810 !important;
  background-image: none !important;
  color: #FFFDE4 !important;
  border-bottom: 1px solid rgba(196, 166, 115, 0.25) !important;
}

/* #36a 分类左侧色块前缀 — 按 nth-child 循环 6 种柔和色相
   肌肉记忆锚点：服务员按颜色分组识别，比读字快 */
li.qrorder_fldl::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 2px;
  background: var(--o2o-border-strong);
  transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
li.qrorder_fldl:nth-child(6n+1)::before { background: #c8907a; }
li.qrorder_fldl:nth-child(6n+2)::before { background: #b8a472; }
li.qrorder_fldl:nth-child(6n+3)::before { background: #8ea87e; }
li.qrorder_fldl:nth-child(6n+4)::before { background: #7a9fa8; }
li.qrorder_fldl:nth-child(6n+5)::before { background: #9a8cb0; }
li.qrorder_fldl:nth-child(6n+6)::before { background: #c89a7a; }

/* #36b 选中态锚点化 — JS 选中后内联金色边框，借此识别
   实心金色渐变 + 白字高对比（跨主题一致） */
li.qrorder_fldl[style*="#d4a96a"]::before,
li.qrorder_fldl[style*="#D4A96A"]::before,
li.qrorder_fldl[style*="212, 169, 106"]::before,
li.qrorder_fldl[style*="212,169,106"]::before,
body[class*="theme-"] li.qrorder_fldl[style*="#d4a96a"]::before {
  width: 5px !important;
  top: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}

li.qrorder_fldl[style*="#d4a96a"],
li.qrorder_fldl[style*="#D4A96A"],
li.qrorder_fldl[style*="212, 169, 106"],
li.qrorder_fldl[style*="212,169,106"],
body[class*="theme-"] li.qrorder_fldl[style*="#d4a96a"],
body[class*="theme-"] li.qrorder_fldl[style*="#D4A96A"] {
  background: linear-gradient(90deg, #d4a96a 0%, #b8944a 100%) !important;
  background-color: #c4a673 !important;
  background-image: linear-gradient(90deg, #d4a96a 0%, #b8944a 100%) !important;
  color: #ffffff !important;
  transform: translateX(2px) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(212, 169, 106, 0.4) !important;
}

/* #36c 悬停反馈：色块变粗，整条金色微填充 */
li.qrorder_fldl:hover::before {
  width: 4px;
}
li.qrorder_fldl:hover,
body[class*="theme-"] li.qrorder_fldl:hover {
  background: rgba(212, 169, 106, 0.12) !important;
  background-color: rgba(212, 169, 106, 0.12) !important;
  color: #a88448 !important;
}

/* theme-dark 下 hover 用金色微亮底 + 金色字（避免回到白底突兀） */
body.theme-dark li.qrorder_fldl:hover {
  background: rgba(212, 169, 106, 0.18) !important;
  background-color: rgba(212, 169, 106, 0.18) !important;
  color: #f0d089 !important;
}

/* #37 £ 符号与价格数字统一样式（继承父元素 .pc_spda_ul_li_1 的 15px/700/深色） */
.currency_symbol_order {
  font-size: inherit !important;
  color: inherit !important;
  font-weight: inherit !important;
}



/* TIER 10 已撤销 — 用户要求复原底部按键原样（保留内联 webkit-gradient 褐色底） */


/* ───────────────────────────────────────────────────────────
   TIER 12 — 底部功能键：字号放大 + 语义分组间距
   DOM 顺序 (L→R):
     1. management  管理界面   ┐
     2. relogin     切换用户   ┘ 系统组
     3. cleartable  清台       ┐
     4. inputopen   开台       │ 桌台组
     5. drawcashgo  下班交款   ┘
     6. quickorder  快速点餐   ┐
     7. receipt     收据       │
     8. buybill     结帐买单   │ 出单组
     9. billprn     帐单打印   │
    10. pdqunlock   桌台解锁   ┘
   ⚠️ ipad-theme.css 用 !important + 高特异度压字号，需 #tc_menu 前缀
   ─────────────────────────────────────────────────────────── */

#tc_menu input.menubut,
body[class*="theme-"] #tc_menu input.menubut {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* 分组间距：每个新语义组第一个按钮左侧加 20px */
#tc_menu input#cleartable,
#tc_menu input#quickorder {
  margin-left: 20px !important;
}


/* ───────────────────────────────────────────────────────────
   TIER 13 — 桌台卡片排版 + 右上浮动按钮触控尺寸
   #42 桌台卡 button.showtablexxbutton — 字号/字重/状态色边框/统一宽
   #43 右上 A+/EN/☀ — 放大到 44×44 触控安全区
   ─────────────────────────────────────────────────────────── */

/* #42 桌台卡：
   结构限制：价格 "£xxx" 和时间 "hh:mm" 是裸文本节点（无 span），
   CSS 只能统一设置 button 默认字体，台号 .table_name 继续走独立规则 */
button.showtablexxbutton,
body[class*="theme-"] button.showtablexxbutton {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--o2o-text-strong) !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  border-width: 2px !important;            /* 1→2px：状态色更显眼 */
  border-style: solid !important;          /* 保留 inline 的 border-color */
  border-radius: 10px !important;
  width: 110px !important;                 /* 统一宽度（压过 inline 108/110/90） */
  min-height: 72px !important;
  height: auto !important;
  padding: 8px 6px !important;
  box-shadow: 0 1px 3px rgba(20, 14, 6, 0.08) !important;
  transition:
    transform 160ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

button.showtablexxbutton:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(20, 14, 6, 0.12) !important;
}

button.showtablexxbutton:active {
  transform: scale(0.98);
}

/* 台号：从 16px → 18px 更突出 */
button.showtablexxbutton .table_name {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--o2o-text-strong) !important;
  letter-spacing: 0.3px !important;
}

/* spx5px 是顶部 5px 占位 div，改成状态色指示条增强辨识 */
button.showtablexxbutton .spx5px {
  height: 4px !important;
  margin: -4px -6px 4px -6px !important;
  background: currentColor !important;
  opacity: 0.35;
  border-radius: 3px 3px 0 0 !important;
}


/* #43 右上浮动按钮 A+ / 中文 / ☀ — 与 header_inner（40px 高）同排对齐 */
#float_btns {
  top: 0 !important;
  height: 40px !important;
  align-items: center !important;
  display: flex !important;
}

#float_btns > div,
body[class*="theme-"] #float_btns > div {
  min-width: 44px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  line-height: 1 !important;
  /* 显式白底金边 — 不跟随主题 surface 变量 */
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #2c2c2c !important;
  border: 1.5px solid #c4a673 !important;
  box-shadow: 0 1px 2px rgba(20, 14, 6, 0.08) !important;
  transition:
    background 160ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 120ms !important;
}

#float_btns > div:hover {
  background: rgba(212, 169, 106, 0.1) !important;
  border-color: var(--o2o-primary) !important;
  color: var(--o2o-primary-strong) !important;
}

#float_btns > div:active {
  transform: scale(0.96);
}


/* ───────────────────────────────────────────────────────────
   TIER 14 — 右侧日期时间层级化 + 顶部 tab + 订单表头
   #44 #nowtime 三段分层：星期小灰、日期粗大、时间 tabular
   #45 顶部"堂食点餐/外卖点餐" tab 字号 + active 金下划线
   #46 订单表头：下 padding + 金色分隔线
   ─────────────────────────────────────────────────────────── */

/* #44 日期时间分层（需要 js/index.php:1545 输出 span 结构） */
#nowtime {
  font-size: 16px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.3px !important;
  display: flex !important;
  gap: 10px !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
}
#nowtime .nt-day {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--o2o-text-subtle, #8a7a5f) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
#nowtime .nt-date {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--o2o-text-strong) !important;
}
#nowtime .nt-time {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--o2o-primary-strong) !important;
  font-variant-numeric: tabular-nums !important;
  font-family: 'DM Mono', 'Consolas', ui-monospace, monospace !important;
}

/* #45 顶部 Restaurant / Takeaway nav（#header_inner） — 放大 + active 强化
   已在 TIER 5 #25 做过 ghost 基础，这里补字号和 active 态
   ⚠️ 修复: 17px font + 8px 上下 padding 超出 39px LI 高度导致溢出遮挡下方内容
       改用 line-height 居中，适配 40px header */
#header_inner nav ul li a,
body[class*="theme-"] #header_inner nav ul li a {
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 0 14px !important;
  /*
  line-height: 38px !important;
  */
  line-height: 20px !important;
  height: 38px !important;
  display: inline-block !important;
  letter-spacing: 0.3px !important;
  box-sizing: border-box !important;
}

/* active 态：JS 可能给 selected/active class 或 inline color */
#header_inner nav ul li.selected a,
#header_inner nav ul li.active a,
#header_inner nav ul li a[style*="color"],
#header_inner nav ul li:has(a[style*="color"]) a {
  color: var(--o2o-primary-strong) !important;
  border-bottom: 2px solid var(--o2o-primary) !important;
  background: var(--o2o-primary-soft) !important;
}

/* #46 订单表头（#rightlsdtitle）：金色分隔线强化 */
#rightlsdtitle,
table#rightlsdtitle.order_table {
  border-bottom: 2px solid var(--o2o-primary) !important;
  padding-bottom: 2px !important;
  margin-bottom: 4px !important;
}

#rightlsdtitle td,
#rightlsdtitle th {
  padding: 10px 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--o2o-text-strong) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}


/* ───────────────────────────────────────────────────────────
   TIER 15 — 点餐视图：子分类 pill + 主分类 pill 统一为 ghost
   源码 js/WebSQL.php:101/105/155 渲染结构：
     主分类: <button class="k2-button-b k2-button-l-b k2-button-style-fldl-b fldlbut-style menubut" style="background:-webkit-gradient(...)">
     子分类: <button class="flbut flbut-l flbut-sytyle-fl menubut flda-button-style" style="background:-webkit-gradient(...)">
   内联 webkit-gradient 颜色来自数据库 (colorstart/colorend)，
   多数是褐/黑暗色，和整体金色 ghost 风格脱节
   ─────────────────────────────────────────────────────────── */

/* #47 主分类 pill — ghost 金色
   ⚠️ 用 4 class 链式选择器 (特异度 0,0,4,1 = 41) 压过 ipad-theme.css
       的 .theme-dark input.k2-button-b (特异度 21 + !important)
       真实容器可能是 #menu_inner 或 #fldl，所以不靠父 ID
   ⚠️ 显式色值跨主题一致 */
button.fldlbut-style.menubut.k2-button-b.k2-button-l-b,
body[class*="theme-"] button.fldlbut-style.menubut.k2-button-b.k2-button-l-b {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid #c4a673 !important;
  border-radius: 10px !important;
  color: #2c2c2c !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 1px 2px rgba(20, 14, 6, 0.06) !important;
  transition:
    background 160ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 120ms !important;
}

button.fldlbut-style.menubut.k2-button-b.k2-button-l-b:hover,
body[class*="theme-"] button.fldlbut-style.menubut.k2-button-b.k2-button-l-b:hover {
  background: #f5ead0 !important;
  background-color: #f5ead0 !important;
  border-color: #a88448 !important;
  color: #2c2c2c !important;
}

button.fldlbut-style.menubut.k2-button-b.k2-button-l-b:active {
  transform: scale(0.97);
}

/* 选中态：JS 通过内联 style 添加金色边框 #d4a96a
   实心金色渐变 + 白字（高对比） */
button.fldlbut-style.menubut.k2-button-b.k2-button-l-b[style*="#d4a96a"],
button.fldlbut-style.menubut.k2-button-b.k2-button-l-b[style*="#D4A96A"],
button.fldlbut-style.menubut.k2-button-b.k2-button-l-b[style*="212, 169, 106"],
button.fldlbut-style.menubut.k2-button-b.k2-button-l-b[style*="212,169,106"],
body[class*="theme-"] button.fldlbut-style.menubut.k2-button-b.k2-button-l-b[style*="#d4a96a"],
body[class*="theme-"] button.fldlbut-style.menubut.k2-button-b.k2-button-l-b[style*="#D4A96A"] {
  background: linear-gradient(180deg, #d4a96a, #b8944a) !important;
  background-color: #c4a673 !important;
  background-image: linear-gradient(180deg, #d4a96a, #b8944a) !important;
  border: 1.5px solid #a88448 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2) !important;
  box-shadow: 0 3px 10px rgba(212, 169, 106, 0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* #48 子分类 pill（Seafood/Abalone/Lobster...） — ghost 金色胶囊，强制 6 列 */

/* 父容器 #showflda 改 flex 6 列换行 */
#showflda {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  white-space: normal !important;
  box-sizing: border-box !important;
  padding: 4px !important;
}

#showflda button.flda-button-style,
#showflda button.flbut.flda-button-style,
body[class*="theme-"] button.flda-button-style,
body[class*="theme-"] button.flbut.flda-button-style {
  /* 6 列：(100% - 5*8px gap) / 6 ≈ 135px */
  flex: 0 0 calc((100% - 40px) / 6) !important;
  width: calc((100% - 40px) / 6) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 64px !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  float: none !important;
  box-sizing: border-box !important;

  /* flex 居中 + 允许换行：让 "King Prawn" 这种自然两行居中显示 */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  background-color: var(--o2o-surface) !important;
  background-image: none !important;
  border: 2px solid var(--o2o-primary) !important;
  border-radius: 10px !important;
  color: var(--o2o-text-strong) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 6px rgba(212, 169, 106, 0.15) !important;
  letter-spacing: 0.2px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  transition:
    background-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 120ms !important;
}

#showflda button.flda-button-style:hover,
body[class*="theme-"] button.flda-button-style:hover {
  background-color: var(--o2o-primary-soft) !important;
  border-color: var(--o2o-primary-strong) !important;
  color: var(--o2o-text-strong) !important;
}

#showflda button.flda-button-style:active,
body[class*="theme-"] button.flda-button-style:active {
  transform: scale(0.96);
}

button.flda-button-style:hover {
  background: rgba(212, 169, 106, 0.1) !important;
  border-color: var(--o2o-primary) !important;
  color: var(--o2o-primary-strong) !important;
}

button.flda-button-style:active {
  transform: scale(0.97);
}

/* 选中态：JS 会给金色 border 或 background */
button.flda-button-style[style*="#d4a96a"],
button.flda-button-style[style*="#D4A96A"],
button.flda-button-style[style*="212, 169, 106"],
button.flda-button-style[style*="212,169,106"] {
  background: var(--o2o-primary) !important;
  border-color: var(--o2o-primary) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(212, 169, 106, 0.35) !important;
}


/* ───────────────────────────────────────────────────────────
   TIER 16 — 右侧订单面板底部 Subtotal / Total 强化
   Total 金额是订单面板最重要的视觉锚点，需要最大字号 */

/* 通用策略：定位 aside_inner 底部可能的金额区域
   使用 ID 通配 + class 通配捕获不同 POS 版本的命名差异 */
#aside_inner [id*="showtotal"],
#aside_inner [id*="hjje"],
#aside_inner [id*="allje"],
#aside_inner [id*="totalje"],
#aside_inner [id*="ys_je"],
#aside_inner [id*="ysje"],
#aside_inner .totaljine,
#aside_inner .total_amount {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--o2o-primary-strong) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.5px !important;
  font-family: 'DM Mono', 'Consolas', ui-monospace, monospace !important;
}

#aside_inner [id*="subtotal"],
#aside_inner [id*="xjsl"],
#aside_inner [id*="allsl"] {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--o2o-text) !important;
}


/* ───────────────────────────────────────────────────────────
   TIER 17 — 点餐视图底部 11 个功能键（真实类名 .menubut，不是 .menu-but_new）
   通过 Chrome MCP 实测 ID 映射：
     #uf_key_packprint        外卖(Pick-up)
     #uf_key_west_no_kp_saving 保存不打印(Save&Only)
     #newdish                 新菜
     #Mealperiod              餐段
     #toggle_keyboard         屏幕键盘
     #uf_key_change_kouwei    烹调方法
     #uf_key_sppageup/down    上/下一页
     #uf_key_west_saving      下单 ★ CTA
   ⚠️ ipad-theme.css 用 !important + `.theme-day input.menubut` (spec 21)，
       需要 #pc_ordermenu 前缀提高到 111 */

/* #50 #pc_ordermenu 内所有 input.menubut 统一 ghost 金边 */
#pc_ordermenu input.menubut,
body[class*="theme-"] #pc_ordermenu input.menubut {
  background: var(--o2o-surface) !important;
  background-image: none !important;
  border: 1.5px solid var(--o2o-border-strong) !important;
  border-radius: 10px !important;
  color: var(--o2o-text-strong) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 1px 2px rgba(20, 14, 6, 0.06) !important;
  letter-spacing: 0.2px !important;
  transition:
    background 160ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 120ms !important;
}

#pc_ordermenu input.menubut:hover {
  background: var(--o2o-primary-soft) !important;
  border-color: var(--o2o-primary) !important;
  color: var(--o2o-primary-strong) !important;
}

#pc_ordermenu input.menubut:active {
  transform: scale(0.97);
}

/* #51 下单 CTA — #uf_key_west_saving */
#pc_ordermenu input#uf_key_west_saving,
body[class*="theme-"] #pc_ordermenu input#uf_key_west_saving,
#pc_ordermenu input.menubut#uf_key_west_saving {
  background: var(--o2o-primary) !important;
  background-image: linear-gradient(180deg, #e2b97c, #c89a5c) !important;
  border: 1.5px solid var(--o2o-primary-strong) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 3px 10px rgba(212, 169, 106, 0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}

#pc_ordermenu input#uf_key_west_saving:hover {
  background-image: linear-gradient(180deg, #e8c38a, #d4a96a) !important;
  border-color: #a88448 !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(212, 169, 106, 0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* #52 Prev / Next（上一页/下一页）— 透明底 + 虚线边（导航类弱视觉） */
#pc_ordermenu input#uf_key_sppageup,
#pc_ordermenu input#uf_key_sppagedown {
  background: transparent !important;
  border-style: dashed !important;
  color: var(--o2o-text) !important;
  font-weight: 600 !important;
}

/* #53 分组间距：在语义分组起点按钮左侧加 20px
   分组逻辑：
     [外卖][保存不打印][新菜][餐段]          — 餐别/出单
     [屏幕键盘][烹调方法]                    — 输入/修改  ↵ Mealperiod 之后加 gap
     [上一页][下一页]                        — 导航       ↵ 烹调方法 之后加 gap
     [下单]                                  — CTA        ↵ 下一页 之后加 gap */
#pc_ordermenu input#toggle_keyboard,
#pc_ordermenu input#uf_key_sppageup,
#pc_ordermenu input#uf_key_west_saving {
  margin-left: 20px !important;
}

/* #54 加宽 Send Order 按钮避免 "Send / Order" 两行换行 */
#pc_ordermenu input#uf_key_west_saving {
  min-width: 108px !important;
  white-space: nowrap !important;
}

/* #55 右下 Enter 按钮（#but_enter）— 和 Send Order 区别开
   原样式内联有褐色渐变底，和 Send Order 视觉重复，改为 ghost 次级 */
input#but_enter,
input.but_enter,
body[class*="theme-"] input#but_enter {
  background: var(--o2o-surface) !important;
  background-image: none !important;
  border: 1.5px solid var(--o2o-border-strong) !important;
  border-radius: 8px !important;
  color: var(--o2o-text-strong) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 1px 2px rgba(20, 14, 6, 0.06) !important;
  transition:
    background 160ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 160ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

input#but_enter:hover {
  background: var(--o2o-primary-soft) !important;
  border-color: var(--o2o-primary) !important;
  color: var(--o2o-primary-strong) !important;
}


/* ───────────────────────────────────────────────────────────
   TIER 19 — Cooking Methods 面板（#dzzf）优化
   源码: index.php:2257 开始
   #58 烹饪要求输入框 #zzcl_kwname — 去黄色，主题化
   #59 .cookingmethodsbut 按钮规范化 48px + 10px radius
   #60 Sure 按钮 #clearcczl — 金色 CTA 突出
   #61 Cancel 按钮 #selectcczl — ghost 次级
   #62 数量 stepper（+1 / -1 / Modify quantity）视觉组合
   ─────────────────────────────────────────────────────────── */

/* #58 烹饪要求输入框 — 压过内联 color:#d9db50 丑陋黄 + theme-dark 下的深色 */
/*
input#zzcl_kwname,
#dzzf input#zzcl_kwname,
body[class*="theme-"] #dzzf input#zzcl_kwname {
  color: #2c2c2c !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 2px solid #c4a673 !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  transition: border-color 160ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

#dzzf input#zzcl_kwname:focus {
  border-bottom-color: #a88448 !important;
  outline: none !important;
  box-shadow: 0 1px 0 #a88448 !important;
}
*/

/* #59 #dzzf 内所有次级按钮统一 ghost 风格（不依赖主题变量）
   ⚠️ ipad-theme.css:113 用 .theme-day input.k2-button-style-a-b.k2-button-style-a-b
       双倍 class 技巧达特异度 41；#dzzf 前缀(111) 压过
   ⚠️ 不用 var(--o2o-surface) — 在 theme-dark 下该变量=深色导致按钮消失
       使用显式 #ffffff 保证三个主题下一致可见 */
/*
input.cookingmethodsbut,
#dzzf input.cookingmethodsbut,
#dzzf input[onclick*="backspace_kw"],
body[class*="theme-"] #dzzf input.cookingmethodsbut,
body[class*="theme-"] #dzzf input[onclick*="backspace_kw"] {
  height: 44px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid #c4a673 !important;
  border-radius: 8px !important;
  color: #2c2c2c !important;
  text-shadow: none !important;
  box-shadow: 0 1px 2px rgba(20, 14, 6, 0.08) !important;
  letter-spacing: 0 !important;
  margin: 0 3px !important;
  white-space: normal !important;
  line-height: 1.1 !important;
  transition:
    background 160ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 120ms !important;
}
*/

input.cookingmethodsbut:hover {
  background: var(--o2o-primary-soft) !important;
  border-color: var(--o2o-primary) !important;
  color: var(--o2o-primary-strong) !important;
}

input.cookingmethodsbut:active {
  transform: scale(0.97);
}

/* #60 Sure / 确定 CTA — 金色实心突出（#clearcczl） */
/*
input#clearcczl.k2-button-style-a,
#dzzf input#clearcczl,
#dzzf input#clearcczl.k2-button-style-a,
body[class*="theme-"] #dzzf input#clearcczl {
  height: 44px !important;
  background: var(--o2o-primary) !important;
  background-image: linear-gradient(180deg, #e2b97c, #c89a5c) !important;
  border: 1.5px solid var(--o2o-primary-strong) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 3px 10px rgba(212, 169, 106, 0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
  padding: 0 10px !important;
  transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

input#clearcczl:hover {
  background-image: linear-gradient(180deg, #e8c38a, #d4a96a) !important;
  border-color: #a88448 !important;
  box-shadow: 0 5px 14px rgba(212, 169, 106, 0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

input#clearcczl:active {
  transform: scale(0.97);
}
*/

/* #61 Cancel / 取消 — ghost 次级（#selectcczl）
   ⚠️ 显式 #ffffff 和 #c4a673 保证 theme-dark 下也是白底 */
/*
input#selectcczl,
#dzzf input#selectcczl,
body[class*="theme-"] #dzzf input#selectcczl {
  height: 44px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid #c4a673 !important;
  border-radius: 8px !important;
  color: #2c2c2c !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 1px 2px rgba(20, 14, 6, 0.08) !important;
  letter-spacing: 0.3px !important;
  padding: 0 10px !important;
}

input#selectcczl:hover {
  background: rgba(20, 14, 6, 0.04) !important;
  border-color: var(--o2o-text) !important;
}
*/

/* #62 数量 stepper — +1 / -1 组合视觉 */
input[id="change+1"],
input[id="change-1"] {
  min-width: 64px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}

input[id="change-1"] {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: 0 !important;
}

/* 黑夜主题 - #dzzf 面板 */
body.theme-dark #dzzf input {
  background-color: #333333 !important;
  color: #FFF !important;
  border: 1px solid rgba(212, 169, 106, 0.3) !important;
}

body.theme-dark #dzzf input#zzcl_kwname {
  background-color: #333333 !important;
  color: #FFF !important;
  border-bottom: 1px solid rgba(212, 169, 106, 0.3) !important;
}

body.theme-dark #dzzf .zzcl_show {
  color: #FFF !important;
}

body.theme-dark #dzzf input.k2-button,
body.theme-dark #dzzf input.k2-button-b,
body.theme-dark #dzzf input.k2-button-l-b,
body.theme-dark #dzzf input.k2-button-style-a-b {
  background-color: #333333 !important;
  color: #FFF !important;
  border: 1px solid rgba(212, 169, 106, 0.3) !important;
}
/*
body.theme-dark #dzzf input.k2-button-style-a-b.cookingmethodsbut {
  background: linear-gradient(135deg, #D4A96A, #B8944A) !important;
  color: #0A0A0A !important;
  font-weight: 600 !important;
}
*/
body.theme-dark #dzzf input#clearcczl {
  background: linear-gradient(135deg, #D4A96A, #B8944A) !important;
  color: #0A0A0A !important;
  border: 1px solid rgba(212, 169, 106, 0.4) !important;
}

body.theme-dark #dzzf input#selectcczl {
  background-color: #333333 !important;
  color: #FFF !important;
  border: 1px solid rgba(212, 169, 106, 0.3) !important;
}

input[id="change+1"] {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -1px !important;
}

/* #63 烹饪分类列表 li 背景黑色 #383639 去除
   ipad.css:216 将 .content_box_left_main_right_c_ul_showzzcl li 写死深灰
   改为显式白底金边，theme-dark 下也能正常显示 */
#dzzf .content_box_left_main_right_c_ul_showzzcl li,
body[class*="theme-"] #dzzf .content_box_left_main_right_c_ul_showzzcl li {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #c4a673 !important;
  border-radius: 8px !important;
  overflow: visible !important;
  margin-right: 4px !important;
  margin-bottom: 4px !important;
  transition:
    background-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 160ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

#dzzf .content_box_left_main_right_c_ul_showzzcl li:hover {
  background-color: #f5ead0 !important;
  border-color: #a88448 !important;
}

/* 烹饪分类列表容器（UL 和 父 TD/DIV）强制 transparent，
   避免 theme-dark 下 UL 父容器有深色底显现成黑色 bar
   ⚠️ 包含 table/tbody/tr/td/div/ul 所有非 li/button/input 中间层 */
#dzzf .content_box_left_main_right_c_ul_showzzcl,
#dzzf .content_box_left_main_right_c_showzzcl,
#dzzf #showcczl,
#dzzf #showcczl table,
#dzzf #showcczl tbody,
#dzzf #showcczl tr,
#dzzf #showcczl td,
#dzzf #showcczl div,
#dzzf #showcczl ul,
#dzzf ul.content_box_left_main_right_c_ul_showzzcl,
body[class*="theme-"] #dzzf #showcczl,
body[class*="theme-"] #dzzf #showcczl table,
body[class*="theme-"] #dzzf #showcczl tbody,
body[class*="theme-"] #dzzf #showcczl tr,
body[class*="theme-"] #dzzf #showcczl td,
body[class*="theme-"] #dzzf #showcczl div,
body[class*="theme-"] #dzzf #showcczl ul {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* #showcczl 和 #updatezzclmx 容器本身不要深色 */
#dzzf #showcczl,
#dzzf #updatezzclmx,
#dzzf #showzzclmx,
body[class*="theme-"] #dzzf #showcczl,
body[class*="theme-"] #dzzf #updatezzclmx {
  background: transparent !important;
  background-color: transparent !important;
}

/* #64 烹饪分类内部按钮 #showzzcl — 提高特异度压过 theme 规则 */
/*
#dzzf .content_box_left_main_right_c_ul_showzzcl li input,
#dzzf .content_box_left_main_right_c_ul_showzzcl li button,
body[class*="theme-"] #dzzf .content_box_left_main_right_c_ul_showzzcl li input,
body[class*="theme-"] #dzzf .content_box_left_main_right_c_ul_showzzcl li button {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  color: #2c2c2c !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  width: 100% !important;
  height: 44px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
*/
/* #65 #dzzf 整体容器背景 — 覆盖 ipad.css 786 的蓝色 (#8CAEEF)
   显式浅米色保证三个主题下面板始终可读（不跟随 dark 模式） */
#dzzf.content_box_left_main,
body[class*="theme-"] #dzzf.content_box_left_main {
  background: #f8f5ef !important;
  background-color: #f8f5ef !important;
  color: #2c2c2c !important;
  border-radius: 12px !important;
  padding: 16px !important;
  box-shadow: 0 4px 20px rgba(20, 14, 6, 0.15) !important;
}

/* #dzzf 内的所有标签文字（zzcl_show）在 dark 主题下可能是白色，强制深色 */
#windown-box,
#dzzf .zzcl_show,
#dzzf span.zzcl_show,
body[class*="theme-"] #dzzf .zzcl_show {
  color: var(--o2o-text-strong) !important;
}


/* ───────────────────────────────────────────────────────────
   TIER 20 — 已撤销
   之前: 强制 #cashbox + 所有子元素白底深字 + 强制覆盖 --o2o-pay-* 变量
   问题: theme-dark 下左侧 cashbox 是 cream 但右侧订单面板仍 dark，风格割裂
   用户要求: "让它与主题切换下呈现对应的效果" — 保留 o2omeal-ui-tokens.css
             中 --o2o-pay-* 的主题响应机制（day 浅/dark 深/eye 米色自动切换）
   ─────────────────────────────────────────────────────────── */

/* #77-#82 已撤销
   用户反馈: 激进的全主题 body/aside/showrightlsd 强制白底 + 所有文字深色规则
             导致 theme-dark 下订单列表菜品名看不到（白/白 或 其他色冲突）
   回滚到 TIER 20 #68-#76 仅 #cashbox 内部主题化的稳定状态 */

/* #66 菜品编号显示收小（#show_spbh 从 38px 到 24px）
   ⚠️ 使用 var(--o2o-text-strong) 随主题切换
       day: #0f172a (深色字) / dark: #ffffff (浅色字) */

span#show_spbh.zzcl_show,
#dzzf span#show_spbh,
#dzzf span {
  font-size: 24px !important;
  color: var(--o2o-text-strong) !important;
  font-weight: 700 !important;
}



/* ───────────────────────────────────────────────────────────
   TIER 18 — 细节调整
   #56 Staff 输入框（#userxm）放大到触控指标
   #57 右上日期栏（#r_c）收紧高度 */

/* #56 Staff / 收银员输入框 — 68×30 → 120×38 */
input#userxm,
body[class*="theme-"] input#userxm {
  width: 120px !important;
  height: 38px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 0 10px !important;
  border: 1.5px solid var(--o2o-border-strong) !important;
  border-radius: 8px !important;
  background: var(--o2o-surface) !important;
  color: var(--o2o-text-strong) !important;
  box-shadow: 0 1px 2px rgba(20, 14, 6, 0.06) !important;
  box-sizing: border-box !important;
}

input#userxm:focus {
  border-color: var(--o2o-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(212, 169, 106, 0.2) !important;
}

/* #57 右上日期栏容器 — 55px → 44px，释放订单区空间
   ⚠️ 不能用 flex row — #r_c 里含两行结构（288/Staff 行 + 日期行），
       强制单行会导致子元素重叠 */
/* 撤销：#r_c 保留原始自然流，让两行正常堆叠 */


/* ───────────────────────────────────────────────────────────
   TIER 11 — 桌台选择视图（table list）左侧 tab + 顶部筛选栏
   #40 左侧 Restaurant / Takeaway / 全部桌台 — 字号放大 + 色条前缀
   #41 顶部 时间/已开台/已点单/已打帐单/结帐中/全部 — 分段控件样式
   ─────────────────────────────────────────────────────────── */

/* #40 左侧 tab（button.quyubutton）
   ⚠️ ipad-theme.css 的 `.theme-day .k2-button-b` 有 !important（specificity 20），
       需要用 #menu_inner 前缀提高到 111 才能覆盖 */
#menu_inner button.quyubutton,
#menu_inner button.k2-button-style-fldl-b,
body[class*="theme-"] button.quyubutton,
body[class*="theme-"] button.k2-button-style-fldl-b {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  background: var(--o2o-surface) !important;
  background-image: none !important;
  border: 1.5px solid var(--o2o-border-strong) !important;
  color: var(--o2o-text-strong) !important;
  text-shadow: none !important;
  box-shadow: 0 1px 2px rgba(20, 14, 6, 0.06) !important;
  position: relative !important;
  padding-left: 20px !important;
  transition:
    background 160ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 120ms !important;
}

button.quyubutton::before,
button.k2-button-style-fldl-b::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 2px;
  background: var(--o2o-border-strong);
  transition: all 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
button.quyubutton:nth-of-type(3n+1)::before { background: #c8907a; }
button.quyubutton:nth-of-type(3n+2)::before { background: #8ea87e; }
button.quyubutton:nth-of-type(3n+3)::before { background: #7a9fa8; }

button.quyubutton:hover::before {
  width: 4px;
}
button.quyubutton:hover {
  background: rgba(212, 169, 106, 0.06) !important;
  border-color: var(--o2o-primary) !important;
}

/* 选中态：JS 点击后会给内联 background-color 或 border（金色 #d4a96a） */
button.quyubutton[style*="#d4a96a"],
button.quyubutton[style*="#D4A96A"],
button.quyubutton[style*="212, 169, 106"],
button.quyubutton[style*="212,169,106"] {
  background: linear-gradient(90deg, var(--o2o-primary-soft) 0%, transparent 100%) !important;
  font-weight: 700 !important;
  transform: translateX(2px);
}
button.quyubutton[style*="#d4a96a"]::before,
button.quyubutton[style*="#D4A96A"]::before,
button.quyubutton[style*="212, 169, 106"]::before,
button.quyubutton[style*="212,169,106"]::before {
  width: 5px !important;
  top: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  background: var(--o2o-primary) !important;
  box-shadow: 0 0 8px rgba(212, 169, 106, 0.5) !important;
}

/* #41 顶部筛选栏 — 统一为 ghost 胶囊按钮（与左侧 tab 同语言）
   原样式: brown 渐变底 + 彩色边框（粉/蓝/黄/绿 = 状态色）
   改为: ghost 胶囊 + 保留原状态色作为左侧 3px 色条，选中态金色填充 */
#table_color input.menubut,
body[class*="theme-"] #table_color input.menubut {
  background: var(--o2o-surface) !important;
  background-image: none !important;
  border: 1.5px solid var(--o2o-border) !important;
  border-radius: 999px !important;
  color: var(--o2o-text-strong) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  height: 40px !important;
  min-width: 92px !important;
  width: auto !important;
  padding: 0 20px !important;
  text-shadow: none !important;
  box-shadow: 0 1px 2px rgba(20, 14, 6, 0.05) !important;
  letter-spacing: 0.3px !important;
  margin-right: 1px !important;
  transition:
    color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
    background 160ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 120ms !important;
}

#table_color input.menubut:hover {
  background: rgba(212, 169, 106, 0.08) !important;
  border-color: var(--o2o-primary) !important;
  color: var(--o2o-primary-strong) !important;
}

#table_color input.menubut:active {
  transform: scale(0.97);
}

/* 选中态：JS 会给金色 border 或 background（#d4a96a = var(--o2o-primary)） */
#table_color input.menubut[style*="#d4a96a"],
#table_color input.menubut[style*="#D4A96A"],
#table_color input.menubut[style*="212, 169, 106"],
#table_color input.menubut[style*="212,169,106"] {
  background: var(--o2o-primary) !important;
  border-color: var(--o2o-primary) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(212, 169, 106, 0.35) !important;
}


/* ───────────────────────────────────────────────────────────
   TIER 21 — Modal 进出动画 + Esc 关闭 + 焦点环
   ⚠️ 独立 TIER 便于撤回：删除本 TIER 整块即可恢复
   ⚠️ 动画基于 CSS @keyframes，display:none→block 切换时自动播放
   ─────────────────────────────────────────────────────────── */

/* #83 Modal 进入动画 keyframes */
@keyframes o2oModalIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes o2oFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes o2oSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 主要浮层 — 缩放进入（translate -50% 居中的 pad 类） */
#handwriting_pad,
#handwriting_pad[style*="block"] {
  animation: o2oModalIn 260ms cubic-bezier(0.32, 0.72, 0, 1);
}
#handwriting_backdrop {
  animation: o2oFadeIn 200ms ease-out;
}

/* 全屏浮层 — 淡入（#dzzf/#cashbox/#report/#sysbjh/#layer） */
#dzzf[style*="display: block"],
#dzzf[style*="display:block"],
#cashbox,
#layer,
#report,
#sysbjh,
#information,
#suretruntotal {
  animation: o2oFadeIn 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* 小浮层 — 向上滑入 */
#tel_msg,
#ws_menu,
#msc_pay,
#allkeypad,
#keypad {
  animation: o2oSlideUp 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* #84 Focus 环 — 仅键盘 tab 显示（:focus-visible）
   ⚠️ 显式 #c4a673 保证 theme-day/dark/eye 三个主题下焦点环都是金色
      不用 var(--o2o-primary)（theme-dark 下解析为蓝色 #60a5fa） */
input:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #c4a673 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(196, 166, 115, 0.22) !important;
}

/* 特殊：.cash_box_cashdata focus 已有金色光晕（TIER 20 #70），避免覆盖 */
#cashbox input.cash_box_cashdata:focus-visible {
  outline: 2px solid #c4a673 !important;
  outline-offset: 1px !important;
}

/* 鼠标点击时不显示 focus 环（:focus-visible 本身会过滤，但保险起见） */
input:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none !important;
}

/* 点击时的样式 - payment-theme-actions isselected 状态 */
/* 注意：移除了 :active 规则，因为它会在点击按钮时导致容器背景闪烁金色 */
body.responsive .payment-theme-actions.isselected {
  background: var(--gold-dark, #B8944A) !important;
  color: var(--text-on-gold, #0A0A0A) !important;
  border: 2px solid var(--gold-primary, #D4A96A) !important;
}


/* ============================================================================
   END — O2OMEAL UI UPGRADE LAYER
   =========================================================================== */