*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ══════════════════════════════════════════════════════════════════════
   ELITE DARK — "forest glass"
   Retuned from the GrowIQ Elite Dark App design. Every variable name is
   unchanged, so all existing markup keeps working; only the values move.
   That is deliberate: the whole app lifts at the token layer rather than
   screen by screen. Ramps below are the design's, exposed under short
   names so new markup can reach any step without inventing colours.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --forest:#0B1410;--forest-mid:#152619;--forest-light:#1d3324;
  --glass:rgba(245,240,232,0.05);--glass-border:rgba(243,240,223,0.13);--surface:rgba(58,92,66,0.5);
  --clay:#E05A36;--clay-light:#e8785a;
  --net:#3f9d8c;--net-light:#6fc4b2;
  --ivory:#F3F0DF;--ivory-dim:rgba(243,240,223,0.6);--ivory-faint:rgba(243,240,223,0.28);
  --sage:#7aab6e;--sage-light:#9dc491;
  --warn:#e8b84b;--danger:#d95b5b;--success:#5bc47a;
  --water:#4a8fb5;--water-light:#8fc0d6;
  --radius:12px;

  /* Terracotta — urgency, primary CTAs, active nav */
  --a-100:rgba(224,90,54,0.12);--a-200:rgba(224,90,54,0.2);--a-300:rgba(224,90,54,0.36);
  --a-400:#c94f2c;--a-500:#E05A36;--a-600:#E05A36;
  --a-700:#e8785a;--a-800:#f2a58c;--a-900:#f8cabb;
  /* Sage — positive, healthy, success */
  --s-100:rgba(122,171,110,0.12);--s-200:rgba(122,171,110,0.2);--s-300:rgba(122,171,110,0.34);
  --s-400:#6e9c62;--s-500:#7aab6e;--s-600:#8fbb81;
  --s-700:#9dc491;--s-800:#c2dcb6;--s-900:#e0eeda;
  /* Neutrals on ivory */
  --n-100:rgba(245,240,232,0.05);--n-200:rgba(245,240,232,0.09);--n-300:rgba(245,240,232,0.16);
  --n-400:rgba(245,240,232,0.3);--n-500:rgba(245,240,232,0.45);--n-600:rgba(245,240,232,0.6);
  --n-700:rgba(245,240,232,0.75);--n-800:rgba(245,240,232,0.88);--n-900:#f5f0e8;

  /* Surfaces — layered glass, not flat tint */
  --card-bg:linear-gradient(160deg,rgba(72,110,80,.42),rgba(26,44,31,.55));
  --card-border:rgba(243,240,223,.14);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 28px rgba(0,0,0,.3);
  --card-shadow-hover:inset 0 1px 0 rgba(255,255,255,.12),0 16px 36px rgba(0,0,0,.38);
  --panel-bg:linear-gradient(180deg,rgba(38,62,44,.6),rgba(12,22,16,.6));
  --panel-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.45);
  --input-bg:rgba(0,0,0,.25);
  --input-border:rgba(243,240,223,.18);

  /* Radius scale. Cards sit at the handoff's 16–18; panels a touch larger so
     a card inside one still reads as nested; wells tighter than both. */
  --r-card:18px;
  --r-panel:22px;
  --r-well:12px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px rgba(0,0,0,.38);
  --shadow-lg:0 16px 44px rgba(0,0,0,.5);
}
/* Elite pilot tokens — global so any future screen can opt in without
   redefining them, but nothing outside .elite-pilot/#page-detail
   references these names, so this is purely additive. */
:root{
  --e-bg-base:#0B1410;
  --e-glass:rgba(38,62,44,0.55);
  --e-border:rgba(243,240,223,0.14);
  --e-border-active:rgba(224,90,54,0.3);
  --e-accent:#E05A36;
  --e-accent-dark:#c44826;
  --e-accent-glow:rgba(224,90,54,0.35);
  --e-text-muted:rgba(243,240,223,0.6);
  --e-success:#2ECC71;
  --e-glow-morning:rgba(46,204,113,0.10);
  --e-glow-evening:rgba(224,90,54,0.14);
  /* Data-driven "breathing" states — stronger than the ambient
     time-of-day tints because they mean something actionable. */
  --e-glow-optimal:rgba(46,204,113,0.16);
  --e-glow-warning:rgba(224,90,54,0.20);
  --e-spring:cubic-bezier(0.16,1,0.3,1);
  /* Three faces, three jobs: Playfair for the wordmark and card titles,
     Merriweather for numerals, DM Sans for everything you interact with. */
  --e-font-display:'Playfair Display',serif;
  --e-font-serif:'Merriweather',serif;
  --e-font-sans:'DM Sans',sans-serif;
}
html{height:100%}
body{background:var(--forest);color:var(--ivory);font-family:var(--e-font-sans);min-height:100%;max-width:100vw;overflow-x:hidden;
  background-image:linear-gradient(175deg,#152619 0%,#101f16 34%,#0d1a12 100%);
  background-attachment:fixed;
  padding-bottom:env(safe-area-inset-bottom)}
/* Ambient light — its own layer so the opacity can breathe without touching
   the content sitting on top. Sage from the top, a wash of gold at the side,
   warm terracotta from below; 9s cycle, a whisper rather than a glow. */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 85% 42% at 15% -4%,rgba(122,171,110,.13),transparent 62%),
    radial-gradient(ellipse 70% 38% at 100% 30%,rgba(232,184,75,.045),transparent 58%),
    radial-gradient(ellipse 75% 40% at 60% 104%,rgba(224,90,54,.08),transparent 60%);
  animation:gkbreathe 9s ease-in-out infinite}
@keyframes gkbreathe{0%,100%{opacity:.75}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){body::before{animation:none;opacity:.88}}
.nav-tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:rgba(9,17,12,0.94);border-top:1px solid rgba(243,240,223,0.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:200;padding:10px 6px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.fab{position:fixed;bottom:calc(106px + env(safe-area-inset-bottom));right:16px;z-index:190;height:46px;padding:0 18px;border-radius:23px;background:linear-gradient(135deg,var(--e-accent,#E05A36),var(--e-accent-dark,#c44826));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 4px 16px var(--e-accent-glow,rgba(224,90,54,0.35)),0 2px 6px rgba(0,0,0,0.35);transition:transform 0.3s var(--e-spring,ease),box-shadow 0.3s var(--e-spring,ease);color:#fff;font-family:var(--e-font-sans);font-size:0.84rem;font-weight:700;white-space:nowrap}
.fab:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--e-accent-glow,rgba(224,90,54,0.5)),0 2px 8px rgba(0,0,0,0.4)}
.fab:active{transform:scale(0.96)}
.fab svg{width:20px;height:20px;stroke:#fff;stroke-width:2.8;fill:none;stroke-linecap:round;flex-shrink:0}
.fab-label{display:none}
.nav-tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 1px;cursor:pointer;font-size:0.5625rem;font-weight:600;letter-spacing:0.02em;color:var(--n-500);transition:color 0.3s var(--e-spring,ease);border:none;background:none;overflow-wrap:break-word;word-break:break-word;text-align:center;line-height:1.25;font-family:var(--e-font-sans)}
.nav-tab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round}
.nav-tab.active{color:var(--a-700)}
.nav-tab.active svg{stroke:var(--a-700)}
/* Translucent blurred glass with a 1px light seam, not a hard border. */
header{padding:16px 18px 12px;background:color-mix(in srgb,var(--forest) 78%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);position:sticky;top:0;z-index:100;border-bottom:none;box-shadow:0 1px 0 rgba(243,240,223,0.06);display:flex;align-items:center;gap:10px;max-width:100vw;overflow:hidden}
.header-logo{display:flex;align-items:center;gap:8px;flex:1;min-width:0;overflow:hidden}
  .header-logo h1{white-space:nowrap;flex-shrink:0}
/* The wordmark: Playfair, "Grow" in ink, "IQ" in terracotta, with the
   faintest terracotta halo so it reads as a lockup rather than page copy. */
header h1{font-family:var(--e-font-display);font-size:1.5rem;font-weight:700;color:var(--a-500);letter-spacing:-0.01em;text-shadow:0 0 14px rgba(224,90,54,0.16)}
header h1 span{color:var(--ivory);margin-right:-0.05em}
.header-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}

  /* The header wants ~529px — wordmark + Admin + name + 7 icon buttons. That
     overflows EVERY phone: 139px on an iPhone 14, 185px on a Fold cover.
     It only showed up on the Fold because it is the narrowest thing going.
     Shrink the furniture before anything is allowed off the screen. */
  @media (max-width:430px){
    header{padding:12px 12px 9px;gap:6px}
    header h1{font-size:1.25rem}
    .header-actions{gap:4px}
    .btn-icon{width:30px;height:30px;font-size:0.8rem;border-radius:7px}
    #header-email{display:none!important}     /* your own name — you know it */
  }
  @media (max-width:365px){
    .btn-icon{width:27px;height:27px;font-size:0.74rem}
    .header-actions{gap:3px}
    #plan-badge{display:none!important}       /* the Admin badge goes too */
    header{padding:10px 9px 8px}
    header h1{font-size:1.12rem}
  }
