:root { --auth-font:"Be Vietnam Pro",sans-serif; --auth-ink:#111214; --auth-muted:#6c7078; --auth-line:#e3e4e7; }
* { box-sizing:border-box; }
body.auth-page { --auth-primary:#344057; --auth-primary-rgb:52,64,87; --auth-deep:#222b3b; --auth-glow:#8e98aa; margin:0; min-height:100vh; padding:clamp(20px,4vw,52px); display:flex; align-items:center; justify-content:center; color:var(--auth-ink); background:#eef1f6; font-family:var(--auth-font)!important; }
body.auth-page.auth-customer { --auth-primary:#138463; --auth-primary-rgb:19,132,99; --auth-deep:#075444; --auth-glow:#52c6a1; }
.auth-shell { position:relative; z-index:1; width:min(1080px,100%); min-height:640px; display:grid; grid-template-columns:56% 44%; border:1px solid rgba(16,24,40,.06); border-radius:20px; background:#fff; box-shadow:0 28px 80px rgba(16,24,40,.13); overflow:hidden; }
.auth-main { display:flex; align-items:center; padding:54px clamp(42px,6vw,76px); background:#fff; }
.auth-main-inner { width:100%; max-width:470px; margin:auto; }
.auth-kicker { display:inline-flex; align-items:center; gap:8px; margin-bottom:20px; color:var(--auth-primary); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.auth-kicker::before { content:""; width:22px; height:2px; border-radius:2px; background:var(--auth-primary); }
.auth-title { margin:0; color:#101828; font-size:36px; line-height:1.15; font-weight:700; letter-spacing:-.032em; }
.auth-customer .auth-title { max-width:390px; font-size:32px; line-height:1.2; }
.auth-description { margin:12px 0 30px; color:var(--auth-muted); font-size:15px; line-height:1.65; }
.auth-visual { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; padding:48px; overflow:hidden; border-left:1px solid rgba(52,64,87,.08); color:#191a1d; background:linear-gradient(145deg,#f7f8f9 0%,#e9ebee 52%,#f1f2f4 100%); box-shadow:inset 18px 0 38px rgba(52,64,87,.025); }
.auth-visual::before { content:""; position:absolute; z-index:-1; inset:-38%; background:linear-gradient(116deg,rgba(255,255,255,.04) 12%,rgba(255,255,255,.82) 28%,rgba(127,134,145,.16) 43%,rgba(255,255,255,.67) 59%,rgba(111,119,131,.11) 73%,rgba(255,255,255,.06) 88%),linear-gradient(28deg,rgba(93,101,114,.10) 8%,rgba(255,255,255,.62) 36%,rgba(120,127,138,.09) 57%,rgba(255,255,255,.72) 82%); background-size:210% 210%,185% 185%; filter:blur(27px); opacity:.72; animation:authToneFlow 22s ease-in-out infinite alternate; will-change:transform,background-position; }
.auth-visual::after { content:""; position:absolute; z-index:-2; inset:-18%; background:repeating-linear-gradient(128deg,transparent 0 92px,rgba(255,255,255,.28) 92px 174px,rgba(85,94,108,.045) 174px 250px,transparent 250px 338px); background-size:185% 185%; filter:blur(5px); opacity:.56; animation:authLightSweep 28s ease-in-out infinite alternate; will-change:transform,background-position; }
.auth-brand { display:flex; justify-content:center; position:absolute; z-index:2; top:37%; left:48px; right:48px; margin:0; transform:translateY(-50%); }
.auth-brand .auth-company-brand { align-items:center!important; text-align:center!important; }
.auth-brand .auth-company-name { color:#232428!important; font-family:var(--auth-font)!important; font-size:20px!important; font-weight:650!important; }
.auth-brand img { max-width:275px!important; max-height:101px!important; object-fit:contain; object-position:center; filter:none!important; }
.auth-visual-copy { position:relative; z-index:2; max-width:390px; margin:0 auto; text-align:center; }
.auth-visual-copy h2 { margin:0 0 14px; color:#1a1b1e; font-size:31px; line-height:1.2; font-weight:650; letter-spacing:-.03em; }
.auth-visual-copy p { margin:0; color:#6d7077; font-size:14px; line-height:1.7; }
.auth-trust { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:28px; }
.auth-trust span { display:inline-flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid rgba(22,23,26,.09); border-radius:10px; background:rgba(255,255,255,.66); color:#55585f; font-size:11px; font-weight:550; backdrop-filter:blur(8px); }
.auth-mobile-brand { display:none; margin-bottom:28px; }
.auth-mobile-brand .auth-company-brand { align-items:center!important; text-align:center!important; }
.auth-mobile-brand img { max-width:190px; max-height:64px; object-fit:contain; object-position:center; }
.auth-form { display:flex; flex-direction:column; gap:17px; }
.auth-field { position:relative; }
.auth-field label { display:block; margin:0 0 7px; color:#344054; font-size:13px; font-weight:600; }
.auth-input-wrap { position:relative; }
.auth-input-wrap > i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#98a2b3; font-size:17px; pointer-events:none; }
.auth-input { width:100%; height:53px; padding:0 47px; border:1px solid var(--auth-line); border-radius:12px; outline:0; color:#101828; background:#fff; font:500 14px var(--auth-font); transition:border-color .18s,box-shadow .18s; }
.auth-input::placeholder { color:#98a2b3; font-weight:400; }
.auth-input:focus { border-color:rgba(var(--auth-primary-rgb),.65); box-shadow:0 0 0 4px rgba(var(--auth-primary-rgb),.09); }
.auth-input-wrap:focus-within > i { color:var(--auth-primary); }
.auth-password-toggle { position:absolute; right:9px; top:50%; width:36px; height:36px; transform:translateY(-50%); border:0; border-radius:9px; color:#98a2b3; background:transparent; cursor:pointer; }
.auth-password-toggle:hover { color:var(--auth-primary); background:rgba(var(--auth-primary-rgb),.07); }
.auth-options { display:flex; justify-content:flex-end; margin-top:-3px; }
.auth-link { color:var(--auth-primary); font-size:13px; font-weight:600; text-decoration:none; }
.auth-link:hover { text-decoration:underline; }
.auth-submit { width:100%; height:53px; border:0; border-radius:12px; color:#fff; background:var(--auth-primary); font:650 15px var(--auth-font); box-shadow:0 10px 24px rgba(var(--auth-primary-rgb),.20); cursor:pointer; transition:background .18s,box-shadow .18s,transform .18s; }
.auth-submit:hover { background:var(--auth-deep); box-shadow:0 12px 26px rgba(var(--auth-primary-rgb),.24); transform:translateY(-1px); }
.auth-submit.auth-loading { pointer-events:none; opacity:.78; }
.auth-submit.auth-loading::before { content:""; display:inline-block; width:15px; height:15px; margin-right:8px; vertical-align:-3px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:authSpin .7s linear infinite; }
.auth-switch { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:27px; padding-top:22px; border-top:1px solid #eef0f3; color:#98a2b3; font-size:13px; }
.auth-alert { margin-bottom:20px; padding:12px 14px; border-radius:11px; font-size:13px; line-height:1.5; }
.auth-alert-danger { color:#a12b3c; background:#fff0f2; }
.auth-alert-success { color:#126247; background:#eaf8f2; }
.auth-alert ul { margin:0; padding-left:18px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:25px; padding:4px; border-radius:11px; background:#f2f4f7; }
.auth-tabs .nav-link { min-height:39px; border:0; border-radius:8px; color:#667085; background:transparent; font:600 13px var(--auth-font); }
.auth-tabs .nav-link.active { color:#fff; background:var(--auth-primary); box-shadow:0 5px 12px rgba(var(--auth-primary-rgb),.18); }
.auth-user-card { display:flex; align-items:center; gap:15px; margin:25px 0; padding:16px; border:1px solid var(--auth-line); border-radius:13px; background:#f9fafb; }
.auth-user-card img { width:54px!important; height:54px!important; border-radius:12px!important; object-fit:cover; }
.auth-user-card h5 { margin:0 0 3px; font-size:16px; }
.auth-user-card p { margin:0; color:var(--auth-muted); font-size:12px; }
.auth-secondary { display:flex; align-items:center; justify-content:center; width:100%; height:49px; margin-top:10px; border:1px solid var(--auth-line); border-radius:12px; color:#475467; background:#fff; font-size:14px; font-weight:600; text-decoration:none; }
.auth-secondary:hover { background:#f9fafb; }
@keyframes authToneFlow { 0% { background-position:5% 15%,95% 82%; transform:translate3d(-5%,-3%,0) skewX(-2deg) scale(1.03); } 52% { background-position:68% 44%,38% 25%; transform:translate3d(4%,1%,0) skewX(2deg) scale(1.08); } 100% { background-position:98% 86%,4% 60%; transform:translate3d(-1%,5%,0) skewX(-1deg) scale(1.04); } }
@keyframes authLightSweep { 0% { background-position:2% 8%; transform:translate3d(-7%,-3%,0); } 100% { background-position:98% 92%; transform:translate3d(7%,4%,0); } }
@keyframes authSpin { to { transform:rotate(360deg); } }
@media (max-width:900px) { body.auth-page{padding:24px}.auth-shell{display:block;width:min(560px,100%);min-height:0}.auth-visual{display:none}.auth-main{padding:46px 42px}.auth-mobile-brand{display:block}.auth-main-inner{max-width:none}.auth-title,.auth-customer .auth-title{font-size:32px} }
@media (max-width:520px) { body.auth-page{align-items:flex-start;padding:14px}.auth-shell{border-radius:16px}.auth-main{padding:32px 22px}.auth-title,.auth-customer .auth-title{font-size:28px}.auth-description{margin-bottom:24px}.auth-tabs .nav-link{font-size:12px} }
@media (prefers-reduced-motion:reduce) { .auth-page *,.auth-page *::before,.auth-page *::after{animation:none!important;transition:none!important} }