:root {
  --brand-primary: #98fb98;
  --brand-primary-hover: #83d983;
  --brand-primary-contrast: #06120c;
  --brand-page-bg: #06120c;
  --brand-surface: #0b1a12;
  --brand-surface-alt: #17251c;
  --brand-border: #405047;
  --brand-control-border: #718078;
  --brand-text-preferred: #f7fff7;
  --brand-text: #f7fff7;
  --brand-text-on-page: #f7fff7;
  --brand-text-on-surface: #f7fff7;
  --brand-text-on-primary: #06120c;
  --brand-text-on-surface-alt: #f7fff7;
  --brand-page-text: #f7fff7;
  --brand-surface-alt-text: #f7fff7;
  --brand-text-muted: #afb9b1;
  --brand-text-muted-on-page: #afb9b1;
  --brand-text-muted-on-surface-alt: #afb9b1;
  --brand-page-text-muted: #afb9b1;
  --brand-surface-alt-text-muted: #afb9b1;
  --brand-text-inverse: #06120c;
  --brand-input-text: #f7fff7;
  --brand-input-placeholder: #afb9b1;
  --brand-primary-text: #98fb98;
  --brand-primary-page-text: #98fb98;
  --brand-primary-surface-alt-text: #98fb98;
  --brand-focus: #98fb98;
  --brand-focus-page: #98fb98;
  --brand-focus-input: #98fb98;
}

html[data-tenant-branding="true"] body {
  background: var(--brand-page-bg) !important;
  color: var(--brand-text-on-page) !important;
}

html[data-tenant-branding="true"] .app,
html[data-tenant-branding="true"] .main,
html[data-tenant-branding="true"] .page {
  background: var(--brand-page-bg) !important;
}

html[data-tenant-branding="true"] .side,
html[data-tenant-branding="true"] .top {
  background: var(--brand-surface) !important;
  border-color: var(--brand-border) !important;
  color: var(--brand-text-on-surface) !important;
}

html[data-tenant-branding="true"] .page > h1,
html[data-tenant-branding="true"] .page > h2,
html[data-tenant-branding="true"] .page > h3,
html[data-tenant-branding="true"] .v2-section-head h2,
html[data-tenant-branding="true"] .v2-section-head h3 {
  color: var(--brand-text-on-page) !important;
}

html[data-tenant-branding="true"] .card,
html[data-tenant-branding="true"] .item,
html[data-tenant-branding="true"] .hero,
html[data-tenant-branding="true"] .usage-card,
html[data-tenant-branding="true"] .action-card,
html[data-tenant-branding="true"] .workflow-hero,
html[data-tenant-branding="true"] .application-card,
html[data-tenant-branding="true"] .funding-dossier,
html[data-tenant-branding="true"] .opportunity-card,
html[data-tenant-branding="true"] .mvp-metric,
html[data-tenant-branding="true"] .mvp-list-row,
html[data-tenant-branding="true"] .mvp-grant-card,
html[data-tenant-branding="true"] .mvp-modal-panel,
html[data-tenant-branding="true"] .credit-dialog,
html[data-tenant-branding="true"] .credit-dialog-body,
html[data-tenant-branding="true"] .affiliate-stat,
html[data-tenant-branding="true"] .profile-info,
html[data-tenant-branding="true"] .summary-card,
html[data-tenant-branding="true"] .upgrade-box,
html[data-tenant-branding="true"] .check-list > div,
html[data-tenant-branding="true"] .simple-step-row .step,
html[data-tenant-branding="true"] .plan-card-clean,
html[data-tenant-branding="true"] .artifact-card,
html[data-tenant-branding="true"] .billing-note,
html[data-tenant-branding="true"] .match-disclosure {
  background: var(--brand-surface) !important;
  border-color: var(--brand-border) !important;
  color: var(--brand-text-on-surface) !important;
}

html[data-tenant-branding="true"] .card h1,
html[data-tenant-branding="true"] .card h2,
html[data-tenant-branding="true"] .card h3,
html[data-tenant-branding="true"] .card h4,
html[data-tenant-branding="true"] .card p,
html[data-tenant-branding="true"] .card label,
html[data-tenant-branding="true"] .item h1,
html[data-tenant-branding="true"] .item h2,
html[data-tenant-branding="true"] .item h3,
html[data-tenant-branding="true"] .item h4,
html[data-tenant-branding="true"] .item p,
html[data-tenant-branding="true"] .billing-note,
html[data-tenant-branding="true"] .match-disclosure {
  color: var(--brand-text-on-surface) !important;
}

html[data-tenant-branding="true"] .side .brand h1,
html[data-tenant-branding="true"] .nav button,
html[data-tenant-branding="true"] .v2-user,
html[data-tenant-branding="true"] .top {
  color: var(--brand-text-on-surface) !important;
}

