/* ============================================================
   WATERLY — design system
   Inspiration: friendly, modular, illustrative.
   Display: Bricolage Grotesque · Body: Inter · Script: Caveat
   ============================================================ */

/* ============== TOKENS ============== */
:root {
  /* Ink (deep forest green-black) */
  --ink-900: #0E1F17;
  --ink-700: #2A3F32;
  --ink-500: #54675C;
  --ink-400: #7C8E83;
  --ink-300: #ADBCB1;
  --ink-200: #D4DDD7;
  --ink-100: #E8EFEA;
  --ink-50:  #F4F8F5;

  /* Surfaces */
  --bg:      #F8F2E5;       /* warm cream */
  --bg-deep: #EFE6D1;
  --surface: #FFFFFF;

  /* Vibrant green family */
  --green-50:  #EAF7ED;
  --green-100: #CFEBD7;
  --green-300: #5FCC85;
  --green-500: #1AAA56;
  --green-600: #128744;
  --green-700: #0B6231;
  --green-900: #073B1F;

  /* Playful accent palette */
  --lime:     #DFFA53;
  --butter:   #FFE57C;
  --peach:    #FFC9A0;
  --coral:    #FF7868;
  --berry:    #FF8FBC;
  --sky:      #A6D6F4;
  --lavender: #C9B6FF;

  /* Plant-card tints (extra, themed) */
  --sand:     #ECD9A8;   /* cacti / desert */
  --clay:     #DDB48E;   /* trees / woody */
  --mint:     #B7E8DA;   /* ferns / tropical foliage */
  --pink:     #FBD0E4;   /* flowering plants */

  /* Semantic */
  --amber-100: #FFE9B8;
  --amber-500: #E59500;
  --amber-700: #8B5A00;
  --red-100:   #FFD8D2;
  --red-500:   #DA4A36;

  /* Shadows */
  --shadow-soft: 0 1px 3px rgba(14,31,23,0.05);
  --shadow-card: 0 1px 2px rgba(14,31,23,0.04), 0 4px 16px rgba(14,31,23,0.06);
  --shadow-pop:  0 4px 8px rgba(14,31,23,0.06), 0 18px 44px rgba(14,31,23,0.10);
  --shadow-pop-coral: 8px 8px 0 var(--coral);
  --shadow-pop-lime:  8px 8px 0 var(--lime);
  --shadow-pop-ink:   6px 6px 0 var(--ink-900);

  /* Radii */
  --r-xs:   10px;
  --r-sm:   14px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   36px;
  --r-pill: 999px;

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script:  'Caveat', cursive;
}

/* ============================================================
   ANIMATIONS
   - .js scopes everything to environments that have JS.
   - data-animate elements start hidden and reveal on scroll
     via IntersectionObserver in app.js.
   - Hero uses unconditional CSS animations (always above fold).
   ============================================================ */

/* Reusable keyframes */
@keyframes wt-fade-up      { from { opacity: 0; transform: translateY(24px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes wt-fade-down    { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wt-fade-in      { from { opacity: 0; }                                to { opacity: 1; } }
@keyframes wt-pop-in       { from { opacity: 0; transform: translateY(20px) scale(0.6); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes wt-marker-draw  { 0%   { background-size: 0% 100%; transform: rotate(-1.5deg) scale(1); }
                             85%  { background-size: 100% 100%; transform: rotate(-1.5deg) scale(1.05); }
                             100% { background-size: 100% 100%; transform: rotate(-1.5deg) scale(1); } }
@keyframes wt-wave         { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-10deg); } }

/* Scroll-triggered system (only active when JS is present) */
.js [data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.2, 0.8, 0.4, 1),
              transform 0.75s cubic-bezier(0.2, 0.8, 0.4, 1);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
.js [data-animate="fade-down"]  { transform: translateY(-22px); }
.js [data-animate="fade-left"]  { transform: translateX(-36px); }
.js [data-animate="fade-right"] { transform: translateX(36px); }
.js [data-animate="pop"]        { transform: scale(0.85); }
.js [data-animate="rotate-pop"] { transform: scale(0.85) rotate(-4deg); }
.js [data-animate="slide-up-big"] { transform: translateY(60px); }

.js [data-animate].is-visible {
  opacity: 1 !important;
  transform: translateY(0) translateX(0) scale(1) rotate(0) !important;
}
/* Tips preview card lands at its base -0.4deg tilt, not 0deg */
.js .tips-preview-card[data-animate].is-visible { transform: rotate(-0.4deg) !important; }
/* Featured plan lands at its base -0.5deg tilt */
.js .plan-featured[data-animate].is-visible { transform: rotate(-0.5deg) !important; }

/* Stagger via CSS variable on parent — children index inferred via :nth-child.
   Scoped to children that still have [data-animate] so the delay disappears
   once the reveal finishes (otherwise it would leak into hover transitions). */
.js [data-stagger] > [data-animate] { transition-delay: calc(var(--stagger, 0.08s) * var(--i, 0)); }
.js [data-stagger] > *:nth-child(1)  { --i: 0; }
.js [data-stagger] > *:nth-child(2)  { --i: 1; }
.js [data-stagger] > *:nth-child(3)  { --i: 2; }
.js [data-stagger] > *:nth-child(4)  { --i: 3; }
.js [data-stagger] > *:nth-child(5)  { --i: 4; }
.js [data-stagger] > *:nth-child(6)  { --i: 5; }
.js [data-stagger] > *:nth-child(7)  { --i: 6; }
.js [data-stagger] > *:nth-child(8)  { --i: 7; }
.js [data-stagger] > *:nth-child(9)  { --i: 8; }
.js [data-stagger] > *:nth-child(10) { --i: 9; }

/* HERO — unconditional CSS animations on load */
.js .hero .kicker  { animation: wt-fade-down 0.7s 0.10s cubic-bezier(0.2, 0.8, 0.4, 1) backwards; }
.js .hero h1       { animation: wt-fade-up   0.9s 0.25s cubic-bezier(0.2, 0.8, 0.4, 1) backwards; }
.js .hero .lede    { animation: wt-fade-up   0.8s 0.55s cubic-bezier(0.2, 0.8, 0.4, 1) backwards; }
.js .hero-cta      { animation: wt-fade-up   0.8s 0.70s cubic-bezier(0.2, 0.8, 0.4, 1) backwards; }

/* Highlight: marker draws ON TOP after the headline lands */
.js .hero .highlight {
  background: linear-gradient(var(--lime), var(--lime));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  animation: wt-marker-draw 0.7s 1.05s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Hero emojis: pop in sequentially, then start bobbing */
.js .hero-art span {
  animation: wt-pop-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
             bob       4s ease-in-out infinite;
}
.js .hero-art span:nth-child(1) { animation-delay: 0.95s, 1.7s; }
.js .hero-art span:nth-child(2) { animation-delay: 1.05s, 1.8s; }
.js .hero-art span:nth-child(3) {
  animation: wt-pop-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
             wt-wave   3s ease-in-out infinite;
  animation-delay: 1.15s, 2.0s;
  transform-origin: 50% 80%;
}
.js .hero-art span:nth-child(4) { animation-delay: 1.25s, 2.0s; }
.js .hero-art span:nth-child(5) { animation-delay: 1.35s, 2.1s; }

/* Doodles: gently fade in last so they don't compete during the reveal */
.js .doodle-1    { animation: wt-fade-in 0.9s 1.55s ease-out backwards, bob 5s ease-in-out infinite 2.5s; }
.js .doodle-2    { animation: wt-fade-in 0.9s 1.65s ease-out backwards, spin 18s linear infinite 2.6s; }
.js .doodle-3    { animation: wt-fade-in 0.9s 1.75s ease-out backwards, bob 6s ease-in-out infinite reverse 2.7s; }
.js .doodle-4    { animation: wt-fade-in 0.9s 1.85s ease-out backwards, bob 7s ease-in-out infinite 2.8s; }
.js .doodle-e1   { animation: wt-fade-in 0.9s 1.95s ease-out backwards, bob 5s ease-in-out infinite reverse 2.9s; }
.js .doodle-e2   { animation: wt-fade-in 0.9s 2.05s ease-out backwards, bob 6s ease-in-out infinite 3.0s; }

/* Respect reduced motion preference */
.reduced-motion .hero .kicker,
.reduced-motion .hero h1,
.reduced-motion .hero .lede,
.reduced-motion .hero-cta,
.reduced-motion .hero-art,
.reduced-motion .hero-art span,
.reduced-motion .doodle,
.reduced-motion .doodle-emoji,
.reduced-motion .hero .highlight {
  animation: none !important;
  background-size: 100% 100% !important;
  opacity: 1 !important;
  transform: none !important;
}
.reduced-motion [data-animate] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============== RESET + BASE ============== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink-900);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0 0 14px;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink-900);
}
h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 700;
  font-variation-settings: "opsz" 96;
}
h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  font-variation-settings: "opsz" 48;
}
h3 {
  font-size: 1.15rem;
  font-weight: 600;
  font-variation-settings: "opsz" 24;
  letter-spacing: -0.015em;
}
p { margin: 0 0 14px; color: var(--ink-700); }

.muted { color: var(--ink-500); }
.small { font-size: 0.85rem; }
.big   { font-size: 1.4rem; font-weight: 600; color: var(--ink-900); }
.script { font-family: var(--font-script); font-style: normal; color: var(--green-700); font-weight: 700; font-size: 1.25em; }
.hidden { display: none !important; }
.show-sm { display: none; }

a { color: var(--green-700); }
a:hover { color: var(--green-500); }

::selection { background: var(--lime); color: var(--ink-900); }

/* ============== KICKER + HIGHLIGHT ============== */
.kicker {
  display: inline-block;
  background: var(--green-100);
  color: var(--green-700);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}
