/* GOODLOAD — खाने, बटन, और बाक़ी पर्दे
   ═══════════════════════════════════════════════════════════════
   हर खाना बड़ा — ड्राइवर और दुकानदार के हाथ मोटे होते हैं और
   अक्सर गाड़ी हिल रही होती है।
   ═══════════════════════════════════════════════════════════════ */

/* ── splash ─────────────────────────────────────────────── */
/* ⚠️ पहले यह #05080F (लगभग काला) था और मुहर सुनहरी। पहला पर्दा
   बाक़ी app से अलग दुनिया लगता था। अब वही गहरा नीला है जो ब्रांड
   का अपना रंग है (--p) — और manifest का background_color भी यही
   कर दिया गया, ताकि फ़ोन का अपना splash और यह पर्दा एक ही रहें।  */
#splash{
  background:linear-gradient(170deg,#12294F 0%,#0A2144 55%,#071731 100%);
  align-items:center; justify-content:center;
}
.sp-in{ text-align:center; padding:20px; }
.sp-seal{
  width:104px; height:104px; margin:0 auto 18px;
  border-radius:26px;
  /* ⚠️ सुनहरी मुहर हटाई — उस पर truck का कोई रंग उभरता ही नहीं था।
     सफ़ेद टाइल वही है जो ऊपर की पट्टी पर और फ़ोन के icon पर है। */
  background:#FFFFFF;
  display:grid; place-items:center;
  box-shadow:0 18px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  animation:sp-thok .5s cubic-bezier(.2,1.5,.5,1) both;
}
.sp-seal svg{ width:56%; height:56%; }
@keyframes sp-thok{ from{ transform:scale(1.5); opacity:0; } to{ transform:none; opacity:1; } }
.sp-name{
  font-size:1.7rem; font-weight:800; letter-spacing:.04em; color:#fff;
  animation:sp-aao .5s .28s both;
}
/* ⚠️ यह सुनहरा (#E8B45C) था, जबकि इसके तुरंत बाद वाले पर्दे पर वही
   शब्द नारंगी में आता है। एक ही नाम, एक सेकंड में दो रंग — अब एक। */
.sp-name .amber{ color:var(--acc); }
.sp-tag{
  margin-top:8px; font-size:.78rem; font-weight:600; letter-spacing:.14em;
  color:rgba(168,192,232,.78); text-transform:uppercase;
  animation:sp-aao .5s .42s both;
}
.sp-bharat{
  margin-top:26px; font-size:.68rem; font-weight:700; letter-spacing:.2em;
  color:rgba(255,255,255,.34);
  animation:sp-aao .5s .58s both;
}
@keyframes sp-aao{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ── खाने ───────────────────────────────────────────────── */
.fld{ margin-bottom:12px; }
.fld > label{
  display:block; margin-bottom:5px;
  font-size:.78rem; font-weight:800; color:#0E1D33;
}
.fld > label i{ font-style:normal; color:var(--red); }
.fld small{ display:block; margin-top:4px; font-size:.68rem; font-weight:600; color:var(--txt3); }

input, select, textarea{
  width:100%;
  font:inherit; font-size:1rem; font-weight:700;
  color:var(--txt);
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:.7rem;
  padding:12px;
  min-height:2.9rem;
  -webkit-appearance:none; appearance:none;
}
textarea{ min-height:5rem; resize:vertical; font-weight:600; }
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364719A' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; background-size:18px;
  padding-inline-end:34px;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--p2); box-shadow:var(--ring); }
