:root{
  --pt-bg:#f5f7fb;
  --pt-card:#ffffff;
  --pt-border:#eef2f7;
  --pt-text:#1f2d3d;
  --pt-muted:#6b7280;
  --pt-map-bg1:#ffffff;
  --pt-map-bg2:#fbfcff;
  --pt-node-fill:#ffffff;
  --pt-node-stroke:#cbd5e1;
  --pt-node-text:#0f172a;
  --pt-node-sub:#64748b;
  --pt-btn-bg:#2b6cb0;
  --pt-btn2-bg:#e5e7eb;
  --pt-btn2-text:#111827;
}

body.pt-theme-dark{
  --pt-bg:#0b1220;
  --pt-card:#0f172a;
  --pt-border:#1f2937;
  --pt-text:#e5e7eb;
  --pt-muted:#9ca3af;
  --pt-map-bg1:#0b1220;
  --pt-map-bg2:#0f172a;
  --pt-node-fill:#0b1220;
  --pt-node-stroke:#334155;
  --pt-node-text:#e5e7eb;
  --pt-node-sub:#94a3b8;
  --pt-btn-bg:#2563eb;
  --pt-btn2-bg:#1f2937;
  --pt-btn2-text:#e5e7eb;
}

body.pt-theme-slate{
  --pt-bg:#0f172a;
  --pt-card:#111827;
  --pt-border:#374151;
  --pt-text:#e5e7eb;
  --pt-muted:#9ca3af;
  --pt-map-bg1:#0f172a;
  --pt-map-bg2:#111827;
  --pt-node-fill:#0f172a;
  --pt-node-stroke:#475569;
  --pt-node-text:#e5e7eb;
  --pt-node-sub:#9ca3af;
  --pt-btn-bg:#3b82f6;
  --pt-btn2-bg:#1f2937;
  --pt-btn2-text:#e5e7eb;
}

