:root {
  --animate-duration: 0.45s;
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 顾客端工作栏 / 管理端左侧栏同宽（字号在 HTML 中与侧栏大按钮对齐） */
  --os-customer-workbar-width: 15rem;
  /**
   * 手机竖屏（<640px portrait）时，密码闸与登录卡片整体下移的距离。
   * 改这一个值同时影响：#customer-pwd-gate 和 #customer-login-screen。
   */
  --os-login-phone-offset: 2cm;
}

/* 针对 iPad mini 1 等旧 WebKit：图片合成层、滚动惯性（index / admin 全局） */
img {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  image-rendering: -webkit-optimize-contrast;
}

.scroll-container {
  -webkit-overflow-scrolling: touch;
}

/**
 * 管理端「Schnellzuweisung / 快捷分配」下拉：弹层由脚本 fixed 定位，且类名在 templates.js 中拼接。
 * 用实色 + !important 保证字/底对比度，避免未打入 tailwind.app.css 的 utility 或层叠导致「字看不见」。
 */
.preset-route-dd-panel {
  background-color: #ffffff !important;
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a;
}
.preset-route-dd-panel > div:first-child {
  background-color: #ffffff !important;
}
.preset-route-dd-panel > div:last-child {
  background-color: #f4f4f5 !important;
  color: #0a0a0a !important;
}
.preset-route-dd-panel label,
.preset-route-dd-panel label span {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a;
}
.preset-route-dd-panel .btn-preset-route-confirm {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}
.preset-route-dd-panel .btn-preset-route-cancel {
  color: #0a0a0a !important;
  background-color: #ffffff !important;
  -webkit-text-fill-color: #0a0a0a;
}
.dark .preset-route-dd-panel {
  background-color: #171717 !important;
  color: #fafafa !important;
  -webkit-text-fill-color: #fafafa;
}
.dark .preset-route-dd-panel > div:first-child {
  background-color: #171717 !important;
}
.dark .preset-route-dd-panel > div:last-child {
  background-color: #262626 !important;
  color: #fafafa !important;
}
.dark .preset-route-dd-panel label,
.dark .preset-route-dd-panel label span {
  color: #fafafa !important;
  -webkit-text-fill-color: #fafafa;
}
.dark .preset-route-dd-panel .btn-preset-route-confirm {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}
.dark .preset-route-dd-panel .btn-preset-route-cancel {
  color: #fafafa !important;
  background-color: #404040 !important;
  -webkit-text-fill-color: #fafafa;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /**
   * 顾客端 .os-fade-in-up / .os-modal-panel：全局把动画缩至极短时，避免仍依赖透明度终帧的旧表现。
   */
  [data-page='customer'] .os-fade-in-up,
  [data-page='customer'] .os-modal-panel {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/**
 * 管理端 · 可用打印机「快捷分配」下拉面板：强制字色与底对比度。
 * 避免未纳入 Tailwind 构建的类名、或 fixed 叠层继承 body 字色导致「白底浅字 / 字看不见」。
 */
.preset-route-dd-panel {
  background-color: #ffffff;
  color: #0a0a0a;
  -webkit-font-smoothing: antialiased;
}
.dark .preset-route-dd-panel {
  background-color: #171717;
  color: #fafafa;
}
.preset-route-dd-panel label,
.preset-route-dd-panel label span {
  color: inherit;
}
.preset-route-dd-panel .preset-route-list-scroll {
  background-color: #ffffff;
}
.dark .preset-route-dd-panel .preset-route-list-scroll {
  background-color: #171717;
}
.preset-route-dd-panel .preset-route-actions {
  background-color: #f5f5f5;
  border-top-color: #e5e5e5;
}
.dark .preset-route-dd-panel .preset-route-actions {
  background-color: #262626;
  border-top-color: #404040;
}
.preset-route-dd-panel .btn-preset-route-cancel {
  background-color: #ffffff;
  color: #0a0a0a;
  border-color: #d4d4d8;
}
.dark .preset-route-dd-panel .btn-preset-route-cancel {
  background-color: #262626;
  color: #fafafa;
  border-color: #52525b;
}

@keyframes os-fade-in-up {
  from {
    transform: translateY(14px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes os-modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.os-fade-in-up {
  /* 不显式 opacity:0：旧 WebKit 上 forwards 偶发不生效时卡片会永久不可见（顾客端「无餐品」） */
  animation: os-fade-in-up 0.55s var(--ease-out-expo) forwards;
  animation-delay: var(--os-delay, 0ms);
}

.os-modal-panel {
  animation: os-modal-in 0.45s var(--ease-out-expo) forwards;
}

.os-press:active {
  transform: scale(0.97);
  opacity: 0.7;
}

@keyframes os-cart-dock-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.04);
  }
}

.os-cart-dock-pulse {
  animation: os-cart-dock-pulse 0.42s var(--ease-spring);
}

/**
 * 「餐厅现时管理」台子卡的呼叫脉冲：
 *   统一周期 = 20s（10s 常态 + 10s 放大 20%），service / bill 同节拍但各自定义便于将来分化。
 * 用 transform 做缩放对老 iPad/旧 Safari 也稳；transform-origin 居中保证视觉对称。
 * `position: relative; z-index: 1` 确保放大态盖在邻居之上，不被 overflow 截断。
 */
@keyframes admin-live-tile-pulse-service {
  0%, 50% { transform: scale(1); }
  53% { transform: scale(1.2); }
  97% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@keyframes admin-live-tile-pulse-bill {
  0%, 50% { transform: scale(1); }
  53% { transform: scale(1.2); }
  97% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.admin-live-tile-pulse-service,
.admin-live-tile-pulse-bill {
  position: relative;
  z-index: 1;
  transform-origin: 50% 50%;
  will-change: transform;
}
.admin-live-tile-pulse-service {
  animation: admin-live-tile-pulse-service 20s linear infinite;
}
.admin-live-tile-pulse-bill {
  animation: admin-live-tile-pulse-bill 20s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .admin-live-tile-pulse-service,
  .admin-live-tile-pulse-bill {
    animation: none;
  }
}

[data-page='customer'] .os-touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* 购物车入口：旧 WebKit 上需明确可点区域，touch-action 减少首点被吞 */
[data-page='customer'] [data-workbar-modal-open='cart'],
[data-page='customer'] #btn-mobile-selected-bar,
[data-page='customer'] #customer-workbar-rail-cart-btn,
[data-page='customer'] #customer-workbar-strip-cart-open-btn,
[data-page='customer'] #customer-narrow-cart-strip-btn,
[data-page='customer'] #customer-workbar-cart-btn {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 全屏购物车强制可见/尺寸：见文件末尾（须写在 data-customer-login-open 隐藏规则之后）。 */

/* 顾客页：避免 iPad/Safari 横屏下 body 有效宽度过窄导致登录层挤成一条 */
body[data-page='customer'] {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* 顾客端外层背景：由 html[data-customer-bg-preset] + 系统设置 customerBackgroundPreset 驱动 */
html[data-customer-bg-preset] body[data-page='customer'],
html[data-customer-bg-preset] #customer-login-screen {
  background-image: linear-gradient(
    to bottom,
    var(--os-customer-bg-a),
    var(--os-customer-bg-b),
    var(--os-customer-bg-c)
  ) !important;
}

html[data-customer-bg-preset='white'] {
  --os-customer-bg-a: #fafafa;
  --os-customer-bg-b: #ffffff;
  --os-customer-bg-c: #f4f4f5;
}
html[data-customer-bg-preset='gray'] {
  --os-customer-bg-a: #d4d4d4;
  --os-customer-bg-b: #e8e8e8;
  --os-customer-bg-c: #a3a3a3;
}
html[data-customer-bg-preset='sky_blue'] {
  --os-customer-bg-a: #e0f2fe;
  --os-customer-bg-b: #f0f9ff;
  --os-customer-bg-c: #7dd3fc;
}
html[data-customer-bg-preset='lake_green'] {
  --os-customer-bg-a: #ccfbf1;
  --os-customer-bg-b: #ecfdf5;
  --os-customer-bg-c: #5eead4;
}
html[data-customer-bg-preset='light_purple'] {
  --os-customer-bg-a: #faf5ff;
  --os-customer-bg-b: #f3e8ff;
  --os-customer-bg-c: #ddd6fe;
}
html[data-customer-bg-preset='china_red'] {
  --os-customer-bg-a: #ffe4e6;
  --os-customer-bg-b: #fecdd3;
  --os-customer-bg-c: #fb7185;
}
html[data-customer-bg-preset='black'] {
  --os-customer-bg-a: #0a0a0a;
  --os-customer-bg-b: #171717;
  --os-customer-bg-c: #0a0a0a;
}

/* 手机端（<744px，与 Tailwind osTablet 对齐）：顾客端主画布固定黑色，覆盖后台预设渐变 */
@media (max-width: 743px) {
  html[data-customer-bg-preset] body[data-page='customer'],
  html[data-customer-bg-preset] #customer-login-screen {
    background: #000000 !important;
    background-image: none !important;
  }
  [data-page='customer'] #customer-app {
    background-color: #000000;
  }
  [data-page='customer'] #customer-main-scroll {
    background-color: #000000;
  }
  [data-page='customer'] #customer-narrow-workbar-wrap {
    background-color: #0a0a0a;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  }
  [data-page='customer'] #customer-app > footer {
    background-color: #000000;
    border-top-color: rgba(64, 64, 64, 0.85);
  }
}

