/* =========================================================
   NimbusGate · 幻构云筑 - 认证页样式
   外壳与前台一致：全站导航贴边贴顶，内容区两栏通栏铺满，
   不再有背景图 / 背景光晕 / 嵌套玻璃卡片。
   ========================================================= */

:root {
    /* 认证区颜色别名统一指向 main.css 的 --ng-* 品牌令牌（站点主题色 #6c5ce7）。
       早期认证页是独立玻璃态外壳，自带一套蓝色 #3f6df6，现按站点主题色更正；
       认证页必定加载 main.css，故这里不再存第二份主色值。
       rgba() 需要拆通道，改主色时 --blue-rgb 与主色同步一次即可。 */
    --blue: var(--ng-primary, #6c5ce7);
    --blue-soft: var(--ng-primary-bg, #f6f4fe);
    --blue-rgb: 108, 92, 231;
    --ink: #162033;
    --text: #202b3e;
    --muted: #788399;
    --line: rgba(60, 60, 67, 0.13);
    --green: #1ba784;
    --shadow: 0 20px 55px rgba(25, 40, 68, 0.12);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

/* body 不加任何自有 class / 复位：字体、文字色、背景、min-height、flex 骨架全部继承 main.css，
   导航栏因此与前台走同一套显示逻辑。
   注意：main.css 另有一套 .auth-body / .auth-head（授权流程卡片用），是本文件加载 main.css 之后
   出现的撞名点。原先 <body class="auth-body"> 会命中 .auth-body{padding:28px 32px 22px}，
   把导航顶离视口；故这里不再给 body 挂类，标题区也改用 .ng-auth-head 前缀。 */

/* ---------- 内容区：导航下方通栏，上下左右贴边 ---------- */

/* 高度由 main.css 的 body > main.flex-grow-1 > #appContent 撑满「视口高 - 导航高」；
   这里只定两栏网格。不再有背景图、光晕、渐变底、外留白与居中卡片。 */
.login-page {
    width: 100%;
    display: grid;
    /* 右栏收窄为固定区间，左栏 minmax(0,1fr) 自动填补剩余宽度 */
    grid-template-columns: minmax(0, 1fr) clamp(420px, 34vw, 560px);
    background: #fff;
}

/* 接入全站导航后认证页也加载 Bootstrap，这里把认证区内的链接下划线收回自有体系；
   .auth-forgot a:hover / .agreement a:hover 等自有规则特异性更高，不受影响。 */
.login-page a, .auth-modal a { text-decoration: none; }

/* 右栏表单区：整栏铺满；表单本身限宽以便阅读，但不再有任何卡片外观 */
.login-forms {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    /* 右栏收窄后内边距同步收小，保证表单仍有约 400px 可用宽度 */
    padding: 48px clamp(28px, 3vw, 56px);
    background: #fff;
}

/* 面板切换改为常规显示/隐藏：不再绝对定位叠放、不再用 transform 与 backdrop-filter，
   否则会给里面 position:fixed 的重置密码弹窗造出新的包含块。 */
.auth-panel { display: none; }
.auth-panel.active { display: block; }

/* 面板入场动画：淡入 + 轻微上移。
   由 JS 在切换时加 .is-entering 并重播（先移除再加，配合 reflow 触发）。 */
@keyframes authPanelIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.auth-panel.active.is-entering {
    animation: authPanelIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    .auth-panel.active.is-entering { animation: none; }
}

.login-panel {
    width: 100%;
    max-width: 460px;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* ---------- 左侧品牌区：通栏色块，无卡片边框 / 圆角 / 阴影 ---------- */

.login-side {
    /* 左栏内边距与 logo 的左定位共用同一真源 */
    --auth-side-pad: clamp(32px, 5vw, 88px);
    /* 顶部留出 logo 的绝对定位高度，底部留出页脚标识 */
    padding: 132px var(--auth-side-pad) 44px;
    background: linear-gradient(150deg, #172842 0%, #122137 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.login-side::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(128, 174, 255, 0.25);
    border-radius: 50%;
    right: -205px;
    bottom: -245px;
    box-shadow: 0 0 0 52px rgba(118, 168, 255, 0.045), 0 0 0 104px rgba(118, 168, 255, 0.03);
    pointer-events: none;
}

.brand {
    /* logo 钉在左上角，脱离 flex 流；h1 / lead / 要点块仍整体垂直居中 */
    position: absolute;
    top: 40px;
    left: var(--auth-side-pad);
    z-index: 1;
    display: inline-block;
    text-decoration: none;
    margin-bottom: 0;
}

.brand-svg {
    display: block;
    height: 76px;
    width: auto;
}

/* 正文区：标题 + 说明 + 2×2 特性卡（纵向占据导航下方的剩余高度） */
.login-side-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.login-side h1 {
    margin: 0 0 16px;
    font-size: clamp(30px, 2.6vw, 40px);
    line-height: 1.28;
    letter-spacing: -0.4px;
    font-weight: 800;
    max-width: 560px;
}

.login-side .lead {
    margin: 0 0 34px;
    color: #b9c9dd;
    /* Bootstrap 的 .lead 带 font-weight:300，这里显式归位 */
    font-size: 15px;
    font-weight: 400;
    line-height: 1.95;
    max-width: 560px;
}

/* 特性卡：2 列 × 2 行，图标方块在左，标题与说明在右 */
.login-side-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 620px;
}

.login-side-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
}

.login-side-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ng-gradient);
    color: #fff;
    font-size: 17px;
}

.login-side-copy {
    min-width: 0;
}

.login-side-copy b {
    display: block;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 4px;
}

.login-side-copy span {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12.5px;
    line-height: 1.7;
}

/* 底部版权行：与页脚 footer-bottom 同款结构（版权 + 技术支持署名两行） */
.login-side-foot {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    line-height: 1.9;
}

/* 深色底上的链接：常态半透明白，悬停转品牌紫亮色标 #8f7dff（同 .ng-band-point i 的用法），
   只变色不加下划线，与站内页脚 / 深色区的链接约定一致。 */
.login-side-foot a {
    color: rgba(255, 255, 255, 0.58);
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-side-foot a:hover {
    color: #8f7dff;
}

/* 矮屏（笔记本 768 高度一档）：压缩标题与卡片间距，避免内容被裁掉 */
@media (max-height: 860px) {
    .login-side h1 { font-size: clamp(26px, 2.2vw, 32px); }
    .login-side .lead { margin-bottom: 24px; line-height: 1.8; }
    .login-side-feature { padding: 13px 14px; }
    .login-side-foot { margin-top: 26px; padding-top: 16px; }
}

/* ---------- 右侧表单 ---------- */

/* 标题区：eyebrow + 主标题 + 说明 + 切换链接，底部一条分隔线把标题区与字段区隔开 */
.ng-auth-head {
    position: relative;
    margin-bottom: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

/* 登录错误提示 */
.auth-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(255, 69, 58, 0.08);
    border: 1px solid rgba(255, 69, 58, 0.25);
    color: #d93a2e;
    font-size: 13px;
    margin-bottom: 18px;
}

.auth-error i { font-size: 15px; }

/* 注册关闭提醒（中性蓝，与 auth-error 视觉一致但不表示报错） */
.auth-tip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(var(--blue-rgb), 0.08);
    border: 1px solid rgba(var(--blue-rgb), 0.25);
    color: var(--blue);
    font-size: 13px;
    margin-bottom: 18px;
}

.auth-tip i { font-size: 15px; }

.auth-eyebrow {
    display: block;
    color: var(--blue);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1.6px;
    margin-bottom: 6px;
}

.ng-auth-head h2 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.4px;
}