html[data-tenant-branding="true"] .nav-group,
html[data-tenant-branding="true"] .side .brand p,
html[data-tenant-branding="true"] .v2-top-note,
html[data-tenant-branding="true"] .v2-user-copy span {
  color: var(--brand-text-muted) !important;
}

html[data-tenant-branding="true"] input,
html[data-tenant-branding="true"] textarea,
html[data-tenant-branding="true"] select,
html[data-tenant-branding="true"] .v2-user,
html[data-tenant-branding="true"] .affiliate-link-box {
  background: var(--brand-surface-alt) !important;
  border-color: var(--brand-control-border) !important;
  color: var(--brand-input-text) !important;
}

html[data-tenant-branding="true"] input::placeholder,
html[data-tenant-branding="true"] textarea::placeholder {
  color: var(--brand-input-placeholder) !important;
  opacity: 1;
}

html[data-tenant-branding="true"] .btn:not(.secondary),
html[data-tenant-branding="true"] button.btn:not(.secondary),
html[data-tenant-branding="true"] .notice-badge,
html[data-tenant-branding="true"] .v2-avatar,
html[data-tenant-branding="true"] input[type="checkbox"]:checked {
  background: var(--brand-primary) !important;
  color: var(--brand-text-on-primary) !important;
}

html[data-tenant-branding="true"] .btn:not(.secondary):hover {
  background: var(--brand-primary-hover) !important;
}

html[data-tenant-branding="true"] .btn.secondary {
  background: var(--brand-surface-alt) !important;
  border-color: var(--brand-control-border) !important;
  color: var(--brand-text-on-surface-alt) !important;
}

html[data-tenant-branding="true"] .pill,
html[data-tenant-branding="true"] .mvp-status,
html[data-tenant-branding="true"] a:not(.btn) {
  color: var(--brand-primary-page-text) !important;
  border-color: var(--brand-border) !important;
}

html[data-tenant-branding="true"] .card a:not(.btn),
html[data-tenant-branding="true"] .item a:not(.btn) {
  color: var(--brand-primary-text) !important;
}

html[data-tenant-branding="true"] .side a:not(.btn),
html[data-tenant-branding="true"] .nav button.active {
  color: var(--brand-primary-text) !important;
}

html[data-tenant-branding="true"] .nav button.active {
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--brand-surface)) !important;
}

html[data-tenant-branding="true"] .nav button.active::before,
html[data-tenant-branding="true"] .progress span,
html[data-tenant-branding="true"] progress::-webkit-progress-value {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

html[data-tenant-branding="true"] .muted,
html[data-tenant-branding="true"] .mini,
html[data-tenant-branding="true"] .mvp-eyebrow,
html[data-tenant-branding="true"] .mvp-metric span {
  color: var(--brand-text-muted-on-page) !important;
}

html[data-tenant-branding="true"] .card .muted,
html[data-tenant-branding="true"] .card .mini,
html[data-tenant-branding="true"] .item .muted,
html[data-tenant-branding="true"] .item .mini,
html[data-tenant-branding="true"] .mvp-modal-panel .muted,
html[data-tenant-branding="true"] .billing-note .muted,
html[data-tenant-branding="true"] .match-disclosure .muted,
html[data-tenant-branding="true"] .match-disclosure .mini {
  color: var(--brand-text-muted) !important;
}

html[data-tenant-branding="true"] .side .muted,
html[data-tenant-branding="true"] .side .mini,
html[data-tenant-branding="true"] .top .muted,
html[data-tenant-branding="true"] .top .mini {
  color: var(--brand-text-muted) !important;
}

html[data-tenant-branding="true"] input:focus,
html[data-tenant-branding="true"] textarea:focus,
html[data-tenant-branding="true"] select:focus {
  border-color: var(--brand-focus-input) !important;
  outline: 3px solid var(--brand-focus-input) !important;
  outline-offset: 2px;
}

html[data-tenant-branding="true"] button:focus-visible,
html[data-tenant-branding="true"] a:focus-visible {
  border-color: var(--brand-focus-page) !important;
  outline: 3px solid var(--brand-focus-page) !important;
  outline-offset: 2px;
}

html[data-tenant-branding="true"] .card button:focus-visible,
html[data-tenant-branding="true"] .card a:focus-visible,
html[data-tenant-branding="true"] .item button:focus-visible,
html[data-tenant-branding="true"] .item a:focus-visible {
  border-color: var(--brand-focus) !important;
  outline-color: var(--brand-focus) !important;
}

html[data-tenant-branding="true"] .side button:focus-visible,
html[data-tenant-branding="true"] .side a:focus-visible,
html[data-tenant-branding="true"] .top button:focus-visible,
html[data-tenant-branding="true"] .top a:focus-visible {
  border-color: var(--brand-focus) !important;
  outline-color: var(--brand-focus) !important;
}

.brand-controls {
  display: grid;
  gap: 16px;
  margin: 18px 0;
}

#whiteControls {
  grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1.15fr) !important;
  align-items: start;
}

