/* ============================================================
   启元.QIEAM UI V4 页面族样式 —— 认证/法务/验证族 (v4/pages/auth.css)
   消费者：auth_base.html（register*/password_reset*/service_request_public/done）、
           login_totp.html、verify.html。
   注：login.html 已改用独立 v4/pages/login.css（V4 标准件结构），不再消费本文件；
       login-clock.js 随登录页品牌叙事区移除一并下线。
   类名与既有模板/JS（register.js / verify 相关）同契约；
   视觉全量切换刻度语态：平面底、发丝线、无光晕/点阵/渐变/阴影/入场动画。
   纪律：100% 消费 v4/tokens.css 既有令牌，零 !important。
   ============================================================ */

/* ── 0. 公共：盒模型与页面底 ── */
/* 盒模型基线由 v4/base.css 统一声明（所有独立壳共同加载）。 */

/* 作用域 reset：与旧 auth-base 全局 reset 同效，仅限认证族三壳根内，
   避免浏览器默认 margin 影响排版（各壳整页即根，行为等同旧全局 reset） */
.auth-stage *,
.login-shell *,
.verify-wrap * {
    margin: 0;
    padding: 0;
}

html, body { min-height: 100vh; min-height: 100svh; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--scale-t-body);
    line-height: var(--lh-body);
    color: var(--scale-ink-1);
    background-color: var(--scale-face);
    -webkit-font-smoothing: antialiased;
}

/* 防伪验证页内边距（页根为 verify-wrap） */
body:has(.verify-wrap) { padding: var(--scale-sp-4) 14px 48px; }

/* 键盘可达性：焦点环仅对键盘触发生效 */
:focus-visible {
    outline: 2px solid var(--scale-rule-focus);
    outline-offset: 2px;
}

/* ── 1. 主题切换（右上角悬浮，qx-icon-btn 语态） ── */
.theme-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 30;
    width: 38px;
    height: 38px;
    cursor: pointer;
    border: 1px solid var(--scale-rule);
    border-radius: var(--scale-r-ctl);
    background-color: var(--scale-panel);
    color: var(--scale-ink-2);
    font-size: var(--scale-t-body);
    display: grid;
    place-items: center;
    transition: background-color var(--dur-inst) var(--ease-out),
                color var(--dur-inst) var(--ease-out);
}

.theme-toggle:hover {
    background-color: var(--scale-recess);
    color: var(--scale-ink-1);
}

#themeToggle .bi-sun { display: none; }
[data-bs-theme="dark"] #themeToggle .bi-sun { display: inline-block; }
[data-bs-theme="dark"] #themeToggle .bi-moon-stars { display: none; }

/* ══════════ 2. 居中舞台壳（auth_base 子页） ══════════ */
.auth-stage {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 44px 20px 28px;
}

.form-wrap {
    width: 100%;
    max-width: 424px;
    min-width: 0;
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule);
    padding: 34px var(--scale-sp-5) 26px;
}

.card-brand { text-align: center; margin-bottom: 22px; }

.card-brand .logo {
    width: 46px;
    height: 46px;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    font-size: var(--scale-t-page);
    color: var(--scale-ink-1);
}

.card-brand .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 50%;
}

.card-brand .co {
    font-size: var(--scale-t-tick);
    font-weight: 600;
    color: var(--scale-ink-3);
    letter-spacing: 1.5px;
}

.form-wrap h2 {
    font-size: var(--scale-t-page);
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--scale-ink-1);
}

.form-wrap .sub {
    color: var(--scale-ink-3);
    font-size: var(--scale-t-body);
    margin: 0 0 var(--scale-sp-3);
}

/* ── 输入图标位（输入皮肤由 qx-input 承担，此处只定位图标/按钮） ── */
.input-icon { position: relative; }

.input-icon > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--scale-ink-3);
    font-size: var(--scale-t-body);
    pointer-events: none;
    transition: color var(--dur-inst) var(--ease-out);
}

.input-icon:focus-within > i { color: var(--scale-steel); }

