/* ===== Fish Ai 业务弹窗样式 · 深渊极光重设计（Modal/积分/API日志/价格/上新/个人中心/充值/邀请/公告/FishCode/欢迎弹窗/Harness 弹窗） =====
   令牌见 index.css 头部（--surface/--border/--glow/--grad-brand 等）；API 日志与代码终端固定深色 #0b1020（控制台隐喻，双主题一致） */
/* ===== Modal ===== */
.modal-mask {
  display: none;
  position: fixed; inset: 0;
  background: rgba(2,6,23,.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  align-items: center; justify-content: center;
  padding: 16px;
}
html[data-theme="light"] .modal-mask { background: rgba(15,23,42,.44); }
.modal-mask.show { display: flex; }
.modal {
  background: var(--surface-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), var(--glow-shadow);
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  max-height: 85vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: pop .2s var(--ease-out);
}
.modal.modal-wide { max-width: 760px; }
.modal.modal-points { max-height:min(960px,96vh); }
.modal.modal-redeem { max-width: 620px; }

/* ===== 积分兑换（翡翠绿识别色 · 深底终端感） ===== */
.redeem-panel { color: var(--text); }
.redeem-hero {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  margin:-20px -20px 22px; padding:26px 24px;
  color:#e9efff; background:linear-gradient(135deg,#04241d 0%,#064e3b 55%,#0f766e 100%);
  border-bottom:4px solid #10b981; position:relative; overflow:hidden;
}
.redeem-hero::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 60% at 88% 0%,rgba(16,185,129,.22),transparent 70%); }
.redeem-hero-icon { width:54px; height:54px; display:grid; place-items:center; color:#34d399; background:rgba(16,185,129,.14); border:1px solid rgba(52,211,153,.35); border-radius:8px; box-shadow:0 0 22px rgba(16,185,129,.28); position:relative; z-index:1; }
.redeem-hero-icon svg { width:31px; height:31px; }
.redeem-hero span, .redeem-success > span { display:block; margin-bottom:5px; color:#34d399; font-size:10px; font-weight:800; letter-spacing:1.2px; }
.redeem-hero h3 { margin:0; font-size:21px; letter-spacing:0; position:relative; z-index:1; }
.redeem-hero p { margin:5px 0 0; color:#a4b1d2; font-size:12px; position:relative; z-index:1; }
.redeem-balance { min-width:110px; padding-left:18px; border-left:1px solid rgba(139,152,208,.25); text-align:right; position:relative; z-index:1; }
.redeem-balance small { display:block; color:#a4b1d2; font-size:11px; }
.redeem-balance strong { display:block; margin-top:3px; color:#fff; font-size:20px; text-shadow:0 0 18px rgba(52,211,153,.5); }
.redeem-form label { display:block; margin-bottom:8px; color:var(--text-secondary); font-size:13px; font-weight:700; }
.redeem-input-wrap { position:relative; }
.redeem-input-wrap > svg { position:absolute; left:15px; top:50%; width:20px; height:20px; color:var(--text-muted); transform:translateY(-50%); pointer-events:none; }
.redeem-input-wrap input { width:100%; height:54px; padding:0 54px 0 48px; color:var(--text); background:var(--bg-soft); border:1px solid var(--border); border-radius:8px; outline:none; font:700 15px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.5px; transition:border-color .2s,box-shadow .2s; }
.redeem-input-wrap input:focus { border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.18),0 0 22px rgba(16,185,129,.22); }
.redeem-paste { position:absolute; right:8px; top:8px; width:38px; height:38px; display:grid; place-items:center; color:#34d399; background:rgba(16,185,129,.12); border:1px solid rgba(52,211,153,.3); border-radius:6px; transition:background .18s var(--ease-out); }
.redeem-paste:hover { background:rgba(16,185,129,.24); }
.redeem-paste svg { width:18px; height:18px; }
.redeem-submit { width:100%; height:50px; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; background:linear-gradient(135deg,#059669,#10b981); border-radius:8px; font-size:15px; font-weight:800; box-shadow:0 8px 22px rgba(16,185,129,.32); transition:transform .15s var(--ease-out),box-shadow .18s var(--ease-out); }
.redeem-submit:hover { transform:translateY(-1px); box-shadow:0 12px 28px rgba(16,185,129,.45); }
.redeem-submit:disabled { opacity:.6; cursor:wait; transform:none; }
.redeem-submit svg { width:18px; height:18px; }
.redeem-note { display:flex; align-items:flex-start; gap:9px; margin-top:16px; padding:11px 13px; color:var(--text-secondary); background:rgba(16,185,129,.06); border:1px solid var(--border-soft); border-radius:8px; font-size:12px; }
.redeem-note > span { width:17px; height:17px; flex:none; display:grid; place-items:center; color:#34d399; border:1px solid rgba(52,211,153,.5); border-radius:50%; font-size:10px; font-weight:800; box-shadow:0 0 8px rgba(16,185,129,.3); }
.redeem-note p { margin:0; line-height:1.5; }
.redeem-login { padding:30px 10px; text-align:center; }
.redeem-login-icon { width:56px; height:56px; margin:0 auto 14px; display:grid; place-items:center; color:#34d399; background:rgba(16,185,129,.12); border:1px solid rgba(52,211,153,.3); border-radius:8px; box-shadow:0 0 18px rgba(16,185,129,.2); }
.redeem-login-icon svg { width:30px; height:30px; }
.redeem-login h3 { margin:0 0 20px; font-size:18px; }
.redeem-login .login-submit { max-width:220px; margin:auto; }
.redeem-success { padding:28px 10px 20px; text-align:center; }
.redeem-success-icon { width:64px; height:64px; margin:0 auto 15px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#059669,#10b981); border-radius:50%; box-shadow:0 0 34px rgba(16,185,129,.45); }
.redeem-success-icon svg { width:35px; height:35px; }
.redeem-success h3 { margin:0 0 9px; font-size:24px; }
.redeem-success strong { display:block; color:#34d399; font-size:29px; text-shadow:0 0 22px rgba(52,211,153,.45); }
.redeem-success p { margin:8px 0 22px; color:var(--text-secondary); }
.redeem-success button { min-width:150px; height:42px; color:var(--text); background:var(--bg-soft); border:1px solid var(--border); border-radius:8px; font-weight:700; transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out); }
.redeem-success button:hover { border-color:rgba(var(--glow),.45); box-shadow:var(--glow-shadow); }

@media (max-width: 540px) {
  .redeem-hero { grid-template-columns:auto 1fr; margin:-16px -16px 19px; padding:20px 16px; }
  .redeem-hero-icon { width:46px; height:46px; }
  .redeem-balance { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; padding:12px 0 0; border-left:0; border-top:1px solid rgba(139,152,208,.25); text-align:left; }
  .redeem-balance strong { font-size:18px; }
}
.modal.modal-api-logs { max-width: min(1380px, 96vw); max-height: 92vh; border:1px solid var(--border); box-shadow:var(--shadow-lg),var(--glow-shadow); }
.modal.modal-api-logs .modal-head { color:var(--text); border-color:var(--border-soft); background:linear-gradient(135deg,rgba(34,211,238,.09),rgba(99,102,241,.12)); }
.modal.modal-api-logs .modal-head h2 { font-size:15px; letter-spacing:.04em; }
.modal.modal-api-logs .modal-close { color:var(--text-secondary); }
.modal.modal-api-logs .modal-close:hover { color:var(--accent); background:var(--bg-hover); }
.modal.modal-api-logs .modal-body { padding:0; background:var(--bg-soft); }
@keyframes pop { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-head h3 { font-size: 17px; font-weight: 700; color: var(--text); }
.modal-close { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.modal-close:hover { background: var(--bg-hover); color: var(--text); }
.modal-close svg { width: 20px; height: 20px; }
.modal-body { padding: 20px; overflow-y: auto; }

/* ===== API 调用日志 · 观测台 2.0（跟随双主题，玻璃拟态 + 状态轨） ===== */
.api-console { position:relative; min-height:540px; padding:0 18px 18px; color:var(--text); }
.api-console * { box-sizing:border-box; }

/* ---- Hero ---- */
.ac-hero { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 6px 18px; overflow:hidden; }
.ac-hero-glow { position:absolute; inset:-40% -20% auto; height:200px; pointer-events:none;
  background:radial-gradient(46% 90% at 18% 40%,rgba(34,211,238,.16),transparent 70%),radial-gradient(42% 90% at 85% 30%,rgba(99,102,241,.18),transparent 72%);
  filter:blur(26px); }
.ac-hero-main { position:relative; display:flex; flex-direction:column; gap:6px; }
.ac-kicker { display:flex; align-items:center; gap:8px; color:var(--accent); font:700 9.5px/1 ui-monospace,Consolas,monospace; letter-spacing:.2em; }
.ac-kicker b { padding:3px 8px; border-radius:999px; font-weight:800; color:var(--text-secondary); background:var(--bg-hover); border:1px solid var(--border-soft); letter-spacing:.14em; }
.ac-live-dot { width:7px; height:7px; border-radius:50%; background:#2dd4bf; box-shadow:0 0 0 4px rgba(45,212,191,.14),0 0 12px rgba(45,212,191,.5); animation:acPulse 2s ease-in-out infinite; }
@keyframes acPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.8)} }
.ac-title { margin:0; font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.15;
  background:var(--grad-brand); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.ac-sub { margin:0; color:var(--text-secondary); font-size:13px; }
.ac-hero-signal { position:relative; display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; font-size:12px; font-weight:600; color:var(--text-secondary);
  background:var(--surface); border:1px solid var(--border); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--shadow); }
.ac-hero-signal i { width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.15),0 0 10px rgba(52,211,153,.55); animation:acPulse 2.4s ease-in-out infinite; }

/* ---- 统计卡 ---- */
.api-logs-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.api-stat-card { display:flex; align-items:center; gap:12px; padding:14px 15px; border-radius:var(--radius); border:1px solid var(--border);
  background:var(--surface); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--shadow);
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .18s var(--ease-out); }
.api-stat-card:hover { transform:translateY(-2px); border-color:rgba(var(--glow),.4); box-shadow:var(--shadow-lg),var(--glow-shadow); }
.api-stat-icon { flex:0 0 38px; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff;
  background:var(--grad-brand); box-shadow:0 6px 16px rgba(var(--glow),.32),inset 0 1px 0 rgba(255,255,255,.28); }
.api-stat-icon svg { width:19px; height:19px; }
.api-stat-points .api-stat-icon { background:linear-gradient(135deg,#06b6d4,#4f46e5); box-shadow:0 6px 16px rgba(6,182,212,.3),inset 0 1px 0 rgba(255,255,255,.28); }
.api-stat-points-total .api-stat-icon { background:linear-gradient(135deg,#6366f1,#a855f7); box-shadow:0 6px 16px rgba(99,102,241,.3),inset 0 1px 0 rgba(255,255,255,.28); }
.api-stat-requests .api-stat-icon { background:linear-gradient(135deg,#f59e0b,#ec4899); box-shadow:0 6px 16px rgba(236,72,153,.28),inset 0 1px 0 rgba(255,255,255,.28); }
.api-stat-tokens .api-stat-icon { background:linear-gradient(135deg,#10b981,#0891b2); box-shadow:0 6px 16px rgba(16,185,129,.28),inset 0 1px 0 rgba(255,255,255,.28); }
.api-stat-label { font-size:11.5px; color:var(--text-muted); letter-spacing:.02em; }
.api-stat-value { font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.2; font-variant-numeric:tabular-nums;
  background:var(--grad-brand); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* ---- 时间筛选 ---- */
.ac-filter { margin-bottom:14px; padding:14px 16px; border-radius:var(--radius); border:1px solid var(--border);
  background:var(--surface); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--shadow); }
.ac-filter-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ac-filter-title { display:flex; align-items:center; gap:10px; color:var(--text); }
.ac-filter-icon { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:#fff; background:var(--grad-brand); box-shadow:0 5px 14px rgba(var(--glow),.3); }
.ac-filter-icon svg { width:16px; height:16px; }
.ac-filter-title strong { display:block; font-size:13.5px; font-weight:800; letter-spacing:-.01em; }
.ac-filter-title small { display:block; color:var(--text-muted); font-size:11.5px; }
.api-date-summary { padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:700; color:var(--accent);
  background:rgba(var(--glow-cyan),.1); border:1px solid rgba(var(--glow-cyan),.35); font-variant-numeric:tabular-nums; }
.ac-filter-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; }
.api-date-presets { display:flex; gap:6px; padding:4px; border-radius:999px; background:var(--bg-hover); border:1px solid var(--border-soft); }
.api-date-preset { height:30px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:var(--text-secondary); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s var(--ease-out); }
.api-date-preset:hover { color:var(--text); }
.api-date-preset.active { color:#fff; background:var(--grad-brand); box-shadow:0 4px 12px rgba(var(--glow),.35); }
.api-date-divider { width:1px; height:26px; background:var(--border); }
.api-date-fields { display:flex; align-items:center; gap:8px; }
.api-date-fields label { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-muted); }
.api-date-fields input { height:34px; padding:0 10px; border-radius:10px; border:1px solid var(--border); background:var(--surface-solid); color:var(--text); font-size:12.5px; outline:none; transition:border-color .15s,box-shadow .15s; }
.api-date-fields input:focus { border-color:rgba(var(--glow),.5); box-shadow:0 0 0 3px rgba(var(--glow),.14); }
.api-date-fields b { color:var(--text-muted); font-weight:600; }
.api-date-actions { display:flex; gap:8px; margin-left:auto; }
.api-date-reset { height:34px; padding:0 14px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text-secondary); font-size:12.5px; font-weight:600; cursor:pointer; transition:all .15s var(--ease-out); }
.api-date-reset:hover { color:var(--text); border-color:rgba(var(--glow),.4); background:var(--bg-hover); }
.api-date-submit { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 16px; border:0; border-radius:10px; color:#fff; font-size:12.5px; font-weight:700; cursor:pointer;
  background:var(--grad-brand); box-shadow:0 6px 16px rgba(var(--glow),.32); transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out); }
.api-date-submit:hover { transform:translateY(-1px); box-shadow:0 9px 22px rgba(var(--glow),.42); }
.api-date-submit svg { width:14px; height:14px; }

/* ---- 区间统计 ---- */
.api-range-stats { margin-bottom:14px; padding:13px 16px 15px; border-radius:var(--radius); border:1px solid rgba(var(--glow-cyan),.3);
  background:linear-gradient(135deg,rgba(var(--glow-cyan),.07),rgba(var(--glow),.07)),var(--surface); box-shadow:var(--shadow); }
.api-range-stats-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.api-range-stats-head > div { display:flex; align-items:center; gap:8px; color:var(--text); font-size:13px; }
.api-range-stats-head i { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(var(--glow-cyan),.6); }
.api-range-stats-head strong { font-weight:800; letter-spacing:-.01em; }
.api-range-stats-head > span { font-size:11.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.api-range-stats-grid { margin-bottom:0; }

/* ---- 流水标题条 ---- */
.ac-feed-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 2px 10px; }
.ac-feed-title { display:flex; align-items:center; gap:9px; }
.ac-feed-title i { width:16px; height:3px; border-radius:2px; background:var(--grad-brand); box-shadow:0 0 10px rgba(var(--glow),.5); }
.ac-feed-title strong { color:var(--text); font-size:13.5px; font-weight:800; letter-spacing:-.01em; }
.ac-feed-title span, .ac-feed-head > small { color:var(--text-muted); font-size:11.5px; }

/* ---- 日志表格 ---- */
.api-logs-shell { transition:opacity .25s var(--ease-out); }
.api-loading-more { opacity:.45; }
.api-logs-head, .api-log-row { display:grid; grid-template-columns:34px 1.35fr 1fr .95fr 1.05fr .8fr .8fr .75fr; gap:8px; align-items:center; }
.api-logs-head { padding:9px 14px 9px 10px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);
  border-bottom:1px solid var(--border); }
.api-logs-head .api-ip-title { display:inline-flex; align-items:center; gap:5px; }
.api-logs-head [data-tooltip] { width:13px; height:13px; border-radius:50%; display:inline-grid; place-items:center; font-size:9px; font-style:normal; cursor:help;
  color:var(--text-secondary); border:1px solid var(--border); background:var(--bg-hover); }
.api-log-entry { position:relative; margin:0 0 8px; border-radius:14px; border:1px solid var(--border); background:var(--surface);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--shadow); overflow:hidden;
  transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out),transform .18s var(--ease-out); }
.api-log-entry::before { content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); opacity:.85; }
.api-log-success::before { background:linear-gradient(180deg,#34d399,#06b6d4); box-shadow:0 0 12px rgba(52,211,153,.45); }
.api-log-interrupted::before { background:linear-gradient(180deg,#fbbf24,#f59e0b); box-shadow:0 0 12px rgba(251,191,36,.4); }
.api-log-failed::before { background:linear-gradient(180deg,#fb7185,#dc2626); box-shadow:0 0 12px rgba(251,113,133,.45); }
.api-log-entry:hover { transform:translateY(-1px); border-color:rgba(var(--glow),.4); box-shadow:var(--shadow-lg); }
.api-log-entry.open { border-color:rgba(var(--glow),.45); box-shadow:var(--shadow-lg),var(--glow-shadow); }
.api-log-toggle { width:30px; height:30px; margin-left:8px; border:0; border-radius:9px; display:grid; place-items:center; cursor:pointer;
  color:var(--text-muted); background:var(--bg-hover); border:1px solid var(--border-soft); transition:all .16s var(--ease-out); }
.api-log-toggle:hover { color:var(--text); border-color:rgba(var(--glow),.4); }
.api-log-toggle svg { width:15px; height:15px; transition:transform .2s var(--ease-out); }
.api-log-entry.open .api-log-toggle { color:#fff; background:var(--grad-brand); border-color:transparent; box-shadow:0 4px 10px rgba(var(--glow),.35); }
.api-log-entry.open .api-log-toggle svg { transform:rotate(90deg); }
.api-log-row { padding:11px 14px 11px 0; }
.api-log-cell { min-width:0; font-size:12.5px; color:var(--text-secondary); }
.api-log-time { display:flex; flex-direction:column; gap:5px; font-family:ui-monospace,Consolas,monospace; font-size:11.5px; color:var(--text); font-variant-numeric:tabular-nums; }
.api-log-time .api-status { width:fit-content; display:inline-flex; align-items:center; gap:5px; padding:2.5px 9px; border-radius:999px; font-size:10.5px; font-weight:700; font-family:inherit; }
.api-log-time .api-status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.api-status.success { color:#10b981; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.35); }
.api-status.interrupted { color:#d97706; background:rgba(217,119,6,.1); border:1px solid rgba(217,119,6,.35); }
.api-status.failed { color:#e11d48; background:rgba(225,29,72,.1); border:1px solid rgba(225,29,72,.35); }
.api-log-key strong { display:block; color:var(--text); font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.api-log-key code { display:inline-block; margin-top:4px; padding:2px 7px; border-radius:6px; font-family:ui-monospace,Consolas,monospace; font-size:10.5px;
  color:var(--text-muted); background:var(--bg-hover); border:1px solid var(--border-soft); }
.api-model-pill { display:inline-block; max-width:100%; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--text); background:var(--bg-hover); border:1px solid var(--border); }
.api-log-latency { display:flex; flex-direction:column; gap:5px; }
.api-time-pair { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.api-time-badge { display:inline-flex; align-items:baseline; gap:2px; padding:3px 9px; border-radius:8px; font-family:ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums; }
.api-time-badge b { font-size:12px; font-weight:800; }
.api-time-badge small { font-size:9px; opacity:.75; }
.api-time-badge.fast { color:#0d9488; background:rgba(13,148,136,.1); border:1px solid rgba(13,148,136,.35); }
.api-time-badge.medium { color:#b45309; background:rgba(180,83,9,.1); border:1px solid rgba(180,83,9,.35); }
.api-time-badge.slow { color:#be123c; background:rgba(190,18,60,.1); border:1px solid rgba(190,18,60,.35); }
.api-time-empty { color:var(--text-muted); font-size:11px; }
.api-stream-tag { width:fit-content; font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--text-muted); }
.api-stream-tag.stream { color:var(--accent); }
.api-stream-tag.stream::before { content:''; display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px rgba(var(--glow-cyan),.6); animation:acPulse 1.8s ease-in-out infinite; vertical-align:1px; }
.api-log-points strong { font-size:15px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  background:var(--grad-brand); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.api-log-points span { margin-left:4px; font-size:10.5px; color:var(--text-muted); }
.api-log-cny { font-family:ui-monospace,Consolas,monospace; font-size:11.5px; font-variant-numeric:tabular-nums; }
.api-log-ip { font-family:ui-monospace,Consolas,monospace; font-size:11px; }

/* ---- 展开详情 ---- */
.api-log-detail { display:none; margin:0 14px 13px 52px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg-soft); overflow:hidden; animation:acDetail .3s var(--ease-out); }
.api-log-entry.open .api-log-detail { display:block; }
@keyframes acDetail { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.api-detail-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border-soft);
  font:700 10px/1 ui-monospace,Consolas,monospace; letter-spacing:.16em; color:var(--accent); }
.api-detail-head small { font:500 11px/1 inherit; letter-spacing:0; color:var(--text-muted); }
.api-detail-grid { display:grid; grid-template-columns:96px 1fr; gap:0; }
.api-detail-grid > span { padding:9px 0 9px 14px; font-size:11px; color:var(--text-muted); border-bottom:1px solid var(--border-soft); }
.api-detail-grid > div, .api-detail-grid > code { padding:9px 14px 9px 0; font-size:12px; color:var(--text); border-bottom:1px solid var(--border-soft); overflow-wrap:anywhere; }
.api-detail-grid > span:nth-last-child(-n+2), .api-detail-grid > :nth-last-child(1) { border-bottom:0; }
.api-detail-grid code { font-family:ui-monospace,Consolas,monospace; font-size:11px; color:var(--text-secondary); }
.api-formula { display:block; padding:10px 12px !important; border-radius:9px; border:1px solid rgba(var(--glow),.25);
  background:#0b1020; color:#7dd3fc; font-size:10.5px !important; line-height:1.7; }
.api-token-usage .api-cache-rate { display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:600;
  color:var(--accent); background:rgba(var(--glow-cyan),.1); border:1px solid rgba(var(--glow-cyan),.35); }
.api-token-usage .api-cache-rate b { font-weight:800; }
.api-detail-error { color:#e11d48; font-weight:600; }

/* ---- 骨架 / 加载 / 空态 ---- */
.api-skel-row { display:grid; grid-template-columns:34px 1.35fr 1fr .95fr 1.05fr .8fr .8fr .75fr; gap:8px; align-items:center; margin-bottom:8px; padding:16px 14px 16px 10px;
  border-radius:14px; border:1px solid var(--border-soft); background:var(--surface); }
.api-skel-row i { height:11px; border-radius:6px; background:linear-gradient(90deg,var(--bg-hover) 25%,rgba(var(--glow),.14) 50%,var(--bg-hover) 75%); background-size:200% 100%; animation:acSkel 1.4s ease-in-out infinite; }
.api-skel-row i:first-child { width:22px; height:22px; border-radius:8px; }
.api-skel-row i:nth-child(2) { animation-delay:.08s } .api-skel-row i:nth-child(3){animation-delay:.16s} .api-skel-row i:nth-child(4){animation-delay:.24s}
.api-skel-row i:nth-child(5){animation-delay:.32s} .api-skel-row i:nth-child(6){animation-delay:.4s} .api-skel-row i:nth-child(7){animation-delay:.48s} .api-skel-row i:nth-child(8){animation-delay:.56s}
@keyframes acSkel { from{background-position:200% 0} to{background-position:-200% 0} }
.api-logs-loading, .api-logs-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:52px 20px; text-align:center; color:var(--text-secondary); }
.api-empty-icon { font-size:34px; filter:drop-shadow(0 4px 14px rgba(var(--glow),.4)); }
.api-logs-empty strong { color:var(--text); font-size:15px; font-weight:800; }
.api-logs-empty span { font-size:12px; color:var(--text-muted); }
.api-empty-reset { margin-top:6px; height:34px; padding:0 18px; border:0; border-radius:10px; color:#fff; font-size:12.5px; font-weight:700; cursor:pointer;
  background:var(--grad-brand); box-shadow:0 6px 16px rgba(var(--glow),.32); transition:transform .15s var(--ease-out); }
.api-empty-reset:hover { transform:translateY(-1px); }

/* ---- 分页 ---- */
.api-logs-pagination { display:flex; align-items:center; justify-content:center; gap:12px; padding:6px 0 2px; font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.api-logs-pagination button { height:32px; padding:0 16px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text-secondary);
  font-size:12px; font-weight:600; cursor:pointer; transition:all .15s var(--ease-out); }
.api-logs-pagination button:hover:not(:disabled) { color:var(--text); border-color:rgba(var(--glow),.4); box-shadow:var(--glow-shadow); }
.api-logs-pagination button:disabled { opacity:.4; cursor:not-allowed; }

/* ---- 响应式 ---- */
@media (max-width: 1100px) {
  .api-logs-head, .api-log-row, .api-skel-row { grid-template-columns:34px 1.3fr 1fr 1fr .8fr .8fr; }
  .api-log-cny, .api-log-ip, .api-logs-head span:nth-child(7), .api-logs-head span:nth-child(8), .api-skel-row i:nth-child(7), .api-skel-row i:nth-child(8) { display:none; }
}
@media (max-width: 720px) {
  .api-console { padding:0 12px 12px; }
  .ac-hero { flex-direction:column; align-items:flex-start; }
  .api-logs-stats { grid-template-columns:repeat(2,1fr); }
  .ac-filter-controls { flex-direction:column; align-items:stretch; }
  .api-date-divider { display:none; }
  .api-date-actions { margin-left:0; }
  .api-date-actions .api-date-submit { flex:1; }
  .api-logs-head { display:none; }
  .api-log-row, .api-skel-row { grid-template-columns:34px 1fr 1fr; grid-auto-rows:auto; }
  .api-log-cell { border:0; }
  .api-log-cell[data-label]::before { content:attr(data-label); display:block; margin-bottom:3px; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
  .api-log-time, .api-log-latency { grid-column:span 2; }
  .api-log-detail { margin-left:14px; }
  .api-detail-grid { grid-template-columns:1fr; }
  .api-detail-grid > span { padding:8px 0 2px 14px; border-bottom:0; }
  .api-detail-grid > div, .api-detail-grid > code { padding:2px 14px 9px 0; }
}
@media (prefers-reduced-motion:reduce) {
  .ac-live-dot, .ac-hero-signal i, .api-stream-tag.stream::before, .api-skel-row i { animation:none !important; }
  .api-log-detail { animation:none !important; }
}
/* ===== 登录 / 注册 / 重置密码 表单 ===== */
.login-field { margin-bottom: 14px; }
.login-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.login-field input {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 9px;
  font-size: 14px; color: var(--text); background: var(--bg-soft);
  transition: border-color .15s, box-shadow .15s;
}
.login-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(129,140,248,.15); }
.auth-tabs {
  display: flex;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 18px;
}
.auth-tab {
  flex: 1; padding: 9px;
  border-radius: 7px;
  font-size: 14px; font-weight: 600;
  color: var(--text-secondary);
  transition: all .18s var(--ease-out);
}
.auth-tab.active { background: var(--surface-solid); color: var(--primary); box-shadow: var(--shadow); }
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; }
.send-code-btn {
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 13px;
  color: var(--primary);
  white-space: nowrap;
  transition: all .15s;
}
.send-code-btn:hover:not(:disabled) { border-color: var(--primary); background: var(--bg-hover); }
.send-code-btn:disabled { color: var(--text-muted); cursor: not-allowed; }
.captcha-box { display: flex; align-items: center; gap: 8px; margin: 6px 0 14px; }
.captcha-box .captcha-input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; letter-spacing: 2px; transition: border-color .15s, box-shadow .15s; }
.captcha-box .captcha-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(129,140,248,.14); }
.captcha-img-wrap { position: relative; width: 130px; height: 38px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-solid); flex-shrink: 0; cursor: pointer; }
.captcha-img-wrap img { width: 100%; height: 100%; display: block; }
.captcha-refresh { width: 36px; height: 38px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.captcha-refresh:hover { color: var(--primary); border-color: var(--primary); background: var(--bg-hover); }
.captcha-refresh svg { width: 15px; height: 15px; }
.form-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.remember-me { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-secondary); cursor: pointer; user-select: none; }
.remember-me input, .auth-agreement input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; flex: 0 0 16px; margin: 0; border: 1.5px solid var(--border); border-radius: 5px; background: var(--surface-solid); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.remember-me input:hover, .auth-agreement input:hover { border-color: var(--primary); }
.remember-me input:checked, .auth-agreement input:checked { border-color: var(--primary); background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.2 8.2 2.9 2.9 6.7-6.5' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px 13px no-repeat; box-shadow: 0 2px 5px rgba(99,102,241,.3); }
.remember-me input:focus-visible, .auth-agreement input:focus-visible { outline: 2px solid rgba(129,140,248,.4); outline-offset: 2px; }
.switch-link { font-size: 13px; color: var(--primary); cursor: pointer; }
.switch-link:hover { text-decoration: underline; }
.form-tip { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 14px; }
.form-tip a { color: var(--primary); cursor: pointer; }
.login-submit {
  width: 100%; padding: 12px;
  background: var(--grad-brand); color: #fff;
  border-radius: 10px; font-size: 15px; font-weight: 600;
  box-shadow: 0 8px 22px rgba(99,102,241,.32);
  transition: transform .15s var(--ease-out), box-shadow .18s var(--ease-out), filter .18s;
}
.login-submit:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 12px 28px rgba(99,102,241,.45); }
.auth-agreement { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 4px; margin: 13px auto 0; color: var(--text-muted); font-size: 12px; line-height: 1.7; cursor: pointer; user-select: none; text-align: center; }
.auth-agreement input { margin-right: 2px; }
.auth-agreement a { color: var(--primary); white-space: nowrap; }
.auth-agreement a:hover { text-decoration: underline; }

/* ===== 模型价格窗口 ===== */
.mp-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding: 4px 4px 14px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 14px;
}
.mp-title { font-size: 17px; font-weight: 800; color: var(--text); }
.mp-legend { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-leg-item {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-hover); border: 1px solid var(--border-soft); padding: 4px 10px; border-radius: 8px;
  font-size: 11.5px; color: var(--text-secondary);
}
.mp-leg-item b { color: var(--primary); font-weight: 700; }
.price-loading { padding: 30px; text-align: center; color: var(--text-muted); font-size: 13px; }
.price-error { padding: 20px; text-align: center; color: #f87171; font-size: 13px;
  background: rgba(220,38,38,.1); border: 1px solid rgba(248,113,113,.35); border-radius: 10px; }

.price-section-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin: 18px 0 10px; display: flex; align-items: center; gap: 8px;
}
.price-section-title:first-child { margin-top: 0; }
.price-section-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}
.price-section-count { font-size: 11px; color: var(--text-muted); font-weight: 500; }

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.model-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
  transition: all .2s var(--ease-out);
}
.model-card:hover { border-color: rgba(var(--glow),.45); transform: translateY(-1px); box-shadow: var(--shadow-lg), var(--glow-shadow); }
.mc-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.mc-icon svg { width: 22px; height: 22px; }
.mc-info { flex: 1; min-width: 0; }
.mc-name { font-weight: 700; font-size: 13.5px; color: var(--text);
  display: flex; align-items: center; gap: 6px; }
.mc-tags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.mc-tag-mini {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  background: var(--bg-hover); color: var(--text-muted);
}
.mc-tag-mini.acc { color: #34d399; background: rgba(16,185,129,.12); border: 1px solid rgba(52,211,153,.4); }
.mc-tag-mini.mm { color: #c4b5fd; background: rgba(139,92,246,.12); border: 1px solid rgba(167,139,250,.4); }
.mc-tag-mini.hot { color: #f87171; background: rgba(220,38,38,.12); border: 1px solid rgba(248,113,113,.4); }
.mc-price { text-align: right; flex-shrink: 0; }
.mc-pa { font-weight: 800; font-size: 13px; color: var(--primary); }
.mc-pa.out { color: var(--violet); }
.mc-pl { font-size: 9.5px; color: var(--text-muted); margin-top: 1px; }
.mc-tier { font-size: 9.5px; color: var(--amber, #f59e0b); margin-top: 1px; }
.mc-call {
  font-weight: 800; font-size: 16px; color: var(--primary); line-height: 1;
}
.mc-call-sub { font-size: 10px; color: var(--text-muted); margin-top: 4px; }

/* ===== 模型上新 弹窗（琥珀→洋红识别色） ===== */
.nm-head {
  display: flex; align-items: center; gap: 14px;
  margin: -20px -20px 16px;
  padding: 22px 20px;
  background: linear-gradient(120deg,#92400e 0%,#b45309 48%,#9d174d 100%);
  position: relative;
  overflow: hidden;
}
.nm-head::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(251,191,36,.35), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.nm-head::after {
  content: '';
  position: absolute;
  bottom: -50px; left: -30px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(244,114,182,.28), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.nm-head-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 6px 18px rgba(239,68,68,.45);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  animation: nmPop 0.6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes nmPop { 0% { transform: scale(.5) rotate(-15deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.nm-head-icon svg { width: 26px; height: 26px; }
.nm-head-meta { flex: 1; min-width: 0; position: relative; z-index: 1; }
.nm-head-title { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.nm-head-sub { font-size: 12.5px; color: rgba(255,255,255,.82); line-height: 1.5; }
.nm-head-count {
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 12px; font-weight: 800;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.nm-loading, .nm-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-muted);
  font-size: 13.5px;
}
.nm-empty .nm-empty-icon { font-size: 42px; margin-bottom: 8px; opacity: .55; }
.nm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nm-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all .2s var(--ease-out);
  overflow: hidden;
}
.nm-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(251,191,36,.16), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: transform .3s ease;
}
.nm-card:hover {
  border-color: rgba(245,158,11,.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,158,11,.18), var(--glow-shadow);
}
.nm-card:hover::before { transform: scale(1.4); }
.nm-card.active {
  border-color: rgba(245,158,11,.6);
  background: rgba(245,158,11,.08);
  box-shadow: 0 0 0 3px rgba(245,158,11,.15), 0 8px 22px rgba(245,158,11,.2);
}
.nm-card.active::after {
  content: '✓';
  position: absolute;
  top: 10px; right: 12px;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  box-shadow: 0 2px 6px rgba(239,68,68,.4);
}
.nm-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(2,6,23,.3);
}
.nm-icon svg { width: 24px; height: 24px; display: block; }
.nm-main { flex: 1; min-width: 0; }
.nm-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.nm-tag-new {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border-radius: 999px;
  letter-spacing: .5px;
  box-shadow: 0 2px 5px rgba(239,68,68,.35);
}
.nm-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nm-tags { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.nm-tag {
  font-size: 10px;
  padding: 1.5px 7px;
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text-muted);
  font-weight: 600;
}
.nm-tag-pro { color: #fbbf24; background: rgba(245,158,11,.12); border: 1px solid rgba(251,191,36,.4); }
.nm-tag-mm  { color: #34d399; background: rgba(16,185,129,.12); border: 1px solid rgba(52,211,153,.4); }
.nm-card.active .nm-name { color: #fcd34d; }

@media (max-width: 600px) {
  .price-grid { grid-template-columns: 1fr; }
  .mp-head { flex-direction: column; align-items: flex-start; }
}

/* ===== 个人中心（深空蓝紫识别色） ===== */
.modal.modal-profile { max-width:780px; max-height:92vh; border:1px solid var(--border); box-shadow:var(--shadow-lg),var(--glow-shadow); }
.modal.modal-profile .modal-head { background:linear-gradient(135deg,rgba(34,211,238,.07),rgba(99,102,241,.1)); }
.modal.modal-profile .modal-body { padding:16px; background:var(--bg-soft); }
.profile-card { display:flex; flex-direction:column; gap:14px; }
.profile-hero { position:relative; overflow:hidden; padding:22px; border:0; border-radius:18px; color:#e9efff; background:linear-gradient(120deg,#1e3a8a 0%,#3730a3 46%,#6d28d9 100%); box-shadow:0 18px 42px rgba(49,46,129,.45),inset 0 0 0 1px rgba(129,140,248,.25); isolation:isolate; }
.profile-hero::after { content:''; position:absolute; inset:0; z-index:-1; opacity:.38; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(90deg,#000,transparent 78%); }
.profile-glow { position:absolute; z-index:-1; border-radius:50%; filter:blur(4px); pointer-events:none; }.profile-glow-one { width:260px; height:260px; right:-90px; top:-130px; background:radial-gradient(circle,rgba(103,232,249,.35),transparent 68%); }.profile-glow-two { width:220px; height:220px; left:34%; bottom:-180px; background:radial-gradient(circle,rgba(196,181,253,.32),transparent 68%); }
.profile-head { display:flex; align-items:center; gap:14px; position:relative; }
.profile-avatar {
  position:relative; width:64px; height:64px; border-radius:50%;
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800;
  box-shadow:0 0 0 4px rgba(255,255,255,.16),0 0 0 5px rgba(129,140,248,.4),0 8px 20px rgba(2,6,23,.45);
  flex-shrink:0; overflow:visible;
  background: transparent;
}
.profile-avatar svg { display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; }
.profile-online-dot { position:absolute; right:-1px; bottom:2px; width:14px; height:14px; border:3px solid rgba(255,255,255,.85); border-radius:50%; background:#14b8a6; box-shadow:0 0 0 2px rgba(20,184,166,.2),0 0 9px rgba(20,184,166,.6); }
.profile-meta { flex: 1; min-width: 0; }
.profile-eyebrow { margin-bottom:4px; color:rgba(255,255,255,.78); font:800 9px/1.2 Consolas,monospace; letter-spacing:.16em; }
.profile-name { display:flex; align-items:center; gap:8px; color:#fff; font-size:20px; font-weight:800; }
.profile-name span { padding:2px 7px; border:1px solid rgba(153,246,228,.4); border-radius:999px; color:#99f6e4; background:rgba(153,246,228,.12); font-size:9px; }
.profile-id { display:flex; align-items:center; gap:7px; margin-top:5px; color:rgba(255,255,255,.72); font-size:11px; word-break:break-all; }.profile-id b { color:#c4b5fd; font-family:Consolas,monospace; }.profile-id span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-status { display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(255,255,255,.32); border-radius:999px; color:#fff; background:rgba(255,255,255,.13); font-size:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }.profile-status i { width:6px; height:6px; border-radius:50%; background:#10b981; box-shadow:0 0 8px rgba(16,185,129,.6); }

.profile-points-card {
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:22px; padding-top:18px; color:#e9efff; position:relative; border-top:1px solid rgba(255,255,255,.22);
}
.ppc-label { display:flex; align-items:center; gap:7px; color:rgba(255,255,255,.7); font:700 9px Consolas,monospace; letter-spacing:.12em; }.ppc-gem { color:#67e8f9; }
.ppc-value { margin:5px 0 2px; color:#fff; font:800 34px/1.1 ui-monospace,Consolas,monospace; letter-spacing:-1.5px; text-shadow:0 5px 22px rgba(129,140,248,.55); }
.ppc-hint { color:rgba(255,255,255,.62); font-size:10px; }
.ppc-actions { display: flex; gap: 8px; }
.ppc-btn {
  padding:9px 14px; border-radius:9px; font-size:11.5px; font-weight:800;
  border:1px solid rgba(255,255,255,.22); cursor:pointer; transition:all .2s var(--ease-out);
}
.ppc-btn.primary { color:#4338ca; border-color:transparent; background:#fff; box-shadow:0 8px 20px rgba(2,6,23,.4); }
.ppc-btn.primary:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(2,6,23,.5); }
.ppc-btn.ghost { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:#fff; }
.ppc-btn.ghost:hover { background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.55); }

.profile-logs {
  border:1px solid var(--border); border-radius:15px; padding:14px; background:var(--surface); box-shadow:var(--shadow);
}
.pl-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:10px; }
.pl-title { display:flex; align-items:center; gap:9px; color:var(--text); }.pl-title-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; color:#fff; background:linear-gradient(135deg,#06b6d4,#6366f1); font-size:16px; box-shadow:0 4px 10px rgba(99,102,241,.35); }.pl-title strong { display:block; font-size:13px; }.pl-title small { display:block; margin-top:1px; color:var(--text-muted); font-size:9px; font-weight:400; }
.pl-seg {
  display: flex; gap: 0; padding:3px;
  background:var(--bg-soft); border-radius:10px; border:1px solid var(--border-soft);
}
.pl-filter {
  padding:5px 13px; border:none; border-radius:8px;
  background:transparent; color:var(--text-secondary); font-size:10.5px; font-weight:700; cursor:pointer; transition:all .18s var(--ease-out);
}
.pl-filter:hover { color:var(--text); }
.pl-filter.active {
  color:var(--primary); background:var(--surface-solid); box-shadow:var(--shadow);
}
.pl-list { display:flex; flex-direction:column; gap:6px; height:340px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(129,140,248,.4) transparent; position:relative; }
.pl-list.pl-loading-more { opacity:.55; pointer-events:none; transition:opacity .15s; }
.pl-pager {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border);
  gap: 8px;
}
.pl-page-btn {
  padding: 5px 13px; font-size: 11.5px; font-weight:700; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-soft);
  color: var(--text-secondary); cursor: pointer; transition: all .15s;
}
.pl-page-btn:hover:not(:disabled) {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.pl-page-btn:disabled { opacity: .35; cursor: not-allowed; }
.pl-page-info { font-size: 11px; color: var(--text-muted); }
.pl-loading, .pl-empty {
  padding: 26px; text-align: center; color: var(--text-muted); font-size: 12.5px;
}
.pl-empty-icon { font-size:34px; margin-bottom:8px; opacity:.75; }
.pl-empty-title { color:var(--text); font-size:13px; font-weight:800; margin-bottom:3px; }
.pl-empty-sub { color:var(--text-muted); font-size:10.5px; margin-bottom:12px; }
.pl-empty-btn {
  padding:7px 20px; border:none; border-radius:999px; cursor:pointer;
  color:#fff; font-size:11.5px; font-weight:800;
  background:var(--grad-brand); box-shadow:0 4px 12px rgba(99,102,241,.35);
  transition:transform .18s, box-shadow .18s;
}
.pl-empty-btn:hover { transform:translateY(-2px); box-shadow:0 7px 18px rgba(99,102,241,.5); }
.pl-row {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center;
  padding:9px 11px; border:1px solid var(--border-soft); border-radius:11px; background:var(--surface); transition:.18s var(--ease-out);
}
.pl-row:hover { border-color:rgba(var(--glow),.4); background:var(--bg-hover); box-shadow:0 3px 10px rgba(99,102,241,.12); }
.pl-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.pl-memo { font-size: 12.5px; color: var(--text); font-weight: 700; display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap; }
.pl-memo > :first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.pl-badge { flex-shrink:0; padding:1px 7px; border:1px solid; border-radius:999px; font-size:9px; font-weight:800; letter-spacing:.03em; }
.pl-time { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
.pl-amount { font-size: 15px; font-weight: 800; text-align: right; font-family:ui-monospace,Consolas,monospace; letter-spacing:-.3px; white-space:nowrap; }
.pl-income .pl-amount::before, .pl-expense .pl-amount::before { font-size:11px; font-weight:700; margin-right:1px; }
.pl-income .pl-amount::before { content:'+'; }
.pl-expense .pl-amount::before { content:'−'; }

.profile-logout {
  width:auto; align-self:center; padding:8px 22px !important; margin-top:0 !important; border-radius:9px !important; background:transparent !important; color:var(--text-muted) !important; border:1px solid var(--border) !important; font-size:11px !important;
}
.profile-logout:hover { color:#f87171 !important; border-color:rgba(248,113,113,.45) !important; background:rgba(220,38,38,.1) !important; }

@media (max-width: 700px) {
  .modal.modal-profile .modal-body { padding:10px; }.profile-hero { padding:17px; border-radius:15px; }.profile-status { display:none; }.profile-points-card { align-items:flex-start; flex-direction:column; gap:13px; margin-top:17px; }.ppc-actions { width:100%; }.ppc-btn { flex:1; }
}
@media (max-width: 480px) {
  .profile-avatar { width:54px; height:54px; border-radius:50%; }.profile-avatar svg { border-radius:50%; }.profile-name { font-size:17px; }.profile-id span { max-width:170px; }.ppc-value { font-size:29px; }
  .pl-row { grid-template-columns: 28px 1fr auto; }
}

/* ===== 积分购买窗口（宝石紫识别色） ===== */
.points-purchase { margin:-20px; padding:0 20px 20px; background:linear-gradient(180deg,rgba(99,102,241,.07) 0,var(--bg) 190px); }
.points-recharge-alert + .points-purchase { margin-top:0; }
.points-recharge-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin:0 0 14px;
  padding: 10px 12px;
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 9px;
  background: rgba(245,158,11,.08);
  font-size: 13px;
}
.points-recharge-alert span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: #fff;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 10px rgba(245,158,11,.5);
  font: 800 12px/1 Arial, sans-serif;
}
.points-head {
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:15px 18px;
  margin:0 -20px 12px;
  background:linear-gradient(120deg,#4c1d95 0%,#4f46e5 48%,#0e7490 100%);
  border-bottom:0;
}
.points-head::after { content:''; position:absolute; inset:0; z-index:-1; opacity:.32; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:26px 26px; mask-image:linear-gradient(90deg,#000,transparent 84%); }
.points-head-glow { position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }.points-head-glow-one { width:220px; height:220px; right:-75px; top:-120px; background:radial-gradient(circle,rgba(196,181,253,.32),transparent 68%); }.points-head-glow-two { width:190px; height:190px; left:35%; bottom:-155px; background:radial-gradient(circle,rgba(103,232,249,.3),transparent 68%); }
.points-head-copy { min-width:0; }.points-head-kicker { width:max-content; display:flex; align-items:center; gap:7px; margin-bottom:6px; padding:4px 12px; border-radius:999px; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); font:800 9px Consolas,monospace; letter-spacing:.15em; }.points-head-kicker i { width:7px; height:7px; border-radius:50%; background:#6ee7b7; box-shadow:0 0 10px rgba(110,231,183,.55); }
.points-head-title {
  color:#fff; font-size:20px; font-weight:800; letter-spacing:-.4px; text-shadow:0 3px 14px rgba(30,27,75,.45);
}
.points-head-sub { margin-top:4px; color:rgba(255,255,255,.78); font-size:11px; }
.points-balance {
  flex:0 0 auto; display:flex; align-items:center; gap:10px; min-width:150px;
  text-align:left; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.35);
  border-radius:14px; padding:10px 13px; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 7px 18px rgba(2,6,23,.3); backdrop-filter:blur(8px);
}
.pb-icon { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; color:#fff; background:linear-gradient(135deg,#06b6d4,#6366f1); box-shadow:0 4px 12px rgba(99,102,241,.4); }
.points-balance .pb-label { color:rgba(255,255,255,.75); font:700 8px Consolas,monospace; letter-spacing:.09em; }
.points-balance .pb-value { margin-top:3px; color:#fff; font:800 18px/1 Consolas,monospace; text-shadow:0 2px 10px rgba(30,27,75,.4); }
.points-section-title,.pay-method-title { display:flex; align-items:center; justify-content:space-between; margin:0 2px 8px; }.points-section-title>div,.pay-method-title>div { display:flex; align-items:center; gap:8px; }.points-section-title>div>span,.pay-method-title>div>span { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; color:#fff; background:var(--grad-brand); font:800 9px Consolas,monospace; box-shadow:0 3px 9px rgba(99,102,241,.35); }.points-section-title strong,.pay-method-title strong { color:var(--text); font-size:12px; }.points-section-title small,.pay-method-title small { color:var(--text-muted); font-size:9.5px; font-weight:500; }

.points-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.points-card {
  position: relative;
  display:flex; flex-direction:column; justify-content:center;
  border:1px solid var(--border);
  border-radius:13px;
  padding:12px 10px 10px;
  text-align: center;
  cursor: pointer;
  background: var(--surface);
  box-shadow:var(--shadow); transition:all .22s var(--ease-out);
  overflow: hidden;
}
/* 角标走文档流：居中胶囊条，不会压住积分内容 */
.pc-tag-line {
  width:max-content; max-width:100%;
  margin:0 auto 6px; padding:2px 10px;
  border-radius:999px;
  font-size:9.5px; font-weight:800; letter-spacing:.5px;
  color:#fff; background:linear-gradient(135deg,#f59e0b,#f97316);
  box-shadow:0 2px 6px rgba(245,158,11,.45);
}
.points-card.active .pc-tag-line {
  background:linear-gradient(135deg,#ef4444,#dc2626);
  box-shadow:0 3px 10px rgba(239,68,68,.5);
}
.points-card.best .pc-tag-line {
  background:linear-gradient(135deg,#b45309,#f59e0b);
}
.points-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:linear-gradient(145deg,rgba(34,211,238,.07),rgba(168,85,247,.07));
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.points-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg),var(--glow-shadow); border-color:rgba(var(--glow),.4); }
.points-card:hover::before { opacity: 1; }
.points-card.active {
  border-color:var(--primary);
  background:rgba(99,102,241,.12);
  box-shadow:0 0 0 3px rgba(99,102,241,.16),0 11px 26px rgba(79,70,229,.2);
}
.points-card.active::before { opacity: 1; }
.pc-selected { position:absolute; left:9px; top:9px; width:19px; height:19px; display:grid; place-items:center; border:1px solid var(--border); border-radius:50%; color:transparent; background:var(--surface-solid); transition:.2s; z-index:2; }.pc-selected svg { width:12px; height:12px; }.points-card.active .pc-selected { color:#fff; border-color:var(--primary); background:var(--grad-brand); box-shadow:0 3px 9px rgba(99,102,241,.4); }
.pc-gem-svg { width:17px; height:17px; flex:0 0 auto; filter:drop-shadow(0 2px 5px rgba(99,102,241,.45)); }
.pb-icon .pc-gem-svg { width:19px; height:19px; }
.points-card.active .pc-gem-svg { filter:drop-shadow(0 2px 7px rgba(129,140,248,.65)); animation:gemPop .25s ease; }
@keyframes gemPop { 0%{transform:scale(.7) rotate(-12deg)} 60%{transform:scale(1.18)} 100%{transform:scale(1)} }
.pc-top { display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:4px; }
.pc-points {
  display:flex; align-items:baseline; gap:3px;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: -.5px;
  line-height:1;
}
.pc-points small { font-size:9.5px; font-weight:600; color:var(--text-muted); letter-spacing:0; }
.pc-gift {
  width:max-content; max-width:100%; margin:0 auto 8px;
  font-size:9px; font-weight:600; color:var(--text-muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.pc-gift.has-bonus {
  padding:2px 8px; color:#fbbf24; font-weight:800;
  border:1px solid rgba(251,191,36,.4); border-radius:999px;
  background:rgba(245,158,11,.1);
}
.points-card.best .pc-gift.has-bonus {
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#f59e0b,#f97316);
  box-shadow:0 2px 8px rgba(245,158,11,.4);
}
.pc-pricing {
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding-top:7px; border-top:1px dashed var(--border-soft);
}
.pc-price { color:var(--primary); font-size:19px; font-weight:800; letter-spacing:-.5px; line-height:1; }
.pc-price::before { content:'¥'; font-size:11px; margin-right:1px; opacity:.75; font-weight:700; }
.points-card.best .pc-price { color:#fbbf24; }
.pc-meta { display:flex; flex-direction:column; align-items:flex-end; gap:1px; min-width:0; }
.pc-meta b { color:var(--text-muted); font-size:8.5px; font-weight:700; font-family:Consolas,monospace; white-space:nowrap; }
.pc-meta i { font-style:normal; color:#34d399; font-size:9px; font-weight:800; white-space:nowrap; }
.points-card.best .pc-meta i {
  padding:1px 7px; color:#fff; border-radius:999px;
  background:linear-gradient(135deg,#059669,#10b981); box-shadow:0 2px 7px rgba(16,185,129,.35);
}
.points-card.best {
  border-color:rgba(245,158,11,.55);
  background:rgba(245,158,11,.08);
  box-shadow:0 6px 20px rgba(245,158,11,.15);
}
.points-card.best:hover { border-color:rgba(245,158,11,.7); box-shadow:0 12px 28px rgba(245,158,11,.22),var(--glow-shadow); }
.points-card.best.active {
  border-color:rgba(245,158,11,.7);
  background:rgba(245,158,11,.14);
  box-shadow:0 0 0 3px rgba(245,158,11,.16),0 12px 26px rgba(245,158,11,.22);
}

.points-trust-bar {
  display:flex; justify-content:center; gap:8px; margin:10px 2px 12px;
}
.ptb-item {
  display:flex; align-items:center; gap:5px; padding:4px 10px;
  border:1px solid var(--border-soft); border-radius:999px; background:var(--surface);
  color:var(--text-secondary); font-size:9.5px; box-shadow:var(--shadow);
}
.ptb-item svg { width:11px; height:11px; color:#34d399; flex-shrink:0; }
.ptb-item b { color:#34d399; font-weight:800; }
.pb-after { margin-top:2px; padding:2px 8px; border-radius:999px; color:#6ee7b7; background:rgba(110,231,183,.12); border:1px solid rgba(110,231,183,.3); font-size:9.5px; font-weight:700; width:max-content; }
.points-loading, .points-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 0;
  color: var(--text-muted);
  font-size: 13.5px;
}
.points-error { color: #f87171; }
.pay-method-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin:18px 2px 9px;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
}
.pay-method-title small { display:flex; align-items:center; gap:6px; }.pay-method-title small i { width:5px; height:5px; border-radius:50%; background:#34d399; box-shadow:0 0 7px rgba(52,211,153,.55); }
.pay-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pay-method {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  padding:12px;
  color: var(--text);
  border:1px solid var(--border); border-radius:13px;
  background: var(--surface);
  text-align: left;
  transition: border-color .18s, box-shadow .18s, background .18s, transform .18s;
}
.pay-method:hover { transform:translateY(-2px); border-color:rgba(var(--glow),.4); box-shadow:var(--shadow-lg),var(--glow-shadow); }
.pay-method.active.wxpay { border-color:rgba(34,197,94,.55); background:rgba(34,197,94,.08); box-shadow:0 0 0 3px rgba(34,197,94,.12),0 7px 17px rgba(34,197,94,.12); }
.pay-method.active.alipay { border-color:rgba(22,119,255,.55); background:rgba(22,119,255,.08); box-shadow:0 0 0 3px rgba(22,119,255,.12),0 7px 17px rgba(22,119,255,.12); }
.pay-method-icon { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; }
.pay-method-icon svg { width: 27px; height: 27px; }
.wxpay-icon { background: linear-gradient(135deg, #22c55e, #09bb07); }
.alipay-icon { background: linear-gradient(135deg, #2897ff, #1677ff); }
.pay-method-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 2px; }
.pay-method-copy strong { color: var(--text); font-size: 13px; white-space: nowrap; }
.pay-method-copy small { color: var(--text-muted); font-size: 10.5px; }
.pay-method-copy em { margin-left: 3px; padding: 2px 5px; color: #c4b5fd; border: 1px solid rgba(167,139,250,.4); border-radius: 5px; background: rgba(139,92,246,.12); font-size: 9px; font-style: normal; font-weight: 750; vertical-align: 1px; }
.pay-method-check { display: grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; color: #fff; border: 1.5px solid var(--border); border-radius: 50%; background: var(--surface-solid); }
.pay-method-check svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pay-method.active.wxpay .pay-method-check { border-color: #16a34a; background: #16a34a; }
.pay-method.active.alipay .pay-method-check { border-color: #1677ff; background: #1677ff; }
.pay-btn {
  width: 100%;
  margin-top:18px; padding:14px; background:var(--grad-brand);
  color: #fff;
  border-radius:12px;
  font-size: 15px;
  font-weight: 700;
  box-shadow:0 7px 18px rgba(99,102,241,.35),var(--glow-shadow);
  transition: all .15s;
  letter-spacing: .5px;
}
.pay-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 10px 24px rgba(99,102,241,.5),var(--glow-shadow); }
.pay-btn.alipay { background: linear-gradient(135deg, #2897ff, #1677ff); box-shadow: 0 4px 14px rgba(22,119,255,.32); }
.pay-btn.alipay:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(22,119,255,.42); }
.pay-btn:active:not(:disabled) { transform: scale(.99); }
.pay-btn:disabled { background: var(--border); box-shadow: none; cursor: not-allowed; }
.points-secure-tip { display:flex; align-items:flex-start; justify-content:center; gap:7px; margin:11px auto 0; max-width:610px; color:var(--text-muted); font-size:9.5px; line-height:1.55; text-align:left; }.points-secure-tip svg { width:14px; height:14px; flex:0 0 auto; margin-top:1px; color:#34d399; }
@media (prefers-reduced-motion:reduce){ .points-card.active .pc-gem-svg { animation:none!important } }

/* ===== 邀请返利（玫红→紫红识别色） ===== */
.referral-banner {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin:-20px -20px 18px;
  padding:22px 24px;
  border-bottom:0;
  background:linear-gradient(120deg,#9d174d 0%,#86198f 50%,#5b21b6 100%);
  color:#fff;
  position: relative;
  overflow: hidden;
}
.referral-banner::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background:radial-gradient(circle,rgba(251,207,232,.3),transparent 70%);
  border-radius: 50%;
}
.referral-banner::after { content:''; position:absolute; left:38%; bottom:-100px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(233,213,255,.28),transparent 70%); }
.rb-copy { position:relative; z-index:1; min-width:0; }
.rb-tag {
  width:max-content; display:flex; align-items:center; gap:7px;
  font-size: 11px;
  padding: 3px 10px;
  color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.32);
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.rb-tag i { width:6px; height:6px; border-radius:50%; background:#6ee7b7; box-shadow:0 0 8px rgba(110,231,183,.55); }
.rb-title { color:#fff; font-size:20px; font-weight:800; margin-bottom:4px; letter-spacing:-.4px; }
.rb-sub { color:rgba(255,255,255,.8); font-size:12px; line-height:1.55; }
.rb-rate { position:relative; z-index:1; min-width:96px; padding:10px 14px; border:1px solid rgba(255,255,255,.35); border-radius:14px; background:rgba(255,255,255,.13); text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 7px 18px rgba(2,6,23,.3); backdrop-filter:blur(8px); }.rb-rate strong { display:block; color:#fff; font:900 31px/1 Consolas,monospace; letter-spacing:-2px; text-shadow:0 0 22px rgba(251,207,232,.4); }.rb-rate strong small { font-size:15px; letter-spacing:0; }.rb-rate span { display:block; margin-top:4px; color:rgba(255,255,255,.72); font-size:9px; font-weight:700; letter-spacing:.08em; }

/* 未登录态 */
.referral-empty {
  text-align: center;
  padding: 36px 0 16px;
}
.re-icon-ring {
  width: 76px; height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--grad-brand-soft);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.re-icon-ring::before {
  content: '';
  position: absolute; inset: -8px;
  border: 2px dashed rgba(var(--glow),.5);
  border-radius: 50%;
  animation: spin 12s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.re-icon-ring svg { width: 32px; height: 32px; color: var(--primary); }
.re-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.re-desc { font-size: 13.5px; color: var(--text-muted); margin-bottom: 18px; }
.re-login-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 28px;
  background: var(--grad-brand);
  color: #fff;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(99,102,241,.4),var(--glow-shadow);
  transition: transform .15s var(--ease-out), box-shadow .18s var(--ease-out);
}
.re-login-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(99,102,241,.55),var(--glow-shadow); }

/* 已登录态 */
.referral-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.rs-card {
  display:flex; align-items:center; gap:11px;
  min-width:0; text-align:left;
  padding:13px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:13px;
  box-shadow:var(--shadow);
  transition:.2s var(--ease-out);
}
.rs-card:hover { transform:translateY(-2px); border-color:rgba(var(--glow),.4); box-shadow:var(--shadow-lg),var(--glow-shadow); }
.rs-icon { width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; color:#38bdf8; background:rgba(56,189,248,.12); }.rs-icon svg { width:18px; height:18px; }.rs-icon-chat { color:#c4b5fd; background:rgba(139,92,246,.14); }.rs-icon-reward { color:#2dd4bf; background:rgba(45,212,191,.12); }
.rs-card .rs-value {
  font-size:20px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  letter-spacing: -.5px;
}
.rs-card .rs-value small { font-size: 12px; font-weight: 600; -webkit-text-fill-color: var(--text-muted); }
.rs-card .rs-label { margin-bottom:3px; color:var(--text-muted); font-size:9px; letter-spacing:.04em; }

/* 邀请链接卡片 */
.link-card {
  border:1px solid var(--border);
  border-radius:14px;
  padding:15px;
  background: var(--surface);
  box-shadow:var(--shadow);
  margin-bottom: 16px;
}
.link-card-highlight {
  background:rgba(99,102,241,.1);
  border:1px solid rgba(129,140,248,.4);
  box-shadow:var(--shadow),var(--glow-shadow);
}
.link-card .lc-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.link-card .lc-label small { color:#a5b4fc; font:700 8px Consolas,monospace; letter-spacing:.12em; }.link-card .lc-label-icon { display:inline-grid; place-items:center; width:22px; height:22px; margin-right:5px; border-radius:7px; color:#fff; background:var(--grad-brand); font-size:12px; box-shadow:0 3px 8px rgba(99,102,241,.35); }
.link-card .link-meta {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.link-card .link-meta-sep { margin: 0 4px; color: var(--text-muted); }
.link-row { display: flex; gap: 8px; }
.link-input-wrap {
  flex: 1;
  display: flex;
  background: var(--bg-soft);
  border:1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.link-input-wrap:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.link-row input {
  flex: 1;
  padding: 10px 12px;
  background: transparent;
  border: none;
  font-size: 12.5px;
  color: var(--text);
  font-family: Consolas, Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
  user-select: all;
  outline: none;
}
.link-row input:focus { border-color: var(--primary); background: transparent; }
.copy-btn-primary {
  padding: 0 16px;
  background:var(--grad-brand);
  color: #fff;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  box-shadow:0 4px 12px rgba(99,102,241,.35);
  transition: transform .15s var(--ease-out), box-shadow .18s var(--ease-out);
  flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
}
.copy-btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 15px rgba(99,102,241,.5); }
.copy-btn-primary.copied { background: linear-gradient(135deg, #10b981, #059669); }
.share-btn.copied { background: linear-gradient(135deg, #10b981, #059669) !important; color: #fff !important; }
.share-btn.copied svg { stroke: #fff; }

/* 规则区 */
.rules-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 15px;
  margin-bottom: 14px;
  box-shadow:var(--shadow);
}
.rules-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color:var(--text);
  margin-bottom: 8px;
}
.rules-title>span { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:#fff; background:var(--grad-brand); font:800 13px Georgia,serif; box-shadow:0 4px 10px rgba(99,102,241,.35); }.rules-title strong,.rules-title small { display:block; }.rules-title small { margin-top:1px; color:var(--text-muted); font-size:9px; font-weight:400; }
.rules-list { list-style: none; padding: 0; margin: 0; }
.rules-list li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  color:var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 3px;
}
.rules-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color:var(--accent);
  font-weight: 800;
}
.rules-list li b { color:var(--primary); font-weight:800; }
.rules-list li:last-child { margin-bottom: 0; }

/* 分享按钮 */
.share-row { display: flex; gap: 8px; }
.share-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px;
  border:1px solid var(--border);
  border-radius:11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background:var(--surface);
  box-shadow:var(--shadow);
  transition: all .15s var(--ease-out);
}
.share-btn:hover { transform:translateY(-2px); border-color:rgba(var(--glow),.4); color:var(--primary); background:var(--bg-hover); box-shadow:var(--shadow-lg),var(--glow-shadow); }
.share-btn svg { width: 16px; height: 16px; }

@media (max-width: 600px) {
  .referral-banner { align-items:flex-start; margin:-16px -16px 15px; padding:18px 16px; }
  .rb-title { font-size:17px; }
  .rb-sub { max-width:230px; font-size:10.5px; }
  .rb-rate { min-width:76px; padding:9px 10px; }
  .rb-rate strong { font-size:25px; }
  .referral-stats { grid-template-columns:1fr; gap:8px; }
  .rs-card { padding:11px 12px; }
  .link-row { flex-direction:column; }
  .copy-btn-primary { min-height:40px; justify-content:center; }
  .link-card .lc-label small { display:none; }
  .share-row { flex-direction:column; }
}

@media (max-width: 390px) {
  .referral-banner { gap:10px; }
  .rb-rate { min-width:68px; }
  .rb-rate strong { font-size:22px; }
  .rb-sub { max-width:190px; }
}
@media (prefers-reduced-motion:reduce){ .re-icon-ring::before { animation:none!important } }

/* ====== 进入首页公告 ====== */
.announce-mask {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  animation: annFadeIn .25s ease-out;
}
html[data-theme="light"] .announce-mask { background: rgba(15,23,42,.44); }
.announce-mask.show { display: flex; }
@keyframes annFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes annScaleIn { from { opacity: 0; transform: scale(.92) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.announce-box {
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh;
  background: var(--surface-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-lg), var(--glow-shadow);
  animation: annScaleIn .35s cubic-bezier(.22,.61,.36,1);
  display: flex;
  flex-direction: column;
}

.announce-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: all .15s;
}
.announce-close:hover { background: rgba(255,255,255,.35); transform: rotate(90deg); }
.announce-close svg { width: 18px; height: 18px; }

.announce-head {
  background: var(--grad-brand);
  padding: 28px 60px 26px 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}
.announce-head::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.18) 0%, transparent 50%);
  pointer-events: none;
}
.announce-head::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 10% 90%, rgba(255,255,255,.12) 0%, transparent 40%);
  pointer-events: none;
}
.announce-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 10px;
  backdrop-filter: blur(6px);
  position: relative; z-index: 1;
}
.announce-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
  line-height: 1.3;
  position: relative; z-index: 1;
  word-break: break-word;
  overflow-wrap: break-word;
}
.announce-subtitle {
  font-size: 13px;
  opacity: .9;
  margin: 0;
  line-height: 1.5;
  position: relative; z-index: 1;
}

.announce-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  background: transparent;
}

.announce-section {
  display: flex;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all .15s var(--ease-out);
}
.announce-section:hover { border-color: rgba(var(--glow),.4); }
.announce-section:last-child { margin-bottom: 0; }

.announce-section-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.announce-icon-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.announce-icon-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.announce-icon-green { background: linear-gradient(135deg, #10b981, #059669); }
.announce-icon-red { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.announce-icon-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.announce-section-icon svg { width: 20px; height: 20px; }

.announce-section-content { flex: 1; min-width: 0; }
.announce-section-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.announce-section-desc {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.announce-section-desc strong { color: var(--text); font-weight: 700; }
.announce-section-desc b { color: var(--primary); font-weight: 700; }

.announce-section-warn {
  background: rgba(220,38,38,.08);
  border-color: rgba(248,113,113,.3);
}
.announce-section-warn .announce-section-title { color: #f87171; }

.announce-section-highlight {
  background: rgba(139,92,246,.09);
  border-color: rgba(167,139,250,.32);
}
.announce-section-highlight .announce-section-title { color: #c4b5fd; }

.announce-highlights {
  list-style: none;
  margin: 6px 0 2px;
  padding: 0;
}
.announce-highlights li {
  padding: 3px 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.announce-qq {
  font-family: Consolas, Menlo, monospace;
  font-size: 14px;
  color: #fb7185 !important;
  background: rgba(244,63,94,.1);
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid rgba(251,113,133,.35);
  margin-right: 6px;
}
.announce-copy-btn {
  display: inline-block;
  padding: 3px 9px;
  background: var(--bg-hover);
  color: var(--accent);
  border: 1px solid rgba(34,211,238,.4);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.announce-copy-btn:hover { background: var(--grad-brand); border-color: transparent; color: #fff; }
.announce-copy-btn.copied { background: #10b981; color: #fff; border-color: #10b981; }

.announce-footer {
  padding: 14px 22px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}
.announce-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.announce-checkbox input { width: 14px; height: 14px; cursor: pointer; accent-color: var(--primary); }
.announce-ok-btn {
  padding: 9px 22px;
  background: var(--grad-brand);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(99,102,241,.4), var(--glow-shadow);
  transition: all .15s var(--ease-out);
}
.announce-ok-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,.55), var(--glow-shadow); }
.announce-ok-btn:active { transform: translateY(0); }

@media (max-width: 540px) {
  .announce-mask { align-items: center; padding: 12px; }
  .announce-box { max-height: calc(100dvh - 24px); border-radius: 20px; }
  .announce-head { padding: 18px 52px 17px 18px; }
  .announce-badge { margin-bottom: 7px; padding: 3px 8px; font-size: 10px; }
  .announce-title { font-size: 18px; line-height: 1.28; margin-bottom: 4px; }
  .announce-subtitle { font-size: 11px; line-height: 1.45; }
  .announce-close { top: 11px; right: 11px; width: 30px; height: 30px; }
  .announce-body { padding: 12px 14px; }
  .announce-footer { padding: 12px 16px; flex-wrap: wrap; }
}

/* ====== FishCode VS Code 插件上线弹窗（绿→青识别色） ====== */
.fish-mask { z-index: 10000; }
.fish-head {
  background: linear-gradient(135deg, #065f46 0%, #059669 50%, #0e7490 100%);
}
.fish-hero {
  background: rgba(16,185,129,.08);
  border-color: rgba(52,211,153,.32);
}
.fish-hero .announce-section-title { color: #34d399; }
.fish-use-section { background: rgba(245,158,11,.08); border-color: rgba(251,191,36,.32); }
.fish-use-section .announce-section-title { color: #fbbf24; }
.fish-use-steps { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--text-secondary); font-size: 11.5px; line-height: 1.55; }
.fish-use-steps span { display: inline-flex; align-items: center; gap: 5px; }
.fish-use-steps b { display: inline-grid; place-items: center; width: 17px; height: 17px; color: #fff; border-radius: 50%; background: linear-gradient(135deg,#f59e0b,#d97706); font-size: 10px; box-shadow: 0 2px 6px rgba(245,158,11,.4); }
.fish-link-section { align-items: flex-start; }
.fish-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.fish-link {
  font-family: Consolas, Menlo, monospace;
  font-size: 11.5px;
  color: var(--primary);
  background: var(--bg-hover);
  border: 1px solid rgba(129,140,248,.4);
  padding: 5px 9px;
  border-radius: 6px;
  word-break: break-all;
  text-decoration: none;
  transition: all .15s;
}
.fish-link:hover { background: var(--grad-brand); border-color: transparent; color: #fff; }
.fish-footer { justify-content: space-between; }
.fish-skip-btn {
  padding: 9px 22px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.fish-skip-btn:hover { background: var(--bg-hover); color: var(--text); border-color: rgba(var(--glow),.4); }
.fish-skip-btn:active { transform: translateY(0); }

/* Mobile points purchase layout: preserve the desktop three-column pricing cards above. */
@media (max-width: 540px) {
  .modal.modal-wide { max-width: 100%; max-height: 92dvh; }
  .modal.modal-points { max-height:96dvh; }
  .modal.modal-wide .modal-body { padding: 16px; }
  .points-purchase { margin:-16px; padding:0 16px 16px; }
  .points-recharge-alert + .points-purchase { margin-top:0; }
  .points-head { margin:0 -16px 14px; padding:16px; gap:10px; }
  .points-head-kicker { margin-bottom:4px; font-size:8px; }
  .points-head-title { font-size:17px; }
  .points-head-sub { max-width:210px; font-size:9.5px; line-height:1.4; }
  .points-balance { min-width:112px; gap:7px; padding:8px; }
  .pb-icon { width:28px; height:28px; border-radius:8px; font-size:11px; }
  .points-balance .pb-label { font-size:6.5px; }
  .points-balance .pb-value { font-size:14px; }
  .points-section-title small { display:none; }
  .points-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .points-card { min-width: 0; padding: 15px 9px 13px; border-radius: 13px; }
  .pc-points { margin-bottom: 5px; font-size: 16px; }
  .pc-price { flex-direction:column; align-items:center; gap:3px; }.pc-price span { font-size:21px; }
  .pc-tag-line { margin-bottom:5px; padding:1.5px 8px; font-size:8.5px; }
  .pay-method-title { margin-top: 14px; }
  .pay-methods { gap: 8px; }
  .pay-method { gap: 7px; padding: 9px 8px; border-radius: 11px; }
  .pay-method-icon { width: 32px; height: 32px; border-radius: 9px; }
  .pay-method-icon svg { width: 24px; height: 24px; }
  .pay-method-copy strong { font-size: 12px; }
  .pay-method-copy small { display: none; }
  .pay-method-copy em { display: block; width: max-content; margin: 3px 0 0; }
  .pay-method-check { width: 16px; height: 16px; }
  .pay-btn { position: sticky; bottom: 0; z-index: 2; margin-top: 14px; padding: 13px 10px; font-size: 15px; }
  .points-secure-tip { font-size:8.5px; }
}

/* ====== 欢迎公告弹窗 · 深渊极光重设计（仅作用于首页欢迎弹窗，不影响 FishCode 弹窗） ====== */
/* 遮罩：深渊底 + 强磨砂 */
.welcome-modal {
  background: rgba(2, 6, 23, .66);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  padding: 28px;
}
html[data-theme="light"] .welcome-modal { background: rgba(15, 23, 42, .46); }

/* 弹窗容器：玻璃 + 大圆角 + 分层阴影 + 弹性入场 */
.welcome-box {
  width: min(600px, 100%);
  max-height: 86vh;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg), var(--glow-shadow);
  animation: wmPopIn .55s cubic-bezier(.34, 1.35, .4, 1) both;
}
@keyframes wmPopIn {
  from { opacity: 0; transform: scale(.9) translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wmSheetIn {
  from { opacity: 0; transform: translateY(10%); }
  to   { opacity: 1; transform: none; }
}

/* 关闭按钮：玻璃质感 */
.welcome-box .announce-close {
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* ===== 顶部 Header：极光渐变 + 光斑 + 掠光 ===== */
.wm-head {
  padding: 26px 64px 25px 26px;
  background: var(--grad-brand);
  overflow: hidden;
}
.wm-head-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  pointer-events: none;
}
.wm-orb-a {
  width: 230px; height: 230px;
  right: -70px; top: -100px;
  background: rgba(34, 211, 238, .45);
  animation: wmFloat 9s ease-in-out infinite;
}
.wm-orb-b {
  width: 190px; height: 190px;
  left: -50px; bottom: -90px;
  background: rgba(168, 85, 247, .42);
  animation: wmFloat 11s ease-in-out infinite reverse;
}
@keyframes wmFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-16px, 12px) scale(1.08); }
}
.wm-head-sheen {
  position: absolute;
  top: -25%; bottom: -25%;
  width: 32%;
  left: -50%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .2) 50%, transparent 100%);
  animation: wmSheen 5.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wmSheen {
  0%, 55% { transform: skewX(-18deg) translateX(-140%); }
  100%    { transform: skewX(-18deg) translateX(580%); }
}

.wm-head-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 鱼 Logo：玻璃卡 + 呼吸光环 */
.wm-logo {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 22px rgba(2, 6, 23, .45), 0 0 18px rgba(34, 211, 238, .35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: wmLogoGlow 3.6s ease-in-out infinite;
}
.wm-logo svg { width: 31px; height: 31px; }
@keyframes wmLogoGlow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.22); }
}

.wm-head-text { min-width: 0; }

/* 徽章：玻璃胶囊 + 脉冲圆点 */
.wm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  padding: 4px 11px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7dd3fc;
  box-shadow: 0 0 10px rgba(125, 211, 252, .8);
  animation: wmDotPulse 1.9s ease-out infinite;
}
@keyframes wmDotPulse {
  0%   { opacity: 1; }
  70%  { opacity: .3; }
  100% { opacity: 1; }
}

.wm-title {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -.3px;
  line-height: 1.25;
  margin: 0 0 7px;
  text-shadow: 0 1px 3px rgba(2, 6, 23, .35);
}
.wm-title-chip {
  display: inline-block;
  vertical-align: 3px;
  margin-left: 10px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  color: #e0f2fe;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.wm-subtitle { font-size: 13px; }

/* ===== 内容区 ===== */
.wm-body {
  padding: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 211, 238, .05), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(168, 85, 247, .04), transparent 30%);
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 152, 208, .4) transparent;
}
.wm-body::-webkit-scrollbar { width: 6px; }
.wm-body::-webkit-scrollbar-thumb { background: rgba(139, 152, 208, .4); border-radius: 99px; }
.wm-body::-webkit-scrollbar-thumb:hover { background: rgba(129, 140, 248, .6); }

.welcome-box .announce-section {
  gap: 13px;
  padding: 13px 14px;
  margin-bottom: 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
  animation: wmSectionIn .45s cubic-bezier(.22, .61, .36, 1) both;
}
.welcome-box .announce-section:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--glow), .45);
  box-shadow: var(--shadow-lg), var(--glow-shadow);
}
.welcome-box .announce-section:nth-child(1) { animation-delay: .1s; }
.welcome-box .announce-section:nth-child(2) { animation-delay: .16s; }
.welcome-box .announce-section:nth-child(3) { animation-delay: .22s; }
.welcome-box .announce-section:nth-child(4) { animation-delay: .28s; }
.welcome-box .announce-section:nth-child(5) { animation-delay: .34s; }
@keyframes wmSectionIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* 图标块：彩色柔光投影 */
.welcome-box .announce-section-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 12px -2px var(--wm-glow, rgba(59, 130, 246, .42));
}
.welcome-box .announce-icon-blue   { --wm-glow: rgba(37, 99, 235, .42); }
.welcome-box .announce-icon-orange { --wm-glow: rgba(217, 119, 6, .42); }
.welcome-box .announce-icon-green  { --wm-glow: rgba(5, 150, 105, .42); }
.welcome-box .announce-icon-red    { --wm-glow: rgba(220, 38, 38, .42); }
.welcome-box .announce-icon-purple { --wm-glow: rgba(124, 58, 237, .42); }

.welcome-box .announce-section-title { font-size: 14px; letter-spacing: -.1px; }

/* 群号胶囊微调 */
.welcome-box .announce-qq { border-radius: 7px; }
.welcome-box .announce-copy-btn { border-radius: 7px; }

/* ===== 底部：毛玻璃 + 自定义勾选 + 渐变 CTA ===== */
.wm-footer {
  padding: 14px 18px;
  gap: 12px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.wm-check {
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.wm-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.wm-check .wm-check-box {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  border: 2px solid var(--border);
  background: var(--surface-solid);
  display: grid;
  place-items: center;
  transition: all .18s cubic-bezier(.34, 1.4, .4, 1);
}
.wm-check .wm-check-box svg {
  width: 11px;
  height: 11px;
  color: #fff;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .22s ease .04s;
}
.wm-check:hover .wm-check-box { border-color: var(--primary); }
.wm-check input:checked + .wm-check-box {
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 3px 10px -2px rgba(99, 102, 241, .55);
}
.wm-check input:checked + .wm-check-box svg { stroke-dashoffset: 0; }
.wm-check input:focus-visible + .wm-check-box { outline: 2px solid var(--primary); outline-offset: 2px; }

.wm-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 24px;
  border-radius: 12px;
  background: var(--grad-brand);
  box-shadow: 0 6px 18px -4px rgba(99, 102, 241, .55), inset 0 1px 0 rgba(255, 255, 255, .28), var(--glow-shadow);
  font-size: 13.5px;
  letter-spacing: .2px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.wm-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 11px 26px -6px rgba(99, 102, 241, .68), inset 0 1px 0 rgba(255, 255, 255, .28), var(--glow-shadow);
}
.wm-cta:active { transform: translateY(0) scale(.98); }
.wm-cta-arrow { width: 15px; height: 15px; transition: transform .18s ease; }
.wm-cta:hover .wm-cta-arrow { transform: translateX(3px); }
.wm-cta::after {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  width: 36%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  animation: wmCtaShine 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wmCtaShine {
  0%, 60% { transform: skewX(-20deg) translateX(-160%); }
  100%    { transform: skewX(-20deg) translateX(460%); }
}

/* 移动端默认隐藏顶部把手 */
.wm-handle { display: none; }

/* ===== 移动端：底部抽屉式 ===== */
@media (max-width: 540px) {
  .welcome-modal { align-items: flex-end; padding: 0; }
  .welcome-box {
    max-width: 100%;
    max-height: calc(100dvh - 30px);
    border-radius: 22px 22px 0 0;
    border-left: none;
    border-right: none;
    border-top: none;
    animation: wmSheetIn .42s cubic-bezier(.22, .61, .36, 1) both;
  }
  .wm-handle {
    display: block;
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .42);
    z-index: 6;
    pointer-events: none;
  }
  .wm-head { padding: 30px 52px 17px 18px; }
  .wm-head-row { gap: 12px; }
  .wm-logo { width: 46px; height: 46px; border-radius: 14px; }
  .wm-logo svg { width: 25px; height: 25px; }
  .wm-badge { margin-bottom: 6px; padding: 3px 9px; font-size: 10px; }
  .wm-title { font-size: 18.5px; margin-bottom: 5px; }
  .wm-title-chip { margin-left: 8px; padding: 2px 8px; font-size: 10px; vertical-align: 2px; }
  .wm-subtitle { font-size: 11.5px; }
  .wm-body { padding: 12px 12px 8px; }
  .welcome-box .announce-section { padding: 11px 12px; gap: 11px; border-radius: 12px; }
  .welcome-box .announce-section-icon { width: 34px; height: 34px; border-radius: 10px; }
  .welcome-box .announce-section-icon svg { width: 18px; height: 18px; }
  .wm-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .wm-check { justify-content: center; }
  .wm-cta { justify-content: center; padding: 13px 20px; font-size: 14px; }
}

/* ===== 暗色主题适配 ===== */
html[data-theme="dark"] .welcome-box {
  border-color: rgba(139, 152, 208, .2);
  box-shadow: 0 0 0 1px rgba(139, 152, 208, .12), var(--shadow-lg);
}
html[data-theme="dark"] .wm-body::-webkit-scrollbar-thumb { background: rgba(139, 152, 208, .3); }
html[data-theme="dark"] .welcome-box .announce-section { box-shadow: none; }
html[data-theme="dark"] .welcome-box .announce-section:hover {
  border-color: rgba(var(--glow), .45);
  box-shadow: var(--glow-shadow);
}
html[data-theme="dark"] .wm-check .wm-check-box {
  background: rgba(139, 152, 208, .08);
  border-color: rgba(139, 152, 208, .45);
}
html[data-theme="dark"] .wm-check:hover .wm-check-box { border-color: var(--primary); }

/* 无障碍：减弱动效 */
@media (prefers-reduced-motion: reduce) {
  .welcome-modal,
  .welcome-box,
  .welcome-box *,
  .wm-head-orb,
  .wm-head-sheen,
  .wm-logo,
  .wm-dot,
  .wm-cta::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ====== Fish AI Harness 桌面客户端上线弹窗（hm- 作用域，不与其它弹窗冲突） ====== */
.hm-mask {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .68);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  padding: 28px;
  animation: hmFade .25s ease-out;
}
.hm-mask.show { display: flex; }
@keyframes hmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hmPop { from { opacity: 0; transform: scale(.9) translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hmSheet { from { opacity: 0; transform: translateY(10%); } to { opacity: 1; transform: none; } }

.hm-box {
  position: relative;
  width: min(620px, 100%);
  max-height: 86vh;
  background: var(--surface-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), var(--glow-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: hmPop .55s cubic-bezier(.34, 1.35, .4, 1) both;
}
.hm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .32);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .15s;
}
.hm-close:hover { background: rgba(255, 255, 255, .32); transform: rotate(90deg); }
.hm-close svg { width: 18px; height: 18px; }

.hm-head {
  position: relative;
  padding: 26px 64px 25px 26px;
  background: linear-gradient(125deg, #312e81 0%, #5b21b6 30%, #1d4ed8 62%, #0e7490 100%);
  overflow: hidden;
}
.hm-orb { position: absolute; border-radius: 50%; filter: blur(30px); pointer-events: none; }
.hm-orb-a { width: 230px; height: 230px; right: -70px; top: -100px; background: rgba(167, 139, 250, .5); animation: hmFloat 9s ease-in-out infinite; }
.hm-orb-b { width: 190px; height: 190px; left: -50px; bottom: -90px; background: rgba(56, 189, 248, .4); animation: hmFloat 11s ease-in-out infinite reverse; }
@keyframes hmFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-16px, 12px) scale(1.08); } }
.hm-sheen {
  position: absolute;
  top: -25%; bottom: -25%;
  width: 32%;
  left: -50%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .2) 50%, transparent 100%);
  animation: hmSheen 5.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hmSheen { 0%, 55% { transform: skewX(-18deg) translateX(-140%); } 100% { transform: skewX(-18deg) translateX(580%); } }

.hm-row { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; }
.hm-logo {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 22px rgba(2, 6, 23, .45), 0 0 18px rgba(196, 181, 253, .4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: hmGlow 3.6s ease-in-out infinite;
}
.hm-logo svg { width: 30px; height: 30px; }
@keyframes hmGlow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.22); }
}

.hm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  padding: 4px 11px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hm-dot { width: 6px; height: 6px; border-radius: 50%; background: #c4b5fd; box-shadow: 0 0 10px rgba(196, 181, 253, .75); animation: hmPulse 1.9s ease-out infinite; }
@keyframes hmPulse {
  0%   { opacity: 1; }
  70%  { opacity: .3; }
  100% { opacity: 1; }
}
.hm-title {
  margin: 0 0 7px;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -.3px;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 3px rgba(2, 6, 23, .35);
}
.hm-chip {
  display: inline-block;
  vertical-align: 3px;
  margin-left: 10px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  color: #ede9fe;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hm-sub { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .9); line-height: 1.5; }

.hm-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  background: radial-gradient(circle at 12% 0%, rgba(124, 58, 237, .08), transparent 36%);
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 152, 208, .4) transparent;
}
.hm-sec {
  display: flex;
  gap: 13px;
  padding: 13px 14px;
  margin-bottom: 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
  animation: hmSec .45s cubic-bezier(.22, .61, .36, 1) both;
}
.hm-sec:last-child { margin-bottom: 0; }
.hm-sec:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 139, 250, .42);
  box-shadow: 0 12px 28px -8px rgba(124, 58, 237, .32), 0 0 22px rgba(124, 58, 237, .18);
}
.hm-sec:nth-child(3) { animation-delay: .18s; }
.hm-sec:nth-child(4) { animation-delay: .24s; }
.hm-sec:nth-child(5) { animation-delay: .3s; }
@keyframes hmSec { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.hm-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.hm-icon svg { width: 20px; height: 20px; }
.hm-i-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 12px -2px rgba(124, 58, 237, .5); }
.hm-i-blue   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 12px -2px rgba(37, 99, 235, .5); }
.hm-i-green  { background: linear-gradient(135deg, #10b981, #059669); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 12px -2px rgba(5, 150, 105, .5); }

.hm-t { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 4px; letter-spacing: -.1px; }
.hm-d { font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); }
.hm-d b { color: var(--violet); font-weight: 700; }
.hm-d strong { color: var(--text); font-weight: 700; }

.hm-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 13px 18px 15px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hm-foot-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
}
.hm-file { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.hm-file svg { width: 13px; height: 13px; flex-shrink: 0; }

/* 24 小时不再提示勾选框 */
.hm-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.hm-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.hm-check .hm-check-box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid var(--border);
  background: var(--surface-solid);
  display: grid;
  place-items: center;
  transition: all .18s cubic-bezier(.34, 1.4, .4, 1);
}
.hm-check .hm-check-box svg {
  width: 10px;
  height: 10px;
  color: #fff;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .22s ease .04s;
}
.hm-check:hover .hm-check-box { border-color: var(--violet); }
.hm-check input:checked + .hm-check-box {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  border-color: transparent;
  box-shadow: 0 3px 10px -2px rgba(124, 58, 237, .55);
}
.hm-check input:checked + .hm-check-box svg { stroke-dashoffset: 0; }
.hm-check input:focus-visible + .hm-check-box { outline: 2px solid #7c3aed; outline-offset: 2px; }

.hm-actions { display: flex; align-items: center; gap: 10px; }
.hm-skip {
  height: 44px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s;
}
.hm-skip:hover { border-color: rgba(var(--glow), .4); color: var(--text); background: var(--bg-hover); }
.hm-cta {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 52%, #06b6d4 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(124, 58, 237, .65), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 22px rgba(124, 58, 237, .28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  text-decoration: none;
}
.hm-cta:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 32px -8px rgba(124, 58, 237, .78), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 28px rgba(124, 58, 237, .38); }
.hm-cta:active { transform: translateY(0) scale(.98); }
.hm-cta-win { width: 16px; height: 16px; flex-shrink: 0; }
.hm-cta-arrow { width: 16px; height: 16px; flex-shrink: 0; transition: transform .18s ease; }
.hm-cta:hover .hm-cta-arrow { transform: translateX(4px); }
.hm-cta::after {
  content: '';
  position: absolute;
  top: -30%; bottom: -30%;
  width: 36%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  animation: hmShine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hmShine { 0%, 60% { transform: skewX(-20deg) translateX(-160%); } 100% { transform: skewX(-20deg) translateX(460%); } }

/* ===== 桌面客户端预览窗口（霓虹紫终端，双主题一致深色） ===== */
.hm-window {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid rgba(139, 92, 246, .3);
  background: linear-gradient(160deg, #120e24, #0d1220);
  box-shadow: 0 14px 30px -12px rgba(76, 29, 149, .5), 0 0 0 1px rgba(139, 92, 246, .1);
  animation: hmSec .45s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: .06s;
}
.hm-win-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  background: rgba(10, 7, 22, .85);
  border-bottom: 1px solid rgba(139, 92, 246, .22);
}
.hm-win-dots { display: flex; gap: 4px; }
.hm-win-dots span { width: 7px; height: 7px; border-radius: 50%; background: #334155; }
.hm-win-dots span:nth-child(1) { background: #ef4444; }
.hm-win-dots span:nth-child(2) { background: #f59e0b; }
.hm-win-dots span:nth-child(3) { background: #10b981; }
.hm-win-title { font-size: 10.5px; font-weight: 700; color: #c4b5fd; letter-spacing: .4px; }
.hm-win-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  color: #6ee7b7;
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .3);
  padding: 2px 7px;
  border-radius: 99px;
}
.hm-win-pulse { width: 5px; height: 5px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, .7); animation: hmWinBlink 1.6s ease-in-out infinite; }
@keyframes hmWinBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.hm-win-content { display: flex; min-height: 96px; }
.hm-win-side {
  flex-shrink: 0;
  width: 40px;
  padding: 9px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: rgba(13, 10, 28, .8);
  border-right: 1px solid rgba(139, 92, 246, .22);
  font-size: 12px;
}
.hm-win-side span { opacity: .5; filter: grayscale(.35); transition: opacity .15s; }
.hm-win-side span.active { opacity: 1; filter: none; }
.hm-win-chat {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.hm-win-msg { align-self: flex-end; }
.hm-win-msg span {
  display: inline-block;
  padding: 5px 10px;
  font-size: 10.5px;
  color: #ede9fe;
  background: linear-gradient(135deg, #6d28d9, #4f46e5);
  border-radius: 9px 9px 3px 9px;
}
.hm-win-tools { display: flex; gap: 5px; flex-wrap: wrap; }
.hm-win-tools span {
  font-size: 9px;
  font-weight: 700;
  color: #7dd3fc;
  background: rgba(56, 189, 248, .1);
  border: 1px solid rgba(56, 189, 248, .28);
  padding: 2px 7px;
  border-radius: 99px;
}
.hm-win-text { font-size: 10.5px; color: #cbd5e1; line-height: 1.5; }
.hm-win-cursor {
  display: inline-block;
  width: 6px;
  height: 11px;
  margin-left: 3px;
  vertical-align: -1px;
  background: #a78bfa;
  border-radius: 1px;
  animation: hmWinBlink 1s steps(1) infinite;
}

/* ===== 三步上手 ===== */
.hm-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(139, 92, 246, .3);
  background: rgba(139, 92, 246, .06);
  animation: hmSec .45s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: .12s;
}
.hm-step { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hm-step b {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 3px 8px -2px rgba(109, 40, 217, .5);
}
.hm-step span { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.hm-step-line {
  flex: 1;
  height: 2px;
  min-width: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, #c4b5fd, #7dd3fc);
  opacity: .6;
}

/* ===== 移动端：底部抽屉式 ===== */
@media (max-width: 540px) {
  .hm-mask { align-items: flex-end; padding: 0; }
  .hm-box {
    max-width: 100%;
    max-height: calc(100dvh - 30px);
    border-radius: 22px 22px 0 0;
    border-left: none;
    border-right: none;
    border-top: none;
    animation: hmSheet .42s cubic-bezier(.22, .61, .36, 1) both;
  }
  .hm-head { padding: 30px 52px 17px 18px; }
  .hm-row { gap: 12px; }
  .hm-logo { width: 46px; height: 46px; border-radius: 14px; }
  .hm-logo svg { width: 25px; height: 25px; }
  .hm-badge { margin-bottom: 6px; padding: 3px 9px; font-size: 10px; }
  .hm-title { font-size: 18.5px; margin-bottom: 5px; }
  .hm-chip { margin-left: 8px; padding: 2px 8px; font-size: 10px; vertical-align: 2px; }
  .hm-sub { font-size: 11.5px; }
  .hm-body { padding: 12px 12px 8px; }
  .hm-sec { padding: 11px 12px; gap: 11px; border-radius: 12px; }
  .hm-icon { width: 34px; height: 34px; border-radius: 10px; }
  .hm-icon svg { width: 18px; height: 18px; }
  .hm-window { border-radius: 12px; }
  .hm-win-content { min-height: 84px; }
  .hm-win-side { width: 34px; font-size: 11px; padding: 8px 0; }
  .hm-steps { gap: 6px; padding: 9px 10px; }
  .hm-step { gap: 5px; }
  .hm-step b { width: 18px; height: 18px; font-size: 10px; }
  .hm-step span { font-size: 10.5px; }
  .hm-foot { gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .hm-foot-meta { justify-content: center; gap: 6px 10px; }
  .hm-actions { display: flex; gap: 10px; }
  .hm-skip { flex: 1; height: 44px; }
  .hm-cta { flex: 1.8; height: 44px; font-size: 14px; padding: 0 14px; }
}

/* ===== 暗色主题适配 ===== */
html[data-theme="dark"] .hm-box {
  background: var(--surface-solid);
  border-color: rgba(139, 152, 208, .2);
  box-shadow: 0 0 0 1px rgba(139, 152, 208, .12), var(--shadow-lg);
}
html[data-theme="dark"] .hm-body {
  background: radial-gradient(circle at 12% 0%, rgba(124, 58, 237, .1), transparent 36%);
}
html[data-theme="dark"] .hm-sec { background: var(--surface-solid); border-color: var(--border); }
html[data-theme="dark"] .hm-sec:hover { border-color: rgba(167, 139, 250, .42); box-shadow: 0 8px 22px -6px rgba(109, 40, 217, .35), 0 0 18px rgba(109, 40, 217, .2); }
html[data-theme="dark"] .hm-t { color: var(--text); }
html[data-theme="dark"] .hm-d,
html[data-theme="dark"] .hm-file { color: var(--text-secondary); }
html[data-theme="dark"] .hm-d strong { color: var(--text); }
html[data-theme="dark"] .hm-foot { background: var(--bg-soft); border-color: var(--border); }
html[data-theme="dark"] .hm-skip { background: transparent; color: var(--text-secondary); border-color: var(--border); }
html[data-theme="dark"] .hm-skip:hover { border-color: rgba(var(--glow), .4); color: var(--text); }
html[data-theme="dark"] .hm-check { color: var(--text-secondary); }
html[data-theme="dark"] .hm-check .hm-check-box { background: rgba(139, 152, 208, .08); border-color: rgba(139, 152, 208, .45); }
html[data-theme="dark"] .hm-check:hover .hm-check-box { border-color: #a78bfa; }
html[data-theme="dark"] .hm-steps {
  background: rgba(76, 29, 149, .14);
  border-color: rgba(139, 92, 246, .28);
}
html[data-theme="dark"] .hm-step span { color: var(--text-secondary); }

/* 无障碍：减弱动效（Harness 弹窗） */
@media (prefers-reduced-motion: reduce) {
  .hm-mask,
  .hm-box,
  .hm-box *,
  .hm-orb,
  .hm-sheen,
  .hm-logo,
  .hm-dot,
  .hm-cta::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}