:root{
  --bg:#0f1720; --bg2:#151f2b; --panel:#1b2735; --panel2:#212f40;
  --line:#2c3e50; --txt:#e8eef5; --dim:#93a7bd; --accent:#2f8fd8;
  --accent2:#3fb0a0; --warn:#e0a13a; --danger:#d9534f; --ok:#4bbf73;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;height:100%}
body{
  background:var(--bg); color:var(--txt); font-size:14px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Tahoma","Arial",system-ui,sans-serif;
  display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden;
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
}
button,input,select{font-family:inherit;font-size:14px}

/* ---------------------------------------------------------------- topbar */
.topbar{
  display:flex; align-items:center; gap:22px; padding:10px 18px;
  background:linear-gradient(180deg,#182534,#131d28);
  border-bottom:1px solid var(--line); flex:0 0 auto;
}
.brand{display:flex;align-items:center;gap:11px}
.logo{
  width:40px;height:40px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:grid;place-items:center;font-weight:700;font-size:20px;color:#fff;
}
.brand h1{font-size:16px;margin:0;font-weight:600;letter-spacing:.2px}
.brand .sub{font-size:11.5px;color:var(--dim)}
.tabs{
  display:flex;gap:6px;margin-inline-start:14px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex-shrink:0;
  background:transparent;border:1px solid transparent;color:var(--dim);
  padding:8px 15px;border-radius:8px;cursor:pointer;transition:.15s;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
.tab:hover{background:var(--panel);color:var(--txt)}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.statusline{margin-inline-start:auto;font-size:12px;color:var(--dim);white-space:nowrap}

/* ---------------------------------------------------------------- panes */
.tabpane{display:none;flex:1 1 auto;overflow:auto;padding:14px 18px 24px}
.tabpane.active{display:block}
#tab-numbers.active{display:flex;flex-direction:column;gap:12px;overflow:auto}

/* ------------------------------------------------------------ searchbar */
.searchbar,.filters{
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 15px;margin-bottom:12px;
}
.filters{margin-top:-6px}
.field{display:flex;flex-direction:column;gap:5px;min-width:130px}
.field.grow{flex:1 1 320px}
.field label{font-size:11.5px;color:var(--dim)}
input,select{
  background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  padding:9px 11px;border-radius:8px;outline:none;transition:.15s;width:100%;
}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,143,216,.16)}
button{cursor:pointer;border-radius:8px;padding:9px 16px;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);transition:.15s}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.primary:hover{background:#3a9ee6}
button.ghost{background:transparent}
button.small{padding:5px 11px;font-size:12.5px}
button:disabled{opacity:.38;cursor:not-allowed}
button:disabled:hover{border-color:var(--line)}
.hidden{display:none !important}

/* ----------------------------------------------------------- autocomplete */
.ac-wrap{position:relative}
.autocomplete{
  position:absolute;top:100%;inset-inline:0;z-index:40;background:var(--panel2);
  border:1px solid var(--line);border-radius:0 0 8px 8px;max-height:280px;
  overflow:auto;display:none;box-shadow:0 12px 28px rgba(0,0,0,.5);
}
.autocomplete.on{display:block}
.autocomplete div{padding:8px 12px;cursor:pointer;font-size:13.5px}
.autocomplete div:hover,.autocomplete div.sel{background:var(--accent);color:#fff}

/* ------------------------------------------------------------- resultbar */
.resultbar{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.summary{font-size:13px;color:var(--dim)}
.summary b{color:var(--txt)}
.actions{margin-inline-start:auto;display:flex;gap:7px}

/* ---------------------------------------------------------------- tables */
.tablewrap{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:auto;max-height:calc(100vh - 320px);
}
.split{display:flex;gap:12px;align-items:flex-start}
.half{flex:1 1 0;min-width:0;max-height:calc(100vh - 250px)}
.tablewrap h3{margin:0;padding:11px 14px;font-size:14px;font-weight:600;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.pill{background:var(--accent);color:#fff;border-radius:20px;padding:1px 9px;font-size:11.5px;margin-inline-start:6px}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{
  position:sticky;top:0;background:var(--panel2);color:var(--dim);font-weight:600;
  text-align:right;padding:9px 11px;border-bottom:1px solid var(--line);
  white-space:nowrap;z-index:1;font-size:12.5px;
}
tbody td{padding:8px 11px;border-bottom:1px solid #22303f;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:210px}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--panel2)}
tbody tr.sel{background:#23405c}
td.num{font-variant-numeric:tabular-nums;direction:ltr;text-align:right;font-family:"Consolas",monospace}
.muted{color:var(--dim)}
.tag{display:inline-block;padding:1px 7px;border-radius:5px;font-size:11px;
  background:var(--panel2);border:1px solid var(--line);color:var(--dim)}
.tag.ok{color:var(--ok);border-color:#2c5a3d}
.tag.dead{color:var(--danger);border-color:#5c2f2f}
.tag.m{color:#7fb8e8;border-color:#2c4a63}
.tag.f{color:#e8a0c8;border-color:#5c2f4a}
.empty{padding:40px;text-align:center;color:var(--dim)}

/* ---------------------------------------------------------------- pager */
.pager{display:flex;align-items:center;gap:14px;justify-content:center;padding:12px}
#pageinfo{font-size:13px;color:var(--dim)}

/* --------------------------------------------------------------- drawer */
.drawer{
  position:fixed;top:0;inset-inline-start:0;width:min(720px,96vw);height:100%;
  background:var(--bg2);border-inline-end:1px solid var(--line);z-index:60;
  transform:translateX(-105%);transition:transform .22s ease;display:flex;
  flex-direction:column;box-shadow:14px 0 40px rgba(0,0,0,.55);
}
/* RTL: inset-inline-start resolves to the physical right edge, so the only
   thing that must flip is the off-screen direction. */
html[dir="rtl"] .drawer{
  transform:translateX(105%);
  border-inline-end:none;border-inline-start:1px solid var(--line);
  box-shadow:-14px 0 40px rgba(0,0,0,.55);
}
/* the RTL rule above is more specific than .drawer.open, so the open state
   must be re-declared with matching specificity */
.drawer.open,
html[dir="rtl"] .drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0;font-size:15px;flex:1}
.drawer-body{padding:15px 16px;overflow:auto;flex:1}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55;display:none}
.scrim.on{display:block}

.kv{display:grid;grid-template-columns:130px 1fr;gap:7px 12px;margin-bottom:14px}
.kv dt{color:var(--dim);font-size:12.5px}
.kv dd{margin:0;font-size:13.5px;word-break:break-word}
.section-t{font-size:12.5px;color:var(--accent);margin:16px 0 9px;
  border-bottom:1px solid var(--line);padding-bottom:5px;font-weight:600}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}

/* ---------------------------------------------------------------- stats */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px}
.card .v{font-size:26px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.card .k{font-size:12px;color:var(--dim);margin-top:3px}
.chartgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.chart{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px}
.chart h4{margin:0 0 12px;font-size:13.5px;color:var(--txt);font-weight:600}
.bar{display:flex;align-items:center;gap:9px;margin-bottom:7px;font-size:12.5px}
.bar .lbl{width:130px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .track{flex:1;background:var(--bg2);border-radius:5px;height:17px;overflow:hidden}
.bar .fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:5px}
.bar .n{width:74px;text-align:left;color:var(--dim);font-variant-numeric:tabular-nums;direction:ltr}
.spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--dim);
  border-top-color:transparent;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ------------------------------------------------------- extra datasets */
.ds-split{align-items:stretch}
.dslist{
  flex:0 0 285px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:auto;max-height:calc(100vh - 300px);padding:6px;
}
.ds-table{flex:1 1 0;min-width:0;max-height:calc(100vh - 300px)}
.dslist .cat{
  font-size:11.5px;color:var(--accent);padding:9px 10px 4px;font-weight:600;
  border-bottom:1px solid var(--line);margin-bottom:4px;
}
.dslist .item{
  padding:7px 10px;border-radius:7px;cursor:pointer;font-size:12.5px;
  display:flex;gap:8px;align-items:center;justify-content:space-between;
}
.dslist .item:hover{background:var(--panel2)}
.dslist .item.sel{background:var(--accent);color:#fff}
.dslist .item .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dslist .item .ct{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums;
  direction:ltr;flex:0 0 auto}
.dslist .item.sel .ct{color:#dbeaf7}
.link{color:#8fd0ff;cursor:pointer;text-decoration:underline}
.extnote{margin:8px 0;padding:9px 12px;background:#1d3a52;border:1px solid #2c5c80;
  border-radius:8px;font-size:12.5px}
.extnote b{color:#8fd0ff}

/* ------------------------------------------------------ filter groups */
.filters{padding:0}
.fgrid{display:flex;flex-direction:column;gap:4px;width:100%}
.fgroup{padding:6px 2px}
.fgroup + .fgroup{border-top:1px solid var(--line)}
.fhead{font-size:11.5px;color:var(--accent);font-weight:600;margin-bottom:8px}
.frow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.frow .field{flex:1 1 165px;min-width:150px}
.factions{display:flex;gap:8px;padding:10px 2px 4px;border-top:1px solid var(--line)}

/* ---------------------------------------------------- sortable headers */
thead th.sortable{cursor:pointer;user-select:none}
thead th.sortable:hover{color:var(--txt);background:#26374b}
thead th.sortable.on{color:var(--accent)}
thead th.sortable i.ar{font-style:normal;font-size:10px;margin-inline-start:5px;opacity:.9}

/* --------------------------------------------------- column filters (ds) */
.dsfilters{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:12px;
}
.fmanual{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.fmanual .field{flex:0 0 220px}
.fmanual .field.grow{flex:1 1 240px}
.chk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);
  padding-bottom:9px;white-space:nowrap}
.chk input{width:auto}
.chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--line)}
button.chip{
  padding:4px 10px;border-radius:14px;font-size:12px;background:var(--panel2);
  border:1px solid var(--line);color:var(--txt);display:inline-flex;gap:6px;align-items:center;
}
button.chip:hover{border-color:var(--accent)}
button.chip b{color:var(--dim);font-weight:600;font-size:11px;direction:ltr}
button.chip.on{background:#1d3a52;border-color:#2c5c80;color:#cfe6f8}
button.chip.on b{color:#8fd0ff}
button.chip .x{border:0;background:transparent;color:inherit;padding:0 0 0 2px;font-size:11px}
.facets{max-height:230px;overflow:auto;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--line)}
.frow-facet{display:flex;gap:10px;align-items:baseline;margin-bottom:7px}
.frow-facet .fname{flex:0 0 140px;font-size:11.5px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow-facet .fchips{display:flex;gap:6px;flex-wrap:wrap}
.linked{color:#8fd0ff}
.lk{color:#8fd0ff}

/* ------------------------------------------------------- work / employer */
td.work{max-width:260px}
.wrk{color:#a9e0c8}
.workbox{margin:14px 0 4px;padding:11px 13px;background:#17323f;border:1px solid #27596b;
  border-radius:8px}
.workbox .section-t{margin-top:0}
.workline{font-size:13.5px;padding:3px 0;color:#cfeef0}
.workline + .workline{border-top:1px dashed #27596b}

/* ----------------------------------------------------- user session & auth */
.user-session{
  display:flex;align-items:center;gap:8px;margin-inline-start:auto;
}
.user-chip{
  display:inline-flex;align-items:center;gap:7px;background:var(--bg2);
  border:1px solid var(--line);padding:4px 10px;border-radius:20px;
  font-size:12.5px;color:var(--txt);
}
.user-avatar{font-size:13px}
.user-name{font-weight:600}
.badge{
  font-size:10.5px;padding:2px 7px;border-radius:10px;font-weight:600;
  display:inline-block;line-height:1.2;
}
.badge.admin{background:rgba(224,161,58,.2);color:var(--warn);border:1px solid rgba(224,161,58,.4)}
.badge.search{background:rgba(63,176,160,.2);color:var(--accent2);border:1px solid rgba(63,176,160,.4)}
.danger-hover:hover{color:var(--danger) !important;border-color:var(--danger) !important}

/* ----------------------------------------------------------- login overlay */
.login-overlay{
  position:fixed;inset:0;z-index:9999;background:rgba(10,16,24,.92);
  backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.login-card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:32px 28px;width:370px;max-width:100%;box-shadow:0 24px 50px rgba(0,0,0,.6);
  text-align:center;
}
.login-logo{
  width:52px;height:52px;border-radius:14px;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:grid;place-items:center;font-weight:700;font-size:26px;color:#fff;
  box-shadow:0 8px 20px rgba(47,143,216,.3);
}
.login-card h2{margin:0 0 6px;font-size:20px;font-weight:600;color:var(--txt)}
.login-sub{margin:0 0 20px;font-size:12px;color:var(--dim)}
.login-card .field{text-align:right;margin-bottom:14px}
.login-btn{width:100%;margin-top:6px;padding:11px;font-size:15px}
.login-alert{
  background:rgba(217,83,79,.16);border:1px solid rgba(217,83,79,.4);color:#ff9290;
  padding:9px 12px;border-radius:8px;font-size:12.5px;margin-bottom:14px;text-align:right;
}
.login-alert.ok{
  background:rgba(75,191,115,.16);border-color:rgba(75,191,115,.4);color:#7be09d;
}

/* ------------------------------------------------------------- modal dialogs */
.modal-overlay{
  position:fixed;inset:0;z-index:900;background:rgba(10,16,24,.75);
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.modal-card{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:22px;width:440px;max-width:100%;box-shadow:0 20px 40px rgba(0,0,0,.6);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
  border-bottom:1px solid var(--line);padding-bottom:10px;
}
.modal-head h3{margin:0;font-size:15px;color:var(--txt)}
.modal-card .field{margin-bottom:13px}
.modal-actions{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}
.actions-cell{display:flex;gap:5px;align-items:center}

/* ==================== 360° REVERSE PROFILE ==================== */
.profile360-container {
  margin-bottom: 14px;
}
.profile360-card {
  background: linear-gradient(135deg, rgba(27, 39, 53, 0.98), rgba(33, 47, 64, 0.92));
  border: 1px solid rgba(47, 143, 216, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  border-radius: var(--radius);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.profile360-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), #54d194);
}
.profile360-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.p360-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.p360-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(47, 143, 216, 0.18);
  border: 1px solid var(--accent);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--accent);
}
.p360-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt);
  margin: 0;
}
.p360-sub {
  font-size: 11.5px;
  color: var(--dim);
}
.p360-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.p360-badge.verified {
  background: rgba(75, 191, 115, 0.18);
  color: var(--ok);
  border: 1px solid rgba(75, 191, 115, 0.4);
}
.p360-badge.candidate {
  background: rgba(224, 161, 58, 0.18);
  color: var(--warn);
  border: 1px solid rgba(224, 161, 58, 0.4);
}
.p360-body {
  display: grid;
  grid-template-columns: minmax(320px, 1.3fr) minmax(260px, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .p360-body { grid-template-columns: 1fr; }
}
.p360-main-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p360-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.p360-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.p360-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 10px;
  margin-top: 6px;
}
.p360-item {
  background: rgba(15, 23, 32, 0.55);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 10px;
}
.p360-item .lbl {
  font-size: 11px;
  color: var(--dim);
  display: block;
}
.p360-item .val {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
  margin-top: 2px;
  word-break: break-word;
}
.p360-ext-box {
  background: rgba(15, 23, 32, 0.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p360-ext-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}
.p360-ext-item {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--txt);
  background: rgba(47, 143, 216, 0.08);
  border: 1px solid rgba(47, 143, 216, 0.2);
  border-radius: 6px;
  padding: 6px 9px;
}
.p360-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.p360-candidates-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.p360-cand-card {
  background: rgba(15, 23, 32, 0.6);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: .15s;
}
.p360-cand-card:hover {
  border-color: var(--accent);
  background: var(--panel2);
}

/* ==================== VISUAL FAMILY TREE ==================== */
.vtree-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 10px;
  width: 100%;
  overflow-x: auto;
  user-select: none;
}
.vtree-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.vtree-legend {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 11.5px;
  color: var(--dim);
  flex-wrap: wrap;
}
.vtree-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.vtree-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.vtree-dot.head { background: var(--warn); }
.vtree-dot.father { background: #4ba3e3; }
.vtree-dot.mother { background: #e36fa9; }
.vtree-dot.son { background: #7fc3f3; }
.vtree-dot.daughter { background: #f7a5cf; }

/* Tree Levels */
.vtree-level {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  position: relative;
  width: 100%;
}
.vtree-level.grandparents {
  margin-bottom: 16px;
}
.vtree-level.parents {
  margin-bottom: 10px;
  z-index: 2;
}
.vtree-level.children {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  position: relative;
  width: 100%;
}

/* Tree Cards / Nodes */
.vtree-node {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 13px;
  min-width: 165px;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: all .18s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.vtree-node:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  border-color: var(--accent);
}
.vtree-node.active-person {
  border: 2px solid var(--warn) !important;
  box-shadow: 0 0 16px rgba(224, 161, 58, 0.45);
}
.vtree-node.father {
  border-top: 3px solid #2f8fd8;
}
.vtree-node.mother {
  border-top: 3px solid #e36fa9;
}
.vtree-node.child.male {
  border-top: 3px solid #4ba3e3;
}
.vtree-node.child.female {
  border-top: 3px solid #e36fa9;
}
.vtree-node.head-family {
  border-right: 3px solid var(--warn);
}

/* Node Contents */
.vtree-avatar-wrap {
  position: relative;
  margin-bottom: 6px;
}
.vtree-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}
.vtree-crown {
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 13px;
}
.vtree-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  line-height: 1.3;
}
.vtree-subname {
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 4px;
}
.vtree-kinship-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 12px;
  margin-bottom: 5px;
}
.vtree-kinship-pill.head {
  background: rgba(224, 161, 58, 0.2);
  color: var(--warn);
  border: 1px solid rgba(224, 161, 58, 0.4);
}
.vtree-kinship-pill.father {
  background: rgba(47, 143, 216, 0.2);
  color: #7fc3f3;
  border: 1px solid rgba(47, 143, 216, 0.4);
}
.vtree-kinship-pill.mother {
  background: rgba(227, 111, 169, 0.2);
  color: #f7a5cf;
  border: 1px solid rgba(227, 111, 169, 0.4);
}
.vtree-kinship-pill.son {
  background: rgba(75, 163, 227, 0.18);
  color: #7fc3f3;
}
.vtree-kinship-pill.daughter {
  background: rgba(227, 111, 169, 0.18);
  color: #f7a5cf;
}
.vtree-meta {
  font-size: 11px;
  color: var(--dim);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vtree-age-badge {
  font-size: 10.5px;
  color: var(--accent2);
  font-weight: 600;
}
.vtree-nid {
  font-family: "Consolas", monospace;
  font-size: 10.5px;
  direction: ltr;
  color: #a0b3c6;
}
.vtree-active-pill {
  margin-top: 5px;
  background: var(--warn);
  color: #0f1720;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
}

/* Connectors */
.vtree-marriage {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}
.vtree-ring {
  background: var(--panel2);
  border: 1px solid rgba(224, 161, 58, 0.5);
  border-radius: 20px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--warn);
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  white-space: nowrap;
}
.vtree-trunk {
  width: 2px;
  height: 24px;
  background: var(--line);
  margin: 0 auto;
}
.vtree-branch-bar {
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  height: 2px;
  background: var(--line);
}
.vtree-child-stem {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 14px;
  background: var(--line);
}

/* Fullscreen Tree Modal */
.tree-modal-overlay {
  z-index: 950;
  padding: 12px;
}
.tree-modal-card {
  width: 96vw;
  height: 94vh;
  max-width: 1500px;
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
}
.tree-modal-head {
  flex: 0 0 auto;
}
.tree-modal-title-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.tree-modal-sub {
  font-size: 12px;
  color: var(--dim);
}
.tree-modal-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tree-modal-viewport {
  flex: 1 1 auto;
  overflow: auto;
  background: #0b1118;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}
.tree-canvas {
  transform-origin: top center;
  transition: transform .15s ease-out;
  min-width: 100%;
}

/* ==========================================================================
   RESPONSIVE DESIGN — MOBILE, IPAD, TABLETS & ALL MODERN BROWSERS
   ========================================================================== */

/* 1. iOS Safari: Prevent automatic zoom on input focus */
@media screen and (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* 2. Tablet & iPad Landscape / Portrait (max-width: 1024px) */
@media screen and (max-width: 1024px) {
  .topbar {
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 10px 14px;
  }
  .brand {
    flex: 0 1 auto;
  }
  .user-session {
    margin-inline-start: auto;
  }
  .tabs {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .statusline {
    order: 4;
    width: 100%;
    margin-inline-start: 0;
    font-size: 11.5px;
    padding-top: 2px;
  }
  .half {
    max-height: calc(100vh - 220px);
  }
  .dslist {
    flex: 0 0 250px;
  }
  .tablewrap {
    max-height: calc(100vh - 280px);
  }
}

/* 3. Mobile Phones & iPad Portrait (max-width: 768px) */
@media screen and (max-width: 768px) {
  html, body {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body {
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 12px);
  }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 70;
    padding: 8px 12px;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    background: #141f2c;
  }
  .logo {
    width: 32px;
    height: 32px;
    font-size: 16px;
    border-radius: 8px;
  }
  .brand h1 {
    font-size: 14.5px;
  }
  .brand .sub {
    display: none;
  }
  .user-session {
    gap: 5px;
  }
  .user-chip {
    padding: 2px 7px;
    font-size: 11.5px;
  }
  .user-avatar {
    display: none;
  }
  .tab {
    padding: 7px 13px;
    font-size: 13px;
  }
  
  .tabpane {
    padding: 10px 12px 24px;
    overflow: visible;
    flex: 1 0 auto;
    height: auto;
  }
  #tab-numbers.active {
    overflow: visible;
  }

  /* Form controls & Search bars */
  .searchbar, .filters, .dsfilters {
    padding: 12px;
    gap: 10px;
    margin-bottom: 10px;
  }
  .field {
    min-width: 100%;
    flex: 1 1 100% !important;
  }
  .field label {
    font-size: 12px;
    font-weight: 600;
  }
  input, select {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    box-sizing: border-box;
  }
  button {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    touch-action: manipulation;
  }
  .searchbar button {
    flex: 1 1 calc(50% - 6px);
  }
  .searchbar button.primary {
    flex: 1 1 100%;
    order: -1;
  }
  .factions {
    flex-wrap: wrap;
  }
  .factions button {
    flex: 1 1 calc(50% - 5px);
  }

  /* Results Bar */
  .resultbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .actions {
    margin-inline-start: 0;
    width: 100%;
    display: flex;
    gap: 6px;
  }
  .actions button {
    flex: 1 1 0;
    min-height: 38px;
    font-size: 12px;
    padding: 6px 8px;
  }

  /* Tables & Scrolling */
  .tablewrap {
    max-height: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    margin-bottom: 12px;
  }
  .tablewrap table {
    min-width: 680px;
  }
  thead th {
    padding: 10px 11px;
    font-size: 12px;
  }
  tbody td {
    padding: 10px 11px;
    font-size: 13px;
  }

  /* Split columns (stacked vertically) */
  .split {
    flex-direction: column;
    gap: 14px;
  }
  .half {
    max-height: none;
    width: 100%;
  }

  /* Extra Datasets */
  .ds-split {
    flex-direction: column;
    gap: 12px;
  }
  .dslist {
    flex: none;
    width: 100%;
    max-height: 220px;
  }
  .ds-table {
    max-height: none;
    width: 100%;
  }

  /* Drawer (Mobile full-width sheet) */
  .drawer {
    width: 100vw;
    max-width: 100vw;
  }
  .drawer-head {
    padding: 14px 16px;
  }
  .drawer-head h2 {
    font-size: 16px;
  }
  .kv {
    grid-template-columns: 110px 1fr;
    gap: 8px 10px;
  }

  /* Modals & Overlays */
  .modal-overlay {
    padding: 10px;
    align-items: flex-end;
  }
  .modal-card {
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 14px 14px 10px 10px;
    padding: 20px 16px;
  }
  .login-card {
    padding: 26px 18px;
    margin: 10px;
    border-radius: 14px;
  }

  /* Tree Modal */
  .tree-modal-card {
    width: 100vw;
    height: 96vh;
    padding: 12px;
    border-radius: 8px;
  }
  .tree-modal-head {
    flex-wrap: wrap;
    gap: 8px;
  }
  .tree-modal-title-group h3 {
    font-size: 14px;
  }
  .tree-modal-actions {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
  }
  .tree-modal-actions button {
    min-height: 34px;
    padding: 4px 8px;
    font-size: 11.5px;
  }

  /* Stats cards */
  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .card {
    padding: 12px;
  }
  .card .v {
    font-size: 20px;
  }
  .chartgrid {
    grid-template-columns: 1fr;
  }

  /* Autocomplete */
  .autocomplete {
    max-height: 220px;
  }
  .autocomplete div {
    padding: 11px 12px;
  }
}

/* 4. Small phones (max-width: 420px) */
@media screen and (max-width: 420px) {
  .cards {
    grid-template-columns: 1fr;
  }
  .bar .lbl {
    width: 90px;
    font-size: 11px;
  }
  .kv {
    grid-template-columns: 95px 1fr;
  }
  .searchbar button {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------- printing */
/* Nothing here is visible on screen: printHead() fills this in and the
   @media print block below promotes it, so a printed page carries its own
   title, the query/filters it came from and a timestamp. */
.printhead{display:none}

@media print{
  @page{size:A4;margin:11mm}
  html,body{
    height:auto !important;overflow:visible !important;display:block !important;
    background:#fff !important;color:#000 !important;font-size:11px;
  }
  .printhead{
    display:block;border-bottom:2px solid #000;margin-bottom:9px;padding-bottom:6px;
  }
  .printhead .ph-title{font-size:15px;font-weight:700}
  .printhead .ph-meta{font-size:10.5px;margin-top:3px}
  .printhead .ph-date{font-size:10px;color:#444;margin-top:2px;text-align:right}
  .topbar,.searchbar,.filters,.resultbar,.actions,.pager,.dslist,.dsfilters,
  .scrim,.drawer-head,.spinner,#statusline,.autocomplete,.hidden{display:none !important}
  /* paper has no buttons */
  button,.btnrow,.fmanual,.chips,.facets{display:none !important}
  .tabpane{overflow:visible !important;padding:0 !important;display:none}
  .tabpane.active{display:block !important}
  body.print-card .tabpane{display:none !important}
  body.print-card .drawer{
    display:flex !important;position:static !important;width:auto !important;
    height:auto !important;max-height:none !important;transform:none !important;
    box-shadow:none !important;border:0 !important;background:#fff !important;
    color:#000 !important;overflow:visible !important;
  }
  body.print-results .drawer{display:none !important}
  .drawer-body{overflow:visible !important;max-height:none !important;padding:0 !important;
    flex:0 0 auto !important}
  .tablewrap,.half,.ds-table{
    overflow:visible !important;max-height:none !important;border:0 !important;
    background:#fff !important;border-radius:0 !important;
  }
  .tablewrap h3{position:static !important;background:#fff !important;color:#000 !important;
    border-bottom:1px solid #666 !important;padding:5px 0 !important}
  .split{display:block !important}
  table{width:100% !important;border-collapse:collapse !important;font-size:9.5px}
  thead{display:table-header-group}
  thead th{
    position:static !important;background:#e8e8e8 !important;color:#000 !important;
    border:1px solid #666 !important;padding:3px 4px !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  tbody td{border:1px solid #999 !important;padding:3px 4px !important;
    white-space:normal !important;max-width:none !important;color:#000 !important}
  tbody tr,.card,.chart,.extnote,.kv{break-inside:avoid;page-break-inside:avoid}
  .kv{grid-template-columns:120px 1fr;gap:4px 10px}
  .kv dt{color:#333 !important;font-weight:600}
  .kv dd{margin:0}
  .section-t{color:#000 !important;border-bottom:1px solid #666 !important}
  .extnote{background:#fff !important;border:1px solid #999 !important;color:#000 !important}
  .extnote .lk{color:#000 !important}
  .workbox{background:#fff !important;border:1px solid #999 !important}
  .workline{color:#000 !important}
  .wrk{color:#000 !important}
  .tag{border:1px solid #666 !important;color:#000 !important;background:#fff !important}
  .pill{background:#e8e8e8 !important;color:#000 !important}
  .muted,.fname,.bar .lbl,.bar .n{color:#333 !important}
  a{color:#000 !important;text-decoration:none !important}
  .card,.chart{background:#fff !important;border:1px solid #999 !important}
  .bar .track{background:#eee !important;border:1px solid #ccc}
  .bar .fill{background:#888 !important;-webkit-print-color-adjust:exact;
    print-color-adjust:exact}

  /* Tree print support */
  body.print-tree .tabpane, body.print-tree .drawer { display: none !important; }
  body.print-tree #treeModal {
    display: block !important; position: static !important;
    width: 100% !important; height: auto !important; background: #fff !important;
    padding: 0 !important;
  }
  body.print-tree .tree-modal-card {
    border: 0 !important; box-shadow: none !important; width: 100% !important;
    height: auto !important; padding: 0 !important; background: #fff !important;
  }
  body.print-tree .tree-modal-viewport {
    background: #fff !important; border: 0 !important; overflow: visible !important;
    padding: 0 !important;
  }
  body.print-tree .tree-modal-actions { display: none !important; }
  body.print-tree .vtree-node {
    background: #fff !important; border: 1px solid #666 !important;
    box-shadow: none !important; color: #000 !important; break-inside: avoid;
  }
  body.print-tree .vtree-name { color: #000 !important; }
  body.print-tree .vtree-avatar { border: 1px solid #888 !important; }
  body.print-tree .vtree-trunk, body.print-tree .vtree-branch-bar, body.print-tree .vtree-child-stem {
    background: #444 !important;
  }
}