/* ==========================================================================
   海滨城AKnuts德州酒吧 · 点单
   暗黑霓虹 / 紫红主调
   ========================================================================== */

:root {
  --ink: #0a0908;
  --ink-2: #0e0c0a;
  --panel: #14110d;
  --panel-2: #1b170f;
  --panel-3: #221c14;
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.14);

  --mag: #c9a25c;
  --mag-soft: #d9b779;
  --vio: #8a6b3f;
  --cyan: #a7a294;
  --ok: #8fae86;
  --warn: #d9b779;
  --danger: #c2705f;

  --text: #f3ede2;
  --text-2: #cfc6b5;
  --dim: #8b8273;
  --dim-2: #5f594e;

  --radius: 18px;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  --glow-mag: 0 0 0 1px rgba(201, 162, 92, 0.35), 0 10px 30px -8px rgba(201, 162, 92, 0.45);

  --font: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

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

html,
body {
  min-height: 100%;
}

body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(201, 162, 92, 0.16), transparent 62%),
    radial-gradient(900px 560px at 104% 4%, rgba(138, 107, 63, 0.15), transparent 58%),
    radial-gradient(700px 700px at 50% 120%, rgba(167, 162, 148, 0.06), transparent 60%),
    var(--ink);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

input,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: rgba(201, 162, 92, 0.35);
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------------- 启动态 ---------------- */

.boot {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--dim);
  letter-spacing: 0.12em;
  font-size: 13px;
}

.boot-mark {
  font-size: 40px;
  color: var(--mag);
  animation: bootPulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(201, 162, 92, 0.8));
}

@keyframes bootPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   顾客端
   ========================================================================== */

.order-app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
  position: relative;
}

/* 顶部 */
.shop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: calc(22px + env(safe-area-inset-top)) 20px 14px;
}

.shop-title h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  background: linear-gradient(96deg, #fff 8%, var(--mag-soft) 52%, var(--vio) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.shop-title p {
  margin-top: 7px;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--dim);
  text-transform: uppercase;
}

.head-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.035);
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  transition: 0.18s;
}

.head-btn:active {
  transform: scale(0.96);
  background: rgba(255, 255, 255, 0.08);
}

.head-btn .badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mag);
  color: #1a0310;
  font-size: 11px;
  font-weight: 800;
  display: inline-grid;
  place-content: center;
  box-shadow: 0 0 12px rgba(201, 162, 92, 0.7);
}

.head-btn .badge[hidden] {
  display: none;
}

/* 我的进行中订单条 */
.active-strip {
  margin: 4px 16px 10px;
  padding: 13px 15px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(120deg, rgba(201, 162, 92, 0.14), rgba(138, 107, 63, 0.09));
  display: flex;
  align-items: center;
  gap: 13px;
  animation: stripIn 0.35s ease;
}

@keyframes stripIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.active-strip .no {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1;
}

.active-strip .meta {
  flex: 1;
  min-width: 0;
}

.active-strip .meta b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.active-strip .meta span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--dim);
}

.active-strip .go {
  font-size: 12px;
  color: var(--mag-soft);
  white-space: nowrap;
}

/* 分类导航 */
.cat-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 16px;
  scrollbar-width: none;
  background: linear-gradient(180deg, rgba(6, 4, 10, 0.96) 30%, rgba(6, 4, 10, 0.72) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cat-nav::-webkit-scrollbar {
  display: none;
}

.cat-chip {
  flex: 0 0 auto;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--dim);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.045);
  transition: 0.2s;
  white-space: nowrap;
}

.cat-chip.active {
  color: #fff;
  border-color: rgba(201, 162, 92, 0.55);
  background: linear-gradient(120deg, rgba(201, 162, 92, 0.22), rgba(138, 107, 63, 0.18));
  box-shadow: 0 0 18px -6px rgba(201, 162, 92, 0.8);
  font-weight: 600;
}

/* 分类页顶栏 */
.cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(18px + env(safe-area-inset-top)) 18px 14px;
}

.back-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.cat-head-txt {
  flex: 1;
  min-width: 0;
}

.cat-head-txt h1 {
  font-size: 20px;
  font-weight: 750;
  letter-spacing: 0.02em;
  background: linear-gradient(96deg, #fff, var(--mag-soft) 60%, var(--vio));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cat-head-txt p {
  margin-top: 4px;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--dim-2);
}

/* 排行榜主卡：和入场券同尺寸，换一套冷色 */
.hero-rank {
  border-color: rgba(167, 162, 148, 0.32);
  background: linear-gradient(120deg, rgba(167, 162, 148, 0.16), rgba(138, 107, 63, 0.14) 55%, rgba(255, 255, 255, 0.02));
}

.hero-rank .hero-glow {
  background: radial-gradient(circle, rgba(167, 162, 148, 0.35), transparent 65%);
}

.hero-rank .hero-kicker {
  color: var(--cyan);
}

.hero-rank .hero-from {
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* 排行榜页面 */
.rk {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 20px 40px;
}

.rk-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 8px 0 18px;
}

.rk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
}

.rk-row.top {
  border-color: rgba(217, 183, 121, 0.32);
  background: linear-gradient(150deg, rgba(217, 183, 121, 0.12), rgba(255, 255, 255, 0.012));
}

.rk-idx {
  width: 28px;
  text-align: center;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--dim);
}

.rk-name {
  flex: 1;
  font-size: 15px;
  font-weight: 650;
}

.rk-events {
  font-size: 11.5px;
  color: var(--dim-2);
}

.rk-points {
  min-width: 58px;
  text-align: right;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}

.rk-points i {
  font-style: normal;
  font-size: 10px;
  color: var(--dim);
  margin-left: 3px;
}

.rk-tip {
  font-size: 11.5px;
  line-height: 1.7;
  text-align: center;
  color: var(--dim-2);
}

/* 入场券主卡（核心商品） */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% - 32px);
  margin: 0 16px 14px;
  padding: 18px 16px;
  border-radius: 22px;
  border: 1px solid rgba(201, 162, 92, 0.4);
  background: linear-gradient(120deg, rgba(201, 162, 92, 0.22), rgba(138, 107, 63, 0.14) 55%, rgba(255, 255, 255, 0.02));
  text-align: left;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: 0.18s;
}

.hero:active {
  transform: scale(0.985);
}

.hero-glow {
  position: absolute;
  right: -30px;
  top: -60px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 92, 0.4), transparent 65%);
  pointer-events: none;
}

.hero-ico {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-kicker {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--mag-soft);
}

.hero-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hero-sub {
  font-size: 11.5px;
  color: var(--text-2);
  opacity: 0.75;
}

.hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.hero-from {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 750;
  color: #fff;
  white-space: nowrap;
}

.hero-arrow {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
}

/* 首页分类入口 */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 4px 16px 10px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 126px;
  padding: 17px 16px 15px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
  text-align: left;
  overflow: hidden;
  transition: 0.18s;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 90px at 100% 0%, rgba(201, 162, 92, 0.14), transparent 70%);
  pointer-events: none;
}

.tile:active {
  transform: scale(0.975);
  border-color: rgba(201, 162, 92, 0.4);
}

.tile-ico {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: linear-gradient(150deg, rgba(201, 162, 92, 0.22), rgba(138, 107, 63, 0.13));
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 2px;
}

.tile-name {
  font-size: 15.5px;
  font-weight: 650;
}

.tile-meta {
  font-size: 11px;
  color: var(--dim);
}

/* 卡片是奇数个时，最后一张居中，不留半格空位 */
.tile-grid > .tile:nth-child(odd):last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 6px);
}

/* 门店信息 */
.shop-info {
  margin: 2px 16px 20px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 12px;
  color: var(--dim);
}

.info-row b {
  color: var(--text-2);
  font-weight: 600;
}

.info-rule {
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  line-height: 1.7;
  color: var(--dim-2);
}

/* 搜索 */
.search-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 16px 12px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
}

.search-ico {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--dim);
}

.search-input {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--text);
  background: none;
  border: 0;
  outline: none;
}

.search-input::placeholder {
  color: var(--dim-2);
}

.search-input::-webkit-search-cancel-button {
  filter: invert(0.55);
}

.empty-ico {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  color: var(--dim-2);
}

.menu > .cat-sec-desc {
  margin-top: 6px;
}

/* 菜单 */
.menu {
  padding: 6px 16px 10px;
}

.cat-sec {
  padding-top: 18px;
  scroll-margin-top: 62px;
}

.cat-sec-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 0 2px 11px;
}

.cat-sec-head h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cat-sec-head em {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--dim-2);
  text-transform: uppercase;
}

.cat-sec-head .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
}

.cat-sec-desc {
  padding: 0 2px 12px;
  margin-top: -6px;
  font-size: 11.5px;
  color: var(--dim-2);
}

/* 商品卡 */
.dish {
  display: flex;
  align-items: stretch;
  gap: 13px;
  width: 100%;
  padding: 13px;
  margin-bottom: 9px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: 0.18s;
}

.dish::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 80px at 100% 0%, rgba(201, 162, 92, 0.12), transparent 70%);
  opacity: 0;
  transition: 0.25s;
  pointer-events: none;
}

.dish:active {
  transform: scale(0.985);
  border-color: rgba(201, 162, 92, 0.35);
}

.dish:active::after {
  opacity: 1;
}

.dish-emoji {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: grid;
  place-content: center;
  font-size: 27px;
  background:
    linear-gradient(150deg, rgba(201, 162, 92, 0.22), rgba(138, 107, 63, 0.13)),
    var(--panel-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1;
}

.dish-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 1px;
}

.dish-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.dish-name .sig {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2.5px 6px;
  border-radius: 5px;
  color: #f0e3c9;
  background: linear-gradient(120deg, rgba(201, 162, 92, 0.5), rgba(201, 162, 92, 0.18));
  border: 1px solid rgba(201, 162, 92, 0.5);
}

.dish-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dish-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--dim-2);
}

.dish-meta i {
  font-style: normal;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-2);
}

.dish-meta i.abv {
  color: var(--cyan);
  background: rgba(167, 162, 148, 0.09);
}

.dish-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 0;
}

