/* Developer auth split-screen (login/register) */
.dev-auth { display: flex; height: 100vh; overflow: hidden;}

/* Left: showcase panel */
.dev-auth-showcase {
  flex: 1 1 50%;
  background: linear-gradient(135deg, #002233 0%, #006699 60%, #0099cc 100%);
  color: #fff;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.dev-auth-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; color: #fff; text-decoration: none; }
.dev-auth-brand img { height: 60px; width: 200px; display: block; }
.dev-auth-brand span { color: #00e5a0; font-weight: 600; margin-left: 4px; }
.dev-auth-showcase-body { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 480px; margin-top: 32px; }
.dev-auth-showcase-body h1 { color: #fff; text-transform: none; font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; line-height: 1.15; letter-spacing: -1px; margin: 18px 0 14px; }
.dev-auth-showcase-body p { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.75); margin-bottom: 30px; }

.dev-auth-carousel { position: relative; min-height: 96px; }
.dac-card {
  position: absolute; inset: 0; display: flex; gap: 14px; align-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 16px 18px;
  opacity: 0; pointer-events: none; transition: opacity .45s ease, transform .45s ease;
  transform: translateY(6px);
}
.dac-card.active { opacity: 1; pointer-events: auto; position: relative; transform: none; }
.dac-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; font-size: 20px; }
.dac-icon img { width: 100%; height: 100%; object-fit: cover; }
.dac-title { font-weight: 700; font-size: 14.5px; margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
.dac-desc { font-size: 12.5px; color: rgba(255,255,255,.65); line-height: 1.4; }
.dev-auth-dots { display: flex; gap: 6px; margin-top: 16px; }
.dev-auth-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); transition: all .3s ease; }
.dev-auth-dots span.active { background: #00e5a0; width: 18px; border-radius: 4px; }

/* Right: form panel */
.dev-auth-form-side { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #fff; }
.dev-auth-form-wrap { width: 100%; max-width: 380px; }
.dev-auth-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ws-text-3); margin-bottom: 28px; }
.dev-auth-back:hover { color: var(--ws-primary); }
.dev-auth-form-wrap h2 { text-transform: none; font-size: 26px; font-weight: 800; color: var(--ws-text); margin-bottom: 6px; }
.dev-auth-sub { font-size: 14px; color: var(--ws-text-3); margin-bottom: 26px; }
.ws-label { display: block; font-size: 13px; font-weight: 600; color: var(--ws-text-2); margin-bottom: 6px; }
.dev-auth-link { font-size: 13.5px; color: var(--ws-text-3); margin-top: 14px; text-align: center; }

@media (max-width: 900px) {
  .dev-auth { flex-direction: column; }
  .dev-auth-showcase { padding: 28px 24px; }
  .dev-auth-showcase-body { margin-top: 16px; }
  .dev-auth-carousel { display: none; }
  .dev-auth-form-side { padding: 32px 24px; }
}