.btn-icon{background:var(--n-200);border:1px solid var(--glass-border);border-radius:50%;width:33px;height:33px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ivory-dim);transition:color 0.2s,background 0.2s;font-size:0.88rem;flex-shrink:0}
.btn-icon:hover{background:rgba(122,171,110,0.12);color:var(--sage-light)}
.offline-badge{font-size:0.63rem;background:rgba(232,184,75,0.18);border:1px solid rgba(232,184,75,0.4);color:var(--warn);border-radius:20px;padding:2px 7px;display:none}
.offline-badge.show{display:block}
.weather-bar{display:none;flex-direction:column;gap:4px;padding:8px 15px;background:rgba(0,0,0,0.25);border-bottom:1px solid var(--glass-border);font-size:0.77rem;overflow:hidden;cursor:pointer}
.weather-bar:hover{background:rgba(0,0,0,0.35)}
.page{display:none;padding:6px 18px 96px;min-height:calc(100vh - 108px)}
.page.active{display:block;animation:gkpagein 0.34s var(--e-spring)}
@keyframes gkpagein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.page.active{animation:none}}
/* Cards are layered glass: a top-lit gradient with an inset highlight and a
   soft drop shadow, so they read as physical panes on the forest ground
   rather than flat tinted boxes. They lift 2px on hover, spring-eased. */
.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-card);padding:15px 16px;margin-bottom:13px;box-shadow:var(--card-shadow);transition:transform 0.28s var(--e-spring),border-color 0.28s ease,box-shadow 0.28s ease}
.card:hover{transform:translateY(-2px);border-color:rgba(243,240,223,0.24);box-shadow:var(--card-shadow-hover)}
.card-title{font-family:var(--e-font-display);font-size:0.94rem;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:7px;color:var(--ivory)}
.card-title::after{content:'';flex:1;height:1px;background:var(--glass-border)}
/* Editorial label: small, wide-tracked, quiet — the design's section kicker. */
.gk-kicker{font-size:10.5px;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--n-500);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.form-group{margin-bottom:10px}
.form-label{font-size:0.66rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ivory-dim);display:block;margin-bottom:5px}
.form-input,.form-select,.form-textarea{width:100%;background:var(--input-bg);border:1px solid var(--input-border);border-radius:12px;padding:10px 14px;color:var(--ivory);font-family:var(--e-font-sans);font-size:0.84rem;outline:none;transition:border-color 0.2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--sage)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--ivory-faint)}
.form-select option{background:var(--forest-mid)}
.form-textarea{resize:vertical;min-height:76px;line-height:1.5}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* Controls go pill. Primary gets an inner highlight and a restrained glow —
   punchy without shouting; letter-spacing does the rest of the work. */
.btn{border:1px solid transparent;border-radius:999px;padding:9px 16px;font-family:var(--e-font-sans);font-size:0.875rem;font-weight:600;cursor:pointer;transition:transform 0.3s var(--e-spring),background 0.18s,border-color 0.18s,filter 0.18s;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.2}
.btn:active{transform:scale(0.96)}
.btn-primary{background:linear-gradient(135deg,#F0693F,#d14e28);color:#fff;letter-spacing:0.015em;box-shadow:0 4px 14px rgba(224,90,54,0.28),inset 0 1px 0 rgba(255,255,255,0.18)}
.btn-primary:hover{background:linear-gradient(135deg,#F0693F,#d14e28);filter:brightness(1.08)}
.btn-primary:disabled{background:var(--n-200);color:var(--ivory-dim);cursor:not-allowed;box-shadow:none}
.btn-secondary{background:var(--n-200);border-color:rgba(243,240,223,0.15);color:var(--ivory)}
.btn-secondary:hover{background:rgba(245,240,232,0.12);border-color:rgba(243,240,223,0.24)}
.btn-ghost{background:none;border-color:transparent;color:var(--a-700);padding-inline:5px}
.btn-ghost:hover{background:var(--a-100)}
.btn-danger{background:rgba(217,91,91,0.15);border:1px solid rgba(217,91,91,0.3);color:var(--danger)}
.btn-danger:hover{background:rgba(217,91,91,0.25)}
.btn-water{background:var(--s-200);border:1px solid var(--s-300);color:var(--sage-light)}
.btn-water:hover{background:rgba(122,171,110,0.3)}
.btn-full{width:100%}
.plant-grid{display:flex;flex-direction:column;gap:10px}
.plant-item{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-card);cursor:pointer;box-shadow:var(--card-shadow);transition:transform 0.28s var(--e-spring),border-color 0.28s ease,box-shadow 0.28s ease;display:flex;flex-direction:column;overflow:hidden;position:relative}
.plant-item:hover,.plant-item.selected{transform:translateY(-2px);border-color:rgba(243,240,223,0.24);box-shadow:var(--card-shadow-hover)}
.plant-photo-hero{position:relative;width:100%;height:140px;background:var(--forest-light);overflow:hidden;flex-shrink:0}
.plant-photo-hero img{width:100%;height:100%;object-fit:cover;display:block}
.plant-photo-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.8rem;background:radial-gradient(circle at 30% 20%,rgba(122,171,110,0.22),rgba(122,171,110,0.04))}
.plant-photo-scrim{position:absolute;left:0;right:0;bottom:0;height:64%;background:linear-gradient(to top,rgba(8,14,8,0.88),rgba(8,14,8,0.0));pointer-events:none}
.plant-health-badge{position:absolute;top:10px;right:10px;background:rgba(10,16,10,0.55);backdrop-filter:blur(4px);border-radius:20px;padding:4px 10px 4px 8px;font-size:0.72rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:4px;z-index:2}
.plant-water-flag{position:absolute;top:10px;left:10px;background:rgba(232,184,75,0.92);color:#241a06;border-radius:20px;padding:4px 10px;font-size:0.66rem;font-weight:700;z-index:2}
.plant-hero-name{position:absolute;left:13px;right:52px;bottom:9px;font-family:'Playfair Display',serif;font-size:1.08rem;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.55);line-height:1.2;z-index:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plant-card-body{padding:9px 12px 11px;display:flex;align-items:flex-start;gap:8px}
.plant-photo{width:48px;height:48px;border-radius:9px;flex-shrink:0;background:var(--forest-light);display:flex;align-items:center;justify-content:center;font-size:1.45rem;overflow:hidden}
.plant-photo img{width:100%;height:100%;object-fit:cover;border-radius:9px}
.plant-info{flex:1;min-width:0}
.plant-item-row{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-card);padding:11px;cursor:pointer;box-shadow:var(--card-shadow);transition:transform 0.28s var(--e-spring),border-color 0.28s ease,box-shadow 0.28s ease;display:flex;align-items:center;gap:9px}
.plant-item-row:hover{transform:translateY(-2px);border-color:rgba(243,240,223,0.24);box-shadow:var(--card-shadow-hover)}
.plant-name{font-weight:600;font-size:0.89rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plant-sub{font-size:0.71rem;color:var(--ivory-dim);margin-top:2px}
.plant-badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:0.625rem;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.badge-water{background:var(--s-100);color:var(--s-800);border:1px solid var(--s-300)}
.badge-warn{background:var(--a-100);color:var(--a-800);border:1px solid var(--a-300)}
.badge-stage{background:var(--n-200);color:var(--n-700);border:1px solid transparent}
.plant-health-bar{width:100%;height:3px;background:var(--glass-border);border-radius:2px;margin-top:6px;overflow:hidden}
.plant-health-fill{height:100%;border-radius:2px;transition:width 0.5s}
.quick-water-btn{background:rgba(91,196,122,0.15);border:1px solid rgba(91,196,122,0.3);border-radius:8px;width:33px;height:33px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.95rem;flex-shrink:0;transition:background 0.2s}
.quick-water-btn:hover{background:rgba(91,196,122,0.3)}
.search-bar{position:relative;margin-bottom:10px}
.search-bar input{width:100%;background:var(--input-bg);border:1px solid var(--input-border);border-radius:999px;padding:9px 14px 9px 34px;color:var(--ivory);font-family:var(--e-font-sans);font-size:0.84rem;outline:none;transition:border-color 0.2s}
.search-bar input:focus{border-color:var(--sage)}
.search-bar input::placeholder{color:var(--ivory-faint)}
/* Fix Android/Chrome autofill black text override */
/* Fix autofill text colour on Android/Chrome */
.form-input,.form-select,.form-textarea,#chat-page-input,#pid-name-input{color:var(--ivory)}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ivory-faint);font-size:0.88rem;pointer-events:none}
.filter-chips{display:flex;gap:5px;flex-wrap:wrap;padding-bottom:3px;margin-bottom:10px}
.filter-chip{background:var(--n-200);border:1px solid transparent;border-radius:999px;padding:4px 11px;font-size:0.71rem;font-weight:600;color:var(--n-700);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all 0.3s var(--e-spring,ease);font-family:var(--e-font-sans)}
.filter-chip.active{background:var(--s-100);border-color:var(--s-300);color:var(--s-800)}
.health-row{display:flex;align-items:center;gap:11px}
.health-label{font-size:0.79rem;color:var(--ivory-dim);width:88px;flex-shrink:0}
input[type=range]{flex:1;accent-color:var(--sage);cursor:pointer}
.health-val{font-size:0.84rem;font-weight:600;width:37px;text-align:right}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:9px}
.info-cell{background:var(--n-100);border:1px solid transparent;border-radius:var(--r-well);padding:10px}
.info-cell-label{font-size:0.62rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--n-500);margin-bottom:3px}
.info-cell-value{font-size:0.86rem;color:var(--ivory);line-height:1.4}
.info-cell-value.accent{font-family:var(--e-font-serif);font-size:1rem;font-weight:700;color:var(--sage-light)}
.ai-content{font-size:0.82rem;line-height:1.7;color:var(--ivory)}
.ai-content p{margin-bottom:6px}
.ai-content p:last-child{margin-bottom:0}
.ai-content ul{padding-left:15px;margin-bottom:6px}
.ai-content li{margin-bottom:3px}
.ai-content strong{color:var(--sage-light);font-weight:600}
.tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
/* nowrap matters: .tag is a flex box, and without it multi-word labels
   ("Blood, fish & bone") wrap straight out through the pill's border. */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;letter-spacing:0.02em;padding:3px 10px;border-radius:999px;white-space:nowrap;font-weight:500}
