/* Main website colors */
:root{
  --ac-primary: #ff7a18;
  --ac-primary-2: #ffb55a;

  --ac-navy: #0b1220;
  --ac-navy-2: #0f1b33;
  --ac-ink: #111827;
  --ac-muted: #6b7280;

  --ac-bg: #f4f6fb;
  --ac-card: #ffffff;
  --ac-border: rgba(15,23,42,.10);

  --ac-shadow: 0 24px 80px rgba(2,6,23,.16);
  --ac-radius: 18px;
}

/* Page background */
body.auth-body{
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 16% 10%, rgba(255,122,24,.18), transparent 55%),
    radial-gradient(1100px 620px at 90% 0%, rgba(11,18,32,.20), transparent 58%),
    radial-gradient(900px 520px at 65% 95%, rgba(255,181,90,.12), transparent 55%),
    var(--ac-bg);
}

/* Page spacing */
.auth-wrap{
  padding: 54px 16px;
}

/* Main auth card */
.auth-card{
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  overflow: hidden;
  background: var(--ac-card);
  box-shadow: var(--ac-shadow);
  animation: authIn .45s ease both;
}

/* Card animation */
@keyframes authIn{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Left side of auth card */
.auth-left{
  padding: 38px 38px;
}

/* Right side of auth card */
.auth-right{
  padding: 0;
  color: #fff;
  background:
    radial-gradient(680px 420px at 18% 18%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(780px 520px at 40% 20%, rgba(255,122,24,.22), transparent 55%),
    linear-gradient(135deg, rgba(15,27,51,.96), rgba(11,18,32,.94));
  position: relative;
}

/* Right side inner content */
.auth-right__inner{
  padding: 44px 40px;
  height: 100%;
}

/* Right side glow effect */
.auth-right::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 260px at 65% 35%, rgba(255,122,24,.18), transparent 62%),
    radial-gradient(700px 300px at 35% 80%, rgba(255,181,90,.10), transparent 70%);
  pointer-events:none;
}

/* Right side title */
.auth-right h3{
  position:relative;
  z-index:1;
  font-weight: 900;
  letter-spacing: -.3px;
  font-size: 34px;
  margin: 6px 0 10px;
}

/* Right side paragraph */
.auth-right p{
  position:relative;
  z-index:1;
  color: rgba(255,255,255,.86);
  line-height: 1.6;
  margin: 0 0 18px;
}

/* Right side bullet list */
.auth-bullets{
  position:relative;
  z-index:1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: rgba(255,255,255,.90);
}

.auth-bullets li{
  padding-left: 22px;
  position: relative;
}

/* Bullet point style */
.auth-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ac-primary), var(--ac-primary-2));
  box-shadow: 0 12px 28px rgba(255,122,24,.24);
}

/* Small badge */
.auth-right__badge{
  position: relative;
  z-index: 1;
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
  font-weight: 700;
  font-size: 13px;
}

/* Badge dot */
.auth-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ac-primary), var(--ac-primary-2));
  box-shadow: 0 12px 28px rgba(255,122,24,.30);
}

/* Additional right side text */
.auth-right__text{
  position:relative;
  z-index:1;
  color: rgba(255,255,255,.88);
  line-height:1.6;
}

/* Brand section */
.auth-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 18px;
}

/* Brand image */
.auth-brand img{
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 16px;
  background: rgba(11,18,32,.05);
  padding: 6px;
  box-shadow: 0 14px 30px rgba(2,6,23,.10);
}

/* Brand title */
.auth-brand__title{
  font-weight: 900;
  letter-spacing: -.2px;
  color: var(--ac-ink);
}

/* Small brand note */
.auth-note{
  font-size: 13px;
  color: var(--ac-muted);
  margin-top: 2px;
}

/* Main heading */
.auth-title{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -.4px;
  color: var(--ac-navy);
  margin: 10px 0 6px;
}

/* Subtitle */
.auth-sub{
  color: var(--ac-muted);
  margin: 0 0 18px;
}

