/* CBD 市场拿单 · 公共样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #2b2b33;
  background: #f2f0ec;
}
button { font-family: inherit; cursor: pointer; border: none; }
input, select { font-family: inherit; }

:root {
  --mk-local: #8f8f9c;
  --mk-regional: #7aa6c9;
  --mk-national: #87a291;
  --mk-intl: #c9756a;
  --ink: #2b2b33;
  --paper: #efe6e1;
  --gold: #d9a441;
  --ok: #3d9a6b;
  --warn: #d4633f;
  --dim: #8a8a95;
}

/* ---------- 订单卡组件（还原实体卡） ---------- */
.ocard {
  display: flex; border-radius: 8px; overflow: hidden;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  width: 178px; height: 128px; flex: none;
  position: relative; text-align: left;
}
.ocard .left {
  width: 42%; color: #16161c; padding: 7px 8px;
  display: flex; flex-direction: column;
}
.ocard.mk-local .left { background: var(--mk-local); }
.ocard.mk-regional .left { background: var(--mk-regional); }
.ocard.mk-national .left { background: var(--mk-national); }
.ocard.mk-intl .left { background: var(--mk-intl); }
.ocard .ids { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
.ocard .prod { flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 300; line-height: 1; }
.ocard .mkt { text-align: center; font-size: 11px; letter-spacing: 1px; border-top: 1px solid rgba(0,0,0,.35); padding-top: 3px; }
.ocard .right { flex: 1; padding: 7px 9px 5px; display: flex; flex-direction: column; font-size: 12px; }
.ocard .row { display: flex; justify-content: space-between; align-items: baseline; padding: 1px 0; }
.ocard .row span { color: #6d6d78; font-size: 10px; }
.ocard .row b { font-size: 13px; }
.ocard .pay { display: flex; gap: 6px; margin-top: auto; border-top: 1px dashed #bbb; padding-top: 3px; }
.ocard .pay div { flex: 1; text-align: center; font-size: 9px; color: #6d6d78; line-height: 1.35; }
.ocard .pay b { display: block; font-size: 11px; color: var(--ink); }
.ocard .urgent-stamp {
  position: absolute; right: 8px; bottom: 22px;
  width: 30px; height: 30px; border: 2px solid #c0392b; border-radius: 50%;
  color: #c0392b; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-12deg); background: rgba(255,255,255,.55);
}
.ocard.taken { opacity: .35; filter: grayscale(.6); }
.ocard.sm { width: 136px; height: 98px; }
.ocard.sm .prod { font-size: 28px; }
.ocard.sm .mkt { font-size: 9px; }
.ocard.sm .right { font-size: 10px; padding: 5px 7px 4px; }
.ocard.sm .row b { font-size: 11px; }
.ocard.sm .pay div { font-size: 8px; }
.ocard.sm .pay b { font-size: 10px; }
.ocard.sm .urgent-stamp { width: 24px; height: 24px; font-size: 13px; bottom: 16px; }

/* ---------- 通用小组件 ---------- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.mk-local { background: var(--mk-local); color: #fff; }
.badge.mk-regional { background: var(--mk-regional); color: #fff; }
.badge.mk-national { background: var(--mk-national); color: #fff; }
.badge.mk-intl { background: var(--mk-intl); color: #fff; }
.badge.ok { background: var(--ok); color: #fff; }
.badge.warn { background: var(--warn); color: #fff; }
.badge.dim { background: #d8d5cf; color: #66666e; }
.badge.gold { background: var(--gold); color: #fff; }

.toast {
  position: fixed; left: 50%; top: 8%; transform: translateX(-50%);
  background: #2b2b33; color: #fff; padding: 12px 22px; border-radius: 10px;
  font-size: 15px; z-index: 999; box-shadow: 0 6px 20px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .25s; max-width: 86%;
}
.toast.show { opacity: 1; }
.toast.err { background: #b03a2e; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c4c1ba; margin-right: 5px; }
.dot.on { background: var(--ok); box-shadow: 0 0 6px var(--ok); }

/* 16:9 舞台缩放（大屏/讲师后台共用） */
.stage-wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.stage { width: 1920px; height: 1080px; transform-origin: center center; position: relative; }