.brand-portal-card,
.brand-preview-card {
  min-width: 0;
}

.brand-access-card {
  grid-column: 1 / -1;
}

.brand-field label,
.brand-logo-field > span {
  display: block;
  margin-bottom: 7px;
  color: var(--brand-text-muted, var(--muted));
  font-size: 12px;
  font-weight: 750;
}

.brand-color-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
}

.brand-color-row input[type="color"] {
  min-height: 48px;
  padding: 5px !important;
  cursor: pointer;
}

.brand-logo-actions,
.brand-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-logo-current {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin: 10px 0;
}

.brand-logo-current img,
.mvp-brand-preview img {
  width: 72px;
  height: 56px;
  flex: 0 0 auto;
  border: 1px solid var(--brand-border, var(--line));
  border-radius: 12px;
  background: var(--brand-surface-alt, #101812);
  object-fit: contain;
}

.mvp-brand-preview {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 390px;
  padding: 0 !important;
  overflow: hidden;
  color: var(--preview-page-text, #f7fff7);
  background: var(--preview-page, #06120c) !important;
  border-color: var(--preview-border, rgba(255, 255, 255, 0.18)) !important;
}

.mvp-brand-preview-sidebar {
  position: relative;
  padding: 18px 12px;
  background: var(--preview-surface, #0b1a12);
  color: var(--preview-text-on-surface, #f7fff7);
}

.mvp-brand-preview-sidebar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--preview-primary, #98fb98);
}

.mvp-brand-preview-brand {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
  overflow-wrap: anywhere;
}

.mvp-brand-preview-brand img {
  width: 46px;
  height: 38px;
}

.mvp-brand-preview-nav {
  display: grid;
  gap: 7px;
}

.mvp-brand-preview-nav span {
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--preview-muted, #aebbad);
  font-size: 9px;
}

.mvp-brand-preview-nav span.active {
  background: var(--preview-primary-soft, rgba(152, 251, 152, 0.12));
  color: var(--preview-primary-text, #98fb98);
}

.mvp-brand-preview-main {
  min-width: 0;
  padding: 16px;
  background: var(--preview-page, #06120c);
  color: var(--preview-page-text, #f7fff7);
}

.mvp-brand-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
}

.mvp-brand-preview-search {
  width: 58%;
  height: 24px;
  border: 1px solid var(--preview-border, rgba(255, 255, 255, 0.18));
  border-radius: 8px;
  background: var(--preview-surface-alt, #122219);
}

.mvp-brand-preview-avatar {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--preview-primary, #98fb98);
  color: var(--preview-primary-contrast, #06120c);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
}

.mvp-brand-preview-heading {
  margin: 0;
  color: var(--preview-page-text, #f7fff7);
  font-size: 18px;
}

.mvp-brand-preview-muted {
  margin: 5px 0 14px;
  color: var(--preview-page-muted, #aebbad);
  font-size: 10px;
}

.mvp-brand-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mvp-brand-preview-surface {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--preview-border, rgba(255, 255, 255, 0.18));
  border-radius: 11px;
  background: var(--preview-surface, #0b1a12);
  color: var(--preview-text-on-surface, #f7fff7);
}

.mvp-brand-preview-surface strong {
  display: block;
  margin-top: 5px;
  color: var(--preview-text-on-surface, #f7fff7);
  font-size: 15px;
}

.mvp-brand-preview-surface span,
.mvp-brand-preview-activity p {
  color: var(--preview-muted, #aebbad);
  font-size: 9px;
}

.mvp-brand-preview-activity {
  margin-top: 8px;
}

.mvp-brand-preview-button {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 13px;
  border-radius: 9px;
  background: var(--preview-primary, #98fb98);
  color: var(--preview-text-on-primary, #06120c);
  font-weight: 800;
}

@media (max-width: 640px) {
  #whiteControls {
    grid-template-columns: 1fr !important;
  }

  .brand-access-card {
    grid-column: auto;
  }

  .mvp-brand-preview {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .mvp-brand-preview-grid {
    grid-template-columns: 1fr;
  }

  .brand-form-actions,
  .brand-logo-actions {
    flex-direction: column;
  }

  .brand-form-actions .btn,
  .brand-logo-actions .btn {
    width: 100%;
  }
}