.eye-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--scale-ink-3);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: var(--scale-t-body);
}

.eye-btn:hover {
    color: var(--scale-ink-1);
    background-color: var(--scale-recess);
}

.eye-btn[aria-pressed="true"] { color: var(--scale-steel); }

/* ── 反馈提示（语义边框 + 中性衬底，无大面积色场） ── */
.alert-error,
.alert-ok {
    display: flex;
    align-items: flex-start;
    gap: var(--scale-sp-2);
    border-radius: var(--scale-r-ctl);
    padding: 10px var(--scale-sp-3);
    font-size: var(--scale-t-body);
    margin-bottom: var(--scale-sp-3);
    line-height: var(--lh-body);
}

.alert-error {
    background-color: var(--scale-redline-wash);
    border: 1px solid var(--scale-redline);
    color: var(--scale-redline);
}

.alert-ok {
    background-color: var(--scale-steel-wash);
    border: 1px solid var(--scale-ok);
    color: var(--scale-ok);
}

.alert-error i,
.alert-ok i { margin-top: 2px; flex-shrink: 0; }

.alert-error ul,
.alert-ok ul {
    margin: 0;
    padding-left: var(--scale-sp-3);
}

/* ── 记住用户名 / 条款行 ── */
.check-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--scale-sp-2);
    margin-top: 14px;
    font-size: var(--scale-t-body);
}

.check-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--scale-ink-2);
    cursor: pointer;
    margin: 0;
}

.check-row input[type="checkbox"] {
    accent-color: var(--scale-steel);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.check-row a,
.foot-links a,
.terms-row a {
    color: var(--scale-steel);
    font-weight: 600;
    text-decoration: none;
}

.check-row a:hover,
.foot-links a:hover,
.terms-row a:hover { text-decoration: underline; }

/* ── 大写锁定提示 ── */
.caps-hint {
    display: none;
    margin-top: 6px;
    color: var(--scale-warn);
    font-size: var(--scale-t-meta);
}

.caps-hint.show { display: block; }
.caps-hint.is-ok { color: var(--scale-ok); }
.caps-hint.is-error { color: var(--scale-redline); }

/* ── 验证码行（注册页） ── */
.code-row {
    display: flex;
    gap: var(--scale-sp-2);
}

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

.btn-code {
    height: 32px;
    flex-shrink: 0;
    min-width: 118px;
    border: 1px solid var(--scale-steel);
    border-radius: var(--scale-r-ctl);
    background: transparent;
    color: var(--scale-steel);
    font-size: var(--scale-t-body);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--dur-inst) var(--ease-out),
                color var(--dur-inst) var(--ease-out),
                opacity var(--dur-inst) var(--ease-out);
}

.btn-code:hover:not(:disabled) {
    background-color: var(--scale-steel-wash);
}

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

/* ── 密码强度条（阈值条语态：4px 分段） ── */
.pw-meter { display: none; margin-top: var(--scale-sp-2); }
.pw-meter.show { display: block; }

.pw-bars {
    display: flex;
    gap: var(--scale-sp-1);
}

.pw-bars i {
    height: 4px;
    flex: 1;
    background-color: var(--scale-rule);
    transition: background-color var(--dur-inst) var(--ease-out);
}

.pw-bars i.on-1 { background-color: var(--scale-redline); }
.pw-bars i.on-2 { background-color: var(--scale-warn); }
.pw-bars i.on-3 { background-color: var(--scale-ok); }
.pw-bars i.on-4 { background-color: var(--scale-ok); }

.pw-label {
    font-size: var(--scale-t-meta);
    margin-top: 5px;
    color: var(--scale-ink-2);
}

.pw-checks {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--scale-sp-1) 12px;
}

.pw-checks span {
    font-size: var(--scale-t-meta);
    color: var(--scale-ink-3);
    display: inline-flex;
    align-items: center;
    gap: var(--scale-sp-1);
}

.pw-checks span.ok { color: var(--scale-ok); }