.kicker-coral  { background: #FFE0DC;  color: #B33122; }
.kicker-sky    { background: #DBEEFB;  color: #0F5A8C; }
.kicker-butter { background: #FFF6D2;  color: #7A5500; }
.kicker-berry  { background: #FFD6E6;  color: #A8366B; }

.highlight {
  display: inline-block;
  background: var(--lime);
  padding: 0 0.18em;
  border-radius: 8px;
  transform: rotate(-1.5deg);
  box-shadow: 0 2px 0 rgba(14,31,23,0.08);
}

/* ============== BUTTONS ============== */
.btn {
  appearance: none;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  border: 2px solid var(--ink-900);
  background: var(--surface);
  color: var(--ink-900);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--ink-900);
  color: var(--surface);
  border-color: var(--ink-900);
}
.btn-primary:hover { background: var(--green-700); border-color: var(--green-700); }

/* "Already watered today" — done state, not interactive */
.btn.is-watered,
.btn:disabled {
  cursor: default;
  opacity: 1;
}
.btn.is-watered {
  background: var(--green-100);
  color: var(--green-700);
  border-color: var(--green-500);
}
.btn.is-watered:hover { transform: none; }

.btn-lg { padding: 16px 28px; font-size: 1.05rem; }

.btn-danger {
  color: var(--red-500); border-color: var(--red-100); background: var(--surface);
}
.btn-danger:hover { background: var(--red-100); border-color: var(--red-500); }

.link {
  background: none; border: none; padding: 8px 10px; cursor: pointer;
  color: var(--ink-700); font-size: 0.95rem; font-weight: 600;
  font-family: var(--font-body);
  border-radius: var(--r-pill);
  transition: color 0.15s, background 0.15s;
}
.link:hover { color: var(--green-700); background: var(--ink-50); }

.icon-btn {
  background: none; border: none; cursor: pointer; font-size: 1.05rem;
  padding: 8px 10px; color: var(--ink-500); border-radius: var(--r-pill);
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--ink-100); color: var(--ink-900); }

/* ============== NAV ============== */
.landing-nav, .app-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  background: rgba(248,242,229,0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(14,31,23,0.06);
  position: sticky; top: 0; z-index: 30;
}
.app-nav { background: rgba(248,242,229,0.85); }

.logo {
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 700;
  letter-spacing: -0.025em;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: transform 0.15s ease;
}
.logo:hover { transform: rotate(-3deg); }
.logo span { color: var(--green-700); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.tabs { display: flex; gap: 6px; background: var(--ink-50); padding: 5px; border-radius: var(--r-pill); }
.tab {
  background: none; border: none; padding: 8px 18px;
  border-radius: var(--r-pill); cursor: pointer;
  color: var(--ink-500); font-weight: 600; font-size: 0.92rem;
  font-family: var(--font-body);
  transition: all 0.15s;
}
.tab:hover { color: var(--ink-900); }
.tab.active { color: var(--ink-900); background: var(--surface); box-shadow: var(--shadow-soft); }

.plan-badge {
  background: var(--ink-100); color: var(--ink-700);
  padding: 5px 12px; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 600;
}
.plan-badge.plus {
  background: linear-gradient(135deg, var(--butter), var(--lime));
  color: var(--ink-900);
  box-shadow: var(--shadow-soft);
}

/* ============== HERO ============== */
.screen { min-height: 100vh; }

.hero {
  position: relative;
  max-width: 980px; margin: 0 auto;
  padding: 90px 24px 70px;
  text-align: center;
  overflow: visible;
}
.hero h1 { margin-bottom: 22px; }
.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink-700);
  max-width: 580px; margin: 0 auto 32px;
}
.hero-cta {
  display: flex; gap: 18px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin-bottom: 50px;
}
.hero-art {
  display: flex; gap: 18px; justify-content: center;
  font-size: 2.6rem;
  filter: drop-shadow(0 4px 10px rgba(11,98,49,0.18));
}
.hero-art span {
  display: inline-block;
  animation: bob 4s ease-in-out infinite;
}
.hero-art span:nth-child(1) { animation-delay: 0s; }
.hero-art span:nth-child(2) { animation-delay: 0.4s; }
.hero-art span:nth-child(3) { animation-delay: 0.8s; }
.hero-art span:nth-child(4) { animation-delay: 1.2s; }
.hero-art span:nth-child(5) { animation-delay: 1.6s; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}

/* Floating decorative SVG doodles */
.doodle {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.doodle-1 { top: 30px;  left: 6%;   width: 56px;  height: 56px;  animation: bob 5s ease-in-out infinite; }
.doodle-2 { top: 90px;  right: 8%;  width: 80px;  height: 80px;  animation: spin 18s linear infinite; }
.doodle-3 { top: 250px; left: 4%;   width: 64px;  height: 64px;  animation: bob 6s ease-in-out infinite reverse; }
.doodle-4 { top: 200px; right: 6%;  width: 90px;  height: 90px;  animation: bob 7s ease-in-out infinite; }

.doodle-emoji {
  position: absolute; font-size: 2rem;
  pointer-events: none; z-index: -1;
}
.doodle-e1 { bottom: 80px; left: 12%; animation: bob 5s ease-in-out infinite reverse; }
.doodle-e2 { bottom: 110px; right: 14%; animation: bob 6s ease-in-out infinite; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============== SECTIONS ============== */
.section {
  position: relative;
  max-width: 1080px; margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}
.section-problem { background: linear-gradient(180deg, transparent, var(--bg-deep) 50%, transparent); }

.problem-list {
  list-style: none; padding: 0; margin: 12px auto 28px;
  display: grid; gap: 12px; max-width: 540px;
}
.problem-list li { display: contents; }
.problem-q {
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  padding: 16px 22px;
  text-align: left;
  color: var(--ink-700);
  font-style: italic;
  font-size: 1.05rem;
  display: block;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s;
}
.problem-list li:nth-child(odd) .problem-q  { transform: rotate(-0.6deg); }
.problem-list li:nth-child(even) .problem-q { transform: rotate(0.5deg); margin-left: 20px; }
.problem-q:hover { transform: rotate(0deg) translateY(-2px); }

.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px; margin-top: 28px; text-align: left;
}
.step {
  background: var(--surface); border: 2px solid var(--ink-900);
  padding: 22px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s, box-shadow 0.15s;
}
.step:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-pop-ink); }
.step h3 { margin-top: 4px; }
.step p { color: var(--ink-500); margin-bottom: 0; font-size: 0.95rem; }
.step-c1 { background: var(--green-100); }
.step-c2 { background: var(--butter); }
.step-c3 { background: var(--sky); }
.step-c4 { background: var(--peach); }

.step-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink-900); color: var(--lime);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 14px;
}

/* ============== PRICING ============== */
.pricing-section {
  background: var(--ink-900);
  color: var(--surface);
  padding: 90px 24px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: 40px;
}
.pricing-section h2 { color: var(--surface); }
.pricing-section .lede { color: var(--ink-300); }
.pricing-section .kicker { background: rgba(255,255,255,0.1); color: var(--lime); }

.plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px; max-width: 800px; margin: 32px auto 0;
}
.plans-stack { grid-template-columns: 1fr; max-width: 440px; }

.plan {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 32px 28px; text-align: left;
  position: relative;
  color: var(--ink-900);
  border: 2px solid var(--ink-900);
  transition: transform 0.2s, box-shadow 0.2s;
}
.plan:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-pop-ink); }
.plan-featured {
  background: var(--lime);
  border: 2px solid var(--ink-900);
  box-shadow: var(--shadow-pop-ink);
  transform: rotate(-0.5deg);
}
.plan-featured:hover { transform: rotate(-0.5deg) translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink-900); }

.plan h3 {
  font-size: 1.3rem; font-weight: 700;
  font-family: var(--font-display);
}
.price {
  font-family: var(--font-display);
  font-size: 2.6rem; font-weight: 800; color: var(--ink-900);
  margin: 8px 0 18px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.price span {
  font-size: 1rem; font-weight: 500; color: var(--ink-500);
  letter-spacing: 0;
}
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; }
.plan ul li { padding: 7px 0; color: var(--ink-700); }
.plan ul li::before { content: "✓ "; color: var(--green-600); font-weight: 700; }
.plan .btn { width: 100%; justify-content: center; }

.badge {
  position: absolute; top: -12px; right: 18px;
  background: var(--coral); color: var(--surface);
  padding: 5px 14px; border-radius: var(--r-pill);
  font-size: 0.78rem; font-weight: 700;
  border: 2px solid var(--ink-900);
  transform: rotate(3deg);
}

/* ============== ADDED ============== */

.section.section-problem {
    max-width: 100%;
}

.section.section-tips {
    max-width: 100%;
}

.section-trophies {
    max-width: 100%;
}

main#tab-settings .card {
    max-width: 100%;
}

.section-levels {
  max-width: 100%;
}

button.btn.btn-primary.is-watered {
    font-size: 12px;
}



/* ============== FOOTER ============== */
.footer {
  max-width: 1080px; margin: 0 auto;
  padding: 50px 24px;
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  background: var(--ink-900);
  color: var(--ink-300);
}
.footer span:first-child {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--surface);
  font-size: 1.1rem;
}

/* ============== APP ============== */
.tab-content {
  max-width: 1100px; margin: 0 auto;
  padding: 32px 28px 100px;
}

.empty-state { text-align: center; padding: 80px 20px; }
.empty-art { font-size: 5rem; margin-bottom: 14px; animation: bob 4s ease-in-out infinite; }

.group { margin-bottom: 44px; }
.group h2 {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  font-size: 1.5rem;
}
.count {
  background: var(--ink-100); color: var(--ink-700);
  padding: 3px 12px; border-radius: var(--r-pill);
  font-size: 0.85rem; font-weight: 700;
  font-family: var(--font-body);
}
.group-due h2 .count { background: var(--coral); color: var(--surface); }

/* "Needs water today" count mirrored onto the Today nav tabs */
.nav-badge {
  display: inline-block;
  background: var(--coral);
  color: var(--surface);
  font-size: 0.72rem;
  font-weight: 800;
  font-family: var(--font-body);
  min-width: 18px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  text-align: center;
  vertical-align: middle;
  margin-left: 5px;
  line-height: 1.5;
}
.bn-badge {
  position: absolute;
  top: 0; right: 6px;
  background: var(--coral);
  color: var(--surface);
  font-size: 0.66rem;
  font-weight: 800;
  font-family: var(--font-body);
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--surface);
}

.plant-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.plant-list { display: grid; gap: 10px; }

/* PLANT CARDS */
.plant-card {
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  padding: 18px; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  overflow: visible;
}
.plant-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-pop-ink);
}
/* Stable per-plant tint — assigned by species/keyword (banana → yellow,
   tomato → red, basil → green …) with a deterministic fallback, so a
   plant keeps the same colour no matter how the list is sorted. */
.plant-card.pc-green  { background: var(--green-100); }
.plant-card.pc-mint   { background: var(--mint); }
.plant-card.pc-yellow { background: var(--butter); }
.plant-card.pc-amber  { background: var(--amber-100); }
.plant-card.pc-red    { background: var(--red-100); }
.plant-card.pc-peach  { background: var(--peach); }
.plant-card.pc-pink   { background: var(--pink); }
.plant-card.pc-blue   { background: var(--sky); }
.plant-card.pc-purple { background: var(--lavender); }
.plant-card.pc-sand   { background: var(--sand); }
.plant-card.pc-brown  { background: var(--clay); }
.plant-card.pc-lime   { background: var(--lime); }

/* New plant card layout — matches the homepage sample card.
   Photo on the left, name + percentile chip in the head row, then three
   stat cells (days alive · waterings · streak), status text, action row. */
.plant-card-head {
  display: flex; align-items: flex-start; gap: 14px;
}
.plant-card-photo {
  width: 64px; height: 64px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  overflow: hidden;
}
.plant-card-meta { flex: 1; min-width: 0; }
.plant-card-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.1rem;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
  /* avoid super-long names breaking layout */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plant-card-sub {
  color: var(--ink-700); font-size: 0.85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plant-card-head .percentile-chip {
  margin-top: 0; flex-shrink: 0; align-self: flex-start;
}

.plant-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 12px 0;
  border-top: 1px dashed rgba(14, 31, 23, 0.18);
  border-bottom: 1px dashed rgba(14, 31, 23, 0.18);
}
.plant-card-stat { display: flex; flex-direction: column; align-items: center; }
.plant-card-stat strong {
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.03em;
  line-height: 1;
}
.plant-card-stat em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-top: 5px;
  text-align: center;
}

.plant-card-status {
  font-size: 0.88rem; color: var(--ink-700); font-weight: 600;
}
.plant-card-status.due { color: var(--amber-700); }
.plant-card-status.overdue { color: var(--red-500); }

/* Legacy classes still used by the row view + caretaker page —
   keep working with the old, simpler styling. */