.ng-auth-head .intro {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
}

/* 字段 */

.field { margin-bottom: 16px; }

.field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 7px;
}

.field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
    font: inherit;
    color: var(--text);
    outline: none;
    /* 不用 box-shadow 做焦点光晕 —— 焦点态只靠边框色与底色表达，更干净。
       box-shadow 保留在 transition 里，便于日后需要时再加。 */
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* 悬停即高亮：边框转品牌色、底色转纯白，与焦点态一致但边框略浅，
   让人一眼看出「这个框可以点」。 */
.field input:hover {
    border-color: rgba(var(--blue-rgb), 0.55);
    background: #fff;
}

.field input:focus {
    border-color: var(--blue);
    background: #fff;
}

.field input::placeholder { color: #b0b6c3; }

/* 登录按钮下方一行：登录方式切换 + 忘记密码。
   两者本质是同一条链路（邮箱收码 → 证明归属），故并排，用间隔点分开。 */
.auth-forgot {
    margin: 14px 0 0;
    text-align: center;
    font-size: 11.5px;
}

.auth-forgot a {
    color: #8a93a6;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* 两个链接之间的分隔点，仅作视觉区隔 */
.auth-forgot-sep {
    margin: 0 8px;
    color: #c3c9d4;
}

.auth-forgot a:hover {
    color: var(--blue);
    text-decoration: none;
}

/* 第三方账号登录：分割线 + 图片文字行 */

/* 分割线：左右各一段细线，中间镂空放文字 */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 18px;
    color: var(--muted);
    font-size: 11.5px;
    white-space: nowrap;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* 第三方登录入口：图标 + 文字 + 右箭头，整行可点 */
.auth-oauth {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 13.5px;
    text-decoration: none;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.auth-oauth img {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    object-fit: contain;
}

.auth-oauth span {
    flex: 1;
    min-width: 0;
}

.auth-oauth i {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--muted);
    transition: transform 0.24s var(--ease), color 0.2s var(--ease);
}

.auth-oauth:hover {
    border-color: rgba(var(--blue-rgb), 0.55);
    background: var(--blue-soft);
}

.auth-oauth:hover i {
    color: var(--blue);
    transform: translateX(2px);
}

/* 第三方授权补全页（acc 未返回邮箱时的二选一） */

/* 账户卡：头像 + 昵称 + 账户 ID */
.oauth-complete-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--blue-soft);
}

