/* ============================================================
   认证页主题 · 公共结构（所有风格共用）
   结构：.auth-bg 背景层 + .auth-main 居中 + .auth-card 卡片（分栏 / 居中）+ .auth-footer
   颜色/圆角/阴影等差异全部走 CSS 变量，由 theme-{name}.css 覆盖：
       --auth-primary          主色（按钮、链接、焦点）
       --auth-primary-hover    主色悬停
       --auth-text             正文色
       --auth-muted            次要文字色
       --auth-border           边框色
       --auth-radius           圆角
       --auth-card-shadow      卡片阴影
       --auth-visual-bg        左栏背景（渐变）
       --auth-icon-color       视觉区图标色
       --auth-font             字体
       --auth-title-color      标题色
   ============================================================ */

/* 静态渲染页用 hidden 属性控制提示条 / 加载条显隐；
   .auth-message / .auth-loading 自带 display，必须用 !important 压住。 */
[hidden] {
    display: none !important;
}

/* 按钮样式的链接（静态页用 <a> 替代 button）不显示下划线 */
a.auth-btn,
a.auth-social,
a.auth-scan {
    text-decoration: none;
}

/* 静态页的扫码切换是 <a>，会被 .auth-page a { color: inherit } 抢掉颜色，
   这里用更高特异性（.auth-page a.auth-scan）把主色调边框 / 浅主色底 / 主色图标拿回来。 */
.auth-page a.auth-scan,
.auth-page .auth-scan {
    color: var(--auth-primary);
    border: 1px solid var(--auth-scan-border, rgba(0, 120, 212, .18));
    background: var(--auth-scan-bg, rgba(0, 120, 212, .06));
}

.auth-page a.auth-scan:hover,
.auth-page .auth-scan:hover {
    color: var(--auth-primary-hover);
    border-color: var(--auth-primary);
    background: var(--auth-scan-border, rgba(0, 120, 212, .12));
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* ---------- 全局基础（原 Murrow.AspNetCore.Components.Web.FluentTheme/css/app.css 迁入） ---------- */
html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #f0f2f5;
}

* {
    box-sizing: border-box;
}

.auth-page {
    --auth-primary: #0078d4;
    --auth-primary-hover: #106ebe;
    --auth-text: #242424;
    --auth-muted: #616161;
    --auth-border: #d1d5db;
    --auth-radius: 4px;
    --auth-card-shadow: 0 14px 44px rgba(15, 40, 80, .14);
    --auth-visual-bg: linear-gradient(160deg, #f0f2f5 0%, #e4edf6 55%, #d9e0f4 100%);
    --auth-icon-color: var(--auth-primary);
    --auth-title-color: var(--auth-text);
    --auth-font: "Segoe UI Variable", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--auth-text);
    font-family: var(--auth-font);
    font-size: 15px;
    line-height: 1.6;
}

.auth-page a {
    color: inherit;
    text-decoration: none;
}

.auth-page p {
    margin: 0;
}

.auth-page h1 {
    margin: 0;
}

/* ---------- 背景层 ---------- */
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: var(--auth-bg-color, #f0f2f5);
}

/* ---------- 主体 ---------- */
.auth-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* ---------- 卡片 ---------- */
.auth-card {
    display: grid;
    grid-template-columns: 370px minmax(0, 1fr);
    width: 100%;
    max-width: 880px;
    min-height: 500px;
    overflow: hidden;
    background: var(--auth-card-bg, #fff);
    border: var(--auth-card-border, none);
    border-radius: var(--auth-card-radius, 8px);
    box-shadow: var(--auth-card-shadow);
}

/* 居中形态（注册 / 找回密码） */
.auth-card-centered {
    display: flex;
    flex-direction: column;
    max-width: 460px;
    min-height: 0;
}

/* ---------- 左栏视觉区 ---------- */
.auth-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 40px 32px;
    background: var(--auth-visual-bg);
    color: var(--auth-icon-color);
    text-align: center;
}

.auth-icon {
    width: 74px;
    height: 74px;
    color: var(--auth-icon-color);
}

