/* ============ Kappa 优惠券 · 前端样式（店员使用） ============
 * 本文件只影响「前端」，改动不会影响另一端。
 * 前端样式在 app.css，后台样式在 admin.css，两者完全独立。
 *
 * 【常用字体大小位置速查】
 *   列表小图遮罩文字  .card .thumb.masked .mask-hint
 *   卡片手机号        .card .phone
 *   卡片日期          .card .dates
 *   卡片按钮          .card .acts .btn
 *   顶部模块切换      .seg a
 *   搜索输入框        .input, select.input
 *   分段小按钮        .seg.mini a
 *   统计数字          .stat .v / .stat .k
 *   分页              .pager .pg
 *   大图说明文字      .lightbox .lb-info
 */
/* ============ Kappa 优惠券 · 苹果风格 UI ============ */
:root {
--bg:#f2f2f7;
  --bg-elev:rgba(255,255,255,.72);
  --card:#ffffff;
  --text:#1c1c1e;
  --sub:#8e8e93;
  --sep:rgba(60,60,67,.12);
  --blue:#007aff;
  --green:#34c759;
  --red:#ff3b30;
  --orange:#ff9500;
  --purple:#af52de;
  --fill:rgba(120,120,128,.12);
  --fill-2:rgba(120,120,128,.20);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.06);
  --r:12px;
  --nav-h:48px;
}

@media (prefers-color-scheme: dark) {
:root {
--bg:#000000;
    --bg-elev:rgba(28,28,30,.72);
    --card:#1c1c1e;
    --text:#f2f2f7;
    --sub:#98989f;
    --sep:rgba(255,255,255,.10);
    --fill:rgba(120,120,128,.24);
    --fill-2:rgba(120,120,128,.32);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
}

}

* {
box-sizing:border-box;-webkit-tap-highlight-color:transparent
}

html,body {
margin:0;padding:0
}

body {
background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","SF Pro Text","PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}

a {
color:var(--blue);text-decoration:none
}

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

input,select,button,textarea {
font-family:inherit;font-size:14px;color:var(--text)
}

::-webkit-scrollbar {
width:8px;height:8px
}

::-webkit-scrollbar-thumb {
background:var(--fill-2);border-radius:8px
}

/* ---------- 导航 ---------- */
/* 顶部条：浅粉 → 浅紫 → 浅蓝的柔和渐变（想换配色就改下面这一段） */
.nav {
position:sticky;top:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;gap:8px;
  padding:0 12px;
  background:var(--bg-elev);
  background-image:linear-gradient(100deg,
      rgba(238,214,255,.92) 0%,
      rgba(255,214,232,.92) 48%,
      rgba(212,228,255,.92) 100%);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid rgba(120,120,128,.14);
  padding-top:env(safe-area-inset-top);
}
/* 深色模式：换成深紫 → 深蓝的暗色渐变，避免刺眼 */
@media (prefers-color-scheme: dark){
  .nav{
    background-image:linear-gradient(100deg,
      rgba(60,48,100,.92) 0%,
      rgba(88,52,92,.92) 48%,
      rgba(38,52,92,.92) 100%);
    border-bottom-color:rgba(255,255,255,.14);
  }
}

.nav .brand {
font-size:15px;font-weight:600;letter-spacing:.2px;display:flex;align-items:center;gap:6px
}

.nav .brand .dot {
width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(255,59,48,.15)
}

.nav .spacer {
flex:1
}

.nav .uinfo {
font-size:13.8px;color:var(--sub);display:flex;align-items:center;gap:3px
}

.nav .btn-mini {
border:none;background:var(--fill);color:var(--text);
  padding:3px 5px;border-radius:999px;font-size:12px;cursor:pointer;
}

.nav .btn-mini:active {
transform:scale(.96)
}

/* ---------- 容器 ---------- */
.wrap {
max-width:1180px;margin:0 auto;padding:10px 10px 40px
}

.toolbar {
position:sticky;top:var(--nav-h);z-index:40;
  background:var(--bg);
  padding:8px 0 10px;
}

.row {
display:flex;gap:8px;align-items:center;flex-wrap:wrap
}

/* ---------- 分段控件 ---------- */
.seg {
display:flex;background:var(--fill);border-radius:10px;padding:3px;gap:4px;
  width:100%;
  box-shadow:inset 0 0 0 .5px var(--sep);
}

