body{
  background:#f7f9fc;
  color:#1f2937;
  font-family:tahoma,system-ui,sans-serif;
}
.navbar-brand{color:#2563eb!important}
.hero{
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:white;
  border-radius:28px;
  padding:42px;
}
.hero h1{font-weight:900}
.hero p{font-size:18px;opacity:.94;margin:0;line-height:2}
.panel{
  background:white;
  border-radius:24px;
  padding:30px;
  box-shadow:0 14px 40px rgba(15,23,42,.08);
}
.narrow{max-width:620px}
.form-control,.form-select{
  border-radius:14px;
  padding:13px;
  border:1px solid #dbe3ef;
}
.btn{border-radius:14px}
.code-input{
  text-align:center;
  font-size:34px;
  letter-spacing:8px;
  direction:ltr;
  font-weight:900;
}
.big-code{
  font-size:64px;
  font-weight:900;
  letter-spacing:12px;
  direction:ltr;
  color:#2563eb;
  background:#eff6ff;
  border-radius:24px;
  padding:24px;
}
.content-box{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:22px;
  white-space:pre-wrap;
  line-height:2;
  word-break:break-word;
}
.ltr{
  direction:ltr;
  text-align:left;
}
.success-icon{
  width:76px;
  height:76px;
  background:#dcfce7;
  color:#166534;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  margin:0 auto 18px;
}
.hint{
  background:#f8fafc;
  border:1px dashed #cbd5e1;
  color:#64748b;
  border-radius:18px;
  padding:16px;
  line-height:2;
}
@media(max-width:768px){
  .hero{padding:30px}
  .big-code{font-size:44px;letter-spacing:8px}
}