:root {
  --bg:#f5f2ec; --surface:#f8f6f0; --surface-2:#faf9f5; --offset:#efe9de;
  --divider:#d8d0c3; --border:#ccc4b5;
  --text:#231e14; --muted:#6b6355; --faint:#b0a99e;
  --primary:#1e6b4a; --primary-hover:#185a3e; --primary-subtle:#e8f2ee; --primary-highlight:#c8ddd4;
  --accent:#b06a1a; --accent-highlight:#f0e0c8;
  --error:#c0392b; --error-highlight:#f5d5d0;
  --success:#2d8a50; --success-highlight:#d0ecd8;
  --r-md:.5rem; --r-lg:.75rem; --r-xl:1rem; --r-2xl:1.5rem; --r-full:9999px;
  --t:180ms cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px rgb(35 30 20 / .07);
  --shadow-md:0 4px 16px rgb(35 30 20 / .10);
  --shadow-lg:0 12px 40px rgb(35 30 20 / .14);
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem;
  --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem;
  --t-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --t-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --t-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --t-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --t-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#13110d; --surface:#181610; --surface-2:#1e1b14; --offset:#272319;
    --divider:#2e2a22; --border:#3a352a;
    --text:#e8e2d8; --muted:#8c8278; --faint:#5a5650;
    --primary:#5ab88a; --primary-hover:#4aa078; --primary-subtle:#182820; --primary-highlight:#1e3530;
    --accent:#e8a050; --accent-highlight:#3a2a18;
    --error:#e05a4a; --error-highlight:#3a1c18;
    --success:#5ab878; --success-highlight:#182a20;
    --shadow-sm:0 1px 3px rgb(0 0 0 / .25);
    --shadow-md:0 4px 16px rgb(0 0 0 / .35);
    --shadow-lg:0 12px 40px rgb(0 0 0 / .45);
  }
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-font-smoothing:antialiased; }
body {
  min-height:100dvh; font-family:var(--body); font-size:var(--t-base);
  color:var(--text); background:var(--bg); line-height:1.6;
}
img { display:block; max-width:100%; height:auto; }
button { cursor:pointer; background:none; border:none; font:inherit; color:inherit; }
input { font:inherit; color:inherit; }
h1,h2,h3 { text-wrap:balance; line-height:1.2; }
p,li { text-wrap:pretty; }
:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:var(--r-md); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

main { max-width:760px; margin:0 auto; padding:var(--s10) var(--s6) var(--s16); }
.hero { text-align:center; margin-bottom:var(--s10); }
.wordmark {
  font-family:var(--display); font-size:var(--t-sm); letter-spacing:.22em;
  text-transform:uppercase; color:var(--primary); margin-bottom:var(--s4);
}
.hero h1 { font-family:var(--display); font-size:var(--t-xl); font-weight:400; margin-bottom:var(--s3); }
.hero h1 em { color:var(--primary); font-style:italic; }
.hero p { font-size:var(--t-sm); color:var(--muted); max-width:52ch; margin:0 auto; }

.screen { display:none; }
.screen.active { display:block; animation:fade .35s cubic-bezier(.16,1,.3,1); }
@keyframes fade { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

.dropzone {
  border:2px dashed var(--border); border-radius:var(--r-2xl); background:var(--surface);
  padding:var(--s12) var(--s6); text-align:center; cursor:pointer; position:relative;
  transition:border-color var(--t), background var(--t), box-shadow var(--t);
}
.dropzone:hover,.dropzone:focus-visible,.dropzone.dragging {
  border-color:var(--primary); background:var(--primary-subtle); box-shadow:var(--shadow-md);
}
.dropzone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.dz-icon {
  width:56px; height:56px; margin:0 auto var(--s4); border-radius:var(--r-full);
  background:var(--primary-highlight); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.dropzone h2 { font-size:var(--t-lg); font-weight:500; margin-bottom:var(--s2); }
.dropzone p { font-size:var(--t-sm); color:var(--muted); }
.dz-hint { margin-top:var(--s4); font-size:var(--t-xs); color:var(--faint); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:var(--s3) var(--s6); border-radius:var(--r-md);
  font-size:var(--t-sm); font-weight:500;
  transition:background var(--t), transform var(--t), box-shadow var(--t);
}
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); box-shadow:var(--shadow-sm); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.btn-ghost { border:1px solid var(--border); background:var(--surface); color:var(--muted); }
.btn-ghost:hover { border-color:var(--muted); color:var(--text); }

.preview { display:flex; flex-direction:column; align-items:center; gap:var(--s6); }
.preview img {
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  max-height:360px; width:auto; background:var(--offset);
}
.controls { display:flex; gap:var(--s3); flex-wrap:wrap; justify-content:center; }

.loading { text-align:center; padding:var(--s16) var(--s6); }
.leaf { color:var(--primary); animation:spin 2s ease-in-out infinite; margin:0 auto var(--s6); }
@keyframes spin {
  0%{transform:rotate(0) scale(1);opacity:.7} 50%{transform:rotate(180deg) scale(1.1);opacity:1}
  100%{transform:rotate(360deg) scale(1);opacity:.7}
}
.loading p { font-family:var(--display); font-size:var(--t-lg); color:var(--muted); }

.card {
  background:var(--surface); border:1px solid var(--divider); border-radius:var(--r-2xl);
  overflow:hidden; box-shadow:var(--shadow-lg);
}
.card-head { display:grid; grid-template-columns:1fr 1fr; }
.card-photo { background:var(--offset); min-height:220px; }
.card-photo img { width:100%; height:100%; object-fit:cover; }
.card-id { padding:var(--s6); display:flex; flex-direction:column; justify-content:center; gap:var(--s2); }
.plant-name { font-family:var(--display); font-size:var(--t-lg); font-weight:500; }
.plant-sci { font-family:var(--display); font-style:italic; color:var(--primary); font-size:var(--t-sm); }
.plant-family { font-size:var(--t-xs); color:var(--faint); }
.tags { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s1); }

