/* ============ TOKENS / TEMAS ============ */
:root{
  --font-display:'Cinzel Decorative', Georgia, serif;
  --font-label:'Cinzel', Georgia, serif;
  --font-body:'Cormorant Garamond', Georgia, serif;
  --line-w:2px;
  --radius:14px;
}
body[data-theme="claro"]{
  --bg-a:#f3ecdc; --bg-b:#e7dcc2; --bg-c:#d9cba6;
  --ink:#2c2418; --ink-soft:#6b5c40;
  --panel:#fbf6e9; --panel-edge:#c9b98d;
  --accent:#2e5339; --accent-2:#8a6d1f;
  --branch:#7a6337;
  --card:#fffcf2; --card-edge:#bfa86d;
  --shadow:0 10px 26px rgba(60,45,15,.22);
  --glow:none;
}
body[data-theme="nublado"]{
  --bg-a:#aebfcf; --bg-b:#8fa3b8; --bg-c:#6f8399;
  --ink:#1d2733; --ink-soft:#46586c;
  --panel:#e8eef4; --panel-edge:#9fb2c4;
  --accent:#33556e; --accent-2:#5e7d95;
  --branch:#4c6377;
  --card:#f4f8fb; --card-edge:#8aa2b8;
  --shadow:0 12px 30px rgba(20,35,55,.28);
  --glow:none;
}
body[data-theme="noturno"]{
  --bg-a:#0b1026; --bg-b:#141a3a; --bg-c:#1d244c;
  --ink:#e9e4d2; --ink-soft:#a99f82;
  --panel:#161c3d; --panel-edge:#3a4478;
  --accent:#d8b95c; --accent-2:#8f7a3a;
  --branch:#8d7f52;
  --card:#1b2148; --card-edge:#6b5f9e;
  --shadow:0 12px 32px rgba(0,0,5,.55);
  --glow:0 0 18px rgba(216,185,92,.15);
}
body[data-theme="neon"]{
  --bg-a:#05060f; --bg-b:#0a0c1c; --bg-c:#0e1126;
  --ink:#e8f6ff; --ink-soft:#8fa8c9;
  --panel:#0c1024; --panel-edge:#233364;
  --accent:#27e6ff; --accent-2:#ff3ec8;
  --branch:#27e6ff;
  --card:#0f1430; --card-edge:#27e6ff;
  --shadow:0 0 22px rgba(39,230,255,.25);
  --glow:0 0 16px rgba(39,230,255,.45), 0 0 40px rgba(255,62,200,.18);
}
body[data-theme="circuito"]{
  --bg-a:#eef6ef; --bg-b:#dcecdf; --bg-c:#c6dfcc;
  --ink:#1f3a2e; --ink-soft:#5a7d67;
  --panel:#f4faf4; --panel-edge:#a9cdb2;
  --accent:#1f7a5c; --accent-2:#c98a2e;
  --branch:#3f8a68;
  --card:#fbfffb; --card-edge:#7fb894;
  --shadow:0 10px 26px rgba(30,70,50,.18);
  --glow:none;
}
body[data-theme="jardim"]{
  --bg-a:#cfe8f7; --bg-b:#dceec9; --bg-c:#9fcf8e;
  --ink:#2c3a24; --ink-soft:#5f7752;
  --panel:#f5faec; --panel-edge:#b3cc9d;
  --accent:#4a7c3f; --accent-2:#c96a8d;
  --branch:#5c8a4e;
  --card:#fdfff6; --card-edge:#93b783;
  --shadow:0 10px 26px rgba(50,80,40,.2);
  --glow:none;
}
body[data-theme="entardecer"]{
  --bg-a:#2b1b3d; --bg-b:#7a3b5e; --bg-c:#e8895a;
  --ink:#f7ead9; --ink-soft:#d0a98e;
  --panel:#3a2547; --panel-edge:#7a5470;
  --accent:#f2a65a; --accent-2:#e26d5c;
  --branch:#d99a6c;
  --card:#412b50; --card-edge:#a06a8c;
  --shadow:0 12px 30px rgba(20,5,25,.5);
  --glow:0 0 16px rgba(242,166,90,.14);
}
body[data-theme="aurora"]{
  --bg-a:#05121f; --bg-b:#0a1f30; --bg-c:#0f2a3d;
  --ink:#dff2ef; --ink-soft:#8fb5ac;
  --panel:#0d2233; --panel-edge:#2c5a5e;
  --accent:#5ef2c0; --accent-2:#8f7ae8;
  --branch:#4fae95;
  --card:#10293c; --card-edge:#3f8f7e;
  --shadow:0 12px 32px rgba(0,5,10,.55);
  --glow:0 0 14px rgba(94,242,192,.16);
}
body[data-theme="espaco"]{
  --bg-a:#03040c; --bg-b:#0a0d22; --bg-c:#141033;
  --ink:#e6e9ff; --ink-soft:#9aa0c9;
  --panel:#0d1128; --panel-edge:#2c335f;
  --accent:#9db4ff; --accent-2:#e8a13c;
  --branch:#6f7ec2;
  --card:#121736; --card-edge:#4a5590;
  --shadow:0 12px 32px rgba(0,0,8,.6);
  --glow:0 0 14px rgba(157,180,255,.14);
}
body[data-theme="glitch"]{
  --bg-a:#14161d; --bg-b:#191c26; --bg-c:#1e222e;
  --ink:#e4e9f2; --ink-soft:#8d96ab;
  --panel:#1b1f2b; --panel-edge:#39415a;
  --accent:#6fd3e8; --accent-2:#e88ac9;
  --branch:#5f92a8;
  --card:#20253340; --card:#202533; --card-edge:#4b6a7d;
  --shadow:0 10px 28px rgba(0,0,5,.5);
  --glow:0 0 10px rgba(111,211,232,.12);
}
body[data-theme="zen"]{
  --bg-a:#d7e8e2; --bg-b:#bcd8ce; --bg-c:#9cc4b6;
  --ink:#22423a; --ink-soft:#5a7d72;
  --panel:#eef7f2; --panel-edge:#a4c8ba;
  --accent:#2f6d5c; --accent-2:#8aa64c;
  --branch:#4f8272;
  --card:#f8fcf9; --card-edge:#84b3a1;
  --shadow:0 10px 26px rgba(30,70,60,.18);
  --glow:none;
}
body[data-theme="areia"]{
  --bg-a:#f1e9d8; --bg-b:#eae0cb; --bg-c:#e0d3ba;
  --ink:#4a4033; --ink-soft:#8a7c65;
  --panel:#f8f3e7; --panel-edge:#cfc0a4;
  --accent:#7a6a52; --accent-2:#5e7d6b;
  --branch:#a08c6d;
  --card:#fdfaf2; --card-edge:#c2b192;
  --shadow:0 10px 24px rgba(80,65,40,.16);
  --glow:none;
}
body[data-theme="agua"]{
  --bg-a:#e3f4f6; --bg-b:#c7e6ea; --bg-c:#a5d3da;
  --ink:#1e3d44; --ink-soft:#5b828b;
  --panel:#f0fafb; --panel-edge:#a9cfd6;
  --accent:#2a7a8c; --accent-2:#4aa3b8;
  --branch:#5195a6;
  --card:#fbfeff; --card-edge:#8ec2cc;
  --shadow:0 10px 26px rgba(30,80,95,.18);
  --glow:none;
}