/* ── 条款勾选（注册页） ── */
.terms-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 14px;
    font-size: var(--scale-t-body);
}

.terms-row input[type="checkbox"] {
    accent-color: var(--scale-steel);
    width: 15px;
    height: 15px;
    margin-top: 2px;
    cursor: pointer;
}

.terms-row label {
    color: var(--scale-ink-2);
    cursor: pointer;
    margin: 0;
    line-height: var(--lh-body);
}

/* ── 卡片底部与页脚 ── */
.form-foot {
    margin-top: 22px;
    color: var(--scale-ink-3);
    font-size: var(--scale-t-meta);
    text-align: center;
    line-height: 1.7;
}

.foot-links {
    margin-top: var(--scale-sp-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--scale-t-body);
}

.foot-links span { color: var(--scale-ink-3); }

.auth-copy {
    margin-top: 20px;
    color: var(--scale-ink-3);
    font-size: var(--scale-t-meta);
    text-align: center;
}

/* ══════════ 3. 登录分屏（login / login_totp） ══════════ */
.login-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
}

/* ── 左：品牌区（平面中性面板，无点阵/光晕） ── */
.brand-pane {
    flex: 0 0 47%;
    max-width: 660px;
    background-color: var(--scale-recess);
    border-right: 1px solid var(--scale-rule);
    display: flex;
    flex-direction: column;
    padding: 38px 48px var(--scale-sp-3);
    color: var(--scale-ink-1);
}

/* 装饰层退场（模板保留占位时由 CSS 隐藏兜底） */
.bp-grid,
.bp-glow { display: none; }

.bp-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bp-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}

.bp-logo .logo-mark {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: var(--scale-t-title);
    color: var(--scale-ink-1);
}

.bp-logo .logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 50%;
}

.bp-logo .logo-name {
    font-size: var(--scale-t-body);
    font-weight: 600;
    color: var(--scale-ink-1);
}

.bp-logo .logo-name small {
    display: block;
    font-size: var(--scale-t-tick);
    font-weight: 400;
    color: var(--scale-ink-3);
    letter-spacing: 1.2px;
    margin-top: 1px;
}

/* ── 主视觉：文案 + 时钟环（刻度语态） ── */
.bp-hero {
    margin-top: clamp(44px, 10vh, 84px);
    display: flex;
    align-items: center;
    gap: 20px;
}

.bp-hero-copy { flex: 1; min-width: 0; }

.bp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--scale-t-meta);
    font-weight: 600;
    letter-spacing: 1.6px;
    color: var(--scale-steel);
    padding: 4px var(--scale-sp-2);
    border: 1px solid var(--scale-rule-strong);
    border-radius: var(--scale-r-ctl);
    background-color: var(--scale-panel);
}

.bp-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--scale-steel);
}

.bp-title {
    margin-top: 18px;
    font-size: var(--scale-t-page);
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--scale-ink-1);
}

.bp-title em {
    font-style: normal;
    color: var(--scale-steel);
}

.bp-sub {
    margin-top: 14px;
    color: var(--scale-ink-3);
    font-size: var(--scale-t-body);
}

.bp-clock {
    position: relative;
    flex-shrink: 0;
    width: clamp(168px, 15vw, 212px);
    aspect-ratio: 1;
    color: var(--scale-steel);
}

.bp-clock svg {
    width: 100%;
    height: 100%;
    display: block;
}

.bp-time {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -58%);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 500;
    color: var(--scale-ink-1);
    white-space: nowrap;
}

.bp-date {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 6%);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--scale-t-tick);
    color: var(--scale-ink-3);
    letter-spacing: 2.2px;
    white-space: nowrap;
}

/* 扫掠亮弧（仅 transform 动画；reduced-motion 关停） */
.bp-clock .sweep {
    transform-box: fill-box;
    transform-origin: center;
    animation: bp-sweep 60s linear infinite;
}

@keyframes bp-sweep { to { transform: rotate(360deg); } }

