/* Papermitra - global styles (vanilla, works without Tailwind compile step) */
[x-cloak] { display: none !important; }

html, body { font-feature-settings: "cv02","cv03","cv04","cv11"; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.55); }

/* Glass card */
.glass {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(15,23,42,.06);
}
.dark .glass {
  background: rgba(15,23,42,.5);
  border-color: rgba(255,255,255,.08);
}

/* Decorative gradient blob */
.blob {
  position: absolute; pointer-events: none;
  filter: blur(70px); opacity: .55; z-index: 0;
}

/* Section reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Skeleton loader */
.skeleton {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(148,163,184,.15) 25%, rgba(148,163,184,.3) 37%, rgba(148,163,184,.15) 63%);
  background-size: 400% 100%;
  animation: pm-shimmer 1.4s ease infinite;
}
@keyframes pm-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============== Buttons (vanilla) ============== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: 0 1.25rem; height: 2.75rem;
  border-radius: .75rem; font-weight: 600; font-size: .875rem;
  transition: all .2s ease; line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
}
.btn-primary { background: #2563EB; color: #fff; box-shadow: 0 0 60px rgba(37,99,235,.35); }
.btn-primary:hover { background: #1d4ed8; }
.btn-ghost  { background: transparent; border-color: rgb(226 232 240); }
.btn-ghost:hover { background: rgb(241 245 249); }
.dark .btn-ghost  { border-color: rgba(255,255,255,.1); }
.dark .btn-ghost:hover { background: rgba(255,255,255,.05); }
.btn-outline { border-color: rgb(226 232 240); background: transparent; }
.btn-outline:hover { border-color: #2563EB; color: #2563EB; }
.dark .btn-outline { border-color: rgba(255,255,255,.1); }

/* ============== Form fields (vanilla) ============== */
.field {
  width: 100%; height: 2.75rem;
  border-radius: .75rem;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  padding: 0 1rem; font-size: .875rem; color: inherit;
  transition: box-shadow .2s, border-color .2s;
}
.field::placeholder { color: rgb(148 163 184); }
.field:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
.dark .field { background: rgba(30,41,59,.6); border-color: rgba(255,255,255,.1); color: #f1f5f9; }

.label { display:block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgb(100 116 139); margin-bottom: .5rem; }

/* ============== Pills ============== */
.pill {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .625rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; line-height: 1;
}

/* ============== Cards ============== */
.card {
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  box-shadow: 0 10px 40px -10px rgba(15,23,42,.12), 0 2px 6px -2px rgba(15,23,42,.04);
}
.dark .card { background: rgba(15,23,42,.6); border-color: rgba(255,255,255,.1); }

/* Anchor offset for sticky header */
:target { scroll-margin-top: 96px; }