/* Alert message */
.auth-alert{
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,.10);
}

/* Form label */
.auth-field .form-label{
  font-weight: 800;
  color: var(--ac-ink);
  margin-bottom: 6px;
  font-size: 13px;
}

/* Input wrapper */
.auth-input-wrap{
  position: relative;
}

/* Main input style */
.auth-control{
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  padding-left: 44px;
  padding-right: 52px;
  background: rgba(255,255,255,.96);
  transition: box-shadow .18s ease, border-color .18s ease, transform .06s ease;
}

/* Plain input style */
.auth-control--plain{
  padding-left: 16px;
  padding-right: 52px;
}

/* Input focus state */
.auth-control:focus{
  border-color: rgba(255,122,24,.62);
  box-shadow: 0 0 0 .25rem rgba(255,122,24,.16);
}

/* Input icon */
.auth-icon{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  opacity: .58;
  color: rgba(15,23,42,.65);
  pointer-events:none;
}

/* Show password button */
.auth-peek{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  border-radius: 12px;
  padding: 7px 10px;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: rgba(15,23,42,.72);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 10px 25px rgba(2,6,23,.10);
}

/* Show password hover */
.auth-peek:hover{
  border-color: rgba(255,122,24,.55);
}

/* Show password active */
.auth-peek:active{
  transform: translateY(-50%) scale(.98);
}

/* Main button style */
.auth-btn{
  height: 50px;
  border-radius: 14px;
  font-weight: 950;
  letter-spacing: .2px;
  transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
}

/* Primary button */
.auth-btn-primary{
  background: linear-gradient(135deg, var(--ac-primary), #ff5a1f);
  border: none;
  box-shadow: 0 18px 44px rgba(255,122,24,.22);
}

/* Primary button hover */
.auth-btn-primary:hover{
  filter: brightness(.99);
  box-shadow: 0 22px 56px rgba(255,122,24,.26);
}

/* Primary button active */
.auth-btn-primary:active{
  transform: translateY(1px);
}

/* Loading button state */
.auth-btn.is-loading{
  position: relative;
  pointer-events: none;
  opacity: .92;
}

/* Loading spinner */
.auth-btn.is-loading::after{
  content:"";
  position:absolute;
  right: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.55);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
}

/* Spinner animation */
@keyframes spin{
  to{ transform: rotate(360deg); }
}

/* Role buttons wrapper */
.auth-role-actions{
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

/* Role button */
.auth-role-btn{
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--ac-primary), #ff5a1f);
  box-shadow: 0 14px 30px rgba(255,122,24,.18);
  transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
}

/* Role button hover */
.auth-role-btn:hover{
  color: #fff;
  text-decoration: none;
  filter: brightness(.99);
  box-shadow: 0 18px 36px rgba(255,122,24,.24);
}

/* Ghost role button */
.auth-role-btn--ghost{
  background: #2f3440;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
}

/* Ghost role button hover */
.auth-role-btn--ghost:hover{
  background: #3a404d;
  box-shadow: none;
}

/* Link style */
.auth-link{
  color: var(--ac-primary);
  text-decoration: none;
  font-weight: 900;
}

/* Link hover */
.auth-link:hover{
  text-decoration: underline;
  color: #e86500;
}

/* Bottom text */
.auth-bottom{
  color: rgba(17,24,39,.82);
}

/* Password strength section */
.auth-strength{
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

/* Password strength bar */
.auth-strength__bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.06);
}

/* Password strength fill */
.auth-strength__fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  transition: width .2s ease, background .2s ease;
}

/* Password strength text */
.auth-strength__text{
  font-size: 12px;
  color: var(--ac-muted);
}

/* Responsive style */
@media (max-width: 991.98px){
  .auth-left{ padding: 28px 22px; }
  .auth-right__inner{ padding: 26px 22px; }
  .auth-title{ font-size: 30px; }
  .auth-role-actions{ flex-direction: column; }
}