/* =========================================================
   豆泡领券小程序 · 用户端样式
   ========================================================= */

/* ---------- 演示舞台 ---------- */
.stage{
  min-height:100vh;display:flex;align-items:flex-start;justify-content:center;
  gap:34px;padding:34px 24px 60px;
  background:
    radial-gradient(1200px 520px at 12% -8%, #FFE7C2 0%, rgba(255,231,194,0) 60%),
    radial-gradient(900px 480px at 92% 6%, #FFD9D0 0%, rgba(255,217,208,0) 62%),
    #F2F4F8;
}
.stage-side{width:250px;padding-top:16px;position:sticky;top:34px;}
.stage-side .brandmark{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.stage-side .brandmark .logo{
  width:42px;height:42px;border-radius:13px;background:var(--brand-grad);
  display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:var(--sd-brand);
}
.stage-side h1{font-size:21px;margin:0;letter-spacing:-.02em;}
.stage-side .sub{color:var(--ink-3);font-size:12.5px;margin:2px 0 20px;}
.navlist{display:flex;flex-direction:column;gap:6px;}
.navlist a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  font-size:13.5px;color:var(--ink-2);font-weight:600;transition:.15s;
}
.navlist a .k{
  width:26px;height:26px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;box-shadow:var(--sd-1);
}
.navlist a:hover{background:#fff;color:var(--brand-dark);box-shadow:var(--sd-1);}
.navlist a.active{background:var(--brand-grad);color:#fff;box-shadow:var(--sd-brand);}
.navlist a.active .k{background:rgba(255,255,255,.24);box-shadow:none;}
.side-note{margin-top:22px;font-size:11.5px;color:var(--ink-4);line-height:1.7;border-top:1px dashed var(--line);padding-top:14px;}

/* ---------- 手机壳 ---------- */
.device{
  width:390px;height:820px;flex:none;position:relative;
  background:#10131A;border-radius:46px;padding:11px;
  box-shadow:0 30px 80px rgba(20,24,36,.32), 0 0 0 2px rgba(255,255,255,.06) inset;
  position:sticky;top:34px;
}
.device::before{
  content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:120px;height:26px;background:#10131A;border-radius:0 0 16px 16px;z-index:30;
}
.screen{
  width:100%;height:100%;border-radius:36px;overflow:hidden;background:var(--bg);
  display:flex;flex-direction:column;position:relative;
}

/* 状态栏（绝对定位，浮在内容之上） */
.statusbar{
  position:absolute;top:0;left:0;right:0;height:44px;z-index:20;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 22px 6px;font-size:13px;font-weight:600;color:#fff;pointer-events:none;
}
.statusbar.dark{color:var(--ink-1);}
.statusbar .icons{display:flex;align-items:center;gap:5px;font-size:11px;}

/* 内容层包裹（滚动区 + 悬浮操作层） */
.pagewrap{flex:1;display:flex;flex-direction:column;position:relative;min-height:0;}

/* 页面容器 */
.pages{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:none;}
.pages::-webkit-scrollbar{display:none;}
.page{display:none;min-height:100%;padding-top:44px;}
.page.hero-page{padding-top:0;}
.page.active{display:block;animation:fadeUp .26s ease both;}

/* 顶部渐变头（用于首页/我的/领券专区） */
.hero{
  background:var(--brand-grad);color:#fff;padding:0 16px 16px;position:relative;
  padding-top:52px;border-radius:0 0 22px 22px;
}

/* ---------- 吸顶头部 ----------
   页面顶部 .hero 固定在原位，只有下方内容滚动。
   · 未滚动：保留 22px 圆角（与原设计一致）
   · 滚动后：圆角归零 + 加投影，否则内容会从圆角缺口里「漏」出来
   用法：给 .page 加 .stick-head（见 miniapp.js 的 stickHeadPages） */
.page.stick-head > .hero{
  position:sticky;top:0;z-index:9;
  transition:border-radius .18s ease,box-shadow .18s ease;
}
.page.stick-head > .hero.is-stuck{border-radius:0;box-shadow:0 6px 18px rgba(20,24,36,.18);}
.hero .htop{display:flex;align-items:center;gap:10px;}
.hero .hbrand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:18px;letter-spacing:.2px;}
.hero .hbrand .lg{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:15px;}
.hero .search{
  flex:1;height:34px;border-radius:99px;background:rgba(255,255,255,.92);
  display:flex;align-items:center;gap:7px;padding:0 13px;color:var(--ink-3);font-size:12.5px;
}
.hero .hcity{display:flex;align-items:center;gap:3px;font-size:12.5px;font-weight:600;}

/* 通用二级页头（白底） */
.topbar{
  height:44px;flex:none;display:flex;align-items:center;padding:0 14px;gap:10px;
  background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;margin-top:-44px;
}
.topbar .back{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--line-2);font-size:16px;}
.topbar .tt{font-size:16.5px;font-weight:700;flex:1;text-align:center;margin-right:30px;}
.topbar .act{font-size:12.5px;color:var(--ink-3);}

/* 内容区 */
.body{padding:12px 12px 24px;}

/* ---------- Banner 轮播 ---------- */
.banner{margin:-6px 0 0;border-radius:16px;overflow:hidden;position:relative;height:118px;box-shadow:var(--sd-1);}
.banner .slide{
  position:absolute;inset:0;display:flex;align-items:center;padding:0 16px;gap:12px;
  opacity:0;transition:opacity .5s;color:#fff;
}
.banner .slide.on{opacity:1;}
.banner .slide .txt{flex:1;}
.banner .slide .t1{font-size:17px;font-weight:800;line-height:1.25;letter-spacing:.2px;}
.banner .slide .t2{font-size:11.5px;opacity:.92;margin:4px 0 8px;}
.banner .slide .go{display:inline-block;background:#fff;color:var(--brand-dark);font-size:11px;font-weight:700;padding:4px 11px;border-radius:99px;}
.banner .slide .emoji{font-size:52px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));}
.banner .dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;}
.banner .dots i{width:5px;height:5px;border-radius:99px;background:rgba(255,255,255,.55);transition:.3s;}
.banner .dots i.on{width:14px;background:#fff;}

/* ---------- 金刚区 ---------- */
.kingkong{
  background:#fff;border-radius:16px;margin-top:12px;padding:14px 6px 6px;
  box-shadow:var(--sd-1);display:grid;grid-template-columns:repeat(5,1fr);gap:4px 0;
}
.kk{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0;position:relative;}
.kk .ico{
  width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  font-size:21px;color:#fff;font-weight:700;box-shadow:0 5px 13px rgba(23,26,33,.13);transition:transform .15s;
}
.kk:active .ico{transform:scale(.92);}
.kk .lb{font-size:11.5px;color:var(--ink-1);font-weight:600;}
.kk .sb{font-size:10px;color:var(--ink-4);margin-top:-3px;}
.kk .flag{position:absolute;top:2px;right:8px;font-size:9px;font-weight:700;color:#fff;background:var(--hot);
  padding:1px 5px;border-radius:5px;transform:scale(.92);}

/* ---------- 爆款券卡片 ---------- */
.sect{margin-top:14px;}
.sect-hd{display:flex;align-items:center;justify-content:space-between;padding:0 4px 9px;}
.sect-hd .t{font-size:15.5px;font-weight:800;display:flex;align-items:center;gap:7px;}
.sect-hd .t::before{content:"";width:4px;height:15px;border-radius:3px;background:var(--brand-grad);}
.sect-hd .more{font-size:12px;color:var(--ink-3);}

.coupon-card{
  background:#fff;border-radius:14px;padding:12px;margin-bottom:10px;display:flex;align-items:center;gap:12px;
  box-shadow:var(--sd-1);position:relative;overflow:hidden;
}
.coupon-card .cico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;flex:none;}
.coupon-card .cinfo{flex:1;min-width:0;}
.coupon-card .cinfo .n{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;}
.coupon-card .cinfo .m{font-size:11.5px;color:var(--ink-3);margin-top:4px;display:flex;align-items:center;gap:8px;}
.coupon-card .amt{font-family:var(--ff-num);font-weight:800;color:var(--hot);}
.coupon-card .amt .big{font-size:26px;}
.coupon-card .amt .u{font-size:12px;margin-left:1px;}

