.sn-bar{
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 999; width: min(92vw, 1180px);
  border-radius: 9999px;
  background: rgba(18,18,18,0.16);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
[data-theme="dark"] .sn-bar{ background: rgba(18,18,18,0.22); border-color: rgba(255,255,255,0.1); }

.sn-bar-inner{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  padding: 10px 22px; gap: 12px;
}

.sn-push-content{ padding-top: 90px; }

.sn-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-weight:700; font-size:15px; justify-self:start; }

.sn-links-center{ display:none; gap:26px; align-items:center; font-size:14px; justify-self:center; white-space:nowrap; }
.sn-links-center a{ color:#fff; text-decoration:none; opacity:0.75; }
.sn-links-center a:hover{ opacity:1; }
@media (min-width:768px){ .sn-links-center{ display:flex; } }

.sn-actions{ display:flex; align-items:center; gap:14px; justify-self:end; }
@media (min-width:768px){ .sn-login-btn{ display:inline-block; } }

.sn-burger{
  position: relative; z-index: 1001;
  display:flex; width:40px; height:40px; border-radius:12px;
  background: var(--color-card,#FAFAF8); align-items:center; justify-content:center; flex-direction:column; gap:5px;
  cursor:pointer; padding:0; border:none;
  box-shadow: 6px 6px 14px rgba(0,0,0,0.08), -4px -4px 10px rgba(255,255,255,0.9);
  margin-left:auto; margin-right:-10px;
}
[data-theme="dark"] .sn-burger{ background: rgba(255,255,255,0.06); }
@media (min-width:768px){ .sn-burger{ display:none; } }
.sn-burger span{ width:18px; height:2px; background: var(--color-text,#1c1c1e); border-radius:2px; transition:transform .25s ease, opacity .2s ease; pointer-events:none; }
.sn-burger.sn-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.sn-burger.sn-open span:nth-child(2){ opacity:0; }
.sn-burger.sn-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Dim backdrop behind the floating card ---------- */
.sn-backdrop{
  position: fixed; inset: 0; z-index: 900;
  background: rgba(10,10,15,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.sn-backdrop.sn-open{ opacity: 1; pointer-events: auto; }

/* ---------- Floating rounded card, inset from screen edges ---------- */
.sn-drawer{
  position: fixed;
  top: 6%; bottom: 6%; right: 4%;
  width: min(78vw, 320px);
  z-index: 950;
  background: linear-gradient(165deg, #6a5acd 0%, #4b3aa8 100%);
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  padding: 28px 22px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  box-sizing: border-box;
  transform: translateX(120%);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
[data-theme="dark"] .sn-drawer{ background: linear-gradient(165deg, #4b3aa8 0%, #2a2270 100%); }
.sn-drawer.sn-open{ transform: translateX(0); opacity: 1; }

.sn-drawer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.sn-drawer-brand .logo-badge{ width:2.2rem; height:2.2rem; }
.sn-drawer-brand span{ color:#fff; font-weight:700; font-size:16px; }

.sn-reveal-heading{ color: rgba(255,255,255,0.5); font-size:11px; text-transform:uppercase; letter-spacing:.08em; padding:4px 4px 12px; }

.sn-item-list{ display:flex; flex-direction:column; gap:2px; }
.sn-item{
  display:flex; align-items:center; justify-content:flex-start; gap:13px; color:#fff; text-decoration:none;
  font-size:14.5px; font-weight:500; padding:11px 8px; border-radius:12px; background:none; border:none; font-family:inherit; width:100%;
}
.sn-item:hover{ background: rgba(255,255,255,0.1); }
.sn-item-icon{
  width:32px; height:32px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.14); color:#fff;
}
.sn-divider{ height:1px; background: rgba(255,255,255,0.15); margin:10px 4px; }
.sn-cta{
  margin-top:8px; background:#fff; color:#4b3aa8; text-align:center; border-radius:9999px; padding:12px; font-weight:600; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:8px;
}

body.sn-lock{ overflow:hidden; }


/* ---------- Nav buttons (were unstyled) ---------- */
.sn-login-btn{ display:none; color:#fff; opacity:.8; font-size:14px; font-weight:500; text-decoration:none; padding:8px 6px; transition:opacity .2s; }
.sn-login-btn:hover{ opacity:1; }
@media (min-width:768px){ .sn-login-btn{ display:inline-block; } }
.sn-cta-pill{ display:inline-flex; align-items:center; background:linear-gradient(90deg,#8b7cf6,#4fd1c5); color:#0b0a14; font-weight:700; font-size:13.5px; padding:9px 18px; border-radius:9999px; text-decoration:none; white-space:nowrap; transition:transform .2s, box-shadow .2s; }
.sn-cta-pill:hover{ transform:translateY(-1px); box-shadow:0 8px 24px -8px rgba(139,124,246,.7); }