/* ==========================================================================
   স্মার্ট কুমিল্লা সিটি — ডিজাইন সিস্টেম
   এক কোডবেস: ফোন · ট্যাব · কম্পিউটার · ম্যাক · আইফোন
   ভাঙার ধাপ:  <768 ফোন | 768–1099 ট্যাব | 1100+ ডেস্কটপ | 1600+ বড় পর্দা
   ========================================================================== */

/* ==========================================================================
   ০. ফন্ট — সব সেলফ-হোস্টেড (CDN নেই, অফলাইনেও চলে)
   বাংলা ডিফল্ট: কালপুরুষ · ইংরেজি ডিফল্ট: Inter
   সেটিংস থেকে বদলানো যায় → <html data-bnf="…" data-enf="…">
   ========================================================================== */
/* --- বাংলা --- */
@font-face{font-family:'Kalpurush';src:url('../fonts/kalpurush-bengali.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:'Hind Siliguri';src:url('../fonts/hind-siliguri-bengali-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
@font-face{font-family:'Hind Siliguri';src:url('../fonts/hind-siliguri-bengali-600.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
@font-face{font-family:'Hind Siliguri';src:url('../fonts/hind-siliguri-bengali-700.woff2') format('woff2');font-weight:700 900;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
@font-face{font-family:'Hind Siliguri';src:url('../fonts/hind-siliguri-latin-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20B9}
@font-face{font-family:'Hind Siliguri';src:url('../fonts/hind-siliguri-latin-600.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'Hind Siliguri';src:url('../fonts/hind-siliguri-latin-700.woff2') format('woff2');font-weight:700 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'Noto Sans Bengali';src:url('../fonts/noto-sans-bengali-bengali-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Bengali';src:url('../fonts/noto-sans-bengali-bengali-600.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Bengali';src:url('../fonts/noto-sans-bengali-bengali-700.woff2') format('woff2');font-weight:700 900;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
@font-face{font-family:'SolaimanLipi';src:url('../fonts/solaimanlipi-400-bengali.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
@font-face{font-family:'SolaimanLipi';src:url('../fonts/solaimanlipi-700-bengali.woff2') format('woff2');font-weight:700 900;font-display:swap;unicode-range:U+0980-09FF,U+200C-200D,U+25CC}
/* --- ইংরেজি / সংখ্যা --- */
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-700.woff2') format('woff2');font-weight:700 900;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin-400.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin-700.woff2') format('woff2');font-weight:700 900;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-600.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-700.woff2') format('woff2');font-weight:700 900;font-display:swap}
@font-face{font-family:'Gelasio';src:url('../fonts/gelasio-latin-400.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:'Gelasio';src:url('../fonts/gelasio-latin-700.woff2') format('woff2');font-weight:700 900;font-display:swap}

/* ---------- ১. টোকেন ---------- */
:root{
  /* ল্যাটিন ফন্ট আগে, তারপর বাংলা — ইংরেজি ও সংখ্যা ঝকঝকে, বাংলা কালপুরুষে */
  --en-face:'Inter'; --bn-face:'Kalpurush';
  --bn:var(--en-face),var(--bn-face),'Nirmala UI','Hind Siliguri',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ground:#f6f3ea; --surface:#ffffff; --surface-2:#eef1f6; --card:#ffffff; --field:#ffffff;
  /* নেভি — হেডার, শিরোনাম ও চলাচলের রঙ (সরকারি পোর্টালের ভাব) */
  --navy:#123362; --navy-2:#0b2545; --navy-tint:#e7edf6; --on-navy:#ffffff;
  /* ⚠️ ink-faint আগে #7f8d84 ছিল — সাদার উপর মাত্র ৩.৫:১, ছোট লেখা পড়া যেত না।
     এখন ৫.৫:১ (WCAG AA পার) — বয়স্ক ও রোদে দাঁড়ানো মানুষের জন্য এটাই আসল পার্থক্য */
  --ink:#14243d; --ink-soft:#46566e; --ink-faint:#5a6b83; --line:#dfe4ec; --line-2:#c6cfdd;

  --primary:#0f5c4a; --primary-2:#0b4436; --primary-tint:#e2efe9; --on-primary:#ffffff;
  /* ⚠️ #a86e15 এ সাদা লেখা ৪.২৮:১ — WCAG AA (৪.৫) ফেল করত; একটু গাঢ় করে ৪.৬৩:১ */
  --gold:#9c6612; --gold-2:#8a5810; --gold-tint:#f6ecd5;
  --blood:#d02b2b; --blood-2:#a11d1d; --blood-tint:#fdeaea;
  --ok:#1f8a4c; --ok-tint:#ddf1e4;
  --blue:#2266a8; --blue-2:#184d80; --blue-tint:#e0edf8;
  --purple:#6a4bb0; --purple-2:#4a3384; --purple-tint:#ece6f8;
  --orange:#c65a2a; --orange-2:#a3441c; --orange-tint:#fbe8dd;
  --warn:#b9770e; --warn-tint:#fdf0d9;

  /* ট্যাগের লেখা — হালকা রঙিন ব্যাকগ্রাউন্ডে মূল রঙ পড়া যায় না (৩.৭:১),
     তাই লেখার জন্য আলাদা গাঢ় রঙ। অন্ধকার থিমে উল্টো — সেখানে মূল রঙই উজ্জ্বল। */
  --ok-ink:#17703c; --blood-ink:#a01f24; --gold-ink:#7a4f0c; --blue-ink:#184d80;
  --purple-ink:#4a3384; --orange-ink:#8f3c18; --warn-ink:#8a5a09;

  --shadow:0 1px 2px rgba(20,40,32,.06),0 6px 18px rgba(20,40,32,.07);
  --shadow-lg:0 14px 40px rgba(11,60,48,.16);
  --r-s:9px; --r-m:13px; --r-l:18px; --r-xl:24px;
  --ctl-h:40px; --tabbar-h:56px; --topbar-h:54px;
  --pad:11px; --gap:10px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);

  /* ইনপুট, স্ক্রলবার, ড্রপডাউন — ব্রাউজারের নিজের অংশও যেন থিমের সাথে মেলে।
     ডিফল্ট আলো; ফোন অন্ধকারে থাকলেও অ্যাপ আলোতেই থাকে। */
  color-scheme:light;
}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0a1220; --surface:#111c2e; --surface-2:#16233a; --card:#121e31; --field:#0d1727;
  --navy:#5b8fd6; --navy-2:#4477bd; --navy-tint:#152540; --on-navy:#08131f;
  --ink:#e8eefa; --ink-soft:#a9b8d0; --ink-faint:#94a6c2; --line:#243450; --line-2:#31456a;
  --primary:#3fae8f; --primary-2:#2c8b71; --primary-tint:#12332a; --on-primary:#04140f;
  --gold:#e0a850; --gold-2:#c08a34; --gold-tint:#2c2413;
  --blood:#f0605c; --blood-2:#c8413e; --blood-tint:#341a1a;
  --ok:#48c07c; --ok-tint:#123021;
  --blue:#5aa2df; --blue-2:#3d7fb8; --blue-tint:#14283a;
  --purple:#a98fe0; --purple-2:#8468c4; --purple-tint:#221a38;
  --orange:#e0824c; --orange-2:#bd6435; --orange-tint:#331e12;
  --warn:#e3ab4b; --warn-tint:#2e2410;
  /* অন্ধকারে টিন্ট গাঢ়, তাই লেখাই উজ্জ্বল থাকে */
  --ok-ink:var(--ok); --blood-ink:var(--blood); --gold-ink:var(--gold); --blue-ink:var(--blue);
  --purple-ink:var(--purple); --orange-ink:var(--orange); --warn-ink:var(--warn);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.35);
  --shadow-lg:0 18px 46px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --ground:#0a1220; --surface:#111c2e; --surface-2:#16233a; --card:#121e31; --field:#0d1727;
  --navy:#5b8fd6; --navy-2:#4477bd; --navy-tint:#152540; --on-navy:#08131f;
  --ink:#e8eefa; --ink-soft:#a9b8d0; --ink-faint:#94a6c2; --line:#243450; --line-2:#31456a;
  --primary:#3fae8f; --primary-2:#2c8b71; --primary-tint:#12332a; --on-primary:#04140f;
  --gold:#e0a850; --gold-2:#c08a34; --gold-tint:#2c2413;
  --blood:#f0605c; --blood-2:#c8413e; --blood-tint:#341a1a;
  --ok:#48c07c; --ok-tint:#123021;
  --blue:#5aa2df; --blue-2:#3d7fb8; --blue-tint:#14283a;
  --purple:#a98fe0; --purple-2:#8468c4; --purple-tint:#221a38;
  --orange:#e0824c; --orange-2:#bd6435; --orange-tint:#331e12;
  --warn:#e3ab4b; --warn-tint:#2e2410;
  /* অন্ধকারে টিন্ট গাঢ়, তাই লেখাই উজ্জ্বল থাকে */
  --ok-ink:var(--ok); --blood-ink:var(--blood); --gold-ink:var(--gold); --blue-ink:var(--blue);
  --purple-ink:var(--purple); --orange-ink:var(--orange); --warn-ink:var(--warn);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.35);
  --shadow-lg:0 18px 46px rgba(0,0,0,.5);
}
/* ফন্ট বাছাই (সেটিংস) */
:root[data-bnf="hind"]{--bn-face:'Hind Siliguri'}
:root[data-bnf="noto"]{--bn-face:'Noto Sans Bengali'}
:root[data-bnf="solaiman"]{--bn-face:'SolaimanLipi'}
:root[data-enf="manrope"]{--en-face:'Manrope'}
:root[data-enf="poppins"]{--en-face:'Poppins'}
:root[data-enf="gelasio"]{--en-face:'Gelasio'}

/* বড় হরফ (বয়স্ক/কম-দৃষ্টি) */
:root[data-font="big"]{font-size:118%}
:root[data-font="big"] .tabbar b{font-size:.7rem}

*{box-sizing:border-box}
/* ⚠️ overflow-x নিচে body-তেও আছে, কিন্তু body-তে একা যথেষ্ট নয়:
   .tabbar ও .sheet `position:fixed`, আর fixed এলিমেন্ট body-র ক্লিপিং ফাঁক গলে
   বেরিয়ে যায়। ফলে ৩৭৫px ফোনে <html>-এর প্রস্থ ৩৯১px হয়ে যেত, পাতা পাশে সরত আর
   ট্যাব-বারের শেষ বোতামটা ("প্রোফাইল") কেটে যেত। মেপে দেখা: এখানে বসালেই
   doc = viewport = 375, উল্লম্ব স্ক্রল ও sticky অটুট থাকে। */
/* 🔴 মাউসের চাকা দিয়ে পাতা স্ক্রল হচ্ছিল না (২০২৬-০৯-১১, ডেস্কটপে)।
   কারণ: body-তে `overflow-x:hidden` থাকায় body নিজেই একটা **স্ক্রল-বাক্স** হয়ে যেত,
   অথচ body-র উচ্চতা কন্টেন্টের সমান — ভেতরে স্ক্রল করার কিছু নেই। তার উপরে
   `overscroll-behavior-y:none` থাকায় চাকার স্ক্রল body থেকে **viewport-এ গড়াতে
   পারত না** (scroll chaining বন্ধ) → কিছুই নড়ত না। JS-এ `scrollTop=` দিলে চলত,
   তাই চোখে ধরা কঠিন ছিল; হেডলেস ক্রোমে আসল হুইল ইভেন্ট দিয়ে মেপে ধরা পড়েছে।
   ফিক্স: পাশে-উপচানো ঠেকানো ও bounce-বন্ধ — দুটোই **html-এ**; body আর স্ক্রল-বাক্স নয়।
   (৩৭৫px-এ ডকুমেন্টের প্রস্থ = ভিউপোর্ট, অর্থাৎ পুরোনো সমস্যাটাও ফেরেনি — মেপে দেখা) */
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overscroll-behavior-y:none}
body{
  margin:0;font-family:var(--bn);background:var(--ground);color:var(--ink);
  line-height:1.5;font-size:15px;-webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{margin:0;line-height:1.3;text-wrap:balance}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--primary);text-decoration:none}
img{max-width:100%;display:block}
.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-f{fill:currentColor;stroke:none}
.sp{flex:1}
.hide{display:none!important}
::selection{background:var(--primary);color:var(--on-primary)}

/* ---------- ২. শেল ---------- */
.app{min-height:100dvh;display:flex;flex-direction:column}

/* --- টপবার --- */
.topbar{
  position:sticky;top:0;z-index:70;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);padding-top:var(--safe-t);
}
.topbar .in{display:flex;align-items:center;gap:10px;padding:9px 14px;
  padding-left:calc(14px + var(--safe-l));padding-right:calc(14px + var(--safe-r));max-width:1520px;margin:0 auto;width:100%}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.seal{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));border:2px solid var(--gold)}
.seal .ic{width:20px;height:20px}
/* ⭐ লোগো বসানো থাকলে — সিল ছবির অনুপাতেই চওড়া হয়, কখনো কাটে না।
   চওড়া (width বেশি · height কম) wordmark লোগোও তাই পুরোটা দেখা যায়;
   বর্গাকার লোগো আগের মতোই ৩৮px বর্গেই বসে। max-width টপবারকে দ্বিতীয়
   লাইনে নামতে দেয় না। */
.seal.img{width:auto;min-width:38px;max-width:220px;padding:0 4px;background:var(--surface)}
.seal.img>img{display:block;height:30px;width:auto;max-width:100%;object-fit:contain}
/* 🔎 কম্পিউটারে লম্বা (wordmark) লোগো আরও বড় (owner ২০২৬-০৯-১৫)।
   ⚠️ টপবারের উচ্চতা এতে **বাড়ে না** — ভেতরের নেভিগেশনই ৫২px, অর্থাৎ
      ৫৪px জায়গা এমনিতেই খালি পড়ে ছিল, লোগো শুধু সেটুকু নিচ্ছে।
   ⚠️ কেবল চওড়া লোগোতেই (`.brand.wlogo`, অনুপাত ≥১.৬) — বর্গাকার সিল
      আগের ৩৮px-এই থাকে, নইলে হেডারে বিশাল বর্গ বসে যেত। */
@media (min-width:560px){
  .brand.wlogo .seal.img{height:54px;min-width:44px;max-width:340px;padding:0 6px;border-radius:12px}
  .brand.wlogo .seal.img>img{height:48px}
}
.brand b{display:block;font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ⚠️ .68rem = ১০.৯px — প্রতিটি পাতার হেডারে থাকে, তাই মেপে ৮৪ জায়গায় ধরা পড়ে */
.brand small{display:block;font-size:.74rem;color:var(--ink-soft);line-height:1.25}
.iconbtn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  display:grid;place-items:center;cursor:pointer;flex:none;position:relative;transition:transform .14s,border-color .14s,color .14s}
.iconbtn .ic{width:20px;height:20px}
@media (hover:hover){.iconbtn:hover{transform:scale(1.06);border-color:var(--primary);color:var(--primary)}}
.iconbtn .dot{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--blood);border:2px solid var(--surface)}
.wardbtn{display:flex;align-items:center;gap:7px;height:40px;padding:0 12px;border-radius:11px;cursor:pointer;flex:none;white-space:nowrap;
  border:1px solid var(--line);background:var(--surface);font-size:.84rem;font-weight:700;transition:transform .14s,border-color .14s}
.wardbtn .ic{width:16px;height:16px;color:var(--blood)}
@media (hover:hover){.wardbtn:hover{transform:scale(1.04);border-color:var(--primary)}}
.topsearch{flex:1;max-width:460px;height:40px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--field);color:var(--ink-faint);font-size:.86rem;cursor:pointer}
.topsearch .ic{width:17px;height:17px}

/* --- মূল অংশ --- */
.body{flex:1;display:flex;min-height:0;width:100%;max-width:1520px;margin:0 auto}
.view{flex:1;min-width:0;padding:var(--pad);padding-left:calc(var(--pad) + var(--safe-l));padding-right:calc(var(--pad) + var(--safe-r));
  padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 22px)}
.wrap{max-width:1080px;margin:0 auto;width:100%}

/* --- সাইডবার (ট্যাব/ডেস্কটপ) --- */
.sidenav{display:none}
/* --- নিচের ট্যাব-বার (ফোন) --- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:75;display:flex;align-items:stretch;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding-bottom:var(--safe-b);height:calc(var(--tabbar-h) + var(--safe-b))
}
.tabbar button{flex:1;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--ink-faint);padding:0;min-width:0}
/* ১০.১px ছিল — QA স্ক্যানে "খুব ছোট লেখা" ধরা পড়ল; ১১px-এও চার লেবেল ৩৭৫px-এ আঁটে */
.tabbar b{font-size:.72rem;font-weight:700;white-space:nowrap}
.tabbar .ic{width:22px;height:22px}
.tabbar button.on{color:var(--primary)}
.tabbar button.on .ic{stroke-width:2.1}
.tabbar .mid{flex:none;width:64px}
.tabbar .mid .fab{width:52px;height:52px;border-radius:50%;margin-top:-20px;display:grid;place-items:center;color:var(--on-primary);
  background:linear-gradient(135deg,var(--blood),var(--blood-2));box-shadow:0 6px 18px rgba(200,50,50,.4);border:3px solid var(--surface)}
.tabbar .mid .fab .ic{width:24px;height:24px}

/* ---------- ৩. উপাদান ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:13px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.sect{margin:14px 0 8px;display:flex;align-items:center;gap:8px}
.sect h2{font-size:1.05rem;font-weight:800}
.sect .ic{width:19px;height:19px;color:var(--primary)}
/* "সব ›" লিংকের ছোঁয়ার ঘর — লেখা ছোট, কিন্তু প্যাডিং দিয়ে ৩৬px উঁচু করা হয় */
.sect .more{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--primary);cursor:pointer;
  display:flex;align-items:center;gap:3px;padding:11px 4px;margin-right:-4px}
.sect .more .ic{width:14px;height:14px}
/* ⚠️ `/lv/`-এ `.more`-এর ভেতরে `<a>` বসে (SPA-তে `.more` নিজেই `data-go`
   দিয়ে ক্লিকযোগ্য)। ফলে প্যাডিং span-এ, কিন্তু ক্লিক a-তে — ছোঁয়ার ঘর রয়ে যায়
   মাত্র ১৯পিক্সেল (মাপা: ৮পিক্সেল উপরে/নিচে ক্লিক লিংকে লাগত না)।
   নেগেটিভ margin দিয়ে `<a>` প্যাডিংটা নিজের দখলে নেয় — চেহারা অবিকল,
   হিট-এরিয়া ১৯ → ৪১px। মাপা ২০২৬-০৯-১৯। */
.more>a{display:flex;align-items:center;gap:3px;padding:11px 4px;margin:-11px -4px;color:inherit}
.lead{color:var(--ink-soft);font-size:.94rem}
.muted{color:var(--ink-faint);font-size:.8rem}

/* বোতাম — সবসময় gradient + hover zoom */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--ctl-h);padding:0 18px;border:0;cursor:pointer;
  /* ⚠️ আগে `color:#fff` হার্ডকোড ছিল। ডার্ক মোডে `--primary` হালকা সবুজ (#3fae8f) হয়ে যায়,
     ফলে সাদা লেখা মাত্র ২.৭৪:১ — অ্যাপের **সব প্রধান বোতামে**। `--on-primary` ব্যবহারে
     আলোয় সাদা, অন্ধকারে গাঢ় (#04140f) — ডার্কে ৬.৯:১। */
  border-radius:var(--r-m);font-size:.92rem;font-weight:800;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:var(--shadow);transition:transform .14s,box-shadow .14s;white-space:nowrap}
.btn .ic{width:18px;height:18px}
@media (hover:hover){.btn:hover{transform:scale(1.035);box-shadow:var(--shadow-lg)}}
.btn:active{transform:scale(.98)}
.btn.blood{background:linear-gradient(135deg,var(--blood),var(--blood-2))}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-2))}
.btn.blue{background:linear-gradient(135deg,var(--blue),var(--blue-2))}
.btn.purple{background:linear-gradient(135deg,var(--purple),var(--purple-2))}
/* সমর্থন দেওয়া আছে — গোলাপি বোতাম, ভরা সাদা হৃদয় (owner ২০২৬-০৯-১৪)
   ⚠️ রঙজোড়া গাঢ় দিকেই রাখা (rose-700 → rose-600): সাদা লেখার কনট্রাস্ট
      ৬.৯:১ ও ৪.৯:১ — হালকা গোলাপি নিলে সাদা লেখা ২.৬:১-এ নেমে যেত।
   ⚠️ `color:#fff` জোর করে দেওয়া — ডিফল্ট `--on-primary` অন্ধকারে গাঢ় হয়ে যায়,
      অথচ এই বোতামের পটভূমি দুই থিমেই একই গাঢ় গোলাপি। */
.btn.fav{background:linear-gradient(135deg,#be185d,#db2777);color:#fff;
  box-shadow:0 2px 8px rgba(190,24,93,.38)}
@media (hover:hover){.btn.fav:hover{box-shadow:0 8px 20px rgba(190,24,93,.5)}}
/* ⚠️ আগে ghost ছিল সাদা bg + ধূসর বর্ডার + shadow নেই — নিয়ম অনুযায়ী কোনো বোতামই
   ফ্যাকাশে/outline-only থাকতে পারে না, idle অবস্থাতেও রঙিন হয়ে ফুটে থাকবে।
   এখন হালকা gradient + রঙিন shadow, কিন্তু ভরাট primary বোতামের চেয়ে নরম —
   তাই "দ্বিতীয় কাজ" বোঝা যায়, আবার মিইয়েও থাকে না।
   ⚠️ `#fff` নয়, `var(--surface)` ভিত্তি — তাই ডার্ক থিমেও নিজে থেকেই গাঢ় হয়। */
.btn.ghost{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,var(--surface)),var(--surface));
  color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 26%,transparent);
  box-shadow:0 2px 8px color-mix(in srgb,var(--primary) 20%,transparent)}
.btn.ghost:hover{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 78%,#fff));
  color:var(--on-primary);border-color:transparent;
  box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 42%,transparent)}
/* ছোট বোতামও ৪০px — ৩৬px-এ বয়স্ক আঙুলে বারবার মিস হয় (Apple ৪৪ · Android ৪৮ বলে) */
.btn.sm{height:40px;padding:0 13px;font-size:.82rem;border-radius:10px}
.btn.sm .ic{width:15px;height:15px}
.btn.full{width:100%}
.btn.big{height:54px;font-size:1.02rem;border-radius:var(--r-l)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btnrow{display:flex;gap:9px;flex-wrap:wrap}
/* ⭐ নির্বাচনের হোম-কার্ডের বোতাম — তিনটি (ফল এলে চারটি) **সবসময় এক সারিতে**।
   ⚠️ মাপ inline style-এ রাখা যায় না; ফোনে ছোট করতে media query লাগে, তাই এখানে।
   flex:1 1 0 ⇒ সারি পুরো ভরে, ডান পাশ ফাঁকা পড়ে থাকে না। */
#elHomeCard .btnrow{flex-wrap:nowrap;gap:6px}
#elHomeCard .btnrow>button{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  flex:0 1 auto;min-width:0;height:32px;padding:0 10px;box-sizing:border-box;border:0;border-radius:3px;
  cursor:pointer;font-weight:700;font-size:12.5px;line-height:1;overflow:hidden}
#elHomeCard .btnrow>button>.ic{flex:none;width:15px;height:15px}
#elHomeCard .btnrow>button>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:559px){
  #elHomeCard .btnrow{gap:5px}
  /* ফোনে তিনটি বোতাম সারি ভাগ করে নেয় (flex:1) — ডান পাশ ফাঁকা থাকে না।
     চওড়া পর্দায় নয়: তখন প্রতিটি ৩৮০px হয়ে হাস্যকর দেখাত। */
  #elHomeCard .btnrow>button{flex:1 1 0;padding:0 7px;font-size:11.5px;gap:4px}
  #elHomeCard .btnrow>button>.ic{width:13px;height:13px}
}
/* খুব সরু ফোনে (৩২০px) আরও এক ধাপ ছোট — তবুও এক সারিই, লেখা কাটে না */
@media (max-width:359px){
  #elHomeCard .btnrow{gap:4px}
  /* ⚠️ আগে 10.5px ছিল — প্রকল্পের নিজের তলা `.7rem` (১১.২px)।
     লাইভে ৩২০px-এ মেপে দেখা গেল: ১১.২px-এও তিনটি বোতাম **এক সারিতেই**
     (৮৮ px করে, ২৬৪/২৭২px), লেখা ফানাও হয় না, বোতামের উচ্চতাও ৬২ অপরিবর্তিত।
     নির্বাচন-কার্ডটি কেবল লাইভ ডেটায় ওঠে বলে নমুনা-সুইপে কখনো ধরা পড়েনি। */
  #elHomeCard .btnrow>button{padding:0 4px;font-size:11.2px;gap:3px}
  #elHomeCard .btnrow>button>.ic{width:12px;height:12px}
}

/* ইনপুট — সাদা bg, নীল shadow, label কালো, hint ধূসর */
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f>label{font-size:.84rem;font-weight:700;color:var(--ink)}
.f>.hint{font-size:.74rem;color:var(--ink-faint)}
.inp{height:var(--ctl-h);border:1px solid var(--line);background:var(--field);color:var(--ink);border-radius:var(--r-m);
  padding:0 13px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s;font-size:.92rem}
.inp::placeholder{color:var(--ink-faint)}
.inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}

/* পাসওয়ার্ড দেখা/লুকানো — ঘরের ভেতরেই; উচ্চতা ও সারির align অটুট থাকে */
.pwrap{position:relative;display:block;min-width:0}
.pwrap>.inp{padding-right:42px}
.pweye{position:absolute;top:50%;right:5px;transform:translateY(-50%);
  width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-s);
  background:transparent;color:var(--ink-faint);cursor:pointer;
  transition:color .15s ease,background .15s ease}
.pweye:hover{color:var(--primary);background:var(--surface-2)}
.pweye.on{color:var(--primary)}
.pweye .ic{width:18px;height:18px}
textarea.inp{height:auto;min-height:86px;padding:10px 13px;resize:vertical}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.frow{display:grid;gap:11px}
.frow>*{min-width:0}   /* উপরের `.grid`-এর একই কারণ — লম্বা option-এর select ঘর ফুলিয়ে দিত */
@media (min-width:600px){.frow.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.frow.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* চিপ */
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.chips.scroll::-webkit-scrollbar{display:none}
/* সমান গুরুত্বের নির্দিষ্ট কয়েকটি চিপ (যেমন ৫ ওয়াক্ত নামাজ) — র‍্যাগড wrap নয়,
   প্রতিটি লাইন ভরে যাক। ৩৭৫px-এ মাপা (২০২৬-০৯-২০): আগে ২+২+১ হয়ে লাইন ১-২তে
   ৭৮ ও ৬৭px ফাঁকা পড়ে থাকত। ⚠️ সব `.chips`-এ দিও না — ট্যাগ/ফিল্টারে র‍্যাগড
   wrap-ই স্বাভাবিক, টেনে বড় করলে উল্টো খারাপ দেখায়। */
.chips.fill > .chip{flex:1 1 auto;justify-content:center}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;padding:9px 14px;min-height:40px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:transform .13s}
.chip .ic{width:15px;height:15px}
@media (hover:hover){.chip:hover{transform:scale(1.05);border-color:var(--primary)}}
.chip.on{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;color:var(--on-primary)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:800;padding:3px 9px;border-radius:999px;
  background:var(--surface-2);color:var(--ink-soft)}
.tag .ic{width:12px;height:12px}
.tag.ok{background:var(--ok-tint);color:var(--ok-ink)} .tag.blood{background:var(--blood-tint);color:var(--blood-ink)}
.tag.gold{background:var(--gold-tint);color:var(--gold-ink)} .tag.blue{background:var(--blue-tint);color:var(--blue-ink)}
.tag.warn{background:var(--warn-tint);color:var(--warn-ink)} .tag.purple{background:var(--purple-tint);color:var(--purple-ink)}
.tag.orange{background:var(--orange-tint);color:var(--orange-ink)}

/* ---------- লেবেল-গ্রিড: বিভাগ · সেবা ও পরীক্ষা (#/hospital/<id>) ----------
   ⚠️ আগে `.chips` (flex-wrap) ছিল — প্রতিটি সারি একই জায়গায় শেষ হতো না, ফলে ডান পাশ
   খাঁজকাটা (ফোনে মেপে: সারিগুলো ২৬৪·৩০৮·৩৩২px-এ শেষ, ঘর ৩৬৪px)। এখন প্রতিটি সারি
   পুরো চওড়া জুড়ে বসে — দুই পাশেই সমান জায়গায় শেষ, ডান পাশ আর ফাঁকা থাকে না।
   সমান চওড়া ঘর (grid) দিয়েও মিলত, কিন্তু তাতে ৪১টি বিভাগ পাতায় প্রায় দ্বিগুণ জায়গা নিত। */
.taggrid{display:flex;flex-wrap:wrap;gap:6px}
/* ⭐ প্রতিটি চিপ সারির অবশিষ্ট জায়গা ভাগ করে নেয় (flex-grow) — তাই প্রতিটি সারি
   ডান-বাঁ দুই দিকেই সমান জায়গায় শেষ হয়, আর লেখা এক লাইনেই থাকে (উঁচু হয় না)। */
.taggrid .tag{flex:1 1 auto;justify-content:center;text-align:center;
  padding:6px 11px;min-height:30px;font-size:.76rem;line-height:1.3;border-radius:7px;
  border:1px solid color-mix(in srgb,currentColor 20%,transparent)}
/* ⚠️ এই ফাঁকা ঘরটি শেষ সারির অবশিষ্টটুকু খেয়ে নেয় — নইলে শেষের এক-দুটি চিপ
   পুরো সারি জুড়ে বিশ্রী রকম লম্বা হয়ে যেত। height:0 — তাই নিজে কোনো জায়গা নেয় না। */
