/* ================================================================
   CLOCHE PREMIUM v1.0 — Planta × Calm Aesthetic Upgrade
   Premium botanical luxury: immersive, spacious, editorial
   Loaded LAST — overrides inline styles and style.css

   Design philosophy:
   · Planta: clean card-based UI, soft shadows, lush organic feel
   · Calm: generous whitespace, typography-driven, muted tones
   · Everything breathes. Nothing cramps.
   ================================================================ */

/* ── Refined Color Tokens (warmer, more premium palette) ──── */
:root {
  --sage:             #587A52;
  --sage-deep:        #3B5535;
  --sage-light:       #7A9E72;
  --cream:            #F4EFE6;
  --cream-dark:       #E5DDD0;
  --cream-medium:     #EDE6D8;
  --terracotta:       #A66348;
  --terracotta-light: #C07F64;
  --soil:             #2C2B28;
  --text-muted:       #6B6560;
  --text-light:       #9A9490;
  --moss:             #82A677;
  --moss-faint:       #D8E8D1;
  --warm-white:       #FDFAF6;
  --card-bg:          #FFFFFF;
  --shadow-xs:        0 1px 2px rgba(44,43,40,0.05);
  --shadow-sm:        0 2px 8px rgba(44,43,40,0.07), 0 1px 2px rgba(44,43,40,0.04);
  --shadow-md:        0 4px 16px rgba(44,43,40,0.09), 0 1px 4px rgba(44,43,40,0.04);
  --shadow-lg:        0 8px 32px rgba(44,43,40,0.11), 0 2px 8px rgba(44,43,40,0.05);
  --shadow-xl:        0 12px 48px rgba(44,43,40,0.14), 0 4px 12px rgba(44,43,40,0.06);
  --radius-sm:        8px;
  --radius-md:        14px;
  --radius-lg:        18px;
  --radius-xl:        22px;
  --radius-pill:      100px;
  --border-subtle:    1px solid rgba(90,78,62,0.10);
  --border-default:   1px solid rgba(90,78,62,0.16);
  --transition:       all 0.2s ease;
}

/* ── Global Base ─────────────────────────────────────────── */
body {
  background: var(--cream) !important;
  color: var(--soil) !important;
  /* Subtle botanical paper grain — pure CSS, zero HTTP cost */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E") !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── Typography Elevations ───────────────────────────────── */
/* All section headers and page titles get serif treatment */
.section-title,
.page-title,
.settings-card-title,
h2.section-title,
.card-section-title {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--sage-deep) !important;
}

/* Keep badge/chip labels uppercase Outfit */
.settings-card-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

/* ── Navigation ──────────────────────────────────────────── */
nav,
nav.top-nav {
  background: rgba(253,250,246,0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: var(--border-subtle) !important;
  height: 60px !important;
  box-shadow: 0 1px 8px rgba(44,43,40,0.04) !important;
}

.nav-link:hover {
  background: var(--cream-dark) !important;
  color: var(--soil) !important;
}

.nav-link.active {
  background: var(--moss-faint) !important;
  color: var(--sage-deep) !important;
  font-weight: 600 !important;
}

/* ── Hub Tab Bar (My Garden sub-tabs) ───────────────────── */
.hub-tabs {
  background: rgba(253,250,246,0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: var(--border-subtle) !important;
  box-shadow: 0 2px 8px rgba(44,43,40,0.04) !important;
  gap: 2px !important;
  padding: 0 16px !important;
}

.hub-tab {
  border-radius: var(--radius-pill) !important;
  padding: 7px 16px !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  transition: var(--transition) !important;
}

.hub-tab:hover {
  background: var(--cream-dark) !important;
  color: var(--soil) !important;
}

.hub-tab.active {
  background: var(--moss-faint) !important;
  color: var(--sage-deep) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-xs) !important;
}

/* ── Bottom Navigation (Premium Mobile) ─────────────────── */
.bw-bottom-nav {
  background: rgba(253,250,246,0.97) !important;
  border-top: var(--border-subtle) !important;
  box-shadow: 0 -2px 20px rgba(44,43,40,0.08) !important;
}

.bw-tab {
  color: var(--text-muted) !important;
}

.bw-tab.active {
  color: var(--sage) !important;
}

/* Active tab: pill underline glow instead of dot */
.bw-tab.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: 6px !important;
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 24px !important;
  height: 3px !important;
  background: var(--sage) !important;
  border-radius: 2px !important;
}

