:root {
  --ink: #111;
  --muted: #666;
  --line: #e2e2e2;
  --bg: #fff;
  --soft: #f7f7f5;
  --danger: #b91c1c;
  --ok: #166534;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Noto Sans Bengali', 'Hind Siliguri', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
}
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* Header */
header { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 40; }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; flex-wrap: wrap; gap: 10px; }
.brand { font-size: 1.5rem; font-weight: 700; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.hdr-search {
  display: none; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px; font-size: 1.05rem; cursor: pointer; line-height: 1;
}
.hdr-search.show { display: inline-block; }
.hdr-search:hover { border-color: var(--ink); background: var(--soft); }
.brand .logo { width: 34px; height: 34px; display: block; }
.brand span { color: var(--muted); font-weight: 400; font-size: 0.95rem; }
nav a { color: var(--ink); text-decoration: none; margin-left: 18px; font-size: 0.95rem; }
nav a:hover { text-decoration: underline; }
nav a.cta { border: 1.5px solid var(--ink); padding: 6px 14px; border-radius: 4px; font-weight: 600; }
nav a.cta:hover { background: var(--ink); color: #fff; text-decoration: none; }
nav .lang {
  margin-left: 18px; padding: 5px 12px; border: 1px solid #bbb; border-radius: 4px;
  background: #fff; color: var(--ink); font-family: inherit; font-size: 0.85rem;
  cursor: pointer; font-weight: 600;
}
nav .lang:hover { border-color: var(--ink); }

/* Hero */
.hero { padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.hero h1.slogan { font-size: 2.9rem; line-height: 1.25; color: #1877F2; }
.hero .sub { font-size: 1.2rem; line-height: 1.55; color: var(--ink); margin-top: 10px; max-width: 720px; }
.hero p { color: var(--muted); margin-top: 12px; max-width: 640px; }
.hero .actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 10px 22px; border-radius: 4px; text-decoration: none; font-weight: 600; border: 1.5px solid var(--ink); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: #333; }
.btn.ghost { color: var(--ink); }
.btn.ghost:hover { background: var(--soft); }

/* Stat cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; padding: 32px 0; }
.stat { border: 1px solid var(--line); border-radius: 6px; padding: 18px; background: var(--soft); }
.stat .num { font-size: 1.8rem; font-weight: 700; }
.stat .label { color: var(--muted); font-size: 0.9rem; }

/* Sections & tables */
section { padding: 28px 0; }
section h2 { font-size: 1.25rem; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); display: inline-block; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--soft); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; }
.badge { display: inline-block; font-size: 0.8rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--ink); white-space: nowrap; }
.badge.paid { border-color: var(--danger); color: var(--danger); }
.badge.refused { border-color: var(--ok); color: var(--ok); }
.badge.pending { border-color: #a16207; color: #a16207; background: #fefce8; }
.badge.na { border-color: var(--muted); color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

/* Forms */
form.report { max-width: 640px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field .hint { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #bbb; border-radius: 4px;
  font-family: inherit; font-size: 1rem; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ink); border-color: var(--ink); }
textarea { min-height: 190px; resize: vertical; }
@media (min-width: 980px) {
  form.report textarea { min-height: 260px; }
}
.notice { padding: 14px 16px; border-radius: 6px; margin: 16px 0; font-size: 0.95rem; }
.notice.info { background: var(--soft); border: 1px solid var(--line); }
.notice.ok { background: #f0fdf4; border: 1px solid var(--ok); color: var(--ok); }
.notice.err { background: #fef2f2; border: 1px solid var(--danger); color: var(--danger); }
.hp { position: absolute; left: -9999px; }

/* Filters */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.filters select { width: auto; min-width: 150px; }
.pager { display: flex; gap: 10px; align-items: center; padding: 18px 0; }
.pager button { padding: 6px 16px; border: 1.5px solid var(--ink); background: #fff; border-radius: 4px; font-family: inherit; cursor: pointer; }
.pager button:disabled { opacity: 0.35; cursor: default; }

/* Footer */
footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 28px 0; color: var(--muted); font-size: 0.88rem; }
footer a { color: var(--muted); }
.btn-support {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 22px; border: 1.5px solid var(--ink); border-radius: 999px;
  text-decoration: none; color: var(--ink) !important; font-weight: 600;
  background: #fff; font-size: 0.95rem;
}
.btn-support .cup { font-size: 1.15rem; line-height: 1; }
.btn-support:hover { background: #fff7e6; border-color: #b45309; color: #b45309 !important; text-decoration: none; }

@media (max-width: 600px) {
  .hero h1.slogan { font-size: 2.1rem; }
  .hero .sub { font-size: 1.05rem; }
  nav a { margin-left: 10px; }
}

/* Report feed cards (home + reports pages) */
.report-card { border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; margin-bottom: 14px; background: #fff; }
.report-card .top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.report-card .dept { font-weight: 700; }
.report-card .amount { font-weight: 700; white-space: nowrap; }
.report-card .meta-line { color: var(--muted); font-size: 0.88rem; margin-top: 4px; }
.report-card .desc { margin-top: 8px; font-size: 0.95rem; white-space: pre-wrap; }
.report-card .desc.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.report-card .more-btn { margin-top: 6px; background: none; border: none; padding: 0; color: #1877F2; font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.report-card .more-btn:hover { text-decoration: underline; }
/* Feed photo: edge-to-edge inside the card, like Facebook */
.report-card .card-photo {
  display: block; margin: 12px -18px 0; background: #f0f2f5; line-height: 0;
}
.report-card .card-photo img {
  width: 100%; max-height: 520px; object-fit: cover;
  display: block; border: 0; border-radius: 0; margin: 0; cursor: pointer;
}
.report-card .card-photo + .reactions { margin-top: 14px; }
.reactions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.react {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border: 1px solid #ccc; border-radius: 999px;
  background: #fff; color: var(--ink); font-family: inherit; font-size: 0.88rem;
  font-weight: 600; cursor: pointer;
}
.react:hover { border-color: var(--ink); background: var(--soft); }
.react .cnt { color: var(--muted); font-weight: 700; }
.react.active { background: #e8f1fe; border-color: #1877F2; color: #1256C4; cursor: default; }
.react.active .cnt { color: #1256C4; }

/* Floating support button: phones only, icon only */
.fab-support { display: none; }
@media (max-width: 899px) {
  .fab-support {
    position: fixed; right: 16px; bottom: 18px; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--ink); color: #fff; font-size: 1.5rem; text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  }
  .fab-support:active { transform: scale(0.95); }
  footer .btn-support { display: none; } /* FAB replaces the footer button on phones */
}

/* Phone layout */
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 24px 0; }
  .stat { padding: 14px; }
  .stat .num { font-size: 1.35rem; }
  .nav-sup-text { display: none; } /* nav support link becomes icon-only */
  nav .lang { margin-left: 10px; }
  .hero { padding: 36px 0 30px; }
}

/* Burger menu (phones) */
.burger { display: none; }
@media (max-width: 899px) {
  .nav { position: relative; }
  .burger {
    display: block; margin-left: auto; background: #fff; cursor: pointer;
    border: 1px solid var(--line); border-radius: 6px; font-size: 1.25rem; padding: 3px 12px;
  }
  nav#siteNav {
    display: none; position: absolute; top: calc(100% + 6px); right: 0; left: auto;
    width: fit-content; min-width: 9.5rem; max-width: 60vw;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid var(--line); border-radius: 10px;
    padding: 8px; flex-direction: column; z-index: 45;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
  }
  .nav.open nav#siteNav { display: flex; }
  nav#siteNav a, nav#siteNav .lang { margin: 0; padding: 9px 12px; font-size: 0.95rem; text-align: left; white-space: nowrap; }
  nav#siteNav .lang { width: 100%; }
  nav#siteNav a.cta { text-align: center; margin-top: 6px; }
  nav#siteNav .nav-sup-text { display: inline; }
}

/* Collapsible filters (phones) */
.filter-toggle { display: none; }
@media (max-width: 899px) {
  .filter-toggle {
    display: inline-block; margin-bottom: 12px; padding: 8px 16px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--soft);
    font-family: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  }
  .filters { display: none; }
  .filters.show { display: flex; flex-direction: column; }
  .filters.show select, .filters.show input { width: 100%; }
}

/* Short-post colored backgrounds (stores only a preset key).
   Every gradient end verified >= 4.5:1 contrast against white text (WCAG AA). */
.bg-blue   { background: linear-gradient(135deg, #1565d8, #0b3f8f); }
.bg-sunset { background: linear-gradient(135deg, #c2410c, #a51b1b); }
.bg-purple { background: linear-gradient(135deg, #7222d2, #a3125f); }
.bg-teal   { background: linear-gradient(135deg, #0f766e, #0b4f4a); }
.bg-green  { background: linear-gradient(135deg, #15803d, #14532d); }
.bg-dark   { background: #1c1c1c; }
/* plain solids: white text (all >= 7:1) */
.bg-navy   { background: #1e3a8a; }
.bg-maroon { background: #7f1d1d; }
.bg-slate  { background: #334155; }
.bg-forest { background: #065f46; }
/* soft colors: DARK text (all >= 13:1) */
.bg-softblue   { background: #dbeafe; }
.bg-softpink   { background: #fce7f3; }
.bg-softmint   { background: #d1fae5; }
.bg-softyellow { background: #fef3c7; }
.bg-softlilac  { background: #ede9fe; }
.bg-softred    { background: #fee2e2; }
.desc-bg.bg-softblue, .desc-bg.bg-softpink, .desc-bg.bg-softmint,
.desc-bg.bg-softyellow, .desc-bg.bg-softlilac, .desc-bg.bg-softred {
  color: #172033; text-shadow: none;
}
.desc-bg {
  margin-top: 10px; border-radius: 10px; padding: 44px 24px;
  min-height: 220px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.35rem; font-weight: 700; line-height: 1.5;
  text-align: center; white-space: pre-wrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.bg-swatches {
  display: flex; gap: 10px; margin-top: 10px;
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.bg-swatch {
  width: 38px; height: 38px; border-radius: 8px; cursor: pointer;
  border: 2px solid #e2e2e2; padding: 0;
  flex: 0 0 auto; scroll-snap-align: start;
}
.bg-swatch.none { background: #fff; border-color: #ccc; position: relative; }
.bg-swatch.none::after { content: '✕'; color: #999; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bg-swatch.sel { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }
.bg-swatches.disabled { opacity: 0.35; pointer-events: none; }

/* Scene backgrounds: abstract silhouettes, contrast-verified for white text */
.bg-road { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20240%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cpolygon%20points%3D%22150%2C240%20250%2C240%20215%2C90%20185%2C90%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.10%29%22%2F%3E%3Crect%20x%3D%22198%22%20y%3D%22110%22%20width%3D%224%22%20height%3D%2218%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%22198%22%20y%3D%22150%22%20width%3D%225%22%20height%3D%2224%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%22197%22%20y%3D%22196%22%20width%3D%226%22%20height%3D%2232%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3C%2Fsvg%3E") bottom / cover no-repeat, linear-gradient(180deg, #32363e, #15181d); }
.bg-field { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20240%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20stroke%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%20stroke-width%3D%223%22%20fill%3D%22none%22%3E%3Crect%20x%3D%2214%22%20y%3D%2220%22%20width%3D%22372%22%20height%3D%22206%22%20rx%3D%224%22%2F%3E%3Cline%20x1%3D%22200%22%20y1%3D%2220%22%20x2%3D%22200%22%20y2%3D%22226%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22123%22%20r%3D%2242%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2273%22%20width%3D%2252%22%20height%3D%22100%22%2F%3E%3Crect%20x%3D%22334%22%20y%3D%2273%22%20width%3D%2252%22%20height%3D%22100%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22123%22%20r%3D%225%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.25%29%22%2F%3E%3C%2Fsvg%3E") bottom / cover no-repeat, linear-gradient(180deg, #2e7d44, #123a22); }
.bg-office { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20240%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Crect%20x%3D%22160%22%20y%3D%2272%22%20width%3D%2286%22%20height%3D%22168%22%20fill%3D%22rgba%280%2C0%2C0%2C0.40%29%22%2F%3E%3Cline%20x1%3D%22203%22%20y1%3D%2272%22%20x2%3D%22203%22%20y2%3D%2246%22%20stroke%3D%22rgba%280%2C0%2C0%2C0.40%29%22%20stroke-width%3D%224%22%2F%3E%3Cg%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%3E%3Crect%20x%3D%22172%22%20y%3D%2288%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%22196%22%20y%3D%2288%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%22220%22%20y%3D%2288%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%22172%22%20y%3D%22116%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%22220%22%20y%3D%22116%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%22172%22%20y%3D%22144%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%22196%22%20y%3D%22144%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%22196%22%20y%3D%22172%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%22220%22%20y%3D%22172%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%22192%22%20y%3D%22208%22%20width%3D%2220%22%20height%3D%2232%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom / cover no-repeat, linear-gradient(180deg, #3a4a66, #1c2740); }
.bg-hospital { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20240%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Crect%20x%3D%22120%22%20y%3D%22110%22%20width%3D%22160%22%20height%3D%22130%22%20fill%3D%22rgba%280%2C0%2C0%2C0.28%29%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%22160%22%20width%3D%2260%22%20height%3D%2280%22%20fill%3D%22rgba%280%2C0%2C0%2C0.22%29%22%2F%3E%3Crect%20x%3D%22280%22%20y%3D%22160%22%20width%3D%2260%22%20height%3D%2280%22%20fill%3D%22rgba%280%2C0%2C0%2C0.22%29%22%2F%3E%3Cpath%20d%3D%22M214%2C132%20A32%2C32%200%201%200%20214%2C192%20A25%2C25%200%201%201%20214%2C132%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.32%29%22%2F%3E%3C%2Fsvg%3E") bottom / cover no-repeat, linear-gradient(180deg, #12756e, #0a4540); }
.bg-lake { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20240%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Ccircle%20cx%3D%22310%22%20cy%3D%2255%22%20r%3D%2224%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.20%29%22%2F%3E%3Cpath%20d%3D%22M0%2C150%20Q50%2C144%20100%2C150%20T200%2C150%20T300%2C150%20T400%2C150%20L400%2C240%20L0%2C240%20Z%22%20fill%3D%22rgba%280%2C0%2C0%2C0.20%29%22%2F%3E%3Cg%20stroke%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%20stroke-width%3D%223%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%2C180%20q20%2C-6%2040%2C0%20q20%2C6%2040%2C0%22%2F%3E%3Cpath%20d%3D%22M240%2C196%20q20%2C-6%2040%2C0%20q20%2C6%2040%2C0%22%2F%3E%3Cpath%20d%3D%22M120%2C214%20q20%2C-6%2040%2C0%20q20%2C6%2040%2C0%22%2F%3E%3Cpath%20d%3D%22M292%2C170%20q12%2C-4%2024%2C0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom / cover no-repeat, linear-gradient(180deg, #175a88, #0b2e4c); }
.bg-hills { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20240%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cpath%20d%3D%22M0%2C180%20Q80%2C90%20160%2C170%20Q240%2C80%20320%2C160%20Q360%2C120%20400%2C150%20L400%2C240%20L0%2C240%20Z%22%20fill%3D%22rgba%280%2C0%2C0%2C0.20%29%22%2F%3E%3Cpath%20d%3D%22M0%2C220%20Q100%2C140%20200%2C210%20Q300%2C130%20400%2C205%20L400%2C240%20L0%2C240%20Z%22%20fill%3D%22rgba%280%2C0%2C0%2C0.34%29%22%2F%3E%3C%2Fsvg%3E") bottom / cover no-repeat, linear-gradient(180deg, #53408a, #251a49); }
.bg-police { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20240%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Crect%20x%3D%220%22%20y%3D%22210%22%20width%3D%22400%22%20height%3D%2214%22%20fill%3D%22rgba%2859%2C130%2C246%2C0.35%29%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22226%22%20width%3D%22400%22%20height%3D%2214%22%20fill%3D%22rgba%28239%2C68%2C68%2C0.30%29%22%2F%3E%3Ccircle%20cx%3D%22330%22%20cy%3D%22232%22%20r%3D%2232%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.14%29%22%2F%3E%3Ccircle%20cx%3D%22330%22%20cy%3D%22187%22%20r%3D%2214%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.18%29%22%2F%3E%3Cpath%20d%3D%22M313%2C183%20A17%2C11%200%200%201%20347%2C183%20L347%2C187%20L313%2C187%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.34%29%22%2F%3E%3Crect%20x%3D%22309%22%20y%3D%22185%22%20width%3D%2242%22%20height%3D%225%22%20rx%3D%222.5%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.34%29%22%2F%3E%3Ccircle%20cx%3D%22330%22%20cy%3D%22179%22%20r%3D%222.4%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3C%2Fsvg%3E") bottom / cover no-repeat, linear-gradient(180deg, #223258, #0e1830); }
.bg-river { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20240%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cpath%20d%3D%22M186%2C0%20C150%2C60%20262%2C90%20208%2C150%20C168%2C196%20240%2C214%20205%2C240%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%20stroke-width%3D%2246%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M186%2C0%20C150%2C60%20262%2C90%20208%2C150%20C168%2C196%20240%2C214%20205%2C240%22%20stroke%3D%22rgba%28255%2C255%2C255%2C0.10%29%22%20stroke-width%3D%2272%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3Cg%20stroke%3D%22rgba%28255%2C255%2C255%2C0.22%29%22%20stroke-width%3D%222.5%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M196%2C70%20q14%2C-5%2028%2C0%22%2F%3E%3Cpath%20d%3D%22M204%2C180%20q12%2C-4%2024%2C0%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22rgba%280%2C0%2C0%2C0.42%29%22%3E%3Cpath%20d%3D%22M176%2C208%20q28%2C10%2056%2C0%20q-8%2C12%20-28%2C12%20q-20%2C0%20-28%2C-12%20Z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M204%2C168%20L204%2C206%20L177%2C206%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Cline%20x1%3D%22204%22%20y1%3D%22164%22%20x2%3D%22204%22%20y2%3D%22208%22%20stroke%3D%22rgba%280%2C0%2C0%2C0.45%29%22%20stroke-width%3D%223%22%2F%3E%3Cg%20stroke%3D%22rgba%280%2C0%2C0%2C0.30%29%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%2260%22%20y1%3D%22228%22%20x2%3D%2260%22%20y2%3D%22206%22%2F%3E%3Cline%20x1%3D%2272%22%20y1%3D%22232%22%20x2%3D%2274%22%20y2%3D%22212%22%2F%3E%3Cline%20x1%3D%2286%22%20y1%3D%22230%22%20x2%3D%2284%22%20y2%3D%22210%22%2F%3E%3Cline%20x1%3D%22330%22%20y1%3D%22150%22%20x2%3D%22332%22%20y2%3D%22128%22%2F%3E%3Cline%20x1%3D%22344%22%20y1%3D%22154%22%20x2%3D%22342%22%20y2%3D%22132%22%2F%3E%3Cline%20x1%3D%22318%22%20y1%3D%22148%22%20x2%3D%22320%22%20y2%3D%22130%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom / cover no-repeat, linear-gradient(180deg, #256b78, #0e3d46); }
.bg-power { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20240%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20stroke%3D%22rgba%280%2C0%2C0%2C0.45%29%22%20stroke-width%3D%224%22%20fill%3D%22none%22%3E%3Cline%20x1%3D%22300%22%20y1%3D%22240%22%20x2%3D%22316%22%20y2%3D%2288%22%2F%3E%3Cline%20x1%3D%22344%22%20y1%3D%22240%22%20x2%3D%22328%22%20y2%3D%2288%22%2F%3E%3Cline%20x1%3D%22316%22%20y1%3D%2288%22%20x2%3D%22322%22%20y2%3D%2256%22%2F%3E%3Cline%20x1%3D%22328%22%20y1%3D%2288%22%20x2%3D%22322%22%20y2%3D%2256%22%2F%3E%3Cline%20x1%3D%22304%22%20y1%3D%22200%22%20x2%3D%22340%22%20y2%3D%22200%22%2F%3E%3Cline%20x1%3D%22308%22%20y1%3D%22160%22%20x2%3D%22336%22%20y2%3D%22160%22%2F%3E%3Cline%20x1%3D%22304%22%20y1%3D%22200%22%20x2%3D%22336%22%20y2%3D%22160%22%2F%3E%3Cline%20x1%3D%22340%22%20y1%3D%22200%22%20x2%3D%22308%22%20y2%3D%22160%22%2F%3E%3Cline%20x1%3D%22286%22%20y1%3D%22104%22%20x2%3D%22358%22%20y2%3D%22104%22%2F%3E%3Cline%20x1%3D%22292%22%20y1%3D%22132%22%20x2%3D%22352%22%20y2%3D%22132%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22rgba%28255%2C255%2C255%2C0.18%29%22%20stroke-width%3D%223%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M286%2C104%20Q180%2C150%200%2C132%22%2F%3E%3Cpath%20d%3D%22M292%2C132%20Q186%2C176%200%2C160%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") bottom / cover no-repeat, linear-gradient(180deg, #3c4757, #1a222e); }

/* Facebook-style desktop layout: feed column + sticky right rail */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.rail { display: none; }
@media (min-width: 980px) {
  .layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .rail { display: block; position: sticky; top: 78px; }
  .layout > main > section { padding-top: 12px; }
  #statCards { display: none; }   /* ডেস্কটপে কাউন্টার ডান রেলে থাকে */
}
.rail-card { border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; background: #fff; }
.rail-card h3 { font-size: 0.95rem; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.rail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rail-stats .rs { background: var(--soft); border-radius: 8px; padding: 10px 12px; }
.rail-stats .rs .num { font-size: 1.15rem; font-weight: 700; }
.rail-stats .rs .label { font-size: 0.78rem; color: var(--muted); }
.rail-list { list-style: none; }
.rail-list li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--soft); font-size: 0.88rem; }
.rail-list li:last-child { border-bottom: none; }
.rail-list .n { color: var(--muted); font-weight: 700; white-space: nowrap; }
.rail-more { font-size: 0.85rem; display: inline-block; margin-top: 8px; }
.rail-support { text-align: center; }
.rail-support p { font-size: 0.88rem; color: var(--muted); margin-bottom: 10px; }

/* Ultra-narrow screens: Galaxy Z Fold cover display (~344px), small phones */
@media (max-width: 380px) {
  .wrap { padding: 0 12px; }
  .brand { font-size: 1.25rem; gap: 7px; }
  .brand .logo { width: 28px; height: 28px; }
  .brand span { display: none; }              /* · Oshongoti লুকাই */
  .hero h1.slogan { font-size: 1.7rem; }
  .hero .sub { font-size: 0.98rem; }
  .btn { padding: 9px 16px; font-size: 0.92rem; }
  .stats-grid { gap: 8px; }
  .stat { padding: 11px; }
  .stat .num { font-size: 1.15rem; }
  .stat .label { font-size: 0.8rem; }
  .report-card { padding: 12px; }
  .report-card .card-photo { margin: 12px -12px 0; }
  .react { padding: 5px 10px; font-size: 0.8rem; gap: 5px; }
  .desc-bg { padding: 32px 14px; font-size: 1.15rem; min-height: 150px; }
  .bg-swatch { width: 34px; height: 34px; }
  .pay-grid { grid-template-columns: 1fr; }
  .fab-support { width: 48px; height: 48px; right: 12px; bottom: 14px; font-size: 1.3rem; }
  th, td { padding: 8px 8px; font-size: 0.85rem; }
}

/* Compact pill button (icon + label) */
.pill-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink); text-decoration: none;
  font-size: 0.88rem; font-weight: 600; line-height: 1;
}
.pill-btn:hover { border-color: var(--ink); background: var(--soft); }
.pill-btn svg { flex: 0 0 auto; }

/* Facebook-style see-all button inside rail cards */
.rail-seeall {
  display: block; text-align: center; margin-top: 12px;
  padding: 9px 0; border-radius: 8px; background: var(--soft);
  color: var(--ink); text-decoration: none; font-size: 0.88rem; font-weight: 600;
}
.rail-seeall:hover { background: #e4e6ea; }

/* Facebook-style compose dialog */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.modal-box {
  position: relative; background: #fff; border-radius: 14px;
  width: min(680px, 96vw); height: min(88vh, 900px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4); overflow: hidden;
  display: flex; flex-direction: column;
}
.modal-head {
  display: flex; align-items: center; justify-content: center;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: 1.05rem; position: relative;
}
.modal-x {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--soft); font-size: 1rem; cursor: pointer;
}
.modal-x:hover { background: #e4e6ea; }
.modal-box iframe { border: 0; width: 100%; flex: 1; }

/* Embedded (in-dialog) view of the report page */
body.embed header, body.embed footer, body.embed .fab-support { display: none !important; }
body.embed .wrap { padding-top: 4px; }
body.embed section > h2 { display: none; }

/* Feed tabs: সাম্প্রতিক / আলোচিত */
.feed-tabs { display: flex; gap: 6px; margin: 4px 0 14px; }
.feed-tab {
  padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--muted); font-family: inherit; font-size: 0.9rem;
  font-weight: 600; cursor: pointer;
}
.feed-tab:hover { border-color: var(--ink); color: var(--ink); }
.feed-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* দিনের কৌতুক card */
.joke-card p { font-size: 0.92rem; line-height: 1.75; color: var(--ink); }
.joke-card { background: #fffdf5; border-color: #f0e6c8; }