:root {
  --bg: #eef4ff;
  --bg-accent: #dbe8ff;
  --card-bg: #ffffff;
  --text: #172033;
  --muted: #5f6b84;
  --border: #d5deef;
  --input-bg: #ffffff;
  --input-text: #172033;
  --input-border: #c8d4eb;
  --progress-bg: #c6d6fb;
  --progress-fill: #2f6df6;
}

body {
  background: radial-gradient(circle at top right, var(--bg-accent), var(--bg));
  color: var(--text);
  min-height: 100vh;
  transition: background 0.25s ease, color 0.25s ease;
}

.theme-dark {
  --bg: #0f1420;
  --bg-accent: #1b2638;
  --card-bg: #1a2232;
  --text: #e8eefc;
  --muted: #a6b4cf;
  --border: #33425d;
  --input-bg: #101827;
  --input-text: #e8eefc;
  --input-border: #3a4d70;
  --progress-bg: #2a3a59;
  --progress-fill: #74a3ff;
}

.theme-dark .card,
.theme-light .card {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.theme-dark .form-label,
.theme-light .form-label,
.theme-dark .form-check-label,
.theme-light .form-check-label,
.theme-dark h1,
.theme-light h1,
.theme-dark h2,
.theme-light h2,
.theme-dark p,
.theme-light p {
  color: var(--text);
}

.theme-dark .form-control,
.theme-dark .form-select,
.theme-dark textarea,
.theme-light .form-control,
.theme-light .form-select,
.theme-light textarea {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--input-border);
}

.theme-dark .form-control::placeholder,
.theme-light .form-control::placeholder,
.theme-dark textarea::placeholder,
.theme-light textarea::placeholder {
  color: var(--muted);
}

.theme-dark .btn-outline-secondary,
.theme-light .btn-outline-secondary {
  border-color: var(--input-border);
  color: var(--text);
}

.theme-dark .btn-outline-secondary:hover {
  background-color: #2a3a57;
  color: #f0f5ff;
  border-color: #4b6694;
}

.theme-dark .btn-outline-primary {
  border-color: #7aa7ff;
  color: #b9d2ff;
}

.theme-dark .btn-outline-primary:hover {
  background-color: #29446e;
  color: #f3f7ff;
  border-color: #8fb4ff;
}

.theme-dark .small,
.theme-light .small {
  color: var(--muted);
}

.theme-dark .alert-info {
  background-color: #173458;
  border-color: #2b578f;
  color: #d5e8ff;
}

.theme-dark .alert-success {
  background-color: #1a4b33;
  border-color: #2f7b55;
  color: #d8f7e6;
}

.theme-dark .alert-danger {
  background-color: #5a1f2a;
  border-color: #8d3445;
  color: #ffdbe1;
}

.progress {
  height: 10px;
  background-color: var(--progress-bg);
}

.progress-bar {
  background-color: var(--progress-fill);
}

.badge-remove-btn {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  width: auto !important;
}

.thanks-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 20, 34, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1080;
}

.thanks-modal-card {
  width: min(460px, 100%);
  border-radius: 12px;
  border: 1px solid #d8e1f0;
  background: #ffffff;
  color: #1c2941;
  box-shadow: 0 14px 36px rgba(9, 18, 35, 0.2);
  padding: 1.25rem;
}

.theme-dark .thanks-modal-card {
  background: #16233a;
  color: #eaf2ff;
  border-color: #405b83;
}

@media (max-width: 768px) {
  .btn {
    width: 100%;
  }
}

.brand-board {
  background: #fff;
  border: 1px solid #d8deea;
  border-radius: 16px;
  overflow: hidden;
}

.brand-board__stripe {
  height: 10px;
  background: linear-gradient(90deg, #e3001b 0%, #e3001b 38%, #004f9e 38%, #004f9e 68%, #4ab7e8 68%, #4ab7e8 100%);
}

.brand-board__stripe--bottom {
  margin-top: 24px;
}

.brand-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #de1b2a;
}

.brand-title span {
  color: #1f2a3f;
}

.brand-title .brand-uni {
  color: #de1b2a !important;
}

.brand-subtitle {
  color: #52627d;
  font-weight: 600;
}

.brand-tagline {
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #60718f;
  font-weight: 600;
  margin-top: -2px;
}

.hero-panel {
  border: 1px solid #e1e7f2;
  border-left: 5px solid #e3001b;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  background: linear-gradient(90deg, #ffffff 0%, #f6f9ff 100%);
}

.hero-panel h1 {
  color: #15223a;
  font-weight: 700;
}

.menu-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  border: 1px solid;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.menu-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(13, 22, 41, 0.14);
}

.menu-card__title {
  font-size: 1.1rem;
  font-weight: 700;
}

.menu-card__title .ti {
  margin-right: 6px;
  vertical-align: -1px;
}

.btn .ti,
h1 .ti,
h2 .ti,
h5 .ti {
  margin-right: 6px;
  vertical-align: -1px;
}

.menu-card__desc {
  font-size: 0.9rem;
  opacity: 0.92;
}

