/* Sign-in, 2FA, activation, password reset and state pages in the graphite style of the trader and merchant
   cabinets. Self-contained: it does not depend on html[data-axl-theme], which only exists inside a cabinet.
   The light palette follows the appearance saved in the cabinet (html[data-axl-auth-theme], set by
   axl-theme-init-v2.js). */
:root{
  --ag-bg:#111315;--ag-surface:#1b1e22;--ag-soft:#292d33;--ag-text:#f3f4f6;--ag-muted:#adb3bd;--ag-border:#373e47;
  --ag-button:#f3f4f6;--ag-button-text:#17191c;--ag-success:#62d79c;--ag-danger:#ff91a1;--ag-danger-bg:#39252c;
  --ag-warning:#edba68;--ag-warning-bg:#342d20;--ag-success-bg:#193529;--ag-shadow:0 12px 34px #00000030;--ag-scheme:dark;
}
html[data-axl-auth-theme=light]{
  --ag-bg:#f3f4f6;--ag-surface:#fff;--ag-soft:#e5e7eb;--ag-text:#17191c;--ag-muted:#565e6b;--ag-border:#c6cbd3;
  --ag-button:#202327;--ag-button-text:#fff;--ag-success:#176b46;--ag-danger:#af2945;--ag-danger-bg:#fce7ed;
  --ag-warning:#805a15;--ag-warning-bg:#fff4d9;--ag-success-bg:#e0f4e9;--ag-shadow:0 12px 34px #0000000f;--ag-scheme:light;
}

/* ---------- shared page surface ---------- */
.auth-page,.totp-page,.state-page{
  --accent:var(--ag-text);--text-primary:var(--ag-text);--text-secondary:var(--ag-muted);
  --surface:var(--ag-surface);--border:var(--ag-border);--accent-soft:var(--ag-soft);
  background:var(--ag-bg);color:var(--ag-text);color-scheme:var(--ag-scheme);
}
body:has(.auth-page),body:has(.totp-page),body:has(.state-page){background:var(--ag-bg)}
:is(.auth-page,.totp-page,.state-page) .eyebrow{color:var(--ag-muted)}
:is(.auth-page,.totp-page,.state-page) :is(h1,h2){color:var(--ag-text)}
:is(.auth-page,.totp-page,.state-page) p{color:var(--ag-muted)}

/* brand: the wolf mark used in the cabinets */
:is(.auth-page,.totp-page) .brand-mark{--brand-text:var(--ag-text);gap:12px}
:is(.auth-page,.totp-page) .brand-symbol{
  width:54px;height:38px;border-radius:0;transform:none;overflow:visible;flex:none;background:var(--ag-text);
  -webkit-mask:url('/assets/axl-dog-transparent-v3.png') center/contain no-repeat;mask:url('/assets/axl-dog-transparent-v3.png') center/contain no-repeat;
}
:is(.auth-page,.totp-page) .brand-symbol span{display:none}
:is(.auth-page,.totp-page) .brand-word,:is(.auth-page,.totp-page) .brand-word span{color:var(--ag-text)}

/* buttons, inputs */
:is(.auth-page,.totp-page,.state-page) .primary-button{
  color:var(--ag-button-text);background:var(--ag-button);border-color:var(--ag-button);box-shadow:none;
}
:is(.auth-page,.totp-page,.state-page) .primary-button:hover:not(:disabled){filter:none;opacity:.87;transform:none}
:is(.auth-page,.totp-page,.state-page) .primary-button:disabled{opacity:.6}
:is(.auth-page,.totp-page) .button-spinner{border-color:color-mix(in srgb,var(--ag-button-text) 35%,transparent);border-top-color:var(--ag-button-text)}
:is(.auth-page,.totp-page) .text-button{color:var(--ag-muted)}
:is(.auth-page,.totp-page) .text-button:hover{color:var(--ag-text)}
:is(.auth-page,.totp-page) .field-label{color:var(--ag-text)}
:is(.auth-page,.totp-page) .input-shell{color:var(--ag-muted);background:var(--ag-bg);border:1px solid var(--ag-border)}
:is(.auth-page,.totp-page) .input-shell:focus-within{
  color:var(--ag-text);background:var(--ag-bg);border-color:var(--ag-muted);box-shadow:0 0 0 3px color-mix(in srgb,var(--ag-text) 10%,transparent);
}
:is(.auth-page,.totp-page) .input-shell.invalid{border-color:var(--ag-danger)}
:is(.auth-page,.totp-page) input{color:var(--ag-text);caret-color:var(--ag-text)}
:is(.auth-page,.totp-page) .input-shell input{background:transparent}
:is(.auth-page,.totp-page) input::placeholder{color:var(--ag-muted);opacity:.75}
:is(.auth-page,.totp-page) input:-webkit-autofill,
:is(.auth-page,.totp-page) input:-webkit-autofill:hover,
:is(.auth-page,.totp-page) input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ag-text);box-shadow:0 0 0 1000px var(--ag-bg) inset;transition:background-color 9999s ease-out;
}
:is(.auth-page,.totp-page) .password-toggle{color:var(--ag-muted)}
:is(.auth-page,.totp-page) .password-toggle:hover{color:var(--ag-text);background:var(--ag-soft)}
:is(.auth-page,.totp-page) .form-error{color:var(--ag-danger)}
:is(.auth-page,.totp-page) :is(button,a,input):focus-visible{outline:2px solid var(--ag-text);outline-offset:3px}
:is(.auth-page,.totp-page) .input-shell input:focus-visible{outline:none}
:is(.auth-page,.totp-page) .notice{color:var(--ag-muted);background:var(--ag-surface);border-color:var(--ag-border)}
:is(.auth-page,.totp-page) .notice.error{color:var(--ag-danger);background:var(--ag-danger-bg);border-color:color-mix(in srgb,var(--ag-danger) 30%,var(--ag-border))}
:is(.auth-page,.totp-page) .notice.success{color:var(--ag-success);background:var(--ag-success-bg);border-color:color-mix(in srgb,var(--ag-success) 25%,var(--ag-border))}
.auth-page .session-expired-note{color:var(--ag-warning);background:var(--ag-warning-bg);border-color:color-mix(in srgb,var(--ag-warning) 30%,var(--ag-border))}