/* iPhone / iOS：动态地址栏下避免整页高度“少一截”；与 min-h-screen 叠加 */

[data-page='customer'] #customer-app.min-h-screen,
[data-page='customer'] #customer-login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: none;
  min-width: 100%;
  box-sizing: border-box;
}
@supports (-webkit-touch-callout: none) {
  [data-page='customer'] #customer-app.min-h-screen,
  [data-page='customer'] #customer-login-screen {
    min-height: -webkit-fill-available;
  }
}

/* iOS 12 等：纵向 flex 链里主滚动区偶发高度为 0，列表在视口外；保底可滚区域 */
[data-page='customer'] #customer-main-scroll {
  min-height: 36vh;
}

/* iPad/iPhone Safari：登录语言原生 select 闭合态水平居中；字号≥16px 减轻聚焦时整页缩放 */
@supports (-webkit-touch-callout: none) {
  #customer-login-lang-select {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    text-align: center;
    text-align-last: center;
    font-size: 1rem;
    line-height: 2.75rem;
    min-height: 2.75rem;
    padding-left: 2rem;
    padding-right: 2rem;
    -webkit-padding-start: 2rem;
    -webkit-padding-end: 2rem;
    border-radius: 9999px;
    -webkit-tap-highlight-color: transparent;
  }
}

/*
 * 登录页显示时：强制关掉仍挂在 body 上的半透明遮罩（WebKit 叠放、data-* 残留、抽屉子层 pointer-events:auto）。
 * 不支持 :has() 的浏览器会忽略本段；另有 #customer-login-screen z-[400]。
 */
body[data-page='customer']:has(#customer-login-screen:not(.hidden)) #dish-detail-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
body[data-page='customer']:has(#customer-login-screen:not(.hidden)) #dish-detail-panel {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
body[data-page='customer']:has(#customer-login-screen:not(.hidden)):not([data-cart-open='true']) #cart-drawer {
  pointer-events: none !important;
}
body[data-page='customer']:has(#customer-login-screen:not(.hidden)):not([data-cart-open='true'])
  #cart-drawer-backdrop.cart-drawer-backdrop {
  opacity: 0 !important;
  pointer-events: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-page='customer']:has(#customer-login-screen:not(.hidden)):not([data-cart-open='true'])
  #cart-drawer-sheet.cart-drawer-sheet {
  transform: translateY(100%) !important;
  pointer-events: none !important;
}
body[data-page='customer']:has(#customer-login-screen:not(.hidden)):not([data-cart-fullscreen-open='true'])
  #customer-cart-fullscreen-modal,
body[data-page='customer']:has(#customer-login-screen:not(.hidden)) #customer-guest-switch-modal {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* 冷却锁层勿列入此处：!important 会压过 JS 去 .hidden；横屏 WebKit 上 data-customer-login-open / :has 偶发残留时整层「不出现」 */
body[data-page='customer']:has(#customer-login-screen:not(.hidden)) #customer-workbar-modal,
body[data-page='customer']:has(#customer-login-screen:not(.hidden)) #customer-orders-query-modal {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* iOS 12 / 旧 WebKit 无 :has()：由 body[data-customer-login-open] 同步（ui-controller showLogin/showApp） */
body[data-page='customer'][data-customer-login-open='1'] #dish-detail-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
body[data-page='customer'][data-customer-login-open='1'] #dish-detail-panel {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
body[data-page='customer'][data-customer-login-open='1']:not([data-cart-open='true']) #cart-drawer {
  pointer-events: none !important;
}
body[data-page='customer'][data-customer-login-open='1']:not([data-cart-open='true'])
  #cart-drawer-backdrop.cart-drawer-backdrop {
  opacity: 0 !important;
  pointer-events: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-page='customer'][data-customer-login-open='1']:not([data-cart-open='true'])
  #cart-drawer-sheet.cart-drawer-sheet {
  transform: translateY(100%) !important;
  pointer-events: none !important;
}
body[data-page='customer'][data-customer-login-open='1']:not([data-cart-fullscreen-open='true'])
  #customer-cart-fullscreen-modal,
body[data-page='customer'][data-customer-login-open='1'] #customer-guest-switch-modal {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
body[data-page='customer'][data-customer-login-open='1'] #customer-workbar-modal,
body[data-page='customer'][data-customer-login-open='1'] #customer-orders-query-modal {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* 移动端底部抽屉购物车 #cart-drawer（Tailwind transition-transform + 此处 transform/遮罩） */
#cart-drawer-backdrop.cart-drawer-backdrop {
  pointer-events: none;
}

[data-cart-open='true'] #cart-drawer {
  pointer-events: auto;
}

[data-cart-open='true'] #cart-drawer-backdrop.cart-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#cart-drawer-sheet.cart-drawer-sheet {
  transform: translateY(100%);
  /* 关闭时禁止命中：否则在 iPad/WebKit 上可能挡住下层登录页（父级 pointer-events:none 时子级 auto 仍会接事件） */
  pointer-events: none;
}

