:root {
  --bg: #060606;
  --surface: #0d0d0d;
  --border: rgba(240, 237, 232, 0.08);
  --text: #f0ede8;
  --muted: rgba(240, 237, 232, 0.62);
  --green: #25D366;
  --green-light: rgba(37, 211, 102, 0.12);
  --green-dark: #25D366;

  --surface2: #111111;
  --surface3: #151515;
  --white: var(--text);
  --muted2: rgba(240, 237, 232, 0.45);
  --muted3: rgba(240, 237, 232, 0.28);
  --border2: rgba(240, 237, 232, 0.14);
  --green-dim: rgba(37, 211, 102, 0.18);
  --red: #f87171;
  --amber: #c9a84c;
  --amber-bg: rgba(201, 168, 76, 0.07);
  --blue: #3b82f6;
}

@keyframes bfBotBlink {
  0%, 100% {
    color: var(--text);
    text-shadow: none;
  }
  50% {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.28);
  }
}

body.bf-ds {
  background: var(--bg) !important;
  color: var(--text) !important;
  position: relative;
  overflow-x: hidden;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background-image:
    linear-gradient(rgba(240, 237, 232, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 237, 232, 0.06) 1px, transparent 1px) !important;
  background-size: 66px 66px !important;
  background-position: center center !important;
}

body.bf-ds::before,
body.bf-ds::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body.bf-ds::before {
  inset: -20% 18% auto;
  height: 440px;
  background: radial-gradient(circle at center, rgba(37, 211, 102, 0.18), rgba(37, 211, 102, 0.08) 34%, rgba(37, 211, 102, 0.02) 60%, transparent 74%);
  filter: blur(18px);
}

body.bf-ds::after {
  background: linear-gradient(180deg, rgba(6, 6, 6, 0.12), rgba(6, 6, 6, 0.54) 45%, rgba(6, 6, 6, 0.84));
}

body.bf-ds > * {
  position: relative;
  z-index: 1;
}

