/* লক্ষ্মীপুর সেবা — সাইটের মূল স্টাইল (layouts/app থেকে আলাদা; রং আসে :root ভেরিয়েবল থেকে, তাই ব্রাউজার ক্যাশ করতে পারে) */
*{box-sizing:border-box;font-family:'SolaimanLipi','Hind Siliguri',sans-serif}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);min-height:100vh}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#EDF3EF}::-webkit-scrollbar-thumb{background:#B7CCBE;border-radius:99px}
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--border);box-shadow:0 1px 3px rgba(15,61,36,.05),0 4px 16px rgba(15,61,36,.04)}
.card-h{transition:all .22s;cursor:pointer}.card-h:hover{box-shadow:0 6px 18px rgba(15,61,36,.12);transform:translateY(-2px);border-color:color-mix(in srgb,var(--blue) 31%,transparent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;border-radius:var(--rs);padding:9px 20px;font-size:13.5px;text-decoration:none;transition:all .18s;cursor:pointer;border:none;outline:none;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;top:0;left:-80%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn:hover::after{left:135%}
.btn-blue{background:linear-gradient(135deg,#16A34A,var(--blue));color:#fff;box-shadow:0 2px 10px color-mix(in srgb,var(--blue) 21%,transparent)}.btn-blue:hover{opacity:.93;transform:translateY(-1px);box-shadow:0 5px 16px color-mix(in srgb,var(--blue) 25%,transparent)}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{opacity:.9;transform:translateY(-1px)}
.btn-out{background:transparent;border:1.5px solid var(--blue);color:var(--blue)}.btn-out:hover{background:color-mix(in srgb,var(--blue) 7%,transparent)}
.btn-gray{background:#EFF4F0;color:var(--txt2);border:1px solid var(--border)}.btn-gray:hover{background:#E2ECE6}
.btn-wh{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(15,61,36,.12)}.btn-wh:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(15,61,36,.18)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.35)}.btn-ghost:hover{background:rgba(255,255,255,.24)}
.btn-sm{padding:6px 14px;font-size:12.5px;border-radius:8px}
.btn-xs{padding:4px 10px;font-size:11.5px;border-radius:7px}
.btn-lg{padding:12px 28px;font-size:15px;border-radius:12px}
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2.5px 9px;border-radius:99px}
.b-blue{background:color-mix(in srgb,var(--blue) 9%,transparent);color:var(--blue)}
.b-red{background:color-mix(in srgb,var(--red) 8%,transparent);color:var(--red)}
.b-green{background:#dcfce7;color:#15803D}
.b-amber{background:#fef3c7;color:#d97706}
.b-slate{background:#EFF4F0;color:#47564D}
.b-purple{background:#ede9fe;color:#7c3aed}
.b-break{background:var(--red);color:#fff}
.b-mono{background:#E7F3EA;color:#14532D}
.nav-a{display:flex;align-items:center;gap:5px;padding:7px 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.85);text-decoration:none;transition:all .15s}
.nav-a:hover,.nav-a.on{background:rgba(255,255,255,.16);color:#fff;font-weight:700}
.nc{background:var(--card);border-radius:var(--r);border:1px solid var(--border);overflow:hidden;transition:all .22s;text-decoration:none;display:block;color:inherit}
.nc:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(15,61,36,.25),0 6px 18px -8px rgba(15,61,36,.12);border-color:var(--acc)}
.nc img{transition:transform .45s}.nc:hover img{transform:scale(1.05)}
.sh{font-size:18px;font-weight:700;color:var(--txt);display:flex;align-items:center;gap:10px;font-family:'SolaimanLipi','Hind Siliguri',sans-serif}
.sh::before{content:'';width:4px;height:21px;border-radius:99px;background:linear-gradient(180deg,#22C55E,var(--blue));flex-shrink:0}
.sh::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.qa{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:var(--r);background:var(--card);border:1px solid var(--border);transition:all .2s;text-decoration:none;color:inherit}
.qa:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--blue) 31%,transparent);box-shadow:0 6px 20px rgba(15,61,36,.1)}
.qa-i{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px}
.tk-bar{position:relative;z-index:45;height:42px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid #E5EDE8;box-shadow:0 6px 18px -10px rgba(11,46,27,.25);transition:transform .28s ease,height .2s}
.tk-bar.tk-away{transform:translateY(-100%);pointer-events:none}
.tk-bar.tk-hidden{height:0;border:0;box-shadow:none;background:transparent}
.tk-inner{max-width:80rem;margin:0 auto;display:flex;align-items:center;gap:10px;height:42px;padding:0 12px}
.tk-label{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 12px;border-radius:99px;background:#DC2626;color:#fff;font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(220,38,38,.3)}
.tk-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:tkPulse 1.6s infinite}
@keyframes tkPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}70%{box-shadow:0 0 0 6px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.tk-track{flex:1;min-width:0;overflow:hidden;height:100%;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.tk-run{display:flex;white-space:nowrap;animation:tkr 60s linear infinite;will-change:transform}
.tk-run.is-paused{animation-play-state:paused}
.tk-item{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;margin-right:10px;border-radius:99px;font-size:13.5px;color:#1E293B;text-decoration:none;transition:background .15s,color .15s}
.tk-item + .tk-item{position:relative}
.tk-item + .tk-item::before{content:'';position:absolute;left:-7px;top:50%;width:4px;height:4px;border-radius:50%;background:#CBD5E1;transform:translateY(-50%)}
.tk-link:hover,.tk-link:focus-visible{background:#ECFDF3;color:#15803D;outline:none}
.tk-link:hover .tk-title{text-decoration:underline;text-underline-offset:3px}
.tk-ic{font-size:11px;color:#16A34A}
.tk-brk{font-size:10.5px;font-weight:700;background:#FEE2E2;color:#B91C1C;padding:2px 8px;border-radius:99px}
.tk-time{font-size:11px;color:#94A3B8}
.tk-ctrl{flex-shrink:0;display:flex;align-items:center;gap:2px;padding:3px;border-radius:99px;background:#F1F5F2}
.tk-btn{height:28px;min-width:28px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:99px;color:#475569;font-size:11.5px;font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.tk-btn:hover{background:#fff;color:#15803D;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.tk-open{position:absolute;right:14px;top:0;display:inline-flex;align-items:center;gap:7px;padding:5px 12px 6px;font-size:12px;font-weight:600;color:#fff;background:#DC2626;border-radius:0 0 10px 10px;box-shadow:0 4px 12px rgba(220,38,38,.3)}
.dark .tk-bar{background:rgba(15,23,42,.92);border-color:#1E293B}
.dark .tk-item{color:#E2E8F0}.dark .tk-link:hover{background:rgba(34,197,94,.12);color:#86EFAC}
.dark .tk-ctrl{background:#1E293B}.dark .tk-btn{color:#94A3B8}.dark .tk-btn:hover{background:#334155;color:#fff}
.dark .tk-brk{background:rgba(220,38,38,.2);color:#FCA5A5}
@media (max-width:640px){.tk-inner{gap:6px;padding:0 8px}.tk-label{padding:0 9px;font-size:11px}.tk-item{font-size:12.5px;padding:5px 8px}.tk-time{display:none}.tk-ctrl{padding:2px}.tk-btn{min-width:32px;height:32px;padding:0 8px}}
@media (prefers-reduced-motion:reduce){.tk-run{animation-duration:200s!important}}
.ticker-wrap{display:flex;animation:tkr 45s linear infinite;white-space:nowrap}
.ticker-wrap:hover{animation-play-state:paused}
@keyframes tkr{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.bg-g{text-align:center;padding:10px 4px;border-radius:10px;background:color-mix(in srgb,var(--red) 7%,transparent);border:1.5px solid color-mix(in srgb,var(--red) 19%,transparent);transition:all .18s;text-decoration:none;display:block}
.bg-g:hover{background:var(--red);border-color:var(--red);transform:scale(1.05)}
.bg-g:hover .bgl,.bg-g:hover .bgc{color:#fff}
.bgl{font-size:14px;font-weight:700;color:var(--red);display:block}
.bgc{font-size:10px;color:var(--red);font-weight:600;display:block;margin-top:1px;opacity:.7}
.inp{width:100%;border:1.5px solid var(--border);border-radius:var(--rs);padding:9px 14px;font-size:14px;background:var(--card);color:var(--txt);outline:none;transition:border-color .18s}
.inp:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 9%,transparent)}
.inp.err{border-color:var(--red)}
.inp.err:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 9%,transparent)}
.f-err{color:var(--red);font-size:12px;margin-top:5px;font-weight:500;display:flex;align-items:center;gap:5px}
.navbg{background:linear-gradient(120deg,#0B2E1B 0%,var(--grn-d) 55%,#14532D 100%);border-color:rgba(255,255,255,.08)}
.navtxt{color:var(--navtxt)}
/* ── Dark mode ─────────────────────────────── */
.dark{--border:#1E3A2B;--bg:#0A1410;--card:#101F17;--txt:#E4F0E8;--txt2:#C3D8CB;--muted:#8CA695;--green-l:#052E16;--amber-l:#231A05;--gold-d:#D9A84E;--acc:#4ADE80;--acc-2:#86EFAC;--acc-d:#22C55E}
.dark .navbg{background:linear-gradient(120deg,#081F13 0%,#0C2A1B 55%,#0F3521 100%);border-color:#1E3A2B}
.dark .navtxt{color:#E4F0E8}
.dark .nav-a:hover,.dark .nav-a.on{background:rgba(74,222,128,.18);color:#BBF7D0}
.dark ::-webkit-scrollbar-track{background:#0F2018}.dark ::-webkit-scrollbar-thumb{background:#2A4436}
.dark .btn-gray{background:#1A2E23;color:var(--txt2);border-color:var(--border)}.dark .btn-gray:hover{background:#24402F}
.dark .btn-wh{background:var(--card);color:#86EFAC}
.dark .b-slate{background:#1A2E23;color:#A7C4B2}
.dark .b-green{background:#052e16;color:#4ade80}
.dark .b-amber{background:#451a03;color:#fbbf24}
.dark .b-purple{background:#2e1065;color:#c4b5fd}
.dark .b-red{background:#7f1d1d;color:#fca5a5}
.dark .b-blue{background:rgba(74,222,128,.15);color:#86EFAC}
.dark .b-mono{background:#14301F;color:#A7DFBB}
.dark .alert-ok{background:#052e16;border-color:#14532d;color:#86efac}
.dark .alert-err{background:#450a0a;border-color:#7f1d1d;color:#fca5a5}
.dark .tbl th{color:#8CA695;background:#0A1410}
/* ── Accessibility ────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.skip-link{position:fixed;left:12px;top:-60px;z-index:100;background:var(--blue);color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;transition:top .2s;text-decoration:none}
.skip-link:focus{top:12px}
/* ── Image shimmer ───────────────────────── */
@keyframes shim{to{background-position:-200% 0}}
img.imgsh{background:linear-gradient(100deg,#E2ECE6 40%,#EDF3EF 50%,#E2ECE6 60%);background-size:200% 100%;animation:shim 1.4s infinite;color:transparent}
.dark img.imgsh{background:linear-gradient(100deg,#1A2E23 40%,#24402F 50%,#1A2E23 60%);background-size:200% 100%}
/* ── Loading bar ────────────────────────── */
#ldr{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue),#F2B233);z-index:9999;transition:width .3s,opacity .3s;opacity:0;pointer-events:none}
.alert-ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d;padding:12px 16px;border-radius:8px;font-size:13.5px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.alert-err{background:color-mix(in srgb,var(--red) 7%,transparent);border:1px solid color-mix(in srgb,var(--red) 19%,transparent);color:var(--red);padding:12px 16px;border-radius:8px;font-size:13.5px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
@keyframes pls{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 38%,transparent)}50%{box-shadow:0 0 0 12px transparent}}
.pulse-red{animation:pls 2.5s ease-in-out infinite}

/* ═════════ লক্ষ্মীপুর সেবা — স্মার্ট জেলা ডিজাইন সিস্টেম ═════════ */
.font-display{font-family:'SolaimanLipi','Hind Siliguri',sans-serif;font-weight:700}
.text-ink{color:var(--acc)}.text-mist{color:#9CB8A8}
.text-mono-grad{background:linear-gradient(115deg,#FADC7A 5%,#F2B233 45%,#B58420 70%,#FADC7A 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-ink-grad{background:linear-gradient(115deg,#0B2E1B 5%,#16A34A 48%,#14532D 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dark .text-ink-grad{background:linear-gradient(115deg,#BBF7D0,#4ADE80 50%,#BBF7D0)}
.noir-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px)}
.scroll-mt-24{scroll-margin-top:6rem}
.btn-solid{background:linear-gradient(135deg,#16A34A,var(--blue));color:#fff;font-weight:700;box-shadow:0 4px 14px -6px rgba(21,128,61,.55);border:none}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(21,128,61,.65)}
.dark .btn-solid{background:linear-gradient(135deg,#22C55E,#15803D);color:#fff}
.dark .btn-solid:hover{box-shadow:0 10px 26px -8px rgba(74,222,128,.4)}
.card-pro{background:var(--card);border-radius:20px;border:1px solid var(--border);position:relative;box-shadow:0 1px 3px rgba(15,61,36,.05),0 12px 34px -16px rgba(15,61,36,.14);overflow:hidden}
.card-pro::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--blue) 35%,#F2B233 65%,transparent);z-index:1}
.chip{display:inline-flex;align-items:center;padding:6px 14px;border-radius:99px;font-size:12.5px;font-weight:600;background:var(--card);border:1.5px solid var(--border);color:var(--txt2);text-decoration:none;transition:all .18s}
.chip:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
/* অনুভূমিক ক্যাটাগরি স্ক্রোলে স্ক্রলবার লুকানো — মোবাইলে পরিষ্কার দেখায় */
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}
.chip-on{background:linear-gradient(135deg,#16A34A,var(--blue));color:#fff;border-color:transparent;box-shadow:0 3px 10px -3px rgba(21,128,61,.5)}
.dark .chip-on{background:linear-gradient(135deg,#22C55E,#15803D);color:#fff}
.chip-on:hover{color:#fff}.dark .chip-on:hover{color:#fff}
/* ── Hero (সবুজ জেলা-পোর্টাল) ── */
.mag-hero{background:linear-gradient(135deg,#0B2E1B 0%,#14532D 52%,#1F6B3B 100%);border-bottom:1px solid rgba(255,255,255,.06)}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(12px,-22px)}}
.mag-hero-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none}
.mag-hero-orb.o1{width:340px;height:340px;background:rgba(74,222,128,.4);top:-120px;right:-60px;animation:float 9s ease-in-out infinite}
.mag-hero-orb.o2{width:260px;height:260px;background:rgba(242,178,51,.22);bottom:-120px;left:-40px;animation:float 12s ease-in-out infinite reverse}
.mag-hero-grain{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:22px 22px;opacity:.4;pointer-events:none}
.animate-float{animation:float 4.5s ease-in-out infinite;display:inline-block}
/* ── ম্যাগাজিন কভার ── */
.mag-cover-wrap{position:relative;display:block;text-decoration:none;color:inherit}
.mag-cover{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;position:relative;box-shadow:0 10px 30px -12px rgba(11,46,27,.45),0 2px 6px rgba(11,46,27,.15);transition:transform .45s cubic-bezier(.2,.7,.3,1.15),box-shadow .45s}
.mag-item:hover .mag-cover,.mag-cover-wrap:hover>.mag-cover{transform:translateY(-8px) rotate(-1.4deg) scale(1.02);box-shadow:0 26px 46px -14px rgba(11,46,27,.5)}
.mag-cover-gen{background:linear-gradient(168deg,var(--cov,#14532D) 0%,color-mix(in srgb,var(--cov,#14532D) 55%,#000) 72%,#04180D 100%)}
@supports not (background:color-mix(in srgb,red,blue)){.mag-cover-gen{background:linear-gradient(168deg,var(--cov,#14532D),#04180D)}}
.mc-gen-inner{position:absolute;inset:0;display:flex;flex-direction:column;padding:16px 14px;color:#fff;border-radius:14px}
.mc-masthead{font-family:'SolaimanLipi','Hind Siliguri',sans-serif;font-weight:700;text-align:center;font-size:11px;letter-spacing:.1em;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:8px;color:#F4F7F5}
.mc-issue{font-family:'SolaimanLipi','Hind Siliguri',sans-serif;font-size:30px;font-weight:700;text-align:center;margin-top:auto;margin-bottom:auto;color:rgba(255,255,255,.92);text-shadow:0 2px 14px rgba(0,0,0,.4);line-height:1.1}
.mc-title{font-size:13px;font-weight:700;line-height:1.45;text-align:center;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.mc-period{text-align:center;font-size:10px;letter-spacing:.1em;color:#D6EEDD;margin-top:8px;border-top:1px solid rgba(255,255,255,.35);padding-top:7px}
.mag-star{position:absolute;top:10px;right:10px;background:#F2B233;color:#1B2A20;font-size:12px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.4);z-index:2}
.mag-pdf{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:#fff;font-size:9px;font-weight:700;letter-spacing:.08em;padding:3px 8px;border-radius:6px;z-index:2}
.magazine-reader{width:100%;height:75vh;min-height:480px;border:0;display:block;background:var(--card)}
@media(max-width:640px){.magazine-reader{height:56vh;min-height:380px}}
/* ── Scroll reveal (variants: up|left|right|zoom|blur) ── */
html.rv [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.65,.25,1),transform .75s cubic-bezier(.2,.65,.25,1),filter .75s cubic-bezier(.2,.65,.25,1)}
html.rv [data-reveal="left"]{transform:translateX(-32px)}
html.rv [data-reveal="right"]{transform:translateX(32px)}
html.rv [data-reveal="zoom"]{transform:scale(.9)}
html.rv [data-reveal="blur"]{transform:none;filter:blur(12px)}
html.rv [data-reveal].revealed{opacity:1;transform:none;filter:none}
/* ── Page enter ── */
/* পেজ-ইন: শুধু transform (opacity:0 থেকে শুরু করলে LCP দেরি/হারায়); ক্রস-পেজ ফেড এখন View Transitions-এ */
@keyframes pageIn{from{transform:translateY(10px)}to{transform:none}}
main#main-content{animation:pageIn .5s cubic-bezier(.2,.65,.25,1) backwards}
@media (prefers-reduced-motion:reduce){main#main-content{animation:none}}
/* ── Nav animated underline ── */
.nav-a{position:relative}
.nav-a::after{content:'';position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:#F2B233;transform:scaleX(0);transform-origin:left center;transition:transform .32s cubic-bezier(.2,.65,.25,1)}
.nav-a:hover::after,.nav-a.on::after{transform:scaleX(1)}
@media(max-width:768px){.nav-a::after{display:none}}
/* ── পতাকা স্ট্রিপ (লাল-সবুজ — বাংলাদেশ) ── */
.flag-strip{height:3px;background:linear-gradient(90deg,var(--red) 0%,var(--red) 18%,#16A34A 18%,#14532D 100%)}
/* ── Snap carousel ── */
.snap-row{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 12px;-webkit-overflow-scrolling:touch}
.snap-row>*{scroll-snap-align:start;flex:0 0 190px}
.snap-row::-webkit-scrollbar{height:6px}
.snap-row::-webkit-scrollbar-thumb{background:#9CC7AC;border-radius:99px}
.snap-row::-webkit-scrollbar-track{background:var(--border);border-radius:99px}
/* ── Back to top ── */
#top-btn{position:fixed;right:20px;bottom:150px;z-index:40;width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--border);box-shadow:0 6px 18px rgba(15,61,36,.18);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:all .28s;color:var(--txt2)}
#top-btn.show{opacity:1;visibility:visible;transform:none}
#top-btn:hover{color:var(--blue);border-color:var(--blue);transform:translateY(-3px)}
#top-btn svg{position:absolute;inset:0;transform:rotate(-90deg)}
#top-btn .ring-bgc{fill:none;stroke:var(--border);stroke-width:2.5}
#top-btn .ring-fgc{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;transition:stroke-dashoffset .15s linear}
@media(min-width:768px){#top-btn{bottom:96px;right:24px}}
/* ── Navbar scroll state ── */
.nav-scrolled{box-shadow:0 10px 30px -12px rgba(11,46,27,.45)!important;backdrop-filter:saturate(1.4) blur(12px)}
/* ── Misc ── */
.hp-field{position:absolute!important;left:-9999px!important;opacity:0}
.count-num{font-variant-numeric:tabular-nums}
.stat-pop{transition:transform .25s}.stat-pop:hover{transform:translateY(-4px) scale(1.03)}
/* ── জনপ্রিয় সেবা কার্ড (concept grid) ── */
.svc-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:13px 14px;text-decoration:none;color:inherit;transition:all .2s;box-shadow:0 1px 3px rgba(15,61,36,.05)}
.svc-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--blue) 33%,transparent);box-shadow:0 10px 24px -10px rgba(15,61,36,.22)}
.svc-card .svc-i{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.svc-card .svc-t{font-size:13.5px;font-weight:700;line-height:1.3}
.svc-card .svc-s{font-size:11px;color:var(--muted);margin-top:1px}
.svc-card .svc-ar{margin-left:auto;color:var(--muted);font-size:12px;transition:transform .2s,color .2s}
.svc-card:hover .svc-ar{transform:translateX(4px);color:var(--blue)}
/* মোবাইলে ২ কলামের কমপ্যাক্ট টাইল — আগে ৯টি লম্বা কার্ড এক কলামে প্রায় পুরো পর্দা নিত */
@media (max-width:639px){
  .svc-card{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .svc-card .svc-i{width:40px;height:40px;font-size:17px}
  .svc-card .svc-t{font-size:13px}
  .svc-card .svc-s{white-space:normal;overflow:visible;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
  .svc-card .svc-ar{display:none}
}
/* ── সকল বিভাগ গোল টাইল ── */
.cat-tile{flex:0 0 84px;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:inherit}
.cat-tile .cat-i{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;border:1.5px solid var(--border);background:var(--card);transition:all .2s;box-shadow:0 1px 3px rgba(15,61,36,.06)}
.cat-tile:hover .cat-i{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 10px 22px -8px rgba(15,61,36,.25)}
.cat-tile .cat-l{font-size:11.5px;font-weight:600;color:var(--txt2);text-align:center;line-height:1.25}
/* ── Reduced motion (a11y) ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}
@media(max-width:768px){.hide-m{display:none!important}.sh{font-size:16px}}

/* ═══ v6 — অতিরিক্ত অ্যানিমেশন ও পারফরম্যান্স ═══ */
[x-cloak]{display:none!important}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.86)}70%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes zoomIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes pulseSoft{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes galPop{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}
/* body-তে transform দেওয়া যাবে না — তাহলে body সব position:fixed এর
   containing block হয়ে যায় ও বটম নেভ/কার্ট বার স্টিকি থাকে না।
   তাই পেজ ফেডে শুধু opacity, translate নয়। */
/* Tailwind-এর arbitrary z-index ক্লাসগুলো (z-[70] ইত্যাদি) কম্পাইল করা
   app.css-এ নেই — npm বিল্ড ছাড়া সেগুলো তৈরি হয়নি। ফলে "আরও" শিট ও টোস্ট
   z-index ছাড়া থাকত এবং পেজের উপাদানের নিচে চাপা পড়ত। এখানে হাতে দেওয়া হলো। */
/* ── ভাসমান উপাদানের স্তর ও অবস্থান (এক উৎস) ─────────────────
   কার্ট বার, AI বোতাম ও ব্যাক-টু-টপ আগে একই জায়গায় জমে যেত।
   এখন নিচ থেকে উপরে সাজানো কলাম — কার্ট খালি থাকলে বাকিগুলো নেমে আসে। */
:root{--fab-base:20px;--fab-gap:60px;--cart-row:0px}
@media (max-width:767px){:root{--fab-base:calc(70px + env(safe-area-inset-bottom))}}
body[data-cart="filled"]{--cart-row:60px}
/* কার্ট বার দেখালে কনটেন্টের নিচে বাড়তি জায়গা, নইলে ফুটার ঢাকা পড়ে */
@media (max-width:767px){body[data-cart="filled"]{padding-bottom:124px}}

#cartBar{bottom:var(--fab-base)!important;z-index:40}
.fab-ai{bottom:calc(var(--fab-base) + var(--cart-row))!important;right:16px;z-index:40}
#top-btn{bottom:calc(var(--fab-base) + var(--cart-row) + var(--fab-gap))!important;right:16px;z-index:40}
@media (min-width:768px){.fab-ai,#top-btn{right:24px}}


.page-fade{}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}
.gal-anim{animation:galPop .5s ease both}
.gal-zoomin{animation:zoomIn .3s ease both}
.notif-pulse{animation:pulseSoft 2.2s ease-in-out infinite}
.btn:active{transform:scale(.965)}
.card{transition:box-shadow .25s,transform .25s,border-color .25s}
.card:hover{box-shadow:0 8px 24px -10px rgba(15,61,36,.16)}
.cv-auto{content-visibility:auto;contain-intrinsic-size:auto 320px}

/* মেগা মেনু স্ট্যাগার */
.mega-item{opacity:0;animation:fadeUp .4s ease forwards}
.mega-item:nth-child(1){animation-delay:.02s}.mega-item:nth-child(2){animation-delay:.06s}
.mega-item:nth-child(3){animation-delay:.1s}.mega-item:nth-child(4){animation-delay:.14s}
.mega-item:nth-child(5){animation-delay:.18s}.mega-item:nth-child(6){animation-delay:.22s}
.mega-col-title{opacity:0;animation:fadeUp .35s ease forwards}

/* মোবাইল শিট */
.sheet-panel{animation:sheetUp .38s cubic-bezier(.2,.8,.25,1) both}
.sheet-item{opacity:0;animation:popIn .4s ease forwards}
.sheet-grid .sheet-item:nth-child(3n+1){animation-delay:.04s}
.sheet-grid .sheet-item:nth-child(3n+2){animation-delay:.09s}
.sheet-grid .sheet-item:nth-child(3n){animation-delay:.14s}
.sheet-backdrop{animation:fadeUp .25s ease both}

/* বটম-নেভ অ্যাক্টিভ বাউন্স */
.bn-active{animation:popIn .45s ease both}
/* ইউটিউব ফ্যাসাদ প্লে-বাটন নিঃশব্দ পালস */
.yt-facade .fa-play{animation:pulseSoft 2.4s ease-in-out infinite}

/* ═══ হোয়াইট থিম ═══ */
:root{--bg:#F7F9F8}
.navbg{background:#fff;border-color:var(--border)}
.nav-a{color:#33413A}
.nav-a:hover,.nav-a.on{background:#F0FDF4;color:var(--blue)}
#mainNav{box-shadow:0 1px 10px rgba(15,61,36,.07)!important}
#mainNav .hover\:bg-white\/10:hover{background:#F0FDF4}
#mainNav .text-white\/85{color:#33413A}
#mainNav .border-white\/10{border-color:var(--border)}
#mainNav [style*="rgba(0,0,0"]{background:#F7F9F8!important}
.nav-scrolled{box-shadow:0 6px 20px -10px rgba(15,61,36,.25)!important}
.btn-ghost{background:#fff;color:var(--blue);border:1.5px solid #BBF7D0}
.btn-ghost:hover{background:#F0FDF4;border-color:var(--blue)}
.mag-hero{background:linear-gradient(135deg,#F0FDF4 0%,#FFFFFF 55%,#ECFDF5 100%);border-bottom:1px solid var(--border)}
.mag-hero .text-white{color:#14532D!important}
.mag-hero [class*="text-white/"],.mag-hero [style*="color:#D6EEDD"],.mag-hero [style*="color:#9CB8A8"],.mag-hero [style*="color:#BBE3C8"]{color:var(--muted)!important}
/* হিরোর হালকা-সবুজ সাবটেক্সট (text-green-50/80 ইত্যাদি) — হোয়াইট থিমে
   এই ক্লাসগুলো কভার করা ছিল না, ফলে প্রায়-সাদা টেক্সট প্রায়-সাদা
   ব্যাকগ্রাউন্ডে মিশে অদৃশ্য হয়ে যেত (শপ, ডাক্তার, বিজ্ঞাপন, ম্যাগাজিন পাতায়)। */
.mag-hero [class*="text-green-50/"],.mag-hero [class*="text-green-100/"],.mag-hero [class*="text-green-200"],.mag-hero [class*="text-emerald-50/"],.mag-hero [class*="text-teal-50/"]{color:var(--muted)!important}
/* একই কারণে হিরোর ভেতরের ধূসর লেবেল (মোট জমা/ভিউ ইত্যাদি) ও রঙিন
   পরিসংখ্যান সংখ্যা (emerald-300, sky-300...) — যেগুলো গাঢ় ব্যাকগ্রাউন্ডের
   জন্য বানানো, হোয়াইট থিমে একই কারণে অদৃশ্য হয়ে যেত (magazine_my পাতা)। */
.mag-hero .text-slate-300,.mag-hero .text-slate-400{color:var(--muted)!important}
.mag-hero .text-emerald-300,.mag-hero .text-emerald-200,.mag-hero .text-green-300{color:var(--blue)!important}
.mag-hero .text-sky-300,.mag-hero .text-sky-200,.mag-hero .text-blue-300{color:#0369A1!important}
.mag-hero [style*="color:rgba(214,238,221"],.mag-hero [style*="color:rgba(255,255,255"]{color:#47564D!important}
.mag-hero [style*="color:#F2B233"]{color:#B45309!important}
.mag-hero [style*="background:rgba(255,255,255,.08)"]{background:#fff!important;border-color:var(--border)!important;box-shadow:0 10px 30px -12px rgba(15,61,36,.2)!important;backdrop-filter:none!important}
.mag-hero [style*="background:rgba(255,255,255,.09)"],.mag-hero [style*="background:rgba(255,255,255,.1"]{background:#F0FDF4!important}
.mag-hero .text-yellow-200,.mag-hero .text-yellow-300,.mag-hero .text-amber-200,.mag-hero .text-amber-300,.mag-hero .text-amber-400{color:#B45309!important}
.mag-hero .text-green-100,.mag-hero .text-green-200,.mag-hero .text-green-300,.mag-hero .text-slate-200,.mag-hero .text-slate-300{color:var(--muted)!important}
.mag-hero .text-mono-grad{background:linear-gradient(115deg,#B58420,#D97706 50%,#B58420);-webkit-background-clip:text;background-clip:text;color:transparent}
.mag-hero .noir-chip{color:#14532D;background:#fff;border-color:#BBF7D0}
.mag-hero-orb{opacity:.25}
.mag-hero-grain{background-image:radial-gradient(rgba(21,128,61,.12) 1px,transparent 1px)}
.mag-hero .card,.mag-hero [class*="bg-white/"]{background:#fff!important;border-color:var(--border)!important;box-shadow:0 4px 18px -8px rgba(15,61,36,.15)}
.site-footer{border-top:1px solid var(--border)}
.site-footer .text-white{color:var(--txt)!important}
.site-footer .text-gray-400,.site-footer .text-gray-500,.site-footer .text-gray-600,.site-footer .text-gray-700{color:var(--muted)!important}
.site-footer a:hover{color:var(--blue)!important}
.site-footer .border-white\/10{border-color:var(--border)}
.site-footer .text-white\/10{color:var(--border)}
.site-footer .text-yellow-300\/90{color:#B45309}
.site-footer .text-green-300{color:var(--blue)}
.site-footer .inp{background:#fff!important;border-color:var(--border)!important;color:var(--txt)!important}
/* অর্থবহ রঙিন আইকন; রঙিন/সাদা-লেখার পটভূমিতে লেখার রং নেয় */
.ico{width:1.2em;text-align:center;display:inline-block}
.ico-ph .ico{opacity:.55}
.btn .ico,.text-white .ico,.bg-gradient-to-r .ico,.bg-gradient-to-br .ico,[style*="linear-gradient"] .ico,.badge.b-blue .ico,.nav-item .ico,.sidebar .ico{color:inherit!important}
.dark .ico[style*="#475569"]{color:#94A3B8!important}
/* চিপের আইকন-লেখা-সংখ্যা গায়ে গায়ে লেগে যেত (inline-flex-এ ফাঁকা স্পেস গণ্য হয় না) */
.chip{gap:.35rem}
/* চিপ/কার্ডের অনুভূমিক সারিতে ধূসর স্ক্রলবার নয় */
.flex.overflow-x-auto{scrollbar-width:none}.flex.overflow-x-auto::-webkit-scrollbar{display:none}
/* হোম হেডারের দ্রুত-প্রবেশ বোতাম */
.hero-q{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:99px;background:rgba(255,255,255,.85);border:1px solid #DDE8E0;font-size:12.5px;font-weight:700;color:#1E3A2B;backdrop-filter:blur(6px);transition:transform .15s,box-shadow .15s}
.hero-q span{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px}
.hero-q:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(15,61,36,.5)}
.hero-rot{display:inline-block;color:#15803D;border-bottom:2px dashed #86EFAC}
/* হোম হেডারের ৬-ঘরের দ্রুত প্রবেশ */
.hq-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:16px;background:rgba(255,255,255,.88);border:1px solid #E3EEE6;box-shadow:0 4px 14px -10px rgba(15,61,36,.4);transition:transform .15s,box-shadow .15s}
.hq-tile:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(15,61,36,.5)}
.hq-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px}
.hq-l{font-size:12.5px;font-weight:700;color:#1E3A2B;line-height:1.1;text-align:center}
/* অনুভূমিক সোয়াইপ সারি — স্ক্রলবার লুকানো */
.hscroll{scrollbar-width:none;-webkit-overflow-scrolling:touch}.hscroll::-webkit-scrollbar{display:none}
/* ── টাচ-বান্ধব: ছোট লিংক/বোতামের চাপার জায়গা বড় (লেআউট না বদলে) ── */
.tk-btn{position:relative}.tk-btn::after{content:'';position:absolute;inset:-5px -2px}
@media (pointer:coarse),(max-width:640px){
  .flex > a.hover\:underline,.flex > button.hover\:underline{position:relative}
  .flex > a.hover\:underline::after,.flex > button.hover\:underline::after{content:'';position:absolute;inset:-10px -6px}
  .site-footer .grid > a:not(.hidden){display:block;padding:7px 0}
  .site-footer .flex a,.site-footer summary{min-height:34px;display:inline-flex;align-items:center}
  .chip{min-height:34px}
  input.inp,select.inp,textarea.inp{font-size:16px} /* iOS-এ ফোকাসে অটো-জুম বন্ধ */
}
/* সেবা-গ্রিড (সংখ্যাসহ টাইল) */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(min-width:640px){.svc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}}
@media(min-width:1024px){.svc-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.svc-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;text-align:center;padding:12px 6px 10px;min-height:96px;border-radius:16px;background:var(--card,#fff);border:1px solid var(--border);transition:transform .15s,box-shadow .15s,border-color .15s}
.svc-tile:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(15,61,36,.35);border-color:#BBE3C8}
.svc-tile-i{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px}
.svc-tile-t{font-size:12.5px;font-weight:700;line-height:1.25;color:var(--txt)}
.svc-tile-n{font-size:12px;font-weight:700;color:#15803D;background:#F0FDF4;border-radius:99px;padding:1px 8px;line-height:1.5}
.dark .svc-tile-n{background:#052E16;color:#86EFAC}
.svc-tile-n.is-zero{background:#F1F5F9;color:#64748B}.dark .svc-tile-n.is-zero{background:#1E293B;color:#94A3B8}
/* জরুরি বিজ্ঞপ্তি (রক্ত/হারানো) — হোমের সবার উপরে */
.alert-strip{border-radius:22px;padding:14px;background:linear-gradient(135deg,#FEF2F2,#FFF1F2 55%,#F5F3FF);border:1px solid #FECACA}
.dark .alert-strip{background:linear-gradient(135deg,#2A0F12,#1E1B4B);border-color:#7F1D1D}
.alert-card{flex-shrink:0;width:82%;max-width:340px;background:var(--card,#fff);border-radius:16px;padding:12px;border:1px solid var(--border);border-left:4px solid var(--ac)}
@media(min-width:640px){.alert-card{width:320px}}
.alert-bg{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;background:var(--ac);color:#fff;font-weight:800;font-size:17px}
.live-dot{width:9px;height:9px;border-radius:50%;background:#DC2626;box-shadow:0 0 0 0 rgba(220,38,38,.6);animation:liveP 1.6s infinite}
@keyframes liveP{0%{box-shadow:0 0 0 0 rgba(220,38,38,.55)}70%{box-shadow:0 0 0 8px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
/* খবর ও চাকরি হাব — নিজস্ব প্রতিবেদন সোনালি হাইলাইটে, পত্রিকার কার্ড সাদায় */
.shop-hub{position:relative;padding:1.1rem 1rem 1rem;border-radius:1.25rem;background:linear-gradient(135deg,#FFF7ED 0%,#FEF3C7 55%,#FDE68A 120%);border:1px solid #FCD34D;box-shadow:0 18px 40px -28px rgba(180,83,9,.55)}
@media(min-width:640px){.shop-hub{padding:1.4rem}}
.shop-rail{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:calc((100% - 1.5rem)/2.4);gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory}
@media(min-width:640px){.shop-rail{grid-template-rows:repeat(2,auto);grid-auto-columns:calc((100% - 2.25rem)/4)}}
.dark .shop-hub{background:linear-gradient(135deg,#2A1E05,#1F2937 70%);border-color:#78350F}
.own-news{background:linear-gradient(135deg,#FFFBEB,#FEF3C7 60%,#FDE68A55);border:1px solid #FCD34D}
.dark .own-news{background:linear-gradient(135deg,#2A1E05,#1F2937);border-color:#78350F}
.own-jobs{background:linear-gradient(135deg,#F5F3FF,#EDE9FE);border:1px solid #DDD6FE}
.dark .own-jobs{background:linear-gradient(135deg,#1E1B4B,#1F2937);border-color:#4C1D95}
.own-badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:#fff;background:#B45309;padding:5px 12px;border-radius:99px;box-shadow:0 4px 12px -4px rgba(180,83,9,.5)}
.feed-card{display:block;border-radius:16px;overflow:hidden;background:var(--card,#fff);border:1px solid var(--border);transition:transform .15s,box-shadow .15s}
.feed-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(15,61,36,.4)}
/* আজকের দিন কার্ড (হোম হিরো) */
.today-card{background:#fff;border:1px solid var(--border);box-shadow:0 10px 30px -12px rgba(15,61,36,.2)}
/* ── অ্যাক্সেসিবিলিটি (অডিট ১৭ অক্টো ২০২৬): কনট্রাস্ট AA ও ন্যূনতম লেখার আকার ── */
html:not(.dark) main .text-slate-400,html:not(.dark) main .text-gray-400{color:#64748B}
main .text-\[10px\],main .text-\[10\.5px\],main .text-\[11px\],.site-footer .text-\[11px\],.site-footer .text-\[10\.5px\]{font-size:12px}
.tk-item{font-size:14px}.tk-time{font-size:12px;color:#64748B}.tk-brk{font-size:12px}
@media (max-width:640px){.tk-label{font-size:12px}.tk-item{font-size:13px}}
.tk-pause{flex-shrink:0;width:32px;height:32px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;color:#475569;background:transparent}
.tk-pause:hover{background:#F1F5F9}.dark .tk-pause{color:#CBD5E1}.dark .tk-pause:hover{background:#1E293B}