/* ============================================================================
 * 翠市 v3 · U 本位玉石交易系统 —— 视觉重设计样式（方案 A：翡翠商城·玻璃拟态）
 * 纯静态前端：零 npm / 零打包 / 零外部库。仅 CSS 3D + 少量原生 JS（ui-enhance.js）。
 *
 * 红线（实现前必读，见 DESIGN-UI-Redesign.md §0）：
 *  - 保留并定义必留 CSS 变量名（--bg/--surface/--jade/--jade-d/--jade-l/--gold/
 *    --gold-l/--text/--muted/--danger/--border/--shadow），语义不变。
 *  - 保留 body{max-width:480px;margin:0 auto} 默认态（后台内联 760 覆盖生效）。
 *  - 保留全部 class 名（只改外观，不重命名）；不改任何 id、onclick、render 函数。
 * ========================================================================== */

/* ---------- §1.2 设计 Token ---------- */
:root{
  /* —— 必留变量（§0 红线，语义不变） —— */
  --bg:#F4F6F1;
  --surface:rgba(255,255,255,0.66);
  --jade:#1F7A5C;
  --jade-d:#134E3A;
  --jade-l:#E6F2EC;
  --gold:#C9A227;
  --gold-l:#F7EECB;
  --text:#1B2620;
  --muted:#7C887F;
  --danger:#C0392B;
  --border:rgba(31,122,92,0.14);
  --shadow:0 6px 18px rgba(20,40,30,0.08);

  /* —— 扩展 token —— */
  --bg-grad:linear-gradient(180deg,#FAFBF8 0%,#EEF1EA 100%);
  --surface-2:rgba(255,255,255,0.82);
  --surface-solid:#FFFFFF;
  --jade-2:#2E9E7B;
  --gold-2:#E0C067;
  --ink:#1B2620;
  --ink-2:#445247;
  --danger-soft:#FBEAE7;
  --border-strong:rgba(31,122,92,0.28);
  --ring:rgba(31,122,92,0.30);
  --glow-jade:0 10px 30px rgba(31,122,92,0.28);
  --shadow-1:0 1px 2px rgba(20,40,30,0.05);
  --shadow-2:0 6px 18px rgba(20,40,30,0.08);
  --shadow-3:0 16px 44px rgba(20,40,30,0.12);

  /* 间距尺度（8pt 基准） */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;
  /* 圆角 */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --serif:"Songti SC","STSong",Georgia,serif;
}

/* ---------- 基础重置 ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  padding-bottom:64px;          /* 让位固定底部 tab */
  max-width:480px;              /* §0 红线默认态：会员端 480 */
  margin:0 auto;
}
/* 固定铺底渐变：不随内容滚动，制造纸面微纵深（§1.3） */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:var(--bg-grad);
  z-index:-1;
}
a{color:var(--jade);text-decoration:none;}

/* ---------- 顶栏 / 品牌 ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--jade-d),var(--jade));
  color:#fff;padding:12px var(--s5);position:sticky;top:0;z-index:20;
  box-shadow:var(--shadow-2);
}
.brand{font-weight:700;letter-spacing:.5px;font-size:17px;display:flex;align-items:center;gap:6px;}
.brand .tag{background:var(--gold);color:#3A2C00;font-size:11px;padding:1px 8px;border-radius:var(--r-pill);font-weight:600;}
.me{font-size:12px;opacity:.92;}

/* ---------- 免责声明 ---------- */
.disclaimer{
  background:var(--gold-l);border-bottom:1px solid #ecd98a;color:#7a5e00;
  font-size:12px;padding:8px 12px;text-align:center;line-height:1.5;
}

/* ---------- 视图 / 区块标题 / 说明 ---------- */
.view{padding:var(--s5);}
h2.section,.section{
  font-size:17px;margin:0 0 12px;color:var(--jade-d);font-weight:600;
  display:flex;align-items:center;gap:6px;line-height:1.4;
}
.hint{color:var(--muted);font-size:12px;margin:2px 0 12px;line-height:1.5;}

