@layer custom {
  .auth-page {
    --auth-surface: light-dark(#fff, #18202f);
    --auth-canvas: light-dark(#f5f6fa, #111722);
    --auth-ink: light-dark(#202b43, #edf1fa);
    --auth-muted: light-dark(#66718a, #a5b1c8);
    --auth-line: light-dark(#e1e5ef, #344157);
    --auth-blue: light-dark(#355cc9, #a8bcff);
    --auth-soft: light-dark(#edf1fe, #243354);
    margin: 0;
    color: var(--auth-ink);
    background: var(--auth-canvas);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .auth-shell { max-inline-size: 1184px; margin-inline: auto; padding: 0 40px; }
  .auth-header { display: flex; justify-content: space-between; align-items: center; min-block-size: 112px; gap: 20px; }
  .auth-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--auth-ink); font-size: 20px; font-weight: 650; text-decoration: none; letter-spacing: -.7px; }
  .auth-brand-mark { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 9px; background: var(--auth-ink); color: var(--auth-surface); font-size: 26px; line-height: 1; }
  .auth-brand-slash { color: var(--auth-blue); margin-inline-start: 2px; }
  .auth-header-actions { display: flex; align-items: center; gap: 26px; }
  .auth-header-link { color: var(--auth-muted); text-decoration: none; font-size: 13px; }
  .auth-header-link:hover { color: var(--auth-blue); }
  .auth-theme { display: grid; place-items: center; background: transparent; border: 1px solid var(--auth-line); border-radius: 50%; color: var(--auth-muted); inline-size: 36px; block-size: 36px; cursor: pointer; }
  .auth-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .auth-skip { position: fixed; inset-block-start: -100px; inset-inline-start: 20px; z-index: 10; padding: 12px 20px; background: var(--auth-surface); }
  .auth-skip:focus { inset-block-start: 12px; }
  .auth-page :focus-visible { outline: 3px solid var(--auth-blue); outline-offset: 4px; }
  .auth-eyebrow { display: block; font-size: 10px; font-weight: 650; letter-spacing: 1.5px; text-transform: uppercase; color: var(--auth-muted); }
  .auth-intro { padding-block: 52px 54px; }
  .auth-intro .auth-eyebrow { display: flex; align-items: center; gap: 9px; }
  .auth-status-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--auth-blue); }
  .auth-intro h1 { font-size: clamp(42px, 5.7vw, 66px); line-height: 1.08; letter-spacing: -3px; font-weight: 620; margin-block: 22px 20px; }
  .auth-intro h1 span { color: var(--auth-blue); }
  .auth-intro p { color: var(--auth-muted); font-size: 15px; line-height: 1.8; margin: 0; }
  .auth-catalog-heading { display: flex; justify-content: space-between; align-items: center; margin-block-end: 18px; }
  .auth-catalog-heading h2 { font-size: 16px; letter-spacing: -.2px; margin: 0; font-weight: 600; }
  .auth-catalog-heading > span { color: var(--auth-muted); font-size: 11px; }
  .auth-catalog-heading > span > span { margin-inline-start: 14px; font-size: 18px; }
  .auth-catalog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .auth-method-card { --bs-card-bg: var(--auth-surface); color: var(--auth-ink); text-decoration: none; padding: 24px; min-block-size: 237px; border: 1px solid var(--auth-line); border-radius: 14px; box-shadow: 0 3px 8px #14254b03; transition: border-color 140ms, transform 140ms; }
  .auth-method-card:hover { color: var(--auth-ink); border-color: var(--auth-blue); transform: translateY(-3px); }
  .auth-method-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 29px; }
  .auth-method-icon { inline-size: 38px; block-size: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--auth-soft); color: var(--auth-blue); }
  .auth-method-icon[data-tone="neutral"] { background: var(--auth-canvas); color: var(--auth-muted); }
  .auth-method-tag { color: var(--auth-muted); font-size: 10px; }
  .auth-method-card h3 { font-size: 16px; font-weight: 630; letter-spacing: -.3px; margin-block: 0 9px; }
  .auth-method-card p { margin: 0; color: var(--auth-muted); font-size: 12px; line-height: 1.7; }
  .auth-method-bottom { display: flex; align-items: center; justify-content: space-between; color: var(--auth-blue); font-size: 11px; margin-block-start: auto; padding-block-start: 25px; }
  .auth-method-bottom .auth-icon { inline-size: 17px; block-size: 17px; }
  .auth-catalog-note { display: flex; gap: 14px; padding: 24px 0; color: var(--auth-muted); }
  .auth-catalog-note .auth-icon { margin-block-start: 3px; color: var(--auth-blue); }
  .auth-catalog-note p { font-size: 12px; line-height: 1.8; margin: 0; }
  .auth-catalog-note strong { color: var(--auth-ink); font-weight: 550; }
  .auth-footer { display: flex; justify-content: space-between; gap: 18px; align-items: center; font-size: 10px; color: var(--auth-muted); padding-block: 30px; margin-block-start: 32px; border-block-start: 1px solid var(--auth-line); }
  .auth-footer a { color: inherit; text-decoration: none; }
  .auth-help { color: inherit; background: transparent; border: 0; padding: 0; font: inherit; cursor: pointer; }
  #login-help { max-inline-size: min(480px, calc(100vw - 32px)); font-size: 14px; }
  #login-help .dialog-title { font-size: 21px; }
  .auth-footer .auth-icon { inline-size: 14px; block-size: 14px; margin-inline-start: 5px; }
  .auth-workspace { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 34px; margin-block: 40px 68px; min-block-size: 650px; }
  .auth-aside { display: flex; flex-direction: column; padding-block: 12px; }
  .auth-back { display: inline-flex; align-items: center; gap: 8px; color: var(--auth-muted); text-decoration: none; font-size: 12px; }
  .auth-back:hover { color: var(--auth-blue); }
  .auth-back .auth-icon { inline-size: 16px; block-size: 16px; }
  .auth-aside-intro { margin-block: 54px 28px; }
  .auth-aside-intro .auth-eyebrow { font-size: 9px; letter-spacing: 1.2px; }
  .auth-aside-intro h2 { font-size: 38px; font-weight: 610; line-height: 1.12; letter-spacing: -1.7px; margin-block: 16px; }
  .auth-aside-intro p { font-size: 13px; color: var(--auth-muted); line-height: 1.7; }
  .auth-method-nav { display: grid; gap: 3px; margin-inline-start: -12px; }
  .auth-method-nav a { display: flex; align-items: center; gap: 11px; border-radius: 8px; padding: 10px 12px; color: var(--auth-muted); text-decoration: none; font-size: 12px; }
  .auth-method-nav a .auth-icon { inline-size: 17px; block-size: 17px; }
  .auth-method-nav a[aria-current="page"] { color: var(--auth-blue); background: var(--auth-soft); font-weight: 600; }
  .auth-method-nav a:hover { color: var(--auth-blue); }
  .auth-nav-preview { margin-inline-start: auto; font-size: 9px; font-weight: 400; opacity: .8; }
  .auth-aside-foot { display: flex; align-items: center; gap: 8px; color: var(--auth-muted); font-size: 10px; margin-block-start: auto; padding-block-start: 30px; }
  .auth-aside-foot .auth-icon { inline-size: 15px; block-size: 15px; }
  .auth-form-card { --bs-card-bg: var(--auth-surface); background: var(--auth-surface); border: 1px solid var(--auth-line); border-radius: 20px; justify-content: center; padding: 56px 58px; box-shadow: 0 12px 38px #14254b04; }
  .auth-form-inner { inline-size: 100%; max-inline-size: 390px; margin-inline: auto; }
  .auth-form-symbol { display: grid; place-items: center; inline-size: 48px; block-size: 48px; background: var(--auth-soft); color: var(--auth-blue); border-radius: 14px; margin-block-end: 29px; }
  .auth-form-symbol .auth-icon { inline-size: 24px; block-size: 24px; }
  .auth-form-card h1 { font-size: 30px; font-weight: 600; letter-spacing: -1.1px; line-height: 1.2; margin-block: 12px; }
  .auth-form-lead { color: var(--auth-muted); font-size: 13px; line-height: 1.8; margin-block-end: 26px; }
  .auth-form { display: grid; gap: 21px; }
  .auth-form .form-field { display: grid; gap: 8px; }
  .auth-form .form-label { font-size: 12px; font-weight: 550; color: var(--auth-ink); margin: 0; }
  .auth-form .form-control { color: var(--auth-ink); background: var(--auth-surface); border-color: var(--auth-line); border-radius: 8px; min-block-size: 46px; padding: 11px 14px; font-size: 13px; }
  .auth-form .form-control::placeholder { color: var(--auth-muted); opacity: .72; }
  .auth-form .form-text { font-size: 11px; line-height: 1.6; color: var(--auth-muted); margin: 0; }
  .auth-password { position: relative; }
  .auth-password input { padding-inline-end: 46px !important; }
  .auth-password button { position: absolute; inset-inline-end: 6px; inset-block-start: 5px; inline-size: 36px; block-size: 36px; display: grid; place-items: center; color: var(--auth-muted); background: transparent; border: 0; border-radius: 6px; }
  .auth-password button[aria-pressed="true"] { color: var(--auth-blue); }
  .auth-submit { display: flex; justify-content: space-between; align-items: center; inline-size: 100%; min-block-size: 46px; border-radius: 8px; font-size: 12px; font-weight: 550; margin-block-start: 6px; padding: 12px 16px; text-decoration: none; }
  .auth-submit:disabled { opacity: .48; cursor: not-allowed; }
  .auth-code-input { text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .28em; font-size: 20px !important; }
  .auth-preview-note { display: flex; gap: 10px; color: var(--auth-muted); font-size: 11px; line-height: 1.7; padding: 12px 14px; background: var(--auth-canvas); border: 1px dashed var(--auth-line); border-radius: 8px; margin-block-end: 24px; }
  .auth-preview-note .auth-icon { inline-size: 16px; block-size: 16px; margin-block-start: 2px; }
  .auth-preview-note strong { font-weight: 550; color: var(--auth-ink); }
  .auth-alert { font-size: 12px; line-height: 1.7; margin-block-end: 20px; }
  .auth-form-foot { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--auth-muted); font-size: 10px; border-block-start: 1px solid var(--auth-line); padding-block-start: 22px; margin-block-start: 26px; }
  .auth-form-foot .auth-icon { inline-size: 13px; block-size: 13px; }
  .auth-inline-link { display: block; margin-block-start: 20px; text-align: center; font-size: 12px; color: var(--auth-blue); }
  .auth-selection-intro { text-align: center; padding-block: 48px 34px; }
  .auth-selection-intro h1 { font-size: 36px; font-weight: 580; letter-spacing: -1.4px; margin-block: 15px 10px; }
  .auth-selection-intro p { color: var(--auth-muted); font-size: 15px; margin: 0; }
  .auth-selection { --bs-card-bg: var(--auth-surface); background: var(--auth-surface); border: 1px solid var(--auth-line); border-radius: 18px; padding: 44px 48px; min-block-size: 474px; }
  .auth-selection-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 27px; }
  .auth-selection-heading h2 { font-size: 20px; font-weight: 560; letter-spacing: -.5px; margin-block: 9px 0; }
  .auth-selection-preview { font-size: 10px; color: var(--auth-muted); border: 1px solid var(--auth-line); border-radius: 100px; padding: 6px 10px; }
  .auth-person-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
  .auth-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; border: 1px solid var(--auth-line); border-radius: 10px; padding: 22px 10px 16px; text-decoration: none; color: var(--auth-ink); transition: border-color 140ms, background 140ms; }
  .auth-person:hover { border-color: var(--auth-blue); background: var(--auth-canvas); color: var(--auth-ink); }
  .auth-person strong { font-size: 12px; font-weight: 550; }
  .auth-avatar { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; font-size: 16px; font-weight: 650; color: var(--auth-blue); background: var(--auth-soft); }
  .auth-avatar[data-tone="violet"] { color: light-dark(#7350b8, #d4b8ff); background: light-dark(#eee7fb, #3e2c5b); }
  .auth-avatar[data-tone="green"] { color: light-dark(#247e76, #a0ddd5); background: light-dark(#dff2ed, #204741); }
  .auth-avatar[data-tone="rose"] { color: light-dark(#ac4d77, #f3b9d4); background: light-dark(#fae4ef, #512f42); }
  .auth-person-requirement { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--auth-muted); }
  .auth-person-requirement .auth-icon { inline-size: 12px; block-size: 12px; }
  .auth-selection-note { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--auth-muted); font-size: 11px; line-height: 1.7; margin-block: 24px 0; }
  .auth-selection-note .auth-icon { inline-size: 15px; block-size: 15px; }
  .auth-selection-back { margin-block-start: 23px; }
  .auth-selected-inner { max-inline-size: 440px; inline-size: 100%; margin-inline: auto; }
  .auth-selected-person { display: flex; flex-direction: column; align-items: center; margin-block: 28px; }
  .auth-avatar-large { inline-size: 72px; block-size: 72px; font-size: 23px; margin-block-end: 20px; }
  .auth-selected-person h2 { font-size: 22px; font-weight: 550; letter-spacing: -.6px; margin-block: 9px 0; }
  .auth-success { --bs-card-bg: var(--auth-surface); background: var(--auth-surface); max-inline-size: 560px; margin: 64px auto 110px; padding: 52px; border: 1px solid var(--auth-line); border-radius: 18px; text-align: center; }
  .auth-success-icon { display: grid; place-items: center; margin: 0 auto 25px; inline-size: 64px; block-size: 64px; border-radius: 50%; color: light-dark(#247e76, #a0ddd5); background: light-dark(#dff2ed, #204741); }
  .auth-success h1 { font-size: 30px; font-weight: 580; letter-spacing: -1px; margin-block: 12px; }
  .auth-success p { color: var(--auth-muted); font-size: 13px; line-height: 1.8; margin-block-end: 28px; }
  .auth-inline-button { background: transparent; border: 0; color: var(--auth-muted); font-size: 12px; margin-block-start: 24px; text-decoration: underline; }
  @media (max-width: 980px) {
    .auth-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth-workspace { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; }
    .auth-form-card { padding: 38px 30px; }
    .auth-method-top { margin-block-end: 20px; }
  }
  @media (max-width: 700px) {
    .auth-shell { padding-inline: 20px; }
    .auth-header { min-block-size: 84px; }
    .auth-header-actions { gap: 13px; }
    .auth-header-link { font-size: 11px; }
    .auth-intro { padding-block: 30px 38px; }
    .auth-intro h1 { letter-spacing: -1.8px; }
    .auth-desktop-break { display: none; }
    .auth-catalog { gap: 12px; }
    .auth-method-card { padding: 18px; min-block-size: 230px; }
    .auth-method-card h3 { font-size: 15px; }
    .auth-method-tag { font-size: 9px; }
    .auth-footer { flex-wrap: wrap; font-size: 9px; gap: 12px; margin-block-start: 22px; }
    .auth-footer > span:nth-child(2) { display: none; }
    .auth-workspace { display: block; margin-block: 16px 36px; min-block-size: 0; }
    .auth-aside { padding: 0; }
    .auth-aside-intro, .auth-aside-foot, .auth-method-nav { display: none; }
    .auth-aside .auth-back { margin-block-end: 22px; }
    .auth-form-card { padding: 32px 24px; border-radius: 14px; }
    .auth-form-card h1 { font-size: 28px; }
    .auth-selection-intro { padding-block: 28px; }
    .auth-selection-intro h1 { font-size: 30px; }
    .auth-selection { padding: 28px 20px; border-radius: 14px; }
    .auth-person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .auth-selection-heading { display: block; }
    .auth-selection-preview { display: inline-block; margin-block-start: 14px; }
    .auth-selection-note { align-items: start; }
    .auth-success { padding: 32px 24px; margin-block: 30px 60px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .auth-method-card, .auth-person { transition: none; }
    .auth-method-card:hover { transform: none; }
  }
}

@layer custom{.auth-page input:is([inputmode="numeric"],[type="number"]){text-align:center}}

@layer custom {
  .auth-account-card { max-inline-size: 620px; margin-inline: auto; }
}

@layer custom { .device-agent { overflow-wrap: anywhere; font-size: .8rem; } }

@layer custom {
  .device-section { min-block-size: 0; margin-block: 24px; }
  .device-card { padding: 24px; margin-block: 16px; }
  .device-card form { display: inline-block; margin-inline-end: 12px; }
}