/* ============================================================
   LinkBill Customer Portal — stylesheet
   ------------------------------------------------------------
   Copied unchanged from docs/Utility_customer_portal.html
   (the <style> block, lines 17-901). The prototype is binding
   for layout and wording, so this file is a copy and not a
   rewrite: a class renamed here is a page that no longer
   matches the reference implementation.

   The one addition is the @font-face block below. The prototype
   pulled Hind Siliguri from fonts.googleapis.com; the BPDB
   network blocks it, and when it did the page fell back
   silently and Bengali glyphs started drawing the numbers.
   Rule 7 of CLAUDE.md and CP-8: nothing is served from a CDN.
   ============================================================ */

/*  Self-hosted, because Google Fonts is unreachable from inside
    BPDB. Drop the four woff2 files into public/fonts/ and the
    page uses them; until they are there the src fails quietly
    and the system Bengali stack in --bn takes over, which is
    the same fallback the prototype documented. Either way no
    request leaves the network.  */
@font-face{
  font-family:'Hind Siliguri';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/hind-siliguri-400.woff2') format('woff2');
}
@font-face{
  font-family:'Hind Siliguri';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/hind-siliguri-500.woff2') format('woff2');
}
@font-face{
  font-family:'Hind Siliguri';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/hind-siliguri-600.woff2') format('woff2');
}
@font-face{
  font-family:'Hind Siliguri';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/hind-siliguri-700.woff2') format('woff2');
}

/*  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:#12261D;
  --green:#0B5C3E;        /* বিলের শিরোনামের সবুজ */
  --green-deep:#07422C;
  --green-mid:#12784F;
  --green-soft:#E7F1EB;
  --coral:#E4726A;        /* ছকের পট্টির স্যামন */
  --coral-soft:#FBEAE8;
  --coral-line:#F0BDB8;
  --navy:#1B3A52;         /* বড় অঙ্কের জন্য — সবুজ আয় বোঝায়, তাই আলাদা */
  --gold:#D9A322;         /* হিরোর প্রধান কাজ — গাঢ় সবুজে সবচেয়ে স্পষ্ট */
  --gold-deep:#9C6E0C;
  --rule:#C9D8D0;
  --rule-soft:#E4EDE8;
  --paper:#FFFFFF;
  --surround:#EFF4F1;
  --muted:#5D6E66;
  --due:#B3312A;
  --credit:#0B5C3E;
  --amber:#8A6212;
  /*  বাংলা: 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(--green)}
button{font:inherit;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--green);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(--green-deep)}
.lnav .nm span,.top .nm span{font-size:12.5px;color:var(--muted)}
/*  ভাষা বদল — গ্রাহকেরা বিতরণ কোম্পানির হিসাব শাখা; কেউ বাংলায়
    স্বচ্ছন্দ, কেউ ইংরেজিতে, আর বিলের কারিগরি শব্দ (net PDB, AIT,
    LPS) ইংরেজিতেই চলে। তাই দুটোই রাখা।  */
