/* ==========================================================
   BanglaPen — স্টাইল
   রং: গাঢ় সবুজ #0B7A4B (লোগোর রং), সাদা, আর ঘরোয়া হালকা সবুজ।
   ইচ্ছে করেই সমতল: ছায়া নেই, গ্রেডিয়েন্ট নেই, আইকন নেই।
   ছোট পর্দার নিয়ম @container দিয়ে লেখা — "মোবাইল সংস্করণ" বেছে নিলেও একই নিয়ম চলে।
   ========================================================== */

@font-face {
  font-family: 'Kalpurush';
  src: url('../fonts/Kalpurush.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --emerald: #0B7A4B;
  --emerald-2: #0B7A4B;
  --emerald-deep: #086140;
  --forest: #086140;
  --forest-2: #0B7A4B;
  --forest-ink: #15241C;
  --orange: #D4EBDD;      /* (পুরনো নাম) হালকা সবুজ */
  --orange-2: #0B7A4B;
  --orange-deep: #086140;
  --cream: #F0F7F3;       /* (পুরনো নাম) খুব হালকা সবুজ-সাদা */
  --cream-2: #E1F0E7;
  --paper: #FFFFFF;
  --ink: #1C2A22;
  --ink-soft: #566359;
  --line: #DCE7E0;
  --field: #B7CDBE;
  --danger: #B23A1D;

  --f-head: 'Kalpurush', 'Noto Serif Bengali', 'Siyam Rupali', serif;
  --f-body: 'Kalpurush', 'Noto Sans Bengali', 'Siyam Rupali', system-ui, sans-serif;
  --f-latin: 'Poppins', 'Kalpurush', system-ui, sans-serif;

  --r: 6px;
  --shadow-sm: none;
  --shadow-md: 0 10px 28px rgba(21, 36, 28, .12);
}
@counter-style bengali { system: numeric; symbols: "০" "১" "২" "৩" "৪" "৫" "৬" "৭" "৮" "৯"; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  container-type: inline-size;
  container-name: page;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--emerald-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--forest); }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 400; line-height: 1.35; margin: 0 0 .5em; color: var(--forest-ink); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
small { font-size: .85em; }
code, kbd { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 0 .35em; }
:focus-visible { outline: 3px solid var(--orange-2); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--orange); color: var(--forest-ink); }
[hidden] { display: none !important; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--forest); color: #fff; padding: .5rem 1rem; z-index: 99; }
.skip:focus { left: 8px; top: 8px; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.inline { display: inline; margin: 0; }
.hp { position: absolute; left: -9999px; }
.more { font-size: .95rem; white-space: nowrap; font-weight: 600; text-decoration: none; color: var(--emerald-deep); }
.more:hover { text-decoration: underline; }


/* ---------- মাথা ---------- */
.brandrow { display: flex; align-items: center; gap: 1.6rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--forest-ink); flex: none; }
.brand:hover { color: var(--forest-ink); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.wordmark { font-family: var(--f-latin); font-weight: 600; font-size: 1.75rem; letter-spacing: -.015em; color: var(--emerald); line-height: 1.1; }
.tagline { font-size: .98rem; color: var(--ink-soft); margin-top: .15rem; }

.search { display: flex; flex: 1 1 260px; max-width: 360px; margin-left: auto; }
.search input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: .45rem .8rem; border: 1px solid var(--field); border-right: 0; border-radius: var(--r) 0 0 var(--r); background: #fff; color: var(--ink); }
.search input::placeholder { color: #82908A; }
.search button { font: inherit; font-size: .98rem; padding: 0 1rem; border: 1px solid var(--emerald); background: var(--emerald); color: #fff; border-radius: 0 var(--r) var(--r) 0; cursor: pointer; }
.search button:hover { background: var(--emerald-deep); border-color: var(--emerald-deep); }

.who { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; justify-content: flex-end; font-size: .98rem; }
.who a:not(.btn), .who .linkbtn { color: var(--forest-ink); text-decoration: none; }
.who a:not(.btn):hover, .who .linkbtn:hover { color: var(--emerald); text-decoration: underline; }
.who-me { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-soft); cursor: pointer; }
.linkbtn:hover { color: var(--danger); text-decoration: underline; }
.linkbtn.small { font-size: .88rem; }

.mainnav { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.navrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.navlinks { display: flex; flex-wrap: wrap; align-items: center; }
.mainnav a, .catmenu summary { display: inline-block; padding: .6rem .85rem; color: var(--forest-ink); text-decoration: none; font-size: 1.02rem; cursor: pointer; list-style: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.catmenu summary::-webkit-details-marker { display: none; }
.catmenu summary::after { content: " ▾"; font-size: .7em; }
.mainnav a:hover, .catmenu summary:hover, .catmenu[open] summary { color: var(--emerald); border-bottom-color: var(--emerald); }
.today { font-size: .9rem; color: var(--ink-soft); white-space: nowrap; }
.catmenu { position: static; }
.catpanel { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--paper); border: 1px solid var(--line); border-top: 0; padding: 1.4rem 1.8rem 1.2rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.3rem 2rem; max-height: 78vh; overflow-y: auto; max-width: 1180px; margin: 0 auto; box-shadow: var(--shadow-md); }
.catgroup .catparent { font-size: 1.08rem; color: var(--emerald); padding: 0; display: block; border: 0; margin: 0; }
.catgroup .catparent:hover { text-decoration: underline; border: 0; }
.catgroup ul { list-style: none; margin: .25rem 0 0; padding: 0; }
.catgroup li a { padding: .05rem 0; font-size: .93rem; color: var(--ink-soft); display: block; border: 0; margin: 0; }
.catgroup li a:hover { color: var(--emerald); text-decoration: underline; border: 0; }
/* ---------- বার্তা ---------- */
.flash { margin: 1.2rem 0 0; padding: .8rem 1.1rem; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--emerald); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.flash-err { border-left-color: var(--danger); }
.flash-info { border-left-color: var(--orange-2); }


/* ---------- প্রথম পাতার মাথা ---------- */
.hero { padding: 3.2rem 0 2.6rem; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.hero h1 { font-size: 3.4rem; line-height: 1.3; margin: 0 0 .9rem; color: var(--forest-ink); }
.squig { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6 C8 1 14 9 22 5 S36 2 44 6 S58 9 66 4 S82 2 90 6 S106 8 119 3' fill='none' stroke='%230B7A4B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% .32em; padding-bottom: .22em; }
.hero-short { font-size: 1.35rem; color: var(--ink-soft); margin-bottom: 1.6rem; }
.hero-search { display: flex; max-width: 560px; }
.hero-search input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: .8rem 1rem; border: 2px solid var(--emerald); border-right: 0; border-radius: var(--r) 0 0 var(--r); background: #fff; color: var(--ink); }
.hero-search button { font: inherit; font-size: 1.05rem; padding: 0 1.6rem; border: 2px solid var(--emerald); background: var(--emerald); color: #fff; border-radius: 0 var(--r) var(--r) 0; cursor: pointer; }
.hero-search button:hover { background: var(--emerald-deep); border-color: var(--emerald-deep); }
.hero-count { margin: 1rem 0 0; color: var(--ink-soft); font-size: 1rem; }
.hero-count b { color: var(--emerald); font-weight: 400; }

.steps { background: var(--cream); border: 1px dashed var(--emerald); border-radius: 8px; padding: 1.4rem 1.6rem 1.3rem; transform: rotate(.7deg); margin-top: .4rem; }
.steps h2 { font-size: 1.35rem; margin: 0 0 .9rem; color: var(--emerald-deep); }
.steps ol { list-style: none; margin: 0 0 1rem; padding: 0; }
.steps li { display: flex; gap: .8rem; align-items: baseline; margin-bottom: .75rem; line-height: 1.65; font-size: 1rem; }
.steps li > span { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--emerald); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; transform: translateY(.3rem); }
.steps p { margin: 0; display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.steps b { font-weight: 400; color: var(--forest-ink); text-decoration: underline; text-decoration-color: var(--emerald); text-underline-offset: 4px; }

.about-band { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.6rem 0; }
.about-band p { margin: 0; max-width: 860px; font-size: 1.12rem; line-height: 1.95; color: var(--forest-ink); }
/* ---------- মূল কাঠামো ---------- */
#main { padding-top: 2rem; padding-bottom: 3.5rem; min-height: 55vh; }
#main:not(.container) { padding: 0; }
.home-body { padding-top: 2.8rem; padding-bottom: 3.5rem; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 2.6rem; align-items: start; }
.narrow { max-width: 740px; margin: 0 auto; }
.narrow.wide-admin { max-width: 900px; }
.narrow-form { max-width: 580px; }

.page-head { margin-bottom: 1.8rem; }
.page-head h1 { font-size: 2.5rem; margin-bottom: .3rem; }
.lede { color: var(--ink-soft); font-size: 1.1rem; margin-bottom: .5rem; }
.crumbs { font-size: .92rem; color: var(--ink-soft); margin-bottom: .7rem; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--emerald-deep); text-decoration: underline; }


.block { margin-bottom: 2.8rem; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.block-title { font-size: 1.65rem; margin: 0; line-height: 1.3; color: var(--forest-ink); position: relative; }
.block-title::after { content: ""; position: absolute; left: 0; bottom: -.58rem; width: 100%; min-width: 2.5rem; height: 3px; background: var(--emerald); }
.block-head { padding-bottom: .65rem; }

/* ---------- কার্ড সাধারণ ---------- */
.card, .col-main > .prose, .narrow-form .form, .editor, .comments, .post, .pin, .welcome, .profile-head, .statline, .empty, .faqlist, .practice, .report-item, .peoplelist.wide, .rc-page, .adminlist {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
}

/* ---------- বোতাম ---------- */
.btn { display: inline-block; font: inherit; font-size: 1rem; padding: .5rem 1.3rem; border: 1px solid var(--emerald); border-radius: var(--r); background: var(--emerald); color: #fff; text-decoration: none; cursor: pointer; line-height: 1.5; transition: background .15s; }
.btn:hover { background: var(--emerald-deep); border-color: var(--emerald-deep); color: #fff; }
.btn-orange { }
.btn-ghost { background: transparent; color: var(--emerald); }
.btn-ghost:hover { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.btn-small { font-size: .95rem; padding: .22rem .9rem; }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.textlink { text-decoration-color: var(--emerald); }

/* ---------- লেখার তালিকা ---------- */
.entries, .cardgrid { display: grid; gap: 0; }
.cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.2rem; }
.entry { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.4rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.entries .entry:first-child { border-top: 0; padding-top: 0; }
.entry-img { display: block; position: relative; background: var(--cream-2); overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; align-self: start; }
.entry-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.entry-img.ph, .lead-img.ph { display: flex; align-items: center; justify-content: center; background: var(--cream-2); }
.ph-letter { font-family: var(--f-head); font-size: 4.2rem; line-height: 1; color: var(--emerald); opacity: .85; transform: rotate(-4deg); }
.entry-body { display: flex; flex-direction: column; min-width: 0; }
.entry-cat { font-size: .92rem; margin-bottom: .2rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.entry-cat a { color: var(--emerald); text-decoration: none; }
.entry-cat a:hover { text-decoration: underline; }
.stamp { font-size: .82rem; color: var(--emerald-deep); border: 1px solid var(--emerald); padding: 0 .5rem; border-radius: 3px; line-height: 1.5; }
.entry-title { font-size: 1.45rem; margin: 0 0 .35rem; line-height: 1.4; }
.entry-title a { color: var(--forest-ink); text-decoration: none; }
.entry-title a:hover { color: var(--emerald); }
.entry-excerpt { color: var(--ink-soft); margin-bottom: .7rem; font-size: 1.02rem; line-height: 1.8; }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; font-size: .92rem; color: var(--ink-soft); margin-top: auto; }
.entry-meta .by { display: inline-flex; align-items: center; gap: .45rem; color: var(--forest-ink); text-decoration: none; }
.entry-meta .by:hover { color: var(--emerald); text-decoration: underline; }
.entry-meta .stats { margin-left: auto; display: inline-flex; gap: .9rem; align-items: center; }
.entry-grid { grid-template-columns: 1fr; gap: .9rem; padding: 0; border: 0; }
.entry-grid .entry-img { aspect-ratio: 3 / 2; }
.entry-grid .entry-meta .dotsep { display: none; }
.entry-grid .entry-title { font-size: 1.3rem; }

.leadgrid { align-items: start; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2.6rem; margin-bottom: 1rem; }
.lead-img { display: block; position: relative; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; background: var(--cream-2); }
.lead-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lead-img .ph-letter { font-size: 7rem; }
.lead-img.ph { aspect-ratio: 16 / 9; }
.lead-story .entry-cat { margin-top: 1rem; }
.lead-story h2 { font-size: 2.45rem; margin: .3rem 0 .6rem; line-height: 1.35; }
.lead-story h2 a { color: var(--forest-ink); text-decoration: none; }
.lead-story h2 a:hover { color: var(--emerald); }
.lead-story .entry-excerpt { font-size: 1.12rem; }
.minilist { display: grid; align-content: start; counter-reset: m; }
.mini { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .4rem; padding: 1rem 0; border-top: 1px solid var(--line); counter-increment: m; }
.mini:first-child { border-top: 0; padding-top: 0; }
.mini::before { content: counter(m, bengali); font-size: 1.9rem; line-height: 1.2; color: var(--emerald); opacity: .55; }
.mini-img { display: none; }
.mini h3 { font-size: 1.2rem; margin: .1rem 0 .25rem; line-height: 1.45; }
.mini h3 a { color: var(--forest-ink); text-decoration: none; }
.mini h3 a:hover { color: var(--emerald); }
.mini small { color: var(--ink-soft); display: block; }
.stars { white-space: nowrap; letter-spacing: 1px; }
.star { color: #CBDFD2; }
.star.on { color: var(--orange-2); }

.empty { padding: 2.4rem 1.5rem; text-align: center; color: var(--ink-soft); border-style: dashed; box-shadow: none; }
.empty-title { font-family: var(--f-head); font-size: 1.5rem; color: var(--forest-ink); margin-bottom: .3rem; }

.subcats { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.6rem; }
.subcats a { display: inline-block; padding: .2rem .95rem; border: 1px solid var(--line); border-radius: 99px; font-size: .95rem; color: var(--forest); text-decoration: none; background: var(--paper); box-shadow: var(--shadow-sm); }
.subcats a:hover { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.subcats span { margin-left: .4rem; color: var(--ink-soft); font-size: .82rem; }

/* ---------- পেজিনেশন ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.2rem; margin: 2.2rem 0 0; }
.pg-nums { display: flex; gap: .3rem; align-items: center; }
.pg-nums a, .pg-cur { min-width: 2.5rem; text-align: center; padding: .25rem .6rem; border-radius: 10px; text-decoration: none; color: var(--forest); background: var(--paper); border: 1px solid var(--line); }
.pg-nums a:hover { background: var(--orange); border-color: var(--orange); color: var(--forest-ink); }
.pg-cur { background: var(--forest); color: #fff; font-weight: 700; border-color: var(--forest); }
.pg-gap { color: var(--ink-soft); }
.pg-step { font-weight: 700; text-decoration: none; }

/* ---------- সাইডবার ---------- */
.sidebar { font-size: 1rem; display: grid; gap: 1.4rem; }
.widget { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 1.2rem 1.3rem 1.1rem; border-top: 3px solid var(--emerald); margin: 0; }
.widget-title { font-size: 1.3rem; margin: 0 0 .8rem; }
.online-line { margin-bottom: .7rem; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #B7B09E; margin-right: .3rem; }
.dot.on { background: var(--emerald); box-shadow: 0 0 0 3px rgba(80, 200, 120, .28); }
.faces { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0 0 .7rem; }
.widget-notice { background: var(--cream); }
.notice-title { font-size: 1.1rem; margin-bottom: .2rem; }
.notice-body { color: var(--ink-soft); margin-bottom: .4rem; }
.toplist { list-style: none; padding: 0; margin: 0; }
.toplist li { display: flex; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--line); align-items: flex-start; }
.toplist li:first-child { border-top: 0; padding-top: 0; }
.rank { font-family: var(--f-head); font-size: 1.2rem; line-height: 1; min-width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; background: var(--forest); color: #fff; border-radius: 50%; flex: none; }
.toplist li:nth-child(1) .rank { background: var(--emerald); color: #fff; }
.toplist li:nth-child(2) .rank { background: var(--emerald); color: #fff; }
.toplist a, .recentlist a.rc-text { color: var(--forest-ink); text-decoration: none; line-height: 1.55; display: inline; }
.toplist a:hover, .recentlist a.rc-text:hover { color: var(--emerald-deep); text-decoration: underline; }
.toplist small, .recentlist small { display: block; color: var(--ink-soft); }
.recentlist { list-style: none; padding: 0; margin: 0 0 .7rem; }
.recentlist li { padding: .65rem 0; border-top: 1px solid var(--line); }
.recentlist li:first-child { border-top: 0; padding-top: 0; }
.widget-join { background: var(--emerald); color: #fff; border: 0; }
.widget-join .widget-title { color: #fff; }
.widget-join p { color: #E1F2E8; }
.widget-join .btn { background: #fff; color: var(--emerald-deep); border-color: #fff; }

/* ---------- অবতার ---------- */
.avatar { border-radius: 50%; object-fit: cover; display: inline-block; flex: none; vertical-align: middle; background: var(--cream-2); }
.avatar-letter { display: inline-flex; align-items: center; justify-content: center; color: var(--forest-ink); font-family: var(--f-head); line-height: 1; }

/* ---------- একটি পোস্ট ---------- */
.post { padding: 2.2rem 2.4rem 1.4rem; }
.post-title { font-size: 2.8rem; line-height: 1.35; margin-bottom: 1rem; }
.post-byline { display: flex; align-items: center; gap: .9rem; padding: .9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; flex-wrap: wrap; }
.by-avatar:hover { background: transparent; }
.by-text { flex: 1; min-width: 180px; line-height: 1.5; }
.by-name { font-weight: 700; font-size: 1.1rem; color: var(--forest-ink); text-decoration: none; }
.by-name:hover { color: var(--emerald-deep); text-decoration: underline; }
.by-sub { display: block; font-size: .9rem; color: var(--ink-soft); }
.post-tools { display: flex; gap: .5rem; flex-wrap: wrap; }
.post-cover { margin: 0 -2.4rem 1.8rem; }
.post-cover img { width: 100%; max-height: 460px; object-fit: cover; }

.prose { font-size: 1.2rem; line-height: 2.05; overflow-wrap: anywhere; }
.prose p { margin-bottom: 1.2em; }
.prose h2 { font-size: 1.7rem; margin: 1.8em 0 .5em; padding-left: .8rem; border-left: 5px solid var(--orange); }
.prose h3 { font-size: 1.25rem; margin: 1.4em 0 .4em; color: var(--emerald-deep); }
.prose img { border-radius: 10px; margin: 1.3rem auto; box-shadow: var(--shadow-sm); }
.prose figure { margin: 1.5rem 0; }
.prose blockquote { margin: 1.6rem 0; padding: 1rem 1.5rem; border-left: 6px solid var(--emerald); background: #EAF8EF; font-family: var(--f-head); font-size: 1.25rem; border-radius: 0 12px 12px 0; color: var(--forest); }
.prose ul { padding-left: 1.4em; }
.prose a { word-break: break-word; }
.col-main > .prose { padding: 1.6rem 2rem; font-size: 1.08rem; line-height: 1.95; }
.col-main > .prose h3 { font-size: 1.45rem; }
.legal h3 { font-size: 1.35rem; }

.reactions { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; align-items: center; justify-content: space-between; margin: 2.2rem 0 0; padding: 1.1rem 1.3rem; background: #EEF9F2; border-radius: 14px; border: 1px solid var(--line); }
.react-like { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.likebtn { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-weight: 700; padding: .45rem 1.15rem; border: 2px solid var(--forest); border-radius: 99px; background: #fff; color: var(--forest); cursor: pointer; text-decoration: none; font-size: 1rem; }
.likebtn:hover { background: var(--orange); border-color: var(--orange); color: var(--forest-ink); }
.likebtn.on { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.count { color: var(--ink-soft); font-size: .95rem; }
.react-rate { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.rate-label { font-size: .95rem; color: var(--ink-soft); }
.rate-form { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 0; }
.rate-form small { margin-right: .7rem; color: var(--ink-soft); order: 10; }
.rstar { background: none; border: 0; font-size: 1.9rem; line-height: 1; padding: 0 .08rem; cursor: pointer; color: #CBDFD2; }
.rstar:hover, .rstar:hover ~ .rstar, .rstar.mine, .rstar.mine ~ .rstar { color: var(--orange-2); }

.authorbox { display: flex; gap: 1.2rem; align-items: center; padding: 1.4rem 0 .6rem; flex-wrap: wrap; }
.authorbox-text { flex: 1; min-width: 220px; }
.authorbox-name { font-family: var(--f-head); font-size: 1.4rem; line-height: 1.3; }
.authorbox-name a { color: var(--forest-ink); text-decoration: none; }
.authorbox-text p { margin: .2rem 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }
.mini-stats { font-size: .92rem !important; }

/* ---------- মন্তব্য ---------- */
.comments { margin: 1.8rem 0 2.6rem; padding: 1.8rem 2.2rem 2rem; }
.comments .block-title { margin-bottom: 1.2rem; }
.comment { display: flex; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.comment-main { flex: 1; min-width: 0; }
.comment-head { display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; font-size: .97rem; }
.comment-head time { color: var(--ink-soft); font-size: .86rem; }
.author-link { font-weight: 700; color: var(--forest-ink); text-decoration: none; }
.author-link:hover { color: var(--emerald-deep); text-decoration: underline; }
.badge { font-size: .76rem; font-weight: 700; background: var(--emerald); color: #fff; padding: 0 .55rem; border-radius: 99px; }
.comment-body { margin-top: .2rem; line-height: 1.85; font-size: 1.05rem; }
.comment-body p { margin-bottom: .6em; }
.comment-body img { max-width: 100%; }
.comment-img { max-width: 320px; max-height: 280px; border-radius: 10px; border: 1px solid var(--line); margin: .4rem 0; }
.comment-form { margin-top: 1.6rem; padding: 1.4rem; background: #EEF9F2; border: 1px solid var(--line); border-radius: 14px; }
.comment-form h3 { font-size: 1.3rem; }
.login-nudge { margin: 0; }
.form-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .8rem; }
.form-tools .btn { margin-left: auto; }
.file-preview img { max-height: 54px; border-radius: 6px; border: 1px solid var(--line); }
.filebtn { display: inline-block; font-size: .92rem; padding: .3rem .95rem; border: 2px solid var(--forest); border-radius: 10px; background: #fff; cursor: pointer; font-weight: 700; color: var(--forest); }
.filebtn:hover { background: var(--orange); border-color: var(--orange); color: var(--forest-ink); }
.filebtn input[type=file] { display: none; }

/* ---------- ফর্ম ---------- */
.narrow-form .form, .editor { padding: 1.8rem 2rem 1.6rem; }
.field { margin-bottom: 1.3rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
label { display: block; font-weight: 700; font-size: 1rem; margin-bottom: .3rem; color: var(--forest-ink); }
label small { font-weight: 400; color: var(--ink-soft); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); background: #fff;
  border: 2px solid var(--field); border-radius: 12px; padding: .65rem .9rem;
}
textarea { line-height: 1.9; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--emerald-2); box-shadow: 0 0 0 4px rgba(80, 200, 120, .25); }
.check { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; font-size: 1rem; cursor: pointer; }
.check input { margin-top: .5rem; accent-color: var(--emerald-deep); width: 1.05rem; height: 1.05rem; }
.hint { font-size: .9rem; color: var(--ink-soft); margin: .35rem 0 0; word-break: break-all; }
.field-error { color: var(--danger); font-size: .95rem; margin: .35rem 0 0; }
.field-error.big { background: #FBE3DA; border-left: 5px solid var(--danger); padding: .7rem 1rem; font-size: 1rem; margin-bottom: 1rem; border-radius: 0 10px 10px 0; }
.form-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.5rem; }
.slugbox { display: flex; align-items: center; border: 2px solid var(--field); border-radius: 12px; background: #fff; overflow: hidden; }
.slugbox span { padding: 0 .2rem 0 .8rem; color: var(--ink-soft); font-size: .82rem; white-space: nowrap; max-width: 48%; overflow: hidden; text-overflow: ellipsis; }
.slugbox input { border: 0; border-radius: 0; flex: 1; min-width: 0; padding-left: .2rem; box-shadow: none !important; }
.slugbox:focus-within { border-color: var(--emerald-2); box-shadow: 0 0 0 4px rgba(80, 200, 120, .25); }
.avatar-edit { display: flex; gap: 1.2rem; align-items: center; }
.pwbox { margin: 1rem 0; border: 2px dashed var(--field); border-radius: 12px; padding: .8rem 1.1rem; }
.pwbox summary { cursor: pointer; font-weight: 700; }
.pwbox .field { margin-top: 1rem; }
.cover-current { display: flex; gap: 1rem; align-items: center; margin-bottom: .6rem; }
.cover-current img { border-radius: 8px; border: 1px solid var(--line); }

/* এডিটর */
.editor-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.editor-top label { margin: 0; }
.tabs { display: flex; gap: .3rem; background: var(--cream); padding: .2rem; border-radius: 10px; }
.tab { font: inherit; font-size: .95rem; background: none; border: 0; padding: .15rem .9rem; cursor: pointer; color: var(--ink-soft); border-radius: 8px; }
.tab.on { background: var(--forest); color: #fff; }
.kbbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .6rem; font-size: .92rem; }
.kb-label { color: var(--ink-soft); margin-right: .2rem; }
.kbbar button { font: inherit; font-size: .9rem; padding: .1rem .85rem; border: 2px solid var(--field); border-radius: 99px; background: #fff; color: var(--forest); cursor: pointer; }
.kbbar button:hover { background: #E4F6EB; }
.kbbar button.on { background: var(--forest); border-color: var(--forest); color: #fff; }
.kb-help { margin-left: .5rem; font-size: .9rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .5rem; border: 2px solid var(--field); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--cream); position: relative; }
.toolbar button, .toolbar .filebtn, .toolbar summary { font: inherit; font-size: .9rem; padding: .15rem .8rem; border: 1px solid var(--field); border-radius: 8px; background: #fff; color: var(--forest-ink); cursor: pointer; line-height: 1.6; box-shadow: none; }
.toolbar button:hover, .toolbar summary:hover, .toolbar .filebtn:hover { background: var(--orange); border-color: var(--orange); }
.toolbar + textarea { border-radius: 0 0 12px 12px; }
.preview-pane { border: 2px solid var(--field); border-radius: 12px; padding: 1.2rem 1.5rem; background: #fff; min-height: 220px; }
.preview-pane .pv-title { font-family: var(--f-head); font-size: 2.2rem; margin-bottom: 1rem; }
.editor-foot { display: flex; justify-content: space-between; font-size: .9rem; margin-top: .4rem; }
.emo { position: relative; display: inline-block; }
.emo summary { list-style: none; display: inline-block; padding: .15rem .8rem; border: 1px solid var(--field); border-radius: 8px; background: #fff; cursor: pointer; font-size: .9rem; }
.emo summary::-webkit-details-marker { display: none; }
.emo-grid { position: absolute; z-index: 20; top: 110%; left: 0; width: 260px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: .45rem; background: #fff; border: 2px solid var(--forest); border-radius: 12px; box-shadow: var(--shadow-md); }
.emo-grid button { font-size: 1.35rem; background: none; border: 0; padding: .2rem; cursor: pointer; border-radius: 6px; line-height: 1.3; }
.emo-grid button:hover { background: #E4F6EB; }
.markup-help { margin-top: 1.6rem; font-size: .96rem; color: var(--ink-soft); }
.markup-help summary { cursor: pointer; font-weight: 700; color: var(--forest-ink); }
.markup-help ul { margin-top: .5rem; }
.dialog { border: 0; border-radius: 8px; background: var(--paper); padding: 1.5rem; width: min(92vw, 440px); color: var(--ink); box-shadow: var(--shadow-md); }
.dialog::backdrop { background: rgba(10, 42, 25, .55); }
.dialog h3 { font-size: 1.4rem; }
.dialog label { margin-top: .8rem; }
.dialog-actions { display: flex; gap: .6rem; margin-top: 1.2rem; }

.practice { padding: 1.2rem; margin-bottom: 1.6rem; border-style: dashed; box-shadow: none; }
.table-wrap { overflow-x: auto; margin-bottom: 1.2rem; border-radius: 12px; border: 1px solid var(--line); }
.cheat { border-collapse: collapse; width: 100%; font-size: 1rem; background: #fff; }
.cheat th, .cheat td { border-bottom: 1px solid var(--line); padding: .45rem .8rem; text-align: left; }
.cheat th { background: var(--forest); color: #fff; font-weight: 400; }

/* ---------- প্রোফাইল ও তালিকা ---------- */
.profile-head { display: flex; gap: 1.6rem; align-items: flex-start; margin-bottom: 1.2rem; padding: 1.8rem 2rem; position: relative; }
.profile-avatar { position: relative; z-index: 1;  }
.profile-avatar .avatar { border: 5px solid var(--paper); box-shadow: var(--shadow-sm); }
.profile-id { flex: 1; min-width: 0; position: relative; z-index: 1; }
.profile-id h1 { font-size: 2.3rem; margin-bottom: .1rem; }
.handle { color: var(--ink-soft); margin-bottom: .6rem; }
.bio { max-width: 580px; }
.online-chip { font-family: var(--f-body); font-size: .85rem; color: var(--emerald-deep); margin-left: .6rem; vertical-align: middle; background: #EAF8EF; border-radius: 99px; padding: 0 .7rem; }
.profile-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.statline { display: flex; flex-wrap: wrap; margin: 0 0 1.6rem; padding: .4rem 0; }
.statline > div { flex: 1 1 130px; padding: .8rem 1.2rem; border-left: 1px solid var(--line); }
.statline > div:first-child { border-left: 0; }
.statline dt { font-size: .88rem; color: var(--ink-soft); line-height: 1.4; }
.statline dt a { color: var(--ink-soft); }
.statline dd { margin: 0; font-family: var(--f-head); font-size: 2rem; line-height: 1.25; color: var(--emerald-deep); }
.statline dd.dd-text { font-size: 1.3rem; padding-top: .45rem; }
.subtabs { display: flex; gap: .4rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.subtabs a { padding: .3rem 1.2rem; text-decoration: none; color: var(--forest); background: var(--paper); border: 1px solid var(--line); border-radius: 99px; }
.subtabs a:hover { background: #E4F6EB; }
.subtabs a.on { background: var(--forest); color: #fff; border-color: var(--forest); }
.peoplelist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.peoplelist li a { display: flex; gap: .9rem; align-items: center; padding: .9rem 1.1rem; text-decoration: none; color: var(--forest-ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.peoplelist li a:hover { border-color: var(--emerald); }
.peoplelist small { display: block; color: var(--ink-soft); }
.peoplelist em { display: block; font-style: normal; color: var(--ink-soft); font-size: .96rem; }
.peoplelist.wide { grid-template-columns: 1fr; gap: 0; background: none; border: 0; box-shadow: none; gap: .9rem; }
.pl-text { min-width: 0; }
.av-wrap { position: relative; flex: none; }
.av-dot { position: absolute; right: -1px; bottom: -1px; margin: 0; border: 2px solid var(--paper); width: 14px; height: 14px; box-shadow: none; }
.peoplelist.compact { grid-template-columns: 1fr; }

.rc-page { list-style: none; padding: .4rem 1.6rem; margin: 0; }
.rc-page li { display: flex; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.rc-page li:first-child { border-top: 0; }
.rc-line { margin: 0 0 .2rem; font-size: 1rem; }
.rc-line time { color: var(--ink-soft); font-size: .86rem; margin-left: .4rem; }
.rc-body { margin: 0; color: var(--ink-soft); }

.noticeboard { display: grid; gap: 1.5rem; }
.pin { background: #EEF9F2; border-left: 5px solid var(--emerald); padding: 1.3rem 1.6rem .7rem; position: relative; }
.pin time { font-size: .88rem; color: var(--orange-deep); font-weight: 700; }
.pin h2 { font-size: 1.5rem; margin: .1rem 0 .4rem; }
.pin .prose { font-size: 1.05rem; line-height: 1.9; }

.faqlist { padding: .4rem 1.6rem; margin-bottom: 1.2rem; }
.faqlist details { border-top: 1px solid var(--line); padding: 1rem 0; }
.faqlist details:first-child { border-top: 0; }
.faqlist summary { cursor: pointer; font-family: var(--f-head); font-size: 1.25rem; list-style: none; padding-right: 2rem; position: relative; color: var(--forest-ink); }
.faqlist summary::-webkit-details-marker { display: none; }
.faqlist summary::after { content: "+"; position: absolute; right: 0; top: 0; font-family: var(--f-body); color: #fff; background: var(--emerald-deep); width: 1.6rem; height: 1.6rem; border-radius: 50%; text-align: center; line-height: 1.5rem; font-size: 1.2rem; }
.faqlist details[open] summary::after { content: "–"; background: var(--emerald); color: #fff; }
.faqlist details p { margin: .6rem 0 0; color: var(--ink-soft); }

.adminlist { list-style: none; padding: .3rem 1.4rem; margin: 1rem 0 0; }
.adminlist li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.adminlist li:first-child { border-top: 0; }
.adminlist small { color: var(--ink-soft); }
.report-item { padding: 1rem 1.4rem; margin-bottom: .8rem; }
.report-meta { font-size: .92rem; color: var(--ink-soft); margin-bottom: .3rem; }

.errorpage { text-align: center; padding: 3rem 0; }
.errcode { font-family: var(--f-head); font-size: 7rem; line-height: 1; margin: 0; color: var(--orange); }


/* ---------- বিষয়-সূচি ---------- */
.catindex { margin-top: 3.4rem; margin-bottom: 0; }
.catgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2.6rem; }
.catitem { border-top: 1px solid var(--line); padding-top: .7rem; }
.cat-head { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; color: var(--forest-ink); margin-bottom: .3rem; }
.cat-no { font-size: .95rem; color: var(--emerald); }
.cat-name { font-size: 1.25rem; line-height: 1.35; }
.cat-count { margin-left: auto; font-size: .9rem; color: var(--ink-soft); }
.cat-head:hover .cat-name { color: var(--emerald); text-decoration: underline; }
.cat-subs { margin: 0; line-height: 1.75; font-size: .96rem; color: var(--ink-soft); }
.cat-subs a { color: var(--ink-soft); text-decoration-color: var(--field); }
.cat-subs a:hover { color: var(--emerald); }
.cat-subs .cat-more { color: var(--emerald); }

/* ---------- পাদ ---------- */
.sitefoot { background: var(--emerald-deep); color: #D4EBDD; padding: 2.8rem 0 1.3rem; font-size: 1rem; margin-top: 1rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.2rem; }
.foot-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.foot-brand img { background: #fff; border-radius: 50%; }
.foot-brand .wordmark { color: #fff; font-size: 1.5rem; }
.foot-about p { color: #BFDECB; max-width: 360px; }
.sitefoot h4 { font-size: 1.15rem; margin-bottom: .55rem; color: #fff; }
.sitefoot ul { list-style: none; padding: 0; margin: 0; }
.sitefoot li { margin-bottom: .25rem; }
.sitefoot a { color: #E6F3EA; text-decoration: none; }
.sitefoot a:hover { color: #fff; text-decoration: underline; }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .22); color: #BFDECB; font-size: .92rem; }
.viewswitch a.current { text-decoration: underline; color: #fff; }

/* ==========================================================
   ছোট পর্দা (পেজের প্রস্থ ৯৬০px বা কম)।
   "মোবাইল সংস্করণ" বেছে নিলে body-র প্রস্থ ৪৮০px হয়ে যায়, ফলে একই নিয়ম চলে।
   ========================================================== */
html.view-mobile body { max-width: 480px; margin: 0 auto; box-shadow: 0 0 0 1px var(--line); }
html.view-full body { min-width: 1180px; }

@container page (max-width: 960px) {
  body { font-size: 17px; }
  .container { padding: 0 16px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .brandrow { flex-wrap: wrap; gap: .8rem 1rem; }
  .search { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }
  .who { margin-left: auto; }
  .wordmark { font-size: 1.55rem; }
  .navrow { flex-direction: column; align-items: stretch; gap: 0; }
  .navlinks { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; margin: 0 -16px; padding: 0 10px; }
  .today { display: none; }
  .catpanel { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.1rem; }
  .hero { padding: 2rem 0 1.8rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero h1 { font-size: 2.3rem; }
  .hero-short { font-size: 1.15rem; }
  .steps { transform: none; }
  .about-band p { font-size: 1.05rem; }
  .home-body { padding-top: 1.8rem; }
  .leadgrid { grid-template-columns: 1fr; gap: 1.6rem; }
  .lead-story h2 { font-size: 1.85rem; }
  .cardgrid { grid-template-columns: 1fr; }
  .entry { grid-template-columns: 120px minmax(0, 1fr); gap: 1rem; }
  .entry-title { font-size: 1.25rem; }
  .entry-meta .stats { margin-left: 0; }
  .ph-letter { font-size: 3rem; }
  .post { padding: 1.4rem 1.2rem 1rem; }
  .post-cover { margin: 0 -1.2rem 1.4rem; }
  .post-title { font-size: 2.05rem; }
  .prose { font-size: 1.12rem; line-height: 2; }
  .col-main > .prose { padding: 1.2rem; }
  .comments { padding: 1.3rem 1.1rem 1.4rem; }
  .catgrid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .peoplelist { grid-template-columns: 1fr; }
  .profile-head { flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.3rem 1.2rem; }
  .statline > div { flex-basis: 45%; border-left: 0; }
  .page-head h1 { font-size: 2rem; }
  .form-tools .btn { margin-left: 0; }
  .narrow-form .form, .editor { padding: 1.3rem 1.1rem; }
  .block-title { font-size: 1.45rem; }
}
@container page (max-width: 560px) {
  .entry { grid-template-columns: 1fr; gap: .8rem; }
  .entry .entry-img { aspect-ratio: 16 / 9; }
  .catgrid, .foot-grid, .catpanel { grid-template-columns: 1fr; }
  .reactions { flex-direction: column; align-items: flex-start; }
  .slugbox span { display: none; }
  .hero h1 { font-size: 2rem; }
  .hero-search input, .hero-search button { padding-top: .65rem; padding-bottom: .65rem; }
  .who .linkbtn, .who a:not(.btn):not(.who-me) { font-size: .95rem; }
}

@media print {
  .masthead, .sitefoot, .sidebar, .reactions, .comment-form, .post-tools, .kbbar, .hero, .about-band { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .layout { display: block; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ঘরের ভেতরের সার্চ বক্স — সাধারণ ইনপুটের নিয়মের চেয়ে জোরালো */
.search input[type=search], .hero-search input[type=search] { border-width: 1px; border-right: 0; border-radius: var(--r) 0 0 var(--r); padding: .45rem .8rem; box-shadow: none; }
.hero-search input[type=search] { border-width: 2px; border-right: 0; padding: .8rem 1rem; }
.search input[type=search]:focus, .hero-search input[type=search]:focus { box-shadow: none; border-color: var(--emerald-deep); }

/* ---------- বিভাগের পরিচিতি ও আরও বিভাগ ---------- */
.cat-intro { margin: 0 0 2rem; padding: 0 0 .4rem; border-bottom: 1px solid var(--line); }
.cat-intro h2 { font-size: 1.6rem; color: var(--emerald-deep); margin-bottom: .7rem; }
.cat-intro p { font-size: 1.08rem; line-height: 2; margin-bottom: 1em; }
.cat-intro a { color: var(--emerald); text-decoration-color: var(--field); }
.cat-intro a:hover { color: var(--emerald-deep); }
.cat-intro-subs { background: var(--cream); padding: .8rem 1rem; border-left: 4px solid var(--emerald); font-size: 1rem !important; line-height: 1.9 !important; }
.cat-more-nav { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.cat-more-nav h2 { font-size: 1.3rem; margin-bottom: .7rem; }
.cat-more-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.cat-more-nav a { color: var(--emerald-deep); text-decoration-color: var(--field); }

.seo-box { background: var(--cream); border: 1px dashed var(--field); border-radius: var(--r); padding: .7rem 1rem; margin-bottom: 1rem; }
.seo-box summary { cursor: pointer; color: var(--emerald-deep); }
.seo-box input, .seo-box textarea { width: 100%; margin: .2rem 0 .8rem; }

/* ---------- আজকের তারিখ ---------- */
.widget-date { background: linear-gradient(180deg, #F0F7F3, #fff 70%); }
.widget-date .widget-title a { color: inherit; text-decoration: none; }
.wd-weekday { margin: 0 0 .5rem; color: var(--emerald-deep); font-size: 1.05rem; }
.wd-rows { margin: 0 0 .7rem; }
.wd-rows > div { display: flex; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.wd-rows dt { color: var(--ink-soft); font-size: .92rem; }
.wd-rows dd { margin: 0; font-weight: 700; text-align: right; }
a.today { color: inherit; text-decoration: none; }
a.today:hover { text-decoration: underline; }

.crumbs { font-size: .92rem; color: var(--ink-soft); margin: 0 0 .8rem; }
.crumbs a { color: var(--emerald-deep); }
.datepage { max-width: 860px; }
.dp-head h1 { font-size: 2.1rem; margin: 0 0 .3rem; }
.dp-lead { margin: 0 0 1rem; color: var(--ink-soft); }
.dp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1rem; }
.dp-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1rem .9rem; text-align: center; display: flex; flex-direction: column; gap: .15rem; }
.dp-tile-main { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.dp-kind { font-size: .88rem; opacity: .85; }
.dp-big { font-size: 3rem; line-height: 1.1; }
.dp-m { font-size: 1.15rem; font-weight: 700; }
.dp-tile small { opacity: .8; }
.dp-ar { font-size: 1.15rem; opacity: 1; }
.dp-summary { background: #F0F7F3; border-left: 4px solid var(--emerald); padding: .8rem 1rem; border-radius: 0 var(--r) var(--r) 0; margin: 0 0 1rem; }
.dp-step { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.dp-step a { padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--emerald-deep); background: #fff; }
.dp-step a:hover, .dp-step .dp-now { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.dp-block { margin: 1.6rem 0; }
.dp-block h2 { font-size: 1.5rem; margin: 0 0 .7rem; }
.dp-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.dp-table th, .dp-table td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.dp-table th { width: 38%; background: #F0F7F3; font-weight: 600; }
.dp-note { color: var(--ink-soft); font-size: .92rem; margin-top: .6rem; }
.dp-calhead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.dp-calhead h2 { margin: 0; text-align: center; flex: 1; }
.dp-calhead a { text-decoration: none; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--emerald-deep); background: #fff; }
.dp-calsub { text-align: center; color: var(--ink-soft); margin: .3rem 0 .8rem; font-size: .95rem; }
.dp-cal { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.dp-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-dow span { background: var(--emerald); color: #fff; text-align: center; padding: .45rem 0; font-size: .9rem; }
.dp-empty { min-height: 4.2rem; background: #FAFCFB; border: 1px solid #EEF3F0; }
.dp-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 4.2rem; border: 1px solid #EEF3F0; text-decoration: none; color: var(--ink); padding: .2rem .1rem; }
.dp-cell b { font-size: 1.15rem; line-height: 1.2; }
.dp-cell i { font-style: normal; font-size: .78rem; color: var(--emerald-deep); line-height: 1.2; text-align: center; }
.dp-cell em { font-style: normal; font-size: .72rem; color: var(--ink-soft); line-height: 1.2; text-align: center; }
.dp-cell:hover { background: #F0F7F3; }
.dp-cell.is-fri b { color: var(--danger); }
.dp-cell.is-sel { background: var(--emerald); }
.dp-cell.is-sel b, .dp-cell.is-sel i, .dp-cell.is-sel em { color: #fff; }
.dp-legend { color: var(--ink-soft); font-size: .88rem; margin-top: .5rem; }
.dp-legend i, .dp-legend em { font-style: normal; }
.dp-legend i { color: var(--emerald-deep); }
.dp-text p { line-height: 1.85; margin: 0 0 .8rem; }
.dp-faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .7rem 1rem; margin-bottom: .5rem; }
.dp-faq summary { cursor: pointer; font-weight: 700; }
.dp-faq details p { margin: .6rem 0 .2rem; line-height: 1.8; }
.dp-more { padding-left: 1.1rem; line-height: 2; }
@media (max-width: 640px) {
  .dp-tiles { grid-template-columns: 1fr; }
  .dp-big { font-size: 2.4rem; }
  .dp-head h1 { font-size: 1.7rem; }
  .dp-cell { min-height: 3.6rem; }
  .dp-cell i, .dp-cell em { font-size: .66rem; }
  .dp-cell b { font-size: 1rem; }
}

/* ---------- লেখার কার্ড: ছবি না থাকলে ফাঁকা জায়গা নেই ---------- */
.entry.no-img { grid-template-columns: minmax(0, 1fr); }
.lead-story.no-img { border-left: 4px solid var(--emerald); padding-left: 1.4rem; }
.lead-story.no-img .entry-cat { margin-top: 0; }

/* ---------- আরও পড়ুন ---------- */
.readmore { margin: 2rem 0 1.4rem; padding: 1.1rem 1.3rem; background: #F0F7F3; border: 1px solid #D4EBDD; border-left: 4px solid var(--emerald); border-radius: var(--r); }
.readmore h2 { font-size: 1.35rem; margin: 0 0 .5rem; color: var(--emerald-deep); }
.readmore ul { list-style: none; margin: 0; padding: 0; }
.readmore li { border-top: 1px dashed #BCD9C7; }
.readmore li:first-child { border-top: 0; }
.readmore a { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding: .6rem 0; text-decoration: none; color: var(--forest-ink); }
.readmore .rm-title { font-size: 1.12rem; line-height: 1.5; }
.readmore a:hover .rm-title { color: var(--emerald); text-decoration: underline; }
.readmore .rm-cat { flex: none; font-size: .82rem; color: var(--emerald-deep); background: #fff; border: 1px solid #BCD9C7; border-radius: 999px; padding: .05rem .6rem; }
.pending-note { background: #FFF6D8; border: 1px solid #E8D58A; color: #6b5300; padding: .6rem .9rem; border-radius: var(--r); margin: 0 0 1rem; }
@container page (max-width: 560px) { .readmore a { flex-direction: column; gap: .2rem; } }

/* ---------- বিষয় ধরে খুঁজুন ---------- */
.topicbox { margin: 3rem 0 0; padding: 1.8rem 1.8rem 2rem; background: linear-gradient(180deg, #E4F2EA, #D4EBDD); border-radius: calc(var(--r) * 1.6); }
.topicbox-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.topicbox-head h2 { margin: 0; font-size: 1.9rem; color: var(--emerald-deep); }
.topicbox-all { color: #fff; background: var(--emerald); padding: .4rem 1rem; border-radius: 999px; text-decoration: none; font-size: .98rem; }
.topicbox-all:hover { background: var(--emerald-deep); }
.topicgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.topic { display: flex; flex-direction: column; gap: .3rem; background: #fff; border: 1px solid #C2DECD; border-radius: var(--r); padding: 1rem 1.1rem; text-decoration: none; color: var(--forest-ink); transition: transform .15s, box-shadow .15s; }
.topic:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(8, 97, 64, .14); }
.topic-name { font-size: 1.28rem; color: var(--emerald-deep); line-height: 1.35; }
.topic-subs { color: var(--ink-soft); font-size: .94rem; line-height: 1.6; }
.topic-n { margin-top: auto; padding-top: .3rem; font-size: .85rem; color: var(--emerald); }
.topics-h1 { font-size: 2.1rem; margin: 0 0 .3rem; }
.topics-lead { color: var(--ink-soft); margin: 0 0 1.4rem; }
.topicgrid-all { gap: 1.1rem; }
.topic-card { background: #F0F7F3; border: 1px solid #D4EBDD; border-radius: var(--r); padding: 1rem 1.2rem; }
.topic-card h2 { font-size: 1.3rem; margin: 0 0 .5rem; }
.topic-card h2 a { color: var(--emerald-deep); text-decoration: none; }
.topic-card h2 small { font-size: .8rem; color: var(--ink-soft); font-weight: normal; }
.topic-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.topic-card li a { color: var(--forest-ink); font-size: .98rem; }
@container page (max-width: 960px) { .topicgrid { grid-template-columns: 1fr 1fr; } }
@container page (max-width: 560px) { .topicgrid { grid-template-columns: 1fr; } .topicbox { padding: 1.2rem 1rem 1.4rem; } .topicbox-head h2 { font-size: 1.5rem; } }

/* ---------- লেখার পাতা: বাইরের বক্স ও দাগ নেই ---------- */
.post { background: none; border: 0; box-shadow: none; border-radius: 0; padding: .4rem 0 1rem; }
.post-byline { border: 0; padding: .3rem 0; margin-bottom: 1.2rem; }
.post-cover { margin: 0 0 1.6rem; }
.post-cover img { border-radius: var(--r); }
.reactions { background: none; border: 0; padding: 0; margin-top: 1.6rem; }
.readmore { background: none; border: 0; border-left: 4px solid var(--emerald); border-radius: 0; padding: .2rem 0 .2rem 1.1rem; }
.readmore li { border-top: 1px solid #E3EFE8; }
@container page (max-width: 560px) { .post { padding: .2rem 0 .6rem; } .post-cover { margin: 0 0 1.2rem; } }