.ffw-panel-root {
  --ui-bg: #f3f5f7;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-border: #d9e0e7;
  --ui-text: #182631;
  --ui-muted: #60717f;
  --ui-red: #c1121f;
  --ui-red-dark: #8f1018;
  --ui-blue: #24445a;
  --ui-green: #1f7a4d;
  --ui-shadow: 0 14px 32px rgba(24, 38, 49, .12);
  color: var(--ui-text) !important;
  background: var(--ui-bg) !important;
  min-height: auto !important;
}

.ffw-panel-root,
.ffw-panel-root * {
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.ffw-panel-root .shell {
  width: min(1180px, 100% - 28px) !important;
  padding-top: 18px !important;
  padding-bottom: calc(48px + var(--safe-bottom)) !important;
}

.ffw-panel-root .hero-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
  padding: 18px 20px !important;
}

.ffw-panel-root .hero-card__content {
  gap: 8px !important;
}

.ffw-panel-root .hero-card__content h1 {
  max-width: none !important;
  color: var(--ui-text) !important;
  font-size: clamp(1.7rem, 3vw, 2.5rem) !important;
  line-height: 1.05 !important;
}

.ffw-panel-root .hero-card__content p,
.ffw-panel-root .muted,
.ffw-panel-root .field span,
.ffw-panel-root .mini-stat span,
.ffw-panel-root .stat-card span,
.ffw-panel-root .questionnaire-card p,
.ffw-panel-root .feed-row p,
.ffw-panel-root .member-row p,
.ffw-panel-root .result-row p {
  color: var(--ui-muted) !important;
  -webkit-text-fill-color: var(--ui-muted) !important;
}

.ffw-panel-root .eyebrow {
  color: var(--ui-red) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
}

.ffw-panel-root .eyebrow:before {
  width: 18px !important;
}

.ffw-panel-root .hero-card__stats {
  grid-template-columns: repeat(3, minmax(92px, 1fr)) !important;
  display: grid !important;
}

.ffw-panel-root .mini-stat,
.ffw-panel-root .stat-card {
  min-height: auto !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
}

.ffw-panel-root .mini-stat strong,
.ffw-panel-root .stat-card strong {
  color: var(--ui-text) !important;
  font-size: 1.35rem !important;
}

.ffw-panel-root .top-nav {
  top: calc(8px + var(--safe-top)) !important;
  gap: 6px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 8px 22px rgba(24, 38, 49, .09) !important;
  padding: 8px !important;
}

.ffw-panel-root .nav-link {
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ui-blue) !important;
  min-height: 40px !important;
  padding: 9px 12px !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
}

.ffw-panel-root .nav-link:hover,
.ffw-panel-root .nav-link:focus-visible {
  background: #eef3f7 !important;
}

.ffw-panel-root .nav-link.is-active {
  background: var(--ui-red) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.ffw-panel-root .single-view {
  margin-top: 14px !important;
}

.ffw-panel-root .view-grid,
.ffw-panel-root .dashboard-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr) !important;
  gap: 16px !important;
}

.ffw-panel-root .panel-stack {
  gap: 16px !important;
}

.ffw-panel-root .panel,
.ffw-panel-root .card,
.ffw-panel-root .inner-card,
.ffw-panel-root .questionnaire-card,
.ffw-panel-root .feed-row,
.ffw-panel-root .member-row,
.ffw-panel-root .result-row,
.ffw-panel-root .role-card,
.ffw-panel-root .builder-card {
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 8px 22px rgba(24, 38, 49, .08) !important;
}

.ffw-panel-root .panel {
  padding: 18px !important;
}

.ffw-panel-root .panel-header {
  align-items: center !important;
  margin-bottom: 14px !important;
}

.ffw-panel-root .panel-header h2,
.ffw-panel-root .panel-header h3,
.ffw-panel-root .questionnaire-card h3,
.ffw-panel-root .role-card__head strong,
.ffw-panel-root .inner-card h4 {
  color: var(--ui-text) !important;
}

.ffw-panel-root .primary-button,
.ffw-panel-root .secondary-button,
.ffw-panel-root .danger-button {
  border-radius: 9px !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
}