[data-cart-open='true'] #cart-drawer-sheet.cart-drawer-sheet {
  transform: translateY(0);
  pointer-events: auto;
}

/* 菜品详情 */
#dish-detail-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out-expo);
}
[data-dish-detail-open='true'] #dish-detail-overlay {
  opacity: 1;
  pointer-events: auto;
}
#dish-detail-panel {
  transform: translate(-50%, -46%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    transform 0.38s var(--ease-out-expo),
    opacity 0.28s ease,
    visibility 0s linear 0.35s;
}
[data-dish-detail-open='true'] #dish-detail-panel {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s, 0s, 0s;
}
@media (max-width: 1023.98px) {
  #dish-detail-panel {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-height: min(92dvh, 42rem);
    border-radius: 1.25rem 1.25rem 0 0;
    transform: translateY(100%);
  }
  [data-dish-detail-open='true'] #dish-detail-panel {
    transform: translateY(0);
    left: 0;
    right: 0;
  }
}

@media (min-width: 744px) {
  #dish-detail-panel {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(100vw - 1rem, 36rem);
    max-height: min(92dvh, 40rem);
    border-radius: 1rem;
    transform: translate(-50%, -46%) scale(0.96);
  }
  /**
   * 必须在这里显式覆盖 left/right：
   * 上面 `[data-dish-detail-open='true'] #dish-detail-panel { left:0; right:0 }`
   * 的特异度 (0,2,0) 高于基础 `#dish-detail-panel` (0,1,0)，
   * 若不在打开态里同样设 left:50%/right:auto，
   * 手机横屏（744–1023px）居中平移 translate(-50%) 会把面板推出屏幕左侧。
   */
  [data-dish-detail-open='true'] #dish-detail-panel {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* 顾客页：≥744px 竖屏时菜品详情为底部抽屉；购物车见 index（竖屏用底部抽屉、横屏用侧栏） */
@media (min-width: 744px) and (orientation: portrait) {
  #dish-detail-panel {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-height: min(92dvh, 42rem);
    border-radius: 1.25rem 1.25rem 0 0;
    transform: translateY(100%);
  }
  [data-dish-detail-open='true'] #dish-detail-panel {
    transform: translateY(0);
    left: 0;
    right: 0;
  }
}

[data-auth-modal-open="true"] #auth-modal-overlay {
  opacity: 1;
  pointer-events: auto;
}
[data-auth-modal-open="true"] #auth-modal-panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
#auth-modal-overlay {
  transition: opacity 0.2s ease;
}
#auth-modal-panel {
  transform: translate(-50%, -50%) scale(0.95);
  transition:
    opacity 0.2s ease,
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#lang-dropdown[data-lang-open="true"] #lang-menu {
  display: block;
}

/* Footer DL logo: 3D look without hover zoom, so footer controls remain clickable. */
footer[role='contentinfo'] {
  position: relative;
  z-index: 0;
  overflow: visible;
}

.dl-logo-host {
  position: relative;
  z-index: 1;
  display: inline-block;
  vertical-align: top;
  perspective: 960px;
  perspective-origin: 50% 42%;
}

.dl-logo-host img.dl-logo-3d {
  display: block;
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition:
    transform 0.55s var(--ease-spring),
    filter 0.5s var(--ease-out-expo);
  transform: rotateX(9deg) rotateY(-11deg) translateZ(0) scale(1);
  filter: drop-shadow(6px 14px 18px rgba(15, 23, 42, 0.2))
    drop-shadow(-4px 6px 12px rgba(56, 189, 248, 0.14)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}

.dark .dl-logo-host img.dl-logo-3d {
  filter: drop-shadow(6px 16px 22px rgba(0, 0, 0, 0.5))
    drop-shadow(-3px 8px 14px rgba(59, 130, 246, 0.12)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.05));
}

/* 管理端 iframe 内嵌预览：嵌套浏览上下文中 backdrop-filter / 3D+多重 drop-shadow 易被插值发糊 */
html[data-embed-preview='1'] [class*='backdrop-blur'] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-embed-preview='1'] .will-change-transform {
  will-change: auto !important;
}

html[data-embed-preview='1'] .dl-logo-host {
  perspective: none;
}

html[data-embed-preview='1'] .dl-logo-host img.dl-logo-3d {
  transform: none !important;
  transform-style: flat !important;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.15)) !important;
  transition: none;
}

html[data-embed-preview='1'] .dark .dl-logo-host img.dl-logo-3d {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) !important;
}

html[data-embed-preview='1'] .dl-logo-host:hover img.dl-logo-3d {
  transform: none !important;
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.22)) !important;
}

html[data-embed-preview='1'] .dark .dl-logo-host:hover img.dl-logo-3d {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) !important;
}

/* 管理端 iframe 内嵌预览：隐藏滚动条（仍可滚轮/触摸滑动） */
html[data-embed-preview='1'],
html[data-embed-preview='1'] body,
html[data-embed-preview='1'] * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html[data-embed-preview='1'] *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}

/* 顾客端平板左侧栏：固定展开宽，无折叠窄轨（与 Tailwind osTablet 744px 一致）；宽度见 :root --os-customer-workbar-width */
.customer-workbar-rail {
  display: none !important;
}
.customer-workbar-collapse-row {
  display: none !important;
}
@media (min-width: 744px) {
  #customer-workbar {
    width: var(--os-customer-workbar-width);
    min-width: var(--os-customer-workbar-width);
    max-width: var(--os-customer-workbar-width);
  }
  #customer-workbar .customer-workbar-expanded-only {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
  }
}