.plant-head { display: flex; align-items: center; gap: 14px; }
.plant-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
}
.plant-meta { flex: 1; min-width: 0; }
.plant-name {
  font-weight: 700; font-size: 1.1rem; color: var(--ink-900);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.plant-room { color: var(--ink-700); font-size: 0.85rem; font-weight: 500; }
.plant-status { font-size: 0.88rem; color: var(--ink-700); font-weight: 600; }

.plant-actions { display: flex; gap: 8px; }
.plant-actions .btn { flex: 1; justify-content: center; padding: 9px 14px; font-size: 0.9rem; }
.plant-actions .btn-primary { background: var(--ink-900); color: var(--surface); }

/* compact list row */
.plant-row {
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  padding: 14px 18px; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  transition: transform 0.12s, box-shadow 0.12s;
}
.plant-row:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink-900); }
.plant-row .plant-icon { width: 40px; height: 40px; font-size: 1.2rem; }
.plant-row .plant-name { font-size: 1rem; }
.plant-row .plant-status { white-space: nowrap; font-size: 0.85rem; }
.plant-row .plant-thumb { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--ink-900); }

.plant-photo {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover; border-radius: var(--r-sm);
  background: var(--green-100);
  border: 2px solid var(--ink-900);
}

/* ============== TOOLBAR ============== */
.toolbar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.search-input {
  flex: 1; min-width: 200px;
  padding: 12px 18px;
  border: 2px solid var(--ink-900);
  border-radius: var(--r-pill);
  font: inherit; background: var(--surface);
  color: var(--ink-900);
}
.search-input:focus { outline: none; box-shadow: 4px 4px 0 var(--ink-900); }
.sort-select {
  padding: 12px 44px 12px 18px;
  border: 2px solid var(--ink-900); border-radius: var(--r-pill);
  font: inherit; font-weight: 600; font-family: var(--font-body);
  background-color: var(--surface);
  color: var(--ink-900);
  cursor: pointer;
  /* Strip the native OS dropdown chrome and draw our own chunky caret */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230e1f17' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.sort-select:hover { transform: translateY(-1px); }
.sort-select:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--ink-900);
}
.sort-select option {
  background: var(--surface);
  color: var(--ink-900);
  font-weight: 600;
}

.filters {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px;
}
.chip {
  background: var(--surface); border: 2px solid var(--ink-900);
  padding: 7px 16px; border-radius: var(--r-pill);
  cursor: pointer; font-size: 0.88rem; color: var(--ink-900);
  font-weight: 600; font-family: var(--font-body);
  transition: all 0.12s;
}
.chip:hover { background: var(--ink-50); transform: translateY(-1px); }
.chip.active { background: var(--ink-900); color: var(--lime); }
.chip-link {
  margin-left: auto; background: transparent;
  border: 2px dashed var(--ink-300); color: var(--ink-500);
}
.chip-link:hover { color: var(--green-700); border-color: var(--green-500); background: var(--green-50); }

/* ============== CARDS / SETTINGS ============== */
.card {
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-lg); padding: 26px 28px;
  margin-bottom: 20px; max-width: 680px;
}
.card h2 { font-size: 1.4rem; }
.row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--ink-100);
}
.row:last-of-type { border-bottom: none; }
.row-stack { flex-wrap: wrap; gap: 12px; }
.row input[type="time"], .row input[type="text"], .row input[type="date"], .row input[type="password"], .row input[type="email"] {
  border: 2px solid var(--ink-900); border-radius: var(--r-xs); padding: 8px 12px;
  font: inherit;
}
.row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--green-500); }

.plus-tag {
  background: var(--lime); color: var(--ink-900);
  padding: 2px 10px; border-radius: var(--r-pill);
  font-size: 0.72rem; font-style: normal; font-weight: 700;
  margin-left: 6px;
  border: 1.5px solid var(--ink-900);
}
.card .btn { margin-right: 8px; margin-bottom: 8px; }

.plan-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.plan-actions .btn { margin: 0; }

/* Danger zone card */
.card.card-danger { border-color: var(--red-500); }
.card.card-danger h2 { color: var(--red-500); }

/* Legal pages (privacy / terms) — readable prose layout */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}
.legal-page h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 8px;
}
.legal-page h2 {
  margin: 36px 0 14px;
  font-size: 1.3rem;
  border-bottom: 2px solid var(--ink-100);
  padding-bottom: 8px;
}
.legal-page p, .legal-page ul, .legal-page table {
  color: var(--ink-700);
  line-height: 1.65;
  margin-bottom: 14px;
}
.legal-page ul { padding-left: 24px; }
.legal-page ul li { margin-bottom: 6px; }
.legal-page a { color: var(--green-700); text-decoration: underline; }
.legal-page code {
  background: var(--ink-50); border: 1px solid var(--ink-100);
  padding: 1px 6px; border-radius: 6px; font-size: 0.88em;
}
.legal-page em {
  background: var(--butter); padding: 1px 6px; border-radius: 4px;
  font-style: normal; color: var(--ink-900); font-weight: 600;
}
.legal-table {
  width: 100%; border-collapse: collapse; font-size: 0.92rem;
  background: var(--surface);
  border: 2px solid var(--ink-200);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.legal-table th, .legal-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
}
.legal-table th {
  background: var(--ink-50);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-700);
}
.legal-table tr:last-child td { border-bottom: none; }

/* Cookie info banner — bottom-fixed, dismissable */
.cookie-banner {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 240;
  width: calc(100% - 32px);
  max-width: 720px;
  background: var(--ink-900);
  color: var(--ink-100);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-pill);
  padding: 12px 14px 12px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.88rem;
  box-shadow: var(--shadow-pop);
  animation: cookie-banner-in 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.cookie-banner .cookie-text { flex: 1; }
.cookie-banner a { color: var(--lime); font-weight: 600; }
.cookie-banner a:hover { color: var(--green-300); }
.cookie-banner .cookie-dismiss {
  background: var(--lime);
  color: var(--ink-900);
  border-color: var(--lime);
  padding: 8px 16px;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.cookie-banner .cookie-dismiss:hover {
  background: white;
  border-color: white;
}
@keyframes cookie-banner-in {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}
@media (max-width: 720px) {
  .cookie-banner {
    flex-direction: column;
    border-radius: var(--r-md);
    padding: 14px 16px;
    text-align: center;
  }
  .cookie-banner .cookie-dismiss { width: 100%; }
}

/* ============== MODALS ============== */
.modal {
  position: fixed; inset: 0;
  background: rgba(14,31,23,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
  animation: fade 0.18s ease;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--surface); border-radius: var(--r-lg);
  border: 2px solid var(--ink-900);
  width: 100%; max-width: 800px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-pop);
  animation: pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Firefox custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 31, 23, 0.25) transparent;
}

/* WebKit / Chromium custom scrollbar — sits inside the rounded border with
   margin at top/bottom so it never crashes into the rounded corners. */
.modal-card::-webkit-scrollbar {
  width: 12px;
}
.modal-card::-webkit-scrollbar-track {
  background: transparent;
  margin: 16px 4px;                    /* clears the rounded corners */
}
.modal-card::-webkit-scrollbar-thumb {
  background-color: rgba(14, 31, 23, 0.25);
  border-radius: 999px;
  border: 3px solid transparent;       /* the inset gap around the thumb */
  background-clip: padding-box;
  transition: background-color 0.2s;
  min-height: 40px;
}
.modal-card::-webkit-scrollbar-thumb:hover  { background-color: rgba(14, 31, 23, 0.45); }
.modal-card::-webkit-scrollbar-thumb:active { background-color: rgba(14, 31, 23, 0.6); }
.modal-card::-webkit-scrollbar-corner       { background: transparent; }

/* Same polite scrollbar for any other scrollable surface in the app */
.presets-grid,
.autocomplete-list,
.admin-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 31, 23, 0.25) transparent;
}
.presets-grid::-webkit-scrollbar,
.autocomplete-list::-webkit-scrollbar,
.admin-table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.presets-grid::-webkit-scrollbar-track,
.autocomplete-list::-webkit-scrollbar-track,
.admin-table-wrap::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 2px;
}
.presets-grid::-webkit-scrollbar-thumb,
.autocomplete-list::-webkit-scrollbar-thumb,
.admin-table-wrap::-webkit-scrollbar-thumb {
  background-color: rgba(14, 31, 23, 0.25);
  border-radius: 999px;
  border: 2.5px solid transparent;
  background-clip: padding-box;
  min-height: 30px;
}
.presets-grid::-webkit-scrollbar-thumb:hover,
.autocomplete-list::-webkit-scrollbar-thumb:hover,
.admin-table-wrap::-webkit-scrollbar-thumb:hover {
  background-color: rgba(14, 31, 23, 0.45);
}
.modal-card-wide { max-width: 740px; }
@keyframes pop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 2px solid var(--ink-100);
  position: sticky; top: 0; background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.modal-head h2 { margin: 0; font-size: 1.3rem; }
.modal-body { padding: 22px 24px; }
.modal-body label {
  display: block; margin-bottom: 16px;
}
.modal-body label > span {
  display: block; font-weight: 600; font-size: 0.88rem;
  color: var(--ink-700); margin-bottom: 6px;
}
.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="password"],
.modal-body input[type="number"],
.modal-body input[type="date"],
.modal-body input[type="time"],
.modal-body select,
.modal-body textarea {
  width: 100%; padding: 12px 14px;
  border: 2px solid var(--ink-200);
  border-radius: var(--r-sm);
  font: inherit; background: var(--ink-50);
  color: var(--ink-900);
  transition: border-color 0.15s, background 0.15s;
}
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus {
  outline: none; border-color: var(--ink-900); background: var(--surface);
}
.modal-body textarea { resize: vertical; }
.modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding-top: 8px;
}

.plus-feats {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.plus-feats li { color: var(--ink-700); font-size: 0.92rem; }

/* ============== DETAIL ============== */
.detail-section { margin-bottom: 22px; }
.detail-section h3 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-500); margin-bottom: 10px;
  font-family: var(--font-body);
  font-weight: 700;
}
.detail-line {
  display: flex; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--ink-100);
}
.detail-line:last-child { border-bottom: none; }
.history-item {
  display: flex; gap: 10px; padding: 7px 0;
  font-size: 0.92rem; color: var(--ink-700);
}
.history-item::before { content: "💧"; }

/* STREAK */
.streak-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin: 16px 0 22px;
}
.streak-cell {
  background: var(--green-100); border: 2px solid var(--ink-900);
  border-radius: var(--r-md); padding: 16px 12px;
  text-align: center;
}
.streak-cell:nth-child(1) { background: var(--lime); }
.streak-cell:nth-child(2) { background: var(--butter); }
.streak-cell:nth-child(3) { background: var(--sky); }
.streak-num {
  font-family: var(--font-display);
  font-size: 2.2rem; font-weight: 800; color: var(--ink-900);
  line-height: 1; letter-spacing: -0.04em;
}
.streak-label {
  font-size: 0.72rem; color: var(--ink-700);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 8px; font-weight: 700;
}

