/* App-wide Wise Earth light green theme.
   Matches landing-brand.css: light sage/cream surfaces, dark forest text. */

:root {
  --bg: #e6efe0;
  --surface: #f2efea;
  --surface-soft: #eaf2e5;
  --ink: #1e2c1f;
  --muted: #596653;
  --line: rgba(44, 62, 48, 0.18);
  --green: #2c3e30;
  --green-dark: #1e2c1f;
  --blue: #617458;
  --brown: #596653;
  --tan: #cddbc4;
  --mint: #dce8d5;
  --shadow: 0 16px 36px rgba(30, 44, 31, 0.1);
  --glass: rgba(242, 239, 234, 0.88);
}

body {
  background:
    radial-gradient(circle at 10% 8%, rgba(97, 116, 88, 0.18), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(205, 219, 196, 0.36), transparent 30rem),
    linear-gradient(135deg, #e6efe0 0%, #f2efea 52%, #edf3e8 100%) !important;
  color: #1e2c1f !important;
}

.sidebar {
  background: rgba(242, 239, 234, 0.9) !important;
  border-color: rgba(44, 62, 48, 0.18) !important;
  box-shadow: 0 16px 38px rgba(30, 44, 31, 0.12) !important;
  color: #1e2c1f !important;
}

.brand-block,
.sidebar .eyebrow,
.brand-tagline,
.sidebar h1 {
  color: #1e2c1f !important;
}

.brand-mark,
.topbar-logo {
  background: rgba(232, 240, 225, 0.92) !important;
  border-color: rgba(44, 62, 48, 0.2) !important;
  box-shadow: none !important;
}

.nav-item {
  background: rgba(255, 253, 249, 0.54) !important;
  border: 1px solid rgba(44, 62, 48, 0.14) !important;
  color: #2c3e30 !important;
}

.nav-item.active,
.nav-item:hover {
  background: #cddbc4 !important;
  border-color: rgba(44, 62, 48, 0.28) !important;
  color: #1e2c1f !important;
}

.topbar {
  border-bottom: 1px solid rgba(44, 62, 48, 0.14) !important;
}

.panel,
.content-card,
.source-card,
.review-card,
.command-card,
.today-reminder-card,
.today-wearable-card,
.direction-card,
.metric-detail-card,
.protocol-card,
.compare-panel,
.share-panel,
.privacy-card,
.photo-upload-panel,
.progress-photo-card,
.lab-card,
.document-card,
.account-detail-card,
.care-appointment-card,
.library-card,
.scanner-card,
.prompt-card,
.pricing-card {
  background: rgba(242, 239, 234, 0.92) !important;
  border-color: rgba(44, 62, 48, 0.16) !important;
  box-shadow: 0 12px 28px rgba(30, 44, 31, 0.08) !important;
  color: #1e2c1f !important;
}

.panel:hover,
.source-card:hover,
.review-card:hover,
.command-card:hover,
.today-reminder-card:hover,
.direction-card:hover,
.metric-detail-card:hover,
.protocol-card:hover,
.progress-photo-card:hover {
  border-color: rgba(44, 62, 48, 0.28) !important;
  box-shadow: 0 16px 34px rgba(30, 44, 31, 0.11) !important;
}

.system-loop-panel,
.ai-navigator-panel,
.health-gps-panel,
.decision-engine-panel,
.pilot-readiness-panel,
.direction-hero {
  background:
    radial-gradient(circle at top left, rgba(242, 239, 234, 0.42), transparent 22rem),
    linear-gradient(135deg, rgba(218, 229, 213, 0.98), rgba(194, 210, 187, 0.96)) !important;
  border-color: rgba(44, 62, 48, 0.18) !important;
  color: #1e2c1f !important;
  box-shadow: 0 16px 36px rgba(30, 44, 31, 0.11) !important;
}

.system-loop-panel h3,
.system-loop-panel p,
.system-loop-panel .eyebrow,
.system-loop-panel .section-note,
.ai-navigator-panel h3,
.ai-navigator-panel p,
.ai-navigator-panel .eyebrow,
.ai-navigator-panel .section-note,
.health-gps-panel h3,
.health-gps-panel p,
.health-gps-panel .eyebrow,
.decision-engine-panel h3,
.decision-engine-panel p,
.decision-engine-panel .eyebrow,
.pilot-readiness-panel h3,
.pilot-readiness-panel p,
.pilot-readiness-panel .eyebrow,
.pilot-readiness-panel .section-note,
.direction-hero h3,
.direction-hero p,
.direction-hero .eyebrow {
  color: #1e2c1f !important;
}

.primary-button,
.secondary-button.active,
.section-tab.active,
.icon-button.primary,
.compact-auth-button {
  background: linear-gradient(135deg, #cddbc4, #a8ba9b 70%, #839376) !important;
  border-color: rgba(44, 62, 48, 0.16) !important;
  color: #1e2c1f !important;
  box-shadow: 0 12px 26px rgba(44, 62, 48, 0.16) !important;
}

.primary-button:hover,
.secondary-button.active:hover,
.section-tab.active:hover {
  box-shadow: 0 16px 30px rgba(44, 62, 48, 0.2) !important;
}

.secondary-button,
.section-tab,
.chip,
.status-pill,
.cloud-status-pill,
.tag-pill,
.source-pill,
.tiny-pill,
.text-button,
.back-button,
.icon-button {
  background: rgba(242, 239, 234, 0.66) !important;
  border-color: rgba(44, 62, 48, 0.16) !important;
  color: #1e2c1f !important;
}

.status-pill.good,
.cloud-status-pill.good,
.tag-pill.good,
.source-pill.good {
  background: #dce8d5 !important;
  color: #1e2c1f !important;
}

.status-pill.warn,
.cloud-status-pill.warn,
.tag-pill.warn,
.source-pill.warn {
  background: #efe6c8 !important;
  color: #4a3e24 !important;
}

input,
select,
textarea {
  background: rgba(255, 253, 249, 0.88) !important;
  border-color: rgba(44, 62, 48, 0.18) !important;
  color: #1e2c1f !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(44, 62, 48, 0.44) !important;
  box-shadow: 0 0 0 3px rgba(44, 62, 48, 0.12) !important;
}

.chart,
.trend-chart,
.compare-chart,
.mini-chart {
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.9), rgba(242, 239, 234, 0.76)),
    linear-gradient(rgba(44, 62, 48, 0.06) 1px, transparent 1px) !important;
  border-color: rgba(44, 62, 48, 0.14) !important;
}

