/* =====================================================================
   Shop AI — "ওয়ার্কশপ নোটবুক" থিম (v29)
   গ্রাফ-পেপারের উপর কলমে আঁকা: ব্যালপয়েন্ট-নীল কালি, হাইলাইটার-হলুদ, টেপ-লাগানো জব-কার্ড।
   রাতে (dark) এটা চকবোর্ড হয়ে যায়। সব রং ও আকার নিচের :root থেকে বদলানো যায়।
   ===================================================================== */
:root{
  color-scheme:light dark;
  --bg:#e6ede9;--grid:rgba(23,32,58,.075);
  --card:#fbfdfa;--soft:#d9e4de;--line:#b4c3bc;
  --ink:#17203a;--mut:#56657a;--edge:#17203a;
  --acc:#2347d6;--acc2:#2347d6;--accsoft:#dfe6ff;--onacc:#fff;
  --hl:#ffd84a;--hlsoft:#fff0a3;--hlbar:#ffd84a;
  --ok:#0f7f55;--oksoft:#d3f0e1;--onok:#fff;
  --bad:#c62e2e;--badsoft:#fbdcda;
  --warn:#8f5200;--warnsoft:#ffe9b8;
  --sh:3px 3px 0 var(--edge);--sh-sm:2px 2px 0 var(--edge);
  --nav:62px;
  --hand:"Atma","Hind Siliguri","Noto Sans Bengali",system-ui,sans-serif;
  --body:"Hind Siliguri","Noto Sans Bengali",system-ui,-apple-system,sans-serif;
  /* হাতে-আঁকা বাঁকা কোণ: প্রতিটার চার কোণ আলাদা, তাই কোনো বক্স যন্ত্রের মতো সোজা লাগে না */
  --w1:14px 22px 16px 24px/22px 14px 24px 16px;
  --w2:22px 14px 24px 16px/14px 24px 16px 22px;
  --w3:10px 14px 11px 15px/14px 10px 15px 11px;
  --w4:15px 10px 14px 11px/11px 15px 10px 14px;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#162120;--grid:rgba(238,242,234,.06);
  --card:#1e2d2b;--soft:#283a38;--line:#3b5651;
  --ink:#eef2ea;--mut:#a3b4ad;--edge:rgba(238,242,234,.62);
  --acc:#8fb0ff;--acc2:#8fb0ff;--accsoft:#263a63;--onacc:#0e1a33;
  --hl:#ffd84a;--hlsoft:#4d4521;--hlbar:rgba(255,216,74,.34);
  --ok:#5fd6a0;--oksoft:#1b4033;--onok:#0b2a1d;
  --bad:#ff8f86;--badsoft:#4d2725;
  --warn:#ffc65c;--warnsoft:#473714;
  --sh:3px 3px 0 rgba(0,0,0,.55);--sh-sm:2px 2px 0 rgba(0,0,0,.55);
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body,#conv,#splash,#login{background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px}
body{margin:0;color:var(--ink);font:15px/1.5 var(--body);overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--acc)}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
.mut{color:var(--mut)} small{font-size:12.5px}
.err{color:var(--bad);min-height:1.4em;margin:6px 0}
h2,h3,h4{font-family:var(--hand);font-weight:600;letter-spacing:.1px}