.auth-visual-note {
    color: var(--auth-visual-note-color, #4b5563);
    font-size: 14px;
    line-height: 2;
    /* 允许页面用 \n 换行（登录页左栏两行文案） */
    white-space: pre-line;
}

/* 居中卡片的头部品牌区 */
.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 28px 0;
    text-align: center;
}

.auth-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--auth-brand-bg, rgba(0, 120, 212, .08));
    color: var(--auth-brand-icon-color, var(--auth-primary));
    margin-bottom: 4px;
}

.auth-brand-icon .auth-icon {
    width: 34px;
    height: 34px;
    color: var(--auth-brand-icon-color, var(--auth-primary));
}

/* ---------- 表单区 ---------- */
.auth-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 44px 30px;
}

.auth-card-centered .auth-panel {
    padding: 20px 28px 26px;
}

.auth-title {
    color: var(--auth-title-color);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
}

.auth-card-centered .auth-title {
    font-size: 20px;
    text-align: center;
}

.auth-subtitle {
    color: var(--auth-muted);
    font-size: 13px;
    text-align: center;
}

.auth-panel > .auth-title:not(.auth-brand .auth-title) {
    margin-bottom: 4px;
}

/* 右上角扫码切换 */
.auth-scan {
    position: absolute;
    top: 20px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--auth-scan-border, rgba(0, 120, 212, .18));
    border-radius: 999px;
    background: var(--auth-scan-bg, rgba(0, 120, 212, .06));
    color: var(--auth-primary);
    font-family: inherit;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.auth-scan svg {
    width: 16px;
    height: 16px;
}

.auth-scan:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* ---------- 表单控件 ---------- */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 22px;
}

.auth-card-centered .auth-form {
    margin-top: 18px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-label {
    color: var(--auth-muted);
    font-size: 13px;
}

.auth-input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    outline: none;
    background: var(--auth-input-bg, #fff);
    color: var(--auth-text);
    font-family: inherit;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-input:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 1px var(--auth-primary);
}

.auth-input::placeholder {
    color: #9aa4b0;
}

/* 忘记密码 / 次要链接 */
.auth-forgot {
    align-self: flex-end;
    margin-top: -4px;
    color: var(--auth-primary);
    font-size: 13px;
}

.auth-forgot:hover {
    text-decoration: underline;
}

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

.auth-code-row .auth-input {
    flex: 1;
}

.auth-code-btn {
    flex: none;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    background: #fff;
    color: var(--auth-text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.auth-code-btn:hover:not(:disabled) {
    border-color: var(--auth-primary);
    color: var(--auth-primary);
}

.auth-code-btn:disabled {
    cursor: not-allowed;
    opacity: .6;
}

/* ---------- 按钮 ---------- */
.auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: var(--auth-radius);
    background: var(--auth-primary);
    color: var(--auth-btn-text, #fff);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}

.auth-btn:hover:not(:disabled) {
    background: var(--auth-primary-hover);
}

.auth-btn:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.auth-btn-ghost {
    border: 1px solid var(--auth-border);
    background: #fff;
    color: var(--auth-text);
    font-weight: 500;
}

.auth-btn-ghost:hover:not(:disabled) {
    border-color: var(--auth-primary);
    background: #fafafa;
    color: var(--auth-primary);
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

/* ---------- 提示条 ---------- */
.auth-message {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--auth-radius);
    font-size: 13px;
    line-height: 1.7;
}

.auth-message-error {
    border: 1px solid #f3c2c2;
    background: #fdf3f3;
    color: #a4262c;
}

.auth-message-info {
    border: 1px solid #cddff5;
    background: #f2f7fd;
    color: #115ea3;
}

.auth-message-title {
    font-weight: 600;
}

/* 加载态 */
.auth-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    color: var(--auth-muted);
    font-size: 14px;
}

.auth-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--auth-border);
    border-top-color: var(--auth-primary);
    border-radius: 50%;
    animation: auth-spin .8s linear infinite;
}

@keyframes auth-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- 分隔 + 第三方 ---------- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
    color: var(--auth-divider-color, #8a8a8a);
    font-size: 13px;
}

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

.auth-socials {
    display: flex;
    gap: 12px;
}

.auth-social {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    background: #fff;
    color: var(--auth-text);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.auth-social:hover:not(:disabled) {
    border-color: var(--auth-primary);
}

.auth-social:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.auth-social svg {
    flex: none;
}

/* ---------- 找回密码：步骤条 ---------- */
.auth-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 18px 0 6px;
}

.auth-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--auth-border);
    border-radius: 50%;
    background: #fff;
    color: var(--auth-muted);
    font-size: 12px;
}