.tag-accent{background:var(--a-100);color:var(--a-800)}
.tag-accent-2{background:var(--s-100);color:var(--s-800)}
.tag-neutral{background:var(--n-200);color:var(--n-700)}
.tag-outline{background:transparent;border:1px solid rgba(243,240,223,0.2);color:var(--n-700)}
.tag-gold{background:rgba(232,184,75,0.14);border:1px solid rgba(232,184,75,0.4);color:var(--warn)}
.tag-green{background:var(--s-100);color:var(--sage-light);border:1px solid var(--s-300)}
.tag-clay{background:var(--a-100);color:var(--clay-light);border:1px solid var(--a-300)}
.timeline{position:relative;padding-left:21px}
.timeline::before{content:'';position:absolute;left:5px;top:5px;bottom:5px;width:2px;background:var(--glass-border);border-radius:2px}
.timeline-item{position:relative;margin-bottom:13px}
.timeline-dot{position:absolute;left:-18px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--forest-light);border:2px solid var(--glass-border)}
.timeline-dot.active{background:var(--sage);border-color:var(--sage-light)}
.timeline-dot.done{background:var(--success);border-color:var(--success)}
.timeline-label{font-size:0.79rem;font-weight:600;color:var(--ivory)}
.timeline-sub{font-size:0.7rem;color:var(--ivory-dim);margin-top:2px}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:13px}
.cal-day{background:var(--glass);border:1px solid var(--glass-border);border-radius:6px;padding:6px 2px;text-align:center}
.cal-day-name{font-size:0.57rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ivory-dim);margin-bottom:2px}
.cal-day-num{font-size:0.79rem;font-weight:600;color:var(--ivory);margin-bottom:4px}
.cal-day.today{border-color:var(--sage);background:rgba(122,171,110,0.08)}
.cal-day.today .cal-day-num{color:var(--sage-light)}
.cal-plant-dot{font-size:0.6rem;background:rgba(91,196,122,0.15);border-radius:3px;padding:1px 2px;color:var(--success);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:1px}
.cal-plant-dot.overdue{background:rgba(232,184,75,0.15);color:var(--warn)}
.harvest-table{width:100%;border-collapse:collapse}
.harvest-table th{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ivory-dim);padding:5px 6px;text-align:left;border-bottom:1px solid var(--glass-border)}
.harvest-table td{font-size:0.8rem;padding:6px;border-bottom:1px solid rgba(255,255,255,0.04)}
.harvest-table tr:last-child td{border-bottom:none}
.harvest-total{font-size:0.8rem;color:var(--sage-light);font-weight:600;padding:6px 0 0}
.journal-entry{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-card);padding:12px 14px;margin-bottom:8px;box-shadow:var(--card-shadow)}
.journal-date{font-size:0.655rem;color:var(--n-500);margin-bottom:3px}
.journal-text{font-size:0.82rem;line-height:1.6}
.journal-tag{display:inline-block;font-size:0.62rem;padding:2px 6px;border-radius:20px;margin-top:4px}
.weather-card{background:linear-gradient(135deg,rgba(122,171,110,0.12),rgba(91,196,122,0.06));border:1px solid rgba(122,171,110,0.2);border-radius:var(--radius);padding:13px;margin-bottom:9px}
.weather-main{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.weather-temp{font-size:1.9rem;font-weight:300;color:var(--ivory)}
.weather-desc{font-size:0.8rem;color:var(--ivory-dim)}
.weather-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.weather-cell{text-align:center}
.weather-cell-val{font-size:0.86rem;font-weight:600;color:var(--ivory)}
.weather-cell-label{font-size:0.61rem;color:var(--ivory-dim);text-transform:uppercase;letter-spacing:0.05em}
.weather-advice{font-size:0.78rem;line-height:1.6;color:var(--ivory-dim);margin-top:8px;padding-top:8px;border-top:1px solid var(--glass-border)}
.photo-upload{border:2px dashed var(--glass-border);border-radius:8px;padding:16px;text-align:center;cursor:pointer;transition:border-color 0.2s}
.photo-upload:hover{border-color:var(--sage)}
.photo-upload input{display:none}
.photo-preview{width:100%;max-height:170px;object-fit:cover;border-radius:7px;display:none}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:6px}
.photo-thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;cursor:pointer}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.2);border-top-color:currentColor;border-radius:50%;animation:spin 0.7s linear infinite;display:inline-block;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-panel{display:flex;align-items:center;gap:8px;padding:12px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);margin-bottom:9px}
.loading-text{font-size:0.8rem;color:var(--ivory-dim)}
.empty-state{text-align:center;padding:36px 14px;color:var(--n-500)}
.empty-state .icon{font-size:2.6rem;margin-bottom:9px;display:block}
.empty-state h3{font-family:var(--e-font-display);font-weight:700;font-size:1.02rem;color:var(--ivory);margin-bottom:5px}
.empty-state p{font-size:0.81rem;line-height:1.6;max-width:250px;margin:0 auto 13px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.72);z-index:500;display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal{background:linear-gradient(180deg,#1b2f21,#131f17);border:1px solid var(--card-border);border-radius:var(--r-card) 28px 0 0;width:100%;max-height:92vh;overflow-y:auto;padding:20px 18px 36px;box-shadow:var(--panel-shadow)}
.modal-handle{width:36px;height:4px;background:var(--n-300);border-radius:2px;margin:0 auto 16px}
.modal-title{font-family:var(--e-font-display);font-size:1.1rem;font-weight:700;margin-bottom:16px}
.toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(9,17,12,0.96);border:1px solid var(--s-300);color:#c9e0bf;border-radius:999px;padding:10px 18px;font-family:var(--e-font-sans);font-size:0.78rem;font-weight:600;white-space:nowrap;max-width:calc(100vw - 40px);overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 26px rgba(0,0,0,0.5);z-index:999999;opacity:0;transition:opacity 0.25s,transform 0.25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.offline-banner{background:rgba(232,184,75,0.1);border:1px solid rgba(232,184,75,0.3);border-radius:8px;padding:7px 11px;font-size:0.77rem;color:var(--warn);display:none;margin-bottom:9px;text-align:center}
.offline-banner.show{display:block}
.dash-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:11px}
.dash-tile{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-card);padding:13px;text-align:center;cursor:pointer;box-shadow:var(--card-shadow);transition:transform 0.28s var(--e-spring),border-color 0.28s ease,box-shadow 0.28s ease}
.dash-tile:hover{transform:translateY(-2px);border-color:rgba(243,240,223,0.24);box-shadow:var(--card-shadow-hover)}
.dash-tile-icon{font-size:1.7rem;margin-bottom:4px}
.dash-tile-val{font-family:var(--e-font-serif);font-size:1.35rem;font-weight:700;color:var(--sage-light);line-height:1}
.dash-tile-label{font-size:0.62rem;font-weight:700;color:var(--n-500);text-transform:uppercase;letter-spacing:0.06em;margin-top:3px}
.dash-tile.warn{border-color:rgba(232,184,75,0.35)!important;background:rgba(232,184,75,0.06)!important}
.dash-tile.danger{border-color:rgba(217,91,91,0.35)!important;background:rgba(217,91,91,0.06)!important}
.history-item{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid var(--glass-border)}
.history-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px}
.history-content{flex:1;min-width:0}
.history-type{font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:1px}
.history-text{font-size:0.81rem;color:var(--ivory)}
.history-date{font-size:0.67rem;color:var(--ivory-dim);margin-top:2px}
.more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:11px}
.more-tile{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--r-card);padding:14px 8px;text-align:center;cursor:pointer;box-shadow:var(--card-shadow);transition:transform 0.28s var(--e-spring),border-color 0.28s ease,box-shadow 0.28s ease}
.more-tile:hover{transform:translateY(-2px);border-color:rgba(243,240,223,0.24);box-shadow:var(--card-shadow-hover)}
.more-tile-icon{font-size:1.6rem;margin-bottom:4px}
/* Stroke icons, not emoji — Lucide-style at 2.75 to match the bottom nav. */
.more-tile svg{width:22px;height:22px;margin:0 auto 6px;display:block;fill:none;stroke:var(--a-700);stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round}
.more-tile-label{font-size:0.78rem;font-weight:600;color:var(--ivory)}
.more-tile-sub{font-size:0.655rem;color:var(--n-500);margin-top:2px;line-height:1.35}
.diagnosis-result{background:rgba(232,184,75,0.08);border:1px solid rgba(232,184,75,0.25);border-radius:var(--radius);padding:12px}
.diagnosis-result.healthy{background:rgba(91,196,122,0.08);border-color:rgba(91,196,122,0.25)}