/* ── Cards — Premium Treatment ───────────────────────────── */

/* Plan card */
.plan-card {
  background: var(--card-bg) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
  box-shadow: var(--shadow-md) !important;
  border: var(--border-subtle) !important;
}

/* Reminder items */
.reminder-item {
  background: var(--card-bg) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px 18px !important;
  box-shadow: var(--shadow-sm) !important;
  border: var(--border-subtle) !important;
  transition: box-shadow 0.2s ease !important;
}

.reminder-item:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

/* Inventory items (plant cards) */
.inv-item {
  background: var(--card-bg) !important;
  border-radius: var(--radius-md) !important;
  padding: 18px 20px !important;
  box-shadow: var(--shadow-sm) !important;
  border: var(--border-subtle) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.inv-item:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
  border-color: rgba(130,166,119,0.3) !important;
}

/* Stats chips */
.stat-chip {
  background: var(--card-bg) !important;
  border: var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 20px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.2s ease !important;
}

.stat-chip:hover {
  box-shadow: var(--shadow-md) !important;
}

.stat-value {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: var(--sage-deep) !important;
  letter-spacing: -0.01em !important;
}

/* Garden bed cards */
.bed-card {
  background: var(--card-bg) !important;
  border: var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  padding: 22px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}

.bed-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(130,166,119,0.4) !important;
}

/* Bed add button */
.bed-add-btn {
  background: var(--warm-white) !important;
  border: 1.5px dashed rgba(130,166,119,0.5) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--sage-deep) !important;
  transition: var(--transition) !important;
}

.bed-add-btn:hover {
  background: var(--moss-faint) !important;
  border-color: var(--moss) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Settings cards */
.settings-card {
  background: var(--card-bg) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: var(--border-subtle) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

/* Welcome onboarding card */
.welcome-ob-card {
  background: var(--card-bg) !important;
  border-radius: var(--radius-xl) !important;
  padding: 28px 26px !important;
  box-shadow: var(--shadow-md) !important;
  border: none !important;
  border-top: 3px solid var(--sage) !important;
}

.welcome-ob-step {
  background: var(--cream) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px !important;
  border: 1.5px solid transparent !important;
}

.welcome-ob-step.step-active {
  border-color: var(--moss) !important;
  background: rgba(216,232,209,0.3) !important;
}

/* ── Buttons ─────────────────────────────────────────────── */
/* Primary — warm sage, pill shape */
.btn-primary,
button.btn-primary {
  background: var(--sage) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 11px 24px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 2px 8px rgba(88,122,82,0.25) !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover,
button.btn-primary:hover {
  background: var(--sage-deep) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(88,122,82,0.35) !important;
}

.btn-primary:active,
button.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 4px rgba(88,122,82,0.2) !important;
}

/* Outline / secondary */
.btn-outline,
.btn-secondary {
  border-radius: var(--radius-pill) !important;
  transition: var(--transition) !important;
}

/* Ghost buttons */
.btn-ghost {
  border-radius: var(--radius-pill) !important;
  transition: var(--transition) !important;
}

/* Small buttons */
.btn-sm {
  border-radius: var(--radius-pill) !important;
  padding: 7px 16px !important;
  font-size: 0.81rem !important;
}

/* Snap diagnostic button */
.snap-diag-btn {
  border-radius: var(--radius-md) !important;
  padding: 12px 22px !important;
  font-size: 0.88rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}

/* ── Diagnostic CTA Card ─────────────────────────────────── */
.snap-diagnostic-card {
  border-radius: var(--radius-xl) !important;
  padding: 24px 26px !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── Form Inputs ─────────────────────────────────────────── */
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
select,
textarea {
  background: var(--warm-white) !important;
  border: 1.5px solid var(--cream-dark) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--soil) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  font-family: 'Outfit', sans-serif !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--sage) !important;
  box-shadow: 0 0 0 3px rgba(88,122,82,0.12) !important;
  outline: none !important;
}

/* ── Section Headers ─────────────────────────────────────── */
.section-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
  margin-top: 32px !important;
}

