@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;900&family=Instrument+Sans:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
  --black: #000000;
  --black-1: #0a0a0a;
  --black-2: #111111;
  --white: #ffffff;
  --gray-1: #f0f0f0;
  --gray-2: #c8c8c8;
  --gray-3: #b0b0b0;
  --gray-4: #989898;
  --gray-5: #828282;
  --border: rgba(255, 255, 255, 0.08);
  --border-md: rgba(255, 255, 255, 0.14);

  /* Override per-page accent systems to monochrome while keeping semantics functional. */
  --bg: var(--black);
  --bg-elevated: var(--black-1);
  --bg-card: var(--black-1);
  --bg-card-hover: var(--black-2);
  --text-primary: var(--gray-1);
  --text-secondary: var(--gray-2);
  --text-tertiary: var(--gray-3);
  --text-muted: var(--gray-4);
  --accent: var(--white);
  --accent-bright: var(--white);
  --accent-dim: rgba(255, 255, 255, 0.08);
  --border-accent: var(--border-md);
  --cyan: var(--gray-1);
  --yellow: var(--gray-2);
}

body {
  background: var(--black) !important;
  color: var(--gray-1) !important;
  font-family: 'Instrument Sans', sans-serif !important;
}

body::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
}

.glow {
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.05) 0%, transparent 70%) !important;
}

.brand-name,
.tb-brand-name,
.brand-link .brand-name {
  background: none !important;
  -webkit-text-fill-color: var(--white) !important;
  color: var(--white) !important;
  font-family: 'Unbounded', sans-serif !important;
  letter-spacing: 0.08em !important;
}

.brand-sub,
.tb-page,
.sec-hdr,
.doc-badge,
.mode-badge,
.mini,
.foot,
.field label {
  color: var(--gray-3) !important;
}

.card,
.doc-content,
.agree-card,
.disc-scroll,
.modal,
.danger-zone,
.welcome-banner,
.point,
.item {
  background: var(--black-1) !important;
  border-color: var(--border-md) !important;
}

.pf-box,
.feed-status,
.tc-row,
.checkbox-row,
.inst-tag,
.inst-quick-btn,
.inst-add-row input,
.field input,
.otp-box {
  background: var(--black-2) !important;
  border-color: var(--border) !important;
  color: var(--gray-1) !important;
}

.field input::placeholder {
  color: var(--gray-4) !important;
}

.field input:focus,
.otp-box:focus,
.inst-add-row input:focus {
  border-color: var(--gray-2) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06) !important;
}

.btn-primary,
a.primary,
.go-dashboard {
  background: var(--white) !important;
  color: var(--black) !important;
  border: 1px solid var(--white) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
a.primary:hover,
.go-dashboard:hover {
  opacity: 0.9 !important;
}

.btn-secondary,
a.secondary,
.tb-btn,
.btn-red,
.btn-green,
.btn-agree {
  background: var(--black-2) !important;
  color: var(--gray-2) !important;
  border-color: var(--border-md) !important;
}

.tb-btn:hover,
.btn-secondary:hover,
a.secondary:hover,
.btn-red:hover,
.btn-green:hover,
.btn-agree:hover {
  color: var(--white) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.badge-blue,
.badge-green,
.badge-red,
.badge-yellow,
.mode-login,
.mode-register,
.doc-badge,
.disc-badge {
  background: var(--black-2) !important;
  border-color: var(--border-md) !important;
  color: var(--gray-1) !important;
}

.disc-sec-title {
  color: var(--gray-1) !important;
}

.disc-sec-title::after {
  background: var(--border) !important;
}

.disc-list li::before,
.mk-icon,
.feat-icon,
.wb-icon,
.icon,
.success-icon,
.otp-icon {
  filter: grayscale(1);
}

.warning,
.highlight {
  color: var(--gray-1) !important;
  font-weight: 700 !important;
}

.topbar {
  background: rgba(0, 0, 0, 0.9) !important;
  border-bottom: 1px solid var(--border) !important;
}

a,
.field-link,
.link-row a,
.resend-row .resend-link,
.page-footer a,
.doc-content a {
  color: var(--gray-1) !important;
}

a:hover,
.field-link:hover,
.link-row a:hover,
.resend-row .resend-link:hover,
.page-footer a:hover,
.doc-content a:hover {
  color: var(--white) !important;
}

.logo-img,
.brand-logo,
.tb-logo-img {
  object-fit: cover !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-md) !important;
  box-shadow: none !important;
}