:root { --auth-red:#d80b12; --auth-dark:#242424; --auth-muted:#606064; --auth-border:#e6e6e6; }
* { box-sizing: border-box; }
html { min-height:100%; }
body.auth-page { min-height:100vh; margin:0; font-family:"Segoe UI",Arial,sans-serif; color:var(--auth-dark); background:linear-gradient(125deg,#fafafa 0%,#f4f4f4 65%,#f7f7f7 100%); }
body.auth-page::before { content:""; position:fixed; inset:0; background:url("../assets/auth-pattern.svg") repeat; background-size:480px 480px; opacity:.43; pointer-events:none; }
.auth-shell { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,440px); align-items:center; gap:clamp(40px,7vw,120px); max-width:1160px; min-height:100vh; margin:0 auto; padding:55px clamp(24px,5vw,72px); }
.auth-story { align-self:stretch; display:flex; flex-direction:column; justify-content:center; max-width:480px; }
.auth-brand { display:inline-flex; width:fit-content; align-items:center; gap:12px; color:var(--auth-dark); text-decoration:none; font-weight:800; font-size:1.15rem; }
.auth-brand img { width:58px; height:58px; object-fit:contain; }
.auth-intro { margin:56px 0 auto; padding-top:clamp(18px,8vh,88px); }
.auth-eyebrow { margin:0 0 15px; color:var(--auth-red); font-size:.73rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.auth-intro h1 { max-width:430px; margin:0 0 17px; font-size:clamp(2.45rem,4.4vw,4.2rem); line-height:1.08; letter-spacing:-.045em; font-weight:800; }
.auth-intro p:not(.auth-eyebrow) { max-width:340px; margin:0; color:var(--auth-muted); line-height:1.65; font-size:.94rem; }
.auth-links { display:flex; flex-wrap:wrap; gap:12px 23px; margin:29px 0 56px; }
.auth-links a { color:var(--auth-dark); text-decoration:none; border-bottom:2px solid var(--auth-red); padding-bottom:3px; font-size:.9rem; font-weight:700; }
.auth-links a:hover { color:var(--auth-red); }
.auth-card { width:100%; padding:clamp(27px,4vw,44px); background:#fff; border:1px solid #ededed; border-radius:7px; box-shadow:0 21px 55px rgba(25,25,25,.12); }
.auth-card h2 { margin:0 0 10px; font-size:2rem; line-height:1.14; letter-spacing:-.025em; }
.auth-card-description { margin:0 0 27px; color:var(--auth-muted); font-size:.9rem; line-height:1.6; }
.auth-form { display:grid; gap:17px; }
.auth-field { display:grid; gap:7px; }
.auth-field label { font-size:.78rem; font-weight:700; }
.auth-field input { width:100%; height:49px; padding:0 15px; font:inherit; font-size:.86rem; border:1px solid #e4e4e4; border-radius:4px; background:#f6f6f6; color:var(--auth-dark); outline:none; }
.auth-field input::placeholder { color:#8f8f8f; }
.auth-field input:focus { border-color:var(--auth-red); background:#fff; box-shadow:0 0 0 3px rgba(216,11,18,.11); }
.auth-password-control { position:relative; }
.auth-password-control input { padding-right:59px; }
.auth-password-toggle { position:absolute; top:50%; right:3px; display:grid; place-items:center; width:44px; height:44px; transform:translateY(-50%); border:0; border-radius:4px; background:transparent; color:#5c5655; cursor:pointer; }
.auth-password-toggle:hover { color:var(--auth-red); background:#fcebec; }
.auth-password-toggle svg { width:21px; height:21px; }
.auth-password-toggle .auth-eye-closed { display:none; }
.auth-password-toggle[aria-pressed="true"] .auth-eye-open { display:none; }
.auth-password-toggle[aria-pressed="true"] .auth-eye-closed { display:block; }
.auth-help { color:var(--auth-muted); font-size:.72rem; line-height:1.45; }
.auth-form-message { margin:0; font-size:.78rem; font-weight:600; line-height:1.4; }
.auth-form-message:empty { display:none; }
.auth-form-message.error,.auth-form-message[data-status="error"] { padding:11px; color:#9f090f; background:#fff1f1; border-radius:4px; }
.auth-form-message.success,.auth-form-message[data-status="success"] { padding:11px; color:#186637; background:#ecf7ef; border-radius:4px; }
.auth-button { width:100%; min-height:48px; padding:10px 16px; color:#fff; background:var(--auth-red); border:0; border-radius:4px; box-shadow:0 9px 18px rgba(216,11,18,.16); font:inherit; font-size:.87rem; font-weight:700; cursor:pointer; }
.auth-button:hover:not(:disabled) { background:#b90008; }
.auth-button:disabled { opacity:.65; cursor:wait; }
.auth-footer { margin:20px 0 0; color:var(--auth-muted); font-size:.78rem; line-height:1.5; }
.auth-footer a,.auth-back { color:var(--auth-red); font-weight:700; text-decoration:none; }
.auth-footer a:hover,.auth-back:hover { text-decoration:underline; }
.auth-back { display:inline-block; margin-top:17px; font-size:.78rem; }
.auth-page a:focus-visible,.auth-page button:focus-visible { outline:3px solid rgba(216,11,18,.3); outline-offset:3px; }
@media (max-width:800px) { .auth-shell { grid-template-columns:1fr; gap:28px; max-width:570px; padding:28px 22px 55px; } .auth-story { max-width:none; } .auth-intro { margin:23px 0 0; padding:0; } .auth-intro h1 { font-size:2.25rem; } .auth-links { margin:15px 0 0; } .auth-card { padding:29px 26px; } }
@media (max-width:430px) { .auth-shell { padding:20px 15px 42px; } .auth-brand img { width:46px; height:46px; } .auth-intro h1 { font-size:1.95rem; } .auth-card { padding:25px 21px; } }

/* Operations authenticator step */
.auth-page [hidden] { display:none !important; }
#operations-mfa-step { display:grid; gap:12px; }
#operations-mfa-step h3,#operations-mfa-recovery h3 { margin:0 0 8px; }
#operations-mfa-setup img { display:block; margin:10px auto; max-width:100%; height:auto; }
#operations-mfa-key { word-break:break-all; user-select:all; }
#operations-mfa-recovery pre { padding:14px; white-space:pre-wrap; overflow-wrap:anywhere; background:#f6f6f6; border:1px solid #ddd; }