/* 管理端左侧栏：≥md 与顾客端工作栏同宽 */
@media (min-width: 768px) {
  #admin-sidebar-aside {
    width: var(--os-customer-workbar-width);
    min-width: var(--os-customer-workbar-width);
    max-width: var(--os-customer-workbar-width);
  }
}

/* 与左栏同宽变量联动，避免标题超出侧栏（改 --os-customer-workbar-width 时自动跟调） */
#admin-sidebar-title {
  font-size: clamp(1rem, calc(var(--os-customer-workbar-width) * 0.13), 1.65rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/**
 * 管理端侧栏底部：名片式卡片。Kein Hover-Zoom, damit Footer-Aktionen klickbar bleiben.
 * 整体上边距原 4cm，名片上移共 2cm 后为 2cm。
 */
#admin-sidebar-brand {
  margin-top: 2cm;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-shrink: 0;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.admin-sidebar-business-card {
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid rgb(226 232 240 / 0.95);
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 48%, #f1f5f9 100%);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.9) inset,
    0 10px 28px -12px rgb(15 23 42 / 0.12),
    0 0 0 1px rgb(15 23 42 / 0.04);
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  transform-origin: 0% 100%;
  -webkit-transform-origin: 0% 100%;
  transition: box-shadow 0.22s ease;
  -webkit-transition: box-shadow 0.22s ease;
}
.admin-sidebar-business-card:hover {
  z-index: 80;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.9) inset,
    0 24px 48px -16px rgb(15 23 42 / 0.22),
    0 0 0 1px rgb(15 23 42 / 0.06);
}
.dark .admin-sidebar-business-card:hover {
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.06) inset,
    0 28px 56px -18px rgb(0 0 0 / 0.65),
    0 0 0 1px rgb(0 0 0 / 0.45);
}
.dark .admin-sidebar-business-card {
  border-color: rgb(51 65 85 / 0.95);
  background: linear-gradient(165deg, rgb(30 41 59) 0%, rgb(15 23 42) 55%, rgb(15 23 42) 100%);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.06) inset,
    0 12px 32px -14px rgb(0 0 0 / 0.55),
    0 0 0 1px rgb(0 0 0 / 0.35);
}

.admin-sidebar-card-accent {
  height: 5px;
  width: 100%;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #059669 0%, #10b981 45%, #047857 100%);
}

.admin-sidebar-card-body {
  padding: 0.75rem 0.85rem 0.95rem;
  box-sizing: border-box;
}

.admin-sidebar-card-logo-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.15rem 0 0.35rem;
  position: relative;
  z-index: 0;
}

.admin-sidebar-card-rule {
  margin: 0.45rem 0 0.55rem;
  border: 0;
  border-top: 1px solid rgb(226 232 240);
}
.dark .admin-sidebar-card-rule {
  border-top-color: rgb(51 65 85);
}

#admin-sidebar-brand .admin-sidebar-card-logo-wrap img {
  display: block;
}

/** 名片内文字：左对齐、层次与纸质名片接近 */
.admin-sidebar-brand-meta {
  margin: 0;
  padding: 0;
  max-width: 100%;
  font-style: normal;
  font-size: 0.62rem;
  line-height: 1.5;
  text-align: left;
  color: rgb(71 85 105);
  word-break: break-word;
}
.dark .admin-sidebar-brand-meta {
  color: rgb(148 163 184);
}
.admin-sidebar-brand-meta p {
  margin: 0.1rem 0;
}
.admin-sidebar-brand-meta .admin-sidebar-brand-name {
  margin: 0 0 0.45rem;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgb(15 23 42);
  text-transform: uppercase;
}
.dark .admin-sidebar-brand-meta .admin-sidebar-brand-name {
  color: rgb(241 245 249);
}
.admin-sidebar-brand-meta .admin-sidebar-brand-addr {
  margin-top: 0.2rem;
  line-height: 1.4;
}
.admin-sidebar-brand-meta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgb(148 163 184 / 0.55);
}
.admin-sidebar-brand-meta a:hover {
  color: #059669;
  border-bottom-color: #059669;
}
.dark .admin-sidebar-brand-meta a:hover {
  color: #34d399;
  border-bottom-color: #34d399;
}

/**
 * 全屏购物车：与上文 [data-customer-login-open='1'] 规则同权重时，必须写在**最后**，
 * 否则 `opacity:0 !important; visibility:hidden !important` 会盖住「打开购物车」。
 */
body[data-page='customer'][data-cart-fullscreen-open='true'] #customer-cart-fullscreen-modal {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body[data-page='customer'][data-cart-fullscreen-open='true'] #customer-cart-fullscreen-panel {
  height: 85vh;
  max-height: 85vh;
  width: 92vw;
  max-width: 36rem;
  min-height: 12rem;
}

/**
 * 底部购物车抽屉：登录态规则对 #cart-drawer-sheet 使用了 translateY(100%) !important，
 * 若 body 仍带 data-customer-login-open='1'，会压过无 !important 的 [data-cart-open='true']，
 * 表现为「全屏与抽屉都不出现」。此处用同特异性 + !important 保证打开态。
 */
body[data-page='customer'][data-cart-open='true'] #cart-drawer {
  pointer-events: auto !important;
}
body[data-page='customer'][data-cart-open='true'] #cart-drawer-backdrop.cart-drawer-backdrop {
  opacity: 1 !important;
  pointer-events: auto !important;
}
body[data-page='customer'][data-cart-open='true'] #cart-drawer-sheet.cart-drawer-sheet {
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/**
 * 下单冷却：iOS 12 WebKit 上 body.overflow:hidden 常导致「壳层已锁、fixed 全屏倒计时层整层不绘」；
 * 勿在此用 overflow:hidden。背后滚动由全屏锁层接指 + overscroll 抑制即可。
 */
body[data-page='customer'].os-order-cooldown-lock {
  overscroll-behavior: none;
}

/**
 * 冷却锁层打开时保底（尤其 iPad mini / iOS 12）：显式 flex + 合成层 + z-index，避免旧 WebKit 丢绘或被裁成不可见。
 * safe-area：先 constant() 再 env()，兼容 iOS 11.2–12。
 */
body[data-page='customer'] #customer-order-lock-overlay:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 460 !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-sizing: border-box;
}

/** 模糊只加在底图层，勿与卡片同节点（Safari/WebKit 合成顺序） */
body[data-page='customer'] #customer-order-lock-overlay:not(.hidden) .customer-order-lock-backdrop {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