.space-chip{background:var(--n-200);border:1px solid transparent;border-radius:999px;padding:5px 12px;font-size:0.73rem;font-weight:600;color:var(--n-700);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all 0.3s var(--e-spring,ease);font-family:var(--e-font-sans)}
.space-chip.active{background:var(--s-100);border-color:var(--s-300);color:var(--s-800)}
.space-chip:hover{border-color:rgba(243,240,223,0.24);color:var(--ivory)}
@media(min-width:640px){.info-grid{grid-template-columns:repeat(3,1fr)}.page{padding:18px 22px 90px}}

/* AUTH SCREEN */
#auth-screen{display:none;position:fixed;inset:0;background:var(--forest);z-index:10000;flex-direction:column;align-items:center;justify-content:center;padding:24px;
  background-image:linear-gradient(175deg,#152619 0%,#101f16 34%,#0d1a12 100%),
    radial-gradient(ellipse 85% 42% at 15% -4%,rgba(122,171,110,.13),transparent 62%)}
#auth-form{width:100%;max-width:380px;background:var(--panel-bg);border:1px solid var(--card-border);border-radius:var(--r-panel);padding:28px 24px;box-shadow:var(--panel-shadow)}
html.gk-light #auth-screen{background-image:linear-gradient(175deg,#faf7ec 0%,#f4f1e6 40%,#ecebdc 100%)}
/* LOADING SCREEN */
/* ── SPLASH / LOADING ────────────────────────────────────────
   Typography-led: the wordmark is the hero, no icon. A shimmer
   travels the "growth line" as a living progress cue. */
#loading-screen{display:none;position:fixed;inset:0;background:radial-gradient(125% 95% at 50% 34%,#263d26 0%,#1a2e1a 46%,#0e1a0e 100%);z-index:10001;flex-direction:column;align-items:center;justify-content:center;gap:0;overflow:hidden}
.splash-glow{position:absolute;width:min(560px,140vw);height:min(560px,140vw);border-radius:50%;background:radial-gradient(circle,rgba(122,171,110,0.17),rgba(122,171,110,0.05) 45%,transparent 68%);filter:blur(26px);pointer-events:none;animation:splashPulse 4.6s ease-in-out infinite}
@keyframes splashPulse{0%,100%{transform:scale(0.9);opacity:0.6}50%{transform:scale(1.07);opacity:1}}
.splash-mark{position:relative;display:flex;align-items:flex-start;gap:8px;animation:splashRise 0.85s cubic-bezier(0.2,0.7,0.2,1) both}
@keyframes splashRise{from{opacity:0;transform:translateY(15px) scale(0.96)}to{opacity:1;transform:none}}
.loading-logo{font-family:var(--e-font-serif,'Playfair Display',serif);font-size:clamp(2.5rem,9vw,3.5rem);font-weight:700;color:var(--ivory);letter-spacing:-0.035em;line-height:1}
.loading-logo span{color:var(--sage-light);margin-right:-0.06em}
.splash-beta{font-family:var(--e-font-sans);font-size:0.56rem;font-weight:800;letter-spacing:0.14em;color:var(--clay-light);border:1px solid rgba(217,138,96,0.5);background:rgba(217,138,96,0.12);border-radius:20px;padding:3px 8px;margin-top:5px;flex-shrink:0}
.splash-stem{position:relative;width:min(220px,56vw);height:2px;background:rgba(245,240,232,0.09);border-radius:2px;margin-top:28px;overflow:hidden;animation:splashFade 0.7s ease-out 0.25s both}
.splash-stem i{position:absolute;top:0;bottom:0;left:0;width:42%;background:linear-gradient(90deg,transparent,var(--sage) 35%,var(--sage-light) 65%,transparent);border-radius:2px;animation:splashSweep 1.5s cubic-bezier(0.45,0,0.25,1) infinite}
@keyframes splashSweep{0%{transform:translateX(-110%)}100%{transform:translateX(345%)}}
.splash-msg{font-size:0.79rem;color:var(--ivory-dim);margin-top:17px;letter-spacing:0.01em;animation:splashFade 0.9s ease-out 0.4s both}
@keyframes splashFade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .splash-glow,.splash-mark,.splash-stem,.splash-stem i,.splash-msg{animation:none}
  .splash-stem i{width:100%;transform:none}
}
/* PLAN BADGE */
#plan-badge{font-size:0.62rem;font-weight:600;padding:2px 8px;border-radius:20px;background:rgba(122,171,110,0.15);border:1px solid rgba(122,171,110,0.3);color:var(--sage-light);display:none}
#header-email{font-size:0.72rem;color:var(--ivory-dim);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* UPGRADE MODAL */
.upgrade-features{list-style:none;text-align:left;margin:14px 0}
.upgrade-features li{font-size:0.82rem;color:var(--ivory-dim);padding:4px 0;display:flex;align-items:center;gap:7px}
.upgrade-features li::before{content:'✓';color:var(--success);font-weight:700}

