/* ========================================================
   Prompteg Short Link Tool (pteg.site) Styles
   100% Matching prompteg.com Design System
   ======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700;800&display=swap');

:root {
  --primary-orange: #FF6B00;
  --deep-black: #080808;
  --surface-dark: #0D0D0D;
  --surface-card: #111111;
  --surface-border: #222222;
  --surface-border-subtle: #1A1A1A;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--deep-black);
  color: #f5f5f7;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* Typography */
.font-display {
  font-family: 'Hanken Grotesk', sans-serif;
}
.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #080808;
}
::-webkit-scrollbar-thumb {
  background: #222222;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #FF6B00;
}

/* Fade In Animations */
.animate-fade-in {
  animation: fadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Image Shimmer Loading */
.img-loading {
  background: linear-gradient(90deg, #0d0d0d 0%, #161616 50%, #0d0d0d 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Copy State Feedback */
.copied-active {
  background-color: #22c55e !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
}

/* Toast Notification */
#toast-container {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: #141414;
  border: 1px solid var(--primary-orange);
  color: #ffffff;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.9), 0 0 12px rgba(255, 107, 0, 0.25);
  animation: toastIn 0.2s cubic-bezier(0.16, 1, 0.3, 1), toastOut 0.3s ease 1.9s forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
}

@media (max-width: 640px) {
  #toast-container {
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 16px;
    right: 16px;
  }
  .toast {
    width: 100%;
    justify-content: center;
    font-size: 12px;
  }
}