.taggrid:after{content:"";flex:1000 1 auto;height:0;min-width:0}

/* ==========================================================================
   গ্রেডিয়েন্ট আইকন-চিপ ও শেয়ার — রক্তের ডাকে ব্যবহৃত
   ⭐ কেন: ডাকের কার্ডে সব তথ্য একই রকম ধূসর লেখায় ছিল — গ্রুপ, হাসপাতাল,
      সময়, এলাকা কোনোটাই এক নজরে আলাদা করা যেত না। জরুরি মুহূর্তে চোখ
      আগে **রঙ ও আকৃতি** খোঁজে, লেখা পরে। তাই প্রতিটি তথ্যের নিজের
      গ্রেডিয়েন্ট আইকন — রক্ত লাল, হাসপাতাল নীল, সময় কমলা, এলাকা সবুজ।
   ========================================================================== */
.gic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;
  color:var(--on-primary);box-shadow:0 1px 4px rgba(37,99,235,.16)}
.gic .ic{width:14px;height:14px}
.gic.lg{width:34px;height:34px;border-radius:10px}
.gic.lg .ic{width:18px;height:18px}

/* তথ্য-সারি — আইকন+লেখা জোড়ায় জোড়ায়, সারি ভরে পাশাপাশি বসে */
.finfo{display:flex;flex-wrap:wrap;gap:8px 15px;align-items:center;margin-top:10px}
.finfo .fi{display:flex;align-items:center;gap:7px;min-width:0;font-size:.85rem;
  font-weight:600;color:var(--ink-soft);line-height:1.3}
.finfo .fi span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}

/* জরুরি — স্পন্দিত বিন্দু, যাতে চোখ আটকায় */
.tag.now:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  flex:none;animation:pulseDot 1.4s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.tag.now:before{animation:none}}

/* শেয়ারের অ্যাপগুলো */
.shgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:2px}
@media (min-width:520px){.shgrid{grid-template-columns:repeat(6,1fr)}}
.shbtn{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);color:var(--ink-soft);
  font-weight:700;font-size:.76rem;line-height:1.25;text-align:center;text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.shbtn:hover,.shbtn:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:transparent}
.shbtn:active{transform:translateY(0)}

/* শেয়ার-বার্তার নমুনা — যা যাবে সেটা আগেই দেখা যায় */
.shprev{white-space:pre-wrap;font-size:.82rem;line-height:1.6;color:var(--ink-soft);
  background:var(--surface-2);border-radius:var(--r-m);padding:11px 13px;margin:2px 0 11px;
  max-height:150px;overflow:auto}

/* উৎসাহের বাণী — কুরআন ও হাদিসের রেফারেন্স (data-deen.js) */
.deen{display:flex;gap:12px;align-items:flex-start;margin-top:13px;padding:12px 14px;
  border-radius:var(--r-m);background:var(--gold-tint);
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent)}
.deen .dn{min-width:0}
.deen p{font-size:.9rem;line-height:1.65;color:var(--ink);font-weight:500}
.deen small{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;
  font-size:.77rem;font-weight:700;color:var(--gold-ink)}
.deen small .ic{width:13px;height:13px;flex:none}
.deen .dnw{font-weight:500;opacity:.72;font-size:.73rem}

/* আইকন-টাইল গ্রিড (আইকন-ফার্স্ট হোম) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:520px){.tiles{grid-template-columns:repeat(4,1fr)}}
@media (min-width:768px){.tiles{grid-template-columns:repeat(5,1fr);gap:12px}}
@media (min-width:1100px){.tiles{grid-template-columns:repeat(6,1fr)}}
@media (min-width:1600px){.tiles{grid-template-columns:repeat(8,1fr)}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 6px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;box-shadow:var(--shadow);
  transition:transform .15s,box-shadow .15s;min-width:0}
@media (hover:hover){.tile:hover{transform:translateY(-3px) scale(1.03);box-shadow:var(--shadow-lg)}}
.tile:active{transform:scale(.97)}
.tile .sq{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.tile .sq .ic{width:22px;height:22px}
.tile b{font-size:.78rem;font-weight:700;line-height:1.25}
/* .66rem = ১০.৫px — মাপে দেখা গেল পড়তে কষ্ট; .7rem (১১.২px) রেখেও কমপ্যাক্টই থাকে */
.tile small{font-size:.74rem;color:var(--ink-faint)}
:root[data-font="big"] .tile b{font-size:.86rem}

