:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --fb-bg: #020617;
  --fb-bg-soft: #0f172a;
  --fb-surface: #111827;
  --fb-section: #0b1220;
  --fb-surface-raised: #1e293b;
  --fb-border: rgba(148, 163, 184, 0.24);
  --fb-text: #f8fafc;
  --fb-text-soft: #dbe4ef;
  --fb-text-muted: #94a3b8;
  --fb-accent: #f97316;
  --fb-accent-hover: #fb923c;
  --fb-ok: #34d399;
  --fb-ok-bg: rgba(6, 78, 59, 0.72);
  --fb-warning: #fbbf24;
  --fb-danger: #f87171;
  --fb-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  --ng-bg: var(--fb-bg);
  --ng-bg-soft: var(--fb-bg-soft);
  --ng-bg-elevated: var(--fb-surface);
  --ng-border: var(--fb-border);
  --ng-orange: var(--fb-accent);
  --ng-orange-hover: var(--fb-accent-hover);
  --ng-lime: var(--fb-ok);
  --ng-lime-hover: #6ee7b7;
  --ng-text: var(--fb-text);
  --ng-text-soft: var(--fb-text-soft);
  --ng-text-muted: var(--fb-text-muted);
  --ng-surface-light: var(--fb-section);
  --ng-surface-light-alt: var(--fb-surface-raised);
  --ng-surface-border: var(--fb-border);
  --ng-text-dark: var(--fb-text);
  --ng-text-dark-soft: var(--fb-text-muted);
  --fb-radius-shell: 0.5rem;
  --fb-ring-line: 0 0 0 1px var(--fb-border);
  --fb-shadow-elevated: var(--fb-shadow);
}

:root[data-theme="light"] {
  color-scheme: light;
  --fb-bg: #f8fafc;
  --fb-bg-soft: #f1f5f9;
  --fb-surface: #ffffff;
  --fb-section: #ffffff;
  --fb-surface-raised: #f8fafc;
  --fb-border: rgba(15, 23, 42, 0.13);
  --fb-text: #0f172a;
  --fb-text-soft: #334155;
  --fb-text-muted: #64748b;
  --fb-ok-bg: #dcfce7;
  --fb-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  background: var(--fb-bg) !important;
  color: var(--fb-text) !important;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fb-app-main {
  background: var(--fb-bg) !important;
}

.navbar-ng {
  background: color-mix(in srgb, var(--fb-surface) 94%, transparent) !important;
  border-bottom: 1px solid var(--fb-border) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(16px);
}

.navbar-ng .container-xl {
  gap: 0.75rem;
}

.navbar-ng .nav-link,
.navbar-ng .navbar-brand {
  min-height: 2.25rem;
  padding: 0.45rem 0.7rem !important;
  border-radius: 0.5rem;
  color: var(--fb-text-muted) !important;
  font-weight: 750;
  letter-spacing: 0;
}

.navbar-ng .nav-link:hover,
.navbar-ng .nav-link:focus,
.navbar-ng .nav-link.is-active {
  background: color-mix(in srgb, var(--fb-accent) 14%, transparent) !important;
  color: var(--fb-text) !important;
}

.navbar-ng .navbar-toggler,
.language-toggle {
  border: 1px solid var(--fb-border) !important;
  border-radius: 0.5rem !important;
  background: var(--fb-surface-raised) !important;
  color: var(--fb-text) !important;
  box-shadow: none !important;
}

.navbar-ng .auth-menu-trigger {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--fb-text) !important;
  box-shadow: none !important;
}

.navbar-ng .auth-menu-trigger:hover,
.navbar-ng .auth-menu-trigger:focus,
.navbar-ng .auth-menu-trigger.show {
  background: transparent !important;
  box-shadow: none !important;
}

