/* ==========================================================================
   液态玻璃主题层（Liquid Glass · iOS 风格）· 性能优先版
   叠加在 style.css 之后，只改视觉，不改布局与类名。

   性能取舍：
   · 背景光晕是静态渐变层：不用 filter: blur()，不做无限循环动画。
   · 滚动内容（订单卡、表单、流水、收益卡）不做 backdrop-filter，
     只用半透明填充 + 高光描边做出玻璃质感——滚动时零重算。
   · 毛玻璃只保留给少数固定层：底部导航、弹层、toast、登录卡。
   · 视图切换只做透明度过渡，列表卡片不再逐张入场。

   想更浓的玻璃感：把 --glass-blur 从 10px 调到 16~20px。
   想彻底回滚：删掉 index.html 里引用本文件的 <link>。
   ========================================================================== */

:root {
  /* 玻璃材质 */
  --glass-blur: 10px;                       /* 仅固定层使用的模糊半径 */
  --glass-fill: rgba(255, 255, 255, .74);
  --glass-fill-strong: rgba(255, 255, 255, .86);
  --glass-fill-soft: rgba(255, 255, 255, .60);
  --glass-stroke: rgba(255, 255, 255, .88);
  --glass-r: 22px;
  --glass-r-lg: 30px;
  --glass-shadow: 0 10px 24px -14px rgba(30, 42, 76, .34), 0 1px 3px rgba(30, 42, 76, .05);
  --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .92);

  /* 品牌渐变与高光 */
  --brand-grad: linear-gradient(135deg, #ffab7e 0%, #ff6b4a 52%, #f7526b 100%);
  --brand-glow:
    0 10px 20px -10px rgba(255, 96, 74, .58),
    inset 0 1px 0 rgba(255, 255, 255, .42);
  --brand-ring: 0 0 0 3px rgba(255, 107, 74, .16);

  /* 背景光晕（纯渐变，无滤镜） */
  --glow-1: rgba(255, 140, 96, .58);
  --glow-2: rgba(128, 110, 255, .40);
  --glow-3: rgba(84, 190, 255, .36);
  --glow-4: rgba(255, 126, 190, .34);

  /* 原有分隔线改为半透明，配合玻璃底 */
  --line: rgba(140, 155, 180, .22);
  --shadow: var(--glass-shadow);
}