.section-row:first-of-type {
  margin-top: 0 !important;
}

/* ── Plan Generating Loader ─────────────────────────────── */
.plan-card {
  background: var(--card-bg) !important;
}

/* ── Empty States — Botanical Warmth ─────────────────────── */
.empty-state,
.plan-empty {
  background: var(--warm-white) !important;
  border: var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  padding: 52px 32px !important;
  text-align: center !important;
}

.empty-icon,
.plan-empty-icon {
  font-size: 3.2rem !important;
  margin-bottom: 14px !important;
  display: block !important;
  line-height: 1 !important;
}

.empty-text,
.plan-empty-text {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  color: var(--sage-deep) !important;
  margin-bottom: 8px !important;
}

.empty-sub {
  color: var(--text-light) !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  max-width: 280px !important;
  margin: 0 auto 20px !important;
}

/* ── Meta tags / Badges ─────────────────────────────────── */
.meta-tag {
  font-size: 0.72rem !important;
  border-radius: var(--radius-pill) !important;
  padding: 3px 9px !important;
}

.reminder-cat {
  border-radius: var(--radius-pill) !important;
  font-size: 0.70rem !important;
}

.bed-type-badge {
  border-radius: var(--radius-pill) !important;
}

/* ── Greeting Bar ────────────────────────────────────────── */
.greeting-bar {
  background: rgba(253,250,246,0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: var(--border-subtle) !important;
  box-shadow: 0 2px 12px rgba(44,43,40,0.04) !important;
}

/* ── Tabs (segment controls) ─────────────────────────────── */
.tabs {
  background: var(--cream-dark) !important;
  border-radius: var(--radius-md) !important;
  padding: 4px !important;
  gap: 2px !important;
}

.tab {
  border-radius: var(--radius-sm) !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  transition: var(--transition) !important;
}

.tab.active {
  background: var(--card-bg) !important;
  color: var(--sage-deep) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-xs) !important;
}

/* ── Done Section ────────────────────────────────────────── */
.done-toggle {
  background: var(--warm-white) !important;
  border: var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-muted) !important;
}

.done-toggle:hover {
  background: var(--cream-dark) !important;
  color: var(--soil) !important;
}

/* ── Quantity stepper ────────────────────────────────────── */
.qty-btn {
  border-radius: 50% !important;
  border: 1.5px solid var(--cream-dark) !important;
  background: var(--warm-white) !important;
  transition: var(--transition) !important;
}

.qty-btn:hover {
  background: var(--moss-faint) !important;
  border-color: var(--sage) !important;
}

/* ── Profile / Settings Avatar ───────────────────────────── */
.avatar {
  background: var(--moss-faint) !important;
  border: 2px solid rgba(130,166,119,0.25) !important;
  box-shadow: 0 2px 8px rgba(88,122,82,0.12) !important;
}

/* ── Onboarding Card ─────────────────────────────────────── */
.ob-header {
  background: linear-gradient(135deg, var(--sage-deep) 0%, var(--sage) 60%, var(--sage-light) 100%) !important;
}

/* ── Bed grid gap ────────────────────────────────────────── */
.beds-grid {
  gap: 18px !important;
}

/* ── General card list gap ───────────────────────────────── */
.inventory-list {
  gap: 12px !important;
}

.reminder-list {
  gap: 12px !important;
}

/* ── Plan refresh note ───────────────────────────────────── */
.plan-refresh-note {
  background: var(--moss-faint) !important;
  border-radius: var(--radius-md) !important;
  border: var(--border-subtle) !important;
}

/* ── Loader skeleton ─────────────────────────────────────── */
.hub-loading {
  background: var(--cream) !important;
}

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  background: var(--sage-deep) !important;
  border-radius: var(--radius-pill) !important;
  padding: 10px 22px !important;
  font-size: 0.86rem !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── Modal overlays ─────────────────────────────────────── */
.bed-modal,
.diag-modal {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
}

.bed-modal-title,
.diag-modal-title {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

/* ── Page main content ───────────────────────────────────── */
main {
  padding-top: 32px !important;
}

@media (max-width: 767px) {
  main {
    padding-top: 80px !important; /* keep greeting bar clearance */
  }
}

/* ── Greeting text typography ────────────────────────────── */
.greeting-text {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--sage-deep) !important;
  letter-spacing: -0.01em !important;
}

