/* ═══════════════════════════════════════════════════════════════
   天讯 API · 认证页视觉层 (tx-auth.css)
   目标：登录 / 注册 / 找回密码 页 —— 从"白底孤零零表单"改成
        与首页同血统的「渐变光斑背景 + 玻璃卡片」
   实现：只改视觉，不动表单结构与提交逻辑
        通过 body 上是否存在认证表单容器来自然生效（无需路由判断）
   2026-09-11 初版
   ═══════════════════════════════════════════════════════════════ */

/* ── 认证页专用背景光斑（固定定位，覆盖视口） ── */
.tx-auth-bg{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(1200px 720px at 8% -6%, #dbeafe 0%, rgba(219,234,254,0) 62%),
    radial-gradient(1000px 620px at 98% 4%, #cffafe 0%, rgba(207,250,254,0) 60%),
    radial-gradient(1100px 800px at 52% 52%, #e9e6ff 0%, rgba(233,230,255,0) 64%),
    radial-gradient(900px 700px at 4% 98%, #d1fae5 0%, rgba(209,250,229,0) 60%),
    linear-gradient(180deg,#f6f9ff 0%,#eef4fd 45%,#f5f8fd 100%);
}
.tx-auth-bg .tx-ab{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform,opacity}
.tx-auth-bg .tx-ab1{width:760px;height:760px;left:-190px;top:-220px;
  background:radial-gradient(circle at 34% 34%,#3b82f6,rgba(59,130,246,0) 68%);opacity:.40;
  animation:tx-ab-drift-a 30s ease-in-out infinite, tx-ab-breathe-a 17s ease-in-out infinite}
.tx-auth-bg .tx-ab2{width:680px;height:680px;right:-170px;top:-140px;
  background:radial-gradient(circle at 58% 42%,#22d3ee,rgba(34,211,238,0) 68%);opacity:.38;
  animation:tx-ab-drift-b 36s ease-in-out infinite, tx-ab-breathe-b 22s ease-in-out infinite}
.tx-auth-bg .tx-ab3{width:820px;height:820px;left:38%;top:220px;
  background:radial-gradient(circle at 50% 50%,#a78bfa,rgba(167,139,250,0) 68%);opacity:.30;
  animation:tx-ab-drift-c 42s ease-in-out infinite, tx-ab-breathe-a 26s ease-in-out infinite}
.tx-auth-bg .tx-ab4{width:640px;height:640px;left:-120px;bottom:-160px;
  background:radial-gradient(circle at 42% 58%,#34d399,rgba(52,211,153,0) 68%);opacity:.28;
  animation:tx-ab-drift-a 46s ease-in-out infinite reverse, tx-ab-breathe-c 20s ease-in-out infinite}

@keyframes tx-ab-drift-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(52px,34px,0) scale(1.07)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes tx-ab-drift-b{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-56px,28px,0) scale(1.05)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes tx-ab-drift-c{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(34px,-44px,0) scale(1.09)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes tx-ab-breathe-a{0%,100%{opacity:.28}50%{opacity:.50}}
@keyframes tx-ab-breathe-b{0%,100%{opacity:.44}50%{opacity:.22}}
@keyframes tx-ab-breathe-c{0%,100%{opacity:.20}50%{opacity:.38}}

/* ── 认证页主体：让内容上移一点、卡片化 ── */
body.tx-auth{ position:relative; }

/* 表单外层：玻璃卡片
   用 :has(input) 精准命中「含输入框的那个 form」，避免误伤嵌套容器 */
body.tx-auth form:has(input){
  position:relative;z-index:2;
  background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(255,255,255,.55)) !important;
  border:1px solid rgba(255,255,255,.9) !important;
  border-radius:22px !important;
  backdrop-filter:blur(26px) saturate(190%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(190%) !important;
  box-shadow:0 24px 64px rgba(23,37,84,.13), 0 4px 14px rgba(23,37,84,.06),
             inset 0 1px 0 rgba(255,255,255,.95) !important;
  padding:34px 32px 30px !important;
  max-width:460px !important;
  margin:0 auto !important;
}

/* 表单内标题 */
body.tx-auth h1, body.tx-auth h2{
  font-weight:780 !important; letter-spacing:-.02em !important;
  background:linear-gradient(120deg,#1d4ed8,#0891b2 55%,#7c3aed);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block;
}
body.tx-auth h1{ font-size:30px !important; }

/* 输入框：更明确的可交互感 */
body.tx-auth input:not([type="checkbox"]):not([type="radio"]){
  background:rgba(255,255,255,.85) !important;
  border:1px solid rgba(15,23,42,.12) !important;
  border-radius:12px !important;
  height:auto !important; padding:11px 14px !important;
  transition:border-color .18s, box-shadow .18s !important;
}
body.tx-auth input:focus{
  border-color:rgba(37,99,235,.55) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.13) !important;
  outline:none !important;
}

/* 主按钮：全宽渐变（与首页 CTA 一致）
   注意：只命中「提交按钮」——用 :not([type=button]) 排除密码显隐等图标按钮，
   否则图标按钮会被拉成全宽蓝条盖住表单（2026-09-11 踩坑）
   优先级说明：new-api 用 Tailwind 原子类，本文件加载早于运行时样式，
   故需要 background !important 同时压掉 background-image 与 background-color */
body.tx-auth button[type="submit"]{
  width:100% !important; height:44px !important;
  background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
  background-image:linear-gradient(135deg,#2563eb,#06b6d4) !important;
  background-color:#2563eb !important;
  color:#fff !important; font-weight:650 !important; font-size:15px !important;
  border:0 !important; border-radius:13px !important;
  box-shadow:0 10px 26px rgba(37,99,235,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s !important;
  cursor:pointer !important;
  opacity:1 !important;
}
body.tx-auth button[type="submit"] *{ color:#fff !important; fill:#fff !important; }
body.tx-auth button[type="submit"]:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 16px 34px rgba(37,99,235,.38) !important;
}
/* 图标类按钮（密码显隐等）：保持原样的透明小按钮，绝不动 */
body.tx-auth button[type="button"]{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  width:auto !important;
  padding:0 !important;
}

/* 二次链接（注册/忘记密码）：更清晰的品牌色 */
body.tx-auth a{ color:#1d4ed8 !important; text-decoration:none !important; font-weight:600 !important; }
body.tx-auth a:hover{ text-decoration:underline !important; color:#1e40af !important; }

/* ── 顶部品牌条：把孤零零的 logo 变成一条玻璃条 ── */
body.tx-auth header, body.tx-auth nav{
  background:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(190%) !important;
  border-bottom:1px solid rgba(255,255,255,.6) !important;
  position:relative; z-index:3;
}

/* ── 让内容区不再顶到最上（原页面中部留白过多是因为绝对居中+内容矮） ── */
body.tx-auth main, body.tx-auth #root > div{
  position:relative; z-index:2;
}

/* ── 暗色适配：不强行改底色，仅让玻璃在暗色下也成立 ── */
html.dark body.tx-auth form{
  background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.06)) !important;
  border-color:rgba(255,255,255,.16) !important;
}
html.dark body.tx-auth h1, html.dark body.tx-auth h2{ color:#e8eefc; -webkit-text-fill-color:#e8eefc; }
html.dark body.tx-auth .tx-auth-bg{ opacity:.35; }

@media (prefers-reduced-motion:reduce){
  .tx-auth-bg .tx-ab{animation:none !important}
}
@media (max-width:560px){
  body.tx-auth form{padding:26px 20px 22px !important; border-radius:18px !important;}
  body.tx-auth h1{font-size:25px !important}
}