.ffw-panel-root .primary-button {
  border-color: var(--ui-red) !important;
  background: var(--ui-red) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.ffw-panel-root .primary-button:hover,
.ffw-panel-root .primary-button:focus-visible {
  background: var(--ui-red-dark) !important;
}

.ffw-panel-root .secondary-button {
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-blue) !important;
  -webkit-text-fill-color: var(--ui-blue) !important;
}

.ffw-panel-root .danger-button {
  background: #fff0f0 !important;
  color: var(--ui-red-dark) !important;
  -webkit-text-fill-color: var(--ui-red-dark) !important;
}

.ffw-panel-root .pill {
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: .75rem !important;
}

.ffw-panel-root .pill-muted {
  background: #e9eef2 !important;
  color: var(--ui-blue) !important;
}

.ffw-panel-root .pill-success {
  background: #e6f3ed !important;
  color: var(--ui-green) !important;
}

.ffw-panel-root .pill-warning,
.ffw-panel-root .pill-alert {
  background: #fff4df !important;
  color: #9a630f !important;
}

.ffw-panel-root .field {
  gap: 6px !important;
}

.ffw-panel-root .field span,
.ffw-panel-root .select-group label {
  color: var(--ui-blue) !important;
  -webkit-text-fill-color: var(--ui-blue) !important;
  font-size: .86rem !important;
  font-weight: 800 !important;
}

.ffw-panel-root input,
.ffw-panel-root textarea,
.ffw-panel-root select {
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--ui-text) !important;
  -webkit-text-fill-color: var(--ui-text) !important;
  box-shadow: none !important;
}

.ffw-panel-root input:focus,
.ffw-panel-root textarea:focus,
.ffw-panel-root select:focus {
  border-color: var(--ui-red) !important;
  outline: 3px solid rgba(193, 18, 31, .14) !important;
}

.ffw-panel-root .field textarea {
  min-height: 120px !important;
}

.ffw-panel-root .question-block {
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface-soft) !important;
  padding: 14px !important;
}

.ffw-panel-root .question-block legend {
  color: var(--ui-text) !important;
  font-size: 1rem !important;
}

.ffw-panel-root .option-row,
.ffw-panel-root .check-row,
.ffw-panel-root .mta-option-edit-row {
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.ffw-panel-root .option-row:hover,
.ffw-panel-root .questionnaire-card:hover,
.ffw-panel-root .result-row-button:hover {
  border-color: #b8c5d0 !important;
  transform: none !important;
}

.ffw-panel-root .mta-option-edit-row {
  padding: 10px !important;
}

.ffw-panel-root .mta-correct-toggle {
  border-radius: 8px !important;
  background: #eef3f7 !important;
  padding: 8px 10px !important;
}

.ffw-panel-root .mta-question-image,
.ffw-panel-root .vehicle-image-card img,
.ffw-panel-root .vehicle-image-placeholder,
.ffw-panel-root .image-map-stage {
  border-radius: 10px !important;
}

.ffw-panel-root .modal-card,
.ffw-panel-root .test-runner-card {
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
}

.ffw-panel-root .success-banner,
.ffw-panel-root .error-banner {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
}

.ffw-panel-root .success-banner {
  border-color: #b7dec9 !important;
}

.ffw-panel-root .error-banner {
  border-color: #e8bdc1 !important;
}

@media (width <= 1040px) {
  .ffw-panel-root .hero-card,
  .ffw-panel-root .view-grid,
  .ffw-panel-root .dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  .ffw-panel-root .hero-card__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (width <= 720px) {
  .ffw-panel-root .shell {
    width: min(100% - 16px, 1180px) !important;
    padding-top: 10px !important;
    padding-bottom: calc(132px + var(--safe-bottom)) !important;
  }

  .ffw-panel-root .hero-card,
  .ffw-panel-root .panel {
    padding: 14px !important;
  }

  .ffw-panel-root .hero-card__stats,
  .ffw-panel-root .stats-grid,
  .ffw-panel-root .compact-stats {
    grid-template-columns: 1fr !important;
  }

  .ffw-panel-root .top-nav {
    right: max(8px, var(--safe-right)) !important;
    bottom: calc(8px + var(--safe-bottom)) !important;
    left: max(8px, var(--safe-left)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 42vh !important;
    overflow: auto !important;
    border-radius: 14px !important;
  }

  .ffw-panel-root .nav-link {
    min-height: 44px !important;
    font-size: .86rem !important;
    white-space: normal !important;
  }
}