/* Celebrate-the-wins confetti */
@keyframes giqconf {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.95; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

@keyframes wrapPop{0%{opacity:0;transform:scale(0.8)}100%{opacity:1;transform:scale(1)}}
@keyframes wrapUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════════════════════════
   DESKTOP LAYOUT — ≥1024px: bottom tabs become a left sidebar,
   content is centered and width-capped for readability.
   Mobile markup is untouched; this is a pure responsive re-layout.
   ══════════════════════════════════════════════════════════ */
@media(min-width:1024px){
  /* Bottom tab bar → fixed left sidebar */
  .nav-tabs{
    top:0;bottom:0;right:auto;left:0;width:210px;
    flex-direction:column;justify-content:flex-start;
    border-top:none;border-right:1px solid var(--glass-border);
    padding:14px 10px;gap:4px;padding-bottom:14px;
  }
  .nav-tab{
    flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:13px;
    padding:12px 14px;border-radius:11px;font-size:0.82rem;text-transform:none;
    letter-spacing:0;width:100%;
  }
  .nav-tab svg{width:19px;height:19px}
  .nav-tab.active{background:rgba(122,171,110,0.14)}
  /* A brand lockup at the top of the sidebar */
  .nav-tabs::before{
    content:"GrowIQ";display:block;font-family:var(--e-font-serif,'Playfair Display',serif);
    font-size:1.3rem;font-weight:700;color:var(--e-accent,#E05A36);
    padding:8px 14px 4px;letter-spacing:-0.01em;
  }
  .nav-tabs::after{
    content:"Gardener";display:block;
    font-size:0.64rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
    color:var(--ivory-dim);padding:0 14px 16px;
  }

  /* Shift everything right of the sidebar and cap width */
  header{margin-left:210px;max-width:none;padding-left:48px;padding-right:48px}
  .header-logo{display:none} /* brand now lives in the sidebar */
  #weather-header-bar{margin-left:210px}
  .page{
    margin-left:210px;max-width:none;
    padding:28px 48px 60px;min-height:calc(100vh - 60px);
  }
  /* Dashboard & content read better with more columns on desktop */
  .info-grid{grid-template-columns:repeat(3,1fr)}
  .more-grid,.more-tiles{grid-template-columns:repeat(3,1fr)!important}
  /* FAB sits inside the content column, not screen corner */
  .fab{right:40px;bottom:32px}

  /* Full-screen mode shells (Nursery / Pro Grower): center & cap width */
  #grower-shell, #nursery-shell, #livestock-shell{
    left:0;right:0;transform:none;max-width:none;
    display:grid;grid-template-columns:180px 1fr;grid-template-rows:auto 1fr;
    grid-template-areas:"topbar topbar" "tabbar body";
  }
  #grower-shell .shell-topbar, #nursery-shell .shell-topbar, #livestock-shell .shell-topbar{grid-area:topbar}
  #grower-shell .shell-tabbar, #nursery-shell .shell-tabbar, #livestock-shell .shell-tabbar{
    grid-area:tabbar;flex-direction:column;width:auto;height:auto;
    border-top:none;border-right:1px solid var(--glass-border);
    padding:14px 8px;gap:3px;align-content:start;overflow-y:auto;
  }
  #grower-shell .shell-tabbar button, #nursery-shell .shell-tabbar button, #livestock-shell .shell-tabbar button{
    flex:0 0 auto!important;flex-direction:row!important;justify-content:flex-start!important;gap:12px!important;
    padding:11px 14px!important;border-radius:10px;width:100%;
  }
  #grower-shell .shell-tabbar button span:last-child, #nursery-shell .shell-tabbar button span:last-child, #livestock-shell .shell-tabbar button span:last-child{
    font-size:0.82rem!important;letter-spacing:0!important;
  }
  #grower-shell .shell-body, #nursery-shell .shell-body, #livestock-shell .shell-body{
    grid-area:body;min-width:0;min-height:0;padding:22px 40px 40px;overflow-y:auto;
  }
  /* Their inner top/bottom bars already flex; just widen the body padding */
  #pg-body, #ns-body{padding-left:max(14px,4vw);padding-right:max(14px,4vw)}
  /* Modals a touch wider and centered on desktop */
  .modal{max-width:520px;margin:0 auto;border-radius:16px}
  .modal-overlay{align-items:center}
}

/* Ultra-wide safety: never let raw content sprawl past a comfortable measure */
@media(min-width:1440px){
  .page{padding-left:56px;padding-right:56px}
  header{padding-left:56px;padding-right:56px}
  #dashboard-content{grid-template-columns:minmax(0,1fr) 380px;gap:28px}
}
@media(min-width:1800px){
  #dashboard-content{grid-template-columns:minmax(0,1fr) 420px}
}


/* Mode shells: mobile = stacked flex column (topbar, body, bottom tabs) */
@media(max-width:1023px){#grower-shell, #nursery-shell, #livestock-shell{display:flex;flex-direction:column}}
/* ── Dashboard aside (desktop right column) ── */
.dash-aside{display:none}
.aside-card{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--r-card);padding:14px 15px;margin-bottom:14px}
.aside-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.13em;color:var(--n-500);margin-bottom:10px}
.aside-stat{background:rgba(255,255,255,0.03);border-radius:9px;padding:9px;text-align:center}
.aside-stat-n{font-family:var(--e-font-serif);font-size:1.3rem;font-weight:800;color:var(--ivory)}
.aside-stat-l{font-size:0.62rem;color:var(--ivory-dim);margin-top:1px}
.aside-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-top:1px solid rgba(255,255,255,0.05);font-size:0.8rem;color:var(--ivory)}
.aside-row:first-of-type{border-top:none}
.aside-action{display:block;width:100%;text-align:left;background:rgba(255,255,255,0.03);border:1px solid var(--glass-border);border-radius:9px;padding:9px 12px;margin-bottom:7px;color:var(--ivory);font-size:0.8rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background 0.15s}
.aside-action:hover{background:rgba(122,171,110,0.12)}

@media(min-width:1024px){
  #dashboard-content{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
  .dash-aside{display:block;position:sticky;top:80px}
  .dash-main{min-width:0;width:100%}
  .dash-main > *{max-width:none!important;width:auto}
  #page-dashboard{max-width:none}
}

/* ── Admin Portal responsive ── */
@media(max-width:768px){
  #admin-portal .portal-wrap{flex-direction:column;height:100%}
  #admin-portal .portal-side{width:100%!important;flex-direction:column!important;border-right:none;border-bottom:1px solid var(--glass-border);flex-shrink:0}
  #admin-portal .portal-side>div:nth-child(2){display:flex;flex-direction:row;overflow-x:auto;padding:4px 0}
  #admin-portal .portal-side>div:nth-child(2) button{width:auto!important;white-space:nowrap;border-left:none!important;border-bottom:3px solid transparent;flex-shrink:0}
  #admin-portal .portal-main{padding:18px 16px!important}
}

/* ── Sibling-module wordmarks — same lockup as GrowIQ, own tint on the "IQ".
   These stay pinned to their brand hexes rather than the terracotta ramp:
   the tint IS how you know which product you're in. ── */
