/* ══════════════════════════════════════════════════════════════════════════
   ui.css —— 设计系统
   ══════════════════════════════════════════════════════════════════════════

   规则：所有页面（落地页 / 客户端 / 后台）只用这里的变量和组件类。
   不要在页面里写死颜色和尺寸 —— 否则三端会越改越乱。

   命名：
     --c-*   颜色
     --s-*   间距（spacing）
     --r-*   圆角（radius）
     --f-*   字号（font）
     --z-*   层级
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 颜色 ── */
  --c-bg:         #08090d;
  --c-bg-2:       #0d0f15;
  --c-surface:    #12151c;
  --c-surface-2:  #171b24;
  --c-line:       rgba(255,255,255,.075);
  --c-line-2:     rgba(255,255,255,.13);

  --c-text:       #f4f6fa;
  --c-text-2:     #a8b0c0;
  --c-text-3:     #6b7382;

  --c-accent:     #6d6cff;
  --c-accent-2:   #8b5cf6;
  --c-blue:       #3b82f6;
  --c-good:       #34d399;
  --c-warn:       #fbbf24;
  --c-bad:        #f87171;

  /* ── 间距（4 的倍数，移动端友好）── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* ── 圆角 ── */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* ── 字号 ── */
  --f-1: 11px; --f-2: 12.5px; --f-3: 13.5px; --f-4: 15px;
  --f-5: 17px; --f-6: 20px;  --f-7: 26px;   --f-8: 34px; --f-9: 44px;

  /* ── 层级 ── */
  --z-base: 1; --z-sticky: 20; --z-nav: 60; --z-modal: 100; --z-toast: 200;

  /* ── 安全区（iPhone 刘海 / 底部横条）── */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* 底部导航高度（手机）*/
  --tabbar-h: 58px;
  /* 侧边栏宽度（桌面）*/
  --sidebar-w: 236px;
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: var(--f-4);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 全局：数字用等宽，避免跳动 */
.tabular { font-variant-numeric: tabular-nums; }
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* 移动端：禁止双击缩放带来的 300ms 延迟 */
button, a, [role="button"] { touch-action: manipulation; }

/* ══════════════════════════════════════════════════════════════════════════
   应用外壳
   ══════════════════════════════════════════════════════════════════════════
   手机：顶部栏 + 内容区 + 底部标签栏
   桌面：左侧边栏 + 内容区（顶部栏仍在，但不含底部标签栏）
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   ★ App 外壳：为什么不用 position: fixed 钉标签栏 ★
   ══════════════════════════════════════════════════════════════════════════

   fixed 有个大坑：
     只要【任何一个祖先】带了 transform / filter / backdrop-filter /
     will-change / contain，这个祖先就会变成 fixed 的"参照物"，
    元素不再相对视口定位 —— 结果就是跟着页面一起滚。

   所以改用最稳的做法：
     .app      = 正好一个视口高，overflow: hidden（页面本身【永不滚动】）
     .topbar   = flex 项，不滚
     .content  = flex:1 + overflow-y:auto（【只有这一块滚】）
     .tabbar   = flex 项，不滚

   好处：
     · 标签栏根本不参与滚动，和 fixed 的坑彻底无关
     · 手机上不会出现"滚到最底部时标签栏被地址栏遮住"
     · 内容滚到底不会有多余的橡皮筋回弹
   ══════════════════════════════════════════════════════════════════════════ */
.app {
  height: 100vh;
  height: 100dvh;                 /* dvh = 动态视口高，能正确扣掉手机地址栏 */
  overflow: hidden;               /* ★ 页面本身不滚 ★ */
  display: flex;
  flex-direction: column;
}
/* 老浏览器不认 dvh 时的兜底 */
@supports not (height: 100dvh) {
  .app { height: 100vh; }
}

/* ── 顶部栏 ── */
.topbar {
  /* ★ 不用 sticky 了 —— 它在滚动容器外面，本来就不会滚 ★ */
  position: relative; z-index: var(--z-sticky);
  flex-shrink: 0;
  display: flex; align-items: center; gap: var(--s-3);

  /* ══════════════════════════════════════════════════════════════════
     ★ iPhone 刘海/状态栏避让 —— 这里踩过坑，写清楚 ★
     ══════════════════════════════════════════════════════════════════

     错误写法（我第一版就是这个）：
         height: 56px;
         padding-top: var(--safe-top);      // iPhone 上 47px

       全局设了 box-sizing: border-box，
       所以 height 是【含 padding 的】总高度。
       → 47px 给了状态栏，只剩 9px 给内容
       → 文字被挤进状态栏里，看着就是"适配坏了"

     正确写法：
         min-height: calc(56px + var(--safe-top));
         padding-top: var(--safe-top);

       总高 = 56 + 47 = 103px，其中 47 给状态栏，
       内容区正好还有完整的 56px。
     ══════════════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════════
     ★ 高度算法和落地页顶栏保持一致 ★
     ══════════════════════════════════════════════════════════════════

     落地页（.nav）用的是：
         padding: calc(12px + safe-top) 26px 12px;
         → 高度由【内容撑开】，上下各留 12px

     我原来用的是 min-height: calc(48px + safe-top)，
     两种算法出来的高度和留白不一样，放一起看就不协调。

     现在统一成落地页那套：上下各 10px + 安全区，内容撑开。
     图标 22px + 上下各 10px ≈ 44px（比原来的 48px 更紧凑）。
     ══════════════════════════════════════════════════════════════════ */
  min-height: 0;
  padding: calc(10px + var(--safe-top)) max(var(--s-4), var(--safe-right)) 10px max(var(--s-4), var(--safe-left));

  /* ══════════════════════════════════════════════════════════════════
     ★ 为什么背景不直接画在 .topbar 上 ★
     ══════════════════════════════════════════════════════════════════

     如果直接给 .topbar 加背景，背景会连【状态栏那一片】一起盖住，
     手机上看起来就是顶部一个很厚的大色块，很不自然。

     原生 App 的做法是：
       状态栏区域【透明】（露出页面背景）
       只有内容那一条有毛玻璃和分隔线

     所以背景改画在 ::before 上，并且从 top: var(--safe-top) 开始。
     ══════════════════════════════════════════════════════════════════ */
  background: transparent;
  border-bottom: 0;
}
.topbar::before {
  content: '';
  position: absolute;
  /* 从安全区下方 10px 开始（也就是 padding-top 里的那 10px）*/
  top: calc(var(--safe-top) + 10px);
  left: 0; right: 0; bottom: 0;
  z-index: -1;
  background: rgba(8,9,13,.78);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--c-line);
}
.topbar__brand { display: flex; align-items: center; gap: var(--s-2); }
.topbar__brand img { width: 24px; height: 24px; display: block; }
.topbar__brand b { font-size: var(--f-3); font-weight: 700; letter-spacing: .1em; }
.topbar__spacer { flex: 1; }
.topbar__title { font-size: var(--f-5); font-weight: 650; }

