/* ═══ Sign-in — the Figma board's language: beige canvas, dark glass panel,
   Plus Jakarta Sans display + Inter fields, #fcaa0b action button. ═══ */

*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:#f2eae4;font-family:'Inter','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;color:#232323;}

.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;}
.auth-card{display:flex;width:min(1060px,100%);min-height:640px;background:#fff;border-radius:25px;
    overflow:hidden;box-shadow:0 3.5px 5.5px rgba(0,0,0,.02),0 20px 60px rgba(35,35,35,.08);}

/* Left — the rail's dark glass, rounded into the card */
.auth-left{flex:0 0 44%;display:flex;flex-direction:column;justify-content:space-between;
    padding:44px 40px 0;position:relative;color:#fff;
    background:linear-gradient(159.6deg,rgba(6,11,40,.96) 3%,rgba(10,14,35,.94) 100%),#0a0a0c;}
.auth-left::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(420px 260px at 85% 8%,rgba(252,170,11,.18),transparent 70%);}
.auth-left-top{position:relative;z-index:1;}
.brand{display:inline-block;}
.brand-logo{height:56px;width:auto;background:#fff;border-radius:12px;padding:8px 14px;object-fit:contain;}
.brand-fallback{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:20px;color:#fff;}
.hero{margin-top:46px;}
.hero-line1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:15px;
    letter-spacing:.24em;text-transform:uppercase;color:#a0aec0;}
.hero-line2{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:34px;
    line-height:1.25;margin-top:10px;color:#fff;}
.auth-left-bottom{position:relative;z-index:1;text-align:center;}
.illustration{max-width:88%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));}

/* Right — the form */
.auth-right{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 44px;}
.auth-form-wrap{width:min(380px,100%);}
.auth-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:22px;
    line-height:1.4;color:#232323;margin:0 0 26px;}

.alert{border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:13.5px;font-family:'Inter',sans-serif;}
.alert-danger{background:#fff2f4;color:#fe5c73;border:1px solid #ffd4db;}
.alert-success{background:#f2fff5;color:#05a021;border:1px solid #c9f2d3;}
.alert .close{float:right;border:0;background:none;font-size:16px;line-height:1;color:inherit;cursor:pointer;}

.field{margin-bottom:18px;position:relative;}
.field-label{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:13.3px;
    line-height:19px;color:#374151;margin-bottom:4px;}
.field-input{width:100%;background:#fff;border:.95px solid #d1d5db;border-radius:5.7px;
    box-shadow:0 .95px 1.9px rgba(0,0,0,.05);padding:10px 12px;font-family:'Inter',sans-serif;
    font-weight:500;font-size:14px;line-height:24px;color:#131316;outline:none;}
.field-input::placeholder{color:#a0aec0;font-weight:400;}
.field-input:focus{border-color:#fcaa0b;box-shadow:0 0 0 3px rgba(252,170,11,.18);}
.field-password .toggle-password{position:absolute;right:10px;top:33px;border:0;background:none;
    color:#a0aec0;cursor:pointer;font-size:15px;padding:6px;}

.auth-meta{display:flex;align-items:center;justify-content:space-between;margin:4px 0 22px;
    font-family:'Inter',sans-serif;font-size:13px;color:#596171;}
.remember{display:flex;align-items:center;gap:7px;cursor:pointer;}
.remember input{accent-color:#fcaa0b;width:15px;height:15px;}
.auth-meta .link{color:#718ebf;text-decoration:none;font-weight:500;}
.auth-meta .link:hover{color:#123288;}

.btn-auth{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;
    background:#fcaa0b;border:1px solid #fcaa0b;border-radius:8px;padding:12px 16px;
    font-family:'Inter',sans-serif;font-weight:600;font-size:15px;color:#fff;cursor:pointer;
    box-shadow:0 1px 2px rgba(16,24,40,.05);transition:filter .15s;}
.btn-auth:hover{filter:brightness(.96);}

.auth-copyright{margin-top:30px;text-align:center;font-family:'Inter',sans-serif;
    font-size:12px;color:#a0aec0;}
.auth-copyright .external{color:#38b2ac;font-weight:700;}

@media (max-width:860px){
    .auth-card{flex-direction:column;min-height:0;}
    .auth-left{flex:0 0 auto;padding:32px 28px;}
    .auth-left-bottom{display:none;}
    .hero{margin-top:22px;}
    .hero-line2{font-size:26px;}
}