.langseg{
  display:inline-flex;background:#E4EDE8;border:1px solid var(--rule);
  border-radius:999px;padding:3px;gap:2px;margin-left:14px;
  box-shadow:inset 0 2px 4px rgba(11,92,62,.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(--green-deep)}
/*  চাপা অবস্থার ভেতরে বেছে নেওয়াটি উঠে আসে — কোনটি সক্রিয় তা
    রঙের আগে আকৃতিতেই বোঝা যায়  */
.langseg button.on{
  background:linear-gradient(180deg,#17845A,var(--green));color:#fff;
  box-shadow:0 2px 0 var(--green-deep), 0 3px 6px rgba(11,92,62,.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%,#0B5C3E 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(217,163,34,.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(217,163,34,.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{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:center;justify-content:center;padding:22px 16px;overflow-y:auto;
  /*  পেছনের পাতা চেনা যাওয়া দরকার — গ্রাহক যেন বোঝেন তিনি কোন
      পাতায় পরিচয় দিচ্ছেন। বেশি ঝাপসা হলে সেই সংযোগটুকু হারায়।  */
  background:rgba(5,51,34,.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,#FBFDFC);
  border-top:3px solid var(--coral);border-radius:16px;
  padding:26px 26px 22px;color:var(--ink);position:relative;
  box-shadow:0 2px 4px rgba(5,51,34,.16),
             0 8px 18px rgba(5,51,34,.22),
             0 28px 64px rgba(5,51,34,.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(--green-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(--green);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(--green-soft);color:var(--green)}
.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(11,92,62,.06),
             0 3px 6px rgba(11,92,62,.07),
             0 10px 20px rgba(11,92,62,.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(11,92,62,.07),
             0 6px 12px rgba(11,92,62,.10),
             0 18px 34px rgba(11,92,62,.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(11,92,62,.06),
             0 4px 8px rgba(11,92,62,.07),
             0 12px 24px rgba(11,92,62,.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(--green-mid),var(--green-deep));
  box-shadow:0 2px 0 #052E1F, 0 4px 9px rgba(5,51,34,.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(--green),var(--green-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(11,92,62,.10);
}
.f input:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px var(--green-soft)}
/*  বোতামের উচ্চতা নিচের গাঢ় প্রান্ত থেকে আসে — চাপলে সেটি ছোট হয়ে
    আসে আর বোতাম নিচে বসে যায়। ছায়া নয়, প্রান্তই পুরুত্ব বোঝায়,
    তাই মুদ্রিত বিলের মতো পরিচ্ছন্ন থাকে।  */
.btn{
  padding:10px 18px;border:1px solid var(--rule);background:#fff;
  color:var(--green);cursor:pointer;border-radius:10px;position:relative;
  box-shadow:0 3px 0 #D7E3DC, 0 4px 8px rgba(11,92,62,.10);
  transition:transform .1s, box-shadow .1s, background .16s;
}
.btn:hover{background:var(--green-soft);box-shadow:0 3px 0 #C6D6CD, 0 6px 14px rgba(11,92,62,.16)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 #C6D6CD, 0 1px 3px rgba(11,92,62,.18)}
.btn.pri{
  background:linear-gradient(180deg,#17845A,var(--green));color:#fff;
  border-color:transparent;
  box-shadow:0 3px 0 var(--green-deep), 0 5px 12px rgba(11,92,62,.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(--green-deep), 0 8px 18px rgba(11,92,62,.40),
             inset 0 1px 0 rgba(255,255,255,.28)}
.btn.pri:active{transform:translateY(3px);
  box-shadow:0 0 0 var(--green-deep), 0 1px 4px rgba(11,92,62,.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}
/*  ল্যান্ডিং ও ভেতরের হেডার এক চেহারায় — লগইনের পরে বার বদলে গেলে
    মনে হয় অন্য সাইটে চলে এসেছি। তাই .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(--green-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,#0B5C3E 46%,#07422C);
  box-shadow:0 2px 3px rgba(5,51,34,.18),
             0 8px 16px rgba(5,51,34,.22),
             0 20px 40px rgba(5,51,34,.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(217,163,34,.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{
  display:flex;gap:4px;margin-bottom:20px;overflow-x:auto;padding:4px;
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  box-shadow:0 1px 2px rgba(11,92,62,.05);
}
.tab{
  padding:9px 16px;border:0;background:none;color:var(--muted);cursor:pointer;
  white-space:nowrap;font-size:14.5px;border-radius:9px;transition:.16s;
}
.tab:hover{color:var(--green-deep);background:var(--green-soft)}
.tab[aria-current="true"]{
  color:#fff;font-weight:600;
  background:linear-gradient(180deg,#17845A,var(--green));
  box-shadow:0 2px 0 var(--green-deep), 0 3px 7px rgba(11,92,62,.28),
             inset 0 1px 0 rgba(255,255,255,.2);
}

/* ---------- 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(11,92,62,.05),
             0 3px 7px rgba(11,92,62,.06),
             0 10px 20px rgba(11,92,62,.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:#F7FAF8}
tfoot td{font-weight:600;border-top:1px solid var(--rule);border-bottom:0;background:#F7FAF8}
.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(11,92,62,.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(--green-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(--green);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(--green);outline:none;box-shadow:0 0 0 3px var(--green-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:#F7FAF8;
  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(--green)}
.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:#F7FAF8;font-weight:600;border-top:1px solid var(--rule)}
.line.grand{background:var(--green-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}
}