body[data-page='customer'] #customer-order-lock-overlay:not(.hidden) .customer-order-lock-panel {
  position: relative;
  z-index: 10;
  max-height: 85vh;
  margin: 1rem;
  margin-top: calc(1rem + constant(safe-area-inset-top));
  margin-top: calc(1rem + env(safe-area-inset-top));
  margin-bottom: calc(1rem + constant(safe-area-inset-bottom));
  margin-bottom: calc(1rem + env(safe-area-inset-bottom));
  margin-left: calc(1rem + constant(safe-area-inset-left));
  margin-left: calc(1rem + env(safe-area-inset-left));
  margin-right: calc(1rem + constant(safe-area-inset-right));
  margin-right: calc(1rem + env(safe-area-inset-right));
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/** 冷却弹窗内 Logo 正面、无 3D 倾斜（仅此处覆盖全局 .dl-logo-3d） */
#customer-order-lock-overlay .dl-logo-host {
  perspective: none;
}

#customer-order-lock-overlay .dl-logo-host img.dl-logo-3d {
  transform: none !important;
  transform-style: flat !important;
  transition: filter 0.35s var(--ease-out-expo);
}

#customer-order-lock-overlay .dl-logo-host:hover img.dl-logo-3d {
  transform: none !important;
  filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.18)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.25));
}

.dark #customer-order-lock-overlay .dl-logo-host:hover img.dl-logo-3d {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.06));
}

/* ==========================================================================
 * 密码闸门 (#customer-pwd-gate) + 登录屏 (#customer-login-screen) 专用样式
 * 目标：iPad mini + iOS 12+ 横屏优先，与 customer-lite.html 视觉保持一致。
 * 样式单中重复度较高的颜色/圆角使用现有 Tailwind neutral/brand 变量色对齐。
 * ========================================================================== */

/**
 * 防御性：即使 tailwind.app.css 被浏览器缓存成旧版（缺 z-[500]/fixed 等 utility），
 * 也必须保证密码闸占满屏幕并盖在 #customer-login-screen / #customer-app 之上。
 * 一旦最新 Tailwind 编译进来，utility 会同权重生效，效果一致。
 */
#customer-pwd-gate {
  position: fixed;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fafafa;
}

.dark #customer-pwd-gate {
  background: #0a0a0a;
}

#customer-pwd-gate.hidden {
  display: none !important;
}

/** 密码闸门：默认单栏；≥720px 切为左右双栏（标题+密码） */
#customer-pwd-gate .os-pwd-gate-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#customer-pwd-gate .os-pwd-gate-col-left,
#customer-pwd-gate .os-pwd-gate-col-right {
  width: 100%;
}

#customer-pwd-gate .os-pwd-gate-title {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

#customer-pwd-gate .os-pwd-gate-caption {
  font-size: 0.95rem;
}

#customer-pwd-gate .os-pwd-gate-boxes,
#customer-logout-confirm .os-pwd-gate-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

/** iOS 12+ 支持 flex gap（≥14.4）；为保险提供 margin 回退 */
#customer-pwd-gate .os-pwd-gate-box + .os-pwd-gate-box,
#customer-logout-confirm .os-pwd-gate-box + .os-pwd-gate-box {
  margin-left: 0.55rem;
}

@supports (gap: 1px) {
  #customer-pwd-gate .os-pwd-gate-boxes,
  #customer-logout-confirm .os-pwd-gate-boxes {
    gap: 0.55rem;
  }
  #customer-pwd-gate .os-pwd-gate-box + .os-pwd-gate-box,
  #customer-logout-confirm .os-pwd-gate-box + .os-pwd-gate-box {
    margin-left: 0;
  }
}

#customer-pwd-gate .os-pwd-gate-box,
#customer-logout-confirm .os-pwd-gate-box {
  width: 3rem;
  height: 3.6rem;
  border: 2px solid rgb(212 212 216 / 0.9);
  border-radius: 0.85rem;
  background: #fff;
  color: #0f172a;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
  outline: none;
  -webkit-appearance: none;
          appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#customer-pwd-gate .os-pwd-gate-box:focus,
#customer-logout-confirm .os-pwd-gate-box:focus {
  border-color: #0891b2;
  box-shadow: 0 0 0 4px rgb(8 145 178 / 0.18);
}

.dark #customer-pwd-gate .os-pwd-gate-box,
.dark #customer-logout-confirm .os-pwd-gate-box {
  background: #1f2937;
  border-color: rgb(82 82 91 / 0.9);
  color: #f3f4f6;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.dark #customer-pwd-gate .os-pwd-gate-box:focus,
.dark #customer-logout-confirm .os-pwd-gate-box:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 4px rgb(34 211 238 / 0.25);
}

/** 退出弹窗在红底卡片上：边框/底色保持白底深字以便清晰输入；focus 用金黄高亮 */
#customer-logout-confirm .os-pwd-gate-box {
  border-color: #ffffff;
}
#customer-logout-confirm .os-pwd-gate-box:focus {
  border-color: #fde047;
  box-shadow: 0 0 0 4px rgb(253 224 71 / 0.35);
}

#customer-pwd-gate .os-pwd-gate-err {
  margin-top: 0.9rem;
  color: #b91c1c;
  font-size: 0.9rem;
}

.dark #customer-pwd-gate .os-pwd-gate-err {
  color: #fca5a5;
}

#customer-pwd-gate .os-pwd-gate-btn {
  display: inline-block;
  /* 原 9rem / 左右 1.75rem，整体宽度约缩小 30%（×0.7） */
  min-width: 6.3rem;
  padding: 0.55rem 1.225rem;
  border-radius: 0.9rem;
  background: linear-gradient(to right, #059669, #047857);
  color: #fff;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: 0 6px 18px rgb(5 150 105 / 0.25);
  transition: filter 0.2s ease, transform 0.15s ease;
  border: none;
  cursor: pointer;
}

#customer-pwd-gate .os-pwd-gate-btn:hover {
  filter: brightness(1.06);
}

#customer-pwd-gate .os-pwd-gate-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(229 231 235 / 0.9);
  background: rgb(255 255 255 / 0.9);
}

.dark #customer-pwd-gate .os-pwd-gate-footer {
  border-top-color: rgb(38 38 38 / 0.9);
  background: rgb(10 10 10 / 0.9);
}

#customer-pwd-gate .os-pwd-gate-footer-logo {
  height: 2rem;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  opacity: 0.9;
}

#customer-pwd-gate .os-pwd-gate-footer-copy {
  font-size: 0.72rem;
  color: rgb(100 116 139 / 1);
  line-height: 1.35;
  display: inline-flex;
  align-items: flex-end;
}