/* ── 内容区 ── */
/* ── 主区容器 ──
   ★ 这个规则必须对【所有】屏幕生效，不能只写在桌面媒体查询里。
     手机上 .shell-main 是 .app 的 flex 子项，
     如果它没有 min-height:0，它的高度就会被内容撑开，
     里面的 .content 就永远滚不起来（表现是整页在滚，标签栏跟着跑）。
     这是 flex 布局最容易踩的坑：min-height 默认是 auto，不会收缩。 */
.shell-main {
  flex: 1;
  min-height: 0;              /* ★ 关键 */
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  min-height: 0;                  /* ★ 关键：不加这行，flex 子项不会收缩，滚不起来 */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */
  overscroll-behavior: contain;        /* 滚到底不要带着整页弹 */
  width: 100%;
  padding: var(--s-5) var(--s-4) var(--s-8);
}
/* 手机：顶部留 20px 就够，别把内容推太下 */
@media (max-width: 899px) {
  .content { padding-top: var(--s-5); }
}
@media (min-width: 900px) {
  .content { padding: var(--s-6) var(--s-7) var(--s-9); }
}

/* 内容区内部再套一层限宽（桌面上好看，手机上满宽）*/
.content > * { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ── 桌面侧边栏 ── */
.sidenav { display: none; }

@media (min-width: 900px) {
  .app { flex-direction: row; }
  .sidenav {
    display: flex; flex-direction: column;
    width: var(--sidebar-w); flex-shrink: 0;
    height: 100vh; position: sticky; top: 0;
    padding: var(--s-4) var(--s-3);
    background: var(--c-bg-2);
    border-right: 1px solid var(--c-line);
    overflow-y: auto;
  }
  .sidenav__brand {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-3) var(--s-5);
  }
  .sidenav__brand img { width: 26px; height: 26px; }
  .sidenav__brand b { font-size: var(--f-3); font-weight: 700; letter-spacing: .1em; }
  .sidenav__group { margin-top: var(--s-4); }
  .sidenav__label {
    font-size: var(--f-1); text-transform: uppercase; letter-spacing: .1em;
    color: var(--c-text-3); padding: var(--s-2) var(--s-3);
  }
  .sidenav a {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 9px var(--s-3); border-radius: var(--r-md);
    font-size: var(--f-3); color: var(--c-text-2);
    transition: background .15s, color .15s;
  }
  .sidenav a:hover { background: rgba(255,255,255,.045); color: var(--c-text); }
  .sidenav a.is-active { background: rgba(255,255,255,.085); color: var(--c-text); font-weight: 600; }
  .sidenav a .ico { width: 18px; text-align: center; opacity: .8; flex-shrink: 0; }

  .content > * { max-width: 860px; }
  .topbar {
    padding-left: var(--s-7);
    padding-right: var(--s-7);
    min-height: 64px;
  }
}

/* ── 底部标签栏（手机）── */
.tabbar {
  /* ★ 不再是 fixed，就是外壳的一个普通横向项 ★ */
  position: relative;
  z-index: var(--z-nav);
  flex-shrink: 0;                       /* 不许被内容挤扁 */
  display: flex;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  /* ★ 背景做得很实（.94），模糊只留 12px ★
     原来用 .9 透明度 + 22px 模糊，等于让 GPU 每帧重算一大片。
     手机上门面最贵的就是 backdrop-filter —— 少糊一点，滑动立刻跟手。 */
  background: rgba(10,11,16,.94);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border-top: 1px solid var(--c-line);
  /* 触控优化：交给浏览器做快速点击，不要等 300ms 判断双击缩放 */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  /* 说明：这里【故意】不用 will-change 和 contain，
     它们会让元素成为后代的包含块，也会影响内部 fixed 元素的行为。
     标签栏本身已经不动了，不需要提前建合成层。 */
}
@media (min-width: 900px) { .tabbar { display: none; } }

