/* ============================================================ FanCloud 登录 / 注册 卡片式布局（2026-11-04） ------------------------------------------------------------ new-api 原生把标题、表单、协议直接铺在背景上，元素之间没有容器， 视觉很散。这里给表单容器套一层玻璃卡片：渐变底 + 细边框 + 顶部青紫光线 + 对角 HUD 角标，贴合站点「古风 × 科技」主题。 作用范围限定在登录/注册页的根容器内，不影响其他页面。 ============================================================ */ /* ---------- 卡片本体 ---------- */ div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] { position: relative; padding: 36px 34px 30px !important; border-radius: 18px !important; border: 1px solid rgba(122, 190, 222, 0.18); background: linear-gradient(180deg, rgba(16, 27, 43, 0.86) 0%, rgba(8, 13, 22, 0.94) 100%); -webkit-backdrop-filter: blur(22px) saturate(130%); backdrop-filter: blur(22px) saturate(130%); box-shadow: 0 34px 80px -32px rgba(0, 0, 0, 0.9), 0 2px 10px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* 顶部一线青光，卡片的「点睛」 */ div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, rgba(34, 211, 238, 0) 0%, rgba(34, 211, 238, 0.70) 20%, rgba(167, 139, 250, 0.70) 80%, rgba(167, 139, 250, 0) 100%); pointer-events: none; } /* 左上 / 右下 HUD 角标 */ div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"]::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: linear-gradient(#22d3ee, #22d3ee) left top / 16px 1px no-repeat, linear-gradient(#22d3ee, #22d3ee) left top / 1px 16px no-repeat, linear-gradient(#a78bfa, #a78bfa) right bottom / 16px 1px no-repeat, linear-gradient(#a78bfa, #a78bfa) right bottom / 1px 16px no-repeat; opacity: 0.5; } /* ---------- 标题区 ---------- */ div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] > div > div:has(> h2) { padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] h2 { font-size: 1.55rem !important; letter-spacing: 0.05em; font-weight: 600; text-align: left; padding-left: 15px; background-image: linear-gradient(180deg, rgba(34, 211, 238, 0.95), rgba(167, 139, 250, 0.40)); background-size: 2px 1.18em; background-position: left center; background-repeat: no-repeat; } /* ---------- 输入框 ---------- */ div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] form input { height: 42px; border-radius: 10px !important; background-color: rgba(255, 255, 255, 0.035) !important; border-color: rgba(255, 255, 255, 0.09) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; } div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] form input:focus-visible { border-color: rgba(34, 211, 238, 0.55) !important; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12); outline: none; } /* ---------- 主按钮 ---------- */ div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] form button[type="submit"] { height: 44px; border-radius: 10px !important; letter-spacing: 0.08em; background-image: linear-gradient(180deg, #2f93f2 0%, #1b6fd8 100%) !important; box-shadow: 0 12px 26px -14px rgba(47, 147, 242, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: filter 0.2s ease, transform 0.2s ease; } div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] form button[type="submit"]:hover { filter: brightness(1.06); } div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] form button[type="submit"]:active { transform: translateY(1px); } /* ---------- 协议勾选行：做成卡片内的浅色条 ---------- 注意这行原生的类是 items-start（不是 items-center）， 所以只能用 :has(> [role="checkbox"]) 定位，曾在选择器上踩过坑。 */ div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] form div:has(> [role="checkbox"]) { justify-content: center; padding: 11px 12px; border-radius: 10px !important; background: rgba(255, 255, 255, 0.028) !important; border: 1px solid rgba(255, 255, 255, 0.055) !important; margin-top: 2px; } /* 隐藏卡片底部重复的英文协议句（中文勾选行已表达同一含义） */ div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] > div > p { display: none !important; } /* ---------- 浅色主题 ---------- */ html:not(.dark) div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] { border-color: rgba(150, 135, 110, 0.28); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 245, 236, 0.97) 100%); box-shadow: 0 30px 70px -34px rgba(80, 70, 50, 0.4), 0 2px 8px -4px rgba(80, 70, 50, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9); } html:not(.dark) div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] > div > div:has(> h2) { border-bottom-color: rgba(120, 105, 85, 0.20); } html:not(.dark) div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] form input { background-color: rgba(255, 255, 255, 0.85) !important; border-color: rgba(150, 135, 110, 0.28) !important; } html:not(.dark) div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] form div:has(> [role="checkbox"]) { background: rgba(120, 105, 85, 0.055) !important; border-color: rgba(120, 105, 85, 0.15) !important; } /* ---------- 窄屏 ---------- 原生在 <640px 时 w-full 受 grid 列宽影响，实测会缩到 298px（左右各留 46px）， 这里显式撑到视口减 24px，让卡片成为手机上真正的容器。 */ @media (max-width: 640px) { /* 原生 .container 在窄屏实测宽度 430px（视口 390px），会把整页撑出横向滚动条， 卡片右缘也被裁掉。这里把它收回视口宽度，只作用于登录/注册页根容器。 */ div.relative.grid.h-svh.max-w-none > .container { width: 100% !important; max-width: none !important; padding: 24px 12px 0 !important; } div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] { padding: 26px 20px !important; border-radius: 16px !important; width: 100% !important; max-width: 420px; margin-left: auto; margin-right: auto; } div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] h2 { font-size: 1.3rem !important; padding-left: 13px; } /* 协议行在窄屏压缩字号与内边距，避免「隐私政策」被折到第二行只剩两个字 */ div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] form div:has(> [role="checkbox"]) { padding: 10px 10px !important; gap: 8px !important; } div.relative.grid.h-svh.max-w-none div[class*="sm:w-[480px]"] form div:has(> [role="checkbox"]) label { font-size: 11.5px !important; line-height: 1.5; white-space: nowrap; } }