.sections { padding:var(--s6); display:flex; flex-direction:column; gap:var(--s6); }
.section-title {
  font-size:var(--t-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); margin-bottom:var(--s3);
}
.tag {
  display:inline-flex; align-items:center; gap:var(--s1); padding:var(--s1) var(--s3);
  border-radius:var(--r-full); font-size:var(--t-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
}
.tag-high { background:var(--success-highlight); color:var(--success); }
.tag-medium { background:var(--accent-highlight); color:var(--accent); }
.tag-low { background:var(--error-highlight); color:var(--error); }
.tag-neutral { background:var(--offset); color:var(--muted); }

.prose { font-size:var(--t-sm); color:var(--muted); }
.prose + .prose { margin-top:var(--s2); }

.care { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); }
.care-item {
  border:1px solid var(--divider); border-radius:var(--r-lg);
  background:var(--surface-2); padding:var(--s4);
}
.care-label {
  display:flex; align-items:center; gap:var(--s2);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--primary); margin-bottom:var(--s2);
}
.care-item p { font-size:var(--t-sm); }

.alt { border:1px solid var(--divider); border-radius:var(--r-lg); background:var(--surface-2); padding:var(--s4); }
.alt + .alt { margin-top:var(--s3); }
.alt-head { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s2); }
.alt-name { font-weight:600; font-size:var(--t-sm); }
.alt-sci { font-family:var(--display); font-style:italic; color:var(--muted); font-size:var(--t-sm); }
.alt p { font-size:var(--t-sm); }
.alt p b { color:var(--muted); font-weight:500; }

.facts { list-style:none; display:flex; flex-direction:column; gap:var(--s2); }
.facts li { position:relative; padding-left:var(--s5); font-size:var(--t-sm); }
.facts li::before { content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; border-radius:var(--r-full); background:var(--primary); }

.safety { display:flex; flex-wrap:wrap; gap:var(--s3); }
.safety-item {
  flex:1 1 180px; border:1px solid var(--divider); border-radius:var(--r-lg);
  background:var(--surface-2); padding:var(--s4);
}
.safety-item .care-label { color:var(--faint); }
.safety-note { font-size:var(--t-sm); color:var(--muted); margin-top:var(--s3); }

.note {
  display:flex; gap:var(--s3); padding:var(--s4); border-radius:var(--r-lg);
  background:var(--accent-highlight); border:1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  font-size:var(--t-sm);
}
.note.bad { background:var(--error-highlight); border-color:color-mix(in oklab, var(--error) 30%, transparent); }
.note svg { flex-shrink:0; margin-top:2px; }
.note b { display:block; margin-bottom:var(--s1); }
.note ul { margin:var(--s2) 0 0 var(--s4); }

.errorbox {
  background:var(--error-highlight); border:1px solid color-mix(in oklab, var(--error) 30%, transparent);
  border-radius:var(--r-xl); padding:var(--s8); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
}
.errorbox h3 { font-size:var(--t-lg); }
.errorbox p { font-size:var(--t-sm); color:var(--muted); max-width:44ch; }

footer {
  text-align:center; padding:var(--s8) var(--s6); font-size:var(--t-xs); color:var(--faint);
  border-top:1px solid var(--divider); max-width:760px; margin:0 auto;
}
footer p + p { margin-top:var(--s2); }

@media (max-width:640px) {
  main { padding:var(--s6) var(--s4) var(--s12); }
  .card-head { grid-template-columns:1fr; }
  .card-photo { max-height:240px; }
  .care { grid-template-columns:1fr; }
}