.pill{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
:root{
  --text:#173154;
  --text2:#0f2542;
  --muted:#4f6b93;
  --shadow: 0 10px 30px rgba(15,37,66,.18);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue";
  --bg1:#d7e1ee;
  --bg2:#b3c4db;
  --panel: rgba(255,255,255,.78);
  --panelSolid:#ffffff;
  --border: rgba(20,70,140,.16);
  --accent:#2a6fe0;
  --accent2:#4e8fe8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
    background: radial-gradient(1200px 700px at 12% 10%, var(--bg1) 0%, var(--bg2) 58%, #8fa7c6 100%);
  color:var(--text);
  font-family:var(--font);
  overflow:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22360%22%20height%3D%22360%22%20viewBox%3D%220%200%20360%20360%22%3E%0A%3Cdefs%3E%0A%20%20%3Cpattern%20id%3D%22batik%22%20width%3D%22120%22%20height%3D%22120%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22none%22%2F%3E%0A%20%20%20%20%3C%21--%20Kawung-inspired%20ovals%20--%3E%0A%20%20%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%2843%2C124%2C255%2C0.14%29%22%20stroke-width%3D%224%22%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2230%22%20cy%3D%2230%22%20rx%3D%2220%22%20ry%3D%2228%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2290%22%20cy%3D%2230%22%20rx%3D%2220%22%20ry%3D%2228%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2230%22%20cy%3D%2290%22%20rx%3D%2220%22%20ry%3D%2228%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2290%22%20cy%3D%2290%22%20rx%3D%2220%22%20ry%3D%2228%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%2843%2C124%2C255%2C0.10%29%22%20stroke-width%3D%222%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M60%202%20C78%2020%2C%2078%2040%2C%2060%2058%20C42%2040%2C%2042%2020%2C%2060%202%20Z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M60%2062%20C78%2080%2C%2078%20100%2C%2060%20118%20C42%20100%2C%2042%2080%2C%2060%2062%20Z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M2%2060%20C20%2042%2C%2040%2042%2C%2058%2060%20C40%2078%2C%2020%2078%2C%202%2060%20Z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M62%2060%20C80%2042%2C%20100%2042%2C%20118%2060%20C100%2078%2C%2080%2078%2C%2062%2060%20Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%21--%20Isen%20dots%20--%3E%0A%20%20%20%20%3Cg%20fill%3D%22rgba%2843%2C124%2C255%2C0.10%29%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%223.2%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%2260%22%20r%3D%222.2%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2290%22%20cy%3D%2260%22%20r%3D%222.2%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2230%22%20r%3D%222.2%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2290%22%20r%3D%222.2%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%221.6%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%22105%22%20cy%3D%2215%22%20r%3D%221.6%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2215%22%20cy%3D%22105%22%20r%3D%221.6%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%22105%22%20cy%3D%22105%22%20r%3D%221.6%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%3C%2Fpattern%3E%0A%3C%2Fdefs%3E%0A%3Crect%20width%3D%22360%22%20height%3D%22360%22%20fill%3D%22url%28%23batik%29%22%2F%3E%0A%3C%2Fsvg%3E");
  background-size:360px 360px;
  background-repeat:repeat;
  opacity:.16;
  mix-blend-mode:normal;
}

body.publicPage--tree{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%0A%3Cdefs%3E%0A%20%20%3Cpattern%20id%3D%22batikWhiteBody%22%20width%3D%2280%22%20height%3D%2280%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%3Crect%20width%3D%2280%22%20height%3D%2280%22%20fill%3D%22none%22%2F%3E%0A%20%20%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%28163%2C196%2C236%2C0.36%29%22%20stroke-width%3D%222.2%22%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2220%22%20cy%3D%2220%22%20rx%3D%2214%22%20ry%3D%2220%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2260%22%20cy%3D%2220%22%20rx%3D%2214%22%20ry%3D%2220%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2220%22%20cy%3D%2260%22%20rx%3D%2214%22%20ry%3D%2220%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2260%22%20cy%3D%2260%22%20rx%3D%2214%22%20ry%3D%2220%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%3C%2Fpattern%3E%0A%3C%2Fdefs%3E%0A%3Crect%20width%3D%22240%22%20height%3D%22240%22%20fill%3D%22url%28%23batikWhiteBody%29%22%2F%3E%0A%3C%2Fsvg%3E"),
    radial-gradient(1200px 760px at 14% 8%, #e7f0fb 0%, #d5e5f7 42%, #c4daf1 74%, #b1cde8 100%);
  background-size:240px 240px, 100% 100%;
  background-repeat:repeat, no-repeat;
}

body.publicPage--tree::before{
  display:none;
}

body.publicPage--tree .canvas{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%0A%3Cdefs%3E%0A%20%20%3Cpattern%20id%3D%22batikWhiteCanvas%22%20width%3D%2280%22%20height%3D%2280%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%3Crect%20width%3D%2280%22%20height%3D%2280%22%20fill%3D%22none%22%2F%3E%0A%20%20%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%28155%2C190%2C233%2C0.42%29%22%20stroke-width%3D%222.4%22%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2220%22%20cy%3D%2220%22%20rx%3D%2214%22%20ry%3D%2220%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2260%22%20cy%3D%2220%22%20rx%3D%2214%22%20ry%3D%2220%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2220%22%20cy%3D%2260%22%20rx%3D%2214%22%20ry%3D%2220%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2260%22%20cy%3D%2260%22%20rx%3D%2214%22%20ry%3D%2220%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%28133%2C171%2C220%2C0.24%29%22%20stroke-width%3D%221.2%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M40%201%20C52%2013%2C%2052%2027%2C%2040%2039%20C28%2027%2C%2028%2013%2C%2040%201%20Z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M40%2041%20C52%2053%2C%2052%2067%2C%2040%2079%20C28%2067%2C%2028%2053%2C%2040%2041%20Z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M1%2040%20C13%2028%2C%2027%2028%2C%2039%2040%20C27%2052%2C%2013%2052%2C%201%2040%20Z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M41%2040%20C53%2028%2C%2067%2028%2C%2079%2040%20C67%2052%2C%2053%2052%2C%2041%2040%20Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%3C%2Fpattern%3E%0A%3C%2Fdefs%3E%0A%3Crect%20width%3D%22240%22%20height%3D%22240%22%20fill%3D%22url%28%23batikWhiteCanvas%29%22%2F%3E%0A%3C%2Fsvg%3E"),
    linear-gradient(180deg, #e7f0fb 0%, #d7e6f7 58%, #c7dcf2 100%);
  background-size:240px 240px, 100% 100%;
  background-repeat:repeat, no-repeat;
}

body.publicPage--tree .stage,
body.publicPage--tree #treeSvg{
  background:transparent !important;
}

@keyframes treeBackdropBubbleFloat{
  0%{
    transform:translate3d(0, 28px, 0) scale(.72);
    opacity:0;
  }
  12%{
    opacity:0;
  }
  22%{
    opacity:.5;
  }
  54%{
    transform:translate3d(18px, -38vh, 0) scale(1);
    opacity:.38;
  }
  82%{
    opacity:.18;
  }
  100%{
    transform:translate3d(-14px, -84vh, 0) scale(1.14);
    opacity:0;
  }
}

@keyframes treeBackdropBubbleBurst{
  0%, 68%{
    opacity:0;
    transform:translate(-50%, -50%) scale(.18);
  }
  76%{
    opacity:.42;
    transform:translate(-50%, -50%) scale(.9);
  }
  100%{
    opacity:0;
    transform:translate(-50%, -50%) scale(1.6);
  }
}

@keyframes treeBackdropBubbleSpark{
  0%, 70%{
    opacity:0;
    transform:translate(-50%, -50%) scale(.3) rotate(0deg);
  }
  80%{
    opacity:.34;
    transform:translate(-50%, -50%) scale(1) rotate(20deg);
  }
  100%{
    opacity:0;
    transform:translate(-50%, -50%) scale(1.35) rotate(34deg);
  }
}

body.publicPage--tree .treeBackdropBubbles{
  position:fixed;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
}

body.publicPage--tree .treeBubble{
  position:absolute;
  bottom:-92px;
  display:block;
  border-radius:999px;
  border:2px solid rgba(176, 210, 246, .96);
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.52), rgba(223,239,255,.30) 44%, rgba(188,214,243,.18) 68%, rgba(255,255,255,0) 82%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 22px rgba(184, 214, 245, .28);
  opacity:0;
  will-change:transform, opacity;
  animation:treeBackdropBubbleFloat 16.5s linear infinite;
}

body.publicPage--tree .treeBubble::before,
body.publicPage--tree .treeBubble::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
}

body.publicPage--tree .treeBubble::before{
  width:118%;
  height:118%;
  border:1.6px solid rgba(218, 236, 253, .56);
}

body.publicPage--tree .treeBubble::after{
  width:34%;
  height:34%;
  background:radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(216,235,252,.26) 58%, rgba(255,255,255,0) 100%);
}

