@charset "UTF-8";
/* ==========================================================================
   智链导航（SmartLink Nav）前台补全样式  v1.8.2
   --------------------------------------------------------------------------
   背景：views/ 下的前台模板使用了大量类名，但 style.css 里从未定义，
        导致「有结构没样子」——会员中心套餐竖着堆、宽表格被挤成一排、
        余额卡片变纯文本。本文件把这些类一次性补齐。

   为什么单独建文件而不是塞进 style.css：
     1. style.css 已 3200+ 行，继续追加会很难维护；
     2. 本文件只服务「用户中心 / 广告中心 / 会员中心」等登录后页面，
        独立文件便于按需调试、也便于日后整体替换；
     3. 依赖 style.css 的 CSS 变量（--theme/--border/--muted/--text/--bg），
        因此必须在 style.css 之后加载。

   @copyright 蓝河豚  www.t128.com
   @license   保留所有权利
   ========================================================================== */

/* ==========================================================================
   0. 兜底：确保变量存在（style.css 若被裁剪也不会崩）
   ========================================================================== */
:root {
  --theme: #2563eb;
  --theme-dark: #1d4ed8;
  --border: #e5e7eb;
  --muted: #6b7280;
  --text: #1f2937;
  --bg: #f5f7fb;
  --card: #ffffff;
  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
}

