:root{
  --saffron:#e77817;
  --deep:#8a2a06;
  --gold:#d99a1c;
  --gold-lt:#f4c65a;
  --cream:#fff7e9;
  --ink:#2a1706;
  --panel:#fffaf0;
  --shadow:0 18px 45px rgba(60,20,0,.28);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;overflow-x:hidden}
body{
  font-family:'Baloo 2', system-ui, sans-serif;
  color:var(--ink);
  background:#1c0d04;
  min-height:100vh;
  position:relative;
}

/* animated warm background */
.page-bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(244,198,90,.55), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(231,120,23,.35), transparent 60%),
    linear-gradient(160deg,#3a1806 0%, #6b2606 40%, #34160a 100%);
}

/* ---------- header ---------- */
.site-header{
  text-align:center;
  padding:34px 18px 10px;
  color:var(--cream);
}
.om-mark{
  font-family:'Tiro Devanagari Hindi',serif;
  font-size:40px; color:var(--gold-lt);
  text-shadow:0 0 22px rgba(244,198,90,.7);
}
.site-header h1{
  font-family:'Tiro Devanagari Hindi',serif;
  font-size:clamp(30px,7vw,52px);
  font-weight:800;
  letter-spacing:.5px;
  background:linear-gradient(180deg,#ffe6a8,#f0a92c 60%,#c9720f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.4));
  margin-top:4px;
}
.tagline{color:#ffdca0; font-size:clamp(14px,3.4vw,18px); margin-top:6px}
.date-chip{
  display:inline-block; margin-top:12px;
  background:linear-gradient(180deg,var(--deep),#5c1c04);
  border:1px solid var(--gold);
  color:var(--gold-lt);
  padding:8px 18px; border-radius:999px;
  font-size:clamp(13px,3.2vw,16px); font-weight:600;
  box-shadow:var(--shadow);
}

/* ---------- container ---------- */
.container{
  max-width:560px; margin:0 auto; padding:22px 16px 40px;
}

/* ---------- panels ---------- */
.form-panel,.result-panel{
  background:var(--panel);
  border-radius:22px;
  padding:26px 22px;
  box-shadow:var(--shadow);
  border:2px solid rgba(217,154,28,.5);
}
.panel-title{
  font-family:'Tiro Devanagari Hindi',serif;
  color:var(--deep); font-size:clamp(22px,5.5vw,28px);
  text-align:center;
}
.panel-sub{
  text-align:center; color:#7a5230; font-size:14px; margin:6px 0 20px;
}

/* ---------- form ---------- */
.field{margin-bottom:16px}
.field label{
  display:block; font-weight:600; color:var(--deep);
  font-size:15px; margin-bottom:6px;
}
.field label span{color:#c0392b}
.field input{
  width:100%; padding:13px 14px;
  border:1.6px solid #e4c58a;
  border-radius:12px;
  font-family:inherit; font-size:15px;
  background:#fffdf8; color:var(--ink);
  transition:.18s;
}
.field input:focus{
  outline:none; border-color:var(--saffron);
  box-shadow:0 0 0 3px rgba(231,120,23,.18);
}
.field input::placeholder{color:#b79a72}

.btn-submit{
  width:100%; margin-top:8px;
  padding:15px; border:none; border-radius:14px;
  font-family:'Baloo 2'; font-weight:700; font-size:18px;
  color:#fff; cursor:pointer;
  background:linear-gradient(180deg,var(--saffron),var(--deep));
  box-shadow:0 10px 22px rgba(138,42,6,.4);
  transition:.15s;
}
.btn-submit:hover{transform:translateY(-2px); filter:brightness(1.05)}
.btn-submit:active{transform:translateY(0)}

/* ---------- generated card ---------- */
.card-wrap{display:flex; justify-content:center; margin:16px 0 22px}
.id-card{
  width:360px; max-width:100%;
  background:
    radial-gradient(500px 260px at 100% -10%, rgba(244,198,90,.45), transparent 60%),
    linear-gradient(165deg,#fff6e2 0%, #ffe9c2 55%, #f7d597 100%);
  border:3px solid var(--gold);
  border-radius:20px;
  padding:20px 20px 16px;
  position:relative;
  box-shadow:0 16px 40px rgba(70,25,0,.35);
  overflow:hidden;
}
.id-card::before{
  content:""; position:absolute; inset:6px;
  border:1.4px dashed rgba(138,42,6,.45);
  border-radius:14px; pointer-events:none;
}
.card-top{
  display:flex; align-items:center; gap:10px;
  border-bottom:2px solid rgba(217,154,28,.6);
  padding-bottom:10px;
}
.card-om{
  font-family:'Tiro Devanagari Hindi',serif;
  font-size:34px; color:var(--saffron);
  line-height:1;
}
.card-heading{display:flex; flex-direction:column; flex:1; text-align:center}
.ch-1{
  font-family:'Tiro Devanagari Hindi',serif; font-weight:700;
  font-size:22px; color:var(--deep); line-height:1.1;
}
.ch-2{font-size:13px; font-weight:600; color:var(--saffron); letter-spacing:1px}
.card-flag{font-size:28px}

.card-motto{
  text-align:center; font-size:12.5px; font-weight:600;
  color:#8a5a1f; margin:10px 0 12px; letter-spacing:.3px;
}

.card-regno-wrap{text-align:center; margin:0 0 13px}
.card-regno-pill{
  display:inline-block;
  background:linear-gradient(180deg,var(--deep),#5c1c04);
  color:var(--gold-lt);
  font-weight:700; font-size:13.5px; letter-spacing:.4px;
  padding:6px 18px; border-radius:999px;
  border:1px solid var(--gold);
  box-shadow:0 3px 8px rgba(90,25,0,.3);
}

.card-body{display:flex; flex-direction:column; gap:9px}
.row{
  display:flex; gap:8px; align-items:flex-start;
  font-size:14.5px; line-height:1.35;
}
.row .k{
  flex:0 0 92px; font-weight:700; color:var(--deep);
}
.row .k::after{content:":"; margin-left:2px}
.row .v{flex:1; color:var(--ink); font-weight:500; word-break:break-word}

.card-event{
  margin-top:14px; padding-top:11px;
  border-top:2px solid rgba(217,154,28,.6);
  text-align:center;
}
.ce-line{font-size:13px; color:var(--deep); font-weight:600}
.ce-loc{font-size:11.5px; color:#6f4a22; margin-top:5px; line-height:1.4}

.card-footer{
  margin-top:12px; text-align:center;
  font-family:'Tiro Devanagari Hindi',serif;
  font-weight:700; font-size:15px; color:var(--deep);
}
.card-ribbon{
  margin-top:8px;
  background:linear-gradient(90deg,var(--deep),var(--saffron),var(--deep));
  color:#ffe9bf; text-align:center;
  font-size:11px; font-weight:600; letter-spacing:.4px;
  padding:6px; border-radius:8px;
}

/* ---------- result actions ---------- */
.result-actions{display:flex; flex-direction:column; gap:12px}
.btn-download,.btn-edit{
  padding:14px; border:none; border-radius:13px;
  font-family:'Baloo 2'; font-weight:700; font-size:16px; cursor:pointer;
  transition:.15s;
}
.btn-download{
  color:#fff;
  background:linear-gradient(180deg,#1f9d4e,#0f6b32);
  box-shadow:0 10px 20px rgba(15,107,50,.35);
}
.btn-download:hover{transform:translateY(-2px)}
.btn-edit{
  color:var(--deep); background:#ffefd0; border:1.6px solid var(--gold);
}
.btn-edit:hover{background:#ffe6b8}

/* ---------- footer ---------- */
.site-footer{
  text-align:center; color:#ffd9a0; font-size:13px;
  padding:14px 18px 28px; font-weight:600;
}

@media (max-width:400px){
  .row .k{flex-basis:80px}
}