/* ===========================================================
   SOILSTACK DASHBOARD — v3.0
   Color Theory: 60% Neutral / 30% Moss / 10% Terracotta
   Typography: Increased sizing for readability
   =========================================================== */

:root {
  /* === MOSS GREEN (Primary - 30%) === */
  --moss-50:#f4f7f1;--moss-100:#e6ede0;--moss-200:#cddbc2;--moss-300:#aac396;
  --moss-400:#85a86a;--moss-500:#678c4a;--moss-600:#507038;--moss-700:#3f582d;
  --moss-800:#344726;--moss-900:#2c3b21;--moss-950:#151f0f;

  /* === TERRACOTTA (Accent CTAs - 10%) === */
  --terra-50:#fdf5f3;--terra-100:#fae9e4;--terra-200:#f6d5cc;--terra-300:#efb8a8;
  --terra-400:#e4907a;--terra-500:#d66d52;--terra-600:#c2543a;--terra-700:#a2442e;
  --terra-800:#863b2a;--terra-900:#6f3528;--terra-950:#3c1911;

  /* === AMBER (Feeding/Warning - Distinct from Terra) === */
  --amber-50:#fffbeb;--amber-100:#fef3c7;--amber-200:#fde68a;--amber-300:#fcd34d;
  --amber-400:#fbbf24;--amber-500:#f59e0b;--amber-600:#d97706;--amber-700:#b45309;
  --amber-800:#92400e;--amber-900:#78350f;--amber-950:#451a03;

  /* === WATER BLUE (Watering - Cooler, more distinct) === */
  --water-50:#f0f9ff;--water-100:#e0f2fe;--water-200:#bae6fd;--water-300:#7dd3fc;
  --water-400:#38bdf8;--water-500:#0ea5e9;--water-600:#0284c7;--water-700:#0369a1;
  --water-800:#075985;--water-900:#0c4a6e;--water-950:#082f49;

  /* === NEUTRALS (60% - Warm tinted) === */
  --neutral-50:#fafaf8;--neutral-100:#f5f4f1;--neutral-200:#e8e6e1;--neutral-300:#d6d3cb;
  --neutral-400:#b8b4a8;--neutral-500:#9c9789;--neutral-600:#827c6e;--neutral-700:#6b665a;
  --neutral-800:#5a564c;--neutral-900:#4d4a42;--neutral-950:#292722;

  /* === LIGHT MODE SEMANTIC === */
  --bg-page:#faf8f5;
  --bg-section:#f5f3ef;
  --bg-card:#fdfcf9;
  --bg-elevated:#fdfcf9;
  --border-light:#e8e6e1;
  --border-medium:#d6d3cb;
  --text-primary:#2c2a26;
  --text-secondary:#5a564c;
  --text-tertiary:#736e62;
  --text-muted:#9c9789;
  --text-inverse:#ffffff;

  /* Semantic Colors */
  --primary:#507038;
  --primary-hover:#3f582d;
  --primary-pale:#f4f7f1;
  --primary-light:#e6ede0;
  
  --accent:#c2543a;
  --accent-hover:#a2442e;
  --accent-pale:#fdf5f3;
  --accent-light:#fae9e4;

  /* Task Type Colors - DISTINCT */
  --task-plant:#507038;
  --task-plant-bg:#e6ede0;
  --task-water:#0284c7;
  --task-water-bg:#e0f2fe;
  --task-feed:#d97706;
  --task-feed-bg:#fef3c7;
  --task-harvest:#c2543a;
  --task-harvest-bg:#fae9e4;

  /* Shadows */
  --shadow-sm:0 1px 3px rgba(41,39,34,.1),0 1px 2px rgba(41,39,34,.06);
  --shadow-md:0 4px 6px -1px rgba(41,39,34,.1),0 2px 4px -2px rgba(41,39,34,.06);
  --shadow-lg:0 10px 15px -3px rgba(41,39,34,.1),0 4px 6px -4px rgba(41,39,34,.06);

  /* Radii */
  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--radius-full:9999px;
  
  /* Typography */
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Source Sans 3',system-ui,sans-serif;
  --transition-fast:150ms ease;--transition-base:200ms ease;--transition-slow:400ms ease;
  --shadow-xl:0 20px 25px -5px rgba(41,39,34,.1),0 8px 10px -6px rgba(41,39,34,.06);
  --status-active:#507038;--status-active-bg:rgba(80,112,56,.12);
  --status-seedling:#0ea5e9;--status-seedling-bg:rgba(14,165,233,.1);
  --status-harvest:#d97706;--status-harvest-bg:rgba(217,119,6,.1);
}

/* === DARK MODE — Clean Slate with Color Pops === */
[data-theme="dark"] {
  --bg-page:#0f1214;
  --bg-section:#181b1e;
  --bg-card:#1e2225;
  --bg-elevated:#262a2e;
  --border-light:rgba(255,255,255,.06);
  --border-medium:rgba(255,255,255,.1);
  --text-primary:#f0f2f4;
  --text-secondary:#9ca3af;
  --text-tertiary:#767d8c;
  --text-muted:#6b7280;
  --text-inverse:#0f1214;

  /* Brighter, more saturated colors for dark mode */
  --primary:#8fbc6a;
  --primary-hover:#a3d477;
  --primary-pale:rgba(143,188,106,.12);
  --primary-light:rgba(143,188,106,.2);
  
  --accent:#f08763;
  --accent-hover:#f5a080;
  --accent-pale:rgba(240,135,99,.12);
  --accent-light:rgba(240,135,99,.2);

  /* Vibrant task colors that pop on dark */
  --task-plant:#8fbc6a;
  --task-plant-bg:rgba(143,188,106,.15);
  --task-water:#60c5fa;
  --task-water-bg:rgba(96,197,250,.12);
  --task-feed:#fbbf24;
  --task-feed-bg:rgba(251,191,36,.12);
  --task-harvest:#f08763;
  --task-harvest-bg:rgba(240,135,99,.15);

  --shadow-sm:0 2px 8px rgba(0,0,0,.4);
  --shadow-md:0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:0 8px 30px rgba(0,0,0,.6);
  --status-active:#8fbc6a;--status-active-bg:rgba(143,188,106,.15);
  --status-seedling:#60c5fa;--status-seedling-bg:rgba(96,197,250,.12);
  --status-harvest:#fbbf24;--status-harvest-bg:rgba(251,191,36,.12);
}

/* === ANIMATIONS === */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes slideInRight {
  from { opacity:0; transform:translateX(-20px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes pulse {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.02); }
}
@keyframes float {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-4px); }
}

/* === RESET === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
body{
  font-family:var(--font-body);
  font-size:17px; /* Increased base */
  line-height:1.6;
  color:var(--text-primary);
  background:var(--bg-page);
  min-height:100vh;
  transition:background .2s,color .2s;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.3}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;font-family:var(--font-body)}
svg{display:inline-block;vertical-align:middle}

/* === APP HEADER === */
.app-header{
  position:sticky;top:0;z-index:1000;
  background:var(--bg-card);
  border-bottom:1px solid var(--border-light);
  box-shadow:var(--shadow-sm);
  transition:background .3s ease,border-color .3s ease;
}

/* Keep Leaflet map below header */
.leaflet-pane{z-index:1!important}
.leaflet-control{z-index:2!important}
.header-top{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1200px;margin:0 auto;padding:0 28px;height:64px;
}
.header-brand{display:flex;align-items:center;gap:12px;transition:transform .2s ease}
.header-brand:hover{transform:scale(1.02)}
.header-brand svg{width:32px;height:32px;color:var(--primary);transition:transform .3s ease}
.header-brand:hover svg{transform:rotate(-10deg)}
.header-brand h1{font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.header-actions{display:flex;align-items:center;gap:6px}
.header-btn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--text-secondary);
  border-radius:var(--radius-md);transition:all .25s ease;
}
.header-btn:hover{background:var(--bg-section);color:var(--text-primary);transform:translateY(-2px)}
.header-btn:active{transform:translateY(0)}
.header-btn svg{width:22px;height:22px;transition:transform .2s ease}
.header-btn:hover svg{transform:scale(1.15)}
.hamburger-btn{display:none}

/* === TAB NAVIGATION (Above Content) === */
.tab-nav{
  display:flex;gap:8px;margin-bottom:20px;
  background:var(--bg-section);
  padding:6px;border-radius:var(--radius-xl);
  animation:fadeInUp .5s ease forwards;
}
.tab-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 20px;font-size:1rem;font-weight:600;
  color:var(--text-tertiary);background:transparent;border:none;
  border-radius:var(--radius-lg);white-space:nowrap;
  transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer;
}
.tab-btn svg{width:20px;height:20px;transition:transform .25s ease}
.tab-btn:hover{color:var(--text-secondary);background:var(--bg-card);transform:translateY(-2px)}
.tab-btn:hover svg{transform:scale(1.15)}
.tab-btn:active{transform:translateY(0)}
.tab-btn.active{
  color:var(--primary);background:var(--bg-card);
  box-shadow:var(--shadow-md);
}
.tab-btn.active svg{transform:scale(1.1)}

/* === MAIN CONTENT === */
.main-content{max-width:1200px;margin:0 auto;padding:28px}
.tab-panel{display:none;opacity:0}
.tab-panel.active{display:block;animation:fadeIn .4s ease forwards}

/* === SECTION HEADERS === */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
  animation:fadeInUp .5s ease forwards;
  animation-delay:.1s;
  opacity:0;
}
.section-title{
  font-family:var(--font-display);font-size:1.35rem;font-weight:600;
  display:flex;align-items:center;gap:10px;
}
.section-title svg{width:24px;height:24px;color:var(--primary);transition:transform .3s ease}
.section-header:hover .section-title svg{transform:rotate(-10deg) scale(1.1)}
.section-date{font-size:1rem;color:var(--text-tertiary);font-weight:500}
.section-link{
  font-size:1rem;font-weight:600;color:var(--primary);
  display:flex;align-items:center;gap:6px;
  transition:all .2s ease;
}
.section-link svg{width:18px;height:18px;transition:transform .2s ease}
.section-link:hover{color:var(--primary-hover);gap:10px}
.section-link:hover svg{transform:translateX(4px)}
.section-link:hover{text-decoration:none;color:var(--primary-hover)}