.farmiq-mark{font-family:var(--e-font-display);font-weight:700;color:#d98a60;letter-spacing:-0.01em;white-space:nowrap}
.farmiq-mark span{color:var(--ivory);margin-right:-0.05em}
.farmiq-mark sup{font-size:0.5em;font-weight:700;color:var(--sage-light);letter-spacing:0.05em;margin-left:3px;vertical-align:super;font-family:var(--e-font-sans)}
.networkiq-mark{font-family:var(--e-font-display);font-weight:700;color:var(--net-light);letter-spacing:-0.01em;white-space:nowrap}
.networkiq-mark span{color:var(--ivory);margin-right:-0.05em}
.networkiq-mark sup{font-size:0.5em;font-weight:700;color:var(--sage-light);letter-spacing:0.05em;margin-left:3px;vertical-align:super;font-family:var(--e-font-sans)}
.shopiq-mark{font-family:var(--e-font-display);font-weight:700;color:#e8b84b;letter-spacing:-0.01em;white-space:nowrap}
.shopiq-mark span{color:var(--ivory);margin-right:-0.05em}
.shopiq-mark sup{font-size:0.5em;font-weight:700;color:var(--sage-light);letter-spacing:0.05em;margin-left:3px;vertical-align:super;font-family:var(--e-font-sans)}
.pondiq-mark{font-family:var(--e-font-display);font-weight:700;color:#8fc0d6;letter-spacing:-0.01em;white-space:nowrap}
.pondiq-mark span{color:var(--ivory);margin-right:-0.05em}
.pondiq-mark sup{font-size:0.5em;font-weight:700;color:var(--sage-light);letter-spacing:0.05em;margin-left:3px;vertical-align:super;font-family:var(--e-font-sans)}
.roundiq-mark{font-family:var(--e-font-display);font-weight:700;color:var(--sage-light);letter-spacing:-0.01em;white-space:nowrap}
.roundiq-mark span{color:var(--ivory);margin-right:-0.05em}
.roundiq-mark sup{font-size:0.5em;font-weight:700;color:var(--sage-light);letter-spacing:0.05em;margin-left:3px;vertical-align:super;font-family:var(--e-font-sans)}

/* ── COMMUNITY (social feed) ── */
.comm-topbar{position:sticky;top:0;z-index:6;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:color-mix(in srgb,var(--forest) 80%,transparent);border-bottom:none;box-shadow:0 1px 0 rgba(243,240,223,0.06);padding:13px 18px;display:flex;align-items:center;gap:12px;margin-bottom:20px}
.comm-wrap{max-width:1080px;margin:0 auto;padding:0 16px 48px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
@media(min-width:900px){
  .comm-wrap{grid-template-columns:minmax(0,1fr) 330px;gap:26px}
  .comm-side{position:sticky;top:78px}
}
.comm-feed{min-width:0;display:flex;flex-direction:column;gap:12px}
.comm-side{min-width:0;display:flex;flex-direction:column;gap:14px}
.comm-avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;color:#10200f;letter-spacing:-0.02em;line-height:1;font-family:var(--e-font-sans)}
.comm-post{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--r-card);padding:15px 17px;transition:border-color 0.18s,background 0.18s}
.comm-post:hover{transform:translateY(-2px);border-color:rgba(243,240,223,0.24);box-shadow:var(--card-shadow-hover)}
.comm-composer{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--r-card);padding:13px 15px;display:flex;gap:12px;align-items:center;cursor:pointer;transition:border-color 0.18s}
.comm-composer:hover{border-color:rgba(122,171,110,0.45)}
.comm-act{background:none;border:none;cursor:pointer;font-size:0.8rem;font-weight:600;padding:6px 11px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;transition:background 0.15s,color 0.15s;font-family:var(--e-font-sans);line-height:1}
.comm-act:hover{background:rgba(255,255,255,0.07)}
.comm-act.liked:hover{background:rgba(232,122,138,0.12)}
.comm-card{background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--r-card);padding:15px 16px}
.comm-card-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.13em;color:var(--n-500);margin-bottom:11px}
.comm-grower{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.comm-grower:last-child{border-bottom:none}
@media(min-width:640px){ .comm-topbar .comm-sub{display:inline!important} }
.splash-tag{font-size:0.66rem;color:rgba(157,196,145,0.55);letter-spacing:0.06em;margin-top:26px;font-weight:600;animation:splashFade 1.1s ease-out 0.8s both}
@media(prefers-reduced-motion:reduce){ .splash-tag{animation:none} }

/* ============================================================
   PLANT DETAIL HERO v2 — sticky photo, overlaid stats, sheet
   slides up over it on scroll. Scoped to #detail-content only.
   ============================================================ */
/* Kinetic ambient glow — a dedicated layer so its opacity can breathe
   independently of the actual page content sitting on top of it. */
#page-detail{position:relative}
.pd-ambient-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;transition:background 0.8s ease}
.pd-ambient-glow.breathe{animation:elite-breathe 4s ease-in-out infinite}
@keyframes elite-breathe{0%,100%{opacity:0.65}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.pd-ambient-glow.breathe{animation:none}}

.pd-hero{position:sticky;top:0;z-index:1;width:100%;aspect-ratio:16/10;max-height:300px;min-height:220px;border-radius:14px;overflow:hidden;background:var(--forest-light)}
.pd-hero img{width:100%;height:100%;object-fit:cover;display:block}
.pd-hero-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:5rem;background:radial-gradient(circle at 30% 20%,rgba(122,171,110,0.25),rgba(122,171,110,0.05))}
.pd-hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,14,8,0.92) 0%,rgba(8,14,8,0.5) 42%,rgba(8,14,8,0.02) 68%),linear-gradient(to bottom,rgba(8,14,8,0.5) 0%,rgba(8,14,8,0) 26%)}
.pd-hero-nav{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;z-index:2}
.pd-hero-circle-btn{width:36px;height:36px;border-radius:50%;background:rgba(10,16,10,0.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:1rem;flex-shrink:0;transition:transform 0.3s cubic-bezier(0.16,1,0.3,1)}
.pd-hero-circle-btn:active{transform:scale(0.9)}
.pd-hero-ring{position:absolute;top:56px;right:12px;z-index:2;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.35))}
.pd-hero-body{position:absolute;left:14px;right:14px;bottom:14px;z-index:2}
.pd-hero-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.pd-hero-chip{background:rgba(10,16,10,0.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.18);border-radius:20px;padding:4px 10px;font-size:0.7rem;font-weight:600;color:#fff;display:flex;align-items:center;gap:4px;white-space:nowrap}
.pd-hero-chip.warn{background:rgba(224,90,54,0.9);color:#fff;border-color:transparent}
.pd-hero-name{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,0.55);line-height:1.25}
.pd-sheet{position:relative;z-index:2;background:var(--forest);border-radius:16px 16px 0 0;margin-top:-16px;padding-top:18px}

/* Cinematic Harvest Time-Curve — horizontal snap-scroll stage cards */
.pd-journey-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.pd-journey-strip::-webkit-scrollbar{height:4px}
.pd-journey-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:4px}
.pd-journey-card{position:relative;flex:0 0 auto;border-radius:12px;overflow:hidden;background:var(--forest-light);cursor:pointer;opacity:0.45;scroll-snap-align:start;transition:opacity 0.3s var(--e-spring, ease),transform 0.3s var(--e-spring, ease),box-shadow 0.3s var(--e-spring, ease)}
.pd-journey-card img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(0.6)}
.pd-journey-card.done{opacity:0.75}
.pd-journey-card.done img{filter:grayscale(0.15)}
.pd-journey-card.current{opacity:1;transform:scale(1.04);box-shadow:0 0 0 2px var(--e-accent, #E05A36)}
.pd-journey-card.current img{filter:none}
.pd-journey-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,14,8,0.85),rgba(8,14,8,0.15) 60%)}
.pd-journey-icon{position:absolute;top:6px;left:6px;font-size:0.85rem;z-index:2}
.pd-journey-label{position:absolute;left:6px;right:6px;bottom:6px;font-size:0.62rem;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.6);z-index:2;line-height:1.2}

/* ============================================================
   ELITE PILOT — terracotta/glass direction from the design
   brief, scoped to the plant detail screen (#page-detail) only,
   so it can be evaluated live before any wider rollout.

   Tokens live on #page-detail (not .elite-pilot) because the
   ambient-glow background is set on #page-detail itself via JS
   (eliteAmbientGlow()) — custom properties only cascade to
   descendants, so the definition has to sit on the outermost
   element that needs them, not the inner content div.
   ============================================================ */
