:root{
  --auth-ink:#0d2340;
  --auth-muted:#5f6b7a;
  --auth-line:#d8e0ea;
  --auth-navy:#082544;
  --auth-blue:#1463d2;
  --auth-red:#b5141a;
  --auth-green:#227144;
}

*{box-sizing:border-box}

input,
textarea{
  font-size:16px !important;
}

html{
  overflow-x:hidden;
  scrollbar-gutter:stable;
}

body{
  min-height:100vh;
  margin:0;
  color:#142033;
  font-family:'Roboto', Arial, sans-serif;
  background:
    linear-gradient(135deg, rgba(8,37,68,.98), rgba(13,35,64,.92)),
    radial-gradient(circle at top right, rgba(20,99,210,.22), transparent 34%);
}

.auth-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.auth-card{
  width:min(860px, 100%);
  min-height:470px;
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(360px,1fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.3);
}

.auth-brand-panel{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  padding:34px;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(8,37,68,.96), rgba(8,37,68,.88)),
    radial-gradient(circle at 20% 0, rgba(255,255,255,.18), transparent 42%);
}

.auth-brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:#fff;
  text-decoration:none;
}

.auth-brand img{
  width:58px;
  height:58px;
  display:block;
}

.auth-brand span{
  display:grid;
  gap:0;
  font-family:'Playfair Display', serif;
  font-size:28px;
  line-height:.88;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.auth-brand-panel p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.auth-form-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  padding:40px;
}

.auth-heading h1{
  margin:0 0 8px;
  color:var(--auth-navy);
  font-family:'Playfair Display', serif;
  font-size:32px;
  line-height:1.05;
}

.auth-heading p{
  margin:0;
  color:var(--auth-muted);
}

.auth-form{
  display:grid;
  gap:18px;
}

label{
  display:block;
  margin-bottom:7px;
  color:var(--auth-ink);
  font-weight:700;
}

input[type="text"],
input[type="email"],
input[type="password"]{
  width:100%;
  min-height:42px;
  border:1px solid #c8d3df;
  border-radius:6px;
  background:#fff;
  color:#17202f;
  padding:10px 11px;
}

.password-field{
  position:relative;
}

.password-field input{
  padding-right:82px;
}

.password-toggle{
  position:absolute;
  top:5px;
  right:5px;
  min-height:32px;
  padding:0 10px;
  border:0;
  border-radius:5px;
  background:#eaf0f8;
  color:var(--auth-navy);
  font-weight:700;
  cursor:pointer;
}

input[type="submit"]{
  width:100%;
  min-height:46px;
  margin-top:4px;
  border:0;
  border-radius:6px;
  background:var(--auth-navy);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

.error,
.success,
.info{
  border-radius:8px;
  padding:12px 14px;
  font-weight:700;
}

.error{
  color:var(--auth-red);
  background:#fdeceb;
}

.success,
.info{
  color:var(--auth-green);
  background:#e8f5ec;
}

.auth-links{
  display:grid;
  gap:7px;
  margin-top:2px;
  text-align:left;
  color:var(--auth-muted);
}

.auth-links a{
  color:var(--auth-blue);
  text-decoration:none;
  font-weight:700;
}

.auth-links a:hover{
  text-decoration:underline;
}

@media (max-width:680px){
  .auth-card{
    min-height:0;
    grid-template-columns:1fr;
  }

  .auth-brand-panel{
    gap:18px;
    padding:24px;
  }

  .auth-form-panel{
    padding:24px;
  }
}