.sfhl-bar {
  --sfhl-gap: .5rem;
  --sfhl-radius: .5rem;
  --sfhl-pad-y: .5rem;
  --sfhl-pad-x: .75rem;
  --sfhl-font: inherit;
  --sfhl-bg: #f5f5f5;
  --sfhl-border: #e5e7eb;
  --sfhl-btn-bg: #ffffff;
  --sfhl-btn-border: #d1d5db;
  --sfhl-btn-hover: #f3f4f6;
  --sfhl-btn-active: #e5e7eb;
  --sfhl-shadow: 0 1px 2px rgba(0,0,0,.06);
  margin: 0 0 1rem 0;
  padding: .5rem;
  border: 1px solid var(--sfhl-border);
  background: var(--sfhl-bg);
  border-radius: var(--sfhl-radius);
  box-shadow: var(--sfhl-shadow);
  font-family: var(--sfhl-font);
}
.sfhl-inner { display: flex; gap: var(--sfhl-gap); align-items: center; flex-wrap: wrap; }
.sfhl-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: var(--sfhl-pad-y) var(--sfhl-pad-x);
  border-radius: calc(var(--sfhl-radius) - 2px);
  border: 1px solid var(--sfhl-btn-border);
  background: var(--sfhl-btn-bg);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  line-height: 1.1;
  transition: background .15s ease, transform .02s ease;
}
.sfhl-btn:hover { background: var(--sfhl-btn-hover); }
.sfhl-btn:active { background: var(--sfhl-btn-active); transform: translateY(1px); }
.sfhl-icon, .sfhl-arrow { display: inline-block; }
.sfhl-btn--home .sfhl-icon { vertical-align: middle; }

/* Floating fallback */
.sfhl-floating {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 9999;
  margin: 0;
}