/* রঙ-ম্যাপ (মালিকের নির্দেশ) */
.g-blood{background:linear-gradient(135deg,#e0484c,#b42328)}
.g-hosp{background:linear-gradient(135deg,#3d8fd0,#1f5a8f)}
.g-pharm{background:linear-gradient(135deg,#2fa863,#1f7d47)}
.g-edu{background:linear-gradient(135deg,#3a63c0,#274a94)}
.g-mosque{background:linear-gradient(135deg,#2fa863,#1f7d47)}
.g-temple{background:linear-gradient(135deg,#d97a2b,#b3591a)}
.g-shop{background:linear-gradient(135deg,#e08a35,#b3591a)}
.g-hotel{background:linear-gradient(135deg,#e0603a,#c0341a)}
.g-transport{background:linear-gradient(135deg,#e0a52b,#c07f0f)}
.g-worker{background:linear-gradient(135deg,#3d8fd0,#1f5a8f)}
.g-citizen{background:linear-gradient(135deg,#3d8fd0,#1f5a8f)}
.g-notice{background:linear-gradient(135deg,#d69430,#a9660f)}
.g-emergency{background:linear-gradient(135deg,#e0484c,#b42328)}
.g-vote{background:linear-gradient(135deg,#7a5cc4,#4a3384)}
.g-loc{background:linear-gradient(135deg,#e0484c,#b42328)}
.g-call{background:linear-gradient(135deg,#2fa863,#1f7d47)}
.g-msg{background:linear-gradient(135deg,#3d8fd0,#1f5a8f)}
.g-gas{background:linear-gradient(135deg,#e0603a,#c0341a)}
.g-ward{background:linear-gradient(135deg,#0f8a6e,#0b4436)}
.g-org{background:linear-gradient(135deg,#2f9c7c,#0b4436)}
.g-church{background:linear-gradient(135deg,#6f8fd0,#2f4a8f)}
.g-vihara{background:linear-gradient(135deg,#e0b45a,#a97f0f)}
.g-gold{background:linear-gradient(135deg,#e0b45a,#a97f0f)}
.g-admin{background:linear-gradient(135deg,#d69430,#a9660f)}
.g-complaint{background:linear-gradient(135deg,#5f8ba6,#3a5e75)}
.g-bill{background:linear-gradient(135deg,#4a8f7a,#2c6354)}
.g-poll{background:linear-gradient(135deg,#7a5cc4,#4a3384)}
.g-star{background:linear-gradient(135deg,#d6a930,#a97f0f)}
.g-fb{background:linear-gradient(135deg,#1877f2,#0f5bb5)}
.g-wa{background:linear-gradient(135deg,#3ed67f,#128c4a)}
.g-tg{background:linear-gradient(135deg,#41b3e8,#1c7fb5)}
.g-copy{background:linear-gradient(135deg,#8b93a7,#5a6373)}
.g-time{background:linear-gradient(135deg,#f0a13a,#c46a10)}
.g-job{background:linear-gradient(135deg,#5f7ea6,#3a5675)}

/* তালিকা-সারি */
.rows{display:flex;flex-direction:column;gap:9px}
.row{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:9px 11px;cursor:pointer;transition:transform .13s,border-color .13s,box-shadow .13s;box-shadow:var(--shadow);min-width:0}
@media (hover:hover){.row:hover{transform:translateX(2px);border-color:var(--primary);box-shadow:var(--shadow-lg)}}
.row .sq{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none}
.row .sq .ic{width:19px;height:19px}
.row .tx{min-width:0;flex:1}
/* বাংলা নাম লম্বা হয় — কেটে ফেলার বদলে ভেঙে দেখাই */
.row .tx b{display:block;font-size:.92rem;font-weight:700;overflow-wrap:anywhere}
/* ⚠️ আগে `-webkit-line-clamp:2` ছিল। ফোনে মেপে দেখা গেল ৩৯টি পাতার ৮টিতে এটি
   **আসল তথ্যই** গিলে ফেলছে — টিকার ডোজের ছক, দপ্তরের কক্ষ নম্বর, সরকারি ছকের
   দুই রকম মেয়াদের সতর্কতা। খরচ মোট ৫৭২px (সর্বোচ্চ এক পাতায় ১৩৩px) — তথ্য হারানোর
   চেয়ে সেটা ঢের ভালো, তাই ক্ল্যাম্প তুলে দেওয়া হলো */
.row .tx small{display:block;font-size:.78rem;color:var(--ink-faint);overflow-wrap:anywhere}
@media (max-width:430px){ .row .end{flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:44%} }
.row .end{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.row .end .ic{width:17px;height:17px;color:var(--ink-faint)}
.row.static{cursor:default}
.row.static:hover{transform:none}

/* হাসপাতালের তালিকা-সারি (#/hospitals) — আইকন উপরে, লেখা ধাপে ধাপে,
   ডানে একটাই ⫶ বোতাম (owner ১২-০৯-২০২৬)।
   ⚠️ `.row`-এর ডিফল্ট `align-items:center` রাখলে লম্বা সারিতে আইকন মাঝখানে
   ভাসত — তাই এখানে flex-start। */
.hrow{align-items:flex-start;gap:10px;padding:10px 11px}
.hrow>.sq{margin-top:1px}
.hrow .tx{display:flex;flex-direction:column;gap:2px}
.hrow .tx small{line-height:1.42}
.hrow .hr-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.hrow .kebab{width:36px;height:36px;border-radius:10px}
.hrow .kebab .ic{width:18px;height:18px}
/* ⫶ মেনুর সারি লিংক হলেও লেখা স্বাভাবিক রংয়েই থাকে (a{color:var(--primary)} ছিনিয়ে নিত) */
.hmenu .row{color:inherit}

/* কার্ড-গ্রিড
   ⚠️ `1fr` মানে `minmax(auto,1fr)` — ঘরের ভেতরে লম্বা লেখার <select> থাকলে ট্র্যাক
      আর ছোট হতে পারে না (select-এর min-content = সবচেয়ে লম্বা option)। ফলে ৩৭৫px-এ
      পুরো পাতা ডানে উপচে যেত — প্রার্থীর তালিকা ভরার পর #/campaign-এ ঠিক এটাই ধরা পড়ে
      (পাতা ৫৩২px চওড়া)। `minmax(0,1fr)` + `min-width:0` দিলে ঘর ছোট হতে পারে, আর
      `.inp{width:100%}` নিজেই ঘরের মাপে বসে যায়। */
.grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.grid>*{min-width:0}
/* ⚠️ `.c3` আগে ৯০০px-এর নিচে **এক কলাম** থাকত — ৭৬৮px ট্যাবলেটে কার্ডগুলো
   পুরো প্রস্থ জুড়ে একটা করে বসত, ডান পাশ মরা ফাঁকা (zero-wasted-space নিয়মের বিপরীত)।
   `.c2`-এর মতোই ৬৪০px থেকে দুই কলাম; ১১০০px-এ তিন, ১৬০০px-এ চার — আগের মতোই। */
@media (min-width:640px){.grid.c2,.grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1600px){.grid.c3{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- তালিকা ⇄ গ্রিড সুইচ (#/hospitals) ----------
   নাগরিক নিজেই বাছেন — ঘন সারি, না বেশি তথ্যসহ কার্ড।
   সুইচটি সেকশন-শিরোনামের ডান কোণে বসে, তাই আলাদা একটি সারিও খরচ হয় না। */
.vsw{display:flex;gap:3px;margin-left:auto;flex:none;padding:2px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m)}
/* ⚠️ ছোঁয়ার ঘর — আগে ৩২×২৬পিক্সেল ছিল, ফোনে আঙুলে ঠিকমতো লাগত না।
   এই ফাইলেরই `.sect .more`-এ লেখা আছে: "লেখা ছোট, কিন্তু প্যাডিং দিয়ে
   ৩৬পিক্সেল উঁচু করা হয়" — এখানেও সেই নিয়ম। ৩৮×৩৪ হলে হিট-এরিয়া
   প্রায় দ্বিগুণ, আর কন্টেইনার বাড়ে মাত্র ৬পিক্সেল (৩৪→৪০)। মাপা ২০২৬-০৯-১৯। */
.vsw button{display:grid;place-items:center;width:38px;height:34px;border:0;background:none;
  border-radius:9px;cursor:pointer;color:var(--ink-faint);
  transition:background .16s ease,color .16s ease,transform .16s ease}
/* ⚠️ `color:inherit` বাদ দেওয়া যাবে না — গ্লোবাল `.sect .ic{color:var(--primary)}` এই
   আইকন দুটি ছিনিয়ে নেয়, ফলে সক্রিয় বোতামের সবুজ গ্রেডিয়েন্টের উপর সবুজ আইকন বসে অদৃশ্য হয়ে যায়। */
.vsw button .ic{width:16px;height:16px;color:inherit}
.vsw button.on{background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:var(--on-primary);box-shadow:var(--shadow)}
@media (hover:hover){.vsw button:not(.on):hover{color:var(--primary);transform:translateY(-1px)}}

/* গ্রিড: চওড়া যত, কলাম তত — ঘর ২৫০px-এর কম হয় না, তাই কোনো মাপেই
   ডান পাশ ফাঁকা পড়ে থাকে না। ⚠️ `.grid`-এর **পরে** রাখতে হয় — একই specificity,
   তাই আগে রাখলে `.grid{grid-template-columns:1fr}` জিতত আর সব এক কলামে থাকত। */
.hgrid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.hcard{display:flex;flex-direction:column;gap:8px;padding:11px;cursor:pointer;
  transition:transform .13s,border-color .13s,box-shadow .13s}
@media (hover:hover){.hcard:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow-lg)}}
.hcard .hc-top{display:flex;align-items:flex-start;gap:9px}
.hcard .hc-top>.sq{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none}
.hcard .hc-top>.sq .ic{width:19px;height:19px}
.hcard .hc-top>.ic{width:17px;height:17px;color:var(--ink-faint);flex:none;margin-top:9px}
.hcard .tx{min-width:0;flex:1}
.hcard .tx b{display:block;font-size:.92rem;font-weight:700;overflow-wrap:anywhere}
.hcard .tx small{display:block;margin-top:2px;font-size:.78rem;color:var(--ink-faint);overflow-wrap:anywhere}
.hcard .hc-addr{display:flex;gap:6px;font-size:.78rem;color:var(--ink-faint);overflow-wrap:anywhere}
.hcard .hc-addr .ic{width:13px;height:13px;flex:none;margin-top:2px}
.hcard .hc-tags{display:flex;flex-wrap:wrap;gap:5px}
/* চিপই শেষ এলিমেন্ট হলে (কাগজপত্রের কার্ডে বোতাম নেই) সেটিই নিচে বসে —
   তাই এক সারির কার্ডগুলোর নিচের কিনারা তখনও মিলে যায় */
.hcard .hc-tags:last-child{margin-top:auto}
/* সেবার কার্ডে "কী কাগজ লাগবে"-র ঝলক — তিন লাইন পর্যন্ত, পুরোটা বিস্তারিত পাতায় */
.hcard .hc-desc{font-size:.78rem;color:var(--ink-faint);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* কাগজপত্রের তালিকা (#/paper/<সূচক>) — ছোট নীল বিন্দু।
   ⚠️ গ্লোবাল `.tick` ব্যবহার করিনি — ওর `::before` দুই কোণাকুণি গ্রেডিয়েন্ট দিয়ে
   বাস্তবে একটি **ক্রস (✕)** আঁকে; প্রয়োজনীয় কাগজের পাশে ওটি উল্টো বার্তা দেয়। */
.plist{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.plist li{position:relative;padding-left:16px;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.plist li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--primary)}
/* বোতাম সবসময় কার্ডের নিচে — এক সারির কার্ডগুলোর নিচের কিনারা মিলে যায় */
.hcard .hc-act{margin-top:auto;gap:7px}
.hcard .hc-open{display:inline-flex}
/* ⚠️ `<i>` ডিফল্টে বাঁকা — লেখা সিধে রাখতে font-style ফিরিয়ে দিই */
.hc-lb{font-style:normal}

/* ---------- ফোনে গ্রিড সত্যিকারের গ্রিড (owner ১২-০৯-২০২৬) ----------
   ৬৫০px-এর নিচে auto-fill এক কলাম দিত, ফলে গ্রিড আর তালিকা দেখতে একই লাগত।
   তাই ফোনে জোর করে দুই কলাম, আর কার্ডটি কম্যাক্ট — নাম · পরিচয় · চিপ · কল।
   পুরো ঠিকানা সরু কার্ডে ৪-৫ লাইন খেত — সেটি তালিকা ও বিস্তারিত পাতায় আছেই। */
/* ২ কলাম ৬৩৯ px পর্যন্ত — ৬৪০ থেকে auto-fill নিজেই ২ কলাম দেয়।
   ⚠️ এই ধাপটি না দিলে ৫২০–৬৩৯ px-এ এক কলামে ফিরে যেত (auto-fill-এর ন্যূনতম ২৫০px)। */
@media (max-width:639px){ .hgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} }
@media (max-width:519px){
  .hcard{padding:9px;gap:6px}
  .hcard .hc-top{gap:7px}
  .hcard .hc-top>.sq{width:30px;height:30px;border-radius:9px}
  .hcard .hc-top>.sq .ic{width:16px;height:16px}
  .hcard .hc-top>.ic{display:none}
  .hcard .tx b{font-size:.84rem;line-height:1.32}
  /* পরিচয়-লাইন দুই লাইন পর্যন্ত — পুরোটা তালিকা দৃশ্য ও বিস্তারিত পাতায় */
  .hcard .tx small{font-size:.72rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hcard .hc-addr,.hcard .hc-desc{display:none}
  .hcard .hc-open.lng{display:none}
  .hcard .hc-lb{display:none}
  .hcard .hc-tags{gap:4px}
  .hcard .hc-tags .tag{font-size:.7rem;padding:2px 7px}
  .hcard .hc-act{gap:6px}
  .hcard .hc-act .btn{padding:0 10px}
  .hcard .hc-act .btn:not(:last-child){flex:1}
}

/* স্ট্যাট */
/* ⚠️ `1fr` = `minmax(auto,1fr)` — ঘরের ভেতরের লেখা ছোট হতে না পারলে ঘরটাই চওড়া
   হয়ে যায় আর পাতা উপচে পড়ে। ৩৭৫px-এ #/flood ৪২px উপচে পড়ছিল ঠিক এই কারণে
   ("দেবিদ্বার" + "৮.০৫ মি" একসাথে ১২৬px, অথচ ঘর ১১৮px)। `minmax(0,1fr)` দিলে ঘর ছোট হতে পারে। */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ঠিক তিনটি কার্ড — দুই কলামে তৃতীয়টি একা পড়ে ডান পাশ ফাঁকা রাখত */
.stats.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats.c3 .stat{padding:10px 9px;gap:6px}
/* ⚠️ `.stats`-এর ঘর রানটাইমে বসে — #/ward-এ জনসংখ্যা/ভোটার/আয়তন জানা না
   থাকলে কেবল "দোকান" থাকে, আর সেই একটি ঘর অর্ধেক সারি নিয়ে ডান পাশ
   পুরো ফাঁকা রাখত (মাপা ২০২৬-০৯-২০, ওয়ার্ড ৫)। উপরের `.c3` একই সমস্যা
   হাতে সারাত — এই দুই নিয়ম বাকি সব ক্ষেত্রে নিজেই সারায়। */
.stats > :only-child{grid-column:1/-1}
@media (max-width:599px){ .stats:not(.c3) > :last-child:nth-child(odd){grid-column:1/-1} }

@media (min-width:600px){.stats.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* হিসাব-কার্ড: লেখা বাঁয়ে, সংখ্যা ডানে — এক সারিতে।
   আগে সংখ্যা নিচের লাইনে ছিল, ডান পাশ পুরো ফাঁকা পড়ে থাকত (অকারণ উচ্চতা)। */
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:11px 13px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:8px;min-height:58px}
.stat .k{display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;color:var(--ink-faint);
  min-width:0;flex:1;line-height:1.35}
.stat .k .ic{width:14px;height:14px;flex:none}
.stat .v{font-size:1.45rem;font-weight:800;line-height:1.15;margin-left:auto;text-align:right;white-space:nowrap;flex:none}
.stat .v small{font-size:.75rem;font-weight:700;color:var(--ink-faint)}
/* চওড়া পর্দায় লেখা ও সংখ্যা এক দলে মাঝখানে — নইলে ২৯০px চওড়া কার্ডে
   লেবেল বাঁ কোণে আর সংখ্যা ডান কোণে, মাঝে ১৮০px ফাঁকা পড়ে থাকত। */
@media (min-width:900px){
  .stat{justify-content:center}
  .stat .k{flex:0 1 auto}
  .stat .v{margin-left:0}
}
/* সরু পর্দায় লেবেল ও সংখ্যা উপর-নিচে (`.st-narrow` — এখন #/flood-এ)।
   ৩৭৫px-এ c3-র ঘর মাত্র ১১১px, অথচ লেবেল (আইকনসহ ৬০px) + সংখ্যা (৫২px) + padding
   পাশাপাশি ~১৪১px চায়। `.stat .k{min-width:0}` ঘরটাকে ৩৩px-এ চেপে দিত, ফলে
   "বিপৎসীমা" লেখাটা ২৬px বেরিয়ে সংখ্যার উপরে উঠে যেত (মেপে দেখা)। */
@media (max-width:560px){
  .stats.st-narrow .stat{flex-direction:column;align-items:flex-start;gap:2px;min-height:0;padding:8px 9px}
  .stats.st-narrow .stat .k{flex:none;width:100%;font-size:.72rem}
  .stats.st-narrow .stat .v{margin-left:0;text-align:left}
}

/* হেডার-হিরো */
.hero{border-radius:var(--r-l);padding:18px;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-40px;top:-50px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08)}
.hero .heroart{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hero>.row-in{position:relative;z-index:2}
.hero h1{font-size:1.25rem;font-weight:800}
.hero p{font-size:.88rem;opacity:.92;margin-top:4px}
.hero .row-in{display:flex;align-items:center;gap:12px;position:relative;z-index:1}

/* ---------- ছবি (আঁকা বা আসল) ---------- */
.art{display:block;width:100%;height:100%;object-fit:cover}
.cover{position:relative;border-radius:var(--r-l) var(--r-l) 0 0;overflow:hidden;height:132px;background:var(--surface-2)}
.cover.tall{height:180px}
@media (min-width:1100px){.cover{height:158px}.cover.tall{height:230px}}
.cover .on-cover{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;color:#fff;
  background:linear-gradient(transparent,rgba(6,20,15,.72))}
.cover .on-cover b{font-size:1rem;display:block;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.cover .on-cover small{font-size:.76rem;opacity:.95}
.cover .badge{position:absolute;top:10px;right:10px}
.thumb{width:58px;height:58px;border-radius:12px;overflow:hidden;flex:none;background:var(--surface-2)}
.thumb .art,.thumb.art{width:100%;height:100%}
.logo,.face{display:block;border-radius:12px;flex:none}
.face{border-radius:50%}
.card.hasart{padding:0;overflow:hidden}
.card.hasart .bd{padding:14px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.gal .g{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--surface-2)}
@media (min-width:768px){.gal{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}

/* অ্যাভাটার */
/* ⚠️ পটভূমি `--blue` টোকেন থেকে — ডার্কে হালকা নীল হয়ে যায়, তখন সাদা অক্ষর ২.৭৪:১ */
.av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--on-primary);font-weight:800;font-size:1rem;flex:none;
  background:linear-gradient(135deg,var(--blue),var(--blue-2))}
.av.lg{width:76px;height:76px;font-size:1.6rem}
.av.sm{width:34px;height:34px;font-size:.8rem}

/* ব্যাজ-স্ট্রিপ */
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:.88rem}
.kv dt{color:var(--ink-faint);font-weight:700}
.kv dd{margin:0;font-weight:600}

/* সেগমেন্টেড */
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);padding:3px;gap:3px;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
/* ⚠️ ছিল ৩৬px — অ্যাপের বাকি সব নিয়ন্ত্রণ `--ctl-h` (৪০px)। ট্যাব-স্ট্রিপ সবচেয়ে
   বেশি ছোঁয়া হয়, তাই সেটাই সবচেয়ে ছোট থাকা চলে না (৫৭ জায়গায় ধরা পড়েছিল)।
   `--ctl-h` ব্যবহার করায় "বড় বোতাম" মোডে নিজে থেকেই ৪৮px হয়। */
.seg button{flex:1;border:0;background:none;cursor:pointer;padding:8px 12px;border-radius:10px;font-size:.84rem;font-weight:700;
  min-height:var(--ctl-h);color:var(--ink-soft);white-space:nowrap;transition:transform .13s}
.seg button.on{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:var(--on-primary);box-shadow:var(--shadow)}
@media (hover:hover){.seg button:not(.on):hover{transform:scale(1.04);color:var(--primary)}}

/* খালি অবস্থা */
/* খালি অবস্থা — এক সারিতে, আইকন লেখার পাশে।
   🔴 আগে ছিল ৪০px প্যাডিং + ৪৬px আইকন উপরে, লেখা নিচে → একটা লাইনের জন্য
      **১৬৫px লম্বা** বাক্স। রক্তদান পাতায় তিনটে খালি ঘর মিলে পাতার ৪৬%
      (৪৯৫px) খেয়ে ফেলত, অথচ তথ্য ছিল শূন্য। এখন প্রতিটি ~৪৮px। */
.empty{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 16px;color:var(--ink-faint);background:var(--surface-2);border-radius:var(--r-m)}
.empty .ic{width:22px;height:22px;margin:0;opacity:.5;flex:none}
.empty b{display:inline;color:var(--ink-soft);font-size:.9rem;font-weight:600}

/* টিক-তালিকা */
/* আইকন absolute — নইলে ভেতরের <b> আলাদা কলাম হয়ে যায় */
ul.tick{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
ul.tick li{position:relative;padding-left:26px;font-size:.92rem;color:var(--ink-soft);line-height:1.6}
ul.tick li .ic{position:absolute;left:0;top:4px;width:17px;height:17px;color:var(--ok)}

/* নোটিশ বাক্স */
.note{display:flex;gap:11px;align-items:flex-start;border-radius:var(--r-m);padding:12px 14px;font-size:.87rem;
  background:var(--gold-tint);border:1px solid color-mix(in srgb,var(--gold) 32%,transparent);color:var(--ink)}
.note .ic{width:19px;height:19px;color:var(--gold);flex:none;margin-top:1px}
.note.blood{background:var(--blood-tint);border-color:color-mix(in srgb,var(--blood) 32%,transparent)}
.note.blood .ic{color:var(--blood)}
.note.ok{background:var(--ok-tint);border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
/* ⚠️ `.note.warn` নিয়মটা কখনো লেখাই হয়নি — অথচ ৯ জায়গায় `class="note warn"`
   বসানো আছে। ফলে সতর্কবার্তা দেখতে সাধারণ নোটের মতোই লাগত। (owner ২০২৬-০৯-২০) */
.note.warn{background:var(--warn-tint);border-color:color-mix(in srgb,var(--warn) 32%,transparent)}
.note.warn .ic{color:var(--warn)}
.note.ok .ic{color:var(--ok)}
.note.blue{background:var(--blue-tint);border-color:color-mix(in srgb,var(--blue) 32%,transparent)}
.note.blue .ic{color:var(--blue)}

/* টাইমলাইন */
.tl{display:flex;flex-direction:column;gap:0;margin-top:6px}
.tl .it{display:flex;gap:12px;padding-bottom:16px;position:relative}
.tl .it:before{content:"";position:absolute;left:13px;top:26px;bottom:0;width:2px;background:var(--line)}
.tl .it:last-child:before{display:none}
.tl .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface-2);
  border:2px solid var(--line);color:var(--ink-faint);z-index:1}
.tl .dot .ic{width:14px;height:14px}
.tl .it.done .dot{background:var(--ok);border-color:var(--ok);color:var(--on-primary)}
.tl .it.now .dot{background:var(--gold);border-color:var(--gold);color:var(--on-primary)}
.tl b{font-size:.9rem;display:block}
/* ⚠️ ফারায়েজের AI-বারের `<small>` কোনো নিয়ম পায় না, তাই ব্রাউজারের
   নিজস্ব shrink তাকে **১১px**-এ নামায় — প্রকল্পের তলা `.7rem` (১১.২px)।
   ব্যাখ্যা: মানটি `vendor/faraiz/nds_faraiz.css:837`-তে লেখা,
   ওটা app.css-এর **পরে** লোড হয় — তাই সমান specificity-তে হারতাম। ভেন্ডর
   ফাইল ছুঁই না (পরের রিফ্রেশে হারাবে), তাই এক ধাপ specificity বেশি। (owner ২০২৬-০৯-২০) */
.fz-aibar .fz-aib .tx small{font-size:.74rem}
.tl small{font-size:.76rem;color:var(--ink-faint)}

/* রেটিং */
.stars{display:inline-flex;gap:2px;align-items:center}
.stars .ic{width:15px;height:15px;color:var(--line-2)}
.stars .ic.f{color:#e0a92b;fill:#e0a92b;stroke:#e0a92b}
.stars span{font-size:.78rem;font-weight:700;color:var(--ink-soft);margin-left:4px}

/* রক্তদান — গ্রুপ বোতাম */
.bg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.bg{aspect-ratio:1;border-radius:var(--r-m);border:2px solid var(--line);background:var(--card);cursor:pointer;
  display:grid;place-items:center;font-size:1.15rem;font-weight:800;color:var(--blood);transition:transform .14s;box-shadow:var(--shadow)}
@media (hover:hover){.bg:hover{transform:scale(1.06);border-color:var(--blood)}}
.bg.on{background:linear-gradient(135deg,var(--blood),var(--blood-2));color:var(--on-primary);border-color:transparent}

/* পোস্টার (অটো-জেনারেট) */
.poster{border-radius:var(--r-l);overflow:hidden;color:#fff;background:linear-gradient(150deg,#c9282d,#7c1418 70%);
  padding:20px;position:relative;box-shadow:var(--shadow-lg)}
.poster:before{content:"";position:absolute;inset:9px;border:2px dashed rgba(255,255,255,.28);border-radius:14px;pointer-events:none}
.poster .pt{font-size:.78rem;font-weight:800;letter-spacing:.16em;opacity:.9}
.poster .grp{font-size:3.1rem;font-weight:800;line-height:1;margin:6px 0 4px;display:flex;align-items:center;gap:12px}
.poster .grp .ic{width:44px;height:44px;fill:#fff;stroke:#fff}
.poster .pl{display:flex;align-items:center;gap:9px;font-size:.9rem;margin-top:7px}
.poster .pl .ic{width:17px;height:17px;flex:none;opacity:.9}
.poster .pf{margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.25);font-size:.74rem;opacity:.85;
  display:flex;align-items:center;gap:7px}

/* দাতা অবস্থা */
.donor-dot{width:11px;height:11px;border-radius:50%;flex:none}
.donor-dot.ready{background:var(--ok);box-shadow:0 0 0 3px var(--ok-tint)}
.donor-dot.wait{background:var(--blood);box-shadow:0 0 0 3px var(--blood-tint)}

/* শীট (নিচ থেকে ওঠা) / মোডাল */
.scrim{position:fixed;inset:0;background:rgba(8,20,16,.5);backdrop-filter:blur(2px);z-index:200;opacity:0;transition:opacity .2s}
.scrim.on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:210;background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-lg);max-height:88dvh;display:flex;flex-direction:column;transform:translateY(102%);transition:transform .26s cubic-bezier(.3,.9,.3,1);
  padding-bottom:var(--safe-b)}
.sheet.on{transform:translateY(0)}
.sheet .hd{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--line);flex:none}
.sheet .hd b{font-size:1.02rem;font-weight:800}
.sheet .bd{padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:12px}
/* ⚠️ `.bd` = column flex + overflow। লেখা লম্বা হয়ে শিট উপচে গেলে flex ডিফল্টভাবে
   (`flex-shrink:1`) প্রতিটি item **চেপে ছোট** করে দেয়। ইনপুট/টেক্সট-এরিয়া/চিপের
   নিজস্ব ন্যূনতম উচ্চতা থাকায় ওরা টিকে যায়, কিন্তু বোতামের স্বয়ংক্রিয় ন্যূনতম =
   এক লাইন লেখা — তাই `--ctl-h` (৪২px) দেওয়া থাকা সত্ত্বেও "অনুরোধ পাঠান" বোতামটি
   ২২px-এ নেমে চিকন হয়ে যেত (লাইভে মেপে ধরা, ২০২৬-০৯-১২)। item চাপবে না, বরং
   `.bd` নিজেই স্ক্রল করবে — সেটাই ঠিক আচরণ। */
.sheet .bd > *{flex-shrink:0}
.sheet .grab{width:38px;height:4px;border-radius:3px;background:var(--line-2);margin:8px auto 0}
@media (min-width:768px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-46%) scale(.97);width:min(620px,92vw);
    border-radius:var(--r-xl);max-height:86dvh;opacity:0;transition:transform .22s,opacity .22s}
  .sheet.on{transform:translate(-50%,-50%) scale(1);opacity:1}
  .sheet .grab{display:none}
}

/* টোস্ট */
.toast-host{position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px);z-index:300;display:flex;
  flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 14px}
.toast{background:var(--ink);color:var(--ground);padding:11px 18px;border-radius:999px;font-size:.87rem;font-weight:700;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;max-width:92vw;animation:tin .25s}
.toast .ic{width:17px;height:17px}
.toast.ok{background:linear-gradient(135deg,var(--ok),#14663a);color:var(--on-primary)}
.toast.bad{background:linear-gradient(135deg,var(--blood),var(--blood-2));color:var(--on-primary)}
@keyframes tin{from{transform:translateY(14px);opacity:0}}

/* স্ক্রিন-হেডার (ভেতরের পাতা) */
.phead{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.phead h1{font-size:1.2rem;font-weight:800}
.phead small{display:block;font-size:.78rem;color:var(--ink-faint);font-weight:600}
.phead .sq{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none}
.phead .sq .ic{width:22px;height:22px}

/* টেবিল (অ্যাডমিন — ডেস্কটপ) */
.tbl{width:100%;border-collapse:collapse;font-size:.86rem;background:var(--card)}
.tblwrap{border:1px solid var(--line);border-radius:var(--r-m);overflow:auto;box-shadow:var(--shadow)}
.tbl th,.tbl td{padding:10px 13px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tbl th{background:var(--surface-2);font-size:.76rem;font-weight:800;color:var(--ink-soft);position:sticky;top:0;z-index:2}
.tbl tr:last-child td{border-bottom:0}
@media (hover:hover){.tbl tbody tr:hover{background:var(--surface-2)}}

/* ম্যাপ (ডেমো) */
.map{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);height:280px;box-shadow:var(--shadow);
  background:
   linear-gradient(color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px) 0 0/32px 32px,
   linear-gradient(90deg,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px) 0 0/32px 32px,
   var(--surface-2)}
@media (min-width:1100px){.map{height:420px}}
.map .rd{position:absolute;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.map .pn{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;cursor:pointer}
.map .pn .b{width:32px;height:32px;border-radius:50% 50% 50% 4px;transform:rotate(45deg);display:grid;place-items:center;
  color:#fff;box-shadow:var(--shadow)}
.map .pn .b .ic{width:16px;height:16px;transform:rotate(-45deg)}
.map .pn span{font-size:.72rem;font-weight:800;background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:1px 5px;margin-top:4px;white-space:nowrap}
.map .me{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--blue);border:3px solid #fff;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 25%,transparent);transform:translate(-50%,-50%)}

/* স্কেলিটন */
.sk{background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;
  animation:skm 1.2s infinite;border-radius:8px;height:14px}
@keyframes skm{to{background-position:-200% 0}}

/* ছোট ফোনে টপবার আঁটসাঁট — লেখা যেন ভাঙে না */
@media (max-width:559px){
  .topbar .in{gap:7px;padding:8px 11px}
  .brand small{display:none}
  /* চওড়া (wordmark) লোগো থাকলে ফোনে নামটিও নয় — লোগোতেই নাম আছে */
  .brand.wlogo>span:not(.seal){display:none}
  .brand b{font-size:.94rem}
  .seal{width:36px;height:36px;border-radius:10px}
  /* ফোনে নামের জায়গা রাখতে হয় — লোগো তাই ছোট সীমায় */
  .seal.img{width:auto;min-width:36px;max-width:132px}
  .seal.img>img{height:28px}
  /* ফোনে টপ-বার একটু ছোট, কিন্তু ছোঁয়ার ঘর ৪০-এর নিচে নয় */
  .iconbtn{width:40px;height:40px;border-radius:10px}
  .wardbtn{height:40px;padding:0 10px;font-size:.8rem}
}

/* 🐞 ৬৪ px-এর কম হলে খোঁজার ঘরের ম্যাগনিফায়ার আইকনটি পুরো কেটে যায়।
   ৩২০px-এ মাপা (২০২৬-০৯-২০): ঘর ৩৪ px, আইকনের দৃশ্যমান অংশ **০/১৭px** —
   চোখে শুধু একটা সাদা খুঁটি, কেউ বুঝতেই পারত না ওটা খোঁজার ঘর। কারণ:
   `.hsearch{overflow:hidden}` + ইনপুটের `padding:0 11px` (=২২px) ও বোতাম ৪২px
   → ঘরটির সর্বনিম্ন দরকার ৬৪px। owner-এর নিয়ম — "বার কখনো ২য় লাইনে নয়,
   নইলে আইকন" — তাই খুব সরু ফোনে নামটি লুকিয়ে ঘরটিকে জায়গা দিই
   (`.brand.wlogo`-তে এই কৌশল আগেই আছে — লোগোতেই পরিচয় থাকে)। */
@media (max-width:359px){
  .brand>span:not(.seal){display:none}
  .hsearch{min-width:64px}
}
/* 🐞 ফোনে `.btnrow`-এর বোতাম বোতামগুলো বড় হতো না —
   নিজের স্বাভাবিক প্রস্থেই থেকে সারির অর্ধেক খালি রাখত। ৩২০px-এ মাপা
   (২০২৬-০৯-২০): #/me ১০২px · #/orgs ১২৯ ও ১৪১px · #/flood ১৬৬px (৫৬%)
   ফাঁকা। ৩৭৫ px-এও ১১ পর্দায় ৪০px+ (support/chat ২৩০ · orders ২২১ ·
   helpers ১৯০px) — একটিমাত্র বোতাম সারির ৩৭% নিয়ে পড়ে থাকত,
   অথচ উপরের কার্ড পুরো চৌড়া — owner-এর #১ নিয়মের সরাসরি লঙ্ঘন। প্রকল্পে প্যাটার্নটি অসঙ্গতও
   (কিছু বোতামে `flex:1 1 0%`, কিছুতে `0 1 auto`)। wrap হলে সবাই বাড়ুক। */
@media (max-width:559px){
  .btnrow > .btn{flex:1 1 auto}
}



/* যন্ত্র-ভেদে দেখা/লুকানো */
.only-desk{display:none}
@media (min-width:768px){
  .only-phone{display:none!important}
  .iconbtn.only-desk{display:grid}
  .topsearch.only-desk{display:flex}
}

/* ========== ৪. ট্যাব (৭৬৮+) — বাঁয়ে আইকন-রেল ========== */
@media (min-width:768px){
  :root{--pad:20px}
  .tabbar{display:none}
  .view{padding-bottom:34px}
  .sidenav{display:flex;flex-direction:column;gap:4px;width:92px;flex:none;padding:14px 8px;
    border-right:1px solid var(--line);background:var(--surface);position:sticky;top:calc(var(--topbar-h) + var(--safe-t));
    height:calc(100dvh - var(--topbar-h) - var(--safe-t));overflow-y:auto;scrollbar-width:thin}
  .sidenav button{border:0;background:none;cursor:pointer;border-radius:var(--r-m);padding:9px 4px;display:flex;flex-direction:column;
    align-items:center;gap:5px;color:var(--ink-soft);transition:background .14s,color .14s,transform .14s}
  .sidenav button b{font-size:.7rem;font-weight:700;text-align:center;line-height:1.2}
  .sidenav button .ic{width:22px;height:22px}
  .sidenav button:hover{background:var(--surface-2);color:var(--primary);transform:scale(1.04)}
  .sidenav button.on{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:var(--on-primary)}
  .sidenav .sep{height:1px;background:var(--line);margin:7px 6px}
  .sidenav .lbl{display:none}
  /* ডিজাইন QA লিংক — সাইডবারের বোতামগুলোর মতোই দেখায় (a ট্যাগ বলে আলাদা নিয়ম) */
  .sidenav .qa-link{border:0;background:none;cursor:pointer;border-radius:var(--r-m);padding:9px 4px;
    display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink-soft);text-decoration:none;
    transition:background .15s,transform .15s}
  .sidenav .qa-link b{font-size:.7rem;font-weight:700;text-align:center;line-height:1.2}
  .sidenav .qa-link .ic{width:22px;height:22px}
  .sidenav .qa-link:hover{background:var(--surface-2);color:var(--primary);transform:scale(1.04)}
}
/* ========== ৫. ডেস্কটপ / ম্যাক (১১০০+) — পূর্ণ সাইডবার ========== */
@media (min-width:1100px){
  :root{--ctl-h:42px;--pad:26px}
  .sidenav{width:246px;padding:16px 12px;align-items:stretch}
  .sidenav button,.sidenav .qa-link{flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 13px}
  .sidenav button b,.sidenav .qa-link b{font-size:.88rem;text-align:left}
  .sidenav .lbl{display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-faint);padding:12px 13px 5px}
  .view{padding:26px 30px 44px}
  .wrap{max-width:1180px}
  .hero{padding:24px 26px}
  .hero h1{font-size:1.6rem}
  .brand b{font-size:1.02rem}
  .grid.c2,.grid.c3{gap:16px}
}
@media (min-width:1600px){
  .wrap{max-width:1420px}
  .view{padding:30px 42px 50px}
}

/* ম্যাক/ডেস্কটপ: স্ক্রলবার সুন্দর, চিপ-সারি গুটিয়ে যায় (লুকানো থাকে না) */
@media (min-width:1100px){
  *::-webkit-scrollbar{width:11px;height:11px}
  *::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:3px solid var(--ground)}
  *::-webkit-scrollbar-track{background:transparent}
  .sidenav::-webkit-scrollbar{width:7px}
  .sidenav::-webkit-scrollbar-thumb{background:transparent;border:0}
  .sidenav:hover::-webkit-scrollbar-thumb{background:var(--line-2)}
  .chips.scroll{flex-wrap:wrap;overflow:visible}
}
/* আইফোন/আইপ্যাড: রাবার-ব্যান্ড ও ট্যাপ */
.is-ios .view{-webkit-overflow-scrolling:touch}
.is-ios .btn,.is-ios .tile,.is-ios .row{-webkit-user-select:none;user-select:none}
/* ইনস্টল করা অ্যাপে টপবার একটু লম্বা (স্ট্যাটাস বার) */
.is-app .topbar{padding-top:calc(var(--safe-t) + 4px)}

/* প্রিন্ট (পোস্টার/রসিদ) */
@media print{
  .topbar,.sidenav,.tabbar,.no-print{display:none!important}
  /* ⚠️ কাগজে বোতাম/চিপ/ট্যাব অর্থহীন — চাপা যায় না, অথচ জায়গা নেয় আর ছাপার খরচ বাড়ায়।
     `.no-print` ক্লাসটা আগে থেকেই ছিল কিন্তু **কোথাও ব্যবহার হয়নি** (মেপে দেখা: প্রার্থীর
     পাতা ছাপলে "সমর্থন করি · শেয়ার · লিংক কপি" ছাপা হতো)। প্রতিটি পাতায় হাতে ক্লাস
     বসানোর বদলে এখানে একবারে — নতুন পাতাও নিজে থেকেই নিয়ম মানবে। */
  /* ⚠️ `.vsw` (তালিকা ⇄ গ্রিড সুইচ) পরে যোগ হয়েছিল, এই তালিকায় ওঠেনি —
     ফলে কাগজে ছাপা হতো (মেপে ধরা ২০২৬-০৯-১৯)। `.vswbar` রাখা হলো —
     ওর ভেতরের "N টি" গণনা কাগজেও কাজে লাগে। */
  .btnrow,.btn,.chips,.seg,.iconbtn,.dlbar,.fab,.sheet,.modal,.toast,.vsw{display:none!important}
  body{background:#fff;color:#000}
  .view{padding:0}
  .card,.poster{box-shadow:none;break-inside:avoid}
  /* লিংকের ঠিকানা কাগজে দেখা যাক — নইলে "এখানে চাপুন" ছাপা অর্থহীন */
  .wrap a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}
/* কম-অ্যানিমেশন পছন্দ */
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* হিসাব-কার্ডে মান যখন সংখ্যা নয়, লেখা — তখন উপরে-নিচে, নইলে লেবেল ভেঙে যায় */
.stats.stack .stat{flex-direction:column;align-items:flex-start;gap:3px;min-height:0}
.stats.stack .stat .k{flex:none;width:100%}
.stats.stack .stat .v{margin-left:0;text-align:left;font-size:1rem;white-space:normal}

/* দ্রুত-সেবার আইকন সারি (স্বাস্থ্য পাতার উপরে) — ছোট, ৪ ভাগে */
.tiles.quick{grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:11px}
.tiles.quick .tile{padding:8px 4px;gap:5px;text-decoration:none;color:inherit}
.tiles.quick .sq{width:34px;height:34px;border-radius:10px}
.tiles.quick .sq .ic{width:19px;height:19px}
.tiles.quick b{font-size:.74rem}

/* ---------- শোকের কার্ড ----------
   ছবি থাকলে সাদা-কালো + শোকের ফিতা; ছবি না থাকলে বড় শোক-আইকন।
   কারও ছবি না দিলেও কার্ডটি যেন সম্মানজনক দেখায়। */
.card.is-mourn{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.cover.mourn{background:linear-gradient(160deg,#2b3733,#151d1a);position:relative;display:grid;place-items:center}
.cover.mourn img.art{filter:grayscale(1) contrast(1.05);opacity:.92;width:100%;height:100%;object-fit:cover}
.cover.mourn .mourn-ic{display:grid;place-items:center;width:100%;height:100%}
.cover.mourn .mourn-ic .ic{width:40px;height:40px;color:rgba(255,255,255,.9)}
.cover.mourn .ribbon{position:absolute;left:0;top:10px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(0,0,0,.62);color:#fff;font-size:.72rem;font-weight:800;padding:3px 10px 3px 8px;  /* .68rem = ১০.৯px, পড়া কষ্ট */
  border-radius:0 999px 999px 0;backdrop-filter:blur(4px)}
.cover.mourn .ribbon .ic{width:12px;height:12px}
.mourn-line{text-align:center;font-size:.74rem;font-weight:700;color:var(--ink-faint);
  border-bottom:1px dashed var(--line);padding-bottom:6px;margin-bottom:8px}

/* ---------- সুইচ (চালু/বন্ধ) — নোটিফিকেশনের নিয়ম, কম-ডেটা ইত্যাদি ---------- */
.swx{flex:none;width:56px;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);
  position:relative;cursor:pointer;padding:0;transition:background .18s,border-color .18s}
/* দেখতে ৩৪px, কিন্তু ছোঁয়ার ঘর ~৪৮px — সুইচ ছোট হলে বয়স্কদের আঙুলে বারবার মিস হয় */
.swx::before{content:"";position:absolute;inset:-7px;border-radius:999px}
.swx::after{content:"";position:absolute;top:2px;left:2px;width:28px;height:28px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(37,99,235,.25);transition:transform .18s}
.swx.on{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent}
.swx.on::after{transform:translateX(24px)}   /* ৫৪px ভেতরের প্রস্থ − ২৮ নব − ২ প্যাডিং = ২৪ */
@media (hover:hover){.swx:hover{transform:scale(1.05)}}
.swx:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.row .when{margin:8px 0 2px;padding-left:52px}
/* সেবাদাতার উত্তর (অধ্যায় ১৮) */
.row .reply{display:flex;gap:9px;margin:9px 0 2px;padding:9px 11px;border-radius:var(--r-m);
  background:var(--surface-2);border-left:3px solid var(--primary)}
.row .reply .ic{width:16px;height:16px;color:var(--primary);flex:none;margin-top:3px}
.row .reply b{display:block;font-size:.82rem}
.row .reply small{color:var(--ink-soft)}
.row.stack{display:block}
.row.stack .line{display:flex;align-items:center;gap:12px}

/* ---------- বড় বোতাম মোড (অধ্যায় ৩ · ডিজাইন খ) ---------- */
[data-mode="big"] .tiles.big{grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:768px){[data-mode="big"] .tiles.big{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){[data-mode="big"] .tiles.big{grid-template-columns:repeat(4,1fr)}}
[data-mode="big"] .tiles.big .tile{padding:22px 12px;gap:12px;border-width:2px}
[data-mode="big"] .tiles.big .tile .sq{width:72px;height:72px;border-radius:22px}
[data-mode="big"] .tiles.big .tile .sq .ic{width:36px;height:36px}
[data-mode="big"] .tiles.big .tile b{font-size:1.12rem;line-height:1.45}
[data-mode="big"] .tiles.big .tile small{font-size:.92rem}
[data-mode="big"] .btn.big{min-height:62px;font-size:1.08rem}
[data-mode="big"] .btn.sm{height:48px;font-size:.95rem}
[data-mode="big"] .iconbtn{width:48px;height:48px}
[data-mode="big"] .tag{font-size:.82rem;padding:5px 11px}
/* বড় বোতাম মোডে ঘনত্বও আলগা — ডিফল্ট কমপ্যাক্ট রাখা গেছে বলেই এটা দরকার */
[data-mode="big"]{--ctl-h:48px; --pad:16px; --gap:14px}
[data-mode="big"] .card{padding:18px}
[data-mode="big"] .row{padding:13px 15px;gap:12px}
[data-mode="big"] .row .sq{width:44px;height:44px;border-radius:13px}
[data-mode="big"] .row .sq .ic{width:23px;height:23px}
[data-mode="big"] .sect{margin:20px 0 12px}
[data-mode="big"] body,[data-font="big"] body{font-size:16px}
[data-mode="big"] .chips .chip{font-size:1rem;padding:11px 14px}

/* ==========================================================================
   হোমের "আজ" স্ট্রিপ ও নামাজের সময়
   ⚠️ স্ট্রিপে দেখানোর মতো কিছু না থাকলে JS-ই সারিটা আঁকে না — এখানে
   "খালি অবস্থার" কোনো স্টাইল নেই, কারণ খালি অবস্থা বলে কিছু থাকবে না।
   ========================================================================== */
.today{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--gap)}
/* ⭐ owner ২০২৬-০৯-১৪: আগে সারিগুলো এক কার্ডের ভেতরে ভাগ ছিল (কনটেইনারে ১px ফাঁক +
   line রঙের পটভূমি = মাঝে বিভাজন-রেখা)। এখন **প্রতিটি সারিই নিজে একটি কার্ড** —
   বিভাজন-রেখা নেই, মাঝে সত্যিকারের ফাঁক। */
.today-row{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow);width:100%;
  padding:10px 12px;cursor:pointer;text-align:start;font:inherit;color:inherit;min-height:56px}
@media (hover:hover){.today-row:hover{background:var(--surface-2)}}
.today-row .sq{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none}
.today-row .sq .ic{width:18px;height:18px}
.today-row .tx{min-width:0;flex:1}
.today-row .tx b{display:block;font-size:.9rem;font-weight:700;overflow-wrap:anywhere}
.today-row .tx small{display:block;font-size:.76rem;color:var(--ink-faint)}
.today-row .val{margin-left:auto;flex:none;font-size:1.15rem;font-weight:800;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.today-row .val small{font-size:.74rem;font-weight:700;color:var(--ink-faint)}
.today-row .val.sm .ic{width:17px;height:17px;color:var(--ink-faint)}
.today-row.hot{background:var(--blood-tint)}

/* ---------- জরুরি ঘোষণার কার্ড (owner ২০২৬-০৯-১২) ----------
   পাশের নামাজ-কার্ডের সাথে উচ্চতা সমান রাখতে শিরোনাম ও উপ-লেখা **এক লাইনেই** বাঁধা —
   নইলে লম্বা শিরোনামে ডান ঘরটা লম্বা হয়ে পুরো কার্ড টেনে বড় করত। */
.today-row.alert .tx b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.today-row.alert .tx small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* নতুন কিছু না থাকলে — চিহ্নটি নিরুত্তাপ, তবু ঘরটি নোটিশের পাতায় নিয়ে যায় */
.today-row.alert.none .sq{background:var(--surface-2);color:var(--ink-faint);
  box-shadow:inset 0 0 0 1px var(--line)}
.today-row.alert.none .tx b{color:var(--ink-soft)}
/* একাধিক খবর থাকলে কতটি — ছোট গোল ব্যাজ */
.today-row .val .cnt{font-style:normal;font-size:.7rem;font-weight:800;margin-right:5px;
  padding:1px 6px;border-radius:999px;background:var(--blood-tint);color:var(--blood-ink)}
@keyframes tdSwap{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.today-row.alert.swap .sq,.today-row.alert.swap .tx{animation:tdSwap .28s ease}
@media (prefers-reduced-motion:reduce){.today-row.alert.swap .sq,.today-row.alert.swap .tx{animation:none}}

/* পরের ওয়াক্তের বড় কার্ড */
/* ⚠️ আগে g-mosque-এর রঙ (#2fa863) ব্যবহার করেছিলাম — তাতে সাদা ছোট লেখা মাত্র ৩.০৪:১,
   আর opacity দিয়ে আরও ফিকে হয়ে যেত। গ্রেডিয়েন্ট গাঢ় করে ৫.১৬:১, আর ছোট লেখায়
   opacity তুলে দেওয়া হলো — পার্থক্য এখন ওজন ও মাপ দিয়ে, ফিকে করে নয়। */
.salat-next{background:linear-gradient(135deg,#1B7D4A,#125C36);color:#fff;border-radius:var(--r-l);
  padding:20px 18px;box-shadow:var(--shadow-lg);text-align:center}
.salat-next .k{font-size:.78rem;font-weight:700;letter-spacing:.04em}
.salat-next .n{font-size:1.35rem;font-weight:800;margin-top:3px}
.salat-next .n small{font-size:.82rem;font-weight:700}
.salat-next .t{font-size:2.5rem;font-weight:800;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
.salat-next .t small{font-size:1rem;font-weight:700}
.salat-next .l{font-size:.92rem;font-weight:700;margin-top:2px}
[data-mode="big"] .salat-next .t{font-size:3rem}

/* চলতি/পরের ওয়াক্তের সারি আলাদা করে বোঝানো */
.row.on{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 26%,transparent)}

/* "এখন খোলা আছে" সুইচ-বার (স্বাস্থ্য পাতা) */
.openbar{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 12px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow);cursor:pointer}
.openbar .tx{min-width:0;flex:1}
.openbar .tx b{display:block;font-size:.9rem;font-weight:700}
.openbar .tx small{display:block;font-size:.76rem;color:var(--ink-faint);overflow-wrap:anywhere}

/* টিক-চিহ্নের তালিকা (বন্যার ব্যাগ, চেকলিস্ট) */
.tick{list-style:none;display:flex;flex-direction:column;gap:8px}
.tick li{display:flex;gap:9px;font-size:.9rem;line-height:1.5}
.tick li::before{content:"";flex:none;width:17px;height:17px;margin-top:3px;border-radius:5px;
  background:var(--ok-tint);border:1.5px solid color-mix(in srgb,var(--ok) 45%,transparent);
  background-image:linear-gradient(45deg,transparent 45%,var(--ok) 45%,var(--ok) 55%,transparent 55%),
    linear-gradient(-45deg,transparent 45%,var(--ok) 45%,var(--ok) 55%,transparent 55%);
  background-size:9px 9px;background-position:center;background-repeat:no-repeat}

/* ধাপের নম্বর — গাঢ় ঘর, সাদা সংখ্যা (৮.৫:১) */
.sq.stepno{background:linear-gradient(135deg,#8E1B33,#6B1226);font-weight:800;font-size:.95rem;
  font-variant-numeric:tabular-nums}

/* ==========================================================================
   ৳ নতুন চেহারা — সরকারি পোর্টাল ধাঁচ (২০২৬-০৮-১৮)
   ডেস্কটপে বাঁয়ের সাইডবারের বদলে **উপরে অনুভূমিক মেনু**;
   ফোনে **নেভি হেডার** যার ভেতরেই খোঁজার ঘর; নিচে জরুরি-বোতাম লাল।
   ⚠️ পুরোনো `.sidenav` কোড রেখে দেওয়া হয়েছে — শুধু লুকানো, যাতে কিছু ভাঙে না।
   ========================================================================== */

/* --- ফোনের নেভি হেডার --- */
.topbar{background:var(--navy);border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.topbar .in{padding:10px 14px;padding-left:calc(14px + var(--safe-l));padding-right:calc(14px + var(--safe-r))}
.topbar .brand b{color:var(--on-navy)}
/* ⚠️ ৭৮% ছিল — অন্ধকারে নেভি (#5b8fd6) হালকা, তার উপরে প্রায়-কালো লেখা
   মাত্র ৪.১৪:১ (দরকার ৪.৫)। ৮৮%-এ ৪.৯:১।
   🪤 এটা এতদিন ধরা পড়েনি কারণ ৩৭৫px-এ এই লেখাটা `display:none`, আর ৭৬৮px+
      -এ হেডার সাদা হয়ে যায় — শুধু **মাঝের প্রস্থে** (≈৪৮০–৭৬৭px) দেখা যায়,
      আর আমি ঠিক ওই বলয়টাই কখনো মাপিনি। এখন স্ক্যানে ৫৬৭px যোগ করা হয়েছে। */
.topbar .brand small{color:color-mix(in srgb,var(--on-navy) 88%,transparent)}
.topbar .iconbtn{background:color-mix(in srgb,var(--on-navy) 14%,transparent);border-color:color-mix(in srgb,var(--on-navy) 26%,transparent);color:var(--on-navy)}
.topbar .wardbtn{background:color-mix(in srgb,var(--on-navy) 14%,transparent);border-color:color-mix(in srgb,var(--on-navy) 26%,transparent);color:var(--on-navy)}
.topbar .wardbtn .ic{color:color-mix(in srgb,var(--on-navy) 85%,transparent)}
.seal{background:var(--surface);border:2px solid var(--gold);color:var(--navy)}

/* হেডারের ভেতরের খোঁজার ঘর (ফোন) — ছবির মতো */
.hsearch{display:flex;align-items:center;gap:0;margin:0 14px 11px;
  margin-left:calc(14px + var(--safe-l));margin-right:calc(14px + var(--safe-r));
  background:var(--field);border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(37,99,235,.18)}
.hsearch input{flex:1;min-width:0;height:44px;border:0;background:none;padding:0 13px;font:inherit;font-size:.9rem;color:var(--ink)}
.hsearch input::placeholder{color:var(--ink-faint)}
.hsearch button{width:52px;height:44px;border:0;display:grid;place-items:center;cursor:pointer;flex:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));color:var(--on-primary)}
.hsearch button .ic{width:19px;height:19px}

/* --- ডেস্কটপ: উপরে অনুভূমিক মেনু --- */
.topnav{display:none}
@media (min-width:1000px){
  .topbar{background:var(--surface);border-bottom:1px solid var(--line)}
  .topbar .brand b{color:var(--ink)}
  .topbar .brand small{color:var(--ink-soft)}
  .topbar .iconbtn,.topbar .wardbtn{background:var(--surface);border-color:var(--line);color:var(--ink-soft)}
  .topbar .wardbtn .ic{color:var(--blood)}
  .seal{color:var(--navy)}
  .hsearch{display:none}

  .topnav{display:flex;align-items:center;gap:4px;margin-inline-start:26px}
  .topnav > a{position:relative;padding:0 13px;height:52px;display:flex;align-items:center;
    font-size:.9rem;font-weight:700;color:var(--ink-soft);white-space:nowrap;border-radius:8px}
  .topnav > a:hover{color:var(--navy);background:var(--navy-tint)}
  .topnav > a.on{color:var(--navy)}
  .topnav > a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:3px;
    border-radius:3px 3px 0 0;background:var(--primary)}
  /* "সেবা সমূহ" — নিচে ঝুলে পড়া মেনু, ৫০টি পর্দাতেই পৌঁছানো যায় */
  .topnav .drop{position:relative}
  .topnav .drop > .panel{position:absolute;top:100%;inset-inline-start:0;min-width:640px;max-width:min(92vw,860px);
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-lg);
    padding:14px;display:none;grid-template-columns:repeat(3,1fr);gap:3px;z-index:80}
  .topnav .drop:hover > .panel,.topnav .drop:focus-within > .panel{display:grid}
  .topnav .drop > .panel a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;
    font-size:.86rem;font-weight:600;color:var(--ink-soft);min-height:40px}
  .topnav .drop > .panel a:hover{background:var(--navy-tint);color:var(--navy)}
  .topnav .drop > .panel a .ic{width:17px;height:17px;color:var(--primary);flex:none}
  .topnav .drop > .panel .lbl{grid-column:1/-1;font-size:.72rem;font-weight:800;letter-spacing:.06em;
    color:var(--ink-faint);padding:9px 10px 3px}
  /* সাইডবার আর নয় */
  .sidenav{display:none!important}
  .body{max-width:1320px}
  .view{padding:16px 20px 40px}
}

/* ভাষা বাছাই ও লগইন (ছবির মতো) */
.langsel{height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-soft);font:inherit;font-size:.85rem;font-weight:700;padding:0 10px;cursor:pointer;flex:none}

/* নিচের ট্যাব-বারের জরুরি বোতাম — লাল */
.tabbar .mid .fab{background:linear-gradient(135deg,var(--blood),var(--blood-2));
  box-shadow:0 6px 18px color-mix(in srgb,var(--blood) 45%,transparent)}

/* ---------- হিরো (নতুন) — বাঁয়ে লেখা, ডানে কুমিল্লার চিত্র ---------- */
.hero2{background:linear-gradient(135deg,#fdfaf2,#f4efe1);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;display:grid;grid-template-columns:1fr;box-shadow:var(--shadow);
  /* ⚠️ দুটোরই নিচে ফাঁক দরকার — নইলে ডাউনলোড-বার · হিরো · "আজ" কার্ড তিনটি
     গায়ে গায়ে লেগে থাকত (পাতার বাকি সব ব্লকে var(--gap) ফাঁক আছে) */
  margin-bottom:var(--gap)}
/* ⚠️ হিরোর পটভূমি স্থির হেক্স (উষ্ণ কাগজ) — তাই ডার্কের জন্য আলাদা করে লিখতে হয়।
   অ্যাপের নিজের নিয়মই মেলানো: স্পষ্ট-ডার্ক + auto-ডার্ক দুটোই। */
:root[data-theme="dark"] .hero2{background:linear-gradient(135deg,#16233a,#111c2e)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero2{background:linear-gradient(135deg,#16233a,#111c2e)}
}
.hero2 .txt{padding:22px 20px}
.hero2 h1{font-size:clamp(1.5rem,5.5vw,2.3rem);font-weight:800;line-height:1.22;color:var(--navy)}
.hero2 .sub{font-size:clamp(.95rem,3.4vw,1.2rem);font-weight:700;color:var(--primary);margin-top:4px}
.hero2 .lead2{margin-top:13px;font-size:.9rem;font-weight:700;color:var(--ink-soft)}
.hero2 .art2{position:relative;min-height:170px;background:var(--surface-2)}
.hero2 .art2 svg{position:absolute;inset:0;width:100%;height:100%}
@media (min-width:820px){ .hero2{grid-template-columns:1fr 1.05fr} .hero2 .txt{padding:32px 30px} }

/* হিরোর ভেতরের বড় খোঁজার ঘর (ডেস্কটপ) */
.bigsearch{display:flex;margin-top:15px;max-width:520px;border-radius:11px;overflow:hidden;
  border:1px solid var(--line-2);background:var(--field);box-shadow:var(--shadow)}
.bigsearch input{flex:1;min-width:0;height:48px;border:0;background:none;padding:0 14px;font:inherit;font-size:.95rem;color:var(--ink)}
.bigsearch button{width:56px;height:48px;border:0;display:grid;place-items:center;cursor:pointer;flex:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));color:var(--on-primary)}
.bigsearch button .ic{width:20px;height:20px}
/* ⚠️ align-items:center না দিলে <b> লেবেল stretch হয়ে ৪১px বাক্সের উপরে বসে, আর প্যাডিং-ওয়ালা <a> মাঝে — ১১px উঁচু-নিচু */
.quicklinks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:11px;font-size:.82rem}
/* ⚠️ লেবেল কখনো hint-ধূসর নয় (owner রুল): ছিল --ink-faint (#5a6b83, hint-এর স্তর),
   অথচ এটি বোল্ড **লেবেল** — তাই এক ধাপ গাঢ় --ink-soft (#46566e)। মেপে ধরা ২০২৬-০৯-১৯। */
.quicklinks b{color:var(--ink-soft);font-weight:700}
/* ⚠️ লেখার লিংক ছিল ২০px উঁচু — আঙুলে ধরা কঠিন; প্যাডিং দিয়ে ৪০px */
.quicklinks a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:3px;
  padding:13px 0;display:inline-block;line-height:1.15}

/* ---------- জরুরি নম্বরের সারি ---------- */
.emrow{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:var(--gap)}
@media (min-width:760px){ .emrow{grid-template-columns:repeat(4,1fr)} }
.emcard{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-m);padding:13px 14px;box-shadow:var(--shadow);text-decoration:none;color:inherit;min-height:66px}
@media (hover:hover){.emcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--blood)}}
.emcard .ic{width:30px;height:30px;flex:none}
.emcard .tx{min-width:0}
.emcard .tx b{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft)}
.emcard .tx .no{font-size:1.35rem;font-weight:800;color:var(--blood);line-height:1.15;font-variant-numeric:tabular-nums}

/* ---------- সেবার রঙিন আইকন-কার্ড ---------- */
.svcgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:var(--gap)}
@media (min-width:760px){ .svcgrid{grid-template-columns:repeat(8,1fr)} }
.svc{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:13px 6px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow);
  cursor:pointer;text-decoration:none;color:inherit;min-height:88px}
@media (hover:hover){.svc:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--primary)}}
.svc svg{width:38px;height:38px;flex:none}
.svc b{font-size:.74rem;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
[data-mode="big"] .svc b{font-size:.86rem}

/* ---------- ঘোষণার তিন কলাম ---------- */
.anncols{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--gap)}
@media (min-width:900px){ .anncols{grid-template-columns:repeat(3,1fr)} }
.anncard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:14px;box-shadow:var(--shadow)}
.anncard.red{border-color:color-mix(in srgb,var(--blood) 40%,transparent);background:var(--blood-tint)}
.anncard.amber{border-color:color-mix(in srgb,var(--gold) 40%,transparent);background:var(--gold-tint)}
.anncard .hd{display:flex;align-items:center;gap:7px;font-size:.86rem;font-weight:800;margin-bottom:10px}
.anncard .hd .ic{width:17px;height:17px}
.anncard .hd .cnt{margin-inline-start:auto;font-size:.72rem;font-weight:800;padding:2px 9px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line)}
.bgtile{width:64px;height:64px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--blood),var(--blood-2));color:var(--on-primary);
  font-size:1.6rem;font-weight:800;line-height:1}

/* ---------- "আজ কুমিল্লায়" টাইমলাইন ---------- */
.dayline{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:15px 14px;
  box-shadow:var(--shadow);margin-top:var(--gap);overflow-x:auto}
.dayline .track{display:flex;align-items:flex-start;gap:0;min-width:600px;position:relative;padding-top:22px}
.dayline .track::before{content:"";position:absolute;left:6%;right:6%;top:30px;height:2px;background:var(--line-2)}
.dayline .pt{flex:1;text-align:center;position:relative;padding-top:16px}
.dayline .pt::before{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;background:var(--surface);border:2.5px solid var(--primary)}
.dayline .pt .t{position:absolute;top:-26px;left:0;right:0;font-size:.74rem;font-weight:800;color:var(--ink-soft)}
.dayline .pt small{display:block;font-size:.74rem;color:var(--ink-faint);line-height:1.35;padding:0 5px}
.dayline .sun{flex:none;width:70px;text-align:center;font-size:.72rem;color:var(--ink-faint);font-weight:700}
.dayline .sun .ic{width:22px;height:22px;color:var(--gold);display:block;margin:0 auto 3px}
.dayline .sun b{display:block;font-size:.82rem;color:var(--ink-soft)}

/* সেকশনের "সব দেখুন" */
.seeall{margin-inline-start:auto;font-size:.8rem;font-weight:700;color:var(--primary);cursor:pointer;
  display:flex;align-items:center;gap:3px;padding:11px 4px;margin-inline-end:-4px}

/* ==========================================================================
   🐞 ট্যাবলেটের চলাচল — মেপে ধরা পড়া বাগের সমাধান
   নতুন ডিজাইনে সাইডবার সরানোর পর ৭৬৮–৯৯৯px-এ **কোনো চলাচলই থাকছিল না**:
   উপরের মেনু আসত ১০০০px থেকে, নিচের ট্যাববার `only-phone` বলে লুকানো,
   আর সাইডবার খালি ৯২px ফালি হয়ে দাঁড়িয়ে থাকত।
   সমাধান: (১) খালি সাইডবার সব মাপে বন্ধ, (২) উপরের মেনু **৭৬৮px থেকেই**।
   ========================================================================== */
.sidenav{display:none!important}

@media (min-width:768px){
  .topbar{background:var(--surface);border-bottom:1px solid var(--line)}
  .topbar .brand b{color:var(--ink)}
  .topbar .brand small{color:var(--ink-soft)}
  .topbar .iconbtn,.topbar .wardbtn{background:var(--surface);border-color:var(--line);color:var(--ink-soft)}
  .topbar .wardbtn .ic{color:var(--blood)}
  .hsearch{display:none}
  .topnav{display:flex}
  .body{max-width:1320px}
  .view{padding:16px 20px 40px}
}
/* ট্যাবলেটে জায়গা কম — মেনু একটু আঁটসাঁট, দরকারে পাশে স্ক্রল করে */
@media (min-width:768px) and (max-width:1099px){
  .topnav{margin-inline-start:12px;overflow-x:auto;scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  .topnav > a{padding:0 9px;font-size:.84rem}
  .topnav .drop > .panel{min-width:min(92vw,560px);grid-template-columns:repeat(2,1fr)}
  .brand small{display:none}          /* ট্যাগলাইন বাদ — নামটাই থাক */
}

/* 🐞 ড্রপডাউন প্যানেলের `display:none` শুধু ১০০০px-এর ব্লকে ছিল, তাই ৭৬৮–৯৯৯px-এ
   প্যানেলটা **সবসময় খোলা** থেকে মেনুকে ৪২৮px উঁচু করে দিত (মেপে ধরা পড়ল)।
   নিয়মগুলো এখন সব মাপের জন্য, শুধু "কখন দেখাবে" আলাদা। */
.topnav .drop{position:relative}
.topnav .drop > .panel{position:absolute;top:100%;inset-inline-start:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-lg);padding:14px;display:none;gap:3px;z-index:80;
  max-height:min(70vh,560px);overflow-y:auto}
.topnav .drop:hover > .panel,
.topnav .drop:focus-within > .panel{display:grid}
.topnav .drop > .panel a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;
  font-size:.86rem;font-weight:600;color:var(--ink-soft);min-height:40px}
.topnav .drop > .panel a:hover{background:var(--navy-tint);color:var(--navy)}
.topnav .drop > .panel a .ic{width:17px;height:17px;color:var(--primary);flex:none}
.topnav .drop > .panel .lbl{grid-column:1/-1;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  color:var(--ink-faint);padding:9px 10px 3px}
@media (min-width:1100px){ .topnav .drop > .panel{min-width:640px;max-width:min(92vw,860px);grid-template-columns:repeat(3,1fr)} }

/* 🐞 "সেবা সমূহ" লিংকটি `.drop` (span)-এর ভেতরে, তাই `.topnav > a` নিয়মে পড়ত না —
   মেপে দেখা গেল সেটি মাত্র ১৯px উঁচু। সরাসরি সন্তান ও ড্রপ — দুটোই একই নিয়মে। */
.topnav .drop{display:flex;align-items:center}
.topnav .drop > a{position:relative;padding:0 13px;height:52px;display:flex;align-items:center;
  font-size:.9rem;font-weight:700;color:var(--ink-soft);white-space:nowrap;border-radius:8px}
.topnav .drop > a:hover{color:var(--navy);background:var(--navy-tint)}
.topnav .drop > a.on,.topnav .drop:hover > a{color:var(--navy)}
@media (min-width:768px) and (max-width:1099px){ .topnav .drop > a{padding:0 9px;font-size:.84rem} }

/* ==========================================================================
   হোম হালকা করা — মেপে দেখা গিয়েছিল ফোনে ২,৮৪১px (সাড়ে তিন পর্দা)
   ⚠️ কিছুই মুছে ফেলা হয়নি — শুধু ফোনে কম দেখিয়ে বাকিটা নিজ নিজ পাতায়।
   ========================================================================== */
@media (max-width:759px){
  /* জরুরি নম্বর — ৪টি এক সারিতে, খাড়া সাজানো (আগে ২×২ বড় কার্ড, ২৫২px) */
  .emrow{grid-template-columns:repeat(4,1fr);gap:7px}
  .emcard{flex-direction:column;gap:5px;padding:9px 4px;text-align:center;min-height:0}
  .emcard .ic,.emcard svg{width:24px;height:24px}
  /* ⚠️ .66rem = ১০.৫px, মেপে ধরা পড়ল — .72rem (১১.৫px) রেখেও চারটি এক সারিতে আঁটে */
  .emcard .tx b{font-size:.72rem;line-height:1.22;overflow-wrap:anywhere}
  .emcard .tx .no{font-size:.95rem}
  /* হিরোর ছবি ফোনে কম উঁচু */
  .hero2 .art2{min-height:120px}
  .hero2 .txt{padding:16px 15px}
  .hero2 h1{font-size:1.45rem}
  /* জনপ্রিয় সেবা — ফোনে কম্প্যাক্ট (গ্রিড ১৮০px → ১২৭px, লেবেল ছোট করা হয়নি, owner ২০২৬-০৯-১২)
     min-height বাদ: টাইল এখন নিজের কন্টেন্ট যতটুকু চায় ততটুকুই উঁচু। */
  .svcgrid{gap:7px;margin-top:7px}
  .svc{min-height:0;padding:7px 3px;gap:4px}
  .svc svg{width:26px;height:26px}
}
/* ফোনে যেসব অংশ লুকানো, বড় পর্দায় স্বাভাবিক */
@media (min-width:760px){ .hero2 .art2{min-height:190px} }

/* 🐞 `.only-desk{display:none}` ছিল, কিন্তু বড় পর্দায় ফেরানো হতো **শুধু**
   `.iconbtn.only-desk` ও `.topsearch.only-desk`-কে। ফলে সাধারণ `<div class="only-desk">`
   মোড়ক ডেস্কটপেও লুকানো থেকে যেত — মেপে ধরা পড়ল হোমে ঘোষণার ৩টি কার্ডের ১টিই
   দেখাচ্ছিল, আর হিরোর সার্চ-ব্লকও অদৃশ্য ছিল। */
@media (min-width:768px){
  div.only-desk{display:block}
}

/* হিরোতে "আপনি এখন কোন ওয়ার্ডে" — এক লাইনের ছোট চিপ */
.wardchip{display:inline-flex;align-items:center;gap:7px;margin-top:10px;min-height:40px;
  padding:0 12px;border-radius:99px;cursor:pointer;font:inherit;font-size:.82rem;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);max-width:100%}
.wardchip b{color:var(--navy);font-weight:800;white-space:nowrap}
.wardchip > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wardchip .ic{width:15px;height:15px;flex:none}
.wardchip .ic:first-child{color:var(--blood)}
.wardchip .ic:last-child{color:var(--ink-faint)}
@media (hover:hover){.wardchip:hover{border-color:var(--primary);color:var(--ink)}}

/* ==========================================================================
   "আজ" স্ট্রিপ ও জরুরি নম্বর — এক লাইনে, ছোট করে
   ⚠️🐞 আসল কারণ যা মেপে ধরা পড়ল: জরুরি কার্ডের SVG-তে width/height **অ্যাট্রিবিউট
   নেই**, আর মাপ বাঁধা ছিল শুধু `.emcard .ic`-এ (আমার SVG-তে `ic` ক্লাস নেই) এবং
   ফোনের মিডিয়া-নিয়মে। ফলে বড় পর্দায় SVG কার্ড জুড়ে টেনে বিশাল হয়ে যেত।
   এখন `.emcard svg` সব মাপেই বাঁধা।
   ========================================================================== */

/* --- আজ: নামাজ ও ময়লার গাড়ি পাশাপাশি এক লাইনে --- */
.today{flex-direction:row;flex-wrap:wrap;gap:8px}
.today-row{width:auto;flex:1 1 220px;min-height:52px;padding:8px 11px}
.today-row .tx b{font-size:.86rem}
.today-row .tx small{font-size:.74rem}
.today-row .val{font-size:1.05rem}
/* সরু পর্দাতেও এক লাইনে — জায়গা বাঁচাতে ছোট উপ-লেখা ও তীর বাদ,
   শুধু আসল তথ্যটুকু (কী + কখন) থাকে */
@media (max-width:559px){
  .today-row{flex:1 1 0;min-width:0;padding:8px 9px;gap:7px}
  /* ⚠️ `.today-row small` কাজ করেনি — মূল নিয়ম `.today-row .tx small` (specificity বেশি)।
     উপ-লেখাটা দরকারি ("১ ঘণ্টা ৩৯ মিনিট পরে"), তাই লুকাই না — শুধু এক লাইনে বাঁধি */
  .today-row .tx small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.72rem}
  .today-row .sq{width:30px;height:30px;border-radius:9px}
  .today-row .sq .ic{width:16px;height:16px}
  .today-row .tx b{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .today-row .val{font-size:.9rem}
  /* সরু পর্দায় AM/PM বাদ — "১২:০২" যথেষ্ট, আর তাতে উপ-লেখার জন্য ~২০px জায়গা মেলে */
  .today-row .val small{display:none}
  .today-row .val.sm{display:none}
  /* ⚠️ সরু পর্দায় `.val.sm` পুরো লুকানো — তাতে জরুরি ঘরের **কয়টি খবর** ব্যাজটিও
     উধাও হয়ে যেত, অথচ ওটাই বলে দেয় লেখাটা বদলাবে। তীরটি বাদ, ব্যাজটি থাক। */
  .today-row.alert .val.sm{display:flex;align-items:center}
  .today-row.alert .val.sm .ic{display:none}
}

/* --- জরুরি নম্বর: চারটি এক সারিতে, ছোট ট্যাবের মতো (সব মাপে) --- */
.emrow{grid-template-columns:repeat(4,1fr);gap:8px}
.emcard{flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:9px 5px;min-height:0;text-align:center}
.emcard svg,.emcard .ic{width:22px;height:22px;flex:none}
.emcard .tx{min-width:0;width:100%}
.emcard .tx b{font-size:.72rem;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.emcard .tx .no{font-size:1rem;line-height:1.2}
@media (min-width:760px){
  .emcard{flex-direction:row;gap:9px;padding:10px 12px;text-align:start}
  .emcard svg,.emcard .ic{width:26px;height:26px}
  .emcard .tx b{font-size:.76rem}
  .emcard .tx .no{font-size:1.15rem}
}
[data-mode="big"] .emcard .tx b{font-size:.86rem}
[data-mode="big"] .emcard .tx .no{font-size:1.3rem}

/* 📏 ফোনে জরুরি-সারিটা যতটা সম্ভব ছোট — মেপে ~১১০px → ~৫৩px → এখন **~৩০px**।
   ⚠️ চারটি জিনিস না করলে হয় না —
   (১) `.no` inline ছিল, তাই প্যারেন্টের ২২.৫px line-box উচ্চতা নিত (নিজের
       line-height কাজ করত না) → `display:block` দিলে নিজেরটা চলে;
   (২) `1fr` = `minmax(auto,1fr)`, লম্বা নম্বরের min-content কলাম চওড়া করে
       দিত → ৪র্থ কার্ড পর্দার বাইরে কাটা পড়ত। `minmax(0,1fr)` + নম্বরের
       fluid font-size দিলে চারটিই সমান ও পুরো দেখা যায়।
   (৩) ⭐ ৫৩ → ৩০ করার আসল চাবি: **আইকন নিজের একটা লাইন খেয়ে ফেলছিল**
       (১৬px + ২px গ্যাপ = ১৮px)। `.tx{display:contents}` দিলে নাম ও নম্বর
       সরাসরি কার্ডের flex-সন্তান হয়ে যায় — তখন আইকন ও নাম **এক লাইনে**
       বসে, আর নম্বর `flex-basis:100%` দিয়ে নিজের লাইনে নামে।
   (৪) নম্বরটাই আসল তথ্য, তাই তার মাপ **কমানো হয়নি** — সে পুরো কার্ড-প্রস্থ
       পায় বলেই ছোট না করে চলে। ছোট করা হয়েছে শুধু আইকন, নাম ও প্যাডিং। */
@media (max-width:759px){
  /* ফোনে চারটি কার্ড **এক সারিতে**, যতটা সম্ভব কম উচ্চতায় (owner ২০২৬-০৯-১২)।
     ⚠️ নম্বরের মাপ আগে `clamp(9.5px,4vw-3.1px,16px)` ছিল — তাতে "৯৯৯" বড় আর
        ১১ অঙ্কের নম্বরগুলো ছোট হয়ে সারিটা অসমান দেখাত। মেপে: ৩৭৫px-এ ঘর ~৭৬px,
        ১১ অঙ্ক ১২px-এ লাগে ~৬৩px — অর্থাৎ **স্থির ১২px-এ চারটিই আঁটে**।
     ⚠️ `.tx{display:contents}` — নাম ও নম্বর সরাসরি কার্ডের flex-আইটেম হয়, তাই
        আইকন+নাম এক লাইনে আর নম্বর নিজের লাইনে; এটাই উচ্চতা কম রাখার আসল চাবি।
     ⚠️ উচ্চতা আরও কমাতে ফোনে সীমানা-রেখা বাদ (হালকা ছায়াই কার্ড বোঝায়),
        প্যাডিং ১px, line-height ১ — মেপে ৩০px → ~২৫px। */
  .emrow{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  /* owner ২০২৬-০৯-১৩: কোণা আরও ছোট — ৯px → ৩px (ঘরের নিয়ম) */
  .emcard{flex-flow:row wrap;align-items:center;justify-content:center;
    gap:0 3px;padding:1px 4px;min-width:0;min-height:0;border:0;border-radius:3px;
    box-shadow:0 1px 3px rgba(20,40,32,.10)}
  .emcard svg,.emcard .ic{width:12px;height:12px;padding:0;background:none;border-radius:0;flex:none}
  .emcard .tx{display:contents}
  /* ⚠️ নামটা আগে `flex:1 1 0` + `text-align:start` ছিল — তাতে ঘরটা আইকনের পরের
     পুরো জায়গা দখল করত, ফলে লেখা বাঁ-ঘেঁষা দেখাত (নম্বরটা তবু সেন্টারেই ছিল,
     কারণ ওটা `flex-basis:100%` নিয়ে নিজের লাইনে বসে)। `flex:0 1 auto` দিলে ঘরটা
     লেখার মাপেই থাকে, আর কার্ডের `justify-content:center` আইকন+নাম জোড়াটাকে
     মাঝে বসায়। `min-width:0` রাখা হয়েছে, তাই লম্বা নামে ellipsis আগের মতোই চলে।
     owner ২০২৬-০৯-১৩ */
  .emcard .tx b{flex:0 1 auto;min-width:0;font-size:.72rem;line-height:1;text-align:center;
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .emcard .tx .no,[data-mode="big"] .emcard .tx .no{flex:1 0 100%;display:block;
    white-space:nowrap;line-height:1;font-size:.75rem;letter-spacing:-.2px;
    font-variant-numeric:tabular-nums}
}

/* ডেস্কটপে সব সেবা (৩৫টি) — বেশি কলাম, তাই কার্ড ছোট রাখা হয় */
@media (min-width:1000px){
  .svcgrid{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:9px}
  .svc{min-height:84px;padding:11px 6px;gap:6px}
  .svc svg{width:32px;height:32px}
  .svc b{font-size:.72rem}
}
@media (min-width:1500px){ .svcgrid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))} }

/* ==========================================================================
   ফোনে হিরো এক লাইনে — লেখা বাঁয়ে, কুমিল্লার ছবি ডানে
   ⚠️ আগে উপর-নিচে ছিল (লেখা ১৩৭ + ছবি ১২০ = ২৫৯px)। পাশাপাশি করায় দুটোই
   একসাথে দেখা যায় আর উচ্চতা প্রায় অর্ধেক। জায়গা কম বলে লেখা একটু ছোট।
   ========================================================================== */
@media (max-width:759px){
  .hero2{grid-template-columns:1fr 118px;align-items:stretch}
  .hero2 .txt{padding:13px 12px;display:flex;flex-direction:column;justify-content:center;min-width:0}
  .hero2 h1{font-size:1.12rem;line-height:1.25;overflow-wrap:anywhere}
  .hero2 .sub{font-size:.8rem;margin-top:2px}
  .hero2 .art2{min-height:0}
  /* ওয়ার্ডের চিপ — সরু জায়গায় লেখা কাটবে, তাই ellipsis ও ছোট মাপ */
  .hero2 .wardchip{margin-top:8px;min-height:36px;padding:0 10px;font-size:.74rem;gap:5px}
  .hero2 .wardchip .ic{width:13px;height:13px}
}
@media (max-width:349px){
  .hero2{grid-template-columns:1fr 96px}
  .hero2 h1{font-size:1.02rem}
}

/* ৩৮৯px-এর নিচে চিপে "আপনার এলাকা" বাদ — ওয়ার্ডের নামটাই যেন পুরো দেখা যায় */
@media (max-width:349px){ .wardchip .pre{display:none} }

/* ৩৫৯px-এর নিচে "আজ" সারি দুটির লেখা ৪–১৪px-এর জন্য কেটে যাচ্ছিল
   (মেপে দেখা: "আজ ময়লার গাড়ি আসবে" দরকার ১০৭px, জায়গা ছিল ৯৩px)।
   ⚠️ লেখা ছোট করা যাবে না (১১.৫px-এর নিচে নামে), তাই ফাঁক ও প্যাডিং কমিয়ে জায়গা বের করা */
@media (max-width:359px){
  .today-row{padding:8px 6px;gap:5px}
  .today-row .sq{width:26px;height:26px;border-radius:8px}
  .today-row .sq .ic{width:14px;height:14px}
}
@media (max-width:359px){
  .today-row .tx b .pre{display:none}
  .today-row .tx small{font-size:.72rem}   /* ১১.২ → ১১.৫px */
}

/* ==========================================================================
   হিরোতে নগর ভবনের আসল ছবি
   ⚠️ ছবিটি হাতে-আঁকা HEROART-এর **উপরে** বসে। ছবির নিজস্ব অস্বচ্ছ পটভূমি
   আছে, তাই নামার আগে নিচের আঁকা ছবিটা ঝিলিক দিয়ে দেখা যায় না; আর ছবি
   একেবারেই না এলে JS নিজেকে সরিয়ে নেয় → আঁকা ছবিটাই থেকে যায়।
   ========================================================================== */
.hero2 .art2 .nbphoto{position:absolute;inset:0;display:block;z-index:1}
.hero2 .art2 .nbphoto img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:var(--surface-2)}
/* ফোনে ঘরটা খাড়া ও সরু — সাইনবোর্ড যেন মাঝখানে পড়ে */
.hero2 .art2 .nbphoto img{object-position:50% 62%}
@media (min-width:760px){ .hero2 .art2 .nbphoto img{object-position:50% 50%} }

/* ⚠️ ৭৬০–৮১৯px — একটা ফাঁক: দুই-কলামের নিয়ম ৭৫৯px পর্যন্ত, ডেস্কটপের নিয়ম ৮২০px থেকে।
   মাঝের এই টুকুতে হিরো এক কলাম, ছবির ব্যান্ড ৭১১×১৯০ (অনুপাত ৩.৭) — ছবির অনুপাত ১.৬৯,
   তাই cover-এ উচ্চতার মাত্র ৪৫% দেখা যেত আর "নগর ভবন" সাইনবোর্ডটাই কেটে যেত।
   ⚠️ মিডিয়া-কোয়েরি স্ক্রলবারসহ প্রস্থ দেখে (৭৬৮), কিন্তু clientWidth ৭৫৩ — এই
   পার্থক্যেই ফাঁকটা এতদিন চোখে পড়েনি।
   সমাধান: ব্যান্ড উঁচু (৬২% দেখা যায়) + নিচ ঘেঁষে বসানো, কারণ সাইনবোর্ড ছবির নিচের দিকে। */
@media (min-width:760px) and (max-width:819px){
  .hero2 .art2{min-height:260px}
  .hero2 .art2 .nbphoto img{object-position:50% 100%}
}

/* ==========================================================================
   ডার্ক মোডে হেডারের ওয়ার্ড-চিপ ও আইকন-বোতাম
   🐞 মেপে ধরা (৩৯ পাতার ১৯টিতেই): ডার্কে `--navy` হালকা নীল (#5b8fd6) আর
   `--on-navy` প্রায় কালো (#08131f)। চিপের পটভূমি ছিল `--on-navy` ১৪% —
   অর্থাৎ গাঢ় ওভারলে, যা পটভূমিকে **লেখার রঙের দিকেই** টেনে নিত (৭৯,১২৬,১৮৮)।
   ফল: গাঢ় লেখা × গাঢ়-নীল = **৪.৪৮:১**, দরকার ৪.৫ — চুল পরিমাণে ফেল।
   ⚠️ এটি এতদিন ধরা পড়েনি কারণ আমার স্ক্যানার শুধু `#view`-এর ভেতর দেখত,
   হেডার/ট্যাব-বার বাইরে থেকে যেত। এখন পুরো `body` দেখে।
   সমাধান: ডার্কে ওভারলে **সাদা** — পটভূমি হালকা হয়, গাঢ় লেখা স্পষ্ট হয়।
   ========================================================================== */
@media (max-width:767px){
  :root[data-theme="dark"] .topbar .wardbtn,
  :root[data-theme="dark"] .topbar .iconbtn{
    background:color-mix(in srgb,#fff 24%,transparent);
    border-color:color-mix(in srgb,#fff 38%,transparent)}
}
@media (max-width:767px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .topbar .wardbtn,
  :root:not([data-theme="light"]) .topbar .iconbtn{
    background:color-mix(in srgb,#fff 24%,transparent);
    border-color:color-mix(in srgb,#fff 38%,transparent)}
}

/* ==========================================================================
   কনট্রোল প্যানেলের চেকবক্স ও সুইচ
   🐞 ব্রাউজারের ডিফল্ট চেকবক্স **১৩×১৩px** — আঙুলের জন্য অসম্ভব ছোট, আর
      চোখেও দেখা যায় না যে টিক আছে কি নেই।
   ⚠️ পুরো সারিটি `<label>`, তাই ছোঁয়ার ঘর আসলে ৪৮px+ — কিন্তু **দেখতে**
      কতটুকু, সেটাও গুরুত্বপূর্ণ; নইলে ব্যবহারকারী ঠিক জায়গায় চাপ দিতে ভয় পান।
   ========================================================================== */
.permbox, .cfgbox, .modbox{
  appearance:none;-webkit-appearance:none;flex:none;
  width:26px;height:26px;border-radius:8px;cursor:pointer;
  border:2px solid var(--line);background:var(--surface);
  display:grid;place-items:center;transition:background .15s,border-color .15s}
.permbox:checked, .cfgbox:checked, .modbox:checked{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent}
.permbox:checked::after, .cfgbox:checked::after, .modbox:checked::after{
  content:"";width:9px;height:15px;margin-top:-3px;
  border:solid var(--on-primary);border-width:0 3px 3px 0;transform:rotate(45deg)}
.permbox:disabled, .cfgbox:disabled, .modbox:disabled{opacity:.45;cursor:not-allowed}
@media (hover:hover){
  .permbox:not(:disabled):hover, .cfgbox:not(:disabled):hover, .modbox:not(:disabled):hover{border-color:var(--primary)}
}
/* সারিটি label — ভেতরের লেখা যেন বাছাই করা না যায় (চাপ দিলে টিক পড়বে) */
label.row{user-select:none}
/* পুরো সারিটাই চাপা যায় (label), তবু চেকবক্সের নিজের ছোঁয়ার ঘর ৪৪px —
   ফারায়েজের সুইচে যে কৌশল, এখানেও তাই: অদৃশ্য বাড়তি জায়গা */
.permbox, .cfgbox, .modbox{position:relative}
.permbox::before, .cfgbox::before, .modbox::before{
  content:"";position:absolute;left:-9px;right:-9px;top:50%;
  transform:translateY(-50%);height:44px}

/* ---------- ব্রাউজারে ডাউনলোডের ডাক ----------
   ⚠️ হোমের সবার উপরে বসে, তাই যতটা সম্ভব পাতলা রাখা — নইলে আসল
      বিষয়বস্তু (নামাজের সময়, জরুরি নম্বর) নিচে চলে যেত।
   ⚠️ বন্ধ করার বোতামের ছোঁয়ার ঘর ৪৪px, যদিও আইকন ছোট — ::before দিয়ে
      বাড়ানো, নইলে আঙুলে চাপা কঠিন হতো। */
.dlbar{display:flex;align-items:center;gap:10px;margin-top:12px;margin-bottom:var(--gap);padding:11px 12px;
  background:var(--primary-tint);border:1px solid var(--primary);border-radius:var(--r);
  position:relative}
.dlbar .ic-wrap{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--primary);color:var(--on-primary)}
.dlbar .ic-wrap .ic{width:19px;height:19px}
.dlbar .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.dlbar .tx b{font-size:.95rem;color:var(--ink)}
.dlbar .tx small{font-size:.8rem;color:var(--ink-soft);line-height:1.45}
.dlbar .btn{flex:none}
.dlbar .x{flex:none;background:transparent;border:0;padding:6px;cursor:pointer;
  color:var(--ink-faint);display:grid;place-items:center;position:relative}
.dlbar .x .ic{width:16px;height:16px}
.dlbar .x::before{content:"";position:absolute;inset:-12px;border-radius:50%}
/* ⭐ সীমানা ৩৭৯ নয়, ৩৩৯ — আগে বিবরণটা ≤৩৭৯px-এ লুকানো হতো, ফলে সবচেয়ে
   সাধারণ প্রস্থ ৩৭৫-এও দেখা যেত না। লেখাটা ছোট করায় ৩৭৫-এ এক লাইনে
   আঁটে (মেপে: ৮২→৬৩px), তাই সীমানা নামানো হলো। */
@media (max-width:339px){
  /* এর চেয়ে সরু পর্দায় তবু দুই লাইনে ভাঙে — তখন বিবরণ বাদ, বোতামই আসল */
  .dlbar{gap:8px;padding:10px}
  .dlbar .tx small{display:none}
}

/* ==========================================================================
   হোম ২০২৬-০৮-২৪ — "এখনই করুন" · "আপনার ওয়ার্ড" · "যাচাই করা তথ্য"
   সবই থিম-টোকেনে (light/dark দুটোতেই চলে), নতুন রঙ নেই
   ========================================================================== */
.qacts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:var(--gap)}
@media (min-width:760px){ .qacts{grid-template-columns:repeat(4,1fr)} }
.qact{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-m);padding:12px;box-shadow:var(--shadow);cursor:pointer;text-decoration:none;color:inherit;
  transition:transform .15s,box-shadow .15s,border-color .15s}
@media (hover:hover){ .qact:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-lg);border-color:var(--primary)} }
.qact:active{transform:scale(.98)}
.qact .sq{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.qact .sq .ic{width:21px;height:21px}
.qact .sq.blood{background:linear-gradient(135deg,var(--blood),var(--blood-2))}
.qact .sq.gold{background:linear-gradient(135deg,var(--gold),var(--gold-2))}
.qact .sq.blue{background:linear-gradient(135deg,var(--blue),var(--blue-2))}
.qact .sq.purple{background:linear-gradient(135deg,var(--purple),var(--purple-2))}
.qact .tx{min-width:0}
.qact .tx b{display:block;font-size:.85rem;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.qact .tx small{display:block;font-size:.72rem;color:var(--ink-faint);line-height:1.3;overflow-wrap:anywhere}
@media (max-width:379px){
  /* ৩২০–৩৭৯px: দুই কলামে বিবরণসহ চাপাচাপি হয় — বিবরণ বাদ, কাজের নামই আসল */
  .qact{gap:8px;padding:10px}
  .qact .sq{width:36px;height:36px}
  .qact .tx small{display:none}
}

/* 📏 ফোনে "এখনই করুন" কমপ্যাক্ট — ২×২ (১২৬px) → এক সারিতে চারটি (৫৫px),
   সেকশনসহ ১৫৮px → ৮৫px। ডেস্কটপে আগে থেকেই চারটি এক সারিতে ছিল, তাই
   ফোনেও একই বিন্যাস। ⚠️ `minmax(0,1fr)` — নইলে লম্বা লেখার min-content
   কলাম চওড়া করে সারিটা পর্দার বাইরে ঠেলে দেয় (জরুরি-সারিতে যা হয়েছিল)। */
@media (max-width:759px){
  .qacts{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
  .qact{flex-direction:column;gap:3px;padding:5px 3px;min-width:0;text-align:center}
  .qact .sq{width:28px;height:28px;border-radius:9px}
  .qact .sq .ic{width:16px;height:16px}
  .qact .tx{width:100%}
  .qact .tx b{font-size:.7rem;line-height:1.1;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .qact .tx small{display:none}
}
.wardareas{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.wardareas .ar{font-size:.78rem;font-weight:700;padding:5px 11px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft)}

/* ============================================================
   লগইন পর্দার কার্ড (owner ২০২৬-০৯-১০)
   মাদার কার্ড হালকা ধূসর · প্রতিটি ইনপুট সাদা · বর্ডার গাঢ় কালো।
   ⚠️ শুধু `.lgcard`-এর ভেতরে — গ্লোবাল .card/.inp অক্ষত।
   ============================================================ */
.lgcard{background:#eceff3;border:1px solid #d3d9e0}
.lgcard .inp{background:#fff;border:1.5px solid #0b0f14;color:#0b0f14}
.lgcard .inp::placeholder{color:#94a3b8}
.lgcard .inp:focus{border-color:#0b0f14;box-shadow:0 0 0 3px rgba(11,15,20,.15)}
.lgcard select.inp{background-color:#fff}
.lgcard .hint,.lgcard label{color:#0b0f14}
.lgcard .hint{color:#64748b}
.lgcard input[type=checkbox]{accent-color:#0b0f14}
/* লগইনের চার পথ (owner ২০২৬-০৯-১৩): "অথবা" রেখা + Google বোতামের ঘর।
   ⚠️ Google-এর iframe-বোতাম নিজের প্রস্থ নেয় — ঘরটি flex-center, তাই ফোনে মাঝখানে। */
.lgor{display:flex;align-items:center;gap:10px;margin:11px 0 9px;color:#64748b;font-size:.78rem}
.lgor::before,.lgor::after{content:"";flex:1;height:1px;background:#cbd5e1}
.gsiwrap{display:flex;justify-content:center;min-height:44px}
.gsiwrap .hint{align-self:center}
/* প্রোফাইল ছবি (Google/আপলোড) গোল অ্যাভাটারের ভেতরে — আদ্যক্ষরের জায়গাটাই নেয় */
.av>img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
/* অ্যাপ-বারের প্রোফাইল বোতামে ছবি — বোতামের মাপ একই থাকে, ভেতরে গোল ছবি */
.iconbtn.has-pic{padding:0}
.iconbtn .avimg{width:28px;height:28px;border-radius:50%;object-fit:cover;display:block}

/* ============================================================
   রক্তের অনুরোধ পাতা — #/blood/new  (owner ২০২৬-০৯-১২)
   কমপ্যাক্ট ফর্ম: ৩৭৫px-এ পুরো ফর্ম এক পর্দায় ধরানোই লক্ষ্য।
   ⚠️ সব কিছু `.bnew`-এর ভেতরে স্কোপড — গ্লোবাল .card/.f/.frow/.bg/.row অক্ষত।
   কী বদলালো ও কেন:
   ১) `.bg{aspect-ratio:1}` মানে গ্রুপের ঘর বর্গাকার → ৩৭৫px-এ ৮টি ঘরে
      ~১৯০px চলে যেত। এখন নির্দিষ্ট ৪৪px উচ্চতা (≈১০০px বাঁচে)।
   ২) `.frow.c2` কেবল ৬০০px+ এ দুই কলাম হয় — ফোনে প্রতিটি ঘর আলাদা সারিতে
      নেমে ডানপাশ পুরো ফাঁকা পড়ত। এখানে ফোনেও পাশাপাশি।
   ৩) `align-items:end` — দুই ঘরের লেবেল সমান লম্বা না হলেও **ইনপুট দুটি
      এক লাইনে** বসে (owner-এর এক-সারি-align হার্ড রুল)।
   ============================================================ */
.bnew .card{padding:11px}
.bnew .bg-grid{gap:7px}
.bnew .bg{aspect-ratio:auto;height:44px;font-size:1.02rem;border-width:1.5px;border-radius:var(--r-s)}
.bnew .f>label{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnew .frow{gap:9px}
.bnew .frow.c2{grid-template-columns:1fr 1fr;align-items:end}
.bnew .frow.bags{grid-template-columns:92px 1fr;align-items:end}
.bnew .fblk{margin-top:10px}
.bnew .chip{min-height:36px;padding:7px 9px;font-size:.78rem}
.bnew #bgReach{margin-top:6px;font-size:.78rem;line-height:1.45}
.bnew .btn.big{height:46px;font-size:.97rem;border-radius:var(--r-m)}
.bnew .note{font-size:.76rem;line-height:1.5;margin-top:8px}
.bnew .sect{margin:12px 0 7px}
.bnew .rows{gap:7px}
.bnew .row{padding:7px 10px}
.bnew .row .sq{width:32px;height:32px;border-radius:9px}
.bnew .poster{padding:16px}
@media (min-width:600px){
  .bnew .frow.bags{grid-template-columns:110px 1fr}
  .bnew .bg{height:48px}
}
/* বড় পর্দায় ৮টি গ্রুপই এক সারিতে — ৪ কলামে ঘরগুলো অকারণে বিশাল দেখাত */
@media (min-width:760px){ .bnew .bg-grid{grid-template-columns:repeat(8,1fr)} }

/* ============================================================
   জরুরি সেবা (#/emergency) ও সব সেবা (#/more) — নতুন সাজ (owner ২০২৬-০৯-১২)
   ⚠️ সব কিছু `.emg` / `.svcpg` র‍্যাপারের ভেতরে **স্কোপড** — গ্লোবাল
      .tile/.row/.chip/.sect অন্য ৩৬টি পাতায় এক চুলও নড়ে না।
   কী বদলালো ও কেন:
   ১) জরুরি নম্বর আগে ৩-কলাম টাইলে ছিল — নাম দুই লাইনে ভেঙে যেত, ডেটাবেসের
      “কী কাজে” ঘরটা দেখানোই হতো না, আর ১৩টা বাক্সই একই লাল। এখন এক-সারির
      কমপ্যাক্ট কল-কার্ড: বিভাগ-রঙের আইকন · নাম · নম্বরের পিল · কী কাজে · সবুজ কল।
   ২) ৯৯৯ ও অ্যালার্ট — দুটি সবচেয়ে বড় কাজ — উপরে পাশাপাশি, **সমান উচ্চতায়**
      (grid 1fr 1fr; দুটোরই min-height এক, তাই একটাও উঁচু-নিচু হয় না)।
   ৩) সব সেবা পাতার ৩৮টি টাইল বিভাগে ভাগ + খোঁজার ঘর; টাইলের প্যাডিং/আইকন
      একটু ছোট করায় প্রতি সারিতে ~১৫px বাঁচে (৩৭৫px-এ মেপে দেখা)।
   ============================================================ */

/* ---------- জরুরি সেবা ---------- */
.emg .emhero{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.emg .emh{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:86px;padding:10px 8px;border:0;border-radius:var(--r-l);cursor:pointer;text-align:center;
  color:#fff;text-decoration:none;box-shadow:var(--shadow);
  transition:transform .16s cubic-bezier(.2,.8,.3,1.4),box-shadow .16s,filter .16s}
.emg .emh .ic{width:23px;height:23px}
/* ⚠️ flex+align-items:center-এ শিশুর চৌড়া max-content হয় — max-width না দিলে
   “অ্যাম্বুলেন্স” বোতামের বাইরে কেটে যায় (৩৭৫ px-এ মেপে ধরা) */
.emg .emh>*{max-width:100%}
.emg .emt{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%}
/* বড় পর্দায় দুটো বোতাম শেকড়ে চৌড়া হয়ে ভেতরটা ফাঁকা পড়ে থাকত — তাই ৬৪৫px+ এ
   আইকন ও লেখা পাশাপাশি, উচ্চতাও কম (১২৮৬ px-এ মেপে ধরা) */
@media (min-width:645px){
  .emg .emh{flex-direction:row;gap:13px;min-height:72px;text-align:left}
  .emg .emh .ic{width:29px;height:29px}
}

.emg .emh b{font-weight:800;line-height:1.15}
.emg .emh small{font-size:.72rem;font-weight:600;opacity:.93;line-height:1.28;overflow-wrap:anywhere}
.emg .emh.call{background:linear-gradient(135deg,#e0484c,#a11d1d)}
.emg .emh.call b{font-size:1.6rem;letter-spacing:1px}
.emg .emh.sos{background:linear-gradient(135deg,#d97a2b,#a3441c)}
.emg .emh.sos b{font-size:1.02rem}
@media (hover:hover){.emg .emh:hover{transform:scale(1.04);box-shadow:var(--shadow-lg);filter:brightness(1.06)}}
.emg .emh:active{transform:scale(.97)}
/* অ্যালার্ট বোতামটা "কিছু পাঠায়" — মৃদু স্পন্দন সেটাই বোঝায়; গতি বন্ধ থাকলে চলে না */
.emg .emh.sos .ic{animation:emp 2.6s ease-in-out infinite}
@keyframes emp{0%,72%,100%{transform:scale(1)}82%{transform:scale(1.16)}}
@media (prefers-reduced-motion:reduce){.emg .emh.sos .ic{animation:none}}

.emg .emnote{display:flex;align-items:flex-start;gap:6px;margin-top:7px;
  font-size:.76rem;line-height:1.45;color:var(--ink-faint)}
.emg .emnote .ic{width:14px;height:14px;flex:none;margin-top:2px;color:var(--warn)}

.emg .emlist{display:grid;gap:7px;margin-top:9px}
@media (min-width:640px){.emg .emlist{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.emg .emlist{grid-template-columns:repeat(3,1fr)}}
.emg .emcall{display:flex;align-items:center;gap:9px;min-width:0;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:7px 8px 7px 9px;
  box-shadow:var(--shadow);transition:transform .13s,border-color .13s,box-shadow .13s}
@media (hover:hover){.emg .emcall:hover{transform:translateY(-2px);border-color:var(--blood);box-shadow:var(--shadow-lg)}}
.emg .emcall:active{transform:scale(.985)}
.emg .emcall .sq{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}
.emg .emcall .sq .ic{width:18px;height:18px}
.emg .emcall .tx{min-width:0;flex:1}
.emg .emcall .tx b{display:flex;align-items:center;gap:5px;font-size:.87rem;font-weight:700;
  line-height:1.25;overflow-wrap:anywhere}
.emg .emcall .tx b .tag{padding:1px 6px}
.emg .emcall .tx b .tag .ic{width:11px;height:11px}
.emg .emcall .tx small{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;
  font-size:.75rem;line-height:1.35;color:var(--ink-faint)}
/* নম্বরটাই আসল কাজ — পিল করে দিলে এক নজরে চোখে পড়ে, আর “কী কাজে” লেখা থেকে আলাদা থাকে */
.emg .emn{font-style:normal;font-weight:800;font-size:.76rem;letter-spacing:.2px;white-space:nowrap;
  color:var(--blood-ink);background:var(--blood-tint);padding:1px 8px;border-radius:999px}
.emg .emc{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#2fa863,#1f7d47);box-shadow:0 2px 8px rgba(31,125,71,.35)}
.emg .emc .ic{width:18px;height:18px}
/* অ্যাডমিন "উপরে বড় করে দেখান" দিলে — সোনালি জমিন + তারকা */
.emg .emcall.up{border-color:color-mix(in srgb,var(--gold) 55%,transparent);
  background:linear-gradient(180deg,var(--gold-tint),var(--card) 70%)}

/* ---------- সব সেবা ---------- */
.svcpg .tiles{gap:8px}
.svcpg .tile{padding:9px 5px;gap:5px}
.svcpg .tile .sq{width:36px;height:36px;border-radius:11px}
.svcpg .tile .sq .ic{width:20px;height:20px}
.svcpg .tile b{font-size:.76rem}
.svcpg .tile small{font-size:.74rem}
.svcpg .sect{margin:13px 0 7px}
.svcpg .sect h2{font-size:.98rem}
.svcpg .rows{gap:7px}
.svcpg .rows .row{padding:8px 10px}
.svcpg .rows .row .sq{width:34px;height:34px;border-radius:10px}
:root[data-font="big"] .svcpg .tile b{font-size:.84rem}

/* ⚠️ এখানে একটি **অনাথ `}`** পড়ে থাকত (পুরোনো এডিটের অবশেষ)। ব্রাউজার অগ্রাহ্য করত, কোনো @media ও আগে বন্ধ হয়নি — কিন্তু থাকলে ফাইলের ব্রেস-যাচাই কখনো মেলানো যায় না। (owner ২০২৬-০৯-২০) */

/* ==========================================================================
   ২৭. সিটির সমস্যা ও অভিযোগ — নিজস্ব ডিজাইন স্তর (cc-*)
   এক ভাষা, পুরো ক্লাস্টারে: সরু হেয়ারলাইন বর্ডার · ছোট ছায়া · বিভাজিত তালিকা
   · পিল ব্যাজ · নেভি হেডার-ব্যান্ড। রঙ সব টোকেন থেকে, তাই আলো/অন্ধকার দুটোতেই ঠিক।
   ⚠️ ক্লিকযোগ্য সারি `<button>` — কীবোর্ড (Enter/Space) নিজে থেকেই চলে,
      নতুন গ্লোবাল হ্যান্ডলার লাগে না।
   ========================================================================== */

/* ---------- হেডার ব্যান্ড ----------
   ⚠️ রঙগুলো আলাদা টোকেনে: আলোয় গাঢ় নেভি ব্যান্ড + সাদা লেখা; অন্ধকারে ঐ নেভি
   টোকেনটাই **উজ্জ্বল নীল** হয়ে যায় (--navy: #5b8fd6) — তখন ব্যান্ডটা পুরো পাতার
   চেয়ে চড়া দেখাত। তাই অন্ধকারে ব্যান্ড গাঢ় পৃষ্ঠ + হালকা লেখা। */
:root{
  --cc-band:linear-gradient(135deg,var(--navy),var(--navy-2));
  --cc-band-ink:var(--on-navy);
  --cc-band-edge:color-mix(in srgb,var(--navy) 35%,transparent);
  --cc-band-line:color-mix(in srgb,var(--on-navy) 26%,transparent);
  --cc-band-fill:color-mix(in srgb,var(--on-navy) 13%,transparent);
  --cc-band-fill2:color-mix(in srgb,var(--on-navy) 24%,transparent);
  --cc-band-soft:color-mix(in srgb,var(--on-navy) 76%,transparent);
  --cc-band-dim:color-mix(in srgb,var(--on-navy) 70%,transparent);
  --cc-band-shadow:0 8px 22px color-mix(in srgb,var(--navy) 24%,transparent);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --cc-band:linear-gradient(135deg,var(--surface),var(--navy-tint));
  --cc-band-ink:var(--ink); --cc-band-edge:var(--line-2); --cc-band-line:var(--line-2);
  --cc-band-fill:var(--surface-2); --cc-band-fill2:var(--navy-tint);
  --cc-band-soft:var(--ink-soft); --cc-band-dim:var(--ink-faint); --cc-band-shadow:var(--shadow);
}}
:root[data-theme="dark"]{
  --cc-band:linear-gradient(135deg,var(--surface),var(--navy-tint));
  --cc-band-ink:var(--ink); --cc-band-edge:var(--line-2); --cc-band-line:var(--line-2);
  --cc-band-fill:var(--surface-2); --cc-band-fill2:var(--navy-tint);
  --cc-band-soft:var(--ink-soft); --cc-band-dim:var(--ink-faint); --cc-band-shadow:var(--shadow);
}
.cc-head{position:relative;display:flex;align-items:center;gap:10px;padding:11px 12px;overflow:hidden;
  border:1px solid var(--cc-band-edge);border-radius:var(--r-l);
  background:var(--cc-band);color:var(--cc-band-ink);box-shadow:var(--cc-band-shadow)}
.cc-head:before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:radial-gradient(currentColor 1px,transparent 1px);background-size:13px 13px}
.cc-head>*{position:relative;z-index:1}
.cc-back{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;cursor:pointer;
  color:inherit;border:1px solid var(--cc-band-line);background:var(--cc-band-fill);
  transition:background .15s ease}
.cc-back:hover{background:var(--cc-band-fill2)}
.cc-back .ic{width:17px;height:17px}
.cc-head-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--cc-band-line);background:var(--cc-band-fill)}
.cc-head-ic .ic{width:21px;height:21px}
.cc-head-tx{min-width:0;flex:1}
.cc-head-tx h1{font-size:1.1rem;font-weight:800;line-height:1.2;margin:1px 0 0}
.cc-head-tx p{margin:2px 0 0;font-size:.77rem;line-height:1.35;color:var(--cc-band-soft)}
.cc-head .cc-eyebrow{color:var(--cc-band-dim)}
.cc-head-end{flex:none;display:flex;align-items:center;gap:6px}

/* ---------- ছোট লেবেল (eyebrow) ---------- */
.cc-eyebrow{display:block;font-size:.7rem;font-weight:800;letter-spacing:.05em;color:var(--ink-faint)}

/* ---------- সংখ্যার পট্টি ---------- */
.cc-kpi{display:flex;margin-top:10px;overflow:hidden;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow)}
.cc-kpi>div{flex:1 1 0;min-width:0;padding:7px 10px;display:flex;flex-direction:column;gap:1px}
.cc-kpi>div+div{border-left:1px solid var(--line)}
.cc-kpi .k{display:flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;color:var(--ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-kpi .k .ic{width:12px;height:12px;flex:none}
.cc-kpi .v{font-size:1.1rem;font-weight:800;line-height:1.15;color:var(--ink)}
.cc-kpi .v small{margin-left:2px;font-size:.7rem;font-weight:700;color:var(--ink-faint)}

/* ---------- প্যানেল ---------- */
.cc-panel{margin-top:10px;overflow:hidden;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow)}
.cc-panel-h{display:flex;align-items:center;gap:9px;padding:8px 11px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface-2),var(--card))}
.cc-panel-h .cc-hic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff}
.cc-panel-h .cc-hic .ic{width:16px;height:16px}
.cc-panel-h .cc-htx{min-width:0;flex:1}
.cc-panel-h h2{font-size:.94rem;font-weight:800;line-height:1.2;color:var(--ink)}
.cc-panel-b{padding:10px 11px}
.cc-panel-b.flush{padding:0}
.cc-panel-b>*+*{margin-top:9px}

/* গুরুত্ব বোঝাতে প্যানেলের বাঁ কিনারায় সরু দাগ — ভেতরের কিছু বদলায় না */
.cc-panel.hot{border-left:3px solid var(--gold)}
.cc-panel.urgent{border-left:3px solid var(--blood)}
/* কমিউনিটির কার্ডে উপরের ছবি — প্যানেল নিজেই কোণা কাটে (overflow:hidden),
   তাই ছবির আলাদা কোণা দরকার নেই; শোকের কালো কভারটি আগের মতোই থাকে */
.cc-panel>.cover{border-radius:0;height:112px}
.cc-panel.is-mourn{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
/* ঘোষণার মূল লেখা — নোটিশে লাইন-ভাঙা অর্থপূর্ণ, তাই pre-line */
.cc-body{font-size:.87rem;line-height:1.55;color:var(--ink-soft);
  white-space:pre-line;overflow-wrap:anywhere}
.cc-body b{color:var(--ink)}

/* ---------- বিভাজিত তালিকা ---------- */
.cc-item{display:flex;width:100%;align-items:center;gap:10px;padding:8px 11px;cursor:pointer;text-align:left;
  border:0;border-top:1px solid var(--line);background:var(--card);font-family:inherit;
  transition:background .15s ease}
.cc-item:first-child{border-top:0}
.cc-item:hover{background:var(--surface-2)}
.cc-item:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.cc-item.plain{cursor:default}
.cc-item.plain:hover{background:var(--card)}
.cc-item.hot{box-shadow:inset 3px 0 0 var(--blood)}
.cc-item .cc-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff}
.cc-item .cc-ic .ic{width:17px;height:17px}
.cc-item .cc-tx{min-width:0;flex:1}
.cc-item .cc-tx b{display:block;font-size:.87rem;font-weight:700;line-height:1.3;color:var(--ink)}
.cc-item .cc-tx small{display:block;margin-top:1px;font-size:.74rem;line-height:1.35;color:var(--ink-faint)}
.cc-item .cc-end{flex:none;display:flex;align-items:center;gap:6px;color:var(--ink-faint)}
.cc-item .cc-end>.ic{width:15px;height:15px}

/* ---------- পিল ব্যাজ ---------- */
.cc-pill{display:inline-flex;align-items:center;gap:4px;flex:none;white-space:nowrap;
  font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft)}
.cc-pill .ic{width:11px;height:11px}
/* ⚠️ `.cc-pill` কখনও শুধু লেবেল, কখনও সত্যিকারের টগল (#/blood-এ `blood.ready`)।
   বোতাম হলে ছোঁয়ার ঘর ছিল ফোনে ৫৫×২৩ — আঙুলে লাগে না। সমাধান `.dlbar .x`-এর
   একই কৌশলে: অদৃশ্য `::before` দিয়ে হিট-এরিয়া বাড়াই — চেহারা compactই থাকে।
   মাপা: নিকটতম অন্য ক্লিকযোগ্য জিনিস ৩৩px দূরে, তাই ৭পিক্সেল বাড়ানো নিরাপদ
   (হিট ৬৯×৩৭)। শুধু `button.cc-pill` — লেবেল-পিলগুলো অটুট। মাপা ২০২৬-০৯-১৯। */
button.cc-pill{position:relative}
button.cc-pill::before{content:"";position:absolute;inset:-7px;border-radius:999px}
.cc-pill.hot{background:var(--blood-tint);color:var(--blood-ink);border-color:color-mix(in srgb,var(--blood) 26%,transparent)}
.cc-pill.ok{background:var(--ok-tint);color:var(--ok-ink);border-color:color-mix(in srgb,var(--ok) 26%,transparent)}
.cc-pill.run{background:var(--warn-tint);color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 26%,transparent)}
.cc-pill.new{background:var(--blue-tint);color:var(--blue-ink);border-color:color-mix(in srgb,var(--blue) 26%,transparent)}

/* ---------- ট্র্যাকিং কোড ---------- */
.cc-code{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:.71rem;font-weight:800;letter-spacing:.05em;padding:2px 8px;border-radius:7px;
  background:var(--navy-tint);color:var(--navy);
  border:1px solid color-mix(in srgb,var(--navy) 22%,transparent)}
.cc-code .ic{width:11px;height:11px}

/* ---------- সেগমেন্ট ফিল্টার ---------- */
.cc-seg{display:flex;gap:0;margin-top:10px;padding:3px;border:1px solid var(--line);
  border-radius:11px;background:var(--surface-2)}
.cc-seg button{flex:1 1 0;min-width:0;height:32px;border:0;border-radius:8px;cursor:pointer;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-family:inherit;font-size:.78rem;font-weight:800;color:var(--ink-soft);
  transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.cc-seg button .ic{width:13px;height:13px}
.cc-seg button.on{background:var(--card);color:var(--primary);box-shadow:0 1px 3px rgba(37,99,235,.14)}

/* ---------- খোঁজার ঘর ---------- */
.cc-search{position:relative;display:flex;align-items:center;margin-top:10px}
.cc-search>.ic{position:absolute;left:11px;width:16px;height:16px;color:var(--ink-faint);pointer-events:none}
.cc-search .inp{width:100%;padding-left:34px}

/* ---------- ধাপ-রেল (ফরমের উপরে) ---------- */
.cc-steps{display:flex;align-items:center;margin-top:10px;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);box-shadow:var(--shadow)}
.cc-steps .s{display:flex;align-items:center;gap:7px;min-width:0}
.cc-steps .n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:.75rem;font-weight:800;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink-faint)}
.cc-steps .n .ic{width:13px;height:13px}
.cc-steps .s.on .n{border-color:transparent;color:var(--on-primary);
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 2px 8px color-mix(in srgb,var(--primary) 38%,transparent)}
.cc-steps .s.done .n{background:var(--ok-tint);color:var(--ok-ink);
  border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.cc-steps .s b{font-size:.76rem;font-weight:700;color:var(--ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-steps .s.on b{color:var(--ink)}
.cc-steps .ln{flex:1 1 0;min-width:10px;height:2px;margin:0 7px;border-radius:2px;background:var(--line)}
.cc-steps .ln.done{background:color-mix(in srgb,var(--ok) 55%,transparent)}
@media (max-width:479px){.cc-steps .s:not(.on) b{display:none}}

/* ---------- অগ্রগতির সরু বার ---------- */
.cc-meter{height:5px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.cc-meter i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--primary),var(--ok));transition:width .3s ease}

/* ---------- সময়রেখা ---------- */
.cc-tl{position:relative;padding-left:25px}
.cc-tl:before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--line)}
.cc-tl .it{position:relative;padding-bottom:12px}
.cc-tl .it:last-child{padding-bottom:0}
.cc-tl .dot{position:absolute;left:-25px;top:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-faint);border:2px solid var(--card);box-shadow:0 0 0 1px var(--line)}
.cc-tl .dot .ic{width:11px;height:11px}
.cc-tl .it.done .dot{background:var(--ok);color:#fff;box-shadow:0 0 0 1px var(--ok)}
.cc-tl .it.now .dot{color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 0 0 1px var(--primary),0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent)}
.cc-tl .it b{display:block;font-size:.85rem;font-weight:700;line-height:1.3;color:var(--ink)}
.cc-tl .it small{display:block;margin-top:1px;font-size:.73rem;color:var(--ink-faint)}
.cc-tl .it p{margin-top:3px;font-size:.8rem;line-height:1.4;color:var(--ink-soft)}

/* ---------- নাম-মান সারি ---------- */
.cc-dl{margin:0}
.cc-dl>div{display:flex;align-items:flex-start;gap:10px;padding:7px 11px;border-top:1px solid var(--line)}
.cc-dl>div:first-child{border-top:0}
.cc-dl dt{flex:none;width:86px;padding-top:1px;font-size:.75rem;font-weight:700;color:var(--ink-faint)}
.cc-dl dd{margin:0;min-width:0;flex:1;font-size:.84rem;font-weight:600;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}

/* ---------- কলআউট ---------- */
.cc-note{display:flex;gap:9px;margin-top:10px;padding:9px 11px;border-radius:var(--r-m);
  font-size:.81rem;line-height:1.45;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);
  box-shadow:inset 3px 0 0 var(--navy)}
.cc-note>.ic{flex:none;width:16px;height:16px;margin-top:2px;color:var(--navy)}
.cc-note b{color:var(--ink)}
.cc-note.hot{background:var(--blood-tint);color:var(--blood-ink);box-shadow:inset 3px 0 0 var(--blood);
  border-color:color-mix(in srgb,var(--blood) 22%,transparent)}
.cc-note.hot>.ic,.cc-note.hot b{color:var(--blood-ink)}
.cc-note.ok{background:var(--ok-tint);color:var(--ok-ink);box-shadow:inset 3px 0 0 var(--ok);
  border-color:color-mix(in srgb,var(--ok) 22%,transparent)}
.cc-note.ok>.ic,.cc-note.ok b{color:var(--ok-ink)}
.cc-note.warn{background:var(--warn-tint);color:var(--warn-ink);box-shadow:inset 3px 0 0 var(--warn);
  border-color:color-mix(in srgb,var(--warn) 22%,transparent)}
.cc-note.warn>.ic,.cc-note.warn b{color:var(--warn-ink)}

/* ---------- গ্রেডিয়েন্ট আইকন-বাক্স ----------
   ⚠️ `.sq`-এর কোনো **বেস** নিয়ম নেই — app.css-এ প্রতিটি জায়গায় (`.tile .sq`,
   `.row .sq` …) আলাদা করে `display:grid;place-items:center` লেখা আছে। নতুন
   র‍্যাপারে ওটা না দিলে বাক্সে শুধু গ্রেডিয়েন্টই বসে, আইকনটা **বাঁ-উপরের কোণে**
   পড়ে থাকে (মেপে ধরা: ৩৪px বাক্সে ১২px করে সরা)। তাই এক জায়গায় সবগুলো। */
.cc-qa .sq,.cc-opt .sq,.cc-drop .sq{display:grid;place-items:center;flex:none;color:#fff}

/* ---------- বাছাইয়ের ঘর ---------- */
.cc-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cc-opt{display:flex;align-items:center;gap:8px;padding:8px 9px;cursor:pointer;text-align:left;font-family:inherit;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.cc-opt:hover{border-color:var(--primary)}
.cc-opt.on{border-color:var(--primary);background:var(--primary-tint);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 22%,transparent)}
.cc-opt .sq{width:32px;height:32px;border-radius:10px}
.cc-opt .sq .ic{width:17px;height:17px}
.cc-opt b{min-width:0;font-size:.8rem;font-weight:700;line-height:1.25;color:var(--ink)}
@media (min-width:600px){.cc-pick{grid-template-columns:repeat(3,1fr)}}

/* ---------- দ্রুত-কাজের কার্ড ---------- */
.cc-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.cc-qa{display:flex;align-items:center;gap:9px;padding:9px 10px;cursor:pointer;text-align:left;font-family:inherit;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);box-shadow:var(--shadow);
  transition:border-color .15s ease,box-shadow .15s ease}
.cc-qa:hover{border-color:var(--primary);box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 18%,transparent)}
.cc-qa .sq{width:34px;height:34px;border-radius:10px}
.cc-qa .sq .ic{width:18px;height:18px}
.cc-qa .tx{min-width:0;flex:1}
.cc-qa b{display:block;font-size:.83rem;font-weight:700;line-height:1.25;color:var(--ink)}
.cc-qa small{display:block;margin-top:1px;font-size:.72rem;color:var(--ink-faint)}

/* ---------- ছবি ---------- */
.cc-drop{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:15px 12px;cursor:pointer;font-family:inherit;
  border:1.5px dashed var(--line-2);border-radius:var(--r-m);background:var(--surface-2);
  transition:border-color .15s ease,background .15s ease}
.cc-drop:hover{border-color:var(--primary);background:var(--primary-tint)}
.cc-drop .sq{width:38px;height:38px;border-radius:12px}
.cc-drop .sq .ic{width:20px;height:20px}
.cc-drop b{font-size:.85rem;font-weight:700;color:var(--ink)}
.cc-drop small{font-size:.73rem;line-height:1.35;text-align:center;color:var(--ink-faint)}
.cc-shot{position:relative;overflow:hidden;border-radius:var(--r-m);border:1px solid var(--line);background:var(--surface-2)}
.cc-shot img{display:block;width:100%;max-height:230px;object-fit:cover}
.cc-shot .x{position:absolute;top:7px;right:7px;width:28px;height:28px;border-radius:9px;border:0;cursor:pointer;
  display:grid;place-items:center;background:rgba(10,18,32,.62);color:#fff}
.cc-shot .x .ic{width:15px;height:15px}

/* ---------- খালি অবস্থা ---------- */
.cc-blank{padding:24px 14px;text-align:center;color:var(--ink-faint)}
.cc-blank>.ic{width:30px;height:30px;color:var(--line-2)}
.cc-blank b{display:block;margin-top:6px;font-size:.9rem;color:var(--ink)}
.cc-blank p{margin-top:3px;font-size:.79rem}

/* ---------- সারি ও বোতাম ---------- */
.cc-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.cc-row>*{min-width:0}
.cc-row .btn{flex:1 1 0}
.cc-tags{display:flex;flex-wrap:wrap;align-items:center;gap:5px}

/* ---------- চওড়া পর্দায় দুই কলাম (অকারণ ফাঁকা নয়) ---------- */
@media (min-width:900px){
  .cc-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-items:start}
  .cc-cols>.cc-panel{margin-top:0}
  .cc-quick{grid-template-columns:repeat(4,1fr)}
}
/* মিটার span — সারির ভেতরে বসলে নিজের লাইন নেয় */
.cc-meter{display:block}
.cc-item .cc-tx .cc-meter{margin-top:5px}

/* ==========================================================================
   গ্লোবাল খোঁজার পরামর্শ-প্যানেল (js/search.js) — owner ২০২৬-০৯-১২
   খোঁজার ঘরে focus করলেই নিচে ঝুলে পড়ে: সাম্প্রতিক খোঁজা · পরামর্শ · সরাসরি ফল।
   ⚠️ `.hsearch`/`.bigsearch` দুটোতেই `overflow:hidden` — তাই প্যানেল ওদের
      **ভেতরে** বসানো যায় না (কেটে যেত)। `<body>`-র সন্তান হিসেবে position:fixed,
      জায়গা মাপা হয় getBoundingClientRect() দিয়ে।
   ⚠️ z-index ১২০ — topbar(৭০)/tabbar(৭৫)/ড্রপ-মেনু(৮০)-র উপরে, scrim(২০০)-এর নিচে।
   ⚠️ `.sq`-র কোনো বেস নিয়ম নেই — তাই grid+center নিজে দিতে হয়, নইলে আইকন কোণায়।
   ========================================================================== */
.ss-pan{position:fixed;z-index:120;display:none;flex-direction:column;box-sizing:border-box;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;overflow:hidden;
  box-shadow:0 16px 40px rgba(37,99,235,.24),0 2px 8px rgba(37,99,235,.14)}
.ss-pan.on{display:flex}
.ss-scr{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:5px 0}
.ss-hd{display:flex;align-items:center;gap:5px;padding:5px 10px 3px;font-size:.72rem;font-weight:800;color:var(--ink-faint)}
.ss-hd .ic{width:13px;height:13px;color:var(--primary)}
.ss-hd .sp{margin-inline-start:auto}
.ss-clr{border:0;background:none;color:var(--primary);font:inherit;font-size:.72rem;font-weight:800;cursor:pointer;padding:2px 4px}
.ss-it{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;padding:7px 10px;
  border:0;border-top:1px solid var(--line);background:none;text-align:start;cursor:pointer;
  font:inherit;color:var(--ink);transition:background .15s ease}
.ss-it:first-child{border-top:0}
.ss-it:hover,.ss-it.on{background:var(--primary-tint)}
.ss-it>.sq{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;color:#fff}
.ss-it>.sq .ic{width:15px;height:15px}
.ss-it>.ic{width:15px;height:15px;flex:none;color:var(--ink-faint)}
.ss-tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.ss-tx b{font-size:.86rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-tx small{font-size:.74rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-tg{flex:none;font-size:.7rem;font-weight:800;color:var(--primary);background:var(--primary-tint);
  border-radius:4px;padding:2px 6px;white-space:nowrap}
.ss-call{flex:none;display:flex;align-items:center}
.ss-all{border-top:1px solid var(--line-2);background:var(--surface-2)}
.ss-non{padding:13px 12px;text-align:center;color:var(--ink-soft);font-size:.84rem}
.ss-non .ic{width:15px;height:15px;vertical-align:-2px;color:var(--ink-faint)}
/* পরামর্শের চিপ — গ্রেডিয়েন্ট + hover-এ জুম (owner-এর বোতাম-নিয়ম) */
.ss-chips{display:flex;flex-wrap:wrap;gap:5px;padding:3px 10px 8px}
.ss-chips button{display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;height:28px;padding:0 9px;
  border:0;border-radius:3px;cursor:pointer;font-weight:800;font-size:.76rem;line-height:1;color:var(--on-primary);
  background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 2px 7px rgba(37,99,235,.34);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.4),box-shadow .2s ease,filter .2s ease}
.ss-chips button:hover{transform:scale(1.13);box-shadow:0 7px 17px rgba(37,99,235,.5);filter:brightness(1.08)}
.ss-chips button:active{transform:scale(1.04)}
.ss-chips button .ic{width:12px;height:12px}
/* সাম্প্রতিক খোঁজার তালিকা — এক ফ্রেমে সমান সারি।
   ⚠️ প্রতিটি `.row` আলাদা কার্ড (ছায়া+বর্ডার+৯px gap) হলে শুধু কয়েকটা শব্দের
      জন্য তিন কার্ড = অকারণ উচ্চতা; তাই এক ফ্রেম, ভেতরে সরু বিভাজক। */
.ss-recs{gap:0;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;overflow:hidden;box-shadow:0 2px 8px rgba(37,99,235,.10)}
.ss-recs>.row{border:0;border-top:1px solid var(--line);border-radius:0;
  box-shadow:none;background:none;padding:6px 10px}
.ss-recs>.row:first-child{border-top:0}
@media (hover:hover){.ss-recs>.row:hover{transform:none;background:var(--primary-tint)}}
.ss-recs>.row .sq{width:28px;height:28px;border-radius:7px}
.ss-recs>.row .sq .ic{width:14px;height:14px}
.ss-recs>.row .tx b{font-size:.86rem}
/* ঝুলন্ত প্যানেলের ভেতরে ফ্রেমের দরকার নেই — বাক্সটাই ফ্রেম */
.ss-pan .ss-recs{background:none;border:0;border-radius:0;box-shadow:none}
.ss-scr>.note{margin:2px 10px 8px}
/* ফোনে সারিটা লেখার জন্যই — "কল" বারটা আইকনে নেমে আসে (owner: বার কখনো
   দ্বিতীয় লাইনে নয়, দরকারে আইকন)। `font-size:0`-এ লেবেল লুকায়, আইকনের
   নিজের width/height আছে বলে সে টিকে থাকে। */
@media (max-width:560px){
  .ss-tg{max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ss-call .btn{font-size:0;gap:0;padding:0;width:34px;justify-content:center}
  .ss-call .btn .ic{width:16px;height:16px}
}
.ss-call .btn{height:30px;padding:0 10px;border-radius:3px;font-size:.78rem}


/* ==========================================================================
   ডিজাইন-পাস ২০২৬-০৯-১২ — মাপা সমস্যা, মাপা সমাধান
   ⚠️ ফাইলের শেষে ইচ্ছাকৃত: উপরের কোনো নিয়ম বদলানো হয়নি, শুধু যোগ করা হয়েছে।
   ========================================================================== */

/* ১. স্ক্রল-চিপের ডানে "আরও আছে" ইঙ্গিত — scrollbar লুকানো থাকায় (ইচ্ছাকৃত)
      ডানে আরও চিপ আছে কিনা বোঝার উপায় ছিল না; মেপে দেখা গেছে খোঁজ · জরুরি ·
      সব-সেবা তিন পাতাতেই শেষ চিপটা কিনারায় কাটা পড়ে থাকে। mask দিয়ে করা,
      ছদ্ম-এলিমেন্ট নয় — তাতে স্ক্রলের সাথে fade নিজে থেকেই ঠিক জায়গায় থাকে। */
.chips.scroll{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%);
}

/* ২. সব সেবা — সারির ডানে আর ফাঁকা ঘর নয়। গ্রুপভিত্তিক টাইল-গ্রিডে শেষ সারিতে
      একটা টাইল পড়লে ৩ কলামে ২টা, ডেস্কটপে ৬ কলামে ৫টা ঘর ফাঁকা থাকত (মেপে:
      "জনশক্তি" একা)। grid-এ শেষ সারি ভরানো যায় না — তাই flex: টাইল বেড়ে সারি
      ভরে, max-width বাড়াবাড়ি আটকায়, আর বাকিটুকু justify-content:center দুই
      পাশে সমান ভাগ করে দেয় (ডান দিকের একতরফা গর্ত আর থাকে না)। */
.svcpg .tiles,.tiles.fill{--tc:3;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.svcpg .tiles > .tile,.tiles.fill > .tile{
  flex:1 1 calc((100% - (var(--tc) - 1) * 8px) / var(--tc));
  max-width:calc((100% - 8px) / 2);
  min-width:0;
}
@media (min-width:520px){ .svcpg .tiles,.tiles.fill{--tc:4} .svcpg .tiles > .tile,.tiles.fill > .tile{max-width:calc((100% - 16px)/3)} }
@media (min-width:768px){ .svcpg .tiles,.tiles.fill{--tc:5} .svcpg .tiles > .tile,.tiles.fill > .tile{max-width:calc((100% - 24px)/4)} }
@media (min-width:1100px){ .svcpg .tiles,.tiles.fill{--tc:6} .svcpg .tiles > .tile,.tiles.fill > .tile{max-width:calc((100% - 24px)/4)} }
@media (min-width:1600px){ .svcpg .tiles,.tiles.fill{--tc:8} .svcpg .tiles > .tile,.tiles.fill > .tile{max-width:calc((100% - 40px)/6)} }

/* 📏 ফোনে "সব সেবা"-র কার্ড হোম পাতার কার্ডের মতোই কমপ্যাক্ট (owner ২০২৬-০৯-১৪)
   এক সারিতে ৩টি (৯৯px উঁচু) → ৪টি (~৫৬px)। মাপ-নিয়ম হুবহু হোমের `.qacts`
   থেকেই নেওয়া, তাই দুই পাতার কার্ড দেখতে এক রকম লাগে।
   ⚠️ এই গ্রিড আসলে **flex** — `grid-template-columns` এখানে কিছুই করে না,
      সারিতে কয়টি বসবে তা ঠিক করে `--tc`। আর নিয়মটি অবশ্যই উপরের `--tc`
      মিডিয়া-নিয়মগুলোর **পরে** থাকতে হবে, নইলে পরেরটি জিতে যায়।
   ⚠️ gap ৮px-ই রাখা — flex-basis-এর হিসাবে ৮px হার্ডকোড করা আছে।
   ⚠️ বিবরণ (`small`) ফোনে লুকানো: চার কলামে ওটা পড়ার মতো থাকে না, শুধু
      কার্ড লম্বা করে; নামটুকু দুই লাইনে পুরো দেখা যায়। */
@media (max-width:519px){
  .svcpg .tiles{--tc:4}
  .svcpg .tiles > .tile{max-width:calc((100% - 8px)/2);padding:5px 3px;gap:3px;border-radius:10px}
  .svcpg .tiles > .tile .sq{width:28px;height:28px;border-radius:9px}
  .svcpg .tiles > .tile .sq .ic{width:16px;height:16px}
  .svcpg .tiles > .tile b{width:100%;font-size:.7rem;line-height:1.15;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .svcpg .tiles > .tile small{display:none}
}

/* ৩. সব সেবা — ছাঁকনির চিপ টপবারের নিচে আটকে থাকে (পাতা ফোনে ~২৪০০px লম্বা,
      নিচে নেমে বিভাগ বদলাতে আগে পুরোটা স্ক্রল করে ফিরতে হতো)।
      ⚠️ --tb-h = টপবারের আসল উচ্চতা, app.js প্রতি রেন্ডারে মেপে বসায় (ফোনে
         টপবার দুই সারি, ডেস্কটপে এক — ধ্রুবক ধরলে বার আধখানা ঢাকা পড়ত)। */
/* ⚠️ `--safe-t` আলাদা যোগ করা যাবে না — `.topbar`-এ `padding-top:var(--safe-t)` আছে,
   তাই app.js-এর মাপা `--tb-h`-এ notch-এর জায়গা আগেই ধরা। দুইবার গুনলে notch-ওয়ালা
   ফোনে বারটি টপবারের ~৪৭px নিচে ভেসে থাকত। notch নকল করে মাপা: ফাঁক ০ → ৪৭ → ০।
   ডেস্কটপে `--safe-t`=0 বলে এতদিন ধরা পড়েনি (owner ২০২৬-০৯-১৯)। */
.svcpg .mchips{position:sticky;top:var(--tb-h,54px);z-index:20;
  margin-top:8px;padding:7px 0 8px;background:var(--ground);
  box-shadow:0 10px 12px -12px rgba(20,40,32,.35)}

/* ৪. "তথ্য নেই" ঘরের ড্যাশ — ঘরগুলো ইচ্ছাকৃতভাবেই সবসময় থাকে (তথ্য এলে লেআউট
      নড়বে না), সেটি বদলাইনি; শুধু খালি ড্যাশ "ভাঙা" না দেখিয়ে "অপেক্ষমাণ"
      বোঝায় এমন নরম চেহারা পেল। */
.fic b.none,.finfo b.none{color:var(--ink-faint);font-weight:700;letter-spacing:.14em;
  border-bottom:1px dashed var(--line-2);padding-bottom:1px;opacity:.85}

/* ৫. ছোট পাতার নিচের "দ্রুত যেতে পারেন" — আলাদা করে বোঝাতে হালকা বিভাজক,
      তবে কার্ড/বাক্স নয় (পাতার আসল কনটেন্টের সাথে প্রতিযোগিতা করবে না)। */
.ptail{margin-top:20px;padding-top:12px;border-top:1px dashed var(--line);animation:tailIn .28s ease both}
.ptail .sect h2{font-size:.95rem;color:var(--ink-soft)}
@keyframes tailIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ptail{animation:none}}

/* ==========================================================================
   প্রার্থীর পাতা (#/c/<slug>) — নতুন সাজ (owner ২০২৬-০৯-১৪)
   হিরো = বাঁয়ে পোস্টার (ফোনে ১১৮px, ডেস্কটপে ২১০px), ডানে পরিচয়।
   ⚠️ পোস্টারের ঘরে অনুপাত (৯০০:১১২৫) CSS-এ বাঁধা — canvas আঁকার আগেই উচ্চতা
      ঠিক হয়ে যায়, তাই আঁকা শেষ হলে পাতা লাফ দেয় না।
   ========================================================================== */
.cpg-hero{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:12px;align-items:start}
.cpg-pos{position:relative;width:100%;aspect-ratio:900/1125;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);overflow:hidden;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease}
@media (hover:hover){.cpg-pos:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}}
.cpg-cv{display:block;width:100%;height:100%}
.cpg-pl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:4px;
  padding:3px 0;font-size:.7rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,rgba(15,23,42,.88),rgba(30,58,138,.88))}
.cpg-pl .ic{width:12px;height:12px}
/* পরিচয়ের দুই টুকরো — ফোনে উপরের অংশ পোস্টারের পাশে, বাকিটা পুরো প্রস্থে */
.cpg-pos{grid-column:1;grid-row:1}
.cpg-idtop{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cpg-idrest{grid-column:1/-1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cpg-nm{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.cpg-nm b{font-size:1.2rem;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.cpg-sub{font-size:.86rem;font-weight:700;color:var(--ink-faint)}
.cpg-chips{display:flex;flex-wrap:wrap;gap:6px}
.cpg-c{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;
  padding:4px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);
  font-size:.78rem;line-height:1}
.cpg-c .ic{width:13px;height:13px;flex:none;color:var(--primary)}
.cpg-c img{width:20px;height:20px;flex:none;border-radius:50%;object-fit:cover;background:#fff;
  box-shadow:0 0 0 1px var(--line)}
.cpg-c small{font-weight:700;color:var(--ink-faint);flex:none}
.cpg-c b{font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpg-slg{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink-soft);
  padding-left:9px;border-left:3px solid color-mix(in srgb,var(--primary) 45%,transparent)}
.cpg-facts{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:.84rem;font-weight:700}
.cpg-facts span{display:inline-flex;align-items:baseline;gap:5px;min-width:0}
.cpg-facts small{font-size:.74rem;font-weight:700;color:var(--ink-faint)}
/* অ্যাকশন-বার — এক লাইনেই থাকবে; জায়গা না হলে JS ধাপে ধাপে ক্লাস বসায়
   (fit-ico → fit-ico2 → fit-tight)। ⚠️ `nowrap` ছাড়া মাপা যায় না। */
.cpg-act{margin-top:2px;flex-wrap:nowrap;min-width:0}
.cpg-act>.btn{flex:0 1 auto;min-width:0}
.cpg-act.fit-ico>.btn:not(.keep),
.cpg-act.fit-ico2>.btn{font-size:0;gap:0;padding:0 11px}
.cpg-act.fit-ico>.btn:not(.keep) .ic,
.cpg-act.fit-ico2>.btn .ic{width:16px;height:16px}
.cpg-act.fit-tight{gap:5px}
.cpg-act.fit-tight>.btn{padding:0 9px;height:36px}
.cpg-act.fit-tight>.btn.keep{padding:0 10px;font-size:.78rem}
.cpg-hint{display:flex;align-items:flex-start;gap:5px;font-size:.76rem;line-height:1.45;color:var(--ink-faint)}
.cpg-hint .ic{width:13px;height:13px;flex:none;margin-top:2px;color:var(--primary)}
.cpg-hint b{color:var(--ink-soft)}
/* পরিসংখ্যান হিরোর ভেতরে — ফোনে নিচে পুরো প্রস্থে, ডেস্কটপে ডান পাশের কলামে।
   ⚠️ গ্লোবাল `.stats` ব্যবহার করা হয়নি: ওটা ৬০০px+ পর্দায় **৪ কলাম** ধরে, দুটি
      ঘর দিলে বাকি অর্ধেক ফাঁকা পড়ে থাকত (owner-এর #১ অভিযোগ)। */
.cpg-st{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
/* সমর্থনের ডোনাট — বাঁয়ে বৃত্ত, ডানে সংখ্যা ও পরিধি
   ⚠️ বৃত্তটি গোলাপি, সমর্থনের বোতামের মতোই — এক রঙ = এক অর্থ।
   ⚠️ r=১৫.৯১৫ → পরিধি ১০০, তাই stroke-dasharray-এ সরাসরি শতাংশ বসে। */
.cpg-dn{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-width:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:9px 11px;box-shadow:var(--shadow)}
.cpg-dn-g{position:relative;width:58px;height:58px;flex:none}
.cpg-dn-g svg{width:100%;height:100%;transform:rotate(-90deg)}
.cpg-dn-g circle{fill:none;stroke-width:4.4}
.cpg-dn-g .tr{stroke:var(--surface-2)}
.cpg-dn-g .ar{stroke:#db2777;stroke-linecap:round;transition:stroke-dasharray .45s ease}
.cpg-dn-p{position:absolute;inset:0;display:grid;place-items:center;
  font-size:.76rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.cpg-dn-t{min-width:0}
.cpg-dn-t b{display:block;font-size:.86rem;font-weight:800;line-height:1.35}
.cpg-dn-t small{display:block;font-size:.72rem;line-height:1.4;color:var(--ink-faint);overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.cpg-dn-g .ar{transition:none}}
/* ইশতেহার ও প্রতিশ্রুতি — ডেস্কটপে পাশাপাশি, তাই ডান দিকে ফাঁকা পড়ে থাকে না */
.cpg-two{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.cpg-two.one{grid-template-columns:minmax(0,1fr)!important}   /* একটাই থাকলে পুরো প্রস্থ */
.cpg-col{min-width:0}
.cpg-up{padding:12px}
.cpg-up img{width:100%;border-radius:var(--r-s);margin-top:8px}
.cpg-note{margin-top:14px}
@media (min-width:560px){
  .cpg-hero{grid-template-columns:160px minmax(0,1fr);gap:14px;padding:14px}
  .cpg-nm b{font-size:1.3rem}
}
@media (min-width:900px){
  /* ডেস্কটপে: বাঁয়ে পোস্টার (দুই সারি জুড়ে) · মাঝে পরিচয়ের দুই টুকরো · ডানে পরিসংখ্যান */
  .cpg-hero{grid-template-columns:210px minmax(0,1fr) 236px;gap:12px 16px}
  .cpg-pos{grid-row:1/span 2}
  .cpg-idtop{grid-column:2;grid-row:1}
  .cpg-idrest{grid-column:2;grid-row:2}
  /* বোতামগুলো কলামের পুরো প্রস্থ ভরে — নইলে ডান দিকে ফাঁকা পড়ে থাকত */
  .cpg-act>.btn,.cpg-act>a.btn{flex:1 1 0;justify-content:center}
  .cpg-st{grid-column:3;grid-row:1/span 2;grid-template-columns:minmax(0,1fr);align-content:start}
  .cpg-two{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start}
}
@media (prefers-reduced-motion:reduce){.cpg-pos{transition:none}}

/* ==========================================================================
   প্রার্থীর কার্ড = ছাপার পোস্টার (owner ২০২৬-০৯-১৪)
   কার্ডের পুরো উপরের অংশ একটি canvas — পোস্টার স্টুডিওর ইঞ্জিনেই আঁকা।
   ⚠️ অনুপাত ৯০০:১১২৫ CSS-এ বাঁধা, তাই ছবি আঁকার **আগেই** কার্ডের উচ্চতা
      ঠিক হয়ে যায় — নইলে আঁকা শেষ হওয়ার সাথে সাথে পুরো গ্রিড লাফ দিত।
   ========================================================================== */
.cdp{padding:0;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease}
@media (hover:hover){.cdp:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}}
/* আঁকা শেষ হওয়ার আগ পর্যন্ত ঘরটি **সাদা** — পোস্টারের কাগজও সাদা, তাই
   ধূসর থেকে পোস্টারে লাফ দেওয়ার বদলে লেখাটুকু নিঃশব্দে ফুটে ওঠে */
.cdp-p{position:relative;width:100%;aspect-ratio:900/1125;background:#fff;cursor:pointer}
.cdp-cv{display:block;width:100%;height:100%}
.cdp-tags{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.cdp-b{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;
  font-size:.7rem;font-weight:800;color:#fff;box-shadow:0 2px 6px rgba(15,23,42,.35)}
.cdp-b .ic{width:11px;height:11px}
.cdp-b.won{background:linear-gradient(135deg,#15803d,#22a355)}
.cdp-b.vf{background:linear-gradient(135deg,#1d4ed8,#3b82f6)}
.cdp-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;padding:7px 8px 0}
.cdp-go{width:100%;border-radius:0;margin-top:auto}
@media (prefers-reduced-motion:reduce){.cdp{transition:none}}

/* ==========================================================================
   প্রার্থীর কার্ড (#/election) — কেন্দ্রীভূত, পুরো-প্রস্থ বোতাম (owner ২০২৬-০৯-১৩)
   ⚠️ গ্রিডের সারি stretch হয় বলে কার্ডগুলো সমান উচ্চতার; বোতামে `margin-top:auto`
      দেওয়ায় লেখা কম-বেশি হলেও পাশাপাশি সব বোতাম **একই লাইনে** বসে।
   ========================================================================== */
.cdc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:14px 12px 12px;transition:transform .18s ease,box-shadow .18s ease}
.cdc>*{max-width:100%}
@media (hover:hover){.cdc:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}}

/* ছবি — চারপাশে হালকা রিং (কার্ডের সাদার উপর ভেসে থাকে) */
.cdc-ph{position:relative;display:grid;place-items:center;margin-bottom:3px}
.cdc-ph .face,.cdc-ph img{border-radius:50%;transition:transform .18s ease;
  box-shadow:0 3px 10px rgba(18,51,98,.16),0 0 0 3px var(--card),0 0 0 5px var(--primary-tint)}
@media (hover:hover){.cdc:hover .cdc-ph .face,.cdc:hover .cdc-ph img{transform:scale(1.05)}}
/* "নির্বাচিত" — ছবির নিচের কিনারায় বসে, আলাদা সারি খরচ করে না */
.cdc-won{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:3px;white-space:nowrap;
  padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:800;
  background:linear-gradient(135deg,var(--ok),#15703c);color:#fff;
  box-shadow:0 2px 7px rgba(31,138,76,.4)}
.cdc-won .ic{width:11px;height:11px}

.cdc-nm{font-size:1rem;font-weight:800;line-height:1.4;color:var(--ink)}
.cdc-vf{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;
  padding:2px 7px;border-radius:999px;font-size:.7rem;font-weight:800;
  background:var(--ok-tint);color:var(--ok-ink)}
.cdc-vf .ic{width:11px;height:11px}
.cdc-sub{font-size:.79rem;font-weight:700;color:var(--ink-faint)}
/* স্লোগান দুই লাইনে থামে — নইলে এক কার্ডের লম্বা স্লোগানে পুরো সারি লম্বা হয়ে যায় */
.cdc-slg{margin:0;font-size:.84rem;line-height:1.5;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.cdc-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;width:100%;margin-top:1px}
.cdc-c{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%;
  padding:3px 9px;border-radius:999px;font-size:.75rem;line-height:1.55;
  background:var(--surface-2);border:1px solid var(--line)}
.cdc-c .ic{width:12px;height:12px;flex:none;color:var(--primary)}
.cdc-c small{font-weight:700;color:var(--ink-faint);flex:none}
.cdc-c b{font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdc-go{margin-top:auto}
@media (prefers-reduced-motion:reduce){.cdc,.cdc-ph .face,.cdc-ph img{transition:none}}

/* ==========================================================================
   হোমে সেকশন-থেকে-সেকশন ফাঁক কমানো (owner ২০২৬-০৯-১৩)
   মেপে দেখা: এক সেকশনের শেষ থেকে পরের শিরোনাম পর্যন্ত ১৪px, নিচে ৮px —
   আর যে শিরোনামে "সব দেখুন" থাকে সেটির সারি **২২px-এর বদলে ৪১px**, কারণ
   `.seeall{padding:11px 4px}` (ট্যাপের জায়গা) পুরো flex-সারিকে টেনে লম্বা করে।
   ⚠️ padding কমিয়ে দিলে ট্যাপের ঘর ছোট হয়ে যেত; তাই padding রেখেই
   `margin-block:-6px` — বাইরের মাপ ছোট, ভেতরের ক্লিক-এলাকা ৩৭px-ই থাকে।
   ⚠️ `.sect`/`.seeall` গ্লোবাল (৫০+ পাতা) — তাই `:has(> .hero2)` দিয়ে
   **শুধু হোমেই** সীমাবদ্ধ (`.hero2` কেবল screens-home2.js রেন্ডার করে)।
   পুরোনো ব্রাউজারে `:has()` না চললে নিয়মটা চুপচাপ বাদ যায়, কিছু ভাঙে না।
   ফল: ফোনে পাতা ২৩১১px → ২২৪৪px, সেবার একটি সারি বেশি প্রথম পর্দাতেই দেখা যায়।
   ========================================================================== */
.wrap:has(> .hero2) .sect{margin:8px 0 4px}
.wrap:has(> .hero2) .sect .seeall{padding:9px 4px;margin-block:-6px}

/* ==========================================================================
   পোস্টার স্টুডিও (#/pstudio) — ছাপার নির্বাচনী পোস্টার (owner ২০২৬-০৯-১৩)
   ডেস্কটপে বাঁয়ে নিয়ন্ত্রণ (৩ কার্ড) · ডানে আটকে-থাকা প্রিভিউ; ফোনে ক্রম =
   টেমপ্লেট → প্রিভিউ → ছবি → লেখা (`display:contents` + order), যাতে ছবি বদলের
   ফল স্ক্রল না করেই চোখে পড়ে।
   ========================================================================== */
.ps{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin-top:10px}
.ps-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.ps-prev{min-width:0}
@media (min-width:900px){
  .ps{grid-template-columns:360px minmax(0,1fr);align-items:start}
  /* ⚠️ এখানেও `--safe-t` যোগ নয় — উপরের কারণই। */
  .ps-prev{position:sticky;top:calc(var(--tb-h,54px) + 8px)}
}
@media (min-width:1300px){.ps{grid-template-columns:390px minmax(0,1fr)}}
@media (max-width:899px){.ps-side{display:contents}.ps-c1{order:1}.ps-prev{order:2}.ps-c2{order:3}.ps-c3{order:4}}
.ps-c{padding:10px 12px}
.ps-h{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.ps-h h2{margin:0;font-size:.95rem;flex:1;min-width:0}
.ps-h .no{display:grid;place-items:center;height:22px;padding:0 6px;border-radius:5px;flex:none;
  font-size:.72rem;font-weight:800;background:var(--primary-tint);color:var(--primary)}
.ps-h .tag{flex:none}
/* টেমপ্লেট — নমুনা ইঞ্জিন নিজেই আঁকে */
.ps-tpls{display:flex;gap:6px}
.ps-tpl{flex:1;min-width:0;padding:0;border:2px solid var(--line);border-radius:6px;overflow:hidden;cursor:pointer;
  background:var(--surface-2);color:inherit;text-align:left;font:inherit;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.ps-tpl .ps-th{display:block;padding:5px;background:var(--surface-2)}
.ps-tpl canvas{display:block;width:100%;height:auto;background:#fff;box-shadow:0 1px 4px rgba(37,99,235,.18)}
.ps-tpl>div{padding:5px 7px;background:var(--card)}
.ps-tpl b{display:block;font-size:.8rem;line-height:1.3}
.ps-tpl small{font-size:.7rem;color:var(--ink-faint)}
.ps-tpl.on{border-color:var(--primary);box-shadow:0 2px 8px rgba(15,92,74,.22)}
@media (hover:hover){.ps-tpl:hover{transform:translateY(-1px);border-color:var(--primary)}}
/* আপলোড */
.ps-ups{display:flex;gap:6px}
.ps-up{position:relative;flex:1;min-width:0;padding:8px 6px;border:1px dashed var(--line-2);border-radius:6px;
  text-align:center;cursor:pointer;background:var(--surface-2);overflow:hidden}
.ps-up input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}
.ps-up b{display:block;font-size:.82rem;color:var(--primary)}
.ps-up span{display:block;font-size:.7rem;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-rng{display:flex;align-items:center;gap:6px;min-height:28px}
.ps-rng label{width:84px;flex:none;font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.ps-rng input[type=range]{flex:1;min-width:0;margin:0;accent-color:var(--primary)}
.ps-rng output{width:40px;flex:none;font-size:.72rem;text-align:right;color:var(--ink-faint)}
.ps-chk{display:flex;align-items:center;gap:6px;font-size:.8rem;margin-top:4px;cursor:pointer}
.ps-chk input{margin:0;accent-color:var(--primary)}
/* লেখা */
.ps-form{display:flex;flex-direction:column;gap:6px}
.ps-form .f>label{font-size:.76rem}
.ps-2{display:flex;gap:6px}
.ps-2>.f{flex:1;min-width:0}
.ps-2>.f.yr{flex:0 0 86px}
/* প্রিভিউ */
.ps-tb{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ps-tb h2{margin:0;font-size:.95rem}
.ps-tb small{display:block;font-size:.7rem;color:var(--ink-faint)}
.ps-tb select.inp{width:auto;height:32px;font-size:.78rem;padding-right:26px}
.ps-stage{display:grid;place-items:center;padding:10px;border:1px solid var(--line);border-radius:6px;
  background-color:var(--surface-2);background-image:radial-gradient(var(--line-2) .8px,transparent .8px);background-size:13px 13px}
.ps-stage canvas{display:block;width:auto;max-width:100%;height:min(66vh,720px);aspect-ratio:4/5;background:#fff;
  box-shadow:0 4px 22px rgba(15,92,74,.22)}
@media (max-width:899px){.ps-stage canvas{height:auto;width:100%;max-width:480px}}
.ps-dl{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px}
.ps-msg{min-height:18px;margin:6px 0 0;font-size:.76rem;color:var(--ok-ink)}
.ps-msg.bad{color:var(--blood-ink)}


/* ==========================================================================
   রমজানের তিন দশক — রহমত · মাগফিরাত · নাজাত পাশাপাশি (owner ২০২৬-০৯-১৪)
   ⚠️ কলাম হয় ১, নয় ৩ — মাঝামাঝি ২ নয়: তিনটি টেবিল দুই কলামে বসালে তৃতীয়টি
      একা পড়ে ডান পাশ অর্ধেক মরা ফাঁকা থাকত।
   ⚠️ ঘরের padding এখানে আঁটসাঁট — গ্লোবাল `.tbl` (১০/১৩px) রাখলে টেবিলের
      স্বাভাবিক প্রস্থ ~২৫৫px হয়, ৭০০px পর্দায় তিন কলাম ধরত না।
   ========================================================================== */
.rmd-ash{display:grid;gap:9px;grid-template-columns:minmax(0,1fr)}
.rmd-ash>*{min-width:0}
.rmd-ash .tbl th,.rmd-ash .tbl td{padding:8px 7px}
@media (min-width:700px){.rmd-ash{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* রমজানের আমল — কুরআন/হাদিসের সূত্রসহ কার্ড (screens-ramadan.js)
   ⚠️ সব ক্লাস `rmd-` দিয়ে শুরু — গ্লোবাল `.am`/`.amh` নিলে অন্য পাতার সাথে ঠোকাঠুকি হতো */
.rmd-amal{display:grid;gap:9px;grid-template-columns:minmax(0,1fr);align-items:stretch}
.rmd-amal>*{min-width:0}
@media (min-width:640px){.rmd-amal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.rmd-amal{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rmd-am{display:flex;flex-direction:column;gap:7px;padding:11px 13px;border-radius:var(--r-m);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.rmd-amh{display:flex;align-items:center;gap:9px;min-width:0}
.rmd-amh b{font-size:.94rem;font-weight:800;line-height:1.3;min-width:0}
.rmd-amd{font-size:.82rem;line-height:1.5;color:var(--ink-soft);font-weight:600}
.rmd-amr{padding-left:9px;border-left:3px solid color-mix(in srgb,var(--primary) 40%,transparent)}
.rmd-amq{font-size:.86rem;line-height:1.62;color:var(--ink);font-weight:500}
.rmd-ams{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:4px;
  font-size:.74rem;font-weight:700;color:var(--primary)}
.rmd-ams .ic{width:12px;height:12px;flex:none}

/* ==========================================================================
   ঘটনাস্থল ও মানচিত্র — দুর্ঘটনার খবরে "কোথায়" (owner ২০২৬-০৯-১৪)
   Leaflet-এর নিজস্ব CSS শুধু মানচিত্র খুললে CDN থেকে নামে; নিচেরটুকু কেবল
   আমাদের ঘরগুলোর — উচ্চতা, কোণা ও নীল ছায়া।
   ⚠️ এক সারিতে ইনপুট ও বোতাম — তিনটিরই উচ্চতা `--ctl-h` (৪০px) বলে center
      line এক থাকে; ফোনে জায়গা না হলে wrap করে, কিন্তু উঁচু-নিচু হয় না।
   ========================================================================== */
.locrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0;width:100%}
.locrow>.inp{flex:1 1 150px;min-width:0}
.locrow>.btn{flex:0 0 auto}
/* ফোনে এক সারিতে সব ধরে না — তাই ইনপুট পুরো লাইন নেয় আর বোতামগুলো পরের
   লাইনটা ভাগ করে নেয়; কোনো লাইনই আধা-ফাঁকা পড়ে থাকে না।
   ⚠️ `flex:1 1 0` দিলে তিন বোতামের সারিতে লেখা কাটা পড়ত — `auto` রাখায়
      প্রতিটি বোতাম নিজের প্রস্থ ধরে রেখে বাড়তি ফাঁকাটুকু পূরণ করে। */
@media (max-width:520px){
  .locrow>.inp{flex:1 1 100%}
  .locrow>.btn{flex:1 1 auto}
}
.pickmap{height:min(52vh,340px);width:100%;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);
  box-shadow:0 2px 10px rgba(37,99,235,.18)}
.pickmap .leaflet-container{height:100%;width:100%;font:inherit;background:var(--surface-2)}
.mapoff{height:100%;display:grid;place-items:center;padding:14px;text-align:center;
  font-size:.84rem;line-height:1.5;color:var(--ink-faint)}
/* ---------- জানাজা কখন-কোথায় (owner ২০২৬-০৯-১৪) ----------
   তারিখ ও ঘড়ির ঘর সবসময় **এক সারিতে** — ৩৭৫px-এও ভেঙে দুই লাইনে যায় না,
   দুটোরই `flex:1 1 0` + `min-width:0`, তাই সমান ভাগে বসে ও উচ্চতাও সমান। */
.jzgrid{display:flex;align-items:center;gap:6px;width:100%}
.jzgrid>.inp{flex:1 1 0;min-width:0}
/* কার্ডে জানাজার লাইন — শোকের খবরে এটাই মানুষের একমাত্র খোঁজ, তাই হালকা
   সবুজ পটে আলাদা করে ফোটে। রঙ `--ok-ink` বলে light/dark দুটোতেই পড়া যায়। */
.jzline{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:6px 0 0;
  padding:6px 8px;border-radius:4px;font-size:.79rem;line-height:1.35;
  background:color-mix(in srgb,var(--ok-ink) 9%,transparent)}
.jzline .jzk{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--ok-ink)}
.jzline .jzk .ic,.jzline .jzp .ic{width:13px;height:13px;flex:0 0 auto}
.jzline b{color:var(--ink);font-weight:700}
.jzline .jzp{display:inline-flex;align-items:center;gap:4px;min-width:0;color:var(--ink-soft)}
.locline{display:flex;align-items:center;gap:5px;min-width:0;margin:5px 0 0;
  font-size:.8rem;color:var(--ink-faint)}
.locline .ic{width:14px;height:14px;flex:0 0 auto;color:var(--blood-ink)}
.locline b{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* শোকের কার্ডে "বাড়ি" লেবেল — জানাজার ঠিকানার সাথে গুলিয়ে না যায় */
.locline .lk{font-weight:800;color:var(--ink-soft);flex:0 0 auto}


/* সিঙ্কের সূচক — **শুধু দরকার হলে** পর্দায় আসে (js/sync.js)
   ⚠️ hover-এ `translateX(-50%)` ধরে রাখতেই হবে, নইলে চাপ দিলে পিলটা ডানে লাফায় */
.scc-sync{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 58px);z-index:299;
  display:inline-flex;align-items:center;gap:7px;max-width:calc(100% - 24px);
  box-sizing:border-box;padding:8px 14px;border-radius:999px;cursor:pointer;border:0;
  font-size:.78rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#2563eb,#3b82f6);
  box-shadow:0 4px 14px rgba(37,99,235,.42);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.scc-sync .ic{width:14px;height:14px;flex:none}
.scc-sync span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scc-sync.off{background:linear-gradient(135deg,#64748b,#475569);
  box-shadow:0 4px 14px rgba(71,85,105,.40)}
@media (hover:hover){.scc-sync:hover{transform:translateX(-50%) scale(1.06);filter:brightness(1.06)}}
.toast.warn{background:linear-gradient(135deg,var(--gold),#a16207);color:#fff}


/* ⭐ ফোন/অ্যাপে খোঁজার ঘর উপরের বারেই (owner ২০২৬-০৯-১৫)
   আগে হেডারের নিচে আলাদা সারি ছিল — দুই তলা হেডার ~৫৫px খেত। এখন এক তলা।
   ⚠️ ডেস্কটপে (≥১০০০px) `.hsearch{display:none}` আগের নিয়মেই বহাল, তাই
      ওখানে `.topnav` ও `.sp` আগের মতোই কাজ করে। */
@media (max-width:999px){
  .topbar .in{position:relative}
  .topbar .in .sp{display:none}          /* ঘরটিই এখন ফাঁকা জায়গা নেয় */
  .hsearch{flex:1 1 auto;min-width:0;margin:0;border-radius:9px;
    box-shadow:0 1px 5px rgba(37,99,235,.18);
    transition:left .18s ease,right .18s ease,box-shadow .18s ease}
  .hsearch input{height:38px;font-size:.85rem;padding:0 11px}
  .hsearch button{width:42px;height:38px}
  .hsearch button .ic{width:17px;height:17px}

  /* 🐞 খোঁজার ঘরটি লোগোর উপরে উঠে যেত (owner ২০২৬-০৯-১৫)।
     কারণ: `.brand` একটি flex আইটেম বলে চাপ খেয়ে ছোট হয়ে যেত, কিন্তু ভেতরের
     `.seal{flex:none}` ছোট হতো না — তাই লোগো নিজের ঘরের বাইরে বেরিয়ে খোঁজার
     ঘরের উপরে বসত (৩৭৫ px-এ লোগো ১৪→১০৬, খোঁজা ৮১ — ১৯ px ওভারল্যাপ, মেপে ধরা)।
     এখন লোগোর ঘর আর চাপে না; খোঁজার ঘর বাকি জায়গাটুকুই নেয় — চাপ দিলে তবেই
     পুরো বার জুড়ে ছড়ায় (নিচের :focus-within), ফোকাস সরলেই আবার ছোট। */
  .topbar .in > .brand{flex:0 0 auto}
  /* ⚠️ খুব চওড়া লোগো বসালেও যেন খোঁজার ঘর হারিয়ে না যায় — ফোনে লোগো ৩৪ vw-ই সর্বোচ্চ */
  .topbar .brand .seal.img{max-width:min(220px,34vw)}

  /* চাপ দিলে ঘরটি নিজেই চওড়া হয়ে বারের বাকি সব ঢেকে দেয়
     ⚠️ `absolute` হওয়ায় ঘরটি প্রবাহ ছেড়ে যায় — ওয়ার্ড/বেল বোতাম তখন বাঁয়ে
        সরে আসে, কিন্তু ঘরটিই ওগুলোর উপরে বসে বলে চোখে পড়ে না। */
  .topbar .in .hsearch:focus-within{
    position:absolute;top:50%;transform:translateY(-50%);z-index:6;
    left:calc(14px + var(--safe-l));right:calc(14px + var(--safe-r));
    box-shadow:0 5px 18px rgba(37,99,235,.30)}
}

/* =========================================================================
   📷 ছবির ঘর + QR মডাল (js/imgfield.js · js/imgtool.js · m.php)
   ব্যক্তির তথ্য যেখানেই আছে সেখানেই ছবি দেওয়া যায় (owner ২০২৬-০৯-১৫)।
   ⚠️ এক সারিতে থাম্ব ও বোতামগুলোর কেন্দ্র এক — `align-items:center` +
      সব বোতামের উচ্চতা সমান; নইলে বোতামগুলো উঁচু-নিচু দেখাত।
   ========================================================================= */
.imgf{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:6px}
.imgf-btns{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* ⚠️ থাম্বের মোড়কটি `display:flex` না দিলে ভেতরের inline-grid থাম্ব লাইন-বক্স
   তৈরি করে (৫৪px থাম্বের মোড়ক ৬০.৫px হয়ে যেত), ফলে থাম্ব বোতামগুলোর চেয়ে
   ~৩px উঁচুতে বসত — মেপে ধরা পড়েছিল, চোখে প্রায় বোঝা যায় না। */
.imgf-pv{display:flex;align-items:center;flex:none;line-height:0}
.imgf .btn.sm{height:32px}
.ithumb{display:inline-grid;place-items:center;flex:none;overflow:hidden;border-radius:9px;
  background:var(--surface-2);color:var(--ink-soft);font-weight:800;line-height:1;
  box-shadow:0 1px 5px rgba(37,99,235,.18)}
.ithumb img{width:100%;height:100%;object-fit:cover;display:block}
.ithumb.none{background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff}
/* তালিকার সারিতে বসলে গোল — মানুষ দেখতে অভ্যস্ত */
.ithumb.rd,.ithumb.rd img{border-radius:50%}

.qrup-ov{position:fixed;inset:0;z-index:9000;background:rgba(8,15,30,.72);
  display:flex;align-items:center;justify-content:center;padding:12px}
.qrup-box{background:var(--surface);color:var(--ink);border-radius:12px;width:min(420px,100%);
  overflow:hidden;box-shadow:0 18px 50px rgba(37,99,235,.45)}
.qrup-hd{display:flex;align-items:center;gap:8px;padding:9px 12px;color:#fff;
  background:linear-gradient(135deg,#1e3a8a,#2563eb)}
.qrup-hd b{flex:1;min-width:0;font-size:14.5px}
.qrup-hd .ic{width:18px;height:18px;flex:none}
.qrup-x{width:30px;height:30px;border:0;border-radius:8px;cursor:pointer;flex:none;
  font-size:18px;line-height:1;background:rgba(255,255,255,.18);color:#fff}
.qrup-bd{padding:12px;display:flex;flex-direction:column;align-items:center;gap:9px}
.qrup-qr{background:#fff;padding:8px;border-radius:9px;box-shadow:0 2px 10px rgba(37,99,235,.2);line-height:0}
.qrup-qr svg{display:block;width:200px;height:200px}
.qrup-steps{margin:0;padding-inline-start:18px;font-size:12.5px;color:var(--ink-soft);line-height:1.6;align-self:stretch}
.qrup-lnk{font-size:10.5px;color:var(--ink-faint);word-break:break-all;text-align:center}
.qrup-tm{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.qrup-wait{padding:26px 8px;font-size:13px;color:var(--ink-soft);text-align:center}
/* তালিকার সারিতে ব্যক্তির ছবি — আইকনের ঘরটাই ছবি হয়ে যায় (CC.item-এর `pic`) */
.cc-ic.pic{padding:0;overflow:hidden;background:var(--surface-2);border:0}
.cc-ic.pic img{width:100%;height:100%;object-fit:cover;display:block}


/* ==========================================================================
   তালিকা ⇄ গ্রিড — এক কন্টেইনার, দুই চেহারা            (owner ২০২৬-০৯-১৯)
   ⚠️ প্রতিটি পর্দার জন্য আলাদা কার্ড-রেন্ডারার লেখা হয়নি, ইচ্ছাকৃত: ৩২টি পর্দায়
      তা মানে একই তথ্য দুইবার — একদিন এক চেহারায় নতুন ঘর যোগ হতো, অন্যটায় নয়
      (হাসপাতালের hosRow/hosCard-এ ঠিক এই ঝুঁকির কথাই কোডে লেখা আছে)।
      তাই HTML একটাই; শুধু `as-grid` / `as-list` ক্লাস চেহারা বদলায়।
   ⚠️ নিয়মগুলো ফাইলের **শেষে** — `.tiles.fill` ও `.svcpg .tiles` একই
      specificity (0,2,0), তাই উৎস-ক্রমই জেতার একমাত্র উপায়।
   ========================================================================== */
.rows.as-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap,10px)}
@media (min-width:768px){.rows.as-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.rows.as-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rows.as-grid>.row{flex-direction:column;align-items:flex-start;gap:7px}
.rows.as-grid>.row>.sq{align-self:flex-start}
.rows.as-grid>.row .tx{flex:none;width:100%}
.rows.as-grid>.row .end{margin-left:0;width:100%;justify-content:flex-start;flex-wrap:wrap;max-width:none}

/* `.grid` মোবাইলে এমনিতেই ১ কলাম — তাই গ্রিড বেছে নিলে কলাম **জোর করে** বসাতে হয়,
   নইলে দুই চেহারা হুবহু এক দেখাত (ফোনে মেপে ধরা: দুটোতেই ৪টি করে দেখা যেত)। */
.grid.as-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.grid.as-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.grid.as-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grid.as-list{grid-template-columns:minmax(0,1fr)}
/* ⚠️ সরু কলামে কার্ডের ভেতরের সারি wrap না করলে বোতাম কার্ডের বাইরে বেরোয় —
   ফোনে মেপে পাওয়া গিয়েছিল "কল" বোতাম ১৮px, তারকা ৬px বাইরে। এই দুই লাইনেই ০। */
.grid.as-grid>.card *,.rows.as-grid>.row *{min-width:0;max-width:100%}
.grid.as-grid>.card div,.rows.as-grid>.row div{flex-wrap:wrap}
.grid.as-list,.tiles.as-list,.svcgrid.as-list{display:flex;flex-direction:column;gap:var(--gap,10px)}
/* ⚠️ গ্রিডে কলাম বানাতে `.tiles.fill>.tile`-এ `flex-basis:calc(25% - 6px)` ও
   `max-width:calc(50% - 4px)` দেওয়া আছে। তালিকায় সেগুলো রয়ে গেলে সারি অর্ধেক
   প্রস্থে আটকে থাকে, ডান পাশ ফাঁকা (মাপা: ১৭৩px / ৩৫৩px)। তাই এখানে ফিরিয়ে
   দিই — owner-এর #১ রুল: content সবসময় row পূরণ করবে (owner ২০২৬-০৯-১৯)। */
.tiles.as-list>.tile,.svcgrid.as-list>.svc,.grid.as-list>*{width:100%;max-width:none;flex:0 0 auto}
.tiles.as-list>.tile,.svcgrid.as-list>.svc{flex-direction:row;align-items:center;text-align:left;
  gap:10px;padding:9px 11px;min-width:0}
.tiles.as-list>.tile>.sq,.svcgrid.as-list>.svc>svg{flex:none}
.tiles.as-list>.tile b,.svcgrid.as-list>.svc b{font-size:.92rem;text-align:left;flex:1;min-width:0}
.tiles.as-list>.tile small{text-align:left}

/* সুইচের নিজের সারি — উপরে `.sect` না থাকলে তবেই বসে, তাই বাড়তি ফাঁক নেয় না */
.vswbar{display:flex;align-items:center;gap:8px;margin:11px 0 7px}
.vswbar b{font-size:.9rem;font-weight:800;color:var(--ink-soft)}
.vswbar .vsw{margin-left:auto}

/* ⚠️ খালি `<small>`-এর তলা — ব্রাউজার `small`-কে ~০.৮৩em করে ছোট করে, তাই
   ছোট লেখার ভেতরে বসলে ১০px-এ নেমে যেত (মেপে ধরা: হোমে ১০.৬px "দিন",
   নির্বাচনে ১০.০px "সমর্থক")। এটি type-selector (0,0,1) — `.row .tx small`
   জাতীয় সব class-নিয়ম এর উপরে জেতে, তাই ডিজাইন করা জায়গাগুলো অটুট থাকে। */
small{font-size:.72rem}

/* ══════════ সরাসরি চ্যাট (#/chat) ══════════
   হেল্পলাইন কার্ড-তালিকা; এটি মেসেঞ্জার — উপরে কে, মাঝে বুদবুদ, নিচে লেখার ঘর।

   ⚠️ উচ্চতার হিসাব: `.view` নিজেই উপরে `--pad` আর নিচে
      (tabbar + safe-b + 22px) padding নিয়ে রেখেছে; ঐ জায়গাটুকু আবার বিয়োগ
      করলে দুইবার গোনা হতো। তাই টপবার + ঐ দুই padding — এটুকুই বাদ যায়।
      এই কারণেই মেসেঞ্জারে `phead` দেওয়া হয় না (দিলে হিসাবে ঐ ঘরটাও ধরতে হতো)। */
.chatpg{display:flex;flex-direction:column;gap:6px;min-height:320px;
  height:calc(100dvh - var(--tb-h,54px) - var(--pad) - (var(--tabbar-h) + var(--safe-b) + 22px))}

.chatpg .chathead{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0}
/* ⚠️ `.sq`-এর কোনো বেস নিয়ম নেই — নতুন র‍্যাপারে নিজে থেকে কেন্দ্রে বসে না,
   আইকন কোণায় চলে যায়। তাই এখানে স্পষ্ট করে grid + place-items। */
.chatpg .chathead .sq{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-m);flex:none}
.chatpg .chathead .tx{display:flex;flex-direction:column;min-width:0;flex:1}
.chatpg .chathead .tx b{font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatpg .chathead .tx small{font-size:.74rem;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.chatpg .chatbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:6px;padding:9px;border-radius:var(--r-m);
  background:color-mix(in srgb,var(--primary) 4%,var(--surface));border:1px solid var(--line)}

.chatpg .msg{max-width:84%;display:flex;flex-direction:column;gap:2px;
  padding:6px 9px;border-radius:var(--r-m);font-size:.88rem;line-height:1.45;
  word-break:break-word;overflow-wrap:anywhere}
.chatpg .msg b{font-size:.7rem;font-weight:800;opacity:.85}
.chatpg .msg i{font-size:.7rem;font-style:normal;opacity:.72;align-self:flex-end}
/* নিজের বার্তা ডানে, রঙিন — অন্যেরটা বাঁয়ে, সাদা: এক পলকেই কে বলল বোঝা যায় */
.chatpg .msg.me{align-self:flex-end;border-bottom-right-radius:3px;
  color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 1px 4px color-mix(in srgb,var(--primary) 32%,transparent)}
.chatpg .msg.them{align-self:flex-start;border-bottom-left-radius:3px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 3px rgba(37,99,235,.05)}

.chatpg .chatempty{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink-faint);padding:14px}
.chatpg .chatempty .ic{width:30px;height:30px;opacity:.55}
.chatpg .chatempty b{font-size:.9rem;color:var(--ink)}
.chatpg .chatempty small{font-size:.76rem;max-width:230px}

/* লেখার ঘর — textarea লেখা অনুযায়ী বাড়ে, তাই `flex-end`: বোতামটা সবসময়
   ঘরের **শেষ লাইনের** সাথে মেলে। এক লাইনে থাকলে দুটোর উচ্চতা সমান (--ctl-h),
   অর্থাৎ স্বাভাবিক অবস্থায় কেন্দ্ররেখাও এক। */
.chatpg .chatbar{display:flex;align-items:flex-end;gap:6px;flex:0 0 auto}
.chatpg .chatbar textarea{flex:1;min-width:0;height:var(--ctl-h);max-height:96px;resize:none;
  border:1px solid var(--line);background:var(--field);color:var(--ink);border-radius:var(--r-m);
  padding:9px 12px;outline:none;font-size:.92rem;line-height:1.35;
  transition:border-color .15s,box-shadow .15s}
.chatpg .chatbar textarea::placeholder{color:var(--ink-faint)}
.chatpg .chatbar textarea:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.chatpg .chatbar .btn{width:var(--ctl-h);height:var(--ctl-h);padding:0;flex:none;border-radius:var(--r-m)}
.chatpg .chatbar .btn .ic{width:19px;height:19px}

/* ---------- চ্যাটে ছবি — একসাথে কয়েকটি (owner ২০২৬-০৯-১৯) ---------- */
/* এক ছবি = পুরো চওড়া; দুই/তিন/চার = গ্রিড, ঠিক মেসেঞ্জারের মতো।
   ⚠️ উচ্চতা বেঁধে দেওয়া — নইলে লম্বা ছবি পুরো পর্দা খেয়ে আগের কথাগুলো
      উপরে হারিয়ে যেত, আর প্রতিবার নতুন ছবি এলে স্ক্রল লাফাত। */
.chatpg .msg .pics{display:grid;gap:2px;margin:1px 0 3px;border-radius:calc(var(--r-m) - 3px);overflow:hidden}
.chatpg .msg .pics.n1{grid-template-columns:1fr}
.chatpg .msg .pics.n2,.chatpg .msg .pics.n4{grid-template-columns:1fr 1fr}
/* তিনটি: প্রথমটি বড় (বাঁয়ে, দুই সারি জুড়ে), বাকি দুটি ডানে — ভিড় লাগে না */
.chatpg .msg .pics.n3{grid-template-columns:1.35fr 1fr}
.chatpg .msg .pics.n3>.pic:first-child{grid-row:span 2}
.chatpg .msg .pic{display:block;position:relative;background:color-mix(in srgb,var(--ink) 6%,transparent);min-width:0}
.chatpg .msg .pics.n1 .pic img{max-height:240px}
.chatpg .msg .pics.n2 .pic img,.chatpg .msg .pics.n3 .pic img,.chatpg .msg .pics.n4 .pic img{height:104px}
.chatpg .msg .pics.n3>.pic:first-child img{height:210px}
.chatpg .msg .pic img{display:block;width:100%;object-fit:cover}
/* চারটির বেশি হলে শেষ ঘরে "+২" — চাপলে ঐ ছবিটাই খোলে */
.chatpg .msg .pic .more{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(10,18,32,.5);color:#fff;font-weight:800;font-size:1.05rem}
/* শুধু ছবি (লেখা নেই) হলে চারপাশের ফাঁকা কমিয়ে দিই — ছবিই যেন বুদবুদ হয় */
.chatpg .msg.haspic{padding:4px 4px 3px;max-width:78%}
.chatpg .msg.haspic>b{padding:2px 5px 0}
.chatpg .msg.haspic>span{padding:0 5px}
.chatpg .msg.haspic>i{padding:0 5px 1px}

/* পাঠানোর আগে বাছাই করা ছবিগুলোর ঝলক — লেখার ঘরের ঠিক উপরে */
.chatpg .chatpickbar{flex:0 0 auto;padding:5px 6px;border:1px solid var(--line);
  border-radius:var(--r-m);background:color-mix(in srgb,var(--primary) 6%,var(--surface))}
/* ⚠️ থাম্বনেইলগুলো পাশে সরে যায় (wrap নয়) — ছয়টা ছবি দুই সারিতে গেলে
   লেখার ঘরটা নিচে নেমে যেত আর চ্যাটের উচ্চতার হিসাব বদলে যেত। */
.chatpg .chatpickbar .thumbs{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.chatpg .chatpickbar .th{position:relative;flex:none;width:44px;height:44px}
.chatpg .chatpickbar .th img{width:44px;height:44px;object-fit:cover;border-radius:var(--r-s);display:block}
/* আপলোড শেষ না হওয়া পর্যন্ত ফ্যাকাশে — কোনটা এখনো যায়নি চোখেই বোঝা যায় */
.chatpg .chatpickbar .th.wait img{opacity:.45}
.chatpg .chatpickbar .th.wait::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;
  border:2px solid rgba(255,255,255,.65);border-top-color:var(--primary);border-radius:50%;
  animation:chatspin .7s linear infinite}
@keyframes chatspin{to{transform:rotate(360deg)}}
.chatpg .chatpickbar .th .x{position:absolute;top:-4px;right:-4px;width:18px;height:18px;padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(10,18,32,.72);color:#fff}
.chatpg .chatpickbar .th .x .ic{width:11px;height:11px;stroke-width:2.6}
.chatpg .chatpickbar>.tx{margin-top:4px;font-size:.74rem;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ছবির বোতাম — পাঠান-বোতামের মতোই বর্গাকার, কিন্তু হালকা, যেন প্রধান কাজটা
   (পাঠানো) চোখে আগে পড়ে। উচ্চতা একই (--ctl-h), তাই সারির align অটুট। */
.chatpg .chatbar .btn.pick{background:var(--surface);color:var(--primary);
  border:1px solid var(--line);box-shadow:none}
.chatpg .chatbar .btn.pick:hover{background:color-mix(in srgb,var(--primary) 10%,var(--surface))}

/* ---------- ছবির ভিউয়ার (owner ২০২৬-০৯-১৯) ---------- */
/* ⚠️ `100dvh` — ফোনে ঠিকানা-বারের জন্য `100vh` আসল উচ্চতার চেয়ে বড় হয়ে যায়,
   তখন ✕ বোতামটা পর্দার বাইরে চলে যেত। `--safe-*` দিয়ে notch-ও বাদ। */
.vw-ov{position:fixed;inset:0;z-index:9500;background:rgba(6,12,10,.94);
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--safe-t,0px) + 46px) 8px calc(var(--safe-b,0px) + 12px)}
.vw-ov .vw-stage{width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.vw-ov img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  transform-origin:center center;transition:transform .18s ease;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.vw-ov img.zoomed{cursor:grab;transition:none}
/* পিঞ্চ চলাকালীন কোনো transition নয় — নইলে আঙুলের পেছনে ছবিটা দেরিতে আসত */
.vw-ov img.busy{transition:none}
/* ⚠️ `touch-action:none` না দিলে ব্রাউজার নিজেই পিঞ্চ ধরে পুরো পাতা জুম করে,
   তখন আমাদের হাতে ইভেন্টই আসে না আর অ্যাপটাই বেঁকে যায়। */
.vw-ov .vw-stage{touch-action:none}

.vw-ov .vw-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;
  padding:calc(var(--safe-t,0px) + 8px) 10px 8px;color:#fff;
  background:linear-gradient(180deg,rgba(6,12,10,.8),transparent)}
.vw-ov .vw-n{font-size:.86rem;font-weight:800;letter-spacing:.2px}
.vw-ov .sp{flex:1}
/* ⚠️ সব বোতাম ৩৮px — আঙুলের জন্য ন্যূনতম; ছোট করলে ফোনে চাপতে গিয়ে ফসকায় */
.vw-ov .vw-btn{width:38px;height:38px;flex:none;display:grid;place-items:center;padding:0;
  border:0;border-radius:50%;cursor:pointer;color:#fff;background:rgba(255,255,255,.14);
  transition:background .15s,transform .15s}
.vw-ov .vw-btn:hover{background:rgba(255,255,255,.26);transform:scale(1.08)}
.vw-ov .vw-btn .ic{width:19px;height:19px}
.vw-ov .vw-prev,.vw-ov .vw-next{position:absolute;top:50%;margin-top:-19px;
  background:rgba(6,12,10,.55)}
.vw-ov .vw-prev{left:8px;transform:scaleX(-1)}     /* একই chevron উল্টে দিলেই বাঁ-তীর */
.vw-ov .vw-prev:hover{transform:scaleX(-1) scale(1.08)}
.vw-ov .vw-next{right:8px}

/* ---------- চ্যাটে ফাইল / PDF (owner ২০২৬-০৯-১৯) ---------- */
/* বুদবুদের ভেতরে ফাইলের সারি — ছবির মতো দেখানোর কিছু নেই, নাম-মাপই পরিচয় */
.chatpg .msg .docs{display:flex;flex-direction:column;gap:3px;margin:1px 0 3px}
.chatpg .msg .doc{display:flex;align-items:center;gap:7px;min-width:0;
  padding:6px 8px;border-radius:calc(var(--r-m) - 3px);color:inherit;
  background:rgba(255,255,255,.16);transition:background .15s}
.chatpg .msg.them .doc{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.chatpg .msg .doc:hover{background:rgba(255,255,255,.28)}
.chatpg .msg.them .doc:hover{background:color-mix(in srgb,var(--ink) 11%,transparent)}
/* ধরনটাই আইকন — আলাদা ছবি লাগে না, আর নতুন ধরন এলে নিজে থেকেই চলে */
.chatpg .msg .doc .ext{flex:none;width:34px;height:34px;display:grid;place-items:center;
  border-radius:var(--r-s);font-size:.58rem;font-weight:800;letter-spacing:.3px;
  background:rgba(255,255,255,.22)}
.chatpg .msg.them .doc .ext{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.chatpg .msg .doc .nm{flex:1;min-width:0;display:flex;flex-direction:column}
.chatpg .msg .doc .nm b{font-size:.82rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatpg .msg .doc .nm small{font-size:.68rem;opacity:.78}
.chatpg .msg .doc>.ic{width:16px;height:16px;flex:none;opacity:.75}

/* পাঠানোর আগে বাছাই করা ফাইলের ঝলক */
.chatpg .chatdocbar{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;
  padding:5px 6px;border:1px solid var(--line);border-radius:var(--r-m);
  background:color-mix(in srgb,var(--primary) 6%,var(--surface))}
.chatpg .chatdocbar .dc{display:flex;align-items:center;gap:7px;min-width:0}
.chatpg .chatdocbar .ext{flex:none;width:30px;height:30px;display:grid;place-items:center;
  border-radius:var(--r-s);font-size:.56rem;font-weight:800;
  background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.chatpg .chatdocbar .nm{flex:1;min-width:0;font-size:.78rem;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* আপলোড শেষ না হওয়া পর্যন্ত ফ্যাকাশে — কোনটা এখনো যায়নি চোখেই বোঝা যায় */
.chatpg .chatdocbar .dc.wait .ext,.chatpg .chatdocbar .dc.wait .nm{opacity:.5}
.chatpg .chatdocbar .x{width:26px;height:26px;flex:none;display:grid;place-items:center;
  border:0;border-radius:var(--r-s);cursor:pointer;background:transparent;color:var(--ink-faint)}
.chatpg .chatdocbar .x .ic{width:14px;height:14px}
.chatpg .chatdocbar .x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}

/* ---------- চ্যাটে ভিডিও ও অডিও (owner ২০২৬-০৯-২০) ---------- */
/* ⚠️ উচ্চতা বেঁধে দেওয়া — লম্বা ভিডিও পুরো পর্দা খেয়ে ফেললে আগের কথা হারিয়ে যেত */
.chatpg .msg .med{display:flex;flex-direction:column;gap:2px;margin:1px 0 3px;min-width:0}
.chatpg .msg .med video{display:block;width:100%;max-height:250px;border-radius:calc(var(--r-m) - 3px);
  background:#000}
.chatpg .msg .med audio{display:block;width:100%;height:36px}
/* ⚠️ অডিও প্লেয়ার ফোনে ২৫০px-এর কম চওড়ায় বোতামগুলো কেটে ফেলে — তাই ন্যূনতম দিই */
.chatpg .msg .med.aud{min-width:min(250px,64vw)}
.chatpg .msg .med .cap{font-size:.68rem;opacity:.78;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- ভিউয়ারে PDF ---------- */
.vw-ov.pdf{padding:calc(var(--safe-t,0px) + 46px) 0 calc(var(--safe-b,0px) + 0px)}
.vw-ov.pdf .vw-stage{display:block;background:#fff}
.vw-ov.pdf iframe{display:block;width:100%;height:100%;border:0;background:#fff}
/* নামটা লম্বা হলে যেন বোতামগুলো ধাক্কা না খায় */
.vw-ov.pdf .vw-n{flex:1;min-width:0;font-weight:700;font-size:.8rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- মেনুর না-পড়া সংখ্যা (owner ২০২৬-০৯-২০) ---------- */
/* ⚠️ `.svc`-এ আগে `position` ছিল না; ব্যাজ বসাতে relative করতেই হয়।
   ভেতরে আর কোনো absolute সন্তান নেই (দেখে নেওয়া), তাই কিছু নড়ে না। */
.svc{position:relative}
.svc>.nbadge{top:6px;right:6px}
/* ⚠️ `.sq`-এর ভেতরে বসে, তাই `.sq`-কে relative করতেই হয় — নইলে ব্যাজ
   কার্ডের কোণায় ছিটকে যেত (`position:absolute` নিকটতম positioned পূর্বপুরুষ খোঁজে)। */
.tile .sq{position:relative}
.nbadge{position:absolute;top:-5px;right:-6px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:999px;
  /* ⚠️ `.66rem` (১০.৬px) দিয়েছিলাম — প্রকল্পের নিজের তলা `.7rem` (১১.২px)।
     QA স্ক্যানে ধরা পড়ল; ঘরটাও ১৯px করা হলো যাতে "৯+" আঁটে। */
  font-size:.7rem;font-weight:800;line-height:1;color:#fff;
  background:linear-gradient(135deg,var(--blood),var(--blood-2));
  box-shadow:0 1px 4px rgba(200,50,50,.45);
  border:2px solid var(--surface)}

/* ---------- বাক্যের ভেতরের লিংক — আঙুলের জন্য (owner ২০২৬-০৯-২০) ---------- */
/* `/lv/` পাতাগুলোতে কিছু আসল কাজের লিংক বাক্যের ভেতরে থাকে — কৃষি হটলাইনের
   নম্বর (`tel:16121`), "সূচি যোগ করুন", "এখানে যোগ করতে পারেন"। মেপে দেখা গেল
   ওগুলোর উচ্চতা মাত্র ১৬px — আঙুলে লাগানো কঠিন।
   ⚠️ `padding` দিলেও **inline** উপাদানের লাইন-উচ্চতা বাড়ে না, তাই লেখার সাজ
      হুবহু আগের মতোই থাকে; শুধু ছোঁয়ার ঘরটা বড় হয়। negative margin দিয়ে
      পাশের ফাঁকটুকুও ফিরিয়ে দেওয়া হলো।
   ⚠️ মেপে দেখা: SPA-র পাতাগুলোতে এই নির্বাচকে **একটিও** লিংক পড়ে না, আর
      যেগুলো পড়ে সবই `display:inline` — কোনো বোতাম/ব্লক নড়বে না। */
.note a, .lead a, p a{padding:7px 2px;margin:-7px -2px}

/* ---------- নোটিশের বিভাগ (owner ২০২৬-০৯-২৮) ----------
   বোর্ডের বিভাগ-সারি এক লাইনে, পাশে সরে (দ্বিতীয় লাইনে নামে না);
   গুরুত্বপূর্ণ বিভাগের চিপে লাল দাগ; জন্ম-সংবাদের কভার সোনালি-উষ্ণ। */
.nt-cats .chip{min-height:34px;padding:6px 11px;font-size:.76rem}
.nt-cats .chip .ic{width:14px;height:14px}
.nt-cats .chip i.n{font-style:normal;font-size:.7rem;font-weight:800;min-width:18px;height:18px;padding:0 5px;
  display:inline-grid;place-items:center;border-radius:999px;background:var(--surface-2);color:var(--ink-soft)}
.nt-cats .chip.on i.n{background:rgba(255,255,255,.22);color:inherit}
.nt-cats .chip.imp:not(.on){border-color:color-mix(in srgb,var(--blood) 45%,var(--line))}
.nt-cats .chip.imp:not(.on) .ic{color:var(--blood-ink)}
.nt-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 2px;padding:2px 1px 4px}
.nt-bar::-webkit-scrollbar{display:none}
.nt-bar .chip{flex:0 0 auto}
.cover.nt-birth{background:linear-gradient(150deg,#fde7c4,#f6c9a8 55%,#eeb3b8);position:relative;display:grid;place-items:center}
.cover.nt-birth img.art{width:100%;height:100%;object-fit:cover}
.cover.nt-birth .mourn-ic{display:grid;place-items:center;width:100%;height:100%}
.cover.nt-birth .mourn-ic .ic{width:42px;height:42px;color:#9c4a1c}
.cover.nt-birth .ribbon{position:absolute;left:0;top:10px;display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,#b45309,#d97706);color:#fff;font-size:.72rem;font-weight:800;padding:3px 10px 3px 8px;
  border-radius:0 999px 999px 0}
.cover.nt-birth .ribbon .ic{width:12px;height:12px}
.cc-panel.is-birth{border-left:3px solid var(--gold)}
.mourn-line.nt-hello{color:var(--gold-ink)}
.locline.evline .ic{color:var(--blue-ink)}
.nt-acts{gap:6px}
.nt-acts .btn{flex:1 1 auto;white-space:nowrap;padding-left:9px;padding-right:9px}
.nt-acts .btn.ico{flex:0 0 auto;width:40px;padding:0;justify-content:center}
.nt-acts .btn.ico .ic{margin:0}
/* নোটিশ-ফর্মের "মোবাইলে SMS-ও পাঠান" (owner ২০২৬-০৯-২৮) — চেকবক্স ও লেখা এক সারিতে, মাঝ বরাবর */
.cc-check{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px;border:1px solid var(--line);
  border-radius:var(--r-m);background:var(--surface-2);cursor:pointer;font-size:.86rem}
.cc-check input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--primary)}
.cc-check:has(input:checked){border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface))}
#ntSmsBox{display:flex;flex-direction:column;gap:6px;margin-top:7px}
/* লিংক থেকে আসা নোটিশ — এক নজরে চেনার মতো আলাদা দাগ (owner ২০২৬-০৯-২৯) */
.cc-panel.nt-focus{outline:2px solid var(--primary);outline-offset:2px;animation:ntFocus 1.6s ease 2}
@keyframes ntFocus{50%{outline-color:transparent}}
@media (prefers-reduced-motion:reduce){.cc-panel.nt-focus{animation:none}}

/* ⭐ শোকের প্রতিকৃতি (owner ২০২৬-০৯-২৯) — ছবি ব্যানার নয়, কালো পটে বাঁধানো ফ্রেম;
   উপরে-বাঁ কোণে কালো ফিতার ব্যাজ */
.cc-panel>.cover.mourn.portrait{height:176px}
/* ⚠️ শতাংশ-উচ্চতা এখানে ধরে না (প্রস্থ থেকে উচ্চতা বেড়ে কভার ছাড়িয়ে যেত) — তাই নির্দিষ্ট উচ্চতা */
.cover.mourn.portrait .pframe{position:relative;display:block;height:148px;width:auto;aspect-ratio:4/5}
.cover.mourn.portrait .pframe img.art{width:100%;height:100%;object-fit:cover;border-radius:6px;
  border:3px solid rgba(255,255,255,.88);box-shadow:0 6px 18px rgba(0,0,0,.45);opacity:1}
.mrib{position:absolute;left:-10px;top:-10px;width:40px;height:40px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.mrib svg{width:100%;height:100%;display:block}
.cover.mourn.portrait .ribbon{top:auto;bottom:10px}

/* নোটিশের বিস্তারিত পাতা ও তালিকার "খুলুন" চিহ্ন (owner ২০২৬-০৯-২৯) */
.nt-more{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  color:var(--ink-faint);background:var(--surface-2)}
.nt-more .ic{width:15px;height:15px}
.cc-panel.nt-detail .cc-panel-h h2{font-size:1.14rem;line-height:1.45}
.cc-panel.nt-detail .cc-body{font-size:.95rem}
.cc-panel.nt-detail>.cover.mourn.portrait{height:230px}
.cc-panel.nt-detail>.cover.mourn.portrait .pframe{height:198px}
/* ছবি না দিলে placeholder — কালো পটে মাঝখানে বড় শোকের ব্যাজ; আর "জন্ম — মৃত্যু · বয়স" (owner ২০২৬-০৯-২৯) */
.cover.mourn .mourn-ic.mbig .mrib{position:static;width:66px;height:66px}
.lifeline{text-align:center;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin:-2px 0 8px}
.lifeline b{color:var(--ink)}

/* ==========================================================================
   👥 মডারেটর নিয়োগ (owner ২০২৬-১০-০২) — নোটিশের সারাংশ বাক্স + #/modapply ফর্ম
   ========================================================================== */
.mr-box{display:flex;flex-direction:column;gap:5px;margin:8px 0 2px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r-m);background:color-mix(in srgb,var(--primary) 5%,var(--surface))}
.mr-kv{display:flex;align-items:baseline;gap:8px;font-size:13px;min-width:0}
.mr-kv span{flex:0 0 74px;color:var(--ink-soft)} .mr-kv b{color:var(--ink);font-weight:700;min-width:0}
.mr-crit,.mr-chk{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.mr-crit>span,.mr-chk>span{flex:0 0 100%;font-size:12.5px;color:var(--ink-soft);font-weight:600}
.mr-crit i,.mr-chk i{font-style:normal;display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:2px 8px;
  border-radius:var(--r-m);font-size:12px;font-weight:600;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.mr-crit i .ic,.mr-chk i .ic{width:13px;height:13px;flex:0 0 auto;color:var(--ok-ink)}
.mr-chk{margin-top:8px}
.mr-chk i.y{background:var(--ok-tint);border-color:transparent;color:var(--ok-ink)}
.mr-chk i.n{background:var(--blood-tint);border-color:transparent;color:var(--blood-ink)} .mr-chk i.n .ic{color:var(--blood-ink)}
.mr-chk i.p{background:var(--warn-tint);border-color:transparent;color:var(--warn-ink)} .mr-chk i.p .ic{color:var(--warn-ink)}
.mr-go{align-self:flex-start;margin-top:2px}
.mr-shut{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.mr-shut .ic{width:14px;height:14px}
.mr-card{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.mr-h{font-size:14.5px;color:var(--ink)}
.mr-card .lead{margin:0}
.mr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;width:100%}
.mr-files{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mr-file{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;min-width:0}
.mr-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.mr-th{display:grid;place-items:center;width:100%;aspect-ratio:4/3;border:1.5px dashed var(--line-2);border-radius:var(--r-m);
  background:var(--field);overflow:hidden;color:var(--ink-soft);transition:border-color .2s,transform .2s}
.mr-file:hover .mr-th{border-color:var(--primary);transform:scale(1.03)}
.mr-th .ic{width:24px;height:24px} .mr-th img{width:100%;height:100%;object-fit:cover}
.mr-fl{font-size:12px;font-weight:600;color:var(--ink);text-align:center;line-height:1.3}
.mr-fl em{font-style:normal;color:var(--ink-faint);font-weight:500}
.mr-mine{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid var(--line)}
.mr-mine>div{display:flex;flex-direction:column;gap:2px;min-width:0} .mr-mine b{font-size:13.5px;color:var(--ink)}
.mr-mine span{font-size:12px;color:var(--ink-soft)} .mr-mine .mr-why{color:var(--blood-ink)}
.mr-mine .tag{flex:0 0 auto}
.mr-mine .mr-end{color:var(--ink)} .mr-mine .mr-end b{color:var(--primary)}
.mr-mine .mr-share{align-self:flex-start;margin-top:3px}
@media (max-width:420px){ .mr-files{gap:6px} .mr-fl{font-size:11.5px} }

/* সাধারণ/অন্য বিভাগের নোটিশের ছবি — তালিকায় কাটা ব্যানার, বিস্তারিত পাতায় পুরো ছবি */
.cover.nt-pic{height:auto;cursor:pointer;background:var(--surface-2)}
/* ⭐ owner ২০২৬-১০-০৩: কম্পিউটারে ১৫০px-এ কাটলে পোস্টারের মাঝের ফালিটুকু দেখাত — এখন পুরো ছবি
   নিজের অনুপাতে; খুব লম্বা হলে ৩৬০px-এ থেমে পুরোটাই (contain) দেখায় */
.cover.nt-pic img.art{display:block;width:100%;height:auto;max-height:360px;object-fit:contain;margin:0 auto}
.mr-pic{cursor:default}
.nt-detail>.cover.nt-pic{height:auto;max-height:none;cursor:default}
.nt-detail>.cover.nt-pic img.art{height:auto;max-height:72vh;object-fit:contain}

/* ==========================================================================
   📣 বিজ্ঞাপনের ব্যানার (owner ২০২৬-১০-০২) — পুরো চওড়া, নির্দিষ্ট উচ্চতা।
   ছবির মাপ 1200×300 (৪:১) — server/ads.php ads_size(); ফোনে ১০০px · ট্যাবে ১৩০px · বড় পর্দায় ১৮০px।
   ========================================================================== */
.adb{position:relative;display:block;width:100%;height:50px;margin:8px 0;border-radius:var(--r-m);overflow:hidden;
  background:var(--surface-2);box-shadow:0 2px 10px rgba(37,99,235,.14);text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;animation:adbIn .35s ease}
.adb img{display:block;width:100%;height:100%;object-fit:cover}
.adb:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,99,235,.24)}
.adb-tag{position:absolute;left:6px;top:6px;z-index:1;font-size:10.5px;font-weight:700;line-height:1.5;padding:0 6px;
  border-radius:3px;background:rgba(15,23,42,.62);color:#fff;pointer-events:none}
.adb-span{grid-column:1/-1}
@keyframes adbIn{from{opacity:0}to{opacity:1}}
/* ⭐ owner ২০২৬-১০-০২: "AdMob-এর মতো সরু" — ডিফল্ট slim ৫০/৬৪/৯০px; মাঝারি ১০০/১৩০/১৮০; বড় ১২৫/১৬৫/২৪০ */
.adb.adb-mid{height:100px} .adb.adb-big{height:125px}
.adb.adb-slim .adb-tag{top:3px;left:4px;font-size:9.5px;padding:0 4px}
@media (min-width:600px){.adb{height:64px}.adb.adb-mid{height:130px}.adb.adb-big{height:165px}}
@media (min-width:1024px){.adb{height:90px}.adb.adb-mid{height:180px}.adb.adb-big{height:240px}}
@media (prefers-reduced-motion:reduce){.adb{animation:none;transition:none}}