/* =============================================================================
   中远慧投 · 客户端设计系统 v2「冷蓝专业版」
   -----------------------------------------------------------------------------
   原则:
   1. 只覆盖视觉层, 不改任何 DOM 结构与 JS 行为
   2. 所有颜色/圆角/阴影来自下方令牌, 组件不自造色值
   3. 涨跌语义沿用平台既有: 涨=绿, 跌=红(加密行情惯例)
   4. 夜间模式由 html[data-theme="night"] 驱动, 与既有切换逻辑兼容
   ============================================================================= */

:root {
  /* 品牌 */
  --brand: #1667D9;
  --brand-strong: #0F4FB3;
  --brand-light: #5B9BF0;
  --brand-soft: #EBF3FF;
  --brand-ink: #0B2E66;

  /* 中性 */
  --bg: #F2F5FA;
  --bg-deep: #E7EDF6;
  --card: #FFFFFF;
  --card-2: #F7F9FC;
  --card-3: #EEF3F9;
  --text: #0B1B33;
  --text-2: #5B6C84;
  --text-3: #8C9CB0;
  --line: #E3EAF4;
  --line-strong: #D2DDEB;

  /* 语义 */
  --up: #12A05C;
  --up-soft: rgba(18, 160, 92, .09);
  --down: #E5484D;
  --down-soft: rgba(229, 72, 77, .09);
  --warn: #B7791F;
  --danger: #C62A2F;

  /* 形状 */
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 10px;

  /* 阴影 */
  --shadow-card: 0 1px 2px rgba(11, 27, 51, .04), 0 12px 30px -22px rgba(11, 27, 51, .28);
  --shadow-float: 0 24px 60px -24px rgba(11, 27, 51, .32);
  --shadow-brand: 0 12px 28px -12px rgba(22, 103, 217, .55);

  /* 兼容旧变量名(全站大量引用) */
  --gold: var(--brand);
  --gold-dark: var(--brand-strong);
  --gold-light: var(--brand-light);

  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
               "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Pro Display", "DIN Alternate", "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 基础 ---------- */
* { -webkit-tap-highlight-color: transparent; }

html, body { background: #DCE3ED; }

body {
  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app {
  background: var(--bg);
  max-width: 480px;
  box-shadow: 0 0 0 1px rgba(11, 27, 51, .06), 0 30px 90px -30px rgba(11, 27, 51, .45);
}

button, input, select, textarea { font-family: inherit; }

.up { color: var(--up) !important; }
.down { color: var(--down) !important; }

.page {
  background:
    radial-gradient(520px 260px at 50% -80px, rgba(22, 103, 217, .07), transparent 70%),
    var(--bg);
  animation: pageIn .26s cubic-bezier(.2, .8, .2, 1);
}
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 顶部导航 ---------- */
.navbar {
  height: 52px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  border-bottom: 1px solid var(--line);
}
.navbar .title { font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.navbar .back {
  left: 10px; top: 6px; height: 40px; width: 40px;
  border-radius: 12px; color: var(--text); transition: background .15s;
}
.navbar .back:active { background: var(--brand-soft); }
.back-ico { width: 19px; height: 19px; }

/* ---------- 底部 TabBar ---------- */
.tabbar {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -18px rgba(11, 27, 51, .35);
}
.tabbar .item {
  gap: 3px; font-size: 10.5px; color: var(--text-3);
  font-weight: 600; letter-spacing: .2px;
  transition: color .15s;
}
.tabbar .item svg { width: 23px; height: 23px; stroke-width: 1.9; }
.tabbar .item.active { color: var(--brand); }
.tabbar .item.active svg { filter: drop-shadow(0 4px 8px rgba(22, 103, 217, .28)); }
.tabbar .item .ico-wrap::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%) scale(.4);
  width: 16px; height: 3px; border-radius: 2px; background: var(--brand); opacity: 0;
  transition: .18s;
}
.tabbar .item.active .ico-wrap::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ---------- 按钮 ---------- */
.gold-btn {
  height: 50px; border-radius: 14px;
  background: linear-gradient(180deg, #2F7FE8 0%, var(--brand) 100%);
  font-size: 15px; font-weight: 700; letter-spacing: 2px;
  box-shadow: var(--shadow-brand);
  transition: transform .12s, filter .12s;
}
.gold-btn:active { transform: scale(.985); filter: brightness(.97); }
.gold-btn:disabled { opacity: .55; box-shadow: none; }
.gold-btn.plain {
  background: var(--card); color: var(--brand-strong);
  border: 1px solid var(--line-strong); box-shadow: none;
}
.gold-btn.sm { height: 36px; border-radius: 10px; font-size: 13px; padding: 0 16px; letter-spacing: .5px; }

/* ---------- 登录 / 注册 ---------- */
.login-page {
  background:
    radial-gradient(720px 460px at 50% -12%, rgba(46, 120, 220, .55), transparent 62%),
    radial-gradient(520px 380px at 108% 82%, rgba(13, 62, 122, .55), transparent 60%),
    radial-gradient(420px 320px at -12% 68%, rgba(20, 78, 150, .35), transparent 62%),
    linear-gradient(168deg, #06101F 0%, #0A1B31 42%, #071526 100%);
}
.login-page .sun {
  width: 320px; height: 320px; top: 46%;
  background: radial-gradient(circle, rgba(80, 150, 245, .30), rgba(22, 103, 217, .10) 45%, transparent 70%);
  filter: blur(6px);
}
.login-page .wave {
  top: 0; bottom: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 44px 100%;
  mask-image: radial-gradient(circle at 50% 40%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 10%, transparent 78%);
}
.login-top { padding: 16px 18px; font-size: 12.5px; letter-spacing: 1px; color: rgba(255, 255, 255, .78); }
.login-top .coin {
  width: 28px; height: 28px; border-radius: 9px;
  background: linear-gradient(160deg, #4B93F0, #1450A8);
  box-shadow: 0 6px 16px -6px rgba(40, 130, 240, .9);
  font-size: 12px;
}
.login-top .lang {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px; padding: 5px 14px; font-size: 11.5px;
}
.login-brand { margin-top: 24vh; }
.login-brand .name {
  font-size: 32px; font-weight: 800; letter-spacing: 9px; text-indent: 9px;
  text-shadow: 0 12px 40px rgba(20, 90, 190, .55);
}
.login-brand .en {
  margin-top: 10px; font-size: 10.5px; letter-spacing: 4px;
  color: rgba(180, 210, 250, .72);
}
.login-form {
  margin: 30px 22px 0;
  padding: 20px 18px 18px;
  background: rgba(255, 255, 255, .065);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.login-form .field {
  height: 50px; padding: 0 15px; border-radius: 13px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: none; margin-bottom: 12px;
}
.login-form .field:focus-within { box-shadow: 0 0 0 3px rgba(90, 160, 255, .28); }
.login-form .field .ico { color: var(--brand); font-size: 14px; }
.login-form .field input { color: var(--text); font-size: 15px; }
.login-form .field input::placeholder { color: #A9B6C8; }
.login-form .field.captcha { position: relative; padding-right: 6px; }
.login-form .field.captcha input { padding-right: 116px; }
.login-form .field.captcha img {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 34px; width: auto; max-width: 110px; border-radius: 8px; cursor: pointer;
}
.login-actions { margin-top: 18px; }
.login-form .gold-btn { height: 50px; border-radius: 13px; letter-spacing: 6px; }
.login-links { margin-top: 15px; gap: 24px; }
.login-links a { color: rgba(200, 220, 245, .82); font-size: 12.5px; }
.login-agree { color: rgba(190, 210, 235, .7); font-size: 11px; line-height: 1.7; }
.login-agree a { color: #8FC0FF; }
.agree-row { color: rgba(210, 225, 245, .82); font-size: 12px; }
.agree-row .ck { border-color: rgba(255, 255, 255, .45); border-radius: 6px; }
.agree-row .ck.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.agree-row a { color: #8FC0FF; }
.install-hint .ih-txt { color: rgba(200, 220, 245, .78); font-size: 12px; }
.install-hint.corner {
  left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  justify-content: center; gap: 8px;
}
.install-hint.corner .ih-txt { font-size: 11.5px; }
.install-hint.corner .ih-btn { padding: 5px 14px; font-size: 11.5px; }
.install-hint .ih-btn {
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .2);
  color: #DCEBFF; box-shadow: none; border-radius: 999px;
}

/* ---------- 首页 ---------- */
.home-top {
  height: 56px;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  border-bottom: 1px solid var(--line);
}
.home-top .logo { font-size: 16px; font-weight: 800; letter-spacing: .3px; color: var(--text); gap: 9px; }
.home-top .logo .mark { width: 28px; height: 28px; border-radius: 9px; box-shadow: 0 6px 14px -8px rgba(22, 103, 217, .8); }
.home-top .lang {
  left: 14px; font-size: 11.5px; font-weight: 600; color: var(--text-2);
  background: var(--card-2); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 999px;
}
.home-top .bell {
  right: 14px; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-2); border: 1px solid var(--line); font-size: 14px;
}

.banner {
  margin: 14px 14px 0; height: 138px; border-radius: var(--radius-xl);
  box-shadow: 0 18px 40px -24px rgba(9, 40, 90, .55);
  isolation: isolate;
}
.banner::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(220px 160px at 88% 10%, rgba(255, 255, 255, .35), transparent 62%),
    linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px) 0 0 / 34px 100%,
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 100% 34px;
  mix-blend-mode: overlay;
}
.banner::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 16, 36, 0) 42%, rgba(4, 16, 36, .34) 100%);
}
.banner .slide { padding: 0 22px; z-index: 2; }
.banner .slide .t { font-size: 21px; font-weight: 800; letter-spacing: .3px; }
.banner .slide .s { margin-top: 9px; font-size: 12.5px; opacity: .88; letter-spacing: .3px; }
.banner .dots { z-index: 3; bottom: 11px; }
.banner .dots i { width: 5px; height: 5px; background: rgba(255, 255, 255, .45); }
.banner .dots i.on { width: 18px; background: #fff; }

.cat-tabs {
  background: transparent; margin: 16px 14px 0; padding: 0;
  gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs .t {
  flex: none; padding: 7px 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  background: var(--card); border: 1px solid var(--line);
  transition: .16s;
}
.cat-tabs .t.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
  font-weight: 700; box-shadow: 0 8px 18px -10px rgba(22, 103, 217, .85);
}
.cat-tabs .t.on::after { display: none; }

.quote-grid { gap: 10px; padding: 12px 14px 2px; }
.quote-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 12px 12px 11px;
  text-align: left; box-shadow: none; position: relative; overflow: hidden;
  transition: transform .12s, border-color .12s;
}
.quote-card:active { transform: scale(.975); border-color: var(--line-strong); }
.quote-card .n { font-size: 11.5px; font-weight: 600; color: var(--text-2); letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quote-card .p { font-family: var(--font-num); font-size: 18px; font-weight: 800; letter-spacing: -.4px; margin: 7px 0 5px; }
.quote-card .c {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
}
.quote-card .c.up { background: var(--up-soft); }
.quote-card .c.down { background: var(--down-soft); }

.sec-title {
  padding: 20px 16px 9px;
  font-size: 15px; font-weight: 800; letter-spacing: .3px;
  display: flex; align-items: center; gap: 9px;
}
.sec-title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-light), var(--brand));
}