.tabbar a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 10.5px; color: var(--c-text-3);
  transition: color .15s;
}
.tabbar a .ico { font-size: 19px; line-height: 1; }
.tabbar a.is-active { color: var(--c-text); font-weight: 600; }
.tabbar a.is-active .ico { color: var(--c-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   组件
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 页头 ── */
.page-head { margin-bottom: var(--s-5); }
.page-head h1 { font-size: var(--f-7); font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
.page-head p { margin: 0; color: var(--c-text-2); font-size: var(--f-3); }

/* ── 卡片 ── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.card + .card { margin-top: var(--s-4); }
.card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.card__head h2 { font-size: var(--f-5); font-weight: 650; margin: 0; }

/* ── 网格 ── */
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
@media (max-width: 620px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ── 按钮 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 42px; padding: 0 var(--s-5);
  border: 1px solid transparent; border-radius: var(--r-full);
  font-size: var(--f-3); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: transform .12s, background .15s, border-color .15s, opacity .15s;
}
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: #fff; color: #0a0b11; }
.btn-primary:hover:not(:disabled) { background: #eef0f5; }
.btn-ghost { background: rgba(255,255,255,.06); border-color: var(--c-line-2); color: var(--c-text); }
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.btn-danger { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.3); color: #fca5a5; }
.btn-block { width: 100%; }
.btn-sm { min-height: 34px; padding: 0 var(--s-4); font-size: var(--f-2); }
.btn-lg { min-height: 50px; padding: 0 var(--s-7); font-size: var(--f-4); }

/* 手机上按钮更容易点 */
@media (max-width: 620px) {
  .btn { min-height: 46px; }
  .btn-sm { min-height: 36px; }
}

/* ── 表单 ── */
.field { margin-bottom: var(--s-4); }
.field > label, .field > span.lbl {
  display: block; margin-bottom: 6px;
  font-size: var(--f-2); color: var(--c-text-2); font-weight: 500;
}
.inp, input.inp, select.inp, textarea.inp {
  width: 100%; min-height: 46px; padding: 11px var(--s-4);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  font-size: var(--f-4);
  outline: none;
  transition: border-color .15s, background .15s;
  /* 手机：字号 <16px 会触发 iOS 自动放大 */
}
@media (max-width: 899px) { .inp, input.inp, select.inp, textarea.inp { font-size: 16px; } }
.inp:focus { border-color: rgba(109,108,255,.6); background: rgba(255,255,255,.06); }
.inp::placeholder { color: var(--c-text-3); }

/* ── 徽标 / 状态 ── */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-full);
  font-size: var(--f-1); font-weight: 600;
  background: rgba(255,255,255,.07); color: var(--c-text-2);
  white-space: nowrap;
}
.chip.good { background: rgba(52,211,153,.14); color: #6ee7b7; }
.chip.warn { background: rgba(251,191,36,.14); color: #fcd34d; }
.chip.bad  { background: rgba(248,113,113,.14); color: #fca5a5; }

/* ── 表格：桌面用表格，手机自动变卡片 ── */
.table { width: 100%; border-collapse: collapse; font-size: var(--f-3); }
.table th {
  text-align: left; padding: var(--s-3) var(--s-3);
  font-size: var(--f-1); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-text-3);
  border-bottom: 1px solid var(--c-line);
}
.table td { padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }

@media (max-width: 760px) {
  /* 手机上表格变成"每行一张卡" */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr {
    background: var(--c-surface-2);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
  }
  .table td { border: 0; padding: 4px 0; }
  .table td:before {
    content: attr(data-label);
    display: inline-block; min-width: 84px;
    font-size: var(--f-1); text-transform: uppercase; letter-spacing: .07em;
    color: var(--c-text-3);
  }
}

/* ── 列表行 ── */
.row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-line);
}
.row:last-child { border-bottom: 0; }
.row__main { flex: 1; min-width: 0; }
.row__title { font-size: var(--f-4); font-weight: 550; }
.row__sub { font-size: var(--f-2); color: var(--c-text-3); margin-top: 2px; }
.row__amt { font-size: var(--f-4); font-weight: 600; white-space: nowrap; }
.row__amt.in  { color: var(--c-good); }
.row__amt.out { color: var(--c-text); }

/* ── 空状态 ── */
.empty {
  padding: var(--s-7) var(--s-4); text-align: center;
  color: var(--c-text-3); font-size: var(--f-3);
}

/* ── 提示条 ── */
.note {
  padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--f-2); color: var(--c-text-2); line-height: 1.65;
}
.note.warn { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.22); color: #fcd34d; }
.note.good { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.22); color: #6ee7b7; }
.hint { font-size: var(--f-2); color: var(--c-text-3); line-height: 1.6; }

/* ── 余额大字 ── */
.balance { font-size: var(--f-8); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .balance { font-size: var(--f-9); } }

/* ── 工具类 ── */
.stack > * + * { margin-top: var(--s-4); }
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); }
.flex { display: flex; } .flex-1 { flex: 1; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.muted { color: var(--c-text-2); } .dim { color: var(--c-text-3); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   外壳的响应式细节
   ══════════════════════════════════════════════════════════════════════════ */

/* 桌面：侧边栏已经有用户信息了，顶部栏不再重复显示头像和品牌 */
@media (min-width: 900px) {
  .topbar__brand { display: none !important; }
  .topbar .avatar { display: none !important; }
}
/* 手机：显示品牌和头像 */
@media (max-width: 899px) {
  .topbar .avatar { display: flex !important; }
}

/* 语言切换器在顶部栏里要紧凑一点 */
.topbar .lang-switch { display: flex; gap: 2px; }
.topbar .lang-switch button {
  min-width: 34px; height: 28px; padding: 0 7px;
  border: 1px solid transparent; border-radius: var(--r-full);
  background: transparent; color: var(--c-text-3);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.topbar .lang-switch button:hover { color: var(--c-text-2); }
.topbar .lang-switch button.is-active {
  background: rgba(255,255,255,.09); color: var(--c-text);
}

/* 沙盒提示条（只在沙盒模式显示）*/
.testmode {
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: rgba(251,191,36,.09);
  border: 1px solid rgba(251,191,36,.25);
  font-size: var(--f-2); color: #fcd34d; line-height: 1.6;
}
.testmode b { display: block; margin-bottom: 2px; }

/* Toast 在手机上要避开底部标签栏 */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-bottom) + var(--s-6));
  z-index: var(--z-toast);
  max-width: min(92vw, 420px);
  padding: 12px var(--s-5); border-radius: var(--r-full);
  background: rgba(24,27,36,.97); border: 1px solid var(--c-line-2);
  color: var(--c-text); font-size: var(--f-3); font-weight: 500;
  box-shadow: 0 10px 34px -8px rgba(0,0,0,.7);
  text-align: center;
}
@media (max-width: 899px) {
  .toast { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-4)); }
}

/* 旧版样式兼容：style.css 里的 .panel 视觉上等同 .card */
.panel { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-5); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.panel-head h2 { font-size: var(--f-5); font-weight: 650; margin: 0; }

/* 旧版 .kv 键值表也要跟上新颜色 */
.kv-row { display: flex; justify-content: space-between; gap: var(--s-4); padding: 9px 0; border-bottom: 1px solid var(--c-line); font-size: var(--f-3); }
.kv-row:last-child { border-bottom: 0; }
.kv-row > span:first-child { color: var(--c-text-2); }
.kv-row > b { font-weight: 600; text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════
   首页（Dashboard）
   ══════════════════════════════════════════════════════════════════════════ */
.home { display: flex; flex-direction: column; gap: var(--s-5); }

/* ── 问候 ── */
.greet { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.greet__hi { font-size: var(--f-2); color: var(--c-text-3); }
.greet__name { font-size: var(--f-6); font-weight: 700; letter-spacing: -.01em; margin-top: 1px; }

/* ── 余额主视觉 ──
   这是整页最重要的东西：数字要最大、最亮、最好读 */
.hero {
  position: relative;
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(109,108,255,.18), transparent 60%),
    radial-gradient(110% 120% at 100% 100%, rgba(59,130,246,.14), transparent 58%),
    var(--c-surface);
  border: 1px solid var(--c-line-2);
  overflow: hidden;
}
.hero__label { font-size: var(--f-2); color: var(--c-text-2); margin-bottom: var(--s-2); }
.hero__amount { margin: 0; line-height: 1.05; }
.hero__meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-4);
  font-size: var(--f-2); color: var(--c-text-3);
}
.hero__meta b { color: var(--c-text-2); font-weight: 600; }

