/* ============================================================
   NovaRelay · Design System v3 — "Candy Pop Manga"
   明亮糖果色 + 二次元漫画元素：粗描边、硬阴影、网点背景、
   对话气泡、看板娘插画。白底深色字，保证高可读性。
   ============================================================ */

/* ---------- 字体：日式圆体（CDN，失败自动降级系统字体） ---------- */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

:root {
  /* 背景：奶油 + 淡粉蓝，告别黑底 */
  --bg: #FFF8F4;
  --bg-2: #F4FBFF;
  --surface: #FFFFFF;

  /* 墨色文字：不用纯黑，偏紫更有质感 */
  --ink: #2E2540;
  --ink-1: #554C69;
  --ink-2: #7E7594;
  --ink-3: #A9A1B8;

  /* 糖果色盘 */
  --pink: #FF6B9D;
  --pink-2: #FFA0BF;
  --pink-soft: #FFE8F1;
  --blue: #3FA9F5;
  --blue-soft: #E3F3FF;
  --purple: #A78BFA;
  --purple-soft: #F1EBFF;
  --yellow: #FFC53D;
  --yellow-soft: #FFF4D9;
  --mint: #35D0A5;
  --mint-soft: #DDFAF1;
  --coral: #FF7A5C;

  --grad: linear-gradient(135deg, #FF6B9D 0%, #A78BFA 55%, #3FA9F5 100%);
  --grad-warm: linear-gradient(135deg, #FFC53D 0%, #FF6B9D 100%);

  /* 描边与硬阴影（漫画感的关键） */
  --line: #2E2540;
  --line-w: 2px;
  --line-soft: #EBE3F0;
  --shadow-sm: 3px 3px 0 rgba(46, 37, 64, .10);
  --shadow: 5px 5px 0 rgba(46, 37, 64, .13);
  --shadow-lg: 9px 9px 0 rgba(46, 37, 64, .12);

  /* ===== 伪 3D：厚度边 + 软投影 + 顶部高光 ===== */
  --edge: #2E2540;                 /* 描边/厚度主色 */
  --edge-soft: #E4D7EA;            /* 浅色厚度（面板用） */
  --lift-1: 0 5px 0 var(--edge-soft), 0 12px 24px -9px rgba(46, 37, 64, .22);
  --lift-2: 0 9px 0 var(--edge-soft), 0 20px 34px -12px rgba(46, 37, 64, .26);
  --gloss: inset 0 2.5px 0 rgba(255, 255, 255, .95);
  --carve: inset 0 2px 4px rgba(46, 37, 64, .08);

  --ok: #17B978;   --ok-bg: #DDF5E9;
  --err: #E8546B;  --err-bg: #FFE6EA;
  --warn: #E8A317; --warn-bg: #FFF3D6;

  --r-xs: 9px; --r-sm: 12px; --r: 15px; --r-lg: 20px; --r-xl: 28px;
  --sans: 'Zen Maru Gothic', 'Inter', 'Segoe UI Variable Text', 'Segoe UI',
          -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC',
          'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; outline: none; border: none; background: none; }
button { cursor: pointer; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F6EEF3; }
::-webkit-scrollbar-thumb { background: #E3D3E4; border-radius: 99px; border: 3px solid #F6EEF3; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--pink-2); background-clip: content-box; }
::selection { background: #FFD9E7; color: var(--ink); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; border-radius: 8px; }

/* ---------- 背景：网点 + 糖果光斑 + 小装饰 ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(760px 520px at 85% -6%, #FFE1EE 0%, transparent 62%),
    radial-gradient(680px 480px at 2% 104%, #DDF1FF 0%, transparent 60%);
}
.bg-grid {
  position: absolute; inset: 0; opacity: .8;
  background-image: radial-gradient(#FFCEDF 1.6px, transparent 1.7px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 96% 78% at 50% 26%, #000 14%, transparent 78%);
          mask-image: radial-gradient(ellipse 96% 78% at 50% 26%, #000 14%, transparent 78%);
}
/* 漂浮的糖果光斑 */
.orb { position: absolute; border-radius: 50%; filter: blur(58px); animation: drift 24s ease-in-out infinite; }
.orb-1 { width: 400px; height: 400px; background: #FFC2D8; opacity: .45; top: -150px; left: -110px; }
.orb-2 { width: 360px; height: 360px; background: #AFDCFF; opacity: .4; bottom: -140px; right: 3%; animation-delay: -8s; }
.orb-3 { width: 300px; height: 300px; background: #E2D4FF; opacity: .38; top: 42%; left: 46%; animation-delay: -15s; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.09); }
  66% { transform: translate(-30px, 26px) scale(.93); }
}

/* ---------- 通用件 ---------- */
.mono { font-family: var(--mono); letter-spacing: -.01em; }
.muted { color: var(--ink-1); }
.dim { color: var(--ink-2); }
.grow { flex: 1; min-width: 0; }
.hidden { display: none !important; }
.noscroll { overflow: hidden; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* ---------- 线性矢量图标组件 ---------- */
svg { flex: none; }

.row { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wrap { flex-wrap: wrap; }
.gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap12 { gap: 12px; }
.gap16 { gap: 16px; } .gap24 { gap: 24px; }

/* 小闪星装饰 */
.star {
  display: inline-block; flex: none;
  animation: twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .55; transform: scale(.88) rotate(0deg); } 50% { opacity: 1; transform: scale(1.12) rotate(12deg); } }

/* ---------- 卡片 / 面板 ---------- */
.panel, .model-card {
  background: var(--surface);
  border: var(--line-w) solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1), var(--gloss);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.panel:hover, .model-card:hover { transform: translateY(-3px); box-shadow: var(--lift-2), var(--gloss); }
.panel { overflow: hidden; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 20px; border-bottom: var(--line-w) solid var(--line-soft);
  background: linear-gradient(180deg, #FFFFFF, #FBF6FD);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.panel-head h3 { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.panel-head .sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.panel-body { padding: 18px 20px; }

/* ---------- 按钮：粗描边 + 硬阴影 + 按下位移 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; letter-spacing: -.1px;
  border: var(--line-w) solid var(--edge);
  background: #fff; color: var(--ink);
  /* 伪 3D：底部厚度 + 顶部高光 */
  box-shadow: 0 3px 0 var(--edge-soft), var(--gloss);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .18s var(--ease);
  user-select: none; white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { background: #FDF7FB; transform: translateY(-2px); box-shadow: 0 5px 0 var(--edge-soft), var(--gloss); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge-soft); }
.btn-primary {
  background: var(--pink); border-color: var(--edge); color: #fff;
  box-shadow: 0 3px 0 var(--edge), inset 0 2px 0 rgba(255, 255, 255, .38);
}
.btn-primary:hover { background: #FF7FA9; transform: translateY(-2px); box-shadow: 0 5px 0 var(--edge), inset 0 2px 0 rgba(255, 255, 255, .38); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
.btn-ghost { background: transparent; border-color: var(--line-soft); box-shadow: none; }
.btn-ghost:hover { background: #fff; border-color: var(--pink-2); box-shadow: 2px 2px 0 rgba(46, 37, 64, .08); transform: translate(-1px, -1px); }
.btn-danger { color: var(--err); border-color: #F7C6D0; background: var(--err-bg); box-shadow: none; }
.btn-danger:hover { background: #FFD8DF; border-color: var(--err); box-shadow: 2px 2px 0 rgba(232, 84, 107, .18); transform: translate(-1px, -1px); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: var(--r-xs); }
.btn-sm svg { width: 13.5px; height: 13.5px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: var(--r); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; pointer-events: none; }

.icon-btn {
  width: 30px; height: 30px; border-radius: var(--r-xs);
  display: grid; place-items: center; color: var(--ink-2);
  transition: background .16s var(--ease), color .16s var(--ease); flex: none;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--pink-soft); color: var(--pink); }
.btn-icon { width: 36px; height: 36px; border-radius: var(--r-sm); }

/* ---------- 表单 ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 12.5px; font-weight: 700; color: var(--ink-1); }
.input {
  height: 43px; width: 100%; padding: 0 13px;
  border-radius: var(--r-sm);
  background: #fff;
  border: var(--line-w) solid var(--line-soft);
  font-size: 14px; color: var(--ink);
  /* 伪 3D：内凹感 */
  box-shadow: var(--carve);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: #DFD2E6; }
.input:focus { border-color: var(--pink); box-shadow: var(--carve), 0 0 0 4px var(--pink-soft); }
textarea.input { height: auto; min-height: 120px; padding: 12px 13px; resize: vertical; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; }
select.input { cursor: pointer; appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237E7594' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
select.input option { background: #fff; color: var(--ink); }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- 徽章 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 25px; padding: 0 10px;
  border-radius: 8px; font-size: 11.5px; font-weight: 700;
  background: #F5F0F8; color: var(--ink-1); border: 1.5px solid var(--line-soft);
  box-shadow: 0 2px 0 rgba(46, 37, 64, .12);
}
.badge.ok { background: var(--ok-bg); color: #0F8F5C; border-color: #B4E8CF; }
.badge.err { background: var(--err-bg); color: #C22E4A; border-color: #F9C2CC; }
.badge.warn { background: var(--warn-bg); color: #A8720B; border-color: #F7DFA8; }
.badge.acc { background: var(--pink-soft); color: #D63C72; border-color: var(--pink-2); }
/* 代理商徽章（紫色系，与管理员粉色区分） */
.badge.agent { background: var(--purple-soft); color: #6D4AC2; border-color: #D3C4FB; gap: 5px; }
.badge.agent svg { width: 12.5px; height: 12.5px; stroke: #6D4AC2; }
.uv-role { font-size: 9.5px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }

/* ---------- 代理中心 ---------- */
.agent-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.7;
  background: var(--purple-soft); border: 2px solid #DDD1FB; color: #53418A;
}
.agent-note svg { width: 15px; height: 15px; stroke: #6D4AC2; margin-top: 3px; }
.agent-note b { color: #4A3878; }
.agent-calc {
  padding: 12px 14px; margin-bottom: 16px; border-radius: var(--r-sm);
  background: #FBF8FF; border: 2px dashed #DCD0F5; font-size: 13px;
}
.ac-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; color: var(--ink-1); }
.ac-row b { font-family: var(--mono); color: var(--ink); }
.ac-row.main { border-top: 1px solid #EDE4FB; margin-top: 5px; padding-top: 7px; }
.ac-row b.good { color: #6D4AC2; }
.ac-row b.lack { color: var(--err); }
.badge .mono { font-size: 12px; }
.badge svg { width: 13.5px; height: 13.5px; }
.btn-xs svg { width: 13px; height: 13px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ============================================================
   登录 / 注册：左侧看板娘 + 对话气泡
   任何窗口尺寸都保持左右分栏，整页锁定视口高度、无滚动
   ============================================================ */
.auth {
  height: 100vh; height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  max-width: 1400px; margin: 0 auto; overflow: hidden;
}
.auth-brand {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 48px 44px; position: relative;
}
.auth-brand::after {
  content: ''; position: absolute; top: 4%; right: 0; bottom: 4%; width: 2px;
  background: linear-gradient(180deg, transparent, var(--line-soft) 16%, var(--line-soft) 84%, transparent);
}
.logo { display: flex; align-items: center; gap: 11px; }
.logo-mark {
  width: 40px; height: 40px; border-radius: 13px; background: var(--grad);
  display: grid; place-items: center; flex: none;
  border: var(--line-w) solid var(--line); box-shadow: 3px 3px 0 var(--line);
}
.logo-mark svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2.6px; display: block; }
.logo-name { font-size: 16.5px; font-weight: 700; letter-spacing: -.4px; line-height: 1.25; }
.logo-sub { font-size: 10.5px; color: var(--pink); letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; }

.auth-hero { text-align: center; max-width: 430px; }
/* 登录页品牌头：放大版 Logo 锁定组合（替代原 kicker 胶囊，避免重复表达） */
.auth-brand .logo { margin-bottom: 22px; gap: 13px; }
.auth-brand .logo-mark {
  width: 48px; height: 48px; border-radius: 15px;
  box-shadow: 3.5px 3.5px 0 var(--line), 0 0 0 7px rgba(255, 107, 157, .10);
  animation: logoBreath 3.6s ease-in-out infinite;
}
.auth-brand .logo-mark svg { width: 26px; height: 26px; }
.auth-brand .logo-name { font-size: 20px; letter-spacing: -.5px; }
.auth-brand .logo-sub { font-size: 11px; letter-spacing: 2.4px; margin-top: 2px; }
@keyframes logoBreath {
  0%, 100% { box-shadow: 3.5px 3.5px 0 var(--line), 0 0 0 7px rgba(255, 107, 157, .10); }
  50%      { box-shadow: 3.5px 3.5px 0 var(--line), 0 0 0 12px rgba(255, 107, 157, .05); }
}
/* ---------- 登录页主视觉：SVG 数据流动画 ---------- */
.hero-visual { width: min(470px, 94%); margin: 2px auto 4px; }
.hero-visual svg { width: 100%; height: auto; display: block; overflow: visible; }
.hv-label { font-family: var(--sans); font-size: 13px; font-weight: 700; fill: var(--ink-1); letter-spacing: .5px; }
.hv-label-core { fill: #D63C72; font-size: 13.5px; font-weight: 800; letter-spacing: 1px; }
.hv-model { font-size: 13.5px; fill: var(--ink); letter-spacing: .3px; }
.hv-chip-txt { font-family: var(--mono); font-size: 10.5px; font-weight: 700; fill: var(--ink-1); letter-spacing: .4px; }
/* 虚线流动 */
.hv-flow { stroke: #DFD2EC; stroke-width: 2.5; stroke-dasharray: 1 10; stroke-linecap: round; fill: none;
  animation: hvMarch 1.1s linear infinite; }
@keyframes hvMarch { to { stroke-dashoffset: -11; } }
/* 卡片轻浮动 */
.hv-float { animation: hvFloat 5.6s ease-in-out infinite; }
@keyframes hvFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hv-f-app  { animation-duration: 6.2s; }
.hv-f-m1   { animation-duration: 5.2s; animation-delay: -1.2s; }
.hv-f-m2   { animation-duration: 5.8s; animation-delay: -2.6s; }
.hv-f-m3   { animation-duration: 5.4s; animation-delay: -3.8s; }
.hv-f-c1   { animation-duration: 4.8s; animation-delay: -.9s; }
.hv-f-c2   { animation-duration: 5.1s; animation-delay: -2.1s; }
/* 星光闪烁 */
.hv-spark { transform-box: fill-box; transform-origin: center; animation: hvTwinkle 2.8s ease-in-out infinite; }
@keyframes hvTwinkle {
  0%, 100% { opacity: .25; transform: scale(.72) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.12) rotate(20deg); }
}
/* 标题流光 */
.auth-hero h1 .grad-text { background-size: 220% 100%; animation: hvSheen 4.5s ease-in-out infinite; }
@keyframes hvSheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- 登录页入场动画 ---------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.auth-brand .logo,
.hero-visual, .auth-hero h1, .auth-hero p,
.auth-feats .feat, .auth-brand .dim, .auth-panel .auth-card {
  animation: riseIn .7s var(--pop) backwards;
}
.auth-brand .logo { animation-delay: .05s; }
.hero-visual { animation-delay: .22s; }
.auth-hero h1 { animation-delay: .32s; }
.auth-hero p { animation-delay: .4s; }
.auth-feats .feat:nth-child(1) { animation-delay: .48s; }
.auth-feats .feat:nth-child(2) { animation-delay: .56s; }
.auth-feats .feat:nth-child(3) { animation-delay: .64s; }
.auth-panel .auth-card { animation-delay: .3s; }
.auth-brand .dim { animation-delay: .72s; }
.feat { transition: transform .2s var(--ease), border-color .2s var(--ease); }
.feat:hover { transform: translate(-2px, -2px); border-color: var(--pink-2); }
.auth-hero h1 {
  font-size: 34px; line-height: 1.3; font-weight: 700; letter-spacing: -1px; margin-bottom: 12px;
}
.auth-hero p { font-size: 14px; color: var(--ink-1); line-height: 1.8; }
.auth-feats { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; text-align: left; }
.feat { display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px;
  background: rgba(255, 255, 255, .78); border: 2px solid var(--line-soft); border-radius: 15px; }
.feat i { width: 32px; height: 32px; border-radius: 10px; flex: none;
  background: var(--pink-soft); border: 2px solid #FFCFE1; display: grid; place-items: center; }
.feat i svg { width: 15px; height: 15px; stroke: var(--pink); }
.feat b { font-size: 13.5px; font-weight: 700; display: block; }
.feat span { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }

.auth-panel { display: grid; place-items: center; padding: 40px 24px; }
.auth-card {
  width: 100%; max-width: 400px; padding: 32px 30px 26px;
  border-radius: var(--r-xl);
  background: #fff; border: var(--line-w) solid var(--edge);
  box-shadow: 0 7px 0 var(--edge-soft), 0 22px 42px -16px rgba(46, 37, 64, .32), var(--gloss);
}
.auth-card h2 { font-size: 22px; font-weight: 700; letter-spacing: -.6px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.auth-card > p { font-size: 13.5px; color: var(--ink-2); margin-bottom: 22px; }
.auth-form { display: flex; flex-direction: column; gap: 15px; }

.tabs { display: flex; gap: 6px; padding: 5px; margin-bottom: 22px;
  border-radius: 14px; background: #F8F1F6; border: 2px solid var(--line-soft); }
.tabs button { flex: 1; height: 34px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
  color: var(--ink-2); transition: all .18s var(--ease); }
.tabs button.active { background: #fff; color: var(--pink); box-shadow: 2px 2px 0 rgba(46, 37, 64, .1); }

.alert { padding: 11px 13px; border-radius: var(--r-sm); font-size: 13px;
  display: flex; gap: 9px; align-items: flex-start; line-height: 1.55;
  background: var(--err-bg); color: #A82038; border: 2px solid #F9C2CC; }
.alert svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.alert.ok { background: var(--ok-bg); color: #0B7A4E; border-color: #B4E8CF; }

/* ============================================================
   应用外壳
   ============================================================ */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px; flex: none; height: 100vh; position: sticky; top: 0;
  display: flex; flex-direction: column; padding: 18px 12px 14px;
  background: rgba(255, 255, 255, .82);
  border-right: var(--line-w) solid var(--line-soft);
  box-shadow: 8px 0 22px -14px rgba(46, 37, 64, .3);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 20;
}
.sidebar .logo { padding: 4px 8px 18px; }
.sidebar .logo-sub { letter-spacing: 1.1px; }
.nav { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; margin-right: -4px; padding-right: 4px; }
.nav-label { font-size: 10px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--ink-3); padding: 15px 11px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 39px; padding: 0 10px;
  border: 2px solid transparent; border-radius: 13px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-1);
  transition: all .16s var(--ease);
}
.nav-item svg { width: 18px; height: 18px; stroke: currentColor; flex: none; stroke-width: 1.8; }
.nav-item:hover svg { transform: translateY(-1px); }
.nav-item svg { transition: transform .18s var(--ease); }
.nav-item:hover { background: #FBF4F9; color: var(--ink); border-color: var(--line-soft); }
.nav-item.active {
  background: var(--pink-soft); color: #D63C72; font-weight: 700;
  border-color: var(--pink-2);
  box-shadow: 0 3px 0 var(--pink-2), inset 0 2px 0 rgba(255, 255, 255, .9);
}
.nav-item.active svg { stroke: var(--pink); }

.side-user { border-top: 2px solid var(--line-soft); padding-top: 12px; margin-top: 10px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px 9px;
  border-radius: var(--r); margin-bottom: 2px; transition: background .16s var(--ease); }
.user-chip:hover { background: #FBF4F9; }
.avatar { width: 32px; height: 32px; border-radius: 11px; flex: none;
  background: var(--grad); color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  border: 2px solid var(--line); }
.user-chip .nm { font-size: 13px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .em { font-size: 11px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 66px; flex: none; position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; gap: 14px; padding: 0 28px;
  border-bottom: var(--line-w) solid var(--line-soft);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 4px 14px -8px rgba(46, 37, 64, .26);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.topbar h1 { font-size: 16.5px; font-weight: 700; letter-spacing: -.4px; line-height: 1.3; }
.topbar .sub { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.content { padding: 26px 28px 64px; max-width: 1400px; width: 100%; margin: 0 auto; flex: 1; }
.content > * { animation: pageIn .36s var(--pop) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.burger { display: none; }

/* ---------- 统计卡：彩色糖果 + 粗描边 ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 15px; margin-bottom: 20px; }
.stat {
  position: relative; overflow: hidden; padding: 17px 19px 16px;
  background: #fff; border: var(--line-w) solid var(--edge); border-radius: var(--r-lg);
  /* 伪 3D：彩色厚度 + 远投影 + 顶部高光 */
  box-shadow: 0 5px 0 var(--sd, #E7DAED), 0 14px 26px -10px rgba(46, 37, 64, .24), var(--gloss);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.stat:hover { transform: translateY(-4px); box-shadow: 0 9px 0 var(--sd, #E7DAED), 0 22px 34px -12px rgba(46, 37, 64, .28), var(--gloss); }
.stat::after {
  content: ''; position: absolute; top: -46px; right: -34px; width: 128px; height: 128px;
  border-radius: 50%; background: var(--sc, var(--pink-soft)); opacity: .55; pointer-events: none;
}
.stat > * { position: relative; z-index: 1; }
.stat .lbl { font-size: 11.5px; color: var(--ink-2); font-weight: 700;
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.stat .lbl svg { width: 14px; height: 14px; stroke: var(--sc2, var(--pink)); }
.stat .val { font-size: 27px; font-weight: 700; letter-spacing: -1px; line-height: 1.15; font-family: var(--mono); color: var(--ink);
  text-shadow: 1px 1.5px 0 rgba(46, 37, 64, .1); }
.stat .val small { font-size: 15px; font-weight: 600; color: var(--ink-3); }
.stat .foot { font-size: 11.5px; color: var(--ink-2); margin-top: 8px; }
.stat.hero { --sc: #FFD9E7; --sc2: var(--pink); --sd: #FFC0D6; background: linear-gradient(160deg, #FFF4F8, #fff); }
.stat.c-blue { --sc: #D6ECFF; --sc2: var(--blue); --sd: #A5D3F9; }
.stat.c-purple { --sc: #E7DEFF; --sc2: var(--purple); --sd: #C9BDF8; }
.stat.c-yellow { --sc: #FFEFC2; --sc2: #E8A317; --sd: #F5D88C; }

/* ---------- 表格 ---------- */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { text-align: left; padding: 11px 20px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase; color: var(--ink-2);
  border-bottom: var(--line-w) solid var(--line-soft); white-space: nowrap; background: #FCF8FE; }
tbody td { padding: 12px 20px; border-bottom: 1.5px solid #F4EDF7; vertical-align: middle; }
tbody tr { transition: background .14s var(--ease); }
tbody tr:hover { background: #FFF6FA; }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-family: var(--mono); font-size: 12.5px; }
td .sub { font-size: 11px; color: var(--ink-2); margin-top: 2px; }

/* ---------- 空状态：线性图标 + 文案 ---------- */
.empty { padding: 44px 20px; text-align: center; }
.empty-ic {
  width: 62px; height: 62px; margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 19px; background: var(--pink-soft); border: 2px solid var(--pink-2);
}
.empty-ic svg { width: 26px; height: 26px; stroke: var(--pink); }
.empty p { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.empty .btn { margin-top: 16px; }

/* ---------- 密钥行 ---------- */
.keybox { display: flex; align-items: center; gap: 6px; max-width: 340px;
  padding: 5px 6px 5px 11px;
  background: #FBF7FD; border: 2px solid var(--line-soft); border-radius: var(--r-xs);
  font-family: var(--mono); font-size: 12.5px;
  box-shadow: var(--carve); transition: border-color .18s var(--ease); }
.keybox:hover { border-color: var(--pink-2); }
.keybox > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.keybox .icon-btn { width: 25px; height: 25px; border-radius: 7px; }
.keybox .icon-btn svg { width: 13px; height: 13px; }

/* ---------- 兑换 ---------- */
.redeem-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start; }
.redeem-hero { padding: 30px 30px 28px; border-radius: var(--r-xl); position: relative; overflow: hidden;
  background: linear-gradient(160deg, #FFF2F7, #FBFAFF);
  border: var(--line-w) solid var(--pink-2); box-shadow: var(--shadow);
  display: flex; gap: 20px; align-items: center; }
.redeem-hero .rh-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.redeem-hero h2 { font-size: 23px; font-weight: 700; letter-spacing: -.7px; margin-bottom: 6px; }
.redeem-hero > .rh-body > p { font-size: 13.5px; color: var(--ink-1); margin-bottom: 20px; line-height: 1.7; }
.code-input { height: 54px !important; font-family: var(--mono); font-size: 18px;
  letter-spacing: 2.5px; text-align: center; text-transform: uppercase; font-weight: 700; }
.quota-display { padding: 22px 20px; border-radius: var(--r-lg); text-align: center; }
.quota-display .cap { font-size: 10.5px; color: var(--ink-2); letter-spacing: 1.1px; text-transform: uppercase; font-weight: 800; }
.quota-display .big { font-size: 34px; font-weight: 700; letter-spacing: -1.4px; font-family: var(--mono); margin: 6px 0 4px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- 模型（按厂商分类 + 官方品牌图标） ---------- */
.mg { margin-bottom: 26px; }
.mg-head {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; margin-bottom: 13px;
  background: #fff; border: var(--line-w) solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.mg-ic, .mc-ic {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: #F6F2FA; border: 1.5px solid var(--line-soft); flex: none;
}
.mg-ic { width: 36px; height: 36px; }
.mg-ic img { width: 20px; height: 20px; }
.mc-ic { width: 30px; height: 30px; border-radius: 9px; }
.mc-ic img { width: 16px; height: 16px; }
.mc-ic svg { width: 15px; height: 15px; color: var(--ink-3); }
.b-claude { background: #FBEFE9; border-color: #F3DCD1; }
.b-gemini { background: #EAF2FD; border-color: #D6E4F8; }
.b-gpt, .b-openai { background: #F0F2F1; border-color: #DFE5E2; }
.b-kimi { background: #FDF0F7; border-color: #F6D6E7; }
.b-other  { background: #F5F0F8; border-color: var(--line-soft); }
.mg-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mg-t b { font-size: 13.5px; font-weight: 750; color: var(--ink); }
.mg-t span { font-size: 11.5px; color: var(--ink-2); }
.mg-count { margin-left: auto; flex: none; font-size: 11px; font-weight: 750; color: var(--ink-2);
  padding: 4px 11px; border-radius: 999px; background: #F7F3FA; border: 1.5px solid var(--line-soft); }
.models-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 13px; }
.model-card { padding: 15px 16px 14px; overflow: hidden; }
.model-card:hover { transform: translate(-2px, -2px); border-color: var(--pink-2); box-shadow: 5px 5px 0 var(--pink-soft); }
.model-card .mc-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.model-card.off { opacity: .62; filter: saturate(.55); }
.mc-off { margin-left: auto; flex: none; align-self: center; font-size: 9.5px; font-weight: 750;
  color: #A8720B; background: var(--warn-bg); border: 1px solid #F7DFA8; border-radius: 999px; padding: 2px 7px; }
.model-card .mc-name { font-family: var(--mono); font-size: 12.5px; font-weight: 600; word-break: break-all; line-height: 1.45; padding-top: 6px; flex: 1; min-width: 0; }
.model-card .pr { display: flex; gap: 20px; font-size: 11px; color: var(--ink-2); font-weight: 600; }
.model-card .pr b { display: block; color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 12.5px; margin-top: 2px; }

/* ---------- 代码块 ---------- */
.codeblock { border-radius: var(--r); border: var(--line-w) solid var(--edge);
  background: #FDFBFF; overflow: hidden; box-shadow: 0 3px 0 var(--edge-soft), var(--gloss); }
.codeblock .cb-head { display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 8px 14px; border-bottom: var(--line-w) solid var(--line-soft); background: #FAF6FD; }
.codeblock .cb-head span { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; color: var(--ink-2); text-transform: uppercase; }
.codeblock pre { padding: 15px 17px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.8; color: #4A3F60; }
.codeblock pre .k { color: #B4347A; font-weight: 600; }
.codeblock pre .s { color: #1373A8; }
.codeblock pre .c { color: #9A92AC; font-style: italic; }

/* ---------- 文档 ---------- */
.doc-section { margin-bottom: 24px; }
.doc-section h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 11px; display: flex; align-items: center; gap: 9px; }
.doc-section h3 .n { width: 23px; height: 23px; border-radius: 9px; flex: none;
  background: var(--pink); color: #fff; border: 2px solid var(--line);
  display: grid; place-items: center; font-size: 11px; font-weight: 800; box-shadow: 2px 2px 0 var(--line); }
.doc-section > p { font-size: 13.5px; color: var(--ink-1); margin-bottom: 13px; max-width: 780px; line-height: 1.75; }
.endpoint { display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--r); margin-bottom: 13px;
  background: #fff; border: var(--line-w) solid var(--line-soft);
  box-shadow: 0 3px 0 var(--edge-soft), var(--gloss); }
.endpoint .m { font-size: 10px; font-weight: 800; letter-spacing: .7px; padding: 3px 9px; border-radius: 6px;
  background: var(--ok-bg); color: #0F8F5C; font-family: var(--mono); border: 1.5px solid #B4E8CF; }
.endpoint .m.post { background: var(--pink-soft); color: #D63C72; border-color: var(--pink-2); }
.endpoint code { font-family: var(--mono); font-size: 13px; color: var(--ink); flex: 1; min-width: 180px; font-weight: 600; }

/* ---------- 图表：彩虹柱 + 气泡提示 ---------- */
.chart-wrap { padding: 18px 20px 4px; }
.chart { height: 132px; display: flex; align-items: flex-end; gap: 6px; }
.chart-slot { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.chart .bar { width: 100%; min-height: 5px; border-radius: 7px 7px 3px 3px; position: relative;
  background: linear-gradient(180deg, #FF8FB4, #FF6B9D); border: 2px solid var(--line);
  transition: transform .18s var(--pop), filter .18s var(--ease); }
.chart .bar:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 4px 0 rgba(46, 37, 64, .2); }
.chart .bar::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%); padding: 5px 10px; border-radius: 10px; white-space: nowrap;
  font-size: 11.5px; font-family: var(--sans); font-weight: 700; color: var(--ink);
  background: #fff; border: 2px solid var(--line); box-shadow: 2px 2px 0 var(--pink-2);
  opacity: 0; pointer-events: none; transition: opacity .18s var(--ease); z-index: 5; }
.chart .bar:hover::after { opacity: 1; }
.chart-empty { height: 132px; display: grid; place-items: center; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.chart-x { display: flex; justify-content: space-between; padding: 8px 20px 14px; font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); font-weight: 600; }

/* ---------- 模态 ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  background: rgba(60, 44, 74, .34); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade .2s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { width: 100%; max-width: 430px; padding: 26px 26px 22px; position: relative;
  border-radius: var(--r-xl); background: #fff; border: var(--line-w) solid var(--edge);
  box-shadow: 0 7px 0 var(--edge-soft), 0 26px 50px -18px rgba(46, 37, 64, .38), var(--gloss);
  animation: pop .3s var(--pop); }
.modal.wide { max-width: 610px; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.modal h3 { font-size: 17.5px; font-weight: 700; letter-spacing: -.4px; margin-bottom: 6px; }
.modal .desc { font-size: 13px; color: var(--ink-2); margin-bottom: 20px; line-height: 1.7; }
.modal .modal-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 22px; }
.modal-close { position: absolute; top: 15px; right: 15px; }

/* ---------- Toast ---------- */
.toasts { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 9px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; max-width: 400px;
  border-radius: var(--r); font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: #fff; border: var(--line-w) solid var(--edge);
  box-shadow: 0 4px 0 var(--edge-soft), 0 14px 28px -12px rgba(46, 37, 64, .3), var(--gloss);
  animation: slideIn .34s var(--pop); pointer-events: auto; }
.toast.out { animation: slideOut .24s var(--ease) forwards; }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes slideOut { to { opacity: 0; transform: translateX(24px); } }
.toast svg { width: 16px; height: 16px; flex: none; }
.toast.ok svg { stroke: var(--ok); } .toast.err svg { stroke: var(--err); } .toast.info svg { stroke: var(--blue); }

/* ---------- 加载 / 分页 ---------- */
.loading { min-height: 50vh; display: grid; place-items: center; }
.spinner { width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--pink-soft); border-top-color: var(--pink); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 20px; border-top: var(--line-w) solid var(--line-soft); font-size: 12.5px; color: var(--ink-2); }
.pager-btns { display: flex; gap: 7px; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1120px) { .redeem-wrap { grid-template-columns: 1fr; } .redeem-hero { flex-direction: column; text-align: center; } }
@media (max-width: 1024px) {
  /* 保持左右分栏，不再上下堆叠；整页锁定视口高度 */
  .auth { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); max-width: none; }
  .auth-brand { padding: 24px 18px; }
  .auth-brand::after { display: none; }
  .auth-feats { display: none; }
  .auth-hero { max-width: none; }
  .auth-hero h1 { font-size: clamp(20px, 3.4vw, 30px); }
  .auth-hero p { font-size: 12.5px; line-height: 1.7; }
  .hero-visual { width: min(94%, 430px); }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 30; transform: translateX(-100%);
    transition: transform .27s var(--ease); box-shadow: 24px 0 60px -20px rgba(46, 37, 64, .3); background: #fff; }
  .sidebar.open { transform: none; }
  .burger { display: grid; }
  .scrim { position: fixed; inset: 0; background: rgba(60, 44, 74, .4); z-index: 25; animation: fade .2s; }
  .content { padding: 20px 18px 60px; }
  .topbar { padding: 0 18px; }
}
@media (max-width: 720px) {
  .auth-brand { padding: 16px 14px; }
  .auth-hero p { display: none; }
  .auth-brand .logo { margin-bottom: 12px; gap: 10px; }
  .auth-brand .logo-mark { width: 40px; height: 40px; border-radius: 13px; }
  .auth-brand .logo-mark svg { width: 22px; height: 22px; }
  .auth-brand .logo-name { font-size: 16.5px; }
  .auth-brand .logo-sub { font-size: 9.5px; letter-spacing: 1.8px; }
  .hero-visual { width: min(97%, 330px); margin: 0 auto; }
  .auth-panel { padding: 16px 12px; }
  .auth-card { padding: 24px 20px 20px; max-width: none; }
  .auth-card h2 { font-size: 19px; }
  .auth-card > p { font-size: 12.5px; margin-bottom: 16px; }
  .auth-form { gap: 12px; }
}
/* 矮窗口（宽屏）：收缩主视觉与次要内容，保证不滚动 */
@media (min-width: 1025px) and (max-height: 880px) {
  .auth-feats { display: none; }
  .hero-visual { width: min(420px, 88%); }
}
@media (min-width: 1025px) and (max-height: 740px) {
  .auth-hero p { display: none; }
  .hero-visual { width: min(360px, 84%); }
  .auth-hero h1 { font-size: 28px; }
}
@media (max-width: 760px) {
  /* 登录/注册：窄屏只留表单卡片，隐藏左侧品牌区，允许纵向滚动 */
  .auth { grid-template-columns: 1fr; height: auto; min-height: 100dvh; overflow: visible; }
  .auth-brand { display: none; }
  .auth-panel { padding: 24px 16px 32px; }
  .auth-card { max-width: 440px; }
}
@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .stat { padding: 14px 15px 13px; }
  .stat .val { font-size: 21px; }
  .content { padding: 16px 14px 60px; }
  .toasts { left: 14px; right: 14px; bottom: 14px; }
  .toast { max-width: none; }
  thead th, tbody td { padding-left: 14px; padding-right: 14px; }
  /* 表格横向滚动而不是把列挤到换行 */
  .tbl-wrap table { width: max-content; min-width: 100%; }
  .tbl-wrap th, .tbl-wrap td { white-space: nowrap; }
  /* 页头徽章/按钮在窄屏换行，避免竖排挤压 */
  .panel-head { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  .panel-head > .badge { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 数字变化高亮（余额/消耗自动刷新时轻微放大变色，1 次动画后复原） */
.num-flash { animation: numflash .9s cubic-bezier(.22,1,.36,1); }
@keyframes numflash {
  0% { color: var(--pink); transform: scale(1.08); }
  60% { color: var(--pink); }
  100% { transform: scale(1); }
}
.val.grad-text.num-flash { animation: numflashGrad .9s cubic-bezier(.22,1,.36,1); }
@keyframes numflashGrad {
  0% { transform: scale(1.08); filter: brightness(1.25); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* 上游分流：实时并发条 */
.dot { width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block; }
.dot.ok { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.dot.warn { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.dot.off { background:#c3bccd; }
.lane { display:flex;flex-direction:column;gap:5px; }
.lane-bar { height:8px;border-radius:99px;background:var(--carve);overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(46,37,64,.10); }
.lane-fill { height:100%;border-radius:99px;background:linear-gradient(90deg,#3FA9F5,#A78BFA);
  transition:width .35s cubic-bezier(.22,1,.36,1); }
.lane-fill.busy { background:linear-gradient(90deg,#FFC53D,#FF6B9D); }
.lane-num { font-size:12px;display:flex;align-items:center;gap:6px; }
.lane-num .wait { color:var(--pink);font-weight:700; }
.warn-txt { color:#e08a1e; }

/* 搜索框组件（用户管理 / 全站日志通用）：白底内凹 + 粉色聚焦，与全站伪 3D 风格一致 */
.search-box {
  display: flex; align-items: center; gap: 8px;
  width: 280px; height: 40px; padding: 0 13px;
  background: #fff;
  border: var(--line-w) solid var(--line-soft);
  border-radius: var(--r-sm);
  box-shadow: var(--carve);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search-box svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); transition: color .18s var(--ease); }
.search-box:focus-within { border-color: var(--pink); box-shadow: var(--carve), 0 0 0 4px var(--pink-soft); }
.search-box:focus-within svg { color: var(--pink); }
.search-box input {
  flex: 1; min-width: 0; height: 100%;
  border: none; outline: none; background: transparent;
  font-size: 13px; color: var(--ink);
}
.search-box input::placeholder { color: var(--ink-3); }
.search-box .sb-clear {
  flex: none; width: 20px; height: 20px; border: none; border-radius: 50%;
  background: var(--pink-soft); color: var(--pink); cursor: pointer;
  display: none; align-items: center; justify-content: center; padding: 0;
}
.search-box .sb-clear svg { width: 11px; height: 11px; color: var(--pink); }
.search-box.has-value .sb-clear { display: inline-flex; }
.search-box .sb-clear:hover { background: var(--pink); color: #fff; }

/* 兑换页（专业版） */
.redeem-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
.redeem-grid .panel-head { padding: 20px 28px 0; }
.redeem-side { display: flex; flex-direction: column; gap: 18px; }
.redeem-tips { list-style: none; margin: 0; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.redeem-tips li { display: flex; gap: 11px; align-items: flex-start; font-size: 12.8px; color: var(--ink-1); line-height: 1.65; }
.redeem-tips .tip-ic { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--pink-soft);
  display: inline-flex; align-items: center; justify-content: center; }
.redeem-tips .tip-ic svg { width: 14.5px; height: 14.5px; stroke: var(--pink); }
.redeem-success { display: flex; gap: 14px; align-items: center; padding: 15px 18px;
  border-radius: var(--r-lg); background: var(--mint-soft);
  border: var(--line-w) solid rgba(53, 208, 165, .45); animation: popIn .3s cubic-bezier(.22,1,.36,1); }
.redeem-success .rs-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--mint);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 rgba(53, 208, 165, .35); }
.redeem-success .rs-ic svg { width: 18px; height: 18px; }
.spin-inline { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff; border-radius: 50%; vertical-align: -2px; margin-right: 7px;
  animation: spin .7s linear infinite; }
@keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1120px) { .redeem-grid { grid-template-columns: 1fr; } }

/* 兑换码输入框（焦点组件）：钥匙图标 + 大内凹框 + 粘贴按钮 */
.code-field {
  display: flex; align-items: center; gap: 10px;
  height: 62px; padding: 0 16px;
  background: #FCFAFF;
  border: var(--line-w) solid var(--line-soft);
  border-radius: 14px;
  box-shadow: var(--carve);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.code-field:focus-within {
  border-color: var(--pink); background: #fff;
  box-shadow: var(--carve), 0 0 0 4px var(--pink-soft);
}
.code-field .cf-ic { flex: none; display: inline-flex; color: var(--ink-3); transition: color .18s var(--ease); }
.code-field .cf-ic svg { width: 18px; height: 18px; }
.code-field:focus-within .cf-ic { color: var(--pink); }
.code-field .code-input {
  flex: 1; min-width: 0; height: 100%;
  border: none !important; outline: none !important; background: transparent !important;
  box-shadow: none !important; padding: 0; height: 62px;
  font-family: var(--mono); font-size: 19px; font-weight: 700;
  letter-spacing: 2.5px; text-align: center; text-transform: uppercase; color: var(--ink);
}
.code-field .code-input::placeholder { color: #CBC4D9; font-weight: 600; letter-spacing: 2px; }
.code-field .cf-paste {
  flex: none; border: none; cursor: pointer;
  height: 34px; padding: 0 14px; border-radius: 10px;
  background: var(--pink-soft); color: var(--pink);
  font-size: 12.5px; font-weight: 750;
  transition: background .15s var(--ease), color .15s var(--ease), transform .12s;
}
.code-field .cf-paste:hover { background: var(--pink); color: #fff; }
.code-field .cf-paste:active { transform: scale(.94); }
.code-field.filled .cf-paste { display: none; }

/* ============ 充值中心 ============ */
.recharge-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; align-items: start; }
.recharge-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.recharge-side { display: flex; flex-direction: column; gap: 18px; }
.recharge-grid .panel-head { padding: 20px 24px 0; }
.recharge-grid .panel-head .badge { white-space: nowrap; }
.rc-body { padding: 18px 24px 24px; }
.rc-history { padding: 0 20px 12px; }

/* 步骤标记 */
.rc-step { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 750; color: var(--ink);
  margin-bottom: 12px; }
.rc-step-gap { margin-top: 24px; }
.rc-no { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--grad);
  box-shadow: 2px 2px 0 rgba(46, 37, 64, .16); }

/* 金额预设：实付 + 到账额度一眼可比；限时档位单独高亮 */
.rc-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; padding-top: 9px; }
.rc-preset { cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 2px; min-height: 92px; padding: 15px 7px 11px; border-radius: var(--r-sm);
  background: #fff; border: var(--line-w) solid var(--line-soft); box-shadow: var(--shadow-sm);
  color: var(--ink); text-align: center;
  transition: transform .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease); }
.rc-preset:hover { transform: translate(-1px, -1px); border-color: var(--pink-2); box-shadow: var(--shadow); }
.rc-preset.on { background: linear-gradient(160deg, #FFF2F7, #fff); border-color: var(--pink);
  box-shadow: var(--shadow), 0 0 0 3px var(--pink-soft); }
.rc-ppay { font-family: var(--mono); font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -.5px; }
.rc-pcredit { font-size: 11px; font-weight: 650; color: var(--ink-3); white-space: nowrap; }
.rc-pcredit b { font-family: var(--mono); font-size: 12px; color: var(--mint); }
.rc-preset.on .rc-pcredit b { color: #0F8F5C; }
.rc-pbonus { font-size: 10.5px; font-weight: 750; color: #D63C72; }
.rc-ptag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 2px 7px; border-radius: 999px; background: var(--grad); color: #fff;
  font-family: var(--sans); font-size: 9.5px; font-weight: 800; letter-spacing: .2px;
  box-shadow: 0 2px 5px rgba(214, 60, 114, .28); }

/* 限时加赠横幅 + 倒计时 */
.rc-promo { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 13px 15px; border-radius: var(--r-sm); overflow: hidden;
  background: linear-gradient(135deg, #FFF3F8 0%, #F8F0FF 100%);
  border: 2px solid #F6D4E3; box-shadow: var(--shadow-sm); }
.rc-promo-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid #F7C6DA; color: var(--pink); box-shadow: 0 2px 0 rgba(214,60,114,.12); }
.rc-promo-ic svg { width: 19px; height: 19px; }
.rc-promo-main { flex: 1; min-width: 0; }
.rc-promo-title { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.rc-promo-title b { color: #B02A5B; font-weight: 800; }
.rc-promo-sub { margin-top: 3px; font-size: 12px; color: #7A5A6B; }
.rc-promo-sub b { font-family: var(--mono); font-size: 14px; color: #D63C72; }
.rc-promo-time { flex: none; text-align: right; font-size: 10.5px; color: #9A7C8B; }
.rc-promo-time b { display: block; margin-top: 2px; font-family: var(--mono); font-size: 13px; color: #B02A5B; white-space: nowrap; }

/* CTA 下方：到账额度提示 */
.rc-credit-line { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.rc-credit-line b { font-family: var(--mono); font-size: 15px; color: var(--ink); }
.rc-credit-line span { font-size: 11px; color: var(--ink-3); }
.rc-credit-line.promo { color: #B02A5B; }
.rc-credit-line.promo b { font-size: 17px; color: #0F8F5C; }
.rc-credit-line.promo span { color: #B02A5B; font-weight: 750; }
.rc-credit-line.promo svg { width: 14px; height: 14px; }

/* 支付页：加赠到账提示 */
.rc-promo-note { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding: 7px 10px;
  border-radius: 10px; background: #FFF5F9; border: 1.5px solid #F7D3E2;
  color: #B02A5B; font-size: 11.5px; font-weight: 650; }
.rc-promo-note b { font-family: var(--mono); color: #0F8F5C; }
.rc-promo-note svg { width: 14px; height: 14px; flex: none; }

/* 自定义金额：货币符号内嵌，右侧给区间提示 */
.rc-custom { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.rc-custom .rc-cur { flex: none; width: 46px; height: 46px; border-radius: var(--r-xs); display: grid; place-items: center;
  background: var(--yellow-soft); border: var(--line-w) solid #F5D88C; font-weight: 800; color: #B57B00; font-size: 16px; }
.rc-input { flex: 1; min-width: 120px; height: 46px; padding: 0 13px; border-radius: var(--r-xs);
  border: var(--line-w) solid var(--line-soft); background: #FCFAFF; box-shadow: var(--carve);
  font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--ink); outline: none;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease); }
.rc-input:focus { border-color: var(--pink); background: #fff; box-shadow: var(--carve), 0 0 0 4px var(--pink-soft); }

/* 渠道分段选择：紧凑单行，选中打勾 */
.rc-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rc-ch { cursor: pointer; display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 13px;
  border-radius: var(--r-sm); background: #fff; border: var(--line-w) solid var(--line-soft); box-shadow: var(--shadow-sm);
  font-size: 13.5px; font-weight: 700; color: var(--ink-1);
  transition: transform .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease); }
.rc-ch .rc-ch-name { flex: 1; min-width: 0; text-align: left; }
.rc-ch svg { width: 20px; height: 20px; flex: none; }
.rc-ch.wechat svg { stroke: var(--ok); }
.rc-ch.alipay svg { stroke: var(--blue); }
.rc-ch:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow); }
.rc-ch.on { border-color: var(--pink); background: linear-gradient(160deg, #FFF2F7, #fff); color: var(--ink);
  box-shadow: var(--shadow), 0 0 0 3px var(--pink-soft); }
.rc-check { flex: none; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center;
  background: var(--pink); color: #fff; box-shadow: 2px 2px 0 rgba(46, 37, 64, .16); }
.rc-check svg { width: 13px; height: 13px; stroke-width: 3.2; }
.rc-ch.on .rc-check { display: grid; }

/* CTA 与底部说明 */
#rc-create { margin-top: 22px; }
.rc-notice { font-size: 11.5px; margin-top: 12px; line-height: 1.7; color: var(--ink-2); }

/* 余额卡（充值页 / 兑换页共用）：整页的视觉锚点（渐变底 + 漫画描边） */
.balance-hero { position: relative; overflow: hidden; padding: 22px 20px 20px; border-radius: var(--r-lg);
  background: var(--grad); border: var(--line-w) solid rgba(46, 37, 64, .16); box-shadow: var(--shadow);
  color: #fff; text-align: center; }
.balance-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(140px 70px at 14% 4%, rgba(255, 255, 255, .38), transparent 70%),
  radial-gradient(190px 95px at 92% 106%, rgba(255, 255, 255, .24), transparent 72%); }
.balance-hero .cap { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 800; opacity: .92; }
.balance-hero .big { font-family: var(--mono); font-size: 38px; font-weight: 750; letter-spacing: -1.6px; line-height: 1.25; }
.balance-hero .tip { font-size: 12px; opacity: .88; }

/* 支付结果区 */
.rc-pay { display: grid; grid-template-columns: 232px 1fr; gap: 22px; padding: 22px 24px 26px; align-items: start; }
.rc-qr { position: relative; width: 232px; height: 232px; border-radius: var(--r-lg); overflow: hidden;
  background: #fff; border: var(--line-w) solid var(--line-soft); box-shadow: var(--shadow);
  display: grid; place-items: center; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.rc-qr img { width: 100%; height: 100%; object-fit: contain; padding: 8px; background: #fff; }
.rc-qr.dimed { filter: grayscale(1); opacity: .45; }
/* 二维码下方的小字收银台入口（电脑用户兜底），不再是醒目大按钮 */
.rc-qr.has-link { height: auto; padding: 16px; gap: 10px; }
.rc-goto-link { font-size: 11.5px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-style: dotted; }
.rc-goto-link:hover { color: var(--pink); }
/* 二维码 + 「前往支付」按钮竖排（收银台链接也渲染成二维码时用） */
.rc-qr.stack { width: 232px; height: auto; padding: 18px; gap: 13px; }
.rc-qr-wrap { position: relative; width: 194px; height: 194px; border-radius: var(--r-md);
  overflow: hidden; background: #fff; border: var(--line-w) solid var(--line-soft); }
.rc-qr-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; }
.rc-qr-mask { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 14px;
  background: rgba(255, 255, 255, .9); color: var(--ink-2); font-size: 12.5px; }
.rc-payinfo { min-width: 0; }
.rc-amt-big { font-family: var(--mono); font-size: 38px; font-weight: 750; letter-spacing: -1.6px; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rc-amt-tip { font-size: 12.5px; color: var(--ink-2); margin: 8px 0 16px; line-height: 1.65; }
.rc-field { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-xs);
  background: #FBF7FD; border: 1.5px solid var(--line-soft); margin-bottom: 9px; }
.rc-field .k { flex: none; font-size: 12px; color: var(--ink-2); font-weight: 700; min-width: 58px; }
.rc-field .v { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-field .icon-btn { width: 28px; height: 28px; border-radius: 8px; background: var(--pink-soft); color: var(--pink); }
.rc-status { display: flex; align-items: center; gap: 8px; margin-top: 13px; font-size: 12.8px;
  color: var(--ink-1); font-weight: 600; }
.rc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 4px var(--yellow-soft); animation: rcPulse 1.4s ease-in-out infinite; }
.rc-dot.wait { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.rc-dot.bad { background: var(--err); box-shadow: 0 0 0 4px var(--err-bg); animation: none; }
@keyframes rcPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .55; } }

/* 充值成功 */
.rc-done { padding: 30px 24px 28px; text-align: center; animation: popIn .32s cubic-bezier(.22,1,.36,1); }
.rc-done-ic { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mint); color: #fff; box-shadow: 0 5px 0 rgba(53, 208, 165, .35); }
.rc-done-ic svg { width: 30px; height: 30px; stroke-width: 2.6; }
.rc-done h3 { font-size: 18px; font-weight: 750; margin-bottom: 6px; }
.rc-done-amt { font-family: var(--mono); font-size: 32px; font-weight: 750; color: var(--mint); letter-spacing: -1.2px; }

/* 充值记录列表 */
.rc-list { display: flex; flex-direction: column; }
.rc-total { margin-top: 3px; }
.rc-total b { font-family: var(--mono); font-size: 13px; font-weight: 750; color: var(--mint); }
.rc-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1.5px solid #F4EDF7; }
.rc-item:last-child { border-bottom: none; }
.rc-item.is-paid { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(240, 253, 247, .55)); }
.rc-item-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rc-item-no { font-size: 11.5px; color: var(--ink-1); }
.rc-item-sub { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.rc-item-side { flex: none; text-align: right; }
.rc-item-amt { font-family: var(--mono); font-size: 14px; font-weight: 750; color: var(--ink); white-space: nowrap; }
.rc-item-amt.plus { font-size: 16px; color: var(--mint); }
.rc-item-label { font-size: 10px; color: var(--ink-3); margin-top: 1px; }
.badge.test { background: #F8F1FF; color: #7A4FBF; border-color: #E2D0FA; height: 20px; padding: 0 7px; font-size: 10px; box-shadow: none; }
.badge.promo { background: #EAFBF3; color: #0F8F5C; border-color: #B4E8CF; height: 20px; padding: 0 7px; font-size: 10px; box-shadow: none; }
.promo-admin-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.promo-admin-title svg { width: 15px; height: 15px; stroke: var(--pink); }

@media (max-width: 1120px) { .recharge-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .rc-pay { grid-template-columns: 1fr; }
  .rc-qr { justify-self: center; }
  .rc-body { padding: 16px 16px 20px; }
  .rc-channels { grid-template-columns: 1fr; }
}

/* ============ 管理：收款码 ============ */
.pay-qr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; padding: 20px 24px 24px; }
.pay-qr-card { padding: 14px; border-radius: var(--r-lg); background: #fff;
  border: var(--line-w) solid var(--line-soft); box-shadow: var(--shadow); }
.pay-qr-card.off { background: #FBFAFD; }
.pq-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pq-head svg { width: 18px; height: 18px; }
.pq-head b { font-size: 13.5px; font-weight: 750; color: var(--ink); }
.pq-head .badge { margin-left: auto; }
.pq-thumb { position: relative; width: 100%; max-width: 230px; margin: 0 auto; aspect-ratio: 1;
  border-radius: var(--r-sm); overflow: hidden;
  background: #FBF7FD; border: 2px dashed var(--line-soft); display: grid; place-items: center; }
.pq-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 6px; }
.pq-none { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-3);
  font-size: 12.5px; font-weight: 650; }
.pq-none svg { width: 26px; height: 26px; }
.pq-del { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  border: none; display: grid; place-items: center; background: rgba(232, 84, 107, .92); color: #fff;
  box-shadow: 0 2px 6px rgba(46, 37, 64, .25); transition: transform .13s var(--ease); }
.pq-del svg { width: 15px; height: 15px; }
.pq-del:hover { transform: scale(1.08); }

/* ============ 收款监听：配置指引弹窗 ============ */
.modal { max-height: 88vh; }
.guide-tabs { display: flex; gap: 6px; margin: 16px 0 14px; flex-wrap: wrap; }
.guide-tabs .gt { cursor: pointer; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--ink-1); background: #F6F1FA; border: 1.5px solid var(--line-soft);
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.guide-tabs .gt:hover { border-color: var(--pink-2); }
.guide-tabs .gt.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }
.guide-body { font-size: 13px; color: var(--ink-1); line-height: 1.75; }
.guide-ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.guide-ol li { padding-left: 2px; }
.code-snip { margin-top: 7px; padding: 10px 12px; border-radius: var(--r-xs);
  background: #FBF7FD; border: 1.5px solid var(--line-soft); box-shadow: var(--carve);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--ink);
  word-break: break-all; white-space: pre-wrap; cursor: pointer; position: relative;
  transition: border-color .15s var(--ease), background .15s var(--ease); }
.code-snip:hover { border-color: var(--pink-2); background: #fff; }
.code-snip:active { background: var(--pink-soft); }
.code-snip.multi { white-space: pre; overflow-x: auto; max-height: 260px; overflow-y: auto; }

/* ============================================================
   充值收款 · 易支付对接（精简版）
   本页只保留易支付一个收款方式：核心三字段 + 回调地址卡
   + 高级设置折叠 + 回调记录折叠
   ============================================================ */
.ep-wrap { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 18px; }

/* 回调地址：浅紫卡片，与普通输入框区分开 */
.ep-cb {
  padding: 14px 15px 15px;
  border-radius: var(--r-sm);
  border: var(--line-w) solid var(--line);
  background: linear-gradient(160deg, var(--purple-soft) 0%, #fff 78%);
  box-shadow: var(--shadow-sm);
}
.ep-cb-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.ep-cb-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.ep-cb-title svg { width: 15px; height: 15px; stroke: var(--purple); flex: none; }

/* 高级设置折叠 */
.ep-adv { border: var(--line-w) solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; }
.ep-adv > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 7px;
  padding: 12px 15px; font-size: 13px; font-weight: 700; color: var(--ink-1);
  background: #FBF7FD; transition: background .15s var(--ease);
}
.ep-adv > summary::-webkit-details-marker { display: none; }
.ep-adv > summary::after {
  content: '\25BE'; margin-left: auto; font-size: 12px; color: var(--ink-3);
  transition: transform .2s var(--ease);
}
.ep-adv[open] > summary::after { transform: rotate(180deg); }
.ep-adv > summary:hover { background: var(--pink-soft); }
.ep-adv-body {
  padding: 16px 15px 18px; display: flex; flex-direction: column; gap: 16px;
  border-top: 1.5px solid var(--line-soft);
}

/* 回调记录折叠（沿用 .panel 的卡片外观，只调内部节奏） */
.ep-log { margin-bottom: 16px; }
.ep-log:hover { transform: none; }
.ep-log > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 15px 20px; transition: background .15s var(--ease);
}
.ep-log > summary::-webkit-details-marker { display: none; }
.ep-log > summary::after {
  content: '\25BE'; margin-left: auto; font-size: 12px; color: var(--ink-3);
  transition: transform .2s var(--ease);
}
.ep-log[open] > summary::after { transform: rotate(180deg); }
.ep-log > summary:hover { background: #FBF7FD; }
.ep-log-title { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.ep-log-title svg { width: 16px; height: 16px; stroke: var(--pink); flex: none; }
.ep-log-foot { display: flex; justify-content: flex-end; padding: 12px 20px 16px; }

@media (max-width: 620px) {
  .ep-wrap { padding: 16px 15px 18px; gap: 15px; }
  .ep-adv-body { padding: 14px 13px 16px; }
  .ep-log > summary { padding: 13px 15px; }
  .ep-log-foot { padding: 10px 15px 14px; }
}

/* 系统设置：顶部两栏在窄屏堆叠，避免输入框被挤到看不见 */
.settings-top { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) {
  .settings-top { grid-template-columns: 1fr; }
}
/* 限时加赠：窄屏两列，结束时间独占一行 */
@media (max-width: 700px) {
  .promo-fields .field { flex: 1 1 140px; min-width: 0; }
  .promo-fields .field.promo-until { flex-basis: 100%; }
}

/* ===== 手机端独立底部导航 ===== */
.m-tabs { display: none; }
@media (max-width: 900px) {
  .m-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 24;
    height: 64px; padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-top: 2px solid var(--line-soft);
    box-shadow: 0 -10px 28px -18px rgba(46, 37, 64, .35);
  }
  .m-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; color: var(--ink-3); font-family: var(--sans);
    font-size: 10px; font-weight: 800; letter-spacing: .2px; cursor: pointer;
  }
  .m-tab svg { width: 20px; height: 20px; stroke: currentColor; transition: transform .16s var(--ease); }
  .m-tab.active { color: var(--pink); }
  .m-tab.active svg { stroke: var(--pink); transform: translateY(-1px); }
  .content { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(78px + env(safe-area-inset-bottom)); }
}
@media (max-width: 620px) {
  .toasts { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* ===== 手机端表格 → 卡片 ===== */
@media (max-width: 720px) {
  .page-head-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-head-row > .dim { flex: 1 1 100%; }
  .page-head-row > .btn { align-self: flex-start; }
  .page-head-row > .row { justify-content: flex-end; width: 100%; }
  .tbl-wrap.has-cards { overflow: visible; padding: 0 10px 4px; }
  .tbl-wrap table.m-cards { display: block; width: 100%; min-width: 0; border-collapse: separate; }
  .tbl-wrap table.m-cards thead { display: none; }
  .tbl-wrap table.m-cards tbody { display: block; }
  .tbl-wrap table.m-cards tbody tr {
    display: block; margin: 0 0 12px; padding: 2px 0 4px; background: #fff;
    border: 2px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-sm);
  }
  .tbl-wrap table.m-cards tbody tr:last-child { margin-bottom: 0; }
  .tbl-wrap table.m-cards tbody td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 8px 14px; border: 0; white-space: normal; text-align: right;
    font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere;
  }
  .tbl-wrap table.m-cards tbody td::before {
    content: attr(data-label); flex: none; max-width: 44%; text-align: left;
    color: var(--ink-3); font-size: 10px; font-weight: 800; letter-spacing: .4px;
    text-transform: uppercase; padding-top: 2px;
  }
  .tbl-wrap table.m-cards tbody td:first-child {
    display: block; text-align: left; padding: 12px 14px 7px;
    font-weight: 750; font-size: 13px;
  }
  .tbl-wrap table.m-cards tbody td:first-child::before { display: none; }
  .tbl-wrap table.m-cards tbody td[data-label=""] {
    justify-content: flex-end; flex-wrap: wrap; gap: 8px;
    padding-top: 10px; border-top: 1.5px dashed #F2EAF6;
  }
  .tbl-wrap table.m-cards tbody td[data-label=""]::before { display: none; }
  .tbl-wrap table.m-cards tbody tr.m-empty {
    border: 0; box-shadow: none; background: transparent;
  }
  .tbl-wrap table.m-cards tbody tr.m-empty td {
    display: block; text-align: center; padding: 8px 0 18px;
  }
  .tbl-wrap table.m-cards tbody tr.m-empty td::before { display: none; }
}

/* 概览「最近调用」手机紧凑列表 */
.recent-list { display: none; }
@media (max-width: 720px) {
  .recent-table { display: none; }
  .recent-list { display: block; }
  .recent-call { padding: 11px 14px; border-bottom: 1.5px solid #F4EDF7; }
  .recent-call:last-child { border-bottom: none; }
  .recent-call-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .recent-call-model { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .recent-call-top .badge { flex: none; height: 19px; padding: 0 6px; font-size: 9.5px; box-shadow: none; }
  .recent-call-cost { flex: none; margin-left: auto; font-size: 13px; font-weight: 750; color: var(--pink); }
  .recent-call-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px;
    font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
  .recent-call-meta i { width: 3px; height: 3px; border-radius: 50%; background: #D8CEE2; flex: none; }
}

/* ===== 批量选择 / 批量删除 ===== */
th.pick, td.pick { width: 40px; padding-right: 2px; text-align: center; }
th.pick input, td.pick input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--pink); vertical-align: middle; }
td.pick input:disabled { cursor: not-allowed; opacity: .35; }
tbody tr.picked td { background: rgba(255, 107, 157, .07); }
.bulkbar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 12px;
  border: var(--line-w) solid var(--pink); border-radius: var(--r-sm); background: var(--pink-soft);
  box-shadow: var(--shadow-sm); }
.bulkbar[hidden] { display: none; }
.bulk-info { font-size: 13px; color: var(--ink-2); }
.bulk-info b { color: var(--pink); font-variant-numeric: tabular-nums; }
.bulk-hint { font-size: 12.5px; color: var(--ink-2); padding: 9px 12px; border-radius: var(--r-xs);
  background: rgba(46, 37, 64, .045); margin-bottom: 4px; line-height: 1.6; }
.bulk-hint b { color: var(--pink); }
select.input { cursor: pointer; }