.portal-logo {
  width: auto;
  max-width: 240px;
  max-height: 52px;
  height: auto;
  object-fit: contain;
  display: block;
}
html.customer-theme {
  background: var(--brand-page);
}
.customer-theme .auth-panel,
.customer-theme .app-top,
.customer-theme .card,
.customer-theme .side {
  background: var(--brand-panel);
  color: var(--panel-ink);
}
.customer-theme .auth-panel {
  --ink: var(--panel-ink);
}
.customer-theme .auth-visual {
  background: #15191e;
  color: #fff;
}
.customer-theme .btn {
  color: var(--brand-on-primary);
}
.customer-theme .btn.secondary,
.customer-theme .btn.outline {
  background: var(--brand-panel);
  color: var(--panel-ink);
  border: 1px solid var(--brand-border);
}
.customer-theme input,
.customer-theme select,
.customer-theme textarea {
  background: var(--brand-panel);
  color: var(--panel-ink);
  border-color: var(--brand-border);
}
.customer-theme .chip {
  background: var(--navy);
  color: var(--brand-on-secondary);
}
@media (max-width: 600px) {
  .portal-logo {
    max-width: 180px;
    max-height: 42px;
  }
}
.portal-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.customer-theme .card,
.customer-theme .side,
.customer-theme .app-top {
  --ink: var(--panel-ink);
}
.customer-theme .btn:hover {
  background: var(--signal);
  color: var(--brand-on-primary);
  box-shadow: 0 0 0 2px var(--action);
}
.customer-theme .btn.secondary:hover,
.customer-theme .btn.outline:hover {
  background: var(--brand-panel);
  color: var(--panel-ink);
}