:root{
  --bg:#06070b; --bg-2:#0b0d14;
  --panel:rgba(255,255,255,.045); --panel-hi:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.10); --line-hi:rgba(255,255,255,.20);
  --txt:#e8ebf4; --muted:#8a93ab;
  --a1:#22d3ee; --a2:#8b5cf6; --ok:#34d399; --bad:#f87171;
  --r:300px; --tile:104px; --spin:64s;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt); overflow:hidden;
  background:
    radial-gradient(1100px 700px at 50% 42%, rgba(139,92,246,.16), transparent 62%),
    radial-gradient(900px 600px at 12% 88%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(800px 500px at 90% 8%, rgba(56,189,248,.08), transparent 60%),
    linear-gradient(180deg,var(--bg-2),var(--bg));
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 45%,#000 30%,transparent 78%);
}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;box-shadow:inset 0 0 240px 60px rgba(0,0,0,.75)}

[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--a1)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--panel-hi);border:1px solid var(--line);border-radius:12px;
  padding:11px 18px;font-weight:600;font-size:13px;
  transition:border-color .2s,background .2s,transform .12s;
}
.btn:hover{border-color:var(--line-hi);background:rgba(255,255,255,.13)}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(120deg,rgba(139,92,246,.9),rgba(34,211,238,.8));border-color:transparent;color:#08090e}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:rgba(248,113,113,.3)}
.btn:disabled{opacity:.45;cursor:not-allowed}
input{
  background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;color:var(--txt);font:inherit;width:100%;outline:none;
}
input:focus{border-color:rgba(139,92,246,.6);box-shadow:0 0 0 3px rgba(139,92,246,.15)}
label.f{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}

/* ============================ GATE ============================ */
.gate{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:radial-gradient(900px 600px at 50% 40%,rgba(139,92,246,.16),transparent 65%),rgba(4,5,9,.88);
  backdrop-filter:blur(22px);
}
.gate.hidden{display:none}
.gate-card{
  width:min(470px,100%);border-radius:24px;padding:34px 30px;text-align:center;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line);box-shadow:0 40px 100px rgba(0,0,0,.7);
}
.shield{
  width:82px;height:82px;margin:0 auto 20px;border-radius:26px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,rgba(139,92,246,.5),rgba(10,12,20,.9) 70%);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 0 46px rgba(139,92,246,.35);
}
.shield.wait{animation:breathe 1.6s ease-in-out infinite}
.shield.err{animation:shake .4s;border-color:rgba(248,113,113,.6);box-shadow:0 0 46px rgba(248,113,113,.4)}
@keyframes breathe{0%,100%{box-shadow:0 0 40px rgba(34,211,238,.3)}50%{box-shadow:0 0 72px rgba(34,211,238,.65)}}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.gate h2{margin:0 0 8px;font-size:22px;letter-spacing:-.01em}
.gate p{margin:0 0 20px;color:var(--muted);font-size:13px}
.gate .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.gate .field{text-align:left;margin-bottom:16px}
.msg{font-size:12.5px;margin:0 0 14px;min-height:18px}
.msg.e{color:var(--bad)} .msg.s{color:var(--ok)}
.note{font-size:12px;color:var(--muted);text-align:left;margin:16px 0 0;line-height:1.6}
.keylist{text-align:left;margin:0 0 18px;display:grid;gap:8px}

/* ============================ KOPF/FUSS ============================ */
header{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:20px 26px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;letter-spacing:.14em;font-size:11px;text-transform:uppercase;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--a1);box-shadow:0 0 12px var(--a1)}
.top-right{display:flex;align-items:center;gap:10px}
.who{font-size:11px;color:var(--muted);letter-spacing:.06em}
.search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 14px;backdrop-filter:blur(12px)}
.search input{background:none;border:0;outline:none;width:160px;padding:0;border-radius:0}
.search input:focus{box-shadow:none}
.search input::placeholder{color:var(--muted)}
.icon-btn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(12px)}
.icon-btn:hover{border-color:var(--line-hi)}
footer{position:fixed;bottom:0;left:0;right:0;z-index:5;display:flex;justify-content:center;gap:18px;padding:18px;font-size:11px;color:var(--muted);letter-spacing:.06em}
kbd{background:var(--panel);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;font-size:10px;color:var(--txt)}