/* ── 快捷操作圆钮 ── */
.quick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2);
}
.quick__item {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: var(--s-3) var(--s-1);
  border-radius: var(--r-lg);
  transition: background .15s;
}
.quick__item:active { background: rgba(255,255,255,.05); }
.quick__ico {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--c-line-2);
}
.quick__item:hover .quick__ico { background: rgba(255,255,255,.11); }
.quick__lbl { font-size: 11.5px; color: var(--c-text-2); }

/* ── 区块 ── */
.block {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.block__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.block__head h2 { font-size: var(--f-5); font-weight: 650; margin: 0; }
.link { font-size: var(--f-2); color: var(--c-accent); }

/* ── 空卡片引导 ── */
.cta { text-align: center; padding: var(--s-5) var(--s-3) var(--s-3); }
.cta__ico {
  width: 56px; height: 56px; margin: 0 auto var(--s-3);
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--c-text-3);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--c-line);
}
.cta__t { font-size: var(--f-4); font-weight: 600; margin-bottom: 4px; }
.cta__d { font-size: var(--f-2); color: var(--c-text-3); margin-bottom: var(--s-4); }

/* ── 交易行 ── */
.rows { display: flex; flex-direction: column; }
.tx-ico {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.tx-ico.in  { background: rgba(52,211,153,.13); color: #6ee7b7; }
.tx-ico.out { background: rgba(255,255,255,.06); color: var(--c-text-2); }

/* ══════════════════════════════════════════════════════════════════════════
   底部标签栏 —— SVG 图标 + 滑动玻璃指示器
   ══════════════════════════════════════════════════════════════════════════ */

.tabbar { position: relative; }

/* 每个标签 */
.tabbar a {
  position: relative;
  z-index: 2;                    /* 浮在指示器之上 */
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  color: var(--c-text-3);
  transition: color .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.tabbar a .tab-ico {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 26px;
  /* ★ 弹起用弹性曲线，但【按下】必须零延迟 ★
     两者分开写：松开时慢慢弹回，按下去立刻缩小。 */
  transition: transform .22s cubic-bezier(.22, 1.2, .36, 1);
}
.tabbar a .tab-ico svg { width: 22px; height: 22px; display: block; }
.tabbar a .tab-lbl {
  font-size: 10.5px; font-weight: 500; letter-spacing: .01em;
  transition: font-weight .2s, opacity .2s;
}

/* 当前标签 */
.tabbar a.is-active { color: var(--c-text); }
.tabbar a.is-active .tab-lbl { font-weight: 650; }
/* 图标轻微"弹起"，配合指示器的滑入 */
.tabbar a.is-active .tab-ico { transform: translateY(-1px) scale(1.06); }

/* ★ 按下反馈：立刻生效，不要过渡 ★
   过渡会让"按下"和"看到反应"之间隔 0.2 秒，
   主观感受就是"点了没反应"。 */
.tabbar a:active .tab-ico {
  transform: scale(.88);
  transition: transform .04s linear;
}
/* 手指还按着的时候整块也亮一点，给更明确的反馈 */
.tabbar a:active { background: rgba(255,255,255,.045); }

/* ── 滑动指示器 ──
   一个液态玻璃药丸。位置由 JS 用 transform: translateX() 设置。 */
.tabbar__ind {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 0;
  width: 46px; height: 32px;
  border-radius: 13px;
  pointer-events: none;
  opacity: 0;
  /* 弹性曲线：稍微冲过头再回来，像液体 */
  /* ★ 0.46s → 0.30s ★
     原来快半秒，手指都松开了它还在滑，主观感受就是"迟钝"。
     0.3s 是"看得见滑动"和"跟得上手指"的平衡点。 */
  transition:
    transform .30s cubic-bezier(.2, .9, .28, 1),
    opacity .18s ease;

  /* ★ 不再用 backdrop-filter ★
     指示器每秒都在动，如果它自己也带模糊，
     每一帧都要重新采样背后的内容 —— 这就是"划不动"的根源。
     改成实色 + 内高光 + 外阴影，视觉几乎一样，但帧率翻倍。 */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.135) 0%,
    rgba(255,255,255,.075) 100%
  );
  border: 1px solid rgba(255,255,255,.17);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 6px 18px -7px rgba(0,0,0,.68);
  /* 提前告诉浏览器这一层要动，让它建立合成层 */
  will-change: transform;
  backface-visibility: hidden;
}
/* 指示器顶部再压一条细高光，做出"玻璃厚度" */
.tabbar__ind::before {
  content: '';
  position: absolute; left: 22%; right: 22%; top: 1px; height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.tabbar__ind.is-ready { opacity: 1; }

/* 首次渲染时不要动画（否则会从最左边滑过来）*/
.tabbar__ind.no-anim { transition: none !important; }

/* 减少动态效果：直接跳，不滑 */
@media (prefers-reduced-motion: reduce) {
  .tabbar__ind { transition: opacity .15s ease; }
  .tabbar a .tab-ico { transition: none; }
}

/* 低端设备 / 省电模式：直接跳，不做滑动动画 */
html[data-lg-off] .tabbar__ind { transition: opacity .12s ease; }


/* ══════════════════════════════════════════════════════════════════════════
   防止整页滚动
   ══════════════════════════════════════════════════════════════════════════
   .app 已经固定一屏高，理论上 body 不会滚。
   但 iOS Safari 在弹出键盘或惯性滚动时仍可能带动 body。
   这里再锁一道，让滚动只发生在 .content 里。
   ══════════════════════════════════════════════════════════════════════════ */
body { overflow: hidden; overscroll-behavior: none; }
html { overscroll-behavior: none; }

/* 弹窗打开时锁住背景滚动 */
body.modal-open .content { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════════
   SVG 图标
   ══════════════════════════════════════════════════════════════════════════ */
.ic {
  display: block;
  flex-shrink: 0;
  /* 跟着父元素文字颜色走 */
  color: inherit;
}

/* 交易行的圆形图标 */
.tx-ico .ic { width: 17px; height: 17px; }

/* 快捷操作圆钮里的图标 */
.quick__ico .ic { width: 21px; height: 21px; }

/* 充值方式卡片里的图标 */
.m-ico {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--c-line);
  margin-bottom: 8px;
}
.m-ico .ic { width: 20px; height: 20px; }

/* ══════════════════════════════════════════════════════════════════════════
   ★ 性能：砍掉不必要的 backdrop-filter ★
   ══════════════════════════════════════════════════════════════════════════

   问题：
     style.css（旧的落地页样式）里有 20 处 backdrop-filter，
     其中一些被应用内一直在用的元素继承到了，比如 .btn-ghost、.card-visual。

     滚动的时候，每一个 backdrop-filter 元素都要【每帧重新采样背后的画面】，
     再跑一遍高斯模糊。20 个元素一起滚 = 手机直接掉到 20 帧。

   关键认知：
     backdrop-filter 只有在"背后是内容、需要透出模糊"时才有意义。
     应用内的面板背景本来就是不透明的纯色（--c-surface），
     模糊它【什么都看不见】，纯粹白烧 GPU。

   所以：
     · 应用内的面板 / 按钮 / 卡片 → 全部去掉
     · 只保留顶部栏和底部标签栏（它们背后是真的内容）
   ══════════════════════════════════════════════════════════════════════════ */

/* 应用内这些元素背后是纯色，模糊无意义 → 直接关掉 */
.btn-ghost,
.card-visual,
.pill,
.pillar,
.coverage-stats > div,
.float-chip,
.install-tip {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* .btn-ghost 去掉模糊后要补一点实色，否则会变透明 */
.btn-ghost {
  background: rgba(255,255,255,.075);
}

/* 弹窗背景仍然要模糊（它盖在整页内容上），但只留一层、强度调低 */
.modal-backdrop {
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}
.modal::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* 下拉语言切换器：小元素，去掉也无所谓 */
.lang-switch { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Toast 只在出现时算一次，保留模糊没问题 */

/* ══════════════════════════════════════════════════════════════════════════
   低端设备 / 省电模式：关掉全部模糊
   ══════════════════════════════════════════════════════════════════════════
   .tabbar 和 .topbar 的模糊加起来也要几十毫秒一帧，
   4 核以下或开了省电的手机直接放弃这点视觉效果，换流畅。
   由 app.js 检测到之后给 <html> 加 data-lg-off。
   ══════════════════════════════════════════════════════════════════════════ */
html[data-lg-off] .tabbar,
html[data-lg-off] .topbar,
html[data-lg-off] .modal-backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(10,11,16,.985);
}

/* ══════════════════════════════════════════════════════════════════════════
   页面滑动切换（Revolut 风格）
   ══════════════════════════════════════════════════════════════════════════

   结构（只在切换的那 380 毫秒里存在）：
     #views
       ├── .page-exit    旧页面，绝对定位，往反方向滑出
       └── .page-enter   新页面，正常流，从侧边滑入

   ★ 只动 transform 和 opacity ★
     这两个属性走 GPU 合成，不触发重排（reflow）。
     如果去动 left / width / margin，浏览器每一帧都要重新算布局，
     手机上立刻掉到十几帧。
   ══════════════════════════════════════════════════════════════════════════ */

#views { position: relative; }

.page-enter,
.page-exit {
  transition:
    transform .34s cubic-bezier(.2, .9, .28, 1),
    opacity   .30s ease;
  will-change: transform, opacity;   /* 提前建合成层，避免动画开始时闪一下 */
}

/* 旧页面：脱离文档流，盖在上层，滑走 */
.page-exit {
  position: absolute;
  top: 0; left: 0; right: 0;
  pointer-events: none;              /* 滑出去的页面不该还能点 */
  z-index: 2;
}

/* 新页面：正常流，在最上层滑入 */
.page-enter {
  position: relative;
  z-index: 3;
}

/* ══════════════════════════════════════════════════════════════════════════
   底部抽屉（Revolut 风格）
   ══════════════════════════════════════════════════════════════════════════
   手机：从底部滑上来的圆角抽屉
   桌面：居中卡片（宽屏上从底部弹会很怪）
   ══════════════════════════════════════════════════════════════════════════ */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .22s ease;
  overscroll-behavior: contain;
}
.sheet-backdrop.is-open { opacity: 1; }
.sheet-backdrop.is-closing { opacity: 0; }

.sheet {
  width: 100%; max-width: 520px;
  background: var(--c-surface);
  border: 1px solid var(--c-line-2);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--s-2) var(--s-5) calc(var(--s-5) + var(--safe-bottom));
  transform: translateY(100%);
  transition: transform .30s cubic-bezier(.2, .9, .28, 1);
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet-backdrop.is-open .sheet { transform: translateY(0); }

.sheet__grip {
  width: 38px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.2);
  margin: var(--s-2) auto var(--s-4);
}
.sheet__title { font-size: var(--f-6); font-weight: 700; margin: 0 0 var(--s-3); letter-spacing: -.01em; }
.sheet__body { font-size: var(--f-4); color: var(--c-text); }
.sheet__actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); }

