/* ==========================================================================
 * auth-theme.css — skiapi.dev 登录/注册/找回密码页配色覆盖
 *
 * 用途：把 sub2api（上游开源镜像，Wei-Shaw/sub2api）自带的浅色 + teal 主题
 * 改成 dwgx/skiapi-frontend 的深色 + violet 设计语言，并加上运营方要求的
 * 毛玻璃质感。**只改样式，不动 DOM、不注入 JS**，登录流程（邮箱验证码、
 * TOTP、找回密码、captcha、登录协议弹窗）完全走上游原逻辑。
 *
 * 注入方式：Caddy 的 replace-response 在 </head> 前插一个 <link>。
 * 不能用内联 <style>：应用的 CSP 是 style-src 'self' 'unsafe-inline'，
 * 内联其实可以过，但外链文件能独立改、能走 ETag，且不必每次动 Caddyfile。
 *
 * ── 作用域（关键） ───────────────────────────────────────────────────────
 * SPA 所有路由共用同一份 index.html，所以**作用域必须由 CSS 自己保证**，
 * 不能靠「只在 /login 注入」——用户登录后前端路由跳到 /dashboard 时页面
 * 不会重新加载，这份 CSS 仍在。
 *
 * 因此每一条规则都挂在 .card-glass 的祖先容器下：
 *
 *   [class*="min-h-screen"]:has(> div > [class*="card-glass"])
 *
 * 依据（2026-08-06 对 v0.1.170 的 bundle 逐块实测）：
 *   - card-glass / shadow-glass 只出现在 AuthLayout-*.js 一个 chunk 里，
 *     126 个 chunk 中其余 125 个都没有；
 *   - AuthLayout 被 10 个 view 引用，全是认证类：Login / Register /
 *     ForgotPassword / ResetPassword / EmailVerify + 5 个 OAuth 回调；
 *   - 实测登录后的 11 条面板路由（/dashboard /keys /profile /admin/*
 *     /home /redeem /monitor /admin/settings …）该选择器命中数均为 0。
 *
 * 反过来，input / btn / btn-primary / input-label 这些类**面板里到处都有**
 * （单是 /admin/settings 就有 94 个 input.input、16 个 .btn-primary），
 * 所以它们绝不能裸写，必须带上面的前缀。
 *
 * ── 升级脆弱性 ───────────────────────────────────────────────────────────
 * 镜像用 latest 标签，每次升级 bundle 的 hash 类名都会变。这里刻意只用
 * 两类锚点，都不含 hash：
 *   1. 作者自己写的 Tailwind 组件类（card-glass / input / btn / input-label）
 *      —— 写在上游源码里，不参与 hash；
 *   2. Tailwind 原子类（min-h-screen / space-y-5 …）—— 语义固定。
 * 没有用 data-v-86388737 那类 scoped id：它每次构建都变。
 * 若上游哪天重命名 card-glass，本文件会整体失效（退回上游原样式，不会
 * 出现半深半浅的坏样子——所有规则都在同一个前缀下，共存亡）。
 *
 * ── 字体 ─────────────────────────────────────────────────────────────────
 * 参考设计用 Geist。这里刻意退回系统字体栈：CSP 的 font-src 虽然放行
 * fonts.gstatic.com，但登录页不该为了字形多打一个第三方请求（既是隐私面
 * 也是可用性面），站点其余部分同样用系统栈。
 *
 * 2026-08-06
 * ========================================================================== */

