:root {
  --bg: #0c1224;
  --panel: #141d38;
  --line: #2b3a66;
  --text: #f5f8ff;
  --muted: #9fb0d6;
  --brand: #4f7cff;
  --danger: #ef4444;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); }
a { color: #90b0ff; text-decoration: none; }

.app-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar { padding: 1rem; border-right: 1px solid var(--line); background: #0f1730; }
.sidebar h1 { font-size: 1.05rem; margin: 0 0 1rem; display: flex; gap: 0.45rem; align-items: center; }
.site-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.nav-item { display: block; padding: 0.6rem; border-radius: 8px; color: var(--text); margin-bottom: 0.4rem; }
.nav-item.active, .nav-item:hover { background: color-mix(in srgb, var(--brand) 28%, transparent); }

.content { padding: 1rem; }

.card, .auth-card, .auth-card-page {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.auth-only { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.auth-card { width: 100%; max-width: 520px; }
.auth-card-page { max-width: 620px; }

label { display: block; margin-bottom: 0.2rem; color: var(--muted); }
input, select, textarea {
  width: 100%;
  padding: 0.65rem;
  margin-bottom: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d1630;
  color: var(--text);
}

textarea { min-height: 90px; }

.btn {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  background: #111a34;
  color: var(--text);
  cursor: pointer;
}

.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-danger { background: var(--danger); border-color: var(--danger); }

.flash { border: 1px solid #4d6dd5; background: rgba(79,124,255,0.2); padding: 0.6rem; border-radius: 8px; margin-bottom: 1rem; }
.flash.error { border-color: #d15656; background: rgba(239,68,68,0.2); }

.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem; }
.stat-card strong { font-size: 1.8rem; display: block; margin-top: 0.2rem; }

.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.grid-form .full { grid-column: 1 / -1; }

.member-list { display: grid; gap: 0.75rem; }
.member-item { border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.member-left { display: flex; gap: 0.7rem; }
.member-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.member-actions { display: flex; gap: 0.4rem; align-items: center; }

.simple-list { margin: 0; padding-left: 1rem; }
.small { color: var(--muted); font-size: 0.9rem; }

.tree-canvas { width: 100%; min-height: 460px; border: 1px solid var(--line); border-radius: 12px; background: #0b142c; }
.line-parent { stroke: #79c5ff; stroke-width: 2; }
.line-spouse { stroke: #ff88ca; stroke-width: 2; }
.tree-node { fill: #2c3f75; stroke: #8eabff; stroke-width: 2; }
.tree-label { fill: #f6f8ff; font-size: 12px; }

@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats-grid, .grid-form { grid-template-columns: 1fr; }
  .member-item, .member-actions { flex-direction: column; }
}