:root {
  --bg: #f6f3ec; --card: #ffffff; --ink: #1f1d1a; --muted: #6b665c;
  --line: #d9d2c3; --accent: #2f6f4e; --accent-ink: #fff; --danger: #b3261e;
  --male: #dbe8f5; --female: #f7dfe3; --neutral: #eee9de;
  --radius: 12px; --shadow: 0 2px 8px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 19px; line-height: 1.45; color: var(--ink); background: var(--bg); }
.hidden { display: none !important; }
a { color: var(--accent); }
h1 { font-size: 1.7em; margin: .2em 0 .5em; }
h2 { font-size: 1.35em; margin: .4em 0 .5em; }
h3 { font-size: 1.1em; margin: .6em 0 .3em; color: var(--muted); }
p { margin: .4em 0; }
input, select, textarea, button { font: inherit; }
input[type=text], input[type=password], input[type=search], select, textarea {
  width: 100%; padding: .55em .7em; border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 3px solid #a9cbb9; border-color: var(--accent); }
label { display: block; font-weight: 600; margin: .7em 0 .2em; }
.btn { display: inline-flex; align-items: center; gap: .4em; padding: .55em 1em; border-radius: 10px; border: 2px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; font-weight: 600; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { color: var(--danger); border-color: #e6b8b5; }
.btn.danger:hover { background: #fbecea; }
.btn.big { font-size: 1.15em; padding: .7em 1.3em; }
.btn.small { font-size: .85em; padding: .35em .7em; }
.btn:disabled { opacity: .5; cursor: default; }
.row { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }
.muted { color: var(--muted); }
.error { color: var(--danger); min-height: 1.4em; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1em 1.2em; margin: .8em 0; }

.login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 50; }
.login-box { background: #fff; padding: 2em; border-radius: 16px; box-shadow: var(--shadow); width: min(92vw, 420px); text-align: center; }
.login-box input { margin: 1em 0; font-size: 1.15em; }

.topbar { display: flex; align-items: center; gap: 1.5em; padding: .6em 1em; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.brand { font-weight: 800; text-decoration: none; color: var(--ink); font-size: 1.15em; }
.topbar nav { display: flex; gap: .3em; }
.topbar nav a { text-decoration: none; padding: .45em .9em; border-radius: 999px; color: var(--ink); font-weight: 600; }
.topbar nav a.active, .topbar nav a:hover { background: var(--accent); color: #fff; }

main { padding: 1em; max-width: 1200px; margin: 0 auto; }
main.wide { max-width: none; }

.toast { position: fixed; bottom: 1.2em; left: 50%; transform: translateX(-50%); background: #2b2926; color: #fff; padding: .7em 1.2em; border-radius: 10px; z-index: 100; box-shadow: var(--shadow); }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 1em; }
.modal-box { background: #fff; border-radius: 16px; padding: 1.4em; width: min(96vw, 560px); max-height: 92vh; overflow: auto; box-shadow: 0 8px 30px rgba(0,0,0,.25); }

/* ---- tree ---- */
.tree-toolbar { display: flex; flex-wrap: wrap; gap: .8em; align-items: center; margin-bottom: .6em; }
.tree-toolbar select { width: auto; max-width: 60vw; }
.tree-scroll { overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5em; min-height: 60vh; cursor: grab; }
.tree-scroll.dragging { cursor: grabbing; user-select: none; }
.tree-zoom { transform-origin: 0 0; display: inline-block; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.tree ul { padding-top: 28px; position: relative; }
.tree li { position: relative; padding: 28px 8px 0; display: flex; flex-direction: column; align-items: center; }
.tree > li { padding-top: 0; }
/* connectors */
.tree li::before, .tree li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 28px; border-top: 2px solid #b9b0a0; }
.tree li::after { right: auto; left: 50%; border-left: 2px solid #b9b0a0; }
.tree li:only-child::before, .tree li:only-child::after { border-top: 0; }
.tree li:only-child::after { height: 28px; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; }
.tree li:last-child::before { border-right: 2px solid #b9b0a0; border-radius: 0 8px 0 0; }
.tree li:first-child::after { border-radius: 8px 0 0 0; }
.tree > li::before, .tree > li::after { display: none; }
.tree ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #b9b0a0; height: 28px; }
.fam { display: flex; align-items: stretch; gap: 6px; }
.fam .plus { align-self: center; color: var(--muted); font-size: 1.2em; }
.pnode { width: 170px; background: var(--neutral); border: 2px solid var(--line); border-radius: 10px; padding: .45em .55em; text-align: center; cursor: pointer; text-decoration: none; color: var(--ink); position: relative; }
.pnode:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.pnode.M { background: var(--male); } .pnode.K { background: var(--female); }
.pnode .nm { font-weight: 700; font-size: .95em; line-height: 1.2; }
.pnode .dt { font-size: .78em; color: var(--muted); margin-top: .2em; }
.pnode .ph { position: absolute; top: -8px; right: -8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: .7em; padding: 0 .4em; }
.pnode.spouse { opacity: .95; }
.collapse { margin-top: 4px; font-size: .8em; padding: 0 .6em; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.pnode.highlight { outline: 4px solid #f2b705; }

/* ---- people list ---- */
.people-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .6em; }
.person-card { display: block; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .6em .8em; }
.person-card:hover { border-color: var(--accent); }
.person-card b { font-size: 1.05em; }

/* ---- person page ---- */
.rel-list { display: flex; flex-wrap: wrap; gap: .5em; margin: .3em 0 .5em; }
.chip { display: inline-flex; align-items: center; gap: .4em; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .3em .5em .3em .9em; }
.chip a { text-decoration: none; color: var(--ink); font-weight: 600; }
.chip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.1em; padding: 0 .3em; border-radius: 999px; }
.chip button:hover { color: var(--danger); background: #fbecea; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1em; }
.form-grid .full { grid-column: 1 / -1; }

/* ---- photos ---- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8em; }
.thumb { display: block; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--ink); }
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.thumb .cap { padding: .4em .6em; font-size: .9em; }
.thumb .cap small { color: var(--muted); display: block; }
.photo-stage { position: relative; display: inline-block; max-width: 100%; user-select: none; }
.photo-stage img { max-width: 100%; max-height: 75vh; display: block; }
.photo-stage.tagging { cursor: crosshair; }
.tagbox { position: absolute; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.6); border-radius: 6px; }
.tagbox span { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); background: rgba(0,0,0,.75); color: #fff; padding: .15em .5em; border-radius: 6px; font-size: .8em; white-space: nowrap; }
.tagbox.pending { border-color: #f2b705; }
.taglist { display: flex; flex-wrap: wrap; gap: .5em; }
.dropzone { border: 3px dashed var(--line); border-radius: var(--radius); padding: 1.5em; text-align: center; background: #fff; }
.dropzone.over { border-color: var(--accent); background: #eef7f1; }
.progress { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); width: 0; transition: width .2s; }
.upload-list { margin-top: .6em; }
.upload-list .item { display: flex; align-items: center; gap: .6em; margin: .3em 0; }
.upload-list img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .topbar { gap: .6em; padding: .5em .6em; flex-wrap: wrap; }
  main { padding: .6em; }
}
.tree-wrap { position: relative; overflow: visible; }
.tree-zoom { position: absolute; left: 0; top: 0; }
.tree { width: max-content; }