:root {
  --paper: #efe3c9;
  --paper-deep: #e3d3b2;
  --paper-edge: #d6c096;
  --brass: #a8813c;
  --brass-dark: #6f5423;
  --ink: #2c2418;
  --ink-soft: #6b5c45;
  --wire: #9b7c46;
  --alert: #a33f22;
  --focus: #c0392b;        /* বেছে নেওয়া বংশধারার রং */
  --display: "Noto Serif Bengali", Georgia, serif;
  --body: "Hind Siliguri", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background:
    radial-gradient(1100px 620px at 22% 8%, #f7eeda 0%, transparent 62%),
    radial-gradient(900px 700px at 88% 78%, #e8dabc 0%, transparent 58%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brass-dark); }

/* ---------------------------------------------------------- header */

.ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2.6rem 5vw 1.8rem;
}

.ledger__kicker {
  font-family: var(--display);
  letter-spacing: .3em;
  color: var(--brass);
  font-size: .74rem;
  margin: 0 0 .7rem;
}

.ledger__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.15;
  margin: 0;
}

.ledger__tagline { color: var(--ink-soft); margin: .4rem 0 0; }

.ledger__stats { display: flex; gap: 2.4rem; margin: 0; }
.ledger__stats dt { font-size: .78rem; color: var(--ink-soft); }
.ledger__stats dd {
  margin: .15rem 0 0;
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--brass-dark);
}

/* ---------------------------------------------------------- toolbar */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 5vw;
  background: rgba(239, 227, 201, .93);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--paper-edge);
  border-bottom: 1px solid var(--paper-edge);
}

.search { display: flex; align-items: center; gap: .6rem; }
.search__label { font-size: .85rem; color: var(--ink-soft); white-space: nowrap; }
.search input {
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--paper-edge);
  color: var(--ink);
  font-family: var(--body);
  padding: .42rem .8rem;
  border-radius: 2px;
  min-width: min(46vw, 220px);
}
.search input:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }

.toolbar__hint { margin: 0; font-size: .82rem; color: var(--ink-soft); }

.zoom { display: flex; gap: .3rem; }
.zoom button {
  background: transparent;
  border: 1px solid var(--paper-edge);
  color: var(--brass-dark);
  font-family: var(--body);
  height: 32px;
  min-width: 34px;
  padding: 0 .6rem;
  border-radius: 2px;
  cursor: pointer;
}
.zoom button:hover { background: rgba(168, 129, 60, .12); }

/* ---------------------------------------------------------- canvas */

.viewport {
  position: relative;
  height: calc(100vh - 60px);
  min-height: 460px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  border-bottom: 1px solid var(--paper-edge);
}
.viewport.is-panning { cursor: grabbing; }

.stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.wires { position: absolute; top: 0; left: 0; overflow: visible; }

.wire {
  fill: none;
  stroke: var(--wire);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke .25s, opacity .25s;
}
.wire--cross { stroke-dasharray: 7 6; stroke-width: 1.8; }
.wire--unknown { stroke-width: 2.4; stroke-linecap: round; }

.ring circle {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.8;
  transition: stroke .25s, opacity .25s;
}

/* ---------------------------------------------------------- house */

.house {
  position: absolute;
  width: 132px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--body);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: opacity .25s, filter .25s;
}
.house:focus-visible { outline: 2px solid var(--brass-dark); outline-offset: 3px; }

.house__svg { width: 132px; height: 124px; display: block; }

.house__fill { fill: #fbf5e6; }
.house__frame {
  fill: none;
  stroke: var(--brass);
  stroke-width: 3.5;
  stroke-linejoin: round;
  transition: stroke .25s, stroke-width .25s;
}
.house__eave {
  fill: none;
  stroke: var(--brass);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}
.house__finial { fill: var(--brass); }
.house__initial {
  font-family: var(--display);
  font-size: 42px;
  fill: var(--paper-edge);
}

.house__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  text-align: center;
  margin-top: .25rem;
}
.house__rel { font-size: .76rem; color: var(--ink-soft); }

