:root{
  --bg-0:#101c16;
  --grad1:#203828;
  --grad2:#24382a;
  --gold:#c8a45c;
  --gold-soft:#e3c98a;
  --clay:#8c5b48;
  --plum:#6d4356;
  --teal:#4c7566;
  --parchment:#f8f0dd;
  --parchment-2:#efe4c8;
  --ink:#2a2118;
  --cream:#f3eee0;
  --muted:#9fb0a0;
  --texture-op:0.015;
  --stage-bg:rgba(0,0,0,.12);
  --stage-border:rgba(200,164,92,.18);
}
html[data-theme="light"]{
  --bg-0:#f4ecd8;
  --grad1:#fff3d6;
  --grad2:#f0e2c2;
  --gold:#b4863f;
  --gold-soft:#8a5a2e;
  --cream:#2a2118;
  --muted:#5c5138;
  --texture-op:0.03;
  --stage-bg:rgba(255,255,255,.35);
  --stage-border:rgba(140,91,72,.28);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 700px at 15% -10%, var(--grad1) 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, var(--grad2) 0%, transparent 55%),
    var(--bg-0);
  color:var(--cream);
  font-family:'PT Serif', serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .3s ease;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(0,0,0,var(--texture-op)) 0px, rgba(0,0,0,var(--texture-op)) 1px, transparent 1px, transparent 4px);
  pointer-events:none; z-index:0;
}

.topbar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; border-bottom:1px solid rgba(200,164,92,.18);
}
.eyebrow{ font-family:'Montserrat',sans-serif; letter-spacing:.28em; text-transform:uppercase; font-size:10.5px; color:var(--gold-soft); opacity:.85; }
.topbar-controls{ display:flex; align-items:center; gap:10px; }
.lang-switch, .theme-switch{ display:flex; gap:6px; background:rgba(128,128,128,.08); border:1px solid rgba(200,164,92,.3); border-radius:20px; padding:3px; }
.lang-btn, .theme-btn{
  font-family:'Montserrat',sans-serif; font-size:11px; letter-spacing:.06em; font-weight:600;
  background:transparent; color:var(--muted); border:none; padding:6px 14px; border-radius:16px; cursor:pointer;
  transition:all .18s ease;
}
.theme-btn{ padding:6px 10px; font-size:13px; }
.lang-btn.active, .theme-btn.active{ background:var(--gold); color:var(--bg-0); }
.lang-btn:not(.active):hover, .theme-btn:not(.active):hover{ color:var(--gold-soft); }

.wrap{ position:relative; z-index:1; max-width:1300px; margin:0 auto; padding:32px 24px 70px; }

header.hero{ text-align:center; margin-bottom:16px; }
h1.title{ font-family:'Playfair Display', serif; font-weight:600; font-size:clamp(30px,4.6vw,48px); margin:0 0 12px; color:var(--cream); }
h1.title em{ font-style:italic; color:var(--gold-soft); font-weight:500; }
.subtitle{ font-family:'PT Serif', serif; font-style:italic; color:var(--muted); font-size:14px; max-width:640px; margin:0 auto 24px; line-height:1.6; }

.toolbar{ display:flex; justify-content:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.add-main-btn, .add-free-btn{
  font-family:'Montserrat',sans-serif; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  border:none; padding:13px 24px; border-radius:2px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.add-main-btn{ background:var(--gold); color:var(--bg-0); box-shadow:0 8px 20px rgba(200,164,92,.25); }
.add-main-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(200,164,92,.35); }
.add-free-btn{ background:transparent; color:var(--gold-soft); border:1px solid var(--gold); }
.add-free-btn:hover{ background:rgba(200,164,92,.1); transform:translateY(-1px); }

.link-hint{
  display:none; align-items:center; justify-content:center; gap:14px;
  max-width:480px; margin:0 auto 16px; padding:10px 18px; border-radius:20px;
  background:rgba(200,164,92,.12); border:1px solid rgba(200,164,92,.4);
  font-family:'Montserrat',sans-serif; font-size:12px; color:var(--gold-soft);
}
.link-hint.show{ display:flex; }
.link-hint button{
  font-family:'Montserrat',sans-serif; font-size:11px; background:transparent; border:1px solid var(--gold-soft);
  color:var(--gold-soft); padding:5px 12px; border-radius:14px; cursor:pointer;
}

.stage-scroll{
  position:relative; border:1px solid var(--stage-border); border-radius:6px;
  height:min(70vh, 700px); overflow:auto; background:var(--stage-bg);
}
#stage{ position:relative; width:2800px; height:1900px; }
#treeSvg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
.branch-path{ fill:none; stroke-linecap:round; }
.link-path{ fill:none; stroke-linecap:round; }
#cardsLayer{ position:relative; z-index:1; width:100%; height:100%; }

.card{
  position:absolute; width:172px;
  background:linear-gradient(180deg,var(--parchment) 0%, var(--parchment-2) 100%);
  color:var(--ink); border-radius:3px; padding:16px 14px 14px;
  box-shadow:0 10px 24px rgba(0,0,0,.32), inset 0 0 0 1px rgba(200,164,92,.35);
  cursor:grab; user-select:none; touch-action:none;
  opacity:0; transform:scale(.9);
  animation:cardIn .45s cubic-bezier(.2,.7,.3,1) forwards;
}
.card.dragging{ cursor:grabbing; box-shadow:0 20px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(200,164,92,.5); z-index:6; }
.card.link-source{ box-shadow:0 0 0 3px var(--gold-soft), 0 14px 30px rgba(0,0,0,.4); }
@keyframes cardIn{ to{ opacity:1; transform:scale(1); } }
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent, var(--gold)); border-radius:3px 3px 0 0; }