.elite-pilot{font-family:var(--e-font-sans)}
.elite-pilot .pd-hero-name{font-family:var(--e-font-display);font-weight:700}
/* The card's glass treatment now lives on .card itself (see above) so every
   screen gets it, pilot-wrapped or not. This block only adds what's specific
   to the pilot pages — don't reintroduce a flat background here, it would
   paint over the layered gradient. */
.elite-pilot .card:active{transform:translateY(-1px)}
.elite-pilot .card-title{font-family:var(--e-font-display);font-weight:700}
.elite-pilot button,.elite-pilot .btn{transition:transform 0.3s var(--e-spring),border-color 0.3s var(--e-spring),background 0.3s var(--e-spring)}
.elite-pilot button:active,.elite-pilot .btn:active{transform:scale(0.96)}
.btn-elite{background:linear-gradient(135deg,var(--e-accent),var(--e-accent-dark));border:none;color:#fff;font-weight:700;border-radius:20px;padding:6px 13px;font-size:0.72rem;cursor:pointer;box-shadow:0 2px 10px var(--e-accent-glow);transition:transform 0.3s var(--e-spring)}
.btn-elite:active{transform:scale(0.96)}

/* Shimmer skeleton loaders — mimic the shape of the card they'll become */
@keyframes elite-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.elite-skel{background:linear-gradient(90deg,rgba(243,240,223,0.05) 25%,rgba(243,240,223,0.13) 37%,rgba(243,240,223,0.05) 63%);background-size:400% 100%;animation:elite-shimmer 1.6s ease-in-out infinite;border-radius:6px;display:block}
.elite-skel-line{height:11px;margin-bottom:8px}
.elite-skel-line:last-child{margin-bottom:0}
.elite-skel-line.w40{width:40%}
.elite-skel-line.w60{width:60%}
.elite-skel-line.w80{width:80%}
.elite-skel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.elite-skel-cell{height:52px;border-radius:10px}
@media(prefers-reduced-motion:reduce){.elite-skel{animation:none}}


/* ══════════════════════════════════════════════════════════════════════
   ELITE DARK — utilities used by the redesigned screens
   Small, composable, token-only. Nothing here hardcodes a colour that
   isn't already in the palette, so both themes get it for free.
   ══════════════════════════════════════════════════════════════════════ */

/* The "smart panel": a deeper pane of glass for the surfaces that reason
   about your garden (Garden status, GrowSense, Wrapped, display mode). */
.gk-glass{background:var(--panel-bg);border-radius:var(--r-panel);box-shadow:var(--panel-shadow);padding:20px 18px;margin-bottom:18px;color:var(--ivory)}
.gk-circle{border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gk-row{display:flex;align-items:center;gap:10px}
.gk-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gk-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gk-divider{height:1px;background:var(--glass-border);margin:14px 0}
.gk-spacer{flex:1}

/* Playfair for the things that name a surface; Merriweather for the
   things that measure one. Numerals never sit in the UI face. */
.gk-title{font-family:var(--e-font-display);font-weight:700;font-size:15px;color:var(--ivory);letter-spacing:-0.01em}
.gk-title-sm{font-family:var(--e-font-display);font-weight:700;font-size:14px;color:var(--ivory)}
.gk-num{font-family:var(--e-font-serif);font-weight:700;line-height:1.1}
.gk-muted{color:var(--n-600)}
.gk-dim{color:var(--n-500)}
.gk-body{font-size:12.5px;line-height:1.6}

/* Stat tile — a quiet tinted well, not another bordered card. */
.gk-stat{background:var(--n-100);border-radius:var(--r-well);padding:10px;text-align:center}
.gk-stat-val{font-family:var(--e-font-serif);font-weight:700;font-size:17px;line-height:1.15}
.gk-stat-label{font-size:9.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--n-500);margin-top:2px}

/* Thin bar for precise reading where a ring only gives you shape. */
.gk-bar{height:4px;border-radius:99px;background:var(--n-200);overflow:hidden}
.gk-bar-lg{height:8px}
.gk-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--sage-light),var(--warn));transition:width 0.4s var(--e-spring)}

/* Photo placeholders: striped, labelled in monospace. Swap for real photos. */
.gk-washed{background:repeating-linear-gradient(135deg,var(--a-200),var(--a-200) 10px,var(--a-100) 10px,var(--a-100) 20px);display:flex;align-items:center;justify-content:center;border-radius:var(--r-card)}
.gk-washed-label{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:0.05em;color:var(--a-800);background:var(--forest);padding:5px 10px;border-radius:999px}

/* Hero greeting — cream drifting to gold and peach. Starts from the theme's
   text colour so it reads dark-on-cream in daylight, cream-on-dark at night. */
