:root{
  --bg:#ece5d8;
  --panel:#f8f5ef;
  --panel2:#f3ede2;
  --card:#fffdf9;
  --border:#cdb894;
  --text:#2d2418;
  --muted:#7f725e;
  --accent:#8b6738;
  --accent2:#5e87c5;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}

body{
  display:flex;
}

.sidebar{
  width:260px;
  min-width:260px;
  height:100vh;
  overflow-y:auto;
  background:linear-gradient(to bottom,var(--panel),var(--panel2));
  border-color:var(--border);
  padding:22px 16px;
  z-index:20;
}

.sidebar.left{
  border-right:1px solid var(--border);
}

.sidebar.right{
  border-left:1px solid var(--border);
}

.sidebar h2{
  margin:0 0 20px 0;
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.3px;
}

.info-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  margin-bottom:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.info-card img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:10px;
}

.info-card strong{
  display:block;
  margin-bottom:6px;
  font-size:14px;
}

.info-card p{
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

#tree-container{
  flex:1;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), transparent 70%),
    linear-gradient(to bottom,#eee7da,#e5dccd);
}

#tree-svg{
  width:100%;
  height:100%;
  display:block;
  cursor:grab;
}

#tree-svg:active{
  cursor:grabbing;
}

.link{
  fill:none;
  stroke:#a98a5a;
  stroke-width:2.5;
  stroke-linecap:round;
  opacity:.9;
}

.person rect{
  fill:var(--card);
  stroke:var(--border);
  stroke-width:1.5;
  rx:18;
  ry:18;
}

.person.root rect{
  fill:#f7edd8;
  stroke:var(--accent);
  stroke-width:2.8;
}

.person:hover rect{
  stroke:var(--accent2);
  stroke-width:2.5;
}

.person-image{
  border-radius:50%;
  clip-path:circle(30px at center);
}

.person-name{
  fill:var(--text);
  font-size:14px;
  font-weight:700;
  letter-spacing:.1px;
}

.person-dates{
  fill:var(--muted);
  font-size:11px;
}

.person-place{
  fill:#8b7b63;
  font-size:11px;
}

.loading,
.error{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:white;
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px 28px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  font-size:18px;
}

.error{
  color:#9b1d1d;
}

@media (max-width:1200px){
  .sidebar{
    width:200px;
    min-width:200px;
    padding:18px 12px;
  }

  .sidebar h2{
    font-size:20px;
  }
}

@media (max-width:900px){
  .sidebar.right{
    display:none;
  }
}