/* ── 底部：账号保护卡 + 2×2 特性网格 ── */
.bp-bottom {
    margin-top: auto;
    padding-top: clamp(26px, 5vh, 46px);
    display: flex;
    gap: 14px;
    align-items: stretch;
}

.bp-secure {
    flex: 0 0 178px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 14px 16px;
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule);
}

.bp-secure .sec-label {
    font-size: var(--scale-t-tick);
    letter-spacing: 1.5px;
    color: var(--scale-ink-3);
    display: flex;
    align-items: center;
    gap: 6px;
}

.bp-secure .sec-state {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--scale-t-body);
    font-weight: 600;
    color: var(--scale-ink-1);
}

.bp-secure .sec-state i {
    color: var(--scale-ok);
    font-size: var(--scale-t-title);
}

.bp-secure .sec-note {
    font-size: var(--scale-t-tick);
    color: var(--scale-ink-3);
    line-height: 1.5;
}

.bp-feats {
    list-style: none;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.bp-feats li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 13px;
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule);
    transition: border-color var(--dur-inst) var(--ease-out);
}

.bp-feats li:hover { border-color: var(--scale-rule-strong); }

.bp-feats .fi {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: var(--scale-t-body);
    color: var(--scale-steel);
    background-color: var(--scale-steel-wash);
}

.bp-feats b {
    display: block;
    font-size: var(--scale-t-body);
    color: var(--scale-ink-1);
    font-weight: 600;
}

.bp-feats p {
    font-size: var(--scale-t-meta);
    color: var(--scale-ink-3);
    margin-top: 2px;
    line-height: var(--lh-body);
}

.bp-foot {
    margin-top: 20px;
    display: flex;
    align-items: center;
    font-size: var(--scale-t-tick);
    color: var(--scale-ink-3);
}

/* ── 右：表单区 ── */
.form-pane {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 44px var(--scale-sp-3) 26px;
    background-color: var(--scale-face);
}

.fp-wrap {
    width: 100%;
    max-width: 396px;
    position: relative;
}

/* 移动端紧凑品牌头（<1024 显示） */
.mobile-brand {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.mobile-brand .logo-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
}

.mobile-brand .logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 50%;
}

.mobile-brand b { font-size: var(--scale-t-body); color: var(--scale-ink-1); }

.mobile-brand small {
    display: block;
    font-size: var(--scale-t-tick);
    color: var(--scale-ink-3);
    letter-spacing: 1px;
}

.fp-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--scale-t-meta);
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--scale-ink-3);
    margin-bottom: 10px;
}

.fp-eyebrow::before {
    content: "";
    width: 16px;
    height: 2px;
    background-color: var(--scale-steel);
}

.fp-inner { width: 100%; max-width: 396px; }
.fp-title { margin: 0 0 6px; color: var(--scale-ink-1); }

/* 登录按钮字距（「登 录」视觉居中） */
#loginBtn,
#totpBtn {
    letter-spacing: 4px;
    text-indent: 4px;
}

.form-foot { border-top: 1px solid var(--scale-rule); padding-top: var(--scale-sp-3); }

/* ══════════ 4. SSO 入口 ══════════ */
.sso-divider {
    display: flex;
    align-items: center;
    gap: var(--scale-sp-2);
    margin: var(--scale-sp-3) 0 var(--scale-sp-2);
    color: var(--scale-ink-3);
    font-size: var(--scale-t-tick);
}

.sso-divider::before,
.sso-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--scale-rule);
}

.sso-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--scale-sp-2);
}

.sso-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--scale-sp-1);
    padding: var(--scale-sp-1) var(--scale-sp-2);
    border: 1px solid var(--scale-rule-strong);
    border-radius: var(--scale-r-ctl);
    background-color: var(--scale-panel);
    color: var(--scale-ink-1);
    font-size: var(--scale-t-meta);
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--dur-inst) var(--ease-out),
                background-color var(--dur-inst) var(--ease-out);
}

.sso-btn:hover,
.sso-btn:focus-visible {
    border-color: var(--scale-steel);
    background-color: var(--scale-recess);
    color: var(--scale-ink-1);
}