body[data-theme="folhas"]{
  --bg-a:#f4ede0; --bg-b:#e8dcc6; --bg-c:#d8c4a8;
  --ink:#4a3b2a; --ink-soft:#8a7355;
  --panel:#faf4e8; --panel-edge:#cbb591;
  --accent:#b5654a; --accent-2:#7a9a52;
  --branch:#9a7d54; --card:#fdf9f0; --card-edge:#c4a97e;
  --shadow:0 10px 24px rgba(90,60,30,.18); --glow:none;
}
body[data-theme="cerejeira"]{
  --bg-a:#fbeef3; --bg-b:#f6dce6; --bg-c:#eec2d3;
  --ink:#5a3a48; --ink-soft:#9a6d7e;
  --panel:#fdf3f7; --panel-edge:#e5bcce;
  --accent:#d16a91; --accent-2:#c98aa8;
  --branch:#c98aa8; --card:#fffafc; --card-edge:#e9becf;
  --shadow:0 10px 24px rgba(150,70,110,.16); --glow:none;
}
body[data-theme="viking"]{
  --bg-a:#1a1c1f; --bg-b:#24272b; --bg-c:#2e3238;
  --ink:#e6ddc9; --ink-soft:#a89b80;
  --panel:#22252a; --panel-edge:#4a4d44;
  --accent:#c9a24b; --accent-2:#8a9ba6;
  --branch:#7d6b45; --card:#282b30; --card-edge:#5c5340;
  --shadow:0 12px 30px rgba(0,0,0,.5); --glow:0 0 14px rgba(201,162,75,.12);
}
body[data-theme="neve"]{
  --bg-a:#eef3f8; --bg-b:#d5e2ee; --bg-c:#b7cbdd;
  --ink:#26394c; --ink-soft:#647d94;
  --panel:#f6fafd; --panel-edge:#b4c8da;
  --accent:#3d6b96; --accent-2:#7ba7cc;
  --branch:#6d8faf;
  --card:#fdfeff; --card-edge:#9cb8d0;
  --shadow:0 10px 26px rgba(40,70,100,.18);
  --glow:none;
}
body[data-theme="lareira"]{
  --bg-a:#1d120e; --bg-b:#2b1a12; --bg-c:#3a2317;
  --ink:#f2e3d0; --ink-soft:#bb9a7d;
  --panel:#2a1a12; --panel-edge:#5c3d29;
  --accent:#e8913c; --accent-2:#c9572e;
  --branch:#a4703f;
  --card:#332015; --card-edge:#7a5230;
  --shadow:0 12px 30px rgba(0,0,0,.55);
  --glow:0 0 16px rgba(232,145,60,.14);
}
body[data-theme="biblioteca"]{
  --bg-a:#efe4cf; --bg-b:#e2d2b4; --bg-c:#cdb896;
  --ink:#3c2c1a; --ink-soft:#7d6647;
  --panel:#f6edda; --panel-edge:#c8b28a;
  --accent:#6d4c2a; --accent-2:#9c2b2b;
  --branch:#8a6b42;
  --card:#fbf5e6; --card-edge:#b39566;
  --shadow:0 10px 24px rgba(70,50,20,.22);
  --glow:none;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg-a),var(--bg-b) 55%,var(--bg-c));
  overflow:hidden;
  transition:background .6s ease, color .4s ease;
}

/* ===== fundos decorativos por tema ===== */
#sky{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.star{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:0; animation:twinkle var(--tw,3s) infinite ease-in-out;}
@keyframes twinkle{0%,100%{opacity:.05}50%{opacity:.85}}
.moon{position:absolute; top:7%; right:14%; width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fdf6d8, #d8c98a 70%);
  box-shadow:0 0 60px 18px rgba(240,225,160,.25); }
.cloud{position:absolute; border-radius:50%; filter:blur(26px); background:rgba(255,255,255,.5); animation:drift linear infinite;}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.neonline{position:absolute; height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.14; animation:scan 9s linear infinite;}
@keyframes scan{from{transform:translateY(-10vh)}to{transform:translateY(110vh)}}
.sun{position:absolute; top:6%; right:16%; width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #fff8dd, #f0d98a 65%, transparent 72%);
  box-shadow:0 0 80px 30px rgba(240,215,130,.35);}

/* folhas caindo */
.folha-cai{position:absolute; top:-6vh; width:14px; height:14px; opacity:.85;
  animation:folhaCair var(--dur,12s) linear infinite; animation-delay:var(--del,0s);}
@keyframes folhaCair{
  0%{transform:translate(0,-6vh) rotate(0deg);}
  100%{transform:translate(var(--sway,8vw),110vh) rotate(400deg);}
}
/* viking: runas, brasas subindo e aurora nórdica */
.runa{position:absolute; font-family:'Cinzel',serif; color:rgba(201,162,75,.14);
  font-size:2.2rem; user-select:none; animation:runaPulsa var(--dur,6s) ease-in-out infinite alternate;
  text-shadow:0 0 16px rgba(201,162,75,.35);}
@keyframes runaPulsa{from{opacity:.08;}to{opacity:.28;}}
.brasa{position:absolute; bottom:-3vh; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle,#ffd27a,#e8892f 60%,transparent 72%);
  box-shadow:0 0 8px rgba(232,137,47,.7);
  animation:brasaSobe var(--dur,9s) linear infinite; animation-delay:var(--del,0s);}
@keyframes brasaSobe{
  0%{transform:translate(0,0) scale(1); opacity:0;}
  12%{opacity:.9;}
  80%{opacity:.7;}
  100%{transform:translate(var(--sway,4vw),-110vh) scale(.4); opacity:0;}
}
.aurora-nordica{position:absolute; left:-20%; right:-20%; top:-10%; height:55vh;
  background:radial-gradient(ellipse 60% 100% at 30% 0%, rgba(90,200,160,.14), transparent 60%),
             radial-gradient(ellipse 55% 100% at 72% 10%, rgba(120,150,220,.12), transparent 60%);
  filter:blur(8px); animation:auroraFlui 16s ease-in-out infinite alternate;}
@keyframes auroraFlui{from{transform:translateX(-4%) skewX(-4deg); opacity:.7;}to{transform:translateX(4%) skewX(4deg); opacity:1;}}
.paper-grain{position:absolute; inset:0;
  background-image:radial-gradient(rgba(90,70,30,.06) 1px, transparent 1px);
  background-size:26px 26px;}
/* circuitos bonitinhos */
.trace{position:absolute; height:2px; background:var(--accent); opacity:.13; border-radius:2px;}
.trace.vert{width:2px; height:auto;}
.pad{position:absolute; width:9px; height:9px; border-radius:50%;
  border:2px solid var(--accent); opacity:.2; background:var(--bg-a);}
.chipdot{position:absolute; width:12px; height:12px; border-radius:3px;
  border:2px solid var(--accent); opacity:.15;}
.pulse{position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--accent-2); box-shadow:0 0 8px var(--accent-2);
  opacity:.6; animation:pulserun var(--dur,8s) linear infinite;}
