/* Minimal handcrafted Tailwind-like utilities used by the app. Not full Tailwind.
   This provides basic layout, spacing, colors and typography used in the pages so
   the UI remains usable offline. For full parity, build Tailwind locally and
   include the generated CSS instead. */

:root{
  --emerald-600:#059669;
  --emerald-500:#10B981;
  --neutral-50:#F9FAFB;
  --neutral-100:#F3F4F6;
  --neutral-200:#E5E7EB;
  --neutral-300:#D1D5DB;
  --neutral-500:#6B7280;
  --neutral-900:#111827;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:var(--neutral-50);color:var(--neutral-900);-webkit-font-smoothing:antialiased}
.max-w-6xl{max-width:72rem;margin-left:auto;margin-right:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.md\:py-12{padding-top:3rem;padding-bottom:3rem}
.rounded-xl{border-radius:0.75rem}
.rounded-md{border-radius:0.375rem}
.rounded-full{border-radius:9999px}
.border{border:1px solid var(--neutral-200)}
.border-neutral-200{border-color:var(--neutral-200)}
.bg-white{background:#fff}
.bg-neutral-50{background:var(--neutral-50)}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.text-sm{font-size:0.875rem}
.text-xs{font-size:0.75rem}
.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}
.font-semibold{font-weight:600}
.font-extrabold{font-weight:800}
.tracking-tight{letter-spacing:-0.01em}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-3{gap:0.75rem}
.gap-2{gap:0.5rem}
.gap-6{gap:1.5rem}
.w-full{width:100%}
.h-8{height:2rem}
.w-8{width:2rem}
.object-cover{object-fit:cover}
.grid{display:grid}
.place-items-center{place-items:center}
.text-neutral-500{color:var(--neutral-500)}
.text-neutral-600{color:#4B5563}
.text-neutral-400{color:#9CA3AF}
.text-neutral-800{color:#1F2937}
.text-neutral-900{color:var(--neutral-900)}
.bg-emerald-600{background:var(--emerald-600)}
.text-white{color:#fff}
.inline-flex{display:inline-flex}
.rounded-lg{border-radius:0.5rem}
.border-dashed{border-style:dashed}
.max-w-\[520px\]{max-width:520px}
.aspect-square{aspect-ratio:1/1}
.overflow-hidden{overflow:hidden}
.pointer-events-none{pointer-events:none}
.hidden{display:none}
.block{display:block}
.mt-3{margin-top:0.75rem}
.mt-6{margin-top:1.5rem}
.mb-8{margin-bottom:2rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.pt-1{padding-top:0.25rem}
.border-t{border-top:1px solid var(--neutral-200)}
/* safer class name for inset shadow; avoids complex characters that can break some parsers */
.shadow-inset{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.04)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* small helpers used by the slider */
#sliderTrack{cursor:pointer}

/* responsive helpers (basic) */
@media(min-width:768px){
  .md\:py-12{padding-top:3rem;padding-bottom:3rem}
  .md\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}
}

/* kbd style */
kbd{background:#f3f4f6;border:1px solid #e5e7eb;padding:2px 6px;border-radius:6px;font-family:inherit}