/* ===========================================================================
 *  styles.css  ——  泰式扫码点单 · 客人端样式
 *  配色：暖米白底 + 泰国金橙 + 泰丝翠玉绿，突出食物食欲感
 * =========================================================================== */

:root{
  --bg:#faf6ef;
  --bg-soft:#f3ece1;
  --card:#ffffff;
  --ink:#1c1917;
  --ink2:#57534e;
  --ink3:#a8a29e;
  --gold:#b45309;
  --gold-l:#f59e0b;
  --jade:#0d9488;
  --rose:#be123c;
  --line:#ece5da;
  --line2:#ddd2c2;

  --sh-sm:0 1px 3px rgba(60,40,20,.06);
  --sh:0 4px 16px rgba(60,40,20,.09);
  --sh-lg:0 -8px 40px rgba(40,25,10,.16);

  --r-s:10px; --r:14px; --r-lg:20px;
  --hdr:66px;
  --safe-b:env(safe-area-inset-bottom, 0px);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai","Leelawadee UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  /* 语义变量：主题切换只改这些，下面所有组件都引用它们 */
  --solid:#1c1917;      /* 实心按钮 / 深色块 底色 */
  --solid-fg:#ffffff;   /* 实心块上的主文字 */
  --solid-soft:#a8a29e; /* 实心块上的次要文字 */
  --muted:#a8a29e;      /* 正文里的次要文字 */
  --accent-soft-bg:#f0fdfa;  /* 选中态的浅底 */
  --fx-bg:#fffbeb; --fx-bd:#fde68a; --fx-fg:#92400e;
  --warn-bg:#fffbeb; --warn-bd:#fde68a; --warn-fg:#92400e;
  --outer:#e7e0d4;


}

/* ============================================================
   夜晚风格：只改语义变量，组件全部自动跟随
   暖调暗色（不用纯黑），酒吧夜里看着不刺眼
   ============================================================ */
html[data-theme="dark"]{
  --bg:#14110f;  --bg-soft:#1e1a17;  --card:#232020;  --outer:#0c0a09;
  --ink:#f5f0e8; --ink2:#c9c0b6;     --ink3:#8a8077;
  --gold:#f0a83c; --gold-l:#fbbf24;  --jade:#2dd4bf;  --rose:#fb7185;
  --line:#332e2a; --line2:#423c37;
  --sh-sm:0 1px 3px rgba(0,0,0,.40);
  --sh:0 4px 16px rgba(0,0,0,.50);
  --sh-lg:0 -8px 40px rgba(0,0,0,.62);
  --solid:#f5f0e8;      --solid-fg:#14110f;  --solid-soft:#8a8077;
  --muted:#8a8077;      --accent-soft-bg:#2c2825;
  --fx-bg:#2a2418; --fx-bd:#4d4126; --fx-fg:#fcd34d;
  --warn-bg:#2a2418; --warn-bd:#4d4126; --warn-fg:#fcd34d;
}
/* 夜里把纯白硬编码的地方压暗（卡片、弹层、输入框） */
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .optcard,
html[data-theme="dark"] .paycard,
html[data-theme="dark"] .cucard,
html[data-theme="dark"] .memcard{background:var(--card)}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:#1a1715;color:var(--ink);border-color:var(--line2)}
html[data-theme="dark"] .storehero .mask{opacity:.62}
html[data-theme="dark"] img.imgobj{filter:brightness(.82) saturate(.95)}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a3430}

/* 霓虹光晕：标题、价格、选中态 */
/* 标签在深色下改成半透明霓虹 */
/* 存酒进度条发光 */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip;max-width:100%}   /* 整页永远不许左右拖 */
body{
  background:var(--outer);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}

/* ---------- 手机容器 ---------- */
.phone{
  max-width:480px; margin:0 auto; min-height:100vh;
  background:var(--bg); position:relative;
  box-shadow:0 0 60px rgba(40,25,10,.14);
  /* ⚠️ 不要加 overflow-x:hidden —— 它会创建滚动容器，导致内部 sticky 顶栏失效 */
}
@media(min-width:520px){ body{padding:0} }

/* =========================================================
 *  语言选择遮罩（扫码第一屏）
 * ======================================================= */