/* ============== SUMMARY PREVIEW ============== */
.summary-preview { margin-top: 22px; }
.summary-preview h3 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-500); margin-bottom: 12px;
  font-family: var(--font-body); font-weight: 700;
}
.summary-mock {
  background: var(--bg);
  border: 2px solid var(--ink-200);
  border-radius: var(--r-md); padding: 20px;
}
.summary-from { font-size: 0.85rem; color: var(--ink-500); margin-bottom: 10px; }
.summary-from strong { color: var(--ink-900); }
.summary-subject { font-weight: 700; margin-bottom: 14px; color: var(--ink-900); font-family: var(--font-display); }
.summary-body { font-size: 0.92rem; color: var(--ink-700); line-height: 1.6; }
.summary-body ul { padding-left: 20px; margin: 8px 0; }

/* ============== ADV SCHEDULE / MODAL EXTRAS ============== */
.preset-strip {
  background: var(--green-100);
  border: 2px solid var(--ink-900);
  padding: 12px 18px; border-radius: var(--r-md);
  margin-bottom: 16px; text-align: center;
}
.preset-strip .link { color: var(--green-700); }

.adv-details {
  border: 2px solid var(--ink-200); border-radius: var(--r-md);
  padding: 10px 18px; margin-bottom: 16px;
  background: var(--ink-50);
}
.adv-details summary {
  cursor: pointer; font-weight: 600; padding: 8px 0;
  color: var(--ink-700);
}
.adv-details[open] summary { color: var(--green-700); }
.adv-body { padding-top: 12px; }

.weekday-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
}
.wd-chip {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--ink-900); background: var(--surface);
  font-weight: 700; cursor: pointer; color: var(--ink-900);
  font-family: var(--font-display);
}
.wd-chip.active { background: var(--ink-900); color: var(--lime); }

.photo-preview-wrap {
  display: flex; align-items: center; gap: 14px; margin: 8px 0 16px;
}
.photo-preview-wrap img {
  width: 90px; height: 90px; border-radius: var(--r-sm);
  object-fit: cover; border: 2px solid var(--ink-900);
}

input[type="file"] { font: inherit; padding: 8px 0; color: var(--ink-700); }

/* ============== PRESETS GRID ============== */
.presets-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px; margin-top: 16px; max-height: 60vh; overflow-y: auto;
  padding: 4px;
}
.preset-card {
  background: var(--surface); border: 2px solid var(--ink-900);
  border-radius: var(--r-md); padding: 16px 12px;
  text-align: center; cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.preset-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink-900); }
.presets-grid .preset-card:nth-child(5n+1) { background: var(--green-100); }
.presets-grid .preset-card:nth-child(5n+2) { background: var(--butter); }
.presets-grid .preset-card:nth-child(5n+3) { background: var(--peach); }
.presets-grid .preset-card:nth-child(5n+4) { background: var(--sky); }
.presets-grid .preset-card:nth-child(5n+5) { background: var(--lavender); }

.preset-emoji { font-size: 2.2rem; margin-bottom: 8px; }
.preset-name { font-weight: 700; font-size: 0.95rem; color: var(--ink-900); font-family: var(--font-display); }
.preset-meta { color: var(--ink-700); font-size: 0.78rem; margin-top: 4px; font-weight: 500; }

/* ============== ACCOUNT ============== */
.account-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--ink-100);
}
.account-row:last-child { border-bottom: none; }
.account-avatar {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-300), var(--green-600));
  display: flex; align-items: center; justify-content: center;
  color: var(--surface); font-weight: 700; font-size: 1.6rem;
  font-family: var(--font-display);
  border: 2px solid var(--ink-900);
}
.account-head {
  display: flex; gap: 16px; align-items: center; padding: 14px 0;
  border-bottom: 1px solid var(--ink-100); margin-bottom: 10px;
}

/* ============== ONBOARDING ============== */
.onboard-step { padding: 14px 0; }
.onboard-step h3 { font-size: 1.6rem; }
.onboard-art { font-size: 4.5rem; text-align: center; margin: 12px 0 22px; animation: bob 4s ease-in-out infinite; }
.onboard-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin: 22px 0;
}
.onboard-option {
  border: 2px solid var(--ink-900); background: var(--surface);
  padding: 18px 14px; border-radius: var(--r-md);
  cursor: pointer; text-align: center;
  transition: transform 0.12s, box-shadow 0.12s;
}
.onboard-option:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink-900); }
.onboard-option.selected {
  background: var(--lime);
  box-shadow: 4px 4px 0 var(--ink-900);
}
.onboard-emoji { font-size: 2.4rem; margin-bottom: 8px; }
.onboard-progress {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 22px;
}
.onboard-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink-100);
  border: 2px solid var(--ink-900);
}
.onboard-dot.active { background: var(--green-500); width: 32px; border-radius: var(--r-pill); }

/* ============== TOAST ============== */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--ink-900); color: var(--surface);
  padding: 14px 22px; border-radius: var(--r-pill);
  font-size: 0.95rem; font-weight: 500;
  box-shadow: var(--shadow-pop);
  z-index: 200;
  animation: slideUp 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 2px solid var(--ink-900);
}
@keyframes slideUp { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ============== SOIL PROMPT STACK ============== */
/* Card-deck stacking: newest prompt sits in front (full size, fully visible);
   older ones peek out from behind it with progressively smaller scale and
   slight upward offset. The container itself has no height, so children
   layer on top of each other anchored at the bottom — no scrollbar. */
.soil-stack {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  width: calc(100% - 32px);
  max-width: 560px;
  pointer-events: none;
}

.soil-prompt {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: auto;
  transform-origin: 50% 100%;
  transition:
    transform 0.34s cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity   0.25s ease,
    filter    0.25s ease;
}

/* Front (newest) — full size, fully visible */
.soil-prompt:nth-last-child(1) {
  z-index: 5;
  transform: translateY(0) scale(1);
  opacity: 1;
}
/* Behind layers — each tucked further back, only a sliver of top showing */
.soil-prompt:nth-last-child(2) {
  z-index: 4;
  transform: translateY(-12px) scale(0.96);
  opacity: 0.95;
  filter: brightness(0.97);
}
.soil-prompt:nth-last-child(3) {
  z-index: 3;
  transform: translateY(-22px) scale(0.92);
  opacity: 0.85;
  filter: brightness(0.93);
}
.soil-prompt:nth-last-child(4) {
  z-index: 2;
  transform: translateY(-30px) scale(0.88);
  opacity: 0.7;
  filter: brightness(0.9);
}
.soil-prompt:nth-last-child(n+5) {
  z-index: 1;
  transform: translateY(-36px) scale(0.85);
  opacity: 0.55;
  filter: brightness(0.88);
}

/* Entry: a new prompt slides up from below into the front position */
.soil-prompt.is-entering {
  transform: translateY(50px) scale(0.9) !important;
  opacity: 0 !important;
}
/* Exit: answered/dismissed prompts slide down and fade out */
.soil-prompt.is-leaving {
  transform: translateY(50px) scale(0.9) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.soil-card {
  background: var(--lime);
  border: 2px solid var(--ink-900);
  box-shadow: var(--shadow-pop-ink);
  border-radius: var(--r-md);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.soil-text { display: flex; flex-direction: column; flex: 1; min-width: 140px; }
.soil-text strong { color: var(--ink-900); font-family: var(--font-display); font-size: 1.05rem; }
.soil-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.soil-actions .btn { padding: 7px 14px; font-size: 0.85rem; background: var(--surface); }

/* Subtle "click me to bring forward" cue when not the front prompt */
.soil-prompt:not(:nth-last-child(1)) { cursor: pointer; }
.soil-prompt:not(:nth-last-child(1)):hover {
  filter: brightness(1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .soil-prompt { transition: opacity 0.15s !important; }
  .soil-prompt.is-entering, .soil-prompt.is-leaving {
    transform: none !important;
  }
}

/* ============== TROPHY-EARNED TOAST STACK (bottom-center, card-deck) ============== */
/* Anchored at the bottom like the soil prompts — newest in front (full size),
   older ones peek out from behind with progressively smaller scale. */
.trophy-toast-stack {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 220;
  width: calc(100% - 32px);
  max-width: 460px;
  pointer-events: none;
}
.trophy-toast {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  padding: 14px 18px 14px 16px;
  box-shadow: var(--shadow-pop-ink);
  transform-origin: 50% 100%;
  transition:
    transform 0.34s cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity   0.25s ease,
    filter    0.25s ease;
}
.trophy-toast.tier-diamond { background: linear-gradient(135deg, #B9F2FF 0%, #6FE3FF 100%); }
.trophy-toast.tier-gold    { background: linear-gradient(135deg, #FFEE9C 0%, #FFB347 100%); }
.trophy-toast.tier-silver  { background: linear-gradient(135deg, #F0F2F5 0%, #C8CCD2 100%); }
.trophy-toast.tier-bronze  { background: linear-gradient(135deg, #FFD1A1 0%, #E8A268 100%); }

/* Card-deck stacking — newest is :nth-last-child(1) and fully visible */
.trophy-toast:nth-last-child(1) {
  z-index: 5; transform: translateY(0) scale(1); opacity: 1;
}
.trophy-toast:nth-last-child(2) {
  z-index: 4; transform: translateY(-12px) scale(0.96); opacity: 0.95; filter: brightness(0.97);
}
.trophy-toast:nth-last-child(3) {
  z-index: 3; transform: translateY(-22px) scale(0.92); opacity: 0.85; filter: brightness(0.93);
}
.trophy-toast:nth-last-child(n+4) {
  z-index: 2; transform: translateY(-30px) scale(0.88); opacity: 0.65; filter: brightness(0.9);
}

/* Entry: a fresh trophy slides up from below into the front slot */
.trophy-toast.is-entering {
  transform: translateY(50px) scale(0.9) !important;
  opacity: 0 !important;
}
/* Exit: dismissed/viewed trophies slide down and fade out */
.trophy-toast.is-leaving {
  transform: translateY(50px) scale(0.9) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Visual cue that older toasts in the stack are clickable to bring forward */
.trophy-toast:not(:nth-last-child(1)) { cursor: pointer; }

.trophy-toast-emoji {
  font-size: 2.8rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 4px;
  filter: drop-shadow(0 3px 6px rgba(14,31,23,0.18));
  animation: trophy-toast-emoji-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes trophy-toast-emoji-pop {
  0%   { transform: scale(0.3) rotate(-20deg); }
  60%  { transform: scale(1.2) rotate(8deg); }
  100% { transform: scale(1)   rotate(0); }
}

.trophy-toast-body { flex: 1; min-width: 0; }
.trophy-toast-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-900);
  opacity: 0.85;
  margin-bottom: 2px;
}
.trophy-toast-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.trophy-toast-sub {
  font-size: 0.84rem;
  color: var(--ink-700);
  line-height: 1.4;
}
.trophy-toast-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.trophy-toast-actions .btn {
  padding: 7px 14px;
  font-size: 0.85rem;
  background: var(--surface);
}
.trophy-toast-actions .btn-primary {
  background: var(--ink-900);
  color: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  .trophy-toast { transition: opacity 0.15s !important; }
  .trophy-toast.is-entering, .trophy-toast.is-leaving { transform: none !important; }
  .trophy-toast-emoji { animation: none !important; }
}

@media (max-width: 720px) {
  .trophy-toast-stack { top: 16px; }
  .trophy-toast { padding: 12px 14px; gap: 12px; }
  .trophy-toast-emoji { font-size: 2.4rem; }
  .trophy-toast-title { font-size: 1.05rem; }
}

/* ============== VACATION + STRIPE BANNERS ============== */
.vacation-banner {
  background: linear-gradient(135deg, var(--butter), var(--peach));
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  padding: 16px 22px;
  margin-bottom: 28px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  box-shadow: var(--shadow-pop-ink);
}
.vacation-banner strong { color: var(--ink-900); }

.share-result {
  margin-top: 14px;
  padding: 16px;
  background: var(--green-100);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
}
.share-url-row {
  display: flex; gap: 8px; margin: 10px 0;
}
.share-url-row input {
  flex: 1; padding: 10px 12px;
  border: 2px solid var(--ink-900);
  border-radius: var(--r-xs);
  font: 13px monospace; background: var(--surface);
}

.stripe-banner {
  background: var(--bg);
  border: 2px solid var(--ink-200);
  padding: 12px 16px; border-radius: var(--r-sm);
  font-size: 0.9rem; color: var(--ink-500);
  margin-bottom: 16px;
}
.stripe-banner.live {
  background: var(--green-50); border-color: var(--green-500); color: var(--green-700);
}
.stripe-banner strong { color: var(--ink-900); }

.sync-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green-500);
  margin-left: 6px; display: inline-block;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 var(--green-500);
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.6; }
}

/* ============== AUTH ============== */
.auth-tabs {
  display: flex; gap: 4px; padding: 5px;
  background: var(--ink-50); border-radius: var(--r-pill);
  margin-bottom: 18px;
}
.auth-tab {
  flex: 1; background: none; border: none; cursor: pointer;
  padding: 10px; border-radius: var(--r-pill);
  font-weight: 600; color: var(--ink-500);
  font-size: 0.95rem; font-family: var(--font-body);
}
.auth-tab.active {
  background: var(--surface); color: var(--ink-900);
  box-shadow: var(--shadow-soft);
}
.auth-error {
  background: var(--red-100); color: var(--red-500);
  padding: 12px 16px; border-radius: var(--r-sm);
  font-size: 0.9rem; margin: 0 0 10px;
  border: 2px solid var(--red-500);
}
.auth-success {
  background: var(--green-100); color: var(--green-700);
  padding: 14px 16px; border-radius: var(--r-sm);
  font-size: 0.92rem; margin: 0 0 10px;
  line-height: 1.5;
  border: 2px solid var(--green-500);
}
.auth-success a {
  color: var(--green-700); text-decoration: underline;
  word-break: break-all; font-size: 0.85rem;
}

#googleSigninButton {
  display: flex; justify-content: center;
  min-height: 40px;
}
.auth-or {
  position: relative;
  text-align: center;
  margin: 18px 0 14px;
  color: var(--ink-500);
  font-size: 0.85rem;
}
.auth-or::before, .auth-or::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 22px);
  height: 1px;
  background: var(--ink-100);
}
.auth-or::before { left: 0; }
.auth-or::after  { right: 0; }
.auth-or span {
  background: var(--surface);
  padding: 0 8px;
  position: relative;
}

/* ============== BOTTOM NAV ============== */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 2px solid var(--ink-900);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: center;
  z-index: 50;
  box-shadow: 0 -4px 20px rgba(14,31,23,0.08);
}
.bn-tab, .bn-add {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--ink-500); padding: 6px 10px; font-size: 0.7rem;
  font-family: var(--font-body); font-weight: 600;
}
.bn-tab { position: relative; }
.bn-tab span { font-size: 1.5rem; }
.bn-tab em { font-style: normal; font-weight: 600; }
.bn-tab.active { color: var(--green-700); }

.bn-add {
  background: var(--ink-900); color: var(--lime);
  width: 56px; height: 56px; border-radius: 50%;
  font-size: 1.7rem; box-shadow: 4px 4px 0 var(--green-700);
  margin-top: -20px;
  font-weight: 700;
  border: 2px solid var(--ink-900);
}
.bn-add:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--green-700); }
.bn-add:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--green-700); }

