:root {
  --vd-primary: #4F46E5;
  --vd-primary-dark: #4338CA;
  --vd-accent: #06B6D4;
  --vd-bg: #F5F7FB;
  --vd-text: #111827;
  --vd-muted: #6B7280;
  --vd-border: #E5E7EB;
  --vd-radius: 14px;
}

body {
  background: var(--vd-bg);
  color: var(--vd-text);
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.vd-navbar {
  background: #fff;
  border-bottom: 1px solid var(--vd-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.vd-hero {
  background: linear-gradient(135deg, var(--vd-primary) 0%, var(--vd-accent) 100%);
  color: #fff;
  border-radius: var(--vd-radius);
}

.vd-card {
  background: #fff;
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

.vd-steps {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.vd-step {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--vd-muted);
  font-weight: 600;
}

.vd-step .dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--vd-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  color: var(--vd-muted);
}

.vd-step.active .dot,
.vd-step.done .dot {
  background: var(--vd-primary);
  border-color: var(--vd-primary);
  color: #fff;
}

.vd-step.active { color: var(--vd-text); }
.vd-step.done { color: var(--vd-text); }

.vd-step-sep {
  width: 24px;
  height: 2px;
  background: var(--vd-border);
}

.btn-vd-primary {
  background: var(--vd-primary);
  border-color: var(--vd-primary);
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  padding: .6rem 1.4rem;
}
.btn-vd-primary:hover { background: var(--vd-primary-dark); border-color: var(--vd-primary-dark); color: #fff; }

.btn-vd-outline {
  border: 1px solid var(--vd-primary);
  color: var(--vd-primary);
  font-weight: 600;
  border-radius: 10px;
  background: #fff;
}
.btn-vd-outline:hover { background: #EEF2FF; color: var(--vd-primary-dark); }

.form-control, .form-select {
  border-radius: 10px;
  border: 1px solid var(--vd-border);
  padding: .6rem .85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--vd-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}

.otp-input {
  width: 3rem;
  height: 3.25rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid var(--vd-border);
}
.otp-input:focus { border-color: var(--vd-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }

.doc-thumb-wrap {
  position: relative;
  display: inline-block;
}

.doc-preview-pop {
  display: none;
  position: absolute;
  z-index: 20;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid var(--vd-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(16,24,40,.18);
  padding: 6px;
}
.doc-thumb-wrap:hover .doc-preview-pop,
.doc-thumb-wrap:focus-within .doc-preview-pop { display: block; }
.doc-preview-pop img { width: 220px; height: auto; border-radius: 6px; display: block; }

.doc-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EEF2FF;
  color: var(--vd-primary);
  border: 1px solid #E0E7FF;
}

.badge-status {
  font-weight: 600;
  padding: .4em .7em;
  border-radius: 999px;
  text-transform: capitalize;
}

.doc-type-card {
  cursor: pointer;
  border: 1px solid var(--vd-border);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  transition: all .15s ease;
  background: #fff;
}
.doc-type-card:hover { border-color: var(--vd-primary); background: #F5F7FF; }
.doc-type-card.selected { border-color: var(--vd-primary); background: #EEF2FF; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }

.vd-footer {
  color: var(--vd-muted);
  font-size: .875rem;
}

.recap-row + .recap-row { border-top: 1px solid var(--vd-border); }

.table-vd thead th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--vd-muted);
  border-bottom: 1px solid var(--vd-border);
}