/* ==========================================================================
   退款助手 · 官方下载落地页
   背景：/assets/bg.png（1080x1920）固定全屏
   底栏：position:fixed，上下滑动位置不变
   玻璃：WebGL 实时折射（见 glass.js），CSS backdrop-filter 作降级
   ========================================================================== */

:root{
  --cream-0:#fefaf2;
  --cream-1:#feecd4;
  --cream-2:#fee5c5;
  --ink:#3b2a17;
  --ink-soft:#6b563c;
  --gold:#e0a33c;
  --gold-hi:#f6cf7d;
  --gold-deep:#b9772a;
  --dock-h:118px;
  --dock-pad:14px;
  --radius:26px;
}

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

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

html{
  background:#feead0;
  /* 允许上下滑动，背景与底栏都不随滚动移动 */
  overflow-x:hidden;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  color:var(--ink);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 固定背景（不随滚动移动） ---------- */
/* 参考图为 1080x1920：宽度铺满 + 顶部对齐，
   竖屏时整图可见且底部留出奶油色给按钮；宽屏时保留最上方的认证与标题区域 */
.bg{
  position:fixed; inset:0; z-index:-2;
  background-image:url("/assets/bg.png");
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% auto;
  background-color:var(--cream-2);
}

.bg-veil{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%),
    linear-gradient(to top, rgba(254,229,197,.92) 0%, rgba(254,229,197,.55) 16%, rgba(254,229,197,0) 34%);
}

/* ---------- 内容层 ---------- */
.stage{
  position:relative;
  min-height:100dvh;
  padding-bottom:calc(var(--dock-h) + var(--dock-pad) + env(safe-area-inset-bottom,0px));
  pointer-events:none;
}

/* ---------- 固定底栏 ---------- */
.dock{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:50;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:var(--dock-pad) 16px calc(var(--dock-pad) + env(safe-area-inset-bottom,0px));
  pointer-events:none;
}
.dock .glass{pointer-events:auto}

/* ---------- 液态玻璃渲染层 ----------
   画布是 .dock 的子元素，与按钮同处一个定位上下文：
   页面滚动 / iOS 回弹时，玻璃与按钮永远同步，不可能脱离。 */
#glass-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;
  pointer-events:none;
}
.dock .glass{z-index:2}

/* ---------- 玻璃按钮 ---------- */
.glass{
  position:relative;
  display:block;
  height:var(--dock-h);
  border-radius:var(--radius);
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  isolation:isolate;
  transform:translateZ(0);
  transition:transform .22s cubic-bezier(.2,.9,.25,1), filter .22s;
  /* 投影：让玻璃「浮」在页面上，产生景深 */
  box-shadow:
    0 2px 4px rgba(122,84,32,.10),
    0 10px 20px rgba(122,84,32,.14),
    0 22px 44px rgba(122,84,32,.12);
  /* 降级（WebGL 不可用）：CSS 毛玻璃 */
  background:linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,246,232,.16) 45%, rgba(255,238,214,.24));
  backdrop-filter:blur(18px) saturate(190%) brightness(1.07);
  -webkit-backdrop-filter:blur(18px) saturate(190%) brightness(1.07);
  border:1px solid rgba(255,255,255,.50);
}
.glass.webgl{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:transparent;
}
.glass:active{transform:scale(.972)}
.glass.webgl:active{filter:brightness(1.05)}

/* 高光叠加层：仅 CSS 降级时使用。
   WebGL 接管后玻璃完全由着色器绘制，这些叠加层会发白，必须关掉。 */
.glass::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 30%);
  mix-blend-mode:screen;
}
.glass::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset;
  opacity:.9;
}
.glass.webgl::after,
.glass.webgl::before{ display:none; }

/* 内容层 */
.glass-body{
  position:relative; z-index:3;
  height:100%;
  display:flex; align-items:center; gap:10px;
  padding:0 12px 0 12px;
}
.ic{
  flex:0 0 auto;
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  color:#fff;
  background:linear-gradient(150deg,var(--gold-hi),var(--gold) 46%,var(--gold-deep));
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 4px 10px rgba(160,110,40,.30);
}
.ic svg{width:21px;height:21px;display:block}
.ic svg path,.ic svg circle{vector-effect:non-scaling-stroke}

.tx{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.15}
.tx b{
  font-size:16px; font-weight:700; letter-spacing:.01em;
  color:#3a2811;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  white-space:nowrap;
}
.tx i{
  margin-top:4px; font-style:normal; font-size:10.5px; letter-spacing:.02em;
  color:#8a6f4d; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.arw{
  margin-left:auto; flex:0 0 auto;
  width:20px;height:20px; color:#a9834a; opacity:.9;
}
.arw svg{width:100%;height:100%;display:block}

/* 窄屏微调 */
@media (max-width:360px){
  :root{--dock-h:106px}
  .ic{width:34px;height:34px;border-radius:11px}
  .ic svg{width:19px;height:19px}
  .tx b{font-size:14.5px}
  .tx i{font-size:10px}
  .arw{display:none}
}
/* 极窄：竖排以保住信息 */
@media (max-width:300px){
  .dock{grid-template-columns:1fr}
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(var(--dock-h) + 34px);
  transform:translate(-50%,10px);
  z-index:80;
  max-width:min(86vw,420px);
  padding:11px 16px; border-radius:14px;
  font-size:13px; line-height:1.5; text-align:center;
  color:#4a3418;
  background:rgba(255,252,245,.9);
  border:1px solid rgba(224,163,60,.42);
  box-shadow:0 10px 30px rgba(146,101,38,.18);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

@media (prefers-reduced-motion: reduce){
  .glass{transition:none}
  .glass-canvas{transition:none}
}