.gk-greeting{margin:0;font-family:var(--e-font-serif);font-size:27px;font-weight:800;letter-spacing:-0.02em;line-height:1.15;
  background:linear-gradient(100deg,var(--ivory) 30%,#c99428 75%,#d0673c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gk-streak{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;background:rgba(232,184,75,0.14);border:1px solid rgba(232,184,75,0.4);color:var(--warn);font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}

/* Concentric garden-status gauge — soft gold/sage light, kept to a whisper. */
.gk-rings{flex-shrink:0;transform:rotate(-90deg);filter:drop-shadow(0 0 8px rgba(232,184,75,0.16)) drop-shadow(0 0 16px rgba(122,171,110,0.1))}
.gk-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

/* Confidence chip on an AI surface — gold fill, dark ink, unmissable. */
.gk-confidence{margin-left:auto;font-size:10px;font-weight:700;color:#0B1410;background:var(--warn);padding:3px 10px;border-radius:999px;white-space:nowrap}
.gk-linkbtn{background:none;border:none;color:var(--warn);font-family:var(--e-font-display);font-weight:700;font-size:13px;cursor:pointer;padding:0}
.gk-chip-soft{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--n-200);color:var(--n-700);white-space:nowrap}
.gk-chip-gold{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--warn);color:#0B1410;white-space:nowrap}
.gk-chip-outline{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid rgba(243,240,223,0.2);color:var(--n-700);white-space:nowrap}

.gk-seeall{font-weight:400;text-transform:none;letter-spacing:0;color:var(--a-700);font-size:12px;cursor:pointer;background:none;border:none;font-family:var(--e-font-sans)}

/* Pull-to-refresh: a watering ripple rather than a spinner. */
.gk-pull{overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;transition:height 0.3s var(--e-spring);touch-action:pan-x}
.gk-pull-label{font-size:10.5px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--sage-light)}
.gk-ripple{position:absolute;width:90px;height:90px;border-radius:50%;border:1px solid var(--s-300);animation:gkripple 1.1s ease-out infinite}
@keyframes gkripple{0%{transform:scale(.3);opacity:.6}100%{transform:scale(2.6);opacity:0}}

/* Celebration — confetti plus a gold message card, for the moments that
   deserve more than a toast (whole garden watered, day's list cleared). */
@keyframes gkfall{0%{transform:translateY(-40px) rotate(0deg);opacity:1}85%{opacity:1}100%{transform:translateY(560px) rotate(560deg);opacity:0}}
.gk-confetti-layer{position:fixed;inset:0;z-index:9500;pointer-events:none;overflow:hidden}
.gk-confetti-layer i{position:absolute;top:-20px;display:block;animation:gkfall 1.9s cubic-bezier(.3,.6,.6,1) both}
.gk-celebrate-msg{position:fixed;top:34%;left:50%;transform:translateX(-50%);z-index:9501;pointer-events:none;
  background:rgba(9,17,12,0.95);border:1px solid rgba(232,184,75,0.45);border-radius:18px;padding:16px 22px;text-align:center;
  font-family:var(--e-font-sans);font-size:14px;font-weight:700;color:var(--warn);box-shadow:0 12px 40px rgba(0,0,0,0.5);max-width:calc(100vw - 60px)}

/* Counts pop rather than snap when they change. */
@keyframes gkpop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.gk-pop{display:inline-block;animation:gkpop 0.4s ease}

/* Scanner sweep — shared by the camera viewfinder and the barcode reader. */
@keyframes gkscan{0%,100%{top:6%}50%{top:92%}}
.gk-scanline{position:absolute;left:8px;right:8px;height:2.5px;background:linear-gradient(90deg,transparent,var(--sage),transparent);box-shadow:0 0 16px var(--sage);animation:gkscan 1.1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .gk-confetti-layer i,.gk-ripple,.gk-pop,.gk-scanline{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   DAYLIGHT MODE — gardeners are outside, and cream reads in bright sun.
   Everything is token-driven, so this is a value swap rather than a
   second stylesheet. Note the body `color`: DS-ish headings inherit their
   colour from body, so re-declaring it here is what fixes every heading
   at once instead of one screen at a time.
   ══════════════════════════════════════════════════════════════════════ */
html.gk-light{color-scheme:light}
html.gk-light body{
  --forest:#f4f1e6;--forest-mid:#ffffff;--forest-light:#e7e3d3;
  --glass:rgba(34,48,31,0.05);--glass-border:rgba(34,48,31,0.13);--surface:rgba(255,255,255,0.8);
  --ivory:#22301f;--ivory-dim:rgba(34,48,31,0.6);--ivory-faint:rgba(34,48,31,0.38);
  --clay-light:#c2491f;
  --a-700:#c2491f;--a-800:#a33c18;
  --s-700:#4d7a42;--s-800:#3c6234;
  --sage-light:#4d7a42;
  --n-100:rgba(34,48,31,0.05);--n-200:rgba(34,48,31,0.09);--n-300:rgba(34,48,31,0.16);
  --n-400:rgba(34,48,31,0.3);--n-500:rgba(34,48,31,0.45);--n-600:rgba(34,48,31,0.6);
  --n-700:rgba(34,48,31,0.72);--n-800:rgba(34,48,31,0.86);--n-900:#22301f;
  --card-bg:linear-gradient(165deg,#ffffff,#f4f0e2);
  --card-border:rgba(34,48,31,0.12);
  --card-shadow:0 1px 2px rgba(34,48,31,0.06),0 10px 26px rgba(34,48,31,0.08);
  --card-shadow-hover:0 2px 4px rgba(34,48,31,0.08),0 16px 34px rgba(34,48,31,0.12);
  --panel-bg:linear-gradient(165deg,#ffffff,#f2eee0);
  --panel-shadow:0 1px 2px rgba(34,48,31,0.06),0 12px 30px rgba(34,48,31,0.1);
  --input-bg:#ffffff;--input-border:rgba(34,48,31,0.18);
  --shadow-sm:0 1px 2px rgba(34,48,31,0.08);
  --shadow-md:0 6px 18px rgba(34,48,31,0.12);
  --shadow-lg:0 16px 40px rgba(34,48,31,0.16);
  --e-glass:rgba(255,255,255,0.85);
  --e-border:rgba(34,48,31,0.12);
  --e-text-muted:rgba(34,48,31,0.6);
  /* Gold is a fill colour, not a text colour, on cream — so text gets its
     own darker step while bars and chips keep the bright hex. */
  --gold-ink:#8a6410;
  color:var(--ivory);
  background:linear-gradient(175deg,#faf7ec 0%,#f4f1e6 40%,#ecebdc 100%)}
:root{--gold-ink:#e8b84b}
html.gk-light body::before{
  background:
    radial-gradient(ellipse 85% 42% at 15% -4%,rgba(122,171,110,.14),transparent 62%),
    radial-gradient(ellipse 75% 40% at 60% 104%,rgba(224,90,54,.06),transparent 60%)}
html.gk-light .nav-tabs{background:rgba(250,247,236,0.94);border-top-color:rgba(34,48,31,0.1)}
html.gk-light .toast{background:#22301f;color:#f2f7ef;border-color:rgba(34,48,31,0.2)}
html.gk-light .gk-streak{color:var(--gold-ink);background:rgba(232,184,75,0.2);border-color:rgba(168,121,15,0.45)}
html.gk-light .gk-linkbtn{color:var(--gold-ink)}
html.gk-light .gk-chip-outline{border-color:rgba(34,48,31,0.24)}
html.gk-light .gk-confidence{background:#a8790f;color:#fffdf6}
html.gk-light .gk-washed-label{background:#faf7ec}
html.gk-light .modal{background:linear-gradient(180deg,#ffffff,#f6f2e6)}
html.gk-light .btn-primary{box-shadow:0 4px 14px rgba(224,90,54,0.22),inset 0 1px 0 rgba(255,255,255,0.3)}
/* The camera viewfinder stays dark (a viewfinder is inherently dark) and the
   till QR stays light (it has to scan) — both deliberate in either theme. */

/* Page name beside the wordmark — Merriweather, so it reads as a heading
   rather than another piece of chrome. Truncates before the wordmark does. */
#page-title{font-family:var(--e-font-serif);font-weight:700;font-size:0.95rem;color:var(--ivory);letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#page-title:not(:empty)::before{content:'';display:inline-block;width:1px;height:0.95em;background:var(--glass-border);margin-right:9px;vertical-align:-0.1em}
@media (max-width:430px){#page-title{font-size:0.85rem}}
@media (max-width:365px){#page-title{display:none}}

/* ── PLANT DETAIL ──
   The photo is a photo, sized so the facts start above the fold. Name, chips
   and stats sit below it rather than floating over the image. */
.pd-photo{position:relative;width:100%;height:180px;border-radius:var(--r-card);overflow:hidden;margin-bottom:14px;background:var(--forest-light)}
.pd-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pd-sheet{position:relative;background:none;border-radius:0;margin-top:0;padding-top:0}

/* Module bottom bars share the gardener nav's language — same blurred pane,
   same 9px label — so switching products feels like the same app. */
html.gk-light .shell-tabbar{background:rgba(250,247,236,0.94)!important;border-top-color:rgba(34,48,31,0.1)!important}
.shell-tabbar button span:last-child{font-family:var(--e-font-sans)}

/* Full-screen overlays (Foresight, GrowIQ Learns, Wins, Tend, Story) sit on
   the same ground as the app so they follow the theme rather than pinning
   themselves to night. */
:root{--overlay-bg:linear-gradient(175deg,#152619 0%,#101f16 34%,#0d1a12 100%)}
html.gk-light body{--overlay-bg:linear-gradient(175deg,#faf7ec 0%,#f4f1e6 40%,#ecebdc 100%)}

/* Admin console at phone width: the section picker replaces the sidebar list
   rather than the sidebar becoming a sideways scroll row nobody reads. */
@media(max-width:768px){
  #admin-portal .portal-tablist{display:none!important}
  #admin-portal .portal-picker{display:flex!important}
}

/* The wordmark as a standalone lockup — the sign-in screen and the share card
   use it away from the app header. It was being written as .gk-mark but never
   defined, so both rendered in the UI face with no terracotta "IQ" at all. */
.gk-mark{font-family:var(--e-font-display);font-weight:700;font-size:24px;letter-spacing:-0.01em;white-space:nowrap;color:var(--ivory);text-shadow:0 0 14px rgba(224,90,54,0.16)}
.gk-mark span{color:var(--ivory)}
.gk-mark b{color:var(--a-500);font-weight:700}

/* Links. There was no global rule for these anywhere, so every bare <a> in
   the app rendered in the browser's default blue — on a forest-green ground.
   Terracotta is the accent that already means "this is interactive". */
a{color:var(--a-700);text-underline-offset:3px}
a:hover{color:var(--a-800)}
a:visited{color:var(--a-700)}

/* The "Add to Home Screen" banner on an empty Plants page. Both its classes
   were referenced in the markup but never defined anywhere, so a brand-new
   Android user — the only person who ever sees it — got an unstyled row of
   text on their first screen. Pre-dates the redesign. */
.install-banner{display:flex;align-items:center;gap:11px;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--r-card);padding:12px 14px;margin-bottom:12px}
.install-banner-text{flex:1;min-width:0;font-size:0.78rem;line-height:1.4;color:var(--n-600)}
.install-banner-text strong{display:block;font-size:0.86rem;font-weight:600;color:var(--ivory)}