body.bf-ds *,
body.bf-ds *::before,
body.bf-ds *::after {
  box-shadow: none !important;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.bf-ds .hero-glow,
body.bf-ds .left-glow {
  display: none !important;
}

body.bf-ds .logo,
body.bf-ds .sidebar-logo,
body.bf-ds .card-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: var(--text) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body.bf-ds .logo svg,
body.bf-ds .sidebar-logo svg,
body.bf-ds .card-logo svg {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  fill: var(--green) !important;
}

body.bf-ds .logo span,
body.bf-ds .sidebar-logo span,
body.bf-ds .card-logo span {
  color: var(--green) !important;
  margin-left: 0.12em !important;
}

body.bf-ds .logo:hover,
body.bf-ds .sidebar-logo:hover,
body.bf-ds .card-logo:hover {
  animation: bfBotBlink 0.85s ease-in-out infinite;
}

body.bf-ds .logo:hover span,
body.bf-ds .sidebar-logo:hover span,
body.bf-ds .card-logo:hover span {
  color: var(--green) !important;
  text-shadow: none !important;
}

body.bf-ds nav,
body.bf-ds footer,
body.bf-ds .sidebar,
body.bf-ds .main,
body.bf-ds .topbar,
body.bf-ds .panel,
body.bf-ds .card,
body.bf-ds .kpi,
body.bf-ds .services,
body.bf-ds .h-box,
body.bf-ds .checkout-box,
body.bf-ds .plan-card,
body.bf-ds .trial-box,
body.bf-ds .guarantee,
body.bf-ds .info-box,
body.bf-ds .stripe-element,
body.bf-ds .order-line,
body.bf-ds .order-total,
body.bf-ds .success-icon,
body.bf-ds .stat {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

body.bf-ds .content,
body.bf-ds .hero,
body.bf-ds .page,
body.bf-ds .left,
body.bf-ds .right,
body.bf-ds .plans-col,
body.bf-ds .checkout-col,
body.bf-ds .main-wrapper,
body.bf-ds .section,
body.bf-ds .chart-wrap,
body.bf-ds .table-wrap {
  background: transparent !important;
  border-color: var(--border) !important;
}

body.bf-ds h1,
body.bf-ds h2,
body.bf-ds h3,
body.bf-ds h4,
body.bf-ds .topbar-title,
body.bf-ds .hero h1,
body.bf-ds .col-h2,
body.bf-ds .section h2 {
  color: var(--text) !important;
  font-weight: 700 !important;
}

body.bf-ds p,
body.bf-ds li,
body.bf-ds td,
body.bf-ds .section p,
body.bf-ds .section ul li,
body.bf-ds .benefit,
body.bf-ds .feat-item,
body.bf-ds .plan-desc,
body.bf-ds .order-line,
body.bf-ds .h-box,
body.bf-ds .subtitle,
body.bf-ds .kpi-title,
body.bf-ds .kpi-sub,
body.bf-ds .nav-item,
body.bf-ds .f-links a,
body.bf-ds .f-links button,
body.bf-ds .nav-back,
body.bf-ds small,
body.bf-ds .muted {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

body.bf-ds strong,
body.bf-ds th,
body.bf-ds label,
body.bf-ds .logo,
body.bf-ds .section-title,
body.bf-ds .eyebrow,
body.bf-ds .toggle-label,
body.bf-ds .plan-name,
body.bf-ds .step {
  color: var(--text) !important;
  font-weight: 600 !important;
}

body.bf-ds .logo span,
body.bf-ds .badge,
body.bf-ds .status-dot,
body.bf-ds .dot,
body.bf-ds .s-state,
body.bf-ds .s-state .dot,
body.bf-ds .eyebrow-bright,
body.bf-ds .save-badge,
body.bf-ds .save-tag,
body.bf-ds .trial-badge span,
body.bf-ds .btn-primary,
body.bf-ds .badge-popular,
body.bf-ds .section-num,
body.bf-ds .section a,
body.bf-ds a:hover,
body.bf-ds .b-text strong,
body.bf-ds .order-total-num {
  color: var(--green-dark) !important;
}

body.bf-ds .nav-item.active,
body.bf-ds .plan-card.selected,
body.bf-ds .step.active,
body.bf-ds .badge-active,
body.bf-ds .trial-badge,
body.bf-ds .highlight,
body.bf-ds .info-box,
body.bf-ds .btn-secondary:hover,
body.bf-ds .toggle.on,
body.bf-ds .tog.active,
body.bf-ds .b-icon,
body.bf-ds .success-icon,
body.bf-ds .chat-bubble-custom {
  background: var(--green-light) !important;
  border-color: var(--green) !important;
}

body.bf-ds .btn,
body.bf-ds .btn-submit,
body.bf-ds .btn-pay,
body.bf-ds .nav-cta,
body.bf-ds .cta,
body.bf-ds button[type='submit'],
body.bf-ds .btn-green {
  background: var(--green) !important;
  border: 1.5px solid var(--green) !important;
  color: var(--surface) !important;
  border-radius: 7px !important;
  font-weight: 600 !important;
}

body.bf-ds .btn:hover,
body.bf-ds .btn-submit:hover,
body.bf-ds .btn-pay:hover,
body.bf-ds .nav-cta:hover,
body.bf-ds .cta:hover,
body.bf-ds button[type='submit']:hover,
body.bf-ds .btn-green:hover {
  background: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
}

body.bf-ds .btn-red,
body.bf-ds .btn-logout,
body.bf-ds .add-btn,
body.bf-ds .btn-ghost,
body.bf-ds .btn-secondary,
body.bf-ds .nav-back,
body.bf-ds .toggle,
body.bf-ds .tog {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 7px !important;
}

body.bf-ds .sidebar,
body.bf-ds .sidebar-logo,
body.bf-ds .nav-item,
body.bf-ds .card,
body.bf-ds .panel,
body.bf-ds .kpi,
body.bf-ds .services,
body.bf-ds .h-box,
body.bf-ds .section,
body.bf-ds .plan-card,
body.bf-ds .checkout-box,
body.bf-ds .guarantee,
body.bf-ds .trial-box,
body.bf-ds .info-box,
body.bf-ds .stripe-element,
body.bf-ds input,
body.bf-ds select,
body.bf-ds textarea,
body.bf-ds table,
body.bf-ds .badge,
body.bf-ds .chat-bubble-custom {
  border-radius: 8px !important;
}

body.bf-ds .nav-item,
body.bf-ds .step,
body.bf-ds .f-links a,
body.bf-ds .f-links button {
  border-radius: 7px !important;
}

body.bf-ds .nav-item:hover,
body.bf-ds .f-links a:hover,
body.bf-ds .f-links button:hover,
body.bf-ds .btn-secondary:hover,
body.bf-ds .nav-back:hover {
  background: var(--bg) !important;
  color: var(--text) !important;
}

body.bf-ds input,
body.bf-ds select,
body.bf-ds textarea {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}

body.bf-ds input:focus,
body.bf-ds select:focus,
body.bf-ds textarea:focus,
body.bf-ds .stripe-element.focused {
  border-color: var(--green) !important;
  outline: none !important;
}

body.bf-ds input::placeholder,
body.bf-ds textarea::placeholder {
  color: var(--muted) !important;
}

body.bf-ds table,
body.bf-ds th,
body.bf-ds td,
body.bf-ds .order-line,
body.bf-ds .s-item {
  border-color: var(--border) !important;
}

body.bf-ds th {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600 !important;
  color: var(--muted) !important;
}

body.bf-ds .notif-badge {
  background: var(--text) !important;
  color: var(--surface) !important;
}

body.bf-ds .chat-bubble-custom svg {
  fill: var(--green-dark) !important;
}

body.bf-ds [style*='background:#060606'],
body.bf-ds [style*='background: #060606'],
body.bf-ds [style*='background:#0d0d0d'],
body.bf-ds [style*='background: #0d0d0d'],
body.bf-ds [style*='background:rgba(240,237,232'],
body.bf-ds [style*='background: rgba(240,237,232'] {
  background: var(--surface) !important;
}

body.bf-ds [style*='color:#f0ede8'],
body.bf-ds [style*='color: #f0ede8'],
body.bf-ds [style*='color:rgba(240,237,232'],
body.bf-ds [style*='color: rgba(240,237,232'] {
  color: var(--text) !important;
}

body.bf-ds .sidebar {
  background: #060606 !important;
  border-right: 1.5px solid rgba(240, 237, 232, 0.1) !important;
}

body.bf-ds .sidebar-logo,
body.bf-ds .sidebar-logo span {
  color: var(--green) !important;
}

body.bf-ds .sidebar-logo svg {
  fill: var(--green) !important;
}

body.bf-ds .nav-item {
  color: #f0ede8 !important;
}

body.bf-ds .nav-item svg {
  color: var(--green) !important;
  stroke: var(--green) !important;
}

body.bf-ds .nav-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f0ede8 !important;
}

body.bf-ds .nav-item.active {
  background: rgba(37, 211, 102, 0.12) !important;
  border-color: rgba(37, 211, 102, 0.34) !important;
  color: #f0ede8 !important;
}

body.bf-ds .nav-section,
body.bf-ds .sidebar-version {
  color: rgba(240, 237, 232, 0.72) !important;
}

body.bf-ds .sidebar-bottom {
  border-top-color: rgba(240, 237, 232, 0.1) !important;
}

@media (max-width: 960px) {
  body.bf-ds .sidebar {
    position: static !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1.5px solid var(--border) !important;
  }

  body.bf-ds .main {
    margin-left: 0 !important;
  }
}