/* ========================================================================== 胖虎AI 8095 — 登录 / 注册 / 重置密码（独立样式表） -------------------------------------------------------------------------- 与首页同一套 Apple 风浅色毛玻璃语言。 这个文件是自包含的：登录页不再加载 tailwind CDN，也不加载 253KB 的 styles.css —— 表单、标签页、弹窗等组件在这里按玻璃风格重新实现。 注意：本页仍由 app.js 驱动（登录/注册/重置/卡密/找回密码的全部逻辑）， 所以下面的 class 名、状态类（.is-active）、id 必须与 app.js 里的选择器 保持一致，改名前先 grep app.js。 ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { --bg: #f7f8fb; --bg-deep: #f1f3f8; --glass-fill: rgba(255, 255, 255, 0.62); --glass-fill-strong: rgba(255, 255, 255, 0.78); --glass-edge: rgba(255, 255, 255, 0.72); --glass-hairline: rgba(15, 23, 42, 0.08); --glass-blur: 28px; --glass-saturate: 180%; --ink: #14161c; --ink-2: #4a5060; --ink-3: #5f6675; --ink-on-dark: #ffffff; --brand: #1b2433; --brand-soft: rgba(27, 36, 51, 0.06); --accent-a: #6f8cff; --accent-b: #b58cff; --accent-c: #64d2c4; /* 主按钮：与首页同一套深海蓝渐变，白字 5.2:1 达 AA */ --blue: #2563eb; --blue-deep: #1d4ed8; --blue-darker: #1e40af; --blue-soft: rgba(37, 99, 235, 0.08); --blue-glow: rgba(37, 99, 235, 0.42); /* 拟态：一亮一暗两道方向相反的阴影 */ --neu-light: rgba(255, 255, 255, 0.9); --neu-dark: rgba(15, 23, 42, 0.1); --field-bg: rgba(255, 255, 255, 0.72); --field-border: #c9ced6; /* 3.1:1 于白底，达到 UI 组件 AA */ --field-border-focus: #2563eb; --ok: #15803d; --ok-soft: #e9f6ee; --danger: #b91c1c; --danger-soft: #fdeceb; --radius-sm: 12px; --radius: 18px; --radius-lg: 28px; --radius-pill: 999px; --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05); --shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.22), 0 2px 8px rgba(15, 23, 42, 0.04); --shadow-lg: 0 40px 90px -30px rgba(15, 23, 42, 0.3), 0 4px 14px rgba(15, 23, 42, 0.05); --ease: cubic-bezier(0.22, 1, 0.36, 1); --header-h: 68px; } /* 深色：只有用户在后台显式选过深色时才会命中（）。 页面默认基调仍是浅色玻璃。 */ html.portal-theme-dark { --bg: #0f1218; --bg-deep: #090b10; --glass-fill: rgba(30, 35, 46, 0.62); --glass-fill-strong: rgba(32, 38, 50, 0.82); --glass-edge: rgba(255, 255, 255, 0.1); --glass-hairline: rgba(255, 255, 255, 0.09); --ink: #f2f4f8; --ink-2: #b6bdcb; --ink-3: #98a1b2; --brand: #e8ecf5; --brand-soft: rgba(255, 255, 255, 0.07); --blue: #3b82f6; --blue-deep: #2563eb; --blue-darker: #1d4ed8; --blue-soft: rgba(59, 130, 246, 0.16); --blue-glow: rgba(59, 130, 246, 0.45); --neu-light: rgba(255, 255, 255, 0.05); --neu-dark: rgba(0, 0, 0, 0.5); --field-bg: rgba(255, 255, 255, 0.05); --field-border: #4c5563; --field-border-focus: #8ea6e8; --ok: #4ade80; --ok-soft: rgba(74, 222, 128, 0.12); --danger: #fca5a5; --danger-soft: rgba(252, 165, 165, 0.12); --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 4px 14px rgba(0, 0, 0, 0.4); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, p { margin: 0; } a { color: inherit; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; } :focus-visible { outline: 2px solid var(--field-border-focus); outline-offset: 3px; border-radius: 6px; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 12px; left: 12px; z-index: 200; padding: 12px 20px; border-radius: var(--radius-pill); background: var(--glass-fill-strong); color: var(--ink); box-shadow: var(--shadow); font-weight: 600; text-decoration: none; transform: translateY(-180%); transition: transform 0.24s var(--ease); } .skip-link:focus-visible { transform: translateY(0); } /* -------------------------------------------------------------------------- 3. 背景光晕 -------------------------------------------------------------------------- */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, #fafbfd 0%, var(--bg) 48%, var(--bg-deep) 100%); } html.portal-theme-dark .aurora { background: radial-gradient(120% 90% at 50% -10%, rgba(60, 72, 96, 0.5) 0%, rgba(0, 0, 0, 0) 55%), linear-gradient(180deg, #141822 0%, var(--bg) 45%, var(--bg-deep) 100%); } .aurora span { position: absolute; display: block; border-radius: 50%; /* 和首页同一套：光晕压到「若隐若现」，只留一点色温，不再把整页染紫。 */ filter: blur(132px); opacity: 0.16; will-change: transform; } html.portal-theme-dark .aurora span { opacity: 0.22; } .aurora .orb-a { top: -18vh; left: -8vw; width: 48vw; height: 48vw; min-width: 400px; min-height: 400px; background: radial-gradient(circle, var(--accent-a) 0%, rgba(111, 140, 255, 0) 70%); animation: drift-a 28s var(--ease) infinite alternate; } .aurora .orb-b { right: -14vw; bottom: -16vh; width: 46vw; height: 46vw; min-width: 360px; min-height: 360px; background: radial-gradient(circle, var(--accent-b) 0%, rgba(181, 140, 255, 0) 70%); opacity: 0.12; animation: drift-b 34s var(--ease) infinite alternate; } @keyframes drift-a { to { transform: translate3d(7vw, 6vh, 0) scale(1.12); } } @keyframes drift-b { to { transform: translate3d(-6vw, -8vh, 0) scale(1.16); } } /* -------------------------------------------------------------------------- 4. 玻璃基元 -------------------------------------------------------------------------- */ .glass { position: relative; background: var(--glass-fill); border: 1px solid var(--glass-hairline); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-edge); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(255, 255, 255, 0.94); } html.portal-theme-dark .glass { background: #1b2029; } } /* -------------------------------------------------------------------------- 5. 顶栏 -------------------------------------------------------------------------- */ .auth-header { position: fixed; top: 0; left: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: var(--header-h); padding: 10px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left)); padding-top: calc(10px + env(safe-area-inset-top)); background: var(--glass-fill-strong); border-bottom: 1px solid var(--glass-hairline); -webkit-backdrop-filter: blur(22px) saturate(var(--glass-saturate)); backdrop-filter: blur(22px) saturate(var(--glass-saturate)); } .auth-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 4px; border-radius: var(--radius-pill); color: inherit; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; transition: background-color 0.22s var(--ease); } .auth-brand:hover { background: var(--brand-soft); } .auth-brand span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .auth-brand img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--glass-hairline); } .auth-header nav { display: flex; align-items: center; gap: 4px; } .nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-2); text-decoration: none; transition: color 0.22s var(--ease), background-color 0.22s var(--ease); } .nav-icon:hover { color: var(--blue-deep); background: var(--blue-soft); } /* ---------- 图标 ---------- 登录页不用图标字体：Material Symbols 走 Google Fonts CDN， 在部分网络下拿不到，按钮里会露出 "arrow_forward" 这种连字英文。 这里全部改成内联 SVG，零网络依赖、零 FOUT。 */ .icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; } .icon svg { width: 100%; height: 100%; } .icon-sm { width: 17px; height: 17px; } /* 双态图标（主题 明/暗、密码 显示/隐藏）：由 data-state 决定显示哪个 */ .icon-swap .icon-a, .icon-swap .icon-b { display: none; width: 100%; height: 100%; } .icon-swap[data-state="light"] .icon-a, .icon-swap[data-state="hidden"] .icon-a, .icon-swap[data-state="dark"] .icon-b, .icon-swap[data-state="shown"] .icon-b { display: block; } .nav-icon .icon { width: 21px; height: 21px; } /* 语言 / 主题下拉（内容由 app.js 渲染） */ .toolbar-item { position: relative; } .toolbar-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10; display: flex; flex-direction: column; gap: 2px; min-width: 172px; padding: 6px; border-radius: 16px; background: var(--glass-fill-strong); border: 1px solid var(--glass-hairline); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); animation: pop-in 0.2s var(--ease); } @keyframes pop-in { from { opacity: 0; transform: scale(0.94) translateY(-6px); } } .toolbar-menu-button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 11px; color: var(--ink-2); font-size: 15px; text-align: left; transition: background-color 0.18s var(--ease), color 0.18s var(--ease); } .toolbar-menu-button:hover { color: var(--ink); background: var(--brand-soft); } .toolbar-menu-button.is-active { color: var(--ink); font-weight: 600; background: var(--brand-soft); } .language-flag { width: 22px; text-align: center; } .language-flag-text { font-size: 13px; font-weight: 700; } /* -------------------------------------------------------------------------- 6. 页面骨架：左宣传 + 右表单 -------------------------------------------------------------------------- */ .auth-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: 100vh; min-height: 100dvh; padding-top: var(--header-h); } /* 左侧介绍区：纵向本来就居中，这里再把整块横向居中。 右边的表单卡是在自己那半边居中的，左边贴着边就显得两半不对称。 注意只居中「块」，卡片里的文字仍然左对齐 —— 多行说明文字居中很难读。 */ .auth-promo { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; padding: clamp(48px, 6vw, 88px) clamp(32px, 5vw, 76px); text-align: center; } .auth-promo > * { width: 100%; max-width: 440px; } .auth-promo h2 { max-width: 12em; margin-inline: auto; font-family: var(--font-display); font-size: clamp(34px, 3.9vw, 52px); line-height: 1.1; font-weight: 700; letter-spacing: -0.035em; } .auth-promo h2 .accent { background: linear-gradient(96deg, #4a5f9e 0%, #7a5fb8 48%, #3f9d92 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html.portal-theme-dark .auth-promo h2 .accent { background: linear-gradient(96deg, #9fb4ff 0%, #c7a8ff 48%, #7ee0d1 100%); -webkit-background-clip: text; background-clip: text; } .promo-list { display: flex; flex-direction: column; gap: 12px; max-width: 460px; /* 卡片内的文字回到左对齐：.auth-promo 上的 text-align:center 是给标题的， 两三行的说明文字居中很难扫读。 */ text-align: left; } .promo-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--radius); } .promo-item .promo-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(233, 239, 252, 0.6)); border: 1px solid rgba(37, 99, 235, 0.12); box-shadow: -3px -3px 8px var(--neu-light), 4px 5px 12px -6px var(--neu-dark), inset 0 1px 0 rgba(255, 255, 255, 0.95); color: var(--blue-deep); } html.portal-theme-dark .promo-item .promo-icon { background: rgba(255, 255, 255, 0.07); box-shadow: none; } .promo-item .promo-icon svg { width: 19px; height: 19px; } .promo-item h3 { font-size: 15.5px; font-weight: 650; letter-spacing: -0.015em; } .promo-item p { margin-top: 3px; color: var(--ink-2); font-size: 14.2px; line-height: 1.6; } .auth-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 48px) calc(clamp(36px, 5vw, 64px) + env(safe-area-inset-bottom)); } /* -------------------------------------------------------------------------- 7. 表单卡片 -------------------------------------------------------------------------- */ .auth-card { width: 100%; max-width: 460px; padding: clamp(28px, 3.4vw, 44px); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge); } .auth-card-head { margin-bottom: 26px; text-align: center; } .auth-card-head h1 { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 29px); font-weight: 700; letter-spacing: -0.028em; } .auth-card-head p { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; } /* 消息条（app.js 通过 textContent + hidden 控制） */ .message { margin-bottom: 18px; padding: 12px 15px; border-radius: var(--radius-sm); background: var(--danger-soft); border: 1px solid rgba(185, 28, 28, 0.22); color: var(--danger); font-size: 14.2px; line-height: 1.55; } .message.is-success { background: var(--ok-soft); border-color: rgba(21, 128, 61, 0.24); color: var(--ok); } /* 标签页 */ .auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 24px; padding: 4px; border-radius: var(--radius-pill); background: var(--brand-soft); border: 1px solid var(--glass-hairline); } .auth-tabs .tab-indicator { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--radius-pill); background: var(--glass-fill-strong); box-shadow: -2px -2px 6px var(--neu-light), 3px 4px 10px -4px var(--neu-dark), inset 0 1px 0 var(--glass-edge); transition: transform 0.36s var(--ease); } .auth-tabs[data-active="legacy"] .tab-indicator { transform: translateX(100%); } .auth-tab { position: relative; z-index: 1; min-height: 42px; border-radius: var(--radius-pill); color: var(--ink-3); font-size: 14.5px; font-weight: 600; transition: color 0.26s var(--ease); } .auth-tab.is-active { color: var(--ink); } .auth-pane { display: none; } .auth-pane.is-active { display: block; animation: pane-in 0.32s var(--ease); } @keyframes pane-in { from { opacity: 0; transform: translateY(8px); } } /* -------------------------------------------------------------------------- 8. 表单控件 -------------------------------------------------------------------------- */ .field { margin-bottom: 16px; } .field > label, .field-label { display: block; margin: 0 0 7px 2px; color: var(--ink-2); font-size: 13.2px; font-weight: 600; letter-spacing: 0.01em; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"] { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--field-border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--ink); font: inherit; font-size: 15.5px; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease); -webkit-appearance: none; appearance: none; } input::placeholder { color: var(--ink-3); opacity: 0.72; } input:hover { border-color: var(--ink-3); } input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft), 0 0 0 1px var(--blue); } input[aria-invalid="true"] { border-color: var(--danger); } /* 密码框 + 显示切换 */ .password-field { position: relative; } .password-field input { padding-right: 52px; } .password-toggle { position: absolute; top: 50%; right: 5px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-3); transform: translateY(-50%); transition: color 0.2s var(--ease), background-color 0.2s var(--ease); } .password-toggle:hover { color: var(--ink); background: var(--brand-soft); } .password-toggle .icon { width: 20px; height: 20px; } /* 输入框 + 行内按钮（获取验证码） */ .inline-action-field { display: flex; gap: 8px; } .inline-action-field input { flex: 1 1 auto; min-width: 0; } .inline-action-button { flex: none; min-height: 50px; padding: 0 16px; border: 1px solid var(--field-border); border-radius: var(--radius-sm); background: var(--glass-fill); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease); } .inline-action-button:hover:not(:disabled) { background: var(--glass-fill-strong); border-color: var(--ink-3); } .inline-action-button:disabled { opacity: 0.55; cursor: not-allowed; } /* 自动登录 / 忘记密码 */ .form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 22px; } .remember-row { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink-2); font-size: 14px; cursor: pointer; } .remember-row input[type="checkbox"] { width: 19px; height: 19px; margin: 0; border: 1px solid var(--field-border); border-radius: 6px; background: var(--field-bg); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease); } .remember-row input[type="checkbox"]:checked { border-color: var(--blue-deep); background: var(--blue) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5.2 5.2L20 7'/%3E%3C/svg%3E") center / 13px no-repeat; } html.portal-theme-dark .remember-row input[type="checkbox"]:checked { background-color: var(--blue); } .link-button { min-height: 44px; padding: 0 6px; border-radius: 8px; color: var(--blue-deep); font-size: 14px; font-weight: 600; } .link-button:hover { text-decoration: underline; } html.portal-theme-dark .link-button { color: #9fb4ff; } /* 提交按钮 */ /* 提交按钮：深海蓝渐变 + 拟态浮起，与首页主按钮同一套语言 */ .btn-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border-radius: var(--radius-pill); background: linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%); color: var(--ink-on-dark); font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; box-shadow: 0 14px 30px -12px var(--blue-glow), 0 2px 6px rgba(29, 78, 216, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(15, 23, 42, 0.14); transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), background-color 0.22s var(--ease), opacity 0.22s var(--ease); } .btn-submit:hover:not(:disabled) { transform: translateY(-1.5px); background: linear-gradient(180deg, #3b82f6 0%, var(--blue) 100%); box-shadow: 0 22px 40px -14px var(--blue-glow), 0 3px 8px rgba(29, 78, 216, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(15, 23, 42, 0.14); } /* 按下去时阴影反转 —— 拟态里的「按进表面」 */ .btn-submit:active:not(:disabled) { transform: scale(0.985); background: linear-gradient(180deg, var(--blue-deep) 0%, var(--blue-darker) 100%); box-shadow: 0 3px 10px -4px var(--blue-glow), inset 0 2px 6px rgba(15, 23, 42, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.14); } .btn-submit:disabled { opacity: 0.62; cursor: progress; } .btn-submit .icon { width: 19px; height: 19px; } /* 提交中的转圈 */ .btn-submit .spinner { display: none; width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; } .is-busy .spinner { display: block; } .is-busy .btn-icon { display: none; } @keyframes spin { to { transform: rotate(360deg); } } /* 卡片底部换页链接 */ .auth-switch { margin-top: 22px; color: var(--ink-2); font-size: 14px; text-align: center; } .auth-switch button { min-height: 44px; padding: 0 4px; color: var(--blue-deep); font-weight: 700; } .auth-switch button:hover { text-decoration: underline; } html.portal-theme-dark .auth-switch button { color: #9fb4ff; } /* 卡密登录相关 */ .legacy-card-hint { margin-top: 8px; color: var(--ink-3); font-size: 13px; line-height: 1.6; } .legacy-main-query { margin-bottom: 18px; } .legacy-main-query > button { min-height: 44px; padding: 0 4px; color: var(--blue-deep); font-size: 13.6px; font-weight: 600; } .legacy-main-query > button:hover:not(:disabled) { text-decoration: underline; } .legacy-main-query > button:disabled { opacity: 0.6; cursor: progress; } .legacy-main-result { margin-top: 10px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--brand-soft); border: 1px solid var(--glass-hairline); font-size: 14px; } .legacy-main-result > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .legacy-main-result strong { font-family: var(--font-mono); font-size: 14.5px; word-break: break-all; } .legacy-main-result button { min-height: 44px; margin-top: 6px; color: var(--blue-deep); font-weight: 600; } .legacy-main-result small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 12.6px; line-height: 1.55; } /* -------------------------------------------------------------------------- 9. 页脚 -------------------------------------------------------------------------- */ .auth-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; color: var(--ink-3); font-size: 13px; text-align: center; } .auth-foot a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 8px; color: inherit; text-decoration: none; transition: color 0.2s var(--ease), background-color 0.2s var(--ease); } .auth-foot a:hover { color: var(--ink); background: var(--brand-soft); } /* -------------------------------------------------------------------------- 10. 找回密码弹窗 -------------------------------------------------------------------------- */ .auth-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; } .auth-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in 0.24s var(--ease); } @keyframes fade-in { from { opacity: 0; } } .auth-modal-card { position: relative; z-index: 1; width: 100%; max-width: 430px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; padding: clamp(26px, 3vw, 38px); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge); animation: modal-in 0.28s var(--ease); } @keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } } .auth-modal-close { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-3); transition: color 0.2s var(--ease), background-color 0.2s var(--ease); } .auth-modal-close:hover { color: var(--ink); background: var(--brand-soft); } /* -------------------------------------------------------------------------- 11. Toast -------------------------------------------------------------------------- */ .console-copy-toast { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 200; display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 40px)); padding: 13px 16px; border-radius: var(--radius); background: var(--glass-fill-strong); border: 1px solid var(--glass-hairline); box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge); color: var(--ink); font-size: 14.2px; line-height: 1.5; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); animation: toast-in 0.26s var(--ease); } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } } .console-copy-toast .material-symbols-outlined, .console-copy-toast .icon { flex: none; width: 20px; height: 20px; font-size: 20px; color: var(--ok); } .console-copy-toast.is-error .material-symbols-outlined, .console-copy-toast.is-error .icon { color: var(--danger); } .console-copy-toast .toast-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -6px -6px 2px; border-radius: 50%; color: var(--ink-3); } .console-copy-toast .toast-close:hover { color: var(--ink); background: var(--brand-soft); } /* -------------------------------------------------------------------------- 12. 响应式 -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .auth-page { grid-template-columns: minmax(0, 1fr); } .auth-promo { display: none; } } @media (max-width: 480px) { body { font-size: 15.5px; } .auth-header { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } .auth-brand { min-width: 0; font-size: 16.5px; } /* 站点名较长时截断，不要在顶栏里换行把高度撑成两倍 */ .auth-brand span { max-width: 42vw; } .auth-stage { padding: 26px 16px calc(26px + env(safe-area-inset-bottom)); } .auth-card { padding: 24px 20px; border-radius: 22px; } .form-row { flex-wrap: wrap; gap: 4px; } .console-copy-toast { right: 12px; left: 12px; max-width: none; } } @media (max-width: 380px) { .inline-action-field { flex-direction: column; } .inline-action-button { width: 100%; } } /* -------------------------------------------------------------------------- 13. 偏好设置 -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media (prefers-contrast: more) { :root { --glass-hairline: rgba(15, 23, 42, 0.3); --field-border: #6b7280; --ink-2: #353c4a; --ink-3: #454c5b; } .glass, .toolbar-menu, .auth-header, .console-copy-toast { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }