/* =====================================================================
   ClassNode — কম্পোনেন্ট
   ফাইল   : public_html/assets/css/components.css
   সংস্করণ : 1.46.0
   ১.৪৬.০ (হটফিক্স ৬৮): সেটিংস পাতা — "ঘন ঘন ব্যবহৃত" (.cn-mquick) বাদ; বিভাগের তালিকা ডেস্কটপেও এক কলাম (মোবাইলের মতো)।
   ১.৪৫.০ (হটফিক্স ৬৬): সেটিংস পাতার নতুন নকশা — .cn-mquick (ঘন ঘন ব্যবহৃত), .cn-msearch (খোঁজা), .cn-msec (ভাঁজ-করা বিভাগ), .cn-msub (উপ-গ্রুপ/ঝুঁকিপূর্ণ অংশ), .cn-mfoot।
   ১.৪৪.০ (হটফিক্স ৬২): ডাইনামিক ফন্ট — চেহারা পাতার ফন্ট-বাছাই (.cn-fontpick), সংখ্যা সোজা ও পরিষ্কার (lining + tabular nums)।
   NODE CORPORATION

   ১.৪৩.০ (হটফিক্স ৬১): সামারি কার্ড প্রসারিত হলে (একা শেষটি / ডেস্কটপে ≤৩টি) ভেতরের আইকন+লেখা মাঝে (শুধু CSS)।
   ১.৪২.০ (হটফিক্স ৬০): দ্রুত-অ্যাকশন গ্রিড হটফিক্স ৫৮-এর নকশায় ফেরত (৫টি = ৩+২, ৬টি = ৩+৩; ৪-কলাম-নিয়ম বাতিল)।
   ১.৪১.০ (হটফিক্স ৫৯): ৫/৬টি আইকনে ৪-কলাম বহাল — ৫টি = ৪+১ (শেষটি পুরো প্রস্থ), ৬টি = ৪+২; ৪-প্রতি-সারির ইংরেজি লেবেল-নিয়ম ৫/৬-এও।
   ১.৪০.০ (হটফিক্স ৫৮): দ্রুত-অ্যাকশন গ্রিড ফ্লুইড (flex-wrap) — ১–৮টি আইকন যা-ই থাকুক সারি ভরাট (৫টি = ৩+২, ৭টি = ৪+৩); সামারি কার্ডের একা শেষটি পুরো সারি (শুধু CSS)।
   ১.৩৯.০ (হটফিক্স ৫৭): হোম/ড্যাশবোর্ডের ৮টি দ্রুত-অ্যাকশন টাইল ও ৪টি সামারি কার্ড — বড় আইকন, কম ফাঁক, মিলানো ভেতরের স্পেসিং (শুধু CSS)।
   ১.৩৮.০ (হটফিক্স ৫৬): .cn-doc — বিল/রসিদের আধুনিক নকশা (A4/A5/থার্মাল ৮০·৫৮ মিমি; স্কুলের লোগো-নাম, নীল ফিতা, কার্ড, টেবিল, বাক্স, স্বাক্ষর, নিচের ফিতা; প্রিন্টে এক পাতা)।
   ১.৩৭.০ (হটফিক্স ৫৫): .cn-demobar — ডেমো-পট্টি এক লাইনের ছোট ফিতা (আগে ৪ লাইনের বড় বার্তা)।
   ১.৩৬.০ (হটফিক্স ৫৩): মিডনাইট থিমে বোতাম/হাজিরা-P·A/ভাষা-বাছাইয়ের লেখা পাঠযোগ্য (সাদা → var(--c-surface); অন্য ৮ থিমে চেহারা অপরিবর্তিত)।
   ১.৩৫.০ (হটফিক্স ৫২): অভিভাবকের বিল/রসিদ/খালি/ফল-আটকা পাতা — .cn-gdoc (শুধু screen; প্রিন্ট অপরিবর্তিত)।
   ১.৩৪.০ (হটফিক্স ৫১): .cn-ui2 — পাতার সরাসরি-সন্তান <form>-এর ভেতরের কার্ড (ফর্ম-পাতা): কার্ড/মাথা, টেবিল-মাথা, টিক-সারি, ফোকাস-রিং, বোতাম-সারি।
   ১.৩৩.০ (হটফিক্স ৫০): লগইন ও প্রবেশের পাতা (.cn-authcard) — ছায়া, নীল ফিতা, নিচের লিংকের পৃথক সারি, ডেমো-বোতাম।
   ১.৩২.০ (হটফিক্স ৪৯): .cn-ui2 — পাতার সরাসরি-সন্তান কার্ডের ভেতরের টেবিল-মাথা, পাতার সরাসরি-সন্তান খালি-অবস্থা ও বার্তা-পট্টি।
   ১.৩১.০ (হটফিক্স ৪৮): .cn-ui2 — শুধু তালিকা-সারিতে ভরা কার্ড (শিরোনাম-মাথা ছাড়া) প্রতিটি সারি আলাদা কার্ডে।
   ১.৩০.০ (হটফিক্স ৪৭): .cn-ui2 (body ক্লাস, অভিভাবক বাদে) — স্কুল-স্টাফের সব পাতায় শিরোনাম হিরো-কার্ডে, সরাসরি-সন্তান কার্ড/সংখ্যা-কার্ড নতুন ধাঁচে।
   ১.২৯.০ (হটফিক্স ৪৬): বাকি সুপার অ্যাডমিন পাতা — .cn-sa-র ভেতরে .cn-stat-এর রঙিন পাশ-রেখা, .cn-listrow-র গোল কোণ, হিরোর লিংক।
   ১.২৮.০ (হটফিক্স ৪৫): সুপার অ্যাডমিনের পাতা — .cn-sa (কার্ড/মাথা), .cn-phero, .cn-lrow*, .cn-gtabs/.cn-gtab, .cn-gchip*, .cn-hrow*, .cn-gtile--warn।
   ১.২৭.০ (হটফিক্স ৪৩): হাজিরা-পদ্ধতির পাতা (.cn-amth-*) ও অভিভাবকের "ক্লাস অনুযায়ী" উপস্থিতি (.cn-gday--wrap, .cn-gday__periods, .cn-pchip*)।
   ১.২৬.০ (হটফিক্স ৪২): SMS বন্ধ/চালুর পাতা — .cn-mute-* (সারি, ব্যাজ-পাশ, বোতামের সারি)।
   ১.২৫.০ (হটফিক্স ৪০): সারাংশের "শ্রেণি-শাখা → বিষয়" সারি এক লাইনে (.cn-rsum-list__arrow)।
   ১.২৪.০ (হটফিক্স ৩৯): দায়িত্বের সারাংশ — .cn-rsum-* (কেবল-পড়া তালিকা, ব্যাজ, বিষয়-বণ্টনের সারি); .cn-field[hidden]।
   ১.২৩.০ (হটফিক্স ৩৮): স্টাফের "দায়িত্ব ও অনুমতি" ম্যাট্রিক্স — .cn-rsp-* (বিকল্প-কার্ড, টগল, শ্রেণি→শাখা→বিষয়ের টিক)।
   ১.২২.০ (হটফিক্স ৩৬): শিক্ষার্থী-পাতা শ্রেণিভিত্তিক — .cn-stu-* (খোঁজ/অবস্থা-ছাঁকনি, শ্রেণির সারির ছাত্র সংখ্যা, শিক্ষার্থীর সারি)।
   ১.২১.০ (হটফিক্স ৩৫): ব্যবহারকারীর কার্ডে শিক্ষাবর্ষের পট্টি (.cn-ucard__ses); খোঁজার ফর্মের লোডিং অবস্থা (.cn-pk-search.is-busy)।
   ১.২০.০ (হটফিক্স ৩১): পেমেন্ট হিস্ট্রির প্রিন্ট/ডাউনলোড বোতাম, কাগজের মাপ (২″/৩″/A5/A4) অনুযায়ী প্রিভিউ ও ছাপা।
   ১.১৯.০ (হটফিক্স ৩০): রসিদের প্রিন্ট/ডাউনলোড বোতাম (.cn-rc-acts/.cn-rc-fmt) ও এক-পাতার কমপ্যাক্ট ছাপা।
   ১.১৮.০ (হটফিক্স ২৯): ফি গ্রহণ হাজিরার ধাঁচে — .cn-fc-* (শ্রেণি-তালিকার প্রাপ্য/বকেয়া), .cn-fs-chips/.cn-fsrow (শিক্ষার্থী-তালিকা), .cn-hist-* (পেমেন্ট হিস্ট্রি ও স্টেটমেন্ট প্রিন্ট)।
   ১.১৭.০ (হটফিক্স ২৮): আদায় সহজ — .cn-pk-* (কার টাকা নেবেন), .cn-cl-* (শিক্ষার্থীর কার্ড, মাসের কার্ড, টাকা নেওয়ার ফর্ম), .cn-rc-* (রসিদ ও প্রিন্টের মাপ: থার্মাল ৫৮/৮০ মিমি, A5, A4)।
   ১.১৬.০ (হটফিক্স ২৬): মাসিক বিল পাতা — .cn-bill-* (ছাঁকনি, তিন-সংখ্যা, করণীয় বাক্স, চিপ, কার্ড-সারি, বাছাই-মোড, নতুন-করে-তৈরি)।
   ১.১৫.০ (হটফিক্স ২৫): হাজিরা — রোস্টারের সারি (.cn-rlist) ও শিক্ষার্থীর সারি (.cn-slist) আলাদা হালকা কার্ড-বক্সে, কম্প্যাক্ট ফাঁক।
   ১.১৪.০ (হটফিক্স ২৪): স্টাফ হোম কমপ্যাক্ট — দ্রুত অ্যাকশন প্রায় বর্গাকার, ফাঁক/প্যাডিং কম; চার পরিসংখ্যান-কার্ড ছোট (আইকন পাশে), যেন এক স্ক্রিনে ধরে।
   ১.১৩.০ (হটফিক্স ২৩): স্টাফ হোম — দ্রুত অ্যাকশন বক্স-কার্ডে, চার পরিসংখ্যান গোল-কোণ আলাদা কার্ডে, ভাষা-বোতাম এক লাইনে (অতি বড় লেখাতেও)।
   ১.১২.০ (হটফিক্স ২১): অভিভাবক পোর্টালের ভেতরের পাতা (হাজিরা, ফি, রসিদ, ফলাফল, নোটিশ, প্রোফাইল, শিক্ষক) — .cn-gh কার্ড-ধাঁচ: .cn-gpanel, .cn-gbar, .cn-gday(s), .cn-gnotice, .cn-gstats--3।
   ১.১১.০ (হটফিক্স ২০): অ্যাডমিন/স্টাফ হোমের নিচের অংশ — .cn-gsec, .cn-gphead, .cn-gplink, .cn-gnote(s), .cn-gtile--accent/--lang।
   ১.১০.০ (হটফিক্স ১৯): .cn-idchip বড়; .cn-gtile (পাসওয়ার্ড/ডিভাইস বক্স), .cn-glogout (হালকা-লাল লগ আউট); .cn-gcard__date।
   ১.৯.০ (হটফিক্স ১৮): .cn-gh — অভিভাবকের হোমের আধুনিক কার্ড (.cn-ghero, .cn-gcard + টোন, .cn-gico, .cn-gbtn, .cn-gstat, .cn-gbill); সব রঙ থিম-টোকেন থেকে (গাঢ় থিমেও ঠিক)।
   ১.৮.০ (হটফিক্স ১৭): .cn-pagehead__namerow/.cn-idchip (নামের পাশে আইডি), .cn-pagehead__school (স্কুলের নাম আলাদা লাইনে), .cn-teacher (শিক্ষকের সারি + কল বোতাম)।
   ১.৭.১ (হটফিক্স ১৬): .cn-pagehead--picked বাদ (সন্তান বাছাই নেই)।
   ১.৭.০ (হটফিক্স ১৫): .cn-bleed-এ অভিভাবকের পাতার নিয়ম (শিরোনাম-পট্টি, তালিকার সারি, গ্রিড, ফুটার); নিয়মগুলো শুধু screen-এ (প্রিন্টে রসিদ/বিল অক্ষত)।
   ১.৬.০ (হটফিক্স ১৪): .cn-sheethead__row/__month (মাসের নাম), .cn-rrow__cnt-এ শতকরা হার।
   ১.৫.০ (হটফিক্স ১৩): হাজিরার শিট — .cn-datepick--done (নেওয়া থাকলে হালকা সবুজ), .cn-btncol, শিটের কম্প্যাক্ট নিয়ম (.cn-bleed-এর ভেতরে)।
   ১.৪.০ (হটফিক্স ১২): .cn-rrow__no (ক্রমিক নম্বর), .cn-rrow__cnt (মোট/উপস্থিত), .cn-daterow__ico।
   ১.৩.০ (হটফিক্স ১১): .cn-bleed — ফোনে পাতা প্রান্ত-থেকে-প্রান্ত, কার্ডে বর্ডার/গোল কোণ/ছায়া নেই, ফাঁক কম (হাজিরার হোম)।
   ১.২.২ (হটফিক্স ৯): .cn-brand__mark — গাঢ় থিমে হালকা পটভূমি (নতুন রঙিন লোগো মিশে না যায়)।
   ১.২.১ (হটফিক্স ৮): .cn-pagehead--ava — অভিভাবকের হোমে সন্তানের ছবি নামের পাশে।

   ১.২.০ (ফেজ ২১.২ · ADR-129): নতুন ড্যাশবোর্ড (হেডার-বার, ব্যবহারকারীর কার্ড, ৮ আইকনের গ্রিড, ভরাট
   পরিসংখ্যান-কার্ড, অ্যাকাউন্টের সারি) ও প্রোফাইল (স্কুলের কার্ড, অ্যাকাউন্টস)। ২১.১-এর হোমের পুরোনো
   ব্লক (.cn-hero, .cn-tiles/.cn-tile, .cn-qa) সরানো — আর কোনো ভিউ ব্যবহার করে না।

   ১.১.০ (ফেজ ২১.১ · ADR-128): নতুন চেহারা — হোমের কার্ড/টাইল/দ্রুত-কাজ/নোটিশ এবং হাজিরার
   রোস্টার-সারি, অনুসন্ধান-চিপ, P/A সেগমেন্ট, জমা-বার ও সফল পর্দা। পুরোনো কোনো ক্লাস বদলায়নি।
   সব রঙ টোকেন থেকে — আটটি থিমেই কাজ করে।

   ব্লুপ্রিন্ট পর্ব ১৫.১ — "একবার শিখলে সব জায়গায় কাজ করবে"।
   তাই প্রতিটি তালিকা, ফর্ম ও কার্ড এই একই ক্লাস ব্যবহার করবে।
   পাতা-নির্দিষ্ট CSS লেখা যাবে না।
   ===================================================================== */

/* =====================================================================
   ১. বোতাম
   ন্যূনতম উচ্চতা ৪৪px — বুড়ো আঙুলের নাগাল (ব্লুপ্রিন্ট UX নিয়ম ১০)
   ===================================================================== */
.cn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--touch-min);
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: var(--c-primary);
  color: var(--c-surface);   /* হটফিক্স ৫৩: #fff ছিল — মিডনাইটে হালকা নীলের উপর সাদা পড়া যেত না; অন্য থিমে surface = সাদা, তাই বদল নেই */
  font-size: var(--t-md);
  font-weight: var(--fw-semi);
  line-height: 1;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.cn-btn:hover  { background: var(--c-primary-soft); color: var(--c-surface); }
.cn-btn:active { background: var(--c-primary-dark); }

.cn-btn--accent        { background: var(--c-accent); }
.cn-btn--accent:hover  { background: var(--c-accent-dark); }

.cn-btn--danger        { background: var(--c-danger); }
.cn-btn--danger:hover  { background: var(--c-danger-dark); }

.cn-btn--outline {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-line-strong);
}
.cn-btn--outline:hover { background: var(--c-primary-tint); color: var(--c-primary); }

.cn-btn--ghost {
  background: transparent;
  color: var(--c-primary);
  border-color: transparent;
}
.cn-btn--ghost:hover { background: var(--c-primary-tint); color: var(--c-primary); }

.cn-btn--sm    { min-height: 36px; padding: 0 var(--s-3); font-size: var(--t-sm); }
.cn-btn--block { width: 100%; }

.cn-btn:disabled,
.cn-btn[aria-disabled="true"] {
  background: var(--c-line-strong);
  border-color: var(--c-line-strong);
  color: #fff;
  opacity: .75;
  pointer-events: none;
}
.cn-btn--outline:disabled {
  background: transparent;
  color: var(--c-faint);
  border-color: var(--c-line);
}

.cn-btnrow { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* =====================================================================
   ২. ফর্ম
   ===================================================================== */
.cn-field { margin-bottom: var(--s-4); }

.cn-label {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--c-text-soft);
}
.cn-label .cn-req { color: var(--c-danger); margin-right: 2px; }

.cn-input,
.cn-select,
.cn-textarea {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--s-2) var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-input);
  font-size: var(--t-md);
  transition: border-color var(--dur-fast) var(--ease);
}
.cn-textarea { min-height: 96px; line-height: var(--lh-normal); resize: vertical; }

.cn-input:hover, .cn-select:hover, .cn-textarea:hover { border-color: var(--c-muted); }
.cn-input:focus, .cn-select:focus, .cn-textarea:focus { border-color: var(--c-primary); }

.cn-input::placeholder, .cn-textarea::placeholder { color: var(--c-faint); }

.cn-input:disabled, .cn-select:disabled, .cn-textarea:disabled {
  background: var(--c-line-soft);
  color: var(--c-muted);
}

.cn-input--error, .cn-select--error { border-color: var(--c-danger); }

.cn-help  { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--c-muted); }
.cn-error { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--c-danger); font-weight: var(--fw-medium); }

/* চেকবক্স ও রেডিও */
.cn-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  min-height: var(--touch-min);
  padding: var(--s-2) 0;
  cursor: pointer;
}
.cn-check input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--c-primary); }

/* গ্রিড */
.cn-grid { display: grid; gap: var(--s-4); }
.cn-grid--2 { grid-template-columns: 1fr 1fr; }
.cn-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
  .cn-grid--2, .cn-grid--3 { grid-template-columns: 1fr; }
}

/* =====================================================================
   ৩. কার্ড
   ===================================================================== */
.cn-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.cn-card + .cn-card { margin-top: var(--s-4); }

.cn-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-line-soft);
  border-bottom: 1px solid var(--c-line);
}
.cn-card__head h3 { margin: 0; font-size: var(--t-md); font-weight: var(--fw-semi); }
.cn-card__body { padding: var(--s-4); }
.cn-card__foot {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-line-soft);
  background: var(--c-surface-alt);
}

/* পরিসংখ্যান কার্ড — সংখ্যাগুলো ক্লিকযোগ্য (UX নিয়ম ৪) */
.cn-stats { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.cn-stat {
  flex: 1 1 150px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color var(--dur-fast) var(--ease);
}
a.cn-stat:hover { border-color: var(--c-primary); color: inherit; }
.cn-stat__num {
  display: block;
  font-size: var(--t-xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}
.cn-stat__label { font-size: var(--t-xs); color: var(--c-muted); }
.cn-stat--due .cn-stat__num    { color: var(--c-danger); }
.cn-stat--ok  .cn-stat__num    { color: var(--c-accent); }
.cn-stat--warn .cn-stat__num   { color: var(--c-warn); }

/* =====================================================================
   ৪. ব্যাজ ও অবস্থা
   রঙ কখনো একমাত্র সংকেত নয় — সাথে লেখা ও চিহ্ন থাকে
   (ব্লুপ্রিন্ট পর্ব ১৫.৩ · বর্ণান্ধতা ও রোদে ব্যবহার)
   ===================================================================== */
.cn-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}
.cn-badge::before { font-size: 10px; line-height: 1; }

.cn-badge--ok      { background: var(--c-accent-tint); color: var(--c-accent-dark); border-color: #BFE3CD; }
.cn-badge--ok::before      { content: '●'; }

.cn-badge--danger  { background: var(--c-danger-tint); color: var(--c-danger); border-color: #F3C9C9; }
.cn-badge--danger::before  { content: '✕'; }

.cn-badge--warn    { background: var(--c-warn-tint); color: var(--c-warn); border-color: #EFD9A8; }
.cn-badge--warn::before    { content: '▲'; }

.cn-badge--info    { background: var(--c-info-tint); color: var(--c-info); border-color: #C6DBF2; }
.cn-badge--info::before    { content: 'i'; font-weight: var(--fw-bold); }

.cn-badge--muted   { background: var(--c-line-soft); color: var(--c-muted); border-color: var(--c-line); }
.cn-badge--muted::before   { content: '○'; }

/* =====================================================================
   ৫. বার্তা বাক্স
   ===================================================================== */
.cn-alert {
  border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4);
  border-left: 5px solid;
  margin-bottom: var(--s-4);
  font-size: var(--t-sm);
}
.cn-alert__title { font-weight: var(--fw-semi); margin-bottom: var(--s-1); }
.cn-alert--info    { background: var(--c-info-tint);   border-color: var(--c-info);   color: var(--c-info); }
.cn-alert--ok      { background: var(--c-accent-tint); border-color: var(--c-accent); color: var(--c-accent-dark); }
.cn-alert--warn    { background: var(--c-warn-tint);   border-color: var(--c-warn);   color: var(--c-warn); }
.cn-alert--danger  { background: var(--c-danger-tint); border-color: var(--c-danger); color: var(--c-danger); }

/* =====================================================================
   ৬. টেবিল ও তালিকা
   ডেস্কটপে টেবিল, মোবাইলে কার্ড — পাশে স্ক্রল করতে হবে না
   (ব্লুপ্রিন্ট পর্ব ৪.৪)
   ===================================================================== */
.cn-table { font-size: var(--t-sm); }
.cn-table th {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  color: var(--c-muted);
  white-space: nowrap;
}
.cn-table td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: middle;
}
.cn-table tbody tr:last-child td { border-bottom: 0; }
.cn-table tbody tr:hover { background: var(--c-surface-alt); }
.cn-table th.cn-right, .cn-table td.cn-right { text-align: right; }

/* তালিকার সারি — মোবাইলের প্রাথমিক রূপ */
.cn-listrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line-soft);
  min-height: var(--touch-min);
}
.cn-listrow:last-child { border-bottom: 0; }
.cn-listrow:hover { background: var(--c-surface-alt); }
.cn-listrow__main { flex: 1; min-width: 0; }
.cn-listrow__title { font-weight: var(--fw-semi); }
.cn-listrow__meta {
  font-size: var(--t-xs);
  color: var(--c-muted);
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.cn-listrow__side { flex: none; text-align: right; }

/* রোল নম্বরের গোল ঘর */
.cn-roll {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-primary-tint);
  color: var(--c-primary);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
}

/* তালিকার উপরের টুলবার */
.cn-toolbar {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.cn-toolbar__grow { flex: 1 1 200px; }

/* খালি অবস্থা — কখনো সাদা পাতা নয় (UX নিয়ম ৭) */
.cn-empty {
  padding: var(--s-7) var(--s-4);
  text-align: center;
  color: var(--c-muted);
}
.cn-empty__icon { font-size: 40px; opacity: .35; margin-bottom: var(--s-2); }
.cn-empty__title { font-weight: var(--fw-semi); color: var(--c-text-soft); margin-bottom: var(--s-1); }

/* =====================================================================
   ৭. হাজিরার P/A বোতাম
   অ্যাপের সবচেয়ে বেশি ব্যবহৃত নিয়ন্ত্রণ — ৩০ সেকেন্ডে ৩৮ জন।
   বড়, স্পষ্ট, রঙ ছাড়াও অক্ষরে বোঝা যায় (ADR-004)
   ===================================================================== */
.cn-pa { display: inline-flex; gap: var(--s-1); flex: none; }
.cn-pa__btn {
  width: 46px; height: 44px;
  display: grid; place-items: center;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-btn);
  background: var(--c-surface);
  color: var(--c-muted);
  font-size: var(--t-md);
  font-weight: var(--fw-bold);
  transition: all var(--dur-fast) var(--ease);
}
.cn-pa__btn:hover { border-color: var(--c-muted); }
.cn-pa__btn[aria-pressed="true"].cn-pa__btn--p {
  background: var(--c-accent); border-color: var(--c-accent); color: var(--c-surface);
}
.cn-pa__btn[aria-pressed="true"].cn-pa__btn--a {
  background: var(--c-danger); border-color: var(--c-danger); color: var(--c-surface);
}

/* =====================================================================
   ৮. নিশ্চিতকরণ পর্দা
   টাকা বা SMS খরচের আগে সবসময় (UX নিয়ম ৫ ও ১১)
   ===================================================================== */
.cn-overlay {
  position: fixed; inset: 0;
  background: rgba(16, 36, 63, .45);
  display: grid; place-items: center;
  padding: var(--s-4);
  z-index: var(--z-overlay);
}
.cn-modal {
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--sh-3);
  width: 100%;
  max-width: 460px;
  overflow: hidden;
}
.cn-modal__head {
  padding: var(--s-4);
  border-bottom: 1px solid var(--c-line);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
}
.cn-modal__body { padding: var(--s-4); }
.cn-modal__foot {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-line);
  display: flex; gap: var(--s-3); justify-content: flex-end;
  background: var(--c-surface-alt);
}

/* খরচের সারাংশ — নিশ্চিতকরণে যা দেখানো বাধ্যতামূলক */
.cn-cost {
  background: var(--c-warn-tint);
  border: 1px solid #EFD9A8;
  border-radius: var(--r-btn);
  padding: var(--s-3);
  margin-top: var(--s-3);
  font-size: var(--t-sm);
}
.cn-cost__row { display: flex; justify-content: space-between; gap: var(--s-3); }
.cn-cost__row + .cn-cost__row { margin-top: var(--s-1); }

/* =====================================================================
   ৯. অগ্রগতি ও লোডিং
   ===================================================================== */
.cn-bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-line-soft);
  overflow: hidden;
}
.cn-bar__fill { height: 100%; background: var(--c-accent); border-radius: var(--r-pill); }
.cn-bar__fill--warn   { background: var(--c-warn); }
.cn-bar__fill--danger { background: var(--c-danger); }

.cn-skeleton {
  background: linear-gradient(90deg, var(--c-line-soft) 25%, var(--c-line) 37%, var(--c-line-soft) 63%);
  background-size: 400% 100%;
  animation: cn-shimmer 1.4s ease infinite;
  border-radius: 4px;
  height: 14px;
}
@keyframes cn-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* =====================================================================
   ১০. অফলাইন পট্টি (ব্লুপ্রিন্ট পর্ব ১৫.৫)
   ===================================================================== */
.cn-netbar {
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.cn-netbar[hidden] { display: none; }   /* হটফিক্স ২১.২.৪: display:flex 'hidden' অ্যাট্রিবিউটকে হারিয়ে দিত — ইন্টারনেট থাকলেও পট্টি দেখাত */
.cn-netbar--off { background: var(--c-danger-tint); color: var(--c-danger); border-bottom: 2px solid var(--c-danger); }
.cn-netbar--on  { background: var(--c-accent-tint); color: var(--c-accent-dark); border-bottom: 2px solid var(--c-accent); }


/* =====================================================================
   ১১. ব্র্যান্ড — লগো ও ওয়ার্ডমার্ক   [সংস্করণ ১.১.০-এ যোগ]

   লগোর ছবি assets/img/ ফোল্ডারে রাখতে হবে (README.txt দেখুন)।
   ওয়ার্ডমার্কটি ছবি নয়, লেখা — তাই যেকোনো আকারে ঝকঝকে থাকে
   এবং স্ক্রিন রিডার পড়তে পারে।
   ===================================================================== */
.cn-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: inherit;
}
.cn-brand__mark {
  flex: none;
  width: 32px; height: 32px;
  object-fit: contain;
}
.cn-brand--lg .cn-brand__mark { width: 72px; height: 72px; }
/* গাঢ় থিমে (midnight) নেভি-রঙের লোগো মিশে যায় — হালকা চার-কোনা পটভূমি দেওয়া হলো (হটফিক্স ৯) */
[data-theme="midnight"] .cn-brand__mark { background: #fff; border-radius: 8px; padding: 2px; box-sizing: border-box; }
/* গাঢ় থিমে নেভি লেখাও মিশে যেত — হালকা লেখা */
[data-theme="midnight"] .cn-wordmark { color: var(--c-text); }
.cn-brand--xl .cn-brand__mark { width: 104px; height: 104px; }

.cn-brand--stack {
  flex-direction: column;
  gap: var(--s-2);
  text-align: center;
}

/* ওয়ার্ডমার্ক — লগোর লেখার ধরন
   Class = স্বাভাবিক ওজন · Node = মোটা — দুটোই ব্র্যান্ড নেভি */
.cn-wordmark {
  font-family: var(--font-brand);
  font-size: calc(22px * var(--fs));
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--brand-navy);
  white-space: nowrap;
}
.cn-wordmark__class { font-weight: 400; }
.cn-wordmark__node  { font-weight: 700; }

.cn-brand--lg .cn-wordmark { font-size: calc(32px * var(--fs)); }
.cn-brand--xl .cn-wordmark { font-size: calc(40px * var(--fs)); }

/* বিকল্প — সবুজ Node (লগইন পর্দার নকশায় যেমন ছিল) */
.cn-wordmark--duo .cn-wordmark__node { color: var(--brand-green); }

/* গাঢ় পটভূমিতে (অ্যাপ বার) */
.cn-wordmark--onDark { color: var(--c-appbar-fg); }
.cn-wordmark--onDark .cn-wordmark__node { color: var(--c-appbar-fg); }

.cn-brand__tagline {
  font-size: var(--t-xs);
  color: var(--c-muted);
  letter-spacing: .04em;
}


/* =====================================================================
   ১২. লগইন পর্দা   [সংস্করণ ১.১.০-এ যোগ]
   ===================================================================== */
.cn-authpage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5) var(--s-4);
  background: var(--c-bg);
}
.cn-authcard {
  width: 100%;
  max-width: 400px;
}
.cn-authcard__brand {
  text-align: center;
  margin-bottom: var(--s-5);
}
.cn-authcard__title {
  font-size: var(--t-lg);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  text-align: center;
  margin: var(--s-3) 0 var(--s-5);
}

/* লেবেলের পাশে আইকন */
.cn-label--icon { display: flex; align-items: center; gap: var(--s-2); }
.cn-label__icon { font-size: var(--t-md); opacity: .8; }

/* পাসওয়ার্ডের ঘরে চোখ */
.cn-inputwrap { position: relative; }
.cn-inputwrap .cn-input { padding-left: 46px; }
.cn-eye {
  position: absolute;
  left: var(--s-2); top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--c-accent);
  font-size: var(--t-md);
  border-radius: var(--r-btn);
}
.cn-eye:hover { background: var(--c-accent-tint); }

.cn-authcard__forgot {
  text-align: left;
  margin: calc(-1 * var(--s-2)) 0 var(--s-4);
}
.cn-authcard__forgot a {
  font-size: var(--t-sm);
  color: var(--c-accent);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.cn-authcard__forgot a:hover { text-decoration: underline; }

.cn-authcard__foot {
  margin-top: var(--s-5);
  text-align: center;
}


/* =====================================================================
   ১৩. থিম ও লেখার আকার বাছাই   [সংস্করণ ১.১.০-এ যোগ]
   ===================================================================== */
.cn-themegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--s-3);
}
.cn-themecard {
  border: 2px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
  padding: 0;
  overflow: hidden;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease);
}
.cn-themecard[aria-pressed="true"] { border-color: var(--c-primary); }
.cn-themecard__strip { display: flex; height: 34px; }
.cn-themecard__strip i { flex: 1; }
.cn-themecard__name {
  display: block;
  padding: var(--s-2) var(--s-1);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  color: var(--c-text-soft);
}
.cn-themecard[aria-pressed="true"] .cn-themecard__name { color: var(--c-primary); }
.cn-themecard[aria-pressed="true"] .cn-themecard__name::after { content: '  ✓'; }

/* লেখার আকারের সারি */
.cn-sizerow { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.cn-sizebtn {
  flex: 1 1 76px;
  min-height: var(--touch-min);
  border: 2px solid var(--c-line);
  border-radius: var(--r-btn);
  background: var(--c-surface);
  color: var(--c-text-soft);
  font-weight: var(--fw-semi);
  padding: var(--s-2);
}
.cn-sizebtn[aria-pressed="true"] {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-primary-tint);
}
.cn-sizebtn__a { display: block; line-height: 1.2; }
.cn-sizebtn__label { display: block; font-size: 11px; font-weight: var(--fw-normal); margin-top: 2px; }

/* =====================================================================
   টাচ ডিভাইসে ন্যূনতম স্পর্শ-এলাকা  (মোবাইল-ফার্স্ট অডিট)

   ডিজাইন সিস্টেমে --touch-min: 44px ঠিকই আছে এবং .cn-btn, .cn-input,
   .cn-select, .cn-textarea সবাই সেটি মানে। কিন্তু দুটি ছোট নিয়ন্ত্রণ
   এর নিচে ছিল:

     .cn-btn--sm   ৩৬px   — তালিকা/টেবিলের কাজের বাটন
     .cn-eye       ৩৪px   — লগইন পাতার পাসওয়ার্ড দেখার বোতাম

   মাউসে ৩৬/৩৪px ঠিক আছে (কার্সার নিখুঁত), কিন্তু আঙুলে নয়। তাই
   pointer: coarse — অর্থাৎ শুধু স্পর্শ-চালিত ডিভাইসে — মাপ বাড়ানো
   হচ্ছে। ডেস্কটপে চেহারা আগের মতোই ঘন ও পরিচ্ছন্ন থাকবে।
   ===================================================================== */
@media (pointer: coarse) {
  .cn-btn--sm { min-height: var(--touch-min); }

  .cn-eye { width: var(--touch-min); height: var(--touch-min); }
  /* চোখ বড় হলে ভেতরের লেখা তার নিচে চলে যেত — তাই বাঁ পাশের
     ফাঁকা জায়গাও সেই অনুপাতে বাড়ানো হলো */
  .cn-inputwrap .cn-input { padding-left: 56px; }
}

/* =====================================================================
   মোবাইলে প্রবেশ-পাতা পুরো পর্দা জুড়ে  (full-bleed)

   সমস্যা: ছোট পর্দায় ৪০০px-এর কার্ডটি ধূসর পটভূমিতে ভাসত। ফলে
   দুপাশে জায়গা নষ্ট হয়ে ভেতরের অংশ সরু হয়ে যেত — শিরোনাম দুই
   লাইনে ভেঙে যেত, ইনপুটের নমুনা লেখা (CN0001S00042) কেটে যেত।

   সমাধান: ৬৪০px-এর নিচে কার্ডের সীমানা, কোণ ও আলাদা পটভূমি সরিয়ে
   লেখাগুলো সরাসরি পাতার উপর পুরো প্রস্থে বসানো হচ্ছে — যেভাবে
   বড় অ্যাপগুলোর মোবাইল লগইন পাতা কাজ করে। ট্যাব ও ডেস্কটপে
   কার্ডটি আগের মতোই থাকবে, কোনো পরিবর্তন হবে না।

   লক্ষণীয়: শুধু সরাসরি সন্তান কার্ডটির (>) কাঠামো সরানো হচ্ছে।
   ভেতরে বাসা-বাঁধা কার্ড (যেমন সক্রিয় ডিভাইসের তালিকার প্রতিটি
   ডিভাইস) নিজের সীমানা রাখবে — নইলে সেগুলো একে অন্যের সাথে
   মিশে যেত।
   ===================================================================== */
.cn-authcard > .cn-card > .cn-card__body { padding: var(--s-5); }
.cn-authcard--wide { max-width: 640px; }

@media (max-width: 640px) {
  .cn-authpage {
    padding: 0;
    align-items: stretch;
    background: var(--c-surface);
  }

  .cn-authcard,
  .cn-authcard--wide {
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    /* dvh — মোবাইলে ঠিকানা-বার লুকালে/দেখালে উচ্চতা লাফায় না */
    min-height: 100dvh;
  }

  .cn-authcard > .cn-card {
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .cn-authcard > .cn-card > .cn-card__body { padding: var(--s-6) var(--s-4); }
}

/* =====================================================================
   ভাষা নির্বাচক  (বাংলা / English)

   লগইন পাতার নিচে ও অ্যাপের ভেতরে — একই চেহারা। চলমান ভাষাটি
   গাঢ় ও নিষ্ক্রিয়, অন্যটি চাপার মতো। টাচ-এ ৪৪px উচ্চতা।
   ===================================================================== */
.cn-langswitch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.cn-langswitch form { margin: 0; }
.cn-langswitch__label {
  font-size: var(--t-sm);
  color: var(--c-muted);
  margin-inline-end: var(--s-1);
}
.cn-langswitch__item {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-btn);
  background: var(--c-surface);
  color: var(--c-accent);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.cn-langswitch__item:hover { background: var(--c-accent-tint); }
.cn-langswitch__item.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-surface);
  cursor: default;
}
@media (pointer: coarse) {
  .cn-langswitch__item { min-height: var(--touch-min); padding: 0 var(--s-4); }
}

/* =====================================================================
   রিপোর্ট (ফেজ ১৪.১ · ADR-077)
   ডেস্কটপ ও প্রিন্টে টেবিল, মোবাইলে কার্ড — পাশে স্ক্রল নয়
   (ব্লুপ্রিন্ট ৪.৪)। কাগজে সবসময় টেবিল, পর্দার মাপ যা-ই হোক।
   ===================================================================== */
.cn-rpt-table { display: none; }
.cn-rpt-cards { display: block; }

@media (min-width: 900px) {
  .cn-rpt-table { display: block; }
  .cn-rpt-cards { display: none; }
}

@media print {
  .cn-rpt-table { display: block !important; }
  .cn-rpt-cards { display: none !important; }
  .cn-rpt-table .cn-table { font-size: 9pt; }
  .cn-rpt-table .cn-table th,
  .cn-rpt-table .cn-table td { padding: 3px 6px; border: 1px solid #999; }
}


/* =====================================================================
   ১০. নতুন চেহারা (ফেজ ২১.১ · ADR-128) — হোম
   নিয়ম: ৮px কার্ড, ৪৪px+ স্পর্শ-ক্ষেত্র, রঙ কেবল টোকেন থেকে।
   ===================================================================== */

/* ছোট শিরোনাম-সারি সহ কার্ড: "নোটিশ ........ সব দেখুন" */
.cn-card__link {
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  color: var(--c-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}
.cn-card__link:hover { color: var(--c-accent-dark); }
.cn-card--flat { box-shadow: var(--sh-1); }

/* চারটি রঙের ধরন — সবই হালকা টোনাল (সাদা পটে লেখার কনট্রাস্ট AA) */
.cn-tint-navy  { background: var(--c-primary-tint); color: var(--c-primary); }
.cn-tint-green { background: var(--c-accent-tint);  color: var(--c-accent-dark); }
.cn-tint-amber { background: var(--c-warn-tint);    color: var(--c-warn); }
.cn-tint-blue  { background: var(--c-info-tint);    color: var(--c-info); }

/* নোটিশের সারি */
.cn-nrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-line-soft);
  min-height: var(--touch-min);
  color: inherit;
  text-decoration: none;
}
a.cn-nrow:hover { background: var(--c-surface-alt); color: inherit; }
.cn-nrow__dot { flex: none; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--c-accent-bright); }
.cn-nrow__title { flex: 1; min-width: 0; font-size: var(--t-sm); font-weight: var(--fw-medium); line-height: 1.4; }
.cn-nrow__date  { flex: none; font-size: var(--t-xs); color: var(--c-muted); }

.cn-stack > * + * { margin-top: var(--s-4); }

/* =====================================================================
   ১১. নতুন চেহারা — হাজিরা
   ===================================================================== */

/* অক্ষরের অবতার (ছবি নয় — প্রথম অক্ষর; শিশুদের ছবি ডিভাইসে জমা হয় না) */
.cn-ava {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-card);
  background: var(--c-primary-tint);
  color: var(--c-primary);
  font-size: var(--t-md);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.cn-ava--ok     { background: var(--c-accent-tint); color: var(--c-accent-dark); }
.cn-ava--danger { background: var(--c-danger-tint); color: var(--c-danger); }
/* হটফিক্স ২১.২.৭: মানুষের আসল ছবি (শিক্ষক/স্টাফ/শিক্ষার্থী) — একই চার-কোনা ঘর, ছবি ভরাট (মাঝখান থেকে) */
.cn-ava { overflow: hidden; }
.cn-ava > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cn-ava--xl {
  width: 88px; height: 88px;
  border-radius: var(--r-card);
  font-size: var(--t-2xl);
}

/* অভিভাবকের হোম — সন্তানের ছবি নামের পাশে (হটফিক্স ৮) */
.cn-pagehead--ava { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: var(--s-4); }
.cn-pagehead--ava > .cn-ava { flex: 0 0 auto; }
.cn-pagehead__text { flex: 1 1 0; min-width: 0; }

/* হটফিক্স ১৭ — নামের পাশে শিক্ষার্থীর আইডি; স্কুলের নাম আলাদা লাইনে */
.cn-pagehead__namerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
.cn-pagehead__namerow h1 { margin: 0; }
.cn-idchip {
  display: inline-block; padding: 2px var(--s-3);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-btn);
  font-size: var(--t-md); font-weight: var(--fw-bold); color: var(--c-text-soft);
  letter-spacing: .03em; white-space: nowrap;
}
.cn-pagehead__school { margin-top: 2px; font-size: var(--t-sm); color: var(--c-muted); }

/* প্রোফাইলের তথ্য-সারি — বাঁয়ে লেবেল, ডানে মান (এক সারিতে) */
.cn-kv .cn-listrow { padding-top: var(--s-2); padding-bottom: var(--s-2); }
.cn-kv .cn-listrow__main { display: grid; grid-template-columns: 38% 1fr; column-gap: var(--s-3); align-items: baseline; }
.cn-kv .cn-listrow__meta { font-size: var(--t-sm); }
.cn-kv .cn-listrow__title { font-size: var(--t-md); overflow-wrap: anywhere; }

/* শিক্ষকের সারি — বাঁয়ে নাম/পদ, ডানে কল বোতাম */
.cn-teacher { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
.cn-teacher__main { flex: 1 1 0; min-width: 0; }
.cn-teacher__name { font-weight: var(--fw-semi); }
.cn-teacher__meta { font-size: var(--t-sm); color: var(--c-muted); }
.cn-teacher__tel { flex: none; text-align: right; }
.cn-teacher__num { display: block; font-size: var(--t-xs); color: var(--c-muted); margin-top: 2px; }

/* তারিখ-সারি — ওপরে আইকন ও তারিখ, নিচে "অন্য দিন বাছুন" ফর্ম (সরু ফোনেও ভাঙে না) */
.cn-daterow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.cn-daterow__main { flex: 1 1 0; min-width: 0; }
.cn-daterow__label { font-size: var(--t-xs); color: var(--c-muted); }
.cn-daterow__ico { flex: none; display: grid; place-items: center; color: var(--c-primary); }
.cn-daterow__value { font-size: var(--t-md); font-weight: var(--fw-semi); color: var(--c-primary); }
.cn-daterow form { flex: 1 1 100%; display: flex; align-items: center; gap: var(--s-2); }
.cn-daterow form .cn-input { flex: 1; width: auto; min-width: 0; }
.cn-daterow form .cn-btn { flex: none; }

/* ভাঁজ করা তারিখ-বদল (হাজিরার শিটে) */
.cn-datepick summary {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: var(--s-2) var(--s-4);
  cursor: pointer; list-style: none;
}
.cn-datepick summary::-webkit-details-marker { display: none; }
.cn-datepick__date { flex: 1; min-width: 0; font-size: var(--t-md); font-weight: var(--fw-semi); color: var(--c-primary); }
.cn-datepick__change { flex: none; font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--c-accent); }
.cn-datepick[open] .cn-datepick__change { color: var(--c-muted); }
.cn-datepick form { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4) var(--s-3); }
.cn-datepick form .cn-input { flex: 1; width: auto; min-width: 0; }
.cn-datepick form .cn-btn { flex: none; }
/* হাজিরা নেওয়া থাকলে — হালকা সবুজ পটভূমি (আইকন ✓ ও স্ক্রিন-রিডারের লেখাও আছে, রঙ একা সংকেত নয়) */
.cn-datepick--done { background: var(--c-accent-tint); }
.cn-datepick--done .cn-datepick__date,
.cn-datepick--done .cn-daterow__ico { color: var(--c-accent-dark); }

/* খাড়া বোতামের সারি */
.cn-btncol { display: flex; flex-direction: column; gap: var(--s-2); }

/* অগ্রগতি কার্ড */
.cn-prog { padding: var(--s-3) var(--s-4); }
.cn-prog__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.cn-prog__title { font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--c-text-soft); }
.cn-prog__num { font-size: var(--t-sm); font-weight: var(--fw-bold); color: var(--c-primary); font-variant-numeric: tabular-nums; }
.cn-prog .cn-bar { margin-top: var(--s-2); }
.cn-prog__note { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--c-muted); }

/* রোস্টারের সারি */
.cn-rrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-line-soft);
  min-height: 56px;
  color: inherit;
  text-decoration: none;
}
.cn-rrow:first-child { border-top: 0; }
.cn-rrow:hover { background: var(--c-surface-alt); color: inherit; }
.cn-rrow__main { flex: 1; min-width: 0; }
.cn-rrow__title, .cn-rrow__meta { display: block; }
/* ক্রমিক নম্বর — আইকনের জায়গায়; নেওয়া হলে সবুজ (রঙ একা সংকেত নয়: ডানে ব্যাজের লেখাও আছে) */
.cn-rrow__no {
  flex: none; display: grid; place-items: center;
  min-width: 32px; height: 32px; padding: 0 var(--s-1);
  border-radius: var(--r-card);
  background: var(--c-primary-tint); color: var(--c-primary);
  font-size: var(--t-sm); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.cn-rrow__no--ok { background: var(--c-accent-tint); color: var(--c-accent-dark); }
.cn-rrow__cnt { white-space: nowrap; font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--c-muted); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.cn-rrow__title { font-size: var(--t-md); font-weight: var(--fw-semi); line-height: var(--lh-tight); }
.cn-rrow__meta  { font-size: var(--t-xs); color: var(--c-muted); }
.cn-rrow__go    { flex: none; color: var(--c-faint); }

/* শিটের মাথা — অনুসন্ধান ও ছাঁকনি */
.cn-sheethead { padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.cn-sheethead__title { font-size: var(--t-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--c-primary); }
.cn-sheethead__sub   { font-size: var(--t-xs); color: var(--c-muted); }
.cn-sheethead__row   { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.cn-sheethead__month { flex: none; font-size: var(--t-xs); color: var(--c-muted); }

.cn-search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--touch-min);
  padding: 0 var(--s-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-card);
  background: var(--c-surface);
  color: var(--c-muted);
}
.cn-search:focus-within { border-color: var(--c-primary); }
.cn-search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--t-md);
  color: var(--c-text);
}

.cn-chips { display: flex; gap: var(--s-2); }
.cn-chip {
  flex: 1;
  min-height: var(--touch-min);
  padding: 0 var(--s-1);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-card);
  background: var(--c-surface);
  color: var(--c-text-soft);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  cursor: pointer;
}
.cn-chip[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-surface); }

.cn-actrow { display: flex; gap: var(--s-2); }
.cn-actrow .cn-btn { flex: 1; padding: 0 var(--s-2); font-size: var(--t-sm); }
.cn-actrow .cn-btn--ghost { flex: none; padding: 0 var(--s-3); }

/* শিক্ষার্থীর সারি */
.cn-srow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--c-line-soft);
}
.cn-srow:last-child { border-bottom: 0; }
.cn-srow[hidden] { display: none; }
.cn-srow__main { flex: 1; min-width: 0; }
.cn-srow__name { font-size: var(--t-md); font-weight: var(--fw-semi); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.cn-srow__meta { font-size: var(--t-xs); color: var(--c-muted); display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

/* উপস্থিত | অনুপস্থিত — রেডিও বোতামের উপর গড়া (JS ছাড়াও কাজ করে) */
.cn-seg { flex: none; display: inline-flex; }
.cn-seg__opt { position: relative; display: block; }
.cn-seg__opt input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.cn-seg__opt span {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--touch-min);
  min-width: 70px;
  padding: 0 var(--s-2);
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  color: var(--c-text-soft);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  white-space: nowrap;
}
.cn-seg__opt--p span { border-radius: var(--r-btn) 0 0 var(--r-btn); }
.cn-seg__opt--a span { border-radius: 0 var(--r-btn) var(--r-btn) 0; border-left-width: 0; min-width: 82px; }
.cn-seg__opt--p input:checked + span { background: var(--c-accent);  border-color: var(--c-accent);  color: var(--c-surface); }
.cn-seg__opt--a input:checked + span { background: var(--c-danger);  border-color: var(--c-danger);  color: var(--c-surface); }
.cn-seg__opt input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 1px; position: relative; z-index: 1; }
.cn-seg__opt input:disabled { cursor: not-allowed; }
.cn-seg__opt input:disabled + span { opacity: .6; }
/* রঙ একা সংকেত নয়: নির্বাচিত অবস্থায় ✓ / ✕ চিহ্নও */
.cn-seg__opt--p input:checked + span::before { content: '✓'; }
.cn-seg__opt--a input:checked + span::before { content: '✕'; }

.cn-empty-filter { padding: var(--s-6) var(--s-4); text-align: center; font-size: var(--t-sm); color: var(--c-muted); }

/* জমা-বার — নিচের মেনুর ঠিক উপরে আটকে থাকে */
.cn-savebar {
  position: sticky;
  bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) calc(-1 * var(--s-4)) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}
.cn-savebar__sum { flex: none; font-size: var(--t-xs); color: var(--c-muted); line-height: 1.4; font-variant-numeric: tabular-nums; }
.cn-savebar__sum b { color: var(--c-text); }
.cn-savebar .cn-btn { flex: 1; min-height: 48px; }
.cn-savebar .cn-btn--accent { color: var(--c-surface); }   /* গাঢ় থিমে সবুজ ভরাটের উপর পাঠযোগ্য */
.cn-savebar .cn-btn--ghost { flex: none; }
@media (min-width: 900px) {
  .cn-savebar { bottom: 0; margin-left: 0; margin-right: 0; border: 1px solid var(--c-line); border-radius: var(--r-card); }
}

/* সফল পর্দা */
.cn-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
}
.cn-done__mark {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-accent-tint);
  color: var(--c-accent);
}
.cn-done__title { font-size: var(--t-lg); font-weight: var(--fw-bold); color: var(--c-primary); }
.cn-done__sub   { font-size: var(--t-sm); color: var(--c-muted); }
.cn-done__nums  { align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.cn-done__num   { padding: var(--s-3) var(--s-1); border-radius: var(--r-card); background: var(--c-bg); }
.cn-done__num b { display: block; font-size: var(--t-lg); line-height: 1.2; font-variant-numeric: tabular-nums; }
.cn-done__num span { font-size: var(--t-xs); }
.cn-done__num--p { background: var(--c-accent-tint); color: var(--c-accent-dark); }
.cn-done__num--a { background: var(--c-danger-tint); color: var(--c-danger); }
.cn-done__num--t { color: var(--c-primary); }
.cn-done__num--t span { color: var(--c-muted); }

.cn-btn--lg { min-height: 48px; font-size: var(--t-md); }

/* অনুমোদিত ছুটির সারি */
.cn-xrow { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-line-soft); display: flex; flex-direction: column; gap: var(--s-2); }
.cn-xrow__top { display: flex; align-items: center; gap: var(--s-3); }
.cn-xrow__name { flex: 1; min-width: 0; font-size: var(--t-md); font-weight: var(--fw-semi); }
.cn-xrow__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.cn-xrow .cn-check { padding: 0; }
.cn-xrow .cn-btn { white-space: nowrap; }

@media print {
  .cn-savebar, .cn-actrow, .cn-chips, .cn-search { display: none !important; }
}

/* =====================================================================
   ১২. নতুন ড্যাশবোর্ড ও প্রোফাইল (ফেজ ২১.২ · ADR-129)
   নিয়ম: রঙ কেবল টোকেন থেকে; ভরাট রঙের উপর লেখা var(--c-surface) (ডার্ক থিমেও পড়া যায়);
   ৪৪px+ স্পর্শ-ক্ষেত্র। আইকন-বৃত্ত ও অবতার গোল, কার্ড ৮px।
   ===================================================================== */

/* ১. স্কুলের হেডার-বার — লোগো · নাম · ঘণ্টা · প্রোফাইল */
.cn-sbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-appbar-bg);
  color: var(--c-appbar-fg);
  border-radius: var(--r-card);
}
.cn-sbar__logo {
  flex: none;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);   /* হটফিক্স ২১.২.৬: স্কুলের লোগো গোল */
  background: var(--c-surface);
  color: var(--c-primary);
  font-size: var(--t-lg);
  font-weight: var(--fw-bold);
  overflow: hidden;
}
.cn-sbar__logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; box-sizing: border-box; border-radius: var(--r-pill); }
.cn-sbar__names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cn-sbar__name {
  font-size: var(--t-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
  /* লম্বা নাম সর্বোচ্চ ২ লাইন, তারপর "…" */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cn-sbar__sub { font-size: var(--t-xs); line-height: var(--lh-tight); opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-sbar__btn {
  position: relative;
  flex: none;
  width: var(--touch-min); height: var(--touch-min);
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: inherit;
  text-decoration: none;
}
.cn-sbar__btn:hover { background: var(--c-primary-soft); color: inherit; }
.cn-sbar__btn .cn-appbar__count { top: 4px; right: 2px; }

/* ২. ব্যবহারকারীর কার্ড — গ্রিড: ছবি | নাম (পুরো প্রস্থ) / পদবি + আইডি | সময়-তারিখ (পদবির সারি থেকে)
   সময়-তারিখ "পদবি"-র পাশেই একই স্তরে; নাম এক লাইনে, লম্বা হলে "…" */
.cn-ucard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "ava name  name"
    "ava role  clock"
    "ava id    clock"
    "ses ses   ses";
  align-items: center;
  column-gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
}
.cn-ucard--plain { border: 0; box-shadow: none; border-radius: 0; }
.cn-ucard > .cn-ava--lg { grid-area: ava; align-self: center; }
.cn-ava--lg {
  width: 56px; height: 56px;
  border-radius: var(--r-card);   /* হটফিক্স ২১.২.৬: অ্যাডমিন/শিক্ষক/শিক্ষার্থীর ছবি চার-কোনা (৮px কোণ) */
  font-size: var(--t-xl);
}
.cn-ucard__name { grid-area: name; font-size: var(--t-md); font-weight: var(--fw-bold); line-height: var(--lh-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cn-ucard__role { grid-area: role; font-size: var(--t-sm); color: var(--c-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cn-ucard__id   { grid-area: id; font-size: var(--t-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cn-ucard__clock {
  grid-area: clock;
  align-self: start;
  text-align: right;
  line-height: var(--lh-tight);
}
.cn-ucard__time { font-size: var(--t-sm); font-weight: var(--fw-bold); color: var(--c-primary); white-space: nowrap; }
.cn-ucard__day  { font-size: var(--t-xs); font-weight: var(--fw-semi); color: var(--c-text-soft); white-space: nowrap; }
.cn-ucard__date { font-size: var(--t-xs); color: var(--c-muted); white-space: nowrap; }

/* ৩. দ্রুত অ্যাক্সেস — ৪ কলাম × ২ সারি; গোল আইকন */
.cn-qgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4) var(--s-1);
  padding: var(--s-4) var(--s-2);
}
.cn-qg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: var(--touch-min);
  color: var(--c-text);
  text-decoration: none;
}
.cn-qg:hover { color: var(--c-primary); }
.cn-qg__ico {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
}
.cn-qg__label {
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  text-align: center;
  line-height: 1.25;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ৪. পরিসংখ্যান-কার্ড — ভরাট ব্র্যান্ড-রঙ, ভেতরে ক্লাসনোডের টোকেন */
.cn-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.cn-stat2 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  min-height: 84px;
  min-width: 0;
  border-radius: var(--r-card);
  color: var(--c-surface);
  text-decoration: none;
  box-shadow: var(--sh-1);
}
.cn-stat2:hover { color: var(--c-surface); filter: brightness(1.06); }
.cn-stat2--primary { background: var(--c-primary); }
.cn-stat2--accent  { background: var(--c-accent); }
.cn-stat2--soft    { background: var(--c-primary-soft); }
.cn-stat2--warn    { background: var(--c-warn); }
.cn-stat2__ico {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1.5px solid currentColor;
  border-radius: var(--r-pill);
}
.cn-stat2__body { min-width: 0; display: flex; flex-direction: column; }
.cn-stat2__label { font-size: var(--t-xs); line-height: var(--lh-tight); }
.cn-stat2__val {
  font-size: var(--t-xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.cn-stat2__note { font-size: var(--t-xs); line-height: var(--lh-tight); opacity: .92; }

/* নোটিশের ক্রমিক সংখ্যা */
.cn-nrow__num {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-primary-tint);
  color: var(--c-primary);
  font-size: var(--t-xs);
  font-weight: var(--fw-bold);
}

/* ৫. অ্যাকাউন্টের সারি (ডিভাইস, পাসওয়ার্ড, ভাষা, লগ আউট) */
.cn-arow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-line-soft);
  min-height: var(--touch-min);
  color: inherit;
  text-decoration: none;
  margin: 0;
}
a.cn-arow:hover { background: var(--c-surface-alt); color: inherit; }
.cn-arow__ico {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-primary-tint);
  color: var(--c-primary);
}
.cn-arow__ico--danger { background: var(--c-danger-tint); color: var(--c-danger); }
.cn-arow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cn-arow__title { font-size: var(--t-sm); font-weight: var(--fw-semi); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.cn-arow__meta  { font-size: var(--t-xs); color: var(--c-muted); line-height: var(--lh-tight); }
.cn-arow__side  { flex: none; font-size: var(--t-sm); font-weight: var(--fw-semi); }
.cn-arow--lang .cn-langswitch { margin: 0; }
.cn-arow--form { padding: 0 var(--s-4); }
.cn-arow__btn {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--s-3) 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--c-danger);
  text-align: left;
  cursor: pointer;
}
.cn-arow__btn .cn-arow__title { color: var(--c-danger); }

/* ৬. প্রোফাইল — স্কুলের কার্ড */
.cn-schoolcard { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4); }
.cn-schoolcard__logo {
  flex: none;
  width: 72px; height: 72px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);   /* স্কুলের লোগো গোল */
  background: var(--c-primary-tint);
  color: var(--c-primary);
  font-size: var(--t-xl);
  font-weight: var(--fw-bold);
  overflow: hidden;
}
.cn-schoolcard__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.cn-schoolcard__body { min-width: 0; }
.cn-schoolcard__name { margin: 0; font-size: var(--t-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--c-primary); overflow-wrap: anywhere; }
.cn-schoolcard__sub  { font-size: var(--t-sm); color: var(--c-text-soft); overflow-wrap: anywhere; }
.cn-schoolcard__code { font-size: var(--t-xs); color: var(--c-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cn-schoolcard__foot { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-line-soft); }

.cn-drow {
  display: grid;
  grid-template-columns: 20px minmax(86px, 34%) minmax(0, 1fr);
  align-items: start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--t-sm);
}
.cn-drow__ico { color: var(--c-muted); display: grid; place-items: center; padding-top: 2px; }
.cn-drow__label { color: var(--c-muted); }
.cn-drow__val { font-weight: var(--fw-medium); overflow-wrap: anywhere; }

/* ৭. প্রোফাইল — অ্যাকাউন্টস সারাংশ */
.cn-acct { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--c-line-soft); }
.cn-acct__cell { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line-soft); }
.cn-acct__label { font-size: var(--t-xs); color: var(--c-muted); }
.cn-acct__val { font-size: var(--t-lg); font-weight: var(--fw-bold); color: var(--c-primary); line-height: 1.25; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cn-acct__meta { font-size: var(--t-xs); color: var(--c-muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin-top: 2px; }
.cn-minihead { padding: var(--s-3) var(--s-4) var(--s-2); font-size: var(--t-xs); font-weight: var(--fw-semi); color: var(--c-muted); }

/* ৮. লোগো সম্পাদনা */
.cn-logoedit { display: flex; align-items: flex-start; gap: var(--s-4); }
.cn-logoedit__body { flex: 1; min-width: 0; }

@media (min-width: 640px) {
  .cn-acct { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cn-acct__cell { border-bottom: 0; border-right: 1px solid var(--c-line-soft); }
  .cn-acct__cell:last-child { border-right: 0; }
}
@media (min-width: 900px) {
  .cn-qgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .cn-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =====================================================================
   ১২. প্রান্ত-থেকে-প্রান্ত (ফেসবুক-ধাঁচ) — শুধু ফোনে; ডেস্কটপে আগের কার্ড-চেহারাই
   ব্যবহার: পাতার মূল মোড়কে `cn-stack cn-bleed`। কোনো পাতা-নির্দিষ্ট রঙ নেই — থিম টোকেনই মানে।
   .cn-page-এর পাশের ফাঁকের (--s-4) সমান ঋণাত্মক মার্জিনে স্ক্রিনের দুই কিনারা ছোঁয়।
   ===================================================================== */
@media screen and (max-width: 899px) {
  .cn-bleed {
    margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) 0;
  }
  /* অংশগুলোর মাঝে কেবল সরু ফাঁক (পাতার পটভূমি) */
  .cn-bleed.cn-stack > * + * { margin-top: 6px; }
  .cn-bleed .cn-card,
  .cn-bleed .cn-alert {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
  }
  .cn-bleed .cn-card__head { padding: var(--s-2) var(--s-3); border-bottom: 0; }
  .cn-bleed .cn-daterow { padding: var(--s-2) var(--s-3); gap: var(--s-2); }
  .cn-bleed .cn-prog { padding: var(--s-2) var(--s-3); }
  .cn-bleed .cn-prog .cn-bar { margin-top: var(--s-1); }
  .cn-bleed .cn-rrow { padding: var(--s-2) var(--s-3); min-height: 48px; gap: var(--s-2); }
  .cn-bleed .cn-alert { padding-left: var(--s-3); padding-right: var(--s-3); }
  .cn-bleed__pad { padding-left: var(--s-3); padding-right: var(--s-3); }

  /* অভিভাবকের পাতা — শিরোনাম-পট্টি, সারি, গ্রিড, ফুটার */
  .cn-bleed .cn-pagehead { background: var(--c-surface); padding: var(--s-2) var(--s-3); margin-bottom: 0; gap: var(--s-2); }
  .cn-bleed .cn-pagehead h1 { font-size: var(--t-lg); }
  /* অ্যাপ-বারে একই শিরোনাম আছে — দৃশ্যে লুকানো, পর্দা-পাঠকের জন্য থাকে */
  .cn-bleed .cn-pagehead--dup h1 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .cn-bleed .cn-card__body { padding: var(--s-2) var(--s-3); }
  .cn-bleed a.cn-listrow, .cn-bleed a.cn-card.cn-listrow { text-decoration: none; color: inherit; }
  .cn-bleed .cn-pagehead--ava { gap: var(--s-3); }
  .cn-bleed .cn-pagehead--ava .cn-ava--xl { width: 56px; height: 56px; font-size: var(--t-xl); }
  .cn-bleed .cn-listrow { padding: var(--s-2) var(--s-3); gap: var(--s-2); min-height: 44px; }
  .cn-bleed .cn-card__body .cn-listrow { padding-left: 0; padding-right: 0; }   /* কার্ডের ভেতরের সারি — কার্ডের নিজের ফাঁকই যথেষ্ট */
  .cn-bleed .cn-card__foot { padding: var(--s-2) var(--s-3); border-top: 0; }
  .cn-bleed .cn-empty { padding: var(--s-5) var(--s-3); }
  .cn-bleed .cn-empty__icon { font-size: 32px; margin-bottom: var(--s-1); }
  .cn-bleed .cn-grid { gap: var(--s-2); }
  .cn-bleed .cn-grid--2 { grid-template-columns: 1fr 1fr; }          /* ফোনেও পাশাপাশি — কম জায়গা */
  .cn-bleed .cn-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .cn-bleed .cn-field { margin-bottom: 0; }
  .cn-bleed .cn-btnrow { gap: var(--s-2); }

  /* হাজিরার শিট */
  .cn-bleed .cn-datepick summary { min-height: 44px; padding: var(--s-2) var(--s-3); gap: var(--s-2); }
  .cn-bleed .cn-datepick form { padding: 0 var(--s-3) var(--s-2); }
  .cn-bleed .cn-sheethead { padding: var(--s-2) var(--s-3); gap: var(--s-2); }
  .cn-bleed .cn-sheethead__title { font-size: var(--t-md); }
  .cn-bleed .cn-sheethead .cn-btncol { gap: var(--s-2); }
  .cn-bleed .cn-chip,
  .cn-bleed .cn-actrow .cn-btn { min-height: 40px; }
  .cn-bleed .cn-srow { gap: var(--s-2); padding: var(--s-2) var(--s-3); }
  .cn-bleed .cn-srow .cn-ava { width: 36px; height: 36px; }
  .cn-bleed .cn-seg__opt span { min-width: 62px; padding: 0 var(--s-1); }
  .cn-bleed .cn-seg__opt--a span { min-width: 74px; }
  .cn-bleed .cn-savebar { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); gap: var(--s-2); border-radius: 0; border-left: 0; border-right: 0; }
  .cn-bleed .cn-savebar .cn-btn { min-height: 44px; }
  .cn-bleed .cn-done { border: 0; border-radius: 0; box-shadow: none; padding: var(--s-4) var(--s-3) var(--s-3); gap: var(--s-1); }
  .cn-bleed .cn-done__mark { width: 52px; height: 52px; }
  .cn-bleed .cn-done__nums { margin-top: var(--s-2); }
  .cn-bleed .cn-done__num { padding: var(--s-2) var(--s-1); }
}


/* =====================================================================
   হটফিক্স ১৮ — অভিভাবকের হোম: আধুনিক কার্ড (.cn-gh)
   প্রতিটি ফিচার আলাদা নরম-রঙের কার্ডে, আইকনসহ। রঙ সবই থিম-টোকেন, তাই গাঢ় থিমেও ঠিক।
   রঙ কখনো একমাত্র সংকেত নয় — সাথে লেখা ও আইকন আছে (বর্ণান্ধতা)।
   ===================================================================== */

.cn-ghero {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4);
  background: linear-gradient(135deg, var(--c-primary-tint), var(--c-surface));
  border: 1px solid var(--c-line); border-radius: var(--r-card);
  box-shadow: var(--sh-2);
}
.cn-ghero > .cn-ava { flex: none; width: 72px; height: 72px; font-size: var(--t-xl); box-shadow: var(--sh-2); }
.cn-ghero__text { flex: 1 1 0; min-width: 0; }
.cn-ghero h1 { font-size: var(--t-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--c-primary); }
.cn-ghero__class { margin-top: 2px; font-size: var(--t-md); font-weight: var(--fw-semi); color: var(--c-text-soft); }
.cn-ghero .cn-pagehead__school { font-size: var(--t-sm); }

.cn-gcard {
  --g-bg: var(--c-surface); --g-fg: var(--c-primary);
  display: block; position: relative;
  padding: var(--s-4);
  background: var(--g-bg); color: var(--c-text);
  border: 1px solid var(--c-line); border-inline-start: 5px solid var(--g-fg);
  border-radius: var(--r-card); box-shadow: var(--sh-2);
  text-decoration: none;
}
.cn-gcard--ok      { --g-bg: var(--c-accent-tint);  --g-fg: var(--c-accent-dark); }
.cn-gcard--bad,
.cn-gcard--due     { --g-bg: var(--c-danger-tint);  --g-fg: var(--c-danger); }
.cn-gcard--none    { --g-bg: var(--c-surface-alt);  --g-fg: var(--c-muted); }
.cn-gcard--notice  { --g-bg: var(--c-info-tint);    --g-fg: var(--c-info); }
.cn-gcard--new     { --g-bg: var(--c-warn-tint);    --g-fg: var(--c-warn); }
.cn-gcard--primary { --g-bg: var(--c-primary-tint); --g-fg: var(--c-primary); }
.cn-gcard--premium { --g-bg: var(--c-appbar-bg);    --g-fg: var(--c-appbar-fg); color: var(--c-appbar-fg); border-color: var(--c-appbar-bg); }

.cn-gcard--link { display: flex; align-items: center; gap: var(--s-3); min-height: 72px; transition: transform .12s ease, box-shadow .12s ease; }
.cn-gcard--link:hover { box-shadow: var(--sh-3); }
.cn-gcard--link:active { transform: scale(.985); }
.cn-gcard--link:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cn-gcard--link { transition: none; } .cn-gcard--link:active { transform: none; } }

.cn-gcard__top { display: flex; align-items: center; gap: var(--s-3); }
.cn-gcard__main { flex: 1 1 0; min-width: 0; display: block; }
.cn-gcard__label { display: block; font-size: var(--t-md); font-weight: var(--fw-semi); color: var(--g-fg); }
.cn-gcard__label--lg { font-size: var(--t-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.cn-gcard__big { font-size: var(--t-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--g-fg); display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.cn-gcard__sub { display: block; font-size: var(--t-sm); color: var(--c-text-soft); }
.cn-gcard--premium .cn-gcard__sub { color: var(--c-appbar-fg); opacity: .85; }
.cn-gcard__note { margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--c-text-soft); }

.cn-gico {
  flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--g-fg); box-shadow: var(--sh-1);
}
.cn-gcard--premium .cn-gico { background: rgba(255, 255, 255, .16); color: var(--c-appbar-fg); box-shadow: none; }
.cn-gchev { flex: none; display: grid; place-items: center; color: var(--g-fg); }
.cn-gcount {
  flex: none; min-width: 28px; height: 28px; padding: 0 var(--s-2);
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--g-fg); color: var(--g-bg); font-size: var(--t-sm); font-weight: var(--fw-bold);
}

.cn-gbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch-min); padding: 0 var(--s-4); margin-top: var(--s-3);
  background: var(--c-surface); color: var(--g-fg);
  border: 1px solid var(--g-fg); border-radius: var(--r-btn);
  font-size: var(--t-md); font-weight: var(--fw-bold); text-decoration: none;
}
.cn-gbtn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cn-gbtns { display: flex; gap: var(--s-2); }
.cn-gbtns .cn-gbtn { flex: 1 1 0; }

.cn-gstats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-3); }
.cn-gstat { padding: var(--s-3); background: var(--c-surface); border-radius: var(--r-btn); box-shadow: var(--sh-1); }
.cn-gstat__label { font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--c-muted); }
.cn-gstat__num { font-size: var(--t-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--c-text); font-variant-numeric: tabular-nums; }
.cn-gstat__num--due { color: var(--c-danger); }

.cn-gbills { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.cn-gbill {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3); background: var(--c-surface); color: var(--c-text);
  border-radius: var(--r-btn); box-shadow: var(--sh-1); text-decoration: none;
}
.cn-gbill__main { display: block; min-width: 0; }
.cn-gbill__title { display: block; font-size: var(--t-md); font-weight: var(--fw-bold); }
.cn-gbill__meta { display: block; font-size: var(--t-sm); color: var(--c-muted); }
.cn-gbill__amt { flex: none; font-size: var(--t-lg); font-weight: var(--fw-bold); }

.cn-gacct { box-shadow: var(--sh-2); border-radius: var(--r-card); }
.cn-gacct .cn-card__head { font-weight: var(--fw-bold); }
.cn-gacct .cn-listrow__title { font-size: var(--t-md); font-weight: var(--fw-semi); }
.cn-gacct a { text-decoration: none; }

/* হটফিক্স ১৯ — হোম: তারিখ, অ্যাকাউন্টের বক্স, হালকা-লাল লগ আউট */
.cn-gcard__date { font-size: var(--t-md); font-weight: var(--fw-semi); color: var(--c-text-soft); }
.cn-gacct__body { display: flex; flex-direction: column; gap: var(--s-3); }
.cn-gtile {
  --g-bg: var(--c-primary-tint); --g-fg: var(--c-primary);
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: var(--s-3) var(--s-4);
  background: var(--g-bg); color: var(--g-fg);
  border: 1px solid var(--c-line); border-inline-start: 5px solid var(--g-fg);
  border-radius: var(--r-card); box-shadow: var(--sh-1);
  font-size: var(--t-md); font-weight: var(--fw-bold); text-decoration: none;
}
.cn-gtile--info { --g-bg: var(--c-info-tint); --g-fg: var(--c-info); }
.cn-gtile__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--c-surface); box-shadow: var(--sh-1); }
.cn-gtile__label { flex: 1 1 0; min-width: 0; }
.cn-gtile:focus-visible, .cn-glogout:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cn-glogout {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%; min-height: 52px; padding: 0 var(--s-4);
  background: var(--c-danger-tint); color: var(--c-danger);
  border: 1px solid var(--c-danger); border-radius: var(--r-card);
  font: inherit; font-size: var(--t-md); font-weight: var(--fw-bold); cursor: pointer;
}

/* =====================================================================
   হটফিক্স ২০ — স্কুল-স্টাফের হোম: "সর্বশেষ নোটিশ" ও "আমার অ্যাকাউন্ট" কার্ড
   (.cn-gcard / .cn-gtile / .cn-glogout অভিভাবক-পোর্টালের একই নকশা)
   ===================================================================== */
.cn-gphead { display: flex; align-items: center; gap: var(--s-3); }
.cn-gphead__title { flex: 1 1 0; min-width: 0; margin: 0; font-size: var(--t-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--g-fg); }
.cn-gplink {
  flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3);
  background: var(--c-surface); color: var(--g-fg); border: 1px solid var(--g-fg); border-radius: var(--r-btn);
  font-size: var(--t-sm); font-weight: var(--fw-bold); text-decoration: none;
}
.cn-gplink:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.cn-gnotes { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.cn-gnote {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); background: var(--c-surface); color: var(--c-text);
  border-radius: var(--r-btn); box-shadow: var(--sh-1); text-decoration: none;
}
.cn-gnote--empty { color: var(--c-muted); font-size: var(--t-sm); }
.cn-gnote__num {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--g-fg); color: var(--g-bg);
  font-size: var(--t-sm); font-weight: var(--fw-bold);
}
.cn-gnote__title { flex: 1 1 0; min-width: 0; font-size: var(--t-md); font-weight: var(--fw-semi); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.cn-gnote__date { flex: none; font-size: var(--t-xs); color: var(--c-muted); }

.cn-gsec .cn-gacct__body { margin-top: var(--s-3); }
.cn-gtile--accent { --g-bg: var(--c-accent-tint); --g-fg: var(--c-accent-dark); }
.cn-gtile__meta { display: block; font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--c-text-soft); }
.cn-gtile--lang .cn-gtile__label { color: var(--c-text); }
.cn-gtile--lang .cn-langswitch { margin: 0; justify-content: flex-start; }

/* ফোনে হোম প্রান্ত-থেকে-প্রান্ত (cn-home-nobar), তাই নতুন কার্ডে দুই পাশে ফাঁক */
@media (max-width: 899px) {
  .cn-home-nobar .cn-dash > .cn-gsec { margin-left: var(--s-3); margin-right: var(--s-3); margin-top: var(--s-4); }
}

/* হোমের দ্রুত-আইকন: হালকা ছায়া ও বর্ডারে ফুটে ওঠে, চাপলে সামান্য নামে; লেখা বোল্ড */
.cn-qg__ico { box-shadow: var(--sh-1); border: 1px solid var(--c-line-soft); transition: transform .12s ease; }
.cn-qg:active .cn-qg__ico { transform: scale(.94); }
.cn-qg__label { font-weight: var(--fw-bold); }
@media (prefers-reduced-motion: reduce) { .cn-qg__ico { transition: none; } .cn-qg:active .cn-qg__ico { transform: none; } }


/* =====================================================================
   হটফিক্স ২১ — অভিভাবক পোর্টালের ভেতরের পাতা: হোমের কার্ড-ধাঁচ (.cn-gh)
   হাজিরা, ফি, রসিদ, ফলাফল, নোটিশ, প্রোফাইল, শিক্ষক-তালিকা।
   বিল/রসিদ/মার্কশিটের নথি (প্রিন্ট) আগের মতোই — এই নিয়ম সেখানে লাগে না।
   রঙ সবই থিম-টোকেন; রঙ কখনো একমাত্র সংকেত নয় (লেখা/আইকন সাথে থাকে)।
   ===================================================================== */

/* পাতার ওপরের নাম-পট্টি: ফোনে অ্যাপ-বারে শিরোনাম আছে, তাই h1 দৃশ্যে লুকানো (পর্দা-পাঠকের জন্য থাকে); সন্তানের নাম থাকে */
.cn-gh .cn-pagehead--dup { background: transparent; padding: 0; margin: 0; }
.cn-gh .cn-pagehead--dup .cn-pagehead__sub { font-size: var(--t-md); font-weight: var(--fw-semi); color: var(--c-text-soft); }
@media screen and (max-width: 899px) {
  .cn-gh .cn-pagehead--dup h1 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* কার্ডের ভেতরে সাদা প্যানেল (তথ্য-সারি, শিক্ষক, দিনের তালিকা) */
.cn-gpanel {
  margin-top: var(--s-3); padding: var(--s-1) var(--s-3);
  background: var(--c-surface); color: var(--c-text);
  border-radius: var(--r-btn); box-shadow: var(--sh-1);
}
.cn-gpanel .cn-listrow { padding-left: 0; padding-right: 0; }
.cn-gpanel .cn-teacher + .cn-teacher { border-top: 1px solid var(--c-line-soft); }
.cn-gpanel .cn-teacher { padding: var(--s-3) 0; }
.cn-gpanel .cn-teacher__name { font-size: var(--t-md); font-weight: var(--fw-bold); }
.cn-gpanel .cn-help { margin: var(--s-2) 0; }
.cn-gpanel .cn-kv .cn-listrow__title { font-weight: var(--fw-semi); }

/* তিন-ঘরের পরিসংখ্যান (হাজিরা) */
.cn-gstats--3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.cn-gstats--3 .cn-gstat { padding: var(--s-3) var(--s-2); text-align: center; }
.cn-gstats--3 .cn-gstat__num { font-size: var(--t-xl); }
.cn-gstat__num--ok { color: var(--c-accent-dark); }

/* উপস্থিতির হারের দণ্ড */
.cn-gbar { height: 10px; margin-top: var(--s-3); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-pill); overflow: hidden; }
.cn-gbar__fill { display: block; height: 100%; background: var(--g-fg); border-radius: var(--r-pill); }

/* মাস বাছাইয়ের ঘর */
.cn-gcard .cn-select { width: 100%; min-height: var(--touch-min); margin-top: var(--s-3); font-size: var(--t-md); font-weight: var(--fw-semi); }

/* দিনের তালিকা (হাজিরা) */
.cn-gdays { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.cn-gday {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); min-height: 52px;
  background: var(--c-surface); border-radius: var(--r-btn); box-shadow: var(--sh-1);
}
.cn-gday--absent { background: var(--c-danger-tint); }
.cn-gday__ico {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-pill);
  background: var(--c-accent-tint); color: var(--c-accent-dark);
}
.cn-gday--absent .cn-gday__ico { background: var(--c-surface); color: var(--c-danger); }
.cn-gday__main { flex: 1 1 0; min-width: 0; }
.cn-gday__date { display: block; font-size: var(--t-md); font-weight: var(--fw-semi); }
.cn-gday__note { display: block; font-size: var(--t-sm); color: var(--c-text-soft); overflow-wrap: anywhere; }
.cn-gday__side { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-1); }

/* বিল/রসিদ/ফলাফলের তালিকা-সারি (লিংক) */
a.cn-gbill { min-height: 56px; }
a.cn-gbill:hover { box-shadow: var(--sh-2); }
a.cn-gbill:active { transform: scale(.985); }
a.cn-gbill:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cn-gbill__title .cn-badge { margin-inline-start: var(--s-2); vertical-align: middle; }
.cn-gbill__side { flex: none; display: flex; align-items: center; gap: var(--s-2); color: var(--g-fg); }
@media (prefers-reduced-motion: reduce) { a.cn-gbill:active { transform: none; } }

/* নোটিশ */
.cn-gnotice__body {
  margin-top: var(--s-3); padding: var(--s-3);
  background: var(--c-surface); color: var(--c-text);
  border-radius: var(--r-btn); box-shadow: var(--sh-1);
  font-size: var(--t-md); line-height: var(--lh-normal); white-space: pre-line; overflow-wrap: anywhere;
}
.cn-gnotice__date { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--c-muted); }

/* ফাঁকা অবস্থা কার্ডের ভেতরে */
.cn-gempty { text-align: center; padding: var(--s-4) var(--s-2); }
.cn-gempty__title { font-size: var(--t-lg); font-weight: var(--fw-bold); color: var(--g-fg); }
.cn-gempty p { margin: var(--s-2) 0 0; color: var(--c-text-soft); }
.cn-gempty .cn-gico { margin: 0 auto var(--s-3); }

/* শিক্ষকের সারির "কল" বোতাম */
.cn-gcall {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--touch-min); padding: 0 var(--s-3);
  background: var(--c-accent-tint); color: var(--c-accent-dark);
  border: 1px solid var(--c-accent-dark); border-radius: var(--r-btn);
  font-size: var(--t-md); font-weight: var(--fw-bold); text-decoration: none;
}
.cn-gcall:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }


/* =====================================================================
   হটফিক্স ২২ — চেহারা পাতা: থিম বাছাই ও লেখার আকার
   প্রতিটি নমুনা নিজের data-theme বহন করে, তাই রঙ এখানে লেখা নেই — থিম-টোকেনই মানে।
   নির্বাচিত = মোটা বর্ডার + টিক-চিহ্ন + লেখা (রঙ একমাত্র সংকেত নয়)।
   ===================================================================== */
.cn-gback {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--touch-min); font-size: var(--t-md); font-weight: var(--fw-bold);
  color: var(--c-primary); text-decoration: none; align-self: flex-start;
}
.cn-gback:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cn-gsub { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-md); font-weight: var(--fw-bold); color: var(--g-fg); }

.cn-themegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (min-width: 560px) { .cn-themegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cn-themeopt {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-2); text-align: start; cursor: pointer;
  background: var(--c-surface); color: var(--c-text);
  border: 2px solid var(--c-line-strong); border-radius: var(--r-card); box-shadow: var(--sh-1);
  font: inherit; font-size: var(--t-md); transition: transform .12s ease;
}
.cn-themeopt:active { transform: scale(.97); }
.cn-themeopt:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cn-themeopt[aria-pressed="true"] { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary); }
.cn-themeopt__name { font-weight: var(--fw-semi); line-height: var(--lh-tight); }
.cn-themeopt[aria-pressed="true"] .cn-themeopt__name { font-weight: var(--fw-bold); color: var(--c-primary); }
.cn-themeopt__check { display: none; align-items: center; gap: var(--s-1); font-size: var(--t-sm); font-weight: var(--fw-bold); color: var(--c-primary); }
.cn-themeopt[aria-pressed="true"] .cn-themeopt__check { display: inline-flex; }

/* নমুনা — ওপরে অ্যাপ-বার, নিচে কার্ড */
.cn-themeopt__prev {
  display: flex; flex-direction: column; height: 64px; overflow: hidden;
  background: var(--c-bg); border: 1px solid var(--c-line-strong); border-radius: var(--r-btn);
}
.cn-themeopt__bar { flex: none; height: 16px; background: var(--c-appbar-bg); }
.cn-themeopt__card {
  flex: 1 1 0; display: flex; align-items: center; gap: var(--s-1);
  margin: 6px; padding: 0 var(--s-2);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-btn);
}
.cn-themeopt__card i { flex: none; width: 12px; height: 12px; border-radius: var(--r-pill); background: var(--c-primary); }
.cn-themeopt__card i + i { background: var(--c-accent-bright); }
.cn-themeopt__prev--auto { flex-direction: row; background: transparent; }
.cn-themeopt__half { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background: var(--c-bg); }
.cn-themeopt__half .cn-themeopt__card { margin: 6px 4px; padding: 0 var(--s-1); }

/* লেখার আকার */
.cn-sizegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.cn-sizeopt {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s-1);
  min-height: 76px; padding: var(--s-2) var(--s-1); cursor: pointer;
  background: var(--c-surface); color: var(--c-text);
  border: 2px solid var(--c-line-strong); border-radius: var(--r-card); box-shadow: var(--sh-1);
  font: inherit;
}
.cn-sizeopt:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cn-sizeopt[aria-pressed="true"] { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary); color: var(--c-primary); }
.cn-sizeopt__a { font-weight: var(--fw-bold); line-height: 1; }
.cn-sizeopt--sm .cn-sizeopt__a { font-size: 14px; }
.cn-sizeopt--md .cn-sizeopt__a { font-size: 18px; }
.cn-sizeopt--lg .cn-sizeopt__a { font-size: 23px; }
.cn-sizeopt--xl .cn-sizeopt__a { font-size: 29px; }
.cn-sizeopt__name { font-size: var(--t-xs); font-weight: var(--fw-semi); text-align: center; line-height: var(--lh-tight); }
.cn-sizeopt[aria-pressed="true"] .cn-sizeopt__name { font-weight: var(--fw-bold); }
@media (prefers-reduced-motion: reduce) { .cn-themeopt { transition: none; } .cn-themeopt:active { transform: none; } }


/* =====================================================================
   হটফিক্স ২৩ — স্টাফ হোম: দ্রুত অ্যাকশন বক্স, গোল-কোণ পরিসংখ্যান, এক-লাইনের ভাষা-বোতাম
   রঙ সবই থিম-টোকেন; পাশের মার্জিন ফোনে (cn-home-nobar) — ডেস্কটপে পাতার নিজের প্যাডিং।
   ===================================================================== */

/* ---- দ্রুত অ্যাকশন: প্রতিটি আলাদা কার্ড/বক্সে ---- */
.cn-qsec { background: transparent; border: 0; box-shadow: none; }
.cn-qgrid { gap: var(--s-3); padding: 0; }
.cn-qg {
  justify-content: center;
  gap: var(--s-2);
  min-height: 96px;
  padding: var(--s-3) var(--s-1);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cn-qg:hover { box-shadow: var(--sh-2); }
.cn-qg:active { transform: scale(.97); }
.cn-qg:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cn-qg__ico { width: 46px; height: 46px; border: 0; box-shadow: none; border-radius: var(--r-card); }
.cn-qg:active .cn-qg__ico { transform: none; }
@media (prefers-reduced-motion: reduce) { .cn-qg { transition: none; } .cn-qg:active { transform: none; } }
/* অতি বড় লেখায় ৩ কলাম — লেবেল ভাঙে না */
[data-textsize="xl"] .cn-qgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- চার পরিসংখ্যান: আলাদা গোল-কোণ কার্ড, ওপরে আইকন, নিচে লেখা ---- */
.cn-stat2 {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  min-height: 116px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-card);
  box-shadow: var(--sh-2);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
}
.cn-stat2__ico { width: 38px; height: 38px; border: 0; background: rgba(255, 255, 255, .2); }
.cn-stat2__body { width: 100%; }
.cn-stat2__label { font-size: var(--t-sm); font-weight: var(--fw-semi); }
.cn-stat2__val { white-space: nowrap; overflow-wrap: normal; }
.cn-stat2__note { font-size: var(--t-xs); }
[data-textsize="lg"] .cn-stat2__val,
[data-textsize="xl"] .cn-stat2__val { font-size: var(--t-lg); }

@media (max-width: 899px) {
  .cn-home-nobar .cn-dash > .cn-qsec,
  .cn-home-nobar .cn-dash > .cn-stats { margin-left: var(--s-3); margin-right: var(--s-3); margin-top: var(--s-3); }
}

/* ---- ভাষা-বোতাম: একই লাইনে সমান দুই ভাগ; অতি বড় লেখাতেও ভাঙে না ---- */
.cn-gtile--lang .cn-langswitch,
.cn-arow--lang .cn-langswitch {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2);
  width: 100%; max-width: 360px; margin: 0;
}
.cn-gtile--lang .cn-langswitch form,
.cn-arow--lang .cn-langswitch form { display: block; }
.cn-gtile--lang .cn-langswitch__item,
.cn-arow--lang .cn-langswitch__item {
  width: 100%; justify-content: center; white-space: nowrap;
  min-height: 40px; padding: 0 var(--s-2);
  font-size: min(var(--t-sm), 15px);
}
/* "ভাষা" লেখাটি দৃশ্যে নয় (গ্লোব-আইকনই বলে) — পর্দা-পাঠকের জন্য থাকে */
.cn-gtile--lang .cn-langswitch__label,
.cn-arow--lang .cn-langswitch__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* =====================================================================
   হটফিক্স ২৪ — স্টাফ হোম কমপ্যাক্ট: দ্রুত অ্যাকশন ও চার পরিসংখ্যান এক স্ক্রিনে
   হটফিক্স ২৩-এর মান এখানে সংকুচিত হয়; রঙ সবই থিম-টোকেন।
   ===================================================================== */

/* ---- দ্রুত অ্যাকশন: প্রায় বর্গাকার, কম ভেতরের প্যাডিং, কম ফাঁক ---- */
.cn-qgrid { gap: var(--s-2); }
.cn-qg {
  min-height: 84px;
  gap: 4px;
  padding: var(--s-1);
  box-shadow: var(--sh-1);
}
.cn-qg__ico { width: 36px; height: 36px; }
.cn-qg__label { font-size: var(--t-xs); line-height: 1.2; }
/* ফোনে বক্স হুবহু বর্গাকার; ডেস্কটপে অতি বড় লেখায় ৪ কলাম (৩ কলাম শুধু ফোনে) */
@media (max-width: 899px) { .cn-qg { aspect-ratio: 1 / 1; min-height: 0; } }
/* অতি বড় লেখাতেও ৪ কলাম (এক স্ক্রিনে ধরানোর জন্য); লেবেল দরকারে ২ লাইনে নামে, বক্স দরকারে একটু লম্বা হয় */
[data-textsize="xl"] .cn-qgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-textsize="xl"] .cn-qg { padding: 4px 2px; }
[data-textsize="xl"] .cn-qg__ico { width: 32px; height: 32px; }
[data-textsize="xl"] .cn-qg__label { font-size: var(--t-xs); }

/* ---- চার পরিসংখ্যান: আইকন পাশে, ছোট প্যাডিং ও ফাঁক ---- */
.cn-stats { gap: var(--s-2); }
.cn-stat2 {
  flex-direction: row;
  align-items: center;
  gap: var(--s-2);
  min-height: 72px;
  padding: var(--s-2) var(--s-3);
  box-shadow: var(--sh-1);
}
.cn-stat2__ico { width: 32px; height: 32px; }
.cn-stat2__body { width: auto; flex: 1 1 auto; }
.cn-stat2__label { font-size: var(--t-xs); line-height: var(--lh-tight); }
.cn-stat2__val { font-size: var(--t-lg); line-height: 1.15; }
/* নোট এক লাইনে — বাকিটা ... দিয়ে; ডেস্কটপে পুরো */
.cn-stat2__note { font-size: 11px; line-height: var(--lh-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) {
  .cn-stat2__note { white-space: normal; overflow: visible; text-overflow: clip; }
}

@media (max-width: 899px) {
  .cn-home-nobar .cn-dash > .cn-qsec,
  .cn-home-nobar .cn-dash > .cn-stats { margin-left: var(--s-2); margin-right: var(--s-2); margin-top: var(--s-2); }
}


/* =====================================================================
   হটফিক্স ২৫ — হাজিরা: রোস্টার ও শিক্ষার্থীর সারি আলাদা হালকা কার্ড-বক্সে
   রঙ সবই থিম-টোকেন; ফোন ও ডেস্কটপ দুটোতেই একই ধাঁচ।
   ===================================================================== */

/* ---- রোস্টারের তালিকা ---- */
.cn-rlist { display: flex; flex-direction: column; gap: 6px; }
.cn-rlist .cn-rrow {
  gap: var(--s-2);
  padding: 6px var(--s-3);
  min-height: 48px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  transition: box-shadow .12s ease, transform .12s ease;
}
.cn-rlist .cn-rrow:first-child { border-top: 1px solid var(--c-line); }
.cn-rlist .cn-rrow:hover { background: var(--c-surface); box-shadow: var(--sh-2); }
.cn-rlist .cn-rrow:active { transform: scale(.99); }
.cn-rlist .cn-rrow:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
/* নেওয়া হয়ে গেছে — হালকা সবুজ বক্স (ডানের ব্যাজের লেখাও আছে, রঙ একা সংকেত নয়) */
.cn-rlist .cn-rrow--done { background: var(--c-accent-tint); border-color: var(--c-accent); border-left-width: 3px; }
.cn-rlist .cn-rrow--done:hover { background: var(--c-accent-tint); }
.cn-rlist .cn-rrow__no { min-width: 30px; height: 30px; }
.cn-rlist .cn-rrow__title { font-size: var(--t-sm); }
.cn-rlist .cn-rrow__cnt { font-size: var(--t-xs); }

/* ---- শিক্ষার্থীর তালিকা (শিট) ---- */
.cn-slist {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-2);
  background: var(--c-bg);
}
.cn-slist .cn-srow {
  gap: var(--s-2);
  padding: 6px var(--s-2) 6px var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  transition: background-color .12s ease, border-color .12s ease;
}
.cn-slist .cn-srow:last-child { border-bottom: 1px solid var(--c-line); }
.cn-slist .cn-srow[hidden] { display: none; }
/* অনুপস্থিত বাছলে সারি হালকা লাল (:has না থাকা ব্রাউজারে সাধারণ সাদা বক্সই থাকে — বোতামের ✕ চিহ্ন তো আছেই) */
.cn-slist .cn-srow:has(.cn-seg__opt--a input:checked) {
  background: var(--c-danger-tint);
  border-color: var(--c-line);
  border-left-color: var(--c-danger);
}
.cn-slist .cn-srow .cn-ava { width: 34px; height: 34px; }
.cn-slist .cn-srow__name { font-size: var(--t-sm); }
.cn-slist .cn-seg__opt span { min-height: 40px; min-width: 62px; padding: 0 var(--s-2); }
.cn-slist .cn-seg__opt--a span { min-width: 76px; }
.cn-slist .cn-empty-filter { padding: var(--s-4); }

@media (max-width: 899px) {
  .cn-bleed .cn-rlist { padding: 0 var(--s-2); }
}
@media (prefers-reduced-motion: reduce) {
  .cn-rlist .cn-rrow, .cn-slist .cn-srow { transition: none; }
  .cn-rlist .cn-rrow:active { transform: none; }
}
@media print {
  .cn-slist { background: transparent; padding: 0; }
  .cn-slist .cn-srow, .cn-rlist .cn-rrow { box-shadow: none; }
}

/* =====================================================================
   হটফিক্স ২৬ — মাসিক বিল
   একটি পাতায় মাস-বাছাই, তিন সংখ্যা, করণীয় বাক্স, চিপ ও কার্ড-সারি।
   সব রঙ/মাপ টোকেন থেকে; ফোন-প্রথম।
   ===================================================================== */
.cn-bill-filter { margin-bottom: var(--s-3); }
.cn-bill-filter__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.cn-bill-filter__row--search { grid-template-columns: 1fr auto; align-items: center; margin-top: var(--s-2); }
.cn-bill-filter .cn-field { margin-bottom: 0; }

.cn-bill-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-bottom: var(--s-3); }
.cn-bill-sum__box {
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
}
.cn-bill-sum__label { font-size: var(--t-xs); color: var(--c-text-soft); }
.cn-bill-sum__val { font-size: var(--t-md); font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.cn-bill-sum__box--ok  { border-left: 3px solid var(--c-accent); }
.cn-bill-sum__box--ok .cn-bill-sum__val  { color: var(--c-accent-dark); }
.cn-bill-sum__box--due { border-left: 3px solid var(--c-danger); }
.cn-bill-sum__box--due .cn-bill-sum__val { color: var(--c-danger); }

.cn-bill-todo { margin-bottom: var(--s-3); }
.cn-bill-todo__sub { margin: 0 0 var(--s-2); font-size: var(--t-sm); }
.cn-bill-todo .cn-btn { width: 100%; }
@media (min-width: 600px) { .cn-bill-todo .cn-btn { width: auto; } }

.cn-bill-names { margin-top: var(--s-2); font-size: var(--t-sm); }
.cn-bill-names summary { cursor: pointer; font-weight: var(--fw-semi); min-height: var(--touch-min); display: flex; align-items: center; }
.cn-bill-names ul { margin: 0; padding: 0; list-style: none; max-height: 220px; overflow: auto; }
.cn-bill-names li { display: flex; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) 0; border-top: 1px solid var(--c-line); }
.cn-bill-names__cls { color: var(--c-text-soft); white-space: nowrap; }

.cn-bill-done {
  margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--c-accent-tint);
  color: var(--c-accent-dark);
  border-radius: var(--r-card);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
}

.cn-bill-chips { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-1); margin-bottom: var(--s-2); }
.cn-bill-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: var(--touch-min);
  padding: 0 var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-card);
  color: var(--c-text-soft);
  font-size: var(--t-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
}
.cn-bill-chip.is-on { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-surface); }
.cn-bill-chip__n { opacity: .85; font-weight: var(--fw-regular, 400); }
.cn-bill-hidden { margin: 0 0 var(--s-2); }

.cn-bill-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.cn-bill-tools__pick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.cn-bill-tools__pick[hidden] { display: none; }
.cn-bill-tools #cn-bill-mode[aria-pressed="true"] { background: var(--c-primary-tint); }

.cn-bill-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-3); }
.cn-bill {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-primary-soft);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
}
.cn-bill--cancelled { border-left-color: var(--c-line-strong); opacity: .75; }
.cn-bill__pick { display: none; align-items: center; justify-content: center; min-width: var(--touch-min); min-height: var(--touch-min); margin: calc(var(--s-2) * -1) 0 calc(var(--s-2) * -1) calc(var(--s-3) * -1); }
.cn-bill-list.is-picking .cn-bill__pick { display: flex; }
.cn-bill__pick input { width: 20px; height: 20px; }
.cn-bill__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.cn-bill__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.cn-bill__name { font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.cn-bill__meta { font-size: var(--t-xs); color: var(--c-text-soft); overflow-wrap: anywhere; }
.cn-bill__amt { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.cn-bill__net { font-weight: var(--fw-semi); }
.cn-bill__left { font-size: var(--t-xs); color: var(--c-danger); }

.cn-bill-pager { justify-content: center; align-items: center; }

.cn-bill-refresh { margin-top: var(--s-4); }
.cn-bill-refresh > summary { cursor: pointer; list-style: none; min-height: var(--touch-min); display: flex; align-items: center; }
.cn-bill-refresh > summary::-webkit-details-marker { display: none; }
.cn-bill-refresh > summary::after { content: '▾'; margin-left: auto; }
.cn-bill-refresh[open] > summary::after { content: '▴'; }

@media (max-width: 520px) {
  .cn-bill-sum__box { padding: var(--s-2); }
  .cn-bill-sum__val { font-size: var(--t-sm); }
}
@media (max-width: 339px) {
  .cn-bill-sum { grid-template-columns: 1fr; }
  .cn-bill-sum__box { display: flex; justify-content: space-between; align-items: baseline; }
}
@media (min-width: 900px) {
  .cn-bill-list { gap: var(--s-2); }
}
@media print {
  .cn-bill-filter, .cn-bill-chips, .cn-bill-tools, .cn-bill-todo, .cn-bill-refresh { display: none !important; }
  .cn-bill { box-shadow: none; }
}

/* =====================================================================
   হটফিক্স ২৮ — আদায় সহজ
   (ক) কার টাকা নেবেন  (খ) আদায়ের ফর্ম  (গ) রসিদ ও প্রিন্টের মাপ
   সব রঙ/মাপ টোকেন থেকে; ফোন-প্রথম।
   ===================================================================== */

/* ---------- (ক) কার টাকা নেবেন ---------- */
.cn-pk-search { display: flex; gap: var(--s-2); margin-bottom: var(--s-3); }
.cn-pk-search__input { flex: 1; min-width: 0; min-height: 52px; font-size: var(--t-md); }
.cn-pk-search__btn { min-height: 52px; }
.cn-pk-classes { margin-bottom: var(--s-2); }
.cn-pk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.cn-pk-bar__sum { font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--c-text-soft); }
.cn-pk-bar__toggle { display: inline-flex; border: 1px solid var(--c-line-strong); border-radius: var(--r-card); overflow: hidden; }
.cn-pk-seg {
  display: flex; align-items: center; min-height: 40px; padding: 0 var(--s-3);
  background: var(--c-surface); color: var(--c-text-soft);
  font-size: var(--t-sm); font-weight: var(--fw-semi); text-decoration: none;
}
.cn-pk-seg.is-on { background: var(--c-primary); color: var(--c-surface); }

.cn-pk-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-3); }
.cn-pk {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 64px; padding: var(--s-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line); border-left: 3px solid var(--c-line-strong);
  border-radius: var(--r-card); box-shadow: var(--sh-1);
  color: inherit; text-decoration: none;
  transition: background-color .12s ease;
}
.cn-pk--due { border-left-color: var(--c-danger); }
.cn-pk:active { background: var(--c-surface-alt); }
.cn-pk__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cn-pk__name { font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.cn-pk__meta { font-size: var(--t-xs); color: var(--c-text-soft); }
.cn-pk__credit { color: var(--c-accent-dark); }
.cn-pk__amt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.cn-pk__due { font-weight: var(--fw-bold); color: var(--c-danger); }
.cn-pk__due--zero { color: var(--c-muted); font-weight: var(--fw-normal); }
.cn-pk__months {
  padding: 1px var(--s-2); border-radius: var(--r-card);
  background: var(--c-danger-tint); color: var(--c-danger);
  font-size: var(--t-xs); font-weight: var(--fw-semi);
}
.cn-pk-limit { margin-bottom: var(--s-2); }

/* ---------- (খ) আদায়ের ফর্ম ---------- */
.cn-cl-prof {
  margin-bottom: var(--s-3); padding: var(--s-3) var(--s-4);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-card); box-shadow: var(--sh-1);
}
.cn-cl-prof__name { font-size: var(--t-lg); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.cn-cl-prof__meta { font-size: var(--t-sm); color: var(--c-text-soft); }
.cn-cl-prof__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-3); }
.cn-cl-prof__help { margin: var(--s-2) 0 0; }
.cn-cl-stat { min-width: 0; padding: var(--s-2) var(--s-3); background: var(--c-surface-alt); border: 1px solid var(--c-line); border-left: 3px solid var(--c-line-strong); border-radius: var(--r-card); }
.cn-cl-stat--due { border-left-color: var(--c-danger); }
.cn-cl-stat--credit { border-left-color: var(--c-accent); }
.cn-cl-stat__label { font-size: var(--t-xs); color: var(--c-text-soft); }
.cn-cl-stat__val { font-size: var(--t-md); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.cn-cl-stat--due .cn-cl-stat__val { color: var(--c-danger); }
.cn-cl-stat--credit .cn-cl-stat__val { color: var(--c-accent-dark); }

.cn-cl-h { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-md); font-weight: var(--fw-semi); }
.cn-cl-months { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-2); }
.cn-cl-mo {
  padding: var(--s-3);
  background: var(--c-surface); border: 1px solid var(--c-line); border-left: 3px solid var(--c-warn);
  border-radius: var(--r-card); box-shadow: var(--sh-1);
}
.cn-cl-mo__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.cn-cl-mo__title { font-weight: var(--fw-semi); }
.cn-cl-mo__left { font-weight: var(--fw-bold); color: var(--c-danger); }
.cn-cl-mo__lines { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.cn-cl-mo__lines li { display: flex; justify-content: space-between; gap: var(--s-2); padding: 3px 0; border-top: 1px dashed var(--c-line); font-size: var(--t-sm); color: var(--c-text-soft); }
.cn-cl-mo__lines li.is-minus .cn-money { color: var(--c-accent-dark); }
.cn-cl-mo__meta { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--c-muted); }

.cn-cl-amount { position: relative; }
.cn-cl-amount__cur { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); font-size: var(--t-lg); color: var(--c-muted); pointer-events: none; }
.cn-cl-amount__input { min-height: 60px; padding-left: calc(var(--s-3) + 28px); font-size: var(--t-xl); font-weight: var(--fw-semi); }
.cn-cl-fill { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.cn-cl-fillbtn {
  min-height: 40px; padding: 0 var(--s-3);
  background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-card);
  color: var(--c-primary); font: inherit; font-size: var(--t-sm); font-weight: var(--fw-semi); cursor: pointer;
}
.cn-cl-pv { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-card); background: var(--c-line-soft); color: var(--c-text-soft); font-size: var(--t-sm); font-weight: var(--fw-semi); }
.cn-cl-pv:empty { display: none; }
.cn-cl-pv.is-left   { background: var(--c-warn-tint);   color: var(--c-warn); }
.cn-cl-pv.is-clear  { background: var(--c-accent-tint); color: var(--c-accent-dark); }
.cn-cl-pv.is-credit { background: var(--c-info-tint);   color: var(--c-info); }

.cn-cl-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); }
.cn-cl-method { position: relative; display: block; }
.cn-cl-method input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cn-cl-method span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--touch-min); padding: 0 var(--s-2);
  background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-card);
  color: var(--c-text-soft); font-size: var(--t-sm);
}
.cn-cl-method input:checked + span { background: var(--c-primary-tint); border-color: var(--c-primary); color: var(--c-primary); font-weight: var(--fw-semi); }
.cn-cl-method input:focus-visible + span { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.cn-cl-more { margin-bottom: var(--s-2); }
.cn-cl-more > summary { cursor: pointer; min-height: var(--touch-min); display: flex; align-items: center; color: var(--c-primary); font-weight: var(--fw-semi); }
.cn-cl-actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.cn-cl-submit { width: 100%; min-height: 56px; font-size: var(--t-md); }
.cn-cl-form [hidden] { display: none !important; }

/* ---------- (গ) রসিদ ও প্রিন্টের মাপ ---------- */
.cn-rc-tools {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-bottom: var(--s-3); padding: var(--s-3);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-1);
}
.cn-rc-tools__label { font-size: var(--t-xs); color: var(--c-text-soft); font-weight: var(--fw-semi); }
.cn-rc-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.cn-rc-size { position: relative; display: block; }
.cn-rc-size input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cn-rc-size span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--touch-min); padding: 0 var(--s-2);
  background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--r-card);
  color: var(--c-text-soft); font-size: var(--t-sm);
}
.cn-rc-size input:checked + span { background: var(--c-primary-tint); border-color: var(--c-primary); color: var(--c-primary); font-weight: var(--fw-semi); }
.cn-rc-size input:focus-visible + span { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.cn-rc-print { width: 100%; min-height: 52px; }
.cn-rc-auto { font-size: var(--t-sm); }

.cn-rc { margin-left: auto; margin-right: auto; }
.cn-rc[data-size="58"] { max-width: 232px; font-size: var(--t-xs); }
.cn-rc[data-size="80"] { max-width: 320px; font-size: var(--t-sm); }
.cn-rc[data-size="a5"] { max-width: 560px; }
.cn-rc[data-size="a4"] { max-width: 760px; }

.cn-rc__head { text-align: center; padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line); }
.cn-rc__logo { display: block; margin: 0 auto var(--s-2); width: 56px; height: 56px; object-fit: contain; }
.cn-rc__school { font-size: var(--t-lg); font-weight: var(--fw-bold); }
.cn-rc__addr { font-size: var(--t-xs); color: var(--c-text-soft); }
.cn-rc__title { margin-top: var(--s-2); font-weight: var(--fw-semi); letter-spacing: .04em; }
.cn-rc__kv { margin: var(--s-3) 0; padding: 0; }
.cn-rc__kv > div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 3px 0; }
.cn-rc__kv dt { color: var(--c-text-soft); }
.cn-rc__kv dd { margin: 0; text-align: right; font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.cn-rc__amount { margin: var(--s-3) 0; padding: var(--s-3); text-align: center; background: var(--c-primary-tint); border-radius: var(--r-card); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cn-rc__amount-label { font-size: var(--t-xs); color: var(--c-text-soft); }
.cn-rc__amount-val { font-size: var(--t-2xl); font-weight: var(--fw-bold); color: var(--c-primary); }
.cn-rc__sec { margin-top: var(--s-3); padding-bottom: var(--s-1); border-bottom: 1px solid var(--c-line); font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--c-text-soft); }
.cn-rc__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px dashed var(--c-line); }
.cn-rc__line-main { min-width: 0; }
.cn-rc__line-title { font-weight: var(--fw-semi); }
.cn-rc__line-meta { font-size: var(--t-xs); color: var(--c-muted); overflow-wrap: anywhere; }
.cn-rc__line-amt { flex: none; font-weight: var(--fw-semi); }
.cn-rc__sign { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-6); }
.cn-rc__sign-who { font-size: var(--t-sm); }
.cn-rc__sign-line { min-width: 40%; padding-top: var(--s-1); border-top: 1px solid var(--c-text-soft); text-align: center; font-size: var(--t-xs); color: var(--c-text-soft); }
.cn-rc__foot { margin-top: var(--s-3); text-align: center; font-size: var(--t-xs); color: var(--c-muted); }

@media (min-width: 600px) {
  .cn-rc-sizes { grid-template-columns: repeat(4, 1fr); }
  .cn-rc-print { width: auto; min-width: 240px; align-self: flex-start; }
  .cn-cl-actions { flex-direction: row-reverse; justify-content: flex-start; }
  .cn-cl-submit { width: auto; min-width: 280px; }
}
@media (max-width: 339px) {
  .cn-cl-prof__stats { grid-template-columns: 1fr; }
}

/* ছাপার সময়: কাগজের মাপ অনুযায়ী রসিদ (মেনু/বোতাম base.css-এ লুকানো) */
@media print {
  .cn-rc { border: 0; box-shadow: none; margin: 0 auto; max-width: none; }
  .cn-rc .cn-card__body { padding: 0; }
  .cn-rc[data-size="58"] { width: 54mm; font-size: 10px; }
  .cn-rc[data-size="80"] { width: 74mm; font-size: 11px; }
  .cn-rc[data-size="a5"], .cn-rc[data-size="a4"] { width: 100%; }
  .cn-rc[data-size="58"] .cn-rc__logo, .cn-rc[data-size="80"] .cn-rc__logo { width: 36px; height: 36px; }
  .cn-rc[data-size="58"] .cn-rc__school, .cn-rc[data-size="80"] .cn-rc__school { font-size: 13px; }
  .cn-rc[data-size="58"] .cn-rc__amount-val, .cn-rc[data-size="80"] .cn-rc__amount-val { font-size: 18px; }
  .cn-rc[data-size="58"] .cn-rc__sign, .cn-rc[data-size="80"] .cn-rc__sign { margin-top: 18px; }
  .cn-pk, .cn-cl-mo, .cn-cl-prof { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-pk { transition: none; }
}

/* =====================================================================
   হটফিক্স ২৯ — ফি গ্রহণ হাজিরার ধাঁচে
   (ক) শ্রেণি-তালিকা  (খ) শিক্ষার্থী-তালিকা  (গ) পেমেন্ট হিস্ট্রি ও স্টেটমেন্ট
   সব রঙ/মাপ টোকেন থেকে (কাঁচা hex নেই); ফোন-প্রথম। হাজিরার .cn-rlist/.cn-slist পুনর্ব্যবহার।
   ===================================================================== */

/* ---------- (ক) শ্রেণি-তালিকা ---------- */
.cn-fc-total { padding: var(--s-3) var(--s-4); }
.cn-fc-total__label { font-size: var(--t-xs); color: var(--c-text-soft); font-weight: var(--fw-semi); }
.cn-fc-total__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-1); }
.cn-fc-k { font-size: var(--t-xs); color: var(--c-text-soft); }
.cn-fc-v { font-size: var(--t-lg); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.cn-fc-v--due { color: var(--c-danger); }

.cn-rlist .cn-fc-row { min-height: 60px; }
.cn-fc-meta--due { color: var(--c-danger); font-weight: var(--fw-semi); }
.cn-fc-meta--ok { color: var(--c-accent-dark); }
.cn-fc-amt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: var(--t-xs); text-align: right; }
.cn-fc-amt__line { display: flex; gap: var(--s-2); align-items: baseline; justify-content: flex-end; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.cn-fc-amt__line--due { color: var(--c-danger); font-weight: var(--fw-bold); }

/* ---------- (খ) শিক্ষার্থী-তালিকা ---------- */
.cn-chips.cn-fs-chips { flex-wrap: wrap; }
.cn-chips a.cn-chip {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-width: 96px; text-decoration: none;
}
.cn-chip.is-on { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-surface); }

.cn-slist .cn-fsrow { flex-wrap: wrap; align-items: center; row-gap: var(--s-2); }
.cn-slist .cn-fsrow--due { border-left-color: var(--c-danger); }
.cn-fsrow__who {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--s-2);
  color: inherit; text-decoration: none;
}
.cn-fsrow__amt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.cn-fsrow__k { font-size: var(--t-xs); color: var(--c-text-soft); }
.cn-fsrow__due { font-weight: var(--fw-bold); color: var(--c-danger); font-variant-numeric: tabular-nums; }
.cn-fsrow__acts { flex: 1 0 100%; display: flex; gap: var(--s-2); }
.cn-fsrow__acts .cn-btn { flex: 1; min-width: 0; height: auto; min-height: 40px; padding: var(--s-1) var(--s-2); font-size: var(--t-sm); line-height: var(--lh-tight); text-align: center; }

.cn-cl-prof__top--photo { display: flex; align-items: center; gap: var(--s-3); }
.cn-cl-prof__who { flex: 1; min-width: 0; }
.cn-cl-prof__hist {
  display: inline-flex; align-items: center; min-height: 36px;
  color: var(--c-primary); font-size: var(--t-sm); font-weight: var(--fw-semi); text-decoration: none;
}

/* ---------- (গ) পেমেন্ট হিস্ট্রি ও স্টেটমেন্ট ---------- */
.cn-hist-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-3); }
.cn-hist-tools .cn-help { flex: 1 0 100%; margin: 0; }
.cn-hist-print { min-height: 48px; }
.cn-hist { max-width: 760px; margin-left: auto; margin-right: auto; }
.cn-hist__who { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-3) 0; }
.cn-hist__who-main { min-width: 0; }
.cn-hist__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s-2); margin-bottom: var(--s-3); }

.cn-hist-item { padding: var(--s-3) 0; border-bottom: 1px dashed var(--c-line); }
.cn-hist-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.cn-hist-item__main { min-width: 0; }
.cn-hist-item__date { font-weight: var(--fw-semi); }
.cn-hist-item__meta { font-size: var(--t-xs); color: var(--c-text-soft); overflow-wrap: anywhere; }
.cn-hist-item__rno { color: var(--c-primary); font-weight: var(--fw-semi); text-decoration: none; }
.cn-hist-item__amt { flex: none; font-weight: var(--fw-bold); font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.cn-hist-item.is-reversed .cn-hist-item__amt { text-decoration: line-through; color: var(--c-muted); }
.cn-hist-item__lines { list-style: none; margin: var(--s-2) 0 0; padding: 0 0 0 var(--s-3); border-left: 2px solid var(--c-line); }
.cn-hist-item__lines li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); padding: 2px 0; font-size: var(--t-sm); color: var(--c-text-soft); }
.cn-hist-item__for { min-width: 0; overflow-wrap: anywhere; }
.cn-hist-item__heads { color: var(--c-muted); }
.cn-hist-item__foot { margin-top: var(--s-1); font-size: var(--t-xs); }
.cn-hist-item__foot a { color: var(--c-primary); text-decoration: none; }

@media (max-width: 339px) {
  .cn-fc-total__row { grid-template-columns: 1fr; }
  .cn-chips a.cn-chip { min-width: 0; flex: 1 1 100%; }
}
@media print {
  .cn-hist { border: 0; box-shadow: none; max-width: none; }
  .cn-hist .cn-card__body { padding: 0; }
  .cn-hist-item { break-inside: avoid; }
  .cn-hist__stats .cn-cl-stat { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-rlist .cn-fc-row, .cn-slist .cn-fsrow { transition: none; }
}

/* =====================================================================
   হটফিক্স ৩০ — রসিদ: আলাদা "প্রিন্ট" ও "ডাউনলোড" বোতাম + সব মাপে এক পাতা
   রঙ/মাপ টোকেন থেকে (কাঁচা hex নেই)।
   ===================================================================== */

/* ---------- বোতাম-সারি ---------- */
.cn-rc-acts { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
.cn-rc-acts .cn-btn { width: 100%; min-height: 52px; font-size: var(--t-md); }
.cn-rc-dl { font-weight: var(--fw-semi); }
.cn-rc-fmt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); align-items: center; }
.cn-rc-fmt .cn-rc-tools__label { grid-column: 1 / -1; }
.cn-rc-share { width: 100%; min-height: var(--touch-min); }
.cn-rc-share[hidden] { display: none !important; }
.cn-rc-msg { min-height: 1.2em; color: var(--c-text-soft); }

@media (min-width: 600px) {
  .cn-rc-acts { grid-template-columns: 1fr 1fr; max-width: 520px; }
  .cn-rc-fmt { grid-template-columns: auto 140px 140px; max-width: 520px; }
  .cn-rc-fmt .cn-rc-tools__label { grid-column: auto; }
  .cn-rc-share { width: auto; min-width: 240px; align-self: flex-start; }
}

/* ---------- ছাপা: কমপ্যাক্ট, এক পাতা ---------- */
@media print {
  .cn-rc { line-height: 1.35; break-inside: avoid; page-break-inside: avoid; page-break-after: avoid; }
  .cn-rc[data-size="a5"] { font-size: 11pt; }
  .cn-rc[data-size="a4"] { font-size: 12pt; }
  .cn-rc__head { padding-bottom: var(--s-2); }
  .cn-rc__logo { margin-bottom: var(--s-1); }
  .cn-rc[data-size="a5"] .cn-rc__logo, .cn-rc[data-size="a4"] .cn-rc__logo { width: 48px; height: 48px; }
  .cn-rc__title { margin-top: var(--s-1); }
  .cn-rc__kv { margin: var(--s-2) 0; }
  .cn-rc__kv > div { padding: 1px 0; }
  .cn-rc__amount { margin: var(--s-2) 0; padding: var(--s-2); }
  .cn-rc[data-size="a5"] .cn-rc__amount-val, .cn-rc[data-size="a4"] .cn-rc__amount-val { font-size: var(--t-xl); }
  .cn-rc__sec { margin-top: var(--s-2); padding-bottom: 2px; }
  .cn-rc__line { padding: var(--s-1) 0; break-inside: avoid; }
  .cn-rc__sign { margin-top: var(--s-5); }
  .cn-rc[data-size="58"] .cn-rc__sign, .cn-rc[data-size="80"] .cn-rc__sign { margin-top: 14px; }
  .cn-rc__foot { margin-top: var(--s-2); }
  .cn-rc .cn-help { margin: 2px 0; }
}

/* =====================================================================
   হটফিক্স ৩১ — পেমেন্ট হিস্ট্রি/স্টেটমেন্ট: প্রিন্ট · ডাউনলোড · কাগজের মাপ
   রসিদের .cn-rc-tools/.cn-rc-acts/.cn-rc-fmt/.cn-rc-size পুনর্ব্যবহার; রঙ/মাপ টোকেন থেকে (কাঁচা hex নেই)।
   ===================================================================== */

/* পুরোনো .cn-hist-tools (সারি) রসিদের কলাম-ধাঁচকে ছাপিয়ে না যায় */
.cn-rc-tools.cn-hist-tools { flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin-bottom: var(--s-3); }
.cn-rc-tools.cn-hist-tools .cn-help { flex: none; margin: 0; }
.cn-hist-tools { max-width: 760px; margin-left: auto; margin-right: auto; }

/* পর্দায় প্রিভিউ কাগজের মাপ অনুযায়ী */
.cn-hist[data-size="58"] { max-width: 232px; font-size: var(--t-xs); }
.cn-hist[data-size="80"] { max-width: 320px; font-size: var(--t-sm); }
.cn-hist[data-size="a5"] { max-width: 560px; }
.cn-hist[data-size="a4"] { max-width: 760px; }
.cn-hist[data-size="58"] .cn-hist__stats, .cn-hist[data-size="80"] .cn-hist__stats { grid-template-columns: 1fr; }

@media print {
  .cn-hist { margin: 0 auto; line-height: 1.35; }
  .cn-hist[data-size="58"] { width: 54mm; font-size: 10px; }
  .cn-hist[data-size="80"] { width: 74mm; font-size: 11px; }
  .cn-hist[data-size="a5"] { width: 100%; font-size: 10.5pt; }
  .cn-hist[data-size="a4"] { width: 100%; font-size: 11.5pt; }
  .cn-hist[data-size="58"] .cn-rc__logo, .cn-hist[data-size="80"] .cn-rc__logo { width: 36px; height: 36px; }
  .cn-hist[data-size="58"] .cn-rc__school, .cn-hist[data-size="80"] .cn-rc__school { font-size: 13px; }
  .cn-hist[data-size="58"] .cn-hist__stats, .cn-hist[data-size="80"] .cn-hist__stats { grid-template-columns: 1fr; }
  .cn-hist-item { padding: var(--s-2) 0; }
  .cn-hist__who { margin: var(--s-2) 0; }
  .cn-hist[data-size="58"] .cn-ava, .cn-hist[data-size="80"] .cn-ava { display: none; }
}

/* =====================================================================
   হটফিক্স ৩৫ — ড্যাশবোর্ডের শিক্ষাবর্ষ-পট্টি ও খোঁজার লোডিং অবস্থা (সব রঙ/মাপ টোকেন থেকে)
   ===================================================================== */
.cn-ucard__ses {
  grid-area: ses;
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3); padding-top: var(--s-2);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-sm); color: var(--c-text-soft);
  min-width: 0;
}
.cn-ucard__ses .cn-ico { flex: none; color: var(--c-primary); }
.cn-ucard__ses-k { flex: none; }
.cn-ucard__ses-v { min-width: 0; font-weight: var(--fw-bold); color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

.cn-pk-search.is-busy .cn-pk-search__input { opacity: .7; }
.cn-pk-search__btn[aria-busy="true"] { cursor: progress; }

/* =====================================================================
   হটফিক্স ৩৬ — শিক্ষার্থী-পাতা: শ্রেণির তালিকা (ডানে ছাত্র সংখ্যা) ও শিক্ষার্থীর সারি
   হাজিরার .cn-rlist/.cn-rrow ও ফি-র .cn-slist/.cn-srow পুনর্ব্যবহার; রঙ/মাপ সব টোকেন থেকে।
   ===================================================================== */
.cn-stu-filter { display: flex; flex-direction: column; gap: var(--s-2); }
.cn-stu-filter__row { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.cn-stu-filter__q { flex: 1; min-width: 0; min-height: 48px; font-size: var(--t-md); }
.cn-stu-filter__go { min-height: 48px; flex: none; }
.cn-stu-filter__lbl { flex: none; font-size: var(--t-sm); color: var(--c-text-soft); font-weight: var(--fw-semi); }
.cn-stu-filter__status { flex: 1; min-width: 0; max-width: 360px; min-height: 44px; }

/* শ্রেণির সারি: নাম বাঁয়ে, ছাত্র সংখ্যা ডানে (তীরের আগে) */
.cn-stu-cnt {
  flex: none; white-space: nowrap;
  padding: 2px var(--s-2);
  border-radius: var(--r-card);
  background: var(--c-primary-tint);
  color: var(--c-primary);
  font-size: var(--t-sm); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; unicode-bidi: isolate;
}
.cn-stu-cnt--zero { background: var(--c-surface-alt); color: var(--c-muted); font-weight: var(--fw-medium); }
.cn-rlist .cn-stu-row--warn { background: var(--c-warn-tint); border-left: 3px solid var(--c-warn); }
.cn-rlist .cn-stu-row--warn:hover { background: var(--c-warn-tint); }
.cn-rlist .cn-stu-row .cn-rrow__title { font-size: var(--t-md); overflow-wrap: anywhere; }

/* শিক্ষার্থীর সারি (পুরো সারি = প্রোফাইলের লিংক) */
.cn-stu-srow { color: inherit; text-decoration: none; min-height: 52px; }
.cn-stu-srow:hover { background: var(--c-surface-alt); color: inherit; }
.cn-stu-srow:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cn-slist .cn-stu-srow { border-left-color: var(--c-primary); }
.cn-stu-roll {
  display: inline-block; min-width: 1.6em; padding: 0 var(--s-1);
  border-radius: var(--r-card); background: var(--c-primary-tint); color: var(--c-primary);
  font-size: var(--t-sm); font-weight: var(--fw-bold); text-align: center;
  font-variant-numeric: tabular-nums;
}
.cn-stu-id { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

@media screen and (max-width: 899px) {
  .cn-bleed .cn-stu-filter { padding: 0 var(--s-3); }
}
@media (max-width: 380px) {
  .cn-stu-filter__go { padding-left: var(--s-3); padding-right: var(--s-3); }
  .cn-stu-srow .cn-rrow__go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-stu-srow { transition: none; }
}


/* =====================================================================
   হটফিক্স ৩৮ — স্টাফের দায়িত্ব ও অনুমতি (.cn-rsp-*)
   মোবাইল-প্রথম: সব এক কলাম, ছোঁয়ার জায়গা ≥ --touch-min; কেবল টোকেন।
   ===================================================================== */
.cn-rsp-opts { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.cn-rsp-opt {
  display: flex; align-items: flex-start; gap: var(--s-3);
  min-height: var(--touch-min);
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
  cursor: pointer;
}
.cn-rsp-opt input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--c-primary); }
.cn-rsp-opt:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-tint); }
.cn-rsp-opt:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cn-rsp-opt__t, .cn-rsp-opt__d { display: block; }
.cn-rsp-opt__t { font-weight: var(--fw-bold); color: var(--c-text); overflow-wrap: anywhere; }
.cn-rsp-opt__d { margin-top: 2px; font-size: var(--t-sm); color: var(--c-text-soft); overflow-wrap: anywhere; }
.cn-rsp-opt--note { border-style: dashed; }

.cn-rsp-sub {
  margin-top: var(--s-3); padding: var(--s-3);
  border-left: 3px solid var(--c-primary);
  background: var(--c-surface-alt);
  border-radius: var(--r-card);
}
.cn-rsp-sub[hidden] { display: none; }
.cn-rsp-sub__t { font-size: var(--t-sm); font-weight: var(--fw-bold); color: var(--c-text); margin-bottom: var(--s-1); }

.cn-rsp-tg { display: grid; gap: var(--s-2); }

.cn-rsp-grp {
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
  margin-top: var(--s-2);
}
.cn-rsp-grp > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: var(--touch-min); padding: var(--s-2) var(--s-3);
  font-weight: var(--fw-bold); cursor: pointer; list-style: none;
}
.cn-rsp-grp > summary::-webkit-details-marker { display: none; }
.cn-rsp-grp > summary::after { content: '▾'; color: var(--c-muted); flex: none; }
.cn-rsp-grp[open] > summary::after { content: '▴'; }
.cn-rsp-grp > summary:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cn-rsp-grp__n { font-size: var(--t-sm); color: var(--c-primary); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.cn-rsp-grp__body { padding: 0 var(--s-3) var(--s-3); border-top: 1px solid var(--c-line-soft); }
.cn-rsp-sec { margin-top: var(--s-2); font-size: var(--t-sm); font-weight: var(--fw-bold); color: var(--c-text-soft); }
.cn-rsp-grp .cn-check { padding: var(--s-1) 0; overflow-wrap: anywhere; }

.cn-rsp-save {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  margin-top: var(--s-4); padding: var(--s-3) 0;
  border-top: 1px solid var(--c-line);
}
.cn-rsp-save .cn-btn { flex: 1 1 140px; }

.cn-rsp-link { display: flex; }
.cn-rsp-link .cn-btn { flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .cn-rsp-opt { transition: none; }
}

/* =====================================================================
   হটফিক্স ৩৯ — দায়িত্বের সারাংশ (স্টাফের পাতা · দায়িত্ব-এলাকা · আমার দায়িত্ব)
   শুধু থিম-টোকেন; কেবল-পড়া তালিকা।
   ===================================================================== */
.cn-rsum { display: grid; }
.cn-rsum-row { padding: var(--s-3) 0; border-top: 1px solid var(--c-line-soft); }
.cn-rsum-row:first-child { border-top: 0; padding-top: 0; }
.cn-rsum-row__t { font-size: var(--t-sm); font-weight: var(--fw-bold); color: var(--c-text-soft); }
.cn-rsum-row__v { margin-top: var(--s-1); min-width: 0; overflow-wrap: anywhere; }
.cn-rsum-main { font-weight: var(--fw-bold); color: var(--c-text); }
.cn-rsum-note { margin-top: 2px; font-size: var(--t-sm); color: var(--c-text-soft); }
.cn-rsum-none { color: var(--c-muted); }
.cn-rsum-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.cn-rsum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cn-rsum-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface-alt);
}
.cn-rsum-list__a { font-weight: var(--fw-bold); color: var(--c-text); }
.cn-rsum-list__arrow { color: var(--c-muted); }
.cn-rsum-list__b { color: var(--c-text-soft); min-width: 0; overflow-wrap: anywhere; }
.cn-rsum-roles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin: var(--s-2) 0 var(--s-3); }
.cn-rsum-roles__t { font-size: var(--t-sm); font-weight: var(--fw-bold); color: var(--c-text-soft); }
.cn-rsum-adv { margin-top: var(--s-4); }
.cn-field[hidden] { display: none; }

/* SMS বন্ধ/চালু (হটফিক্স ৪২) — কেবল থিম-টোকেন */
.cn-mute-row { display: grid; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--c-line-soft); }
.cn-mute-row:first-child { border-top: 0; padding-top: 0; }
.cn-mute-row__name { font-weight: var(--fw-bold); min-width: 0; overflow-wrap: anywhere; }
.cn-mute-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.cn-mute-row__note { font-size: var(--t-xs); color: var(--c-muted); overflow-wrap: anywhere; }
.cn-mute-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cn-mute-acts form { margin: 0; }
.cn-mute-reason { margin-bottom: var(--s-2); }
.cn-mute-sub { margin: var(--s-5) 0 var(--s-2); font-size: var(--t-sm); font-weight: var(--fw-bold); color: var(--c-text-soft); }

/* হাজিরা নেওয়ার পদ্ধতি (হটফিক্স ৪৩) — কেবল থিম-টোকেন */
.cn-amth-now { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.cn-amth-opt { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); margin-bottom: var(--s-2); border: 1px solid var(--c-line); border-radius: var(--r-btn); cursor: pointer; }
.cn-amth-opt input { margin-top: var(--s-1); flex: none; }
.cn-amth-opt > span { display: grid; gap: var(--s-1); min-width: 0; }
.cn-amth-row { display: grid; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--c-line-soft); }
.cn-amth-row:first-of-type { border-top: 0; }
.cn-amth-row__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.cn-amth-row__name { font-weight: var(--fw-bold); min-width: 0; overflow-wrap: anywhere; }
.cn-amth-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; }
.cn-amth-form .cn-select { flex: 1 1 9rem; width: auto; margin-top: 0; }

/* অভিভাবকের হাজিরা: দিনের নিচে ক্লাস অনুযায়ী (হটফিক্স ৪৩) */
.cn-gday--wrap { flex-wrap: wrap; }
.cn-gday__periods { flex: 1 1 100%; min-width: 0; }
.cn-gday__periods summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-height: var(--touch-min); cursor: pointer; font-size: var(--t-sm); font-weight: var(--fw-semi); color: var(--c-text-soft); }
.cn-gday__periods summary::after { content: '▾'; margin-inline-start: auto; }
.cn-gday__periods[open] summary::after { content: '▴'; }
.cn-gday__pabs { color: var(--c-danger); font-weight: var(--fw-bold); }
.cn-pchips { list-style: none; margin: var(--s-1) 0 var(--s-2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.cn-pchip { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--r-pill); font-size: var(--t-sm); background: var(--c-accent-tint); color: var(--c-accent-dark); }
.cn-pchip--a { background: var(--c-surface); color: var(--c-danger); box-shadow: inset 0 0 0 1px var(--c-danger); }
.cn-pchip__ico { display: inline-flex; flex: none; }
.cn-pchip__txt { min-width: 0; overflow-wrap: anywhere; }

/* =====================================================================
   হটফিক্স ৪৫ — সুপার অ্যাডমিনের পাতা: স্কুল-হোমের একই কার্ড-ভাষা
   রঙ সবই থিম-টোকেন; ফোন-প্রথম; তথ্য ও যুক্তি অপরিবর্তিত — কেবল সাজ।
   ===================================================================== */

/* ---- .cn-sa: ভেতরের পুরোনো .cn-card / .cn-stat নতুন ধাঁচে (বিস্তারিত পাতাগুলোতে) ---- */
.cn-sa .cn-card { border-radius: var(--r-card); box-shadow: var(--sh-2); }
.cn-sa .cn-card__head {
  background: var(--c-primary-tint); color: var(--c-primary);
  border-bottom: 0; border-inline-start: 5px solid var(--c-primary);
  font-weight: var(--fw-bold);
}
.cn-sa .cn-stat { border-radius: var(--r-card); box-shadow: var(--sh-1); }

/* ---- পাতার হিরো: আইকন · নাম · উপশিরোনাম ---- */
.cn-phero {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); background: var(--c-appbar-bg); color: var(--c-appbar-fg);
  border-radius: var(--r-card); box-shadow: var(--sh-2);
}
.cn-phero__ico {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-primary);
}
.cn-phero__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.cn-phero__title { margin: 0; font-size: var(--t-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: inherit; overflow-wrap: anywhere; }
.cn-phero__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-sm); opacity: .95; }

/* ---- তালিকার সারি-কার্ড (প্রতিষ্ঠান, আবেদন) ---- */
.cn-lrows { display: flex; flex-direction: column; gap: var(--s-3); }
.cn-lrow {
  --l-fg: var(--c-primary); --l-bg: var(--c-primary-tint);
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 68px; padding: var(--s-3) var(--s-4);
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-line); border-inline-start: 5px solid var(--l-fg);
  border-radius: var(--r-card); box-shadow: var(--sh-1); text-decoration: none;
}
.cn-lrow:hover { color: var(--c-text); box-shadow: var(--sh-2); }
.cn-lrow:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cn-lrow--ok   { --l-fg: var(--c-accent-dark); --l-bg: var(--c-accent-tint); }
.cn-lrow--info { --l-fg: var(--c-info);        --l-bg: var(--c-info-tint); }
.cn-lrow--warn { --l-fg: var(--c-warn);        --l-bg: var(--c-warn-tint); }
.cn-lrow--bad  { --l-fg: var(--c-danger);      --l-bg: var(--c-danger-tint); }
.cn-lrow--none { --l-fg: var(--c-muted);       --l-bg: var(--c-surface-alt); }
.cn-lrow__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--l-bg); color: var(--l-fg); }
.cn-lrow__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cn-lrow__title { font-size: var(--t-md); font-weight: var(--fw-bold); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.cn-lrow__meta { font-size: var(--t-sm); color: var(--c-text-soft); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.cn-lrow__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); color: var(--l-fg); }

/* ---- অবস্থা-ট্যাব (আবেদন): ফোনে ২×২, চওড়া পর্দায় এক সারি ---- */
.cn-gtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (min-width: 640px) { .cn-gtabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cn-gtab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: var(--touch-min); padding: 0 var(--s-3);
  background: var(--c-surface); color: var(--c-text-soft);
  border: 1px solid var(--c-line); border-radius: var(--r-btn); box-shadow: var(--sh-1);
  font-size: var(--t-sm); font-weight: var(--fw-bold); text-decoration: none;
}
.cn-gtab:hover { color: var(--c-primary); }
.cn-gtab:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cn-gtab[aria-current="page"] { background: var(--c-primary); color: var(--c-surface); border-color: var(--c-primary); }
.cn-gtab__n {
  flex: none; min-width: 26px; height: 26px; padding: 0 var(--s-2);
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--c-primary-tint); color: var(--c-primary);
  font-size: var(--t-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.cn-gtab[aria-current="page"] .cn-gtab__n { background: var(--c-surface); color: var(--c-primary); }

/* ---- অবস্থার চিপ (লাইফসাইকেল) ---- */
.cn-gchips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.cn-gchip {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-3);
  background: var(--c-surface); color: var(--g-fg); border: 1px solid var(--g-fg); border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: var(--fw-semi); text-decoration: none;
}
.cn-gchip:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.cn-gchip__n { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* ---- স্বাস্থ্য-সারি: শিরোনাম · বিবরণ · ডানে ব্যাজ/সংখ্যা ---- */
.cn-hrow {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); background: var(--c-surface); color: var(--c-text);
  border-radius: var(--r-btn); box-shadow: var(--sh-1);
}
.cn-hrow__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cn-hrow__title { font-size: var(--t-md); font-weight: var(--fw-semi); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.cn-hrow__meta { font-size: var(--t-xs); color: var(--c-muted); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.cn-hrow__side { flex: none; text-align: end; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

.cn-gtile--warn { --g-bg: var(--c-warn-tint); --g-fg: var(--c-warn); }

/* =====================================================================
   হটফিক্স ৪৬ — বাকি সুপার অ্যাডমিন পাতা (বিলিং, SMS, ব্যাকআপ, পরীক্ষা, ডেমো, প্ল্যান, সাইট, পাসওয়ার্ড)
   পুরোনো .cn-stat / .cn-listrow-কে .cn-sa-র ভেতরে নতুন কার্ড-ভাষায় আনা — HTML না বদলেই।
   রঙ সবই থিম-টোকেন; অবস্থা রঙ ও লেখা/সংখ্যা দুটোতেই থাকে।
   ===================================================================== */
.cn-sa .cn-stat { border-inline-start: 5px solid var(--c-primary); }
.cn-sa .cn-stat--ok   { border-inline-start-color: var(--c-accent-dark); }
.cn-sa .cn-stat--warn { border-inline-start-color: var(--c-warn); }
.cn-sa .cn-stat--due  { border-inline-start-color: var(--c-danger); }
.cn-sa .cn-stat__label { font-weight: var(--fw-semi); }
.cn-sa .cn-listrow { border-radius: var(--r-btn); }
.cn-sa .cn-card__body > .cn-listrow:hover { background: var(--c-primary-tint); }
.cn-phero a { color: inherit; text-decoration: underline; font-weight: var(--fw-semi); }
.cn-phero b { overflow-wrap: anywhere; }

/* =====================================================================
   হটফিক্স ৪৭ — স্কুল-স্টাফের সব পাতা: নতুন শিরোনাম ও কার্ড (.cn-ui2)
   body.cn-ui2 বসে অভিভাবক ছাড়া সব ভূমিকায় (layouts/app.php)। নিয়ম:
   - কেবল পাতার সরাসরি-সন্তান (.cn-page > …) — তাই মোড়ানো (প্রান্ত-থেকে-প্রান্তের) পাতা (হোম, হাজিরা,
     সুপার অ্যাডমিন) অপরিবর্তিত থাকে;
   - অভিভাবক-ধাঁচের (--ava, --dup) শিরোনাম অপরিবর্তিত;
   - রঙ সবই থিম-টোকেন; HTML/ডেটা/যুক্তি কিছুই বদলায় না।
   ===================================================================== */
.cn-ui2 .cn-page > .cn-pagehead:not(.cn-pagehead--ava):not(.cn-pagehead--dup) {
  flex-direction: column; align-items: flex-start; justify-content: center; flex-wrap: nowrap;
  gap: var(--s-1); padding: var(--s-4);
  background: var(--c-appbar-bg); color: var(--c-appbar-fg);
  border-radius: var(--r-card); box-shadow: var(--sh-2);
}
.cn-ui2 .cn-page > .cn-pagehead:not(.cn-pagehead--ava):not(.cn-pagehead--dup) h1 {
  color: inherit; font-size: var(--t-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); overflow-wrap: anywhere;
}
.cn-ui2 .cn-page > .cn-pagehead:not(.cn-pagehead--ava):not(.cn-pagehead--dup) .cn-pagehead__sub { color: inherit; opacity: .92; }
.cn-ui2 .cn-page > .cn-pagehead:not(.cn-pagehead--ava):not(.cn-pagehead--dup) a { color: inherit; text-decoration: underline; font-weight: var(--fw-semi); }

.cn-ui2 .cn-page > .cn-card { border-radius: var(--r-card); box-shadow: var(--sh-2); }
.cn-ui2 .cn-page > .cn-card > .cn-card__head {
  background: var(--c-primary-tint); color: var(--c-primary);
  border-bottom: 0; border-inline-start: 5px solid var(--c-primary);
  font-weight: var(--fw-bold);
}
.cn-ui2 .cn-page > .cn-stats > .cn-stat { border-radius: var(--r-card); box-shadow: var(--sh-1); border-inline-start: 5px solid var(--c-primary); }
.cn-ui2 .cn-page > .cn-stats > .cn-stat--ok   { border-inline-start-color: var(--c-accent-dark); }
.cn-ui2 .cn-page > .cn-stats > .cn-stat--warn { border-inline-start-color: var(--c-warn); }
.cn-ui2 .cn-page > .cn-stats > .cn-stat--due  { border-inline-start-color: var(--c-danger); }
.cn-ui2 .cn-page > .cn-stats + * { margin-top: var(--s-4); }

/* =====================================================================
   হটফিক্স ৪৮ — স্কুল-স্টাফের তালিকা-পাতা: প্রতিটি সারি আলাদা কার্ড (.cn-ui2)
   শর্ত (সবকটি মিললে তবেই): পাতার সরাসরি-সন্তান কার্ড · কার্ডে .cn-card__head নেই ·
   কার্ডের শরীরের সব সন্তান .cn-listrow। তাই ফিল্টার-ফর্ম/টেবিল/খালি-বার্তা ওয়ালা কার্ড অপরিবর্তিত।
   ( :has পুরনো ব্রাউজারে না চললে কার্ড আগের চেহারাতেই থাকে — কিছু ভাঙে না। )
   রঙ সবই থিম-টোকেন।
   ===================================================================== */
.cn-ui2 .cn-page > .cn-card:has(> .cn-card__body > .cn-listrow):not(:has(> .cn-card__head)):not(:has(> .cn-card__body > :not(.cn-listrow))) {
  background: transparent; border: 0; box-shadow: none; overflow: visible; margin-top: var(--s-3);
}
.cn-ui2 .cn-page > .cn-card:has(> .cn-card__body > .cn-listrow):not(:has(> .cn-card__head)):not(:has(> .cn-card__body > :not(.cn-listrow))) > .cn-card__body {
  padding: 0; display: flex; flex-direction: column; gap: var(--s-3);
}
.cn-ui2 .cn-page > .cn-card:has(> .cn-card__body > .cn-listrow):not(:has(> .cn-card__head)):not(:has(> .cn-card__body > :not(.cn-listrow))) > .cn-card__body > .cn-listrow {
  background: var(--c-surface); border: 1px solid var(--c-line); border-inline-start: 5px solid var(--c-primary);
  border-radius: var(--r-card); box-shadow: var(--sh-1); padding: var(--s-3) var(--s-4); min-height: 68px;
  color: var(--c-text); text-decoration: none;
}
.cn-ui2 .cn-page > .cn-card:has(> .cn-card__body > .cn-listrow):not(:has(> .cn-card__head)):not(:has(> .cn-card__body > :not(.cn-listrow))) > .cn-card__body > .cn-listrow:hover {
  background: var(--c-primary-tint);
}

/* =====================================================================
   হটফিক্স ৪৯ — স্কুল-স্টাফের পাতা: টেবিল-মাথা, খালি-অবস্থা, বার্তা-পট্টি (.cn-ui2)
   সবই পাতার সরাসরি-সন্তানের ভেতরে — মোড়া পাতা (হোম, হাজিরা, সুপার অ্যাডমিন) অপরিবর্তিত।
   রঙ সবই থিম-টোকেন; HTML/ডেটা/যুক্তি কিছুই বদলায় না।
   ===================================================================== */
.cn-ui2 .cn-page > .cn-card .cn-table th {
  background: var(--c-primary-tint); color: var(--c-primary); font-weight: var(--fw-bold);
  border-bottom: 2px solid var(--c-primary-soft);
}
.cn-ui2 .cn-page > .cn-card .cn-table tbody tr:hover { background: var(--c-primary-tint); }
.cn-ui2 .cn-page > .cn-card .cn-empty {
  margin: var(--s-3); padding: var(--s-6) var(--s-4);
  border: 2px dashed var(--c-line); border-radius: var(--r-card); background: var(--c-surface-alt);
}
.cn-ui2 .cn-page > .cn-card .cn-empty__icon { opacity: .7; color: var(--c-primary); }
.cn-ui2 .cn-page > .cn-empty {
  border: 2px dashed var(--c-line); border-radius: var(--r-card); background: var(--c-surface); padding: var(--s-6) var(--s-4); margin-top: var(--s-3);
}
.cn-ui2 .cn-page > .cn-alert { box-shadow: var(--sh-1); }

/* =====================================================================
   হটফিক্স ৫০ — লগইন ও প্রবেশের পাতা (.cn-authcard)
   লগইন, পাসওয়ার্ড-সাহায্য, আবেদন, ডেমো ইত্যাদি — একই কার্ড। শুধু চেহারা; ফর্ম/যুক্তি অপরিবর্তিত।
   নিচের দুই লিংক-সারি (নতুন প্রতিষ্ঠান / ডেমো) পরপর থাকলে তবেই পৃথক সারি — এক-লিংকের পাতা অপরিবর্তিত।
   রঙ সবই থিম-টোকেন।
   ===================================================================== */
.cn-authpage { background: linear-gradient(var(--c-primary-tint), var(--c-bg)); }
.cn-authcard > .cn-card {
  border-top: 6px solid var(--c-primary); border-radius: var(--r-card); box-shadow: var(--sh-2);
}
.cn-authcard__title { padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line-soft); }
.cn-authcard .cn-authcard__forgot:has(+ .cn-authcard__forgot) {
  text-align: center; margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--c-line-soft);
}
.cn-authcard .cn-authcard__forgot + .cn-authcard__forgot { text-align: center; margin: var(--s-3) 0 0; }
.cn-authcard .cn-authcard__forgot + .cn-authcard__forgot a {
  display: block; padding: var(--s-3); min-height: var(--touch-min);
  border: 1px solid var(--c-line); border-radius: var(--r-btn); background: var(--c-primary-tint);
  color: var(--c-primary); font-weight: var(--fw-semi); text-decoration: none;
}
@media (max-width: 640px) {
  .cn-authpage { background: var(--c-surface); }
  .cn-authcard > .cn-card { box-shadow: none; border-radius: 0; }
}

/* =====================================================================
   হটফিক্স ৫১ — স্কুল-স্টাফের ফর্ম-পাতা: <form>-এর ভেতরের কার্ড (.cn-ui2)
   বহু ফর্ম-পাতায় কার্ডগুলো সরাসরি পাতার নয়, <form>-এর সন্তান — তাই ৪৭-এর নিয়ম তাদের ছুঁতো না।
   এখন সেগুলোও একই ধাঁচে (শিক্ষার্থী, স্টাফ, নোটিশ, ফি, ফল, একাডেমিক ফর্ম)। রঙ সবই থিম-টোকেন।
   ===================================================================== */
.cn-ui2 .cn-page > form > .cn-card { border-radius: var(--r-card); box-shadow: var(--sh-2); }
.cn-ui2 .cn-page > form > .cn-card > .cn-card__head {
  background: var(--c-primary-tint); color: var(--c-primary);
  border-bottom: 0; border-inline-start: 5px solid var(--c-primary);
  font-weight: var(--fw-bold);
}
.cn-ui2 .cn-page > form > .cn-card .cn-table th {
  background: var(--c-primary-tint); color: var(--c-primary); font-weight: var(--fw-bold);
  border-bottom: 2px solid var(--c-primary-soft);
}
.cn-ui2 .cn-page > form > .cn-card .cn-check {
  padding: var(--s-2) var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-btn); margin-bottom: var(--s-2);
}
.cn-ui2 .cn-page > form > .cn-card .cn-check:hover { background: var(--c-primary-tint); }
.cn-ui2 .cn-page > form > .cn-card .cn-input:focus,
.cn-ui2 .cn-page > form > .cn-card .cn-select:focus,
.cn-ui2 .cn-page > form > .cn-card .cn-textarea:focus { box-shadow: 0 0 0 3px var(--c-primary-tint); }
.cn-ui2 .cn-page > form > .cn-card + .cn-btnrow { margin-top: var(--s-4); }
@media (max-width: 640px) {
  .cn-ui2 .cn-page > form > .cn-btnrow > .cn-btn:not(.cn-btn--sm) { flex: 1 1 140px; }
}

/* =====================================================================
   হটফিক্স ৫২ — অভিভাবকের বিল, রসিদ, খালি-অবস্থা, "ফল আটকে আছে" (.cn-gdoc)
   আগে প্রান্ত-থেকে-প্রান্তের সাদামাটা সারি ছিল; এখন অভিভাবকের বাকি পাতার (.cn-gcard) মতো কার্ড।
   নিয়ম শুধু screen-এ — বিল/রসিদ ছাপার (প্রিন্ট) চেহারা অপরিবর্তিত। রঙ সবই থিম-টোকেন।
   ===================================================================== */
@media screen {
  .cn-gdoc > .cn-pagehead {
    flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: var(--s-1);
    padding: var(--s-4); margin: 0;
    background: linear-gradient(135deg, var(--c-primary-tint), var(--c-surface));
    border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-2);
  }
  .cn-gdoc > .cn-pagehead h1 { color: var(--c-primary); font-size: var(--t-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); overflow-wrap: anywhere; }
  .cn-gdoc > .cn-pagehead .cn-pagehead__sub { color: var(--c-text-soft); font-weight: var(--fw-semi); }
  .cn-gdoc > .cn-card {
    border-radius: var(--r-card); box-shadow: var(--sh-2); border-inline-start: 5px solid var(--c-primary);
  }
  .cn-gdoc > .cn-card > .cn-card__head {
    background: var(--c-primary-tint); color: var(--c-primary); border-bottom: 0; font-weight: var(--fw-bold);
  }
  .cn-gdoc > .cn-alert { box-shadow: var(--sh-1); margin-bottom: 0; }
  .cn-gdoc > .cn-btnrow .cn-btn { flex: 1 1 140px; }
}

/* =====================================================================
   হটফিক্স ৫৫ — ডেমো-পট্টি: এক লাইনের ফিতা (.cn-demobar)
   ডেমো আসল অ্যাকাউন্টের প্রতিচ্ছবি — তাই পট্টি যত কম জায়গা নেয় ততই ভালো। "এটি ডেমো · আবেদন করুন →"।
   রঙ সবই থিম-টোকেন; ছাপায় লুকানো (cn-noprint)।
   ===================================================================== */
.cn-demobar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: var(--s-2);
  padding: var(--s-2) var(--s-3); margin-bottom: var(--s-3);
  background: var(--c-warn-tint); color: var(--c-warn);
  border-inline-start: 4px solid var(--c-warn); border-radius: var(--r-btn);
  font-size: var(--t-sm); line-height: var(--lh-tight); text-align: center;
}
.cn-demobar strong { font-weight: var(--fw-bold); white-space: nowrap; }
.cn-demobar a { color: inherit; font-weight: var(--fw-semi); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 400px) {
  .cn-demobar { font-size: var(--t-xs); padding-inline: var(--s-2); }
}

/* =====================================================================
   হটফিক্স ৫৬ — বিল ও রসিদের আধুনিক নকশা (.cn-doc)
   একই কাঠামো: স্কুলের লোগো-নাম-যোগাযোগ → নীল ফিতা (শিরোনাম + নম্বর/তারিখ) → শিক্ষার্থীর কার্ড (অবস্থা-ব্যাজসহ)
   → খাত-টেবিল → বাক্স (গৃহীত/পাওনা/আদায়/বকেয়া) → নোট → স্বাক্ষর → নিচের ফিতা।
   কাগজের রঙ সবই --doc-* টোকেন (কোনো থিমে বদলায় না); মাপ px/em-এ স্থির — ব্যবহারকারীর লেখার-আকার পছন্দে
   ছাপা কাগজ নড়ে না। মাপ: data-size = a4 | a5 | 80 | 58 (থার্মাল: সাদামাটা, রঙিন ফিতা নেই)।
   ===================================================================== */
.cn-doc {
  --d-pad: 20px;
  position: relative; overflow: hidden; width: 100%; margin-inline: auto;
  background: var(--doc-paper); color: var(--doc-text);
  border: 1px solid var(--doc-line); border-radius: var(--r-card); box-shadow: var(--sh-2);
  font-size: 13.5px; line-height: 1.55;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cn-doc[data-size="a5"] { max-width: 560px; }
.cn-doc[data-size="a4"] { max-width: 780px; font-size: 14.5px; --d-pad: 28px; }
.cn-doc[data-size="80"] { max-width: 320px; font-size: 12px; --d-pad: 12px; }
.cn-doc[data-size="58"] { max-width: 232px; font-size: 10.5px; --d-pad: 8px; }

.cn-doc__head { padding: var(--d-pad) var(--d-pad) 14px; }
.cn-doc__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cn-doc__logo { flex: none; width: 52px; height: 52px; object-fit: contain; }
.cn-doc[data-size="a4"] .cn-doc__logo { width: 64px; height: 64px; }
.cn-doc__who { min-width: 0; }
.cn-doc__school { font-size: 1.45em; font-weight: var(--fw-bold); color: var(--doc-navy); line-height: 1.25; overflow-wrap: anywhere; }
.cn-doc__addr { font-size: .88em; color: var(--doc-muted); overflow-wrap: anywhere; }

.cn-doc__band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin: 0 var(--d-pad); padding: 12px 16px; border-radius: var(--r-btn); color: var(--doc-paper);
  background: linear-gradient(105deg, var(--doc-navy-dark), var(--doc-navy) 55%, var(--doc-navy-soft));
}
.cn-doc__band-title { display: flex; flex-direction: column; line-height: 1.25; }
.cn-doc__band-main { font-size: 1.5em; font-weight: var(--fw-bold); }
.cn-doc__band-alt { font-size: .9em; opacity: .92; }
.cn-doc__band-meta { display: grid; gap: 2px; margin: 0; font-size: .92em; }
.cn-doc__band-meta > div { display: flex; justify-content: space-between; gap: 12px; }
.cn-doc__band-meta dt { opacity: .85; }
.cn-doc__band-meta dd { margin: 0; font-weight: var(--fw-semi); overflow-wrap: anywhere; text-align: end; }

.cn-doc__sec { margin: 16px var(--d-pad) 0; }
.cn-doc__sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cn-doc__sec-title { margin: 0 0 8px; font-size: 1.08em; font-weight: var(--fw-bold); color: var(--doc-navy); }
.cn-doc__sec-head .cn-doc__sec-title { margin: 0; }

.cn-doc__pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border: 1px solid currentColor;
  border-radius: var(--r-pill); font-size: .95em; font-weight: var(--fw-bold); line-height: 1.4; white-space: nowrap;
}
.cn-doc__pill::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.cn-doc__pill--ok     { background: var(--doc-green-tint); color: var(--doc-green); }
.cn-doc__pill--warn   { background: var(--doc-amber-tint); color: var(--doc-amber); }
.cn-doc__pill--danger { background: var(--doc-red-tint);   color: var(--doc-red); }
.cn-doc__pill--info   { background: var(--doc-tint);       color: var(--doc-navy); }

.cn-doc__kv {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin: 0; padding: 10px 14px;
  border: 1px solid var(--doc-line); border-radius: var(--r-card);
}
.cn-doc__kv > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cn-doc__kv dt { flex: none; min-width: 4.2em; color: var(--doc-muted); }
.cn-doc__kv dd { margin: 0; font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.cn-doc__kv--one { grid-template-columns: minmax(0, 1fr); }

.cn-doc__table {
  width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden;
  border: 1px solid var(--doc-line); border-radius: var(--r-card);
}
.cn-doc__table th, .cn-doc__table td { padding: 8px 12px; text-align: start; vertical-align: top; }
.cn-doc__table thead th { background: var(--doc-tint); color: var(--doc-navy); font-weight: var(--fw-bold); border-bottom: 1px solid var(--doc-line); }
.cn-doc__table tbody td { border-bottom: 1px solid var(--doc-line); }
.cn-doc__table tbody tr:last-child td { border-bottom: 0; }
.cn-doc__table tfoot th, .cn-doc__table tfoot td { background: var(--doc-tint); border-top: 1px solid var(--doc-line); font-weight: var(--fw-bold); }
.cn-doc__table tfoot .cn-doc__num { color: var(--doc-navy); font-size: 1.1em; }
.cn-doc__table .cn-doc__num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); }
.cn-doc__table thead .cn-doc__num { font-weight: var(--fw-bold); }
.cn-doc__item { font-weight: var(--fw-semi); }
.cn-doc__meta { display: block; font-size: .85em; color: var(--doc-muted); overflow-wrap: anywhere; }
.cn-doc__tag {
  display: inline-block; margin-inline-start: 6px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--doc-amber-tint); color: var(--doc-amber); font-size: .8em; font-weight: var(--fw-semi); white-space: nowrap;
}

.cn-doc__sum { display: grid; gap: 12px; }
.cn-doc__boxes { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.cn-doc__boxes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cn-doc__boxes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cn-doc__box { padding: 10px 14px; border: 1px solid var(--doc-line); border-radius: var(--r-card); }
.cn-doc__box-label { font-size: .88em; color: var(--doc-soft); }
.cn-doc__box-val { font-size: 1.35em; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cn-doc__box--big .cn-doc__box-val { font-size: 2em; line-height: 1.25; }
.cn-doc__box--ok   { background: var(--doc-green-tint); border-color: var(--doc-green-line); color: var(--doc-green); }
.cn-doc__box--info { background: var(--doc-tint); color: var(--doc-navy); }
.cn-doc__box--due  { background: var(--doc-red-tint); border-color: var(--doc-red); color: var(--doc-red); }
.cn-doc__info .cn-doc__sec-title { margin-bottom: 6px; }
/* হটফিক্স ৮৬: মোট অঙ্ক কথায় */
/* হটফিক্স ৮৭: স্টাফের পর্দায় হিসাব-না-মেলার সতর্কতা — কাগজে ছাপা হয় না */
.cn-doc__alert { margin: 12px var(--d-pad) 0; padding: 8px 12px; border-radius: var(--r-btn); border: 1px solid var(--doc-amber); background: var(--doc-amber-tint); color: var(--doc-amber); font-weight: var(--fw-semi); line-height: 1.5; }
@media print { .cn-doc__alert { display: none !important; } }
.cn-doc__words { margin: 8px 0 0; padding: 0 2px; font-weight: var(--fw-semi); font-size: 1em; line-height: 1.5; color: var(--doc-text); overflow-wrap: anywhere; }
.cn-doc[data-size="80"] .cn-doc__words, .cn-doc[data-size="58"] .cn-doc__words { margin-top: 6px; font-size: .92em; }

.cn-doc__note {
  margin: 12px var(--d-pad) 0; padding: 8px 12px; border-inline-start: 3px solid var(--doc-navy-soft);
  border-radius: var(--r-btn); background: var(--doc-tint); color: var(--doc-soft); font-size: .9em;
}
.cn-doc__sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 36px var(--d-pad) 0; }
.cn-doc__sign-who { font-weight: var(--fw-semi); }
.cn-doc__sign-line { min-width: 40%; padding-top: 6px; border-top: 1px solid var(--doc-soft); text-align: center; color: var(--doc-soft); font-size: .88em; }
.cn-doc__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 20px; padding: 10px var(--d-pad);
  background: linear-gradient(105deg, var(--doc-navy-dark), var(--doc-navy)); color: var(--doc-paper); font-size: .85em;
}
.cn-doc__foot-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); }
.cn-doc__foot-brand img { display: block; }
.cn-doc__void {
  position: absolute; top: 38%; left: 0; right: 0; z-index: 2; text-align: center; transform: rotate(-22deg);
  font-size: 5.5em; font-weight: 800; letter-spacing: .2em; color: var(--doc-red); opacity: .18;
  pointer-events: none; user-select: none;
}

/* ফোনের মতো সরু পর্দায় */
@media (max-width: 479px) {
  .cn-doc { --d-pad: 14px; }
  .cn-doc__kv { grid-template-columns: minmax(0, 1fr); }
  .cn-doc__boxes--3 { grid-template-columns: minmax(0, 1fr); }
  .cn-doc__band { padding: 10px 12px; }
  .cn-doc__band-meta { width: 100%; }
  .cn-doc__sign { margin-top: 28px; }
}

/* থার্মাল (৮০/৫৮ মিমি): সাদামাটা, রঙিন ফিতা নেই — রোল-প্রিন্টারে কালি বাঁচে, লেখা পরিষ্কার */
.cn-doc[data-size="80"], .cn-doc[data-size="58"] { border-radius: 0; }
.cn-doc[data-size="80"] .cn-doc__head, .cn-doc[data-size="58"] .cn-doc__head { padding-bottom: 8px; }
.cn-doc[data-size="80"] .cn-doc__brand, .cn-doc[data-size="58"] .cn-doc__brand { flex-direction: column; gap: 4px; text-align: center; }
.cn-doc[data-size="80"] .cn-doc__logo, .cn-doc[data-size="58"] .cn-doc__logo { width: 36px; height: 36px; }
.cn-doc[data-size="80"] .cn-doc__school, .cn-doc[data-size="58"] .cn-doc__school { font-size: 1.15em; }
.cn-doc[data-size="80"] .cn-doc__band, .cn-doc[data-size="58"] .cn-doc__band {
  flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 0; border-radius: 0; background: none; color: var(--doc-text);
  border-block: 1px dashed var(--doc-muted); text-align: center;
}
.cn-doc[data-size="80"] .cn-doc__band-main, .cn-doc[data-size="58"] .cn-doc__band-main { font-size: 1.2em; }
.cn-doc[data-size="80"] .cn-doc__band-meta, .cn-doc[data-size="58"] .cn-doc__band-meta { width: 100%; text-align: start; }
.cn-doc[data-size="80"] .cn-doc__sec, .cn-doc[data-size="58"] .cn-doc__sec { margin-top: 10px; }
.cn-doc[data-size="80"] .cn-doc__kv, .cn-doc[data-size="58"] .cn-doc__kv { grid-template-columns: minmax(0, 1fr); padding: 0; border: 0; gap: 2px; }
.cn-doc[data-size="80"] .cn-doc__kv dt, .cn-doc[data-size="58"] .cn-doc__kv dt { min-width: 0; }
.cn-doc[data-size="80"] .cn-doc__kv > div, .cn-doc[data-size="58"] .cn-doc__kv > div { justify-content: space-between; }
.cn-doc[data-size="80"] .cn-doc__table, .cn-doc[data-size="58"] .cn-doc__table { border: 0; border-radius: 0; }
.cn-doc[data-size="80"] .cn-doc__table th, .cn-doc[data-size="80"] .cn-doc__table td,
.cn-doc[data-size="58"] .cn-doc__table th, .cn-doc[data-size="58"] .cn-doc__table td { padding: 4px 2px; }
.cn-doc[data-size="80"] .cn-doc__table thead th, .cn-doc[data-size="58"] .cn-doc__table thead th,
.cn-doc[data-size="80"] .cn-doc__table tfoot th, .cn-doc[data-size="80"] .cn-doc__table tfoot td,
.cn-doc[data-size="58"] .cn-doc__table tfoot th, .cn-doc[data-size="58"] .cn-doc__table tfoot td { background: none; color: var(--doc-text); }
.cn-doc[data-size="80"] .cn-doc__table thead th, .cn-doc[data-size="58"] .cn-doc__table thead th { border-bottom: 1px solid var(--doc-text); }
.cn-doc[data-size="80"] .cn-doc__boxes--3, .cn-doc[data-size="58"] .cn-doc__boxes--3,
.cn-doc[data-size="80"] .cn-doc__boxes--2, .cn-doc[data-size="58"] .cn-doc__boxes--2 { grid-template-columns: minmax(0, 1fr); }
.cn-doc[data-size="80"] .cn-doc__box, .cn-doc[data-size="58"] .cn-doc__box { padding: 4px 8px; background: none; color: var(--doc-text); border: 1px solid var(--doc-text); }
.cn-doc[data-size="80"] .cn-doc__box-val, .cn-doc[data-size="58"] .cn-doc__box-val { font-size: 1.25em; }
.cn-doc[data-size="80"] .cn-doc__box--big .cn-doc__box-val, .cn-doc[data-size="58"] .cn-doc__box--big .cn-doc__box-val { font-size: 1.7em; }
.cn-doc[data-size="80"] .cn-doc__pill, .cn-doc[data-size="58"] .cn-doc__pill { padding: 0 8px; background: none; color: var(--doc-text); }
.cn-doc[data-size="80"] .cn-doc__note, .cn-doc[data-size="58"] .cn-doc__note { margin: 8px var(--d-pad) 0; padding: 0; border: 0; background: none; text-align: center; }
.cn-doc[data-size="80"] .cn-doc__sign, .cn-doc[data-size="58"] .cn-doc__sign { flex-direction: column; align-items: stretch; margin-top: 22px; gap: 6px; }
.cn-doc[data-size="80"] .cn-doc__sign-line, .cn-doc[data-size="58"] .cn-doc__sign-line { min-width: 0; }
.cn-doc[data-size="80"] .cn-doc__foot, .cn-doc[data-size="58"] .cn-doc__foot {
  justify-content: center; margin-top: 12px; padding: 6px var(--d-pad); background: none; color: var(--doc-muted); border-top: 1px dashed var(--doc-muted);
}
.cn-doc[data-size="80"] .cn-doc__foot-brand img, .cn-doc[data-size="58"] .cn-doc__foot-brand img { display: none; }

/* ছাপা: কাগজের মাপ অনুযায়ী, এক পাতা (মেনু/বোতাম base.css-এ লুকানো) */
@media print {
  html:has(.cn-doc), body:has(.cn-doc), body:has(.cn-doc) .cn-shell, body:has(.cn-doc) .cn-main { height: auto !important; min-height: 0 !important; }
  body:has(.cn-doc) { margin: 0; }
  body:has(.cn-doc) .cn-page { padding: 0 !important; margin: 0 !important; }
  .cn-doc { max-width: none; margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; break-inside: avoid; page-break-inside: avoid; page-break-after: avoid; }
  .cn-doc[data-size="a5"] { font-size: 11pt; --d-pad: 16px; }
  .cn-doc[data-size="a4"] { font-size: 12pt; --d-pad: 24px; }
  .cn-doc[data-size="80"] { width: 74mm; font-size: 11px; }
  .cn-doc[data-size="58"] { width: 54mm; font-size: 10px; }
  .cn-doc__sign { margin-top: 26px; }
  .cn-doc__void { font-size: 4em; }
  .cn-doc__table tr { break-inside: avoid; }
}


/* =====================================================================
   হটফিক্স ৫৭ — হোম/ড্যাশবোর্ড: দ্রুত-অ্যাকশন টাইল ও সামারি কার্ড (শুধু CSS)
   টাইল: বড় আইকন-বাক্স ও লেবেল, কম ফাঁক। কার্ড: আইকন-মাপ, প্যাডিং ও ভেতরের ফাঁক টাইলের সাথে মেলানো —
   লেখা/সংখ্যার মাপ আগের মতোই। ফাঁক দুই গ্রিডে সমান (6px) যাতে একই ছন্দ।
   ⚠ রঙ কোথাও নেই; সব মান থিম-টোকেন বা ফন্ট-স্কেল (--fs)-অনুসারী; পাশে স্ক্রল নেই (৩২০px পর্যন্ত যাচাই)।
   ===================================================================== */
.cn-qgrid { gap: 6px; }
.cn-stats { gap: 6px; }

.cn-qg { gap: 6px; padding: 6px 2px; }
.cn-qg__ico { width: 42px; height: 42px; }
.cn-qg__ico .cn-ico { width: 26px; height: 26px; }
.cn-qg__label { font-size: calc(13px * var(--fs)); font-weight: var(--fw-semi); line-height: 1.2; }

.cn-stat2 { gap: 10px; min-height: 80px; padding: 10px; }
.cn-stat2__ico { width: 36px; height: 36px; }
.cn-stat2__ico .cn-ico { width: 22px; height: 22px; }

@media (min-width: 360px) {
  .cn-qg__ico { width: 48px; height: 48px; }
  .cn-qg__ico .cn-ico { width: 30px; height: 30px; }
  .cn-stat2 { padding: 10px 12px; }
  .cn-stat2__ico { width: 40px; height: 40px; }
  .cn-stat2__ico .cn-ico { width: 24px; height: 24px; }
}

@media (min-width: 900px) {
  .cn-qgrid, .cn-stats { gap: var(--s-2); }
  .cn-qg { min-height: 100px; gap: var(--s-2); }
  .cn-qg__ico { width: 52px; height: 52px; }
  .cn-qg__ico .cn-ico { width: 32px; height: 32px; }
  .cn-qg__label { font-size: var(--t-sm); }
  .cn-stat2 { gap: var(--s-3); min-height: 92px; padding: var(--s-3) var(--s-4); }
  .cn-stat2__ico { width: 46px; height: 46px; }
  .cn-stat2__ico .cn-ico { width: 28px; height: 28px; }
}

/* অতি বড় লেখা: আগের সংকোচন বহাল, শুধু আইকন একটু ভরাট */
[data-textsize="xl"] .cn-qg { padding: 4px 2px; }
[data-textsize="xl"] .cn-qg__ico { width: 38px; height: 38px; }
[data-textsize="xl"] .cn-qg__ico .cn-ico { width: 24px; height: 24px; }
[data-textsize="xl"] .cn-qg__label { font-size: var(--t-xs); }

/* =====================================================================
   হটফিক্স ৫৮ — দ্রুত-অ্যাকশন গ্রিড ফ্লুইড: আইকন-সংখ্যা যা-ই হোক, প্রতিটি সারি ভরাট (শুধু CSS)
   ভূমিকা-অনুযায়ী অনুমতিতে ১–৮টি আইকন আসতে পারে। ফ্লেক্স-র‍্যাপ + flex-grow: শেষ সারির কম আইকন বাড়তি জায়গা নিয়ে
   প্রস্থ বাড়ায় (৫টি = ৩+২, ৬টি = ৩+৩, ৭টি = ৪+৩, ৪/৮টি = ৪ প্রতি সারি)। ডেস্কটপে সবই এক সারিতে।
   সংখ্যা ধরা হয় :first-child:nth-last-child(N) দিয়ে (JS বা ভিউ-বদল ছাড়া)। --qk = প্রতি সারির সর্বোচ্চ টাইল।
   টাইল আর বর্গাকার নয় (প্রস্থ বাড়লে আকাশছোঁয়া হতো) — সারির উচ্চতা সমান, ভেতরের সবকিছু মাঝে।
   ⚠ রঙ নেই; ৩২০px পর্যন্ত পাশে স্ক্রল নেই।
   ===================================================================== */
.cn-qgrid { display: flex; flex-wrap: wrap; justify-content: center; --qgap: 6px; gap: var(--qgap); }
.cn-qg {
  --qk: 4;
  flex: 1 1 calc((100% - (var(--qk) - 1) * var(--qgap)) / var(--qk) - 1px);
  min-width: 0;
  box-sizing: border-box;
}
@media (max-width: 899px) { .cn-qg { aspect-ratio: auto; min-height: 88px; } }

/* ফোন/ট্যাবলেট: প্রতি সারিতে কয়টি (সংখ্যা → --qk) */
.cn-qg:first-child:nth-last-child(1), .cn-qg:first-child:nth-last-child(1) ~ .cn-qg { --qk: 1; }
.cn-qg:first-child:nth-last-child(2), .cn-qg:first-child:nth-last-child(2) ~ .cn-qg { --qk: 2; }
.cn-qg:first-child:nth-last-child(3), .cn-qg:first-child:nth-last-child(3) ~ .cn-qg { --qk: 3; }
.cn-qg:first-child:nth-last-child(5), .cn-qg:first-child:nth-last-child(5) ~ .cn-qg { --qk: 3; }
.cn-qg:first-child:nth-last-child(6), .cn-qg:first-child:nth-last-child(6) ~ .cn-qg { --qk: 3; }

/* সরু ফোনে ৪-প্রতি-সারির ইংরেজি লেবেল ("Attendance") এক শব্দ ভাঙে না — একটু ছোট */
.cn-qg__label { font-size: calc(var(--qfs, 13px) * var(--fs)); overflow-wrap: break-word; }
@media (max-width: 379px) {
  html[lang="en"] .cn-qg:first-child:nth-last-child(4), html[lang="en"] .cn-qg:first-child:nth-last-child(4) ~ .cn-qg,
  html[lang="en"] .cn-qg:first-child:nth-last-child(7), html[lang="en"] .cn-qg:first-child:nth-last-child(7) ~ .cn-qg,
  html[lang="en"] .cn-qg:first-child:nth-last-child(8), html[lang="en"] .cn-qg:first-child:nth-last-child(8) ~ .cn-qg { --qfs: 11.5px; }
}

/* ডেস্কটপ: সব আইকন এক সারিতে, পুরো প্রস্থ ভাগ করে */
@media (min-width: 900px) {
  .cn-qgrid { --qgap: 8px; }
  .cn-qg { flex-basis: 0; }
  .cn-qg:first-child:nth-last-child(1), .cn-qg:first-child:nth-last-child(1) ~ .cn-qg,
  .cn-qg:first-child:nth-last-child(2), .cn-qg:first-child:nth-last-child(2) ~ .cn-qg { max-width: 280px; }
}

/* সামারি কার্ড: একা পড়ে থাকা শেষটি পুরো সারি নেয় (৩টি হলে ২+১; ১টি হলে পুরো) */
.cn-stats > .cn-stat2:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .cn-stats > .cn-stat2:last-child:nth-child(odd) { grid-column: auto; }
  .cn-stats > .cn-stat2:only-child:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cn-stats:has(> .cn-stat2:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cn-stats:has(> .cn-stat2:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =====================================================================
   হটফিক্স ৬১ — সামারি কার্ড: প্রসারিত কার্ডের ভেতরের সাজ মাঝে (শুধু CSS)
   হটফিক্স ৫৮ কার্ডকে পুরো সারিতে ছড়ায়; ছড়ানো কার্ডে আইকন+লেখার দল এখন মাঝে বসে — ডানে ফাঁকা পড়ে থাকে না,
   কুইক-অ্যাকশন টাইলের (মাঝ-সাজ) সাথে মেলে। লেখা/সংখ্যার মাপ ও বিন্যাস অপরিবর্তিত। রঙ নেই।
   ===================================================================== */
@media (max-width: 899px) {
  .cn-stats > .cn-stat2:last-child:nth-child(odd) { justify-content: center; }
  .cn-stats > .cn-stat2:last-child:nth-child(odd) .cn-stat2__body { flex: 0 1 auto; }
}
@media (min-width: 900px) {
  .cn-stats > .cn-stat2:first-child:nth-last-child(-n+3),
  .cn-stats > .cn-stat2:first-child:nth-last-child(-n+3) ~ .cn-stat2 { justify-content: center; }
  .cn-stats > .cn-stat2:first-child:nth-last-child(-n+3) .cn-stat2__body,
  .cn-stats > .cn-stat2:first-child:nth-last-child(-n+3) ~ .cn-stat2 .cn-stat2__body { flex: 0 1 auto; }
}


/* =====================================================================
   হটফিক্স ৬২ — ডাইনামিক ফন্ট: (ক) চেহারা পাতায় ফন্ট-বাছাই  (খ) সংখ্যা সোজা ও পরিষ্কার
   কেবল থিম-টোকেন; ফন্ট-পরিবার আসে tokens.css-এর --font-bn / --fam-bn / --fam-en থেকে।
   ===================================================================== */
.cn-fontpick { display: grid; gap: var(--s-4); margin-top: var(--s-3); }
.cn-fontpick__row { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.cn-fontpick__row .cn-select { width: 100%; }
.cn-fontprev {
  margin: 0; padding: var(--s-3);
  background: var(--c-surface-alt); color: var(--c-text);
  border: 1px solid var(--c-line); border-radius: var(--r-card);
  line-height: 1.6; overflow-wrap: anywhere;
}
.cn-fontprev__big { display: block; font-size: var(--t-lg); font-weight: var(--fw-bold); }
.cn-fontprev__num { display: block; margin-top: var(--s-1); font-size: var(--t-md); letter-spacing: .04em; }
/* নমুনা ঘর সবসময় নিজের তালিকার বাছা ফন্টে (সিস্টেমের ভাষা যা-ই হোক) */
.cn-fontprev--bn { font-family: var(--fam-bn), 'Hind Siliguri', 'Noto Sans Bengali', 'Nirmala UI', 'Vrinda', system-ui, sans-serif; }
.cn-fontprev--en { font-family: var(--fam-en), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* সংখ্যা: সব লেখায় একই উচ্চতার (lining) অঙ্ক; টেবিল/ড্যাশবোর্ড/টাকার ঘরে সমান চওড়া (tabular) —
   ফলে ০–৯ ও 0–9 একই সোজা লাইনে বসে, কলামে সংখ্যা ঠিক নিচে নিচে মেলে */
body { font-variant-numeric: lining-nums; }
.cn-table th, .cn-table td, table td, table th,
.cn-money, .cn-stat2__val, .cn-stat2__note, .cn-acct__val, .cn-prog__num, .cn-rrow__cnt,
.cn-savebar__sum, .cn-done__num b, .cn-ucard__id, .cn-schoolcard__code,
.cn-doc td, .cn-doc th {
  font-variant-numeric: lining-nums tabular-nums;
}


/* =====================================================================
   হটফিক্স ৬৬ — সেটিংস পাতা: খোঁজা · ১০টি ভাঁজ-করা বিভাগ (হটফিক্স ৬৮-তে "ঘন ঘন ব্যবহৃত" বাদ, এক কলাম)
   কেবল থিম-টোকেন (কাঁচা রং নেই), ৮px কোণ (--r-card), কোনো inline style নয়।
   সব স্ক্রিনে এক কলাম।
   ===================================================================== */
.cn-msecs > .cn-msec[hidden], .cn-msec__body .cn-msub[hidden], .cn-msec__body .cn-listrow[hidden] { display: none; }

/* খোঁজার বাক্স */
.cn-msearch { margin-top: var(--s-4); }
.cn-msearch .cn-input { width: 100%; }
.cn-msearch__none { margin: var(--s-2) 0 0; color: var(--c-muted); font-size: var(--t-sm); }

/* বিভাগের তালিকা: মোবাইল ও ডেস্কটপ — দুই জায়গাতেই এক কলাম, একটির নিচে একটি */
.cn-msecs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-4); align-items: start; }
.cn-msecs > .cn-card, .cn-msecs > .cn-card + .cn-card { margin-top: 0; }

/* ভাঁজ-করা বিভাগ */
.cn-msec { padding: 0; }
.cn-msec__sum {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--touch-min); padding: var(--s-3) var(--s-4);
  cursor: pointer; list-style: none;
  background: var(--c-primary-tint); border-inline-start: 5px solid var(--c-primary);
}
.cn-msec__sum::-webkit-details-marker { display: none; }
.cn-msec__sum::marker { content: ''; }
.cn-msec__sum:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.cn-msec__ico { flex: none; display: inline-flex; color: var(--c-primary); }
.cn-msec__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cn-msec__t { font-weight: var(--fw-bold); color: var(--c-primary); line-height: 1.3; overflow-wrap: anywhere; }
.cn-msec__s { font-size: var(--t-xs); color: var(--c-muted); line-height: 1.4; overflow-wrap: anywhere; }
.cn-msec__n {
  flex: none; min-width: 26px; padding: 2px var(--s-2); text-align: center;
  font-size: var(--t-xs); font-weight: var(--fw-semi); font-variant-numeric: lining-nums tabular-nums;
  background: var(--c-surface); color: var(--c-primary); border: 1px solid var(--c-line); border-radius: var(--r-card);
}
.cn-msec__chev { flex: none; display: inline-flex; color: var(--c-muted); transition: transform .15s ease; }
.cn-msec[open] > .cn-msec__sum .cn-msec__chev { transform: rotate(90deg); }
.cn-msec__body { padding: var(--s-1) var(--s-4) var(--s-2); }
.cn-msec__body .cn-listrow { padding-left: 0; padding-right: 0; text-decoration: none; color: inherit; }

/* উপ-গ্রুপ (ফি-র তিন ভাগ, রিপোর্টের পাঁচ ভাগ) */
.cn-msub + .cn-msub { margin-top: var(--s-2); }
.cn-msub__t {
  display: flex; align-items: center; gap: var(--s-1);
  margin: var(--s-3) 0 var(--s-1); font-size: var(--t-sm); font-weight: var(--fw-bold); color: var(--c-text-soft);
}
.cn-msub__t .cn-ico { flex: none; }

/* ঝুঁকিপূর্ণ কাজ */
.cn-msub--danger {
  margin-top: var(--s-3); padding: 0 var(--s-3) var(--s-1);
  background: var(--c-danger-tint); border: 1px solid var(--c-danger); border-radius: var(--r-card);
}
.cn-msub--danger .cn-msub__t { color: var(--c-danger); }
.cn-msub--danger .cn-listrow__title { color: var(--c-danger); }
.cn-msub__note { margin: 0 0 var(--s-1); font-size: var(--t-xs); color: var(--c-text-soft); line-height: 1.5; }
.cn-msub--danger .cn-listrow { padding-left: 0; padding-right: 0; border-bottom: 0; }
.cn-msub--danger .cn-listrow:hover { background: transparent; }

/* শেষ কার্ড: অ্যাপ ইনস্টল + লগআউট */
.cn-mfoot { margin-top: var(--s-4); }
.cn-mfoot__form { margin-top: var(--s-3); }