/* ═══════════════════════════════════════════════════════════════════════ nds_pstudio.css — প্রিন্ট স্টুডিও (রিপোর্ট তৈরির ক্যানভাস) রুট: #/pstudio · সব ক্লাস psx- দিয়ে শুরু (কোথাও সংঘর্ষ নেই) নিয়ম: compact · সব বোতাম gradient · shadow সবসময় নীলচে · corner ছোট (3px) এক সারির সব কন্ট্রোল একই উচ্চতা (--ph) → নিখুঁত horizontal align ═══════════════════════════════════════════════════════════════════════ */ /* ⚠️ মডাল -তে বসে, .psx-এর ভেতরে নয় — তাই টোকেন দুই জায়গাতেই দিতে হয়, নইলে মডালের ঘরগুলো `--ph` না পেয়ে আলাদা উচ্চতায় বসে আর সারি এলোমেলো হয়। */ .psx,.psx-mask{ --ph:32px; /* এক সারির প্রতিটি কন্ট্রোলের উচ্চতা */ --bd:#dbe6f7; --mut:#64748b; --hint:#94a3b8; --ink:#0f172a; --bg:#f2f6fd; --pri:#2563eb; } .psx{display:flex; flex-direction:column; gap:6px; width:100%; min-height:calc(100vh - 190px)} /* ⚠️ `.psx-paper`-ও আলাদা করে ধরতে হয়: PDF/PNG/HTML এক্সপোর্টে কাগজের ক্লোন `.psx`-এর **বাইরে** বসে (SVG foreignObject / স্বতন্ত্র HTML ফাইল)। তখন এই রিসেট না পেলে `.psx-sheet`-এর `width:100%` + `padding:12mm` content-box হিসাবে ২৩৪mm হয়ে যেত — ডান ও নিচের মার্জিন কেটে বাদ পড়ত (ফোন/ইমেইল/কম্পাস অর্ধেক কাটা)। পর্দায় ঠিক দেখাত বলে ধরা পড়ছিল না। */ .psx *,.psx-mask *,.psx-paper,.psx-paper *{margin:0; box-sizing:border-box} /* ───────── টপ বার ───────── */ .psx-bar{ display:flex; align-items:center; gap:5px; flex-wrap:nowrap; width:100%; padding:5px 7px; background:#fff; border-radius:4px; box-shadow:0 2px 10px rgba(37,99,235,.14); } .psx-logo{display:flex; align-items:center; gap:6px; flex:0 0 auto; padding-right:6px; border-right:1px solid var(--bd)} .psx-logo i{width:26px; height:26px; display:grid; place-items:center; border-radius:4px; color:#fff; background:linear-gradient(135deg,#2563eb,#3b82f6); box-shadow:0 2px 7px rgba(37,99,235,.4); font-size:12px} .psx-logo b{font-size:13px; line-height:1.05; color:var(--ink); white-space:nowrap} .psx-logo small{display:block; font-size:9px; color:var(--hint); font-weight:400} .psx-name{ flex:1 1 120px; min-width:80px; height:var(--ph); padding:0 8px; font:600 12.5px/1 inherit; color:var(--ink); background:#fff; border:1px solid var(--bd); border-radius:3px; box-shadow:0 1px 4px rgba(37,99,235,.1); } .psx-name::placeholder{color:var(--hint); font-weight:400} .psx-name:focus{outline:0; border-color:var(--pri); box-shadow:0 0 0 2px rgba(37,99,235,.16)} .psx-bgrp{display:flex; align-items:center; gap:4px; flex:0 0 auto} /* বোতাম — সবসময় gradient · idle-এও রঙিন · hover-এ জোরালো zoom */ .psx-b{ display:inline-flex; align-items:center; justify-content:center; gap:5px; box-sizing:border-box; height:var(--ph); min-width:var(--ph); padding:0 9px; border:0; border-radius:3px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:700; line-height:1; color:#fff; background:linear-gradient(135deg,#2563eb,#3b82f6); box-shadow:0 2px 8px rgba(37,99,235,.38); transition:transform .2s cubic-bezier(.2,.8,.3,1.4), box-shadow .2s ease, filter .2s ease; white-space:nowrap; } .psx-b:hover{transform:scale(1.14) translateY(-1px); box-shadow:0 8px 20px rgba(37,99,235,.55); filter:brightness(1.08)} .psx-b:active{transform:scale(1.04)} .psx-b.gy{background:linear-gradient(135deg,#475569,#64748b); box-shadow:0 2px 8px rgba(71,85,105,.34)} .psx-b.ok{background:linear-gradient(135deg,#047857,#10b981); box-shadow:0 2px 8px rgba(5,150,105,.4)} .psx-b.dg{background:linear-gradient(135deg,#b91c1c,#ef4444); box-shadow:0 2px 8px rgba(220,38,38,.4)} .psx-b.wn{background:linear-gradient(135deg,#b45309,#f59e0b); box-shadow:0 2px 8px rgba(180,83,9,.36)} .psx-b[disabled]{opacity:.4; pointer-events:none} .psx-b .n{display:inline} .psx-badge{ position:absolute; top:-5px; right:-5px; min-width:15px; height:15px; padding:0 3px; display:grid; place-items:center; border-radius:8px; font-size:9px; font-weight:800; color:#fff; background:linear-gradient(135deg,#1d4ed8,#3b82f6); box-shadow:0 1px 4px rgba(37,99,235,.5); } .psx-wrapb{position:relative; display:inline-flex; gap:1px} .psx-sp{flex:1 1 auto; min-width:0} /* প্রিন্ট + ▾ = জোড়া বোতাম; ভেতরের কিনারা সোজা, বাইরেরটা গোল */ .psx-b.spl{border-radius:3px 0 0 3px} .psx-b.car{border-radius:0 3px 3px 0; min-width:20px; width:20px; padding:0} .psx-b.spl:hover,.psx-b.car:hover{transform:scale(1.06) translateY(-1px)} /* জোড়া বলে কম zoom */ .psx-menu{ position:absolute; top:calc(100% + 4px); right:0; z-index:60; min-width:168px; display:flex; flex-direction:column; padding:4px; background:#fff; border-radius:4px; box-shadow:0 10px 28px rgba(37,99,235,.4); animation:psxIn .14s ease; } .psx-menu[hidden]{display:none} .psx-menu button{ display:flex; align-items:center; gap:7px; height:30px; padding:0 9px; border:0; border-radius:3px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:700; color:var(--ink); background:transparent; text-align:left; white-space:nowrap; transition:background .14s ease, color .14s ease; } .psx-menu button i{width:14px; color:var(--pri); font-size:12px} .psx-menu button:hover{background:linear-gradient(135deg,#2563eb,#3b82f6); color:#fff} .psx-menu button:hover i{color:#fff} /* ───────── দেহ: প্যানেল + ক্যানভাস ───────── */ .psx-body{display:flex; gap:6px; width:100%; flex:1 1 auto; min-height:0; align-items:stretch} .psx-side{ flex:0 0 288px; width:288px; display:flex; flex-direction:column; gap:6px; max-height:calc(100vh - 210px); overflow:auto; padding-right:2px; } .psx-stage{ flex:1 1 auto; min-width:0; position:relative; display:flex; flex-direction:column; background:#e8eefb; border-radius:4px; box-shadow:inset 0 1px 6px rgba(37,99,235,.16); overflow:auto; padding:10px; } /* ───────── কার্ড ───────── */ .psx-c{background:#fff; border-radius:4px; padding:8px 9px; box-shadow:0 2px 10px rgba(37,99,235,.12)} .psx-c>h4{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--ink); padding-bottom:5px; margin-bottom:6px; border-bottom:1px solid var(--bd); } .psx-c>h4 i{color:var(--pri); font-size:11px} .psx-c>h4 .psx-add{margin-left:auto} .psx-add{ width:20px; height:20px; display:grid; place-items:center; border:0; border-radius:3px; cursor:pointer; color:#fff; font-size:10px; background:linear-gradient(135deg,#2563eb,#3b82f6); box-shadow:0 2px 6px rgba(37,99,235,.4); transition:transform .18s ease; } .psx-add:hover{transform:scale(1.16)} /* ───────── ফর্ম সারি — সব ঘর এক উচ্চতা, নিখুঁত align ───────── */ .psx-row{display:flex; align-items:stretch; gap:6px; width:100%; margin-bottom:6px} .psx-row:last-child{margin-bottom:0} .psx-f{display:flex; flex-direction:column; gap:3px; flex:1 1 0; min-width:0} .psx-f>label{font-size:10.5px; font-weight:700; color:#000; line-height:1.1} .psx-f input,.psx-f select,.psx-f textarea{ width:100%; height:var(--ph); padding:0 7px; font-family:inherit; font-size:12px; font-weight:600; color:#000; background:#fff; border:1px solid var(--bd); border-radius:3px; box-sizing:border-box; box-shadow:0 1px 4px rgba(37,99,235,.1); transition:border-color .16s ease, box-shadow .16s ease; } .psx-f textarea{height:auto; min-height:52px; padding:5px 7px; line-height:1.35; resize:vertical} /* ⚠️ style.css-এ গ্লোবাল `::placeholder{color:#334155!important}` আছে — ওটা হিন্টকে লেখার মতোই গাঢ় করে দেয়। নিয়ম: label = কালো · hint = ধূসর #94a3b8 · লেখা = কালো। তাই এখানে `!important` দিয়েই ফেরত আনতে হয় (অন্য পাতাগুলোও এভাবেই করে)। */ .psx input::placeholder,.psx textarea::placeholder, .psx-mod input::placeholder,.psx-mod textarea::placeholder{ color:var(--hint,#94a3b8)!important; opacity:1!important; font-weight:400!important; font-style:normal } .psx-f input:focus,.psx-f select:focus,.psx-f textarea:focus{ outline:0; border-color:var(--pri); box-shadow:0 0 0 2px rgba(37,99,235,.16) } /* ড্রপডাউন + "＋ নতুন" এক সারিতে — দুটোই একই উচ্চতা, নইলে align ভাঙে */ .psx-pick{display:flex; align-items:stretch; gap:5px; width:100%} .psx-pick select{flex:1 1 auto; min-width:0} .psx-pick .psx-b{flex:0 0 auto; width:var(--ph); min-width:var(--ph); padding:0} .psx-f select{appearance:none; cursor:pointer; padding-right:20px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 5px center; background-size:11px} /* ───────── টুল গ্রিড ───────── */ .psx-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:5px; width:100%} .psx-tool{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; border:0; border-radius:3px; cursor:pointer; font-family:inherit; font-size:10.5px; font-weight:700; color:#1e3a8a; text-align:center; line-height:1.15; background:linear-gradient(135deg,#eef4ff,#dce9ff); box-shadow:0 2px 7px rgba(37,99,235,.18); transition:transform .2s cubic-bezier(.2,.8,.3,1.4), box-shadow .2s ease; } .psx-tool i{font-size:15px; color:var(--pri)} .psx-tool:hover{transform:scale(1.12); box-shadow:0 8px 18px rgba(37,99,235,.32)} .psx-tool.wide{grid-column:1/-1; flex-direction:row; gap:6px; padding:7px 8px} .psx-tool.g{background:linear-gradient(135deg,#e8fbf2,#cdf2e2); color:#065f46} .psx-tool.g i{color:#059669} .psx-tool.r{background:linear-gradient(135deg,#fdecec,#fbdada); color:#991b1b} .psx-tool.r i{color:#dc2626} .psx-tool.v{background:linear-gradient(135deg,#f3ecfd,#e6dafb); color:#5b21b6} .psx-tool.v i{color:#7c3aed} /* আপলোড ড্রপজোন */ .psx-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:100%; padding:11px 8px; cursor:pointer; border:1.5px dashed #93b4f0; border-radius:3px; background:#f7faff; color:#1d4ed8; font-size:11px; font-weight:700; text-align:center; transition:background .16s ease, border-color .16s ease; } .psx-drop i{font-size:15px} .psx-drop:hover{background:#eef4ff; border-color:var(--pri)} /* ───────── লাইব্রেরি তালিকা (প্যানেলের ভিতর) ───────── */ .psx-list{display:flex; flex-direction:column; gap:4px; width:100%} .psx-it{ display:flex; align-items:center; gap:6px; width:100%; padding:5px 6px; cursor:pointer; border:1px solid var(--bd); border-radius:3px; background:#fff; text-align:left; transition:background .16s ease, box-shadow .16s ease, transform .16s ease; } .psx-it:hover{background:#f5f9ff; box-shadow:0 3px 10px rgba(37,99,235,.2); transform:translateX(1px)} .psx-it.on{background:linear-gradient(135deg,#eaf2ff,#dbe9ff); border-color:#93b4f0} .psx-it .t{flex:1 1 auto; min-width:0; font-size:11.5px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .psx-it .t em{display:block; font-style:normal; font-size:9.5px; font-weight:400; color:var(--hint)} .psx-ib{ flex:0 0 auto; width:21px; height:21px; display:grid; place-items:center; border:0; border-radius:3px; cursor:pointer; font-size:10px; color:#475569; background:#eef2f8; transition:all .16s ease; } .psx-ib:hover{background:linear-gradient(135deg,#2563eb,#3b82f6); color:#fff} .psx-ib.dg:hover{background:linear-gradient(135deg,#b91c1c,#ef4444)} .psx-ib.pin{color:#b45309} .psx-ib.pin.on{background:linear-gradient(135deg,#b45309,#f59e0b); color:#fff} .psx-empty{padding:9px 4px; font-size:11px; color:var(--hint); text-align:center} /* সুইচ সারি (পাতার অংশ চালু/বন্ধ) */ .psx-sw{display:flex; align-items:center; gap:6px; width:100%; padding:3px 2px; cursor:pointer} .psx-sw span{flex:1 1 auto; font-size:11.5px; font-weight:600; color:var(--ink)} .psx-sw i.k{ flex:0 0 auto; width:30px; height:17px; border-radius:9px; background:#cbd5e1; position:relative; transition:background .18s ease; } .psx-sw i.k::after{content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.3); transition:transform .18s ease} .psx-sw.on i.k{background:linear-gradient(135deg,#2563eb,#3b82f6)} .psx-sw.on i.k::after{transform:translateX(13px)} /* ───────── কাগজ ───────── */ .psx-pwrap{position:relative; margin:0 auto; transition:width .18s ease, height .18s ease} .psx-paper{ position:absolute; left:0; top:0; transform-origin:0 0; background:#fff; overflow:hidden; box-shadow:0 6px 26px rgba(37,99,235,.3); color:#0f172a; font-family:'Kalpurush','Noto Sans Bengali',system-ui,sans-serif; } .psx-zoom{position:sticky; bottom:6px; margin-left:auto; display:flex; flex-direction:column; gap:5px; z-index:5; padding-right:2px} .psx-zoom .psx-b{width:34px; min-width:34px; height:34px; border-radius:50%; padding:0} /* কাগজের ভিতরের ব্লক (সব মিমি-তে, তাই প্রিন্ট ও পর্দায় এক) */ .psx-sheet{position:relative; width:100%; height:100%; display:flex; flex-direction:column} .psx-hd{display:flex; align-items:flex-start; gap:4mm; width:100%} .psx-hdl{flex:0 0 44%; font-size:7.4pt; line-height:1.5; color:#047857; font-weight:700} .psx-hdl .r{display:flex; gap:1.4mm} .psx-hdl .r b{font-weight:700} .psx-hdr{flex:1 1 auto; text-align:right; min-width:0} .psx-hdr .nm{font-size:9.6pt; font-weight:800; color:#1d4ed8; line-height:1.25} .psx-hdr .pd{font-size:8pt; font-weight:700; color:#1d4ed8; line-height:1.25} .psx-hdr .rg{font-size:6.8pt; color:#475569; line-height:1.3} .psx-hdr .cm{font-size:12.4pt; font-weight:800; color:#dc2626; line-height:1.2; margin-top:.6mm} .psx-hdr .ad{font-size:6.6pt; color:#334155; line-height:1.4} .psx-logoimg{max-height:16mm; max-width:34mm; object-fit:contain; display:block; margin-bottom:1mm} .psx-rule{height:.6mm; background:#334155; width:100%; margin:1.6mm 0 1mm} .psx-memo{display:flex; align-items:baseline; justify-content:space-between; gap:4mm; font-size:7.6pt; font-weight:700; color:#b91c1c; width:100%} .psx-memo .dt{color:#1d4ed8} .psx-mid{display:flex; align-items:flex-start; gap:3mm; width:100%; margin-top:2.6mm} .psx-chow{flex:0 0 26%; font-size:7.2pt; line-height:1.6; font-weight:700; color:#0f172a} .psx-chow b{display:block; margin-bottom:.6mm} .psx-ttl{flex:1 1 auto; text-align:center; font-size:13pt; font-weight:800; color:#1d4ed8; letter-spacing:.2px; padding-top:1mm} .psx-north{flex:0 0 16mm; display:grid; place-items:center} .psx-north svg{width:15mm; height:15mm} .psx-map{ position:relative; flex:1 1 auto; width:100%; min-height:40mm; margin:3mm 0 1mm; border:.4mm dashed #cbd5e1; background:#fcfdff; } .psx-map.clean{border:0; background:transparent} .psx-map .ph{position:absolute; inset:0; display:grid; place-items:center; color:#94a3b8; font-size:9pt; font-weight:700} .psx-scale{width:100%; text-align:center; font-size:7.4pt; font-weight:700; color:#0f172a; line-height:1.35} .psx-sign{display:flex; align-items:flex-end; justify-content:space-between; gap:6mm; width:100%; margin-top:6mm; font-size:7.4pt; font-weight:700} .psx-sign .l{flex:0 0 48%} .psx-sign .l .h{margin-bottom:1.6mm} .psx-sign .l .g{display:flex; align-items:baseline; gap:1.4mm; margin-bottom:2.2mm} .psx-sign .l .g u{flex:1 1 auto; border-bottom:.3mm solid #0f172a; text-decoration:none; height:3.4mm} .psx-sign .r{flex:0 0 40%; text-align:center} .psx-sign .r .ln{border-top:.3mm solid #0f172a; padding-top:1mm; margin-bottom:.6mm} .psx-sign .r img{max-height:12mm; max-width:32mm; object-fit:contain; display:block; margin:0 auto .5mm} /* ⭐ কাগজের যে অংশে চাপলে ঐ অংশেরই এডিট মডাল খোলে — হালকা ইঙ্গিত দিই, কিন্তু প্রিন্টে/PDF-এ এর কিছুই যেন না যায় (নিচে @media print-এ বাতিল)। */ .psx-paper [data-pe]{cursor:pointer; border-radius:2px; transition:background .15s ease, box-shadow .15s ease} .psx-paper [data-pe]:hover{background:rgba(37,99,235,.07); box-shadow:0 0 0 .5mm rgba(37,99,235,.18)} .psx-hdl .tb + .tb{margin-top:1.6mm; padding-top:1.2mm; border-top:.2mm dashed #86c9ab} .psx-hdl .hd{font-size:7pt; font-weight:800; color:#065f46; margin-bottom:.4mm} /* কাগজে বসানো কম্পোনেন্ট (NDSFIG) — .rfig ক্লাসটাই রেন্ডারার দেয় */ .psx-map .rfig>b{position:absolute; left:50%; bottom:-3.4mm; transform:translateX(-50%); font-size:6.4pt; font-weight:700; color:#475569; white-space:nowrap} /* ───────── মডাল ───────── */ .psx-mask{ position:fixed; inset:0; z-index:9600; display:flex; align-items:center; justify-content:center; padding:12px; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); animation:psxIn .18s ease; } @keyframes psxIn{from{opacity:0} to{opacity:1}} .psx-mod{ width:100%; max-width:430px; max-height:88vh; display:flex; flex-direction:column; background:#fff; border-radius:5px; box-shadow:0 18px 48px rgba(37,99,235,.45); overflow:hidden; animation:psxUp .2s cubic-bezier(.2,.8,.3,1.2); } @keyframes psxUp{from{transform:translateY(14px) scale(.97); opacity:0} to{transform:none; opacity:1}} .psx-mod.wide{max-width:620px} .psx-mh{display:flex; align-items:center; gap:7px; padding:9px 11px; border-bottom:1px solid var(--bd); background:linear-gradient(135deg,#f5f9ff,#eaf2ff)} .psx-mh b{flex:1 1 auto; font-size:13.5px; font-weight:800; color:var(--ink)} .psx-mh i.ic{color:var(--pri)} .psx-mx{width:24px; height:24px; display:grid; place-items:center; border:0; border-radius:3px; cursor:pointer; color:#475569; background:#eef2f8; font-size:12px; transition:all .16s ease} .psx-mx:hover{background:linear-gradient(135deg,#b91c1c,#ef4444); color:#fff; transform:scale(1.12)} .psx-mb{flex:1 1 auto; overflow:auto; padding:10px 11px} .psx-mf{display:flex; align-items:center; gap:6px; padding:8px 11px; border-top:1px solid var(--bd); background:#f8fbff} .psx-mf .psx-b{flex:1 1 auto} /* লাইব্রেরি drawer */ .psx-chips{display:flex; flex-wrap:wrap; gap:4px; width:100%; margin:7px 0} .psx-chip{ height:26px; padding:0 9px; display:inline-flex; align-items:center; gap:4px; border:0; border-radius:13px; cursor:pointer; font-family:inherit; font-size:11px; font-weight:700; color:#1e3a8a; background:linear-gradient(135deg,#eef4ff,#dce9ff); box-shadow:0 1px 5px rgba(37,99,235,.16); transition:transform .18s ease, box-shadow .18s ease; } .psx-chip:hover{transform:scale(1.09)} .psx-chip.on{background:linear-gradient(135deg,#1d4ed8,#3b82f6); color:#fff; box-shadow:0 3px 11px rgba(37,99,235,.45)} .psx-bulk{display:flex; align-items:center; gap:6px; width:100%; padding:5px 0; border-bottom:1px solid var(--bd)} .psx-bulk label{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:var(--ink); cursor:pointer} .psx-bulk input[type=checkbox]{width:15px; height:15px; accent-color:var(--pri); cursor:pointer; align-self:center} .psx-lrow{display:flex; align-items:center; gap:7px; width:100%; padding:6px 4px; border-bottom:1px solid #eef2f8} .psx-lrow input[type=checkbox]{width:15px; height:15px; accent-color:var(--pri); cursor:pointer; align-self:center; flex:0 0 auto} .psx-thumb{ flex:0 0 44px; width:44px; height:34px; border-radius:3px; background:#f1f5fb; display:grid; place-items:center; overflow:hidden; border:1px solid var(--bd) } .psx-thumb img{width:100%; height:100%; object-fit:contain} .psx-thumb i{color:#94a3b8; font-size:13px} .psx-lin{flex:1 1 auto; min-width:0} .psx-lin b{display:block; font-size:12px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .psx-tag{display:inline-block; margin-top:2px; padding:1px 6px; border-radius:8px; font-size:9px; font-weight:700; color:#5b21b6; background:#f0e9fd} .psx-lin small{display:block; font-size:9.5px; color:var(--hint); margin-top:1px} /* ফোনের নিচের ট্যাব */ .psx-tabs{display:none} /* ───────── মোবাইল ───────── */ @media (max-width:900px){ .psx,.psx-mask{--ph:34px} .psx{min-height:calc(100vh - 150px)} .psx-body{flex-direction:column; gap:0} .psx-side{ flex:0 0 auto; width:100%; max-height:none; overflow:visible; padding:0 0 4px; } .psx-side[hidden]{display:none} .psx-stage{min-height:56vh; padding:7px} .psx-logo b,.psx-logo small{display:none} .psx-logo{padding-right:4px} .psx-b .n{display:none} .psx-b{padding:0 8px} .psx-tabs{ display:flex; align-items:stretch; gap:5px; width:100%; padding:5px; background:#fff; border-radius:4px; box-shadow:0 -2px 10px rgba(37,99,235,.16); position:sticky; bottom:0; z-index:40; } .psx-tab{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:42px; border:0; border-radius:3px; cursor:pointer; font-family:inherit; font-size:10.5px; font-weight:700; color:#1e3a8a; background:linear-gradient(135deg,#eef4ff,#dce9ff); box-shadow:0 2px 7px rgba(37,99,235,.18); transition:transform .18s ease; } .psx-tab i{font-size:14px} .psx-tab.on{background:linear-gradient(135deg,#1d4ed8,#3b82f6); color:#fff; box-shadow:0 4px 13px rgba(37,99,235,.45)} .psx-mod{max-width:100%; max-height:92vh} .psx-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:420px){ .psx-bar{flex-wrap:wrap; row-gap:5px} .psx-name{flex:1 1 100%; order:9} .psx-b{font-size:11.5px; padding:0 7px} } /* ───────── প্রিন্ট — শুধু কাগজ ───────── */ @media print{ body>*{display:none !important} body>main,body>main *{display:revert} .psx-bar,.psx-side,.psx-tabs,.psx-zoom,.psx-mask{display:none !important} .psx,.psx-body{display:block !important; min-height:0 !important} .psx-stage{display:block !important; overflow:visible !important; padding:0 !important; background:none !important; box-shadow:none !important; border-radius:0 !important} .psx-pwrap{width:auto !important; height:auto !important; margin:0 !important} .psx-paper{position:static !important; transform:none !important; box-shadow:none !important} .psx-paper [data-pe]{background:none !important; box-shadow:none !important} @page{margin:0} }