.price {
  font-size: 17px;
  font-weight: 750;
  font-family: var(--mono);
  letter-spacing: -0.02em;
  color: #fff;
}

.price small {
  font-size: 11px;
  font-weight: 500;
  color: var(--mag-soft);
  margin-right: 1px;
}

.plus {
  width: 29px;
  height: 29px;
  border-radius: 999px;
  display: grid;
  place-content: center;
  font-size: 19px;
  line-height: 1;
  color: var(--mag);
  border: 1.5px solid rgba(201, 162, 92, 0.6);
  background: rgba(201, 162, 92, 0.12);
  transition: 0.16s;
}

.dish:active .plus {
  background: var(--mag);
  color: #fff;
  box-shadow: 0 0 18px rgba(201, 162, 92, 0.8);
}

/* 底部购物车 */
.cart-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  pointer-events: none;
  opacity: 0;
  transform: translateY(120%);
  transition: 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.cart-dock.show {
  opacity: 1;
  transform: translateY(0);
}

.cart-bar {
  pointer-events: auto;
  width: 100%;
  max-width: 488px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 11px 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 92, 0.32);
  background: linear-gradient(115deg, rgba(38, 14, 30, 0.96), rgba(28, 15, 40, 0.96));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 45px -14px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 40px -16px rgba(201, 162, 92, 0.7);
}

.cart-bar .left {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.cart-bar .count {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-content: center;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 800;
  background: linear-gradient(140deg, var(--mag), #8a6b3f);
  box-shadow: 0 0 20px rgba(201, 162, 92, 0.6);
  color: #fff;
}

.cart-bar .sum b {
  display: block;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.cart-bar .sum span {
  display: block;
  font-size: 10.5px;
  color: var(--dim);
  margin-top: 1px;
}

.cart-bar .submit {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #17130c;
  background: linear-gradient(110deg, #d9b779, #c9a25c 55%, #a8823f);
  box-shadow: 0 8px 24px -8px rgba(201, 162, 92, 0.9);
  transition: 0.16s;
}

.cart-bar .submit:active {
  transform: scale(0.96);
}

/* ---------------- 弹层 ---------------- */

.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet-dim {
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 6, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.22s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

.sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  border-radius: 26px 26px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  background: linear-gradient(180deg, #1b1029 0%, #120b1c 42%, #0c0813 100%);
  box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, 0.95);
  animation: sheetUp 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: env(safe-area-inset-bottom);
}

@keyframes sheetUp {
  from {
    transform: translateY(100%);
  }
}

.sheet-head {
  position: relative;
  padding: 16px 20px 12px;
  flex: 0 0 auto;
}

.sheet-head::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
}

.sheet-head h3 {
  font-size: 17px;
  font-weight: 700;
}

.sheet-head p {
  margin-top: 4px;
  font-size: 12px;
  color: var(--dim);
}

.sheet-close {
  position: absolute;
  top: 15px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-content: center;
  font-size: 17px;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.07);
}

.sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 20px 16px;
  overscroll-behavior: contain;
}

.sheet-foot {
  flex: 0 0 auto;
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(10, 7, 15, 0.9);
  backdrop-filter: blur(12px);
}

/* 商品详情弹层 */
.dish-hero {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 4px 0 16px;
}

.dish-hero .big {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: grid;
  place-content: center;
  font-size: 37px;
  background: linear-gradient(150deg, rgba(201, 162, 92, 0.25), rgba(138, 107, 63, 0.14));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dish-hero h4 {
  font-size: 19px;
  font-weight: 700;
}

.dish-hero .en {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--dim-2);
}

.dish-hero .desc {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--dim);
}

.opt-group {
  padding: 14px 0 2px;
}

.opt-group + .opt-group {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.opt-label {
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.opt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.opt-chip {
  padding: 9px 15px;
  border-radius: 11px;
  font-size: 13px;
  color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.04);
  transition: 0.16s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.opt-chip .delta {
  font-size: 11px;
  color: var(--dim);
}

.opt-chip.on {
  color: #fff;
  border-color: rgba(201, 162, 92, 0.7);
  background: linear-gradient(120deg, rgba(201, 162, 92, 0.24), rgba(138, 107, 63, 0.16));
  box-shadow: 0 0 16px -6px rgba(201, 162, 92, 0.9);
}

.opt-chip.on .delta {
  color: var(--mag-soft);
}

.qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 6px;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.qty-row .label {
  font-size: 13px;
  color: var(--text-2);
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.04);
  padding: 3px;
}

.stepper button {
  width: 31px;
  height: 31px;
  border-radius: 999px;
  display: grid;
  place-content: center;
  font-size: 18px;
  color: var(--text-2);
  transition: 0.14s;
}

.stepper button:active {
  background: rgba(255, 255, 255, 0.1);
}

.stepper button:disabled {
  opacity: 0.28;
}

.stepper .val {
  min-width: 30px;
  text-align: center;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
}

.primary-btn {
  width: 100%;
  padding: 15px;
  border-radius: 15px;
  font-size: 15.5px;
  font-weight: 700;
  color: #17130c;
  background: linear-gradient(110deg, #d9b779, #c9a25c 55%, #a8823f);
  box-shadow: 0 12px 30px -12px rgba(201, 162, 92, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: 0.16s;
}

.primary-btn:active {
  transform: scale(0.98);
}

.primary-btn:disabled {
  opacity: 0.45;
  box-shadow: none;
}

.primary-btn .amt {
  font-family: var(--mono);
  font-weight: 800;
}

.ghost-btn {
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  font-size: 14px;
  color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

/* 购物车行 */
.cart-line {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cart-line .em {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  font-size: 21px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.cart-line .info {
  flex: 1;
  min-width: 0;
}

.cart-line .info b {
  font-size: 14.5px;
  font-weight: 600;
}

.cart-line .opts {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.5;
}

.cart-line .right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cart-line .right .p {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
}

.note-field {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.note-field label {
  display: block;
  font-size: 11.5px;
  color: var(--dim);
  margin-bottom: 7px;
}

.note-field input {
  width: 100%;
  font-size: 14px;
  color: var(--text);
}

.note-field input::placeholder {
  color: var(--dim-2);
}

.cart-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 2px 4px;
}

.cart-sum span {
  font-size: 13px;
  color: var(--dim);
}

.cart-sum b {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 800;
}

.empty {
  padding: 56px 0;
  text-align: center;
  color: var(--dim-2);
  font-size: 13px;
}

.empty .big {
  font-size: 38px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* ---------------- 下单成功 ---------------- */

.done-view {
  padding: 26px 20px 22px;
  text-align: center;
}

.done-badge {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 999px;
  display: grid;
  place-content: center;
  font-size: 27px;
  background: linear-gradient(140deg, rgba(143, 174, 134, 0.25), rgba(167, 162, 148, 0.12));
  border: 1px solid rgba(143, 174, 134, 0.4);
  color: var(--ok);
  box-shadow: 0 0 30px -6px rgba(143, 174, 134, 0.5);
}

.done-view h3 {
  font-size: 19px;
  font-weight: 700;
}

.done-view .tip {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--dim);
}

.pickup-no {
  margin: 22px auto 6px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 34px;
  border-radius: 20px;
  border: 1px solid rgba(201, 162, 92, 0.35);
  background: radial-gradient(120px 80px at 50% 0%, rgba(201, 162, 92, 0.22), transparent 70%),
    rgba(255, 255, 255, 0.03);
}

.pickup-no .cap {
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--dim);
}

.pickup-no .num {
  font-family: var(--mono);
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fff, var(--mag-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(201, 162, 92, 0.55));
}

/* ---------------- 我的订单 ---------------- */

.order-card {
  margin-bottom: 12px;
  padding: 14px 15px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
}

.order-card.hot {
  border-color: rgba(201, 162, 92, 0.4);
  box-shadow: 0 0 30px -14px rgba(201, 162, 92, 0.9);
}

.order-card .top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-card .no {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 800;
}

.order-card .time {
  flex: 1;
  font-size: 11px;
  color: var(--dim-2);
}

.status-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.status-pill.pending {
  color: var(--warn);
  background: rgba(217, 183, 121, 0.13);
  border: 1px solid rgba(217, 183, 121, 0.3);
}

.status-pill.making {
  color: var(--cyan);
  background: rgba(167, 162, 148, 0.11);
  border: 1px solid rgba(167, 162, 148, 0.3);
}

.status-pill.done {
  color: var(--ok);
  background: rgba(143, 174, 134, 0.12);
  border: 1px solid rgba(143, 174, 134, 0.32);
}

.status-pill.cancelled {
  color: var(--dim-2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.order-items {
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-2);
}

.order-items .q {
  color: var(--mag-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  margin-right: 4px;
}

.order-items .o {
  color: var(--dim-2);
  font-size: 11px;
  margin-left: 5px;
}

.order-card .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: var(--dim);
}

.order-card .foot b {
  font-family: var(--mono);
  font-size: 15px;
  color: #fff;
}

.pickup-hint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.6;
  color: #d8ffe9;
  background: rgba(143, 174, 134, 0.1);
  border: 1px solid rgba(143, 174, 134, 0.25);
}

/* ---------------- 叫号横幅 ---------------- */

.call-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  padding: calc(12px + env(safe-area-inset-top)) 14px 0;
  pointer-events: none;
}

.call-banner {
  pointer-events: auto;
  width: 100%;
  max-width: 492px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border-radius: 17px;
  color: #06170f;
  background: linear-gradient(115deg, #5cf7b0, #8fae86 45%, #22c9d8);
  box-shadow: 0 16px 40px -12px rgba(143, 174, 134, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  animation: callIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes callIn {
  from {
    opacity: 0;
    transform: translateY(-120%);
  }
}

.call-banner .ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-content: center;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.14);
  animation: ring 1s ease-in-out infinite;
}

@keyframes ring {
  0%,
  100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-14deg);
  }
  40% {
    transform: rotate(12deg);
  }
  60% {
    transform: rotate(-8deg);
  }
  80% {
    transform: rotate(6deg);
  }
}

.call-banner .txt {
  flex: 1;
  min-width: 0;
}

.call-banner .txt b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.call-banner .txt span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  opacity: 0.72;
}

.call-banner .num {
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 800;
}

.call-banner .x {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-content: center;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.55);
  background: rgba(0, 0, 0, 0.1);
}

/* ---------------- Toast ---------------- */

.toast-layer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(104px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  max-width: 82vw;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px;
  color: #fff;
  background: rgba(28, 18, 40, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.9);
  animation: toastIn 0.25s ease;
  backdrop-filter: blur(14px);
}

.toast.bad {
  border-color: rgba(194, 112, 95, 0.5);
  color: #ffd6de;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}

/* ==========================================================================
   吧台端
   ========================================================================== */

.bar-app {
  min-height: 100dvh;
  padding: 0 0 40px;
}

.bar-head {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: calc(16px + env(safe-area-inset-top)) 22px 14px;
  background: linear-gradient(180deg, rgba(6, 4, 10, 0.97) 60%, rgba(6, 4, 10, 0.55));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bar-head-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.bar-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.bar-brand h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: linear-gradient(96deg, #fff, var(--mag-soft) 60%, var(--vio));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bar-brand span {
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--dim);
}

.bar-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  font-size: 11.5px;
  color: var(--dim);
}

.stat b {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 750;
  color: var(--text);
}

.stat.hot b {
  color: var(--warn);
}

.bar-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  transition: 0.16s;
  white-space: nowrap;
}

