*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }
input, textarea, select { font: inherit; color: inherit; }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-sunken); padding: 0.05em 0.35em; border-radius: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 16px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: white; }
.btn--primary:hover { background: var(--primary-hover); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--bg-soft); }
.btn--lg { padding: 14px 22px; font-size: 1.05rem; border-radius: 12px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.muted { color: var(--text-muted); }
.center { text-align: center; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #888; }
.dot--green { background: #1bbf6b; box-shadow: 0 0 0 3px rgba(27,191,107,.18); }
.dot--red { background: #e0524d; box-shadow: 0 0 0 3px rgba(224,82,77,.18); }
.sep { color: var(--text-faint); margin: 0 6px; }

/* ---------- Top loader bar ---------- */
.topLoader {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 9999; pointer-events: none; overflow: hidden;
  background: rgba(11, 92, 255, .12);
}
.topLoader::before {
  content: ''; display: block; height: 100%; width: 35%;
  background: linear-gradient(90deg, transparent, var(--primary, #0b5cff) 50%, transparent);
  animation: topLoaderSlide 1.1s cubic-bezier(.4, 0, .2, 1) infinite;
  will-change: transform;
}
.topLoader.is-done {
  opacity: 0; transition: opacity .35s ease;
}
.admin-body .topLoader { background: rgba(110, 168, 255, .15); }
.admin-body .topLoader::before {
  background: linear-gradient(90deg, transparent, #6ea8ff 50%, transparent);
}
@keyframes topLoaderSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(385%); }
}
@media (prefers-reduced-motion: reduce) {
  .topLoader::before { animation: none; }
}

/* ---------- Button loading state ---------- */
.btn.is-loading,
.access-pill.is-loading {
  position: relative; color: transparent !important;
  pointer-events: none; cursor: progress;
}
.btn.is-loading::after,
.access-pill.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, .55);
  border-top-color: transparent;
  border-radius: 50%;
  animation: btnSpin .7s linear infinite;
}
.btn--ghost.is-loading::after {
  border-color: rgba(15, 18, 22, .35);
  border-top-color: transparent;
}
.btn--danger.is-loading::after {
  border-color: rgba(255, 139, 139, .55);
  border-top-color: transparent;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after, .access-pill.is-loading::after { animation-duration: 1.6s; }
}