@font-face {
  font-family: inter;
  src: url("/branding/fonts/Inter.ttf") format("truetype");
  font-display: swap;
}

:root {
  --tc-accent: #00FFFF;
  --tc-ink: #000000;
}

/* Dex login / Verify / device — same chrome as password.html and totp_verify.html */
.nb-container,
.nb-heading,
.nb-subheading,
.nb-label,
.nb-input,
.nb-btn,
.nb-link,
.nb-error {
  font-family: inter, ui-sans-serif, system-ui, sans-serif !important;
}

.nb-heading {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.nb-subheading,
.nb-label {
  opacity: 1 !important;
  visibility: visible !important;
}

.nb-logo {
  width: 220px !important;
  height: 74px !important;
  margin-bottom: 40px;
  background: url("/branding/varieties/Dark-Mode-Horizontal-LOGO.png") center / contain no-repeat !important;
}

.nb-logo svg {
  display: none !important;
}

.nb-btn {
  background-color: var(--tc-accent) !important;
  color: var(--tc-ink) !important;
  -webkit-text-fill-color: var(--tc-ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.nb-btn:hover {
  background-color: #00e6e6 !important;
  color: var(--tc-ink) !important;
  -webkit-text-fill-color: var(--tc-ink) !important;
}

.nb-input:focus {
  border-color: var(--tc-accent) !important;
}

.nb-link {
  color: var(--tc-accent) !important;
}

/* App header: full horizontal wordmark, two +30% steps from vendor 22px (38px). */
img[alt="NetBird Logo"],
img[alt="NetBird"] {
  padding: 0 !important;
  background: none !important;
  object-fit: contain;
  object-position: left center;
  height: 38px !important;
  max-height: 38px !important;
  width: auto !important;
  max-width: 12rem !important;
  vertical-align: middle;
}

/* Accent remap: NetBird orange #f68330 → cyan. Ink on cyan must stay black. */
.bg-netbird,
.bg-netbird\/100,
.enabled\:bg-netbird:enabled,
.enabled\:dark\:bg-netbird:is(.dark *):enabled {
  background-color: var(--tc-accent) !important;
  color: var(--tc-ink) !important;
  -webkit-text-fill-color: var(--tc-ink) !important;
}

.bg-netbird *,
.bg-netbird\/100 *,
.enabled\:bg-netbird:enabled *,
.enabled\:dark\:bg-netbird:is(.dark *):enabled * {
  color: var(--tc-ink) !important;
  -webkit-text-fill-color: var(--tc-ink) !important;
}

[class*="bg-netbird"][data-state="checked"],
.dark\:data-\[state\=checked\]\:bg-netbird[data-state="checked"]:is(.dark *) {
  background-color: var(--tc-accent) !important;
}

[role="switch"][data-state="checked"][class*="netbird"] {
  background-color: var(--tc-accent) !important;
}

.hover\:bg-netbird-500:hover,
.enabled\:hover\:bg-netbird-500:hover:enabled {
  background-color: #00e6e6 !important;
}

.bg-netbird\/10,
.hover\:bg-netbird\/20:hover {
  background-color: #00ffff1a !important;
}

.bg-netbird\/20 {
  background-color: #00ffff33 !important;
}

.bg-netbird\/5 {
  background-color: #00ffff0d !important;
}

.fill-netbird,
.group\/trigger[data-state="active"] .group-data-\[state\=active\]\/trigger\:fill-netbird {
  fill: var(--tc-accent) !important;
}

.text-netbird,
.text-netbird-400,
.text-netbird-400\/80,
.text-netbird-500,
.text-netbird\/90,
.hover\:text-netbird:hover {
  color: var(--tc-accent) !important;
}

.border-netbird,
.border-netbird-400,
.border-netbird-400\/20,
.border-netbird-400\/30,
.border-netbird-500,
.border-netbird\/30,
.border-netbird\/40,
.border-netbird\/60 {
  border-color: var(--tc-accent) !important;
}

.outline-netbird {
  outline-color: var(--tc-accent) !important;
}

.from-netbird {
  --tw-gradient-from: #00ffff var(--tw-gradient-from-position);
}

.to-netbird-400 {
  --tw-gradient-to: #00ffff var(--tw-gradient-to-position);
}

.enabled\:focus\:ring-netbird-400\/50:focus:enabled,
.dark\:focus\:ring-netbird-600\/50:focus:is(.dark *) {
  --tw-ring-color: #00ffff80;
}