/* ============== CARETAKER ============== */
.caretaker-body { background: var(--bg); }
.caretaker-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 28px;
  background: var(--surface);
  border-bottom: 2px solid var(--ink-900);
}
.caretaker-main { max-width: 740px; margin: 0 auto; padding: 32px 22px 60px; }
.caretaker-intro h1 { font-size: 2rem; margin-bottom: 8px; }
.caretaker-progress {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px; margin-bottom: 28px;
}
.caretaker-bar {
  flex: 1; height: 12px; background: var(--ink-100);
  border-radius: var(--r-pill); overflow: hidden;
  border: 2px solid var(--ink-900);
}
.caretaker-bar > div {
  height: 100%; background: var(--green-500);
  transition: width 0.3s ease;
}
.caretaker-list { display: grid; gap: 14px; }
.caretaker-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  padding: 18px;
}
.caretaker-card.watered {
  background: var(--lime);
}
.caretaker-card.watered .plant-name { text-decoration: line-through; color: var(--ink-500); }
.caretaker-photo {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ink-900);
}
.caretaker-meta { min-width: 0; }
.caretaker-status {
  font-size: 0.92rem; color: var(--green-700); font-weight: 600;
  margin-top: 4px;
}
.caretaker-notes { margin-top: 6px; }

/* ============================================================
   ACHIEVEMENTS TAB
   ============================================================ */
.achievements-header { margin-bottom: 22px; }
.achievements-header h2 { font-size: 1.9rem; margin-bottom: 6px; }

.stats-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.stats-cell {
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  padding: 18px 16px;
  text-align: center;
}
.stats-cell:nth-child(1) { background: var(--lime); }
.stats-cell:nth-child(2) { background: var(--peach); }
.stats-cell:nth-child(3) { background: var(--sky); }
.stats-num {
  font-family: var(--font-display);
  font-size: 2.2rem; font-weight: 800;
  color: var(--ink-900);
  line-height: 1;
  letter-spacing: -0.04em;
}
.stats-label {
  margin-top: 8px; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; color: var(--ink-700);
}
.stats-rank { margin-top: 6px; font-size: 0.82rem; color: var(--ink-700); font-weight: 600; }

.achievements-section-title {
  margin: 28px 0 14px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  font-family: var(--font-body);
  font-weight: 700;
}
.achievements-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 28px 0 14px;
}
.achievements-section-head .achievements-section-title { margin: 0; }
.trophies-sort {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.trophies-sort .chip { padding: 6px 14px; font-size: 0.85rem; }

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.achievement-badge {
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  padding: 32px 22px 22px;
  text-align: center;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
.achievement-badge::before {
  content: "";
  position: absolute;
  top: -40%; left: -40%;
  width: 80%; height: 80%;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(20px);
}
.achievement-badge:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-pop-ink);
}
.achievement-emoji {
  font-size: 4rem;
  margin-bottom: 12px;
  filter: drop-shadow(0 3px 6px rgba(14,31,23,0.15));
  position: relative;
}
.achievement-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: 8px;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  position: relative;
}
.achievement-subtitle {
  color: var(--ink-700);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 14px;
  position: relative;
}

