/* Custom CSS for IHatePDF */@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');body{font-family:'Inter',sans-serif;background-color:#f3f4f6;color:#374151;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#e0e0e0;border-radius:10px}::-webkit-scrollbar-thumb{background:#9ca3af;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#6b7280}:root{--primary:#4f46e5;--primary-dark:#4338ca;--primary-light:#6366f1;--accent:#10b981;--danger:#ef4444}button,input,select{-webkit-appearance:none;appearance:none}.drop-zone{border:2px dashed var(--primary-light);background-color:#eff6ff;transition:all .3s ease}.drop-zone.drag-over{background-color:#e0e7ff;border-color:var(--primary);transform:scale(1.02)}.drop-zone.invalid{animation:shake .3s;border-color:var(--danger);background-color:#fee2e2}.file-card{background-color:#fff;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);transition:all .2s ease-in-out;transform-style:preserve-3d;perspective:1000px}.file-card:hover{transform:translateY(-5px) perspective(1000px) rotateX(2deg) rotateY(2deg);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.file-card.dragging{opacity:.5;transform:scale(.95);box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}.file-card.drag-over-target{border:2px solid var(--primary);transform:scale(1.05)}.btn-primary{background-color:var(--primary);transition:all .2s ease;position:relative;overflow:hidden}.btn-primary:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.btn-primary:active{transform:translateY(0);box-shadow:none}.btn-primary .ripple{position:absolute;border-radius:50%;background-color:rgba(255,255,255,.7);animation:ripple-effect .6s linear;transform:scale(0);opacity:1}@keyframes ripple-effect{to{transform:scale(4);opacity:0}}.btn-primary .spinner{border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;width:1.25rem;height:1.25rem;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1000}.confetti{position:absolute;width:10px;height:10px;background-color:var(--accent);opacity:0;animation:confetti-fall 2s forwards}@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}.toast-container{position:fixed;bottom:1rem;right:1rem;z-index:1000;display:flex;flex-direction:column-reverse;gap:.5rem}.toast{background-color:#333;color:#fff;padding:.75rem 1.25rem;border-radius:.5rem;box-shadow:0 4px 12px rgba(0,0,0,.2);animation:slide-in-right .3s ease-out forwards,fade-out .3s ease-out 2.7s forwards;min-width:250px}.toast.error{background-color:var(--danger)}.toast.success{background-color:var(--accent)}.toast.warning{background-color:#f59e0b}@keyframes slide-in-right{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fade-out{from{opacity:1}to{opacity:0}}#onboarding-flow{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);z-index:2000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(5px)}.onboarding-step{background-color:#fff;border-radius:1rem;padding:2rem;text-align:center;max-width:500px;box-shadow:0 10px 20px rgba(0,0,0,.2);animation:pop-in .3s ease-out}.pulse-animation{width:50px;height:50px;background-color:var(--primary-light);border-radius:50%;margin:1rem auto;animation:pulse-onboarding 1.5s infinite ease-in-out}.drag-demo{width:150px;height:80px;background-color:var(--primary-light);border-radius:.5rem;margin:1rem auto;position:relative;overflow:hidden}.drag-demo::before{content:'📄';font-size:3rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:drag-move 2s infinite ease-in-out}@keyframes pop-in{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse-onboarding{0%{transform:scale(.8);opacity:.7}50%{transform:scale(1.2);opacity:1}100%{transform:scale(.8);opacity:.7}}@keyframes drag-move{0%{transform:translate(-70%,-50%)}50%{transform:translate(70%,-50%)}100%{transform:translate(-70%,-50%)}}@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-5px)}100%{transform:translateX(0)}}

/* Meet Me Modal & Tooltip Styles */
.meet-me-tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 0.5rem;
  background: #1a202c;
  color: #fff;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: opacity 0.2s;
}
.group:focus-within .meet-me-tooltip,
.group:hover .meet-me-tooltip {
  opacity: 1;
  pointer-events: auto;
}

.meet-me-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
}

.meet-me-modal {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 2rem;
  max-width: 20rem;
  width: 100%;
  text-align: center;
  position: relative;
  animation: fade-in 0.2s;
}

.meet-me-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  color: #a0aec0;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  transition: color 0.2s;
}
.meet-me-close:hover {
  color: #374151;
}

.meet-me-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4338ca;
  margin-bottom: 0.5rem;
}
.meet-me-desc {
  color: #4b5563;
  margin-bottom: 1.5rem;
}
.meet-me-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}
.meet-me-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.meet-me-twitter {
  background: #000;
  color: #fff;
}
.meet-me-twitter:hover {
  background: #111827;
}
.meet-me-github {
  background: #1f2937;
  color: #fff;
}
.meet-me-github:hover {
  background: #111827;
}
.meet-me-back {
  margin-top: 0.5rem;
  color: #4338ca;
  background: none;
  border: none;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s;
}
.meet-me-back:hover {
  color: #6366f1;
}
@keyframes fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}