:root {
  --bg: #f7f4ec;
  --paper: #fffdf8;
  --ink: #1f2a22;
  --muted: #5d6b60;
  --line: #e3ddcf;
  --green: #2f5d3a;
  --green-2: #4a7c55;
  --green-soft: #e4ede2;
  --ok: #2f6d3f;   --ok-bg: #e3f0e4;
  --info: #2b5878; --info-bg: #e2ecf3;
  --warn: #8a5a12; --warn-bg: #f6ead3;
  --danger: #9b2f2a; --danger-bg: #f6e0dd;
  --shadow: 0 1px 2px rgba(31, 42, 34, .06), 0 4px 16px rgba(31, 42, 34, .06);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141a16; --paper: #1b231e; --ink: #e8ece6; --muted: #a3b0a6; --line: #2d3830;
    --green: #8fc29a; --green-2: #a9d3b2; --green-soft: #223026;
    --ok: #9fd3aa; --ok-bg: #1f3325; --info: #9cc3e0; --info-bg: #1d2c38;
    --warn: #e6c07e; --warn-bg: #3a2e17; --danger: #f0a29b; --danger-bg: #3d2220;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141a16; --paper: #1b231e; --ink: #e8ece6; --muted: #a3b0a6; --line: #2d3830;
  --green: #8fc29a; --green-2: #a9d3b2; --green-soft: #223026;
  --ok: #9fd3aa; --ok-bg: #1f3325; --info: #9cc3e0; --info-bg: #1d2c38;
  --warn: #e6c07e; --warn-bg: #3a2e17; --danger: #f0a29b; --danger-bg: #3d2220;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); }
a { color: var(--green); }
img { max-width: 100%; height: auto; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* fejléc */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1180px; margin: 0 auto; padding: 14px 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--green);
  font: 600 18px/1.2 var(--serif); }
.brand em { font-style: normal; font-weight: 400; color: var(--muted); }
.site-head nav { display: flex; gap: 18px; }
.site-head nav a { text-decoration: none; color: var(--muted); font-weight: 500; }
.site-head nav a:hover { color: var(--green); }

/* nyitó */
.hero { background: radial-gradient(1200px 400px at 80% -10%, var(--green-soft), transparent), var(--bg);
  border-bottom: 1px solid var(--line); }
.hero-in { max-width: 820px; margin: 0 auto; padding: 48px 16px 40px; text-align: center; }
.kicker { margin: 0 0 6px; color: var(--green-2); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
h1 { font: 600 clamp(32px, 6vw, 54px)/1.08 var(--serif); margin: 0 0 12px; letter-spacing: -.01em; }
.lead { color: var(--muted); font-size: 18px; margin: 0 auto 26px; max-width: 640px; }
.search { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 8px 6px 18px; box-shadow: var(--shadow); max-width: 620px; margin: 0 auto; color: var(--muted); }
.search:focus-within { border-color: var(--green-2); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink);
  font: 17px var(--sans); padding: 10px 4px; }