/* ---------- sign-in / activation / reset layout ---------- */
.auth-visual{background:var(--ag-bg);color:var(--ag-text);border-right:1px solid var(--ag-border)}
/* watermark instead of the crimson glow, as in the cabinet chart */
.auth-visual:before{
  filter:none;border-radius:0;background:var(--ag-text);opacity:.06;width:min(720px,92%);height:58%;right:-4%;bottom:9%;
  -webkit-mask:url('/assets/axl-brand-transparent-v3.png') center/contain no-repeat;mask:url('/assets/axl-brand-transparent-v3.png') center/contain no-repeat;
}
.auth-visual:after{display:none}
.auth-visual .brand-mark{--brand-text:var(--ag-text)}
.auth-copy .eyebrow{color:var(--ag-muted)}
.auth-copy h1{color:var(--ag-text)}
.auth-copy h1 em{color:var(--ag-muted)}
.auth-copy p{color:var(--ag-muted)}
.auth-flow{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--ag-surface);border:1px solid var(--ag-border)}
.auth-flow>div>span{color:var(--ag-text);background:var(--ag-soft)}
.auth-flow strong{color:var(--ag-text)}
.auth-flow small{color:var(--ag-muted)}
.auth-flow>i{background:var(--ag-border)}
.auth-proof{color:var(--ag-muted)}
.auth-proof i{background:var(--ag-success)}
.auth-panel{background:var(--ag-bg)}
.login-card{background:var(--ag-surface);border:1px solid var(--ag-border);border-radius:20px;box-shadow:var(--ag-shadow)}
.auth-mode{color:var(--ag-muted);background:var(--ag-bg);border-color:var(--ag-border)}
.auth-mode i{background:var(--ag-success);box-shadow:0 0 0 3px color-mix(in srgb,var(--ag-success) 18%,transparent)}
.auth-page .login-submit{box-shadow:none}
.auth-page .security-note{border-top-color:var(--ag-border);color:var(--ag-muted)!important}
.activation-trust-list>span{background:var(--ag-surface);border-color:var(--ag-border)}
.activation-trust-list svg{color:var(--ag-muted)}
.activation-trust-list small{color:var(--ag-muted)}
.activation-identity>div{background:var(--ag-bg);border-color:var(--ag-border)}
.activation-identity dt{color:var(--ag-muted)}
.activation-identity dd{color:var(--ag-text)}
.auth-page .password-policy>span{color:var(--ag-muted)}
.auth-page .password-policy>span svg{border-color:var(--ag-border)}
.auth-page .password-policy>span[data-valid=true]{color:var(--ag-success)}
.auth-page .password-policy>span[data-valid=true] svg{color:var(--ag-bg);background:var(--ag-success);border-color:var(--ag-success)}
.auth-page .activation-state>svg{color:var(--ag-muted)}
.auth-page .activation-success-icon{color:var(--ag-bg);background:var(--ag-success)}
@media (width<=820px){.auth-page{background:var(--ag-bg)}}

/* ---------- two-factor ---------- */
.totp-page{background:var(--ag-bg)}
.totp-card{background:var(--ag-surface);border:1px solid var(--ag-border);box-shadow:var(--ag-shadow)}
.totp-card .brand-mark{--brand-text:var(--ag-text)}
.totp-icon{color:var(--ag-text);background:var(--ag-soft)}
.totp-card h1{color:var(--ag-text)}
.otp-label{color:var(--ag-muted)}
.otp-label input{color:var(--ag-text);background:var(--ag-bg);border-color:var(--ag-border)}
.totp-card>small{color:var(--ag-muted)}
.totp-card>small strong{color:var(--ag-text)}

/* ---------- 403 / 404 ---------- */
.state-page>svg{color:var(--ag-muted)}

/* ---------- language switcher on these pages ---------- */
body:has(.auth-page,.totp-page,.state-page) .global-language-switcher{
  color:var(--ag-muted);background:var(--ag-surface);border-color:var(--ag-border);box-shadow:none;
}
body:has(.auth-page,.totp-page,.state-page) .global-language-switcher:hover{color:var(--ag-text);background:var(--ag-soft);border-color:var(--ag-muted)}

/* ---------- remember me ---------- */
.auth-page .auth-remember{display:flex;flex-direction:row;align-items:center;gap:8px;margin:2px 0 4px;color:var(--ag-muted);font-size:13px;line-height:1.4;cursor:pointer;user-select:none;width:fit-content}
.auth-page .auth-remember input[type=checkbox]{appearance:none;width:16px;height:16px;margin:0;flex:0 0 auto;border:1px solid var(--ag-border);border-radius:5px;background:var(--ag-bg);cursor:pointer;position:relative;transition:background-color .15s,border-color .15s}
.auth-page .auth-remember input[type=checkbox]:hover{border-color:var(--ag-muted)}
.auth-page .auth-remember input[type=checkbox]:checked{background:var(--ag-success);border-color:var(--ag-success)}
.auth-page .auth-remember input[type=checkbox]:checked::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--ag-bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.auth-page .auth-remember input[type=checkbox]:focus-visible{outline:2px solid var(--ag-success);outline-offset:2px}
.auth-page .auth-remember input[type=checkbox]{width:16px;height:16px;min-width:16px;min-height:16px;padding:0}