/* === WEATHER MAP === */
.weather-map-wrap{
  position:relative;
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border-light);margin-bottom:28px;
  box-shadow:var(--shadow-sm);
  animation:fadeInUp .6s ease forwards;
  animation-delay:.05s;
  opacity:0;
  transition:all .3s ease;
}
.weather-map-wrap:hover{
  box-shadow:var(--shadow-lg);
  border-color:var(--border-medium);
}
#weatherMap{height:260px;width:100%;background:var(--bg-section)}
.weather-strip{
  display:flex;align-items:stretch;
  background:var(--bg-card);border-top:1px solid var(--border-light);
  padding:0;
}
.weather-stat{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:18px 10px 14px;
  border-right:1px solid var(--border-light);
  transition:background .2s ease;
  text-align:center;min-width:0;
}
.weather-stat:hover{background:var(--bg-section)}
.weather-stat:last-child{border-right:none}

/* Value row: icon + number side by side */
.weather-stat-value{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:1.1rem;font-weight:600;color:var(--text-primary);
  line-height:1.2;
}
.weather-stat svg{
  width:20px;height:20px;flex-shrink:0;
  transition:color .2s ease;
}
.weather-stat:hover svg{color:var(--primary)!important}

/* Label row underneath */
.weather-stat-label{
  font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-tertiary);line-height:1;
  text-align:center;width:100%;
}

/* === Stat-specific sizing === */
/* Temp (primary — biggest) */
.weather-stat:first-child{flex:1.1}
.weather-stat .temp-current{
  font-family:var(--font-display);font-size:1.55rem;font-weight:700;
  color:var(--text-primary);letter-spacing:-.01em;
}
/* Hi/Lo */
.weather-stat:nth-child(2){flex:0.95}
.weather-stat .temp-range{
  display:flex;align-items:baseline;gap:2px;
  font-size:1.15rem;font-weight:600;color:var(--text-primary);
}
.weather-stat .temp-hi{color:var(--accent);font-weight:700;font-size:1.15rem}
.weather-stat .temp-lo{color:var(--task-water);font-weight:700;font-size:1.15rem}
.weather-stat .temp-sep{color:var(--text-tertiary);font-weight:400;margin:0 3px;font-size:1rem}
/* Wind — force SVG inline in flex */
.weather-stat:nth-child(3){flex:0.9}
.weather-stat:nth-child(3) .weather-stat-value{white-space:nowrap}
.weather-stat:nth-child(3) .wind-arrow{
  width:18px;height:18px;flex-shrink:0;
  display:inline-block;vertical-align:middle;
  transition:transform .3s ease;
}
/* Precip (often longest text) */
.weather-stat:nth-child(4){flex:1.2}
.weather-stat:nth-child(4) .weather-stat-value{
  font-size:.95rem;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
/* Alerts badge (last child) */
.weather-stat:last-child{flex:1.3;padding:14px 10px}

/* Icon colors */
.weather-stat .icon-sun{color:#e8a308}
.weather-stat .icon-temp{color:var(--accent)}
.weather-stat .icon-wind{color:var(--text-tertiary)}
.weather-stat .icon-rain{color:var(--task-water)}

/* Alert badge */
.weather-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--radius-full);
  font-size:.85rem;font-weight:600;line-height:1.3;
  transition:all .2s ease;cursor:default;
  max-width:100%;
}
.weather-badge:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.weather-badge.clear{background:var(--primary-light);color:var(--primary)}
.weather-badge.warn{background:#fef3cd;color:#856404}
[data-theme="dark"] .weather-badge.warn{background:rgba(255,193,7,.12);color:#ffc107}
.weather-badge.alert{background:var(--task-feed-bg);color:var(--task-feed)}
.weather-badge svg{width:16px;height:16px;flex-shrink:0}

/* Alert stat — headline snippet */
.weather-stat:last-child{cursor:pointer}
.weather-alert-headline{
  font-size:.82rem;font-weight:400;line-height:1.4;
  color:var(--text-tertiary);max-width:100%;
  text-align:center;padding:0 4px;
}

/* Mobile: tappable "Details" link + expandable description */
.wx-alert-details-btn{
  display:none;
  font-size:.85rem;font-weight:600;color:var(--primary);
  margin-top:6px;cursor:pointer;
  background:none;border:none;padding:0;
  font-family:var(--font-body,'Source Sans 3',sans-serif);
}
.wx-alert-details-btn:hover{text-decoration:underline}
.wx-alert-expand{
  display:none;
  text-align:left;padding:14px 0 0;
  font-size:1rem;line-height:1.6;color:var(--text-secondary);
  border-top:1px solid var(--border-light);margin-top:12px;
}
.wx-alert-expand.open{display:block}
.wx-alert-expand strong{display:block;margin-bottom:6px;color:var(--text-primary);font-size:1.05rem}
.wx-alert-expand .wx-expand-meta{font-size:.88rem;color:var(--text-tertiary);margin-top:8px}

/* Body-level alert tooltip — appended to document.body, display toggled by JS */
#wx-alert-tip{
  display:none;
  position:fixed;z-index:99999;
  background:#fff;color:#1a1a1a;
  border:1px solid #ddd;border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  padding:14px 16px;width:400px;max-width:calc(100vw - 24px);
  max-height:50vh;overflow-y:auto;
  font-family:var(--font-body,'Source Sans 3',sans-serif);
  font-size:.85rem;line-height:1.5;
  pointer-events:auto;
}
[data-theme="dark"] #wx-alert-tip{
  background:#1a1d21;color:#e5e5e5;border-color:#333;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
#wx-alert-tip strong{display:block;font-size:.9rem;margin-bottom:6px}
#wx-alert-tip .wx-tip-meta{font-size:.75rem;color:#888;margin-top:6px}


/* 7-DAY FORECAST */

/* The 7-column strip — inside section-card container */
.forecast-strip{
  display:flex;gap:14px;margin-bottom:0;margin-top:6px;
}
.section-card .forecast-strip{margin-bottom:0}
.section-card .forecast-nav{margin-bottom:0;padding-bottom:0}

/* Individual day card — matches area-card styling */
.forecast-day{
  flex:1 0 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:18px 12px 16px;
  background:var(--bg-card);border-radius:var(--radius-lg);
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-sm);
  transition:all .3s cubic-bezier(.4,0,.2,1);
  animation:fadeInUp .5s ease forwards;opacity:0;
  position:relative;
}
.forecast-day:nth-child(1){animation-delay:.1s}
.forecast-day:nth-child(2){animation-delay:.15s}
.forecast-day:nth-child(3){animation-delay:.2s}
.forecast-day:nth-child(4){animation-delay:.25s}
.forecast-day:nth-child(5){animation-delay:.3s}
.forecast-day:nth-child(6){animation-delay:.35s}
.forecast-day:nth-child(7){animation-delay:.4s}
.forecast-day::after{
  content:'';position:absolute;inset:-2px;border-radius:calc(var(--radius-lg) + 2px);
  border:2px solid var(--primary);opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.forecast-day:hover::after{opacity:.4}
.forecast-day:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-6px);
  border-color:var(--primary);
}

/* Today highlight — moss accent border, subtle tinted bg */
.forecast-day.forecast-today{
  border-color:var(--primary);
  background:var(--primary-pale,rgba(80,112,56,.06));
  box-shadow:0 2px 12px rgba(80,112,56,.12);
}
.forecast-day.forecast-today:hover{
  border-color:var(--primary-hover);
  box-shadow:0 4px 16px rgba(80,112,56,.18);
}

/* --- LEVEL 2: Day name (SECONDARY — clear context) --- */
.forecast-day-name{
  font-family:var(--font-display);
  font-size:1.05rem;font-weight:600;
  color:var(--text-primary);
  letter-spacing:.01em;line-height:1.2;
}
.forecast-day.forecast-today .forecast-day-name{
  color:var(--primary);font-weight:700;
}

/* Date — tertiary supporting label */
.forecast-day-date{
  font-size:.82rem;color:var(--text-tertiary);
  line-height:1;margin-bottom:2px;
}

/* --- VISUAL ANCHOR: Condition icon --- */
.forecast-day-icon{
  width:40px;height:40px;
  margin:6px 0 8px;
}
.forecast-day-icon svg{width:100%;height:100%}

/* --- LEVEL 1: Temperature (PRIMARY — hero data, largest) --- */
.forecast-day-temps{
  display:flex;align-items:baseline;gap:5px;
  font-size:1.3rem;font-weight:700;line-height:1;
  margin-bottom:4px;
}
.forecast-day-hi{color:var(--accent)}
.forecast-day-lo{color:var(--task-water)}
.forecast-day-sep{color:var(--text-tertiary);font-weight:400;font-size:1rem}

/* --- LEVEL 3: Precip + Wind (TERTIARY — labeled supporting data) --- */
.forecast-day-meta{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:100%;padding-top:8px;margin-top:4px;
  border-top:1px solid var(--border-light);
}
.forecast-day-stat{
  display:flex;align-items:center;gap:5px;
  font-size:.85rem;color:var(--text-secondary);
  font-weight:500;line-height:1;
}
.forecast-day-stat svg{width:14px;height:14px;flex-shrink:0;opacity:.65}
.forecast-day-stat.precip-active{color:var(--task-water);font-weight:600}
.forecast-day-stat.precip-active svg{opacity:1}

/* Skeleton loading */
.forecast-day--skeleton{
  min-height:180px;position:relative;overflow:hidden;
}
.forecast-shimmer{
  position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,var(--bg-section) 50%,transparent 70%);
  background-size:200% 100%;
  animation:forecastShimmer 1.6s ease-in-out infinite;
}
@keyframes forecastShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* === FORECAST RESPONSIVE === */
@media(max-width:768px){
  .forecast-strip{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:10px;
  }
  .forecast-day{padding:16px 10px 14px}
  .forecast-day.forecast-hidden{display:none}
  /* Skeleton: only show 3 on mobile to match carousel page */
  .forecast-day--skeleton:nth-child(n+4){display:none}
  .forecast-day-icon{width:36px;height:36px}
  .forecast-day-name{font-size:1rem}
  .forecast-day-temps{font-size:1.25rem}
  .forecast-day-stat{font-size:.82rem}
  /* Carousel nav */
  .forecast-nav{
    display:flex;align-items:center;justify-content:center;
    gap:8px;margin-top:12px;
  }
  .forecast-nav-btn{
    width:36px;height:36px;border-radius:50%;
    background:var(--bg-card);border:1px solid var(--border-light);
    color:var(--text-secondary);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s ease;flex-shrink:0;
    box-shadow:var(--shadow-sm);
  }
  .forecast-nav-btn:hover{background:var(--primary-pale);color:var(--primary);border-color:var(--primary)}
  .forecast-nav-btn:disabled{opacity:.3;cursor:default;background:var(--bg-card);color:var(--text-tertiary);border-color:var(--border-light)}
  .forecast-nav-btn svg{width:16px;height:16px}
  .forecast-nav-dots{display:flex;gap:6px}
  .forecast-nav-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--border-medium);
    transition:all .2s ease;cursor:pointer;
  }
  .forecast-nav-dot.active{background:var(--primary);width:18px;border-radius:3px}
}
@media(max-width:480px){
  .forecast-strip{gap:8px}
  .forecast-day{padding:14px 8px 12px}
  .forecast-day-icon{width:32px;height:32px}
  .forecast-day-name{font-size:.95rem}
  .forecast-day-temps{font-size:1.15rem}
  .forecast-day-stat{font-size:.78rem}
}
/* Desktop: hide carousel nav */
@media(min-width:769px){
  .forecast-nav{display:none}
}

