/* Ilm-e-rah app — purana Ilm-e-rah theme: gehra hara, hara, sunehra, cream. Naam (sage/peach/rose) purane hain, rang naye.
   sage = sabak (hara), peach = namaz (sunehra), rose = aadat (gehra hara) */
:root {
    /* Halka, aankhon ko aaraam: safed/grey background, mulaayam hara, aur rang-birange halke accent */
    --bg: #F3F4F6; --card: #FFFFFF; --ink: #1F2937; --muted: #6B7280; --line: #E5E7EB;
    --deep: #0B6B50; --green: #16916B;
    --sage: #22A67B; --sage-d: #16916B; --sage-soft: #E7F6EF;
    --peach: #E3A73F; --peach-d: #B7811F; --peach-soft: #FDF1DC;
    --rose: #16916B; --rose-d: #0B6B50; --rose-soft: #E3F3EC;
    --gold: #E0AC45;
    --lav: #6D74E0; --lav-soft: #EEF0FD; --lav-line: #C9CDF7;
    --sky: #2F8FD0; --sky-soft: #E8F3FC;
    --pink: #D9637C; --pink-soft: #FCEDF0;
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1'%3E%3Cpath d='M28 4l7 17 17 7-17 7-7 17-7-17-17-7 17-7z'/%3E%3C/g%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg); color: var(--ink); font-family: 'Noto Sans Devanagari', sans-serif; font-size: 16px; line-height: 1.45; padding-bottom: 110px; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.wrap { max-width: 480px; margin: 0 auto; padding: 0 18px; }

/* Header */
.head { position: sticky; top: 0; z-index: 10; background: linear-gradient(140deg, var(--deep), var(--green)); background-image: var(--pattern), linear-gradient(140deg, #128A67, #16916B); }
.head .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.head h1 { font-family: 'Tiro Devanagari Hindi', serif; font-size: 25px; font-weight: 400; color: #FFFFFF; flex: 1; text-align: center; margin-left: 52px; }
.round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.round.gold { background: linear-gradient(135deg, #E9C065, #D9A63A); border: 0; color: #0A3324; }
.round svg { width: 22px; height: 22px; }
.acts { display: flex; gap: 8px; }

.card { background: var(--card); border: 1.5px solid var(--line); border-radius: 32px; padding: 22px; margin-top: 18px; }
.card h2 { font-family: 'Tiro Devanagari Hindi', serif; font-size: 23px; font-weight: 400; color: var(--deep); }
h3.sec { font-family: 'Tiro Devanagari Hindi', serif; font-size: 24px; font-weight: 400; color: var(--deep); margin: 28px 0 4px; }
.muted { color: var(--muted); }

/* Namaz ka waqt */
.pray { padding: 18px 20px; }
.pray .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pill { display: inline-block; background: var(--sage-soft); color: var(--sage-d); font-weight: 700; font-size: 13.5px; padding: 3px 12px; border-radius: 99px; }
.pray .next { margin-top: 10px; font-size: 15px; color: var(--muted); }
.pray .count { font-size: 38px; font-weight: 800; line-height: 1.1; letter-spacing: .5px; }
.times { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.times div { font-size: 13px; color: var(--muted); border-radius: 14px; padding: 4px 0; }
.times b { display: block; font-size: 14px; color: var(--ink); font-weight: 700; }
.times .on { background: var(--peach-soft); }
.times .on b { color: var(--peach-d); }
.btn { display: block; width: 100%; border: 0; border-radius: 99px; padding: 13px; font-size: 16px; font-weight: 700; background: var(--green); color: #fff; cursor: pointer; text-align: center; }
.btn.line { background: #fff; color: var(--sage-d); border: 1.5px solid var(--sage); }

/* Rings */
.rings { position: relative; width: 250px; height: 230px; margin: 4px auto 0; }
.rings svg { width: 250px; height: 250px; }
.rings .legend { position: absolute; left: 50%; bottom: 6px; transform: translateX(-12%); font-weight: 800; font-size: 19px; line-height: 1.25; }
.rings .legend div { display: flex; gap: 8px; align-items: center; }
.l-sage { color: var(--sage-d); } .l-peach { color: var(--peach-d); } .l-rose { color: var(--rose-d); }
.rings .legend small { font-size: 12px; font-weight: 600; opacity: .8; }

/* Aadat cards */
.habit { border-radius: 36px; padding: 20px; margin-top: 16px; color: #fff; position: relative; overflow: hidden; display: block; }
.habit.sage { background-image: var(--pattern), linear-gradient(140deg, #1B9C5A, #127C44); }
.habit.peach { background-image: var(--pattern), linear-gradient(140deg, #DDB04C, #B5841F); }
.habit.rose { background-image: var(--pattern), linear-gradient(140deg, #127C44, #0A3324); }
.habit .hd { display: flex; align-items: center; gap: 12px; }
.habit .ic { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.85); display: grid; place-items: center; flex: none; }
.habit .ic svg { width: 26px; height: 26px; }
.habit .ttl { font-size: 21px; font-weight: 800; flex: 1; text-shadow: 0 1px 2px rgba(0,0,0,.08); }
.habit .cnt { background: rgba(255,255,255,.9); color: var(--deep); font-weight: 800; padding: 3px 14px; border-radius: 99px; font-size: 16px; }
.habit .box { display: block; background: #fff; color: var(--ink); border-radius: 22px; padding: 14px 16px; margin-top: 14px; }
.habit .box b { font-size: 17px; display: block; line-height: 1.3; }
.habit .box small { color: var(--muted); font-size: 14px; }
.habit .gift { margin-top: 10px; font-size: 14px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }
.chip { background: rgba(255,255,255,.88); color: var(--ink); border: 0; border-radius: 16px; padding: 8px 2px 6px; font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; }
.chip i { display: block; font-style: normal; font-size: 18px; line-height: 1.2; }
.chip.ada { background: #fff; box-shadow: inset 0 0 0 2px var(--sage-d); color: var(--sage-d); }
.chip.qaza { background: #fff; box-shadow: inset 0 0 0 2px var(--peach-d); color: var(--peach-d); }
.habit .more { display: block; text-align: right; margin-top: 10px; font-weight: 700; font-size: 14px; }
.soon { opacity: .8; }

/* Tracker page */
.sum { display: flex; gap: 18px; align-items: center; }
.ring-sm { position: relative; width: 112px; height: 112px; flex: none; }
.ring-sm svg { width: 112px; height: 112px; transform: rotate(-90deg); }
.ring-sm .in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-sm .in b { font-size: 26px; font-weight: 800; line-height: 1; }
.ring-sm .in small { font-size: 12px; color: var(--muted); }
.kv { flex: 1; }
.kv div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 15.5px; }
.kv b { font-weight: 800; }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.nums b { display: block; font-size: 24px; font-weight: 800; }
.nums span { font-size: 13px; color: var(--muted); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-top: 12px; }
.week button { border: 0; background: none; cursor: pointer; padding: 4px 0; }
.week small { display: block; font-size: 12.5px; color: var(--muted); }
.week span { display: grid; place-items: center; width: 40px; height: 40px; margin: 4px auto 0; border-radius: 50%; font-weight: 700; font-size: 16px; }
.week .sel span { background: var(--sage-d); color: #fff; }
.week .full span { box-shadow: inset 0 0 0 2px var(--sage); }
.prow { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: 0; }
.prow .nm { flex: 1; }
.prow .nm b { font-size: 17px; }
.prow .nm small { display: block; color: var(--muted); font-size: 13px; }
.seg { display: flex; gap: 6px; }
.seg button { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 13px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg button.on-ada { background: var(--sage); border-color: var(--sage); color: #fff; }
.seg button.on-qaza { background: var(--peach); border-color: var(--peach); color: #fff; }
.per { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; gap: 4px; margin-top: 12px; }
.per .ring-sm { width: 58px; height: 58px; margin: 0 auto; }
.per .ring-sm svg { width: 58px; height: 58px; }
.per .ring-sm .in b { font-size: 14px; }
.per small { font-size: 13px; color: var(--muted); display: block; margin-top: 4px; }
.note { font-size: 13.5px; color: var(--muted); text-align: center; margin-top: 14px; }

/* Bottom nav (tairta hua) */
.nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100% - 24px); max-width: 456px;
       background: #fff; border: 1.5px solid var(--line); border-radius: 30px; display: flex; padding: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.06); z-index: 20; }
.nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; border-radius: 22px; color: #5F655F; font-size: 13.5px; }
.nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav a.on { background: var(--sage-soft); color: var(--sage-d); font-weight: 700; }

/* Settings sheet */
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: none; z-index: 40; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 28px 28px 0 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); max-width: 480px; margin: 0 auto; transform: translateY(110%); transition: transform .25s; z-index: 41; }
.sheet.show { transform: none; }
.sheet h2 { font-size: 21px; font-weight: 800; margin-bottom: 12px; }
.sheet label { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 6px; }
.sheet select { width: 100%; padding: 12px; border: 1.5px solid var(--line); border-radius: 14px; font: inherit; background: #fff; }
.adj { display: flex; gap: 8px; }
.adj button { flex: 1; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 10px; font-weight: 700; cursor: pointer; }
.adj button.on { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-d); }

/* ---------- Aadat tracker ---------- */
.now { background-image: var(--pattern), linear-gradient(140deg, var(--deep), var(--green)); color: #fff; border: 0; }
.now .lbl { font-size: 13px; color: #F6E3B0; font-weight: 700; letter-spacing: .3px; }
.now .big { font-family: 'Tiro Devanagari Hindi', serif; font-size: 22px; line-height: 1.3; margin-top: 4px; }
.now .row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.1); border-radius: 18px; padding: 10px 12px; margin-top: 10px; }
.now .row span { flex: 1; font-weight: 600; }
.now .row button { border: 0; border-radius: 99px; padding: 7px 14px; font-weight: 700; background: #F6E3B0; color: var(--deep); cursor: pointer; }
.hab { background: #fff; border: 1.5px solid var(--line); border-radius: 26px; padding: 16px; margin-top: 12px; }
.hab .top { display: flex; align-items: center; gap: 12px; }
.hab .nm { flex: 1; min-width: 0; cursor: pointer; }
.hab .nm b { display: block; font-size: 16.5px; line-height: 1.35; }
.hab .nm small { color: var(--muted); font-size: 13px; }
.lv { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 9px; border-radius: 99px; margin-right: 6px; }
.lv.easy { background: var(--sage-soft); color: var(--green); }
.lv.medium { background: var(--peach-soft); color: var(--peach-d); }
.lv.hard { background: #F3DADA; color: #A33A2E; }
.tick { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--line); background: #fff; font-size: 22px; color: transparent; cursor: pointer; flex: none; }
.tick.on { background: var(--green); border-color: var(--green); color: #fff; }
.bar { position: relative; height: 8px; background: var(--sage-soft); border-radius: 99px; margin: 16px 4px 8px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); border-radius: 99px; }
.bar em { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 2px solid var(--line); }
.bar em.hit { background: var(--gold); border-color: var(--gold); }
.ms { position: relative; height: 16px; margin: 0 4px; font-size: 11px; color: var(--muted); }
.ms span { position: absolute; transform: translateX(-50%); }
.more-box { display: none; border-top: 1px dashed var(--line); margin-top: 12px; padding-top: 12px; font-size: 14px; }
.hab.open .more-box { display: block; }
.dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 8px 0 12px; }
.dots span { aspect-ratio: 1; border-radius: 50%; background: var(--sage-soft); display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.dots span.on { background: var(--green); color: #fff; }
.dots span.ms-dot { box-shadow: inset 0 0 0 2px var(--gold); }
.why { color: #33403A; } .why small { color: var(--muted); display: block; margin-top: 2px; }
.mini { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mini button { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 7px 14px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.mini button.on { background: var(--sage-soft); border-color: var(--green); color: var(--green); }
.mini button.danger { color: #A33A2E; }
.empty { text-align: center; color: var(--muted); padding: 22px 10px; }

/* Picker */
.picker { position: fixed; inset: 0; background: var(--bg); z-index: 50; display: none; flex-direction: column; }
.picker.show { display: flex; }
.picker .ph { display: flex; align-items: center; padding: 16px 18px 6px; max-width: 480px; width: 100%; margin: 0 auto; }
.picker .ph h2 { flex: 1; font-family: 'Tiro Devanagari Hindi', serif; font-weight: 400; font-size: 25px; color: var(--deep); }
.picker .x { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-size: 20px; cursor: pointer; }
.picker .body { flex: 1; overflow-y: auto; max-width: 480px; width: 100%; margin: 0 auto; padding: 0 18px 120px; }
.tabs3 { display: flex; gap: 8px; margin: 10px 0 6px; }
.tabs3 button { flex: 1; border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 9px 4px; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; }
.tabs3 button.on { background: var(--green); border-color: var(--green); color: #fff; }
.pick { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 14px 16px; margin-top: 10px; cursor: pointer; }
.pick .tx { flex: 1; } .pick .tx b { display: block; font-size: 16px; line-height: 1.35; } .pick .tx small { color: var(--muted); font-size: 13px; }
.pick .cb { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #C9CFC9; flex: none; display: grid; place-items: center; color: #fff; font-size: 15px; }
.pick.sel { border-color: var(--green); background: var(--sage-soft); } .pick.sel .cb { background: var(--green); border-color: var(--green); }
.pick.have { opacity: .5; cursor: default; }
.picker .foot { position: fixed; left: 0; right: 0; bottom: 0; padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); max-width: 480px; margin: 0 auto; }

/* Milestone jashn */
.party { position: fixed; inset: 0; background: rgba(10,51,36,.75); z-index: 60; display: none; place-items: center; padding: 30px; }
.party.show { display: grid; }
.party .in { background: #fff; border-radius: 30px; padding: 28px 22px; text-align: center; max-width: 340px; }
.party .num { font-size: 56px; font-weight: 800; color: var(--gold); line-height: 1; }
.party h3 { font-family: 'Tiro Devanagari Hindi', serif; font-weight: 400; font-size: 26px; color: var(--deep); margin: 8px 0 4px; }

/* ---------- Community (सवाल-जवाब) ---------- */
.cm-hero { background-image: var(--pattern), linear-gradient(140deg, var(--deep), var(--green)); color: #fff; border: 0; }
.cm-hero .lbl { font-size: 13px; color: #F6E3B0; font-weight: 700; }
.cm-hero .big { font-family: 'Tiro Devanagari Hindi', serif; font-size: 22px; line-height: 1.35; margin: 4px 0 14px; }
.cm-hero small { display: block; margin-top: 10px; font-size: 12.5px; opacity: .8; text-align: center; }
.btn.gold { background: linear-gradient(135deg, #E9C065, #D9A63A); color: var(--deep); }
.cm-search { margin-top: 14px; }
.cm-search input, .cm-text { width: 100%; border: 1.5px solid var(--line); border-radius: 18px; padding: 12px 16px; font: inherit; font-size: 15.5px; background: #fff; }
.cm-text { border-radius: 16px; margin-top: 10px; resize: vertical; }
.cm-search input:focus, .cm-text:focus { outline: none; border-color: var(--green); }
.cm-cats { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 6px; scrollbar-width: none; }
.cm-cats::-webkit-scrollbar { display: none; }
.cm-cats a { flex: none; border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
.cm-cats a.on { background: var(--green); border-color: var(--green); color: #fff; }
.cm-post { background: #fff; border: 1.5px solid var(--line); border-radius: 24px; padding: 16px; margin-top: 12px; }
.cm-post.cm-mentor { border-color: var(--gold); background: #FFFBEF; }
.cm-head { display: flex; gap: 10px; align-items: center; }
.cm-head b { display: block; font-size: 15.5px; }
.cm-head small { color: var(--muted); font-size: 12.5px; }
.av { width: 42px; height: 42px; border-radius: 50%; background: var(--sage-soft); color: var(--green); display: grid; place-items: center; font-weight: 800; font-size: 18px; flex: none; }
.av.mentor { background: linear-gradient(140deg, var(--green), var(--deep)); color: #F6E3B0; }
.cm-body { display: block; margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink); word-wrap: break-word; }
.cm-badge { display: inline-block; margin-top: 10px; background: #FFF4D6; color: #8A6512; font-weight: 700; font-size: 13px; padding: 4px 12px; border-radius: 99px; }
.cm-acts { display: flex; gap: 6px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.cm-acts button, .cm-acts a { flex: 1; text-align: center; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); padding: 6px 0; cursor: pointer; border-radius: 12px; }
.cm-acts .on { color: #C0392B; background: #FCEBEA; }

/* ---------- Naya Home (Better Muslim jaisa) ---------- */
.hero { margin: 0 -18px; padding: 18px 18px 22px; background-image: var(--pattern), linear-gradient(170deg, #16916B, #1E9E78); color: #fff; border-radius: 0 0 34px 34px; }
.hi-row { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.greet { font-size: 14.5px; opacity: .8; }
.salam { font-family: 'Tiro Devanagari Hindi', serif; font-size: 26px; line-height: 1.25; margin-top: 2px; }
.date { font-size: 13px; opacity: .78; margin-top: 4px; }
.city { flex: none; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.1); color: #fff; border-radius: 16px; padding: 8px 12px; display: flex; gap: 6px; align-items: center; font: inherit; font-size: 14px; cursor: pointer; max-width: 140px; }
.city b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnow { margin-top: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); border-radius: 24px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pn-l b { font-size: 21px; font-weight: 800; letter-spacing: .3px; }
.pn-l .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); margin-right: 8px; vertical-align: middle; }
.pn-link { display: block; margin-top: 6px; color: #E9C065; font-weight: 700; font-size: 13.5px; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; text-align: left; }
.pn-r { text-align: right; }
.pn-r small { font-size: 12.5px; opacity: .75; }
.cd { font-size: 32px; font-weight: 600; letter-spacing: .5px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pbar { height: 4px; background: rgba(255,255,255,.2); border-radius: 99px; margin-top: 6px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--gold); }

.smart { background: #fff; border: 1.5px solid var(--line); border-radius: 28px; padding: 18px; margin-top: 18px; }
.sm-top { display: flex; gap: 12px; align-items: center; }
.sm-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--sage-soft); display: grid; place-items: center; font-size: 22px; flex: none; }
.sm-top b { display: block; font-size: 18.5px; color: var(--deep); line-height: 1.3; }
.sm-top small { color: var(--muted); font-size: 14px; }
.sm-btns { display: flex; gap: 8px; margin-top: 14px; }
.sb { flex: 1; border-radius: 16px; padding: 12px 6px; font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; text-align: center; border: 1.5px solid; }
.sb.ok { background: var(--sage-soft); border-color: #B7DCC4; color: var(--green); }
.sb.late { background: #FFF6E2; border-color: #EBD49A; color: var(--peach-d); }
.sb.skip { background: #fff; border-color: var(--line); color: var(--muted); flex: .7; }

.tally { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; background-image: var(--pattern), linear-gradient(140deg, var(--green), var(--deep)); border-radius: 26px; padding: 6px; }
.tally a { text-align: center; color: #fff; padding: 12px 4px; border-radius: 20px; }
.tally a + a { border-left: 1px solid rgba(255,255,255,.15); }
.tally b { display: block; font-size: 22px; font-weight: 800; }
.tally span { font-size: 13px; opacity: .8; }

.sabak { display: block; background: #fff; border: 1.5px solid #EBDDB5; border-radius: 28px; padding: 18px 20px; margin-top: 14px; }
.sabak .tag-row { display: flex; justify-content: space-between; align-items: center; }
.sabak .kick { color: var(--gold); font-weight: 800; font-size: 13.5px; letter-spacing: 1px; }
.sabak .chev { width: 34px; height: 34px; border-radius: 50%; background: var(--sage-soft); display: grid; place-items: center; font-size: 22px; color: var(--green); }
.sabak b { display: block; font-family: 'Tiro Devanagari Hindi', serif; font-weight: 400; font-size: 22px; color: var(--deep); line-height: 1.35; margin-top: 4px; }
.sabak small { color: var(--muted); font-size: 14px; }
.sabak .gift { margin-top: 10px; background: #FFF6E2; color: #8A6512; font-weight: 600; font-size: 13.5px; padding: 6px 12px; border-radius: 12px; display: inline-block; }

.tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.tools a { background: #fff; border: 1.5px solid var(--line); border-radius: 24px; padding: 18px 10px; text-align: center; font-weight: 700; font-size: 15.5px; color: var(--deep); }
.tools i { display: block; font-style: normal; font-size: 30px; line-height: 1.2; margin-bottom: 6px; }
.tools .soon { opacity: .55; }
.tools small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }

/* ---------- Tasbih ---------- */
.tz-pick { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 4px; scrollbar-width: none; }
.tz-pick::-webkit-scrollbar { display: none; }
.tz-pick button { flex: none; border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.tz-pick button.on { background: var(--green); border-color: var(--green); color: #fff; }
.tz-ar { text-align: center; font-family: 'Amiri', serif; font-size: 30px; color: var(--deep); margin-top: 16px; direction: rtl; }
.tz-hi { text-align: center; color: var(--muted); font-size: 15px; }
.tz-btn { display: grid; place-content: center; width: 250px; height: 250px; margin: 22px auto 10px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; text-align: center;
          background-image: var(--pattern), radial-gradient(circle at 35% 30%, #1B9C5A, var(--deep)); box-shadow: 0 14px 34px rgba(10,51,36,.28), inset 0 0 0 8px rgba(255,255,255,.08); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.tz-btn:active { transform: scale(.97); }
.tz-btn b { font-size: 64px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tz-btn small { font-size: 15px; opacity: .8; margin-top: 6px; }
.tz-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }

/* ---------- v7: halke rang, color break, back button ---------- */
.now, .cm-hero { background-image: var(--pattern), linear-gradient(140deg, #16916B, #24A87D); }
.tz-btn { background-image: var(--pattern), radial-gradient(circle at 35% 30%, #34BD8C, #16916B); box-shadow: 0 14px 30px rgba(22,145,107,.25), inset 0 0 0 8px rgba(255,255,255,.1); }
.round.gold { color: #6B4A0A; }
.back-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; flex: none; }
.head.has-back h1 { margin-left: 8px; }
.card, .hab, .cm-post, .smart, .sabak, .tools a { box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 4px 14px rgba(17,24,39,.04); }

/* Smart card — halka bainganī (purple), Better Muslim jaisa */
.smart { background: var(--lav-soft); border: 1.5px solid var(--lav-line); }
.sm-ic { background: #fff; }
.sm-top b { color: #2E3480; }
.sm-top small { color: #5B6190; }
.sb.ok { background: #fff; border-color: #B9E2CF; color: var(--green); }
.sb.alt { background: #fff; border-color: var(--lav-line); color: var(--lav); flex: .8; }

/* Aaj ka hisaab — teen alag rang */
.tally { background: none; padding: 0; gap: 10px; }
.tally a { border-radius: 22px; padding: 14px 4px; }
.tally a + a { border-left: 0; }
.tally a:nth-child(1) { background: var(--sky-soft); color: #1C6A9E; }
.tally a:nth-child(2) { background: var(--sage-soft); color: var(--deep); }
.tally a:nth-child(3) { background: var(--peach-soft); color: #93661A; }
.tally span { opacity: .85; }

/* Sabak card — garm rang ka kinaara */
.sabak { border: 1.5px solid #F2DDB0; background: linear-gradient(180deg, #FFFBF2, #FFFFFF 60%); }
.sabak .chev { background: var(--peach-soft); color: var(--peach-d); }
.sabak .kick { color: var(--peach-d); letter-spacing: .5px; }

/* Tools — har icon ka alag halka rang */
.tools i { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px; font-size: 28px; }
.tools a:nth-child(1) i { background: var(--peach-soft); }
.tools a:nth-child(2) i { background: var(--sage-soft); }
.tools a:nth-child(3) i { background: var(--sky-soft); }
.tools a:nth-child(4) i { background: #FFF6D8; }
.tools a:nth-child(5) i { background: var(--lav-soft); }
.tools a:nth-child(6) i { background: var(--pink-soft); }
.tools a { color: var(--ink); }
.sm-top small .sm-when { display: inline; font-size: 13px; color: var(--lav); font-weight: 700; }
.sm-ref { color: #8B90B8; }

/* ---------- v8: saaf aur kam bhara — ek hara (flat), safed cards bina border, zyada khali jagah ---------- */
:root { --brand: #0C8A66; --brand-d: #097356; }
.head, .hero { background: var(--brand) !important; background-image: none !important; }
.head .round { background: rgba(255,255,255,.14); border: 0; }
.back-btn { background: rgba(255,255,255,.14); border: 0; }
.hero { padding: 14px 20px 24px; border-radius: 0 0 30px 30px; }
.salam { font-size: 24px; }
.city { background: rgba(255,255,255,.14); border: 0; }
.pnow { background: rgba(0,0,0,.12); border: 0; border-radius: 20px; margin-top: 18px; }
.cd { font-size: 30px; }

/* Sab cards: border nahi, sirf halki parchhai; beech me zyada jagah */
.card, .hab, .cm-post, .sabak, .tools a { border: 0 !important; box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 6px 18px rgba(17,24,39,.05); }
.smart, .tally, .sabak, .tools { margin-top: 22px; }

/* Smart card: ek hi rang (halka purple), ek mukhya button */
.smart { background: #F1F2FE; border: 0; box-shadow: none; padding: 18px 18px 16px; }
.sm-ic { width: 44px; height: 44px; font-size: 20px; }
.sm-top b { font-size: 18px; }
.sm-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; font-size: 13.5px; color: #6E73A8; }
.sm-meta button { border: 0; background: none; color: var(--lav); font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.sm-btns { margin-top: 14px; }
.sb { border: 0; padding: 12px 6px; }
.sb.ok { background: var(--brand); color: #fff; }
.sb.alt { background: #fff; color: var(--lav); flex: .6; }

/* Aaj ka hisaab: ek hi safed card, teen khaane, sirf ginti rangeen */
.tally { background: #fff; border-radius: 22px; padding: 6px 0; gap: 0; box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 6px 18px rgba(17,24,39,.05); }
.tally a, .tally a:nth-child(n) { background: none; border-radius: 0; padding: 12px 4px; }
.tally a + a { border-left: 1px solid #EEF0F2; }
.tally a:nth-child(1) b { color: #2F7FC1; }
.tally a:nth-child(2) b { color: var(--brand); }
.tally a:nth-child(3) b { color: #C0841A; }
.tally span { color: var(--muted); opacity: 1; }

/* Sabak: safed card, sona sirf likhawat me */
.sabak { background: #fff; }
.sabak .gift { background: none; padding: 0; margin-top: 8px; color: #B7811F; font-weight: 600; }

/* Tools: safed, icon me halka rang */
.tools { gap: 14px; }
.tools a { padding: 18px 10px 16px; }
.head .round.gold { background: linear-gradient(135deg, #F2C24F, #E0A93A); color: #5A3E05; }

/* ---------- Hafte ka leaderboard ---------- */
.lb-hero { display: flex; gap: 14px; align-items: center; background: #FFF7E6; border-radius: 24px; padding: 18px; margin-top: 18px; }
.lb-trophy { width: 60px; height: 60px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 32px; flex: none; }
.lb-hero b { display: block; font-size: 17px; color: #7A5410; }
.lb-hero span { display: block; font-size: 15px; color: #93661A; font-weight: 600; }
.lb-hero small { color: var(--muted); font-size: 12.5px; }
.lb-last { margin-top: 12px; background: var(--lav-soft); color: #3D4396; border-radius: 16px; padding: 10px 14px; font-size: 14.5px; }
.lb-me { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; background: var(--brand); color: #fff; border-radius: 22px; padding: 14px 4px; margin-top: 14px; }
.lb-me small { display: block; font-size: 12.5px; opacity: .85; }
.lb-me b { font-size: 24px; font-weight: 800; }
.lb-me.empty { display: block; text-align: center; padding: 14px 16px; font-size: 14.5px; }
.lb-list { padding: 6px 16px; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid #EEF0F2; }
.lb-row:last-child { border-bottom: 0; }
.lb-row .rk { width: 30px; text-align: center; font-weight: 800; font-size: 17px; color: var(--muted); }
.lb-row .nm { flex: 1; font-weight: 600; }
.lb-row .st { color: var(--muted); font-size: 14px; }
.lb-row .st b { color: var(--ink); font-size: 16px; }
.lb-row.mine { background: var(--sage-soft); margin: 0 -16px; padding: 13px 18px; }
.lb-rules ul { margin: 8px 0 0 18px; font-size: 14.5px; line-height: 1.8; color: #374151; }
.sabak .lb-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: #93661A; font-weight: 700; font-size: 14px; }
.lb-strip { display: flex; align-items: center; gap: 10px; margin-top: 12px; background: #FFF7E6; color: #7A5410; border-radius: 18px; padding: 12px 16px; font-size: 14.5px; font-weight: 600; }
.lb-strip span { flex: 1; } .lb-strip b { font-size: 20px; }

/* ---------- Sikke (coins) ---------- */
.coin-hero { display: flex; gap: 16px; align-items: center; background: linear-gradient(135deg, #FFF3D6, #FFE6A8); border-radius: 26px; padding: 20px; margin-top: 18px; }
.coin-big { width: 66px; height: 66px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 36px; }
.coin-hero small { display: block; color: #7A5410; font-size: 14px; }
.coin-hero b { font-size: 38px; font-weight: 800; color: #5A3E05; line-height: 1.1; }
.earn > div { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EEF0F2; }
.earn > div span { font-size: 22px; } .earn > div p { flex: 1; } .earn > div b { color: var(--brand); font-size: 17px; }
.earn small { display: block; margin-top: 10px; line-height: 1.6; }
.vgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 10px; }
.vcard { background: #fff; border-radius: 22px; padding: 16px 12px; text-align: center; box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 6px 18px rgba(17,24,39,.05); }
.vem { width: 56px; height: 56px; border-radius: 50%; background: #FFF6E2; display: grid; place-items: center; font-size: 28px; margin: 0 auto 8px; }
.vcard b { display: block; font-size: 16px; } .vcard small { display: block; color: var(--muted); font-size: 13px; }
.vcost { font-weight: 800; color: #93661A; margin: 8px 0 2px; }
.vcard .btn { margin-top: 10px; padding: 9px; font-size: 14.5px; background: var(--brand); }
.vcard .btn.off { background: #E5E7EB; color: #6B7280; }
.orow { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid #EEF0F2; }
.orow:last-child { border-bottom: 0; } .orow small { display: block; color: var(--muted); font-size: 12.5px; }
.ocode { margin-top: 6px; background: #F3F4F6; padding: 5px 10px; border-radius: 10px; font-family: monospace; font-size: 15px; display: inline-block; }
.ocode button { border: 0; background: none; color: var(--brand); font-weight: 700; cursor: pointer; margin-left: 6px; }
.ost { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: #F3F4F6; color: var(--muted); white-space: nowrap; }
.ost.fulfilled { background: var(--sage-soft); color: var(--brand); } .ost.cancelled { background: #FDECEC; color: #C0392B; }
.coin-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.18); border-radius: 14px; padding: 6px 10px; font-weight: 800; font-size: 14px; color: #fff; margin-right: 6px; }

/* ---------- Quran sunein ---------- */
.qa-hero { background: var(--sage-soft); border-radius: 24px; padding: 18px; margin-top: 18px; }
.qa-hero b { display: block; font-size: 18px; color: var(--deep); } .qa-hero span { color: #4B5563; font-size: 14.5px; }
.qa-search { width: 100%; margin-top: 14px; border: 0; border-radius: 18px; padding: 13px 16px; font: inherit; font-size: 15.5px; background: #fff; box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 6px 18px rgba(17,24,39,.05); }
.qa-list { padding: 4px 14px; }
.qa-list a { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #EEF0F2; }
.qa-list a:last-child { border-bottom: 0; }
.qn { width: 34px; height: 34px; border-radius: 50%; background: var(--sage-soft); color: var(--brand); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.qt { flex: 1; } .qt b { display: block; } .qt small { color: var(--muted); font-size: 12.5px; }
.qar { font-family: 'Amiri', 'Noto Naskh Arabic', serif; font-size: 20px; color: var(--deep); }
.qa-player { background: #fff; border-radius: 28px; padding: 20px 18px; margin-top: 18px; box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 6px 18px rgba(17,24,39,.05); }
.qa-now { text-align: center; } .qa-now small { color: var(--muted); }
.qa-ar { font-family: 'Amiri', 'Noto Naskh Arabic', serif; font-size: 26px; line-height: 2; direction: rtl; color: var(--ink); margin-top: 6px; }
.qa-hi { color: #4B5563; font-size: 15px; line-height: 1.6; margin-top: 4px; }
.qa-ar.sm { font-size: 21px; text-align: right; } .qa-hi.sm { font-size: 14px; }
.qa-ctrl { display: flex; justify-content: center; align-items: center; gap: 22px; margin: 16px 0 12px; }
.qa-ctrl button { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--sage-soft); font-size: 20px; cursor: pointer; color: var(--brand); }
.qa-ctrl .qa-play { width: 76px; height: 76px; background: var(--brand); color: #fff; font-size: 30px; box-shadow: 0 8px 20px rgba(12,138,102,.3); }
.qa-opts .tabs3 { margin-top: 4px; }
.qa-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 14.5px; color: #374151; gap: 10px; }
.qa-row input { width: 20px; height: 20px; accent-color: var(--brand); }
.qa-ayat { padding: 4px 14px; }
.qa-ay { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #EEF0F2; cursor: pointer; }
.qa-ay:last-child { border-bottom: 0; } .qa-ay > div { flex: 1; }
.qa-ay.on { background: var(--sage-soft); margin: 0 -14px; padding: 14px; border-radius: 16px; }
.listen { display: flex; align-items: center; gap: 14px; margin-top: 16px; background: linear-gradient(135deg, #E8F6EF, #DDF0FB); border-radius: 24px; padding: 16px 18px; }
.listen i { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal; font-size: 26px; flex: none; }
.listen b { display: block; color: var(--deep); font-size: 17px; } .listen small { color: #4B5563; font-size: 13.5px; }

/* Toast + sikke lene ki patti */
.toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(20px); background: #1F2937; color: #fff; padding: 11px 18px; border-radius: 14px; font-size: 14.5px; font-weight: 600; opacity: 0; transition: .25s; z-index: 70; max-width: 90%; text-align: center; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.claim { display: flex; align-items: center; gap: 10px; margin-top: 16px; background: linear-gradient(135deg, #FFF3D6, #FFE6A8); border-radius: 20px; padding: 12px 14px; }
.claim span { flex: 1; color: #6B4A0A; font-weight: 600; font-size: 14.5px; } .claim span b { font-size: 18px; }
.claim button { border: 0; background: #C98A1B; color: #fff; font: inherit; font-weight: 800; border-radius: 14px; padding: 10px 18px; cursor: pointer; }

.btn.ghost { background: #fff !important; color: var(--brand) !important; box-shadow: inset 0 0 0 1.5px var(--brand); }
.ost.awaiting { background: #FFF6E2; color: #93661A; } .ost.expired, .ost.failed { background: #F3F4F6; color: #9CA3AF; }

/* ---------- Gift card store (CRED jaisa, safed-grey) ---------- */
.gc-hero { margin-top: 16px; border-radius: 26px; padding: 20px; background: linear-gradient(135deg, #E7F6EF 0%, #EEF0FD 100%); }
.gc-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gc-hero h2 { font-size: 22px; line-height: 1.25; font-weight: 800; color: var(--ink); }
.gc-hero small { display: block; margin-top: 6px; color: var(--muted); font-size: 13.5px; } .gc-hero small b { color: var(--brand); }
.gc-my { flex: none; background: #fff; border-radius: 99px; padding: 8px 14px; font-weight: 700; font-size: 14px; box-shadow: 0 2px 8px rgba(17,24,39,.08); }
.gc-bal { background: #FFF3D6; color: #6B4A0A; border-radius: 99px; padding: 7px 14px; font-size: 14px; font-weight: 600; flex: none; } .gc-bal b { font-size: 16px; }
.gc-search { flex: 1; display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 99px; padding: 0 12px; height: 38px; max-width: 200px; }
.gc-search svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.gc-search input { border: 0; outline: 0; background: none; font: inherit; font-size: 14px; width: 100%; }

/* Card ka chehra */
.gcc { position: relative; border-radius: 18px; overflow: hidden; color: #fff; aspect-ratio: 1.62; background: linear-gradient(125deg, var(--c1), var(--c2));
       box-shadow: 0 12px 26px -14px var(--c1), 0 2px 6px rgba(17,24,39,.08); font-family: 'Segoe UI', Roboto, 'Noto Sans Devanagari', sans-serif; }
.gcc::before { content: ''; position: absolute; inset: 0; opacity: .5;
       background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 320 200'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.22'%3E%3Cpath d='M-20 40C60 0 120 90 200 50s120-30 160 10'/%3E%3Cpath d='M-20 52C60 12 120 102 200 62s120-30 160 10'/%3E%3Cpath d='M-20 64C60 24 120 114 200 74s120-30 160 10'/%3E%3Cpath d='M-20 150c80-40 140 30 220 0s110-60 150-30'/%3E%3Cpath d='M-20 162c80-40 140 30 220 0s110-60 150-30'/%3E%3C/g%3E%3C/svg%3E") center/cover; }
.gcc.dark { color: #1F2937; } .gcc.dark::before { filter: invert(1); opacity: .25; }
.gcc-top { position: absolute; left: 0; right: 0; top: 0; height: 62%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 0 10px; }
.gcc-top b { font-size: 25px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
.gcc-top small { font-size: 10.5px; font-weight: 700; letter-spacing: 3px; opacity: .9; }
.gcc-amt { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; display: grid; place-items: center; background: rgba(0,0,0,.13); font-size: 36px; font-weight: 800; text-shadow: 0 2px 0 rgba(0,0,0,.12); }
.gcc.dark .gcc-amt { background: rgba(0,0,0,.06); }
.gcc.sq { aspect-ratio: 1.25; border-radius: 14px; } .gcc.sq .gcc-top { height: 100%; } .gcc.sq .gcc-top b { font-size: 19px; } .gcc.sq .gcc-top small { display: none; }

/* Aaj ki deal */
.gc-deal-title { text-align: center; font-size: 26px; font-weight: 900; margin: 30px 0 14px; letter-spacing: .5px; color: var(--ink);
       background: linear-gradient(180deg, #4B5563, #111827); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gc-stage { position: relative; height: 200px; perspective: 900px; margin: 0 -18px; overflow: hidden; touch-action: pan-y; user-select: none; }
.gc-stage .gcc { position: absolute; top: 28px; left: 25%; width: 50%; opacity: 0; pointer-events: none; transition: left .45s ease, top .45s ease, width .45s ease, transform .45s ease, opacity .45s ease; cursor: pointer; }
.gc-stage .gcc.pos-l { left: -26%; transform: rotateY(38deg); opacity: .45; pointer-events: auto; }
.gc-stage .gcc.pos-r { left: 76%; transform: rotateY(-38deg); opacity: .45; pointer-events: auto; }
.gc-stage .gcc.pos-l .gcc-amt, .gc-stage .gcc.pos-r .gcc-amt, .gc-stage .gcc.pos-h .gcc-amt { font-size: 24px; }
.gc-stage .gcc.mid { top: 4px; left: 15%; width: 70%; opacity: 1; z-index: 2; pointer-events: auto; }
.gc-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; } .gc-dots i { width: 6px; height: 6px; border-radius: 99px; background: #D1D5DB; transition: .3s; } .gc-dots i.on { width: 18px; background: var(--ink); }
.gc-dname { text-align: center; color: var(--muted); font-weight: 600; margin-top: 8px; }
.gc-dpct { text-align: center; font-size: 40px; font-weight: 900; line-height: 1.1; } .gc-dpct .w { font-size: 18px; font-weight: 700; color: var(--brand); }
.gc-unlock { display: block; width: 78%; margin: 16px auto 0; border: 0; border-radius: 18px; padding: 15px; font: inherit; font-size: 22px; font-weight: 900; cursor: pointer;
       color: #8A3B00; background: linear-gradient(180deg, #FFE68A, #F6C431); box-shadow: 0 7px 0 #C97A12, 0 14px 22px -6px rgba(201,122,18,.55); transition: transform .08s, box-shadow .08s; }
.gc-unlock:active { transform: translateY(5px); box-shadow: 0 2px 0 #C97A12; }
.gc-using { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--muted); } .gc-using b { color: #B7811F; }

/* Sections */
h3.gc-sec { font-size: 20px; font-weight: 800; color: var(--ink); margin: 30px 0 12px; }
.gc-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 2px 18px 12px; scroll-padding: 0 18px; scrollbar-width: none; }
.gc-row::-webkit-scrollbar { display: none; }
.gc-tile { flex: 0 0 44%; scroll-snap-align: start; cursor: pointer; }
.gc-bn { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Segoe UI', Roboto, sans-serif; }
.gc-pr { font-size: 18px; font-weight: 800; margin-top: 2px; } .gc-pr s { font-size: 13px; color: #9CA3AF; font-weight: 500; } .gc-pr em { display: block; font-style: normal; color: var(--brand); font-size: 13px; font-weight: 700; }
.gc-co { font-size: 13.5px; color: #8A6514; font-weight: 600; margin-top: 2px; }
.gc-btn { margin-top: 10px; border: 0; border-radius: 12px; padding: 9px 16px; font: inherit; font-weight: 700; font-size: 14.5px; background: var(--brand); color: #fff; cursor: pointer; }
.gc-btn.line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px #D1D5DB; }
.gc-big { flex: 0 0 72%; scroll-snap-align: start; border-radius: 24px; padding: 18px; color: #fff; cursor: pointer; position: relative; overflow: hidden; min-height: 190px;
       display: flex; flex-direction: column; background: linear-gradient(150deg, var(--c1), var(--c2)); }
.gc-big.dark { color: #1F2937; }
.gc-logo { align-self: flex-start; background: #fff; color: #111827; border-radius: 12px; padding: 8px 12px; font-weight: 800; font-size: 15px; font-family: 'Segoe UI', Roboto, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.gc-big small { margin-top: auto; font-size: 13px; opacity: .85; } .gc-big b { font-size: 24px; font-weight: 800; line-height: 1.2; }
.gc-big-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.gc-big-foot span { background: rgba(0,0,0,.2); border-radius: 12px; padding: 6px 12px; font-weight: 700; font-size: 14px; }
.gc-big-foot i { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-style: normal; font-size: 22px; }
.gc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gc-cell { background: #fff; border-radius: 18px; overflow: hidden; position: relative; cursor: pointer; box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 6px 18px rgba(17,24,39,.05); }
.gc-cell-top { height: 86px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 19px; padding: 0 8px; text-align: center; background: linear-gradient(135deg, var(--c1), var(--c2)); font-family: 'Segoe UI', Roboto, sans-serif; }
.gc-cell-top.dark { color: #1F2937; }
.gc-off { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); background: #fff; color: var(--brand); border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.12); white-space: nowrap; }
.gc-cell-body { padding: 12px 12px 14px; } .gc-cell-body .gc-pr { font-size: 17px; } .gc-cell-body .gc-btn { width: 100%; }

/* Kharidne wali sheet */
.gs-bg { position: fixed; inset: 0; background: rgba(17,24,39,.45); opacity: 0; pointer-events: none; transition: .2s; z-index: 60; }
.gs-bg.show { opacity: 1; pointer-events: auto; }
.gs { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; background: #fff; border-radius: 28px 28px 0 0; padding: 20px 20px 24px; z-index: 61;
      transform: translateY(105%); transition: transform .25s ease; max-height: 92vh; overflow-y: auto; }
.gs.show { transform: none; } .gs.how { z-index: 62; }
.gs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; } .gs-head b { font-size: 17px; }
.gs-how, .gs-x { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; flex: none; }
.gs-lbl { text-align: center; color: var(--muted); margin: 20px 0 10px; font-size: 14.5px; }
.gs-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .gs-chips::-webkit-scrollbar { display: none; }
.gs-chips button { flex: none; border: 1.5px solid #D1D5DB; background: #fff; border-radius: 99px; padding: 9px 16px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.gs-chips button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.gs-save { margin: 18px -20px 0; padding: 10px; text-align: center; font-weight: 700; color: var(--brand); background: linear-gradient(90deg, #fff, #DDF5EA 30%, #DDF5EA 70%, #fff); }
.gs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.gs-pct { color: var(--brand); font-weight: 700; font-size: 15px; } .gs-price { font-size: 28px; font-weight: 900; line-height: 1.15; } .gs-price s { font-size: 15px; color: #9CA3AF; font-weight: 500; }
.gs-foot small { color: var(--muted); font-size: 14px; } .gs-foot small b { color: #B7811F; }
.gs-buy { flex: none; border: 0; border-radius: 16px; padding: 15px 22px; font: inherit; font-size: 17px; font-weight: 800; background: var(--brand); color: #fff; cursor: pointer; max-width: 52%; }
.gs-buy.off { background: #E5E7EB; color: #6B7280; font-size: 14px; }
.gs-steps { list-style: none; counter-reset: s; } .gs-steps li { counter-increment: s; position: relative; padding: 0 0 18px 42px; font-size: 15px; }
.gs-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.gs-steps li:not(:last-child)::after { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: #BFE6D5; }
.gs-terms { padding-left: 20px; color: var(--muted); font-size: 14px; } .gs-terms li { margin-bottom: 8px; }

/* Mere card */
.gc-savebar { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; background: #E7F6EF; border-radius: 18px; padding: 14px 18px; font-weight: 600; }
.gc-savebar b { color: var(--brand); font-size: 20px; }
.mc-wait { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 18px; padding: 14px; margin-bottom: 10px; }
.mc-wait b { display: block; } .mc-wait small { color: var(--muted); font-size: 13px; }
.mc-dot { width: 46px; height: 32px; border-radius: 8px; flex: none; }
.mc { margin-bottom: 18px; }
.mc-card { aspect-ratio: auto; padding: 16px 18px 0; position: relative; z-index: 1; }
.mc-card > * { position: relative; }
.mc-top { display: flex; justify-content: space-between; align-items: center; } .mc-brand { font-size: 19px; font-weight: 800; }
.mc-share { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(0,0,0,.25); color: #fff; display: grid; place-items: center; cursor: pointer; }
.mc-share svg { width: 18px; height: 18px; }
.mc-mid { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 16px; }
.mc-amt { font-size: 42px; font-weight: 900; line-height: 1; }
.mc-used { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; cursor: pointer; } .mc-used small { font-size: 12px; font-weight: 700; }
.mc-used input { display: none; }
.mc-used i { width: 44px; height: 24px; border-radius: 99px; border: 2px solid currentColor; position: relative; }
.mc-used i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: currentColor; transition: .2s; }
.mc-used input:checked + i { background: var(--brand); border-color: var(--brand); } .mc-used input:checked + i::after { left: 23px; background: #fff; }
.mc-used.inline { flex-direction: row; align-items: center; color: var(--muted); }
.mc-codes { margin: 0 -18px; background: rgba(0,0,0,.18); display: grid; grid-template-columns: 1fr 1fr; }
.gcc.dark .mc-codes { background: rgba(0,0,0,.07); }
.mc-codes div { padding: 12px 14px; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 6px; }
.mc-codes div + div { border-left: 1px solid rgba(255,255,255,.25); }
.mc-codes small { grid-column: 1 / -1; font-size: 12px; opacity: .85; }
.mc-codes span { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Segoe UI', Roboto, monospace; }
.mc-codes button { border: 0; background: rgba(255,255,255,.9); color: #111827; border-radius: 8px; padding: 3px 8px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.mc-exp { display: flex; justify-content: space-between; align-items: center; background: #E5E7EB; border-radius: 0 0 18px 18px; margin-top: -14px; padding: 22px 16px 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .5px; color: #4B5563; }
.mc-exp button { border: 0; background: none; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; }
.mc-how { display: none; background: #fff; border-radius: 18px; padding: 16px 14px 2px; margin-top: 8px; } .mc-how.open { display: block; }
.mc-old { margin-top: 24px; background: #fff; border-radius: 20px; padding: 14px 16px; }
.mc-old summary { font-weight: 700; color: var(--muted); cursor: pointer; }
.gc-promo { display: flex; align-items: center; gap: 12px; margin-top: 12px; border-radius: 22px; padding: 18px; color: #fff; background: linear-gradient(135deg, #0C8A66, #3FB58C); }
.gc-promo div { flex: 1; } .gc-promo b { display: block; font-size: 17px; } .gc-promo small { opacity: .9; font-size: 13.5px; } .gc-promo i { font-style: normal; font-size: 28px; }
.gc-promo.light { background: #fff; color: var(--ink); } .gc-promo.light small { color: var(--muted); opacity: 1; }
.gs-lock { display: none; margin-top: 14px; background: #FFF6E2; border-radius: 16px; padding: 12px 14px; color: #6B4A0A; font-size: 14.5px; }
.gs-lock span { font-size: 13.5px; } .gs-earn { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gs-earn a, .gs-earn button { flex: 1; text-align: center; border: 0; border-radius: 12px; padding: 9px 10px; font: inherit; font-size: 14px; font-weight: 700; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.coin-hero small + b + small { margin-top: 2px; }


/* ---------- Home hero ring (StepSetGo jaisa): 3 swipe page ---------- */
.rh { margin-top: 16px; background: #fff; border: 1.5px solid var(--line); border-radius: 28px; padding: 14px 0 10px; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 4px 14px rgba(17,24,39,.04); }
.rh-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.rh-track::-webkit-scrollbar { display: none; }
.rh-slide { flex: 0 0 100%; scroll-snap-align: center; padding: 0 16px; cursor: pointer; }
.rh-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rh-h b { font-size: 16px; font-weight: 800; color: var(--deep); }
.rh-h span { font-size: 13px; font-weight: 600; color: var(--muted); }
.rh-body { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.rh-ring { position: relative; width: 168px; height: 168px; flex: none; }
.rh-ring svg { width: 100%; height: 100%; display: block; }
.rs { fill: none; stroke-width: 15; stroke-linecap: round; }
.rs.sq { stroke-linecap: butt; }
.rs.off { stroke: #E8EEEC; }
.rs.on { stroke: var(--green); }
.rs.sky { stroke: var(--sky); }
.rs.gold { stroke: var(--gold); }
.rm circle { fill: #fff; stroke: #CBD5D1; stroke-width: 2.5; }
.rm.hit circle { fill: var(--gold); stroke: #fff; }
.rm text { font-size: 10px; font-weight: 800; text-anchor: middle; fill: #8A6512; }
.rm.hit text { fill: #fff; }
.rh-c { position: absolute; inset: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.2; }
.rh-c b { font-size: 30px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.rh-c small { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rh-c em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--deep); background: var(--sage-soft); border-radius: 99px; padding: 2px 9px; margin-top: 6px; }
.rh-chip { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); z-index: 2; border: 0; background: linear-gradient(135deg, #FFE7A3, #F5C451); color: #5C3F05; font: inherit; font-size: 13px; font-weight: 800; padding: 4px 11px; border-radius: 99px; white-space: nowrap; cursor: pointer; box-shadow: 0 3px 10px rgba(224,172,69,.35); }
.rh-st { flex: 1; min-width: 0; display: grid; gap: 10px; }
.rh-s { display: flex; align-items: center; gap: 8px; }
.rh-s i { font-style: normal; width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: var(--bg); }
.rh-s:nth-child(1) i { background: #FFF6D8; }
.rh-s:nth-child(2) i { background: var(--sky-soft); }
.rh-s:nth-child(3) i { background: var(--sage-soft); }
.rh-s b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.2; white-space: nowrap; }
.rh-s small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.rh-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; min-height: 6px; }
.rh-dots i { width: 6px; height: 6px; border-radius: 99px; background: #D5DCDA; cursor: pointer; transition: .2s; }
.rh-dots i.on { width: 18px; background: var(--green); }

/* ---------- Level page ---------- */
.lv-top { background-image: var(--pattern), linear-gradient(140deg, #16916B, #24A87D); color: #fff; border-radius: 28px; padding: 18px; margin-top: 16px; }
.lv-top h2 { font-size: 26px; font-weight: 800; }
.lv-top p { font-size: 14px; opacity: .9; margin-top: 2px; }
.lv-days { display: flex; gap: 6px; margin-top: 12px; }
.lv-days span { flex: 1; height: 8px; border-radius: 99px; background: rgba(255,255,255,.25); }
.lv-days span.on { background: #FFE08A; }
.lv-days span.now { background: rgba(255,255,255,.6); }
.lv-rule { font-size: 12.5px; opacity: .85; margin-top: 10px; }
.lv-note { margin-top: 12px; border-radius: 18px; padding: 12px 14px; font-weight: 600; font-size: 14.5px; }
.lv-note.up { background: #FFF6D8; color: #6B4A0A; }
.lv-note.re { background: var(--pink-soft); color: #8E2C41; }
.lv-list { margin-top: 10px; display: grid; gap: 10px; }
.lv-h { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 12px 14px; }
.lv-h.done { background: #F6FBF8; border-color: #CBE9DA; }
.lv-h > i { font-style: normal; width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 19px; background: var(--bg); }
.lv-h .tx { flex: 1; min-width: 0; }
.lv-h .tx b { display: block; font-size: 15.5px; color: var(--ink); line-height: 1.3; }
.lv-h .tx small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.lv-h .tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 8px; margin-right: 4px; }
.lv-h .tag.v { background: #FFF6D8; color: #8A6512; }
.lv-h .tag.n { background: var(--sky-soft); color: #1C6A9E; }
.lv-tick { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 2px solid #CBD5D1; background: #fff; color: transparent; font-size: 20px; font-weight: 800; cursor: pointer; }
.lv-tick.on { background: var(--green); border-color: var(--green); color: #fff; }
.lv-go { flex: none; background: var(--green); color: #fff; border-radius: 14px; padding: 8px 12px; font-weight: 700; font-size: 13.5px; }
.lv-num { flex: none; font-weight: 800; font-size: 13px; color: #1C6A9E; text-align: right; }
.lv-map { margin-top: 10px; display: grid; gap: 8px; }
.lv-m { display: flex; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: 12px 14px; }
.lv-m .bd { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: var(--bg); color: var(--muted); }
.lv-m.past .bd { background: var(--green); color: #fff; }
.lv-m.cur { border-color: var(--green); box-shadow: 0 0 0 3px var(--sage-soft); }
.lv-m.cur .bd { background: #FFF6D8; color: #8A6512; }
.lv-m.lock { opacity: .62; }
.lv-m b { font-size: 15px; color: var(--deep); }
.lv-m small { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 2px; }


/* ---------- Home v2 (StepSetGo layout, apne rang) ---------- */
.head.home { background-image: none; background: #16916B; }
.head.home .wrap { height: 60px; }
.hm-menu { width: 44px; height: 44px; border: 0; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; margin-left: -8px; }
.hm-menu svg { width: 28px; height: 28px; }
.hm-coins { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.16); border-radius: 99px; padding: 4px 14px 4px 4px; color: #fff; font-weight: 800; font-size: 16px; height: 44px; }
.hm-coins i { font-style: normal; width: 36px; height: 36px; border-radius: 50%; background: #FFD66B; display: grid; place-items: center; font-size: 18px; }

/* Hero: hare background par ring + 3 aankde */
.hh { margin: 0 -18px; padding: 10px 0 46px; background: linear-gradient(180deg, #16916B 0%, #138562 100%); }
.hh .rh-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hh .rh-track::-webkit-scrollbar { display: none; }
.hh .rh-slide { flex: 0 0 100%; scroll-snap-align: center; padding: 0 18px; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.hh .rh-ring { position: relative; width: 206px; height: 206px; flex: none; }
.hh .rh-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ro-trk { fill: none; stroke: rgba(0,0,0,.18); stroke-width: 20; }
.ro-arc { fill: none; stroke: #FFD66B; stroke-width: 20; stroke-linecap: round; }
.ro-ok { font-size: 13px; font-weight: 900; fill: #7A5300; text-anchor: middle; }
.ri-bg { fill: rgba(0,0,0,.16); }
.ri-trk { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 14; }
.ri-arc { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; }
.rc-bg { fill: rgba(0,0,0,.1); }
.ri-tip { fill: #fff; stroke: rgba(0,0,0,.08); stroke-width: 1; }
.ri-tip-t { font-size: 11px; font-weight: 900; fill: #138562; text-anchor: middle; }
.hh .rh-c { position: absolute; inset: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; line-height: 1.15; }
.hh .rh-c b { font-size: 40px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; color: #fff; }
.hh .rh-c small { font-size: 13.5px; opacity: .85; margin-top: 6px; color: #fff; }
.rh-coin { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: #FFD66B; display: grid; place-items: center; font-size: 13px; box-shadow: 0 0 0 3px #16916B; }
.hh .rh-chip { top: -6px; z-index: 2; }
.hh .rh-st { flex: 1; min-width: 0; display: grid; gap: 18px; }
.hh .rh-s { display: flex; align-items: center; gap: 12px; }
.hh .rh-s i { font-style: normal; width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 19px; background: none; border: 2px solid; }
.hh .rh-s.c1 i { border-color: #FFD66B; }
.hh .rh-s.c2 i { border-color: #B9B6FF; }
.hh .rh-s.c3 i { border-color: #FF9EAE; }
.hh .rh-s b { display: block; font-size: 25px; font-weight: 800; color: #fff; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hh .rh-s small { display: block; font-size: 13.5px; color: rgba(255,255,255,.78); line-height: 1.2; }
.hh .rh-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; min-height: 5px; }
.hh .rh-dots i { width: 14px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.35); cursor: pointer; transition: .2s; }
.hh .rh-dots i.on { width: 14px; background: #fff; }

/* Neeche ki sheet (gol upar ke kone) */
.hs { position: relative; margin: -26px -18px 0; padding: 22px 18px 6px; background: var(--bg); border-radius: 26px 26px 0 0; }

/* "Kaise kaam karta hai" */
.hw { position: relative; }
.hw-in { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.hw-in > i { font-style: normal; width: 48px; height: 48px; flex: none; border-radius: 8px; background: var(--sage-soft); display: grid; place-items: center; font-size: 24px; }
.hw-in > div { flex: 1; min-width: 0; }
.hw-in b { display: block; font-size: 15.5px; color: var(--ink); line-height: 1.3; }
.hw-in small { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.hw-go { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1; }
.hw-x { position: absolute; top: -9px; right: -7px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--muted); font-size: 11px; font-weight: 800; cursor: pointer; display: grid; place-items: center; }

/* Teen chhote card */
.q3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.qc { position: relative; display: block; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 22px 10px 10px; }
.qc small { display: block; font-size: 13px; color: var(--muted); }
.qc b { display: block; font-size: 15.5px; font-weight: 800; color: var(--green); line-height: 1.25; padding-right: 12px; white-space: nowrap; }
.qc em { position: absolute; right: 9px; bottom: 9px; font-style: normal; font-size: 18px; font-weight: 700; color: var(--muted); line-height: 1; }
.qt { position: absolute; top: -1.5px; right: -1.5px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 0 12px 0 10px; padding: 2px 9px; font-size: 12.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }

/* Section ka sir */
.sh { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin: 28px 0 12px; }
.sh h3, .sh-t { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.sh-t { margin: 28px 0 12px; }
.sh p { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.sh a { flex: none; display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--muted); padding-top: 3px; }
.sh a i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 800; line-height: 1; }

/* Aaj ke kaam */
.tk { position: relative; display: flex; align-items: center; gap: 14px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 12px 14px; margin-bottom: 12px; }
.tk > i { font-style: normal; width: 62px; height: 62px; flex: none; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 28px; align-self: flex-start; margin-top: 4px; }
.tk .qt { border-radius: 0 14px 0 10px; font-size: 13.5px; padding: 3px 10px; color: #8A6512; background: #FFF6D8; border-color: #F2DDB0; }
.tk-tx { flex: 1; min-width: 0; }
.tk-tx b { display: block; font-size: 16px; color: var(--ink); line-height: 1.3; padding-right: 70px; }
.tk-tx small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.tk-b { display: block; width: 72%; margin-top: 10px; text-align: center; background: #fff; border: 1.5px solid var(--ink); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }

/* Uplabdhiyan */
.ac { position: relative; display: flex; align-items: center; gap: 14px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 9px; margin-bottom: 12px; }
.ac .qt { border-radius: 0 14px 0 10px; font-size: 13.5px; padding: 3px 10px; }
.ac-bd { position: relative; width: 82px; height: 82px; flex: none; border-radius: 10px; background: var(--bg); display: grid; place-items: center; }
.ac-bd svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.ac-bd i { font-style: normal; font-size: 26px; position: relative; }
.ab-trk { fill: #fff; stroke: #DDE3E1; stroke-width: 6; }
.ab-arc { fill: none; stroke: var(--green); stroke-width: 6; stroke-linecap: round; }
.ac-tx { flex: 1; min-width: 0; padding-right: 4px; }
.ac-tx b { display: block; font-size: 16px; color: var(--ink); line-height: 1.3; padding-right: 56px; }
.ac-tx small { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.ab { height: 15px; border-radius: 99px; background: #E3EBE8; margin-top: 10px; overflow: hidden; }
.ab span { display: block; height: 100%; border-radius: 99px; background: #4CB782; text-align: right; padding-right: 4px; }
.ab em { font-style: normal; font-size: 11px; font-weight: 800; color: #0B3D2B; line-height: 15px; }

/* Premium */
.pro { position: relative; display: flex; align-items: center; overflow: hidden; border-radius: 18px; padding: 18px 16px; background: linear-gradient(135deg, #FFF8E6, #FDEBC1); border: 1.5px solid #F2DDB0; margin-bottom: 8px; }
.pro-tx { flex: 1; min-width: 0; position: relative; z-index: 1; }
.pro-tx b { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: var(--ink); }
.pro-tx b span { background: linear-gradient(135deg, #F5C451, #E0AC45); color: #3D2A00; font-size: 13px; font-weight: 900; font-style: italic; padding: 3px 8px; border-radius: 6px; }
.pro-tx small { display: block; font-size: 13.5px; color: #6B5A35; line-height: 1.4; margin-top: 8px; max-width: 220px; }
.pro-tx em { display: inline-block; font-style: normal; margin-top: 14px; background: #fff; border: 1.5px solid var(--ink); border-radius: 8px; padding: 8px 18px; font-size: 15px; font-weight: 700; color: var(--ink); }
.pro-coin { position: absolute; right: -16px; bottom: -6px; width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE7A3, #F2B93B 60%, #C98A12); transform: rotate(-18deg) scaleY(.82); box-shadow: 10px 8px 0 #B97C0C, 0 14px 30px rgba(201,138,18,.35); display: grid; place-items: center; }
.pro-coin i { font-style: normal; width: 84px; height: 84px; border-radius: 50%; border: 4px solid rgba(255,255,255,.6); display: grid; place-items: center; font-size: 40px; font-weight: 800; color: rgba(255,255,255,.9); }

/* Menu (bayein se) */
.mn-bg { position: fixed; inset: 0; background: rgba(17,24,39,.45); z-index: 80; display: none; }
.mn-bg.show { display: block; }
.mn { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; max-width: 82%; background: #fff; z-index: 81; transform: translateX(-100%); transition: transform .25s; overflow-y: auto; padding-bottom: 30px; }
.mn.show { transform: none; }
.mn-h { background: #16916B; color: #fff; padding: 22px 18px 16px; }
.mn-h b { display: block; font-size: 20px; font-weight: 800; }
.mn-h small { font-size: 13.5px; opacity: .85; }
.mn a, .mn button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 18px; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }
.mn i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 17px; flex: none; }

/* How page */
.how-top { margin-top: 16px; background: var(--sage-soft); border-radius: 18px; padding: 16px; }
.how-top b { font-size: 20px; color: var(--deep); }
.how-top p { font-size: 14.5px; color: var(--ink); margin-top: 4px; }
.how { display: grid; gap: 10px; margin-top: 14px; }
.how-s { display: flex; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; }
.how-s > i { font-style: normal; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 20px; }
.how-s b { font-size: 15.5px; color: var(--ink); }
.how-s p { font-size: 13.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }

/* ---------- Halka text (bahut bold Hindi bhaari dikhta tha) ---------- */
.hm-coins, .hh .rh-c b, .hh .rh-s b, .qc b, .sh h3, .sh-t, .tk-tx b, .ac-tx b, .hw-in b, .pro-tx b, .mn-h b, .how-s b, .how-top b, .lv-h .tx b, .lv-m b, .rh-chip { font-weight: 600; }
.qt, .ab em, .lv-h .tag, .lv-num, .rh-c em { font-weight: 600; }
.tk-b, .pro-tx em, .mn a, .mn button, .sh a, .lv-go, .hw-x { font-weight: 500; }
.pro-tx b span { font-weight: 700; }
.lv-top h2 { font-weight: 700; }
.hh .rh-c b { letter-spacing: 0; }

/* ---------- Level samjhein (badge strip + how it works) ---------- */
.lvb { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 16px 18px 14px; background: #fff; border-bottom: 1.5px solid var(--line); }
.lvb::-webkit-scrollbar { display: none; }
.hx { position: relative; flex: none; width: 74px; padding: 4px 0 12px; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: transform .2s; }
.hx.sel { transform: scale(1.1); }
.hx-o { width: 68px; height: 76px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, var(--a), var(--b)); display: grid; place-items: center; }
.hx-i { width: 54px; height: 61px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.45)); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.hx-i small { font-size: 10px; font-weight: 600; color: #374151; }
.hx-i b { font-size: 26px; font-weight: 700; color: #1F2937; margin-top: 2px; }
.hx-pro { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-style: italic; font-size: 11px; font-weight: 700; color: #3D2A00; background: linear-gradient(135deg, #FDE7A8, #E9B949); border-radius: 99px; padding: 1px 9px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.hx-dot { position: absolute; bottom: -2px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--green); }
.lvc { position: relative; margin-top: 18px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.lvc.is-pro { border-color: #E9B949; }
.lvc-tag { position: absolute; top: -1.5px; right: -1.5px; font-style: italic; font-size: 14px; font-weight: 700; color: #3D2A00; background: linear-gradient(135deg, #FDE7A8, #E9B949); border-radius: 0 14px 0 10px; padding: 3px 12px; }
.lvc b { display: block; font-size: 18px; font-weight: 600; line-height: 1.35; padding-right: 50px; }
.lvc .st { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #E5E7EB; color: #fff; font-size: 12px; margin-left: 3px; vertical-align: 2px; }
.lvc .st.on { background: var(--green); }
.lvc p { font-size: 14px; color: var(--muted); line-height: 1.45; margin-top: 4px; }
.lvc-buy { display: block; margin-top: 12px; text-align: center; background: linear-gradient(135deg, #FDE7A8, #E9B949); color: #3D2A00; border-radius: 10px; padding: 10px; font-size: 14.5px; font-weight: 600; }
.hiw { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 10px; }
.hw-c { padding: 14px 16px 16px; }
.hw-c + .hw-c { border-top: 1.5px solid var(--line); }
.hw-c > b { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.hw-r { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.hw-p { width: 112px; flex: none; }
.hw-p svg { width: 100%; display: block; overflow: visible; }
.hp-dash { fill: none; stroke: #C7CDD1; stroke-width: 3; stroke-dasharray: 4 5; }
.hp-trk { fill: none; stroke: #D7DCDF; stroke-width: 4; }
.hp-coin { fill: #FFF6D8; stroke: #F2DDB0; stroke-width: 1.5; }
.hp-g { fill: #9CA3AF; }
.hp-t { font-size: 11px; font-weight: 700; text-anchor: middle; }
.hw-t { flex: 1; min-width: 0; }
.hw-i { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hs-ic { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #111; font-size: 12px; }
.hs-x { font-size: 15px; font-weight: 600; color: var(--ink); }
.hs-w { width: 22px; height: 22px; border-radius: 50%; background: #F59E0B; display: inline-grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; margin: 0 3px; }
.hw-t p { font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 6px; }

/* Apni aadat (PRO) */
.lv-h.my { border-style: dashed; border-color: #E9B949; }
.lv-h.my.done { border-style: solid; }
.lv-h.my > i { background: #FFF6D8; }
.lv-h.my.lock { opacity: .7; border-color: var(--line); }
button.lv-h.my.add { width: 100%; font: inherit; text-align: left; cursor: pointer; background: #FFFBF0; }
.lv-h.my small a { color: var(--green); font-weight: 600; }

/* Sikke page (StepSetGo jaisa) */
.cp-top { position: relative; display: flex; align-items: center; margin: 16px 0 0; background: #fff; border-radius: 18px; padding: 20px 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 6px 18px rgba(17,24,39,.05); }
.cp-tx { flex: 1; min-width: 0; position: relative; z-index: 1; }
.cp-tx small { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; letter-spacing: .5px; color: var(--muted); }
.cp-tx small i { font-style: normal; }
.cp-tx > b { display: block; font-size: 58px; font-weight: 800; line-height: 1.1; color: var(--green); margin: 4px 0 6px; }
.cp-tx p { font-size: 14px; color: var(--muted); line-height: 1.45; max-width: 200px; }
.cp-hist { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 6px 16px; font-size: 14px; font-weight: 600; }
.cp-hist i { font-style: normal; font-size: 17px; line-height: 1; }
.cp-stack { position: absolute; right: 14px; top: 0; bottom: 0; width: 120px; }
.cp-stack i, .cp-stack span { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE7A3, #F2B93B 62%, #C98A12); box-shadow: 3px 3px 0 #B97C0C; }
.cp-stack i:nth-child(1) { width: 30px; height: 30px; right: 6px; top: 18px; transform: rotate(-20deg) scaleY(.85); }
.cp-stack i:nth-child(2) { width: 36px; height: 36px; right: 34px; top: 46px; transform: rotate(15deg) scaleY(.85); }
.cp-stack i:nth-child(3) { width: 26px; height: 26px; right: 70px; top: 30px; transform: rotate(-30deg) scaleY(.8); }
.cp-stack i:nth-child(4) { width: 34px; height: 34px; right: 72px; top: 86px; transform: rotate(20deg) scaleY(.85); }
.cp-stack i:nth-child(5) { width: 40px; height: 40px; right: 18px; top: 96px; transform: rotate(-10deg) scaleY(.85); }
.cp-stack span { width: 70px; height: 70px; right: 34px; bottom: 14px; transform: rotate(-14deg) scaleY(.78); box-shadow: 5px 5px 0 #B97C0C, 0 10px 20px rgba(201,138,18,.3); display: grid; place-items: center; font-size: 30px; font-weight: 800; color: rgba(255,255,255,.9); }
.cp-free { border-radius: 18px; overflow: hidden; background: #fff; border: 1.5px solid var(--line); }
.cp-fb { padding: 18px 16px 14px; }
.cp-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 8px; justify-items: center; }
.cp-dots span { width: 50px; height: 50px; border-radius: 50%; border: 3px solid #E5E7EB; display: grid; place-items: center; font-size: 19px; font-weight: 700; color: #9CA3AF; line-height: 1; }
.cp-dots span sup { font-size: 10px; vertical-align: top; margin-right: 1px; filter: grayscale(1); opacity: .6; }
.cp-dots span.nx { border-color: var(--green); background: var(--sage-soft); color: var(--green); }
.cp-dots span.nx sup { filter: none; opacity: 1; }
.cp-dots span.ok { border-color: var(--green); background: var(--green); color: #fff; font-size: 22px; }
.cp-collect { display: block; width: 100%; margin-top: 16px; border: 0; border-radius: 10px; background: var(--sage); color: #fff; font: inherit; font-size: 17px; font-weight: 700; padding: 12px; cursor: pointer; }
.cp-collect:disabled { background: #E5E7EB; color: var(--muted); cursor: default; }
.cp-fn { display: block; text-align: center; font-size: 13px; color: var(--muted); margin-top: 8px; }
.cp-know { display: flex; align-items: center; gap: 12px; background: #F3F4F6; padding: 14px 16px; }
.cp-logos { flex: none; display: grid; grid-template-columns: repeat(2, 30px); gap: 4px; }
.cp-logos span { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.cp-logos span.dark { color: #1F2937; }
.cp-kt { flex: 1; min-width: 0; }
.cp-kt p { font-size: 14px; color: var(--ink); line-height: 1.45; }
.cp-kt small { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.cp-know > em { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sage); color: #fff; font-style: normal; font-size: 19px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.cp-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 0 18px 6px; scrollbar-width: none; }
.cp-row::-webkit-scrollbar { display: none; }
.cp-row .cp-c { flex: 0 0 72%; scroll-snap-align: start; }
.cp-use { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-c { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 14px 14px; }
.cp-c > i { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 24px; margin-bottom: 26px; }
.cp-pro { background: linear-gradient(135deg, #F5C451, #E0AC45); color: #3D2A00; font-size: 12px; font-weight: 900; font-style: italic; padding: 2px 6px; border-radius: 5px; }
.cp-c small { font-size: 11.5px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.cp-c b { flex: 1; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.35; margin: 4px 0 14px; }
.cp-use .cp-c b { font-size: 15.5px; }
.cp-c a { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--ink); border-radius: 8px; padding: 9px 10px; font-size: 15px; font-weight: 600; color: var(--ink); background: #fff; }
.cp-c a.gold { border-color: transparent; background: linear-gradient(90deg, #F8D9A0, #F2C46B); }
.cp-c a em { font-style: normal; font-size: 18px; line-height: 1; }
#hisab { scroll-margin-top: 80px; }
.cp-dots span.wt { font-size: 14px; font-weight: 700; }

/* Aaj ka sabak (app/sabak.php) */
.sb-top { margin-top: 16px; background: #fff; border-radius: 18px; padding: 18px 16px 16px; box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 6px 18px rgba(17,24,39,.05); }
.sb-top > small { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.sb-top h2 { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-top: 2px; }
.sb-top.ok h2 { color: var(--green); }
.sb-top p { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sb-chips span { background: var(--sage-soft); color: var(--deep); border-radius: 99px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; }
.sb-chips span:nth-child(2) { background: var(--peach-soft); color: #7A5410; }
.sb-chips span:nth-child(3) { background: var(--pink-soft); color: #9B3550; }
.sb-cta { display: flex; align-items: center; gap: 12px; margin-top: 16px; background: var(--sage); color: #fff; border-radius: 12px; padding: 12px 14px; }
.sb-cta i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-style: normal; font-size: 14px; }
.sb-cta span { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.sb-cta span small { display: block; font-size: 12px; font-weight: 500; opacity: .9; }
.sb-cta em { font-style: normal; font-size: 22px; line-height: 1; }
.sb-cta.off { justify-content: center; background: #F3F4F6; color: var(--muted); font-size: 14.5px; font-weight: 600; }
.sb-gift { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; background: linear-gradient(90deg, #F8D9A0, #F2C46B); color: #3D2A00; border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 700; }
.sb-gift i { font-style: normal; font-size: 20px; }
.sb-next { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 2px 12px 10px; margin-top: 10px; }
.sb-next small { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.sb-s { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.sb-s.cur { border-color: var(--green); }
.sb-s summary { display: flex; align-items: center; gap: 10px; padding: 14px; cursor: pointer; list-style: none; }
.sb-s summary::-webkit-details-marker { display: none; }
.sb-s summary i { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--sky-soft); display: grid; place-items: center; font-style: normal; font-size: 15px; }
.sb-s.full summary i { background: var(--green); color: #fff; font-weight: 800; }
.sb-s summary b { flex: 1; font-size: 16px; font-weight: 700; color: var(--ink); }
.sb-s summary small { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.sb-s summary em { font-style: normal; font-size: 20px; color: var(--muted); line-height: 1; transition: transform .2s; }
.sb-s[open] summary em { transform: rotate(90deg); }
.sb-bar { height: 6px; background: #E5E7EB; border-radius: 9px; overflow: hidden; margin: 0 14px 6px; }
.sb-bar span { display: block; height: 100%; background: var(--sage); border-radius: 9px; }
.sb-l { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid #F1F2F4; }
.sb-l > span { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.sb-l.done > span { background: var(--sage-soft); color: var(--green); }
.sb-l.go > span { background: var(--sage); color: #fff; animation: sbp 1.8s infinite; }
.sb-l.lock > span { background: #F3F4F6; color: var(--muted); }
@keyframes sbp { 0%,100% { box-shadow: 0 0 0 0 rgba(34,166,123,.4); } 50% { box-shadow: 0 0 0 7px rgba(34,166,123,0); } }
.sb-l div { flex: 1; min-width: 0; }
.sb-l b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.sb-l small { display: block; font-size: 12.5px; color: var(--muted); }
.sb-l.go small { color: var(--green); font-weight: 600; }

/* Hero: "सिक्के लें" ring ke neeche; lamba number chhota */
.hh .rh-chip { top: auto; bottom: -10px; padding: 5px 12px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.hh .rh-c b.sm { font-size: 33px; }
.hh .rh-c em { font-size: 11px; font-weight: 600; background: rgba(255,255,255,.18); color: #fff; margin-top: 6px; }

/* Ring ke andar text fit (kadam 9,999 tak) */
.hh .rh-c { inset: 46px; }
.hh .rh-c b { font-size: 36px; }
.hh .rh-c b.sm { font-size: 28px; }
.hh .rh-c small { font-size: 12px; margin-top: 3px; }
.hh .rh-c em { font-size: 10px; padding: 2px 8px; margin-top: 4px; }

/* Ibadat */
.ib-nm { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #16916B, #128A67); color: #fff; }
.ib-nm > i { font-style: normal; width: 52px; height: 52px; flex: none; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 26px; }
.ib-nm div { flex: 1; min-width: 0; }
.ib-nm small { display: block; font-size: 13px; opacity: .85; }
.ib-nm b { display: block; font-size: 20px; font-weight: 700; line-height: 1.3; }
.ib-nm span { display: block; font-size: 13px; opacity: .85; }
.ib-nm em { font-style: normal; font-size: 24px; opacity: .8; }
.ib-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ib-g a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 6px 12px; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.ib-g i { font-style: normal; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 23px; }
.tk.done > i { background: #E7F6EF; }
.tk-b.ok { border-color: #BFE3D2; color: var(--green); background: #F2FAF6; cursor: default; }

/* Tasbih: aaj ki aadat */
.tz-tasks { margin-top: 14px; }
.tz-tasks > small { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.tz-t { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.tz-t b { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.tz-t span { font-size: 13.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tz-t i { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.tz-t i em { display: block; height: 100%; background: #F5C451; border-radius: 99px; transition: width .2s; }
.tz-t.ok span { color: var(--green); }
.tz-t.ok i em { background: var(--green); }

/* Recharge (gift card store me) */
.gc-trial { display: inline-block; vertical-align: middle; font-size: 11.5px; font-weight: 700; color: #8A6512; background: #FFF6D8; border: 1px solid #F2DDB0; border-radius: 99px; padding: 1px 8px; margin-left: 6px; }
.gs-mob { display: none; margin-top: 12px; text-align: left; }
.gs-mob label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.gs-mob input { width: 100%; font: inherit; font-size: 18px; letter-spacing: 1px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; }
.gs-mob input:focus { outline: none; border-color: var(--green); }
.gs-mob small { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; }

/* Bottom nav: Home beech me ubhra hua gol */
.nav a { font-size: 12.5px; white-space: nowrap; }
.nav a.hm, .nav a.hm.on { background: none; color: var(--sage-d); font-weight: 700; padding-top: 0; }
.nav a.hm span { width: 58px; height: 58px; margin-top: -30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #1BA37A, #128A67); border: 4px solid #fff; box-shadow: 0 6px 16px rgba(18,138,103,.35); }
.nav a.hm svg { stroke: #fff; width: 27px; height: 27px; }

/* Kadam sync button (sirf jab app aur server / Fit me fark ho) */
.hh .rh-sync { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 2; border: 0; background: #fff; color: #128A67; font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 99px; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.hh .rh-sync:disabled { opacity: .85; }

/* Home gol: sirf home par hara, baaki pages par saada */
.nav a.hm span { background: #fff; border-color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.nav a.hm svg { stroke: #5F655F; }
.nav a.hm { color: #5F655F; font-weight: 500; }
.nav a.hm.on span { background: linear-gradient(135deg, #1BA37A, #128A67); box-shadow: 0 6px 16px rgba(18,138,103,.35); }
.nav a.hm.on svg { stroke: #fff; }
.nav a.hm.on { color: var(--sage-d); font-weight: 700; }

/* Leaderboard: top 10 ke baad aapki rank */
.lb-gap { text-align: center; color: #B4BAC2; letter-spacing: 4px; padding: 4px 0; border-bottom: 1px solid #EEF0F2; }

/* Neeche kheench kar refresh */
.ptr { position: fixed; top: 6px; left: 50%; transform: translate(-50%, 0); width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.18); display: grid; place-items: center; z-index: 80; opacity: 0; pointer-events: none; }
.ptr svg { width: 20px; height: 20px; fill: none; stroke: #9AA3AD; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ptr.go svg { stroke: var(--green); }
.ptr.spin svg { stroke: var(--green); animation: ptrspin .8s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }

/* App tour */
.tour { position: fixed; inset: 0; z-index: 90; }
.tr-box { position: fixed; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(8,30,22,.72); transition: all .3s ease; pointer-events: none; outline: 2.5px solid #fff; }
.tr-tip { position: fixed; left: 16px; right: 16px; max-width: 420px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 16px 18px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.tr-tip small { color: var(--muted); font-size: 12px; font-weight: 700; }
.tr-tip b { display: block; font-size: 18px; color: var(--deep); margin-top: 2px; }
.tr-tip p { font-size: 14.5px; color: #374151; margin-top: 4px; line-height: 1.55; }
.tr-tip div { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.tr-skip { border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 4px; }
.tr-next { border: 0; background: var(--green); color: #fff; font: inherit; font-size: 15px; font-weight: 700; padding: 9px 20px; border-radius: 99px; }

/* PRO sujhaav popup */
.pp { position: fixed; inset: 0; z-index: 85; background: rgba(8,30,22,.6); display: none; place-items: end center; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }
.pp.show { display: grid; animation: ppfade .25s; }
.pp-c { position: relative; width: 100%; max-width: 420px; background: linear-gradient(180deg, #FFF8E6 0%, #fff 42%); border-radius: 28px; padding: 26px 22px 16px; text-align: center; animation: ppup .35s cubic-bezier(.2,.9,.3,1.2); }
.pp-x { position: absolute; top: 12px; right: 14px; border: 0; background: #F1F2F4; color: var(--muted); width: 30px; height: 30px; border-radius: 50%; font-size: 14px; }
.pp-crown { width: 66px; height: 66px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #FFE7A3, #F5C451); display: grid; place-items: center; font-size: 32px; box-shadow: 0 6px 18px rgba(224,172,69,.4); }
.pp-c h3 { font-family: 'Tiro Devanagari Hindi', serif; font-weight: 400; font-size: 25px; color: var(--deep); margin-top: 12px; }
.pp-emo { font-size: 15px; color: #4B5563; line-height: 1.6; margin-top: 6px; }
.pp-c ul { list-style: none; text-align: left; margin: 16px 0 18px; display: grid; gap: 10px; }
.pp-c li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.pp-c li i { font-style: normal; width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #FFF6D8; }
.pp-go { display: block; background: linear-gradient(135deg, #E9C065, #D9A63A); color: #3D2A04; font-weight: 800; font-size: 16px; padding: 14px; border-radius: 99px; text-decoration: none; }
.pp-no { border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; padding: 12px; }
@keyframes ppfade { from { opacity: 0; } }
@keyframes ppup { from { transform: translateY(60px); opacity: 0; } }

/* Swagat (naya install): slides → login */
body.ob { padding: 0; min-height: 100vh; background: #fff; overflow-x: hidden; }
.ob-top { position: fixed; top: 0; right: 0; padding: 14px 16px; z-index: 3; }
.ob-skip { border: 0; background: #F1F2F4; color: #4B5563; font: inherit; font-size: 14px; font-weight: 700; padding: 7px 16px; border-radius: 99px; }
.ob-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: calc(100vh - 130px); }
.ob-track::-webkit-scrollbar { display: none; }
.ob-s { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 28px 0; }
.ob-art { width: 200px; height: 200px; border-radius: 50%; display: grid; place-items: center; font-size: 96px; margin-bottom: 30px; }
.ob-s h1 { font-family: 'Tiro Devanagari Hindi', serif; font-weight: 400; font-size: 28px; color: var(--deep); line-height: 1.3; }
.ob-s p { font-size: 16px; color: #4B5563; line-height: 1.65; margin-top: 10px; max-width: 360px; }
.ob-foot { position: fixed; left: 0; right: 0; bottom: 0; padding: 0 24px calc(24px + env(safe-area-inset-bottom)); max-width: 460px; margin: 0 auto; }
.ob-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 18px; }
.ob-dots i { width: 8px; height: 8px; border-radius: 99px; background: #D5DCDA; transition: .2s; }
.ob-dots i.on { width: 24px; background: var(--green); }
.ob-login { position: fixed; inset: 0; background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform .35s ease; z-index: 5; }
body.ob-in .ob-login { transform: none; }
body.ob-fast .ob-login { transition: none; }
.ob-lh { background: linear-gradient(160deg, var(--deep), var(--green)); color: #fff; padding: 46px 24px 34px; border-radius: 0 0 32px 32px; text-align: center; }
.ob-logo { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; font-family: 'Tiro Devanagari Hindi', serif; font-size: 34px; }
.ob-lh h1 { font-family: 'Tiro Devanagari Hindi', serif; font-weight: 400; font-size: 27px; }
.ob-lh p { font-size: 14.5px; opacity: .9; margin-top: 4px; }
.ob-login form { max-width: 440px; margin: 0 auto; padding: 24px 22px 6px; }
.ob-login label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.ob-login input { width: 100%; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; font-size: 17px; margin-bottom: 16px; font-family: inherit; background: var(--bg); }
.ob-login input:focus { outline: none; border-color: var(--green); background: #fff; }
.ob-err { color: #C0392B; font-size: 13.5px; font-weight: 600; margin: -6px 0 8px; min-height: 0; }
.ob-hint { display: block; font-size: 12.5px; color: var(--muted); margin: -8px 0 18px; }
.ob-safe { text-align: center; font-size: 12px; color: var(--muted); padding: 8px 26px 30px; max-width: 440px; margin: 0 auto; }

/* Tasbih / ibadat: "सिक्के लें" (lene baaki sikke) */
.tz-claim { display: block; width: 100%; margin: 4px 0 14px; border: 0; background: linear-gradient(135deg, #FFE7A3, #F5C451); color: #5C3F05; font: inherit; font-size: 16px; font-weight: 700; padding: 13px 16px; border-radius: 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(224,172,69,.35); animation: tzPulse 1.6s ease-in-out infinite; }
@keyframes tzPulse { 50% { transform: scale(1.025); } }

/* Jashn: sikke udkar khate me, "+N जुड़ गए" pop, level up */
.cf-coin { position: fixed; left: 0; top: 0; z-index: 95; width: 26px; height: 26px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 30%, #FFF4C2, #F5C451 45%, #D99A1E); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 2px 6px rgba(160,110,10,.4); }
.cf-coin::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid rgba(140,90,5,.35); }
.hm-coins.cf-bump, .cf-pill.cf-bump { animation: cfBump .25s ease; }
@keyframes cfBump { 50% { transform: scale(1.15); } }
.cf-pill { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 16px; z-index: 94; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #5C3F05; font-weight: 800; font-size: 16px; height: 44px; padding: 4px 14px 4px 4px; border-radius: 99px; box-shadow: 0 6px 20px rgba(0,0,0,.18); transform: translateY(-90px); transition: transform .35s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.cf-pill.show { transform: none; }
.cf-pill i { font-style: normal; width: 36px; height: 36px; border-radius: 50%; background: #FFD66B; display: grid; place-items: center; font-size: 18px; }
.cf-pop { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; pointer-events: none; padding: 24px; }
.cf-pop.show { pointer-events: auto; }
.cf-pop .cf-card { position: relative; overflow: hidden; background: #fff; border-radius: 26px; padding: 22px 28px 18px; text-align: center; min-width: 230px; max-width: 300px; box-shadow: 0 18px 50px rgba(0,0,0,.25); transform: scale(.4); opacity: 0; }
.cf-pop.show .cf-card { animation: cfPop .45s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes cfPop { to { transform: none; opacity: 1; } }
.cf-pop .cf-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(rgba(245,196,81,.16) 0 12deg, transparent 12deg 30deg); animation: cfSpin 8s linear infinite; }
@keyframes cfSpin { to { transform: rotate(360deg); } }
.cf-pop .cf-card > :not(.cf-rays) { position: relative; }
.cf-big { font-size: 52px; font-weight: 800; color: #D99A1E; line-height: 1.05; }
.cf-pop b { display: block; font-size: 19px; color: var(--deep); margin-top: 2px; }
.cf-pop p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.cf-cf { position: fixed; top: 0; z-index: 97; width: 8px; height: 13px; border-radius: 2px; pointer-events: none; }
.cf-lv { position: fixed; inset: 0; z-index: 92; background: radial-gradient(circle at 50% 40%, rgba(27,163,122,.95), rgba(10,51,36,.96)); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .3s; }
.cf-lv.show { opacity: 1; }
.cf-lc { text-align: center; color: #fff; width: 100%; max-width: 330px; transform: scale(.7); transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.cf-lv.show .cf-lc { transform: none; }
.cf-badge { position: relative; width: 150px; height: 150px; margin: 0 auto 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF4C2, #F5C451 50%, #D99A1E); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255,255,255,.12), 0 0 60px rgba(245,196,81,.7); animation: cfBadge .9s cubic-bezier(.3,1.4,.5,1) .15s both; }
.cf-badge::before { content: ''; position: absolute; inset: -60px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,231,163,.25) 0 10deg, transparent 10deg 24deg); animation: cfSpin 10s linear infinite; z-index: -1; }
.cf-badge span { font-size: 72px; font-weight: 800; color: #5C3F05; line-height: 1; }
@keyframes cfBadge { from { transform: scale(0) rotate(-200deg); } }
.cf-lc small { display: inline-block; background: rgba(255,255,255,.18); padding: 4px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; }
.cf-lc h3 { font-family: 'Tiro Devanagari Hindi', serif; font-weight: 400; font-size: 30px; margin: 10px 0 6px; color: #fff; }
.cf-lc p { margin: 0 0 20px; font-size: 15px; color: rgba(255,255,255,.88); line-height: 1.5; }
.cf-lc button { display: block; width: 100%; border: 0; font: inherit; cursor: pointer; border-radius: 14px; }
.cf-go { background: linear-gradient(135deg, #FFE7A3, #F5C451); color: #5C3F05; font-size: 17px; font-weight: 800; padding: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.cf-no { background: none; color: rgba(255,255,255,.8); font-size: 15px; padding: 12px; margin-top: 4px; }

/* Sikkon ka hisaab: din ke hisaab se */
.hs-intro { margin: -4px 0 10px; font-size: 13px; color: var(--muted); }
.hs-intro b { color: #B07A10; }
.hs-day { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 4px 8px; }
.hs-day b { font-size: 15px; color: var(--ink); }
.hs-day span { font-size: 13px; font-weight: 700; color: var(--brand); }
.hs-day span.neg { color: #C0392B; }
.hs-card { padding: 4px 16px; }
.hs-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #EEF0F2; }
.hs-row:last-child { border-bottom: 0; }
.hs-row > i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 20px; }
.hs-tx { min-width: 0; }
.hs-tx b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.hs-tx small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.hs-pend { display: inline-block; margin-top: 4px; font-style: normal; font-size: 11.5px; font-weight: 700; color: #8A5A00; background: #FFF1CC; padding: 2px 8px; border-radius: 99px; }
.hs-amt { text-align: right; font-size: 17px; font-weight: 800; color: var(--brand); white-space: nowrap; }
.hs-amt.neg { color: #C0392B; }
.hs-amt small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }