/* ═══════════════════════════════════════════════════════
   PalmAgri Forecast v5 — styles.css
   Premium agricultural investment platform
   Design direction: Refined editorial × Nigerian fintech
   ═══════════════════════════════════════════════════════ */

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg); color: var(--text);
  transition: background .35s ease, color .35s ease;
  min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────────────────
   DESIGN TOKENS — LIGHT
───────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:           #F3EFE6;
  --surface:      #FDFCF8;
  --surface-alt:  #EDEBE2;
  --surface-deep: #E5E2D6;

  /* Borders */
  --border:       #D0CABB;
  --border-mid:   #BDB5A5;
  --border-strong:#A8A090;

  /* Text */
  --text:         #16130C;
  --text-mid:     #4A4234;
  --text-muted:   #7A7060;
  --text-faint:   #ACA090;

  /* Palm / Primary green */
  --primary:      #2A5518;
  --primary-mid:  #387522;
  --primary-light:#50922E;
  --primary-glow: rgba(42,85,24,.16);
  --primary-glow-strong: rgba(42,85,24,.28);
  --palm-color:   #2A5518;
  --palm-mid:     #387522;
  --palm-glow:    rgba(42,85,24,.14);
  --palm-text:    #1E3D10;

  /* Cashew / Accent amber */
  --accent:       #A85E0A;
  --accent-mid:   #C07318;
  --accent-light: #D88C30;
  --accent-glow:  rgba(168,94,10,.14);
  --cashew-color: #A85E0A;
  --cashew-mid:   #C07318;
  --cashew-glow:  rgba(168,94,10,.14);
  --cashew-text:  #7A4208;

  /* Semantic */
  --danger:       #8B2020;
  --danger-bg:    rgba(139,32,32,.08);
  --success:      #246024;
  --success-bg:   rgba(36,96,36,.08);
  --info:         #1E4890;
  --info-bg:      rgba(30,72,144,.08);
  --warning:      #7A5000;
  --warning-bg:   rgba(122,80,0,.08);

  /* Shadows — earthy, warm-toned */
  --shadow-xs:    rgba(16,12,4,.04);
  --shadow-sm:    rgba(16,12,4,.08);
  --shadow-md:    rgba(16,12,4,.14);
  --shadow-lg:    rgba(16,12,4,.22);
  --shadow-xl:    rgba(16,12,4,.34);

  /* Radii */
  --r-xs: 5px; --r-sm: 8px; --r-md: 12px;
  --r-lg: 16px; --r-xl: 22px; --r-2xl: 30px;

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Motion */
  --ease-out:   cubic-bezier(.22,.68,0,1.2);
  --ease-in:    cubic-bezier(.55,.06,.68,.19);
  --ease-sharp: cubic-bezier(.4,0,.6,1);
  --t-fast:  .13s;
  --t-mid:   .22s;
  --t-slow:  .38s;

  /* Typography scale */
  --type-xs: .72rem;
  --type-sm: .82rem;
  --type-base: .9375rem;
  --type-md: 1rem;
  --type-lg: 1.125rem;
  --type-xl: 1.375rem;
  --type-2xl: 1.75rem;
  --type-3xl: 2.25rem;
  --type-hero: clamp(2.2rem, 8vw, 4.2rem);
}

/* ─────────────────────────────────────────────────────────
   DESIGN TOKENS — DARK
───────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:           #0C1009;
  --surface:      #141910;
  --surface-alt:  #1A2115;
  --surface-deep: #1F281A;
  --border:       #253020;
  --border-mid:   #324030;
  --border-strong:#3E5038;
  --text:         #E6E2D4;
  --text-mid:     #BEB8A8;
  --text-muted:   #8A9070;
  --text-faint:   #5A6248;
  --primary:      #58A83E;
  --primary-mid:  #6EC050;
  --primary-light:#84D464;
  --primary-glow: rgba(88,168,62,.14);
  --primary-glow-strong: rgba(88,168,62,.24);
  --palm-color:   #58A83E;
  --palm-mid:     #6EC050;
  --palm-glow:    rgba(88,168,62,.14);
  --palm-text:    #8CCF70;
  --accent:       #CC8C28;
  --accent-mid:   #E0A840;
  --accent-light: #F0BC58;
  --accent-glow:  rgba(204,140,40,.14);
  --cashew-color: #CC8C28;
  --cashew-mid:   #E0A840;
  --cashew-glow:  rgba(204,140,40,.14);
  --cashew-text:  #E0A840;
  --danger:       #C85050;
  --danger-bg:    rgba(200,80,80,.10);
  --success:      #50A050;
  --success-bg:   rgba(80,160,80,.10);
  --info:         #5888D0;
  --info-bg:      rgba(88,136,208,.10);
  --warning:      #C09040;
  --warning-bg:   rgba(192,144,64,.10);
  --shadow-xs:    rgba(0,0,0,.18);
  --shadow-sm:    rgba(0,0,0,.28);
  --shadow-md:    rgba(0,0,0,.42);
  --shadow-lg:    rgba(0,0,0,.58);
  --shadow-xl:    rgba(0,0,0,.72);
}

/* ─────────────────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────────────────── */
h1,h2,h3,.serif { font-family:'Lora','Playfair Display',Georgia,serif; }
/* Lora gives editorial gravitas with slightly softer curves than Playfair */

.page-title {
  font-family:'Lora',serif;
  font-size:var(--type-2xl); font-weight:700;
  color:var(--text); letter-spacing:-.02em;
  line-height:1.2; margin-bottom:6px;
}
.page-subtitle {
  font-size:var(--type-base); color:var(--text-muted);
  line-height:1.65; margin-bottom:22px; max-width:600px;
}
.page-subtitle-sm {
  font-size:var(--type-sm); color:var(--text-muted); margin:0;
}

/* ─────────────────────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-mid); }

/* ─────────────────────────────────────────────────────────
   ACCESSIBILITY
───────────────────────────────────────────────────────── */
.skip-link {
  position:absolute; top:-100px; left:16px; z-index:9999;
  background:var(--primary); color:#fff;
  padding:10px 18px; border-radius:var(--r-md);
  font-weight:700; font-size:var(--type-sm); text-decoration:none;
  transition:top var(--t-mid);
}
.skip-link:focus { top:16px; }
:focus-visible {
  outline:2.5px solid var(--primary); outline-offset:3px;
  border-radius:var(--r-xs);
}
button:focus-visible,a:focus-visible { outline:2.5px solid var(--primary); outline-offset:3px; }

/* ─────────────────────────────────────────────────────────
   SMART / PRO MODE VISIBILITY
   html[data-mode="smart"] .pro-only  → hidden
   html[data-mode="pro"]   .smart-only → hidden
───────────────────────────────────────────────────────── */
html[data-mode="smart"] .pro-only   { display:none !important; }
html[data-mode="pro"]   .smart-only { display:none !important; }

/* ─────────────────────────────────────────────────────────
   UTILITY
───────────────────────────────────────────────────────── */
.hidden           { display:none !important; }
.w-full           { width:100%; }
.flex             { display:flex; }
.items-center     { align-items:center; }
.justify-between  { justify-content:space-between; }
.palm-text        { color:var(--palm-color); }
.cashew-text      { color:var(--cashew-color); }
.palm-label       { color:var(--palm-color) !important; }
.cashew-label     { color:var(--cashew-color) !important; }

.section-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:12px; margin-bottom:22px;
}

/* ─────────────────────────────────────────────────────────
   TOOLTIP SYSTEM
───────────────────────────────────────────────────────── */
.tooltip {
  position:fixed; z-index:8000;
  background:var(--text); color:var(--bg);
  padding:7px 11px; border-radius:var(--r-sm);
  font-size:var(--type-xs); line-height:1.5;
  max-width:220px; box-shadow:0 4px 16px var(--shadow-md);
  pointer-events:none; opacity:0;
  transition:opacity var(--t-fast);
  font-family:'DM Sans',sans-serif;
  font-weight:500;
}
.tooltip.visible { opacity:1; }
.tooltip-trigger {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  background:var(--surface-alt); border:1px solid var(--border);
  font-size:10px; font-weight:700; cursor:help;
  color:var(--text-muted); flex-shrink:0;
  transition:background var(--t-fast), color var(--t-fast);
}
.tooltip-trigger:hover { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ─────────────────────────────────────────────────────────
   BUTTONS — refined with micro-animations
───────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 22px; border-radius:var(--r-md); font-weight:600;
  font-size:var(--type-base); cursor:pointer;
  transition:
    opacity var(--t-fast),
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-mid);
  border:none; font-family:'DM Sans',sans-serif;
  text-decoration:none; white-space:nowrap; position:relative;
  overflow:hidden;
}
/* Ripple */
.btn::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:rgba(255,255,255,.18); opacity:0;
  transition:opacity var(--t-fast);
}
.btn:hover::after { opacity:1; }
.btn:hover:not(:disabled) { transform:translateY(-2px); }
.btn:active { transform:translateY(0) scale(.98); }
.btn:disabled { opacity:.42; cursor:not-allowed; transform:none; }

.btn-primary {
  background:var(--primary); color:#fff;
  box-shadow:0 2px 12px var(--primary-glow), 0 1px 3px var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  box-shadow:0 6px 24px var(--primary-glow-strong), 0 2px 6px var(--shadow-sm);
}
.btn-outline  { background:transparent; color:var(--primary); border:2px solid var(--primary); }
.btn-accent   { background:var(--accent); color:#fff; box-shadow:0 2px 12px var(--accent-glow); }
.btn-ghost    { background:transparent; color:var(--text-muted); border:1px solid var(--border); }
.btn-ghost:hover:not(:disabled) { background:var(--surface-alt); color:var(--text-mid); }
.btn-sm  { padding:7px 14px; font-size:var(--type-sm); border-radius:var(--r-sm); }
.btn-lg  { padding:14px 32px; font-size:var(--type-lg); border-radius:14px; }

/* Run / CTA button */
.run-btn { font-size:var(--type-md); padding:13px 28px; font-weight:700; letter-spacing:.01em; }
.btn-icon { font-size:16px; }
.btn-spinner {
  width:14px; height:14px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ─────────────────────────────────────────────────────────
   SEGMENTED CONTROLS  (replaces dropdown for price source)
───────────────────────────────────────────────────────── */
.segmented-control {
  display:flex; gap:3px; background:var(--surface-alt);
  border:1px solid var(--border); border-radius:var(--r-xl);
  padding:3px; width:fit-content;
}
.seg-btn {
  padding:7px 16px; border-radius:18px; font-size:var(--type-sm);
  font-weight:600; border:none; cursor:pointer;
  font-family:'DM Sans',sans-serif;
  color:var(--text-muted); background:transparent;
  transition:all var(--t-fast); white-space:nowrap;
}
.seg-btn.active {
  background:var(--primary); color:#fff;
  box-shadow:0 2px 8px var(--primary-glow);
}
.seg-btn:hover:not(.active) { color:var(--text); background:var(--surface-deep); }

/* ─────────────────────────────────────────────────────────
   BADGES
───────────────────────────────────────────────────────── */
.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:var(--type-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.badge-green { background:var(--palm-glow);   color:var(--palm-color); }
.badge-amber { background:var(--cashew-glow); color:var(--cashew-color); }
.badge-blue  { background:rgba(30,72,144,.10); color:#2060C0; }
.form-badge  { display:inline-block; padding:1px 7px; border-radius:10px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; background:var(--primary-glow); color:var(--primary); }

/* ─────────────────────────────────────────────────────────
   STAT TILES — KPI strip
───────────────────────────────────────────────────────── */
.kpi-strip { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.stat-tile {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:14px 16px;
  flex:1 1 120px; min-width:108px;
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.stat-tile:hover { transform:translateY(-2px); box-shadow:0 4px 16px var(--shadow-sm); }
.stat-label { font-size:10px; font-weight:700; color:var(--text-muted); letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.stat-value { font-size:1.3rem; font-weight:800; color:var(--primary); line-height:1.1; }
.stat-sub   { font-size:11px; color:var(--text-faint); margin-top:2px; }

/* ─────────────────────────────────────────────────────────
   CARDS
───────────────────────────────────────────────────────── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px;
  box-shadow:0 2px 10px var(--shadow-xs);
}

/* ─────────────────────────────────────────────────────────
   FORMS — improved visual rhythm
───────────────────────────────────────────────────────── */
.form-group  { display:flex; flex-direction:column; gap:5px; }
.form-label  {
  font-size:var(--type-xs); font-weight:700;
  color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.07em; display:flex; align-items:center; gap:5px;
}
.form-hint   { font-size:var(--type-xs); color:var(--text-faint); line-height:1.45; }
.form-input, .form-select {
  padding:10px 13px; border-radius:var(--r-md);
  border:1.5px solid var(--border); background:var(--surface-alt);
  color:var(--text); font-size:var(--type-base);
  font-family:'DM Sans',sans-serif; width:100%;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
  outline:none; -webkit-appearance:none;
}
.form-input:hover  { border-color:var(--border-mid); }
.form-input:focus, .form-select:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
  background:var(--surface);
}
.form-input.error { border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg); }
.form-input.success { border-color:var(--success); }

/* Coloured inputs for crops */
.palm-input:focus   { border-color:var(--palm-color);   box-shadow:0 0 0 3px var(--palm-glow); }
.cashew-input:focus { border-color:var(--cashew-color); box-shadow:0 0 0 3px var(--cashew-glow); }

/* Input with stepper buttons */
.input-with-stepper { display:flex; gap:6px; align-items:center; }
.input-with-stepper .form-input { text-align:center; flex:1; }
.stepper-btn {
  width:36px; height:36px; border-radius:var(--r-sm);
  border:1.5px solid var(--border); background:var(--surface-alt);
  font-size:18px; cursor:pointer; font-family:'DM Sans',sans-serif;
  color:var(--text-muted); flex-shrink:0; transition:all var(--t-fast);
  display:flex; align-items:center; justify-content:center; font-weight:600;
}
.stepper-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }

.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.manual-price-row {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-top:10px; padding:14px 16px;
  background:var(--surface-alt); border:1.5px solid var(--border);
  border-radius:var(--r-md);
  animation:slideDown var(--t-mid) var(--ease-out);
}
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* ─────────────────────────────────────────────────────────
   ALERTS
───────────────────────────────────────────────────────── */
.alert {
  border-radius:var(--r-md); padding:11px 14px;
  font-size:var(--type-sm); margin-bottom:14px; line-height:1.55;
  display:flex; align-items:flex-start; gap:8px;
  animation:alertIn var(--t-mid) var(--ease-out);
}
@keyframes alertIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.alert-warn    { background:var(--warning-bg); border:1.5px solid rgba(122,80,0,.25); color:var(--warning); }
.alert-danger  { background:var(--danger-bg);  border:1.5px solid rgba(139,32,32,.25); color:var(--danger); }
.alert-success { background:var(--success-bg); border:1.5px solid rgba(36,96,36,.25);  color:var(--success); }
.alert-info    { background:var(--info-bg);    border:1.5px solid rgba(30,72,144,.25); color:var(--info); }

/* ─────────────────────────────────────────────────────────
   CHART ELEMENTS
───────────────────────────────────────────────────────── */
.chart-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px 16px 12px; margin-bottom:18px;
  transition:box-shadow var(--t-mid);
}
.chart-card:hover { box-shadow:0 4px 20px var(--shadow-sm); }
.chart-header   { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.chart-label    { font-size:var(--type-sm); font-weight:700; color:var(--text-muted); padding-left:4px; }
.chart-hint     { font-size:var(--type-xs); color:var(--text-faint); font-style:italic; }
.chart-wrap     { position:relative; width:100%; }
.chart-loading  { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:var(--type-sm); color:var(--text-faint); background:var(--surface); border-radius:var(--r-md); }
.proj-badge     { display:inline-flex; align-items:center; gap:5px; background:var(--primary-glow); color:var(--primary); border-radius:20px; padding:4px 12px; font-size:var(--type-xs); font-weight:700; border:1px solid var(--primary); white-space:nowrap; }
.forecast-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.forecast-title  { font-family:'Lora',serif; font-size:var(--type-xl); font-weight:700; color:var(--text); }
.chart-toggle-bar { display:flex; gap:4px; flex-wrap:wrap; background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--r-2xl); padding:3px; width:fit-content; }
.chart-toggle-btn { padding:6px 15px; border-radius:20px; font-size:var(--type-xs); font-weight:700; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; color:var(--text-muted); background:transparent; transition:all var(--t-fast); }
.chart-toggle-btn.active { background:var(--primary); color:#fff; box-shadow:0 2px 8px var(--primary-glow); }

/* ─────────────────────────────────────────────────────────
   CONTEXT BANNER (Smart Mode guidance)
───────────────────────────────────────────────────────── */
.context-banner {
  background:linear-gradient(90deg, var(--info-bg), transparent);
  border-left:3px solid var(--info);
  padding:10px 16px; font-size:var(--type-sm);
  color:var(--info); line-height:1.55;
  animation:bannerIn .3s ease;
}
@keyframes bannerIn { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }

/* ─────────────────────────────────────────────────────────
   ONBOARDING OVERLAY
───────────────────────────────────────────────────────── */
.onboarding-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(8,12,6,.7); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeOverlay .3s ease;
}
@keyframes fadeOverlay { from{opacity:0}to{opacity:1} }

.onboarding-panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); width:100%; max-width:520px;
  box-shadow:0 32px 80px var(--shadow-xl);
  animation:slideUpPanel .3s var(--ease-out);
  overflow:hidden;
}
@keyframes slideUpPanel { from{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1} }

.onboard-step { display:none; padding:36px 32px 0; text-align:center; }
.onboard-step.active { display:block; }
.onboard-icon  { font-size:52px; margin-bottom:18px; animation:iconPop .4s var(--ease-out); }
@keyframes iconPop { from{transform:scale(0.6)}to{transform:scale(1)} }
.onboard-title { font-size:var(--type-2xl); font-weight:700; color:var(--text); margin-bottom:12px; }
.onboard-body  { font-size:var(--type-base); color:var(--text-muted); line-height:1.65; margin-bottom:24px; }

.onboard-mode-choice { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
.mode-card {
  background:var(--surface-alt); border:2px solid var(--border);
  border-radius:var(--r-lg); padding:18px 14px;
  cursor:pointer; text-align:left; transition:all var(--t-mid);
  display:flex; flex-direction:column; gap:4px; position:relative;
}
.mode-card:hover { border-color:var(--primary); background:var(--primary-glow); transform:translateY(-2px); }
.mode-card.selected { border-color:var(--primary); background:var(--primary-glow); box-shadow:0 4px 16px var(--primary-glow); }
.mode-card-icon  { font-size:24px; margin-bottom:4px; }
.mode-card-title { font-size:var(--type-md); font-weight:800; color:var(--text); }
.mode-card-desc  { font-size:var(--type-xs); color:var(--text-muted); line-height:1.5; }
.mode-card-badge { position:absolute; top:10px; right:10px; background:var(--primary); color:#fff; font-size:9px; font-weight:700; padding:2px 7px; border-radius:10px; text-transform:uppercase; }

.onboard-feature-list { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; text-align:left; }
.onboard-feature { display:flex; gap:10px; align-items:center; font-size:var(--type-sm); color:var(--text-mid); background:var(--surface-alt); border-radius:var(--r-sm); padding:9px 12px; }
.onboard-tip { background:var(--palm-glow); border:1.5px solid var(--palm-color); border-radius:var(--r-md); padding:12px 14px; font-size:var(--type-sm); color:var(--palm-text); text-align:left; margin-bottom:24px; line-height:1.55; }

.onboarding-nav { padding:20px 32px 28px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); }
.onboard-dots   { display:flex; gap:6px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--border); transition:all var(--t-mid); cursor:pointer; }
.dot.active { background:var(--primary); width:20px; border-radius:4px; }
.onboard-actions { display:flex; gap:8px; }

/* ─────────────────────────────────────────────────────────
   LANDING PAGE
───────────────────────────────────────────────────────── */
#screen-landing { min-height:100vh; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.landing-nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:14px 24px; display:flex; align-items:center; justify-content:flex-end; gap:10px;
}
.landing-nav-pills { display:flex; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl); padding:3px; }
.mode-pill { padding:5px 14px; border-radius:20px; font-size:var(--type-xs); font-weight:700; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; color:var(--text-muted); background:transparent; transition:all var(--t-fast); }
.mode-pill.active { background:var(--primary); color:#fff; }

.landing-hero {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:90px 24px 48px;
  text-align:center; position:relative; z-index:1;
}
.hero-blob {
  position:absolute; top:-100px; left:50%; transform:translateX(-50%);
  width:800px; height:800px; border-radius:50%;
  background:radial-gradient(circle, var(--primary-glow) 0%, transparent 60%);
  pointer-events:none; z-index:0;
}
/* Grain texture overlay for depth */
.hero-grain {
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
.hero-icon {
  width:78px; height:78px; border-radius:22px;
  background:linear-gradient(145deg, var(--primary), var(--accent));
  display:flex; align-items:center; justify-content:center; font-size:38px;
  margin-bottom:24px; box-shadow:0 10px 40px var(--primary-glow-strong);
  position:relative; z-index:1;
  animation:heroFloat 4s ease-in-out infinite;
}
@keyframes heroFloat { 0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(2deg)} }

.hero-eyebrow { font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--accent); text-transform:uppercase; margin-bottom:16px; position:relative; z-index:1; }
.hero-title {
  font-family:'Lora',serif; font-size:var(--type-hero); font-weight:700;
  color:var(--text); line-height:1.04; margin-bottom:18px;
  position:relative; z-index:1; letter-spacing:-.03em;
}
.hero-title em { font-style:italic; color:var(--primary); }
.hero-desc { font-size:clamp(15px,2.5vw,18px); color:var(--text-muted); max-width:520px; line-height:1.72; margin-bottom:20px; position:relative; z-index:1; }

/* Live price snip on landing */
.hero-price-snip {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); padding:8px 18px;
  font-size:var(--type-sm); color:var(--text-muted);
  margin-bottom:28px; position:relative; z-index:1;
  box-shadow:0 2px 10px var(--shadow-xs);
}
.hero-price-item { display:flex; align-items:center; gap:5px; }
.hero-price-item strong { font-weight:700; }
.hero-price-divider { color:var(--border-mid); font-size:16px; }