.house:hover .house__frame,
.house:focus-visible .house__frame { stroke: var(--brass-dark); stroke-width: 4.5; }

/* বংশধারা জ্বালানো */
.stage.has-focus .house { opacity: .24; filter: saturate(.2); }
.stage.has-focus .house.lit { opacity: 1; filter: none; }
.stage.has-focus .house.lit .house__frame { stroke: var(--focus); stroke-width: 4.5; }
.stage.has-focus .house.lit .house__eave,
.stage.has-focus .house.lit .house__finial { stroke: var(--focus); fill: none; }
.stage.has-focus .house.lit .house__finial { fill: var(--focus); }
.stage.has-focus .house.lit .house__name { color: var(--focus); }

/* বেছে নেওয়া মানুষটি — বংশধারার বাকিদের চেয়ে একটু জোরালো */
.stage.has-focus .house.chosen .house__frame { stroke-width: 6; }

.stage.has-focus .wire { opacity: .16; }
.stage.has-focus .wire.lit { opacity: 1; stroke: var(--focus); }
.stage.has-focus .ring circle { opacity: .16; }
.stage.has-focus .ring.lit circle { opacity: 1; stroke: var(--focus); }

.house.hit .house__frame { stroke: var(--alert); stroke-width: 4.5; }

/* ---------------------------------------------------------- misc */

.empty {
  max-width: 46ch;
  margin: 4rem auto;
  text-align: center;
  color: var(--ink-soft);
  line-height: 1.9;
}
.empty h2 { font-family: var(--display); color: var(--ink); }

.btn {
  display: inline-block;
  margin-top: 1rem;
  padding: .68rem 1.4rem;
  background: var(--brass-dark);
  color: #fbf5e6;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--body);
  font-size: 1rem;
}
.btn:hover { background: #57411a; }
.btn--ghost { background: transparent; color: var(--brass-dark); border: 1px solid var(--paper-edge); }
.btn--danger { background: transparent; color: var(--alert); border: 1px solid rgba(163, 63, 34, .45); }

.foot {
  display: flex;
  justify-content: space-between;
  padding: 1.4rem 5vw;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- drawer */

.drawer {
  position: fixed;
  inset: 0;
  background: rgba(44, 36, 24, .38);
  display: flex;
  justify-content: flex-end;
  z-index: 40;
}
.drawer[hidden] { display: none; }

.drawer__panel {
  width: min(420px, 100%);
  height: 100%;
  overflow-y: auto;
  background: #fbf5e6;
  padding: 2.4rem 2rem;
  position: relative;
  border-left: 3px solid var(--brass);
  box-shadow: -18px 0 40px rgba(44, 36, 24, .22);
}

.drawer__close {
  position: absolute;
  top: 1rem; right: 1.2rem;
  background: transparent;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}

.drawer__portrait {
  width: 148px; height: 138px;
  margin-bottom: 1.4rem;
  background: var(--paper-deep);
  clip-path: polygon(50% 0, 100% 32%, 100% 100%, 0 100%, 0 32%);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 3rem; color: var(--paper-edge);
}
.drawer__portrait img { width: 100%; height: 100%; object-fit: cover; }

.drawer__name { font-family: var(--display); font-size: 1.7rem; margin: 0; }
.drawer__rel { color: var(--brass-dark); margin: .25rem 0 1.6rem; font-weight: 500; }

.drawer__facts { margin: 0 0 1.6rem; }
.drawer__facts div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--paper-deep);
}
.drawer__facts dt { color: var(--ink-soft); font-size: .88rem; }
.drawer__facts dd { margin: 0; }

.drawer__bio { line-height: 1.95; white-space: pre-wrap; }

/* ---------------------------------------------------------- flash */