@keyframes pulserun{from{transform:translateX(0)}to{transform:translateX(var(--dist,30vw))}}
/* jardim */
.flor{position:absolute; border-radius:50%; filter:blur(7px);}
.miolo{position:absolute; border-radius:50%; filter:blur(3px);}
.caule{position:absolute; width:3px; filter:blur(2px); border-radius:3px;
  background:linear-gradient(#6a9a55,#4a7c3f);}
.petala{position:absolute; width:9px; height:6px; border-radius:60% 40% 60% 40%;
  opacity:.7; filter:blur(.5px); animation:cair var(--dur,14s) linear infinite;}
@keyframes cair{
  0%{transform:translate(0,-6vh) rotate(0deg);}
  100%{transform:translate(var(--sway,6vw),110vh) rotate(340deg);}
}
/* entardecer */
.solpoente{position:absolute; bottom:18%; left:50%; transform:translateX(-50%);
  width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #ffe9b8, #f2a65a 58%, #e26d5c 78%);
  box-shadow:0 0 120px 50px rgba(242,150,90,.35);}
.vagalume{position:absolute; width:4px; height:4px; border-radius:50%;
  background:#ffe9a8; box-shadow:0 0 8px 2px rgba(255,230,150,.7);
  opacity:0; animation:lampejo var(--tw,4s) infinite ease-in-out, flutuar var(--fl,9s) infinite ease-in-out alternate;}
@keyframes lampejo{0%,100%{opacity:0}50%{opacity:.9}}
@keyframes flutuar{from{transform:translate(0,0)}to{transform:translate(14px,-22px)}}
/* aurora boreal */
.aurora{position:absolute; top:-12vh; left:-25vw; width:150vw; height:48vh;
  filter:blur(46px); opacity:.32; transform:skewY(-6deg);
  background:linear-gradient(100deg, transparent 8%, #5ef2c0 32%, #8f7ae8 58%, #4fd0f2 76%, transparent 92%);
  animation:auroraWave var(--dur,16s) ease-in-out infinite alternate;}
@keyframes auroraWave{
  from{transform:skewY(-7deg) translateX(-5vw); opacity:.24;}
  to{transform:skewY(-3deg) translateX(5vw); opacity:.4;}
}
/* espaço */
.planeta{position:absolute; border-radius:50%; filter:blur(1px);}
.anel{position:absolute; border:2px solid rgba(232,161,60,.4); border-radius:50%;
  transform:rotateX(68deg);}
.satelite{position:absolute; top:0; left:0; width:22px; height:10px; border-radius:3px;
  background:#c9d2e8; opacity:.85;
  animation:orbitar var(--dur,46s) linear infinite;}
.satelite::before,.satelite::after{content:""; position:absolute; top:2px; width:16px; height:6px;
  background:linear-gradient(90deg,#3956a8,#5f7ed8); border-radius:1px;}
.satelite::before{left:-19px;} .satelite::after{right:-19px;}
@keyframes orbitar{
  0%{transform:translate(-14vw,26vh) rotate(14deg); opacity:0;}
  4%{opacity:.85;}
  96%{opacity:.85;}
  100%{transform:translate(114vw,6vh) rotate(14deg); opacity:0;}
}
/* glitch bem leve */
.gbar{position:absolute; height:3px; opacity:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(111,211,232,.35), rgba(232,138,201,.3));
  animation:gflick var(--dur,9s) steps(1,end) infinite;}
@keyframes gflick{
  0%,90%{opacity:0; transform:translateX(0);}
  91%{opacity:.5; transform:translateX(5px);}
  92.2%{opacity:0; transform:translateX(-4px);}
  93%{opacity:.35; transform:translateX(2px);}
  94%,100%{opacity:0; transform:translateX(0);}
}
.gruido{position:absolute; inset:0; opacity:.05;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 4px);}
/* zen: bambu e cachoeira */
.bambu{position:absolute; bottom:-4vh; width:16px; border-radius:8px; filter:blur(1.2px);
  background:repeating-linear-gradient(180deg, #5f9a7c 0 62px, #3f7a5e 62px 67px);
  opacity:.55;}
.folha-bambu{position:absolute; width:34px; height:9px; border-radius:80% 20% 80% 20%;
  background:#5f9a7c; opacity:.5; filter:blur(1px);}
.cachoeira{position:absolute; top:0; width:70px; height:62vh; opacity:.4; filter:blur(2px);
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.75) 0 14px, rgba(220,240,240,.25) 14px 34px);
  border-radius:0 0 40% 40%;
  animation:aguaCai 1.6s linear infinite;}
@keyframes aguaCai{from{background-position:0 0}to{background-position:0 68px}}
.nevoa{position:absolute; border-radius:50%; background:rgba(255,255,255,.55); filter:blur(20px);
  animation:nevoaPulsa 6s ease-in-out infinite alternate;}
@keyframes nevoaPulsa{from{transform:scale(.9); opacity:.4}to{transform:scale(1.1); opacity:.6}}
/* jardim zen de areia rastelada */
.rastelo{position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(178deg, rgba(140,120,90,.14) 0 2px, transparent 2px 18px);}
.pedra-zen{position:absolute; border-radius:46% 54% 52% 48%/58% 52% 48% 42%;
  background:radial-gradient(circle at 38% 30%, #8b8177, #5d554b 75%);
  box-shadow:0 4px 8px rgba(60,50,35,.3);}
.circulo-zen{position:absolute; border:2px solid rgba(140,120,90,.22); border-radius:50%;}
/* água pingando com ondinhas */
.pingo{position:absolute;}
.gota{position:absolute; left:-1.5px; width:3px; height:15px; border-radius:2px;
  background:linear-gradient(#ffffffcc,#7fc6d8); opacity:0;
  animation:pingar var(--dur,6s) linear infinite; animation-delay:var(--del,0s);}
@keyframes pingar{
  0%{transform:translateY(calc(-1 * var(--queda,60vh))); opacity:0;}
  6%{opacity:.85;}
  58%{transform:translateY(0); opacity:.85;}
  60%,100%{transform:translateY(0); opacity:0;}
}
.onda{position:absolute; border:2px solid rgba(60,140,160,.45); border-radius:50%;
  transform:translate(-50%,-50%) scale(.05); opacity:0;
  animation:ondular var(--dur,6s) ease-out infinite; animation-delay:var(--del,0s);}
@keyframes ondular{
  0%,58%{transform:translate(-50%,-50%) scale(.05); opacity:0;}
  62%{opacity:.65;}
  100%{transform:translate(-50%,-50%) scale(1); opacity:0;}
}
/* neve */
.floco{position:absolute; top:-4vh; border-radius:50%; background:#fff;
  box-shadow:0 0 4px rgba(255,255,255,.8); opacity:.85;
  animation:nevar var(--dur,12s) linear infinite; animation-delay:var(--del,0s);}
@keyframes nevar{
  0%{transform:translate(0,-4vh) rotate(0);}
  100%{transform:translate(var(--sway,4vw),108vh) rotate(200deg);}
}
/* lareira */
.lareira-glow{position:absolute; bottom:-16vh; left:50%; transform:translateX(-50%);
  width:110vw; height:52vh; border-radius:50%; filter:blur(50px);
  background:radial-gradient(ellipse at 50% 100%, rgba(232,145,60,.4), rgba(201,87,46,.18) 55%, transparent 75%);
  animation:crepitar 3.4s ease-in-out infinite alternate;}
@keyframes crepitar{from{opacity:.75; transform:translateX(-50%) scale(1);}to{opacity:1; transform:translateX(-50%) scale(1.04);}}
.brasa{position:absolute; bottom:-2vh; width:4px; height:4px; border-radius:50%;
  background:#ffb45e; box-shadow:0 0 6px 2px rgba(255,150,70,.6); opacity:0;
  animation:subir var(--dur,7s) ease-in infinite; animation-delay:var(--del,0s);}
@keyframes subir{
  0%{transform:translate(0,0) scale(1); opacity:0;}
  8%{opacity:.9;}
  100%{transform:translate(var(--sway,3vw),-70vh) scale(.3); opacity:0;}
}
/* biblioteca antiga */
.estante{position:absolute; bottom:0; left:0; right:0; height:16vh; opacity:.28;
  background:repeating-linear-gradient(90deg,
    #5d4224 0 14px, #7a5a32 14px 26px, #4a3018 26px 34px,
    #8a6a3c 34px 52px, #5d4224 52px 60px);
  border-top:6px solid #4a3018; filter:blur(.6px);}
.vela{position:absolute; border-radius:50%; filter:blur(26px);
  background:radial-gradient(circle, rgba(255,214,140,.55), transparent 70%);
  animation:tremular var(--dur,4s) ease-in-out infinite alternate;}
@keyframes tremular{from{opacity:.5; transform:scale(.95);}to{opacity:.85; transform:scale(1.06);}}
.poeira{position:absolute; width:2px; height:2px; border-radius:50%;
  background:rgba(120,90,50,.5); animation:pairar var(--dur,16s) linear infinite; opacity:.5;}
@keyframes pairar{
  0%{transform:translate(0,0);}
  100%{transform:translate(var(--sway,4vw),-30vh); opacity:0;}
}

/* ============ CABEÇALHO ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:14px 22px 0; pointer-events:none;
}
#familyPlaque{pointer-events:auto; max-width:46vw;}
#familyName{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.3rem,3.4vw,2.4rem);
  letter-spacing:.04em; color:var(--ink);
  text-shadow:var(--glow);
  cursor:text; outline:none; padding:2px 6px; border-radius:8px;
  border:1px dashed transparent; transition:border-color .25s;
}
#familyName:hover,#familyName:focus{border-color:var(--panel-edge);}
.plaque-rule{
  height:2px; margin-top:6px;
  background:linear-gradient(90deg,var(--accent-2),transparent 85%);
  position:relative;
}
.plaque-rule::before{content:var(--fleuron,"❦"); position:absolute; right:8%; top:-11px; color:var(--accent-2); font-size:.85rem;}
#crestWrap{
  pointer-events:auto; margin-top:2px; margin-right:2vw;
  width:96px; height:110px; display:flex; align-items:center; justify-content:center;
  position:relative; cursor:pointer;
}
#crestPlate{
  position:absolute; inset:0;
  clip-path:polygon(50% 0,100% 12%,100% 62%,50% 100%,0 62%,0 12%);
  background:radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--panel) 92%, white), var(--panel) 68%);
  border:1px solid var(--panel-edge);
  box-shadow:var(--shadow), inset 0 0 22px rgba(0,0,0,.12);
}
#crestImg{position:relative; max-width:74%; max-height:74%; object-fit:contain;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));}
#crestEmpty{position:relative; font-family:var(--font-label); font-size:.62rem; text-align:center;
  color:var(--ink-soft); padding:0 10px;}

/* ============ BARRA DE FERRAMENTAS ============ */
#toolbar{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  z-index:40; display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  border:1px solid var(--panel-edge); border-radius:999px;
  padding:8px 14px; box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
  max-width:94vw;
}

/* ===== RECORTE DE IMAGEM ===== */
#cropStage{ position:relative; width:100%; aspect-ratio:1/1; max-height:52vh;
  border-radius:12px; overflow:hidden; background:#0006; touch-action:none; cursor:grab; }
#cropStage:active{ cursor:grabbing; }
#cropCanvas{ position:absolute; left:0; top:0; }
#cropFrame{ position:absolute; width:84%; aspect-ratio:1/1; left:50%; top:50%;
  transform:translate(-50%,-50%); border:2px solid var(--accent);
  border-radius:10px; box-shadow:0 0 0 9999px rgba(0,0,0,.5); pointer-events:none; }
#cropFrame.circ{ border-radius:50%; }
/* ===== ABAS DO MODAL DE CONFIGURAÇÕES ===== */
.sett-tabs{ display:flex; gap:8px; margin:2px 0 14px; }
.sett-tab{ flex:1; padding:8px 10px; border-radius:10px; cursor:pointer;
  font-family:var(--font-label); font-size:.72rem; letter-spacing:.05em;
  border:1px solid var(--panel-edge); background:transparent; color:var(--ink-soft); }
.sett-tab.active{ background:var(--accent); color:var(--panel); border-color:var(--accent); }
/* ===== DOCAS LATERAIS ===== */
.dock{
  position:fixed; top:50%; transform:translateY(-50%) translateX(0); z-index:38;
  display:flex; flex-direction:column; gap:6px; max-height:80vh; overflow-y:auto;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--panel) 90%, transparent));
  border:1px solid transparent;
  border-radius:20px; padding:14px 11px;
  box-shadow:var(--shadow), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent),
             inset 0 0 22px color-mix(in srgb, var(--accent) 6%, transparent);
  backdrop-filter:blur(10px);
  transition:transform .3s ease, opacity .3s; width:190px;
}
/* borda com leve gradiente dourado (efeito de moldura "polida") */
.dock::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 55%, transparent),
    transparent 35%, transparent 65%, color-mix(in srgb, var(--accent) 35%, transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.dock-left{ left:12px; }
.dock-right{ right:12px; }
.dock.hidden-dock{ opacity:0; pointer-events:none; }
.dock-left.hidden-dock{ transform:translateY(-50%) translateX(-115%); }
.dock-right.hidden-dock{ transform:translateY(-50%) translateX(115%); }
.dock .tbtn{ text-align:left; border-radius:11px; padding:9px 12px;
  border-color:color-mix(in srgb, var(--panel-edge) 80%, transparent);
  background:color-mix(in srgb, var(--panel) 40%, transparent);
  transition:background .18s, box-shadow .18s, transform .12s, border-color .18s; }
.dock .tbtn:hover{ background:color-mix(in srgb, var(--accent) 16%, transparent);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:0 2px 10px color-mix(in srgb, var(--accent) 18%, transparent); transform:translateX(2px); }
.dock .tbtn:active{ transform:translateX(2px) scale(.98); }
.dock-h{ font-family:var(--font-label); font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); padding:2px 4px 4px; }
.dock-sep{ height:1px; background:var(--panel-edge); margin:4px 0; opacity:.6; }
.dock-tab{
  position:fixed; top:50%; transform:translateY(-50%); z-index:39;
  width:34px; height:52px; cursor:pointer; font-size:1.1rem;
  background:color-mix(in srgb, var(--panel) 90%, transparent);
  border:1px solid var(--panel-edge); color:var(--ink);
  box-shadow:var(--shadow); backdrop-filter:blur(8px);
}
.dock-tab-l{ left:0; border-radius:0 14px 14px 0; transition:left .3s ease; }
.dock-tab-r{ right:0; border-radius:14px 0 0 14px; transition:right .3s ease; }
/* com a doca aberta, a aba se encosta na borda dela (não fica por cima do conteúdo) */
body:has(#dockLeft:not(.hidden-dock)) .dock-tab-l{ left:214px; }
body:has(#dockRight:not(.hidden-dock)) .dock-tab-r{ right:214px; }
.dock-tab:hover{ background:color-mix(in srgb, var(--accent) 16%, transparent); }
.dock-tab.active{ background:var(--accent); color:var(--panel); }
@media (max-width:760px){
  .dock{ width:170px; max-height:70vh; }
  .dock-left{ left:8px; } .dock-right{ right:8px; }
  /* no mobile a doca é mais estreita: empurrão proporcional */
  body:has(#dockLeft:not(.hidden-dock)) #lemeBtn{ transform:translateX(184px); }
  body:has(#dockLeft:not(.hidden-dock)) #lemeBtn:hover{ transform:translateX(184px) rotate(38deg); }
  body:has(#dockLeft:not(.hidden-dock)) .dock-tab-l{ left:186px; }
  body:has(#dockRight:not(.hidden-dock)) .dock-tab-r{ right:186px; }
}

.tbtn{
  font-family:var(--font-label); font-size:.72rem; letter-spacing:.05em;
  border:1px solid var(--panel-edge); background:transparent; color:var(--ink);
  border-radius:999px; padding:7px 13px; cursor:pointer;
  transition:background .2s, box-shadow .2s;
  white-space:nowrap;
}
.tbtn:hover{background:color-mix(in srgb, var(--accent) 14%, transparent);}
.tbtn.primary{background:var(--accent); color:var(--panel); border-color:var(--accent); box-shadow:var(--glow);}
.tbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

#zoomCtl{position:fixed; right:18px; bottom:18px; z-index:40; display:flex; flex-direction:column; gap:6px;}
#zoomCtl .tbtn{width:40px; height:40px; padding:0; font-size:1rem; border-radius:12px;
  background:color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter:blur(8px);}

/* ============ PALCO / ÁRVORE ============ */
#stage{position:fixed; inset:0; z-index:5; cursor:grab; overflow:hidden; touch-action:none; overscroll-behavior:none;}
#stage.dragging{cursor:grabbing;}
#stage.dragging *{user-select:none !important;}
/* cards não selecionam texto por padrão (evita "grudar" texto ao mover) */
.person{user-select:none;}
.person .pname, .person .pmeta{user-select:text;}
#world{position:absolute; left:0; top:0; width:100%; transform-origin:0 0; padding:150px 20px 220px; will-change:transform;}
.tree{display:flex; justify-content:center;}

.tree ul{display:flex; justify-content:center; padding-top:68px; position:relative;}
.tree li{list-style:none; position:relative; padding:34px 14px 0; display:flex; flex-direction:column; align-items:center;}
/* conectores */
.tree li::before,.tree li::after{
  content:""; position:absolute; top:0; height:34px;
  border-top:var(--line-w) solid var(--branch);
}
.tree li::before{left:-1px; width:var(--drop,50%); border-right:var(--line-w) solid var(--branch); border-top-right-radius:0;}
.tree li::after{right:-1px; width:calc(100% - var(--drop,50%));}
.tree li:only-child::before,.tree li:only-child::after{display:none;}
.tree li:only-child{padding-top:0;}
/* filho único casado: cotovelo do centro do pai até o cartão do filho */
.tree li:only-child.oc-desloc{padding-top:34px;}
.tree li:only-child.oc-desloc::before{
  display:block; left:var(--drop,50%); width:0; height:34px;
  border:0; border-left:var(--line-w) solid var(--branch);
}
.tree li:only-child.oc-desloc::after{
  display:block; left:var(--a,50%); width:var(--w,0%); height:0;
  border:0; border-top:var(--line-w) solid var(--branch);
}
.tree li:first-child::before{border:0;}
.tree li:first-child::after{border-top:var(--line-w) solid var(--branch); border-left:var(--line-w) solid var(--branch); border-top-left-radius:12px;}
.tree li:last-child::after{border:0;}
.tree li:last-child::before{border-right:var(--line-w) solid var(--branch); border-top-right-radius:12px;}
.tree ul ul::before{
  content:""; position:absolute; top:0; left:50%; height:68px;
  border-left:var(--line-w) solid var(--branch);
}
.tree ul.hidden-branch{display:none;}

/* casal */
.couple{display:flex; align-items:center; gap:0;}
.marry{
  width:46px; text-align:center; color:var(--accent-2);
  font-size:.9rem; position:relative; top:-6px; user-select:none;
  display:flex; align-items:center; justify-content:center;
}
/* a linha passa ATRÁS do símbolo */
.marry::before{content:""; position:absolute; left:0; right:0; top:14px;
  border-top:var(--line-w) solid var(--branch); z-index:0;}
/* o símbolo vira um medalhão que "corta" a linha, em vez de ser atravessado por ela */
.marry span{position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; margin-top:3px;
  background:var(--bg-b); border:1.5px solid currentColor;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  font-size:.82rem; line-height:1;}

/* ============ CARTÃO DE PESSOA ============ */
.person{
  --frame:#a1873f;
  width:150px; background:var(--card);
  border:2.5px solid var(--frame);
  border-radius:var(--radius);
  box-shadow:var(--shadow), var(--glow);
  padding:14px 10px 14px; text-align:center; cursor:pointer;
  position:relative; transition:transform .18s ease, box-shadow .18s;
}
/* O cartão levanta no hover, exceto quando o ponteiro está sobre um botão,
   para o alvo do clique permanecer estático. */
.person:hover:not(:has(.mini:hover,.collapse-btn:hover,.node-actions:hover)){transform:translateY(-3px);}
.person.selected{outline:2px solid var(--accent); outline-offset:3px;}
.person.dim{opacity:.22; filter:grayscale(.7);}
.person.future{opacity:.45; filter:grayscale(.85);}
.person.future:hover{opacity:.7;}
.person.passed{opacity:.68; filter:grayscale(.35) sepia(.28);}
.tag-mem{
  font-family:var(--font-label); font-size:.55rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
  border:1px dotted var(--ink-soft); border-radius:999px;
  padding:2px 8px; margin:-4px auto 8px; width:fit-content; white-space:nowrap;
  max-width:100%; box-sizing:border-box; white-space:normal; line-height:1.35; text-align:center;
}
/* ===== linha do tempo ===== */
#timeline{
  position:fixed; top:0; left:0; bottom:0; width:min(340px,100vw); z-index:55;
  background:var(--panel); border-right:1px solid var(--panel-edge);
  box-shadow:14px 0 40px rgba(0,0,0,.25);
  transform:translateX(-105%); transition:transform .3s ease;
  display:flex; flex-direction:column;
}
#timeline.open{transform:translateX(0);}
#timeline .thead{padding:18px 18px 10px; border-bottom:1px solid var(--panel-edge); position:relative;}
#timeline h2{font-family:var(--font-display); font-size:1.15rem;}
#tlBody{overflow-y:auto; flex:1; padding:10px 16px 26px;}
.tl-item{
  display:flex; gap:10px; padding:8px 4px; cursor:pointer;
  border-bottom:1px dashed var(--panel-edge); font-size:.98rem; line-height:1.3;
}
.tl-item:hover{background:color-mix(in srgb, var(--accent) 9%, transparent);}
.tl-date{
  font-family:var(--font-label); font-size:.66rem; letter-spacing:.03em;
  color:var(--ink-soft); min-width:84px; padding-top:3px; flex-shrink:0;
}
.tl-now{border:1px solid var(--accent); border-radius:10px; background:color-mix(in srgb, var(--accent) 10%, transparent);}
.tl-sec{font-family:var(--font-label); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin:14px 0 4px;}
@media (max-width:760px){
  #timeline{width:100vw; z-index:57; border-right:none;}
}
.tag-fut{
  font-family:var(--font-label); font-size:.54rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft);
  border:1px dotted var(--ink-soft); border-radius:999px;
  padding:2px 8px; margin:-4px auto 8px; width:fit-content;
  max-width:100%; box-sizing:border-box;           /* nunca vaza do cartão */
  white-space:normal; line-height:1.35; text-align:center;
}
.portrait{
  width:74px; height:74px; margin:0 auto 8px; border-radius:50%;
  border:3px solid var(--frame); overflow:hidden;
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--card) 70%, var(--frame)), var(--card));
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; color:var(--frame);
}
.portrait img{width:100%; height:100%; object-fit:cover;}
.pname{font-family:var(--font-label); font-weight:600; font-size:.88rem; line-height:1.15; letter-spacing:.02em;}
.pmaiden{font-style:italic; font-size:.74rem; color:var(--ink-soft);}
.pdates{font-size:.76rem; color:var(--ink-soft); margin-top:4px; line-height:1.3;}
.badge-incesto{
  display:inline-block; margin-top:6px; font-family:var(--font-label);
  font-size:.58rem; letter-spacing:.06em; padding:2px 8px; border-radius:999px;
  border:1px solid var(--accent-2); color:var(--accent-2);
  max-width:100%; box-sizing:border-box; white-space:normal; line-height:1.3; text-align:center;
}
.badge-adot{border-style:dashed; opacity:.9;}
.gsym{font-size:.72rem; color:var(--ink-soft); font-family:var(--font-body);}
/* vínculo adotivo: conectores tracejados */
.tree li.adopted::before,.tree li.adopted::after{border-top-style:dashed;}
.tree li.adopted::before{border-right-style:dashed;}
.tree li.adopted:first-child::after{border-left-style:dashed;}
/* tipo de relacionamento na linha do casal */
/* ── Tipos de vínculo: cada um com traço e cor próprios ──
   Casamento = linha sólida (laço formal) · Namoro = tracejada (laço leve)
   Amante    = pontilhada (laço secreto). Só muda a APARÊNCIA: os dados
   continuam iguais, então GEDCOM/CSV/Markdown não são afetados. */
