:root{
  --bg: #fbfbfb;
  --paper: #ffffffcc;
  --ink: #0f172a;
  --muted: #475569;
  --accent: #0ea5e9;
  --ring: #94a3b8;
  --card: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);

  /* Tree node sizing */
  --node-w: 180px;
  --node-h: 72px;
  --couple-w: 260px;
  --couple-h: 84px;
  --row-gap: 120px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg) url('../assets/bg.jpg') center/cover fixed no-repeat;
}

.app{ min-height:100%; backdrop-filter: saturate(1.1); }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; background: linear-gradient(180deg,#ffffffcc,#ffffff88);
  border-bottom: 1px solid #e2e8f0;
  position: sticky; top:0; z-index: 10;
}
.topbar h1{ margin:0; font-size: clamp(18px, 2.2vw, 28px); font-weight:800; letter-spacing:0.2px; }
.controls{ display:flex; gap:10px; align-items:center; }
.controls input{
  padding:10px 12px; border:1px solid var(--ring); border-radius:12px; min-width:220px;
  outline: none; background:#fff;
}
.controls button{
  padding:10px 14px; border:none; border-radius:12px; background:var(--accent);
  color:#fff; font-weight:700; cursor:pointer; box-shadow: var(--shadow);
}
.controls button:hover{ filter:brightness(1.05); }

.layout{
  display:grid; grid-template-columns: 360px 1fr; gap:20px;
  padding:20px; max-width: 1400px; margin: 0 auto;
}

.panel{ display:flex; flex-direction:column; gap:20px; }
.card{
  background: var(--card); border-radius:18px; box-shadow: var(--shadow);
  border: 1px solid #e5e7eb; overflow: hidden;
}
.card h3{ margin:16px 16px 0; }
.card .help{ margin: 12px 20px 20px 24px; color: var(--muted); }

.highlight{ border:1px solid var(--accent); }
#focusCard{ display:flex; gap:16px; padding:16px; align-items:center;}
#focusCard .photo{
  width:72px; height:72px; border-radius:999px; overflow:hidden; border:2px solid #e2e8f0;
  background:#f1f5f9;
}
#focusCard img{ width:100%; height:100%; object-fit:cover; }
#focusCard .info h2{ margin:0; font-size:20px; }
#focusCard .info .lifespan{ margin:4px 0; color: var(--muted); }
#focusCard .info .note{ margin:6px 0 0; color: var(--muted); font-size: 13px;}

.people-list{ display:flex; flex-direction:column; gap:6px; padding:10px; max-height: 48vh; overflow:auto; }
.person-row{
  display:grid; grid-template-columns: 36px 1fr; gap:10px; padding:8px 10px; border-radius:12px; cursor:pointer;
  border:1px solid transparent;
}
.person-row:hover{ background:#f8fafc; border-color:#e2e8f0; }
.person-row .avatar{ width:36px; height:36px; border-radius:999px; overflow:hidden; background:#f1f5f9; }

.zoom-ui{
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 8px;
}
.zoom-ui button{
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid #e2e8f0;
  background: #fff; font-size: 20px; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.zoom-ui button:hover{ filter: brightness(1.05); }