/* Staff sign-in (design v9, SHELL 6.3, board AdminLogin): ink edge to edge,
   the head on top (the logo, the console name and the environment at the
   left, the language at the right), one white 400px card in the middle (32
   inside, e3) and the audit line under it. The second step replaces the
   first inside the card: the form is one column whose two steps lend it
   their parts, so the alert sits between a step's title and its fields.
   The code is one field over six boxes (three, a gap, three): the field's
   own text is transparent and each digit is written into its box, so it
   stays one field with one value. An account without two-step verification
   sees the card's third face, 先绑定两步验证, in place of the form. An
   account that must change its password first (S-436) sees the form's
   third step, 先修改登录密码: the new password twice and, for an account
   with two-step verification, a current code in a plain field; a changed
   password returns to the first step with a green notice over the fields. */
body.admin-auth { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--admin-bar); color: var(--admin-text); }
.admin-auth-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding-right: 16px; }
.admin-auth-head .admin-id { width: auto; }
.admin-auth-head .language-control.language-chip { height: 32px; padding: 0 12px 0 10px; border-radius: var(--r-6); background: transparent; color: var(--admin-icon); }
.admin-auth-head .language-control.language-chip:hover { background: var(--admin-wash-1); color: var(--admin-text); }
.admin-auth-head .language-control.language-chip > select { color-scheme: dark; color: inherit; font-size: 14px; line-height: 20px; font-weight: 500; }
.admin-auth-head .language-control.language-chip:has(> select:focus-visible) { outline-color: var(--admin-focus); }
.admin-auth-main { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 24px; max-width: none; margin: 0; padding: 48px 16px 80px; }
.admin-auth-card { width: 100%; max-width: 400px; padding: 32px; border-radius: var(--r-12); background: var(--gray-0); box-shadow: var(--e3); color: var(--text-1); }
#sign-in, #bind-step { display: flex; flex-direction: column; margin: 0; }
#password-step, #totp-step, #change-step { display: contents; }
#sign-in br { display: none; }
#sign-in > p, #bind-step > p { margin: 0; }
.admin-auth-who { order: 0; display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 12px; border-radius: var(--r-8); background: var(--gray-25); }
.admin-auth-who > .avatar { width: 36px; height: 36px; background: var(--gray-100); color: var(--gray-700); font: 500 14px/20px var(--font-sans); }
#sign-in-who, #bind-who, #change-who { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--text-1); font: 500 14px/20px var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
#sign-in-change, #change-account { position: relative; flex: none; height: auto; min-height: 0; padding: 0; border: 0; border-radius: var(--r-4); background: none; box-shadow: none; color: var(--violet-600); font: 500 13px/20px var(--font-sans); }
#sign-in-change::before, #change-account::before { content: ""; position: absolute; inset: -12px -8px; }
#sign-in-change:hover, #change-account:hover { background: none; color: var(--violet-700); text-decoration: underline; text-underline-offset: 3px; }
.admin-auth-intro { order: 1; }
.admin-auth-intro > h1 { margin: 0; color: var(--text-1); font: 600 24px/32px var(--font-sans); letter-spacing: 0; }
.admin-auth-intro > p { margin: 8px 0 0; color: var(--text-2); font-size: 14px; line-height: 22px; text-wrap: pretty; }
#sign-in-status, #sign-in-notice { order: 2; }
#sign-in-status:empty, #sign-in-notice:empty { display: none; }
#sign-in-notice:not(:empty) { margin-top: 24px; padding: 12px; border: 1px solid var(--success-border); border-radius: var(--r-8); background: var(--success-tint); color: var(--success-fg); font-size: 14px; line-height: 22px; }
#sign-in-status:not(:empty) { display: flex; align-items: flex-start; gap: 8px; margin-top: 24px; padding: 12px; border: 1px solid var(--danger-border); border-radius: var(--r-8); background: var(--danger-tint); color: var(--danger-fg); font-size: 14px; line-height: 22px; }
#sign-in-status:not(:empty)::before, #totp-code-hint:not(:empty)::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; background: currentColor; clip-path: path("M15.33 8A7.33 7.33 0 1 1 0.67 8A7.33 7.33 0 1 1 15.33 8ZM14 8A6 6 0 1 0 2 8A6 6 0 1 0 14 8ZM8.67 5.33L8.67 8L7.33 8L7.33 5.33ZM8.67 5.33A0.67 0.67 0 1 1 7.33 5.33A0.67 0.67 0 1 1 8.67 5.33ZM8.67 8A0.67 0.67 0 1 1 7.33 8A0.67 0.67 0 1 1 8.67 8ZM8 10L8.01 10L8.01 11.33L8 11.33ZM8.67 10.67A0.67 0.67 0 1 1 7.33 10.67A0.67 0.67 0 1 1 8.67 10.67ZM8.67 10.67A0.67 0.67 0 1 1 7.34 10.67A0.67 0.67 0 1 1 8.67 10.67Z"); }
#totp-step:not([hidden]) ~ #sign-in-status { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.admin-auth-fields { order: 3; display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
#sign-in:has(> #sign-in-status:not(:empty)) .admin-auth-fields, #sign-in:has(> #sign-in-notice:not(:empty)) .admin-auth-fields { margin-top: 20px; }
#sign-in-notice:not(:empty) + #sign-in-status:not(:empty) { margin-top: 12px; }
#change-code-part:not([hidden]) { display: contents; }
.admin-auth-fields > .admin-auth-rules, #change-code-part > .admin-auth-rules { margin: -14px 0 0; color: var(--text-3); font-size: 12px; line-height: 16px; }
.admin-auth-fields > p, #change-code-part > p, .admin-auth-code > p { display: flex; flex-direction: column; gap: 6px; margin: 0; }
#sign-in label { color: var(--text-1); font: 500 13px/20px var(--font-sans); }
#sign-in [id$="-hint"] { margin: -14px 0 0; font-size: 12px; line-height: 16px; }
#login, #password, #new-password, #new-password-confirm, #change-code { display: block; width: 100%; height: 40px; min-height: 0; padding: 0 12px; border: 1px solid var(--gray-200); border-radius: var(--r-8); background: var(--gray-0); color: var(--text-1); font-size: 14px; line-height: 20px; }
#login:hover, #password:hover, #new-password:hover, #new-password-confirm:hover, #change-code:hover { border-color: var(--gray-300); }
#login:focus, #password:focus, #new-password:focus, #new-password-confirm:focus, #change-code:focus { border-color: var(--violet-600); outline: none; box-shadow: var(--ring-input); }
#login[aria-invalid="true"], #password[aria-invalid="true"], #new-password[aria-invalid="true"], #new-password-confirm[aria-invalid="true"], #change-code[aria-invalid="true"] { border-color: var(--danger-solid); box-shadow: var(--ring-danger); }
.admin-auth-secret { position: relative; display: block; }
#password, #new-password, #new-password-confirm { padding-right: 44px; }
#change-code { font-family: var(--font-mono); letter-spacing: 0.2em; }
#password-toggle, #new-password-toggle, #new-password-confirm-toggle { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-6); background: transparent; box-shadow: none; color: var(--gray-700); }
#password-toggle::before, #new-password-toggle::before, #new-password-confirm-toggle::before { content: ""; position: absolute; inset: -6px; }
#password-toggle:hover, #new-password-toggle:hover, #new-password-confirm-toggle:hover { background: var(--wash-1); color: var(--text-1); }
:is(#password-toggle, #new-password-toggle, #new-password-confirm-toggle) > .glyph { width: 16px; height: 16px; }
:is(#password-toggle, #new-password-toggle, #new-password-confirm-toggle)[aria-pressed="false"] > .glyph-pub-eye-off, :is(#password-toggle, #new-password-toggle, #new-password-confirm-toggle)[aria-pressed="true"] > .glyph-pub-eye { display: none; }

/* The code: one field over six boxes, 40 by 48 with 8 between them and 8
   more after the third (44 by 52, 6 and 6 on phones). The box the next
   digit goes to wears the focus ring; a refused code turns all six red,
   which wins over that ring. */
.admin-auth-code { order: 3; display: flex; flex-direction: column; margin-top: 32px; }
.admin-auth-code #totp-code-hint { display: flex; flex-direction: row; align-items: flex-start; gap: 6px; margin: 8px 0 0; color: var(--danger-fg); }
.admin-auth-code #totp-code-hint::before { margin-top: 0; }
.admin-auth-code #totp-code-hint:not([hidden]) + .admin-auth-help { display: none; }
.admin-auth-otp { position: relative; display: block; width: 288px; max-width: 100%; height: 48px; }
#totp-code { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 0 0 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font: 500 20px/48px var(--font-mono); letter-spacing: 0; text-align: left; }
#totp-code::selection { background: transparent; color: transparent; }
#totp-code:focus, #totp-code:focus-visible { outline: none; box-shadow: none; }
.admin-auth-boxes { position: absolute; inset: 0; display: flex; gap: 8px; pointer-events: none; }
.admin-auth-boxes > span { display: grid; flex: none; place-items: center; width: 40px; height: 48px; border: 1px solid var(--gray-200); border-radius: var(--r-8); background: var(--gray-0); box-shadow: var(--shadow-control); color: var(--text-1); font: 500 20px/28px var(--font-mono); transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); }
.admin-auth-boxes > span:nth-child(4) { margin-left: 8px; }
.admin-auth-otp:hover .admin-auth-boxes > span { border-color: var(--gray-300); }
#totp-code:focus:not([aria-invalid="true"]) + .admin-auth-boxes > .is-next { border-color: var(--violet-600); box-shadow: var(--ring-input); }
#totp-code[aria-invalid="true"] + .admin-auth-boxes > span { border-color: var(--danger-solid); box-shadow: var(--ring-danger); }
.admin-auth-help { margin: 8px 0 0; color: var(--text-3); font-size: 13px; line-height: 20px; }
#sign-in > .admin-auth-submit { order: 4; margin-top: 32px; }
#sign-in-submit { width: 100%; height: 40px; min-height: 0; border-radius: var(--r-8); font: 500 16px/24px var(--font-sans); }

/* 先绑定两步验证: who signed in, why, three numbered steps, 开始绑定 as
   the card's button and the way in to look only under it. */
#bind-step > .admin-auth-intro { order: 0; }
.admin-auth-steps { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.admin-auth-steps > li { display: flex; gap: 12px; color: var(--text-1); font-size: 14px; line-height: 22px; }
.admin-auth-n { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gray-100); color: var(--text-2); font: 500 12px/16px var(--font-sans); }
#bind-step > .admin-auth-bind-start { margin-top: 32px; }
#bind-start { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; border-radius: var(--r-8); background: var(--violet-600); box-shadow: var(--shadow-primary); color: #ffffff; font: 500 16px/24px var(--font-sans); text-decoration: none; }
#bind-start:hover { background: var(--violet-700); color: #ffffff; text-decoration: none; }
#bind-step > .admin-auth-bind-skip { margin-top: 12px; text-align: center; }
#bind-skip { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-8); color: var(--text-1); font: 500 14px/20px var(--font-sans); text-decoration: none; }
#bind-skip:hover { background: var(--wash-1); color: var(--text-1); text-decoration: none; }
.admin-auth-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--admin-text-3); font-size: 13px; line-height: 20px; }
@media (max-width: 767px) {
  .admin-auth-head { height: 52px; padding-right: 8px; }
  .admin-auth-head .admin-id { gap: 8px; padding-left: 8px; }
  .admin-auth-head .admin-label { margin-left: 0; padding-left: 8px; }
  .admin-auth-head .language-control.language-chip { width: auto; height: 44px; padding: 0 12px 0 10px; }
  .admin-auth-head .language-control.language-chip > select { position: static; width: auto; height: 44px; opacity: 1; }
  .admin-auth-main { justify-content: flex-start; padding: 32px 16px 48px; }
  .admin-auth-card { padding: 24px 20px; }
  #login, #password, #new-password, #new-password-confirm, #change-code { font-size: 16px; }
  .admin-auth-otp { width: 300px; height: 52px; }
  #totp-code { font-size: 16px; line-height: 52px; }
  .admin-auth-boxes { gap: 6px; }
  .admin-auth-boxes > span { width: 44px; height: 52px; }
  .admin-auth-boxes > span:nth-child(4) { margin-left: 6px; }
  #bind-skip { height: 44px; }
  .admin-auth-note { text-align: center; }
}