/* Layout: phone-first. Big pictorial buttons, one scrolling screen at a time, 4-icon bottom bar. Status is a 5-step picture strip on every card. */
:root{
  --bg:#f3f6ee; --surface:#ffffff; --surface2:#e9efe2; --fg:#172218; --muted:#5b6b5e; --line:#cfd9c9;
  --accent:#0f9a22; --accent-ink:#ffffff; --accent-soft:#e1f5e2;
  --earth:#b56a12; --earth-soft:#f8e6cc; --danger:#b62f2f; --danger-soft:#f7dada; --info:#215c9c; --info-soft:#dbe7f6;
  --done:#1f7a3a; --wait:#b56a12;
  --font:"Noto Sans","Noto Sans Telugu","Noto Sans Devanagari","Noto Sans Kannada",system-ui,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --r:14px; --shadow:0 2px 6px rgba(20,40,25,.08);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#101510; --surface:#1a211b; --surface2:#242d25; --fg:#e9eee7; --muted:#9fae9f; --line:#334035;
  --accent:#3ddc55; --accent-ink:#0b140d; --accent-soft:#1a3320; --earth:#e6a64f; --earth-soft:#3b2d16; --danger:#f08181; --danger-soft:#41201f; --info:#82b4ec; --info-soft:#1c2d44;
  --done:#5fc374; --wait:#e6a64f; --shadow:0 2px 6px rgba(0,0,0,.45); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#101510; --surface:#1a211b; --surface2:#242d25; --fg:#e9eee7; --muted:#9fae9f; --line:#334035;
  --accent:#3ddc55; --accent-ink:#0b140d; --accent-soft:#1a3320; --earth:#e6a64f; --earth-soft:#3b2d16; --danger:#f08181; --danger-soft:#41201f; --info:#82b4ec; --info-soft:#1c2d44;
  --done:#5fc374; --wait:#e6a64f; --shadow:0 2px 6px rgba(0,0,0,.45); color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.4;margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.2}
h1{font-size:1.1rem;font-weight:700}
h2{font-size:1.25rem;font-weight:700}
h3{font-size:1rem;font-weight:700}
.money{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.big{font-size:1.4rem}
.hidden{display:none!important}

/* shell */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--surface);border-bottom:1px solid var(--line);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:8px;display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.brand .mark{width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:1.2rem;flex:none}
.brand .t div:last-child{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{border:1px solid var(--line);background:var(--surface);border-radius:12px;width:44px;height:44px;display:grid;place-items:center;font-size:1.3rem;cursor:pointer;flex:none}
.iconbtn.on{background:var(--accent-soft);border-color:var(--accent)}
.langsel{border:1px solid var(--line);background:var(--surface);border-radius:12px;height:44px;padding:0 8px;font-weight:700;cursor:pointer}
main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 100px;max-width:760px;margin:0 auto}
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:9;background:var(--surface);border-top:1px solid var(--line);display:flex;padding-left:max(6px,env(safe-area-inset-left,0px));padding-right:max(6px,env(safe-area-inset-right,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
nav.tabs a{flex:1;text-align:center;padding:8px 2px 6px;text-decoration:none;color:var(--muted);font-size:.72rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
nav.tabs a .ni{font-size:1.5rem;line-height:1}
nav.tabs a.on{color:var(--accent)}
nav.tabs a.on .ni{transform:scale(1.1)}
nav.tabs a .badge{position:absolute;top:4px;right:calc(50% - 24px);background:var(--danger);color:#fff;font-size:.66rem;border-radius:999px;padding:1px 6px;min-width:18px}

/* big buttons */
.bigbtn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;box-shadow:var(--shadow);min-height:84px}
.bigbtn .bi{font-size:2.2rem;line-height:1;width:52px;text-align:center;flex:none}
.bigbtn .bt{flex:1;min-width:0}
.bigbtn .bt b{display:block;font-size:1.15rem}
.bigbtn .bt span{color:var(--muted);font-size:.85rem}
.bigbtn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.bigbtn.pri .bt span{color:var(--accent-ink);opacity:.85}
.bigbtn.warn{background:var(--earth-soft);border-color:var(--earth)}
.bigbtn:disabled{opacity:.5;cursor:default}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;min-height:48px;font-size:1rem}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.dan{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.btn.warn{background:var(--earth);color:#fff;border-color:var(--earth)}
.btn.sm{padding:7px 12px;min-height:38px;font-size:.9rem}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.bigbtn:focus-visible,.card:focus-visible{outline:3px solid var(--info);outline-offset:2px}
.stack{display:flex;flex-direction:column;gap:12px}
.rowb{display:flex;gap:10px;flex-wrap:wrap}
.rowb>*{flex:1}
.sec{display:flex;align-items:center;gap:10px;margin:18px 0 8px}
.sec h2{flex:1}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-width:0;box-shadow:var(--shadow)}
.card.tap{cursor:pointer;width:100%;text-align:left}
.card.tap:hover{border-color:var(--accent)}
.ch{display:flex;align-items:center;gap:10px}
.ch .ci{font-size:1.8rem;line-height:1;width:44px;height:44px;border-radius:12px;background:var(--surface2);display:grid;place-items:center;flex:none}
.ch .ct{flex:1;min-width:0}
.ch .ct b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .ct span{color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ch .amt{font-family:var(--mono);font-weight:700;font-size:1.15rem;flex:none}
.who{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);margin-top:6px}
.who img{width:22px;height:22px;border-radius:50%}
.steps{display:flex;align-items:center;margin-top:10px}
.step{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;width:52px}
.step .d{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1.05rem;background:var(--surface2);border:2px solid var(--line);color:var(--muted)}
.step .l{font-size:.6rem;color:var(--muted);text-align:center;line-height:1.1;white-space:nowrap}
.step.done .d{background:var(--accent-soft);border-color:var(--done);color:var(--fg)}
.step.now .d{background:var(--earth-soft);border-color:var(--wait);box-shadow:0 0 0 4px var(--earth-soft)}
.step.now .l{color:var(--earth);font-weight:700}
.step.bad .d{background:var(--danger-soft);border-color:var(--danger)}
.conn{flex:1;height:3px;background:var(--line);min-width:6px;margin-bottom:14px}
.conn.done{background:var(--done)}
.pill{display:inline-block;font-size:.72rem;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.pill.wait{background:var(--earth-soft);color:var(--earth)}
.pill.ok{background:var(--accent-soft);color:var(--accent)}
.pill.bad{background:var(--danger-soft);color:var(--danger)}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.grey{background:var(--surface2);color:var(--muted)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
.tile .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.4rem;font-weight:700}
.tile.accent{background:var(--accent-soft);border-color:transparent}
.tile.earth{background:var(--earth-soft);border-color:transparent}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.empty{text-align:center;color:var(--muted);padding:26px 10px;border:2px dashed var(--line);border-radius:var(--r)}
.empty .ei{font-size:2.4rem}

/* forms */
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.f label{font-weight:700;display:flex;align-items:center;gap:8px}
.f label .li{font-size:1.3rem}
.f input,.f select,.f textarea{width:100%;border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;font-size:1.05rem;min-height:50px}
.f textarea{min-height:80px;resize:vertical}
.f .hint{font-size:.82rem;color:var(--muted)}
.amtin{font-family:var(--mono);font-size:1.8rem!important;font-weight:700;text-align:center}
.quick{display:flex;gap:6px;flex-wrap:wrap}
.quick button{border:1px solid var(--line);background:var(--surface2);border-radius:999px;padding:6px 12px;cursor:pointer;font-weight:700;font-size:.9rem}
.icongrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.icongrid button{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:84px}
.icongrid button .gi{font-size:1.9rem;line-height:1}
.icongrid button .gl{font-size:.74rem;line-height:1.15;text-align:center;font-weight:600}
.icongrid button.on{border-color:var(--accent);background:var(--accent-soft)}
.seg{display:flex;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{flex:1;border:0;background:var(--surface);padding:12px 8px;font-weight:700;cursor:pointer;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.9rem}
.seg button .si{font-size:1.4rem}
.seg button.on{background:var(--accent);color:var(--accent-ink)}
.seg button:disabled{opacity:.45}
.filebtn{display:flex;align-items:center;gap:12px;border:2px dashed var(--line);border-radius:12px;padding:12px;cursor:pointer;background:var(--surface);min-height:64px}
.filebtn .fi{font-size:1.8rem}
.filebtn input{display:none}
.filebtn.has{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
.preview{width:100%;max-height:220px;object-fit:contain;border-radius:12px;border:1px solid var(--line);background:var(--surface2)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs img{width:92px;height:92px;object-fit:cover;border-radius:12px;border:1px solid var(--line);cursor:pointer}
.upi{background:var(--surface2);border-radius:12px;padding:12px;font-family:var(--mono);font-size:1rem;overflow-wrap:anywhere;display:flex;align-items:center;gap:10px}
.upi span{flex:1}
.alert{border-radius:12px;padding:12px 14px;font-size:.95rem;display:flex;gap:10px;align-items:flex-start}
.alert .ai{font-size:1.4rem;line-height:1}
.alert.warn{background:var(--earth-soft);color:var(--earth)}
.alert.ok{background:var(--accent-soft);color:var(--accent)}
.alert.err{background:var(--danger-soft);color:var(--danger)}
.alert.info{background:var(--info-soft);color:var(--info)}
.voice{border:2px solid var(--line);border-radius:var(--r);padding:12px;background:var(--surface)}
.voice .vb{display:flex;align-items:center;gap:12px}
.mic{width:64px;height:64px;border-radius:50%;background:var(--danger);color:#fff;border:0;font-size:1.8rem;cursor:pointer;flex:none;display:grid;place-items:center}
.mic.rec{animation:pulse 1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(182,47,47,.5)}100%{box-shadow:0 0 0 16px rgba(182,47,47,0)}}
@media(prefers-reduced-motion:reduce){.mic.rec{animation:none;outline:4px solid var(--danger)}}
.voice audio{width:100%;margin-top:8px}
.transcript{background:var(--surface2);border-radius:10px;padding:10px;margin-top:8px;font-size:.95rem;white-space:pre-wrap}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.95rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.hist{font-size:.85rem;color:var(--muted);border-left:3px solid var(--line);padding-left:10px;display:flex;flex-direction:column;gap:4px}
.hist b{color:var(--fg)}
.qr{width:200px;height:200px;max-width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;padding:8px;display:block;margin:0 auto}
.qrcan{display:block;margin:0 auto;background:#fff;padding:8px;border-radius:12px;border:1px solid var(--line)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters select{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 10px;font-size:.95rem;max-width:100%}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chips button{border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-weight:700;cursor:pointer;color:var(--muted);font-size:.9rem}
.chips button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
td.r,th.r{text-align:right}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.chart{position:relative;height:230px}
.bar{height:10px;background:var(--surface2);border-radius:5px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.modal-bg{position:fixed;inset:0;background:rgba(10,20,12,.55);z-index:20;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:700px){.modal-bg{align-items:center}}
.modal{background:var(--surface);width:100%;max-width:640px;max-height:94vh;overflow:auto;border-radius:20px 20px 0 0;padding:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
@media(min-width:700px){.modal{border-radius:20px}}
.modal .mh{display:flex;align-items:center;gap:10px;margin-bottom:12px;position:sticky;top:-16px;background:var(--surface);padding:6px 0;z-index:1}
.modal .mh h2{flex:1}
.x{border:0;background:var(--surface2);border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:1.3rem}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:999px;z-index:30;font-size:1rem;box-shadow:var(--shadow);max-width:90vw;text-align:center}
.loading{display:flex;align-items:center;gap:8px;color:var(--muted);padding:24px;justify-content:center}
.flow-legend{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-bottom:10px}
.flow-legend span{background:var(--surface2);border-radius:999px;padding:3px 8px}
.help{display:flex;gap:10px;align-items:center;background:var(--info-soft);color:var(--info);border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:.95rem}
.help button{margin-left:auto}
@media(prefers-reduced-motion:no-preference){.modal{animation:up .18s ease-out}@keyframes up{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}}

/* ───── professional shell: solid brand header, soft list surface, floating action button ───── */
:root{--brand:#1f2127;--brand-deep:#15171c;--brand-ink:#ffffff;--brand-soft:#e1f5e2;--green:#00a800;--font-display:"Poppins","Noto Sans",system-ui,sans-serif}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--brand:#15171c;--brand-deep:#0d0e12;--brand-ink:#eaf5ec;--brand-soft:#1a3320}}
:root[data-theme="dark"]{--brand:#15171c;--brand-deep:#0d0e12;--brand-ink:#eaf5ec;--brand-soft:#1a3320}
body::before{background:var(--brand)}
.top{background:var(--brand);color:var(--brand-ink);border-bottom:0;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.top h1{color:var(--brand-ink);font-size:1rem;letter-spacing:.01em}
.top .brand .t div:last-child{color:var(--brand-ink);opacity:.75}
.top .brand .mark{background:rgba(255,255,255,.14);color:var(--brand-ink);border:1.5px solid rgba(255,255,255,.35)}
.top .iconbtn,.top .langsel{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:var(--brand-ink)}
.top .iconbtn:hover,.top .langsel:hover{background:rgba(255,255,255,.22)}
.top .langsel option{color:var(--fg);background:var(--surface)}
h2{letter-spacing:-.01em}
.sec h2{font-size:1.05rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;display:flex;align-items:center;gap:8px}
.sec h2 .ic{width:18px;height:18px}
.card{border-color:transparent;box-shadow:0 1px 3px rgba(20,40,25,.08),0 6px 18px -8px rgba(20,40,25,.18)}
.card.tap:active,.bigbtn:active,.btn:active,.icongrid button:active,nav.tabs a:active{transform:scale(.975)}
.card.tap,.bigbtn,.btn,.icongrid button,nav.tabs a{transition:transform .12s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease}
.card.tap:hover{box-shadow:0 2px 6px rgba(20,40,25,.1),0 12px 28px -10px rgba(20,40,25,.25);transform:translateY(-1px)}
.bigbtn{border-width:0;box-shadow:0 1px 3px rgba(20,40,25,.08),0 8px 20px -10px rgba(20,40,25,.3)}
.bigbtn.pri{background:linear-gradient(135deg,#12b22a,#0a8a1d);box-shadow:0 8px 22px -8px rgba(0,168,0,.55)}
.bigbtn .bi{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.14);display:grid;place-items:center}
.bigbtn:not(.pri) .bi{background:var(--accent-soft);color:var(--accent)}
.bigbtn.warn .bi{background:rgba(181,106,18,.15);color:var(--earth)}
.bigbtn .bi .ic{width:30px;height:30px}
.btn .ic{width:20px;height:20px}
.btn.sm .ic{width:17px;height:17px}
.ch .ci{background:var(--brand-soft);color:var(--accent);border-radius:14px;width:46px;height:46px}
.ch .ci .ic{width:26px;height:26px}
.ch .ct b{font-size:1rem}
.ch .amt{font-size:1.15rem;color:var(--fg)}
.tile{border-color:transparent;box-shadow:0 1px 3px rgba(20,40,25,.06)}
.tile .small .ic{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.help{background:var(--brand-soft);color:var(--fg);border-left:4px solid var(--accent)}
.help .ic{width:22px;height:22px;color:var(--accent);flex:none}
nav.tabs{box-shadow:0 -2px 10px rgba(0,0,0,.06)}
nav.tabs a{padding:8px 2px 7px}
nav.tabs a .ni{display:grid;place-items:center;width:52px;height:30px;border-radius:15px;transition:background .25s}
nav.tabs a.on .ni{background:var(--brand-soft)}
nav.tabs a .ni .ic{width:24px;height:24px}
.f label .li{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--surface2);color:var(--accent)}
.f label .li .ic{width:17px;height:17px}
.filebtn .fi{width:44px;height:44px;border-radius:12px;background:var(--surface2);display:grid;place-items:center;color:var(--accent);flex:none}
.filebtn .fi .ic{width:24px;height:24px}
.filebtn.has .fi{background:var(--accent);color:var(--accent-ink)}
.seg button .si{display:grid;place-items:center}
.seg button .si .ic{width:24px;height:24px}
.alert .ai{display:grid;place-items:center}
.alert .ai .ic{width:22px;height:22px}
.empty .ei{display:grid;place-items:center;color:var(--muted);margin-bottom:6px}
.empty .ei .ic{width:44px;height:44px;opacity:.7}
.icongrid button .gi{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface2);color:var(--accent)}
.icongrid button .gi .ic{width:24px;height:24px}
.icongrid button.on .gi{background:var(--accent);color:var(--accent-ink)}
.step .d{border-width:2px}
.step .d .ic{width:18px;height:18px}
.step.done .d{background:var(--done);border-color:var(--done);color:#fff}
.step.now .d{color:var(--earth)}
.step.bad .d{color:var(--danger)}
.mic{background:linear-gradient(135deg,#d64545,#b62f2f);box-shadow:0 6px 16px -6px rgba(182,47,47,.6)}
.mic .ic{width:30px;height:30px}
.iconbtn .ic{width:22px;height:22px}
.x{display:grid;place-items:center}
.pill{letter-spacing:.02em}
.ct .ic.ic-xs{width:13px;height:13px;vertical-align:-2px}
.fab{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(74px + env(safe-area-inset-bottom,0px));width:60px;height:60px;border-radius:30px;border:0;background:linear-gradient(135deg,#12b22a,#0a8a1d);color:#fff;box-shadow:0 10px 24px -6px rgba(0,168,0,.55);display:grid;place-items:center;cursor:pointer;z-index:8}
.fab .ic{width:30px;height:30px}
.fab:active{transform:scale(.92)}
@media(min-width:900px){.fab{bottom:28px}}

a.btn{text-decoration:none;color:inherit}
a.btn[href*='wa.me']{background:#e7f8ea;color:#128c3e;border-color:transparent}
:root[data-theme="dark"] a.btn[href*='wa.me']{background:#1d3a26;color:#7ad48f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) a.btn[href*='wa.me']{background:#1d3a26;color:#7ad48f}}
/* ───── icons ───── */
.ic{width:1.3em;height:1.3em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle;flex:none;overflow:visible}
.ic.ic-lg{width:1.8em;height:1.8em}
.ic .p2{opacity:.65}
@media(prefers-reduced-motion:no-preference){
  /* nav: bounce the active icon once */
  nav.tabs a.on .ic{animation:ic-pop .5s cubic-bezier(.34,1.56,.64,1)}
  @keyframes ic-pop{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
  /* current step: breathing ring */
  .step.now .d{animation:ring 1.8s ease-out infinite}
  @keyframes ring{0%{box-shadow:0 0 0 0 rgba(181,106,18,.45)}100%{box-shadow:0 0 0 12px rgba(181,106,18,0)}}
  /* check: draw the tick */
  .step.done .d .tick,.ok-tick .tick,.toast .tick{stroke-dasharray:14;stroke-dashoffset:14;animation:draw .5s .15s ease-out forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  /* cart rolls on big button hover / page load */
  .bigbtn.pri .ic{animation:cart-in .9s cubic-bezier(.34,1.3,.64,1)}
  .bigbtn:hover .w1,.bigbtn:hover .w2,.fab:hover .w1,.fab:hover .w2{animation:spin .6s linear infinite;transform-origin:center;transform-box:fill-box}
  @keyframes cart-in{0%{transform:translateX(-18px);opacity:0}100%{transform:none;opacity:1}}
  @keyframes spin{to{transform:rotate(360deg)}}
  /* rupee coin flip on pay buttons */
  .bigbtn .ic use[href="#i-rupee"],.bigbtn [data-x="pay"] .ic{transform-origin:center}
  .bigbtn:hover use[href="#i-rupee"]{animation:flip 1.2s ease-in-out infinite}
  @keyframes flip{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
  /* camera lens blink */
  .lens{transform-origin:center;transform-box:fill-box}
  .bigbtn:hover .lens,.filebtn:hover .lens{animation:blink .9s ease-in-out infinite}
  @keyframes blink{0%,100%{transform:scale(1)}50%{transform:scale(.72)}}
  /* mic sound waves & speaker waves */
  .mic.rec .p2,.iconbtn:hover .w1,.iconbtn:hover .w2{animation:wave 1s ease-in-out infinite}
  .iconbtn:hover .w2{animation-delay:.2s}
  @keyframes wave{0%,100%{opacity:.3}50%{opacity:1}}
  /* send plane */
  .bigbtn:hover .plane,.btn:hover .plane{animation:plane .8s ease-in-out infinite}
  @keyframes plane{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-2px)}}
  /* sparkles */
  .s1,.s2{transform-origin:center;transform-box:fill-box}
  .btn:hover .s1,.spark-anim .s1{animation:twinkle 1.4s ease-in-out infinite}
  .btn:hover .s2,.spark-anim .s2{animation:twinkle 1.4s .4s ease-in-out infinite}
  @keyframes twinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.4}}
  /* chart bars grow */
  .b1,.b2,.b3{transform-origin:bottom;transform-box:fill-box}
  nav.tabs a.on .b1{animation:grow .6s ease-out}nav.tabs a.on .b2{animation:grow .6s .1s ease-out}nav.tabs a.on .b3{animation:grow .6s .2s ease-out}
  @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  /* clock hand, flame, steam, QR scan line */
  .hand{transform-origin:12px 12px}.sec .hand,.pill .hand{animation:tick 4s linear infinite}
  @keyframes tick{to{transform:rotate(360deg)}}
  .fl{transform-origin:bottom;transform-box:fill-box}.ci:hover .fl,.gi .fl{animation:flicker 1.1s ease-in-out infinite}
  @keyframes flicker{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.93) scaleX(1.04)}}
  .steam{animation:wave 1.6s ease-in-out infinite}
  .scan{animation:scan 1.6s ease-in-out infinite}
  @keyframes scan{0%,100%{transform:translateY(-8px);opacity:.2}50%{transform:translateY(8px);opacity:1}}
  .fab{animation:float 3s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  /* cards enter */
  .stack>.card,.stack>.tile{animation:enter .35s ease-out both}
  .stack>*:nth-child(2){animation-delay:.05s}.stack>*:nth-child(3){animation-delay:.1s}.stack>*:nth-child(4){animation-delay:.15s}.stack>*:nth-child(5){animation-delay:.2s}
  @keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .bigbtn .bt b{transition:letter-spacing .2s}
  .toast{animation:toast-in .3s cubic-bezier(.34,1.56,.64,1)}
  @keyframes toast-in{from{transform:translate(-50%,16px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
}
.toast{display:flex;align-items:center;gap:8px;background:var(--brand-deep);color:#fff}
.toast .ic{width:20px;height:20px}
/* success overlay */
.ok-bg{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(15,79,38,.92);color:#fff;text-align:center}
.ok-tick{width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;margin:0 auto 14px}
.ok-tick .ic{width:72px;height:72px;stroke-width:1.6}
.ok-bg b{font-size:1.4rem;display:block}
@media(prefers-reduced-motion:no-preference){.ok-bg{animation:fade .25s ease-out}.ok-tick{animation:ic-pop .5s cubic-bezier(.34,1.56,.64,1)}@keyframes fade{from{opacity:0}to{opacity:1}}}

.top .chip{background:rgba(255,255,255,.14);color:var(--brand-ink);border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:600;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:480px){.top .chip{display:none}}

/* ───── brand header & login ───── */
.top{gap:12px}
.top .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0;flex:1;overflow:hidden}
.top .wordmark{height:30px;width:auto;display:block}
.top .apptag{font-family:var(--font-display);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-ink);opacity:.7;border-left:1px solid rgba(255,255,255,.25);padding-left:10px;line-height:1;white-space:nowrap}
@media(max-width:560px){.top .apptag{display:none}.top .wordmark{height:26px}}
h1,h2,h3,.bigbtn .bt b,.tile .v,.login-card h2{font-family:var(--font-display)}
.sec h2{font-family:var(--font)}
.login-wrap{min-height:calc(100vh - 140px);display:grid;place-items:center;padding:12px 0}
.login-card{position:relative;width:100%;max-width:440px;background:var(--surface);border-radius:22px;padding:28px 24px 22px;box-shadow:0 2px 6px rgba(20,40,25,.06),0 24px 48px -24px rgba(20,40,25,.35);border:1px solid var(--line)}
.login-card .lg{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px;text-align:center}
.login-card .lg img{width:84px;height:84px;border-radius:50%;box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
.login-card .lg .wm{height:34px;width:auto}
.login-card .lg p{margin:0;color:var(--muted);font-size:.92rem;max-width:34ch}
.login-card h2{font-size:1.35rem;margin-top:4px}
.login-card .f input{font-size:1.1rem;padding:14px 16px}
.login-card .amtin{letter-spacing:.35em;font-size:2rem!important}
.login-foot{margin-top:14px;text-align:center;font-size:.78rem;color:var(--muted)}
.login-foot span{display:inline-flex;align-items:center;gap:6px}
.login-foot .ic{width:14px;height:14px}
body{background:radial-gradient(1200px 500px at 50% -200px,rgba(0,168,0,.10),transparent 60%),var(--bg)}
.empty .ei img{width:56px;height:56px;border-radius:50%;opacity:.9}
nav.tabs a.on .ni{background:var(--accent-soft)}