/* ── Reminder check (botanical) ─────────────────────────── */
.reminder-check {
  border-color: var(--moss) !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important; /* softer square — more premium than circle */
  border-width: 2px !important;
  transition: all 0.2s ease !important;
}

.reminder-check.checked {
  background: var(--sage) !important;
  border-color: var(--sage) !important;
}

/* ── Profile chip ────────────────────────────────────────── */
.profile-chip {
  border-radius: var(--radius-pill) !important;
  background: var(--cream-dark) !important;
  border: var(--border-subtle) !important;
}

/* ── Add plant card (dashed) ────────────────────────────── */
.add-card {
  background: var(--warm-white) !important;
  border: 1.5px dashed rgba(130,166,119,0.5) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}

/* ── Stage badges (rounder) ─────────────────────────────── */
.stage-badge {
  border-radius: var(--radius-pill) !important;
}

/* ── Quantity badge ──────────────────────────────────────── */
.qty-badge {
  border-radius: var(--radius-pill) !important;
  background: var(--sage) !important;
  padding: 2px 10px !important;
}

/* ── Reminder pill ───────────────────────────────────────── */
.reminder-pill {
  border-radius: var(--radius-pill) !important;
  background: var(--terracotta-light) !important;
}

/* ── Tier badge ──────────────────────────────────────────── */
.tier-badge {
  border-radius: var(--radius-pill) !important;
}

/* ── Plan meta ───────────────────────────────────────────── */
.plan-meta {
  color: var(--text-light) !important;
  font-size: 0.8rem !important;
  border-color: var(--cream-dark) !important;
}

/* ── Logout button ───────────────────────────────────────── */
.btn-logout {
  border-radius: var(--radius-pill) !important;
  border-color: var(--cream-dark) !important;
  color: var(--text-muted) !important;
  transition: var(--transition) !important;
}

.btn-logout:hover {
  background: var(--cream-dark) !important;
  color: var(--soil) !important;
}

/* ── Section "view all" links ────────────────────────────── */
.section-link {
  color: var(--sage-deep) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: color 0.15s !important;
}

.section-link:hover {
  color: var(--sage) !important;
}

/* ── Done count badge ────────────────────────────────────── */
.done-count {
  background: var(--moss-faint) !important;
  color: var(--sage-deep) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
}

/* ── Settings row ────────────────────────────────────────── */
.settings-row {
  padding: 16px 22px !important;
  transition: background 0.15s !important;
}

.settings-row:hover {
  background: rgba(244,239,230,0.5) !important;
}

/* ── Profile section in settings ───────────────────────────── */
.profile-section {
  padding: 22px !important;
}

/* ── Garden stat value ───────────────────────────────────── */
.garden-stat-val {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  color: var(--sage-deep) !important;
  letter-spacing: -0.02em !important;
}

/* ── Snap diag used state ────────────────────────────────── */
.snap-diag-used {
  border-radius: var(--radius-lg) !important;
}

/* ── Diag result blocks ─────────────────────────────────── */
.diag-result-overall {
  background: var(--cream) !important;
  border-radius: var(--radius-md) !important;
  border: var(--border-subtle) !important;
}

.diag-card {
  border-radius: var(--radius-md) !important;
  border: var(--border-subtle) !important;
  box-shadow: var(--shadow-xs) !important;
}

.diag-action-text {
  background: var(--moss-faint) !important;
  border-radius: var(--radius-sm) !important;
}

/* ── Level up modal ─────────────────────────────────────── */
#obVideoCard {
  border-radius: 28px !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ── Responsive spacing ─────────────────────────────────── */
@media (max-width: 600px) {
  .beds-grid {
    gap: 14px !important;
  }

  .bed-card {
    padding: 18px !important;
  }

  .inv-item {
    padding: 14px 16px !important;
  }

  .reminder-item {
    padding: 14px 16px !important;
  }

  .empty-state {
    padding: 40px 24px !important;
  }
}