.tool-btn:active {
  transform: scale(0.96);
}

.tool-btn.on {
  color: #17130c;
  background: linear-gradient(110deg, #d9b779, var(--mag));
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 0 22px -8px rgba(201, 162, 92, 0.9);
}

.conn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--dim);
}

.conn .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 10px var(--ok);
  animation: blink 2s ease-in-out infinite;
}

.conn.off .dot {
  background: var(--danger);
  box-shadow: 0 0 10px var(--danger);
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 22px;
  align-items: start;
}

.col {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.018);
  min-height: calc(100dvh - 190px);
  display: flex;
  flex-direction: column;
}

.col-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 15px 11px;
  position: sticky;
  top: 86px;
  z-index: 5;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(10, 7, 16, 0.98), rgba(10, 7, 16, 0.86));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.col-head h2 {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.col-head .n {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-grid;
  place-content: center;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.col[data-status="pending"] .col-head {
  border-bottom-color: rgba(217, 183, 121, 0.25);
}
.col[data-status="pending"] .col-head h2 {
  color: var(--warn);
}
.col[data-status="pending"] .col-head .n {
  background: var(--warn);
  color: #2a1a00;
}

.col[data-status="making"] .col-head {
  border-bottom-color: rgba(167, 162, 148, 0.22);
}
.col[data-status="making"] .col-head h2 {
  color: var(--cyan);
}
.col[data-status="making"] .col-head .n {
  background: var(--cyan);
  color: #001e26;
}

.col[data-status="done"] .col-head {
  border-bottom-color: rgba(143, 174, 134, 0.22);
}
.col[data-status="done"] .col-head h2 {
  color: var(--ok);
}
.col[data-status="done"] .col-head .n {
  background: var(--ok);
  color: #00200f;
}

.col-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.col-empty {
  padding: 26px 10px 30px;
  text-align: center;
  font-size: 12px;
  color: var(--dim-2);
  letter-spacing: 0.04em;
}

/* 订单卡 */
.ocard {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
  padding: 12px 13px;
  position: relative;
}

.ocard.fresh {
  animation: cardIn 0.3s ease;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

.ocard.fresh::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  border: 1px solid rgba(217, 183, 121, 0.65);
  pointer-events: none;
  animation: freshPulse 1.6s ease-out 3;
}

@keyframes freshPulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

.ocard[data-status="pending"] {
  border-left-color: var(--warn);
}
.ocard[data-status="making"] {
  border-left-color: var(--cyan);
}
.ocard[data-status="done"] {
  border-left-color: var(--ok);
}

.ocard-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.ocard-no {
  font-family: var(--mono);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
}

.ocard-top .ago {
  flex: 1;
  font-size: 10.5px;
  color: var(--dim-2);
  text-align: right;
}

.ocard-items {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-2);
}

.ocard-items .row {
  display: flex;
  gap: 7px;
}

.ocard-items .q {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--mag-soft);
  flex: 0 0 auto;
  min-width: 20px;
}

.ocard-items .nm {
  flex: 1;
}

.ocard-items .op {
  display: block;
  font-size: 10.5px;
  color: var(--dim-2);
  margin-top: -2px;
}

.ocard-note {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #ffe1ac;
  background: rgba(217, 183, 121, 0.09);
  border: 1px dashed rgba(217, 183, 121, 0.3);
}

.ocard-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.ocard-total {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.ocard-foot .spacer {
  flex: 1;
}

.ocard-btn {
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 650;
  transition: 0.15s;
  white-space: nowrap;
}

.ocard-btn:active {
  transform: scale(0.95);
}

.ocard-btn.go {
  color: #17130c;
  background: linear-gradient(110deg, #d9b779, var(--mag));
  box-shadow: 0 6px 18px -8px rgba(201, 162, 92, 0.95);
}

.ocard-btn.go-make {
  color: #001e26;
  background: linear-gradient(110deg, #7fe9ff, var(--cyan));
  box-shadow: 0 6px 18px -8px rgba(167, 162, 148, 0.8);
}

.ocard-btn.soft {
  color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
}

.ocard-btn.danger {
  color: var(--danger);
  border: 1px solid rgba(194, 112, 95, 0.3);
  background: rgba(194, 112, 95, 0.08);
}

.done-meta {
  font-size: 10.5px;
  color: var(--dim-2);
}

/* ---------------- 响应式 ---------------- */

@media (max-width: 940px) {
  .board {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .col {
    min-height: 200px;
  }

  .col-head {
    position: static;
  }

  .bar-head {
    padding-left: 14px;
    padding-right: 14px;
  }

  .bar-head-row {
    gap: 10px;
  }

  .bar-stats {
    order: 3;
    width: 100%;
  }
}

@media (max-width: 380px) {
  .shop-title h1 {
    font-size: 23px;
  }

  .dish-emoji {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .cart-bar .submit {
    padding: 12px 16px;
  }
}

/* ==========================================================================
   主界面（入口页）
   ========================================================================== */

.hub {
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(46px + env(safe-area-inset-top)) 22px 30px;
  display: flex;
  flex-direction: column;
}

.hub-head {
  text-align: center;
  margin-bottom: 34px;
}

.hub-mark {
  font-size: 30px;
  color: var(--mag);
  margin-bottom: 10px;
  filter: drop-shadow(0 0 16px rgba(201, 162, 92, 0.8));
}

.hub-head h1 {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(96deg, #fff, var(--mag-soft) 55%, var(--vio));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hub-head p {
  margin-top: 7px;
  font-size: 9.5px;
  letter-spacing: 0.3em;
  color: var(--dim-2);
}

.hub-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.hub-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  text-decoration: none;
  color: inherit;
  transition: 0.18s;
}

.hub-item:active {
  transform: scale(0.985);
  border-color: rgba(201, 162, 92, 0.4);
}

.hub-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: linear-gradient(150deg, rgba(201, 162, 92, 0.2), rgba(138, 107, 63, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hub-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hub-txt b {
  font-size: 15px;
  font-weight: 650;
}

.hub-txt i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--dim);
}

.hub-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
  white-space: nowrap;
}

.hub-meta.hot {
  color: var(--warn);
}

.hub-arrow {
  font-size: 17px;
  color: var(--dim-2);
}

.hub-foot {
  margin-top: auto;
  padding-top: 28px;
  text-align: center;
  font-size: 12px;
  color: var(--dim-2);
  text-decoration: none;
}

/* ==========================================================================
   营业报表
   ========================================================================== */

.rp {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 20px 40px;
}

.rp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.rp-back {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
}

.rp-head h1 {
  font-size: 19px;
  font-weight: 750;
}

.rp-head p {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--dim);
}

.rp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}

.rp-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rp-card .cap {
  font-size: 10.5px;
  color: var(--dim);
  letter-spacing: 0.06em;
}

.rp-card .big {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.rp-card .sub {
  font-size: 10.5px;
  color: var(--dim-2);
}

.rp-sec {
  margin-bottom: 24px;
}

.rp-sec h2 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-2);
}

.rp-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rp-rank .idx {
  width: 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim-2);
}

.rp-rank .em {
  font-size: 16px;
}

.rp-rank .nm {
  flex: 1;
  font-size: 13px;
}

.rp-rank .amt {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}

.rp-rank .qty {
  width: 38px;
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mag-soft);
}

.rp-empty {
  padding: 24px 0;
  text-align: center;
  font-size: 12px;
  color: var(--dim-2);
}

.rp-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 110px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rp-bar {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.rp-bar .rp-col {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: rgba(255, 255, 255, 0.09);
}

.rp-bar.on .rp-col {
  background: linear-gradient(180deg, var(--mag), rgba(138, 107, 63, 0.5));
  box-shadow: 0 0 12px -4px rgba(201, 162, 92, 0.9);
}

.rp-bar em {
  position: absolute;
  bottom: -15px;
  font-style: normal;
  font-size: 8px;
  color: var(--dim-2);
}

/* 参赛姓名 */
.player-chip {
  display: inline-block;
  margin: 14px auto 0;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  color: #ffe1ac;
  background: rgba(217, 183, 121, 0.12);
  border: 1px solid rgba(217, 183, 121, 0.35);
}

.ocard-player {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: #2a1a00;
  background: linear-gradient(100deg, #ffd166, #d9b779);
}

.name-field {
  border-color: rgba(217, 183, 121, 0.35);
  background: rgba(217, 183, 121, 0.07);
}

.name-field label {
  color: #ffe1ac;
}

/* 管理端 · 比赛票价 */
.ad {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 20px 40px;
}

.ad-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.ad-head h1 {
  font-size: 19px;
  font-weight: 750;
}

.ad-head p {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--dim);
}

.ad-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ad-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
}

