/* =====================================================================
 * mail-theme.css —— 视觉升级层（叠加在 mail-chrome.css 之上，不改动原规则）
 * 统一配色 / 圆角 / 阴影 / 间距 / 动效；作用于首页、价格页、API 文档页。
 * 仅做加强（additive），不覆盖业务布局；尊重 prefers-reduced-motion。
 * ===================================================================== */
:root{
  --grad: linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
  --grad-soft: linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
  --brand-2:#7c3aed;
  --radius:16px;
  --radius-lg:22px;
  --shadow-card: 0 18px 40px -24px rgba(37,99,235,.35);
  --shadow-pop: 0 30px 64px -30px rgba(15,23,42,.45);
  --ease: cubic-bezier(.4,0,.2,1);
  --t: .25s var(--ease);
}

/* 顶栏：玻璃质感 + 常驻轻阴影，增强层级 */
.topbar{
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 6px 24px -18px rgba(15,23,42,.4);
}
.topbar .logo .dot{ background: var(--grad); box-shadow: 0 8px 18px -8px rgba(124,58,237,.6); }

/* 区块标题：居中渐变下划线 */
.section h2{ letter-spacing:-.3px; position:relative; }
.section h2::after{
  content:""; display:block; width:46px; height:4px; border-radius:999px;
  background: var(--grad); margin:14px auto 0;
}
.section{ padding:56px 18px; }
.section h2 + .lead{ margin-top:10px; }