/* 设计 token —— 取自 dwgx/skiapi-frontend src/theme/index.js 的 TOKENS_DARK。
   只定义在作用域容器上，不落到 :root，避免泄漏到面板。 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) {
	--ski-canvas: #0F0F0F;
	--ski-surface: #1A1A1A;
	--ski-surface-raised: #242424;
	--ski-border: #2E2E2E;
	--ski-border-strong: #3D3D3D;
	--ski-text: #E3E3E3;
	--ski-muted: #A0A0A0;
	--ski-subtle: #6E6E6E;
	--ski-accent: #A78BFA;
	--ski-accent-dim: #7C3AED;
	--ski-accent-ink: #FFFFFF;
	--ski-accent-surface: #1E1533;
	--ski-success: #34D399;
	--ski-warn: #FBBF24;
	--ski-error: #F87171;
	--ski-info: #60A5FA;

	--ski-radius: 12px;
	--ski-radius-card: 16px;
	--ski-ease: cubic-bezier(0.2, 0, 0, 1);
	--ski-dur-micro: 100ms;
	--ski-dur-short: 200ms;
	--ski-dur-medium: 300ms;

	/* 玻璃层：半透明 surface + 1px 半透明描边 + 分层柔和阴影 */
	--ski-glass-bg: rgba(24, 24, 28, 0.55);
	--ski-glass-border: rgba(255, 255, 255, 0.11);
	--ski-glass-shadow:
		0 1px 1px rgba(0, 0, 0, 0.3),
		0 10px 30px rgba(0, 0, 0, 0.42),
		0 28px 72px rgba(8, 4, 20, 0.34),
		inset 0 1px 0 rgba(255, 255, 255, 0.07);

	--ski-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
		"Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
		"Microsoft YaHei", sans-serif;

	background-color: var(--ski-canvas);
	color: var(--ski-text);
	font-family: var(--ski-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── 环境背景 ────────────────────────────────────────────────────────────
 * 上游铺了 5 层装饰 div：一层浅灰渐变 + 三个 teal 光斑 + 一张 teal 网格。
 * 全部按位置接管，换成近黑底 + 两团很淡的紫色环境光。
 * 用 :nth-child 定位而不是那些带 `/` `[` 的 Tailwind 任意值类名——
 * 后者在选择器里要转义，容易写错且同样会随上游改动失效。
 * ---------------------------------------------------------------------- */

/* 第 1 层：整块渐变底。
   基色刻意偏冷（#101014 而不是暖调的 #121013）——暖底叠紫光会发褐。 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) > div:nth-child(1) {
	background-image:
		radial-gradient(ellipse 90% 55% at 50% -8%, rgba(124, 58, 237, 0.26), transparent 72%),
		radial-gradient(ellipse 60% 45% at 12% 8%, rgba(99, 102, 241, 0.14), transparent 70%),
		radial-gradient(ellipse 55% 45% at 88% 92%, rgba(167, 139, 250, 0.12), transparent 70%),
		linear-gradient(180deg, #131018 0%, #0F0F13 42%, #0B0B0D 100%);
}

/* 第 2 层：三个光斑 + 网格，容器本身 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) > div:nth-child(2) {
	opacity: 1;
}

/* 三个光斑换成紫色。
   刻意调亮而不是调淡：毛玻璃要「有东西可糊」才看得出是玻璃——
   背景若是一片均匀的近黑，blur() 在视觉上等于没生效。
   第 3 个光斑正好在卡片正后方（居中 h-96 w-96），给得最足。 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) > div:nth-child(2) > div:nth-child(1) {
	background-color: rgba(167, 139, 250, 0.20);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) > div:nth-child(2) > div:nth-child(2) {
	background-color: rgba(124, 58, 237, 0.20);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) > div:nth-child(2) > div:nth-child(3) {
	background-color: rgba(139, 122, 232, 0.17);
}

/* 第 4 个子元素是 teal 网格；换成极淡的中性网格 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) > div:nth-child(2) > div:nth-child(4) {
	background-image:
		linear-gradient(rgba(227, 227, 227, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(227, 227, 227, 0.022) 1px, transparent 1px);
}

/* ── 品牌区 ──────────────────────────────────────────────────────────── */

/* logo 方块：teal 光晕 → 紫色，并加玻璃描边 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="rounded-2xl"][class*="h-16"] {
	border: 1px solid var(--ski-glass-border);
	background-color: rgba(36, 36, 36, 0.55);
	box-shadow:
		0 2px 10px rgba(0, 0, 0, 0.35),
		0 0 28px rgba(124, 58, 237, 0.22);
}

/* 站点名：teal→slate 渐变字 换成 紫→浅紫 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) h1[class*="text-gradient"] {
	background-image: linear-gradient(100deg, #C4B5FD 0%, var(--ski-accent) 45%, #8B7BE8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: -0.02em;
	font-weight: 600;
}

/* ── 卡片本体：毛玻璃 ─────────────────────────────────────────────────── */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="card-glass"] {
	background-color: var(--ski-glass-bg);
	border: 1px solid var(--ski-glass-border);
	border-radius: var(--ski-radius-card);
	box-shadow: var(--ski-glass-shadow);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
}

/* 不支持 backdrop-filter 时退回不透明面板，避免文字压在背景光斑上不可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="card-glass"] {
		background-color: #1C1C1F;
	}
}

/* ── 文字 ────────────────────────────────────────────────────────────── */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) h2 {
	color: var(--ski-text);
	font-weight: 600;
	letter-spacing: -0.01em;
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) p,
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) span {
	color: var(--ski-muted);
}

/* 页脚版权 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) > div > div[class*="text-xs"]:last-child {
	color: var(--ski-subtle);
}

/* ── 表单 ────────────────────────────────────────────────────────────── */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) label[class*="input-label"] {
	color: var(--ski-muted);
	font-weight: 500;
	letter-spacing: 0.01em;
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="input-hint"] {
	color: var(--ski-subtle);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) input {
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--ski-border);
	border-radius: var(--ski-radius);
	color: var(--ski-text);
	transition:
		border-color var(--ski-dur-short) var(--ski-ease),
		box-shadow var(--ski-dur-short) var(--ski-ease),
		background-color var(--ski-dur-short) var(--ski-ease);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) input::placeholder {
	color: var(--ski-subtle);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) input:hover {
	border-color: var(--ski-border-strong);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) input:focus,
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) input:focus-visible {
	outline: none;
	border-color: var(--ski-accent);
	background-color: rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16);
}

