:root{
  --pink:#e2136e; --pink-dark:#b80e58; --pink-soft:#fde8f1;
  --bg:#fff7fb; --card:#ffffff; --text:#2a1320; --muted:#7d6573; --line:#f0d3e1;
  --ok:#0f9d58; --bad:#d93025;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#1a0f16; --card:#26151f; --text:#fbeef5; --muted:#c3a6b6; --line:#4a2a3c; --pink-soft:#3a1a2b; }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Hind Siliguri","Noto Sans Bengali",system-ui,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh;
  display:flex; align-items:center; justify-content:center; padding:20px;
  padding-top:max(20px,env(safe-area-inset-top)); padding-bottom:max(20px,env(safe-area-inset-bottom));
}
.card{
  width:100%; max-width:420px; background:var(--card);
  border:1px solid var(--line); border-radius:20px; padding:28px 24px;
}
h1{font-size:1.5rem; margin:0 0 6px; line-height:1.3}
.sub{color:var(--muted); margin:0 0 22px}
.amount-box{
  display:flex; align-items:baseline; gap:8px; border-bottom:3px solid var(--pink);
  padding:4px 0 8px; margin-bottom:16px;
}
.amount-box .taka{font-size:2rem; color:var(--pink); font-weight:700}
.amount-box input{
  flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text);
  font:inherit; font-size:2.6rem; font-weight:700; width:100%;
}
.chips{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:22px}
.chip{
  font:inherit; font-weight:600; padding:10px 0; border-radius:12px; cursor:pointer;
  border:1.5px solid var(--line); background:transparent; color:var(--text);
}
.chip:hover{border-color:var(--pink)}
.chip.active{background:var(--pink-soft); border-color:var(--pink); color:var(--pink)}
.pay{
  width:100%; font:inherit; font-size:1.1rem; font-weight:700; color:#fff; background:var(--pink);
  border:0; border-radius:14px; padding:15px; cursor:pointer;
}
.pay:hover{background:var(--pink-dark)}
.pay:disabled{opacity:.6; cursor:wait}
:focus-visible{outline:3px solid var(--pink); outline-offset:2px}
.err{color:var(--bad); min-height:1.4em; margin:0 0 10px; font-size:.95rem}
.note{color:var(--muted); font-size:.85rem; text-align:center; margin:16px 0 0}

/* রেজাল্ট পেজ */
.result{text-align:center}
.icon{
  width:84px; height:84px; border-radius:50%; margin:0 auto 18px; display:grid; place-items:center;
  font-size:2.6rem; color:#fff;
}
.icon.ok{background:var(--ok); animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.icon.bad{background:var(--bad)}
.icon.wait{background:var(--muted)}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.icon.ok{animation:none}}
.info{
  text-align:left; background:var(--pink-soft); border-radius:14px; padding:14px 16px; margin:20px 0;
}
.info div{display:flex; justify-content:space-between; gap:12px; padding:5px 0}
.info span:first-child{color:var(--muted)}
.info span:last-child{font-weight:700; word-break:break-all}
.link{
  display:block; text-decoration:none; text-align:center; color:#fff; background:var(--pink);
  border-radius:14px; padding:14px; font-weight:700;
}

/* ডাইনামিক চিপ + সেটআপ পেজ */
.chips{grid-template-columns:repeat(auto-fit,minmax(68px,1fr))}
.top{align-items:flex-start}
.wide{max-width:560px}
fieldset{border:1px solid var(--line);border-radius:14px;padding:6px 16px 16px;margin:0 0 18px;min-width:0}
legend{font-weight:700;padding:0 6px;color:var(--pink)}
label{display:block;font-weight:600;margin:12px 0 4px;font-size:.95rem}
.f{width:100%;font:inherit;padding:11px 12px;border-radius:10px;border:1.5px solid var(--line);background:transparent;color:var(--text)}
.f:focus{border-color:var(--pink);outline:0}
.hint{color:var(--muted);font-size:.82rem;margin:4px 0 0;word-break:break-all}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.seg label{position:relative;margin:0;border:1.5px solid var(--line);border-radius:10px;padding:10px;text-align:center;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg label:has(input:checked){border-color:var(--pink);background:var(--pink-soft);color:var(--pink)}
.seg label:has(input:focus-visible){outline:3px solid var(--pink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn2{font:inherit;font-weight:600;margin-top:14px;padding:11px 16px;border-radius:12px;cursor:pointer;border:1.5px solid var(--pink);background:transparent;color:var(--pink)}
.btn2:disabled{opacity:.6}
.msg{min-height:1.4em;margin:8px 0 0;font-size:.95rem}
.msg.ok{color:var(--ok)} .msg.bad{color:var(--bad)}