/* === WEATHER LOADING STATE === */
.weather-loading-bar{
  position:absolute;top:0;left:0;right:0;height:3px;z-index:500;
  background:rgba(0,0,0,0.08);overflow:hidden;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
[data-theme="dark"] .weather-loading-bar{background:rgba(255,255,255,0.06)}
.weather-loading-bar-fill{
  width:40%;height:100%;
  background:linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
  background-size:200% 100%;
  animation:weatherBarSlide 1.5s ease-in-out infinite, weatherBarWidth 2.5s ease-out forwards;
  border-radius:3px;
}
@keyframes weatherBarSlide{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
@keyframes weatherBarWidth{
  0%{width:5%}
  50%{width:60%}
  80%{width:82%}
  100%{width:92%}
}
.weather-loading-bar-done .weather-loading-bar-fill{
  width:100%!important;
  animation:none;
  background:var(--primary);
  transition:width .3s ease, opacity .4s ease .15s;
  opacity:0;
}

/* Skeleton shimmer on stats while loading */
.weather-stat-loading{
  position:relative;overflow:hidden;
}
.weather-stat-loading .weather-stat-value,
.weather-stat-loading .weather-stat-label,
.weather-stat-loading .temp-current,
.weather-stat-loading .temp-range,
.weather-stat-loading .temp-hi,
.weather-stat-loading .temp-lo,
.weather-stat-loading .weather-badge{
  color:transparent!important;
}
.weather-stat-loading svg{opacity:0.12}
.weather-stat-loading::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--bg-section) 30%,
    rgba(128,128,128,0.06) 50%,
    var(--bg-section) 70%,
    transparent 100%
  );
  background-size:200% 100%;
  animation:shimmerSlide 1.4s ease infinite;
}
@keyframes shimmerSlide{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* Reveal animation for stats after loading */
.weather-stat-reveal{
  animation:statReveal .45s ease forwards;
}
@keyframes statReveal{
  0%{opacity:0;transform:translateY(6px)}
  100%{opacity:1;transform:translateY(0)}
}

/* Smooth transition class for map wrap */
.weather-loaded .weather-strip{
  animation:stripFadeIn .5s ease forwards;
}
@keyframes stripFadeIn{
  0%{opacity:0.4}
  100%{opacity:1}
}

/* === TASK CARDS === */
.task-list{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.task-day-label{
  font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-tertiary);padding:20px 0 10px;
  animation:fadeInUp .4s ease forwards;
}
.task-day-label:first-child{padding-top:0}
.task-card{
  background:var(--bg-card);border:1px solid var(--border-light);
  border-radius:var(--radius-md);overflow:hidden;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  animation:fadeInUp .5s ease forwards;
  opacity:0;
  box-shadow:var(--shadow-sm);
}
/* Stagger animation for task cards */
.task-card:nth-child(1){animation-delay:.1s}
.task-card:nth-child(2){animation-delay:.15s}
.task-card:nth-child(3){animation-delay:.2s}
.task-card:nth-child(4){animation-delay:.25s}
.task-card:nth-child(5){animation-delay:.3s}
.task-card:nth-child(6){animation-delay:.35s}
.task-card:hover{
  border-color:var(--border-medium);
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}
.task-card-main{
  display:flex;align-items:flex-start;gap:14px;padding:16px 20px;cursor:pointer;
}
.task-checkbox{
  width:26px;height:26px;border:2px solid var(--border-medium);
  border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;transition:all .2s ease;
  background:transparent;
}
.task-checkbox:hover{border-color:var(--primary);transform:scale(1.1)}
.task-checkbox.checked{background:var(--primary);border-color:var(--primary)}
.task-checkbox.checked:hover{background:var(--primary-hover)}
.task-checkbox.checked svg{color:white}
.task-checkbox svg{width:16px;height:16px;color:transparent;transition:color .15s ease}

/* Task Type Icons - DISTINCT COLORS */
.task-type-icon{
  width:40px;height:40px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .25s ease;margin-top:1px;
}
.task-card:hover .task-type-icon{transform:scale(1.1) rotate(-5deg)}
.task-type-icon svg{width:22px;height:22px}
.task-type-icon.plant{background:var(--task-plant-bg);color:var(--task-plant)}
.task-type-icon.water{background:var(--task-water-bg);color:var(--task-water)}
.task-type-icon.feed{background:var(--task-feed-bg);color:var(--task-feed)}
.task-type-icon.harvest{background:var(--task-harvest-bg);color:var(--task-harvest)}
.task-type-icon.task{background:var(--bg-section);color:var(--text-tertiary)}

.task-info{flex:1;min-width:0}
.task-title{font-weight:600;font-size:1.05rem;line-height:1.4;color:var(--text-primary);transition:color .2s ease}
.task-card.completed .task-title{text-decoration:line-through;color:var(--text-tertiary)}
.task-area-badge{
  font-size:.8rem;font-weight:600;color:var(--text-secondary);
  background:var(--bg-section);padding:4px 10px;border-radius:var(--radius-full);
  white-space:nowrap;transition:all .2s ease;display:inline-block;
}
.task-card:hover .task-area-badge{background:var(--primary-pale);color:var(--primary)}
.task-expand-icon{
  width:22px;height:22px;color:var(--text-tertiary);flex-shrink:0;
  transition:all .25s ease;margin-top:2px;
}
.task-card:hover .task-expand-icon{color:var(--text-secondary)}
.task-card.expanded .task-expand-icon{transform:rotate(180deg);color:var(--primary)}

/* Task Accordion */
.task-accordion{max-height:0;overflow:hidden;transition:max-height .35s ease}
.task-card.expanded .task-accordion{max-height:400px}
.task-accordion-inner{
  padding:0 20px 18px 80px;
  font-size:1rem;color:var(--text-secondary);line-height:1.7;
  border-top:1px solid var(--border-light);
  margin-top:0;padding-top:14px;
}
.task-accordion-inner .recipe-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--primary);font-weight:600;font-size:.95rem;margin-top:8px;
  transition:all .2s ease;
}
.task-accordion-inner .recipe-link:hover{gap:10px}
.task-accordion-inner .recipe-link svg{width:16px;height:16px}
.task-accordion-inner .warning-note{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:12px;padding:12px 14px;border-radius:var(--radius-md);
  background:var(--task-feed-bg);color:var(--task-feed);
  font-size:.95rem;font-weight:600;line-height:1.5;
}
.task-accordion-inner .warning-note svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}

/* === AREA CARDS === */
.area-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:28px}
.area-card{
  background:var(--bg-card);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:24px;
  transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;
  box-shadow:var(--shadow-sm);
  animation:fadeInUp .5s ease forwards;
  opacity:0;
  position:relative;
}
/* Stagger area cards */
.area-card:nth-child(1){animation-delay:.2s}
.area-card:nth-child(2){animation-delay:.25s}
.area-card:nth-child(3){animation-delay:.3s}
.area-card:nth-child(4){animation-delay:.35s}
.area-card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-6px);
  border-color:var(--primary);
}
.area-card::after{
  content:'';position:absolute;inset:-2px;border-radius:calc(var(--radius-lg) + 2px);
  border:2px solid var(--primary);opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.area-card:hover::after{opacity:.5}
.area-card-name{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin-bottom:4px;transition:color .2s ease}
.area-card:hover .area-card-name{color:var(--primary)}
.area-card-type{font-size:.95rem;color:var(--text-tertiary);margin-bottom:16px}
.area-card-stats{
  display:flex;gap:20px;margin-bottom:18px;
  font-size:.95rem;color:var(--text-secondary);font-weight:500;
}
.area-card-stat{display:flex;align-items:center;gap:6px}
.area-card-stat svg{width:18px;height:18px;color:var(--primary);transition:transform .25s ease}
.area-card:hover .area-card-stat svg{transform:scale(1.2)}
.area-card-next{
  font-size:.95rem;color:var(--text-tertiary);
  padding-top:14px;border-top:1px solid var(--border-light);
}
.area-card-next strong{color:var(--text-primary);font-weight:600}

/* Add Area Card - CTA uses ACCENT color */
.area-card.add-card{
  border:2px dashed var(--border-medium);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;min-height:180px;background:transparent;
  box-shadow:none;
}
.area-card.add-card::after{display:none}
.area-card.add-card:hover{
  border-color:var(--accent);background:var(--accent-pale);
  transform:translateY(-6px);
}
.area-card.add-card svg{width:36px;height:36px;color:var(--text-tertiary);transition:all .3s ease}
.area-card.add-card:hover svg{color:var(--accent);transform:rotate(90deg) scale(1.1)}
.area-card.add-card span{font-weight:600;color:var(--text-secondary);font-size:1rem;transition:color .2s ease}
.area-card.add-card:hover span{color:var(--accent)}

/* === CALENDAR === */
.calendar-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;
  animation:fadeInUp .5s ease forwards;
}
.calendar-nav{display:flex;align-items:center;gap:14px}
.calendar-nav-btn{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  background:var(--bg-card);color:var(--text-secondary);
  transition:all .2s ease;box-shadow:var(--shadow-sm);
}
.calendar-nav-btn:hover{
  background:var(--bg-section);color:var(--text-primary);
  transform:scale(1.08);box-shadow:var(--shadow-md);
}
.calendar-nav-btn:active{transform:scale(.95)}
.calendar-nav-btn svg{width:20px;height:20px}
.calendar-month{font-family:var(--font-display);font-size:1.4rem;font-weight:600}
.calendar-views{display:flex;gap:4px}
.calendar-view-btn{
  padding:10px 18px;font-size:.95rem;font-weight:600;
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  background:var(--bg-card);color:var(--text-secondary);
  transition:all .2s ease;
}
.calendar-view-btn:hover:not(.active){background:var(--bg-section);transform:translateY(-2px)}
.calendar-view-btn.active{background:var(--primary);color:white;border-color:var(--primary)}

