/* ============================================================
   小泽 AI中转站 — 登录 / 注册页 视觉增强（整页底图版）
   作用：底图铺满整页 + 深色遮罩 + 居中玻璃登录框（保证文字可读性）
   生效范围：仅使用 AuthLayout 的页面（/sign-in、/sign-up、/reset、/otp），
            后台控制台、工作台等其它页面不受影响
   引入方式：index.html 中 AUTH-THEME-START / AUTH-THEME-END 之间的 <link>
   回滚方式：删掉那段 <link> 即可立刻恢复原样（本文件留着不影响其它页面）
   创建：2026-10-03 / 更新：2026-10-03（撤掉左右分屏，改为整页底图）
   ============================================================ */

/* ---------- 1. 变量：改这里就能调整整体观感 ---------- */
.grid.h-svh.max-w-none {
  /* 遮罩强度：0 = 完全露出底图，1 = 全黑。
     调小 → 底图更清楚；调大 → 文字对比度更高（0.45 ~ 0.75 之间比较合适）。 */
  --auth-scrim: 0.55;
  /* 底图路径（想换图就替换站点根目录下的 auth-bg.jpg） */
  --auth-bg: url("/auth-bg.jpg?v=1");

  /* 深色主题变量：让登录框内的组件（bg-muted / text-muted-foreground / border 等）自动适配 */
  --background: #0d1322;
  --foreground: #eef2f9;
  --card: #0f1728;
  --card-foreground: #eef2f9;
  --popover: #0f1728;
  --popover-foreground: #eef2f9;
  --muted: rgba(255, 255, 255, 0.10);
  --muted-foreground: #cbd5e6;
  --secondary: rgba(255, 255, 255, 0.10);
  --secondary-foreground: #eef2f9;
  --accent: rgba(255, 255, 255, 0.14);
  --accent-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.18);
  --input: rgba(255, 255, 255, 0.22);
  --ring: rgba(147, 187, 255, 0.75);
  color: var(--foreground);
}

/* ---------- 2. 底图：铺满整页 ---------- */
.grid.h-svh.max-w-none::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #0b1220;
  background-image: var(--auth-bg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ---------- 3. 深色遮罩：压暗底图，保证前景文字可读 ---------- */
.grid.h-svh.max-w-none::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #070c18 0%, #060a14 55%, #03060e 100%);
  opacity: var(--auth-scrim, 0.55);
}

/* ---------- 4. 左上角品牌标识：浮在遮罩之上（窄屏 1rem，≥640px 2rem） ---------- */
.grid.h-svh.max-w-none > a {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
@media (min-width: 640px) {
  .grid.h-svh.max-w-none > a {
    top: 2rem;
    left: 2rem;
  }
}

/* ---------- 5. 表单容器：铺满整页并居中内容 ---------- */
.grid.h-svh.max-w-none > .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
}

/* ---------- 6. 登录框：深色玻璃卡片 ---------- */
.grid.h-svh.max-w-none > .container > div {
  background: rgba(13, 19, 33, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  margin-inline: auto;
}

/* 不支持毛玻璃的浏览器：退回更实的深色面板 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .grid.h-svh.max-w-none > .container > div {
    background: rgba(13, 19, 33, 0.94);
  }
}

/* ---------- 7. 卡片内元素微调 ---------- */
.grid.h-svh.max-w-none > .container h1,
.grid.h-svh.max-w-none > .container h2 {
  color: #ffffff;
}

/* 输入框（排除勾选框/单选框，避免破坏原生控件外观） */
.grid.h-svh.max-w-none > .container input:not([type="checkbox"]):not([type="radio"]) {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.20);
  color: #ffffff;
}
.grid.h-svh.max-w-none > .container input:not([type="checkbox"]):not([type="radio"])::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.grid.h-svh.max-w-none > .container input:not([type="checkbox"]):not([type="radio"]):focus-visible {
  border-color: rgba(147, 187, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(147, 187, 255, 0.16);
}
/* 自动填充时不要变成亮黄底 */
.grid.h-svh.max-w-none > .container input:-webkit-autofill {
  -webkit-text-fill-color: #ffffff;
  box-shadow: 0 0 0 1000px rgba(21, 29, 47, 0.95) inset;
  transition: background-color 9999s ease-out 0s;
}

/* 链接（注册 / 忘记密码 / 用户协议 / 隐私政策） */
.grid.h-svh.max-w-none > .container a {
  color: #9dc0ff;
}
.grid.h-svh.max-w-none > .container a:hover {
  color: #c3d8ff;
}

/* 底部提示文字（含 "By clicking sign in, you agree to …"，仅提亮不隐藏） */
.grid.h-svh.max-w-none > .container p.text-muted-foreground {
  color: rgba(238, 242, 249, 0.74);
}

/* 输入框右侧的显示/隐藏密码等图标按钮 */
.grid.h-svh.max-w-none > .container button[aria-label],
.grid.h-svh.max-w-none > .container button[data-variant="ghost"] {
  color: rgba(238, 242, 249, 0.78);
}