.langmask{
  position:fixed; inset:0; z-index:200;
  background:linear-gradient(170deg,#1c1917 0%,#292524 40%,#44403c 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 26px; text-align:center;
  animation:fadeIn .35s ease both;
}
.langmask.hide{animation:fadeOut .3s ease both;pointer-events:none}
/* 已选过语言时，刷新瞬间就不要显示遮罩（避免闪一下黑屏） */
html.has-lang .langmask{display:none}
.langmark{font-size:44px;margin-bottom:14px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.langres{color:#fbbf24;font-weight:700;font-size:22px;letter-spacing:.02em;margin-bottom:4px}
.langslo{color:#a8a29e;font-size:13px;margin-bottom:32px}
.langtitle{color:#fafaf9;font-size:19px;font-weight:650;margin-bottom:6px}
.langsub{color:#78716c;font-size:13px;margin-bottom:26px;line-height:1.6}
.langbtn{
  width:100%; max-width:340px; display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r); padding:16px 20px; margin-bottom:12px;
  transition:.2s; text-align:left;
}
.langbtn:active{transform:scale(.975)}
.langbtn:hover{background:rgba(255,255,255,.11);border-color:rgba(251,191,36,.45)}
.langbtn .flag{font-size:30px;line-height:1}
.langbtn .txt b{display:block;color:#fafaf9;font-size:17px;font-weight:650}
.langbtn .txt span{color:#a8a29e;font-size:12.5px}
.langhint{color:#57534e;font-size:12px;margin-top:18px}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}

/* =========================================================
 *  顶部栏
 * ======================================================= */
.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(250,246,239,.94); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  padding:10px 16px; height:var(--hdr);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.hdr .who{min-width:0}
.hdr .who b{display:block;font-size:15px;line-height:1.3;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 桌号胶囊（可点击换桌） */
.tabletap{
  display:inline-flex;align-items:center;gap:5px;margin-top:3px;
  background:var(--bg-soft);border:1px solid var(--line2);border-radius:20px;
  padding:2px 9px;font-size:11px;font-weight:600;color:var(--ink3);
  line-height:1.5;transition:.15s;
}
.tabletap:active{transform:scale(.95);background:#ece4d6}
.tabletap b{color:var(--ink);font-weight:750;font-size:11.5px}
.tabletap .caret{font-size:8px;color:var(--ink3);margin-left:-1px}
.hdr .acts{display:flex;gap:8px;flex:0 0 auto}

.chip{
  display:flex;align-items:center;gap:5px;
  background:var(--card); border:1px solid var(--line2); border-radius:20px;
  padding:6px 11px; font-size:12.5px; font-weight:600; color:var(--ink2);
  box-shadow:var(--sh-sm); transition:.18s;
}
.chip:active{transform:scale(.94)}
.chip.hi{background:var(--solid);color:var(--solid-fg);border-color:var(--solid)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--jade)}
.chip.cur .dot{background:var(--gold-l)}

/* =========================================================
 *  汇率提示条
 * ======================================================= */
.fxbar{
  display:flex;align-items:center;gap:8px;
  background:var(--fx-bg);
  border-bottom:1px solid var(--fx-bd);
  padding:8px 16px; font-size:12px; color:var(--fx-fg);
}
.fxbar .eq{font-weight:700;font-variant-numeric:tabular-nums}
.fxbar .sep{flex:1}
.fxbar .x{color:#b45309;font-size:16px;line-height:1;opacity:.6;padding:0 2px}

/* =========================================================
 *  分类导航
 * ======================================================= */
.cats{
  position:sticky; top:var(--hdr); z-index:55;
  background:var(--bg); border-bottom:1px solid var(--line);
  display:flex; gap:8px; padding:10px 16px;
  overflow-x:auto; scrollbar-width:none;
}
.cats::-webkit-scrollbar{display:none}
.cat{
  flex:0 0 auto; padding:7px 15px; border-radius:20px;
  background:var(--card); border:1px solid var(--line2);
  font-size:13.5px; font-weight:600; color:var(--ink2); transition:.18s; white-space:nowrap;
}
.cat.on{background:var(--solid);color:var(--solid-fg);border-color:var(--solid)}
.cat:active{transform:scale(.95)}

/* =========================================================
 *  菜品列表容器
 * ======================================================= */
.wrap{padding:18px 16px 130px}

/* 注：每个 .cathead 都是自己 .catsec 的第一个子元素，写成 :first-child 会把
   所有分类的上边距都清零 —— 必须限定在「页面第一个分类」上 */
.cathead{margin:34px 0 14px}
.catsec:first-child .cathead{margin-top:0}
.cathead h2{font-size:19px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:baseline;gap:9px}
.cathead h2 em{font-style:normal;font-size:11.5px;color:var(--ink3);font-weight:500;letter-spacing:0}
.cathead .rule{height:2px;width:34px;background:var(--gold-l);border-radius:2px;margin-top:7px}

.grid{display:grid;gap:14px}

/* ---------- 模式 A：大图片 ---------- */
body.mode-large .grid{grid-template-columns:1fr}
body.mode-large .dish{display:block}
body.mode-large .dish .ph{aspect-ratio:16/10;border-radius:var(--r) var(--r) 0 0}
body.mode-large .dish .body{padding:13px 15px 15px}
body.mode-large .dish .desc{
  font-size:12.8px;color:var(--ink2);line-height:1.62;margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body.mode-large .dish .buyrow{margin-top:12px}

/* ---------- 模式 B：缩略图 ---------- */
body.mode-thumb .grid{grid-template-columns:1fr;gap:10px}
body.mode-thumb .dish{display:flex;gap:12px;padding:11px}
body.mode-thumb .dish .ph{flex:0 0 84px;height:84px;aspect-ratio:auto;border-radius:var(--r-s)}
body.mode-thumb .dish .body{flex:1;min-width:0;padding:0;display:flex;flex-direction:column}
body.mode-thumb .dish .desc{
  font-size:12.2px;color:var(--ink3);line-height:1.55;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
body.mode-thumb .dish .buyrow{margin-top:auto;padding-top:8px}

/* ---------- 菜品卡片 ---------- */
.dish{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);overflow:hidden;position:relative;transition:.2s;
  animation:rise .3s ease both;
}
.dish.out{opacity:.5}
.dish.out::after{
  content:attr(data-out);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(250,246,239,.55);font-weight:700;font-size:15px;color:var(--ink2);letter-spacing:.06em;
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 占位图（没配真实照片时） */
.ph{
  position:relative;overflow:hidden;background:#f5efe6;flex:0 0 auto;
}
.ph.hasimg{background:#efe7db}
.ph .imgobj{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .wash{position:absolute;inset:0;background-image:var(--grad)}
.ph .glow{
  position:absolute;inset:0;
  background:radial-gradient(70% 60% at 28% 22%,rgba(255,255,255,.42),transparent 62%),
             radial-gradient(50% 50% at 82% 88%,rgba(0,0,0,.20),transparent 60%);
}
.ph .emo{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:66px;line-height:1;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.30));
}
/* 缩略图模式图区 84×84：emoji 放到 46px，视觉上才撑得满 */
body.mode-thumb .ph .emo{font-size:52px}
/* 图区加一圈内描边，占位图看起来更精致 */
.ph::after{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none}
.ph .soldout{display:none}

/* 文本区 */
.dish .nm{display:flex;align-items:flex-start;gap:8px}
.dish .nm b{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.35;flex:1}
.dish .spicy{font-size:11.5px;letter-spacing:-1px;flex:0 0 auto;padding-top:2px}

.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.tag{
  font-size:10.5px;font-weight:650;padding:2.5px 7px;border-radius:5px;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:3px;
}
.t-sig    {background:#fef3c7;color:#92400e}   /* 招牌 */
.t-strong {background:#ffe4e6;color:#9f1239}   /* 高度数 */
.t-sweet  {background:#ffedd5;color:#9a3412}   /* 甜口 */
.t-sour   {background:#fef9c3;color:#854d0e}   /* 酸口 */
.t-classic{background:#e0f2fe;color:#075985}   /* 经典 */
.t-veg    {background:#dcfce7;color:#166534}   /* 素食 */
.t-hot    {background:#fee2e2;color:#b91c1c}   /* 微辣 */
.t-nalc   {background:#d1fae5;color:#047857}   /* 无酒精 */

/* 价格 + 加号 */
.buyrow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.price{display:flex;flex-direction:column;line-height:1.25}
.price .thb{font-size:18px;font-weight:750;color:var(--gold);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price .homecur{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums;margin-top:1px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border-radius:11px;font-weight:700;font-size:14px;transition:.16s;white-space:nowrap;
}
.btn-add{background:var(--solid);color:var(--solid-fg);padding:9px 18px;box-shadow:var(--sh-sm)}
.btn-add:active{transform:scale(.93)}
.btn-add.outbtn{background:var(--line2);color:var(--ink3);box-shadow:none}
.btn-ghost{background:var(--bg-soft);color:var(--ink);padding:9px 15px;border:1px solid var(--line2)}
.btn-ghost:active{transform:scale(.95)}

/* 已点数量标记 */
.inceil{
  position:absolute;top:10px;right:10px;z-index:2;
  min-width:24px;height:24px;padding:0 7px;border-radius:13px;
  background:var(--gold-l);color:#fff;font-size:12.5px;font-weight:750;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(180,83,9,.4);
}

.allergy{margin-top:26px;background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:var(--r-s);
  padding:11px 14px;font-size:12px;color:var(--warn-fg);display:flex;gap:8px;line-height:1.55}

/* =========================================================
 *  底部购物车浮条
 * ======================================================= */
.cartbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:10px 16px calc(10px + var(--safe-b));
  display:flex;pointer-events:none;justify-content:center;
}
.cartbar .inner{
  pointer-events:auto;width:100%;max-width:480px;
  display:flex;align-items:center;gap:12px;
  background:var(--solid);color:var(--solid-fg);border-radius:16px;padding:11px 12px 11px 16px;
  box-shadow:var(--sh-lg);animation:rise .3s ease both;
}
.cartbar .badge{
  width:34px;height:34px;flex:0 0 auto;border-radius:11px;background:var(--gold-l);
  display:flex;align-items:center;justify-content:center;font-weight:750;font-size:14px;
  position:relative;
}
.cartbar .badge i{position:absolute;top:-5px;right:-5px;background:var(--rose);color:#fff;
  font-style:normal;font-size:10.5px;font-weight:700;min-width:17px;height:17px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--solid)}
.cartbar .sum{flex:1;min-width:0;line-height:1.3}
.cartbar .sum .p1{font-size:11.5px;color:var(--solid-soft)}
.cartbar .sum .p2{font-size:17px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cartbar .sum .p2 em{font-style:normal;font-size:11px;color:var(--solid-soft);font-weight:500;margin-left:6px;letter-spacing:0}
.cartbar .go{background:var(--gold-l);color:#fff;padding:10px 18px;border-radius:11px;font-weight:750;font-size:14px}
.cartbar .go:active{transform:scale(.94)}

/* =========================================================
 *  通用弹层
 * ======================================================= */
.scrim{position:fixed;inset:0;z-index:90;background:rgba(28,25,23,.5);
  opacity:0;pointer-events:none;transition:.28s;backdrop-filter:blur(2px)}
.scrim.on{opacity:1;pointer-events:auto}

.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:var(--bg);border-radius:var(--r-lg) var(--r-lg) 0 0;
  max-height:86vh;display:flex;flex-direction:column;
  transform:translateY(102%);transition:transform .32s cubic-bezier(.32,.72,0,1);
  box-shadow:var(--sh-lg);max-width:480px;margin:0 auto;
}
.sheet.on{transform:translateY(0)}
.sheet .grab{width:38px;height:4px;border-radius:2px;background:var(--line2);margin:9px auto 0;flex:0 0 auto}
.sheet .sh{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px 10px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.sheet .sh b{font-size:17px;font-weight:700}
.sheet .sh .link{font-size:13px;color:var(--ink3);font-weight:600}
.sheet .sc{flex:1;overflow-y:auto;padding:14px 18px 20px;-webkit-overflow-scrolling:touch}
.sheet .sf{flex:0 0 auto;padding:12px 18px calc(14px + var(--safe-b));border-top:1px solid var(--line);background:var(--card)}

/* ---------- 规格选择 ---------- */
.opt-hero{display:flex;gap:13px;align-items:center;margin-bottom:18px}
.opt-hero .ph{flex:0 0 76px;height:76px;border-radius:var(--r-s)}
.opt-hero .t b{display:block;font-size:17px;font-weight:700;line-height:1.35}
.opt-hero .t span{font-size:12.5px;color:var(--ink3)}

.optgrp{margin-bottom:18px}
.optgrp h4{font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:9px;display:flex;align-items:center;gap:7px}
.optgrp h4 em{font-style:normal;font-size:11px;color:var(--ink3);font-weight:500}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{
  padding:9px 15px;border-radius:11px;background:var(--card);
  border:1.5px solid var(--line2);font-size:13.5px;font-weight:600;color:var(--ink2);transition:.16s;
}
.opt.on{border-color:var(--gold);background:var(--solid);color:var(--solid-fg)}
.opt:active{transform:scale(.96)}
.opt em{font-style:normal;font-size:11.5px;opacity:.7;margin-left:4px;font-variant-numeric:tabular-nums}

.qtyrow{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.stepper{display:flex;align-items:center;gap:4px;background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:3px}
.stepper button{width:34px;height:34px;border-radius:9px;font-size:19px;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:center}
.stepper button:active{background:var(--bg-soft)}
.stepper span{min-width:30px;text-align:center;font-weight:750;font-size:15px;font-variant-numeric:tabular-nums}

.bignote{width:100%;padding:14px;border-radius:13px;background:var(--solid);color:var(--solid-fg);
  font-size:15.5px;font-weight:750;display:flex;align-items:center;justify-content:center;gap:10px}
.bignote:active{transform:scale(.98)}
.bignote .amt{font-variant-numeric:tabular-nums}

/* ---------- 购物车列表 ---------- */
.li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:none}
.li .ph{flex:0 0 58px;height:58px;border-radius:9px}
.li .mid{flex:1;min-width:0}
.li .mid b{display:block;font-size:14.5px;font-weight:650;line-height:1.35}
.li .mid .mods{font-size:11.5px;color:var(--ink3);margin-top:2px;line-height:1.5}
.li .mid .amt{font-size:14px;font-weight:700;color:var(--gold);margin-top:4px;font-variant-numeric:tabular-nums}
.li .stepper{transform:scale(.86);transform-origin:right center}

.sumline{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink2);padding:5px 0}
.sumline.big{font-size:17px;font-weight:750;color:var(--ink);padding-top:11px;margin-top:7px;border-top:1px solid var(--line)}
.sumline em{font-style:normal;color:var(--ink3);font-size:11.5px;font-weight:500;margin-left:5px}
.sumline .val{font-variant-numeric:tabular-nums}

.emptybox{text-align:center;padding:52px 20px;color:var(--ink3)}
.emptybox .ico{font-size:46px;opacity:.5;margin-bottom:12px}
.emptybox b{display:block;font-size:15px;color:var(--ink2);font-weight:650}
.emptybox span{font-size:13px}

/* ---------- 支付方式 ---------- */
.payopt{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:var(--card);border:1.5px solid var(--line2);border-radius:var(--r);
  padding:14px 15px;margin-bottom:10px;transition:.18s;
}
.payopt:active{transform:scale(.985)}
.payopt.on{border-color:var(--jade);background:var(--accent-soft-bg)}
.payopt .ico{font-size:25px;flex:0 0 auto;width:34px;text-align:center}
.payopt .tx{flex:1;min-width:0}
.payopt .tx b{display:block;font-size:14.5px;font-weight:650}
.payopt .tx span{font-size:11.8px;color:var(--ink3);line-height:1.45}
.payopt .ck{width:20px;height:20px;border-radius:50%;border:2px solid var(--line2);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff}
.payopt.on .ck{background:var(--jade);border-color:var(--jade)}

.cashbox{background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:var(--r-s);
  padding:12px 14px;font-size:12.5px;color:var(--warn-fg);line-height:1.6;margin-bottom:12px}

/* ---------- 成功 ---------- */
.donebox{text-align:center;padding:26px 18px 8px}
.donebox .ico{font-size:58px;margin-bottom:10px;animation:pop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.donebox b{display:block;font-size:20px;font-weight:750;margin-bottom:5px}
.donebox span{font-size:13.5px;color:var(--ink2)}
.donecard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px;margin-top:20px;text-align:left}
.donecard .row{display:flex;justify-content:space-between;font-size:13.5px;padding:4px 0;color:var(--ink2)}
.donecard .row b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);z-index:150;
  background:var(--solid);color:var(--solid-fg);padding:10px 18px;border-radius:22px;
  font-size:13.5px;font-weight:600;box-shadow:var(--sh-lg);
  opacity:0;pointer-events:none;transition:.26s;white-space:nowrap;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 演示角标（正式上线可删） ---------- */
.demobar{
  position:fixed;left:0;right:0;top:0;z-index:300;max-width:480px;margin:0 auto;
  display:flex;align-items:center;gap:8px;justify-content:center;
}
.demobtn{
  position:fixed;right:10px;bottom:calc(74px + var(--safe-b));z-index:85;
  width:44px;height:44px;border-radius:50%;background:var(--solid);color:var(--solid-fg);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  box-shadow:var(--sh);transition:.2s;
}
.demobtn:active{transform:scale(.9) rotate(30deg)}
.demotip{
  position:fixed;right:62px;bottom:calc(80px + var(--safe-b));z-index:85;
  background:var(--solid);color:var(--solid-fg);font-size:12px;padding:6px 11px;border-radius:8px;
  white-space:nowrap;opacity:0;transition:.2s;pointer-events:none;box-shadow:var(--sh);
}
.demobtn:hover + .demotip{opacity:1}

/* =========================================================
 *  换桌弹层
 * ======================================================= */
.tsec{margin-bottom:20px}
.tsec h4{
  font-size:11.5px;font-weight:700;color:var(--ink3);
  letter-spacing:.08em;margin-bottom:9px;text-transform:uppercase;
}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:9px}
.tbtn{
  padding:13px 0;border-radius:12px;background:var(--card);
  border:1.5px solid var(--line2);font-size:15px;font-weight:750;color:var(--ink2);
  transition:.15s;letter-spacing:.02em;
}
.tbtn:active{transform:scale(.94)}
.tbtn.on{background:var(--solid);color:var(--solid-fg);border-color:var(--solid);box-shadow:0 3px 10px rgba(28,25,23,.22)}

/* =========================================================
 *  菜品大图查看器（点击菜品图片打开）
 * ======================================================= */
.viewer{
  position:fixed;inset:0;z-index:250;background:rgba(14,11,8,.97);
  display:none;flex-direction:column;
}
.viewer.on{display:flex;animation:fadeIn .22s ease both}
.vclose{
  position:absolute;top:14px;right:14px;z-index:3;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.13);color:#fff;font-size:17px;
  display:flex;align-items:center;justify-content:center;
}
.vclose:active{transform:scale(.9)}
.vinner{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:64px 22px calc(24px + var(--safe-b));
}
.vimg{width:100%;max-width:440px;aspect-ratio:4/3;border-radius:16px;flex:0 0 auto}
.viewer .vimg .imgobj{object-fit:contain}
.viewer .vimg .emo{font-size:104px}
.vinfo{width:100%;max-width:440px;color:#fff}
.vinfo h3{font-size:20px;font-weight:750;letter-spacing:-.01em;line-height:1.35}
.vinfo .tags{margin-top:9px}
.vdesc{font-size:13.5px;color:#a8a29e;line-height:1.72;margin-top:8px}
.vprice{
  display:flex;align-items:baseline;gap:9px;margin-top:15px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.13);
}
.vprice b{font-size:22px;font-weight:750;color:var(--gold-l);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.vprice span{font-size:12.5px;color:#78716c;font-variant-numeric:tabular-nums}
.vadd{
  width:100%;margin-top:14px;padding:14px;border-radius:13px;
  background:var(--gold-l);color:#fff;font-size:15.5px;font-weight:750;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.vadd:active{transform:scale(.98)}

/* =========================================================
 *  历史订单
 * ======================================================= */
.chip.icon{padding:6px 9px;font-size:14px;line-height:1}

.hitem{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px;margin-bottom:11px;
}
.hitem .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hitem .when{font-size:11.5px;color:var(--ink3);font-weight:600;letter-spacing:.02em}
.hitem .no{font-size:11px;color:var(--ink3);font-family:var(--mono)}
.hitem .dishes{
  font-size:13.5px;color:var(--ink2);line-height:1.6;margin-top:7px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hitem .bot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}
.hitem .amt{font-size:17px;font-weight:750;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hitem .amt em{font-style:normal;font-size:11.5px;color:var(--ink3);font-weight:500;margin-left:5px}
.hitem .re{
  background:var(--solid);color:var(--solid-fg);padding:8px 15px;border-radius:10px;
  font-size:13px;font-weight:700;white-space:nowrap;
}
.hitem .re:active{transform:scale(.95)}
.hitem .tbl{
  display:inline-block;font-size:10.5px;font-weight:650;color:var(--ink3);
  background:var(--bg-soft);border-radius:5px;padding:1px 6px;margin-left:6px;
}

/* ===========================================================================
 *  页面容器 / 底部导航
 * ======================================================================== */
.page[hidden]{display:none}
.pages{min-height:100vh}

/* 点单页内容要落在固定头图之下（230 = 展开态总高） */
#page-order{padding-top:230px}
#page-home,#page-pickup,#page-me{padding-bottom:calc(62px + var(--safe-b))}

.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;
  width:100%;max-width:480px;z-index:85;
  display:flex;background:var(--card);border-top:1px solid var(--line);
  padding:5px 0 calc(5px + var(--safe-b));
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:5px 0;font-size:11px;font-weight:600;color:var(--ink3);transition:.16s;
}
.tab .ti{font-size:20px;line-height:1;filter:grayscale(1);opacity:.45;transition:.18s}
.tab.on{color:var(--gold)}
.tab.on .ti{filter:none;opacity:1}
.tab.on b{font-weight:750}
.tab:active{transform:scale(.94)}

/* 购物车条移到 tabbar 上方 */
.cartbar{bottom:calc(56px + var(--safe-b))}

/* ===========================================================================
 *  门店头图（A 方案 · 滚动收缩）
 * ======================================================================== */
.storehero{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:60;
  background:var(--bg);box-shadow:var(--sh);
}
.sh-top{position:relative;height:186px;overflow:hidden;will-change:height}
.sh-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:opacity .22s,filter .22s;
}
.sh-mask{
  position:absolute;inset:0;transition:opacity .22s;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.04) 32%,rgba(0,0,0,.8) 100%);
}
.sh-acts{position:absolute;top:11px;right:12px;display:flex;gap:6px;z-index:4}
.sh-big{
  position:absolute;left:15px;bottom:13px;right:15px;z-index:3;
  transition:opacity .2s;
}
.sh-big .brand{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.86);margin-bottom:4px;
}
.sh-big h1{
  font-size:21px;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1.2;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.sh-big .meta{display:flex;align-items:center;gap:9px;margin-top:7px}
.sh-big .hrs{font-size:11px;color:rgba(255,255,255,.78);font-weight:600}

.sh-mini{
  position:absolute;left:15px;top:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:10px;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.sh-top.mini .sh-big{opacity:0;pointer-events:none}
.sh-top.mini .sh-mini{opacity:1;pointer-events:auto}
.sh-top.mini{
  background:rgba(12,10,9,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.sh-top.mini .sh-bg{opacity:0}          /* 模糊照片会显脏，直接隐掉 */
.sh-top.mini .sh-mask{opacity:0}
.sh-mini .n{
  font-size:14.5px;font-weight:800;color:#fff;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;
}

.sh-cats{
  height:44px;display:flex;align-items:center;gap:8px;
  padding:0 16px;overflow-x:auto;scrollbar-width:none;
  background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.sh-cats::-webkit-scrollbar{display:none}

/* 桌号胶囊（头图内） */
.tbl-pill{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.5);
  border-radius:14px;padding:3px 9px;font-size:11px;font-weight:650;color:#57534e;
}
.tbl-pill b{color:#1c1917;font-weight:800}
.tbl-pill.glass{
  background:rgba(0,0,0,.34);border-color:rgba(255,255,255,.32);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tbl-pill.glass b{color:#fff}
.tbl-pill .cr{font-size:7px;opacity:.7}
.sh-mini .tbl-pill{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:#fff}
.sh-mini .tbl-pill b{color:#fff}

/* ===========================================================================
 *  首页
 * ======================================================================== */
.homehero{height:176px;position:relative;overflow:hidden}
.homehero .imgobj{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.homehero .washph{position:absolute;inset:0}
.homehero .glowph{
  position:absolute;inset:0;
  background:radial-gradient(70% 60% at 26% 20%,rgba(255,255,255,.34),transparent 62%);
}
.homehero .mask{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.74) 100%);
}
.homehero .hint{
  position:absolute;left:16px;bottom:14px;color:#fff;
  font-size:11px;font-weight:650;letter-spacing:.1em;opacity:.8;
}
.homewrap{padding:15px 16px calc(96px + var(--safe-b))}

.hbrand{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.hbrand .bn{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.hbrand .bs{font-size:11.5px;color:var(--ink3);margin-top:2px;letter-spacing:.02em}
.openbadge{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  background:var(--accent-soft-bg);border:1px solid var(--jade);color:var(--jade);
  font-size:11px;font-weight:750;padding:4px 10px;border-radius:14px;
}
.openbadge i{width:6px;height:6px;border-radius:50%;background:var(--jade);
  box-shadow:0 0 6px var(--jade)}

.hcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;margin-top:15px;
}
.hs-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hs-top h2{font-size:17px;font-weight:800;letter-spacing:-.01em}
.hs-tag{
  flex:0 0 auto;font-size:11px;font-weight:750;color:var(--gold);
  background:var(--accent-soft-bg);border:1px solid var(--gold);padding:3px 8px;border-radius:7px;
}
.hs-row{display:flex;gap:10px;margin-top:9px;font-size:12.5px;line-height:1.6}
.hs-row .k{flex:0 0 auto;color:var(--ink3);font-weight:600}
.hs-row .v{flex:1;color:var(--ink2)}
.hs-acts{display:flex;gap:9px;margin-top:14px}
.hbtn{
  flex:1;padding:11px;border-radius:11px;font-size:14px;font-weight:750;
  background:var(--solid);color:var(--solid-fg);
}
.hbtn.ghost{background:transparent;border:1.5px solid var(--line2);color:var(--ink2);box-shadow:none}
.hbtn:active{transform:scale(.97)}

.hsec{margin-top:22px}
.hsec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.hsec-h h3{font-size:16px;font-weight:800;letter-spacing:-.01em}
.hsec-sub{font-size:11.5px;color:var(--ink3);margin-top:2px}
.rcbal{font-size:12px;font-weight:750;color:var(--gold);background:var(--bg-soft);
  padding:5px 10px;border-radius:99px;white-space:nowrap}

/* ---- 会员充值卡片 ---- */
.rcwrap{display:flex;gap:11px;overflow-x:auto;padding:2px 0 6px;margin-top:11px;
  scrollbar-width:none;scroll-snap-type:x mandatory}
.rcwrap::-webkit-scrollbar{display:none}
.rcard{
  flex:0 0 176px;min-height:158px;scroll-snap-align:start;position:relative;
  display:flex;flex-direction:column;gap:3px;padding:14px;
  border-radius:16px;border:1px solid var(--line2);
  background:linear-gradient(160deg,var(--card),var(--bg-soft));
  box-shadow:var(--sh-sm);cursor:pointer;
}
.rcard.hot{
  background:linear-gradient(160deg,#2b2218,#1c1917);
  border-color:#3b2f21;color:#fff;
}
.rc-tag{
  position:absolute;top:10px;right:10px;font-size:10px;font-weight:750;
  padding:3px 8px;border-radius:99px;background:var(--gold);color:#fff;
}
.rcard.hot .rc-tag{background:var(--gold-l);color:#2a1c05}
.rc-pay{font-size:22px;font-weight:850;letter-spacing:-.02em;margin-top:8px}
.rc-bonus{font-size:13px;font-weight:800;color:var(--gold)}
.rcard.hot .rc-bonus{color:var(--gold-l)}
.rc-gift{
  font-size:11px;color:var(--ink3);line-height:1.45;min-height:32px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rcard.hot .rc-gift{color:#b9ac99}
.rc-go{margin-top:auto;padding-top:8px;font-size:11.5px;font-weight:750;color:var(--solid)}
.rcard.hot .rc-go{color:#fff}
.rcard:active{transform:scale(.985)}

/* ---- 充值弹层 ---- */
.rcsum{background:var(--bg-soft);border-radius:var(--r);padding:12px 14px;margin-bottom:14px}
.rcsum-row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2);padding:4px 0}
.rcsum-row b{font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.rcsum-row.cut b{color:var(--gold)}
.rcsum-row.tot{border-top:1px dashed var(--line2);margin-top:6px;padding-top:9px;font-size:15px}
.rcsum-row.tot b{font-size:19px;font-weight:850}

.rcgift{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line)}
.rcgift:last-child{border-bottom:0}
.rcgift .em{width:34px;height:34px;border-radius:10px;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.rcgift b{flex:1;font-size:13.5px;font-weight:700}
.rcgift em{font-style:normal;font-size:12px;color:var(--ink3)}

.rcphone{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line2);
  background:var(--card);font-size:14px;margin:4px 0 10px;color:var(--ink)}
.rcphone:focus{outline:none;border-color:var(--gold)}

.rcrule{font-size:11px;color:var(--ink3);line-height:1.6;margin:0 0 6px}
.rcdemo{font-size:11px;color:var(--gold);line-height:1.5;margin:0 0 4px}

/* ---- 赠送（营销）---- */
.gwarn{background:rgba(190,18,60,.09);border:1px solid rgba(190,18,60,.32);color:var(--rose);
  border-radius:12px;padding:10px 12px;font-size:13px;font-weight:700;margin-bottom:12px}
.qcard{background:var(--bg-soft);border-radius:var(--r);padding:10px 14px;margin-bottom:12px}
.qrow{display:flex;justify-content:space-between;align-items:center;font-size:13px;
  padding:5px 0;color:var(--ink2)}
.qrow b{font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.qrow.left{border-top:1px dashed var(--line2);margin-top:4px;padding-top:8px}
.qrow.left b{color:var(--gold);font-size:16px}

.pickgrp{margin-bottom:10px}
.pickgrp h5{font-size:12px;color:var(--ink3);font-weight:700;margin:0 0 6px}
.picklist{display:flex;flex-wrap:wrap;gap:7px}
.pickbtn{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:99px;
  border:1px solid var(--line2);background:var(--card);font-size:12.5px;color:var(--ink2)}
.pickbtn em{font-style:normal;font-size:11px;color:var(--ink3)}
.pickbtn.on{border-color:var(--gold);background:rgba(180,83,9,.10);color:var(--gold);font-weight:700}
.pickbtn.on em{color:var(--gold)}

.grow{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line)}
.grow:last-child{border-bottom:0}
.grow .ge{font-size:18px}
.grow b{flex:1;font-size:13.5px;font-weight:700}
.gqty{display:flex;align-items:center;gap:8px}
.gqty button{width:26px;height:26px;border-radius:8px;border:1px solid var(--line2);
  background:var(--bg-soft);font-size:14px;line-height:1;color:var(--ink)}
.gqty em{font-style:normal;min-width:16px;text-align:center;font-weight:700}
.gamt{font-weight:750;font-variant-numeric:tabular-nums}

.bk.gift{background:linear-gradient(135deg,var(--gold),#8a3d05);color:#fff;border:0}

.ovrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.ovrow b{font-size:13px}
.ovtag{font-size:10px;padding:2px 7px;border-radius:99px;background:var(--bg-soft);color:var(--ink3)}
.ovpct{margin-left:auto;font-weight:750;color:var(--gold)}
.ovscope{font-size:11px;color:var(--ink3)}
.ovx{border:0;background:none;color:var(--ink3);font-size:14px}

.gccard{padding:12px;border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:10px;background:var(--card)}
.gccard.off{opacity:.55}
.gcn{font-size:14px;font-weight:750;margin-bottom:4px}
.gcm{display:flex;gap:10px;font-size:11px;color:var(--ink3)}

.rrow{display:flex;align-items:center;gap:8px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:13px}
.rrow:last-child{border-bottom:0}
.rrow span{flex:1}
.rrow em{font-style:normal;font-size:11px;color:var(--ink3)}
.rrow b{font-weight:750;font-variant-numeric:tabular-nums}

.drow{display:flex;gap:8px;align-items:flex-start;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:12px}
.drow:last-child{border-bottom:0}
.drow .dt{color:var(--ink3);flex:0 0 62px;font-size:11px}
.drow .dwho{flex:0 0 76px;font-weight:700}
.drow .dwho em{display:block;font-style:normal;font-size:10px;color:var(--ink3);font-weight:400}
.drow .dwhat{flex:1}
.drow .dwhat em{display:block;font-style:normal;font-size:10px;color:var(--ink3)}
.drow b{font-weight:750;white-space:nowrap}

/* 时间选择：撑满整行，手指好点 */
.fld input[type="time"]{width:100%;min-height:46px;padding:0 12px;
  border:1px solid var(--line2);border-radius:12px;background:var(--card);
  font-size:16px;color:var(--ink);font-family:var(--sans)}

/* ---- 从台存酒 ---- */
.btlwho{display:flex;align-items:center;gap:11px;padding:12px;margin-bottom:14px;
  border-radius:14px;background:var(--bg-soft);border:1px solid var(--line)}
.bav{width:40px;height:40px;border-radius:12px;background:var(--card);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto}
.btlwho b{display:block;font-size:15px;font-weight:750}
.btlwho span{font-size:11.5px;color:var(--ink3)}
.btlgrp{margin-bottom:8px}
.btlgrp h5{font-size:12px;color:var(--ink3);font-weight:700;margin:0 0 6px}
.btlrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.btlrow:last-child{border-bottom:0}
.btlrow.full{opacity:.55}
.btlrow .bem{width:38px;height:38px;border-radius:11px;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto}
.btlrow .bif{flex:1;min-width:0}
.btlrow .bif b{display:block;font-size:13.5px;font-weight:700}
.btlrow .bif span{font-size:11px;color:var(--ink3)}
.bqty{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.bqty button{width:28px;height:28px;border-radius:9px;border:1px solid var(--line2);
  background:var(--bg-soft);font-size:15px;line-height:1;color:var(--ink)}
.bqty button[disabled]{opacity:.35}
.bqty em{font-style:normal;min-width:18px;text-align:center;font-weight:750}
.bk.btl{background:linear-gradient(135deg,#7c3aed,#4c1d95);color:#fff;border:0}

/* 客户列表：右列两行（金额 / 多久没来） */
.cmon{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.cmon b{font-size:13px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.cmon em{font-style:normal;font-size:10.5px;color:var(--ink3);white-space:nowrap}
.cmon em.away{color:var(--rose);font-weight:700}

/* ---- 指定营销：当前值 + 头像网格 ---- */
.mkcur{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;
  border-radius:12px;border:1px solid var(--line2);background:var(--card);
  font-size:14px;color:var(--ink)}
.mkcur b{flex:1;text-align:left;font-weight:700}
.mkcur .cr{color:var(--ink3);font-size:12px}
.mkav{width:34px;height:34px;border-radius:50%;background:var(--bg-soft);
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;
  flex:0 0 auto;border:1px solid var(--line);line-height:1;overflow:hidden}
.mkav.img{background-size:cover;background-position:center;border-color:transparent}
.mkav.letter{color:#fff;font-size:14px;font-weight:800;border-color:transparent}
.mkcard .mkav{width:40px;height:40px;font-size:20px}
.mkpick{margin-top:8px;border:1px solid var(--line);border-radius:14px;
  padding:10px;background:var(--card)}
.mksrch{width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--line2);
  background:var(--bg-soft);font-size:13px;margin-bottom:9px;color:var(--ink)}
.mksrch:focus{outline:none;border-color:var(--gold)}
.mkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;
  max-height:264px;overflow-y:auto;overflow-x:hidden}
.mkcard{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;
  padding:9px 4px;border-radius:12px;border:1px solid transparent;background:var(--bg-soft)}
.mkcard b{font-size:11.5px;font-weight:700;text-align:center;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mkcard.on{border-color:var(--gold);background:rgba(180,83,9,.10)}
.mkcard.on b{color:var(--gold)}

.gfoot{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);
  padding:8px 0 10px;margin-top:6px;z-index:2}
.gsum{font-size:12px;color:var(--ink3);text-align:right;padding:0 2px 6px}
.gsum b{font-size:15px;color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.gfoot .adm-bar{margin-bottom:0}

.hintline{font-size:11px;color:var(--ink3);margin:6px 0 0}
/* 只影响赠送表单里的输入，不动后台其它输入框 */
#admBody input[id^="gc"],#admBody input#giftPct,#admBody select#govAdd{
  padding:10px 11px;border-radius:10px;border:1px solid var(--line2);
  background:var(--card);font-size:14px;color:var(--ink);margin-bottom:8px;
}
#admBody input#giftPct,#admBody select#govAdd{flex:1;min-width:0;margin-bottom:0}
#admBody input[id^="gc"]{width:100%}
#admBody input:focus,#admBody select:focus{outline:none;border-color:var(--gold)}
.unit{font-size:13px;color:var(--ink3);padding:0 4px}

.rcdone{text-align:center;padding:18px 6px 6px}
.rcdone .ok{font-size:44px;line-height:1}
.rcdone .big{font-size:32px;font-weight:850;margin:8px 0 2px}
.rcdone .sub{font-size:12.5px;color:var(--ink3)}
.rcgiftline{margin:12px 0 10px;font-size:13px;font-weight:700;color:var(--gold)}
.feat{display:flex;gap:11px;overflow-x:auto;padding:2px 0 6px;margin-top:11px;scrollbar-width:none}
.feat::-webkit-scrollbar{display:none}
.fcard{
  flex:0 0 130px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;
}
.fcard .fi{height:92px;position:relative;overflow:hidden}
.fcard .fi .wash{position:absolute;inset:0}
.fcard .fi .glow{position:absolute;inset:0;
  background:radial-gradient(70% 60% at 28% 22%,rgba(255,255,255,.38),transparent 62%)}
.fcard .fi .em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:38px}
.fcard .ft{padding:9px 10px 11px}
.fcard .fn{font-size:13px;font-weight:700;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard .fp{font-size:14px;font-weight:800;color:var(--gold);margin-top:3px;letter-spacing:-.01em}
.fcard .fr{font-size:10.5px;color:var(--ink3);margin-top:-1px}

/* ===========================================================================
 *  取酒（存酒）
 * ======================================================================== */
.subhdr{padding:20px 16px 4px}
.subhdr h2{font-size:23px;font-weight:800;letter-spacing:-.02em}
.subhdr p{font-size:12.5px;color:var(--ink3);margin-top:5px;line-height:1.65}
.pkbody{padding:10px 16px calc(20px + var(--safe-b))}

.wcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:11px;
}
.wtop{display:flex;gap:12px}
.wpic{
  width:60px;height:60px;border-radius:12px;flex:0 0 auto;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:29px;
}
.wpic .wash{position:absolute;inset:0}
.wpic .glow{position:absolute;inset:0;
  background:radial-gradient(70% 60% at 28% 22%,rgba(255,255,255,.36),transparent 62%)}
.winfo{flex:1;min-width:0}
.wn{font-size:15px;font-weight:750;line-height:1.35}
.wb{font-size:11px;color:var(--ink3);margin-top:2px;letter-spacing:.03em}
.wst{font-size:11.5px;color:var(--ink2);margin-top:4px}
.wst .exp{
  display:inline-block;font-size:10px;font-weight:750;color:var(--rose);
  background:rgba(251,113,133,.13);padding:1px 6px;border-radius:5px;margin-left:6px;
}
.wbar{height:6px;border-radius:3px;background:var(--bg-soft);overflow:hidden;margin-top:11px}
.wbar .fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold-l));transition:width .4s}
.wmeta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3);margin-top:6px}
.wmeta b{color:var(--ink2);font-weight:700}
.wbot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.wcode{
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.09em;
  color:var(--ink2);background:var(--bg-soft);border:1px dashed var(--line2);
  padding:6px 11px;border-radius:8px;
}
.wbtn{
  background:var(--solid);color:var(--solid-fg);padding:9px 17px;border-radius:10px;
  font-size:13.5px;font-weight:750;flex:0 0 auto;
}
.wbtn:active{transform:scale(.95)}

/* 取酒码弹层 */
.pkbox{text-align:center;padding:6px 0 4px}
.pkbox .wn2{font-size:17px;font-weight:800;margin-bottom:3px}
.pkbox .wb2{font-size:12px;color:var(--ink3)}
.pkqr{
  width:190px;height:190px;margin:18px auto 0;
  background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:11px;
  display:grid;grid-template-columns:repeat(9,1fr);gap:2.5px;
}
.pkqr i{background:var(--ink);border-radius:1.5px;aspect-ratio:1}
.pkqr i.off{background:transparent}
.pkcd{
  font-family:var(--mono);font-size:25px;font-weight:800;letter-spacing:.16em;
  color:var(--ink);margin-top:18px;
}
.pktip{font-size:12px;color:var(--ink3);margin-top:9px;line-height:1.6}
.pkwhere{
  margin-top:16px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:11px;padding:12px;text-align:left;
}
.pkwhere .r{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;color:var(--ink2)}
.pkwhere .r b{color:var(--ink);font-weight:700}

/* ===========================================================================
 *  我的
 * ======================================================================== */
.metop{
  display:flex;align-items:center;gap:13px;padding:22px 16px 18px;
  background:linear-gradient(180deg,var(--card),var(--bg));
  border-bottom:1px solid var(--line);
}
.me-av{
  width:56px;height:56px;border-radius:17px;flex:0 0 auto;
  background:var(--solid);display:flex;align-items:center;justify-content:center;font-size:27px;
}
.me-n{font-size:17px;font-weight:800;letter-spacing:-.01em}
.me-t{font-size:12px;color:var(--ink3);margin-top:2px}
.mebody{padding:16px 16px calc(24px + var(--safe-b))}
.me-sec{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;margin-bottom:13px;
}
.me-sec h3{font-size:14.5px;font-weight:750}
.me-hint{font-size:11.5px;color:var(--ink3);margin-top:3px;line-height:1.5}

.merow{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;
}
.merow:last-child{border-bottom:none;padding-bottom:2px}
.merow:first-child{padding-top:2px}
.merow b{font-weight:650}
.merow em{
  font-style:normal;font-size:12.5px;color:var(--ink3);
  display:flex;align-items:center;gap:5px;
}
.merow em::after{content:"›";font-size:17px;color:var(--ink3);line-height:1}
.merow:active{opacity:.6}

/* 头图内的胶囊按钮：玻璃质感（原来只写了 .tbl-pill.glass，漏了 .chip） */
.chip.glass{
  background:rgba(18,14,10,.42);
  border-color:rgba(255,255,255,.26);
  color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 8px rgba(0,0,0,.28);
}
.chip.glass .dot{background:#5eead4}
.chip.glass:active{background:rgba(18,14,10,.62)}

/* 左侧压一层暗渐变：底部文字压在人群上时更清晰 */
.sh-mask::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,0) 68%);
}

/* ===========================================================================
 *  系统管理（全屏面板）
 * ======================================================================== */
.admin[hidden]{display:none}
/* 层级：tabbar 85 < 本面板 88 < scrim 90 < sheet 100
   —— 必须低于 sheet，否则管理页里的弹窗会被面板自己盖住 */
.admin{
  position:fixed;inset:0;z-index:88;background:var(--bg);
  display:flex;flex-direction:column;max-width:480px;margin:0 auto;
  animation:admIn .26s ease both;
}
@keyframes admIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.adm-hdr{
  flex:0 0 auto;height:52px;display:flex;align-items:center;gap:6px;
  padding:0 8px;border-bottom:1px solid var(--line);background:var(--card);
}
.adm-back{
  width:36px;height:36px;border-radius:10px;font-size:24px;line-height:1;
  color:var(--ink2);display:flex;align-items:center;justify-content:center;
}
.adm-back:active{background:var(--bg-soft)}
.adm-hdr b{
  flex:0 0 auto;font-size:16px;font-weight:750;letter-spacing:-.01em;
  max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 标题行里的区域 tab（只在台情页出现） */
.htabs{flex:1;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-left:6px}
.htabs::-webkit-scrollbar{display:none}
.htab{
  flex:0 0 auto;padding:5px 7px;border-radius:7px;line-height:1.3;
  font-size:11px;font-weight:650;color:var(--ink3);white-space:nowrap;
}
.htab em{font-style:normal;font-size:9px;margin-left:2px;opacity:.7}
.htab.on{background:var(--solid);color:var(--solid-fg)}
.htab.on em{color:var(--solid-fg);opacity:.72}
.htab:active{transform:scale(.94)}
.adm-tail{flex:0 0 auto;min-width:36px}
.adm-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:14px 16px calc(28px + var(--safe-b))}

/* 一级/二级菜单项 */
.adm-menu{
  display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:15px;margin-bottom:11px;
}
.adm-menu .ic{
  width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  background:var(--bg-soft);display:flex;align-items:center;justify-content:center;font-size:19px;
}
.adm-menu .tx{flex:1;min-width:0}
.adm-menu .tx b{display:block;font-size:15px;font-weight:700}
.adm-menu .tx span{font-size:11.5px;color:var(--ink3);margin-top:2px;display:block}
.adm-menu .ar{color:var(--ink3);font-size:18px}
.adm-menu:active{background:var(--bg-soft)}

/* 顶部操作条 */
.adm-bar{display:flex;gap:9px;margin-bottom:14px}
.adm-bar .btn{
  flex:1;padding:11px;border-radius:11px;background:var(--solid);color:var(--solid-fg);
  font-size:14px;font-weight:750;text-align:center;
}
.adm-bar .btn.ghost{background:transparent;border:1.5px solid var(--line2);color:var(--ink2)}
.adm-bar .btn:active{transform:scale(.97)}

/* 方案卡片 */
.sc-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;margin-bottom:11px;
}
.sc-card.off{opacity:.62}
.sc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sc-top .nm{font-size:16px;font-weight:750;letter-spacing:-.01em;line-height:1.3}
.sc-badge{
  flex:0 0 auto;font-size:10.5px;font-weight:750;padding:3px 8px;border-radius:6px;
  background:var(--accent-soft-bg);color:var(--jade);border:1px solid var(--jade);
}
.sc-badge.off{background:var(--bg-soft);color:var(--ink3);border-color:var(--line2)}
.sc-meta{font-size:12.5px;color:var(--ink2);margin-top:6px;line-height:1.6}
.sc-meta b{color:var(--gold);font-weight:750}
.sc-eff{font-size:11px;color:var(--ink3);margin-top:4px}
.sc-acts{display:flex;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.sc-acts button{
  flex:1;padding:9px;border-radius:10px;font-size:13.5px;font-weight:700;
  background:var(--bg-soft);border:1px solid var(--line2);color:var(--ink2);
}
.sc-acts button.warn{color:var(--rose);border-color:rgba(251,113,133,.4);background:rgba(251,113,133,.08)}
.sc-acts button:active{transform:scale(.96)}

/* 表单 */
.fld{margin-bottom:16px}
.fld label{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:7px}
.fld input[type=text],.fld input[type=number],.fld input[type=tel]{
  width:100%;padding:12px 13px;border-radius:11px;font-size:15px;font-family:inherit;
  background:var(--card);border:1.5px solid var(--line2);color:var(--ink);
}
.fld input:focus{outline:none;border-color:var(--gold)}
.fld .hint{font-size:11.5px;color:var(--ink3);margin-top:6px;line-height:1.5}
.seg{display:flex;gap:9px}
.seg button{
  flex:1;padding:11px;border-radius:11px;font-size:14px;font-weight:700;
  background:var(--card);border:1.5px solid var(--line2);color:var(--ink2);
}
.seg button.on{border-color:var(--gold);background:var(--accent-soft-bg);color:var(--gold)}
.seg button:active{transform:scale(.97)}
.suffix{position:relative}
.suffix .unit{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-size:15px;font-weight:750;color:var(--ink3);
}

/* 商品选择（按分类分组） */
.pk-sec{margin-bottom:14px}
.pk-sec-h{
  display:flex;align-items:center;gap:9px;padding:11px 12px;
  background:var(--card);border:1px solid var(--line);border-radius:12px 12px 0 0;
  border-bottom:none;
}
.pk-sec-h b{font-size:14.5px;font-weight:750;flex:1}
.pk-sec-h .cnt{font-size:11.5px;color:var(--ink3)}
.pk-list{
  border:1px solid var(--line);border-radius:0 0 12px 12px;overflow:hidden;background:var(--card);
}
.pk-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-top:1px solid var(--line)}
.pk-item:first-child{border-top:none}
.pk-item .nm{flex:1;min-width:0;font-size:13.5px;font-weight:650;line-height:1.35}
.pk-item .st{font-size:10.5px;color:var(--ink3);margin-top:2px}
.pk-item .st.ow{color:var(--rose);font-weight:700}
/* 勾选框 */
.ck{
  width:22px;height:22px;border-radius:7px;flex:0 0 auto;
  border:1.8px solid var(--line2);background:var(--card);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:transparent;transition:.15s;
}
.ck.on{background:var(--solid);border-color:var(--solid);color:var(--solid-fg)}
.ck.half{background:var(--gold);border-color:var(--gold);color:#fff}

/* 通用确认弹窗的两个按钮 */
.two-btn{display:flex;gap:9px}
.btn2{
  flex:1;padding:12px;border-radius:12px;font-size:14.5px;font-weight:750;
  background:var(--solid);color:var(--solid-fg);
}
.btn2.ghost{background:transparent;border:1.5px solid var(--line2);color:var(--ink2)}
.btn2.primary{background:var(--gold);color:#fff}
.btn2:active{transform:scale(.97)}

/* 生效时间选项 */
.ef-opt{
  display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  padding:14px;border-radius:12px;background:var(--card);
  border:1.5px solid var(--line2);margin-bottom:10px;
}
.ef-opt.on{border-color:var(--gold);background:var(--accent-soft-bg)}
.ef-opt .ic{font-size:19px;flex:0 0 auto;line-height:1.3}
.ef-opt .tx b{display:block;font-size:14.5px;font-weight:750}
.ef-opt .tx span{font-size:11.5px;color:var(--ink3);line-height:1.5;margin-top:2px;display:block}
.ef-pick{margin-top:10px;display:none}
.ef-pick.on{display:block}
.ef-pick input{
  width:100%;padding:12px;border-radius:11px;font-size:15px;font-family:inherit;
  background:var(--card);border:1.5px solid var(--line2);color:var(--ink);
}
.ef-tip{
  background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:10px;
  padding:11px 13px;font-size:11.5px;color:var(--warn-fg);line-height:1.6;margin-bottom:14px;
}

/* 「我的」里的系统管理行，稍微突出 */
.merow.admin-row span b{color:var(--gold)}

/* 国家按钮较多时换行排列 */
.seg.wrap{flex-wrap:wrap}
.seg.wrap button{flex:1 1 46%;min-width:132px}
.seg button:disabled,.fld input:disabled{opacity:.7;cursor:default}

/* 结算明细里的「抹零」行：绿色表示让利给客人 */
.sumline.adjust{color:var(--ink2);padding-top:7px;margin-top:3px;border-top:1px dashed var(--line2)}
.sumline.adjust .val{color:var(--jade);font-weight:750}

/* ===========================================================================
 *  商品管理 · 列表 / 编辑 / 分类
 * ======================================================================== */

/* 分类筛选条 */
.gfilter{display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.gfilter::-webkit-scrollbar{display:none}
.gf{
  flex:0 0 auto;padding:7px 13px;border-radius:16px;font-size:12.5px;font-weight:650;
  background:var(--card);border:1.5px solid var(--line2);color:var(--ink2);
}
.gf.on{background:var(--solid);border-color:var(--solid);color:var(--solid-fg)}
.gf:active{transform:scale(.95)}

/* 分组 */
.gsec{margin-bottom:16px}
.gsec-h{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:0 2px 8px;border-bottom:1px solid var(--line);
}
.gsec-h b{font-size:13.5px;font-weight:750;letter-spacing:-.01em}
.gsec-h span{font-size:11px;color:var(--ink3)}
.gempty{padding:22px 0;text-align:center;font-size:12.5px;color:var(--ink3)}

/* 商品行 */
.grow{
  display:flex;align-items:center;gap:11px;padding:11px 2px;
  border-bottom:1px solid var(--line);
}
.grow:active{background:var(--bg-soft)}
.grow.off{opacity:.5}
.gico{
  width:38px;height:38px;border-radius:10px;flex:0 0 auto;
  background:var(--bg-soft);display:flex;align-items:center;justify-content:center;font-size:19px;
}
.gtx{flex:1;min-width:0}
.gtx b{display:block;font-size:14px;font-weight:700;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtx span{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gstate{
  flex:0 0 auto;font-size:10.5px;font-weight:750;padding:4px 9px;border-radius:7px;
  background:var(--accent-soft-bg);color:var(--jade);border:1px solid var(--jade);
}
.gstate.out{background:var(--bg-soft);color:var(--rose);border-color:rgba(251,113,133,.4)}
.gar{flex:0 0 auto;color:var(--ink3);font-size:17px}

/* 分类管理行 */
.crow{
  display:flex;align-items:center;gap:10px;padding:13px 14px;margin-bottom:9px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
}
.crow:active{background:var(--bg-soft)}
.ctx{flex:1;min-width:0}
.ctx b{display:block;font-size:14.5px;font-weight:700}
.ctx span{font-size:11.5px;color:var(--ink3);margin-top:2px;display:block}
.cmv{flex:0 0 auto;display:flex;gap:6px}
.cmv button{
  width:32px;height:32px;border-radius:9px;font-size:14px;
  background:var(--bg-soft);border:1px solid var(--line2);color:var(--ink2);
}
.cmv button:disabled{opacity:.3}
.cmv button.del{color:var(--rose)}
.cmv button:active{transform:scale(.92)}

/* 表情选择 */
.emopick{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.emo{
  width:42px;height:42px;border-radius:11px;font-size:21px;
  background:var(--card);border:1.5px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
}
.emo.on{border-color:var(--gold);background:var(--accent-soft-bg)}
.emo:active{transform:scale(.92)}

/* 表单里的次级输入（三语并排） */
.fld.sub{margin:0 0 9px}
.fld.sub:last-child{margin-bottom:0}
.fld.sub label{font-size:11.5px;color:var(--ink3);font-weight:650}
.fld.sub input{padding:10px 12px;font-size:14px}

.btn.danger{color:var(--rose);border-color:rgba(251,113,133,.4)}

/* 表单里的「翻译」小按钮（跟在语言名后面） */
.fld.sub label{display:flex;align-items:center;gap:6px}
.trbtn{
  padding:2px 7px;border-radius:5px;font-size:9.5px;font-weight:750;line-height:1.5;
  background:#f59e0b;color:#fff;letter-spacing:.02em;
}
.trbtn:disabled{opacity:.6}
.trbtn:active{transform:scale(.93)}

/* ===========================================================================
 *  员工端
 * ======================================================================== */
.spwho{display:flex;gap:9px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none}
.spwho::-webkit-scrollbar{display:none}
.spwho.mini{padding-bottom:12px}
.spw{
  flex:0 0 auto;min-width:104px;padding:12px 13px;border-radius:14px;text-align:left;
  background:var(--card);border:1.5px solid var(--line2);
  display:flex;flex-direction:column;gap:1px;
}
.spw.on{border-color:var(--gold);background:var(--accent-soft-bg)}
.spw .av{font-size:24px;line-height:1;margin-bottom:3px}
.spw b{font-size:13.5px;font-weight:750;line-height:1.3}
.spw span{font-size:10.5px;color:var(--ink3)}
.spw:active{transform:scale(.96)}

.spnow{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:9px 12px;border-radius:10px;background:var(--bg-soft);margin-bottom:14px;
}
.spnow span{font-size:11px;color:var(--ink3);font-weight:650}
.spnow b{font-size:12.5px;font-weight:700;font-family:var(--mono)}

/* ---- 实时连接：状态灯 + 提醒音开关 ---- */
.sprow{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.livechip{
  flex:1;display:flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:99px;border:1px solid var(--line);
  background:var(--bg-soft);font-size:12px;font-weight:650;color:var(--ink3);
}
.livechip.on{color:#0f9d58;border-color:rgba(15,157,88,.35);background:rgba(15,157,88,.10)}
.livechip.wait{color:#c98a00;border-color:rgba(201,138,0,.35);background:rgba(201,138,0,.10)}
.livechip.err{color:#d93025;border-color:rgba(217,48,37,.35);background:rgba(217,48,37,.10)}
.livechip:active{transform:scale(.98)}
.livesnd{
  padding:8px 12px;border-radius:99px;border:1px solid var(--line);
  background:var(--bg-soft);font-size:12px;font-weight:650;color:var(--ink3);
}
.livesnd.on{color:#0f9d58;border-color:rgba(15,157,88,.35);background:rgba(15,157,88,.10)}
.liveform{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.liveform input{
  padding:11px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);font-size:14px;color:var(--ink);
}
.liveform input:focus{outline:none;border-color:var(--brand, #c2410c)}
.liveform .btn{padding:12px;border-radius:10px;font-size:14px;font-weight:700}
/* P0 告警时员工面板闪一下 */
#staffPanel.p0flash{animation:p0flash 1.2s ease}
@keyframes p0flash{
  0%,100%{box-shadow:none}
  50%{box-shadow:inset 0 0 0 3px rgba(217,48,37,.55)}
}

.spcard{
  display:flex;align-items:center;gap:12px;padding:15px;margin-bottom:10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
}
.spcard:active{background:var(--bg-soft)}
.spcard .ic{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;font-size:20px;
  background:var(--bg-soft);display:flex;align-items:center;justify-content:center;
}
.spcard .tx{flex:1;min-width:0}
.spcard .tx b{display:block;font-size:15px;font-weight:700}
.spcard .tx span{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spcard .bd{
  flex:0 0 auto;min-width:22px;height:22px;padding:0 7px;border-radius:11px;
  background:var(--gold);color:#fff;font-size:11.5px;font-weight:750;
  display:flex;align-items:center;justify-content:center;
}
.spcard .ar{flex:0 0 auto;color:var(--ink3);font-size:18px}

/* 汇总双格 */
.spsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-bottom:13px}
.spsum div{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:13px;text-align:center;
}
.spsum b{display:block;font-size:clamp(17px,5vw,22px);font-weight:800;
  letter-spacing:-.02em;color:var(--gold);white-space:nowrap}
.spsum span{font-size:11px;color:var(--ink3);margin-top:1px;display:block}

/* 分段切换 */
.spseg{display:flex;gap:6px;background:var(--bg-soft);padding:4px;border-radius:11px;margin-bottom:14px}
.spseg.wrap{flex-wrap:wrap;background:none;padding:0;gap:7px}
.spseg button{
  flex:1;padding:8px;border-radius:8px;font-size:13px;font-weight:650;color:var(--ink2);
}
.spseg.wrap button{flex:0 0 auto;padding:9px 14px;border:1.5px solid var(--line2);background:var(--card)}
.spseg button.on{background:var(--card);color:var(--ink);font-weight:750;box-shadow:var(--sh-sm)}
.spseg.wrap button.on{border-color:var(--gold);background:var(--accent-soft-bg);color:var(--gold)}

/* ---- 订台 ---- */
.bkcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:10px;
}
.bkcard.off{opacity:.5}
.bktop{display:flex;align-items:center;justify-content:space-between}
.bktime{font-size:19px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em}
.bkst{font-size:10.5px;font-weight:750;padding:3px 8px;border-radius:6px}
.bk-p{background:#fffbeb;color:#92400e}
.bk-c{background:var(--accent-soft-bg);color:var(--jade);border:1px solid var(--jade)}
.bk-a{background:var(--bg-soft);color:var(--ink3)}
.bk-x{background:rgba(251,113,133,.12);color:var(--rose)}
.bkwho{display:flex;align-items:center;gap:7px;margin-top:9px}
.bkwho b{font-size:15px;font-weight:700}
.vip{font-size:9.5px;font-weight:800;background:var(--gold);color:#fff;padding:2px 6px;border-radius:4px;letter-spacing:.05em}
.bkmeta{font-size:11.5px;color:var(--ink3);margin-top:3px}
.bknote{font-size:12px;color:var(--ink2);margin-top:8px;padding-top:8px;border-top:1px dashed var(--line2);line-height:1.55}
.bkacts{display:flex;gap:7px;margin-top:11px}
.bk{
  flex:1;padding:9px;border-radius:10px;font-size:13px;font-weight:700;
  background:var(--bg-soft);border:1px solid var(--line2);color:var(--ink2);
}
.bk.main{background:var(--solid);color:var(--solid-fg);border-color:var(--solid)}
.bk.call{flex:0 0 auto;background:transparent}
.bk:active{transform:scale(.95)}

/* ---- 业绩 ---- */
.perfbox{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:13px}
.pf{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center;
}
.pf span{display:block;font-size:10.5px;color:var(--ink3);font-weight:600}
.pf b{display:block;font-size:16px;font-weight:800;margin-top:3px;letter-spacing:-.02em}
.pf.hi{background:var(--accent-soft-bg);border-color:var(--jade)}
.pf.hi b{color:var(--jade);font-size:18px}

.tgt{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 13px;margin-bottom:16px}
.tgt .th{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3);margin-bottom:8px}
.tgt .th b{color:var(--gold);font-weight:750}
.tbar{height:7px;border-radius:4px;background:var(--bg-soft);overflow:hidden}
.tbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--gold-l))}

/* ---- 看板 ---- */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.kpi{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;
}
.kpi span{font-size:11px;color:var(--ink3);font-weight:600}
.kpi b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.kpi i{font-style:normal;font-size:10.5px;margin-top:3px;display:block}
.kpi i.up{color:var(--jade)}
.kpi i.down{color:var(--rose)}

.bdsec{margin-bottom:18px}
.bdsec h4{
  font-size:13px;font-weight:750;display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px;
}
.bdsec h4 em{font-style:normal;font-size:10.5px;color:var(--ink3);font-weight:500}
.bdsec h4.aih{color:var(--gold)}

.bar{display:grid;grid-template-columns:96px 1fr auto;gap:9px;align-items:center;margin-bottom:9px}
.bar .bn{font-size:12px;font-weight:650;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .bn em{font-style:normal;display:block;font-size:10px;color:var(--ink3)}
.bar .bt{height:6px;border-radius:3px;background:var(--bg-soft);overflow:hidden}
.bar .bt i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold-l))}
.bar .bv{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.bar .bv em{font-style:normal;display:block;font-size:9.5px;color:var(--ink3);font-weight:500}

.hours{display:flex;gap:6px;align-items:flex-end;height:96px}
.hb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.hb i{width:100%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--gold),var(--gold-l));min-height:3px}
.hb span{font-size:9.5px;color:var(--ink3)}

/* AI 建议卡片 */
.adv{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:12px;padding:13px 14px;margin-bottom:10px;
}
.adv.high{border-left-color:var(--rose)}
.adv .ah{display:flex;align-items:center;gap:8px}
.adv .ai{font-size:17px}
.adv .ah b{flex:1;font-size:14px;font-weight:750}
.adv .lv{font-size:9.5px;font-weight:750;padding:2px 7px;border-radius:5px;background:var(--bg-soft);color:var(--ink3)}
.adv.high .lv{background:rgba(251,113,133,.13);color:var(--rose)}
.adv p{font-size:12.5px;color:var(--ink2);line-height:1.65;margin-top:7px}
.adv .aac{
  font-size:12px;color:var(--gold);font-weight:700;margin-top:8px;padding-top:8px;
  border-top:1px dashed var(--line2);line-height:1.55;
}
.bdfoot{font-size:11px;color:var(--ink3);line-height:1.6;padding:11px 12px;
  background:var(--bg-soft);border-radius:10px}

/* ---- 客户 ---- */
.cucard{
  display:flex;align-items:center;gap:11px;padding:13px;margin-bottom:9px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
}
.cucard:active{background:var(--bg-soft)}
.cav{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;font-size:16px;font-weight:800;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.cav.big{width:52px;height:52px;border-radius:16px;font-size:21px}
.lv-plat{background:linear-gradient(135deg,#7c3aed,#4c1d95)}
.lv-gold{background:linear-gradient(135deg,#f59e0b,#b45309)}
.lv-silver{background:linear-gradient(135deg,#94a3b8,#64748b)}
.lv-new{background:linear-gradient(135deg,#34d399,#059669)}
.cucard .ctx{flex:1;min-width:0}
.cucard .ctx b{display:block;font-size:14.5px;font-weight:700}
.cucard .ctx span{display:block;font-size:11px;color:var(--ink3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clv{font-size:10px;font-weight:750;padding:3px 7px;border-radius:5px;flex:0 0 auto;
  color:#fff;background:var(--ink3)}
.clv.lv-gold{background:linear-gradient(135deg,#f59e0b,#b45309)}
.clv.lv-plat{background:linear-gradient(135deg,#7c3aed,#4c1d95)}
.clv.lv-silver{background:linear-gradient(135deg,#94a3b8,#64748b)}
.clv.lv-new{background:linear-gradient(135deg,#34d399,#059669)}
.cbd{font-size:11px;font-weight:700;color:var(--gold);flex:0 0 auto}
.cucard .ar{color:var(--ink3);font-size:17px;flex:0 0 auto}

.cuhead{
  display:flex;align-items:center;gap:12px;padding:16px;margin-bottom:14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
}
.cuhead div{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cuhead b{font-size:17px;font-weight:800}
.infobox{
  background:var(--bg-soft);border-radius:11px;padding:12px 13px;
  font-size:12.5px;color:var(--ink2);line-height:1.65;
}

/* 订单行 */
.orow{
  display:grid;grid-template-columns:46px 1fr auto auto;gap:9px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.orow:last-child{border-bottom:none}
.orow .ot{font-size:11px;color:var(--ink3);font-family:var(--mono)}
.orow .oi{font-size:12.5px;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orow .os{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.orow .oc{font-size:12px;font-weight:750;color:var(--jade);font-variant-numeric:tabular-nums}

/* 没有提成的订单：灰显「—」，不要显示 +RM0 */
.orow .oc.zero{color:var(--ink3);font-weight:600}

/* ===========================================================================
 *  台情（参考收银系统台情页：白底彩边格子）
 * ======================================================================== */

/* 顶部统计：纯文字可点筛选，选中时标签下方一条状态色短线 */
.ts{font-family:inherit}
.ts:active{opacity:.6}
.ts.on span{color:var(--ink);font-weight:750}
.ts.on span::after{
  content:"";display:block;width:20px;height:2.5px;border-radius:2px;
  margin:3px auto 0;background:currentColor;
}
.ts.st-free.on span::after{background:#10b981}
.ts.st-open.on span::after{background:#f43f5e}
.ts.st-reserved.on span::after{background:#f59e0b}
.ts.st-bill.on span::after{background:#d97706}
.ts.st-locked.on span::after{background:var(--ink3)}
.ts.st-merged.on span::after{background:var(--ink3)}

/* 顶部统计（原注释保留） */
.tstats{
  display:grid;grid-template-columns:repeat(6,1fr);
  margin:0 0 16px;padding:4px 0 2px;
}
.ts{
  padding:5px 2px;text-align:center;
  background:none;border:0;border-radius:0;
}
.ts b{display:block;font-size:22px;font-weight:800;letter-spacing:-.035em;line-height:1.05}
.ts span{font-size:9.5px;color:var(--ink3);display:block;margin-top:4px;font-weight:600}
.ts.st-free b{color:var(--jade)}
.ts.st-open b{color:var(--rose)}
.ts.st-reserved b{color:var(--gold)}
.ts.st-bill b{color:#d97706}
.ts.st-locked b{color:var(--ink3)}
.ts.st-merged b{color:var(--ink3)}

/* 区域 tab：等宽一排，选中白底凸起 */
/* 区域标题 */
.tarea{margin-bottom:18px}
.tarea h4{
  font-size:13px;font-weight:750;margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:baseline;
}
.tarea h4 em{font-style:normal;font-size:11px;color:var(--ink3);font-weight:600}

/* 桌格：白底 + 彩色描边，桌号与状态标签同一行 */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:9px}
.tcell{
  padding:10px 9px 9px;border-radius:13px;text-align:left;
  background:var(--card);border:1.5px solid var(--line2);
  display:flex;flex-direction:column;gap:1px;min-height:82px;
}
.tcell:active{transform:scale(.96)}
.tc-no{font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.tc-amt{
  font-size:15px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-top:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tc-sub{margin-top:3px;font-size:9.5px;color:var(--ink3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 状态只靠边框颜色区分（格子里不再写状态文字） */
.tcell.st-free{border-color:#10b981}
.tcell.st-open{border-color:#f43f5e}
.tcell.st-reserved{border-color:#f59e0b}
.tcell.st-bill{border-color:#d97706}
.tcell.st-locked{border-style:dashed;border-color:var(--line2);opacity:.78}
.tcell.st-merged{border-style:dashed;border-color:var(--line2);opacity:.62}

/* 金额也跟状态走一点，扫视更快 */
.tcell.st-open .tc-amt,
.tcell.st-bill .tc-amt{color:var(--ink)}
.tcell.st-free .tc-amt,
.tcell.st-reserved .tc-amt,
.tcell.st-locked .tc-amt,
.tcell.st-merged .tc-amt{color:var(--ink3)}

.tdhead{
  display:flex;align-items:center;gap:10px;padding:15px 16px;margin-bottom:14px;
  border-radius:var(--r);border:1.5px solid var(--line2);background:var(--card);
}
.tdhead b{font-size:26px;font-weight:800;letter-spacing:-.02em}
.tdhead .tdamt{margin-left:auto;font-size:18px;font-weight:800;color:var(--gold);
  font-variant-numeric:tabular-nums}
.tdhead.st-open{border-color:var(--rose);background:rgba(251,113,133,.07)}
.tdhead.st-free{border-color:var(--jade);background:var(--accent-soft-bg)}
.tdhead.st-reserved{border-color:var(--gold);background:var(--accent-soft-bg)}
.tdhead.st-bill{border-color:#d97706;background:rgba(217,119,6,.08)}

.inforow{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0}
.inforow span{color:var(--ink3);font-weight:600}
.inforow b{font-weight:700}

/* 台块红点：刚操作过 / 有新变化 */
.tcell{position:relative}
.tc-dot{
  position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;
  background:#ef4444;box-shadow:0 0 0 2px var(--card);
  animation:dotIn .25s ease both;
}
@keyframes dotIn{from{transform:scale(0)}to{transform:scale(1)}}

/* ---- 税费设置 ---- */
.txrow{display:flex;align-items:center;gap:9px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.txrow:last-of-type{border-bottom:0}
.txrow b{font-size:13.5px;font-weight:700;flex:0 0 auto;min-width:96px}
.txrow span{font-size:11.5px;color:var(--ink3);flex:1}
.txrow.off{opacity:.5}
.txar{color:var(--ink3);font-size:16px;flex:0 0 auto}
.txrow b{min-width:76px}
.txrow span{white-space:nowrap;font-size:11px}

/* ---- 员工端入口（staff.html）：没有点单页，面板铺满 ---- */
body.app-staff .phone{min-height:100vh}
body.app-staff .tabbar,body.app-staff .cartbar{display:none}

/* 员工端头部语言按钮 */
.adm-lang{
  flex:0 0 auto;margin-left:auto;height:32px;padding:0 10px;border-radius:9px;
  background:var(--bg-soft);font-size:12px;font-weight:700;color:var(--ink2);
  display:flex;align-items:center;gap:4px;white-space:nowrap;
}
.adm-lang:active{background:var(--line)}

/* ============================================================
   台情页（娱总管风格）：淡边框、高密度、纯台号
   ============================================================ */
.tfilter{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.tftabs{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tftabs::-webkit-scrollbar{display:none}
.tftab{flex:0 0 auto;height:30px;padding:0 11px;border-radius:15px;
  border:1px solid var(--line);background:var(--card);
  font-size:12.5px;font-weight:650;color:var(--ink2);white-space:nowrap}
.tftab em{font-style:normal;font-size:10.5px;color:var(--ink3);margin-left:3px}
.tftab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tftab.on em{color:rgba(255,255,255,.7)}
.tfsort{flex:0 0 auto;height:30px;padding:0 9px;border-radius:15px;
  border:1px solid var(--line);background:var(--card);
  font-size:11.5px;font-weight:650;color:var(--ink2);white-space:nowrap}

/* 统计行：六项纯文字，浅灰小字 */
.tstats{display:flex;flex-wrap:wrap;gap:4px 10px;padding:8px 10px;margin-bottom:10px;
  border-radius:10px;background:var(--bg-soft)}
.tstats .ts{display:inline-flex;align-items:baseline;gap:3px;background:none;
  border:0;padding:0;font-size:11.5px;color:var(--ink3)}
.tstats .ts b{font-size:13px;font-weight:800;color:var(--ink)}
.tstats .ts.on b{color:var(--gold)}
.tstats .ts.on{font-weight:700;color:var(--ink)}

/* 网格：固定 4 列，紧凑 */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.tarea{margin-bottom:12px}
.tarea h4{margin:0 0 7px;font-size:12px;font-weight:700;color:var(--ink2);
  display:flex;align-items:center;gap:5px}
.tarea h4 em{font-style:normal;font-size:10.5px;color:var(--ink3);font-weight:600}
.tcell{position:relative;min-width:0;padding:9px 2px 8px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);
  display:flex;flex-direction:column;align-items:center;gap:1px;overflow:hidden}
.tcell .tc-no{font-size:15px;font-weight:750;letter-spacing:-.01em;line-height:1.15;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcell .tc-amt{font-size:9.5px;color:var(--ink3);font-variant-numeric:tabular-nums;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcell .tc-dot{position:absolute;top:4px;right:4px;width:6px;height:6px;
  border-radius:50%;background:var(--rose)}
/* 状态用淡色底，不用彩色粗边 */
.tcell.st-free    {background:var(--card)}
.tcell.st-open    {background:#fff6ed;border-color:#f6d9bd}
.tcell.st-reserved{background:#fffbe6;border-color:#f0e2b0}
.tcell.st-bill    {background:#eef6ff;border-color:#c8ddf5}
.tcell.st-locked  {background:#f4f4f5;border-color:var(--line2)}
.tcell.st-merged  {background:#f6effa;border-color:#e2d0ee}

/* ---- 员工端底部导航 ---- */
.spnav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;
  width:100%;max-width:480px;z-index:88;display:flex;
  background:var(--card);border-top:1px solid var(--line);
  padding:5px 0 calc(5px + var(--safe-b))}
.spnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:0;font-size:11px;font-weight:600;color:var(--ink3);padding:4px 0}
.spnav button span{font-size:19px;line-height:1}
.spnav button.on{color:var(--solid)}
body.app-staff .adm-body{padding-bottom:calc(60px + var(--safe-b))}
.spnav{display:none}
body.app-staff .spnav{display:flex}

/* 台情页微调：排序按钮只留图标、空台边框归灰、统计项拉开 */
.tfsort{padding:0 8px;font-size:13px;min-width:34px;justify-content:center}
.tcell.st-free{border-color:var(--line)}
.tstats{gap:6px 14px}
.tcell{padding:8px 2px 7px}
.spnav{box-shadow:0 -1px 0 var(--line)}
body.app-staff .adm-body{padding-bottom:calc(72px + var(--safe-b))}
/* 内容末尾的提示条别被底部导航挡住 */
body.app-staff .bdfoot{margin-bottom:64px}


/* 充值卡：暗色下拉开层次（普通卡压暗，最划算发暖） */
html[data-theme="dark"] .rcard{
  background:linear-gradient(160deg,#1b1817,#141110);
  border-color:#2b2622;
}
html[data-theme="dark"] .rcard .rc-pay{color:#f0ebe2}
html[data-theme="dark"] .rcard.hot{
  background:linear-gradient(160deg,#3d2d18,#231b12);
  border-color:#5c4527;
  box-shadow:0 0 0 1px rgba(240,168,60,.18),var(--sh);
}
html[data-theme="dark"] .rcard.hot .rc-pay{color:#fff}