:root{
    --wine:#98012d;
    --wine-2:#c20f3f;
    --orange:#ff7a18;
    --orange-2:#ff9a3b;
    --dark:#22242a;
    --dark-2:#1a1c22;
    --text:#f8f9fc;
    --muted:#d5dbe5;
    --line:rgba(255,255,255,.16);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    min-height:100vh;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:#d8d1cb;
    overflow-x:hidden;
}
.auth-shell{
    position:relative;
    min-height:100vh;
    overflow:hidden;
}
.hero-panel{
    position:fixed;
    inset:0;
    z-index:0;
    background:
        linear-gradient(90deg, rgba(216,209,203,.12) 0%, rgba(216,209,203,.04) 24%, rgba(216,209,203,0) 45%),
        url('../img/login-hero.png') no-repeat right center / cover;
}
.hero-panel:after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(14,16,22,.14) 0%, rgba(14,16,22,.05) 22%, rgba(14,16,22,0) 44%);
}
.auth-panel{
    position:relative;
    z-index:2;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:32px;
}
.auth-card{
    /* width: min(420px,100%);
    border-radius: 41px;
    padding: 28px 24px 24px;
    background: rgba(35,37,43,.92);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 60px rgba(0,0,0,.28);
    backdrop-filter: blur(8px);
    margin-left: 371px; */
      width: min(360px, 100%);
  border-radius: 30px;
  padding: 22px 20px 20px;
  background: rgba(35,37,43,.92);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 45px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  margin-left: 371px;
    transform: scale(0.90);
  transform-origin: center center;
}





.auth-card h1,
.auth-card h2,
.auth-card .title {
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.auth-card p,
.auth-card label,
.auth-card small {
  font-size: 12.5px;
}

.auth-card input,
.auth-card select {
  height: 39px;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 12px;
}

.auth-card button,
.auth-card .btn {
  height: 39px;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 12px;
}

.auth-card .logo,
.auth-card img {
  max-width: 135px;
}





.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.brand-row--single{justify-content:flex-start}
.auth-logo-img{max-width:255px;max-height:157px;display:block;object-fit:contain}
.auth-logo-text{font-size:34px;line-height:.92;font-weight:900;letter-spacing:-1px;text-transform:lowercase}
.auth-logo-text span{display:block;color:var(--wine-2)}
.auth-logo-text strong{display:block;color:var(--orange)}
.auth-heading{margin-bottom:18px}
.auth-badge{display:inline-flex;align-items:center;border:1px solid rgba(255,122,24,.35);border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800;color:#ffd7b7;background:rgba(255,122,24,.10);margin-bottom:14px}
.auth-heading h1{margin:0 0 10px;font-size:40px;line-height:1.06;letter-spacing:-1px}
.auth-heading p{margin:0;color:#e5eaf2;font-size:14px;line-height:1.55;max-width:330px}
.alert{border-radius:14px;padding:12px 14px;margin:0 0 14px;font-weight:700;line-height:1.45;font-size:14px}
.alert.err{background:rgba(255,120,120,.10);color:#ffdada;border:1px solid rgba(255,185,185,.25)}
.alert.ok{background:rgba(90,255,157,.10);color:#cfffda;border:1px solid rgba(187,247,208,.28)}
.auth-form label{display:block;margin:14px 0 7px;color:#cbd4df;font-size:13px;font-weight:700}
.auth-form input{width:100%;height:48px;border:1px solid rgba(255,255,255,.20);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;padding:0 14px;font-size:14px;outline:none;transition:.18s}
.auth-form input::placeholder{color:#b9c1cf}
.auth-form input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,122,24,.14);background:rgba(255,255,255,.09)}
.password-wrap{position:relative}
.password-wrap input{padding-right:52px}
.eye-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.07);color:#e8edf5;border-radius:8px;height:30px;min-width:36px;padding:0 10px;cursor:pointer;font-weight:700;font-size:11px}
.eye-btn:hover{background:rgba(255,255,255,.14)}
.auth-btn{width:100%;height:50px;border:0;border-radius:12px;margin-top:20px;background:linear-gradient(90deg,var(--orange),var(--wine-2));color:#fff;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 14px 26px rgba(194,15,63,.22);transition:.18s}
.auth-btn:hover{transform:translateY(-1px);box-shadow:0 18px 32px rgba(194,15,63,.28)}
.auth-links{display:flex;justify-content:flex-start;gap:12px;flex-wrap:wrap;margin-top:16px}
.auth-links a{color:#66dbff;text-decoration:none;font-weight:700;font-size:14px}
.auth-links a:hover{text-decoration:underline}
.auth-help{margin-top:24px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:16px 18px;display:grid;gap:4px}
.auth-help strong{font-size:16px}
.auth-help span{color:#d6deea;font-size:13px}
.local-reset-box{margin-top:18px;padding:14px;border:1px dashed rgba(255,255,255,.30);border-radius:14px;background:rgba(255,255,255,.04)}
.local-reset-box strong{display:block;margin-bottom:4px}
.local-reset-box p{font-size:12px;color:#d0d8e4;margin:0 0 10px}
.local-reset-box textarea{width:100%;height:82px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.20);color:#fff;padding:10px;resize:none}
.user-reset-info{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);margin-bottom:14px}

@media (min-aspect-ratio: 21/9){
    .hero-panel{background-position:68% center;background-size:cover}
}
@media(max-width:1440px){
    .hero-panel{background-position:70% center}
}
@media(max-width:1180px){
    .auth-card{width:min(400px,100%)}
    .auth-heading h1{font-size:34px}
    .hero-panel{background-position:72% center}
}
@media(max-width:980px){
    .hero-panel{background-position:62% center}
    .hero-panel:after{background:linear-gradient(180deg, rgba(18,20,26,.44) 0%, rgba(18,20,26,.28) 100%)}
    .auth-panel{justify-content:center;padding:24px}
    .auth-card{width:min(460px,100%)}
}
@media(max-width:560px){
    .auth-panel{padding:18px}
    .auth-card{padding:22px 18px 20px;border-radius:24px;width:100%}
    .auth-logo-img{max-width:210px;max-height:78px}
    .auth-heading h1{font-size:30px}
    .auth-links{display:grid}
    .hero-panel{background-position:64% center}
}