.oauth-complete-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

.oauth-complete-info {
    min-width: 0;
}

.oauth-complete-info b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 3px;
}

.oauth-complete-info span {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

/* 两个选项：标题 + 说明 + 右箭头 */
.oauth-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.oauth-choice b {
    flex: 0 0 auto;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue);
}

.oauth-choice span {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

.oauth-choice i {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--muted);
    transition: transform 0.24s var(--ease), color 0.2s var(--ease);
}

.oauth-choice:hover {
    border-color: rgba(var(--blue-rgb), 0.55);
    background: var(--blue-soft);
}

.oauth-choice:hover i {
    color: var(--blue);
    transform: translateX(2px);
}

/* 按钮 */

.btn-primary {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 12px;
    background: var(--ng-gradient);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(var(--blue-rgb), 0.32);
    /* 底色是渐变（background-image），**渐变不可插值** —— 直接换 --gh 会瞬间跳色。
       故悬停保持底色不变，用 filter 亮度缓亮 + 阴影外扩做平滑高亮（同导航栏两枚按钮的做法）。
       transition 显式列出各属性：background 简写不可过渡，写进去也不生效。 */
    transition: transform 0.2s var(--ease), box-shadow 0.28s var(--ease), filter 0.28s var(--ease);
}

.btn-primary:hover {
    background: var(--ng-gradient);
    filter: brightness(1.1);
    box-shadow: 0 14px 30px rgba(var(--blue-rgb), 0.4);
}

.btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.96);
}

/* 登录 / 注册切换链接（位于标题下方；真链接 + 同页切换动画） */
.auth-switch-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.auth-switch-link b {
    color: var(--blue);
    font-weight: 600;
}

.auth-switch-link i {
    font-size: 12px;
    transition: transform 0.24s var(--ease);
}

.auth-switch-link:hover {
    color: var(--text);
}

.auth-switch-link:hover b {
    color: var(--ng-primary-hover);
}

/* 悬停时箭头轻微位移，指示方向（不放大，符合站内克制的交互风格） */
.auth-switch-link:hover i {
    transform: translateX(3px);
}

/* 协议文案 */

.agreement {
    margin: 12px 0 0;
    font-size: 11.5px;
    color: #a5aab8;
    text-align: center;
    line-height: 1.7;
}

.agreement a {
    color: #8a93a6;
    text-decoration: none;
    transition: color 0.2s ease;
}
.agreement a:hover {
    color: var(--blue);
    text-decoration: none;
}

/* 验证码行 */

.verify-line {
    display: flex;
    gap: 10px;
}

.verify-line input { flex: 1; }

.verify-button {
    flex-shrink: 0;
    padding: 0 16px;
    border: 1px solid rgba(var(--blue-rgb), 0.35);
    border-radius: 10px;
    background: var(--blue-soft);
    color: var(--blue);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s var(--ease);
}

.verify-button:hover { background: rgba(var(--blue-rgb), 0.15); }

/* Toast */

.toast {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%) translateY(16px);
    background: rgba(22, 32, 51, 0.92);
    color: #fff;
    font-size: 13px;
    padding: 12px 22px;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(22, 32, 51, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
    z-index: 99;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ---------- 响应式 ---------- */

@media (max-width: 860px) {
    .login-page { grid-template-columns: 1fr; }
    .login-side { display: none; }
    .login-forms { padding: 40px 28px; }
}

@media (max-width: 480px) {
    /* 注意：不要再给 .auth-body 加 padding，那会把顶部导航挤离视口边缘。 */
    .login-forms { padding: 28px 18px; }
}

/* 验证码输入行 */
.code-row {
    display: flex;
    gap: 10px;
}

.code-row input {
    flex: 1;
    min-width: 0;
}

.code-btn {
    flex-shrink: 0;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: var(--ng-gradient);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
}

.code-btn:hover { box-shadow: 0 8px 18px rgba(var(--blue-rgb), 0.3); }

.code-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---------- 重置密码弹窗（忘记密码：发送验证码 → 校验并设新密码） ---------- */

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-modal.open { display: flex; }

.auth-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.auth-modal-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 24px 24px 22px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    animation: authModalIn 0.28s var(--ease);
}

@keyframes authModalIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.auth-modal-head h3 {
    margin: 0 0 4px;
    font-size: 17px;
    color: var(--ink);
}

.auth-modal-head p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
}

.auth-modal-close {
    flex-shrink: 0;
    padding: 2px 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.auth-modal-close:hover { background: #f1f3f8; color: var(--text); }

.auth-modal-body { margin: 0; }

.auth-modal-body[hidden] { display: none; }

.auth-modal-body .btn-primary { width: 100%; }

.auth-modal-msg {
    margin: 10px 0 0;
    min-height: 18px;
    font-size: 12.5px;
    color: var(--muted);
}

.auth-modal-ok {
    margin: 4px 0 0;
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--green);
}