.ad-em {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.ad-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ad-info b {
  font-size: 14.5px;
  font-weight: 650;
}

.ad-info i {
  font-style: normal;
  font-size: 11px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-price {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(0, 0, 0, 0.3);
}

.ad-yen {
  font-size: 12px;
  color: var(--mag-soft);
}

.ad-input {
  width: 62px;
  background: none;
  border: 0;
  outline: none;
  color: #fff;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}

.ad-input::-webkit-outer-spin-button,
.ad-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ad-save {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 650;
  color: #17130c;
  background: linear-gradient(110deg, #d9b779, var(--mag));
  white-space: nowrap;
}

.ad-tip {
  margin-top: 16px;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--dim-2);
}

.ad-tip code {
  font-family: var(--mono);
  color: var(--dim);
}

/* 管理端页签 */
.ad-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.ad-tab {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--dim);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.ad-tab.on {
  color: #fff;
  font-weight: 650;
  border-color: rgba(201, 162, 92, 0.5);
  background: linear-gradient(110deg, rgba(201, 162, 92, 0.22), rgba(138, 107, 63, 0.16));
}

/* 积分榜编辑 */
.ad-season {
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 13.5px;
  margin-bottom: 12px;
}

.ad-season:focus {
  outline: none;
  border-color: rgba(201, 162, 92, 0.5);
}

.ad-rank-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ad-rank-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 7px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--dim-2);
}

.ad-rank-head .h-idx {
  width: 20px;
  text-align: center;
}

.ad-rank-head .h-name {
  flex: 1;
}

.ad-rank-head .h-num {
  width: 66px;
  text-align: right;
}

.ad-rank-head .h-del {
  width: 30px;
}

.ad-rank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
}

.ad-rank-idx {
  width: 20px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim-2);
}

.ad-name {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 14px;
}

.ad-num {
  width: 66px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-family: var(--mono);
  font-size: 13px;
  text-align: right;
}

.ad-name:focus,
.ad-num:focus {
  outline: none;
  border-color: rgba(201, 162, 92, 0.5);
}

.ad-del {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--danger);
  border: 1px solid rgba(194, 112, 95, 0.3);
  background: rgba(194, 112, 95, 0.08);
}

.ad-add {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--dim);
  font-size: 13px;
}

.ad-save-all {
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  border-radius: 12px;
  font-weight: 700;
  color: #17130c;
  background: linear-gradient(110deg, #d9b779, var(--mag));
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   付款提示
   ========================================================================== */

.pay-cta {
  margin: 22px auto 6px;
  padding: 15px 18px;
  border-radius: 15px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(100deg, rgba(201, 162, 92, 0.22), rgba(138, 107, 63, 0.16));
  border: 1px solid rgba(201, 162, 92, 0.45);
  box-shadow: 0 0 34px -14px rgba(201, 162, 92, 0.9);
}

.pay-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  text-align: center;
  color: #f0e3c9;
  border: 1px dashed rgba(201, 162, 92, 0.4);
  background: rgba(201, 162, 92, 0.08);
}

.reorder-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 11px;
  font-size: 12.5px;
  color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.reason-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 6px 0 12px;
}

.reason-btn {
  padding: 17px 12px;
  border-radius: 13px;
  font-size: 14px;
  color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  transition: 0.15s;
}

.reason-btn:active {
  transform: scale(0.97);
  border-color: rgba(194, 112, 95, 0.5);
  background: rgba(194, 112, 95, 0.1);
}

/* ==========================================================================
   门店二维码
   ========================================================================== */

.qr-app {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(22px + env(safe-area-inset-top)) 18px 60px;
}

.qr-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.qr-top h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.qr-top p {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--dim);
}

.qr-top .tool-btn {
  flex: 0 0 auto;
  text-decoration: none;
}

.qr-lab {
  display: block;
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 8px;
}

.qr-input {
  display: flex;
  gap: 8px;
}

.qr-input input {
  flex: 1;
  min-width: 0;
  padding: 13px 15px;
  border-radius: 13px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--mono);
  font-size: 13.5px;
}

.qr-input .tool-btn {
  flex: 0 0 auto;
  padding: 0 20px;
}

.qr-warn {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
  background: rgba(167, 162, 148, 0.07);
  border: 1px solid rgba(167, 162, 148, 0.2);
}

.qr-warn.ok {
  color: #d8ffe9;
  background: rgba(143, 174, 134, 0.08);
  border-color: rgba(143, 174, 134, 0.26);
}

.qr-warn.bad {
  color: #ffe1ac;
  background: rgba(217, 183, 121, 0.1);
  border-color: rgba(217, 183, 121, 0.32);
}

.qr-card {
  margin: 24px auto 18px;
  max-width: 420px;
  background: #fff;
  color: #111;
  border-radius: 22px;
  padding: 26px 22px 20px;
  text-align: center;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
}

.qr-shop {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.qr-sub {
  margin-top: 5px;
  font-size: 9.5px;
  letter-spacing: 0.32em;
  color: #9a9a9a;
}

.qr-card canvas {
  display: block;
  margin: 18px auto 12px;
}

.qr-hint {
  font-size: 13px;
  color: #333;
  letter-spacing: 0.02em;
}

.qr-url {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: #9a9a9a;
  word-break: break-all;
}

.qr-actions {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}

.qr-actions .primary-btn {
  flex: 1.4;
}

.qr-actions .ghost-btn {
  flex: 1;
}

.qr-tip {
  margin: 22px auto 0;
  max-width: 420px;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--dim-2);
}

.qr-tip code {
  font-family: var(--mono);
  color: var(--dim);
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
}

@media print {
  body {
    background: #fff !important;
  }

  .qr-no-print {
    display: none !important;
  }

  .qr-app {
    padding: 0;
    max-width: none;
  }

  .qr-card {
    margin: 0 auto;
    max-width: 100%;
    padding: 10mm;
    box-shadow: none;
    border-radius: 0;
  }

  .qr-card canvas {
    width: 90mm !important;
    height: 90mm !important;
  }
}

/* ============================================================
   黑金主题 · 皮肤层（覆盖在结构样式之上）
   ============================================================ */

:root {
  --serif: "Songti SC", "SimSun", "STSong", Georgia, serif;
}

/* 胶片颗粒 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
}

body {
  background:
    radial-gradient(1000px 640px at 18% -12%, #191510, transparent 62%),
    radial-gradient(760px 520px at 100% 2%, #14110d, transparent 60%),
    #0a0908;
}

/* 标题统一衬线 */
.shop-title h1,
.hub-head h1,
.cat-head-txt h1,
.rp-head h1,
.bar-brand h1,
.qr-top h1,
.sheet-head h3,
.done-view h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.12em;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}

/* 卡片：去玻璃感，收敛描边 */
.dish,
.order-card,
.rp-card,
.hub-item,
.tile,
.ocard {
  border-radius: 18px;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}

.dish::after {
  display: none;
}

/* 图标底座 */
.dish-emoji,
.tile-ico,
.cart-line .em,
.hub-ico,
.hero-ico {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--mag);
}

.dish-emoji svg { width: 26px; height: 26px; }
.tile-ico svg { width: 22px; height: 22px; }
.cart-line .em svg { width: 20px; height: 20px; }
.hub-ico svg { width: 22px; height: 22px; }
.hero-ico svg { width: 25px; height: 25px; }

/* 主按钮 */
.primary-btn,
.cart-bar .submit,
.ad-save,
.ad-save-all {
  background: var(--mag);
  color: #17130c;
  box-shadow: none;
  border-radius: 12px;
  letter-spacing: 0.06em;
}

/* 弹层 */
.sheet {
  background: #100e0b;
  border-color: var(--line);
}

.sheet-foot {
  background: rgba(10, 9, 8, 0.94);
}

/* 主卡 */
.hero {
  border-radius: 20px;
  box-shadow: none;
}

.hero-title {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.hero-kicker {
  font-size: 9px;
  letter-spacing: 0.26em;
}

/* 价格与号码用衬线 */
.dish .price,
.pickup-no .num,
.rp-card .big {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* 榜单序号 */
.rk-idx.top {
  color: var(--mag);
}

/* ============================================================
   管理端：浅色工具风（刻意与品牌视觉分开）
   ============================================================ */

body.admin-mode {
  background: #f4f3f0;
  --text: #1b1916;
  --text-2: #3c3934;
  --dim: #6d6862;
  --dim-2: #9c978f;
  --line: rgba(27, 25, 22, 0.1);
  --line-strong: rgba(27, 25, 22, 0.16);
  --panel: #ffffff;
  --mag: #2f5ec4;
  --mag-soft: #5b83d8;
}

body.admin-mode::after {
  display: none;
}

body.admin-mode .ad-head h1 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1b1916;
}

body.admin-mode .ad-head p {
  color: #6d6862;
}

body.admin-mode .rp-back {
  color: #3c3934;
  border-color: rgba(27, 25, 22, 0.14);
  background: #fff;
}

body.admin-mode .ad-row,
body.admin-mode .ad-rank-row {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.09);
}

body.admin-mode .ad-em {
  background: #f4f3f0;
  border-color: rgba(27, 25, 22, 0.08);
}

body.admin-mode .ad-input,
body.admin-mode .ad-season,
body.admin-mode .ad-name,
body.admin-mode .ad-num {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.14);
  color: #1b1916;
}

body.admin-mode .ad-tab {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.14);
  color: #6d6862;
}

body.admin-mode .ad-tab.on {
  background: var(--mag);
  border-color: var(--mag);
  color: #fff;
}

body.admin-mode .ad-save,
body.admin-mode .ad-save-all {
  background: var(--mag);
  color: #fff;
}

body.admin-mode .ad-del {
  color: #b4423a;
  border-color: rgba(180, 66, 58, 0.28);
  background: rgba(180, 66, 58, 0.07);
}

body.admin-mode .ad-add {
  border-color: rgba(27, 25, 22, 0.2);
  color: #6d6862;
}

body.admin-mode .ad-tip,
body.admin-mode .ad-rank-head {
  color: #9c978f;
}
/* 菜品列表：去掉重复的分类图标，改成纯排版 */
.dish-emoji {
  display: none;
}

.dish {
  padding: 17px 16px;
  gap: 0;
}