.dark #customer-pwd-gate .os-pwd-gate-footer-copy {
  color: rgb(161 161 170 / 1);
}

/** 横屏（≥720px）：密码闸分左右两栏，内容整体居中 */
@media (min-width: 720px) {
  #customer-pwd-gate .os-pwd-gate-grid {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 3rem;
  }
  #customer-pwd-gate .os-pwd-gate-col-left {
    width: auto;
    max-width: 20rem;
  }
  #customer-pwd-gate .os-pwd-gate-col-right {
    width: auto;
  }
  #customer-pwd-gate .os-pwd-gate-title {
    font-size: 2.4rem;
  }
  #customer-pwd-gate .os-pwd-gate-box {
    width: 3.3rem;
    height: 4rem;
    font-size: 1.8rem;
  }
  #customer-pwd-gate .os-pwd-gate-footer-logo {
    height: 2.3rem;
  }
  #customer-pwd-gate .os-pwd-gate-footer-copy {
    font-size: 0.85rem;
  }
}

/** 登录屏：左栏 EINSTELLUNG 标题 + 右栏表单（结构见 auth-templates.js） */
#customer-login-screen .os-login-title {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.08;
}
#customer-login-screen .os-login-title .block {
  display: block;
}

/**
 * 手机竖屏：密码闸 + 登录卡片整体下移 --os-login-phone-offset（默认 2cm）。
 * 断点：宽度 < 640px（iPhone / 小屏安卓）且 portrait 方向；
 * iPad / 横屏完全不受影响。
 */
@media (max-width: 640px) and (orientation: portrait) {
  #customer-login-screen #customer-login-scroll > div:first-child {
    padding-top: calc(1rem + var(--os-login-phone-offset));
  }
  #customer-pwd-gate .os-pwd-gate-grid {
    padding-top: calc(1rem + var(--os-login-phone-offset));
  }

  /**
   * 顾客主界面标题「Menü」：手机竖屏下换成品牌翡翠绿渐变文字 + 彩色光晕，
   * 用色向品牌一致（from-brand-500 / to-brand-700），视觉上更"亮"更抓眼。
   * ≥640px 或横屏一律走原 Tailwind 黑字规则，不受影响。
   */
  [data-ui='customer.menuTitle'] {
    background-image: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 1px 1px rgba(16, 185, 129, 0.25))
      drop-shadow(0 0 10px rgba(16, 185, 129, 0.18));
  }
  .dark [data-ui='customer.menuTitle'] {
    background-image: linear-gradient(135deg, #34d399 0%, #10b981 55%, #059669 100%);
    filter: drop-shadow(0 1px 1px rgba(16, 185, 129, 0.35))
      drop-shadow(0 0 14px rgba(52, 211, 153, 0.25));
  }
}

#customer-login-screen .os-login-lang-picker {
  display: none;
}

#customer-login-screen #customer-login-meal-wrap,
#customer-login-screen #customer-login-guest-section {
  display: none !important;
}

/** 放大输入框字号、加大点击区 */
#customer-login-screen .os-login-label {
  font-size: 1.05rem;
}

#customer-login-screen .os-login-input {
  font-size: 1.25rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  letter-spacing: 0.03em;
}

#customer-login-screen .os-login-section-title {
  font-size: 1.05rem;
}

/** 「ZUM / MENÜ」：相对原 1.9rem / 全宽约缩小 30%（与 #customer-pwd-gate Weiter 一致） */
#customer-login-screen .os-login-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 70%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  font-size: 1.33rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  min-height: 2.625rem;
}
#customer-login-screen .os-login-submit .os-login-submit-line {
  font-size: 1em;
  font-weight: 800;
  line-height: 1.1;
}

#customer-login-screen .os-login-brand-logo {
  max-height: 7rem;
  width: auto;
  object-fit: contain;
  opacity: 0.95;
}

/** 横屏：表单两列，Yuoki logo 右栏居中 */
@media (min-width: 720px) {
  #customer-login-screen .os-login-form {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1.5rem;
  }
  /** Yuoki logo 从 .os-login-brand 移到登录卡片外侧也可；此处放大在小屏下方 */
  #customer-login-screen .os-login-brand-logo {
    max-height: 8rem;
  }
  #customer-login-screen .os-login-title {
    font-size: 2.4rem;
  }
  /** 横屏：提交钮宽度再收窄约 30%（与 Lite 240→168、420→294 同比例） */
  #customer-login-screen .os-login-submit {
    width: auto;
    min-width: 168px;
    max-width: 294px;
  }
}

/** 登录卡片内左右栏：窄屏竖排，≥768px 横排（与 Tailwind md: 一致） */
#customer-login-screen .os-login-shell {
  width: 100%;
}
#customer-login-screen .os-login-col-left .os-login-brand {
  margin-top: 0;
}

/** 共用：iOS 12 的 env()/constant() 兼容（仅补密码闸底部 safe-area） */
@supports (padding: constant(safe-area-inset-bottom)) {
  #customer-pwd-gate .os-pwd-gate-footer {
    padding-bottom: calc(0.75rem + constant(safe-area-inset-bottom));
  }
}

/**
 * 平板横屏（含 iPad mini iOS12+ / iPad Air / iPad Pro）「左栏 9 键加亮」：
 *   1. 分类键（#categories 内动态生成的按钮，例：寿司/铁板/油炸/锅炒）
 *   2. 工作栏键（语言/切账号/购物车/订单/退出 + 餐牌入口）
 * 目标：色彩更鲜明、字重更高、图标染品牌绿，与主界面 Menü 渐变标题呼应；
 * 保持购物车的"品牌渐变强调"、退出的"红色语义"、激活分类的"高对比"差异。
 * 断点：min-width 744px 且 orientation: landscape（osTablet + osTabletLand）。
 * 作用：index.html / customer-lite.html 同时生效；竖屏与手机端完全不受影响。
 */