/* Tier tints */
.achievement-badge.tier-diamond {
  background: linear-gradient(135deg, #B9F2FF 0%, #6FE3FF 100%);
}
.achievement-badge.tier-gold {
  background: linear-gradient(135deg, var(--butter) 0%, #FFB347 100%);
}
.achievement-badge.tier-silver {
  background: linear-gradient(135deg, #F0F2F5 0%, #C8CCD2 100%);
}
.achievement-badge.tier-bronze {
  background: linear-gradient(135deg, #FFD1A1 0%, #E8A268 100%);
}

/* Locked / next-up */
.achievement-badge.is-locked {
  background: var(--ink-50);
  border-color: var(--ink-200);
}
.achievement-badge.is-locked .achievement-emoji { filter: grayscale(1) opacity(0.5); }
.achievement-badge.is-locked .achievement-title { color: var(--ink-500); }
.achievement-badge.is-locked::before { display: none; }
.achievement-badge.is-locked .trophy-rarity {
  background: var(--ink-100);
  color: var(--ink-500);
}
.achievement-nextup {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-100);
  color: var(--ink-500);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  z-index: 2;
}

.achievements-grid--locked .achievement-badge { box-shadow: none; }

.achievements-empty {
  text-align: center;
  padding: 40px 20px;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-lg);
}
.achievements-empty .empty-art { font-size: 4rem; margin-bottom: 12px; animation: bob 4s ease-in-out infinite; }
.achievements-empty h3 { font-size: 1.4rem; margin-bottom: 8px; }
.achievements-empty .btn { margin-top: 16px; }

/* ============== TROPHY DETAIL MODAL ============== */
.trophy-modal-card {
  max-width: 480px;
  overflow: hidden;
}
.trophy-modal {
  text-align: center;
  margin: -22px -24px;          /* bleed to card edges */
  padding: 0 24px 28px;
  position: relative;
}

/* Hero — radial glow with the trophy emoji floating big and centered */
.trophy-hero {
  position: relative;
  padding: 38px 24px 22px;
  margin: 0 -24px 18px;
  overflow: hidden;
}
.trophy-modal.tier-diamond .trophy-hero { background: linear-gradient(135deg, #B9F2FF 0%, #6FE3FF 100%); }
.trophy-modal.tier-gold    .trophy-hero { background: linear-gradient(135deg, #FFEE9C 0%, #FFB347 100%); }
.trophy-modal.tier-silver  .trophy-hero { background: linear-gradient(135deg, #F0F2F5 0%, #C8CCD2 100%); }
.trophy-modal.tier-bronze  .trophy-hero { background: linear-gradient(135deg, #FFD1A1 0%, #E8A268 100%); }

/* Animated rays radiating from behind the emoji */
.trophy-rays {
  position: absolute;
  inset: 0;
  background:
    conic-gradient(
      from 0deg,
      rgba(255,255,255,0.0)   0deg,
      rgba(255,255,255,0.35) 30deg,
      rgba(255,255,255,0.0)  60deg,
      rgba(255,255,255,0.0)  90deg,
      rgba(255,255,255,0.35) 120deg,
      rgba(255,255,255,0.0)  150deg,
      rgba(255,255,255,0.0)  180deg,
      rgba(255,255,255,0.35) 210deg,
      rgba(255,255,255,0.0)  240deg,
      rgba(255,255,255,0.0)  270deg,
      rgba(255,255,255,0.35) 300deg,
      rgba(255,255,255,0.0)  330deg,
      rgba(255,255,255,0.0)  360deg
    );
  animation: trophy-rays-spin 18s linear infinite;
  opacity: 0.5;
  pointer-events: none;
}
@keyframes trophy-rays-spin {
  to { transform: rotate(360deg); }
}

.trophy-emoji {
  position: relative;
  font-size: 6rem;
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(14,31,23,0.25));
  animation: trophy-emoji-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes trophy-emoji-pop {
  0%   { transform: scale(0.2) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(8deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0);        opacity: 1; }
}

.trophy-rarity-pill {
  position: relative;
  display: inline-block;
  margin-top: 14px;
  background: rgba(14, 31, 23, 0.85);
  color: var(--lime);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.trophy-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
.trophy-subtitle {
  color: var(--ink-700);
  font-size: 0.98rem;
  margin: 0 0 14px;
  line-height: 1.4;
}
.trophy-flavor {
  position: relative;
  font-family: var(--font-script);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-900);
  text-align: center;
  /* Default tint — overridden per tier below to match the hero gradient */
  background: var(--butter);
  border: 2.5px solid var(--ink-900);
  border-radius: var(--r-md);
  box-shadow: 4px 4px 0 var(--ink-900);
  padding: 22px 26px 20px;
  margin: 20px 4px 24px;
  transform: rotate(-0.6deg);
  letter-spacing: -0.005em;
}

/* Tier-matched flavor backgrounds — same gradient as each tier's hero band */
.trophy-modal.tier-diamond .trophy-flavor { background: linear-gradient(135deg, #B9F2FF 0%, #6FE3FF 100%); }
.trophy-modal.tier-gold    .trophy-flavor { background: linear-gradient(135deg, #FFEE9C 0%, #FFB347 100%); }
.trophy-modal.tier-silver  .trophy-flavor { background: linear-gradient(135deg, #F0F2F5 0%, #C8CCD2 100%); }
.trophy-modal.tier-bronze  .trophy-flavor { background: linear-gradient(135deg, #FFD1A1 0%, #E8A268 100%); }
/* "Sparkle medallion" in the top-right corner */
.trophy-flavor::after {
  content: "✨";
  position: absolute;
  top: -16px;
  right: -14px;
  background: var(--lime);
  border: 2.5px solid var(--ink-900);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 2px 2px 0 var(--ink-900);
  transform: rotate(12deg);
  pointer-events: none;
}
/* On mobile the modal is narrower — let the flavor breathe */
@media (max-width: 720px) {
  .trophy-flavor { font-size: 1.5rem; padding: 18px 18px 16px; }
}

/* Three stat cells: Rarity / Earned / Tier */
.trophy-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 4px 0 16px;
  text-align: center;
}
.trophy-stat {
  background: var(--ink-50);
  border: 1.5px solid var(--ink-100);
  border-radius: var(--r-sm);
  padding: 12px 8px;
}
.trophy-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  font-weight: 700;
  margin-bottom: 4px;
}
.trophy-stat-value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.03em;
  line-height: 1;
}
.trophy-stat-sub {
  font-size: 0.72rem;
  color: var(--ink-500);
  margin-top: 4px;
}

.trophy-rarity-line, .trophy-extra, .trophy-earned {
  margin: 8px 16px;
  font-size: 0.92rem;
  color: var(--ink-700);
  line-height: 1.5;
}
.trophy-rarity-line strong { color: var(--ink-900); }
.trophy-extra {
  background: var(--lime);
  border: 1.5px solid var(--ink-900);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  color: var(--ink-900);
  font-weight: 500;
  margin: 14px 0;
}
.trophy-earned {
  color: var(--ink-500);
  font-size: 0.85rem;
  margin-top: 14px;
  text-align: center;
}

/* "Share to Instagram Story" CTA inside the trophy popup */
.trophy-share-row {
  margin: 22px 0 14px;
  text-align: center;
}
.trophy-share-btn {
  width: 100%;
  justify-content: center;
  font-size: 1.05rem;
  padding: 14px 18px;
  background: linear-gradient(135deg, #FF9046 0%, #D33874 50%, #7E4FFF 100%);
  color: white;
  border-color: var(--ink-900);
  box-shadow: 4px 4px 0 var(--ink-900);
  font-weight: 700;
}
.trophy-share-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink-900);
  background: linear-gradient(135deg, #FF9046 0%, #D33874 50%, #7E4FFF 100%);
  color: white;
}
.trophy-share-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink-900); }
.trophy-share-btn:disabled {
  opacity: 0.6; cursor: progress;
  transform: none; box-shadow: 4px 4px 0 var(--ink-900);
}
.trophy-share-hint {
  margin: 10px 8px 0;
  text-align: center;
  font-style: italic;
}

/* Make achievement cards feel clickable */
.achievement-badge[data-action="open-trophy"] {
  cursor: pointer;
}

@media (max-width: 720px) {
  .trophy-emoji { font-size: 5rem; }
  .trophy-title { font-size: 1.4rem; }
  .trophy-stats { grid-template-columns: 1fr; }
  .trophy-stat { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; gap: 12px; text-align: left; }
  .trophy-stat-label { margin-bottom: 0; }
  .trophy-stat-value { font-size: 1.1rem; }
  .trophy-stat-sub { margin-top: 0; flex-shrink: 0; }


  button.link[data-action="show-pricing"] {
    display: none;
}

button.btn.cookie-dismiss {
    align-items: center;
    justify-content: center;
}

}

/* ============== PERCENTILE CHIP (in plant detail) ============== */
.percentile-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  margin-top: 8px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  border: 1.5px solid var(--ink-900);
  background: var(--surface);
  color: var(--ink-900);
  white-space: nowrap;
  line-height: 1.3;
}
.percentile-chip.tier-diamond { background: linear-gradient(135deg, #B9F2FF, #6FE3FF); }
.percentile-chip.tier-gold    { background: var(--butter); }
.percentile-chip.tier-silver  { background: #E8EDF2; }
.percentile-chip.tier-bronze  { background: var(--peach); }
.percentile-chip.tier-normal  { background: var(--ink-100); color: var(--ink-700); border-color: var(--ink-300); }

@media (max-width: 720px) {
  .stats-summary { grid-template-columns: 1fr; }
  .achievements-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   SUPER-ADMIN TAB
   ============================================================ */
.admin-header { margin-bottom: 22px; }
.admin-header h2 { font-size: 1.9rem; margin-bottom: 6px; }
.admin-header code {
  background: var(--ink-50); border: 1px solid var(--ink-100);
  padding: 1px 6px; border-radius: 6px; font-size: 0.85em;
}

.admin-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}
.admin-cell {
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  padding: 18px 16px;
  text-align: center;
}
.admin-cell:nth-child(4n+1) { background: var(--lime); }
.admin-cell:nth-child(4n+2) { background: var(--butter); }
.admin-cell:nth-child(4n+3) { background: var(--peach); }
.admin-cell:nth-child(4n+4) { background: var(--sky); }
.admin-cell-num {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.04em; line-height: 1;
}
.admin-cell-label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-700); font-weight: 700; margin-top: 8px;
}
.admin-cell-sub { font-size: 0.78rem; color: var(--ink-700); margin-top: 6px; opacity: 0.85; }

.admin-section { margin-bottom: 36px; }
.admin-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.admin-section-head h3 { font-size: 1.3rem; margin: 0; font-family: var(--font-display); }
.admin-search { max-width: 320px; padding: 8px 14px; font-size: 0.9rem; }

.admin-table-wrap {
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.admin-table th, .admin-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
}
.admin-table th {
  background: var(--ink-50);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink-700);
  white-space: nowrap;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--ink-50); }
.admin-table .admin-num { text-align: right; font-variant-numeric: tabular-nums; }

.admin-user-email {
  font-weight: 600; color: var(--ink-900);
  display: flex; align-items: center; gap: 8px;
}
.admin-user-sub { font-size: 0.78rem; color: var(--ink-500); margin-top: 2px; }
.admin-flag {
  background: var(--lime); color: var(--ink-900);
  padding: 1px 8px; border-radius: var(--r-pill);
  font-size: 0.68rem; font-weight: 700;
  border: 1.5px solid var(--ink-900);
}
.admin-stripe {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem; color: var(--ink-500);
}

.admin-plan-badge {
  display: inline-block;
  background: var(--ink-100); color: var(--ink-700);
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
}
.admin-plan-badge.plus {
  background: linear-gradient(135deg, var(--butter), var(--lime));
  color: var(--ink-900);
  border: 1.5px solid var(--ink-900);
}

.admin-plan-select {
  padding: 6px 12px;
  border: 2px solid var(--ink-900);
  border-radius: var(--r-pill);
  font: inherit;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.85rem;
}

/* Sales-event chips */
.admin-evt {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--ink-100);
  color: var(--ink-700);
}
.admin-evt.evt-subscription-started { background: var(--green-100); color: var(--green-700); }
.admin-evt.evt-subscription-renewed { background: var(--green-100); color: var(--green-700); }
.admin-evt.evt-subscription-updated { background: var(--sky);       color: #0F5A8C; }
.admin-evt.evt-subscription-canceled{ background: var(--red-100);   color: var(--red-500); }
.admin-evt.evt-manual-upgrade       { background: var(--lime);      color: var(--ink-900); }
.admin-evt.evt-manual-downgrade     { background: var(--peach);     color: var(--ink-900); }

@media (max-width: 720px) {
  .admin-table { font-size: 0.82rem; }
  .admin-table th, .admin-table td { padding: 10px; }
  .admin-cell-num { font-size: 1.6rem; }
}

/* ============== CARE GUIDE (in detail modal) ============== */
.care-section {
  margin: 8px 0 22px;
  padding: 20px;
  background: var(--green-50);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.care-section h3 {
  font-size: 1.1rem;
  margin: 0 0 14px;
  font-family: var(--font-display);
  color: var(--ink-900);
  letter-spacing: -0.02em;
  text-transform: none;
}
.care-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.care-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-100);
}
.care-icon {
  font-size: 1.4rem; flex-shrink: 0;
  line-height: 1.2;
}
.care-text-wrap { flex: 1; min-width: 0; }
.care-label {
  font-weight: 700; font-size: 0.78rem;
  color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.care-text {
  color: var(--ink-900); font-size: 0.92rem;
  line-height: 1.45;
}
.care-tips-title {
  margin: 18px 0 10px;
  font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--green-700);
  font-family: var(--font-body);
  font-weight: 700;
}
.care-tips {
  list-style: none; padding: 0; margin: 0;
}
.care-tips li {
  padding: 8px 12px;
  background: var(--lime);
  border: 1.5px solid var(--ink-900);
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  font-size: 0.9rem; color: var(--ink-900);
  line-height: 1.45;
}
.care-source {
  margin: 14px 0 0;
  text-align: center;
}
.care-empty {
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-sm);
  padding: 16px;
}
.care-empty p { margin-bottom: 8px; }
.care-empty p:last-child { margin-bottom: 0; }

/* ============== LANDING — TROPHIES SECTION ============== */
.section-trophies {
  background:
    radial-gradient(800px 400px at 50% 30%, rgba(185, 242, 255, 0.5), transparent),
    linear-gradient(180deg, transparent 0%, #EBF7EE 50%, transparent 100%);
  padding-top: 90px;
  padding-bottom: 90px;
}
.section-trophies h2 .highlight {
  background: linear-gradient(#FFE57C, #FFE57C);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: left center;
}

.trophies-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 880px;
  margin: 40px auto 0;
}
.trophy-showcase {
  padding: 32px 22px 22px;
  position: relative;
}
.trophy-showcase .achievement-emoji {
  font-size: 4rem;
  margin-bottom: 12px;
}
.trophy-showcase .achievement-title {
  font-size: 1.35rem;
  margin-bottom: 8px;
}
.trophy-showcase .achievement-subtitle {
  font-size: 0.9rem;
  margin-bottom: 14px;
}
.trophy-showcase--center {
  transform: scale(1.04);
  z-index: 2;
}
.trophy-showcase:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-pop-ink); }
.trophy-showcase--center:hover { transform: scale(1.04) translate(-3px, -3px); }

.trophy-rarity {
  display: inline-block;
  background: rgba(14, 31, 23, 0.85);
  color: var(--lime);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

/* Sample plant card showcase */
.sample-plant {
  max-width: 580px;
  margin: 50px auto 0;
}
.sample-plant > .muted { text-align: center; }

.sample-card {
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: stretch;
  box-shadow: var(--shadow-pop-ink);
  transform: rotate(-0.4deg);
  text-align: left;
}
.sample-card-photo {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--green-100);
  border: 2px solid var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
}
.sample-card-body { flex: 1; min-width: 0; }
.sample-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.sample-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.sample-card-meta { color: var(--ink-500); font-size: 0.85rem; margin-top: 2px; }

.sample-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--ink-100);
}
.sample-stat {
  display: flex; flex-direction: column; align-items: center;
}
.sample-stat strong {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 800;
  color: var(--ink-900);
  letter-spacing: -0.04em;
  line-height: 1;
}
.sample-stat em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 4px;
}

/* Species leaderboard mock (landing) */
.lb-mock {
  max-width: 580px;
  margin: 0 auto;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop-ink);
  transform: rotate(0.4deg);
  overflow: hidden;
}
.lb-mock-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}
.lb-mock-head .lb-standing { margin-left: auto; }
.lb-mock-rows {
  padding: 4px 18px 14px;
  border-top: 1.5px dashed rgba(14, 31, 23, 0.18);
}

@media (max-width: 720px) {
  .trophies-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .trophy-showcase--center { transform: scale(1); }
  .trophy-showcase--center:hover { transform: translate(-3px, -3px); }
  .sample-card { transform: none; flex-direction: column; }
  .sample-card-photo { width: 100%; height: 120px; }
  .lb-mock { transform: none; }
}

/* ============== LANDING — LEVELS & QUESTS SECTION ============== */
.section-levels {
  background:
    radial-gradient(760px 380px at 50% 25%, rgba(223, 250, 83, 0.22), transparent),
    linear-gradient(180deg, transparent 0%, #FFF6DA 50%, transparent 100%);
  padding-top: 90px;
  padding-bottom: 90px;
}
.section-levels h2 .highlight {
  background: linear-gradient(var(--lime), var(--lime));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: left center;
}
.levels-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 780px;
  margin: 44px auto 0;
  text-align: left;
  align-items: start;
}
.levels-mock { margin: 0 !important; }
@media (max-width: 720px) {
  .levels-showcase { grid-template-columns: 1fr; gap: 16px; }
}

/* ============== LANDING — TIPS SECTION ============== */
.section-tips {
  background: linear-gradient(180deg, transparent, #FFE9B8 30%, transparent 80%);
}
.tips-preview-card {
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-lg);
  padding: 28px;
  max-width: 580px;
  margin: 36px auto 0;
  text-align: left;
  box-shadow: var(--shadow-pop-ink);
  transform: rotate(-0.4deg);
}
.tips-preview-head {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 18px;
  border-bottom: 2px dashed var(--ink-100);
  margin-bottom: 18px;
}
.tips-preview-emoji {
  font-size: 3rem;
  background: var(--green-100);
  border: 2px solid var(--ink-900);
  border-radius: 50%;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tips-preview-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.tips-preview-meta {
  color: var(--ink-500);
  font-size: 0.9rem;
  margin-top: 2px;
}
.tips-preview-grid {
  display: grid; gap: 8px; margin-bottom: 16px;
}
.tips-preview-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 12px;
  background: var(--ink-50);
  border-radius: var(--r-sm);
  font-size: 0.92rem; color: var(--ink-700);
}
.tips-preview-row span { font-size: 1.1rem; flex-shrink: 0; }
.tips-preview-row strong { color: var(--ink-900); margin-right: 2px; }
.tips-preview-tip {
  padding: 12px 14px;
  background: var(--lime);
  border: 1.5px solid var(--ink-900);
  border-radius: var(--r-sm);
  font-size: 0.9rem; color: var(--ink-900);
  line-height: 1.5;
}
.tips-preview-tip em {
  font-family: var(--font-script);
  font-size: 1.15em;
  font-style: normal;
  font-weight: 700;
  color: var(--ink-900);
}

.categories-strip {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  max-width: 720px; margin: 14px auto 0;
}
.cat-pill {
  background: var(--surface);
  border: 2px solid var(--ink-900);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-900);
  box-shadow: 2px 2px 0 var(--ink-900);
  transition: transform 0.12s, box-shadow 0.12s;
}
.cat-pill:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink-900);
}
.cat-pill:nth-child(odd)  { background: var(--green-100); }
.cat-pill:nth-child(3n)   { background: var(--butter); }
.cat-pill:nth-child(4n)   { background: var(--peach); }
.cat-pill:nth-child(5n)   { background: var(--sky); }