.bar {
  background: linear-gradient(180deg, #617458, #2c3e30) !important;
}

.privacy-note,
.medical-disclaimer,
.checkout-note {
  background: rgba(232, 240, 225, 0.74) !important;
  border-color: rgba(44, 62, 48, 0.16) !important;
  color: #1e2c1f !important;
}

.modal-card {
  background: rgba(242, 239, 234, 0.98) !important;
  border-color: rgba(44, 62, 48, 0.18) !important;
}

.health-gps-answer-grid,
.decision-engine-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.decision-engine-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.health-gps-card,
.decision-engine-card {
  display: grid;
  gap: 8px;
  min-height: 142px;
  padding: 15px;
  border: 1px solid rgba(44, 62, 48, 0.16);
  border-radius: 10px;
  background: rgba(255, 253, 249, 0.7);
  box-shadow: 0 10px 22px rgba(30, 44, 31, 0.07);
}

.health-gps-card span,
.decision-engine-card span {
  color: rgba(30, 44, 31, 0.64);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.health-gps-card strong,
.decision-engine-card strong {
  color: #1e2c1f;
  font-size: 1rem;
  line-height: 1.25;
}

.health-gps-card p,
.decision-engine-card p {
  color: rgba(30, 44, 31, 0.8) !important;
  font-size: 0.9rem;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .health-gps-answer-grid,
  .decision-engine-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .health-gps-answer-grid,
  .decision-engine-grid {
    grid-template-columns: 1fr;
  }
}