:root{
  --ground:#FDF7EC; --surface:#FFFFFF; --surface-2:#F8F0DF; --raised:#FFFDF8;
  --ink:#2A1F14; --ink-2:#6B5A45; --ink-3:#95836B;
  --line:#E7D9C1; --line-2:#D8C5A4;
  --durva:#1D4B36; --durva-soft:#E4EFE7;
  --sindoor:#BF3B2E; --sindoor-soft:#FBE7E3;
  --genda:#EDA011; --genda-soft:#FCEFD3;
  --chandan:#A98456;
  --on-accent:#FFFDF8;
  --shadow:0 1px 2px rgba(42,31,20,.06), 0 8px 24px -12px rgba(42,31,20,.18);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#12180F; --surface:#1A211A; --surface-2:#222A21; --raised:#202821;
    --ink:#F3EADA; --ink-2:#B9AB92; --ink-3:#8C8069;
    --line:#2F3B2D; --line-2:#3E4C3B;
    --durva:#84CBA5; --durva-soft:#20301F;
    --sindoor:#F0776A; --sindoor-soft:#33201C;
    --genda:#FFC24D; --genda-soft:#332711;
    --chandan:#C8A276;
    --on-accent:#1B0E0B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ground:#12180F; --surface:#1A211A; --surface-2:#222A21; --raised:#202821;
  --ink:#F3EADA; --ink-2:#B9AB92; --ink-3:#8C8069;
  --line:#2F3B2D; --line-2:#3E4C3B;
  --durva:#84CBA5; --durva-soft:#20301F;
  --sindoor:#F0776A; --sindoor-soft:#33201C;
  --genda:#FFC24D; --genda-soft:#332711;
  --chandan:#C8A276;
  --on-accent:#1B0E0B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Mukta Vaani","Noto Sans Gujarati",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:540px; margin:0 auto; padding:0 16px 56px}
.gu{font-family:"Mukta Vaani","Noto Sans Gujarati",system-ui,sans-serif}
.en{font-size:.78rem; letter-spacing:.02em; color:var(--ink-3); display:block; font-weight:500}

/* ---------- toran ---------- */
.toran{display:block; width:100%; height:34px; margin:0 -16px; width:calc(100% + 32px)}

/* ---------- header ---------- */
header{padding:18px 0 22px; text-align:center}
.om{font-family:"Rasa",Georgia,serif; font-size:1.05rem; color:var(--chandan); letter-spacing:.06em}
.badge{
  display:inline-flex; align-items:baseline; gap:7px; margin:10px 0 12px;
  padding:5px 14px 6px; border-radius:999px;
  background:var(--sindoor-soft); border:1px solid var(--sindoor);
  color:var(--sindoor); font-weight:700; font-size:.92rem;
}
.badge small{font-size:.72rem; font-weight:600; opacity:.85; letter-spacing:.04em}
h1{
  font-family:"Rasa",Georgia,serif; font-weight:700;
  font-size:clamp(1.6rem,7.5vw,2.2rem); line-height:1.2; margin:0;
  color:var(--durva); text-wrap:balance;
}
.h1-en{font-family:"Mukta Vaani",sans-serif; font-size:.82rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-top:8px}
.place{
  margin-top:12px; display:inline-block; font-size:.95rem; color:var(--ink-2);
  border-top:1px solid var(--line-2); padding-top:10px;
}
.place b{color:var(--ink); font-weight:600}

/* ---------- cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px; margin:0 0 14px; box-shadow:var(--shadow);
}
.card > h2{
  margin:0 0 4px; font-family:"Rasa",Georgia,serif; font-size:1.18rem; font-weight:600;
  color:var(--ink); line-height:1.3;
}
.card > h2 + .en{margin-bottom:16px}
.step{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:var(--durva);
  font-size:.75rem; font-weight:700; margin-right:8px; vertical-align:2px;
  color:var(--ground);
}

/* ---------- fields ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field:last-child{margin-bottom:0}
label.lbl{font-weight:600; font-size:.98rem}
label.lbl .en{display:inline; font-size:.75rem; margin-left:6px}
input[type=text],input[type=tel],textarea{
  font-family:inherit; font-size:1.05rem; color:var(--ink);
  background:var(--surface-2); border:1.5px solid var(--line-2); border-radius:10px;
  padding:12px 13px; width:100%; transition:border-color .15s, background .15s;
}
textarea{font-size:1rem; min-height:88px; resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,textarea:focus{outline:none; border-color:var(--durva); background:var(--surface)}
.phone-row{display:flex; align-items:stretch}
.cc{
  display:flex; align-items:center; padding:0 12px; font-weight:600; color:var(--ink-2);
  background:var(--surface-2); border:1.5px solid var(--line-2); border-right:none;
  border-radius:10px 0 0 10px; font-variant-numeric:tabular-nums;
}
.phone-row input{border-radius:0 10px 10px 0}
.hint{font-size:.78rem; color:var(--ink-3)}
.err{font-size:.82rem; color:var(--sindoor); font-weight:600}

/* ---------- Truecaller one-tap ---------- */
#tcBox{margin-bottom:16px}
.tc-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-size:1rem; font-weight:700; cursor:pointer;
  color:#fff; background:#0A84FF; border:none; border-radius:11px; padding:13px 14px;
  box-shadow:var(--shadow); line-height:1.25; text-align:left;
}
.tc-btn:active{transform:scale(.99)}
.tc-btn[disabled]{opacity:.6; cursor:progress}
.tc-btn:focus-visible{outline:3px solid var(--genda); outline-offset:2px}
.tc-btn svg{width:22px; height:22px; flex:0 0 auto; fill:#fff}
.tc-btn .en{color:rgba(255,255,255,.85); font-size:.7rem; font-weight:600;
  font-family:"Mukta Vaani",sans-serif; letter-spacing:.02em}
.tc-status{margin-top:9px; font-size:.85rem; font-weight:600; color:var(--ink-2); text-align:center}
.tc-status.bad{color:var(--sindoor)}
.tc-status.good{color:var(--durva)}
.tc-or{display:flex; align-items:center; gap:10px; margin:16px 0 2px; color:var(--ink-3)}
.tc-or::before,.tc-or::after{content:""; flex:1; height:1px; background:var(--line)}
.tc-or span{font-size:.76rem; font-weight:600; letter-spacing:.02em}
.verified-tag{display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700;
  color:var(--durva); background:var(--durva-soft); border-radius:999px; padding:2px 8px; margin-left:6px}
input.locked{background:var(--durva-soft); border-color:var(--durva); font-weight:600}

/* ---------- stars ---------- */
.stars{display:flex; gap:2px; flex:0 0 auto}
.stars button{
  -webkit-appearance:none; appearance:none; background:none; border:none; cursor:pointer;
  padding:3px; line-height:0; border-radius:6px;
}
.stars button:focus-visible{outline:2px solid var(--durva); outline-offset:1px}
.stars svg{width:26px; height:26px; display:block}
.stars .s-fill{fill:var(--line-2); transition:fill .12s, transform .12s}
.stars button[aria-checked="true"] .s-fill,
.stars button.on .s-fill{fill:var(--genda)}
.stars button.on:active .s-fill{transform:scale(.9)}

/* overall big rating */
.overall{text-align:center; padding:4px 0 0}
.overall .stars{justify-content:center; gap:7px; margin:14px 0 8px}
.overall .stars svg{width:46px; height:46px}
.overall-word{min-height:1.5em; font-family:"Rasa",Georgia,serif; font-size:1.15rem;
  font-weight:600; color:var(--sindoor)}

/* ---------- day vote ---------- */
.vote-card{border:2px solid var(--genda); background:var(--raised)}
.vote-card > h2{color:var(--sindoor)}
.days{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:14px}
@media (max-width:360px){.days{grid-template-columns:repeat(2,1fr)}}
.day{
  font-family:inherit; cursor:pointer; text-align:center; padding:14px 4px 11px;
  background:var(--surface-2); border:2px solid var(--line-2); border-radius:12px;
  color:var(--ink-2); transition:all .15s;
}
.day:focus-visible{outline:2px solid var(--durva); outline-offset:2px}
.day .n{display:block; font-family:"Rasa",Georgia,serif; font-size:2rem; font-weight:700;
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.day .u{display:block; font-size:.8rem; font-weight:600; margin-top:5px}
.day[aria-pressed="true"]{background:var(--sindoor); border-color:var(--sindoor); color:var(--on-accent)}
.day[aria-pressed="true"] .n{color:var(--on-accent)}

/* ---------- submit ---------- */
.submit{
  width:100%; font-family:"Rasa",Georgia,serif; font-size:1.25rem; font-weight:700;
  color:var(--on-accent); background:var(--sindoor); border:none; border-radius:12px;
  padding:16px; cursor:pointer; box-shadow:var(--shadow); letter-spacing:.01em;
  transition:transform .12s, opacity .15s;
}
.submit:active{transform:scale(.99)}
.submit[disabled]{opacity:.6; cursor:progress}
.submit:focus-visible{outline:3px solid var(--genda); outline-offset:2px}
.submit .en{font-family:"Mukta Vaani",sans-serif; color:var(--on-accent); opacity:.8;
  font-size:.72rem; font-weight:600; margin-top:3px}
.form-err{margin:10px 0 0; text-align:center; color:var(--sindoor); font-weight:600; font-size:.9rem}
.foot{margin-top:22px; text-align:center; font-size:.78rem; color:var(--ink-3); line-height:1.7}

/* ---------- thanks ---------- */
#thanks{text-align:center; padding:34px 6px}
.modak{width:96px; height:96px; margin:0 auto 6px; display:block}
#thanks h2{font-family:"Rasa",Georgia,serif; font-size:1.8rem; color:var(--sindoor); margin:8px 0 2px}
#thanks p{color:var(--ink-2); margin:6px 0}
.ticket{
  margin:22px auto 0; max-width:340px; text-align:left; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow);
}
.ticket div{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:.92rem}
.ticket div + div{border-top:1px dashed var(--line)}
.ticket span:first-child{color:var(--ink-3)}
.ticket span:last-child{font-weight:600; text-align:right}
.linkish{background:none; border:none; font-family:inherit; font-size:.9rem; font-weight:600;
  color:var(--durva); text-decoration:underline; cursor:pointer; padding:6px; margin-top:16px}

/* ---------- admin ---------- */
.adm-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:20px 0 6px}
.adm-top h1{font-size:1.5rem}
.tools{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px}
.tools button{
  font-family:inherit; font-size:.86rem; font-weight:600; cursor:pointer;
  background:var(--surface); color:var(--durva); border:1.5px solid var(--durva);
  border-radius:9px; padding:8px 12px;
}
.tools button:active{background:var(--durva-soft)}
.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:13px 14px}
.kpi b{display:block; font-family:"Rasa",Georgia,serif; font-size:1.9rem; line-height:1.1;
  color:var(--durva); font-variant-numeric:tabular-nums}