body.publicPage--tree .treeBubble:nth-child(3n)::before,
body.publicPage--tree .treeBubble:nth-child(4n)::before{
  animation:treeBackdropBubbleBurst 16.5s ease-out infinite;
}

body.publicPage--tree .treeBubble:nth-child(3n)::after,
body.publicPage--tree .treeBubble:nth-child(5n)::after{
  animation:treeBackdropBubbleSpark 16.5s ease-out infinite;
}

body.publicPage--tree .treeBubble:nth-child(1){
  left:2%;
  width:54px;
  height:54px;
  animation-duration:16.8s;
  animation-delay:-10.2s;
}

body.publicPage--tree .treeBubble:nth-child(2){
  left:8%;
  width:28px;
  height:28px;
  animation-duration:13.2s;
  animation-delay:-6.4s;
}

body.publicPage--tree .treeBubble:nth-child(3){
  left:13%;
  width:64px;
  height:64px;
  animation-duration:18.6s;
  animation-delay:-12.8s;
}

body.publicPage--tree .treeBubble:nth-child(4){
  left:27%;
  width:20px;
  height:20px;
  animation-duration:15.2s;
  animation-delay:-9.9s;
}

body.publicPage--tree .treeBubble:nth-child(5){
  left:36%;
  width:30px;
  height:30px;
  animation-duration:18.7s;
  animation-delay:-5.6s;
}

body.publicPage--tree .treeBubble:nth-child(6){
  left:48%;
  width:16px;
  height:16px;
  animation-duration:14.6s;
  animation-delay:-11.7s;
}

body.publicPage--tree .treeBubble:nth-child(7){
  left:61%;
  width:46px;
  height:46px;
  animation-duration:22.8s;
  animation-delay:-4.2s;
}

body.publicPage--tree .treeBubble:nth-child(8){
  left:69%;
  width:18px;
  height:18px;
  animation-duration:15.8s;
  animation-delay:-8.4s;
}

body.publicPage--tree .treeBubble:nth-child(9){
  left:79%;
  width:52px;
  height:52px;
  animation-duration:18.9s;
  animation-delay:-11.1s;
}

body.publicPage--tree .treeBubble:nth-child(10){
  left:84%;
  width:13px;
  height:13px;
  animation-duration:13.6s;
  animation-delay:-10.8s;
}

body.publicPage--tree .treeBubble:nth-child(11){
  left:90%;
  width:30px;
  height:30px;
  animation-duration:14.9s;
  animation-delay:-5.8s;
}

body.publicPage--tree .treeBubble:nth-child(12){
  left:94%;
  width:68px;
  height:68px;
  animation-duration:19.4s;
  animation-delay:-13.2s;
}

body.publicPage--tree .treeBubble:nth-child(13){
  left:4%;
  width:72px;
  height:72px;
  animation-duration:21.8s;
  animation-delay:-15.4s;
}

body.publicPage--tree .treeBubble:nth-child(14){
  left:19%;
  width:22px;
  height:22px;
  animation-duration:14.4s;
  animation-delay:-9.1s;
}

body.publicPage--tree .treeBubble:nth-child(15){
  left:83%;
  width:24px;
  height:24px;
  animation-duration:15.1s;
  animation-delay:-8.6s;
}

body.publicPage--tree .treeBubble:nth-child(16){
  left:97%;
  width:76px;
  height:76px;
  animation-duration:22.2s;
  animation-delay:-17.6s;
}

body.publicPage--tree .canvas{
  isolation:isolate;
  overflow:auto;
  z-index:3;
}

body.publicPage--tree .stage{
  z-index:4;
}

@media (max-width: 767px){
  body.publicPage--tree .treeBubble{
    border-color:rgba(180, 212, 246, .96);
    background:
      radial-gradient(circle at 32% 30%, rgba(255,255,255,.46), rgba(220,237,253,.28) 52%, rgba(188,214,243,.14) 72%, rgba(255,255,255,0) 84%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.16),
      0 0 14px rgba(190, 220, 248, .22);
  }

  body.publicPage--tree .treeBubble:nth-child(1){
    left:1%;
    width:58px;
    height:58px;
  }

  body.publicPage--tree .treeBubble:nth-child(2){
    left:9%;
    width:24px;
    height:24px;
  }

  body.publicPage--tree .treeBubble:nth-child(3){
    left:16%;
    width:66px;
    height:66px;
  }

  body.publicPage--tree .treeBubble:nth-child(4){
    left:42%;
    width:22px;
    height:22px;
  }

  body.publicPage--tree .treeBubble:nth-child(5){
    left:54%;
    width:32px;
    height:32px;
  }

  body.publicPage--tree .treeBubble:nth-child(6){
    left:66%;
    width:18px;
    height:18px;
  }

  body.publicPage--tree .treeBubble:nth-child(7){
    left:80%;
    width:44px;
    height:44px;
  }

  body.publicPage--tree .treeBubble:nth-child(8){
    left:88%;
    width:20px;
    height:20px;
  }

  body.publicPage--tree .treeBubble:nth-child(9){
    left:92%;
    width:56px;
    height:56px;
  }

  body.publicPage--tree .treeBubble:nth-child(10),
  body.publicPage--tree .treeBubble:nth-child(12),
  body.publicPage--tree .treeBubble:nth-child(14){
    display:none;
  }

  body.publicPage--tree .treeBubble:nth-child(13){
    left:4%;
    width:70px;
    height:70px;
  }

  body.publicPage--tree .treeBubble:nth-child(15){
    left:86%;
    width:26px;
    height:26px;
  }

  body.publicPage--tree .treeBubble:nth-child(16){
    left:96%;
    width:74px;
    height:74px;
  }
}

@media (prefers-reduced-motion: reduce){
  body.publicPage--tree .treeBubble{
    animation:none;
    opacity:.12;
  }

  body.publicPage--tree .treeBubble::before,
  body.publicPage--tree .treeBubble::after{
    animation:none !important;
  }
}

/* Refine tree backdrop so the batik feels fused into the blue base,
   not pasted on top of it. */