/* ---------- 静态光晕背景 ---------- */
/* fixed 单层 + 纯径向渐变：绘制一次后只做合成，滚动时不重绘 */
html { background: #eef1f7; }

body { background: transparent; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58vw 46vh at 10% 2%, var(--glow-1), transparent 62%),
    radial-gradient(54vw 42vh at 94% 14%, var(--glow-2), transparent 64%),
    radial-gradient(60vw 46vh at 82% 96%, var(--glow-3), transparent 66%),
    radial-gradient(52vw 40vh at 2% 92%, var(--glow-4), transparent 64%),
    linear-gradient(180deg, #eef1f7 0%, #e9edf6 100%);
}

/* 主容器透明，让光晕透上来；底部为悬浮导航留空间 */
.app {
  background: transparent;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* ---------- 顶部彩色玻璃 ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 var(--glass-r-lg) var(--glass-r-lg);
  background: linear-gradient(135deg, #ff8457 0%, #ff5f6d 55%, #ef4f76 100%);
  box-shadow: 0 16px 32px -18px rgba(255, 96, 74, .55);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 85% at 14% -12%, rgba(255, 255, 255, .5), transparent 58%),
    radial-gradient(90% 70% at 96% -4%, rgba(255, 255, 255, .24), transparent 62%);
}

.hero > * { position: relative; z-index: 1; }

/* 顶部内的玻璃小块：背后是自身渐变，实时模糊看不出差别，直接省掉 */
.brand-mark,
.campus-btn,
.stats,
.site-notice {
  background: rgba(255, 255, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.brand-mark { border-radius: 15px; }
.campus-btn { border-radius: 999px; }
.stats { border-radius: 20px; }
.site-notice { border-radius: 16px; }

.campus-btn:active { background: rgba(255, 255, 255, .34); }

.stat b { text-shadow: 0 1px 6px rgba(150, 40, 20, .16); }

/* ---------- 玻璃面板（无实时模糊，滚动零成本） ---------- */
.order,
.form-card,
.profile,
.tx-list {
  background: linear-gradient(160deg, var(--glass-fill-strong) 0%, var(--glass-fill) 58%, var(--glass-fill-soft) 100%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--glass-r);
  box-shadow: var(--glass-shadow), var(--glass-inner);
}

/* 列表卡片不再逐张播放入场动画 */
.order { animation: none; }
.order:active { transform: scale(.985); }

/* 内嵌浅色块 */
.detail-grid,
.pay-info,
.rider-card,
.detail-highlight {
  background: rgba(255, 255, 255, .62);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}

.order-foot { border-top: 1px dashed rgba(140, 155, 180, .28); }
.tx-item { border-bottom: 1px solid rgba(140, 155, 180, .16); }

/* ---------- 筛选标签 ---------- */
.chip {
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 2px 6px -3px rgba(30, 42, 76, .22), inset 0 1px 0 rgba(255, 255, 255, .85);
}

.chip.is-active {
  background: var(--brand-grad);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
  box-shadow: var(--brand-glow);
}

/* 吸顶标签条：不做毛玻璃，用高不透明度渐变避免滚动时重绘 */
.chips-row {
  margin: 0 -14px;
  padding: 8px 14px 4px;
  background: linear-gradient(180deg, rgba(238, 241, 247, .98) 0%, rgba(238, 241, 247, .88) 72%, rgba(238, 241, 247, 0) 100%);
}

/* ---------- 表单控件 ---------- */
.field input,
.field textarea,
.field select {
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 15px;
  box-shadow: inset 0 1px 2px rgba(30, 42, 76, .06);
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  background: #fff;
  border-color: rgba(255, 107, 74, .5);
  box-shadow: var(--brand-ring), inset 0 1px 2px rgba(30, 42, 76, .04);
}

.field input::placeholder,
.field textarea::placeholder { color: #98a2b3; }

/* ---------- 主按钮 ---------- */
.btn-primary,
.btn-grab,
.btn-mini.primary,
.avatar,
.auth-mark {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: var(--brand-glow);
}

.btn-primary { border-radius: 18px; }
.btn-grab,
.btn-mini { border-radius: 999px; }

.btn-primary:active,
.btn-grab:active,
.btn-mini.primary:active,
.wallet-btn:active { transform: scale(.98); }

/* ---------- 次级按钮（半透明玻璃，无模糊） ---------- */
.btn-mini.light,
.btn-mini.danger,
.btn-outline,
.btn-danger-soft,
.ghost-btn,
.campus-item,
.quick-amount,
.tx-icon {
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 8px -6px rgba(30, 42, 76, .35);
}

.btn-mini.light { background: rgba(255, 255, 255, .78); color: var(--ink-2); }
.btn-mini.danger { background: rgba(255, 240, 240, .82); color: #e5484d; }

.btn-outline {
  background: rgba(255, 255, 255, .8) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  color: var(--ink-2);
}

.btn-danger-soft { background: rgba(255, 240, 240, .85); color: #e5484d; }

.ghost-btn {
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 217, 207, .9);
  color: var(--brand-deep);
  border-radius: 14px;
}

.quick-amount { background: rgba(255, 255, 255, .72); border-radius: 14px; }

.quick-amount.is-active {
  background: rgba(255, 107, 74, .16);
  border-color: rgba(255, 107, 74, .45);
  color: var(--brand-deep);
  box-shadow: inset 0 0 0 1px rgba(255, 107, 74, .22);
}

.btn-grab.is-mine {
  background: rgba(255, 255, 255, .66);
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
}

/* ---------- 分段控件 ---------- */
.seg,
.auth-seg {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 16px;
  box-shadow: inset 0 1px 2px rgba(30, 42, 76, .06);
}

.seg-btn,
.auth-seg-btn { border-radius: 12px; }

.seg-btn.is-active,
.auth-seg-btn.is-active {
  background: #fff;
  box-shadow: 0 2px 6px -2px rgba(30, 42, 76, .22);
}

/* ---------- 悬浮玻璃导航（仅此常驻层保留真模糊，面积小） ---------- */
.tabbar {
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: calc(100% - 24px);
  max-width: 536px;
  padding: 7px 6px;
  border: 1px solid var(--glass-stroke);
  border-radius: 28px;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 12px 28px -14px rgba(30, 42, 76, .4), var(--glass-inner);
}

.tab { border-radius: 20px; transition: color .18s, background-color .18s; }

.tab.is-active {
  color: var(--brand-deep);
  background: rgba(255, 107, 74, .10);
}

.tab.is-active .tab-label { font-weight: 600; }

/* ---------- 弹层 ---------- */
/* 遮罩不做全屏模糊：那是每帧重算整屏，最贵的一项 */
.sheet-mask { background: rgba(22, 26, 38, .34); }

.sheet {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .80) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-stroke);
  border-bottom: none;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -12px 36px -18px rgba(30, 42, 76, .38), var(--glass-inner);
}

.sheet-handle { background: rgba(120, 132, 152, .38); }

.campus-item {
  background: rgba(255, 255, 255, .66);
  border-radius: 16px;
}

.campus-item.is-active {
  background: rgba(255, 107, 74, .16);
  border-color: rgba(255, 107, 74, .4);
  color: var(--brand-deep);
}

.pay-actions .btn-outline {
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .9);
}

/* 小彩标统一压一层玻璃高光 */
.tag,
.status-pill,
.route-label,
.pay-badge,
.withdraw-status,
.pay-warn,
.detail-note {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68);
}

.route-label { background: rgba(255, 255, 255, .66); }

/* ---------- 提示条 ---------- */
.toast {
  bottom: 112px;
  border-radius: 18px;
  background: rgba(28, 32, 44, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* ---------- 登录 / 注册 ---------- */
.auth-screen {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(58vmax 58vmax at 16% 8%, rgba(255, 140, 100, .9), transparent 60%),
    radial-gradient(52vmax 52vmax at 88% 26%, rgba(255, 96, 120, .84), transparent 62%),
    radial-gradient(62vmax 62vmax at 62% 94%, rgba(150, 112, 255, .76), transparent 66%),
    linear-gradient(160deg, #ff8457 0%, #ff5f6d 55%, #f5486b 100%);
}

.auth-box {
  position: relative;
  background: linear-gradient(165deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .74) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: var(--glass-r-lg);
  box-shadow: 0 26px 60px -26px rgba(120, 30, 20, .5), var(--glass-inner);
}

.auth-mark { border-radius: 20px; }

/* ---------- 钱包 ---------- */
.wallet-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: var(--brand-grad);
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(255, 96, 74, .55), inset 0 1px 0 rgba(255, 255, 255, .42);
}

.wallet-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% -20%, rgba(255, 255, 255, .42), transparent 58%),
    radial-gradient(80% 70% at 100% 0%, rgba(255, 255, 255, .18), transparent 62%);
}

.wallet-card > * { position: relative; z-index: 1; }

.wallet-btn {
  background: rgba(255, 255, 255, .94);
  color: var(--brand-deep);
  border-radius: 14px;
}

.wallet-btn.ghost {
  background: rgba(255, 255, 255, .2);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.avatar { border-radius: 18px; }
.rider-avatar { border-radius: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }

.tx-icon { border-radius: 12px; }
.tx-icon.in { background: rgba(234, 250, 242, .9); }
.tx-icon.out { background: rgba(255, 242, 238, .92); }

/* ---------- 动效收敛：只过渡 transform / opacity / 背景色 ---------- */
.view.is-active { animation: glass-fade .18s ease both; }

@keyframes glass-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- 降级：不支持毛玻璃时用不透明底色 ---------- */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .tabbar { background: rgba(255, 255, 255, .96); }
  .sheet { background: #fff; }
  .toast { background: rgba(28, 32, 44, .94); }
  .auth-box { background: rgba(255, 255, 255, .96); }
}

/* ---------- 系统「减弱动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
  .view.is-active { animation: none; }
  .order, .chip, .tab, .btn-primary, .btn-grab, .btn-mini, .wallet-btn { transition: none; }
}

/* ---------- 系统「减弱透明度」 ---------- */
@media (prefers-reduced-transparency: reduce) {
  .tabbar, .sheet, .toast, .auth-box {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fff;
  }
  .toast { background: rgba(28, 32, 44, .96); }
}