/* 未选中项：整圈描边，明确是一个个独立按钮 */
.seg a {
position:relative;
  flex:1;text-align:center;padding:7px 8px;border-radius:8px;
  font-size:15px;font-weight:500;color:var(--sub);text-decoration:none;
  background:transparent;
  box-shadow:inset 0 0 0 .5px var(--sep), inset 0 0 0 1px rgba(120,120,128,.10);
  transition:background .18s,color .18s,box-shadow .18s;
}

.seg a:not(.on):hover {
color:var(--text)
}

.seg a.on {
background:var(--card);color:var(--blue);font-weight:600;
  box-shadow:0 1px 4px rgba(0,0,0,.14), inset 0 0 0 .5px rgba(0,122,255,.35);
}

.seg.mini {
border-radius:9px;padding:2px;gap:2px
}

.seg.mini a {
padding:5px 8px;font-size:12.5px;border-radius:7px
}

.seg a .n {
font-size:11px;color:var(--sub);margin-left:3px;opacity:.85
}

.seg a.on .n {
color:var(--blue);opacity:.75
}

/* 小号分段控件（如「已使用」里的类型筛选）：选中为蓝色实心，一眼可辨 */
.seg.mini {
background:var(--fill);border-radius:8px;padding:2px;gap:3px;box-shadow:none
}

.seg.mini a {
padding:5px 6px;font-size:12px;border-radius:6px;
  box-shadow:inset 0 0 0 .5px var(--sep);
}

.seg.mini a.on {
background:var(--blue);color:#fff;font-weight:600;
  box-shadow:0 1px 3px rgba(0,122,255,.35), inset 0 0 0 .5px rgba(0,122,255,.9);
}

.seg.mini a.on .n {
color:#fff;opacity:.85
}

/* 小型分段控件（已使用页的类型筛选）：选中为蓝色实心，对比更强 */
.seg.mini {
background:var(--fill);padding:3px;gap:4px;border-radius:9px;
  box-shadow:none;
}

.seg.mini a {
flex:0 1 90px;padding:5px 10px;font-size:12.5px;
  box-shadow:none;
}

.seg.mini a.on {
background:var(--blue);color:#fff;font-weight:600;
  box-shadow:0 1px 3px rgba(0,122,255,.35);
}

.seg.mini a.on .n {
color:#fff
}

/* ---------- 表单控件 ---------- */
.field {
display:flex;align-items:center;background:var(--fill);
  border-radius:10px;padding:0 10px;height:34px;flex:1;min-width:120px;
}

.field svg {
opacity:.5;flex:none
}

.input,select.input {
border:none;background:transparent;outline:none;height:34px;
  width:100%;padding:0 6px;font-size:14px;color:var(--text);
  -webkit-appearance:none;appearance:none;
}

select.input {
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%238e8e93'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;
  padding-right:22px;
}

.btn {
border:none;border-radius:10px;background:var(--blue);color:#fff;
  padding:0 14px;height:34px;font-size:13px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  transition:opacity .15s,transform .1s;
}

.btn:active {
opacity:.75;transform:scale(.98)
}

.btn.gray {
background:var(--fill-2);color:var(--text)
}

.btn.red {
background:var(--red)
}

.btn.green {
background:var(--green)
}

.btn.sm {
height:30px;padding:0 10px;font-size:12px;border-radius:8px
}

.btn.block {
width:100%
}

.btn:disabled {
opacity:.45;cursor:not-allowed
}

/* 灰色按钮的选中态（用于「全部 / 六折券 / 优惠券」这类小切换） */
.btn.gray.on {
background:var(--blue);color:#fff;font-weight:600;
  box-shadow:0 1px 4px rgba(0,122,255,.30);
}

.btn.gray.on:active {
opacity:.8
}

/* ---------- 卡片网格 ---------- */
.grid {
display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}

@media (min-width:768px) {
.grid {
grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:12px
}

}

.card {
background:var(--card);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);position:relative;
  display:flex;flex-direction:column;
  transition:transform .18s ease,opacity .22s ease;
}

.card.used {
opacity:.72
}

/* 点击「标记已使用 / 撤销」后卡片的即时变化，不用等页面刷新就有反馈 */
.card.working {
opacity:.55;transform:scale(.97);pointer-events:none
}