/* ---------- §4 表单输入（玻璃实底 + focus 玉色环） ---------- */
input,select{
  width:100%;border:1px solid var(--border);border-radius:var(--r-md);
  padding:11px 12px;margin-bottom:10px;font-size:15px;
  background:var(--surface-solid);color:var(--ink);font-family:inherit;
  transition:border-color .2s,box-shadow .2s;
}
input::placeholder{color:var(--muted);}
input:focus,select:focus{outline:none;border-color:var(--jade);box-shadow:0 0 0 3px var(--ring);}

/* ---------- §4 按钮 ---------- */
.btn{
  background:linear-gradient(135deg,var(--jade-2),var(--jade));
  color:#fff;border:none;border-radius:var(--r-md);padding:11px 16px;
  font-size:15px;font-weight:600;cursor:pointer;flex:1;
  transition:transform .15s, box-shadow .25s, filter .25s;
  box-shadow:var(--shadow-1);font-family:inherit;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--glow-jade);filter:saturate(1.05);}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--shadow-1);}
.btn.alt{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#3A2C00;}
.btn.ghost{background:transparent;color:var(--jade);border:1px solid var(--jade);box-shadow:none;}
.btn.ghost:hover{background:var(--jade-l);box-shadow:none;}
.btn.danger{background:#fff;color:var(--danger);border:1px solid var(--danger);box-shadow:none;}
.btn.danger:hover{background:var(--danger);color:#fff;box-shadow:0 8px 20px rgba(192,57,43,.3);}
.btn.sm{padding:7px 12px;font-size:13px;flex:none;}

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

/* ---------- §4 玻璃卡（会员端 .card / 后台 .sec） ---------- */
.card{
  background:var(--surface);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);padding:var(--s5);margin-bottom:var(--s6);
  transition:transform .3s, box-shadow .3s;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-3);}

/* ---------- §4 商品网格 / 商品卡（hover 立体倾斜 + 触屏 :active 轻反馈） ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);perspective:1000px;}
.product{
  background:var(--surface);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-2);display:flex;flex-direction:column;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
  will-change:transform;
}
.product:hover{transform:translateY(-6px) rotateX(4deg) rotateY(-5deg) translateZ(12px);box-shadow:var(--shadow-3);}
.product:active{transform:scale(.985);}
.thumb{
  height:120px;display:flex;align-items:center;justify-content:center;position:relative;
  background:linear-gradient(160deg,var(--jade-l),#fff);
}
.thumb .gem{
  width:62px;height:62px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #DFF7EC, #2E9E7B 70%, #134E3A);
  box-shadow:inset -6px -8px 14px rgba(0,0,0,.25), 0 6px 14px rgba(31,122,92,.35);
}
.thumb .tier-no{
  position:absolute;top:8px;left:8px;background:rgba(19,78,58,.55);color:#fff;
  font-size:11px;padding:2px 8px;border-radius:var(--r-pill);backdrop-filter:blur(4px);
}
.product .body{padding:var(--s4) var(--s4) var(--s5);display:flex;flex-direction:column;gap:6px;flex:1;}
.product .name{font-weight:600;font-size:15px;color:var(--ink);}
.product .price{color:var(--gold);font-weight:700;font-size:15px;}
.product .price small{color:var(--muted);font-weight:400;font-size:11px;}
.product .meta{color:var(--muted);font-size:11px;line-height:1.5;}
.product .row{margin-top:auto;}
.product .btn{margin-top:6px;}
.product .thumb .pimg{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- §4 统计数字块 ---------- */
.stats{display:flex;gap:var(--s3);margin-bottom:var(--s6);}
.stat{
  flex:1;background:var(--surface);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s5) var(--s3);text-align:center;box-shadow:var(--shadow-2);
}
.stat .num{font-size:24px;font-weight:700;color:var(--jade-d);line-height:1.1;font-variant-numeric:tabular-nums;}
.stat .lbl{font-size:12px;color:var(--muted);margin-top:6px;}

