/* ===== 用户端 · 磨砂玻璃质感层 (Frosted Glass) =====
   仅由 u-*.html（用户端小程序）引入，不影响商家端 App / PC 后台样式。
   必须在 assets/app.css 之后引入。 */

:root{
  --page:#F1F3F7;
  --bg:#F1F3F7;
  --glass:rgba(255,255,255,.72);
  --glass-2:rgba(255,255,255,.58);
  --glass-3:rgba(255,255,255,.85);
  --glass-line:rgba(255,255,255,.6);
  --glass-sh:0 1px 2px rgba(20,22,26,.04),0 12px 30px -16px rgba(20,22,26,.34);
  --glass-sh-sm:0 1px 2px rgba(20,22,26,.04),0 8px 20px -16px rgba(20,22,26,.42);
  --blur:saturate(180%) blur(16px);
  --blur-lg:saturate(180%) blur(20px);
  --blur-sm:saturate(160%) blur(10px);
}

body{background:var(--page)}
.svgic{display:inline-flex;align-items:center;justify-content:center;flex:none;vertical-align:middle}

/* ---------- 页面容器 + 极光背景（让毛玻璃"有东西可透"） ---------- */
.mobile{background:var(--page)}
.u-page:before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(720px 360px at -14% -10%, rgba(255,138,76,.20), transparent 62%),
    radial-gradient(600px 300px at 114% 4%, rgba(122,90,248,.13), transparent 60%),
    radial-gradient(680px 340px at 46% 112%, rgba(46,144,250,.10), transparent 62%);
}
.u-body{position:relative;z-index:2}

