:root{
  --primary:#667eea; --secondary:#764ba2; --bg:#ffffff; --text:#0f172a;
  --muted:#64748b; --surface:#f8fafc; --ring:#c7d2fe; --danger:#ef4444; --success:#16a34a;
}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Focus visibility */
:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline:3px solid var(--ring); outline-offset:2px; border-radius:8px
}

/* Utilities */
.container{max-width:1100px;margin-inline:auto;padding-inline:16px}
.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}
.text-muted{color:var(--muted)}

/* Buttons baseline (non-destructive; pages can override) */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:10px;border:1px solid rgba(0,0,0,.06);font-weight:700;cursor:pointer;transition:filter .2s, transform .05s;
  background:#fff; color:var(--text)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));border:0;color:#fff;box-shadow:0 4px 12px rgba(102,126,234,.3)}
.btn-primary:hover{filter:brightness(1.03)}
.btn-danger{background:#fee2e2;border-color:#fecaca;color:#991b1b}

/* Toasts */
.toast-container{position:fixed;right:20px;top:80px;z-index:2000;display:flex;flex-direction:column;gap:8px}
.toast{padding:10px 14px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.12);font-weight:600}
.toast.info{background:#dbeafe;color:#1e40af}
.toast.success{background:#dcfce7;color:#166534}
.toast.error{background:#fee2e2;color:#991b1b}

/* Loading skeleton */
.skeleton{position:relative;overflow:hidden;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 37%,#f3f4f6 63%);background-size:400% 100%;animation:skeleton-load 1.4s ease infinite;border-radius:8px}
@keyframes skeleton-load{0%{background-position:100% 0}100%{background-position:0 0}}

/* Small card baseline */
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.04)}

/* Hide default focus ring on mouse click (keep for keyboard) */
:focus:not(:focus-visible){outline:none}

/* Footer Credits */
.footer-credits{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
  padding:2rem 1.5rem;
  margin-top:4rem;
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.1);
}
.footer-credits .container{
  max-width:900px;
  margin:0 auto;
}
.footer-content{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  align-items:center;
}
.footer-brand{
  font-family:'Space Grotesk','Sora',sans-serif;
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-0.01em;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}
.footer-brand-logo{
  width:32px;
  height:32px;
  border-radius:6px;
  object-fit:contain;
}
.footer-tagline{
  font-size:0.95rem;
  opacity:0.9;
  font-weight:500;
  max-width:500px;
}
.footer-links{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  justify-content:center;
}
.footer-link{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:0.9rem;
  opacity:0.85;
  transition:opacity 0.2s ease;
}
.footer-link:hover{
  opacity:1;
  text-decoration:underline;
}
.footer-divider{
  width:100%;
  height:1px;
  background:rgba(255,255,255,0.2);
  margin:0.5rem 0;
}
.footer-credit{
  font-size:0.85rem;
  opacity:0.75;
  font-weight:500;
}
.footer-credit a{
  color:#fff;
  text-decoration:underline;
  font-weight:600;
}
.footer-credit a:hover{
  opacity:0.9;
}
@media (max-width: 640px){
  .footer-credits{
    padding:1.5rem 1rem;
    margin-top:3rem;
  }
  .footer-brand{
    font-size:1.25rem;
  }
  .footer-links{
    gap:1rem;
    font-size:0.85rem;
  }
}