/* Invitations on the scan page (Pappa's laptop): a live, festive desk in Gujarati.
   Maroon and gold like the card; green for WhatsApp, blue for "seen". Motion stays gentle and stops for reduced motion. */
:root {
  --bg: #f7f1ea;
  --paper: #fffdfa;
  --ink: #2a1c14;
  --muted: #7a6a5d;
  --line: #eadfd2;
  --maroon: #8a1c25;
  --maroon-2: #b4232f;
  --gold: #e0a526;
  --gold-soft: #fbefd2;
  --wa: #1f8f4e;
  --wa-soft: #e1f3e8;
  --ok: #15784a;
  --seen: #1d7fd6;
  --seen-soft: #e3f0fc;
  --warn: #9a5b00;
  --warn-soft: #fdf0d6;
  --bad: #b42318;
  --bad-soft: #fde6e3;
  --guj: 'Noto Sans Gujarati', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--guj); }
body.locked { overflow: hidden; }
.iv { max-width: 1240px; margin: 0 auto; padding: 14px max(16px, env(safe-area-inset-left, 0px)) 70px max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 16px; }
h1, h2, h3 { margin: 0; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.small { gap: 8px; font-size: 0.88rem; }
.center { text-align: center; padding: 40px 16px; }

/* header */
.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo { font-size: 1.75rem; font-weight: 800; color: var(--maroon); line-height: 1; }
.top select { font: 700 1rem var(--guj); padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.ev-title { font-size: 1.05rem; }
.live { display: inline-flex; gap: 7px; align-items: center; font-size: 0.85rem; font-weight: 700; color: var(--wa); background: var(--wa-soft); border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--wa); animation: pulse 1.8s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 143, 78, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(31, 143, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 143, 78, 0); } }