body.publicPage--tree{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%0A%3Cdefs%3E%0A%20%20%3Cpattern%20id%3D%22batikBodySoft%22%20width%3D%2280%22%20height%3D%2280%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%3Crect%20width%3D%2280%22%20height%3D%2280%22%20fill%3D%22none%22%2F%3E%0A%20%20%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%28157%2C184%2C216%2C0.16%29%22%20stroke-width%3D%222.0%22%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2220%22%20cy%3D%2220%22%20rx%3D%2214%22%20ry%3D%2220%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2260%22%20cy%3D%2220%22%20rx%3D%2214%22%20ry%3D%2220%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2220%22%20cy%3D%2260%22%20rx%3D%2214%22%20ry%3D%2220%22%2F%3E%0A%20%20%20%20%20%20%3Cellipse%20cx%3D%2260%22%20cy%3D%2260%22%20rx%3D%2214%22%20ry%3D%2220%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%28136%2C164%2C198%2C0.08%29%22%20stroke-width%3D%221.0%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M40%201%20C52%2013%2C%2052%2027%2C%2040%2039%20C28%2027%2C%2028%2013%2C%2040%201%20Z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M40%2041%20C52%2053%2C%2052%2067%2C%2040%2079%20C28%2067%2C%2028%2053%2C%2040%2041%20Z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M1%2040%20C13%2028%2C%2027%2028%2C%2039%2040%20C27%2052%2C%2013%2052%2C%201%2040%20Z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M41%2040%20C53%2028%2C%2067%2028%2C%2079%2040%20C67%2052%2C%2053%2052%2C%2041%2040%20Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%3C%2Fpattern%3E%0A%3C%2Fdefs%3E%0A%3Crect%20width%3D%22240%22%20height%3D%22240%22%20fill%3D%22url%28%23batikBodySoft%29%22%2F%3E%0A%3C%2Fsvg%3E"),
    radial-gradient(1200px 760px at 14% 8%, #eaf2fb 0%, #dbe8f7 42%, #cedff1 74%, #bfd4ea 100%) !important;
  background-size:240px 240px, 100% 100% !important;
  background-repeat:repeat, no-repeat !important;
}

body.publicPage--tree .canvas{
  background:transparent !important;
}

@keyframes treeToolFloat{
  0%, 100%{
    transform:translateY(0);
    box-shadow:0 12px 24px rgba(15,37,66,.08), inset 0 1px 0 rgba(255,255,255,.12);
  }
  50%{
    transform:translateY(-4px);
    box-shadow:0 18px 30px rgba(15,37,66,.12), inset 0 1px 0 rgba(255,255,255,.18);
  }
}

@keyframes floatingTotalDrift{
  0%, 100%{
    transform:translateY(0) rotate(-0.8deg);
    box-shadow:0 10px 22px rgba(10,25,45,.10);
  }
  35%{
    transform:translateY(-4px) rotate(0.6deg);
    box-shadow:0 16px 26px rgba(10,25,45,.14);
  }
  68%{
    transform:translateY(-2px) rotate(-0.35deg);
    box-shadow:0 13px 24px rgba(10,25,45,.12);
  }
}

@keyframes floatingTotalJelly{
  0%, 100%{
    transform:scale(1,1);
  }
  16%{
    transform:scale(1.015,.985);
  }
  28%{
    transform:scale(.992,1.012);
  }
  40%{
    transform:scale(1.008,.994);
  }
}

@keyframes floatingTotalShine{
  0%, 72%, 100%{
    opacity:0;
    transform:translateX(-135%) skewX(-18deg);
  }
  82%{
    opacity:.42;
  }
  92%{
    opacity:0;
    transform:translateX(145%) skewX(-18deg);
  }
}

@keyframes countBadgeBalloon{
  0%, 100%{
    transform:translateY(0) scale(1);
  }
  18%{
    transform:translateY(-1px) scale(1.06,.95);
  }
  32%{
    transform:translateY(-2px) scale(.96,1.07);
  }
  46%{
    transform:translateY(0) scale(1.03,.98);
  }
}

@keyframes countBadgeSparkle{
  0%, 78%, 100%{
    opacity:0;
    transform:translateX(-140%) rotate(14deg);
  }
  86%{
    opacity:.7;
  }
  94%{
    opacity:0;
    transform:translateX(150%) rotate(14deg);
  }
}

@keyframes countBadgeBubbleRise{
  0%, 100%{
    opacity:0;
    transform:translateY(8px) scale(.55);
  }
  18%{
    opacity:.0;
    transform:translateY(8px) scale(.55);
  }
  38%{
    opacity:.75;
    transform:translateY(-8px) scale(1);
  }
  62%{
    opacity:0;
    transform:translateY(-18px) scale(1.18);
  }
}

@keyframes countBadgeBubbleRiseAlt{
  0%, 100%{
    opacity:0;
    transform:translateY(10px) scale(.5);
  }
  24%{
    opacity:0;
    transform:translateY(10px) scale(.5);
  }
  46%{
    opacity:.68;
    transform:translateY(-6px) scale(.96);
  }
  70%{
    opacity:0;
    transform:translateY(-16px) scale(1.12);
  }
}

@keyframes countBadgeWrapWobble{
  0%, 100%{
    transform:translateY(0) rotate(0deg);
  }
  28%{
    transform:translateY(-1px) rotate(-2.2deg);
  }
  52%{
    transform:translateY(-2px) rotate(1.9deg);
  }
  76%{
    transform:translateY(0) rotate(-1.2deg);
  }
}

.statusWrap{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:rgba(23,49,84,.65);
  padding:0 6px;
  white-space:nowrap;
  transition: opacity .25s ease, transform .25s ease;
}
.statusWrap.floatingTotal{
  position:fixed;
  left:calc(12px + env(safe-area-inset-left, 0px));
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  z-index:60;
  padding:8px 10px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.46), rgba(245,250,255,.26));
  border:1px solid rgba(150,185,232,.34);
  box-shadow:0 10px 22px rgba(10,25,45,.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow:hidden;
  transform-origin:50% 100%;
}
.statusWrap.floatingTotal::before{
  content:"";
  position:absolute;
  inset:-10% auto -18% -24%;
  width:52%;
  background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 48%, rgba(255,255,255,0) 100%);
  opacity:0;
  pointer-events:none;
}
.statusWrap.floatingTotal:not(.isHidden):not(.totalAutoHidden){
  animation:
    floatingTotalDrift 7.2s ease-in-out infinite,
    floatingTotalJelly 8.8s ease-in-out infinite;
}
.statusWrap.floatingTotal:not(.isHidden):not(.totalAutoHidden)::before{
  animation:floatingTotalShine 9.5s ease-in-out infinite;
}
.statusWrap.floatingTotal .statusPrefix{
  color:rgba(15,37,66,.55);
  font-weight:700;
  letter-spacing:.2px;
}
.statusWrap.floatingTotal.isHidden{
  animation:none !important;
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
}
.statusWrap.floatingTotal.totalAutoHidden{
  animation:none !important;
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
}
.statusPrefix{color:rgba(23,49,84,.55)}
.countBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  color:white;
  background: linear-gradient(180deg, var(--accent) 0%, #1e63df 100%);
  box-shadow: 0 8px 22px rgba(43,124,255,.25);
  border:1px solid rgba(255,255,255,.35);
  position:relative;
  overflow:hidden;
  transform-origin:50% 80%;
}
.statusWrap.floatingTotal:not(.isHidden):not(.totalAutoHidden) .countBadge{
  animation:countBadgeBalloon 4.8s ease-in-out infinite;
}
.statusWrap.floatingTotal .countBadgeWrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.statusWrap.floatingTotal:not(.isHidden):not(.totalAutoHidden) .countBadgeWrap.isVisible{
  animation:countBadgeWrapWobble 5.8s ease-in-out infinite;
}
.statusWrap.floatingTotal .countBadgeWrap::before,
.statusWrap.floatingTotal .countBadgeWrap::after{
  content:"";
  position:absolute;
  bottom:6px;
  width:9px;
  height:9px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.72);
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,255,255,.16) 62%, rgba(255,255,255,0) 100%);
  box-shadow:0 0 10px rgba(80,140,255,.14);
  opacity:0;
  pointer-events:none;
}
.statusWrap.floatingTotal .countBadgeWrap::before{
  left:-7px;
}
.statusWrap.floatingTotal .countBadgeWrap::after{
  right:-9px;
  width:7px;
  height:7px;
}
.statusWrap.floatingTotal:not(.isHidden):not(.totalAutoHidden) .countBadgeWrap.isVisible::before{
  animation:countBadgeBubbleRise 4.8s ease-in-out infinite;
}
.statusWrap.floatingTotal:not(.isHidden):not(.totalAutoHidden) .countBadgeWrap.isVisible::after{
  animation:countBadgeBubbleRiseAlt 4.8s ease-in-out infinite .38s;
}
.countBadge::after{
  content:"";
  position:absolute;
  top:-18%;
  left:-32%;
  width:44%;
  height:136%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 50%, rgba(255,255,255,0) 100%);
  opacity:0;
  pointer-events:none;
}
.statusWrap.floatingTotal:not(.isHidden):not(.totalAutoHidden) .countBadge::after{
  animation:countBadgeSparkle 7.4s ease-in-out infinite;
}
.countBadge.glow{ animation:none; }
.statusSuffix{color:rgba(23,49,84,.55)}

/* HILANGKAN tombol Fit + Reset Zoom + Zoom +/- */
#btnFit,
#btnZoomIn,
#btnZoomOut,
#btnResetLayout,
#btnExportView,
#btnExportSub,
#btnExportFull,
#btnZoomReset{
  display:none !important;
}