.calendar-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--border-light);gap:1px;box-shadow:var(--shadow-sm);
  animation:fadeInUp .5s ease forwards;
  animation-delay:.1s;
  opacity:0;
}
.calendar-day-header{
  background:var(--bg-section);text-align:center;
  font-size:.85rem;font-weight:700;color:var(--text-tertiary);
  padding:12px 4px;text-transform:uppercase;letter-spacing:.06em;
}
.calendar-day{
  background:var(--bg-card);padding:10px;min-height:100px;cursor:pointer;
  transition:all .2s ease;position:relative;
}
.calendar-day:hover{background:var(--bg-section);transform:scale(1.02);z-index:2;box-shadow:var(--shadow-md)}
.calendar-day.outside{opacity:.35}
.calendar-day.today{background:var(--primary-pale)}
.calendar-day.today:hover{background:var(--primary-light)}
.calendar-day-num{font-size:.95rem;font-weight:600;margin-bottom:8px}
.calendar-day.today .calendar-day-num{
  background:var(--primary);color:white;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
}

/* Calendar Dots - DISTINCT COLORS */
.calendar-dots{display:flex;flex-wrap:wrap;gap:4px}
.calendar-dot{width:9px;height:9px;border-radius:50%;transition:transform .2s ease}
.calendar-day:hover .calendar-dot{transform:scale(1.3)}
.calendar-dot.plant{background:var(--task-plant)}
.calendar-dot.water{background:var(--task-water)}
.calendar-dot.feed{background:var(--task-feed)}
.calendar-dot.harvest{background:var(--task-harvest)}

.calendar-legend{display:flex;gap:24px;margin-top:16px;justify-content:center;animation:fadeIn .5s ease forwards;animation-delay:.2s;opacity:0}
.calendar-legend-item{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--text-secondary);font-weight:500;transition:transform .2s ease}
.calendar-legend-item:hover{transform:scale(1.05)}
.calendar-legend-dot{width:12px;height:12px;border-radius:50%;transition:transform .2s ease}
.calendar-legend-item:hover .calendar-legend-dot{transform:scale(1.3)}

/* === PLANT LIBRARY === */
.plant-search-bar{display:flex;gap:14px;margin-bottom:24px;animation:fadeInUp .5s ease forwards}
.search-input-wrap{flex:1;position:relative}
.search-input-wrap svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--text-tertiary);
  transition:all .25s ease;
}
.search-input-wrap:focus-within svg{color:var(--primary);transform:translateY(-50%) scale(1.1)}
.search-input{
  width:100%;padding:14px 14px 14px 46px;font-size:1rem;
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  background:var(--bg-card);color:var(--text-primary);
  font-family:var(--font-body);transition:all .25s ease;
  box-shadow:var(--shadow-sm);
}
.search-input:hover{border-color:var(--border-medium)}
.search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-pale)}
.filter-btn{
  padding:14px 20px;font-size:1rem;font-weight:600;
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  background:var(--bg-card);color:var(--text-secondary);
  display:flex;align-items:center;gap:8px;
  transition:all .25s ease;box-shadow:var(--shadow-sm);
}
.filter-btn:hover{background:var(--bg-section);color:var(--text-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.filter-btn:active{transform:translateY(0)}
.filter-btn svg{width:18px;height:18px;transition:transform .2s ease}
.filter-btn:hover svg{transform:rotate(15deg)}

.plant-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.plant-card{
  background:var(--bg-card);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:24px;
  transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;
  box-shadow:var(--shadow-sm);
  animation:fadeInUp .5s ease forwards;
  opacity:0;
}
/* Stagger plant cards */
.plant-card:nth-child(1){animation-delay:.1s}
.plant-card:nth-child(2){animation-delay:.15s}
.plant-card:nth-child(3){animation-delay:.2s}
.plant-card:nth-child(4){animation-delay:.25s}
.plant-card:nth-child(5){animation-delay:.3s}
.plant-card:nth-child(6){animation-delay:.35s}
.plant-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:var(--primary)}
.plant-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.plant-card-name{font-family:var(--font-display);font-size:1.15rem;font-weight:600;transition:color .2s ease}
.plant-card:hover .plant-card-name{color:var(--primary)}
.plant-card-type{
  font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:5px 10px;border-radius:var(--radius-full);
  transition:transform .2s ease;
}
.plant-card:hover .plant-card-type{transform:scale(1.05)}
/* Plant type badges - DISTINCT */
.plant-card-type.tomato{background:var(--task-harvest-bg);color:var(--task-harvest)}
.plant-card-type.pepper{background:var(--task-feed-bg);color:var(--task-feed)}
.plant-card-type.herb{background:var(--task-plant-bg);color:var(--task-plant)}
.plant-card-type.allium{background:var(--task-water-bg);color:var(--task-water)}
.plant-card-type.vegetable{background:#fde8c8;color:#431407}
.plant-card-type.lettuce{background:#e8f5e9;color:#2e7d32}
.plant-card-type.squash{background:#fff3e0;color:#e65100}
.plant-card-type.bean,.plant-card-type.pea{background:#e8f5e9;color:#558b2f}
.plant-card-type.root{background:#fbe9e7;color:#bf360c}
.plant-card-type.brassica{background:#e0f2f1;color:#00695c}
.plant-card-type.flower{background:#fce4ec;color:#c62828}
.plant-card-type.fruit{background:#fde8e8;color:#b91c1c}
.plant-card-type.grain,.plant-card-type.corn{background:#fef9c3;color:#854d0e}
.plant-card-type.perennial{background:#ede9fe;color:#5b21b6}
.plant-card-type.legume{background:#dcfce7;color:#166534}
.plant-card-variety{font-size:.95rem;color:var(--text-tertiary);margin-bottom:14px}
.plant-card-meta{
  display:flex;gap:20px;font-size:.95rem;color:var(--text-secondary);font-weight:500;
  padding-top:14px;border-top:1px solid var(--border-light);margin-bottom:14px;
}
.plant-card-meta span{display:flex;align-items:center;gap:6px}
.plant-card-meta svg{width:16px;height:16px;color:var(--text-tertiary);transition:transform .2s ease}
.plant-card:hover .plant-card-meta svg{transform:scale(1.2)}

/* recipe styles below */

/* === SETTINGS === */
.settings-grid{display:flex;flex-direction:column;gap:28px}
.settings-section{
  background:var(--bg-card);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm);
  transition:all .3s ease;
  animation:fadeInUp .5s ease forwards;
  opacity:0;
}
/* Stagger settings sections */
.settings-section:nth-child(1){animation-delay:.1s}
.settings-section:nth-child(2){animation-delay:.15s}
.settings-section:nth-child(3){animation-delay:.2s}
.settings-section:nth-child(4){animation-delay:.25s}
.settings-section:hover{box-shadow:var(--shadow-md);border-color:var(--border-medium)}
.settings-section-title{
  font-family:var(--font-display);font-size:1.15rem;font-weight:600;
  margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border-light);
  display:flex;align-items:center;gap:10px;
}
.settings-section-title svg{width:22px;height:22px;color:var(--primary);transition:transform .25s ease}
.settings-section:hover .settings-section-title svg{transform:scale(1.15) rotate(-5deg)}
.settings-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--border-light);
  transition:all .2s ease;
}
.settings-row:hover{background:var(--bg-section);margin:0 -14px;padding:14px}
.settings-row:last-child{border-bottom:none}
.settings-label{font-weight:600;font-size:1rem}
.settings-hint{font-size:.9rem;color:var(--text-tertiary);margin-top:3px}
.settings-value{font-size:1rem;color:var(--text-secondary);display:flex;align-items:center;gap:10px}
.settings-input{
  padding:12px 14px;font-size:1rem;
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  background:var(--bg-card);color:var(--text-primary);
  font-family:var(--font-body);min-width:120px;
  transition:all .25s ease;
}
.settings-input:hover{border-color:var(--border-medium)}
.settings-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-pale)}
.effort-pills{display:flex;gap:6px}
.effort-pill{
  padding:12px 20px;font-size:.95rem;font-weight:600;
  border:1px solid var(--border-light);border-radius:var(--radius-full);
  background:var(--bg-card);color:var(--text-secondary);
  transition:all .25s ease;
}
.effort-pill:hover:not(.active){background:var(--bg-section);transform:translateY(-2px)}
.effort-pill:active{transform:translateY(0)}
.effort-pill.active{background:var(--primary);color:white;border-color:var(--primary);box-shadow:var(--shadow-sm)}

/* === BUTTONS === */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;font-size:1rem;font-weight:600;
  border-radius:var(--radius-md);border:none;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  font-family:var(--font-body);box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:white}
.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-lg)}
/* CTAs use ACCENT (terracotta) */
.btn-accent{background:var(--accent);color:white}
.btn-accent:hover{background:var(--accent-hover);box-shadow:var(--shadow-lg)}
.btn-secondary{background:transparent;color:var(--primary);border:2px solid var(--primary);box-shadow:none}
.btn-secondary:hover{background:var(--primary-pale)}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border-light);box-shadow:none}
.btn-ghost:hover{background:var(--bg-section);color:var(--text-primary)}
.btn svg{width:20px;height:20px;transition:transform .2s ease}
.btn:hover svg{transform:scale(1.1)}

/* Small button variant */
.btn-sm{padding:10px 16px;font-size:.95rem}

/* === MOBILE NAV OVERLAY === */
.mobile-overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  backdrop-filter:blur(4px);
}
.mobile-overlay.open{opacity:1;pointer-events:auto}
.mobile-panel{
  position:fixed;top:0;right:0;bottom:0;width:300px;z-index:201;
  background:var(--bg-card);box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  padding:24px;display:flex;flex-direction:column;gap:6px;
}
.mobile-overlay.open .mobile-panel{transform:translateX(0)}
.mobile-panel-close{
  align-self:flex-end;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--text-secondary);
  border-radius:var(--radius-md);margin-bottom:12px;
  transition:all .2s ease;
}
.mobile-panel-close:hover{background:var(--bg-section);transform:rotate(90deg)}
.mobile-panel-close svg{width:22px;height:22px}
.mobile-nav-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:var(--radius-md);
  font-size:1rem;font-weight:500;color:var(--text-secondary);
  border:none;background:transparent;width:100%;text-align:left;
  transition:all .2s ease;
}
.mobile-nav-item:hover{background:var(--primary-pale);color:var(--primary);transform:translateX(6px)}
.mobile-nav-item.active{background:var(--primary-pale);color:var(--primary)}
.mobile-nav-item svg{width:22px;height:22px;transition:transform .2s ease}
.mobile-nav-item:hover svg{transform:scale(1.15)}
.mobile-nav-divider{height:1px;background:var(--border-light);margin:10px 0}

