/* GOODLOAD — ढाँचा: appbar, नीचे का nav, टाइलें, सूचियाँ
   ═══════════════════════════════════════════════════════════════
   ये चीज़ें हर पर्दे पर एक जैसी रहती हैं। demo (9-new-design) से
   देखकर बनाई गई हैं — गहरा appbar, सफ़ेद टाइलें, नीचे 6 वाला nav।

   जगह px में, लिखावट rem में — ताकि आदमी की font setting से
   लिखावट बढ़े पर ढाँचा न फूले।
   ═══════════════════════════════════════════════════════════════ */

/* ── पर्दा बदलना ─────────────────────────────────────────── */
.screen{
  display:none;
  min-height:100vh;    /* पुराने Android के लिए */
  min-height:100svh;   /* नए के लिए */
  flex-direction:column;
  background:#F3F5F9;
}
.screen.active{ display:flex; }

/* ── ऊपर की गहरी पट्टी ───────────────────────────────────── */
.appbar{
  position:sticky; top:0; z-index:20;
  background:#12233F; color:#fff;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 2px 10px rgba(10,33,68,.18);
}
/* ⚠️ tablet और computer पर यह पट्टी पूरी चौड़ी थी, जबकि नीचे का
   सामान सिर्फ़ 34rem का और बीच में। नतीजा — पीछे वाला बटन और
   नाम सामान से बहुत दूर बाएँ कोने में चिपके दिखते थे, और पूरा
   पर्दा टूटा-टूटा लगता था।

   पट्टी का रंग किनारे तक रहने देते हैं (वही ठीक दिखता है), पर
   उसके अंदर का सामान उतना ही खिसका देते हैं जितना नीचे वाला
   डिब्बा खिसका है — दोनों एक सीध में आ जाते हैं।

   ⚠️ यह अलग पंक्ति में जान-बूझकर है। बहुत पुराने फ़ोन max() नहीं
      समझते; वे इस पूरी पंक्ति को छोड़ देंगे और ऊपर वाली 12px
      वाली सादी padding पर चलते रहेंगे — यानी कुछ टूटेगा नहीं।  */
.appbar{
  padding-inline: calc(max(0px, (100% - var(--maxw)) / 2) + clamp(12px, 3.5vw, 20px));
}
.appbar-t{ flex:1; min-width:0; font-size:1.02rem; font-weight:800; line-height:1.25; }
.appbar-t small{ display:block; font-size:.7rem; font-weight:600; opacity:.72; }
.appbar .ib{
  flex:none; width:2.75rem; height:2.75rem;
  display:grid; place-items:center;
  border-radius:.7rem; color:#fff;
}
.appbar .ib:active{ background:rgba(255,255,255,.14); }
.appbar .ib .ci{ width:var(--ic-lg); height:var(--ic-lg); }

/* ── बीच का हिस्सा ──────────────────────────────────────── */
.body{
  flex:1;
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding:14px clamp(12px,3.5vw,20px) 14px;
}
.body.has-nav{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }

/* ── हिस्से का नाम ──────────────────────────────────────── */
.secname{
  display:flex; align-items:center; gap:8px;
  margin:4px 0 10px;
  font-size:.95rem; font-weight:800; color:#0E1D33;
}
.secname::before{
  content:''; width:4px; height:1.1rem; border-radius:2px;
  /* ⚠️ यह नारंगी थी। नारंगी "यह करना है" के लिए बचाकर रखी है —
     यह पट्टी बताती है कि आप कौन हैं, इसलिए role का रंग।       */
  background:var(--role,var(--acc)); flex:none;
}
.secname .ci{ width:var(--ic); height:var(--ic); color:var(--p2); }