body{
  background:var(--pt-bg,#f5f7fb);
  color:var(--pt-text,#111827);
}

.wrap{max-width:none;margin:0;padding:10px;}
.card{
  background:var(--pt-card,#ffffff);
  color:var(--pt-text,#111827);
  border-radius:12px;
  box-shadow:0 2px 10px rgba(20,20,20,.06);
  padding:12px;
  min-height:calc(100vh - 20px);
  border:1px solid var(--pt-border,#eef2f7);
}

.topbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px;}
.title{font-size:18px;font-weight:700;color:var(--pt-text,#111827);}
.muted{color:var(--pt-muted,#6b7280);font-size:13px;}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.tools input,.tools select{padding:8px 10px;border:1px solid #ddd;border-radius:8px;}
.tools select{background:var(--pt-card,#ffffff);color:var(--pt-text,#111827);}
.btn{display:inline-block;padding:8px 12px;border-radius:8px;background:var(--pt-btn-bg);color:#fff;text-decoration:none;border:0;cursor:pointer;}
.btn2{display:inline-block;padding:8px 12px;border-radius:8px;background:var(--pt-btn2-bg);color:var(--pt-btn2-text);text-decoration:none;border:0;cursor:pointer;}

.pt-layout{display:flex;gap:10px;align-items:stretch;}
.pt-map-wrap{
  flex:1;
  border:1px solid var(--pt-border,#eef2f7);
  border-radius:12px;
  background:linear-gradient(180deg,var(--pt-map-bg1,#ffffff) 0%,var(--pt-map-bg2,#fbfcff) 100%);
  height:calc(100vh - 170px);
  min-height:520px;
  overflow:hidden;
  position:relative;
  min-width:0;
}
.pt-map-wrap, .pt-map-wrap *{-webkit-user-select:none;user-select:none;}
.pt-panning, .pt-panning *{-webkit-user-select:none;user-select:none;}
#ptMap{touch-action:none;}

.pt-map-wrap #ptMap{position:relative;z-index:1;}
.pt-zoom-tools{
  position:absolute;
  right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:20;
  align-items:center;
  pointer-events:auto;
}
.pt-zoom-btn{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--pt-border,#eef2f7);
  background:var(--pt-card,#ffffff);
  color:var(--pt-text,#111827);
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.10);
  line-height:44px;
  padding:0;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.pt-zoom-btn:active{transform:scale(.98);}
.pt-zoom-reset{font-size:16px;}
.pt-zoom-text{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--pt-border,#eef2f7);
  background:var(--pt-card,#ffffff);
  color:var(--pt-muted,#6b7280);
  font-size:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.10);
  min-width:44px;
  text-align:center;
}

.pt-side{
  width:340px;
  min-width:260px;
  max-width:560px;
  border:1px solid var(--pt-border,#eef2f7);
  border-radius:12px;
  background:var(--pt-card,#ffffff);
  color:var(--pt-text,#111827);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.pt-side-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--pt-border,#eef2f7);
  background:linear-gradient(180deg,var(--pt-card,#ffffff) 0%,rgba(248,250,252,0.08) 100%);
  user-select:none;
}
.pt-side-title{font-weight:700;color:var(--pt-text,#111827);}
.pt-side-actions{display:flex;gap:8px;align-items:center;}
.pt-side-btn{padding:6px 10px;border:0;border-radius:10px;background:#e5e7eb;color:#111827;cursor:pointer;}
.pt-side-body{padding:10px 12px;overflow:auto;flex:1;min-height:0;}
.pt-side-resizer{position:absolute;left:-3px;top:0;width:6px;height:100%;cursor:col-resize;}
.pt-side.collapsed{width:44px;min-width:44px;}
.pt-side.collapsed .pt-side-body{display:none;}
.pt-side.collapsed .pt-side-title{display:none;}

.pt-panel .p-title{font-weight:700;color:var(--pt-text,#111827);margin-bottom:6px;}
.pt-panel .p-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;}
.pt-panel a{color:#2b6cb0;text-decoration:none;}
.pt-panel a:hover{text-decoration:underline;}
.pt-panel .p-btn{padding:6px 10px;border:0;border-radius:10px;background:#2b6cb0;color:#fff;cursor:pointer;}
.pt-panel .p-btn2{padding:6px 10px;border:0;border-radius:10px;background:#e5e7eb;color:#111827;cursor:pointer;}
.pt-panel .p-muted{color:var(--pt-muted,#6b7280);font-size:12px;white-space:pre-wrap;}

.pt-node{cursor:pointer;}
.pt-node rect{fill:var(--pt-node-fill,#ffffff);stroke:var(--pt-node-stroke,#cbd5e1);stroke-width:1;}
.pt-node:hover rect{stroke:#94a3b8;}
.pt-node.pt-gender-f rect{stroke:#f97316;stroke-width:2;}
.pt-node .t1{font-size:14px;fill:var(--pt-node-text,#111827);font-family:Arial, sans-serif;}
.pt-node .t2{font-size:12px;fill:var(--pt-node-sub,#6b7280);font-family:Arial, sans-serif;}
.pt-node .badge{fill:#2b6cb0;}
.pt-node .badgeText{fill:#fff;font-size:12px;font-family:Arial, sans-serif;}
.pt-edge{stroke-width:2;fill:none;}
.pt-edge-child{stroke:#94a3b8;}
.pt-edge-father{stroke:#2563eb;}
.pt-edge-mother{stroke:#f97316;}

.pt-mobile-topinfo{display:none;}

@media (max-width: 980px){
  .wrap{padding:6px;}
  .card{padding:10px;min-height:calc(100svh - 12px);min-height:calc(100vh - 12px);display:flex;flex-direction:column;padding-bottom:86px;}
  .topbar{gap:8px;margin-bottom:8px;flex:0;}
  .title{display:none;}
  .title{font-size:16px;}
  .muted{font-size:12px;}
  .pt-instruction{display:none;}
  .pt-mobile-topinfo{display:block;font-size:14px;font-weight:700;line-height:1.25;color:var(--pt-text,#111827);white-space:pre-line;}
  .tools{
    gap:6px;
    position:fixed;
    left:6px;
    right:6px;
    bottom:calc(6px + env(safe-area-inset-bottom));
    background:var(--pt-card,#ffffff);
    border:1px solid var(--pt-border,#eef2f7);
    border-radius:12px;
    padding:8px;
    z-index:30;
    box-shadow:0 10px 22px rgba(0,0,0,.12);
  }
  .tools input,.tools select{padding:6px 8px;border-radius:10px;}
  .btn,.btn2{padding:7px 10px;border-radius:10px;}

  .pt-layout{flex-direction:column;flex:1;min-height:0;}
  .pt-map-wrap{flex:1;height:auto;min-height:0;}
  .pt-side{
    width:auto;
    min-width:0;
    max-width:none;
    position:fixed;
    left:6px;
    right:6px;
    bottom:calc(86px + env(safe-area-inset-bottom));
    z-index:25;
    max-height:42svh;
    max-height:42vh;
    box-shadow:0 12px 26px rgba(0,0,0,.16);
  }
  .pt-side-resizer{display:none;}
  .pt-side.collapsed{height:44px;width:auto;min-width:0;}
  .pt-zoom-tools{right:12px;bottom:calc(86px + 12px + env(safe-area-inset-bottom));gap:10px;}
  .pt-zoom-btn{width:50px;height:50px;border-radius:14px;font-size:20px;line-height:50px;}
  .pt-zoom-text{min-width:50px;font-size:12px;padding:7px 10px;}
}