:root{
  --bg:#15110c; --panel:#211a12; --panel2:#2c2318; --line:#3d3020;
  --gold:#d4af37; --gold2:#f0d77a; --red:#c0392b; --green:#3aa76d;
  --orange:#e07b2c; --orange-t:#f5a95c;
  --txt:#f3ead6; --sub:#b7a888; --blue:#5b9bd5;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:15px;line-height:1.5}
a{color:var(--gold2);text-decoration:none}
.wrap{max-width:760px;margin:0 auto;padding:14px}
.hero{text-align:center;padding:22px 14px 10px}
.hero .logo{font-size:22px;font-weight:700;color:var(--gold2);letter-spacing:1px}
.hero .sub{color:var(--sub);font-size:12px;margin-top:4px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin:10px 0}
.btn{display:inline-block;width:100%;text-align:center;padding:13px;border-radius:10px;border:none;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2a1f08;font-weight:700;font-size:16px;
  cursor:pointer;margin:6px 0}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--gold2);border:1px solid var(--gold)}
.btn.red{background:linear-gradient(180deg,#e05a4a,var(--red));color:#fff}
.btn.sm{width:auto;padding:8px 12px;font-size:13px;margin:3px}
/* 行内紧凑操作按钮（如月赛卡片「奖项设置」每行右侧的「删」）：
   .row>*{flex:1} 会把它拉满半行，手机上又宽又扁。加 .tight 保持自然宽度，
   同时给足 44px 级的点击热区（min-width + 上下内边距），避免误触。 */
.btn.sm.tight{flex:0 0 auto;width:auto;min-width:54px;padding:9px 13px;margin:0;white-space:nowrap}
.seg{display:flex;gap:6px;margin-bottom:10px}
.seg-btn{flex:1;padding:9px 4px;border:1px solid var(--gold);background:transparent;color:var(--gold2);border-radius:9px;font-size:14px;cursor:pointer}
.seg-btn.on{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2a1f08;font-weight:700;border-color:var(--gold)}
input,select,textarea{width:100%;padding:11px;margin:6px 0;border-radius:9px;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);font-size:15px}
label{font-size:13px;color:var(--sub);display:block;margin-top:8px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row>*{flex:1}
.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;background:var(--panel2);color:var(--sub);border:1px solid var(--line)}
.tag.gold{color:var(--gold2);border-color:var(--gold)}
.tag.green{color:var(--green);border-color:var(--green)}
.tag.red{color:#e88;border-color:var(--red)}
/* 「月赛/常规赛」这类标识放在 .row 里时，别被 .row>*{flex:1} 拉满半行 ——
   保持小标签的自然宽度，把剩余空间让给左侧的赛事名称 */
.row>.tag{flex:0 0 auto;width:auto}
.qr-box{background:#fff;border-radius:12px;padding:10px;text-align:center;max-width:260px;margin:10px auto}
.qr-box svg{width:220px;height:220px}
.muted{color:var(--sub);font-size:12px}
.big{font-size:30px;font-weight:700;color:var(--gold2)}
.center{text-align:center}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;background:var(--panel2);border:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.prod{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px}
.prod .nm{font-weight:600}
.prod .pr{color:var(--gold2);font-size:13px;margin-top:4px}
/* 方形图片容器（商品配图 / 管理端奖励缩略图通用）
   用 padding 撑方形（兼容微信较老内核，比 aspect-ratio 稳） */
.pimg{position:relative;padding-bottom:100%;height:0;border-radius:9px;overflow:hidden;
  background:#0d0a07;margin-bottom:8px;border:1px solid var(--line)}
.pimg img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.pimg .ph{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;
  align-items:center;justify-content:center;color:var(--line);font-size:34px}
/* 月赛奖励卡片 */
.reward{background:var(--panel2);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column}
.reward .thumb{position:relative;padding-bottom:100%;height:0;background:#0d0a07}
.reward .thumb img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.reward .badge{position:absolute;left:8px;top:8px;z-index:2;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2a1f08;
  font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;box-shadow:0 2px 8px #0007}
.reward .rbody{padding:10px;flex:1}
.reward .rtitle{font-weight:700;font-size:15px;color:var(--txt)}
.reward .rdesc{color:var(--sub);font-size:12px;margin-top:4px;line-height:1.45}
.reward .rpts{color:var(--gold2);font-size:12px;margin-top:6px}
/* 「我的」会员资料行 */
.mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px dashed var(--line)}
.mrow:last-child{border-bottom:none}
.mrow .vipno{color:var(--gold2);font-family:ui-monospace,Consolas,"Courier New",monospace;
  letter-spacing:1px;font-size:17px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
th{color:var(--sub);font-weight:400}
.hide{display:none!important}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#000d;
  color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;z-index:99;max-width:90%}
/* 扫码弹层（管理端「扫一扫」） */
.modal{position:fixed;left:0;top:0;right:0;bottom:0;background:#000d;z-index:120;
  display:flex;align-items:center;justify-content:center;padding:14px}
.mbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px;width:100%;max-width:430px;max-height:92vh;overflow:auto}
/* 摄像头取景框：用 padding 撑 4:3，兼容微信较老内核 */
.vwrap{position:relative;padding-bottom:75%;height:0;background:#000;
  border-radius:10px;overflow:hidden;margin:10px 0;border:1px solid var(--line)}
.vwrap video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.scan-frame{position:absolute;left:14%;top:14%;width:72%;height:72%;
  border:3px solid var(--gold);border-radius:12px;box-shadow:0 0 0 999px #0005}
.scanbtn{font-size:17px;padding:16px}
/* 3 列网格：页签数量不是 3 的倍数时，最后一行也不会被拉成满宽 */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.tab{text-align:center;padding:9px 4px;border-radius:9px;background:var(--panel2);color:var(--sub);font-size:12.5px;cursor:pointer;line-height:1.25}
.tab.on{background:var(--gold);color:#2a1f08;font-weight:700}
/* ---- 日期选择器（管理端月赛开赛日期，今天高亮） ---- */
.dp-pop{max-width:340px}
.dp-hd{display:flex;align-items:center;gap:8px;margin:2px 0 10px}
.dp-hd b{flex:1;text-align:center;color:var(--gold2);font-size:16px}
.dp-nav{flex:0 0 auto;width:40px;padding:7px 0;font-size:16px;margin:0}
.dp-wk{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.dp-wk span{text-align:center;color:var(--sub);font-size:12px;padding:2px 0}
.dp-gr{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dp-d{position:relative;text-align:center;padding:9px 0;border-radius:9px;font-size:14px;
  background:var(--panel2);border:1px solid transparent;color:var(--txt);cursor:pointer;user-select:none}
.dp-d:active{transform:scale(.94)}
.dp-d.blank{background:transparent;cursor:default}
.dp-d.today{border-color:var(--gold);color:var(--gold2);font-weight:700}
.dp-d.today::after{content:"今";position:absolute;right:2px;top:0;font-size:9px;color:var(--gold);font-weight:400}
.dp-d.sel{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#2a1f08;
  border-color:var(--gold);font-weight:700}
.dp-d.sel::after{color:#2a1f08}
.dp-ft{display:flex;gap:8px;margin-top:12px}
/* ---- 勾选项（月赛新建时勾选月赛奖项） ---- */
.chk{display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel2);margin:6px 0;font-size:14px;color:var(--txt)}
.chk input[type=checkbox]{width:auto;margin:2px 0 0;flex:0 0 auto;transform:scale(1.3)}
.chk .chk-t{flex:1;min-width:0}
.chk .chk-d{display:block;color:var(--sub);font-size:12px;margin-top:3px;line-height:1.4}
/* ---- 积分调整板块（管理端，橘色框） ---- */
.ptsbox{border:2px solid var(--orange);border-radius:14px;padding:12px;margin:12px 0;
  background:rgba(230,126,34,.07)}
.ptsbox-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--orange-t);
  margin-bottom:8px}
.ptsbox-h::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--orange);display:inline-block}
.ptsnow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  background:rgba(0,0,0,.22);border-radius:10px;padding:9px 12px;margin-bottom:10px}
.ptsnow .v{font-size:22px;font-weight:700;color:var(--gold2);
  font-family:ui-monospace,Consolas,"Courier New",monospace;letter-spacing:.5px}
.ptstabs{display:flex;gap:6px;margin:0 0 8px}
.ptstab{flex:1;text-align:center;padding:9px 4px;border-radius:9px;background:var(--panel2);
  border:1px solid var(--line);color:var(--sub);font-size:13px;cursor:pointer;user-select:none}
.ptstab.on{background:var(--orange);border-color:var(--orange);color:#231303;font-weight:700}
.ptsbox input{background:rgba(0,0,0,.25);border-color:var(--orange);font-family:ui-monospace,Consolas,monospace;
  font-size:17px;letter-spacing:1px}
.ptsprev{font-size:13px;color:var(--sub);margin:2px 0 4px;min-height:18px}
.ptsprev b{color:var(--gold2);font-family:ui-monospace,Consolas,monospace;font-size:15px}
.ptsprev.warn b{color:#e88}
.btn.orange{background:linear-gradient(180deg,#f0a24a,var(--orange));color:#231303}
/* ---- 英雄积分榜（会员端） ---- */
.lb-hd{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--line);margin-bottom:8px}
.lb-hd .lb-n{flex:1;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb{display:flex;align-items:center;gap:10px;padding:11px 10px;border-bottom:1px dashed var(--line)}
.lb:last-child{border-bottom:none}
.lb .rk{flex:0 0 34px;text-align:center;font-weight:700;font-size:16px;
  font-family:ui-monospace,Consolas,monospace;color:var(--sub)}
.lb .rk.r1{color:#ffd75e}.lb .rk.r2{color:#d8d8d8}.lb .rk.r3{color:#e0a06a}
.lb .who{flex:1;min-width:0}
.lb .who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .pts{flex:0 0 auto;color:var(--gold2);font-weight:700;
  font-family:ui-monospace,Consolas,"Courier New",monospace}
.lb.me{background:rgba(212,175,55,.12);border-radius:10px;border-bottom:none}
/* ---- 操作日志（只读账本，管理端） ---- */
.tag.orange{color:var(--orange-t);border-color:var(--orange)}
.tag.blue{color:var(--blue);border-color:var(--blue)}
.logrow{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin:8px 0}
.logrow-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.log-who{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-ts{flex:0 0 auto;color:var(--sub);font-size:12px;font-family:ui-monospace,Consolas,monospace}
.log-detail{margin-top:5px;font-size:14px;line-height:1.5}
.log-diff{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.log-d{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:3px 8px;
  font-size:12px;color:var(--sub)}
.log-d s{opacity:.7}
.log-d b{color:var(--gold2);font-family:ui-monospace,Consolas,monospace}
.log-op{margin-top:6px}
/* ---- 月赛 Banner（列表卡片顶部展示） ---- */
.eban{position:relative;border-radius:12px;height:150px;background-size:cover;background-position:center;
  margin-bottom:10px;overflow:hidden;border:1px solid var(--line)}
/* 标题在 Banner「左上角」：由上而下渐隐的深色底，保证金色/亮色字在任何 Banner 上都读得清 */
.eban-t{position:absolute;top:0;left:0;right:0;padding:12px 12px 22px;font-size:18px;font-weight:700;
  color:#fff;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.7);
  background:linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.18) 72%, transparent)}
/* 标题下方的白色副标题（可留空，留空则整块不渲染） */
.eban-s{margin-top:5px;font-size:13px;font-weight:500;line-height:1.35;color:#fff;opacity:.94;
  text-shadow:0 1px 3px rgba(0,0,0,.85);word-break:break-word}
/* 右侧有金色图标时，标题右侧留出位置，避免压在图标上 */
.eban-t.has-ico{padding-right:120px}
/* Banner 右侧金色大图标（奖杯 / 锦标等，透明 PNG + 金色辉光） */
.eban-ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  height:96px;width:auto;pointer-events:none;user-select:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(255,206,90,.35))}
@media(max-width:430px){
  .eban-ico{height:72px;right:10px}
  .eban-t.has-ico{padding-right:94px}
}
/* 表单里的实时效果预览 */
.me-prev{margin:2px 0 10px}
/* 金色图标选择器（月赛表单） */
.tp-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 10px}
.tp-thumb{border-radius:10px;border:2px solid transparent;background:var(--panel2);
  padding:5px 4px 3px;text-align:center;cursor:pointer;transition:border-color .15s}
.tp-thumb img{width:100%;height:52px;object-fit:contain;display:block}
.tp-thumb span{display:block;font-size:11px;color:var(--sub);margin-top:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tp-thumb.on{border-color:var(--gold);background:rgba(212,175,55,.08)}
.tp-thumb.on span{color:var(--gold2)}
.tp-none{display:block;height:52px;line-height:52px;font-size:14px;color:var(--sub)}
/* 名称字号 chips */
.sz-chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.sz-chip{padding:7px 13px;border:1px solid var(--line);border-radius:20px;background:var(--panel2);
  font-size:13px;color:var(--sub);cursor:pointer;white-space:nowrap}
.sz-chip.on{border-color:var(--gold);color:#1a1206;font-weight:700;
  background:linear-gradient(180deg,var(--gold2),var(--gold))}
/* 名称颜色色块 + 取色器 */
.cl-sws{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:6px 0 10px}
.cl-sw{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.cl-sw.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,175,55,.45)}
.cl-sep{width:1px;height:26px;background:var(--line);margin:0 2px}
.cl-custom{width:44px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel2);cursor:pointer}
.cl-val{font-size:12px;color:var(--sub);font-family:ui-monospace,Consolas,monospace}
/* 月赛表单标题行（左标题 + 右「模版快速新建」按钮） */
.me-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 8px}
.me-title h3{margin:0;white-space:nowrap}
.me-title .btn{flex:0 0 auto;margin:0}
/* 赛制说明：一句一行，保留换行与项目符号 */
/* ---------- 赛事 / 月赛卡片的内容分区（卡片组）----------
   管理端「月赛」与会员端「赛事活动」共用同一套：
   每个内容分区各自一张同款子卡片（.ev-card），标题 .ev-h、正文 .ev-body，
   赛制说明与月赛奖励的正文刻意写在同一条规则里，保证字号字色永远一致。 */
.ev-cards{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ev-card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.ev-h{font-size:12px;font-weight:700;color:var(--sub);letter-spacing:.5px;margin:0 0 5px}
.ev-h::before{content:"";display:inline-block;width:3px;height:11px;border-radius:2px;
  background:var(--gold);margin-right:6px;vertical-align:-1px}
.rules-text,.ev-body{font-size:13px;line-height:1.8;color:var(--txt);white-space:pre-line;
  word-break:break-word;margin:0}
/* Banner 模板选择器（月赛表单） */
.bn-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 10px}
.bn-thumb{border-radius:9px;border:2px solid transparent;overflow:hidden;cursor:pointer;
  background:var(--panel2);transition:border-color .15s}
.bn-thumb img{width:100%;height:68px;object-fit:cover;display:block}
.bn-thumb span{display:block;text-align:center;font-size:11px;padding:5px 3px;color:var(--sub)}
.bn-thumb.on{border-color:var(--gold);background:rgba(212,175,55,.08)}

/* ================= pyi28：点单核销 ================= */
/* ---- 会员端商品页：份数选择（步进控件，不放在 .row 里，避免被 flex:1 拉宽） ---- */
.qty{display:flex;align-items:center;gap:6px;margin-top:8px}
.qty .qbtn{flex:0 0 auto;width:30px;height:30px;padding:0;border-radius:9px;cursor:pointer;
  border:1px solid var(--gold);background:transparent;color:var(--gold2);font-size:17px;line-height:1}
.qty .qbtn:active{transform:scale(.94)}
.qty .qv{flex:1;text-align:center;font-weight:700;font-size:15px;color:var(--gold2);
  font-family:ui-monospace,Consolas,"Courier New",monospace}
.prod.sel{border-color:var(--gold);background:rgba(212,175,55,.10)}
.prod .pnum{position:absolute;right:8px;top:8px;z-index:2;min-width:22px;height:22px;line-height:22px;
  text-align:center;border-radius:11px;background:var(--gold);color:#2a1f08;font-size:12px;font-weight:700}

/* ---- 会员端底部结算条（固定贴底，只有选了商品才出现） ---- */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;gap:8px;
  padding:10px 12px;background:rgba(18,14,9,.97);border-top:1px solid var(--gold);
  box-shadow:0 -6px 18px rgba(0,0,0,.55)}
.cartbar .cb-i{flex:1;min-width:0;font-size:12.5px;color:var(--sub);line-height:1.35}
.cartbar .cb-i b{color:var(--gold2);font-size:15px;font-family:ui-monospace,Consolas,monospace}
.cartbar .btn{width:auto;flex:0 0 auto;margin:0;padding:11px 14px;font-size:14px;white-space:nowrap}
.cartpad{height:72px}

/* ---- 点单卡片（管理端核销 / 会员端「我的点单」共用） ---- */
.ord-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ord-hd .who{flex:1;min-width:0;font-weight:700;font-size:16px}
.ord-b{background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:8px 11px;margin:8px 0;font-size:13px;line-height:1.8;color:var(--txt)}
.ord-row{display:flex;justify-content:space-between;gap:8px;padding:2px 0;
  border-bottom:1px dashed var(--line)}
.ord-row:last-child{border-bottom:none}
.ord-row .n{flex:1;min-width:0}
.ord-row .v{flex:0 0 auto;color:var(--gold2);font-family:ui-monospace,Consolas,monospace}
.ord-sum{color:var(--gold2);font-weight:700}
.ord-sum b{font-size:17px;font-family:ui-monospace,Consolas,monospace}
.ord-codes{font-size:12px;color:var(--sub);font-family:ui-monospace,Consolas,monospace;
  word-break:break-all;margin-top:2px}

/* ---- 页签角标（待核销单数） ---- */
.tabdot{display:inline-block;min-width:16px;height:16px;line-height:16px;padding:0 4px;margin-left:4px;
  border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;
  font-family:ui-monospace,Consolas,monospace;vertical-align:top}

/* ---- 顶部核销提示条（新点单实时弹出，点一下直接跳到点单核销页） ---- */
.notify{position:fixed;left:8px;right:8px;top:8px;z-index:150;cursor:pointer;border-radius:12px;
  padding:11px 13px;font-size:14px;font-weight:700;color:#231303;
  background:linear-gradient(180deg,#f5b969,var(--orange));
  box-shadow:0 8px 22px rgba(0,0,0,.55);animation:notifyIn .25s ease}
.notify .nt-s{display:block;font-weight:400;font-size:12px;margin-top:3px;opacity:.88}
@keyframes notifyIn{from{transform:translateY(-18px);opacity:0}to{transform:none;opacity:1}}

/* 顶部工具行里的提示音开关 */
.btn.tiny{width:auto;flex:0 0 auto;margin:0;padding:7px 11px;font-size:12px;line-height:1.2}

/* 客户管理：正在编辑的那张卡片描边，避免改错人 */
.card.edit-on{box-shadow:0 0 0 1px var(--gold) inset,0 0 14px rgba(212,175,55,.18)}

@media(min-width:768px){
  .wrap{max-width:900px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}

/* ================= pyi30：管理端独立配色（冷色深蓝）=================
   会员端 = 暖色深棕 + 金；管理端 = 冷色深蓝 + 金。
   只覆盖变量，不碰任何组件规则 —— 组件全部走 var()，一处生效、全站跟随，
   会员端(:root)完全不受影响。品牌金与状态色（红/绿/橘）两端保持一致。

   ⚠️ 变量必须挂在 html 上（`html.adm`），不能只挂 body：
   项目里 `html,body{background:var(--bg)}` 同时给 html 和 body 设了底色，
   此时「画布背景」由 html 决定（body 的背景不再向画布传播）。
   只在 body 上覆盖变量 → 页面内容很短时（如登录页），**屏幕下方露出的是
   会员端的暖棕底色**（实测 y>860 处 rgb(21,17,12)，一眼就穿帮）。
   所以 admin.html 的 <html> 与 <body> 都带 adm：变量挂 html，body.adm 只用于
   下面那几条具体规则（顶部细线 / 副标题 / 图片占位底色）。 */
html.adm{
  --bg:#0d1720;        /* 页面底色：冷色深蓝黑 */
  --panel:#15222e;     /* 卡片 */
  --panel2:#1c2e3d;    /* 卡片内层 / 输入框 / 未选中页签 */
  --line:#2b4459;      /* 描边与分隔线 */
  --txt:#e9f1f8;       /* 正文：在冷底上仍是高对比浅色 */
  --sub:#9cb2c4;       /* 次要文字 */
}
/* 顶部固定一条冷色细线：后台开着切回手机时，一眼就能认出是管理端 */
body.adm::before{content:"";position:fixed;left:0;right:0;top:0;height:3px;z-index:200;
  background:linear-gradient(90deg,var(--blue),#7cc7ff)}
/* 标题下的「管理端」副标题用冷色，强化端别标识 */
body.adm .hero .sub{color:var(--blue);font-weight:600}
/* 图片占位底色跟随冷色，别在管理端露出会员端的暖棕 */
body.adm .pimg,body.adm .reward .thumb{background:#070f16}
/* 主按钮上的深色文字在冷色环境里略提亮，避免发灰 */
body.adm .btn:not(.ghost):not(.red):not(.orange){color:#231a06}


/* ================= 会员端头图 opening（pyi32）=================
   每个页签一张横版低矮底图，切换页签时交叉淡入（.hb 的 opacity 过渡）。
   一律走 .hero-open 专属类 —— 管理端也有 .hero，不加作用域会一起被改掉。
   aspect-ratio 让容器比例贴合图片(1536:500)：手机端几乎不裁，宽屏只轻微裁上下。
   老浏览器不支持 aspect-ratio 时靠 min-height 兜底，图仍能 cover 显示。 */
.hero-open{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);
  margin:6px 0 10px;padding:0;text-align:center;
  aspect-ratio:1536/500;max-height:200px;min-height:104px;
  display:flex;align-items:center;justify-content:center;background:var(--panel2)}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg .hb{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.05);
  transition:opacity .55s ease,transform 1.1s ease}
.hero-bg .hb.on{opacity:1;transform:scale(1)}
/* 暗色遮罩：压住底图亮度并加深上下缘，保证标题在任何一张图上都清晰可读 */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,7,4,.78) 0%,rgba(10,7,4,.44) 46%,rgba(10,7,4,.8) 100%)}
.hero-in{position:relative;z-index:1;padding:0 14px}
.hero-open .logo{text-shadow:0 2px 12px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.95)}
.hero-open .sub{margin-top:5px;text-shadow:0 1px 8px rgba(0,0,0,.95)}


/* ================= 会员端「邀请好友」页（pyi33）=================
   一个独立的公开页 /invite.html：会员端点「邀请好友」进来，
   也可以把链接直接分享给店外好友打开。
   页面上**只有酒馆介绍与地址导航，没有任何注册/登录入口** —— 这是需求里明确要求的。
   样式一律 .inv-* 前缀（body 挂 .inv），不会波及会员端与管理端。 */
.inv-back{position:absolute;left:8px;top:8px;z-index:3;width:auto;margin:0;
  padding:6px 12px;font-size:13px;border-radius:20px}
.inv-h{font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.5px;margin:0 0 8px}
.inv-h::before{content:"";display:inline-block;width:3px;height:12px;border-radius:2px;
  background:var(--gold);margin-right:6px;vertical-align:-1px}
/* 邀请语：金色、居中，一眼看到的那句话 */
.inv-welcome{background:linear-gradient(180deg,rgba(212,175,55,.16),rgba(212,175,55,.04));
  border-color:var(--gold);text-align:center;font-size:15px;font-weight:600;line-height:1.7;
  color:var(--gold2);padding:14px}
.inv-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.inv-intro{font-size:14px;line-height:1.9;color:var(--txt);white-space:pre-line;
  word-break:break-word;margin:0}
.inv-addr{font-size:15px;line-height:1.6;color:var(--txt);margin:2px 0 10px;word-break:break-word}
/* 三个地图按钮：等宽一行排开（.row>*{flex:1} 会把它们拉满，这里改回自然等分） */
.inv-nav{flex-wrap:wrap}
.inv-nav .btn{flex:1 1 30%;min-width:92px;width:auto;margin:3px 0;padding:11px 6px;
  font-size:13px;white-space:nowrap;text-decoration:none;display:inline-block}
.inv-tel{flex:0 0 auto;color:var(--gold2);font-family:ui-monospace,Consolas,"Courier New",monospace}
.inv-share-tip{font-size:12px;color:var(--sub);line-height:1.65;margin:8px 0 0}
/* 名片弹层：canvas 只离屏绘制，展示的是 <img>（微信里长按 img 才弹「发送给朋友」） */
.inv-cardbox{background:#0b0805;border:1px solid var(--line);border-radius:12px;
  padding:8px;margin:6px 0}
.inv-cardbox img{width:100%;height:auto;display:block;border-radius:8px}
/* 分享链接还是局域网地址时的橙色提醒 */
.inv-off{background:rgba(224,123,44,.10);border:1px solid var(--orange);border-radius:10px;
  padding:9px 11px;margin:9px 0 0;font-size:12.5px;line-height:1.6;color:var(--orange-t);
  word-break:break-all}
.inv-off b{display:block;margin-bottom:3px}
.inv-off span{color:var(--sub)}


/* ================= 「邀请好友」页签（pyi34）=================
   会员端的入口从「我的」页搬到了页签栏，挂在「酒水点单」右边。
   它其实是个 <a href="/invite.html">：外观沿用 .tab，但去掉下划线，
   并且不能被 switchTab 当成页签接管（见 user.js 的 .tab[data-t] 选择器）。 */
a.tab,a.tab:visited{text-decoration:none;color:var(--sub)}
a.tab:hover{color:var(--txt)}

/* ================= 管理端：三端入口二维码（pyi34）=================
   程序一跑起来就显示在管理端最下方。窄屏竖排、宽屏自动摆成三列；
   二维码用白底是为了在冷色管理端上扫得动（管理端是 html.adm 的深蓝主题）。 */
.entry-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
@media(min-width:560px){.entry-grid{grid-template-columns:repeat(3,1fr)}}
.entry-tile{background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:11px 10px;text-align:center}
.entry-role{font-weight:700;color:var(--gold2);font-size:13.5px;letter-spacing:.3px}
.entry-qr{width:150px;height:150px;background:#fff;padding:6px;border-radius:10px;
  display:block;margin:8px auto}
.entry-hint{font-size:12px;line-height:1.5;margin:0 0 6px;min-height:36px}
.entry-url{font-size:11px;color:var(--sub);word-break:break-all;margin-bottom:8px;
  font-family:ui-monospace,Consolas,"Courier New",monospace}

/* ================= 管理端：营收统计（pyi34）=================
   故意不引图表库：8 周 + 6 个月的横向条用 CSS 宽度百分比就够，
   离线可用、零依赖，手机上也一样稳。 */
.st-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:8px 0}
@media(min-width:640px){.st-kpis{grid-template-columns:repeat(4,1fr)}}
.st-kpi{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.st-kpi .k{font-size:12px;color:var(--sub);line-height:1.45}
.st-kpi .v{font-size:27px;font-weight:700;color:var(--gold2);line-height:1.3}
.st-kpi .v .u{font-size:12px;font-weight:400;color:var(--sub);margin-left:3px}
.st-kpi .d{font-size:12.5px;margin-bottom:3px}
/* 涨红跌绿 —— 国内习惯，别按欧美那套反过来 */
.st-up{color:#ef6b6b;font-weight:700}
.st-down{color:#4fc98a;font-weight:700}
.st-flat{color:var(--sub)}
.st-row{display:grid;grid-template-columns:84px 1fr 66px 46px;gap:8px;align-items:center;
  padding:6px 0;border-bottom:1px dashed var(--line)}
.st-row:last-child{border-bottom:0}
.st-lbl{font-size:12.5px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-bar{height:9px;border-radius:5px;background:linear-gradient(90deg,#f0d77a,#a37c14)}
.st-bar.zero{background:var(--line)}
.st-num{text-align:right;font-size:12.5px;color:var(--gold2);font-weight:700;white-space:nowrap}
.st-sub{text-align:right;font-size:11.5px;color:var(--sub);white-space:nowrap}
.st-days{display:flex;align-items:flex-end;gap:3px;height:56px;margin-top:10px}
.st-day{flex:1;background:linear-gradient(180deg,#f0d77a,#8f6a17);border-radius:3px 3px 0 0}
.st-day.zero{background:var(--line)}
.st-days-x{display:flex;gap:3px;margin-top:4px;font-size:9.5px;color:var(--sub)}
.st-days-x span{flex:1;text-align:center}