.sn-shell{
  width:min(var(--sn-max, 980px), 100%);
  margin: 0 auto 8px;
  position: sticky;
  top: 10px;
  z-index: 20;
}

.sn-actions-seed{
  display:none;
}

.sn-bar{
  border: 1px solid var(--stroke, rgba(255,255,255,.16));
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  padding: 12px 14px 10px;
}

.sn-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.sn-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: inherit;
  min-width:0;
}

.sn-mark{
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.2);
  background:
    radial-gradient(10px 10px at 30% 30%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(16px 16px at 72% 72%, rgba(104,224,255,.35), transparent 62%),
    rgba(255,255,255,.06);
  box-shadow: 0 0 0 5px rgba(255,255,255,.04);
}

.sn-brand-title{
  margin:0;
  font-size:14px;
  line-height:1.2;
  letter-spacing:.2px;
}

.sn-brand-sub{
  margin:0;
  font-size:12px;
  line-height:1.2;
  color: var(--muted, rgba(220,230,255,.75));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sn-tools{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.sn-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.sn-btn{
  border: 1px solid var(--stroke, rgba(255,255,255,.16));
  background: rgba(255,255,255,.06);
  color: inherit;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.2;
  text-decoration:none;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.sn-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3);
}

.sn-jump{
  font: inherit;
  font-size:12px;
}

.sn-jump kbd{
  border:1px solid rgba(255,255,255,.25);
  border-bottom-width:2px;
  border-radius: 6px;
  padding: 1px 5px;
  font-size:11px;
  margin-left:6px;
  opacity:.9;
}

.sn-menu-btn{
  display:none;
}

.sn-site-row{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap:wrap;
  margin-top: 10px;
  padding: 0 4px;
}

.sn-link{
  color: rgba(235,242,255,.9);
  text-decoration:none;
  font-size: 13px;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.sn-link:hover{
  color: rgba(255,255,255,.98);
  border-bottom-color: rgba(126,220,255,.75);
}

.sn-link[aria-current="page"]{
  color: rgba(126,220,255,.95);
  border-bottom-color: rgba(126,220,255,.75);
}

.sn-more{
  position: relative;
}

.sn-more-btn{
  border:none;
  background:transparent;
  color: rgba(235,242,255,.9);
  cursor:pointer;
  padding: 0 0 2px;
  font-size: 13px;
  border-bottom: 1px solid transparent;
}

.sn-more-btn:hover{
  color: rgba(255,255,255,.98);
  border-bottom-color: rgba(126,220,255,.75);
}

.sn-more-btn[aria-expanded="true"]{
  color: rgba(126,220,255,.95);
  border-bottom-color: rgba(126,220,255,.75);
}

.sn-more-panel{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: min(340px, 88vw);
  border: 1px solid var(--stroke, rgba(255,255,255,.16));
  background: rgba(9,14,25,.95);
  border-radius: 14px;
  box-shadow: 0 16px 45px rgba(0,0,0,.45);
  padding: 10px;
  display:none;
}

.sn-more.open .sn-more-panel{
  display:block;
}

.sn-group{
  padding: 6px;
}

.sn-group + .sn-group{
  border-top: 1px solid rgba(255,255,255,.1);
}

.sn-group-title{
  margin:0 0 8px;
  font-size:11px;
  letter-spacing:.2px;
  text-transform:uppercase;
  color: var(--muted, rgba(220,230,255,.75));
}

.sn-group-link{
  display:block;
  text-decoration:none;
  color: rgba(235,242,255,.92);
  font-size:13px;
  border-radius:10px;
  padding: 7px 8px;
}

.sn-group-link small{
  display:block;
  color: var(--muted, rgba(220,230,255,.75));
  font-size:11px;
  margin-top:2px;
}

.sn-group-link:hover{
  background: rgba(255,255,255,.08);
}

.sn-group-link[aria-current="page"]{
  background: rgba(126,220,255,.15);
}

.sn-group-link[aria-disabled="true"]{
  opacity:.45;
  pointer-events:none;
}

.sn-drawer{
  position:fixed;
  inset:0;
  background: rgba(4,7,14,.7);
  backdrop-filter: blur(4px);
  z-index: 35;
}

.sn-drawer[hidden]{
  display:none;
}

.sn-drawer-panel{
  margin-left:auto;
  width:min(360px, 88vw);
  height:100%;
  border-left:1px solid rgba(255,255,255,.12);
  background: rgba(10,16,28,.98);
  padding: 16px 14px;
  overflow:auto;
}

.sn-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.sn-drawer-grid{
  display:grid;
  gap: 8px;
}

.sn-drawer-link{
  display:block;
  text-decoration:none;
  color: rgba(235,242,255,.95);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:10px 12px;
  background: rgba(255,255,255,.04);
}

.sn-drawer-link small{
  display:block;
  font-size:11px;
  color: var(--muted, rgba(220,230,255,.75));
  margin-top:2px;
}

.sn-drawer-link[aria-current="page"]{
  border-color: rgba(126,220,255,.5);
  background: rgba(126,220,255,.15);
}

.sn-drawer-link[aria-disabled="true"]{
  opacity:.45;
  pointer-events:none;
}

.sn-modal{
  position:fixed;
  inset:0;
  z-index: 40;
  display:grid;
  place-items:flex-start center;
  padding-top: min(18vh, 140px);
  background: rgba(3,6,11,.62);
}

.sn-modal[hidden]{
  display:none;
}

.sn-modal-card{
  width:min(680px, 92vw);
  border:1px solid rgba(255,255,255,.18);
  background: rgba(10,16,28,.96);
  border-radius:16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  overflow:hidden;
}

.sn-modal-search{
  width:100%;
  border:none;
  background: transparent;
  color: rgba(236,245,255,.95);
  font: inherit;
  font-size:15px;
  padding: 13px 14px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.sn-modal-search:focus{
  outline:none;
}

.sn-results{
  max-height: min(52vh, 420px);
  overflow:auto;
  padding: 8px;
}

.sn-result{
  display:block;
  text-decoration:none;
  color: rgba(236,245,255,.95);
  border-radius:10px;
  padding: 9px 10px;
}

.sn-result small{
  display:block;
  font-size:11px;
  color: var(--muted, rgba(220,230,255,.75));
  margin-top:2px;
}

.sn-result:hover{
  background: rgba(255,255,255,.08);
}

.sn-result[aria-disabled="true"]{
  opacity:.45;
  pointer-events:none;
}

.sn-empty{
  font-size: 12px;
  color: var(--muted, rgba(220,230,255,.75));
  padding: 12px 10px;
}

@media (max-width: 880px){
  .sn-shell{
    top: 8px;
  }

  .sn-tools{
    gap: 6px;
  }

  .sn-actions{
    display:none;
  }

  .sn-menu-btn{
    display:inline-block;
  }

  .sn-site-row{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .sn-btn{
    transition: none;
  }
}