.auth-step-active {
    border-color: var(--auth-primary);
    background: var(--auth-primary);
    color: #fff;
}

.auth-step-done {
    border-color: var(--auth-primary);
    color: var(--auth-primary);
}

.auth-step-line {
    flex: 1;
    height: 1px;
    background: var(--auth-divider-line, #e5e7eb);
}

.auth-hint {
    color: var(--auth-muted);
    font-size: 12px;
    line-height: 1.7;
}

.auth-subtip {
    color: var(--auth-muted);
    font-size: 13px;
    line-height: 1.8;
}

.auth-subtip strong {
    color: var(--auth-text);
}

.auth-subtip .auth-inline-link {
    color: var(--auth-primary);
    cursor: pointer;
}

.auth-subtip .auth-inline-link:hover {
    text-decoration: underline;
}

/* 底部「返回登录」等 */
.auth-foot-link {
    margin-top: 16px;
    color: var(--auth-muted);
    font-size: 13px;
    text-align: center;
}

.auth-foot-link a,
.auth-foot-link button {
    color: var(--auth-primary);
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.auth-foot-link a:hover,
.auth-foot-link button:hover {
    text-decoration: underline;
}

/* ---------- 扫码登录面板 ---------- */
.auth-qr-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 4px 0 2px;
    margin: auto 0;
}

.qr-frame {
    position: relative;
    padding: 10px;
    background: var(--auth-card-bg, #fff);
    border: 1px solid var(--auth-border);
    border-radius: calc(var(--auth-radius) + 2px);
}

.qr-corner {
    position: absolute;
    width: 13px;
    height: 13px;
    border: 2px solid var(--auth-primary);
    border-radius: 2px;
    opacity: .85;
}

.qr-corner-tl { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.qr-corner-tr { top: -3px; right: -3px; border-left: 0; border-bottom: 0; }
.qr-corner-bl { bottom: -3px; left: -3px; border-right: 0; border-top: 0; }
.qr-corner-br { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }

.qr-box {
    width: 196px;
    height: 196px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 二维码 SVG 由 JS 动态插入 */
.qr-box svg {
    width: 100%;
    height: 100%;
    display: block;
}

.qr-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--auth-muted);
}

.qr-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--auth-border);
    border-top-color: var(--auth-primary);
    border-radius: 50%;
    animation: auth-qr-spin .7s linear infinite;
}

@keyframes auth-qr-spin {
    to { transform: rotate(360deg); }
}

.qr-fail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    font-size: 13px;
    color: #b42318;
    text-align: center;
    cursor: pointer;
}

.qr-fail small {
    font-size: 12px;
    color: var(--auth-muted);
}

.qr-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--auth-muted);
    text-align: center;
    background: var(--auth-status-bg, #f5f7f9);
    border-radius: 999px;
}

.qr-status::before {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--auth-primary);
}

.qr-status[data-state="ok"] {
    color: #0f7b3e;
    background: #eaf7ef;
}

.qr-status[data-state="ok"]::before {
    background: #18a45c;
}

.qr-status[data-state="warn"] {
    color: #9a5b00;
    background: #fdf4e3;
}

.qr-status[data-state="warn"]::before {
    background: #e0900c;
}

/* ---------- 授权确认 ---------- */
.auth-consent-client {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--auth-status-bg, #f5f7f9);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
}

.auth-consent-client h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--auth-title-color, var(--auth-text));
}

.auth-consent-client-id {
    font-size: 12px;
    color: var(--auth-muted);
    word-break: break-all;
}

.auth-scopes {
    margin-bottom: 20px;
}

.auth-scopes h4 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--auth-muted);
}

.auth-scope-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--auth-text);
    border-bottom: 1px solid var(--auth-border);
}

.auth-scope-item:last-child {
    border-bottom: 0;
}