.news-item {
  margin: 8px 14px 0; padding: 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: none; gap: 12px;
  align-items: center;
}
.news-item:active { background: var(--card-2); }
.news-item .h { font-size: 13.5px; line-height: 1.5; font-weight: 600; color: var(--text); }
.news-item .time { margin-top: 7px; font-size: 10.5px; color: var(--text-3); letter-spacing: .2px; }
.news-item .thumb {
  width: 108px; height: 76px; border-radius: 12px;
  flex: none; overflow: hidden;
  background-color: var(--card-3);
  box-shadow: inset 0 0 0 1px rgba(11, 27, 51, .06);
}

/* 资讯详情：统一封面（按 4:3 原比例展示，不裁切） */
.news-hero {
  width: 100%; aspect-ratio: 4 / 3; max-height: 260px;
  margin: 14px 0 6px;
  border-radius: var(--radius-lg);
  background-color: #0A1E38;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(11, 27, 51, .06);
}
.news-detail .meta .src {
  background: var(--brand-soft) !important;
  color: var(--brand-strong);
  border-radius: 999px; padding: 3px 10px; font-weight: 600;
}

/* ---------- K线页 ---------- */
.kline-head { padding: 16px 16px 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.kline-head .row1 { gap: 10px; flex-wrap: wrap; }
.kline-head .sym { font-size: 12.5px; font-weight: 600; color: var(--text-2); letter-spacing: .3px; }
.kline-head .price { font-family: var(--font-num); font-size: 30px; font-weight: 800; letter-spacing: -.8px; line-height: 1.1; }
.kline-head .chg { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--up-soft); }
.kline-head .chg.down { background: var(--down-soft); }