/* 桌面：居中卡片，从下方轻微上浮 */
@media (min-width: 900px) {
  .sheet-backdrop { align-items: center; padding: var(--s-5); }
  .sheet {
    border-radius: var(--r-xl);
    border-bottom: 1px solid var(--c-line-2);
    padding: var(--s-4) var(--s-6) var(--s-6);
    transform: translateY(16px) scale(.98);
    opacity: 0;
    transition: transform .26s cubic-bezier(.2,.9,.28,1), opacity .2s ease;
    max-height: 84vh;
  }
  .sheet-backdrop.is-open .sheet { transform: translateY(0) scale(1); opacity: 1; }
  .sheet__grip { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   卡号展示框
   ══════════════════════════════════════════════════════════════════════════ */
.pan-box {
  position: relative;
  padding: var(--s-5) var(--s-4) var(--s-4);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(109,108,255,.14), rgba(59,130,246,.09));
  border: 1px solid var(--c-line-2);
  overflow: hidden;
}
.pan-line {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  cursor: pointer; padding: var(--s-2) 0 var(--s-4);
}
.pan-num {
  font-size: clamp(17px, 5.2vw, 23px);
  font-weight: 600; letter-spacing: .1em;
  color: #fff; white-space: nowrap;
}
.pan-copy { color: var(--c-text-3); }
.pan-box [data-copy]:hover .pan-copy { color: var(--c-accent); }
.pan-meta {
  display: flex; justify-content: center; gap: var(--s-8);
  padding-top: var(--s-3); border-top: 1px solid var(--c-line);
}
.pan-meta .lbl {
  display: block; font-size: var(--f-1); text-transform: uppercase;
  letter-spacing: .09em; color: var(--c-text-3); margin-bottom: 3px;
}
.pan-meta b { font-size: var(--f-4); cursor: pointer; }
.pan-timer {
  position: absolute; top: var(--s-3); right: var(--s-4);
  font-size: var(--f-1); color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.pan-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255,255,255,.06);
}
.pan-bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-blue));
  transition: width 1s linear;
}

