/* SIGL Directory specific styles */
.sigl-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin:16px 0 12px;
}
.sigl-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.sigl-chip{
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  color:inherit;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:0.9rem;
}
.sigl-chip[aria-pressed="true"]{
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.32);
}
.sigl-search{
  flex:1 1 240px;
  min-width:220px;
  max-width:360px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.25);
  color:inherit;
}

.sigl-view{
  display:flex;
  gap:8px;
  align-items:center;
}

.sigl-wheel-wrap{
  margin-top:10px;
  display:flex;
  justify-content:center;
}
.sigl-wheel{
  position:relative;
  width:min(78vmin, 820px);
  height:min(78vmin, 820px);
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.12);
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06), rgba(0,0,0,0.35));
  overflow:hidden;
}
.sigl-wheel::after{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:999px;
  border:1px dashed rgba(255,255,255,0.10);
  pointer-events:none;
}
.sigl-center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.sigl-center-card{
  pointer-events:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  max-width:70%;
  text-align:center;
}
.sigl-center-symbol{
  font-size:2.1rem;
  line-height:1;
}
.sigl-center-name{
  font-size:0.95rem;
  opacity:0.92;
}
.sigl-center-hint{
  font-size:0.82rem;
  opacity:0.72;
}

.sigl-node{
  position:absolute;
  width:68px;
  height:68px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.sigl-node:hover{
  transform: translate(var(--tx), var(--ty)) scale(1.05);
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.34);
}
.sigl-node[aria-current="true"]{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.46);
}
.sigl-node .sym{
  font-size:1.25rem;
  line-height:1;
}
.sigl-node .tip{
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:0.78rem;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.55);
  opacity:0;
  pointer-events:none;
  transition: opacity 120ms ease;
}
.sigl-node:hover .tip{ opacity:1; }

@media (max-width: 520px){
  .sigl-node{ width:56px; height:56px; }
  .sigl-node .sym{ font-size:1.05rem; }
}


.sigl-nav{ min-width: 34px; padding:8px 10px; font-weight:700; }