/* ============== TIP OF THE DAY (Today tab, between Due and Coming soon) ============== */
.tip-of-day {
  background: var(--butter);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  padding: 22px 26px 20px;
  margin: 0 auto 36px;
  max-width: 100%;
  box-shadow: 4px 4px 0 var(--ink-900);
  transform: rotate(-0.4deg);
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tip-of-day:hover {
  transform: rotate(-0.4deg) translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--ink-900);
}
.tip-of-day:active {
  transform: rotate(-0.4deg) translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink-900);
}
.tip-of-day-head { margin-bottom: 10px; }
.tip-of-day-kicker {
  display: inline-block;
  background: var(--ink-900);
  color: var(--lime);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tip-of-day-text {
  font-family: var(--font-script);
  font-size: 1.55rem;
  line-height: 1.3;
  color: var(--ink-900);
  margin: 6px 0 14px;
  font-weight: 700;
}
.tip-of-day-attribution {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-top: 12px;
  border-top: 1.5px dashed rgba(14, 31, 23, 0.2);
  color: var(--ink-700);
  font-size: 0.92rem;
}
.tip-of-day-attribution strong { color: var(--ink-900); }
.tip-of-day-emoji {
  font-size: 1.4rem;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .tip-of-day { padding: 18px 18px 16px; transform: none; }
  .tip-of-day:hover { transform: translate(-3px, -3px); }
  .tip-of-day-text { font-size: 1.4rem; }
}

/* ============== GARDENER LEVEL ============== */
/* Compact card on the Today tab */
.gardener-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--lime);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop-ink);
  padding: 16px 20px;
  margin-bottom: 22px;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.gardener-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink-900); }
.gardener-card:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink-900); }
.gardener-emoji {
  font-size: 2rem;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: 50%;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gardener-main { flex: 1; min-width: 0; }
.gardener-toprow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.gardener-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.gardener-level {
  font-weight: 700;
  font-size: 0.82rem;
  background: var(--ink-900);
  color: var(--lime);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.gardener-bar {
  height: 12px;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.gardener-bar-fill {
  height: 100%;
  background: var(--green-500);
  border-radius: var(--r-pill);
  transition: width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
  min-width: 4px;
}
.gardener-meta {
  margin-top: 7px;
  font-size: 0.85rem;
  color: var(--ink-700);
}
.gardener-meta strong { color: var(--ink-900); }

/* Larger hero on the Trophies tab */
.gardener-hero {
  background: linear-gradient(135deg, var(--butter), var(--lime));
  border: 2px solid var(--ink-900);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop-ink);
  padding: 24px 26px;
  margin-bottom: 24px;
}
.gardener-hero-top {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.gardener-hero-emoji {
  font-size: 2.6rem;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: 50%;
  width: 68px; height: 68px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 3px 3px 0 var(--ink-900);
}
.gardener-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.gardener-hero-level {
  font-weight: 600;
  color: var(--ink-700);
  font-size: 0.95rem;
  margin-top: 2px;
}
.gardener-bar--lg { height: 16px; }
.gardener-hero-meta {
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--ink-900);
}
.gardener-hero-meta strong { font-weight: 800; }
.xp-breakdown {
  margin-top: 16px;
  border-top: 1.5px dashed rgba(14, 31, 23, 0.25);
  padding-top: 12px;
}
.xp-breakdown summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-900);
  font-size: 0.9rem;
  list-style: none;
}
.xp-breakdown summary::-webkit-details-marker { display: none; }
.xp-breakdown summary::before { content: "▸ "; }
.xp-breakdown[open] summary::before { content: "▾ "; }
/* Open AND close are animated in JS (height + opacity) for a smooth,
   symmetric expand/collapse. See the delegated handler in app.js. */
.xp-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.xp-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(14, 31, 23, 0.15);
}
.xp-row:last-child { border-bottom: none; }
.xp-row-label { flex: 1; color: var(--ink-900); font-weight: 600; font-size: 0.92rem; }
.xp-row-detail { flex-shrink: 0; }
.xp-row-xp {
  flex-shrink: 0;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--green-700);
  min-width: 56px;
  text-align: right;
}

@media (max-width: 720px) {
  .gardener-card { padding: 14px 16px; gap: 12px; }
  .gardener-emoji { width: 48px; height: 48px; font-size: 1.7rem; }
  .gardener-hero { padding: 20px 18px; }
  .gardener-hero-title { font-size: 1.35rem; }
}

/* ============== WEEKLY QUESTS ============== */
.quests-card {
  background: var(--sky);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop-ink);
  padding: 20px 22px;
  margin-bottom: 22px;
}
.quests-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* Collapsible summary (Plus card uses <details>/<summary>) */
.quests-card > summary.quests-head {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.quests-card > summary.quests-head::-webkit-details-marker { display: none; }
.quests-headright {
  display: flex;
  align-items: center;
  gap: 8px;
}
.quests-caret {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink-900);
  transition: transform 0.18s ease;
}
.quests-card[open] .quests-caret { transform: rotate(180deg); }
.quests-locked .quests-head { margin-bottom: 14px; }
/* Spacing lives on the list so a collapsed card is just the header */
.quests-card .quests-list { padding-top: 14px; }
.quests-kicker {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.quests-progress {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-700);
}
.quests-lock {
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink-900);
  color: var(--lime);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.quests-locktext {
  margin: 0 0 16px;
  color: var(--ink-700);
  font-size: 0.92rem;
}
.quests-list { display: flex; flex-direction: column; gap: 10px; }
.quest-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.quest-row.is-done {
  background: var(--green-100);
  border-color: var(--green-500);
}
.quest-emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 30px;
  text-align: center;
}
.quest-info { flex: 1; min-width: 0; }
.quest-title {
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--ink-900);
  font-size: 0.98rem;
}
.quest-desc {
  font-size: 0.84rem;
  color: var(--ink-700);
  margin-bottom: 7px;
}
.quest-bar {
  height: 8px;
  background: rgba(14, 31, 23, 0.1);
  border: 1.5px solid var(--ink-900);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.quest-bar-fill {
  height: 100%;
  background: var(--green-500);
  border-radius: var(--r-pill);
  transition: width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
  min-width: 3px;
}
.quest-row.is-done .quest-bar-fill { background: var(--green-700); }
.quest-meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.quest-prog {
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--ink-900);
  font-size: 0.95rem;
}
.quest-xp {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--green-700);
  background: var(--green-50);
  border: 1.5px solid var(--green-500);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.quest-row.is-done .quest-xp {
  background: var(--green-500);
  color: var(--surface);
  border-color: var(--green-500);
}

@media (max-width: 720px) {
  .quests-card { padding: 16px 16px; }
  .quest-row { gap: 10px; padding: 10px 12px; }
  .quest-emoji { font-size: 1.3rem; width: 24px; }
}