.hero-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; position:relative; z-index:1; }
.landing-features { padding:0 24px 72px; max-width:940px; margin:0 auto; width:100%; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.feature-card {
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg);
  padding:24px 20px; transition:all .25s; opacity:0;
  transform:translateY(18px); animation:fadeUp .55s forwards;
}
.feature-card:hover { transform:translateY(-5px); box-shadow:0 10px 32px var(--shadow-md); border-color:var(--primary); }
.feature-card:nth-child(1){animation-delay:.08s}.feature-card:nth-child(2){animation-delay:.16s}
.feature-card:nth-child(3){animation-delay:.24s}.feature-card:nth-child(4){animation-delay:.32s}
@keyframes fadeUp { to{opacity:1;transform:translateY(0)} }
.feature-icon  { font-size:30px; margin-bottom:14px; }
.feature-title { font-weight:800; color:var(--text); font-size:var(--type-base); margin-bottom:6px; font-family:'DM Sans',sans-serif; }
.feature-desc  { color:var(--text-muted); font-size:var(--type-sm); line-height:1.6; }

/* ─────────────────────────────────────────────────────────
   APP SHELL
───────────────────────────────────────────────────────── */
#screen-app { display:flex; flex-direction:column; height:100vh; overflow:hidden; }

.top-nav {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:0 18px; display:flex; align-items:center; height:56px; gap:8px;
  position:relative; z-index:100; flex-shrink:0;
  box-shadow:0 1px 0 var(--border);
}
.nav-brand { display:flex; align-items:center; gap:9px; cursor:pointer; text-decoration:none; }
.nav-logo  { width:30px; height:30px; border-radius:8px; background:linear-gradient(145deg,var(--primary),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.nav-title { font-family:'Lora',serif; font-weight:700; color:var(--text); font-size:var(--type-lg); white-space:nowrap; letter-spacing:-.01em; }
.nav-title em { font-style:italic; color:var(--primary); }
.nav-spacer { flex:1; }

/* Mode toggle in nav */
.nav-mode-toggle {
  display:flex; gap:2px; background:var(--surface-alt); border:1px solid var(--border);
  border-radius:var(--r-2xl); padding:2px;
}
.mode-toggle-btn {
  padding:5px 12px; border-radius:18px; font-size:var(--type-xs);
  font-weight:700; border:none; cursor:pointer; font-family:'DM Sans',sans-serif;
  color:var(--text-muted); background:transparent; transition:all var(--t-fast);
  white-space:nowrap;
}
.mode-toggle-btn.active { background:var(--primary); color:#fff; }

.nav-links  { display:flex; gap:2px; }
.nav-link {
  padding:6px 11px; border-radius:var(--r-sm); font-weight:600;
  font-size:var(--type-sm); cursor:pointer; background:none; border:none;
  font-family:'DM Sans',sans-serif; color:var(--text-muted); transition:all var(--t-fast);
}
.nav-link:hover  { color:var(--text); background:var(--surface-alt); }
.nav-link.active { background:var(--primary); color:#fff; }
.nav-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--accent); color:#fff; font-size:10px; font-weight:700;
}
.nav-count[data-count="0"] { display:none; }
.nav-theme-btn { background:none; border:none; cursor:pointer; font-size:17px; padding:6px 7px; border-radius:var(--r-sm); transition:background var(--t-fast); flex-shrink:0; }
.nav-theme-btn:hover { background:var(--surface-alt); }

/* Tab bar */
.tab-bar {
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; padding:0 18px; flex-shrink:0; overflow-x:auto;
}
.tab-bar::-webkit-scrollbar { display:none; }
.tab-btn {
  padding:11px 15px; font-weight:600; font-size:var(--type-sm); white-space:nowrap;
  background:none; border:none; border-bottom:2.5px solid transparent;
  cursor:pointer; font-family:'DM Sans',sans-serif; color:var(--text-muted);
  transition:all var(--t-fast); display:flex; align-items:center; gap:5px;
}
.tab-btn:hover  { color:var(--text); }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:700; }

.context-banner { flex-shrink:0; }
.page-scroll { flex:1; overflow-y:auto; }
.page-inner  { max-width:940px; margin:0 auto; padding:24px 20px 60px; }
.section { display:none; } .section.active { display:block; }
.tab-section { display:none; } .tab-section.active { display:block; }
.section,.tab-section { animation:sectionFade .2s ease; }
@keyframes sectionFade { from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)} }