/* === RESPONSIVE === */
@media(max-width:900px){
  .tab-nav{flex-wrap:wrap}
  .tab-btn{flex:1 1 calc(33.333% - 6px);min-width:0;padding:12px 10px;font-size:.9rem}
  .tab-btn svg{width:18px;height:18px}
}
@media(max-width:768px){
  .header-top{padding:0 20px;height:60px}
  .tab-nav{display:none}
  .hamburger-btn{display:flex}
  .mobile-overlay{display:block}
  .main-content{padding:20px}
  .weather-strip{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .weather-stat{padding:16px 14px;border-right:none;border-bottom:1px solid var(--border-light);min-height:56px;box-sizing:border-box}
  .weather-stat:nth-child(odd){border-right:1px solid var(--border-light)}
  .weather-stat:last-child,.weather-stat:nth-last-child(2):nth-child(odd) ~ .weather-stat{border-bottom:none}
  .weather-stat:nth-last-child(2):nth-child(odd){border-bottom:none}
  .weather-stat:last-child:nth-child(odd){grid-column:1/-1;border-right:none}
  .weather-stat .temp-current{font-size:1.4rem}
  .weather-stat .temp-hi,.weather-stat .temp-lo{font-size:1.1rem}
  .weather-stat-value{font-size:1.05rem}
  .weather-stat-label{font-size:.7rem}
  .weather-stat svg{width:20px;height:20px}
  /* Alert: full width, show tap target */
  .weather-stat:last-child{grid-column:1/-1;border-right:none;padding:16px 20px}
  .wx-alert-details-btn{display:inline-block;font-size:.95rem}
  .weather-alert-headline{font-size:.9rem;line-height:1.45}
  .wx-alert-expand{font-size:1.05rem;line-height:1.65}
  .wx-alert-expand strong{font-size:1.1rem}
  .wx-alert-expand .wx-expand-meta{font-size:.92rem}
  /* Hide desktop hover tooltip on touch */
  #wx-alert-tip{display:none!important}
  .calendar-header{flex-wrap:wrap;gap:12px}
  .calendar-nav{width:100%;justify-content:space-between}
  .calendar-nav-btn{width:36px;height:36px}
  .calendar-month{font-size:1.3rem}
  .calendar-views{width:100%}
  .calendar-view-btn{flex:1;text-align:center;padding:8px 12px;font-size:.9rem}
  .area-grid{grid-template-columns:1fr}
  .plant-grid{grid-template-columns:1fr}
  .calendar-day{min-height:70px;padding:6px}
  .calendar-day-num{font-size:.9rem}
  .settings-row{flex-direction:column;align-items:flex-start;gap:10px}
  .plant-search-bar{flex-direction:column}
}
@media(max-width:480px){
  .tab-btn{flex:1 1 calc(50% - 6px)}
  .weather-stat{padding:14px 12px;min-height:50px}
  .weather-stat .temp-current{font-size:1.25rem}
  .weather-stat-value{font-size:1rem}
  .weather-stat-label{font-size:.68rem}
  .weather-stat:last-child{padding:14px 16px}
}

/* === LEAFLET OVERRIDES === */
.leaflet-container{font-family:var(--font-body)}
[data-theme="dark"] .leaflet-control-zoom a{
  background:var(--bg-card);color:var(--text-primary);border-color:var(--border-light);
}
[data-theme="dark"] .leaflet-control-attribution{
  background:rgba(18,17,16,.9);color:var(--text-tertiary);
}
[data-theme="dark"] .leaflet-control-attribution a{color:var(--text-secondary)}
.leaflet-tile-pane{transition:opacity .3s}
.back-btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;font-size:1rem;font-weight:600;
  color:var(--text-secondary);background:transparent;border:none;
  border-radius:var(--radius-md);
  transition:all .25s ease;
}
.back-btn:hover{background:var(--bg-section);color:var(--text-primary);transform:translateX(-4px)}
.back-btn svg{width:20px;height:20px}
.header-brand{display:flex;align-items:center;gap:12px;transition:transform .2s ease}
.header-brand:hover{transform:scale(1.02)}
.header-brand svg{width:32px;height:32px;color:var(--primary);transition:transform .3s ease}
.header-brand:hover svg{transform:rotate(-10deg)}
.header-brand h1{font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.header-actions{display:flex;align-items:center;gap:6px}
.header-btn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--text-secondary);
  border-radius:var(--radius-md);transition:all .25s ease;
}
.header-btn:hover{background:var(--bg-section);color:var(--text-primary);transform:translateY(-2px)}
.header-btn:active{transform:translateY(0)}
.header-btn svg{width:22px;height:22px;transition:transform .2s ease}
.header-btn:hover svg{transform:scale(1.15)}

/* === MAIN CONTENT === */
.main-content{max-width:1200px;margin:0 auto;padding:28px}

/* === PAGE HEADER === */
.page-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:32px;gap:20px;flex-wrap:wrap;
  animation:fadeInUp .5s ease forwards;
}
.page-header-info{flex:1;min-width:280px}
.page-title{
  font-family:var(--font-display);font-size:2rem;font-weight:700;
  margin-bottom:8px;display:flex;align-items:center;gap:14px;
}
.page-title svg{width:32px;height:32px;color:var(--primary)}
.page-meta{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  font-size:1rem;color:var(--text-secondary);
}
.page-meta-item{display:flex;align-items:center;gap:6px}
.page-meta-item svg{width:18px;height:18px;color:var(--text-tertiary)}
.phase-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--radius-full);
  font-size:.9rem;font-weight:600;
}
.phase-badge.seedling{background:var(--status-seedling-bg);color:var(--status-seedling)}
.phase-badge.active{background:var(--status-active-bg);color:var(--status-active)}
.phase-badge.harvest{background:var(--status-harvest-bg);color:var(--status-harvest)}
.page-actions{display:flex;gap:10px;flex-wrap:wrap}

/* === BUTTONS === */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;font-size:1rem;font-weight:600;
  border-radius:var(--radius-md);border:none;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  font-family:var(--font-body);box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:white}
.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-lg)}
.btn-accent{background:var(--accent);color:white}
.btn-accent:hover{background:var(--accent-hover);box-shadow:var(--shadow-lg)}
.btn-secondary{background:transparent;color:var(--primary);border:2px solid var(--primary);box-shadow:none}
.btn-secondary:hover{background:var(--primary-pale)}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border-light);box-shadow:none}
.btn-ghost:hover{background:var(--bg-section);color:var(--text-primary)}
.btn-danger{background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none}
.btn-danger:hover{background:var(--accent-pale)}
.btn svg{width:20px;height:20px;transition:transform .2s ease}
.btn:hover svg{transform:scale(1.1)}
.btn-sm{padding:10px 16px;font-size:.95rem}

/* === SECTION === */
.section{margin-bottom:36px}
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
  animation:fadeInUp .5s ease forwards;
  animation-delay:.1s;
  opacity:0;
}
.section-title{
  font-family:var(--font-display);font-size:1.35rem;font-weight:600;
  display:flex;align-items:center;gap:10px;
}
.section-title svg{width:24px;height:24px;color:var(--primary);transition:transform .3s ease}
.section-header:hover .section-title svg{transform:rotate(-10deg) scale(1.1)}

/* === AREA VISUAL PLACEHOLDER === */
.area-visual{
  background:var(--bg-card);border:2px dashed var(--border-medium);
  border-radius:var(--radius-lg);padding:60px 40px;
  text-align:center;margin-bottom:36px;
  animation:fadeInUp .5s ease forwards;
  animation-delay:.15s;
  opacity:0;
  transition:all .3s ease;
}
.area-visual:hover{border-color:var(--primary);background:var(--primary-pale)}
.area-visual-icon{
  width:64px;height:64px;margin:0 auto 16px;
  color:var(--text-tertiary);opacity:.6;
}
.area-visual h3{font-size:1.2rem;color:var(--text-secondary);margin-bottom:8px}
.area-visual p{font-size:1rem;color:var(--text-tertiary);max-width:400px;margin:0 auto}