.menu-card--vendor {
  background: linear-gradient(120deg, #fff 0%, #eef5ff 100%);
  border-color: #b8cff5;
  color: #17376d;
}

.menu-card--candidate {
  background: linear-gradient(120deg, #fff 0%, #fff0f3 100%);
  border-color: #efb2be;
  color: #8b1629;
}

.theme-dark .brand-board {
  background: #111a2a;
  border-color: #2d3f5f;
}

.theme-dark .brand-title {
  color: #ff5a6e;
}

.theme-dark .brand-title span,
.theme-dark .hero-panel h1 {
  color: #e7efff;
}

.theme-dark .brand-subtitle {
  color: #aac1e7;
}

.theme-dark .brand-tagline {
  color: #b7c9e8;
}

.theme-dark .hero-panel {
  background: linear-gradient(90deg, #19253a 0%, #121d30 100%);
  border-color: #334869;
}

.theme-dark .menu-card--vendor {
  background: linear-gradient(120deg, #1c2b42 0%, #172236 100%);
  border-color: #37598a;
  color: #d7e6ff;
}

.theme-dark .menu-card--candidate {
  background: linear-gradient(120deg, #3a1f2a 0%, #2a1720 100%);
  border-color: #7f4151;
  color: #ffd9df;
}

.theme-dark .btn-outline-dark {
  color: #dce8ff;
  border-color: #58719b;
  background-color: transparent;
}

.theme-dark .btn-outline-dark:hover {
  color: #ffffff;
  background-color: #2c3f60;
  border-color: #87a6d8;
}

.theme-dark .table {
  color: #e6eeff;
  border-color: #3a4f70;
}

.theme-dark .table > :not(caption) > * > * {
  background-color: #152238;
  border-bottom-color: #3a4f70;
  color: #e6eeff;
}

.theme-dark .table-light > :not(caption) > * > * {
  background-color: #223554;
  color: #f2f7ff;
  border-color: #486287;
}

.theme-dark .vendor-code-btn {
  color: #9cc2ff !important;
}

.theme-dark .vendor-code-btn:hover {
  color: #cfe2ff !important;
}

.theme-dark .modal-content {
  background-color: #18263c;
  color: #eaf1ff;
  border-color: #435d84;
}

.theme-dark .modal-header {
  border-bottom-color: #425c83;
}

.theme-dark .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
}

.theme-dark select.form-select option {
  background: #101827;
  color: #e8eefc;
}

#app .brand-board h1.h4 {
  color: #1b2740;
  font-weight: 700;
}

#app .progress,
#candidate-app .progress {
  border-radius: 999px;
  height: 12px;
}

#app .progress-bar,
#candidate-app .progress-bar {
  background: linear-gradient(90deg, #e3001b 0%, #004f9e 62%, #4ab7e8 100%);
}

#app form section,
#candidate-app form section {
  border: 1px solid #e0e7f2;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius: 12px;
  padding: 1rem;
}

#app .btn-primary {
  background-color: #004f9e;
  border-color: #004f9e;
}

#app .btn-primary:hover {
  background-color: #003f80;
  border-color: #003f80;
}

#app .btn-success {
  background-color: #168b4d;
  border-color: #168b4d;
}

#app .btn-success:hover {
  background-color: #0f743f;
  border-color: #0f743f;
}

.theme-dark .brand-board h1.h4 {
  color: #e7efff;
}

.theme-dark form section {
  border-color: #344866;
  background: linear-gradient(180deg, #162339 0%, #111b2d 100%);
}

.theme-dark .form-label,
.theme-dark .form-check-label,
.theme-dark h2.h5 {
  color: #f2f7ff !important;
  font-weight: 600;
}

.theme-dark .form-control,
.theme-dark .form-select,
.theme-dark textarea {
  background-color: #0d1626 !important;
  color: #f4f8ff !important;
  border-color: #5a78a8 !important;
}

.theme-dark .form-control:focus,
.theme-dark .form-select:focus,
.theme-dark textarea:focus {
  border-color: #8fb6ff !important;
  box-shadow: 0 0 0 0.2rem rgba(112, 158, 255, 0.25) !important;
}

.theme-dark .form-control::placeholder,
.theme-dark textarea::placeholder {
  color: #b9caea !important;
}

.theme-dark .form-check-input {
  background-color: #0d1626;
  border-color: #6b88b6;
}

.theme-dark .form-check-input:checked {
  background-color: #4d8dff;
  border-color: #4d8dff;
}

.theme-dark .progress {
  background-color: #2c3f60;
  border: 1px solid #4e6a95;
}

.theme-dark .alert {
  color: #f3f7ff;
}

/* Vendor form specific dark mode hardening */
.vendor-form-page.theme-dark .vendor-form-shell {
  background: #0f1a2b;
  border-color: #324765;
}

.vendor-form-page.theme-dark .vendor-form-shell .brand-title,
.vendor-form-page.theme-dark .vendor-form-shell h1,
.vendor-form-page.theme-dark .vendor-form-shell h2,
.vendor-form-page.theme-dark .vendor-form-shell .form-label,
.vendor-form-page.theme-dark .vendor-form-shell .form-check-label,
.vendor-form-page.theme-dark .vendor-form-shell p,
.vendor-form-page.theme-dark .vendor-form-shell strong {
  color: #f1f6ff !important;
}

.vendor-form-page.theme-dark .vendor-form-shell form section {
  background: #17253a !important;
  border-color: #3f5a80 !important;
}

.vendor-form-page.theme-dark .vendor-form-shell .form-control,
.vendor-form-page.theme-dark .vendor-form-shell .form-select,
.vendor-form-page.theme-dark .vendor-form-shell textarea {
  background-color: #0f1a2b !important;
  color: #f4f8ff !important;
  border-color: #6486bc !important;
}

.vendor-form-page.theme-dark .vendor-form-shell .form-control::placeholder,
.vendor-form-page.theme-dark .vendor-form-shell textarea::placeholder {
  color: #b8cceb !important;
}