.flashes { position: fixed; top: 1rem; right: 1rem; z-index: 60; display: grid; gap: .5rem; }
.flash {
  margin: 0;
  padding: .7rem 1.1rem;
  background: #fbf5e6;
  border-left: 4px solid var(--brass);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(44, 36, 24, .18);
  max-width: 44ch;
}
.flash--error { border-left-color: var(--alert); }

/* ---------------------------------------------------------- admin */

.admin-shell { max-width: 1080px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }

.admin-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--paper-edge);
  padding-bottom: 1.2rem;
  margin-bottom: 2rem;
}
.admin-top h1 { font-family: var(--display); margin: 0; font-size: 1.7rem; }
.admin-nav { display: flex; gap: 1.2rem; align-items: center; }
.admin-nav a { text-decoration: none; font-size: .95rem; }
.admin-nav form { display: inline; }
.admin-nav button {
  background: none; border: 0; color: var(--brass-dark);
  font-family: var(--body); font-size: .95rem; cursor: pointer; padding: 0;
}

.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: right; padding: .8rem .7rem; border-bottom: 1px solid var(--paper-deep); }
.table th:first-child, .table td:first-child { text-align: left; }
.table th { color: var(--ink-soft); font-weight: 500; font-size: .85rem; }
.table td.name { display: flex; align-items: center; gap: .7rem; text-align: left; }
.table .thumb {
  width: 44px; height: 42px; object-fit: cover; background: var(--paper-deep);
  clip-path: polygon(50% 0, 100% 32%, 100% 100%, 0 100%, 0 32%);
}
.table .thumb--blank { display: grid; place-items: center; color: var(--brass); font-family: var(--display); }
.table .actions { display: flex; gap: .5rem; justify-content: flex-end; }
.table .actions a, .table .actions button { font-size: .85rem; padding: .35rem .7rem; }

.form { max-width: 720px; }
.field { margin-bottom: 1.3rem; }
.field label { display: block; margin-bottom: .35rem; font-size: .92rem; color: var(--ink-soft); }
.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--paper-edge);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  padding: .6rem .75rem;
  border-radius: 2px;
}
.field textarea { min-height: 140px; line-height: 1.8; resize: vertical; }
.field .hint { font-size: .82rem; color: var(--ink-soft); margin: .35rem 0 0; }
.field--check { display: flex; align-items: center; gap: .5rem; }
.field--check label { margin: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }

.card {
  border: 1px solid var(--paper-edge);
  background: rgba(255, 255, 255, .35);
  border-radius: 3px;
  padding: 1.6rem;
  margin-bottom: 2rem;
}
.card h2 { font-family: var(--display); margin: 0 0 1.2rem; font-size: 1.15rem; }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.login-box { width: min(380px, 100%); }
.login-box h1 { font-family: var(--display); font-size: 1.5rem; margin: 0 0 .3rem; }
.login-box p.sub { color: var(--ink-soft); margin: 0 0 2rem; font-size: .92rem; }

.error-page { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 2rem; }
.error-page h1 { font-family: var(--display); font-size: 4rem; color: var(--brass); margin: 0; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 760px) {
  .ledger { padding: 1.8rem 5vw 1.2rem; }
  .toolbar { flex-wrap: wrap; gap: .6rem; }
  .toolbar__hint { order: 3; width: 100%; text-align: center; }
  .search input { min-width: 0; width: 100%; }
  .search { flex: 1; }
  .viewport { height: calc(100vh - 130px); }
  .grid-2 { grid-template-columns: 1fr; }
  .drawer__panel { padding: 2.4rem 1.4rem; }
  .table thead { display: none; }
  .table tr { display: block; border-bottom: 1px solid var(--paper-edge); padding: .6rem 0; }
  .table td { display: block; border: 0; text-align: left; padding: .25rem .2rem; }
  .table .actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .house, .wire, .ring circle, .house__frame { transition: none; }
}