.dish-name,
.tile-name,
.hub-txt b,
.rk-name,
.cart-line .info b,
.order-card .no,
.ocard-no {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* 搜索框收敛成一根线 */
.search-wrap {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  padding: 10px 2px;
  margin: 0 18px 16px;
}

/* 标签去掉底色，只留描边 */
.dish-meta i {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.dish-name .sig {
  background: transparent;
  color: var(--mag);
  border: 1px solid var(--line-strong);
  letter-spacing: 0.1em;
}
/* 拉丁字母优先用 Georgia，中文回落到宋体，避免 All In 看成 A11 In */
:root {
  --serif: Georgia, "Times New Roman", "Songti SC", "SimSun", "STSong", serif;
}
/* 管理端：价格输入框收紧 */
body.admin-mode .ad-price {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.14);
  padding: 9px 12px;
  gap: 4px;
}

body.admin-mode .ad-input {
  background: transparent;
  border: 0;
  color: #1b1916;
}

body.admin-mode .ad-yen {
  color: #9c978f;
  font-size: 13px;
}

body.admin-mode .ad-em svg {
  width: 20px;
  height: 20px;
  stroke: #3c3934;
}

body.admin-mode .ad-info b {
  font-weight: 600;
}
/* ============================================================
   后台统一：浅色工具风（看板 / 报表 / 管理 / 二维码 / 入口）
   ============================================================ */

body.admin-mode {
  --warn: #b8862f;
  --ok: #2f7a4f;
  --cyan: #2a6f9e;
  --vio: #6b6862;
  --mag-soft: #5b83d8;
  --danger: #b4423a;
}

.staff-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 22px 0;
}

.staff-tab {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  color: #6d6862;
  border: 1px solid rgba(27, 25, 22, 0.14);
  background: #fff;
}

.staff-tab.on {
  background: #2f5ec4;
  border-color: #2f5ec4;
  color: #fff;
  font-weight: 600;
}

/* 看板 */
body.admin-mode .bar-head {
  background: #f4f3f0;
  border-bottom: 1px solid rgba(27, 25, 22, 0.08);
}

body.admin-mode .bar-brand h1 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #1b1916;
}

body.admin-mode .bar-brand span {
  color: #9c978f;
}

body.admin-mode .stat {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.1);
  color: #6d6862;
}

body.admin-mode .stat b {
  color: #1b1916;
}

body.admin-mode .stat.hot b {
  color: #b8862f;
}

body.admin-mode .tool-btn {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.14);
  color: #3c3934;
}

body.admin-mode .tool-btn.on {
  background: #2f5ec4;
  border-color: #2f5ec4;
  color: #fff;
}

body.admin-mode .col {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.08);
}

body.admin-mode .col-head {
  background: #fff;
  border-bottom: 1px solid rgba(27, 25, 22, 0.08);
}

body.admin-mode .col-empty {
  color: #9c978f;
}

body.admin-mode .ocard {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.09);
}

body.admin-mode .ocard-no {
  color: #1b1916;
}

body.admin-mode .ocard-btn.go {
  background: #2f5ec4;
  color: #fff;
}

body.admin-mode .ocard-btn.soft {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.16);
  color: #3c3934;
}

body.admin-mode .ocard-btn.danger {
  background: #fff;
  border-color: rgba(180, 66, 58, 0.3);
  color: #b4423a;
}

body.admin-mode .ocard-player {
  background: #fdf3d8;
  color: #6b4a00;
}

body.admin-mode .ocard-note {
  background: #fff8e6;
  color: #7a5a12;
  border-color: rgba(184, 134, 47, 0.35);
}

/* 入口页 */
body.admin-mode .hub-item {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.09);
}

body.admin-mode .hub-txt i,
body.admin-mode .hub-meta,
body.admin-mode .hub-foot {
  color: #9c978f;
}

body.admin-mode .hub-head h1 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #1b1916;
}

body.admin-mode .hub-ico {
  background: #f4f3f0;
  border-color: rgba(27, 25, 22, 0.08);
  color: #3c3934;
}

/* 报表 */
body.admin-mode .rp-card {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.09);
}

body.admin-mode .rp-rank {
  border-color: rgba(27, 25, 22, 0.08);
}

body.admin-mode .rp-chart {
  border-color: rgba(27, 25, 22, 0.1);
}

body.admin-mode .rp-bar .rp-col {
  background: rgba(27, 25, 22, 0.12);
}

body.admin-mode .rp-bar.on .rp-col {
  background: #2f5ec4;
  box-shadow: none;
}

/* 二维码页 */
body.admin-mode .qr-input input {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.14);
  color: #1b1916;
}

body.admin-mode .qr-card {
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.45);
}
/* 后台：已取消列的计数在浅底上要可见 */
body.admin-mode .col[data-status="cancelled"] .col-head .n {
  background: rgba(27, 25, 22, 0.1);
  color: #3c3934;
}

body.admin-mode .hub-mark {
  color: #1b1916;
  filter: none;
}

body.admin-mode .hub-head p {
  color: #9c978f;
}
/* 后台在手机上的紧凑模式 */
@media (max-width: 600px) {
  body.admin-mode .bar-head {
    padding: 12px 14px 10px;
  }

  body.admin-mode .bar-head-row {
    gap: 8px;
  }

  body.admin-mode .bar-brand h1 {
    font-size: 18px;
  }

  body.admin-mode .bar-brand span {
    display: none;
  }

  body.admin-mode .bar-tools {
    margin-left: auto;
    gap: 6px;
  }

  body.admin-mode .tool-btn {
    padding: 7px 10px;
    font-size: 11.5px;
  }

  body.admin-mode .conn span[data-slot="conn-text"] {
    display: none;
  }

  body.admin-mode .bar-stats {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.admin-mode .bar-stats::-webkit-scrollbar {
    display: none;
  }

  body.admin-mode .stat {
    padding: 5px 10px;
    font-size: 10.5px;
    white-space: nowrap;
  }

  body.admin-mode .stat b {
    font-size: 13px;
  }

  .staff-tabs {
    padding: 10px 14px 0;
  }

  .staff-tab {
    padding: 6px 14px;
    font-size: 12px;
  }

  body.admin-mode .board {
    padding: 10px 14px 20px;
    gap: 12px;
  }

  body.admin-mode .col {
    min-height: 0;
  }

  body.admin-mode .ocard-foot {
    flex-wrap: wrap;
    gap: 6px;
  }
}
/* 手机端：数据行单独占一行（flex:1 会盖掉 width，必须改 basis） */
@media (max-width: 600px) {
  body.admin-mode .bar-stats {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}
/* ============================================================
   后台响应式：窄屏用状态页签 + 单列，宽屏三列
   ============================================================ */

.status-tabs {
  display: none;
}

@media (max-width: 999px) {
  .status-tabs {
    display: flex;
    gap: 8px;
    padding: 0 14px 12px;
  }

  .status-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 11px;
    font-size: 12.5px;
    color: #6d6862;
    background: #fff;
    border: 1px solid rgba(27, 25, 22, 0.12);
  }

  .status-tab b {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(27, 25, 22, 0.08);
    color: #3c3934;
  }

  .status-tab.on {
    background: #2f5ec4;
    border-color: #2f5ec4;
    color: #fff;
  }

  .status-tab.on b {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
  }

  .board .col {
    display: none;
  }

  .board[data-m-status="pending"] .col[data-status="pending"],
  .board[data-m-status="done"] .col[data-status="done"],
  .board[data-m-status="cancelled"] .col[data-status="cancelled"] {
    display: flex;
  }

  /* 页签已经写了状态和数量，列头就不用了 */
  .board .col-head {
    display: none;
  }

  .board {
    padding-top: 0;
    gap: 0;
  }

  .board .col {
    border: 0;
    background: transparent;
  }

  .board .col-body {
    padding: 0;
  }
}
/* 窄屏修正：页签间距 / 单列限宽 / 数据行通栏 */
@media (max-width: 999px) {
  .status-tabs {
    margin-top: 10px;
  }

  body.admin-mode .bar-stats {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  /* 单列时别让卡片横着拉满整个平板 */
  body.admin-mode .board {
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
  }
}
/* 管理端 · 酒单 */
.ad-group {
  margin-bottom: 18px;
}

.ad-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 2px 2px 8px;
  font-size: 11.5px;
  color: #9c978f;
}

.ad-group-head b {
  font-size: 13px;
  font-weight: 600;
  color: #1b1916;
}

.ad-toggle {
  flex: 0 0 auto;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 12px;
  color: #6d6862;
  background: #fff;
  border: 1px solid rgba(27, 25, 22, 0.16);
  white-space: nowrap;
}

.ad-toggle.on {
  color: #2f7a4f;
  border-color: rgba(47, 122, 79, 0.32);
  background: rgba(47, 122, 79, 0.08);
  font-weight: 600;
}

.ad-row.off {
  background: #faf9f7;
}

.ad-row.off .ad-name,
.ad-row.off .ad-input {
  color: #9c978f;
}

.ad-save-all[disabled] {
  opacity: 0.45;
}

@media (max-width: 600px) {
  .ad-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .ad-row .ad-name {
    flex: 1 1 140px;
  }

  .ad-row .ad-price {
    margin-left: auto;
  }
}
/* 手机端：酒单行一行放下「名字 + 价格 + 下架」 */
@media (max-width: 600px) {
  .ad-row {
    flex-wrap: nowrap;
    gap: 7px;
    padding: 10px;
  }

  .ad-row .ad-name {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 9px;
    font-size: 13.5px;
  }

  .ad-row .ad-price {
    flex: 0 0 auto;
    margin-left: 0;
    padding: 9px 8px;
  }

  .ad-row .ad-price .ad-input {
    width: 44px;
    font-size: 13.5px;
  }

  .ad-toggle {
    padding: 8px 10px;
    font-size: 11.5px;
  }

  .ad-row .ad-em {
    width: 34px;
    height: 34px;
  }

  .ad-row .ad-em svg {
    width: 17px;
    height: 17px;
  }
}
/* 管理端新增商品弹层 */
.ad-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}

.ad-field span {
  font-size: 12px;
  color: #6d6862;
}

.ad-field input,
.ad-field select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(27, 25, 22, 0.14);
  background: #fff;
  color: #1b1916;
  font-size: 14px;
  font-family: inherit;
}

