*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#fbf7ef;color:#2a1e12;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
header.site{padding:14px 20px 10px;background:#fbf7ef;border-bottom:1px solid #e6dcc8;display:flex;flex-wrap:wrap;gap:8px 30px;align-items:flex-end;justify-content:space-between}
header.site h1{font-family:Georgia,"Times New Roman",serif;font-size:30px;margin:0;color:#3b2a1a}
.intro{margin:4px 0 0;max-width:760px;color:#6b5a48;font-size:14px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:#4a3a2a}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:20px;height:14px;border-radius:4px;border:1.5px solid #8a7354;background:#fff}
.sw.galhardo{background:#e8f0e3;border-color:#4f7a3a}.sw.italiana{background:#e3ecf7;border-color:#2f5f9e}.sw.eu{background:#fff1c9;border-color:#c08a00}.sw.thick{border-width:3px}
#stage{position:relative;flex:1;min-height:420px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#fffdf8,#f4ecdd)}
#tree{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#tree.drag{cursor:grabbing}
footer.site{padding:8px 16px;text-align:center;font-size:13px;color:#8a7a68;border-top:1px solid #e6dcc8;background:#fbf7ef}
/* cartões */
.card{cursor:pointer}
.card rect.bg{fill:#fff;stroke:#8a7354;stroke-width:1.5}
.card.galhardo rect.bg{fill:#e8f0e3;stroke:#4f7a3a}
.card.italiana rect.bg{fill:#e3ecf7;stroke:#2f5f9e}
.card.eu rect.bg{fill:#fff1c9;stroke:#c08a00}
.card.direta rect.bg{stroke-width:3.2}
.card:not(.direta) rect.bg{stroke-opacity:.75}
.card .ring{fill:none;stroke:#fff;stroke-width:2.5}
.card .nm{font-weight:700;font-size:13px;fill:#2a1e12}
.card .yr{font-size:12px;fill:#5a4a3a}
.card:hover rect.bg{filter:drop-shadow(0 2px 4px rgba(60,40,10,.25))}
.card.sel rect.bg{stroke:#c0392b;stroke-width:3.5}
.card.hl rect.bg{animation:pulse 1.2s ease 2}
@keyframes pulse{50%{stroke:#c0392b;stroke-width:5}}
#edges path{fill:none;stroke:#8a7354;stroke-width:2;stroke-linejoin:round}
#edges path.sp{stroke:#a0522d;stroke-width:2.5}
#edges text{font-size:11px;fill:#8a3b2a;text-anchor:middle}
#genlabels{position:absolute;left:0;top:0;bottom:0;width:0;pointer-events:none}
#genlabels div{position:absolute;left:8px;transform:translateY(-50%);font:600 12px Georgia,serif;color:#9a8468;background:rgba(251,247,239,.85);padding:2px 6px;border-radius:6px;white-space:nowrap}
.tools{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:3}
.btns{display:flex;gap:6px}
.btns button{min-width:38px;height:38px;border:1px solid #cdbfa6;background:#fff;border-radius:10px;font:600 15px system-ui,sans-serif;color:#3b2a1a;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:0 10px}
.btns button:hover{background:#f6efe1}
.searchbox{position:relative;width:240px}
#search{width:100%;padding:9px 12px;border:1px solid #cdbfa6;border-radius:10px;font:inherit;background:#fff}
#results{position:absolute;right:0;left:0;top:42px;margin:0;padding:4px 0;list-style:none;background:#fff;border:1px solid #cdbfa6;border-radius:10px;max-height:300px;overflow:auto;box-shadow:0 4px 14px rgba(0,0,0,.12)}
#results li{padding:7px 12px;cursor:pointer;font-size:14px}#results li:hover,#results li.act{background:#f3ead8}
#results small{color:#8a7a68}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8a7a68}
/* painel de detalhes */
#panel{position:absolute;top:0;right:0;bottom:0;width:min(380px,100%);background:#fff;border-left:1px solid #e3d8c4;box-shadow:-6px 0 20px rgba(60,40,10,.12);overflow:auto;z-index:5;padding:20px 20px 30px}
#pclose{position:absolute;top:8px;right:10px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:#6b5a48}
.ph-top{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.ph-top img,.ph-top svg{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;border:3px solid #e3d8c4}
.ph-top h2{font-family:Georgia,serif;font-size:21px;margin:0 0 2px;color:#3b2a1a}
.ph-top .yrs{color:#6b5a48}
.badge{display:inline-block;font-size:12px;padding:1px 8px;border-radius:10px;margin-top:4px}
.badge.galhardo{background:#e8f0e3;color:#35602a}.badge.italiana{background:#e3ecf7;color:#234a7c}.badge.outros{background:#f1ebe0;color:#6b5a48}.badge.eu{background:#fff1c9;color:#7a5800}
#panel dl{margin:8px 0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:14px}
#panel dt{color:#8a7a68}#panel dd{margin:0}
#panel h3{font-size:14px;margin:16px 0 6px;color:#6b5a48;text-transform:uppercase;letter-spacing:.04em}
#panel ul{margin:0;padding-left:0;list-style:none}#panel li{margin:3px 0}
#panel a.pl{color:#7a4b12;cursor:pointer;text-decoration:underline}
#panel .small{font-size:13px;color:#6b5a48}
#panel .notes{white-space:pre-wrap;font-size:14px;background:#faf6ee;border-radius:8px;padding:8px 10px}
#panel .fs{display:inline-block;margin-top:14px;font-size:14px;color:#2f5f9e}
.private{background:#fff8e1;border:1px solid #f0dca0;border-radius:8px;padding:8px 10px;font-size:14px}
@media (max-width:700px){
  header.site{padding:8px 12px 6px;gap:4px}header.site h1{font-size:22px}.intro{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .legend{font-size:11px;gap:4px 10px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;width:100%;padding-bottom:2px}
  .tools{left:8px;right:8px;top:8px;align-items:stretch}.searchbox{width:auto}.btns{justify-content:flex-end}
  #panel{top:auto;left:0;width:100%;max-height:72%;border-left:0;border-top:1px solid #e3d8c4;border-radius:16px 16px 0 0;box-shadow:0 -6px 20px rgba(60,40,10,.15)}
  #genlabels div{font-size:11px}
}

/* atalhos de edição no painel (levam ao login se não estiver autenticado) */
#panel .edit-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:14px;border-top:1px solid #eee3cf}
#panel .edit-btn{display:inline-block;padding:8px 12px;border-radius:8px;border:1px solid #cdbfa6;background:#fff;color:#3b2a1a;text-decoration:none;font-size:14px;font-weight:600}
#panel .edit-btn:hover{background:#f6efe1}
#panel .edit-btn.add{background:#4f7a3a;border-color:#4f7a3a;color:#fff}
#panel .edit-btn.add:hover{background:#3e622e}