/* ─────────────────────────────────────────────────────────
   DUAL PRICE WIDGET
───────────────────────────────────────────────────────── */
.dual-price-bar {
  display:grid; grid-template-columns:1fr 1fr auto;
  gap:12px; margin-bottom:24px; align-items:stretch;
}
.price-tile {
  border-radius:var(--r-lg); padding:16px 18px; position:relative; overflow:hidden; min-height:128px;
  transition:transform var(--t-fast), box-shadow var(--t-mid);
}
.price-tile:hover { transform:translateY(-2px); }
.price-tile::after { content:''; position:absolute; right:-24px; top:-24px; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none; }
.price-tile-palm   { background:linear-gradient(140deg, var(--primary) 0%, var(--primary-light) 100%); box-shadow:0 4px 24px var(--primary-glow-strong); }
.price-tile-cashew { background:linear-gradient(140deg, var(--accent) 0%, var(--accent-light) 100%);  box-shadow:0 4px 24px var(--accent-glow); }
.price-tile-header  { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.price-tile-crop    { font-size:11px; font-weight:700; color:rgba(255,255,255,.8); letter-spacing:.07em; text-transform:uppercase; }
.price-source-pill  { background:rgba(255,255,255,.2); color:#fff; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:700; letter-spacing:.04em; }
.price-tile-value   { font-family:'Lora',serif; font-size:clamp(19px,3vw,27px); font-weight:700; color:#fff; line-height:1.1; margin-bottom:2px; }
.price-tile-unit    { font-size:11px; color:rgba(255,255,255,.62); margin-bottom:3px; }
.price-tile-range   { font-size:11px; color:rgba(255,255,255,.68); font-style:italic; margin-bottom:2px; }
.price-tile-meta    { font-size:11px; color:rgba(255,255,255,.55); }
.price-tile-trend   { font-size:18px; position:absolute; top:13px; right:48px; opacity:.75; }
.price-tile.no-price { background:var(--surface-alt) !important; border:2px dashed var(--border) !important; box-shadow:none !important; }
.price-tile.no-price .price-tile-value, .price-tile.no-price .price-tile-crop { color:var(--text-muted) !important; }
.price-tile.no-price .price-source-pill { background:var(--border); color:var(--text-muted); }
.price-tile-controls { display:flex; flex-direction:column; gap:7px; justify-content:center; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:13px 15px; min-width:128px; }
.price-fetch-status { font-size:11px; color:var(--text-faint); line-height:1.4; }

/* ─────────────────────────────────────────────────────────
   SMART MODE INSIGHT CARD
───────────────────────────────────────────────────────── */
.insight-card {
  background:linear-gradient(135deg, var(--info-bg) 0%, var(--success-bg) 100%);
  border:1.5px solid var(--border); border-radius:var(--r-lg);
  padding:14px 16px; margin-bottom:18px;
  font-size:var(--type-sm); color:var(--text-mid); line-height:1.6;
  display:flex; align-items:flex-start; gap:10px;
}
.insight-card:empty { display:none; }

/* Smart callout box */
.smart-callout {
  background:var(--palm-glow); border:1.5px solid var(--palm-color);
  border-radius:var(--r-md); padding:12px 14px;
  font-size:var(--type-sm); color:var(--palm-text);
  line-height:1.6; margin-bottom:18px;
  display:flex; align-items:flex-start; gap:8px;
}
.smart-callout-icon { font-size:18px; flex-shrink:0; margin-top:1px; }

/* Guide strip */
.guide-strip {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  background:var(--surface-alt); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:10px 14px; margin-bottom:18px;
}
.guide-step { display:flex; align-items:center; gap:6px; font-size:var(--type-xs); color:var(--text-muted); }
.guide-step.active .guide-num { background:var(--primary); color:#fff; }
.guide-step.active { color:var(--primary); font-weight:700; }
.guide-num { width:18px; height:18px; border-radius:50%; background:var(--border); color:var(--text-muted); font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.guide-arrow { color:var(--text-faint); font-size:12px; }

/* ─────────────────────────────────────────────────────────
   CROP SELECTOR CARDS (calculator)
───────────────────────────────────────────────────────── */
.crop-selector-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.crop-selector-card {
  background:var(--surface-alt); border:2px solid var(--border);
  border-radius:var(--r-lg); padding:14px 16px;
  cursor:pointer; text-align:left; transition:all var(--t-fast);
  display:flex; flex-direction:column; gap:3px;
}
.crop-selector-card:hover { border-color:var(--primary); }
.palm-selector.active   { border-color:var(--palm-color);   background:var(--palm-glow); }
.cashew-selector.active { border-color:var(--cashew-color); background:var(--cashew-glow); }
.csc-icon   { font-size:26px; margin-bottom:4px; }
.csc-name   { font-size:var(--type-md); font-weight:800; color:var(--text); }
.csc-detail { font-size:var(--type-xs); color:var(--text-muted); }

/* ─────────────────────────────────────────────────────────
   TIMELINE — crop toggle
───────────────────────────────────────────────────────── */
.crop-toggle { display:flex; gap:7px; flex-wrap:wrap; }
.crop-btn {
  padding:8px 17px; border-radius:20px; font-weight:600;
  font-size:var(--type-sm); border:none; cursor:pointer;
  font-family:'DM Sans',sans-serif; transition:all var(--t-fast);
  background:var(--surface-alt); color:var(--text-muted);
}
.palm-btn.active   { background:var(--palm-color);   color:#fff; box-shadow:0 2px 8px var(--palm-glow); }
.cashew-btn.active { background:var(--cashew-color); color:#fff; box-shadow:0 2px 8px var(--cashew-glow); }

/* Phases progress bar */
.phase-progress-bar { margin-bottom:20px; }
.phase-progress-track { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:8px; }
.phase-progress-fill  { height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:3px; width:0; transition:width var(--t-slow); }
.phase-progress-labels { display:flex; justify-content:space-between; }
.phase-progress-labels span { font-size:10px; color:var(--text-faint); }

/* Farm facts */
.farm-facts { background:var(--surface-alt); border:1px solid var(--border); border-radius:14px; padding:18px; margin-top:6px; }
.farm-facts-title { font-weight:800; color:var(--text); margin-bottom:12px; font-size:var(--type-base); }
.facts-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; }
.fact-item  { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:9px 13px; transition:transform var(--t-fast); }
.fact-item:hover { transform:translateY(-1px); }
.fact-key   { font-size:10px; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.fact-val   { font-size:var(--type-base); font-weight:700; color:var(--text); margin-top:2px; }

/* ─────────────────────────────────────────────────────────
   PHASES
───────────────────────────────────────────────────────── */
.phase-list { display:flex; flex-direction:column; gap:10px; }
.phase-item { background:var(--surface); border:1.5px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.phase-item.open { border-color:var(--primary); box-shadow:0 4px 20px var(--shadow-sm); }
.phase-header { width:100%; background:none; border:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; gap:12px; text-align:left; font-family:'DM Sans',sans-serif; }
.phase-icon    { width:44px; height:44px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:22px; }
.phase-meta    { flex:1; }
.phase-name    { font-weight:700; color:var(--text); font-size:var(--type-base); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.phase-cost    { font-size:var(--type-xs); color:var(--text-muted); margin-top:2px; }
.phase-chevron { color:var(--text-muted); font-size:16px; transition:transform var(--t-mid); flex-shrink:0; }
.phase-item.open .phase-chevron { transform:rotate(180deg); }
.phase-body    { display:none; padding:0 18px 16px; border-top:1px solid var(--border); }
.phase-item.open .phase-body { display:block; padding-top:14px; animation:phaseOpen .2s ease; }
@keyframes phaseOpen { from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)} }
.steps-label   { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:9px; }
.step-row      { display:flex; gap:8px; margin-bottom:8px; align-items:flex-start; }
.step-num      { width:21px; height:21px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; margin-top:2px; }
.step-text     { font-size:var(--type-sm); color:var(--text); line-height:1.62; }
.phase-tip     { border-radius:9px; padding:11px 13px; margin-top:12px; }
.phase-tip-label { font-size:11px; font-weight:700; color:var(--accent); margin-bottom:3px; }
.phase-tip-text  { font-size:var(--type-sm); color:var(--text); line-height:1.6; }

/* ─────────────────────────────────────────────────────────
   RESOURCES
───────────────────────────────────────────────────────── */
.cat-filter { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.cat-btn { padding:6px 14px; border-radius:20px; font-weight:600; font-size:var(--type-xs); border:1.5px solid var(--border); cursor:pointer; font-family:'DM Sans',sans-serif; transition:all var(--t-fast); background:transparent; color:var(--text-muted); }
.cat-btn:hover  { border-color:var(--primary); color:var(--primary); }
.cat-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.resources-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.resource-card { background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:16px; text-decoration:none; display:block; transition:all var(--t-mid); }
.resource-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px var(--shadow-md); border-color:var(--primary); }
.resource-top   { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.resource-arrow { color:var(--text-faint); font-size:14px; }
.resource-title { font-weight:700; color:var(--text); font-size:var(--type-base); margin-bottom:5px; }
.resource-desc  { color:var(--text-muted); font-size:var(--type-sm); line-height:1.6; }


/* ─────────────────────────────────────────────────────────
   DONATE
───────────────────────────────────────────────────────── */
#tab-donate.active { display:flex; flex-direction:column; align-items:center; text-align:center; }

/* Hero */
.donate-hero        { max-width:520px; width:100%; margin-bottom:32px; }
.donate-hero-eyebrow { font-size:var(--type-xs); font-weight:700; text-transform:uppercase;
                       letter-spacing:.1em; color:var(--accent); margin-bottom:10px; }
.donate-hero-title  { font-family:'Lora',serif; font-size:clamp(1.55rem,4vw,2.1rem);
                       font-weight:700; color:var(--text); line-height:1.2;
                       letter-spacing:-.02em; margin-bottom:14px; }
.donate-hero-sub    { font-size:var(--type-sm); color:var(--text-muted); line-height:1.75;
                       max-width:440px; margin:0 auto; }

/* Impact stats */
.donate-stats       { display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
                       max-width:520px; width:100%; margin-bottom:30px; }
.donate-stat        { background:var(--surface); border:1px solid var(--border);
                       border-radius:12px; padding:14px 10px; display:flex;
                       flex-direction:column; align-items:center; gap:4px; }
.donate-stat-num    { font-family:'Lora',serif; font-size:var(--type-xl); font-weight:700;
                       color:var(--primary); line-height:1; }
.donate-stat-label  { font-size:var(--type-xs); color:var(--text-muted); line-height:1.4;
                       text-align:center; }

/* Section label */
.donate-section-label { font-size:var(--type-xs); font-weight:700; text-transform:uppercase;
                         letter-spacing:.1em; color:var(--text-muted); margin-bottom:10px; }

/* Use cards */
.donate-uses      { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
                     gap:10px; max-width:520px; width:100%; margin-bottom:26px; }
.donate-use-card  { background:var(--surface); border:1px solid var(--border);
                     border-radius:12px; padding:14px 14px; text-align:left;
                     transition:border-color .2s, background .2s; }
.donate-use-card:hover { border-color:var(--border-mid); background:var(--surface-alt); }
.donate-use-icon  { font-size:22px; margin-bottom:8px; line-height:1; }
.donate-use-title { font-weight:700; color:var(--text); font-size:var(--type-sm);
                     margin-bottom:4px; }
.donate-use-desc  { color:var(--text-muted); font-size:var(--type-xs); line-height:1.55; }

/* Donation card */
.donate-card       { background:var(--surface); border:1px solid var(--border);
                      border-radius:18px; padding:24px; max-width:520px; width:100%;
                      margin-bottom:20px; }
.donate-card-top   { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.btc-badge         { font-size:24px; width:46px; height:46px; background:var(--accent-glow);
                      border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
                      border-radius:12px; display:flex; align-items:center;
                      justify-content:center; flex-shrink:0; }
.donate-card-head  { display:flex; flex-direction:column; }
.donate-title      { font-weight:800; color:var(--text); font-size:var(--type-lg); }
.donate-sub        { color:var(--text-muted); font-size:var(--type-sm); margin-top:2px; }
.donate-btc-why    { font-size:var(--type-xs); color:var(--text-muted); line-height:1.65;
                      margin-bottom:20px; border-left:3px solid var(--accent);
                      padding-left:10px; text-align:left; }

/* BTC layout: QR + address side by side */
.donate-btc-layout { display:grid; grid-template-columns:auto 1fr; gap:20px;
                      align-items:start; margin-bottom:18px; }
.qr-side           { display:flex; flex-direction:column; align-items:center; gap:8px; }
.qr-container      { padding:10px; background:#fff; border-radius:11px;
                      display:inline-block; flex-shrink:0; }
.qr-caption        { font-size:var(--type-xs); color:var(--text-muted); text-align:center; }
.btc-address-side  { display:flex; flex-direction:column; gap:10px; min-width:0; }
.btc-address-label { font-size:10px; color:var(--text-muted); font-weight:700;
                      text-transform:uppercase; letter-spacing:.07em; }
.btc-address-text  { font-family:'Courier New',monospace; font-size:11.5px; color:var(--text);
                      word-break:break-all; line-height:1.65;
                      background:var(--surface-alt); border:1px solid var(--border);
                      border-radius:8px; padding:10px 12px; }
.donate-copy-btn   { width:100%; justify-content:center; gap:6px; }
.donate-tap-hint   { font-size:10px; color:var(--text-muted); opacity:.8; line-height:1.5;
                      text-align:center; }

/* NGN fallback row */
.donate-alt-row    { display:flex; align-items:center; justify-content:center;
                      gap:8px; flex-wrap:wrap; padding-top:16px;
                      border-top:1px solid var(--border); }
.donate-alt-text   { font-size:var(--type-xs); color:var(--text-muted); }
.donate-contact-link { color:var(--accent); text-decoration:none;
                        font-weight:600; font-size:var(--type-xs); }
.donate-contact-link:hover { text-decoration:underline; }

/* Credibility footer */
.donate-footer-note { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                       justify-content:center; font-size:var(--type-xs);
                       color:var(--text-faint); margin-top:4px; margin-bottom:8px; }
.donate-footer-dot  { opacity:.4; }

/* Responsive: stack BTC layout on small screens */
@media (max-width:460px) {
  .donate-btc-layout { grid-template-columns:1fr; justify-items:center; }
  .donate-stats      { grid-template-columns:repeat(3,1fr); gap:7px; }
  .donate-stat       { padding:10px 6px; }
  .donate-stat-num   { font-size:var(--type-lg); }
}

/* ─────────────────────────────────────────────────────────
   CALCULATOR
───────────────────────────────────────────────────────── */
.calc-form-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; margin-bottom:22px; }
.calc-fields    { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px; }
.calc-results   { }

/* ─────────────────────────────────────────────────────────
   CROP COMPARISON
───────────────────────────────────────────────────────── */
.compare-crop-form { padding:20px; }
.crop-cmp-grid  { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.crop-cmp-col   { background:var(--surface); border:2px solid var(--border); border-radius:var(--r-lg); padding:18px; transition:border-color var(--t-fast); }
.crop-cmp-col.palm-col   { border-color:var(--palm-color); }
.crop-cmp-col.cashew-col { border-color:var(--cashew-color); }
.crop-cmp-header { display:flex; align-items:center; gap:9px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.crop-cmp-name   { font-family:'Lora',serif; font-size:var(--type-lg); font-weight:700; color:var(--text); }
.crop-cmp-badge  { font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; }
.crop-cmp-badge-palm   { background:var(--palm-glow);   color:var(--palm-color); }
.crop-cmp-badge-cashew { background:var(--cashew-glow); color:var(--cashew-color); }
.crop-cmp-stat   { margin-bottom:10px; }
.crop-cmp-stat-label { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; }
.crop-cmp-stat-value { font-size:1.15rem; font-weight:800; color:var(--text); line-height:1.2; margin-top:1px; display:flex; align-items:center; gap:5px; }
.crop-cmp-stat-value.winner-palm   { color:var(--palm-color); }
.crop-cmp-stat-value.winner-cashew { color:var(--cashew-color); }
.crop-cmp-stat-sub { font-size:10px; color:var(--text-faint); }
.winner-tick { font-size:12px; }
.cmp-table  { width:100%; border-collapse:separate; border-spacing:0 5px; }
.cmp-th     { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:6px 12px; text-align:center; }
.cmp-label  { font-size:var(--type-xs); color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:6px 4px; vertical-align:middle; width:40%; }
.cmp-val    { background:var(--surface-alt); border:1px solid var(--border); border-radius:9px; padding:9px 12px; text-align:center; font-weight:600; color:var(--text); font-size:var(--type-sm); vertical-align:middle; transition:background var(--t-fast); }
.cmp-val.cmp-win-palm   { background:var(--palm-glow);   border-color:var(--palm-color);   color:var(--palm-color);   font-weight:800; }
.cmp-val.cmp-win-cashew { background:var(--cashew-glow); border-color:var(--cashew-color); color:var(--cashew-color); font-weight:800; }
.profit-summary-bar { background:linear-gradient(135deg,var(--surface-alt),var(--surface)); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; margin-bottom:18px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.profit-summary-winner { font-family:'Lora',serif; font-size:var(--type-lg); font-weight:700; color:var(--text); }
.profit-summary-diff   { font-size:var(--type-sm); color:var(--text-muted); }
.cmp-table-section { margin-bottom:18px; }
.cmp-table-section-title { font-size:var(--type-xs); font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:9px; padding-left:2px; }

/* ─────────────────────────────────────────────────────────
   SAVED PLANS
───────────────────────────────────────────────────────── */
.plans-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.plan-card   { background:var(--surface); border:2px solid var(--border); border-radius:14px; padding:16px; transition:border-color var(--t-fast), transform var(--t-fast); }
.plan-card:hover { transform:translateY(-2px); }
.plan-card.selected { border-color:var(--primary); }
.plan-name   { font-weight:700; color:var(--text); font-size:var(--type-base); margin-bottom:4px; line-height:1.4; }
.plan-proj   { font-size:10px; color:var(--text-muted); margin-bottom:10px; }
.plan-stats  { display:flex; gap:7px; margin-bottom:11px; }
.plan-actions { display:flex; gap:7px; }
.empty-state { text-align:center; padding:64px 20px; color:var(--text-muted); }
.empty-icon  { font-size:48px; margin-bottom:14px; }
.empty-title { font-weight:700; font-size:var(--type-xl); color:var(--text); margin-bottom:7px; }
.empty-desc  { font-size:var(--type-base); line-height:1.65; }
.compare-hint { border-radius:10px; padding:10px 13px; margin-bottom:14px; font-size:var(--type-sm); font-weight:600; }
.compare-back-btn  { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:21px; padding:4px; margin-right:4px; line-height:1; }
.compare-col-header { background:var(--surface); border:1px solid var(--primary); border-radius:11px; padding:12px 14px; }
.compare-label-cell { font-size:var(--type-xs); color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:0 0 0 4px; vertical-align:middle; width:36%; }
.compare-val-cell   { background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; padding:9px 12px; text-align:center; font-weight:600; color:var(--text); font-size:var(--type-sm); vertical-align:middle; }
.compare-val-cell.winner { background:var(--primary-glow); border-color:var(--primary); color:var(--primary); font-weight:800; }

/* ─────────────────────────────────────────────────────────
   ADMIN PANEL
───────────────────────────────────────────────────────── */
.admin-overlay { position:fixed; inset:0; z-index:1000; background:rgba(4,8,2,.6); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:16px; animation:fadeOverlay .2s ease; }
@keyframes fadeOverlay { from{opacity:0}to{opacity:1} }
.admin-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); width:100%; max-width:560px; box-shadow:0 28px 70px var(--shadow-xl); animation:slideUpPanel .25s var(--ease-out); display:flex; flex-direction:column; max-height:92vh; overflow:hidden; }
.admin-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px 0; flex-shrink:0; }
.admin-title  { font-size:var(--type-xl); font-weight:700; color:var(--text); font-family:'Lora',serif; }
.admin-close  { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:18px; padding:4px; border-radius:6px; }
.admin-close:hover { background:var(--surface-alt); }
.admin-desc   { font-size:var(--type-sm); color:var(--text-muted); padding:10px 22px 0; line-height:1.6; }
.admin-body   { padding:18px 22px; overflow-y:auto; flex:1; }
.admin-footer { padding:14px 22px; border-top:1px solid var(--border); display:flex; gap:9px; justify-content:flex-end; flex-shrink:0; }
.admin-divider { height:1px; background:var(--border); margin:16px 0; }
.admin-current-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:4px; }
.admin-current-card { background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--r-md); padding:11px 14px; }
.admin-current-card.palm-card   { border-left:3px solid var(--palm-color); }
.admin-current-card.cashew-card { border-left:3px solid var(--cashew-color); }
.admin-current-label { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px; }
.admin-current-value { font-family:'Lora',serif; font-size:1.1rem; font-weight:700; color:var(--primary); line-height:1.2; }
.admin-current-meta  { font-size:10px; color:var(--text-faint); margin-top:2px; }
.admin-history-wrap  { margin-top:4px; }
.admin-history-title { font-size:var(--type-xs); font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; }
.admin-history-row   { display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:var(--type-sm); border-bottom:1px solid var(--border); gap:9px; }
.admin-history-row:last-child { border-bottom:none; }
.admin-history-prices { display:flex; gap:10px; }
.admin-history-price  { font-weight:700; color:var(--text); }
.admin-history-meta   { color:var(--text-faint); font-size:10px; }
.admin-api-section { margin-top:4px; }
.admin-api-title   { font-size:var(--type-sm); font-weight:700; color:var(--text); margin-bottom:5px; }
.admin-api-desc    { font-size:var(--type-xs); color:var(--text-muted); line-height:1.5; margin-bottom:5px; }
.admin-api-result  { background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 13px; font-size:var(--type-sm); color:var(--text); }

/* ─────────────────────────────────────────────────────────
   MOBILE BOTTOM BAR
───────────────────────────────────────────────────────── */
.mobile-bottom-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:200; background:var(--surface); border-top:1px solid var(--border); padding:5px 0 env(safe-area-inset-bottom); justify-content:space-around; }
.mob-tab-btn { display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:none; cursor:pointer; padding:5px 8px; font-family:'DM Sans',sans-serif; min-width:60px; transition:transform var(--t-fast); }
.mob-tab-btn:active { transform:scale(.92); }
.mob-tab-icon  { font-size:19px; }
.mob-tab-label { font-size:9px; font-weight:700; color:var(--text-muted); }
.mob-tab-btn.active .mob-tab-label { color:var(--primary); }

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────── */
@media (max-width:720px) {
  .top-nav           { padding:0 12px; }
  .nav-links         { display:none; }
  .nav-mode-toggle   { display:none; }
  .mobile-bottom-bar { display:flex; }
  .page-inner        { padding:16px 13px 82px; }
  .dual-price-bar    { grid-template-columns:1fr; }
  .price-tile-controls { flex-direction:row; flex-wrap:wrap; padding:10px 12px; min-width:unset; }
  .crop-cmp-grid     { grid-template-columns:1fr; }
  .form-grid-2, .form-grid-3 { grid-template-columns:1fr; }
  .manual-price-row  { grid-template-columns:1fr; }
  .calc-fields       { grid-template-columns:1fr; }
  .crop-selector-cards { grid-template-columns:1fr 1fr; }
  .hero-title        { font-size:2.4rem; }
  .admin-current-grid { grid-template-columns:1fr; }
  .onboard-mode-choice { grid-template-columns:1fr; }
  .hero-price-snip   { flex-direction:column; gap:4px; }
  .hero-price-divider { display:none; }
}
@media (max-width:440px) {
  .crop-selector-cards { grid-template-columns:1fr; }
  .price-tile-value  { font-size:20px; }
  .segmented-control { flex-wrap:wrap; width:100%; }
  .seg-btn           { flex:1; text-align:center; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════
   SEEDLING PRICE WIDGET — v5.3
   Sources: NIFOR (oil palm) · Afrimash (cashew)
   Smart Mode: compact tiles  |  Pro Mode: full detail grid
   ═══════════════════════════════════════════════════════════ */

.seedling-widget {
  padding: 18px 20px;
  margin-bottom: 18px;
  border-left: 3.5px solid var(--primary);
  position: relative;
  overflow: hidden;
}
/* Subtle grain texture echoing the hero */
.seedling-widget::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-glow) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

/* ─── Header ─── */
.seedling-widget-inner { position: relative; z-index: 1; }
.seedling-header { margin-bottom: 14px; }
.seedling-title-row {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-bottom: 4px;
}
.seedling-title {
  font-family: 'Lora', serif;
  font-size: var(--type-lg); font-weight: 700;
  color: var(--text); margin: 0; letter-spacing: -.01em;
}
.seedling-meta-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.seedling-smart-hint {
  font-size: var(--type-xs); color: var(--text-muted);
}

/* ─── Stale / offline alerts ─── */
.seedling-offline-badge {
  font-size: 10px !important;
  padding: 3px 9px !important;
  display: inline-flex; align-items: center; gap: 4px;
}
.seedling-stale-alert {
  font-size: var(--type-xs); padding: 8px 12px;
  border-radius: var(--r-sm); margin-bottom: 12px;
}
.seedling-stale-alert a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ─── Smart Mode: compact side-by-side tiles ─── */
.seedling-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.seedling-tile {
  border-radius: var(--r-md);
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  background: var(--surface-alt);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.seedling-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 16px var(--shadow-sm); }
.seedling-tile-palm   { border-color: var(--palm-glow); background: rgba(42,85,24,.05); }
.seedling-tile-cashew { border-color: var(--cashew-glow); background: rgba(168,94,10,.05); }
[data-theme="dark"] .seedling-tile-palm   { background: rgba(88,168,62,.07); }
[data-theme="dark"] .seedling-tile-cashew { background: rgba(204,140,40,.07); }

.seedling-tile-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 8px;
}
.seedling-crop-label {
  font-size: var(--type-sm); font-weight: 700;
  color: var(--text-mid); letter-spacing: .01em;
}

.seedling-price-row {
  display: flex; align-items: baseline; gap: 5px;
  margin-bottom: 5px;
}
.seedling-unit {
  font-size: var(--type-xs); color: var(--text-muted);
  font-weight: 500;
}
.seedling-sub-label {
  font-size: 10px; line-height: 1.45;
  color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── Pro Mode: full detail grid ─── */
.seedling-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 10px;
}
.seedling-detail-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  background: var(--surface-alt);
}
.seedling-detail-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 10px;
}

.seedling-breakdown {
  margin: 10px 0 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.seedling-breakdown-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
}
.seedling-breakdown-val {
  font-size: var(--type-xs); font-weight: 600;
  color: var(--text-mid); text-align: right;
  flex-shrink: 0;
}
.seedling-source-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.seedling-note {
  font-size: var(--type-xs); color: var(--text-muted);
  line-height: 1.5; margin: 0;
  font-style: italic;
}

/* ─── Source links ─── */
.seedling-source-link {
  font-size: var(--type-xs); font-weight: 700;
  color: var(--primary);
  border-bottom: 1.5px solid var(--primary-glow);
  transition: border-color var(--t-fast), color var(--t-fast);
  text-decoration: none;
}
.seedling-source-link:hover {
  color: var(--primary-mid);
  border-color: var(--primary);
}

/* ─── Footer (Smart Mode) ─── */
.seedling-footer {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.seedling-footer-divider { color: var(--border-mid); font-size: 12px; }
.seedling-refresh-btn {
  background: none; border: none; cursor: pointer;
  font-size: var(--type-xs); font-weight: 700;
  color: var(--text-muted); font-family: 'DM Sans', sans-serif;
  padding: 2px 6px; border-radius: var(--r-xs);
  transition: color var(--t-fast), background var(--t-fast);
  margin-left: auto;
}
.seedling-refresh-btn:hover {
  color: var(--primary); background: var(--primary-glow);
}
.seedling-refresh-btn:disabled {
  opacity: .5; cursor: wait;
}

/* ─── Loading skeleton ─── */
.seedling-loading { opacity: .7; }
.seedling-loading-bar {
  height: 4px; background: var(--surface-alt);
  border-radius: 2px; overflow: hidden;
  margin-top: 14px;
}
.seedling-loading-fill {
  height: 100%; width: 40%;
  background: var(--primary);
  border-radius: 2px;
  animation: seedling-shimmer 1.4s ease-in-out infinite;
}
@keyframes seedling-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .seedling-tiles       { grid-template-columns: 1fr; gap: 10px; }
  .seedling-detail-grid { grid-template-columns: 1fr; }
  .seedling-title-row   { flex-direction: column; align-items: flex-start; }
  .seedling-widget      { padding: 14px 16px; }
  .seedling-sub-label   { white-space: normal; }
  .seedling-breakdown-row { flex-direction: column; gap: 1px; }
  .seedling-breakdown-val { text-align: left; }
}
@media (max-width: 400px) {
  .seedling-tile   { padding: 11px 13px; }
  .seedling-footer { flex-direction: column; align-items: flex-start; }
  .seedling-refresh-btn { margin-left: 0; }
}


   Added for: AI Advisor, Land Suitability, Inflation, Volatility
   Ref: palmagri-implementation-plan.md — Design System
   ═══════════════════════════════════════════════════════════ */

/* ─── Advanced Nav Dropdown (desktop) ─── */
.nav-dropdown { position:relative; }
.nav-link-dropdown { display:flex; align-items:center; gap:3px; }
.nav-dropdown-menu {
  position:absolute; top:calc(100% + 6px); right:0; z-index:300;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:0 8px 32px var(--shadow-md);
  min-width:190px; padding:5px;
  animation:dropdownIn var(--t-mid) var(--ease-out);
}
@keyframes dropdownIn { from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)} }
.nav-dropdown-item {
  display:flex; align-items:center; gap:8px; width:100%;
  padding:9px 13px; border-radius:var(--r-sm); border:none;
  background:transparent; cursor:pointer; font-family:'DM Sans',sans-serif;
  font-size:var(--type-sm); font-weight:600; color:var(--text-mid);
  transition:all var(--t-fast); text-align:left;
}
.nav-dropdown-item:hover { background:var(--primary-glow); color:var(--primary); }

/* ─── Mobile Advanced Menu (slides up from bottom bar) ─── */
.mob-advanced-menu {
  position:fixed; bottom:56px; left:0; right:0; z-index:199;
  background:var(--surface); border-top:1px solid var(--border);
  padding:10px 14px; display:flex; flex-wrap:wrap; gap:6px;
  box-shadow:0 -4px 20px var(--shadow-md);
  animation:slideUp var(--t-mid) var(--ease-out);
}
@keyframes slideUp { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)} }
.mob-adv-item {
  flex:1 1 calc(50% - 4px); padding:12px 14px; border-radius:var(--r-md);
  border:1.5px solid var(--border); background:var(--surface-alt);
  font-size:var(--type-sm); font-weight:600; cursor:pointer;
  font-family:'DM Sans',sans-serif; color:var(--text); text-align:left;
  transition:all var(--t-fast);
}
.mob-adv-item:hover { border-color:var(--primary); background:var(--primary-glow); color:var(--primary); }

