:root{
  --reg-bg: #f6f8fb;
  --reg-card: #ffffff;
  --reg-border: #e8edf3;
  --reg-text: #1f2937;
  --reg-muted: #6b7280;
  --reg-primary: #0d6efd;
  --reg-primary-soft: rgba(13,110,253,.10);
  --reg-success: #198754;
  --reg-success-soft: rgba(25,135,84,.10);
  --reg-danger: #dc3545;
  --reg-danger-soft: rgba(220,53,69,.10);
  --reg-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  --reg-radius: 22px;
}

body.register-page{
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(13,110,253,.08), transparent 28%),
    radial-gradient(circle at top right, rgba(25,135,84,.06), transparent 22%),
    var(--reg-bg);
  color: var(--reg-text);
}

.register-shell{
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 42px 16px 28px;
}

.register-brand{
  text-align: center;
}

.register-logo{
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-logo-fallback{
  width: 74px;
  height: 74px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: #0b5ed7;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), rgba(255,255,255,0) 42%),
    linear-gradient(135deg, #e8f1ff 0%, #cfe2ff 48%, #b6d4fe 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 14px 26px rgba(15, 23, 42, 0.10);
}

.register-title{
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--reg-text);
}

.register-subtitle{
  color: var(--reg-muted);
  font-size: .98rem;
}

.register-card{
  border: 1px solid var(--reg-border);
  border-radius: var(--reg-radius);
  background: var(--reg-card);
  box-shadow: var(--reg-shadow);
  overflow: hidden;
}

.register-page .form-label{
  color: var(--reg-text);
}

.register-page .form-control,
.register-page .form-select,
.register-page .input-group-text{
  border-color: #d9e2ec;
  min-height: 52px;
}

.register-page .form-control,
.register-page .form-select{
  border-radius: 14px;
  box-shadow: none;
}

.register-page .input-group > .form-control{
  border-radius: 14px;
}

.register-page .input-group-text{
  background: #fff;
  color: var(--reg-muted);
}

.register-page .form-control:focus,
.register-page .form-select:focus{
  border-color: rgba(13,110,253,.45);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.12);
}

.form-help{
  font-size: .86rem;
  color: var(--reg-muted);
}

.register-code-group .input-group-text:last-child{
  min-width: 62px;
  justify-content: center;
}

.register-code-state{
  gap: 8px;
}

.code-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cbd5e1;
  display: inline-block;
  transition: background-color .2s ease, transform .2s ease;
}

.code-dot.ok{
  background: var(--reg-success);
  transform: scale(1.08);
}

.code-dot.bad{
  background: var(--reg-danger);
  transform: scale(1.08);
}

.register-company-hint{
  font-size: .9rem;
  color: var(--reg-muted);
}

.register-company-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--reg-success-soft);
  color: #146c43;
  border: 1px solid rgba(25,135,84,.14);
  font-weight: 600;
  font-size: .9rem;
}

.register-submit{
  min-height: 52px;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(13,110,253,.18);
}

.register-footer{
  text-align: center;
  color: var(--reg-muted);
  font-size: .9rem;
  margin-top: 18px;
}

.register-page .alert{
  border-radius: 18px;
}

@media (max-width: 767.98px){
  .register-shell{
    padding-top: 28px;
  }

  .register-card .card-body{
    padding: 22px 18px !important;
  }

  .register-logo-fallback{
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-size: 1.7rem;
  }

  .register-title{
    font-size: 1.7rem;
  }
}