/* ============================ KREIS ============================ */
.stage{position:fixed;inset:0;display:grid;place-items:center;z-index:1}
.orbit{position:relative;width:0;height:0;animation:spin var(--spin) linear infinite}
.stage:hover .orbit,.stage:focus-within .orbit,.stage:hover .upright,.stage:focus-within .upright{animation-play-state:paused}
body.modal-open .orbit,body.modal-open .upright,body.modal-open .sweep{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinBack{to{transform:rotate(-360deg)}}
.rings{position:absolute;left:50%;top:50%;translate:-50% -50%;pointer-events:none}
.ring{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;border:1px solid rgba(255,255,255,.055)}
.ring.r1{width:calc(var(--r)*2);height:calc(var(--r)*2)}
.ring.r2{width:calc(var(--r)*2 + 96px);height:calc(var(--r)*2 + 96px);border-style:dashed;border-color:rgba(255,255,255,.045)}
.ring.r3{width:calc(var(--r)*1.24);height:calc(var(--r)*1.24)}
.sweep{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:calc(var(--r)*2);height:calc(var(--r)*2);border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 72%,rgba(34,211,238,.35) 86%,rgba(139,92,246,.5) 94%,transparent 100%);
  mask:radial-gradient(circle,transparent calc(var(--r) - 1.5px),#000 calc(var(--r) - 1.5px));
  -webkit-mask:radial-gradient(circle,transparent calc(var(--r) - 1.5px),#000 calc(var(--r) - 1.5px));
  animation:spin 9s linear infinite;opacity:.9;
}
.core{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;display:grid;place-items:center;text-align:center;
  width:176px;height:176px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(139,92,246,.35),rgba(10,12,20,.9) 68%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 60px rgba(139,92,246,.28),inset 0 0 40px rgba(34,211,238,.10);
  backdrop-filter:blur(8px);
}
.core h1{margin:0;font-size:30px;font-weight:700;background:linear-gradient(120deg,#fff,#b9c2ff 45%,var(--a1));-webkit-background-clip:text;background-clip:text;color:transparent}
.core span{display:block;font-size:9.5px;letter-spacing:.42em;color:var(--muted);text-transform:uppercase;margin-top:6px}
.pulse{position:absolute;left:50%;top:50%;translate:-50% -50%;width:176px;height:176px;border-radius:50%;border:1px solid rgba(34,211,238,.4);animation:pulse 3.6s ease-out infinite;z-index:1}
.pulse:nth-of-type(2){animation-delay:1.2s}
.pulse:nth-of-type(3){animation-delay:2.4s}
@keyframes pulse{from{transform:scale(1);opacity:.5}to{transform:scale(2.35);opacity:0}}
.node{position:absolute;left:0;top:0;width:0;height:0;transition:opacity .25s,filter .25s}
.spoke{position:absolute;left:-.5px;top:0;width:1px;height:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 82%);opacity:.5;transition:opacity .3s,background .3s}
.counter{position:absolute;left:0;top:0;width:0;height:0}
.upright{position:absolute;left:0;top:0;width:0;height:0;animation:spinBack var(--spin) linear infinite}
.card{position:absolute;left:0;top:0;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:inherit;width:150px;transition:transform .28s cubic-bezier(.2,.8,.25,1)}
.tile{
  position:relative;width:var(--tile);height:var(--tile);border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--panel-hi),rgba(255,255,255,.02));
  border:1px solid var(--line);backdrop-filter:blur(10px);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  transition:border-color .28s,box-shadow .28s;overflow:hidden;
}
.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--c) 40%,transparent),transparent 70%);opacity:.5;transition:opacity .28s}
.mono{position:relative;font-weight:700;font-size:26px;background:linear-gradient(140deg,#fff,var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
.meta{text-align:center;line-height:1.35}
.name{display:block;font-size:13px;font-weight:600}
.kind{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.card:hover,.card:focus-visible{transform:translate(-50%,-50%) scale(1.11);outline:none}
.card:hover .tile,.card:focus-visible .tile{
  border-color:color-mix(in srgb,var(--c) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent),0 0 46px color-mix(in srgb,var(--c) 45%,transparent),0 20px 50px rgba(0,0,0,.6);
}
.card:hover .tile::before,.card:focus-visible .tile::before{opacity:1}
.node:has(.card:hover) .spoke,.node:has(.card:focus-visible) .spoke{opacity:1;background:linear-gradient(180deg,var(--c),rgba(255,255,255,0) 88%)}
.node.dim{opacity:.14;filter:saturate(.2)}
.empty{position:absolute;left:50%;top:calc(50% + 140px);translate:-50% 0;color:var(--muted);font-size:13px;text-align:center}

/* ============================ FAB + DRAWER ============================ */
.fab{
  position:fixed;right:26px;bottom:26px;z-index:20;
  width:58px;height:58px;border-radius:20px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(140deg,rgba(139,92,246,.9),rgba(34,211,238,.75));
  color:#08090e;display:grid;place-items:center;
  box-shadow:0 18px 44px rgba(139,92,246,.4);transition:transform .2s,box-shadow .2s;
}
.fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 24px 56px rgba(139,92,246,.55)}
.fab svg{width:24px;height:24px}
.scrim{position:fixed;inset:0;z-index:30;background:rgba(3,4,8,.6);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .28s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:40;width:min(440px,100%);
  background:linear-gradient(180deg,rgba(14,16,24,.98),rgba(8,9,14,.99));
  border-left:1px solid var(--line);box-shadow:-30px 0 80px rgba(0,0,0,.6);
  transform:translateX(102%);transition:transform .34s cubic-bezier(.2,.8,.25,1);
  display:flex;flex-direction:column;
}
.drawer.open{transform:none}
.dhead{display:flex;align-items:center;gap:12px;padding:20px 22px 0}
.dhead h3{margin:0;font-size:16px;flex:1}
.tabs{display:flex;padding:16px 22px 0}
.tab{background:none;border:0;padding:8px 2px;margin-right:16px;font-size:13px;color:var(--muted);border-bottom:2px solid transparent}
.tab.on{color:var(--txt);border-bottom-color:var(--a2)}
.dbody{flex:1;overflow:auto;padding:18px 22px 26px}
.dbody::-webkit-scrollbar{width:8px}
.dbody::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
.pane{display:none}.pane.on{display:block}
.item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);margin-bottom:8px}
.item .sw{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-weight:700;font-size:12px;flex-shrink:0;background:color-mix(in srgb,var(--c) 22%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);color:#fff}
.item .t{flex:1;min-width:0}
.item .t b{display:block;font-size:13px;font-weight:600}
.item .t span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini{width:30px;height:30px;border-radius:9px;background:transparent;border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0}
.mini:hover{border-color:var(--line-hi)}
.mini.del:hover{border-color:rgba(248,113,113,.5);color:var(--bad)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw-btn{width:26px;height:26px;border-radius:9px;border:2px solid transparent;cursor:pointer}
.sw-btn.on{border-color:#fff}
.form{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:18px;display:grid;gap:12px}
.form h4{margin:0;font-size:13px}
.hint{font-size:11.5px;color:var(--muted);line-height:1.6}
.sec{margin:22px 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.badge,.item .t b .badge{display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:6px;background:rgba(139,92,246,.2);border:1px solid rgba(139,92,246,.35);color:#c9bcff}
.invite-url{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
  background:rgba(0,0,0,.45);border:1px dashed rgba(52,211,153,.4);border-radius:10px;
  padding:12px;color:var(--ok);word-break:break-all;margin:0 0 10px;
}

@media (max-width:680px){
  body{overflow:auto}
  .stage{position:static;min-height:100vh;padding:110px 18px 110px;place-items:start center}
  .orbit,.upright{animation:none}
  .rings,.sweep,.spoke,.pulse{display:none}
  .orbit{position:relative;width:100%;height:auto;display:flex;flex-direction:column;align-items:center;gap:26px}
  .core{position:static;translate:none;width:150px;height:150px}
  .node,.counter,.upright{position:static;width:auto;height:auto;transform:none!important}
  .nodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:22px;width:100%;max-width:420px}
  .card{position:static;translate:none;width:auto}
  .card:hover,.card:focus-visible{transform:scale(1.06)}
  header{flex-wrap:wrap}
  .search input{width:100px}
  .who{display:none}
  .empty{position:static;translate:none;margin-top:20px}
  footer{position:static;margin-top:30px}
}