/* ------------------------------------------------------------------
   BPDB EHT Consumer Service Portal

   Lifted from BPDB_EHT_Consumer_Portal.html, class names intact.
   EH-81 and ground rule 1: the prototype is binding for layout and
   wording, so this file is a port and not a rewrite. Change it only
   when the prototype changes.

   The prototype carried two <style> blocks and both are here in the
   original order - the second deliberately re-declares :root and wins,
   which is how the prototype renders. Splitting or merging them would
   change the cascade.
   ------------------------------------------------------------------ */

/* EH-18. No CDN: the BPDB network blocks external font hosts, so the
   family is served from this application or not at all. Drop the
   woff2 into public/fonts/ and this picks it up; without it the stack
   below falls through to the machine's own Bengali face (Nirmala UI on
   Windows, Kohinoor on macOS, Noto Sans Bengali on Linux) and the page
   is still correct - which is why there is no @import here to a font
   host that would silently fail on the BPDB network. */
@font-face {
  font-family: 'Hind Siliguri';
  src: url('/fonts/hind-siliguri-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Hind Siliguri';
  src: url('/fonts/hind-siliguri-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Hind Siliguri';
  src: url('/fonts/hind-siliguri-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ===== prototype style block 1 - the printed bill sheet ===== */

/*  The printed BPDB bill is the reference: deep green rules, figures ranged
    right, everything on a grid. This reads as a statement of account rather
    than a dashboard, because that is what the accounts departments using it
    are reconciling against.  */
/*  প্যালেট আসল ছাপা বিল থেকে: শিরোনাম গাঢ় সবুজ, ছকের পট্টি স্যামন,
    আর পুরো ফর্মের চারপাশে গোলাপি রেখা। রঙ দুটো একসাথে বাংলাদেশের
    সরকারি ফর্মের চেনা চেহারা — বানানো নয়, যে কাগজটা গ্রাহক হাতে
    পান সেটারই।  */
:root{
  --ink:#122c3d;
  --brand:#1f8fc0;        /* প্রোটোটাইপের নীল — বিলের শিরোনাম */
  --brand-deep:#0e5578;
  --brand-mid:#2a9bd4;
  --brand-soft:#e4f1f8;
  --coral:#E4726A;        /* ছকের পট্টির স্যামন */
  --coral-soft:#FBEAE8;
  --coral-line:#F0BDB8;
  --navy:#16233b;         /* বড় অঙ্কের জন্য — ব্র্যান্ড নীল থেকে আলাদা */
  --gold:#f2b705;         /* হিরোর প্রধান কাজ — গাঢ় নীলে সবচেয়ে স্পষ্ট */
  --gold-deep:#b8860b;
  --rule:#cbdce6;
  --rule-soft:#e3edf3;
  --paper:#FFFFFF;
  --surround:#eff4f7;
  --muted:#54657a;
  --due:#c0392b;
  --credit:#0c7a45;
  --amber:#b8860b;
  /*  বাংলা: Hind Siliguri, না পেলে যন্ত্রের নিজের বাংলা ফন্ট —
      উইন্ডোজে Nirmala UI, ম্যাকে Kohinoor, লিনাক্সে Noto Sans Bengali।  */
  --bn:'Hind Siliguri','Nirmala UI','Noto Sans Bengali','Kohinoor Bangla',
       'Bangla MN','SolaimanLipi','Kalpurush',system-ui,sans-serif;
  /*  অঙ্কের নিজস্ব তালিকা, বাংলার আগে ল্যাটিন ফন্ট। বাংলা ফন্টগুলো
      ল্যাটিন অঙ্কে দুর্বল — ৳ ও বড় সংখ্যা এলোমেলো দেখায়। এই তিনটির
      অঙ্ক সমান চওড়া, তাই কলামে সারিবদ্ধ থাকে। বাংলা অঙ্ক এলে
      পেছনের বাংলা ফন্টই ধরে।  */
  --nu:'Segoe UI','Helvetica Neue',Arial,'Nirmala UI',
       'Noto Sans Bengali',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--surround);color:var(--ink);
  font:15px/1.62 var(--bn);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
/*  অঙ্কের ফন্ট কেবল অঙ্কেই। আগে .spec-r .vv ও th.r-ও এই তালিকায়
    ছিল, কিন্তু ওখানে পুরো বাংলা বাক্য বসে — ফলে বাংলা লেখা ল্যাটিন
    ফন্টে গিয়ে বেঢপ দেখাত। সিলেক্টর সংকীর্ণ রাখলে সেটা হয় না।  */
.num,.owed,.side .v,.lstats b,.nrow .dt b,td.r,
.line .num,.bar .val,.f input,td.num,td.c.num,
#v_ait,#v_lps,#v_pf,#v_updated{
  font-family:var(--nu);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;letter-spacing:.005em;
}
/*  ছকের শিরোনাম লেখা, অঙ্ক নয় — বাংলা ফন্টেই থাকুক  */
th.r{font-family:var(--bn)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
a{color:var(--brand)}
button{font:inherit;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- landing ---------- */
#signin{min-height:100vh;display:flex;flex-direction:column;background:var(--surround)}
/*  চওড়া পর্দায় ১১২০px দুই পাশে অনেকটা নষ্ট করত। ১৪৪০px-এ ছক ও
    টেবিল বেশি জায়গা পায় — আর ওগুলোই এই পোর্টালের কাজ, মিটারওয়ারি
    পাঠে দশটি কলাম।  */
.lw{max-width:1440px;margin:0 auto;padding:0 32px;width:100%}

.lnav{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.lnav .lw{display:flex;align-items:center;gap:13px;min-height:66px;padding-top:9px;padding-bottom:9px}
.lnav{border-top:3px solid var(--coral)}
/*  বিপিডিবির নিজস্ব লোগো — সঞ্চালন টাওয়ার, ধানের শিষ, বাংলায় নাম।
    অক্ষরের সিল বসানোর কোনো কারণ নেই যখন আসল প্রতীকটাই আছে।  */
.lnav .sig,.top .sig{
  width:46px;height:46px;flex:none;border-radius:50%;background:#fff;
  padding:2px;object-fit:contain;
  box-shadow:0 0 0 1px var(--rule),0 0 0 3px var(--coral-soft);
}
.lnav .nm b,.top .nm b{display:block;font-size:15px;line-height:1.3;color:var(--brand-deep)}
.lnav .nm span,.top .nm span{font-size:12.5px;color:var(--muted)}
/*  ভাষা বদল — গ্রাহকেরা বিতরণ কোম্পানির হিসাব শাখা; কেউ বাংলায়
    স্বচ্ছন্দ, কেউ ইংরেজিতে, আর বিলের কারিগরি শব্দ (net PDB, AIT,
    LPS) ইংরেজিতেই চলে। তাই দুটোই রাখা।  */
.langseg{
  display:inline-flex;background:#e3edf3;border:1px solid var(--rule);
  border-radius:999px;padding:3px;gap:2px;margin-left:14px;
  box-shadow:inset 0 2px 4px rgba(31,143,192,.14);
}
.langseg button{
  border:0;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;
  color:var(--muted);background:transparent;cursor:pointer;transition:.18s;
}
.langseg button:hover{color:var(--brand-deep)}
/*  চাপা অবস্থার ভেতরে বেছে নেওয়াটি উঠে আসে — কোনটি সক্রিয় তা
    রঙের আগে আকৃতিতেই বোঝা যায়  */
.langseg button.on{
  background:linear-gradient(180deg,#2a9bd4,var(--brand));color:#fff;
  box-shadow:0 2px 0 var(--brand-deep), 0 3px 6px rgba(31,143,192,.3),
             inset 0 1px 0 rgba(255,255,255,.22);
}
@media(max-width:640px){.langseg button{padding:5px 10px;font-size:12px}}

/* hero — সঞ্চালন লাইনের রাতের আকাশ, বিলের সবুজেই */
.lhero{
  position:relative;overflow:hidden;color:#fff;padding:52px 0 0;
  background:
    radial-gradient(820px 400px at 82% -12%, rgba(228,114,106,.28), transparent 64%),
    radial-gradient(680px 360px at 4% 104%, rgba(31,168,116,.30), transparent 68%),
    linear-gradient(158deg,#0E6B49 0%,#1f8fc0 34%,#08472E 68%,#053322 100%);
}
.lhero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,#000 0%,transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 72%);
}
/*  দুই কলাম: বাঁয়ে বক্তব্য ও বোতাম, ডানে বিলের নমুনা। এক কলামে
    রাখলে ডানদিকের উপরটা ফাঁকা পড়ে থাকত, আর নমুনাটা এত নিচে যেত যে
    স্ক্রল না করলে চোখেই পড়ত না।  */
.lhero .lw{
  position:relative;z-index:2;padding-bottom:8px;
  /*  gap:60px লিখলে সারির মাঝেও ৬০px বসে — প্রবাহ নিচের সারিতে
      বলে বোতাম আর প্রবাহের মাঝে বড় ফাঁক পড়ত। কলামের ফাঁকই যথেষ্ট।  */
  display:grid;grid-template-columns:1fr 480px;gap:0 60px;align-items:start;
}
.lhero h1,.lhero .lede{max-width:none}
.lcta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.lcta .btn{padding:12px 24px;font-size:15px}
/*  হিরোর দুই কাজের দুই রং। সবুজ পটভূমিতে সবুজ বোতাম ডুবে যেত, তাই
    প্রধান কাজটি সোনালি — গাঢ় সবুজে সবচেয়ে স্পষ্ট। দ্বিতীয়টি বিলের
    স্যামন-লাল, যা পাতার বাকি উচ্চারণের সাথেই মেলে।  */
.btn.gold{
  background:linear-gradient(180deg,#EFC04A,var(--gold));color:#3A2A03;
  border-color:transparent;font-weight:600;
  box-shadow:0 3px 0 var(--gold-deep), 0 5px 14px rgba(242,183,5,.34),
             inset 0 1px 0 rgba(255,255,255,.45);
}
.btn.gold:hover{background:linear-gradient(180deg,#F5CB5E,#E0AC2C);
  box-shadow:0 3px 0 var(--gold-deep), 0 8px 20px rgba(242,183,5,.46),
             inset 0 1px 0 rgba(255,255,255,.5)}
.btn.gold:active{transform:translateY(3px);
  box-shadow:0 0 0 var(--gold-deep), 0 1px 4px rgba(0,0,0,.28),
             inset 0 1px 3px rgba(0,0,0,.18)}

.btn.red{
  background:linear-gradient(180deg,#EC8A82,#CF5A52);color:#fff;
  border-color:transparent;font-weight:600;
  box-shadow:0 3px 0 #A63D36, 0 5px 14px rgba(207,90,82,.36),
             inset 0 1px 0 rgba(255,255,255,.34);
}
.btn.red:hover{background:linear-gradient(180deg,#F19891,#D8635B);
  box-shadow:0 3px 0 #A63D36, 0 8px 20px rgba(207,90,82,.46),
             inset 0 1px 0 rgba(255,255,255,.4)}
.btn.red:active{transform:translateY(3px);
  box-shadow:0 0 0 #A63D36, 0 1px 4px rgba(0,0,0,.26),
             inset 0 1px 3px rgba(0,0,0,.18)}
/*  একটি সাজানো মুহূর্ত: ব্যাজ → শিরোনাম → লেখা → প্রবাহ → বোতাম।
    প্রতিটি অংশে আলাদা প্রভাব দিলে ছড়ানো লাগত।  */
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.lhero .eb,.lhero h1,.lhero .lede,.lcta,.spec{opacity:0}
.go .lhero .eb,.go .lhero h1,.go .lhero .lede,.go .lcta,.go .spec{
  animation:riseIn .55s ease forwards;
}
.go .lhero .eb{animation-delay:.05s}
.go .lhero h1{animation-delay:.14s}
.go .lhero .lede{animation-delay:.24s}
.go .spec{animation-delay:.36s}
.go .lcta{animation-delay:1.7s}

.eb{
  display:inline-block;font-size:13px;color:#FFD5D0;font-weight:600;
  background:linear-gradient(180deg,rgba(228,114,106,.30),rgba(228,114,106,.16));
  border:1px solid rgba(228,114,106,.5);
  padding:4px 14px;border-radius:20px;margin-bottom:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.22);
}
/*  প্রবাহের ধাপ — বাঁদিক থেকে ডানে, প্রতিটির মাঝে রেখা। সংখ্যা
    বসানো হয়নি: এটা ক্রম বটে, কিন্তু গ্রাহকের করণীয় নয়, তাই
    ১/২/৩ দিলে কাজের তালিকা মনে হত।  */
/*  প্রবাহ দুই কলামের নিচে, পুরো চওড়ায় — বাঁ কলামে রাখলে পাঁচ ধাপ
    অর্ধেক জায়গায় চেপে যেত, আর নমুনা কার্ডের নিচে ডানদিকটা খালি
    পড়ে থাকত।  */
.flow{
  grid-column:1 / -1;
  list-style:none;margin:26px 0 0;padding:22px 0 0;display:grid;
  /*  শেষ ধাপে দুটি শাখা বসে, তাই বাড়তি জায়গা  */
  grid-template-columns:repeat(4,1fr) 1.5fr;gap:0;
  border-top:1px solid rgba(255,255,255,.16);
}
.flow li{position:relative;padding:0 20px 0 0}
  .flow li:not(:last-child)::after{
  content:"";position:absolute;top:17px;right:10px;width:calc(100% - 56px);
  height:1px;background:linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.1));
}
.flow i{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  font-style:normal;font-size:15px;color:#FFD5D0;margin-bottom:9px;
  background:linear-gradient(180deg,rgba(228,114,106,.34),rgba(228,114,106,.18));
  border:1px solid rgba(228,114,106,.44);
  box-shadow:0 2px 5px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
}
.flow b{display:block;font-size:13.5px;color:#fff;font-weight:600;line-height:1.35}
.flow span{display:block;font-size:12px;color:rgba(255,255,255,.6);
  line-height:1.5;margin-top:2px}

/*  শেষ ধাপ দুই শাখায় — নিট প্রদেয় ব্যাংকে, এআইটি কোষাগারে।
    শাখা দুটি ডানে বের হয়, নিচে নয়: নিচে ঝুললে শেষ ধাপটা বাকিদের
    চেয়ে অনেক লম্বা হয়ে সারিটা অসম দেখাত, আর কাঁটার মতোও লাগত না।  */
.flow .fork{display:grid;grid-template-columns:auto 1fr;column-gap:16px;
  align-items:start;padding-right:0}
/*  আইকন, নাম ও ব্যাখ্যা বাঁ কলামে থাকে, নইলে গ্রিড স্বয়ংক্রিয়ভাবে
    নামটাকে ডান কলামে বসিয়ে শাখার সাথে ঠেলাঠেলি করত  */
.flow .fork > i,.flow .fork > b,.flow .fork > span{grid-column:1}
.flow .fork .fk{grid-column:2;grid-row:1 / span 3;align-self:center;
  padding-left:16px;position:relative;min-width:0}
/*  উল্লম্ব কাণ্ড, দুই শাখাকে জোড়ে  */
.flow .fork .fk::before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;
  background:rgba(228,114,106,.55);
}
.flow .fork u{
  display:block;text-decoration:none;padding-left:12px;position:relative;
  font-size:11.5px;color:rgba(255,255,255,.66);line-height:1.5;
}
.flow .fork u + u{margin-top:9px}
.flow .fork u::before{
  content:"";position:absolute;left:0;top:8px;width:9px;height:1px;
  background:rgba(228,114,106,.7);
}
.flow .fork em{display:block;font-style:normal;font-weight:600;color:#FFD5D0}

/*  একবারই চলে, পাতা খোলার সময় — ধাপগুলো বাঁদিক থেকে ডানে ফুটে ওঠে,
    তাই ক্রমটা পড়ার আগেই বোঝা যায়। বারবার চললে বিরক্তিকর হত।  */
@keyframes flowIn{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}
}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/*  অ্যানিমেশন চলে কেবল .go ক্লাস বসলে — JS পাতা তৈরি হওয়ার পরে
    বসায়। খালি CSS-এ রাখলে দুটি সমস্যা হত: ছবি বা ফন্ট আসার আগেই
    শুরু হয়ে যেত, আর ফিরে এলে আর চলত না।  */
.flow li{opacity:0}
.go .flow li{animation:flowIn .55s ease forwards}
.go .flow li:nth-child(1){animation-delay:.2s}
.go .flow li:nth-child(2){animation-delay:.5s}
.go .flow li:nth-child(3){animation-delay:.8s}
.go .flow li:nth-child(4){animation-delay:1.1s}
.go .flow li:nth-child(5){animation-delay:1.4s}
.flow li:not(:last-child)::after{transform:scaleX(0);transform-origin:left}
.go .flow li:not(:last-child)::after{
  animation:lineGrow .5s ease forwards;opacity:.9;
}
.go .flow li:nth-child(1)::after{animation-delay:.55s}
.go .flow li:nth-child(2)::after{animation-delay:.85s}
.go .flow li:nth-child(3)::after{animation-delay:1.15s}
.go .flow li:nth-child(4)::after{animation-delay:1.45s}
@media(max-width:960px){
  .flow{grid-template-columns:repeat(3,1fr);gap:18px 0}
  .flow li::after{display:none}
  /*  সরু পর্দায় পাশে জায়গা নেই — শাখা নিচে নামে  */
  .flow .fork{display:block}
  .flow .fork .fk{padding-left:0;margin-top:9px}
  .flow .fork .fk::before{display:none}
}
@media(max-width:560px){.flow{grid-template-columns:repeat(2,1fr)}}

/*  লাইন ৭৫ অক্ষরের বেশি হলে চোখ পরের লাইনের শুরু খুঁজে পায় না,
    তাই কলাম চওড়া হলেও লেখার প্রস্থ বাঁধা।  */
.lhero h1{font-size:36px;line-height:1.28;font-weight:700;color:#fff;max-width:20ch}
.lhero .lede{margin-top:16px;font-size:17px;color:rgba(255,255,255,.78);
  line-height:1.8;max-width:62ch}

/*  বিলের গঠন — যে ভাঙানিতে ব্যাংক টাকা তোলে আর হিসাব বিভাগ মেলায়।
    লগইনের আগেই দেখালে বোঝা যায় এটা ঠিক সেই কাগজ।  */
.hcol{min-width:0}
.spec{
  max-width:none;border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(4px);
  box-shadow:0 2px 4px rgba(0,0,0,.16), 0 12px 30px rgba(0,0,0,.24),
             inset 0 1px 0 rgba(255,255,255,.22);
}
.spec-h{padding:11px 17px;background:rgba(228,114,106,.22);
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:13px;color:#FFD2CD;font-weight:600}
.spec-r{display:grid;grid-template-columns:1fr auto;gap:14px;padding:9px 17px;
  border-bottom:1px solid rgba(255,255,255,.09);font-size:14.5px}
.spec-r:last-child{border-bottom:0}
.spec-r .lb{color:rgba(255,255,255,.72)}
.spec-r .vv{font-size:13.5px;color:#fff}
.spec-r.tot{background:rgba(255,255,255,.10);font-weight:600;
  border-top:1px solid rgba(255,255,255,.2)}
.spec-r.tot .lb{color:#fff}
.spec-n{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:12px;
  margin-bottom:0;line-height:1.7}
.lcta{margin-bottom:0}

/* stats strip */
.lstats{margin-top:44px;border-top:1px solid rgba(255,255,255,.16);position:relative;z-index:2}
/*  নিজস্ব ক্লাস, .lw নয় — .lstats হিরোর ভেতরে, তাই .lw দিলে
    `.lhero .lw`-এর দুই কলামের নিয়মও এটাকে ধরত। দুটোর ওজন সমান,
    আর পরেরটা জিতে চারটি ঘরকে দুই কলামে ভেঙে দিত।  */
.lsw{max-width:1440px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 32px}
.lsw>div{padding:19px 20px;border-right:1px solid rgba(255,255,255,.13)}
.lsw>div:last-child{border-right:0}
.lsw b{display:block;font-size:25px;font-weight:700;color:#fff;letter-spacing:-.02em}
.lsw span{font-size:13px;color:rgba(255,255,255,.62)}

/*  প্রবেশের কার্ড — বোতামে চাপলে তবেই। পাতায় সবসময় ফর্ম রাখলে
    গ্রাহক ঢোকার আগেই সিদ্ধান্ত নিতে বাধ্য হন; বোতাম রাখলে আগে
    পড়ে নেওয়া যায়।  */
.auth{
  /*  .scrim-এর (৯০) উপরে, .modal-এর (৯৫) নিচে। সমান হলে যেটি
      নথিতে পরে, সেটিই উপরে আঁকা হয় — আর #scrim পরেই থাকে, তাই
      সমান রাখলে ভুলে স্ক্রিম উঠে গেলে কার্ডটাই ঢাকা পড়ে।  */
  position:fixed;inset:0;z-index:94;display:none;
  align-items:center;justify-content:center;padding:22px 16px;overflow-y:auto;
  /*  পেছনের পাতা চেনা যাওয়া দরকার — গ্রাহক যেন বোঝেন তিনি কোন
      পাতায় পরিচয় দিচ্ছেন। বেশি ঝাপসা হলে সেই সংযোগটুকু হারায়।  */
  background:rgba(10,58,82,.42);
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);
}
.auth.on{display:flex}
.card-in{
  width:min(412px,100%);background:linear-gradient(180deg,#fff,#fbfdfe);
  border-top:3px solid var(--coral);border-radius:16px;
  padding:26px 26px 22px;color:var(--ink);position:relative;
  box-shadow:0 2px 4px rgba(10,58,82,.16),
             0 8px 18px rgba(10,58,82,.22),
             0 28px 64px rgba(10,58,82,.38),
             inset 0 1px 0 #fff;
}
/*  কার্ডের মাথায় লোগো ও সফটওয়্যারের নাম — গ্রাহক যেন নিশ্চিত হন
    কোথায় পরিচয় দিচ্ছেন। নিচে দুই প্রতিষ্ঠানের নাম, ছোট করে।  */
.auth-head{display:flex;align-items:center;gap:11px;margin-bottom:18px;
  padding-bottom:15px;border-bottom:1px solid var(--rule-soft)}
.auth-head img{width:40px;height:40px;flex:none;border-radius:50%;
  background:#fff;padding:2px;box-shadow:0 0 0 1px var(--rule)}
.auth-head b{display:block;font-size:16px;letter-spacing:-.01em;color:var(--brand-deep)}
.auth-head span{font-size:12.5px;color:var(--muted)}
.auth-by{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--rule-soft);
  display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);
}
.auth-by b{color:var(--brand);font-weight:600}

/*  ওভারলে খোলা থাকলে মাস্টহেড ঢাকা পড়ে, তাই কার্ডেও ভাষা বদলের
    সুযোগ — নইলে ইংরেজি পড়া গ্রাহককে কার্ড বন্ধ করে ভাষা বদলে
    আবার খুলতে হত।  */
.auth-lang{margin:0 0 14px;font-size:12px}
.auth-lang button{padding:5px 12px;font-size:12px}

.auth-x{
  position:absolute;top:12px;right:12px;width:30px;height:30px;
  border:0;background:none;color:var(--muted);font-size:20px;line-height:1;
  cursor:pointer;border-radius:8px;
}
.auth-x:hover{background:var(--brand-soft);color:var(--brand)}
.card-in h2{font-size:17px;margin-bottom:4px}

/* what you can do */
.lwhat{padding:44px 0}
.lwhat h2{font-size:21px;margin-bottom:6px}
.lwhat .sub2{color:var(--muted);margin-bottom:24px;max-width:62ch}
.what{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/*  স্তরযুক্ত ছায়া — কাছেরটি টানটান, দূরেরটি নরম। উপরে আলোর রেখা,
    নিচে গাঢ় প্রান্ত: কাগজের পুরুত্বের মতো।  */
.what article{
  background:linear-gradient(180deg,#fff,#FCFEFD);
  padding:21px 22px;border:1px solid var(--rule);border-radius:14px;
  box-shadow:0 1px 1px rgba(31,143,192,.06),
             0 3px 6px rgba(31,143,192,.07),
             0 10px 20px rgba(31,143,192,.06),
             inset 0 1px 0 #fff;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.what article:hover{
  transform:translateY(-3px);border-color:var(--coral-line);
  box-shadow:0 2px 2px rgba(31,143,192,.07),
             0 6px 12px rgba(31,143,192,.10),
             0 18px 34px rgba(31,143,192,.12),
             inset 0 1px 0 #fff;
}
.what .ic{
  width:38px;height:38px;border-radius:11px;color:#fff;
  background:linear-gradient(180deg,#EC8A82,#CF5A52);
  display:grid;place-items:center;font-size:16px;margin-bottom:13px;
  box-shadow:0 2px 0 #B4473F, 0 4px 10px rgba(228,114,106,.38),
             inset 0 1px 0 rgba(255,255,255,.38);
  transition:transform .2s, box-shadow .2s;
}
.what article:hover .ic{
  transform:translateY(-1px);
  box-shadow:0 3px 0 #B4473F, 0 7px 16px rgba(228,114,106,.46),
             inset 0 1px 0 rgba(255,255,255,.44);
}
.what h3{font-size:15px;margin-bottom:6px}
.what p{font-size:13.5px;color:var(--muted);line-height:1.7}

/* notices */
.lnote{padding:0 0 44px}
.nbox{background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 1px rgba(31,143,192,.06),
             0 4px 8px rgba(31,143,192,.07),
             0 12px 24px rgba(31,143,192,.06)}
.nbox{border-top:2px solid var(--coral)}
.nbox .nh{padding:14px 20px;border-bottom:1px solid var(--rule);display:flex;
  align-items:baseline;gap:12px;background:var(--coral-soft)}
.nbox .nh b{font-size:15px}
.nbox .nh span{font-size:12.5px;color:var(--muted);margin-left:auto}
.nrow{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:14px 20px;
  border-bottom:1px solid var(--rule-soft)}
.nrow:last-child{border-bottom:0}
.nrow .dt{
  width:54px;text-align:center;border-radius:10px;padding:6px 0;line-height:1.25;
  background:linear-gradient(180deg,var(--brand-mid),var(--brand-deep));
  box-shadow:0 2px 0 #052E1F, 0 4px 9px rgba(10,58,82,.28),
             inset 0 1px 0 rgba(255,255,255,.22);
}
.nrow .dt b{display:block;font-size:16px;font-weight:700;color:#fff}
.nrow .dt span{font-size:11.5px;color:rgba(255,255,255,.72)}
.nrow .tx b{display:block;font-size:14.5px;margin-bottom:2px}
.nrow .tx span{font-size:13.5px;color:var(--muted);line-height:1.65}

/*  ফুটার হিরোর সবুজেই — পাতার দুই প্রান্ত এক রঙে বাঁধা থাকে, আর
    মাঝের সাদা অংশটুকু কাগজের মতো আলাদা হয়ে ফোটে।  */
.lfoot{
  margin-top:auto;padding:26px 0 22px;color:rgba(255,255,255,.72);
  background:linear-gradient(180deg,var(--brand),var(--brand-deep));
  border-top:3px solid var(--coral);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.lfoot .lw{display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:13px}
.lfoot .r{margin-left:auto;text-align:right;line-height:1.5}
.lfoot .by{display:block;font-size:12px;color:rgba(255,255,255,.5)}
.lfoot .by b{color:#F5CB5E;font-weight:600}


/* ---------- shared: form, buttons, chrome ---------- */
.card-in .sub{color:var(--muted);font-size:13.5px;margin:0 0 22px}
.f{margin-bottom:14px}
.f label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
/*  ইনপুট ভেতরের দিকে বসানো — বোতাম উঁচু, ঘর নিচু, তাই কোনটা চাপার
    আর কোনটা লেখার তা আকৃতিতেই আলাদা  */
.f input{
  width:100%;padding:11px 13px;border:1px solid var(--rule);border-radius:10px;
  background:#fff;font:inherit;color:var(--ink);
  box-shadow:inset 0 2px 4px rgba(31,143,192,.10);
}
.f input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
/*  বোতামের উচ্চতা নিচের গাঢ় প্রান্ত থেকে আসে — চাপলে সেটি ছোট হয়ে
    আসে আর বোতাম নিচে বসে যায়। ছায়া নয়, প্রান্তই পুরুত্ব বোঝায়,
    তাই মুদ্রিত বিলের মতো পরিচ্ছন্ন থাকে।  */
.btn{
  padding:10px 18px;border:1px solid var(--rule);background:#fff;
  color:var(--brand);cursor:pointer;border-radius:10px;position:relative;
  box-shadow:0 3px 0 #D7E3DC, 0 4px 8px rgba(31,143,192,.10);
  transition:transform .1s, box-shadow .1s, background .16s;
}
.btn:hover{background:var(--brand-soft);box-shadow:0 3px 0 #c6d8e2, 0 6px 14px rgba(31,143,192,.16)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 #c6d8e2, 0 1px 3px rgba(31,143,192,.18)}
.btn.pri{
  background:linear-gradient(180deg,#2a9bd4,var(--brand));color:#fff;
  border-color:transparent;
  box-shadow:0 3px 0 var(--brand-deep), 0 5px 12px rgba(31,143,192,.32),
             inset 0 1px 0 rgba(255,255,255,.24);
}
.btn.pri:hover{background:linear-gradient(180deg,#1A9465,#0C6444);
  box-shadow:0 3px 0 var(--brand-deep), 0 8px 18px rgba(31,143,192,.40),
             inset 0 1px 0 rgba(255,255,255,.28)}
.btn.pri:active{transform:translateY(3px);
  box-shadow:0 0 0 var(--brand-deep), 0 1px 4px rgba(31,143,192,.3),
             inset 0 1px 3px rgba(0,0,0,.16)}
.btn.sm{padding:6px 12px;font-size:13.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.err{color:var(--due);font-size:13.5px;margin:10px 0 0;min-height:19px}
.hint{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--rule-soft);
  font-size:12.5px;color:var(--muted);line-height:1.7;
}

/* ---------- frame ---------- */
/*  #portal{display:none} removed with #dash below, and for the same
    reason: it is the prototype's other single-page container and no
    view in this port carries the id.  Dead now, but a rule that hides
    an element nothing creates is a trap for whoever creates one.  */
/*  ল্যান্ডিং ও ভেতরের হেডার এক চেহারায় — লগইনের পরে বার বদলে গেলে
    মনে হয় অন্য সাইটে চলে এসেছি। তাই .lnav-এর নিয়মই দুজায়গায়।  */
.top{
  background:var(--paper);border-top:3px solid var(--coral);
  border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:60;
}
.top-in{
  max-width:1440px;margin:0 auto;padding:9px 32px;width:100%;
  display:flex;align-items:center;gap:13px;min-height:66px;
}
/*  গ্রাহকের নাম ডানে, ভাষার টগলের আগে — কে হিসেবে ঢুকেছি সেটাই
    ভেতরের পাতায় হেডারের বাড়তি কাজ  */
.who{margin-left:auto;text-align:right;line-height:1.35;padding-right:4px}
.who b{display:block;font-size:13.5px;font-weight:600;color:var(--brand-deep)}
.who span{font-size:12px;color:var(--muted);font-family:var(--nu)}
@media(max-width:640px){.who{display:none}}
.wrap{max-width:1440px;margin:0 auto;padding:26px 32px}

/* ---------- statement head ---------- */
.stmt{
  padding:26px 28px;margin-bottom:22px;border-radius:16px;color:#fff;
  background:
    radial-gradient(520px 240px at 88% -20%, rgba(228,114,106,.26), transparent 62%),
    linear-gradient(150deg,#0E6B49,#1f8fc0 46%,#0e5578);
  box-shadow:0 2px 3px rgba(10,58,82,.18),
             0 8px 16px rgba(10,58,82,.22),
             0 20px 40px rgba(10,58,82,.20),
             inset 0 1px 0 rgba(255,255,255,.14);
}
.stmt .owed-label,.stmt .side .k{color:rgba(255,255,255,.66)}
.stmt .owed,.stmt .side .v{color:#fff}
.stmt .owed.clear{color:#8FE3B8}
.stmt .owed-note{color:rgba(255,255,255,.72)}
.stmt .owed-note em{color:#FFC9C4}
.stmt-grid{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end}
.owed-label{font-size:13.5px;color:var(--muted);margin-bottom:6px}
.owed{
  font-size:44px;line-height:1;font-weight:700;letter-spacing:-.03em;
  color:var(--navy);
}
.owed.clear{color:var(--credit)}
.owed-note{font-size:13.5px;color:var(--muted);margin-top:9px}
.owed-note em{font-style:normal;color:var(--due);font-weight:600}
.side{display:flex;gap:34px}
.side div{text-align:right}
.side .k{font-size:12.5px;color:var(--muted);margin-bottom:4px}
.side .v{font-size:19px;font-weight:600;color:var(--navy)}

/*  জরুরিতার চিহ্ন — শেষ তারিখ পেরোলে লাল, কাছে এলে সোনালি।
    ১% বিলম্ব সারচার্জ ওই তারিখ থেকেই বসে, তাই কেবল তারিখ নয়,
    কত দিন বাকি সেটাও দেখানো।  */
.tagx{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12.5px;
  font-weight:600;margin-left:6px;vertical-align:1px}
.tagx.ok{background:rgba(255,255,255,.16);color:#BFE9D4}
.tagx.soon{background:rgba(242,183,5,.26);color:#F6D98A}
.tagx.late{background:rgba(228,114,106,.30);color:#FFD0CB}

/*  আদায়ের অগ্রগতি — দুটি সংখ্যা আলাদা লাইনে থাকলে অনুপাতটা
    চোখে পড়ে না  */
.s-bar{margin-top:16px;max-width:400px}
.pbar{height:7px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}
.pbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#7FE0B0,#3FBF89);transition:width .5s ease}
.pmeta{display:flex;justify-content:space-between;gap:12px;margin-top:7px;
  font-size:12.5px;color:rgba(255,255,255,.72)}
.pmeta b{color:#fff}

/* ---------- tabs ---------- */
/*  এখানে আগে আরেকটি .tabs ছিল — কার্ডের মতো: চারপাশে বর্ডার,
    গোল কোণ, প্যাডিং, ছায়া — আর সঙ্গে .tab ক্লাসের একগুচ্ছ নিয়ম।
    .tab কোথাও রেন্ডার হয় না, কিন্তু .tabs হত: ফলে নিচের আসল
    ট্যাব-পট্টির উপর একটা বাক্স চেপে বসত আর নিচের কিনারা দুবার
    আঁকা হত। প্রোটোটাইপের ট্যাব আন্ডারলাইন-ধাঁচের, বাক্স-ধাঁচের নয়,
    তাই মরা নিয়মগুলো সরানো হল — সংজ্ঞা নিচে একটিই থাকে।  */

/* ---------- panels & tables ---------- */
.panel{background:var(--paper);border:1px solid var(--rule);margin-bottom:20px;
  border-radius:14px;overflow:hidden;
  box-shadow:0 1px 1px rgba(31,143,192,.05),
             0 3px 7px rgba(31,143,192,.06),
             0 10px 20px rgba(31,143,192,.05)}
.ph{
  padding:15px 20px;border-bottom:1px solid var(--rule-soft);
  display:flex;align-items:center;gap:14px;
}
.ph h3{font-size:14.5px}
.ph .note{font-size:13px;color:var(--muted);margin-left:auto}
.pb{padding:20px}
.pb.flush{padding:0}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--rule-soft)}
th{
  font-weight:600;font-size:12.5px;color:#8C3B34;
  background:var(--coral-soft);border-bottom:1px solid var(--coral-line);
}
td.r,th.r{text-align:right}
td.c,th.c{text-align:center}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#f7fafc}
tfoot td{font-weight:600;border-top:1px solid var(--rule);border-bottom:0;background:#f7fafc}
.pill{
  display:inline-block;padding:3px 10px;font-size:12.5px;border-radius:999px;
  border:1px solid var(--rule);color:var(--muted);background:#fff;
  box-shadow:0 1px 2px rgba(31,143,192,.09), inset 0 1px 0 #fff;
}
.pill.due{border-color:#E3BDB8;background:#FBF0EE;color:var(--due)}
.pill.part{border-color:#E5D4AE;background:#FBF6EA;color:var(--amber)}
.pill.ok{border-color:#BCD7C9;background:var(--brand-soft);color:var(--credit)}
.empty{padding:36px 20px;text-align:center;color:var(--muted);font-size:14px}
.empty b{display:block;color:var(--ink);font-weight:600;margin-bottom:5px}

/* ---------- ledger ---------- */
.bal{font-weight:600;color:var(--navy)}
.dr{color:var(--due)}
.cr{color:var(--credit)}

/* ---------- usage bars ---------- */
.bars{display:flex;align-items:flex-end;gap:14px;height:150px;padding:8px 4px 0}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}
.bar .col{width:100%;background:var(--brand);min-height:3px}
.bar .cap{font-size:12px;color:var(--muted);white-space:nowrap}
.bar .val{font-size:12.5px;font-weight:600}

/* ---------- network ---------- */
.pt{
  display:grid;grid-template-columns:1fr auto;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--rule-soft);
}
.pt:last-child{border-bottom:0}
.pt .nm{font-weight:600;font-size:14px}
.pt .gd{font-size:13px;color:var(--muted);margin-top:2px}
.pt .kv{font-size:12.5px;color:var(--muted);text-align:right}

/* ---------- request form ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--rule);
  background:#fff;font:inherit;color:var(--ink);
}
select:focus,textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
textarea{min-height:88px;resize:vertical}
.rq{padding:15px 0;border-bottom:1px solid var(--rule-soft)}
.rq:last-child{border-bottom:0}
.rq .hd{display:flex;gap:12px;align-items:baseline}
.rq .hd b{font-size:14px}
.rq .hd .dt{font-size:12.5px;color:var(--muted);margin-left:auto}
.rq .bd{font-size:13.5px;color:var(--muted);margin-top:5px}
.rq .dec{
  margin-top:9px;padding:9px 12px;background:#f7fafc;
  border-left:2px solid var(--rule);font-size:13.5px;
}
.rq .dec b{font-weight:600}

/* ---------- bill sheet ---------- */
.sheet-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px}
/*  রং আসল ছাপা বিল থেকে পিক্সেল ধরে নেওয়া:
        #FF8080  লেবেলের ঘর ও পট্টি
        #008000  ছকের রেখা ও শিরোনাম
        #BF4080  বাইরের সীমানা
    লেখা মনোস্পেসে — ওরাকল রিপোর্টস যেভাবে ছাপে।  */
.bill{
  --bl:#008000; --bp:#FF8080; --bo:#BF4080;
  background:#fff;border:2px solid var(--bo);overflow:hidden;
  font-family:'Consolas','DejaVu Sans Mono','Courier New',monospace;
  font-size:12.5px;line-height:1.35;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 20px rgba(0,0,0,.08);
}
/*  শিরোনাম: লোগো বাঁয়ে, নাম সবুজে কেন্দ্রে, নিচে তিন লাইন কালোয়  */
.b-top{position:relative;padding:12px 16px 14px;text-align:center}
.b-top img{position:absolute;left:16px;top:10px;width:52px;height:52px}
.b-top b{display:block;font-size:17px;font-weight:700;color:var(--bl);
  letter-spacing:.06em}
.b-top span{display:block;font-size:12px;color:#000;letter-spacing:.02em}

.b-head{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
/*  ছয় কলাম: লেবেল ১৩, নাম ২৭, বাকি চারটি সমান  */
.b-head col.l{width:13%} .b-head col.n{width:27%} .b-head col.v{width:15%}
.b-head th,.b-head td{border:1px solid var(--bl);padding:3px 7px;text-align:center}
.b-head th{background:var(--bp);color:#000;font-weight:700;line-height:1.3}
.b-head .b-nm{font-weight:700;font-size:12.5px;text-align:center;background:#fff}
.b-head .b-ad{color:#000;text-align:center;line-height:1.5;background:#fff}
/*  `width:1%` দেওয়া যাবে না — `table-layout:fixed`-এর সাথে ওটা
    আক্ষরিক ১% ধরে, তখন "ইউটিলিটির নাম" ঘরের বাইরে বেরিয়ে পাশের
    লেখার উপরে চড়ে বসে। ছাপা পাতায় স্পষ্ট দেখা গেছে।  */
.b-head th[rowspan]{background:#fff;color:#000;font-weight:700;width:13%}

/*  পট্টিতে চাপলেই সংযুক্তি — ছাপা কাগজে ওই লাইনটাই সংযুক্তির
    দিকে ইশারা করে, পর্দায় সেটি কাজও করে  */
/*  প্রতিটি ভিউয়ের উপরে ছাপা ও নামানোর পট্টি  */
.rbar{display:flex;gap:8px;justify-content:flex-end;margin:0 0 14px}
/*  ডায়াগ্রাম SVG-তে, তাই ছাপলে ঝাপসা হয় না  */
.sld{display:block;min-width:760px}
.pf2{padding:9px 16px;border-top:1px solid var(--rule);font-size:13px;
  color:var(--muted);display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap}
.lgnd{display:flex;align-items:center;gap:6px;font-size:12px}
.lgnd svg{vertical-align:middle}
.lgnd span{margin-right:10px}
.pf2 b{color:var(--navy);margin:0 4px}
@media print{.sld{min-width:0}}
@media print{.rbar{display:none!important}}

.b-link{cursor:pointer}
.b-link:hover{filter:brightness(.94)}
@media print{.b-link{cursor:auto}}

.b-band{
  padding:3px 12px;background:var(--bp);color:#000;font-weight:700;
  font-size:12px;text-align:center;
  border-top:1px solid var(--bl);border-bottom:1px solid var(--bl);
}
.b-two{display:grid;grid-template-columns:1fr 1fr}
.b-tbl{width:100%;border-collapse:collapse;font-size:12px}
.b-tbl th,.b-tbl td{border:1px solid var(--bl);padding:3px 8px;text-align:left}
.b-tbl th{background:var(--bp);color:#000;font-weight:700;text-align:center}
.b-tbl td.r,.b-tbl th.r{text-align:right}
.b-tbl td.c{text-align:center}
.b-tbl td.b-in{padding-left:26px}
.b-tbl .b-sum td{font-weight:700}
.b-tbl .b-grand td{font-weight:700}
.b-none{text-align:center;color:#555;padding:8px}
.b-en td,.b-en th{width:25%}

.b-foot{padding:10px 14px;border-top:1px solid var(--bl);font-size:11.5px;
  color:#000;line-height:1.5}
.b-foot p{margin:0 0 3px}
.b-foot .b-fg{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.b-sign{margin-top:26px;text-align:right}
.b-sign b{display:block;font-size:12.5px;color:#000}
.b-sign span{font-size:11.5px}
@media(max-width:640px){.b-two{grid-template-columns:1fr}
  .b-two .b-tbl:first-child{border-right:0}}
.sheet{border-top:3px solid var(--coral)}
.sheet .sh{padding:18px 22px;border-bottom:1px solid var(--rule);text-align:center;
  background:var(--coral-soft)}
.sheet .sh b{display:block;font-size:15px;color:var(--brand)}
.sheet .sh span{font-size:12.5px;color:var(--muted)}
.lines{padding:0}
.line{
  display:grid;grid-template-columns:1fr auto;gap:16px;padding:9px 22px;
  border-bottom:1px solid var(--rule-soft);font-size:14px;
}
.line.sum{background:#f7fafc;font-weight:600;border-top:1px solid var(--rule)}
.line.grand{background:var(--brand-soft);font-weight:700;font-size:15.5px;color:var(--navy)}
.line .lb{color:var(--muted)}
.line.sum .lb,.line.grand .lb{color:var(--ink)}

    .foot{
  max-width:1440px;margin:0 auto;padding:0 32px 28px;
  font-size:12.5px;color:var(--muted);line-height:1.7;
}
/*  ১৬০০px-এর বেশি পর্দায় ছয়টি কাজ দুই সারিতে তিনটি করে থাকলে
    কার্ডগুলো অকারণে চওড়া হয়ে যায় — লেখা কম, ফাঁকা বেশি।  */
@media(min-width:1500px){
  .lhero .lw{grid-template-columns:1fr 540px;gap:0 72px}
  .lhero h1{font-size:40px}
  .lwhat .what{grid-template-columns:repeat(3,1fr);gap:18px}
  .what article{padding:24px 26px}
}
@media(max-width:960px){
  .lhero .lw{grid-template-columns:1fr;gap:28px}
  .lhero h1{font-size:26px}
  .what{grid-template-columns:1fr 1fr}
  .lsw{grid-template-columns:1fr 1fr}
  .lsw>div:nth-child(2){border-right:0}
  .lhero h1{font-size:25px}
}
@media(max-width:640px){
  .what{grid-template-columns:1fr}
  .lw{padding:0 16px}
  .lhero h1{font-size:22px}
  .spec-r{grid-template-columns:1fr;gap:2px}
  .spec-r .vv{color:var(--muted)}
}
@media(max-width:820px){
  .stmt-grid{grid-template-columns:1fr;align-items:start}
  .side{justify-content:flex-start;gap:26px}
  .side div{text-align:left}
  .two{grid-template-columns:1fr}
  .owed{font-size:34px}
  .wrap,.top{padding-left:16px;padding-right:16px}
  th,td{padding:9px 10px}
}
/*  কম গতি চাইলে নড়াচড়া বন্ধ — কিন্তু ছায়া ও প্রান্ত থাকে, কারণ
    ওগুলোই বোঝায় কোনটা চাপার জিনিস  */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  /*  অ্যানিমেশন বন্ধ হলে opacity:0 আটকে যেত — জিনিসগুলো দেখাই যেত না  */
  /*  অ্যানিমেশন বন্ধ হলে opacity:0 আটকে যেত — জিনিসগুলো দেখাই যেত না  */
  .flow li,.lhero .eb,.lhero h1,.lhero .lede,.lcta,.spec,
  .go .flow li,.go .lhero .eb,.go .lhero h1,.go .lhero .lede,.go .lcta,.go .spec{
    opacity:1!important;transform:none!important}
  .flow li::after,.go .flow li::after{transform:scaleX(1)!important}
  .btn:active,.btn.pri:active,.btn.gold:active,.btn.red:active,
  .what article:hover,.what article:hover .ic{transform:none!important}
}
/*  ছাপার পাতা: কেবল বিল। রঙিন পটভূমি ছাপা হয় না বলে গ্রেডিয়েন্ট
    ও ছায়া সরিয়ে সাদা-কালো ছকে নামানো — নইলে অনেক প্রিন্টারে লেখা
    পড়া যেত না।  */
@media print{
  /*  মাপ দুইভাবে বলা — কিওয়ার্ড আর স্পষ্ট মিলিমিটার। কিছু ব্রাউজার
      একটিই মানে, তাই দুটোই।

      তবু কাগজের মাপ শেষ পর্যন্ত প্রিন্ট ডায়ালগে ব্যবহারকারীর হাতে;
      CSS কেবল প্রস্তাব করতে পারে।  */
  @page{size:A4 portrait;size:210mm 297mm;margin:12mm}
  /*  ব্রাউজার সাশ্রয়ের জন্য পটভূমির রং ছাপে না — তাই স্যামন পট্টি
      সাদা হয়ে যেত আর সবুজ রেখা মিলিয়ে যেত। এটি বলে দিলে ছাপা কাগজ
      পর্দার মতোই আসে, অর্থাৎ আসল বিলের মতো।

      তবু প্রিন্ট ডায়ালগে "Background graphics" চালু থাকতে হয় —
      কিছু ব্রাউজারে ওটি ব্যবহারকারীর হাতে।  */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /*  A4-তে আঁটানো: মার্জিন বাদে ১৮২mm চওড়া। পর্দার ১৪৪০px প্রস্থ
      ছাপার সময়ও থেকে গেলে ব্রাউজার ছোট করে বসায় বা কেটে দেয়,
      দুটোতেই বিল পড়া যায় না।  */
  /*  আগে body-তে ১৮২mm বসানো ছিল — কাগজ Letter হলে বা ব্রাউজার
      @page না মানলে ছক কেটে যেত। এখন প্রস্থ পাতাই ঠিক করে, লেখা
      কেবল তার ভেতরে থাকে।  */
  html,body{width:auto;max-width:100%;margin:0;padding:0;
    background:#fff;color:#000;overflow:visible}
  .top,.tabs,.lfoot,.foot,.stmt,.sheet-bar,.btn,#signin{display:none!important}
  .wrap,.lw,main,#body,#portal{padding:0!important;margin:0!important;
    max-width:100%!important;width:auto!important;overflow:visible!important}
  #portal{display:block!important}
  /*  এক পাতায় আঁটানো — মাপ ছোট, ফাঁক কম। দুই পাতায় গেলে
      বকেয়ার ছক আলাদা কাগজে চলে যায়, আর গ্রাহক মেলাতে পারেন না।  */
  /*  মাপ ঠিক করতে দুবার ভুল হয়েছে: ৯.৫px-এ বিল পাতার ৬০% ভরত আর
      নিচটা ফাঁকা পড়ত, ১২px-এ উপচে দুই পাতায় চলে যেত। ১১px-এ
      A4-এর প্রায় পুরোটা ভরে, তবু এক পাতাতেই।  */
  .bill{
    width:100%;max-width:100%;border:2px solid var(--bo);border-radius:0;
    box-shadow:none;font-size:11px;
    break-inside:avoid;page-break-inside:avoid;
  }
  /*  ছক কাগজের বাইরে বেরোতে পারে না  */
  .b-head,.b-tbl{width:100%;table-layout:fixed}
  .b-head td,.b-head th,.b-tbl td,.b-tbl th{
    word-break:break-word;overflow-wrap:anywhere}

  /*  পোর্টালের অন্য ছকও (মিটারওয়ারি পাঠে দশ কলাম) — পর্দায় পাশে
      স্ক্রল করা যায়, কাগজে যায় না, তাই মাপ ছোট করে আঁটানো  */
  /*  সংযুক্তিতে গ্রিড ধরে অনেক ছক — প্রতিটি যেন গোটাই এক পাতায়
      থাকে, মাঝখান থেকে ভেঙে না যায়  */
  .panel{border-color:#666;border-radius:0;box-shadow:none;
    break-inside:avoid;page-break-inside:avoid}
  .panel .ph .btn,.panel .ph select,.search,.f{display:none!important}
  h3{break-after:avoid;page-break-after:avoid}

  /*  ছাপার সময় কে, কোন সাইকেল — কাগজে গ্রাহকের নাম না থাকলে
      কয়েকটি রিপোর্ট পাশাপাশি রাখলে গুলিয়ে যায়  */
  #body::before{
    content:attr(data-who);display:block;font-size:11px;font-weight:600;
    margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #999;
  }
  /*  ছকের সারি মাঝখান থেকে ভাঙে না, শিরোনাম প্রতি পাতায়  */
  tr{break-inside:avoid;page-break-inside:avoid}
  thead{display:table-header-group}
  tfoot{display:table-footer-group}
  .panel .pb{overflow:visible!important}
  .panel table{width:100%;table-layout:fixed;font-size:8.5px}
  .panel th,.panel td{padding:2px 4px;word-break:break-word;overflow-wrap:anywhere}
  .bill .b-top{padding:11px 14px}
  .bill .b-top img{width:46px;height:46px}
  .bill .b-top b{font-size:15px}
  .bill .b-top span{font-size:11px}
  .b-band{padding:5px 12px;font-size:11px}
  .b-head th,.b-head td{padding:5.5px 6px;font-size:10px}
  .b-tbl th,.b-tbl td{padding:5px 7px;font-size:10.5px}
  .b-foot{padding:11px 14px;font-size:10px;line-height:1.55}
  /*  স্বাক্ষরের আগে ফাঁক — আসল বিলেও ওখানে হাতে সই করার জায়গা থাকে  */
  .b-sign{margin-top:26px}
  .b-sign b{font-size:11.5px}
  /*  ছাপাতেও একই রং — অনেক প্রিন্টার পটভূমি ছাপে না, তাই রেখা
      ও লেখা কালোয় নেমে যায় আর ছক তবু পড়া যায়। রং ছাপলে হুবহু
      আসল বিল।  */
  .b-tbl .b-grand td{border-top:2px solid var(--bl)}
  .b-foot{border-top:1px solid var(--bl);color:#000}

  /*  কেবল পোর্টালের ছকে — বিলের ছক (.b-tbl, .b-head) নিজের স্যামন
      রংই রাখে, নইলে ছাপা বিলে পট্টি সাদা হয়ে যেত  */
  .panel th{background:#fff;border-bottom:1px solid #000;color:#000}
  a{text-decoration:none;color:#000}
}


/* ===== prototype style block 2 - the portal UI ===== */
:root{--brand:#1f8fc0;--brand-d:#14618a;--gold:#f2b705;--navy:#132b52;--teal:#38aede;--red:#e5453b;--ink:#122c3d;--mut:#5b7a70;--bg:#f4f8f6;--line:#dfeae5;--card:#ffffff}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Hind Siliguri','Nirmala UI','Noto Sans Bengali','Kohinoor Bangla','SolaimanLipi',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
.num{font-family:inherit;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:.01em}
.wrap{max-width:1440px;margin:0 auto;padding:0 32px}
@media(max-width:700px){.wrap{padding:0 16px}}
/* topbar */
.topbar{background:linear-gradient(120deg,var(--brand-d),var(--brand));color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(16,80,110,.25)}
.topbar .wrap{display:flex;align-items:center;gap:12px;height:64px}
.brandmark{width:40px;height:40px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--brand);font-size:13px;letter-spacing:.5px;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.brandtx b{display:block;font-size:15.5px;line-height:1.25}
.brandtx span{font-size:11.5px;opacity:.85}
.spacer{flex:1}
.lang{display:flex;border:1px solid rgba(255,255,255,.4);border-radius:999px;overflow:hidden;font-size:12px}
.lang button{background:transparent;border:0;color:#fff;padding:4px 12px;cursor:pointer;font-family:inherit}
.lang button.on{background:#fff;color:var(--brand);font-weight:700}
.btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:10px;padding:11px 20px;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:.15s;text-decoration:none}
.btn.gold{background:var(--gold);color:#10233a;box-shadow:0 3px 12px rgba(242,183,5,.4)}
.btn.gold:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn.grn{background:var(--brand);color:#fff}
.btn.line{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}
.btn.sm{padding:7px 13px;font-size:13px;border-radius:8px}
.btn.red{background:var(--red);color:#fff}
/* hero */
.hero{background:linear-gradient(140deg,var(--brand-d) 0%,var(--brand) 55%,#0e7d44 100%);color:#fff;padding:58px 0 70px;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;right:-120px;top:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(242,183,5,.22),transparent 65%)}
.hero h1{font-size:34px;line-height:1.3;max-width:640px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{max-width:600px;margin:14px 0 26px;font-size:16px;opacity:.94}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap}
.stat b{font-size:24px;display:block;font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;opacity:.85}
/* sections */
section.sec{padding:52px 0}
.sec h2{font-size:24px;margin-bottom:6px}
.sec .sub{color:var(--mut);margin-bottom:26px;max-width:640px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 1px 4px rgba(18,44,61,.05)}
.card .ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px;background:#e9f5ef}
.card h3{font-size:16px;margin-bottom:6px}
.card p{font-size:13.5px;color:var(--mut)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;position:relative}
.step .n{width:30px;height:30px;border-radius:50%;background:var(--gold);color:#10233a;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.notice{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:14px 16px;margin-bottom:10px}
.notice .d{min-width:74px;font-size:12px;color:var(--mut);font-weight:700}
.notice b{display:block;font-size:14px}
.notice span{font-size:13px;color:var(--mut)}
footer{background:var(--navy);color:#cfd9ea;padding:38px 0 30px;font-size:13.5px;margin-top:30px}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
footer b{color:#fff;display:block;margin-bottom:8px}
footer .cr{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);margin-top:18px;padding-top:14px;font-size:12px;color:#93a5c2}
/* modal + dashboard */
.scrim{position:fixed;inset:0;background:rgba(10,25,35,.55);backdrop-filter:blur(2px);z-index:90;display:none}
.scrim.on{display:block}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,94vw);background:#fff;border-radius:16px;z-index:95;display:none;box-shadow:0 18px 60px rgba(0,0,0,.3)}
.modal.on{display:block}
.modal .hd{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal .hd b{flex:1}
.modal .bd{padding:18px}
.x{cursor:pointer;border:0;background:#eef4f1;border-radius:8px;width:30px;height:30px;font-size:15px}
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--mut);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:14.5px;background:#fbfdfe}
.field input:focus,.field select:focus{outline:0;border-color:var(--teal)}
.hint{font-size:12px;color:var(--mut)}
.err{color:var(--red);font-size:12.5px;min-height:16px}
/* dash */
/*  #dash{display:none} used to live here.  The prototype was ONE html
    file that swapped #land for #dash on sign-in, so the dashboard
    started hidden and script revealed it.  This port gives each its
    own URL and its own request, and nothing ever reveals anything -
    so the rule left the dashboard permanently invisible while the
    server went on rendering it in full.  A response can be 200 with
    the right markup in it and still show the consumer a blank page.  */
.dashtop{background:linear-gradient(120deg,var(--brand-d),var(--brand));color:#fff;padding:16px 0}
.dashtop .wrap{display:flex;align-items:center;gap:14px}
.dashtop img{width:46px;height:46px;border-radius:10px;background:#fff;object-fit:contain}
.dashtop .mono{width:46px;height:46px;border-radius:10px;background:#fff;color:var(--brand);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
.dashtop b{font-size:17px;display:block}
.dashtop span{font-size:12.5px;opacity:.85}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:20px 0}
.kpi{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.kpi .l{font-size:12px;color:var(--mut);font-weight:700}
.kpi .v{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:3px}
.kpi .s{font-size:11.5px;color:var(--mut)}
/*  .lnav আঠালো (sticky) — তাই কোনো #ফ্র্যাগমেন্টে নামলে লক্ষ্যটা
    বারের নিচে ঢাকা পড়ে। scroll-margin-top বারের উচ্চতাটুকু ছেড়ে
    রাখে, যাতে ট্যাব-পট্টি বা লেখচিত্র বারের ঠিক নিচ থেকেই দেখা যায়।  */
#dTabs,#dCharts{scroll-margin-top:84px}
/*  ট্যাব-পট্টি।
    প্রোটোটাইপ <button> আর ইনলাইন onclick ব্যবহার করে; EH-143-এর CSP-তে
    ইনলাইন স্ক্রিপ্ট নেই, তাই এই পোর্টে প্রতিটি ট্যাব একটি <a href> —
    আর সেটাই EH-111-এর "প্রতিটি ট্যাব ছাপার যোগ্য" সত্যি করে।
    সিলেক্টরে a যোগ করা হয়নি বলে লিংকগুলো এতদিন সম্পূর্ণ স্টাইলহীন
    ছিল: নীল আন্ডারলাইন করা সাধারণ লিংক, ট্যাবের মতো কিছু নয়।  */
.tabs{
  display:flex;gap:4px;border-bottom:2px solid var(--line);margin:8px 0 18px;
  overflow-x:auto;scrollbar-width:thin;
}
.tabs a,
.tabs button{
  border:0;background:transparent;padding:10px 16px;font-family:inherit;
  font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;
  text-decoration:none;border-radius:10px 10px 0 0;
  transition:color .16s ease, background .16s ease, border-color .16s ease;
}
.tabs a:hover,
.tabs button:hover{color:var(--brand-deep);background:var(--brand-soft)}

/*  সক্রিয় ট্যাব: সোনালি রেখা নিচে, উপরে হালকা নীল আভা — রেখাটাই
    মূল সংকেত, আভা কেবল ট্যাবটাকে পট্টির সঙ্গে জুড়ে দেয়।  */
.tabs a.on,
.tabs button.on{
  color:var(--brand);border-color:var(--gold);
  background:linear-gradient(180deg,transparent,var(--brand-soft));
}

/*  কিবোর্ডে চলাচল দেখা যাওয়া দরকার — hover-এর রং যথেষ্ট নয়।  */
.tabs a:focus-visible,
.tabs button:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}

/*  সরু পর্দায় পট্টি পাশে গড়ায়; স্ক্রলবারটা সরু ও নিরীহ রাখা হয়
    যাতে ট্যাবের নিচের রেখাটা ভেঙে না দেখায়।  */
.tabs::-webkit-scrollbar{height:6px}
.tabs::-webkit-scrollbar-thumb{background:var(--rule);border-radius:999px}
.tabs::-webkit-scrollbar-track{background:transparent}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff}
.tbl th{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);text-align:left;padding:10px 12px;border-bottom:2px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid #ecf3ef;vertical-align:middle}
.tbl tr:hover td{background:#f7fbf9}
.r{text-align:right}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:700}
.pill.ok{background:#e2f3e9;color:#1f8fc0}
.pill.due{background:#fde8e6;color:#c0392b}
.pill.warn{background:#fdf3d7;color:#8a6d1e}
.pill.info{background:#e3f0fb;color:#1d5f9e}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;padding:10px 4px 0}
.bar{flex:1;background:linear-gradient(180deg,var(--teal),#1f8fc0);border-radius:5px 5px 0 0;position:relative;min-width:14px}
.bar em{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--mut);font-style:normal;white-space:nowrap}
.bar i{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:9.5px;color:var(--mut);font-style:normal;white-space:nowrap}
.qrbx{display:flex;gap:18px;align-items:center;background:#fff;border:1.5px dashed var(--gold);border-radius:13px;padding:16px}
@media print{
  body *{visibility:hidden}
  #printArea,#printArea *{visibility:visible}
  #printArea{position:absolute;left:0;top:0;width:100%}
}
.bill{font-family:'Courier New',monospace;font-size:11.5px;color:#000;background:#fff;max-width:760px;margin:0 auto;padding:18px;border:1px solid #ccc}
.bill .b-head{display:flex;gap:12px;align-items:center;border-bottom:2px solid #1f8fc0;padding-bottom:8px}
.bill .b-org{font-weight:800;font-size:14px;color:#1f8fc0}
.bill .b-band{background:#1f8fc0;color:#fff;text-align:center;font-weight:700;padding:3px;margin:8px 0;font-size:11px;letter-spacing:.5px}
.bill table{width:100%;border-collapse:collapse;margin:6px 0}
.bill th,.bill td{border:1px solid #999;padding:4px 6px;font-size:11px}
.bill .lbl{text-align:left}
.bill .b{font-weight:800}
.bill .b-sign{display:flex;justify-content:space-between;margin-top:34px;font-size:10.5px}
.bill .b-sign span{border-top:1px solid #333;padding-top:3px}
@media(max-width:760px){.hero h1{font-size:26px}footer .wrap{grid-template-columns:1fr}}



/* ---- বড়, রঙিন, প্রাসঙ্গিক ফ্লো-আইকন ---- */
.flow i.fi{width:54px;height:54px;border-radius:15px;margin-bottom:11px}
.flow i.fi svg{width:32px;height:32px;display:block}
.flow i.fi1{color:#fff;background:linear-gradient(160deg,#2aa7e8,#0b5a8f);border:1.5px solid #7fd4ff;box-shadow:0 4px 10px rgba(11,90,143,.35),0 0 0 3px rgba(42,167,232,.18),inset 0 1.5px 0 rgba(255,255,255,.45)}
.flow i.fi2{color:#fff;background:linear-gradient(160deg,#f5a623,#b96f04);border:1.5px solid #ffd98a;box-shadow:0 4px 10px rgba(185,111,4,.35),0 0 0 3px rgba(245,166,35,.18),inset 0 1.5px 0 rgba(255,255,255,.45)}
.flow i.fi3{color:#fff;background:linear-gradient(160deg,#9a63e0,#5b2d90);border:1.5px solid #d9b8ff;box-shadow:0 4px 10px rgba(91,45,144,.35),0 0 0 3px rgba(154,99,224,.18),inset 0 1.5px 0 rgba(255,255,255,.45)}
.flow i.fi4{color:#fff;background:linear-gradient(160deg,#f2b705,#b98400);border:1.5px solid #ffe896;box-shadow:0 4px 10px rgba(185,132,0,.4),0 0 0 3px rgba(242,183,5,.22),inset 0 1.5px 0 rgba(255,255,255,.5)}
.flow i.fi5{color:#fff;background:linear-gradient(160deg,#2fb56b,#1f8fc0);border:1.5px solid #9bf0b8;box-shadow:0 4px 10px rgba(31,143,192,.35),0 0 0 3px rgba(47,181,107,.18),inset 0 1.5px 0 rgba(255,255,255,.45)}
/* ===== work-flow animation v2 — এক চক্রে শক্তি → টাকা → দুই শাখা ===== */
/* সংযোগ রেখা: স্থির অবস্থাতেও মৃদু প্রবাহ */
.flow li:not(:last-child)::after{height:2px;border-radius:2px;top:26px;right:8px;width:calc(100% - 76px)}
.go .flow li:not(:last-child)::after{
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.5) 0 7px, rgba(255,255,255,.09) 7px 16px);
  background-size:32px 2px;
  animation:lineGrow .5s ease forwards, currentFlow 1.15s linear 2s infinite;
}
@keyframes currentFlow{from{background-position:0 0}to{background-position:32px 0}}

/* ---- ৫.৬ সেকেন্ডের চক্র: স্ফুলিঙ্গ ১→২→৩ নং রেখা, ৪ নং রেখায় সোনালি মুদ্রা, শেষে দুই শাখায় ঝলক ---- */
.flow li:not(:last-child)::before{
  content:"";position:absolute;top:22px;left:62px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 28%,#FFD5D0 55%,rgba(228,114,106,0) 75%);
  box-shadow:0 0 10px 2px rgba(255,213,208,.75);
  opacity:0;pointer-events:none;
}
.go .flow li:nth-child(1)::before{animation:leg1 5.6s linear 2.4s infinite}
.go .flow li:nth-child(2)::before{animation:leg2 5.6s linear 2.4s infinite}
.go .flow li:nth-child(3)::before{animation:leg3 5.6s linear 2.4s infinite}
/* ৪র্থ রেখায় স্ফুলিঙ্গ নয় — সোনালি মুদ্রা */
.go .flow li:nth-child(4)::before{
  width:12px;height:12px;top:20.5px;
  background:radial-gradient(circle,#fff8dd 0 22%,#F2B705 58%,rgba(242,183,5,0) 78%);
  box-shadow:0 0 12px 3px rgba(242,183,5,.8);
  animation:leg4 5.6s linear 2.4s infinite;
}
@keyframes leg1{0%{left:62px;opacity:0;transform:scale(.5)}2%{opacity:1;transform:scale(1)}
  16%{left:calc(100% - 15px);opacity:1}18%{opacity:0}100%{opacity:0}}
@keyframes leg2{0%,18%{left:62px;opacity:0;transform:scale(.5)}20%{opacity:1;transform:scale(1)}
  34%{left:calc(100% - 15px);opacity:1}36%{opacity:0}100%{opacity:0}}
@keyframes leg3{0%,36%{left:62px;opacity:0;transform:scale(.5)}38%{opacity:1;transform:scale(1)}
  52%{left:calc(100% - 15px);opacity:1}54%{opacity:0}100%{opacity:0}}
@keyframes leg4{0%,60%{left:62px;opacity:0;transform:scale(.5)}62%{opacity:1;transform:scale(1)}
  76%{left:calc(100% - 15px);opacity:1}78%{opacity:0}100%{opacity:0}}

/* আইকন: ঢোকার পপ + স্ফুলিঙ্গ পৌঁছালে স্পন্দন (চক্রের সাথে টাইম করা) */
.flow i{position:relative;overflow:hidden}
.go .flow i{animation:iconPop .55s cubic-bezier(.34,1.56,.64,1) both}
.go .flow li:nth-child(1) i{animation:iconPop .55s cubic-bezier(.34,1.56,.64,1) .25s both, gridGlow 5.6s linear 2.4s infinite}
.go .flow li:nth-child(2) i{animation:iconPop .55s cubic-bezier(.34,1.56,.64,1) .55s both, hit2 5.6s linear 2.4s infinite}
.go .flow li:nth-child(3) i{animation:iconPop .55s cubic-bezier(.34,1.56,.64,1) .85s both, hit3 5.6s linear 2.4s infinite}
.go .flow li:nth-child(4) i{animation:iconPop .55s cubic-bezier(.34,1.56,.64,1) 1.15s both, hit4 5.6s linear 2.4s infinite}
.go .flow li:nth-child(5) i{animation:iconPop .55s cubic-bezier(.34,1.56,.64,1) 1.45s both, hit5 5.6s linear 2.4s infinite}
@keyframes gridGlow{0%,1.5%{transform:scale(1);box-shadow:0 0 18px rgba(80,220,255,.95)}
  4%{transform:scale(1.12)}7%{transform:scale(1);box-shadow:0 0 4px rgba(255,213,208,.2)}
  96%{box-shadow:0 0 4px rgba(80,220,255,.2)}100%{box-shadow:0 0 18px rgba(80,220,255,.95)}}
@keyframes hit2{16%{transform:scale(1)}19%{transform:scale(1.14);box-shadow:0 0 16px rgba(255,190,80,.9)}23%{transform:scale(1);box-shadow:none}}
@keyframes hit3{34%{transform:scale(1)}37%{transform:scale(1.14);box-shadow:0 0 16px rgba(180,120,255,.9)}41%{transform:scale(1);box-shadow:none}}
/* বিল-ধাপ: স্ফুলিঙ্গ পৌঁছে টাকায় রূপ — সোনালি ঝলক + ঝিলিক */
@keyframes hit4{52%{transform:scale(1)}55%{transform:scale(1.18);box-shadow:0 0 16px rgba(242,183,5,.95)}60%{transform:scale(1);box-shadow:none}}
.flow li:nth-child(4) i::after{
  content:"";position:absolute;top:-40%;left:-70%;width:45%;height:180%;
  background:linear-gradient(105deg,transparent,rgba(255,232,150,.9),transparent);
  transform:skewX(-22deg);opacity:0;
}
.go .flow li:nth-child(4) i::after{animation:coinShine 5.6s linear 2.4s infinite}
@keyframes coinShine{0%,54%{left:-70%;opacity:0}57%{opacity:1}64%{left:120%;opacity:0}100%{opacity:0}}
@keyframes hit5{76%{transform:scale(1)}79%{transform:scale(1.16);box-shadow:0 0 18px rgba(70,220,140,.95)}84%{transform:scale(1);box-shadow:none}}
/* মিটারের ◷ কাঁটা: অবিরাম টিকটিক */
.go .flow li:nth-child(2) i{transform-origin:50% 52%}
/* শাখা: কাণ্ড গজানো + মুদ্রা পৌঁছালে দুই ডালে সোনালি বিন্দু-ঝলক */
.flow .fork .fk::before{transform:scaleY(0);transform-origin:top}
.go .flow .fork .fk::before{animation:stemGrow .45s ease 1.9s forwards}
@keyframes stemGrow{to{transform:scaleY(1)}}
.flow .fork u::before{transform:scaleX(0);transform-origin:left}
.go .flow .fork u::before{animation:lineGrow .35s ease forwards}
.go .flow .fork u:nth-child(1)::before{animation-delay:2.15s}
.go .flow .fork u:nth-child(2)::before{animation-delay:2.35s}
.flow .fork u{opacity:0;transform:translateX(-6px)}
.go .flow .fork u{animation:branchIn .45s ease forwards}
.go .flow .fork u:nth-child(1){animation-delay:2.2s}
.go .flow .fork u:nth-child(2){animation-delay:2.4s}
@keyframes branchIn{to{opacity:1;transform:none}}
.flow .fork u::after{
  content:"";position:absolute;left:2px;top:5px;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle,#fff8dd 0 25%,#F2B705 60%,rgba(242,183,5,0) 80%);
  box-shadow:0 0 9px 2px rgba(242,183,5,.8);opacity:0;
}
.go .flow .fork u:nth-child(1)::after{animation:twig1 5.6s linear 2.4s infinite}
.go .flow .fork u:nth-child(2)::after{animation:twig2 5.6s linear 2.4s infinite}
@keyframes twig1{78%{opacity:0;transform:scale(.4)}81%{opacity:1;transform:scale(1.15)}86%{opacity:0;transform:scale(.7)}100%{opacity:0}}
@keyframes twig2{80%{opacity:0;transform:scale(.4)}83%{opacity:1;transform:scale(1.15)}88%{opacity:0;transform:scale(.7)}100%{opacity:0}}
/* শাখার নামেও মুহূর্তের সোনালি আভা */
.go .flow .fork u:nth-child(1) em{animation:emGlow1 5.6s linear 2.4s infinite}
.go .flow .fork u:nth-child(2) em{animation:emGlow2 5.6s linear 2.4s infinite}
@keyframes emGlow1{78%{text-shadow:none}81%{text-shadow:0 0 8px rgba(242,183,5,.9);color:#FFE896}86%{text-shadow:none}}
@keyframes emGlow2{80%{text-shadow:none}83%{text-shadow:0 0 8px rgba(242,183,5,.9);color:#FFE896}88%{text-shadow:none}}
@media (prefers-reduced-motion:reduce){
  .go .flow li,.go .flow i,.go .flow li::after,.go .flow li::before,
  .go .flow .fork u,.go .flow .fork .fk::before,.go .flow .fork u::before,.go .flow .fork u::after,
  .go .flow .fork u em,.flow li:nth-child(4) i::after{animation:none !important;opacity:1 !important;transform:none !important;text-shadow:none !important}
}

/* ---- ফ্লো-অ্যানিমেশনের পটভূমি: হালকা সবুজ প্যানেল ---- */
.flow{background:linear-gradient(180deg,#dcf3e6,#c8e9d6);border:1px solid #a9cfe2;
  border-radius:16px;padding:24px 20px 20px;margin-top:28px;border-top:1px solid #a9cfe2;
  box-shadow:0 4px 18px rgba(14,62,86,.10)}
.flow b{color:#122c3d}
.flow span{color:#54657a}
/* সংযোগ রেখা ও প্রবাহ — সবুজে */
.go .flow li:not(:last-child)::after{
  background:repeating-linear-gradient(90deg,
    rgba(31,143,192,.55) 0 7px, rgba(31,143,192,.12) 7px 16px);
  background-size:32px 2px;
}
/* স্ফুলিঙ্গ — হালকা পটভূমিতে দৃশ্যমান টিল-সবুজ */
.flow li:not(:last-child)::before{
  background:radial-gradient(circle,#38aede 0 30%,#1f8fc0 58%,rgba(31,143,192,0) 78%);
  box-shadow:0 0 10px 2px rgba(56,174,222,.65);
}
.go .flow li:nth-child(4)::before{
  background:radial-gradient(circle,#fff3c4 0 22%,#e0a800 58%,rgba(224,168,0,0) 78%);
  box-shadow:0 0 12px 3px rgba(224,168,0,.75);
}
/* শাখা — গাঢ় সবুজ কাণ্ড-ডাল, পাঠযোগ্য লেখা */
.flow .fork .fk::before{background:rgba(31,143,192,.55)}
.flow .fork u::before{background:rgba(31,143,192,.65)}
.flow .fork u{color:#54657a}
.flow .fork em{color:#1f8fc0}
@keyframes emGlow1{78%{text-shadow:none}81%{text-shadow:0 0 8px rgba(224,168,0,.85);color:#b8860b}86%{text-shadow:none}}
@keyframes emGlow2{80%{text-shadow:none}83%{text-shadow:0 0 8px rgba(224,168,0,.85);color:#b8860b}88%{text-shadow:none}}
@media(max-width:960px){.flow{padding:18px 14px 14px}}

/* ---- টেবিল: হালকা সবুজ/লাল জেব্রা + ৩ডি অ্যাকশন বোতাম ---- */
.tbl thead th{background:linear-gradient(120deg,#0c3f27,#14663f);color:#fff;border-bottom:2px solid #0a3320;
  font-weight:700;letter-spacing:.2px}
.tbl thead th .hint,.tbl thead th small{color:#bfe0cd}
.tbl tbody tr:nth-child(odd){background:#eef8f1}
.tbl tbody tr:nth-child(even){background:#fdf6f5}
.tbl tbody tr:hover{background:#e2f2e7}
.tbl tbody tr:nth-child(even):hover{background:#f9ecea}
.tbl .btn.sm{border:0;border-radius:9px;padding:5px 12px 6px;font-weight:800;font-size:11.5px;cursor:pointer;
  transition:transform .08s,box-shadow .08s,filter .15s}
.tbl .btn.line.sm{color:#0b2d3f;background:linear-gradient(180deg,#7fd4f2 0%,#38aede 45%,#1f8fc0 100%);
  box-shadow:0 3px 0 #14618a,0 4px 8px rgba(20,120,170,.25),inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow:0 1px 0 rgba(255,255,255,.35)}
.tbl .btn.line.sm:hover{filter:brightness(1.07)}
.tbl .btn.line.sm:active{transform:translateY(2px);box-shadow:0 1px 0 #14618a,0 2px 4px rgba(20,120,170,.25)}
.tbl .btn.grn.sm{color:#fff;background:linear-gradient(180deg,#4fb9e4 0%,#1f8fc0 45%,#14618a 100%);
  box-shadow:0 3px 0 #0e5578,0 4px 9px rgba(20,120,170,.3),inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 0 rgba(0,0,0,.18)}
.tbl .btn.grn.sm:hover{filter:brightness(1.07)}
.tbl .btn.grn.sm:active{transform:translateY(2px);box-shadow:0 1px 0 #0e5578,0 2px 4px rgba(20,120,170,.3)}
/* ---- ১ম সারি: মিটার | পাশের কেপিআই ---- */
/*  align-items: STRETCH, as the prototype has it - not start.
    #dSide-এর কার্ডগুলোতে flex:1 1 0 আর min-height:0 আছে, তাই
    কলামটা নিজের উচ্চতা কনটেন্ট থেকে পেলে বেসিস-০ কার্ডগুলোর
    নিচের সীমাটুকুও উঠে যায় আর প্রতিটি কার্ড শূন্য উচ্চতায়
    মিশে যায় — অঙ্কগুলো DOM-এ থাকে, পর্দায় থাকে না।  stretch
    দিলে সারির পুরো উচ্চতা পায় আর flex ভাগ করে নেয়।  */
.toprow{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr);gap:14px;margin-top:16px;align-items:stretch}
/*  বাঁ কলাম: মিটার, তার নিচে পরামর্শ — প্রোটোটাইপের গঠন।  মিটার
    কলামের বাকি উচ্চতা নেয় যাতে ডান পাশের কার্ডগুলোর সঙ্গে নিচের
    কিনারা মেলে; নইলে দুই কলাম অসমান হয়ে ঝুলে থাকে।  */
.tleft{display:flex;flex-direction:column;gap:12px;min-width:0}
.tleft #dMeter{flex:1 1 auto;display:flex}
.tleft .meterw{width:100%;display:flex;flex-direction:column}
.tleft .m-lcd{flex:1 1 auto;justify-content:center}
/*  প্রোটোটাইপের ডান পাশ — লেবেল বাঁয়ে, অঙ্ক ডানে, একই বেসলাইনে।
    আগে এখানে লেবেলের নিচে অঙ্ক বসত; চোখকে তখন প্রতিটি কার্ডে দুবার
    নামতে হয়, আর পাশাপাশি অঙ্কগুলো আর এক রেখায় থাকে না।  */
#dSide{display:flex;flex-direction:column;gap:10px;justify-content:space-between}
#dSide .skpi{flex:1 1 0;min-height:0}
.skpi{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:13px 18px;
  box-shadow:0 1px 4px rgba(16,36,52,.05);
  display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.skpi .hint{font-size:12.5px;color:var(--muted);line-height:1.35;flex:1 1 auto;min-width:0}
.skpi .num{font-size:21px;font-weight:800;line-height:1.2;white-space:nowrap;flex:0 0 auto}
.skpi .num.due{color:#c0392b}
.skpi .num.ok{color:#1f8fc0}
/*  ঠিকানা-কার্ড দুই কলামে ভাঙে না — লেখা গোটা প্রস্থ নেয়।  */
.skpi.sprog{display:block}
@media(max-width:900px){.toprow{grid-template-columns:1fr}}
/* ---- মিটার-উইজেট (ওয়েস্ট জোন ঘরানা) ---- */
.meterw{position:relative;width:100%;margin:0;box-sizing:border-box;border-radius:20px;padding:14px 18px 12px;
  background:linear-gradient(165deg,#243447,#17222f 55%,#101821);
  box-shadow:0 14px 34px rgba(10,25,40,.35),inset 0 1px 0 rgba(255,255,255,.08);color:#dfe8f2}
.m-screw{position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#cfd8e2,#7d8a97 60%,#4a5866);box-shadow:inset 0 -1px 2px rgba(0,0,0,.5)}
.m-screw:before{content:'';position:absolute;left:1.5px;right:1.5px;top:4.5px;height:1.6px;background:#33404d;border-radius:1px;transform:rotate(38deg)}
.s1{top:8px;left:8px}.s2{top:8px;right:8px}.s3{bottom:8px;left:8px}.s4{bottom:8px;right:8px}
.m-head{display:flex;align-items:center;gap:10px;margin:0 6px 10px}
.m-head img{width:38px;height:38px;border-radius:50%;background:#fff;padding:2px}
.m-brand b{display:block;font-size:12.5px;letter-spacing:.3px}
.m-brand span{font-size:10.5px;color:#93a7bb;letter-spacing:.6px}
.m-serial{margin-left:auto;font-size:10.5px;background:#0d141c;border:1px solid #33455a;border-radius:7px;padding:4px 9px;color:#aebfd2;letter-spacing:1px}
.m-lcd{position:relative;background:linear-gradient(180deg,#0c1a10,#0a150d);border-radius:12px;
  border:1px solid #24402c;box-shadow:inset 0 3px 14px rgba(0,0,0,.7);padding:10px 14px 8px}
.m-lcd{cursor:pointer}
.m-lcd.sw .dig,.m-lcd.sw .unit{opacity:.12;transition:opacity .12s}
.m-lcd .dig,.m-lcd .unit{transition:opacity .18s}
.m-code{display:flex;align-items:center;gap:8px;font-size:10px;color:#5f9a76;letter-spacing:1.5px}
.m-code span{font-family:'Consolas',monospace;font-weight:700;color:#8fe6b4;background:#12291a;border:1px solid #1f4a2e;border-radius:5px;padding:1px 7px}
.m-code em{font-style:normal;color:#6faf87}
.m-dots{position:absolute;right:12px;bottom:8px;display:flex;gap:4px}
.m-dots i{width:5.5px;height:5.5px;border-radius:50%;background:#254a33;display:block}
.m-dots i.on{background:#4ef29a;box-shadow:0 0 6px rgba(70,240,150,.7)}
.m-units{display:flex;align-items:baseline;gap:10px;justify-content:center}
.m-units .dig{font-family:'Consolas','Courier New',monospace;font-size:34px;font-weight:700;letter-spacing:7px;
  color:#4ef29a;text-shadow:0 0 8px rgba(70,240,150,.55),0 0 22px rgba(70,240,150,.25)}
.m-units .unit{font-size:13px;color:#7ddba6;font-weight:700}
.m-sub{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:4px;font-size:11px;color:#7fb995}
.m-sub b{color:#b9f4d2;font-weight:700}
.m-sub b.bad{color:#ff8f7a;text-shadow:0 0 8px rgba(255,90,60,.5)}
.m-sanc{font-style:normal;color:#5f8a72;font-size:10px}
.m-led{position:absolute;right:12px;top:10px;width:8px;height:8px;border-radius:50%;background:#ff5240;
  box-shadow:0 0 8px 2px rgba(255,70,40,.8);animation:ledBlink 1.6s infinite}
@keyframes ledBlink{0%,88%{opacity:1}92%,100%{opacity:.15}}
.m-foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:11px}
.m-cell{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:7px 10px}
.m-cell small{display:block;font-size:10px;color:#8ea2b6;margin-bottom:2px}
.m-cell b{font-size:13px;color:#f2f6fa}
.m-pill{font-size:11px;font-weight:700;border-radius:999px;padding:2px 10px;display:inline-block}
.m-pill.ok{background:#123f2a;color:#5df0a5}.m-pill.wn{background:#4a3a10;color:#ffd66b}.m-pill.dw{background:#4a1712;color:#ff9c8a}
.m-act{display:flex;align-items:center;gap:8px;background:transparent;border:0;padding:4px 0}
.m-act .m-btn{flex:1;min-width:0;padding-left:6px;padding-right:6px}
/* ৩ডি বোতাম — উঁচু বেভেল, চাপলে দেবে যায় */
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;box-sizing:border-box;white-space:nowrap;
  font-size:11.5px;font-weight:800;cursor:pointer;
  border-radius:10px;padding:5px 11px 6px;letter-spacing:.2px;border:0;position:relative;
  color:#0b2d3f;background:linear-gradient(180deg,#7fd4f2 0%,#38aede 45%,#1f8fc0 100%);
  box-shadow:0 3px 0 #14618a,0 5px 10px rgba(20,120,170,.3),inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow:0 1px 0 rgba(255,255,255,.35);transition:transform .08s,box-shadow .08s,filter .15s}
.m-btn svg{width:12px;height:12px}
.m-btn:hover{filter:brightness(1.07)}
.m-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #14618a,0 3px 6px rgba(20,120,170,.3),inset 0 1px 0 rgba(255,255,255,.5)}
.m-btn.solid{color:#fff;background:linear-gradient(180deg,#4fb9e4 0%,#1f8fc0 45%,#14618a 100%);
  box-shadow:0 3px 0 #0e5578,0 5px 11px rgba(20,120,170,.35),inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 0 rgba(0,0,0,.18)}
.m-btn.solid:active{transform:translateY(2px);box-shadow:0 1px 0 #0e5578,0 3px 6px rgba(20,120,170,.35),inset 0 1px 0 rgba(255,255,255,.4)}
@media(prefers-reduced-motion:reduce){.m-btn,.m-btn:active{transition:none;transform:none}}
@media(max-width:560px){.m-act{justify-content:flex-start}}
@media(min-width:900px){
  .m-units .dig{font-size:42px;letter-spacing:9px}
}
@media(max-width:560px){.m-units .dig{font-size:26px;letter-spacing:5px}}
@media(prefers-reduced-motion:reduce){.m-led{animation:none}}
/* ---- ১ম পেজের গ্রাফ-গ্রিড (রেফারেন্স-কার্ড স্টাইল) ---- */
.charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
@media(max-width:1024px){.charts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.charts{grid-template-columns:1fr}}
.chart-card{background:#fff;border:1px solid var(--rule);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 5px rgba(16,36,52,.06);transition:transform .18s,box-shadow .18s}
.chart-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,62,86,.12)}
.chart-card .ch-h{display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--accbg,#e9f3f9);border-bottom:1px solid var(--rule)}
.chart-card .ch-ic{width:34px;height:34px;flex:none;border-radius:10px;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(16,44,62,.12)}
.chart-card .ch-ic svg{width:19px;height:19px;display:block}
.chart-card .ch-t{display:flex;flex-direction:column;min-width:0}
.chart-card .ch-t small{font-size:10.5px;font-weight:700;letter-spacing:.4px;color:var(--acc,var(--brand))}
.chart-card .ch-t b{font-size:13.5px;color:#16233b;line-height:1.25}
.chart-card .ch-b{padding:8px 10px 6px}
/*  কার্ডের নিজস্ব ডাউনলোড — গৌণ কাজ, তাই গৌণ চেহারা।  গ্রিডের
    নিচে সাতটা বোতামের সারি ছিল, প্রোটোটাইপে যার কোনো অস্তিত্ব নেই।  */
.ch-dl{margin:0;padding:0 10px 10px;text-align:right}
.ch-dl button{border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--muted);padding:3px 6px;border-radius:7px}
.ch-dl button:hover{background:var(--brand-soft);color:var(--brand)}
.chart-card svg text{font-family:inherit}
/*  কিছু দেখানোর না থাকলে জায়গাটা ফাঁকা ছেড়ে দেওয়া যায় না।
    ছাড় হওয়া বিল নেই এমন গ্রাহকের পাতায় মিটার-কার্ড আর পুরো
    লেখচিত্রের গ্রিড নিঃশব্দে উধাও হত — পাতায় একটা গর্ত থাকত আর
    গ্রাহক বুঝতেন না কিছু ভাঙা, নাকি সত্যিই কিছু নেই।
    .lps-zero-এর চেহারাই ধার করা, কারণ ওটাই এই পোর্টালের
    "কিছু নেই, এবং সেটাই খবর" বলার ভঙ্গি।  */
.nodata{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:170px;gap:7px;padding:18px;
  background:#fff;border:1px solid var(--rule);border-radius:16px;
  box-shadow:0 1px 5px rgba(16,36,52,.06)}
.nodata span{width:46px;height:46px;border-radius:50%;background:#e9f3f9;color:#1f8fc0;
  font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 2px #bcdcee}
.nodata b{font-size:14px;color:var(--ink)}
.nodata i{font-style:normal;font-size:12px;color:var(--muted);max-width:46ch;line-height:1.6}
.lps-zero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:150px;gap:6px;padding:10px}
.lps-zero span{width:44px;height:44px;border-radius:50%;background:#e7f5ec;color:#1f8fc0;font-size:24px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px #bfe3cd}
.lps-zero b{font-size:13.5px;color:#1f8fc0}
.lps-zero i{font-style:normal;font-size:11.5px;color:var(--muted)}
/* টাইপ-বাছাই: সক্রিয়টা ভরাট+লেবেল, বাকিরা রঙিন আইকন-বাক্স */
.ch-seg{margin-left:auto;display:inline-flex;gap:5px}
.ch-seg a,
.ch-seg button{border:1.4px solid #e3d9c8;background:#fff;border-radius:9px;min-width:30px;height:34px;
  text-decoration:none;color:inherit;
  cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px 6px}
.ch-seg svg{width:14px;height:14px}
.ch-seg i{font-style:normal;font-size:9px;font-weight:700;line-height:1}
.ch-seg .t-bars svg rect{fill:#2e86c1}
.ch-seg .t-pie .pf1{fill:#e8a020}.ch-seg .t-pie .pf2{fill:#f6c96b}
.ch-seg .t-line svg path{stroke:#d24a3f;fill:none}
.ch-seg a.on,
.ch-seg button.on{background:#2e86c1;border-color:#2e86c1;color:#fff;min-width:44px}
.ch-seg a.on svg rect,
.ch-seg button.on svg rect{fill:#fff}
.ch-seg a.on .pf1,
.ch-seg button.on .pf1{fill:#fff}
.ch-seg a.on .pf2,
.ch-seg button.on .pf2{fill:#ffffffb0}
.ch-seg a.on svg path,
.ch-seg button.on svg path{stroke:#fff}
/*  নিষ্ক্রিয় বোতামের লেবেল লুকানো — সক্রিয়টিই কেবল নাম দেখায়,
    প্রোটোটাইপে যেমন: তিনটিতে নাম থাকলে শিরোনামের জায়গা থাকে না।  */
.ch-seg a i{display:none}
.ch-seg a.on i{display:block}
.ch-seg a:hover{border-color:#2e86c1}
@keyframes grUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes grL{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.chart-card .grx{transform-origin:left;transform-box:fill-box;animation:grL .7s cubic-bezier(.2,.8,.3,1) both}
@media(prefers-reduced-motion:reduce){.chart-card .grx{animation:none}}
@keyframes gaIn{from{opacity:0}to{opacity:1}}
.chart-card .gr{transform-origin:bottom;transform-box:fill-box;animation:grUp .6s cubic-bezier(.2,.8,.3,1) both}
.chart-card .gl{stroke-dasharray:900;stroke-dashoffset:900;animation:glDraw 1.1s ease-out forwards}
@keyframes glDraw{to{stroke-dashoffset:0}}
.chart-card .ga{animation:gaIn .9s .3s ease both}
@media(prefers-reduced-motion:reduce){.chart-card .gr,.chart-card .gl,.chart-card .ga{animation:none;stroke-dashoffset:0}}
/* ---- DCC আসল বিল-কপি লেআউট ---- */
.dcc{font-family:'IBM Plex Sans','Segoe UI','Noto Sans Bengali','Nirmala UI',Arial,sans-serif;
  font-size:12px;color:#111;background:#fdfaf3;font-variant-numeric:tabular-nums;
  max-width:800px;margin:0 auto;padding:16px 18px;border:1px solid #ccc;border-radius:8px;
  box-shadow:0 1px 6px rgba(0,0,0,.06)}
.dcc-h{display:flex;gap:12px;align-items:center;justify-content:center;text-align:center;margin-bottom:8px}
.dcc-h img{width:64px;height:64px;object-fit:contain}
.dcc-h .t1{color:#1743c4;font-weight:700;font-size:18px;letter-spacing:.3px;font-family:'IBM Plex Serif','IBM Plex Sans',serif}
.dcc-h .t2{color:#c4128f;font-weight:700;font-size:13px;letter-spacing:1.6px}
.dcc-h .t3{font-weight:800;font-size:12px}
.dcc table.g{width:100%;border-collapse:collapse;margin-top:6px}
.dcc table.g th,.dcc table.g td{border:1px solid #c9a5b4;padding:3.5px 7px;font-family:inherit;font-size:11.5px}
.dcc table.g th{background:#f6d9e4;font-weight:700;text-align:left;color:#5a2340}
.dcc table.g td{color:#16233b}
.dcc table.g td.r{font-weight:600}
.dcc .c{text-align:center}
.dcc .r{text-align:right}
.dcc .payto{border:1px solid #333;margin-top:6px;padding:8px 10px;position:relative;min-height:86px}
.dcc .sig{position:absolute;right:14px;bottom:8px;text-align:center;font-size:11px}
@media(max-width:640px){.dcc{font-size:10px}.dcc table.g th,.dcc table.g td{font-size:10px;padding:2.5px 4px}}

/* ---- ৪-কালার বিল সেকশন ---- */
.dcc table.s1 th{background:#dbeafe;color:#12407a}
.dcc table.s1 th,.dcc table.s1 td{border-color:#a9c6ea}
.dcc table.s2 th{background:#d7f0e2;color:#135a37}
.dcc table.s2 th,.dcc table.s2 td{border-color:#a6d6bd}
.dcc table.s3 th{background:#fdeccc;color:#7a4c0d}
.dcc table.s3 th,.dcc table.s3 td{border-color:#e7c98f}
.dcc table.s4 th{background:#f6d9e4;color:#7a1f4d}
.dcc table.s4 th,.dcc table.s4 td{border-color:#dfaec4}
.dcc .payto.s4{border-color:#dfaec4;background:#fdf4f8}
.modal.wide{max-width:860px;width:96vw}
.modal.wide .bd{max-height:82vh;overflow:auto;background:#ece9e1;padding:14px}
/* ---- বিলের নিচের ক্রেডিট লাইন ---- */
.dcc-cred{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;
  margin-top:8px;padding-top:7px;border-top:1px dashed #c9a5b4;font-size:10.5px;color:#5b6b83}
.dcc-cred b{color:#16233b;font-weight:600}
.dcc-cred .sep{color:#c9a5b4;flex:1;text-align:center;max-width:30px}
@media(max-width:640px){.dcc-cred{font-size:9px}}
body.pbill>*:not(#mBill){display:none!important}
body.pbill{background:#fff}
body.pbill #mBill{display:block!important;position:static!important;transform:none!important;
  left:auto;top:auto;width:auto;max-width:none;box-shadow:none;border-radius:0;background:#fff}
body.pbill #mBill .hd{display:none}
body.pbill #mBill .bd{max-height:none!important;overflow:visible!important;background:#fff!important;padding:0!important}
@media print{
  /* এক পাতার A4 কম্প্যাক্ট বিল */
  @page{size:A4;margin:9mm}
  .noprint{display:none!important}
  .dcc{border:none;box-shadow:none;border-radius:0;background:#fff;max-width:none;padding:0;font-size:11.5px}
  .dcc-h{margin-bottom:6px;gap:10px}
  .dcc-h img{width:60px;height:60px}
  .dcc-h .t1{font-size:17px}
  .dcc-h .t2{font-size:12.5px;letter-spacing:1.5px}
  .dcc-h .t3{font-size:11.5px}
  .dcc table.g{margin-top:5px}
  .dcc table.g th,.dcc table.g td{font-size:10.6px;padding:2.7px 7px}
  .dcc .payto{margin-top:5px;padding:7px 10px;min-height:62px;font-size:10.6px}
  .dcc .sig{font-size:10.5px;bottom:7px}
  .dcc-cred{margin-top:7px;padding-top:6px;font-size:10px}
  .dcc table.g tr{page-break-inside:avoid}
  .dcc .payto,.dcc-cred{page-break-inside:avoid}
}

/* ------------------------------------------------------------------
   Print - the parts the prototype's own print block does not cover
   because the prototype had no server-rendered chrome.

   EH-111 to EH-118. Print styles are part of the deliverable, not an
   afterthought: this is the page an accounts department puts beside
   the paper bill.

   EH-119. There is no PDF library in this project and there must not
   be. PDF comes from the browser's own Save as PDF, which uses these
   rules: vector, selectable, correct in Bengali conjuncts, and small.
   A rasterising library adds about a megabyte, breaks the conjuncts
   and makes the output unsearchable.
   ------------------------------------------------------------------ */
@media print {
  /* Declared twice on purpose: browsers differ over which form they
     honour, and the paper size is the reader's anyway - CSS can only
     propose. */
  @page { size: A4 portrait; size: 210mm 297mm; margin: 12mm }

  /* Without this the browser drops background colours to save ink and
     the coloured bands print white, which is the one thing that makes
     a printed bill stop looking like the bill. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact }

  /* An absolute millimetre width on body breaks the moment the paper
     is Letter. The page decides the width; the content stays inside
     it. */
  html, body { width: auto; max-width: 100%; margin: 0; padding: 0;
               background: #fff; color: #000; overflow: visible }

  /* EH-115. Chrome, navigation, toolbars, modals and buttons go. */
  .lnav, .tabs, .lfoot, .lwhat, .lnote, .lhero, .toolbar, .scrim,
  .modal .hd, .auth, .langseg, .btn, .m-act, .ch-switch, .pager,
  .noprint { display: none !important }

  .modal { position: static !important; transform: none !important;
           box-shadow: none !important; border: 0 !important;
           max-height: none !important; width: auto !important }
  .modal .bd { overflow: visible !important; max-height: none !important }

  .wrap, .lw { padding: 0 !important; margin: 0 !important;
               max-width: 100% !important; width: auto !important }

  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid }

  /* EH-117. Rows do not split and headers repeat, so a ledger running
     to a second sheet is still readable on the second sheet. */
  tr    { break-inside: avoid; page-break-inside: avoid }
  thead { display: table-header-group }
  tfoot { display: table-footer-group }

  /* Tables scroll on screen (EH-140); on paper there is nowhere to
     scroll to, so the container must not clip. */
  .card[style*="overflow"], .tbl-scroll { overflow: visible !important }

  /* EH-116. The consumer's name and number at the top of every printed
     report. Two printed reports on a desk are otherwise
     indistinguishable, and an accounts office prints several. */
  .printhead { display: block !important }

  a[href]:after { content: "" }   /* URLs after link text help nobody here */
}

/* On screen the print header is redundant - the dashboard already
   names the consumer - so it exists only for paper. */
.printhead { display: none }

/* ------------------------------------------------------------------
   Charts. EH-85: server-rendered SVG, no library, no canvas.
   ------------------------------------------------------------------ */
.ch-card { background: #fff; border: 1px solid var(--line, #dfeae5);
           border-radius: 12px; padding: 14px 16px; margin-bottom: 14px }
.ch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
           margin-bottom: 8px }
.ch-head b { font-size: 14.5px }
.ch-switch { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap }
.ch-switch a { font-size: 12px; padding: 4px 10px; border-radius: 999px;
               border: 1px solid var(--line, #dfeae5); color: var(--mut, #5b7a70);
               text-decoration: none }
.ch-switch a.on { background: var(--brand, #1f8fc0); border-color: var(--brand, #1f8fc0);
                  color: #fff; font-weight: 700 }
.ch-legend { list-style: none; display: flex; gap: 14px; flex-wrap: wrap;
             margin: 8px 0 0; padding: 0; font-size: 12px;
             color: var(--mut, #5b7a70) }
.ch-legend i { display: inline-block; width: 10px; height: 10px;
               border-radius: 2px; margin-right: 5px; vertical-align: -1px }

/* EH-86. The table beneath every chart carries the same numbers. A
   chart cannot be reconciled against a ledger; a table can. It is a
   <details> so it does not crowd the page, and it is open when
   printing because that is when the numbers are wanted. */
.ch-data { margin-top: 10px; font-size: 12.5px }
.ch-data summary { cursor: pointer; color: var(--mut, #5b7a70) }
.ch-data table { width: 100%; border-collapse: collapse; margin-top: 8px }
.ch-data th, .ch-data td { border-bottom: 1px solid var(--line, #dfeae5);
                           padding: 5px 8px; text-align: right }
.ch-data th:first-child, .ch-data td:first-child { text-align: left }
@media print { .ch-data { display: block } .ch-data > table { display: table } }

/* EH-140. Usable at 360px: tables scroll sideways rather than
   squashing the figures, and the charts fall back to one column. */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }
@media (max-width: 700px) {
  .charts { grid-template-columns: 1fr !important }
  .toprow { grid-template-columns: 1fr !important }
}