:root { --red:#e21a1a; --red-dark:#b70d0d; --brand-rgb:226,26,26; --brand-logo-url:url("assets/rost-logo.png"); --ink:#122b43; --muted:#74879a; font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--ink); background:#f2f5f6; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.auth-layout { display:grid; grid-template-columns:minmax(430px,1.08fr) minmax(420px,.92fr); min-height:100vh; }
.auth-brand-panel { position:relative; display:flex; align-items:center; overflow:hidden; padding:70px clamp(45px,6vw,95px); color:#fff; background:linear-gradient(145deg,#10283e 0%,#173b55 68%,#263c4d 120%); }
.auth-brand-panel:before { content:""; position:absolute; top:-190px; right:-150px; width:520px; height:520px; border-radius:50%; background:rgba(var(--brand-rgb),.22); }
.auth-brand-content { position:relative; z-index:2; max-width:660px; }
.auth-wordmark { width:min(310px,72%); height:auto; object-fit:contain; filter:drop-shadow(0 9px 18px rgba(0,0,0,.22)); }
.auth-category { display:inline-flex; margin-top:34px; padding:7px 11px; border:1px solid rgba(255,255,255,.16); border-radius:20px; color:#fff; background:rgba(var(--brand-rgb),.18); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.auth-brand-content h1 { max-width:670px; margin:18px 0 0; font-size:clamp(38px,4.5vw,68px); line-height:1.04; letter-spacing:-.055em; }
.auth-brand-content > p { max-width:610px; margin:22px 0 0; color:#b3c5d1; font-size:16px; line-height:1.65; }
.auth-feature-list { display:flex; flex-wrap:wrap; gap:9px; margin-top:32px; }.auth-feature-list span { padding:9px 12px; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#dce8ee; background:rgba(255,255,255,.055); font-size:11px; font-weight:650; }
.auth-road { position:absolute; right:-30px; bottom:-180px; width:480px; height:430px; background:#273c4c; clip-path:polygon(40% 0,60% 0,100% 100%,0 100%); opacity:.28; }.auth-road:before { content:""; position:absolute; left:50%; top:0; width:6px; height:100%; background:repeating-linear-gradient(#fff 0 35px,transparent 35px 66px); }.auth-road span { position:absolute; top:40px; right:130px; width:45px; height:45px; border:7px solid #fff; background:#efbd2d; transform:rotate(45deg); }
.auth-form-panel { display:grid; place-items:center; padding:36px; background:#f4f7f7; }
.auth-card { width:min(440px,100%); padding:42px; border:1px solid #e1e7ea; border-radius:22px; background:#fff; box-shadow:0 24px 65px rgba(18,43,67,.13); }
.auth-role-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:16px; color:var(--brand-contrast,#fff); background:var(--red); box-shadow:0 10px 22px rgba(var(--brand-rgb),.24); font-size:19px; font-weight:900; }
.auth-eyebrow { margin:24px 0 7px; color:var(--red); font-size:10px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }.auth-card h2 { margin:0; font-size:31px; letter-spacing:-.04em; }.auth-description { margin:9px 0 25px; color:var(--muted); font-size:13px; line-height:1.55; }
.auth-card label { display:flex; flex-direction:column; gap:7px; }.auth-card label > span { font-size:11px; font-weight:750; }.password-field { display:flex; min-height:50px; border:1px solid #d5dee4; border-radius:12px; overflow:hidden; background:#fff; }.password-field:focus-within { border-color:var(--red); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.09); }.password-field input { min-width:0; flex:1; padding:0 13px; border:0; outline:0; color:var(--ink); }.password-field button { padding:0 13px; border:0; color:var(--red); background:transparent; font-size:10px; font-weight:750; cursor:pointer; }
.auth-error { margin:12px 0 0; padding:10px 12px; border-radius:10px; color:#af2020; background:#fff0f0; font-size:11px; }.auth-submit { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; margin-top:17px; padding:0 17px; border:0; border-radius:12px; color:var(--brand-contrast,#fff); background:var(--red); box-shadow:0 10px 22px rgba(var(--brand-rgb),.2); font-weight:800; cursor:pointer; }.auth-submit:hover { background:var(--red-dark); }.auth-submit:disabled { opacity:.65; cursor:wait; }.auth-submit b { font-size:20px; }.auth-demo { display:block; margin-top:17px; color:var(--red-dark); text-align:center; font-size:11px; font-weight:750; text-decoration:none; }.auth-security { display:block; margin-top:25px; padding-top:17px; border-top:1px solid #e6ebee; color:#92a1ad; text-align:center; font-size:9px; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid rgba(var(--brand-rgb),.2); outline-offset:2px; }
@media(max-width:860px){ .auth-layout{grid-template-columns:1fr}.auth-brand-panel{display:none}.auth-form-panel{min-height:100vh;padding:20px}.auth-card{padding:30px 24px}.auth-card:before{content:"";display:block;width:150px;height:62px;margin:0 0 24px;background-image:var(--brand-logo-url);background-position:center;background-size:contain;background-repeat:no-repeat}.auth-role-icon{display:none} }