/* ============== SPECIES LEADERBOARDS ============== */
.lb-title { margin-top: 36px; }
.lb-intro { margin: -8px 0 16px; }
.lb-list { display: flex; flex-direction: column; gap: 12px; }
.lb-card {
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-md);
  box-shadow: 4px 4px 0 var(--ink-900);
  overflow: hidden;
}
.lb-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.lb-summary::-webkit-details-marker { display: none; }
.lb-emoji {
  font-size: 1.4rem;
  background: var(--green-100);
  border: 2px solid var(--ink-900);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lb-species {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.lb-standing {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--ink-900);
  color: var(--surface);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.lb-standing.is-first { background: var(--lime); color: var(--ink-900); }
.lb-summary::after {
  content: "▾";
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--ink-500);
  transition: transform 0.18s ease;
}
.lb-card[open] .lb-summary::after { transform: rotate(180deg); }
.lb-rows {
  padding: 4px 18px 14px;
  border-top: 1.5px dashed rgba(14, 31, 23, 0.18);
}
.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px dashed rgba(14, 31, 23, 0.12);
}
.lb-row:last-child { border-bottom: none; }
.lb-rank {
  flex-shrink: 0;
  width: 34px;
  text-align: center;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--ink-700);
  font-size: 0.95rem;
}
.lb-name {
  flex: 1;
  color: var(--ink-900);
  font-weight: 600;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-val {
  flex-shrink: 0;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--green-700);
}
.lb-val em { font-style: normal; font-weight: 600; color: var(--ink-500); font-size: 0.82em; margin-left: 1px; }
.lb-row--you {
  background: var(--lime);
  margin: 2px -10px;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  border-bottom: none;
}
.lb-row--you .lb-rank,
.lb-row--you .lb-name,
.lb-row--you .lb-val { color: var(--ink-900); }
.lb-row--you .lb-name::after {
  content: " (you)";
  font-weight: 700;
  color: var(--ink-700);
  font-size: 0.82em;
}
.lb-gap {
  text-align: center;
  color: var(--ink-300);
  font-weight: 800;
  letter-spacing: 2px;
  padding: 2px 0;
}

@media (max-width: 720px) {
  .lb-summary { padding: 12px 14px; gap: 10px; }
  .lb-rows { padding: 4px 14px 12px; }
  .lb-species { font-size: 0.98rem; }
  .lb-standing { font-size: 0.74rem; padding: 4px 10px; }
}

/* ============== PLANT MOOD / HEALTH ============== */
:root {
  --mood-good: #1AAA56;
  --mood-ok:   #E0A129;
  --mood-low:  #EE7B2E;
  --mood-bad:  #E0483D;
  --mood-rest: #9AA7A0;
}
/* Per-mood accent — used for the face glow and the vitality bar fill */
.mood-thriving, .mood-happy { --mood-c: var(--mood-good); }
.mood-ok                    { --mood-c: var(--mood-ok); }
.mood-thirsty               { --mood-c: var(--mood-low); }
.mood-wilting, .mood-critical { --mood-c: var(--mood-bad); }
.mood-dormant               { --mood-c: var(--mood-rest); }

/* Compact mood strip on plant cards */
.plant-mood {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.pm-face { font-size: 1.15rem; line-height: 1; }
.pm-label {
  font-weight: 700;
  color: var(--ink-900);
  flex-shrink: 0;
}
.pm-bar {
  flex: 1;
  height: 8px;
  background: rgba(14, 31, 23, 0.1);
  border: 1.5px solid var(--ink-900);
  border-radius: var(--r-pill);
  overflow: hidden;
  min-width: 40px;
}
.pm-bar-fill {
  height: 100%;
  background: var(--mood-c, var(--mood-good));
  border-radius: var(--r-pill);
  transition: width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
  min-width: 3px;
}
.mood-critical .pm-face,
.mood-wilting  .pm-face { animation: pm-shiver 0.5s ease-in-out infinite; }
.mood-thriving .pm-face { animation: pm-bob 2.6s ease-in-out infinite; }
@keyframes pm-shiver {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-9deg); }
  75% { transform: rotate(9deg); }
}
@keyframes pm-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Prominent mood banner in the plant detail modal */
.mood-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-left: 8px solid var(--mood-c, var(--mood-good));
  border-radius: var(--r-md);
  box-shadow: 4px 4px 0 var(--ink-900);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.mood-face {
  font-size: 2.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.mood-banner.mood-critical .mood-face,
.mood-banner.mood-wilting  .mood-face { animation: pm-shiver 0.5s ease-in-out infinite; }
.mood-banner.mood-thriving .mood-face { animation: pm-bob 2.6s ease-in-out infinite; }
.mood-info { flex: 1; min-width: 0; }
.mood-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.mood-headline span {
  color: var(--mood-c, var(--mood-good));
  text-transform: capitalize;
}
.mood-banner .pm-bar { margin: 9px 0 7px; height: 10px; }
.mood-blurb {
  font-size: 0.88rem;
  color: var(--ink-700);
}

/* ============== AUTOCOMPLETE ============== */
.autocomplete { position: relative; display: block; }
.autocomplete-list {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-sm);
  max-height: 290px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 4px 4px 0 var(--ink-900);
}
.autocomplete-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--ink-100);
  transition: background 0.1s;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover,
.autocomplete-item.active { background: var(--green-100); }
.autocomplete-emoji { font-size: 1.6rem; flex-shrink: 0; }
.autocomplete-text { flex: 1; min-width: 0; }
.autocomplete-name {
  font-weight: 700; color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}
.autocomplete-meta {
  color: var(--ink-500); font-size: 0.78rem;
  margin-top: 2px;
}
.autocomplete-pill {
  background: var(--lime); color: var(--ink-900);
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 0.7rem; font-weight: 700;
  border: 1.5px solid var(--ink-900);
  flex-shrink: 0;
}

/* ============== CELEBRATION BURST ============== */
.celebrate-burst {
  position: fixed;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 250;
}
.celebrate-emoji {
  position: absolute;
  top: 0; left: 0;
  font-size: 2rem;
  display: inline-block;
  transform-origin: center;
  animation: celebrate-pop 1.6s cubic-bezier(0.25, 0.6, 0.4, 1) forwards;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
@keyframes celebrate-pop {
  0%   { transform: translate(0, 0) rotate(0) scale(0.3); opacity: 0; }
  15%  { transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)) rotate(calc(var(--rot) * 0.2)) scale(1.3); opacity: 1; }
  60%  { transform: translate(var(--tx), calc(var(--ty) - 10px)) rotate(var(--rot)) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), calc(var(--ty) + 120px)) rotate(calc(var(--rot) * 1.4)) scale(0.8); opacity: 0; }
}

/* ============== WATERING CELEBRATION ============== */
.water-burst {
  position: fixed;
  pointer-events: none;
  z-index: 240;
  width: 0; height: 0;
}
.water-drop {
  position: absolute;
  top: 0; left: 0;
  font-size: 1.5rem;
  transform-origin: center;
  animation: water-shoot 1.25s cubic-bezier(0.22, 0.6, 0.36, 1) forwards;
  animation-delay: var(--delay, 0s);
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(14,31,23,0.2));
}
@keyframes water-shoot {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: translate(calc(-50% + var(--tx, 0px) * 0.35), calc(-50% + var(--ty, 0px) * 0.35)) scale(1.15);
  }
  55% {
    opacity: 1;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(1) rotate(var(--rot, 0deg));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px) + 90px)) scale(0.8) rotate(calc(var(--rot, 0deg) * 1.4));
  }
}

.water-floater {
  position: fixed;
  pointer-events: none;
  z-index: 241;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--green-700);
  background: var(--lime);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 2px solid var(--ink-900);
  box-shadow: 3px 3px 0 var(--ink-900);
  animation: water-float-up 1s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  letter-spacing: -0.01em;
}
@keyframes water-float-up {
  0% {
    transform: translate(-50%, -50%) scale(0.4) rotate(-6deg);
    opacity: 0;
  }
  25% {
    transform: translate(-50%, calc(-50% - 12px)) scale(1.05) rotate(-3deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, calc(-50% - 80px)) scale(0.95) rotate(0);
    opacity: 0;
  }
}

/* Card briefly pulses with a lime ring + the plant photo wiggles "happily" */
.plant-card.watered-pulse {
  animation: card-watered-pulse 0.8s cubic-bezier(0.22, 0.6, 0.36, 1);
}
.plant-card.watered-pulse .plant-card-photo {
  animation: plant-photo-wiggle 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes card-watered-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(223, 250, 83, 0); transform: scale(1); }
  30%  { box-shadow: 0 0 0 10px rgba(223, 250, 83, 0.65); transform: scale(1.025); }
  60%  { box-shadow: 0 0 0 18px rgba(223, 250, 83, 0); transform: scale(1.01); }
  100% { box-shadow: 0 0 0 0   rgba(223, 250, 83, 0); transform: scale(1); }
}
@keyframes plant-photo-wiggle {
  0%, 100% { transform: rotate(0)     scale(1); }
  20%      { transform: rotate(-12deg) scale(1.15); }
  45%      { transform: rotate(10deg)  scale(1.18); }
  70%      { transform: rotate(-5deg)  scale(1.08); }
  85%      { transform: rotate(3deg)   scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .water-burst, .water-floater { display: none !important; }
  .plant-card.watered-pulse, .plant-card.watered-pulse .plant-card-photo {
    animation: none !important;
  }
}

/* ============== NEW PLANT CARD POP-IN ============== */
@keyframes plant-card-pop-in {
  0%   { transform: scale(0.4) rotate(-10deg); opacity: 0; }
  55%  { transform: scale(1.07) rotate(2deg);  opacity: 1; }
  80%  { transform: scale(0.97) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.plant-card.pop-in {
  animation: plant-card-pop-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  z-index: 5;
}
.plant-card.pop-in::before {
  content: "✨ Just added";
  position: absolute;
  top: -10px; left: 14px;
  background: var(--lime);
  color: var(--ink-900);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  border: 2px solid var(--ink-900);
  box-shadow: 2px 2px 0 var(--ink-900);
  animation: just-added-fade 3.5s ease forwards;
}
@keyframes just-added-fade {
  0%, 70%  { opacity: 1; transform: rotate(-3deg); }
  100%     { opacity: 0; transform: rotate(-3deg) translateY(-6px); }
}

/* ============== RESPONSIVE ============== */
@media (max-width: 720px) {
  .landing-nav, .app-nav { padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
  .app-nav .tabs { display: none; }
  .tab-content { padding: 22px 16px 110px; }
  .hero { padding: 60px 22px 50px; }
  .section { padding: 50px 22px; }
  .pricing-section { padding: 60px 22px; }
  .plus-feats { grid-template-columns: 1fr; }
  .nav-actions .btn-primary { padding: 10px 14px; font-size: 0.92rem; }
  .bottom-nav { display: flex; }
  .hide-sm { display: none; }
  .show-sm { display: inline; }
  .caretaker-card { grid-template-columns: auto 1fr; }
  .caretaker-card button { grid-column: 1 / -1; width: 100%; }
  .doodle, .doodle-emoji { display: none; }
  .problem-list li:nth-child(even) .problem-q { margin-left: 0; }
  .plan-featured { transform: none; }
  .plan-featured:hover { transform: translate(-3px, -3px); }
}