.marry.conjuge{ color:var(--frame, #a1873f); }
.marry.conjuge::before{ border-top-style:solid; }

.marry.namoro{ color:#c98aa8; }
.marry.namoro::before{ border-top-style:dashed; border-top-color:#c98aa8; opacity:.8; }

.marry.amante{ color:#c0576b; }
.marry.amante::before{ border-top-style:dotted; border-top-color:#c0576b; opacity:.85; }
.marry.amante span{ border-style:dashed; }
.person.noncanon{border-style:dashed;}
.tag-if{
  font-family:var(--font-label); font-size:.54rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-2);
  border:1px dashed var(--accent-2); border-radius:999px;
  padding:2px 8px; margin:-4px auto 8px; width:fit-content;
  max-width:100%; box-sizing:border-box;
  white-space:normal; line-height:1.35; text-align:center;   /* quebra em vez de cortar */
}
.node-actions{position:absolute; top:-26px; left:50%; transform:translateX(-50%); display:flex; gap:4px; z-index:3;}
.mini{
  width:24px; height:24px; border-radius:50%; border:1px solid var(--panel-edge);
  background:var(--panel); color:var(--ink); cursor:pointer; font-size:.72rem; line-height:1;
  box-shadow:var(--shadow);
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.mini .ico{ width:62%; height:62%; vertical-align:0; }
.mini:hover{background:var(--accent); color:var(--panel);}
.collapse-btn{position:absolute; bottom:-26px; left:50%; transform:translateX(-50%); z-index:3;}

/* ============ PAINEL LATERAL ============ */
#panel{
  position:fixed; top:0; right:0; bottom:0; width:min(360px,92vw); z-index:50;
  background:var(--panel); border-left:1px solid var(--panel-edge);
  box-shadow:-14px 0 40px rgba(0,0,0,.25);
  transform:translateX(105%); transition:transform .3s ease;
  display:flex; flex-direction:column; overflow-y:auto;
}
#panel.open{transform:translateX(0);}
#panel .phead{padding:20px 20px 10px; border-bottom:1px solid var(--panel-edge); position:relative;}
#panel h2{font-family:var(--font-display); font-size:1.25rem; padding-right:34px;}
#panel .sub{font-style:italic; color:var(--ink-soft); font-size:.9rem;}
.closex{position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--panel-edge); background:transparent; color:var(--ink); cursor:pointer; font-size:.9rem;}
#panel .pbody{padding:16px 20px 26px; display:flex; flex-direction:column; gap:14px;}
.info-line{display:flex; gap:8px; font-size:1rem; line-height:1.35;}
.info-line b{font-family:var(--font-label); font-size:.72rem; letter-spacing:.06em; color:var(--ink-soft);
  min-width:96px; padding-top:3px; text-transform:uppercase;}
.desc-box{font-size:1.02rem; line-height:1.45; white-space:pre-wrap;
  border-left:3px solid var(--accent-2); padding-left:12px; font-style:italic;}
.evt{display:flex; justify-content:space-between; gap:10px; font-size:.95rem;
  border-bottom:1px dashed var(--panel-edge); padding:4px 0;}
.evt span:last-child{color:var(--ink-soft); white-space:nowrap;}
.panel-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px;}
.panel-actions .tbtn{border-radius:10px; text-align:center;}
.panel-actions .span2{grid-column:span 2;}
.agroup-b .span2{grid-column:span 2;}
/* botões que ocupam a largura toda podem quebrar o texto (evita vazamento) */
.panel-actions .tbtn.span2, .agroup-b .tbtn.span2{ white-space:normal; line-height:1.25; text-align:center; }
/* nenhum botão vaza da borda, mesmo com fontes largas: quebra e respeita a largura da célula */
.panel-actions .tbtn, .agroup-b .tbtn{ min-width:0; max-width:100%; overflow-wrap:break-word; word-break:break-word; box-sizing:border-box; }
.agroup-h{text-align:left !important;}
.agroup-b{
  grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:8px; border:1px dashed var(--panel-edge); border-radius:12px;
  margin-top:-4px;
}
.agroup-b[hidden]{display:none;}
.person.unknown{border-style:dotted;}
.person.unknown .pname{font-style:italic; color:var(--ink-soft);}
.danger{color:#c0392b; border-color:#c0392b;}
body[data-theme="neon"] .danger{color:#ff5470; border-color:#ff5470;}

/* ============ MODAIS ============ */
.overlay{position:fixed; inset:0; z-index:60;
  background:rgba(6,10,18,.55); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  display:none; align-items:center; justify-content:center; padding:16px;}
.overlay.open{display:flex; animation:overlayIn .25s ease both;}
@keyframes overlayIn{from{opacity:0; backdrop-filter:blur(0);}to{opacity:1;}}
.overlay.open .modal{animation:modalIn .3s cubic-bezier(.22,.9,.3,1) both;}
@keyframes modalIn{from{opacity:0; transform:translateY(12px) scale(.98);}to{opacity:1; transform:none;}}
/* os construtores do zodíaco abrem SEMPRE por cima das configurações */
#calOverlay, #sigOverlay, #loreOverlay{ z-index:66; }
@media (prefers-reduced-motion: reduce){
  .overlay.open, .overlay.open .modal{animation:none;}
}
.modal{
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:18px;
  width:min(520px,96vw); max-height:92vh; overflow-y:auto;
  box-shadow:var(--shadow); padding:22px 22px 18px;
}
.modal h3{font-family:var(--font-display); font-size:1.15rem; margin-bottom:14px;}
.field{margin-bottom:12px;}
.field label{display:block; font-family:var(--font-label); font-size:.68rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px;}
.field input[type="text"],.field textarea,.field select{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--card); border:1px solid var(--panel-edge); border-radius:10px; padding:8px 10px;
}
.field textarea{min-height:84px; resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent);}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.check{display:flex; align-items:center; gap:8px; font-size:.98rem; cursor:pointer;}
.check input{width:17px; height:17px; accent-color:var(--accent);}
.hint{font-size:.8rem; color:var(--ink-soft); margin-top:3px; font-style:italic;}
.evt-row{display:grid; grid-template-columns:1fr 1fr 30px; gap:6px; margin-bottom:6px;}
.evt-row input{width:100%; font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  background:var(--card); border:1px solid var(--panel-edge); border-radius:8px; padding:6px 8px;}
.evt-row button{border:none; background:transparent; color:#c0392b; cursor:pointer; font-size:1rem;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:14px;}
.color-row{display:flex; align-items:center; gap:10px;}
.color-row input[type="color"]{width:46px; height:34px; border:1px solid var(--panel-edge);
  border-radius:8px; background:var(--card); cursor:pointer; padding:2px;}
.swatches{display:flex; gap:6px;}
.sw{width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.25); cursor:pointer;}
.avatar-opt{width:42px; height:42px; border-radius:50%; border:1px solid var(--panel-edge);
  background:var(--card); color:var(--ink); font-size:1.15rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;}
.avatar-opt.active{border:2px solid var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%, transparent);}
.photo-preview{width:72px; height:72px; border-radius:50%; object-fit:cover; border:2px solid var(--panel-edge); display:none;}
.theme-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px;}
.theme-opt{border:2px solid var(--panel-edge); border-radius:12px; padding:10px; cursor:pointer;
  font-family:var(--font-label); font-size:.78rem; text-align:center;}
.theme-opt.active{border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%, transparent);}
.theme-chip{height:26px; border-radius:8px; margin-bottom:6px;}