/* szűrők */
.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; margin: 28px 0 14px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
select { width: 100%; font: 15px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; }
button { font: inherit; cursor: pointer; }
.ghost { background: transparent; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--muted); }
.ghost:hover { color: var(--green); border-color: var(--green-2); }
.link { background: none; border: 0; color: var(--green); text-decoration: underline; padding: 0; }
.pikto-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pf { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; padding: 6px 12px; font-size: 14px; color: var(--muted); }
.pf[aria-pressed="true"] { border-color: currentColor; }
.pf.pk-ok[aria-pressed="true"] { color: var(--ok); background: var(--ok-bg); }
.pf.pk-info[aria-pressed="true"] { color: var(--info); background: var(--info-bg); }
.pf.pk-warn[aria-pressed="true"] { color: var(--warn); background: var(--warn-bg); }
.pf.pk-danger[aria-pressed="true"] { color: var(--danger); background: var(--danger-bg); }
.abc { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.abc button { min-width: 34px; height: 34px; border: 1px solid transparent; background: transparent; border-radius: 8px;
  color: var(--muted); font-weight: 600; }
.abc button:hover { border-color: var(--line); color: var(--green); }
.abc button.on { background: var(--green); color: var(--paper); }
.count { color: var(--muted); font-size: 14px; margin: 6px 0 14px; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* kártyák */
.grid { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.card a { display: flex; flex-direction: column; height: 100%; background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.card a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.thumb { aspect-ratio: 4 / 3; background: var(--green-soft); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.noimg { height: 100%; display: grid; place-items: center; color: var(--green-2); opacity: .5; }
.cbody { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cbody h3 { margin: 0; font: 600 18px/1.25 var(--serif); }
.lat { margin: 0; font-style: italic; color: var(--muted); font-size: 14px; }
.pks { display: flex; gap: 4px; margin-top: auto; padding-top: 8px; }
.pk { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.pk-ok { color: var(--ok); } .pk.pk-ok { background: var(--ok-bg); }
.pk-info { color: var(--info); } .pk.pk-info { background: var(--info-bg); }
.pk-warn { color: var(--warn); } .pk.pk-warn { background: var(--warn-bg); }
.pk-danger { color: var(--danger); } .pk.pk-danger { background: var(--danger-bg); }

/* adatlap */
.plant { padding-bottom: 56px; }
.crumb { font-size: 14px; color: var(--muted); margin: 16px 0 22px; }
.crumb a { text-decoration: none; }
.phead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
.latin { font: italic 20px/1.4 var(--serif); color: var(--muted); margin: 0 0 16px; }
.summary { font-size: 18px; margin: 0 0 20px; }
.names { margin: 0 0 20px; display: grid; gap: 6px; }
.names div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.names dt { color: var(--muted); font-size: 14px; }
.names dd { margin: 0; }
.pikto { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pikto li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
.pikto li .ico { flex: none; padding: 5px; width: 30px; height: 30px; border-radius: 50%; }
.pikto li.pk-ok .ico { color: var(--ok); background: var(--ok-bg); }
.pikto li.pk-info .ico { color: var(--info); background: var(--info-bg); }
.pikto li.pk-warn .ico { color: var(--warn); background: var(--warn-bg); }
.pikto li.pk-danger .ico { color: var(--danger); background: var(--danger-bg); }
.gallery { margin: 0; position: sticky; top: 16px; }
.gmain { display: block; border-radius: 14px; overflow: hidden; background: var(--green-soft); box-shadow: var(--shadow); }
.gmain img { width: 100%; max-height: 70vh; object-fit: contain; background: #0001; }
.gthumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.gt { flex: none; width: 84px; height: 63px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; }
.gt img { width: 100%; height: 100%; object-fit: cover; }
.gt.on { border-color: var(--green); }
.tagbox { margin: 36px 0 8px; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 14px; }
.tagrow h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { background: var(--green-soft); color: var(--green); border-radius: 999px; padding: 3px 12px; font-size: 14px; }
.secs { columns: 2 360px; column-gap: 40px; margin-top: 28px; }
.sec { break-inside: avoid; margin: 0 0 22px; }
.sec h2 { font: 600 19px/1.3 var(--serif); margin: 0 0 4px; color: var(--green); }
.sec p { margin: 0; }
.warnbox { background: var(--warn-bg); border-radius: 12px; padding: 14px 16px; }
.warnbox h2 { color: var(--warn); }
.pn { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.pn a { text-decoration: none; font-weight: 500; }

.prose { max-width: 760px; padding-top: 24px; padding-bottom: 56px; }
.prose h2 { font: 600 22px var(--serif); color: var(--green); margin-top: 28px; }
.legend { margin-top: 8px; }

.site-foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.site-foot p { max-width: 1180px; margin: 0 auto; padding: 22px 16px 32px; }

@media (max-width: 860px) {
  .filters { grid-template-columns: 1fr 1fr; }
  .phead { grid-template-columns: 1fr; gap: 20px; }
  .gallery { position: static; order: -1; }
}
@media (max-width: 520px) {
  .filters { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cbody h3 { font-size: 16px; }
  .site-head nav { gap: 12px; font-size: 14px; }
  .brand em { display: none; }
  .hero-in { padding: 32px 16px 28px; }
  .names div { grid-template-columns: 1fr; gap: 0; }
}
.gepi { margin-left: 8px; padding: 1px 8px; border-radius: 999px; border: 1px dashed var(--warn);
  color: var(--warn); font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 500; cursor: help; }