/* ============================================================
 *  认证页样式（登录 / 注册 / 找回密码）—— css/auth.css
 *  独立自包含：类名统一 xy- 前缀，不与 style.css / theme.css 冲突
 *  视觉与主页、用户控制台一致：靛蓝主色 + 渐变头 + 圆角卡片
 *  ★ 头部（.xy-head）为「竖排居中」：图标在上，标题与副标题居中，只此一处定义
 * ============================================================ */
.xy-page {
    /* ★ 必须显式 display:block：user/css/style.css 给 body 设了 display:flex，
       而认证页的 body 上就带着 .xy-page —— 继承成 flex 后 .xy-wrap 变成伸缩项，
       窄屏下会出现「卡片整体右移、右边被切掉」的现象。
       认证页只需要一张居中卡片，这里恢复成普通块级布局即可从根上消除该问题。 */
    display: block;
    margin: 0; min-height: 100vh; box-sizing: border-box;
    background: radial-gradient(1200px 620px at 50% -12%, #eef2ff 0%, #f6f8ff 46%, #f4f6fb 100%);
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    color: #1f2937; -webkit-font-smoothing: antialiased;
}
.xy-top { position: fixed; top: 18px; right: 22px; z-index: 20; display: flex; align-items: center; gap: 10px; }
.xy-top-link {
    display: inline-flex; align-items: center; height: 38px; padding: 0 14px;
    font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
    color: #4b5563; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
}
.xy-top-link:hover { border-color: #4f46e5; color: #4f46e5; }

.xy-wrap { max-width: 720px; margin: 0 auto; padding: 68px 20px 44px; }
.xy-card {
    background: #fff; border: 1px solid rgba(15, 23, 42, .05); border-radius: 20px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04), 0 24px 60px rgba(79, 70, 229, .10);
}
/* 头部：竖排 + 居中（图标在上，文案在下） */
.xy-head {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; gap: 13px; padding: 30px 30px 26px;
    background: linear-gradient(120deg, #4f46e5, #6366f1); color: #fff;
}
.xy-logo {
    width: 56px; height: 56px; flex: none; object-fit: contain;
    border-radius: 16px; background: #fff; padding: 5px; box-sizing: border-box;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
}
.xy-head h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: .5px; }
.xy-head p { margin: 6px 0 0; font-size: 13px; opacity: .9; }

.xy-body { padding: 30px 30px 6px; }
.xy-alert { margin-bottom: 18px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.7; }
.xy-alert.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.xy-alert.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

.xy-field { display: block; margin-bottom: 18px; }
.xy-field > span { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #374151; }
.xy-field input {
    width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px;
    font-size: 14px; font-family: inherit; color: #111827; outline: none;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; transition: all .18s ease;
}
.xy-field input::placeholder { color: #9aa3b2; }
.xy-field input:focus { background: #fff; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .10); }
.xy-tip { margin: 7px 0 0; font-size: 12.5px; line-height: 1.7; color: #8b93a5; }

.xy-btn {
    width: 100%; height: 48px; margin-top: 6px; border: 0; border-radius: 12px;
    background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff;
    font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
    box-shadow: 0 10px 22px rgba(79, 70, 229, .24); transition: filter .18s ease, transform .18s ease;
}
.xy-btn:hover { filter: brightness(1.06); }
.xy-btn:active { transform: translateY(1px); }
.xy-links { padding: 16px 0 24px; text-align: center; font-size: 13px; color: #6b7280; }
.xy-links a { color: #4f46e5; font-weight: 600; text-decoration: none; }
.xy-links a:hover { text-decoration: underline; }
.xy-links .sep { margin: 0 8px; color: #c7cbd6; }

.xy-foot { display: flex; align-items: center; gap: 16px; padding: 18px 30px; border-top: 1px solid #eef1f7; background: #fafbff; }
.xy-qr { width: 92px; height: 92px; flex: none; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid #eef1f7; }
.xy-foot b { display: block; margin-bottom: 5px; font-size: 14px; color: #1f2937; }
.xy-foot p { margin: 0; font-size: 12.5px; line-height: 1.8; color: #6b7280; }
.xy-kw { display: inline-block; padding: 2px 9px; border-radius: 6px; background: #eef2ff; color: #4338ca; font-weight: 700; white-space: nowrap; }

html[data-theme="dark"] .xy-page { background: radial-gradient(1200px 620px at 50% -12%, #1a1d29 0%, #14161d 46%, #101216 100%); color: #e8eaf2; }
html[data-theme="dark"] .xy-card { background: #1d2026; border-color: #2a2e38; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .xy-field > span { color: #c3c9d6; }
html[data-theme="dark"] .xy-field input { background: #23262e; border-color: #3a3f52; color: #e8eaf2; }
html[data-theme="dark"] .xy-field input:focus { background: #262a33; border-color: #6d8bff; }
html[data-theme="dark"] .xy-tip { color: #8b93a5; }
html[data-theme="dark"] .xy-links { color: #8b93a5; }
html[data-theme="dark"] .xy-foot { background: #191c23; border-color: #2a2e38; }
html[data-theme="dark"] .xy-foot b { color: #e8eaf2; }
html[data-theme="dark"] .xy-kw { background: #232a3d; color: #b9c6ff; }
html[data-theme="dark"] .xy-top-link { background: #1d2026; border-color: #3a3f52; color: #c3c9d6; }
html[data-theme="dark"] .xy-alert.err { background: #3a1d1d; color: #ffb4b4; border-color: #6b2b2b; }
html[data-theme="dark"] .xy-alert.ok { background: #14312a; color: #6fe3ab; border-color: #1c4a3d; }

@media (max-width: 600px) {
    /* 窄屏横向溢出已由 .xy-page{display:block} 从根上解决，不再需要 overflow-x 兜底 */
    .xy-top { top: 10px; left: 12px; right: auto; gap: 8px; }
    .xy-top-link { height: 34px; padding: 0 10px; font-size: 12.5px; }
    .xy-wrap { padding: 58px 12px 28px; }
    .xy-head { padding: 24px 18px 22px; gap: 11px; }
    .xy-logo { width: 50px; height: 50px; border-radius: 14px; }
    .xy-head h1 { font-size: 18px; }
    .xy-head p { font-size: 12.5px; }
    .xy-body { padding: 22px 18px 4px; }
    .xy-field input { height: 48px; font-size: 15px; }
    .xy-btn { height: 50px; }
    .xy-foot { flex-direction: column; text-align: center; padding: 18px; }
    .xy-qr { width: 132px; height: 132px; }
}

/* ============================================================
   微信免密登录面板（.xy-wx）与分隔线（.xy-or）
   用于登录页 / 免密登录页：二维码 + 4 位确认码 + 状态
   ============================================================ */
.xy-or { position: relative; margin: 22px 0 18px; text-align: center; }
.xy-or::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #eef1f7; }
.xy-or span { position: relative; padding: 0 12px; font-size: 12.5px; color: #8b93a5; background: #fff; }

.xy-wx {
    display: flex; align-items: center; gap: 18px; padding: 16px;
    border: 1px solid #e6e9f5; border-radius: 14px; background: #fbfcff;
}
.xy-wx-qr { flex: none; }
.xy-wx-qr img {
    display: block; width: 118px; height: 118px; object-fit: contain;
    border-radius: 10px; background: #fff; border: 1px solid #eef1f7;
}
.xy-wx-side { min-width: 0; max-width: 100%; }
.xy-wx-side b { display: block; margin-bottom: 6px; font-size: 15px; color: #1f2937; }
.xy-wx-step { margin: 0 0 8px; font-size: 12.5px; line-height: 1.8; color: #6b7280; overflow-wrap: anywhere; word-break: break-word; }
.xy-wx-send { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #374151; }
/* ★ 整句「登录云电脑 1234」同一个底色（不只是数字），并且可点击复制。
   用 inline-flex + nowrap 让「文字 + 数字 + 复制图标」保持在同一行，
   普通 inline-block 在窄屏会被拆成多行，看起来像三段东西。 */
.xy-wx-cmd {
    display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap;
    padding: 6px 14px; border-radius: 10px;
    background: #eef2ff; color: #4338ca; font-size: 15px; font-weight: 700;
    cursor: pointer; user-select: all; -webkit-user-select: all;
}
.xy-wx-cmd b { margin-left: 5px; font-size: 20px; letter-spacing: 3px; font-family: Consolas, Menlo, monospace; }
.xy-wx-cmd:hover { filter: brightness(.96); }
.xy-wx-cmd::after { content: ' ⧉'; opacity: .5; font-size: .85em; }
html[data-theme="dark"] .xy-wx-cmd { background: #232a3d; color: #b9c6ff; }
.xy-wx-code {
    display: inline-block; margin-left: 4px; padding: 3px 12px; border-radius: 8px;
    background: #eef2ff; color: #4338ca; font-size: 20px; font-weight: 700;
    letter-spacing: 3px; font-family: Consolas, Menlo, monospace;
}
/* ★ 页脚里相邻两行要拉开距离：以前 .xy-foot p 的 margin 全为 0，
   两行的关键词底色会贴在一起，看起来像叠加、很影响观感。 */
.xy-foot p { line-height: 1.9; }
.xy-foot p + p { margin-top: 10px; }
/* 关键词可点击复制（脚本 js/xcopy.js 自动绑定，无需页面写 data-copy） */
.xy-kw { cursor: pointer; user-select: all; -webkit-user-select: all; }
.xy-kw::after { content: ' ⧉'; opacity: .5; font-size: .9em; }
.xy-kw:hover { filter: brightness(.95); }

/* ============================================================
   折叠面板（登录页的账号密码登录 / 找回页的邮箱找回）
   默认收起，点按钮展开；样式由 js/xytoggle.js 驱动的结构共用
   ============================================================ */
.xy-pwd-toggle { text-align: center; margin: 16px 0 6px; }
.xy-pwd-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 12px;
    border: 1px solid #e5e7eb; background: #fff; color: #4b5563;
    font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .18s ease;
}
.xy-pwd-btn:hover { border-color: #4f46e5; color: #4f46e5; }
.xy-pwd-box[hidden] { display: none; }
.xy-pwd-box { animation: xyFadeIn .22s ease-out; }
@keyframes xyFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
html[data-theme="dark"] .xy-pwd-btn { background: #1d2026; border-color: #3a3f52; color: #c3c9d6; }
html[data-theme="dark"] .xy-pwd-btn:hover { border-color: #6d8bff; color: #b9c6ff; }
.xy-wx .xy-tip { margin: 4px 0 0; }
.xy-wx [data-wx-state] { color: #4f46e5; font-weight: 600; }
.xy-wx a { color: #4f46e5; font-weight: 600; text-decoration: none; }
.xy-wx a:hover { text-decoration: underline; }

html[data-theme="dark"] .xy-or::before { background: #2a2e38; }
html[data-theme="dark"] .xy-or span { background: #1d2026; }
html[data-theme="dark"] .xy-wx { background: #20242c; border-color: #2f3441; }
html[data-theme="dark"] .xy-wx-side b { color: #e8eaf2; }
html[data-theme="dark"] .xy-wx-step { color: #8b93a5; }
html[data-theme="dark"] .xy-wx-send { color: #c3c9d6; }
html[data-theme="dark"] .xy-wx-code { background: #232a3d; color: #b9c6ff; }

@media (max-width: 600px) {
    /* ★ 列方向下如果沿用 align-items:center，文字容器会缩成内容宽度而溢出被裁切，
       所以这里显式给 100% 宽度，让长句正常换行。 */
    .xy-wx { flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 16px 14px; }
    .xy-wx-side { width: 100%; }
    .xy-wx-qr img { width: 150px; height: 150px; }
    .xy-wx-code { font-size: 22px; }
}