/* Hero：动态网格光晕 + 渐变标题 */
.hero{ position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; left:-10%; right:-10%; top:-220px; height:540px; z-index:-1;
  background:
    radial-gradient(620px 260px at 18% 0%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(640px 280px at 82% 8%, rgba(37,99,235,.20), transparent 60%);
  filter: blur(6px);
  animation: heroFloat 16s var(--ease) infinite alternate;
}
@keyframes heroFloat{
  from{ transform: translate3d(-2%,0,0) scale(1); }
  to  { transform: translate3d(2%,2%,0) scale(1.06); }
}
.hero h1 .hl{ background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero h1{ animation: fadeUp .7s var(--ease) both; }
.hero p.sub{ animation: fadeUp .7s var(--ease) .08s both; }

/* 入场动画（逐级上浮） */
.feature,.step,.plan,.ep,.friend-card{
  animation: fadeUp .6s var(--ease) both;
}
.feature:nth-child(2),.step:nth-child(2){ animation-delay:.06s; }
.feature:nth-child(3),.step:nth-child(3){ animation-delay:.12s; }
.feature:nth-child(4){ animation-delay:.18s; }
.plan:nth-child(2){ animation-delay:.06s; }
.plan:nth-child(3){ animation-delay:.12s; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }

/* 卡片悬停微交互 */
.feature,.step,.plan,.ep{
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.feature:hover,.step:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); border-color:#dbeafe; }
.feature .ico{ transition: transform var(--t); }
.feature:hover .ico{ transform: scale(1.08) rotate(-4deg); }
.step .num{ background: var(--grad); box-shadow: 0 10px 22px -10px rgba(124,58,237,.6); }

/* 价格卡升级 */
.plan.hot{ box-shadow: 0 24px 52px -26px rgba(37,99,235,.5); }
.plan .tag{ background: var(--grad); box-shadow: 0 10px 22px -8px rgba(124,58,237,.6); }
.plan .price .num{
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.plan .buy, .btn-primary{
  background: var(--grad); border:none; color:#fff;
  box-shadow: 0 12px 26px -12px rgba(124,58,237,.6);
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.plan .buy:hover, .btn-primary:hover{
  transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: 0 18px 34px -12px rgba(124,58,237,.7);
}

/* 通用主按钮（tabler .btn-primary 改写） */
.btn-primary{ color:#fff !important; }
.btn-outline-primary{
  border-color: var(--brand); color: var(--brand);
  transition: transform var(--t), background var(--t), color var(--t);
}
.btn-outline-primary:hover{
  background: var(--brand-50);
  color: var(--brand); /* 覆盖 bootstrap hover 的白字：淡蓝底上白字会看不见（2026-10-15） */
  transform: translateY(-1px);
}
.btn-cur{ background:#e2e8f0; color:#475569; border:none; }
html[data-bs-theme="dark"] .btn-cur{ background:#1e293b; color:#94a3b8; }

/* 生成器卡片按钮渐变 */
.gen-card .rnd-btn{
  background: var(--grad); color:#fff; border:none;
  box-shadow: 0 10px 22px -12px rgba(124,58,237,.6);
  transition: transform var(--t), filter var(--t), box-shadow var(--t);
}
.gen-card .rnd-btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }

/* API 端点卡片 */
.ep{ transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.ep:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card); border-color:#dbeafe; }
.ep-method{ font-weight:800; }

/* 对比表 */
.cmp{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:14px;
  border:1px solid var(--line); background:#fff; }
.cmp th,.cmp td{ padding:12px 14px; text-align:center; border-bottom:1px solid var(--line); font-size:14px; }
.cmp thead th{ background: var(--brand-50); color: var(--ink); font-weight:700; }
.cmp thead th:first-child{ background:#fff; color: var(--muted); text-align:left; font-weight:600; }
.cmp tbody td:first-child{ text-align:left; color: var(--muted); }
.cmp tbody tr:last-child td{ border-bottom:none; }
.cmp td.yes{ color:#16a34a; font-weight:800; }
.cmp td.no{ color:#94a3b8; }
html[data-bs-theme="dark"] .cmp{ background:#111827; }
html[data-bs-theme="dark"] .cmp thead th{ background: rgba(37,99,235,.16); }
html[data-bs-theme="dark"] .cmp thead th:first-child{ background:#111827; }
html[data-bs-theme="dark"] .cmp tbody td:first-child{ color:#94a3b8; }

/* 弹层升级：渐变图标 + 缩放入场 + 圆角 */
.auth-dialog{ border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); animation: authPop .22s var(--ease) both; }
.auth-ico{ background: var(--grad); color:#fff; box-shadow: 0 12px 26px -12px rgba(124,58,237,.6); }
.pay-modal .dialog{ border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.pay-modal .methods label.sel{ border-color: var(--brand); background: var(--brand-50); }

/* 页脚渐变顶边 */
.site-foot{ position:relative; }
.site-foot::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; background: var(--grad); opacity:.9;
}

/* 全局细节 */
::selection{ background: rgba(124,58,237,.18); }
body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a{ transition: color .15s; }

/* 暗色模式令牌增强 */
html[data-bs-theme="dark"]{
  --brand-50: rgba(37,99,235,.16);
}
html[data-bs-theme="dark"] .hero::before{ opacity:.7; }
html[data-bs-theme="dark"] .feature:hover,
html[data-bs-theme="dark"] .step:hover{ box-shadow: 0 22px 44px -26px rgba(0,0,0,.85); }
html[data-bs-theme="dark"] .plan.hot{ box-shadow: 0 26px 56px -28px rgba(0,0,0,.8); }
html[data-bs-theme="dark"] .btn-cur{ filter:none; }

/* 尊重「减少动效」偏好：只关装饰性动效（漂浮 / 入场 / 呼吸）。
   收件状态反馈类动画（等待波形 wave、rx-state spinner、
   live-dot / hero-badge 的 livePulse、新邮件 msgIn / unreadBlink / cardFlash）
   必须保留——它们是「正在收取 / 有新邮件」的状态提示，
   一刀切会让系统开启「减少动效」的用户完全看不到收件反馈。 */
@media (prefers-reduced-motion: reduce){
  .hero, .hero-badge, .hero h1, .hero p.sub,
  .feature, .step, .plan, .empty{ animation:none !important; }
}

/* =====================================================================
 * 2026-10 第二轮视觉打磨（additive，作用于首页 / 价格页 / API 页）
 * ===================================================================== */

/* ---- Hero 顶部徽章胶囊 ---- */
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:999px;
  background:var(--brand-50);border:1px solid #dbeafe;
  color:var(--brand);font-size:13px;font-weight:600;
  margin-bottom:18px;
  animation: fadeUp .7s var(--ease) both;
}
.hero-badge .dot{
  width:7px;height:7px;border-radius:50%;background:#16a34a;flex:none;
  box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:livePulse 1.8s infinite;
}
html[data-bs-theme="dark"] .hero-badge{
  background:rgba(37,99,235,.14);border-color:#1e3a8a;color:#93c5fd;
}

/* ---- 生成器卡片：更大圆角 + 悬停微光 + 控件统一高度 ---- */
.gen-card{
  border-radius:var(--radius-lg);
  border-color:#e4edff;
  transition: box-shadow var(--t), transform var(--t);
}
.gen-card:hover{ box-shadow: 0 22px 48px -22px rgba(37,99,235,.45); }
.gen-card .addr,
.gen-card select{ height:44px; border-radius:10px; font-size:15px; }
.gen-card .rnd-btn{ height:44px; border-radius:10px; padding:0 18px; }
.save-row .btn{ height:40px; border-radius:10px; }

/* ---- 收件箱卡片 ---- */
.inbox-card{ border-radius:var(--radius-lg); }
.inbox-card .head strong{ font-size:17px; letter-spacing:-.2px; }
.inbox-card .btn-sm{ border-radius:8px; }

/* ---- 邮件列表项：悬停轻移 ---- */
.msg{ transition: transform .18s var(--ease), background .15s, border-color .15s; }
.msg:hover{ transform: translateX(2px); }
html[dir="rtl"] .msg:hover{ transform: translateX(-2px); }

/* ---- FAQ：展开态强调 ---- */
.faq details{ transition: border-color var(--t), box-shadow var(--t); }
.faq details[open]{
  border-color:#bfd7fe;
  box-shadow: 0 14px 32px -26px rgba(37,99,235,.55);
}
.faq details[open] summary{ color: var(--brand); }
html[data-bs-theme="dark"] .faq details[open]{
  border-color:#1e3a8a;
  box-shadow: 0 14px 32px -26px rgba(0,0,0,.8);
}

/* ---- 全屏地址条圆角统一 ---- */
.full-addr{ border-radius:14px; }

/* ---- 焦点可视性（键盘可达性） ---- */
:focus-visible{
  outline:2px solid rgba(37,99,235,.55);
  outline-offset:2px;
  border-radius:6px;
}

/* ---- 细滚动条（暗色适配） ---- */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:#cbd5e1; border-radius:999px;
  border:2px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:#94a3b8; background-clip:content-box; }
html[data-bs-theme="dark"] *::-webkit-scrollbar-thumb{
  background:#334155; background-clip:content-box;
}
html[data-bs-theme="dark"] *::-webkit-scrollbar-thumb:hover{
  background:#475569; background-clip:content-box;
}

/* ---- 平滑滚动（尊重减少动效偏好） ---- */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}