@media (min-width: 744px) and (orientation: landscape) {
  /* ========== index.html（现代端） ========== */

  /** 分类键未激活态：品牌浅绿底 + 深绿文字 + 粗体；悬停更亮 */
  #categories > button[role='tab']:not([aria-selected='true']):not(.bg-neutral-900) {
    background-color: rgba(16, 185, 129, 0.08);
    color: #047857;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.22) inset;
  }
  #categories > button[role='tab']:not([aria-selected='true']):not(.bg-neutral-900):hover {
    background-color: rgba(16, 185, 129, 0.15);
    color: #065f46;
  }
  .dark #categories > button[role='tab']:not([aria-selected='true']):not(.bg-neutral-900) {
    background-color: rgba(52, 211, 153, 0.12);
    color: #6ee7b7;
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.28) inset;
  }

  /** 分类键激活态：edles Dunkelrot statt Brand-Grün */
  #categories > button[role='tab'][aria-selected='true'],
  #categories > button[role='tab'].bg-neutral-900 {
    background-image: none !important;
    background-color: #3f0b0b !important;
    color: #fca5a5 !important;
    box-shadow: 0 4px 14px rgba(69, 10, 10, 0.38), 0 0 0 1px rgba(248, 113, 113, 0.42) inset !important;
  }

  /** 工作栏普通键（餐牌/语言/切顾客/订单查询）：绿字 + 绿图标 + 600 字重 */
  #customer-workbar button[data-workbar-modal-open='menu'],
  #customer-workbar button[data-workbar-modal-open='lang'],
  #customer-workbar #customer-sidebar-guest-switch-open,
  #customer-workbar #customer-workbar-orders-query-open-btn {
    color: #047857;
    font-weight: 600;
    border-color: rgba(16, 185, 129, 0.3);
  }
  #customer-workbar button[data-workbar-modal-open='menu'] svg,
  #customer-workbar button[data-workbar-modal-open='lang'] svg,
  #customer-workbar #customer-sidebar-guest-switch-open svg,
  #customer-workbar #customer-workbar-orders-query-open-btn svg {
    color: #059669;
  }
  .dark #customer-workbar button[data-workbar-modal-open='menu'],
  .dark #customer-workbar button[data-workbar-modal-open='lang'],
  .dark #customer-workbar #customer-sidebar-guest-switch-open,
  .dark #customer-workbar #customer-workbar-orders-query-open-btn {
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.35);
  }
  .dark #customer-workbar button[data-workbar-modal-open='menu'] svg,
  .dark #customer-workbar button[data-workbar-modal-open='lang'] svg,
  .dark #customer-workbar #customer-sidebar-guest-switch-open svg,
  .dark #customer-workbar #customer-workbar-orders-query-open-btn svg {
    color: #34d399;
  }

  /** 购物车：已是品牌渐变，用更饱和更亮的绿渐变 + 光晕进一步"加亮" */
  #customer-workbar #customer-workbar-strip-cart-open-btn {
    background-image: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%) !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45), 0 0 0 1px rgba(16, 185, 129, 0.4) inset !important;
    font-weight: 700;
  }
  #customer-workbar #customer-workbar-strip-cart-open-btn svg {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
  }

  /** 退出：红底白字（与 customer-lite 一致）。HTML 类已是 bg-red-600/text-white，这里仅锁文字与图标颜色，避免被父级文案规则反白 */
  #customer-workbar #customer-workbar-logout-btn {
    color: #ffffff;
    font-weight: 700;
    border-color: #b91c1c;
  }
  #customer-workbar #customer-workbar-logout-btn svg {
    color: #ffffff;
  }
  .dark #customer-workbar #customer-workbar-logout-btn {
    color: #ffffff;
    border-color: #f87171;
  }
  .dark #customer-workbar #customer-workbar-logout-btn svg {
    color: #ffffff;
  }

  /* ========== customer-lite.html（iOS9 旧端） ========== */

  /** Lite 左栏键整体加亮：文字更白、图标染品牌绿、边框也带一丝绿 */
  .lite-rail-btn {
    background: #1f2937;
    color: #f9fafb;
    border-color: #374151;
  }
  .lite-rail-btn .lite-rail-ico svg {
    color: #34d399;
    stroke: #34d399;
  }
  /** Lite 激活分类：保留翡翠底，进一步提亮色与投影 */
  .lite-rail-btn.is-active {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
  }
  .lite-rail-btn.is-active .lite-rail-ico svg {
    color: #ffffff;
    stroke: #ffffff;
  }
  /** Lite 退出：更鲜的红（加亮但不过艳） */
  .lite-rail-btn-danger {
    background: #1c1917;
    color: #fda4af;
  }
  .lite-rail-btn-danger .lite-rail-ico svg {
    color: #f87171;
    stroke: #f87171;
  }
}

/* ===== index.html · Professional customer UI polish ===== */
[data-page='customer'] {
  font-family: 'DM Sans', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

[data-page='customer'] #customer-workbar {
  background: linear-gradient(180deg, #0b1019 0%, #080c14 100%) !important;
  border-right: 1px solid rgba(51, 65, 85, 0.55);
  box-shadow: 20px 0 45px rgba(0, 0, 0, 0.18);
}

[data-page='customer'] #customer-workbar .overflow-y-auto {
  padding: 1.15rem 0.6rem 1rem !important;
  gap: 0.75rem !important;
}

[data-page='customer'] #customer-workbar [data-ui-aria='customer.workbarBrandCardAria'] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.2rem 0.6rem 0.75rem !important;
  text-align: center !important;
}

[data-page='customer'] #customer-workbar-brand-name {
  display: none !important;
}

[data-page='customer'] #customer-workbar a[href='index.html'] {
  width: 5.25rem !important;
  height: 5.25rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 1.25rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

[data-page='customer'] #customer-workbar-website {
  display: none !important;
}

[data-page='customer'] #customer-workbar-sidebar-menu-host {
  flex: 1 1 auto !important;
  padding-top: 0.1rem !important;
}

[data-page='customer'] #customer-workbar #categories {
  gap: 0.45rem !important;
}

[data-page='customer'] #customer-workbar #categories button[data-cat] {
  width: 100% !important;
  min-height: 2.65rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.9rem !important;
  background: transparent !important;
  color: rgba(226, 232, 240, 0.78) !important;
  box-shadow: none !important;
  padding: 0.6rem 0.9rem !important;
  padding-left: 1rem !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

[data-page='customer'] #customer-workbar #categories button[data-cat]::before {
  display: none !important;
}

[data-page='customer'] #customer-workbar #categories button[data-cat]:hover {
  background: rgba(31, 41, 55, 0.72) !important;
  color: #ffffff !important;
}

[data-page='customer'] #customer-workbar #categories button[data-cat][class*='bg-neutral-900'],
[data-page='customer'] #customer-workbar #categories button[data-cat][class*='bg-brand-600'] {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-color: rgba(153, 27, 27, 0.85) !important;
  border-right-color: rgba(248, 113, 113, 0.9) !important;
  background-image: none !important;
  background-color: #3f0b0b !important;
  color: #fca5a5 !important;
  box-shadow: inset -3px 0 0 rgba(248, 113, 113, 0.9), 0 10px 28px rgba(69, 10, 10, 0.24) !important;
}