/* ══════════════════════════════════════════════════════════════════════════
   旧表格 .tbl 升级成新设计
   ══════════════════════════════════════════════════════════════════════════
   记录页/充值页/提现页用的是旧的 .tbl 类。
   这里把它拉到和新 .table 一样的视觉，并让它在手机上变成卡片式。
   ══════════════════════════════════════════════════════════════════════════ */
.tbl {
  width: 100%; border-collapse: collapse;
  font-size: var(--f-3);
  font-variant-numeric: tabular-nums;
}
.tbl th {
  text-align: left; padding: var(--s-3);
  font-size: var(--f-1); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-text-3);
  border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
.tbl td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num, .tbl th.num { text-align: right; white-space: nowrap; }
.tbl .mono { font-size: var(--f-2); }
.tbl tbody tr:hover { background: rgba(255,255,255,.02); }

/* ── 手机：表格变卡片 ── */
@media (max-width: 760px) {
  .tbl { display: block; }
  .tbl thead { display: none; }
  .tbl tbody { display: block; }
  .tbl tr {
    display: block;
    background: var(--c-surface-2);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
  }
  .tbl tr:last-child { margin-bottom: 0; }
  .tbl td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-4);
    padding: 5px 0;
    border: 0;
    text-align: right;
  }
  .tbl td:before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: var(--f-1); text-transform: uppercase; letter-spacing: .07em;
    color: var(--c-text-3);
    text-align: left;
  }
  /* 金额那行加粗一点，一眼能看到 */
  .tbl td.num { font-weight: 650; font-size: var(--f-4); }
}

/* ══════════════════════════════════════════════════════════════════════════
   设置页的面板
   ══════════════════════════════════════════════════════════════════════════ */
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.panel + .panel, .grid + .grid { margin-top: var(--s-4); }
.panel-head h2, .panel h2 {
  font-size: var(--f-5); font-weight: 650;
  margin: 0; letter-spacing: -.01em;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line);
}
.grid.grid-2 { gap: var(--s-4); }

/* 设置页的字段间距 */
.panel .field:last-child { margin-bottom: 0; }
.panel .actions { margin-top: var(--s-4); }

/* 键值行 */
.kv { display: flex; flex-direction: column; }
.kv-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--f-3);
}
.kv-row:last-child { border-bottom: 0; }
.kv-row > span:first-child { color: var(--c-text-2); flex-shrink: 0; }
.kv-row > b { font-weight: 600; text-align: right; word-break: break-all; }

/* 危险区（销户按钮那块）面板给个红色调 */
.panel:has(#btn-close-account) { border-color: rgba(248,113,113,.22); }

/* 说明文字块 */
.instructions {
  background: rgba(255,255,255,.035);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin: var(--s-4) 0;
}
.instructions h4 {
  margin: 0 0 var(--s-3); font-size: var(--f-3); font-weight: 600;
  color: var(--c-text-2); text-transform: uppercase; letter-spacing: .07em;
}

/* ══════════════════════════════════════════════════════════════════════════
   记录页顶部的统计卡
   ══════════════════════════════════════════════════════════════════════════
   原来是三个独立面板竖着排，手机上要滑很久才看到明细。
   改成一行三个紧凑卡（手机上也不换行），一眼看全。
   ══════════════════════════════════════════════════════════════════════════ */
.grid-2:has(.balance) {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--s-2) !important;
}
.grid-2:has(.balance) .panel {
  padding: var(--s-4) var(--s-3);
  text-align: center;
}
.grid-2:has(.balance) .panel-head {
  justify-content: center;
  border-bottom: 0;
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
}
.grid-2:has(.balance) .panel-head h2 {
  font-size: var(--f-1);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-text-3);
  font-weight: 600;
  text-align: center;
}
.grid-2:has(.balance) .balance { font-size: var(--f-6) !important; }
@media (max-width: 420px) {
  .grid-2:has(.balance) .balance { font-size: var(--f-5) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   管理后台专属
   ══════════════════════════════════════════════════════════════════════════ */

/* 后台表格和小控件沿用客户端的响应式规则；
   后台独有的类在这里补齐视觉 */
.modebar { font-size: var(--f-1); }
#modebar.chip { height: 26px; padding: 0 11px; }

/* 后台的搜索栏 */
.search-bar {
  display: flex; gap: var(--s-2); margin-bottom: var(--s-4);
}
.search-bar .inp { flex: 1; }

/* 后台的操作按钮组 */
.actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.actions .btn { flex: 0 0 auto; }
@media (max-width: 620px) {
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
}

/* 后台的详情面板（右侧滑出那种） */
.detail-panel {
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-top: var(--s-4);
}
.detail-panel h3 {
  font-size: var(--f-5); font-weight: 650;
  margin: 0 0 var(--s-3); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}

/* 后台的数字列右对齐 */
.tbl td.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 锁屏 */
.center-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 52vh; text-align: center; gap: var(--s-4);
}
.center-screen h1 { font-size: var(--f-7); font-weight: 700; margin: 0; }
.center-screen .inp { max-width: 260px; text-align: center; }

/* 后台的键值展示（客户详情用的） */
.kv { display: flex; flex-direction: column; }
.kv-row > span:first-child { min-width: 110px; }

/* 内容行的编辑框（网站文案页）*/
.content-row { display: flex; flex-direction: column; gap: 6px; }
.content-row .lbl { font-size: var(--f-1); color: var(--c-text-3); text-transform: uppercase; letter-spacing: .07em; }

/* ══════════════════════════════════════════════════════════════════════════
   落地页打磨
   ══════════════════════════════════════════════════════════════════════════
   落地页的 HTML 不动，只把视觉拉到新的设计系统上：
   字号层级、间距节奏、卡片质感、按钮和移动端排版。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 通用容器 ── */
.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5);
}
@media (max-width: 760px) { .section { padding: var(--s-7) var(--s-4); } }