/* ---------- 商品网格 ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pcard{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--sd-1);display:flex;flex-direction:column;}
.pcard .pimg{
  height:112px;display:flex;align-items:center;justify-content:center;font-size:50px;position:relative;
  background:linear-gradient(135deg,#FFF6E9,#FFEFE0);
}
.pcard .pimg .tg{position:absolute;top:7px;left:7px;font-size:10px;font-weight:700;color:#fff;background:linear-gradient(135deg,#FF6A4D,#FF3B30);padding:2px 7px;border-radius:6px;}
.pcard .pinfo{padding:9px 10px 11px;display:flex;flex-direction:column;gap:5px;}
.pcard .pname{font-size:12.5px;font-weight:600;line-height:1.35;height:34px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.pcard .prow{display:flex;align-items:baseline;justify-content:space-between;}
.pcard .prow .s{font-size:10.5px;color:var(--ink-4);}

/* 横滑商品 */
.hscroll{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;}
.hscroll .pcard{width:130px;flex:none;}

/* ---------- 列表行 ---------- */
.lrow{display:flex;align-items:center;gap:12px;padding:13px 14px;background:#fff;}
.lrow+.lrow{border-top:1px solid var(--line-2);}
.lrow .li{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none;}
.lrow .lt{flex:1;font-size:14px;font-weight:600;}
.lrow .ls{font-size:12px;color:var(--ink-3);}
.lrow .arrow{color:var(--ink-4);font-size:15px;}

/* ---------- 领券专区 tabs ---------- */
.ctabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;}
.ctabs button{flex:none;height:30px;padding:0 15px;border-radius:99px;background:#fff;font-size:12.5px;font-weight:600;color:var(--ink-2);box-shadow:var(--sd-1);}
.ctabs button.on{background:var(--brand-grad);color:#fff;box-shadow:var(--sd-brand);}

/* ---------- 商品详情 ---------- */
.pd-hero{height:250px;background:linear-gradient(135deg,#FFF6E9,#FFEDDD);display:flex;align-items:center;justify-content:center;font-size:110px;position:relative;}
.pd-price-bar{background:var(--brand-grad);color:#fff;padding:12px 14px;display:flex;align-items:flex-end;justify-content:space-between;}
.pd-price-bar .p{font-family:var(--ff-num);font-weight:800;font-size:30px;}
.pd-price-bar .p .u{font-size:15px;}
.pd-price-bar .p .o{font-size:12.5px;opacity:.85;text-decoration:line-through;margin-left:8px;font-weight:400;}
.pd-price-bar .sold{font-size:12px;opacity:.92;}
.pd-title{padding:13px 14px;background:#fff;}
.pd-title .n{font-size:15.5px;font-weight:700;line-height:1.4;}
.pd-title .tags{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;}
.pd-block{background:#fff;margin-top:10px;padding:14px;}
.pd-block .bh{font-size:13.5px;font-weight:700;margin-bottom:11px;display:flex;align-items:center;gap:7px;}
.pd-block .bh::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--brand-grad);}
.pd-para{font-size:13px;color:var(--ink-2);line-height:1.85;}

/* 规格选择 */
.spec-opt{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 15px;margin:0 8px 8px 0;
  border-radius:9px;background:var(--line-2);font-size:12.5px;font-weight:600;color:var(--ink-2);border:1.5px solid transparent;}
.spec-opt.on{background:#FFF3E6;color:var(--brand-dark);border-color:#FFD9C0;}

/* 底部悬浮操作层（固定在内容层底部，TabBar 之上） */
.floatbar{position:absolute;left:0;right:0;bottom:0;z-index:14;}

/* 底部操作栏 */
.actionbar{
  background:#fff;border-top:1px solid var(--line);
  padding:9px 12px;display:flex;align-items:center;gap:10px;
}
.actionbar .ic{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--ink-3);width:42px;}
.actionbar .ic .g{font-size:19px;}
.actionbar .btns{flex:1;display:flex;gap:9px;}
.actionbar .btns .btn{flex:1;}

/* ---------- 购物车 ---------- */
.cart-item{display:flex;gap:11px;padding:13px;background:#fff;border-radius:14px;margin-bottom:10px;box-shadow:var(--sd-1);}
.cart-item .cimg{width:70px;height:70px;border-radius:12px;background:linear-gradient(135deg,#FFF6E9,#FFEDDD);display:flex;align-items:center;justify-content:center;font-size:32px;flex:none;}
.cart-item .cinfo{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;}
.cart-item .cn{font-size:13px;font-weight:600;line-height:1.35;}
.stepper{display:flex;align-items:center;gap:0;border-radius:8px;overflow:hidden;background:var(--line-2);}
.stepper button{width:26px;height:26px;font-size:15px;color:var(--ink-2);display:flex;align-items:center;justify-content:center;}
.stepper .v{width:32px;text-align:center;font-size:13px;font-weight:700;font-family:var(--ff-num);background:#fff;height:26px;line-height:26px;}
.checkbox{width:20px;height:20px;border-radius:6px;border:2px solid var(--ink-4);flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;}
.checkbox.on{background:var(--brand-grad);border-color:transparent;}

/* 结算栏 */
.settlebar{
  background:#fff;border-top:1px solid var(--line);
  padding:10px 14px;display:flex;align-items:center;justify-content:space-between;
}

/* ---------- 订单 ---------- */
.otabs{display:flex;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;}
.otabs button{flex:1;height:44px;font-size:13px;font-weight:600;color:var(--ink-3);position:relative;}
.otabs button.on{color:var(--brand-dark);}
.otabs button.on::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:22px;height:3px;border-radius:3px;background:var(--brand-grad);}
.ocard{background:#fff;border-radius:14px;padding:13px;margin-bottom:10px;box-shadow:var(--sd-1);}
.ocard .ohd{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-3);margin-bottom:11px;}
.ocard .ostat{font-weight:700;}
.ocard .obd{display:flex;gap:11px;align-items:center;}
.ocard .oimg{width:60px;height:60px;border-radius:11px;background:linear-gradient(135deg,#FFF6E9,#FFEDDD);display:flex;align-items:center;justify-content:center;font-size:28px;}
.ocard .oft{display:flex;justify-content:space-between;align-items:center;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line);}

/* ---------- 个人中心 ---------- */
.profile-hero{background:linear-gradient(150deg,#FF8A2B,#FF4E2B);padding:56px 16px 58px;color:#fff;position:relative;}
.profile-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:26px;background:var(--bg);border-radius:26px 26px 0 0;}
.puser{display:flex;align-items:center;gap:12px;position:relative;z-index:2;}
.puser .av{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;font-size:27px;}
.puser .pn{font-size:17px;font-weight:800;}
.puser .pm{font-size:11.5px;opacity:.9;margin-top:3px;display:flex;align-items:center;gap:7px;}
.puser .pm .idbtn{background:rgba(255,255,255,.22);padding:1px 8px;border-radius:99px;font-size:10.5px;}
.asset-card{
  margin:-46px 12px 0;border-radius:18px;padding:16px;position:relative;z-index:3;
  background:linear-gradient(135deg,#2A2E38,#16181D);color:#fff;box-shadow:var(--sd-3);
}
.asset-card .arow{display:flex;justify-content:space-between;align-items:flex-start;}
.asset-card .lb{font-size:12px;opacity:.72;}
.asset-card .bal{font-size:32px;font-weight:800;font-family:var(--ff-num);margin-top:3px;letter-spacing:-.02em;}
.asset-card .bal .u{font-size:14px;font-weight:600;opacity:.8;margin-left:3px;}
.asset-card .a3{display:flex;margin-top:15px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);}
.asset-card .a3>div{flex:1;text-align:center;}
.asset-card .a3 .v{font-size:17px;font-weight:800;font-family:var(--ff-num);}
.asset-card .a3 .k{font-size:11px;opacity:.68;margin-top:3px;}

.pquicks{display:flex;gap:10px;margin:12px;position:relative;z-index:3;}
.pquicks .q{flex:1;background:#fff;border-radius:14px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:7px;box-shadow:var(--sd-1);}
.pquicks .q .g{font-size:23px;}
.pquicks .q .t{font-size:12.5px;font-weight:600;}

.rebate-flow{display:flex;background:#fff;border-radius:14px;margin:0 12px 12px;padding:15px 0;box-shadow:var(--sd-1);}
.rebate-flow>div{flex:1;text-align:center;position:relative;}
.rebate-flow>div+div::before{content:"";position:absolute;left:0;top:12%;height:76%;width:1px;background:var(--line);}
.rebate-flow .v{font-size:19px;font-weight:800;font-family:var(--ff-num);color:var(--brand-dark);}
.rebate-flow .k{font-size:11.5px;color:var(--ink-3);margin-top:4px;}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:14px;margin:0 12px 12px;padding:16px 8px;gap:12px 0;box-shadow:var(--sd-1);}
.grid4 .g{display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;}
.grid4 .g .gi{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--line-2);}
.grid4 .g .gt{font-size:11.5px;color:var(--ink-2);font-weight:600;}

/* ---------- TabBar ---------- */
.tabbar{
  flex:none;height:56px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);display:flex;position:relative;z-index:20;
}
.tabbar .tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10.5px;color:var(--ink-3);font-weight:600;position:relative;}
.tabbar .tb .g{font-size:20px;line-height:1;filter:grayscale(1) opacity(.6);transition:.2s;}
.tabbar .tb.on{color:var(--brand-dark);}
.tabbar .tb.on .g{filter:none;transform:translateY(-1px);}
.tabbar .tb .bdg{position:absolute;top:5px;right:calc(50% - 18px);min-width:15px;height:15px;padding:0 4px;border-radius:99px;
  background:var(--hot);color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.tabbar .tb .bdg.dot{min-width:8px;width:8px;height:8px;padding:0;top:7px;right:calc(50% - 14px);}

/* ---------- 弹窗 / 半屏 ---------- */
.sheet-mask{position:absolute;inset:0;background:var(--mask);z-index:60;opacity:0;pointer-events:none;transition:.25s;}
.sheet-mask.on{opacity:1;pointer-events:auto;}
.sheet{
  position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;padding:18px 16px 22px;
  transform:translateY(102%);transition:transform .3s cubic-bezier(.32,.72,0,1);z-index:61;max-height:78%;overflow-y:auto;
}
.sheet.on{transform:none;}
.sheet .sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sheet .sh .t{font-size:16px;font-weight:800;}
.sheet .sh .x{width:28px;height:28px;border-radius:50%;background:var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--ink-3);}

/* 领券结果卡 */
.claim-card{text-align:center;padding:6px 0 2px;}
.claim-card .big{font-size:52px;font-family:var(--ff-num);font-weight:800;color:var(--hot);line-height:1;}
.claim-card .big .u{font-size:20px;}
.claim-card .cp{font-size:14.5px;font-weight:700;margin-top:8px;}
.claim-card .cs{font-size:12px;color:var(--ink-3);margin-top:5px;}

/* 二维码占位 */
.qrbox{width:180px;height:180px;margin:16px auto 0;border-radius:16px;background:
  conic-gradient(from 0deg,#16181D 0 25%,#fff 0 50%,#16181D 0 75%,#fff 0) 0 0/16px 16px;
  position:relative;box-shadow:var(--sd-2);display:flex;align-items:center;justify-content:center;}
.qrbox::after{content:"";position:absolute;inset:0;background:repeating-conic-gradient(#16181D 0 25%,#fff 0 50%) 0 0/14px 14px;opacity:.92;border-radius:16px;}
.qrbox .mid{position:relative;z-index:2;width:52px;height:52px;border-radius:12px;background:var(--brand-grad);
  display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 0 0 5px #fff;}

/* 步骤条（领红包→再下单→享优惠） */
.steps{display:flex;align-items:center;justify-content:center;gap:0;background:#fff;border-radius:14px;padding:16px 8px;box-shadow:var(--sd-1);}
.steps .st{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;}
.steps .st .g{width:44px;height:44px;border-radius:50%;background:var(--brand-grad-soft);display:flex;align-items:center;justify-content:center;font-size:21px;}
.steps .st .t{font-size:12px;font-weight:600;color:var(--ink-2);}
.steps .arr{color:var(--brand-1);font-size:15px;font-weight:700;opacity:.7;}

/* ---------- 上游 CPS 联盟活动 ---------- */
.jtag{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:600;color:var(--brand-dark);
  background:var(--brand-grad-soft);border-radius:99px;padding:2px 8px;vertical-align:1px;}
.jstats{display:flex;gap:3px;margin:14px 12px 0;padding:11px 6px;background:rgba(255,255,255,.16);border-radius:14px;}
.jstats .js2{flex:1;text-align:center;position:relative;}
.jstats .js2 + .js2::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.25);}
.jstats .n{display:block;font-size:19px;font-weight:800;font-family:var(--ff-num);line-height:1.2;}
.jstats .n.sm{font-size:12.5px;padding-top:4px;}
.jstats .l{display:block;font-size:10.5px;opacity:.82;margin-top:3px;}

.jnotice{display:flex;align-items:center;gap:7px;background:#FFF7E6;border-radius:11px;padding:9px 11px;
  font-size:11.5px;color:#9A6B12;margin-bottom:9px;}
.jnotice .jnb{flex:none;background:#FF8A2B;color:#fff;border-radius:5px;padding:1px 5px;font-size:10px;font-weight:700;}
.jnotice .jnt{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.jnotice .jnd{flex:none;font-size:10px;opacity:.75;}

.jbar{display:flex;align-items:center;gap:8px;border-radius:12px;padding:9px 11px;font-size:11.5px;margin-bottom:10px;}
.jbar.live{background:#E6F7EF;color:#12924F;}
.jbar.off{background:#EEF2F7;color:#5B6675;}
.jbar .jd{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(0,0,0,.06);}
.jbar .grow{flex:1;line-height:1.5;}
.jbar .jref{flex:none;border:0;border-radius:99px;background:#fff;color:var(--brand-dark);
  font-size:11.5px;font-weight:700;padding:5px 12px;box-shadow:var(--sd-1);}

.jact{display:flex;gap:11px;align-items:center;width:100%;text-align:left;background:#fff;border:0;
  border-radius:16px;padding:11px;box-shadow:var(--sd-1);margin-bottom:10px;cursor:pointer;}
.jact .jimg{position:relative;flex:none;width:76px;height:76px;border-radius:12px;overflow:hidden;background:var(--brand-grad-soft);}
.jact .jimg .jbig{width:100%;height:100%;object-fit:cover;display:block;}
.jact .jimg .jico{position:absolute;right:3px;bottom:3px;width:20px;height:20px;border-radius:6px;
  background:#fff;object-fit:contain;padding:2px;box-shadow:0 1px 4px rgba(0,0,0,.18);}
.jact .jbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.jact .jname{font-size:14px;font-weight:700;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.jact .jdesc{font-size:11px;color:var(--ink-3);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.jact .jmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.jact .jmeta .js{font-size:10.5px;color:var(--ink-4);}
.jact .jgo{flex:none;font-size:11.5px;font-weight:700;color:#fff;background:var(--brand-grad);
  border-radius:99px;padding:6px 12px;box-shadow:var(--sd-brand);}
.jempty{text-align:center;color:var(--ink-4);font-size:12px;padding:28px 0;}

.jhero{position:relative;width:100%;height:132px;border-radius:14px;overflow:hidden;background:var(--brand-grad-soft);margin-bottom:12px;}
.jhero img{width:100%;height:100%;object-fit:cover;display:block;}
.jhero .jico{position:absolute;left:10px;bottom:10px;width:32px;height:32px;border-radius:9px;background:#fff;
  object-fit:contain;padding:4px;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.jblock{background:#F7F8FA;border-radius:12px;padding:12px;font-size:12.5px;color:var(--ink-2);line-height:1.75;}
.jrows{margin-top:11px;border-top:1px solid var(--line-2);}
.jrows .jr{display:flex;justify-content:space-between;gap:14px;padding:8px 0;font-size:12.5px;border-bottom:1px solid var(--line-2);}
.jrows .jr .k{flex:none;color:var(--ink-3);}
.jrows .jr .v{text-align:right;font-weight:600;color:var(--ink-1);}
.mono{font-family:var(--ff-num);word-break:break-all;font-weight:500 !important;font-size:11.5px;}

/* 通用信息卡 */
.info-card{background:#fff;border-radius:14px;padding:14px;box-shadow:var(--sd-1);}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;}
.kv .k{color:var(--ink-3);}
.kv .v{font-weight:600;}
.kv.total{border-top:1px dashed var(--line);margin-top:6px;padding-top:11px;font-size:15px;}

@media (max-width:900px){
  .stage{flex-direction:column;align-items:center;}
  .stage-side{position:static;width:100%;max-width:390px;}
  .device{position:static;}
}