/* Szálazó — halk, könyves paletta.
   Világos: meleg pergamen, nem élénk. Sötét: mély, kontrasztos, kímélő. */

:root {
  --bg:        #f6f2ea;
  --bg-soft:   #efe9de;
  --card:      #fffdf9;
  --ink:       #2e2a26;
  --ink-soft:  #6b625a;
  --ink-faint: #948a80;
  --line:      #e2d9cb;
  --accent:    #7a5c3e;
  --accent-ink:#fffdf9;
  --warn-bg:   #fbf0dc;
  --warn-line: #e6cfa3;
  --err-bg:    #f9e6e2;
  --err-line:  #e5bdb4;
  --lock-bg:   #efeade;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(60,45,30,.05), 0 4px 14px rgba(60,45,30,.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="vilagos"]) {
    --bg:        #16151a;
    --bg-soft:   #1d1c22;
    --card:      #212027;
    --ink:       #e9e5df;
    --ink-soft:  #a9a29a;
    --ink-faint: #7d766e;
    --line:      #33313a;
    --accent:    #c9a678;
    --accent-ink:#1a181d;
    --warn-bg:   #2c2618;
    --warn-line: #4d4126;
    --err-bg:    #2f1f1d;
    --err-line:  #56332e;
    --lock-bg:   #26242c;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  }
}

/* ugyanaz kézzel választott sötét nézetben */
:root[data-tema="sotet"] {
  --bg:        #16151a;
  --bg-soft:   #1d1c22;
  --card:      #212027;
  --ink:       #e9e5df;
  --ink-soft:  #a9a29a;
  --ink-faint: #7d766e;
  --line:      #33313a;
  --accent:    #c9a678;
  --accent-ink:#1a181d;
  --warn-bg:   #2c2618;
  --warn-line: #4d4126;
  --err-bg:    #2f1f1d;
  --err-line:  #56332e;
  --lock-bg:   #26242c;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: Lora, Georgia, serif; font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.7rem; margin: .2em 0 .5em; }
h2 { font-size: 1.15rem; margin: 0 0 .6em; }
a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
a:hover { text-decoration-color: currentColor; }
code { background: var(--bg-soft); padding: .1em .4em; border-radius: 5px; font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }

/* ---------- keret ---------- */

.topbar { background: var(--card); border-bottom: 1px solid var(--line); }
.topline {
  max-width: 900px; margin: 0 auto; padding: .7rem 1rem;
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
}
.brand {
  display: flex; align-items: center; gap: .5rem;
  font-family: Lora, Georgia, serif; font-weight: 600; font-size: 1.1rem;
  color: var(--ink); text-decoration: none;
}
.brand-ico { font-size: 1.2rem; }
.topright { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.who { color: var(--ink-soft); font-size: .9rem; }

.wrap { max-width: 900px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }

.foot {
  max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem 3rem;
  color: var(--ink-faint); font-size: .82rem; border-top: 1px solid var(--line);
}
.foot p { margin: .3em 0; }

/* ---------- elemek ---------- */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; margin: 0 0 1rem;
  box-shadow: var(--shadow);
}
.card-narrow { max-width: 460px; }
.card-src { background: var(--bg-soft); box-shadow: none; }

.muted { color: var(--ink-soft); }
.tiny  { font-size: .82rem; color: var(--ink-faint); }
.crumb { font-size: .85rem; color: var(--ink-faint); margin: 0 0 .3rem; }
.headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem; border-radius: 9px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); text-decoration: none;
  font: inherit; font-size: .92rem; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-ghost { border-color: transparent; background: transparent; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }

.chip {
  font-size: .8rem; padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none;
}
.chip-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--ink); }

.flash {
  padding: .7rem 1rem; border-radius: 9px; margin-bottom: 1rem;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.flash-error { background: var(--err-bg); border-color: var(--err-line); }
.flash-warn  { background: var(--warn-bg); border-color: var(--warn-line); }

.form { display: grid; gap: .9rem; }
.form label { display: grid; gap: .3rem; font-size: .9rem; color: var(--ink-soft); }
.form input, .form select {
  font: inherit; padding: .55rem .7rem; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.form input:focus, .form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form small { color: var(--ink-faint); font-size: .8rem; }
.form button { justify-self: start; }

/* ---------- kezdőlap ---------- */

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.series h2 { margin-bottom: .2em; }
.series h2 a { color: var(--ink); text-decoration: none; }
.series h2 a:hover { color: var(--accent); }
.pos { margin: .6em 0 .3em; }
.bar { height: 6px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }

.callout {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 9px; padding: .7rem .9rem; margin: .8em 0;
  display: grid; gap: .2rem; font-size: .9rem;
}
.callout span { color: var(--ink-soft); }
.callout-big { padding: 1.2rem; font-size: 1rem; }
.callout-big .btn { justify-self: start; margin-top: .5rem; }
.callout-soft { background: transparent; }

/* ---------- „rejtve" doboz ---------- */

.hidden-note {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--lock-bg); border: 1px dashed var(--line);
  border-radius: 9px; padding: .7rem .9rem; margin: .9em 0; font-size: .9rem;
}
.hidden-note .lock { font-size: 1.1rem; line-height: 1.3; }
.hidden-note strong { display: block; }
.hidden-note span { color: var(--ink-soft); }

/* ---------- szereplők ---------- */

.search { display: flex; gap: .5rem; margin: .8rem 0; }
.search input {
  flex: 1; font: inherit; padding: .55rem .8rem; border-radius: 9px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}

.chars { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.chr {
  display: flex; gap: .7rem; align-items: center; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .7rem;
}
.chr:hover { border-color: var(--accent); }
.chr-main { min-width: 0; }
.chr-nev { display: block; font-weight: 600; }
.chr-sub { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .15rem; }

/* A monogramos jelölőt az avatar váltotta fel — lásd lentebb. */

.tag {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .76rem; color: var(--ink-soft);
  background: var(--bg-soft); border-radius: 999px; padding: .1rem .5rem;
}
.tag i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tag-empty { color: var(--ink-faint); font-style: italic; }

/* ---------- adatlap ---------- */

.chead { display: flex; gap: 1rem; align-items: flex-start; margin: .5rem 0 1.2rem; }
.chead .badge { border-radius: 18px; }
.chead h1 { margin: 0 0 .1em; }
.chead p { margin: .15em 0; }

.conf {
  display: inline-block; margin-left: .4rem; font-size: .72rem;
  padding: .05rem .45rem; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-faint);
}
.conf-becsult { background: var(--warn-bg); color: var(--ink-soft); }

.fingerprint { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: .6rem; }
.fp { display: flex; align-items: center; gap: .5rem; }
.fp .sw { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); }
.fp .ico { font-size: 1.1rem; width: 26px; text-align: center; }

.rels { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.rels li { display: flex; gap: .4rem; }
.rel-kind { color: var(--ink-soft); min-width: 6.5em; }

.stmt { padding: .5rem 0; border-top: 1px solid var(--line); }
.stmt:first-of-type { border-top: 0; }
.stmt p { margin: 0 0 .2em; }

.src { list-style: none; padding: 0; margin: 0; font-size: .85rem; display: grid; gap: .3rem; }
.src li { color: var(--ink-soft); }

@media (max-width: 480px) {
  h1 { font-size: 1.4rem; }
  .chars { grid-template-columns: 1fr; }
  .chead .avlink .badge { width: 72px !important; height: 72px !important; }
}

/* ---------- avatar ---------- */

.badge {
  position: relative; flex: 0 0 auto;
  display: block; overflow: hidden; border-radius: 12px;
  background: var(--bg-soft);
  line-height: 0;
}
.badge svg { display: block; width: 100%; height: 100%; }
/* akinek SAJÁT, mentett arca van, azt egy halk keret jelzi */
.badge-sajat { box-shadow: 0 0 0 2px var(--accent); }

.avlink { position: relative; display: block; text-decoration: none; flex: 0 0 auto; }
.avlink-cta {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  font-size: .7rem; white-space: nowrap;
  background: var(--accent); color: var(--accent-ink);
  padding: .1rem .5rem; border-radius: 999px;
  opacity: 0; transition: opacity .12s;
}
.avlink:hover .avlink-cta, .avlink:focus-visible .avlink-cta { opacity: 1; }

/* --- építő --- */

.avbuild { display: grid; gap: 1.2rem; grid-template-columns: 220px 1fr; align-items: start; }
.avpreview {
  position: sticky; top: 1rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; text-align: center;
  box-shadow: var(--shadow);
}
.avpreview img { border-radius: 18px; background: var(--bg-soft); max-width: 100%; height: auto; }
.avactions { display: grid; gap: .4rem; margin-top: .8rem; }

.avpanels { display: grid; gap: 1rem; }
.avgrp {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem .9rem;
}
.avgrp h2 { font-size: .95rem; margin: 0 0 .5rem; }
.avrow { display: flex; flex-wrap: wrap; gap: .45rem; }

.avopt {
  width: 56px; height: 56px; padding: 0; cursor: pointer;
  border: 2px solid var(--line); border-radius: 11px;
  background: var(--bg-soft); overflow: hidden; line-height: 0;
}
.avopt svg { display: block; width: 100%; height: 100%; }
.avopt:hover { border-color: var(--ink-faint); }
.avopt.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }

.avsw {
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 2px solid var(--line); border-radius: 50%;
}
.avsw:hover { border-color: var(--ink-faint); }
.avsw.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.avsw[data-ures] {
  background-image: linear-gradient(45deg, transparent 44%, var(--ink-faint) 44%,
                    var(--ink-faint) 56%, transparent 56%);
}

@media (max-width: 640px) {
  .avbuild { grid-template-columns: 1fr; }
  .avpreview { position: static; }
  .avpreview img { width: 160px; height: 160px; }
  .avopt { width: 50px; height: 50px; }
}

/* ---------- beágyazott képek ---------- */