.navbar-ng .auth-menu-trigger-inner {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.navbar-ng .auth-menu-avatar {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.auth-dropdown-menu {
  max-width: min(18rem, calc(100vw - 1rem));
  border-color: var(--fb-border) !important;
  border-radius: 0.5rem !important;
  background: var(--fb-surface) !important;
  color: var(--fb-text) !important;
  box-shadow: var(--fb-shadow) !important;
}

.dropdown-item,
.dropdown-header,
.auth-dropdown-name,
.auth-dropdown-email {
  color: var(--fb-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--fb-surface-raised) !important;
}

.ng-card,
.card,
.modal-content,
.briefing-shell,
.content-page .guide.ng-card,
#page-home .briefing-shell,
#page-premium .guide.ng-card,
#page-account .guide.ng-card,
#page-favorites .guide.ng-card {
  border: 1px solid var(--fb-border) !important;
  border-radius: 0.5rem !important;
  background: var(--fb-surface) !important;
  color: var(--fb-text) !important;
  box-shadow: var(--fb-shadow) !important;
}

.ng-section-light,
.ng-section-light-muted,
.account-settings-section,
.premium-manage-card,
.premium-includes-stack,
.premium-plan-card,
.home-context-panel,
.weather-grid > div,
.about-block,
.guide-card,
.ofp-summary-card,
.chart-ai-output,
.account-favorites-list,
.profile-webauthn-card {
  border: 1px solid var(--fb-border) !important;
  border-radius: 0.5rem !important;
  background: var(--fb-section) !important;
  color: var(--fb-text) !important;
  box-shadow: none !important;
}

.page-title,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--fb-text) !important;
  letter-spacing: 0;
}

.page-lead,
.ng-text-soft,
.ng-text-muted,
.small,
.chart p,
.chart-meta,
.source-note,
.form-text {
  color: var(--fb-text-muted) !important;
}

.eyebrow {
  color: var(--fb-accent) !important;
  letter-spacing: 0.08em;
}

.btn {
  border-radius: 0.5rem !important;
  font-weight: 750 !important;
  letter-spacing: 0;
  box-shadow: none !important;
}

.btn-ng-orange,
.btn-ng-primary {
  --bs-btn-color: #111827;
  --bs-btn-bg: var(--fb-accent);
  --bs-btn-border-color: var(--fb-accent);
  --bs-btn-hover-color: #111827;
  --bs-btn-hover-bg: var(--fb-accent-hover);
  --bs-btn-hover-border-color: var(--fb-accent-hover);
}

.btn-outline-ng-orange,
.btn-outline-ng-lime,
.btn-outline-danger {
  background: var(--fb-surface) !important;
  border-color: var(--fb-border) !important;
  color: var(--fb-text) !important;
}

.btn-outline-ng-orange:hover,
.btn-outline-ng-lime:hover,
.btn-outline-danger:hover {
  background: var(--fb-surface-raised) !important;
  border-color: color-mix(in srgb, var(--fb-accent) 60%, var(--fb-border)) !important;
}

.form-control,
.form-select,
.input-group-text {
  min-width: 0;
  border-color: var(--fb-border) !important;
  border-radius: 0.5rem !important;
  background-color: var(--fb-bg-soft) !important;
  color: var(--fb-text) !important;
}

.form-control::placeholder {
  color: var(--fb-text-muted) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--fb-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fb-accent) 24%, transparent) !important;
}

.briefing-mode-tabs {
  background: var(--fb-bg-soft) !important;
  border-color: var(--fb-border) !important;
}

.briefing-mode-tab {
  color: var(--fb-text-muted) !important;
}

.briefing-mode-tab.is-active {
  background: var(--fb-surface) !important;
  color: var(--fb-accent) !important;
  box-shadow: 0 0 0 1px var(--fb-border) !important;
}

.accordion,
.accordion-item,
.accordion-button,
.accordion-body,
.list-group-item,
.table,
.table-ng {
  background-color: var(--fb-surface) !important;
  border-color: var(--fb-border) !important;
  color: var(--fb-text) !important;
}

.accordion-button:not(.collapsed) {
  background: var(--fb-section) !important;
  color: var(--fb-text) !important;
}

.badge-ng-lime,
.support-status-ok {
  background: var(--fb-ok-bg) !important;
  border: 1px solid color-mix(in srgb, var(--fb-ok) 55%, transparent) !important;
  color: var(--fb-text) !important;
}

:root[data-theme="light"] .badge-ng-lime,
:root[data-theme="light"] .support-status-ok {
  color: #064e3b !important;
}

.badge-ng-orange,
.support-status-amber {
  background: rgba(251, 191, 36, 0.18) !important;
  border: 1px solid rgba(251, 191, 36, 0.5) !important;
  color: var(--fb-text) !important;
}

.airline-code,
.airline-logo-text,
.ops-airline-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.fb-icon-button {
  display: inline-grid !important;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  place-items: center;
  padding: 0 !important;
  border-radius: 999px !important;
}