.auth-scope-item input[type="checkbox"] {
    margin: 0;
    accent-color: var(--auth-primary);
}

.auth-scope-item label {
    flex: 1;
    cursor: default;
}

.auth-scope-tag {
    padding: 1px 8px;
    font-size: 11px;
    color: var(--auth-muted);
    background: var(--auth-status-bg, #f5f7f9);
    border-radius: 999px;
}

/* ---------- 加宽分栏卡片 ---------- */
.auth-card-wide {
    max-width: 920px;
    grid-template-columns: 400px minmax(0, 1fr);
    min-height: 0;
}

/* ---------- 左栏价值点列表（分栏页用） ---------- */
.auth-feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.auth-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--auth-visual-note-color, #4b5563);
}

.auth-feature-list svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--auth-icon-color);
}

.auth-visual-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--auth-icon-color);
}

/* ---------- 表单头部：标题 + 右侧链接 ---------- */
.auth-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.auth-head .auth-title {
    margin-bottom: 4px;
}

.auth-head-note {
    margin: 0;
    font-size: 13px;
    color: var(--auth-muted);
}

.auth-head-link {
    flex: 0 0 auto;
    padding-top: 4px;
    font-size: 13px;
    color: var(--auth-primary);
    white-space: nowrap;
}

.auth-head-link:hover {
    text-decoration: underline;
}

/* ---------- 两列并排字段（选填项） ---------- */
.auth-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.auth-pair .auth-field {
    margin-bottom: 0;
}

/* ---------- 验证码 + 获取验证码 同行 ---------- */
.auth-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 8px;
}

.auth-code-row .auth-btn {
    width: 104px;
    height: 40px;
    padding: 0;
    font-size: 13px;
    letter-spacing: 0;
    border: 1px solid var(--auth-primary);
    color: var(--auth-primary);
    background: var(--auth-scan-bg, rgba(0, 120, 212, .05));
}

.auth-code-row .auth-btn:hover {
    background: var(--auth-scan-border, rgba(0, 120, 212, .12));
}

.auth-input-tip {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--auth-muted);
}

/* ---------- 页脚 ---------- */
.auth-footer {
    position: relative;
    z-index: 1;
    padding: 16px 20px;
    background: var(--auth-footer-bg, rgba(255, 255, 255, .55));
    color: var(--auth-footer-color, #6b7280);
    font-size: 13px;
    text-align: center;
}

.auth-footer a {
    color: inherit;
}

.auth-footer a:hover {
    color: var(--auth-primary);
}

.auth-footer-sep {
    margin: 0 6px;
    opacity: .6;
}

/* ---------- 标题行：标题 + 右上角切换按钮 ---------- */
.auth-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.auth-panel-head .auth-title {
    margin: 0;
}

.auth-panel-head .auth-scan {
    position: static;
    flex: none;
}

/* ---------- 密码框「小眼睛」 ----------
   password-toggle.js 会把 input[type=password] 包进 .auth-password-wrap，
   并在右侧放一个切换按钮；这里只负责排版。 */
.auth-password-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.auth-password-wrap > .auth-input {
    padding-right: 44px;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--auth-radius);
    background: transparent;
    color: var(--auth-muted);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .15s ease, background-color .15s ease;
}

.auth-password-toggle svg {
    width: 18px;
    height: 18px;
}

.auth-password-toggle:hover {
    color: var(--auth-primary);
    background: var(--auth-scan-bg, rgba(0, 120, 212, .06));
}

/* ---------- 授权确认页（consent）：应用 + 权限胶囊 + 两个按钮 ---------- */
.auth-consent-app {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    background: var(--auth-status-bg, #f7f9fb);
}

.auth-consent-app-label {
    flex: none;
    color: var(--auth-muted);
    font-size: 12.5px;
}

.auth-consent-app-name {
    color: var(--auth-text);
    font-size: 14px;
    font-weight: 600;
    word-break: break-all;
}

.auth-consent-scopes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.auth-consent-scopes-title {
    color: var(--auth-muted);
    font-size: 12.5px;
}

.auth-scope-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.auth-scope-chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--auth-scan-border, rgba(0, 120, 212, .18));
    border-radius: 999px;
    background: var(--auth-scan-bg, rgba(0, 120, 212, .06));
    color: var(--auth-primary);
    font-size: 12.5px;
}

