* { box-sizing: border-box; }
.auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 72px);
  margin: -1.5rem -12px 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.1);
}
@media (max-width: 720px) {
  .auth-wrap { grid-template-columns: 1fr; margin: 0; border-radius: 16px; }
  .auth-left { display: none; }
}

/* Left panel */
.auth-left {
  background: #1a1e2e;
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background .4s ease;
}
.auth-left-brand { font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .2em; color: rgba(255,255,255,.4); margin-bottom: 48px; }
.auth-left-emoji { font-size: 3.2rem; margin-bottom: 20px; display: block; transition: opacity .3s; }
.auth-left-title { font-size: 3.4rem; font-weight: 900; color: #fff; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 22px; }
.auth-left-title span { color: #F0C840; transition: color .3s; }
.auth-left-sub { font-size: 1rem; color: rgba(255,255,255,.6); line-height: 1.6; max-width: 340px; }
.auth-left-footer { font-size: .72rem; color: rgba(255,255,255,.25); margin-top: 48px; }

/* Right panel */
.auth-right {
  background: #fff;
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-inner { max-width: 360px; width: 100%; margin: 0 auto; }

/* Step indicators */
.auth-steps { display: flex; gap: 6px; margin-bottom: 28px; }
.auth-step-dot { height: 4px; border-radius: 4px; background: #e5e7eb; transition: background .3s, width .3s; }
.auth-step-dot.active { background: #1a1e2e; }

.auth-eyebrow { font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .18em; color: #9ca3af; margin-bottom: 8px; }
.auth-title { font-size: 1.6rem; font-weight: 900; color: #1a1a1a; margin: 0 0 24px; line-height: 1.2; }

/* Role cards */
.login-role-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.login-role-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 14px; border: 2px solid #e5e7eb;
  cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
  background: #fafafa;
}
.login-role-card:hover { border-color: #9ca3af; background: #fff; transform: translateX(3px); }
.login-role-card.selected { border-color: #1a1e2e; background: #fff; }
.login-role-emoji { font-size: 1.6rem; flex-shrink: 0; width: 36px; text-align: center; }
.login-role-name { font-size: .92rem; font-weight: 800; color: #1a1a1a; }
.login-role-desc { font-size: .75rem; color: #9ca3af; margin-top: 1px; }
.login-role-check { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #e5e7eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color .15s, background .15s; }
.login-role-card.selected .login-role-check { background: #1a1e2e; border-color: #1a1e2e; }
.login-role-check-inner { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s; }
.login-role-card.selected .login-role-check-inner { opacity: 1; }

.role-next-btn {
  width: 100%; padding: 13px; background: #1a1e2e; color: #F0C840; font-size: .92rem;
  font-weight: 900; border: none; border-radius: 12px; cursor: pointer;
  letter-spacing: .02em; transition: transform .15s, opacity .15s;
  opacity: .35; pointer-events: none;
}
.role-next-btn.active { opacity: 1; pointer-events: auto; }
.role-next-btn.active:hover { transform: translateY(-1px); }

/* Login fields */
.auth-step-back { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: #9ca3af; cursor: pointer; border: none; background: none; padding: 0; margin-bottom: 20px; }
.auth-step-back:hover { color: #374151; }
.auth-selected-role { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: #f9fafb; border: 1.5px solid #e5e7eb; margin-bottom: 24px; font-size: .82rem; font-weight: 700; color: #374151; }
.auth-selected-role-emoji { font-size: 1.2rem; }

.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-size: .78rem; font-weight: 700; color: #374151; margin-bottom: 6px; }
.auth-field input {
  width: 100%; padding: 11px 14px; border: 1.5px solid #e5e7eb; border-radius: 10px;
  font-size: .9rem; color: #1a1a1a; background: #fafafa; transition: border-color .15s, background .15s;
}
.auth-field input:focus { outline: none; border-color: #1a1e2e; background: #fff; }
.auth-forgot { font-size: .75rem; color: #9ca3af; text-align: right; margin-top: 4px; }
.auth-forgot a { color: #6b7280; text-decoration: none; }
.auth-forgot a:hover { text-decoration: underline; }
.auth-submit {
  width: 100%; padding: 13px; background: #1a1e2e; color: #F0C840; font-size: .92rem;
  font-weight: 900; border: none; border-radius: 12px; cursor: pointer; margin-top: 8px;
  letter-spacing: .02em; transition: transform .15s;
}
.auth-submit:hover { transform: translateY(-1px); }
.auth-divider { border: none; border-top: 1px solid #f3f4f6; margin: 24px 0; }
.auth-alt { font-size: .8rem; color: #9ca3af; text-align: center; }
.auth-alt a { color: #1a1e2e; font-weight: 700; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }
.auth-error { background: #fef2f2; border: 1.5px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 10px 14px; font-size: .82rem; margin-bottom: 20px; }