.mode-seg { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; margin: 10px 14px 0; }
.mode-seg span { padding: 8px 0; font-size: 13px; border-radius: 9px; color: var(--text-2); }
.mode-seg span.on { background: var(--card); color: var(--brand); box-shadow: 0 2px 8px rgba(11, 27, 51, .08); }

.kline-stats {
  background: var(--card); padding: 12px 14px 14px; gap: 8px;
  font-size: 10px; color: var(--text-3); border-bottom: 1px solid var(--line);
}
.kline-stats span { background: var(--card-2); border-radius: 10px; padding: 9px 4px; gap: 5px; }
.kline-stats b { color: var(--text); font-size: 12.5px; font-weight: 700; }

.tf-tabs { background: var(--card); border-top: 0; padding: 8px 12px 10px; gap: 4px; }
.tf-tabs .t { flex: 1; padding: 7px 0; font-size: 12px; color: var(--text-2); border-radius: 8px; transition: .14s; }
.tf-tabs .t.on { background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; }
.tf-tabs .t.on::after { display: none; }

#kline-box { background: var(--card); }

.ratio-bar-wrap { background: var(--card); margin: 10px 14px 0; border-radius: var(--radius-lg); padding: 12px 14px 11px; border: 1px solid var(--line); }
.rb-labels { font-size: 11.5px; margin-bottom: 8px; }
.ratio-bar { height: 6px; background: var(--down-soft); }
.ratio-bar i { background: linear-gradient(90deg, #22B573, var(--up)); }

.ex-cols { margin: 10px 14px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.ex-cols .ob-wrap, .ex-cols .tr-wrap { padding: 4px 8px 10px; }
.ex-cols .tr-wrap { border-left: 1px solid var(--line); }
.ob-head, .tr-row.th { color: var(--text-3); font-size: 9.5px; border-bottom: 1px solid var(--line); background: var(--card); }
.ob-row { font-size: 10.5px; padding: 4.5px 4px; }
.ob-row > span:nth-child(2) { color: var(--text-2); }
.ob-row > span:nth-child(3) { color: var(--text-3); }
.ob-row.ask .bar { background: var(--down-soft); }
.ob-row.bid .bar { background: var(--up-soft); }
.ob-row.mine { background: var(--brand-soft); }
.ob-mid { background: var(--card-2); border-radius: 8px; font-size: 13.5px; }
.mine-tag { background: var(--brand); border-radius: 4px; }

.info-grid.cols2 { background: var(--card); margin: 10px 14px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); border-top: 1px solid var(--line); padding: 4px 14px 10px; }
.info-grid.cols2 .ir { border-bottom: 1px dashed var(--line); font-size: 11.5px; }
.info-grid.cols2 .ir .k { color: var(--text-3); }
.info-desc { background: var(--card); margin: 10px 14px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--text-2); font-size: 12px; }

.kline-orders { background: var(--card); margin: 10px 14px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; }
.kline-orders .hd { font-size: 13.5px; font-weight: 700; border-left: 3px solid var(--brand); padding-left: 9px; }
.order-row { font-size: 11.5px; border-bottom: 1px dashed var(--line); color: var(--text-2); }
.kprog .cd-bar { height: 5px; background: var(--card-3); }
.kprog .cd-bar i { background: linear-gradient(90deg, var(--brand-light), var(--brand)); }

.buy-bar {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  border-top: 1px solid var(--line);
  padding: 10px 14px calc(10px + var(--safe-b));
  gap: 10px;
}
.buy-bar button {
  height: 48px; border-radius: 14px; font-size: 15px; letter-spacing: 1px; font-weight: 700;
  box-shadow: none;
}
.buy-bar .buyup { background: linear-gradient(180deg, #19B26B 0%, #0E8F51 100%); box-shadow: 0 12px 26px -14px rgba(16, 150, 85, .9); }
.buy-bar .buydown { background: linear-gradient(180deg, #F05A5F 0%, #D63B41 100%); box-shadow: 0 12px 26px -14px rgba(214, 59, 65, .9); }
.buy-bar button:active { transform: scale(.985); filter: brightness(.97); }

/* ---------- 下单弹层 ---------- */
.sheet-mask { background: rgba(6, 16, 32, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet { border-radius: 22px 22px 0 0; background: var(--card); box-shadow: var(--shadow-float); }
.sheet-grip { width: 40px; height: 4px; background: var(--line-strong); }
.os-head { padding: 18px 18px 14px; }
.os-badge { border-radius: 9px; font-size: 12.5px; padding: 5px 12px; }
.os-sym { font-size: 16px; }
.os-lev { background: var(--brand-soft); border-color: transparent; color: var(--brand-strong); border-radius: 999px; }
.os-close { width: 30px; height: 30px; background: var(--card-2); color: var(--text-3); }
.os-price-row { background: var(--card-2); border-radius: 14px; margin: 0 18px 14px; padding: 13px 0; }
.os-item .lb { color: var(--text-3); }
.os-item .vl { font-family: var(--font-num); font-size: 15.5px; }
.os-divider { background: var(--line); }

.combo-row { gap: 8px; }
.combo-card { border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); }
.combo-card.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: none; }
.combo-card .c2 { font-family: var(--font-num); }
.combo-card.on .c2 { color: var(--brand-strong); }

.amt-input { border: 1px solid var(--line-strong); border-radius: 13px; background: var(--card); }
.amt-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22, 103, 217, .12); }
.amt-input .cur { color: var(--text-3); }
.amt-input .all { background: var(--brand-soft); color: var(--brand-strong); border-radius: 8px; }

.quick button { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; color: var(--text-2); }
.quick button.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: none; }

.fee-row { color: var(--text-3); }
.fee-row b { color: var(--text); }

.os-submit { border-radius: 14px; font-size: 16px; letter-spacing: 2px; }
.os-submit.buy { background: linear-gradient(180deg, #19B26B, #0E8F51); box-shadow: 0 14px 30px -14px rgba(16, 150, 85, .9); }
.os-submit.sell { background: linear-gradient(180deg, #F05A5F, #D63B41); box-shadow: 0 14px 30px -14px rgba(214, 59, 65, .9); }

/* ---------- 交易页 ---------- */
.seg-tabs { background: var(--card); border-bottom: 1px solid var(--line); padding: 0 14px; }
.seg-tabs .t { padding: 13px 0 11px; font-size: 14px; color: var(--text-2); }
.seg-tabs .t.on { color: var(--text); }
.seg-tabs .t.on::after { bottom: 0; width: 28px; height: 3px; background: var(--brand); }

.pos-card {
  background: var(--card); margin: 10px 14px 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: none; padding: 14px;
}
.pos-card .sym { font-size: 15px; font-weight: 800; }
.pos-card .side { border-radius: 6px; padding: 2.5px 8px; font-size: 10.5px; }
.pos-card .r2 { font-size: 11.5px; color: var(--text-3); }
.pos-card .r2 b { color: var(--text); font-family: var(--font-num); }
.pos-card .profit { font-family: var(--font-num); font-size: 18px; }
.cd-bar { background: var(--card-3); }
.cd-bar i { background: linear-gradient(90deg, var(--brand-light), var(--brand)); }
.cd-hint { color: var(--text-3); }

.spot-summary { background: var(--card); border: 1px solid var(--line); box-shadow: none; border-radius: var(--radius-lg); margin: 12px 14px 0; }
.spot-summary b { font-family: var(--font-num); }

/* ---------- 我的 ---------- */
.mine-head {
  padding: 34px 20px 96px;
  background:
    radial-gradient(460px 280px at 88% -24%, rgba(74, 148, 248, .34), transparent 64%),
    radial-gradient(340px 240px at -4% 108%, rgba(30, 84, 152, .28), transparent 68%),
    linear-gradient(158deg, #071120 0%, #0A1B2F 46%, #0E2745 100%);
}
.mine-head::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 40px 100%,
    linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px) 0 0 / 100% 40px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}
.mine-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 180, 255, .28), transparent);
}
.mine-head .avatar {
  width: 62px; height: 62px; border-radius: 22px;
  background: linear-gradient(158deg, #2A5A93, #0A1F38);
  border: 1px solid rgba(140, 190, 255, .42);
  box-shadow: 0 0 0 5px rgba(90, 160, 255, .07), 0 16px 32px -14px rgba(0, 0, 0, .7);
  font-size: 25px; letter-spacing: .5px;
}
.mine-head .nick { font-size: 18.5px; font-weight: 800; letter-spacing: .4px; }
.mine-head .acc {
  font-size: 11px; color: rgba(178, 205, 238, .62);
  letter-spacing: 1.2px; font-variant-numeric: tabular-nums;
}
.mine-head .badge {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(226, 240, 255, .92);
  border-radius: 999px; font-size: 9.5px; font-weight: 600;
  padding: 1.5px 8px; letter-spacing: .4px;
}

/* 余额卡：纯白悬浮，与深色头部形成强对比 */
.mine-balance {
  margin: -58px 14px 0; padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow:
    0 26px 54px -26px rgba(8, 30, 60, .55),
    0 2px 6px rgba(11, 27, 51, .05);
}
.mine-balance .lb {
  font-size: 10.5px; color: var(--text-3);
  letter-spacing: 1.2px;
}
.mine-balance .val {
  font-family: var(--font-num); font-size: 34px; font-weight: 800;
  letter-spacing: -1.4px; margin-top: 7px; color: var(--text);
}
.mine-balance .val::after {
  content: 'USDT'; font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  color: var(--text-3); margin-left: 8px; vertical-align: 3px;
}
.mine-balance .btns { gap: 10px; margin-top: 18px; }
.mine-balance .btns button {
  height: 44px; border-radius: 13px; font-size: 13.5px; font-weight: 700; letter-spacing: 2px;
}
.mine-balance .btns .r {
  background: linear-gradient(180deg, #2F7FE8 0%, #1667D9 100%);
  color: #fff;
  box-shadow: 0 12px 24px -14px rgba(22, 103, 217, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.mine-balance .btns .w {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

/* 菜单：按语义分组的卡片，单色线性图标 */
.menu-group {
  margin: 12px 14px 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.menu-group:last-child { margin-bottom: 12px; }
.menu-group .m {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px; font-size: 13.5px; font-weight: 500;
  color: var(--text); border-bottom: 1px solid var(--line);
  position: relative; cursor: pointer;
  transition: background .13s;
}
.menu-group .m:last-child { border-bottom: none; }
.menu-group .m:active { background: var(--card-2); }
.menu-group .m .mi {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft);
  color: var(--brand);
}
.menu-group .m .mi svg { width: 17px; height: 17px; }
.menu-group .m::after {
  content: ''; width: 6px; height: 6px; flex: none;
  border-top: 1.6px solid var(--text-3); border-right: 1.6px solid var(--text-3);
  transform: rotate(45deg); margin-left: auto;
}
.menu-group.danger .m { color: var(--down); }
.menu-group.danger .m .mi { background: rgba(229, 72, 77, .09); color: var(--down); }
.menu-group.danger .m::after { display: none; }

/* ---------- 表单 / 资金页 ---------- */
.form-card { background: var(--card); margin: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; padding: 4px 16px; }
.form-row { border-bottom: 1px solid var(--line); padding: 15px 0; }
.form-row .lb { font-size: 13.5px; color: var(--text-2); }
.form-row input { font-size: 14px; color: var(--text); }
.form-row .val { font-family: var(--font-num); }
.form-row .val.muted { color: var(--text-3); }

.channel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 13px 14px; }
.channel.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand) inset; }
.channel .b { font-size: 13.5px; }
.channel .a { font-size: 12px; color: var(--text-2); }
.channel .h { font-size: 10.5px; color: var(--text-3); }
.channel .dot { border-color: var(--line-strong); }
.channel.on .dot { border-color: var(--brand); }
.channel.on .dot::after { background: var(--brand); }

.fee-notice { background: var(--brand-soft); border: 1px solid #D3E4FB; border-radius: var(--radius-lg); margin: 12px 14px; }
.fee-notice b { color: var(--brand-strong); }
.fee-notice p { color: var(--text-2); }
.fee-notice p b { color: var(--warn); }

.addr-input { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; }
.addr-meta { color: var(--text-3); }
.addr-meta b { color: var(--brand-strong); }
.addr-meta .sc { background: var(--brand-soft); border-color: transparent; color: var(--brand-strong); }
.addr-meta .sc:active { background: var(--brand); color: #fff; }

.qk { background: var(--card-2); border: 1px solid var(--line); color: var(--text-2); border-radius: 9px; }
.qk.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 充值客服引导 */
.recharge-cs { padding: 60px 26px 0; }
.rc-av { background: linear-gradient(160deg, #E8F2FF, #BBD8FA); border-color: #D3E4FB; box-shadow: 0 18px 40px -22px rgba(22, 103, 217, .5); }
.rc-t1 { font-size: 20px; }
.rc-t2 { color: var(--text-2); }
.rc-hours { color: var(--brand-strong); }
.cs-entry { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.cs-entry:active { background: var(--card-2); }
.cs-entry .cs-txt { color: var(--text-2); }
.cs-entry .cs-txt b { color: var(--brand-strong); }
.cs-entry .cs-arrow { border-color: var(--brand); }

/* ---------- 理财 ---------- */
.fin-card {
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(22, 103, 217, .07), transparent 70%),
    var(--card);
  margin: 12px 14px 0; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px; box-shadow: none;
}
.fin-card .nm { font-size: 14.5px; }
.fin-card .tag { background: var(--brand); border-radius: 999px; font-size: 9.5px; padding: 2.5px 9px; }
.fin-card .apr { color: var(--brand-strong); font-family: var(--font-num); font-size: 28px; }
.fin-card .apr small { font-size: 11.5px; }
.fin-card .meta { color: var(--text-2); }
.fin-records-entry { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.fin-records-entry .fr-txt small { color: var(--text-3); }
.fin-records-entry .fr-arrow { border-color: var(--brand); }

/* ---------- 客服 / 聊天 ---------- */
.cs-hero .big-av { background: linear-gradient(160deg, #2C5C94, #0E2A4C); box-shadow: 0 18px 40px -20px rgba(10, 40, 80, .55); }
.cs-hero .nm { font-size: 18px; }
.cs-hero .st { color: var(--up); }
.cs-info-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.cs-info-card .row { border-bottom: 1px solid var(--line); color: var(--text-3); font-size: 12.5px; }
.cs-info-card .row b { color: var(--text); }
.cs-tip { color: var(--text-3); }
.cs-tip .mini { background: var(--card); border-color: var(--line); color: var(--brand-strong); border-radius: 999px; }
.q-ring i { border-top-color: var(--brand); }
.q-ring i:nth-child(2) { border-top-color: var(--brand-light); }
.q-ring i:nth-child(3) { border-top-color: #6FA8F5; }
.q-bar { background: var(--card-3); }
.q-bar i { background: linear-gradient(90deg, var(--brand-light), var(--brand)); }
.ghost-btn { background: var(--card); border: 1px solid var(--line-strong); color: var(--text-2); border-radius: 12px; }

.chat-body { background: var(--bg); }
.chat-row.cs .cavatar { background: linear-gradient(160deg, #2C5C94, #0E2A4C); }
.chat-row.me .cavatar { background: linear-gradient(160deg, #5C6C82, #2E3A4C); }
.chat-row.cs .bubble { background: var(--card); border: 1px solid var(--line); box-shadow: none; border-radius: 14px 14px 14px 4px; }
.chat-row.me .bubble { background: linear-gradient(160deg, #2F7FE8, var(--brand)); border-radius: 14px 14px 4px 14px; }
.chat-quick { background: var(--bg); }
.chat-quick button { background: var(--card); border: 1px solid var(--line); color: var(--brand-strong); border-radius: 999px; }
.chat-input-bar { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--line); }
.chat-input-bar input { background: var(--card-2); border: 1px solid var(--line); }
.chat-input-bar input:focus { border-color: var(--brand); background: #fff; }
.chat-input-bar .send-btn { background: linear-gradient(180deg, #2F7FE8, var(--brand)); border-radius: 12px; box-shadow: var(--shadow-brand); }

/* ---------- 弹层 / Toast / 语言 ---------- */
.lang-mask, .promo-mask { background: rgba(6, 16, 32, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lang-sheet { border-radius: 18px; box-shadow: var(--shadow-float); }
.lang-sheet .lopt { border-radius: 12px; }
.lang-sheet .lopt.on { background: var(--brand-soft); color: var(--brand-strong); }
.lang-sheet .lopt span { color: var(--brand); }

.toast {
  background: rgba(9, 24, 46, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px; font-size: 13.5px; padding: 12px 18px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .7);
}

.promo-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F9FF 100%);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-float);
}
.promo-badge { background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; letter-spacing: 1.5px; }
.promo-x { background: var(--card-2); color: var(--text-2); }
.promo-title { color: var(--text); }
.promo-body { color: var(--text-2); }
.promo-btn { background: linear-gradient(180deg, #2F7FE8, var(--brand)); color: #fff; box-shadow: var(--shadow-brand); }

.activity-card { background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FE 100%); }
.ac-bar { background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line); }
.ac-t { color: var(--text); }
.ac-foot { background: var(--card); border-top: 1px solid var(--line); }

/* ---------- 资讯详情 / 法律 ---------- */
.news-detail { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.news-detail h1 { color: var(--text); font-size: 19px; }
.news-detail .body p { color: var(--text-2); }
.legal-doc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.legal-doc .ld-head h1 { color: var(--text); }
.legal-doc .ld-intro, .legal-doc .ld-sec p { color: var(--text-2); }
.legal-doc .ld-sec h2 { color: var(--text); }
.legal-doc .ld-sec h2 .no { background: var(--brand); border-radius: 8px; }
.about-intro { background: var(--brand-soft); border: 1px solid #D3E4FB; border-radius: var(--radius-lg); }
.about-intro p { color: var(--text-2); }
.about-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.about-list .li { border-bottom: 1px solid var(--line); color: var(--text-2); }
.about-list .li .v { color: var(--text-3); }
.about-hero .mark { border-radius: 20px; background: linear-gradient(160deg, #2C5C94, #0E2A4C); box-shadow: 0 14px 30px -14px rgba(10, 40, 80, .6); }

/* 学院 */
.academy-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.academy-item .ai-t { color: var(--text); }
.academy-item .ai-go { color: var(--text-3); }
.academy-card .ac-h1 { color: var(--text); }
.academy-card .ac-body { color: var(--text-2); }

/* 法律页 */
.legal-doc .ld-meta { color: var(--text-3); }

/* ---------- 夜间主题 ---------- */
html[data-theme="night"] {
  color-scheme: dark;
  background: var(--bg);
  --bg: #05070C;
  --bg-deep: #0A0E16;
  --card: #0D121C;
  --card-2: #121926;
  --card-3: #192233;
  --text: #E8EEF7;
  --text-2: #A6B4C8;
  --text-3: #6F8098;
  --line: #1B2536;
  --line-strong: #26334A;
  --brand: #3B8CFF;
  --brand-strong: #6FAEFF;
  --brand-light: #86BEFF;
  --brand-soft: rgba(59, 140, 255, .12);
  --brand-ink: #CFE4FF;
  --up: #2ECC8F;
  --up-soft: rgba(46, 204, 143, .12);
  --down: #FF6B70;
  --down-soft: rgba(255, 107, 112, .12);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-float: 0 24px 60px -24px rgba(0, 0, 0, .9);
}
html[data-theme="night"] body,
html[data-theme="night"] #app,
html[data-theme="night"] .page { background: var(--bg); }
html[data-theme="night"] #app { box-shadow: none; }
html[data-theme="night"] .page {
  background:
    radial-gradient(520px 260px at 50% -80px, rgba(59, 140, 255, .10), transparent 70%),
    var(--bg);
}

html[data-theme="night"] .navbar,
html[data-theme="night"] .home-top,
html[data-theme="night"] .tabbar,
html[data-theme="night"] .buy-bar,
html[data-theme="night"] .chat-input-bar {
  background: rgba(8, 12, 19, .88);
  border-color: var(--line);
}
html[data-theme="night"] .navbar .title,
html[data-theme="night"] .home-top .logo,
html[data-theme="night"] .sec-title { color: var(--text); }
html[data-theme="night"] .navbar .back,
html[data-theme="night"] .home-top .lang,
html[data-theme="night"] .home-top .bell { color: var(--text-2); }
html[data-theme="night"] .home-top .lang,
html[data-theme="night"] .home-top .bell { background: var(--card-2); border-color: var(--line); }

html[data-theme="night"] .cat-tabs .t { background: var(--card); border-color: var(--line); color: var(--text-2); }
html[data-theme="night"] .cat-tabs .t.on { background: var(--brand); border-color: var(--brand); color: #06101F; }

html[data-theme="night"] .quote-card,
html[data-theme="night"] .news-item,
html[data-theme="night"] .academy-item,
html[data-theme="night"] .kline-head,
html[data-theme="night"] .kline-stats,
html[data-theme="night"] .tf-tabs,
html[data-theme="night"] #kline-box,
html[data-theme="night"] .kline-orders,
html[data-theme="night"] .ex-cols,
html[data-theme="night"] .ratio-bar-wrap,
html[data-theme="night"] .info-grid.cols2,
html[data-theme="night"] .info-desc,
html[data-theme="night"] .pos-card,
html[data-theme="night"] .seg-tabs,
html[data-theme="night"] .mode-seg,
html[data-theme="night"] .spot-summary,
html[data-theme="night"] .sheet,
html[data-theme="night"] .form-card,
html[data-theme="night"] .fin-card,
html[data-theme="night"] .fin-records-entry,
html[data-theme="night"] .cs-entry,
html[data-theme="night"] .about-list,
html[data-theme="night"] .lang-sheet,
html[data-theme="night"] .promo-card,
html[data-theme="night"] .academy-card,
html[data-theme="night"] .news-detail,
html[data-theme="night"] .legal-doc,
html[data-theme="night"] .menu-group {
  background: var(--card);
  border-color: var(--line);
  box-shadow: none;
}
/* 夜间：余额卡保持白卡对比，只做轻微降亮 */
html[data-theme="night"] .mine-balance {
  background: #121A27;
  border-color: var(--line-strong);
  box-shadow: 0 26px 54px -26px rgba(0, 0, 0, .95), 0 2px 6px rgba(0, 0, 0, .3);
}
html[data-theme="night"] .quote-card .n,
html[data-theme="night"] .news-item .h,
html[data-theme="night"] .academy-item .ai-t,
html[data-theme="night"] .kline-stats b,
html[data-theme="night"] .pos-card .r2 b,
html[data-theme="night"] .info-grid.cols2 .ir,
html[data-theme="night"] .mine-balance .val,
html[data-theme="night"] .menu-group .m { color: var(--text); }
html[data-theme="night"] .news-item .time,
html[data-theme="night"] .kline-stats span,
html[data-theme="night"] .info-grid.cols2 .ir .k,
html[data-theme="night"] .cd-hint { color: var(--text-3); }

html[data-theme="night"] .tf-tabs .t { color: var(--text-2); }
html[data-theme="night"] .tf-tabs .t.on { background: var(--brand-soft); color: var(--brand-strong); }
html[data-theme="night"] .mode-seg span.on { background: var(--card-3); color: var(--brand-strong); }
html[data-theme="night"] .ex-cols .tr-wrap { border-left-color: var(--line); }
html[data-theme="night"] .ob-mid { background: var(--card-2); }

html[data-theme="night"] .mine-head {
  background:
    radial-gradient(460px 280px at 88% -24%, rgba(52, 118, 210, .26), transparent 64%),
    linear-gradient(158deg, #05070C 0%, #070D17 52%, #0A1522 100%);
}
html[data-theme="night"] .menu-group .m { border-bottom-color: var(--line); }
html[data-theme="night"] .menu-group .m:active { background: var(--card-2); }
html[data-theme="night"] .menu-group .m .mi { background: rgba(59, 140, 255, .13); color: var(--brand); }
html[data-theme="night"] .menu-group.danger .m { color: var(--down); }
html[data-theme="night"] .menu-group.danger .m .mi { background: rgba(255, 107, 112, .12); color: var(--down); }

html[data-theme="night"] .chat-row.cs .bubble { background: var(--card); color: var(--text); border-color: var(--line); }
html[data-theme="night"] .chat-input-bar input { background: var(--card-2); color: var(--text); border-color: var(--line); }
html[data-theme="night"] .chat-quick button { background: var(--card); border-color: var(--line); color: var(--brand-strong); }
html[data-theme="night"] .cs-info-card .row { border-bottom-color: var(--line); }
html[data-theme="night"] .cs-info-card .row b { color: var(--text); }
html[data-theme="night"] .about-list .li { border-bottom-color: var(--line); color: var(--text-2); }

html[data-theme="night"] .login-page {
  background:
    radial-gradient(720px 460px at 50% -12%, rgba(40, 100, 190, .38), transparent 62%),
    linear-gradient(168deg, #03060C 0%, #07101E 45%, #04080F 100%);
}
html[data-theme="night"] .login-form { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .09); }
html[data-theme="night"] .login-form .field { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .1); }
html[data-theme="night"] .login-form .field input { color: var(--text); }
html[data-theme="night"] .login-form .field input::placeholder { color: #5E7089; }
html[data-theme="night"] .login-links a { color: rgba(170, 200, 235, .75); }

html[data-theme="night"] .toast { background: rgba(20, 30, 45, .95); }
html[data-theme="night"] .promo-card { background: linear-gradient(180deg, #0D121C 0%, #0A0F18 100%); }
html[data-theme="night"] .ac-bar { background: rgba(10, 15, 24, .9); border-bottom-color: var(--line); }
html[data-theme="night"] .ac-foot { background: var(--card); border-top-color: var(--line); }
html[data-theme="night"] .activity-card { background: linear-gradient(180deg, #0B1018 0%, #070B12 100%); }

/* ---------- 订单倒计时（环形 · 高级版） ---------- */
.kprog {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 4px 0 8px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 14px;
}
.cd-ring { position: relative; width: 46px; height: 46px; flex: none; }
.cd-ring svg { width: 46px; height: 46px; display: block; transform: rotate(-90deg); }
.cr-bg { fill: none; stroke: var(--card-3); stroke-width: 3.2; }
.cr-fg { fill: none; stroke: var(--brand); stroke-width: 3.2; stroke-linecap: round; transition: stroke-dashoffset .5s linear; }
.cd-ring b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 13.5px; font-weight: 800;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.cd-ring.late .cr-fg { stroke: var(--down); }
.cd-ring.late b { color: var(--down); animation: cdPulse 1s ease-in-out infinite; }
@keyframes cdPulse { 50% { opacity: .5; } }
.cd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cd-top { display: flex; justify-content: space-between; align-items: baseline; }
.cd-lb { font-size: 11.5px; color: var(--text-3); letter-spacing: .5px; }
.cd-pct { font-family: var(--font-num); font-size: 12px; font-weight: 800; color: var(--brand-strong); font-variant-numeric: tabular-nums; }
.cd-track { height: 6px; border-radius: 999px; background: var(--card-3); overflow: hidden; }
.cd-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-light)); transition: width .5s linear; }
.cd-track i.late { background: var(--down); }

/* ---------- 邮箱验证码行 ---------- */
.login-form .field.email-code { position: relative; }
.field.email-code .send-code {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  height: 32px; padding: 0 12px; border: none; border-radius: 9px;
  background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 600;
  letter-spacing: .3px; z-index: 2; transition: opacity .15s;
}
.field.email-code .send-code:disabled { background: var(--card-3); color: var(--text-3); }
.field.email-code input { padding-right: 96px; }
.code-hint { font-size: 11.5px; color: var(--text-3); margin: -6px 4px 8px; letter-spacing: .2px; }

/* 尊重系统降级 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}