/* Minor reusable utility classes */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.rounded { border-radius: var(--radius-ui); }
.rounded-lg { border-radius: var(--radius-ui); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); padding: 1.25rem 1.5rem; border-radius: var(--radius-ui); box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.card::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(255,255,255,.04),transparent 60%); pointer-events:none; }
.badge { display:inline-flex; align-items:center; gap:.35rem; background: rgba(99,102,241,.15); color: var(--color-accent); padding:.4rem .7rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600; border-radius:999px; }
.inline-icon { width:1em; height:1em; display:inline-block; vertical-align:middle; }
.btn { --btn-bg: var(--color-accent); --btn-bg-hover: var(--color-accent-alt); --btn-color:#fff; --btn-pad: .85rem 1.35rem; --btn-radius: var(--radius-lg); --btn-shadow: var(--shadow-md); --btn-font-size: .95rem; cursor:pointer; border:none; padding: var(--btn-pad); border-radius:var(--btn-radius); font-weight:600; font-size:var(--btn-font-size); font-family:inherit; background:var(--btn-bg); color:var(--btn-color); display:inline-flex; align-items:center; gap:.6rem; box-shadow:var(--btn-shadow); position:relative; transition: background var(--transition-med), transform var(--transition-fast), box-shadow var(--transition-med); }
.btn:hover, .btn:focus-visible { background:var(--btn-bg-hover); text-decoration:none; color:#fff; }
.btn:active { transform:translateY(2px); box-shadow:var(--shadow-sm); }
.btn-outline { --btn-bg: rgba(99,102,241,.1); --btn-bg-hover: rgba(99,102,241,.18); --btn-color: var(--color-accent); box-shadow:none; border:1px solid rgba(99,102,241,.4); }
/* Compact button variant (tight to text) */
.btn-compact { --btn-pad: .5rem .75rem; padding: var(--btn-pad); font-size:.8rem; line-height:1.05; border-radius: var(--radius-ui); box-shadow: var(--shadow-sm); font-weight:600; }
.btn-compact.btn-outline { --btn-bg: rgba(99,102,241,.14); --btn-bg-hover: rgba(99,102,241,.22); }

.fade-in { animation: fade-in .6s var(--transition-med) backwards; }
@keyframes fade-in { from { opacity:0; transform: translateY(12px);} }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── Scroll-to-top FAB (shared across all pages) ── */
.scroll-fab {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 800;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: var(--color-accent);
  color: #fff;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(99, 102, 241, .45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s, background .2s;
}
.scroll-fab--visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.scroll-fab:hover { background: var(--color-accent-alt); }