.kepek { display: flex; flex-wrap: wrap; gap: .8rem; margin: .6rem 0; }
.kepdoboz { margin: 0; max-width: 240px; }
.kepek-kicsi .kepdoboz { max-width: 150px; }
.kepdoboz img.beagy {
  display: block; width: 100%; height: auto; border-radius: 10px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.kepdoboz figcaption {
  display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; margin-top: .25rem; color: var(--ink-faint);
}
.kepdoboz figcaption form { margin: 0; }
.kepdoboz figcaption .btn { padding: .1rem .4rem; font-size: .78rem; }

/* ha a forrásnál eltűnt a kép, ne törött ikon maradjon */
.kep-hiba-uzenet { display: none; font-size: .8rem; color: var(--ink-faint);
  background: var(--bg-soft); border: 1px dashed var(--line);
  border-radius: 10px; padding: 1.2rem .8rem; text-align: center; }
.kepdoboz.kep-hibas img.beagy { display: none; }
.kepdoboz.kep-hibas .kep-hiba-uzenet { display: block; }

/* ---------- könyvborítók ---------- */

.borito {
  display: block; height: auto; border-radius: 6px;
  background: var(--bg-soft); border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(60,45,30,.12);
}
.borito-hibas { visibility: hidden; }
.borito-ures {
  display: grid; place-items: center; aspect-ratio: 2/3;
  font-family: Lora, Georgia, serif; font-size: 1.6rem;
  color: var(--ink-faint); background: var(--bg-soft);
  border: 1px dashed var(--line); border-radius: 6px;
}

/* borítósor a sorozatnál */
.boritosor { display: flex; gap: .5rem; flex-wrap: wrap; margin: .7rem 0; }
.boritosor .kot { text-align: center; width: 62px; }
.boritosor .kot .borito { width: 62px; }
.boritosor .kot small { display: block; font-size: .7rem; color: var(--ink-faint); margin-top: .2rem; }
/* ameddig eljutottál: teljes fény; ami még hátra van: halvány */
.boritosor .kot.jovo .borito, .boritosor .kot.jovo .borito-ures { opacity: .32; filter: grayscale(.6); }
.boritosor .kot.itt .borito, .boritosor .kot.itt .borito-ures { outline: 3px solid var(--accent); outline-offset: 2px; }

/* a kezdőlap sorozat-kártyáján */
.series { display: flex; gap: .9rem; align-items: flex-start; }
.series .borito, .series .borito-ures { width: 76px; flex: 0 0 auto; }
.series-torzs { min-width: 0; flex: 1; }

/* borítós kötetválasztó a „hol tartasz" oldalon */
.kotetvalaszto { display: flex; flex-wrap: wrap; gap: .6rem; margin: .3rem 0 .2rem; }
.kotetvalaszto button {
  width: 84px; padding: .3rem; cursor: pointer; background: var(--card);
  border: 2px solid var(--line); border-radius: 9px; font: inherit; color: var(--ink);
}
.kotetvalaszto button .borito, .kotetvalaszto button .borito-ures { width: 100%; }
.kotetvalaszto button small { display: block; font-size: .68rem; color: var(--ink-faint); margin-top: .25rem; }
.kotetvalaszto button:hover { border-color: var(--ink-faint); }
.kotetvalaszto button.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.mezocimke { display: block; font-size: .9rem; color: var(--ink-soft); margin-bottom: .3rem; }

/* valódi kép a jelölőben (az avatar helyett) */
.badge-kep img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit;
}
.badge-kep { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- borító-szerkesztő ---------- */

.boritok-szerk { display: grid; gap: .8rem; }
.bszerk { display: flex; gap: 1rem; align-items: flex-start; }
.bszerk-kep { flex: 0 0 auto; text-align: center; width: 110px; }
.bszerk-kep small { display: block; margin-top: .3rem; word-break: break-all; }
.bszerk-torzs { flex: 1; min-width: 0; }
.bszerk-torzs h2 { margin: 0 0 .1em; font-size: 1.05rem; }
.bszerk-form { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.bszerk-form input {
  flex: 1 1 260px; font: inherit; padding: .5rem .7rem; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}

/* a „borítók" gomb a kötetsor végén */
.kot-szerk {
  display: grid; place-items: center; align-content: center;
  width: 62px; min-height: 93px; text-decoration: none;
  border: 1px dashed var(--line); border-radius: 6px; color: var(--ink-faint);
}
.kot-szerk:hover { border-color: var(--accent); color: var(--accent); }
.kot-szerk span { font-size: 1.2rem; }

@media (max-width: 560px) {
  .bszerk { flex-direction: column; align-items: stretch; }
  .bszerk-kep { width: 90px; }
}

/* ---------- kötetenkénti olvasottság ---------- */

.kotlista { display: grid; gap: .7rem; }
.kotsor {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem .9rem;
}
.kotsor-kesz    { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.kotsor-olvasom { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.kotsor-nem .kotsor-kep { opacity: .45; filter: grayscale(.5); }

.kotsor-kep { flex: 0 0 auto; }
.kotsor-torzs { flex: 1; min-width: 0; }
.kotsor-torzs h2 { margin: 0 0 .5em; font-size: 1rem; }
.kotsor .idaig { flex: 0 0 auto; align-self: center; white-space: nowrap; }

.allapotok { display: flex; gap: .4rem; flex-wrap: wrap; }
.allapot {
  display: inline-flex; align-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .25rem .7rem; font-size: .88rem; color: var(--ink-soft);
}
.allapot input { position: absolute; opacity: 0; width: 0; height: 0; }
.allapot:hover { border-color: var(--ink-faint); }
.allapot.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.fejezetmezo { margin-top: .6rem; max-width: 260px; }
.fejezetmezo label { display: grid; gap: .25rem; font-size: .85rem; color: var(--ink-soft); }
.fejezetmezo input {
  font: inherit; padding: .4rem .6rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}

@media (max-width: 560px) {
  .kotsor { flex-wrap: wrap; }
  .kotsor .idaig { width: 100%; margin-top: .4rem; }
}

/* ---------- kapcsolatok: érvényes és megdőlt állítások ---------- */

.rel-honnan { margin-left: .4rem; opacity: .7; }
.korabbi { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.korabbi summary { cursor: pointer; color: var(--ink-soft); font-size: .9rem; }
.korabbi summary:hover { color: var(--accent); }
.rels-regi { margin-top: .5rem; opacity: .75; }
.rels-regi s { color: var(--ink-faint); }

/* ---------- kapcsolat-szerkesztő ---------- */

.kapcs-lanc { display: grid; gap: .5rem; margin: .6rem 0; }
.kapcs-elem {
  display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 9px; padding: .5rem .7rem; font-size: .92rem;
}
.kapcs-elem.megdolt { opacity: .6; }
.kapcs-elem.megdolt .kapcs-cel { text-decoration: line-through; }
.kapcs-cel { font-weight: 600; }
.kapcs-honnan { color: var(--ink-faint); font-size: .82rem; }
.kapcs-nyil { color: var(--ink-faint); }
.kapcs-elem form { margin: 0 0 0 auto; }
.cimform { margin-bottom: .4rem; }
.cimform input { flex: 1 1 180px; }

/* ---------- kézi felvitel ---------- */

.ujkotetek { display: grid; gap: .45rem; margin: .6rem 0; }
.ujkotet { display: flex; gap: .45rem; align-items: center; }
.ujkotet .sorszam { width: 1.8rem; color: var(--ink-faint); font-size: .9rem; text-align: right; }
.ujkotet input {
  flex: 1; font: inherit; padding: .45rem .6rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.ujkotet input.ev, .nevsor input.ev { flex: 0 0 5.5rem; }

/* ---------- névszerkesztő ---------- */

.nevlista { display: grid; gap: .45rem; }
.nevsor { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0; }
.nevsor input, .nevsor select {
  font: inherit; font-size: .9rem; padding: .35rem .5rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.nevsor input[name=nev] { flex: 1 1 12rem; }
.nevsor .btn { padding: .3rem .6rem; }

/* ---------- kötet-oldal: események ---------- */

.esemenyek { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .7rem; }
.esemeny {
  position: relative; padding: .7rem .9rem;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px;
}
.esemeny-fej { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.esemeny-fajta { font-size: .85rem; color: var(--ink-soft); }
.esemeny-leiras { margin: .4rem 0 0; }
.esemeny-torles { position: absolute; top: .4rem; right: .4rem; margin: 0; }

/* ---------- hozzászólások ---------- */

.hszlista { display: grid; gap: .6rem; margin-top: .6rem; }
.hsz { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px; padding: .6rem .8rem; }
.hsz-fej { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.hsz-fej form { margin: 0 0 0 auto; }
.hsz p { margin: .3rem 0 0; }
.form textarea {
  font: inherit; padding: .55rem .7rem; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); resize: vertical;
}

/* ---------- profil ---------- */

.szintfej { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.szintnev { font-family: Lora, Georgia, serif; font-weight: 600; font-size: 1.3rem; margin-right: .5rem; }
.szamlalok { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 1rem 0 .6rem; }
.szamlalo { text-align: center; }
.szamlalo strong { display: block; font-size: 1.5rem; font-family: Lora, Georgia, serif; }
.szamlalo span { font-size: .8rem; color: var(--ink-faint); }

.jelvenyek { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.jelveny {
  display: flex; gap: .7rem; align-items: center;
  border: 1px solid var(--line); border-radius: 9px; padding: .55rem .7rem;
  opacity: .45;
}
.jelveny.megvan { opacity: 1; border-color: var(--accent); background: var(--bg-soft); }
.jelveny .jel { font-size: 1.5rem; }
.jelveny strong { display: block; font-size: .92rem; }
.jelveny span.tiny { display: block; }

/* --- esemény-szereplők (kötet-oldal) --- */
.esemeny-szereplok { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: center; }
.esemeny-szereplo { display: inline-flex; align-items: center; gap: .15rem; }
.esemeny-szereplo form.inline { display: inline; }
.esemeny-szereplo-uj { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.esemeny-szereplo-uj input { flex: 1 1 8rem; min-width: 0; padding: .3rem .5rem; font-size: .85rem; }

/* --- hiánypótló tábla --- */
.hianyzo-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.hianyzo-tabla th { text-align: left; font-weight: 600; opacity: .6; font-size: .8rem;
                    padding: .3rem .5rem; border-bottom: 1px solid var(--vonal); }
.hianyzo-tabla td { padding: .35rem .5rem; border-bottom: 1px solid var(--vonal); vertical-align: middle; }
.hianyzo-tabla select { max-width: 18rem; }
.hianyzo-tabla .ev { width: 4rem; }
.hidden-note-warn { border-color: #a8742a; }

/* --- monogram-jelölő ---
   A rajzolt avatarok helyére került. Szándékosan halk: nem állít semmit
   arról, hogy néz ki a szereplő, csak megtartja a sor helyét. */
.badge-mono {
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  background: var(--bg-soft);
  color: var(--szoveg);
  opacity: .55;
  font-weight: 600;
  letter-spacing: .02em;
  user-select: none;
}

/* --- takarító lista --- */
.takarit-lista { display: flex; flex-direction: column; gap: .1rem; }
.takarit-sor { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
               padding: .35rem .5rem; border-radius: 8px; cursor: pointer; }
.takarit-sor:hover { background: var(--bg-soft); }
.takarit-sor input { flex: 0 0 auto; }
.takarit-nev { font-weight: 600; }
.takarit-sor .warn { color: #d08a2a; font-weight: 600; }

/* --- családfa: a régi, vonal nélküli nézet HELYÉT lásd a fájl végén ---
   ⚠ AZ EREDETI DÖNTÉS: „szándékosan nem rajzolunk összekötő vonalakat:
   a rejtett rokonok miatt a fa hiányos lehet, és egy »elvágott« vonal
   többet sugallna, mint amennyit tudunk."
   Ez jó megfontolás volt, de a user 2026-08-28-án rendes fa-rajzot kért,
   és vonal nélkül tényleg nem látszott, ki kitől származik. Az eredeti
   aggály nem veszett el: a rajz KIÍRJA magán, ha hiányos (lásd a
   `fa-hianyos` dobozt) — vagyis a vonal nem állít teljességet.
   A dobozok stílusa a fájl végén, a fa-rajznál van. */

/* --- módosítási kérvények --- */
.kerv-lista { display: flex; flex-direction: column; gap: .8rem; }
.kerv { padding: .7rem .9rem; border-radius: 10px; background: var(--bg-soft);
        border-left: 3px solid var(--vonal); }
.kerv-nyitott { border-left-color: #d08a2a; }
.kerv-elfogadva { border-left-color: #4a9d5f; opacity: .8; }
.kerv-elutasitva { border-left-color: var(--vonal); opacity: .6; }
.kerv-fej { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.kerv-fajta { font-size: .74rem; opacity: .6; text-transform: lowercase; }
.kerv-allapot { font-size: .74rem; font-weight: 600; margin-left: auto; }
.kerv-szoveg { margin: .4rem 0 .2rem; font-size: .93rem; }
.kerv-valasz { margin: .4rem 0 .2rem; padding-left: .6rem;
               border-left: 2px solid var(--vonal); font-size: .9rem; }
.kerv-dontes { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.kerv-dontes input { flex: 1 1 12rem; min-width: 0; padding: .3rem .5rem; font-size: .85rem; }
.chip-jelzes { background: #d08a2a; color: #1a1208; font-weight: 600; }
.th-alcim { font-weight: 400; opacity: .7; font-size: .72rem; }

/* --- AI-generált kép jelölése ---
   Szándékosan feltűnő: ez nem apró betűs kitétel, hanem a kép állítását
   minősíti. Aki ránéz, tudja meg, hogy géppel készült. */
.ai-jel {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .5rem .7rem; margin-top: .4rem;
  border-radius: 8px;
  background: rgba(208, 138, 42, .12);
  border: 1px solid rgba(208, 138, 42, .35);
}
.ai-jel-cimke { font-weight: 700; font-size: .82rem; color: #d08a2a; letter-spacing: .01em; }
.ai-jel-szoveg { font-size: .82rem; line-height: 1.45; }
.callout-warn { border-color: rgba(208, 138, 42, .45); }
.badge-ai::after {
  content: "AI"; position: absolute; right: 2px; bottom: 2px;
  font-size: 9px; font-weight: 700; line-height: 1;
  padding: 2px 3px; border-radius: 4px;
  background: rgba(208, 138, 42, .9); color: #1a1208;
}

/* --- jogi oldalak és jelölőnégyzetek --- */
.card-szoveg { max-width: 46rem; line-height: 1.65; }
.card-szoveg h2 { margin: 1.6rem 0 .5rem; font-size: 1.05rem; }
.card-szoveg h2:first-of-type { margin-top: .6rem; }
.card-szoveg ul { margin: .4rem 0 .8rem 1.1rem; }
.card-szoveg li { margin: .25rem 0; }
.card-szoveg p { margin: .5rem 0; }
.adat-tabla { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; font-size: .92rem; }
.adat-tabla th { text-align: left; font-size: .78rem; opacity: .6; padding: .3rem .5rem;
                 border-bottom: 1px solid var(--vonal); }
.adat-tabla td { padding: .5rem; border-bottom: 1px solid var(--vonal); vertical-align: top; }
.adat-tabla td:first-child { width: 30%; }
.kiemelt-cim { font-size: 1.05rem; padding: .6rem .8rem; background: var(--bg-soft);
               border-radius: 8px; text-align: center; }
.jelolo { display: flex; align-items: flex-start; gap: .55rem; font-size: .92rem; line-height: 1.45; }
.jelolo input { flex: 0 0 auto; margin-top: .2rem; }

/* --- visszafordíthatatlan műveletek --- */
.veszelyes { border-color: rgba(190, 70, 60, .4); }
.veszelyes h2 { color: #c0554a; }
.btn-veszelyes { background: #8f3a32; color: #fff; border-color: #8f3a32; }
.btn-veszelyes:hover { background: #a34239; }

/* --- felhasználó-kezelés és napló (admin) --- */
.user-tabla, .naplo-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.user-tabla th { text-align: left; font-size: .78rem; opacity: .6; padding: .4rem .5rem;
                 border-bottom: 1px solid var(--vonal); }
.user-tabla td { padding: .55rem .5rem; border-bottom: 1px solid var(--vonal); vertical-align: top; }
.user-tabla tr.tiltott { opacity: .45; }
.cimke-tiltott { font-size: .7rem; font-weight: 700; color: #c0554a;
                 border: 1px solid #8f3a32; border-radius: 4px; padding: 1px 5px; }
.ok-jel { color: #4a9d5f; font-weight: 700; }
.user-muveletek { display: flex; gap: .3rem; flex-wrap: wrap; }
.inline-form { display: inline; }
.jog-magyarazat dt { font-weight: 600; margin-top: .5rem; }
.jog-magyarazat dd { margin: .1rem 0 0 1rem; font-size: .9rem; opacity: .85; }

.naplo-tabla td { padding: .35rem .5rem; border-bottom: 1px solid var(--vonal); }
.naplo-ido { white-space: nowrap; font-size: .8rem; opacity: .55; width: 8.5rem; }
.naplo-esemeny { white-space: nowrap; width: 11rem; }
.naplo-ki { width: 10rem; }
.naplo-szuro a { text-decoration: none; opacity: .6; }
.naplo-szuro a:hover { opacity: 1; }
.naplo-szuro a.aktiv { opacity: 1; font-weight: 700; color: var(--accent); }
.lapozo { display: flex; gap: 1rem; align-items: center; margin-top: .8rem; }

/* --- személyre szabás --- */
.sz-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; overflow: hidden; border-radius: 50%;
  background: var(--bg-soft); vertical-align: middle;
  line-height: 1; user-select: none;
}
.sz-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sz-avatar-kep { box-shadow: 0 0 0 2px var(--accent); }
.sz-avatar-mono { opacity: .6; font-weight: 600; }
.who .sz-avatar { margin-right: .35rem; }

.kinezet-kep-sor { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.kinezet-elonezet { flex: 0 0 auto; }
.kinezet-kep-vezerlok { flex: 1 1 16rem; display: flex; flex-direction: column; gap: .5rem; }

.jelkep-racs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.jelkep {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
  background: var(--bg-soft); border: 2px solid transparent; font-size: 20px;
}
.jelkep:hover { border-color: var(--vonal); }
.jelkep.valasztott { border-color: var(--accent); background: var(--bg); }
.jelkep input { position: absolute; opacity: 0; width: 0; height: 0; }
.jelkep-nincs { opacity: .4; font-size: 15px; }

.szin-racs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.szin-valto {
  display: flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .4rem .7rem .4rem .5rem; border-radius: 999px;
  background: var(--bg-soft); border: 2px solid transparent; font-size: .88rem;
}
.szin-valto:hover { border-color: var(--vonal); }
.szin-valto.valasztott { border-color: var(--minta); }
.szin-valto input { position: absolute; opacity: 0; width: 0; height: 0; }
.szin-korong { width: 20px; height: 20px; border-radius: 50%; background: var(--minta);
               flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }

.betu-racs { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.betu-valto {
  display: flex; align-items: baseline; gap: .8rem; cursor: pointer;
  padding: .6rem .8rem; border-radius: 10px;
  background: var(--bg-soft); border: 2px solid transparent;
}
.betu-valto:hover { border-color: var(--vonal); }
.betu-valto.valasztott { border-color: var(--accent); }
.betu-valto input { position: absolute; opacity: 0; width: 0; height: 0; }
.betu-minta { opacity: .7; font-size: .95rem; }

/* --- magyarítás --- */
.magyarit-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.magyarit-tabla th { text-align: left; font-size: .78rem; opacity: .6;
                     padding: .3rem .5rem; border-bottom: 1px solid var(--vonal); }
.magyarit-tabla td { padding: .4rem .5rem; border-bottom: 1px solid var(--vonal); }
.magyarit-tabla td:first-child { width: 40%; }
.magyarit-tabla input { width: 100%; padding: .35rem .5rem; }
.magyarit-tabla input.javasolt { border-color: var(--accent); }
.javaslat-jel { color: var(--accent); font-weight: 600; }

/* =====================================================================
   KÖNYVES ARCULAT — 2026-08-28
   =====================================================================

   A user kérése: „sokkal design-osabb, átlátható, ugyanakkor passzoljon
   bele a könyves fantasys stílusba."

   ⚠ A KÉT KÖVETELMÉNY SORRENDJE SZÁMÍT. Az átláthatóság az első: ez az
   oldal arra való, hogy valaki gyorsan megtalálja, ki kicsoda. A díszítés
   csak addig ér valamit, amíg ezt nem lassítja.

   Ezért itt nincs mozgó háttér, nincs áttetsző üveg-hatás, és nincs
   dekoratív betűtípus a folyószövegben. Amit használunk:

     - PAPÍR: nagyon halk textúra, hogy a lap ne legyen steril képernyő
     - TINTA: a címek serif betűvel, ahogy egy könyvben
     - ARANY: egyetlen ékesítő szín, a kiemelésekre
     - GERINC: a kártyák bal széle könyvgerincre emlékeztet

   ⚠ Minden dísz CSS-ből és inline SVG-ből van. Nincs képfájl és nincs
   külső kérés — a betűk is helyben vannak (assets/betuk.css).
   ===================================================================== */

/* ---------- gazdagabb paletta ---------- */

:root {
  /* A pergamen melegebb és mélyebb lett; a tinta kevésbé szürke. */
  --bg:        #f4efe4;
  --bg-soft:   #ebe4d5;
  --card:      #fffcf6;
  --ink:       #2a2521;
  --ink-soft:  #665c52;
  --ink-faint: #8f857a;
  --line:      #ded2bd;

  /* Aranyfüst — a régi könyvek díszítése. Csak vékony vonalakhoz. */
  --arany:     #b08d4f;
  --arany-halk: rgba(176, 141, 79, .22);

  --radius: 14px;
  --shadow:
     0 1px 2px rgba(70, 52, 30, .06),
     0 6px 20px rgba(70, 52, 30, .07);
  --shadow-emelt:
     0 2px 4px rgba(70, 52, 30, .08),
     0 12px 32px rgba(70, 52, 30, .12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="vilagos"]) {
    --bg:        #14131a;
    --bg-soft:   #1b1a22;
    --card:      #1f1e27;
    --ink:       #ece7de;
    --ink-soft:  #aaa197;
    --ink-faint: #7b7269;
    --line:      #322f3c;
    --arany:     #c9a678;
    --arany-halk: rgba(201, 166, 120, .18);
    --shadow:       0 1px 2px rgba(0,0,0,.35), 0 6px 22px rgba(0,0,0,.3);
    --shadow-emelt: 0 2px 6px rgba(0,0,0,.4),  0 14px 36px rgba(0,0,0,.4);
  }
}

/* ugyanaz kézzel választott sötét nézetben */
:root[data-tema="sotet"] {
  --bg:        #14131a;
  --bg-soft:   #1b1a22;
  --card:      #1f1e27;
  --ink:       #ece7de;
  --ink-soft:  #aaa197;
  --ink-faint: #7b7269;
  --line:      #322f3c;
  --arany:     #c9a678;
  --arany-halk: rgba(201, 166, 120, .18);
  --shadow:       0 1px 2px rgba(0,0,0,.35), 0 6px 22px rgba(0,0,0,.3);
  --shadow-emelt: 0 2px 6px rgba(0,0,0,.4),  0 14px 36px rgba(0,0,0,.4);
}

/* ---------- papír ----------
   ⚠ Két nagyon halk gradiens, nem kép: a lap kap egy alig érzékelhető
   mélységet, de a betöltés nem lassul semmivel. */

body {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(900px 500px at 85% 110%, var(--arany-halk), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="vilagos"]) body {
    background:
      radial-gradient(1100px 550px at 12% -8%, rgba(255,255,255,.045), transparent 58%),
      radial-gradient(900px 500px at 88% 108%, var(--arany-halk), transparent 55%),
      var(--bg);
  }
}

/* ugyanaz kézzel választott sötét nézetben */
:root[data-tema="sotet"] body {
  background:
    radial-gradient(1100px 550px at 12% -8%, rgba(255,255,255,.045), transparent 58%),
    radial-gradient(900px 500px at 88% 108%, var(--arany-halk), transparent 55%),
    var(--bg);
}

/* ---------- fejléc: aranyszegély ---------- */

.topbar {
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--arany-halk);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(1.1) blur(6px);
}
.brand { letter-spacing: .01em; }
.brand-ico { filter: saturate(.85); }

/* ---------- kártya: könyvgerinc ----------
   A bal szélen egy vékony aranycsík — mint egy könyv gerince a polcon.
   Halk, hogy ne vonja el a figyelmet a tartalomról. */

.card {
  position: relative;
  border-color: var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg,
      transparent, var(--arany-halk) 15%, var(--arany-halk) 85%, transparent);
}
.card-src::before, .card-szoveg::before { display: none; }

/* ---------- címek: könyvlap-hangulat ---------- */

h1 {
  font-size: 1.85rem; letter-spacing: -.01em;
  margin: .1em 0 .45em;
}
h2 {
  font-size: 1.2rem; letter-spacing: -.005em;
  display: flex; align-items: baseline; gap: .55rem;
}
/* Halk arany vonal a szakaszcímek után — mint egy könyvben a fejezetjel. */
h2::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--arany-halk), transparent);
}

/* ---------- gombok ---------- */

.btn {
  border-radius: 10px;
  transition: border-color .15s, background .15s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
              0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn-primary:hover { filter: brightness(1.06); }

/* ---------- sorozat-kártyák a főoldalon ---------- */

.card.series {
  transition: box-shadow .18s, transform .18s;
}
.card.series:hover {
  box-shadow: var(--shadow-emelt);
  transform: translateY(-1px);
}

/* ---------- könyvespolc: a borítók ----------
   A kötet-csík kapjon polc-érzetet: a borítók alatt egy halk vonal és
   árnyék, mintha polcon állnának. */

.boritosor {
  position: relative;
  padding-bottom: .9rem;
}
.boritosor::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.borito {
  border-radius: 3px 6px 6px 3px;   /* a bal él a gerinc: szűkebb ív */
  box-shadow:
     -1px 0 0 var(--arany-halk) inset,
     0 2px 6px rgba(60,45,30,.18),
     0 8px 18px rgba(60,45,30,.10);
  transition: transform .18s, box-shadow .18s;
}
.borito:hover {
  transform: translateY(-3px) rotate(-.4deg);
  box-shadow: 0 4px 10px rgba(60,45,30,.22), 0 14px 28px rgba(60,45,30,.16);
}

/* ---------- szereplő-kártyák ---------- */

.badge, .sz-avatar { box-shadow: 0 0 0 1px var(--arany-halk); }
.badge-mono { font-family: Lora, Georgia, serif; opacity: .5; }

/* ---------- a spoiler-doboz: pecsét-hangulat ----------
   Ez az oldal legfontosabb üzenete („valamit szándékosan elrejtünk"),
   ezért kap saját, felismerhető formát — de nem harsányat. */

.hidden-note {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--arany) 7%, transparent), transparent),
    var(--lock-bg);
  border: 1px solid var(--arany-halk);
  border-left-width: 3px;
  border-left-color: var(--arany);
}

/* ---------- kiemelt szövegdobozok ---------- */

.callout {
  border-radius: var(--radius);
  border-left-width: 3px;
}
.callout-soft { border-left-color: var(--arany); }

/* ---------- táblázatok: könnyebb szem ---------- */

table tbody tr:hover { background: color-mix(in srgb, var(--arany) 4%, transparent); }

/* ---------- lábjegyzet ---------- */

.foot { border-top-color: var(--arany-halk); }

/* ---------- szűkebb kijelzőn ---------- */

@media (max-width: 640px) {
  h1 { font-size: 1.5rem; }
  .card { border-radius: 12px; }
  .topbar { position: static; }   /* mobilon a ragadós fejléc helyet lopna */
}

/* ---------- akinek zavar a mozgás ----------
   ⚠ Nem díszítés: némelyeknek a mozgás rosszullétet okoz. */

@media (prefers-reduced-motion: reduce) {
  .btn, .borito, .card.series { transition: none; }
  .borito:hover { transform: none; }
}

/* =====================================================================
   ⚠ AMI AZ ELSŐ KÖRBŐL KIMARADT — 2026-08-28
   =====================================================================

   A user visszakérdezett: „Biztos változtak a dolgok?" — és igaza volt.
   Az első réteget a `.card` és a `h2` elemekre írtam, csakhogy a
   szereplő-listán EGYIK SINCS: ott `.chr` kártyák vannak, közvetlenül a
   lapon. Vagyis épp a leggyakrabban nézett oldalon nem látszott semmi.

   Tanulság: a stílust az OLDALON LÉVŐ elemekre kell írni, nem arra, amit
   az ember feltételez. Egy `document.querySelectorAll` kérdés a
   böngészőben megelőzte volna.
   ===================================================================== */

/* ---------- szereplő-kártya: kis kartonlap ----------
   Mint egy régi könyvtári katalóguscédula: enyhén emelkedik, a bal
   szélén finom aranycsík, és felkapja a fejét, ha ráviszed az egeret. */

.chr {
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(70,52,30,.05), 0 3px 10px rgba(70,52,30,.05);
  transition: box-shadow .16s, transform .16s, border-color .16s;
}
.chr::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--arany-halk) 20%,
              var(--arany-halk) 80%, transparent);
}
.chr:hover {
  transform: translateY(-2px);
  border-color: var(--arany);
  box-shadow: 0 3px 8px rgba(70,52,30,.10), 0 10px 24px rgba(70,52,30,.10);
}
.chr:hover::before { background: var(--arany); }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="vilagos"]) .chr { box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 3px 12px rgba(0,0,0,.2); }
  :root:not([data-tema="vilagos"]) .chr:hover { box-shadow: 0 3px 10px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.3); }
}

/* ugyanaz kézzel választott sötét nézetben */
:root[data-tema="sotet"] .chr { box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 3px 12px rgba(0,0,0,.2); }
:root[data-tema="sotet"] .chr:hover { box-shadow: 0 3px 10px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.3); }

/* A név kapjon könyves betűt — ez a kártya lényege. */
.chr-nev { font-family: Lora, Georgia, serif; font-size: 1.02rem; letter-spacing: -.005em; }

/* ---------- a kötet-csík: valódi könyvespolc ---------- */

.kot { transition: transform .16s; }
.kot:hover { transform: translateY(-2px); }

/* A még nem olvasott kötetek halkabbak — de nem tűnnek el. */
.kot.jovo .borito { filter: saturate(.55) brightness(.82); }
.kot.jovo:hover .borito { filter: saturate(.8) brightness(.95); }

/* ---------- keresőmező ---------- */

.search input {
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.search input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--arany) 18%, transparent);
}

/* ---------- fejléc: a cím kapjon aranyat ---------- */

.brand { position: relative; }
.brand::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: linear-gradient(90deg, var(--arany), transparent 85%);
  opacity: .5;
}

/* ---------- a lap első címe: iniciálé-hangulat ----------
   A nagybetűs kezdés és a halk aranyvonal alatta a fejezetnyitó lapokat
   idézi, de nem viszi el a helyet a tartalom elől. */

/* ⚠ NEM `.wrap > h1`: a legtöbb lapon a cím egy .headrow-ban ül, tehát
   nem közvetlen gyereke a .wrap-nak. Az első próbám emiatt nem látszott. */
.wrap h1 {
  position: relative;
  padding-bottom: .35rem;
}
.wrap h1::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 3.2rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--arany), transparent);
}

/* ---------- számláló sor („38 szereplő") ---------- */

.wrap p.muted { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

@media (prefers-reduced-motion: reduce) {
  .chr, .kot, .search input { transition: none; }
  .chr:hover, .kot:hover { transform: none; }
}

/* =====================================================================
   SZÁLAZÓ — 2026-08-28: logó, fiókmenü, rangok, szavazás
   ===================================================================== */

/* ---------- fejléc: vissza-gomb + logó ---------- */

.topline { display: flex; align-items: center; gap: .7rem; }

.vissza {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .34rem .68rem .34rem .5rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink-soft);
  text-decoration: none; font-size: .86rem; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.vissza:hover { border-color: var(--arany); color: var(--ink); }
.vissza-nyil { font-size: 1.15rem; line-height: 1; margin-top: -2px; }
.vissza-cimke { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; }

.brand { display: inline-flex; align-items: center; gap: .5rem; }
.brand-ico { width: 30px; height: 30px; object-fit: contain; }
.brand-nev { font-family: Lora, Georgia, serif; font-size: 1.12rem; letter-spacing: .02em; }

/* ---------- a főoldal logója ---------- */

.fejlogo { text-align: center; margin: .4rem 0 1.6rem; }
.fejlogo img {
  width: min(300px, 62vw); height: auto;
  border-radius: 14px;
  /* ⚠ A logó papíron van, nem átlátszó. Sötét témában ez világos folt
     volna a lapon — ezért kap saját keretet, mint egy bekeretezett
     könyvjegy, és úgy szándékosnak látszik. */
  box-shadow: 0 1px 2px rgba(70,52,30,.10), 0 10px 30px rgba(70,52,30,.14);
}
.fejlogo-mondat {
  margin: .8rem 0 0; color: var(--ink-soft);
  font-family: Lora, Georgia, serif; font-style: italic; font-size: 1.02rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="vilagos"]) .fejlogo img { box-shadow: 0 0 0 1px var(--arany-halk), 0 12px 34px rgba(0,0,0,.5); }
}

/* ugyanaz kézzel választott sötét nézetben */
:root[data-tema="sotet"] .fejlogo img { box-shadow: 0 0 0 1px var(--arany-halk), 0 12px 34px rgba(0,0,0,.5); }

/* ---------- fiókmenü ---------- */

.fiokmenu { position: relative; }
.fiokmenu > summary {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .26rem .5rem .26rem .3rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); cursor: pointer; list-style: none;
  transition: border-color .15s;
}
.fiokmenu > summary::-webkit-details-marker { display: none; }
.fiokmenu > summary:hover { border-color: var(--arany); }
.fiokmenu[open] > summary { border-color: var(--arany); }
.fiokmenu-nev { font-size: .9rem; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
.fiokmenu-nyil { font-size: .7rem; color: var(--ink-faint); }

.fiokmenu-lap {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40;
  width: min(300px, 92vw);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: .9rem;
  box-shadow: var(--shadow-emelt);
}
.fiokmenu-fej { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .7rem; }
.fiokmenu-fej > div { min-width: 0; flex: 1; }
.fiokmenu-rang { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .2rem 0; }

.fiokmenu-sorok { display: flex; flex-direction: column; }
.fiokmenu-sorok a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .55rem; border-radius: 9px;
  color: var(--ink); text-decoration: none; font-size: .93rem;
}
.fiokmenu-sorok a:hover { background: color-mix(in srgb, var(--arany) 10%, transparent); }
.fiokmenu-sorok a > span { flex: 1; }
.fiokmenu-sorok hr { border: 0; border-top: 1px solid var(--line); margin: .4rem 0; }
.fiokmenu-ki { color: var(--ink-soft); }
.fiokmenu-jelzes {
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: 0 .45rem; font-size: .75rem;
}