/* 表单里的隐藏域不参与 flex 布局，避免撑出多余的行间距 */
.auth-consent-form input[type="hidden"] {
    display: none;
}

/* ---------- 极简页（404）：大图标 + 大标题 + 一行说明 ---------- */
.auth-simple {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    padding: 8px 16px;
    text-align: center;
}

.auth-simple-img {
    width: 240px;
    max-width: 64vw;
    height: auto;
    margin-bottom: 6px;
    user-select: none;
    /* 插画本身是浅色，加一层柔和投影让它在浅底上立起来 */
    filter: drop-shadow(0 14px 28px rgba(15, 40, 80, .14));
}

.auth-simple-title {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.4px;
    color: var(--auth-title-color);
}

.auth-simple-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--auth-muted);
}

/* ============================================================
   视觉精修（2026-10-31）
   统一圆角 / 描边 / 间距 / 字阶：只在结构层做数值覆盖，不改变布局结构；
   配色差异继续由 theme-*.css 的 CSS 变量承载（变量缺省值即 fluent 口径）。
   注意：本段必须排在「响应式」段之前，否则会盖掉窄屏规则。
   ============================================================ */

/* 卡片：发丝描边 + 柔投影（圆角由 --auth-card-radius 提供） */
.auth-card {
    border: var(--auth-card-border, 1px solid rgba(15, 40, 80, .06));
    box-shadow: var(--auth-card-shadow, 0 22px 60px -20px rgba(15, 40, 80, .28), 0 2px 6px rgba(15, 40, 80, .06));
}

/* 分栏卡片：左视觉区与右表单区之间加一条极淡分割线 */
.auth-visual {
    padding: 44px 36px;
    border-right: 1px solid var(--auth-split-line, rgba(15, 40, 80, .05));
}

.auth-card:not(.auth-card-centered) .auth-panel {
    padding: 40px 44px 34px;
}

/* 标题区 */
.auth-title {
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -.3px;
}

.auth-head {
    align-items: center;
    margin-bottom: 20px;
}

.auth-head-note {
    margin-top: 6px;
}

.auth-head-link {
    font-size: 13.5px;
}

/* 表单节奏 */
.auth-form {
    gap: 16px;
}

.auth-pair {
    gap: 12px;
}

/* 找回密码页等「步骤面板」是 block 容器，内部元素没有 gap 会紧贴 */
.auth-form > [data-step-panel] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 步骤面板里连续的两个次要按钮不要拉得太开 */
.auth-form > [data-step-panel] > .auth-btn-ghost:not(:first-child) {
    margin-top: -4px;
}

/* 输入框 */
.auth-input {
    height: 44px;
    padding: 0 14px;
    font-size: 14.5px;
}

.auth-input:hover:not(:focus):not(:disabled) {
    border-color: var(--auth-border-hover, rgba(15, 40, 80, .22));
}

.auth-input:focus {
    box-shadow: 0 0 0 3px var(--auth-focus-ring, rgba(0, 120, 212, .12));
}

/* 按钮：主按钮 46 高；次要按钮弱化成文字按钮 */
.auth-btn {
    height: 46px;
    letter-spacing: .4px;
}

.auth-actions {
    margin-top: 6px;
}