/* ── 标题层级 ── */
.section-title {
  font-size: clamp(26px, 4.4vw, 40px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.16;
  margin: 0 0 var(--s-3);
}
.section-sub {
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.7;
  color: var(--c-text-2);
  max-width: 62ch;
  margin: 0 0 var(--s-6);
}

/* ── 首屏 ── */
.hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(48px, 9vw, 104px) var(--s-5) clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.06;
  margin: 0 0 var(--s-4);
}
.hero-copy p {
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.65;
  color: var(--c-text-2);
  max-width: 46ch;
  margin: 0 0 var(--s-6);
}
.hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* 首屏的卖点列表 */
.hero-points {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6); padding: 0; list-style: none;
}
.hero-points li {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--f-3); color: var(--c-text-2);
}
.hero-points li::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}

/* 首屏图形 */
.hero-art { display: flex; justify-content: center; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: var(--s-7); }
  .hero-art { order: -1; }
}

/* ── 卡片区块（pillars / steps / coverage）── */
.pillars, .steps, .coverage-stats {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.pillar, .step, .coverage-stats > div {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: border-color .18s, transform .18s;
}
.pillar:hover, .coverage-stats > div:hover {
  border-color: var(--c-line-2);
  transform: translateY(-2px);
}
.pillar h3, .step h3 {
  font-size: var(--f-5); font-weight: 650;
  margin: 0 0 var(--s-2); letter-spacing: -.01em;
}
.pillar p, .step p {
  font-size: var(--f-3); line-height: 1.7;
  color: var(--c-text-2); margin: 0;
}

/* 步骤序号 */
.step { position: relative; padding-left: var(--s-6); }
.step::before {
  content: attr(data-step);
  position: absolute; left: var(--s-5); top: var(--s-5);
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(109,108,255,.18);
  color: #b9b8ff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ── 页脚 ── */
.footer {
  border-top: 1px solid var(--c-line);
  margin-top: var(--s-8);
  padding: var(--s-7) var(--s-5) var(--s-8);
}
.footer-top { max-width: 1120px; margin: 0 auto var(--s-6); }
.footer-cols {
  max-width: 1120px; margin: 0 auto;
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.footer-cols h4 {
  font-size: var(--f-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--c-text-3); margin: 0 0 var(--s-3);
}
.footer-cols a {
  display: block; padding: 5px 0;
  font-size: var(--f-3); color: var(--c-text-2);
  transition: color .15s;
}
.footer-cols a:hover { color: var(--c-text); }
.footer-copy, .footer-note {
  max-width: 1120px; margin: var(--s-6) auto 0;
  font-size: var(--f-2); line-height: 1.75; color: var(--c-text-3);
}
.footer-hint {
  max-width: 1120px; margin: var(--s-4) auto 0;
  font-size: var(--f-1); color: #4d5462;
}

/* ── 悬浮安装提示（PWA）── */
.install-tip {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line-2) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 16px 48px -12px rgba(0,0,0,.7) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ★ Liquid Glass（参考 freetodo/monitor-theme-liquid-glass）★
   ══════════════════════════════════════════════════════════════════════════

   那套主题的做法拆开看：

     ① 背景不是纯色，是【3 个固定的径向渐变光球】
        靛蓝在左上、紫色在右上、蓝色在中下
        透明度只有 0.05~0.08 —— 很淡，但让黑背景"活"了起来
        background-attachment: fixed 保证滚动时光球不动

     ② 玻璃表面 = 模糊 + 饱和度提升
        blur(28px) saturate(190%)
        ★ saturate 是关键 ★ 它让透过玻璃的颜色变浓，
        才像真玻璃而不是灰蒙蒙的磨砂塑料

     ③ 内高光 + 1px 白边
        inset 0 1px 1px rgba(255,255,255,.2)
        模拟玻璃棱边把光聚集起来

     ④ ★ 跟随鼠标的光泽 ★
        radial-gradient(350px circle at var(--sheen-x) var(--sheen-y), ...)
        鼠标移到哪，光泽移到哪 —— 这是"液体"感的来源

     ⑤ 苹果的招牌缓动曲线
        cubic-bezier(0.32, 0.72, 0, 1)
        起步快、收尾极慢，像真实的物理减速

   ★ 性能注意 ★
     这套效果我不给所有元素用。只给：
       页面背景（不耗性能，纯渐变）
       主视觉卡片（hero / 大卡）
       底部抽屉
     按钮、列表项、表格这些"多而小"的元素保持纯色 ——
     否则又会回到之前 20 层 backdrop-filter 掉帧的老问题。
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* 苹果的招牌缓动：起步快、收尾极慢 */
  --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);

  /* 玻璃参数（集中在这里，方便一处调全站） */
  --lg-blur: 28px;
  --lg-saturate: 190%;
  --lg-bg:        rgba(255, 255, 255, .055);
  --lg-bg-hover:  rgba(255, 255, 255, .085);
  --lg-border:    rgba(255, 255, 255, .115);
  --lg-border-hi: rgba(255, 255, 255, .22);
  --lg-highlight: inset 0 1px 1px rgba(255, 255, 255, .18);
  --lg-shadow:    0 16px 48px -12px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3);
}

/* ── ① 背景光球 ──
   ★ 数值直接对齐线上那套主题 ★
     基色 #111318（不是纯黑，带一点蓝灰）
     3 个光球的透明度和位置完全一致
     0x14 = 20/255 ≈ 0.078，0x0f ≈ 0.059，0x0d ≈ 0.051
     这么淡是有道理的：光球是"环境光"，不是装饰图案。
     浓了就抢主体内容的注意力。 */
