:root{--red:#d7161f;--yellow:#ffe600;--green:#1d8a3a;--blue:#1b5fc1;--purple:#6a2c91;--ink:#16202e;--paper:#fff;--sky:#e8f4ff;--line:#d5dfeb}
@media(prefers-color-scheme:dark){:root{--ink:#eef3f9;--paper:#141b26;--sky:#0e1520;--line:#2c3a4d}}
*{box-sizing:border-box}
body{margin:0;font-family:'Anek Tamil','Noto Sans Tamil',system-ui,sans-serif;color:var(--ink);background:var(--sky);line-height:1.55}
.hero{background:linear-gradient(180deg,#bfe3ff,var(--sky));padding:28px 16px 20px;text-align:center}
.brand{font-weight:700;color:var(--green);margin:0}
.title{display:inline-block;margin:10px 0;padding:10px 26px;background:var(--red);color:#fff;transform:skew(-4deg);font-size:clamp(26px,6vw,46px);font-weight:800;line-height:1.2}
.title b{color:var(--yellow)}
.sub{max-width:560px;margin:8px auto;background:var(--green);color:#fff;padding:8px 14px;font-weight:600}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;max-width:900px;margin:18px auto 0;padding:0 12px}
.fact{border-radius:10px;overflow:hidden;background:var(--paper);border:1px solid var(--line);text-align:center;font-weight:600}
.fact h4{margin:0;padding:6px;color:#fff}.fact p{margin:0;padding:10px 8px;font-size:15px}
.f1 h4{background:var(--red)}.f2 h4{background:var(--blue)}.f3 h4{background:var(--green)}.f4 h4{background:var(--purple)}.f5 h4{background:#d6249f}
main{max-width:640px;margin:0 auto;padding:18px 14px 60px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:16px}
h2{margin:0 0 10px;font-size:20px}
label{display:block;font-weight:600;margin:14px 0 6px}label i{color:var(--red);font-style:normal}
input,select,textarea{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:var(--paper);color:var(--ink)}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid var(--blue);outline-offset:1px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{margin:0;display:flex;gap:6px;align-items:center;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:500}
.opts input{width:auto}
.opts label:has(input:checked){background:var(--green);border-color:var(--green);color:#fff}
.btn{display:block;width:100%;margin-top:18px;padding:14px;border:0;border-radius:12px;background:var(--red);color:#fff;font:700 18px inherit;font-family:inherit;cursor:pointer}
.btn:disabled{opacity:.6}.btn.alt{background:var(--green)}
.pay{
  background:var(--yellow);
  color:#16202e;
  border-radius:14px;
  padding:18px;
  text-align:center;
  font-weight:700;
  border:2px solid #e0c900;
}

.pay-title{
  font-size:21px;
  margin-bottom:2px;
}

.pay-amount{
  font-size:36px;
  font-weight:900;
  line-height:1.2;
  margin-bottom:12px;
}

.pay-section{
  background:#fff;
  border-radius:12px;
  padding:12px;
  margin-top:10px;
}

.upi-id{
  font-size:18px;
  margin:5px 0 10px;
  font-weight:800;
}

.upi-btn{
  display:block;
  background:var(--green);
  color:#fff;
  text-decoration:none;
  padding:11px 14px;
  border-radius:9px;
  font-weight:800;
}

.upi-btn:hover{
  opacity:.9;
}

.qr-box{
  background:#fff;
  border-radius:12px;
  padding:14px;
  margin-top:12px;
}

.qr-box strong{
  display:block;
  margin-bottom:8px;
}

.qr-box img{
  display:block;
  width:180px;
  height:180px;
  object-fit:contain;
  margin:8px auto;
  border-radius:8px;
}

.qr-box small{
  display:block;
  font-size:13px;
  font-weight:600;
}

.bank-box{
  background:#fff;
  border-radius:12px;
  padding:14px;
  margin-top:12px;
  text-align:left;
  line-height:1.8;
}

.bank-box strong{
  display:block;
  text-align:center;
  margin-bottom:5px;
}

.pay big{display:block;font-size:30px}
.note{font-size:14px;opacity:.8}.err{color:var(--red);font-weight:600;margin-top:10px}
.ok{text-align:center;padding:30px 10px}.ok h2{color:var(--green);font-size:26px}
nav{display:flex;gap:14px;justify-content:center;padding:10px;font-weight:600}nav a{color:var(--blue)}
.tiers{display:grid;gap:10px}
.tiers label{margin:0;border:1.5px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;display:flex;gap:10px;align-items:flex-start}
.tiers label:has(input:checked){border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}
.tiers input{width:auto;margin-top:5px}