/* buttons, pills */
.btn { font: 700 1rem/1.2 var(--guj); border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 11px; padding: 9px 15px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; transition: transform 0.12s, box-shadow 0.12s, background 0.12s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(60, 30, 10, 0.12); }
.btn:active:not(:disabled) { transform: none; box-shadow: none; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.ghost { color: var(--muted); }
.btn.sm { padding: 6px 11px; font-size: 0.9rem; }
.btn.big { padding: 13px 18px; font-size: 1.1rem; }
.linkbtn { font: inherit; background: none; border: 0; color: var(--maroon); font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; }
.btn:focus-visible, .opt:focus-visible, .tab:focus-visible, .chip:focus-visible, .tile:focus-visible, .kpi:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 0.84rem; font-weight: 700; background: #f1e9df; color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--wa-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.seen { background: var(--seen-soft); color: var(--seen); }
.pulse-soft { animation: soft 2.2s ease-in-out infinite; }
@keyframes soft { 50% { background: #fbe1a8; } }
.seen { color: var(--seen); font-weight: 800; }
.err { color: var(--bad); font-weight: 600; margin: 0; }

/* hero: the whole invitation at a glance */
.hero { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; background: linear-gradient(120deg, var(--maroon), var(--maroon-2)); color: #fff; border-radius: 20px; padding: 18px 22px; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 120, 0.35), transparent 70%); pointer-events: none; }
.ring { --p: 0; width: 136px; height: 136px; border-radius: 50%; background: conic-gradient(#ffd779 calc(var(--p) * 1%), rgba(255, 255, 255, 0.18) 0); display: grid; place-items: center; transition: background 0.6s; }
.ring > div { width: 108px; height: 108px; border-radius: 50%; background: var(--maroon); display: grid; place-items: center; text-align: center; line-height: 1.15; }
.ring b { font-size: 2rem; }
.ring small { font-size: 0.8rem; opacity: 0.9; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 10px; position: relative; z-index: 1; }
.kpi { font: inherit; color: inherit; text-align: left; background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 13px; padding: 9px 12px; }
button.kpi { cursor: pointer; }
.kpi b { display: block; font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi small { opacity: 0.92; font-weight: 600; font-size: 0.85rem; }
.kpi.alert { background: #ffd779; color: #4a2a00; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-2px); } }

/* panels */
.two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; min-width: 0; align-content: start; }
.panel h3 { font-size: 1.05rem; }
.warnbox { background: var(--warn-soft); border-color: #e9c77d; font-weight: 600; }
.qr-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.qr { width: 230px; height: 230px; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 6px; }
.qr.wait { display: grid; place-items: center; color: var(--muted); }
.steps { margin: 0; padding-left: 1.3rem; display: grid; gap: 6px; font-size: 1.05rem; }
.job { border-top: 1px dashed var(--line); padding-top: 10px; display: grid; gap: 6px; }
.bar { height: 10px; border-radius: 999px; background: #efe6dc; overflow: hidden; }
.bar.slim { height: 7px; max-width: 240px; }
.bar i { display: block; height: 100%; background: var(--wa); transition: width 0.6s; }
.bar.moving i { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 75%, transparent 75%); background-size: 22px 22px; animation: stripes 1s linear infinite; }
@keyframes stripes { to { background-position: 22px 0; } }
.alertbar { display: flex; gap: 10px; align-items: center; background: var(--warn-soft); border: 1px solid #ebc37a; border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.next { display: flex; gap: 12px; align-items: center; background: var(--gold-soft); border: 1.5px dashed var(--gold); border-radius: 14px; padding: 12px; }
.next .nm { display: block; font-size: 1.15rem; }
.next small { display: block; }
.allsent { background: var(--wa-soft); color: var(--ok); border-radius: 12px; padding: 12px; font-weight: 800; text-align: center; font-size: 1.1rem; }
.av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 1.15rem; flex: none; }

/* group tiles */
.sect { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sect h2 { font-size: 1.2rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tile { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; display: grid; gap: 9px; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(60, 30, 10, 0.1); }
.tile.on { border-color: var(--maroon); box-shadow: inset 0 0 0 2px var(--maroon); }
.tile.done { background: linear-gradient(180deg, #f3fbf6, var(--paper)); }
.tile-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tile .n { font-size: 1.08rem; }
.ribbon { position: absolute; top: 12px; right: -30px; transform: rotate(35deg); background: var(--wa); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 2px 32px; }
.mini { --p: 0; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--wa) calc(var(--p) * 1%), var(--line) 0); display: grid; place-items: center; flex: none; margin-right: 18px; }
.tile:not(.done) .mini { margin-right: 0; }
.mini span { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font: 700 0.72rem var(--mono); }
.stack { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: var(--line); }
.stack i { display: block; height: 100%; transition: width 0.6s; }
.s-seen { background: var(--seen); }
.s-sent { background: var(--wa); }
.tnums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; font-size: 0.8rem; color: var(--muted); }
.tnums b { display: block; font-size: 1.08rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.tnums .red, .tnums .red b { color: var(--maroon); }
.tnums .blue, .tnums .blue b { color: var(--seen); }

/* tabs, list */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tab { font: 700 1rem var(--guj); border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 12px; padding: 8px 14px; cursor: pointer; }
.tab span { font-weight: 600; color: var(--muted); margin-left: 4px; }
.tab.on { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.tab.on span { color: #ffdfe2; }
.search { flex: 1; min-width: 220px; font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--ink); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { font: 600 0.92rem var(--guj); border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.chip span { color: var(--muted); font-weight: 500; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.on span { color: #ddd; }
.filterline { margin: 0; color: var(--muted); }
.main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.cards { display: grid; gap: 10px; min-width: 0; }
.gc { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; grid-template-columns: 24px auto minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.7fr) auto; gap: 14px; align-items: center; transition: border-color 0.15s, box-shadow 0.15s; }
.gc.ticked { border-color: var(--wa); box-shadow: 0 0 0 2px var(--wa-soft); }
.tick, .tickall input { width: 22px; height: 22px; accent-color: var(--wa); cursor: pointer; margin: 0; }
.tick-sp { width: 22px; }
.tickall { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-weight: 700; }
.cb-wrap { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.pill.q { background: var(--seen-soft); color: var(--seen); }
/* The bar at the bottom: ticked guests, cards being made. */
.sendbar { position: sticky; bottom: max(10px, env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 16px; box-shadow: 0 12px 30px rgba(42, 28, 20, 0.3); }
.sendbar .muted { color: #d9cbbd; }
.sendbar .bar { min-width: 140px; }
.btn.ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
/* Call filters. */
.cf { display: grid; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.cfline { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; }
.cflabel { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.cf .linkbtn { justify-self: start; }
/* Earlier answers in the call box. */
.hist { display: grid; gap: 4px; background: var(--bg); border-radius: 12px; padding: 10px 12px; font-size: 0.9rem; }
.hist div { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.close-x { justify-self: end; }
.gc.enter { animation: rise 0.45s ease-out both; }
.gc.glow { animation: glow 3s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(29, 127, 214, 0); } 15% { box-shadow: 0 0 0 5px rgba(29, 127, 214, 0.35); background: var(--seen-soft); } 100% { box-shadow: 0 0 0 0 rgba(29, 127, 214, 0); } }
.gc .who b { display: block; font-size: 1.1rem; }
.newtag { display: inline-block; background: var(--gold); color: #2a1c14; font-size: 0.72rem; font-weight: 800; border-radius: 6px; padding: 0 6px; margin-left: 6px; vertical-align: middle; animation: soft 2.2s ease-in-out infinite; }
.state { display: grid; gap: 6px; min-width: 0; }
.track { display: flex; align-items: flex-start; }
.track .d { display: grid; justify-items: center; gap: 2px; font-size: 0.7rem; color: var(--muted); min-width: 44px; }
.track .d i { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); }
.track .d.ok i { background: var(--wa); border-color: var(--wa); }
.track .d.seen i { background: var(--seen); border-color: var(--seen); }
.track .d.call i { background: var(--gold); border-color: var(--gold); }
.track .ln { flex: 1; height: 2px; background: var(--line); min-width: 8px; margin-top: 7px; }
.track .ln.ok { background: var(--wa); }
.acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.empty { text-align: center; color: var(--muted); padding: 24px; background: var(--paper); border: 1px dashed var(--line); border-radius: 16px; }
.feed { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 10px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.feed h3 { font-size: 1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fi { display: grid; grid-template-columns: auto 1fr; gap: 9px; font-size: 0.9rem; }
.fi small { display: block; color: var(--muted); }
.fi .ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 0.9rem; }
.ic.gold { background: var(--gold-soft); }
.ic.wa { background: var(--wa-soft); }
.ic.seen { background: var(--seen-soft); }
.ic.warn { background: var(--warn-soft); }

@media (max-width: 1000px) {
  .two, .main { grid-template-columns: 1fr; }
  .feed { position: static; max-height: none; }
  .gc { grid-template-columns: 24px auto minmax(0, 1fr) auto; }
  .gc .state, .gc .acts { grid-column: 1 / -1; }
  .acts { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .hero { grid-template-columns: 1fr; justify-items: center; }
  .gc .num { grid-column: 3 / -1; }
  .cfline { grid-template-columns: 1fr; gap: 4px; }
}

/* The call box: the card that went on the left, the call on the right; no way out but an answer. */
.mback { position: fixed; inset: 0; background: rgba(28, 18, 12, 0.62); display: grid; place-items: center; padding: 16px; z-index: 50; overflow-y: auto; }
.mbox { width: 100%; max-width: 560px; background: var(--paper); border-radius: 20px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35); max-height: calc(100vh - 32px); overflow: hidden; }
.mbox.wide { max-width: 1000px; display: grid; grid-template-columns: 330px minmax(0, 1fr); }
.pv { background: linear-gradient(180deg, #f6ead9, #efe0c9); padding: 16px; display: grid; gap: 8px; align-content: start; border-right: 1px solid var(--line); overflow-y: auto; max-height: calc(100vh - 32px); }
.pvlabel { font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.pvimg { width: 100%; border-radius: 10px; border: 1px solid #e3c99f; box-shadow: 0 6px 18px rgba(80, 40, 10, 0.18); background: #fff6e6; }
.pvimg.wait { aspect-ratio: 3 / 4.2; display: grid; place-items: center; color: var(--muted); }
.fname { font-family: var(--mono); font-size: 0.8rem; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; word-break: break-all; }
.msg { background: #dcf8c6; color: #1f2a1a; border-radius: 10px 10px 10px 2px; padding: 9px 11px; font-size: 0.9rem; line-height: 1.5; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.msg .att { display: flex; gap: 6px; align-items: center; background: rgba(255, 255, 255, 0.7); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-size: 0.78rem; font-weight: 700; word-break: break-all; }
.side { padding: 18px 20px; display: grid; gap: 12px; overflow-y: auto; max-height: calc(100vh - 32px); align-content: start; }
.top-row { justify-content: space-between; align-items: flex-start; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.okline { color: var(--ok); font-weight: 800; }
.okline.blue { color: var(--seen); }
.name { font-size: 1.55rem; font-weight: 800; }
.center-text { text-align: center; margin: 0; }
.digits { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.digits em { font: 700 1.25rem var(--mono); color: var(--muted); font-style: normal; }
.dg { display: flex; gap: 5px; }
.dg i { font: 800 2.1rem/1 var(--mono); font-style: normal; width: 44px; height: 58px; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; }
.q { font-size: 1.1rem; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opt { font: 700 1rem var(--guj); text-align: left; border: 2px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 12px; padding: 11px 12px; cursor: pointer; display: flex; gap: 8px; align-items: center; transition: border-color 0.12s, background 0.12s; }
.opt b { font-size: 1.25rem; }
.opt:hover { border-color: #d5c6b5; }
.opt.on { border-color: var(--wa); background: var(--wa-soft); }
.opt.wide { width: 100%; }
.newnum { border: 2px dashed #b9d9c6; border-radius: 12px; padding: 8px; display: grid; gap: 8px; }
.newnum.open { border-color: var(--wa); }
.newnum .opt { border: 0; background: transparent; padding: 4px; }
.inp { font: 1.05rem var(--guj); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; flex: 1; min-width: 0; width: 100%; background: #fff; color: var(--ink); }
.newnum .row .inp { width: auto; font-family: var(--mono); }
.note { resize: vertical; }
.save { width: 100%; }
@media (max-width: 860px) {
  .mbox.wide { grid-template-columns: 1fr; overflow-y: auto; }
  .pv { border-right: 0; border-bottom: 1px solid var(--line); max-height: none; overflow: visible; }
  .pvimg { max-width: 260px; justify-self: center; }
  .side { max-height: none; overflow: visible; }
  .opts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .opts { grid-template-columns: 1fr; }
  .dg i { width: 30px; height: 44px; font-size: 1.5rem; }
}
.iv-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 700; z-index: 60; max-width: min(640px, calc(100vw - 32px)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); animation: rise 0.25s ease-out; }
.iv-toast.bad { background: var(--bad); }
@media (prefers-reduced-motion: no-preference) { .mbox.pop { animation: pop 0.22s ease-out; } }
@keyframes pop { from { transform: scale(0.96); opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.gc .num { white-space: nowrap; }

/* સર્વો / સજોડે before sending. */
.pr { display: block; color: #b3121c; font-weight: 700; font-size: 0.85rem; }
.segrow { margin-top: 4px; }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); }
.seg button { font: 700 0.88rem var(--guj); border: 0; background: transparent; color: var(--ink); padding: 3px 12px; cursor: pointer; }
.seg button + button { border-left: 1.5px solid var(--line); }
.seg button.on { background: var(--maroon); color: #fff; }
.seg button:disabled { cursor: default; opacity: 0.55; }
.seg button.on:disabled { opacity: 0.8; }
.seg button:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.seg.lock { padding: 3px 10px; font-size: 0.82rem; color: var(--muted); font-weight: 700; }

/* How many will come: the big total at the top (the number the kitchen needs). */
.bigcount { background: linear-gradient(120deg, #7d1820, #b4232f); color: #fff; border-radius: 22px; padding: 18px 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 24px; align-items: center; box-shadow: 0 0 0 3px var(--gold), 0 14px 30px rgba(122, 24, 32, 0.25); }
.bc-main b { display: block; font-size: 3.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.bc-main small { font-weight: 700; opacity: 0.92; }
.bc-parts { display: flex; gap: 10px; flex-wrap: wrap; }
.bc-parts > div { background: rgba(255, 255, 255, 0.13); border-radius: 14px; padding: 8px 12px; min-width: 104px; font-size: 0.85rem; }
.bc-parts b { display: block; font-size: 1.45rem; }
.bc-parts .est { background: rgba(255, 214, 120, 0.22); }
.bc-parts .max { background: rgba(255, 255, 255, 0.24); box-shadow: inset 0 0 0 2px rgba(255, 214, 120, 0.7); }
.bc-bar { grid-column: 1 / -1; height: 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.18); display: flex; overflow: hidden; }
.bc-bar i { display: block; height: 100%; background: #fff; transition: width 0.6s ease; }
.bc-bar i.m { background: #ffd27a; }
.bc-bar i.e { background: rgba(255, 210, 122, 0.45); }
.tcount { font-size: 0.9rem; color: var(--maroon); font-weight: 700; }
.btnlike { border: 0; cursor: pointer; font: inherit; font-size: 0.84rem; font-weight: 700; }
.btnlike:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* The count box. */
.mbox.count { max-width: 520px; padding: 18px 20px; display: grid; gap: 12px; overflow-y: auto; }
.st3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pad { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pad .pm { width: 58px; height: 58px; border-radius: 14px; border: 2px solid var(--line); background: var(--paper); font: 800 1.8rem var(--guj); cursor: pointer; color: var(--ink); }
.pad .pm.sm { width: 40px; height: 40px; font-size: 1.3rem; }
.pad .pv { min-width: 100px; height: 72px; border-radius: 14px; border: 3px solid var(--maroon); display: inline-flex; align-items: center; justify-content: center; font: 800 2.6rem/1 var(--guj); padding-bottom: 0.22em; box-sizing: border-box; }
.pad.small { justify-content: flex-start; font-weight: 700; }
.pad.small b { font-size: 1.4rem; min-width: 30px; text-align: center; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.quick button { font: 700 1rem var(--guj); border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 4px 14px; cursor: pointer; }
.quick button.sug { border-color: var(--gold); background: var(--gold-soft); }
.quick button.on { background: var(--maroon); border-color: var(--maroon); color: #fff; }
/* The same name or number twice. */
.dupalert { background: var(--bad-soft); border: 1px solid #f3c2bc; border-radius: 16px; padding: 12px 14px; display: grid; gap: 10px; }
.dupalert > .row b { color: var(--bad); font-size: 1.05rem; }
.dup-pair { background: var(--paper); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.dup-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dup-g { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; display: grid; }
.pill.dup { white-space: normal; }
@media (max-width: 620px) { .bigcount { grid-template-columns: 1fr; } .dup-two { grid-template-columns: 1fr; } }

/* Call box: how many will come (everything centred), and "card not received → send again". */
.ccount { border: 2px solid var(--gold); background: var(--gold-soft); border-radius: 14px; padding: 10px 12px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.ccount.touched { box-shadow: 0 0 0 3px rgba(224, 165, 38, 0.25); }
.cc-head { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.cc-body { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.cc-grp { display: flex; gap: 8px; align-items: center; }
.cc-sep { width: 1px; height: 34px; background: #e6c97e; }
.cc-hint { display: block; }
.chipbtn { font: 700 0.88rem var(--guj); border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 10px; padding: 3px 10px; cursor: pointer; }
.chipbtn.on { background: var(--wa); border-color: var(--wa); color: #fff; }
.pm.sm, .pm.xs { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; border: 2px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; font-family: var(--guj); font-weight: 800; }
.pm.sm { width: 42px; height: 42px; border-radius: 11px; font-size: 1.3rem; }
.pm.xs { width: 32px; height: 32px; border-radius: 9px; font-size: 1.05rem; }
/* The number itself: a box with the digit truly in the middle (Gujarati digits sit low with the normal line height). */
.cnum { min-width: 64px; height: 48px; border-radius: 11px; border: 3px solid var(--maroon); background: var(--paper); display: inline-flex; align-items: center; justify-content: center; font: 800 1.7rem/1 var(--guj); padding-bottom: 0.22em; box-sizing: border-box; }
.cnum.xs { min-width: 34px; height: 32px; border-width: 0; background: transparent; font-size: 1.2rem; }
.resend { border: 2px dashed var(--seen); background: var(--seen-soft); border-radius: 12px; padding: 8px 12px; }
.resend .row { gap: 10px; justify-content: center; }
.chipbtn:focus-visible, .pm:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Laptop screens (768 px high or less): the whole call box fits without scrolling. */
@media (max-height: 860px) and (min-width: 861px) {
  .side { padding: 12px 18px; gap: 8px; }
  .name { font-size: 1.3rem; }
  .center-text.muted { display: none; }
  .dg i { width: 36px; height: 46px; font-size: 1.65rem; border-radius: 8px; }
  .digits { gap: 10px; }
  .opts { gap: 6px; }
  .opt { padding: 7px 10px; font-size: 0.95rem; }
  .opt b { font-size: 1.1rem; }
  .q { font-size: 1rem; }
  .ccount { padding: 7px 10px; gap: 6px; }
  .cnum { height: 42px; min-width: 56px; font-size: 1.5rem; }
  .pm.sm { width: 38px; height: 38px; }
  .cc-hint { font-size: 0.78rem; }
  .newnum { padding: 4px 8px; }
  .note { min-height: 0; height: 40px; }
  .hist { max-height: 72px; overflow-y: auto; }
  .save { padding-top: 9px; padding-bottom: 9px; }
  .pvimg { max-height: 46vh; object-fit: contain; }
}

/* The number to dial: the first digit jumbo, each next one a little smaller (--s set per digit), all centred on one line. */
.digits .dg { align-items: center; }
.digits .dg i { width: calc(44px * var(--s, 1)); height: calc(58px * var(--s, 1)); font-size: calc(2.1rem * var(--s, 1)); border-width: calc(2.5px * var(--s, 1)); }
@media (max-height: 860px) and (min-width: 861px) {
  .digits .dg i { width: calc(38px * var(--s, 1)); height: calc(48px * var(--s, 1)); font-size: calc(1.75rem * var(--s, 1)); }
}
@media (max-width: 620px) {
  .digits .dg i { width: calc(30px * var(--s, 1)); height: calc(42px * var(--s, 1)); font-size: calc(1.45rem * var(--s, 1)); }
}
/* When the card went, in the call box (guests ask "when did you send it?"). */
.sentinfo { background: var(--wa-soft); border-radius: 12px; padding: 8px 12px; display: grid; gap: 2px; font-size: 0.95rem; }
.sentinfo small { display: block; font-size: 0.82rem; }
.sentinfo .seen { color: var(--seen); font-weight: 700; }
/* The number to dial: the first five small (much the same for everyone), the last five jumbo. */
.digits .dg i.lo { color: var(--muted); border-color: #b9aa9c; }
@media (max-height: 860px) and (min-width: 861px) { .sentinfo { padding: 5px 10px; font-size: 0.88rem; } }
@media (max-height: 860px) and (min-width: 861px) {
  .cc-hint { display: none; }
  .digits .dg i.hi { --s: 1.22 !important; }
  .top-row .name { line-height: 1.2; }
}

/* WhatsApp profile photo: on every card, big in the call box, tap = full size */
.av { overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.has-ph { background: var(--line) !important; }
.chead { display: flex; gap: 16px; align-items: stretch; }
.chead-r { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cphoto { flex: none; display: flex; align-items: center; }
.bigav { padding: 0; border: 0; background: none; border-radius: 50%; cursor: zoom-in; }
.bigav:disabled { cursor: default; }
.bigav:focus-visible { outline: 3px solid var(--wa, #1f8a4c); outline-offset: 3px; }
.av.xl { width: 168px; height: 168px; font-size: 4rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.cphoto-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 2px; line-height: 1.3; }
.cphoto-t small { font-size: .78rem; }
.cphoto-t .linkbtn { font-size: .8rem; }
.zoom { position: fixed; inset: 0; z-index: 80; background: rgba(10, 6, 4, .88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: zoom-out; padding: 24px; color: #fff; }
.zoom img { max-width: min(92vw, 640px); max-height: 78vh; border-radius: 18px; object-fit: contain; }
.zoom b { font-size: 1.4rem; }
.zoom small { opacity: .75; }
@media (max-height: 860px) and (min-width: 861px) { .av.xl { width: 140px; height: 140px; font-size: 3.4rem; } }
@media (max-width: 600px) { .av.xl { width: 110px; height: 110px; font-size: 2.6rem; } .chead { gap: 10px; } }
/* Bigger photos on the guest cards too */
.gc .av, .next .av { width: 64px; height: 64px; font-size: 1.5rem; }

/* Everything that looks tappable is tappable */
.gc[data-act="card"] { cursor: pointer; }
.gc[data-act="card"]:hover { border-color: var(--maroon, #9b1c24); box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.fi[data-act="feed"] { cursor: pointer; border-radius: 10px; padding: 4px; margin: -4px; }
.fi[data-act="feed"]:hover, .fi[data-act="feed"]:focus-visible { background: rgba(0, 0, 0, .04); outline: none; }
button.kpi:hover { background: rgba(255, 255, 255, 0.22); }
.searchline { font-size: .92rem; background: var(--paper); border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; margin: 0; }

/* After the function: attendance and summary */
.after { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 14px; }
.atile { font: inherit; text-align: left; cursor: pointer; display: grid; gap: 2px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 16px; padding: 14px 16px; }
.atile b { font-size: 1.8rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.atile small { color: var(--muted); }
.atile.on { border-color: var(--maroon, #9b1c24); box-shadow: 0 0 0 3px var(--bad-soft); }
.atile.back { place-content: center; font-weight: 700; border-style: dashed; }
.atile:hover { border-color: #d5c6b5; }
.attview { display: grid; gap: 10px; }
.btn.wide { width: 100%; justify-content: center; text-align: center; padding: 12px; font-size: 1.02rem; }
.btn.wide small { font-weight: 500; opacity: .8; }
.btn.yes { border: 2px solid var(--wa); color: var(--wa); background: var(--paper); font-weight: 800; }
.btn.no { border: 2px solid var(--bad); color: var(--bad); background: var(--paper); font-weight: 800; }
.btn.yes:hover { background: var(--wa-soft); }
.btn.no:hover { background: var(--bad-soft); }
.gc.att { grid-template-columns: 24px auto minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, 1.7fr); cursor: default; }
.att-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.past { align-self: stretch; width: 100%; box-sizing: border-box; background: var(--seen-soft, #e3f0fc); border-radius: 10px; padding: 6px 10px; font-size: .88rem; display: grid; gap: 2px; margin-top: 4px; }
.past.mini { font-size: .8rem; padding: 3px 8px; }
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.reasons .opt { font-size: .92rem; padding: 9px 10px; }
.opt.on.bad { border-color: var(--bad); background: var(--bad-soft); }
.summary { display: grid; gap: 12px; }
.summary h3 { margin: 6px 0 0; }
.skpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.skpis > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); }
.skpis b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.rbars { display: grid; gap: 6px; }
.rbar { font: inherit; display: grid; grid-template-columns: minmax(160px, 240px) 1fr 40px; gap: 10px; align-items: center; background: none; border: 0; padding: 2px 0; cursor: pointer; text-align: left; color: var(--ink); }
.rbar i { display: block; height: 12px; border-radius: 6px; background: var(--bad); }
.rbar b { text-align: right; font-variant-numeric: tabular-nums; }
.gtable { display: grid; gap: 6px; }
.gtable > div { display: flex; flex-wrap: wrap; gap: 14px; border-bottom: 1px solid var(--line); padding: 6px 0; }
.gtable b { min-width: 160px; }
.gtable .ok { color: var(--wa); }
.gtable .bad { color: var(--bad); }
@media (max-width: 760px) {
  .reasons { grid-template-columns: repeat(2, 1fr); }
  .skpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc.att { grid-template-columns: 24px auto minmax(0, 1fr); }
  .gc.att .num { display: none; }
  .gc.att .att-acts { grid-column: 1 / -1; justify-content: flex-start; }
}
.gc .who .past b { display: inline; font-size: inherit; }

/* Chandlo counter */
.gview { display: grid; gap: 14px; }
.gcols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
.gleft, .gright { display: grid; gap: 10px; align-content: start; min-width: 0; }
.search.big { font-size: 1.15rem; padding: 12px 14px; width: 100%; box-sizing: border-box; }
.gres-list { display: grid; gap: 6px; }
.gres { font: inherit; display: flex; gap: 10px; align-items: center; text-align: left; border: 1.5px solid var(--line); background: var(--paper); border-radius: 12px; padding: 8px 10px; cursor: pointer; color: var(--ink); }
.gres:hover, .gres:focus-visible { border-color: var(--gold); outline: none; }
.gres b { display: block; }
.gpick { display: flex; gap: 14px; align-items: flex-start; border: 2px solid var(--gold); background: var(--gold-soft); border-radius: 16px; padding: 12px; }
.gpick .grow { display: grid; gap: 4px; min-width: 0; }
.gpick .gname { font-size: 1.4rem; }
.gpick.new { display: grid; }
.pill.blue { background: var(--seen-soft); color: var(--seen); white-space: normal; }
.gamount { font: 800 2.6rem/1.2 ui-monospace, monospace; text-align: center; border: 3px solid var(--gold); background: var(--gold-soft); border-radius: 14px; padding: 6px; font-variant-numeric: tabular-nums; }
.gquick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gquick button, .gkeys button, .gmodes button { font: 800 1.05rem var(--guj); border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 12px; padding: 10px 6px; cursor: pointer; }
.gquick button.on { border-color: var(--gold); background: var(--gold-soft); }
.gkeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gkeys button { background: var(--bg); font-size: 1.2rem; padding: 8px 0; }
.gmodes { display: flex; flex-wrap: wrap; gap: 6px; }
.gmodes button { font-size: .95rem; padding: 7px 12px; }
.gmodes button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #2a1c14; font-weight: 800; }
.btn.gold:disabled { opacity: .5; }
.warnbox { background: var(--warn-soft); border: 1px solid var(--gold); border-radius: 12px; padding: 8px 12px; display: grid; gap: 6px; margin: 0; }
.glist { display: grid; gap: 4px; }
.gl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding: 6px 0; }
.gl.cancelled { opacity: .55; text-decoration: line-through; }
.gl .amt { font-weight: 800; font-variant-numeric: tabular-nums; }
.inp.sm { width: 110px; padding: 5px 8px; }
.rbar i.g { background: var(--gold); }
.cashcheck { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border: 1.5px dashed var(--gold); border-radius: 12px; padding: 10px 12px; }
/* Vyavhar chopdo box */
.mbox.wide2 { max-width: 780px; width: 100%; display: grid; gap: 12px; }
.lcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lcol { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; }
.lcol h4 { margin: 0; }
.lrow { display: flex; justify-content: space-between; gap: 8px; font-size: .93rem; align-items: baseline; }
.lrow.tot { border-top: 1px solid var(--line); padding-top: 6px; color: var(--muted); }
.givenform { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 760px) {
  .gcols, .lcols { grid-template-columns: 1fr; }
  .gamount { font-size: 2.1rem; }
}
.mbox.wide2 { padding: 18px 20px; box-sizing: border-box; }
.vtag { display: inline-block; font-size: .78rem; font-weight: 700; background: var(--wa-soft); color: var(--ok, #1f7a4a); border-radius: 99px; padding: 1px 9px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.gc .who b .vtag { font-size: .78rem; }

/* English → Gujarati list under the search boxes (gujaratiTyping.js) */
.tl-toggle { flex: none; font: inherit; font-weight: 800; font-size: 1rem; min-width: 44px; padding: 7px 10px; border-radius: 11px; border: 1.5px solid var(--line); background: var(--paper); color: var(--muted); cursor: pointer; }
.tl-toggle.on { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }
.tl-toggle:focus-visible, .tl-sug:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.gq-row { display: flex; gap: 8px; align-items: stretch; }
.gq-row .search.big { flex: 1; min-width: 0; }
.tl-drop { position: fixed; z-index: 60; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(40, 20, 10, 0.18); overflow: hidden; font-family: var(--guj); }
.tl-typed { font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 6px 14px; border-bottom: 1px solid var(--line); }
.tl-sug { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; font: inherit; font-size: 1.15rem; color: var(--ink); background: none; border: 0; padding: 8px 14px; cursor: pointer; }
.tl-sug.on { background: var(--gold-soft); }
.tl-sug.en { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--line); }
.tl-k { font-family: var(--mono); font-size: 11px; color: var(--muted); min-width: 12px; }
.tl-w { min-width: 0; overflow-wrap: anywhere; }
.tl-g { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ok); background: var(--wa-soft); padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.tl-e { margin-left: auto; font-size: 11px; }

/* Sign in (this site's own login) */
.login { max-width: 360px; margin: 8vh auto; display: grid; gap: 12px; text-align: center; }
.login-logo { font-size: 44px; line-height: 1; }
.login h1 { margin: 0; color: var(--maroon); }
.login-f { display: grid; gap: 4px; text-align: left; font-weight: 700; font-size: 0.92rem; }
.login-f .inp { font-size: 1.05rem; padding: 11px 12px; }
.login .err { margin: 0; color: var(--bad); font-weight: 700; }
.login .small { margin: -6px 0 4px; font-size: 0.8rem; }
.login .btn.wide { width: 100%; justify-content: center; }