.kpi span{font-size:.76rem; color:var(--ink-3); font-weight:600; letter-spacing:.03em; text-transform:uppercase}
.bar{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; padding:9px 0;
  align-items:baseline}
.bar-name{font-size:.9rem; font-weight:600; min-width:0; overflow-wrap:anywhere; line-height:1.3}
.bar-val{grid-column:2; grid-row:1}
.bar-track{grid-column:1 / -1; grid-row:2; height:12px; background:var(--surface-2);
  border-radius:999px; overflow:hidden; border:1px solid var(--line)}
.bar-fill{height:100%; background:var(--genda); border-radius:999px; transition:width .5s ease}
.bar.win .bar-fill{background:var(--sindoor)}
.bar.win .bar-name{color:var(--sindoor)}
.bar-val{font-size:.85rem; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.resp{border-top:1px solid var(--line); padding:12px 0}
.resp-h{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.resp-h b{font-size:.98rem}
.resp-h em{font-style:normal; font-size:.78rem; color:var(--ink-3); white-space:nowrap}
.resp-meta{font-size:.82rem; color:var(--ink-2); margin-top:2px; font-variant-numeric:tabular-nums}
.resp-c{font-size:.92rem; margin-top:6px; padding:8px 10px; background:var(--surface-2);
  border-left:3px solid var(--genda); border-radius:0 8px 8px 0}
.note{background:var(--genda-soft); border:1px solid var(--genda); border-radius:10px;
  padding:11px 13px; font-size:.87rem; color:var(--ink); margin-bottom:14px}
#admBody h2{font-family:"Rasa",Georgia,serif; font-size:1.1rem; font-weight:600;
  color:var(--durva); margin:22px 0 4px; padding-top:14px; border-top:2px solid var(--line-2)}
#admBody h2:first-of-type{border-top:none; padding-top:0; margin-top:8px}
#admBody code{font-size:.85em; background:var(--surface-2); padding:1px 5px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- phone safe areas ---------- */
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
