@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=Yatra+One&family=Tiro+Devanagari+Hindi:ital@0;1&family=Kalam:wght@400;700&family=Tillana:wght@400;700&family=Martel:wght@400;700&family=Mukta:wght@400;600;700&family=Noto+Serif+Devanagari:wght@400;600;700&family=Poppins:wght@400;600;700&display=swap');

:root{
  --dashain-primary:#7A0F14;
  --dashain-accent:#C8930A;
  --tihar-primary:#3A1A5C;
  --tihar-accent:#FF7A2F;
  --chaite-primary:#1B4D3E;
  --chaite-accent:#FF7A9E;
}

*{box-sizing:border-box}
body{margin:0; font-family:'Mukta','Poppins',system-ui; background:#FFF9F0; color:#1a1a1a;}
.font-amita{font-family:'Amita',serif}
.font-yatra{font-family:'Yatra One',serif}
.font-tiro{font-family:'Tiro Devanagari Hindi',serif}
.font-kalam{font-family:'Kalam',cursive}
.font-tillana{font-family:'Tillana',cursive}
.font-martel{font-family:'Martel',serif}
.font-mukta{font-family:'Mukta',sans-serif}
.font-noto{font-family:'Noto Serif Devanagari',serif}

/* Card */
.greeting-card{
  position:relative;
  width:100%;
  max-width:620px;
  aspect-ratio:4/5;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 1px rgba(255,215,0,.2);
  background:#000;
  margin:0 auto;
}
.greeting-card img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.greeting-card .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 85%);
}
.greeting-card .content{
  position:absolute; inset:0;
  padding:28px 26px 22px;
  display:flex; flex-direction:column; justify-content:space-between;
  text-align:center;
}
.hero-title{
  font-family:'Amita',serif;
  font-weight:700;
  font-size:34px;
  line-height:1.15;
  background:linear-gradient(90deg,#FFD700,#FF6B00);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
  white-space:pre-line;
}
.top-line{
  font-family:'Mukta',sans-serif;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  opacity:.9;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.optional-msg{
  font-family:'Kalam',cursive;
  font-size:16px;
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.7);
  min-height:24px;
  font-style:italic;
}
.from-line{font-size:15px; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.7);}
.divider{height:1px; background:linear-gradient(90deg,transparent, #FFD700, transparent); margin:10px auto; width:68%;}
.footer-line{font-size:12px; color:rgba(255,255,255,.85);}

/* Controls */
.controls{background:#fff; border-radius:20px; padding:18px; box-shadow:0 8px 30px rgba(0,0,0,.08); border:1px solid #eee;}
.controls h3{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#777; margin:0 0 10px;}
.input{width:100%; padding:10px 14px; border-radius:12px; border:1px solid #e5e7eb; font-family:inherit; font-size:14px;}
.input:focus{outline:none; border-color:#C8930A; box-shadow:0 0 0 3px rgba(200,147,10,.15);}
.btn{border-radius:999px; padding:12px 18px; font-weight:600; font-size:13px; cursor:pointer; border:none; transition:.2s;}
.btn-primary{background:#111; color:#fff;}
.btn-primary:hover{background:#000; transform:translateY(-1px);}
.btn-ghost{background:#f5f5f5; color:#333;}
.tab{padding:10px 16px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-size:13px;}
.tab.active{background:#111; color:#fff; border-color:#111;}
.font-select{display:grid; gap:8px; margin-top:8px;}
.range{width:100%;}
.color-dot{width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 1px #ddd; display:inline-block; margin:3px;}
.color-dot.active{box-shadow:0 0 0 2px #111; transform:scale(1.15);}