:root{
  --cream:#fdf6e7; --paper:#fffdf6; --ink:#3d2f1a; --gold:#c7791e; --gold-d:#a05d0f;
  --green:#2f6d43; --line:#ecd9ad; --muted:#8a7a58;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{min-height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--cream);
  display:flex; align-items:center; justify-content:center; padding:24px 16px;
  -webkit-font-smoothing:antialiased;
}
/* festive backdrop */
.bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(199,121,30,.16), transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, rgba(47,109,67,.14), transparent 60%),
    var(--cream);
}
.bg::after{ /* subtle pookalam dot texture */
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(199,121,30,.10) 1.2px, transparent 1.2px);
  background-size:22px 22px;
}
.card{
  width:100%; max-width:520px; background:var(--paper);
  border:1px solid var(--line); border-radius:22px; padding:28px 26px 20px;
  box-shadow:0 24px 60px -28px rgba(120,60,0,.35);
}
.brand{display:flex; align-items:center; gap:14px; margin-bottom:22px}
.logo{font-size:34px; line-height:1; filter:drop-shadow(0 4px 8px rgba(199,121,30,.4))}
.brand h1{
  font-family:'Playfair Display',serif; font-size:26px; font-weight:700;
  color:var(--gold-d); letter-spacing:.2px;
}
.tag{font-size:12.5px; color:var(--muted); margin-top:2px}
.step h2{font-family:'Playfair Display',serif; font-size:22px; margin-bottom:10px; color:var(--ink)}
.step p{font-size:14.5px; line-height:1.55; color:#5b4a2a}
#intro{margin-bottom:20px}

/* upload */
.drop{
  border:2px dashed var(--gold); border-radius:16px; background:rgba(199,121,30,.04);
  padding:28px 16px; text-align:center; cursor:pointer; transition:.18s;
  margin-bottom:18px; min-height:150px; display:flex; align-items:center; justify-content:center;
}
.drop:hover,.drop:focus{border-color:var(--gold-d); background:rgba(199,121,30,.08); outline:none}
.drop-empty p{margin-top:6px}
.drop-icon{font-size:40px; margin-bottom:4px}
.muted{color:var(--muted); font-size:13px}
.drop-preview{position:relative; width:100%}
.drop-preview img{width:100%; max-height:320px; object-fit:cover; border-radius:12px; display:block}
.chip{
  position:absolute; top:10px; right:10px; border:none; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; font-size:12.5px; font-weight:600;
  padding:7px 12px; border-radius:999px; backdrop-filter:blur(4px);
}
.chip:hover{background:rgba(0,0,0,.7)}

.field{display:block; margin-bottom:18px}
.field span{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--ink)}
.field input{
  width:100%; padding:13px 14px; font-size:15px; border-radius:12px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  transition:.15s;
}
.field input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(199,121,30,.15)}

.cta{
  width:100%; padding:15px; font-size:16px; font-weight:600; color:#fff; cursor:pointer;
  border:none; border-radius:14px;
  background:linear-gradient(135deg,var(--gold) 0%, var(--gold-d) 100%);
  box-shadow:0 10px 22px -10px rgba(199,121,30,.7);
  transition:.16s; letter-spacing:.2px;
}
.cta:hover:not(:disabled){transform:translateY(-1px); filter:brightness(1.04)}
.cta:disabled{opacity:.6; cursor:not-allowed}
.fine{font-size:12.5px; text-align:center; margin-top:10px}

/* result */
.result-icon{font-size:44px; text-align:center; margin-bottom:8px}
#result p{margin-top:8px}

.hidden{display:none !important}
footer{margin-top:22px; border-top:1px solid var(--line); padding-top:14px; text-align:center}
footer p{font-size:12.5px; color:var(--muted)}
.heart{color:#c0392b}

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:12px;
  font-size:14px; max-width:90%; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.3);
  z-index:10;
}
.toast.err{background:#b3261e}
.toast.ok{background:var(--green)}

/* photo source buttons */
.src-row{display:flex; gap:10px; margin-bottom:18px}
.src{
  flex:1; padding:11px; font-size:14px; font-weight:600; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:12px; cursor:pointer;
  transition:.15s;
}
.src:hover{border-color:var(--gold); background:rgba(199,121,30,.06)}

/* camera modal */
.modal{
  position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:rgba(20,12,0,.62); padding:20px; backdrop-filter:blur(3px);
}
.modal-box{
  width:100%; max-width:420px; background:var(--ink); border-radius:18px; overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
}
.modal-box video{width:100%; display:block; max-height:70vh; background:#000}
.cam-actions{display:flex; gap:10px; padding:14px; background:var(--ink)}
.cam-actions .chip{position:static; background:rgba(255,255,255,.16)}
.cta.small{flex:1; padding:13px; font-size:15px}

/* ---- multi-person thumbnails ---- */
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.thumb{position:relative;width:72px;height:84px;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-x{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.thumb-x:hover{background:rgba(180,40,30,.85)}
.add-tile{min-height:120px;cursor:pointer;border-style:dashed}
.add-tile:hover{border-color:#a05d0f}