.sso-btn i { color: var(--scale-ink-2); }

/* 个人中心 SSO 绑定行（pane 内复用） */
.sso-bind-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--scale-sp-3);
    padding: var(--scale-sp-2) 0;
    border-bottom: 1px solid var(--scale-rule);
}

.sso-bind-row:last-child { border-bottom: 0; }

.sso-bind-main {
    display: flex;
    align-items: center;
    gap: var(--scale-sp-2);
    min-width: 0;
}

.sso-bind-name {
    font-size: var(--scale-t-meta);
    font-weight: 500;
    color: var(--scale-ink-1);
}

.sso-bind-meta {
    font-size: var(--scale-t-tick);
    color: var(--scale-ink-3);
    word-break: break-all;
}

.sso-bind-actions {
    display: flex;
    align-items: center;
    gap: var(--scale-sp-1);
    flex-shrink: 0;
}

.sso-uri {
    font-size: var(--scale-t-tick);
    color: var(--scale-ink-2);
    word-break: break-all;
}

.sso-note { padding: var(--scale-sp-3); margin-top: var(--scale-sp-3); }

.sso-note-title {
    font-size: var(--scale-t-body);
    font-weight: 600;
    color: var(--scale-ink-1);
    margin-bottom: var(--scale-sp-1);
}

.sso-note-desc {
    font-size: var(--scale-t-meta);
    color: var(--scale-ink-2);
    margin-bottom: var(--scale-sp-2);
}

.sso-note-desc code {
    font-size: var(--scale-t-tick);
    color: var(--scale-ink-1);
    font-family: var(--font-mono);
}

.sso-code {
    padding: var(--scale-sp-2);
    margin-bottom: var(--scale-sp-2);
    background-color: var(--scale-recess);
    border: 1px solid var(--scale-rule);
    color: var(--scale-ink-2);
    font-family: var(--font-mono);
    font-size: var(--scale-t-tick);
    line-height: 1.7;
    overflow-x: auto;
}

.sso-form {
    padding: var(--scale-sp-2) 0;
    border-bottom: 1px solid var(--scale-rule);
}

.sso-form:last-child { border-bottom: 0; }

.sso-textarea {
    font-family: var(--font-mono);
    font-size: var(--scale-t-tick);
    line-height: 1.6;
}

.sso-form-actions { margin-top: var(--scale-sp-1); }

/* ══════════ 5. 防伪验证页（verify.html） ══════════ */
.verify-wrap {
    max-width: 480px;
    margin: 0 auto;
}

.v-brand {
    text-align: center;
    color: var(--scale-ink-1);
    margin: 10px 0 22px;
}

.v-brand .logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
}

.v-brand .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 50%;
    border: 1px solid var(--scale-rule);
}

.v-brand .name {
    font-size: var(--scale-t-title);
    font-weight: 600;
    letter-spacing: 1px;
}

.v-brand .sub {
    font-size: var(--scale-t-body);
    color: var(--scale-ink-3);
    margin-top: 2px;
}

.v-card {
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule);
    padding: 26px 22px;
    margin-bottom: 16px;
}

/* 结果横幅（首次正品=绿 / 重复查询=琥珀 / 未知=红）：语义色仅描边与文字 */
.result-banner { text-align: center; padding: 10px 0 18px; }

.result-banner .ic {
    width: 78px;
    height: 78px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    font-size: var(--scale-t-display);
    border-radius: 50%;
    border: 1px solid var(--scale-rule-strong);
    background-color: var(--scale-recess);
    color: var(--scale-ink-2);
}

.result-banner.first .ic {
    border-color: var(--scale-ok);
    color: var(--scale-ok);
    background-color: var(--scale-panel);
}

.result-banner.again .ic {
    border-color: var(--scale-warn);
    color: var(--scale-warn);
    background-color: var(--scale-panel);
}

.result-banner.not_found .ic {
    border-color: var(--scale-redline);
    color: var(--scale-redline);
    background-color: var(--scale-panel);
}

