:root{
  --hbsaav-primary:#d6111e;
  --hbsaav-secondary:#ddc76d;
  --hbsaav-black:#000;
  --hbsaav-white:#fff;

  --hbsaav-bg:var(--hbsaav-black);
  --hbsaav-fg:var(--hbsaav-white);
  --hbsaav-muted:rgba(255,255,255,.78);
  --hbsaav-border:rgba(255,255,255,.18);
}

.hbsaav-shortcode{
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 999999;
}

.hbsaav-topbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: var(--hbsaav-bg);
  color: var(--hbsaav-fg);
  border: 2px solid var(--hbsaav-primary);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  line-height: 1;
  font-size: 13px;
}

.hbsaav-topbtn:hover{ border-color: var(--hbsaav-secondary); }
.hbsaav-topbtn:focus{ outline:3px solid var(--hbsaav-secondary); outline-offset:2px; }

.hbsaav-panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: var(--hbsaav-bg);
  color: var(--hbsaav-fg);
  border: 1px solid var(--hbsaav-border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.hbsaav-group{ padding:10px 0; border-bottom:1px solid var(--hbsaav-border); }
.hbsaav-group:last-child{ border-bottom:0; }

.hbsaav-switch{
  display:flex;
  gap:10px;
  align-items:center;
}
.hbsaav-switch input{
  width:18px;
  height:18px;
  accent-color: var(--hbsaav-primary);
}

.hbsaav-footer{
  padding-top:10px;
  display:flex;
  justify-content:flex-end;
}
.hbsaav-link{
  background:transparent;
  color: var(--hbsaav-secondary);
  border:0;
  cursor:pointer;
  text-decoration: underline;
}

/* Effects */
body.hbsaav-contrast{ background:#000 !important; color:#fff !important; }
body.hbsaav-contrast a{ color: var(--hbsaav-secondary) !important; }

body.hbsaav-reduce-motion *{
  animation:none !important;
  transition:none !important;
  scroll-behavior:auto !important;
}