/* Chrome 自动填充会强行套浅色底，用巨大的 inset shadow 盖掉 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) input:-webkit-autofill,
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) input:-webkit-autofill:hover,
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ski-text);
	-webkit-box-shadow: 0 0 0 1000px #1F1F22 inset;
	caret-color: var(--ski-text);
}

/* 输入框左右的图标（放大镜/眼睛等） */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="pointer-events-none"][class*="absolute"] svg {
	color: var(--ski-subtle);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) button[class*="absolute"] {
	color: var(--ski-subtle);
	transition: color var(--ski-dur-micro) var(--ski-ease);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) button[class*="absolute"]:hover {
	color: var(--ski-text);
}

/* 两步验证的单字符输入格 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) input[class*="h-12"][class*="w-10"] {
	background-color: rgba(255, 255, 255, 0.05);
	border-color: var(--ski-border-strong);
	color: var(--ski-text);
	font-variant-numeric: tabular-nums;
}

/* ── 按钮 ────────────────────────────────────────────────────────────── */
/* 主按钮：参考设计 dark 模式下 containedPrimary 是「磨砂玻璃面板」而不是
   实心填充，这里沿用，但加一层紫色底调让它仍然是页面的主行动点。 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="btn-primary"] {
	background-image: none;
	background-color: rgba(124, 58, 237, 0.30);
	color: #F2EEFF;
	border: 1px solid rgba(167, 139, 250, 0.34);
	border-radius: var(--ski-radius);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.07);
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: all var(--ski-dur-short) var(--ski-ease);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="btn-primary"]:hover {
	background-color: rgba(124, 58, 237, 0.44);
	border-color: rgba(167, 139, 250, 0.5);
	color: var(--ski-accent-ink);
	box-shadow:
		0 4px 14px rgba(124, 58, 237, 0.26),
		inset 0 1px 0 rgba(255, 255, 255, 0.09);
	transform: translateY(-0.5px);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="btn-primary"]:active {
	transform: scale(0.985);
	transition: transform 80ms ease;
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="btn-primary"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.28);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="btn-primary"]:disabled {
	opacity: 0.55;
	transform: none;
	box-shadow: none;
}

/* 次按钮 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="btn-secondary"] {
	background-color: rgba(255, 255, 255, 0.045);
	border: 1px solid var(--ski-border);
	border-radius: var(--ski-radius);
	color: var(--ski-text);
	transition: all var(--ski-dur-short) var(--ski-ease);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="btn-secondary"]:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: var(--ski-border-strong);
}

/* 按钮里的 spinner 描边色 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="animate-spin"] {
	border-bottom-color: var(--ski-accent);
	color: var(--ski-accent);
}

/* ── 链接 ────────────────────────────────────────────────────────────── */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) a {
	color: var(--ski-accent);
	transition: color var(--ski-dur-micro) var(--ski-ease);
	text-decoration: none;
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) a:hover {
	color: #C4B5FD;
}

/* 「忘记密码」这类小号功能按钮（是 button 不是 a） */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) button[class*="text-primary-600"],
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) button[class*="text-sm"][class*="text-primary"] {
	color: var(--ski-accent);
}

/* ── 分隔线 ──────────────────────────────────────────────────────────── */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="h-px"][class*="flex-1"] {
	background-color: var(--ski-border);
}

/* ── 提示框（成功/警告）：换成 token 的 tonal 配色 ─────────────────────── */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="border-green"] {
	background-color: rgba(52, 211, 153, 0.09);
	border-color: rgba(52, 211, 153, 0.28);
	border-radius: var(--ski-radius);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="border-amber"] {
	background-color: rgba(251, 191, 36, 0.09);
	border-color: rgba(251, 191, 36, 0.28);
	border-radius: var(--ski-radius);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="text-green-6"],
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="text-green-7"],
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="text-green-8"],
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="text-green-5"] {
	color: var(--ski-success);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="text-amber-5"],
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="text-amber-6"],
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="text-amber-7"],
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="text-amber-8"] {
	color: var(--ski-warn);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="text-red-5"] {
	color: var(--ski-error);
}

/* 成功态的圆形图标底 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="rounded-full"][class*="bg-green"] {
	background-color: rgba(52, 211, 153, 0.14);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="rounded-full"][class*="bg-amber"] {
	background-color: rgba(251, 191, 36, 0.14);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="rounded-full"][class*="bg-primary"] {
	background-color: var(--ski-accent-surface);
}

[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="rounded-full"][class*="bg-primary"] svg {
	color: var(--ski-accent);
}

/* 邮箱已发送那类浅绿条 */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="bg-green-50"] {
	background-color: rgba(52, 211, 153, 0.10);
}

/* ── 选中态 ──────────────────────────────────────────────────────────── */
[class*="min-h-screen"]:has(> div > [class*="card-glass"]) ::selection {
	background-color: rgba(167, 139, 250, 0.32);
	color: var(--ski-text);
}

/* ── 窄屏 ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="card-glass"] {
		border-radius: 14px;
		padding: 1.5rem;
	}
}

/* ── 降低动效偏好 ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	[class*="min-h-screen"]:has(> div > [class*="card-glass"]) * {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
	[class*="min-h-screen"]:has(> div > [class*="card-glass"]) [class*="btn-primary"]:hover {
		transform: none;
	}
}