/* ---------- §4 列表项 ---------- */
.item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:var(--s4) 0;border-bottom:1px solid var(--border);}
.item:last-child{border-bottom:none;}
.item .info{font-size:14px;color:var(--ink);}
.item .sub{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5;}
.item .prod{width:52px;height:52px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border);flex:none;margin-left:8px;}
.item .proof{width:46px;height:46px;object-fit:cover;border-radius:var(--r-sm);margin-left:8px;border:1px solid var(--border);flex:none;}
.item .acts{margin-left:auto;}

/* ---------- §4 操作按钮组 ---------- */
.acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
.acts .btn{flex:none;}

/* ---------- §4 徽章（药丸化 + 浅底深字） ---------- */
.badge{font-size:11px;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap;font-weight:600;display:inline-block;line-height:1.4;}
.badge.held{background:var(--jade-l);color:var(--jade-d);}
.badge.sold{background:var(--gold-l);color:#8a6d00;}
.badge.listed{background:#E8F1FF;color:#2c6bd8;}
.badge.pooled{background:#E8F1FF;color:#2c6bd8;}
.badge.matched{background:#EEF1EE;color:#7C887F;}
.badge.allocated{background:#EEF1EE;color:#7C887F;}
.badge.pending{background:var(--gold-l);color:#9a6b00;}
.badge.approved{background:var(--jade-l);color:var(--jade-d);}
.badge.rejected{background:var(--danger-soft);color:var(--danger);}
.badge.live{animation:pulseGlow 2.2s ease-in-out infinite;}   /* §2.2⑤ 状态脉冲 */

/* ---------- §4 标签（冻结/必中/违约） ---------- */
.tag-fz{background:var(--danger-soft);color:var(--danger);font-size:11px;padding:1px 8px;border-radius:var(--r-pill);font-weight:600;}
.tag-gua{background:#E8F1FF;color:#2c6bd8;font-size:11px;padding:1px 8px;border-radius:var(--r-pill);font-weight:600;}
.tag-def{background:var(--gold-l);color:#9a6b00;font-size:11px;padding:1px 8px;border-radius:var(--r-pill);font-weight:600;}

/* ---------- §4 弹窗（遮罩模糊 + 玻璃 dialog + 缩放回弹） ---------- */
.mask{
  position:fixed;inset:0;background:rgba(20,38,30,.45);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  z-index:80;padding:18px;animation:fadeIn .2s ease both;
}
.dialog{
  background:var(--surface-2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border-strong);border-radius:var(--r-lg);
  padding:var(--s5);max-width:360px;width:100%;
  box-shadow:var(--shadow-3);animation:popIn .32s cubic-bezier(.2,.9,.3,1.25) both;
}
.dialog h3{margin:0 0 10px;font-size:16px;color:var(--jade-d);display:flex;align-items:center;gap:6px;}
.dialog .kv-line{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--border);color:var(--text);}
.dialog .kv-line b{font-variant-numeric:tabular-nums;color:var(--jade-d);}
.dialog .note-line{font-size:12px;color:var(--muted);line-height:1.6;margin:10px 0 12px;}
.btn-link{background:none;border:none;color:var(--muted);font-size:12px;width:100%;padding:8px 0 0;cursor:pointer;font-family:inherit;}
.btn-link:hover{color:var(--jade);}

/* 平台收款码 */
.qrbox{display:flex;align-items:center;justify-content:center;min-height:120px;margin:8px 0 12px;background:var(--surface-solid);border:1px dashed var(--border);border-radius:var(--r-md);padding:12px;text-align:center;}
.qr{max-width:200px;max-height:200px;border-radius:var(--r-sm);display:block;}
.qrbox .qr{max-width:200px;max-height:200px;border-radius:var(--r-sm);}
.qrtext{font-size:13px;color:var(--text);word-break:break-all;line-height:1.6;font-family:ui-monospace,Menlo,Consolas,monospace;}
.qrbox .note{font-size:12px;color:var(--muted);}

/* ---------- §4 键值 / 流水 ---------- */
.kv{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:13px;border-bottom:1px dashed var(--border);}
.kv:last-child{border-bottom:none;}
.kv .v{font-weight:600;color:var(--jade-d);font-variant-numeric:tabular-nums;}
.feed{font-size:12px;color:var(--ink-2);padding:10px 0;border-bottom:1px solid var(--border);line-height:1.5;}
.feed:last-child{border-bottom:none;}

/* ---------- §4 底部 Tab（玻璃 Bar + 玉色指示条） ---------- */
.tabs{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;display:flex;
  background:var(--surface);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);z-index:30;
}
.tabs button{
  flex:1;border:none;background:none;padding:9px 0 7px;font-size:11px;
  color:var(--muted);cursor:pointer;position:relative;
  transition:color .2s, transform .2s;font-family:inherit;
}
.tabs button .ic{font-size:18px;display:block;margin-bottom:1px;transition:transform .2s;}
.tabs button.active{color:var(--jade);font-weight:600;}
.tabs button.active .ic{transform:translateY(-2px);}
.tabs button.active::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:22px;height:2px;border-radius:2px;background:var(--jade);
}

/* ---------- §4 Toast（玻璃深底药丸） ---------- */
.toast{
  position:fixed;top:60px;left:50%;transform:translateX(-50%);
  background:rgba(20,38,30,.85);color:#fff;padding:9px 18px;border-radius:var(--r-pill);
  font-size:13px;z-index:99;opacity:0;transition:opacity .25s;
  pointer-events:none;max-width:90%;text-align:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.toast.show{opacity:1;}

/* ---------- §4 Banner / Warn ---------- */
.banner{background:var(--jade-l);border:1px solid #bfe0d2;color:var(--jade-d);border-radius:var(--r-md);padding:10px 12px;margin-bottom:var(--s4);font-size:13px;line-height:1.5;}
.banner.warn{background:var(--danger-soft);border-color:#f5c6c0;color:var(--danger);}

/* ---------- 虚拟时钟条 / 管理条 ---------- */
.clockbar{background:#EAF1FB;border:1px solid #C9DCF7;color:#204B8A;border-radius:var(--r-md);padding:9px 12px;margin-bottom:10px;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.clockbar b{color:#12386f;}
.adminbar{background:var(--gold-l);border:1px solid #ecd98a;color:#7a5e00;border-radius:var(--r-md);padding:10px 12px;margin-bottom:var(--s4);font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.adminbar .btn{flex:none;padding:7px 12px;}
.win-cfg{margin-left:8px;color:#7a5e00;font-size:13px;}
.win-cfg .num{width:52px;padding:2px 4px;border:1px solid #d8c98a;border-radius:6px;background:#fff;margin:0;font-size:13px;}

/* ---------- 我的抢单结果（四态）/ 结算单 ---------- */
.grab-card{border-radius:var(--r-lg);padding:12px 14px;margin:0 0 var(--s6);font-size:14px;line-height:1.5;box-shadow:var(--shadow-1);}
.grab-card.grab{background:#EAF1FB;border:1px solid #cfe0ff;}
.grab-card.alloc{background:var(--gold-l);border:1px solid #ecd98a;}
.grab-card.hit{background:#E9F9EE;border:1px solid #b6e8c5;}
.grab-card.miss{background:#F3F4F6;border:1px solid #e2e5ea;}
.gc-title{font-weight:700;margin-bottom:4px;}
.gc-sub{color:#5b6470;font-size:13px;}
.settle{border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;margin:0 0 var(--s6);background:var(--jade-l);box-shadow:var(--shadow-1);}
.settle .section{margin-top:4px;margin-bottom:8px;}
.settle .sub{margin:10px 0 4px;font-size:12px;color:var(--muted);font-weight:600;}
.c-ok{color:var(--jade-d);font-weight:600;}
.c-bad{color:var(--danger);font-weight:600;}
.proof-input{flex:1;min-width:90px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;font-size:13px;background:#fff;margin:0;}
.settle .acts .proof-input{flex:none;width:120px;}

/* ---------- chip / empty ---------- */
.chip{background:#fff;border:1px solid var(--jade);color:var(--jade);border-radius:var(--r-pill);padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;flex:none;}
.chip:active{transform:scale(.96);background:var(--jade-l);}
.empty{color:var(--muted);text-align:center;padding:24px 0;font-size:13px;}

/* ---------- T+1 冷却倒计时 / 产品图 ---------- */
.cd{font-variant-numeric:tabular-nums;font-weight:600;color:#2c6bd8;}
.product .thumb{position:relative;}

/* ============================================================================
 * 新增：首屏 Hero（无 id 包裹）—— 旋转宝石 + 主标语（落点①）
 * ========================================================================== */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--s7) var(--s3) var(--s6);}
.gem-stage{perspective:600px;display:flex;justify-content:center;align-items:center;margin-bottom:var(--s5);animation:gemFloat 5s ease-in-out infinite;}
.gem-3d{
  width:104px;height:104px;border-radius:28px;transform-style:preserve-3d;
  background:radial-gradient(circle at 30% 25%, #DFF7EC 0%, #2E9E7B 46%, #134E3A 100%);
  box-shadow:inset -10px -12px 24px rgba(0,0,0,.35), 0 18px 40px rgba(31,122,92,.45), 0 0 60px rgba(31,122,92,.30);
  animation:gemSpin 9s linear infinite;
  will-change:transform;
}
.hero-txt h1{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--jade-d);margin:0 0 6px;letter-spacing:1px;}
.hero-txt p{margin:0;font-size:13px;color:var(--muted);line-height:1.6;max-width:300px;}

/* ---------- tab 切换过渡 ---------- */
.tabpane{animation:none;}
.tab-enter{animation:tabEnter .42s cubic-bezier(.2,.7,.2,1) both;}

/* ---------- 入场淡入上浮（被 ui-enhance.js 加 .in 触发，错峰） ---------- */
.reveal{opacity:0;}
.reveal.in{animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both;}

/* ============================================================================
 * 后台专属（.sec 玻璃块 / 表格 / 审批行 / 状态药丸）
 * 注：admin_index.html 内联 <style> 已定义部分，这里补充玻璃化与表格 hover，
 *     不冲突（同名属性以页面内联为准，新增属性由本文件提供）。
 * ========================================================================== */
.sec{
  background:var(--surface);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-2);padding:14px;margin-bottom:14px;
}
.sec h3{margin:0 0 10px;font-size:15px;color:var(--jade-d);font-weight:600;}
.login{margin-top:40px;}
.note{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5;}
.app-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 0;border-bottom:1px solid var(--border);}
.app-row:last-child{border-bottom:none;}
.b-ok{background:var(--jade-l);color:var(--jade-d);}
.b-no{background:var(--danger-soft);color:var(--danger);}
.b-wait{background:var(--gold-l);color:#9a6b00;}
.b-info{background:#E8F1FF;color:#0a5b9c;}
/* 后台表格玻璃 + 行 hover 浅玉底 + 数值右对齐 tabular */
.sec table{width:100%;border-collapse:collapse;font-size:13px;}
.sec th,.sec td{padding:10px 8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle;color:var(--ink);}
.sec th{color:var(--muted);font-weight:600;font-size:12px;}
.sec td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.sec th.num{text-align:right;}
.sec tbody tr:hover{background:var(--jade-l);}
.sec .acts .btn.sm{flex:none;}

/* ============================================================================
 * §2.2 关键动效关键帧
 * ========================================================================== */
@keyframes gemSpin{
  0%{transform:rotateY(0deg) rotateX(8deg);}
  100%{transform:rotateY(360deg) rotateX(8deg);}
}
@keyframes gemFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes tabEnter{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes popIn{
  0%{transform:scale(.85);opacity:0;}
  60%{transform:scale(1.03);}
  100%{transform:scale(1);opacity:1;}
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(31,122,92,0);}
  50%{box-shadow:0 0 14px 2px rgba(31,122,92,.28);}
}

/* ============================================================================
 * §2.3 性能与降级
 *  - 仅动 transform/opacity/box-shadow（合成层）。
 *  - backdrop-filter 不支持时，玻璃卡/弹窗回退实底（--surface-solid）。
 *  - prefers-reduced-motion：所有动效降级为静态最终态，reveal 直接显示。
 * ========================================================================== */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.stat,.tabs,.mask,.dialog,.sec{background:var(--surface-solid);}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
  .reveal{opacity:1 !important;}
  .reveal.in{animation:none !important;}
  .gem-3d{transform:rotateX(8deg);}
  .gem-stage{transform:none;}
}

/* ============================================================================
 * §5 响应式扩展（移动优先）—— 翠市 v3
 * 设计依据：DESIGN-UI-Responsive.md §1–§8
 * 纯 CSS 媒体查询；不改任何 HTML/JS/id。
 * ========================================================================== */

/* —— 流体字号/间距（clamp）：基准态覆盖原有固定值 —— */
body{ font-size:clamp(14px, 3.6vw, 15px); }
h2.section,.section{ font-size:clamp(15px, 4.4vw, 17px); }
.stat .num{ font-size:clamp(20px, 6vw, 24px); }
.hero-txt h1{ font-size:clamp(22px, 7vw, 28px); }
.sec h3{ font-size:clamp(14px, 3.8vw, 15px); }
.hint{ font-size:clamp(11px, 3vw, 12px); }
.view{ padding:clamp(16px, 5vw, 20px); }

/* —— 刘海屏 / 安全区（env()）：顶栏/toast/底栏/mask/body 避开 —— */
.topbar{ padding-top:calc(12px + env(safe-area-inset-top)); }
body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
.tabs{ padding-bottom:env(safe-area-inset-bottom); }
.toast{ top:calc(60px + env(safe-area-inset-top)); }
.mask{ padding:
        max(18px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left)); }

/* —— 商品网格防溢出（长文本折行，栅格子项可收缩） —— */
.product{ min-width:0; }
.product .name,.product .meta{ overflow-wrap:anywhere; word-break:break-word; }

/* —— 邀请码 #invCode：覆盖内联 22px（不改 HTML，用 !important） —— */
#invCode{ font-size:clamp(18px, 5.5vw, 22px) !important;
          letter-spacing:clamp(1px, 0.5vw, 2px) !important; }

/* —— 后台表格移动端（仅 CSS，不动 HTML）：首列 sticky + 紧凑 + 折行 —— */
.sec table th:first-child,
.sec table td:first-child{
  position:sticky; left:0; z-index:2;
  background:var(--surface-solid);
}
.sec tbody tr:hover td:first-child{ background:var(--jade-l); }
.sec table td{ white-space:normal; word-break:break-word; max-width:200px; }
.sec table td:nth-child(4){ max-width:160px; word-break:break-all; }

/* —— 超小屏 S（≤360px）：收紧间距/字号 —— */
@media (max-width:360px){
  .view,.card,.sec{ padding:var(--s4); }
  .section{ margin-bottom:10px; }
  .stats{ gap:var(--s2); }
  .stat{ padding:var(--s4) 6px; }
  .grid{ gap:var(--s2); }
  .item{ padding:12px 0; }
  .hero{ padding:var(--s6) 12px var(--s5); }
  .gem-3d{ width:88px; height:88px; }
  .tabs button{ font-size:10px; }
  .tabs button .ic{ font-size:16px; }
  .dialog{ padding:var(--s4); }
  .banner,.adminbar,.clockbar{ padding:8px 10px; font-size:12px; }
  .sec{ padding:12px; margin-bottom:12px; }
  .sec .acts{ gap:6px; }
  .sec table th, .sec table td{ padding:6px 5px; font-size:12px; }
  .sec th{ font-size:11px; }
  .sec td.num{ font-size:12px; }
}

/* —— 极窄 XS（≤340px）：网格转单列 —— */
@media (max-width:340px){
  .grid{ grid-template-columns:1fr; }
  .product .thumb{ height:140px; }
}

/* —— 平板/桌面 XL（≥601px）：容器保持居中（会员480/后台760），仅略增内边距 —— */
@media (min-width:601px){
  .view{ padding:var(--s6) var(--s5); }
  .card,.sec{ padding:var(--s5); }
}