/* estado vazio */
#empty{
  position:fixed; inset:0; z-index:10; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:16px; text-align:center; padding:20px;
}
#empty.show{display:flex;}
#empty .glyph{font-size:3rem; color:var(--accent-2);}
#empty h2{font-family:var(--font-display); font-size:1.6rem;}
#empty p{font-size:1.1rem; color:var(--ink-soft); max-width:420px;}

#toast{position:fixed; top:16px; left:50%; transform:translateX(-50%) translateY(-80px);
  z-index:80; background:var(--panel); border:1px solid var(--panel-edge); border-radius:999px;
  padding:9px 20px; font-size:.95rem; box-shadow:var(--shadow); transition:transform .3s;}
#toast.show{transform:translateX(-50%) translateY(0);}
#saved{position:fixed; top:14px; right:14px; z-index:79;
  font-family:var(--font-label); font-size:.62rem; letter-spacing:.06em;
  background:color-mix(in srgb, var(--panel) 90%, transparent); border:1px solid var(--panel-edge);
  color:var(--accent); border-radius:999px; padding:4px 11px;
  opacity:0; transition:opacity .35s; pointer-events:none;}
#saved.show{opacity:1;}
.gal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:12px; max-height:60vh; overflow-y:auto;}
.gal-item{text-align:center; cursor:pointer;}
.gal-item .gport{width:62px; height:62px; border-radius:50%; margin:0 auto 4px;
  border:2.5px solid var(--frame,#a1873f); overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--frame,#a1873f);
  background:var(--card);}
.gal-item img{width:100%; height:100%; object-fit:cover;}
.gal-item span{font-size:.78rem; line-height:1.1; display:block;}
/* modo compacto: só nome + símbolos, para árvores enormes */
body.compact .person{width:96px; padding:10px 6px 9px;}
body.compact .portrait,
body.compact .pdates, body.compact .pmaiden,
body.compact .badge-incesto, body.compact .tag-if,
body.compact .tag-fut, body.compact .tag-mem{display:none;}
body.compact .pname{font-size:.78rem;}
/* filtros e evento mundial da linha do tempo */
#tlFilters{display:flex; gap:5px; flex-wrap:wrap; padding:8px 16px 0;}
#tlFilters .tbtn{padding:4px 10px; font-size:.68rem;}
#tlFilters .tbtn.on{background:var(--accent); color:var(--panel); border-color:var(--accent);}
.tl-add{display:grid; grid-template-columns:1fr 84px 34px; gap:5px; padding:8px 16px 4px;}
.tl-add input{font-family:var(--font-body); font-size:.9rem; color:var(--ink);
  background:var(--card); border:1px solid var(--panel-edge); border-radius:8px; padding:5px 8px;}
.tl-add button{border:1px solid var(--panel-edge); background:var(--card); color:var(--ink);
  border-radius:8px; cursor:pointer;}
.tl-del{margin-left:auto; border:none; background:transparent; color:#c0392b; cursor:pointer;}

/* ============ CELULAR & TABLET ============ */
@media (max-width:760px){
  header{padding:10px 12px 0;}
  #familyPlaque{max-width:52vw;}
  #familyName{font-size:clamp(1.05rem,5vw,1.5rem);}
  #crestWrap{width:74px; height:86px;}   /* brasão maior no mobile */
  #crestEmpty{font-size:.56rem;}
  #toolbar{
    bottom:calc(10px + env(safe-area-inset-bottom));
    left:8px; right:8px; transform:none; max-width:none;
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    padding:8px 10px; gap:8px; border-radius:22px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  #toolbar::-webkit-scrollbar{display:none;}
  .tbtn{padding:11px 15px; font-size:.76rem; white-space:nowrap; flex-shrink:0;}
  #zoomCtl{right:10px; bottom:calc(84px + env(safe-area-inset-bottom));}
  #zoomCtl .tbtn{width:46px; height:46px; font-size:1.15rem;}
  #panel{width:100vw; border-left:none;}
  .person{width:118px; padding:10px 8px 9px;}
  .portrait{width:56px; height:56px;}
  .pname{font-size:.8rem;}
  .modal{padding:16px 14px 14px; border-radius:14px; max-height:88vh; overflow-y:auto;}
  .row2{grid-template-columns:1fr;}
  .evt-row{grid-template-columns:1fr 1fr 26px; gap:4px;}
  .panel-actions{grid-template-columns:1fr 1fr;}
  /* docas laterais ocupam altura confortável no mobile */
  .dock{ max-height:66vh; }
}
@media (pointer:coarse){
  .mini{width:34px; height:34px; font-size:.9rem;}
  .node-actions{top:-38px;}
  .collapse-btn{bottom:-38px;}
  .closex{width:40px; height:40px; font-size:1.05rem;}
  .sw{width:30px; height:30px;}
  /* 16px evita o zoom automático do iOS ao focar campos */
  .field input[type="text"],.field textarea,.field select,.evt-row input,#familyName{font-size:16px;}
}
@media (max-width:640px){
  #crestWrap{margin-right:0;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* seletor segmentado de 3 opções (config avançada) */
.seg3{display:flex; gap:4px; background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:12px; padding:4px;}
.seg3 button{flex:1; font-family:var(--font-label); font-size:.68rem; letter-spacing:.02em;
  color:var(--ink-soft); background:transparent; border:none; border-radius:9px;
  padding:8px 6px; cursor:pointer; transition:background .2s, color .2s; line-height:1.2;}
.seg3 button:hover{color:var(--ink);}
.seg3 button.on{background:var(--accent); color:var(--panel); font-weight:600; box-shadow:var(--glow);}

/* opções de fundo da exportação */
.bg-opts{display:flex; flex-wrap:wrap; gap:7px;}
.bg-opt{display:flex; align-items:center; gap:7px; font-family:var(--font-label); font-size:.72rem;
  color:var(--ink); background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:999px; padding:6px 11px 6px 6px; cursor:pointer; transition:border-color .2s, box-shadow .2s;}
.bg-opt:hover{border-color:var(--accent);}
.bg-opt.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--glow);}
.bg-opt .sw{width:18px; height:18px; border-radius:50%; border:1px solid rgba(128,128,128,.4); flex:none;}
/* xadrez indicando transparência real */
.bg-opt .sw-transp{
  background-image:
    linear-gradient(45deg,#bbb 25%,transparent 25%),
    linear-gradient(-45deg,#bbb 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#bbb 75%),
    linear-gradient(-45deg,transparent 75%,#bbb 75%);
  background-size:8px 8px; background-position:0 0,0 4px,4px -4px,-4px 0; background-color:#fff;}

/* -----------------------------------------------------------
   ESTILOS DE CARTÃO (troca por data-card no body)
   Padrão = clássico (nada muda). Os demais reestilizam .person.
   ----------------------------------------------------------- */

/* ── COMPACTO: menor, retrato menor, ideal p/ árvores grandes ── */
body[data-card="compacto"] .person{ width:112px; padding:12px 7px 11px; border-width:2px; }
body[data-card="compacto"] .portrait{ width:48px; height:48px; border-width:2px; font-size:1.15rem; margin-bottom:5px; }
body[data-card="compacto"] .pname{ font-size:.74rem; }
body[data-card="compacto"] .pmaiden{ font-size:.62rem; }
body[data-card="compacto"] .pdates{ font-size:.64rem; margin-top:2px; }

/* ── MOLDURA: acabamento de quadro/brasão, borda dourada dupla ── */
body[data-card="moldura"] .person{
  border-width:2px;
  border-image:linear-gradient(150deg,
    color-mix(in srgb, var(--frame) 100%, white 30%),
    var(--frame) 40%, color-mix(in srgb, var(--frame) 70%, black 20%) 70%,
    var(--frame)) 1;
  box-shadow:var(--shadow), 0 0 0 3px color-mix(in srgb, var(--card) 100%, transparent),
    0 0 0 4px color-mix(in srgb, var(--frame) 60%, transparent),
    inset 0 0 26px color-mix(in srgb, var(--frame) 12%, transparent);
  border-radius:14px;
}
body[data-card="moldura"] .portrait{
  border-width:2px;
  box-shadow:0 0 0 3px var(--card), 0 0 0 4px color-mix(in srgb, var(--frame) 70%, transparent),
    0 3px 10px rgba(0,0,0,.3);
}
body[data-card="moldura"] .pname{ letter-spacing:.05em; }
/* ornamento sutil acima do nome */
body[data-card="moldura"] .pname::before{ content:"❦"; display:block; font-size:.6rem;
  color:color-mix(in srgb, var(--frame) 80%, transparent); margin-bottom:1px; }

/* ── MINIMALISTA: sem moldura, linhas finas, limpo ── */
body[data-card="minimal"] .person{
  border:none; background:transparent; box-shadow:none;
  border-radius:12px;
}
body[data-card="minimal"] .person:hover{ background:color-mix(in srgb, var(--card) 55%, transparent); }
body[data-card="minimal"] .person:hover:not(:has(.mini:hover,.collapse-btn:hover,.node-actions:hover)){ transform:translateY(-2px); }
body[data-card="minimal"] .person.selected{ background:color-mix(in srgb, var(--card) 70%, transparent); outline:1px solid var(--accent); }
body[data-card="minimal"] .portrait{ border-width:1.5px; box-shadow:none; }
body[data-card="minimal"] .pmaiden, body[data-card="minimal"] .pdates{ opacity:.85; }
/* sem moldura: botões ficam totalmente acima do retrato, sem sobrepor */

/* ── mini-prévias no seletor das Avançadas ── */
.card-styles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.card-styles button{ display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--font-label); font-size:.66rem; color:var(--ink-soft);
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:12px;
  padding:10px 6px 8px; cursor:pointer; transition:border-color .2s, box-shadow .2s, color .2s; }
.card-styles button:hover{ color:var(--ink); border-color:var(--accent); }
.card-styles button.on{ color:var(--ink); border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), var(--glow); }
.cs-demo{ width:38px; height:46px; border-radius:7px; background:var(--card);
  border:2px solid var(--frame, #a1873f); display:flex; align-items:flex-start;
  justify-content:center; padding-top:6px; position:relative; }
.cs-portrait{ width:18px; height:18px; border-radius:50%; background:var(--panel);
  border:2px solid var(--frame, #a1873f); display:block; }
.cs-compacto{ width:30px; height:38px; }
.cs-compacto .cs-portrait{ width:13px; height:13px; }
.cs-moldura{ box-shadow:0 0 0 2px var(--card), 0 0 0 3px color-mix(in srgb, var(--frame,#a1873f) 70%, transparent); }
.cs-minimal{ border:none; background:transparent; }
.cs-minimal .cs-portrait{ border-width:1.5px; }

/* -----------------------------------------------------------
   ZODÍACO — calendário do mundo, constelações e histórias
   ----------------------------------------------------------- */

/* modal maior, para os construtores */
.modal-lg{ max-width:640px; width:min(640px, 94vw); max-height:88vh; overflow-y:auto; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:560px){ .grid2{ grid-template-columns:1fr; } }

/* botões do modo personalizado */
.zod-btns{ display:flex; flex-wrap:wrap; gap:8px; }
.zod-btns .tbtn{ flex:1 1 auto; min-width:0; white-space:normal; }

/* ── construtor de meses ── */
.cal-meses{ display:flex; flex-direction:column; gap:6px; max-height:34vh; overflow-y:auto;
  padding:8px; border:1px dashed var(--panel-edge); border-radius:12px; }
.cal-mes{ display:grid; grid-template-columns:26px 1fr 78px 70px 28px; gap:6px; align-items:center; }
.cal-mes input{ min-width:0; padding:6px 8px; border-radius:8px;
  border:1px solid var(--panel-edge); background:var(--panel); color:var(--ink);
  font-family:var(--font-body, Georgia, serif); font-size:.86rem; }
.cal-mes input:focus{ outline:none; border-color:var(--accent); }
.cal-num{ font-family:var(--font-label); font-size:.66rem; color:var(--ink-soft); text-align:center; }
.cal-mes .mini{ width:26px; height:26px; font-size:.7rem; }
@media (max-width:560px){
  .cal-mes{ grid-template-columns:22px 1fr 60px 54px 26px; gap:4px; }
  .cal-mes input{ padding:5px 6px; font-size:.8rem; }
}

/* prévia do calendário */
.cal-previa{ margin-top:10px; padding:10px 12px; border-radius:10px;
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  font-size:.86rem; line-height:1.5; color:var(--ink); }
.cal-previa b{ color:var(--accent); }

/* caixa de revisão (pendências ou tudo certo) */
.cal-alerta{ padding:12px 14px; border-radius:12px;
  background:color-mix(in srgb, #c96a4a 12%, transparent);
  border:1px solid color-mix(in srgb, #c96a4a 45%, transparent); font-size:.88rem; }
.cal-alerta.ok{ background:color-mix(in srgb, var(--accent) 12%, transparent);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.cal-alerta ul{ margin:6px 0 10px; padding-left:18px; line-height:1.6; }
.cal-acoes{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── construtor de constelações ── */
.sig-lista{ display:flex; flex-direction:column; gap:10px; max-height:40vh; overflow-y:auto; padding-right:4px; }
.sig-item{ padding:10px; border:1px solid var(--panel-edge); border-radius:12px;
  background:color-mix(in srgb, var(--panel) 45%, transparent); }
.sig-linha{ display:flex; align-items:center; gap:6px; }
.sig-linha + .sig-linha{ margin-top:6px; }
.sig-item input, .sig-item select, .sig-item textarea{
  padding:6px 8px; border-radius:8px; border:1px solid var(--panel-edge);
  background:var(--panel); color:var(--ink); font-size:.86rem; min-width:0;
  font-family:var(--font-body, Georgia, serif); }
.sig-item input:focus, .sig-item select:focus, .sig-item textarea:focus{ outline:none; border-color:var(--accent); }
.sig-sym{ width:44px; text-align:center; font-size:1rem !important; }
.sig-nome{ flex:1; }
.sig-datas{ font-size:.78rem; color:var(--ink-soft); flex-wrap:wrap; }
.sig-dia{ width:56px; }
.sig-datas select{ flex:1; min-width:90px; }
.sig-lore{ width:100%; margin-top:6px; resize:vertical; line-height:1.45; }
.sig-item .mini{ width:26px; height:26px; font-size:.7rem; flex:none; }

/* ── visor de histórias das constelações ── */
.lore-corpo{ display:flex; flex-direction:column; gap:10px; max-height:64vh; overflow-y:auto; padding-right:4px; }
.lore-card{ padding:12px 14px; border-radius:12px;
  background:color-mix(in srgb, var(--panel) 55%, transparent);
  border:1px solid var(--panel-edge); }
.lore-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lore-h b{ font-family:var(--font-label); letter-spacing:.04em; color:var(--ink); }
.lore-sym{ font-size:1.25rem; color:var(--accent); }
.lore-per{ font-size:.74rem; color:var(--ink-soft); font-style:italic; }
.lore-txt{ margin:8px 0 0; font-size:.92rem; line-height:1.6; color:var(--ink-soft);
  white-space:pre-wrap; }

/* A Cinzel Decorative usa kerning negativo em alguns pares e encavala
   letras vizinhas (ex.: "OO"); desligar o kerning evita a sobreposição. */
#panel h2, h1, .dock-h, .tl-sec, .info-line b, .lore-h b, .modal h3{
  font-kerning:none;
  font-variant-ligatures:none;
  font-feature-settings:"kern" 0, "liga" 0, "clig" 0, "dlig" 0, "hlig" 0;
}

/* etiqueta "com Fulano" nos filhos de genitores com vários parceiros */
.pcopai{ font-size:.58rem; font-style:italic; color:var(--ink-soft);
  margin-top:3px; opacity:.9; letter-spacing:.02em;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ilhas (linhagens recortadas) lado a lado, com respiro */
.tree{ gap:80px; flex-wrap:wrap; align-items:flex-start; }

/* --- MODO LIGAÇÕES (Ctrl+Shift com um perfil aberto) --- */
body.modo-ligacao #world .person{ opacity:.32; transition:opacity .15s, box-shadow .15s; }
body.modo-ligacao #world .person.selected{ opacity:1;
  box-shadow:0 0 0 2px var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); }
body.modo-ligacao #world .person:hover{ opacity:1;
  box-shadow:0 0 0 2px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 55%, transparent); }
#ligacaoTag{ position:fixed; z-index:120; pointer-events:none;
  background:color-mix(in srgb, var(--panel) 96%, transparent);
  border:1px solid var(--accent); border-radius:999px; padding:7px 14px;
  font-family:var(--font-body, Georgia, serif); font-size:.85rem; color:var(--ink);
  box-shadow:0 6px 22px rgba(0,0,0,.35); backdrop-filter:blur(6px);
  max-width:min(420px, 86vw); }
#ligacaoTag b{ color:var(--accent); font-family:var(--font-label); font-size:.78rem; letter-spacing:.03em; }

/* Zonas-ponte invisíveis: mantêm o estado de hover estável nas bordas do
   cartão e dos botões flutuantes durante a elevação de 3px. */
.person::before{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:9px; }
.node-actions::after{ content:""; position:absolute; left:-10px; right:-10px; bottom:-10px; height:14px; }
.collapse-btn::after{ content:""; position:absolute; left:-10px; right:-10px; top:-10px; height:14px; }

/* etiqueta de filiação-texto (quando a linha de sangue não pode ser desenhada) */
.pfiliacao{ font-size:.56rem; font-style:italic; color:var(--accent-2);
  margin-top:3px; opacity:.9; max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

/* ── Novos tipos de vínculo: cada um com traço e cor próprios ──
   Só muda a aparência da linha; os dados (GEDCOM/exports) não mudam. */
.marry.caso{ color:#b98a5e; }
.marry.caso::before{ border-top-style:dashed; border-top-color:#b98a5e; opacity:.7; }

.marry.arranjo{ color:#8a94b8; }
.marry.arranjo::before{ border-top-style:solid; border-top-color:#8a94b8; opacity:.7; }

.marry.forcado{ color:#9b6b6b; }
.marry.forcado::before{ border-top-style:dotted; border-top-color:#9b6b6b; opacity:.65; }
.marry.forcado span{ border-style:dashed; }

.marry.magico{ color:#9d7fc9; }
.marry.magico::before{ border-top-style:dashed; border-top-color:#9d7fc9; opacity:.75; }
.marry.magico span{ box-shadow:0 0 8px color-mix(in srgb, #9d7fc9 55%, transparent); }

.marry.onirico{ color:#6fa8c9; }
.marry.onirico::before{ border-top-style:dotted; border-top-color:#6fa8c9; opacity:.8; }
.marry.onirico span{ box-shadow:0 0 8px color-mix(in srgb, #6fa8c9 50%, transparent); }

.marry.desconhecido{ color:var(--ink-soft); }
.marry.desconhecido::before{ border-top-style:dotted; border-top-color:var(--ink-soft); opacity:.55; }

/* ícones SVG — alinham com o texto e herdam a cor do tema */
.ico{ display:inline-block; vertical-align:-0.16em; flex:none; }
.marry span .ico{ width:64%; height:64%; vertical-align:0; }

/* conectores da árvore são decorativos: nunca interceptam cliques */
.tree li::before, .tree li::after, .tree ul::before, .tree ul ul::before{ pointer-events:none; }

/* união estável: contínua e serena, quase um casamento */
.marry.uniao{ color:#8fae8a; }
.marry.uniao::before{ border-top-style:solid; border-top-color:#8fae8a; opacity:.85; }

/* divorciados: a linha se parte — o laço existiu e terminou */
.marry.divorcio{ color:#a09a90; }
.marry.divorcio::before{ border-top-style:solid; border-top-color:#a09a90; opacity:.5;
  -webkit-mask:linear-gradient(90deg,#000 0 34%,transparent 34% 66%,#000 66%);
  mask:linear-gradient(90deg,#000 0 34%,transparent 34% 66%,#000 66%); }
.marry.divorcio span{ opacity:.85; }

/* concubinato: sólido mas com "impedimento" (traço-e-ponto) */
.marry.concubinato{ color:#b08f6e; }
.marry.concubinato::before{ border-top-style:dashed; border-top-color:#b08f6e; opacity:.8; }


/* ── Molduras de retrato (escolha por personagem) ── */
.moldura-quadro{ border-radius:16px !important; }
.moldura-losango{ border-radius:0 !important;
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.moldura-escudo{ border-radius:0 !important;
  clip-path:polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }

/* chip de prévia da moldura no editor */
.moldura-prev{ width:56px; height:56px; flex:none; border-radius:50%;
  background:var(--accent); border:3px solid var(--panel-edge); opacity:.92;
  transition:border-radius .18s ease, clip-path .18s ease; }

/* ── Entrada em cascata (só ao chegar na árvore / trocar de árvore) ── */
body.arvore-entra .tree .person{
  animation:cardIn .7s cubic-bezier(.18,.7,.28,1) both;
  animation-delay:var(--ei, 0ms);
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(24px) scale(.94); filter:blur(2px); }
  to{ opacity:1; transform:none; filter:none; }
}
/* as linhas da árvore se desenham DEPOIS que os cartões pousam */
body.arvore-entra .tree li::before,
body.arvore-entra .tree li::after,
body.arvore-entra .tree ul ul::before{
  animation:linhaIn .5s ease both;
  animation-delay:calc(var(--ei, 0ms) + 420ms);
}
@keyframes linhaIn{ from{ opacity:0; } }
/* os medalhões de vínculo dão um pulinho por último */
body.arvore-entra .marry span{
  animation:medalhaoIn .45s cubic-bezier(.3,1.4,.5,1) both;
  animation-delay:calc(var(--ei, 0ms) + 520ms);
}
@keyframes medalhaoIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){
  body.arvore-entra .tree .person,
  body.arvore-entra .tree li::before,
  body.arvore-entra .tree li::after,
  body.arvore-entra .tree ul ul::before,
  body.arvore-entra .marry span{ animation:none; }
}

/* ── Moldura interna dupla: um fio delicado dentro de cada cartão ── */
.person::after{
  content:""; position:absolute; inset:5px; border-radius:12px;
  border:1px solid var(--frame); opacity:.28; pointer-events:none;
}
body[data-card="minimal"] .person::after,
body.compact .person::after{ display:none; }


/* seletor duplo de molduras (config principais) */
.mold-duplo{ display:flex; gap:10px; margin-top:10px; }
.mold-col{ flex:1; min-width:0; border:1px solid var(--panel-edge); border-radius:10px; padding:8px; background:color-mix(in srgb, var(--panel) 60%, transparent); }
.mold-col-title{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; opacity:.75; margin-bottom:6px; }
.mold-col input, .mold-col select{ width:100%; margin-bottom:6px; }
.mold-lista{ max-height:180px; overflow:auto; display:flex; flex-direction:column; gap:4px; }
.mold-item{ padding:6px 9px; border:1px solid var(--panel-edge); border-radius:8px; cursor:pointer;
  font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mold-item:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.mold-item.aplicado{ border-style:dashed; }
.mold-vazio{ opacity:.55; font-size:.8rem; font-style:italic; padding:6px; }
@media (max-width:700px){ .mold-duplo{ flex-direction:column; } }

/* ex-namorados: o pontilhado do namoro, desbotado e partido ao meio */
.marry.exnamoro{ color:#a9868f; }
.marry.exnamoro::before{ border-top-style:dotted; border-top-color:#a9868f; opacity:.5;
  -webkit-mask:linear-gradient(90deg,#000 0 36%,transparent 36% 64%,#000 64%);
  mask:linear-gradient(90deg,#000 0 36%,transparent 36% 64%,#000 64%); }
.marry.exnamoro span{ opacity:.85; }