.fb-icon-button::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ops-dashboard-grid,
.ops-route-grid {
  display: grid;
  gap: 0.75rem;
}

.ops-dashboard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.85rem;
}

.ops-panel,
.ops-route-card,
.ops-mini-row {
  border: 1px solid var(--fb-border);
  border-radius: 0.5rem;
  background: var(--fb-section);
  color: var(--fb-text);
}

.ops-panel {
  min-width: 0;
  padding: 0.75rem;
}

.ops-panel h2,
.ops-panel h3 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 850;
}

.ops-panel p,
.ops-empty {
  margin: 0.35rem 0 0;
  color: var(--fb-text-muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.ops-mini-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  text-align: left;
}

.ops-mini-row + .ops-mini-row {
  margin-top: 0.45rem;
}

.ops-mini-row strong,
.ops-mini-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-route-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
}

.ops-route-card-main {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.ops-route-card-main strong,
.ops-route-card-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-airline-code {
  color: var(--fb-accent);
  font-size: 0.7rem;
  font-weight: 900;
}

.theme-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.theme-choice {
  display: grid;
  gap: 0.35rem;
  min-height: 4.5rem;
  padding: 0.75rem;
  border: 1px solid var(--fb-border);
  border-radius: 0.5rem;
  background: var(--fb-bg-soft);
  color: var(--fb-text);
  cursor: pointer;
}

.theme-choice input {
  margin: 0;
}

.theme-choice span {
  font-weight: 850;
}

.theme-choice small {
  color: var(--fb-text-muted) !important;
}

.theme-choice:has(input:checked) {
  border-color: var(--fb-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fb-accent) 18%, transparent);
}

.profile-avatar-uploader {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.profile-avatar-preview {
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--fb-border);
  border-radius: 50%;
  background: var(--fb-bg-soft);
  object-fit: cover;
}

.profile-avatar-file-control {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.profile-avatar-file-button {
  width: fit-content;
  min-height: 2.35rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fb-border);
  border-radius: 0.5rem;
  background: var(--fb-surface-raised);
  color: var(--fb-text) !important;
  font-weight: 800;
  cursor: pointer;
}

.profile-avatar-file-button:hover,
.profile-avatar-file-button:focus {
  border-color: var(--fb-accent);
  background: color-mix(in srgb, var(--fb-accent) 14%, var(--fb-surface-raised));
}

.profile-avatar-file-name {
  overflow: hidden;
  color: var(--fb-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-favorites-list {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.account-favorites-chip-list {
  display: grid !important;
  gap: 0.65rem;
}

.account-favorites-chip {
  border-radius: 0.5rem !important;
  padding: 0.65rem 0.75rem !important;
  background: var(--fb-section) !important;
  color: var(--fb-text) !important;
}

.account-favorites-remove {
  margin-left: auto;
  flex-shrink: 0;
}

.fb-bottom-nav {
  position: fixed;
  left: max(0.75rem, env(safe-area-inset-left));
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 1040;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.45rem;
  border: 1px solid var(--fb-border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--fb-surface) 92%, transparent);
  box-shadow: var(--fb-shadow);
  backdrop-filter: blur(18px);
}

.fb-bottom-nav:has([data-page="briefing"]:not([hidden])) {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.fb-bottom-nav-item {
  display: grid;
  min-width: 0;
  min-height: 3rem;
  place-items: center;
  border-radius: 0.75rem;
  color: var(--fb-text-muted);
  text-decoration: none;
}

.fb-bottom-nav-item::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: var(--fb-icon) center / contain no-repeat;
  mask: var(--fb-icon) center / contain no-repeat;
}

.fb-bottom-nav-item span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.fb-bottom-nav-item.is-active {
  background: color-mix(in srgb, var(--fb-accent) 16%, transparent);
  color: var(--fb-text);
}

@media (max-width: 991.98px) {
  body {
    padding-bottom: 5.35rem;
  }

  .navbar-ng .navbar-toggler,
  .navbar-ng #mainNav {
    display: none !important;
  }

  .navbar-ng .container-xl {
    justify-content: space-between;
  }

  .fb-app-main {
    padding-top: 1rem !important;
  }

  .auth-dropdown-menu {
    position: fixed !important;
    top: 3.85rem !important;
    right: 0.75rem !important;
    left: auto !important;
    transform: none !important;
  }

  .ops-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .theme-choice-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 992px) {
  .fb-bottom-nav {
    display: none;
  }

  .ops-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}