/* =====================================================================
   nds_sketch.css — ফিল্ড স্কেচ বোর্ড  (কম্প্যাক্ট · পরিষ্কার · টাচ-বান্ধব)
   ===================================================================== */
body.nsk-on .foot,
body.nsk-on .tabs { display: none !important; }
body.nsk-on .wrap { max-width: none !important; padding: 0 !important; }
body.nsk-on #view { max-width: none !important; }

.nsk { --nskA: #C13FC6; --nskA2: #9E2AA3; --nskL: #e6dfe9; --nskT: #2b2130;
  display: flex; flex-direction: column; gap: 0;
  height: calc(100dvh - 52px); min-height: 200px; background: #f2f6fd;
  border-radius: 6px; overflow: hidden; box-shadow: 0 2px 12px rgba(120, 40, 120, .12);
  position: relative; user-select: none; -webkit-user-select: none; }

/* ── উপরের বার ── */
.nsk-bar { display: flex; align-items: center; gap: 5px; padding: 4px 6px; flex-wrap: wrap;
  background: linear-gradient(135deg, #fdf4ff, #f7ecfa); border-bottom: 1px solid var(--nskL); }
.nsk-name { flex: 1 1 120px; min-width: 90px; height: 30px; box-sizing: border-box;
  border: 1px solid var(--nskL); border-radius: 4px; background: #fff; color: var(--nskT);
  padding: 0 8px; font: 600 13px/1 inherit; }
.nsk-name:focus { outline: 0; border-color: var(--nskA); box-shadow: 0 0 0 2px rgba(193, 63, 198, .16); }
.nsk-bgrp { display: flex; align-items: center; gap: 3px; }
.nsk-bgrp.right { margin-left: auto; }
.nsk-b { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--nskL); background: #fff; color: #4a3a4d; border-radius: 4px;
  cursor: pointer; font-size: 13px; transition: all .15s ease; padding: 0; }
.nsk-b:hover { background: var(--nskA); color: #fff; border-color: var(--nskA); transform: translateY(-1px); }
.nsk-b.danger:hover { background: #dc2626; border-color: #dc2626; }
/* জুম লক চালু — লাল তালা, স্পষ্ট বোঝা যায় জুম আটকানো (owner ২০২৬-০৮-০৯) */
.nsk-b.locked { background: #dc2626; color: #fff; border-color: #dc2626; box-shadow: 0 2px 6px rgba(220, 38, 38, .32); }
.nsk-b.locked:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; transform: translateY(-1px); }
/* সাইডবার-টগল বোতাম সক্রিয় (সাইডবার দৃশ্যমান/পিন) হলে ভরাট বেগুনি */
.nsk-navtg.on { background: linear-gradient(135deg, var(--nskA), var(--nskA2)); color: #fff; border-color: transparent; }

/* ── অ্যাপ-সাইডবার: স্কেচ পেজে লুকানো + বাম-কিনারায় ভেসে-আসা (ডেস্কটপ ≥১০০০px) ──
   মালিকের নির্দেশ ২০২৬-০৮-০৯: স্কেচে ঢুকলে সাইডবার বাঁয়ে সরে কাজের জায়গা বাড়ায়;
   বাম কিনারায় মাউস নিলে ভেসে আসে, সরালে লুকায়; টপ-বারে টগল বোতাম।
   ⚠️ .nsk-navhot হট-জোনটি JS দিয়ে সাইডবারের ঠিক আগে বসানো হয় — মুছবেন না। */
.nsk-navhot { display: none; position: fixed; left: 0; top: 0; bottom: 0; width: 12px; z-index: 39; }
@media (max-width: 999px) { #nskNavTg { display: none; } }   /* এই মাপে সাইডবারই নেই */
@media (min-width: 1000px) {
  body.nsk-on .sidenav { transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s; will-change: transform; }
  /* লুকানো মোড: বডির বাম প্যাডিং সরে → কাজের জায়গা পুরো চওড়া */
  body.nsk-on.nsk-navhide.has-nav { padding-left: 0; }
  body.nsk-on.nsk-navhide .sidenav { transform: translateX(-100%); box-shadow: none; }
  body.nsk-on.nsk-navhide .nsk-navhot { display: block; }
  /* বাম কিনারায় মাউস নিলে ভেসে আসে; সাইডবারের উপর থাকলে খোলা থাকে; সরালে লুকায় */
  body.nsk-on.nsk-navhide .nsk-navhot:hover ~ .sidenav,
  body.nsk-on.nsk-navhide .sidenav:hover { transform: translateX(0); box-shadow: 2px 0 30px rgba(40, 10, 60, .36); }
}

/* ── মূল অংশ ── */
.nsk-body { flex: 1; display: flex; min-height: 0; }
/* ⚠️ min-height:0 লাগবেই — নইলে ফ্লেক্স আইটেম ক্যানভাসের *ইনট্রিনসিক* উচ্চতায়
   বেড়ে যায় (পর্দা ছোট হলে ক্যানভাস উপরে উপচে অ্যাপ-বারের নিচে ঢুকে যেত) */
.nsk-stage { position: relative; flex: 1; min-width: 0; min-height: 0; overscroll-behavior: none; }
/* PRF-01/02 — ব্রাউজারের নিজের জেসচার ক্যানভাসে পুরো বন্ধ: ডাবল-ট্যাপ জুম,
   pull-to-refresh, লেখা সিলেক্ট, লং-প্রেসে কপি-মেনু, ট্যাপ-হাইলাইট।       */
.nsk-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair;
  overscroll-behavior: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.nsk-on { overscroll-behavior-y: none; }

/* ── টুল রেল — দুই কলাম (কম জায়গা, কম স্ক্রল) ── */
.nsk-tools { width: 146px; flex: 0 0 146px; overflow-y: auto; overflow-x: hidden;
  background: #fff; border-right: 1px solid var(--nskL); padding: 4px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 3px; align-content: start; }
.nsk-t { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 5px 2px; border: 1px solid transparent;
  border-radius: 4px; background: #f7f2f8; color: #4a3a4d; cursor: pointer; transition: all .14s ease; }
.nsk-t i { font-size: 15px; }
.nsk-t span { font-size: 9.5px; line-height: 1.15; text-align: center; }
.nsk-t:hover { background: #f0e2f3; }
.nsk-t.on { background: linear-gradient(135deg, var(--nskA), var(--nskA2)); color: #fff;
  box-shadow: 0 2px 7px rgba(158, 42, 163, .34); }
.nsk-t.done { background: #16a34a; color: #fff; }
/* "শেষ" (nskPolyDone) শুধু পলি/রাস্তা আঁকার সময় দেখাবে — .nsk-t{display:flex} যেন
   UA-র [hidden]{display:none} কে হারিয়ে বোতামটা সবসময় দেখিয়ে না ফেলে (owner ২০২৬-০৯) */
.nsk-t[hidden] { display: none !important; }

/* ── স্টাইল বার (টুলবারের নিচে, পুরো-চওড়া — ক্যানভাসের বাইরে) ──
   মালিকের নির্দেশ: আগে ক্যানভাসের ভিতরে ভাসত; এখন টুলবারের ঠিক নিচে
   নিজস্ব সারিতে। ভিতরে আর নেবেন না। */
.nsk-style { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 5px 8px; background: linear-gradient(135deg, #fdf7ff, #f6ecfb);
  border-bottom: 1px solid var(--nskL); }
.nsk-style-lbl { font: 700 11px/1 inherit; color: var(--nskA2); display: inline-flex;
  align-items: center; gap: 4px; padding-right: 2px; }
/* চলতি-লেয়ার চিপ ও তার বিস্তারিত পপ-আপ */
.nsk-lyrwrap { position: relative; display: inline-flex; }
.nsk-lyrchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; box-sizing: border-box;
  border: 1px solid var(--nskL); border-radius: 4px; background: #fff; color: var(--nskT);
  font: 600 11.5px/1 inherit; padding: 0 8px; cursor: pointer; max-width: 160px; transition: all .14s ease; }
.nsk-lyrchip:hover { border-color: var(--nskA); box-shadow: 0 0 0 2px rgba(193, 63, 198, .14); }
.nsk-lyrchip .nsk-lyrname { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsk-lyrchip i { font-size: 10px; color: #8a7a8d; }
.nsk-lyrdot { width: 13px; height: 13px; flex: 0 0 13px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .22); }
.nsk-lyrpop { position: absolute; top: calc(100% + 5px); left: 0; z-index: 30;
  width: min(288px, calc(100vw - 20px)); background: #fff; border: 1px solid var(--nskL);
  border-radius: 7px; box-shadow: 0 12px 32px rgba(37, 99, 235, .22); padding: 8px; }
.nsk-lyrpop[hidden] { display: none !important; }
.nsk-lp-h { display: flex; align-items: center; gap: 5px; font: 700 12.5px/1 inherit; color: var(--nskA2);
  padding: 0 0 6px; border-bottom: 1px solid var(--nskL); margin-bottom: 7px; }
.nsk-lp-h .nsk-x { margin-left: auto; }
.nsk-lp-list-h { font: 700 11px/1 inherit; color: #6b5a6e; margin: 9px 0 4px; }
.nsk-lp-list { display: flex; flex-direction: column; gap: 2px; max-height: 190px; overflow: auto; margin-bottom: 8px; }
.nsk-lp-row { display: flex; align-items: center; gap: 6px; padding: 4px 5px; border-radius: 4px;
  cursor: pointer; border: 1px solid transparent; }
.nsk-lp-row:hover { background: #faf4fc; }
.nsk-lp-row.cur { background: #f8e6fb; border-color: #eccdf0; }
.nsk-lp-dot { width: 13px; height: 13px; flex: 0 0 13px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .22); }
.nsk-lp-nm { flex: 1; min-width: 0; font: 600 12px/1.2 inherit; color: var(--nskT);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsk-lp-row .nsk-le { width: 24px; height: 24px; }
/* রং সোয়াচ বোতাম (নেটিভ কালার ইনপুটের বদলে — চাপলে ACI বক্স খোলে) */
.nsk-sw { width: 26px; height: 26px; flex: 0 0 26px; box-sizing: border-box; padding: 0;
  border: 1px solid #94a3b8; border-radius: 4px; cursor: pointer; position: relative;
  font: 700 10px/1 inherit; color: #64748b; transition: all .14s ease; }
.nsk-sw:hover { border-color: var(--nskA); box-shadow: 0 0 0 2px rgba(193, 63, 198, .18); }
.nsk-sw.by { background: repeating-linear-gradient(135deg, #fff 0 4px, #e6dfe9 4px 8px) !important; }
.nsk-frm label > .nsk-sw { flex: 0 0 34px; width: 34px; height: 28px; }
.nsk-style select { height: 26px; box-sizing: border-box; border: 1px solid var(--nskL); border-radius: 4px;
  background: #fff; color: var(--nskT); font: 500 11.5px/1 inherit; padding: 0 4px; max-width: 108px; }
.nsk-tg { width: 26px; height: 26px; box-sizing: border-box; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--nskL); border-radius: 4px; background: #fff;
  color: #8a7a8d; cursor: pointer; font-size: 12px; padding: 0; transition: all .14s ease; }
.nsk-tg:hover { border-color: var(--nskA); color: var(--nskA2); }
.nsk-tg.on { background: linear-gradient(135deg, var(--nskA), var(--nskA2)); color: #fff; border-color: transparent;
  box-shadow: 0 2px 6px rgba(158, 42, 163, .3); }

/* ── AI সাজেশন বার ── */
.nsk-ai { position: absolute; left: 50%; bottom: 8px; transform: translate(-50%, 130%);
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--nskL); border-radius: 22px;
  padding: 4px 8px; box-shadow: 0 6px 20px rgba(158, 42, 163, .22); max-width: calc(100% - 20px);
  opacity: 0; pointer-events: none; transition: all .25s cubic-bezier(.2, .8, .3, 1); z-index: 6; }
.nsk-ai.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.nsk-ai-lbl { font: 600 11.5px/1 inherit; color: var(--nskA2); display: inline-flex; align-items: center; gap: 4px; padding: 0 3px; }
.nsk-chip { border: 1px solid var(--nskL); background: #fff; color: #4a3a4d; border-radius: 20px;
  padding: 5px 10px; font: 600 11.5px/1 inherit; cursor: pointer; transition: all .14s ease; }
.nsk-chip:hover { border-color: var(--nskA); color: var(--nskA2); }
.nsk-chip.on { background: linear-gradient(135deg, var(--nskA), var(--nskA2)); color: #fff; border-color: transparent; }
.nsk-chip.alt { background: #ecfdf5; border-color: #a7f3d0; color: #067a52; }
.nsk-chip.x { padding: 5px 8px; }

/* ── ভাসমান প্যানেল ── */
/* ২৫৮ → ২৮০px: "নকশার সাইজ" লেবেল + ঘর-বোতাম এক সারিতে পুরোটা ধরার জন্য */
.nsk-pnl { position: absolute; right: 6px; top: 40px; width: 280px; max-width: calc(100% - 12px);
  max-height: calc(100% - 52px); overflow: auto; background: #fff; border: 1px solid var(--nskL);
  border-radius: 6px; box-shadow: 0 6px 22px rgba(37, 99, 235, .16); padding: 6px; z-index: 7; }
.nsk-pnl-h { display: flex; align-items: center; font: 700 12.5px/1 inherit; color: var(--nskA2);
  padding: 2px 2px 6px; border-bottom: 1px solid var(--nskL); margin-bottom: 6px; }
.nsk-x { margin-left: auto; width: 22px; height: 22px; border: 0; background: #f4eaf6; color: #7a5a7d;
  border-radius: 4px; cursor: pointer; font-size: 11px; }
.nsk-x:hover { background: #dc2626; color: #fff; }
.nsk-note { font: 500 11.5px/1.4 inherit; color: #6b5a6e; margin: 0 0 6px; background: #fbf4fc;
  border-left: 2px solid var(--nskA); padding: 5px 7px; border-radius: 3px; }
.nsk-note.sm { font-size: 11px; }
.nsk-mini { font: 600 11px/1 inherit; color: #6b5a6e; white-space: nowrap; }
.nsk-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.nsk-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--nskA); }

/* নমুনা প্যালেট */
.nsk-symwrap, .nsk-roadwrap { max-height: 46vh; overflow: auto; }
.nsk-symg { font: 700 11px/1 inherit; color: #8a6f8d; margin: 7px 0 4px; }
.nsk-symgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 4px; }
.nsk-symb { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 1px;
  border: 1px solid var(--nskL); border-radius: 4px; background: #fff; cursor: pointer; transition: all .14s ease; }
.nsk-symb canvas { width: 40px; height: 40px; }
.nsk-symb span { font-size: 9px; color: #55445a; line-height: 1.1; text-align: center; }
.nsk-symb:hover { border-color: var(--nskA); background: #fdf4ff; }
.nsk-symb.on { border-color: var(--nskA); background: #f8e6fb; box-shadow: 0 0 0 2px rgba(193, 63, 198, .16); }
.nsk-roadb { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 3px; margin-bottom: 3px;
  border: 1px solid var(--nskL); border-radius: 4px; background: #fff; cursor: pointer; }
.nsk-roadb canvas { width: 100%; height: 30px; }
.nsk-roadb span { font-size: 10.5px; color: #55445a; }
.nsk-roadb:hover { border-color: var(--nskA); }
.nsk-roadb.on { border-color: var(--nskA); background: #f8e6fb; }

/* ভরাট (হ্যাচ) প্যালেট */
.nsk-hwrap { max-height: 44vh; overflow: auto; }
.nsk-hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 4px; }
.nsk-hb { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 2px;
  border: 1px solid var(--nskL); border-radius: 4px; background: #fff; cursor: pointer; transition: all .14s ease; }
.nsk-hb canvas { width: 100%; height: auto; border-radius: 2px; }
.nsk-hb span { font-size: 9px; color: #55445a; line-height: 1.15; text-align: center; }
.nsk-hb:hover { border-color: var(--nskA); }
.nsk-hb.on { border-color: var(--nskA); background: #f8e6fb; box-shadow: 0 0 0 2px rgba(193, 63, 198, .18); }

/* ── ভরাট নকশার সাইজ ও কোণ — দুই সারি, কম জায়গা (owner ২০২৬-০৮-১০) ──
   আগে স্লাইডার + রিসেট + ছয়টি কোণ-বোতাম মিলে ছয় সারি হয়ে যেত; ফোনে প্যানেলের
   বাকি অংশ পর্দার বাইরে ঠেলে দিত। এখন: সাইজ এক সারি, কোণ এক সারি (শুধু ঘর)। */
.nsk-hsz { border: 1px solid var(--nskL); border-radius: 6px; padding: 5px 6px 6px;
  margin-bottom: 6px; background: linear-gradient(180deg, #fdfbfe, #f8f4fa);
  display: flex; flex-direction: column; gap: 5px; }
.nsk-hsz-r { display: flex; align-items: center; gap: 4px; }
/* লেবেল যেন সরু প্যানেলেও (২৫৮px) পুরো পড়া যায় — তাই ঘর/বোতাম টানটান মাপে */
.nsk-hsz-r > .nsk-mini { flex: 1 1 auto; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.nsk-hsz-num { flex: 0 0 auto; width: 54px; height: 30px; box-sizing: border-box; padding: 0 5px;
  border: 1px solid var(--nskL); border-radius: 5px;
  font: 700 12.5px/1 inherit; color: var(--nskA2); text-align: right; background: #fff; }
.nsk-hsz-num:focus { outline: 0; border-color: var(--nskA); box-shadow: 0 0 0 2px rgba(193, 63, 198, .16); }
.nsk-hsz-x { flex: 0 0 auto; width: 12px; font: 700 13px/1 inherit; color: #8a6f8d; }
.nsk-hsz-b { flex: 0 0 auto; width: 28px; height: 30px; border: 1px solid var(--nskL); border-radius: 5px;
  background: #fff; color: var(--nskA2); font: 700 17px/1 inherit; cursor: pointer; touch-action: manipulation; }
.nsk-hsz-b.r { font-size: 11px; }
.nsk-hsz-b:active { background: var(--nskA); color: #fff; border-color: transparent; }

.nsk-hprev { width: 100%; height: auto; margin-top: 7px; border-radius: 4px; display: block; background: #fff; }

/* লেয়ার */
.nsk-lyr { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid transparent;
  border-radius: 4px; margin-bottom: 2px; }
.nsk-lyr.cur { background: #f8e6fb; border-color: #eccdf0; }
.nsk-le { width: 22px; height: 22px; border: 0; background: #f4eaf6; color: #6b5a6e; border-radius: 3px;
  cursor: pointer; font-size: 10.5px; flex: 0 0 auto; }
.nsk-le:hover { background: var(--nskA); color: #fff; }
.nsk-le.del:hover { background: #dc2626; }
.nsk-lc { width: 22px; height: 22px; padding: 0; border: 1px solid var(--nskL); border-radius: 3px; cursor: pointer; }
.nsk-ln { flex: 1; min-width: 0; font: 600 11.5px/1.2 inherit; color: var(--nskT); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsk-lcnt { font: 600 10px/1 inherit; color: #8a6f8d; background: #f4eaf6; border-radius: 8px; padding: 3px 5px; }

/* বোতাম */
.nsk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box;
  height: 30px; padding: 0 10px; border-radius: 4px; border: 0; cursor: pointer;
  font: 600 12px/1 inherit; color: #fff; background: var(--nskA); transition: all .15s ease;
  box-shadow: 0 2px 6px rgba(193, 63, 198, .3); }
.nsk-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(193, 63, 198, .45); }
.nsk-btn.ok { background: linear-gradient(135deg, #16a34a, #0f8a3d); box-shadow: 0 2px 6px rgba(22, 163, 74, .3); }
.nsk-btn.ghost { background: #fff; color: #4a3a4d; border: 1px solid var(--nskL); box-shadow: none; }
.nsk-btn.ghost:hover { border-color: var(--nskA); color: var(--nskA2); }
.nsk-btn.danger { background: #dc2626; box-shadow: 0 2px 6px rgba(220, 38, 38, .3); }
.nsk-prow { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.nsk-prow .nsk-btn { flex: 1 1 auto; }
#nskLyrAdd, #nskLyrMove { width: 100%; margin-top: 4px; }

/* ── ক্যানভাস লক প্যানেল — চালু/বন্ধ সুইচ (owner ২০২৬-০৯) ── */
.nsk-lockm { display: flex; flex-direction: column; }
.nsk-lockrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid var(--nskL); cursor: pointer; user-select: none; }
.nsk-lockrow:last-of-type { border-bottom: 0; }
.nsk-lockname { font: 600 13.5px/1.25 inherit; color: var(--nskT); display: inline-flex; align-items: center; gap: 10px; }
.nsk-lockname i { width: 20px; text-align: center; color: var(--nskA2); font-size: 15px; }
.nsk-tgl { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.nsk-tgl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.nsk-tgl-t { position: absolute; inset: 0; background: #cbb8d0; border-radius: 999px; transition: background .18s ease; }
.nsk-tgl-t::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .32); transition: transform .18s ease; }
.nsk-tgl input:checked ~ .nsk-tgl-t { background: linear-gradient(135deg, var(--nskA), var(--nskA2)); }
.nsk-tgl input:checked ~ .nsk-tgl-t::after { transform: translateX(20px); }
.nsk-lockquick { display: flex; gap: 8px; margin-top: 14px; }
.nsk-lockquick .nsk-btn { flex: 1; }

/* ── পপ-আপ (মাপ / টেক্সট) ── */
.nsk-pop { position: absolute; width: 250px; background: #fff; border: 1px solid var(--nskL);
  border-radius: 6px; box-shadow: 0 10px 30px rgba(37, 99, 235, .22); padding: 7px; z-index: 20; }
.nsk-pop.wide { width: 262px; }
.nsk-pop-h { font: 700 12px/1 inherit; color: var(--nskA2); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.nsk-in { flex: 1; min-width: 0; height: 32px; box-sizing: border-box; border: 1px solid var(--nskL);
  border-radius: 4px; background: #fff; color: #0f172a; padding: 0 7px; font: 600 13px/1 inherit; }
textarea.nsk-in { height: auto; padding: 6px 7px; line-height: 1.35; width: 100%; resize: vertical; }
.nsk-in:focus { outline: 0; border-color: var(--nskA); box-shadow: 0 0 0 2px rgba(193, 63, 198, .16); }
.nsk-u { flex: 0 0 84px; }
.nsk-quick { flex-wrap: wrap; }
.nsk-q { flex: 1 1 auto; height: 26px; border: 1px solid var(--nskL); background: #faf5fb; color: #55445a;
  border-radius: 4px; font: 600 12px/1 inherit; cursor: pointer; }
.nsk-q:hover { background: var(--nskA); color: #fff; border-color: var(--nskA); }
.nsk-warn { background: #fff7ed; border-left: 3px solid #ea580c; color: #7c2d12;
  font: 500 11px/1.45 inherit; padding: 5px 7px; border-radius: 3px; margin-bottom: 6px; }
.nsk-warn b { color: #9a3412; }
/* মাপের ধরন — চিপ বোতাম */
.nsk-kinds { display: flex; gap: 3px; margin-bottom: 6px; }
.nsk-kinds.wrap { flex-wrap: wrap; }
.nsk-kb { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 32px; padding: 4px 8px; border: 1px solid var(--nskL, #e6dfe9); border-radius: 4px;
  background: #fff; color: #4a3a4d; font: 600 11.5px/1 inherit; cursor: pointer; transition: all .14s ease; }
.nsk-kb i { font-size: 12px; }
.nsk-kb:hover { border-color: var(--nskA, #C13FC6); color: var(--nskA2, #9E2AA3); }
.nsk-kb.on { background: linear-gradient(135deg, var(--nskA, #C13FC6), var(--nskA2, #9E2AA3)); color: #fff;
  border-color: transparent; box-shadow: 0 2px 6px rgba(158, 42, 163, .3); }
.nsk-in.big { height: 42px; font: 700 17px/1 inherit; }
.nsk-btn.big { height: 40px; font-size: 13.5px; }
.nsk-pop.dimpop .nsk-q { height: 30px; font-size: 13px; }
.nsk-seq { font: 700 11.5px/1 inherit; color: #fff; background: linear-gradient(135deg, #16a34a, #0f8a3d);
  border-radius: 20px; padding: 5px 10px; text-align: center; margin-bottom: 6px; }
.nsk-ckrow { display: flex; align-items: center; gap: 6px; font: 600 11.5px/1.3 inherit; color: #4a3a4d;
  margin-bottom: 6px; cursor: pointer; }
.nsk-ckrow input { accent-color: var(--nskA); width: 15px; height: 15px; flex: 0 0 15px; }
.nsk-pop-f { margin-bottom: 0; }
.nsk-pop-f .nsk-btn { flex: 1 1 auto; }

/* ── মডাল ── */
.nsk-modal { position: fixed; inset: 0; background: rgba(30, 12, 34, .45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 99990; padding: 10px; }
.nsk-mbox { width: min(720px, 100%); max-height: calc(100dvh - 16px); display: flex; flex-direction: column;
  background: #fff; border-radius: 8px; box-shadow: 0 20px 50px rgba(30, 12, 34, .4); overflow: hidden; }
.nsk-mh { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font: 700 13.5px/1 inherit;
  color: #fff; background: linear-gradient(135deg, var(--nskA, #C13FC6), var(--nskA2, #9E2AA3)); }
.nsk-mh .nsk-x { background: rgba(255, 255, 255, .2); color: #fff; }
/* ⚠️⚠️ নাম-সংঘর্ষের ফাঁদ: `.nsk-mb` একই সাথে **মডালের বডি** আর মিনি টুলবারের
   বোতামের ক্লাস ছিল (SEL-06, নিচে ~লাইন ১০৩৮)। পরেরটা জিতে যাওয়ায় প্রতিটি
   মডালের বডি ৩২×৩২px আইকন-বাক্স হয়ে যেত — লক · পূর্ণ সেটিং · রং · সাহায্য
   সব ফাঁকা দেখাত (owner ২০২৬-০৮-১৪ স্ক্রিনশট)। মিনি টুলবার এখন `.nsk-mtb`,
   আর এই নিয়মটা `.nsk-mbox >` দিয়ে বাঁধা — নতুন কোনো `.nsk-mb` ক্লাস আর
   মডালের বডিকে ছুঁতে পারবে না।                                            */
.nsk-mbox > .nsk-mb { padding: 10px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.nsk-mf { display: flex; gap: 5px; justify-content: flex-end; padding: 7px 10px; border-top: 1px solid var(--nskL, #e6dfe9); }
.nsk-frm { display: grid; gap: 6px; }
.nsk-frm.two { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.nsk-frm label { display: flex; align-items: center; gap: 6px; font: 600 12px/1.2 inherit; color: #4a3a4d; }
.nsk-frm label > input, .nsk-frm label > select { flex: 1; min-width: 0; height: 30px; box-sizing: border-box;
  border: 1px solid var(--nskL, #e6dfe9); border-radius: 4px; background: #fff; color: #0f172a;
  padding: 0 7px; font: 500 12.5px/1 inherit; }
.nsk-frm label > input[type=color] { flex: 0 0 46px; padding: 1px; }
.nsk-frm .nsk-ck { gap: 6px; }
.nsk-frm .nsk-ck input { flex: 0 0 16px; height: 16px; accent-color: var(--nskA, #C13FC6); }
.nsk-frm .nsk-hd { grid-column: 1 / -1; font: 700 11.5px/1 inherit; color: #8a6f8d; margin-top: 4px; }

/* ══════════ "নির্বাচিত" প্যানেল — এক লম্বা সারির বদলে ২-৩ কলাম ══════════
   owner ২০২৬-০৮-১৮: "এ সেটিংটা দুই তিন সারি করে সেট কর"। আগে প্রতিটি ঘর
   পুরো চওড়া নিত (রং · পুরুত্ব · লাইন টাইপ · লেয়ার · ভেতরের নকশা …), ফলে
   প্যানেল ফিতার মতো লম্বা হয়ে যেত আর নিচের বোতামে পৌঁছাতে স্ক্রল লাগত।
   এখন লেবেল ঘরের **উপরে** বসে, তাই সরু কলামেও পুরো নাম পড়া যায়; ২৬০px-এ
   দুই কলাম, ৪০০px+ (ট্যাব/ডেস্কটপ dock) তিন কলাম। যেগুলোর লেখা লম্বা
   (লাইন টাইপ · ভেতরের নকশা · গায়ে লেখা …) সেগুলো `.wide` — পুরো সারি।   */
#nskProps .nsk-frm { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 6px 8px; align-items: end; }
#nskProps .nsk-frm > label { flex-direction: column; align-items: stretch; gap: 3px;
  font-size: 11px; color: #6b5a6e; min-width: 0; }
/* ⚠️ টিক-ঘর (checkbox/radio) বাদ — নইলে `width:100%` ওটাকেও পুরো চওড়া
   (৩৪৯px) করে দেয় আর পাশের লেখাটা ("ভেতরে হালকা রং") ঠেলে বাইরে চলে যায়;
   পর্দায় থাকে শুধু একটা খালি বাক্স (owner ২০২৬-০৮-১৮: "এটা কি")।        */
#nskProps .nsk-frm > label > input:not([type=checkbox]):not([type=radio]),
#nskProps .nsk-frm > label > select { flex: 0 0 auto; width: 100%; }
#nskProps .nsk-frm > .nsk-ck > input[type=checkbox] { flex: 0 0 16px; width: 16px; height: 16px; }
#nskProps .nsk-frm > label > .nsk-sw { flex: 0 0 auto; width: 100%; height: 30px; }
#nskProps .nsk-frm > label > .nsk-ltb { margin-top: 0; }
/* পুরো সারি নেবে: টিক-ঘর, লম্বা লেখার ঘর, আর যেগুলোয় `.wide` দেওয়া আছে */
#nskProps .nsk-frm > .nsk-ck,
#nskProps .nsk-frm > label.wide { grid-column: 1 / -1; }
#nskProps .nsk-frm > .nsk-ck { flex-direction: row; align-items: center; }
/* সাইজ ও কোণের বাক্স দুটিও পাশাপাশি */
/* সাইজ ও কোণের সারি পাশাপাশি — তবে **জায়গা সত্যিই থাকলে তবেই**।
   ⚠️ ১৫০px দিয়েছিলাম, কিন্তু আঙুলের মাপে ভেতরের জিনিসই ১৯৬px (ঘর ৬৬ +
   তিন বোতাম ৩৮×৩ + ফাঁক) — ফলে ৩৬০px ফোনে প্যানেলে **আড়াআড়ি স্ক্রল** এসে
   যেত (৩০px, মেপে ধরা)। এখন ১৯৬px, তাই সরু পর্দায় নিজে থেকেই এক কলাম।  */
#nskProps .nsk-hsz { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 4px 8px; }
#nskProps .nsk-hsz-r { min-width: 0; }

/* ══════════ কাগজ ও আকার সেটআপ (openPaper) ══════════
   দুই কলাম: বাঁয়ে কাগজ + জীবন্ত প্রিভিউ, ডানে জমির আকার ও টাইটেল ব্লক।
   ছোট পর্দায় নিজে থেকেই এক কলাম হয়ে যায়। */
.nsk-mbox.pp-box { width: min(1100px, 100%); }
/* ── owner ২০২৬-০৮-১৪: "ডান পাশে নমুনা দেবে সাথে সাথে" ──
   বাঁয়ে ট্যাব+ঘর (স্ক্রল করে), ডানে **স্থির** নমুনা কলাম। ৯০০px-এর নিচে
   কলামটি উপরে উঠে আসে ও sticky হয়ে থাকে, যাতে ঘর বদলালেই চোখে পড়ে।    */
.pp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.st-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.st-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 7px;
  background: linear-gradient(135deg, #fdf7ff, #f9f0fc); border: 1px solid #f0dcf4;
  border-radius: 8px; padding: 8px; }
.st-sideh { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font: 800 12px/1.2 inherit; color: var(--nskA2, #9E2AA3); }
.st-sideh em { font: 500 10px/1.2 inherit; color: #8a7a8d; font-style: normal; }
.st-sidef { display: flex; flex-direction: column; gap: 3px; }
.st-bit { display: flex; align-items: center; gap: 6px; font: 500 10.5px/1.3 inherit; color: #6b5a6e; }
.st-bit i { width: 13px; text-align: center; color: var(--nskA, #C13FC6); font-size: 10px; flex: 0 0 auto; }
.st-bit b { margin-left: auto; color: #3d2c40; font-weight: 800; text-align: right; }
/* ফোনে/ট্যাবে: নমুনা কলামটি উপরে উঠে আসে ও **আটকে থাকে**, কিন্তু জায়গা
   কম নেয় — বাঁয়ে ছোট ছবি, ডানে সংখ্যাগুলো (উপর-নিচে নয়, পাশাপাশি)।    */
@media (max-width: 899px) {
  .pp { grid-template-columns: minmax(0, 1fr); }
  .st-side { order: -1; position: sticky; top: -10px; z-index: 3;
    display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 4px 8px; align-items: start; }
  .st-sideh { grid-column: 1 / -1; }
  .st-side .pp-prev.sm { align-self: center; }
  .st-side .pp-prev.sm canvas { max-height: 86px; object-fit: contain; object-position: left center; }
  .st-sidef { gap: 2px; }
  .st-bit { font-size: 10px; }
}
@media (max-width: 420px) {
  .st-side { grid-template-columns: 106px minmax(0, 1fr); }
  .st-bit i { display: none; }
}
.pp-note { display: flex; gap: 7px; align-items: flex-start; margin: 0;
  font: 500 11.5px/1.45 inherit; color: #5f4e63; background: linear-gradient(135deg, #fdf4ff, #f8edfb);
  border: 1px solid #f0dcf4; border-left: 3px solid var(--nskA, #C13FC6);
  padding: 7px 9px; border-radius: 5px; }
.pp-note i { color: var(--nskA2, #9E2AA3); font-size: 12px; margin-top: 1px; flex: 0 0 auto; }
.pp-note b { color: #3d2c40; }
.pp-cols { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.pp-sec { border: 1px solid var(--nskL, #e6dfe9); border-radius: 8px; background: #fff;
  padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pp-h { display: flex; align-items: center; gap: 6px; margin: 0;
  font: 700 12px/1 inherit; color: var(--nskA2, #9E2AA3); }
.pp-h i { font-size: 11px; opacity: .85; }
.pp-h em { font: 500 10.5px/1 inherit; color: #9a869d; font-style: normal; }
.pp-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #ecdcf0, transparent); }
.pp-h.gap { margin-top: 3px; padding-top: 9px; border-top: 1px dashed #eee0f1; }

/* ── জীবন্ত কাগজ-প্রিভিউ ── */
.pp-prev { border: 1px solid #eadcee; border-radius: 7px; padding: 10px 8px 7px;
  background: repeating-linear-gradient(45deg, #faf6fb 0 6px, #f6f0f8 6px 12px); }
.pp-stage { display: flex; align-items: center; justify-content: center; min-height: 148px; }
.pp-sheets { display: flex; align-items: center; justify-content: center; }
.pp-sheets.v { flex-direction: column; }
.pp-pg { position: relative; background: #fff; border: 1px solid #c9b6cc; border-radius: 2px;
  box-shadow: 0 3px 10px rgba(60, 20, 70, .16); flex: 0 0 auto; }
.pp-tbx { position: absolute; border: 1px dashed var(--nskA, #C13FC6);
  background: rgba(193, 63, 198, .13); border-radius: 1px; }
.pp-cap { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 7px;
  margin-top: 8px; text-align: center; }
.pp-cap b { font: 700 12.5px/1 inherit; color: #3d2c40; }
.pp-cap span { font: 500 11px/1.2 inherit; color: #6b5a6e; }
.pp-cap em { font: 600 10.5px/1 inherit; font-style: normal; color: var(--nskA2, #9E2AA3);
  background: #fbeefd; border: 1px solid #f0dcf4; border-radius: 20px; padding: 3px 8px; }

/* ── কাগজ চিপ ── */
.pp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; }
.pp-chip { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 3px;
  border: 1px solid var(--nskL, #e6dfe9); border-radius: 5px; background: #fff; cursor: pointer;
  transition: all .14s ease; min-width: 0; }
.pp-chip b { font: 700 12px/1 inherit; color: #3d2c40; }
.pp-chip span { font: 500 9px/1 inherit; color: #9a869d; white-space: nowrap; }
.pp-chip:hover { border-color: var(--nskA, #C13FC6); background: #fdf7ff; }
.pp-chip.on { background: linear-gradient(135deg, var(--nskA, #C13FC6), var(--nskA2, #9E2AA3));
  border-color: transparent; box-shadow: 0 2px 7px rgba(158, 42, 163, .32); }
.pp-chip.on b, .pp-chip.on span { color: #fff; }
.pp-chip.on span { opacity: .82; }

/* ── দিক ও পাতা (সেগমেন্ট) ── */
/* ⚠️ "দিক" ও "পাতা" পাশাপাশি রাখলে সরু কলামে টাইলের লেখা কাটা পড়ে
   ("পাশাপাশি" → "পাশা…") — তাই দুটি আলাদা সারিতে, পুরো চওড়ায় */
/* ⚠️ দিক ও পাতা উপর-নিচেই থাকে — পাশাপাশি বসালে দুটোর বোতাম মিলে ৪১৮px লাগে,
   অথচ কলাম মাত্র ৪০০px, তাই "আড়াআড়ি / উপর-নিচে" লেখা কেটে যেত। এমনিতেই
   প্রতিটি সারিতে ২–৩টি করে অপশন আছে (owner ২০২৬-০৮-১০)। */
.pp-two { display: flex; flex-direction: column; gap: 8px; }
.pp-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-lbl { font: 700 10.5px/1 inherit; color: #8a6f8d; }
.pp-seg { display: flex; border: 1px solid var(--nskL, #e6dfe9); border-radius: 6px;
  background: #faf6fb; padding: 2px; gap: 2px; }
.pp-sb { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px;
  border: 0; background: transparent; border-radius: 4px; cursor: pointer; padding: 5px 4px;
  color: #5f4e63; transition: all .14s ease; }
.pp-sb span { font: 600 10.5px/1 inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sb:hover { background: #f3e6f7; color: var(--nskA2, #9E2AA3); }
.pp-sb.on { background: linear-gradient(135deg, var(--nskA, #C13FC6), var(--nskA2, #9E2AA3)); color: #fff;
  box-shadow: 0 2px 6px rgba(158, 42, 163, .28); }
/* কাগজের ছোট আইকন — বর্তমান রং ধার করে, তাই সক্রিয় টাইলে সাদা হয় */
.pp-g { display: block; border: 1.4px solid currentColor; border-radius: 1.5px; opacity: .85; flex: 0 0 auto; }
.pp-g.v { width: 10px; height: 13px; }
.pp-g.h { width: 13px; height: 10px; }
.pp-g2 { display: flex; gap: 2px; opacity: .85; flex: 0 0 auto; }
.pp-g2.v { flex-direction: column; }
.pp-g2 b { display: block; border: 1.4px solid currentColor; border-radius: 1.5px; }
.pp-g2.h b { width: 7px; height: 12px; }
.pp-g2.v b { width: 12px; height: 6px; }

/* ── জমির আকার কার্ড — সবসময় অন্তত দুই কলাম (owner ২০২৬-০৮-১০) ──
   বিজোড় সংখ্যায় শেষ কার্ডটি একা পড়ে থাকত; এখন সে পুরো চওড়া নেয়। */
.pp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-items: stretch; }
.pp-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.pp-card { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%; box-sizing: border-box;
  padding: 6px 8px; border: 1px solid var(--nskL, #e6dfe9); border-radius: 6px; background: #fff;
  cursor: pointer; transition: all .14s ease; }
.pp-card > i { width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 6px; background: #f6ecf9; color: var(--nskA2, #9E2AA3); font-size: 12px; }
.pp-ct { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; text-align: left; }
.pp-ct b { font: 700 12px/1.2 inherit; color: #3d2c40; }
.pp-ct em { font: 500 10.5px/1.2 inherit; font-style: normal; color: #9a869d; }
.pp-tick { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; border: 1.5px solid #dfd0e3;
  display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: transparent;
  transition: all .14s ease; }
.pp-card:hover { border-color: var(--nskA, #C13FC6); background: #fdf7ff; }
.pp-card.on { border-color: var(--nskA, #C13FC6); background: #fbeefd; box-shadow: 0 0 0 2px rgba(193, 63, 198, .13); }
.pp-card.on > i { background: linear-gradient(135deg, var(--nskA, #C13FC6), var(--nskA2, #9E2AA3)); color: #fff; }
.pp-card.on .pp-tick { background: var(--nskA2, #9E2AA3); border-color: var(--nskA2, #9E2AA3); color: #fff; }

/* ── সুইচ সারি ── */
.pp-sw { position: relative; display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 6px 8px;
  border: 1px solid #f0e7f2; border-radius: 6px; background: #fdfafd; transition: all .14s ease; }
.pp-sw:hover { border-color: #e6d3ea; background: #fbf5fc; }
.pp-sw > input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-slide { position: relative; width: 34px; height: 19px; flex: 0 0 34px; border-radius: 20px;
  background: #dfd3e2; transition: background .18s ease; }
.pp-slide::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .28); transition: transform .18s ease; }
.pp-sw > input:checked + .pp-slide { background: linear-gradient(135deg, var(--nskA, #C13FC6), var(--nskA2, #9E2AA3)); }
.pp-sw > input:checked + .pp-slide::after { transform: translateX(15px); }
.pp-sw > input:focus-visible + .pp-slide { box-shadow: 0 0 0 3px rgba(193, 63, 198, .25); }
.pp-swt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-swt b { font: 600 11.5px/1.25 inherit; color: #3d2c40; }
.pp-swt em { font: 500 10.5px/1.25 inherit; font-style: normal; color: #9a869d; }

/* ── ট্যাব (পেজ সেটআপ · টেক্সট ও মাপ · আঁকা) ── */
.st-tabs { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--nskL, #e6dfe9);
  background: #faf6fb; border-radius: 8px; }
.st-tab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; border: 0; background: transparent; border-radius: 6px; cursor: pointer;
  color: #5f4e63; transition: all .15s ease; }
.st-tab i { font-size: 12px; opacity: .9; }
.st-tab span { font: 700 12px/1 inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-tab:hover { background: #f3e6f7; color: var(--nskA2, #9E2AA3); }
.st-tab.on { background: linear-gradient(135deg, var(--nskA, #C13FC6), var(--nskA2, #9E2AA3)); color: #fff;
  box-shadow: 0 2px 8px rgba(158, 42, 163, .3); }
.st-pane { display: flex; flex-direction: column; gap: 10px; }
.st-pane[hidden] { display: none; }

/* ── পেজ টেমপ্লেট ── */
.pp-tpl { display: flex; flex-direction: column; gap: 6px; border: 1px solid #f0e7f2;
  background: #fdfafd; border-radius: 8px; padding: 8px 9px; }
/* ⚠️ ফ্লেক্স-র‍্যাপে চিপগুলো এলোমেলো দুই লাইনে ভেঙে যেত (owner ২০২৬-০৮-১০:
   "এটা দু লাইনে কেন")। গ্রিডে প্রতিটি চিপ সমান চওড়া — এক সারিতেই ধরে,
   বেশি হলে পরের সারিও কলাম মিলিয়ে সাজানো থাকে। */
.pp-tplrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 4px; }
.pp-tchip { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--nskL, #e6dfe9);
  border-radius: 20px; background: #fff; overflow: hidden; transition: all .14s ease; }
.pp-tchip:hover { border-color: var(--nskA, #C13FC6); }
.pp-tchip.mine { border-color: #e2cfe6; background: #fdf6fe; }
.pp-tgo { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; cursor: pointer; padding: 5px 10px;
  font: 600 10.5px/1.2 inherit; color: #4a3a4d; }
.pp-tgo i { font-size: 10px; color: var(--nskA2, #9E2AA3); flex: 0 0 auto; }
.pp-tgo .pp-g, .pp-tgo .pp-g2 b { border-color: var(--nskA2, #9E2AA3); }
.pp-tgo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-tchip:hover .pp-tgo { color: var(--nskA2, #9E2AA3); }
.pp-tdel { border: 0; border-left: 1px solid #eee0f1; background: transparent; cursor: pointer;
  padding: 0 8px; color: #b39ab6; font-size: 10px; }
.pp-tdel:hover { background: #dc2626; color: #fff; }
.pp-tplsave { display: flex; gap: 5px; }
.pp-tplsave input { flex: 1; min-width: 0; height: 30px; box-sizing: border-box; padding: 0 9px;
  border: 1px solid var(--nskL, #e6dfe9); border-radius: 5px; background: #fff;
  font: 500 12px/1 inherit; color: #0f172a; }
.pp-tplsave input:focus { outline: 0; border-color: var(--nskA, #C13FC6);
  box-shadow: 0 0 0 2px rgba(193, 63, 198, .16); }
.pp-tplsave .nsk-btn { flex: 0 0 auto; height: 30px; }

/* ── ফন্টের নমুনা ── */
.pp-fprev { display: flex; flex-direction: column; gap: 3px; border: 1px solid #eadcee;
  border-radius: 6px; padding: 7px 9px; background: #fff; }
.pp-fpb { font-size: 14px; line-height: 1.45; color: #2b2130; }
.pp-fpe { font-size: 12.5px; line-height: 1.4; color: #6b5a6e; }

/* ── ইঙ্গিত ও মাপের নমুনা ── */
.pp-hint { display: flex; gap: 6px; margin: 0; font: 500 11px/1.45 inherit; color: #8a7a8d; }
.pp-hint i { color: #d9a521; font-size: 11px; margin-top: 1px; flex: 0 0 auto; }
.pp-prev.sm { padding: 0; overflow: hidden; }
.pp-prev.sm canvas { display: block; width: 100%; height: auto; border-radius: 6px; }

/* ── ঘর: টাইটেল ব্লক ও অন্যান্য গ্রিড ──
   মালিকের নির্দেশ ২০২৬-০৮-১০: অপশন সবসময় দুই কলামে (ফোনেও) — এক কলামে
   নামিয়ে দেওয়া হয় না; বদলে ফোনে লেখা ছোট করে জায়গা বের করা হয়। */
.pp-grid, .pp-tbf { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pp-grid[hidden], .pp-tbf[hidden] { display: none; }
.pp-swgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-items: stretch; }
.pp-fld > select { width: 100%; box-sizing: border-box; height: 30px; border: 1px solid var(--nskL, #e6dfe9);
  border-radius: 5px; background: #fff; color: #0f172a; padding: 0 6px; font: 500 12.5px/1 inherit; }
.pp-fld > select:focus { outline: 0; border-color: var(--nskA, #C13FC6);
  box-shadow: 0 0 0 2px rgba(193, 63, 198, .16); }
.pp-fld > .nsk-sw { width: 100%; height: 30px; flex: none; border-radius: 5px; }
.pp-fld > .nsk-ltb { width: 100%; max-width: none; height: 30px; }
.pp-fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-fld.wide { grid-column: 1 / -1; }
.pp-fld > span { font: 600 10.5px/1 inherit; color: #8a6f8d; }
.pp-fld > input { width: 100%; box-sizing: border-box; height: 30px; border: 1px solid var(--nskL, #e6dfe9);
  border-radius: 5px; background: #fff; color: #0f172a; padding: 0 8px; font: 500 12.5px/1 inherit; }
.pp-fld > input:focus { outline: 0; border-color: var(--nskA, #C13FC6);
  box-shadow: 0 0 0 2px rgba(193, 63, 198, .16); }

@media (max-width: 780px) {
  .pp-cols { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pp-stage { min-height: 124px; }
}
/* ── ফোনে ছোট লেখা — দুই কলাম ধরে রাখার জন্য (owner ২০২৬-০৮-১০) ── */
@media (max-width: 560px) {
  .pp-cols, .pp-grid, .pp-tbf, .pp-swgrid, .pp-cards { gap: 4px; }
  .pp-two { gap: 6px; }
  .pp-sec { padding: 7px 7px 8px; gap: 6px; }
  .pp-h { font-size: 11px; }
  .pp-h em { display: none; }
  .pp-fld > span { font-size: 9.5px; }
  .pp-fld > input, .pp-fld > select, .pp-fld > .nsk-sw, .pp-fld > .nsk-ltb { height: 28px; font-size: 11.5px; }
  .pp-sw { gap: 6px; padding: 5px 6px; align-items: flex-start; }
  .pp-slide { width: 30px; height: 17px; flex: 0 0 30px; margin-top: 1px; }
  .pp-slide::after { width: 13px; height: 13px; }
  .pp-sw > input:checked + .pp-slide::after { transform: translateX(13px); }
  .pp-swt b { font-size: 10.5px; }
  .pp-swt em { font-size: 9px; }
  .pp-card { gap: 5px; padding: 5px 6px; }
  .pp-card > i { width: 22px; height: 22px; flex: 0 0 22px; font-size: 10px; }
  .pp-ct b { font-size: 10.5px; }
  .pp-ct em { font-size: 9px; }
  .pp-tick { width: 15px; height: 15px; flex: 0 0 15px; font-size: 8px; }
  .pp-chip b { font-size: 11px; }
  .pp-chip span { font-size: 8.5px; }
  .pp-note, .pp-hint { font-size: 10.5px; }
  .pp-fprev { padding: 6px 8px; }
  .pp-fpb { font-size: 12.5px; }
  .pp-fpe { font-size: 11.5px; }
  .pp-cap b { font-size: 11.5px; }
  .pp-cap span, .pp-cap em { font-size: 10px; }
  .pp-tplrow { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
  .pp-tgo { font-size: 9.5px; padding: 4px 8px; gap: 4px; }
  .pp-lbl { font-size: 9.5px; }
}
@media (max-width: 430px) {
  .st-tab { gap: 4px; padding: 8px 3px; }
  .st-tab i { display: none; }
  .st-tab span { font-size: 11px; }
  .pp-chips { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
  .pp-sb { padding: 5px 2px; }
  .pp-sb span { font-size: 9.5px; }
  .pp-tplsave input { font-size: 11px; }
}

/* ── টুল বোতামের কী-বাজ ── */
.nsk-key { position: absolute; top: 1px; right: 3px; font: 700 8px/1 monospace; font-style: normal;
  color: #a98fac; letter-spacing: .3px; pointer-events: none; }
.nsk-t { position: relative; }
.nsk-t.on .nsk-key { color: rgba(255, 255, 255, .85); }

/* ── কমান্ড লাইন ── */
.nsk-cmd { position: absolute; left: 8px; bottom: 8px; width: min(420px, calc(100% - 16px)); z-index: 40;
  display: flex; flex-direction: column; gap: 4px; }
.nsk-cmd-list { background: #fff; border: 1px solid var(--nskL); border-radius: 6px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(37, 99, 235, .2); max-height: 46vh; overflow-y: auto; }
.nsk-cmd-i { display: flex; align-items: center; gap: 7px; padding: 6px 9px; cursor: pointer;
  font: 600 12.5px/1.2 inherit; color: #3b2c3f; border-bottom: 1px solid #f4eaf6; }
.nsk-cmd-i:last-child { border-bottom: 0; }
.nsk-cmd-i.on, .nsk-cmd-i:hover { background: linear-gradient(135deg, var(--nskA), var(--nskA2)); color: #fff; }
.nsk-cmd-i span { margin-left: auto; font: 500 10.5px/1 monospace; opacity: .7; }
.nsk-cmd-i kbd { background: #f4eaf6; color: #7a5a7d; border-radius: 3px; padding: 2px 5px;
  font: 700 10px/1 monospace; }
.nsk-cmd-i.on kbd { background: rgba(255, 255, 255, .25); color: #fff; }
.nsk-cmd-i.muted { color: #a98fac; cursor: default; }
.nsk-cmd-in { display: flex; align-items: center; gap: 7px; background: #fff; border: 2px solid var(--nskA);
  border-radius: 6px; padding: 0 9px; height: 38px; box-shadow: 0 6px 18px rgba(158, 42, 163, .25); }
.nsk-cmd-in i { color: var(--nskA2); font-size: 12px; }
.nsk-cmd-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 600 13.5px/1 inherit; color: #2b2130; }

/* ── শর্ট কমান্ড তালিকা ── */
.nsk-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.nsk-kg h5 { margin: 0 0 4px; font: 700 12px/1 inherit; color: var(--nskA2, #9E2AA3); }
.nsk-kg table { width: 100%; border-collapse: collapse; }
.nsk-kg td { padding: 2px 4px; font: 500 11.5px/1.35 inherit; color: #4a3a4d; vertical-align: top; }
.nsk-kg td:first-child { width: 1%; white-space: nowrap; }
.nsk-kg kbd { display: inline-block; background: #f4eaf6; border: 1px solid #e6dfe9; border-bottom-width: 2px;
  border-radius: 3px; padding: 1px 5px; font: 700 10.5px/1.4 monospace; color: #6b3a6e; }
.nsk-kdash { color: #c9b6cc; }
.nsk-kali { color: #9a869d; font: 500 10.5px/1.35 monospace; opacity: .75; }

/* ── রং বক্স (AutoCAD ACI ধাঁচ) ── */
.nsk-cbox { z-index: 99996; }
.nsk-mbox.cb { width: min(560px, 100%); }
.cb-lbl { font: 700 11.5px/1 inherit; color: #64748b; margin-bottom: 4px; }
.cb-grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 1px; background: #cbd5e1;
  border: 1px solid #94a3b8; padding: 1px; }
.cb-c { width: 100%; aspect-ratio: 1; min-height: 12px; border: 0; padding: 0; cursor: pointer;
  outline-offset: -2px; }
.cb-c:hover { outline: 2px solid #0f172a; z-index: 2; position: relative; }
.cb-c.on { outline: 2px solid #fff; box-shadow: 0 0 0 3px #0f172a; z-index: 3; position: relative; }
.cb-c.big { aspect-ratio: auto; width: 26px; height: 24px; border: 1px solid #94a3b8; }
.cb-info { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; font: 500 11.5px/1.3 inherit; color: #475569; }
.cb-info b { color: #0f172a; }
.cb-rowwrap { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.cb-row { display: flex; gap: 2px; flex-wrap: wrap; }
.cb-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 6px;
  border-top: 1px solid var(--nskL, #e6dfe9); }
.cb-hex { display: flex; align-items: center; gap: 5px; font: 600 12px/1 inherit; color: #4a3a4d; }
.cb-hex input { width: 92px; height: 28px; box-sizing: border-box; border: 1px solid var(--nskL, #e6dfe9);
  border-radius: 4px; padding: 0 7px; font: 600 12.5px/1 monospace; color: #0f172a; }
.cb-true { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 15px; }
.cb-true input { width: 30px; height: 26px; padding: 0; border: 1px solid var(--nskL, #e6dfe9);
  border-radius: 4px; background: #fff; cursor: pointer; }
.cb-prev { width: 46px; height: 26px; border: 1px solid #94a3b8; border-radius: 4px; margin-left: auto; }
@media (max-width: 620px) { .cb-c { min-height: 13px; } .cb-prev { margin-left: 0; } }

/* ── সাহায্য ── */
.nsk-help { display: flex; gap: 8px; align-items: flex-start; }
.nsk-hlist { flex: 0 0 138px; display: flex; flex-direction: column; gap: 3px; max-height: 62vh; overflow: auto; }
.nsk-helpb { text-align: left; padding: 6px 8px; border: 1px solid var(--nskL, #e6dfe9); border-radius: 4px;
  background: #fff; color: #4a3a4d; font: 600 11.5px/1.2 inherit; cursor: pointer; }
.nsk-helpb:hover { border-color: var(--nskA, #C13FC6); }
.nsk-helpb.on { background: linear-gradient(135deg, var(--nskA, #C13FC6), var(--nskA2, #9E2AA3)); color: #fff; border-color: transparent; }
.nsk-hmain { flex: 1; min-width: 0; }
.nsk-hmain canvas { width: 100%; height: auto; max-width: 520px; border-radius: 5px; background: #fff; }
.nsk-hmain h4 { margin: 7px 0 3px; font: 700 13px/1 inherit; color: var(--nskA2, #9E2AA3); }
.nsk-hmain ol { margin: 0; padding-left: 18px; }
.nsk-hmain li { font: 500 12px/1.5 inherit; color: #4a3a4d; }

/* ── সেভ তালিকা ── */
.nsk-docs { display: grid; gap: 4px; }
.nsk-doc { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid var(--nskL, #e6dfe9); border-radius: 4px; }
.nsk-doc b { font: 700 12.5px/1 inherit; color: #2b2130; }
.nsk-doc span { flex: 1; font: 500 11px/1 inherit; color: #8a6f8d; }
/* ═══ ধাপ ৩ — ট্রাভার্স টেবিল (বেয়ারিং দিয়ে আঁকা) ═══ */
.tv { display: flex; flex-direction: column; gap: 7px; }
.tv-head, .tv-row { display: grid; grid-template-columns: 24px 1fr 1.25fr 1.3fr 34px;
  gap: 5px; align-items: center; }
.tv-head { font: 700 10.5px/1.2 inherit; color: #8a6f8d; padding: 0 2px; }
.tv-rows { display: flex; flex-direction: column; gap: 5px; max-height: 46vh; overflow-y: auto; }
.tv-n { font: 700 11.5px/1 inherit; color: var(--nskA2); text-align: center; }
.tv-row .nsk-in { height: 34px; font-size: 12.5px; }
.tv-out { font: 600 10.5px/1.25 inherit; color: #16a34a; overflow: hidden; text-overflow: ellipsis; }
.tv-out.err { color: #dc2626; }
.tv-row .tv-del { width: 34px; height: 34px; padding: 0; }
.tv-sum { display: flex; flex-direction: column; gap: 3px; padding: 7px 8px;
  background: linear-gradient(135deg, #fdf7ff, #f7ecfa); border: 1px solid #f0dcf4; border-radius: 7px; }
.tv-sum span { font: 600 11.5px/1.35 inherit; color: #5f4e63; display: flex; align-items: center; gap: 6px; }
.tv-sum b { color: #2b2130; }
.tv-sum i { color: var(--nskA2); width: 14px; text-align: center; }
.tv-sum .tv-good { color: #15803d; } .tv-sum .tv-good i { color: #16a34a; }
.tv-sum .tv-bad { color: #b91c1c; } .tv-sum .tv-bad i { color: #dc2626; }
@media (max-width: 599px) {
  /* ফোনে "যেভাবে বসবে" লেখাটা নিচের সারিতে — নইলে ঘর দুটো চিপে যায় */
  .tv-head { grid-template-columns: 22px 1fr 1.2fr 32px; }
  .tv-head .tv-out { display: none; }
  .tv-row { grid-template-columns: 22px 1fr 1.2fr 32px; row-gap: 2px; }
  .tv-row .tv-out { grid-column: 2 / 4; }
  .tv-row .nsk-in { height: 38px; }
  .tv-row .tv-del { width: 32px; height: 38px; }
  .tv-rows { max-height: 40vh; }
}

/* ধাপ ১ — ফাইলে ব্যাকআপের সারি (সেভ করা স্কেচের মডালে) */
.nsk-bakrow { margin-top: 10px; padding-top: 9px; border-top: 1px dashed #ead9ee; }
.nsk-bakrow .nsk-note i { color: #d97706; }
.nsk-bakrow .nsk-prow { margin-top: 7px; }
@media (max-width: 599px) { .nsk-doc { flex-wrap: wrap; } .nsk-doc span { flex: 1 0 100%; order: 3; } }

/* ── টোস্ট ── */
.nsk-toast { position: absolute; left: 50%; top: 44px; transform: translate(-50%, -14px);
  background: rgba(43, 33, 48, .94); color: #fff; font: 600 12px/1.3 inherit; padding: 7px 12px;
  border-radius: 18px; opacity: 0; pointer-events: none; transition: all .22s ease; z-index: 40;
  max-width: 84%; text-align: center; }
.nsk-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── "আরও" মেনু (মোবাইলে বাড়তি বোতামগুলো এখানে যায়) ── */
.nsk-b.only-mob { display: none; }
.nsk-morebox { display: none; position: absolute; right: 4px; top: 100%; z-index: 30;
  background: #fff; border: 1px solid var(--nskL); border-radius: 6px; padding: 4px;
  box-shadow: 0 10px 28px rgba(37, 99, 235, .22); max-height: 62vh; overflow: auto;
  /* ⚠️⚠️ `minmax(0,1fr)` **জরুরি** — শুধু `1fr` দিলে ট্র্যাকের সর্বনিম্ন মাপ
     হয় লেখার পুরো দৈর্ঘ্য (min-content)। নিচে বোতামের লেখা আসে `title`
     থেকে, আর কারও title লম্বা হলেই (যেমন "নকশা পরীক্ষা করো — কোন প্রান্ত…")
     পুরো মেনু ৯২১px চওড়া হয়ে **পর্দার বাইরে** চলে যেত — ৩৭৫px ফোনে বাঁ দিকে
     −৫৫০px, অর্ধেকের বেশি বোতাম অগম্য (২০২৬-০৮-১৮ মেপে ধরা)।            */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px;
  min-width: 232px; max-width: calc(100vw - 12px); }
.nsk-morebox.on { display: grid; }
.nsk-morebox .nsk-b { width: auto; min-width: 0; justify-content: flex-start; gap: 7px; padding: 0 8px; height: 34px; }
.nsk-morebox .nsk-b::after { content: attr(title); font: 600 11.5px/1 inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ── মোবাইল ── */
@media (max-width: 780px) {
  .nsk { height: calc(100dvh - 58px); border-radius: 0; }
  .nsk-bar { position: relative; gap: 4px; padding: 4px; flex-wrap: nowrap; }
  .nsk-name { flex: 1 1 60px; min-width: 60px; }
  .nsk-b.only-mob { display: inline-flex; }
  .nsk-body { flex-direction: column-reverse; }
  /* ── সব টুল একসাথে দৃশ্যমান (owner ২০২৬-০৯) ──
     আগে ছিল দুই সারি + পাশে স্ক্রল, ফলে মাপ/টেক্সট/মোছা ইত্যাদি পর্দার বাইরে
     চলে যেত আর কাজের সময় টেনে আনতে হতো। এখন প্রস্থ অনুযায়ী যত কলাম ধরে ততগুলো
     বসিয়ে বাকিগুলো নিচের সারিতে র‍্যাপ করে — কোনো হরাইজন্টাল স্ক্রল নেই,
     ২০টি টুলই দেখা যায় (৩৬০px-এ ৭ কলাম × ৩ সারি)। উপরে-নিচের খালি জায়গা এতে কাজে লাগে। */
  .nsk-tools { width: 100%; flex: 0 0 auto; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 3px; padding: 3px; overflow-x: hidden; overflow-y: auto; max-height: 46vh;
    border-right: 0; border-top: 1px solid var(--nskL);
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .nsk-t { min-height: 44px; padding: 3px 1px; }        /* G-05 — ন্যূনতম ৪৪px টাচ টার্গেট */
  .nsk-t i { font-size: 14px; }
  .nsk-t span { font-size: 8.5px; }
  /* ⚠️ G-01 (স্পেসিফিকেশন v1.0, ২০২৬-০৮-১২): **কোনো প্যানেল স্ক্রিনের ৪০%-এর
     বেশি ঢাকবে না** — আগে ৫৬% ছিল (owner ২০২৬-০৮-১০, "ঘরগুলো ধরে না")। ভেতরের
     .nsk-pbody স্ক্রল করে বলে সব ঘরে এখনো পৌঁছানো যায়, আর নকশা ঢাকা পড়ে না। */
  .nsk-pnl { top: auto; bottom: 4px; right: 4px; left: 4px; width: auto; max-height: 40%;
    display: flex; flex-direction: column; overflow: hidden; }
  /* ⚠️ উপরের `display:flex` ব্রাউজারের `[hidden]{display:none}` কে হারিয়ে দিত →
     প্যানেল/লেয়ার আর বন্ধই হতো না (owner: "লেয়ার প্যানেল যাচ্ছে না", ২০২৬-০৮-০৯) */
  .nsk-pnl[hidden] { display: none !important; }
  /* ⚠️ ভেতরের স্ক্রলারের নিজস্ব max-height (46vh) প্যানেলের চেয়ে বড় হয়ে যেত —
     ফলে হেডার ও ✕ বোতাম স্ক্রল হয়ে হারিয়ে যেত (২০২৬-০৮-০৯ অডিট) */
  .nsk-pnl > .nsk-pnl-h { flex: 0 0 auto; }
  .nsk-symwrap, .nsk-roadwrap, .nsk-hwrap { max-height: none; flex: 1 1 auto; min-height: 0; }
  #nskLyrList { overflow: auto; min-height: 0; }
  /* ⚠️ "নির্বাচিত (বিস্তারিত)" প্যানেলে কোনো স্ক্রলার ছিল না — প্যানেলের
     overflow:hidden-এর নিচে নকশার সাইজ/কোণ ও মুছুন বোতাম কাটা পড়ে থাকত,
     ফোনে ওখানে পৌঁছানোই যেত না (owner ২০২৬-০৮-১০)। এখন বডিটাই স্ক্রল করে। */
  .nsk-pbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .cb-c { min-height: 16px; }               /* আঙুলে ধরার মতো */
  .cb-grid { gap: 1px; }
  /* ফোনে স্টাইল বার — সব কন্ট্রোল (চেইনসহ) এক লাইনে; দরকারে পাশে স্ক্রল।
     আগে wrap করত বলে চেইন নিচে নেমে যেত (owner ২০২৬-০৮-০৯: এক লাইনে আনো)।
     পপ-আপ এখন position:fixed বলে overflow-x আর তা ক্লিপ করে না। */
  .nsk-style { gap: 5px; padding: 4px 6px; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
  .nsk-style::-webkit-scrollbar { display: none; }
  .nsk-style > * { flex: 0 0 auto; }
  .nsk-style-lbl { display: none; }
  .nsk-style select { max-width: 88px; font-size: 11px; }
  .nsk-lyrchip { max-width: 116px; padding: 0 6px; }
  .nsk-lyrchip .nsk-lyrname { max-width: 62px; }
  /* পপ-আপ fixed — স্টাইল বার/`.nsk` overflow-এ যেন কাটা না পড়ে; top JS বসায় */
  .nsk-lyrpop { position: fixed; left: 6px; right: 6px; width: auto; max-height: 68vh; overflow: auto; }
  /* ── AI সাজেশন বার — ফোনে এক সারিতে, পাশে স্ক্রল (আগে অনেক বড় হয়ে
     ক্যানভাসের বড় অংশ ঢেকে দিত) ── */
  .nsk-ai { bottom: 6px; left: 4px; right: 4px; transform: translateY(130%);
    max-width: none; width: auto; justify-content: flex-start;
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 3px;
    padding: 3px 5px; border-radius: 16px; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; scrollbar-width: none; }
  .nsk-ai::-webkit-scrollbar { display: none; }
  .nsk-ai.on { transform: translateY(0); }
  .nsk-ai-lbl { font-size: 10px; gap: 3px; padding: 0 2px; flex: 0 0 auto; }
  .nsk-ai-lbl span { display: none; }            /* শুধু ✨ আইকন */
  .nsk-ai .nsk-chip { flex: 0 0 auto; padding: 5px 9px; font-size: 11px;
    max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nsk-ai .nsk-chip.x { position: sticky; right: 0; padding: 5px 7px; background: #fff;
    box-shadow: -6px 0 8px -4px rgba(255, 255, 255, .95); }
  .nsk-pop { width: min(268px, calc(100vw - 20px)); }
  .nsk-help { flex-direction: column; }
  .nsk-hlist { flex: 0 0 auto; flex-direction: row; overflow-x: auto; width: 100%; }
  .nsk-helpb { flex: 0 0 auto; }
  /* ফোনে সাইজ/কোণের ঘর-বোতাম আঙুলের মাপে — কিন্তু সারি দুটিই থাকে */
  .nsk-hsz-b { width: 38px; height: 36px; font-size: 19px; }
  .nsk-hsz-b.r { font-size: 12px; }
  .nsk-hsz-num { width: 66px; height: 36px; font-size: 13.5px; }
  .nsk-mbox.cb { width: 100%; }
  .nsk-cmd { left: 4px; right: 4px; bottom: 4px; width: auto; }
  .nsk-key { display: none; }              /* ফোনে কী-বাজ দরকার নেই */
  .nsk-keys { grid-template-columns: 1fr; }
}
/* ── ফোন আড়াআড়ি (landscape) — উচ্চতা কম, চওড়া বেশি ──
   নিচের টুল-স্ট্রিপ ৯৭px খেয়ে ক্যানভাস প্রায় থাকত না; তাই বাঁ পাশে রেল */
@media (max-width: 900px) and (max-height: 540px) {
  .nsk { height: calc(100dvh - 58px); }
  .nsk-body { flex-direction: row; }
  .nsk-tools { width: 112px; flex: 0 0 112px; display: grid;
    grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: min-content;
    overflow-x: hidden; overflow-y: auto; border-top: 0; border-right: 1px solid var(--nskL); }
  .nsk-t { min-height: 34px; padding: 2px 1px; }
  .nsk-t i { font-size: 13px; }
  .nsk-t span { font-size: 8px; }
  .nsk-pnl { top: 4px; bottom: 4px; left: auto; right: 4px; width: 260px; max-height: none; }
  .nsk-bar { padding: 2px 4px; }
  .nsk-b, .nsk-name { height: 28px; }
  .nsk-morebox { max-height: 78vh; }
}

/* স্কেচ বোর্ডে থাকা অবস্থায় মেসেজ-বোতাম টুলের উপর বসে যেত */
body.nsk-on .fab-msg { display: none !important; }
@media (min-width: 1000px) {
  body.has-nav .nsk { height: calc(100dvh - 56px); }
}

/* ── ক্লিক-মোডে ভাসমান কাজের বার (রাস্তা/বহুভুজ আঁকার সময়) ────────────────
   কাগজের উপরেই — টুল রেল খুঁজতে হয় না, ফোনেও বুড়ো আঙুলের নাগালে থাকে।     */
.nsk-drawbar { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 8;
  display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: rgba(255, 255, 255, .97);
  border: 1px solid var(--nskL); border-radius: 6px; box-shadow: 0 4px 16px rgba(37, 99, 235, .2);
  max-width: calc(100% - 12px); overflow: auto; }
.nsk-drawbar[hidden] { display: none !important; }
.nsk-db-n { font: 700 11px/1 inherit; color: var(--nskA2); white-space: nowrap; padding: 0 4px; }
.nsk-db-b { display: inline-flex; align-items: center; gap: 4px; height: 26px; box-sizing: border-box;
  padding: 0 8px; border: 1px solid var(--nskL); border-radius: 4px; background: #fff; color: #4a3a4d;
  font: 600 11px/1 inherit; cursor: pointer; white-space: nowrap; transition: all .14s ease; }
.nsk-db-b[hidden] { display: none !important; }
.nsk-db-b i { font-size: 11px; }
.nsk-db-b:hover { border-color: var(--nskA); color: var(--nskA2); }
.nsk-db-b.ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.nsk-db-b.ok:hover { background: #fff; color: #16a34a; }
.nsk-db-b.x:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

/* ── প্যানেল ছোট করা (নকশা বেছে নেওয়ার পর কাগজ খালি) ── */
.nsk-min { width: 22px; height: 22px; margin-left: auto; border: 0; background: #f4eaf6; color: #7a5a7d;
  border-radius: 4px; cursor: pointer; font-size: 10px; transition: all .14s ease; }
.nsk-min:hover { background: var(--nskA); color: #fff; }
.nsk-pnl.mini { max-height: none !important; overflow: visible; width: auto; min-width: 148px; padding: 4px 6px; }
.nsk-pnl.mini > *:not(.nsk-pnl-h) { display: none !important; }
.nsk-pnl.mini > .nsk-pnl-h { border-bottom: 0; margin: 0; padding: 0; }
@media (max-width: 900px) { .nsk-pnl.mini { left: auto; right: 4px; bottom: 4px; } }

/* ফুটে চওড়া বসানোর ছোট চিপ */
.nsk-kb.sm { flex: 0 0 auto; height: 24px; padding: 0 8px; font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════════════
   লেয়ার তালিকা — "নীল-রেল স্ট্রোক টেবিল"  (owner ২০২৬-০৮-১০)
   এক সারিতেই রং · নাম · সংখ্যা · লাইন টাইপ · পুরুত্ব · চোখ · তালা · মেনু।
   সারি ২৬px (ফোনে ৩৪px)। বোর্ড অ্যাকসেন্ট ম্যাজেন্টা, কিন্তু সব shadow নীল।
   পুরোনো .nsk-lyr / .nsk-lp-row নিয়ম আর ব্যবহার হয় না (রাখা আছে, ক্ষতি করে না)।
   ═══════════════════════════════════════════════════════════════════════════ */

/* প্যানেল হেডারের ছোট বোতামজোড়া */
.nl-hbs { margin-left: auto; display: flex; gap: 3px; }
.nsk-pnl-h .nsk-x { margin-left: 4px; }
.nl-hb { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; font-size: 10.5px; color: #9a86a0; cursor: pointer;
  transition: background .14s ease, color .14s ease; }
.nl-hb:hover { background: var(--nskA); color: #fff; }
.nl-hb:focus-visible { outline: 2px solid var(--nskA); outline-offset: -2px; }

/* ── তালিকা: একটাই কলাম-ভেরিয়েবল সেট, হেডার ও সব সারি একসাথে বদলায় ── */
.nl-list {
  --nlR: 14px; --nlQ: 22px; --nlS: 50px; --nlB: 22px; --nlM: 20px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 3px 3px; margin: 0 0 6px;
  max-height: 252px; overflow: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #f6f8fe; border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(37, 99, 235, .07);
  scrollbar-width: thin; scrollbar-color: #d9c8dd transparent;
}
.nl-list::-webkit-scrollbar { width: 6px; }
.nl-list::-webkit-scrollbar-thumb { background: #e0d1e4; border-radius: 3px; }

/* হেডার আর সারি — হুবহু এক গ্রিড, তাই কলাম পিক্সেল-নিখুঁত মেলে */
.nl-hd, .nl-row {
  display: grid; align-items: center; gap: 0;
  grid-template-columns: var(--nlR) minmax(0, 1fr) var(--nlQ) var(--nlS) var(--nlB) var(--nlB) var(--nlM);
  padding: 0 4px 0 0; border: 1px solid transparent; box-sizing: border-box;
}
.nl-row, .nl-row * { box-sizing: border-box; }
/* সারি যেন চেপে না যায় — ফোনের বটম-শিটে জায়গা কম পড়লে flex ওদের ছোট করে ফেলত */
.nl-hd, .nl-row { flex: 0 0 auto; }

/* ══ কলাম শিরোনাম — ১৬px, sticky, একবারই ══ */
.nl-hd { position: sticky; top: 0; z-index: 3; height: 16px;
  background: linear-gradient(180deg, #fdfbff, #f2ecf7);
  border-bottom-color: var(--nskL); color: #a08aa3; font: 700 8.5px/1 inherit; }
.nl-hd-c { display: flex; align-items: center; justify-content: center; min-width: 0; }
.nl-hd-nm { padding-left: 5px; font: 700 9px/1 inherit; color: #8a6f8d; letter-spacing: .2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-hd i { font-size: 9px; opacity: .85; }
.nl-hd-rail { width: 4px; height: 10px; border-radius: 2px;
  background: linear-gradient(180deg, var(--nskA), var(--nskA2)); }
.nl-hd-st { gap: 4px; }
.nl-hd-lt { width: 14px; height: 2px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, #a08aa3 0 4px, transparent 4px 6.5px); }
.nl-hd-lw { width: 10px; height: 3px; border-radius: 1px; background: #a08aa3; }
.nl-hd-b { cursor: pointer; border-radius: 2px; transition: background .13s ease, color .13s ease; }
.nl-hd-b:hover { background: rgba(193, 63, 198, .14); color: var(--nskA2); }
.nl-hd-b:focus-visible { outline: 2px solid var(--nskA); outline-offset: -2px; }

/* ══ সারি ══ */
.nl-row { height: 26px; position: relative; overflow: hidden; cursor: pointer; background: #fff;
  border-color: #eef1f8; border-radius: 3px; box-shadow: 0 1px 2px rgba(37, 99, 235, .07);
  transition: background .16s ease, box-shadow .16s ease, border-color .16s ease; }
.nl-row:hover { background: #fdfaff; border-color: #f0e3f4;
  box-shadow: 0 2px 7px rgba(37, 99, 235, .14); }
.nl-row:focus-visible { outline: 0; border-color: var(--nskA);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .26); }
.nl-row.cur { background: linear-gradient(135deg, #fdf3fe 0%, #f6e2fa 100%); border-color: #e9c9ef;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .18), inset 0 1px 0 rgba(255, 255, 255, .9); }
.nl-row.cur .nl-nmt { color: var(--nskA2); font-weight: 800; }
.nl-row.off { background: #fbfafc; box-shadow: none; }
.nl-row.off .nl-nmt { color: #a89bab; }
.nl-row.off .nl-st, .nl-row.off .nl-q { opacity: .42; }
.nl-row.lk { box-shadow: 0 1px 2px rgba(37, 99, 235, .07), inset -3px 0 0 #fcd34d; }

/* ── ১ · রঙের রেল (২৬px চিপের বদলে ৪px দাগ — ১২px জায়গা বাঁচে) ── */
.nl-rail { align-self: stretch; position: relative; cursor: pointer; }
.nl-rail::before { content: ""; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 4px;
  border-radius: 2px; background: var(--nlc, #1f2937);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .75), 0 1px 3px rgba(37, 99, 235, .30);
  transition: width .16s ease, top .16s ease, bottom .16s ease, box-shadow .16s ease; }
.nl-rail:hover::before, .nl-rail:focus-visible::before { width: 6px; top: 2px; bottom: 2px;
  box-shadow: 0 0 0 1px #fff, 0 2px 7px rgba(37, 99, 235, .48); }
.nl-rail:focus-visible { outline: 0; }
.nl-row.cur .nl-rail::before { top: 2px; bottom: 2px;
  box-shadow: 0 0 0 1px #fff, 0 2px 8px rgba(37, 99, 235, .42); }
.nl-row.off .nl-rail::before { opacity: .55;
  background: repeating-linear-gradient(135deg, var(--nlc, #1f2937) 0 2px, #fff 2px 4px); }

/* ── ২ · নাম (একমাত্র ইলাস্টিক সেল → এক পিক্সেলও ফাঁকা থাকে না) ── */
.nl-nm { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 0 4px 0 5px; overflow: hidden; }
.nl-nmt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 11.5px/1.15 inherit; color: var(--nskT); letter-spacing: .1px; }
.nl-mv { flex: 0 0 auto; font-size: 9.5px; color: #16a34a; }
.nl-nmi { width: 100%; height: 19px; padding: 0 4px; outline: 0; border: 1px solid var(--nskA);
  border-radius: 2px; background: #fff; font: 600 11.5px/1 inherit; color: var(--nskT);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .18); }

/* ── ৩ · সংখ্যা (চাপলে ওই লেয়ারের সব কাজ নির্বাচিত) ── */
.nl-q { display: flex; align-items: center; justify-content: flex-end; height: 100%;
  padding-right: 4px; cursor: pointer; border-radius: 2px;
  font: 700 9.5px/1 inherit; color: #a795aa; font-variant-numeric: tabular-nums;
  transition: color .13s ease, background .13s ease; }
.nl-q:hover { background: rgba(193, 63, 198, .12); color: var(--nskA2); }
.nl-q.z { opacity: .45; }
.nl-q:focus-visible { outline: 2px solid var(--nskA); outline-offset: -2px; }

/* ── ৪ · স্ট্রোক ওয়েল: লাইন টাইপ + পুরুত্ব, আসল চেহারায়, এক কম্পোনেন্টে ── */
.nl-st { display: flex; align-items: stretch; height: 20px; justify-self: center; width: 100%;
  border: 1px solid #e8dbec; border-radius: 3px; overflow: hidden;
  background: linear-gradient(180deg, #fff, #fcfafd);
  box-shadow: inset 0 1px 2px rgba(37, 99, 235, .06); }
.nl-lt, .nl-lw { display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .14s ease; }
.nl-lt { flex: 1 1 auto; min-width: 0; }
.nl-lw { flex: 0 0 21px; border-left: 1px solid #efe6f2; }
.nl-lt:hover, .nl-lw:hover { background: #f7ecfa; }
.nl-lt:focus-visible, .nl-lw:focus-visible { outline: 2px solid var(--nskA); outline-offset: -2px; }
.nl-dash { display: block; width: 19px; height: 2px; border-radius: 1px; }
.nl-bar { display: block; width: 13px; border-radius: 1px; background: var(--nlc, #1f2937); }

/* ── ৫-৭ · অবস্থা আইকন — অর্থ থাকলেই রং পায় ── */
.nl-b { display: flex; align-items: center; justify-content: center; height: 20px; align-self: center;
  border-radius: 3px; font-size: 10.5px; color: #a08fa4; cursor: pointer;
  transition: color .14s ease, background .14s ease, transform .12s ease; }
.nl-b:hover { background: #f4e8f7; color: var(--nskA2); }
.nl-b:active { transform: scale(.9); }
.nl-b:focus-visible { outline: 2px solid var(--nskA); outline-offset: -2px; }
.nl-eye { color: #7d8fa8; }
.nl-eye.off { color: #c9b6cd; }
.nl-row.off .nl-eye { color: #8d7d90; background: #f1ecf2; }
.nl-lk { color: #cdbcd0; }
.nl-lk.on { color: #b45309; background: #fef3c7; }
.nl-lk.on:hover { color: #92400e; background: #fde68a; }
.nl-mo { color: #b3a3b6; }

/* ══ নির্বাচন থাকলে তালিকা "গন্তব্য" মোডে (owner-এর ৪ ও ৫ নম্বর চাওয়া) ══ */
.nl-hint { display: flex; align-items: center; gap: 5px; margin: 0 0 4px; padding: 4px 7px;
  border-radius: 3px; font: 700 10.5px/1.3 inherit; color: #fff;
  background: linear-gradient(135deg, var(--nskA), var(--nskA2));
  box-shadow: 0 2px 8px rgba(37, 99, 235, .30); }
.nl-hint[hidden] { display: none !important; }
.nl-hint i { font-size: 10px; opacity: .9; flex: 0 0 auto; }
.nl-list.sel .nl-row { cursor: copy; }
.nl-list.sel .nl-row:hover { border-color: #86efac;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, .32), 0 2px 9px rgba(37, 99, 235, .16); }
.nl-list.sel .nl-row:hover .nl-nmt { color: #0f7a3d; }
.nl-list.sel .nl-row:hover .nl-rail::before { width: 6px; top: 2px; bottom: 2px;
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(22, 163, 74, .30); }
.nl-list.sel .nl-row.lk:hover { border-color: #fca5a5;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, .30), 0 2px 9px rgba(37, 99, 235, .16); }
@keyframes nl-land { 0% { background: #dcfce7; box-shadow: 0 0 0 2px rgba(22, 163, 74, .48); }
  100% { background: #fff; box-shadow: 0 1px 2px rgba(37, 99, 235, .07); } }
.nl-row.land { animation: nl-land .46s ease-out; }
@keyframes nl-deny { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); } }
.nl-row.deny { animation: nl-deny .3s ease 2; }
.nl-row.deny .nl-lk { color: #dc2626; background: #fee2e2; }

/* ══ সেল-পিকার পপওভার — body-তে portal, তাই .nsk ভেরিয়েবল পায় না (রং হাতে লেখা) ══ */
.nl-pop { position: fixed; z-index: 99991; min-width: 150px;
  max-width: min(238px, calc(100vw - 16px)); max-height: min(268px, 62vh); overflow: auto;
  padding: 4px; background: #fff; border: 1px solid #e6dfe9; border-radius: 4px;
  box-shadow: 0 14px 32px rgba(37, 99, 235, .26), 0 2px 6px rgba(37, 99, 235, .14);
  font-family: inherit; animation: nl-popin .14s ease-out; }
@keyframes nl-popin { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.nl-o { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 7px;
  border-radius: 3px; cursor: pointer; white-space: nowrap;
  font: 600 11.5px/1 inherit; color: #2b2130; transition: background .12s ease; }
.nl-o:hover { background: #f7ecfa; }
.nl-o.on { background: linear-gradient(135deg, #fdf3fe, #f6e2fa); color: #9E2AA3; font-weight: 800; }
.nl-o.dg { color: #dc2626; }
.nl-o.dg:hover { background: #fee2e2; }
.nl-o i { width: 12px; text-align: center; font-size: 10.5px; opacity: .8; flex: 0 0 12px; }
.nl-o .nl-dash { flex: 0 0 58px; width: 58px; }
.nl-sw { display: grid; grid-template-columns: repeat(6, 22px); gap: 4px; padding: 2px; }
.nl-sw i { display: block; width: 22px; height: 22px; border-radius: 3px; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .10), 0 1px 3px rgba(37, 99, 235, .22);
  transition: transform .12s ease; }
.nl-sw i:hover { transform: scale(1.14); }
.nl-sw i.on { box-shadow: 0 0 0 2px #9E2AA3, 0 2px 6px rgba(37, 99, 235, .35); }

/* ══════════ ফোন (≤৭৮০px) — কলাম চওড়া হয়, সারি ততটুকুই বাড়ে ══════════ */
@media (max-width: 780px) {
  .nl-list { --nlR: 18px; --nlQ: 26px; --nlS: 60px; --nlB: 30px; --nlM: 28px;
    gap: 3px; max-height: none; flex: 1 1 auto; min-height: 0; }
  /* বটম-শিটে এগুলো যেন চাপা না পড়ে */
  #nskLyr > .nsk-pnl-h, #nskLyrHint, #nskLyrAdd, #nskLyrMove { flex: 0 0 auto; }
  .nl-hd { height: 18px; font-size: 9px; }
  .nl-hd i { font-size: 10px; }
  .nl-row { height: 34px; border-radius: 4px; padding-right: 5px; }
  .nl-rail::before { left: 4px; width: 5px; }
  .nl-nmt { font-size: 13px; }
  .nl-nm { padding: 0 5px 0 6px; }
  .nl-nmi { height: 24px; font-size: 13px; }
  .nl-q { font-size: 10.5px; padding-right: 5px; }
  .nl-st { height: 26px; }
  .nl-lw { flex: 0 0 26px; }
  .nl-dash { width: 24px; height: 2.5px; }
  .nl-bar { width: 16px; }
  .nl-b { height: 28px; font-size: 12.5px; }
  .nl-hint { font-size: 11.5px; padding: 6px 8px; }
  .nl-o { height: 34px; font-size: 13px; }
  .nl-o .nl-dash { flex: 0 0 70px; width: 70px; }
  /* ভূমিকা-নোট ফোনে বাদ → একটা বাড়তি সারি দেখা যায় */
  #nskLyr > .nsk-note { display: none; }
  .nl-row, .nl-rail, .nl-q, .nl-lt, .nl-lw, .nl-b, .nl-o {
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-row, .nl-rail::before, .nl-b, .nl-o, .nl-hb { transition: none; }
  .nl-row.land, .nl-row.deny, .nl-pop { animation: none; }
}

/* ── লাইন টাইপ বোতাম — নাম + আসল দাগের নমুনা (<select> এ নমুনা দেখানো যায় না) ── */
.nsk-ltb { display: inline-flex; align-items: center; gap: 6px; height: 26px; box-sizing: border-box;
  padding: 0 6px; border: 1px solid var(--nskL); border-radius: 4px; background: #fff;
  color: var(--nskT); font: 500 11.5px/1 inherit; cursor: pointer; max-width: 148px;
  transition: all .14s ease; }
.nsk-ltb:hover { border-color: var(--nskA); box-shadow: 0 0 0 2px rgba(193, 63, 198, .14); }
.nsk-ltb .nl-dash { flex: 0 0 30px; width: 30px; }
.nsk-ltn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.nsk-ltb i { font-size: 9px; color: #8a7a8d; flex: 0 0 auto; }
.nsk-ltb.wide { max-width: none; width: 100%; height: 30px; }
.nsk-ltb.wide .nl-dash { flex: 0 0 44px; width: 44px; }
.nsk-frm label > .nsk-ltb { margin-top: 2px; }
@media (max-width: 900px) { .nsk-ltb { height: 30px; font-size: 12.5px; } }

/* ═════════════════════════════════════════════════════════════════════
   G-05 — আঙুলের জন্য ন্যূনতম ৪৪×৪৪ টার্গেট  (স্পেসিফিকেশন v1.0)
   ⚠️ ফাইলের **একেবারে শেষে** রাখা ইচ্ছাকৃত: উপরে .nsk-b/.nsk-db-b-এর
   ছোট মাপগুলো একই স্পেসিফিসিটির, পরে এলে তবেই জেতে। উপরে সরাবেন না।
   টাচ ডিভাইসেই কেবল বড় — মাউসে ছোট বোতাম কম জায়গা নেয়।
   ═════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .nsk-b { width: 44px; height: 44px; font-size: 15px; }
  .nsk-db-b { height: 44px; padding: 0 12px; font-size: 12.5px; }
  .nsk-db-b i { font-size: 14px; }
  .nsk-pnl-h .nsk-x { min-width: 40px; min-height: 40px; }
  .nsk-chip { min-height: 40px; }
}
/* টাচ ট্যাব (≤1100px) — "আরও" বোতাম দরকার, নইলে সরানো বোতামগুলোয় পৌঁছানো যাবে না
   (layoutBar এখানে মোবাইল-লেআউট ব্যবহার করে; দুটো নিয়ম একসাথে বদলাবেন) */
@media (pointer: coarse) and (max-width: 1100px) {
  .nsk-b.only-mob { display: inline-flex; }
}

/* ═══════════════ SEL-06 — সিলেকশনের পাশে মিনি টুলবার ═══════════════
   owner গ-২: সিলেক্ট করলেই ছোট করে রং/লাইন বদলানোর সুযোগ, নকশা ঢাকা না পড়ে।
   সর্বোচ্চ ৬ আইকন + "⋯ আরও"। অবস্থান JS বসায় (placeMiniBar)।            */
.nsk-mtbar { position: absolute; z-index: 9; display: flex; align-items: center; gap: 2px;
  padding: 3px; background: rgba(255, 255, 255, .98); border: 1px solid var(--nskL);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(37, 99, 235, .24), 0 1px 3px rgba(0, 0, 0, .1); }
.nsk-mtb { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #4a3a4d; border-radius: 5px; cursor: pointer;
  font-size: 13px; padding: 0; transition: background .12s ease, transform .12s ease; }
.nsk-mtb:hover { background: #f7ecfa; transform: translateY(-1px); }
.nsk-mtb.dg { color: #dc2626; }
.nsk-mtb.dg:hover { background: #fee2e2; }
.nsk-mtb .nl-dash.mini { width: 22px; height: 3px; border-radius: 1px; }
.nsk-mtb-sep { width: 1px; height: 20px; background: var(--nskL); margin: 0 2px; }
@media (pointer: coarse) { .nsk-mtb { width: 40px; height: 40px; font-size: 15px; } }
/* PRP-03 — লাইনটাইপ স্কেল (এই বস্তুতে): স্লাইডার + সংখ্যার ঘর এক সারিতে */
.nsk-ltsc { margin: 6px 0 2px; }
.nsk-ltsc .nsk-row { display: flex; align-items: center; gap: 6px; }
.nsk-ltsc input[type=range] { flex: 1 1 auto; min-width: 0; }
.nsk-ltsc .nsk-in.num { flex: 0 0 62px; width: 62px; text-align: center; }

/* LAY-01 — bottom-sheet প্যানেলের হাতল (ধরে টেনে ছোট/বড়) ─────────────
   ডেস্কটপে প্যানেল ডানে ডক করা, ওখানে হাতল লাগে না — তাই শুধু ≤780px-এ।  */
.nsk-grab { display: none; }
@media (max-width: 780px) {
  .nsk-grab { display: block; flex: 0 0 auto; height: 18px; margin: -4px -8px 2px; cursor: ns-resize;
    touch-action: none; position: relative; }
  .nsk-grab::before { content: ""; position: absolute; left: 50%; top: 7px; width: 42px; height: 4px;
    margin-left: -21px; border-radius: 2px; background: #d8cade; }
  .nsk-grab:active::before { background: var(--nskA); }
}

/* ═══ DIM-06 / G-01 — ফোনে মাপ বসানোর বাক্স ক্যানভাসের ৪০%-এর বেশি নয় ═══
   owner গ-১৬: "পরিমাপ দিলে ড্রইং দেখা যায় না"। বাক্স সরু, ভেতরে স্ক্রল করে,
   আর ✔ বসান বোতামটা নিচে **আটকে** থাকে যাতে খুঁজতে না হয়।
   সাথে JS-এর ensureVisible() ক্যানভাস pan করে বাহুটাকে উপরে এনে দেয়।     */
/* ⚠️⚠️ ২০২৬-০৮-১৫ — উপরের "✔ বসান নিচে আটকে থাকে" কথাটা **কাজ করছিল না**।
   কারণ: প্রতিটি সন্তান `flex: 0 0 auto` (সঙ্কুচিত হয় না), বাক্সের উচ্চতা
   ৪০%-এ বাঁধা আর `overflow: hidden` — ফলে ভেতরের জিনিস ২৫৯px হলে বাক্স
   ২০৬px-এই থেকে যেত আর **✔ বসান ও "সব বাহু" বোতাম দুটি কেটে বাদ পড়ত**
   (৩৭৫×৮১২ আসল টাচে মেপে ধরা: দুটোই `[বাইরে]`)। owner: "মোবাইল ভিউতে
   পরিমাপ সেটিং কাজ করতে সমস্যা হয়" — এটাই ছিল আসল কারণ।
   সমাধান: বাক্সটাই স্ক্রল করে (`overflow-y: auto`), আর নিচের বোতামের সারি
   `position: sticky` — মাঝেরটা যতই স্ক্রল হোক, বোতাম সবসময় চোখের সামনে। */
@media (max-width: 780px) {
  .nsk-pop.dimpop { max-height: 40%; display: flex; flex-direction: column;
    padding: 6px 8px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
  .nsk-pop.dimpop > * { flex: 0 0 auto; }
  .nsk-pop.dimpop > .nsk-pop-f { position: sticky; bottom: -6px; z-index: 2;
    padding: 5px 0 1px; box-shadow: 0 -7px 9px -7px rgba(30, 12, 34, .3); }
  .nsk-pop.dimpop .nsk-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-bottom: 4px; overscroll-behavior-x: contain; }
  .nsk-pop.dimpop .nsk-kinds::-webkit-scrollbar { display: none; }
  .nsk-pop.dimpop .nsk-kb { flex: 0 0 auto; }
  .nsk-pop.dimpop .nsk-row { margin: 4px 0; }
  .nsk-pop.dimpop .nsk-ckrow { font-size: 11px; margin: 2px 0; }
  /* মাঝের অংশটুকুই স্ক্রল করে — হেডার ও নিচের বোতাম সবসময় দেখা যায় */
  .nsk-pop.dimpop .nsk-warn { overflow: auto; min-height: 0; }
  .nsk-pop.dimpop .nsk-pop-f { margin-top: auto; padding-top: 4px; background: #fff; }
}

/* ═══════════════ TXT-01 — প্লট লেবেলের ফর্ম ═══════════════
   প্রতিটি সারি: [চেকবক্স + লেবেল] [ঘর] — ঘর বন্ধ থাকলে ফ্যাকাশে।
   owner ঙ-১…৪: শুধু নাম চাইলে বাকি টিক তুলে দিলেই হলো।                */
.nsk-pf { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 6px; }
.nsk-pf-row { display: flex; align-items: center; gap: 6px; }
.nsk-pf-ck { flex: 0 0 108px; display: flex; align-items: center; gap: 5px;
  font: 600 11.5px/1.15 inherit; color: #4a3a4d; cursor: pointer; user-select: none; }
.nsk-pf-ck input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--nskA); }
.nsk-pf-row > .nsk-in { flex: 1 1 auto; min-width: 0; }
.nsk-pf-two { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; }
.nsk-pf-two .nsk-in { flex: 1 1 0; min-width: 0; }
.nsk-pf-two select.nsk-in { flex: 0 0 96px; }
/* টিক তোলা সারি ফ্যাকাশে — কোনটা বসবে তা তাকালেই বোঝা যায় */
.nsk-pf-row:has(input[type=checkbox]:not(:checked)) > .nsk-in,
.nsk-pf-row:has(input[type=checkbox]:not(:checked)) > .nsk-pf-two { opacity: .42; }
@media (max-width: 520px) {
  .nsk-pf-ck { flex: 0 0 92px; font-size: 11px; }
  .nsk-pf-two select.nsk-in { flex: 0 0 78px; }
}
/* সেটিংসে একক-তালিকার টেক্সট বাক্স */
.pp-ta { width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px;
  border: 1px solid var(--nskL); border-radius: 5px; background: #fff; color: var(--nskT);
  padding: 7px 9px; font: 500 12px/1.5 ui-monospace, monospace; }
.pp-ta:focus { outline: 0; border-color: var(--nskA); box-shadow: 0 0 0 2px rgba(193, 63, 198, .16); }

/* ── G-01: প্লট লেবেলের ফর্মও ৪০%-এর বেশি ঢাকবে না ──
   ঘরগুলো ভেতরেই স্ক্রল করে; উপরের তিনটি (নম্বর · নাম · পরিমাণ) সবসময় চোখের
   সামনে, দাগ/খতিয়ান/মন্তব্য স্ক্রল করে আসে। ensureVisible() ক্যানভাস pan
   করে রাখে, তাই নকশা দেখতে দেখতেই লেখা যায় (owner ঙ-৮ · গ-১৬)।           */
@media (max-width: 780px) {
  /* ⚠️ দুটো ফাঁদ এখানে:
     ১) শুধু max-height দিলে flex শিশুরা গুটিয়ে যায় → মাত্র ২টি ঘর দেখা যেত।
     ২) % হিসাব হয় **স্টেজের** (ক্যানভাসের) উচ্চতায়, পর্দার নয়। ফোনে টুল-রেল
        জায়গা নেয় বলে স্টেজ ≈ পর্দার ৭০% → স্টেজের ৫২% = পর্দার ~৩৭%, অর্থাৎ
        G-01-এর ৪০% সীমার ভেতরেই, তবু ৪টি ঘর একসাথে দেখা যায়।              */
  .nsk-pop.plotpop { height: 52%; max-height: 52%; display: flex; flex-direction: column; }
  .nsk-pop.plotpop > .nsk-pop-h,
  .nsk-pop.plotpop > .nsk-row { flex: 0 0 auto; }
  .nsk-pop.plotpop > .nsk-pf { flex: 1 1 auto; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}
/* G-05 — টাচে পপ-আপের বোতামও ৪৪px */
@media (pointer: coarse) {
  .nsk-btn { height: 44px; padding: 0 14px; font-size: 13px; }
  .nsk-in { height: 40px; font-size: 14px; }
  .nsk-pf-ck input { width: 20px; height: 20px; }
}

/* ═══════════════ HCH-01/02 — ভরাট প্যানেলের নতুন সাজ ═══════════════
   owner ঘ-১/২: উপরে সরু বারে শুধু দুটি ঘর (রোটেশন · স্কেল), বাকি সব
   "⋯ আরও"-এর ভেতরে; নকশাগুলো ক্যাটাগরি ট্যাবে গ্রিড হয়ে বসে।          */
.nsk-hbar { display: flex; align-items: center; gap: 6px; padding: 5px 6px; flex: 0 0 auto;
  background: linear-gradient(135deg, #fdf4ff, #f7ecfa); border-bottom: 1px solid var(--nskL); }
.nsk-hf { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px; }
.nsk-hf > i { flex: 0 0 auto; width: 15px; text-align: center; font-size: 12px; color: var(--nskA2); }
.nsk-hf input[type=range] { flex: 1 1 auto; min-width: 34px; }
.nsk-hf .nsk-in.num { flex: 0 0 54px; width: 54px; height: 28px; padding: 0 3px;
  text-align: center; font-size: 12px; }
.nsk-hmore { flex: 0 0 auto; width: 30px; height: 28px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--nskL); background: #fff; color: #4a3a4d;
  border-radius: 4px; cursor: pointer; font-size: 12px; }
.nsk-hmore.on { background: linear-gradient(135deg, var(--nskA), var(--nskA2)); color: #fff; border-color: transparent; }
.nsk-hextra { border-bottom: 1px solid var(--nskL); padding-bottom: 6px; margin-bottom: 5px; }
.nsk-hextra[hidden] { display: none !important; }
/* ক্যাটাগরি ট্যাব — এক সারিতে, দরকারে পাশে স্ক্রল */
.nsk-htabs { display: flex; gap: 3px; overflow-x: auto; padding: 1px 0 4px; flex: 0 0 auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nsk-htabs::-webkit-scrollbar { display: none; }
.nsk-htab { flex: 0 0 auto; height: 28px; padding: 0 10px; border: 1px solid var(--nskL);
  background: #fff; color: #4a3a4d; border-radius: 14px; cursor: pointer;
  font: 600 11.5px/1 inherit; white-space: nowrap; transition: all .14s ease; }
.nsk-htab.on { background: linear-gradient(135deg, var(--nskA), var(--nskA2)); color: #fff; border-color: transparent; }
/* নকশার গ্রিড — ৩–৪ কলাম, ঘর ৬৪px-এর বেশি (স্পেসিফিকেশন HCH-01) */
.nsk-hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; }
.nsk-hgrid[hidden] { display: none !important; }
@media (pointer: coarse) { .nsk-htab { height: 36px; padding: 0 13px; } .nsk-hmore { width: 40px; height: 36px; } .nsk-hf .nsk-in.num { height: 36px; } }

/* ═══════════════ SYM-01/03 — সিম্বল প্যানেল ═══════════════
   owner চ-১: বসানোর আগেই আকার · রোটেশন · মিরর ঠিক করা যায়, পাশের নমুনায়
   ঠিক সেভাবেই দেখা যায়। চ-৩: "আমার সিম্বল" ট্যাবে লেখা+ইমোজির নিজের সিম্বল। */
.nsk-sybar { display: flex; gap: 7px; align-items: stretch; padding: 5px 6px; flex: 0 0 auto;
  background: linear-gradient(135deg, #fdf4ff, #f7ecfa); border-bottom: 1px solid var(--nskL); }
/* ⚠️ দুই ক্লাস লাগেই: উপরে `.nsk-stage canvas { width:100%; height:100% }` আছে
   (মূল ক্যানভাসের জন্য), সেটা এক-ক্লাসের নিয়মকে হারিয়ে দিয়ে নমুনা-ক্যানভাসকে
   ৩৩৭×৩৩৭ করে ফেলেছিল আর বার পুরো প্যানেল উপচে যেত (২০২৬-০৮-১২ মেপে ধরা)। */
.nsk-sybar canvas.nsk-syprev { flex: 0 0 auto; width: 78px; height: 78px; border-radius: 5px;
  background: #fff; border: 1px solid var(--nskL); }
.nsk-syctl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.nsk-syrow { display: flex; gap: 4px; }
/* ⚠️ ফোনে এই বারটা ১২৭px নিত, অথচ পুরো প্যানেলই ২০৮px (৪০% বটম-শিট) —
   হাতল ১৮ + হেডার ৪৫ + বার ১২৭ = ১৯০, ফলে সিম্বলের তালিকা পেত মাত্র **৯px**,
   ৫৮টি সিম্বল ৯px ফাঁক দিয়ে খুঁজতে হতো (২০২৬-০৮-১৪ অডিটে মেপে ধরা)।
   এখন নমুনা ৪৬px ও ঘরগুলো সরু — বার ~৫৬px, তালিকা পায় ~৮৫px।           */
@media (max-width: 599px) {
  .nsk-sybar { padding: 3px 5px; gap: 5px; align-items: center; }
  .nsk-sybar canvas.nsk-syprev { width: 38px; height: 38px; }
  /* তিন সারি → **এক সারি**, দরকারে পাশে স্ক্রল। বার ১২৭ → ~৪৬px।       */
  .nsk-syctl { flex-direction: row; align-items: center; gap: 5px; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .nsk-syctl::-webkit-scrollbar { display: none; }
  .nsk-syctl > * { flex: 0 0 auto; }
  .nsk-syctl .nsk-hf { height: 30px; width: 118px; }
  .nsk-syctl .nsk-hf input[type=range] { min-width: 46px; }
  .nsk-syctl .nsk-in.num { height: 30px; width: 44px; font-size: 11px; padding: 0 3px; }
  .nsk-syctl .nsk-btn.sm { height: 30px; padding: 0 7px; font-size: 10.5px; }
  /* সিম্বল বাছাই করতে তালিকাটাই আসল — তাই এই শিটটা একটু লম্বা (৪০→৪৮%)।
     ⚠️ min-height শর্ত: কাত ফোনে প্যানেল ডান পাশে পুরো উচ্চতায় বসে, সেটি
     এই নিয়মে ভাঙবে না (একই ফাঁদে ২০২৬-০৮-১২-তে পড়া হয়েছিল)।           */
}
/* ── ভরাট (হ্যাচ) প্যানেলেও একই সমস্যা ছিল (২০২৬-০৮-১৪ অডিট) ──
   ২০৮px শিটে: হাতল ১৮ + হেডার ৪৫ + উপরের বার ৪৭ = ১১০, বাকি ৮২-তে আবার
   নোট ৪০ + ট্যাব ৪১ = ৮১ — নকশার গ্রিড পেত **১px**। নোটের কথাটা টুল চালু
   হলেই টোস্টে আসে, তাই ফোনে ওটা বাদ; আর শিটটা সিম্বলের মতোই ৪৮%।       */
@media (max-width: 599px) {
  #nskHatch .nsk-pbody > .nsk-note { display: none; }
  #nskHatch .nsk-htabs { padding: 2px 0; }
}
/* ── রাস্তা/খাল প্যানেলেও একই হিসাব (২০২৬-০৮-১৫ অডিট) ──
   ২০৮px শিটের বডি ১২৯px, তার মধ্যে মোড-বোতাম ৩২ + ইঙ্গিত ৪০ + চওড়ার সারি ২২
   + ফুটের চিপ ২২ = ১১৬ — **রাস্তার নকশার জন্য থাকত মাত্র ১৩px**, অর্থাৎ
   ১৩টি নকশার একটিও চোখে পড়ত না (স্ক্রল করলে পাওয়া যেত)। এখন ইঙ্গিত সরু,
   ফুটের চিপ এক সারিতে (পাশে স্ক্রল), আর শিট ৪৮% — দুটি নকশা সরাসরি দেখা যায়। */
@media (max-width: 599px) {
  /* ইঙ্গিতের কথাটা টুল চালু হলে ও মোড বদলালে টোস্টেই আসে ("ধরন বেছে মোড়ে
     মোড়ে ক্লিক করুন · শেষে ✓") — তাই ফোনে বাক্সটা বাদ, ৩১px বাঁচে,
     রাস্তার নকশা একটির বদলে **দুটি** চোখে পড়ে।                          */
  #nskRoad #nskRHint { display: none; }
  #nskRoad .nsk-row { margin-bottom: 4px; }
  #nskRoad #nskRFt { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 4px;
    overscroll-behavior-x: contain; scrollbar-width: none; }
  #nskRoad #nskRFt::-webkit-scrollbar { display: none; }
  #nskRoad #nskRFt > * { flex: 0 0 auto; }
}
@media (max-width: 599px) and (min-height: 541px) {
  /* #nskProps-ও একই দলে: ঘরগুলো এখন দুই কলামে, তবু ফর্ম ~২০৮px — ৪০%-এর
     শিটে (২০৬px) পুরোটা দেখতে অনেক স্ক্রল করতে হতো (২০২৬-০৮-১৮ মেপে)। */
  #nskSym, #nskHatch, #nskRoad, #nskProps { max-height: 48%; }
}
.nsk-btn.sm { height: 26px; padding: 0 8px; font-size: 11px; box-shadow: none;
  background: #fff; color: #4a3a4d; border: 1px solid var(--nskL); }
.nsk-btn.sm:hover { background: #f7ecfa; color: var(--nskA2); }
.nsk-btn.sm.on { background: linear-gradient(135deg, var(--nskA), var(--nskA2)); color: #fff; border-color: transparent; }
/* "আমার সিম্বল" — নতুন বানানোর ঘর ও মুছে ফেলার ছোট ✕ */
.nsk-symb.add { border-style: dashed; color: var(--nskA2); justify-content: center; }
.nsk-symb.add i { font-size: 18px; }
.nsk-symb { position: relative; }
.nsk-symdel { position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; border-radius: 8px;
  background: #fee2e2; color: #dc2626; font-size: 9px; line-height: 16px; text-align: center;
  cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.nsk-symdel::before { content: "\f00d"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.nsk-symb:hover .nsk-symdel { opacity: 1; }
@media (pointer: coarse) {
  .nsk-symdel { opacity: 1; width: 20px; height: 20px; line-height: 20px; border-radius: 10px; }
  .nsk-btn.sm { height: 36px; font-size: 12px; }
}
/* কাস্টম সিম্বলের ডায়ালগ */
.us-wrap { display: flex; flex-direction: column; gap: 7px; }
.us-top { display: flex; gap: 10px; align-items: flex-start; }
.us-prev { flex: 0 0 auto; width: 112px; height: 112px; border-radius: 6px; }
.us-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.us-emo { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px;
  max-height: 190px; overflow-y: auto; padding: 2px; }
.us-e { height: 40px; border: 1px solid var(--nskL); background: #fff; border-radius: 5px;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0; transition: all .12s ease; }
.us-e:hover { border-color: var(--nskA); transform: scale(1.08); }
.us-e.on { border-color: var(--nskA); background: #f8e6fb; box-shadow: 0 0 0 2px rgba(193, 63, 198, .2); }
@media (max-width: 520px) { .us-top { flex-direction: column; align-items: center; } .us-fields { width: 100%; } }
/* একই ফাঁদ হ্যাচের নমুনাতেও — `.nsk-stage canvas`-কে হারাতে দুই ক্লাস দরকার */
.nsk-hextra canvas.nsk-hprev { width: 100%; height: auto; max-height: 96px; }

/* ═══════════════ DRW-05 — ডায়নামিক ইনপুট ═══════════════
   ডেস্কটপে কার্সারের পাশে ভাসে; ফোনে নিচে সরু এক-লাইনের বার (≤৯০px, স্পেসের
   DIM-06/DRW-05 নিয়ম), যাতে টাইপ করার সময়ও নকশা দেখা যায়।                */
.nsk-dyn { position: absolute; z-index: 10; display: flex; align-items: center; gap: 5px;
  padding: 4px 5px; background: rgba(255, 255, 255, .98); border: 1px solid var(--nskL);
  border-radius: 7px; box-shadow: 0 5px 18px rgba(37, 99, 235, .24); }
.nsk-dyn[hidden] { display: none !important; }
.nsk-dyf { display: flex; align-items: center; gap: 4px; }
.nsk-dyf > i { width: 14px; text-align: center; font-size: 11px; color: var(--nskA2); }
.nsk-dyn .nsk-in.num { width: 78px; height: 30px; padding: 0 5px; text-align: center;
  font: 700 12.5px/1 inherit; }
.nsk-dyn .nsk-db-b { height: 30px; padding: 0 9px; }
@media (max-width: 780px) {
  .nsk-dyn { gap: 4px; padding: 5px; }
  .nsk-dyn .nsk-dyf { flex: 1 1 0; min-width: 0; }
  .nsk-dyn .nsk-in.num { width: 100%; height: 40px; font-size: 14px; }
  .nsk-dyn .nsk-db-b { height: 40px; }
}
/* ── স্ট্যাটাস টগল (ORTHO · POLAR · OSNAP · GRID · DYN) ── */
.nsk-stg { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.nsk-tg.t { width: auto; min-width: 0; padding: 0 8px; height: 26px; font: 700 10px/1 inherit;
  letter-spacing: .3px; white-space: nowrap; }
@media (pointer: coarse) { .nsk-tg.t { height: 36px; padding: 0 10px; font-size: 11px; } }
/* EDT-01→04/07 — বেস-পয়েন্ট কমান্ডের বার (ডায়নামিক ইনপুটের নকশাই ধার করে) */
.nsk-edbar .nsk-ed-n { font: 700 11.5px/1 inherit; color: var(--nskA2); white-space: nowrap; padding: 0 2px; }
.nsk-edbar .nsk-dyf label { font: 600 10px/1 inherit; color: #7a6a7d; white-space: nowrap; }
.nsk-edbar .nsk-dyf[hidden] { display: none !important; }

/* PRF-06 — রিকভারি বার (নকশার উপরে ছোট বার্তা, ঢাকে না) */
.nsk-recbar { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 11;
  display: flex; align-items: center; gap: 7px; padding: 6px 9px; max-width: calc(100% - 12px);
  background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 1px solid #6ee7b7;
  border-radius: 7px; box-shadow: 0 5px 18px rgba(5, 150, 105, .22);
  font: 600 11.5px/1.3 inherit; color: #065f46; }
.nsk-recbar > i { flex: 0 0 auto; font-size: 14px; color: #059669; }
.nsk-recbar > span { flex: 1 1 auto; min-width: 0; }
@media (max-width: 780px) { .nsk-recbar { left: 4px; right: 4px; transform: none; max-width: none; } }

/* ═══════════════ UI-01/02 — ট্যাব ও ডেস্কটপের dock + স্ট্যাটাস বার ═══════════════
   ⭐ UI-02-এর মূল দাবি: প্যানেল খুললে **ক্যানভাস সঙ্কুচিত হবে, ঢাকা পড়বে না**।
   তাই ≥৬০০px-এ প্যানেলগুলো stage থেকে সরে ডান পাশের এই dock-এ বসে (JS:
   layoutPanels)। ফোনে (<৬০০px) dock থাকে না — ওখানে আগের bottom-sheet-ই থাকে,
   ওটা মেপে যাচাই করা আছে, তাই ছোঁয়া হয়নি।                                    */
.nsk-dock { display: none; }
.nsk-status { display: none; }
@media (min-width: 600px) {
  .nsk-dock { display: block; flex: 0 0 280px; width: 280px; min-width: 0;
    background: #fff; border-left: 1px solid var(--nskL); overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; }
  .nsk-dock[hidden] { display: none !important; }
  /* dock-এর ভেতরে প্যানেল আর ভাসমান নয় — সাধারণ ব্লক হয়ে পাশে বসে */
  .nsk-dock > .nsk-pnl { position: static; right: auto; top: auto; left: auto; bottom: auto;
    width: auto; max-width: none; max-height: none; height: auto;
    border: 0; border-bottom: 1px solid var(--nskL); border-radius: 0;
    box-shadow: none; margin: 0; display: block; }
  .nsk-dock > .nsk-pnl[hidden] { display: none !important; }
  .nsk-dock .nsk-grab { display: none; }          /* পাশে বসলে টানার হাতল লাগে না */
  .nsk-dock .nsk-pbody { max-height: none; overflow: visible; }
  /* ⚠️ ভেতরের নিজস্ব স্ক্রলারও বাদ — dock নিজেই স্ক্রল করে, তাই দুটো স্তরে
     স্ক্রল হলে নিচের অংশ পর্দার বাইরে গিয়ে আটকে থাকত। ২০২৬-০৮-১৪ অডিটে ধরা:
     রাস্তার প্যানেল ৭৯১px, পর্দা ৭২০ — ভেতরের ৩৩১px তালিকার তলা ১৪৪px
     পর্দার নিচে পড়ে থাকত, শেষ নকশাগুলোয় পৌঁছাতে দুবার স্ক্রল করতে হতো।   */
  .nsk-dock .nsk-roadwrap, .nsk-dock .nsk-symwrap, .nsk-dock .nsk-hwrap,
  .nsk-dock #nskLyrList { max-height: none; overflow: visible; }
  /* নিচের স্ট্যাটাস বার */
  .nsk-status { display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
    padding: 3px 8px; background: linear-gradient(135deg, #fdf4ff, #f7ecfa);
    border-top: 1px solid var(--nskL); font: 600 11px/1 inherit; color: #6b5a6e; }
  .nsk-st-xy { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--nskA2);
    min-width: 130px; }
  .nsk-st-info { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .nsk-status .nsk-stg { flex: 0 0 auto; }
  /* স্ট্যাটাস বারে টগল থাকলে উপরের স্টাইল-বারেরগুলো আর দরকার নেই */
  .nsk-style > #nskStg { display: none; }
}
/* ট্যাবে (৬০০–৭৮০px) টুল বার নিচে থাকে — dock ডানে; দুটো একসাথে যেন না ঠেকে */
@media (min-width: 600px) and (max-width: 780px) {
  .nsk-dock { flex: 0 0 248px; width: 248px; }
}
/* stage + dock একসাথে সারিতে — .nsk-body ফোনে column-reverse হলেও dock ডানেই থাকে */
.nsk-main { flex: 1 1 auto; display: flex; min-width: 0; min-height: 0; }

/* TXT-04 — একাধিক লেখা সারিবদ্ধ করার বোতাম সারি */
.nsk-alrow { margin: 6px 0 2px; }
.nsk-albtns { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: 3px; }
.nsk-alb { width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--nskL); background: #fff; color: #4a3a4d; border-radius: 4px;
  cursor: pointer; font-size: 11.5px; padding: 0; transition: all .13s ease; }
.nsk-alb:hover { background: linear-gradient(135deg, var(--nskA), var(--nskA2)); color: #fff; border-color: transparent; }
.nsk-alsep { width: 1px; height: 18px; background: var(--nskL); margin: 0 2px; }
@media (pointer: coarse) { .nsk-alb { width: 40px; height: 38px; font-size: 13px; } }

/* মাপের লেখার আকার — মাপ প্যানেলের হাতের কাছের কন্ট্রোল (owner ২০২৬-০৮-১২) */
.nsk-dsz { margin: 6px 0 4px; }
.nsk-dsz-row { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.nsk-dsz-row .nsk-in.num { flex: 1 1 auto; min-width: 0; height: 28px; text-align: center;
  font: 700 12.5px/1 inherit; }
.nsk-dsz select.nsk-in { width: 100%; height: 28px; font-size: 11.5px; }
@media (pointer: coarse) {
  .nsk-dsz-row .nsk-in.num { height: 38px; }
  .nsk-dsz select.nsk-in { height: 38px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   মাপের সেটিং প্যানেল — গুছানো রূপ (owner ২০২৬-০৮-১৪: "পরিমাপের সেটিং
   অনেক সমস্যা করে, অনেক ভালোভাবে সেট করো")
   ⚠️ আগে এখানে ছিল ৯টি চিপ + একটি ঘর + একটি তালিকা, আর বাকি সব (একক ·
   বাহু থেকে দূরত্ব · তীরের আকার · রং) ছড়ানো ছিল পপ-আপে ও পূর্ণ সেটিংসে —
   কোনটা কোথায় তা মনে রাখতে হতো। এখন এক জায়গায় **তিন ভাগে**: একক · লেখা ·
   রেখা ও তীর। প্রতিটি ভাগ গুটানো-খোলা যায়, তাই শিট ছোট থাকে।
   ═══════════════════════════════════════════════════════════════════════ */
/* ── এক সারি আইকন: দুই কাজ + তিন সেটিং-চিপ + পূর্ণ সেটিং ──
   ⚠️ owner ২০২৬-০৮-১৪ (৩): "সেটিংটা অনেক বড়, কাজ করা যায় না · মোবাইলে
   আইকন ভিত্তিক করো"। ঘরগুলো ডিফল্টে দেখা যায় না — চিপে চাপলে তবেই নিচে
   একটিমাত্র প্যান খোলে। এতে শিট ২৫২ → ~১১০px, আর ডান পাশের রেল এক
   কলামেই ধরে যায় (owner-এর "লম্বালম্বি" দাবি)। ফেরত বড় করবেন না।       */
.nsk-dtabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nsk-dtab, .nsk-dact { display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; min-width: 40px; height: 40px; padding: 0 4px; flex: 0 0 auto;
  border: 1px solid var(--nskL); border-radius: 7px; background: #fff; color: #4a3a4d;
  font: 800 9px/1.1 inherit; cursor: pointer; transition: all .14s ease; }
.nsk-dtab i, .nsk-dact i { font-size: 14px; }
.nsk-dtab .tv { font: 700 8.5px/1 inherit; color: #7a6a7d; max-width: 58px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsk-dtab .tv:empty { display: none; }
.nsk-dtab:hover, .nsk-dact:hover { border-color: var(--nskA); color: var(--nskA2); }
.nsk-dtab.on { background: linear-gradient(135deg, var(--nskA), var(--nskA2)); color: #fff;
  border-color: transparent; box-shadow: 0 2px 6px rgba(158, 42, 163, .3); }
.nsk-dtab.on .tv { color: rgba(255, 255, 255, .92); }
.nsk-dact.ok { background: linear-gradient(135deg, #16a34a, #0f8a3d); color: #fff; border-color: transparent; }
.nsk-dact.ok:hover { color: #fff; filter: brightness(1.08); }
.nsk-dsep { width: 1px; height: 22px; background: var(--nskL); flex: 0 0 auto; margin: 0 1px; }
.nsk-dpane { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #ead9ee; }
.nsk-dpane[hidden] { display: none; }
@media (pointer: coarse) { .nsk-dtab, .nsk-dact { height: 44px; min-width: 46px; } }
/* এই শিটের হেডার একটু পাতলা — ৪০px ✕ বোতাম হেডারকে ৪৯px করে দিত */
#nskDimBar .nsk-pnl-h { padding: 1px 2px 5px; margin-bottom: 5px; }
@media (pointer: coarse) { #nskDimBar .nsk-pnl-h .nsk-x { min-width: 32px; min-height: 32px; } }
/* চিপের সারি স্থির (স্ক্রলারের বাইরে) — নিচের ঘরগুলোই কেবল স্ক্রল করে */
#nskDimBar > .nsk-dtabs { flex: 0 0 auto; margin-bottom: 5px; }

/* ══ ফোনে "মাপের সেটিং" — ঘরগুলো যেন সত্যিই ব্যবহার করা যায় ══
   owner ২০২৬-০৮-১৫: "মোবাইল ভিউতে পরিমাপ সেটিং কাজ করতে সমস্যা হয়"।
   হিসাবটা এই: উপরের বার ও স্টাইল বার আঙুলের মাপে (৪৪px) হওয়ার পর ক্যানভাস
   ~৫০৭px, শিট ৪০% = ~২০৩px। তার ভেতরে হাতল ১৮ + হেডার ৩৯ + চিপ ৪৪ + প্যাডিং
   ১২ = ১১৩ — অর্থাৎ ঘরগুলোর জন্য থাকত মাত্র **~৯০px**, অথচ প্রতিটি ভাগে
   ৩টি ঘর (প্রতিটি ~৪৩px)। ফলে দুটি ঘর পর্দার বাইরে, আর স্ক্রল করলে চিপও
   হারিয়ে যেত। এখন: চিপ স্থির · প্যান খোলা থাকলে শিট ৪৮% · ঘর-সারি সরু। */
@media (max-width: 599px) and (min-height: 541px) {
  #nskDimBar.paneOn { max-height: 48%; }
}
/* খাটো ফোনে (≤৭৮০px উঁচু — ৩৬০×৭৪০ ধরনের) ক্যানভাসই ৪৪২px, তাই ৪৮%-এ
   ঘরের জায়গা ৮৯px — শেষ ঘরটি ফের নিচে পড়ে যায়। ওখানে ৫৬%।            */
@media (max-width: 599px) and (min-height: 541px) and (max-height: 780px) {
  #nskDimBar.paneOn { max-height: 56%; }
}
@media (max-width: 599px) {
  #nskDimBar .nsk-dpane { margin-top: 4px; padding-top: 4px; }
  #nskDimBar .nsk-drow, #nskDimBar .nsk-nrow { margin-bottom: 3px; gap: 5px; }
  /* একক ভাগের নমুনা-লাইনটা ফোনে বাদ — ডান পাশের/উপরের নমুনাতেই দেখা যায় */
  #nskDimBar .nsk-dpane .nsk-dhint { display: none; }
}
/* রঙের ঘরটি ২৬px ছিল — সারির বাকি ঘরগুলো ৩৮px, আঙুলে মেলে না */
@media (pointer: coarse) {
  #nskDimBar .nsk-dpane .nsk-sw { width: 46px; height: 38px; flex: 0 0 46px; }
}

/* এক সারি = লেবেল + [−] [সংখ্যা] [+] [↺] — সব সারিতে একই উচ্চতা, একই ছন্দ */
.nsk-nrow { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; }
.nsk-nrow:last-child { margin-bottom: 0; }
.nsk-nrow > .nsk-mini { flex: 0 0 84px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nsk-nrow .nsk-in.num { flex: 1 1 auto; min-width: 40px; width: 40px; height: 28px;
  text-align: center; font: 700 12.5px/1 inherit; padding: 0 2px; }
.nsk-nrow .nsk-alb { flex: 0 0 auto; }
.nsk-nrow select.nsk-in, .nsk-nrow button.nsk-in { flex: 1 1 auto; min-width: 0; height: 28px;
  font-size: 11.5px; }
.nsk-drow { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; }
.nsk-drow > .nsk-mini { flex: 0 0 84px; }
.nsk-drow > select.nsk-in { flex: 1 1 auto; min-width: 0; height: 28px; font-size: 11.5px; }
.nsk-dhint { font: 500 10.5px/1.35 inherit; color: #8a7a8d; margin: 4px 0 0; }
.nsk-dhint b { color: #6b5a6e; }
@media (pointer: coarse) {
  .nsk-nrow .nsk-in.num, .nsk-nrow select.nsk-in, .nsk-nrow button.nsk-in,
  .nsk-drow > select.nsk-in { height: 38px; }
}

/* মাপের সেটিং — ভেতরের উপ-শিরোনাম (লেখা · তীর ও রেখা · কোণের মাপ)
   owner ২০২৬-০৮-১২: "ডাইমেনশনের সেটিংটা একটু ঠিক করো" — এক গাদা ঘরের বদলে
   তিন ভাগে সাজানো, প্রতিটির উপরে ছোট শিরোনাম।                              */
.pp-h3 { display: flex; align-items: center; gap: 6px; margin: 12px 0 5px;
  font: 800 11.5px/1.2 inherit; color: #9E2AA3; letter-spacing: .2px;
  padding-bottom: 4px; border-bottom: 1px dashed #ead9ee; }
.pp-h3 i { font-size: 11px; opacity: .85; }

/* ═══════════════════════════════════════════════════════════════════════
   মোবাইলে সহায়তা-টগল: ক্যানভাসের ডান পাশে উপরে **খাড়া আইকন-বার**
   owner ২০২৬-০৮-১২: "মোবাইল ভিউয়ের জন্য ডান পাশের উপরে বারটি লম্বালম্বি
   সেট করো, কাজে যেন সমস্যা না হয়; আইকন আকারে থাকে।"
   ⚠️ আগে এই ৫টি লেখা-বোতাম স্টাইল বারের ভেতরে ছিল → সারিটা ৬৯০px হয়ে
   ৩৭৫px পর্দায় পাশে স্ক্রল করত। ফেরত নেবেন না।
   ≥৬০০px-এ লুকানো — ওখানে নিচের স্ট্যাটাস বারে (#nskStg2) একই টগল আছে।
   ═══════════════════════════════════════════════════════════════════════ */
/* ── ডান পাশের রেল — দুই খাড়া আইকন-বার একটার নিচে আরেকটা ───────────
   উপরে সহায়তা টগল (#nskStgW), নিচে মাপের ধরন (#nskDimW)।
   owner ২০২৬-০৮-১৪: "আরও ছোট করো" + "মাপের ধরন ডান পাশে লম্বালম্বি
   আইকন আকারে"। রেলের উচ্চতা ক্যানভাসের ভেতরেই আটকানো, দুটো বার
   flex-shrink করে ও নিজেরা স্ক্রল করে — তাই কোনো পর্দায় উপচে পড়ে না। */
/* ═══ ফোনে ক্যানভাস-লকের আইকন সারি (owner ২০২৬-০৮-১৮) ═══
   🔒 চাপলে উপরের বারের ঠিক নিচে বসে; মডাল খোলার দরকার নেই।
   লাল/তালা = আটকানো · সাদা = কাজ করবে।                                  */
.nsk-lockbar { position: absolute; left: 5px; top: 5px; z-index: 12;
  display: flex; align-items: center; gap: 4px; padding: 4px 5px;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--nskL);
  border-radius: 9px; box-shadow: 0 6px 20px rgba(37, 99, 235, .22);
  max-width: calc(100% - 10px); flex-wrap: wrap; }
.nsk-lockbar-t { font: 800 10.5px/1 inherit; color: var(--nskA2); display: inline-flex;
  align-items: center; gap: 4px; padding: 0 3px 0 1px; }
.nsk-lkb { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--nskL);
  border-radius: 7px; background: #fff; color: #4a3a4d; font-size: 14px;
  cursor: pointer; transition: all .14s ease; }
.nsk-lkb:hover { border-color: var(--nskA); color: var(--nskA2); }
/* আটকানো অবস্থা — চোখে পড়ার মতো লাল */
.nsk-lkb.off { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff;
  border-color: transparent; box-shadow: 0 2px 6px rgba(220, 38, 38, .3); }
.nsk-lkb.all { color: #16a34a; }
.nsk-lkb.x { color: #7a5a7d; background: #f4eaf6; }
@media (pointer: coarse) { .nsk-lkb { width: 42px; height: 42px; flex: 0 0 42px; font-size: 15px; } }

.nsk-rail { position: absolute; right: 5px; top: 5px; z-index: 9;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  max-height: calc(100% - 10px); pointer-events: none; }
.nsk-rail > * { pointer-events: auto; }
/* ⚠️ owner ২০২৬-০৮-১৪ (২): "কম্পিউটার ভিউতেও পরিমাপের টুল ডান পাশে লম্বালম্বি
   আইকন" — তাই রেলটা আর ≥৬০০px-এ লুকানো নয়। কেবল উপরের **সহায়তা টগল** বারই
   ডেস্কটপে লুকায় (নিচে .nsk-stgw-এর নিয়ম), কারণ ওগুলো নিচের স্ট্যাটাস বারে
   আছে; মাপের ধরনের বারটা সব পর্দায় দেখা যায়।                              */

.nsk-stgw, .nsk-dimw {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 3px; background: rgba(255, 255, 255, .93);
  border: 1px solid var(--nskL); border-radius: 9px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, .18);
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; }
.nsk-stgw::-webkit-scrollbar, .nsk-dimw::-webkit-scrollbar { width: 0; }
.nsk-stgw .nsk-stg { flex-direction: column; align-items: stretch; gap: 2px; }
/* বোতাম — শুধু আইকন, ৩৪px (owner ২০২৬-০৮-১৪: "আরও ছোট করো")।
   ⚠️ লেখা (.nsk-tg-cap) লুকানো — নাম title/aria-label-এ আছে, আর চালু/বন্ধ
   অবস্থা রঙেই বোঝা যায়। আগে ৪৪px + লেখা ছিল, বার ৫৪×২৭৫ = ক্যানভাসের ৭.৬%। */
.nsk-stgw .nsk-tg.t { width: 34px; height: 34px; padding: 0; gap: 0;
  flex-direction: column; justify-content: center;
  font: 800 7px/1.05 inherit; letter-spacing: 0; border-radius: 7px; }
.nsk-stgw .nsk-tg.t i { font-size: 13px; margin: 0; }
.nsk-stgw .nsk-tg-cap { display: none; }
.nsk-stgw .nsk-tg.t .nsk-tg-sub { font: 700 6.5px/1 inherit; opacity: .85; }
.nsk-stgw .nsk-tg.t .nsk-tg-sub:empty { display: none; }

/* মাপের ধরন — ৯টি আইকন, শুধু আইকন (নাম টোস্টে ও title-এ) */
.nsk-dimw { align-items: stretch; }
/* ⚠️ এটি লাগবেই — ক্লাসের display:flex ব্রাউজারের [hidden]{display:none}-কে
   হারিয়ে দেয়, তাই মাপ টুল বন্ধ থাকলেও রেলটা দেখা যাচ্ছিল (মেপে ধরা)। */
.nsk-dimw[hidden] { display: none; }
/* বোতামের মাপ JS থেকে আসে (--kb) — জায়গা কম হলে কলাম না বাড়িয়ে বোতামই
   একটু ছোট হয়, কারণ owner চান বারটা **সবসময় এক কলামে খাড়া** থাকুক।
   ⚠️⚠️ `transition` থেকে width/height **বাদ দিতেই হবে** — `.nsk-kb`-র
   `transition: all .14s` থাকায় মাপ বদলালে তা ১৪০ms ধরে ধীরে বদলাত, আর
   fitDimRail() সাথে সাথে মেপে **পুরোনো মানই** পেত; ফলে ছোট করার চেষ্টা
   কখনো কাজ করত না। ২০২৬-০৮-১৩-র "`.tight` ক্লাসে width/height লাগেই না,
   ইনলাইন style দিলেও না — কারণ ধরা যায়নি" রহস্যটাও এটাই ছিল।           */
.nsk-dimw .nsk-kb { flex: 0 0 auto; width: var(--kb, 34px); height: var(--kb, 34px); min-height: 0;
  padding: 0; gap: 0; border-radius: 7px; font-size: 0;
  transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease; }
.nsk-dimw .nsk-kb i { font-size: calc(var(--kb, 34px) * .38); }
.nsk-dimw .nsk-kbn { display: none; }
/* বারের মাথায় ছোট চিহ্ন — নিচের ৯টি আইকন যে "মাপের ধরন" তা বোঝায়, আর
   উপরের সহায়তা-টগল বার থেকে আলাদা করে দেখায়। */
.nsk-dimw-h { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  height: 15px; margin-bottom: 1px; color: var(--nskA2); font-size: 10px;
  border-bottom: 1px solid var(--nskL); cursor: default; }
/* জায়গা একেবারে না কুলালে মাথার চিহ্নটাও যায় (JS: fitDimRail) */
.nsk-dimw.nohd .nsk-dimw-h { display: none; }
/* ── জায়গা কম হলে দুই কলাম (JS: fitDimRail) ────────────────────────────
   ⚠️ owner ২০২৬-০৮-১৪ (২): "মোবাইলে ডান পাশে সেট করে দাও, এবং তা দৃশ্যমান
   থাকবে।" এক কলামে ৯টি আইকন ৩৩০px নেয়, অথচ ৩৭৫×৮১২ ফোনে নিচের শিটের উপরে
   জায়গা থাকে ~২৩০px — শেষ তিনটি ধরন শিটের পেছনে ঢাকা পড়ত (মেপে ধরা)।     */
/* ⚠️ শেষ ভরসা মাত্র — ৩২০×৫৬৮-এর মতো পর্দায় ক্যানভাস ২৮০px, সেখানে এক
   কলামে ৯টি বোতাম কোনোভাবেই ধরে না। স্বাভাবিক ফোনে (৩৬০+) এটা লাগে না। */
.nsk-dimw.col2 { display: grid; gap: 2px; align-content: start;
  grid-template-columns: repeat(2, var(--kb, 34px)); }
.nsk-dimw.col2 .nsk-dimw-h { grid-column: 1 / -1; }
/* ⚠️ ধরন বাছাই এখন **সব পর্দাতেই** ডান পাশের এই রেলে — মাপ প্যানেলের ভেতরের
   ওই ৯টি চিপ (.nsk-kinds) পুরোপুরি বাদ (owner ২০২৬-০৮-১৪: "কম্পিউটার ভিউতে …
   ডান পাশে লম্বালম্বি")। ফোনে চিপগুলো ৩১২px নিত অথচ শিট ৪০% (~২১০px), আর
   ডেস্কটপে প্যানেলটা ২৭৯×৫৪১ হয়ে যেত। ফেরত আনবেন না।                    */
/* ⚠️ এই শিট **বড় করবেন না** (owner ২০২৬-০৮-১৪: "সেটিংটা অনেক বড়, কাজ করা
   যায় না")। G-01-এর ৪০% সীমাই থাকুক — শিট যত লম্বা, ডান পাশের রেলের জায়গা
   তত কম, আর তখন fitDimRail বোতাম ছোট করতে বাধ্য হয়। এখন ভেতরে শুধু এক সারি
   আইকন, তাই ৪০%-এর অনেক কমেই (~১১৮px) হয়ে যায়।                          */
/* মাপের রেলের জায়গা না কুলালে fitDimRail() ধাপে ধাপে এই দুটি ক্লাস বসায়:
   railMini = শুধু হাতল (চাপলে আবার খোলে) · railOff = একেবারে সরানো।      */
.nsk-stgw.railMini { background: rgba(255, 255, 255, .82); padding: 3px; }
.nsk-stgw.railMini .nsk-stg { display: none; }
.nsk-stgw.railOff { display: none; }
/* লুকানো অবস্থা — শুধু ছোট হাতলটাই থাকে, নকশা পুরো খোলা */
.nsk-stgw.mini { background: rgba(255, 255, 255, .82); padding: 3px; }
.nsk-stgw.mini .nsk-stg { display: none; }
.nsk-stgx { width: 24px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #8a7a8d; border-radius: 5px; cursor: pointer;
  font-size: 10px; padding: 0; }
.nsk-stgx:hover { background: #f7ecfa; color: var(--nskA2); }
@media (pointer: coarse) { .nsk-stgx { width: 34px; height: 24px; font-size: 11px; } }
/* ডেস্কটপ/ট্যাবে দরকার নেই — নিচের স্ট্যাটাস বারেই টগল আছে */
@media (min-width: 600px) { .nsk-stgw { display: none; } }

/* আইকন + লেখা পাশাপাশি (নিচের স্ট্যাটাস বারের আনুভূমিক চেহারা) */
.nsk-tg.t { gap: 5px; }
.nsk-tg.t i { font-size: 11px; }
.nsk-tg.t .nsk-tg-sub { font-style: normal; font-size: 9px; opacity: .85; }

/* ফোনে (<৬০০px) স্টাইল বার এক পর্দায় ধরাতে — লাইনটাইপের **নামটা** লুকাই,
   নমুনা-দাগটাই যথেষ্ট (owner: "মোবাইলে আইকন সেট করো, ছোট হলে সমস্যা নেই")।
   এতে ~৯০px বাঁচে; নাম দেখতে চাপলেই পপ-আপে পুরো তালিকা নামসহ আসে।       */
@media (max-width: 599px) {
  .nsk-style .nsk-ltb .nsk-ltn { display: none; }
  .nsk-style .nsk-ltb { max-width: none; width: auto; padding: 0 5px; gap: 4px; }
  .nsk-style .nsk-ltb .nl-dash { flex: 0 0 34px; width: 34px; }
  .nsk-style .nsk-lyrchip .nsk-lyrname { max-width: 46px; }
  .nsk-style select#nskLw { max-width: 74px; }
}

/* ── আঙুলের মাপ: স্টাইল বারের কন্ট্রোলগুলো (২০২৬-০৮-১৪ অডিট) ──
   ⚠️ এগুলো ২৬px উঁচু ছিল — অ্যাপের বাকি সব জায়গায় টাচে ৩৪-৪০px, শুধু এই
   বারটাই বাদ পড়ে গিয়েছিল। অথচ রং · মোটা · লাইন টাইপ · লেয়ার · চেইন —
   সবচেয়ে বেশি ব্যবহারের বোতামগুলো এখানেই, আর ঠিক ক্যানভাসের গায়ে।     */
@media (pointer: coarse) {
  .nsk-style .nsk-sw { width: 34px; height: 34px; flex: 0 0 34px; }
  .nsk-style select, .nsk-style .nsk-ltb, .nsk-style .nsk-lyrchip { height: 34px; }
  .nsk-style .nsk-tg:not(.t) { width: 34px; height: 34px; font-size: 14px; }
  .nsk-style .nsk-b { min-width: 34px; height: 34px; }
  /* বন্ধ করার ✕ — ২২px ছিল, আঙুলে লাগত না। প্যানেলের হেডার যেন লম্বা না
     হয় তাই ৩০px, আর হেডারের নিজের padding একটু কমিয়ে দিই।              */
  .nsk-x, .nsk-min { width: 30px; height: 30px; font-size: 13px; }
  .nsk-pnl > .nsk-pnl-h { padding-top: 0; padding-bottom: 4px; margin-bottom: 4px; }
  /* টিক-ঘর ১৫px ছিল — লেবেলে চাপলেও চলে, তবু চোখে পড়ার মতো হোক */
  .nsk-ckrow input[type=checkbox], .nsk-pop input[type=checkbox] { width: 19px; height: 19px; flex: 0 0 19px; }
}

/* ── খাড়া বার: জায়গা অনুযায়ী মানিয়ে নেওয়া (owner ২০২৬-০৮-১৩ · ১৪) ──
   ⚠️ উচ্চতা স্থির ২৭৫px ছিল বলে ছোট/কাত পর্দায় পুরো নকশা ঢেকে দিত, এমনকি
   ক্যানভাসের বাইরে বেরিয়ে যেত। এখন উচ্চতা সামলায় .nsk-rail-এর max-height
   ও ভেতরের flex-shrink + স্ক্রল (উপরে দেখুন); JS-এর fitSideStg() শুধু
   .autoMini বসায় — ক্যানভাস খুব খাটো হলে, বা মাপের রেল খোলা থাকলে।
   ⚠️ আগে এখানে একটি .tight ধাপও ছিল (৩৮×৩২ বোতাম) — বোতামের মূল মাপই
   এখন ৩৪px, তাই ধাপটি অর্থহীন হয়ে গেছে; JS কখনো ক্লাসটি বসাতও না।     */
/* জায়গা একেবারেই নেই: শুধু হাতল, চাপলে খুলবে */
.nsk-stgw.autoMini { background: rgba(255, 255, 255, .82); padding: 3px; }
.nsk-stgw.autoMini .nsk-stg { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   টুলবার + স্টাইল বার — এক মাপ, এক সারি  (owner ২০২৬-০৮-১৫)
   ───────────────────────────────────────────────────────────────────────
   ⚠️ কেন আগের অডিটে ধরা পড়েনি: ডেস্কটপ ব্রাউজারে পর্দা ৩৭৫px করে দেখলে
      `pointer: coarse` মেলে না, তাই `.nsk-b` ৩০px-ই থাকে আর সবকিছু মিলে
      যায় — **ছবিতে ঠিক, ফোনে ভুল**। আসল ফোনে (coarse) মেপে যা পাওয়া গেল:

        উপরের বার : বোতাম ৪৪px, কিন্তু নামের ঘর ৩০px  → এক সারিতে দুই মাপ,
                    বার ৫৩px উঁচু, ইনপুট মাঝখানে ভাসত
        স্টাইল বার : সব কন্ট্রোল ৩৪px → উপরের বারের ৪৪px-এর সাথে মেলে না
        লেয়ার চিপ  : "লেয়ার ০" ৪৮px চওড়া, ঘর ৪৬px → "লেয়া…" কাটা পড়ত

   সমাধান: একটাই মাপ `--nskCtl` — মাউসে ৩০px, আঙুলে ৪৪px; দুই বারের
   প্রতিটি কন্ট্রোল সেটাই মানে। লেয়ার চিপ বাকি জায়গাটুকু নিজে নিয়ে নেয়,
   তাই নাম আর কাটে না।
   ═══════════════════════════════════════════════════════════════════════ */
.nsk { --nskCtl: 30px; }
@media (pointer: coarse) { .nsk { --nskCtl: 44px; } }

/* ── উপরের বার: নামের ঘর ও বোতাম একই উচ্চতা ── */
.nsk-bar > .nsk-b,
.nsk-bar > .nsk-bgrp > .nsk-b { width: var(--nskCtl); height: var(--nskCtl); }
.nsk-bar .nsk-name { height: var(--nskCtl); }

/* ── স্টাইল বার: হুবহু একই উচ্চতা ── */
.nsk-style .nsk-sw { width: var(--nskCtl); height: var(--nskCtl); flex: 0 0 var(--nskCtl); }
.nsk-style select,
.nsk-style .nsk-ltb,
.nsk-style .nsk-lyrchip { height: var(--nskCtl); }
.nsk-style .nsk-tg:not(.t) { width: var(--nskCtl); height: var(--nskCtl); font-size: 14px; }
.nsk-style > .nsk-b { min-width: var(--nskCtl); height: var(--nskCtl); }

/* ── লেয়ার চিপ: বাকি জায়গাটুকু নেয় (আর কাটে না) ──
   ⚠️ ≤৭৮০px-এ `.nsk-style > * { flex:0 0 auto }` আছে; এই নিয়ম বেশি
      নির্দিষ্ট বলে সেটাকে হারায় — ক্রম বদলাবেন না।                    */
@media (max-width: 780px) {
  .nsk-style .nsk-lyrwrap { flex: 1 1 auto; min-width: 60px; }
  .nsk-style .nsk-lyrchip { width: 100%; max-width: none; justify-content: flex-start; }
  .nsk-style .nsk-lyrchip .nsk-lyrname { max-width: none; flex: 1 1 auto; min-width: 0; text-align: left; }
  .nsk-style .nsk-lyrchip > i { margin-left: auto; }
  /* বার দুটো লম্বা হলে ক্যানভাসের জায়গা কমে — প্যাডিং একটু কমিয়ে পুষিয়ে দিই */
  .nsk-bar, .nsk-style { padding: 3px 5px; }
}

/* খুব সরু ফোন (≤৩৫৯px — iPhone SE ধরনের): মোটা-সিলেক্ট ও লাইনটাইপের নমুনা
   একটু ছোট করে লেয়ার চিপকে জায়গা ছেড়ে দিই, নইলে ৩২০px-এ নামটা আবার কাটে।
   স্বাভাবিক ফোনে (≥৩৬০px) কিছুই বদলায় না — মেপে দেখা হয়েছে। */
@media (max-width: 359px) {
  .nsk-style select#nskLw { max-width: 60px; font-size: 10.5px; }
  .nsk-style .nsk-ltb { padding: 0 4px; gap: 3px; }
  .nsk-style .nsk-ltb .nl-dash { flex: 0 0 26px; width: 26px; }
}

/* ডেস্কটপে স্টাইল বারে অনেক ফাঁকা জায়গা পড়ে থাকে, অথচ লাইনটাইপের নাম
   ১৪৮px-এ কেটে "একটানা (Contin…" দেখাত — ওখানে একটু বাড়িয়ে দিলাম। */
@media (min-width: 1000px) { .nsk-style .nsk-ltb { max-width: 210px; } }

/* ── ফোন আড়াআড়ি (উচ্চতা ≤৫৪০px): উচ্চতাই দামি ──
   ⚠️ উপরে ৭৭১ লাইনের ব্লকে `.nsk-b,.nsk-name{height:28px}` আছে, কিন্তু
      এই ফাইলের শেষের `--nskCtl` নিয়মগুলো বেশি নির্দিষ্ট বলে সেটাকে
      হারিয়ে দিত — ফলে কাত করলে দুই বার মিলে ১০২px খেয়ে ক্যানভাস
      ২১১px-এ নেমে যেত। তাই এখানে ভেরিয়েবলটাই ছোট করে দিই (৩৬px —
      আঙুলে ধরার মতো, অথচ ২টি বার মিলে ৮৬px)। */
@media (max-height: 540px) and (max-width: 900px) {
  .nsk { --nskCtl: 36px; }
  .nsk-bar, .nsk-style { padding: 2px 5px; }
}

/* লাইনটাইপের নাম ৬০০px থেকেই পুরো দেখানো যায় — জায়গা থাকে */
@media (min-width: 600px) { .nsk-style .nsk-ltb { max-width: 210px; } }

/* ═══ ধাপ ৫ — হিস্যা অনুযায়ী জমি ভাগ ═══ */
.sp { display: flex; flex-direction: column; gap: 7px; }
.sp-head, .sp-row { display: grid; grid-template-columns: 24px 1.2fr 0.8fr 1.3fr 34px; gap: 5px; align-items: center; }
.sp-head { font: 700 10.5px/1.2 inherit; color: #8a6f8d; padding: 0 2px; }
.sp-rows { display: flex; flex-direction: column; gap: 5px; max-height: 40vh; overflow-y: auto; }
.sp-n { font: 700 11.5px/1 inherit; color: var(--nskA2); text-align: center; }
.sp-row .nsk-in { height: 34px; font-size: 12.5px; }
.sp-out { font: 600 10.5px/1.25 inherit; color: #15803d; overflow: hidden; text-overflow: ellipsis; }
.sp-row .sp-del { width: 34px; height: 34px; padding: 0; }
@media (max-width: 599px) {
  .sp-head { grid-template-columns: 22px 1.2fr 0.8fr 32px; }
  .sp-head .sp-out { display: none; }
  .sp-row { grid-template-columns: 22px 1.2fr 0.8fr 32px; row-gap: 2px; }
  .sp-row .sp-out { grid-column: 2 / 4; }
  .sp-row .nsk-in { height: 38px; }
  .sp-row .sp-del { width: 32px; height: 38px; }
}

/* জমির তফসিল — তালিকার সারি */
.sch-rows { gap: 2px; }
.sch-row { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 5px; align-items: center;
  padding: 3px 2px; border-bottom: 1px dashed #f0e6f2; font: 600 11.5px/1.3 inherit; color: #4a3a4d; }
.sch-row:last-child { border-bottom: 0; }
.sch-l { color: #2b2130; font-weight: 800; }
.sch-b { color: #6b5a6e; }

/* ── খুঁজুন (দাগ/খতিয়ান) — নাম fd-*, অন্য কিছুর সাথে সংঘর্ষ নেই ── */
.fd-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto;
  overscroll-behavior: contain; }
.fd-em { margin: 6px 2px; }
.fd-row { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) 16px; gap: 7px;
  align-items: center; width: 100%; min-height: 40px; padding: 5px 8px; text-align: left;
  border: 1px solid var(--nskL); border-radius: 6px; background: #fff; cursor: pointer;
  font: 600 12px/1.3 inherit; color: #4a3a4d; }
.fd-row:hover, .fd-row:focus-visible { border-color: var(--nskA); background: #fdf6fe; outline: 0; }
.fd-row > i:first-child { color: var(--nskA2); font-size: 12px; text-align: center; }
.fd-k { font: 700 10.5px/1.2 inherit; color: #8a6f8d; background: #f7eef8;
  border-radius: 4px; padding: 3px 6px; white-space: nowrap; }
.fd-v { color: #2b2130; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-go { color: #b39ab6; font-size: 11px; }
.fd-row:hover .fd-go { color: var(--nskA); }
@media (pointer: coarse) { .fd-row { min-height: 44px; } }

/* সেটিংসের ছোট ঘরগুলো আঙুলের মাপে — ৩০px ছিল, ছোঁয়ার ঘর ৪০px লাগে
   (২০২৬-০৮-১৮ মেপে ধরা: স্থানাঙ্ক ছকের "ফাঁক" ঘর ২৮px পাওয়া গেল) */
@media (pointer: coarse) {
  .pp-fld > input, .pp-fld > select, .pp-fld > .nsk-sw, .pp-fld > .nsk-ltb { height: 40px; }
  .pp-fld > input, .pp-fld > select { font-size: 13px; }
}

/* সেটিংসের ট্যাব ও ছোট বোতাম — আঙুলের মাপে (২০২৬-০৮-১৮ মেপে: ট্যাব ৩১px,
   টগল-অপশন ২০–২৩px; ট্যাবই তো সেটিংসের মূল পথ, এত ছোট হলে ভুল ট্যাবে পড়ে) */
@media (pointer: coarse) {
  .st-tab { min-height: 40px; }
  .pp-tgo { min-height: 40px; padding: 5px 8px; }
  .pp-chip { min-height: 44px; justify-content: center; }
  .nsk-mbox .nsk-x { width: 40px; height: 40px; }
}

/* সেগমেন্ট বোতাম ও টেমপ্লেট সারি — বাকি ছোট ঘরগুলো (২৫–৩০px ছিল) */
@media (pointer: coarse) {
  .pp-sb { min-height: 40px; }
  .pp-tplsave > input, .pp-tplsave > .nsk-btn { min-height: 40px; }
}

/* ── প্লটের ছবি (ফর্মের সারি) — নাম pf-ph*, সংঘর্ষ নেই ── */
.nsk-pf-ck.static { cursor: default; }
.nsk-pf-ck.static i { color: var(--nskA2); width: 16px; text-align: center; }
.pf-ph { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 5px; }
.pf-ph > .nsk-btn { flex: 0 0 auto; }
.pf-ph > img { flex: 0 0 auto; width: 44px; height: 34px; object-fit: cover;
  border: 1px solid var(--nskL); border-radius: 4px; background: #f6f2f7; }
.pf-ph > input[type=number] { flex: 1 1 0; min-width: 52px; }

/* ── পুরোনো সংস্করণ (রিভিশন) — নাম rv-* ── */
.rv-list { display: flex; flex-direction: column; gap: 4px; max-height: 44vh; overflow-y: auto;
  overscroll-behavior: contain; }
.rv-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: center;
  padding: 5px 7px; border: 1px solid var(--nskL); border-radius: 6px; background: #fff; }
.rv-t { font: 700 11.5px/1.2 inherit; color: #2b2130; white-space: nowrap; }
.rv-n { font: 600 11px/1.25 inherit; color: #7a6a7d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-b { flex: 0 0 auto; white-space: nowrap; }
@media (pointer: coarse) { .rv-row { min-height: 46px; } .pf-ph > img { width: 52px; height: 40px; } }