.ad-field input:focus,
.ad-field select:focus {
  outline: 2px solid rgba(47, 94, 196, 0.35);
  outline-offset: 1px;
}

/* 后台弹层走浅色 */
body.admin-mode .sheet {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.1);
}

body.admin-mode .sheet-head h3 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0;
  color: #1b1916;
}

body.admin-mode .sheet-head p {
  color: #9c978f;
}

body.admin-mode .sheet-close {
  background: #f4f3f0;
  color: #6d6862;
}

body.admin-mode .sheet-body {
  background: #fff;
}

body.admin-mode .sheet-foot {
  background: #fff;
  border-color: rgba(27, 25, 22, 0.08);
}
/* 后台退出 */
.ad-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ad-logout {
  margin-left: auto;
  padding: 8px 15px;
  border-radius: 9px;
  font-size: 12.5px;
  color: #6d6862;
  background: #fff;
  border: 1px solid rgba(27, 25, 22, 0.16);
}

.hub-logout {
  display: block;
  margin: 16px auto 0;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 12px;
  color: #6d6862;
  background: transparent;
  border: 1px solid rgba(27, 25, 22, 0.14);
}
/* 后台浅色：二维码页提示条 */
body.admin-mode .qr-warn {
  color: #6d6862;
  background: #f4f3f0;
  border-color: rgba(27, 25, 22, 0.1);
}

body.admin-mode .qr-warn.ok {
  color: #2f7a4f;
  background: rgba(47, 122, 79, 0.08);
  border-color: rgba(47, 122, 79, 0.26);
}

body.admin-mode .qr-warn.bad {
  color: #a1680f;
  background: rgba(184, 134, 47, 0.1);
  border-color: rgba(184, 134, 47, 0.32);
}

body.admin-mode .qr-tip code {
  background: rgba(27, 25, 22, 0.06);
  color: #3c3934;
}

body.admin-mode .qr-card canvas {
  max-width: 100%;
}
/* 长店名整体缩小一号，避免折行 */
.shop-title h1.long,
.hub-head h1.long {
  font-size: 19px;
  letter-spacing: 0.05em;
  line-height: 1.25;
}

@media (min-width: 420px) {
  .shop-title h1.long,
  .hub-head h1.long {
    font-size: 21px;
  }
}
/* 管理端 · 门店信息 */
.ad-shop .ad-field textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(27, 25, 22, 0.14);
  background: #fff;
  color: #1b1916;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
}

.ad-shop .ad-field textarea:focus {
  outline: 2px solid rgba(47, 94, 196, 0.35);
  outline-offset: 1px;
}

.ad-shop .ad-field:last-child {
  margin-bottom: 18px;
}
/* 联系电话 */
.info-tel {
  color: var(--mag);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 92, 0.35);
  padding-bottom: 1px;
}
/* 顾客端底部的店员入口（点了还要口令，客人进不去） */
.staff-entry {
  display: block;
  margin: 22px auto 10px;
  padding: 10px;
  width: fit-content;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--dim-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.staff-entry:active {
  color: var(--mag);
}
/* 顾客端 · 优惠券选择 */
.coupon-box {
  margin: 14px 0 4px;
}

.coupon-box label {
  display: block;
  font-size: 11.5px;
  color: var(--dim);
  margin-bottom: 9px;
  letter-spacing: 0.04em;
}

.coupon-opts {
  display: flex;
  gap: 8px;
}

.coupon-opts button {
  flex: 1;
  padding: 11px 8px;
  border-radius: 11px;
  font-size: 13px;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}

.coupon-opts button.on {
  color: #17130c;
  background: var(--mag);
  border-color: var(--mag);
  font-weight: 600;
}

/* 结算小计 */
.sum-line {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--dim);
  padding: 4px 0;
}

.sum-line.off {
  color: var(--mag);
}

.sum-line.off b {
  color: var(--mag);
}

.sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--dim);
}

.sum-total b {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--text);
}

/* 吧台 · 券标记 */
.ocard-coupon {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #6b4a00;
  background: #fdf3d8;
  border: 1px solid rgba(184, 134, 47, 0.35);
}

.ocard-was {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10.5px;
  color: #9c978f;
  text-decoration: line-through;
}
/* 结算汇总改成纵向：票 / 酒水 / 优惠 / 实付 */
.cart-sum {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
}

.cart-sum .sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.cart-sum .sum-line span,
.cart-sum .sum-total span {
  flex: 0 1 auto;
}
/* 券标记要和「参赛」那条区分开：更重、更暖、带边框 */
.ocard-coupon {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 11.5px;
  color: #7a4d00;
  background: #fbe7bd;
  border: 1px solid #e0b25e;
  border-left: 3px solid #b8862f;
}

.ocard-coupon b {
  font-size: 12.5px;
  font-weight: 700;
}

.ocard-coupon span {
  font-size: 11px;
  color: #8a6512;
}

.ocard-paylabel {
  font-style: normal;
  font-size: 10.5px;
  color: #9c978f;
  margin-right: 3px;
}
/* 买券弹层里的图标与券价 */
.dish-hero .big {
  display: grid;
  place-items: center;
  color: var(--mag);
}

.dish-hero .big svg {
  width: 34px;
  height: 34px;
}

.primary-btn .amt .was {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #8a6512;
  font-style: normal;
  text-decoration: line-through;
  opacity: 0.75;
}
/* 结算行里的值统一字号，别继承大号衬线 */
.cart-sum .sum-line b {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.cart-sum .sum-line.coupon-line b {
  color: var(--mag);
  font-weight: 600;
}
/* 买券页顶部的券登记条 */
.coupon-bar {
  margin: 4px 0 16px;
  padding: 15px 15px 14px;
  border-radius: 16px;
  background: rgba(201, 162, 92, 0.07);
  border: 1px solid rgba(201, 162, 92, 0.22);
}

.coupon-bar-label {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 11px;
}

.coupon-bar-label b {
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--mag);
}

.coupon-bar-label span {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--dim);
}
/* 入场券限购标记 */
.limit-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 11.5px;
  color: var(--dim);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}
/* ============================================================
   视觉打磨：过渡、层次、节奏
   ============================================================ */

/* 弹层关闭：收回去，而不是凭空消失 */
.sheet-layer.closing {
  animation: layerOut 0.22s ease forwards;
  pointer-events: none;
}

.sheet-layer.closing .sheet {
  animation: sheetDown 0.22s cubic-bezier(0.4, 0, 0.8, 1) forwards;
}

@keyframes layerOut {
  to { opacity: 0; }
}

