:root{
  --primary:#d32f2f;        /* primary red */
  --primary-600:#b71c1c;
  --bg:#f7f7f9;
  --card:#ffffff;
  --text:#121212;
  --muted:#6b7280;
  --border:#e5e7eb;
  --ring: rgba(211,47,47,.15);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: 'Noto Sans Bengali', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.brand{
  display:flex; align-items:center; gap:.6rem; justify-content:center; margin-bottom:1rem;
}
.brand img{height:72px; width:auto; display:block}
.brand .title{font-weight:700; font-size:1.25rem; letter-spacing:.2px}

.center-wrap{
  min-height:100dvh; display:grid; place-items:center; padding:24px;
}
.card{
  width: min(680px, 92vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(16,24,40,.05);
  overflow:hidden;
}
.card-head{
  padding:28px 24px 8px;
  text-align:center;
}
.card-head h1{
  margin:8px 0 6px; font-size:1.5rem; font-weight:700;
}
.card-head p{color:var(--muted); margin:0}
.card-body{padding:20px 24px 28px;}
.form-grid{display:grid; gap:14px}
.label{font-weight:600; margin-bottom:6px; display:block}
.input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:#fff;
  outline:none; transition:border .2s, box-shadow .2s;
  font-size:16px;
}
.input:focus{border-color:var(--primary); box-shadow: 0 0 0 4px var(--ring);}
.help{color:var(--muted); font-size:.9rem; margin-top:6px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; border:0; cursor:pointer; text-decoration:none;
  padding:12px 16px; border-radius:12px; font-weight:700; font-size:1rem;
}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-link{background:transparent; color:var(--primary); padding:0}
.btn-full{width:100%}

.alert{
  padding:12px 14px; border-radius:12px; border:1px solid #f3d1d1;
  background:#fff5f5; color:#8a1c1c; margin:0 24px 12px; font-weight:600
}

.footer{
  padding:14px 18px; background:#fafafa; border-top:1px solid var(--border);
  text-align:center; color:var(--muted); font-size:.9rem;
}

/* OTP boxes */
.otp-wrap{display:flex; gap:10px; justify-content:center; margin:10px 0 8px}
.otp-input{width:48px; height:56px; text-align:center; font-size:22px;
  border-radius:12px; border:1px solid var(--border); outline:none;}
.otp-input:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--ring)}
.small{font-size:.9rem}
.link{color:var(--primary); text-decoration:none}
.link:hover{text-decoration:underline}