@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Hind+Siliguri:wght@400;500;600;700&display=swap');
/* ================================================================
   Amader Job — v84 public-site polish layer (Work 9).
   Loaded AFTER the compiled bundle CSS from index.html (one link
   line — delete it to revert everything here).
   Rules are deliberately scoped and additive: NO global resets, no
   `*` selectors, no layout repositioning — only finish-level
   properties (type rhythm, shadows, radii, focus, selection,
   scrollbar) that cannot break the SPA's own layout. The brand
   identity is unchanged: mint/emerald + navy on the site's existing
   headline structure.
   ================================================================ */

/* Typography rhythm: crisper rendering + steadier Bengali line-height */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.005em;
}
h1, h2, h3 {
  letter-spacing: -0.012em;
  text-wrap: balance;
}
p {
  line-height: 1.65;
}

/* Hand-finished selection + focus treatment */
::selection {
  background: #059669;
  color: #ffffff;
}
a, button, input, select, textarea, [tabindex] {
  -webkit-tap-highlight-color: rgba(16, 185, 129, 0.18);
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(16, 185, 129, 0.65);
  outline-offset: 2px;
}

/* Form finish: softer focus ring, consistent placeholder tone */
input, select, textarea {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16);
}
input::placeholder, textarea::placeholder {
  color: #94a3b8;
  opacity: 1;
}

/* Button/card micro-polish: gentle press feedback, deeper soft
   shadows on large rounded cards (visual only — no size changes) */
button {
  transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
button:active {
  transform: scale(0.985);
}
.rounded-2xl, .rounded-3xl {
  box-shadow: 0 16px 38px -18px rgba(11, 21, 38, 0.14), 0 3px 8px -3px rgba(11, 21, 38, 0.05);
}

/* Imagery: images sit crisper inside their cards */
img {
  image-rendering: auto;
}

/* Slim brand-tinted scrollbar (desktop) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #eef2f7;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #10b981, #059669);
  border-radius: 999px;
  border: 2px solid #eef2f7;
}

/* Header/footer finish: a hairline brand gradient under sticky
   headers and over footers when they carry the dark navy surface */
header {
  backdrop-filter: saturate(1.15);
}
footer {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #059669, #14b8a6, #22d3ee, transparent) 1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  button, input, select, textarea {
    transition: none;
  }
}

/* ================================================================
   v85.1 — HUMAN / EDITORIAL DESIGN LAYER (owner: "AI je banaiche
   jeno buja na jay" — the SPA dashboard must look human-made).
   Appended BELOW the intact v84 layer; the JS bundle and its
   markup are untouched — this is presentation only. Language:
   warm paper canvas (light mode), Fraunces display serif for
   headings over a Plus Jakarta Sans / Hind Siliguri body, matte
   card surfaces with hairline borders instead of heavy shadows,
   flat emerald buttons, tabular numerals for money, a calmer
   blurred bottom nav. Dark-mode surfaces are left alone except
   for the type/numeral rules, which read well in both modes.
   ================================================================ */

/* --- Type pairing: editorial serif display + humanist sans body */
body {
  font-family: 'Plus Jakarta Sans', 'Hind Siliguri', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
h1, h2 {
  font-family: 'Fraunces', 'Plus Jakarta Sans', 'Hind Siliguri', serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}
h3 {
  letter-spacing: -0.008em;
}

/* --- Bluish-gray canvas + matte surfaces (light appearance only;
       vetoed by either dark signal: OS preference or .dark) */
@media (prefers-color-scheme: light) {
  :root:not(.dark) body,
  :root:not(.dark) body.bg-slate-50 {
    background-color: #F3F6F8;
    color: #1F2937;
  }
  :root:not(.dark) .bg-slate-50 {
    background-color: #F3F6F8;
  }
  :root:not(.dark) .bg-slate-100 {
    background-color: #E8EEF2;
  }
  /* Matte cards: hairline border + one soft shadow, no glassy depth */
  :root:not(.dark) main .bg-white.rounded-2xl,
  :root:not(.dark) main .bg-white.rounded-3xl,
  :root:not(.dark) .bg-white.rounded-2xl.shadow,
  :root:not(.dark) .bg-white.rounded-3xl.shadow,
  :root:not(.dark) .bg-white.rounded-2xl.shadow-sm,
  :root:not(.dark) .bg-white.rounded-3xl.shadow-sm,
  :root:not(.dark) .bg-white.rounded-2xl.shadow-md,
  :root:not(.dark) .bg-white.rounded-3xl.shadow-md,
  :root:not(.dark) .bg-white.rounded-2xl.shadow-lg,
  :root:not(.dark) .bg-white.rounded-3xl.shadow-lg {
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(11, 21, 38, 0.04), 0 10px 30px -18px rgba(11, 21, 38, 0.12);
  }
  /* Calmer chips/pills on white surfaces */
  :root:not(.dark) .bg-slate-100.rounded-full {
    background-color: #E8EEF2;
  }
  /* Sticky header: paper-white with a hairline rule */
  :root:not(.dark) header {
    border-bottom: 1px solid rgba(11, 21, 38, 0.07);
  }
  /* Bottom nav: frosted paper, hairline top, soft lift */
  :root:not(.dark) nav.fixed.bottom-0 {
    background-color: rgba(243, 246, 248, 0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid #e7e1d3;
    box-shadow: 0 -8px 28px -14px rgba(11, 21, 38, 0.18);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* --- Flat emerald buttons: gradient CTAs become one honest colour
       (stops come from from-emerald-*/to-teal-* utilities) */
button[class*="from-emerald"], a[class*="from-emerald"],
button[class*="from-teal"], a[class*="from-teal"] {
  background-image: none;
  background-color: #059669;
}
button[class*="from-emerald"]:hover, a[class*="from-emerald"]:hover,
button[class*="from-teal"]:hover, a[class*="from-teal"]:hover {
  background-color: #047857;
}

/* --- Gentler press feedback on links styled as buttons */
a:active {
  transform: scale(0.99);
}

/* --- Refined focus ring for the serif/sans pairing */
input:focus, select:focus, textarea:focus {
  border-color: rgba(5, 150, 105, 0.55);
}