@keyframes sheetDown {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

/* 切换分类时：列表淡入 + 每张卡轻微上浮，18ms 递进 */
.list-in {
  animation: listIn 0.2s ease both;
}

.list-in .dish {
  animation: dishIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.list-in .dish:nth-child(1) { animation-delay: 0ms; }
.list-in .dish:nth-child(2) { animation-delay: 18ms; }
.list-in .dish:nth-child(3) { animation-delay: 36ms; }
.list-in .dish:nth-child(4) { animation-delay: 54ms; }
.list-in .dish:nth-child(5) { animation-delay: 72ms; }
.list-in .dish:nth-child(6) { animation-delay: 90ms; }
.list-in .dish:nth-child(7) { animation-delay: 108ms; }
.list-in .dish:nth-child(8) { animation-delay: 126ms; }

@keyframes listIn {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

@keyframes dishIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* 页面切换：整体轻微淡入，避免硬切 */
.page-in {
  animation: pageIn 0.2s ease both;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* 卡片层次：暗色下加一道极细的顶部高光，看起来是"浮"的 */
.hero,
.tile,
.dish,
.hub-item,
.ocard {
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* 弹层统一 24px 顶角 */
.sheet {
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55);
}

/* 后台是浅色，用投影代替内高光 */
body.admin-mode .hub-item,
body.admin-mode .ocard,
body.admin-mode .ad-row,
body.admin-mode .rp-card {
  box-shadow: 0 1px 2px rgba(27, 25, 22, 0.05);
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .list-in,
  .list-in .dish,
  .page-in,
  .sheet-layer.closing,
  .sheet-layer.closing .sheet {
    animation: none;
  }
}
/* ============================================================
   视觉精修：对比、字阶、金色层级
   ============================================================ */

/* 1. 卡片要有实体感：从"半透明浮在背景上"改成有明度的面 */
.tile,
.dish,
.shop-info,
.hub-item,
.rp-card,
.ocard {
  background: linear-gradient(180deg, #17130e 0%, #131009 100%);
  border: 1px solid rgba(243, 237, 226, 0.07);
}

/* 2. 字阶拉开：标题 16、正文 13、微标签 10.5 */
.tile-name,
.dish-name {
  font-size: 16px;
  letter-spacing: 0.05em;
}

.tile-meta {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--dim);
}

.dish-desc {
  font-size: 13px;
  line-height: 1.55;
  color: #9c9284;
}

.dish-meta i {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--dim);
}

/* 3. 价格：数字等宽，衬线，视觉对齐 */
.price,
.hero-from,
.ocard-total,
.sum-total b {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.price {
  font-size: 17px;
}

.price small {
  font-size: 11px;
  opacity: 0.75;
  margin-right: 1px;
}

/* 4. 金色分级：图标退后，价格和主按钮在前 */
.tile-ico,
.dish-emoji,
.hero-ico {
  color: rgba(201, 162, 92, 0.72);
}

.dish .plus {
  color: rgba(201, 162, 92, 0.85);
  border-color: rgba(201, 162, 92, 0.42);
}

/* 5. 首屏主卡：右侧信息右对齐成一条竖线 */
.hero-side {
  align-items: flex-end;
  text-align: right;
}

/* 6. 门店信息卡：行距松一点，规则行淡一点 */
.shop-info {
  padding: 18px 18px 16px;
}

.info-row {
  padding: 7px 0;
}

.info-row span {
  font-size: 12.5px;
  color: var(--dim);
}

.info-row b {
  font-size: 13.5px;
  font-weight: 600;
}

.info-rule {
  font-size: 11px;
  line-height: 1.7;
  color: var(--dim-2);
  margin-top: 10px;
  padding-top: 12px;
}

/* 7. 搜索那根线再淡一点，别抢标题 */
.search-wrap {
  border-bottom-color: rgba(243, 237, 226, 0.14);
}

.search-input {
  font-size: 14px;
}

/* 8. 后台：行高和信息密度微调 */
body.admin-mode .ad-row {
  padding: 11px 12px;
}

body.admin-mode .ad-name {
  font-size: 14px;
}

body.admin-mode .ad-group-head b {
  font-size: 13.5px;
}

body.admin-mode .ad-group-head span {
  font-size: 11px;
}
/* 后台 · 参赛券快捷改价 */
.ad-quick {
  margin-bottom: 18px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(47, 94, 196, 0.18);
  box-shadow: 0 1px 2px rgba(27, 25, 22, 0.05);
}

.ad-quick-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ad-quick-head b {
  font-size: 14.5px;
  font-weight: 700;
  color: #1b1916;
}

.ad-quick-head span {
  font-size: 11px;
  color: #9c978f;
}

.ad-quick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.ad-quick-row .nm {
  flex: 1;
  font-size: 14px;
  color: #1b1916;
}

.ad-quick-row .nm i {
  margin-left: 6px;
  font-style: normal;
  font-size: 10.5px;
  color: #b4423a;
}

.ad-quick-row.off .nm {
  color: #9c978f;
}

.ad-quick .ad-save {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #2f5ec4;
  border: 0;
}

.ad-quick .ad-save:active {
  background: #2a53ad;
}
/* ============ 顾客登记：手机尾号后四位 ============ */
.reg-layer {
  position: fixed; inset: 0; z-index: 900; display: none;
  background: radial-gradient(680px 460px at 50% 0%, #1b1610, #0a0908 65%), #0a0908;
  align-items: center; justify-content: center; padding: 28px;
}
.reg-layer.show { display: flex; animation: fadeIn .2s ease; }

.reg-panel {
  width: 100%; max-width: 340px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.reg-brand {
  font-family: var(--serif); font-size: 25px; letter-spacing: .12em; color: var(--text);
}
.reg-kicker {
  margin-top: 10px; font-size: 8px; letter-spacing: .42em; color: var(--dim-2);
}
.reg-title {
  margin-top: 42px; font-size: 19px; letter-spacing: .08em; color: var(--text);
}
.reg-note {
  margin-top: 12px; font-size: 12px; line-height: 1.8; color: var(--dim);
}
.reg-input {
  margin-top: 30px; width: 100%; padding: 18px 0; text-align: center;
  font-family: var(--serif); font-size: 34px; letter-spacing: .5em; text-indent: .5em;
  color: var(--text); background: rgba(255,255,255,.04);
  border: 1px solid var(--line-strong); border-radius: 14px; outline: none;
}
.reg-input:focus { border-color: rgba(201,162,92,.6); box-shadow: 0 0 0 3px rgba(201,162,92,.12); }
.reg-input::placeholder { color: var(--dim-2); }
.reg-submit { margin-top: 22px; width: 100%; }
.reg-cancel {
  margin-top: 16px; background: none; border: 0; color: var(--dim);
  font-size: 12px; letter-spacing: .1em;
}
.shake { animation: shake .38s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* 首页底部的尾号条 */
.cust-bar {
  margin: 26px auto 0; display: flex; align-items: center; gap: 10px;
  justify-content: center; font-size: 11px; letter-spacing: .12em; color: var(--dim);
}
.cust-bar button {
  background: none; border: 0; padding: 0;
  color: var(--mag); font-size: 11px; letter-spacing: .12em; text-decoration: underline;
}
/* 吧台卡片：手机尾号 */
.ocard-code {
  margin-top: 8px; font-size: 11.5px; letter-spacing: .08em; color: #6d6862;
}
.ocard-code b {
  color: #2f5ec4; letter-spacing: .12em;
}
/* ============ 优惠券入口 ============ */
.hero-coupon {
  box-sizing: border-box; text-align: left; font-family: inherit;
  margin-top: 12px; border: 1px solid rgba(201,162,92,.22);
}
.hero-coupon .hero-ico { color: var(--mag); }
.hero-coupon .hero-from { color: var(--mag); }

.cp-list { display: grid; gap: 10px; }
.cp-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 16px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(243,237,226,.07);
}
.cp-tag {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 13px; letter-spacing: .04em; font-weight: 600;
  color: var(--mag); background: rgba(201,162,92,.12);
  border: 1px solid rgba(201,162,92,.3);
}
.cp-tag.free { color: #f3ede2; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
.cp-main { display: flex; flex-direction: column; gap: 4px; }
.cp-main b { font-size: 15px; letter-spacing: .04em; color: var(--text); }
.cp-main span { font-size: 11.5px; color: var(--dim); letter-spacing: .04em; }

.cp-note {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(243,237,226,.06);
}
.cp-note p { font-size: 11.5px; line-height: 1.9; color: var(--dim); }
.cp-note p + p { margin-top: 4px; }

.coupon-cta {
  margin-top: 18px; width: 100%; padding: 15px;
  border-radius: 13px; border: 1px solid rgba(201,162,92,.4);
  background: rgba(201,162,92,.1); color: var(--mag);
  font-size: 14px; letter-spacing: .1em;
}
.coupon-hint {
  margin-top: 8px; font-size: 11px; letter-spacing: .04em; color: var(--dim);
}
.coupon-opts button.off { opacity: .38; }
/* ============ 管理端：优惠券 ============ */
.coup-issue {
  padding: 16px; border-radius: 14px; background: #fff;
  border: 1px solid rgba(27,25,22,.1); margin-bottom: 14px;
}
.coup-issue-title {
  font-size: 12px; letter-spacing: .1em; color: #8a8073; margin-bottom: 10px;
}
.coup-issue-grid { display: grid; grid-template-columns: 1fr 1fr 64px 72px; gap: 8px; }
.coup-issue-grid input, .coup-issue-grid select {
  height: 38px; padding: 0 10px; border-radius: 9px; font-size: 13px;
  border: 1px solid rgba(27,25,22,.14); background: #fbf9f5; color: #1b1916;
}
.coup-issue-btn {
  height: 38px; border-radius: 9px; border: 0; font-size: 13px;
  background: #1b1916; color: #f3ede2; letter-spacing: .08em;
}
.coup-note-input {
  margin-top: 8px; width: 100%; height: 36px; padding: 0 10px; border-radius: 9px;
  font-size: 13px; border: 1px solid rgba(27,25,22,.14); background: #fbf9f5;
}

.coup-stats {
  display: flex; justify-content: space-between;
  font-size: 12px; color: #6f685e; padding: 0 2px 10px;
}
.coup-stats b { color: #1b1916; }

.coup-list { display: grid; gap: 6px; }
.coup-row {
  display: grid; grid-template-columns: 52px 64px 1fr 78px auto;
  align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 10px; background: #fff; border: 1px solid rgba(27,25,22,.08);
  font-size: 12.5px;
}
.coup-row.used { opacity: .62; }
.coup-row.void { opacity: .45; }
.coup-code { font-family: Consolas, monospace; font-size: 14px; letter-spacing: .1em; color: #2f5ec4; }
.coup-type { color: #8a6a2f; }
.coup-type.free { color: #1b1916; font-weight: 600; }
.coup-st { color: #6f685e; }
.coup-time { color: #a09686; font-size: 11.5px; text-align: right; }
.coup-void {
  border: 1px solid rgba(180,60,50,.3); background: rgba(180,60,50,.06);
  color: #a33b30; font-size: 11.5px; padding: 5px 10px; border-radius: 8px;
}
.coup-people {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
  padding-top: 12px; border-top: 1px dashed rgba(27,25,22,.12);
}
.coup-person {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 20px; font-size: 12.5px;
  border: 1px solid rgba(27,25,22,.14); background: #fbf9f5; color: #1b1916;
}
.coup-person b { font-family: Consolas, monospace; letter-spacing: .08em; color: #2f5ec4; }
.coup-person span { color: #6f685e; }
.coup-person i {
  font-style: normal; font-size: 11px; color: #8a6a2f;
  background: rgba(201,162,92,.16); padding: 1px 6px; border-radius: 8px;
}
.coup-person:active { background: #f1ece2; }
.coup-empty { margin-top: 10px; }
.cp-refresh {
  margin-top: 10px; width: 100%; padding: 12px;
  border-radius: 12px; border: 1px solid rgba(243,237,226,.12);
  background: none; color: var(--dim); font-size: 12px; letter-spacing: .1em;
}
.cp-sub {
  margin: 22px 0 10px; font-size: 11px; letter-spacing: .18em;
  color: var(--dim-2); text-transform: uppercase;
}
.cp-reqs { display: grid; gap: 6px; }
.cp-req {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center;
  gap: 10px; padding: 11px 14px; border-radius: 11px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(243,237,226,.06);
  font-size: 12.5px;
}
.cp-req.used { opacity: .72; }
.cp-req.void { opacity: .4; }
.cp-req-type { color: var(--mag); letter-spacing: .04em; }
.cp-req-type.free { color: #f3ede2; }
.cp-req-st { color: var(--dim); }
.cp-req-time { color: var(--dim-2); font-size: 11px; }
.cp-empty { font-size: 12px; color: var(--dim-2); padding: 6px 2px; }
/* ============ 我的积分 ============ */
.my-points {
  display: flex; align-items: center; gap: 13px; width: calc(100% - 32px);
  margin: -2px 16px 14px; padding: 14px 18px; box-sizing: border-box;
  border-radius: 16px; text-align: left; font-family: inherit;
  background: linear-gradient(90deg, rgba(201,162,92,.1), rgba(255,255,255,.018));
  border: 1px solid rgba(201,162,92,.24);
}
.mp-ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; color: var(--mag);
  background: rgba(201,162,92,.12); border: 1px solid rgba(201,162,92,.26);
}
.mp-ico svg { width: 19px; height: 19px; }
.mp-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.mp-label { font-size: 10.5px; letter-spacing: .16em; color: var(--dim-2); }
.mp-value { font-size: 15px; color: var(--text); letter-spacing: .04em; }
.mp-arrow { color: var(--mag); font-size: 17px; }

.mp-card {
  display: flex; align-items: center; gap: 14px; padding: 18px 16px;
  border-radius: 16px; background: rgba(201,162,92,.07);
  border: 1px solid rgba(201,162,92,.26); margin-bottom: 10px;
}
.mp-rank { font-family: var(--serif); font-size: 22px; color: var(--mag); min-width: 46px; }
.mp-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mp-info b { font-size: 15px; letter-spacing: .04em; color: var(--text); }
.mp-info span { font-size: 11.5px; color: var(--dim); }
.mp-pts { font-family: var(--serif); font-size: 24px; color: var(--text); }
.mp-pts i { font-style: normal; font-size: 11px; color: var(--dim); margin-left: 2px; }

.mp-empty { padding: 8px 2px; }
.mp-empty p { font-size: 12.5px; line-height: 1.9; color: var(--dim); }
.mp-empty p + p { margin-top: 8px; }
.mp-empty strong { color: var(--mag); font-weight: 500; }
.cp-note-p { margin-top: 12px; font-size: 11.5px; line-height: 1.8; color: var(--dim-2); }
/* ============ 管理端：券记录 ============ */
.rec-sum {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px;
}
.rec-sum-item {
  background: #fff; border: 1px solid rgba(27,25,22,.1); border-radius: 12px;
  padding: 14px 12px; text-align: center;
}
.rec-sum-item b { display: block; font-size: 22px; font-family: Georgia, serif; color: #1b1916; }
.rec-sum-item span { font-size: 11px; color: #8a8073; letter-spacing: .06em; }

.rec-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.rec-group { display: flex; gap: 6px; }
.rec-chip {
  padding: 7px 13px; border-radius: 18px; font-size: 12px;
  border: 1px solid rgba(27,25,22,.14); background: #fff; color: #4a453d;
}
.rec-chip.on { background: #1b1916; color: #f3ede2; border-color: #1b1916; }
.rec-search {
  width: 110px; height: 34px; padding: 0 12px; border-radius: 18px;
  border: 1px solid rgba(27,25,22,.14); background: #fff; font-size: 12.5px;
}

.rec-head, .rec-row {
  display: grid; grid-template-columns: 56px 64px 1fr 96px 96px;
  gap: 8px; align-items: center;
}
.rec-head {
  font-size: 11px; color: #a09686; letter-spacing: .08em;
  padding: 0 12px 8px;
}
.rec-list { display: grid; gap: 6px; }
.rec-row {
  padding: 11px 12px; border-radius: 10px; font-size: 12.5px;
  background: #fff; border: 1px solid rgba(27,25,22,.08);
}
.rec-row.void { opacity: .45; }
.rec-code { font-family: Consolas, monospace; color: #2f5ec4; letter-spacing: .1em; }
.rec-type { color: #8a6a2f; }
.rec-type.free { color: #1b1916; font-weight: 600; }
.rec-st { color: #6f685e; }
.rec-st.used { color: #2f7a4f; }
.rec-st.void { color: #a33b30; }
.rec-time { color: #a09686; font-size: 11px; }

@media (max-width: 720px) {
  .rec-sum { grid-template-columns: repeat(2, 1fr); }
  .rec-head, .rec-row { grid-template-columns: 48px 56px 1fr 80px; }
  .rec-head span:last-child, .rec-row span:last-child { display: none; }
}
/* ============ 会员余额 ============ */
.my-balance .mp-ico { color: #7fd1a8; background: rgba(127,209,168,.1); border-color: rgba(127,209,168,.24); }
.my-balance .mp-value { color: #a8e6c4; }

.bal-hero {
  padding: 26px 20px; border-radius: 18px; text-align: center;
  background: linear-gradient(160deg, rgba(127,209,168,.12), rgba(255,255,255,.02));
  border: 1px solid rgba(127,209,168,.26); margin-bottom: 16px;
}
.bal-cap { display: block; font-size: 11px; letter-spacing: .2em; color: var(--dim); }
.bal-num {
  display: block; margin-top: 10px; font-family: var(--serif);
  font-size: 38px; letter-spacing: .04em; color: #a8e6c4;
}

.bal-list { display: grid; gap: 6px; }
.bal-row {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center;
  padding: 11px 14px; border-radius: 11px; font-size: 12.5px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(243,237,226,.06);
}
.bal-amt { font-family: var(--serif); font-size: 15px; letter-spacing: .02em; }
.bal-row.in .bal-amt { color: #a8e6c4; }
.bal-row.out .bal-amt { color: var(--dim); }
.bal-note { color: var(--dim); }
.bal-time { color: var(--dim-2); font-size: 11px; }

.pay-box { margin-top: 16px; }
.pay-box > label {
  display: block; font-size: 11px; letter-spacing: .14em; color: var(--dim-2); margin-bottom: 9px;
}
.pay-opts { display: flex; gap: 8px; }
.pay-opts button {
  flex: 1; padding: 12px 10px; border-radius: 12px; font-size: 13px;
  letter-spacing: .04em; color: var(--dim);
  background: rgba(255,255,255,.03); border: 1px solid rgba(243,237,226,.1);
}
.pay-opts button.on {
  color: #0f1a14; background: #a8e6c4; border-color: #a8e6c4; font-weight: 600;
}
.pay-opts button.off { opacity: .4; }
/* ============ 管理端：会员 ============ */
.mem-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.mem-sum-item {
  background: #fff; border: 1px solid rgba(27,25,22,.1); border-radius: 12px;
  padding: 14px 12px; text-align: center;
}
.mem-sum-item b { display: block; font-size: 20px; font-family: Georgia, serif; color: #1b1916; }
.mem-sum-item span { font-size: 11px; color: #8a8073; letter-spacing: .06em; }

.mem-issue {
  padding: 16px; border-radius: 14px; background: #fff;
  border: 1px solid rgba(27,25,22,.1); margin-bottom: 16px;
}
.mem-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 80px; gap: 8px; }
.mem-grid input {
  height: 38px; padding: 0 10px; border-radius: 9px; font-size: 13px;
  border: 1px solid rgba(27,25,22,.14); background: #fbf9f5; color: #1b1916;
}

.mem-head, .mem-row {
  display: grid; grid-template-columns: 60px 1fr 96px 96px 64px;
  gap: 8px; align-items: center;
}
.mem-head { font-size: 11px; color: #a09686; letter-spacing: .08em; padding: 0 12px 8px; }
.mem-list { display: grid; gap: 6px; }
.mem-row {
  padding: 11px 12px; border-radius: 10px; font-size: 13px;
  background: #fff; border: 1px solid rgba(27,25,22,.08);
}
.mem-code { font-family: Consolas, monospace; color: #2f5ec4; letter-spacing: .1em; }
.mem-name { color: #4a453d; }
.mem-bal { font-family: Georgia, serif; color: #8a8073; }
.mem-bal.pos { color: #2f7a4f; font-weight: 600; }
.mem-time { color: #a09686; font-size: 11px; }
.mem-add {
  padding: 5px 10px; border-radius: 8px; font-size: 11.5px;
  border: 1px solid rgba(47,122,79,.3); background: rgba(47,122,79,.06); color: #2f7a4f;
}

.mem-logs { display: grid; gap: 5px; }
.mem-log {
  display: grid; grid-template-columns: 60px 88px 1fr 96px; gap: 8px;
  padding: 9px 12px; border-radius: 9px; font-size: 12px;
  background: #fff; border: 1px solid rgba(27,25,22,.06);
}
.mem-log-code { font-family: Consolas, monospace; color: #2f5ec4; }
.mem-log.in .mem-log-amt { color: #2f7a4f; }
.mem-log.out .mem-log-amt { color: #8a8073; }
.mem-log-note { color: #6f685e; }
.mem-log-time { color: #a09686; font-size: 11px; text-align: right; }

@media (max-width: 760px) {
  .mem-grid { grid-template-columns: 1fr 1fr; }
  .mem-head, .mem-row { grid-template-columns: 52px 1fr 80px 56px; }
  .mem-head span:nth-child(4), .mem-row span:nth-child(4) { display: none; }
}
/* ============ 新版本提示 ============ */
.update-tip {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 9999; padding: 11px 22px; border-radius: 999px;
  font-size: 13px; letter-spacing: .06em; color: #1b1916;
  background: #c9a25c; border: 0;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.8);
  animation: tipIn .28s ease;
}
body.admin-mode .update-tip { background: #2f5ec4; color: #fff; }
@keyframes tipIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* ============ 移动端：防误触、防自动放大 ============
   iOS/安卓 在输入框字号 < 16px 时会自动放大整个页面，
   点单、填尾号、发券都会被"弹一下"。统一提到 16px。 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (pointer: coarse), (max-width: 820px) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not(.reg-input):not(.ad-num),
  select,
  textarea {
    font-size: 16px !important;
    line-height: 1.35;
  }
}

/* 双击不再缩放，但保留双指缩放（可访问性） */
body,
button,
a,
[data-act],
input,
select,
textarea {
  touch-action: manipulation;
}

/* 小按钮加大点击区域，减少误触 */
@media (pointer: coarse), (max-width: 820px) {
  .qty-btn,
  .stepper button,
  .sheet-close,
  .back-btn,
  .ad-tab,
  .coup-chip,
  .rec-chip {
    min-width: 44px;
    min-height: 44px;
  }
}
/* 注册页那个大号四位数字框保持原样（本身够大，不会被自动放大） */
@media (pointer: coarse), (max-width: 820px) {
  .reg-input {
    font-size: 34px !important;
    letter-spacing: .5em;
  }
}
/* ============ 待确认订单提示 ============ */
.pending-bar {
  display: block; margin: 0 0 14px; padding: 13px 18px; border-radius: 13px;
  background: #fff4e0; border: 1px solid rgba(200,130,40,.35);
  color: #8a5a10; font-size: 13.5px; letter-spacing: .02em; text-decoration: none;
}
.pending-bar b { font-size: 16px; color: #b4610c; }
.pending-bar:active { background: #ffe9c8; }

.staff-tab { position: relative; }
.tab-badge {
  display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
  margin-left: 6px; padding: 0 5px; border-radius: 9px;
  background: #d9534f; color: #fff; font-size: 11px; font-weight: 600;
  text-align: center; vertical-align: 1px;
}