[data-page='customer'] #customer-workbar button[data-workbar-modal-open='menu'],
[data-page='customer'] #customer-workbar button[data-workbar-modal-open='lang'],
[data-page='customer'] #customer-workbar #customer-sidebar-guest-switch-open,
[data-page='customer'] #customer-workbar #customer-workbar-orders-query-open-btn {
  border: 0 !important;
  border-radius: 0.8rem !important;
  background: transparent !important;
  color: rgba(226, 232, 240, 0.78) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  min-height: 2.5rem !important;
  padding: 0.55rem 0.9rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

[data-page='customer'] #customer-workbar button[data-workbar-modal-open='menu']:hover,
[data-page='customer'] #customer-workbar button[data-workbar-modal-open='lang']:hover,
[data-page='customer'] #customer-workbar #customer-sidebar-guest-switch-open:hover,
[data-page='customer'] #customer-workbar #customer-workbar-orders-query-open-btn:hover {
  background: rgba(31, 41, 55, 0.72) !important;
  color: #ffffff !important;
}

[data-page='customer'] #customer-workbar button[data-workbar-modal-open='lang'] svg,
[data-page='customer'] #customer-workbar #customer-sidebar-guest-switch-open svg,
[data-page='customer'] #customer-workbar #customer-workbar-orders-query-open-btn svg {
  color: rgba(226, 232, 240, 0.82) !important;
}

[data-page='customer'] #customer-workbar .flex.shrink-0.flex-col.gap-3:last-child {
  border-top: 1px solid rgba(51, 65, 85, 0.52);
  padding-top: 0.8rem;
  margin-top: auto;
}

[data-page='customer'] #customer-workbar .flex.shrink-0.flex-col.gap-3 {
  gap: 0.55rem !important;
}

[data-page='customer'] #customer-workbar #customer-workbar-call-service-btn,
[data-page='customer'] #customer-workbar #customer-workbar-call-bill-btn,
[data-page='customer'] #customer-workbar #customer-workbar-logout-btn {
  min-height: 2.5rem !important;
  border-radius: 0.72rem !important;
  box-shadow: none !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

[data-page='customer'] #customer-workbar #customer-workbar-call-service-btn {
  border: 1px solid rgba(251, 191, 36, 0.65) !important;
  background: #fbbf60 !important;
  color: #281604 !important;
}

[data-page='customer'] #customer-workbar #customer-workbar-call-bill-btn {
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
  background: rgba(6, 78, 59, 0.42) !important;
  color: #6ee7b7 !important;
}

[data-page='customer'] #customer-workbar #customer-workbar-logout-btn {
  border: 0 !important;
  background: transparent !important;
  color: #fca5a5 !important;
}

[data-page='customer'] #customer-workbar #customer-workbar-logout-btn svg {
  color: #fca5a5 !important;
}

[data-page='customer'] #customer-right-quickbar {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (min-width: 744px) {
  [data-page='customer'] #customer-workbar {
    top: 0 !important;
  }

  [data-page='customer'] #customer-main-scroll {
    padding-top: 5.75rem !important;
  }

  [data-page='customer'] #customer-right-quickbar-frame {
    position: fixed !important;
    left: var(--os-customer-workbar-width);
    right: 0;
    top: var(--os-customer-header-ch, 0px);
    z-index: 60;
    margin-bottom: 0 !important;
    padding: 0.85rem 1.25rem !important;
    background: rgba(8, 11, 20, 0.96) !important;
    border-bottom: 1px solid rgba(51, 65, 85, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  [data-page='customer'] #customer-right-quickbar {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 1.35rem !important;
    padding: 0 !important;
  }

  [data-page='customer'] #customer-right-quickbar > .relative {
    flex: 0 0 auto;
    width: min(10.25rem, 22vw);
  }

  [data-page='customer'] #customer-right-quickbar-guest-trigger {
    min-height: 2.65rem !important;
    width: 100% !important;
    border-radius: 999px !important;
    border: 1px solid rgba(100, 116, 139, 0.65) !important;
    background: rgba(31, 41, 55, 0.88) !important;
    color: #e5e7eb !important;
    box-shadow: none !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  [data-page='customer'] #customer-right-quickbar-guest-menu {
    min-width: 100% !important;
    max-width: none !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(71, 85, 105, 0.85) !important;
    background: rgba(15, 23, 42, 0.98) !important;
    padding: 0.45rem !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35) !important;
  }

  [data-page='customer'] #customer-right-quickbar-orders-btn {
    min-height: 2.65rem !important;
    width: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #d1d5db !important;
    box-shadow: none !important;
    padding: 0 0.25rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  [data-page='customer'] #customer-right-quickbar-orders-btn:hover {
    color: #f9fafb !important;
    background: transparent !important;
  }

  [data-page='customer'] #customer-right-quickbar-cart-btn {
    margin-left: auto;
    min-height: 2.7rem !important;
    width: auto !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #10b981 !important;
    color: #062116 !important;
    box-shadow: 0 14px 30px rgba(16, 185, 129, 0.22) !important;
    padding: 0.65rem 1.65rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }

  [data-page='customer'] #customer-right-quickbar-cart-btn:hover {
    background: #34d399 !important;
  }
}

@media (min-width: 1280px) {
  [data-page='customer'] #customer-right-quickbar-frame {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

[data-page='customer'] #customer-menu-head-surface {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0.15rem !important;
  padding-right: 0.15rem !important;
}

[data-page='customer'] [data-ui='customer.menuTitle'] {
  font-size: 2rem !important;
  letter-spacing: 0.01em !important;
  text-shadow: none !important;
}

[data-page='customer'] [data-dish-card] {
  border-color: #2a3245 !important;
  background: linear-gradient(180deg, #171d29 0%, #121823 100%) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3) !important;
}

[data-page='customer'] [data-dish-card] [data-dish-card-media] {
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.customer-toast {
  position: fixed;
  left: 50%;
  top: max(1rem, env(safe-area-inset-top));
  z-index: 500;
  display: inline-flex;
  min-width: min(20rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  transform: translate(-50%, -0.75rem) scale(0.98);
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.45);
  background: rgba(15, 23, 42, 0.96);
  padding: 0.85rem 1.15rem;
  color: #ecfdf5;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition: opacity 0.2s ease, transform 0.24s var(--ease-out-expo);
}

.customer-toast.is-visible {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

.customer-toast-dot {
  width: 0.65rem;
  height: 0.65rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 0 0.3rem rgba(52, 211, 153, 0.13);
}

.customer-toast--error {
  border-color: rgba(248, 113, 113, 0.48);
  color: #fee2e2;
}

.customer-toast--error .customer-toast-dot {
  background: #f87171;
  box-shadow: 0 0 0 0.3rem rgba(248, 113, 113, 0.13);
}