:root {
  --color-primary: #176d4a;
  --color-accent: #c9a24b;
  --color-surface: #f6efdd;
  --color-ink: #1c2b24;
  --color-ink-muted: #55645b;
  --font-sans: "Vazirmatn", system-ui, sans-serif;
  --font-display: "Estedad", "Vazirmatn", system-ui, sans-serif;
  --radius-md: 0.75rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.5rem;
  --shadow-sm: 0 1px 2px rgb(60 50 20 / 0.08);
  --shadow-lg: 0 12px 28px -10px rgb(60 50 20 / 0.22);
  --shadow-xl: 0 24px 48px -16px rgb(23 109 74 / 0.28);
  --color-card: #fffcf3;
  --color-line: rgb(28 43 36 / 0.14);
  --color-wash: rgb(23 109 74 / 0.08);
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
}

* { box-sizing: border-box; margin: 0; }
html, body { font-family: var(--font-sans); color: var(--color-ink); background: var(--color-surface); line-height: 1.8; overflow-x: hidden; }
#root { min-height: 100dvh; }
body { background-image: radial-gradient(rgb(23 109 74 / 0.06) 1px, transparent 1px); background-size: 22px 22px; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.perf { position: relative; }
.perf::after { content: ""; position: absolute; inset-inline: 18px; bottom: -1px; height: 6px; background: radial-gradient(circle at 6px 0, var(--color-surface) 3px, transparent 3.5px) 0 0 / 14px 6px repeat-x; }
.field { width: 100%; background: #fff; border: 1.5px solid var(--color-line); border-radius: var(--radius-md); padding: 0.55rem 0.8rem; min-width: 0; }
.field:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px var(--color-wash); }
.num { font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }

@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgb(201 162 75 / 0.5); } 100% { box-shadow: 0 0 0 10px rgb(201 162 75 / 0); } }
.rise { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) both; }
.grow { transform-origin: right; animation: grow 1.4s 0.3s ease-out both; }
.pulse { animation: pulse-ring 1.6s infinite; }
@media (prefers-reduced-motion: reduce) { .rise, .grow, .pulse { animation: none; } }

/* SAZITO_PLATFORM_CONTAINER_FIX_SCRUM_4531 */
/* No author .container rule found; Tailwind's built-in .container
   utility never had a phone gutter in EITHER preview or a real build
   (width:100% + breakpoint max-width, no padding/margin, ever) — see
   platformContainerFix.ts for the full mechanism, verified both ways.
   Scoped to @layer components (not unlayered) so a REAL utility class the
   author DID apply — e.g. class="container px-8" — still wins: Tailwind's
   own @layer utilities (publish) and its unlayered runtime injection
   (preview) both outrank @layer components; this default only applies
   when nothing else sets padding/margin at all. */
@layer components {
  .container {
    margin-inline: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 640px) {
    .container {
      padding-inline: 1.5rem;
    }
  }
}