/* ---------- rangok ---------- */

.rang {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .1rem .5rem .1rem .35rem;
  border-radius: 999px; font-size: .76rem; white-space: nowrap;
  border: 1px solid; line-height: 1.5;
}
.rang-jel { font-size: .9em; }
.rang-nev { font-weight: 600; letter-spacing: .01em; }

/* ⚠ Minden rang saját színt kap, de a SZÖVEG mindig a rang saját sötét
   árnyalata — nem fehér. Egy halvány kitöltésen a fehér betű 2:1 körüli
   kontraszt volna, ami olvashatatlan. */
.rang-szurke { color:#5b5850; border-color:#c9c4b8; background:#e9e6de; }
.rang-zold   { color:#2f5d3a; border-color:#a9cdb4; background:#ddefe2; }
.rang-kek    { color:#2b4d76; border-color:#a8c4e0; background:#dceaf7; }
.rang-turkiz { color:#1f5b5b; border-color:#9ccfcf; background:#d8f0ef; }
.rang-lila   { color:#5a3a72; border-color:#c3a9d6; background:#eee0f6; }
.rang-arany  { color:#7a5a1e; border-color:#d9be7e; background:#f7ecd2; }
.rang-tuz    { color:#8a3d1c; border-color:#e2a985; background:#fbe3d5; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="vilagos"]) .rang-szurke { color:#cfcabf; border-color:#4a4740; background:#2b2a26; }
  :root:not([data-tema="vilagos"]) .rang-zold { color:#a7dcb6; border-color:#31573c; background:#1d2f23; }
  :root:not([data-tema="vilagos"]) .rang-kek { color:#a6cbee; border-color:#2f4c6e; background:#1b2733; }
  :root:not([data-tema="vilagos"]) .rang-turkiz { color:#9fe0dd; border-color:#245c59; background:#152e2d; }
  :root:not([data-tema="vilagos"]) .rang-lila { color:#d5b6e8; border-color:#503663; background:#271c30; }
  :root:not([data-tema="vilagos"]) .rang-arany { color:#e9cd8f; border-color:#6b5426; background:#2e2718; }
  :root:not([data-tema="vilagos"]) .rang-tuz { color:#f0b28e; border-color:#7a4526; background:#33211a; }
}

/* ugyanaz kézzel választott sötét nézetben */
:root[data-tema="sotet"] .rang-szurke { color:#cfcabf; border-color:#4a4740; background:#2b2a26; }
:root[data-tema="sotet"] .rang-zold { color:#a7dcb6; border-color:#31573c; background:#1d2f23; }
:root[data-tema="sotet"] .rang-kek { color:#a6cbee; border-color:#2f4c6e; background:#1b2733; }
:root[data-tema="sotet"] .rang-turkiz { color:#9fe0dd; border-color:#245c59; background:#152e2d; }
:root[data-tema="sotet"] .rang-lila { color:#d5b6e8; border-color:#503663; background:#271c30; }
:root[data-tema="sotet"] .rang-arany { color:#e9cd8f; border-color:#6b5426; background:#2e2718; }
:root[data-tema="sotet"] .rang-tuz { color:#f0b28e; border-color:#7a4526; background:#33211a; }

.rang-sav {
  height: 5px; border-radius: 999px; overflow: hidden;
  background: var(--bg-soft); margin: .35rem 0 .2rem;
}
.rang-sav > i { display: block; height: 100%; background: var(--arany); }

/* ---------- rang-kártya a profilon ---------- */

.rangkartya { position: relative; overflow: hidden; }
.rangkartya::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--arany), transparent 70%);
}
.rangkartya-fej { display: flex; gap: 1rem; align-items: center; }
.rangkartya-jel {
  font-size: 2.4rem; line-height: 1;
  width: 68px; height: 68px; flex: 0 0 68px;
  display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--arany) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--arany-halk);
}
.rangkartya-torzs { flex: 1; min-width: 0; }
.rangkartya-nev {
  display: block; font-family: Lora, Georgia, serif;
  font-size: 1.35rem; letter-spacing: -.01em;
}

/* ---------- jelvények ---------- */

.jelvenyek {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.jelveny {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .75rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card);
  /* ⚠ A meg nem szerzett jelvény HALVÁNY, de nem láthatatlan: pont az a
     lényege, hogy lássam, mit lehet még elérni. */
  opacity: .55; transition: opacity .16s, transform .16s, box-shadow .16s;
}
.jelveny .jel {
  font-size: 1.5rem; line-height: 1;
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-soft); filter: grayscale(1);
}
.jelveny-torzs { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.jelveny-torzs strong { font-size: .95rem; }

.jelveny.megvan { opacity: 1; }
.jelveny.megvan .jel { filter: none; }
.jelveny.megvan:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* A fokozat csak a MEGSZERZETT jelvényen látszik — különben a még el nem
   ért gyémánt jelvény hivalkodóbb volna, mint a megszerzett bronz. */
.jelveny.megvan.jelveny-bronz   .jel { background: linear-gradient(145deg,#e7c9a4,#c99a63); }
.jelveny.megvan.jelveny-ezust   .jel { background: linear-gradient(145deg,#eef0f2,#bfc6cd); }
.jelveny.megvan.jelveny-arany   .jel { background: linear-gradient(145deg,#f7e3b0,#d9b158); }
.jelveny.megvan.jelveny-gyemant .jel { background: linear-gradient(145deg,#dff1fb,#9fd0ea); }
.jelveny.megvan.jelveny-arany   { border-color: #d9be7e; }
.jelveny.megvan.jelveny-gyemant { border-color: #9fd0ea; }

.jelveny-sav {
  height: 4px; border-radius: 999px; background: var(--bg-soft);
  overflow: hidden; margin-top: .3rem;
}
.jelveny-sav > i { display: block; height: 100%; background: var(--arany); }
.jelveny-pipa { font-size: .72rem; color: var(--arany); font-weight: 600; }

/* ---------- kereső / rendezés / nézetváltó ---------- */

.szuro {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin: 0 0 1.1rem;
}
.szuro-kereso { flex: 1 1 240px; min-width: 0; }
.nezetvalto { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.nezetvalto a {
  padding: .42rem .7rem; text-decoration: none; color: var(--ink-soft);
  font-size: 1rem; line-height: 1;
}
.nezetvalto a.aktiv { background: color-mix(in srgb, var(--arany) 16%, transparent); color: var(--ink); }

/* ---------- sorozat-táblázat (listanézet) ---------- */

.sorozat-tabla { width: 100%; border-collapse: collapse; }
.sorozat-tabla th, .sorozat-tabla td {
  padding: .55rem .5rem; border-bottom: 1px solid var(--line); text-align: left;
  vertical-align: middle;
}
.sorozat-tabla th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.sorozat-tabla td.szam { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-borito img { border-radius: 2px 4px 4px 2px; display: block; }
.tabla-cim { font-family: Lora, Georgia, serif; font-weight: 600; text-decoration: none; color: var(--ink); }
.tabla-cim:hover { color: var(--accent); }
.bar-vekony { height: 4px; margin-top: .25rem; }

/* ---------- csillagok és értékelés ---------- */

.ertekeles { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.csillagok { color: var(--arany); letter-spacing: .06em; }
.csillagok-nagy { font-size: 1.2rem; }

.csillagozo { display: inline-flex; align-items: center; gap: .1rem; }
.csillag-gomb {
  background: none; border: 0; cursor: pointer; padding: 0 .06rem;
  font-size: 1.3rem; line-height: 1; color: var(--ink-faint);
  transition: color .12s, transform .12s;
}
.csillag-gomb:hover, .csillag-gomb.aktiv { color: var(--arany); }
.csillag-gomb:hover { transform: scale(1.15); }

/* ---------- hozzászólás-szavazás ---------- */

.hsz { display: flex; gap: .8rem; align-items: flex-start; }
.hsz-torzs { flex: 1; min-width: 0; }
.hsz-fej { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

.hsz-szavazo {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  flex: 0 0 34px; padding-top: .1rem;
}
.szav-gomb {
  background: none; border: 0; cursor: pointer; padding: .1rem .25rem;
  font-size: .85rem; line-height: 1; color: var(--ink-faint); border-radius: 5px;
}
.szav-gomb:hover { color: var(--accent); background: var(--bg-soft); }
.szav-gomb.aktiv { color: var(--accent); }
.szav-tiltva { opacity: .25; cursor: default; }
.szav-tiltva:hover { background: none; color: var(--ink-faint); }
.szav-pont { font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.szav-pont.jo { color: #2f7d4a; }
.szav-pont.rossz { color: #a5432c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="vilagos"]) .szav-pont.jo { color: #7ec99a; }
  :root:not([data-tema="vilagos"]) .szav-pont.rossz { color: #e08d74; }
}

/* ugyanaz kézzel választott sötét nézetben */
:root[data-tema="sotet"] .szav-pont.jo { color: #7ec99a; }
:root[data-tema="sotet"] .szav-pont.rossz { color: #e08d74; }

/* ---------- kérdések és eredmények ---------- */

.kerdes {
  border: 1px solid var(--line); border-radius: 12px;
  padding: .9rem; margin-bottom: .9rem; background: var(--bg-soft);
}
.kerdes-fej { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.kerdes-fej h3 { margin: 0; font-size: 1.03rem; font-family: Lora, Georgia, serif; }

.eredmeny { display: flex; flex-direction: column; gap: .35rem; margin: .6rem 0; }
.eredmeny-sor { display: grid; grid-template-columns: minmax(0,1fr) 40% auto; gap: .5rem; align-items: center; }
.eredmeny-nev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.eredmeny-sav { height: 9px; border-radius: 999px; background: var(--card); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.eredmeny-sav > i { display: block; height: 100%; background: linear-gradient(90deg, var(--arany), color-mix(in srgb, var(--arany) 60%, transparent)); }
.eredmeny-szam { font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.eredmeny-sor.sajat .eredmeny-nev { font-weight: 600; color: var(--accent); }

.szavazo-urlap { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.szavazo-urlap select { flex: 1 1 200px; min-width: 0; }
.uj-kerdes summary { cursor: pointer; color: var(--accent); padding: .4rem 0; }
.valaszok { border: 1px solid var(--line); border-radius: 10px; padding: .7rem; }
.valaszok input { display: block; width: 100%; margin-bottom: .4rem; }

/* ---------- toplista ---------- */

.toplista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.toplista li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.toplista-hely {
  flex: 0 0 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--bg-soft); font-size: .8rem; font-weight: 700;
  color: var(--ink-soft);
}
.toplista-nagy li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.toplista-nagy li:last-child { border-bottom: 0; }
.toplista-torzs { flex: 1; min-width: 0; }
.toplista-cim { font-family: Lora, Georgia, serif; font-weight: 600; text-decoration: none; color: var(--ink); }
.toplista-ertek { text-align: right; }
.dobogo-1 .toplista-hely { background: linear-gradient(145deg,#f7e3b0,#d9b158); color:#5f4611; }
.dobogo-2 .toplista-hely { background: linear-gradient(145deg,#eef0f2,#bfc6cd); color:#4a4f55; }
.dobogo-3 .toplista-hely { background: linear-gradient(145deg,#e7c9a4,#c99a63); color:#5c3f21; }

.fulek { display: flex; gap: .3rem; margin-bottom: 1rem; flex-wrap: wrap; }
.fulek a {
  padding: .4rem .8rem; border-radius: 999px; text-decoration: none;
  color: var(--ink-soft); border: 1px solid var(--line); font-size: .9rem;
}
.fulek a.aktiv { background: color-mix(in srgb, var(--arany) 16%, transparent); color: var(--ink); border-color: var(--arany); }

/* ---------- szűkebb kijelzőn ---------- */

@media (max-width: 640px) {
  .vissza-cimke, .fiokmenu-nev, .brand-nev { display: none; }
  .vissza { padding: .34rem .5rem; }
  .fejlogo img { width: min(220px, 66vw); }
  .eredmeny-sor { grid-template-columns: minmax(0,1fr) 32% auto; }
  .sorozat-tabla th:nth-child(3), .sorozat-tabla td:nth-child(3),
  .sorozat-tabla th:nth-child(4), .sorozat-tabla td:nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vissza, .jelveny, .csillag-gomb { transition: none; }
  .jelveny.megvan:hover, .csillag-gomb:hover { transform: none; }
}

/* =====================================================================
   VILÁGOS NÉZET — a ZsebOvi stílusában (2026-08-28)
   =====================================================================

   „Ez jó sötét mód-nak ami a jelenlegi, de a világos nézet stílusa
   egyezzen meg a ZsebOviéval."

   Onnan jön: a meleg krém alap, a barackos rózsaszín akcent, a lágy
   rózsa árnyékok és a nagy lekerekítés (20px). A ZsebOvi színeit
   szó szerint átvettük, hogy a két app tényleg egy család legyen.

   ⚠ AMI SZÁNDÉKOSAN NEM JÖTT ÁT: a Baloo 2 fejléc-betű. Az egy kerek,
   óvodai hangulatú betűtípus — a helyén van egy csoport-teendőlistán,
   de egy fantasy-adatbázison félrevinné a hangot, és a rézarany
   könyv-logóhoz sem illik. A címek maradnak Lorában.

   ⚠ EZ A BLOKK A FÁJL VÉGÉN ÁLL, mégsem üti át a sötét nézetet: a
   sötét szabályok `:root:not([data-tema="vilagos"])` illetve
   `:root[data-tema="sotet"]` elé vannak fűzve, vagyis nagyobb a
   fajsúlyuk, mint ennek a puszta `:root`-nak. Ha valaki egyszer
   „letisztítja" azokat az előtagokat, a sötét nézet ELTŰNIK — a
   böngésző-ellenőrzés pontosan ezt méri.
   ===================================================================== */

:root {
  /* --- a ZsebOvi alapszínei --- */
  --bg:        #FFF6F0;
  --bg-soft:   #FFF0E8;
  --card:      #FFFDFB;
  --line:      #F7DCD2;

  --ink:       #57373A;
  /* ⚠ SÖTÉTEBB, MINT A ZSEBOVIÉ — mérve, nem ízlésből.
     A ZsebOvi --muted (#A27573) a kártyán 3,88:1, a --faint (#CE9E9A)
     pedig 2,30:1. Nálunk az apró szöveg valódi információt hordoz
     (hány kötet, hány szavazat, hányadik fejezettől spoileres), nem
     díszlet — ezért a 4,5-ös küszöb alá nem mehet.
        #8C5F5E → 5,29:1     #8A5F5E → 5,33:1  */
  --ink-soft:  #7E5658;
  --ink-faint: #8A5F5E;

  /* ⚠ Az akcent a ZsebOvi rózsája. A --accent-ink a rajta lévő SZÖVEG:
     a #FFFDFB fehér az #E8768C-n 3.4:1 — kevés. A sötétebb rózsa
     (--pink-dd) 4.9:1-et ad, ezért a gombok azt használják. */
  /* ⚠ A ZsebOvi SÖTÉTEBB rózsája (--pink-dd), nem a világosabb --pink-d.
     Ott is pont ezért van külön: a #CE5772 halvány háttéren 3,96:1, ez
     5,75:1. A hivatkozások és a kiemelt feliratok ezt kapják. */
  --accent:     #A8425C;
  --accent-ink: #FFFDFB;

  /* Az arany megmarad MÁSODIK színnek: ez köti a lapot a logóhoz és a
     könyvgerinc-díszekhez. A rózsa a főszín, az arany a szegély. */
  --arany:      #C58A5E;
  --arany-halk: rgba(197, 138, 94, .20);

  --warn-bg:   #FDF1DC;
  --warn-line: #DCA82F;
  --err-bg:    #FCE7E4;
  --err-line:  #E8A9A3;
  --lock-bg:   #FDE6E0;

  /* A ZsebOvi lekerekítése és rózsás árnyékai. */
  --radius: 20px;
  --shadow:
     0 1px 2px rgba(206, 87, 114, .05),
     0 8px 24px rgba(206, 87, 114, .07);
  --shadow-emelt:
     0 2px 4px rgba(206, 87, 114, .07),
     0 14px 34px rgba(206, 87, 114, .13);
}

/* ⚠ A háttér-gradiens a ZsebOvi védjegye: barackos rózsa balra fent,
   vajszín jobbra fent. Ez adja a „meleg papír" érzetet a lapos krém
   helyett. A `body`-t külön kell felülírni, mert a könyves rétegben
   saját `background` van rajta. */
:root:not([data-tema="sotet"]) body {
  background: var(--bg);
  background-image:
    radial-gradient(circle at 12% 4%, rgba(247, 185, 198, .30), transparent 42%),
    radial-gradient(circle at 88% 0%, rgba(255, 225, 140, .26), transparent 38%);
  background-attachment: fixed;
}

/* A fejléc krémesebb, a szegélye rózsás. */
:root:not([data-tema="sotet"]) .topbar {
  background: color-mix(in srgb, var(--card) 90%, transparent);
  box-shadow: 0 1px 0 rgba(206, 87, 114, .10);
}

/* A kártyák nagyobb lekerekítéssel és lágy rózsa árnyékkal. */
:root:not([data-tema="sotet"]) .card { border-radius: var(--radius); }

/* ⚠ A könyvgerinc-csík a kártyák bal szélén ARANY marad, nem rózsa: az
   köti a lapot a logóhoz. A ZsebOvin nincs megfelelője, mert ott nincs
   könyv-metafora. */

/* A kiemelt gomb a ZsebOvi meleg átmenetét kapja. */
:root:not([data-tema="sotet"]) .btn-primary {
  /* ⚠ MÉLYEBB, MINT A ZSEBOVI GOMBJA. Ott fehér betű ül a
     #F4977D→#E8768C átmeneten: az a világosabb végén 2,16:1, a
     sötétebbiken 2,80:1 — vagyis a felirat alig olvasható. Ez az
     átmenet ugyanabból a színcsaládból való, de mindkét vége átmegy:
     #B85A47 → 4,51:1, #A8425C → 5,75:1. */
  background: linear-gradient(135deg, #B85A47, #A8425C);
  border-color: #A8425C;
  color: #FFFDFB;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset,
              0 2px 8px rgba(206, 87, 114, .28);
}
:root:not([data-tema="sotet"]) .btn-primary:hover { filter: brightness(1.04); }

/* A haladás-sávok és a jelvény-sávok is a meleg átmenetet kapják. */
:root:not([data-tema="sotet"]) .bar > i,
:root:not([data-tema="sotet"]) .rang-sav > i,
:root:not([data-tema="sotet"]) .jelveny-sav > i {
  background: linear-gradient(90deg, #E8836B, #CE5772);
}

/* Az eredmény-sávok szintén — de halkabban, mert ezekből sok van egymás alatt. */
:root:not([data-tema="sotet"]) .eredmeny-sav > i {
  background: linear-gradient(90deg, #F7B9C6, #F4977D);
}

/* A csillagok melegek maradnak, de a rózsa mellett a borostyán jobban
   elválik, mint az arany. */
:root:not([data-tema="sotet"]) .csillagok { color: #E0A03C; }
:root:not([data-tema="sotet"]) .csillag-gomb:hover,
:root:not([data-tema="sotet"]) .csillag-gomb.aktiv { color: #E0A03C; }

/* A spoiler-pecsét a ZsebOvi lágy rózsáján ül. */
:root:not([data-tema="sotet"]) .hidden-note {
  background: var(--lock-bg);
  border-color: #F3C9C0;
  border-left-color: var(--accent);
}

/* A fiókmenü és a legördülő is lekerekítettebb. */
:root:not([data-tema="sotet"]) .fiokmenu-lap { border-radius: var(--radius); }
:root:not([data-tema="sotet"]) .kerdes { border-radius: 16px; }

/* ⚠ A rang-címkék világos színei megmaradnak: azok a rangot különítik el
   egymástól, nem a témát. Csak a legalsó, semleges rang kap krémesebb
   hátteret, hogy ne szürkéllen ki a meleg lapból. */
:root:not([data-tema="sotet"]) .rang-szurke {
  color:#7A5250; border-color:#F0D6CE; background:#FDF0EA;
}

/* ---------- nézet-választó a kinézet lapon ---------- */

.tema-racs {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: .8rem 0;
}
.tema {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .8rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card);
  transition: border-color .15s, box-shadow .15s;
}
.tema input { position: absolute; opacity: 0; width: 0; height: 0; }
.tema-jel { font-size: 1.5rem; line-height: 1; }
.tema:hover { border-color: var(--accent); }
/* ⚠ A kiválasztott állapot NEM csak színnel jelöl: a vastag keret és a
   gyűrű akkor is látszik, ha valaki nem különbözteti meg a színeket. */
.tema.valasztott {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* Billentyűzettel is látszódjon, melyiken állunk. */
.tema:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ⚠ A LEKEREKÍTÉS CSAK A VILÁGOS NÉZETÉ.
   A ZsebOvi 20px-es sarkai a világos paletta részei — a sötét nézeten
   viszont a user szerint „ez jó, ahogy van", és a nagyobb sugár észrevétlenül
   átment volna rá is, mert a --radius a közös `:root`-ban ül. Itt kap
   vissza 14px-et, magasabb fajsúllyal. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="vilagos"]) { --radius: 14px; }
}
:root[data-tema="sotet"] { --radius: 14px; }

/* ---------- kötet-csík: legyen látszó, hogy kattintható ---------- */

.kotetsav { margin: 1rem 0 1.4rem; }
.kotetsav-fej h2 { margin: 0 0 .1rem; font-size: 1.05rem; }
.kotetsav-fej p { margin: 0 0 .6rem; }

/* ⚠ A kötet mostantól a CÍMÉVEL szerepel, nem csak sorszámmal — a
   „1." semmit nem mondott arról, hova visz. Ezért szélesebb hasáb kell. */
.kot { width: 92px; text-align: center; }
.kot-cim {
  display: block; font-size: .72rem; line-height: 1.25;
  margin-top: .3rem; color: var(--ink-soft);
  /* legfeljebb két sor, hogy a csík ne ugráljon hosszú címeknél */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.kot:hover .kot-cim { color: var(--ink); }
.kot-jelek {
  display: flex; gap: .3rem; justify-content: center;
  margin-top: .15rem; font-size: .7rem; color: var(--ink-faint);
}
.kot-jelek span { white-space: nowrap; }
.kot.jovo .kot-cim { opacity: .7; }

/* ---------- kapcsolat-hiánypótlás táblázat ---------- */
.kh-tabla { width: 100%; border-collapse: collapse; }
.kh-tabla th, .kh-tabla td {
  padding: .5rem .4rem; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: middle;
}
.kh-tabla th { font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-faint); }
.kh-tabla select { width: 100%; max-width: 340px; }
.kh-tabla .muted { font-style: italic; }

/* =====================================================================
   NAGYOBB KÉPEK — 2026-08-28
   =====================================================================
   „Szeretném ha a már felvitt képek nagyobbak lehetnének, itt a kis
   ikonoknál nem is látszik."  — és igaza volt: 42 px-en egy arcképből
   semmi nem olvasható ki.
   ===================================================================== */

.chr-kep { position: relative; flex: 0 0 auto; display: block; line-height: 0; }

/* ⚠ A kártya magassága a képhez igazodik, nem fordítva. A 64 px-es
   jelölő mellett a régi .6rem-es belső margó összenyomta a nevet. */
.chr { padding: .55rem .75rem; gap: .8rem; }
.chr .badge { border-radius: 12px; }

/* Ha van VALÓDI kép, a kártya kicsit hangsúlyosabb — így a listát
   végigfutva látszik, hol van már arc és hol nincs. */
.chr-kepes .badge-kep { box-shadow: 0 0 0 2px var(--arany); }

/* „+2" jelölés: hány kép van még ezen a szereplőn. */
.chr-kepdb {
  position: absolute; right: -5px; bottom: -5px;
  min-width: 19px; height: 19px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 1;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 2px var(--card);
}

/* Az adatlap galériája: nagyobb dobozok. A `kepek-kicsi` innen kikerült. */
.kepdoboz { max-width: 320px; }

@media (max-width: 640px) {
  /* Mobilon a kártya kétharmadát elvinné egy 64 px-es kép — ott marad
     kisebb, de még mindig nagyobb, mint a régi 42. */
  .chr .badge { width: 52px !important; height: 52px !important; }
  .kepdoboz { max-width: 100%; }
}

/* ---------- fő kép jelölése ---------- */
.kepdoboz { position: relative; }
.fokep-jel {
  position: absolute; left: .5rem; top: .5rem;
  padding: .12rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; line-height: 1.5;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
/* ⚠ A fő képnek a keretén is látszania kell: a címke a képre kerül, és
   egy sötét fotón elveszhet. */
.kepdoboz:has(.fokep-jel) img.beagy { box-shadow: 0 0 0 2px var(--accent); }
.kepdoboz figcaption form { margin: 0; }

/* ---------- gyors szerkesztés a családfán ---------- */
.fa-szerk { margin: 1rem 0; }
.fa-szerk > summary {
  cursor: pointer; color: var(--accent); font-weight: 600;
  padding: .5rem .7rem; border: 1px dashed var(--line); border-radius: 12px;
  list-style: none;
}
.fa-szerk > summary::-webkit-details-marker { display: none; }
.fa-szerk > summary:hover { border-color: var(--accent); }
.fa-szerk[open] > summary { border-style: solid; margin-bottom: .6rem; }
.fa-szerk .form { border: 1px solid var(--line); border-radius: 12px; padding: .9rem; }

/* =====================================================================
   CSALÁDFA-RAJZ — 2026-08-28
   =====================================================================

   „A családfa inkább rendes családfa térképezet nézetben jelenjen meg."

   Az előző nézet felcímkézett sorok halmaza volt („szülők:", „ő maga:"),
   vonalak nélkül — abból nem látszott, ki kitől származik.

   ⚠ TISZTA CSS. Nincs könyvtár és nincs JavaScript: a fa akkor is
   kirajzolódik, ha a szkript nem fut le, és nem kell hozzá külső kérés.

   ⚠ A VONALAK FÉL-VONALAKBÓL ÁLLNAK. Minden cella megrajzolja a fölötte
   futó „sín" bal és jobb felét (::before / ::after), és a saját
   függőleges leágazását. A szélső feleket elhagyjuk, így a sín pontosan
   az első és az utolsó doboz KÖZEPE között fut.

   ⚠ EZÉRT NINCS `gap` A SORBAN. A két fél vonal csak akkor ér össze, ha
   a térközt a cellán BELÜLI vízszintes margó adja. Egy `gap` lyukat ütne
   a sínbe minden doboz között — és ez a fajta hiba csak több gyereknél
   látszik meg, egynél nem.
   ===================================================================== */

/* A rajz szélesebb lehet a lapnál — görgethető, de a LAP nem csúszik el. */
/* ⚠ A fa vonalai SAJÁT színt kapnak, nem a `--line`-t. Az a kártya-
   szegélyekre való halvány árnyalat; egy 2px-es összekötő vonalnak abból
   nem látszik semmi, márpedig itt épp a VONAL a közlendő. */
:root { --fa-vonal: color-mix(in srgb, var(--ink-soft) 55%, transparent); }

.fa-gorgo { overflow-x: auto; padding: .4rem 0 1rem; }
.fa { display: inline-block; min-width: 100%; text-align: center; }

.fa-sor {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* ⚠ NINCS gap — lásd a fenti magyarázatot. */
}

/* Egy doboz + a hozzá tartozó vonalak. */
.fa-cella {
  position: relative;
  padding: 0 .55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- a szülőktől lefutó vonalak --- */

.fa-sor.kotott > .fa-cella { padding-top: 22px; }

.fa-sor.kotott > .fa-cella::before,
.fa-sor.kotott > .fa-cella::after {
  content: ""; position: absolute; top: 0; height: 22px; width: 50%;
  border-top: 2px solid var(--fa-vonal);
}
/* bal fél + a függőleges leágazás */
.fa-sor.kotott > .fa-cella::before {
  right: 50%;
  border-right: 2px solid var(--fa-vonal);
}
/* jobb fél */
.fa-sor.kotott > .fa-cella::after { left: 50%; }

/* A szélek nem kapnak sínt — a vonal az első és az utolsó doboz
   KÖZEPÉNÉL kezdődik és végződik, nem lóg ki a semmibe. */
.fa-sor.kotott > .fa-cella:first-child::before { border-top-color: transparent; }
.fa-sor.kotott > .fa-cella:last-child::after   { border-top-color: transparent; }
/* Egyetlen gyereknél nincs sín, csak a függőleges. */
.fa-sor.kotott > .fa-cella:only-child::before  { border-top-color: transparent; }
.fa-sor.kotott > .fa-cella:only-child::after   { display: none; }

/* Függőleges összekötő két sor között. */
.fa-szal {
  width: 2px; height: 20px; margin: 0 auto;
  background: var(--fa-vonal);
}

/* --- a pár: „=" jellel összekötve, nem leágazással --- */
/*
   ⚠ A pár NEM a szülőktől származik, ezért nem kaphat leágazást a
   szülő-sínről. Vízszintes jel köti össze — ez a szokásos családfa-jelölés.
*/
.fa-par { display: flex; align-items: center; justify-content: center; }
.fa-parjel {
  width: 26px; height: 0; margin: 0 -1px;
  border-top: 2px solid var(--fa-vonal);
  border-bottom: 2px solid var(--fa-vonal);
  height: 6px;
}

/* --- dobozok --- */

.cs-doboz {
  display: inline-flex; flex-direction: column; gap: .1rem;
  padding: .5rem .8rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card);
  text-decoration: none; color: var(--ink);
  min-width: 108px; max-width: 190px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.cs-doboz:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.cs-doboz.kicsi { padding: .38rem .6rem; min-width: 92px; }
.cs-nev { font-family: Lora, Georgia, serif; font-weight: 600; line-height: 1.25; }
.cs-doboz.kicsi .cs-nev { font-size: .92rem; }
.cs-szerep { font-size: .74rem; color: var(--ink-soft); }

/* Ő maga: kiemelve, hogy egy pillantással látszódjon, kiről szól a fa. */
.cs-en {
  border-color: var(--accent); border-width: 2px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}
.cs-en .cs-nev { font-size: 1.05rem; }

/* Ismeretlen fél — nem hiányzó adat, hanem maga az információ. */
.cs-ismeretlen { border-style: dashed; color: var(--ink-soft); }
.cs-ismeretlen .cs-nev { font-style: italic; font-weight: 500; }

/* --- tágabb rokonság a rajz alatt --- */

.fa-egyeb {
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.fa-egyeb .cs-elemek {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0;
}
.cs-cimke {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint);
}

@media (max-width: 640px) {
  .fa-cella { padding: 0 .3rem; }
  .cs-doboz { min-width: 86px; max-width: 140px; padding: .4rem .55rem; }
  .cs-doboz.kicsi { min-width: 76px; }
  .fa-parjel { width: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-doboz { transition: none; }
  a.cs-doboz:hover { transform: none; }
}

/* ⚠ „+N nem látszik" — a rajz kiírja magán, hogy nem teljes.
   Az eredeti, vonal nélküli nézet épp ettől félt: hogy a vonal
   teljességet állít. Ez a doboz az ellenszere. */
.fa-hianyos {
  border-style: dashed; border-color: var(--ink-faint);
  background: transparent; color: var(--ink-soft); min-width: 84px;
}
.fa-hianyos .cs-nev { font-family: inherit; font-weight: 700; }

/* ---------- kötet-összefoglaló ---------- */
/*
   ⚠ Ez folyószöveg, nem felsorolás — a tördelése ezért olvasásra van
   szabva: szélesebb sorköz és korlátozott sorhossz. Egy 120 karakteres
   sor a képernyő teljes szélességében fárasztó, és pont ezt a szöveget
   fogják hosszan olvasni.
*/
.osszefoglalo {
  white-space: pre-line;
  line-height: 1.7;
  max-width: 68ch;
  margin: .4rem 0 .8rem;
  font-size: 1.02rem;
}
.osszefoglalo + p { max-width: 68ch; }

/* ---------- összefoglaló-szerkesztő (összecsukva) ---------- */
.osszefoglalo-szerk > summary {
  cursor: pointer; font-weight: 600; color: var(--accent);
  list-style: none; padding: .2rem 0;
}
.osszefoglalo-szerk > summary::-webkit-details-marker { display: none; }
.osszefoglalo-szerk[open] > summary { margin-bottom: .8rem; }
.osszefoglalo-szerk textarea { min-height: 14rem; line-height: 1.6; }

/* ---------- „Ki ő?" — szereplő-jellemzés ---------- */
/*
   ⚠ Ez folyószöveg, nem adatmező: olvasásra tördeljük. A 68ch korlát
   azért kell, mert a kártya teljes szélességében egy 120 karakteres sor
   fárasztó — és épp ezt fogják hosszan olvasni.
*/
.kio {
  white-space: pre-line;
  line-height: 1.7;
  max-width: 68ch;
  margin: .3rem 0 .7rem;
  font-size: 1.02rem;
}

.kio-szerk { margin-top: .8rem; }
.kio-szerk > summary {
  cursor: pointer; color: var(--accent); font-weight: 600;
  list-style: none; padding: .3rem 0;
}
.kio-szerk > summary::-webkit-details-marker { display: none; }
.kio-szerk[open] > summary { margin-bottom: .5rem; }
.kio-szerk textarea { min-height: 9rem; line-height: 1.6; }
.kio-cimke {
  display: inline-block; padding: .05rem .45rem; margin: 0 .15rem;
  border-radius: 999px; border: 1px solid var(--line);
  font-size: .74rem; color: var(--ink-soft); text-decoration: none;
}