/* === PLANT CARDS === */
.plant-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.plant-card{
  background:var(--bg-card);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:24px;
  transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;
  box-shadow:var(--shadow-sm);
  animation:fadeInUp .5s ease forwards;
  opacity:0;
  position:relative;
}
.plant-card:nth-child(1){animation-delay:.2s}
.plant-card:nth-child(2){animation-delay:.25s}
.plant-card:nth-child(3){animation-delay:.3s}
.plant-card:nth-child(4){animation-delay:.35s}
.plant-card:nth-child(5){animation-delay:.4s}
.plant-card:nth-child(6){animation-delay:.45s}
.plant-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:var(--primary)}
.plant-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.plant-card-name{font-family:var(--font-display);font-size:1.15rem;font-weight:600;transition:color .2s ease}
.plant-card:hover .plant-card-name{color:var(--primary)}
.plant-card-type{
  font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:5px 10px;border-radius:var(--radius-full);
  transition:transform .2s ease;
}
.plant-card:hover .plant-card-type{transform:scale(1.05)}
.plant-card-type.tomato{background:var(--task-harvest-bg);color:var(--task-harvest)}
.plant-card-type.pepper{background:var(--task-feed-bg);color:var(--task-feed)}
.plant-card-type.herb{background:var(--task-plant-bg);color:var(--task-plant)}
.plant-card-type.allium{background:var(--task-water-bg);color:var(--task-water)}
.plant-card-type.vegetable{background:rgba(146,64,14,.25);color:#fdba74}
.plant-card-type.lettuce{background:rgba(46,125,50,.15);color:#a5d6a7}
.plant-card-type.squash{background:rgba(230,81,0,.15);color:#ffcc80}
.plant-card-type.bean,.plant-card-type.pea{background:rgba(85,139,47,.15);color:#c5e1a5}
.plant-card-type.root{background:rgba(191,54,12,.15);color:#ffab91}
.plant-card-type.brassica{background:rgba(0,105,92,.15);color:#80cbc4}
.plant-card-type.flower{background:rgba(198,40,40,.15);color:#f48fb1}
.plant-card-type.fruit{background:rgba(185,28,28,.2);color:#fca5a5}
.plant-card-type.grain,.plant-card-type.corn{background:rgba(133,77,14,.2);color:#fde68a}
.plant-card-type.perennial{background:rgba(91,33,182,.2);color:#c4b5fd}
.plant-card-type.legume{background:rgba(22,101,52,.2);color:#86efac}
.plant-card-variety{font-size:.95rem;color:var(--text-tertiary);margin-bottom:14px}
.plant-card-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  font-size:.9rem;color:var(--text-secondary);
  padding-top:14px;border-top:1px solid var(--border-light);
}
.plant-card-stat{display:flex;align-items:center;gap:6px}
.plant-card-stat svg{width:16px;height:16px;color:var(--text-tertiary);transition:transform .2s ease}
.plant-card:hover .plant-card-stat svg{transform:scale(1.2)}
.plant-card-stat strong{color:var(--text-primary);font-weight:600}
.plant-card-status{
  position:absolute;top:16px;right:16px;
  width:12px;height:12px;border-radius:50%;
  background:var(--status-active);
  box-shadow:0 0 0 3px var(--status-active-bg);
}
.plant-card-status.dead{background:var(--text-tertiary);box-shadow:0 0 0 3px var(--bg-section)}
.plant-card-actions{
  display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-light);
}
.plant-action-btn{
  flex:1;padding:10px;font-size:.9rem;font-weight:600;
  border:1px solid var(--border-light);border-radius:var(--radius-md);
  background:transparent;color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .2s ease;cursor:pointer;
}
.plant-action-btn:hover{
  background:var(--bg-section);color:var(--text-primary);
  transform:translateY(-2px);
}
.plant-action-btn.danger:hover{
  background:var(--accent-light);color:var(--accent);
  border-color:var(--accent);transform:translateY(-2px);
}
.plant-action-btn svg{width:16px;height:16px;transition:transform .2s ease}
.plant-action-btn.danger svg{transition:none}
.plant-action-btn.danger:hover svg{animation:birdFly .5s ease-out forwards}

/* Add Plant Card */
.plant-card.add-card{
  border:2px dashed var(--border-medium);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;min-height:200px;background:transparent;
  box-shadow:none;
}
.plant-card.add-card:hover{
  border-color:var(--accent);background:var(--accent-pale);
  transform:translateY(-6px);
}
.plant-card.add-card svg{width:36px;height:36px;color:var(--text-tertiary);transition:all .3s ease}
.plant-card.add-card:hover svg{color:var(--accent);transform:rotate(90deg) scale(1.1)}
.plant-card.add-card span{font-weight:600;color:var(--text-secondary);font-size:1rem;transition:color .2s ease}
.plant-card.add-card:hover span{color:var(--accent)}

/* === RECIPE CARDS (Toggleable) === */
.recipe-list{display:flex;flex-direction:column;gap:14px}
.recipe-card{
  background:var(--bg-card);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-sm);
  animation:fadeInUp .5s ease forwards;
  opacity:0;
}
.recipe-card:nth-child(1){animation-delay:.2s}
.recipe-card:nth-child(2){animation-delay:.25s}
.recipe-card:nth-child(3){animation-delay:.3s}
.recipe-card:nth-child(4){animation-delay:.35s}
.recipe-card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.recipe-card.disabled{opacity:.6}
.recipe-card.disabled:hover{opacity:.8}
.recipe-card-main{display:flex;align-items:center;gap:16px;padding:20px 24px;cursor:pointer}
.recipe-toggle{
  width:48px;height:28px;border-radius:var(--radius-full);
  background:var(--bg-section);border:2px solid var(--border-medium);
  position:relative;cursor:pointer;flex-shrink:0;
  transition:all .25s ease;
}
.recipe-toggle::after{
  content:'';position:absolute;top:2px;left:2px;
  width:20px;height:20px;border-radius:50%;
  background:var(--text-tertiary);
  transition:all .25s ease;
}
.recipe-toggle.active{background:var(--primary);border-color:var(--primary)}
.recipe-toggle.active::after{left:22px;background:white}
.recipe-icon{
  width:48px;height:48px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .25s ease;
}
.recipe-card:hover .recipe-icon{transform:scale(1.1) rotate(-5deg)}
.recipe-icon svg{width:24px;height:24px}
.recipe-icon.feed{background:var(--task-feed-bg);color:var(--task-feed)}
.recipe-icon.spray{background:var(--task-water-bg);color:var(--task-water)}
.recipe-icon.amend{background:var(--task-plant-bg);color:var(--task-plant)}
.recipe-info{flex:1;min-width:0}
.recipe-name{font-family:var(--font-display);font-weight:600;font-size:1.15rem;transition:color .2s ease}
.recipe-card:hover .recipe-name{color:var(--primary)}
.recipe-meta{font-size:.95rem;color:var(--text-tertiary);display:flex;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap}
.recipe-badge{font-size:.85rem;font-weight:600;padding:4px 10px;border-radius:var(--radius-sm);transition:transform .2s ease}
.recipe-card:hover .recipe-badge{transform:scale(1.05)}
.recipe-badge.source{background:var(--primary-pale);color:var(--primary)}
.recipe-expand{width:22px;height:22px;color:var(--text-tertiary);transition:all .25s ease}
.recipe-card:hover .recipe-expand{color:var(--text-secondary)}
.recipe-card.expanded .recipe-expand{transform:rotate(180deg);color:var(--primary)}

/* Recipe Accordion */
.recipe-accordion{max-height:0;overflow:hidden;transition:max-height .35s ease}
.recipe-card.expanded .recipe-accordion{max-height:600px}
.recipe-accordion-inner{
  padding:0 24px 24px 24px;
  border-top:1px solid var(--border-light);
}
.recipe-section{margin-top:18px}
.recipe-section-title{font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);margin-bottom:10px}
.recipe-ingredients{display:flex;flex-direction:column;gap:8px}
.recipe-ingredient{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--bg-section);border-radius:var(--radius-md);
  font-size:.95rem;
}
.recipe-ingredient-name{font-weight:500}
.recipe-ingredient-amount{font-weight:700;color:var(--primary)}
.recipe-ingredient-amount .default{font-weight:400;color:var(--text-tertiary);font-size:.85rem;margin-left:6px}
.recipe-method{font-size:1rem;color:var(--text-secondary);line-height:1.7}
.recipe-warning{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:14px;padding:12px 14px;border-radius:var(--radius-md);
  background:var(--task-feed-bg);color:var(--task-feed);
  font-size:.95rem;font-weight:600;line-height:1.5;
}
.recipe-warning svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}

/* === QUICK REFERENCE === */
.quick-ref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.quick-ref-card{
  background:var(--bg-card);border:1px solid var(--border-light);
  border-radius:var(--radius-lg);padding:24px;
  box-shadow:var(--shadow-sm);
  animation:fadeInUp .5s ease forwards;
  opacity:0;
  transition:all .3s ease;
}
.quick-ref-card:nth-child(1){animation-delay:.2s}
.quick-ref-card:nth-child(2){animation-delay:.25s}
.quick-ref-card:nth-child(3){animation-delay:.3s}
.quick-ref-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-medium)}
.quick-ref-title{
  font-family:var(--font-display);font-size:1.1rem;font-weight:600;
  margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.quick-ref-title svg{width:20px;height:20px;color:var(--primary)}
.quick-ref-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.quick-ref-list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.95rem;color:var(--text-secondary);line-height:1.5;
}
.quick-ref-list li svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.quick-ref-list li.do svg{color:var(--task-plant)}
.quick-ref-list li.dont svg{color:var(--accent)}
.quick-ref-list li.info svg{color:var(--task-water)}
.key-dates{display:flex;flex-direction:column;gap:12px}
.key-date{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;background:var(--bg-section);border-radius:var(--radius-md);
}
.key-date-label{font-weight:500;color:var(--text-secondary)}
.key-date-value{font-weight:700;color:var(--text-primary)}

/* === WEATHER PROMPTS (Build 12 — Rain Confirmation) === */
#weather-prompts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.weather-prompt {
    background: var(--card-bg, #fdfcf9);
    border: 1px solid var(--border-light, #ebe8e2);
    border-left: 4px solid var(--task-water, #4280b0);
    border-radius: 10px;
    padding: 16px 20px;
    transition: opacity 0.3s, transform 0.3s, max-height 0.3s, padding 0.3s, margin 0.3s;
}
.weather-prompt-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.weather-prompt-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.weather-prompt-icon.rain {
    background: rgba(66, 128, 176, 0.1);
    color: var(--task-water, #4280b0);
}
.weather-prompt-icon.rain svg {
    width: 20px;
    height: 20px;
}
/* Freeze — icy blue border, cool icon */
.weather-prompt.wp-freeze {
    border-left-color: var(--task-water, #4280b0);
}
.weather-prompt-icon.freeze {
    background: rgba(66, 128, 176, 0.1);
    color: var(--task-water, #4280b0);
}
.weather-prompt-icon.freeze svg {
    width: 20px;
    height: 20px;
}
/* Heat — amber border, warm icon */
.weather-prompt.wp-heat {
    border-left-color: var(--amber-500, #d4960a);
}
.weather-prompt-icon.heat {
    background: rgba(212, 150, 10, 0.1);
    color: var(--amber-500, #d4960a);
}
.weather-prompt-icon.heat svg {
    width: 20px;
    height: 20px;
}
/* Severe — terra-red border, warning icon */
.weather-prompt.wp-severe {
    border-left-color: var(--accent, #c2543a);
}
.weather-prompt-icon.severe {
    background: rgba(194, 84, 58, 0.1);
    color: var(--accent, #c2543a);
}
.weather-prompt-icon.severe svg {
    width: 20px;
    height: 20px;
}
.weather-prompt-title {
    font-family: var(--font-display, 'Fraunces', serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary, #4d4a42);
    line-height: 1.3;
}
.weather-prompt-detail {
    font-size: 1rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 3px;
}
.weather-prompt-why {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 12px 0 0 50px;
    padding: 8px 12px;
    background: var(--moss-50, #f4f7f1);
    border-radius: 6px;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--text-secondary, #6b7280);
}
.weather-prompt-why-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.6;
}
.weather-prompt-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}
.wp-btn {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s, opacity 0.15s;
}
.wp-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.wp-btn-loading {
    opacity: 0.7;
    position: relative;
}
.wp-btn-dismiss {
    background: var(--neutral-100, #f5f3ef);
    color: var(--text-secondary, #6b7280);
}
.wp-btn-dismiss:hover:not(:disabled) {
    background: var(--neutral-200, #ebe8e2);
}
.wp-btn-confirm {
    background: var(--primary, #507038);
    color: #fff;
}
.wp-btn-confirm:hover:not(:disabled) {
    background: var(--moss-700, #3f582d);
}
[data-theme="dark"] .weather-prompt {
    background: var(--dm-card-bg, #1a1d21);
    border-color: rgba(255,255,255,0.08);
    border-left-color: var(--dm-water, #7aa8c0);
}
[data-theme="dark"] .weather-prompt.wp-freeze {
    border-left-color: var(--dm-water, #7aa8c0);
}
[data-theme="dark"] .weather-prompt.wp-heat {
    border-left-color: #e0aa30;
}
[data-theme="dark"] .weather-prompt.wp-severe {
    border-left-color: #e07060;
}
[data-theme="dark"] .weather-prompt-title {
    color: var(--dm-text-primary, #e5e7eb);
}
[data-theme="dark"] .weather-prompt-detail {
    color: var(--dm-text-secondary, #9ca3af);
}
[data-theme="dark"] .weather-prompt-why {
    background: rgba(133, 168, 106, 0.08);
    color: var(--dm-text-secondary, #9ca3af);
}
[data-theme="dark"] .wp-btn-dismiss {
    background: rgba(255,255,255,0.08);
    color: var(--dm-text-secondary, #9ca3af);
}
[data-theme="dark"] .wp-btn-confirm {
    background: var(--dm-moss-accent, #8fbc6a);
    color: #1a1d21;
}
@media (max-width: 480px) {
    .weather-prompt { padding: 14px 16px; }
    .weather-prompt-actions { flex-direction: column; }
    .wp-btn { width: 100%; padding: 12px; text-align: center; }
    .weather-prompt-why { margin-left: 0; }
}

/* ═══ PROACTIVE WEATHER PROMPTS (Build 17) ═══ */

/* Proactive vs Reactive visual distinction */
.weather-prompt.wp-proactive {
    border-left-style: dashed;
    border-left-width: 4px;
}

/* "Looking Ahead" badge */
.wp-badge-ahead {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    background: var(--moss-100, #e6ede0);
    color: var(--moss-700, #3f582d);
}
[data-theme="dark"] .wp-badge-ahead {
    background: rgba(133, 168, 106, 0.15);
    color: var(--dm-moss-accent, #8fbc6a);
}

/* ── Extreme tier: use existing color system ── */

/* Dry Streak — amber (drought) */
.weather-prompt.wp-dry_streak {
    border-left-color: var(--amber-500, #d4960a);
}
.weather-prompt-icon.dry_streak {
    background: rgba(212, 150, 10, 0.1);
    color: var(--amber-500, #d4960a);
}
.weather-prompt-icon.dry_streak svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-dry_streak { border-left-color: #e0aa30; }

/* Freeze Ahead — icy blue */
.weather-prompt.wp-freeze_ahead {
    border-left-color: var(--task-water, #4280b0);
}
.weather-prompt-icon.freeze_ahead {
    background: rgba(66, 128, 176, 0.1);
    color: var(--task-water, #4280b0);
}
.weather-prompt-icon.freeze_ahead svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-freeze_ahead { border-left-color: var(--dm-water, #7aa8c0); }

/* Heat Wave — amber/orange */
.weather-prompt.wp-heat_wave {
    border-left-color: #e07020;
}
.weather-prompt-icon.heat_wave {
    background: rgba(224, 112, 32, 0.1);
    color: #e07020;
}
.weather-prompt-icon.heat_wave svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-heat_wave { border-left-color: #f08030; }

/* High Wind — slate/gray */
.weather-prompt.wp-high_wind {
    border-left-color: #7c8590;
}
.weather-prompt-icon.high_wind {
    background: rgba(124, 133, 144, 0.1);
    color: #7c8590;
}
.weather-prompt-icon.high_wind svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-high_wind { border-left-color: #9aa3b0; }

/* Heavy Rain — deep blue */
.weather-prompt.wp-heavy_rain {
    border-left-color: #3268a0;
}
.weather-prompt-icon.heavy_rain {
    background: rgba(50, 104, 160, 0.1);
    color: #3268a0;
}
.weather-prompt-icon.heavy_rain svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-heavy_rain { border-left-color: #5a90c0; }

/* Temp Whiplash — terra-red/orange zigzag */
.weather-prompt.wp-temp_whiplash {
    border-left-color: var(--accent, #c2543a);
}
.weather-prompt-icon.temp_whiplash {
    background: rgba(194, 84, 58, 0.1);
    color: var(--accent, #c2543a);
}
.weather-prompt-icon.temp_whiplash svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-temp_whiplash { border-left-color: #e07060; }

/* Storms Ahead — dark purple/storm */
.weather-prompt.wp-storms_ahead {
    border-left-color: #7050a0;
}
.weather-prompt-icon.storms_ahead {
    background: rgba(112, 80, 160, 0.1);
    color: #7050a0;
}
.weather-prompt-icon.storms_ahead svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-storms_ahead { border-left-color: #9070c0; }

/* Winter Precip — cool ice blue */
.weather-prompt.wp-winter_precip {
    border-left-color: #5090c0;
}
.weather-prompt-icon.winter_precip {
    background: rgba(80, 144, 192, 0.1);
    color: #5090c0;
}
.weather-prompt-icon.winter_precip svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-winter_precip { border-left-color: #70b0d0; }

/* ── Smart tier ── */

/* Rain Tomorrow — water blue with calendar hint */
.weather-prompt.wp-rain_tomorrow {
    border-left-color: var(--task-water, #4280b0);
}
.weather-prompt-icon.rain_tomorrow {
    background: rgba(66, 128, 176, 0.1);
    color: var(--task-water, #4280b0);
}
.weather-prompt-icon.rain_tomorrow svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-rain_tomorrow { border-left-color: var(--dm-water, #7aa8c0); }

/* ── Normal tier: softer, more muted colors ── */

/* Cloudy Stretch — muted gray-blue */
.weather-prompt.wp-cloudy_stretch {
    border-left-color: #8898a8;
}
.weather-prompt-icon.cloudy_stretch {
    background: rgba(136, 152, 168, 0.1);
    color: #8898a8;
}
.weather-prompt-icon.cloudy_stretch svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-cloudy_stretch { border-left-color: #a0b0c0; }

/* Cool Nights — soft purple-blue */
.weather-prompt.wp-cool_nights {
    border-left-color: #6878a0;
}
.weather-prompt-icon.cool_nights {
    background: rgba(104, 120, 160, 0.1);
    color: #6878a0;
}
.weather-prompt-icon.cool_nights svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-cool_nights { border-left-color: #8898c0; }

/* Warming Trend — warm amber-green */
.weather-prompt.wp-warming_trend {
    border-left-color: #90a040;
}
.weather-prompt-icon.warming_trend {
    background: rgba(144, 160, 64, 0.1);
    color: #90a040;
}
.weather-prompt-icon.warming_trend svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-warming_trend { border-left-color: #b0c060; }

/* Cooling Trend — cool blue-slate */
.weather-prompt.wp-cooling_trend {
    border-left-color: #5080a0;
}
.weather-prompt-icon.cooling_trend {
    background: rgba(80, 128, 160, 0.1);
    color: #5080a0;
}
.weather-prompt-icon.cooling_trend svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-cooling_trend { border-left-color: #70a0c0; }

/* Disease Pressure — olive/organic */
.weather-prompt.wp-disease_pressure {
    border-left-color: #808040;
}
.weather-prompt-icon.disease_pressure {
    background: rgba(128, 128, 64, 0.1);
    color: #808040;
}
.weather-prompt-icon.disease_pressure svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-disease_pressure { border-left-color: #a0a060; }

/* Persistent Wind — muted gray */
.weather-prompt.wp-persistent_wind {
    border-left-color: #788890;
}
.weather-prompt-icon.persistent_wind {
    background: rgba(120, 136, 144, 0.1);
    color: #788890;
}
.weather-prompt-icon.persistent_wind svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-persistent_wind { border-left-color: #98a8b0; }

/* ── Positive tier ── */

/* Ideal Planting — fresh moss green (positive!) */
.weather-prompt.wp-ideal_planting {
    border-left-color: var(--primary, #507038);
    border-left-style: solid;
}
.weather-prompt-icon.ideal_planting {
    background: rgba(80, 112, 56, 0.12);
    color: var(--primary, #507038);
}
.weather-prompt-icon.ideal_planting svg { width: 20px; height: 20px; }
[data-theme="dark"] .weather-prompt.wp-ideal_planting {
    border-left-color: var(--dm-moss-accent, #8fbc6a);
}

/* === BUILD 24: GARDEN JOURNAL
   ═══════════════════════════════════════════════════════════════ */

/* ── Timeline spine & dots ────────────────────────────────────── */
.journal-feed {
  position: relative;
  padding-left: 20px;
}
.journal-feed::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border-light, #e5ebe0);
  border-radius: 2px;
}
[data-theme="dark"] .journal-feed::before { background: rgba(255,255,255,0.08); }

.journal-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  transition: background 0.6s;
}
.journal-entry + .journal-entry { border-top: 1px solid var(--border-light, #e5ebe0); }
[data-theme="dark"] .journal-entry + .journal-entry { border-color: rgba(255,255,255,0.06); }

/* Dot */
.journal-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  border: 2px solid white;
  box-shadow: 0 0 0 1px var(--border-light, #e5ebe0);
}
[data-theme="dark"] .journal-dot { border-color: var(--dm-surface-1, #171a1d); }
.dot-moss   { background: var(--moss-500, #5e8040); }
.dot-water  { background: #3b82f6; }
.dot-amber  { background: var(--amber-500, #c47d2c); }
.dot-terra  { background: var(--terra-500, #c2543a); }

/* Entry content */
.journal-entry-content { flex: 1; min-width: 0; }

.journal-entry-main {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  margin: 0 -6px;
  width: 100%;
}
.journal-entry-main:hover { background: var(--bg-section, #f8faf6); }
[data-theme="dark"] .journal-entry-main:hover { background: rgba(255,255,255,0.04); }

.journal-entry-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.journal-entry-body {
  flex: 1;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.journal-entry-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.journal-entry-date {
  font-size: .8rem;
  color: var(--text-muted, var(--neutral-400));
  font-family: var(--font-body);
  white-space: nowrap;
}
[data-theme="dark"] .journal-entry-date { color: #6b7280; }

/* Expanded area */
.journal-entry-expanded {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-section, #f8faf6);
  border-radius: 8px;
  border: 1px solid var(--border-light, #e5ebe0);
}
[data-theme="dark"] .journal-entry-expanded {
  background: var(--dm-surface-2, #1e2225);
  border-color: rgba(255,255,255,0.06);
}
.journal-entry-full-body {
  margin: 0 0 8px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text-primary);
}

/* Details row */
.journal-entry-details {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.journal-type-badge {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.badge-moss  { background: var(--moss-100, #daecc7); color: var(--moss-700, #3f582d); }
.badge-water { background: #dbeafe; color: #1d4ed8; }
.badge-amber { background: var(--amber-100, #fde9c5); color: var(--amber-700, #8a4e14); }
.badge-terra { background: var(--terra-100, #fbe8e2); color: var(--terra-700, #8a3524); }
[data-theme="dark"] .badge-moss  { background: rgba(94,128,64,0.2);  color: #a8d08a; }
[data-theme="dark"] .badge-water { background: rgba(59,130,246,0.2); color: #93c5fd; }
[data-theme="dark"] .badge-amber { background: rgba(196,125,44,0.2); color: #fbbf24; }
[data-theme="dark"] .badge-terra { background: rgba(194,84,58,0.2);  color: #fca589; }

.journal-phase-chip {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--neutral-100, #f1f5f9);
  color: var(--text-secondary);
  border: 1px solid var(--border-light, #e5ebe0);
}
[data-theme="dark"] .journal-phase-chip { background: rgba(255,255,255,0.06); color: #9ca3af; border-color: rgba(255,255,255,0.08); }

.journal-tag {
  font-size: .72rem;
  color: var(--moss-600, #507038);
  background: var(--moss-50, #f4f7f1);
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid var(--moss-200, #cddbc2);
}
[data-theme="dark"] .journal-tag { background: rgba(80,112,56,0.15); color: #a8d08a; border-color: rgba(80,112,56,0.3); }

.journal-wx-badge {
  display: inline-flex;
  align-items: center;
  font-size: .82rem;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--bg-section, #f8faf6);
  color: var(--text-secondary);
  border: 1px solid var(--border-light, #e5ebe0);
}
[data-theme="dark"] .journal-wx-badge { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #9ca3af; }

.journal-wx-detail {
  font-size: .78rem;
  color: var(--text-muted, var(--neutral-400));
}

/* Season divider */
.journal-season-divider {
  position: relative;
  text-align: center;
  margin: 14px 0 10px;
}
.journal-season-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: var(--border-light, #e5ebe0);
}
[data-theme="dark"] .journal-season-divider::before { background: rgba(255,255,255,0.08); }
.journal-season-divider span {
  position: relative;
  background: var(--bg-card, white);
  padding: 0 10px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted, var(--neutral-400));
  text-transform: uppercase;
  letter-spacing: .06em;
}
[data-theme="dark"] .journal-season-divider span { background: var(--dm-surface-1, #171a1d); color: #6b7280; }

/* ── Quick-add drawer ──────────────────────────────────────────── */
.journal-quickadd-drawer {
  margin-bottom: 14px;
  padding: 12px;
  background: var(--bg-section, #f8faf6);
  border: 1px solid var(--border-light, #e5ebe0);
  border-radius: 10px;
}
[data-theme="dark"] .journal-quickadd-drawer {
  background: var(--dm-surface-2, #1e2225);
  border-color: rgba(255,255,255,0.06);
}
.journal-quickadd-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-light, #e5ebe0);
  border-radius: 7px;
  font-size: .9rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-card, white);
  resize: vertical;
  min-height: 70px;
  box-sizing: border-box;
  margin-bottom: 8px;
}
[data-theme="dark"] .journal-quickadd-textarea {
  background: var(--dm-surface-1, #171a1d);
  border-color: rgba(255,255,255,0.1);
  color: var(--dm-text-primary, #e8e4da);
}
.journal-quickadd-textarea:focus { outline: none; border-color: var(--primary, #507038); box-shadow: 0 0 0 2px rgba(80,112,56,0.12); }
.journal-quickadd-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.journal-char-count {
  font-size: .75rem;
  color: var(--text-muted, var(--neutral-400));
  margin-left: auto;
}

/* ── Filter bar ───────────────────────────────────────────────── */
.journal-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.journal-filter-select {
  flex: 1;
  min-width: 130px;
  padding: 6px 10px;
  border: 1px solid var(--border-light, #e5ebe0);
  border-radius: 7px;
  font-size: .85rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-card, white);
  max-width: 200px;
}
[data-theme="dark"] .journal-filter-select {
  background: var(--dm-surface-1, #171a1d);
  border-color: rgba(255,255,255,0.1);
  color: var(--dm-text-primary, #e8e4da);
}
.journal-filter-select:focus { outline: none; border-color: var(--primary, #507038); }
.journal-search-input {
  flex: 2;
  min-width: 140px;
  padding: 6px 10px;
  border: 1px solid var(--border-light, #e5ebe0);
  border-radius: 7px;
  font-size: .85rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-card, white);
}
[data-theme="dark"] .journal-search-input {
  background: var(--dm-surface-1, #171a1d);
  border-color: rgba(255,255,255,0.1);
  color: var(--dm-text-primary, #e8e4da);
}
.journal-search-input:focus { outline: none; border-color: var(--primary, #507038); }

/* ── Add-note inline form ─────────────────────────────────────── */
.journal-add-note-btn {
  background: none;
  border: none;
  color: var(--moss-600, #507038);
  font-size: .82rem;
  cursor: pointer;
  padding: 3px 0;
  font-family: var(--font-body);
}
.journal-add-note-btn:hover { text-decoration: underline; }
.journal-add-note-form { margin-top: 6px; }
.journal-note-textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-light, #e5ebe0);
  border-radius: 6px;
  font-size: .85rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-card, white);
  resize: vertical;
  min-height: 50px;
  box-sizing: border-box;
  margin-bottom: 6px;
}
[data-theme="dark"] .journal-note-textarea {
  background: var(--dm-surface-1, #171a1d);
  border-color: rgba(255,255,255,0.1);
  color: var(--dm-text-primary, #e8e4da);
}
.journal-note-actions { display: flex; gap: 6px; }
.journal-user-note-display {
  margin-top: 6px;
  font-size: .85rem;
  color: var(--text-secondary);
  font-style: italic;
}
.journal-note-label { font-weight: 600; font-style: normal; color: var(--text-muted, var(--neutral-400)); }

/* ── Delete button ───────────────────────────────────────────── */
.journal-delete-btn {
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--terra-600, #c2543a);
  font-size: .78rem;
  cursor: pointer;
  font-family: var(--font-body);
  padding: 2px 0;
}
.journal-delete-btn:hover { text-decoration: underline; }

/* ── Pagination ──────────────────────────────────────────────── */
.journal-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light, #e5ebe0);
}
[data-theme="dark"] .journal-pagination { border-color: rgba(255,255,255,0.06); }
.journal-page-info {
  font-size: .8rem;
  color: var(--text-muted, var(--neutral-400));
  margin-right: auto;
}
.journal-page-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.journal-page-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--border-light, #e5ebe0);
  border-radius: 6px;
  background: var(--bg-card, white);
  color: var(--text-secondary);
  font-size: .82rem;
  cursor: pointer;
  font-family: var(--font-body);
}
[data-theme="dark"] .journal-page-btn { background: var(--dm-surface-1, #171a1d); border-color: rgba(255,255,255,0.1); color: #9ca3af; }
.journal-page-btn.active { background: var(--primary, #507038); color: white; border-color: var(--primary, #507038); font-weight: 600; }
.journal-page-btn:hover:not(.active) { background: var(--bg-section, #f8faf6); border-color: var(--moss-300, #a4c48d); }
[data-theme="dark"] .journal-page-btn:hover:not(.active) { background: rgba(255,255,255,0.05); }

/* ── Blank state ─────────────────────────────────────────────── */
.journal-blank-state {
  text-align: center;
  padding: 36px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.journal-blank-svg {
  width: 64px;
  height: 80px;
  margin-bottom: 8px;
  opacity: .85;
}
.journal-blank-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-primary);
}
.journal-blank-sub {
  margin: 0 0 12px;
  font-size: .9rem;
  color: var(--text-secondary);
  max-width: 380px;
}

/* ── Recent Activity (Overview tab compact feed) ─────────────── */
.journal-feed-compact {
  padding-left: 20px;
}
.journal-feed-compact::before { left: 7px; }
.journal-entry-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border-light, #e5ebe0);
}
.journal-entry-compact:first-child { border-top: none; }
[data-theme="dark"] .journal-entry-compact { border-color: rgba(255,255,255,0.06); }
.journal-entry-body-compact {
  flex: 1;
  color: var(--text-primary);
  font-size: 1rem;
  font-family: var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.journal-entry-meta-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.journal-wx-mini {
  display: inline-flex;
  align-items: center;
  font-size: .82rem;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--bg-section, #f8faf6);
  color: var(--text-secondary);
  border: 1px solid var(--border-light, #e5ebe0);
}
[data-theme="dark"] .journal-wx-mini { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #9ca3af; }
.journal-entry-time {
  font-size: .78rem;
  color: var(--text-muted, var(--neutral-400));
  font-family: var(--font-body);
}
[data-theme="dark"] .journal-entry-time { color: #6b7280; }
.journal-empty-hint {
  font-size: .92rem;
  color: var(--text-muted, var(--neutral-400));
  padding: 14px 4px;
  margin: 0;
}

/* ── Harvest window chip (area plant card) ───────────────────── */
.apc-stat-harvest {
  color: var(--moss-700, #3f582d);
  background: var(--moss-50, #f4f7f1);
  border: 1px solid var(--moss-200, #cddbc2);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: .72rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
[data-theme="dark"] .apc-stat-harvest { background: rgba(80,112,56,0.15); color: #a8d08a; border-color: rgba(80,112,56,0.3); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .journal-filter-bar { gap: 6px; }
  .journal-filter-select { min-width: 100px; max-width: none; flex: 1 1 calc(50% - 4px); }
  .journal-search-input { flex: 1 1 100%; }
  .journal-quickadd-footer { flex-direction: column; align-items: stretch; }
  .journal-quickadd-footer .journal-char-count { margin-left: 0; }
}