.auth-actions .auth-btn-ghost,
.auth-form > .auth-btn-ghost {
    border: 0;
    background: transparent;
    color: var(--auth-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
}

.auth-actions .auth-btn-ghost {
    height: 44px;
}

.auth-form > .auth-btn-ghost {
    height: 42px;
}

.auth-actions .auth-btn-ghost:hover:not(:disabled),
.auth-form > .auth-btn-ghost:hover:not(:disabled) {
    background: var(--auth-scan-bg, rgba(0, 120, 212, .06));
    color: var(--auth-primary);
}

/* 次级按钮（如登录页「注册新账号」）：描边样式，与主按钮同高但层级更低。
   观感上刻意压淡：淡描边 + 次要文字色 + 常字重，避免与主按钮抢注意力。
   选择器带 .auth-page + a 前缀，确保盖过 .auth-page a { color: inherit }。 */
.auth-page a.auth-btn-secondary {
    border: 1px solid var(--auth-border, rgba(15, 40, 80, .12));
    background: #fff;
    color: var(--auth-muted);
    font-weight: 500;
}

.auth-page a.auth-btn-secondary:hover {
    border-color: var(--auth-border-hover, rgba(15, 40, 80, .22));
    background: #fafafa;
    color: var(--auth-text);
}

/* 验证码行：输入框自适应，按钮固定宽度 */
.auth-code-row {
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 10px;
}

.auth-code-row .auth-btn {
    width: 120px;
    height: 44px;
    font-size: 13.5px;
    border: 1px solid var(--auth-scan-border, rgba(0, 120, 212, .18));
}

/* 左栏文案 */
.auth-visual-note {
    line-height: 1.8;
}

.auth-feature-list li {
    font-size: 14px;
    color: var(--auth-feature-color, #3a4350);
}

/* 第三方登录 */
.auth-social {
    height: 42px;
    font-size: 14px;
}

.auth-social:hover {
    border-color: var(--auth-border-hover, rgba(15, 40, 80, .22));
    background: #fafbfc;
}

.auth-divider {
    font-size: 12.5px;
}

/* 协议提示 */
.auth-input-tip {
    font-size: 12.5px;
    color: var(--auth-tip-color, #8a94a3);
}

/* 步骤条与表单底部链接 */
.auth-steps {
    margin: 10px 0 4px;
}

.auth-foot-link {
    margin-top: 6px;
}
/* ---------- 响应式 ----------
   注意：本段必须在文件末尾，之前各段（含「视觉精修」）是桌面口径，
   顺序反了会把窄屏规则覆盖掉。
   ---------------------------------------------------------- */
@media (max-width: 900px) {
    .auth-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    /* 单列时左右分割线改成上下分割线 */
    .auth-visual {
        gap: 14px;
        padding: 26px 20px;
        border-right: 0;
        border-bottom: 1px solid var(--auth-split-line, rgba(15, 40, 80, .05));
    }

    .auth-icon {
        width: 52px;
        height: 52px;
    }

    .auth-card:not(.auth-card-centered) .auth-panel,
    .auth-panel {
        padding: 24px 20px 22px;
    }

    .auth-card-centered .auth-panel {
        padding: 18px 20px 22px;
    }

    .auth-panel-head {
        margin-bottom: 12px;
    }

    .auth-title {
        font-size: 20px;
        letter-spacing: 0;
    }

    .auth-form {
        gap: 14px;
    }

    /* 移动端输入框字号必须 >=16px，否则聚焦时浏览器会自动放大整页 */
    .auth-input {
        height: 46px;
        font-size: 16px;
    }

    .auth-btn {
        height: 48px;
        letter-spacing: 0;
    }

    .auth-pair {
        gap: 10px;
    }

    .auth-code-row {
        grid-template-columns: minmax(0, 1fr) 108px;
        gap: 8px;
    }

    .auth-code-row .auth-btn {
        width: 108px;
        font-size: 12.5px;
    }

    .auth-scan {
        height: 32px;
        padding: 0 12px;
        font-size: 12.5px;
    }

    .auth-steps {
        margin: 8px 0 2px;
    }

    .auth-foot-link {
        margin-top: 4px;
    }
}

@media (max-width: 480px) {
    .auth-main {
        padding: 20px 14px;
    }

    .auth-socials {
        flex-direction: column;
    }

    /* 竖排后 flex:1（flex-basis:0）会压掉 height，这里改回固定高度并撑满宽度 */
    .auth-social {
        flex: 0 0 auto;
        width: 100%;
        height: 46px;
    }

    .auth-feature-list li {
        font-size: 13.5px;
    }

    .auth-simple-img {
        width: 170px;
    }

    .auth-simple-title {
        font-size: 22px;
        letter-spacing: -.2px;
    }

    .auth-simple-sub {
        font-size: 13px;
    }

    .auth-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-card {
        border-radius: calc(var(--auth-card-radius, 8px) + 2px);
    }
}