.card.removing {
opacity:0;transform:scale(.90)
}

.card.used .thumb::after {
content:"已使用";position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.42);color:#fff;font-size:15px;font-weight:600;letter-spacing:2px;
}

.card .thumb {
position:relative;width:100%;height:0;padding-bottom:100%;background:var(--fill);
  cursor:zoom-in;overflow:hidden;padding-bottom: 78%;
}

.card .thumb img {
position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover
}

/* ===== 列表小图模糊蒙版（防截图外传，点开看原图才清晰） =====
   开关与模糊强度在后台「系统设置」里控制；模糊值由页面内联的 --blur 变量传入 */
.card .thumb.masked img {
filter:blur(var(--blur,8px));
  transform:scale(1.08);           /* 放大一点，避免模糊后边缘露白 */
  transition:filter .25s ease, transform .25s ease;
}

.card .thumb.masked .mask-hint {
position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:4px;
  background:rgba(0,0,0,.30);color:#fff;
  font-size:20.5px;letter-spacing:.2px;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  pointer-events:none;             /* 不挡点击，点哪都能打开原图 */
}

/* 手指按下时先揭开一点，给出"可查看"的反馈 */
.card .thumb.masked:active img {
filter:blur(calc(var(--blur,8px) * .4))
}

/* 已使用的卡片盖一层灰，蒙版提示文字淡一点，避免和"已使用"字样打架 */
.card.used .thumb.masked .mask-hint {
opacity:.55
}

.card .noimg {
width:100%;height:0;padding-bottom:78%;position:relative;background:var(--fill);
}

.card .noimg span {
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:12px
}

.card .body {
padding:8px 9px 9px;display:flex;flex-direction:column;gap:6px
}

.card .phone {
font-size:15px;font-weight:600;letter-spacing:.3px;
  display:flex;align-items:center;justify-content:space-between;gap:4px;
}

.card .phone .copy {
font-size:15px;color:var(--blue);font-weight:400;cursor:pointer
}

.card .dates {
display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:var(--sub)
}

.card .dates b {
font-weight:500;color:var(--text)
}

.card .acts {
display:flex;gap:6px;margin-top:2px
}

.card .acts .btn {
flex:1;height:30px;font-size:15px;border-radius:8px;padding:0 6px
}

/* ---------- 徽章 ---------- */
.badge {
display:inline-block;padding:1px 0px;border-radius:6px;font-size:14.6px;line-height:1.3;
  background:var(--fill);color:#ff00d2;white-space:nowrap;
}

.badge-ok {
background:rgba(52,199,89,.14);color:#248a3d
}

.badge-warn {
background:rgba(255,149,0,.16);color:#b26a00
}

.badge-danger {
background:rgba(255,59,48,.14);color:var(--red)
}

.badge-dead {
background:rgba(255,59,48,.20);color:var(--red)
}

.badge-type {
background:rgba(0,122,255,.12);color:var(--blue)
}

.badge-purple {
background:rgba(175,82,222,.14);color:var(--purple)
}

/* ---------- 空状态 ---------- */
.empty {
text-align:center;padding:60px 20px;color:var(--sub);
}

.empty .ico {
font-size:40px;opacity:.35;margin-bottom:8px
}

/* ---------- 统计条 ---------- */
.stats {
display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px;
}

.stat {
background:var(--card);border-radius:10px;padding:8px 6px;text-align:center;box-shadow:var(--shadow);
}

.stat .v {
font-size:17px;font-weight:600;line-height:1.2
}

.stat .k {
font-size:10.5px;color:var(--sub);margin-top:2px
}

/* ---------- 分页 ---------- */
.pager {
display:flex;gap:5px;justify-content:center;align-items:center;padding:14px 0;flex-wrap:wrap
}

.pager .pg {
min-width:30px;height:30px;padding:0 8px;border-radius:8px;background:var(--card);
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--text);box-shadow:var(--shadow)
}

.pager .pg.active {
background:var(--blue);color:#fff
}

.pager .pg.disabled {
opacity:.4;pointer-events:none
}

.pager .pg-info {
font-size:12px;color:var(--sub);margin-left:4px
}

/* ---------- 图片查看器 ---------- */
.lightbox {
position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}