.result-banner .headline {
    font-size: var(--scale-t-page);
    font-weight: 600;
}

.result-banner.first .headline { color: var(--scale-ok); }
.result-banner.again .headline { color: var(--scale-warn); }
.result-banner.not_found .headline { color: var(--scale-redline); }

.result-banner .desc {
    color: var(--scale-ink-2);
    font-size: var(--scale-t-body);
    margin-top: 6px;
    line-height: var(--lh-body);
}

/* 设备信息小表 */
.dev-info {
    border-top: 1px solid var(--scale-rule);
    margin-top: 8px;
    padding-top: 16px;
}

.dev-row {
    display: flex;
    padding: 9px 2px;
    border-bottom: 1px solid var(--scale-rule);
    font-size: var(--scale-t-body);
}

.dev-row:last-child { border-bottom: none; }

.dev-label {
    color: var(--scale-ink-3);
    width: 96px;
    flex-shrink: 0;
}

.dev-value {
    color: var(--scale-ink-1);
    font-weight: 600;
    word-break: break-all;
}

.code-chip {
    font-family: var(--font-mono);
    letter-spacing: 1px;
    background-color: var(--scale-recess);
    padding: 2px 8px;
    border-radius: var(--scale-r-ctl);
    font-weight: 600;
    color: var(--scale-ink-1);
}

/* 等宽编码值（序列号/合格证编号） */
.mono-code { font-family: var(--font-mono); }

/* 验证记录条 */
.verify-meta {
    margin-top: 14px;
    padding: 12px 14px;
    font-size: var(--scale-t-body);
    line-height: 1.7;
    border: 1px solid var(--scale-rule);
    background-color: var(--scale-recess);
    color: var(--scale-ink-2);
}

.verify-meta.first {
    border-color: var(--scale-ok);
    color: var(--scale-ok);
    background-color: var(--scale-panel);
}

.verify-meta.again {
    border-color: var(--scale-warn);
    color: var(--scale-warn);
    background-color: var(--scale-panel);
}

/* 输入表单（输入皮肤由 qx-input 承担） */
.v-form label {
    font-weight: 600;
    color: var(--scale-ink-1);
    margin-bottom: 8px;
    display: block;
    font-size: var(--scale-t-body);
}

.hint {
    color: var(--scale-ink-3);
    font-size: var(--scale-t-body);
    margin-top: 12px;
    text-align: center;
    line-height: 1.6;
}

.v-footer {
    text-align: center;
    color: var(--scale-ink-3);
    font-size: var(--scale-t-meta);
    margin-top: 20px;
}

.v-footer img {
    height: 16px;
    width: 16px;
    object-fit: contain;
    vertical-align: -3px;
}

.btn-again {
    display: inline-block;
    margin-top: 16px;
    color: var(--scale-steel);
    text-decoration: none;
    font-size: var(--scale-t-body);
    font-weight: 600;
}

.btn-again:hover { text-decoration: underline; }

/* ══════════ 6. 响应式与动效降级 ══════════ */
@media (max-width: 480px) {
    .auth-stage { padding: 30px 14px 20px; }
    .form-wrap { padding: 26px 20px 20px; }
    .form-pane { padding: 26px 18px 20px; }
    #loginBtn,
    #totpBtn { letter-spacing: 2px; text-indent: 2px; }
}

/* ≤1024：品牌区退化为顶部横幅条 */
@media (max-width: 1024px) {
    .login-shell { flex-direction: column; }

    .brand-pane {
        flex: none;
        max-width: none;
        padding: 18px 22px;
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid var(--scale-rule);
    }

    .bp-inner { flex-direction: row; align-items: center; gap: var(--scale-sp-3); }
    .bp-hero,
    .bp-bottom,
    .bp-foot { display: none; }
    .form-pane { padding-top: 30px; }
    .mobile-brand { display: flex; }
}

@media (max-width: 767.98px) {
    .sso-bind-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--scale-sp-1);
    }

    .sso-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

    html { scroll-behavior: auto; }
}