.topbar{
  position:fixed; inset:0 0 auto 0;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(30,41,59,.78));
  border-bottom:1px solid rgba(255,255,255,.12);
  z-index:50;
}
.brand{display:flex;flex-direction:column;gap:2px;min-width:260px}
.brand h1{font-size:14px;margin:0;letter-spacing:.4px;color:var(--text2);font-weight:900}
.brand .sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(43,124,255,.95), rgba(43,124,255,.82));
  color:#fff;
  padding:9px 12px;border-radius:12px;
  cursor:pointer;user-select:none;font-size:12px;
  transition: transform .08s ease, border-color .12s ease;
}
.btn:hover{opacity:.96}
.btn:active{transform: translateY(1px)}
.btn.secondary{
  color:var(--text2);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}

/* === Silsilah: Premium segmented switch for Ringkas / Lengkap === */
.silsilahModeSwitch{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(240,242,246,.82));
  border:1px solid rgba(113,94,62,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 18px rgba(15,23,42,.09);
}
.btn.btnSwitch{
  min-width:98px;
  height:36px;
  padding:0 10px;
  border-radius:999px;
  justify-content:center;
  font-weight:700;
  letter-spacing:.18px;
  font-size:11px;
  line-height:1;
  position:relative;
  overflow:hidden;
  border:1px solid transparent;
  color:#23344c;
  background:transparent;
  box-shadow:none;
  transition: transform .08s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.btn.btnSwitch::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.0));
  pointer-events:none;
}
.btn.btnSwitch:hover{
  opacity:1;
  color:#1b2e44;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(244,246,249,.62));
}
.btn.btnSwitch.is-active{
  color:#f8f3eb;
  border-color:rgba(169,145,103,.18);
  background:
    linear-gradient(180deg, rgba(57,74,102,.98), rgba(27,39,59,.95));
  box-shadow:
    0 8px 18px rgba(25,36,56,.20),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.btn.btnSwitch.is-active::before{
  background:linear-gradient(180deg, rgba(242,225,190,.12), rgba(255,255,255,0));
}
.btn.btnSwitch:active{
  transform: translateY(1px) scale(.985);
}
.btnSwitch__inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
}
.btnSwitch__icon{
  width:20px;
  height:20px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#6a7688;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(237,241,246,.82));
  border:1px solid rgba(115,128,148,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  flex:0 0 auto;
}
.btn.btnSwitch.is-active .btnSwitch__icon{
  color:#d9c29a;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-color:rgba(217,194,154,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.btnSwitch__icon svg{
  width:11px;
  height:11px;
  display:block;
}
.btnSwitch__copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  min-width:0;
}
.btnSwitch__eyebrow{
  font-size:7px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(90,105,126,.82);
}
.btn.btnSwitch.is-active .btnSwitch__eyebrow{
  color:rgba(222,205,174,.82);
}
.btnSwitch__label{
  font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  font-size:12.5px;
  line-height:1;
  letter-spacing:.01em;
  color:currentColor;
}
.btn.btnSwitch.is-loading{
  pointer-events:none;
}
.btn.btnSwitch.is-loading .btnSwitch__label{
  opacity:.72;
}

.btn:disabled{opacity:.55; cursor:not-allowed}
.input{
  border:1px solid var(--border);
  background: rgba(255,255,255,.92);
  color: var(--text2);
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 12px;
  width: 240px;
  outline:none;
}
.input::placeholder{color:rgba(79,107,147,.75)}

/* =========================================================
   Search input focus/typing glow (ONLY for #search on Silsilah)
   - Glowing when clicked (focus)
   - Keep subtle glow when filled
   - Clearer caret/pointer via stronger caret color + weight
   ========================================================= */
#search.search-focus,
#search.search-hastext{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 2px rgba(59,130,246,.16);
}
#search.search-focus{
  background: rgba(255,255,255,.98);
}
#search.search-focus::placeholder{color:rgba(35,70,125,.75)}

/* Make typing/caret feel bolder & clearer */
#search.search-focus,
#search.search-hastext{
  caret-color: rgba(15,110,255,.95);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2px;
}