input::placeholder, textarea::placeholder{ color:#A7B2C9; font-weight:600; }
input[readonly]{ background:#F2F5FA; color:var(--txt2); }
.fld.bad input, .fld.bad select{ border-color:var(--red); }
.fld .err{ display:none; margin-top:4px; font-size:.7rem; font-weight:700; color:var(--red); }
.fld.bad .err{ display:block; }

.frow{ display:flex; gap:10px; }
.frow > *{ flex:1; min-width:0; }

/* ── बटन ────────────────────────────────────────────────── */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  background:var(--acc); color:#fff;
  font-size:.95rem; font-weight:800;
  border-radius:.8rem;
  padding:13px 16px;
  min-height:3rem;
  box-shadow:0 6px 18px -6px rgba(240,112,13,.6);
}
.btn:active{ transform:scale(.985); }
.btn[disabled]{ opacity:.5; box-shadow:none; }
.btn .ci{ width:var(--ic-md); height:var(--ic-md); }
.btn-2{ background:#12233F; box-shadow:0 6px 18px -6px rgba(18,35,63,.5); }
.btn-out{
  background:#fff; color:#0E1D33;
  border:1.5px solid var(--border); box-shadow:none;
}
.btn-red{ background:var(--red); box-shadow:0 6px 18px -6px rgba(220,53,69,.5); }
.btn-sm{ min-height:2.75rem; padding:9px 14px; font-size:.85rem; width:auto; }

.linkbtn{
  display:inline-block; min-height:2.75rem;
  padding:8px 4px;
  font-size:.82rem; font-weight:800; color:var(--p2);
  text-decoration:underline;
}

/* ── login ──────────────────────────────────────────────── */
.lg-role{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--border); border-radius:.8rem;
  padding:10px 12px; margin-bottom:16px;
  box-shadow:var(--shadow-sm);
}
.lg-role .row-ic{ width:2.1rem; height:2.1rem; }
.lg-role b{ flex:1; min-width:0; font-size:.88rem; font-weight:800; color:#0E1D33; }

.ph-in{ display:flex; gap:8px; }
.ph-in .cc{
  flex:none; width:4.4rem;
  display:grid; place-items:center;
  background:#F2F5FA; border:1.5px solid var(--border); border-radius:.7rem;
  font-size:.95rem; font-weight:800; color:var(--txt2);
}
.ph-in input{ flex:1; min-width:0; letter-spacing:.06em; }

.otp-box{ display:none; margin-top:14px; }
.otp-box.on{ display:block; }

/* ── पैसे का बड़ा अंक ───────────────────────────────────── */
.bigamt{
  background:#12233F; color:#fff;
  border-radius:.9rem; padding:14px 16px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
}
.bigamt span{ font-size:.75rem; font-weight:700; opacity:.78; }
.bigamt b{ font-size:1.5rem; font-weight:800; line-height:1.1; }

/* ── बिल की पंक्तियाँ ───────────────────────────────────── */
.item{
  background:#fff; border:1px solid var(--border); border-radius:.8rem;
  padding:11px; margin-bottom:8px;
  box-shadow:var(--shadow-sm);
}
.item-top{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.item-top b{ flex:1; min-width:0; font-size:.85rem; font-weight:800; color:#0E1D33; }
.item-del{
  flex:none; width:2.75rem; height:2.75rem;
  display:grid; place-items:center;
  border-radius:.6rem; color:var(--red);
}
.item-del:active{ background:#FDECEE; }
.item-del .ci{ width:var(--ic); height:var(--ic); }

/* चौड़ी चीज़ अपने अंदर सरके — पूरा पन्ना आड़ा न सरके */
.sarko{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── जोड़-घटाव की पर्ची ─────────────────────────────────── */
.tot{ background:#fff; border:1px solid var(--border); border-radius:.9rem; padding:12px 14px; }
.tot-r{ display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:.82rem; font-weight:700; color:var(--txt2); }
.tot-r b{ color:#0E1D33; }
.tot-r.big{ border-top:1.5px dashed var(--border); margin-top:6px; padding-top:10px; font-size:1rem; }
.tot-r.big b{ font-size:1.15rem; }

/* ── सूचना का डिब्बा ────────────────────────────────────── */
.note{
  display:flex; gap:9px;
  background:#EAF0FB; border:1px solid #D3E0F5; border-radius:.8rem;
  padding:11px 12px; margin-bottom:12px;
  font-size:.75rem; font-weight:600; color:#2A3F63; line-height:1.55;
}
.note .ci{ width:var(--ic); height:var(--ic); flex:none; color:var(--p2); margin-top:1px; }
.note.warn{ background:#FFF4E5; border-color:#FFE0B2; color:#7A4A00; }
.note.warn .ci{ color:#C77700; }
.note.bad { background:#FDECEE; border-color:#F8CDD2; color:#8A1F2A; }
.note.bad .ci{ color:var(--red); }

/* ── क़ानूनी लिखावट ─────────────────────────────────────── */
.kanoon{ font-size:.8rem; font-weight:600; color:var(--txt2); line-height:1.75; }
.kanoon h2{ font-size:.92rem; font-weight:800; color:#0E1D33; margin:16px 0 6px; }
.kanoon ul{ padding-inline-start:18px; list-style:disc; }
.kanoon li{ margin-bottom:5px; }


/* ── slide वाला बटन (.sw) और उसकी पंक्ति (.switchrow) ──────────
   ⚠️ यह demo से लिया गया है, जहाँ 39 जगह इसी का इस्तेमाल है।
      नाप वहीं वाली रखी गई है — 46×26 का डिब्बा, 18 का गोला।

   ⚠️ एक बात demo से अलग की गई है, जान-बूझकर: demo में यह `<div>`
      पर onclick था। यहाँ असली `<button role="switch">` है, ताकि
      keyboard से चले और पढ़कर सुनाने वाला औज़ार बता सके कि चालू है
      या बंद। दिखने में फ़र्क़ नहीं पड़ता।

   ⚠️ demo की अपनी css में `.sw` कई बार दोबारा लिखा गया है और आपस
      में उलटा पड़ता है (कहीं गोला दाईं तरफ़ है और रंग बंद वाला)।
      इसलिए यहाँ एक ही सीधा नियम रखा है: बिना `.off` = चालू (हरा,
      गोला दाईं तरफ़), `.off` = बंद (स्लेटी, गोला बाईं तरफ़)।    */
.swcard{ padding:2px 14px; }
.switchrow{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 0; border-bottom:1px solid var(--border);
}
.switchrow:last-child{ border-bottom:none; }
.swr-t{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.swr-t b{ font-size:.92rem; font-weight:800; color:#0E1D33; line-height:1.4; }
.swr-t small{
  font-size:.75rem; font-weight:700; color:var(--txt2);
  line-height:1.5; overflow-wrap:anywhere;
}
/* ⚠️⚠️ यहाँ एक बात ध्यान से पढ़िए ⚠️⚠️
   पहले यहाँ सीधे `.sw{ height:26px }` लिखा था, और वह **चलता नहीं
   था**। css/01-rang.css में हर बटन पर `min-height:2.75rem` (44px)
   लगा है — ताकि मोटी उँगली से भी दबाया जा सके। वह नियम सही है,
   उसे मत हटाइए। पर उसकी वजह से यह slide 46×44 की चौकोर डिबिया बन
   जाती थी, 46×26 की गोल पट्टी नहीं। ऊपर से गोला भी ऊपर खिसक जाता।

   इसलिए अब बटन ख़ुद 44 ऊँचा है (छूने की पूरी जगह), और दिखने वाली
   पट्टी उसके **अंदर** `::before` से बनती है — बीचों-बीच, 26 ऊँची।
   दोनों बातें सध जाती हैं।                                      */
.sw{
  flex:none; width:46px; height:44px; position:relative;
  background:none; box-shadow:none; padding:0;
}
/* दिखने वाली पट्टी — बीच में, 26 ऊँची */
.sw::before{
  content:''; position:absolute; left:0; right:0; top:9px; bottom:9px;
  border-radius:14px;
  background:linear-gradient(180deg,#3FCB8E,#12805A);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.25), 0 0 8px rgba(24,160,106,.35);
  transition:background .2s;
}
/* सफ़ेद गोला — पट्टी के बीचों-बीच */
.sw::after{
  content:''; position:absolute; top:50%; margin-top:-9px; right:4px;
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(180deg,#FFFFFF,#D6DEE9);
  box-shadow:0 1px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.95);
  transition:right .2s, left .2s;
}
.sw.off::before{
  background:linear-gradient(180deg,#AFBCCD,#8B9BB0);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.3);
}
.sw.off::after{ right:auto; left:4px; }
/* काम चल रहा हो तो दोबारा मत दबने दो */
.sw[disabled]{ opacity:.55; }
.swnote{
  margin:8px 2px 0; font-size:.78rem; font-weight:600;
  color:var(--txt2); line-height:1.7;
}
.swnote b{ color:#0E1D33; font-weight:800; }


/* ── "या" वाली लकीर — दो रास्तों के बीच ─────────────────────── */
.yaa{
  display:flex; align-items:center; gap:10px;
  margin:16px 0 12px; color:var(--txt3);
  font-size:.78rem; font-weight:700;
}
.yaa::before, .yaa::after{
  content:''; flex:1; height:1px; background:var(--border);
}
/* ⚠️ Google का निशान अपने रंगों में ही रहना चाहिए — यह उनकी शर्त
   है। इसलिए यह sprite वाला icon नहीं, अलग से रखा हुआ है, और इस
   पर currentColor नहीं लगता।                                   */
.gicon{ width:var(--ic-md); height:var(--ic-md); flex:none; }
.lg-gnote{
  display:block; margin:6px 2px 0; font-size:.75rem;
  font-weight:600; color:var(--txt2); line-height:1.6;
}

/* अलग ख़र्च (25 सित.) — हटाने का बटन खाने की बराबरी में, खिंचे नहीं */
.nb-kh .frow{ align-items:flex-end; }
.nb-kh .frow > .nb-kh-del{ flex:0 0 auto; margin-bottom:2px; }
#nb-kh-chips{ margin-bottom:8px; }

/* ── बिल पर bank / UPI / शर्तें (js/33-billset.js, 25 सित.) ── */
.bs-sharten{ margin:0; padding:10px 14px 10px 32px; background:#fff; border:1px solid var(--border);
  border-radius:14px; font-size:.8rem; font-weight:600; color:var(--txt2); line-height:1.6; }
.bs-sharten li{ margin:2px 0; overflow-wrap:anywhere; }
.bs-sirf-chhap{ display:none; }
#print-area .bs-sirf-chhap{ display:block; }
.bs-sign{ margin-top:40px; font-size:.8rem; color:#555; }
.bs-sign span{ display:block; width:60%; max-width:14rem; border-top:1px solid #8A99BE; margin-bottom:6px; }
.nb-bs{ display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:10px 12px; margin:10px 0 4px; border:1px dashed var(--border); border-radius:14px;
  font-size:.78rem; font-weight:700; color:var(--txt2); }
.nb-bs .linkbtn{ flex:none; }

/* मुहर / हस्ताक्षर की photo (25 सित.) */
.bs-foto{ display:flex; flex-direction:column; gap:8px; padding:12px; margin:10px 0;
  background:#fff; border:1px solid var(--border); border-radius:14px; }
.bs-foto img{ max-width:100%; max-height:120px; object-fit:contain; align-self:flex-start;
  border:1px dashed var(--border); border-radius:8px; background:#fff; }
.bs-foto > span{ font-size:.8rem; font-weight:700; color:var(--txt3); }
.bs-foto small{ font-size:.72rem; font-weight:600; color:var(--txt2); }
.bs-foto-b{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bs-sign-f{ display:flex; align-items:flex-end; gap:24px; }
.bs-sign-img{ max-width:60%; max-height:70px; object-fit:contain; }
.bs-muhar-img{ max-width:30%; max-height:90px; object-fit:contain; }

/* ── बिल का नमूना (js/34-namoona.js, 25 सित.) ── */
.nm-jhalak{ position:relative; min-height:220px; display:grid; place-items:center;
  background:#E9EDF5; border:1px solid var(--border); border-radius:14px; padding:10px; }
.nm-jhalak img{ width:100%; max-width:420px; height:auto; border-radius:6px;
  box-shadow:0 6px 18px rgba(10,33,68,.14); background:#fff; }
#nm-ruko{ font-size:.8rem; font-weight:700; color:var(--txt3); }
.nm-jhalak img:not([hidden]) ~ #nm-ruko{ display:none; }
.nm-note{ margin:8px 2px 4px; font-size:.72rem; font-weight:600; color:var(--txt2); line-height:1.55; }
.nm-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr)); gap:10px; }
.nm-card{ display:flex; flex-direction:column; background:#fff; border:1.5px solid var(--border); border-radius:14px; overflow:hidden; }
.nm-card.on{ border-color:var(--p, #1B54B0); box-shadow:0 0 0 2px rgba(27,84,176,.18); }
.nm-chuno{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:3px;
  padding:12px; min-height:5.5rem; }
.nm-chuno:focus-visible{ outline:2px solid #1B54B0; outline-offset:-2px; }
.nm-dot{ width:100%; height:10px; border-radius:6px; margin-bottom:6px; }
.nm-chuno b{ font-size:.85rem; font-weight:800; color:#0E1D33; }
.nm-chuno small{ font-size:.7rem; font-weight:600; color:var(--txt2); line-height:1.4; }
.nm-chuno em{ font-style:normal; font-size:.66rem; font-weight:800; color:#1B54B0; }
.nm-hatao{ align-self:flex-start; margin:0 12px 10px; color:var(--red) !important; }
.nm-hatao.pakka{ font-weight:800; }
.nm-banao{ padding:14px; }
.nm-l{ display:block; margin:10px 0 6px; font-size:.78rem; font-weight:800; color:#0E1D33; }
.nm-rang{ display:flex; flex-wrap:wrap; gap:10px; }
.nm-rangbtn{ width:2.5rem; height:2.5rem; min-height:2.5rem; border-radius:50%; border:3px solid #fff;
  box-shadow:0 0 0 1px var(--border); cursor:pointer; padding:0; }
.nm-rangbtn.on{ box-shadow:0 0 0 3px #0E1D33; }
.nm-banao-b{ display:flex; gap:10px; margin-top:12px; }
.nm-banao-b .btn{ flex:1; }
.nb-bs-b{ display:flex; gap:14px; flex:none; }

/* ── ख़रीदार ढूँढना (js/35-saanjha.js, 25 सित.) ── */
.nb-dh{ padding:12px; margin-bottom:12px; background:#F3F7FF; border:1px dashed #B9C8E6; border-radius:14px; }
.nb-dh > label{ display:block; font-size:.78rem; font-weight:800; color:#0E1D33; margin-bottom:8px; line-height:1.5; }
.nb-dh > label small{ font-weight:600; color:var(--txt2); }
.nb-dh-row{ display:flex; gap:8px; }
.nb-dh-row input{ flex:1; min-width:0; }
.nb-dh-row .btn{ flex:none; }
#nb-dh-nateeja{ margin-top:10px; }
.nb-dh-card{ display:flex; flex-direction:column; gap:4px; padding:12px; background:#fff; border:1px solid var(--border); border-radius:12px; }
.nb-dh-card b{ font-size:.92rem; font-weight:800; color:#0E1D33; }
.nb-dh-card small{ font-size:.72rem; font-weight:700; color:var(--txt2); }
.nb-dh-card span{ font-size:.78rem; font-weight:600; color:#26324D; overflow-wrap:anywhere; }
.nb-dh-card .btn{ margin-top:8px; align-self:flex-start; }
.nb-dh-na, .nb-dh-ruko, .nb-dh-ok{ font-size:.78rem; font-weight:700; color:var(--txt2); line-height:1.5; }
.nb-dh-ok{ color:#0B6B4C; }

/* ── stock (js/36-stock.js, 25 सित.) ── */
.dk-stock{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-block; margin:4px 0 2px;
  font-size:.7rem; font-weight:800; color:#0B6B4C; background:#E8F6EF; border-radius:8px; padding:3px 8px; }
.dk-stock.khatam{ color:#B4233A; background:#FDECEE; }
.dk-stock:focus-visible{ outline:2px solid #1B54B0; }
.dk-stock-box{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; }
.dk-stock-box input{ flex:1 1 5rem; min-width:0; }
.dk-stock-box small{ flex-basis:100%; font-size:.66rem; color:var(--txt3); font-weight:600; }
.nb-stock{ display:block; margin:-4px 0 8px; font-size:.7rem; font-weight:800; color:#0B6B4C; }

/* ── कर्मचारी (js/37-naukar.js, 25 सित.) ── */
.nk-rolebtn{ margin-top:14px; }
.nk-pass-row{ display:flex; gap:8px; align-items:center; }
.nk-pass-row input{ flex:1; min-width:0; }
.nk-card{ padding:12px 14px; margin-bottom:10px; display:flex; flex-direction:column; gap:4px; }
.nk-card.band{ opacity:.72; }
.nk-sir{ display:flex; align-items:center; gap:8px; }
.nk-sir b{ font-size:.95rem; font-weight:800; color:#0E1D33; }
.nk-sir em{ font-style:normal; font-size:.68rem; font-weight:800; color:#1B54B0; background:#EAF0FB; border-radius:8px; padding:2px 8px; }
.nk-card > small{ font-size:.74rem; font-weight:600; color:var(--txt2); overflow-wrap:anywhere; }
.nk-kya{ font-size:.76rem; font-weight:700; color:#26324D; }
.nk-b{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:4px; }
.nk-hatao{ color:var(--red) !important; }
.nk-hatao.pakka{ font-weight:800; }
.nk-bahar{ margin-top:10px; color:var(--red); }
/* कर्मचारी को मालिक वाले बटन न दिखें — नियम वैसे भी मना करते हैं, यह सिर्फ़ उलझन से बचाता है */
body[data-naukar] [data-menu-btn],
body[data-naukar] #bv-cn,
body[data-naukar] .nb-bs .linkbtn,
body[data-naukar] .kb-naam-hatao,
body[data-naukar] .kb-hatao,
body[data-naukar] .kb-badlo,
body[data-naukar] #dk-list [data-mitao]{ display:none !important; }

/* ── "अभी सिर्फ़ इस फ़ोन में" की पट्टी — js/38-aaina.js (25 सित.) ── */
.baki-patti[hidden]{ display:none; }
.baki-patti{ margin-bottom:12px; }

/* ── सेटिंग के हिस्से (26 सित.) — छिपी पंक्ति सचमुच छिपे ── */
.row[hidden], #st-bill-hissa[hidden]{ display:none; }
#st-jagah-dikhe .linkbtn{ flex:none; font-size:.8rem; }

/* ── नया बिल: ग्राहक ढूँढना (26 सित.) — js/35-saanjha.js ── */
.nb-dh-khoj{ position:relative; flex:1; min-width:0; display:block; }
.nb-dh-khoj .ci{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:1.1rem; height:1.1rem; color:var(--txt3); pointer-events:none; }
.nb-dh-khoj input{ width:100%; padding-inline-start:2.4rem; margin:0; }
.nb-dh-row .btn{ margin:0; width:auto; padding-inline:14px; }
.nb-dh-suchi{ display:flex; flex-direction:column; gap:6px; }
.nb-dh-ek{
  appearance:none; font:inherit; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:10px; padding:9px 10px;
  background:#fff; border:1px solid var(--border); border-radius:12px;
}
.nb-dh-ek:active{ background:#EAF0FB; }
.nb-dh-gola{
  width:2.3rem; height:2.3rem; flex:none; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:#EAF0FB; color:var(--p); font-weight:800;
}
.nb-dh-gola.bada{ width:2.9rem; height:2.9rem; font-size:1.1rem; }
.nb-dh-gola img{ width:100%; height:100%; object-fit:cover; }
.nb-dh-ek-t{ flex:1; min-width:0; display:flex; flex-direction:column; }
.nb-dh-ek-t b{ font-size:.9rem; font-weight:800; color:#0E1D33; }
.nb-dh-ek-t small{ font-size:.74rem; font-weight:600; color:var(--txt2); }
.nb-dh-ek em{ font-style:normal; font-size:.8rem; font-weight:800; }
.lal{ color:var(--red); } .hara{ color:#0E7A58; }
.nb-dh-card{ border-color:#9ED9BF; background:#F2FBF6; }
.nb-dh-sir{ display:flex; gap:10px; align-items:center; margin-bottom:4px; }
.nb-dh-sir > span:last-child{ display:flex; flex-direction:column; min-width:0; }
.nb-dh-gl{ color:#0E7A58 !important; }
.nb-dh-baki{ display:inline-block; margin-top:4px; padding:4px 10px; border-radius:99px; background:#EEF3FC; font-size:.78rem !important; font-weight:800 !important; align-self:flex-start; }
.nb-dh-baki.lal{ background:#FDECEE; color:var(--red) !important; }
.nb-dh-baki.hara{ background:#E7F4EE; color:#0E7A58 !important; }
#nb-dh-server:empty{ display:none; }
#nb-dh-server{ margin-top:8px; }

/* Gmail जोड़ना (27 सित.) · js/44-gmail.js — ज़रूरी वाले में पीछे का बटन नहीं */
#gj-wapas[hidden], #gj-bahar[hidden], #gj-ek[hidden], #gj-do[hidden]{ display:none; }
#gj-do .btn + .btn{ margin-top:10px; }