/* ---------- app shell ---------- */
#app{height:100dvh;display:flex;flex-direction:column}
#top{flex:none;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--card);border-bottom:2px solid var(--edge)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.brand b{font:600 20px/1.3 var(--hand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding:0 3px;background:linear-gradient(transparent 60%,var(--hlbar) 60%,var(--hlbar) 92%,transparent 92%)}
.logo{flex:none;width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--edge);border-radius:var(--w3);background:var(--hl);font-size:18px;transform:rotate(-6deg);box-shadow:var(--sh-sm)}
.conn{flex:none;white-space:nowrap;margin-left:8px;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);background:var(--card);border:2px dashed var(--line);padding:3px 10px;border-radius:var(--w4)}
.conn i{width:9px;height:9px;border-radius:50%;background:#9aa6a0;border:1.5px solid var(--edge)}
.conn.on{border:2px solid var(--ok);color:var(--ok)}
.conn.on i{background:var(--ok)}
.conn.wait{border-color:var(--warn);color:var(--warn)}
.conn.wait i{background:#e0a000;animation:pulse 1.2s infinite}
#main{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 30px}
#main.nopad{padding:0;overflow:hidden}
.page{max-width:980px;margin:0 auto}
@keyframes pulse{50%{opacity:.35}}
h2{display:block;width:fit-content;max-width:100%;margin:2px 0 16px;padding:0 5px;margin-left:-5px;font-size:23px;line-height:1.35;background:linear-gradient(transparent 58%,var(--hlbar) 58%,var(--hlbar) 90%,transparent 90%)}
h3{margin:24px 0 10px;font-size:17px}

@media(max-width:440px){#top{padding-left:12px;padding-right:12px}.logo{display:none}.conn{font-size:11.5px;padding:3px 8px;margin-left:6px}.brand b{font-size:19px}}

/* ---------- bottom nav ---------- */
#bnav{flex:none;display:flex;justify-content:space-around;background:var(--card);border-top:2px dashed var(--edge);padding:7px 6px calc(7px + env(safe-area-inset-bottom));z-index:5}
#bnav button{position:relative;flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid transparent;background:none;color:var(--mut);padding:5px 2px;border-radius:var(--w3);cursor:pointer;font-size:11.5px;font-weight:500;transition:transform .15s}
#bnav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* চলতি পেজ = মার্কার দিয়ে হাইলাইট করা */
#bnav button.on{color:#17203a;background:var(--hl);border-color:var(--edge);box-shadow:var(--sh-sm);transform:rotate(-1.6deg);font-weight:600}
#bnav em{position:absolute;top:-3px;right:calc(50% - 25px);background:#d92d2d;color:#fff;border:1.5px solid var(--edge);border-radius:99px;font-style:normal;font-size:10.5px;font-weight:600;min-width:19px;height:19px;line-height:16px;padding:0 4px;text-align:center;display:none}
body.conv-open #bnav,body.conv-open #top{display:none}

/* ---------- generic ---------- */
.card{background:var(--card);border:2px solid var(--edge);border-radius:var(--w1);padding:14px;box-shadow:var(--sh)}
.card:nth-child(even){border-radius:var(--w2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:8px}
.stat{display:flex;gap:10px;align-items:center}
.stat .ic{width:42px;height:42px;border:2px solid var(--edge);border-radius:50% 46% 52% 48%/48% 52% 46% 50%;display:grid;place-items:center;font-size:19px;background:var(--hl);color:#17203a;flex:none;transform:rotate(-5deg)}
.stat:nth-child(even) .ic{transform:rotate(5deg);background:var(--accsoft)}
.stat small{color:var(--mut);display:block;line-height:1.2}
.stat b{font:600 24px/1.25 var(--hand)}
input,textarea,select{width:100%;background:var(--card);border:2px solid var(--edge);border-radius:var(--w3);padding:9px 12px;outline:none;transition:box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:var(--acc);box-shadow:3px 3px 0 var(--hl)}
input::placeholder,textarea::placeholder{color:var(--mut);opacity:.8}
textarea{min-height:150px;resize:vertical}
label{display:block;margin:12px 0 5px;color:var(--mut);font-size:13px;font-weight:500}
label.chk{display:flex;gap:8px;align-items:center;color:var(--ink)}label.chk input{width:auto;accent-color:var(--acc)}
.btn{background:var(--acc);color:var(--onacc);border:2px solid var(--edge);border-radius:var(--w3);padding:9px 16px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;justify-content:center;font-weight:600;box-shadow:var(--sh);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}
.btn[disabled]{opacity:.5;pointer-events:none}
@media(hover:hover){.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--edge)}.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}}
.btn.sec{background:var(--card);color:var(--ink)}
.btn.ok{background:var(--ok);color:var(--onok)}
.btn.bad{background:var(--badsoft);color:var(--bad);border-color:var(--bad);box-shadow:3px 3px 0 var(--bad)}
.btn.sm{padding:5px 11px;font-size:13px;border-radius:var(--w4);box-shadow:var(--sh-sm)}
.btn.big{width:100%;padding:12px;font-size:16px;font-family:var(--hand)}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1;min-width:110px}
/* স্ট্যাটাস = রাবার স্ট্যাম্প */
.pill{display:inline-block;padding:0 10px 1px;border:2px solid currentColor;border-radius:var(--w4);background:color-mix(in srgb,currentColor 9%,transparent);color:var(--mut);font:600 12.5px/1.55 var(--hand);transform:rotate(-2.5deg);white-space:nowrap}
.pill.pending{color:var(--warn)}.pill.confirmed,.pill.shipped{color:var(--acc)}
.pill.delivered{color:var(--ok)}.pill.cancelled{color:var(--bad)}
.alert{padding:10px 14px;border:2px solid currentColor;border-radius:var(--w3);margin-bottom:14px;font-size:14px}
.alert.bad{background:var(--badsoft);color:var(--bad)}.alert.ok{background:var(--oksoft);color:var(--ok)}.alert.warn{background:var(--warnsoft);color:var(--warn)}
.alert a{color:inherit;font-weight:600}
.empty{text-align:center;color:var(--mut);padding:36px 10px;font-family:var(--hand);font-size:17px}

/* loading spinner (inside views) */
.load{display:grid;place-items:center;gap:10px;padding:48px 0;color:var(--mut)}
.ring{width:38px;height:38px;border-radius:50%;border:4px dashed var(--line);border-top:4px solid var(--acc);animation:spin .8s linear infinite}
.ring.sm{width:16px;height:16px;border-width:2.5px;display:inline-block;vertical-align:-3px;margin-right:2px;border-style:solid;border-color:color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,var(--soft),var(--card),var(--soft));background-size:200% 100%;animation:sh 1.2s infinite;border-radius:var(--w3)}
@keyframes sh{to{background-position:-200% 0}}

/* ---------- splash ---------- */
#splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink);transition:opacity .45s,visibility .45s}
#splash.hide{opacity:0;visibility:hidden}
.sp-bike{position:relative;width:220px;animation:ride 1.1s ease-in-out infinite}
.sp-bike .wheel{animation:spin .7s linear infinite}
.sp-bike .body{animation:bump .35s ease-in-out infinite alternate}
@keyframes ride{50%{transform:translateY(-2px)}}@keyframes bump{to{transform:translateY(-2px)}}
.road{display:flex;gap:18px;justify-content:center;margin-top:-4px;overflow:hidden}
.road i{width:26px;height:4px;border-radius:4px;background:var(--edge);opacity:.5;animation:road .7s linear infinite}
@keyframes road{to{transform:translateX(-44px)}}
.sp-title{margin:14px 0 0;font:600 32px/1.3 var(--hand);letter-spacing:.5px;padding:0 8px;background:linear-gradient(transparent 58%,var(--hlbar) 58%,var(--hlbar) 90%,transparent 90%)}
.sp-sub{margin:0;color:var(--mut)}
.sp-bar{width:180px;height:10px;border:2px solid var(--edge);border-radius:var(--w4);background:var(--card);overflow:hidden;margin-top:14px}
.sp-bar b{display:block;height:100%;width:40%;background:var(--hl);border-right:2px solid var(--edge);animation:bar 1.1s ease-in-out infinite}
@keyframes bar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* ---------- login: গেট-পাস কার্ড ---------- */
#login{position:fixed;inset:0;z-index:110;display:none;place-items:center;padding:16px}
.lbox{position:relative;background:var(--card);border:2px solid var(--edge);border-radius:var(--w1);padding:30px 24px 26px;width:min(380px,100%);box-shadow:5px 5px 0 var(--edge);text-align:center;transform:rotate(-.6deg)}
.lbox::before,.oc::before{content:"";position:absolute;top:-12px;left:50%;width:70px;height:22px;margin-left:-35px;background:rgba(255,216,74,.82);border-left:2px dotted rgba(23,32,58,.25);border-right:2px dotted rgba(23,32,58,.25);transform:rotate(-2.5deg);pointer-events:none}
.lbox input{margin:14px 0 0;text-align:center}.lbox h2{margin:6px auto 0}.lbox p{margin:4px 0}
.lgo{width:70px;height:70px;margin:0 auto;display:grid;place-items:center;font-size:36px;background:var(--hl);border:2px solid var(--edge);border-radius:50% 46% 52% 48%/48% 52% 46% 50%;transform:rotate(-6deg);box-shadow:var(--sh)}

