@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;600;700;800&display=swap');
:root{
--sky:#38bdf8; --sky2:#0ea5e9; --vio:#8b5cf6; --vio2:#6d28d9;
--ink:#1b1740; --mut:#5d6385; --bg:#f7f8ff; --card:#fff; --line:#e6e7f5;
--ok:#16a34a; --bad:#dc2626; --warn:#d97706;
--grad:linear-gradient(120deg,var(--sky) 0%,var(--vio) 100%);
--display:'Sora','Noto Sans Bengali','Hind Siliguri',system-ui,sans-serif;
--body:'Noto Sans Bengali','Hind Siliguri','Sora',system-ui,sans-serif;
color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--vio2)}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:8px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.35;text-wrap:balance}
/* Bengali: letter-spacing breaks the joined letters (যুক্তবর্ণ) on iPhone, so keep it normal everywhere */
*,*::before,*::after{letter-spacing:normal!important}
/* pages that set their own font variables still get the Bengali font */
html:root{--display:'Sora','Noto Sans Bengali','Hind Siliguri',system-ui,sans-serif;--body:'Noto Sans Bengali','Hind Siliguri','Sora',system-ui,sans-serif}
[hidden]{display:none!important}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:600;font-size:16px;transition:transform .2s,box-shadow .2s,filter .2s;white-space:nowrap;isolation:isolate;text-decoration:none}
.btn.block{width:100%}
.btn-main{color:#fff;background:var(--grad);box-shadow:0 10px 26px -8px rgba(139,92,246,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-main::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--a,0deg),#fff0,#fff 20%,#fff0 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 3s linear infinite;opacity:.85;pointer-events:none}
.btn-main::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,#fff0 30%,rgba(255,255,255,.5) 50%,#fff0 70%);background-size:250% 100%;animation:shine 3.2s infinite;z-index:-1;mix-blend-mode:overlay}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{color:var(--vio2);background:#fff;border:2px solid #d9d0ff}
.btn-ghost:hover{border-color:var(--vio)}
.btn-danger{color:var(--bad);background:#fff;border:2px solid #fecaca}
.btn[disabled],.btn.busy{filter:grayscale(.5);opacity:.6;pointer-events:none}
.btn.busy::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid #fff;border-right-color:transparent;animation:rot .7s linear infinite;position:static;background:none;mix-blend-mode:normal;margin-left:4px}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes shine{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
.fld{display:block;margin-bottom:14px}
.fld>span{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.inp{width:100%;padding:13px 15px;border-radius:14px;border:2px solid var(--line);background:#fafaff;outline:none;transition:border .2s,box-shadow .2s;font-size:16px}
.inp:focus{border-color:var(--vio);box-shadow:0 0 0 4px rgba(139,92,246,.15);background:#fff}
.inp.bad{border-color:var(--bad);animation:shake .35s}
textarea.inp{resize:vertical;min-height:80px}
@keyframes shake{25%{translate:-6px 0}75%{translate:6px 0}}
.phone-in{display:flex;gap:8px}
.phone-in .cc{flex:none;padding:13px 12px;border-radius:14px;background:#efeaff;font-weight:700;color:var(--vio2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:9px 13px;border-radius:12px;border:2px solid var(--line);font-size:14px;font-weight:600;transition:.2s;display:inline-flex;align-items:center;gap:6px;background:#fff}
.chip.on{border-color:var(--vio);background:#f1ecff;color:var(--vio2)}
.chip.on::before{content:"✓"}
.sheet{position:fixed;inset:0;z-index:50;background:rgba(18,12,51,.45);opacity:0;pointer-events:none;transition:opacity .3s}
.sheet.on{opacity:1;pointer-events:auto}
.sheet-in{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:520px;max-height:92%;overflow-y:auto;background:#fff;border-radius:28px 28px 0 0;padding:14px 18px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .45s cubic-bezier(.2,1,.3,1)}
.sheet.on .sheet-in{transform:none}
.grab{width:44px;height:5px;border-radius:5px;background:#dcdcf0;margin:0 auto 12px}
.sheet h3{font-size:20px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.sheet h3 .x{width:34px;height:34px;border-radius:50%;background:#f1f0fa;font-size:16px;flex:none}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:80;max-width:min(440px,calc(100% - 32px));width:max-content;background:var(--ink);color:#fff;padding:12px 16px;border-radius:14px;font-size:15px;transform:translate(-50%,30px);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.2,1.3,.3,1),opacity .3s;box-shadow:0 14px 30px -10px rgba(18,12,51,.5)}
.toast.on{transform:translate(-50%,0);opacity:1}
.toast.err{background:var(--bad)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pcard{border-radius:18px;background:#fff;border:1px solid var(--line);overflow:hidden;text-align:left;transition:transform .25s,box-shadow .25s;display:block;width:100%}
.pcard:hover{transform:translateY(-3px);box-shadow:0 18px 30px -18px rgba(76,29,149,.45)}
.pcard .im{aspect-ratio:1;position:relative;background:#f3f1ff}
.pcard .im img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .off{position:absolute;top:8px;left:8px;background:#ef4444;color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:2px 8px}
.pcard .tag{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;border-radius:999px;padding:2px 8px}
.pcard .tx{padding:8px 10px 10px;font-size:14px;line-height:1.35}
.pcard .tx b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr{color:var(--vio2);font-weight:700}
.pr s{color:#9aa0bd;font-weight:400;font-size:.85em;margin-left:4px}
.empty{text-align:center;padding:44px 10px;color:var(--mut)}
.empty .big{font-size:46px}
.code{font-family:ui-monospace,monospace;font-size:13px;background:var(--ink);color:#c9d8ff;border-radius:10px;padding:10px 12px;line-height:1.6;overflow-x:auto;word-break:break-all}
.box{background:#fff;border-radius:18px;padding:16px;border:1px solid var(--line)}
.box+.box{margin-top:12px}
.box h4{font-size:16px;margin-bottom:4px}
.box p.s{font-size:14px;color:var(--mut)}
.mini-btn{padding:10px 14px;border-radius:12px;background:var(--grad);color:#fff;font-weight:600;font-size:14px;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(139,92,246,.7)}
.mini-btn.ghost{background:#f1ecff;color:var(--vio2);box-shadow:none}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}