:root { --bg:#f7f4ec; --paper:#fffdf8; --ink:#2a261f; --muted:#6f685f; --line:#dfd6c8; --accent:#4f6f3a; --warn:#8a3d2f; }
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.site-header { padding:28px clamp(16px, 4vw, 52px); background:#29361f; color:#fff; }
.site-title { display:block; color:#fff; font-size:clamp(1.6rem, 3vw, 2.6rem); font-weight:800; letter-spacing:.02em; }
.site-header p { margin:.25rem 0 0; color:#e8eadf; }
.nav { display:flex; gap:10px; flex-wrap:wrap; padding:12px clamp(16px, 4vw, 52px); border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:2; }
.nav a { padding:7px 10px; border-radius:999px; color:var(--ink); }
.nav a.active, .nav a:hover { background:#e4ecd9; text-decoration:none; }
main { max-width:1180px; margin:0 auto; padding:28px clamp(16px, 3vw, 32px); }
footer { max-width:1180px; margin:20px auto 0; padding:24px clamp(16px, 3vw, 32px); color:var(--muted); border-top:1px solid var(--line); }
.hero { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:24px; margin-bottom:22px; box-shadow:0 8px 20px rgba(0,0,0,.04); }
.hero h1 { margin:0 0 8px; font-size:clamp(2rem, 5vw, 3.5rem); line-height:1.05; }
.stat-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.stat { background:#f1eadc; border-radius:16px; padding:12px 16px; min-width:130px; }
.stat strong { display:block; font-size:1.6rem; }
.searchbar { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:14px; font-size:1rem; margin:0 0 18px; background:var(--paper); }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:18px; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.04); }
.card img, .no-photo { width:100%; aspect-ratio:4 / 3; object-fit:cover; display:block; background:#ded8ca; }
.no-photo { display:grid; place-items:center; color:var(--muted); }
.card-body { padding:14px; }
.plant-id { color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; margin:0 0 4px; }
.card h3 { margin:0; font-size:1.1rem; }
.sci { margin:.25rem 0 .6rem; color:var(--muted); }
.sci.large { font-size:1.35rem; }
.badges { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.badges span { background:#e9eddc; border:1px solid #d7dec6; color:#354326; border-radius:999px; padding:4px 8px; font-size:.78rem; }
.detail { background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:clamp(18px, 4vw, 34px); box-shadow:0 8px 24px rgba(0,0,0,.05); }
.detail h1 { margin:.1rem 0 0; font-size:clamp(2rem, 5vw, 4rem); line-height:1.05; }
.photo-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin:24px 0; }
.photo-gallery img { width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:16px; border:1px solid var(--line); display:block; }
.meta { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; margin:22px 0; }
.meta div { background:#f5efe4; border-radius:14px; padding:10px 12px; }
dt { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
dd { margin:3px 0 0; font-weight:600; }
.field { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; }
.field h2 { margin:0 0 6px; font-size:1rem; color:#3c4f2b; }
.field p { margin:0; white-space:pre-wrap; }
.warning { border-left:5px solid var(--warn); background:#f8eee9; padding:12px 14px; border-radius:12px; }
@media (max-width: 640px) { .nav { position:static; } }