/* ShortLink Pro - shared runtime styles */
:root {
  --slp-radius: 1rem;
  --slp-radius-sm: 0.65rem;
  --slp-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--slp-font);
  -webkit-font-smoothing: antialiased;
}

/* Flash / toast container */
#flash-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(92vw, 360px);
  pointer-events: none;
}

.slp-toast {
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
}

.slp-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.slp-toast-success { background: #10b981; color: #fff; }
.slp-toast-error { background: #ef4444; color: #fff; }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* Back to top */
#back-to-top {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 1500;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  cursor: pointer;
  background: var(--slp-accent, #6366f1);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

#back-to-top.show {
  opacity: 1;
  transform: none;
}

/* Mode buttons */
[data-mode-btn] {
  border-radius: 999px;
}

/* Language & theme dropdown toggles */
.locale-menu .dropdown-menu { min-width: 220px; }

/* Glow text */
.glow-text {
  text-shadow: 0 0 24px var(--slp-glow, rgba(99, 102, 241, 0.55));
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(120deg, var(--slp-accent, #6366f1), var(--slp-accent-2, #ec4899));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Shimmer underline / loading bar */
.slp-loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 3000;
  background: linear-gradient(90deg, #6366f1, #ec4899, #f59e0b);
  transition: width 0.3s ease;
}

@media (min-width: 768px) {
  .reveal.reveal-left { transform: translateX(-24px); }
  .reveal.reveal-right { transform: translateX(24px); }
  .reveal.reveal-left.in, .reveal.reveal-right.in { transform: none; }
}