/* ─── v2 Example Chips (AI Advisor) ─── */
.v2-example-chips { display:flex; flex-wrap:wrap; gap:6px; }
.v2-chip {
  padding:6px 12px; border-radius:20px; font-size:var(--type-xs);
  border:1px solid var(--border); background:var(--surface-alt);
  color:var(--text-muted); cursor:pointer; font-family:'DM Sans',sans-serif;
  font-weight:500; transition:all var(--t-fast); max-width:220px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.v2-chip:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-glow); }

/* ─── v2 Inflation Toggle Bar ─── */
.v2-toggle-bar { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.v2-rate-btn {
  padding:9px 20px; border-radius:var(--r-sm); font-weight:700;
  font-size:var(--type-sm); cursor:pointer; font-family:'DM Sans',sans-serif;
  border:2px solid var(--border); background:var(--surface-alt);
  color:var(--text-muted); transition:all var(--t-fast);
}
.v2-rate-btn.active {
  border-color:var(--primary); background:var(--primary-glow);
  color:var(--primary); box-shadow:0 2px 8px var(--primary-glow);
}
.v2-rate-btn:hover:not(.active) { border-color:var(--border-mid); color:var(--text); }

/* ─── v2 Recommendation Card ─── */
.v2-rec-card { border-width:1.5px; }

/* ─── v2 Responsive adjustments ─── */
@media (max-width:720px) {
  .mob-advanced-menu { bottom:calc(52px + env(safe-area-inset-bottom)); }
  .v2-example-chips { display:none; }
  .v2-toggle-bar { gap:4px; }
  .v2-rate-btn { padding:7px 14px; font-size:var(--type-xs); }
  .nav-dropdown { display:none; }
}