/* ---------- toasts ---------- */
#toasts{position:fixed;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:10px;width:min(420px,calc(100% - 24px))}
.toast{background:var(--ink);color:var(--card);border:2px solid var(--ink);padding:11px 16px;border-radius:var(--w1);box-shadow:4px 4px 0 var(--hl);cursor:pointer;animation:drop .3s}
.toast.order{background:var(--hl);color:#17203a;border-color:#17203a;box-shadow:4px 4px 0 #17203a;font-weight:600}
.toast.bad{background:#c62e2e;color:#fff;border-color:#17203a;box-shadow:4px 4px 0 #17203a}
@keyframes drop{from{transform:translateY(-20px) rotate(-2deg);opacity:0}}

/* ---------- orders: টেপ-লাগানো জব-কার্ড ---------- */
.chips{display:flex;gap:9px;overflow-x:auto;padding:4px 16px 12px;margin:0 -16px 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:2px solid var(--edge);background:var(--card);border-radius:var(--w4);padding:4px 14px;cursor:pointer;font-size:13.5px;font-weight:500}
.chip.on{background:var(--hl);color:#17203a;box-shadow:var(--sh-sm);transform:rotate(-1.5deg);font-weight:600}
.ocards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px 14px;padding-top:10px}
.ocards>.card:nth-child(3n+1){transform:rotate(-.4deg)}
.ocards>.card:nth-child(3n+2){transform:rotate(.3deg)}
.ocards>.card:nth-child(3n){transform:rotate(-.15deg)}
.oc{position:relative;display:flex;flex-direction:column;gap:8px}
.oc:nth-child(even)::before{transform:rotate(2deg);margin-left:-20px}
.oc .hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.oc .hd label{margin:0;display:flex;gap:8px;align-items:center;color:var(--ink);font:600 16px var(--hand)}
.oc .hd input{width:auto}
.oc .addr{color:var(--mut);font-size:13.5px}
/* আইটেমের তালিকা খাতার লাইনটানা পাতার মতো */
.oc .items{background-color:var(--card);background-image:repeating-linear-gradient(transparent 0 21px,var(--line) 21px 22px);border-radius:var(--w4);padding:0 10px;font-size:14px;line-height:22px;border:1.5px dashed var(--line)}
.oc .tot{display:flex;justify-content:space-between;align-items:baseline}.oc .tot b{font:600 21px var(--hand)}
.oc select{padding:5px 8px;border-radius:var(--w4);width:auto;font-size:13px}
.cour{background:var(--accsoft);border:1.5px dashed var(--acc);border-radius:var(--w4);padding:9px 11px;font-size:13.5px;display:flex;flex-direction:column;gap:6px}
.cour a{color:var(--acc);font-weight:600}
.bulk{position:sticky;bottom:0;margin-top:14px;display:none;gap:8px;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--ink);color:var(--card);border:2px solid var(--ink);border-radius:var(--w1);box-shadow:4px 4px 0 var(--hl)}
.bulk.show{display:flex}

/* ---------- products ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px 14px}
.pc{display:flex;flex-direction:column;gap:8px}
.pc .top{display:flex;gap:10px}
.thumb{width:86px;height:86px;flex:none;border-radius:var(--w1);background:var(--soft) center/cover no-repeat;display:grid;place-items:center;color:var(--mut);font-size:26px;cursor:pointer;position:relative;overflow:hidden;border:2px dashed var(--line)}
.thumb.has{border:2px solid var(--edge)}
.thumb em{position:absolute;inset:auto 0 0 0;background:rgba(0,0,0,.6);color:#fff;font-style:normal;font-size:11px;text-align:center;padding:1px 0}
.pc .fields{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.pc .two{display:flex;gap:6px}
.pc input{padding:6px 10px;font-size:14px}
.pc .acts{display:flex;gap:8px;justify-content:flex-end}
.low{color:var(--bad);font-weight:600}
.addform .row>*{min-width:0}
.addform .top{display:flex;gap:12px;align-items:flex-start}
.addform .thumb{width:104px;height:104px}

/* ---------- settings ---------- */
.blk{margin-bottom:16px}
.blk h3{margin:0 0 4px;display:flex;gap:8px;align-items:center}
.savebar{position:sticky;bottom:0;padding:10px 0 2px;margin-top:6px;background:linear-gradient(transparent,var(--bg) 35%);display:flex;gap:10px;align-items:center}

/* ---------- WhatsApp (full screen) ---------- */
.wa{height:100%;display:flex;flex-direction:column}
.wa-st{flex:none;padding:12px 14px 0}
.wa-wrap{flex:1;min-height:0;display:flex}
#clist{width:100%;overflow-y:auto;background:var(--card);overscroll-behavior:contain}
.srch{position:sticky;top:0;z-index:2;background:var(--card);padding:10px 12px;border-bottom:2px dashed var(--line)}
.srch input{border-radius:99px;padding:7px 16px}
.ci{display:flex;gap:11px;align-items:center;padding:11px 14px;border-bottom:1.5px dashed var(--line);cursor:pointer;transition:background .15s}
.ci:active,.ci.on{background:var(--hlsoft)}
.av{width:46px;height:46px;border-radius:50% 47% 52% 48%/48% 52% 46% 50%;flex:none;display:grid;place-items:center;font:600 19px var(--hand);color:#17203a;background:var(--hl);border:2px solid var(--edge)}
.ci .mid{flex:1;min-width:0}.ci .nm{display:flex;justify-content:space-between;gap:8px}
.ci .nm b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ci .nm small{color:var(--mut);flex:none}
.ci .pv{display:flex;justify-content:space-between;gap:8px;color:var(--mut);font-size:13.5px}
.ci .pv span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{background:#d92d2d;color:#fff;border:1.5px solid var(--edge);border-radius:99px;font-size:11.5px;font-weight:600;min-width:21px;height:21px;line-height:18px;text-align:center;padding:0 6px;flex:none}
.qr{text-align:center;padding:26px 16px}.qr img{width:260px;max-width:100%;background:#fff;padding:10px;border:2px solid var(--edge);border-radius:var(--w1);box-shadow:var(--sh)}

/* conversation: full-screen overlay on mobile */
#conv{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;height:100dvh;transform:translateX(100%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s}
#conv.open{transform:none;visibility:visible}
.ch{flex:none;display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;background:var(--card);border-bottom:2px solid var(--edge)}
.back{border:none;background:none;width:38px;height:38px;border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:none}
.back:active{background:var(--hlsoft)}.back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ch .av{width:40px;height:40px;font-size:16px}
.ch .who{flex:1;min-width:0;line-height:1.25}.ch .who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--hand);font-size:16.5px}.ch .who small{color:var(--mut)}
.aitg{border:2px solid var(--ok);background:var(--oksoft);color:var(--ok);border-radius:var(--w4);padding:3px 11px;font:600 13px var(--hand);cursor:pointer;white-space:nowrap;flex:none;transform:rotate(-1.5deg)}
.aitg.off{background:var(--badsoft);color:var(--bad);border-color:var(--bad)}
#cmsgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 8px;display:flex;flex-direction:column;gap:5px;background:transparent}
.day{align-self:center;background:var(--card);color:var(--mut);border:1.5px dashed var(--line);font-size:12px;padding:1px 12px;border-radius:99px;margin:10px 0 6px}
.m{max-width:82%;padding:7px 11px 5px;border:1.5px solid var(--edge);border-radius:var(--w1);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;box-shadow:var(--sh-sm);animation:pop .18s}
@keyframes pop{from{transform:scale(.96);opacity:0}}
.m.in{background:var(--card);align-self:flex-start;border-bottom-left-radius:3px}
.m.out{background:var(--hlsoft);align-self:flex-end;border-bottom-right-radius:3px}
.m.ai{background:var(--oksoft);border-style:dashed}
.m.pend{opacity:.6}
.m small{display:block;text-align:right;color:var(--mut);font-size:11px;margin-top:1px}
.composer{flex:none;display:flex;gap:8px;align-items:flex-end;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--card);border-top:2px solid var(--edge)}
.composer textarea{min-height:0;height:42px;max-height:130px;resize:none;border-radius:22px;padding:9px 16px;line-height:1.4}
.send{flex:none;width:44px;height:44px;border-radius:50% 46% 52% 48%/48% 52% 46% 50%;border:2px solid var(--edge);cursor:pointer;color:var(--onacc);background:var(--acc);display:grid;place-items:center;box-shadow:var(--sh-sm)}
.send svg{width:20px;height:20px;fill:currentColor;margin-left:2px}.send:active{transform:translate(2px,2px);box-shadow:none}
.conv-empty{display:none}

@media(min-width:860px){
  #bnav{justify-content:center;gap:10px}#bnav button{max-width:130px}
  .wa-wrap{border-top:2px solid var(--edge)}
  #clist{width:340px;flex:none;border-right:2px solid var(--edge)}
  #conv{position:static;transform:none;visibility:visible;flex:1;height:auto;transition:none;min-width:0}
  #conv .back{display:none}
  .conv-empty{display:grid;place-items:center;flex:1;color:var(--mut);font:17px var(--hand)}
  #conv.none .ch,#conv.none #cmsgs,#conv.none .composer{display:none}
  #conv:not(.none) .conv-empty{display:none}
  body.conv-open #bnav,body.conv-open #top{display:flex}
}

/* ---------- products v2 / accounts ---------- */
.pgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pgrid3 label{font-size:12px;margin-top:10px}
.pe_margin{min-height:20px;margin-top:6px}.neg{color:var(--bad)}.pos{color:var(--ok)}
.pimgs{display:flex;gap:10px;flex-wrap:wrap}
.pimg{position:relative;width:78px;height:78px;border-radius:var(--w1);background:var(--soft) center/cover no-repeat;border:2px dashed var(--line);cursor:pointer;display:grid;place-items:center;font-size:26px;color:var(--mut);margin:0}
.pimg.add{margin:0;color:var(--acc);border-color:var(--acc)}
.pimg button{position:absolute;top:-8px;right:-8px;width:23px;height:23px;border-radius:50%;border:2px solid var(--edge);background:var(--bad);color:#fff;line-height:1;cursor:pointer;padding:0}
.pimg em{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-style:normal;font-size:10.5px;text-align:center;border-radius:0 0 13px 13px}
.vars{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.vars.hasv::after{content:attr(data-total);color:var(--mut);font-size:13px}
.vrow{background:var(--soft);border:1.5px dashed var(--line);border-radius:var(--w1);padding:10px;display:flex;flex-direction:column;gap:8px}
.vtop{display:flex;gap:8px;align-items:center}.vtop input{flex:1;min-width:0}
.vimg{flex:none;width:44px;height:44px;border-radius:var(--w3);background:var(--card) center/cover no-repeat;display:grid;place-items:center;margin:0;cursor:pointer;border:2px dashed var(--line);font-size:18px}
.vx{flex:none;width:32px;height:32px;border-radius:50%;border:2px solid var(--bad);background:var(--badsoft);color:var(--bad);cursor:pointer;font-size:18px;line-height:1}
.vnums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.vnums input{padding:7px 6px;font-size:14px;min-width:0}
.pc .pview{display:flex;gap:12px;align-items:flex-start}
.pthumbs{display:grid;grid-template-columns:repeat(2,38px);gap:4px;flex:none;position:relative}
.pthumbs i{width:38px;height:38px;border-radius:var(--w4);background:var(--soft) center/cover no-repeat;display:grid;place-items:center;font-style:normal;border:1.5px solid var(--edge)}
.pthumbs i.none{width:80px;grid-column:span 2;height:80px;font-size:26px}.pthumbs b{position:absolute;right:2px;bottom:2px;background:rgba(0,0,0,.7);color:#fff;font-size:10.5px;padding:0 5px;border-radius:99px}
.pinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}.pinfo .mut{font-size:13.5px}
.vchips{display:flex;gap:5px;flex-wrap:wrap}.vchip{background:var(--hlsoft);border:1.5px solid var(--edge);border-radius:var(--w4);padding:0 8px;font-size:12px}
.pc .acts{margin-top:10px}.pc.editing{grid-column:1/-1}
.acct{margin-bottom:14px}.acct h3{margin:0 0 8px}
.atbl{width:100%;border-collapse:collapse}.atbl th{color:var(--mut);font-weight:500;font-size:13px;text-align:right;padding:4px 0}.atbl th:first-child,.atbl td:first-child{text-align:left}
.atbl td{padding:7px 0;border-top:1.5px dashed var(--line);text-align:right}.atbl tr.dim td{color:var(--mut);font-size:13.5px}
.atbl tr.pf td{font:600 18px var(--hand)}
@media(max-width:380px){.vnums{grid-template-columns:repeat(2,1fr)}}

/* ---------- verify call ---------- */
.oc .hdr{display:flex;gap:6px;align-items:center}.ico{border:2px solid var(--edge);background:var(--card);border-radius:var(--w4);width:32px;height:32px;cursor:pointer;font-size:14px;padding:0;box-shadow:var(--sh-sm)}
.ico:active{transform:translate(2px,2px);box-shadow:none}
.vline{border-radius:var(--w4);padding:9px 11px;font-size:13.5px;background:var(--soft);border:1.5px dashed var(--line)}
.vline.ok{background:var(--oksoft);color:var(--ok);border-color:var(--ok)}.vline.bad{background:var(--badsoft);color:var(--bad);border-color:var(--bad)}.vline.warn{background:var(--warnsoft);color:var(--warn);border-color:var(--warn)}.vline.info{background:var(--accsoft);color:var(--acc);border-color:var(--acc)}
.vline summary{cursor:pointer;color:var(--mut);margin-top:4px}.vline pre{white-space:pre-wrap;word-break:break-all;font-size:11px;margin:4px 0 0;color:var(--ink)}
label.chk{display:flex;gap:8px;align-items:center;margin-top:12px}label.chk input{width:auto}

.pcode{font:600 34px/1.3 var(--hand);letter-spacing:6px;margin:14px 0;padding:12px 8px;border-radius:var(--w1);background:var(--hl);color:#17203a;border:2px dashed #17203a;user-select:all}

/* ---- reseller system ---- */
.vnums.r2{grid-template-columns:1fr;margin-top:6px}
#impbar{position:sticky;top:0;z-index:20;background:var(--hl);color:#17203a;border-bottom:2px solid #17203a;padding:8px 12px;display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:500}
#impbar button{background:#17203a;color:#fff;border:0;border-radius:var(--w4);padding:5px 11px;font:inherit;font-weight:600;cursor:pointer}
.wal{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.wal .card{padding:14px}.wal small{display:block;color:var(--mut)}.wal b{font:600 26px/1.3 var(--hand);display:block;margin-top:2px}
.wal .earn b{color:var(--ok)}
.rcard .rtop{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.rcard .rmeta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0;font-size:13.5px}
.rcard .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.rdet{border-top:2px dashed var(--line);margin-top:12px;padding-top:12px}
.rdet h4{margin:14px 0 6px}
.req{border:1.5px dashed var(--edge);border-radius:var(--w4);padding:8px 10px;margin:6px 0;font-size:13.5px;display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.tx{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1.5px dashed var(--line);font-size:13.5px}
.tx .pl{color:var(--ok);font-weight:600;white-space:nowrap}.tx .mi{color:var(--bad);font-weight:600;white-space:nowrap}
.prow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.prow label{font-size:12px}.prow input{padding:8px}
.pr-line{border-top:1.5px dashed var(--line);padding:10px 0}
.pr-line:first-child{border-top:0}
.livedot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);border:1.5px solid var(--edge);margin-right:4px;animation:lv 1.4s infinite}
@keyframes lv{50%{opacity:.25}}
.chk.lock{opacity:.7}

.pbtn{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* ---- two WhatsApp numbers (main shop) ---- */
#wa-accs{display:flex;gap:10px;padding:12px 14px 0;flex:none}
#wa-accs:empty{display:none}
.accchip{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:2px solid var(--edge);background:var(--card);color:var(--ink);border-radius:var(--w1);padding:7px 12px;cursor:pointer;font:inherit;text-align:left;min-width:0;box-shadow:var(--sh-sm)}
.accchip:nth-child(even){border-radius:var(--w2)}
.accchip small{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.accchip.on{border-color:var(--ok);background:var(--oksoft)}.accchip.on small{color:var(--ok)}
.accb{margin-left:5px;font-size:13px;color:var(--acc)}
#accmodal{position:fixed;inset:0;z-index:120;background:rgba(10,16,30,.55);display:grid;place-items:center;padding:16px}
.accbox{position:relative;width:min(380px,100%);text-align:center;max-height:90vh;overflow:auto}
.accx{position:absolute;top:6px;right:10px;border:0;background:none;font-size:26px;color:var(--mut);cursor:pointer}

/* ---------- ছোট ছোট নিয়ম ---------- */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* =====================================================================
   v32 — ড্যাশবোর্ড, ইনবক্স, ভয়েস, "কাস্টমার কথা বলতে চায়" ব্যানার
   ===================================================================== */
.sndbtn{flex:none;width:36px;height:36px;margin-left:8px;border:2px solid var(--edge);border-radius:var(--w3);background:var(--card);cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center;box-shadow:var(--sh-sm)}
.sndbtn.off{opacity:.55;border-style:dashed;box-shadow:none}.sndbtn:active{transform:translate(2px,2px);box-shadow:none}

/* AI থেমে গেছে — কাস্টমার কথা বলতে চায় */
#needtop{flex:none;display:flex;gap:12px;align-items:center;padding:10px 16px;background:var(--bad);color:#fff;border-bottom:2px solid var(--edge);cursor:pointer;line-height:1.3}
#needtop[hidden]{display:none}
#needtop small{display:block;opacity:.92;font-size:12.5px}
#needtop .nb-i{font-size:24px;flex:none}
#needtop.alarm{animation:needpulse 1.1s infinite}#needtop.alarm .nb-i{animation:needshake .9s infinite}
@keyframes needpulse{0%,100%{background:var(--bad)}50%{background:#8f1d1d}}
@keyframes needshake{0%,60%,100%{transform:rotate(0)}10%,30%,50%{transform:rotate(-16deg)}20%,40%{transform:rotate(16deg)}}
@media(prefers-reduced-motion:reduce){#needtop.alarm,#needtop.alarm .nb-i{animation:none}}

/* ---------- dashboard ---------- */
.dash .alerts:empty{display:none}
.hero{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;padding:18px 18px 16px;margin-bottom:14px;background:var(--acc);color:var(--onacc);border:2px solid var(--edge);border-radius:var(--w1);box-shadow:var(--sh)}
.hero::after{content:"";position:absolute;right:-36px;top:-46px;width:150px;height:150px;border-radius:50%;background:var(--hl);opacity:.9;mix-blend-mode:normal;z-index:0}
.hero>*{position:relative;z-index:1}
.hero small{opacity:.85}.hero h2{margin:2px 0 0;font-size:26px;line-height:1.2;color:inherit}.hero p{margin:2px 0 0;opacity:.9}
.hero .hl{min-width:0}.hero .hl small,.hero .hl h2,.hero .hl p{text-shadow:0 0 0 transparent}
.hk{display:flex;gap:10px;flex-wrap:wrap}
.hk>div{background:var(--card);color:var(--ink);border:2px solid var(--edge);border-radius:var(--w3);padding:7px 14px;min-width:104px;box-shadow:var(--sh-sm)}
.hk small{display:block;color:var(--mut);opacity:1;line-height:1.2}.hk b{font:600 24px/1.25 var(--hand)}
.todo{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.td{display:flex;align-items:center;gap:10px;flex:1 1 210px;padding:9px 14px;border:2px solid var(--edge);border-radius:var(--w3);background:var(--card);text-decoration:none;color:var(--ink);box-shadow:var(--sh-sm);transition:transform .12s}
.td:active{transform:translate(2px,2px);box-shadow:none}
.td b{font:600 18px var(--hand);white-space:nowrap}.td span{font-size:13.5px;line-height:1.3}
.td.bad{background:var(--badsoft);border-color:var(--bad)}.td.bad b{color:var(--bad)}
.td.warn{background:var(--warnsoft)}.td.info{background:var(--accsoft)}.td.ok{background:var(--oksoft)}
.wk{margin-bottom:14px}.wkh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}.wkh h3{margin:0}
.bars{display:flex;align-items:flex-end;gap:8px;height:150px;margin:12px 0 10px;padding:0 2px;border-bottom:2px solid var(--edge)}
.bc{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;position:relative}
.bc em{font:normal 11.5px var(--body);color:var(--mut);white-space:nowrap}
.bc i{display:block;width:100%;max-width:44px;background:var(--accsoft);border:2px solid var(--edge);border-bottom:0;border-radius:8px 8px 0 0;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.bc.today i{background:var(--hl)}
.bc small{position:absolute;top:calc(100% + 5px);left:0;right:0;text-align:center;color:var(--mut);font-size:11.5px}
.bc.today small{color:var(--ink);font-weight:600}
.stp{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.sp{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:2px 10px 2px 4px;border:1.5px dashed var(--line);border-radius:99px;color:var(--mut)}
.sp b{min-width:22px;height:22px;display:grid;place-items:center;border-radius:99px;background:var(--soft);color:var(--ink);font:600 12.5px var(--hand);padding:0 5px}
.sp.pending b{background:var(--warnsoft)}.sp.delivered b{background:var(--oksoft)}.sp.cancelled b{background:var(--badsoft)}.sp.shipped b,.sp.confirmed b{background:var(--accsoft)}
.dash .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}

/* ---------- inbox ---------- */
.ftabs{display:flex;gap:6px;margin-top:8px;overflow-x:auto;scrollbar-width:none}
.ftabs::-webkit-scrollbar{display:none}
.ftabs button{flex:none;border:1.5px solid var(--line);background:var(--card);color:var(--mut);border-radius:99px;padding:3px 12px;font:600 13px var(--hand);cursor:pointer;white-space:nowrap}
.ftabs button.on{background:var(--acc);border-color:var(--edge);color:var(--onacc)}
.ci{position:relative}
.ci.unr .nm b{font-weight:700}.ci.unr .pv{color:var(--ink)}
.ci.need{background:var(--badsoft);box-shadow:inset 4px 0 0 var(--bad)}
.ci.need.on,.ci.on{background:var(--hlsoft)}
.av{color:#17203a}
.m.vm{min-width:210px}
.m .vin{font-weight:600}.m .vtx{margin-top:3px;color:var(--mut);font-style:italic}

/* ---------- ভয়েস মেসেজ পাঠানো ---------- */
.composer{position:relative}
.mic{flex:none;width:44px;height:44px;border-radius:50% 46% 52% 48%/48% 52% 46% 50%;border:2px solid var(--edge);cursor:pointer;background:var(--hl);color:#17203a;display:grid;place-items:center;box-shadow:var(--sh-sm)}
.mic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.mic:active{transform:translate(2px,2px);box-shadow:none}
.composer:not(.typing) #csend{display:none}.composer.typing .mic{display:none}
.rec{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--card);z-index:2}
.rec[hidden]{display:none}
.rx{flex:none;width:42px;height:42px;border-radius:50%;border:2px solid var(--bad);background:var(--badsoft);color:var(--bad);cursor:pointer;display:grid;place-items:center}
.rx svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rdot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--bad);animation:pulse 1s infinite}
#rtime{flex:none;font:600 17px var(--hand);min-width:40px;font-variant-numeric:tabular-nums}
.rwave{flex:1;min-width:0;height:34px;display:flex;align-items:center;gap:3px}
.rwave i{flex:1;min-width:2px;max-width:6px;border-radius:3px;background:var(--acc);height:6%;transition:height .09s}
@keyframes pulse{50%{opacity:.35}}

/* ভয়েস বাবল */
.vp{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;padding:2px 0}
.vpb{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--edge);background:var(--acc);color:var(--onacc);display:grid;place-items:center;cursor:pointer;padding:0}
.vpb svg{width:18px;height:18px;fill:currentColor}.vp .pa{display:none}.vp.playing .pa{display:block}.vp.playing .pl{display:none}
.vpw{flex:1;min-width:0;height:32px;display:flex;align-items:center;gap:2px}
.vpw i{flex:1;min-width:2px;border-radius:2px;background:var(--line);opacity:.9}.vpw i.on{background:var(--acc);opacity:1}
.vpt{flex:none;font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
.hero h2{background:none!important;padding:0!important;display:block}
.hero h2::after,.hero h2::before{display:none}
.vpw i{background:var(--mut);opacity:.45}.vpw i.on{background:var(--acc);opacity:1}
.rwave i{min-height:4px}

/* =====================================================================
   v33 — খাটামারা ড্যাশবোর্ড: কুইক অ্যাকশন, ফ্রড চেক শিট, লাইন চার্ট
   ===================================================================== */
.dash>*{animation:rise .5s both}.dash>*:nth-child(2){animation-delay:.04s}.dash>*:nth-child(3){animation-delay:.09s}.dash>*:nth-child(4){animation-delay:.14s}.dash>*:nth-child(5){animation-delay:.19s}.dash>*:nth-child(n+6){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){.dash>*{animation:none}}
.hero{background:linear-gradient(135deg,#1b36b8 0%,var(--acc) 55%,#4a6df0 100%);padding:20px 18px 18px}
@media(prefers-color-scheme:dark){.hero{background:linear-gradient(135deg,#2b4a9e,#3b5fc4 60%,#5b7ee8);color:#fff}}
.hero::after{right:-30px;top:-52px;width:170px;height:170px;opacity:.95}
.hero::before{content:"";position:absolute;left:-40px;bottom:-70px;width:160px;height:160px;border-radius:50%;border:26px solid rgba(255,255,255,.09)}
.hero h2{font-size:28px}
.chipr{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.hc{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:2px 10px;border-radius:99px;background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.hc i{width:8px;height:8px;border-radius:50%;background:#5fe0a6;box-shadow:0 0 0 0 rgba(95,224,166,.7);animation:livedot 1.8s infinite}.hc.bad i{background:#ff8f86;animation:none}
@keyframes livedot{70%{box-shadow:0 0 0 7px rgba(95,224,166,0)}100%{box-shadow:0 0 0 0 rgba(95,224,166,0)}}
.hk>div.big{min-width:170px;background:var(--hl);border-color:#17203a;color:#17203a}.hk>div.big small{color:#4a4320}
.hk .big b{font-size:30px}.hk em{display:block;font-style:normal;font-size:12px;font-weight:600}.hk em.up{color:#0b6b46}.hk em.dn{color:#b3261e}

.qas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.qa{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 12px 11px;background:var(--card);border:2px solid var(--edge);border-radius:var(--w1);box-shadow:var(--sh);color:var(--ink);text-decoration:none;transition:transform .14s,box-shadow .14s;min-height:112px}
.qa:nth-child(even){border-radius:var(--w2)}
.qa:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:5px 6px 0 var(--edge)}.qa:active{transform:translate(2px,2px);box-shadow:none}
.qa b{font:600 17px var(--hand);margin-top:6px}.qa small{color:var(--mut);line-height:1.3;font-size:12.5px}
.qi{width:42px;height:42px;display:grid;place-items:center;border:2px solid var(--edge);border-radius:50% 46% 52% 48%/48% 52% 46% 50%;background:var(--hl);color:#17203a}
.qi svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.q-fr{background:var(--badsoft);border-color:var(--bad)}.q-fr .qi{background:var(--bad);color:#fff;border-color:var(--edge)}
.q-res{background:var(--accsoft)}.q-res .qi{background:var(--acc);color:var(--onacc)}
.q-wa .qi{background:var(--ok);color:#fff}.q-or .qi{background:var(--hl)}.q-pr .qi{background:#ffb4a2}.q-st .qi{background:var(--soft)}
.qb{position:absolute;top:8px;right:8px;background:#d92d2d;color:#fff;border:1.5px solid var(--edge);border-radius:99px;font:600 12px/19px var(--hand);min-width:22px;height:22px;text-align:center;padding:0 6px;font-style:normal;animation:needpulse2 1.4s infinite}
.qb.b2{background:var(--acc);animation:none}
@keyframes needpulse2{50%{transform:scale(1.15)}}

.chart{position:relative;height:150px;margin:14px 6px 0}
.chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chart .ln{stroke:var(--acc);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round}
.chart .pt{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--card);border:2.5px solid var(--acc)}
.chart .pt.today{width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--hl);border-color:var(--edge)}
.chart .pt em{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font:normal 11.5px var(--body);color:var(--mut);white-space:nowrap}
.cx{position:relative;height:20px;margin:6px 6px 0}.cx small{position:absolute;transform:translateX(-50%);color:var(--mut);font-size:11.5px;white-space:nowrap}.cx small.today{color:var(--ink);font-weight:600}
.stp{margin-top:14px}
.k b{font-variant-numeric:tabular-nums}
.topp{margin-bottom:14px}.topp h3{margin:0 0 8px}
.tp{display:flex;align-items:center;gap:10px;padding:5px 0}
.rk{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--hl);color:#17203a;font:600 13px var(--hand);border:1.5px solid var(--edge)}
.tn{flex:1;min-width:0}.tn b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb{height:7px;border-radius:9px;background:var(--soft);margin-top:3px;overflow:hidden}.tb i{display:block;height:100%;border-radius:9px;background:var(--acc)}
.tq{flex:none;color:var(--mut);font-size:13px}

/* ফ্রড চেক শিট */
#fsheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.fs-bg{position:absolute;inset:0;background:rgba(10,16,30,.55);opacity:0;transition:opacity .2s}
.fs-box{position:relative;width:min(560px,100%);max-height:92dvh;overflow-y:auto;background:var(--card);border:2px solid var(--edge);border-bottom:0;border-radius:22px 22px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
#fsheet.open .fs-bg{opacity:1}#fsheet.open .fs-box{transform:none}
@media(min-width:700px){#fsheet{align-items:center}.fs-box{border-bottom:2px solid var(--edge);border-radius:22px;box-shadow:var(--sh);max-height:86dvh}}
.fs-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.fs-h b{font:600 20px var(--hand);display:block}.fs-h small{color:var(--mut)}
.fs-x{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--edge);background:var(--soft);cursor:pointer}
.fs-in{display:flex;gap:8px}.fs-in input{flex:1;min-width:0;font-size:18px;letter-spacing:.5px}
.fs-hint{padding:18px 6px;color:var(--mut);text-align:center}
.fs-res{display:flex;gap:16px;align-items:center;margin-top:14px;padding:14px;border:2px solid var(--edge);border-radius:var(--w1);background:var(--soft)}
.fs-res.ok{background:var(--oksoft)}.fs-res.warn{background:var(--warnsoft)}.fs-res.bad{background:var(--badsoft)}.fs-res.info{background:var(--accsoft)}
.ring2{flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(120,130,140,.25) 0);position:relative}
.ring2::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--card)}
.ring2>*{position:relative}.ring2 b{font:600 22px/1.1 var(--hand)}.ring2 small{font-size:10.5px;color:var(--mut)}
.fs-v{min-width:0}.fs-v>b{font:600 17px var(--hand);display:block}.fs-v>span{display:block;font-size:13.5px;margin:2px 0 8px}
.fs-n{display:flex;gap:8px;flex-wrap:wrap}.fs-n i{font-style:normal;font-size:11.5px;color:var(--mut);background:var(--card);border:1.5px solid var(--line);border-radius:var(--w3);padding:2px 9px;text-align:center}
.fs-n i b{display:block;font:600 17px var(--hand);color:var(--ink)}.fs-n i.g b{color:var(--ok)}.fs-n i.r b{color:var(--bad)}
.fs-src{display:block;margin-top:8px}
#fsheet h4{margin:14px 0 6px;font-size:15px}
.fs-o{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1.5px dashed var(--line);font-size:13.5px}.fs-o span{flex:1;color:var(--mut)}.fs-o em{font-style:normal;font-size:12px;background:var(--soft);border-radius:99px;padding:1px 9px}
.fs-msg{background:var(--hlsoft);border:1.5px dashed var(--edge);border-radius:var(--w3);padding:10px 12px;margin-bottom:8px;white-space:pre-wrap}
.hk{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1 1 280px;max-width:460px}
.hk>div{min-width:0}.hk>div.big{grid-column:1/-1;min-width:0}