/* hero 渐变层：置于顶部，作为品牌色背景 */
.hero{position:absolute;left:0;right:0;top:0;height:236px;z-index:1;pointer-events:none;
  background:linear-gradient(168deg,#FF8A4C 0%,#FF5A16 44%,rgba(255,90,22,.05) 99%)}
.hero:after{content:"";position:absolute;inset:0;
  background:radial-gradient(400px 200px at 84% 6%,rgba(255,255,255,.28),transparent 62%)}
.hero.purple{height:252px;background:linear-gradient(172deg,#6941C6 0%,#7A5AF8 40%,rgba(122,90,248,.05) 99%)}
.hero.blue{background:linear-gradient(168deg,#4E9BFF 0%,#2E90FA 44%,rgba(46,144,250,.05) 99%)}

/* ---------- 悬浮磨砂导航栏 ---------- */
.topbar{position:sticky;top:0;z-index:100;
  transition:background .28s ease,box-shadow .28s ease,-webkit-backdrop-filter .28s ease,backdrop-filter .28s ease}
.topbar.glass{background:var(--glass);
  -webkit-backdrop-filter:var(--blur-lg);backdrop-filter:var(--blur-lg);
  box-shadow:0 .5px 0 rgba(20,22,26,.07),0 12px 26px -22px rgba(20,22,26,.65)}
/* 品牌渐变页：初始透明浮于 hero 之上，滚动后自动切换为白色玻璃 */
.topbar.on-hero{background:transparent;box-shadow:none}
.topbar.on-hero.scrolled{background:var(--glass);
  -webkit-backdrop-filter:var(--blur-lg);backdrop-filter:var(--blur-lg);
  box-shadow:0 .5px 0 rgba(20,22,26,.07),0 12px 26px -22px rgba(20,22,26,.65)}
.topbar.on-hero.scrolled .statusbar,
.topbar.on-hero.scrolled .navbar,
.topbar.on-hero.scrolled .navbar .t,
.topbar.on-hero.scrolled .navbar .back,
.topbar.on-hero.scrolled .navbar .act{color:var(--ink)}
.topbar .navbar{height:42px}
/* 吸顶筛选条 */
.topbar .filterbar{display:flex;gap:8px;align-items:center;padding:2px 14px 10px;overflow-x:auto;
  scrollbar-width:none}
.topbar .filterbar::-webkit-scrollbar{display:none}

/* ---------- 磨砂卡片 ---------- */
.card{margin:10px 12px;border-radius:16px;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:var(--glass-sh)}
.card.flat{background:var(--glass-2);border:1px solid rgba(255,255,255,.55);box-shadow:var(--glass-sh-sm)}
.card.solid{background:rgba(255,255,255,.94)}

/* 卡片内部一律透明，避免白底盖掉毛玻璃 */
.cell,.kv3,.kv3>div,.qrow{background:transparent}
.cell{padding:11px 12px;border-bottom:1px solid rgba(20,22,26,.06)}
.qrow{padding:10px 12px;border-bottom:1px solid rgba(20,22,26,.06)}
.qrow .qno{width:50px;height:40px;font-size:15px;background:rgba(255,255,255,.72)}
.qrow.over{background:rgba(254,236,235,.5)}
.divider{background:rgba(20,22,26,.07)}
.hr{height:6px;background:transparent}

/* ---------- 紧凑化：卡片内边距统一 12px ---------- */
.pad{padding:12px}
.card-hd{padding:12px 12px 0;font-size:14.5px}
.sect-t{margin:14px 14px 6px}
.kv3>div{padding:12px 6px}
.kv3 .n{font-size:20px}
.kv3 .l{font-size:10.5px}

/* ---------- 号码票（紧凑版） ---------- */
.ticket{margin:8px 12px;border-radius:15px;box-shadow:0 10px 24px -12px rgba(255,90,22,.55)}
.ticket .top{padding:13px 14px 11px}
.ticket .no{font-size:38px;margin:3px 0 1px;line-height:1.1}
.ticket .notch{height:11px;background:rgba(255,255,255,.82)}
.ticket .notch:before,.ticket .notch:after{display:none}
.ticket .notch i{top:6px;border-top-color:rgba(20,22,26,.14)}
.ticket .bot{padding:0 12px 11px;background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}

/* ---------- 券卡片（紧凑版） ---------- */
.coupon{margin-bottom:6px;border-radius:11px;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:var(--glass-sh-sm)}
.coupon{display:flex;overflow:hidden}
.coupon .lf{width:66px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;padding:10px 6px}
.coupon .lf:after{content:"";position:absolute;right:0;top:8px;bottom:8px;width:1px;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.85) 0 4px,transparent 4px 8px)}
.coupon .lf .amt{font-size:18px;line-height:1.1}
.coupon .lf .lb{font-size:9px;margin-top:2px;opacity:.82}
.coupon .rt{padding:8px 10px;flex:1;min-width:0}
.coupon .rt .tag{height:16px;font-size:9.5px;padding:0 5px}
.coupon .rt .btn-sm{height:28px;font-size:11px;padding:0 10px;border-radius:8px}
.coupon.used{box-shadow:none;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.45)}

/* ---------- 底部 TabBar / 操作条 ---------- */
.tabbar{height:54px;background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:var(--blur-lg);backdrop-filter:var(--blur-lg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:0 -10px 24px -20px rgba(20,22,26,.75)}
.mobile.has-tab{padding-bottom:60px}
.actionbar{background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:var(--blur-lg);backdrop-filter:var(--blur-lg);
  border-top:1px solid rgba(255,255,255,.6);
  box-shadow:0 -10px 24px -20px rgba(20,22,26,.75)}

/* ---------- 控件玻璃化 ---------- */
.pill{background:rgba(255,255,255,.66);border-color:rgba(255,255,255,.72);
  -webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
  box-shadow:0 1px 2px rgba(20,22,26,.04)}
.pill.on{background:var(--brand);border-color:var(--brand);box-shadow:0 5px 12px -5px rgba(255,90,22,.7)}
.btn-ghost{background:rgba(255,255,255,.74);border-color:rgba(255,255,255,.85);
  -webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
  box-shadow:0 1px 2px rgba(20,22,26,.05)}
.btn-soft{background:rgba(255,242,235,.86);-webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm)}
.btn-primary{box-shadow:0 6px 16px -6px rgba(255,90,22,.75)}
.spec{background:rgba(255,255,255,.62);-webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm)}
.spec-img{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.75)}
.notice{-webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm)}
.qrbox{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.8)}

/* ---------- 弹层玻璃化 ---------- */
.mask,.dlg{background:rgba(20,22,26,.42);
  -webkit-backdrop-filter:saturate(120%) blur(4px);backdrop-filter:saturate(120%) blur(4px)}
.sheet{background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:var(--blur-lg);backdrop-filter:var(--blur-lg)}
.dlg .box{background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:var(--blur-lg);backdrop-filter:var(--blur-lg)}

/* ---------- 深色/彩色区域的毛玻璃变体 ---------- */
.glass-dark{background:rgba(20,22,26,.42);
  -webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
  border:1px solid rgba(255,255,255,.16);color:#fff}
.glass-onbrand{background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:var(--blur-sm);backdrop-filter:var(--blur-sm);
  border:1px solid rgba(255,255,255,.28);color:#fff}

/* 375px 手机宽度下的收敛 */
@media (max-width:380px){
  .card{margin:8px 10px}
  .coupon .lf{width:60px}
  .coupon .lf .amt{font-size:16px}
  .ticket .no{font-size:34px}
}