body {
  background-color: #111318;
  background-image:
    radial-gradient(at 20% 20%, rgba(99, 102, 241, .078) 0px, transparent 50%),
    radial-gradient(at 80% 15%, rgba(168, 85, 247, .059) 0px, transparent 50%),
    radial-gradient(at 50% 60%, rgba(37, 99, 235, .051) 0px, transparent 60%);
  background-size: cover;
  background-attachment: fixed;   /* ★ 滚动时光球不动，像"远处的光" */
}

/* ── ② 玻璃表面 ── */
.glass {
  position: relative;
  background: var(--lg-bg);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-shadow), var(--lg-highlight);
  transition: background .3s var(--ease-apple),
              border-color .3s var(--ease-apple),
              transform .3s var(--ease-apple),
              box-shadow .3s var(--ease-apple);
}
.glass:hover { border-color: var(--lg-border-hi); background: var(--lg-bg-hover); }

/* 透明版：只要玻璃的边框和模糊，不要底色（适合放列表、小面板）*/
.glass-clear {
  background: transparent;
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255,255,255,.075);
  box-shadow: none;
}

/* ── ③ 跟随鼠标的光泽 ──
   靠 JS 更新 --sheen-x / --sheen-y，CSS 只负责画。
   这样每帧只改两个 CSS 变量，不触发重排。 */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    350px circle at var(--sheen-x, 50%) var(--sheen-y, 50%),
    rgba(255, 255, 255, .22),      /* #ffffff38 */
    transparent 60%
  );
  opacity: var(--sheen-opacity, 0);
  transition: opacity .4s;
}

/* ── ④ 药丸按钮（玻璃质感）── */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 var(--s-4);
  border-radius: var(--r-full);
  font-size: var(--f-2); font-weight: 550;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  cursor: pointer;
  transition: all .2s var(--ease-apple);
}
.pill:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.17); }
.pill:active { transform: scale(.96); }
.pill.is-on {
  background: #2563eb; color: #fff; border-color: #3b82f6;
  box-shadow: 0 4px 14px rgba(37,99,235,.35), inset 0 1px 1px rgba(255,255,255,.3);
}

/* ── ⑤ 把新曲线应用到已有组件 ── */
.btn, .tabbar__ind, .sheet, .sheet-backdrop, .quick__ico, .card-visual {
  transition-timing-function: var(--ease-apple);
}
.quick__item:active .quick__ico { transform: scale(.92); }
.btn:active { transform: scale(.96); }
.card-visual { transition: transform .35s var(--ease-apple), box-shadow .35s var(--ease-apple); }
.card-visual:hover { transform: translateY(-3px) scale(1.012); }

/* ── ⑥ 主视觉卡片用玻璃（页面上最显眼的几块）── */
.hero.glass {
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(109,108,255,.16), transparent 58%),
    radial-gradient(110% 120% at 100% 100%, rgba(59,130,246,.12), transparent 56%),
    rgba(255,255,255,.045);
}

/* ── ⑦ 低端设备：全部降级成纯色 ── */
html[data-lg-off] .glass,
html[data-lg-off] .glass-clear {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(20,23,31,.92) !important;
}
html[data-lg-off] .sheen::after { display: none; }

/* ── ⑧ 减少动态效果 ── */
@media (prefers-reduced-motion: reduce) {
  .glass, .pill, .btn, .card-visual { transition: none; }
  .sheen::after { transition: none; }
}

/* ── ⑨ 卡片入场动画（对齐线上那套）──
   从下方 12px 处淡入上移。用在页面切换后新出现的卡片上，
   让内容"落下来"而不是"啪"地出现。 */
@keyframes card-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.card-in {
  animation: .35s cubic-bezier(.32, .72, 0, 1) card-in;
}
html[data-lg-off] .card-in { animation: none; }
@media (prefers-reduced-motion: reduce) { .card-in { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   手机端顶部间距微调
   ══════════════════════════════════════════════════════════════════════════
   顶部栏本身已经算了安全区（刘海/状态栏）。
   这里再把栏内的元素高度压一压，让首屏能多露出一部分内容。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .topbar__brand img { width: 22px; height: 22px; }
  .topbar__brand b { font-size: 12.5px; }
  .topbar .avatar { width: 28px !important; height: 28px !important; }
  .topbar .lang-switch button { height: 26px; min-width: 32px; font-size: 11px; }

  /* 首屏问候语和余额卡之间的间距收一点 */
  .home { gap: var(--s-4); }
  .hero { padding: var(--s-5) var(--s-4); }
  .block { padding: var(--s-4); }
  .greet__name { font-size: var(--f-5); }
}


/* ══════════════════════════════════════════════════════════════════════════
   ★ 加到主屏幕后的顶部高度 ★
   ══════════════════════════════════════════════════════════════════════════

   问题：
     在 Safari 里，地址栏本身占掉约 50px，所以内容看起来位置正好。
     从主屏幕打开（standalone）时地址栏没了，
     内容一下子顶到最上面，看起来"太高了"。

   解决：
     PWA 模式额外补一段顶部留白，视觉上回到和 Safari 一样的位置。

   ★ 数值可以调 ★
     想再往下就加大 --pwa-top-gap，想往上就减小。
   ══════════════════════════════════════════════════════════════════════════ */
:root { --pwa-top-gap: 24px; }

@media all and (display-mode: standalone) {
  .topbar {
    padding-top: calc(var(--safe-top) + var(--pwa-top-gap));
  }
  .topbar::before {
    top: calc(var(--safe-top) + 10px);   /* 背景仍然只从内容条开始 */
  }
}
/* iOS 老版本用 navigator.standalone，这里兜一个 */
@media all and (display-mode: fullscreen) {
  .topbar { padding-top: calc(var(--safe-top) + var(--pwa-top-gap)); }
}

/* ★ 开关行（设置页的通知偏好用）★ */
.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: 13px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 14.5px; cursor: pointer;
}
.switch-row:last-of-type { border-bottom: none; }
.switch-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 46px; height: 27px; flex: none;
  border-radius: 999px; background: var(--c-line);
  position: relative; cursor: pointer;
  transition: background .22s var(--ease-apple);
}
.switch-row input[type="checkbox"]::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff; transition: transform .22s var(--ease-apple);
}
.switch-row input[type="checkbox"]:checked { background: var(--c-accent); }
.switch-row input[type="checkbox"]:checked::after { transform: translateX(19px); }