:root{
  --bg1:#060814; --bg2:#0f1a44; --ink:#eef2ff; --mute:#9aa6d6; --line:#4f7bff55;
  --accent:#1f6bff; --hot:#0a7be0; --ok:#3ddc97; --card:#ffffff0d; --card2:#ffffff17;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;height:100dvh;overflow:hidden}
body{
  font-family:"Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;
  color:var(--ink);
  background:radial-gradient(1200px 800px at 50% 45%, var(--bg2), var(--bg1) 70%);
  -webkit-font-smoothing:antialiased;
}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.top{position:relative;z-index:3;display:flex;align-items:center;gap:24px;padding:14px 22px;
  background:linear-gradient(#1b18388c,#1b183800);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:10px;font-size:15px}
.logo{width:34px;height:28px;filter:drop-shadow(0 0 14px #1f6bff66)}
.brand b{letter-spacing:.08em;font-weight:800}
.sub{color:var(--mute);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.tabs{display:flex;gap:4px;margin:0 auto;background:var(--card);padding:4px;border-radius:999px;border:1px solid #ffffff14}
.tab{background:none;border:0;color:var(--mute);padding:7px 16px;border-radius:999px;font:inherit;font-size:13px;cursor:pointer;transition:.25s}
.tab.active{background:var(--ink);color:var(--bg1)}
.status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute)}
.dot{width:9px;height:9px;border-radius:50%;background:#777}
.dot.on{background:var(--ok);box-shadow:0 0 0 3px #3ddc9733,0 0 10px #3ddc97aa}
.dot.off{background:var(--hot)}
@keyframes pulse{70%{box-shadow:0 0 0 10px #3ddc9700}100%{box-shadow:0 0 0 0 #3ddc9700}}

main{position:relative;z-index:2;height:calc(100% - 62px)}
.view{position:absolute;inset:0;opacity:0;pointer-events:none;transform:scale(.985);transition:opacity .45s,transform .45s}
.view.active{opacity:1;pointer-events:auto;transform:none}

#map{width:100%;height:100%;display:block}
#map .tree{transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .6s}
#map line.edge{stroke:var(--line);stroke-width:1}
#map line.edge.flow{stroke:#7ea6ff;stroke-dasharray:3 9;opacity:.5}
#map .tree.hot line.edge.flow{animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-48}}
#map .leaf{cursor:pointer}
#map .leaf circle{fill:#f4f2ff;transition:r .25s}
#map .leaf:hover circle{r:7}
#map .leaf .halo{fill:none;stroke:#ffffff55;opacity:0;transition:opacity .25s}
#map .leaf:hover .halo{opacity:1}
#map .leaf text{fill:var(--mute);font-size:10px;opacity:0;transition:opacity .3s}
#map.zoomed .leaf text,#map .leaf:hover text{opacity:1}
#map .hub circle.core{stroke-width:2;fill:#1b1838}
#map .hub{cursor:pointer}
#map .label{fill:var(--ink);font-size:14px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;cursor:pointer}
#map .label.sub{fill:var(--mute);font-size:9px;letter-spacing:.12em;font-weight:400}
#map .brain{pointer-events:none}
#map .ghost{font-size:180px;fill:#ffffff08;font-weight:800;letter-spacing:.1em;pointer-events:none}
.leaf{animation:pop .7s backwards}
@keyframes pop{from{opacity:0;transform:scale(.3)}}

.hint{position:absolute;left:50%;top:6px;transform:translateX(-50%);font-size:12px;color:var(--mute);
  background:var(--card);padding:8px 14px;border-radius:999px;border:1px solid #ffffff12}
.back{position:absolute;left:22px;top:12px}
.hidden{display:none!important}

.panel{position:absolute;right:18px;top:12px;bottom:18px;width:min(400px,42vw);overflow:auto;
  background:#24204cdd;backdrop-filter:blur(14px);border:1px solid #ffffff1c;border-radius:18px;padding:24px;
  box-shadow:0 30px 80px #0008;animation:slide .45s cubic-bezier(.2,.8,.2,1)}
@keyframes slide{from{transform:translateX(40px);opacity:0}}
.panel h2{font-size:22px;margin:6px 0 10px}
.panel p{color:#d6d2ff;font-size:13.5px;line-height:1.6}
.close{position:absolute;right:14px;top:10px;background:none;border:0;color:var(--mute);font-size:24px;cursor:pointer}
.kicker{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.ladder{margin:18px 0;display:grid;gap:8px}
.ladder div{font-size:12.5px;color:var(--mute);background:var(--card);border-radius:10px;padding:9px 12px}
.ladder span{display:inline-block;min-width:74px;color:var(--ink);font-weight:600}
.file{font-family:Consolas,ui-monospace,monospace;font-size:12px;background:#0003;border:1px dashed #ffffff26;border-radius:10px;padding:10px 12px;margin-bottom:16px;color:#cfc9ff}

button.primary,button.ghost{font:inherit;cursor:pointer;border-radius:12px;padding:11px 18px;font-size:13.5px;transition:transform .15s,box-shadow .25s,background .25s}
button.primary{border:0;color:#fff;background:linear-gradient(135deg,#0033c8,#0a7be0);box-shadow:0 10px 30px #1f6bff55}
button.primary:hover{transform:translateY(-1px);box-shadow:0 14px 40px #1f6bff88}
button.primary:disabled{opacity:.6;cursor:wait}
button.big{padding:15px 26px;font-size:15px}
button.ghost{background:var(--card);border:1px solid #ffffff1f;color:var(--ink)}
button.ghost:hover{background:var(--card2)}

.setup{max-width:860px;margin:0 auto;padding:30px 24px;height:100%;overflow:auto}
.setup h1{font-size:34px;font-weight:700;letter-spacing:-.02em}
.setup h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--hot));-webkit-background-clip:text;color:transparent}
.lead{color:var(--mute);margin:10px 0 24px;line-height:1.6}
.lead.small{font-size:13.5px;margin-top:22px}
.steps{list-style:none;display:grid;gap:10px;margin-bottom:22px}
.steps li{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid #ffffff12;border-radius:14px;padding:13px 16px;transition:background .3s,border-color .3s}
.steps li .ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:#ffffff14;flex:none}
.steps li b{font-weight:600;font-size:14px}
.steps li small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.steps li.run{border-color:var(--accent);background:#1f6bff1a}
.steps li.run .ic{border:2px solid var(--accent);border-top-color:transparent;background:none;animation:spin .8s linear infinite}
.steps li.done .ic{background:var(--ok);color:#0b2}
.steps li.done .ic::after{content:"✓";color:#073}
.steps li.err{border-color:var(--hot)}
.steps li.err .ic{background:var(--hot)}
@keyframes spin{to{transform:rotate(360deg)}}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.pubkey{margin-top:18px;background:var(--card);border:1px solid var(--accent);border-radius:14px;padding:14px;display:grid;gap:10px}
.pubkey code{font-size:11.5px;word-break:break-all;color:#e6e2ff}
.log{margin-top:18px;max-height:180px;overflow:auto;font-size:11.5px;color:var(--mute);white-space:pre-wrap;font-family:Consolas,ui-monospace,monospace}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:18px}
.card{background:var(--card);border:1px solid #ffffff14;border-radius:16px;padding:18px}
.card .n{font-size:30px;font-weight:700}
.card .t{color:var(--mute);font-size:12.5px;margin-top:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* siçan effektləri */
.cursor-glow{position:fixed;left:0;top:0;width:400px;height:400px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,#1f6bff2e,#1f6bff0d 40%,transparent 70%);transition:transform .08s linear}
#map .world{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
#map .tree.hot line.edge{stroke:#d9d3ff;opacity:1}
#map .tree.hot line.edge.flow{stroke:#fff;stroke-width:1.6;animation-duration:1s}
#map .tree.hot .hub circle.core{filter:drop-shadow(0 0 8px currentColor)}
#map .hub{transition:transform .3s}
#map .hub:hover{transform:scale(1.25);transform-box:fill-box;transform-origin:center}
#map{cursor:grab}
.ripple{position:fixed;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid #b9b0ff;pointer-events:none;z-index:5;
  animation:ripple .7s ease-out forwards}
@keyframes ripple{to{transform:scale(9);opacity:0}}
button.primary,button.ghost,.tab{position:relative;overflow:hidden}
button.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff40 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
button.primary:hover::after{transform:translateX(120%)}
.card{transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-4px);border-color:#1f6bff88}

/* dil seçici, sağ blok, düymə */
.right{display:flex;align-items:center;gap:16px}
.langs{display:flex;gap:2px;background:var(--card);border:1px solid #ffffff14;border-radius:999px;padding:3px}
.langs button{background:none;border:0;color:var(--mute);font:inherit;font-size:11.5px;font-weight:600;padding:5px 9px;border-radius:999px;cursor:pointer;transition:.2s}
.langs button.active{background:linear-gradient(135deg,#0033c8,#0a7be0);color:#fff}
.ladder i{font-style:normal}
.fab{position:absolute;right:22px;bottom:20px}
#view-map:has(.panel:not(.hidden)) .fab{display:none}
body.web .desktop-only{display:none}
/* telefon */
@media (max-width:760px){
  .top{flex-wrap:wrap;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 14px 10px}
  .brand .sub,.status #srvText{display:none}
  .tabs{order:3;width:100%;justify-content:center;margin:0}
  main{position:absolute;top:var(--hdr,112px);left:0;right:0;bottom:0;height:auto}
  .hint{display:none}
  .fab{left:16px;right:auto;width:calc(100% - 32px);bottom:calc(env(safe-area-inset-bottom) + 16px)}
  .panel{left:10px;right:10px;top:auto;bottom:10px;width:auto;max-height:70%;border-radius:20px}
  .back{top:8px;left:12px}
  .setup h1{font-size:26px}
  .cursor-glow{display:none}
}
button.fab,button.back{position:absolute}
/* performans: xəritə və kanvas ayrı təbəqələrdə, bulanıqlıq yox */
#map{will-change:transform;contain:strict}
#stars{will-change:transform}
.top,.panel{backdrop-filter:none!important}
.panel{background:#0d1640f2}