.lightbox.show {
display:flex
}

.lightbox img {
max-width:96vw;max-height:84vh;object-fit:contain;border-radius:8px
}

.lightbox .close {
position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;
}

.lightbox .lb-info {
position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:0;right:0;
  text-align:center;color:rgba(255,255,255,.85);font-size:12.5px;padding:0 20px;
}

.lightbox .nav-arrow {
position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;
}

.lightbox .prev {
left:8px
}

.lightbox .next {
right:8px
}

/* 前台查看大图：隐藏左右切换箭头（no-nav 由页面加在 .lightbox 上） */
.lightbox.no-nav .nav-arrow {
display:none
}

/* ---------- Toast（屏幕正中弹窗） ---------- */
.toast {
position:fixed;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.92);
  background:rgba(0,0,0,.82);color:#fff;padding:12px 20px;border-radius:14px;
  font-size:14px;line-height:1.5;
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;
  /* 宽度跟着文字走：短句一行放得下就不折行，太长才在 90vw 处换行 */
  z-index:300;width:max-content;max-width:90vw;text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}

.toast.show {
opacity:1;transform:translate(-50%,-50%) scale(1)
}

/* 提示类型：成功绿色 / 错误红色 / 默认深灰 */
.toast.ok {
background:rgba(36,138,61,.94)
}

.toast.err {
background:rgba(255,59,48,.94)
}

/* ---------- 居中确认框 / 输入框（替代原生 confirm / prompt） ---------- */
.modal-mask {
position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.38);
  display:none;align-items:center;justify-content:center;
  padding:20px;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}

.modal-mask.show {
display:flex
}

.modal {
width:280px;max-width:100%;
  background:var(--card);border-radius:14px;overflow:hidden;
  text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.32);
  animation:modalIn .22s ease;
}