/* === Search popup (multi results, compact) === */
.search-pop{
  position:fixed;
  z-index:80;
  display:none;
  max-height:360px;
}
.search-pop-inner{
  background: rgba(255,255,255,.96);
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.search-head{
  padding:10px 12px;
  font-size:12px;
  color: rgba(15,37,66,.92);
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(238,247,255,.96), rgba(217,236,255,.75));
}
.search-empty{
  padding:12px;
  font-size:12px;
  color: rgba(23,49,84,.88)
}
.search-list{
  max-height:300px;
  overflow:auto;
}
.search-item{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(20,70,140,.12);
}
.search-item:last-child{border-bottom:none}
.search-item-name{
  font-size:12px;
  font-weight:900;
  color: rgba(15,37,66,.96);
  line-height:1.25;
}
.search-item-addr{
  font-size:11px;
  color: rgba(79,107,147,.95);
  line-height:1.25;
  margin-top:2px;
  max-width: 240px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.search-item-actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
.search-item-actions .btn{padding:7px 10px; border-radius:12px}
.canvas{
  position:absolute;
  top:64px; left:0; right:0; bottom:0;
  overflow:auto;
  contain:layout paint size style;
}
.stage{
  position:relative;
  min-width:1200px;
  min-height:900px;
  contain:layout paint style;
}
#treeSvg{display:block;width:100%;height:100%;transform:translateZ(0)}
.hint{
  position:fixed;
  left:14px; bottom:12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.82);
  border:1px solid var(--border);
  border-radius: 14px;
  color: var(--muted);
  font-size:12px;
  z-index:40;
}
.modal{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  z-index:90;
  background: rgba(11,24,45,.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding: 18px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
}
.modal.open{display:flex}
.modal .card{
  position:relative;
  width:min(720px, 100%);
  background:
    radial-gradient(260px 180px at 0% 0%, rgba(43,124,255,.10), transparent 72%),
    radial-gradient(240px 180px at 100% 100%, rgba(177,141,78,.07), transparent 74%),
    linear-gradient(180deg, rgba(252,248,242,.985), rgba(243,247,252,.97));
  border:1px solid var(--border);
  border-radius: 26px;
  box-shadow:0 26px 56px rgba(15,37,66,.18);
  padding: 20px;
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
}
.modal .card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.34;
  background:
    repeating-linear-gradient(
      -32deg,
      rgba(153,119,63,.045) 0 9px,
      rgba(153,119,63,0) 9px 30px,
      rgba(78,103,147,.03) 30px 38px,
      rgba(78,103,147,0) 38px 64px
    ),
    repeating-linear-gradient(
      -32deg,
      transparent 0 30px,
      rgba(255,255,255,.10) 30px 32px,
      transparent 32px 64px
    ),
    repeating-linear-gradient(
      -32deg,
      rgba(177,142,82,.025) 0 2px,
      transparent 2px 64px
    );
  background-size:210px 210px, 210px 210px, 210px 210px;
  background-position:0 0, 24px 14px, 0 0;
  mix-blend-mode:multiply;
}
.modal .card > *{
  position:relative;
  z-index:1;
}
.modalHead{
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
}
.modalTitleWrap{
  display:grid;
  gap:8px;
  min-width:0;
}
.modalBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(43,124,255,.18);
  background:linear-gradient(180deg, rgba(43,124,255,.12), rgba(43,124,255,.05));
  color:#335f99;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.modalActions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.modalActionsBottom{
  margin-top:14px;
  justify-content:flex-end;
  width:100%;
  padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px));
}
.modalActions .btn{
  flex:0 0 auto;
  width:auto;
  min-width:unset;
  padding:10px 16px;
  border-radius:16px;
  transform:translateY(0);
  transition:transform .12s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease, background .16s ease;
}
#modalEdit{
  border-color: rgba(54,113,211,.34);
  background: linear-gradient(180deg, #4e8df3 0%, #3674dc 100%);
  color:#fff;
  font-weight:800;
  box-shadow:
    0 12px 22px rgba(43,124,255,.18),
    inset 0 1px 0 rgba(255,255,255,.22);
}
#modalEdit:hover{
  filter: brightness(1.05);
  box-shadow:
    0 14px 28px rgba(43,124,255,.24),
    0 0 0 4px rgba(43,124,255,.08),
    inset 0 1px 0 rgba(255,255,255,.24);
}
#modalEdit:active{
  transform:translateY(1px);
  box-shadow:
    0 8px 16px rgba(43,124,255,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
}
#modalClose{
  position:relative;
  border-color: rgba(176,35,35,.30);
  background: linear-gradient(180deg, #ef6e6e 0%, #d94949 100%);
  color:#fff7f7;
  font-weight:900;
  box-shadow:
    0 12px 22px rgba(224,74,74,.18),
    inset 0 1px 0 rgba(255,255,255,.22);
}
#modalClose:hover{
  border-color: rgba(176,35,35,.38);
  background: linear-gradient(180deg, #f37d7d 0%, #df5555 100%);
  box-shadow:
    0 14px 26px rgba(224,74,74,.22),
    0 0 0 4px rgba(224,74,74,.08),
    inset 0 1px 0 rgba(255,255,255,.24);
}
#modalClose:active{
  transform:translateY(1px);
  box-shadow:
    0 8px 16px rgba(224,74,74,.18),
    inset 0 1px 0 rgba(255,255,255,.16);
}
#modalClose::after{
  display:none;
}
.modal h3{
  margin:0;
  color:var(--text2);
  font-size:clamp(28px, 4.2vw, 38px);
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:900;
}
.modal p{margin:0; color:#304867; line-height:1.7}
.modal .row{
  display:grid;
  grid-template-columns:138px minmax(0,1fr);
  gap:18px;
  align-items:start;
  margin-top:14px;
}
.modalBody{display:grid;gap:12px}
.modalInfoCard{
  min-height:138px;
  padding:18px 20px;
  border-radius:20px;
  border:1px solid rgba(20,70,140,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,248,253,.92));
  box-shadow:
    0 16px 28px rgba(28,60,110,.08),
    inset 0 1px 0 rgba(255,255,255,.82);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.modalInfoCard p,
.modalInfoCard span,
.modalInfoCard b{
  color:#314760;
  font-size:13px;
  line-height:1.72;
}
.modalInfoCard b{
  color:#173154;
  font-weight:800;
}
.modal .bigimg{
  width:138px; height:138px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--border);
  background: rgba(43,124,255,.08);
  flex: 0 0 auto;
  display:grid;place-items:center;
}
.modal .bigimg img{width:100%; height:100%; object-fit:cover}
#modalImg{
  box-shadow:
    0 18px 30px rgba(31,64,112,.18),
    0 6px 0 rgba(10,18,38,.10);
}
.descSummary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;
  margin-top:6px;
}
.modalDescFull{
  grid-column:1 / -1;
  margin-top:2px;
}
.descItem{
  padding:15px 16px 14px;
  border-radius:20px;
  border:1px solid rgba(20,70,140,.16);
  background:linear-gradient(180deg, rgba(250,252,255,.98), rgba(232,240,250,.94));
  box-shadow:
    0 12px 22px rgba(28,60,110,.08),
    inset 0 1px 0 rgba(255,255,255,.84);
}
.descItemTotal{
  background:linear-gradient(180deg, rgba(246,250,255,.99), rgba(225,236,251,.95));
}
.descValue{
  font-size:18px;
  font-weight:900;
  color:var(--text2);
  line-height:1.1;
  letter-spacing:-.02em;
}
.descLabel{
  margin-top:6px;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6a7f9e;
}
@media (max-width: 720px){
  .topbar{gap:10px; flex-direction:column; align-items:stretch}
  .controls{justify-content:flex-start}
  .input{width:100%}
  .canvas{top:118px}
  .brand{min-width:unset}
  .modal{
    padding:12px;
    align-items:flex-start;
    padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .modal .card{
    padding:16px;
    border-radius:20px;
    max-height:calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .modalHead{flex-direction:column;align-items:stretch}
  .modalActions{justify-content:flex-end}
  .modalActionsBottom{margin-top:16px}
  .modal .row{
    grid-template-columns:124px minmax(0,1fr);
    gap:14px;
  }
  .modal .bigimg{width:124px;height:124px}
  .modalInfoCard{
    min-height:124px;
    padding:14px 14px;
  }
}


/* === Search highlight pulse (node found) === */
g.node.search-hit rect{
  animation:none;
  stroke: rgba(43,124,255,.95) !important;
  stroke-width: 2px !important;
  filter:none;
}


/* Photo Viewer Overlay */
.photoviewer{position:fixed;inset:0;display:none;z-index:9999;background:rgba(5,10,20,.90);color:#fff}
.photoviewer.open{display:block}
.photoviewer .pv-top{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;gap:10px;background:linear-gradient(180deg, rgba(15,23,42,.86), rgba(30,41,59,.68));border:1px solid rgba(255,255,255,.10);border-radius:18px;box-shadow:0 18px 34px rgba(0,0,0,.28);z-index:2;pointer-events:auto}
.photoviewer .pv-title{font-weight:800; letter-spacing:.01em}
.photoviewer .pv-stage{position:absolute;inset:60px 0 0 0;overflow:hidden;touch-action:none;z-index:1;pointer-events:auto}
.photoviewer #pvImg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;max-height:none;width:auto;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none;transform-origin:center center}
#modalImg img{cursor:zoom-in}

.photoviewer .pv-top, .photoviewer .pv-top *{pointer-events:auto}
.photoviewer button{pointer-events:auto}


/* ===== Welcome Popup (fullscreen) ===== */
html.popup-lock, html.popup-lock body { overflow: hidden !important; height: 100%; }

.welcomePopup{
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
}
.welcomePopup.show{ display: flex; }
.welcomePopup__backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.welcomePopup__panel{
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  width: min(520px, 92vw);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 28px 84px rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,15,25,.72);
}
.welcomePopup__img{
  display:block;
  width: 100%;
  height: auto;
  max-height: 92vh;
  object-fit: contain;
}
@media (min-width: 900px){
  .welcomePopup__panel{ width: min(780px, 70vw); }
  .welcomePopup__img{ max-height: 80vh; }
}
.welcomePopup__close{
  position:absolute;
  top:10px; right:10px;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.9);
  font-size: 18px;
  cursor: pointer;
}
.welcomePopup__close:active{ transform: scale(.98); }

.welcomePopup__skip{
  position:absolute;
  bottom:12px; right:12px;
  padding:10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.welcomePopup__skip:active{ transform: scale(.98); }

/* Animations (random) */
@keyframes wpInZoom{ from{ transform: scale(.85); opacity: 0 } to{ transform: scale(1); opacity: 1 } }
@keyframes wpInZoomOut{ from{ transform: scale(1.15); opacity: 0 } to{ transform: scale(1); opacity: 1 } }
@keyframes wpInRotate{ from{ transform: rotate(-6deg) scale(.92); opacity:0 } to{ transform: rotate(0) scale(1); opacity:1 } }
@keyframes wpInBlur{ from{ filter: blur(12px); transform: scale(.98); opacity:0 } to{ filter: blur(0); transform: scale(1); opacity:1 } }

@keyframes wpOutZoom{ from{ transform: scale(1); opacity:1 } to{ transform: scale(1.10); opacity:0 } }
@keyframes wpOutZoomOut{ from{ transform: scale(1); opacity:1 } to{ transform: scale(.90); opacity:0 } }
@keyframes wpOutRotate{ from{ transform: rotate(0) scale(1); opacity:1 } to{ transform: rotate(6deg) scale(.95); opacity:0 } }
@keyframes wpOutBlur{ from{ filter: blur(0); opacity:1 } to{ filter: blur(12px); opacity:0 } }

.welcomePopup.wp-in-zoom .welcomePopup__panel{ animation: wpInZoom .45s ease both; }
.welcomePopup.wp-in-zoomout .welcomePopup__panel{ animation: wpInZoomOut .45s ease both; }
.welcomePopup.wp-in-rotate .welcomePopup__panel{ animation: wpInRotate .48s cubic-bezier(.2,.9,.2,1) both; }
.welcomePopup.wp-in-blur .welcomePopup__panel{ animation: wpInBlur .55s ease both; }

.welcomePopup.hiding.wp-out-zoom .welcomePopup__panel{ animation: wpOutZoom .50s ease both; }
.welcomePopup.hiding.wp-out-zoomout .welcomePopup__panel{ animation: wpOutZoomOut .50s ease both; }
.welcomePopup.hiding.wp-out-rotate .welcomePopup__panel{ animation: wpOutRotate .50s ease both; }
.welcomePopup.hiding.wp-out-blur .welcomePopup__panel{ animation: wpOutBlur .52s ease both; }

/* === Unified Top Menu (Silsilah / Kas / Donasi) === */
.topNavWrap{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex:1 1 auto;
  min-width:0;
}
.navPills{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill.menuBtn{
  position:relative;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  box-shadow:
    0 10px 22px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.25);
  overflow:hidden;
  transform: translateZ(0);
}
.pill.menuBtn::before{
  content:"";
  position:absolute; inset:2px;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(15,23,42,.78), rgba(2,6,23,.62));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.pill.menuBtn > *{ position:relative; }
.pill.menuBtn{ font-weight:700; letter-spacing:.2px; }
.pill.menuBtn:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.25); }
.pill.menuBtn:active{ transform: translateY(0px) scale(.99); }