/* ── Accessibility: Reduced motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .inv-item:hover,
  .bed-card:hover,
  .reminder-item:hover,
  .btn-primary:hover {
    transform: none !important;
  }
}

/* ── Custom Scrollbar (webkit) ───────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(90,78,62,0.18);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(90,78,62,0.3);
}

/* ── Plant/Crop Image Treatment ─────────────────────────── */
/* Any img inside an inventory item or card gets premium framing */
.inv-item img,
.bed-card img,
.plant-card img,
.reminder-item img,
.timeline-item img {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  object-fit: cover !important;
}

/* Timeline / progress photo containers */
.timeline-photo,
.progress-photo {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
}

/* ── Page Header Accent ─────────────────────────────────── */
/* Editorial page titles get a subtle serif treatment */
.page-title {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: var(--sage-deep) !important;
  line-height: 1.2 !important;
}

.page-subtitle,
.page-sub {
  color: var(--text-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}

/* ── Companion/Detail Badges ────────────────────────────── */
.companion-tag,
.detail-tag {
  border-radius: var(--radius-pill) !important;
}

/* ── Paywall / Upgrade Banner ────────────────────────────── */
.paywall-card,
.upgrade-card {
  background: linear-gradient(135deg, var(--sage-deep) 0%, var(--sage) 100%) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── Loading Skeletons ───────────────────────────────────── */
.skeleton,
.skeleton-line {
  background: linear-gradient(90deg, var(--cream-dark) 25%, var(--cream-medium) 50%, var(--cream-dark) 75%) !important;
  background-size: 400px 100% !important;
  animation: skeleton-shimmer 1.4s ease infinite !important;
  border-radius: var(--radius-sm) !important;
}

@keyframes skeleton-shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0;  }
}

/* ── Chat page ───────────────────────────────────────────── */
/* Chat bubbles */
.msg-bubble,
.message-bubble {
  border-radius: 18px !important;
  box-shadow: var(--shadow-xs) !important;
}

/* ── Discover / Plant Finder cards ──────────────────────── */
.discover-card,
.plant-result-card,
.finder-card {
  background: var(--card-bg) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: var(--border-subtle) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.discover-card:hover,
.plant-result-card:hover,
.finder-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* ── Table / data rows ───────────────────────────────────── */
/* Succession / rotation tables */
.sched-table,
.rotation-table {
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}

.sched-row,
.rotation-row {
  background: var(--card-bg) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-xs) !important;
}

/* ── Greeting zone pill (organic, not sharp) ─────────────── */
.greeting-zone-pill {
  background: var(--moss-faint) !important;
  border: 1px solid rgba(130,166,119,0.3) !important;
  color: var(--sage-deep) !important;
  border-radius: var(--radius-pill) !important;
}

/* ── Timing engine widget ────────────────────────────────── */
.timing-card,
.seed-start-card,
.nudge-card {
  background: var(--card-bg) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: var(--border-subtle) !important;
}

/* ── Section separator / divider ────────────────────────── */
hr {
  border: none !important;
  border-top: var(--border-subtle) !important;
  margin: 20px 0 !important;
}

/* ── Watering / care frequency badges ───────────────────── */
.freq-badge,
.water-badge,
.care-badge {
  border-radius: var(--radius-pill) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}

/* ── Settings toggle switches ────────────────────────────── */
.toggle-switch {
  --toggle-bg-off: var(--cream-dark);
  --toggle-bg-on:  var(--sage);
}

/* ── Trial / free tier notice ────────────────────────────── */
.trial-banner,
.limit-banner {
  background: var(--moss-faint) !important;
  border: 1px solid rgba(130,166,119,0.3) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--sage-deep) !important;
}

/* ── Garden map / build ───────────────────────────────────── */
.map-bed,
.build-zone {
  border-radius: var(--radius-sm) !important;
  transition: var(--transition) !important;
}

/* ── Progress / timeline ─────────────────────────────────── */
.timeline-entry,
.progress-entry {
  background: var(--card-bg) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: var(--border-subtle) !important;
}

/* ── Hub container premium feel ─────────────────────────── */
.hub-iframe-wrap {
  background: var(--cream) !important;
}

/* ── Smooth focus rings ──────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--sage) !important;
  outline-offset: 3px !important;
}

/* ── Mobile: extra breathing room on cards ──────────────── */
@media (max-width: 400px) {
  main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .plan-card {
    padding: 20px 18px !important;
  }
}