/* ── टाइलों की जाली — तीन एक पंक्ति में, अपने आप सिमटती ── */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:10px;
}
.tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  background:#fff; border:1px solid var(--border); border-radius:.9rem;
  padding:14px 8px;
  box-shadow:var(--shadow-sm);
  text-align:center;
  min-height:96px;
  transition:transform .13s, box-shadow .18s;
}
.tile:active{ transform:scale(.97); }
.tile-ic{
  width:2.4rem; height:2.4rem; flex:none;
  border-radius:30%;
  background:var(--tint,#EAF0FB);
  color:#12365F;
  display:grid; place-items:center;
}
.tile-ic .ci{ width:55%; height:55%; }
.tile b{ font-size:.78rem; font-weight:800; color:#0E1D33; line-height:1.2; }
.tile span{ font-size:.66rem; font-weight:600; color:var(--txt3); line-height:1.2; }

/* ── नीचे का nav ────────────────────────────────────────── */
.botnav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:#12233F;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  display:flex;
  box-shadow:0 -2px 14px rgba(10,33,68,.22);
}
/* hidden लगे तो सचमुच छिपे — वरना ऊपर वाला display:flex जीत जाता है */
.botnav[hidden]{ display:none; }
.botnav-in{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  display:flex;
}
.nbtn{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:5px 2px;
  color:rgba(255,255,255,.62);
  font-size:.6rem; font-weight:700;
  border-radius:.6rem;
}
.nbtn .ci{ width:var(--ic-md); height:var(--ic-md); }
.nbtn small{
  font-size:.55rem; font-weight:600; opacity:.8; line-height:1.1;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nbtn.on{ color:var(--acc2); }
.nbtn:active{ background:rgba(255,255,255,.1); }

/* ── सूची की पंक्ति ─────────────────────────────────────── */
.row{
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:start;
  background:#fff; border:1px solid var(--border); border-radius:.8rem;
  padding:11px 12px; margin-bottom:8px;
  box-shadow:var(--shadow-sm);
}
.row:active{ transform:scale(.99); }
.row-ic{
  width:2.4rem; height:2.4rem; flex:none; border-radius:30%;
  background:var(--tint,#EAF0FB); color:#12365F;
  display:grid; place-items:center; font-weight:800; font-size:.9rem;
}
.row-ic .ci{ width:55%; height:55%; }
.row-txt{ flex:1; min-width:0; }
.row-t{ display:block; font-size:.9rem; font-weight:800; color:#0E1D33; line-height:1.3; }
.row-s{ display:block; font-size:.72rem; font-weight:600; color:var(--txt2); line-height:1.35; }
.row-amt{ flex:none; text-align:end; font-size:.9rem; font-weight:800; }
.row-amt small{ display:block; font-size:.62rem; font-weight:700; opacity:.75; }
.amt-in { color:var(--green); }
.amt-out{ color:var(--red); }

/* ── ख़ाली हालत — नया आदमी यही देखेगा ──────────────────── */
.khali{
  text-align:center;
  padding:30px 16px;
  color:var(--txt3);
}
.khali .ci{ width:var(--ic-xl); height:var(--ic-xl); color:#C3CDE2; stroke-width:1.3; }

/* ⚠️ पहले हर ख़ाली पर्दे पर 24×24 का icon 48px तक खींचा जाता था —
   पतला और बेजान दिखता था, और नया आदमी सबसे पहले वही देखता है।
   अब हर पर्दे की अपनी तस्वीर है (`img/khali/`)। ऊपर वाला `.ci`
   वाला नियम रहने दीजिए — वह अब भी उन जगहों पर चलता है जहाँ
   तस्वीर नहीं बनी (जैसे "तारीख़ नहीं डाली", और गड़बड़ के संदेश)।

   ⚠️ नाप rem में ही है, px में नहीं — फ़ोन की बड़े अक्षर वाली
      setting का आदर बना रहे।                                    */
.khali-chitra{ display:block; width:7rem; height:7rem; margin:0 auto; }
/* ⚠️ पहले यह `.khali b` था — बिना `>` के। तब `<span>ऊपर <b>+</b>
   दबाकर…</span>` वाला छोटा <b> भी पूरी पंक्ति घेर लेता था और
   वाक्य तीन टुकड़ों में टूटकर दिखता था (गाड़ी, बिल्टी, बाज़ार —
   तीनों पर्दों पर)। `>` लगाते ही सिर्फ़ सीधा बच्चा पकड़ में आता है। */
.khali > b{ display:block; margin-top:10px; font-size:.95rem; font-weight:800; color:var(--txt2); }
.khali span{ display:block; margin-top:4px; font-size:.78rem; font-weight:600; }

/* ── ला रहे हैं — असली डिब्बों की परछाईं ──────────────────
   ⚠️ नाप `rem` में ही है और आम डिब्बे जितनी ऊँची — तभी सूची आने
      पर पर्दा उछलता नहीं। px में मत बाँधिए।                    */
.laao{ padding:2px 0; }
.laao-patti{
  height:4.6rem;
  margin-bottom:10px;
  border-radius:var(--r-card);
  background:linear-gradient(100deg,#DBE4F4 32%,#F1F6FF 50%,#DBE4F4 68%);
  background-size:240% 100%;
  animation:laao-chale 1.25s ease-in-out infinite;
}
.laao-patti:last-child{ margin-bottom:0; opacity:.55; }
@keyframes laao-chale{
  from{ background-position:130% 0; }
  to  { background-position:-50% 0; }
}
/* ⚠️ जिनके फ़ोन में "कम हिलना" चालू है, उनके लिए हिलना बंद —
   कुछ लोगों को चलती हुई चीज़ों से सचमुच चक्कर आते हैं।        */
@media (prefers-reduced-motion: reduce){
  .laao-patti{ animation:none; background:#DBE4F4; }
}

/* ── दुकान की श्रेणी — चित्र और रंग चुनने के खाने ──────────
   ⚠️ नाप `rem` में ही है। छोटे फ़ोन पर जाली अपने आप सिमटती है,
      इसलिए कहीं पक्की चौड़ाई मत ठोकिए।                          */
.dk-lbl{
  display:block; margin:12px 0 6px;
  font-size:.75rem; font-weight:800; color:var(--txt2);
}
.dk-grid{
  display:grid; gap:6px;
  grid-template-columns:repeat(auto-fill, minmax(2.6rem, 1fr));
}
.dk-em{
  appearance:none; cursor:pointer; font:inherit; font-size:1.25rem;
  aspect-ratio:1; min-height:2.6rem;
  background:#fff; border:1.5px solid var(--border); border-radius:.7rem;
  display:grid; place-items:center; line-height:1;
}
.dk-em.on{ border-color:var(--p2); background:#EAF0FB; box-shadow:var(--ring); }
/* श्रेणी के चित्र भरे हुए हैं (js/30-chitra.js) — `.ci` की लकीर वाली
   बनावट इन पर नहीं लगनी चाहिए, वरना चित्र ख़ाली ढाँचे बन जाते हैं। */
.ci.ci-chitra{ fill:currentColor; stroke:none; }
.dk-em .ci-chitra{ width:1.55rem; height:1.55rem; color:var(--p); }
.dk-p-ic .ci.ci-chitra{ width:1.5rem; height:1.5rem; color:var(--p); }
/* ⚠️ दस रंग हैं, इसलिए पाँच-पाँच की दो पंक्तियाँ — पहले आख़िरी
   गोली अकेली नीचे गिर जाती थी और टूटी हुई लगती थी। */
.dk-rang{ grid-template-columns:repeat(5, 1fr); max-width:17rem; }
.dk-r{
  appearance:none; cursor:pointer;
  aspect-ratio:1; min-height:2.2rem;
  border:2px solid transparent; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(10,33,68,.12);
}
.dk-r.on{ border-color:var(--p2); box-shadow:var(--ring); }
/* श्रेणी वाली गोली के अंदर चित्र — सामान की पंक्ति पर */
.dk-ic{ font-size:1.15rem; line-height:1; }

/* ── दुकान — Flipkart जैसी पट्टी, खोज और जाली ──────────────
   उपयोगकर्ता ने Flipkart देखकर बनवाया (21 सित.)। उनसे तीन चीज़ें
   लीं: ऊपर खोज · चित्र-के-नीचे-नाम वाली सरकती पट्टी · दो खाने
   वाली जाली।

   ⚠️ जो जान-बूझकर **नहीं** लिया: rating के तारे, दिल का निशान,
      "Sponsored" — Flipkart ख़रीदार के लिए है, यह पर्दा दुकानदार
      के लिए। यहाँ काम एक ही है: बिल बनाते वक़्त सामान तुरंत मिले।

   ⚠️ चित्र वाला चौकोर जान-बूझकर बड़ा रखा है — आगे सामान की असली
      फ़ोटो यहीं बैठेगी, तब ढाँचा बदलना नहीं पड़ेगा।            */
.dk-khoj{ position:relative; margin-bottom:12px; }
.dk-khoj .ci{
  position:absolute; inset-inline-start:.85rem; top:50%;
  transform:translateY(-50%); width:1.05rem; height:1.05rem;
  color:var(--txt3); pointer-events:none;
}
.dk-khoj input{ padding-inline-start:2.6rem; margin:0; }

/* चित्र ऊपर, नाम नीचे — सरकती पट्टी */
.dk-patti{
  display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:0 0 14px; padding-bottom:2px;
  border-bottom:1px solid var(--border);
}
.dk-p{
  appearance:none; cursor:pointer; font:inherit; background:none; border:0;
  flex:none; width:4.6rem; padding:6px 2px 8px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  border-bottom:3px solid transparent; margin-bottom:-1px;
  color:var(--txt2);
}
.dk-p-ic{
  width:2.7rem; height:2.7rem; border-radius:50%;
  display:grid; place-items:center; font-size:1.3rem; line-height:1;
  background:#EEF3FC;
}
.dk-p-ic .ci{ width:1.3rem; height:1.3rem; color:var(--txt2); }
.dk-p b{
  font-size:.64rem; font-weight:700; line-height:1.15; text-align:center;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dk-p small{ font-size:.56rem; font-weight:700; color:var(--txt3); }
.dk-p.on{ border-bottom-color:var(--role,var(--p2)); color:var(--p); }
.dk-p.on b{ color:var(--p); }

/* दो खाने वाली जाली */
.dk-jaali{
  display:grid; gap:10px;
  /* ⚠️ `min()` क्यों — ऊपर .tiles वाली वही बात: बड़े अक्षर पर rem
     बढ़कर जाली एक ही खाने की रह जाती।                          */
  grid-template-columns:repeat(auto-fill, minmax(min(9.5rem, 44vw), 1fr));
}
.dk-card{
  position:relative;
  background:#fff; border:1px solid var(--border); border-radius:.9rem;
  padding:10px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:6px;
}
.dk-card-ic{
  width:100%; aspect-ratio:1.5; border-radius:.6rem;
  display:grid; place-items:center; font-size:2.1rem; line-height:1;
  background:#EEF3FC;
}
.dk-card-ic .ci{ width:1.9rem; height:1.9rem; color:#8FA3C4; }
.dk-card b{
  font-size:.82rem; font-weight:800; color:#0E1D33; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.dk-card small{ font-size:.66rem; font-weight:600; color:var(--txt2); line-height:1.3; }
.dk-card-bhav{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.dk-card-bhav strong{ font-size:1rem; font-weight:800; color:var(--p); }
.dk-card .item-del{ flex:none; }

/* ── टोस्ट (छोटा संदेश) ─────────────────────────────────── */
#toast{
  position:fixed; z-index:90;
  left:0; right:0; bottom:calc(84px + env(safe-area-inset-bottom));
  display:flex; justify-content:center;
  pointer-events:none;
  padding-inline:16px;
}
#toast b{
  background:#12233F; color:#fff;
  font-size:.82rem; font-weight:700;
  padding:10px 16px; border-radius:.8rem;
  box-shadow:0 8px 24px rgba(10,33,68,.35);
  opacity:0; transform:translateY(10px);
  transition:opacity .22s, transform .22s;
  max-width:100%;
}
#toast.on b{ opacity:1; transform:none; }

/* ── "नेट नहीं है" वाली पट्टी ─────────────────────────────────
   सबसे ऊपर, हर पर्दे पर। रंग चेतावनी वाला पर डरावना नहीं —
   काम रुका नहीं है, बस अभी फ़ोन में है।                       */
#bina-net{
  display:none;
  position:fixed;
  left:0; right:0;
  top:0;
  z-index:60;
  align-items:center;
  gap:8px;
  padding:calc(7px + env(safe-area-inset-top)) 12px 7px;
  background:#7A4A00;
  color:#FFE8C2;
  font-size:.72rem;
  font-weight:700;
  line-height:1.4;
}
#bina-net .ci{ width:var(--ic-sm); height:var(--ic-sm); flex:none; }

/* पट्टी दिखे तो ऊपर की चीज़ें उतनी नीचे खिसकें।
   ⚠️ यहाँ :has() मत लिखना — वह 2022 से पहले वाले Android में
      नहीं चलता, और हमारे ज़्यादातर ग्राहक वैसे ही फ़ोन पर हैं।
      body पर एक class लगाना हर जगह चलता है।                 */
body.net-nahi .appbar,
body.net-nahi .rhead{
  padding-top:calc(34px + env(safe-area-inset-top));
}

/* ── भरी है / बाक़ी — icon (js/06-profile.js का haalLikho) ──────
   ⚠️ पहले यहाँ ✓ और ⚠ चिह्न अक्षर थे; नियम है कि SVG icon हों। */
.haal-theek, .haal-baaki{ display:inline-flex; align-items:center; gap:.3em; font-weight:700; }
.haal-theek{ color:var(--green); }
.haal-baaki{ color:#B94A00; }
.haal-theek::before, .haal-baaki::before{
  content:""; width:1.05em; height:1.05em; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.haal-baaki::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5L1.5 21h21z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5L1.5 21h21z'/%3E%3C/svg%3E");
}