/* 牧澜臻选 · 商户后台 —— 简洁后台样式（无冗余装饰，聚焦效率） */
:root {
  --brand: #C66B3D;
  --brand-dark: #A9552C;
  --bg: #F5F6F8;
  --panel: #FFFFFF;
  --text: #1F2937;
  --muted: #6B7280;
  --line: #E5E7EB;
  --danger: #DC2626;
  --warn: #D97706;
  --ok: #16A34A;
  --info: #2563EB;
  --radius: 6px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ── 进入中（免登录） ── */
.boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(160deg, #2B1D14, #4A2E1B); color: #F3E3C0; z-index: 300; }
.boot__logo { font-size: 22px; font-weight: 700; letter-spacing: 2px; }
.boot__text { font-size: 13px; opacity: .8; }
.boot__err { color: #FCA5A5; font-size: 13px; max-width: 420px; text-align: center; line-height: 1.6; }

/* ── 布局 ── */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.app[hidden] { display: none; }
.topbar { height: 52px; background: #2B1D14; color: #F3E3C0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex-shrink: 0; }
.topbar__brand { font-weight: 700; letter-spacing: .5px; }
.topbar__sep { opacity: .4; margin: 0 6px; }
.topbar__right { display: flex; align-items: center; gap: 12px; }
.topbar__user { font-size: 13px; opacity: .85; }

/* ── 订单到达语音播报：顶栏 🔊 开关 + 状态点 ── */
.topbar__alert { border: 0; background: rgba(255,255,255,.12); color: #F3E3C0; width: 30px; height: 30px; border-radius: 8px; font-size: 15px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.topbar__alert:hover { background: rgba(255,255,255,.22); }
.topbar__alert.is-off { opacity: .45; }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #9CA3AF; }
.alert-dot.is-idle { background: #9CA3AF; }
.alert-dot.is-ok { background: #22C55E; }
.alert-dot.is-speaking { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.35); }
.alert-dot.is-warn { background: #F59E0B; }
.alert-dot.is-error { background: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.35); }
/* 播报面板里的占位符说明 */
.panel__body code { background: #F3F4F6; padding: 1px 4px; border-radius: 4px; font-size: 11px; }
.body { flex: 1; display: flex; min-height: 0; }
.sidebar { width: 168px; background: #fff; border-right: 1px solid var(--line); padding: 12px 8px; flex-shrink: 0; }
.sidebar__item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; border-radius: var(--radius); color: var(--text); cursor: pointer; margin-bottom: 2px; }
.sidebar__item:hover { background: #F3F4F6; }
.sidebar__item.is-active { background: var(--brand); color: #fff; }
.sidebar__badge { float: right; background: var(--danger); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; line-height: 16px; }
.content { flex: 1; padding: 16px; overflow: auto; }

/* ── 通用 ── */
.page__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.page__title { font-size: 17px; font-weight: 700; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel__head { padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.panel__body { padding: 14px; }

.btn { border: 1px solid var(--line); background: #fff; color: var(--text); padding: 6px 14px; border-radius: var(--radius); cursor: pointer; }
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn--danger { color: var(--danger); border-color: #FCA5A5; }
.btn--danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.35); color: inherit; }
.btn--sm { padding: 4px 10px; font-size: 13px; }
.btn--block { width: 100%; padding: 9px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { display: block; margin-bottom: 12px; }
.field__label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field__input, .select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 10px; background: #fff; }
.field__input:focus, .select:focus { outline: none; border-color: var(--brand); }
.select--sm { width: auto; padding: 4px 8px; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.table th { background: #FAFAFA; font-weight: 600; font-size: 13px; color: var(--muted); }
.table tr:last-child td { border-bottom: 0; }
.table__empty { padding: 40px; text-align: center; color: var(--muted); }

.tag { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 12px; line-height: 18px; }
.tag--pending { background: #FEF3C7; color: #92400E; }
.tag--accepted { background: #DBEAFE; color: #1E40AF; }
.tag--served { background: #EDE9FE; color: #5B21B6; }
.tag--settled { background: #DCFCE7; color: #166534; }
.tag--rejected, .tag--cancelled { background: #FEE2E2; color: #991B1B; }
.tag--idle { background: #F3F4F6; color: #4B5563; }
.tag--on { background: #DCFCE7; color: #166534; }
.tag--off { background: #F3F4F6; color: #6B7280; }
.tag--soldOut { background: #FEE2E2; color: #991B1B; }

.grid { display: grid; gap: 12px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.stat__label { color: var(--muted); font-size: 13px; }
.stat__value { font-size: 24px; font-weight: 700; margin-top: 4px; }

/* ── 订单卡 ── */
.order-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; display: flex; gap: 14px; align-items: flex-start; }
.order-card.is-urgent { border-color: var(--danger); background: #FFF5F5; }
.order-card__main { flex: 1; min-width: 0; }
.order-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.order-card__no { font-weight: 700; }
.order-card__meta { color: var(--muted); font-size: 13px; }
.order-card__items { font-size: 13px; color: #374151; }
.order-card__items li { list-style: none; }
.order-card__acts { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.overtime { color: var(--danger); font-weight: 600; }
.overtime--warn { color: var(--warn); }

/* ── 订单卡上的「券核销」块（美团券核销，见 docs/meituan-coupon-redemption-plan.md）── */
.redeem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 13px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 6px;
}
.redeem__tag {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #059669;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.redeem__deal { font-weight: 600; color: #065F46; }
/* 已撤销：保留可见痕迹（核销是钱，不能悄悄消失），但降饱和避免误读为"有效" */
.redeem.is-reverted { background: #F9FAFB; border-color: #E5E7EB; }
.redeem.is-reverted .redeem__tag { background: #6B7280; }
.redeem.is-reverted .redeem__deal { color: #6B7280; text-decoration: line-through; }

/* ── 模态 ── */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
/* 关键：.modal 的 display:flex 会覆盖 hidden 属性，必须显式补回，否则遮罩层一直显示 */
.modal[hidden] { display: none; }
.modal__mask { position: absolute; inset: 0; background: rgba(17,24,39,.45); }
.modal__panel { position: relative; background: #fff; border-radius: 8px; width: 520px; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; }
.modal__head { padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.modal__close { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--muted); }
.modal__body { padding: 16px; overflow: auto; }
.modal__foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

/* ── Toast ── */
.toast { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); background: rgba(17,24,39,.9); color: #fff; padding: 8px 18px; border-radius: 6px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 200; }
.toast.is-show { opacity: 1; }

/* ── 二维码 ── */
.qr-box { text-align: center; }
.qr-box img { width: 220px; height: 220px; border: 1px solid var(--line); border-radius: 6px; }
.qr-fallback { padding: 20px; background: #F9FAFB; border: 1px dashed var(--line); border-radius: 6px; font-size: 13px; word-break: break-all; }

.muted { color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; }
.row--between { justify-content: space-between; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; }
.hidden { display: none !important; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ── 订单卡片：客户信息行 ── */
.order-card__cust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; padding: 6px 10px; border-radius: 8px; background: #F0F7FF; border: 1px solid #DBEAFE; }
.order-card__cust.is-guest { background: #F9FAFB; border-color: var(--line); }
.order-card__cust .cust-icon { font-size: 14px; line-height: 1; }
.order-card__cust .cust-name { font-weight: 600; color: #1E3A8A; }
.order-card__cust.is-guest .cust-name { font-weight: 400; color: var(--muted); }

/* ── 进销存：概览卡片 ── */
.stock-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.stock-card {
  flex: 1 1 150px; min-width: 150px; padding: 12px 14px;
  background: var(--card, #fff); border: 1px solid var(--line, #E5E7EB);
  border-radius: 10px;
}
.stock-card__label { font-size: 12px; color: var(--muted, #6B7280); }
.stock-card__value { font-size: 20px; font-weight: 700; margin: 4px 0 2px; color: #1F2937; }
.stock-card__sub { font-size: 12px; color: var(--muted, #6B7280); }
.stock-card.is-profit .stock-card__value { color: #2F855A; }
.stock-card.is-loss { border-color: #FBD5D5; background: #FFF8F8; }
.stock-card.is-loss .stock-card__value { color: #C53030; }
.stock-card.is-stock { border-color: #DBEAFE; background: #F8FAFF; }
.stock-card.is-stock .stock-card__value { color: #1E3A8A; }

/* ── 进销存：三区域页签 ── */
.stock-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.stock-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  font-size: 14px; color: var(--text, #374151);
  background: var(--card, #fff); border: 1px solid var(--line, #E5E7EB);
}
.stock-tab:hover { border-color: #C7D2FE; }
.stock-tab.is-active {
  background: linear-gradient(135deg, #E2A33C 0%, #C97F17 100%);
  border-color: transparent; color: #fff; font-weight: 600;
}
.stock-tab__icon { font-size: 15px; line-height: 1; }

/* ── 进货凭证图片 ── */
.form-row { margin-bottom: 12px; }
.form-row > label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.voucher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 12px; }
.voucher-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; cursor: pointer; transition: box-shadow .15s; }
.voucher-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.voucher-card__img { height: 140px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.voucher-card__img img { width: 100%; height: 100%; object-fit: cover; }
.voucher-card__meta { padding: 8px 10px; font-size: 12px; flex: 1; }
.voucher-card__date { font-weight: 600; margin-bottom: 4px; color: var(--text); }
.voucher-card__line { margin: 2px 0; line-height: 1.4; }
.voucher-card__acts { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
.voucher-preview { margin-top: 6px; }
.voucher-view { background: #0b0b0b; border-radius: 8px; min-height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* ══════════ 固定资产：图片上传 / 排序 / 主图 / 详情 ══════════ */
/* 表单两列（桌面）→ 窄屏自动单列 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .form-row--full { grid-column: 1 / -1; }
.req { color: #C53030; }
.field__input.is-invalid { border-color: var(--danger); background: #FFF5F5; }
.fa-sub { font-size: 11px; margin-top: 2px; line-height: 1.45; }

.fa-upload { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #FAFAFB; }
.fa-upload__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.fa-tip { font-weight: 400; font-size: 12px; }

.fa-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.fa-imgs.is-drag { outline: 2px dashed var(--brand); outline-offset: 4px; border-radius: 8px; }
.fa-img { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; position: relative; }
.fa-img__box { position: relative; height: 96px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fa-img__box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-img__badge { position: absolute; left: 4px; top: 4px; background: #C97F17; color: #fff; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 4px; }
.fa-img__name { font-size: 11px; padding: 4px 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-img__meta { font-size: 11px; color: var(--muted); padding: 1px 6px 5px; }
.fa-img__acts { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 2px; justify-content: center; padding: 3px; background: linear-gradient(transparent, rgba(17,24,39,.72)); opacity: 0; transition: opacity .15s; }
.fa-img:hover .fa-img__acts { opacity: 1; }
.fa-img__acts button { border: 0; background: rgba(255,255,255,.92); border-radius: 4px; cursor: pointer; font-size: 12px; line-height: 20px; padding: 0 6px; color: #1F2937; }
.fa-img__acts button:disabled { opacity: .4; cursor: not-allowed; }
.fa-img__mask { position: absolute; inset: 0; background: rgba(17,24,39,.62); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; padding: 6px; text-align: center; }
.fa-img__mask.is-err { background: rgba(153,27,27,.84); }
.fa-img__mask.is-confirm { background: rgba(17,24,39,.88); }
.fa-img__maskrow { display: flex; gap: 6px; }
.fa-bar { width: 84%; height: 6px; background: rgba(255,255,255,.32); border-radius: 99px; overflow: hidden; }
.fa-bar i { display: block; height: 100%; width: 0; background: #F3C46A; transition: width .18s; }
.fa-img--add { cursor: pointer; border-style: dashed; display: flex; align-items: center; justify-content: center; min-height: 126px; color: var(--muted); background: #fff; }
.fa-img--add:hover { border-color: var(--brand); color: var(--brand); }
.fa-img--add > span { text-align: center; font-size: 18px; line-height: 1.3; }
.fa-img--add small { font-size: 12px; }

/* 资产详情字段表 */
.fa-detail { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fa-detail__row { display: flex; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.fa-detail__row:last-child { border-bottom: 0; }
.fa-detail__row:nth-child(odd) { background: #FAFAFB; }
.fa-detail__k { width: 124px; flex-shrink: 0; color: var(--muted); }
.fa-detail__v { flex: 1; min-width: 0; word-break: break-all; }
.fa-detail__acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* 列表：主图缩略图 + 图片数 */
.fa-thumb-btn { display: inline-flex; align-items: center; gap: 6px; }
.fa-thumb { width: 30px; height: 30px; border-radius: 6px; background: #F3F4F6; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); background-size: cover; background-position: center; flex-shrink: 0; }
.fa-thumb--img { border-color: #D1D5DB; }
.fa-thumb__n { font-size: 12px; }

/* 大图预览遮罩：独立于 #modal（层级要高于它，否则会被弹窗盖住） */
.fa-lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(9,9,11,.92); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.fa-lightbox.is-show { display: flex; }
.fa-lightbox img { max-width: 100%; max-height: 82vh; border-radius: 8px; object-fit: contain; }
.fa-lightbox__cap { color: #E5E7EB; font-size: 13px; margin-top: 12px; text-align: center; }

/* ══════════ 后厨支出系列（🍳 第 9 页签）══════════ */
/* 子类别选择器（点「+ 记一笔后厨支出」后弹出） */
.ke-picker { display: flex; flex-direction: column; gap: 10px; }
.ke-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.ke-pick:hover { border-color: var(--brand); background: #FFFBF7; }
.ke-pick__t { font-size: 14px; font-weight: 600; color: var(--text); }
.ke-pick__s { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* 子类别标签配色：食物=绿 / 固定资产=蓝 / 损耗=红（与设计文档的层级图一致） */
.ke-tag--food { background: #DCFCE7; color: #166534; }
.ke-tag--capex { background: #DBEAFE; color: #1E40AF; }
.ke-tag--loss { background: #FEE2E2; color: #991B1B; }


/* ══════════ 移动端适配（后台在手机/平板上也能用）══════════ */
@media (max-width: 720px) {
  .content { padding: 10px; }
  .body { flex-direction: column; }
  .sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); display: flex; gap: 4px; padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sidebar__item { flex: 0 0 auto; white-space: nowrap; margin-bottom: 0; padding: 7px 12px; font-size: 13px; }
  .col-hide-sm { display: none !important; }
  .form-grid { grid-template-columns: 1fr; }
  .fa-imgs { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .fa-img__box { height: 82px; }
  .fa-detail__k { width: 88px; }
  .fa-img__acts { opacity: 1; }
  .modal__panel { max-width: 96vw; max-height: 92vh; }
  .stock-card { flex: 1 1 100%; min-width: 0; }
  .page__title { font-size: 15px; }
}

/* ── 菜品图片：列表缩略图 + 表单预览/上传 ── */
.dish-thumb {
  width: 56px; height: 42px; object-fit: cover; display: block;
  border-radius: 6px; border: 1px solid var(--line, #E5E7EB);
}
.dish-img-row { display: flex; gap: 12px; align-items: flex-start; }
.dish-img-box {
  width: 120px; height: 90px; flex-shrink: 0;
  border: 1px dashed var(--line, #E5E7EB); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #FAFAFA;
}
.dish-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ── 分类图标选择器（菜品管理 → 分类编辑）──
   选中态用「input:checked + 兄弟选择器」表达，不依赖 :has()，任何浏览器都能用。
   radio 本体绝对定位后透明隐藏，保留可聚焦性（键盘仍可操作）。 */
.field__label .muted { font-weight: 400; margin-left: 6px; }
.caticon-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.caticon {
  position: relative; width: 84px; padding: 8px 4px 6px;
  border: 1px solid var(--line); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; background: #fff;
}
.caticon:hover { border-color: var(--brand); }
.caticon input { position: absolute; opacity: 0; width: 0; height: 0; }
.caticon__box {
  width: 34px; height: 34px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: #F3EAD8;
}
.caticon__box img { width: 24px; height: 24px; display: block; }
.caticon__box--empty { font-size: 10px; color: var(--muted); }
.caticon em {
  font-style: normal; font-size: 11px; color: var(--muted);
  line-height: 1.3; text-align: center;
}
.caticon input:checked ~ .caticon__box { background: #FFF1E8; box-shadow: inset 0 0 0 2px var(--brand); }
.caticon input:checked ~ em { color: var(--brand); font-weight: 600; }
/* 分类列表里的小缩略图 */
.caticon-thumb { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; display: inline-block; }

/* ── 页面外观：背景图预设选择器（菜品管理→分类图标选择器的同一套思路）──
   radio 绝对定位后透明隐藏，选中态用「input:checked ~ 兄弟选择器」表达，不依赖 :has()。 */
.apgrid { display: flex; flex-wrap: wrap; gap: 10px; }
.apcard { position: relative; width: 154px; padding: 6px; border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; background: #fff;
  display: flex; flex-direction: column; gap: 5px; }
.apcard:hover { border-color: var(--brand); }
.apcard input { position: absolute; opacity: 0; width: 0; height: 0; }
.apcard__box { display: block; height: 46px; border-radius: 5px; overflow: hidden; background: #2E1708; }
.apcard__box img { width: 100%; height: 100%; display: block; object-fit: cover; }
.apcard__box--none { display: flex; align-items: center; justify-content: center;
  color: #E9CB92; font-size: 12px; letter-spacing: 2px;
  background: linear-gradient(180deg, #2E1708 0%, #3A1D0C 100%); }
.apcard em { font-style: normal; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.3; }
.apcard input:checked ~ .apcard__box { box-shadow: inset 0 0 0 2px var(--brand); }
.apcard input:checked ~ em { color: var(--brand); font-weight: 600; }
.apcard.is-on { border-color: var(--brand); }

/* ── 页面外观：真机比例缩略预览（状态栏+头部 + 促销 Banner）── */
.apphone { display: inline-block; padding: 8px; background: #EDE6DA; border-radius: 14px; }
.apphone__screen { position: relative; width: 320px; border-radius: 10px; overflow: hidden; background: #FBF8F1; }
.apphone__top { position: relative; padding: 6px 11px 9px; }
.apphone__pad { position: relative; z-index: 1; }
.apphone__nav { font-size: 19px; font-weight: 800; color: #F5EFE2; letter-spacing: 1.5px; }
.apphone__store { margin-top: 3px; font-size: 12px; font-weight: 700; color: #F3E3C0; }
.apphone__arrow { color: #C9B18B; font-weight: 400; }
.apphone__dist { margin-top: 2px; font-size: 9px; color: #C9B18B; }
.apphone__row3 { margin-top: 7px; display: flex; justify-content: space-between; font-size: 9.5px; color: #E9D5AE; }
.apphone__row3 span:last-child { color: #C9B18B; }
.apphone__promo { position: relative; margin: 9px auto 12px; border-radius: 10px; overflow: hidden; display: flex; }
.apphone__pt { position: relative; z-index: 1; padding-left: 13px; display: flex;
  flex-direction: column; justify-content: center; }
.apphone__p1 { font-size: 12px; font-weight: 800; color: #F7E7C3; letter-spacing: .5px; }
.apphone__p2 { margin-top: 2px; font-size: 8px; color: #D9B36A; letter-spacing: 1.5px; }
.apphone__p3 { margin-top: 5px; display: flex; align-items: center; gap: 5px; }
.apphone__p3 b { font-size: 17px; color: #F0C069; font-weight: 800; line-height: 1; }
.apphone__p3 i { font-style: normal; font-size: 8px; color: #C9B18B; }
.apphone__p3 u { text-decoration: none; font-size: 8px; color: #F0DCAC;
  border: 1px solid rgba(240, 220, 172, .5); border-radius: 8px; padding: 1px 6px; }
/* 右侧菜品图位置用暖色渐变示意（不引用真实菜品照片） */
.apphone__pic { position: absolute; right: 0; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, rgba(46,23,8,0) 0%, rgba(90,50,20,.65) 45%, rgba(150,88,32,.95) 100%); }