.card .avatar{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-weight:600; font-size:16px; color:var(--cream);
  background:var(--accent, var(--clay)); margin-bottom:10px; box-shadow:0 3px 8px rgba(0,0,0,.25);
  pointer-events:none; overflow:hidden; background-size:cover; background-position:center;
}
.card .rel{ font-family:'Montserrat',sans-serif; text-transform:uppercase; font-size:9.5px; letter-spacing:.09em; color:var(--accent-dark,#7a6236); margin-bottom:5px; font-weight:600; pointer-events:none; }
.card .name{ font-family:'Playfair Display',serif; font-weight:600; font-size:15px; line-height:1.25; margin-bottom:8px; color:var(--ink); pointer-events:none; min-height:1.25em; }
.card .meta{ font-size:11px; color:#5b4d3a; line-height:1.5; pointer-events:none; }
.card .meta .row{ display:flex; gap:5px; align-items:flex-start; margin-bottom:2px; }
.card .meta svg{ flex:0 0 auto; margin-top:2px; }

.card .icon-btn{
  position:absolute; width:20px; height:20px; border-radius:50%; border:none;
  background:rgba(0,0,0,0.08); font-size:11px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease, transform .15s ease;
}
.card:hover .icon-btn{ opacity:1; }
.card .icon-btn:hover{ transform:scale(1.1); }
.card .del{ top:6px; right:6px; color:#6b4a3a; }
.card .del:hover{ background:rgba(140,60,40,.18); }
.card .edit{ top:6px; right:30px; color:#5b4d3a; }
.card .link-btn{ top:6px; left:6px; color:#5b4d3a; }
.card .link-btn.active-link{ opacity:1; background:var(--gold); color:#fff; }

.side-plus{
  position:absolute; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--accent, var(--gold));
  background:var(--bg-0); color:var(--accent, var(--gold-soft)); font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
  opacity:0; transition:opacity .15s ease, transform .15s ease;
}
.card:hover .side-plus{ opacity:1; }
.side-plus.plus-top{ top:-11px; left:50%; transform:translateX(-50%); }
.side-plus.plus-top:hover{ transform:translateX(-50%) scale(1.15); }
.side-plus.plus-bottom{ bottom:-11px; left:50%; transform:translateX(-50%); }
.side-plus.plus-bottom:hover{ transform:translateX(-50%) scale(1.15); }
.side-plus.plus-left{ left:-11px; top:50%; transform:translateY(-50%); }
.side-plus.plus-left:hover{ transform:translateY(-50%) scale(1.15); }
.side-plus.plus-right{ right:-11px; top:50%; transform:translateY(-50%); }
.side-plus.plus-right:hover{ transform:translateY(-50%) scale(1.15); }

.card.me{ width:190px; box-shadow:0 14px 34px rgba(0,0,0,.4), 0 0 0 2px var(--gold), inset 0 0 0 1px rgba(200,164,92,.5); }
.card.me .avatar{ width:50px; height:50px; font-size:20px; }

/* modal */
.overlay{ position:fixed; inset:0; background:rgba(10,16,12,.72); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:50; padding:20px; }
.overlay.open{ display:flex; }
.modal{ width:100%; max-width:460px; background:var(--parchment); color:var(--ink); border-radius:4px; padding:30px 30px 26px; box-shadow:0 30px 70px rgba(0,0,0,.5); position:relative; max-height:88vh; overflow-y:auto; }
.modal h2{ font-family:'Playfair Display',serif; font-weight:600; font-size:22px; margin:0 0 4px; }
.modal .modal-sub{ font-family:'Montserrat',sans-serif; font-size:11.5px; color:#7a6a52; letter-spacing:.04em; margin-bottom:18px; }
.modal label{ display:block; font-family:'Montserrat',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#7a6a52; margin:15px 0 7px; }
.modal input[type=text], .modal input[type=date], .modal select{ width:100%; padding:11px 12px; border:1px solid #d8c79c; background:#fffdf7; border-radius:2px; font-family:'PT Serif',serif; font-size:14.5px; color:var(--ink); }
.modal select{ font-family:'Montserrat',sans-serif; font-size:13px; }
.modal input:focus, .modal select:focus{ outline:none; border-color:var(--clay); box-shadow:0 0 0 3px rgba(140,91,72,.15); }
.chip-group{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.chip{ font-family:'Montserrat',sans-serif; font-size:12px; padding:7px 13px; border-radius:16px; border:1px solid #d8c79c; background:#fffdf7; cursor:pointer; color:#5b4d3a; transition:all .15s ease; }
.chip.active{ background:var(--clay); border-color:var(--clay); color:#fff; }
.modal .actions{ display:flex; gap:10px; margin-top:22px; }
.btn{ font-family:'Montserrat',sans-serif; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; padding:12px 20px; border-radius:2px; border:none; cursor:pointer; flex:1; transition:transform .15s ease, opacity .15s ease; }
.btn.primary{ background:var(--clay); color:#fff; }
.btn.primary:hover{ transform:translateY(-1px); opacity:.92; }
.btn.ghost{ background:transparent; color:#7a6a52; border:1px solid #d8c79c; }
.btn.ghost:hover{ background:rgba(0,0,0,.03); }
.close-x{ position:absolute; top:16px; right:16px; width:28px; height:28px; border-radius:50%; border:none; background:rgba(0,0,0,.06); cursor:pointer; font-size:15px; color:#5b4d3a; }
.err{ font-family:'Montserrat',sans-serif; font-size:11.5px; color:#a13f2b; margin-top:8px; display:none; }
.err.show{ display:block; }

/* avatar upload */
.avatar-upload-row{ display:flex; align-items:center; gap:14px; margin-top:6px; }
.avatar-upload{
  width:64px; height:64px; border-radius:50%; border:2px dashed #d8c79c; background:#fffdf7;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;
  color:#b6a172; font-size:24px; font-family:'Playfair Display',serif; overflow:hidden; transition:border-color .15s ease;
}
.avatar-upload:hover{ border-color:var(--clay); }
.avatar-upload img{ width:100%; height:100%; object-fit:cover; }
.avatar-upload-text{ font-family:'Montserrat',sans-serif; font-size:11.5px; color:#8a7a5f; line-height:1.5; }

/* color picker */
.color-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.color-swatch{
  width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent;
  transition:transform .15s ease, border-color .15s ease;
}
.color-swatch:hover{ transform:scale(1.1); }
.color-swatch.active{ border-color:var(--ink); }

/* mini popup for connection type */
.mini-overlay{
  position:fixed; inset:0; background:rgba(10,16,12,.6); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:60; padding:20px;
}
.mini-overlay.open{ display:flex; }
.mini-modal{
  background:var(--parchment); color:var(--ink); border-radius:4px; padding:22px; width:100%; max-width:340px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.mini-title{ font-family:'Playfair Display',serif; font-weight:600; font-size:16px; margin-bottom:14px; text-align:center; }
.mini-chips{ display:flex; flex-direction:column; gap:8px; }
.mini-chip{
  font-family:'Montserrat',sans-serif; font-size:12.5px; padding:11px 14px; border-radius:3px;
  border:1px solid #d8c79c; background:#fffdf7; color:#4a3b28; cursor:pointer; text-align:left; transition:all .15s ease;
}
.mini-chip:hover{ background:var(--clay); color:#fff; border-color:var(--clay); }

footer{ text-align:center; margin-top:20px; font-family:'Montserrat',sans-serif; font-size:11px; letter-spacing:.05em; color:var(--muted); opacity:.6; }

@media (max-width:560px){
  .wrap{ padding:24px 12px 60px; }
  .card{ width:150px; }
  .stage-scroll{ height:60vh; }
}