.pill.menuBtn.active{
  border-color: rgba(59,130,246,.65);
}
.pill.menuBtn.active::before{
  background: linear-gradient(135deg, rgba(37,99,235,.40), rgba(2,6,23,.68));
}
.pill.menuBtn.active{ animation:none; }

/* Silsilah tools bar: rapi di bawah menu utama */
.silsilahTools{
  position:fixed;
  left:0; right:0;
  z-index:49;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:12px 14px;
  margin:0 14px;
  top:64px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background: rgba(15,23,42,.68);
}

body.is-interacting-tree .topbar,
body.is-interacting-tree .silsilahTools,
body.is-interacting-tree .statusWrap.floatingTotal{
  backdrop-filter:none !important;
}
.silsilahTools .input{
  min-width:240px;
}
.silsilahTools__spacer{flex:1 1 auto; min-width:10px}
@media (max-width: 820px){
  .silsilahTools{margin:0 10px}
  .silsilahTools__spacer{display:none}
  .silsilahTools .input{flex:1 1 220px; min-width:180px}
}


/* Topbar dark theme for Silsilah to match Kas/Donasi */
.topbar .brand h1{color:#ffffff}
.topbar .sub{color:#b8c4d6}


/* Mobile: keep Search + Reset + All in one row */
@media (max-width: 520px){
  .topbar{padding:12px 12px 10px}
  .brand h1{font-size:13px}
  .brand .sub{font-size:11px}
  .silsilahTools{
    flex-wrap:nowrap;
    gap:8px;
    padding:10px 10px;
  }
  .silsilahTools .input{
    flex:1 1 auto;
    min-width:120px;
    max-width: 58vw;
  }
  .silsilahModeSwitch{
    gap:2px;
    padding:2px;
  }
  #btnCollapse, #btnExpand{
    min-width:84px;
    height:34px;
    padding:0 8px;
    flex:0 0 auto;
    white-space:nowrap;
  }
  .btnSwitch__inner{
    gap:5px;
  }
  .btnSwitch__icon{
    width:18px;
    height:18px;
  }
  .btnSwitch__icon svg{
    width:10px;
    height:10px;
  }
  .btnSwitch__eyebrow{
    display:none;
  }
  .btnSwitch__label{
    font-size:11.5px;
  }
  /* Hide advanced controls on very small screens to prevent wrapping */
  #btnFit,#btnZoomIn,#btnZoomOut,#btnZoomReset,#btnResetLayout,#btnExportView,#btnExportSub,#btnExportFull{
    display:none !important;
  }
  .modal{
    padding:10px;
    align-items:flex-start;
    padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .modal .card{
    padding:14px;
    border-radius:18px;
    max-height:calc(100dvh - 20px - env(safe-area-inset-bottom, 0px));
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .modal h3{font-size:24px;line-height:1.15}
  .modalActions{
    justify-content:flex-end;
    gap:10px;
  }
  .modalActionsBottom{
    margin-top:18px;
    padding-top:2px;
  }
  .modalActions .btn{
    flex:0 0 auto;
    min-width:92px;
    justify-content:center;
  }
  #modalClose{animation-duration:1.5s}
  .modal .row{
    grid-template-columns:112px minmax(0,1fr);
    gap:12px;
  }
  .modal .bigimg{width:112px;height:112px}
  .modalInfoCard{
    min-height:112px;
    padding:13px 12px;
  }
  .descSummary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .descSummary.totalWide .descItemTotal{
    grid-column:1 / -1;
  }
  .modalDescFull{margin-top:4px}
}

/* Override potential global .pill rules (scoped to top menu only) */
.topNav.pills .pill {
  color: #ffffff !important;
}

.adminLauncher{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border:none;
  background:transparent;
  color:#d8e8ff;
  cursor:pointer;
  transition:transform .12s ease, color .12s ease, filter .12s ease;
}
.adminLauncher svg{
  width:22px;
  height:22px;
  display:block;
  fill:currentColor;
  filter:drop-shadow(0 0 10px rgba(56,189,248,.18));
}
.adminLauncher:hover{
  color:#ffffff;
  transform:translateY(-1px) scale(1.04);
  filter:drop-shadow(0 0 12px rgba(59,130,246,.30));
}
.adminLauncher:active{
  transform:scale(.96);
}

.adminPopup{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:18px;
}
.adminPopup[hidden]{
  display:none;
}
.adminPopup__backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,10,24,.34);
}
.adminPopup__panel{
  position:relative;
  z-index:1;
  width:min(100%, 320px);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(18,24,40,.96), rgba(24,33,53,.94));
  box-shadow:0 22px 50px rgba(0,0,0,.34);
  transform:translateY(8px) scale(.98);
  opacity:0;
  transition:transform .16s ease, opacity .16s ease;
}
.adminPopup.is-open .adminPopup__panel{
  transform:translateY(0) scale(1);
  opacity:1;
}
.adminPopup__form{
  display:grid;
  gap:10px;
  padding:16px;
}
.adminPopup__title{
  text-align:center;
  font-size:16px;
  font-weight:800;
  color:#ffffff;
  margin-bottom:4px;
}
.adminPopup__error{
  padding:8px 10px;
  border-radius:10px;
  background:rgba(185,28,28,.18);
  border:1px solid rgba(248,113,113,.25);
  color:#ffd5d5;
  font-size:12px;
  line-height:1.45;
}
.adminPopup__input{
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.96);
  color:#11233d;
  padding:10px 12px;
  outline:none;
  font-size:13px;
}
.adminPopup__input:focus{
  border-color:rgba(96,165,250,.68);
  box-shadow:0 0 0 2px rgba(59,130,246,.16);
}
.adminPopup__links{
  display:flex;
  justify-content:flex-end;
  margin-top:-2px;
}
.adminPopup__forgot{
  font-size:12px;
  color:#9fb4ff;
  text-decoration:none;
  font-weight:700;
}
.adminPopup__forgot:hover{text-decoration:underline}
.adminPopup__actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:2px;
}
.adminPopup__btn{
  min-width:78px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.adminPopup__btn--primary{
  background:linear-gradient(180deg, rgba(59,130,246,.96), rgba(37,99,235,.84));
  color:#ffffff;
}
.adminPopup__btn--ghost{
  background:rgba(255,255,255,.10);
  color:#e7eefb;
}
.adminPopup__btn:disabled{
  opacity:.6;
  cursor:wait;
}

body.adminPopupOpen{
  overflow:hidden !important;
}

/* === Public Header Refresh === */
.siteHeader.topbar{
  display:block;
  left:0;
  right:0;
  top:0;
  padding:8px 10px 0;
  border:none;
  background:
    radial-gradient(420px 160px at 8% -4%, rgba(96,165,250,.14), transparent 70%),
    radial-gradient(360px 150px at 92% 0%, rgba(14,165,233,.12), transparent 72%),
    linear-gradient(180deg, rgba(6,12,24,.92), rgba(11,19,33,.78));
  box-shadow:none;
}
.siteHeader--fixed{
  position:fixed;
  inset:0 0 auto 0;
  z-index:56;
}
.siteHeader--flow{
  position:relative;
  inset:auto;
  z-index:20;
}
.siteHeader__shell{
  position:relative;
  max-width:1240px;
  margin:0 auto;
  padding:10px 14px 12px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.16);
  background:
    linear-gradient(180deg, rgba(10,18,32,.92), rgba(14,24,42,.84)),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  box-shadow:
    0 18px 34px rgba(2,8,23,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  overflow:visible;
  isolation:isolate;
}
.siteHeader__shell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 18% 0%, rgba(56,189,248,.14), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(59,130,246,.14), transparent 34%);
  pointer-events:none;
  z-index:-2;
}
.siteHeader__shell::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(180deg, rgba(255,255,255,.18), transparent 72%);
  pointer-events:none;
  opacity:.55;
  z-index:-1;
}
.siteHeader__eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.siteHeader__eyebrowChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.22);
  background:linear-gradient(180deg, rgba(14,165,233,.18), rgba(37,99,235,.08));
  color:#e6f4ff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.siteHeader__eyebrowText{
  color:rgba(191,219,254,.74);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.siteHeader__hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  position:relative;
}
.siteHeader__headingGroup{
  display:grid;
  gap:2px;
  min-width:0;
  flex:1 1 auto;
  max-width:760px;
  padding-right:64px;
}
.siteHeader__titleRow{
  display:flex;
  align-items:flex-start;
  gap:0;
  min-width:0;
}
.siteHeader__titleRow h1{
  margin:0;
  min-width:0;
  display:block;
  max-width:100%;
  color:#f8fbff;
  font-size:clamp(15px, 1.8vw, 18px);
  line-height:1.15;
  letter-spacing:.02em;
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.siteHeader__headingGroup p{
  margin:0;
  max-width:820px;
  color:rgba(191,219,254,.76);
  font-size:12px;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.siteHeader__heroTools{
  flex:0 1 auto;
  min-width:0;
}
.siteHeader__treeTools{
  display:flex;
  align-items:center;
  gap:10px;
}
.siteHeader__treeTools .input{
  width:240px;
  min-width:220px;
}
.siteHeader__menu{
  position:absolute;
  top:2px;
  right:0;
  flex:0 0 auto;
  z-index:6;
}
.siteHeader__menuButton{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.24);
  background:
    linear-gradient(180deg, rgba(22,34,56,.98), rgba(11,18,31,.94));
  color:#eef6ff;
  cursor:pointer;
  box-shadow:
    0 14px 28px rgba(2,8,23,.24),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .16s ease, border-color .18s ease, box-shadow .22s ease;
}
.siteHeader__menuButton:hover{
  transform:translateY(-1px);
  border-color:rgba(125,211,252,.34);
  box-shadow:
    0 18px 30px rgba(2,8,23,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.siteHeader__menuButton:active{
  transform:translateY(0) scale(.985);
}
.siteHeader__menuButtonOrb{
  position:relative;
  width:30px;
  height:30px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(125,211,252,.38), transparent 46%),
    linear-gradient(180deg, rgba(45,66,104,.98), rgba(19,29,48,.98));
  border:1px solid rgba(148,163,184,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  overflow:hidden;
}
.siteHeader__menuButtonOrb span{
  position:absolute;
  width:13px;
  height:2px;
  border-radius:999px;
  background:#f3f8ff;
  box-shadow:0 0 12px rgba(96,165,250,.24);
  transition: transform .28s ease, opacity .18s ease;
}
.siteHeader__menuButtonOrb span:nth-child(1){ transform:translateY(-5px); }
.siteHeader__menuButtonOrb span:nth-child(2){ transform:translateY(0); }
.siteHeader__menuButtonOrb span:nth-child(3){ transform:translateY(5px); }
.siteHeader__menu.is-open .siteHeader__menuButton{
  border-color:rgba(110,231,255,.38);
  box-shadow:
    0 18px 34px rgba(2,8,23,.32),
    0 0 0 1px rgba(125,211,252,.12),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.siteHeader__menu.is-open .siteHeader__menuButtonOrb span:nth-child(1){
  transform:translateY(0) rotate(45deg);
}
.siteHeader__menu.is-open .siteHeader__menuButtonOrb span:nth-child(2){
  opacity:0;
  transform:scaleX(.35);
}
.siteHeader__menu.is-open .siteHeader__menuButtonOrb span:nth-child(3){
  transform:translateY(0) rotate(-45deg);
}
.siteHeader__menuPanel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  width:min(320px, calc(100vw - 28px));
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.18);
  background:
    radial-gradient(180px 120px at 18% 0%, rgba(56,189,248,.14), transparent 72%),
    radial-gradient(220px 140px at 100% 100%, rgba(59,130,246,.12), transparent 74%),
    linear-gradient(180deg, rgba(11,18,31,.98), rgba(14,24,42,.96));
  box-shadow:
    0 28px 48px rgba(2,8,23,.34),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform-origin: top right;
  opacity:0;
  transform:translateY(-10px) scale(.92) rotateX(-18deg);
  clip-path:circle(24px at calc(100% - 30px) 18px);
  pointer-events:none;
  transition:
    opacity .22s ease,
    transform .38s cubic-bezier(.22,1,.32,1),
    clip-path .52s cubic-bezier(.22,1,.32,1);
  z-index:80;
}
.siteHeader__menu.is-open .siteHeader__menuPanel{
  opacity:1;
  transform:translateY(0) scale(1) rotateX(0deg);
  clip-path:circle(160% at calc(100% - 30px) 18px);
  pointer-events:auto;
}
.siteHeader__menuGrid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px;
}
.siteHeader__menuGroup{
  display:grid;
  gap:8px;
}
.siteHeader__menuItem{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  width:100%;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    linear-gradient(180deg, rgba(20,31,51,.92), rgba(10,17,30,.92));
  color:#eef6ff;
  text-decoration:none;
  text-align:left;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 22px rgba(2,8,23,.18);
  opacity:0;
  transform:translateY(16px) rotate(calc((var(--item-index) - 1.5) * 1.6deg));
  transition:
    transform .42s cubic-bezier(.22,1,.32,1),
    opacity .22s ease,
    border-color .18s ease,
    box-shadow .18s ease;
  transition-delay:calc(var(--item-index) * 40ms);
}
.siteHeader__menuItem--button{
  cursor:pointer;
  font:inherit;
}
.siteHeader__menuItem--toggle{
  padding-right:46px;
}
.siteHeader__menu.is-open .siteHeader__menuItem{
  opacity:1;
  transform:translateY(0) rotate(0deg);
}
.siteHeader__menuChevron{
  position:absolute;
  top:50%;
  right:14px;
  width:12px;
  height:12px;
  margin-top:-6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.68;
  transition:transform .2s ease, opacity .2s ease;
}
.siteHeader__menuGroup.is-expanded .siteHeader__menuChevron{
  opacity:.92;
  transform:rotate(225deg);
}
.siteHeader__menuItem:hover{
  border-color:rgba(125,211,252,.30);
  box-shadow:
    0 16px 28px rgba(2,8,23,.24),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.siteHeader__menuItem.is-current{
  border-color:rgba(96,165,250,.52);
  background:
    linear-gradient(180deg, rgba(46,94,187,.98), rgba(24,55,116,.94)),
    linear-gradient(180deg, rgba(20,31,51,.92), rgba(10,17,30,.92));
}
.siteHeader__menuBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  flex:0 0 auto;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  color:#d8e8ff;
  background:
    radial-gradient(circle at 30% 30%, rgba(110,231,255,.24), transparent 50%),
    linear-gradient(180deg, rgba(34,53,86,.98), rgba(14,24,42,.96));
  border:1px solid rgba(148,163,184,.18);
}
.siteHeader__menuMeta{
  display:grid;
  gap:2px;
  min-width:0;
}
.siteHeader__menuMeta strong{
  font-size:13px;
  line-height:1.1;
  color:#ffffff;
}
.siteHeader__menuMeta small{
  font-size:10px;
  line-height:1.2;
  color:rgba(191,219,254,.72);
}
.siteHeader__submenu{
  display:grid;
  gap:8px;
  padding:2px 0 4px 46px;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .18s ease, transform .22s ease;
}
.siteHeader__submenu[hidden]{
  display:none !important;
}
.siteHeader__submenu.is-open{
  opacity:1;
  transform:translateY(0);
}
.siteHeader__submenuItem{
  display:grid;
  gap:2px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(17,27,44,.82), rgba(10,17,28,.82));
  color:#edf5ff;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .16s ease, background .18s ease, transform .16s ease, box-shadow .18s ease;
}
.siteHeader__submenuItem:hover{
  transform:translateY(-1px);
  border-color:rgba(125,211,252,.24);
  box-shadow:
    0 12px 20px rgba(2,8,23,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.siteHeader__submenuItem.is-current{
  border-color:rgba(96,165,250,.34);
  background:
    linear-gradient(180deg, rgba(48,92,177,.72), rgba(25,54,111,.74)),
    linear-gradient(180deg, rgba(17,27,44,.82), rgba(10,17,28,.82));
}
.siteHeader__submenuItem span{
  font-size:12px;
  font-weight:700;
  line-height:1.12;
  color:#ffffff;
}
.siteHeader__submenuItem small{
  font-size:10px;
  line-height:1.2;
  color:rgba(191,219,254,.74);
}
.siteHeader__section{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    radial-gradient(180px 80px at 100% 0%, rgba(56,189,248,.08), transparent 70%);
}
.siteHeader__sectionKicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.18);
  background:rgba(10,18,34,.48);
  color:#bfdbfe;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.siteHeader__sectionBody{
  min-width:0;
}
.siteHeader__sectionBody h2{
  margin:0;
  color:#ffffff;
  font-size:16px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:0;
}
.siteHeader__sectionBody p{
  margin:4px 0 0;
  max-width:760px;
  color:rgba(191,219,254,.78);
  font-size:12px;
  line-height:1.45;
}
.publicPage--tree .silsilahTools{
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.86);
  box-shadow:0 18px 40px rgba(15,23,42,.10);
}
.publicPage--tree .silsilahTools--aux{
  display:none;
}
.publicPage--tree .siteHeader__hero{
  align-items:center;
}
.publicPage--tree .siteHeader__heroTools{
  position:static;
  display:flex;
  align-items:center;
  margin-left:auto;
  margin-right:58px;
  z-index:auto;
}
.publicPage--tree .siteHeader__treeTools .input{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.28) !important;
  color:#294569;
  box-shadow:
    0 12px 24px rgba(15,37,66,.08),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  animation:treeToolFloat 4.8s ease-in-out infinite;
  will-change:transform, box-shadow;
}
.publicPage--tree .siteHeader__treeTools .input::placeholder{
  color:rgba(74,108,151,.78);
}
.publicPage--tree .silsilahModeSwitch{
  padding:0;
  gap:8px;
  border:none;
  background:transparent;
  box-shadow:none;
}
.publicPage--tree .btn.btnSwitch{
  border-color:rgba(255,255,255,.24) !important;
  color:#294569;
  background:rgba(255,255,255,.05) !important;
  box-shadow:
    0 12px 24px rgba(15,37,66,.08),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  animation:treeToolFloat 5.4s ease-in-out infinite;
  will-change:transform, box-shadow;
}
.publicPage--tree .btn.btnSwitch::before{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}
.publicPage--tree .btn.btnSwitch:hover{
  color:#1e3554;
  background:rgba(255,255,255,.10) !important;
}
.publicPage--tree .btn.btnSwitch.is-active{
  border-color:rgba(121,173,255,.34);
  background:linear-gradient(180deg, rgba(57,74,102,.78), rgba(27,39,59,.72));
  box-shadow:
    0 14px 28px rgba(15,37,66,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
  animation:treeToolFloat 5.1s ease-in-out infinite;
}
.publicPage--tree .btnSwitch__icon{
  background:rgba(255,255,255,.24);
  border-color:rgba(255,255,255,.22);
  color:#294569;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.publicPage--tree .btnSwitch__eyebrow{
  color:rgba(74,108,151,.72);
}
.publicPage--tree .btn.btnSwitch.is-active .btnSwitch__eyebrow{
  color:rgba(234,224,198,.80);
}
.publicPage--tree .siteHeader__treeTools .input{ animation-delay:.12s; }
.publicPage--tree #btnCollapse{ animation-delay:.28s; }
.publicPage--tree #btnExpand{ animation-delay:.46s; }
.publicPage--finance .financeWrap{
  max-width:1240px;
  margin:12px auto 42px;
  padding:0 20px;
}
.publicPage--finance .financeWrap > :first-child{
  margin-top:0;
}

@media (max-width: 980px){
  .siteHeader.topbar{
    padding:8px 8px 0;
  }
  .siteHeader__shell{
    padding:10px 12px 12px;
    border-radius:18px;
  }
  .siteHeader__hero{
    flex-wrap:wrap;
    gap:12px;
  }
  .siteHeader__headingGroup{
    max-width:none;
    padding-right:58px;
  }
  .siteHeader__heroTools{
    width:100%;
  }
  .publicPage--tree .siteHeader__heroTools{
    position:absolute;
    top:calc(100% + 18px);
    left:0;
    right:auto;
    width:100%;
    margin-right:0;
    margin-left:0;
    z-index:4;
  }
  .publicPage--tree .siteHeader__treeTools{
    width:100%;
    justify-content:flex-start;
  }
  .publicPage--tree .siteHeader__treeTools .input{
    flex:1 1 220px;
    width:auto;
  }
}

@media (max-width: 640px){
  .siteHeader__shell{
    padding:10px 10px 12px;
    border-radius:16px;
  }
  .siteHeader__eyebrow{
    margin-bottom:6px;
  }
  .siteHeader__eyebrowText{
    font-size:9px;
    letter-spacing:.08em;
  }
  .siteHeader__titleRow{
    gap:0;
    align-items:flex-start;
  }
  .siteHeader__titleRow h1{
    font-size:13px;
    letter-spacing:0;
  }
  .siteHeader__headingGroup p,
  .siteHeader__sectionBody p{
    font-size:11px;
  }
  .siteHeader__menuButton{
    width:38px;
    height:38px;
    padding:0;
    border-radius:14px;
  }
  .siteHeader__menuButtonOrb{
    width:27px;
    height:27px;
  }
  .siteHeader__menuPanel{
    top:calc(100% + 10px);
    width:min(290px, calc(100vw - 20px));
    padding:12px;
  }
  .siteHeader__menuGrid{
    grid-template-columns:1fr;
  }
  .siteHeader__submenu{
    padding-left:42px;
    gap:7px;
  }
  .siteHeader__submenuItem{
    padding:9px 11px;
  }
  .publicPage--tree .siteHeader__hero{
    align-items:flex-start;
  }
  .publicPage--tree .siteHeader__headingGroup{
    padding-right:52px;
  }
  .publicPage--tree .siteHeader__titleRow h1{
    font-size:12.5px;
    line-height:1.1;
  }
  .publicPage--tree .siteHeader__treeTools{
    gap:8px;
    flex-wrap:nowrap;
  }
  .publicPage--tree .siteHeader__treeTools .input{
    min-width:0;
    flex:1 1 auto;
  }
  .publicPage--tree .siteHeader__treeTools .silsilahModeSwitch{
    flex:0 0 auto;
  }
  .publicPage--tree .siteHeader__heroTools{
    top:calc(100% + 22px);
  }
  .siteHeader__section{
    padding:8px 10px;
  }
  .siteHeader__sectionKicker{
    min-width:0;
    width:max-content;
  }
  .publicPage--finance .financeWrap{
    padding:0 14px;
  }
}


/* Map icon in profile modal */
.mapIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  margin-left:8px;
  border-radius:999px;
  text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(233,242,255,.92));
  border:1px solid rgba(66,133,244,.26);
  box-shadow:
    0 8px 18px rgba(66,133,244,.12),
    inset 0 1px 0 rgba(255,255,255,.75);
  transition:transform .12s ease, filter .12s ease, box-shadow .16s ease;
  user-select:none;
  vertical-align:middle;
}
.mapIcon svg{
  width:17px;
  height:17px;
  display:block;
  flex:0 0 auto;
}
.mapIcon:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
  box-shadow:
    0 10px 20px rgba(66,133,244,.16),
    inset 0 1px 0 rgba(255,255,255,.82);
}
.mapIcon:active{ transform:translateY(0px) scale(.96); }



/* === REVISI WARNA TOTAL ANGGOTA KELUARGA (BIRU TUA) === */
.statusPrefix, .statusSuffix {
  color: #0b3d91 !important;
}