/* ==========================================================================
   1. 通用表格容器 —— 宽表格横向滚动（本次「类型折叠成一排」的核心修复）
   --------------------------------------------------------------------------
   现象：收支明细 / 订单中心 / 广告统计的表头「类型、金额、备注」被压成一排，
        文字竖着断行，完全没法看。
   原因：模板里写了 <div class="table-wrap">，但前台 CSS 从未定义这个类。
        div 只是个普通块元素，不产生任何滚动容器，
        再加上 .table { width:100% }，浏览器只能强行压缩每一列到最小宽度。
   修复：给 .table-wrap 加横向滚动 + 触屏惯性；给 .table 设下限宽度，
        保证列不被压扁（列多时横向滑动即可）。
   ========================================================================== */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */
  scrollbar-width: thin;
  border-radius: 8px;
  /* 右侧渐隐提示「还能往右滑」，滑到底自动消失 */
  background:
    linear-gradient(to right, var(--card, #fff) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--card, #fff) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .10), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .10), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat scroll;
}
.table-wrap > .table {
  /* 表格在滚动容器里要按内容撑开，不能继续 100% 挤压 */
  width: auto;
  min-width: 100%;
}
/* 滚动条美化（WebKit） */
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.table-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* v1.8.1 起：所有前台表格给列一个合理下限，避免被压成竖排单字 */
.table th,
.table td {
  white-space: nowrap;         /* 默认不换行 —— 这是「类型折叠成一排」的直接解法 */
  vertical-align: middle;
}
/* 例外：备注 / 描述类列允许换行，但要有最大宽度约束 */
.table td.cell-wrap,
.table td[data-wrap="1"] {
  white-space: normal;
  min-width: 160px;
  max-width: 320px;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
/* 表格内的纯数字 / 金额列右对齐更易读 */
.table td.cell-num,
.table th.cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.cell-center,
.table th.cell-center { text-align: center; }

/* 小屏：表格字号略降，但仍保持横向滚动而不是换行 */
@media (max-width: 768px) {
  .table { font-size: 12.5px; }
  .table th, .table td { padding: 9px 10px; }
}

/* ==========================================================================
   2. 单元格详情「点击弹出」—— 长文本不再撑破表格
   --------------------------------------------------------------------------
   与 JS 组件 .cell-more 配合：表格里只显示第一行摘要 + 「详情」，
   点开后弹居中弹窗展示完整内容，返回后表格宽度完全不变。
   ========================================================================== */
.cell-truncate {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-more {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--theme);
  background: rgba(37, 99, 235, .08);
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  transition: background .15s ease, border-color .15s ease;
}
.cell-more:hover { background: rgba(37, 99, 235, .16); border-color: rgba(37, 99, 235, .35); }
.cell-more:active { transform: translateY(1px); }

/* 可点击整行的表格（点行 = 看详情） */
.table tbody tr.row-clickable { cursor: pointer; }
.table tbody tr.row-clickable:hover { background: #f8fafc; }
.table tbody tr.row-clickable:hover .cell-more { background: rgba(37, 99, 235, .2); }

/* 详情弹窗 */
.dlg-mask {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;      /* 高度超出屏幕时由 .dlg-box 内部滚动，不裁切 */
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.dlg-mask.dlg-open { display: flex; }
.dlg-box {
  width: 100%;
  max-width: 520px;
  max-height: 84vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--card, #fff);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  animation: dlg-in .18s ease-out;
}
@keyframes dlg-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dlg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
.dlg-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-close {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px;
  background: #f1f5f9; color: #475569;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.dlg-close:hover { background: #e2e8f0; color: #0f172a; }
.dlg-body {
  padding: 16px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.7;
}
.dlg-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: #fafbfc;
  flex-shrink: 0;
}
/* 弹窗内的「字段: 值」清单 */
.dlg-list { margin: 0; }
.dlg-list dt {
  margin: 12px 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.dlg-list dt:first-child { margin-top: 0; }
.dlg-list dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.dlg-list dd.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 9px;
}
/* 弹窗内的高亮数字 */
.dlg-hl { color: var(--theme); font-weight: 700; }
.dlg-in { color: var(--ok); font-weight: 700; }
.dlg-out { color: var(--danger); font-weight: 700; }

@media (max-width: 480px) {
  .dlg-mask { padding: 0; align-items: flex-end; }
  .dlg-box { max-width: 100%; max-height: 88vh; border-radius: 14px 14px 0 0; }
  .cell-truncate { max-width: 130px; }
}

/* ==========================================================================
   3. 余额卡片（用户中心右侧）—— .balance-card-* 三件套原本零定义
   ========================================================================== */
.balance-card {
  background: linear-gradient(135deg, #eff6ff, #e0e7ff);
  border: 1px solid #dbeafe;
  border-radius: 12px;
  padding: 16px 18px;
  min-width: 220px;
}
.balance-card-title {
  font-size: 12px;
  font-weight: 600;
  color: #4338ca;
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.balance-card-amount {
  font-size: 26px;
  font-weight: 700;
  color: #1e3a8a;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.balance-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.balance-card-actions .btn { flex: 1 1 auto; min-width: 64px; }

/* ==========================================================================
   4. 统计卡片（广告数据统计）—— .stats-card-info 原本零定义
   ========================================================================== */
.stats-card-info {
  flex: 1;
  min-width: 0;
}
.stats-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.stats-card-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ==========================================================================
   5. 分页（余额明细 / 订单中心）—— .page-link / .page-info 原本零定义
   ========================================================================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.page-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--text);
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.page-link:hover {
  color: var(--theme);
  border-color: var(--theme);
  background: rgba(37, 99, 235, .06);
}
.page-info {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   6. 空状态提示（余额明细 / 提现记录）—— .empty-tip 原本零定义
   ========================================================================== */
.empty-tip {
  padding: 36px 16px;
  text-align: center;
  background: #fafbfc;
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.empty-tip p {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--text);
}
.empty-tip p + p { margin-bottom: 0; font-size: 13px; }

/* ==========================================================================
   7. 会员中心 —— .mer-* 全族（约 30 个类）原本零定义
   --------------------------------------------------------------------------
   现象：/user/member 整页失样式，套餐卡片竖着堆叠成一条长龙。
   需求：「会员中心选套餐那里做成横排框架」。
   实现：.mer-plans 用 CSS Grid + auto-fit，桌面端一行排开，
        窄屏自动折行，手机端单列 —— 不用写任何媒体查询即可自适应。
   ========================================================================== */

/* ---- 7.1 顶部会员状态横幅 ---- */
.mer-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border: 1px solid #e0e7ff;
}
.mer-hero-vip {
  background: linear-gradient(135deg, #fffbeb, #fef3c7 55%, #fde68a);
  border-color: #fcd34d;
  box-shadow: 0 6px 20px rgba(245, 158, 11, .12);
}
.mer-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 260px;
}
.mer-crown {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: rgba(255, 255, 255, .85);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}
.mer-hero-vip .mer-crown { background: rgba(255, 255, 255, .95); }
.mer-hero-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.mer-hero-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.mer-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  background: #fde68a;
  border-radius: 10px;
}
.mer-hero-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  flex: 0 1 auto;
}

/* ---- 7.2 配额进度 ---- */
.mer-quota { min-width: 190px; flex: 1 1 190px; }
.mer-quota-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.mer-quota-head b {
  font-size: 14px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mer-bar {
  height: 8px;
  background: rgba(15, 23, 42, .08);
  border-radius: 999px;
  overflow: hidden;
}
.mer-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--theme), #60a5fa);
  transition: width .35s ease;
}
.mer-quota-foot {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--muted);
}
.mer-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 10px;
}
.mer-balance > span { font-size: 12px; }
.mer-balance > b {
  font-size: 17px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---- 7.3 套餐卡片：横排核心 ---- */
.mer-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
  align-items: stretch;
}
/* 套餐数只有 2 个时不要拉得过分宽 */
@media (min-width: 900px) {
  .mer-plans { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
}
.mer-plan {
  position: relative;
  display: block;
  background: var(--card, #fff);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px 16px 14px;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  height: 100%;
}
.mer-plan:hover {
  border-color: #bfdbfe;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .10);
  transform: translateY(-2px);
}
.mer-plan-on {
  border-color: var(--theme);
  background: linear-gradient(180deg, #f0f6ff, #ffffff 60%);
  box-shadow: 0 8px 22px rgba(37, 99, 235, .16);
}
/* 单选圈：放右上角，不占内容流 */
.mer-plan > input[type="radio"] {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--theme);
  cursor: pointer;
}
.mer-plan-body { display: flex; flex-direction: column; height: 100%; }
.mer-plan-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  padding-right: 26px;          /* 给右上角单选圈让位 */
  line-height: 1.35;
  min-height: 20px;
}
.mer-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 10px 0 8px;
}
.mer-plan-price b {
  font-size: 25px;
  font-weight: 700;
  color: var(--theme);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.mer-plan-price > span {
  font-size: 12px;
  color: var(--muted);
}
.mer-plan-tag {
  position: absolute;
  top: -9px;
  left: 14px;
  height: 19px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #f97316, #ef4444);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(239, 68, 68, .28);
}
.mer-plan-tag-ent {
  left: auto;
  right: 44px;
  background: linear-gradient(90deg, #7c3aed, #4f46e5);
  box-shadow: 0 2px 6px rgba(79, 70, 229, .28);
}
.mer-plan-desc {
  flex: 1;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.mer-plan-days {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--muted);
}

/* ---- 7.4 支付方式 ---- */
.mer-pay {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.mer-pay-label {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.mer-pay-opts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.mer-pay-opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  background: var(--card, #fff);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.mer-pay-opt:hover { border-color: #bfdbfe; }
.mer-pay-opt input[type="radio"] { margin: 0; accent-color: var(--theme); }
.mer-pay-opt > span > b { font-weight: 500; color: var(--muted); font-size: 12px; }
.mer-pay-opt-on {
  border-color: var(--theme);
  background: rgba(37, 99, 235, .06);
}
.mer-pay-hint {
  flex: 1 1 100%;
  font-size: 12px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 7px 11px;
}
.mer-pay > .btn { flex-shrink: 0; }

/* ---- 7.5 权益对照表 ---- */
.mer-table th:first-child,
.mer-table td:first-child { position: sticky; left: 0; background: var(--card, #fff); z-index: 1; }
.mer-table th:first-child { background: #f9fafb; }
/* 高亮 Pro 列，帮用户做决策 */
.mer-table .mer-th-pro {
  background: rgba(37, 99, 235, .06);
  color: var(--theme);
  font-weight: 700;
}
.mer-table td.mer-th-pro { background: rgba(37, 99, 235, .04); }
.mer-b-icon {
  display: inline-block;
  width: 20px;
  margin-right: 6px;
  text-align: center;
}
/* 状态小标签：会员订单状态 */
.mer-st {
  display: inline-block;
  height: 21px;
  line-height: 21px;
  padding: 0 9px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 11px;
  white-space: nowrap;
}
.mer-st-ok   { color: #065f46; background: #d1fae5; }
.mer-st-wait { color: #92400e; background: #fef3c7; }
.mer-st-off  { color: #6b7280; background: #f1f5f9; }

/* 会员中心整体小屏优化 */
@media (max-width: 640px) {
  .mer-hero { flex-direction: column; align-items: stretch; }
  .mer-hero-right { flex-direction: column; align-items: stretch; }
  .mer-quota { min-width: 0; }
  .mer-balance { justify-content: space-between; }
  .mer-pay { flex-direction: column; align-items: stretch; }
  .mer-pay-opts { flex-direction: column; align-items: stretch; }
  .mer-pay-opt { justify-content: flex-start; }
  .mer-pay > .btn { width: 100%; }
  .mer-plans { grid-template-columns: 1fr; }
  .mer-plan-tag-ent { right: 44px; }
}

/* 暗色模式适配（跟随 style.css 的 [data-theme="dark"]） */
[data-theme="dark"] .mer-hero { background: linear-gradient(135deg, #1e293b, #1e1b4b); border-color: #312e81; }
[data-theme="dark"] .mer-hero-vip { background: linear-gradient(135deg, #292524, #3f2d0c); border-color: #78350f; }
[data-theme="dark"] .mer-crown { background: rgba(255, 255, 255, .1); }
[data-theme="dark"] .mer-balance { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .mer-plan,
[data-theme="dark"] .mer-pay-opt { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .mer-plan-on { background: linear-gradient(180deg, #172554, #1e293b 60%); }
[data-theme="dark"] .mer-pay { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .mer-plan-days { border-color: #334155; }
[data-theme="dark"] .mer-table th:first-child { background: #1e293b; }
[data-theme="dark"] .mer-table td:first-child { background: #0f172a; }
[data-theme="dark"] .balance-card { background: linear-gradient(135deg, #1e293b, #1e1b4b); border-color: #312e81; }
[data-theme="dark"] .balance-card-title { color: #a5b4fc; }
[data-theme="dark"] .balance-card-amount { color: #e0e7ff; }
[data-theme="dark"] .dlg-box { background: #1e293b; }
[data-theme="dark"] .dlg-foot { background: #0f172a; }
[data-theme="dark"] .dlg-list dd.mono { background: #0f172a; }

/* ==========================================================================
   8. 其余零星缺失类（补齐后避免「有结构没样子」）
   ========================================================================== */

/* ---- 8.1 广告位购买页 ---- */
.slot-hour {
  height: 38px;
  padding: 0 8px;
  font-size: 13px;
  color: var(--text);
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.ad-input-link,
.ad-input-title,
.ad-input-desc,
.ad-input-qq,
.ad-input-email,
.ad-input-contact { width: 100%; }
.ad-input-desc { resize: vertical; }
.ad-preview-email,
.ad-preview-contact {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.amount-custom {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---- 8.2 提交网址页 ---- */
.apply-page { display: block; }
.apply-aside {
  align-self: flex-start;
  position: sticky;
  top: 16px;
}
@media (max-width: 900px) {
  .apply-aside { position: static; }
}

/* ---- 8.3 审核进度 / 结果页 ---- */
.audit-progress-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid var(--theme);
  border-radius: 8px;
}
.embed-guide {
  margin-top: 16px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.7;
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.embed-guide pre {
  margin: 10px 0 0;
  padding: 11px 13px;
  overflow-x: auto;
  font-size: 12px;
  color: #e2e8f0;
  background: #1e293b;
  border-radius: 7px;
}
.badge-required,
.badge-ai {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
}
.badge-required { color: #991b1b; background: #fee2e2; }
.badge-ai { color: #5b21b6; background: #ede9fe; }

/* ---- 8.4 热门事件 / 资讯 ---- */
.hot-main { min-width: 0; flex: 1; }
.hot-side {
  width: 288px;
  flex-shrink: 0;
  align-self: flex-start;
}
.hot-item-body { flex: 1; min-width: 0; }
.side-title {
  margin: 0 0 12px;
  padding-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.related-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.related-list li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13.5px;
  line-height: 1.55;
}
.related-list li:last-child { border-bottom: 0; }
.article-item-body { flex: 1; min-width: 0; }
.news-col { min-width: 0; }
.news-col-main { flex: 1 1 0; min-width: 0; }
.news-row-list-hot { }
@media (max-width: 900px) {
  .hot-side { width: 100%; }
  .hot-main { width: 100%; }
}

/* ---- 8.5 分类 / 页面容器 ---- */
.cat-panel { }
.cat-desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.cat-empty {
  padding: 48px 20px;
  text-align: center;
  background: #fafbfc;
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.cat-empty-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.page-content {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text);
}
.page-content h2 { margin: 26px 0 12px; font-size: 19px; }
.page-content h3 { margin: 20px 0 10px; font-size: 16px; }
.page-content p { margin: 0 0 14px; }
.page-content img { max-width: 100%; height: auto; border-radius: 8px; }
.page-content a { color: var(--theme); }
.page-content table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.page-content table th,
.page-content table td { padding: 8px 11px; border: 1px solid var(--border); font-size: 13.5px; }

/* ---- 8.6 图标类（home/_news_block、index） ---- */
.icon-news,
.icon-fire,
.icon-rocket {
  display: inline-block;
  width: 16px;
  text-align: center;
}
/* v1.8.5 修复：此处的 .search-suggest-seed 样式已整体移除。
   该类在 header.php / error.php 中是「隐藏种子元素」（带 hidden 属性，
   仅供 app.js 读取 data-* 数据），此前的 display:inline-block + 浅色背景
   覆盖了 hidden 的默认 display:none，导致所有页面 header 出现一个白色小胶囊，
   并把顶栏撑变形。 */

/* ---- 8.7 会员支付流程页 ---- */
.pay-order-summary {
  padding: 16px 18px;
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pay-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 13.5px;
  border-bottom: 1px dashed var(--border);
}
.pay-order-row:last-child { border-bottom: 0; }
.pay-order-row > span:first-child { color: var(--muted); flex-shrink: 0; }
.pay-order-row > span:last-child,
.pay-order-amount {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}
.pay-order-amount { font-size: 16px; }
.pay-done {
  padding: 28px 20px;
  text-align: center;
}
.pay-done-icon {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 12px;
}
.pay-qr-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.pay-qr-box img { max-width: 220px; width: 100%; height: auto; display: block; }

/* ---- 8.8 表单提交按钮行 ---- */
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
@media (max-width: 480px) {
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
}

/* ---- 8.9 生效中的置顶订单右侧信息 ---- */
.sub-hero-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ---- 8.10 锁定提示 ---- */
.locked-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
}

/* ---- 8.11 其余零星补全（2026-09 复检新增） ---- */

/* 描边按钮：与 .btn 配合使用 */
.btn-outline {
  color: var(--theme);
  background: transparent;
  border: 1px solid var(--theme);
}
.btn-outline:hover {
  color: #fff;
  background: var(--theme);
}

/* 日期 + 小时选择行：广告位/置顶购买表单 */
.slot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.slot-start-date,
.slot-end-date {
  flex: 1 1 160px;
  min-width: 0;
}
@media (max-width: 480px) {
  .slot-row { flex-direction: column; align-items: stretch; }
  .slot-start-date,
  .slot-end-date { flex: 1 1 auto; width: 100%; }
}

/* 购买表单容器（置顶页）：本身不需要特殊样式，
   但显式声明可避免日后误以为漏写，同时给内部 form-group 统一间距 */
.promote-form { display: block; }
.promote-form .form-group { margin-bottom: 14px; }


/* ==========================================================================
   v1.8.3 收藏夹
   --------------------------------------------------------------------------
   包含两块：
     A. 站点卡片上的 ☆ 收藏按钮（全站通用，覆盖在 <a class="site-card"> 之上）
     B. /user/favorites 收藏夹管理页
   注意：.site-card 本身是 <a>，按钮不能嵌套其中（HTML 非法且会误触发跳转），
        因此采用「外层 wrap 定位 + 按钮绝对定位」的方案，
        结构上按钮与 <a> 是兄弟节点，点击互不干扰。
   ========================================================================== */

/* ---------- A. 站点卡片 ☆ 按钮 ----------
   定位决策（重要，勿轻易改动）：
     站点卡片左侧的「可用空间」只有卡片 12px 的内边距，其余位置依次是
     站点图标 .fav（40×40，x=75 起）与站名/描述文本。右侧则被「访问」按钮占用：
       style.css:272  .site-visit        { position:absolute; right:8px; top:8px; }
       style.css:529  .site-visit-inline { position:absolute; right:8px; top:50%; }

     这两条路都走不通：
       · 放右上角 → 与 .site-visit 像素级重叠（截图实测确认）
       · 放左上角覆盖层 → 与站点图标 .fav 重叠（几何检测实测 237~456px²）
     想用 `~` 兄弟选择器错位也无效：.site-visit-inline 同时挂着 .site-visit 类，
     而后者在 style.css 里位置更靠后，会把前一条的定位声明覆盖掉。

     最终方案（分两件事）：
       1) ☆ 挤在卡片左上角的**内边距留白**里：把尺寸收到 20×20 并贴到 2px/2px，
          此时它占据 x=64..84，而站点图标从 x=75 才开始 —— 仍会压到图标右上角。
       2) 所以再给卡片**让出空间**：命中 .sl-fav-wrap 的卡片额外获得 padding-left，
          把内容整体右移，为 ☆ 腾出一条独立的竖向通道（见下方 .sl-fav-wrap .site-card）。
      这样两个元素在几何上完全不相交，也不依赖 DOM 顺序或其它模块的样式。

     未收藏时默认 opacity:0，只有 hover / 已收藏 / 触屏才显形，避免干扰浏览。 */
.sl-fav-wrap { position: relative; min-width: 0; }

/* 为 ☆ 让出左上角一条通道：卡片原本 padding 12px，图标紧贴左上。
   这里把左内边距加大到 40px（= 2px 偏移 + 24px 按钮 + 14px 呼吸），
   图标与文字整体右移，☆ 独占最左侧那条竖向空间，互不干扰。
   注意必须用 .sl-fav-wrap 限定，不能改全局 .site-card，否则会影响
   未接入收藏按钮的页面。 */
.sl-fav-wrap .site-card { padding-left: 40px; }

.sl-fav-btn {
  position: absolute; top: 50%; left: 6px; z-index: 4;
  transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #cbd5e1;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--border); border-radius: 50%;
  cursor: pointer; opacity: 0;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .10);
  transition: opacity .15s, transform .15s, color .15s, background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.sl-fav-wrap:hover .sl-fav-btn,
.sl-fav-wrap:focus-within .sl-fav-btn,
.sl-fav-btn:focus { opacity: 1; }
.sl-fav-btn:hover { color: #f59e0b; border-color: #fcd34d; transform: translateY(-50%) scale(1.12); background: #fffbeb; }
.sl-fav-btn.is-fav { opacity: 1; color: #f59e0b; border-color: #fcd34d; background: #fffbeb; }
.sl-fav-btn:active { transform: translateY(-50%) scale(.94); }
/* 收藏瞬间的小弹跳，给出明确的操作反馈。
   注意 keyframes 里必须带上 translateY(-50%)，否则动画会覆盖掉居中位移，
   按钮会在播放动画的 0.32 秒里「跳」到卡片顶部再弹回来。 */
@keyframes slFavPop {
  0%   { transform: translateY(-50%) scale(1); }
  45%  { transform: translateY(-50%) scale(1.35); }
  100% { transform: translateY(-50%) scale(1); }
}
.sl-fav-btn.is-fav { animation: slFavPop .32s ease; }
@media (prefers-reduced-motion: reduce) {
  .sl-fav-btn.is-fav { animation: none; }
}

/* 排行榜卡片（.hot-card）的左上角被序号角标 .rank-badge 占据
   （style.css:2713 `position:absolute; top:-9px; left:-9px`，且
   .site-card.hot-card 特意放开了 overflow:visible 让它伸出卡片外）。

   由于 ☆ 现在垂直居中（top:50%），水平上又与角标同在左侧，
   两者会同时争夺左上角。解法：把角标**右移到 ☆ 的通道之外**，
   而不是把 ☆ 挪开 —— 因为 ☆ 的位置已由「避开站点图标」确定，
   再往下挪会重新压到图标。角标右移后仍紧贴卡片左上外观，视觉上可接受。
   实际结构：<div class="sl-fav-wrap"><a class="site-card hot-card"><span class="rank-badge">…</span>…</a><button class="sl-fav-btn"></div>
   用 :has() 命中「内含角标的卡片」；旧浏览器不支持时该规则失效，
   退化为角标压在 ☆ 上方（仅排行榜页、且 ☆ 未收藏时不可见，影响很小）。 */
.sl-fav-wrap:has(.rank-badge) .rank-badge { left: 34px; }
/* 置顶角标同理（.promote-badge 也在左上角） */
.sl-fav-wrap:has(.promote-badge) .promote-badge { left: 34px; }

/* 触屏设备没有 hover，按钮常显，否则用户根本发现不了 */
@media (hover: none) {
  .sl-fav-btn { opacity: 1; }
}

/* ---------- 轻提示 ---------- */
.sl-fav-toast {
  position: fixed; left: 50%; bottom: 48px; z-index: 9999;
  transform: translate(-50%, 16px);
  max-width: 76vw; padding: 11px 20px;
  background: rgba(17, 24, 39, .92); color: #fff;
  font-size: 14px; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.sl-fav-toast.show { opacity: 1; transform: translate(-50%, 0); }
.sl-fav-toast.err { background: rgba(185, 28, 28, .94); }

/* ---------- B. 收藏夹管理页 ---------- */
.fav-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.fav-stat {
  padding: 14px 16px; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px;
  text-align: center;
}
.fav-stat-num { font-size: 22px; font-weight: 700; color: var(--theme); line-height: 1.3; }
.fav-stat-label { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* 分组切换条 */
.fav-group-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.fav-group-chip-wrap { position: relative; display: inline-flex; align-items: center; }
.fav-group-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; font-size: 13px;
  background: #f1f5f9; color: var(--text);
  border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  transition: .15s;
}
.fav-group-chip:hover { background: #e2e8f0; color: var(--text); }
.fav-group-chip.active { background: var(--theme); color: #fff; }
.fav-chip-count {
  font-size: 11px; padding: 1px 6px; border-radius: 999px;
  background: rgba(0, 0, 0, .08);
}
.fav-group-chip.active .fav-chip-count { background: rgba(255, 255, 255, .25); }
.fav-chip-more {
  margin-left: -4px; padding: 2px 7px; font-size: 15px; line-height: 1;
  color: var(--muted); background: none; border: none; cursor: pointer;
  border-radius: 999px; transition: .15s;
}
.fav-chip-more:hover { color: var(--theme); background: #e2e8f0; }

/* 工具栏：搜索 + 批量 */
.fav-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.fav-search { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 300px; min-width: 0; }
.fav-search input[type="text"] {
  flex: 1 1 200px; min-width: 0;
  padding: 9px 14px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text);
}
.fav-search input[type="text"]:focus {
  outline: none; border-color: var(--theme);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.fav-batch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 7px 12px; font-size: 13px;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 9px;
}
/* 关键：display:flex 会覆盖浏览器对 hidden 属性的默认 display:none，
   导致「未选中任何项」时批量操作条依然显示。必须显式声明。
   （同一个坑在 .fav-modal 上也要防一次。） */
.fav-batch[hidden] { display: none; }
.fav-batch-info { color: #1e40af; }
.fav-batch-info b { font-size: 15px; }

.fav-hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; }

/* 收藏卡片网格 */
.fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 14px;
}
.fav-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}
.fav-card:hover {
  border-color: var(--theme);
  box-shadow: 0 6px 20px rgba(37, 99, 235, .10);
  transform: translateY(-2px);
}
.fav-card.is-selected { border-color: var(--theme); background: #f8faff; }
.fav-card.dragging { opacity: .45; }
.fav-card.drag-over { border-color: var(--theme); border-style: dashed; }

.fav-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; min-height: 20px;
}
.fav-check { display: inline-flex; align-items: center; cursor: pointer; }
.fav-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.fav-check span {
  display: inline-block; width: 16px; height: 16px;
  border: 1.5px solid var(--border); border-radius: 4px;
  background: var(--card); transition: .15s; position: relative;
}
.fav-check input:checked + span { background: var(--theme); border-color: var(--theme); }
.fav-check input:checked + span::after {
  content: '✓'; position: absolute; left: 0; top: -2px;
  width: 100%; text-align: center;
  color: #fff; font-size: 12px; line-height: 16px; font-weight: 700;
}
.fav-check input:focus-visible + span { box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }

.fav-drag {
  font-size: 15px; color: #cbd5e1; cursor: grab; user-select: none;
  letter-spacing: -2px; padding: 0 2px;
}
.fav-card[draggable="true"] .fav-drag:hover { color: var(--theme); }
.fav-card[draggable="true"] .fav-drag { cursor: grab; }
/* 「全部」视图混排时禁止拖拽，此时把拖拽手柄淡出，避免给出错误暗示 */
.fav-grid[data-sortable="0"] .fav-drag { opacity: .25; cursor: default; }

.fav-card-link { display: block; text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.fav-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fav-card-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px; object-fit: contain; background: #f1f5f9;
}
.fav-card-icon-txt {
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--theme);
  background: #eff6ff;
}
.fav-card-title { min-width: 0; flex: 1; }
.fav-card-title h3 {
  margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fav-card:hover .fav-card-title h3 { color: var(--theme); }
.fav-card-host {
  font-size: 11.5px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fav-card-desc {
  margin: 9px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: break-word;
}

.fav-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 11px; padding-top: 9px;
  border-top: 1px dashed var(--border);
}
.fav-remark {
  flex: 1; min-width: 0; font-size: 12px; color: #92400e;
  background: #fffbeb; border-radius: 6px; padding: 4px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fav-remark-add {
  flex: 1; min-width: 0; text-align: left;
  font-size: 12px; color: var(--muted);
  background: none; border: 1px dashed var(--border); border-radius: 6px;
  padding: 4px 8px; cursor: pointer; transition: .15s;
}
.fav-remark-add:hover { color: var(--theme); border-color: var(--theme); }

.fav-card-ops { display: flex; gap: 3px; flex-shrink: 0; }
.fav-op {
  width: 26px; height: 26px; padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--muted);
  background: none; border: 1px solid transparent; border-radius: 7px;
  cursor: pointer; transition: .15s;
}
.fav-op:hover { color: var(--theme); background: #eff6ff; border-color: #bfdbfe; }
.fav-op-del:hover { color: #dc2626; background: #fef2f2; border-color: #fecaca; }

/* ---------- 弹窗 ---------- */
.fav-modal { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; }
.fav-modal[hidden] { display: none; }
.fav-modal-mask { position: absolute; inset: 0; background: rgba(15, 23, 42, .48); }
.fav-modal-box {
  position: relative; z-index: 1;
  width: min(420px, 92vw); padding: 20px;
  background: var(--card); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  animation: favModalIn .18s ease;
}
@keyframes favModalIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.fav-modal-box h3 { margin: 0 0 14px; font-size: 16px; }
.fav-field { display: block; margin-bottom: 4px; }
.fav-field > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.fav-field input[type="text"], .fav-field select {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--text);
}
.fav-field input[type="text"]:focus, .fav-field select:focus {
  outline: none; border-color: var(--theme);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.fav-modal-choice { display: flex; flex-direction: column; gap: 8px; }
.fav-modal-choice .btn { width: 100%; }
.fav-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
body.fav-modal-open { overflow: hidden; }

/* ---------- 空状态内的按钮间距 ---------- */
.empty-tip .btn { margin-top: 4px; }

/* ---------- 暗色模式 ---------- */
[data-theme="dark"] .fav-stat,
[data-theme="dark"] .fav-card,
[data-theme="dark"] .fav-modal-box { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .fav-group-chip { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .fav-group-chip:hover { background: #334155; }
[data-theme="dark"] .fav-group-chip.active { background: var(--theme); color: #fff; }
[data-theme="dark"] .fav-card:hover { background: #1e293b; }
[data-theme="dark"] .fav-card.is-selected { background: #1e293b; border-color: var(--theme); }
[data-theme="dark"] .fav-batch { background: #1e3a5f; border-color: #1e40af; }
[data-theme="dark"] .fav-batch-info { color: #bfdbfe; }
[data-theme="dark"] .fav-remark { background: #3f2d0c; color: #fcd34d; }
[data-theme="dark"] .fav-card-icon,
[data-theme="dark"] .fav-card-icon-txt { background: #0f172a; }
[data-theme="dark"] .fav-op:hover { background: #1e3a5f; }
[data-theme="dark"] .fav-search input[type="text"],
[data-theme="dark"] .fav-field input[type="text"],
[data-theme="dark"] .fav-field select { background: #0f172a; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .sl-fav-btn { background: rgba(30, 41, 59, .94); border-color: #334155; color: #64748b; }
[data-theme="dark"] .sl-fav-btn:hover,
[data-theme="dark"] .sl-fav-btn.is-fav { background: #3f2d0c; border-color: #78350f; color: #fbbf24; }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .fav-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
  .fav-card { padding: 10px; }
  .fav-card-desc { -webkit-line-clamp: 2; font-size: 12px; }
  .fav-toolbar { flex-direction: column; align-items: stretch; }
  .fav-search { flex: 1 1 auto; }
  .fav-search input[type="text"] { flex: 1 1 100%; }
  .fav-stats { grid-template-columns: repeat(2, 1fr); }
  .fav-batch { justify-content: space-between; }
  .fav-modal-box { width: 94vw; }

  /* 小屏卡片宽度收窄，☆ 通道也相应收窄：按钮略缩小、左偏移减到 4px，
     卡片左内边距从 40px 收到 32px，把省下的横向空间还给站名。
     触屏无 hover（见 @media (hover:none)），按钮常显，因此必须足够小。 */
  .sl-fav-btn { width: 22px; height: 22px; font-size: 13px; left: 5px; }
  .sl-fav-wrap .site-card { padding-left: 32px; }
}

/* 超窄屏（<380px）：卡片横向空间已经不够再切一条 ☆ 通道
   （分类页网格在 360px 下每张卡片仅约 155px 宽），
   改让 ☆ 退出浮层、成为 flex 行内的第一个元素，排在卡片左侧。
   此时卡片恢复常规内边距，不再需要 40px 的左侧通道。
   ------------------------------------------------------------------
   踩过的坑：.rank-badge（排行榜序号）是 absolute + top/left:-9px，
   会伸出卡片左上角之外。☆ 一旦改为静态排版，两者必然在左上角相撞。
   但二者其实是**同一种信息**（都是「这张卡片的角标」）：
   既然 ☆ 已经独占左侧 30px，就没有必要再展示序号，
   直接隐藏序号比硬挤出 9px 空隙更干净 —— 且窄屏上序号本来就读不清。 */
@media (max-width: 380px) {
  .sl-fav-wrap { display: flex; align-items: center; gap: 6px; }
  .sl-fav-wrap .site-card { flex: 1 1 auto; padding-left: 10px; }
  .sl-fav-btn {
    position: static; flex: 0 0 auto;
    transform: none;                 /* 静态排版下不需要垂直居中位移 */
    width: 30px; height: 30px; font-size: 15px;
    order: -1;                       /* 排在卡片之前，落在左侧 */
  }
  /* 静态排版后按钮不再有 translateY，动画也要相应去掉位移 */
  .sl-fav-btn.is-fav { animation: none; }
  /* 窄屏上 ☆ 已占据左侧角标位，隐藏排行榜序号，避免两个角标互相压字 */
  .sl-fav-wrap .rank-badge { display: none; }
}
@media (max-width: 420px) {
  .fav-grid { grid-template-columns: 1fr 1fr; }
  .fav-card-title h3 { font-size: 13.5px; }
  .fav-card-host { display: none; }
}

/* ==========================================================================
   v1.8.3 补漏：.btn-ghost 与 .pager
   --------------------------------------------------------------------------
   .btn-ghost 在收藏夹页用于「次级操作」（导出、清空、取消选择等），
   此前从未定义 —— 属于「有结构没样式」的同类问题，这里一并补齐。
   视觉上刻意弱于 .btn-primary：无填充、灰色描边，hover 才上主题色，
   避免页面上出现两个同等重量的按钮让用户不知点哪个。
   ========================================================================== */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}
.btn-ghost:hover {
  background: #f8fafc;
  border-color: var(--theme);
  color: var(--theme);
}
.btn-ghost:active { background: #f1f5f9; }

/* 分页容器（.page-link / .page-info 已在 v1.8.2 定义，这里只补外层布局） */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 4px;
}

[data-theme="dark"] .btn-ghost { color: #94a3b8; border-color: #334155; }
[data-theme="dark"] .btn-ghost:hover { background: #1e293b; border-color: var(--theme); color: #93c5fd; }

/* ==========================================================================
   v1.8.5 签到 / 积分 / 邀请 / 站长数据看板
   --------------------------------------------------------------------------
   颜色一律走 CSS 变量（--card/--border/--muted/--text），
   暗黑模式随变量自动切换，不再出现「深底白卡」问题。
   ========================================================================== */

/* ---- 首页签到营销条 ---- */
.sign-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 0; padding: 12px 16px;
  background: linear-gradient(120deg, rgba(37,99,235,.08), rgba(124,58,237,.08));
  border: 1px solid var(--border); border-radius: var(--radius);
}
.sign-bar-text { flex: 1 1 200px; font-size: 13.5px; color: var(--text); }
.sign-bar-text b { color: var(--theme); font-size: 15px; }
.sign-bar-btn {
  padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--theme); color: #fff;
}
.sign-bar-btn:hover { background: var(--theme-dark); color: #fff; }

/* ---- 签到主卡 ---- */
.sign-hero { padding: 22px 18px; }
.sign-hero-stats {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.sign-stat { text-align: center; min-width: 96px; }
.sign-stat-num { display: block; font-size: 30px; font-weight: 800; color: var(--text); line-height: 1.2; }
.sign-stat-label { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.sign-stat-main { flex: 1 1 220px; }
.sign-form { display: inline-block; }
.sign-btn { padding: 12px 28px; font-size: 15px; }
.sign-state { display: inline-block; font-size: 16px; font-weight: 700; color: #16a34a; padding: 8px 0; }
.sign-state-tip { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.sign-hero-foot {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border);
  font-size: 13px; color: var(--muted);
}
.sign-hero-foot b { color: var(--theme); }

/* ---- 本月签到日历 ---- */
.sign-calendar {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px;
}
.sign-cal-cell {
  position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 13px; background: var(--bg, #f5f7fb); color: var(--muted);
}
.sign-cal-head { background: transparent; font-weight: 600; color: var(--muted); }
.sign-cal-empty { background: transparent; }
.sign-cal-cell.signed { background: var(--theme); color: #fff; font-weight: 700; }
.sign-cal-cell.signed i {
  position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 9px; opacity: .85;
}
.sign-cal-cell.future { opacity: .45; }
.sign-cal-cell.today { box-shadow: inset 0 0 0 2px var(--theme); }

/* ---- 兑换快捷入口（签到页底部） ---- */
.sign-ex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 10px; }
.sign-ex-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  text-align: center; background: var(--card);
}
.sign-ex-item:hover { border-color: var(--theme); }
.sign-ex-icon { font-size: 24px; }
.sign-ex-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.sign-ex-cost { font-size: 12.5px; color: var(--theme); font-weight: 700; }

/* ---- 积分概览 ---- */
.point-overview {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(124,58,237,.10));
}
.point-overview-main { text-align: center; min-width: 140px; }
.point-overview-num { display: block; font-size: 38px; font-weight: 800; color: var(--theme); line-height: 1.15; }
.point-overview-label { font-size: 12.5px; color: var(--muted); }
.point-overview-side { flex: 1; display: flex; gap: 22px; flex-wrap: wrap; }
.point-kv { display: flex; flex-direction: column; gap: 2px; }
.point-kv span { font-size: 12px; color: var(--muted); }
.point-kv b { font-size: 16px; color: var(--text); }

/* ---- 兑换卡片 ---- */
.point-ex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 10px; }
.point-ex-item { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.point-ex-head { display: flex; align-items: center; gap: 8px; }
.point-ex-icon { font-size: 22px; }
.point-ex-label { font-weight: 700; font-size: 14px; color: var(--text); }
.point-ex-desc { margin: 8px 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.point-ex-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.point-ex-cost { font-weight: 800; color: var(--theme); font-size: 14px; }
.point-ex-form { display: flex; align-items: center; gap: 6px; }
.point-ex-select { max-width: 130px; font-size: 12px; padding: 5px 8px; }
.point-ex-lack { margin: 8px 0 0; font-size: 12px; color: #d97706; }
.point-plus { color: #16a34a; font-weight: 700; }
.point-minus { color: #dc2626; font-weight: 700; }

/* ---- 邀请页 ---- */
.invite-hero { display: flex; gap: 24px; flex-wrap: wrap; }
.invite-stat { flex: 1 1 120px; text-align: center; }
.invite-stat-num { display: block; font-size: 28px; font-weight: 800; color: var(--theme); }
.invite-stat-label { font-size: 12px; color: var(--muted); }
.invite-link-box { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-link-box input {
  flex: 1 1 260px; padding: 10px 12px; font-size: 13px; font-family: ui-monospace, monospace;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg, #f5f7fb); color: var(--text);
}
.invite-code { padding: 2px 8px; border-radius: 6px; background: var(--bg, #f5f7fb); font-weight: 700; letter-spacing: 1px; }
.invite-banner {
  margin-bottom: 14px; padding: 10px 14px; border-radius: 8px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 13px; font-weight: 600;
}

/* ---- 侧栏积分小卡 ---- */
.side-point-card {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  margin-top: 10px; padding: 9px 10px; border-radius: 10px;
  background: rgba(37,99,235,.08); border: 1px dashed rgba(37,99,235,.35);
  font-size: 12.5px;
}
.side-point-card .side-point-num { font-weight: 700; color: var(--theme); }
.side-point-card .side-point-sign { color: var(--muted); }
.side-point-card.signed .side-point-sign { color: #16a34a; }
.side-point-card:hover { border-color: var(--theme); }
[data-theme="dark"] .invite-banner { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .4); color: #fcd34d; }

/* ---- 站长数据看板 ---- */
.sstat-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 10px; }
.sstat-sum { text-align: center; padding: 12px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.sstat-sum-num { display: block; font-size: 22px; font-weight: 800; color: var(--text); }
.sstat-sum-label { font-size: 11.5px; color: var(--muted); }
.sstat-chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 160px; padding: 10px 4px 0;
}
.sstat-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; cursor: default; }
.sstat-bar {
  display: block; width: 100%; max-width: 26px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--theme), rgba(37,99,235,.35));
  min-height: 1px;
}
.sstat-col:hover .sstat-bar { background: var(--theme-dark); }
.sstat-day { font-size: 9px; color: var(--muted); margin-top: 4px; white-space: nowrap; }

@media (max-width: 768px) {
  .sstat-day { display: none; }
  .sstat-col:nth-child(5n+1) .sstat-day { display: block; }
  .sign-hero-stats { flex-direction: column; }
  .point-ex-select { max-width: 110px; }
}

/* ===================== v2.0 任务中心 / 新手引导 / 分享裂变 ===================== */
.task-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.task-sum-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  text-align: center;
}
.task-sum-num { font-size: 20px; font-weight: 800; color: var(--theme); }
.task-sum-points .task-sum-num { color: #16a34a; }
.task-sum-label { font-size: 12px; color: var(--muted); }
.task-guide-tip {
  border-left: 4px solid #6366f1;
  font-size: 13px;
  color: var(--muted);
}
.task-guide-tip a { color: #6366f1; font-weight: 600; }

.task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.task-card {
  border: 1px solid var(--border, #eee);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card, #fff);
  transition: box-shadow .15s, border-color .15s;
}
.task-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.task-card.done { border-color: #16a34a; background: #f6fdf8; }
.task-card-head { display: flex; align-items: flex-start; gap: 10px; }
.task-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.task-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.task-title { font-weight: 700; font-size: 15px; }
.task-desc { font-size: 12.5px; color: var(--muted); overflow-wrap: break-word; word-break: break-word; }
.task-pts {
  flex-shrink: 0;
  font-weight: 800;
  color: #f59e0b;
  font-size: 15px;
  background: #fff7ed;
  border-radius: 999px;
  padding: 2px 10px;
}
.task-card-foot { margin-top: auto; }
.task-state { font-size: 13px; font-weight: 600; color: #16a34a; }
.task-done { display: inline-flex; align-items: center; gap: 4px; }
.task-go { width: 100%; justify-content: center; }
.task-share-form { width: 100%; }

.share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
}
.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border: 1px solid var(--border, #eee);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text, #222);
  background: var(--card, #fff);
  transition: transform .12s, box-shadow .12s;
}
.share-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.share-ico { font-size: 24px; }
.share-name { font-size: 12.5px; }
.share-wechat { cursor: pointer; }
.share-point-form { margin-top: 14px; }

/* 新手引导浮层 */
.guide-mask {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .55);
  padding: 16px;
}
.guide-mask[hidden] { display: none; }
.guide-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 18px;
  padding: 26px 24px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: guidePop .2s ease;
}
@keyframes guidePop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.guide-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: #f1f5f9; color: #475569;
  font-size: 14px; cursor: pointer;
}
.guide-close:hover { background: #e2e8f0; }
.guide-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.guide-kicker { font-size: 13px; font-weight: 700; color: #6366f1; letter-spacing: 1px; }
.guide-progress { font-size: 12px; color: var(--muted); }
.guide-step { text-align: center; }
.guide-step[hidden] { display: none; }
.guide-step-icon { font-size: 52px; line-height: 1; margin-bottom: 10px; }
.guide-step-title { font-size: 19px; font-weight: 800; margin: 0 0 8px; }
.guide-step-desc { font-size: 14px; color: #475569; line-height: 1.6; margin: 0 0 18px; }
.guide-step-go { display: inline-block; }
.guide-dots { display: flex; justify-content: center; gap: 8px; margin: 16px 0 12px; }
.guide-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; transition: background .15s, width .15s; }
.guide-dot.active { background: #6366f1; width: 18px; border-radius: 999px; }
.guide-foot { display: flex; gap: 10px; }
.guide-foot .btn { flex: 1; justify-content: center; }

/* 暗色：新手引导弹窗原本写死 #fff，暗色下成突兀白框（走查发现） */
html[data-theme="dark"] .guide-card { background: #1e293b; }
html[data-theme="dark"] .guide-close { background: #334155; color: #cbd5e1; }
html[data-theme="dark"] .guide-close:hover { background: #475569; }
html[data-theme="dark"] .guide-step-desc { color: #94a3b8; }
html[data-theme="dark"] .guide-step-title { color: var(--text); }
html[data-theme="dark"] .guide-dot { background: #475569; }

@media (max-width: 640px) {
  .task-summary { grid-template-columns: repeat(2, 1fr); }
  .task-grid { grid-template-columns: 1fr; }
}

/* v2.0 充值卡核销页 */
.gc-form { max-width: 460px; }
.gc-input { max-width: 100%; letter-spacing: 1px; }
.gc-submit { min-width: 140px; }
@media (max-width: 640px) {
  .gc-form { max-width: 100%; }
  .gc-submit { width: 100%; }
}

/* ==========================================================================
   v2.0 用户中心 UI/UX 美化增强层（追加，不改写历史规则）
   --------------------------------------------------------------------------
   目标：让「登录后页面」与前台观感对齐 ——
   · 统计数字大号、等宽数字，扫读更快；
   · 卡片柔和阴影 + hover 上浮；
   · 表单 focus 高亮、表格斑马纹（基础规则在 style.css 增强层已给，
     这里补用户中心特有控件的收口）。
   ========================================================================== */

/* 账户余额 / 数据统计数字：大号加粗 + 等宽数字，避免「1,234.00」跳动 */
.balance-card-amount {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
/* 用户中心概览统计小卡（任务中心 / 积分页等通用 .task-summary / .benefit-item） */
.task-summary, .task-grid, .member-benefits {
  /* 阴影收口：与前台卡片同款柔和投影 */
}
.task-summary .task-card,
.task-grid .task-card {
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
  transition: transform .2s ease, box-shadow .2s ease;
}
.task-summary .task-card:hover,
.task-grid .task-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,.1));
}

/* 表单标题与内容间距收口，避免大块表单「贴顶」 */
.form-title {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
}

/* 标签徽章（.tag.ok/.warn/.danger）统一胶囊圆角 */
.tag {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 999px; font-size: 12px;
}

/* 用户中心侧栏：菜单 hover 轻微右移，active 态阴影（左侧色条在 style.css 层） */
.user-menu a { position: relative; }
.user-menu a:not(.active):hover { transform: translateX(2px); }

/* 暗色模式：用户中心卡片/渐变在深色下压暗，避免过亮 */
html[data-theme="dark"] .task-summary .task-card,
html[data-theme="dark"] .task-grid .task-card {
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* ==========================================================================
   v3.0.1 认证页（登录/注册）独立布局
   --------------------------------------------------------------------------
   WHY：登录/注册此前直接套用申请页的 .apply-page/.apply-cols 两列网格，
   手机端退化为单列后表单左右拉满无留白；右侧说明卡用内联浅色渐变
   (#eff6ff→#dbeafe / #fef3c7→#fde68a)，暗色下变成突兀白框、文字对比失败。
   这里用独立作用域 .auth-page 重做，不动全局 .apply-*（提交网址页仍用旧布局）。
   结构：顶部大 logo(.auth-brand) → 居中窄卡(.auth-card, max 460) + 桌面侧栏。
   ========================================================================== */
.auth-page { padding: 6px 0 28px; }

/* 顶部 logo（v3.0.2 改横版）：图标 + 站名横向排列，后台可上传替换 */
.auth-brand {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 14px; margin: 4px 0 24px;
}
.auth-brand-img {
  width: 56px; height: 56px; object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--theme) 16%, transparent);
}
.auth-brand-name { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: 1px; }

/* 桌面：窄卡 460 + 侧栏 300 居中成组；手机：单列窄卡、侧栏隐藏（避免长营销列表+渐变白框） */
/* WHY：移动端网格列必须 minmax(0,1fr) 而非 auto —— auto 会按卡片 max-content 把轨道撑到
   max-width(460px)，在 390px 视口下溢出约 100px（实测右侧被切、hero 文字不换行）。 */
.auth-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .auth-layout {
    grid-template-columns: minmax(0, 460px) 300px;
    justify-content: center;
    align-items: start;
  }
}
.auth-main { display: flex; justify-content: center; min-width: 0; }
.auth-card { width: 100%; max-width: 460px; margin: 0 auto; min-width: 0; }
.auth-aside { display: none; }
@media (min-width: 900px) {
  .auth-aside { display: block; position: sticky; top: 16px; }
  .auth-aside .panel { margin-bottom: 14px; }
}

.auth-hero { text-align: center; margin-bottom: 18px; }
.auth-hero h1 { font-size: 22px; font-weight: 800; color: var(--text); }
.auth-hero p { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.6; }

/* 记住我 / 协议行：输入框复用 .apply-form 样式，这里只补布局 */
.auth-remember { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.auth-remember input { width: auto; margin: 0; }
.auth-agree { font-size: 13px; color: var(--muted); line-height: 1.6; }
.auth-agree input { width: auto; margin: 0; }
.auth-agree-link { color: var(--theme); }
.auth-form .form-note a,
.auth-card .form-note a { color: var(--theme); font-weight: 600; }

/* 验证码行：输入框弹性占满 + 图片跟随卡片底色 */
.auth-captcha-row { display: flex; align-items: center; gap: 10px; }
.auth-captcha-row input { flex: 1 1 auto; min-width: 0; }
.auth-captcha-img {
  height: 44px; width: auto; flex: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--card);
}

/* 福利渐变说明卡：亮色浅渐变，暗色改低饱和 translucent（消除白框） */
.auth-bonus-blue { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.auth-bonus-amber { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.auth-bonus-link { color: var(--theme); font-weight: 700; }
html[data-theme="dark"] .auth-bonus-blue {
  background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(99,102,241,.10));
  border-color: rgba(96,165,250,.35);
}
html[data-theme="dark"] .auth-bonus-amber {
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(217,119,6,.10));
  border-color: rgba(251,191,36,.35);
}

/* 第三方登录分隔线：oauth.css 写死 #e2e8f0，暗色下压到边框色避免发亮 */
html[data-theme="dark"] .auth-page .oauth-buttons-divider::before,
html[data-theme="dark"] .auth-page .oauth-buttons-divider::after { background: var(--border); }

/* 手机：品牌 logo 略收，避免占过高首屏 */
@media (max-width: 480px) {
  .auth-brand-img { width: 64px; height: 64px; border-radius: 15px; }
  .auth-brand { margin-bottom: 16px; }
}