:root { --navy:#17324d; --yellow:#ffc328; --orange:#f78e36; --burnt:#e06633; --cyan:#29cef6; }
* { box-sizing: border-box; }
html, body, form { min-height: 100%; margin: 0; }
body { font-family: Inter, "Segoe UI", Arial, sans-serif; background: #f4f7f9; color: #263e52; }
.aux-login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.08fr) minmax(430px, .92fr); }
.aux-login-showcase { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 5vw, 4.5rem); color: #fff; background: radial-gradient(circle at 78% 17%, rgba(41,206,246,.30), transparent 25%), radial-gradient(circle at 15% 80%, rgba(255,195,40,.18), transparent 27%), linear-gradient(145deg, #10283d, #1b4866); }
.aux-login-showcase::before { content:""; position:absolute; inset:0; opacity:.08; background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom right, #000, transparent 80%); }
.aux-login-showcase > * { position: relative; z-index: 1; }
.aux-login-brand { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.aux-login-brand > .aux-login-brand-logo { width:clamp(150px,28vw,290px); height:78px; display:flex; align-items:center; justify-content:flex-start; overflow:hidden; }
.aux-login-brand > .aux-login-brand-logo img { display:block; width:auto; height:auto; max-width:100%; max-height:74px; object-fit:contain; object-position:left center; }
.aux-login-brand strong, .aux-login-brand small { display:block; }
.aux-login-brand strong { letter-spacing:.12em; font-size:1.15rem; }
.aux-login-brand small { color:rgba(255,255,255,.6); font-size:.72rem; }
.aux-login-copy { max-width:720px; margin:5rem 0 3rem; }
.aux-login-eyebrow { display:inline-block; color:var(--burnt); font-size:.68rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.aux-login-showcase .aux-login-eyebrow { color:#ffd668; }
.aux-login-copy h1 { max-width:680px; margin:.8rem 0 1rem; font-size:clamp(2.4rem, 5vw, 4.8rem); line-height:1.03; letter-spacing:-.04em; }
.aux-login-copy p { max-width:650px; margin:0; color:rgba(255,255,255,.7); font-size:clamp(.95rem, 1.4vw, 1.12rem); line-height:1.7; }
.aux-login-features { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.aux-login-features article { min-height:126px; padding:1rem; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.055); backdrop-filter:blur(8px); }
.aux-login-features i { color:var(--cyan); margin-bottom:.7rem; }
.aux-login-features strong, .aux-login-features span { display:block; }
.aux-login-features strong { font-size:.82rem; }
.aux-login-features span { margin-top:.3rem; color:rgba(255,255,255,.55); font-size:.7rem; line-height:1.45; }
.aux-login-palette { position:absolute; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(4,1fr); height:7px; }
.aux-login-palette span:nth-child(1){background:var(--yellow)} .aux-login-palette span:nth-child(2){background:var(--orange)} .aux-login-palette span:nth-child(3){background:var(--burnt)} .aux-login-palette span:nth-child(4){background:var(--cyan)}
.aux-login-form-section { display:grid; place-items:center; padding:2rem; background:radial-gradient(circle at 90% 10%, rgba(41,206,246,.10), transparent 24%), #f7f9fb; }
.aux-login-form-wrap { width:100%; max-width:430px; padding:clamp(1.2rem, 3vw, 2rem); }
.aux-login-mobile-brand { display:none; align-items:center; gap:.5rem; margin-bottom:2rem; color:var(--navy); }
.aux-login-mobile-brand img { display:block; width:auto; height:auto; max-width:min(190px,58vw); max-height:58px; object-fit:contain; }
.aux-login-form-wrap h2 { margin:.55rem 0 .55rem; color:var(--navy); font-size:clamp(1.65rem, 3vw, 2.2rem); line-height:1.18; letter-spacing:-.025em; }
.aux-login-intro { margin:0 0 1.6rem; color:#788795; line-height:1.55; font-size:.86rem; }
.aux-login-message { display:flex; align-items:flex-start; gap:.55rem; margin-bottom:1rem; padding:.75rem .8rem; border:1px solid #efc9c2; border-radius:10px; background:#ffebe8; color:#9e4337; font-size:.78rem; line-height:1.45; }
.aux-login-message i { margin-top:.15rem; }
.aux-login-field { margin-bottom:1rem; }
.aux-login-field > label { display:block; margin-bottom:.4rem; color:#40566a; font-size:.73rem; font-weight:800; }
.aux-login-field > div { display:flex; align-items:center; border:1px solid #ccd8df; border-radius:11px; background:#fff; transition:.18s; }
.aux-login-field > div:focus-within { border-color:var(--cyan); box-shadow:0 0 0 4px rgba(41,206,246,.13); }
.aux-login-field > div > i { margin-left:.85rem; color:#91a0ad; }
.aux-login-field input { flex:1; min-width:0; border:0; outline:0; padding:.78rem .75rem; background:transparent; color:#263e52; font-size:.88rem; }
.aux-login-field button { width:42px; align-self:stretch; border:0; background:transparent; color:#80909d; }
.aux-login-button { width:100%; margin-top:.35rem; padding:.78rem; border:0; border-radius:11px; background:linear-gradient(135deg,var(--burnt),var(--orange)); color:#fff; font-weight:800; box-shadow:0 12px 28px rgba(224,102,51,.23); }
.aux-login-button:hover, .aux-login-button:focus { color:#fff; transform:translateY(-1px); box-shadow:0 15px 32px rgba(224,102,51,.29); }
.aux-login-security { display:flex; justify-content:center; align-items:center; gap:.45rem; margin-top:1rem; color:#83919d; font-size:.69rem; }
.aux-login-security i { color:#29a9ca; }
.aux-login-form-wrap footer { margin-top:3rem; text-align:center; color:#a0abb4; font-size:.65rem; }
@media(max-width:980px){.aux-login-page{grid-template-columns:1fr}.aux-login-showcase{display:none}.aux-login-form-section{min-height:100vh}.aux-login-mobile-brand{display:flex}}
@media(max-width:480px){.aux-login-form-section{padding:1rem}.aux-login-form-wrap{padding:.5rem}.aux-login-form-wrap footer{margin-top:2rem}}


.aux-swal-html { color:#5f6368; line-height:1.55; }
.aux-swal-html section, .aux-swal-html p { margin:0 0 .45rem; }
.aux-swal-html section:last-child, .aux-swal-html p:last-child { margin-bottom:0; }
.aux-swal-html strong, .aux-swal-html b { color:#17324d; font-weight:800; }