@keyframes modalIn {
from{opacity:0;transform:scale(.9) translateY(8px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

.modal .m-title {
padding:18px 18px 0;font-size:15px;font-weight:600;line-height:1.4;
}

.modal .m-text {
padding:16px 18px;font-size:13.5px;color:var(--text);line-height:1.55;
}

.modal .m-text:empty {
display:none
}

.modal .m-field {
display:none;padding:0 18px 14px
}

.modal .m-input {
width:100%;height:36px;border:.5px solid var(--sep);border-radius:9px;
  background:var(--bg);padding:0 10px;outline:none;font-size:14px;color:var(--text);
  -webkit-appearance:none;appearance:none;
}

.modal .m-input:focus {
border-color:var(--blue)
}

.modal .m-btns {
display:flex;border-top:.5px solid var(--sep)
}

.modal .m-btn {
flex:1;height:46px;border:none;background:none;
  font-size:16px;color:var(--blue);cursor:pointer;
}

.modal .m-btn:active {
background:rgba(120,120,128,.10)
}

.modal .m-btn.cancel {
color:var(--sub);font-weight:400
}

.modal .m-btn.ok {
font-weight:600
}

.modal .m-btn.danger {
color:var(--red)
}

.modal .m-btns .m-btn + .m-btn {
border-left:.5px solid var(--sep)
}

/* ---------- 登录/注册 ---------- */
.auth-page {
min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(1200px 500px at 50% -10%, rgba(0,122,255,.10), transparent), var(--bg);
}

/* ===== iOS Safari 专项修复 =====
   1) 键盘弹出时 100vh 不重算 + 垂直居中输入框会被顶出屏幕/被键盘盖住，
      表现为"点了密码框却输入不进去"——改为顶部对齐，保证聚焦项始终可见。
   2) 输入框字号 <16px 时 iOS 会自动放大整个页面，放大后点击坐标偏移，
      点在密码框上实际聚焦到别的元素——iOS 上统一提到 16px 关闭自动缩放。
   3) 去掉 iOS 给 input 加的默认外观与不可选，保证能正常聚焦输入。  */
@supports (-webkit-touch-callout: none) {
.auth-page{
    align-items:flex-start;
    padding-top:8vh;
    padding-bottom:40vh; /* 留出键盘高度，保证下方输入框可滚动到视野内 */
    min-height:-webkit-fill-available;
  }
  .auth-box .fld{font-size:16px;line-height:normal}
  .field .input,.fm input,.fm select,.fm textarea{font-size:16px}
}

input,select,textarea {
-webkit-user-select:text;user-select:text;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}

.auth-box .fld,.field .input {
-webkit-appearance:none;appearance:none;
}

.auth-box {
width:100%;max-width:340px;background:var(--card);border-radius:16px;padding:22px 20px;box-shadow:var(--shadow);
}

.auth-box h1 {
margin:0 0 2px;font-size:20px;letter-spacing:.3px
}

.auth-box .sub {
color:var(--sub);font-size:12.5px;margin-bottom:18px
}

.auth-box .lb {
font-size:12px;color:var(--sub);margin:12px 0 5px;display:block
}

.auth-box .fld {
width:100%;height:40px;border:none;border-radius:10px;background:var(--fill);
  padding:0 12px;outline:none;font-size:14px;
}

.auth-box .btn {
width:100%;height:42px;margin-top:18px;font-size:15px;border-radius:11px
}

.auth-box .foot {
margin-top:14px;font-size:12.5px;color:var(--sub);text-align:center
}

.alert {
background:rgba(255,59,48,.12);color:var(--red);border-radius:10px;
  padding:9px 12px;font-size:12.5px;margin-bottom:12px;
}

.alert.ok {
background:rgba(52,199,89,.13);color:#248a3d
}

.hint {
font-size:11.5px;color:var(--sub);line-height:1.6
}

.footer-note {
text-align:center;color:var(--sub);font-size:11.5px;padding:18px 0 6px
}

/* ===== 券类型区分配色：六折券=橙红（促销感），优惠券=紫（权益感） =====
   前后台通用，一眼能分清是哪种券，不再都是同一种蓝色 */
.badge-t-discount60{
  background:rgba(255,59,48,.15);color:#d70015;
  box-shadow:inset 0 0 0 .5px rgba(255,59,48,.35);
}
.badge-t-coupon{
  background:rgba(175,82,222,.15);color:#8250df;
  box-shadow:inset 0 0 0 .5px rgba(175,82,222,.35);
}
@media (prefers-color-scheme: dark){
  .badge-t-discount60{background:rgba(255,59,48,.26);color:#ff6961;box-shadow:inset 0 0 0 .5px rgba(255,89,79,.45)}
  .badge-t-coupon{background:rgba(175,82,222,.28);color:#d0a1f0;box-shadow:inset 0 0 0 .5px rgba(208,161,240,.45)}
}

/* ===== 异常状态：橙色区分，卡片角标显示「异常」 ===== */
.btn.btn-abn{background:var(--orange)}
.card.abnormal .thumb::after{
  content:"异常";letter-spacing:4px;
  background:rgba(255,149,0,.62);
}
.card.abnormal{border:1px solid rgba(255,149,0,.55)}
@media (prefers-color-scheme: dark){
  .card.abnormal{border-color:rgba(255,149,0,.65)}
}

/* 券状态：异常（橙色，与「已使用」的黄色区分开） */
.badge-abn{background:rgba(255,149,0,.22);color:#b26a00}
@media (prefers-color-scheme: dark){ .badge-abn{background:rgba(255,149,0,.30);color:#ffb340} }

/* ===== 列表小图蒙版：按券种配色，六折券=橙红、优惠券=紫 =====
   与卡片上的类型徽章同色系，扫一眼就知道是哪类券 */
.card .thumb.mask-discount60 .mask-hint{
  background:linear-gradient(180deg, rgba(255,59,48,.42), rgba(255,59,48,.30));
}
.card .thumb.mask-coupon .mask-hint{
  background:linear-gradient(180deg, rgba(175,82,222,.46), rgba(175,82,222,.32));
}

/* 蒙版文字：上行「点击查看原图」，下行券种标签 */
.card .thumb.masked .mask-hint{
  flex-direction:column;gap:6px;
}
.mask-hint .mh-top{font-size:20.5px;letter-spacing:.2px}
.mask-hint .mh-type{
  display:inline-block;padding:3px 14px;border-radius:999px;
  background:rgba(255,255,255,.92);font-size:14px;font-weight:700;letter-spacing:.5px;
  color:#d70015;box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.card .thumb.mask-coupon .mask-hint .mh-type{color:#8250df}
@media (prefers-color-scheme: dark){
  .card .thumb.mask-discount60 .mask-hint{
    background:linear-gradient(180deg, rgba(255,69,58,.52), rgba(255,69,58,.38));
  }
  .card .thumb.mask-coupon .mask-hint{
    background:linear-gradient(180deg, rgba(191,90,242,.55), rgba(191,90,242,.38));
  }
}

/* 打开原图后的券种提醒弹窗（2.1 秒自动消失）：六折券橙红 / 优惠券紫 */
.toast.tip60{background:rgba(215,0,21,.95)}
.toast.tipcp{background:rgba(130,80,223,.95)}

/* ===== 券种提醒条：先居中 2.1 秒，再动画移动到顶部固定 =====
   关闭大图后自动复位，下次打开重新播放动画 */
.tipbar{
  position:fixed;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.9);
  z-index:320;
  /* 宽度随文字多少自动伸缩：文字少就窄，文字多就宽，到上限才换行。
     高度与字号不受影响（想改高度调下面 padding 的上下值 13px） */
  width:fit-content;width:max-content;max-width:300px;
  padding:13px 26px;border-radius:16px;
  color:#fff;font-size:17px;font-weight:600;line-height:1.45;text-align:center;
  background:rgba(0,0,0,.86);
  box-shadow:0 8px 28px rgba(0,0,0,.32);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .24s ease, transform .55s cubic-bezier(.22,.9,.28,1), top .55s cubic-bezier(.22,.9,.28,1);
}
.tipbar.show{
  opacity:1;visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}
/* 移顶固定：字号略收、贴住顶部安全区，不挡券图 */
.tipbar.show.to-top{
  top:calc(6px + env(safe-area-inset-top));
  transform:translate(-50%,0) scale(.94);
  border-radius:999px;
  padding:8px 22px;font-size:15.5px;
}
/* 手机端：上限按屏幕比例，同样只设上限不设下限，宽度依然跟着文字走 */
@media (max-width:640px){
  .tipbar{max-width:74vw}
}

.tipbar.tip60{background:rgba(215,0,21,.94)}
.tipbar.tipcp{background:rgba(130,80,223,.94)}
@media (prefers-color-scheme: dark){
  .tipbar.tip60{background:rgba(255,69,58,.95)}
  .tipbar.tipcp{background:rgba(160,110,245,.95)}
}

/* ===== 修改密码弹窗：三个密码输入框 + 错误提示 ===== */
.modal .m-fields{padding:4px 18px 12px;display:flex;flex-direction:column;gap:8px}
.modal .m-fields .m-input{margin:0}
.modal .m-err{
  display:none;color:var(--red);font-size:12.5px;
  padding:0 18px 10px;text-align:center;line-height:1.4;
}

/* ===== 未到「可用日期」的券：整张置灰、不可点击 ===== */
.badge-plain{background:var(--fill);color:var(--sub)}
.card.locked{
  opacity:.55;filter:grayscale(1);
}
.card.locked .acts .btn{opacity:.6;pointer-events:none}
.card.locked .thumb{cursor:not-allowed}
.card.locked .thumb .mask-hint{
  background:rgba(0,0,0,.52);
}
.card.locked .thumb .mh-lock{
  display:block;margin-top:4px;font-size:22px;color:#ffd60a;font-weight:600;
}
.thumb .mh-lock{display:none}
@media (prefers-color-scheme: dark){
  .card.locked{opacity:.5}
}

/* ===== 无图 + 未到可用日期：复用 .thumb 结构，只是没有图片、底色灰一点 =====
   排版与有图未开放完全一致（同一套 .mask-hint 规则），不再另写一套避免错位 */
.card .thumb.nopic{background:var(--fill-2)}
/* 无图 + 已可用：灰底占位，文案「等待管理员更新券！」+ 券类型胶囊 */
.card .thumb.nopic.waiting .mask-hint{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:rgba(0,0,0,.30);color:#fff;
  font-size:20.5px;letter-spacing:.2px;text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ===== 无图片的券：灰色占位 + 等待管理员更新 ===== */
.card .noimg.waiting{
  background:var(--fill-2);
  cursor:pointer;
}
.card .noimg.waiting span{
  color:var(--sub);font-size:13px;font-weight:600;letter-spacing:.2px;
  text-align:center;padding:0 8px;
}